@k2b/ui 0.22.0 → 0.24.0

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

@@ -35,7 +35,11 @@ const sidebarHideable = root => sidebarElement(root)?.dataset.workspaceHideable
 export const APP_WORKSPACE_SIDEBAR_HIDE_EVENT = "k2b-app-workspace-sidebar-hide";
 /** Asks the owning `AppWorkspace.Detail` to close; its `onClose` decides. */
 export const APP_WORKSPACE_DETAIL_CLOSE_EVENT = "k2b-app-workspace-detail-close";
-/** Asks the owning `AppWorkspace.Detail` for the previous or next item, as `detail.direction` of `-1` or `1`. */
+/**
+ * Asks the owning Detail to step by `detail.direction` (`-1` or `1`). It writes
+ * the Main element showing the selection to `detail.item`, read synchronously
+ * by the controller after dispatch.
+ */
 export const APP_WORKSPACE_DETAIL_STEP_EVENT = "k2b-app-workspace-detail-step";
 const previewSidebarHidden = (root, hidden) => {
   const sidebar = sidebarElement(root);
@@ -64,16 +68,17 @@ const sizeLimits = (root, handle, kind) => {
   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") && isVisible(pane)) : [];
-  // A detail shares the content area with the main region, as the stylesheet
-  // fits it. The area already leaves out a sidebar in its own column; as the
-  // compact overlay or stacked above the content, the sidebar takes none of it.
+  // Content ends before the detail track, so its width alone would shrink a
+  // persisted panel again on every reconciliation. Measure from Content's
+  // start to the workspace's inner end: this includes the detail column and
+  // leaves out a desktop sidebar, while an overlay sidebar takes no width.
   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({
     kind,
-    workspaceSize: kind === "drawer" ? root.getBoundingClientRect().height : kind === "pane" && main ? main.getBoundingClientRect().width : (content ?? root).getBoundingClientRect().width,
-    reservedSize: kind === "detail" ? 16 : kind === "pane" ? panes.reduce((total, pane) => total + (pane === controlled ? 0 : elementSize(pane, "pane")), 0) : 0,
+    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) : 0,
     min: numberData(handle, "workspaceMinSize", defaultMin),
     max: numberData(handle, "workspaceMaxSize", defaultMax),
     sidebarCollapsible: kind === "sidebar" && sidebarCollapsible(root)
@@ -317,18 +322,17 @@ export const installAppWorkspaceController = (options = {}) => {
   const reducedMotion = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
   const detailSelector = ".k2b-app-workspace__detail";
   const grabberSelector = ".k2b-app-workspace__detail-grabber";
-  const trailSelector = ".k2b-detail-trail";
   const detailHidden = new WeakMap();
   const remembered = new WeakMap();
   const lastFocus = new WeakMap();
-  const trailPadding = new WeakMap();
-  const heldTrails = new Set();
   const touchedDetails = new Set();
   // Only a panel blocks scrolling for its touch gestures; a document-wide
   // non-passive listener would make every scroll on the page wait for script.
   const touchMoveAsides = new Set();
   const titleTabIndices = new Set();
   const motionFrames = new Map();
+  const pendingAnchors = new Map();
+  const slides = new Map();
   const motionRoots = new Set();
   const revealFrames = new Map();
   const openDetails = root => rootElements(root, detailSelector).filter(aside => !aside.hidden);
@@ -337,17 +341,19 @@ export const installAppWorkspaceController = (options = {}) => {
   const requestClose = aside => {
     if (aside.hasAttribute("data-workspace-detail-closable")) aside.dispatchEvent(new CustomEvent(APP_WORKSPACE_DETAIL_CLOSE_EVENT));else closeControl(aside)?.click();
   };
-  const verticalScroller = (target, boundary) => {
+  const scrollerOn = (axis, target, boundary) => {
     for (let element = target; element && boundary.contains(element); element = element.parentElement) {
-      if (element instanceof HTMLElement && /^(auto|scroll)$/.test(getComputedStyle(element).overflowY) && element.scrollHeight > element.clientHeight) return element;
+      if (element instanceof HTMLElement && /^(auto|scroll)$/.test(axis === "y" ? getComputedStyle(element).overflowY : getComputedStyle(element).overflowX) && (axis === "y" ? element.scrollHeight > element.clientHeight : element.scrollWidth > element.clientWidth)) return element;
       if (element === boundary) break;
     }
     return null;
   };
+  const verticalScroller = (target, boundary) => scrollerOn("y", target, boundary);
   const refreshItem = snapshot => {
     snapshot.top = snapshot.item.getBoundingClientRect().top;
     snapshot.scrollTop = snapshot.scroller?.scrollTop ?? 0;
   };
+  // A table row can exceed its scroller's width, so keep the clicked cell for horizontal reveal.
   const rememberInteraction = event => {
     const target = eventElement(event);
     const root = target?.closest(ROOT_SELECTOR);
@@ -358,8 +364,10 @@ export const installAppWorkspaceController = (options = {}) => {
     const item = target.closest(FOCUSABLE_SELECTOR);
     if (!main || !item || !main.contains(item) || item.closest(ROOT_SELECTOR) !== root) return;
     if (event instanceof KeyboardEvent && event.key !== "Enter" && event.key !== " ") return;
+    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",
       scroller: verticalScroller(item, main),
       scrollTop: 0,
@@ -417,7 +425,12 @@ export const installAppWorkspaceController = (options = {}) => {
     pendingTitle?.observer.disconnect();
     pendingTitle = null;
   };
+  // A step from inside the panel can remove the focused element with the old
+  // 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;
   const cancelTitleOnInteraction = event => {
+    if (event.type !== "keydown" && !(event.target instanceof Node && panelStep?.contains(event.target))) panelStep = null;
     if (event.type !== "focusin" || event.target !== focusingTitle) cancelTitle();
   };
   const requestTitle = (aside, waitForChange = false) => {
@@ -463,42 +476,104 @@ export const installAppWorkspaceController = (options = {}) => {
     aside.style.removeProperty("transform");
     delete aside.dataset.workspaceDetailDragging;
   };
-  const trailsIn = root => {
-    const main = mainElement(root);
-    return main ? rootElements(root, trailSelector).filter(trail => main.contains(trail)) : [];
-  };
-  const clearHolds = root => {
-    for (const trail of trailsIn(root)) {
-      trail.style.removeProperty("--k2b-detail-trail-hold");
-      heldTrails.delete(trail);
-    }
-  };
-  const rememberTrailPadding = root => {
-    if (!openDetails(root).some(isVisible)) return;
-    for (const trail of trailsIn(root)) trailPadding.set(trail, Number.parseFloat(getComputedStyle(trail).paddingInlineEnd) || 0);
-  };
-  const shrinkHold = trail => {
-    const hold = Number.parseFloat(trail.style.getPropertyValue("--k2b-detail-trail-hold")) || 0;
-    const visible = trail.scrollWidth <= trail.clientWidth || trail.scrollLeft < 1 ? 0 : Math.min(hold, Math.max(0, Math.ceil(trail.scrollLeft + trail.clientWidth - (trail.scrollWidth - hold))));
-    if (visible > 0) trail.style.setProperty("--k2b-detail-trail-hold", `${visible}px`);else {
-      trail.style.removeProperty("--k2b-detail-trail-hold");
-      heldTrails.delete(trail);
-    }
-  };
-  const onTrailScroll = event => {
-    const target = eventElement(event);
-    if (target instanceof HTMLElement && heldTrails.has(target)) shrinkHold(target);
-  };
   const anchorItem = (root, aside, snapshot) => {
-    if (!wide?.matches || touchDrawer?.matches && closable(aside) || trailsIn(root).length || !snapshot?.item.isConnected) return;
+    if (!wide?.matches || touchDrawer?.matches && closable(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).
+  const slide = (root, aside) => {
+    slides.get(root)?.();
+    if (!root.hasAttribute("data-workspace-motion") || reducedMotion?.matches || !wide?.matches) return;
+    const end = () => {
+      aside.removeEventListener("transitionend", onEnd);
+      aside.removeEventListener("transitioncancel", onEnd);
+      cancelAnimationFrame(frame);
+      slides.delete(root);
+      delete root.dataset.workspaceDetailSliding;
+    };
+    const onEnd = event => {
+      if (event.target === aside && event.propertyName === "transform") end();
+    };
+    aside.addEventListener("transitionend", onEnd);
+    aside.addEventListener("transitioncancel", onEnd);
+    // A slow first frame must not end the clip early, so only a panel that
+    // does not slide at all ends it in that frame.
+    const frame = requestAnimationFrame(() => {
+      const sliding = aside.getAnimations?.().some(animation => "transitionProperty" in animation && animation.transitionProperty === "transform");
+      if (!sliding) end();
+    });
+    slides.set(root, end);
+    root.dataset.workspaceDetailSliding = "";
+  };
+  const revealItem = (root, aside, snapshot) => {
+    const pending = revealFrames.get(root);
+    if (pending !== undefined) cancelAnimationFrame(pending);
+    revealFrames.set(root, requestAnimationFrame(() => {
+      revealFrames.delete(root);
+      if (!aside.hidden && aside.isConnected && snapshot.item.isConnected && mainElement(root)?.contains(snapshot.item) && snapshot.item.closest(ROOT_SELECTOR) === root) {
+        const behavior = reducedMotion?.matches ? "auto" : "smooth";
+        const main = mainElement(root);
+        const cell = snapshot.cell;
+        const target = cell?.isConnected && main?.contains(cell) ? cell : snapshot.item;
+        if (phone?.matches && main) {
+          // The sheet covers Main's lower part, so the item ends 8px above it;
+          // the other edges include the scroller's scroll padding, like scrollIntoView.
+          const page = ownerDocument.scrollingElement;
+          const vertical = verticalScroller(target, main) ?? page;
+          const horizontal = scrollerOn("x", target, main) ?? page;
+          const bounds = scroller => {
+            if (!scroller || scroller === page) return null;
+            const rect = scroller.getBoundingClientRect();
+            const style = ownerWindow.getComputedStyle(scroller);
+            const padding = value => Number.parseFloat(value) || 0;
+            return {
+              top: rect.top + padding(style.scrollPaddingTop),
+              left: rect.left + padding(style.scrollPaddingLeft),
+              right: rect.right - padding(style.scrollPaddingRight)
+            };
+          };
+          const box = target.getBoundingClientRect();
+          const top = Math.max(0, bounds(vertical)?.top ?? 0);
+          const left = Math.max(0, bounds(horizontal)?.left ?? 0);
+          const right = Math.min(ownerWindow.innerWidth, bounds(horizontal)?.right ?? Infinity);
+          const dy = box.top < top ? box.top - top - 8 : Math.max(0, box.bottom - (ownerWindow.innerHeight - aside.offsetHeight) + 8);
+          // As with scrollIntoView's "nearest", an item past both edges stays put
+          // and one wider than the view keeps its start in view.
+          const dx = box.left < left && box.right > right ? 0 : box.left < left ? box.left - left - 8 : box.right > right ? Math.min(box.right - right + 8, Math.max(0, box.left - left - 8)) : 0;
+          if (vertical && vertical === horizontal) {
+            if (dy || dx) vertical.scrollBy({
+              top: dy,
+              left: dx,
+              behavior
+            });
+          } else {
+            if (dy) vertical?.scrollBy({
+              top: dy,
+              behavior
+            });
+            if (dx) horizontal?.scrollBy({
+              left: dx,
+              behavior
+            });
+          }
+        } else target.scrollIntoView({
+          block: "nearest",
+          inline: "nearest",
+          behavior
+        });
+      }
+    }));
+  };
   const detailTransition = (aside, wasHidden) => {
     const root = aside.closest(ROOT_SELECTOR);
     detailHidden.set(aside, Boolean(aside.hidden));
     if (!root || !observedRoots.has(root) || Boolean(aside.hidden) === wasHidden) return;
+    pendingAnchors.get(root)?.();
+    slide(root, aside);
     touchedDetails.add(aside);
     const pending = revealFrames.get(root);
     if (pending !== undefined) cancelAnimationFrame(pending);
@@ -508,18 +583,25 @@ export const installAppWorkspaceController = (options = {}) => {
     if (snapshot) snapshot.fresh = false;
     if (aside.hidden) {
       if (pendingTitle?.aside === aside) cancelTitle();
-      const trails = trailsIn(root);
-      // Restore all padding before the first layout read, or the browser can
-      // clamp scrollLeft as soon as the open panel's trailing space disappears.
-      for (const trail of trails) {
-        const hold = trailPadding.get(trail) ?? 0;
-        if (hold > 0) {
-          trail.style.setProperty("--k2b-detail-trail-hold", `${hold}px`);
-          heldTrails.add(trail);
-        }
-      }
-      trails.forEach(shrinkHold);
-      anchorItem(root, aside, snapshot);
+      if (panelStep === aside) panelStep = null;
+      if (root.hasAttribute("data-workspace-motion") && !reducedMotion?.matches && wide?.matches) {
+        // Closing holds the detail column until the slide ends; anchor after Main widens.
+        const cancel = () => {
+          root.removeEventListener("transitionend", onTransitionEnd);
+          clearTimeout(timer);
+          pendingAnchors.delete(root);
+        };
+        const finish = () => {
+          cancel();
+          if (aside.hidden && aside.isConnected) anchorItem(root, aside, snapshot);
+        };
+        const onTransitionEnd = event => {
+          if (event.target === root && event.propertyName === "--k2b-workspace-detail-track") finish();
+        };
+        const timer = setTimeout(finish, 300);
+        root.addEventListener("transitionend", onTransitionEnd);
+        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({
         preventScroll: true
@@ -528,30 +610,10 @@ export const installAppWorkspaceController = (options = {}) => {
       if (detailDrag?.aside === aside) finishDetailDrag(true);
       return;
     }
-    clearHolds(root);
     anchorItem(root, aside, snapshot);
     if (phone?.matches) setDetent(aside, false);
-    rememberTrailPadding(root);
     if (followedInteraction && snapshot) {
-      revealFrames.set(root, requestAnimationFrame(() => {
-        revealFrames.delete(root);
-        if (!aside.hidden && aside.isConnected && snapshot.item.isConnected && mainElement(root)?.contains(snapshot.item) && snapshot.item.closest(ROOT_SELECTOR) === root) {
-          const behavior = reducedMotion?.matches ? "auto" : "smooth";
-          if (phone?.matches) {
-            const sheetTop = ownerWindow.innerHeight - aside.offsetHeight;
-            const overlap = snapshot.item.getBoundingClientRect().bottom - sheetTop + 8;
-            const main = mainElement(root);
-            if (overlap > 0 && main) (verticalScroller(snapshot.item, main) ?? ownerDocument.scrollingElement)?.scrollBy({
-              top: overlap,
-              behavior
-            });
-          } else snapshot.item.scrollIntoView({
-            block: "nearest",
-            inline: "nearest",
-            behavior
-          });
-        }
-      }));
+      revealItem(root, aside, snapshot);
       if (snapshot.interaction === "keyboard" || phone?.matches) requestTitle(aside);
     }
   };
@@ -575,11 +637,45 @@ export const installAppWorkspaceController = (options = {}) => {
     }
     const owningRoot = aside?.closest(ROOT_SELECTOR);
     if (!aside || !owningRoot) 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")) aside.dispatchEvent(new CustomEvent(APP_WORKSPACE_DETAIL_STEP_EVENT, {
-      detail: {
+    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);
+      const inPanel = aside.contains(target) || target === ownerDocument.body && panelStep === aside;
+      panelStep = inPanel ? aside : null;
+      const previousTitle = inPanel ? titleIn(aside) : null;
+      const previousText = previousTitle?.textContent;
+      const detail = {
         direction: event.key.toLowerCase() === "j" ? 1 : -1
+      };
+      aside.dispatchEvent(new CustomEvent(APP_WORKSPACE_DETAIL_STEP_EVENT, {
+        detail
+      }));
+      const shown = detail.item;
+      const item = shown instanceof HTMLElement && main?.contains(shown) && shown.closest(ROOT_SELECTOR) === owningRoot ? shown : null;
+      if (item && main) {
+        const snapshot = {
+          item,
+          cell: null,
+          interaction: "keyboard",
+          scroller: verticalScroller(item, main),
+          scrollTop: 0,
+          top: 0,
+          fresh: false
+        };
+        refreshItem(snapshot);
+        remembered.set(owningRoot, snapshot);
+        revealItem(owningRoot, aside, snapshot);
       }
-    }));else if (event.key === "F6") {
+      const title = titleIn(aside);
+      if (item && inMain) item.focus({
+        preventScroll: true
+      });
+      // A panel that swapped its title during the event has the new one now.
+      else if (item && inPanel && title && (title !== previousTitle || title.textContent !== previousText)) focusTitle(aside);
+      // This key's capture cancelled an earlier step's title request, so a
+      // step from the body, even past the last item, asks again.
+      else if (inPanel && (item || target === ownerDocument.body)) requestTitle(aside, Boolean(item));
+    } else if (event.key === "F6") {
       if (aside.contains(target)) {
         const item = remembered.get(owningRoot)?.item;
         const main = mainElement(owningRoot);
@@ -781,7 +877,6 @@ export const installAppWorkspaceController = (options = {}) => {
     root.style.removeProperty(variable);
     if (getComputedStyle(root).getPropertyValue(variable).trim()) root.style.setProperty(variable, `${numberData(handle, "workspaceDefaultSize", APP_WORKSPACE_DETAIL_DEFAULT)}px`);
     updateHandleValue(root, handle, "detail", currentSize(root, handle, "detail"));
-    rememberTrailPadding(root);
     options.writeState?.(layoutState);
   };
   const stopScrollFades = installScrollFades(eventRoot);
@@ -863,7 +958,6 @@ export const installAppWorkspaceController = (options = {}) => {
       const size = finished.kind === "pane" ? finished.liveSize : applySize(finished.root, finished.handle, finished.kind, finished.liveSize);
       persistSize(finished.handle, finished.kind, size);
       if (finished.kind !== "drawer") reconcilePanes(finished.root, layoutState);
-      if (finished.kind === "detail") rememberTrailPadding(finished.root);
     }
     if (finished.handle.hasPointerCapture?.(finished.pointerId)) finished.handle.releasePointerCapture(finished.pointerId);
     finished.releaseTextSelection();
@@ -929,7 +1023,6 @@ export const installAppWorkspaceController = (options = {}) => {
     event.preventDefault();
     persistSize(handle, kind, applySize(root, handle, kind, requested));
     if (kind === "sidebar" || kind === "detail") reconcilePanes(root, layoutState);
-    if (kind === "detail") rememberTrailPadding(root);
   };
   const allRoots = () => {
     const nested = Array.from(eventRoot.querySelectorAll(ROOT_SELECTOR));
@@ -949,7 +1042,6 @@ export const installAppWorkspaceController = (options = {}) => {
           if (aside.dataset.workspaceDetailSheet === "full") setDetent(aside, false);
         }
       }
-      rememberTrailPadding(root);
     });
     roots().forEach(root => {
       // `data-workspace-resizable="false"` already refuses pointer and keyboard
@@ -974,7 +1066,6 @@ export const installAppWorkspaceController = (options = {}) => {
       });
       reconcilePanes(root, layoutState, active?.root === root ? active : null);
     });
-    heldTrails.forEach(shrinkHold);
   };
   /**
    * A handle's limits move whenever anything around it does — opening a detail
@@ -1036,6 +1127,8 @@ export const installAppWorkspaceController = (options = {}) => {
     const next = new Set(allRoots());
     observedRoots.forEach(root => {
       if (!next.has(root)) {
+        pendingAnchors.get(root)?.();
+        slides.get(root)?.();
         resizeObserver?.unobserve(root);
         const frame = motionFrames.get(root);
         if (frame !== undefined) cancelAnimationFrame(frame);
@@ -1069,7 +1162,6 @@ export const installAppWorkspaceController = (options = {}) => {
           }));
         }));
       }
-      rememberTrailPadding(root);
     });
   };
   const layoutNode = node => node instanceof Element && (node.matches(LAYOUT_REGION_SELECTOR) || Boolean(node.querySelector(LAYOUT_REGION_SELECTOR)));
@@ -1099,10 +1191,6 @@ export const installAppWorkspaceController = (options = {}) => {
   eventRoot.addEventListener("pointerdown", rememberInteraction, true);
   eventRoot.addEventListener("keydown", rememberInteraction, true);
   eventRoot.addEventListener("focusin", onDetailFocusIn);
-  eventRoot.addEventListener("scroll", onTrailScroll, {
-    passive: true,
-    capture: true
-  });
   eventRoot.addEventListener("pointerdown", onSheetPointerDown);
   eventRoot.addEventListener("click", onGrabberClick);
   eventRoot.addEventListener("dblclick", onDetailDoubleClick);
@@ -1131,13 +1219,14 @@ export const installAppWorkspaceController = (options = {}) => {
   scheduleReconcile();
   return () => {
     cancelTitle();
+    pendingAnchors.forEach(cancel => cancel());
+    slides.forEach(end => end());
     stopScrollFades();
     finishDetailDrag(true);
     if (suppressedClickTimer !== null) clearTimeout(suppressedClickTimer);
     motionFrames.forEach(cancelAnimationFrame);
     revealFrames.forEach(cancelAnimationFrame);
     motionRoots.forEach(root => delete root.dataset.workspaceMotion);
-    heldTrails.forEach(trail => trail.style.removeProperty("--k2b-detail-trail-hold"));
     touchedDetails.forEach(aside => {
       clearDrag(aside);
       delete aside.dataset.workspaceDetailSheet;
@@ -1151,7 +1240,6 @@ export const installAppWorkspaceController = (options = {}) => {
     eventRoot.removeEventListener("pointerdown", rememberInteraction, true);
     eventRoot.removeEventListener("keydown", rememberInteraction, true);
     eventRoot.removeEventListener("focusin", onDetailFocusIn);
-    eventRoot.removeEventListener("scroll", onTrailScroll, true);
     eventRoot.removeEventListener("pointerdown", onSheetPointerDown);
     eventRoot.removeEventListener("click", onGrabberClick);
     eventRoot.removeEventListener("dblclick", onDetailDoubleClick);