@tundralibs/ui 0.1.0

package/dist/ui.js

@@ -0,0 +1,2089 @@
+/* shared/js/busy.js */
+/* Loading state for rAPId swaps, automatically. The moment a
+ * [data-action] click or a form[data-action] submit is on its way, the
+ * region it will replace is marked `aria-busy="true"` + `data-busy`;
+ * skeleton.css paints a shimmer veil over it and turns pointer events
+ * off, and `rapid:swapped` / `rapid:error` clear it. A `data-load` region
+ * is left alone — it carries its own server-rendered skeleton until its
+ * fragment lands. Content-shaped skeletons stay the server's job (only it
+ * knows the shape); this is the generic "something is happening here".
+ * Runs against the same delegated events the runtime uses; no `rapid.*`
+ * call, no coupling beyond the two events it listens for. */
+(() => {
+  const TIMEOUT = 15000;
+  const timers = new WeakMap();
+
+  function targetOf(el) {
+    const sel = el.getAttribute("data-target");
+    if (!sel) return el;
+    try {
+      return document.querySelector(sel);
+    } catch {
+      return null;
+    }
+  }
+
+  function clear(el) {
+    if (!el || el.nodeType !== 1) return;
+    el.removeAttribute("aria-busy");
+    delete el.dataset.busy;
+    const t = timers.get(el);
+    if (t) clearTimeout(t);
+  }
+
+  function mark(el) {
+    const region = targetOf(el);
+    if (!region || region.hasAttribute("data-load")) return;
+    region.setAttribute("aria-busy", "true");
+    region.dataset.busy = "";
+    // Never leave a veil behind if no reply ever comes.
+    timers.set(region, setTimeout(() => clear(region), TIMEOUT));
+  }
+
+  // The runtime's own listener runs first and calls preventDefault on the
+  // clicks it handles — so `defaultPrevented` is the normal case here, not
+  // a reason to stand down.
+  document.addEventListener("click", (event) => {
+    if (event.button !== 0) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const el = event.target.closest?.("[data-action]");
+    if (!el || el.tagName === "FORM") return;
+    // A real link inside a data-action container keeps its native
+    // navigation (runtime rule) — no swap, so nothing to mark.
+    const link = event.target.closest("a[href]");
+    if (link && link !== el && el.contains(link)) return;
+    mark(el);
+  });
+
+  document.addEventListener("submit", (event) => {
+    const form = event.target;
+    if (form?.matches?.("form[data-action]")) mark(form);
+  });
+
+  document.addEventListener("rapid:swapped", (event) => clear(event.target));
+  document.addEventListener("rapid:error", (event) => {
+    clear(event.target);
+    document.querySelectorAll("[data-busy]").forEach(clear);
+  });
+})();
+
+/* shared/js/collapse-sidebar.js */
+/*
+ * Desktop "mini sidebar" collapse — distinct from shared/js/toggle.js's
+ * [data-toggle], which also hides the target via the `hidden` attribute
+ * (wrong here: a collapsed sidebar must stay visible, just narrower).
+ */
+(() => {
+  const KEY = "ui-sidebar-collapsed";
+
+  try {
+    if (localStorage.getItem(KEY) === "1") {
+      document.querySelectorAll(".sidebar").forEach((el) => {
+        el.classList.add("sidebar--collapsed");
+      });
+    }
+  } catch {
+    // No persistence available — starts expanded, which is fine.
+  }
+
+  document.addEventListener("click", (event) => {
+    const trigger = event.target.closest?.("[data-collapse]");
+    if (!trigger) return;
+    const selector = trigger.getAttribute("data-collapse");
+    if (!selector || selector === "#") return;
+    const target = document.querySelector(selector);
+    if (!target) return;
+
+    const collapsed = target.classList.toggle("sidebar--collapsed");
+    trigger.setAttribute("aria-expanded", String(!collapsed));
+    try {
+      localStorage.setItem(KEY, collapsed ? "1" : "0");
+    } catch {
+      // Same fallback as above.
+    }
+  });
+})();
+
+/* shared/js/dismiss.js */
+/* Generic dismiss: a `[data-dismiss]` button removes its closest
+ * `[data-dismissible]` ancestor (used by both alert and toast). */
+(() => {
+  document.addEventListener("click", (event) => {
+    const trigger = event.target.closest("[data-dismiss]");
+    if (!trigger) return;
+    trigger.closest("[data-dismissible]")?.remove();
+  });
+})();
+
+/* shared/js/enhance.js */
+/*
+ * A pure opt-in marker — added, never assumed pre-set — so no core/layout
+ * template needs to put a class on <html> or <body> (rAPId's own
+ * `htmlDocument()` helper doesn't expose a hook for either). Every CSS
+ * rule that depends on JS being available is written as `.js SELECTOR`,
+ * so its absence (JS disabled, or this script not yet run) always means
+ * the plain, functional fallback rendering — never a broken one.
+ */
+(() => {
+  document.documentElement.classList.add("js");
+})();
+
+/* shared/js/filter.js */
+/*
+ * Generic client-side search/filter: an element carrying
+ * `data-filter-scope` defines a filterable region. Inside it, a
+ * `[data-table-search]` input free-text filters, and any
+ * `[data-table-filter]` control narrows further (both AND together) — a
+ * <select>, or radio inputs (e.g. a Segmented group; only the checked
+ * one counts, and an empty value means "all"). Filterable items are a
+ * table's own `tbody tr` rows when the scope contains a `<table>`,
+ * otherwise any `[data-filter-item]` — so the same mechanism works for
+ * both a data table and a card grid. An optional `[data-filter-empty]`
+ * element in the scope is shown only when nothing matches.
+ */
+(() => {
+  function getItems(scope) {
+    const table = scope.querySelector("table");
+    if (table) return [...table.querySelectorAll("tbody tr")];
+    return [...scope.querySelectorAll("[data-filter-item]")];
+  }
+
+  function applyFilters(scope) {
+    const searchInput = scope.querySelector("[data-table-search]");
+    const term = (searchInput?.value || "").trim().toLowerCase();
+    const filters = [...scope.querySelectorAll("[data-table-filter]")]
+      .filter((el) => !(el.type === "radio" || el.type === "checkbox") || el.checked)
+      .map((el) => el.value)
+      .filter(Boolean)
+      .map((v) => v.toLowerCase());
+
+    let visible = 0;
+    getItems(scope).forEach((item) => {
+      const text = item.textContent.toLowerCase();
+      const matches = (!term || text.includes(term)) &&
+        filters.every((f) => text.includes(f));
+      item.hidden = !matches;
+      if (matches) visible++;
+    });
+
+    const empty = scope.querySelector("[data-filter-empty]");
+    if (empty) empty.hidden = visible > 0;
+  }
+
+  document.addEventListener("input", (event) => {
+    if (!event.target.matches("[data-table-search]")) return;
+    const scope = event.target.closest("[data-filter-scope]");
+    if (scope) applyFilters(scope);
+  });
+
+  document.addEventListener("change", (event) => {
+    if (!event.target.matches("[data-table-filter]")) return;
+    const scope = event.target.closest("[data-filter-scope]");
+    if (scope) applyFilters(scope);
+  });
+})();
+
+/* shared/js/theme-toggle.js */
+/*
+ * Persists an explicit dark/light choice as `data-theme` on <html>,
+ * overriding `prefers-color-scheme` in either direction (see tokens'
+ * dark-mode block). A `[data-theme-toggle]` element flips it.
+ */
+(() => {
+  const KEY = "ui-theme";
+  const root = document.documentElement;
+
+  try {
+    const saved = localStorage.getItem(KEY);
+    if (saved === "dark" || saved === "light") root.dataset.theme = saved;
+  } catch {
+    // localStorage unavailable (private mode, etc.) — falls back to
+    // prefers-color-scheme only, which is a fine default.
+  }
+
+  document.addEventListener("click", (event) => {
+    const trigger = event.target.closest("[data-theme-toggle]");
+    if (!trigger) return;
+
+    const systemDark = matchMedia("(prefers-color-scheme: dark)").matches;
+    const current = root.dataset.theme === "dark" ||
+        (root.dataset.theme !== "light" && systemDark)
+      ? "dark"
+      : "light";
+    const next = current === "dark" ? "light" : "dark";
+
+    root.dataset.theme = next;
+    try {
+      localStorage.setItem(KEY, next);
+    } catch {
+      // Same fallback as above — nothing to persist to.
+    }
+  });
+})();
+
+/* shared/js/toggle.js */
+/*
+ * Generic show/hide: a trigger carrying `data-toggle="<selector>"` flips
+ * `hidden`, `.is-open` and `aria-expanded` on the element(s) `<selector>`
+ * matches. Not `data-target` — that name is rAPId's own swap-target
+ * attribute (see CLAUDE.md §2); this is a different, unrelated attribute
+ * so the two mechanisms never collide on the same element.
+ *
+ * `data-toggle-class` on the trigger switches to class-only mode (no
+ * `hidden`): for things that must stay in the layout when "closed", like
+ * an off-canvas sidebar that is a normal column on desktop.
+ */
+(() => {
+  const classOnly = (trigger) => trigger.hasAttribute("data-toggle-class");
+
+  document.addEventListener("click", (event) => {
+    const trigger = event.target.closest?.("[data-toggle]");
+    if (!trigger) return;
+    const selector = trigger.getAttribute("data-toggle");
+    const target = selector && selector !== "#" && document.querySelector(selector);
+    if (!target) return;
+
+    const wasExpanded = trigger.getAttribute("aria-expanded") === "true";
+    trigger.setAttribute("aria-expanded", String(!wasExpanded));
+    if (!classOnly(trigger)) target.toggleAttribute("hidden", wasExpanded);
+    target.classList.toggle("is-open", !wasExpanded);
+  });
+
+  document.addEventListener("click", (event) => {
+    const dismisser = event.target.closest?.("[data-toggle-close]");
+    if (!dismisser) return;
+    const selector = dismisser.getAttribute("data-toggle-close");
+    const target = selector ? document.querySelector(selector) : dismisser.closest("[data-toggle-panel]");
+    if (!target) return;
+    close(target);
+  });
+
+  // Escape closes an open class-only panel (the mobile drawer) and
+  // returns focus to whatever opened it.
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented) return;
+    document.querySelectorAll("[data-toggle-class][aria-expanded='true']").forEach((trigger) => {
+      const target = document.querySelector(trigger.getAttribute("data-toggle") ?? "");
+      if (!target) return;
+      close(target);
+      trigger.focus();
+      event.preventDefault();
+    });
+  });
+
+  function close(target) {
+    target.classList.remove("is-open");
+    document.querySelectorAll(`[data-toggle][aria-expanded="true"]`).forEach((trigger) => {
+      const sel = trigger.getAttribute("data-toggle");
+      if (sel && document.querySelector(sel) === target) {
+        trigger.setAttribute("aria-expanded", "false");
+        if (!classOnly(trigger)) target.setAttribute("hidden", "");
+      }
+    });
+  }
+})();
+
+/* shared/js/view-switch.js */
+/*
+ * View switch: a radio (typically inside a Segmented) carrying
+ * `data-view-target="<selector>"` writes its value to `data-view` on the
+ * target when checked. CSS keyed off `[data-view="list"]` etc. does the
+ * rest — no layout logic here, so a theme decides what each view means.
+ */
+(() => {
+  document.addEventListener("change", (event) => {
+    const control = event.target.closest?.("[data-view-target]");
+    if (!control || (control.type === "radio" && !control.checked)) return;
+    const target = document.querySelector(control.getAttribute("data-view-target") ?? "");
+    if (target) target.setAttribute("data-view", control.value);
+  });
+})();
+
+/* components/chart/chart.js */
+/* Chart: draws every [data-chart] with ApexCharts once the (deferred,
+ * pinned — see chart.ts) engine is present; a silent no-op without it.
+ * Colours come from the library's tokens: chart.css maps ApexCharts'
+ * `--apx-*` design tokens onto ours, the engine reads them on every
+ * render, and this script re-renders on a light/dark switch (the
+ * `data-theme` attribute or the OS preference) so charts follow the page.
+ * Idempotent per element (data-chart-initialized); re-runs after a
+ * rAPId swap; destroys the instance when its element leaves the DOM. */
+(() => {
+  const SELECTOR = "[data-chart]";
+  const live = new Set();
+  const media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+
+  function mode() {
+    const forced = document.documentElement.dataset.theme;
+    if (forced === "dark" || forced === "light") return forced;
+    return media?.matches ? "dark" : "light";
+  }
+
+  function themeOptions() {
+    const font = getComputedStyle(document.documentElement).getPropertyValue("--font-family-base").trim();
+    return {
+      theme: { mode: mode(), tokens: true },
+      chart: font ? { fontFamily: font, background: "transparent" } : { background: "transparent" },
+    };
+  }
+
+  function init(el) {
+    if (el.dataset.chartInitialized) return;
+    if (typeof globalThis.ApexCharts === "undefined") return;
+    const config = JSON.parse(el.dataset.chart || "{}");
+    const theme = themeOptions();
+    const options = {
+      ...config,
+      theme: { ...theme.theme, ...(config.theme || {}) },
+      chart: { ...theme.chart, ...(config.chart || {}) },
+    };
+    const chart = new globalThis.ApexCharts(el, options);
+    el.dataset.chartInitialized = "true";
+    el.chart = chart;
+    live.add(el);
+    chart.render();
+  }
+
+  function destroy(el) {
+    if (!el.chart) return;
+    el.chart.destroy();
+    delete el.chart;
+    delete el.dataset.chartInitialized;
+    live.delete(el);
+  }
+
+  function retheme() {
+    for (const el of live) {
+      if (!el.isConnected) {
+        destroy(el);
+        continue;
+      }
+      el.chart.refreshTokens?.();
+      el.chart.updateOptions(themeOptions(), false, true);
+    }
+  }
+
+  const initAll = () => document.querySelectorAll(SELECTOR).forEach(init);
+  initAll();
+  // The engine is a `defer`red script that runs after this bundle but
+  // before `load` — try again then. init is idempotent.
+  addEventListener("load", initAll);
+  document.addEventListener("rapid:swapped", initAll);
+
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (node.matches?.(SELECTOR)) init(node);
+        node.querySelectorAll?.(SELECTOR).forEach(init);
+      }
+      for (const node of mutation.removedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (node.matches?.(SELECTOR)) destroy(node);
+        node.querySelectorAll?.(SELECTOR).forEach(destroy);
+      }
+    }
+  }).observe(document.documentElement, { childList: true, subtree: true });
+
+  new MutationObserver(retheme).observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"],
+  });
+  media?.addEventListener?.("change", retheme);
+})();
+
+/* components/collapsible/collapsible.js */
+(() => {
+  document.addEventListener("click", (event) => {
+    const trigger = event.target.closest("[data-toggle]");
+    if (!trigger) return;
+    const group = trigger.closest("[data-accordion-group]");
+    if (!group) return;
+
+    group.querySelectorAll('[data-toggle][aria-expanded="true"]').forEach(
+      (other) => {
+        if (other === trigger) return;
+        const selector = other.getAttribute("data-toggle");
+        const panel = selector && document.querySelector(selector);
+        other.setAttribute("aria-expanded", "false");
+        panel?.setAttribute("hidden", "");
+        panel?.classList.remove("is-open");
+      },
+    );
+  });
+})();
+
+/* components/combobox/combobox.js */
+/*
+ * Combobox: keyboard navigation over a server-rendered listbox, open on
+ * focus, pick on click/Enter, dismiss on Escape/outside click. Without
+ * this script it is a text input plus a visible listbox — still usable.
+ *
+ * Filtering: with `data-combobox-action` on the input AND rAPId's runtime
+ * present, each (debounced) keystroke does
+ * `window.rapid.swap(action?q=<text>, #<id>-list)` and the server's
+ * ComboboxList fragment replaces the list. Otherwise the rendered options
+ * are filtered client-side — non-matches and empty groups hidden, count
+ * updated. (rAPId's own runtime only reacts to click/submit, so this is
+ * the one place a component script triggers a swap programmatically.)
+ *
+ * Value: single-select writes the picked option's `data-value` into the
+ * hidden `[data-combobox-value]` input and its label into the visible
+ * one; typing clears the hidden value until a new pick. Multi-select adds
+ * a token (label + hidden input named after `data-combobox-name`);
+ * [data-combobox-remove] drops it again.
+ */
+(() => {
+  const ACTIVE = "data-active";
+  const X_ICON =
+    '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+
+  const inputOf = (root) => root.querySelector("input[role='combobox']");
+  const options = (root) => Array.from(root.querySelectorAll('[role="option"]')).filter((o) => !o.hidden);
+
+  function activeIndex(root) {
+    return options(root).findIndex((o) => o.hasAttribute(ACTIVE));
+  }
+
+  function clearActive(root) {
+    root.querySelectorAll(`[${ACTIVE}]`).forEach((o) => o.removeAttribute(ACTIVE));
+    inputOf(root)?.removeAttribute("aria-activedescendant");
+  }
+
+  function setActive(root, index) {
+    const opts = options(root);
+    if (!opts.length) return;
+    const i = (index + opts.length) % opts.length;
+    clearActive(root);
+    opts[i].setAttribute(ACTIVE, "");
+    const input = inputOf(root);
+    if (input && opts[i].id) input.setAttribute("aria-activedescendant", opts[i].id);
+    const list = opts[i].closest(".combobox__list");
+    if (!list) return;
+    const top = opts[i].offsetTop;
+    if (top < list.scrollTop) list.scrollTop = top;
+    const bottom = top + opts[i].offsetHeight;
+    if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+  }
+
+  const isOpen = (root) => root.classList.contains("combobox--open");
+
+  function open(root, on) {
+    const list = root.querySelector(".combobox__list");
+    const input = inputOf(root);
+    if (list) list.hidden = !on;
+    if (input) input.setAttribute("aria-expanded", on ? "true" : "false");
+    root.classList.toggle("combobox--open", !!on);
+    if (!on) clearActive(root);
+  }
+
+  /* Client-side filter — only when the server is not doing it. */
+  function filterLocal(root) {
+    const input = inputOf(root);
+    const list = root.querySelector(".combobox__list");
+    if (!input || !list) return;
+    const q = input.value.trim().toLowerCase();
+
+    let visible = 0;
+    root.querySelectorAll('[role="option"]').forEach((o) => {
+      const label = o.querySelector(".combobox__option-label")?.textContent ?? o.textContent;
+      const hit = !q || label.toLowerCase().includes(q);
+      o.hidden = !hit;
+      if (hit) visible++;
+    });
+    clearActive(root);
+
+    root.querySelectorAll(".combobox__group").forEach((group) => {
+      let el = group.nextElementSibling;
+      let any = false;
+      while (el && !el.classList.contains("combobox__group") && !el.classList.contains("combobox__hints")) {
+        if (el.matches('[role="option"]') && !el.hidden) {
+          any = true;
+          break;
+        }
+        el = el.nextElementSibling;
+      }
+      group.hidden = !any;
+    });
+
+    const count = root.querySelector(".combobox__count");
+    if (count) count.textContent = visible === 1 ? "1 match" : `${visible} matches`;
+
+    let empty = list.querySelector(".combobox__empty");
+    if (!empty) {
+      empty = document.createElement("div");
+      empty.className = "combobox__empty";
+      empty.textContent = "No matches.";
+      list.insertBefore(empty, list.querySelector(".combobox__hints"));
+    }
+    empty.hidden = visible > 0;
+  }
+
+  const timers = new WeakMap();
+  function filter(root) {
+    const input = inputOf(root);
+    const action = input?.getAttribute("data-combobox-action");
+    const target = input?.getAttribute("data-combobox-target");
+    if (action && target && globalThis.rapid?.swap) {
+      clearTimeout(timers.get(root));
+      timers.set(
+        root,
+        setTimeout(() => {
+          const url = `${action}${action.includes("?") ? "&" : "?"}q=${encodeURIComponent(input.value.trim())}`;
+          globalThis.rapid.swap(url, target).then(() => clearActive(root));
+        }, 150),
+      );
+      return;
+    }
+    filterLocal(root);
+  }
+
+  function pickSingle(root, opt) {
+    const input = inputOf(root);
+    const hidden = root.querySelector("[data-combobox-value]");
+    const label = (opt.querySelector(".combobox__option-label")?.textContent ?? opt.textContent).trim();
+    if (input) input.value = label;
+    if (hidden) hidden.value = opt.getAttribute("data-value") ?? label;
+    root.querySelectorAll('[role="option"]').forEach((o) => o.setAttribute("aria-selected", String(o === opt)));
+    open(root, false);
+    // Wrappers (the Select) mirror the pick into their own control.
+    root.dispatchEvent(
+      new CustomEvent("combobox:pick", { bubbles: true, detail: { value: hidden?.value ?? label, label } }),
+    );
+  }
+
+  function addToken(root, opt) {
+    const field = root.querySelector(".combobox__field");
+    const input = inputOf(root);
+    const value = opt.getAttribute("data-value") ?? "";
+    const label = (opt.querySelector(".combobox__option-label")?.textContent ?? opt.textContent).trim();
+    const name = root.getAttribute("data-combobox-name") ?? "";
+    if (!field || !input) return;
+    if (Array.from(field.querySelectorAll(".combobox__token input")).some((h) => h.value === value)) return;
+
+    const token = document.createElement("span");
+    token.className = "combobox__token";
+    token.append(label);
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "combobox__token-remove";
+    remove.setAttribute("aria-label", `Remove ${label}`);
+    remove.setAttribute("data-combobox-remove", value);
+    remove.innerHTML = X_ICON; // constant markup, no data
+    const hidden = document.createElement("input");
+    hidden.type = "hidden";
+    hidden.name = name;
+    hidden.value = value;
+    token.append(remove, hidden);
+    field.insertBefore(token, input);
+
+    opt.setAttribute("aria-selected", "true");
+    input.value = "";
+    filter(root);
+    input.focus();
+  }
+
+  function removeToken(root, value) {
+    root.querySelectorAll(".combobox__token").forEach((t) => {
+      if (t.querySelector("input")?.value === value) t.remove();
+    });
+    root.querySelectorAll(`[role="option"][data-value="${CSS.escape(value)}"]`)
+      .forEach((o) => o.setAttribute("aria-selected", "false"));
+  }
+
+  document.addEventListener("keydown", (event) => {
+    const root = event.target.closest?.("[data-combobox]");
+    if (!root) return;
+
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      open(root, true);
+      setActive(root, activeIndex(root) + (event.key === "ArrowDown" ? 1 : -1));
+    } else if (event.key === "Enter") {
+      const i = activeIndex(root);
+      const opts = options(root);
+      if (i >= 0 && opts[i]) {
+        // Only swallow Enter when it picks something; otherwise a form
+        // around the combobox still submits normally.
+        event.preventDefault();
+        opts[i].click();
+      }
+    } else if (event.key === "Escape") {
+      // Only claim Escape while the list is open — otherwise it must
+      // reach the <dialog>/popover this combobox may be sitting in.
+      if (!isOpen(root)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      open(root, false);
+    } else if (
+      event.key === "Backspace" && root.classList.contains("combobox--multi") &&
+      event.target.matches("input[role='combobox']") && !event.target.value
+    ) {
+      const last = root.querySelector(".combobox__field .combobox__token:last-of-type input");
+      if (last) removeToken(root, last.value);
+    }
+  });
+
+  document.addEventListener("input", (event) => {
+    const root = event.target.closest?.("[data-combobox]");
+    if (!root || !event.target.matches("input[role='combobox']")) return;
+    const hidden = root.querySelector("[data-combobox-value]");
+    if (hidden) hidden.value = ""; // typing un-picks; a pick sets it again
+    filter(root);
+    open(root, true);
+  });
+
+  document.addEventListener("focusin", (event) => {
+    const root = event.target.closest?.("[data-combobox]");
+    if (root && event.target.matches("input[role='combobox']")) open(root, true);
+  });
+
+  document.addEventListener("click", (event) => {
+    // A click on the field itself (the caret, the padding) — not on the
+    // input or a token button — focuses the input and toggles the list.
+    const field = event.target.closest?.("[data-combobox] .combobox__field");
+    if (field && !event.target.closest("input, button")) {
+      const root = field.closest("[data-combobox]");
+      const input = inputOf(root);
+      if (input && !input.disabled) {
+        if (isOpen(root)) open(root, false);
+        else {
+          input.focus();
+          open(root, true);
+        }
+      }
+      return;
+    }
+
+    const opt = event.target.closest?.("[data-combobox] [role='option']");
+    if (opt) {
+      if (opt.getAttribute("aria-disabled") === "true") return;
+      const root = opt.closest("[data-combobox]");
+      if (root.classList.contains("combobox--multi")) addToken(root, opt);
+      else pickSingle(root, opt);
+      return;
+    }
+
+    const remove = event.target.closest?.("[data-combobox-remove]");
+    if (remove) {
+      const root = remove.closest("[data-combobox]");
+      if (root) removeToken(root, remove.getAttribute("data-combobox-remove") ?? "");
+      return;
+    }
+
+    document.querySelectorAll("[data-combobox].combobox--open").forEach((root) => {
+      if (event.target.closest?.("[data-combobox]") !== root) open(root, false);
+    });
+  });
+})();
+
+/* components/command/command.js */
+/*
+ * Command palette: arrow-key navigation, Enter to run, Escape clears the
+ * query then closes, Cmd/Ctrl+K or any [data-command-open] opens the
+ * (non-inline) palette, overlay click closes it. Focus returns to
+ * whatever opened it, and Tab is kept inside the floating sheet.
+ *
+ * Filtering: with `data-command-action` on the input and rAPId's runtime
+ * present, each (debounced) keystroke swaps the server's CommandList
+ * fragment into the list. Otherwise the rendered items are filtered
+ * client-side — non-matches and empty groups hidden, count updated, the
+ * first hit made active.
+ */
+(() => {
+  const ACTIVE = "data-active";
+  const openers = new WeakMap();
+
+  const inputOf = (root) => root.querySelector(".command__input");
+  const options = (root) => Array.from(root.querySelectorAll('[role="option"]')).filter((o) => !o.hidden);
+
+  function activeIndex(root) {
+    return options(root).findIndex((o) => o.hasAttribute(ACTIVE));
+  }
+
+  function clearActive(root) {
+    root.querySelectorAll(`[${ACTIVE}]`).forEach((o) => o.removeAttribute(ACTIVE));
+    inputOf(root)?.removeAttribute("aria-activedescendant");
+  }
+
+  function setActive(root, index) {
+    const opts = options(root);
+    if (!opts.length) return;
+    const i = (index + opts.length) % opts.length;
+    clearActive(root);
+    opts[i].setAttribute(ACTIVE, "");
+    const input = inputOf(root);
+    if (input && opts[i].id) input.setAttribute("aria-activedescendant", opts[i].id);
+    const list = opts[i].closest(".command__list");
+    if (!list) return;
+    const top = opts[i].offsetTop;
+    if (top < list.scrollTop) list.scrollTop = top;
+    const bottom = top + opts[i].offsetHeight;
+    if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+  }
+
+  function filterLocal(root) {
+    const input = inputOf(root);
+    const list = root.querySelector(".command__list");
+    if (!input || !list) return;
+    const q = input.value.trim().toLowerCase();
+
+    let visible = 0;
+    root.querySelectorAll('[role="option"]').forEach((o) => {
+      const label = o.querySelector(".command__item-label")?.textContent ?? o.textContent;
+      const hit = !q || label.toLowerCase().includes(q);
+      o.hidden = !hit;
+      if (hit) visible++;
+    });
+    clearActive(root);
+
+    root.querySelectorAll(".command__group").forEach((group) => {
+      let el = group.nextElementSibling;
+      let any = false;
+      while (el && !el.classList.contains("command__group")) {
+        if (el.matches('[role="option"]') && !el.hidden) {
+          any = true;
+          break;
+        }
+        el = el.nextElementSibling;
+      }
+      group.hidden = !any;
+    });
+
+    const count = root.querySelector(".command__count");
+    if (count) count.textContent = visible === 1 ? "1 result" : `${visible} results`;
+
+    let empty = list.querySelector(".command__empty");
+    if (!empty) {
+      empty = document.createElement("div");
+      empty.className = "command__empty";
+      empty.textContent = "Nothing matches that.";
+      list.append(empty);
+    }
+    empty.hidden = visible > 0;
+    if (visible) setActive(root, 0);
+  }
+
+  const timers = new WeakMap();
+  function filter(root) {
+    const input = inputOf(root);
+    const action = input?.getAttribute("data-command-action");
+    const target = input?.getAttribute("data-command-target");
+    if (action && target && globalThis.rapid?.swap) {
+      clearTimeout(timers.get(root));
+      timers.set(
+        root,
+        setTimeout(() => {
+          const url = `${action}${action.includes("?") ? "&" : "?"}q=${encodeURIComponent(input.value.trim())}`;
+          globalThis.rapid.swap(url, target).then(() => {
+            clearActive(root);
+            if (options(root).length) setActive(root, 0);
+          });
+        }, 150),
+      );
+      return;
+    }
+    filterLocal(root);
+  }
+
+  const isFloating = (root) => !root.classList.contains("command--inline");
+
+  function close(root) {
+    if (!isFloating(root)) return;
+    root.hidden = true;
+    const opener = openers.get(root);
+    openers.delete(root);
+    if (opener?.isConnected) opener.focus();
+  }
+
+  /* Escape / the esc affordance: clear a query first, then close. */
+  function dismiss(root) {
+    const input = inputOf(root);
+    if (input && input.value) {
+      input.value = "";
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    } else {
+      close(root);
+    }
+  }
+
+  function open(palette, opener) {
+    openers.set(palette, opener ?? document.activeElement);
+    palette.hidden = false;
+    inputOf(palette)?.focus();
+  }
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+      const palette = document.querySelector("[data-command]:not(.command--inline)");
+      if (!palette) return;
+      event.preventDefault();
+      open(palette);
+      return;
+    }
+
+    const root = event.target.closest?.("[data-command]");
+    if (!root) return;
+
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive(root, activeIndex(root) + (event.key === "ArrowDown" ? 1 : -1));
+    } else if (event.key === "Enter") {
+      const i = activeIndex(root);
+      const opts = options(root);
+      if (i >= 0 && opts[i]) {
+        event.preventDefault();
+        opts[i].click();
+      }
+    } else if (event.key === "Escape") {
+      if (!isFloating(root) && !inputOf(root)?.value) return; // nothing to do; let it bubble
+      event.preventDefault();
+      event.stopPropagation();
+      dismiss(root);
+    } else if (event.key === "Tab" && isFloating(root)) {
+      // Keep focus inside the sheet (it is aria-modal).
+      const focusables = Array.from(
+        root.querySelectorAll("input, button, a[href], [tabindex]:not([tabindex='-1'])"),
+      ).filter((el) => !el.hidden && el.offsetParent !== null);
+      if (!focusables.length) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  });
+
+  document.addEventListener("input", (event) => {
+    const root = event.target.closest?.("[data-command]");
+    if (root && event.target.matches(".command__input")) filter(root);
+  });
+
+  document.addEventListener("click", (event) => {
+    /* [data-command-open="#id"] (or bare: the page's floating palette) */
+    const opener = event.target.closest?.("[data-command-open]");
+    if (opener) {
+      const sel = opener.getAttribute("data-command-open");
+      const palette = sel
+        ? document.querySelector(sel)
+        : document.querySelector("[data-command]:not(.command--inline)");
+      if (palette) {
+        event.preventDefault();
+        open(palette, opener);
+      }
+      return;
+    }
+
+    const btn = event.target.closest?.("[data-command-dismiss]");
+    if (btn) {
+      const root = btn.closest("[data-command]");
+      if (root) dismiss(root);
+      return;
+    }
+
+    /* Running an item closes a floating palette. */
+    const item = event.target.closest?.("[data-command] [role='option']");
+    if (item) {
+      const root = item.closest("[data-command]");
+      if (root && isFloating(root)) close(root);
+      return;
+    }
+
+    /* Overlay click (outside the sheet) closes a floating palette. */
+    const overlay = event.target.closest?.("[data-command]:not(.command--inline)");
+    if (overlay && !event.target.closest(".command__sheet")) close(overlay);
+  });
+})();
+
+/* components/data-table/data-table.js */
+/*
+ * Data table: row selection is a pure view concern until submitted, so it
+ * lives here rather than round-tripping. The checkboxes are the source of
+ * truth the server reads back on submit; the bulk bar just mirrors them.
+ * Runs once on load and after every rAPId swap.
+ */
+(() => {
+  function refresh(table) {
+    const bar = table.querySelector("[data-bulk-bar]");
+    const rows = table.querySelectorAll("[data-select-row]");
+    const checked = table.querySelectorAll("[data-select-row]:checked").length;
+
+    if (bar) {
+      bar.hidden = checked === 0;
+      const count = bar.querySelector("[data-bulk-count]");
+      if (count) count.textContent = checked === 1 ? "1 row selected" : `${checked} rows selected`;
+    }
+
+    const all = table.querySelector("[data-select-all]");
+    if (all) {
+      all.checked = checked > 0 && checked === rows.length;
+      all.indeterminate = checked > 0 && checked < rows.length;
+    }
+  }
+
+  function setRow(box, on) {
+    box.checked = on;
+    box.closest("tr")?.classList.toggle("data-table__row--selected", on);
+  }
+
+  document.addEventListener("change", (event) => {
+    const table = event.target.closest?.(".data-table");
+    if (!table) return;
+    if (event.target.matches("[data-select-all]")) {
+      table.querySelectorAll("[data-select-row]").forEach((box) => setRow(box, event.target.checked));
+    } else if (event.target.matches("[data-select-row]")) {
+      setRow(event.target, event.target.checked);
+    } else {
+      return;
+    }
+    refresh(table);
+  });
+
+  document.addEventListener("click", (event) => {
+    const clear = event.target.closest?.("[data-bulk-clear]");
+    if (!clear) return;
+    const table = clear.closest(".data-table");
+    if (!table) return;
+    table.querySelectorAll("[data-select-row]").forEach((box) => setRow(box, false));
+    refresh(table);
+  });
+
+  function initAll() {
+    document.querySelectorAll(".data-table").forEach(refresh);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initAll);
+  } else {
+    initAll();
+  }
+  document.addEventListener("rapid:swapped", initAll);
+})();
+
+/* components/datepicker/datepicker.js */
+/*
+ * Date picker.
+ *
+ * Always: toggle the panel from its trigger, close on Escape (scoped to
+ * this picker) or outside click, focus back to the trigger on close.
+ *
+ * Server mode (`data-datepicker-server`): month nav, day picks and
+ * presets are GET links carrying data-action/data-target — rAPId swaps
+ * the re-rendered DatePicker in; nothing here computes dates.
+ *
+ * Client mode (no build*Href): the calendar runs here — month nav
+ * re-renders the day grid, a pick writes the hidden input(s) and the
+ * trigger label, and in range mode the first pick is the start and the
+ * second the end. Same classes and ARIA as the server-rendered panel.
+ */
+(() => {
+  const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+  const SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const pad = (n) => String(n).padStart(2, "0");
+  const iso = (y, m, d) => `${y}-${pad(m + 1)}-${pad(d)}`;
+  const fmt = (v) => {
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v ?? "");
+    return m ? `${Number(m[3])} ${SHORT[Number(m[2]) - 1]} ${m[1]}` : "";
+  };
+  const todayIso = () => {
+    const t = new Date();
+    return iso(t.getFullYear(), t.getMonth(), t.getDate());
+  };
+
+  function setOpen(dp, on, restoreFocus) {
+    const panel = dp.querySelector(".datepicker__panel");
+    const trigger = dp.querySelector("[data-datepicker-trigger]");
+    if (panel) panel.hidden = !on;
+    dp.classList.toggle("datepicker--open", !!on);
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", on ? "true" : "false");
+      if (!on && restoreFocus) trigger.focus();
+    }
+  }
+
+  /* ------------------------------------------------------ client mode */
+  function state(dp) {
+    return {
+      range: dp.hasAttribute("data-datepicker-range"),
+      min: dp.getAttribute("data-datepicker-min") || "",
+      max: dp.getAttribute("data-datepicker-max") || "",
+      today: dp.getAttribute("data-datepicker-today") || todayIso(),
+      start: dp.querySelector("[data-datepicker-start]")?.value || "",
+      end: dp.querySelector("[data-datepicker-end]")?.value || "",
+    };
+  }
+
+  function renderDays(dp, year, month) {
+    const s = state(dp);
+    const days = dp.querySelector(".datepicker__days");
+    const heading = dp.querySelector(".datepicker__month");
+    if (!days) return;
+    days.replaceChildren();
+    if (heading) heading.textContent = `${MONTHS[month]} ${year}`;
+    dp.setAttribute("data-datepicker-view", `${year}-${month}`);
+
+    const len = new Date(year, month + 1, 0).getDate();
+    const lead = (new Date(year, month, 1).getDay() + 6) % 7;
+    const prevLen = new Date(year, month, 0).getDate();
+    const cells = Math.ceil((lead + len) / 7) * 7;
+
+    for (let i = 0; i < cells; i++) {
+      const offset = i - lead + 1;
+      let y = year, m = month, d = offset;
+      if (offset < 1) {
+        m = month - 1;
+        d = prevLen + offset;
+        if (m < 0) {
+          m = 11;
+          y--;
+        }
+      } else if (offset > len) {
+        m = month + 1;
+        d = offset - len;
+        if (m > 11) {
+          m = 0;
+          y++;
+        }
+      }
+      const key = iso(y, m, d);
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "datepicker__day";
+      if (offset < 1 || offset > len) btn.classList.add("datepicker__day--outside");
+      if (key === s.today) {
+        btn.classList.add("datepicker__day--today");
+        btn.setAttribute("aria-current", "date");
+      }
+      if (s.start && s.end && key > s.start && key < s.end) btn.classList.add("datepicker__day--in-range");
+      if (key === s.start) btn.classList.add("datepicker__day--start");
+      if (key === s.end) btn.classList.add("datepicker__day--end");
+      if (key === s.start || key === s.end) btn.setAttribute("aria-pressed", "true");
+      if ((s.min && key < s.min) || (s.max && key > s.max)) btn.disabled = true;
+      btn.setAttribute("data-day", key);
+      btn.setAttribute("aria-label", `${d} ${MONTHS[m]} ${y}`);
+      btn.textContent = String(d);
+      days.append(btn);
+    }
+  }
+
+  function currentView(dp) {
+    const v = dp.getAttribute("data-datepicker-view");
+    if (v) {
+      const [y, m] = v.split("-").map(Number);
+      return [y, m];
+    }
+    const s = state(dp);
+    const anchor = s.start || s.today;
+    return [Number(anchor.slice(0, 4)), Number(anchor.slice(5, 7)) - 1];
+  }
+
+  function pick(dp, key) {
+    const s = state(dp);
+    const startInput = dp.querySelector("[data-datepicker-start]");
+    const endInput = dp.querySelector("[data-datepicker-end]");
+    const label = dp.querySelector("[data-datepicker-label]");
+    let start = key, end = "";
+    if (s.range) {
+      if (s.start && !s.end && key >= s.start) {
+        start = s.start;
+        end = key;
+      }
+    }
+    if (startInput) startInput.value = start;
+    if (endInput) endInput.value = end;
+    if (label) {
+      label.textContent = s.range ? `${fmt(start) || "Start date"} – ${fmt(end) || "End date"}` : fmt(start);
+    }
+    startInput?.dispatchEvent(new Event("change", { bubbles: true }));
+    const [y, m] = currentView(dp);
+    renderDays(dp, y, m);
+    if (!s.range || end) setOpen(dp, false, true);
+  }
+
+  /* ----------------------------------------------------------- events */
+  document.addEventListener("click", (event) => {
+    const trigger = event.target.closest?.("[data-datepicker-trigger]");
+    if (trigger) {
+      const dp = trigger.closest("[data-datepicker]");
+      const panel = dp?.querySelector(".datepicker__panel");
+      if (panel) setOpen(dp, panel.hidden);
+      return;
+    }
+
+    const dp = event.target.closest?.("[data-datepicker]");
+    if (dp && !dp.hasAttribute("data-datepicker-server")) {
+      const day = event.target.closest("button[data-day]");
+      if (day && !day.disabled) {
+        pick(dp, day.getAttribute("data-day"));
+        return;
+      }
+      const nav = event.target.closest("button[data-month]");
+      if (nav) {
+        const [y, m] = nav.getAttribute("data-month").split("-").map(Number);
+        renderDays(dp, y, m);
+        // Every nav button's target moves with the view.
+        const targets = {
+          "prev-year": [y - 1, m],
+          prev: m === 0 ? [y - 1, 11] : [y, m - 1],
+          next: m === 11 ? [y + 1, 0] : [y, m + 1],
+          "next-year": [y + 1, m],
+        };
+        dp.querySelectorAll("button[data-month][data-nav]").forEach((btn) => {
+          const t = targets[btn.getAttribute("data-nav")];
+          if (t) btn.setAttribute("data-month", `${t[0]}-${t[1]}`);
+        });
+        return;
+      }
+    }
+
+    // Outside click closes floating panels only — an inline picker is
+    // page content (a docs or settings page that always shows the
+    // calendar); its trigger still toggles it.
+    document.querySelectorAll("[data-datepicker]:not(.datepicker--inline) .datepicker__panel:not([hidden])").forEach(
+      (panel) => {
+        const owner = panel.closest("[data-datepicker]");
+        if (owner !== dp) setOpen(owner, false);
+      },
+    );
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented) return;
+    const dp = event.target.closest?.("[data-datepicker]");
+    const panel = dp?.querySelector(".datepicker__panel");
+    if (!panel || panel.hidden || dp.classList.contains("datepicker--inline")) return;
+    event.preventDefault();
+    setOpen(dp, false, true);
+  });
+})();
+
+/* components/dropdown/dropdown.js */
+/*
+ * Dropdown: [data-toggle] (shared/js/toggle.js) opens the panel; this
+ * closes it on outside click, on choosing an item (a link, button or
+ * rAPId action inside the panel), and on Escape — scoped to the dropdown
+ * that has focus, falling back to all open ones. Focus returns to the
+ * trigger on Escape.
+ *
+ * Inside a scroll container (a table body, a card with overflow) an
+ * absolutely-positioned panel gets clipped, so the panel is switched to
+ * fixed positioning at the trigger's viewport rect (set through the
+ * CSSOM, which strict CSP allows — unlike a style *attribute*). Any
+ * scroll or resize closes it rather than trying to track the trigger.
+ */
+(() => {
+  const openPanels = () => document.querySelectorAll(".dropdown__panel.is-open");
+  const triggerFor = (panel) => document.querySelector(`[data-toggle="#${CSS.escape(panel.id)}"]`);
+  const CLIPPERS = ".data-table__scroll, [data-dropdown-clip]";
+
+  function place(panel, trigger) {
+    if (!trigger?.closest(CLIPPERS)) return;
+    const r = trigger.getBoundingClientRect();
+    panel.classList.add("dropdown__panel--fixed");
+    const width = panel.offsetWidth;
+    const alignEnd = panel.classList.contains("dropdown__panel--end");
+    let left = alignEnd ? r.right - width : r.left;
+    left = Math.max(8, Math.min(left, innerWidth - width - 8));
+    let top = r.bottom + 4;
+    if (top + panel.offsetHeight > innerHeight - 8) top = Math.max(8, r.top - panel.offsetHeight - 4);
+    panel.style.left = `${left}px`;
+    panel.style.top = `${top}px`;
+  }
+
+  function close(panel, trigger) {
+    panel.setAttribute("hidden", "");
+    panel.classList.remove("is-open", "dropdown__panel--fixed");
+    panel.style.removeProperty("left");
+    panel.style.removeProperty("top");
+    trigger?.setAttribute("aria-expanded", "false");
+  }
+
+  document.addEventListener("click", (event) => {
+    openPanels().forEach((panel) => {
+      const trigger = triggerFor(panel);
+      if (trigger?.contains(event.target)) {
+        // toggle.js just opened it (its listener runs first) — place it.
+        if (!panel.classList.contains("dropdown__panel--fixed")) place(panel, trigger);
+        return;
+      }
+      if (panel.contains(event.target)) {
+        // A choice was made — close, unless the click was on something
+        // that keeps the panel useful (a nested toggle, a form field).
+        const item = event.target.closest("a[href], button, [data-action]");
+        if (!item || item.hasAttribute("data-toggle")) return;
+      }
+      close(panel, trigger);
+    });
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented) return;
+    const own = event.target.closest?.(".dropdown");
+    const panels = own ? own.querySelectorAll(".dropdown__panel.is-open") : openPanels();
+    let closed = false;
+    panels.forEach((panel) => {
+      const trigger = triggerFor(panel);
+      close(panel, trigger);
+      trigger?.focus();
+      closed = true;
+    });
+    if (closed) event.preventDefault();
+  });
+
+  const closeFixed = () => {
+    document.querySelectorAll(".dropdown__panel--fixed.is-open").forEach((panel) => close(panel, triggerFor(panel)));
+  };
+  addEventListener("scroll", closeFixed, { capture: true, passive: true });
+  addEventListener("resize", closeFixed, { passive: true });
+})();
+
+/* components/dropzone/dropzone.js */
+/*
+ * Dropzone: drag-over highlight and client-side removal of a pending row
+ * ([data-dropzone-remove]). The actual upload is the form's job — the
+ * real <input type="file"> covers the area, so click and keyboard open
+ * the picker with no script at all.
+ */
+(() => {
+  for (const type of ["dragenter", "dragover"]) {
+    document.addEventListener(type, (event) => {
+      const area = event.target.closest?.(".dropzone__area");
+      if (!area) return;
+      event.preventDefault();
+      area.classList.add("dropzone__area--over");
+    });
+  }
+
+  for (const type of ["dragleave", "drop"]) {
+    document.addEventListener(type, (event) => {
+      event.target.closest?.(".dropzone__area")?.classList.remove("dropzone__area--over");
+    });
+  }
+
+  document.addEventListener("click", (event) => {
+    const remove = event.target.closest?.("[data-dropzone-remove]");
+    if (remove) remove.closest(".dropzone__file")?.remove();
+  });
+})();
+
+/* components/editor/editor.js */
+/* Editor: markdown mode toggles syntax around/before the textarea's
+ * selection and swaps a server-rendered preview in through the runtime;
+ * html mode drives a contenteditable surface with execCommand (every
+ * command toggles, block formats included) and mirrors its HTML into the
+ * textarea that submits. Toolbar buttons reflect the selection's state.
+ * Delegated on document, keyed off data-editor-*; initAll re-runs after
+ * a swap. */
+(() => {
+  const WRAP = { bold: ["**", "**"], italic: ["_", "_"], strike: ["~~", "~~"], code: ["`", "`"] };
+  const PREFIX = { heading: "## ", quote: "> ", ul: "- ", ol: "1. " };
+  const BLOCK = { heading: "h2", quote: "blockquote", code: "pre" };
+  const INLINE = { bold: "bold", italic: "italic", underline: "underline", strike: "strikeThrough" };
+  const LIST = { ul: "insertUnorderedList", ol: "insertOrderedList" };
+
+  const sourceOf = (root) => root.querySelector(".editor__source");
+  const surfaceOf = (root) => root.querySelector("[data-editor-surface]");
+  const isHtml = (root) => root.getAttribute("data-editor-mode") === "html";
+
+  /* ------------------------------------------------------- markdown */
+  function replace(ta, start, end, text, selStart, selEnd) {
+    ta.value = ta.value.slice(0, start) + text + ta.value.slice(end);
+    ta.setSelectionRange(start + selStart, start + selEnd);
+    ta.focus();
+    ta.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+
+  function lineRange(ta) {
+    const start = ta.value.lastIndexOf("\n", ta.selectionStart - 1) + 1;
+    const nl = ta.value.indexOf("\n", Math.max(ta.selectionEnd, start));
+    const end = ta.selectionEnd > ta.selectionStart && ta.value[ta.selectionEnd - 1] === "\n"
+      ? ta.selectionEnd - 1
+      : nl === -1
+      ? ta.value.length
+      : nl;
+    return [start, end];
+  }
+
+  const STRIP_LINE = /^(#{1,6} |> |- |\* |\d+\. )+/;
+
+  function markdown(ta, cmd) {
+    const start = ta.selectionStart;
+    const end = ta.selectionEnd;
+    const sel = ta.value.slice(start, end);
+
+    if (WRAP[cmd]) {
+      const [a, z] = WRAP[cmd];
+      const multi = cmd === "code" && sel.includes("\n");
+      const open = multi ? "```\n" : a;
+      const close = multi ? "\n```" : z;
+      // Toggle: unwrap when the selection (or its surroundings) already carries the syntax.
+      if (sel.startsWith(open) && sel.endsWith(close) && sel.length >= open.length + close.length) {
+        const inner = sel.slice(open.length, sel.length - close.length);
+        replace(ta, start, end, inner, 0, inner.length);
+        return;
+      }
+      if (ta.value.slice(start - open.length, start) === open && ta.value.slice(end, end + close.length) === close) {
+        replace(ta, start - open.length, end + close.length, sel, 0, sel.length);
+        return;
+      }
+      const body = sel || cmd;
+      replace(ta, start, end, open + body + close, open.length, open.length + body.length);
+      return;
+    }
+    if (cmd === "link" || cmd === "image") {
+      const text = sel || (cmd === "image" ? "alt text" : "text");
+      const out = `${cmd === "image" ? "!" : ""}[${text}](url)`;
+      replace(ta, start, end, out, out.length - 4, out.length - 1);
+      return;
+    }
+    if (cmd === "hr") {
+      const before = start === 0 || ta.value[start - 1] === "\n" ? "" : "\n";
+      const out = `${before}\n---\n\n`;
+      replace(ta, start, end, out, out.length, out.length);
+      return;
+    }
+    const [ls, le] = lineRange(ta);
+    const lines = ta.value.slice(ls, le).split("\n");
+    if (cmd === "clear") {
+      const out = lines.map((l) => l.replace(STRIP_LINE, "")).join("\n")
+        .replace(/!\[(.*?)\]\(\S+?\)/g, "$1")
+        .replace(/\[(.+?)\]\(\S+?\)/g, "$1")
+        .replace(/(\*\*|__|~~|`)(.+?)\1/g, "$2")
+        .replace(/(^|[^\w])_(.+?)_(?=[^\w]|$)/g, "$1$2");
+      replace(ta, ls, le, out, 0, out.length);
+      return;
+    }
+    const prefix = PREFIX[cmd];
+    if (!prefix) return;
+    const has = (l) => cmd === "ol" ? /^\d+\. /.test(l) : l.startsWith(prefix);
+    const allOn = lines.every((l) => l.trim() === "" || has(l));
+    const out = lines.map((l, n) => {
+      const bare = l.replace(STRIP_LINE, "");
+      if (allOn) return bare; // toggle off
+      if (l.trim() === "") return l;
+      return (cmd === "ol" ? `${n + 1}. ` : prefix) + bare;
+    }).join("\n");
+    replace(ta, ls, le, out, 0, out.length);
+  }
+
+  function preview(root, on) {
+    const panel = root.querySelector("[data-editor-preview-panel]");
+    const ta = sourceOf(root);
+    root.querySelectorAll("[data-editor-view]").forEach((b) => {
+      b.setAttribute("aria-pressed", String(b.getAttribute("data-editor-view") === (on ? "preview" : "write")));
+    });
+    if (!on) {
+      root.removeAttribute("data-editor-view");
+      if (panel) panel.hidden = true;
+      ta?.focus();
+      return;
+    }
+    root.setAttribute("data-editor-view", "preview");
+    if (!panel) return;
+    panel.hidden = false;
+    const action = root.getAttribute("data-editor-preview");
+    if (action && globalThis.rapid?.swap) {
+      panel.setAttribute("aria-busy", "true");
+      globalThis.rapid.swap(action, panel, {
+        method: "post",
+        body: new URLSearchParams({ text: ta?.value ?? "" }).toString(),
+      }).finally(() => panel.removeAttribute("aria-busy"));
+    } else {
+      // No server preview: say so, and show the source as written.
+      panel.replaceChildren();
+      const note = document.createElement("p");
+      note.className = "editor__preview-note";
+      note.textContent = "No preview route on this page — showing the Markdown source.";
+      const pre = document.createElement("pre");
+      pre.className = "editor__preview-raw";
+      pre.textContent = ta?.value ?? "";
+      panel.append(note, pre);
+    }
+  }
+
+  /* ----------------------------------------------------------- html */
+  function sync(root) {
+    const ta = sourceOf(root);
+    const surface = surfaceOf(root);
+    if (ta && surface) ta.value = surface.innerHTML;
+  }
+
+  const blockOf = () => String(document.queryCommandValue("formatBlock") || "").toLowerCase().replace(/[<>]/g, "");
+
+  function execute(root, cmd) {
+    const surface = surfaceOf(root);
+    if (!surface || surface.getAttribute("contenteditable") !== "true") return;
+    surface.focus();
+    if (INLINE[cmd]) document.execCommand(INLINE[cmd]);
+    else if (LIST[cmd]) document.execCommand(LIST[cmd]);
+    else if (BLOCK[cmd]) {
+      // Toggle: the same block format again returns to a paragraph.
+      document.execCommand("formatBlock", false, blockOf() === BLOCK[cmd] ? "<p>" : `<${BLOCK[cmd]}>`);
+    } else if (cmd === "link") {
+      const url = globalThis.prompt?.("Link URL", "https://");
+      if (url) document.execCommand("createLink", false, url);
+    } else if (cmd === "image") {
+      const url = globalThis.prompt?.("Image URL", "https://");
+      if (url) document.execCommand("insertImage", false, url);
+    } else if (cmd === "hr") {
+      document.execCommand("insertHorizontalRule");
+    } else if (cmd === "clear") {
+      document.execCommand("removeFormat");
+      document.execCommand("unlink");
+      if (document.queryCommandState("insertUnorderedList")) document.execCommand("insertUnorderedList");
+      if (document.queryCommandState("insertOrderedList")) document.execCommand("insertOrderedList");
+      if (blockOf() !== "p" && blockOf() !== "div") document.execCommand("formatBlock", false, "<p>");
+    }
+    sync(root);
+    reflect(root);
+  }
+
+  /** Toolbar state for the selection (html mode only — the browser knows). */
+  function reflect(root) {
+    if (!isHtml(root)) return;
+    const block = blockOf();
+    root.querySelectorAll("[data-editor-cmd]").forEach((btn) => {
+      const cmd = btn.getAttribute("data-editor-cmd");
+      let on = false;
+      if (INLINE[cmd] || LIST[cmd]) on = document.queryCommandState(INLINE[cmd] ?? LIST[cmd]);
+      else if (BLOCK[cmd]) on = block === BLOCK[cmd];
+      btn.setAttribute("aria-pressed", String(on));
+    });
+  }
+
+  function init(root) {
+    if (root.dataset.editorReady) return;
+    root.dataset.editorReady = "true";
+    const ta = sourceOf(root);
+    const surface = surfaceOf(root);
+    if (surface && ta) {
+      // The textarea holds the server's (sanitised) HTML; the surface
+      // shows it. innerHTML here is the same trust as the markup itself.
+      surface.innerHTML = ta.value;
+      surface.setAttribute("contenteditable", ta.disabled ? "false" : "true");
+      // Paragraphs, not <div>s, for new lines.
+      document.execCommand("defaultParagraphSeparator", false, "p");
+    }
+  }
+
+  const initAll = () => document.querySelectorAll("[data-editor]").forEach(init);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", initAll);
+  else initAll();
+  document.addEventListener("rapid:swapped", initAll);
+
+  /* --------------------------------------------------------- events */
+  document.addEventListener("click", (event) => {
+    const tool = event.target.closest?.("[data-editor-cmd]");
+    if (tool) {
+      const root = tool.closest("[data-editor]");
+      const cmd = tool.getAttribute("data-editor-cmd");
+      if (isHtml(root)) execute(root, cmd);
+      else {
+        const ta = sourceOf(root);
+        if (ta && !ta.disabled) markdown(ta, cmd);
+      }
+      return;
+    }
+    const view = event.target.closest?.("[data-editor-view]");
+    if (view) preview(view.closest("[data-editor]"), view.getAttribute("data-editor-view") === "preview");
+  });
+
+  document.addEventListener("input", (event) => {
+    const surface = event.target.closest?.("[data-editor-surface]");
+    if (surface) sync(surface.closest("[data-editor]"));
+  });
+
+  document.addEventListener("selectionchange", () => {
+    const root = document.activeElement?.closest?.("[data-editor]");
+    if (root) reflect(root);
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
+    const root = event.target.closest?.("[data-editor]");
+    if (!root) return;
+    const cmd = { b: "bold", i: "italic", u: "underline", k: "link" }[event.key.toLowerCase()];
+    if (!cmd || (cmd === "underline" && !isHtml(root))) return;
+    event.preventDefault();
+    if (isHtml(root)) execute(root, cmd);
+    else markdown(sourceOf(root), cmd);
+  });
+})();
+
+/* components/menu/menu.js */
+/*
+ * Menu: mark the link matching the *full* current URL (path + hash) as
+ * the current page, and open the sublist it sits in. The server can only
+ * match on the path — a link like `settings.html#tab-billing` is one of
+ * several children of the same page, and only the browser knows which
+ * one the user followed. Runs on load and on every hash change.
+ */
+(() => {
+  function sync() {
+    const here = location.href;
+    let matched = null;
+    document.querySelectorAll(".menu__link[href]").forEach((link) => {
+      if (!link.getAttribute("href")?.includes("#")) return;
+      const target = new URL(link.getAttribute("href"), location.href).href;
+      if (target === here) matched = link;
+    });
+    if (!matched) return;
+
+    matched.closest(".menu__list")?.querySelectorAll(".menu__link").forEach((link) => {
+      if (link !== matched && link.getAttribute("href")?.includes("#")) {
+        link.classList.remove("menu__link--active");
+        link.removeAttribute("aria-current");
+      }
+    });
+    matched.classList.add("menu__link--active");
+    matched.setAttribute("aria-current", "page");
+
+    const sublist = matched.closest(".menu__sublist");
+    if (sublist) {
+      sublist.hidden = false;
+      sublist.classList.add("is-open");
+      document.querySelector(`[data-toggle="#${CSS.escape(sublist.id)}"]`)
+        ?.setAttribute("aria-expanded", "true");
+    }
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", sync);
+  } else {
+    sync();
+  }
+  addEventListener("hashchange", sync);
+  document.addEventListener("rapid:swapped", sync);
+})();
+
+/* components/modal/modal.js */
+/*
+ * Modal: [data-modal-open="#id"] opens a native <dialog> with
+ * showModal() (focus trap + ::backdrop for free), [data-modal-close]
+ * closes it, and a click on the backdrop closes it — but only when the
+ * pointer went DOWN on the backdrop too, so selecting text in a field
+ * and releasing outside the dialog does not slam it shut.
+ */
+(() => {
+  let downOnBackdrop = false;
+
+  document.addEventListener("pointerdown", (event) => {
+    downOnBackdrop = event.target instanceof HTMLDialogElement && event.target.open;
+  });
+
+  document.addEventListener("click", (event) => {
+    const opener = event.target.closest?.("[data-modal-open]");
+    if (opener) {
+      const dialog = document.querySelector(opener.getAttribute("data-modal-open") ?? "");
+      if (dialog instanceof HTMLDialogElement && !dialog.open) dialog.showModal();
+      return;
+    }
+
+    const closer = event.target.closest?.("[data-modal-close]");
+    if (closer) {
+      closer.closest("dialog")?.close();
+      return;
+    }
+
+    if (downOnBackdrop && event.target instanceof HTMLDialogElement && event.target.open) {
+      event.target.close();
+    }
+    downOnBackdrop = false;
+  });
+})();
+
+/* components/otp/otp.js */
+/*
+ * One-time code cells. Everything here is an enhancement over the single
+ * .otp__value input that the markup submits:
+ *
+ *  - typing a character fills the cell and advances; Backspace on an
+ *    empty cell walks back and clears; Arrow keys move; Delete clears
+ *  - a paste, an SMS autofill or a password-manager fill that lands more
+ *    than one character in a cell is spread across the cells from there
+ *  - the carrier input is kept in sync (it is what the form submits) and
+ *    taken out of the tab order; on load the cells mirror a prefilled
+ *    carrier value (a re-render after a failed attempt)
+ *  - when every cell is filled: `otp:complete` bubbles from the root
+ *    (detail: { value }), and with [data-otp-submit] the surrounding
+ *    form is submitted via requestSubmit() so rAPId's submit handler
+ *    sees it like any other submit.
+ *
+ * Delegated from document; re-syncs after every rAPId swap.
+ */
+(() => {
+  const cellsOf = (root) => Array.from(root.querySelectorAll(".otp__cell"));
+  const carrierOf = (root) => root.querySelector(".otp__value");
+
+  function allowed(root, text) {
+    const numeric = root.getAttribute("data-otp-mode") !== "alphanumeric";
+    return (text || "").replace(numeric ? /[^0-9]/g : /[^0-9a-zA-Z]/g, "");
+  }
+
+  function sync(root, { fromCarrier = false } = {}) {
+    const cells = cellsOf(root);
+    const carrier = carrierOf(root);
+    if (!cells.length || !carrier) return;
+
+    if (fromCarrier) {
+      const chars = allowed(root, carrier.value).slice(0, cells.length);
+      cells.forEach((c, i) => c.value = chars[i] ?? "");
+    }
+    const value = cells.map((c) => c.value).join("");
+    carrier.value = value;
+    carrier.setAttribute("tabindex", "-1");
+    carrier.setAttribute("aria-hidden", "true");
+    cells.forEach((c) => c.toggleAttribute("data-filled", c.value !== ""));
+    // The first empty cell is the one Tab lands on.
+    const firstEmpty = cells.findIndex((c) => !c.value);
+    cells.forEach((c, i) => c.setAttribute("tabindex", i === (firstEmpty < 0 ? 0 : firstEmpty) ? "0" : "-1"));
+
+    if (value.length === cells.length && !root.hasAttribute("data-otp-completed")) {
+      root.setAttribute("data-otp-completed", "");
+      root.dispatchEvent(new CustomEvent("otp:complete", { bubbles: true, detail: { value } }));
+      if (root.hasAttribute("data-otp-submit")) root.closest("form")?.requestSubmit();
+    } else if (value.length < cells.length) {
+      root.removeAttribute("data-otp-completed");
+    }
+  }
+
+  /* Write `text` starting at cell `from`, advance focus past the last written cell. */
+  function fill(root, from, text) {
+    const cells = cellsOf(root);
+    const chars = allowed(root, text);
+    if (!chars) {
+      cells[from].value = "";
+      sync(root);
+      return;
+    }
+    let i = from;
+    for (const ch of chars) {
+      if (i >= cells.length) break;
+      cells[i].value = ch;
+      i++;
+    }
+    sync(root);
+    cells[Math.min(i, cells.length - 1)].focus();
+  }
+
+  document.addEventListener("input", (event) => {
+    const cell = event.target.closest?.(".otp__cell");
+    if (!cell) return;
+    const root = cell.closest("[data-otp]");
+    const cells = cellsOf(root);
+    fill(root, cells.indexOf(cell), cell.value);
+  });
+
+  document.addEventListener("paste", (event) => {
+    const cell = event.target.closest?.(".otp__cell");
+    if (!cell) return;
+    event.preventDefault();
+    const root = cell.closest("[data-otp]");
+    fill(root, cellsOf(root).indexOf(cell), event.clipboardData?.getData("text") ?? "");
+  });
+
+  document.addEventListener("keydown", (event) => {
+    const cell = event.target.closest?.(".otp__cell");
+    if (!cell) return;
+    const root = cell.closest("[data-otp]");
+    const cells = cellsOf(root);
+    const i = cells.indexOf(cell);
+
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      if (cell.value) {
+        cell.value = "";
+      } else if (i > 0) {
+        cells[i - 1].value = "";
+        cells[i - 1].focus();
+      }
+      sync(root);
+    } else if (event.key === "Delete") {
+      event.preventDefault();
+      cell.value = "";
+      sync(root);
+    } else if (event.key === "ArrowLeft" && i > 0) {
+      event.preventDefault();
+      cells[i - 1].focus();
+    } else if (event.key === "ArrowRight" && i < cells.length - 1) {
+      event.preventDefault();
+      cells[i + 1].focus();
+    }
+  });
+
+  document.addEventListener("focusin", (event) => {
+    const cell = event.target.closest?.(".otp__cell");
+    if (cell) cell.select();
+  });
+
+  function initAll() {
+    document.querySelectorAll("[data-otp]").forEach((root) => sync(root, { fromCarrier: true }));
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initAll);
+  } else {
+    initAll();
+  }
+  document.addEventListener("rapid:swapped", initAll);
+})();
+
+/* components/popover/popover.js */
+/*
+ * Popover: toggle on [data-popover-trigger], dismiss on outside click or
+ * Escape (scoped to the popover that has focus; Escape with focus
+ * elsewhere closes them all). Focus returns to the trigger on close.
+ */
+(() => {
+  function setOpen(pop, on) {
+    const panel = pop.querySelector(".popover__panel");
+    const trigger = pop.querySelector("[data-popover-trigger]");
+    if (panel) panel.hidden = !on;
+    if (trigger) trigger.setAttribute("aria-expanded", on ? "true" : "false");
+  }
+
+  const openPanels = () => document.querySelectorAll("[data-popover] .popover__panel:not([hidden])");
+
+  document.addEventListener("click", (event) => {
+    const trigger = event.target.closest?.("[data-popover-trigger]");
+    if (trigger) {
+      const pop = trigger.closest("[data-popover]");
+      const panel = pop?.querySelector(".popover__panel");
+      if (panel) setOpen(pop, panel.hidden);
+      return;
+    }
+    const inside = event.target.closest?.("[data-popover]");
+    openPanels().forEach((panel) => {
+      const pop = panel.closest("[data-popover]");
+      if (pop !== inside) setOpen(pop, false);
+    });
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented) return;
+    const own = event.target.closest?.("[data-popover]");
+    const targets = own ? [own] : Array.from(openPanels()).map((p) => p.closest("[data-popover]"));
+    let closed = false;
+    targets.forEach((pop) => {
+      const panel = pop.querySelector(".popover__panel");
+      if (!panel || panel.hidden) return;
+      setOpen(pop, false);
+      pop.querySelector("[data-popover-trigger]")?.focus();
+      closed = true;
+    });
+    if (closed) event.preventDefault();
+  });
+})();
+
+/* components/segmented/segmented.js */
+/* Segmented: a thumb that glides to the checked option. The control is
+ * still plain radios + labels (submits, works without JS); this only
+ * measures the checked label and writes --segmented-x / --segmented-w
+ * onto the root, which segmented.css turns into the moving surface.
+ * Re-measured on change, on resize, after a rapid swap. */
+(() => {
+  function place(root) {
+    const checked = root.querySelector(".segmented__input:checked");
+    const label = checked?.nextElementSibling;
+    if (!label) {
+      root.style.setProperty("--segmented-w", "0px");
+      return;
+    }
+    const r = root.getBoundingClientRect();
+    const l = label.getBoundingClientRect();
+    const rtl = getComputedStyle(root).direction === "rtl";
+    const x = rtl ? r.right - root.clientLeft - 3 - l.right : l.left - r.left - root.clientLeft - 3;
+    root.style.setProperty("--segmented-x", `${rtl ? -x : x}px`);
+    root.style.setProperty("--segmented-w", `${l.width}px`);
+    root.setAttribute("data-segmented-ready", "");
+  }
+
+  const initAll = () => document.querySelectorAll("[data-segmented]").forEach(place);
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", initAll);
+  else initAll();
+  addEventListener("load", initAll);
+  addEventListener("resize", initAll);
+  document.addEventListener("rapid:swapped", initAll);
+  document.addEventListener("change", (event) => {
+    const root = event.target.closest?.("[data-segmented]");
+    if (root) place(root);
+  });
+})();
+
+/* components/select/select.js */
+/* Select: keeps the native <select> (the submitted value) and the
+ * combobox UI (what the user sees) in step. A pick in the UI sets the
+ * native value and fires `change` on it, so anything listening to the
+ * native control (filter.js, a form's own script) sees a normal select;
+ * a programmatic/autofill change on the native control repaints the UI.
+ * Typing in the read-only field jumps to the first option starting with
+ * those letters, like a native select does. */
+(() => {
+  function ui(select) {
+    const root = select.querySelector("[data-select-ui]");
+    return root
+      ? {
+        root,
+        input: root.querySelector("input[role='combobox']"),
+        hidden: root.querySelector("[data-combobox-value]"),
+        options: Array.from(root.querySelectorAll("[role='option']")),
+      }
+      : null;
+  }
+
+  // UI → native
+  document.addEventListener("combobox:pick", (event) => {
+    const select = event.target.closest?.("[data-select]");
+    const native = select?.querySelector(".select__native");
+    if (!native) return;
+    const value = event.detail?.value ?? "";
+    if (native.value !== value) {
+      native.value = value;
+      native.dispatchEvent(new Event("change", { bubbles: true }));
+      native.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  });
+
+  // native → UI
+  document.addEventListener("change", (event) => {
+    if (!event.target.matches?.(".select__native")) return;
+    const select = event.target.closest("[data-select]");
+    const u = ui(select);
+    if (!u) return;
+    const value = event.target.value;
+    const picked = u.options.find((o) => o.getAttribute("data-value") === value);
+    const label = picked
+      ? (picked.querySelector(".combobox__option-label")?.textContent ?? picked.textContent).trim()
+      : "";
+    if (u.hidden) u.hidden.value = value;
+    if (u.input && u.input.value !== label) u.input.value = label;
+    u.options.forEach((o) => o.setAttribute("aria-selected", String(o === picked)));
+  });
+
+  // Type-ahead on the read-only field.
+  let buffer = "";
+  let lastKey = 0;
+  document.addEventListener("keydown", (event) => {
+    const input = event.target;
+    if (!input.matches?.("[data-select-ui] input[role='combobox']")) return;
+    if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) return;
+    const now = Date.now();
+    buffer = now - lastKey > 600 ? event.key : buffer + event.key;
+    lastKey = now;
+    const select = input.closest("[data-select]");
+    const u = ui(select);
+    const hit = u?.options.find((o) =>
+      o.getAttribute("aria-disabled") !== "true" &&
+      (o.querySelector(".combobox__option-label")?.textContent ?? o.textContent).trim().toLowerCase().startsWith(
+        buffer.toLowerCase(),
+      )
+    );
+    if (hit) hit.click();
+    event.preventDefault();
+  });
+})();
+
+/* components/slider/slider.js */
+/*
+ * Slider: sync the painted track to the native <input type="range">.
+ * --slider-pct is the only channel; the CSS owns everything visual. Runs
+ * on load and after every rAPId swap, because a swapped-in fragment
+ * arrives with no inline state (CSP: the template never emits one).
+ *
+ * The <output> text is server-rendered (possibly via a `format()` the
+ * browser cannot run), so it is only rewritten on user input — using
+ * `data-slider-labels` for stepped sliders or `data-slider-unit` for
+ * counted ones.
+ */
+(() => {
+  function paint(input) {
+    const root = input.closest("[data-slider]");
+    if (!root) return null;
+    const min = Number(input.min || 0);
+    const max = Number(input.max || 100);
+    const pct = max === min ? 0 : ((Number(input.value) - min) / (max - min)) * 100;
+    root.style.setProperty("--slider-pct", `${pct.toFixed(2)}%`);
+    return root;
+  }
+
+  function label(root, input) {
+    const out = root.querySelector("[data-slider-output]");
+    if (!out) return;
+    const value = Number(input.value);
+    const labels = root.getAttribute("data-slider-labels");
+    if (labels) {
+      const step = Number(input.step || 1);
+      const i = Math.round((value - Number(input.min || 0)) / step);
+      let parsed = [];
+      try {
+        parsed = JSON.parse(labels);
+      } catch { /* malformed — fall through to the number */ }
+      out.textContent = parsed[i] ?? input.value;
+      root.querySelectorAll(".slider__scale-item").forEach((el, n) => {
+        el.classList.toggle("slider__scale-item--active", n === i);
+      });
+      return;
+    }
+    const unit = root.getAttribute("data-slider-unit");
+    const one = root.getAttribute("data-slider-unit-one") || unit;
+    out.textContent = unit ? `${input.value} ${value === 1 ? one : unit}` : input.value;
+  }
+
+  function initAll() {
+    document.querySelectorAll("[data-slider] .slider__input").forEach(paint);
+  }
+
+  document.addEventListener("input", (event) => {
+    if (!event.target.matches?.("[data-slider] .slider__input")) return;
+    const root = paint(event.target);
+    if (root) label(root, event.target);
+  });
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initAll);
+  } else {
+    initAll();
+  }
+  document.addEventListener("rapid:swapped", initAll);
+})();
+
+/* components/tabs/tabs.js */
+/*
+ * Tabs: click or arrow-key (Left/Right/Home/End) selection with a roving
+ * tabindex, and a `#tab-<id>` deep link honoured on load, on hashchange
+ * and after a rAPId swap.
+ */
+(() => {
+  document.addEventListener("click", (event) => {
+    const tab = event.target.closest?.(".tabs__tab");
+    if (tab) activate(tab);
+  });
+
+  document.addEventListener("keydown", (event) => {
+    const keys = ["ArrowRight", "ArrowLeft", "Home", "End"];
+    if (!keys.includes(event.key)) return;
+    const tab = event.target.closest?.(".tabs__tab");
+    if (!tab) return;
+    const list = [...tab.parentElement.querySelectorAll(".tabs__tab")];
+    const index = list.indexOf(tab);
+    let next;
+    if (event.key === "Home") next = list[0];
+    else if (event.key === "End") next = list[list.length - 1];
+    else if (event.key === "ArrowRight") next = list[(index + 1) % list.length];
+    else next = list[(index - 1 + list.length) % list.length];
+    event.preventDefault();
+    next.focus();
+    activate(next);
+  });
+
+  function deepLink() {
+    if (location.hash.length < 2) return;
+    const target = document.querySelector(`.tabs__tab#${CSS.escape(location.hash.slice(1))}`);
+    if (!target) return;
+    activate(target);
+    // Fragment navigation focuses the target element, and since that is
+    // not a pointer interaction the tab paints its :focus-visible ring —
+    // which reads as a stray border to someone who just clicked a
+    // sidebar link. Drop that programmatic focus; keyboard users who
+    // Tab into the list still get the ring.
+    const unfocus = () => {
+      if (document.activeElement === target) target.blur();
+    };
+    unfocus();
+    setTimeout(unfocus, 50);
+  }
+
+  deepLink();
+  addEventListener("load", deepLink);
+  addEventListener("hashchange", deepLink);
+  document.addEventListener("rapid:swapped", deepLink);
+
+  function activate(tab) {
+    const tabs = tab.closest(".tabs");
+    if (!tabs) return;
+    tabs.querySelectorAll(":scope > .tabs__list > .tabs__tab").forEach((candidate) => {
+      const selected = candidate === tab;
+      candidate.setAttribute("aria-selected", String(selected));
+      candidate.setAttribute("tabindex", selected ? "0" : "-1");
+    });
+    tabs.querySelectorAll(":scope > .tabs__panel").forEach((panel) => {
+      panel.toggleAttribute("hidden", panel.id !== tab.getAttribute("aria-controls"));
+    });
+  }
+})();
+
+/* components/toast/toast.js */
+/*
+ * Toasts. Three things live here:
+ *
+ * 1. Auto-dismiss: a `.toast[data-toast-autodismiss="<ms>"]` removes
+ *    itself after that many ms — whether it was in the page at load or
+ *    appended anywhere later (a rAPId swap into any region, or 2.).
+ *
+ * 2. Client-side trigger: `[data-toast-open="#template-id"]` clones that
+ *    <template>'s content into the region (`data-toast-region`, default
+ *    `#toast-region`). For rAPId apps the server usually pushes toasts via
+ *    `data-target="#toast-region" data-swap="append"`; this is the
+ *    no-server path (plain HTML sites, optimistic UI).
+ *
+ * 3. Stack cap: a region keeps at most `data-toast-max` (default 4)
+ *    toasts; the oldest are dropped so a burst never buries the page.
+ */
+(() => {
+  const timers = new WeakMap();
+
+  function autoDismiss(el) {
+    const ms = Number(el.dataset.toastAutodismiss);
+    if (!ms || timers.has(el)) return;
+    timers.set(el, setTimeout(() => el.remove(), ms));
+  }
+
+  function cap(region) {
+    const max = Number(region.dataset.toastMax) || 4;
+    const toasts = region.querySelectorAll(":scope > .toast");
+    for (let i = 0; i < toasts.length - max; i++) toasts[i].remove();
+  }
+
+  function scan(root) {
+    root.querySelectorAll?.(".toast[data-toast-autodismiss]").forEach(autoDismiss);
+    if (root.matches?.(".toast[data-toast-autodismiss]")) autoDismiss(root);
+    root.querySelectorAll?.(".toast-region").forEach(cap);
+    root.closest?.(".toast-region") && cap(root.closest(".toast-region"));
+  }
+
+  scan(document);
+
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType === 1) scan(node);
+      }
+    }
+  }).observe(document.documentElement, { childList: true, subtree: true });
+
+  document.addEventListener("click", (event) => {
+    const trigger = event.target.closest?.("[data-toast-open]");
+    if (!trigger) return;
+    const template = document.querySelector(trigger.getAttribute("data-toast-open") ?? "");
+    const target = document.querySelector(trigger.getAttribute("data-toast-region") ?? "#toast-region");
+    if (!template?.content || !target) return;
+    target.append(template.content.cloneNode(true));
+  });
+})();