@k2b/ui 0.22.0 → 0.23.0

package/dist/browser/layout/PageTitle.js

@@ -316,7 +316,8 @@ export function PageTitle(props) {
 
 /**
  * Keeps server-rendered titles of the host's trail current: a workspace head
- * that never hydrates, and an app's own header title from the host's trail.
+ * that never hydrates, its heading, and an app's own header title from the
+ * host's trail.
  * When the host publishes a new trail, for example after `setPageTrail()`,
  * each such title is replaced in place by a live one with the same element,
  * class, and subtitle, and a head learns whether it now has a page above it.
@@ -358,6 +359,8 @@ export const followPageTrail = (root = document) => {
         return dispose;
       }));
     }
+    // A server-rendered workspace heading carries only the title.
+    for (const heading of root.querySelectorAll("[data-k2b-page-trail-title][data-k2b-server]")) if (trail && !heading.closest("solid-island, solid-client")) heading.textContent = trail.title;
     // The row's `data-trail` decides whether it shows; it follows the depth.
     for (const row of root.querySelectorAll("[data-trail]:has(> .k2b-page-title[data-fallback])")) if (!row.closest("solid-island, solid-client")) row.dataset.trail = trail?.ancestors.length ? "up" : "title";
   };

package/dist/browser/layout/PageTitle.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/PageTitle.tsx"],"sourcesContent":["import { createContext, createRoot, createSignal, createUniqueId, For, type JSX, onCleanup, onMount, Show, useContext } from \"solid-js\";\nimport { Dynamic, insert, isServer } from \"solid-js/web\";\nimport { IconButtonLink } from \"../actions/Button\";\nimport { installPageTitleController, PAGE_TITLE_CONTROLLER_ATTRIBUTE } from \"./page-title-controller\";\nimport { useWorkspaceMessages } from \"./workspace-messages\";\n\n/** A page above the current one. Only pages someone can go back to are levels, so each has a link. */\nexport type PageTrailLink = { title: string; href: string };\n/** The current page and the pages above it, nearest last. */\nexport type PageTrailState = { title: string; ancestors: PageTrailLink[] };\n\nexport type PageTitleProps = {\n  trail: PageTrailState;\n  /** Quiet text after the title, for example a count. */\n  subtitle?: JSX.Element;\n  /** Defaults to `\"h1\"`. Chrome that repeats a title the page already shows uses `\"p\"`. */\n  as?: \"h1\" | \"h2\" | \"p\";\n  /**\n   * Marks a title drawn by surrounding chrome, such as the workspace head or a\n   * host shell. It steps back when the page renders its own `PageTitle`, so a\n   * page has one title with one way up.\n   */\n  fallback?: boolean;\n  class?: string;\n};\n\n/** Window event a host dispatches after publishing a new page trail. */\nexport const PAGE_TRAIL_EVENT = \"k2b:page-trail\";\nconst SOURCE_SELECTOR = \"script[data-k2b-page-trail]\";\n\nconst isTrail = (value: unknown): value is PageTrailState => {\n  if (!value || typeof value !== \"object\") return false;\n  const trail = value as Partial<PageTrailState>;\n  return (\n    typeof trail.title === \"string\" &&\n    Array.isArray(trail.ancestors) &&\n    trail.ancestors.every((link) => typeof link?.title === \"string\" && typeof link?.href === \"string\")\n  );\n};\n\n/** The trail a host published for this document, or `undefined` outside a browser or without one. */\nexport const readPageTrail = (): PageTrailState | undefined => {\n  if (typeof document === \"undefined\") return undefined;\n  const source = document.querySelector(SOURCE_SELECTOR);\n  if (!source?.textContent) return undefined;\n  try {\n    const value: unknown = JSON.parse(source.textContent);\n    return isTrail(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n};\n\n/** `<` is escaped so a title can never end the script element it travels in. */\nconst serializeTrail = (trail: PageTrailState): string => JSON.stringify(trail).replace(/</g, \"\\\\u003c\");\n\n/**\n * Publishes a new trail for the document in the browser, for example after an\n * in-page navigation. Workspace heads and page titles that read the host's\n * trail follow it.\n */\nexport const setPageTrail = (trail: PageTrailState): void => {\n  if (typeof document === \"undefined\") return;\n  let source = document.querySelector(SOURCE_SELECTOR);\n  if (!source) {\n    source = document.createElement(\"script\");\n    source.setAttribute(\"type\", \"application/json\");\n    source.setAttribute(\"data-k2b-page-trail\", \"\");\n    document.body.append(source);\n  }\n  source.textContent = serializeTrail(trail);\n  window.dispatchEvent(new Event(PAGE_TRAIL_EVENT));\n};\n\nconst PageTrailContext = createContext<() => PageTrailState | undefined>();\n\n/**\n * Gives a host's page trail to everything below it. During server rendering\n * the context carries it; the provider also publishes it into the document,\n * where browser-rendered parts such as islands read it. Below a provider that\n * renders in the browser, its `trail` prop is the source: update the prop.\n */\nexport function PageTrailProvider(props: { trail: PageTrailState | undefined; children: JSX.Element }): JSX.Element {\n  return (\n    <PageTrailContext.Provider value={() => props.trail}>\n      <Show when={props.trail}>\n        {(trail) => <script type=\"application/json\" data-k2b-page-trail=\"\" innerHTML={serializeTrail(trail())} />}\n      </Show>\n      {props.children}\n    </PageTrailContext.Provider>\n  );\n}\n\n/** The host's page trail: from the provider while rendering below it, otherwise from the document. */\nexport const usePageTrail = (): (() => PageTrailState | undefined) => {\n  const context = useContext(PageTrailContext);\n  if (context) return context;\n  if (typeof window === \"undefined\") return () => undefined;\n  const [trail, setTrail] = createSignal(readPageTrail());\n  const update = () => setTrail(readPageTrail());\n  window.addEventListener(PAGE_TRAIL_EVENT, update);\n  onCleanup(() => window.removeEventListener(PAGE_TRAIL_EVENT, update));\n  return trail;\n};\n\n/**\n * A page title with its way up. The number of pages above decides the form:\n * none shows the title alone; one puts \"‹ Parent\" above it; more put a path\n * row above it whose middle collapses into \"…\" only when it does not fit.\n * Both rows share the same height, so the title never moves between depths.\n * On phones a back arrow left of the title replaces the row above.\n */\nexport function PageTitle(props: PageTitleProps): JSX.Element {\n  const messages = useWorkspaceMessages();\n  // A title rendered on the server from the host's trail follows the host's later trails (see `followPageTrail`).\n  const host = isServer ? useContext(PageTrailContext) : undefined;\n  const menuId = `k2b-page-title-menu-${createUniqueId()}`;\n  const ancestors = () => props.trail.ancestors;\n  const parent = () => ancestors().at(-1);\n  let root: HTMLDivElement | undefined;\n  // A host may control every title in the document at once; a title outside\n  // one still collapses its path.\n  onMount(() => {\n    if (!root || root.closest(`[${PAGE_TITLE_CONTROLLER_ATTRIBUTE}]`)) return;\n    onCleanup(installPageTitleController(root));\n  });\n  return (\n    <div\n      ref={root}\n      class={`k2b-page-title ${props.class ?? \"\"}`}\n      data-depth={ancestors().length}\n      data-fallback={props.fallback ? \"\" : undefined}\n      data-k2b-server={isServer && props.trail === host?.() ? \"\" : undefined}\n    >\n      <Show when={parent()}>\n        {(up) => (\n          <IconButtonLink\n            class=\"k2b-page-title__back\"\n            href={up().href}\n            label={messages().backTo({ page: up().title })}\n            data-k2b-page-trail-link=\"\"\n            data-k2b-page-trail-up=\"\"\n          >\n            <i class=\"ti ti-chevron-left\" aria-hidden=\"true\" />\n          </IconButtonLink>\n        )}\n      </Show>\n      <div class=\"k2b-page-title__copy\">\n        <Show when={ancestors().length === 1 && parent()}>\n          {(up) => (\n            <nav class=\"k2b-page-title__trail\" aria-label={messages().path}>\n              <a\n                class=\"k2b-page-title__up\"\n                href={up().href}\n                aria-label={messages().backTo({ page: up().title })}\n                data-k2b-page-trail-link=\"\"\n                data-k2b-page-trail-up=\"\"\n              >\n                <i class=\"ti ti-chevron-left\" aria-hidden=\"true\" />\n                <span class=\"k2b-page-title__label\">{up().title}</span>\n              </a>\n            </nav>\n          )}\n        </Show>\n        <Show when={ancestors().length > 1}>\n          <nav class=\"k2b-page-title__trail\" aria-label={messages().path}>\n            <ol class=\"k2b-page-title__path\">\n              <For each={ancestors()}>\n                {(link, index) => (\n                  <>\n                    <Show when={index() === 1}>\n                      <li class=\"k2b-page-title__more\" hidden>\n                        <i class=\"ti ti-chevron-right\" aria-hidden=\"true\" />\n                        <button type=\"button\" class=\"k2b-page-title__more-button\" popovertarget={menuId} aria-label={messages().moreLevels}>\n                          …\n                        </button>\n                      </li>\n                    </Show>\n                    <li class=\"k2b-page-title__crumb\" data-index={index()}>\n                      <Show when={index() > 0}>\n                        <i class=\"ti ti-chevron-right\" aria-hidden=\"true\" />\n                      </Show>\n                      <a\n                        href={link.href}\n                        data-k2b-page-trail-link=\"\"\n                        data-k2b-page-trail-up={index() === ancestors().length - 1 ? \"\" : undefined}\n                        class=\"k2b-page-title__label\"\n                      >\n                        {link.title}\n                      </a>\n                    </li>\n                  </>\n                )}\n              </For>\n            </ol>\n            <div id={menuId} popover=\"auto\" class=\"k2b-dropdown__menu k2b-page-title__menu\">\n              <For each={ancestors()}>\n                {(link, index) => (\n                  <a class=\"k2b-dropdown__item\" href={link.href} data-index={index()} data-k2b-page-trail-link=\"\" hidden>\n                    {link.title}\n                  </a>\n                )}\n              </For>\n            </div>\n          </nav>\n        </Show>\n        <Dynamic component={props.as ?? \"h1\"} class=\"k2b-page-title__title\">\n          <span class=\"k2b-page-title__text\">{props.trail.title}</span>\n          <Show when={props.subtitle}>\n            <small class=\"k2b-page-title__subtitle\">{props.subtitle}</small>\n          </Show>\n        </Dynamic>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Keeps server-rendered titles of the host's trail current: a workspace head\n * that never hydrates, and an app's own header title from the host's trail.\n * When the host publishes a new trail, for example after `setPageTrail()`,\n * each such title is replaced in place by a live one with the same element,\n * class, and subtitle, and a head learns whether it now has a page above it.\n * Titles inside islands render in the browser anyway. Returns the disposer.\n */\nexport const followPageTrail = (root: ParentNode = document): (() => void) => {\n  const disposers: Array<() => void> = [];\n  const upgrade = () => {\n    const trail = readPageTrail();\n    for (const element of root.querySelectorAll<HTMLElement>(\".k2b-page-title[data-k2b-server]\")) {\n      const row = element.parentElement;\n      if (!row || element.closest(\"solid-island, solid-client\")) continue;\n      const tag = element.querySelector(\".k2b-page-title__title\")?.localName;\n      const as = tag === \"p\" || tag === \"h2\" ? tag : \"h1\";\n      const fallback = element.hasAttribute(\"data-fallback\");\n      const extra = [...element.classList].filter((name) => name !== \"k2b-page-title\").join(\" \") || undefined;\n      const subtitle = element.querySelector(\".k2b-page-title__subtitle\");\n      const subtitleNodes = subtitle ? [...subtitle.childNodes] : undefined;\n      // The live title takes the server title's place, before whatever follows it in the row.\n      const place = document.createTextNode(\"\");\n      row.insertBefore(place, element);\n      element.remove();\n      disposers.push(\n        createRoot((dispose) => {\n          const live = usePageTrail();\n          insert(\n            row,\n            () => (\n              <Show when={live()}>\n                {(current) => <PageTitle trail={current()} as={as} fallback={fallback} class={extra} subtitle={subtitleNodes} />}\n              </Show>\n            ),\n            place,\n          );\n          return dispose;\n        }),\n      );\n    }\n    // The row's `data-trail` decides whether it shows; it follows the depth.\n    for (const row of root.querySelectorAll<HTMLElement>(\"[data-trail]:has(> .k2b-page-title[data-fallback])\"))\n      if (!row.closest(\"solid-island, solid-client\")) row.dataset.trail = trail?.ancestors.length ? \"up\" : \"title\";\n  };\n  window.addEventListener(PAGE_TRAIL_EVENT, upgrade);\n  return () => {\n    window.removeEventListener(PAGE_TRAIL_EVENT, upgrade);\n    for (const dispose of disposers.splice(0)) dispose();\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/PageTitle.tsx"],"sourcesContent":["import { createContext, createRoot, createSignal, createUniqueId, For, type JSX, onCleanup, onMount, Show, useContext } from \"solid-js\";\nimport { Dynamic, insert, isServer } from \"solid-js/web\";\nimport { IconButtonLink } from \"../actions/Button\";\nimport { installPageTitleController, PAGE_TITLE_CONTROLLER_ATTRIBUTE } from \"./page-title-controller\";\nimport { useWorkspaceMessages } from \"./workspace-messages\";\n\n/** A page above the current one. Only pages someone can go back to are levels, so each has a link. */\nexport type PageTrailLink = { title: string; href: string };\n/** The current page and the pages above it, nearest last. */\nexport type PageTrailState = { title: string; ancestors: PageTrailLink[] };\n\nexport type PageTitleProps = {\n  trail: PageTrailState;\n  /** Quiet text after the title, for example a count. */\n  subtitle?: JSX.Element;\n  /** Defaults to `\"h1\"`. Chrome that repeats a title the page already shows uses `\"p\"`. */\n  as?: \"h1\" | \"h2\" | \"p\";\n  /**\n   * Marks a title drawn by surrounding chrome, such as the workspace head or a\n   * host shell. It steps back when the page renders its own `PageTitle`, so a\n   * page has one title with one way up.\n   */\n  fallback?: boolean;\n  class?: string;\n};\n\n/** Window event a host dispatches after publishing a new page trail. */\nexport const PAGE_TRAIL_EVENT = \"k2b:page-trail\";\nconst SOURCE_SELECTOR = \"script[data-k2b-page-trail]\";\n\nconst isTrail = (value: unknown): value is PageTrailState => {\n  if (!value || typeof value !== \"object\") return false;\n  const trail = value as Partial<PageTrailState>;\n  return (\n    typeof trail.title === \"string\" &&\n    Array.isArray(trail.ancestors) &&\n    trail.ancestors.every((link) => typeof link?.title === \"string\" && typeof link?.href === \"string\")\n  );\n};\n\n/** The trail a host published for this document, or `undefined` outside a browser or without one. */\nexport const readPageTrail = (): PageTrailState | undefined => {\n  if (typeof document === \"undefined\") return undefined;\n  const source = document.querySelector(SOURCE_SELECTOR);\n  if (!source?.textContent) return undefined;\n  try {\n    const value: unknown = JSON.parse(source.textContent);\n    return isTrail(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n};\n\n/** `<` is escaped so a title can never end the script element it travels in. */\nconst serializeTrail = (trail: PageTrailState): string => JSON.stringify(trail).replace(/</g, \"\\\\u003c\");\n\n/**\n * Publishes a new trail for the document in the browser, for example after an\n * in-page navigation. Workspace heads and page titles that read the host's\n * trail follow it.\n */\nexport const setPageTrail = (trail: PageTrailState): void => {\n  if (typeof document === \"undefined\") return;\n  let source = document.querySelector(SOURCE_SELECTOR);\n  if (!source) {\n    source = document.createElement(\"script\");\n    source.setAttribute(\"type\", \"application/json\");\n    source.setAttribute(\"data-k2b-page-trail\", \"\");\n    document.body.append(source);\n  }\n  source.textContent = serializeTrail(trail);\n  window.dispatchEvent(new Event(PAGE_TRAIL_EVENT));\n};\n\nconst PageTrailContext = createContext<() => PageTrailState | undefined>();\n\n/**\n * Gives a host's page trail to everything below it. During server rendering\n * the context carries it; the provider also publishes it into the document,\n * where browser-rendered parts such as islands read it. Below a provider that\n * renders in the browser, its `trail` prop is the source: update the prop.\n */\nexport function PageTrailProvider(props: { trail: PageTrailState | undefined; children: JSX.Element }): JSX.Element {\n  return (\n    <PageTrailContext.Provider value={() => props.trail}>\n      <Show when={props.trail}>\n        {(trail) => <script type=\"application/json\" data-k2b-page-trail=\"\" innerHTML={serializeTrail(trail())} />}\n      </Show>\n      {props.children}\n    </PageTrailContext.Provider>\n  );\n}\n\n/** The host's page trail: from the provider while rendering below it, otherwise from the document. */\nexport const usePageTrail = (): (() => PageTrailState | undefined) => {\n  const context = useContext(PageTrailContext);\n  if (context) return context;\n  if (typeof window === \"undefined\") return () => undefined;\n  const [trail, setTrail] = createSignal(readPageTrail());\n  const update = () => setTrail(readPageTrail());\n  window.addEventListener(PAGE_TRAIL_EVENT, update);\n  onCleanup(() => window.removeEventListener(PAGE_TRAIL_EVENT, update));\n  return trail;\n};\n\n/**\n * A page title with its way up. The number of pages above decides the form:\n * none shows the title alone; one puts \"‹ Parent\" above it; more put a path\n * row above it whose middle collapses into \"…\" only when it does not fit.\n * Both rows share the same height, so the title never moves between depths.\n * On phones a back arrow left of the title replaces the row above.\n */\nexport function PageTitle(props: PageTitleProps): JSX.Element {\n  const messages = useWorkspaceMessages();\n  // A title rendered on the server from the host's trail follows the host's later trails (see `followPageTrail`).\n  const host = isServer ? useContext(PageTrailContext) : undefined;\n  const menuId = `k2b-page-title-menu-${createUniqueId()}`;\n  const ancestors = () => props.trail.ancestors;\n  const parent = () => ancestors().at(-1);\n  let root: HTMLDivElement | undefined;\n  // A host may control every title in the document at once; a title outside\n  // one still collapses its path.\n  onMount(() => {\n    if (!root || root.closest(`[${PAGE_TITLE_CONTROLLER_ATTRIBUTE}]`)) return;\n    onCleanup(installPageTitleController(root));\n  });\n  return (\n    <div\n      ref={root}\n      class={`k2b-page-title ${props.class ?? \"\"}`}\n      data-depth={ancestors().length}\n      data-fallback={props.fallback ? \"\" : undefined}\n      data-k2b-server={isServer && props.trail === host?.() ? \"\" : undefined}\n    >\n      <Show when={parent()}>\n        {(up) => (\n          <IconButtonLink\n            class=\"k2b-page-title__back\"\n            href={up().href}\n            label={messages().backTo({ page: up().title })}\n            data-k2b-page-trail-link=\"\"\n            data-k2b-page-trail-up=\"\"\n          >\n            <i class=\"ti ti-chevron-left\" aria-hidden=\"true\" />\n          </IconButtonLink>\n        )}\n      </Show>\n      <div class=\"k2b-page-title__copy\">\n        <Show when={ancestors().length === 1 && parent()}>\n          {(up) => (\n            <nav class=\"k2b-page-title__trail\" aria-label={messages().path}>\n              <a\n                class=\"k2b-page-title__up\"\n                href={up().href}\n                aria-label={messages().backTo({ page: up().title })}\n                data-k2b-page-trail-link=\"\"\n                data-k2b-page-trail-up=\"\"\n              >\n                <i class=\"ti ti-chevron-left\" aria-hidden=\"true\" />\n                <span class=\"k2b-page-title__label\">{up().title}</span>\n              </a>\n            </nav>\n          )}\n        </Show>\n        <Show when={ancestors().length > 1}>\n          <nav class=\"k2b-page-title__trail\" aria-label={messages().path}>\n            <ol class=\"k2b-page-title__path\">\n              <For each={ancestors()}>\n                {(link, index) => (\n                  <>\n                    <Show when={index() === 1}>\n                      <li class=\"k2b-page-title__more\" hidden>\n                        <i class=\"ti ti-chevron-right\" aria-hidden=\"true\" />\n                        <button type=\"button\" class=\"k2b-page-title__more-button\" popovertarget={menuId} aria-label={messages().moreLevels}>\n                          …\n                        </button>\n                      </li>\n                    </Show>\n                    <li class=\"k2b-page-title__crumb\" data-index={index()}>\n                      <Show when={index() > 0}>\n                        <i class=\"ti ti-chevron-right\" aria-hidden=\"true\" />\n                      </Show>\n                      <a\n                        href={link.href}\n                        data-k2b-page-trail-link=\"\"\n                        data-k2b-page-trail-up={index() === ancestors().length - 1 ? \"\" : undefined}\n                        class=\"k2b-page-title__label\"\n                      >\n                        {link.title}\n                      </a>\n                    </li>\n                  </>\n                )}\n              </For>\n            </ol>\n            <div id={menuId} popover=\"auto\" class=\"k2b-dropdown__menu k2b-page-title__menu\">\n              <For each={ancestors()}>\n                {(link, index) => (\n                  <a class=\"k2b-dropdown__item\" href={link.href} data-index={index()} data-k2b-page-trail-link=\"\" hidden>\n                    {link.title}\n                  </a>\n                )}\n              </For>\n            </div>\n          </nav>\n        </Show>\n        <Dynamic component={props.as ?? \"h1\"} class=\"k2b-page-title__title\">\n          <span class=\"k2b-page-title__text\">{props.trail.title}</span>\n          <Show when={props.subtitle}>\n            <small class=\"k2b-page-title__subtitle\">{props.subtitle}</small>\n          </Show>\n        </Dynamic>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Keeps server-rendered titles of the host's trail current: a workspace head\n * that never hydrates, its heading, and an app's own header title from the\n * host's trail.\n * When the host publishes a new trail, for example after `setPageTrail()`,\n * each such title is replaced in place by a live one with the same element,\n * class, and subtitle, and a head learns whether it now has a page above it.\n * Titles inside islands render in the browser anyway. Returns the disposer.\n */\nexport const followPageTrail = (root: ParentNode = document): (() => void) => {\n  const disposers: Array<() => void> = [];\n  const upgrade = () => {\n    const trail = readPageTrail();\n    for (const element of root.querySelectorAll<HTMLElement>(\".k2b-page-title[data-k2b-server]\")) {\n      const row = element.parentElement;\n      if (!row || element.closest(\"solid-island, solid-client\")) continue;\n      const tag = element.querySelector(\".k2b-page-title__title\")?.localName;\n      const as = tag === \"p\" || tag === \"h2\" ? tag : \"h1\";\n      const fallback = element.hasAttribute(\"data-fallback\");\n      const extra = [...element.classList].filter((name) => name !== \"k2b-page-title\").join(\" \") || undefined;\n      const subtitle = element.querySelector(\".k2b-page-title__subtitle\");\n      const subtitleNodes = subtitle ? [...subtitle.childNodes] : undefined;\n      // The live title takes the server title's place, before whatever follows it in the row.\n      const place = document.createTextNode(\"\");\n      row.insertBefore(place, element);\n      element.remove();\n      disposers.push(\n        createRoot((dispose) => {\n          const live = usePageTrail();\n          insert(\n            row,\n            () => (\n              <Show when={live()}>\n                {(current) => <PageTitle trail={current()} as={as} fallback={fallback} class={extra} subtitle={subtitleNodes} />}\n              </Show>\n            ),\n            place,\n          );\n          return dispose;\n        }),\n      );\n    }\n    // A server-rendered workspace heading carries only the title.\n    for (const heading of root.querySelectorAll<HTMLElement>(\"[data-k2b-page-trail-title][data-k2b-server]\"))\n      if (trail && !heading.closest(\"solid-island, solid-client\")) heading.textContent = trail.title;\n    // The row's `data-trail` decides whether it shows; it follows the depth.\n    for (const row of root.querySelectorAll<HTMLElement>(\"[data-trail]:has(> .k2b-page-title[data-fallback])\"))\n      if (!row.closest(\"solid-island, solid-client\")) row.dataset.trail = trail?.ancestors.length ? \"up\" : \"title\";\n  };\n  window.addEventListener(PAGE_TRAIL_EVENT, upgrade);\n  return () => {\n    window.removeEventListener(PAGE_TRAIL_EVENT, upgrade);\n    for (const dispose of disposers.splice(0)) dispose();\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/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,94 @@ 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;
+          // a step can also land above Main's top or beside it, as in a board.
+          const page = ownerDocument.scrollingElement;
+          const vertical = verticalScroller(target, main) ?? page;
+          const horizontal = scrollerOn("x", target, main) ?? page;
+          const bounds = scroller => scroller && scroller !== page ? scroller.getBoundingClientRect() : null;
+          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 +573,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 +600,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 +627,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 +867,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 +948,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 +1013,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 +1032,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 +1056,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 +1117,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 +1152,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 +1181,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 +1209,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 +1230,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);