@govbr-ds/webcomponents 2.1.0 → 2.1.2

package/dist/collection/pages/scripts/component-controls.js

@@ -0,0 +1,600 @@
+(() => {
+  const MANAGED_CSS_START = '/* playground-controls:start */';
+  const MANAGED_CSS_END = '/* playground-controls:end */';
+  let manifestPromise = null;
+
+  const getBaseUrl = () => (typeof window.getBaseUrl === 'function' ? window.getBaseUrl() : '');
+
+  const loadManifest = () => {
+    if (!manifestPromise) {
+      manifestPromise = fetch(`${getBaseUrl()}/assets/component-controls.json`, { cache: 'no-cache' })
+        .then((response) => (response.ok ? response.json() : null))
+        .catch(() => null);
+    }
+    return manifestPromise;
+  };
+
+  const parseHtml = (html) => new DOMParser().parseFromString(html || '', 'text/html');
+
+  const serializeBody = (doc, booleanAttributes = []) => {
+    let html = doc.body.innerHTML.trim();
+    booleanAttributes.forEach((attribute) => {
+      const escapedAttribute = attribute.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      html = html.replace(new RegExp(`\\s${escapedAttribute}=""(?=\\s|>)`, 'gi'), ` ${attribute}`);
+    });
+    return html;
+  };
+
+  const normalizeControlValue = (value) =>
+    value === undefined || value === null || value === 'null' ? '' : String(value);
+
+  const getTargetElement = (doc, instance) =>
+    Array.from(doc.body.querySelectorAll(instance.tag))[instance.index] || null;
+
+  const findInstances = (html, components) => {
+    const doc = parseHtml(html);
+    const knownTags = new Set(components.map((component) => component.tag));
+    const counters = new Map();
+
+    return Array.from(doc.body.querySelectorAll('*'))
+      .filter((element) => knownTags.has(element.tagName.toLowerCase()))
+      .map((element) => {
+        const tag = element.tagName.toLowerCase();
+        const index = counters.get(tag) || 0;
+        counters.set(tag, index + 1);
+        return {
+          tag,
+          index,
+          label: counters.get(tag) > 1 ? `${tag} #${index + 1}` : tag,
+        };
+      });
+  };
+
+  const getSlotValue = (element, slotName) => {
+    if (!element) return '';
+    if (slotName === 'default') return element.innerHTML.trim();
+    const slotElement = element.querySelector(`[slot="${slotName}"]`);
+    return slotElement?.innerHTML.trim() || '';
+  };
+
+  const updateManagedCss = (currentCss, tag, partValues, scopeSelector = '') => {
+    const selectorPrefix = scopeSelector.trim();
+    const rules = Object.entries(partValues)
+      .filter(([, value]) => value.trim().length > 0)
+      .map(
+        ([part, value]) => `${selectorPrefix ? `${selectorPrefix} ` : ''}${tag}::part(${part}) {\n  ${value.trim()}\n}`,
+      )
+      .join('\n\n');
+    const block = rules ? `${MANAGED_CSS_START}\n${rules}\n${MANAGED_CSS_END}` : '';
+    const pattern = new RegExp(
+      `\\n?${MANAGED_CSS_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}[\\s\\S]*?${MANAGED_CSS_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\n?`,
+    );
+    const withoutBlock = currentCss.replace(pattern, '').trimEnd();
+    return block ? `${withoutBlock}${withoutBlock ? '\n\n' : ''}${block}` : withoutBlock;
+  };
+
+  const createField = (label, description) => {
+    const field = document.createElement('div');
+    field.className = 'wbc-component-controls-field';
+    const title = document.createElement('div');
+    title.className = 'wbc-component-controls-field__name';
+    title.textContent = label;
+    field.appendChild(title);
+    const help = document.createElement('p');
+    help.className = 'wbc-component-controls-field__description';
+    help.textContent = description || 'Sem descrição.';
+    field.appendChild(help);
+    return field;
+  };
+
+  const setControlValue = (control, value) => {
+    const normalized = normalizeControlValue(value);
+    control.value = normalized;
+    if (normalized) control.setAttribute('value', normalized);
+    else control.removeAttribute('value');
+    requestAnimationFrame(() => {
+      control.value = normalized;
+    });
+  };
+
+  const createControlButton = (isCollapsed, ariaLabel, onClick) => {
+    const button = document.createElement('br-button');
+    button.setAttribute('density', 'small');
+    button.setAttribute('emphasis', 'secondary');
+    button.setAttribute('shape', 'circle');
+    button.setAttribute('aria-label', ariaLabel);
+
+    const icon = document.createElement('i');
+    icon.className = isCollapsed ? 'fas fa-chevron-down' : 'fas fa-chevron-up';
+    button.appendChild(icon);
+
+    button.addEventListener('click', onClick);
+    return button;
+  };
+
+  const createTextControl = ({ label, placeholder, type = 'text', value }) => {
+    const input = document.createElement('br-input');
+    input.setAttribute('aria-label', label);
+    input.setAttribute('type', type);
+    input.setAttribute('density', 'small');
+    setControlValue(input, value);
+    if (placeholder) input.setAttribute('placeholder', placeholder);
+    return input;
+  };
+
+  const createSelectControl = ({ label, options, value }) => {
+    const select = document.createElement('br-select');
+    select.setAttribute('aria-label', label);
+    select.setAttribute('density', 'small');
+    select.options = options;
+    setControlValue(select, value);
+    return select;
+  };
+
+  const createCheckboxControl = ({ checked, label }) => {
+    const checkbox = document.createElement('br-checkbox');
+    checkbox.setAttribute('name', label);
+    checkbox.setAttribute('label', label);
+    checkbox.setAttribute('label-hidden', 'true');
+    checkbox.checked = Boolean(checked);
+    return checkbox;
+  };
+
+  const createDeprecatedStatusTag = () => {
+    const tooltip = document.createElement('br-tooltip');
+    tooltip.className = 'wbc-control-deprecated-status';
+    tooltip.setAttribute('position', 'top');
+    tooltip.setAttribute('aria-label', 'Status: Depreciado');
+
+    const tag = document.createElement('br-tag');
+    tag.setAttribute('slot', 'trigger');
+    tag.setAttribute('label', 'Depreciado');
+    tag.setAttribute('bg-color', 'var(--danger)');
+
+    const description = document.createElement('span');
+    description.setAttribute('slot', 'content');
+    description.textContent = 'Depreciado';
+    tooltip.append(tag, description);
+    return tooltip;
+  };
+
+  const createSection = (state, id, title) => {
+    const section = document.createElement('section');
+    section.className = 'wbc-component-controls-section';
+    if (state.collapsedSections[id]) section.classList.add('is-collapsed');
+
+    const header = document.createElement('div');
+    header.className = 'wbc-component-controls-section__header';
+    header.style.cursor = 'pointer';
+    const heading = document.createElement('h4');
+    heading.textContent = title;
+
+    const toggleSection = () => {
+      state.collapsedSections[id] = !state.collapsedSections[id];
+      scheduleRenderControls(state.root, state);
+    };
+
+    const toggle = createControlButton(
+      state.collapsedSections[id],
+      state.collapsedSections[id] ? `Expandir ${title}` : `Recolher ${title}`,
+      (e) => {
+        e.stopPropagation();
+        toggleSection();
+      },
+    );
+    toggle.setAttribute('aria-expanded', String(!state.collapsedSections[id]));
+    header.addEventListener('click', toggleSection);
+
+    const body = document.createElement('div');
+    body.className = 'wbc-component-controls-section__body';
+    header.append(heading, toggle);
+    section.append(header, body);
+    return section;
+  };
+
+  const appendField = (section, field) => {
+    section?.querySelector('.wbc-component-controls-section__body')?.appendChild(field);
+  };
+
+  const getPropertyValue = (element, prop) => {
+    if (!element) return '';
+    const propName = prop.fieldName || prop.attribute;
+    const value = element[propName] !== undefined ? element[propName] : element.getAttribute(prop.attribute);
+    return value === null || value === undefined ? '' : String(value);
+  };
+
+  const createPropertyControl = (prop, rawValue, selectedElement) => {
+    if (prop.control === 'checkbox') {
+      return createCheckboxControl({
+        checked: selectedElement?.hasAttribute(prop.attribute) || false,
+        label: prop.attribute,
+      });
+    }
+    if (prop.control === 'select') {
+      return createSelectControl({
+        label: prop.attribute,
+        options: [
+          { label: `(padrão${prop.default ? `: ${prop.default}` : ''})`, value: '', selected: !rawValue },
+          ...(prop.values || []).map((value) => ({ label: value, value, selected: value === rawValue })),
+        ],
+        value: rawValue,
+      });
+    }
+    return createTextControl({
+      label: prop.attribute,
+      placeholder: prop.default,
+      type: prop.control === 'number' ? 'number' : 'text',
+      value: rawValue,
+    });
+  };
+
+  const updateCheckboxProperty = (target, event, input, prop) => {
+    const isChecked = event.type === 'checkedChange' ? event.detail : input.checked;
+    if (isChecked) target.setAttribute(prop.attribute, '');
+    else target.removeAttribute(prop.attribute);
+  };
+
+  const updateValueProperty = (target, event, input, prop) => {
+    const newValue = event.detail !== undefined ? event.detail : input.value;
+    const normalized = normalizeControlValue(newValue);
+    if (normalized.trim().length > 0) target.setAttribute(prop.attribute, normalized);
+    else target.removeAttribute(prop.attribute);
+  };
+
+  const applyPropertyUpdate = ({ event, input, prop, definition, getHtml, selected, setHtml, render }) => {
+    const nextDoc = parseHtml(getHtml());
+    const target = getTargetElement(nextDoc, selected);
+    if (!target) return;
+
+    const update = prop.control === 'checkbox' ? updateCheckboxProperty : updateValueProperty;
+    update(target, event, input, prop);
+
+    const booleanAttributes = definition.props
+      .filter(({ control }) => control === 'checkbox')
+      .map(({ attribute }) => attribute);
+    const savedScrollY = window.scrollY || document.documentElement.scrollTop || 0;
+    setHtml(serializeBody(nextDoc, booleanAttributes));
+    render();
+    window.scrollTo(0, savedScrollY);
+  };
+
+  const createPropertyRow = ({ prop, definition, getHtml, root, selected, selectedElement, setHtml, state }) => {
+    const rawValue = getPropertyValue(selectedElement, prop);
+    const input = createPropertyControl(prop, rawValue, selectedElement);
+    const update = (event) =>
+      applyPropertyUpdate({
+        event,
+        input,
+        prop,
+        definition,
+        getHtml,
+        selected,
+        setHtml,
+        render: () => scheduleRenderControls(root, state),
+      });
+    input.addEventListener(prop.control === 'checkbox' ? 'checkedChange' : 'valueChange', update);
+
+    const tr = document.createElement('tr');
+    const nameTd = document.createElement('td');
+    const propertyName = document.createElement('div');
+    propertyName.className = 'wbc-component-controls-property-name';
+    const codeEl = document.createElement('code');
+    codeEl.textContent = prop.attribute;
+    propertyName.appendChild(codeEl);
+    if (prop.deprecated) propertyName.appendChild(createDeprecatedStatusTag());
+    nameTd.appendChild(propertyName);
+
+    const descTd = document.createElement('td');
+    descTd.textContent = prop.description || 'Sem descrição.';
+    if (prop.values?.length) {
+      const options = document.createElement('small');
+      options.className = 'wbc-component-controls-field__options';
+      options.style.display = 'block';
+      options.style.marginTop = '4px';
+      options.textContent = `Opções: ${prop.values.join(', ')}`;
+      descTd.appendChild(options);
+    }
+
+    const valueTd = document.createElement('td');
+    valueTd.appendChild(input);
+    tr.append(nameTd, descTd, valueTd);
+    return tr;
+  };
+
+  const addColumnResizeHandles = (thead, cols) => {
+    // ponytail: column resize via drag on th right edge; upgrade path: extract to shared util if reused elsewhere
+    thead.querySelectorAll('th').forEach((th, i) => {
+      if (i >= cols.length - 1) return;
+      const handle = document.createElement('div');
+      handle.className = 'wbc-th-resize-handle';
+      th.style.position = 'relative';
+      th.appendChild(handle);
+      handle.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startW = th.offsetWidth;
+        const nextTh = th.nextElementSibling;
+        const nextStartW = nextTh ? nextTh.offsetWidth : 0;
+        const onMove = (ev) => {
+          const delta = ev.clientX - startX;
+          const newW = Math.max(60, startW + delta);
+          cols[i].style.width = `${newW}px`;
+          if (nextTh && i + 1 < cols.length) cols[i + 1].style.width = `${Math.max(60, nextStartW - delta)}px`;
+        };
+        const onUp = () => {
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+      });
+    });
+  };
+
+  const createPropsSection = ({ definition, getHtml, root, selected, selectedElement, setHtml, state }) => {
+    const section = createSection(state, 'props', 'Props');
+    if (state.collapsedSections.props) return section;
+    const table = document.createElement('table');
+    table.className = 'wbc-component-controls-table';
+    const colgroup = document.createElement('colgroup');
+    const cols = [20, 40, 40].map((pct) => {
+      const col = document.createElement('col');
+      col.style.width = `${pct}%`;
+      colgroup.appendChild(col);
+      return col;
+    });
+    table.appendChild(colgroup);
+
+    const thead = document.createElement('thead');
+    thead.innerHTML = '<tr><th>Propriedade</th><th>Descrição</th><th>Valores / Opções</th></tr>';
+    table.appendChild(thead);
+    addColumnResizeHandles(thead, cols);
+
+    const tbody = document.createElement('tbody');
+    const sortedProps = [...definition.props].sort((a, b) => a.attribute.localeCompare(b.attribute));
+    sortedProps.forEach((prop) => {
+      tbody.appendChild(
+        createPropertyRow({ prop, definition, getHtml, root, selected, selectedElement, setHtml, state }),
+      );
+    });
+    table.appendChild(tbody);
+    appendField(section, table);
+    return section;
+  };
+
+  const applySlotUpdate = ({ value, getHtml, selected, slot, setHtml }) => {
+    const savedScrollY = window.scrollY || document.documentElement.scrollTop || 0;
+    const nextDoc = parseHtml(getHtml());
+    const target = getTargetElement(nextDoc, selected);
+    if (!target) return;
+    if (slot.name === 'default') {
+      target.innerHTML = value;
+    } else {
+      const existing = target.querySelector(`[slot="${slot.name}"]`);
+      if (value.trim().length === 0) existing?.remove();
+      else if (existing) existing.innerHTML = value;
+      else {
+        const slotElement = nextDoc.createElement('span');
+        slotElement.setAttribute('slot', slot.name);
+        slotElement.innerHTML = value;
+        target.appendChild(slotElement);
+      }
+    }
+    setHtml(serializeBody(nextDoc));
+    window.scrollTo(0, savedScrollY);
+  };
+
+  const createSlotField = ({ getHtml, selected, selectedElement, setHtml, slot }) => {
+    const field = createField(slot.name, slot.description);
+    field.classList.add('is-wide');
+    const editorHost = document.createElement('div');
+    editorHost.className = 'wbc-example-editor-wrapper wbc-component-controls-mini-editor';
+    field.appendChild(editorHost);
+    const editorReady = window.WBCCodeEditorReady || Promise.resolve(window.WBCCodeEditor);
+    editorReady.then(() => {
+      if (!editorHost.isConnected) return;
+      window.WBCCodeEditor.create({
+        ariaLabel: `Conteúdo do slot ${slot.name}`,
+        onChange: (value) => applySlotUpdate({ value, getHtml, selected, slot, setHtml }),
+        parent: editorHost,
+        value: getSlotValue(selectedElement, slot.name),
+        language: 'html',
+      });
+    });
+    return field;
+  };
+
+  const createPartField = ({ getCss, part, partValues, partValuesByTag, selected, setCss, state }) => {
+    const field = createField(part.name, part.description);
+    field.classList.add('is-wide');
+    const editorHost = document.createElement('div');
+    editorHost.className = 'wbc-example-editor-wrapper wbc-component-controls-mini-editor';
+    field.appendChild(editorHost);
+    const editorReady = window.WBCCodeEditorReady || Promise.resolve(window.WBCCodeEditor);
+    editorReady.then(() => {
+      if (!editorHost.isConnected) return;
+      window.WBCCodeEditor.create({
+        ariaLabel: `CSS part ${part.name}`,
+        onChange: (value) => {
+          const savedScrollY = window.scrollY || document.documentElement.scrollTop || 0;
+          const nextPartValues = { ...partValues, [part.name]: value };
+          partValuesByTag[selected.tag] = nextPartValues;
+          setCss(updateManagedCss(getCss(), selected.tag, nextPartValues, state.scopeSelector));
+          window.scrollTo(0, savedScrollY);
+        },
+        parent: editorHost,
+        value: partValues[part.name] || '',
+        language: 'css',
+      });
+    });
+    return field;
+  };
+
+  const setInitialSelection = (instances, preferredTag, state) => {
+    if (state.selected && instances.some((instance) => `${instance.tag}:${instance.index}` === state.selected)) return;
+    const preferredInstance = instances.find((instance) => instance.tag === preferredTag);
+    const initialInstance = preferredInstance || instances[0];
+    state.selected = `${initialInstance.tag}:${initialInstance.index}`;
+  };
+
+  const appendInstanceSelector = (body, instances, root, state) => {
+    if (instances.length <= 1) return;
+    const field = document.createElement('div');
+    field.className = 'wbc-component-controls-field';
+    const select = createSelectControl({
+      label: 'Instância',
+      options: instances.map((instance) => {
+        const val = `${instance.tag}:${instance.index}`;
+        return { label: instance.label, value: val, selected: val === state.selected };
+      }),
+      value: state.selected,
+    });
+    select.addEventListener('valueChange', (event) => {
+      state.selected = event.detail;
+      scheduleRenderControls(root, state);
+    });
+    field.appendChild(select);
+    body.appendChild(field);
+  };
+
+  const appendSlotFields = (body, definition, getHtml, selected, selectedElement, setHtml, state) => {
+    const section = definition.slots.length > 0 ? createSection(state, 'slots', 'Slots') : null;
+    if (section) body.appendChild(section);
+    if (state.collapsedSections.slots) return;
+    definition.slots.forEach((slot) => {
+      appendField(section, createSlotField({ getHtml, selected, selectedElement, setHtml, slot }));
+    });
+  };
+
+  const appendPartFields = (body, definition, getCss, partValues, partValuesByTag, selected, setCss, state) => {
+    const section = definition.parts.length > 0 ? createSection(state, 'parts', 'CSS parts') : null;
+    if (section) body.appendChild(section);
+    if (state.collapsedSections.parts) return;
+    definition.parts.forEach((part) => {
+      appendField(section, createPartField({ getCss, part, partValues, partValuesByTag, selected, setCss, state }));
+    });
+  };
+
+  const scheduleRenderControls = (root, state) => {
+    if (state.renderFrame) cancelAnimationFrame(state.renderFrame);
+    state.renderFrame = requestAnimationFrame(() => {
+      state.renderFrame = null;
+      renderControls(root, state);
+    });
+  };
+
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: preserva renderização dos controles com sincronização de scroll
+  function renderControls(root, state) {
+    const { components, getCss, getHtml, partValuesByTag, preferredTag, setCss, setHtml } = state;
+    const instances = findInstances(getHtml(), components);
+
+    // ponytail: preservar posição de rolagem (janela e container interno) e altura para evitar pulo da página
+    const savedScrollY = window.scrollY || document.documentElement.scrollTop || 0;
+    const oldBody = root.querySelector('.wbc-component-controls-body');
+    const savedBodyScrollTop = oldBody ? oldBody.scrollTop : 0;
+    const savedRootScrollTop = root.scrollTop || 0;
+    const savedParentScrollTop = root.parentElement ? root.parentElement.scrollTop : 0;
+    const currentHeight = root.offsetHeight;
+    if (currentHeight > 0) {
+      root.style.minHeight = `${currentHeight}px`;
+    }
+
+    root.innerHTML = '';
+
+    const restoreScroll = (bodyEl) => {
+      if (bodyEl) bodyEl.scrollTop = savedBodyScrollTop;
+      root.scrollTop = savedRootScrollTop;
+      if (root.parentElement) root.parentElement.scrollTop = savedParentScrollTop;
+      requestAnimationFrame(() => {
+        root.style.minHeight = '';
+        window.scrollTo(0, savedScrollY);
+        if (bodyEl) bodyEl.scrollTop = savedBodyScrollTop;
+        root.scrollTop = savedRootScrollTop;
+        if (root.parentElement) root.parentElement.scrollTop = savedParentScrollTop;
+      });
+    };
+
+    if (instances.length === 0) {
+      root.className = 'wbc-component-controls is-empty';
+      root.innerHTML = '<span>Nenhum componente controlável encontrado neste exemplo.</span>';
+      restoreScroll(null);
+      return;
+    }
+
+    root.className = 'wbc-component-controls';
+    setInitialSelection(instances, preferredTag, state);
+
+    const selected =
+      instances.find((instance) => `${instance.tag}:${instance.index}` === state.selected) || instances[0];
+    const definition = components.find((component) => component.tag === selected.tag);
+    if (!definition) {
+      restoreScroll(null);
+      return;
+    }
+
+    const doc = parseHtml(getHtml());
+    const selectedElement = getTargetElement(doc, selected);
+    const partValues = partValuesByTag[selected.tag] || {};
+
+    const body = document.createElement('div');
+    body.className = 'wbc-component-controls-body';
+
+    appendInstanceSelector(body, instances, root, state);
+
+    const propsSection =
+      definition.props.length > 0
+        ? createPropsSection({ definition, getHtml, root, selected, selectedElement, setHtml, state })
+        : null;
+    if (propsSection) body.appendChild(propsSection);
+
+    appendSlotFields(body, definition, getHtml, selected, selectedElement, setHtml, state);
+    appendPartFields(body, definition, getCss, partValues, partValuesByTag, selected, setCss, state);
+
+    // ponytail: v1 controla a instância por tag + posição no HTML; se a ordem mudar manualmente, o upgrade é usar data-playground-target estável.
+    root.appendChild(body);
+
+    restoreScroll(body);
+  }
+
+  window.WBCComponentControls = {
+    async enhance({
+      editorContainer,
+      controlsTabItem,
+      getCss,
+      getHtml,
+      preferredTag = '',
+      scopeSelector,
+      setCss,
+      setHtml,
+    }) {
+      const manifest = await loadManifest();
+      const components = manifest?.components || [];
+      if (!editorContainer || components.length === 0) {
+        controlsTabItem?.remove();
+        return null;
+      }
+
+      const root = document.createElement('section');
+      if (controlsTabItem) controlsTabItem.appendChild(root);
+      else editorContainer.parentNode?.insertBefore(root, editorContainer.nextSibling);
+      const state = {
+        root,
+        collapsedSections: {
+          slots: true,
+          parts: true,
+        },
+        components,
+        getCss,
+        getHtml,
+        partValuesByTag: {},
+        preferredTag,
+        scopeSelector,
+        selected: '',
+        setCss,
+        setHtml,
+      };
+      renderControls(root, state);
+      return root;
+    },
+  };
+})();

