@kerfjs/ui 5.0.0-beta.54 → 5.0.0-beta.55

package/dist/popup-menu-register.js

@@ -0,0 +1,30 @@
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import '@awesome.me/webawesome/dist/components/divider/divider.js';
+import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
+import WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
+
+// src/popup-menu-register.ts
+
+// src/install-popup-menu-keyboard.ts
+var installed = /* @__PURE__ */ new WeakSet();
+function installPopupMenuKeyboard(prototype) {
+  if (installed.has(prototype)) return;
+  installed.add(prototype);
+  const target = prototype;
+  const makeSelection = target.makeSelection;
+  target.makeSelection = function(item, event) {
+    if (event instanceof KeyboardEvent && this.classList.contains("kui-popup-menu") && !item.disabled) {
+      item.click();
+      return;
+    }
+    makeSelection.call(this, item, event);
+  };
+}
+
+// src/popup-menu-register.ts
+installPopupMenuKeyboard(WaDropdown.prototype);
+var popupMenuElementsRegistered = true;
+
+export { popupMenuElementsRegistered };
+
+//# sourceMappingURL=popup-menu-register.js.map

package/dist/popup-menu-register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/install-popup-menu-keyboard.ts","../src/popup-menu-register.ts"],"names":[],"mappings":";;;;;;;;AAOA,IAAM,SAAA,uBAAgB,OAAA,EAAgB;AAW/B,SAAS,yBAAyB,SAAA,EAAyB;AAChE,EAAA,IAAI,SAAA,CAAU,GAAA,CAAI,SAAS,CAAA,EAAG;AAC9B,EAAA,SAAA,CAAU,IAAI,SAAS,CAAA;AACvB,EAAA,MAAM,MAAA,GAAS,SAAA;AACf,EAAA,MAAM,gBAAgB,MAAA,CAAO,aAAA;AAC7B,EAAA,MAAA,CAAO,aAAA,GAAgB,SAAmC,IAAA,EAAM,KAAA,EAAa;AAC3E,IAAA,IACE,KAAA,YAAiB,iBACjB,IAAA,CAAK,SAAA,CAAU,SAAS,gBAAgB,CAAA,IACxC,CAAC,IAAA,CAAK,QAAA,EACN;AACA,MAAA,IAAA,CAAK,KAAA,EAAM;AACX,MAAA;AAAA,IACF;AACA,IAAA,aAAA,CAAc,IAAA,CAAK,IAAA,EAAM,IAAA,EAAM,KAAK,CAAA;AAAA,EACtC,CAAA;AACF;;;AC1BA,wBAAA,CAAyB,WAAW,SAAS,CAAA;AAQtC,IAAM,2BAAA,GAA8B","file":"popup-menu-register.js","sourcesContent":["interface PopupMenuDropdown extends HTMLElement {\n  makeSelection(\n    item: HTMLElement & { disabled?: boolean },\n    event?: Event,\n  ): void;\n}\n\nconst installed = new WeakSet<object>();\n\n/**\n * Route a keyboard choice in a `PopupMenu` through the item's click. Web Awesome\n * selects a pointer choice from the item's click event but a keyboard choice\n * (Enter or Space) directly, so delegated `data-action` click handlers would\n * never run for keyboard users. Clicking the item makes Web Awesome select it\n * exactly as it does for a pointer — one `wa-select`, then close and focus\n * return — while the click reaches the application's delegation. Raw\n * `wa-dropdown`s outside `PopupMenu` are unaffected.\n */\nexport function installPopupMenuKeyboard(prototype: object): void {\n  if (installed.has(prototype)) return;\n  installed.add(prototype);\n  const target = prototype as PopupMenuDropdown;\n  const makeSelection = target.makeSelection;\n  target.makeSelection = function (this: PopupMenuDropdown, item, event): void {\n    if (\n      event instanceof KeyboardEvent &&\n      this.classList.contains('kui-popup-menu') &&\n      !item.disabled\n    ) {\n      item.click();\n      return;\n    }\n    makeSelection.call(this, item, event);\n  };\n}\n","import '@awesome.me/webawesome/dist/components/button/button.js';\nimport '@awesome.me/webawesome/dist/components/divider/divider.js';\nimport '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';\n\nimport WaDropdown from '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';\n\nimport { installPopupMenuKeyboard } from './install-popup-menu-keyboard.js';\n\ninstallPopupMenuKeyboard(WaDropdown.prototype);\n\n/**\n * Marker export for tests and tooling; importing this module registers the\n * Web Awesome elements a `PopupMenu` renders (`wa-dropdown`,\n * `wa-dropdown-item`, `wa-button`, and `wa-divider`) and routes a keyboard\n * choice through the item's click so delegated `data-action`s run.\n */\nexport const popupMenuElementsRegistered = true;\n"]}

