@k2b/ui 0.25.0 → 0.27.0

package/dist/ssr/layout/BottomSheet.js

@@ -23,6 +23,14 @@ export const bottomSheetOptions = {
   contentClassName: "k2b-panel-dialog-viewport k2b-bottom-sheet-viewport",
   initialFocus: sheetInitialFocus
 };
+
+/** A sheet on phones and a centered dialog from 48rem up, for decisions and forms; menus keep
+ * `bottomSheetOptions`. The stylesheet picks the mode with the phone media query, so the first
+ * frame is already right and a rotation or resize switches it in place, without a remount. */
+export const bottomSheetAdaptiveOptions = {
+  ...bottomSheetOptions,
+  panelClassName: `${bottomSheetOptions.panelClassName} is-adaptive`
+};
 function BottomSheetRoot(props) {
   const messages = useUiMessages();
   let pointer;

package/dist/ssr/layout/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\n/** Initial focus goes to the first input of the top sheet, otherwise to the\n * dialog element itself. Native `showModal()` focuses the first focusable\n * descendant, which is the drag handle; iOS shows a ring for that programmatic\n * focus, so the sheet moves it to the ring-less dialog before the next paint. */\nconst sheetInitialFocus = (dialog: HTMLDialogElement): HTMLElement => {\n  const input = dialog.lastElementChild?.querySelector<HTMLElement>(\n    \"input:not([type='hidden']):not([disabled]), textarea:not([disabled]), select:not([disabled]), [role='combobox']:not([disabled]):not([aria-disabled='true'])\",\n  );\n  if (input) return input;\n  dialog.tabIndex = -1;\n  return dialog;\n};\n\nexport const bottomSheetOptions = {\n  panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n  contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\n  initialFocus: sheetInitialFocus,\n} satisfies OpenDialogOptions;\n\nexport type BottomSheetProps = {\n  children: JSX.Element;\n  /** Pass dialogCore's render context requestDismiss, never the completion callback. */\n  onDismiss: () => void | Promise<void>;\n  dismissDisabled?: boolean;\n  dismissLabel?: string;\n  handle?: boolean;\n};\n\nfunction BottomSheetRoot(props: BottomSheetProps) {\n  const messages = useUiMessages();\n  let pointer: { id: number; y: number; releaseTextSelection: () => void } | undefined;\n  let suppressClick = false;\n  const dismiss = () => {\n    if (!props.dismissDisabled) void props.onDismiss();\n  };\n  return (\n    <PanelDialog>\n      <Show when={props.handle !== false}>\n        <button\n          type=\"button\"\n          class=\"k2b-bottom-sheet__handle\"\n          aria-label={props.dismissLabel ?? messages().close}\n          disabled={props.dismissDisabled}\n          onPointerDown={(event) => {\n            if (!event.isPrimary || event.button !== 0 || props.dismissDisabled) return;\n            suppressClick = false;\n            pointer = { id: event.pointerId, y: event.clientY, releaseTextSelection: suppressTextSelection(event.pointerId) };\n            event.currentTarget.setPointerCapture(event.pointerId);\n          }}\n          onPointerUp={(event) => {\n            if (pointer?.id !== event.pointerId) return;\n            const distance = event.clientY - pointer.y;\n            pointer.releaseTextSelection();\n            pointer = undefined;\n            // A drag must not turn into a second dismiss request through click.\n            suppressClick = Math.abs(distance) > 8;\n            if (distance > 60) dismiss();\n          }}\n          onPointerCancel={() => {\n            pointer?.releaseTextSelection();\n            pointer = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\n              pointer.releaseTextSelection();\n              pointer = undefined;\n              suppressClick = true;\n            }\n          }}\n          onClick={(event) => {\n            if (event.detail !== 0 && suppressClick) {\n              suppressClick = false;\n              return;\n            }\n            dismiss();\n          }}\n        >\n          <span aria-hidden=\"true\" />\n        </button>\n      </Show>\n      {props.children}\n    </PanelDialog>\n  );\n}\n\n/** Bottom-edge presentation; dialogCore continues to own all modal state. */\nconst BottomSheet = Object.assign(BottomSheetRoot, {\n  Header: PanelDialog.Header,\n  Body: PanelDialog.Body,\n  Footer: PanelDialog.Footer,\n  Section: PanelDialog.Section,\n  Tabs: PanelDialog.Tabs,\n});\nexport default BottomSheet;\n"],"mappings":";;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AAEzC,SAAS,qBAAqB,QAAQ,4BAA4B;AAClE,SAAS,aAAa,QAAQ,kBAAkB;AAChD,OAAO,WAAW,MAAM,eAAe;;AAEvC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAI,MAAyB,IAAkB;EACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAClD,6JACF,CAAC;EACD,IAAI,KAAK,EAAE,OAAO,KAAK;EACvB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;EACpB,OAAO,MAAM;AACf,CAAC;AAED,OAAO,MAAM,kBAAkB,GAAG;EAChC,cAAc,EAAE,mCAAmC;EACnD,gBAAgB,EAAE,qDAAqD;EACvE,YAAY,EAAE;AAChB,CAA6B;AAW7B,SAAS,eAAe,CAAC,KAAuB,EAAE;EAChD,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,IAAI,OAAgF;EACpF,IAAI,aAAa,GAAG,KAAK;EACzB,MAAM,OAAO,GAAG,MAAM;IACpB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;EACpD,CAAC;EACD,yBACG,WAAW;IAAA;MAAA,0BACT,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM,KAAK,KAAK;QAAA;QAAA;UAAA,2DAIlB,KAAK,CAAC,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,4CACxC,KAAK,CAAC,eAAe;QAAA;MAAA,IAuClC,KAAK,CAAC,QAAQ;IAAA;EAAA;AAGrB;;AAEA;AACA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;EACjD,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,IAAI,EAAE,WAAW,CAAC,IAAI;EACtB,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,OAAO,EAAE,WAAW,CAAC,OAAO;EAC5B,IAAI,EAAE,WAAW,CAAC;AACpB,CAAC,CAAC;AACF,eAAe,WAAW","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/BottomSheet.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\nimport { useUiMessages } from \"../intl/messages\";\nimport PanelDialog from \"./PanelDialog\";\n\n/** Initial focus goes to the first input of the top sheet, otherwise to the\n * dialog element itself. Native `showModal()` focuses the first focusable\n * descendant, which is the drag handle; iOS shows a ring for that programmatic\n * focus, so the sheet moves it to the ring-less dialog before the next paint. */\nconst sheetInitialFocus = (dialog: HTMLDialogElement): HTMLElement => {\n  const input = dialog.lastElementChild?.querySelector<HTMLElement>(\n    \"input:not([type='hidden']):not([disabled]), textarea:not([disabled]), select:not([disabled]), [role='combobox']:not([disabled]):not([aria-disabled='true'])\",\n  );\n  if (input) return input;\n  dialog.tabIndex = -1;\n  return dialog;\n};\n\nexport const bottomSheetOptions = {\n  panelClassName: \"k2b-dialog k2b-bottom-sheet-frame\",\n  contentClassName: \"k2b-panel-dialog-viewport k2b-bottom-sheet-viewport\",\n  initialFocus: sheetInitialFocus,\n} satisfies OpenDialogOptions;\n\n/** A sheet on phones and a centered dialog from 48rem up, for decisions and forms; menus keep\n * `bottomSheetOptions`. The stylesheet picks the mode with the phone media query, so the first\n * frame is already right and a rotation or resize switches it in place, without a remount. */\nexport const bottomSheetAdaptiveOptions = {\n  ...bottomSheetOptions,\n  panelClassName: `${bottomSheetOptions.panelClassName} is-adaptive`,\n} satisfies OpenDialogOptions;\n\nexport type BottomSheetProps = {\n  children: JSX.Element;\n  /** Pass dialogCore's render context requestDismiss, never the completion callback. */\n  onDismiss: () => void | Promise<void>;\n  dismissDisabled?: boolean;\n  dismissLabel?: string;\n  handle?: boolean;\n};\n\nfunction BottomSheetRoot(props: BottomSheetProps) {\n  const messages = useUiMessages();\n  let pointer: { id: number; y: number; releaseTextSelection: () => void } | undefined;\n  let suppressClick = false;\n  const dismiss = () => {\n    if (!props.dismissDisabled) void props.onDismiss();\n  };\n  return (\n    <PanelDialog>\n      <Show when={props.handle !== false}>\n        <button\n          type=\"button\"\n          class=\"k2b-bottom-sheet__handle\"\n          aria-label={props.dismissLabel ?? messages().close}\n          disabled={props.dismissDisabled}\n          onPointerDown={(event) => {\n            if (!event.isPrimary || event.button !== 0 || props.dismissDisabled) return;\n            suppressClick = false;\n            pointer = { id: event.pointerId, y: event.clientY, releaseTextSelection: suppressTextSelection(event.pointerId) };\n            event.currentTarget.setPointerCapture(event.pointerId);\n          }}\n          onPointerUp={(event) => {\n            if (pointer?.id !== event.pointerId) return;\n            const distance = event.clientY - pointer.y;\n            pointer.releaseTextSelection();\n            pointer = undefined;\n            // A drag must not turn into a second dismiss request through click.\n            suppressClick = Math.abs(distance) > 8;\n            if (distance > 60) dismiss();\n          }}\n          onPointerCancel={() => {\n            pointer?.releaseTextSelection();\n            pointer = undefined;\n            suppressClick = true;\n          }}\n          onLostPointerCapture={() => {\n            if (pointer) {\n              pointer.releaseTextSelection();\n              pointer = undefined;\n              suppressClick = true;\n            }\n          }}\n          onClick={(event) => {\n            if (event.detail !== 0 && suppressClick) {\n              suppressClick = false;\n              return;\n            }\n            dismiss();\n          }}\n        >\n          <span aria-hidden=\"true\" />\n        </button>\n      </Show>\n      {props.children}\n    </PanelDialog>\n  );\n}\n\n/** Bottom-edge presentation; dialogCore continues to own all modal state. */\nconst BottomSheet = Object.assign(BottomSheetRoot, {\n  Header: PanelDialog.Header,\n  Body: PanelDialog.Body,\n  Footer: PanelDialog.Footer,\n  Section: PanelDialog.Section,\n  Tabs: PanelDialog.Tabs,\n});\nexport default BottomSheet;\n"],"mappings":";;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AAEzC,SAAS,qBAAqB,QAAQ,4BAA4B;AAClE,SAAS,aAAa,QAAQ,kBAAkB;AAChD,OAAO,WAAW,MAAM,eAAe;;AAEvC;AACA;AACA;AACA;AACA,MAAM,iBAAiB,GAAI,MAAyB,IAAkB;EACpE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAClD,6JACF,CAAC;EACD,IAAI,KAAK,EAAE,OAAO,KAAK;EACvB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;EACpB,OAAO,MAAM;AACf,CAAC;AAED,OAAO,MAAM,kBAAkB,GAAG;EAChC,cAAc,EAAE,mCAAmC;EACnD,gBAAgB,EAAE,qDAAqD;EACvE,YAAY,EAAE;AAChB,CAA6B;;AAE7B;AACA;AACA;AACA,OAAO,MAAM,0BAA0B,GAAG;EACxC,GAAG,kBAAkB;EACrB,cAAc,EAAE,GAAG,kBAAkB,CAAC,cAAc;AACtD,CAA6B;AAW7B,SAAS,eAAe,CAAC,KAAuB,EAAE;EAChD,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,IAAI,OAAgF;EACpF,IAAI,aAAa,GAAG,KAAK;EACzB,MAAM,OAAO,GAAG,MAAM;IACpB,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;EACpD,CAAC;EACD,yBACG,WAAW;IAAA;MAAA,0BACT,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,MAAM,KAAK,KAAK;QAAA;QAAA;UAAA,2DAIlB,KAAK,CAAC,YAAY,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,4CACxC,KAAK,CAAC,eAAe;QAAA;MAAA,IAuClC,KAAK,CAAC,QAAQ;IAAA;EAAA;AAGrB;;AAEA;AACA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;EACjD,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,IAAI,EAAE,WAAW,CAAC,IAAI;EACtB,MAAM,EAAE,WAAW,CAAC,MAAM;EAC1B,OAAO,EAAE,WAAW,CAAC,OAAO;EAC5B,IAAI,EAAE,WAAW,CAAC;AACpB,CAAC,CAAC;AACF,eAAe,WAAW","ignoreList":[]}

