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

package/dist/styles/workbench.css

@@ -1,5 +1,8 @@
 .kui-workbench {
   position: relative;
+  /* The rail and drawer overlays and the restore controls stack within the
+     Workbench, never against the page around it. */
+  isolation: isolate;
   display: flex;
   min-width: 0;
   min-height: 0;
@@ -39,6 +42,9 @@
     var(--kui-workbench-rail-width, 17.5rem) +
       var(--_kui-workbench-rail-safe-inset)
   );
+  /* The size is the whole track, separator border included, in or out of
+     flow and whatever box model the app defaults to. */
+  box-sizing: border-box;
   flex: 0 0 var(--_kui-workbench-rail-extent);
   min-width: 0;
   overflow: hidden;
@@ -69,7 +75,10 @@
   border-color: transparent;
 }
 
+/* The center is the overlay drawer's containing block, so a drawer that
+   leaves the flow still covers exactly the work-area column it docks under. */
 .kui-workbench__center {
+  position: relative;
   --kui-edge-inset-block-start: var(--_kui-workbench-safe-block-start);
   --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
   --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
@@ -178,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;
@@ -185,6 +208,7 @@
     var(--kui-workbench-drawer-height, 13.75rem) +
       var(--_kui-workbench-safe-block-end)
   );
+  box-sizing: border-box;
   position: relative;
   flex: 0 0 var(--_kui-workbench-drawer-extent);
   min-height: 0;
@@ -253,16 +277,197 @@
   transform: translateY(100%);
 }
 