package/dist/popup-menu.d.ts

@@ -0,0 +1,71 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type PopupMenuPlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';
+type PopupMenuDataAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-action'?: never;
+    'data-component'?: never;
+    'data-key'?: never;
+    'data-morph-skip-children'?: never;
+}>;
+/** One command in the menu. */
+interface PopupMenuItem {
+    kind?: 'item';
+    label: string;
+    /** Delegated `data-action` the app handles when the item is chosen. */
+    action?: string;
+    /** Native `wa-dropdown-item` value, reported by its `wa-select` event. */
+    value?: string;
+    /** Leading icon, typically a `LucideIcon`; it is placed in the item's icon slot. */
+    icon?: SafeHtml;
+    disabled?: boolean;
+    /** Application `data-*` metadata such as a record id. */
+    attributes?: PopupMenuDataAttributes;
+}
+/** A labeled group heading; items that follow it belong to the group. */
+interface PopupMenuHeading {
+    kind: 'heading';
+    label: string;
+}
+/** A separator between groups of items. */
+interface PopupMenuDivider {
+    kind: 'divider';
+}
+type PopupMenuEntry = PopupMenuItem | PopupMenuHeading | PopupMenuDivider;
+type PopupMenuTriggerName = {
+    /** Visible trigger text, which is also its accessible name. */
+    text: string;
+    label?: never;
+} | {
+    text?: never;
+    /**
+     * Accessible name of an icon-only trigger, rendered as visually hidden
+     * slotted text (a Web Awesome button takes its name from its content).
+     */
+    label: string;
+};
+type PopupMenuProps = PopupMenuTriggerName & {
+    /** Trigger icon, typically a `LucideIcon`, before any visible text. */
+    icon?: KerfUiContent;
+    items: readonly PopupMenuEntry[];
+    /** Where the menu opens relative to its trigger. Defaults to `bottom-start`. */
+    placement?: PopupMenuPlacement;
+    /** Show the disclosure caret after the trigger content. Defaults to true. */
+    caret?: boolean;
+    disabled?: boolean;
+    /** Application `data-*` metadata on the menu root. */
+    rootAttributes?: PopupMenuDataAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+};
+/**
+ * An action menu: a trigger button that opens a list of commands. Renders the
+ * `wa-dropdown` root directly, so a `single` `ToolbarControlGroup` (with
+ * `nestedDropdown`) or a `PopupSurface` sizes and insets it as usual. Items
+ * dispatch through delegated `data-action`s; the app owns the commands and any
+ * open-state reaction. Import `@kerfjs/ui/popup-menu/register` once to register
+ * the Web Awesome elements.
+ */
+declare function PopupMenu({ text, label, icon, items, placement, caret, disabled, rootAttributes, slot, }: PopupMenuProps): SafeHtml;
+
+export { PopupMenu, type PopupMenuDivider, type PopupMenuEntry, type PopupMenuHeading, type PopupMenuItem, type PopupMenuPlacement, type PopupMenuProps };

package/dist/popup-menu.js

@@ -0,0 +1,3 @@
+export { PopupMenu } from './chunk-4BIMLITI.js';
+
+//# sourceMappingURL=popup-menu.js.map

package/dist/popup-menu.js.map

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

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-BJJKFVWW.js';
+export { StateBanner } from './chunk-LZXQVUGN.js';
 
 
 

package/dist/styles/catalog/components/catalog-example.css

@@ -8,19 +8,6 @@
   gap: 0.5rem;
 }
 
