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

package/dist/workbench.d.ts

@@ -2,24 +2,64 @@ import { SafeHtml } from 'kerfjs';
 import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
+/**
+ * The Workbench container breakpoint below which a panel presents as an
+ * overlay: `narrow` (704px or less) or `compact` (448px or less) — the same
+ * breakpoints as `ResizableRegion`'s `responsiveFillAt`.
+ */
+type WorkbenchResponsiveOverlayAt = 'compact' | 'narrow';
+/** Drag-resize limits for a resizable Workbench panel, in px. */
+interface WorkbenchPanelResizable {
+    /** Smallest size (default 180 for a rail, 120 for the drawer). */
+    min?: number;
+    /** Largest size (default 480). */
+    max?: number;
+}
 /** A collapsible Workbench panel — a side rail or the bottom drawer. */
 interface WorkbenchPanel {
     content: KerfUiContent;
     /** Whether the panel is currently collapsed (the app owns this). */
     collapsed?: boolean;
-    /** Rail width, or drawer height, in px. Overrides the CSS default. */
+    /**
+     * Rail width, or drawer height, in px. Overrides the CSS default. For a
+     * resizable panel it is the current size (default 280 for a rail, 220 for
+     * the drawer), clamped to the limits; the app owns it and `wireWorkbench`
+     * reports each resize.
+     */
     size?: number;
+    /**
+     * Opt in to drag and keyboard resizing on the panel's inner separator:
+     * `true` for the default limits, or `{ min, max }`. Off by default. Pair it
+     * with `wireWorkbench` from `@kerfjs/ui/wire-workbench`.
+     */
+    resizable?: boolean | WorkbenchPanelResizable;
     /** Accessible name for the panel region. */
     label?: string;
     separator?: ResizableRegionSeparator;
     collapseMotion?: ResizableRegionCollapseMotion;
     contentOverflow?: ResizableRegionContentOverflow;
     presentation?: ResizableRegionPresentation;
-    /** Control shown in a safe-area-aware viewport corner while collapsed. */
+    /**
+     * Present the panel as an overlay, without a separator, below a Workbench
+     * container breakpoint, and inline above it — the CSS decides, so the app
+     * needs no device-class check. A rail overlays from its side at full
+     * height; the bottom drawer overlays the bottom of the work-area column.
+     */
+    responsiveOverlayAt?: WorkbenchResponsiveOverlayAt;
+    /**
+     * Control shown while collapsed, in a safe-area-aware corner of the
+     * Workbench (not the viewport); the bottom drawer's sits in the work-area
+     * column.
+     */
     restoreControl?: SafeHtml;
     restorePosition?: ResizableRegionRestorePosition;
 }
 interface WorkbenchProps {
+    /**
+     * The Workbench's `id`. Each panel's `id` derives from it —
+     * `<id>-left-rail`, `<id>-right-rail`, `<id>-bottom-drawer` — so a toggle
+     * can name the panel it shows and hides with `aria-controls`.
+     */
     id: string;
     label: string;
     /** The central work area. */
@@ -27,6 +67,22 @@ interface WorkbenchProps {
     leftRail?: WorkbenchPanel;
     rightRail?: WorkbenchPanel;
     bottomDrawer?: WorkbenchPanel;
+    /**
+     * Minimum width, in px, the work area keeps beside the inline rails, fixed
+     * or `resizable` (default 320; `0` turns it off). Resizing a rail stops
+     * where the work area would drop below it, and inline rails shrink
+     * proportionally when the Workbench gets narrower. Workbenches without a
+     * rail ignore it.
+     */
+    mainMinSize?: number;
+    /**
+     * Minimum height, in px, the work area keeps above an inline bottom drawer,
+     * fixed or `resizable` (default 120; `0` turns it off) — the drawer's
+     * counterpart of `mainMinSize`. Resizing the drawer stops where the work
+     * area would drop below it, and the drawer shrinks when the Workbench gets
+     * shorter. Workbenches without a drawer ignore it.
+     */
+    mainMinHeight?: number;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -38,9 +94,12 @@ interface WorkbenchProps {
  * a composited transform — the instant-width / sliding-content technique, so the
  * work area relayouts once, not per frame. Bottom-drawer content stays anchored
  * to the shell's stable bottom edge throughout that transition. The app owns
- * each `collapsed` flag; the collapse is pure CSS (no wire). See
- * `docs/23-app-layouts.md` §3.3.
+ * each `collapsed` flag; the collapse is pure CSS. A collapsed panel renders
+ * `inert` and `aria-hidden`, so neither Tab nor assistive technology reaches
+ * controls that have slid out of view or an empty landmark (its restore control
+ * lives outside it and stays reachable). A panel may opt in to drag and keyboard resizing with
+ * `resizable`, which `wireWorkbench` drives. See `docs/23-app-layouts.md` §3.3.
  */
-declare function Workbench({ id, label, main, leftRail, rightRail, bottomDrawer, className, slot, }: WorkbenchProps): SafeHtml;
+declare function Workbench({ id, label, main, leftRail, rightRail, bottomDrawer, mainMinSize, mainMinHeight, className, slot, }: WorkbenchProps): SafeHtml;
 
-export { Workbench, type WorkbenchPanel, type WorkbenchProps };
+export { Workbench, type WorkbenchPanel, type WorkbenchPanelResizable, type WorkbenchProps, type WorkbenchResponsiveOverlayAt };

package/dist/workbench.js

@@ -1,6 +1,167 @@
+import { WORKBENCH_MAIN_MIN_SIZE, WORKBENCH_MAIN_MIN_HEIGHT, workbenchRegionId, WORKBENCH_RESIZE_DEFAULTS } from './chunk-PSHUSWQH.js';
+import { clampRegionSize, ResizeGrip } from './chunk-VHADGP3B.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
-// src/workbench.tsx
+var EDGES = {
+  leftRail: "end",
+  rightRail: "start",
+  bottomDrawer: "start"
+};
+var DEFAULT_LABELS = {
+  leftRail: "left rail",
+  rightRail: "right rail",
+  bottomDrawer: "bottom drawer"
+};
+function resolveResize(id, key, panel) {
+  if (!panel.resizable) return void 0;
+  const defaults = WORKBENCH_RESIZE_DEFAULTS[key];
+  const limits = panel.resizable === true ? {} : panel.resizable;
+  const min = limits.min ?? defaults.min;
+  const max = Math.max(min, limits.max ?? defaults.max);
+  return {
+    regionId: workbenchRegionId(id, key),
+    axis: key === "bottomDrawer" ? "vertical" : "horizontal",
+    edge: EDGES[key],
+    size: clampRegionSize(panel.size ?? defaults.size, min, max),
+    min,
+    max
+  };
+}
+var resizeAttributes = (resize) => resize ? {
+  "data-resizable": "true",
+  "data-region-id": resize.regionId,
+  "data-axis": resize.axis,
+  "data-edge": resize.edge
+} : {};
+function panelStyle(panel, resize, sizeProperty) {
+  if (resize) return `--kui-resizable-region-size:${resize.size}px`;
+  return panel.size ? `${sizeProperty}: ${panel.size}px` : void 0;
+}
+function PanelHandle({
+  panel,
+  resize,
+  label
+}) {
+  const inert = Boolean(panel.collapsed) || (panel.presentation ?? "inline") !== "inline";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-workbench__handle",
+      role: "separator",
+      tabindex: inert ? "-1" : "0",
+      "aria-label": `Resize ${label}`,
+      "aria-orientation": resize.axis === "horizontal" ? "vertical" : "horizontal",
+      "aria-valuemin": resize.min,
+      "aria-valuemax": resize.max,
+      "aria-valuenow": resize.size,
+      "aria-hidden": inert ? "true" : void 0,
+      "data-kui-resize-handle": true,
+      "data-region-id": resize.regionId,
+      children: /* @__PURE__ */ jsx("span", { class: "kui-workbench__handle-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ResizeGrip, { axis: resize.axis }) })
+    }
+  );
+}
+function hiddenFromAccessibility(panel) {
+  return panel.collapsed || panel.presentation === "hidden" ? "true" : void 0;
+}
+function Rail({
+  id,
+  side,
+  panel
+}) {
+  const key = side === "left" ? "leftRail" : "rightRail";
+  const resize = resolveResize(id, key, panel);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      id: workbenchRegionId(id, key),
+      class: `kui-workbench__rail kui-workbench__rail--${side}`,
+      "data-workbench-rail": side,
+      "data-collapsed": String(panel.collapsed ?? false),
+      "data-separator": panel.separator ?? "auto",
+      "data-collapse-motion": panel.collapseMotion ?? "slide",
+      "data-content-overflow": panel.contentOverflow ?? "clip",
+      "data-presentation": panel.presentation ?? "inline",
+      "data-responsive-overlay-at": panel.responsiveOverlayAt,
+      ...resizeAttributes(resize),
+      "aria-label": panel.label || void 0,
+      "aria-hidden": hiddenFromAccessibility(panel),
+      inert: Boolean(panel.collapsed),
+      style: panelStyle(panel, resize, "--kui-workbench-rail-width"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__panel-content",
+            inert: Boolean(panel.collapsed),
+            children: panel.content
+          }
+        ),
+        resize && /* @__PURE__ */ jsx(
+          PanelHandle,
+          {
+            panel,
+            resize,
+            label: panel.label || DEFAULT_LABELS[key]
+          }
+        )
+      ]
+    }
+  );
+}
+function Drawer({ id, panel }) {
+  const resize = resolveResize(id, "bottomDrawer", panel);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: workbenchRegionId(id, "bottomDrawer"),
+      class: "kui-workbench__drawer",
+      "data-workbench-drawer": true,
+      "data-collapsed": String(panel.collapsed ?? false),
+      "data-separator": panel.separator ?? "auto",
+      "data-collapse-motion": panel.collapseMotion ?? "slide",
+      "data-content-overflow": panel.contentOverflow ?? "clip",
+      "data-presentation": panel.presentation ?? "inline",
+      "data-responsive-overlay-at": panel.responsiveOverlayAt,
+      ...resizeAttributes(resize),
+      "aria-label": panel.label || void 0,
+      "aria-hidden": hiddenFromAccessibility(panel),
+      inert: Boolean(panel.collapsed),
+      style: panelStyle(panel, resize, "--kui-workbench-drawer-height"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-workbench__panel-content",
+            inert: Boolean(panel.collapsed),
+            children: panel.content
+          }
+        ),
+        resize && /* @__PURE__ */ jsx(
+          PanelHandle,
+          {
+            panel,
+            resize,
+            label: panel.label || DEFAULT_LABELS.bottomDrawer
+          }
+        )
+      ]
+    }
+  );
+}
+function restore(panel, side, position) {
+  if (!panel?.collapsed || !panel.restoreControl || panel.presentation === "hidden")
+    return "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-workbench__restore",
+      "data-panel": side,
+      "data-position": panel.restorePosition ?? position,
+      children: panel.restoreControl
+    }
+  );
+}
 function Workbench({
   id,
   label,
@@ -8,96 +169,39 @@ function Workbench({
   leftRail,
   rightRail,
   bottomDrawer,
+  mainMinSize = WORKBENCH_MAIN_MIN_SIZE,
+  mainMinHeight = WORKBENCH_MAIN_MIN_HEIGHT,
   className = "",
   slot
 }) {
+  const px = (value) => Math.max(0, Math.round(value));
+  const mainMin = leftRail || rightRail ? px(mainMinSize) : void 0;
+  const mainMinBlock = bottomDrawer ? px(mainMinHeight) : void 0;
+  const style = [
+    mainMin === void 0 ? "" : `--_kui-workbench-main-min-width:${mainMin}px`,
+    mainMinBlock === void 0 ? "" : `--_kui-workbench-main-min-height:${mainMinBlock}px`
+  ].filter(Boolean).join(";");
   return /* @__PURE__ */ jsxs(
     "section",
     {
       class: `kui-workbench ${className}`.trim(),
       id,
       "data-component": "workbench",
+      "data-main-min-size": mainMin === void 0 ? void 0 : String(mainMin),
+      "data-main-min-height": mainMinBlock === void 0 ? void 0 : String(mainMinBlock),
+      style: style || void 0,
       "aria-label": label,
       slot,
       children: [
-        leftRail && /* @__PURE__ */ jsx(
-          "aside",
-          {
-            class: "kui-workbench__rail kui-workbench__rail--left",
-            "data-workbench-rail": "left",
-            "data-collapsed": String(leftRail.collapsed ?? false),
-            "data-separator": leftRail.separator ?? "auto",
-            "data-collapse-motion": leftRail.collapseMotion ?? "slide",
-            "data-content-overflow": leftRail.contentOverflow ?? "clip",
-            "data-presentation": leftRail.presentation ?? "inline",
-            "aria-label": leftRail.label || void 0,
-            "aria-hidden": leftRail.presentation === "hidden" ? "true" : void 0,
-            style: leftRail.size ? `--kui-workbench-rail-width: ${leftRail.size}px` : void 0,
-            children: /* @__PURE__ */ jsx("div", { class: "kui-workbench__panel-content", children: leftRail.content })
-          }
-        ),
-        leftRail?.collapsed && leftRail.restoreControl && leftRail.presentation !== "hidden" && /* @__PURE__ */ jsx(
-          "div",
-          {
-            class: "kui-workbench__restore",
-            "data-panel": "left",
-            "data-position": leftRail.restorePosition ?? "bottom-start",
-            children: leftRail.restoreControl
-          }
-        ),
+        leftRail && /* @__PURE__ */ jsx(Rail, { id, side: "left", panel: leftRail }),
+        restore(leftRail, "left", "bottom-start"),
         /* @__PURE__ */ jsxs("div", { class: "kui-workbench__center", children: [
           /* @__PURE__ */ jsx("div", { class: "kui-workbench__main", "data-workbench-main": true, children: main }),
-          bottomDrawer && /* @__PURE__ */ jsx(
-            "section",
-            {
-              class: "kui-workbench__drawer",
-              "data-workbench-drawer": true,
-              "data-collapsed": String(bottomDrawer.collapsed ?? false),
-              "data-separator": bottomDrawer.separator ?? "auto",
-              "data-collapse-motion": bottomDrawer.collapseMotion ?? "slide",
-              "data-content-overflow": bottomDrawer.contentOverflow ?? "clip",
-              "data-presentation": bottomDrawer.presentation ?? "inline",
-              "aria-label": bottomDrawer.label || void 0,
-              "aria-hidden": bottomDrawer.presentation === "hidden" ? "true" : void 0,
-              style: bottomDrawer.size ? `--kui-workbench-drawer-height: ${bottomDrawer.size}px` : void 0,
-              children: /* @__PURE__ */ jsx("div", { class: "kui-workbench__panel-content", children: bottomDrawer.content })
-            }
-          ),
-          bottomDrawer?.collapsed && bottomDrawer.restoreControl && bottomDrawer.presentation !== "hidden" && /* @__PURE__ */ jsx(
-            "div",
-            {
-              class: "kui-workbench__restore",
-              "data-panel": "bottom",
-              "data-position": bottomDrawer.restorePosition ?? "bottom-end",
-              children: bottomDrawer.restoreControl
-            }
-          )
+          bottomDrawer && /* @__PURE__ */ jsx(Drawer, { id, panel: bottomDrawer }),
+          restore(bottomDrawer, "bottom", "bottom-end")
         ] }),
-        rightRail && /* @__PURE__ */ jsx(
-          "aside",
-          {
-            class: "kui-workbench__rail kui-workbench__rail--right",
-            "data-workbench-rail": "right",
-            "data-collapsed": String(rightRail.collapsed ?? false),
-            "data-separator": rightRail.separator ?? "auto",
-            "data-collapse-motion": rightRail.collapseMotion ?? "slide",
-            "data-content-overflow": rightRail.contentOverflow ?? "clip",
-            "data-presentation": rightRail.presentation ?? "inline",
-            "aria-label": rightRail.label || void 0,
-            "aria-hidden": rightRail.presentation === "hidden" ? "true" : void 0,
-            style: rightRail.size ? `--kui-workbench-rail-width: ${rightRail.size}px` : void 0,
-            children: /* @__PURE__ */ jsx("div", { class: "kui-workbench__panel-content", children: rightRail.content })
-          }
-        ),
-        rightRail?.collapsed && rightRail.restoreControl && rightRail.presentation !== "hidden" && /* @__PURE__ */ jsx(
-          "div",
-          {
-            class: "kui-workbench__restore",
-            "data-panel": "right",
-            "data-position": rightRail.restorePosition ?? "bottom-end",
-            children: rightRail.restoreControl
-          }
-        )
+        rightRail && /* @__PURE__ */ jsx(Rail, { id, side: "right", panel: rightRail }),
+        restore(rightRail, "right", "bottom-end")
       ]
     }
   );

package/dist/workbench.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/workbench.tsx"],"names":[],"mappings":"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","file":"workbench.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from './resizable-region.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/** A collapsible Workbench panel — a side rail or the bottom drawer. */\nexport interface WorkbenchPanel {\n  content: KerfUiContent;\n  /** Whether the panel is currently collapsed (the app owns this). */\n  collapsed?: boolean;\n  /** Rail width, or drawer height, in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible name for the panel region. */\n  label?: string;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown in a safe-area-aware viewport corner while collapsed. */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n}\n\nexport interface WorkbenchProps {\n  id: string;\n  label: string;\n  /** The central work area. */\n  main: KerfUiContent;\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  bottomDrawer?: WorkbenchPanel;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * The Xcode-like multi-panel workspace: a collapsible left rail, right rail, and\n * bottom drawer around a central work area (any absent). Collapsing snaps the\n * panel's track to zero in one reflow while its fixed-size content slides out via\n * a composited transform — the instant-width / sliding-content technique, so the\n * work area relayouts once, not per frame. Bottom-drawer content stays anchored\n * to the shell's stable bottom edge throughout that transition. The app owns\n * each `collapsed` flag; the collapse is pure CSS (no wire). See\n * `docs/23-app-layouts.md` §3.3.\n */\nexport function Workbench({\n  id,\n  label,\n  main,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  className = '',\n  slot,\n}: WorkbenchProps) {\n  return (\n    <section\n      class={`kui-workbench ${className}`.trim()}\n      id={id}\n      data-component=\"workbench\"\n      aria-label={label}\n      slot={slot}\n    >\n      {leftRail && (\n        <aside\n          class=\"kui-workbench__rail kui-workbench__rail--left\"\n          data-workbench-rail=\"left\"\n          data-collapsed={String(leftRail.collapsed ?? false)}\n          data-separator={leftRail.separator ?? 'auto'}\n          data-collapse-motion={leftRail.collapseMotion ?? 'slide'}\n          data-content-overflow={leftRail.contentOverflow ?? 'clip'}\n          data-presentation={leftRail.presentation ?? 'inline'}\n          aria-label={leftRail.label || undefined}\n          aria-hidden={leftRail.presentation === 'hidden' ? 'true' : undefined}\n          style={\n            leftRail.size\n              ? `--kui-workbench-rail-width: ${leftRail.size}px`\n              : undefined\n          }\n        >\n          <div class=\"kui-workbench__panel-content\">{leftRail.content}</div>\n        </aside>\n      )}\n      {leftRail?.collapsed &&\n        leftRail.restoreControl &&\n        leftRail.presentation !== 'hidden' && (\n          <div\n            class=\"kui-workbench__restore\"\n            data-panel=\"left\"\n            data-position={leftRail.restorePosition ?? 'bottom-start'}\n          >\n            {leftRail.restoreControl}\n          </div>\n        )}\n      <div class=\"kui-workbench__center\">\n        <div class=\"kui-workbench__main\" data-workbench-main>\n          {main}\n        </div>\n        {bottomDrawer && (\n          <section\n            class=\"kui-workbench__drawer\"\n            data-workbench-drawer\n            data-collapsed={String(bottomDrawer.collapsed ?? false)}\n            data-separator={bottomDrawer.separator ?? 'auto'}\n            data-collapse-motion={bottomDrawer.collapseMotion ?? 'slide'}\n            data-content-overflow={bottomDrawer.contentOverflow ?? 'clip'}\n            data-presentation={bottomDrawer.presentation ?? 'inline'}\n            aria-label={bottomDrawer.label || undefined}\n            aria-hidden={\n              bottomDrawer.presentation === 'hidden' ? 'true' : undefined\n            }\n            style={\n              bottomDrawer.size\n                ? `--kui-workbench-drawer-height: ${bottomDrawer.size}px`\n                : undefined\n            }\n          >\n            <div class=\"kui-workbench__panel-content\">\n              {bottomDrawer.content}\n            </div>\n          </section>\n        )}\n        {bottomDrawer?.collapsed &&\n          bottomDrawer.restoreControl &&\n          bottomDrawer.presentation !== 'hidden' && (\n            <div\n              class=\"kui-workbench__restore\"\n              data-panel=\"bottom\"\n              data-position={bottomDrawer.restorePosition ?? 'bottom-end'}\n            >\n              {bottomDrawer.restoreControl}\n            </div>\n          )}\n      </div>\n      {rightRail && (\n        <aside\n          class=\"kui-workbench__rail kui-workbench__rail--right\"\n          data-workbench-rail=\"right\"\n          data-collapsed={String(rightRail.collapsed ?? false)}\n          data-separator={rightRail.separator ?? 'auto'}\n          data-collapse-motion={rightRail.collapseMotion ?? 'slide'}\n          data-content-overflow={rightRail.contentOverflow ?? 'clip'}\n          data-presentation={rightRail.presentation ?? 'inline'}\n          aria-label={rightRail.label || undefined}\n          aria-hidden={rightRail.presentation === 'hidden' ? 'true' : undefined}\n          style={\n            rightRail.size\n              ? `--kui-workbench-rail-width: ${rightRail.size}px`\n              : undefined\n          }\n        >\n          <div class=\"kui-workbench__panel-content\">{rightRail.content}</div>\n        </aside>\n      )}\n      {rightRail?.collapsed &&\n        rightRail.restoreControl &&\n        rightRail.presentation !== 'hidden' && (\n          <div\n            class=\"kui-workbench__restore\"\n            data-panel=\"right\"\n            data-position={rightRail.restorePosition ?? 'bottom-end'}\n          >\n            {rightRail.restoreControl}\n          </div>\n        )}\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/workbench.tsx"],"names":[],"mappings":"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","file":"workbench.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  clampRegionSize,\n  type ResizableRegionAxis,\n  type ResizableRegionCollapseMotion,\n  type ResizableRegionContentOverflow,\n  type ResizableRegionEdge,\n  type ResizableRegionPresentation,\n  type ResizableRegionRestorePosition,\n  type ResizableRegionSeparator,\n} from './resizable-region.js';\nimport { ResizeGrip } from './resize-grip.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport {\n  WORKBENCH_MAIN_MIN_HEIGHT,\n  WORKBENCH_MAIN_MIN_SIZE,\n  WORKBENCH_RESIZE_DEFAULTS,\n  type WorkbenchPanelKey,\n  workbenchRegionId,\n} from './workbench-resize.js';\n\n/**\n * The Workbench container breakpoint below which a panel presents as an\n * overlay: `narrow` (704px or less) or `compact` (448px or less) — the same\n * breakpoints as `ResizableRegion`'s `responsiveFillAt`.\n */\nexport type WorkbenchResponsiveOverlayAt = 'compact' | 'narrow';\n\n/** Drag-resize limits for a resizable Workbench panel, in px. */\nexport interface WorkbenchPanelResizable {\n  /** Smallest size (default 180 for a rail, 120 for the drawer). */\n  min?: number;\n  /** Largest size (default 480). */\n  max?: number;\n}\n\n/** A collapsible Workbench panel — a side rail or the bottom drawer. */\nexport interface WorkbenchPanel {\n  content: KerfUiContent;\n  /** Whether the panel is currently collapsed (the app owns this). */\n  collapsed?: boolean;\n  /**\n   * Rail width, or drawer height, in px. Overrides the CSS default. For a\n   * resizable panel it is the current size (default 280 for a rail, 220 for\n   * the drawer), clamped to the limits; the app owns it and `wireWorkbench`\n   * reports each resize.\n   */\n  size?: number;\n  /**\n   * Opt in to drag and keyboard resizing on the panel's inner separator:\n   * `true` for the default limits, or `{ min, max }`. Off by default. Pair it\n   * with `wireWorkbench` from `@kerfjs/ui/wire-workbench`.\n   */\n  resizable?: boolean | WorkbenchPanelResizable;\n  /** Accessible name for the panel region. */\n  label?: string;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /**\n   * Present the panel as an overlay, without a separator, below a Workbench\n   * container breakpoint, and inline above it — the CSS decides, so the app\n   * needs no device-class check. A rail overlays from its side at full\n   * height; the bottom drawer overlays the bottom of the work-area column.\n   */\n  responsiveOverlayAt?: WorkbenchResponsiveOverlayAt;\n  /**\n   * Control shown while collapsed, in a safe-area-aware corner of the\n   * Workbench (not the viewport); the bottom drawer's sits in the work-area\n   * column.\n   */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n}\n\nexport interface WorkbenchProps {\n  /**\n   * The Workbench's `id`. Each panel's `id` derives from it —\n   * `<id>-left-rail`, `<id>-right-rail`, `<id>-bottom-drawer` — so a toggle\n   * can name the panel it shows and hides with `aria-controls`.\n   */\n  id: string;\n  label: string;\n  /** The central work area. */\n  main: KerfUiContent;\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  bottomDrawer?: WorkbenchPanel;\n  /**\n   * Minimum width, in px, the work area keeps beside the inline rails, fixed\n   * or `resizable` (default 320; `0` turns it off). Resizing a rail stops\n   * where the work area would drop below it, and inline rails shrink\n   * proportionally when the Workbench gets narrower. Workbenches without a\n   * rail ignore it.\n   */\n  mainMinSize?: number;\n  /**\n   * Minimum height, in px, the work area keeps above an inline bottom drawer,\n   * fixed or `resizable` (default 120; `0` turns it off) — the drawer's\n   * counterpart of `mainMinSize`. Resizing the drawer stops where the work\n   * area would drop below it, and the drawer shrinks when the Workbench gets\n   * shorter. Workbenches without a drawer ignore it.\n   */\n  mainMinHeight?: number;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ninterface ResolvedResize {\n  regionId: string;\n  axis: ResizableRegionAxis;\n  edge: ResizableRegionEdge;\n  size: number;\n  min: number;\n  max: number;\n}\n\n/**\n * Each panel's separator is its inner edge. Growing the left rail moves that\n * edge toward the inline end; growing the right rail or the drawer moves it\n * toward the start — the same edge vocabulary `ResizableRegion` uses.\n */\nconst EDGES: Record<WorkbenchPanelKey, ResizableRegionEdge> = {\n  leftRail: 'end',\n  rightRail: 'start',\n  bottomDrawer: 'start',\n};\n\nconst DEFAULT_LABELS: Record<WorkbenchPanelKey, string> = {\n  leftRail: 'left rail',\n  rightRail: 'right rail',\n  bottomDrawer: 'bottom drawer',\n};\n\nfunction resolveResize(\n  id: string,\n  key: WorkbenchPanelKey,\n  panel: WorkbenchPanel,\n): ResolvedResize | undefined {\n  if (!panel.resizable) return undefined;\n  const defaults = WORKBENCH_RESIZE_DEFAULTS[key];\n  const limits = panel.resizable === true ? {} : panel.resizable;\n  const min = limits.min ?? defaults.min;\n  const max = Math.max(min, limits.max ?? defaults.max);\n  return {\n    regionId: workbenchRegionId(id, key),\n    axis: key === 'bottomDrawer' ? 'vertical' : 'horizontal',\n    edge: EDGES[key],\n    size: clampRegionSize(panel.size ?? defaults.size, min, max),\n    min,\n    max,\n  };\n}\n\n/** The attributes a resizable panel adds for the resize wiring to read. */\nconst resizeAttributes = (resize: ResolvedResize | undefined) =>\n  resize\n    ? {\n        'data-resizable': 'true',\n        'data-region-id': resize.regionId,\n        'data-axis': resize.axis,\n        'data-edge': resize.edge,\n      }\n    : {};\n\n/**\n * A resizable panel's size lives in the resize wiring's track property, so a\n * drag or key press resizes the panel before the app re-renders; the CSS maps\n * it onto the rail width or drawer height.\n */\nfunction panelStyle(\n  panel: WorkbenchPanel,\n  resize: ResolvedResize | undefined,\n  sizeProperty: string,\n) {\n  if (resize) return `--kui-resizable-region-size:${resize.size}px`;\n  return panel.size ? `${sizeProperty}: ${panel.size}px` : undefined;\n}\n\n/**\n * The separator a resizable panel owns: the same focusable `role=\"separator\"`\n * contract a `ResizableRegion` handle carries, so one resize wiring drives\n * both. It leaves the tab order while the panel is collapsed or not inline.\n */\nfunction PanelHandle({\n  panel,\n  resize,\n  label,\n}: {\n  panel: WorkbenchPanel;\n  resize: ResolvedResize;\n  label: string;\n}) {\n  const inert =\n    Boolean(panel.collapsed) || (panel.presentation ?? 'inline') !== 'inline';\n  return (\n    <div\n      class=\"kui-workbench__handle\"\n      role=\"separator\"\n      tabindex={inert ? '-1' : '0'}\n      aria-label={`Resize ${label}`}\n      aria-orientation={\n        resize.axis === 'horizontal' ? 'vertical' : 'horizontal'\n      }\n      aria-valuemin={resize.min}\n      aria-valuemax={resize.max}\n      aria-valuenow={resize.size}\n      aria-hidden={inert ? 'true' : undefined}\n      data-kui-resize-handle\n      data-region-id={resize.regionId}\n    >\n      <span class=\"kui-workbench__handle-icon\" aria-hidden=\"true\">\n        <ResizeGrip axis={resize.axis} />\n      </span>\n    </div>\n  );\n}\n\n/**\n * A collapsed panel leaves the accessibility tree as a whole, like a collapsed\n * `CollapsiblePanel`: its content and separator are already inert or hidden,\n * so the labeled landmark would otherwise stay behind, empty, for a screen\n * reader to land on. Its restore control renders outside it and stays\n * reachable.\n */\nfunction hiddenFromAccessibility(panel: WorkbenchPanel) {\n  return panel.collapsed || panel.presentation === 'hidden'\n    ? ('true' as const)\n    : undefined;\n}\n\nfunction Rail({\n  id,\n  side,\n  panel,\n}: {\n  id: string;\n  side: 'left' | 'right';\n  panel: WorkbenchPanel;\n}) {\n  const key: WorkbenchPanelKey = side === 'left' ? 'leftRail' : 'rightRail';\n  const resize = resolveResize(id, key, panel);\n  return (\n    <aside\n      id={workbenchRegionId(id, key)}\n      class={`kui-workbench__rail kui-workbench__rail--${side}`}\n      data-workbench-rail={side}\n      data-collapsed={String(panel.collapsed ?? false)}\n      data-separator={panel.separator ?? 'auto'}\n      data-collapse-motion={panel.collapseMotion ?? 'slide'}\n      data-content-overflow={panel.contentOverflow ?? 'clip'}\n      data-presentation={panel.presentation ?? 'inline'}\n      data-responsive-overlay-at={panel.responsiveOverlayAt}\n      {...resizeAttributes(resize)}\n      aria-label={panel.label || undefined}\n      aria-hidden={hiddenFromAccessibility(panel)}\n      inert={Boolean(panel.collapsed)}\n      style={panelStyle(panel, resize, '--kui-workbench-rail-width')}\n    >\n      <div\n        class=\"kui-workbench__panel-content\"\n        inert={Boolean(panel.collapsed)}\n      >\n        {panel.content}\n      </div>\n      {resize && (\n        <PanelHandle\n          panel={panel}\n          resize={resize}\n          label={panel.label || DEFAULT_LABELS[key]}\n        />\n      )}\n    </aside>\n  );\n}\n\nfunction Drawer({ id, panel }: { id: string; panel: WorkbenchPanel }) {\n  const resize = resolveResize(id, 'bottomDrawer', panel);\n  return (\n    <section\n      id={workbenchRegionId(id, 'bottomDrawer')}\n      class=\"kui-workbench__drawer\"\n      data-workbench-drawer\n      data-collapsed={String(panel.collapsed ?? false)}\n      data-separator={panel.separator ?? 'auto'}\n      data-collapse-motion={panel.collapseMotion ?? 'slide'}\n      data-content-overflow={panel.contentOverflow ?? 'clip'}\n      data-presentation={panel.presentation ?? 'inline'}\n      data-responsive-overlay-at={panel.responsiveOverlayAt}\n      {...resizeAttributes(resize)}\n      aria-label={panel.label || undefined}\n      aria-hidden={hiddenFromAccessibility(panel)}\n      inert={Boolean(panel.collapsed)}\n      style={panelStyle(panel, resize, '--kui-workbench-drawer-height')}\n    >\n      <div\n        class=\"kui-workbench__panel-content\"\n        inert={Boolean(panel.collapsed)}\n      >\n        {panel.content}\n      </div>\n      {resize && (\n        <PanelHandle\n          panel={panel}\n          resize={resize}\n          label={panel.label || DEFAULT_LABELS.bottomDrawer}\n        />\n      )}\n    </section>\n  );\n}\n\n/** A collapsed panel's restore control, outside the clipped panel. */\nfunction restore(\n  panel: WorkbenchPanel | undefined,\n  side: 'left' | 'right' | 'bottom',\n  position: ResizableRegionRestorePosition,\n) {\n  if (\n    !panel?.collapsed ||\n    !panel.restoreControl ||\n    panel.presentation === 'hidden'\n  )\n    return '';\n  return (\n    <div\n      class=\"kui-workbench__restore\"\n      data-panel={side}\n      data-position={panel.restorePosition ?? position}\n    >\n      {panel.restoreControl}\n    </div>\n  );\n}\n\n/**\n * The Xcode-like multi-panel workspace: a collapsible left rail, right rail, and\n * bottom drawer around a central work area (any absent). Collapsing snaps the\n * panel's track to zero in one reflow while its fixed-size content slides out via\n * a composited transform — the instant-width / sliding-content technique, so the\n * work area relayouts once, not per frame. Bottom-drawer content stays anchored\n * to the shell's stable bottom edge throughout that transition. The app owns\n * each `collapsed` flag; the collapse is pure CSS. A collapsed panel renders\n * `inert` and `aria-hidden`, so neither Tab nor assistive technology reaches\n * controls that have slid out of view or an empty landmark (its restore control\n * lives outside it and stays reachable). A panel may opt in to drag and keyboard resizing with\n * `resizable`, which `wireWorkbench` drives. See `docs/23-app-layouts.md` §3.3.\n */\nexport function Workbench({\n  id,\n  label,\n  main,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  mainMinSize = WORKBENCH_MAIN_MIN_SIZE,\n  mainMinHeight = WORKBENCH_MAIN_MIN_HEIGHT,\n  className = '',\n  slot,\n}: WorkbenchProps) {\n  // Each work-area minimum applies only on an axis a panel shares with it:\n  // the width beside a rail, the height above the drawer.\n  const px = (value: number) => Math.max(0, Math.round(value));\n  const mainMin = leftRail || rightRail ? px(mainMinSize) : undefined;\n  const mainMinBlock = bottomDrawer ? px(mainMinHeight) : undefined;\n  const style = [\n    mainMin === undefined ? '' : `--_kui-workbench-main-min-width:${mainMin}px`,\n    mainMinBlock === undefined\n      ? ''\n      : `--_kui-workbench-main-min-height:${mainMinBlock}px`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <section\n      class={`kui-workbench ${className}`.trim()}\n      id={id}\n      data-component=\"workbench\"\n      data-main-min-size={mainMin === undefined ? undefined : String(mainMin)}\n      data-main-min-height={\n        mainMinBlock === undefined ? undefined : String(mainMinBlock)\n      }\n      style={style || undefined}\n      aria-label={label}\n      slot={slot}\n    >\n      {leftRail && <Rail id={id} side=\"left\" panel={leftRail} />}\n      {restore(leftRail, 'left', 'bottom-start')}\n      <div class=\"kui-workbench__center\">\n        <div class=\"kui-workbench__main\" data-workbench-main>\n          {main}\n        </div>\n        {bottomDrawer && <Drawer id={id} panel={bottomDrawer} />}\n        {restore(bottomDrawer, 'bottom', 'bottom-end')}\n      </div>\n      {rightRail && <Rail id={id} side=\"right\" panel={rightRail} />}\n      {restore(rightRail, 'right', 'bottom-end')}\n    </section>\n  );\n}\n"]}

package/docs/accessibility.md

@@ -12,6 +12,7 @@ These are normative contracts for package components and consuming applications.
 - `wireNavStack` moves focus into every newly active top view and remembers the last focused descendant of each mounted view for pop restoration. Mark a preferred initial heading or control with `data-nav-focus` (and `tabindex="-1"` when it is not normally tabbable); otherwise the helper uses the first enabled focusable descendant, then a programmatically focusable view-container fallback.
 - In any `.kui-pane`, menu rows, `ListHeader` actions, and toolbar groups keep a minimum 44px target in both dimensions. A `ListHeader` fills the available inline width and keeps that action at the logical end, including in RTL. Its action visual defaults to 18px through `--kui-list-header-action-icon-size` inside a fitted 36px hover square; a transparent hit layer extends the pointer target to at least 44 × 44 around that square without moving layout or enlarging the painted surface. Compact headers are 36px tall like the rest of the compact List family, so their action target is 44px wide and clamped to the 36px header height instead of reaching into a neighboring row. Do not reduce the target to the visible icon, and do not force the button itself to 44px.
 - `LoadingSpinner` is either labeled (`role="img"`) or hidden. Its rotation stops for reduced motion.
+- An unlabeled `Skeleton` (including the value slots a component's `placeholder` prop renders) is decorative loading chrome: it is `aria-hidden`, conveys no information a user needs to act on, and is deliberately exempt from the WCAG 3:1 non-text-contrast target. Inside a solid `Badge` it stays subtle (about 2.1–4.4:1 in light, 2.4–2.8:1 in dark, depending on tone); `tests/browser/tone-contrast.spec.ts` holds those values as a regression floor rather than an accessibility threshold. Announce loading through a labeled `Skeleton`, `LoadingSpinner`, or `aria-busy` on the owning region, never through the skeleton's visibility.
 - `StateBanner` defaults to polite `role="status"`; use `urgency="alert"` only for an attention-requiring failure. Its optional `badge` is persistent inline status/count content beside the title and is announced as part of the banner; keep it terse and do not rely on color alone for its meaning.
 - `EmptyState` reports busy state through `aria-busy` and never relies on an illustration as its label.
 - `Select` follows the Web Awesome host's standard `input`/`change` events. Application tests verify the live `value`, focus, and events—not attributes alone. Its decorative option icons and value-dependent selected content remain present after controlled rerenders, so the visible choice does not silently lose its non-text cue.
@@ -120,6 +121,15 @@ The handle exposes separator role, orientation, name, minimum, maximum, and curr
   them after a re-render writes the rendered props back, so assistive
   technology never reads an unclamped size between interactions (the
   disposer disconnects both observers);
+- a truthful value below the minimum: when the container shows the track at
+  less than `min` (a narrowing `Workbench` squeezes its resizable rails), the
+  handle reports that shown size in `aria-valuenow` and pins `aria-valuemin`
+  and `aria-valuemax` to it — WAI-ARIA requires the value to lie inside the
+  range, and the separator cannot move a track its container holds. A pinned
+  separator — squeezed, or with a reachable range collapsed to one size —
+  commits nothing: arrow keys, Home/End, and drags leave the app's size (and
+  its storage) as it was, so the track returns to it, with the rendered range,
+  once it has room;
 - a whole hit target and focus ring at a clamped edge: when the separator has
   less room past it than the handle's 10px overhang (a parent clamps the track
   to its own edge), the region carries `data-handle-inset` and the handle sits
@@ -162,7 +172,10 @@ forced to a dark color scheme, but it is **not** in the top layer, so it never
 covers dialogs, popovers, or other overlays. Its children are the app's controls
 (normally `ToolbarControlGroup`s), which keep their own names, focus, and
 keyboard behavior; the application owns their actions, the toolbar's visibility,
-and — via `position` and `--kui-floating-toolbar-inset` — where it sits.
+and — via `position` and `--kui-floating-toolbar-inset`, set on the toolbar
+or an ancestor — where it sits. Inside a `Workbench`, `CollapsiblePanel`, or
+`ResizableRegion` `restoreControl` the restore corner owns the inset, so the
+toolbar floats from that corner.
 
 ## Tabs
 
@@ -180,8 +193,11 @@ that geometry; applications must not override its anatomy to create the split.
 presentations. Icon-only tabs keep the required `name` as the tab button's
 accessible name while visually hiding the duplicate label. A `pending` tab (known,
 still opening) keeps its visible name as the tab button's accessible name, so a
-trailing spinner's own label is not folded into it; like `placeholder`, it is
-`aria-busy`, disabled, out of the tab order, and not draggable. These props own
+trailing spinner's own label is not folded into it. It is `aria-busy` and stays
+selectable (in the roving tab order like a live tab), so the application can
+show placeholder content in its panel until loading completes; its close
+button is disabled and hidden and it is not draggable. A `placeholder` tab
+(unknown) is instead disabled, out of the tab order, and not draggable. These props own
 component appearance only; the application still owns the bar's outer placement.
 `AppTab.rootAttributes` accepts application `data-*` metadata only; runtime
 filtering rejects roles plus case variants of component- or wiring-owned
@@ -192,8 +208,11 @@ and must not contain interactive descendants.
 activation, same-bar pointer reordering, `Alt+Shift+ArrowLeft/ArrowRight`
 reordering, focus restoration, scroll-into-view, and pointer-proximity
 autoscroll at either horizontal edge. Edge autoscroll is direct manipulation,
-stops on drop/drag end/disposal, and does not change keyboard behavior. It
-returns a disposer.
+stops on drop/drag end/disposal, and does not change keyboard behavior. When
+the application changes a bar's selected tab without focus (adding and
+selecting a tab), the wiring scrolls that tab's strip — never the page — so
+the new selection is fully visible; a re-render that keeps the same selection
+leaves a strip the user scrolled where it is. It returns a disposer.
 
 Arrow / Home / End follow the ARIA Tabs **automatic-activation** pattern by
 default: they move roving focus and select the focused tab. If selection synchronously
@@ -276,15 +295,26 @@ and focus deliberately moved to another control; no app-level reopen callback is
 
 ## CollapsiblePanel / sidebar
 
-`CollapsiblePanel` is a labeled `aside` region that is `aria-hidden` while
-collapsed; its content slides via transform (disabled under reduced motion).
+`CollapsiblePanel` is a labeled `aside` region that renders `inert` and
+`aria-hidden` while collapsed, straight from the app's `collapsed` flag, so its
+controls leave the Tab order and the accessibility tree even while the content
+is still sliding out, and focusing one can never scroll clipped content back into
+view (`aria-hidden` alone left them focusable inside a hidden subtree). Its
+content slides via transform (disabled under reduced motion); `inert` does not
+affect rendering, so the slide still plays. A `restoreControl` renders outside
+the panel and stays reachable. A collapsed `ResizableRegion` renders `inert` and
+`aria-hidden` on the region itself the same way (its content wrapper is `inert`
+too, and its separator is already hidden and not displayed), so no empty
+labeled region landmark stays behind; its `restoreControl` stays outside the
+region.
 `CollapsiblePanelToggle` is a named button carrying `aria-expanded` and the
 standard per-side collapse/expand glyph (`PanelLeft*` / `PanelRight*` /
 `PanelBottom*`); place a collapse toggle inside the panel and an expand toggle in
 an always-visible location so it is reachable while collapsed. `wireSidebar()`
 moves focus into the panel when it opens and restores it to the trigger when it
-closes; a trigger inside the now-hidden panel hands focus to the panel's toggle
-outside it instead, so an app may render the expand toggle only while the panel
+closes; a trigger inside the now-inert panel hands focus to the panel's toggle
+outside it instead (and focus stranded there by a wide → compact crossing is
+rescued the same way), so an app may render the expand toggle only while the panel
 is collapsed. When a `deviceClass()` reports `compact`, an open panel becomes an overlay
 with a dismissable backdrop, Escape and backdrop-click collapse it, and Tab is
 trapped within it (the ARIA dialog pattern). That modal state only ever begins
@@ -293,6 +323,21 @@ crossing, every panel starts collapsed, so no page load or resize traps focus. T
 signal, the panels, their sizes, and content; the wire may persist the collapsed
 state per panel.
 
+## Workbench
+
+Each `Workbench` rail and drawer is a labeled region (`aside` for a rail, `section`
+for the drawer). While a panel is collapsed the region itself renders `inert` and
+`aria-hidden="true"`, and so does not linger as an empty landmark, and its content
+wrapper is `inert`, all rendered from the app's `collapsed` flag, so its controls
+leave the Tab order and the accessibility tree even while the content is still
+sliding out, and focusing one can never scroll clipped content back into view. The panel's `restoreControl` renders
+outside that content and stays reachable; a resizable panel's separator also leaves
+the Tab order while collapsed or not inline. `wireWorkbench`, given a panel's
+`collapsed` signal, returns focus stranded in a closing panel to the control that
+opened it, else the restore control, else a control whose `aria-controls` names the
+panel; an open overlay panel takes focus and keeps Tab inside it (the ARIA dialog
+pattern). See [`workbench.md`](workbench.md).
+
 ## Verification matrix
 
 For each changed component, inspect default, hover, focus, disabled, selected/pressed, busy/error, long-content, wide, narrow, light, dark, increased-contrast, reduced-motion, keyboard-only, and 200%-zoom states where applicable. DOM order must match reading and focus order, with no clipping or unreachable action.

package/docs/app-layouts.md

@@ -113,7 +113,18 @@ device in tests.
   selection).
 - **IDE (complex tool):** `Workbench` with a left navigator rail, a right
   inspector rail, and a bottom console drawer, each `collapsed` bound to a
-  signal. Only offer this `atLeast('desktop')`.
+  signal. Only offer this `atLeast('desktop')`. To let people size the
+  navigator or console, opt those panels in with `resizable` and call
+  `wireWorkbench` with their size signals and `deviceClass`; resizing is
+  suspended on `compact`, where the rails become overlay drawers — or give each
+  rail `responsiveOverlayAt: "narrow"` and let the Workbench's own width decide
+  when it overlays, with no device check; pass each rail's `collapsed` signal
+  to `wireWorkbench` so the overlay starts collapsed, takes focus and keeps Tab
+  inside it while open, and closes on Escape or an outside press. Inline
+  rails, fixed or resizable, leave the editor its `mainMinSize` (320px by
+  default) and shrink in proportion when the window narrows; the bottom drawer
+  leaves it `mainMinHeight` (120px by default) and shrinks when the window gets
+  shorter.
 - **Social app (tabbed):** `TabScaffold` with Home / Search / Profile tabs, each
   `content` a `NavStack`. On a tablet/desktop, render the same sections as a
   `Workbench` left rail instead of a bottom bar.