@k2b/ui 0.28.0 → 0.30.0

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

@@ -4,14 +4,46 @@ import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_D
 import { installScrollFades } from "./scroll-fade";
 const HANDLE_SELECTOR = "[data-app-workspace-resize]";
 const ROOT_SELECTOR = "[data-k2b-app-workspace]";
-const LAYOUT_REGION_SELECTOR = [ROOT_SELECTOR, ".k2b-app-workspace__sidebar", ".k2b-app-workspace__main-pane", ".k2b-app-workspace__detail", ".k2b-app-workspace__drawer", HANDLE_SELECTOR].join(",");
+const LAYOUT_REGION_SELECTOR = [ROOT_SELECTOR, ".k2b-app-workspace__sidebar", ".k2b-app-workspace__main", ".k2b-app-workspace__main-pane", ".k2b-app-workspace__detail", ".k2b-app-workspace__drawer", HANDLE_SELECTOR].join(",");
 const TOGGLE_SELECTOR = "[data-app-workspace-sidebar-toggle]";
-/** The width range in which the sidebar is an overlay; it matches the compact media query in the stylesheet. */
-const COMPACT_QUERY = "(min-width: 48rem) and (max-width: 63.999rem)";
+const DETAIL_TOGGLE_SELECTOR = "[data-app-workspace-detail-toggle]";
+const DETAIL_DRAWER_SELECTOR = '.k2b-app-workspace__detail[data-workspace-detail-drawer="open"]';
+const cssState = (element, name) => getComputedStyle(element).getPropertyValue(name).trim();
+const detailWaiting = aside => cssState(aside, "--k2b-workspace-detail-waiting") === "1";
+const detailDrawer = aside => aside.dataset.workspaceDetailDrawer === "open";
+const detailToggle = aside => {
+  const root = workspaceRoot(aside);
+  return rootElements(root ?? aside, DETAIL_TOGGLE_SELECTOR).find(toggle => toggle.getAttribute("aria-controls") === aside.id);
+};
+// The trail's registered property accepts a length, not the drawer's percentage
+// cap. Only a user-opened drawer needs this measurement; the first frame stays CSS-owned.
+const detailDrawerContent = aside => aside.closest(".k2b-app-workspace__content");
+const syncDetailDrawerSpace = aside => detailDrawerContent(aside)?.style.setProperty("--k2b-detail-space", `${aside.getBoundingClientRect().width}px`);
+const parkDetailDrawer = (aside, focus = false) => {
+  if (!detailDrawer(aside)) return;
+  delete aside.dataset.workspaceDetailDrawer;
+  detailDrawerContent(aside)?.style.removeProperty("--k2b-detail-space");
+  const toggle = detailToggle(aside);
+  toggle?.setAttribute("aria-expanded", "false");
+  if (focus) toggle?.focus({
+    preventScroll: true
+  });
+};
+
+/** Parks open waiting-detail drawers; focus follows only when it was inside one. */
+export const parkWorkspaceDetailDrawers = (root = document) => {
+  for (const aside of root.querySelectorAll(DETAIL_DRAWER_SELECTOR)) parkDetailDrawer(aside, aside.contains(aside.ownerDocument.activeElement));
+};
 const FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "input:not([disabled]):not([type='hidden'])", "select:not([disabled])", "textarea:not([disabled])", "[tabindex]:not([tabindex='-1'])"].join(",");
 /** Text entry, menus, dialogs, and open popups keep their own keys. */
 const KEY_OWNER_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false']), [role='textbox'], [role='combobox'], [role='searchbox'], [role='spinbutton'], [role='menu'], [role='listbox'], [role='dialog'], dialog, [aria-haspopup]:not([aria-haspopup='false'])[aria-expanded='true']";
 const ITEM_SELECTOR = ".k2b-app-workspace__sidebar-item";
+/** Controls inside a selected row that act on their own instead of choosing the row. */
+const NESTED_CONTROL_SELECTOR = "[aria-expanded], [aria-haspopup]:not([aria-haspopup='false']), [aria-pressed], [role='checkbox'], [role='switch'], [role='menuitem'], input, select, textarea, summary";
+const DETAIL_REQUEST_CONTROL_SELECTOR = "[aria-pressed], [aria-expanded], [aria-controls]";
+const SELECTION_MARK_SELECTOR = '[aria-selected="true"], [aria-current]:not([aria-current="false"]):not([aria-current="date"]):not([aria-current="time"]), [data-selected="true"]';
+// Calendar day marks select a date range, not the Detail's subject.
+const IGNORED_SELECTION_MARK_SELECTOR = "[data-calendar-day-key]";
 const clamp = (value, min, max) => Math.round(Math.min(max, Math.max(min, value)));
 const eventElement = event => event.target instanceof Element ? event.target : null;
 const resizeHandle = event => eventElement(event)?.closest(HANDLE_SELECTOR) ?? null;