+/* Opt-in resizable panels. The size lives in the resize wiring's track
+   property, which the wiring updates live during a drag, so the rail width or
+   drawer height follows it; collapsing leaves it alone, so the panel expands
+   back to the size it had. These rules precede the presentation rules below,
+   which must keep winning for overlay and hidden panels. */
+.kui-workbench__rail[data-resizable="true"] {
+  --kui-workbench-rail-width: var(--kui-resizable-region-size);
+  position: relative;
+}
+
+.kui-workbench__drawer[data-resizable="true"] {
+  --kui-workbench-drawer-height: var(--kui-resizable-region-size);
+}
+
+/* The work area keeps a minimum width beside the rails (the Workbench's
+   `mainMinSize`) and a minimum height above the drawer (`mainMinHeight`),
+   never larger than the Workbench itself. Inline panels, fixed or resizable,
+   give way instead: when the container narrows the rails shrink in proportion
+   to their sizes, when it gets shorter the drawer shrinks, and their content
+   follows the shown size. The wiring stops a resize where the work area would
+   drop below the minimum. */
+.kui-workbench[data-main-min-size] > .kui-workbench__center {
+  min-width: min(var(--_kui-workbench-main-min-width), 100%);
+}
+
+.kui-workbench[data-main-min-height]
+  > .kui-workbench__center
+  > .kui-workbench__main {
+  min-height: min(var(--_kui-workbench-main-min-height), 100%);
+}
+
+.kui-workbench__rail[data-presentation="inline"]:not([data-collapsed="true"]),
+.kui-workbench__drawer[data-presentation="inline"]:not(
+    [data-collapsed="true"]
+  ) {
+  flex-shrink: 1;
+}
+
+/* Low specificity, so a responsive overlay (below) restores the fixed size. */
+.kui-workbench__rail:where(
+    [data-presentation="inline"]:not([data-collapsed="true"])
+  )
+  > .kui-workbench__panel-content {
+  width: 100%;
+}
+
+.kui-workbench__drawer:where(
+    [data-presentation="inline"]:not([data-collapsed="true"])
+  )
+  > .kui-workbench__panel-content {
+  height: 100%;
+}
+
+/* The panel clips its sliding content, so a scrolling panel scrolls its
+   content box instead of itself: the separator handle is a child of the panel
+   and must not scroll away with the content. */
+.kui-workbench__rail[data-resizable="true"][data-content-overflow="auto"],
+.kui-workbench__drawer[data-resizable="true"][data-content-overflow="auto"] {
+  overflow: hidden;
+}
+
+.kui-workbench__rail[data-resizable="true"][data-content-overflow="auto"]
+  > .kui-workbench__panel-content,
+.kui-workbench__drawer[data-resizable="true"][data-content-overflow="auto"]
+  > .kui-workbench__panel-content {
+  overflow: auto;
+}
+
+/* The separator handle: the 20px hit target and dormant grip a
+   ResizableRegion handle has. The panel's own border stays the visible
+   separator line. By default the target sits wholly inside the panel, at its
+   inner edge, because the panel clips its sliding content. */
+.kui-workbench__handle {
+  position: absolute;
+  z-index: 3;
+  display: grid;
+  color: var(--kui-color-neutral-on-quiet);
+  place-items: center;
+  touch-action: none;
+}
+
+.kui-workbench__rail > .kui-workbench__handle {
+  inset-block: 0;
+  width: 20px;
+  cursor: col-resize;
+}
+
+.kui-workbench__rail--left > .kui-workbench__handle {
+  inset-inline-end: 0;
+}
+
+.kui-workbench__rail--right > .kui-workbench__handle {
+  inset-inline-start: 0;
+}
+
+.kui-workbench__drawer > .kui-workbench__handle {
+  inset-inline: 0;
+  inset-block-start: 0;
+  height: 20px;
+  cursor: row-resize;
+}
+
+.kui-workbench__rail[data-collapsed="true"] > .kui-workbench__handle,
+.kui-workbench__drawer[data-collapsed="true"] > .kui-workbench__handle,
+.kui-workbench__rail:not([data-presentation="inline"]) > .kui-workbench__handle,
+.kui-workbench__drawer:not([data-presentation="inline"])
+  > .kui-workbench__handle {
+  display: none;
+}
+
+/* Where the engine can extend a clip past the panel's edge, an expanded
+   panel lets exactly the handle's outer half through, so the hit target
+   straddles the separator like a ResizableRegion handle does. Collapsing drops
+   the margin again before the content slides out. */
+@supports (overflow-clip-margin: 10px) {
+  .kui-workbench__rail[data-resizable="true"]:not(
+      [data-collapsed="true"],
+      [data-content-overflow="visible"]
+    ),
+  .kui-workbench__drawer[data-resizable="true"]:not(
+      [data-collapsed="true"],
+      [data-content-overflow="visible"]
+    ) {
+    overflow: clip;
+    overflow-clip-margin: 10px;
+  }
+
+  .kui-workbench__rail--left[data-resizable="true"] > .kui-workbench__handle {
+    inset-inline-end: -10px;
+  }
+
+  .kui-workbench__rail--right[data-resizable="true"] > .kui-workbench__handle {
+    inset-inline-start: -10px;
+  }
+
+  .kui-workbench__drawer[data-resizable="true"] > .kui-workbench__handle {
+    inset-block-start: -10px;
+  }
+}
+
+.kui-workbench__handle:hover,
+.kui-workbench__handle:focus-visible {
+  color: var(--kui-color-text-link);
+}
+
+/* The ring stays wholly inside the handle's box, as a ResizableRegion
+   handle's does. */
+.kui-workbench__handle:focus-visible {
+  border-radius: var(--kui-radius-s);
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-workbench__handle-icon {
+  position: relative;
+  display: grid;
+  width: 0.9rem;
+  height: 0.9rem;
+  opacity: 0;
+  pointer-events: none;
+  place-items: center;
+}
+
+.kui-workbench__handle-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+.kui-workbench__handle:hover .kui-workbench__handle-icon,
+.kui-workbench__handle:focus-visible .kui-workbench__handle-icon {
+  opacity: 1;
+}
+
+/* Overlay stacking order: both rails stack above the bottom drawer, one below
+   the overlay z-index, as inline rails span the Workbench's full height beside
+   the drawer's column; the right rail stacks above the left (document order).
+   Restore controls stack below every overlay (see .kui-workbench__restore). */
 .kui-workbench__rail[data-presentation="overlay"],
 .kui-workbench__drawer[data-presentation="overlay"] {
   position: absolute;
   z-index: var(--kui-workbench-overlay-z, 41);
-  max-width: var(--kui-workbench-overlay-max-width, 85vw);
-  max-height: var(--kui-workbench-overlay-max-height, 85vh);
   box-shadow: var(--kui-shadow-l);
 }
 
+/* An out-of-flow rail sizes to its content plus its border, so it takes its
+   extent explicitly, as its in-flow flex basis does, border included. Each
+   overlay maximum caps only the panel's own axis: a rail spans the
+   Workbench's full height and a drawer its full width. */
 .kui-workbench__rail[data-presentation="overlay"] {
+  width: var(--_kui-workbench-rail-extent);
+  max-width: var(--kui-workbench-overlay-max-width, 85vw);
   inset-block: 0;
 }
 
@@ -274,41 +479,312 @@
   inset-inline-end: 0;
 }
 
