npm - @ponchia/ui - Versions diffs - 0.4.1 → 0.5.0 - Mend

@ponchia/ui 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (105) hide show

package/CHANGELOG.md +230 -8
package/MIGRATIONS.json +92 -0
package/README.md +9 -6
package/annotations/index.d.ts +280 -0
package/annotations/index.js +522 -0
package/behaviors/carousel.js +197 -0
package/behaviors/combobox.js +195 -0
package/behaviors/command.js +187 -0
package/behaviors/connectors.js +96 -0
package/behaviors/crosshair.js +58 -0
package/behaviors/dialog.js +73 -0
package/behaviors/disclosure.js +25 -0
package/behaviors/dismissible.js +24 -0
package/behaviors/forms.js +158 -0
package/behaviors/glyph.js +109 -0
package/behaviors/index.d.ts +79 -0
package/behaviors/index.js +18 -1409
package/behaviors/internal.js +50 -0
package/behaviors/legend.js +46 -0
package/behaviors/menu.js +46 -0
package/behaviors/popover.js +108 -0
package/behaviors/spotlight.js +53 -0
package/behaviors/table.js +109 -0
package/behaviors/tabs.js +103 -0
package/behaviors/theme.js +82 -0
package/behaviors/toast.js +152 -0
package/classes/index.d.ts +280 -2
package/classes/index.js +313 -2
package/connectors/index.d.ts +71 -0
package/connectors/index.js +179 -0
package/css/analytical.css +21 -0
package/css/annotations.css +292 -0
package/css/command.css +97 -0
package/css/connectors.css +93 -0
package/css/crosshair.css +100 -0
package/css/feedback.css +51 -0
package/css/fonts.css +11 -7
package/css/generated.css +117 -0
package/css/legend.css +268 -0
package/css/marks.css +144 -0
package/css/primitives.css +18 -0
package/css/report.css +12 -31
package/css/selection.css +46 -0
package/css/sources.css +179 -0
package/css/spotlight.css +104 -0
package/css/state.css +121 -0
package/css/tokens.css +25 -37
package/css/workbench.css +83 -0
package/dist/bronto.css +1 -1
package/dist/css/analytical.css +1 -0
package/dist/css/annotations.css +1 -0
package/dist/css/command.css +1 -0
package/dist/css/connectors.css +1 -0
package/dist/css/crosshair.css +1 -0
package/dist/css/feedback.css +1 -1
package/dist/css/fonts.css +1 -1
package/dist/css/generated.css +1 -0
package/dist/css/legend.css +1 -0
package/dist/css/marks.css +1 -0
package/dist/css/primitives.css +1 -1
package/dist/css/report.css +1 -1
package/dist/css/selection.css +1 -0
package/dist/css/sources.css +1 -0
package/dist/css/spotlight.css +1 -0
package/dist/css/state.css +1 -0
package/dist/css/workbench.css +1 -0
package/docs/adr/0003-theme-model.md +7 -4
package/docs/annotations.md +345 -0
package/docs/architecture.md +202 -0
package/docs/command.md +95 -0
package/docs/connectors.md +91 -0
package/docs/crosshair.md +63 -0
package/docs/generated.md +91 -0
package/docs/legends.md +168 -0
package/docs/marks.md +86 -0
package/docs/reference.md +309 -3
package/docs/reporting.md +49 -14
package/docs/selection.md +40 -0
package/docs/sources.md +110 -0
package/docs/spotlight.md +78 -0
package/docs/stability.md +16 -1
package/docs/state.md +85 -0
package/docs/usage.md +22 -0
package/docs/workbench.md +72 -0
package/fonts/doto-400.woff2 +0 -0
package/fonts/doto-500.woff2 +0 -0
package/fonts/doto-600.woff2 +0 -0
package/fonts/doto-700.woff2 +0 -0
package/fonts/doto-800.woff2 +0 -0
package/fonts/doto-900.woff2 +0 -0
package/llms.txt +229 -6
package/package.json +69 -4
package/qwik/index.d.ts +5 -0
package/qwik/index.js +20 -0
package/react/index.d.ts +5 -0
package/react/index.js +10 -0
package/solid/index.d.ts +5 -0
package/solid/index.js +10 -0
package/tokens/index.js +9 -5
package/fonts/doto-400.ttf +0 -0
package/fonts/doto-500.ttf +0 -0
package/fonts/doto-600.ttf +0 -0
package/fonts/doto-700.ttf +0 -0
package/fonts/doto-800.ttf +0 -0
package/fonts/doto-900.ttf +0 -0

