@k2b/ui 0.30.0 → 0.31.0

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

@@ -1,6 +1,7 @@
 import { suppressTextSelection } from "../internal/text-selection";
 import { prefersReducedMotion } from "../motion";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspacePanelVariable, appWorkspaceResizeLimits, fitAppWorkspacePaneSizes, normalizeAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, shouldCollapseAppWorkspaceSidebar } from "./app-workspace-state";
+import { 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]";
@@ -121,8 +122,9 @@ const sizeLimits = (root, handle, kind, reserveMainMinimum = true) => {
   const content = kind === "detail" ? controlled?.closest(".k2b-app-workspace__content") : null;
   const defaultMin = kind === "sidebar" ? APP_WORKSPACE_SIDEBAR_MIN : kind === "pane" ? APP_WORKSPACE_PANE_MIN : kind === "detail" ? APP_WORKSPACE_DETAIL_MIN : APP_WORKSPACE_DRAWER_MIN;
   const defaultMax = kind === "sidebar" ? APP_WORKSPACE_SIDEBAR_MAX : kind === "pane" ? APP_WORKSPACE_PANE_MAX : kind === "detail" ? APP_WORKSPACE_DETAIL_MAX : APP_WORKSPACE_DRAWER_MAX;
+  const mainSpec = readAppWorkspaceWidth(mainElement(root)?.dataset.workspaceMainMin);
   const mainMinValue = cssState(root, "--k2b-workspace-main-min");
-  const mainMin = mainMinValue.endsWith("px") ? Number.parseFloat(mainMinValue) : APP_WORKSPACE_MAIN_MIN;
+  const mainMin = typeof mainSpec === "object" ? resolveAppWorkspaceWidth(mainSpec, root.getBoundingClientRect().width) : mainMinValue.endsWith("px") ? Number.parseFloat(mainMinValue) : APP_WORKSPACE_MAIN_MIN;
   const mainExtra = Math.max(0, (Number.isFinite(mainMin) ? mainMin : APP_WORKSPACE_MAIN_MIN) - APP_WORKSPACE_MAIN_MIN);
   const limits = appWorkspaceResizeLimits({
     kind,
@@ -213,18 +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]));
 };
@@ -321,6 +344,7 @@ export const installAppWorkspaceController = (options = {}) => {
           preventScroll: true
         });
       }
+      syncDetailRequestControls();
       return;
     }
     const toggle = target?.closest(TOGGLE_SELECTOR);
@@ -396,10 +420,79 @@ 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.
@@ -441,6 +534,7 @@ 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;
@@ -903,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;
     }
@@ -1150,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));
@@ -1529,6 +1629,7 @@ export const installAppWorkspaceController = (options = {}) => {
   };
   const layoutNode = node => node instanceof Element && (node.matches(LAYOUT_REGION_SELECTOR) || Boolean(node.querySelector(LAYOUT_REGION_SELECTOR)));
   const mutationObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(records => {
+    if (records.some(record => record.type === "childList" || ["hidden", "aria-controls", "aria-expanded", "data-workspace-detail-drawer"].includes(record.attributeName ?? ""))) syncDetailRequestControls();
     syncPhonePages();
     if (pendingTitle && (pendingTitle.aside.hidden || !pendingTitle.aside.isConnected)) cancelTitle();
     if (pendingDetail && (!canOpenPendingDetail(pendingDetail.aside) || !pendingDetail.snapshot.chosen || !pendingDetail.snapshot.item.isConnected)) cancelPendingDetail();
@@ -1555,6 +1656,7 @@ 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);
@@ -1581,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", "data-workspace-main-min"],
+    attributeFilter: ["hidden", "aria-controls", "aria-expanded", "data-workspace-detail-drawer", "data-workspace-level-shown", "data-width", "data-workspace-main-min", "data-workspace-default-size"],
     childList: true,
     subtree: true
   });
@@ -1638,6 +1741,9 @@ export const installAppWorkspaceController = (options = {}) => {
     if (reconcileFrame !== null) cancelAnimationFrame(reconcileFrame);
     if (hostSyncFrame !== null) cancelAnimationFrame(hostSyncFrame);
     mutationObserver?.disconnect();
+    detailRequestExpanded.forEach((state, control) => restoreDetailRequestExpanded(control, state));
+    detailRequestExpanded.clear();
+    ownerDocument.removeEventListener("click", onDetailRequestClick, true);
     resizeObserver?.disconnect();
     observedRoots.clear();
     observedHosts.clear();