@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/wire-catalog.d.ts

@@ -1,3 +1,22 @@
+import { Signal } from 'kerfjs';
+import { a as CatalogBackgroundStyle } from './types-DmHWkSd6.js';
+import './toolbar.js';
+import './semantic-content-BbzjvSu9.js';
+import './sides-BPSWde0A.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
+import './workbench.js';
+import './nav-stack-CU_0dKtI.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
+import './resizable-region.js';
+
 interface WireCatalogOptions {
     /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */
     onSelect: (id: string) => void;
@@ -5,22 +24,115 @@ interface WireCatalogOptions {
     onToggleSidebar?: () => void;
     /** Invoked when the theme toggle is activated. */
     onToggleTheme?: () => void;
+    /** Report a contrast-toggle press; the app updates its signal and applies the preference. */
+    onToggleContrast?: () => void;
+    /** Report a reduced-motion-toggle press; the app updates its signal and applies the preference. */
+    onToggleMotion?: () => void;
+    /** Report a preview background choice; the app updates `backgroundStyle`. */
+    onSelectBackground?: (style: CatalogBackgroundStyle) => void;
+    /**
+     * Invoked when the settings pane toggle is activated. With
+     * `settingsCollapsed`, `wireCatalog` has already flipped the signal.
+     */
+    onToggleSettings?: () => void;
     /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */
     onToggleSecondary?: () => void;
+    /**
+     * Invoked with the switch's new state when the secondary group's tag-filter
+     * switch changes; the app updates `tagFilter.show`.
+     */
+    onToggleSecondaryFilter?: (show: boolean) => void;
     /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
     urlParam?: string;
+    /**
+     * Reveal the chosen sidebar row after selection. `true` uses desktop-safe
+     * defaults; pass options to customize scroll alignment or the media guard.
+     */
+    revealSelection?: boolean | CatalogRevealOptions;
     selectAction?: string;
     toggleSidebarAction?: string;
     toggleThemeAction?: string;
+    toggleContrastAction?: string;
+    toggleMotionAction?: string;
+    selectBackgroundAction?: string;
     toggleSecondaryAction?: string;
+    toggleSecondaryFilterAction?: string;
+    toggleSettingsAction?: string;
+    /**
+     * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench
+     * sidebar is wired like any Workbench rail: it becomes a transient overlay
+     * on a small screen (collapsed as the breakpoint applies, closed on Escape
+     * or a press outside, focus handed back), and choosing an entry from the
+     * open overlay closes it.
+     */
+    collapsed?: Signal<boolean>;
+    /**
+     * The app-owned sidebar width signal for a Catalog rendered with
+     * `sidebar={{ resizable: true, size: sidebarSize.value }}`. Each committed
+     * drag or keyboard resize is written to it.
+     */
+    sidebarSize?: Signal<number>;
+    /**
+     * With `sidebarSize`, load and save the width under this storage key so the
+     * catalog remembers the user's sidebar width.
+     */
+    sidebarStorageKey?: string;
+    /**
+     * The settings pane's app-owned collapsed flag, rendered as the Catalog's
+     * `settingsCollapsed`. With it, `wireCatalog` owns the pane's toggle (each
+     * press flips the signal) and wires the pane like any Workbench rail: a
+     * transient overlay on a small screen (collapsed as the breakpoint applies,
+     * closed on Escape or a press outside, focus handed back).
+     */
+    settingsCollapsed?: Signal<boolean>;
+    /**
+     * The app-owned settings pane width signal for a Catalog rendered with
+     * `settingsPanel={{ resizable: true, size: settingsSize.value }}`. Each
+     * committed drag or keyboard resize is written to it.
+     */
+    settingsSize?: Signal<number>;
+    /**
+     * With `settingsSize`, load and save the width under this storage key so
+     * the catalog remembers the user's settings pane width.
+     */
+    settingsStorageKey?: string;
+    /** The Catalog's `id`, when it is not the default `kui-catalog`. */
+    id?: string;
+    /**
+     * Ask the page's server once for its UX Review project directory (served by
+     * `uxReviewPlugin` from `@kerfjs/ui/vite-ux-review`) and report it, so the
+     * app can render the Catalog with `uxReview`. Never called on static
+     * hosting or a server without the plugin.
+     */
+    onUxReviewProject?: (projectDirectory: string) => void;
+}
+interface CatalogRevealOptions {
+    /** Scroll alignment within the sidebar. Default `'nearest'`. */
+    block?: ScrollLogicalPosition;
+    /** Cross-axis alignment. Default `'nearest'`. */
+    inline?: ScrollLogicalPosition;
+    /** Scroll behavior. Default `'auto'`. */
+    behavior?: ScrollBehavior;
+    /**
+     * Only reveal when this media query matches. Defaults to the Catalog's
+     * desktop layout; pass `false` to reveal at every viewport size.
+     */
+    media?: string | false;
 }
+/**
+ * Reveal one Catalog sidebar entry after the controlled render settles without
+ * moving focus. Returns a cancellation function for rapid selection changes.
+ */
+declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
 /**
  * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar
- * item selection (and the related-entry popup menu), the sidebar collapse toggle, and
- * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
+ * item selection (and the related-entry popup menu), the sidebar collapse toggle,
+ * the settings pane toggle, and the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
  * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.
- * Returns a disposer.
+ * It also wires the scroll dividers below root (`wireScrollDividers`), so the
+ * catalog's panes and every example in it show their chrome dividers only
+ * while scrolled. Returns a disposer.
  */
-declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleSecondary, urlParam, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, }: WireCatalogOptions): () => void;
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, onToggleSecondaryFilter, onToggleSettings, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSecondaryFilterAction, toggleSettingsAction, collapsed, sidebarSize, sidebarStorageKey, settingsCollapsed, settingsSize, settingsStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
 