package/dist/collection/pages/scripts/dev-event-console.js

@@ -0,0 +1,47 @@
+(() => {
+  const nativeEvents = ['change', 'click', 'input', 'submit'];
+  const datetimePickerChildren = new Set(['BR-DATE-PICKER', 'BR-DATETIME-INPUT', 'BR-TIME-PICKER']);
+
+  const getClosestComponent = (el) => {
+    let current = el;
+    while (current && current instanceof Element) {
+      if (current.tagName.includes('-')) return current;
+      current = current.parentElement || current.getRootNode?.().host;
+    }
+    return null;
+  };
+
+  const handleNativeEvent = (event, recorder) => {
+    if (
+      (event.type === 'input' || event.type === 'change') &&
+      event.composedPath().some((target) => target instanceof Element && datetimePickerChildren.has(target.tagName))
+    ) {
+      return;
+    }
+
+    const componentEl = getClosestComponent(event.target);
+    if (componentEl && recorder.preview.contains(componentEl)) recorder.addEvent(event, componentEl);
+  };
+
+  window.WBCRegisterNativeEventRecorder = (recorder) => {
+    nativeEvents.forEach((eventName) => {
+      recorder.preview.addEventListener(eventName, (event) => handleNativeEvent(event, recorder));
+    });
+  };
+  window.WBCActiveRecorders?.forEach(window.WBCRegisterNativeEventRecorder);
+
+  const originalDispatchEvent = EventTarget.prototype.dispatchEvent;
+  EventTarget.prototype.dispatchEvent = function dispatchEvent(event) {
+    const targetEl = event.target || this;
+    const componentEl = getClosestComponent(targetEl);
+    if (event instanceof CustomEvent && window.WBCActiveRecorders && componentEl) {
+      for (const recorder of window.WBCActiveRecorders) {
+        if (recorder.preview.contains(componentEl)) {
+          recorder.addEvent(event, componentEl);
+        }
+      }
+    }
+
+    return originalDispatchEvent.call(this, event);
+  };
+})();