@@ -24,6 +56,7 @@ const workspaceRoot = handle => handle.closest(ROOT_SELECTOR);
 const workspaceResizable = root => root.dataset.workspaceResizable !== "false";
 const rootElements = (root, selector) => Array.from(root.querySelectorAll(selector)).filter(element => element.closest(ROOT_SELECTOR) === root);
 const sidebarElement = root => rootElements(root, ".k2b-app-workspace__sidebar")[0] ?? null;
+const sidebarForm = root => cssState(sidebarElement(root) ?? root, "--k2b-workspace-sidebar-form");
 const mainElement = root => rootElements(root, ".k2b-app-workspace__main")[0] ?? null;
 const sidebarCollapsible = root => sidebarElement(root)?.dataset.workspaceCollapsible === "true";
 const sidebarHideable = root => sidebarElement(root)?.dataset.workspaceHideable === "true";
@@ -59,8 +92,9 @@ const controlledPanel = (root, handle) => {
 };
 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 root = workspaceRoot(pane);
+  const widthClass = root ? cssState(root, "--k2b-workspace-level-class") : "";
+  return Boolean(widthClass && pane.dataset.workspaceLevelLast?.split(" ").includes(widthClass));
 };
 const levelsMain = handle => handle.closest(".k2b-app-workspace__main")?.hasAttribute("data-workspace-levels") ?? false;
 const controlsResizableRegion = (root, handle, kind) => {
@@ -72,7 +106,7 @@ const numberData = (handle, key, fallback) => {
   const value = Number(handle.dataset[key]);
   return Number.isFinite(value) ? value : fallback;
 };
-const sizeLimits = (root, handle, kind) => {
+const sizeLimits = (root, handle, kind, reserveMainMinimum = true) => {
   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") && !flexibleLevel(pane) && isVisible(pane)) : [];
@@ -87,14 +121,23 @@ const sizeLimits = (root, handle, kind) => {
   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;
-  return appWorkspaceResizeLimits({
+  const mainMinValue = cssState(root, "--k2b-workspace-main-min");
+  const mainMin = 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,
-    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) + separatorSize : 0,
+    workspaceSize: kind === "drawer" ? root.getBoundingClientRect().height : kind === "pane" && main ? main.getBoundingClientRect().width : content ? root.getBoundingClientRect().right - root.clientLeft - content.getBoundingClientRect().left : kind === "sidebar" ? root.getBoundingClientRect().width - 2 * root.clientLeft : root.getBoundingClientRect().width,
+    // Interactive sizing keeps Main's declared minimum beside the sidebar and the Detail.
+    reservedSize: kind === "sidebar" && reserveMainMinimum ? mainExtra : kind === "detail" ? 8 + (reserveMainMinimum ? mainExtra : 0) : 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)
   });
+  // Widths are applied as whole pixels; rounding up must not cross the fit boundary.
+  return kind === "sidebar" ? {
+    min: limits.min,
+    max: Math.max(limits.min, Math.floor(limits.max))
+  } : limits;
 };
 const currentSize = (root, handle, kind) => kind === "sidebar" ? elementSize(sidebarElement(root), kind) : elementSize(controlledPanel(root, handle), kind);
 const updateHandleValue = (root, handle, kind, size, limits = sizeLimits(root, handle, kind)) => {
@@ -106,7 +149,7 @@ const updateHandleValue = (root, handle, kind, size, limits = sizeLimits(root, h
   handle.setAttribute("aria-valuemax", String(max));
   handle.setAttribute("aria-valuenow", String(clamp(size, min, max)));
 };
-const applySize = (root, handle, kind, requestedSize,
+const applyRegionSize = (root, handle, kind, requestedSize,
 /**
  * `snapSidebar: false` tracks the pointer continuously and only *previews*
  * the collapsed state. Snapping (the default, and what keyboard steps and
@@ -117,7 +160,7 @@ options = {}) => {
   const {
     min,
     max
-  } = sizeLimits(root, handle, kind);
+  } = sizeLimits(root, handle, kind, options.reserveMainMinimum);
   if (kind === "sidebar") {
     const collapsible = sidebarCollapsible(root);
     const sidebar = options.snapSidebar === false ? {
@@ -128,10 +171,8 @@ options = {}) => {
     // Cloud removes the attribute rather than writing "false", so that a
     // presence selector (`[data-sidebar-collapsed]`) means "collapsed".
     if (sidebar.collapsed) root.dataset.sidebarCollapsed = "true";else delete root.dataset.sidebarCollapsed;
-    updateHandleValue(root, handle, kind, sidebar.width, {
-      min,
-      max
-    });
+    // A restored width may require an overlay; the handle still advertises interactive limits.
+    updateHandleValue(root, handle, kind, sidebar.width);
     return sidebar.width;
   }
   const size = clamp(requestedSize, min, max);
@@ -200,7 +241,7 @@ const claimedToggleClicks = new WeakSet();
 const claimedDetailGestures = new WeakSet();
 
 /**
- * The compact overlay: from 48 to 64 rem the sidebar opens over the work area
+ * The overlay sidebar opens over the work area when its column does not fit
  * from the button in the workspace's head. While it is open the rest of
  * the workspace is inert, Tab stays in the sidebar, and Escape, the scrim,
  * choosing an item, hiding the sidebar, or leaving the width range close it
@@ -228,7 +269,6 @@ export const installAppWorkspaceController = (options = {}) => {
   const ownerDocument = eventRoot.ownerDocument ?? document;
   const ownerWindow = ownerDocument.defaultView ?? window;
   let overlay = null;
-  const compact = typeof window.matchMedia === "function" ? window.matchMedia(COMPACT_QUERY) : null;
   // A server-rendered head names the sidebar before the sidebar renders; the button learns its real id now.
   for (const toggle of eventRoot.querySelectorAll(TOGGLE_SELECTOR)) overlayTarget(toggle);
   const openOverlay = target => {
@@ -269,12 +309,26 @@ export const installAppWorkspaceController = (options = {}) => {
   };
   const onClick = event => {
     const target = eventElement(event);
+    const detailButton = target?.closest(DETAIL_TOGGLE_SELECTOR);
+    if (detailButton) {
+      const root = workspaceRoot(detailButton);
+      const aside = root ? controlledPanel(root, detailButton) : null;
+      if (!aside || aside.hidden || !detailWaiting(aside) || claimedToggleClicks.has(event)) return;
+      claimedToggleClicks.add(event);
+      if (detailDrawer(aside)) parkDetailDrawer(aside);else {
+        openDetailDrawer(aside);
+        if (event.detail === 0) requestTitle(aside);else detailButton.focus({
+          preventScroll: true
+        });
+      }
+      return;
+    }
     const toggle = target?.closest(TOGGLE_SELECTOR);
     if (toggle) {
       const next = overlayTarget(toggle);
       if (!next || claimedToggleClicks.has(event)) return;
       claimedToggleClicks.add(event);
-      if (overlay?.sidebar === next.sidebar) closeOverlay("button");else if (compact?.matches) openOverlay(next);
+      if (overlay?.sidebar === next.sidebar) closeOverlay("button");else if (sidebarForm(next.root) === "overlay") openOverlay(next);
       return;
     }
     if (!overlay || !target) return;
@@ -310,6 +364,11 @@ export const installAppWorkspaceController = (options = {}) => {
       // 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;
+      if (target !== ownerDocument.body) {
+        const rect = target.getBoundingClientRect();
+        const hit = ownerDocument.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+        if (hit && target.contains(hit)) return;
+      }
       const stops = tabStopsIn(page);
       event.preventDefault();
       (event.shiftKey ? stops.at(-1) : stops[0])?.focus();
@@ -334,12 +393,57 @@ export const installAppWorkspaceController = (options = {}) => {
       first.focus();
     }
   };
-  const onCompactChange = () => {
-    if (!compact?.matches) closeOverlay("none");
+  // 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 openDetailDrawer = aside => {
+    aside.dataset.workspaceDetailDrawer = "open";
+    detailToggle(aside)?.setAttribute("aria-expanded", "true");
+    syncDetailDrawerSpace(aside);
+  };
+  // A sidebar drag changes the room beside it without resizing the workspace,
+  // so it rechecks waiting once per frame.
+  let hostSyncFrame = null;
+  const scheduleHostSync = () => {
+    if (hostSyncFrame !== null) return;
+    hostSyncFrame = requestAnimationFrame(() => {
+      hostSyncFrame = null;
+      syncHostState();
+    });
+  };
+  const applySize = (...args) => {
+    const size = applyRegionSize(...args);
+    if (args[2] === "sidebar") scheduleHostSync();
+    return size;
+  };
+  const syncHostState = () => {
+    if (pendingDetail && !canOpenPendingDetail(pendingDetail.aside)) cancelPendingDetail();
+    if (overlay && sidebarForm(overlay.root) !== "overlay") closeOverlay("none");
+    for (const root of allRoots()) {
+      // A drawer removed with its panel leaves no space behind in Content.
+      for (const content of rootElements(root, ".k2b-app-workspace__content")) if (content.style.getPropertyValue("--k2b-detail-space") && !content.querySelector(DETAIL_DRAWER_SELECTOR)) content.style.removeProperty("--k2b-detail-space");
+      for (const aside of rootElements(root, detailSelector)) {
+        if (aside.hidden) {
+          detailWasWaiting.delete(aside);
+          parkDetailDrawer(aside);
+          continue;
+        }
+        const waiting = detailWaiting(aside);
+        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;
+          parkDetailDrawer(aside);
+          if (toggleFocused) focusTitle(aside);
+        } else if (detailDrawer(aside)) syncDetailDrawerSpace(aside);else if (before !== true && aside.contains(ownerDocument.activeElement)) detailToggle(aside)?.focus({
+          preventScroll: true
+        });
+      }
+    }
   };
   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 detailSelector = ".k2b-app-workspace__detail";
   const grabberSelector = ".k2b-app-workspace__detail-grabber";
   const detailHidden = new WeakMap();
@@ -373,6 +477,36 @@ export const installAppWorkspaceController = (options = {}) => {
     snapshot.top = snapshot.item.getBoundingClientRect().top;
     snapshot.scrollTop = snapshot.scroller?.scrollTop ?? 0;
   };
+  // Native Enter/Space clicks and pointer clicks continue their initiating event.
+  let activationItem = null;
+  let activationFrame = null;
+  const clearActivation = () => {
+    if (activationFrame !== null) cancelAnimationFrame(activationFrame);
+    activationFrame = null;
+    activationItem = null;
+  };
+  const endActivation = () => {
+    if (!activationItem) return;
+    // Space's native click follows keyup before the next frame.
+    if (activationFrame !== null) cancelAnimationFrame(activationFrame);
+    activationFrame = requestAnimationFrame(clearActivation);
+  };
+  const cancelActivation = () => {
+    // A cancelled gesture must not open a Detail that appears later.
+    if (lastChosen?.interaction === "pointer" && lastChosen.item === activationItem) {
+      lastChosen.chosen = false;
+      lastChosen = null;
+    }
+    clearActivation();
+  };
+  const onChoiceClick = event => {
+    const preceded = event.target instanceof Node && Boolean(activationItem?.contains(event.target));
+    clearActivation();
+    if (event.detail === 0 && !preceded) {
+      cancelTitleOnInteraction(event);
+      rememberInteraction(event);
+    } else if (!(event.target instanceof Node && lastChosen?.item.contains(event.target))) cancelTitleOnInteraction(event);
+  };
   // A table row can exceed its scroller's width, so keep the clicked cell for horizontal reveal.
   const rememberInteraction = event => {
     const target = eventElement(event);
@@ -381,24 +515,37 @@ export const installAppWorkspaceController = (options = {}) => {
     const previous = remembered.get(root);
     if (previous && openDetails(root).length) refreshItem(previous);
     const main = mainElement(root);
-    const item = target.closest(FOCUSABLE_SELECTOR);
-    if (!main || !item || !main.contains(item) || item.closest(ROOT_SELECTOR) !== root) return;
+    // Collection rows with a roving tab index are items too, though no tab stops.
+    const item = target.closest(`${FOCUSABLE_SELECTOR}, [tabindex]`);
+    if (!main || !item || item === main || !main.contains(item) || item.closest(ROOT_SELECTOR) !== root) return;
     if (event instanceof KeyboardEvent && event.key !== "Enter" && event.key !== " ") return;
+    if (event.type === "pointerdown" || event.type === "keydown") activationItem = item;
+    const assistive = event instanceof MouseEvent && event.type === "click" && event.detail === 0 && event.button === 0;
     const cell = target.closest("td, th");
     const snapshot = {
       item,
       cell: cell && main.contains(cell) && cell.closest(ROOT_SELECTOR) === root ? cell : null,
-      interaction: event instanceof KeyboardEvent ? "keyboard" : "pointer",
+      interaction: event instanceof KeyboardEvent || assistive ? "keyboard" : "pointer",
       scroller: verticalScroller(item, main),
       scrollTop: 0,
       top: 0,
-      fresh: true
+      fresh: true,
+      // Text entry and focus alone do not choose an item.
+      // A modified activation, such as Ctrl/Cmd-click opening a new tab, chooses nothing here.
+      chosen: (event instanceof PointerEvent && event.type === "pointerdown" && event.button === 0 || event instanceof KeyboardEvent || assistive) && !(event instanceof MouseEvent || event instanceof KeyboardEvent ? event.ctrlKey || event.metaKey || event.shiftKey || event.altKey : false) &&
+      // Space scrolls on native links; it does not activate them.
+      !(event instanceof KeyboardEvent && event.key === " " && item.matches("a[href], area[href]") && (!item.hasAttribute("role") || item.getAttribute("role") === "link")) && !target.closest(KEY_OWNER_SELECTOR) && !item.closest("[role='tab'], [role='tablist']")
     };
     refreshItem(snapshot);
     remembered.set(root, snapshot);
+    if (snapshot.chosen) lastChosen = snapshot;
+    if (snapshot.chosen) {
+      const aside = openDetails(root).find(canOpenPendingDetail);
+      if (aside) checkPendingDetail(root, aside, snapshot, event instanceof KeyboardEvent && event.key === " ");
+    }
     // Enter in an editor or a field types; only an item that chooses something moves on to its title.
-    if (event instanceof KeyboardEvent && !target.closest(KEY_OWNER_SELECTOR)) {
-      const aside = openDetails(root).find(isVisible);
+    if (snapshot.chosen && snapshot.interaction === "keyboard") {
+      const aside = openDetails(root).find(aside => isVisible(aside) && (!detailWaiting(aside) || detailDrawer(aside)));
       if (aside) requestTitle(aside, true);
     }
   };
@@ -449,7 +596,18 @@ export const installAppWorkspaceController = (options = {}) => {
   // content, so focus falls to the body. The panel keeps owning the steps until
   // focus or a pointer goes elsewhere, so a quick second J still ends on the title.
   let panelStep = null;
+  // The last choice in Main, until another interaction replaces it: a Detail
+  // that opens later than that does not take the drawer or the focus.
+  let lastChosen = null;
   const cancelTitleOnInteraction = event => {
+    if (event.type === "pointerdown" || event.type === "keydown") clearActivation();
+    if (lastChosen && !(event.target instanceof Node && lastChosen.item.contains(event.target))) {
+      lastChosen.chosen = false;
+      lastChosen = null;
+    }
+    if (pendingDetail &&
+    // Native pointer focus on the chosen item continues its activation.
+    !(event.type === "focusin" && event.target instanceof Node && pendingDetail.snapshot.item.contains(event.target))) cancelPendingDetail();
     if (event.type !== "keydown" && !(event.target instanceof Node && panelStep?.contains(event.target))) panelStep = null;
     if (event.type !== "focusin" || event.target !== focusingTitle) cancelTitle();
   };
@@ -499,14 +657,13 @@ export const installAppWorkspaceController = (options = {}) => {
     delete aside.dataset.workspaceDetailDragging;
   };
   const anchorItem = (root, aside, snapshot) => {
-    if (!wide?.matches || touchDrawer?.matches && closable(aside) || !snapshot?.item.isConnected) return;
+    if (!wide?.matches || detailDrawer(aside) || !snapshot?.item.isConnected) return;
     if (!mainElement(root)?.contains(snapshot.item) || snapshot.item.closest(ROOT_SELECTOR) !== root) return;
     const scroller = snapshot.scroller;
     if (scroller?.isConnected && scroller.scrollTop === snapshot.scrollTop) scroller.scrollTop += snapshot.item.getBoundingClientRect().top - snapshot.top;
   };
-  // From 64 rem the workspace does not clip, so the panel's shadow shows on
-  // every edge. A panel sliding in or out would cross a framed workspace's
-  // edge, so the workspace clips while the panel moves (see the stylesheet).
+  // A moving Detail would cross a framed workspace's edge, so the workspace
+  // clips while it slides (see the stylesheet).
   const slide = (root, aside) => {
     slides.get(root)?.();
     if (!root.hasAttribute("data-workspace-motion") || prefersReducedMotion() || !wide?.matches) return;
@@ -591,6 +748,82 @@ export const installAppWorkspaceController = (options = {}) => {
       }
     }));
   };
+  let pendingDetail = null;
+  const canOpenPendingDetail = aside => aside.isConnected && eventRoot.contains(aside) && !aside.hidden && detailWaiting(aside) && !detailDrawer(aside) && aside.dataset.workspaceDetailChoice !== "request";
+  const cancelPendingDetail = () => {
+    pendingDetail?.stop();
+    pendingDetail = null;
+  };
+  // Check a completed choice after two frames. If its selection mark arrives
+  // later, keep waiting until another interaction replaces the choice.
+  const checkPendingDetail = (root, aside, snapshot, space = false) => {
+    cancelPendingDetail();
+    let frame = null;
+    let observer = null;
+    const settle = () => {
+      ownerDocument.removeEventListener("click", onClick, true);
+      ownerDocument.removeEventListener("keyup", onKeyUp, true);
+      if (frame !== null) cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        frame = requestAnimationFrame(() => {
+          frame = null;
+          const main = mainElement(root);
+          if (!canOpenPendingDetail(aside) || !snapshot.chosen || !snapshot.item.isConnected || !main?.contains(snapshot.item) || snapshot.item.closest(ROOT_SELECTOR) !== root) {
+            cancelPendingDetail();
+            return;
+          }
+          // ARIA marks, and `data-selected` as DataTable and Calendar mark their selection.
+          let selected = snapshot.item.closest(SELECTION_MARK_SELECTOR);
+          while (selected?.matches(IGNORED_SELECTION_MARK_SELECTOR)) selected = selected.parentElement?.closest(SELECTION_MARK_SELECTOR) ?? null;
+          if (!selected || selected === main || !main.contains(selected)) {
+            if (!observer) {
+              observer = new MutationObserver(settle);
+              observer.observe(main, {
+                subtree: true,
+                attributes: true,
+                attributeFilter: ["aria-selected", "aria-current", "data-selected"]
+              });
+            }
+            return;
+          }
+          cancelPendingDetail();
+          // A control inside a selected row that discloses, toggles, or opens
+          // a menu does its own job and selects nothing.
+          if (selected !== snapshot.item && snapshot.item.matches(NESTED_CONTROL_SELECTOR)) return;
+          snapshot.fresh = false;
+          openDetailDrawer(aside);
+          revealItem(root, aside, snapshot);
+          // The same item keeps its title; another one may still be loading,
+          // so focus follows the title that replaces the current one.
+          if (snapshot.interaction === "keyboard") {
+            focusTitle(aside);
+            requestTitle(aside, true);
+          }
+        });
+      });
+    };
+    const onClick = event => {
+      if (event.button === 0 && event.target instanceof Node && snapshot.item.contains(event.target)) settle();else cancelPendingDetail();
+    };
+    // Space activates a button on release, so its check waits for keyup.
+    const onKeyUp = event => {
+      if (event.key === " ") settle();
+    };
+    const stop = () => {
+      if (frame !== null) cancelAnimationFrame(frame);
+      observer?.disconnect();
+      ownerDocument.removeEventListener("click", onClick, true);
+      ownerDocument.removeEventListener("keyup", onKeyUp, true);
+      ownerDocument.removeEventListener("pointercancel", cancelPendingDetail, true);
+    };
+    pendingDetail = {
+      aside,
+      snapshot,
+      stop
+    };
+    ownerDocument.addEventListener("pointercancel", cancelPendingDetail, true);
+    if (space) ownerDocument.addEventListener("keyup", onKeyUp, true);else if (snapshot.interaction === "keyboard") settle();else ownerDocument.addEventListener("click", onClick, true);
+  };
   const detailTransition = (aside, wasHidden) => {
     const root = aside.closest(ROOT_SELECTOR);
     detailHidden.set(aside, Boolean(aside.hidden));
@@ -605,6 +838,8 @@ export const installAppWorkspaceController = (options = {}) => {
     const followedInteraction = snapshot?.fresh ?? false;
     if (snapshot) snapshot.fresh = false;
     if (aside.hidden) {
+      if (pendingDetail?.aside === aside) cancelPendingDetail();
+      parkDetailDrawer(aside);
       if (pendingTitle?.aside === aside) cancelTitle();
       if (panelStep === aside) panelStep = null;
       if (root.hasAttribute("data-workspace-motion") && !prefersReducedMotion() && wide?.matches) {
@@ -633,6 +868,11 @@ export const installAppWorkspaceController = (options = {}) => {
       if (detailDrag?.aside === aside) finishDetailDrag(true);
       return;
     }
+    if (detailWaiting(aside) && !detailDrawer(aside)) {
+      if (!followedInteraction || !snapshot?.chosen) return;
+      if (aside.dataset.workspaceDetailChoice === "request" && !snapshot.item.matches(DETAIL_REQUEST_CONTROL_SELECTOR)) return;
+      openDetailDrawer(aside);
+    }
     anchorItem(root, aside, snapshot);
     if (phone?.matches) setDetent(aside, false);
     if (followedInteraction && snapshot) {
@@ -646,20 +886,26 @@ export const installAppWorkspaceController = (options = {}) => {
     if (!target || target.closest(KEY_OWNER_SELECTOR)) return;
     if (ownerDocument.querySelector("dialog[open], [aria-modal='true']")) return;
     try {
-      if (ownerDocument.querySelector(":popover-open")) return;
+      // A passive hint does not own the keyboard.
+      if (ownerDocument.querySelector(":popover-open:not(.k2b-moved-hint)")) return;
     } catch {
       // Older engines have no popover selector; the other popup guards still apply.
     }
     const root = target.closest(ROOT_SELECTOR);
     let aside = target.closest(detailSelector);
     if (aside?.hidden || aside && (!eventRoot.contains(aside) || aside.closest(ROOT_SELECTOR) !== root)) aside = null;
-    if (!aside && root && observedRoots.has(root) && mainElement(root)?.contains(target)) aside = openDetails(root)[0] ?? null;
+    if (!aside && root && observedRoots.has(root) && (mainElement(root)?.contains(target) || target.closest(DETAIL_TOGGLE_SELECTOR))) aside = openDetails(root).find(isVisible) ?? null;
     if (!aside && target === ownerDocument.body) {
-      const open = allRoots().flatMap(openDetails);
+      const open = allRoots().flatMap(openDetails).filter(isVisible);
       if (open.length === 1) aside = open[0];
     }
     const owningRoot = aside?.closest(ROOT_SELECTOR);
-    if (!aside || !owningRoot) return;
+    if (!aside || !owningRoot || !isVisible(aside)) return;
+    if (event.key === "Escape" && detailDrawer(aside)) {
+      parkDetailDrawer(aside, true);
+      event.preventDefault();
+      return;
+    }
     if (event.key === "Escape" && closable(aside)) requestClose(aside);else if ((event.key.toLowerCase() === "j" || event.key.toLowerCase() === "k") && aside.hasAttribute("data-workspace-detail-steppable")) {
       const main = mainElement(owningRoot);
       const inMain = remembered.get(owningRoot)?.item.contains(target) || main?.contains(target);
@@ -683,7 +929,8 @@ export const installAppWorkspaceController = (options = {}) => {
           scroller: verticalScroller(item, main),
           scrollTop: 0,
           top: 0,
-          fresh: false
+          fresh: false,
+          chosen: false
         };
         refreshItem(snapshot);
         remembered.set(owningRoot, snapshot);
@@ -748,7 +995,7 @@ export const installAppWorkspaceController = (options = {}) => {
     clearDrag(drag.aside);
     if (cancelled || !drag.moved) return;
     if (drag.source === "drawer") {
-      if (drag.dx > 80 || drag.dx > 30 && drag.velocity > 0.5) requestClose(drag.aside);
+      if (drag.dx > 80 || drag.dx > 30 && drag.velocity > 0.5) parkDetailDrawer(drag.aside, drag.aside.contains(ownerDocument.activeElement));
     } else if (drag.dy > 60) {
       setDetent(drag.aside, false);
       if (!drag.full && closable(drag.aside)) requestClose(drag.aside);
@@ -837,7 +1084,7 @@ export const installAppWorkspaceController = (options = {}) => {
     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)) {
+    } else if (wide?.matches && detailDrawer(aside)) {
       if (!ownsTouchGesture(target, aside, "drawer")) beginDetailDrag(aside, target, "drawer", touch.clientX, touch.clientY, touch.identifier);
     }
     if (detailDrag) claimedDetailGestures.add(event);
@@ -1140,7 +1387,7 @@ export const installAppWorkspaceController = (options = {}) => {
     return allRoots().filter(root => getComputedStyle(root).display !== "none" && root.getBoundingClientRect().width > 0);
   };
   const reconcile = () => {
-    if (detailDrag && (detailDrag.source === "drawer" ? !touchDrawer?.matches : !phone?.matches)) finishDetailDrag(true);
+    if (detailDrag && (detailDrag.source === "drawer" ? !wide?.matches || !detailDrawer(detailDrag.aside) : !phone?.matches)) finishDetailDrag(true);
     allRoots().forEach(root => {
       if (!phone?.matches) {
         for (const aside of rootElements(root, detailSelector)) {
@@ -1167,7 +1414,9 @@ export const installAppWorkspaceController = (options = {}) => {
           return;
         }
         const persisted = kind === "sidebar" ? layoutState.sidebarCollapsed && sidebarCollapsible(root) ? APP_WORKSPACE_SIDEBAR_COLLAPSED : layoutState.sidebarWidth : kind === "detail" ? layoutState.detailWidths?.[panelId(handle)] : layoutState.drawerHeights?.[panelId(handle)];
-        if (persisted !== undefined) applySize(root, handle, kind, persisted);else updateHandleValue(root, handle, kind, currentSize(root, handle, kind));
+        if (persisted !== undefined) applySize(root, handle, kind, persisted, {
+          reserveMainMinimum: false
+        });else updateHandleValue(root, handle, kind, currentSize(root, handle, kind));
       });
       reconcilePanes(root, layoutState, active?.root === root ? active : null);
     });
@@ -1196,14 +1445,43 @@ export const installAppWorkspaceController = (options = {}) => {
     reconcileFrame = requestAnimationFrame(() => {
       reconcileFrame = null;
       reconcile();
+      // Reconciling can restore a drawer's persisted width; its trail space follows.
+      for (const root of allRoots()) for (const aside of rootElements(root, DETAIL_DRAWER_SELECTOR)) syncDetailDrawerSpace(aside);
     });
   };
-  const onResize = () => scheduleReconcile();
+  const onResize = () => {
+    syncHostState();
+    scheduleReconcile();
+  };
   const observedRoots = new Set();
   const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+    syncHostState();
     scheduleReconcile();
   });
+  // A host can change its width while a workspace with a fixed width keeps
+  // its own, so the controller also watches each root's nearest named host.
+  const observedHosts = new Set();
+  // Found once per root: reading styles on every mutation would cost a style pass.
+  const rootHosts = new WeakMap();
+  const hostOf = root => {
+    if (rootHosts.has(root)) return rootHosts.get(root);
+    let host = null;
+    for (let element = root.parentElement; element && !host; element = element.parentElement) if (getComputedStyle(element).containerName.split(/\s+/).includes("k2b-app-area")) host = element;
+    rootHosts.set(root, host);
+    return host;
+  };
   const syncObservedRoots = () => {
+    const hosts = new Set(allRoots().map(hostOf).filter(host => host !== null));
+    observedHosts.forEach(host => {
+      if (hosts.has(host)) return;
+      resizeObserver?.unobserve(host);
+      observedHosts.delete(host);
+    });
+    hosts.forEach(host => {
+      if (observedHosts.has(host)) return;
+      observedHosts.add(host);
+      resizeObserver?.observe(host);
+    });
     for (const elements of [touchedDetails, titleTabIndices, motionRoots]) {
       elements.forEach(element => {
         if (!element.isConnected) elements.delete(element);
@@ -1253,6 +1531,7 @@ export const installAppWorkspaceController = (options = {}) => {
   const mutationObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(records => {
     syncPhonePages();
     if (pendingTitle && (pendingTitle.aside.hidden || !pendingTitle.aside.isConnected)) cancelTitle();
+    if (pendingDetail && (!canOpenPendingDetail(pendingDetail.aside) || !pendingDetail.snapshot.chosen || !pendingDetail.snapshot.item.isConnected)) cancelPendingDetail();
     // 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();
@@ -1265,6 +1544,8 @@ export const installAppWorkspaceController = (options = {}) => {
     const changed = records.some(record => record.type === "attributes" ? record.target instanceof Element && record.target.matches(LAYOUT_REGION_SELECTOR) : [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some(layoutNode));
     if (!changed) return;
     syncObservedRoots();
+    // A new width token or a removed panel can end waiting without any box resizing.
+    if (records.some(record => record.type === "childList" || record.attributeName === "data-width" || record.attributeName === "data-workspace-main-min")) syncHostState();
     scheduleReconcile();
   });
   eventRoot.addEventListener("pointerdown", onPointerDown);
@@ -1274,6 +1555,10 @@ export const installAppWorkspaceController = (options = {}) => {
   ownerDocument.addEventListener("focusin", cancelTitleOnInteraction, true);
   ownerDocument.addEventListener("pointerdown", cancelTitleOnInteraction, true);
   ownerDocument.addEventListener("keydown", cancelTitleOnInteraction, true);
+  ownerDocument.addEventListener("click", onChoiceClick, true);
+  ownerDocument.addEventListener("keyup", endActivation, true);
+  ownerDocument.addEventListener("pointerup", endActivation, true);
+  ownerDocument.addEventListener("pointercancel", cancelActivation, true);
   eventRoot.addEventListener("pointerdown", rememberInteraction, true);
   eventRoot.addEventListener("keydown", rememberInteraction, true);
   eventRoot.addEventListener("focusin", onDetailFocusIn);
@@ -1289,7 +1574,7 @@ export const installAppWorkspaceController = (options = {}) => {
   });
   eventRoot.addEventListener("touchend", onDetailTouchEnd);
   eventRoot.addEventListener("touchcancel", onDetailTouchEnd);
-  compact?.addEventListener("change", onCompactChange);
+  phone?.addEventListener("change", syncHostState);
   phone?.addEventListener("change", syncPhonePages);
   eventRoot.addEventListener("keydown", onKeyDown);
   eventRoot.addEventListener("focusin", onFocusIn);
@@ -1299,7 +1584,7 @@ export const installAppWorkspaceController = (options = {}) => {
   mutationObserver?.observe(eventRoot, {
     attributes: true,
     attributeOldValue: true,
-    attributeFilter: ["hidden", "data-workspace-level-shown"],
+    attributeFilter: ["hidden", "data-workspace-level-shown", "data-width", "data-workspace-main-min"],
     childList: true,
     subtree: true
   });
@@ -1309,6 +1594,7 @@ export const installAppWorkspaceController = (options = {}) => {
     phonePageInerted.clear();
     phone?.removeEventListener("change", syncPhonePages);
     cancelTitle();
+    cancelPendingDetail();
     pendingAnchors.forEach(cancel => cancel());
     slides.forEach(end => end());
     stopScrollFades();
@@ -1327,6 +1613,11 @@ export const installAppWorkspaceController = (options = {}) => {
     ownerDocument.removeEventListener("focusin", cancelTitleOnInteraction, true);
     ownerDocument.removeEventListener("pointerdown", cancelTitleOnInteraction, true);
     ownerDocument.removeEventListener("keydown", cancelTitleOnInteraction, true);
+    clearActivation();
+    ownerDocument.removeEventListener("click", onChoiceClick, true);
+    ownerDocument.removeEventListener("keyup", endActivation, true);
+    ownerDocument.removeEventListener("pointerup", endActivation, true);
+    ownerDocument.removeEventListener("pointercancel", cancelActivation, true);
     eventRoot.removeEventListener("pointerdown", rememberInteraction, true);
     eventRoot.removeEventListener("keydown", rememberInteraction, true);
     eventRoot.removeEventListener("focusin", onDetailFocusIn);
@@ -1345,14 +1636,16 @@ export const installAppWorkspaceController = (options = {}) => {
     // torn down, so unmounting during a drag cannot lose the final size.
     stopResize();
     if (reconcileFrame !== null) cancelAnimationFrame(reconcileFrame);
+    if (hostSyncFrame !== null) cancelAnimationFrame(hostSyncFrame);
     mutationObserver?.disconnect();
     resizeObserver?.disconnect();
     observedRoots.clear();
+    observedHosts.clear();
     closeOverlay("none");
     eventRoot.removeEventListener("pointerdown", onPointerDown);
     eventRoot.removeEventListener("click", onClick);
     ownerDocument.removeEventListener("keydown", onOverlayKeyDown);
-    compact?.removeEventListener("change", onCompactChange);
+    phone?.removeEventListener("change", syncHostState);
     eventRoot.removeEventListener("keydown", onKeyDown);
     eventRoot.removeEventListener("focusin", onFocusIn);
     window.removeEventListener("resize", onResize);