@kerfjs/ui 4.4.1 → 4.5.0-beta.1

package/dist/styles/workbench.css

@@ -0,0 +1,94 @@
+.kui-workbench {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--kui-color-surface);
+}
+
+/* Side rails. Collapsing snaps the flex track to zero (one reflow) while the
+   fixed-width content slides out via transform (composited, clipped) — never a
+   per-frame width animation. See docs/18 / the KF-7QKJRK catalog sidebar. */
+.kui-workbench__rail {
+  flex: 0 0 var(--kui-workbench-rail-width, 17.5rem);
+  min-width: 0;
+  overflow: hidden;
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__rail--left {
+  border-inline-end: 1px solid var(--kui-color-border);
+}
+
+.kui-workbench__rail--right {
+  border-inline-start: 1px solid var(--kui-color-border);
+}
+
+.kui-workbench__rail[data-collapsed="true"] {
+  flex-basis: 0;
+  border-inline: 0;
+}
+
+.kui-workbench__center {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.kui-workbench__main {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Bottom drawer — the vertical analogue of a rail. */
+.kui-workbench__drawer {
+  flex: 0 0 var(--kui-workbench-drawer-height, 13.75rem);
+  min-height: 0;
+  overflow: hidden;
+  border-block-start: 1px solid var(--kui-color-border);
+  background: var(--kui-color-surface);
+}
+
+.kui-workbench__drawer[data-collapsed="true"] {
+  flex-basis: 0;
+  border-block-start: 0;
+}
+
+/* The fixed-size sliding content. The rail/drawer keeps a definite size on its
+   content so the transform reads as a slide, not a squeeze. */
+.kui-workbench__rail .kui-workbench__panel-content {
+  width: var(--kui-workbench-rail-width, 17.5rem);
+  height: 100%;
+  transition: transform 200ms ease;
+}
+
+.kui-workbench__drawer .kui-workbench__panel-content {
+  width: 100%;
+  height: var(--kui-workbench-drawer-height, 13.75rem);
+  transition: transform 200ms ease;
+}
+
+.kui-workbench__rail--left[data-collapsed="true"]
+  .kui-workbench__panel-content {
+  transform: translateX(-100%);
+}
+
+.kui-workbench__rail--right[data-collapsed="true"]
+  .kui-workbench__panel-content {
+  transform: translateX(100%);
+}
+
+.kui-workbench__drawer[data-collapsed="true"] .kui-workbench__panel-content {
+  transform: translateY(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-workbench__panel-content {
+    transition: none;
+  }
+}

package/dist/sunken-panel.d.ts

@@ -0,0 +1,19 @@
+import { SafeHtml } from 'kerfjs';
+
+type SunkenPanelShape = 'rounded' | 'square';
+interface SunkenPanelProps {
+    children?: SafeHtml | readonly SafeHtml[];
+    /** Optional accessible landmark name for a distinct application region. */
+    ariaLabel?: string;
+    /** Corner shape: a rounded rectangle (default) or square corners. */
+    shape?: SunkenPanelShape;
+    className?: string;
+}
+/**
+ * A lowered application surface with one compact inset and a vertical content
+ * stack. The panel owns its background and padding; children own their own
+ * borders and internal geometry.
+ */
+declare function SunkenPanel({ children, ariaLabel, shape, className, }: SunkenPanelProps): SafeHtml;
+
+export { SunkenPanel, type SunkenPanelProps, type SunkenPanelShape };

package/dist/sunken-panel.js

@@ -0,0 +1,3 @@
+export { SunkenPanel } from './chunk-TB6DY7H5.js';
+
+//# sourceMappingURL=sunken-panel.js.map

package/dist/sunken-panel.js.map

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

package/dist/tab-bar.d.ts

@@ -1,5 +1,6 @@
 import { SafeHtml } from 'kerfjs';
 
+type TabActivation = 'automatic' | 'manual';
 interface TabBarProps {
     id: string;
     label: string;
@@ -7,8 +8,15 @@ interface TabBarProps {
     leading?: SafeHtml;
     trailing?: SafeHtml;
     className?: string;
+    /**
+     * Keyboard activation mode for this strip, emitted as `data-tab-activation` for
+     * `wireTabBars` to read (overrides its `activation` option). `'automatic'` (default)
+     * selects on arrow / Home / End; `'manual'` moves roving focus only and the user
+     * selects with Enter / Space / click — use it when selecting a tab is a heavy action.
+     */
+    activation?: TabActivation;
 }
 /** Render a controlled tab strip. The application owns selection, order, and persistence. */
-declare function TabBar({ id, label, children, leading, trailing, className }: TabBarProps): SafeHtml;
+declare function TabBar({ id, label, children, leading, trailing, className, activation, }: TabBarProps): SafeHtml;
 
-export { TabBar, type TabBarProps };
+export { type TabActivation, TabBar, type TabBarProps };

package/dist/tab-bar.js

@@ -1,3 +1,3 @@
-export { TabBar } from './chunk-MBR3TYNL.js';
+export { TabBar } from './chunk-M7JBER5U.js';
 
 //# sourceMappingURL=tab-bar.js.map

package/dist/tab-scaffold.d.ts

@@ -0,0 +1,30 @@
+import { SafeHtml } from 'kerfjs';
+
+interface TabScaffoldTab<Id extends string = string> {
+    id: Id;
+    label: string;
+    /** Decorative icon shown above the label in the bottom bar. */
+    icon?: SafeHtml;
+    /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */
+    content: SafeHtml;
+}
+interface TabScaffoldProps<Id extends string = string> {
+    id: string;
+    /** Accessible name for the tab bar. */
+    label: string;
+    tabs: readonly TabScaffoldTab<Id>[];
+    /** The controlled active tab id (the app owns selection). */
+    active: NoInfer<Id>;
+    className?: string;
+}
+/**
+ * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches
+ * between major sections, each tab keeping its own content (usually a `NavStack`)
+ * mounted so its stack and scroll survive a switch. Controlled — the app owns
+ * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.
+ * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of
+ * a bottom bar. See `docs/23-app-layouts.md` §3.4.
+ */
+declare function TabScaffold<Id extends string>({ id, label, tabs, active, className, }: TabScaffoldProps<Id>): SafeHtml;
+
+export { TabScaffold, type TabScaffoldProps, type TabScaffoldTab };

package/dist/tab-scaffold.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/tab-scaffold.tsx
+function TabScaffold({
+  id,
+  label,
+  tabs,
+  active,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-tab-scaffold ${className}`.trim(),
+      id,
+      "data-component": "tab-scaffold",
+      "data-tab-scaffold-id": id,
+      children: [
+        /* @__PURE__ */ jsx("div", { class: "kui-tab-scaffold__scenes", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-tab-scaffold__scene",
+            "data-tab-scaffold-scene": tab.id,
+            "data-active": String(tab.id === active),
+            "aria-hidden": String(tab.id !== active),
+            children: tab.content
+          }
+        )) }),
+        /* @__PURE__ */ jsx("nav", { class: "kui-tab-scaffold__bar", role: "tablist", "aria-label": label, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-tab-scaffold__tab",
+            role: "tab",
+            "data-tab-scaffold-tab": tab.id,
+            "aria-selected": String(tab.id === active),
+            tabindex: tab.id === active ? "0" : "-1",
+            children: [
+              tab.icon && /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-icon", "aria-hidden": "true", children: tab.icon }),
+              /* @__PURE__ */ jsx("span", { class: "kui-tab-scaffold__tab-label", children: tab.label })
+            ]
+          }
+        )) })
+      ]
+    }
+  );
+}
+
+export { TabScaffold };
+
+//# sourceMappingURL=tab-scaffold.js.map

package/dist/tab-scaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tab-scaffold.tsx"],"names":[],"mappings":";;;AA6BO,SAAS,WAAA,CAA+B;AAAA,EAC7C,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,EAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,sBAAA,EAAsB,EAAA;AAAA,MAEtB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,0BAAA,EACR,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yBAAA;AAAA,YACN,2BAAyB,GAAA,CAAI,EAAA;AAAA,YAC7B,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACrC,aAAA,EAAa,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YAEpC,QAAA,EAAA,GAAA,CAAI;AAAA;AAAA,SAER,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAwB,IAAA,EAAK,SAAA,EAAU,YAAA,EAAY,KAAA,EAC3D,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACT,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,uBAAA;AAAA,YACN,IAAA,EAAK,KAAA;AAAA,YACL,yBAAuB,GAAA,CAAI,EAAA;AAAA,YAC3B,eAAA,EAAe,MAAA,CAAO,GAAA,CAAI,EAAA,KAAO,MAAM,CAAA;AAAA,YACvC,QAAA,EAAU,GAAA,CAAI,EAAA,KAAO,MAAA,GAAS,GAAA,GAAM,IAAA;AAAA,YAEnC,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,IAAA,wBACF,MAAA,EAAA,EAAK,KAAA,EAAM,8BAA6B,aAAA,EAAY,MAAA,EAClD,cAAI,IAAA,EACP,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAAA,EAA+B,cAAI,KAAA,EAAM;AAAA;AAAA;AAAA,SAExD,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"tab-scaffold.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface TabScaffoldTab<Id extends string = string> {\n  id: Id;\n  label: string;\n  /** Decorative icon shown above the label in the bottom bar. */\n  icon?: SafeHtml;\n  /** The tab's content — typically a `NavStack` so each tab keeps its own stack. */\n  content: SafeHtml;\n}\n\nexport interface TabScaffoldProps<Id extends string = string> {\n  id: string;\n  /** Accessible name for the tab bar. */\n  label: string;\n  tabs: readonly TabScaffoldTab<Id>[];\n  /** The controlled active tab id (the app owns selection). */\n  active: NoInfer<Id>;\n  className?: string;\n}\n\n/**\n * A mobile-first, iOS-like bottom tab scaffold: a bottom tab bar that switches\n * between major sections, each tab keeping its own content (usually a `NavStack`)\n * mounted so its stack and scroll survive a switch. Controlled — the app owns\n * `active`; wire selection with `@kerfjs/ui/wire-tab-scaffold`'s `wireTabScaffold`.\n * On larger classes, promote the tabs to a `Workbench` rail or sidebar instead of\n * a bottom bar. See `docs/23-app-layouts.md` §3.4.\n */\nexport function TabScaffold<Id extends string>({\n  id,\n  label,\n  tabs,\n  active,\n  className = '',\n}: TabScaffoldProps<Id>) {\n  return (\n    <section\n      class={`kui-tab-scaffold ${className}`.trim()}\n      id={id}\n      data-component=\"tab-scaffold\"\n      data-tab-scaffold-id={id}\n    >\n      <div class=\"kui-tab-scaffold__scenes\">\n        {tabs.map((tab) => (\n          <div\n            class=\"kui-tab-scaffold__scene\"\n            data-tab-scaffold-scene={tab.id}\n            data-active={String(tab.id === active)}\n            aria-hidden={String(tab.id !== active)}\n          >\n            {tab.content}\n          </div>\n        ))}\n      </div>\n      <nav class=\"kui-tab-scaffold__bar\" role=\"tablist\" aria-label={label}>\n        {tabs.map((tab) => (\n          <button\n            type=\"button\"\n            class=\"kui-tab-scaffold__tab\"\n            role=\"tab\"\n            data-tab-scaffold-tab={tab.id}\n            aria-selected={String(tab.id === active)}\n            tabindex={tab.id === active ? '0' : '-1'}\n          >\n            {tab.icon && (\n              <span class=\"kui-tab-scaffold__tab-icon\" aria-hidden=\"true\">\n                {tab.icon}\n              </span>\n            )}\n            <span class=\"kui-tab-scaffold__tab-label\">{tab.label}</span>\n          </button>\n        ))}\n      </nav>\n    </section>\n  );\n}\n"]}

package/dist/token-search-field.d.ts

@@ -0,0 +1,59 @@
+import { SafeHtml } from 'kerfjs';
+
+interface TokenSearchToken {
+    value: string;
+    label: string;
+    offset?: number;
+    accessibleLabel?: string;
+}
+type TokenSearchEditorAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-key'?: never;
+    'data-morph-skip'?: never;
+    'data-token-search-editor'?: never;
+    'data-token-count'?: never;
+    'data-placeholder'?: never;
+}>;
+interface TokenSearchFieldBaseProps {
+    id: string;
+    label: string;
+    query?: string;
+    tokens?: readonly TokenSearchToken[];
+    placeholder?: string;
+    tokenPlaceholder?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    leading?: SafeHtml;
+    trailing?: SafeHtml;
+    editAction?: string;
+    removeAction?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    className?: string;
+    editorAttributes?: TokenSearchEditorAttributes;
+}
+type TokenSearchCollapsibleProps = {
+    /** Allow an empty field to render as one iconic action. */
+    collapsible: true;
+    /** Keep an empty collapsible field open while the application owns focus. */
+    expanded?: boolean;
+    expandAction?: string;
+    expandLabel?: string;
+} | {
+    collapsible?: false;
+    expanded?: never;
+    expandAction?: never;
+    expandLabel?: never;
+};
+type TokenSearchFieldProps = TokenSearchFieldBaseProps & TokenSearchCollapsibleProps;
+interface TokenSearchFieldValue {
+    query: string;
+    tokens: TokenSearchToken[];
+}
+declare function TokenSearchField({ id, label, query, tokens, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, }: TokenSearchFieldProps): SafeHtml;
+/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
+declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
+/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */
+declare function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void;
+
+export { type TokenSearchEditorAttributes, TokenSearchField, type TokenSearchFieldProps, type TokenSearchFieldValue, type TokenSearchToken, placeTokenSearchCaret, readTokenSearchField };

package/dist/token-search-field.js

@@ -0,0 +1,4 @@
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7KEUJIIC.js';
+
+
+//# sourceMappingURL=token-search-field.js.map

package/dist/token-search-field.js.map

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

package/dist/toolbar-control-group.d.ts

@@ -1,15 +1,21 @@
 import { SafeHtml } from 'kerfjs';
 
+type ToolbarControlGroupAppearance = 'contained' | 'borderless';
+type ToolbarControlGroupTone = 'default' | 'dark';
+type ToolbarControlGroupButtonAppearance = 'plain' | 'push';
+type ToolbarControlGroupShape = 'pill' | 'rounded';
 interface ToolbarControlGroupProps {
     children: SafeHtml | SafeHtml[];
     label?: string;
     className?: string;
     expanded?: boolean;
     single?: boolean;
-    appearance?: 'contained' | 'borderless';
-    tone?: 'default' | 'dark';
-    buttonAppearance?: 'plain' | 'push';
+    appearance?: ToolbarControlGroupAppearance;
+    tone?: ToolbarControlGroupTone;
+    buttonAppearance?: ToolbarControlGroupButtonAppearance;
+    /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */
+    shape?: ToolbarControlGroupShape;
 }
-declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance }: ToolbarControlGroupProps): SafeHtml;
+declare function ToolbarControlGroup({ children, label, className, expanded, single, appearance, tone, buttonAppearance, shape, }: ToolbarControlGroupProps): SafeHtml;
 
-export { ToolbarControlGroup, type ToolbarControlGroupProps };
+export { ToolbarControlGroup, type ToolbarControlGroupAppearance, type ToolbarControlGroupButtonAppearance, type ToolbarControlGroupProps, type ToolbarControlGroupShape, type ToolbarControlGroupTone };

package/dist/toolbar-control-group.js

@@ -1,3 +1,3 @@
-export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
+export { ToolbarControlGroup } from './chunk-5VTB2BKP.js';
 
 //# sourceMappingURL=toolbar-control-group.js.map

package/dist/toolbar-text.d.ts

@@ -1,11 +1,38 @@
 import * as kerfjs from 'kerfjs';
 
-type ToolbarTextSize = 'large' | 'default' | 'small';
-interface ToolbarTextProps {
+type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';
+/** ARIA heading level for a title exposed as a heading landmark. */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface ToolbarTextBaseProps {
     text: string;
     size?: ToolbarTextSize;
     className?: string;
+    /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */
+    id?: string;
+    /**
+     * Expose heading semantics (`role="heading"` + `aria-level`) so the text acts as
+     * a heading landmark — e.g. a page's primary title. Omit to keep the plain span
+     * (the default), which suits a dialog title referenced via `aria-labelledby`.
+     */
+    headingLevel?: HeadingLevel;
+    /** Render the text as an unanimated loading skeleton instead of its value. */
+    placeholder?: boolean;
+    /**
+     * Show a trailing ellipsis (…) where the text is truncated — on the single line
+     * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip
+     * instead. Default true.
+     */
+    ellipsis?: boolean;
 }
-declare function ToolbarText({ text, size, className }: ToolbarTextProps): kerfjs.SafeHtml;
+type ToolbarTextWrappingProps = {
+    /** Wrap onto multiple lines; combine with `maxLines` to cap them. */
+    wrap: true;
+    maxLines?: number | null;
+} | {
+    wrap?: false;
+    maxLines?: never;
+};
+type ToolbarTextProps = ToolbarTextBaseProps & ToolbarTextWrappingProps;
+declare function ToolbarText({ text, size, className, id, headingLevel, placeholder, wrap, ellipsis, maxLines, }: ToolbarTextProps): kerfjs.SafeHtml;
 
-export { ToolbarText, type ToolbarTextProps, type ToolbarTextSize };
+export { type HeadingLevel, ToolbarText, type ToolbarTextProps, type ToolbarTextSize };

package/dist/toolbar-text.js

@@ -1,3 +1,4 @@
-export { ToolbarText } from './chunk-GY5WH7TO.js';
+export { ToolbarText } from './chunk-R7ZWUN64.js';
+
 
 //# sourceMappingURL=toolbar-text.js.map

package/dist/toolbar.d.ts

@@ -1,13 +1,15 @@
 import { SafeHtml } from 'kerfjs';
+import { D as DividerSides } from './divider-sides-267FA7sY.js';
 
 interface ToolbarProps {
     leading?: SafeHtml;
     center?: SafeHtml;
     trailing?: SafeHtml;
     label?: string;
-    divider?: boolean;
+    /** Physical divider edges in canonical top/right/bottom/left order. Defaults to bottom. */
+    dividerSides?: DividerSides;
     className?: string;
 }
-declare function Toolbar({ leading, center, trailing, label, divider, className }: ToolbarProps): SafeHtml;
+declare function Toolbar({ leading, center, trailing, label, dividerSides, className, }: ToolbarProps): SafeHtml;
 
-export { Toolbar, type ToolbarProps };
+export { DividerSides, Toolbar, type ToolbarProps };

package/dist/toolbar.js

@@ -1,3 +1,3 @@
-export { Toolbar } from './chunk-DAFFDO33.js';
+export { Toolbar } from './chunk-SYDMYBPG.js';
 
 //# sourceMappingURL=toolbar.js.map

package/dist/value-table.d.ts

@@ -1,10 +1,20 @@
 import { SafeHtml } from 'kerfjs';
 
+interface ValueTableRowProps {
+    label: string | SafeHtml;
+    value: string | SafeHtml;
+    icon?: SafeHtml;
+    className?: string;
+    /** Render the value as an unanimated loading skeleton, keeping the field label. */
+    placeholder?: boolean;
+}
+declare function ValueTableRow({ label, value, icon, className, placeholder, }: ValueTableRowProps): SafeHtml;
+
 interface ValueTableProps {
     label: string;
     className?: string;
-    children: SafeHtml | SafeHtml[];
+    children: SafeHtml | readonly SafeHtml[];
 }
-declare function ValueTable({ label, className, children }: ValueTableProps): SafeHtml;
+declare function ValueTable({ label, className, children, }: ValueTableProps): SafeHtml;
 
-export { ValueTable, type ValueTableProps };
+export { ValueTable, type ValueTableProps, ValueTableRow, type ValueTableRowProps };

package/dist/value-table.js

@@ -1,3 +1,4 @@
-export { ValueTable } from './chunk-VKH2JLDZ.js';
+export { ValueTable, ValueTableRow } from './chunk-KWWR5VMS.js';
+
 
 //# sourceMappingURL=value-table.js.map

package/dist/webawesome.d.ts

@@ -0,0 +1,100 @@
+import { KerfCustomElement } from 'kerfjs/jsx-runtime';
+
+/**
+ * Opt-in Kerf JSX declarations for the Web Awesome elements supported by the
+ * @kerfjs/ui catalog. Import this module for type effects only; component
+ * registration remains an explicit application concern.
+ */
+declare module 'kerfjs/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'wa-accordion': KerfCustomElement;
+            'wa-accordion-item': KerfCustomElement;
+            'wa-animated-image': KerfCustomElement;
+            'wa-animation': KerfCustomElement;
+            'wa-avatar': KerfCustomElement;
+            'wa-badge': KerfCustomElement;
+            'wa-breadcrumb': KerfCustomElement;
+            'wa-breadcrumb-item': KerfCustomElement;
+            'wa-select': KerfCustomElement & {
+                class?: string;
+                name?: string;
+                label?: string;
+                'aria-label'?: string;
+                value?: string;
+                placeholder?: string;
+                disabled?: boolean;
+            };
+            'wa-option': KerfCustomElement & {
+                value?: string;
+            };
+            'wa-button-group': KerfCustomElement;
+            'wa-callout': KerfCustomElement;
+            'wa-card': KerfCustomElement;
+            'wa-carousel': KerfCustomElement;
+            'wa-carousel-item': KerfCustomElement;
+            'wa-checkbox': KerfCustomElement;
+            'wa-checkbox-group': KerfCustomElement;
+            'wa-color-picker': KerfCustomElement;
+            'wa-comparison': KerfCustomElement;
+            'wa-copy-button': KerfCustomElement;
+            'wa-details': KerfCustomElement;
+            'wa-divider': KerfCustomElement;
+            'wa-dialog': KerfCustomElement;
+            'wa-drawer': KerfCustomElement;
+            'wa-button': KerfCustomElement & {
+                slot?: string;
+                appearance?: string;
+                'with-caret'?: boolean;
+                'aria-label'?: string;
+            };
+            'wa-dropdown': KerfCustomElement & {
+                placement?: string;
+            };
+            'wa-dropdown-item': KerfCustomElement;
+            'wa-format-bytes': KerfCustomElement;
+            'wa-format-date': KerfCustomElement;
+            'wa-format-number': KerfCustomElement;
+            'wa-icon': KerfCustomElement;
+            'wa-include': KerfCustomElement;
+            'wa-input': KerfCustomElement;
+            'wa-intersection-observer': KerfCustomElement;
+            'wa-known-date': KerfCustomElement;
+            'wa-markdown': KerfCustomElement;
+            'wa-mutation-observer': KerfCustomElement;
+            'wa-number-input': KerfCustomElement;
+            'wa-otp-input': KerfCustomElement;
+            'wa-page': KerfCustomElement;
+            'wa-pagination': KerfCustomElement;
+            'wa-popover': KerfCustomElement;
+            'wa-popup': KerfCustomElement;
+            'wa-progress-bar': KerfCustomElement;
+            'wa-progress-ring': KerfCustomElement;
+            'wa-qr-code': KerfCustomElement;
+            'wa-radio': KerfCustomElement;
+            'wa-radio-group': KerfCustomElement;
+            'wa-random-content': KerfCustomElement;
+            'wa-rating': KerfCustomElement;
+            'wa-relative-time': KerfCustomElement;
+            'wa-resize-observer': KerfCustomElement;
+            'wa-scroller': KerfCustomElement;
+            'wa-skeleton': KerfCustomElement;
+            'wa-slider': KerfCustomElement;
+            'wa-spinner': KerfCustomElement;
+            'wa-split-panel': KerfCustomElement;
+            'wa-switch': KerfCustomElement;
+            'wa-tab': KerfCustomElement;
+            'wa-tab-group': KerfCustomElement;
+            'wa-tab-panel': KerfCustomElement;
+            'wa-tag': KerfCustomElement;
+            'wa-textarea': KerfCustomElement;
+            'wa-time-input': KerfCustomElement;
+            'wa-toast': KerfCustomElement;
+            'wa-toast-item': KerfCustomElement;
+            'wa-tooltip': KerfCustomElement;
+            'wa-tree': KerfCustomElement;
+            'wa-tree-item': KerfCustomElement;
+            'wa-zoomable-frame': KerfCustomElement;
+        }
+    }
+}

package/dist/webawesome.js

@@ -0,0 +1,3 @@
+
+
+//# sourceMappingURL=webawesome.js.map

package/dist/webawesome.js.map

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

package/dist/wire-catalog.d.ts

@@ -0,0 +1,57 @@
+interface WireCatalogOptions {
+    /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */
+    onSelect: (id: string) => void;
+    /** Invoked when the sidebar collapse/expand control is activated. */
+    onToggleSidebar?: () => void;
+    /** Invoked when the theme toggle is activated. */
+    onToggleTheme?: () => 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`. */
+    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;
+    toggleSecondaryAction?: string;
+}
+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;
+/**
+ * Keep a Catalog's opt-in geometry overlay synchronized with its preview.
+ * Specimens receive computed border highlights (or a dashed bound when they
+ * have no border and are transparent), while positive computed margins use
+ * devtools-style orange bands. CSS/stylesheet-only changes are observed too.
+ * Returns a disposer.
+ */
+declare function wireCatalogGeometryOverlay(root: HTMLElement): () => 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
+ * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.
+ * Returns a disposer.
+ */
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, }: WireCatalogOptions): () => void;
+
+export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog, wireCatalogGeometryOverlay };