-.kui-catalog-example__note {
-  margin: 0;
-  padding-block: var(--kui-layout-item-padding, 0.5rem);
-  padding-inline: calc(
-    var(--kui-layout-inline-margin, 0.5rem) +
-      var(--kui-layout-item-padding, 0.5rem)
-  );
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  color: var(--kui-color-text-quiet);
-  font-size: var(--kui-font-xs);
-}
-
 .kui-catalog-example__viewport {
   position: relative;
   max-width: 100%;
@@ -139,9 +126,6 @@
 
 .kui-catalog-example__compact-fallback {
   display: none;
-  margin: 0;
-  color: var(--kui-color-text-quiet);
-  font-size: var(--kui-font-s);
 }
 
 @media ((max-width: 52rem)) {

package/dist/styles/catalog/components/catalog-stage.css

@@ -1,13 +1,18 @@
+/* The preview stage fills the work area's scroller — and grows with a taller
+   specimen, never shrinking under it — behind a transparency checkerboard,
+   so a specimen's own surface (or lack of one) stays visible. */
 .kui-catalog__stage {
-  width: 100%;
-  min-height: 0;
   flex: 1 0 auto;
+  background-color: var(--kui-color-surface-lowered);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/svg%3E");
+  background-size: 1.5rem 1.5rem;
 }
 
+/* The centered specimen canvas, at the catalog's reading measure. */
 .kui-catalog__canvas {
   position: relative;
   display: grid;
-  width: min(100%, var(--kui-catalog-content-measure, 70rem));
+  width: min(100%, 70rem);
   min-width: 0;
   min-height: 100%;
   margin-inline: auto;
@@ -48,13 +53,3 @@
 .kui-catalog__geometry-margin {
   background: color-mix(in srgb, #f6a94c 55%, transparent);
 }
-
-@media (max-width: 52rem) {
-  .kui-catalog__stage {
-    min-height: 24rem;
-  }
-
-  .kui-catalog__canvas {
-    min-height: 16rem;
-  }
-}

package/dist/styles/catalog/components/catalog.css

@@ -1,22 +1,12 @@
+/* The catalog fills its container, which must have a definite height (the
+   `document.css` baseline's `.kui-app-root`, as for any Workbench). */
 .kui-catalog {
-  --kui-catalog-sidebar-width: 18rem;
-  --kui-catalog-content-measure: 70rem;
-
-  display: grid;
-  height: 100vh;
-  grid-template-columns: var(--kui-catalog-sidebar-width) minmax(0, 1fr);
-  overflow: hidden;
-}
-
-.kui-catalog[data-sidebar-collapsed="true"] {
-  grid-template-columns: 0 minmax(0, 1fr);
+  height: 100%;
 }
 
-@media (max-width: 52rem) {
-  .kui-catalog,
-  .kui-catalog[data-sidebar-collapsed="true"] {
-    height: auto;
-    min-height: 100vh;
-    grid-template-columns: 1fr;
-  }
+/* The brand mark, sized to sit inside a toolbar group. */
+.kui-catalog__mark {
+  display: block;
+  width: 2.125rem;
+  height: 2.125rem;
 }

package/dist/styles/catalog.css

@@ -1,10 +1,5 @@
 /* Public compatibility entrypoint. Each catalog component owns its styles. */
 @import "./catalog/components/catalog.css";
-@import "./catalog/components/catalog-sidebar.css";
-@import "./catalog/components/catalog-section-list.css";
-@import "./catalog/components/catalog-secondary-sections.css";
-@import "./catalog/components/catalog-detail.css";
 @import "./catalog/components/catalog-stage.css";
-@import "./catalog/components/catalog-resource-footer.css";
 @import "./catalog/components/catalog-example.css";
 @import "./catalog/components/catalog-example-stack.css";

package/dist/styles/popup-menu.css

@@ -0,0 +1,12 @@
+/* An icon-only trigger's accessible name: Web Awesome names its button from the
+   slotted content, so the label is present but visually hidden. */
+.kui-popup-menu__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}

package/dist/styles/state-banner.css

@@ -179,16 +179,25 @@
   > *::before {
   content: "\200b";
 }
+/* The clip lives on an inner span, not on the detail itself. WebKit still
+   applies the CSS 2.1 rule that an inline-block whose overflow is not
+   `visible` takes its baseline from its bottom margin edge, so a clipped
+   inline-block detail rose off the title's baseline there and pushed the
+   title and badge down. An inline flex container's baseline is its first
+   item's text baseline in every engine, whatever that item's overflow. */
 .kui-state-banner__detail {
-  display: inline-block;
+  display: inline-flex;
   max-width: 100%;
-  overflow: clip;
   color: var(--_kui-state-banner-detail);
   font-size: var(--kui-font-2xs);
-  text-overflow: ellipsis;
   vertical-align: baseline;
   white-space: nowrap;
 }
+.kui-state-banner__detail > span {
+  min-width: 0;
+  overflow: clip;
+  text-overflow: ellipsis;
+}
 .kui-state-banner__action {
   justify-self: end;
 }
@@ -216,6 +225,6 @@
      relationship: a content-sized badge one item gap after the title, on the
      title's baseline. */
   .kui-state-banner__detail {
-    display: block;
+    display: flex;
   }
 }

package/dist/styles/styles.css

@@ -22,6 +22,7 @@
 @import "./loading-spinner.css";
 @import "./skeleton.css";
 @import "./select.css";
+@import "./popup-menu.css";
 @import "./segmented-control.css";
 @import "./token-search-field.css";
 @import "./state-banner.css";

package/dist/styles/tab-bar.css

@@ -18,9 +18,11 @@
 .kui-tab-bar__tabs {
   display: flex;
   min-width: 0;
-  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   padding: 1px;
-  overflow-x: auto;
+  /* Scroll along the strip only: overflow-x alone computes overflow-y to auto,
+     so any vertical excess would let the strip scroll vertically on touch. */
+  overflow: auto hidden;
   box-sizing: border-box;
   border: 1px solid var(--kui-tab-bar-border);
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
@@ -36,12 +38,38 @@
   --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);
   --kui-tab-bar-border: var(--kui-color-neutral-border-quiet);
 }
+/* A segmented strip's outer ends follow the pill track. The first tab's
+   leading corners, and a filled strip's last tab's trailing corners, are
+   pill-rounded, and a compact tab is inset from the track's ends by the same
+   distance as from its top and bottom, so each end is concentric with the
+   track. Only fill allocation carries the last tab to the track's trailing
+   end; an intrinsic strip's last tab stops short of it and keeps the segment
+   radius, as do the corners between tabs. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs:has(> [data-component="app-tab"][data-size="compact"]) {
+  padding-inline: calc(
+    (var(--kui-toolbar-group-size, calc(2px + 2.625rem)) - 2rem) /
+      2 - 1px
+  );
+}
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs
+  > [data-component="app-tab"]:first-child {
+  border-start-start-radius: var(--kui-radius-pill);
+  border-end-start-radius: var(--kui-radius-pill);
+}
+.kui-tab-bar[data-presentation="segmented"][data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > [data-component="app-tab"]:last-child {
+  border-start-end-radius: var(--kui-radius-pill);
+  border-end-end-radius: var(--kui-radius-pill);
+}
 .kui-tab-bar[data-presentation="inspector"] {
   min-height: 2.125rem;
   padding: 0;
 }
 .kui-tab-bar[data-presentation="inspector"] .kui-tab-bar__tabs {
-  height: 2.125rem;
+  min-height: 2.125rem;
   border-radius: var(--kui-radius-s);
 }
 .kui-tab-bar[data-allocation="fill"] [data-component="app-tab"] {

package/dist/styles/toolbar-control-group.css

@@ -254,6 +254,19 @@
   white-space: nowrap;
 }
 
+/* An icon tile: a non-interactive icon placed directly in a group (a panel
+   heading's identity glyph) takes the same 40px slot and 16px visual as an
+   icon button, so it centers in the group and lines up with button icons,
+   without a hover surface or a focusable control that does nothing. */
+.kui-toolbar-control-group > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  padding: 0.75rem;
+  box-sizing: content-box;
+  flex: 0 0 auto;
+}
+
 .kui-toolbar-control-group > button svg,
 .kui-toolbar-control-group wa-button > svg,
 .kui-toolbar-control-group > .kui-toolbar-action-link svg {

package/dist/styles/toolbar.css

@@ -6,7 +6,7 @@
   color: var(--kui-color-text);
   background: transparent;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
+  align-items: start;
   gap: var(--kui-toolbar-gap, 0.5rem);
   container: kui-toolbar / inline-size;
   font-family: var(--kui-font-sans);
@@ -128,15 +128,56 @@
   );
 }
 