package/dist/ssr/layout/app-workspace-controller.js

@@ -1,5 +1,6 @@
 import { suppressTextSelection } from "../internal/text-selection";
-import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspacePanelVariable, appWorkspaceResizeLimits, fitAppWorkspacePaneSizes, normalizeAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, shouldCollapseAppWorkspaceSidebar } from "./app-workspace-state";
+import { prefersReducedMotion } from "../motion";
+import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspacePanelVariable, appWorkspaceResizeLimits, fitAppWorkspacePaneSizes, normalizeAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, shouldCollapseAppWorkspaceSidebar } from "./app-workspace-state";
 import { installScrollFades } from "./scroll-fade";
 const HANDLE_SELECTOR = "[data-app-workspace-resize]";
 const ROOT_SELECTOR = "[data-k2b-app-workspace]";
@@ -56,7 +57,16 @@ const controlledPanel = (root, handle) => {
   const panel = document.getElementById(controls);
   return panel?.closest(ROOT_SELECTOR) === root ? panel : null;
 };
-const controlsResizableRegion = (root, handle, kind) => (kind === "sidebar" ? sidebarElement(root) : controlledPanel(root, handle))?.dataset.workspaceResizable === "true";
+const flexibleLevel = pane => {
+  if (!pane.hasAttribute("data-workspace-level")) return false;
+  const widthClass = window.matchMedia("(min-width: 80rem)").matches ? "3" : window.matchMedia("(min-width: 48rem)").matches ? "2" : "1";
+  return pane.dataset.workspaceLevelLast?.split(" ").includes(widthClass) ?? false;
+};
+const levelsMain = handle => handle.closest(".k2b-app-workspace__main")?.hasAttribute("data-workspace-levels") ?? false;
+const controlsResizableRegion = (root, handle, kind) => {
+  const panel = kind === "sidebar" ? sidebarElement(root) : controlledPanel(root, handle);
+  return panel?.dataset.workspaceResizable === "true" && (!panel.hasAttribute("data-workspace-level") || isVisible(panel) && isVisible(handle) && !flexibleLevel(panel));
+};
 const panelId = handle => safeAppWorkspacePanelId(handle.dataset.workspacePanelId ?? "primary") || "primary";
 const numberData = (handle, key, fallback) => {
   const value = Number(handle.dataset[key]);
@@ -65,7 +75,11 @@ const numberData = (handle, key, fallback) => {
 const sizeLimits = (root, handle, kind) => {
   const controlled = controlledPanel(root, handle);
   const main = kind === "pane" ? handle.closest(".k2b-app-workspace__main") : mainElement(root);
-  const panes = main ? Array.from(main.querySelectorAll(".k2b-app-workspace__main-pane")).filter(pane => pane.closest(".k2b-app-workspace__main") === main && !pane.classList.contains("is-primary") && isVisible(pane)) : [];
+  const panes = main ? Array.from(main.querySelectorAll(".k2b-app-workspace__main-pane")).filter(pane => pane.closest(".k2b-app-workspace__main") === main && !pane.classList.contains("is-primary") && !flexibleLevel(pane) && isVisible(pane)) : [];
+  const separatorSize = kind === "pane" && main ? Array.from(main.querySelectorAll(`.k2b-app-workspace__resize${HANDLE_SELECTOR}`)).filter(separator => separator.closest(".k2b-app-workspace__main") === main && resizeKind(separator) === "pane" && isVisible(separator)).reduce((total, separator) => {
+    const style = getComputedStyle(separator);
+    return total + Math.max(0, separator.getBoundingClientRect().width + (Number.parseFloat(style.marginLeft) || 0) + (Number.parseFloat(style.marginRight) || 0));
+  }, 0) : 0;
   // Content ends before the detail track, so its width alone would shrink a
   // persisted panel again on every reconciliation. Measure from Content's
   // start to the workspace's inner end: this includes the detail column and
@@ -76,7 +90,7 @@ const sizeLimits = (root, handle, kind) => {
   return appWorkspaceResizeLimits({
     kind,
     workspaceSize: kind === "drawer" ? root.getBoundingClientRect().height : kind === "pane" && main ? main.getBoundingClientRect().width : content ? root.getBoundingClientRect().right - root.clientLeft - content.getBoundingClientRect().left : root.getBoundingClientRect().width,
-    reservedSize: kind === "detail" ? 8 : kind === "pane" ? panes.reduce((total, pane) => total + (pane === controlled ? 0 : elementSize(pane, "pane")), 0) : 0,
+    reservedSize: kind === "detail" ? 8 : kind === "pane" ? panes.reduce((total, pane) => total + (pane === controlled ? 0 : elementSize(pane, "pane")), 0) + separatorSize : 0,
     min: numberData(handle, "workspaceMinSize", defaultMin),
     max: numberData(handle, "workspaceMaxSize", defaultMax),
     sidebarCollapsible: kind === "sidebar" && sidebarCollapsible(root)
@@ -139,6 +153,18 @@ const reconcilePanes = (root, layoutState, active = null) => {
   if (!main || !isVisible(main)) return;
   const handles = rootElements(root, HANDLE_SELECTOR).filter(handle => resizeKind(handle) === "pane" && controlsResizableRegion(root, handle, "pane"));
   if (!handles.length) return;
+  if (main.hasAttribute("data-workspace-levels")) {
+    // CSS owns the multi-level fit, including a flexible shown-last pane.
+    // Keep preferences intact when the window temporarily has less room.
+    for (const handle of handles) {
+      const min = numberData(handle, "workspaceMinSize", APP_WORKSPACE_PANE_MIN);
+      const max = Math.max(min, numberData(handle, "workspaceMaxSize", APP_WORKSPACE_PANE_MAX));
+      const preferred = active?.moved && active.handle === handle ? active.liveSize : layoutState.paneWidths?.[panelId(handle)];
+      if (preferred !== undefined) root.style.setProperty(appWorkspacePanelVariable("pane", panelId(handle)), `${clamp(preferred, min, max)}px`);
+      updateHandleValue(root, handle, "pane", currentSize(root, handle, "pane"));
+    }
+    return;
+  }
   const controlled = new Set(handles.map(handle => controlledPanel(root, handle)).filter(Boolean));
   const fixedWidth = Array.from(main.querySelectorAll(".k2b-app-workspace__main-pane")).filter(pane => pane.closest(".k2b-app-workspace__main") === main && !pane.classList.contains("is-primary") && isVisible(pane) && !controlled.has(pane)).reduce((total, pane) => total + elementSize(pane, "pane"), 0);
   const fits = handles.flatMap(handle => {
@@ -267,27 +293,43 @@ export const installAppWorkspaceController = (options = {}) => {
     if (control.matches("a[href]") || control.closest(ITEM_SELECTOR)) closeOverlay("kept");
   };
   const onOverlayKeyDown = event => {
-    if (!overlay || event.defaultPrevented) return;
+    if (event.defaultPrevented) return;
     const target = eventElement(event);
     if (!target) return;
     // Escape also closes it when a click left focus on nothing, so on the body.
-    if (event.key === "Escape" && (overlay.sidebar.contains(target) || target === ownerDocument.body)) {
+    if (overlay && event.key === "Escape" && (overlay.sidebar.contains(target) || target === ownerDocument.body)) {
       event.preventDefault();
       closeOverlay("button");
       return;
     }
-    if (event.key !== "Tab" || !overlay.sidebar.contains(target)) return;
-    const stops = tabStopsIn(overlay.sidebar);
+    const aside = target.closest(detailSelector);
+    const panel = overlay?.sidebar ?? (phone?.matches && aside && !aside.hidden && phonePage(aside) && eventRoot.contains(aside) ? aside : null);
+    if (event.key !== "Tab") return;
+    if (!panel) {
+      // Focus outside an open phone page, on the body after a load or on chrome the page covers, enters the page.
+      // Dialogs and popovers keep their own Tab order.
+      const page = phone?.matches ? allRoots().flatMap(openDetails).find(phonePage) : undefined;
+      if (!page || ownerDocument.querySelector("dialog[open], [aria-modal='true']") || target.closest("[popover]")) return;
+      const stops = tabStopsIn(page);
+      event.preventDefault();
+      (event.shiftKey ? stops.at(-1) : stops[0])?.focus();
+      return;
+    }
+    if (!panel.contains(target)) return;
+    const stops = tabStopsIn(panel);
     const first = stops[0];
     const last = stops.at(-1);
     if (!first || !last) {
       event.preventDefault();
       return;
     }
-    if (event.shiftKey && (document.activeElement === first || document.activeElement === overlay.sidebar)) {
+    // Focus can also rest on an element that is no tab stop, such as a title focused as the panel opened.
+    const active = document.activeElement;
+    const before = (element, other) => Boolean(element && other && element.compareDocumentPosition(other) & Node.DOCUMENT_POSITION_FOLLOWING);
+    if (event.shiftKey && !stops.some(stop => before(stop, active))) {
       event.preventDefault();
       last.focus();
-    } else if (!event.shiftKey && document.activeElement === last) {
+    } else if (!event.shiftKey && !stops.some(stop => before(active, stop))) {
       event.preventDefault();
       first.focus();
     }
@@ -298,7 +340,6 @@ export const installAppWorkspaceController = (options = {}) => {
   const phone = typeof window.matchMedia === "function" ? window.matchMedia("(max-width: 47.999rem)") : null;
   const wide = typeof window.matchMedia === "function" ? window.matchMedia("(min-width: 48rem)") : null;
   const touchDrawer = typeof window.matchMedia === "function" ? window.matchMedia(`${COMPACT_QUERY} and (pointer: coarse)`) : null;
-  const reducedMotion = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
   const detailSelector = ".k2b-app-workspace__detail";
   const grabberSelector = ".k2b-app-workspace__detail-grabber";
   const detailHidden = new WeakMap();
@@ -445,7 +486,9 @@ export const installAppWorkspaceController = (options = {}) => {
       subtree: true
     });
   };
+  const phonePage = aside => aside.dataset.workspaceDetailPhone === "page";
   const setDetent = (aside, full) => {
+    if (phonePage(aside)) return;
     touchedDetails.add(aside);
     if (full) aside.dataset.workspaceDetailSheet = "full";else delete aside.dataset.workspaceDetailSheet;
     aside.querySelector(grabberSelector)?.setAttribute("aria-pressed", String(full));
@@ -466,7 +509,7 @@ export const installAppWorkspaceController = (options = {}) => {
   // edge, so the workspace clips while the panel moves (see the stylesheet).
   const slide = (root, aside) => {
     slides.get(root)?.();
-    if (!root.hasAttribute("data-workspace-motion") || reducedMotion?.matches || !wide?.matches) return;
+    if (!root.hasAttribute("data-workspace-motion") || prefersReducedMotion() || !wide?.matches) return;
     const end = () => {
       aside.removeEventListener("transitionend", onEnd);
       aside.removeEventListener("transitioncancel", onEnd);
@@ -489,12 +532,13 @@ export const installAppWorkspaceController = (options = {}) => {
     root.dataset.workspaceDetailSliding = "";
   };
   const revealItem = (root, aside, snapshot) => {
+    if (phone?.matches && phonePage(aside)) return;
     const pending = revealFrames.get(root);
     if (pending !== undefined) cancelAnimationFrame(pending);
     revealFrames.set(root, requestAnimationFrame(() => {
       revealFrames.delete(root);
       if (!aside.hidden && aside.isConnected && snapshot.item.isConnected && mainElement(root)?.contains(snapshot.item) && snapshot.item.closest(ROOT_SELECTOR) === root) {
-        const behavior = reducedMotion?.matches ? "auto" : "smooth";
+        const behavior = prefersReducedMotion() ? "auto" : "smooth";
         const main = mainElement(root);
         const cell = snapshot.cell;
         const target = cell?.isConnected && main?.contains(cell) ? cell : snapshot.item;
@@ -563,7 +607,7 @@ export const installAppWorkspaceController = (options = {}) => {
     if (aside.hidden) {
       if (pendingTitle?.aside === aside) cancelTitle();
       if (panelStep === aside) panelStep = null;
-      if (root.hasAttribute("data-workspace-motion") && !reducedMotion?.matches && wide?.matches) {
+      if (root.hasAttribute("data-workspace-motion") && !prefersReducedMotion() && wide?.matches) {
         // Closing holds the detail column until the slide ends; anchor after Main widens.
         const cancel = () => {
           root.removeEventListener("transitionend", onTransitionEnd);
@@ -734,6 +778,7 @@ export const installAppWorkspaceController = (options = {}) => {
     const aside = target?.closest(detailSelector);
     const root = aside?.closest(ROOT_SELECTOR);
     if (!target || !aside || !root || aside.hidden || !observedRoots.has(root) || target.closest(ROOT_SELECTOR) !== root) return;
+    if (phonePage(aside)) return;
     const grabber = target.closest(grabberSelector);
     if (!grabber && (!target.closest(".k2b-detail-panel__header") || target.closest("a, button, input, select, textarea, [role='button'], [contenteditable]:not([contenteditable='false'])"))) return;
     claimedDetailGestures.add(event);
@@ -759,7 +804,7 @@ export const installAppWorkspaceController = (options = {}) => {
     const target = eventElement(event);
     const grabber = target?.closest(grabberSelector);
     const aside = grabber?.closest(detailSelector);
-    if (!aside || aside.hidden || !phone?.matches || claimedToggleClicks.has(event)) return;
+    if (!aside || aside.hidden || phonePage(aside) || !phone?.matches || claimedToggleClicks.has(event)) return;
     claimedToggleClicks.add(event);
     if (suppressedClick === aside && event instanceof MouseEvent && event.detail !== 0) {
       event.preventDefault();
@@ -789,6 +834,7 @@ export const installAppWorkspaceController = (options = {}) => {
     const touch = event.touches[0];
     const root = aside?.closest(ROOT_SELECTOR);
     if (!target || !aside || !root || aside.hidden || !touch || !observedRoots.has(root) || target.closest(ROOT_SELECTOR) !== root) return;
+    if (phone?.matches && phonePage(aside)) return;
     if (phone?.matches && (verticalScroller(target, aside) ?? aside).scrollTop <= 0) {
       if (!ownsTouchGesture(target, aside, "sheet")) beginDetailDrag(aside, target, "sheet", touch.clientX, touch.clientY, touch.identifier);
     } else if (touchDrawer?.matches && closable(aside)) {
@@ -840,22 +886,27 @@ export const installAppWorkspaceController = (options = {}) => {
   const onDetailTouchEnd = event => {
     if (detailDrag && detailDrag.source !== "pointer") finishDetailDrag(event.type === "touchcancel");
   };
-  const onDetailDoubleClick = event => {
+  const onPanelDoubleClick = event => {
     const handle = resizeHandle(event);
     const root = handle?.closest(ROOT_SELECTOR);
-    if (!handle || !root || resizeKind(handle) !== "detail" || !workspaceResizable(root) || !controlsResizableRegion(root, handle, "detail")) return;
+    const kind = handle ? resizeKind(handle) : null;
+    if (!handle || !root || kind !== "detail" && kind !== "pane" || !workspaceResizable(root) || !controlsResizableRegion(root, handle, kind)) return;
+    const key = kind === "pane" ? "paneWidths" : "detailWidths";
     const widths = {
-      ...layoutState.detailWidths
+      ...layoutState[key]
     };
     delete widths[panelId(handle)];
     layoutState = {
       ...layoutState,
-      detailWidths: widths
+      [key]: widths
     };
-    const variable = appWorkspacePanelVariable("detail", panelId(handle));
+    const variable = appWorkspacePanelVariable(kind, panelId(handle));
     root.style.removeProperty(variable);
-    if (getComputedStyle(root).getPropertyValue(variable).trim()) root.style.setProperty(variable, `${numberData(handle, "workspaceDefaultSize", APP_WORKSPACE_DETAIL_DEFAULT)}px`);
-    updateHandleValue(root, handle, "detail", currentSize(root, handle, "detail"));
+    // An SSR ancestor may still supply the old preference until the next request.
+    if (getComputedStyle(root).getPropertyValue(variable).trim()) root.style.setProperty(variable, `${numberData(handle, "workspaceDefaultSize", kind === "pane" ? APP_WORKSPACE_PANE_DEFAULT : APP_WORKSPACE_DETAIL_DEFAULT)}px`);
+    // The siblings fit again around the default width, also in a Main without levels.
+    if (kind === "pane") reconcilePanes(root, layoutState);
+    updateHandleValue(root, handle, kind, currentSize(root, handle, kind));
     options.writeState?.(layoutState);
   };
   const stopScrollFades = installScrollFades(eventRoot);
@@ -885,6 +936,40 @@ export const installAppWorkspaceController = (options = {}) => {
     }
     options.writeState?.(layoutState);
   };
+
+  // A level resize starts from what is on screen. When the stored widths do
+  // not fit beside the flexible level, CSS shrinks the resizable levels (a
+  // level without a separator does not shrink), so a step from a shrunk width
+  // would land on a preference that shrinks again and jump. The visible
+  // resizable levels therefore take their rendered widths as preferences when
+  // a step really moves; then they fit, and the step moves exactly by its
+  // size. All widths are measured before any is written, because each write
+  // reflows the others.
+  const settleLevels = (root, handle) => {
+    const main = handle.closest(".k2b-app-workspace__main");
+    if (!main?.hasAttribute("data-workspace-levels")) return;
+    const widths = Array.from(main.querySelectorAll(HANDLE_SELECTOR)).filter(other => other.closest(".k2b-app-workspace__main") === main && resizeKind(other) === "pane").flatMap(other => {
+      const panel = controlledPanel(root, other);
+      return isVisible(panel) && !flexibleLevel(panel) && panel.dataset.workspaceResizable === "true" ? [{
+        id: panelId(other),
+        width: Math.round(elementSize(panel, "pane"))
+      }] : [];
+    });
+    for (const {
+      id,
+      width
+    } of widths) {
+      if (layoutState.paneWidths?.[id] === width) continue;
+      root.style.setProperty(appWorkspacePanelVariable("pane", id), `${width}px`);
+      layoutState = {
+        ...layoutState,
+        paneWidths: {
+          ...layoutState.paneWidths,
+          [id]: width
+        }
+      };
+    }
+  };
   const flushPointerMove = () => {
     if (resizeFrame !== null) {
       cancelAnimationFrame(resizeFrame);
@@ -893,8 +978,18 @@ export const installAppWorkspaceController = (options = {}) => {
     if (!active || pendingClient === null) return;
     const client = pendingClient;
     pendingClient = null;
-    active.moved ||= client !== active.startClient;
     const requested = active.startSize + (client - active.startClient) * active.direction;
+    // A press without movement, or a drag that the limits stop, changes no
+    // level preference, also not a sibling's.
+    if (!active.moved && client !== active.startClient && active.kind === "pane" && levelsMain(active.handle)) {
+      const {
+        min,
+        max
+      } = sizeLimits(active.root, active.handle, "pane");
+      if (clamp(requested, min, max) === Math.round(currentSize(active.root, active.handle, "pane"))) return;
+      settleLevels(active.root, active.handle);
+    }
+    active.moved ||= client !== active.startClient;
     // Below half the smallest visible width a hideable sidebar stays at its
     // minimum and previews hiding; dragging back out resumes the live width.
     const hiding = active.kind === "sidebar" && sidebarHideable(active.root) && requested < sizeLimits(active.root, active.handle, active.kind).min / 2;
@@ -1000,6 +1095,11 @@ export const installAppWorkspaceController = (options = {}) => {
     else if (kind !== "drawer" && event.key === "ArrowLeft") requested = collapsibleSidebar && current <= APP_WORKSPACE_SIDEBAR_MIN ? APP_WORKSPACE_SIDEBAR_COLLAPSED : current - step * direction;else if (kind !== "drawer" && event.key === "ArrowRight") requested = collapsibleSidebar && current <= APP_WORKSPACE_SIDEBAR_COLLAPSED ? layoutState.sidebarWidth ?? APP_WORKSPACE_SIDEBAR_MIN : current + step * direction;
     if (requested === null) return;
     event.preventDefault();
+    if (kind === "pane" && levelsMain(handle)) {
+      // A step that the limits stop changes no preference, also not a sibling's.
+      if (clamp(requested, min, max) === Math.round(current)) return;
+      settleLevels(root, handle);
+    }
     persistSize(handle, kind, applySize(root, handle, kind, requested));
     if (kind === "sidebar" || kind === "detail") reconcilePanes(root, layoutState);
   };
@@ -1007,6 +1107,32 @@ export const installAppWorkspaceController = (options = {}) => {
     const nested = Array.from(eventRoot.querySelectorAll(ROOT_SELECTOR));
     return eventRoot instanceof HTMLElement && eventRoot.matches(ROOT_SELECTOR) ? [eventRoot, ...nested] : nested;
   };
+  // Remember only attributes we own; application-set inert survives every transition.
+  const phonePageInerted = new Set();
+  const syncPhonePages = () => {
+    const regions = new Set();
+    if (phone?.matches) {
+      for (const root of allRoots()) {
+        if (!root.isConnected) continue;
+        for (const aside of openDetails(root).filter(phonePage)) {
+          for (let node = aside; node && node !== root; node = node.parentElement) {
+            const parent = node.parentElement;
+            if (parent) overlayRegions(parent, aside).forEach(region => regions.add(region));
+          }
+        }
+      }
+    }
+    phonePageInerted.forEach(region => {
+      if (regions.has(region)) return;
+      region.removeAttribute("inert");
+      phonePageInerted.delete(region);
+    });
+    regions.forEach(region => {
+      if (region.hasAttribute("inert")) return;
+      region.setAttribute("inert", "");
+      phonePageInerted.add(region);
+    });
+  };
   const roots = () => {
     // A hidden or zero-width workspace measures 0, which drives every limit
     // down to its minimum — reconciling one would overwrite its variables and
@@ -1125,12 +1251,13 @@ export const installAppWorkspaceController = (options = {}) => {
   };
   const layoutNode = node => node instanceof Element && (node.matches(LAYOUT_REGION_SELECTOR) || Boolean(node.querySelector(LAYOUT_REGION_SELECTOR)));
   const mutationObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(records => {
+    syncPhonePages();
     if (pendingTitle && (pendingTitle.aside.hidden || !pendingTitle.aside.isConnected)) cancelTitle();
     // Hiding or removing the sidebar, or its button, ends the overlay.
     if (overlay && (overlay.sidebar.hidden || !overlay.sidebar.isConnected || !overlay.toggle.isConnected)) closeOverlay("kept");
     const details = new Set();
     for (const record of records) {
-      if (record.type === "attributes" && record.target instanceof HTMLElement && record.target.matches(detailSelector) && !details.has(record.target)) {
+      if (record.type === "attributes" && record.attributeName === "hidden" && record.target instanceof HTMLElement && record.target.matches(detailSelector) && !details.has(record.target)) {
         details.add(record.target);
         detailTransition(record.target, detailHidden.get(record.target) ?? record.oldValue !== null);
       }
@@ -1152,7 +1279,7 @@ export const installAppWorkspaceController = (options = {}) => {
   eventRoot.addEventListener("focusin", onDetailFocusIn);
   eventRoot.addEventListener("pointerdown", onSheetPointerDown);
   eventRoot.addEventListener("click", onGrabberClick);
-  eventRoot.addEventListener("dblclick", onDetailDoubleClick);
+  eventRoot.addEventListener("dblclick", onPanelDoubleClick);
   window.addEventListener("pointermove", onSheetPointerMove);
   window.addEventListener("pointerup", onSheetPointerEnd);
   window.addEventListener("pointercancel", onSheetPointerEnd);
@@ -1163,19 +1290,24 @@ export const installAppWorkspaceController = (options = {}) => {
   eventRoot.addEventListener("touchend", onDetailTouchEnd);
   eventRoot.addEventListener("touchcancel", onDetailTouchEnd);
   compact?.addEventListener("change", onCompactChange);
+  phone?.addEventListener("change", syncPhonePages);
   eventRoot.addEventListener("keydown", onKeyDown);
   eventRoot.addEventListener("focusin", onFocusIn);
   window.addEventListener("resize", onResize);
+  syncPhonePages();
   syncObservedRoots();
   mutationObserver?.observe(eventRoot, {
     attributes: true,
     attributeOldValue: true,
-    attributeFilter: ["hidden"],
+    attributeFilter: ["hidden", "data-workspace-level-shown"],
     childList: true,
     subtree: true
   });
   scheduleReconcile();
   return () => {
+    phonePageInerted.forEach(region => region.removeAttribute("inert"));
+    phonePageInerted.clear();
+    phone?.removeEventListener("change", syncPhonePages);
     cancelTitle();
     pendingAnchors.forEach(cancel => cancel());
     slides.forEach(end => end());
@@ -1200,7 +1332,7 @@ export const installAppWorkspaceController = (options = {}) => {
     eventRoot.removeEventListener("focusin", onDetailFocusIn);
     eventRoot.removeEventListener("pointerdown", onSheetPointerDown);
     eventRoot.removeEventListener("click", onGrabberClick);
-    eventRoot.removeEventListener("dblclick", onDetailDoubleClick);
+    eventRoot.removeEventListener("dblclick", onPanelDoubleClick);
     window.removeEventListener("pointermove", onSheetPointerMove);
     window.removeEventListener("pointerup", onSheetPointerEnd);
     window.removeEventListener("pointercancel", onSheetPointerEnd);