@kerfjs/ui 5.0.0-beta.92 → 5.0.0-beta.94

package/dist/{types-oLe_N1w0.d.ts → types-CVgIwSdq.d.ts}

@@ -42,6 +42,17 @@ interface CatalogBrand {
     /** Logo image URL (rendered decorative). Omit for a text-only brand. */
     logoUrl?: string;
 }
+/**
+ * The UX Review capture link a {@link Catalog} shows when it knows the local
+ * project directory (see `uxReviewPlugin` and `wireCatalog`'s
+ * `onUxReviewProject`).
+ */
+interface CatalogUxReview {
+    /** The absolute project directory UX Review files captures under. */
+    projectDirectory: string;
+    /** The catalog's name in the capture title and context (default `brand.title`). */
+    name?: string;
+}
 type CatalogStageRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-catalog-stage'?: never;
     'data-background-style'?: never;
@@ -62,10 +73,27 @@ interface CatalogSidebarConfig extends Pick<WorkbenchPanel, 'resizable' | 'separ
     /** The sidebar header toolbar's configuration (default: no divider; its pane draws one while scrolled). */
     toolbar?: ToolbarConfig;
 }
+/**
+ * The Catalog settings pane's configuration, forwarded to its Workbench right
+ * rail. Everything is optional; omitted fields keep the Catalog's defaults.
+ */
+interface CatalogSettingsConfig extends Pick<WorkbenchPanel, 'resizable' | 'separator' | 'collapseMotion' | 'presentation' | 'responsiveOverlayAt' | 'compactOverlay'> {
+    /**
+     * Pane width in px (default 288). With `resizable`, it is the current
+     * width: render the app's size signal here and hand the same signal to
+     * `wireCatalog`'s `settingsSize`, which writes each committed resize to it.
+     */
+    size?: number;
+    /** The pane's title (default `Settings`); it also names the toggle. */
+    title?: string;
+    /** The pane header toolbar's configuration. */
+    toolbar?: ToolbarConfig;
+}
 interface CatalogProps {
     /**
      * The catalog's `id` (default `kui-catalog`). Its Workbench derives the
-     * sidebar's id from it (`<id>-left-rail`), which `wireCatalog` wires.
+     * sidebar's id from it (`<id>-left-rail`) and the settings pane's
+     * (`<id>-right-rail`), which `wireCatalog` wires.
      */
     id?: string;
     brand: CatalogBrand;
@@ -81,6 +109,35 @@ interface CatalogProps {
     /** Show the preview background chooser; `backgroundStyle` remains app-owned. */
     backgroundControl?: boolean;
     headerActions?: KerfUiContent;
+    /**
+     * The active entry's settings (variant and state controls for its preview).
+     * When supplied, the Catalog renders a settings pane beside the stage — a
+     * Workbench right rail titled `settingsPanel.title` — with the standard
+     * toggle: in the pane's header while it is open, at the end of the entry
+     * toolbar while it is collapsed. Omit it (or pass `null`) for an entry with
+     * no settings; neither the pane nor the toggle renders. Below the
+     * Workbench's `narrow` breakpoint the pane overlays the stage.
+     */
+    settings?: KerfUiContent;
+    /**
+     * Whether the settings pane is collapsed (default `false`). The app owns
+     * it; hand the same signal to `wireCatalog`'s `settingsCollapsed`, which
+     * flips it from the toggle and makes the pane a transient overlay on a
+     * small screen.
+     */
+    settingsCollapsed?: boolean;
+    /**
+     * The settings pane's title, size, resizing, and overlay configuration
+     * (default: `Settings`, 288px, not resizable, an overlay below the
+     * Workbench's `narrow` breakpoint, `inset` in a compact Workbench).
+     */
+    settingsPanel?: CatalogSettingsConfig;
+    /**
+     * Show a "Capture region" link to UX Review after `headerActions`, preset
+     * with the project and the active entry. Supply it once the project is known
+     * (`wireCatalog`'s `onUxReviewProject`); omit it on static hosting.
+     */
+    uxReview?: CatalogUxReview;
     secondarySections?: CatalogSecondaryGroup;
     sidebarFooter?: KerfUiContent;
     status?: KerfUiContent;
@@ -95,6 +152,8 @@ interface CatalogProps {
     toggleMotionAction?: string;
     selectBackgroundAction?: string;
     toggleSecondaryAction?: string;
+    /** The settings pane toggle's `data-action` (default `catalog-toggle-settings`). */
+    toggleSettingsAction?: string;
     /**
      * Whether the entry toolbar and description stay pinned above the preview
      * (`fixed`), scroll away with it (`scroll`), or stay pinned while the entry
@@ -127,4 +186,4 @@ interface CatalogProps {
     slot?: string;
 }
 
-export type { CatalogResource as C, CatalogBackgroundStyle as a, CatalogProps as b, CatalogBrand as c, CatalogEntry as d, CatalogRelated as e, CatalogSecondaryGroup as f, CatalogSection as g, CatalogStageRootAttributes as h };
+export type { CatalogResource as C, CatalogBackgroundStyle as a, CatalogProps as b, CatalogBrand as c, CatalogEntry as d, CatalogRelated as e, CatalogSecondaryGroup as f, CatalogSection as g, CatalogSettingsConfig as h, CatalogStageRootAttributes as i, CatalogUxReview as j };

package/dist/wire-catalog.d.ts

@@ -1,5 +1,5 @@
 import { Signal } from 'kerfjs';
-import { a as CatalogBackgroundStyle } from './types-oLe_N1w0.js';
+import { a as CatalogBackgroundStyle } from './types-CVgIwSdq.js';
 import './toolbar.js';
 import './semantic-content-BbzjvSu9.js';
 import './sides-BPSWde0A.js';
@@ -28,6 +28,11 @@ interface WireCatalogOptions {
     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;
     /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
@@ -44,6 +49,7 @@ interface WireCatalogOptions {
     toggleMotionAction?: string;
     selectBackgroundAction?: string;
     toggleSecondaryAction?: 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
@@ -63,8 +69,34 @@ interface WireCatalogOptions {
      * 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'`. */
@@ -86,13 +118,13 @@ interface CatalogRevealOptions {
 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`.
  * 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, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, collapsed, sidebarSize, sidebarStorageKey, id: catalogId, }: WireCatalogOptions): () => void;
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, onToggleSettings, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, collapsed, sidebarSize, sidebarStorageKey, settingsCollapsed, settingsSize, settingsStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
 
 export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog };

package/dist/wire-catalog.js

@@ -1,6 +1,7 @@
 import { wireWorkbench } from './chunk-QLA25V2K.js';
 
 import { wireScrollDividers } from './chunk-6STQXRT4.js';
+import { loadUxReviewProject } from './chunk-6C6DLP3W.js';
 
 import { readTokenSearchField } from './chunk-ROZLJULF.js';
 
@@ -148,6 +149,7 @@ function wireCatalog(root, {
   onToggleMotion,
   onSelectBackground,
   onToggleSecondary,
+  onToggleSettings,
   urlParam,
   revealSelection,
   selectAction = "catalog-select",
@@ -157,19 +159,33 @@ function wireCatalog(root, {
   toggleMotionAction = "catalog-toggle-motion",
   selectBackgroundAction = "catalog-select-background",
   toggleSecondaryAction = "catalog-toggle-secondary",
+  toggleSettingsAction = "catalog-toggle-settings",
   collapsed,
   sidebarSize,
   sidebarStorageKey,
-  id: catalogId = "kui-catalog"
+  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")
@@ -262,20 +278,54 @@ function wireCatalog(root, {
       )
     );
   }
+  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(
-      wireWorkbench(root, {
-        id: catalogId,
-        panels: {
-          leftRail: {
-            collapsed,
-            size: sidebarSize,
-            storageKey: sidebarStorageKey
-          }
+      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();
   };

package/dist/wire-catalog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/catalog/wiring/wire-catalog.ts"],"names":[],"mappings":"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","file":"wire-catalog.js","sourcesContent":["import { delegate, type Signal } from 'kerfjs';\n\nimport { readTokenSearchField } from '../../components/forms/token-search-field/token-search-field.js';\nimport { wireWorkbench } from '../../components/layout/workbench/wiring/wire-workbench.js';\nimport { wireScrollDividers } from '../../wiring/wire-scroll-dividers.js';\nimport type { CatalogBackgroundStyle } from '../types.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  /** 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  /**\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  /**\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  /** The Catalog's `id`, when it is not the default `kui-catalog`. */\n  id?: string;\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 (readTokenSearchField(editor).query !== filterValue)\n        editor.textContent = filterValue;\n    }\n    const field = editor.closest<HTMLElement>(\n      '[data-component=\"token-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 = readTokenSearchField(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, 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 * 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    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    collapsed,\n    sidebarSize,\n    sidebarStorageKey,\n    id: catalogId = 'kui-catalog',\n  }: WireCatalogOptions,\n): () => void {\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 (collapsed || sidebarSize)\n    disposers.push(\n      wireWorkbench(root, {\n        id: catalogId,\n        panels: {\n          leftRail: {\n            collapsed,\n            size: sidebarSize,\n            storageKey: sidebarStorageKey,\n          },\n        },\n      }),\n    );\n  return () => {\n    cancelReveal?.();\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 { readTokenSearchField } from '../../components/forms/token-search-field/token-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  /** 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  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 (readTokenSearchField(editor).query !== filterValue)\n        editor.textContent = filterValue;\n    }\n    const field = editor.closest<HTMLElement>(\n      '[data-component=\"token-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 = readTokenSearchField(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    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    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 (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-tab-bars.js

@@ -1,3 +1,3 @@
-export { reorderTabs, wireTabBars } from './chunk-H45DAZBL.js';
+export { reorderTabs, wireTabBars } from './chunk-KQDU7Z7P.js';
 
 //# sourceMappingURL=wire-tab-bars.js.map

package/docs/catalog.md

@@ -64,6 +64,14 @@ expanded? }`. When `collapsible`, the label is a disclosure toggle controlling
   `expanded` (the app owns it; wire it with `wireCatalog`'s `onToggleSecondary`).
 - Optional slots: `headerActions` (extra header controls), `sidebarFooter` (extra
   sidebar content), and `status` (a footer status line).
+- **`settings`** — the active entry's settings (variant and state controls for
+  its preview). When supplied, the Catalog renders a **Settings** pane beside the
+  stage (its Workbench right rail) with the standard collapse toggle: in the
+  pane's header while it is open, at the end of the entry toolbar while it is
+  collapsed. Omit it (or pass `null`) for an entry with no settings; neither the
+  pane nor its toggle renders. Supply only the controls — compose them from
+  `ListInsetControl` + `Select` (or other form components) so they share the
+  pane's text column; the Catalog owns the pane, its title, and its toggle.
 
 The sidebar includes a `TokenSearchField` in its fixed header for every Catalog
 consumer, so the filter remains visible while the entries scroll. `wireCatalog`
@@ -211,6 +219,9 @@ Catalogs for downstream components should conform to the
 contract and can start from the checked
 [`component-catalog-extension.json`](./examples/component-catalog-extension.json)
 example; provide those entries beside Kerf's shipped catalog to AI tools.
+Packages that keep a `kerf.components.json` can generate this file instead of
+hand-maintaining it: set `kerfComponentCatalog.selectionOutput` and run
+`kerf-component-catalog` (see `create-kerf-component`'s README).
 An extension entry may declare `uses` with direct Kerf or extension entry ids,
 plus repository-relative `source` and `demoSource` paths. Keep the ids unique
 and resolvable across both catalogs; paths use `/` separators and cannot
@@ -454,6 +465,21 @@ revealCatalogEntry(app, initial, { block: "center" });
   header's `ToolbarConfig`). A resizable sidebar's width is app state like
   `collapsed`: render your size signal as `sidebar.size` and pass the same signal
   as `wireCatalog`'s `sidebarSize` (plus `sidebarStorageKey` to remember it).
+- **`settingsCollapsed`** is transient UI like `collapsed`: render your signal as
+  `settingsCollapsed` and pass the same signal as `wireCatalog`'s
+  `settingsCollapsed`. `wireCatalog` then flips it from the toggle (report it
+  with `onToggleSettings`, which runs after the flip) and wires the pane as a
+  Workbench rail: below the `narrow` breakpoint it starts collapsed and opens as
+  an overlay over the stage that Escape or a press outside closes, handing focus
+  back to the toggle. The sidebar and settings overlays are exclusive. Without
+  the signal, `onToggleSettings` alone reports the press and the app flips its
+  own state.
+- **`settingsPanel`** configures the settings pane like `sidebar` configures the
+  sidebar: `title` (default `Settings`; it also names the toggle), `size`
+  (default 288px), `resizable`, `separator`, `collapseMotion`, `presentation`,
+  `responsiveOverlayAt`, `compactOverlay`, and `toolbar`. A resizable pane's
+  width is app state: render your signal as `settingsPanel.size` and pass it as
+  `wireCatalog`'s `settingsSize` (plus `settingsStorageKey` to remember it).
 - **`mainToolbar` / `footerToolbar`** take the entry toolbar's and the resource
   footer toolbar's `ToolbarConfig` (`dividerSides`, `centerAlign`, `responsive`,
   `responsiveAt`, `safeAreaEdges`). The defaults are a wrapping entry toolbar
@@ -465,6 +491,57 @@ revealCatalogEntry(app, initial, { block: "center" });
   the toggle, the app applies the theme (the shell reads `theme` to show the toggle's
   opposite-state label). Omit `theme` to hide the toggle entirely.
 
+## UX Review capture
+
+On a local Vite dev or preview server the catalog can offer a **Capture region**
+header link that starts a UX Review region screenshot, preset with the project
+and the active entry. Static hosting has no local project, so the link never
+appears there. Three pieces wire it:
+
+```ts
+// vite.config.ts — Node only; never part of the browser bundle.
+import { uxReviewPlugin } from "@kerfjs/ui/vite-ux-review";
+
+export default defineConfig({ plugins: [uxReviewPlugin()] });
+```
+
+```tsx
+const uxReviewProject = signal<string | null>(null);
+
+mount(app, () => (
+  <Catalog
+    /* …the props above… */
+    uxReview={
+      uxReviewProject.value
+        ? { projectDirectory: uxReviewProject.value }
+        : undefined
+    }
+  />
+));
+
+wireCatalog(app, {
+  onSelect: (id) => (active.value = id),
+  onUxReviewProject: (directory) => (uxReviewProject.value = directory),
+});
+```
+
+- **`uxReviewPlugin(options?)`** answers `GET …/__ux-review/project.json` with
+  `{ projectDirectory }` on the dev and preview servers, at any base path. The
+  directory defaults to the repository holding Vite's `root` (the nearest
+  ancestor with `.git`, or `root` itself); pass `projectDirectory` (resolved
+  against `root`) to name another.
+- **`wireCatalog`'s `onUxReviewProject`** asks the page's server once and
+  reports the directory. It is never called on static hosting or a server
+  without the plugin. While wired, following the link stamps the current page
+  URL into the capture context.
+- **`Catalog`'s `uxReview`** (`{ projectDirectory, name? }`) renders the link
+  after `headerActions`. The capture is titled `<name>: <entry>`, and its
+  context names the catalog, the entry's section, and the entry; `name`
+  defaults to `brand.title`.
+
+The browser helpers behind it, `uxReviewCaptureUrl` and `loadUxReviewProject`,
+are exported from `@kerfjs/ui/catalog` for a capture link placed elsewhere.
+
 ## Custom action names
 
 The shell emits `data-action="catalog-select"` (sidebar items),

package/docs/component-contract.md

@@ -275,6 +275,9 @@ example. Keep app and Kerf entries as package-qualified inputs, then let people
 or AI tools search their combined entries and compare `geometry` before adding
 wrappers or insets. Do not add app-owned entries to Kerf's canonical catalog or
 claim Kerf delivery paths for them.
+Packages that keep a `kerf.components.json` can generate this file instead of
+hand-maintaining it: set `kerfComponentCatalog.selectionOutput` and run
+`kerf-component-catalog` (see `create-kerf-component`'s README).
 Extension entries may add `uses` for direct composition dependencies and
 repository-relative `source` and `demoSource` files. Resolve each dependency
 against the combined Kerf and consumer catalogs; do not duplicate a Kerf id.
@@ -758,6 +761,12 @@ whole-tab starts after scroll and selection changes, reserving end room so the
 last peer can align there. The application still owns selection and tab order.
 ResizeObserver notifications coalesce snap measurements into the next animation
 frame, so inset writes cannot resize the observed strip during observer delivery.
+`wireTabBars` watches the whole root it is given, but a mutation re-measures only
+the bars it touched: a change inside a bar, a newly inserted bar, or a `dir`
+change on an element above one. Content elsewhere in the root (terminal output,
+list updates, streamed text) triggers no style or layout reads. A pinned strip
+re-measures when its own size changes, so a layout change outside the bar still
+reaches it.
 
 CSS, the generated wrappers that make it
 reachable, and the registration module are the package's only declared side

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerfjs/ui",
-  "version": "5.0.0-beta.92",
+  "version": "5.0.0-beta.94",
   "description": "Accessible, composable UI primitives for kerf applications.",
   "type": "module",
   "license": "MIT",
@@ -56,6 +56,10 @@
       "types": "./catalog-projection.d.mts",
       "import": "./catalog-projection.mjs"
     },
+    "./vite-ux-review": {
+      "types": "./vite-ux-review.d.mts",
+      "import": "./vite-ux-review.mjs"
+    },
     "./lucide-icon": {
       "types": "./dist/lucide-icon.d.ts",
       "browser": "./dist/browser/lucide-icon.js",
@@ -412,6 +416,8 @@
     "catalog-projection.mjs",
     "catalog-projection.d.mts",
     "catalog-projection-cli.mjs",
+    "vite-ux-review.mjs",
+    "vite-ux-review.d.mts",
     "scripts/component-catalog-extension-validation.mjs",
     "analyzer",
     "doctor",

package/vite-ux-review.d.mts

@@ -0,0 +1,44 @@
+/** Where the endpoint lives, relative to the catalog page. */
+export declare const UX_REVIEW_PROJECT_PATH: '__ux-review/project.json';
+
+export interface UxReviewPluginOptions {
+  /**
+   * The project directory UX Review files captures under, resolved against
+   * Vite's `root`. Default: the nearest ancestor of `root` holding `.git`,
+   * or `root` itself.
+   */
+  projectDirectory?: string;
+}
+
+/** The connect-style middleware stack of a Vite dev or preview server. */
+export interface UxReviewMiddlewareServer {
+  middlewares: {
+    use(
+      handler: (
+        request: { url?: string; method?: string },
+        response: {
+          statusCode: number;
+          setHeader(name: string, value: string): void;
+          end(body?: string): void;
+        },
+        next: () => void,
+      ) => void,
+    ): unknown;
+  };
+}
+
+/** A Vite plugin; structurally typed so this module needs no `vite` import. */
+export interface UxReviewPlugin {
+  name: 'kerf-ux-review';
+  configResolved(config: { root: string }): void;
+  configureServer(server: UxReviewMiddlewareServer): void;
+  configurePreviewServer(server: UxReviewMiddlewareServer): void;
+}
+
+/** The nearest directory at or above `start` that holds `.git`, else `start`. */
+export declare function findProjectDirectory(start: string): string;
+
+/** Serve the UX Review project directory to catalog pages on dev and preview servers. */
+export declare function uxReviewPlugin(
+  options?: UxReviewPluginOptions,
+): UxReviewPlugin;