+/* The control band. Every zone reserves one group-height row at the top of
+   the toolbar, and each item is centered in that band by its own size, not by
+   its siblings: a group or title shorter than the band takes half the
+   difference as a top margin, and anything taller (a wrapped title, a
+   multi-line search, a second trailing row) starts at the band's top and grows
+   down. A growing item therefore never moves the other items or its own top.
+   Centering the zones in the toolbar row instead dropped every control to the
+   middle of a two-line title. The band is resolved here, on the toolbar, so a
+   compact group's own smaller group size never redefines it. */
+.kui-toolbar {
+  --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+}
+
 .kui-toolbar__leading,
 .kui-toolbar__center,
 .kui-toolbar__trailing {
   display: flex;
   min-width: 0;
-  align-items: center;
+  min-height: var(--_kui-toolbar-band);
+  align-items: flex-start;
   gap: var(--kui-toolbar-gap, 0.5rem);
 }
 
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > [data-component="toolbar-control-group"] {
+  margin-block-start: max(
+    0px,
+    calc(
+      (
+          var(--_kui-toolbar-band) -
+            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+        ) /
+        2
+    )
+  );
+}
+
+/* A title fills the band and centers its first line in it; further lines of a
+   wrapped title continue below the band. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > [data-component="toolbar-text"] {
+  height: auto;
+  min-height: var(--_kui-toolbar-band);
+}
+
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > [data-component="toolbar-text"][data-wrap="true"] {
+  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
+}
+
 /* Pin each zone to its column so a display:none (empty) leading or center zone
    doesn't let the trailing zone auto-place into the first column — which left an
    extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing

package/dist/styles/workbench.css

@@ -187,6 +187,20 @@
   --kui-edge-inset-inline-end: 0px;
 }
 
+/* A region whose only child is a Pane or layout lets it fill the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is(.kui-workbench__main, .kui-workbench__panel-content)
+  > :is(
+    [data-component="pane"],
+    [data-component="nav-stack"],
+    [data-component="split-view"],
+    [data-component="workbench"],
+    [data-component="tab-scaffold"]
+  ):only-child {
+  height: 100%;
+}
+
 /* Bottom drawer — the vertical analogue of a rail. */
 .kui-workbench__drawer {
   --kui-edge-inset-block-start: 0px;
@@ -779,3 +793,20 @@
     transition: none;
   }
 }
