@k2b/ui 0.31.0 → 0.33.0

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

@@ -1,6 +1,6 @@
 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]";
@@ -26,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
   });
 };
@@ -66,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";
 /**
@@ -80,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();
@@ -336,9 +347,20 @@ 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
@@ -435,6 +457,15 @@ export const installAppWorkspaceController = (options = {}) => {
     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)) : [];
@@ -509,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()) {
@@ -525,11 +612,13 @@ 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
         });
       }
@@ -648,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.
@@ -694,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;
@@ -955,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);
@@ -1232,34 +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()) {
-      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");
+    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
+      };
     }
-    // The siblings fit again around the default width, also in a Main without levels.
-    if (kind === "pane") reconcilePanes(root, layoutState);
+    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;
@@ -1281,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
@@ -1422,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,
@@ -1500,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
@@ -1654,6 +1812,7 @@ 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);
@@ -1714,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();