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

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);
@@ -185,6 +194,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 +263,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 +465,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)
   );
 }
 

package/dist/wire-resizable-regions.d.ts

@@ -9,7 +9,8 @@ interface WireResizableRegionsOptions {
     onPreview?: (change: ResizeCommit) => void;
     onCommit: (change: ResizeCommit) => void;
 }
+
 /** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */
-declare function wireResizableRegions(root: HTMLElement, { step, largeStep, onPreview, onCommit, }: WireResizableRegionsOptions): () => void;
+declare function wireResizableRegions(root: HTMLElement, options: WireResizableRegionsOptions): () => void;
 
 export { type ResizeCommit, type WireResizableRegionsOptions, wireResizableRegions };

package/dist/wire-resizable-regions.js

@@ -1,4 +1,5 @@
-export { wireResizableRegions } from './chunk-EKYZCRCX.js';
+export { wireResizableRegions } from './chunk-XQV2B4IL.js';
+
 
 
 //# sourceMappingURL=wire-resizable-regions.js.map

package/dist/wire-tab-bars.js

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

package/dist/wire-workbench.d.ts

@@ -0,0 +1,109 @@
+import { Signal, ReadonlySignal } from 'kerfjs';
+import { DeviceClass } from './device-class.js';
+
+/** A Workbench panel slot, named after its `WorkbenchProps` prop. */
+type WorkbenchPanelKey = 'leftRail' | 'rightRail' | 'bottomDrawer';
+
+/** Minimal `localStorage`-shaped store, so the persistence hook is testable. */
+interface WorkbenchStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+}
+/** One Workbench panel's app-owned state. */
+interface WireWorkbenchPanel {
+    /**
+     * The app-owned size signal a `resizable` panel renders as its `size`.
+     * `wireWorkbench` writes each committed resize here; collapsing never
+     * touches it, so an expanded panel returns at the size it had. Omit it for
+     * a panel that is not resizable.
+     */
+    size?: Signal<number>;
+    /**
+     * When set with `size`, the size is loaded from and saved to `storage`
+     * under this key, so the panel remembers the user's size.
+     */
+    storageKey?: string;
+    /**
+     * The app-owned signal the panel renders as its `collapsed`. With it (and
+     * `dismissOverlays`, on by default) `wireWorkbench` treats the panel as a
+     * transient overlay while it presents as one: it collapses when its
+     * `responsiveOverlayAt` breakpoint begins to apply and gets its inline state
+     * back when the breakpoint stops applying, an open overlay takes focus and
+     * keeps Tab inside it, and it closes on Escape or a press outside it.
+     */
+    collapsed?: Signal<boolean>;
+}
+/** A resize the user made, after `wireWorkbench` wrote it to the size signal. */
+interface WorkbenchResize {
+    panel: WorkbenchPanelKey;
+    size: number;
+    source: 'keyboard' | 'pointer';
+}
+interface WireWorkbenchOptions {
+    /** The `id` the `Workbench` was rendered with. */
+    id: string;
+    /**
+     * The wired panels, keyed like the `Workbench` props. Render a panel given
+     * a `size` with `resizable` and `size={panel.size.value}`, and one given a
+     * `collapsed` signal with `collapsed={panel.collapsed.value}`.
+     */
+    panels: Partial<Record<WorkbenchPanelKey, WireWorkbenchPanel>>;
+    /**
+     * When provided, resizing is suspended while `deviceClass.compact` is true —
+     * the classes where rails become overlay drawers or are replaced.
+     */
+    deviceClass?: ReadonlySignal<DeviceClass>;
+    /** Persistence store (default `globalThis.localStorage`, if present). */
+    storage?: WorkbenchStorage;
+    /** Keyboard step in px (default 16). */
+    step?: number;
+    /** Shift+arrow step in px (default 64). */
+    largeStep?: number;
+    /** Called after each committed resize. */
+    onResize?: (change: WorkbenchResize) => void;
+    /**
+     * Treat the panels given a `collapsed` signal as transient overlays while
+     * they present as overlays (default `true`), like `wireSidebar`'s compact
+     * overlay: a panel whose `responsiveOverlayAt` breakpoint begins to apply
+     * starts collapsed, with no collapse motion, and gets its inline collapsed
+     * state back when the breakpoint stops applying (and on disposal); an open
+     * overlay panel, responsive or `presentation: "overlay"`, closes on Escape
+     * or a press that starts and ends outside it. A panel that opens as an
+     * overlay takes focus on its first focusable control, and while it is open
+     * Tab and Shift+Tab cycle through its controls instead of reaching the
+     * work area it covers (the ARIA dialog pattern of `wireSidebar`'s compact
+     * overlay); inline panels never move focus. Focus stranded in a closing
+     * panel — however it closed, the app's own control inside it included —
+     * returns to the control that had it when the panel opened, else to the
+     * panel's restore control, else to a control outside the panel whose
+     * `aria-controls` names it (each panel's `id` is its region id, e.g.
+     * `studio-left-rail`) — the fallback for a panel already open at wire-up.
+     * An opener inside a panel that has closed since is skipped. `false` leaves
+     * every `collapsed` write and all focus handling to the app.
+     */
+    dismissOverlays?: boolean;
+    /**
+     * Keep overlays exclusive (default `true`), like `wireSidebar`'s
+     * `exclusiveCompact`: when a panel opens while it presents as an overlay,
+     * every other open overlay panel — rails and the bottom drawer alike —
+     * closes, so one overlay never covers another's controls. Panels presenting
+     * inline are never closed by it. Applies only with `dismissOverlays`.
+     */
+    exclusiveOverlays?: boolean;
+}
+/**
+ * Wire a `Workbench`'s panels. For `resizable` panels given a `size` signal:
+ * pointer drags and arrow / Shift+arrow / Home / End on each panel's
+ * separator, clamped to the panel's limits and to the room that leaves the
+ * work area its minimum width and height, committed to the app-owned size signals.
+ * Optional persistence loads and saves each size; optional `deviceClass`
+ * suspends resizing on compact classes. Collapse stays the app's `collapsed`
+ * flag and never changes a size. For panels given a `collapsed` signal,
+ * overlays are transient (`dismissOverlays`): a responsive overlay starts
+ * collapsed, an open overlay takes focus and keeps Tab inside it, it closes
+ * on Escape or an outside press, and
+ * opening one overlay closes the others (`exclusiveOverlays`). Returns a disposer. See `docs/23-app-layouts.md` §3.3.
+ */
+declare function wireWorkbench(root: HTMLElement, { id, panels, deviceClass, storage, step, largeStep, onResize, dismissOverlays, exclusiveOverlays, }: WireWorkbenchOptions): () => void;
+
+export { type WireWorkbenchOptions, type WireWorkbenchPanel, type WorkbenchPanelKey, type WorkbenchResize, type WorkbenchStorage, wireWorkbench };