Компоненты

Pulse использует Web Components. Общие элементы можно держать в движке, а уникальные для презентации — в её entry.js, чтобы они попадали в .pulse.

Встроенные компоненты

Компонент	Назначение
<stat-card value unit label>	число с анимацией счётчика
<bar-chart bars='[…]'>	диаграмма с растущими столбцами
<hotspot-image emoji points='[…]'>	интерактивная схема с точками

<stat-card value="24" unit="%" label="рост показателя"></stat-card>

<bar-chart bars='[
  {"label":"До","value":"10","h":40},
  {"label":"После","value":"24","h":100,"brand":true}
]'></bar-chart>

Компонент конкретной презентации

Создай его в presentations/<id>/entry.js:

class ProductCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button type="button">Подробнее</button>`;
    this.querySelector('button').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('pulse:track', {
        bubbles: true,
        detail: {
          id: 'product_card_open',
          desc: 'Открыта карточка продукта'
        }
      }));
    });
  }

  enter() {
    this.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250 });
  }
}

export function setup() {
  if (!customElements.get('product-card')) {
    customElements.define('product-card', ProductCard);
  }
}

Затем используй <product-card> в HTML слайда. Сборщик включит компонент в presentation.js внутри пакета.

Контракт с движком

• enter() — вызывается, когда слайд становится активным;
• reset() — вызывается при сбросе состояния;
• pulse:track — bubbling CustomEvent для пользовательской аналитики;
• disconnectedCallback() — место для остановки таймеров, видео и подписок при выгрузке слайда из DOM.

Общие компоненты, нужные каждой презентации, находятся в src/components/.