@k2b/ui 0.30.0 → 0.32.0

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

@@ -1,6 +1,7 @@
 import { suppressTextSelection } from "../internal/text-selection";
 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 { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, 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_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspacePanelVariable, appWorkspaceResizeLimits, fitAppWorkspacePaneSizes, normalizeAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, shouldCollapseAppWorkspaceSidebar } from "./app-workspace-state";
+import { readAppWorkspaceWidth, resolveAppWorkspaceWidth } from "./app-workspace-width";
 import { installScrollFades } from "./scroll-fade";
 const HANDLE_SELECTOR = "[data-app-workspace-resize]";
 const ROOT_SELECTOR = "[data-k2b-app-workspace]";
@@ -25,7 +26,7 @@ const parkDetailDrawer = (aside, focus = false) => {
   detailDrawerContent(aside)?.style.removeProperty("--k2b-detail-space");
   const toggle = detailToggle(aside);
   toggle?.setAttribute("aria-expanded", "false");
-  if (focus) toggle?.focus({
+  if (focus) detailReturnControl(aside)?.focus({
     preventScroll: true
   });
 };
@@ -65,6 +66,8 @@ const sidebarHideable = root => sidebarElement(root)?.dataset.workspaceHideable
  * stays application state, so the controller only requests the change.
  */
 export const APP_WORKSPACE_SIDEBAR_HIDE_EVENT = "k2b-app-workspace-sidebar-hide";
+/** Asks the owning Detail to reopen its current available object. */
+export const APP_WORKSPACE_DETAIL_OPEN_EVENT = "k2b-app-workspace-detail-open";
 /** Asks the owning `AppWorkspace.Detail` to close; its `onClose` decides. */
 export const APP_WORKSPACE_DETAIL_CLOSE_EVENT = "k2b-app-workspace-detail-close";
 /**
@@ -79,6 +82,15 @@ const previewSidebarHidden = (root, hidden) => {
   if (hidden) sidebar.dataset.workspaceHidePreview = "true";else delete sidebar.dataset.workspaceHidePreview;
 };
 const isVisible = element => Boolean(element && !element.hidden && getComputedStyle(element).display !== "none");
+// A pane-bound head can be absent on a phone. The visible control in Main
+// that names this same detail remains its return target, within the same root.
+const detailReturnControl = aside => {
+  const root = workspaceRoot(aside);
+  if (!root) return undefined;
+  const shared = detailToggle(aside);
+  if (isVisible(shared ?? null) && shared && !shared.matches(":disabled")) return shared;
+  return rootElements(root, DETAIL_REQUEST_CONTROL_SELECTOR).find(control => control.matches(FOCUSABLE_SELECTOR) && !aside.contains(control) && !control.matches(":disabled, [inert]") && !control.closest("[inert]") && control.getAttribute("aria-controls")?.split(/\s+/).includes(aside.id) && control.getClientRects().length > 0);
+};
 const elementSize = (element, kind) => {
   if (!isVisible(element)) return 0;
   const rect = element.getBoundingClientRect();
@@ -121,8 +133,9 @@ const sizeLimits = (root, handle, kind, reserveMainMinimum = true) => {
   const content = kind === "detail" ? controlled?.closest(".k2b-app-workspace__content") : null;
   const defaultMin = kind === "sidebar" ? APP_WORKSPACE_SIDEBAR_MIN : kind === "pane" ? APP_WORKSPACE_PANE_MIN : kind === "detail" ? APP_WORKSPACE_DETAIL_MIN : APP_WORKSPACE_DRAWER_MIN;
   const defaultMax = kind === "sidebar" ? APP_WORKSPACE_SIDEBAR_MAX : kind === "pane" ? APP_WORKSPACE_PANE_MAX : kind === "detail" ? APP_WORKSPACE_DETAIL_MAX : APP_WORKSPACE_DRAWER_MAX;
+  const mainSpec = readAppWorkspaceWidth(mainElement(root)?.dataset.workspaceMainMin);
   const mainMinValue = cssState(root, "--k2b-workspace-main-min");
-  const mainMin = mainMinValue.endsWith("px") ? Number.parseFloat(mainMinValue) : APP_WORKSPACE_MAIN_MIN;
+  const mainMin = typeof mainSpec === "object" ? resolveAppWorkspaceWidth(mainSpec, root.getBoundingClientRect().width) : mainMinValue.endsWith("px") ? Number.parseFloat(mainMinValue) : APP_WORKSPACE_MAIN_MIN;
   const mainExtra = Math.max(0, (Number.isFinite(mainMin) ? mainMin : APP_WORKSPACE_MAIN_MIN) - APP_WORKSPACE_MAIN_MIN);
   const limits = appWorkspaceResizeLimits({
     kind,
@@ -213,18 +226,39 @@ const reconcilePanes = (root, layoutState, active = null) => {
     if (!isVisible(panel)) return [];
     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.root === root && active.kind === "pane" && active.handle === handle ? active.liveSize : layoutState.paneWidths?.[panelId(handle)] ?? numberData(handle, "workspaceDefaultSize", elementSize(panel, "pane"));
-    const desired = clamp(preferred, min, max);
+    const spec = readAppWorkspaceWidth(handle.dataset.workspaceDefaultSize) ?? elementSize(panel, "pane");
+    const preferred = active?.moved && active.root === root && active.kind === "pane" && active.handle === handle ? active.liveSize : layoutState.paneWidths?.[panelId(handle)];
+    const cssDefault = preferred === undefined && typeof spec !== "number";
+    if (cssDefault && root.style.getPropertyValue(appWorkspacePanelVariable("pane", panelId(handle))))
+      // Drop a previous live width (or an inherited SSR preference after reset).
+      root.style.setProperty(appWorkspacePanelVariable("pane", panelId(handle)), "initial");
+    // CSS has already applied this default and the pane-fit clamp, including
+    // subpixels. Reserve exactly that box when fitting other preferences;
+    // measuring must not turn a responsive default into a stored px width.
+    const requested = preferred ?? resolveAppWorkspaceWidth(spec, root.getBoundingClientRect().width);
+    const desired = cssDefault ? elementSize(panel, "pane") : clamp(requested, min, max);
     return [{
       desired,
       handle,
-      min
+      min: cssDefault ? desired : min,
+      cssDefault,
+      requested: clamp(requested, min, max),
+      configuredMin: min
     }];
   });
   if (!fits.length) return;
-  const sizes = fitAppWorkspacePaneSizes(fits, main.getBoundingClientRect().width - fixedWidth - APP_WORKSPACE_MAIN_MIN);
+  const budget = main.getBoundingClientRect().width - fixedWidth - APP_WORKSPACE_MAIN_MIN;
+  // Each share default clamps only against Main, not its resizable or non-resizable siblings. When panes
+  // together leave Main's primary region less than its minimum, fit them like stored widths, allowing subpixels.
+  if (fits.reduce((total, fit) => total + fit.desired, 0) > budget + 0.5) for (const fit of fits) if (fit.cssDefault) Object.assign(fit, {
+    cssDefault: false,
+    desired: fit.requested,
+    min: fit.configuredMin
+  });
+  const sizes = fitAppWorkspacePaneSizes(fits, budget);
   fits.forEach((fit, index) => {
-    root.style.setProperty(appWorkspacePanelVariable("pane", panelId(fit.handle)), `${sizes[index]}px`);
+    // Defaults stay CSS-owned; fit only saved or live preferences around them.
+    if (!fit.cssDefault) root.style.setProperty(appWorkspacePanelVariable("pane", panelId(fit.handle)), `${sizes[index]}px`);
   });
   fits.forEach((fit, index) => updateHandleValue(root, fit.handle, "pane", sizes[index]));
 };
@@ -313,14 +347,26 @@ export const installAppWorkspaceController = (options = {}) => {
     if (detailButton) {
       const root = workspaceRoot(detailButton);
       const aside = root ? controlledPanel(root, detailButton) : null;
-      if (!aside || aside.hidden || !detailWaiting(aside) || claimedToggleClicks.has(event)) return;
+      if (!aside || detailButton.matches(":disabled") || claimedToggleClicks.has(event)) return;
+      const reopenable = aside.dataset.workspaceDetailReopen === "true";
+      if (!reopenable && (aside.hidden || !detailWaiting(aside))) return;
       claimedToggleClicks.add(event);
-      if (detailDrawer(aside)) parkDetailDrawer(aside);else {
+      if (aside.hidden) {
+        aside.dispatchEvent(new CustomEvent(APP_WORKSPACE_DETAIL_OPEN_EVENT));
+        // The app may reject opening (for example while navigating). Never
+        // override hidden ourselves or reveal retained, unavailable contents.
+        if (aside.hidden) return;
+        if (wide?.matches && detailWaiting(aside)) openDetailDrawer(aside);
+        if (event.detail === 0 || phone?.matches) requestTitle(aside);else detailButton.focus({
+          preventScroll: true
+        });
+      } else if (reopenable && (!wide?.matches || !detailWaiting(aside))) requestClose(aside);else if (detailDrawer(aside)) parkDetailDrawer(aside);else {
         openDetailDrawer(aside);
         if (event.detail === 0) requestTitle(aside);else detailButton.focus({
           preventScroll: true
         });
       }
+      syncDetailRequestControls();
       return;
     }
     const toggle = target?.closest(TOGGLE_SELECTOR);
@@ -396,10 +442,88 @@ export const installAppWorkspaceController = (options = {}) => {
   // Whether each open detail waited at the last check, so a column that starts
   // waiting under focus hands that focus to its Details button.
   const detailWasWaiting = new WeakMap();
+  const detailRequestExpanded = new Map();
+  const restoreDetailRequestExpanded = (control, state) => {
+    // A newer application render already owns the current value.
+    if (control.getAttribute("aria-expanded") !== state.written) return;
+    if (state.rendered === null) control.removeAttribute("aria-expanded");else control.setAttribute("aria-expanded", state.aside.hidden || !state.aside.isConnected ? "false" : state.rendered);
+  };
+  const requestedWaitingDetail = control => {
+    if (!wide?.matches || control.matches(DETAIL_TOGGLE_SELECTOR) || !eventRoot.contains(control)) return null;
+    const root = workspaceRoot(control);
+    const region = control.closest(".k2b-app-workspace__main, .k2b-app-workspace__detail");
+    if (!root || !region || region.closest(ROOT_SELECTOR) !== root) return null;
+    const ids = control.getAttribute("aria-controls")?.split(/\s+/);
+    return rootElements(root, detailSelector).find(aside => !aside.hidden && ids?.includes(aside.id) && detailWaiting(aside)) ?? null;
+  };
+  const syncDetailRequestControls = () => {
+    for (const root of allRoots()) {
+      for (const aside of rootElements(root, detailSelector)) {
+        const toggle = detailToggle(aside);
+        if (toggle?.dataset.workspaceDetailReopen !== "true") continue;
+        const expanded = !aside.hidden && (!wide?.matches || !detailWaiting(aside) || detailDrawer(aside));
+        const value = String(expanded);
+        if (toggle.getAttribute("aria-expanded") !== value) toggle.setAttribute("aria-expanded", value);
+      }
+    }
+    const waitingControls = new Map();
+    for (const root of allRoots()) {
+      const waitingDetails = wide?.matches ? rootElements(root, detailSelector).filter(aside => !aside.hidden && detailWaiting(aside)) : [];
+      if (!waitingDetails.length) continue;
+      // Only a control that names a Detail can request it.
+      for (const control of rootElements(root, "[aria-controls]")) {
+        if (control.matches(DETAIL_TOGGLE_SELECTOR) || !eventRoot.contains(control)) continue;
+        const region = control.closest(".k2b-app-workspace__main, .k2b-app-workspace__detail");
+        if (!region || region.closest(ROOT_SELECTOR) !== root) continue;
+        const ids = control.getAttribute("aria-controls")?.split(/\s+/);
+        const aside = waitingDetails.find(aside => ids?.includes(aside.id));
+        if (aside) waitingControls.set(control, aside);
+      }
+    }
+    detailRequestExpanded.forEach((state, control) => {
+      if (waitingControls.has(control)) return;
+      restoreDetailRequestExpanded(control, state);
+      detailRequestExpanded.delete(control);
+    });
+    waitingControls.forEach((aside, control) => {
+      const current = control.getAttribute("aria-expanded");
+      const state = detailRequestExpanded.get(control);
+      const written = String(detailDrawer(aside));
+      // Keep the application's latest value to restore when waiting ends.
+      const rendered = !state || current !== state.written ? current : state.rendered;
+      detailRequestExpanded.set(control, {
+        aside,
+        rendered,
+        written
+      });
+      if (current !== written) control.setAttribute("aria-expanded", written);
+    });
+  };
+  const onDetailRequestClick = event => {
+    if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+    const control = eventElement(event)?.closest(DETAIL_REQUEST_CONTROL_SELECTOR);
+    const aside = control ? requestedWaitingDetail(control) : null;
+    if (!control || !aside) return;
+    // The application keeps its Detail open; only its waiting drawer changes.
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    cancelPendingDetail();
+    cancelTitle();
+    clearActivation();
+    // A control inside the drawer leaves with it, so focus goes to Details.
+    if (detailDrawer(aside)) parkDetailDrawer(aside, aside.contains(ownerDocument.activeElement));else {
+      openDetailDrawer(aside);
+      if (event.detail === 0) requestTitle(aside);else control.focus({
+        preventScroll: true
+      });
+    }
+    syncDetailRequestControls();
+  };
   const openDetailDrawer = aside => {
     aside.dataset.workspaceDetailDrawer = "open";
     detailToggle(aside)?.setAttribute("aria-expanded", "true");
     syncDetailDrawerSpace(aside);
+    syncDetailRequestControls();
   };
   // A sidebar drag changes the room beside it without resizing the workspace,
   // so it rechecks waiting once per frame.
@@ -416,7 +540,63 @@ export const installAppWorkspaceController = (options = {}) => {
     if (args[2] === "sidebar") scheduleHostSync();
     return size;
   };
+  // A responsive application control and the shared control can name the same
+  // Detail. Remember actual focus, not an old selection, before CSS hides it.
+  let detailControlFocus = null;
+  const controlledDetail = control => {
+    if (!control.matches(FOCUSABLE_SELECTOR) || control.matches(HANDLE_SELECTOR) || !eventRoot.contains(control)) return null;
+    const root = workspaceRoot(control);
+    if (!root) return null;
+    const ids = control.getAttribute("aria-controls")?.split(/\s+/);
+    const aside = rootElements(root, detailSelector).find(aside => ids?.includes(aside.id));
+    return aside ? {
+      control,
+      aside,
+      root
+    } : null;
+  };
+  const detailControlVisible = control => control.isConnected && control.getClientRects().length > 0 && getComputedStyle(control).visibility === "visible";
+  const detailControlUsable = control => detailControlVisible(control) && !control.matches(":disabled, [aria-disabled='true']") && !control.closest("[inert], [hidden], [aria-hidden='true']");
+  const onDetailControlFocusOut = () => {
+    // Explicit blur of a visible control is not a responsive focus loss.
+    if (detailControlFocus && detailControlVisible(detailControlFocus.control)) detailControlFocus = null;
+  };
+  const rescueDetailControlFocus = () => {
+    const previous = detailControlFocus;
+    if (!previous) return;
+    const {
+      control,
+      aside,
+      root
+    } = previous;
+    const active = ownerDocument.activeElement;
+    if (!control.isConnected || !aside.isConnected || workspaceRoot(control) !== root || workspaceRoot(aside) !== root || active !== ownerDocument.body && !control.contains(active)) {
+      detailControlFocus = null;
+      return;
+    }
+    const shared = detailToggle(aside);
+    if (shared?.dataset.workspaceDetailReopen === "true" && phone?.matches && phonePage(aside) && !aside.hidden && !aside.contains(control)) {
+      // WebKit can update matchMedia after resize has already focused the now
+      // visible application control. Move into the page before Main becomes inert.
+      detailControlFocus = null;
+      requestTitle(aside);
+      return;
+    }
+    if (detailControlVisible(control)) return;
+    detailControlFocus = null;
+    if (shared?.dataset.workspaceDetailReopen !== "true") {
+      // Selection-only details keep their existing returning-column title target.
+      if (control === shared && !aside.hidden && !detailWaiting(aside)) requestTitle(aside);
+      return;
+    }
+    const candidates = shared ? [shared, ...rootElements(root, "[aria-controls]")] : rootElements(root, "[aria-controls]");
+    const replacement = candidates.find(candidate => candidate !== control && detailControlUsable(candidate) && controlledDetail(candidate)?.aside === aside);
+    replacement?.focus({
+      preventScroll: true
+    });
+  };
   const syncHostState = () => {
+    rescueDetailControlFocus();
     if (pendingDetail && !canOpenPendingDetail(pendingDetail.aside)) cancelPendingDetail();
     if (overlay && sidebarForm(overlay.root) !== "overlay") closeOverlay("none");
     for (const root of allRoots()) {
@@ -432,15 +612,18 @@ export const installAppWorkspaceController = (options = {}) => {
         const before = detailWasWaiting.get(aside);
         detailWasWaiting.set(aside, waiting);
         if (!waiting) {
-          // The Details button hides with the waiting; its focus moves to the returning column's title.
-          const toggleFocused = detailToggle(aside)?.contains(ownerDocument.activeElement) ?? false;
+          // Rescue focus only when the legacy waiting-only button disappears.
+          // A persistent head control stays a valid focus target after resizing.
+          const toggle = detailToggle(aside);
+          const toggleFocused = toggle?.contains(ownerDocument.activeElement) ?? false;
           parkDetailDrawer(aside);
-          if (toggleFocused) focusTitle(aside);
-        } else if (detailDrawer(aside)) syncDetailDrawerSpace(aside);else if (before !== true && aside.contains(ownerDocument.activeElement)) detailToggle(aside)?.focus({
+          if (toggle && toggleFocused && !isVisible(toggle)) focusTitle(aside);
+        } else if (detailDrawer(aside)) syncDetailDrawerSpace(aside);else if (before !== true && aside.contains(ownerDocument.activeElement)) detailReturnControl(aside)?.focus({
           preventScroll: true
         });
       }
     }
+    syncDetailRequestControls();
   };
   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;
@@ -554,6 +737,8 @@ export const installAppWorkspaceController = (options = {}) => {
     const root = target?.closest(ROOT_SELECTOR);
     if (!target || !root || !observedRoots.has(root)) return;
     lastFocus.set(root, target);
+    const control = target.closest("[aria-controls]");
+    detailControlFocus = control ? controlledDetail(control) : null;
     const previous = remembered.get(root);
     // Pointer focus follows pointerdown; keeping that snapshot also keeps the
     // interaction that opened the panel rather than treating focus as a new one.
@@ -600,6 +785,7 @@ export const installAppWorkspaceController = (options = {}) => {
   // that opens later than that does not take the drawer or the focus.
   let lastChosen = null;
   const cancelTitleOnInteraction = event => {
+    if (detailControlFocus && !(event.target instanceof Node && detailControlFocus.control.contains(event.target))) detailControlFocus = null;
     if (event.type === "pointerdown" || event.type === "keydown") clearActivation();
     if (lastChosen && !(event.target instanceof Node && lastChosen.item.contains(event.target))) {
       lastChosen.chosen = false;
@@ -861,7 +1047,13 @@ export const installAppWorkspaceController = (options = {}) => {
         pendingAnchors.set(root, cancel);
       } else anchorItem(root, aside, snapshot);
       const focused = ownerDocument.activeElement;
-      if (snapshot?.item.isConnected && (aside.contains(lastFocus.get(root) ?? null) || aside.contains(focused) || focused === ownerDocument.body)) snapshot.item.focus({
+      const toggle = detailToggle(aside);
+      const returnControl = detailReturnControl(aside);
+      if (toggle?.dataset.workspaceDetailReopen === "true" && returnControl && (aside.contains(focused) || focused === ownerDocument.body && aside.contains(lastFocus.get(root) ?? null))) {
+        returnControl.focus({
+          preventScroll: true
+        });
+      } else if (snapshot?.item.isConnected && (aside.contains(lastFocus.get(root) ?? null) || aside.contains(focused) || focused === ownerDocument.body)) snapshot.item.focus({
         preventScroll: true
       });
       clearDrag(aside);
@@ -903,6 +1095,7 @@ export const installAppWorkspaceController = (options = {}) => {
     if (!aside || !owningRoot || !isVisible(aside)) return;
     if (event.key === "Escape" && detailDrawer(aside)) {
       parkDetailDrawer(aside, true);
+      syncDetailRequestControls();
       event.preventDefault();
       return;
     }
@@ -1137,29 +1330,86 @@ export const installAppWorkspaceController = (options = {}) => {
     const handle = resizeHandle(event);
     const root = handle?.closest(ROOT_SELECTOR);
     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[key]
-    };
-    delete widths[panelId(handle)];
-    layoutState = {
-      ...layoutState,
-      [key]: widths
-    };
-    const variable = appWorkspacePanelVariable(kind, panelId(handle));
-    root.style.removeProperty(variable);
-    // 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);
+    if (!handle || !root || !kind || !workspaceResizable(root) || !controlsResizableRegion(root, handle, kind)) return;
+    if (active) return;
+    if (kind === "sidebar") {
+      const {
+        sidebarWidth: _width,
+        sidebarCollapsed: _collapsed,
+        ...remaining
+      } = layoutState;
+      layoutState = remaining;
+    } else {
+      const key = kind === "pane" ? "paneWidths" : kind === "drawer" ? "drawerHeights" : "detailWidths";
+      const widths = {
+        ...layoutState[key]
+      };
+      delete widths[panelId(handle)];
+      layoutState = {
+        ...layoutState,
+        [key]: widths
+      };
+    }
+    const regions = resetRegions.get(root) ?? new Map();
+    regions.set(resizeVariable(handle, kind), {
+      kind,
+      id: panelId(handle),
+      configuration: handle
+    });
+    resetRegions.set(root, regions);
+    writeState();
+    if (kind === "sidebar" || kind === "pane") reconcilePanes(root, layoutState);
     updateHandleValue(root, handle, kind, currentSize(root, handle, kind));
-    options.writeState?.(layoutState);
   };
   const stopScrollFades = installScrollFades(eventRoot);
   let layoutState = normalizeAppWorkspaceLayoutState(options.readState?.()) ?? {
     version: 2
   };
+  const resetRegions = new WeakMap();
+  const resizeVariable = (handle, kind) => kind === "sidebar" ? "--k2b-workspace-sidebar-width" : appWorkspacePanelVariable(kind, panelId(handle));
+  const defaultSize = (handle, kind) => readAppWorkspaceWidth(handle.dataset.workspaceDefaultSize) ?? (kind === "sidebar" ? APP_WORKSPACE_SIDEBAR_DEFAULT : kind === "pane" ? APP_WORKSPACE_PANE_DEFAULT : kind === "drawer" ? APP_WORKSPACE_DRAWER_DEFAULT : APP_WORKSPACE_DETAIL_DEFAULT);
+  const restoreResetDefaults = root => {
+    for (const [variable, region] of resetRegions.get(root) ?? []) {
+      const {
+        kind,
+        id
+      } = region;
+      const persisted = kind === "sidebar" ? layoutState.sidebarWidth : layoutState[kind === "pane" ? "paneWidths" : kind === "drawer" ? "drawerHeights" : "detailWidths"]?.[id];
+      if (persisted !== undefined || kind === "sidebar" && layoutState.sidebarCollapsed) continue;
+      const handle = rootElements(root, HANDLE_SELECTOR).find(handle => resizeKind(handle) === kind && panelId(handle) === id);
+      // Keep the latest handle's configuration across unmounts. Limits still
+      // measure today's workspace, so a missing handle cannot freeze its fit.
+      if (handle) region.configuration = handle;
+      const spec = defaultSize(region.configuration, kind);
+      // Store the configured default, not a temporary fit. CSS/relayout owns
+      // the available space, so a numeric level can grow back when room returns.
+      if (typeof spec === "number") {
+        // Sidebar and drawer have no CSS fit. Keep their configured default
+        // in the map, but render within today's bounds and recover it later.
+        if (kind === "sidebar" || kind === "drawer") {
+          const {
+            min,
+            max
+          } = sizeLimits(root, region.configuration, kind);
+          root.style.setProperty(variable, `${clamp(spec, min, max)}px`);
+        } else root.style.setProperty(variable, `${spec}px`);
+      } else {
+        root.style.removeProperty(variable);
+        if (getComputedStyle(root).getPropertyValue(variable).trim()) root.style.setProperty(variable, "initial");
+      }
+      if (kind === "sidebar") delete root.dataset.sidebarCollapsed;
+    }
+  };
+  const writeState = () => {
+    options.writeState?.(layoutState);
+    // Keep reset defaults through reactive writes and temporary handle unmounts,
+    // without saving a width that would mask a changed application default.
+    for (const root of roots()) {
+      if (!workspaceResizable(root)) continue;
+      restoreResetDefaults(root);
+      reconcilePanes(root, layoutState);
+    }
+  };
   let active = null;
   let resizeFrame = null;
   let pendingClient = null;
@@ -1181,7 +1431,9 @@ export const installAppWorkspaceController = (options = {}) => {
         }
       };
     }
-    options.writeState?.(layoutState);
+    const root = workspaceRoot(handle);
+    if (root) resetRegions.get(root)?.delete(resizeVariable(handle, kind));
+    writeState();
   };
 
   // A level resize starts from what is on screen. When the stored widths do
@@ -1322,6 +1574,11 @@ export const installAppWorkspaceController = (options = {}) => {
     const kind = handle ? resizeKind(handle) : null;
     const root = handle ? workspaceRoot(handle) : null;
     if (!handle || !kind || !root || !workspaceResizable(root) || !controlsResizableRegion(root, handle, kind)) return;
+    if (event.key === "Enter" && !event.defaultPrevented && !event.isComposing && !event.altKey && !event.ctrlKey && !event.metaKey && !active) {
+      event.preventDefault();
+      onPanelDoubleClick(event);
+      return;
+    }
     const current = currentSize(root, handle, kind);
     const {
       min,
@@ -1400,6 +1657,7 @@ export const installAppWorkspaceController = (options = {}) => {
       // resizing; without this the same workspace still had persisted sizes
       // forced onto it on load and on every window resize.
       if (!workspaceResizable(root)) return;
+      restoreResetDefaults(root);
       const handles = rootElements(root, HANDLE_SELECTOR);
       // Chrome establishes the space available to the work area. Auxiliary
       // panes are then fitted together into what remains, so DOM order cannot
@@ -1529,6 +1787,7 @@ 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 => {
+    if (records.some(record => record.type === "childList" || ["hidden", "aria-controls", "aria-expanded", "data-workspace-detail-drawer"].includes(record.attributeName ?? ""))) syncDetailRequestControls();
     syncPhonePages();
     if (pendingTitle && (pendingTitle.aside.hidden || !pendingTitle.aside.isConnected)) cancelTitle();
     if (pendingDetail && (!canOpenPendingDetail(pendingDetail.aside) || !pendingDetail.snapshot.chosen || !pendingDetail.snapshot.item.isConnected)) cancelPendingDetail();
@@ -1553,8 +1812,10 @@ export const installAppWorkspaceController = (options = {}) => {
   ownerDocument.addEventListener("keydown", onOverlayKeyDown);
   ownerWindow.addEventListener("keydown", onDetailKeyDown);
   ownerDocument.addEventListener("focusin", cancelTitleOnInteraction, true);
+  ownerDocument.addEventListener("focusout", onDetailControlFocusOut, true);
   ownerDocument.addEventListener("pointerdown", cancelTitleOnInteraction, true);
   ownerDocument.addEventListener("keydown", cancelTitleOnInteraction, true);
+  ownerDocument.addEventListener("click", onDetailRequestClick, true);
   ownerDocument.addEventListener("click", onChoiceClick, true);
   ownerDocument.addEventListener("keyup", endActivation, true);
   ownerDocument.addEventListener("pointerup", endActivation, true);
@@ -1581,10 +1842,11 @@ export const installAppWorkspaceController = (options = {}) => {
   window.addEventListener("resize", onResize);
   syncPhonePages();
   syncObservedRoots();
+  syncDetailRequestControls();
   mutationObserver?.observe(eventRoot, {
     attributes: true,
     attributeOldValue: true,
-    attributeFilter: ["hidden", "data-workspace-level-shown", "data-width", "data-workspace-main-min"],
+    attributeFilter: ["hidden", "aria-controls", "aria-expanded", "data-workspace-detail-drawer", "data-workspace-level-shown", "data-width", "data-workspace-main-min", "data-workspace-default-size"],
     childList: true,
     subtree: true
   });
@@ -1611,6 +1873,8 @@ export const installAppWorkspaceController = (options = {}) => {
     titleTabIndices.forEach(title => title.removeAttribute("tabindex"));
     ownerWindow.removeEventListener("keydown", onDetailKeyDown);
     ownerDocument.removeEventListener("focusin", cancelTitleOnInteraction, true);
+    ownerDocument.removeEventListener("focusout", onDetailControlFocusOut, true);
+    detailControlFocus = null;
     ownerDocument.removeEventListener("pointerdown", cancelTitleOnInteraction, true);
     ownerDocument.removeEventListener("keydown", cancelTitleOnInteraction, true);
     clearActivation();
@@ -1638,6 +1902,9 @@ export const installAppWorkspaceController = (options = {}) => {
     if (reconcileFrame !== null) cancelAnimationFrame(reconcileFrame);
     if (hostSyncFrame !== null) cancelAnimationFrame(hostSyncFrame);
     mutationObserver?.disconnect();
+    detailRequestExpanded.forEach((state, control) => restoreDetailRequestExpanded(control, state));
+    detailRequestExpanded.clear();
+    ownerDocument.removeEventListener("click", onDetailRequestClick, true);
     resizeObserver?.disconnect();
     observedRoots.clear();
     observedHosts.clear();