package/behaviors/crosshair.js ADDED Viewed

@@ -0,0 +1,58 @@
+import { hasDom, noop, bindOnce } from './internal.js';
+/**
+ * Track the pointer over a plot and drive a crosshair. Each
+ * `[data-bronto-crosshair]` is the plot; it contains a `.ui-crosshair` overlay.
+ * On pointer move the behavior sets `--crosshair-x/y` (pixels within the plot)
+ * on the overlay, marks it `.is-active`, and dispatches
+ * `bronto:crosshair:move` with `{ x, y, fx, fy }` (px + 0..1 fractions);
+ * `bronto:crosshair:leave` on exit.
+ *
+ * Bronto reports WHERE the pointer is — it does not find the nearest datum or
+ * map pixels to data values (that needs the host's scales). SSR-safe,
+ * idempotent per plot; returns a cleanup function.
+ */
+export function initCrosshair({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const plots = [];
+  if (host !== document && host.matches?.('[data-bronto-crosshair]')) plots.push(host);
+  plots.push(...host.querySelectorAll('[data-bronto-crosshair]'));
+  if (!plots.length) return noop;
+  const cleanups = [];
+  for (const plot of plots) {
+    const overlay = plot.querySelector('.ui-crosshair');
+    if (!overlay) continue;
+    const onMove = (e) => {
+      const r = plot.getBoundingClientRect();
+      if (!r.width || !r.height) return;
+      const x = e.clientX - r.left;
+      const y = e.clientY - r.top;
+      overlay.style.setProperty('--crosshair-x', `${x}px`);
+      overlay.style.setProperty('--crosshair-y', `${y}px`);
+      overlay.classList.add('is-active');
+      plot.dispatchEvent(
+        new CustomEvent('bronto:crosshair:move', {
+          bubbles: true,
+          detail: { x, y, fx: x / r.width, fy: y / r.height },
+        }),
+      );
+    };
+    const onLeave = () => {
+      overlay.classList.remove('is-active');
+      plot.dispatchEvent(new CustomEvent('bronto:crosshair:leave', { bubbles: true }));
+    };
+    cleanups.push(
+      bindOnce(plot, 'crosshair', () => {
+        plot.addEventListener('pointermove', onMove);
+        plot.addEventListener('pointerleave', onLeave);
+        return () => {
+          plot.removeEventListener('pointermove', onMove);
+          plot.removeEventListener('pointerleave', onLeave);
+        };
+      }),
+    );
+  }
+  return () => cleanups.forEach((fn) => fn());
+}

package/behaviors/dialog.js ADDED Viewed

@@ -0,0 +1,73 @@
+import { hasDom, noop, bindOnce, byIdInHost } from './internal.js';
+/**
+ * Wire native <dialog> open/close glue (the one bit <dialog> can't do
+ * declaratively). Click `[data-bronto-open="dialogId"]` calls
+ * `showModal()` on `#dialogId`; click `[data-bronto-close]` closes the
+ * nearest enclosing <dialog>. Clicking the backdrop of a dialog that has
+ * `[data-bronto-dialog-light]` closes it too. On open the trigger is
+ * remembered and focus is returned to it on *every* close path (Esc,
+ * close button, backdrop light-dismiss, programmatic) via the native
+ * `close` event, so keyboard/SR users are never dropped at `<body>`.
+ * SSR-safe and idempotent; returns cleanup.
+ *
+ * `root` scopes delegated triggers (default `document`). Controlled targets are
+ * resolved root-first, then document-wide, so scoped islands win duplicate-id
+ * conflicts without breaking body/portal-mounted overlays.
+ */
+export function initDialog({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const managedDialogs = new WeakSet();
+  const canManageDialog = (dlg, origin) => host.contains(origin) || managedDialogs.has(dlg);
+  const openFrom = (opener) => {
+    const dlg = byIdInHost(host, opener.getAttribute('data-bronto-open'));
+    if (!dlg || typeof dlg.showModal !== 'function' || dlg.open) return;
+    managedDialogs.add(dlg);
+    dlg.addEventListener(
+      'close',
+      () => {
+        if (opener.isConnected && typeof opener.focus === 'function') opener.focus();
+      },
+      { once: true },
+    );
+    dlg.showModal();
+  };
+  const closeFrom = (closer) => {
+    const dlg = closer.closest('dialog');
+    if (dlg && dlg.open && canManageDialog(dlg, closer)) dlg.close();
+  };
+  const lightDismiss = (dlg) => {
+    if (
+      dlg.tagName === 'DIALOG' &&
+      dlg.open &&
+      dlg.hasAttribute('data-bronto-dialog-light') &&
+      canManageDialog(dlg, dlg)
+    ) {
+      dlg.close();
+    }
+  };
+  const onClick = (e) => {
+    const opener = e.target.closest('[data-bronto-open]');
+    if (opener && host.contains(opener)) {
+      openFrom(opener);
+      return;
+    }
+    const closer = e.target.closest('[data-bronto-close]');
+    if (closer) {
+      closeFrom(closer);
+      return;
+    }
+    // Light-dismiss: a click whose target is the <dialog> itself is the
+    // backdrop (content sits in child elements).
+    lightDismiss(e.target);
+  };
+  return bindOnce(host, 'dialog', () => {
+    document.addEventListener('click', onClick);
+    return () => document.removeEventListener('click', onClick);
+  });
+}

package/behaviors/disclosure.js ADDED Viewed

@@ -0,0 +1,25 @@
+import { hasDom, noop, bindOnce, byIdInHost } from './internal.js';
+/**
+ * Disclosure: a `[data-bronto-disclosure]` trigger toggles the element
+ * referenced by its `aria-controls` id, keeping `aria-expanded` and the
+ * panel's `hidden` attribute in sync.
+ */
+export function initDisclosure({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const onClick = (e) => {
+    const trigger = e.target.closest('[data-bronto-disclosure]');
+    if (!trigger || !host.contains(trigger)) return;
+    const id = trigger.getAttribute('aria-controls');
+    const panel = byIdInHost(host, id);
+    if (!panel) return;
+    const open = trigger.getAttribute('aria-expanded') === 'true';
+    trigger.setAttribute('aria-expanded', String(!open));
+    panel.hidden = open;
+  };
+  return bindOnce(host, 'disclosure', () => {
+    host.addEventListener('click', onClick);
+    return () => host.removeEventListener('click', onClick);
+  });
+}

package/behaviors/dismissible.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { hasDom, noop, bindOnce, closestSafe } from './internal.js';
+/**
+ * Click on `[data-bronto-dismiss]` removes the nearest ancestor matching
+ * `[data-bronto-dismissible]` (or the selector given as the attribute
+ * value). Emits a cancelable `bronto:dismiss` event first.
+ */
+export function dismissible({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const onClick = (e) => {
+    const btn = e.target.closest('[data-bronto-dismiss]');
+    if (!btn || !host.contains(btn)) return;
+    const sel = btn.getAttribute('data-bronto-dismiss');
+    const target = sel ? closestSafe(btn, sel) : btn.closest('[data-bronto-dismissible]');
+    if (!target) return;
+    const ev = new CustomEvent('bronto:dismiss', { bubbles: true, cancelable: true });
+    if (target.dispatchEvent(ev)) target.remove();
+  };
+  return bindOnce(host, 'dismissible', () => {
+    host.addEventListener('click', onClick);
+    return () => host.removeEventListener('click', onClick);
+  });
+}

package/behaviors/forms.js ADDED Viewed

@@ -0,0 +1,158 @@
+import { hasDom, noop, bindOnce, nextFieldUid } from './internal.js';
+/**
+ * Accessible form validation glue for `<form data-bronto-validate>`.
+ * Progressive enhancement over the native Constraint Validation API —
+ * the framework already ships the `[aria-invalid]` / `.ui-hint--error`
+ * styling; this wires the a11y plumbing every consumer would otherwise
+ * re-implement (and usually get wrong):
+ *
+ *  - suppresses the native error bubbles (`form.noValidate`),
+ *  - on blur and on submit sets `aria-invalid` and writes the browser's
+ *    `validationMessage` into the field's error slot
+ *    (`[data-bronto-error]` inside the `.ui-field`, falling back to a
+ *    `.ui-hint`), linked via `aria-describedby`,
+ *  - on an invalid submit, fills the form's
+ *    `[data-bronto-error-summary]` (a `.ui-error-summary`) with
+ *    in-page links to each bad field, focuses it, and blocks submit.
+ *
+ * Pure enhancement: with JS off the form still submits and the browser
+ * validates natively. SSR-safe, idempotent; returns a cleanup function.
+ */
+export function initFormValidation({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const ensureId = (el, prefix) => {
+    if (!el.id) el.id = `${prefix}-${nextFieldUid()}`;
+    return el.id;
+  };
+  const slotFor = (control) => {
+    const field = control.closest('.ui-field');
+    if (!field) return null;
+    return field.querySelector('[data-bronto-error]') || field.querySelector('.ui-hint');
+  };
+  const link = (control, slot) => {
+    const slotId = ensureId(slot, 'bronto-err');
+    const ids = (control.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+    if (!ids.includes(slotId)) {
+      ids.push(slotId);
+      control.setAttribute('aria-describedby', ids.join(' '));
+    }
+  };
+  const validateField = (control) => {
+    if (!control.willValidate) return true;
+    const ok = control.validity.valid;
+    const slot = slotFor(control);
+    if (ok) {
+      control.removeAttribute('aria-invalid');
+      if (slot) {
+        slot.textContent = '';
+        if (slot.classList.contains('ui-hint')) slot.classList.remove('ui-hint--error');
+      }
+    } else {
+      control.setAttribute('aria-invalid', 'true');
+      if (slot) {
+        slot.textContent = control.validationMessage;
+        if (slot.classList.contains('ui-hint')) slot.classList.add('ui-hint--error');
+        link(control, slot);
+      }
+    }
+    return ok;
+  };
+  const controlsOf = (form) =>
+    [...form.elements].filter(
+      (el) => el.willValidate && el.type !== 'submit' && el.type !== 'button',
+    );
+  const refreshSummary = (form, invalid) => {
+    const summary = form.querySelector('[data-bronto-error-summary]');
+    if (!summary) return;
+    if (!invalid.length) {
+      summary.hidden = true;
+      summary.replaceChildren();
+      return;
+    }
+    const title = document.createElement('p');
+    title.className = 'ui-error-summary__title';
+    title.textContent = 'There is a problem';
+    const list = document.createElement('ul');
+    list.className = 'ui-error-summary__list';
+    for (const c of invalid) {
+      const id = ensureId(c, 'bronto-field');
+      const li = document.createElement('li');
+      const a = document.createElement('a');
+      a.href = `#${id}`;
+      a.textContent = c.validationMessage;
+      a.addEventListener('click', (e) => {
+        e.preventDefault();
+        c.focus();
+      });
+      li.appendChild(a);
+      list.appendChild(li);
+    }
+    summary.replaceChildren(title, list);
+    summary.setAttribute('role', 'alert');
+    summary.tabIndex = -1;
+    summary.hidden = false;
+  };
+  const onSubmit = (e) => {
+    const form = e.target.closest?.('[data-bronto-validate]');
+    if (!form) return;
+    form.noValidate = true;
+    const invalid = controlsOf(form).filter((c) => !validateField(c));
+    refreshSummary(form, invalid);
+    if (invalid.length) {
+      e.preventDefault();
+      const summary = form.querySelector('[data-bronto-error-summary]');
+      (summary && !summary.hidden ? summary : invalid[0]).focus();
+    }
+  };
+  const onBlur = (e) => {
+    const control = e.target;
+    if (!control.willValidate) return;
+    const form = control.closest?.('[data-bronto-validate]');
+    if (!form) return;
+    form.noValidate = true;
+    validateField(control);
+    const summary = form.querySelector('[data-bronto-error-summary]');
+    if (summary && !summary.hidden)
+      refreshSummary(
+        form,
+        controlsOf(form).filter((c) => !c.validity.valid),
+      );
+  };
+  return bindOnce(host, 'formValidation', () => {
+    // Suppress native bubbles UP FRONT for forms present at init. The
+    // in-handler `noValidate = true` only fires after the first
+    // submit/blur, so the very first invalid real-browser submit would
+    // otherwise show the native UA bubble instead of the Bronto
+    // summary — contradicting the documented contract. (Forms added
+    // after init are still covered by the in-handler set.)
+    // Feature-detect rather than `instanceof Element` — `Element` is not
+    // a guaranteed global (SSR / the no-DOM test env), and `host` is
+    // either `document` (no `.matches`) or a root Element.
+    const selfForm =
+      typeof host.matches === 'function' && host.matches('[data-bronto-validate]') ? [host] : [];
+    const forms = [...selfForm, ...(host.querySelectorAll?.('[data-bronto-validate]') ?? [])];
+    const priorNoValidate = new Map();
+    for (const f of forms) {
+      priorNoValidate.set(f, f.noValidate);
+      f.noValidate = true;
+    }
+    host.addEventListener('submit', onSubmit, true);
+    host.addEventListener('focusout', onBlur);
+    return () => {
+      host.removeEventListener('submit', onSubmit, true);
+      host.removeEventListener('focusout', onBlur);
+      for (const [f, v] of priorNoValidate) f.noValidate = v;
+    };
+  });
+}

package/behaviors/glyph.js ADDED Viewed

@@ -0,0 +1,109 @@
+import { hasDom, noop } from './internal.js';
+import { GLYPH_SIZE, glyphCells } from '../glyphs/glyphs.js';
+function restoreAttr(el, name, prev) {
+  if (prev === null) el.removeAttribute(name);
+  else el.setAttribute(name, prev);
+}
+/**
+ * Expand `[data-bronto-glyph="name"]` placeholders into a `.ui-dotmatrix`
+ * grid of GLYPH_SIZE² cells — the DOM counterpart to renderGlyph() from
+ * `@ponchia/ui/glyphs`, for when you'd rather drop a placeholder than inline
+ * the markup. Decorative by default (`aria-hidden`); add
+ * `data-bronto-glyph-label` to expose it as `role="img"`. An unknown glyph
+ * name is left untouched. Idempotent (skips an already-expanded host); the
+ * returned cleanup removes the cells and restores the original attributes.
+ */
+export function initDotGlyph({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const els = [];
+  if (host !== document && host.matches?.('[data-bronto-glyph]')) els.push(host);
+  els.push(...(host.querySelectorAll?.('[data-bronto-glyph]') ?? []));
+  const cleanups = [];
+  for (const el of els) {
+    // Scope to DIRECT-child cells (the ones we append) — so a placeholder that
+    // legitimately nests its own .ui-dotmatrix is neither mis-read as already
+    // expanded here nor have its inner cells removed by cleanup below.
+    if (el.querySelector(':scope > .ui-dotmatrix__cell')) continue; // already expanded
+    const cells = glyphCells(el.getAttribute('data-bronto-glyph'));
+    if (!cells.length) continue; // unknown glyph — leave the placeholder as-is
+    const label = el.getAttribute('data-bronto-glyph-label');
+    // `data-bronto-glyph-solid` → square, gapless pixel glyph (legible small),
+    // the DOM counterpart to renderGlyph's `solid` option. Implies glyph-only.
+    const solid = el.hasAttribute('data-bronto-glyph-solid');
+    // `data-bronto-glyph-anim="reveal|pulse"` → decorative animation (the DOM
+    // counterpart to renderGlyph's `anim`; reduced-motion-safe via CSS).
+    const animAttr = el.getAttribute('data-bronto-glyph-anim');
+    const animClass =
+      animAttr === 'reveal'
+        ? 'ui-dotmatrix--reveal'
+        : animAttr === 'pulse'
+          ? 'ui-dotmatrix--pulse'
+          : null;
+    const hadAnimClass = animClass ? el.classList.contains(animClass) : false;
+    const hadMatrix = el.classList.contains('ui-dotmatrix');
+    const hadCols = el.style.getPropertyValue('--dotmatrix-cols');
+    const hadRadius = el.style.getPropertyValue('--dotmatrix-dot-radius');
+    const hadGap = el.style.getPropertyValue('--dotmatrix-gap');
+    const hadAriaHidden = el.getAttribute('aria-hidden');
+    const hadRole = el.getAttribute('role');
+    const hadAriaLabel = el.getAttribute('aria-label');
+    el.classList.add('ui-dotmatrix');
+    if (animClass) el.classList.add(animClass);
+    el.style.setProperty('--dotmatrix-cols', String(GLYPH_SIZE));
+    if (solid) {
+      el.style.setProperty('--dotmatrix-dot-radius', '0');
+      el.style.setProperty('--dotmatrix-gap', '0');
+    }
+    if (label) {
+      el.setAttribute('role', 'img');
+      el.setAttribute('aria-label', label);
+      el.removeAttribute('aria-hidden'); // a labelled img must not also be hidden
+    } else {
+      el.setAttribute('aria-hidden', 'true');
+    }
+    const frag = document.createDocumentFragment();
+    cells.forEach((c, i) => {
+      const span = document.createElement('span');
+      span.className = !c.on
+        ? 'ui-dotmatrix__cell'
+        : c.tone === 'hot'
+          ? 'ui-dotmatrix__cell ui-dotmatrix__cell--hot'
+          : c.tone === 'accent'
+            ? 'ui-dotmatrix__cell ui-dotmatrix__cell--accent'
+            : 'ui-dotmatrix__cell';
+      if (!c.on && solid) span.style.background = 'transparent'; // glyph-only
+      if (animAttr === 'reveal') span.style.setProperty('--i', String(i)); // scan stagger
+      frag.appendChild(span);
+    });
+    el.appendChild(frag);
+    cleanups.push(() => {
+      el.querySelectorAll(':scope > .ui-dotmatrix__cell').forEach((n) => n.remove());
+      if (!hadMatrix) el.classList.remove('ui-dotmatrix');
+      if (animClass && !hadAnimClass) el.classList.remove(animClass);
+      if (solid) {
+        if (hadRadius) el.style.setProperty('--dotmatrix-dot-radius', hadRadius);
+        else el.style.removeProperty('--dotmatrix-dot-radius');
+        if (hadGap) el.style.setProperty('--dotmatrix-gap', hadGap);
+        else el.style.removeProperty('--dotmatrix-gap');
+      }
+      if (hadCols) el.style.setProperty('--dotmatrix-cols', hadCols);
+      else el.style.removeProperty('--dotmatrix-cols');
+      restoreAttr(el, 'aria-hidden', hadAriaHidden);
+      restoreAttr(el, 'role', hadRole);
+      restoreAttr(el, 'aria-label', hadAriaLabel);
+      // Don't leave behind empty class=""/style="" we ourselves created.
+      if (el.getAttribute('class') === '') el.removeAttribute('class');
+      if (el.getAttribute('style') === '') el.removeAttribute('style');
+    });
+  }
+  return () => cleanups.forEach((fn) => fn());
+}

package/behaviors/index.d.ts CHANGED Viewed

@@ -156,3 +156,82 @@ export declare function toast(message: string, opts?: ToastOpts): Cleanup;
  * attributes.
  */
 export declare function initDotGlyph(opts?: DelegateOpts): Cleanup;
+/** `bronto:legend:toggle` CustomEvent detail. `series` is the entry's
+ *  `data-series`, or its 0-based index when unset. `active` is the new state
+ *  (`true` ⇒ series shown). */
+export interface LegendToggleDetail {
+  series: string | number;
+  active: boolean;
+}
+/**
+ * Wire `[data-bronto-legend]` interactive legends. Each `.ui-legend__item` is a
+ * `<button aria-pressed>`; activating it flips `aria-pressed`, toggles
+ * `.is-inactive`, and dispatches `bronto:legend:toggle`
+ * ({@link LegendToggleDetail}) on the legend. Bronto owns the control + its
+ * state only — the host hides its own series and owns any `aria-live`
+ * announcement (`aria-pressed="true"` ⇒ series shown). SSR-safe, idempotent per
+ * host. Returns a cleanup function.
+ */
+export declare function initLegend(opts?: DelegateOpts): Cleanup;
+/**
+ * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is a
+ * `.ui-connector` SVG overlaying a positioned container; `data-from`/`data-to`
+ * are the ids of the elements to connect (with optional `data-shape`,
+ * `data-from-side`/`data-to-side`, `data-end`). Computes geometry via the
+ * `@ponchia/ui/connectors` helpers and redraws on resize/scroll. Bronto owns no
+ * layout. SSR-safe, idempotent per host; returns a cleanup that disconnects
+ * observers/listeners. Re-run after adding/removing connectors.
+ */
+export declare function initConnectors(opts?: DelegateOpts): Cleanup;
+/**
+ * Position a spotlight cutout over a target. Each `[data-bronto-spotlight]` is a
+ * `.ui-spotlight` overlay; `data-target` is the id of the element to highlight.
+ * Sets `--spot-x/y/w/h` and re-places on resize/scroll and when `data-target`
+ * changes. NOT a tour engine — the host owns step order/advancing/visibility.
+ * SSR-safe, idempotent per host; returns a cleanup function.
+ */
+export declare function initSpotlight(opts?: DelegateOpts): Cleanup;
+/** `bronto:crosshair:move` CustomEvent detail — pointer position over the plot
+ *  in pixels and as 0..1 fractions. Bronto reports where; mapping to data is
+ *  the host's. */
+export interface CrosshairMoveDetail {
+  x: number;
+  y: number;
+  fx: number;
+  fy: number;
+}
+/**
+ * Track the pointer over `[data-bronto-crosshair]` plots and drive a contained
+ * `.ui-crosshair` overlay: sets `--crosshair-x/y` (px), marks `.is-active`, and
+ * dispatches `bronto:crosshair:move` ({@link CrosshairMoveDetail}) /
+ * `bronto:crosshair:leave`. Reports the pointer position only — it does not find
+ * the nearest datum or map pixels to data. SSR-safe, idempotent per plot;
+ * returns a cleanup function.
+ */
+export declare function initCrosshair(opts?: DelegateOpts): Cleanup;
+/** `bronto:command:select` CustomEvent detail — the chosen command's value and
+ *  visible label. The host executes it; Bronto only filters and navigates. */
+export interface CommandSelectDetail {
+  value: string;
+  label: string;
+}
+/**
+ * Filter + keyboard-navigate a DOM-authored command list inside
+ * `[data-bronto-command]` (the `.ui-command` shell). Owns ids,
+ * `role=combobox/listbox/option`, `aria-activedescendant`, a roving active item,
+ * substring filtering (hiding empty groups), full keyboard
+ * (Down/Up/Home/End/Enter/Escape), and pointer select. Emits
+ * `bronto:command:select` ({@link CommandSelectDetail}) on choose and
+ * `bronto:command:close` on Escape; the host owns the action registry, routing,
+ * and execution. No global Cmd/Ctrl+K. SSR-safe, idempotent per instance;
+ * returns a cleanup function.
+ */
+export declare function initCommand(opts?: DelegateOpts): Cleanup;