+
+/* On a compact (phone-sized) Workbench an overlay rail fills the Workbench
+   less a dismiss margin on the side away from its edge, so a press beside it
+   closes it (the wiring's outside press); `compactOverlay: "full"` fills the
+   Workbench. The rail's resize and configured size stop applying there. */
+@container kui-workbench (max-width: 28rem) {
+  .kui-workbench__rail[data-responsive-overlay-at] {
+    width: calc(
+      100% - var(--kui-workbench-overlay-dismiss-margin, 2.75rem)
+    );
+    max-width: none;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at][data-compact-overlay="full"] {
+    width: 100%;
+  }
+}

package/dist/text.js

@@ -1,3 +1,3 @@
-export { Text } from './chunk-7IUSV4XG.js';
+export { Text } from './chunk-24PHKUR3.js';
 
 //# sourceMappingURL=text.js.map

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

@@ -20,6 +20,15 @@ interface TokenSearchFieldBaseProps {
     label: string;
     query?: string;
     tokens?: readonly TokenSearchToken[];
+    /**
+     * Editor identity for a programmatic text replacement. The editor's text is
+     * DOM-owned between token changes, so a new `query` with the same tokens
+     * does not re-render it (that would reset the caret on every keystroke).
+     * Change `revision` when the app replaces the text itself — reseeding a
+     * persistent dialog's field on reopen, applying a saved search — and the
+     * editor is rebuilt from `query` and `tokens`.
+     */
+    revision?: string | number;
     placeholder?: string;
     tokenPlaceholder?: string;
     disabled?: boolean;
@@ -55,7 +64,7 @@ interface TokenSearchFieldValue {
     query: string;
     tokens: TokenSearchToken[];
 }
-declare function TokenSearchField({ id, label, query, tokens, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, presentation, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, slot, }: TokenSearchFieldProps): kerfjs.SafeHtml;
+declare function TokenSearchField({ id, label, query, tokens, revision, placeholder, tokenPlaceholder, disabled, autofocus, collapsible, expanded, expandAction, expandLabel, leading, trailing, presentation, editAction, removeAction, clearAction, clearLabel, className, editorAttributes, slot, }: TokenSearchFieldProps): kerfjs.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. */

package/dist/token-search-field.js

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

package/dist/{types-CEsieBZi.d.ts → types-D6vzj-VT.d.ts}

@@ -44,6 +44,11 @@ type CatalogStageRootAttributes = Readonly<Record<`data-${string}`, string | und
     'data-catalog-stage'?: never;
 }>;
 interface CatalogProps {
+    /**
+     * The catalog's `id` (default `kui-catalog`). Its Workbench derives the
+     * sidebar's id from it (`<id>-left-rail`), which `wireCatalog` wires.
+     */
+    id?: string;
     brand: CatalogBrand;
     sections: readonly CatalogSection[];
     active: string;
@@ -61,6 +66,16 @@ interface CatalogProps {
     toggleSidebarAction?: string;
     toggleThemeAction?: string;
     toggleSecondaryAction?: string;
+    /**
+     * Whether the entry toolbar stays pinned above the preview (`fixed`,
+     * default) or scrolls away with it (`scroll`).
+     */
+    headerPlacement?: 'fixed' | 'scroll';
+    /**
+     * Whether the status and resource footer stays pinned below the preview
+     * (`fixed`, default) or scrolls with it (`scroll`).
+     */
+    footerPlacement?: 'fixed' | 'scroll';
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;

package/dist/wire-catalog.d.ts

@@ -1,3 +1,5 @@
+import { Signal } from 'kerfjs';
+
 interface WireCatalogOptions {
     /** Invoked with the entry id when a sidebar item or a related-entry option is chosen. */
     onSelect: (id: string) => void;
@@ -18,6 +20,16 @@ interface WireCatalogOptions {
     toggleSidebarAction?: string;
     toggleThemeAction?: string;
     toggleSecondaryAction?: 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 Catalog's `id`, when it is not the default `kui-catalog`. */
+    id?: string;
 }
 interface CatalogRevealOptions {
     /** Scroll alignment within the sidebar. Default `'nearest'`. */
@@ -52,6 +64,6 @@ declare function wireCatalogGeometryOverlay(root: HTMLElement): () => void;
  * 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;
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, collapsed, id: catalogId, }: WireCatalogOptions): () => void;
 
 export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog, wireCatalogGeometryOverlay };

package/dist/wire-catalog.js

@@ -1,7 +1,10 @@
+import { wireWorkbench } from './chunk-KH6VUGHU.js';
+
+
+
 import { delegate } from 'kerfjs';
 
-// src/wire-catalog.ts
-var catalogDesktopMedia = "(min-width: 52.01rem)";
+var catalogDesktopMedia = "(min-width: 44.01rem)";
 function revealCatalogEntry(root, id, {
   block = "nearest",
   inline = "nearest",
@@ -228,7 +231,9 @@ function wireCatalog(root, {
   selectAction = "catalog-select",
   toggleSidebarAction = "catalog-toggle-sidebar",
   toggleThemeAction = "catalog-toggle-theme",
-  toggleSecondaryAction = "catalog-toggle-secondary"
+  toggleSecondaryAction = "catalog-toggle-secondary",
+  collapsed,
+  id: catalogId = "kui-catalog"
 }) {
   let cancelReveal;
   const select = (id) => {
@@ -239,6 +244,9 @@ function wireCatalog(root, {
       url.searchParams.set(urlParam, id);
       view.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(
@@ -291,6 +299,13 @@ function wireCatalog(root, {
       )
     );
   }
+  if (collapsed)
+    disposers.push(
+      wireWorkbench(root, {
+        id: catalogId,
+        panels: { leftRail: { collapsed } }
+      })
+    );
   return () => {
     cancelReveal?.();
     for (const dispose of disposers.splice(0)) dispose();