-export { type WireCatalogOptions, wireCatalog };
+export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog };

package/dist/wire-catalog.js

@@ -1,48 +1,348 @@
+import { wireWorkbench } from './chunk-WPNIKZMJ.js';
+
+import { wireScrollDividers } from './chunk-OZ6X76G5.js';
+import { loadUxReviewProject } from './chunk-6C6DLP3W.js';
+
+import { readSearchField } from './chunk-VEME3D7K.js';
+
+
+
 import { delegate } from 'kerfjs';
 
-// src/wire-catalog.ts
+var catalogDesktopMedia = "(min-width: 44.01rem)";
+function wireCatalogFilter(root) {
+  const view = root.ownerDocument.defaultView;
+  let filterValue = "";
+  let query = "";
+  let currentEditor = null;
+  const matches = (name) => name.toLocaleLowerCase().includes(query);
+  const apply = () => {
+    const editor = root.querySelector("[data-catalog-filter]");
+    const nav = root.querySelector("[data-catalog-sidebar]");
+    if (!editor || !nav) return;
+    if (editor !== currentEditor) {
+      currentEditor = editor;
+      if (readSearchField(editor).query !== filterValue)
+        editor.textContent = filterValue;
+    }
+    const field = editor.closest(
+      '[data-component="search-field"]'
+    );
+    field.dataset.catalogFilterActive = String(Boolean(query));
+    const placeholderVisible = String(!filterValue);
+    if (field.dataset.placeholderVisible !== placeholderVisible)
+      field.dataset.placeholderVisible = placeholderVisible;
+    const clear = field.querySelector(
+      '[data-action="catalog-clear-filter"]'
+    );
+    clear.style.display = query ? "" : "none";
+    nav.dataset.catalogFilterActive = String(Boolean(query));
+    let visibleEntries = 0;
+    for (const section of nav.querySelectorAll(
+      "[data-catalog-section]"
+    )) {
+      const group = section.closest(
+        "[data-catalog-secondary-group]"
+      );
+      const headingMatches = matches(section.dataset.catalogSection) || group !== null && matches(group.dataset.catalogSecondaryGroup);
+      let sectionEntries = 0;
+      for (const entry of section.querySelectorAll(
+        "[data-catalog-entry-name]"
+      )) {
+        const visible = !query || headingMatches || matches(entry.dataset.catalogEntryName);
+        entry.hidden = !visible;
+        if (visible) sectionEntries++;
+      }
+      section.hidden = Boolean(query) && sectionEntries === 0;
+      visibleEntries += sectionEntries;
+    }
+    for (const group of nav.querySelectorAll(
+      "[data-catalog-secondary-group]"
+    )) {
+      group.hidden = Boolean(query) && !Array.from(
+        group.querySelectorAll("[data-catalog-section]")
+      ).some((section) => !section.hidden);
+      const toggle = group.querySelector("[aria-expanded]");
+      const content = group.querySelector(
+        "[data-catalog-secondary-collapsed]"
+      );
+      if (toggle && content) {
+        const expanded = query ? !group.hidden : content.dataset.catalogSecondaryCollapsed !== "true";
+        toggle.setAttribute("aria-expanded", String(expanded));
+        const arrow = toggle.querySelector(
+          '[data-component="disclosure-arrow"]'
+        );
+        if (arrow) {
+          arrow.dataset.open = String(expanded);
+          arrow.dataset.direction = expanded ? "down" : "right";
+          arrow.style.setProperty(
+            "--_kui-disclosure-arrow-rotation",
+            expanded ? "90deg" : "0deg"
+          );
+        }
+      }
+    }
+    const empty = nav.querySelector(
+      "[data-catalog-filter-empty]"
+    );
+    empty.dataset.visible = String(Boolean(query) && visibleEntries === 0);
+  };
+  const onInput = (event) => {
+    const target = event.target;
+    const editor = target?.closest("[data-catalog-filter]");
+    if (!editor || !root.contains(editor)) return;
+    filterValue = readSearchField(editor).query;
+    query = filterValue.trim().toLocaleLowerCase();
+    apply();
+  };
+  const onClick = (event) => {
+    const target = event.target;
+    if (!target.closest('[data-action="catalog-clear-filter"]')) return;
+    const editor = root.querySelector("[data-catalog-filter]");
+    filterValue = "";
+    query = "";
+    editor.textContent = "";
+    apply();
+    editor.focus();
+  };
+  root.addEventListener("input", onInput);
+  root.addEventListener("click", onClick);
+  const observer = new view.MutationObserver(() => {
+    if (filterValue) apply();
+  });
+  observer.observe(root, {
+    attributes: true,
+    attributeFilter: ["data-placeholder-visible"],
+    childList: true,
+    subtree: true
+  });
+  apply();
+  return () => {
+    root.removeEventListener("input", onInput);
+    root.removeEventListener("click", onClick);
+    observer.disconnect();
+  };
+}
+function revealCatalogEntry(root, id, {
+  block = "nearest",
+  inline = "nearest",
+  behavior = "auto",
+  media = catalogDesktopMedia
+} = {}) {
+  const view = root.ownerDocument.defaultView;
+  if (!view || media && !view.matchMedia(media).matches) return () => {
+  };
+  const frame = view.requestAnimationFrame(() => {
+    for (const item of root.querySelectorAll("[data-item-id]")) {
+      if (item.dataset.itemId !== id) continue;
+      item.scrollIntoView({ block, inline, behavior });
+      break;
+    }
+  });
+  return () => view.cancelAnimationFrame(frame);
+}
 function wireCatalog(root, {
   onSelect,
   onToggleSidebar,
   onToggleTheme,
+  onToggleContrast,
+  onToggleMotion,
+  onSelectBackground,
   onToggleSecondary,
+  onToggleSecondaryFilter,
+  onToggleSettings,
   urlParam,
+  revealSelection,
   selectAction = "catalog-select",
   toggleSidebarAction = "catalog-toggle-sidebar",
   toggleThemeAction = "catalog-toggle-theme",
-  toggleSecondaryAction = "catalog-toggle-secondary"
+  toggleContrastAction = "catalog-toggle-contrast",
+  toggleMotionAction = "catalog-toggle-motion",
+  selectBackgroundAction = "catalog-select-background",
+  toggleSecondaryAction = "catalog-toggle-secondary",
+  toggleSecondaryFilterAction = "catalog-toggle-secondary-filter",
+  toggleSettingsAction = "catalog-toggle-settings",
+  collapsed,
+  sidebarSize,
+  sidebarStorageKey,
+  settingsCollapsed,
+  settingsSize,
+  settingsStorageKey,
+  id: catalogId = "kui-catalog",
+  onUxReviewProject
 }) {
+  let disposed = false;
+  const view = root.ownerDocument.defaultView;
+  if (onUxReviewProject && view)
+    void loadUxReviewProject(
+      view.location.href,
+      (input, init) => view.fetch(input, init)
+    ).then((directory) => {
+      if (directory && !disposed) onUxReviewProject(directory);
+    });
+  let cancelReveal;
   const select = (id) => {
     onSelect(id);
-    const view = root.ownerDocument.defaultView;
-    if (urlParam && view) {
-      const url = new URL(view.location.href);
+    const view2 = root.ownerDocument.defaultView;
+    if (urlParam && view2) {
+      const url = new URL(view2.location.href);
       url.searchParams.set(urlParam, id);
-      view.history.replaceState(null, "", url);
+      view2.history.replaceState(null, "", url);
+    }
+    const rail = root.ownerDocument.getElementById(`${catalogId}-left-rail`);
+    if (collapsed && !collapsed.peek() && rail && root.ownerDocument.defaultView?.getComputedStyle(rail).position === "absolute")
+      collapsed.value = true;
+    if (revealSelection) {
+      cancelReveal?.();
+      cancelReveal = revealCatalogEntry(
+        root,
+        id,
+        revealSelection === true ? void 0 : revealSelection
+      );
     }
   };
   const disposers = [
+    wireScrollDividers(root),
+    wireCatalogFilter(root),
     // Sidebar items AND the footer's related-entry popup-menu items both carry
     // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.
-    delegate(root, "click", `[data-action="${selectAction}"]`, (_event, element) => {
-      const id = element.dataset.itemId;
-      if (id) select(id);
-    })
+    delegate(
+      root,
+      "click",
+      `[data-action="${selectAction}"]`,
+      (_event, element) => {
+        const id = element.dataset.itemId;
+        if (id) select(id);
+      }
+    )
   ];
   if (onToggleSidebar) {
-    disposers.push(delegate(root, "click", `[data-action="${toggleSidebarAction}"]`, () => onToggleSidebar()));
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleSidebarAction}"]`,
+        () => onToggleSidebar()
+      )
+    );
   }
   if (onToggleTheme) {
-    disposers.push(delegate(root, "click", `[data-action="${toggleThemeAction}"]`, () => onToggleTheme()));
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleThemeAction}"]`,
+        () => onToggleTheme()
+      )
+    );
+  }
+  if (onToggleContrast) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleContrastAction}"]`,
+        () => onToggleContrast()
+      )
+    );
+  }
+  if (onToggleMotion) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleMotionAction}"]`,
+        () => onToggleMotion()
+      )
+    );
+  }
+  if (onSelectBackground) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${selectBackgroundAction}"]`,
+        (_event, element) => {
+          const style = element.getAttribute("data-background-choice");
+          if (style === "checkerboard" || style === "vertical-stripes" || style === "layout-guide" || style === "surface" || style === "sunken")
+            onSelectBackground(style);
+        }
+      )
+    );
   }
   if (onToggleSecondary) {
-    disposers.push(delegate(root, "click", `[data-action="${toggleSecondaryAction}"]`, () => onToggleSecondary()));
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        `[data-action="${toggleSecondaryAction}"]`,
+        () => onToggleSecondary()
+      )
+    );
+  }
+  if (onToggleSecondaryFilter) {
+    disposers.push(
+      delegate(
+        root,
+        "change",
+        `[data-action="${toggleSecondaryFilterAction}"]`,
+        (_event, element) => onToggleSecondaryFilter(element.checked)
+      )
+    );
+  }
+  if (settingsCollapsed || onToggleSettings) {
+    disposers.push(
+      delegate(root, "click", `[data-action="${toggleSettingsAction}"]`, () => {
+        if (settingsCollapsed)
+          settingsCollapsed.value = !settingsCollapsed.peek();
+        onToggleSettings?.();
+      })
+    );
   }