+/* The drawer's content is absolutely positioned against its bottom edge, so
+   an out-of-flow drawer has no content height of its own: it takes its extent
+   explicitly, as the in-flow track does through its flex basis. */
 .kui-workbench__drawer[data-presentation="overlay"] {
+  z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+  height: var(--_kui-workbench-drawer-extent);
+  max-height: var(--kui-workbench-overlay-max-height, 85vh);
   inset-inline: 0;
   inset-block-end: 0;
 }
 
+/* A collapsed overlay keeps its box for the slide-out, so it drops its surface
+   and shadow; the sliding content carries the surface instead. */
 .kui-workbench__rail[data-presentation="overlay"][data-collapsed="true"],
 .kui-workbench__drawer[data-presentation="overlay"][data-collapsed="true"] {
+  background: transparent;
+  box-shadow: none;
   pointer-events: none;
 }
 
+/* Overlay content fills the rail inside its separator border, so it is
+   clamped with the rail and carries the surface through the slide-out. */
+.kui-workbench__rail[data-presentation="overlay"]
+  > .kui-workbench__panel-content {
+  width: 100%;
+  background: var(--kui-color-surface);
+}
+
+/* The overlay content fills the drawer box below its separator border, so it
+   is clamped with the box and carries the surface through the slide-out. */
+.kui-workbench__drawer[data-presentation="overlay"]
+  > .kui-workbench__panel-content {
+  height: 100%;
+  background: var(--kui-color-surface);
+}
+
 .kui-workbench__rail[data-presentation="hidden"],
 .kui-workbench__drawer[data-presentation="hidden"] {
   display: none;
 }
 
