@k2b/ui 0.29.0 → 0.31.0

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

@@ -1,13 +1,12 @@
 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 { 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]";
-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]";
-/** Touch-tablet gestures remain viewport decisions. */
-const TOUCH_DRAWER_QUERY = "(min-width: 48rem) and (max-width: 63.999rem) and (pointer: coarse)";
 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();
@@ -40,6 +39,12 @@ const FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "input:not([dis
 /** 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;
@@ -52,6 +57,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";
@@ -101,7 +107,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)) : [];
@@ -116,14 +122,24 @@ 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 mainSpec = readAppWorkspaceWidth(mainElement(root)?.dataset.workspaceMainMin);
+  const mainMinValue = cssState(root, "--k2b-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,
-    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)) => {
@@ -135,7 +151,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
@@ -146,7 +162,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 ? {
@@ -157,10 +173,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);
@@ -201,18 +215,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]));
 };
@@ -229,7 +264,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
@@ -304,13 +339,12 @@ export const installAppWorkspaceController = (options = {}) => {
       if (!aside || aside.hidden || !detailWaiting(aside) || claimedToggleClicks.has(event)) return;
       claimedToggleClicks.add(event);
       if (detailDrawer(aside)) parkDetailDrawer(aside);else {
-        aside.dataset.workspaceDetailDrawer = "open";
-        detailButton.setAttribute("aria-expanded", "true");
-        syncDetailDrawerSpace(aside);
+        openDetailDrawer(aside);
         if (event.detail === 0) requestTitle(aside);else detailButton.focus({
           preventScroll: true
         });
       }
+      syncDetailRequestControls();
       return;
     }
     const toggle = target?.closest(TOGGLE_SELECTOR);
@@ -318,7 +352,7 @@ export const installAppWorkspaceController = (options = {}) => {
       const next = overlayTarget(toggle);
       if (!next || claimedToggleClicks.has(event)) return;
       claimedToggleClicks.add(event);
-      if (overlay?.sidebar === next.sidebar) closeOverlay("button");else if (cssState(next.root, "--k2b-workspace-sidebar-form") === "overlay") openOverlay(next);
+      if (overlay?.sidebar === next.sidebar) closeOverlay("button");else if (sidebarForm(next.root) === "overlay") openOverlay(next);
       return;
     }
     if (!overlay || !target) return;
@@ -386,8 +420,98 @@ 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 = () => {
+    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.
+  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 (overlay && cssState(overlay.root, "--k2b-workspace-sidebar-form") !== "overlay") closeOverlay("none");
+    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");
@@ -410,10 +534,10 @@ export const installAppWorkspaceController = (options = {}) => {
         });
       }
     }
+    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;
-  const touchDrawer = typeof window.matchMedia === "function" ? window.matchMedia(TOUCH_DRAWER_QUERY) : null;
   const detailSelector = ".k2b-app-workspace__detail";
   const grabberSelector = ".k2b-app-workspace__detail-grabber";
   const detailHidden = new WeakMap();
@@ -447,6 +571,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);
@@ -455,24 +609,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);
     }
   };
@@ -523,7 +690,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();
   };
@@ -573,14 +751,13 @@ export const installAppWorkspaceController = (options = {}) => {
     delete aside.dataset.workspaceDetailDragging;
   };
   const anchorItem = (root, aside, snapshot) => {
-    if (!wide?.matches || touchDrawer?.matches && closable(aside) || detailDrawer(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;
@@ -665,6 +842,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));
@@ -679,6 +932,7 @@ 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;
@@ -708,7 +962,11 @@ export const installAppWorkspaceController = (options = {}) => {
       if (detailDrag?.aside === aside) finishDetailDrag(true);
       return;
     }
-    if (detailWaiting(aside) && !detailDrawer(aside)) 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) {
@@ -722,7 +980,8 @@ 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.
     }
@@ -738,6 +997,7 @@ export const installAppWorkspaceController = (options = {}) => {
     if (!aside || !owningRoot || !isVisible(aside)) return;
     if (event.key === "Escape" && detailDrawer(aside)) {
       parkDetailDrawer(aside, true);
+      syncDetailRequestControls();
       event.preventDefault();
       return;
     }
@@ -764,7 +1024,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);
@@ -829,7 +1090,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);
@@ -918,7 +1179,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);
@@ -984,7 +1245,12 @@ export const installAppWorkspaceController = (options = {}) => {
     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`);
+    if (getComputedStyle(root).getPropertyValue(variable).trim()) {
+      const spec = readAppWorkspaceWidth(handle.dataset.workspaceDefaultSize) ?? (kind === "pane" ? APP_WORKSPACE_PANE_DEFAULT : APP_WORKSPACE_DETAIL_DEFAULT);
+      // A share must resolve at the pane, where the workspace length exists.
+      // `initial` clears an inherited SSR preference and restores its CSS fallback.
+      root.style.setProperty(variable, typeof spec === "number" ? `${spec}px` : "initial");
+    }
     // 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));
@@ -1221,7 +1487,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)) {
@@ -1248,7 +1514,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);
     });
@@ -1361,8 +1629,10 @@ 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();
     // 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();
@@ -1376,7 +1646,7 @@ export const installAppWorkspaceController = (options = {}) => {
     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")) syncHostState();
+    if (records.some(record => record.type === "childList" || record.attributeName === "data-width" || record.attributeName === "data-workspace-main-min")) syncHostState();
     scheduleReconcile();
   });
   eventRoot.addEventListener("pointerdown", onPointerDown);
@@ -1386,6 +1656,11 @@ export const installAppWorkspaceController = (options = {}) => {
   ownerDocument.addEventListener("focusin", cancelTitleOnInteraction, 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);
+  ownerDocument.addEventListener("pointercancel", cancelActivation, true);
   eventRoot.addEventListener("pointerdown", rememberInteraction, true);
   eventRoot.addEventListener("keydown", rememberInteraction, true);
   eventRoot.addEventListener("focusin", onDetailFocusIn);
@@ -1408,10 +1683,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"],
+    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
   });
@@ -1421,6 +1697,7 @@ export const installAppWorkspaceController = (options = {}) => {
     phonePageInerted.clear();
     phone?.removeEventListener("change", syncPhonePages);
     cancelTitle();
+    cancelPendingDetail();
     pendingAnchors.forEach(cancel => cancel());
     slides.forEach(end => end());
     stopScrollFades();
@@ -1439,6 +1716,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);
@@ -1457,7 +1739,11 @@ 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();
+    detailRequestExpanded.forEach((state, control) => restoreDetailRequestExpanded(control, state));
+    detailRequestExpanded.clear();
+    ownerDocument.removeEventListener("click", onDetailRequestClick, true);
     resizeObserver?.disconnect();
     observedRoots.clear();
     observedHosts.clear();