@ponchia/ui 0.4.1 → 0.5.0

package/behaviors/carousel.js

@@ -0,0 +1,197 @@
+import { hasDom, noop, bindOnce } from './internal.js';
+
+/**
+ * Image carousel / gallery, built on CSS scroll-snap so touch + trackpad
+ * swipe (and momentum) are the browser's, not hand-rolled. This wires the
+ * parts scroll-snap can't do alone: prev/next buttons, keyboard nav, a
+ * thumbnail strip, the position counter, and ARIA — keeping a JS index in
+ * sync with the scroll position both ways.
+ *
+ * Markup: `[data-bronto-carousel]` containing a `.ui-carousel__viewport`
+ * of `.ui-carousel__slide` children; optionally
+ * `[data-bronto-carousel-prev]` / `[data-bronto-carousel-next]` controls,
+ * a `.ui-carousel__thumbs` list of `.ui-carousel__thumb` buttons, and a
+ * `.ui-carousel__status` counter slot. Add `data-bronto-carousel-loop` to
+ * wrap at the ends, `data-bronto-carousel-label` to name the region.
+ *
+ * A full-screen **lightbox** is the same markup inside a native
+ * `<dialog class="ui-lightbox">` opened by {@link initDialog}: the
+ * `<dialog>` provides the top layer, focus-trap, Escape and focus-return,
+ * so this behavior never touches focus management.
+ *
+ * Emits `bronto:change` ({ detail: { index } }) on every index change
+ * (button, key, thumbnail, or swipe). SSR-safe, idempotent per carousel;
+ * returns a cleanup function.
+ */
+export function initCarousel({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const boxes = [];
+  if (host !== document && host.matches?.('[data-bronto-carousel]')) boxes.push(host);
+  boxes.push(...(host.querySelectorAll?.('[data-bronto-carousel]') ?? []));
+  const cleanups = [];
+
+  for (const box of boxes) {
+    const viewport = box.querySelector('.ui-carousel__viewport');
+    if (!viewport) continue;
+    const slides = [...viewport.children].filter((el) =>
+      el.classList.contains('ui-carousel__slide'),
+    );
+    if (!slides.length) continue;
+    const n = slides.length;
+    const thumbs = [...box.querySelectorAll('.ui-carousel__thumb')];
+    const status = box.querySelector('.ui-carousel__status');
+    const prevBtn = box.querySelector('[data-bronto-carousel-prev]');
+    const nextBtn = box.querySelector('[data-bronto-carousel-next]');
+    const loop = box.hasAttribute('data-bronto-carousel-loop');
+
+    // ARIA scaffolding — pragmatic carousel semantics (not the full APG
+    // tablist), the same restraint initMenu takes.
+    viewport.setAttribute('role', 'group');
+    viewport.setAttribute('aria-roledescription', 'carousel');
+    if (!viewport.hasAttribute('aria-label'))
+      viewport.setAttribute(
+        'aria-label',
+        box.getAttribute('data-bronto-carousel-label') || 'Carousel',
+      );
+    if (!viewport.hasAttribute('tabindex')) viewport.tabIndex = 0;
+    slides.forEach((s, i) => {
+      s.setAttribute('role', 'group');
+      s.setAttribute('aria-roledescription', 'slide');
+      if (!s.hasAttribute('aria-label')) s.setAttribute('aria-label', `${i + 1} of ${n}`);
+    });
+    if (status) status.setAttribute('aria-live', 'polite');
+    for (const b of [prevBtn, nextBtn]) {
+      if (!b) continue;
+      if (b.tagName === 'BUTTON' && !b.hasAttribute('type')) b.type = 'button';
+    }
+    if (prevBtn && !prevBtn.hasAttribute('aria-label'))
+      prevBtn.setAttribute('aria-label', 'Previous');
+    if (nextBtn && !nextBtn.hasAttribute('aria-label')) nextBtn.setAttribute('aria-label', 'Next');
+
+    let index = Math.max(
+      0,
+      slides.findIndex((s) => s.hasAttribute('data-bronto-carousel-current')),
+    );
+
+    // While a button/keyboard nav is smooth-scrolling, the IntersectionObserver
+    // would observe the intermediate slides crossing its threshold and re-fire
+    // `bronto:change` for each — a feedback burst on a single Home→End jump.
+    // This flag makes the IO drive the index on *user* swipes only; a timeout
+    // (not the patchy `scrollend` event) releases it once the scroll settles.
+    let programmatic = false;
+    let progTimer = null;
+    const holdProgrammatic = () => {
+      programmatic = true;
+      if (progTimer) clearTimeout(progTimer);
+      progTimer = setTimeout(() => {
+        programmatic = false;
+      }, 500);
+      progTimer?.unref?.(); // don't keep a Node test process alive
+    };
+
+    const render = () => {
+      if (status) status.textContent = `${index + 1} / ${n}`;
+      thumbs.forEach((t, i) => {
+        if (i === index) t.setAttribute('aria-current', 'true');
+        else t.removeAttribute('aria-current');
+      });
+      if (prevBtn && !loop) prevBtn.disabled = index === 0;
+      if (nextBtn && !loop) nextBtn.disabled = index === n - 1;
+    };
+
+    const emit = () =>
+      box.dispatchEvent(new CustomEvent('bronto:change', { detail: { index }, bubbles: true }));
+
+    // jsdom (and any layout-less env) has no scrollIntoView; it's a pure
+    // affordance, so never let it break index/aria sync — same guard as
+    // initCombobox.
+    const reveal = (el) => {
+      try {
+        el?.scrollIntoView({ block: 'nearest', inline: 'center' });
+      } catch {
+        /* no layout — ignore */
+      }
+    };
+
+    const goTo = (i, { emitChange = true } = {}) => {
+      const next = loop ? (i + n) % n : Math.max(0, Math.min(n - 1, i));
+      const changed = next !== index;
+      index = next;
+      holdProgrammatic(); // suppress IO echo from the smooth-scroll this triggers
+      reveal(slides[index]);
+      reveal(thumbs[index]);
+      render();
+      if (changed && emitChange) emit();
+    };
+
+    const onKey = (e) => {
+      let target = null;
+      if (e.key === 'ArrowRight') target = index + 1;
+      else if (e.key === 'ArrowLeft') target = index - 1;
+      else if (e.key === 'Home') target = 0;
+      else if (e.key === 'End') target = n - 1;
+      else return;
+      e.preventDefault();
+      goTo(target);
+    };
+    const onClick = (e) => {
+      if (prevBtn && e.target.closest('[data-bronto-carousel-prev]')) {
+        goTo(index - 1);
+        return;
+      }
+      if (nextBtn && e.target.closest('[data-bronto-carousel-next]')) {
+        goTo(index + 1);
+        return;
+      }
+      const thumb = e.target.closest('.ui-carousel__thumb');
+      if (thumb) {
+        const i = thumbs.indexOf(thumb);
+        if (i >= 0) goTo(i);
+      }
+    };
+
+    // Swipe sync (enhancement): when the user scrolls the viewport, snap
+    // the JS index to the slide that's settled into view. Feature-detected
+    // so the buttons/keyboard still work where IntersectionObserver is
+    // absent (jsdom, older engines).
+    let io = null;
+    if (typeof IntersectionObserver === 'function') {
+      io = new IntersectionObserver(
+        (entries) => {
+          if (programmatic) return; // ignore the echo of a button/key-driven scroll
+          let best = null;
+          for (const ent of entries) {
+            if (ent.isIntersecting && (!best || ent.intersectionRatio > best.intersectionRatio))
+              best = ent;
+          }
+          if (!best) return;
+          const i = slides.indexOf(best.target);
+          if (i >= 0 && i !== index) {
+            index = i;
+            render();
+            reveal(thumbs[index]);
+            emit();
+          }
+        },
+        { root: viewport, threshold: 0.6 },
+      );
+      slides.forEach((s) => io.observe(s));
+    }
+
+    render();
+    const bound = bindOnce(box, 'carousel', () => {
+      viewport.addEventListener('keydown', onKey);
+      box.addEventListener('click', onClick);
+      return () => {
+        viewport.removeEventListener('keydown', onKey);
+        box.removeEventListener('click', onClick);
+        io?.disconnect();
+        if (progTimer) clearTimeout(progTimer);
+      };
+    });
+    cleanups.push(bound);
+  }
+
+  return () => cleanups.forEach((fn) => fn());
+}

package/behaviors/combobox.js

@@ -0,0 +1,195 @@
+import { hasDom, noop, bindOnce, nextFieldUid } from './internal.js';
+
+/**
+ * Editable combobox with a filtered listbox popup, implementing the
+ * WAI-ARIA APG combobox pattern (the widget the framework most lacked
+ * and consumers most often build badly). Dependency-free, no
+ * positioning library — the list is CSS-anchored under the input.
+ *
+ * Markup: `[data-bronto-combobox]` wrapping an `<input role="combobox">`
+ * (`.ui-combobox__input`) and a `<ul role="listbox">`
+ * (`.ui-combobox__list`) of `<li role="option">` (`.ui-combobox__option`,
+ * optional `data-value`). An optional `.ui-combobox__empty` shows when
+ * nothing matches. The behavior owns ids, `aria-expanded`,
+ * `aria-controls`, `aria-activedescendant`, roving active option,
+ * type-to-filter, full keyboard (Down/Up/Home/End/Enter/Escape/Tab),
+ * pointer select, and outside-click close; it emits a `bronto:change`
+ * CustomEvent ({ detail: { value } }) on selection. SSR-safe,
+ * idempotent per instance; returns a cleanup function.
+ */
+export function initCombobox({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const boxes = [];
+  if (host !== document && host.matches?.('[data-bronto-combobox]')) boxes.push(host);
+  boxes.push(...(host.querySelectorAll?.('[data-bronto-combobox]') ?? []));
+  const cleanups = [];
+
+  for (const box of boxes) {
+    const input = box.querySelector('[role="combobox"], .ui-combobox__input');
+    const list = box.querySelector('[role="listbox"], .ui-combobox__list');
+    if (!input || !list) continue;
+    const empty = box.querySelector('.ui-combobox__empty');
+    const options = [...list.querySelectorAll('[role="option"], .ui-combobox__option')];
+
+    const listId = list.id || (list.id = `bronto-cb-list-${nextFieldUid()}`);
+    options.forEach((o, i) => {
+      if (!o.id) o.id = `${listId}-opt-${i}`;
+      o.setAttribute('role', 'option');
+    });
+    list.setAttribute('role', 'listbox');
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-controls', listId);
+    input.setAttribute('aria-autocomplete', 'list');
+    input.setAttribute('aria-expanded', 'false');
+    input.setAttribute('autocomplete', 'off');
+    list.hidden = true;
+
+    let active = -1;
+    const visible = () => options.filter((o) => !o.hidden);
+
+    const setActive = (opt) => {
+      options.forEach((o) => o.classList.remove('is-active'));
+      if (opt) {
+        opt.classList.add('is-active');
+        input.setAttribute('aria-activedescendant', opt.id);
+        // jsdom's scrollIntoView throws "Not implemented"; it is a
+        // pure affordance, so never let it break keyboard nav.
+        try {
+          opt.scrollIntoView({ block: 'nearest' });
+        } catch {
+          /* non-DOM/headless environment — ignore */
+        }
+      } else {
+        input.removeAttribute('aria-activedescendant');
+      }
+    };
+
+    const open = () => {
+      if (!list.hidden) return;
+      list.hidden = false;
+      input.setAttribute('aria-expanded', 'true');
+    };
+    const close = () => {
+      list.hidden = true;
+      input.setAttribute('aria-expanded', 'false');
+      active = -1;
+      setActive(null);
+    };
+
+    const filter = () => {
+      const q = input.value.trim().toLowerCase();
+      let any = false;
+      for (const o of options) {
+        const match = !q || o.textContent.toLowerCase().includes(q);
+        o.hidden = !match;
+        if (match) any = true;
+      }
+      if (empty) empty.hidden = any;
+      // The active option may have just been filtered out — drop the
+      // stale activedescendant so Enter can't select a hidden option.
+      if (active >= 0 && options[active]?.hidden) {
+        active = -1;
+        setActive(null);
+      }
+      open();
+    };
+
+    const select = (opt) => {
+      input.value = opt.dataset.value ?? opt.textContent.trim();
+      options.forEach((o) => o.setAttribute('aria-selected', String(o === opt)));
+      close();
+      input.focus();
+      box.dispatchEvent(
+        new CustomEvent('bronto:change', {
+          detail: { value: input.value },
+          bubbles: true,
+        }),
+      );
+    };
+
+    const move = (delta) => {
+      const vis = visible();
+      if (!vis.length) return;
+      open();
+      const curIdx = vis.indexOf(options[active]);
+      let next = curIdx + delta;
+      if (next < 0) next = vis.length - 1;
+      if (next >= vis.length) next = 0;
+      active = options.indexOf(vis[next]);
+      setActive(options[active]);
+    };
+    const activateEdge = (which) => {
+      if (list.hidden) return false;
+      const v = visible();
+      if (!v.length) return true;
+      active = options.indexOf(which === 'first' ? v[0] : v[v.length - 1]);
+      setActive(options[active]);
+      return true;
+    };
+    const selectActive = () => {
+      if (list.hidden || active < 0 || options[active].hidden) return false;
+      select(options[active]);
+      return true;
+    };
+    const closeIfOpen = () => {
+      if (list.hidden) return false;
+      close();
+      return true;
+    };
+
+    const onInput = () => filter();
+    const onKey = (e) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          list.hidden ? filter() : move(1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          move(-1);
+          break;
+        case 'Home':
+          if (activateEdge('first')) e.preventDefault();
+          break;
+        case 'End':
+          if (activateEdge('last')) e.preventDefault();
+          break;
+        case 'Enter':
+          if (selectActive()) e.preventDefault();
+          break;
+        case 'Escape':
+          if (closeIfOpen()) e.preventDefault();
+          break;
+        case 'Tab':
+          close();
+          break;
+        default:
+          break;
+      }
+    };
+    const onOptionClick = (e) => {
+      const opt = e.target.closest('[role="option"], .ui-combobox__option');
+      if (opt) select(opt);
+    };
+    const onDocClick = (e) => {
+      if (!box.contains(e.target)) close();
+    };
+
+    const bound = bindOnce(box, 'combobox', () => {
+      input.addEventListener('input', onInput);
+      input.addEventListener('keydown', onKey);
+      list.addEventListener('click', onOptionClick);
+      document.addEventListener('click', onDocClick);
+      return () => {
+        input.removeEventListener('input', onInput);
+        input.removeEventListener('keydown', onKey);
+        list.removeEventListener('click', onOptionClick);
+        document.removeEventListener('click', onDocClick);
+      };
+    });
+    cleanups.push(bound);
+  }
+
+  return () => cleanups.forEach((fn) => fn());
+}

package/behaviors/command.js

@@ -0,0 +1,187 @@
+import { hasDom, noop, bindOnce, nextFieldUid } from './internal.js';
+
+/**
+ * Command palette — filter + keyboard-navigate a DOM-authored command list.
+ * The CSS shell (`.ui-command`) is opt-in; this wires the listbox behavior the
+ * shell needs. Bronto filters and navigates; the HOST owns the action registry,
+ * permission checks, routing, async effects, and command execution (it listens
+ * for `bronto:command:select`). There is no global Cmd/Ctrl+K — open the palette
+ * yourself (e.g. a `<dialog>` via `initDialog`).
+ *
+ * Markup: `[data-bronto-command]` wrapping an `<input>` (`.ui-command__input`)
+ * and a list (`.ui-command__list`) of `.ui-command__item` rows (optional
+ * `data-value`), interleaved with `.ui-command__group` labels and an optional
+ * `.ui-command__empty`. The behavior 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. It emits `bronto:command:select` ({ detail: { value, label } }) on
+ * choose and `bronto:command:close` on Escape. SSR-safe, idempotent per
+ * instance; returns a cleanup function.
+ */
+export function initCommand({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const palettes = [];
+  if (host !== document && host.matches?.('[data-bronto-command]')) palettes.push(host);
+  palettes.push(...(host.querySelectorAll?.('[data-bronto-command]') ?? []));
+  const cleanups = [];
+
+  for (const box of palettes) {
+    const input = box.querySelector('.ui-command__input, input');
+    const list = box.querySelector('.ui-command__list, [role="listbox"]');
+    if (!input || !list) continue;
+    const empty = box.querySelector('.ui-command__empty');
+    const items = [...list.querySelectorAll('.ui-command__item, [role="option"]')];
+    const groups = [...list.querySelectorAll('.ui-command__group')];
+
+    const listId = list.id || (list.id = `bronto-cmd-${nextFieldUid()}`);
+    items.forEach((it, i) => {
+      if (!it.id) it.id = `${listId}-opt-${i}`;
+      it.setAttribute('role', 'option');
+    });
+    groups.forEach((g) => g.setAttribute('role', 'presentation'));
+    list.setAttribute('role', 'listbox');
+    input.setAttribute('role', 'combobox');
+    input.setAttribute('aria-controls', listId);
+    input.setAttribute('aria-autocomplete', 'list');
+    input.setAttribute('aria-expanded', 'true');
+    input.setAttribute('autocomplete', 'off');
+
+    let active = -1;
+    const visible = () => items.filter((it) => !it.hidden);
+
+    const setActive = (item) => {
+      items.forEach((it) => {
+        it.classList.toggle('is-active', it === item);
+        it.setAttribute('aria-selected', String(it === item));
+      });
+      if (item) {
+        active = items.indexOf(item);
+        input.setAttribute('aria-activedescendant', item.id);
+        try {
+          item.scrollIntoView({ block: 'nearest' });
+        } catch {
+          /* headless — scrollIntoView is a pure affordance */
+        }
+      } else {
+        active = -1;
+        input.removeAttribute('aria-activedescendant');
+      }
+    };
+
+    // Hide a group whose items are all filtered out.
+    const syncGroups = () => {
+      for (const g of groups) {
+        let any = false;
+        for (
+          let n = g.nextElementSibling;
+          n && !n.matches('.ui-command__group');
+          n = n.nextElementSibling
+        ) {
+          if (n.matches('.ui-command__item, [role="option"]') && !n.hidden) any = true;
+        }
+        g.hidden = !any;
+      }
+    };
+
+    const filter = () => {
+      const q = input.value.trim().toLowerCase();
+      let any = false;
+      for (const it of items) {
+        const match = !q || it.textContent.toLowerCase().includes(q);
+        it.hidden = !match;
+        if (match) any = true;
+      }
+      syncGroups();
+      if (empty) empty.hidden = any;
+      const vis = visible();
+      setActive(vis[0] || null);
+    };
+
+    const move = (delta) => {
+      const vis = visible();
+      if (!vis.length) return;
+      const cur = vis.indexOf(items[active]);
+      let next = cur + delta;
+      if (next < 0) next = vis.length - 1;
+      if (next >= vis.length) next = 0;
+      setActive(vis[next]);
+    };
+
+    const choose = (item) => {
+      if (!item || item.hidden) return;
+      // Label = the command name only — strip the shortcut/meta hints so the
+      // host doesn't get "Open settings G S".
+      const clone = item.cloneNode(true);
+      clone.querySelectorAll('.ui-command__shortcut, .ui-command__meta').forEach((n) => n.remove());
+      const label = clone.textContent.replace(/\s+/g, ' ').trim();
+      box.dispatchEvent(
+        new CustomEvent('bronto:command:select', {
+          detail: { value: item.dataset.value ?? label, label },
+          bubbles: true,
+        }),
+      );
+    };
+
+    const onInput = () => filter();
+    const onKey = (e) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          move(1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          move(-1);
+          break;
+        case 'Home': {
+          const v = visible();
+          if (v.length) {
+            setActive(v[0]);
+            e.preventDefault();
+          }
+          break;
+        }
+        case 'End': {
+          const v = visible();
+          if (v.length) {
+            setActive(v[v.length - 1]);
+            e.preventDefault();
+          }
+          break;
+        }
+        case 'Enter':
+          if (active >= 0 && !items[active].hidden) {
+            choose(items[active]);
+            e.preventDefault();
+          }
+          break;
+        case 'Escape':
+          box.dispatchEvent(new CustomEvent('bronto:command:close', { bubbles: true }));
+          break;
+        default:
+          break;
+      }
+    };
+    const onClick = (e) => {
+      const item = e.target.closest('.ui-command__item, [role="option"]');
+      if (item && list.contains(item)) choose(item);
+    };
+
+    const bound = bindOnce(box, 'command', () => {
+      input.addEventListener('input', onInput);
+      input.addEventListener('keydown', onKey);
+      list.addEventListener('click', onClick);
+      return () => {
+        input.removeEventListener('input', onInput);
+        input.removeEventListener('keydown', onKey);
+        list.removeEventListener('click', onClick);
+      };
+    });
+    // Seed the initial active item (first visible).
+    filter();
+    cleanups.push(bound);
+  }
+
+  return () => cleanups.forEach((fn) => fn());
+}

package/behaviors/connectors.js

@@ -0,0 +1,96 @@
+import { hasDom, noop, bindOnce, byIdInHost } from './internal.js';
+import { connectRects, arrowHead, dotMark } from '../connectors/index.js';
+
+const SVGNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Draw + keep leader lines in sync. Each `[data-bronto-connector]` is an
+ * `.ui-connector` SVG overlaying a positioned container; `data-from`/`data-to`
+ * are the ids of the elements to connect. Optional `data-shape`
+ * (`straight`|`elbow`|`curve`), `data-from-side`/`data-to-side`
+ * (`top`|`right`|`bottom`|`left`|`center`), and `data-end` (`arrow`|`dot`|`none`).
+ *
+ * Bronto computes the geometry (the pure `@ponchia/ui/connectors` helpers) and
+ * sets the path; it owns no layout. Redraws on resize/scroll via a
+ * ResizeObserver + listeners. SSR-safe, idempotent per host; returns a cleanup
+ * that disconnects everything. Re-run after adding/removing connectors.
+ */
+export function initConnectors({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const connectors = [];
+  if (host !== document && host.matches?.('[data-bronto-connector]')) connectors.push(host);
+  connectors.push(...host.querySelectorAll('[data-bronto-connector]'));
+  if (!connectors.length) return noop;
+
+  const draw = () => {
+    for (const svg of connectors) {
+      const from = byIdInHost(host, svg.dataset.from);
+      const to = byIdInHost(host, svg.dataset.to);
+      if (!from || !to) continue;
+      const o = svg.getBoundingClientRect();
+      const rel = (el) => {
+        const r = el.getBoundingClientRect();
+        return { x: r.left - o.left, y: r.top - o.top, width: r.width, height: r.height };
+      };
+      const {
+        d,
+        to: end,
+        angle,
+      } = connectRects({
+        fromRect: rel(from),
+        toRect: rel(to),
+        shape: svg.dataset.shape || 'straight',
+        fromSide: svg.dataset.fromSide || undefined,
+        toSide: svg.dataset.toSide || undefined,
+      });
+      let path = svg.querySelector('.ui-connector__path');
+      if (!path) {
+        path = document.createElementNS(SVGNS, 'path');
+        path.setAttribute('class', 'ui-connector__path');
+        svg.appendChild(path);
+      }
+      path.setAttribute('d', d);
+      // pathLength="1" normalises the draw animation, but it would also reframe
+      // a dashed line's user-unit dasharray — so only set it for draw connectors.
+      if (svg.classList.contains('ui-connector--draw')) path.setAttribute('pathLength', '1');
+      else path.removeAttribute('pathLength');
+
+      const kind = svg.dataset.end || 'arrow';
+      let cap = svg.querySelector('.ui-connector__end');
+      if (kind === 'none') {
+        cap?.remove();
+        continue;
+      }
+      if (!cap) {
+        cap = document.createElementNS(SVGNS, 'path');
+        cap.setAttribute('class', 'ui-connector__end');
+        svg.appendChild(cap);
+      }
+      cap.setAttribute('d', kind === 'dot' ? dotMark(end, 3) : arrowHead(end, angle, 8));
+    }
+  };
+
+  return bindOnce(host, 'connectors', () => {
+    draw();
+    const view = host.defaultView || host.ownerDocument?.defaultView || null;
+    const RO = view?.ResizeObserver;
+    const ro = RO ? new RO(draw) : null;
+    if (ro) {
+      for (const svg of connectors) {
+        if (svg.parentElement) ro.observe(svg.parentElement);
+        const f = byIdInHost(host, svg.dataset.from);
+        const t = byIdInHost(host, svg.dataset.to);
+        if (f) ro.observe(f);
+        if (t) ro.observe(t);
+      }
+    }
+    view?.addEventListener('resize', draw);
+    view?.addEventListener('scroll', draw, true);
+    return () => {
+      ro?.disconnect();
+      view?.removeEventListener('resize', draw);
+      view?.removeEventListener('scroll', draw, true);
+    };
+  });
+}