+  const panels = {};
+  if (collapsed || sidebarSize)
+    panels.leftRail = {
+      collapsed,
+      size: sidebarSize,
+      storageKey: sidebarStorageKey
+    };
+  if (settingsCollapsed || settingsSize)
+    panels.rightRail = {
+      collapsed: settingsCollapsed,
+      size: settingsSize,
+      storageKey: settingsStorageKey
+    };
+  if (panels.leftRail || panels.rightRail)
+    disposers.push(wireWorkbench(root, { id: catalogId, panels }));
+  if (onUxReviewProject)
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        'a.kui-toolbar-action-link[href^="uxreview://capture"]',
+        (_event, element) => {
+          const link = element;
+          const url = new URL(link.href);
+          const context = (url.searchParams.get("context") ?? "").replace(
+            /\nPage: [^\n]*$/,
+            ""
+          );
+          url.searchParams.set(
+            "context",
+            `${context}
+Page: ${link.ownerDocument.location.href}`
+          );
+          link.href = url.href;
+        }
+      )
+    );
   return () => {
+    disposed = true;
+    cancelReveal?.();
     for (const dispose of disposers.splice(0)) dispose();
   };
 }
 
-export { wireCatalog };
+export { revealCatalogEntry, wireCatalog };
 
 //# sourceMappingURL=wire-catalog.js.map

