@k2b/ui 0.28.0 → 0.29.0

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

@@ -6,8 +6,36 @@ 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 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)";
+/** 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();
+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']";
@@ -59,8 +87,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) => {
@@ -228,7 +257,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 +297,28 @@ 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 {
+        aside.dataset.workspaceDetailDrawer = "open";
+        detailButton.setAttribute("aria-expanded", "true");
+        syncDetailDrawerSpace(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 (cssState(next.root, "--k2b-workspace-sidebar-form") === "overlay") openOverlay(next);
       return;
     }
     if (!overlay || !target) return;
@@ -310,6 +354,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 +383,37 @@ 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 syncHostState = () => {
+    if (overlay && cssState(overlay.root, "--k2b-workspace-sidebar-form") !== "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 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();
@@ -499,7 +573,7 @@ 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 || touchDrawer?.matches && closable(aside) || 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;
@@ -605,6 +679,7 @@ export const installAppWorkspaceController = (options = {}) => {
     const followedInteraction = snapshot?.fresh ?? false;
     if (snapshot) snapshot.fresh = false;
     if (aside.hidden) {
+      parkDetailDrawer(aside);
       if (pendingTitle?.aside === aside) cancelTitle();
       if (panelStep === aside) panelStep = null;
       if (root.hasAttribute("data-workspace-motion") && !prefersReducedMotion() && wide?.matches) {
@@ -633,6 +708,7 @@ export const installAppWorkspaceController = (options = {}) => {
       if (detailDrag?.aside === aside) finishDetailDrag(true);
       return;
     }
+    if (detailWaiting(aside) && !detailDrawer(aside)) return;
     anchorItem(root, aside, snapshot);
     if (phone?.matches) setDetent(aside, false);
     if (followedInteraction && snapshot) {
@@ -653,13 +729,18 @@ export const installAppWorkspaceController = (options = {}) => {
     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);
@@ -1196,14 +1277,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);
@@ -1265,6 +1375,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")) syncHostState();
     scheduleReconcile();
   });
   eventRoot.addEventListener("pointerdown", onPointerDown);
@@ -1289,7 +1401,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 +1411,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"],
     childList: true,
     subtree: true
   });
@@ -1348,11 +1460,12 @@ export const installAppWorkspaceController = (options = {}) => {
     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);