+/* Responsive overlay panels. A rail or the drawer with `responsiveOverlayAt`
+   presents as an overlay — out of flow, over the work area, without a
+   separator — below the Workbench's own container breakpoint (`narrow`: 704px
+   or less, `compact`: 448px or less, as `ResizableRegion`'s
+   `responsiveFillAt`), and inline above it. The Workbench becomes a named
+   inline-size container only when a panel opts in. The work area keeps its
+   safe-area inset under an overlay panel. */
+.kui-workbench:has(
+  > .kui-workbench__rail[data-responsive-overlay-at],
+  > .kui-workbench__center > .kui-workbench__drawer[data-responsive-overlay-at]
+) {
+  container: kui-workbench / inline-size;
+}
+
+@container kui-workbench (max-width: 44rem) {
+  .kui-workbench__rail[data-responsive-overlay-at="narrow"] {
+    position: absolute;
+    z-index: var(--kui-workbench-overlay-z, 41);
+    width: var(--_kui-workbench-rail-extent);
+    max-width: var(--kui-workbench-overlay-max-width, 85vw);
+    inset-block: 0;
+    box-shadow: var(--kui-shadow-l);
+  }
+
+  .kui-workbench__rail--left[data-responsive-overlay-at="narrow"] {
+    inset-inline-start: 0;
+  }
+
+  .kui-workbench__rail--right[data-responsive-overlay-at="narrow"] {
+    inset-inline-end: 0;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="narrow"][data-collapsed="true"] {
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="narrow"]
+    > .kui-workbench__panel-content {
+    width: 100%;
+    background: var(--kui-color-surface);
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="narrow"]
+    > .kui-workbench__handle {
+    display: none;
+  }
+
+  .kui-workbench:has(
+      > .kui-workbench__rail--left[data-responsive-overlay-at="narrow"][data-presentation="inline"]
+    )
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  }
+
+  .kui-workbench:has(
+      > .kui-workbench__rail--right[data-responsive-overlay-at="narrow"][data-presentation="inline"]
+    )
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="narrow"] {
+    position: absolute;
+    anchor-name: none;
+    z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+    height: var(--_kui-workbench-drawer-extent);
+    max-height: var(--kui-workbench-overlay-max-height, 85vh);
+    inset-inline: 0;
+    inset-block-end: 0;
+    box-shadow: var(--kui-shadow-l);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="narrow"][data-collapsed="true"] {
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="narrow"]
+    > .kui-workbench__panel-content {
+    height: 100%;
+    background: var(--kui-color-surface);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="narrow"]
+    > .kui-workbench__handle {
+    display: none;
+  }
+
+  .kui-workbench__main:has(
+    ~ .kui-workbench__drawer[data-responsive-overlay-at="narrow"][data-presentation="inline"]
+  ) {
+    --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  }
+}
+
+@container kui-workbench (max-width: 28rem) {
+  .kui-workbench__rail[data-responsive-overlay-at="compact"] {
+    position: absolute;
+    z-index: var(--kui-workbench-overlay-z, 41);
+    width: var(--_kui-workbench-rail-extent);
+    max-width: var(--kui-workbench-overlay-max-width, 85vw);
+    inset-block: 0;
+    box-shadow: var(--kui-shadow-l);
+  }
+
+  .kui-workbench__rail--left[data-responsive-overlay-at="compact"] {
+    inset-inline-start: 0;
+  }
+
+  .kui-workbench__rail--right[data-responsive-overlay-at="compact"] {
+    inset-inline-end: 0;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="compact"][data-collapsed="true"] {
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="compact"]
+    > .kui-workbench__panel-content {
+    width: 100%;
+    background: var(--kui-color-surface);
+  }
+
+  .kui-workbench__rail[data-responsive-overlay-at="compact"]
+    > .kui-workbench__handle {
+    display: none;
+  }
+
+  .kui-workbench:has(
+      > .kui-workbench__rail--left[data-responsive-overlay-at="compact"][data-presentation="inline"]
+    )
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-start: var(--_kui-workbench-safe-inline-start);
+  }
+
+  .kui-workbench:has(
+      > .kui-workbench__rail--right[data-responsive-overlay-at="compact"][data-presentation="inline"]
+    )
+    > .kui-workbench__center {
+    --kui-edge-inset-inline-end: var(--_kui-workbench-safe-inline-end);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="compact"] {
+    position: absolute;
+    anchor-name: none;
+    z-index: calc(var(--kui-workbench-overlay-z, 41) - 1);
+    height: var(--_kui-workbench-drawer-extent);
+    max-height: var(--kui-workbench-overlay-max-height, 85vh);
+    inset-inline: 0;
+    inset-block-end: 0;
+    box-shadow: var(--kui-shadow-l);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="compact"][data-collapsed="true"] {
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="compact"]
+    > .kui-workbench__panel-content {
+    height: 100%;
+    background: var(--kui-color-surface);
+  }
+
+  .kui-workbench__drawer[data-responsive-overlay-at="compact"]
+    > .kui-workbench__handle {
+    display: none;
+  }
+
+  .kui-workbench__main:has(
+    ~ .kui-workbench__drawer[data-responsive-overlay-at="compact"][data-presentation="inline"]
+  ) {
+    --kui-edge-inset-block-end: var(--_kui-workbench-safe-block-end);
+  }
+}
+
+/* A collapsed panel's restore control floats in a corner of the Workbench
+   itself, never of the viewport, so an embedded Workbench cannot float it over
+   page chrome outside it. It is inset from the corner plus the unsafe area of
+   each edge that corner reaches. The drawer's control sits in the work-area
+   column it restores (the center is its containing block), inset from the
+   edges that column still reaches, so it never lands on an expanded rail.
+   It belongs to the layer beneath the overlays, two below the overlay
+   z-index: an open overlay covers it as it covers the rest of the work area,
+   so no other panel's control floats over the overlay's content. A collapsed
+   overlay drops its pointer events, so the control stays usable beneath it. */
 .kui-workbench__restore {
-  position: fixed;
-  z-index: var(--kui-workbench-restore-z, 42);
+  --_kui-workbench-restore-inset: var(
+    --kui-workbench-restore-inset,
+    1rem
+  );
+  /* The corner owns the inset, so a FloatingToolbar composed here floats
+     from this point instead of adding its own inset on top. */
+  --kui-floating-toolbar-inset: 0px;
+  position: absolute;
+  z-index: var(
+    --kui-workbench-restore-z,
+    calc(var(--kui-workbench-overlay-z, 41) - 2)
+  );
   inset-block-end: calc(
-    var(--kui-workbench-restore-inset, 1rem) +
-      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+    var(--_kui-workbench-restore-inset) + var(--_kui-workbench-safe-block-end)
   );
 }
 
 .kui-workbench__restore[data-position="bottom-start"] {
   inset-inline-start: calc(
-    var(--kui-workbench-restore-inset, 1rem) +
-      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+    var(--_kui-workbench-restore-inset) +
+      var(--_kui-workbench-safe-inline-start)
   );
 }
 
 .kui-workbench__restore[data-position="bottom-end"] {
   inset-inline-end: calc(
-    var(--kui-workbench-restore-inset, 1rem) +
-      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+    var(--_kui-workbench-restore-inset) + var(--_kui-workbench-safe-inline-end)
+  );
+}
+
+/* An expanded inline bottom drawer owns the bottom of the work-area column,
+   which reaches the Workbench's bottom corners once a rail collapses, so a
+   collapsed rail's control floats the restore inset above the drawer's top
+   edge instead of over it — the standalone CollapsiblePanel rule, scoped to
+   this Workbench so a nested Workbench or an enclosing layout never sees its
+   drawer. The drawer publishes that edge only while it is expanded and in
+   flow: an overlay drawer, static or responsive (see the container queries
+   above), covers the control as every open overlay does. Without anchor
+   positioning the control keeps the Workbench corner. */
+.kui-workbench {
+  anchor-scope: --kui-restore-drawer;
+}
+
+.kui-workbench__drawer:where(
+  [data-presentation="inline"]:not([data-collapsed="true"])
+) {
+  anchor-name: --kui-restore-drawer;
+}
+
+.kui-workbench > .kui-workbench__restore {
+  position-visibility: always;
+  inset-block-end: calc(
+    var(--_kui-workbench-restore-inset) +
+      anchor(--kui-restore-drawer top, var(--_kui-workbench-safe-block-end))
+  );
+}
+
+.kui-workbench__center > .kui-workbench__restore {
+  inset-block-end: calc(
+    var(--_kui-workbench-restore-inset) + var(--kui-edge-inset-block-end)
+  );
+}
+
+.kui-workbench__center > .kui-workbench__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--_kui-workbench-restore-inset) + var(--kui-edge-inset-inline-start)
+  );
+}
+
+.kui-workbench__center > .kui-workbench__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--_kui-workbench-restore-inset) + var(--kui-edge-inset-inline-end)
   );
 }
 
@@ -317,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 };