package/dist/wire-catalog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/wire-catalog.ts"],"names":[],"mappings":";;;AA0BO,SAAS,YACd,IAAA,EACA;AAAA,EACE,QAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA,GAAe,gBAAA;AAAA,EACf,mBAAA,GAAsB,wBAAA;AAAA,EACtB,iBAAA,GAAoB,sBAAA;AAAA,EACpB,qBAAA,GAAwB;AAC1B,CAAA,EACY;AACZ,EAAA,MAAM,MAAA,GAAS,CAAC,EAAA,KAAe;AAC7B,IAAA,QAAA,CAAS,EAAE,CAAA;AACX,IAAA,MAAM,IAAA,GAAO,KAAK,aAAA,CAAc,WAAA;AAChC,IAAA,IAAI,YAAY,IAAA,EAAM;AACpB,MAAA,MAAM,GAAA,GAAM,IAAI,GAAA,CAAI,IAAA,CAAK,SAAS,IAAI,CAAA;AACtC,MAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,QAAA,EAAU,EAAE,CAAA;AACjC,MAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,IAAA,EAAM,EAAA,EAAI,GAAG,CAAA;AAAA,IACzC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,SAAA,GAA+B;AAAA;AAAA;AAAA,IAGnC,QAAA,CAAS,MAAM,OAAA,EAAS,CAAA,cAAA,EAAiB,YAAY,CAAA,EAAA,CAAA,EAAM,CAAC,QAAQ,OAAA,KAAY;AAC9E,MAAA,MAAM,EAAA,GAAM,QAAwB,OAAA,CAAQ,MAAA;AAC5C,MAAA,IAAI,EAAA,SAAW,EAAE,CAAA;AAAA,IACnB,CAAC;AAAA,GACH;AACA,EAAA,IAAI,eAAA,EAAiB;AACnB,IAAA,SAAA,CAAU,IAAA,CAAK,QAAA,CAAS,IAAA,EAAM,OAAA,EAAS,CAAA,cAAA,EAAiB,mBAAmB,CAAA,EAAA,CAAA,EAAM,MAAM,eAAA,EAAiB,CAAC,CAAA;AAAA,EAC3G;AACA,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,SAAA,CAAU,IAAA,CAAK,QAAA,CAAS,IAAA,EAAM,OAAA,EAAS,CAAA,cAAA,EAAiB,iBAAiB,CAAA,EAAA,CAAA,EAAM,MAAM,aAAA,EAAe,CAAC,CAAA;AAAA,EACvG;AACA,EAAA,IAAI,iBAAA,EAAmB;AACrB,IAAA,SAAA,CAAU,IAAA,CAAK,QAAA,CAAS,IAAA,EAAM,OAAA,EAAS,CAAA,cAAA,EAAiB,qBAAqB,CAAA,EAAA,CAAA,EAAM,MAAM,iBAAA,EAAmB,CAAC,CAAA;AAAA,EAC/G;AACA,EAAA,OAAO,MAAM;AACX,IAAA,KAAA,MAAW,OAAA,IAAW,SAAA,CAAU,MAAA,CAAO,CAAC,GAAG,OAAA,EAAQ;AAAA,EACrD,CAAA;AACF","file":"wire-catalog.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nexport interface WireCatalogOptions {\n  /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */\n  onSelect: (id: string) => void;\n  /** Invoked when the sidebar collapse/expand control is activated. */\n  onToggleSidebar?: () => void;\n  /** Invoked when the theme toggle is activated. */\n  onToggleTheme?: () => void;\n  /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */\n  onToggleSecondary?: () => void;\n  /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */\n  urlParam?: string;\n  selectAction?: string;\n  toggleSidebarAction?: string;\n  toggleThemeAction?: string;\n  toggleSecondaryAction?: string;\n}\n\n/**\n * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar\n * item selection (and the related-entry popup menu), the sidebar collapse toggle, and\n * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates\n * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.\n * Returns a disposer.\n */\nexport function wireCatalog(\n  root: HTMLElement,\n  {\n    onSelect,\n    onToggleSidebar,\n    onToggleTheme,\n    onToggleSecondary,\n    urlParam,\n    selectAction = 'catalog-select',\n    toggleSidebarAction = 'catalog-toggle-sidebar',\n    toggleThemeAction = 'catalog-toggle-theme',\n    toggleSecondaryAction = 'catalog-toggle-secondary',\n  }: WireCatalogOptions,\n): () => void {\n  const select = (id: string) => {\n    onSelect(id);\n    const view = root.ownerDocument.defaultView;\n    if (urlParam && view) {\n      const url = new URL(view.location.href);\n      url.searchParams.set(urlParam, id);\n      view.history.replaceState(null, '', url);\n    }\n  };\n\n  const disposers: Array<() => void> = [\n    // Sidebar items AND the footer's related-entry popup-menu items both carry\n    // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.\n    delegate(root, 'click', `[data-action=\"${selectAction}\"]`, (_event, element) => {\n      const id = (element as HTMLElement).dataset.itemId;\n      if (id) select(id);\n    }),\n  ];\n  if (onToggleSidebar) {\n    disposers.push(delegate(root, 'click', `[data-action=\"${toggleSidebarAction}\"]`, () => onToggleSidebar()));\n  }\n  if (onToggleTheme) {\n    disposers.push(delegate(root, 'click', `[data-action=\"${toggleThemeAction}\"]`, () => onToggleTheme()));\n  }\n  if (onToggleSecondary) {\n    disposers.push(delegate(root, 'click', `[data-action=\"${toggleSecondaryAction}\"]`, () => onToggleSecondary()));\n  }\n  return () => {\n    for (const dispose of disposers.splice(0)) dispose();\n  };\n}\n"]}
+{"version":3,"sources":["../src/catalog/wiring/wire-catalog.ts"],"names":["view"],"mappings":"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","file":"wire-catalog.js","sourcesContent":["import { delegate, type Signal } from 'kerfjs';\n\nimport { readSearchField } from '../../components/forms/search-field/search-field.js';\nimport {\n  wireWorkbench,\n  type WireWorkbenchOptions,\n} from '../../components/layout/workbench/wiring/wire-workbench.js';\nimport { wireScrollDividers } from '../../wiring/wire-scroll-dividers.js';\nimport type { CatalogBackgroundStyle } from '../types.js';\nimport { loadUxReviewProject } from '../ux-review.js';\n\nexport interface WireCatalogOptions {\n  /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */\n  onSelect: (id: string) => void;\n  /** Invoked when the sidebar collapse/expand control is activated. */\n  onToggleSidebar?: () => void;\n  /** Invoked when the theme toggle is activated. */\n  onToggleTheme?: () => void;\n  /** Report a contrast-toggle press; the app updates its signal and applies the preference. */\n  onToggleContrast?: () => void;\n  /** Report a reduced-motion-toggle press; the app updates its signal and applies the preference. */\n  onToggleMotion?: () => void;\n  /** Report a preview background choice; the app updates `backgroundStyle`. */\n  onSelectBackground?: (style: CatalogBackgroundStyle) => void;\n  /**\n   * Invoked when the settings pane toggle is activated. With\n   * `settingsCollapsed`, `wireCatalog` has already flipped the signal.\n   */\n  onToggleSettings?: () => void;\n  /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */\n  onToggleSecondary?: () => void;\n  /**\n   * Invoked with the switch's new state when the secondary group's tag-filter\n   * switch changes; the app updates `tagFilter.show`.\n   */\n  onToggleSecondaryFilter?: (show: boolean) => void;\n  /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */\n  urlParam?: string;\n  /**\n   * Reveal the chosen sidebar row after selection. `true` uses desktop-safe\n   * defaults; pass options to customize scroll alignment or the media guard.\n   */\n  revealSelection?: boolean | CatalogRevealOptions;\n  selectAction?: string;\n  toggleSidebarAction?: string;\n  toggleThemeAction?: string;\n  toggleContrastAction?: string;\n  toggleMotionAction?: string;\n  selectBackgroundAction?: string;\n  toggleSecondaryAction?: string;\n  toggleSecondaryFilterAction?: string;\n  toggleSettingsAction?: string;\n  /**\n   * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench\n   * sidebar is wired like any Workbench rail: it becomes a transient overlay\n   * on a small screen (collapsed as the breakpoint applies, closed on Escape\n   * or a press outside, focus handed back), and choosing an entry from the\n   * open overlay closes it.\n   */\n  collapsed?: Signal<boolean>;\n  /**\n   * The app-owned sidebar width signal for a Catalog rendered with\n   * `sidebar={{ resizable: true, size: sidebarSize.value }}`. Each committed\n   * drag or keyboard resize is written to it.\n   */\n  sidebarSize?: Signal<number>;\n  /**\n   * With `sidebarSize`, load and save the width under this storage key so the\n   * catalog remembers the user's sidebar width.\n   */\n  sidebarStorageKey?: string;\n  /**\n   * The settings pane's app-owned collapsed flag, rendered as the Catalog's\n   * `settingsCollapsed`. With it, `wireCatalog` owns the pane's toggle (each\n   * press flips the signal) and wires the pane like any Workbench rail: a\n   * transient overlay on a small screen (collapsed as the breakpoint applies,\n   * closed on Escape or a press outside, focus handed back).\n   */\n  settingsCollapsed?: Signal<boolean>;\n  /**\n   * The app-owned settings pane width signal for a Catalog rendered with\n   * `settingsPanel={{ resizable: true, size: settingsSize.value }}`. Each\n   * committed drag or keyboard resize is written to it.\n   */\n  settingsSize?: Signal<number>;\n  /**\n   * With `settingsSize`, load and save the width under this storage key so\n   * the catalog remembers the user's settings pane width.\n   */\n  settingsStorageKey?: string;\n  /** The Catalog's `id`, when it is not the default `kui-catalog`. */\n  id?: string;\n  /**\n   * Ask the page's server once for its UX Review project directory (served by\n   * `uxReviewPlugin` from `@kerfjs/ui/vite-ux-review`) and report it, so the\n   * app can render the Catalog with `uxReview`. Never called on static\n   * hosting or a server without the plugin.\n   */\n  onUxReviewProject?: (projectDirectory: string) => void;\n}\n\nexport interface CatalogRevealOptions {\n  /** Scroll alignment within the sidebar. Default `'nearest'`. */\n  block?: ScrollLogicalPosition;\n  /** Cross-axis alignment. Default `'nearest'`. */\n  inline?: ScrollLogicalPosition;\n  /** Scroll behavior. Default `'auto'`. */\n  behavior?: ScrollBehavior;\n  /**\n   * Only reveal when this media query matches. Defaults to the Catalog's\n   * desktop layout; pass `false` to reveal at every viewport size.\n   */\n  media?: string | false;\n}\n\n// The Workbench keeps the sidebar inline above its `narrow` breakpoint (704px).\nconst catalogDesktopMedia = '(min-width: 44.01rem)';\n\n/** Keep the sidebar filter local to the shared Catalog, including across controlled rerenders. */\nfunction wireCatalogFilter(root: HTMLElement): () => void {\n  const view = root.ownerDocument.defaultView!;\n  let filterValue = '';\n  let query = '';\n  let currentEditor: HTMLElement | null = null;\n  const matches = (name: string) => name.toLocaleLowerCase().includes(query);\n  const apply = () => {\n    const editor = root.querySelector<HTMLElement>('[data-catalog-filter]');\n    const nav = root.querySelector<HTMLElement>('[data-catalog-sidebar]');\n    if (!editor || !nav) return;\n    if (editor !== currentEditor) {\n      currentEditor = editor;\n      if (readSearchField(editor).query !== filterValue)\n        editor.textContent = filterValue;\n    }\n    const field = editor.closest<HTMLElement>(\n      '[data-component=\"search-field\"]',\n    )!;\n    field.dataset.catalogFilterActive = String(Boolean(query));\n    const placeholderVisible = String(!filterValue);\n    if (field.dataset.placeholderVisible !== placeholderVisible)\n      field.dataset.placeholderVisible = placeholderVisible;\n    const clear = field.querySelector<HTMLElement>(\n      '[data-action=\"catalog-clear-filter\"]',\n    )!;\n    clear.style.display = query ? '' : 'none';\n    nav.dataset.catalogFilterActive = String(Boolean(query));\n    let visibleEntries = 0;\n    for (const section of nav.querySelectorAll<HTMLElement>(\n      '[data-catalog-section]',\n    )) {\n      const group = section.closest<HTMLElement>(\n        '[data-catalog-secondary-group]',\n      );\n      const headingMatches =\n        matches(section.dataset.catalogSection!) ||\n        (group !== null && matches(group.dataset.catalogSecondaryGroup!));\n      let sectionEntries = 0;\n      for (const entry of section.querySelectorAll<HTMLElement>(\n        '[data-catalog-entry-name]',\n      )) {\n        const visible =\n          !query || headingMatches || matches(entry.dataset.catalogEntryName!);\n        entry.hidden = !visible;\n        if (visible) sectionEntries++;\n      }\n      section.hidden = Boolean(query) && sectionEntries === 0;\n      visibleEntries += sectionEntries;\n    }\n    for (const group of nav.querySelectorAll<HTMLElement>(\n      '[data-catalog-secondary-group]',\n    )) {\n      group.hidden =\n        Boolean(query) &&\n        !Array.from(\n          group.querySelectorAll<HTMLElement>('[data-catalog-section]'),\n        ).some((section) => !section.hidden);\n      const toggle = group.querySelector<HTMLElement>('[aria-expanded]');\n      const content = group.querySelector<HTMLElement>(\n        '[data-catalog-secondary-collapsed]',\n      );\n      if (toggle && content) {\n        const expanded = query\n          ? !group.hidden\n          : content.dataset.catalogSecondaryCollapsed !== 'true';\n        toggle.setAttribute('aria-expanded', String(expanded));\n        const arrow = toggle.querySelector<HTMLElement>(\n          '[data-component=\"disclosure-arrow\"]',\n        );\n        if (arrow) {\n          arrow.dataset.open = String(expanded);\n          arrow.dataset.direction = expanded ? 'down' : 'right';\n          arrow.style.setProperty(\n            '--_kui-disclosure-arrow-rotation',\n            expanded ? '90deg' : '0deg',\n          );\n        }\n      }\n    }\n    const empty = nav.querySelector<HTMLElement>(\n      '[data-catalog-filter-empty]',\n    )!;\n    empty.dataset.visible = String(Boolean(query) && visibleEntries === 0);\n  };\n  const onInput = (event: Event) => {\n    const target = event.target as HTMLElement | null;\n    const editor = target?.closest<HTMLElement>('[data-catalog-filter]');\n    if (!editor || !root.contains(editor)) return;\n    filterValue = readSearchField(editor).query;\n    query = filterValue.trim().toLocaleLowerCase();\n    apply();\n  };\n  const onClick = (event: Event) => {\n    const target = event.target as Element;\n    if (!target.closest('[data-action=\"catalog-clear-filter\"]')) return;\n    const editor = root.querySelector<HTMLElement>('[data-catalog-filter]')!;\n    filterValue = '';\n    query = '';\n    editor.textContent = '';\n    apply();\n    editor.focus();\n  };\n  root.addEventListener('input', onInput);\n  root.addEventListener('click', onClick);\n  const observer = new view.MutationObserver(() => {\n    if (filterValue) apply();\n  });\n  observer.observe(root, {\n    attributes: true,\n    attributeFilter: ['data-placeholder-visible'],\n    childList: true,\n    subtree: true,\n  });\n  apply();\n  return () => {\n    root.removeEventListener('input', onInput);\n    root.removeEventListener('click', onClick);\n    observer.disconnect();\n  };\n}\n\n/**\n * Reveal one Catalog sidebar entry after the controlled render settles without\n * moving focus. Returns a cancellation function for rapid selection changes.\n */\nexport function revealCatalogEntry(\n  root: HTMLElement,\n  id: string,\n  {\n    block = 'nearest',\n    inline = 'nearest',\n    behavior = 'auto',\n    media = catalogDesktopMedia,\n  }: CatalogRevealOptions = {},\n): () => void {\n  const view = root.ownerDocument.defaultView;\n  if (!view || (media && !view.matchMedia(media).matches)) return () => {};\n  const frame = view.requestAnimationFrame(() => {\n    for (const item of root.querySelectorAll<HTMLElement>('[data-item-id]')) {\n      if (item.dataset.itemId !== id) continue;\n      item.scrollIntoView({ block, inline, behavior });\n      break;\n    }\n  });\n  return () => view.cancelAnimationFrame(frame);\n}\n\n/**\n * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar\n * item selection (and the related-entry popup menu), the sidebar collapse toggle,\n * the settings pane toggle, and the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates\n * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.\n * It also wires the scroll dividers below root (`wireScrollDividers`), so the\n * catalog's panes and every example in it show their chrome dividers only\n * while scrolled. Returns a disposer.\n */\nexport function wireCatalog(\n  root: HTMLElement,\n  {\n    onSelect,\n    onToggleSidebar,\n    onToggleTheme,\n    onToggleContrast,\n    onToggleMotion,\n    onSelectBackground,\n    onToggleSecondary,\n    onToggleSecondaryFilter,\n    onToggleSettings,\n    urlParam,\n    revealSelection,\n    selectAction = 'catalog-select',\n    toggleSidebarAction = 'catalog-toggle-sidebar',\n    toggleThemeAction = 'catalog-toggle-theme',\n    toggleContrastAction = 'catalog-toggle-contrast',\n    toggleMotionAction = 'catalog-toggle-motion',\n    selectBackgroundAction = 'catalog-select-background',\n    toggleSecondaryAction = 'catalog-toggle-secondary',\n    toggleSecondaryFilterAction = 'catalog-toggle-secondary-filter',\n    toggleSettingsAction = 'catalog-toggle-settings',\n    collapsed,\n    sidebarSize,\n    sidebarStorageKey,\n    settingsCollapsed,\n    settingsSize,\n    settingsStorageKey,\n    id: catalogId = 'kui-catalog',\n    onUxReviewProject,\n  }: WireCatalogOptions,\n): () => void {\n  let disposed = false;\n  const view = root.ownerDocument.defaultView;\n  if (onUxReviewProject && view)\n    void loadUxReviewProject(view.location.href, (input, init) =>\n      view.fetch(input, init),\n    ).then((directory) => {\n      if (directory && !disposed) onUxReviewProject(directory);\n    });\n  let cancelReveal: (() => void) | undefined;\n  const select = (id: string) => {\n    onSelect(id);\n    const view = root.ownerDocument.defaultView;\n    if (urlParam && view) {\n      const url = new URL(view.location.href);\n      url.searchParams.set(urlParam, id);\n      view.history.replaceState(null, '', url);\n    }\n    // An open overlay sidebar gives way to the entry just chosen from it.\n    const rail = root.ownerDocument.getElementById(`${catalogId}-left-rail`);\n    if (\n      collapsed &&\n      !collapsed.peek() &&\n      rail &&\n      root.ownerDocument.defaultView?.getComputedStyle(rail).position ===\n        'absolute'\n    )\n      collapsed.value = true;\n    if (revealSelection) {\n      cancelReveal?.();\n      cancelReveal = revealCatalogEntry(\n        root,\n        id,\n        revealSelection === true ? undefined : revealSelection,\n      );\n    }\n  };\n\n  const disposers: Array<() => void> = [\n    wireScrollDividers(root),\n    wireCatalogFilter(root),\n    // Sidebar items AND the footer's related-entry popup-menu items both carry\n    // `data-action={selectAction}` + `data-item-id`, so one delegated click covers both.\n    delegate(\n      root,\n      'click',\n      `[data-action=\"${selectAction}\"]`,\n      (_event, element) => {\n        const id = (element as HTMLElement).dataset.itemId;\n        if (id) select(id);\n      },\n    ),\n  ];\n  if (onToggleSidebar) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleSidebarAction}\"]`, () =>\n        onToggleSidebar(),\n      ),\n    );\n  }\n  if (onToggleTheme) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleThemeAction}\"]`, () =>\n        onToggleTheme(),\n      ),\n    );\n  }\n  if (onToggleContrast) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleContrastAction}\"]`, () =>\n        onToggleContrast(),\n      ),\n    );\n  }\n  if (onToggleMotion) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleMotionAction}\"]`, () =>\n        onToggleMotion(),\n      ),\n    );\n  }\n  if (onSelectBackground) {\n    disposers.push(\n      delegate(\n        root,\n        'click',\n        `[data-action=\"${selectBackgroundAction}\"]`,\n        (_event, element) => {\n          const style = element.getAttribute('data-background-choice');\n          if (\n            style === 'checkerboard' ||\n            style === 'vertical-stripes' ||\n            style === 'layout-guide' ||\n            style === 'surface' ||\n            style === 'sunken'\n          )\n            onSelectBackground(style);\n        },\n      ),\n    );\n  }\n  if (onToggleSecondary) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleSecondaryAction}\"]`, () =>\n        onToggleSecondary(),\n      ),\n    );\n  }\n  if (onToggleSecondaryFilter) {\n    disposers.push(\n      delegate(\n        root,\n        'change',\n        `[data-action=\"${toggleSecondaryFilterAction}\"]`,\n        (_event, element) =>\n          onToggleSecondaryFilter((element as HTMLInputElement).checked),\n      ),\n    );\n  }\n  if (settingsCollapsed || onToggleSettings) {\n    disposers.push(\n      delegate(root, 'click', `[data-action=\"${toggleSettingsAction}\"]`, () => {\n        if (settingsCollapsed)\n          settingsCollapsed.value = !settingsCollapsed.peek();\n        onToggleSettings?.();\n      }),\n    );\n  }\n  // One wireWorkbench call owns every wired rail, so overlays stay exclusive.\n  const panels: WireWorkbenchOptions['panels'] = {};\n  if (collapsed || sidebarSize)\n    panels.leftRail = {\n      collapsed,\n      size: sidebarSize,\n      storageKey: sidebarStorageKey,\n    };\n  if (settingsCollapsed || settingsSize)\n    panels.rightRail = {\n      collapsed: settingsCollapsed,\n      size: settingsSize,\n      storageKey: settingsStorageKey,\n    };\n  if (panels.leftRail || panels.rightRail)\n    disposers.push(wireWorkbench(root, { id: catalogId, panels }));\n  if (onUxReviewProject)\n    // The capture context names the page the review came from. The URL can\n    // change after the link rendered (`urlParam`), so stamp it as the link is\n    // followed; the browser navigates to the href as it stands after the click.\n    disposers.push(\n      delegate(\n        root,\n        'click',\n        'a.kui-toolbar-action-link[href^=\"uxreview://capture\"]',\n        (_event, element) => {\n          const link = element as HTMLAnchorElement;\n          const url = new URL(link.href);\n          const context = (url.searchParams.get('context') ?? '').replace(\n            /\\nPage: [^\\n]*$/,\n            '',\n          );\n          url.searchParams.set(\n            'context',\n            `${context}\\nPage: ${link.ownerDocument.location.href}`,\n          );\n          link.href = url.href;\n        },\n      ),\n    );\n  return () => {\n    disposed = true;\n    cancelReveal?.();\n    for (const dispose of disposers.splice(0)) dispose();\n  };\n}\n"]}

package/dist/wire-checkboxes.d.ts

@@ -0,0 +1,10 @@
+type Root = HTMLElement | Document;
+/**
+ * Give every `Checkbox` below root rendered with `indeterminate` its native
+ * mixed state, which only script can set, and keep it in step as renders add
+ * or remove the marker. A click clears the mixed state natively; the app's
+ * next render decides it again. Dispose with the owning application.
+ */
+declare function wireCheckboxes(root: Root): () => void;
+
+export { wireCheckboxes };

package/dist/wire-checkboxes.js

@@ -0,0 +1,3 @@
+export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
+
+//# sourceMappingURL=wire-checkboxes.js.map

package/dist/{wire-token-search-fields.js.map → wire-checkboxes.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-token-search-fields.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-checkboxes.js"}

package/dist/wire-choice-chips.d.ts

@@ -0,0 +1,17 @@
+/** The selected values of a `multiple: true` ChoiceChips group, in choice order. */
+declare function readChoiceChips(group: Element): string[];
+/**
+ * Give every `multiple: true` ChoiceChips group under `root` its listbox
+ * behavior: a click selects one chip, Cmd (Apple platforms) or Ctrl
+ * (elsewhere) toggles one, and Shift extends a range from the last plain or
+ * toggled chip. On the keyboard the group is one Tab stop: arrows, Home, and
+ * End move the selection, Shift with them extends it, Cmd/Ctrl with them
+ * moves focus alone, Space toggles the focused chip (Shift+Space extends to
+ * it), and Cmd/Ctrl+A selects every chip. Disabled chips keep their state.
+ * Each change updates `aria-selected` and the hidden form inputs, then fires
+ * a bubbling `change` on the group, whose `data-action` is the group's
+ * `action`; read the new set with `readChoiceChips`. Returns a disposer.
+ */
+declare function wireChoiceChips(root: HTMLElement | Document): () => void;
+
+export { readChoiceChips, wireChoiceChips };

package/dist/wire-choice-chips.js

@@ -0,0 +1,4 @@
+export { readChoiceChips, wireChoiceChips } from './chunk-K57NINLH.js';
+
+
+//# sourceMappingURL=wire-choice-chips.js.map

package/dist/wire-choice-chips.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-choice-chips.js"}

package/dist/wire-color-fields.d.ts

@@ -0,0 +1,33 @@
+import { ColorPickerMode, ColorPickerProps } from './color-picker.js';
+import 'kerfjs';
+import './color-swatches.js';
+import './css-values.js';
+
+/** Reported to {@link WireColorFieldsOptions.onInput} and `onChange`. */
+interface ColorFieldChange {
+    id: string;
+    /** `#rrggbb`, or `#rrggbbaa` below full opacity. */
+    value: string;
+    mode: ColorPickerMode;
+}
+/** The picker options a field's popup takes beyond its value, model, and opacity. */
+type ColorFieldPickerOptions = Pick<ColorPickerProps, 'presets' | 'samples' | 'addSampleAction' | 'eyedropper'>;
+interface WireColorFieldsOptions {
+    /** Every live edit in the open picker. */
+    onInput?: (change: ColorFieldChange) => void;
+    /** A committed edit: apply it and re-render the ColorField with it. */
+    onChange?: (change: ColorFieldChange) => void;
+    /** Per-field picker options (presets, samples, the sampler), keyed by field id. */
+    pickers?: Readonly<Record<string, ColorFieldPickerOptions>>;
+}
+/**
+ * Wire every ColorField under `root`: pressing a field's trigger opens a
+ * ColorPicker in an AnchoredSurface below it, with the field's value, model,
+ * and opacity, plus any `pickers[id]` options. Edits preview at once on the
+ * trigger's swatch and hex and go to `onInput`; committed edits go to
+ * `onChange`. Escape or a press outside closes the picker and returns focus
+ * to the trigger. Returns a disposer that also closes an open picker.
+ */
+declare function wireColorFields(root: HTMLElement, { onInput, onChange, pickers }?: WireColorFieldsOptions): () => void;
+
+export { type ColorFieldChange, type ColorFieldPickerOptions, type WireColorFieldsOptions, wireColorFields };