@k2b/ui 0.20.0 → 0.22.0

package/dist/browser/layout/AppWorkspace.js

@@ -1,9 +1,9 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { addEventListener as _$addEventListener } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
-import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
@@ -20,54 +20,63 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$2 = /*#__PURE__*/_$template(`<div>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__main-primary data-workspace-main-region=main>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<section>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<aside>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-desktop>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<script>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<footer>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-section-count>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-section-toggle><!$><!/><i aria-hidden=true>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-section-content>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<h2>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-mention aria-hidden=true>@`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-muted aria-hidden=true><i class="ti ti-bell-off">`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-count>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status><!$><!/><!$><!/><span class=k2b-app-workspace__sidebar-status-unread aria-hidden=true></span><span class=k2b-sr-only>, <!$><!/>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-dot>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<button type=button>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<a>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><!$><!/><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<div role=tree>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
+  _tmpl$5 = /*#__PURE__*/_$template(`<style>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<aside><button type=button class=k2b-app-workspace__detail-grabber aria-pressed=false><span aria-hidden=true></span></button><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<aside>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-desktop>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<script>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<footer>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-section-count>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-section-toggle><!$><!/><i aria-hidden=true>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-section-content>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<h2>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-mention aria-hidden=true>@`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-muted aria-hidden=true><i class="ti ti-bell-off">`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-count>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status><!$><!/><!$><!/><span class=k2b-app-workspace__sidebar-status-unread aria-hidden=true></span><span class=k2b-sr-only>, <!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-dot>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><!$><!/><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><span class=k2b-app-workspace__sidebar-item-description>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<div role=tree>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><!$><!/>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace><!$><!/><!$><!/>`);
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
-import { useUiMessages } from "../intl/messages";
-import { APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
+import { IconButton } from "../actions/Button";
+import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_WORKSPACE_SIDEBAR_HIDE_EVENT, installAppWorkspaceController } from "./app-workspace-controller";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
+import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
 import { createScrollFade } from "./scroll-fade";
 import { assertStableUiId, assertUniqueStableUiIds } from "./stable-id";
+import { useWorkspaceMessages } from "./workspace-messages";
 const ResizeContext = createContext(true);
+/** The enclosing workspace: its head names the sidebar, and a nested workspace leaves the page title to it. */
+const WorkspaceContext = createContext();
 const LayoutStateContext = createContext(null);
 const MAIN_PANE = Symbol("AppWorkspace.MainPane");
 const SIDEBAR_DESKTOP = Symbol("AppWorkspace.SidebarDesktop");
@@ -89,11 +98,11 @@ const sidebarChildSlot = value => Boolean(value && typeof value === "object" &&
 const sidebarItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && [SIDEBAR_ITEM_ICON, SIDEBAR_ITEM_LABEL, SIDEBAR_ITEM_META, SIDEBAR_ITEM_ACTION].includes(value.kind));
 const navTreeItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === NAV_TREE_ITEM);
 function ResizeHandle(props) {
-  const messages = useUiMessages();
+  const workspaceMessages = useWorkspaceMessages();
   return (() => {
     var _el$ = _$getNextElement(_tmpl$);
     _$effect(_p$ => {
-      var _v$ = props.label ?? (props.kind === "sidebar" ? messages().resizeNavigation : props.kind === "pane" ? messages().resizeWorkspacePane : props.kind === "detail" ? messages().resizeDetailPanel : messages().resizeBottomDrawer),
+      var _v$ = props.label ?? (props.kind === "sidebar" ? workspaceMessages().resizeNavigation : props.kind === "pane" ? workspaceMessages().resizeWorkspacePane : props.kind === "detail" ? workspaceMessages().resizeDetailPanel : workspaceMessages().resizeBottomDrawer),
         _v$2 = props.controls,
         _v$3 = props.kind === "drawer" ? "horizontal" : "vertical",
         _v$4 = props.minSize,
@@ -320,7 +329,8 @@ function AppWorkspaceMain(props) {
                       _v$20 = pane.props.scroll === false ? "false" : undefined,
                       _v$21 = pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : undefined,
                       _v$22 = isAnchor() ? undefined : {
-                        "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize()}px)`
+                        "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize()}px)`,
+                        "--k2b-workspace-panel-min": `${minSize()}px`
                       };
                     _v$13 !== _p$.e && _$setAttribute(_el$4, "id", _p$.e = _v$13);
                     _v$14 !== _p$.t && _$className(_el$4, _p$.t = _v$14);
@@ -365,15 +375,16 @@ function AppWorkspaceMain(props) {
   })();
 }
 function AppWorkspaceDetail(props) {
+  const workspaceMessages = useWorkspaceMessages();
   const rootResizable = useContext(ResizeContext);
   const panelId = () => assertStableUiId(props.id, "AppWorkspace.Detail id");
   const domId = () => `k2b-workspace-detail-${panelId()}`;
   const variable = () => appWorkspacePanelVariable("detail", panelId());
-  // Cloud's `detailDefaultWidth`. These feed `aria-valuenow` and the
+  // Start widths of 20, 26, 30, and 34 rem. They feed `aria-valuenow` and the
   // `var(…, Npx)` first-paint fallback, so they are behaviour, not taste.
   const widths = {
-    sm: 288,
-    md: 384,
+    sm: 320,
+    md: 416,
     lg: 480,
     xl: 544
   };
@@ -381,7 +392,39 @@ function AppWorkspaceDetail(props) {
   const minWidth = () => props.minWidth ?? APP_WORKSPACE_DETAIL_MIN;
   const maxWidth = () => Math.max(minWidth(), props.maxWidth ?? APP_WORKSPACE_DETAIL_MAX);
   const resizable = () => props.resizable ?? rootResizable;
-  return [_$createComponent(Show, {
+  const size = () => resizable() ? `var(${variable()}, ${defaultWidth()}px)` : `${defaultWidth()}px`;
+  const sizeStyle = () => ({
+    "--k2b-workspace-panel-size": size(),
+    "--k2b-workspace-panel-min": `${minWidth()}px`,
+    "--k2b-workspace-panel-max": `${maxWidth()}px`
+  });
+  // The panel floats over the content area, and `Main` beside it makes room
+  // in CSS alone, so a server-rendered page arrives in its final geometry. A
+  // sibling cannot read the panel's own variables, so this rule hands the
+  // open panel's size to the content area around it.
+  const contentRule = () => {
+    const open = `#${domId()}:not([hidden])`;
+    return `.k2b-app-workspace__content:has(> ${open}, > :is(solid-island, solid-client) > ${open}){--k2b-detail-size:${size()};--k2b-detail-min:${minWidth()}px;--k2b-detail-max:${maxWidth()}px}`;
+  };
+  let aside;
+  onMount(() => {
+    const close = () => props.onClose?.();
+    const step = event => {
+      const direction = event instanceof CustomEvent ? event.detail?.direction : undefined;
+      if (direction === 1 || direction === -1) props.onStep?.(direction);
+    };
+    aside?.addEventListener(APP_WORKSPACE_DETAIL_CLOSE_EVENT, close);
+    aside?.addEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
+    onCleanup(() => {
+      aside?.removeEventListener(APP_WORKSPACE_DETAIL_CLOSE_EVENT, close);
+      aside?.removeEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
+    });
+  });
+  return [(() => {
+    var _el$5 = _$getNextElement(_tmpl$5);
+    _$effect(() => _$setProperty(_el$5, "innerHTML", contentRule()));
+    return _el$5;
+  })(), _$createComponent(Show, {
     get when() {
       return resizable();
     },
@@ -404,34 +447,43 @@ function AppWorkspaceDetail(props) {
         get maxSize() {
           return maxWidth();
         },
-        shadow: true,
         get style() {
-          return {
-            "--k2b-workspace-panel-size": `var(${variable()}, ${defaultWidth()}px)`
-          };
+          return sizeStyle();
         }
       });
     }
   }), (() => {
-    var _el$5 = _$getNextElement(_tmpl$5);
-    _$insert(_el$5, () => props.children);
+    var _el$6 = _$getNextElement(_tmpl$6),
+      _el$7 = _el$6.firstChild,
+      _el$8 = _el$7.nextSibling,
+      [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling);
+    var _ref$ = aside;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$6) : aside = _el$6;
+    _$insert(_el$6, () => props.children, _el$9, _co$);
     _$effect(_p$ => {
       var _v$23 = domId(),
         _v$24 = `k2b-app-workspace__detail ${props.class ?? ""}`,
         _v$25 = props.width ?? "md",
         _v$26 = panelId(),
         _v$27 = resizable() ? "true" : "false",
-        _v$28 = !props.open,
-        _v$29 = `var(${variable()}, ${defaultWidth()}px)`,
-        _v$30 = props.viewTransitionName;
-      _v$23 !== _p$.e && _$setAttribute(_el$5, "id", _p$.e = _v$23);
-      _v$24 !== _p$.t && _$className(_el$5, _p$.t = _v$24);
-      _v$25 !== _p$.a && _$setAttribute(_el$5, "data-width", _p$.a = _v$25);
-      _v$26 !== _p$.o && _$setAttribute(_el$5, "data-workspace-panel-id", _p$.o = _v$26);
-      _v$27 !== _p$.i && _$setAttribute(_el$5, "data-workspace-resizable", _p$.i = _v$27);
-      _v$28 !== _p$.n && _$setProperty(_el$5, "hidden", _p$.n = _v$28);
-      _v$29 !== _p$.s && _$setStyleProperty(_el$5, "--k2b-workspace-panel-size", _p$.s = _v$29);
-      _v$30 !== _p$.h && _$setStyleProperty(_el$5, "view-transition-name", _p$.h = _v$30);
+        _v$28 = props.onClose ? "true" : undefined,
+        _v$29 = props.onStep ? "true" : undefined,
+        _v$30 = !props.open,
+        _v$31 = {
+          ...sizeStyle(),
+          "view-transition-name": props.viewTransitionName
+        },
+        _v$32 = workspaceMessages().detailFullHeight;
+      _v$23 !== _p$.e && _$setAttribute(_el$6, "id", _p$.e = _v$23);
+      _v$24 !== _p$.t && _$className(_el$6, _p$.t = _v$24);
+      _v$25 !== _p$.a && _$setAttribute(_el$6, "data-width", _p$.a = _v$25);
+      _v$26 !== _p$.o && _$setAttribute(_el$6, "data-workspace-panel-id", _p$.o = _v$26);
+      _v$27 !== _p$.i && _$setAttribute(_el$6, "data-workspace-resizable", _p$.i = _v$27);
+      _v$28 !== _p$.n && _$setAttribute(_el$6, "data-workspace-detail-closable", _p$.n = _v$28);
+      _v$29 !== _p$.s && _$setAttribute(_el$6, "data-workspace-detail-steppable", _p$.s = _v$29);
+      _v$30 !== _p$.h && _$setProperty(_el$6, "hidden", _p$.h = _v$30);
+      _p$.r = _$style(_el$6, _v$31, _p$.r);
+      _v$32 !== _p$.d && _$setAttribute(_el$7, "aria-label", _p$.d = _v$32);
       return _p$;
     }, {
       e: undefined,
@@ -441,9 +493,11 @@ function AppWorkspaceDetail(props) {
       i: undefined,
       n: undefined,
       s: undefined,
-      h: undefined
+      h: undefined,
+      r: undefined,
+      d: undefined
     });
-    return _el$5;
+    return _el$6;
   })()];
 }
 function AppWorkspaceBottomDrawer(props) {
@@ -493,25 +547,25 @@ function AppWorkspaceBottomDrawer(props) {
       });
     }
   }), (() => {
-    var _el$6 = _$getNextElement(_tmpl$5);
-    _$insert(_el$6, () => props.children);
+    var _el$0 = _$getNextElement(_tmpl$7);
+    _$insert(_el$0, () => props.children);
     _$effect(_p$ => {
-      var _v$31 = domId(),
-        _v$32 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
-        _v$33 = props.height ?? "md",
-        _v$34 = panelId(),
-        _v$35 = resizable() ? "true" : "false",
-        _v$36 = !props.open,
-        _v$37 = `var(${variable()}, ${defaultHeight()}px)`,
-        _v$38 = props.viewTransitionName;
-      _v$31 !== _p$.e && _$setAttribute(_el$6, "id", _p$.e = _v$31);
-      _v$32 !== _p$.t && _$className(_el$6, _p$.t = _v$32);
-      _v$33 !== _p$.a && _$setAttribute(_el$6, "data-height", _p$.a = _v$33);
-      _v$34 !== _p$.o && _$setAttribute(_el$6, "data-workspace-panel-id", _p$.o = _v$34);
-      _v$35 !== _p$.i && _$setAttribute(_el$6, "data-workspace-resizable", _p$.i = _v$35);
-      _v$36 !== _p$.n && _$setProperty(_el$6, "hidden", _p$.n = _v$36);
-      _v$37 !== _p$.s && _$setStyleProperty(_el$6, "--k2b-workspace-panel-size", _p$.s = _v$37);
-      _v$38 !== _p$.h && _$setStyleProperty(_el$6, "view-transition-name", _p$.h = _v$38);
+      var _v$33 = domId(),
+        _v$34 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
+        _v$35 = props.height ?? "md",
+        _v$36 = panelId(),
+        _v$37 = resizable() ? "true" : "false",
+        _v$38 = !props.open,
+        _v$39 = `var(${variable()}, ${defaultHeight()}px)`,
+        _v$40 = props.viewTransitionName;
+      _v$33 !== _p$.e && _$setAttribute(_el$0, "id", _p$.e = _v$33);
+      _v$34 !== _p$.t && _$className(_el$0, _p$.t = _v$34);
+      _v$35 !== _p$.a && _$setAttribute(_el$0, "data-height", _p$.a = _v$35);
+      _v$36 !== _p$.o && _$setAttribute(_el$0, "data-workspace-panel-id", _p$.o = _v$36);
+      _v$37 !== _p$.i && _$setAttribute(_el$0, "data-workspace-resizable", _p$.i = _v$37);
+      _v$38 !== _p$.n && _$setProperty(_el$0, "hidden", _p$.n = _v$38);
+      _v$39 !== _p$.s && _$setStyleProperty(_el$0, "--k2b-workspace-panel-size", _p$.s = _v$39);
+      _v$40 !== _p$.h && _$setStyleProperty(_el$0, "view-transition-name", _p$.h = _v$40);
       return _p$;
     }, {
       e: undefined,
@@ -523,7 +577,7 @@ function AppWorkspaceBottomDrawer(props) {
       s: undefined,
       h: undefined
     });
-    return _el$6;
+    return _el$0;
   })()];
 }
 function AppWorkspaceSidebar(props) {
@@ -532,8 +586,11 @@ function AppWorkspaceSidebar(props) {
   const defaultSize = () => props.defaultSize ?? APP_WORKSPACE_SIDEBAR_DEFAULT;
   const minSize = () => props.minSize ?? (props.collapsible ? APP_WORKSPACE_SIDEBAR_COLLAPSED : APP_WORKSPACE_SIDEBAR_MIN);
   const maxSize = () => props.maxSize ?? APP_WORKSPACE_SIDEBAR_MAX;
+  const workspace = useContext(WorkspaceContext);
   const generatedId = createUniqueId();
-  const domId = () => props.id ?? `k2b-workspace-sidebar-${generatedId}`;
+  const domId = () => props.id ?? workspace?.sidebarId ?? `k2b-workspace-sidebar-${generatedId}`;
+  // The head's navigation button names this sidebar.
+  createEffect(() => workspace?.setSidebarId(domId()));
   // Hidden navigation is not rendered at all, so its labels are neither shown
   // nor reachable; reading the children lazily keeps them from being created.
   const resolved = children(() => props.hidden ? undefined : props.children);
@@ -546,36 +603,36 @@ function AppWorkspaceSidebar(props) {
     onCleanup(() => aside?.removeEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide));
   });
   return [(() => {
-    var _el$7 = _$getNextElement(_tmpl$5);
-    var _ref$ = aside;
-    typeof _ref$ === "function" ? _$use(_ref$, _el$7) : aside = _el$7;
-    _$insert(_el$7, _$createComponent(Show, {
+    var _el$1 = _$getNextElement(_tmpl$7);
+    var _ref$2 = aside;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$1) : aside = _el$1;
+    _$insert(_el$1, _$createComponent(Show, {
       get when() {
         return !props.hidden;
       },
       get children() {
-        var _el$8 = _$getNextElement(_tmpl$6);
-        _$insert(_el$8, () => desktop()?.children);
-        return _el$8;
+        var _el$10 = _$getNextElement(_tmpl$8);
+        _$insert(_el$10, () => desktop()?.children);
+        return _el$10;
       }
     }));
     _$effect(_p$ => {
-      var _v$39 = domId(),
-        _v$40 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
-        _v$41 = props.label,
-        _v$42 = props.hidden || undefined,
-        _v$43 = props.mobile === "stacked" ? "stacked" : undefined,
-        _v$44 = resizable() ? "true" : "false",
-        _v$45 = props.collapsible ? "true" : "false",
-        _v$46 = props.onHiddenChange ? "true" : undefined;
-      _v$39 !== _p$.e && _$setAttribute(_el$7, "id", _p$.e = _v$39);
-      _v$40 !== _p$.t && _$className(_el$7, _p$.t = _v$40);
-      _v$41 !== _p$.a && _$setAttribute(_el$7, "aria-label", _p$.a = _v$41);
-      _v$42 !== _p$.o && _$setProperty(_el$7, "hidden", _p$.o = _v$42);
-      _v$43 !== _p$.i && _$setAttribute(_el$7, "data-mobile", _p$.i = _v$43);
-      _v$44 !== _p$.n && _$setAttribute(_el$7, "data-workspace-resizable", _p$.n = _v$44);
-      _v$45 !== _p$.s && _$setAttribute(_el$7, "data-workspace-collapsible", _p$.s = _v$45);
-      _v$46 !== _p$.h && _$setAttribute(_el$7, "data-workspace-hideable", _p$.h = _v$46);
+      var _v$41 = domId(),
+        _v$42 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
+        _v$43 = props.label,
+        _v$44 = props.hidden || undefined,
+        _v$45 = props.mobile === "stacked" ? "stacked" : undefined,
+        _v$46 = resizable() ? "true" : "false",
+        _v$47 = props.collapsible ? "true" : "false",
+        _v$48 = props.onHiddenChange ? "true" : undefined;
+      _v$41 !== _p$.e && _$setAttribute(_el$1, "id", _p$.e = _v$41);
+      _v$42 !== _p$.t && _$className(_el$1, _p$.t = _v$42);
+      _v$43 !== _p$.a && _$setAttribute(_el$1, "aria-label", _p$.a = _v$43);
+      _v$44 !== _p$.o && _$setProperty(_el$1, "hidden", _p$.o = _v$44);
+      _v$45 !== _p$.i && _$setAttribute(_el$1, "data-mobile", _p$.i = _v$45);
+      _v$46 !== _p$.n && _$setAttribute(_el$1, "data-workspace-resizable", _p$.n = _v$46);
+      _v$47 !== _p$.s && _$setAttribute(_el$1, "data-workspace-collapsible", _p$.s = _v$47);
+      _v$48 !== _p$.h && _$setAttribute(_el$1, "data-workspace-hideable", _p$.h = _v$48);
       return _p$;
     }, {
       e: undefined,
@@ -587,7 +644,7 @@ function AppWorkspaceSidebar(props) {
       s: undefined,
       h: undefined
     });
-    return _el$7;
+    return _el$1;
   })(), _$createComponent(Show, {
     get when() {
       return _$memo(() => !!resizable())() && !props.hidden;
@@ -634,10 +691,10 @@ const AppWorkspaceSidebarBody = props => {
   let body;
   createScrollFade(() => body, () => props.scrollFade !== false);
   return [(() => {
-    var _el$9 = _$getNextElement(_tmpl$2);
-    var _ref$2 = body;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$9) : body = _el$9;
-    _$spread(_el$9, _$mergeProps({
+    var _el$11 = _$getNextElement(_tmpl$2);
+    var _ref$3 = body;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$11) : body = _el$11;
+    _$spread(_el$11, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
       },
@@ -645,25 +702,25 @@ const AppWorkspaceSidebarBody = props => {
         return props.scrollFade !== false ? "both" : undefined;
       }
     }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), false, true);
-    _$insert(_el$9, () => props.children);
+    _$insert(_el$11, () => props.children);
     _$runHydrationEvents();
-    return _el$9;
+    return _el$11;
   })(), (() => {
-    var _el$0 = _$getNextElement(_tmpl$7);
-    _$setProperty(_el$0, "innerHTML", SIDEBAR_SCROLL_MEMORY_SCRIPT);
-    return _el$0;
+    var _el$12 = _$getNextElement(_tmpl$9);
+    _$setProperty(_el$12, "innerHTML", SIDEBAR_SCROLL_MEMORY_SCRIPT);
+    return _el$12;
   })()];
 };
 const AppWorkspaceSidebarFooter = props => (() => {
-  var _el$1 = _$getNextElement(_tmpl$8);
-  _$spread(_el$1, _$mergeProps({
+  var _el$13 = _$getNextElement(_tmpl$0);
+  _$spread(_el$13, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-footer ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$1, () => props.children);
+  _$insert(_el$13, () => props.children);
   _$runHydrationEvents();
-  return _el$1;
+  return _el$13;
 })();
 const AppWorkspaceSidebarSection = props => {
   const [expanded, setExpanded] = createSignal(props.defaultOpen ?? true);
@@ -674,27 +731,27 @@ const AppWorkspaceSidebarSection = props => {
       return props.icon;
     },
     get children() {
-      var _el$10 = _$getNextElement(_tmpl$9),
-        _el$11 = _el$10.firstChild;
-      _$effect(() => _$className(_el$11, iconClass(props.icon)));
-      return _el$10;
+      var _el$14 = _$getNextElement(_tmpl$1),
+        _el$15 = _el$14.firstChild;
+      _$effect(() => _$className(_el$15, iconClass(props.icon)));
+      return _el$14;
     }
   }), _$memo(() => props.title), _$createComponent(Show, {
     get when() {
       return props.count !== undefined;
     },
     get children() {
-      var _el$12 = _$getNextElement(_tmpl$0);
-      _$insert(_el$12, () => props.count);
-      return _el$12;
+      var _el$16 = _$getNextElement(_tmpl$10);
+      _$insert(_el$16, () => props.count);
+      return _el$16;
     }
   })];
   return (() => {
-    var _el$13 = _$getNextElement(_tmpl$12),
-      _el$25 = _el$13.firstChild,
-      [_el$26, _co$4] = _$getNextMarker(_el$25.nextSibling),
-      _el$24 = _el$26.nextSibling;
-    _$spread(_el$13, _$mergeProps({
+    var _el$17 = _$getNextElement(_tmpl$14),
+      _el$29 = _el$17.firstChild,
+      [_el$30, _co$5] = _$getNextMarker(_el$29.nextSibling),
+      _el$28 = _el$30.nextSibling;
+    _$spread(_el$17, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
       },
@@ -702,17 +759,17 @@ const AppWorkspaceSidebarSection = props => {
         return props.collapsible ? "true" : undefined;
       }
     }, () => modeAttrs(props.sidebarMode)), false, true);
-    _$insert(_el$13, _$createComponent(Show, {
+    _$insert(_el$17, _$createComponent(Show, {
       get when() {
         return props.title || props.actions;
       },
       get children() {
-        var _el$14 = _$getNextElement(_tmpl$11),
-          _el$20 = _el$14.firstChild,
-          [_el$21, _co$2] = _$getNextMarker(_el$20.nextSibling),
-          _el$22 = _el$21.nextSibling,
-          [_el$23, _co$3] = _$getNextMarker(_el$22.nextSibling);
-        _$insert(_el$14, _$createComponent(Show, {
+        var _el$18 = _$getNextElement(_tmpl$13),
+          _el$24 = _el$18.firstChild,
+          [_el$25, _co$3] = _$getNextMarker(_el$24.nextSibling),
+          _el$26 = _el$25.nextSibling,
+          [_el$27, _co$4] = _$getNextMarker(_el$26.nextSibling);
+        _$insert(_el$18, _$createComponent(Show, {
           get when() {
             return props.collapsible;
           },
@@ -722,56 +779,56 @@ const AppWorkspaceSidebarSection = props => {
                 return props.title;
               },
               get children() {
-                var _el$27 = _$getNextElement(_tmpl$13);
-                _$insert(_el$27, title);
-                return _el$27;
+                var _el$31 = _$getNextElement(_tmpl$15);
+                _$insert(_el$31, title);
+                return _el$31;
               }
             });
           },
           get children() {
-            var _el$15 = _$getNextElement(_tmpl$1),
-              _el$17 = _el$15.firstChild,
-              [_el$18, _co$] = _$getNextMarker(_el$17.nextSibling),
-              _el$16 = _el$18.nextSibling;
-            _el$15.$$click = () => {
+            var _el$19 = _$getNextElement(_tmpl$11),
+              _el$21 = _el$19.firstChild,
+              [_el$22, _co$2] = _$getNextMarker(_el$21.nextSibling),
+              _el$20 = _el$22.nextSibling;
+            _el$19.$$click = () => {
               const next = !open();
               setExpanded(next);
               props.onOpenChange?.(next);
             };
-            _$setAttribute(_el$15, "aria-controls", id);
-            _$insert(_el$15, title, _el$18, _co$);
+            _$setAttribute(_el$19, "aria-controls", id);
+            _$insert(_el$19, title, _el$22, _co$2);
             _$effect(_p$ => {
-              var _v$47 = open(),
-                _v$48 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
-              _v$47 !== _p$.e && _$setAttribute(_el$15, "aria-expanded", _p$.e = _v$47);
-              _v$48 !== _p$.t && _$className(_el$16, _p$.t = _v$48);
+              var _v$49 = open(),
+                _v$50 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
+              _v$49 !== _p$.e && _$setAttribute(_el$19, "aria-expanded", _p$.e = _v$49);
+              _v$50 !== _p$.t && _$className(_el$20, _p$.t = _v$50);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
             _$runHydrationEvents();
-            return _el$15;
+            return _el$19;
           }
-        }), _el$21, _co$2);
-        _$insert(_el$14, _$createComponent(Show, {
+        }), _el$25, _co$3);
+        _$insert(_el$18, _$createComponent(Show, {
           get when() {
             return props.actions;
           },
           get children() {
-            var _el$19 = _$getNextElement(_tmpl$10);
-            _$insert(_el$19, () => props.actions);
-            return _el$19;
+            var _el$23 = _$getNextElement(_tmpl$12);
+            _$insert(_el$23, () => props.actions);
+            return _el$23;
           }
-        }), _el$23, _co$3);
-        return _el$14;
+        }), _el$27, _co$4);
+        return _el$18;
       }
-    }), _el$26, _co$4);
-    _$setAttribute(_el$24, "id", id);
-    _$insert(_el$24, () => props.children);
-    _$effect(() => _$setProperty(_el$24, "hidden", !open()));
+    }), _el$30, _co$5);
+    _$setAttribute(_el$28, "id", id);
+    _$insert(_el$28, () => props.children);
+    _$effect(() => _$setProperty(_el$28, "hidden", !open()));
     _$runHydrationEvents();
-    return _el$13;
+    return _el$17;
   })();
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
@@ -787,20 +844,20 @@ const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
 const AppWorkspaceSidebarItemActions = props => (() => {
-  var _el$28 = _$getNextElement(_tmpl$14);
-  _$insert(_el$28, () => props.children);
-  _$effect(() => _$setAttribute(_el$28, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
-  return _el$28;
+  var _el$32 = _$getNextElement(_tmpl$16);
+  _$insert(_el$32, () => props.children);
+  _$effect(() => _$setAttribute(_el$32, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
+  return _el$32;
 })();
 const AppWorkspaceSidebarItemStatus = props => {
-  const messages = useUiMessages();
+  const workspaceMessages = useWorkspaceMessages();
   const count = () => typeof props.unread === "number" && props.unread >= 1 ? Math.floor(props.unread) : 0;
   const dot = () => props.unread === true;
   // The marks are decorative; the row's accessible name gets one phrase instead,
   // which says no more than the "99+" a capped count shows.
-  const description = () => [count() > 99 ? messages().sidebarUnreadMany : count() ? messages().sidebarUnread({
+  const description = () => [count() > 99 ? workspaceMessages().sidebarUnreadMany : count() ? workspaceMessages().sidebarUnread({
     count: count()
-  }) : dot() ? messages().sidebarNewActivity : "", props.mention ? messages().sidebarMentioned : "", props.muted ? messages().sidebarMuted : ""].filter(Boolean).join(", ");
+  }) : dot() ? workspaceMessages().sidebarNewActivity : "", props.mention ? workspaceMessages().sidebarMentioned : "", props.muted ? workspaceMessages().sidebarMuted : ""].filter(Boolean).join(", ");
   // The unread slot stays reserved at the end, and the marks that change most
   // often sit outermost, so new activity or a mention never moves another mark.
   return _$createComponent(Show, {
@@ -808,33 +865,33 @@ const AppWorkspaceSidebarItemStatus = props => {
       return description();
     },
     get children() {
-      var _el$29 = _$getNextElement(_tmpl$18),
-        _el$38 = _el$29.firstChild,
-        [_el$39, _co$6] = _$getNextMarker(_el$38.nextSibling),
+      var _el$33 = _$getNextElement(_tmpl$20),
+        _el$42 = _el$33.firstChild,
+        [_el$43, _co$7] = _$getNextMarker(_el$42.nextSibling),
+        _el$44 = _el$43.nextSibling,
+        [_el$45, _co$8] = _$getNextMarker(_el$44.nextSibling),
+        _el$36 = _el$45.nextSibling,
+        _el$38 = _el$36.nextSibling,
+        _el$39 = _el$38.firstChild,
         _el$40 = _el$39.nextSibling,
-        [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling),
-        _el$32 = _el$41.nextSibling,
-        _el$34 = _el$32.nextSibling,
-        _el$35 = _el$34.firstChild,
-        _el$36 = _el$35.nextSibling,
-        [_el$37, _co$5] = _$getNextMarker(_el$36.nextSibling);
-      _$insert(_el$29, _$createComponent(Show, {
+        [_el$41, _co$6] = _$getNextMarker(_el$40.nextSibling);
+      _$insert(_el$33, _$createComponent(Show, {
         get when() {
           return props.mention;
         },
         get children() {
-          return _$getNextElement(_tmpl$15);
+          return _$getNextElement(_tmpl$17);
         }
-      }), _el$39, _co$6);
-      _$insert(_el$29, _$createComponent(Show, {
+      }), _el$43, _co$7);
+      _$insert(_el$33, _$createComponent(Show, {
         get when() {
           return props.muted;
         },
         get children() {
-          return _$getNextElement(_tmpl$16);
+          return _$getNextElement(_tmpl$18);
         }
-      }), _el$41, _co$7);
-      _$insert(_el$32, _$createComponent(Show, {
+      }), _el$45, _co$8);
+      _$insert(_el$36, _$createComponent(Show, {
         get when() {
           return count();
         },
@@ -844,23 +901,23 @@ const AppWorkspaceSidebarItemStatus = props => {
               return dot();
             },
             get children() {
-              return _$getNextElement(_tmpl$19);
+              return _$getNextElement(_tmpl$21);
             }
           });
         },
         get children() {
-          var _el$33 = _$getNextElement(_tmpl$17);
-          _$insert(_el$33, (() => {
+          var _el$37 = _$getNextElement(_tmpl$19);
+          _$insert(_el$37, (() => {
             var _c$ = _$memo(() => count() > 99);
             return () => _c$() ? "99+" : count();
           })());
-          _$effect(() => _$setAttribute(_el$33, "data-mention", props.mention ? "true" : undefined));
-          return _el$33;
+          _$effect(() => _$setAttribute(_el$37, "data-mention", props.mention ? "true" : undefined));
+          return _el$37;
         }
       }));
-      _$insert(_el$34, description, _el$37, _co$5);
-      _$effect(() => _$setAttribute(_el$29, "data-unread", count() ? "count" : dot() ? "dot" : undefined));
-      return _el$29;
+      _$insert(_el$38, description, _el$41, _co$6);
+      _$effect(() => _$setAttribute(_el$33, "data-unread", count() ? "count" : dot() ? "dot" : undefined));
+      return _el$33;
     }
   });
 };
@@ -889,8 +946,8 @@ function AppWorkspaceSidebarRow(props) {
       },
       get fallback() {
         return (() => {
-          var _el$43 = _$getNextElement(_tmpl$20);
-          _$spread(_el$43, _$mergeProps(attrs, {
+          var _el$47 = _$getNextElement(_tmpl$22);
+          _$spread(_el$47, _$mergeProps(attrs, {
             get tabIndex() {
               return props.tabIndex;
             },
@@ -901,9 +958,9 @@ function AppWorkspaceSidebarRow(props) {
               return props.onClick;
             }
           }), false, true);
-          _$insert(_el$43, () => props.children);
+          _$insert(_el$47, () => props.children);
           _$runHydrationEvents();
-          return _el$43;
+          return _el$47;
         })();
       },
       get children() {
@@ -913,8 +970,8 @@ function AppWorkspaceSidebarRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$44 = _$getNextElement(_tmpl$21);
-              _$spread(_el$44, _$mergeProps({
+              var _el$48 = _$getNextElement(_tmpl$23);
+              _$spread(_el$48, _$mergeProps({
                 get href() {
                   return props.href;
                 }
@@ -929,9 +986,9 @@ function AppWorkspaceSidebarRow(props) {
                   return props.onClick;
                 }
               }), false, true);
-              _$insert(_el$44, () => props.children);
+              _$insert(_el$48, () => props.children);
               _$runHydrationEvents();
-              return _el$44;
+              return _el$48;
             })();
           },
           get children() {
@@ -977,27 +1034,27 @@ function AppWorkspaceSidebarRow(props) {
       });
     },
     get children() {
-      var _el$45 = _$getNextElement(_tmpl$22),
-        _el$46 = _el$45.firstChild,
-        [_el$47, _co$8] = _$getNextMarker(_el$46.nextSibling),
-        _el$48 = _el$47.nextSibling,
-        [_el$49, _co$9] = _$getNextMarker(_el$48.nextSibling);
-      _$spread(_el$45, _$mergeProps(common, {
+      var _el$49 = _$getNextElement(_tmpl$24),
+        _el$50 = _el$49.firstChild,
+        [_el$51, _co$9] = _$getNextMarker(_el$50.nextSibling),
+        _el$52 = _el$51.nextSibling,
+        [_el$53, _co$0] = _$getNextMarker(_el$52.nextSibling);
+      _$spread(_el$49, _$mergeProps(common, {
         get ["data-disabled"]() {
           return props.disabled ? "true" : undefined;
         }
       }), false, true);
-      _$insert(_el$45, _$createComponent(Control, {
+      _$insert(_el$49, _$createComponent(Control, {
         grouped: true
-      }), _el$47, _co$8);
-      _$insert(_el$45, () => props.actions, _el$49, _co$9);
+      }), _el$51, _co$9);
+      _$insert(_el$49, () => props.actions, _el$53, _co$0);
       _$runHydrationEvents();
-      return _el$45;
+      return _el$49;
     }
   });
 }
 function AppWorkspaceSidebarItem(props) {
-  const messages = useUiMessages();
+  const workspaceMessages = useWorkspaceMessages();
   const resolved = children(() => props.children);
   const resolvedActions = children(() => props.actions);
   const values = createMemo(() => flatten(resolved()));
@@ -1024,80 +1081,80 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      var _el$50 = _$getNextElement(_tmpl$23);
-      _$insert(_el$50, () => iconContent() ?? (() => {
-        var _el$65 = _$getNextElement(_tmpl$29);
-        _$effect(() => _$className(_el$65, iconClass(icon())));
-        return _el$65;
+      var _el$54 = _$getNextElement(_tmpl$25);
+      _$insert(_el$54, () => iconContent() ?? (() => {
+        var _el$69 = _$getNextElement(_tmpl$31);
+        _$effect(() => _$className(_el$69, iconClass(icon())));
+        return _el$69;
       })());
-      return _el$50;
+      return _el$54;
     }
   }), (() => {
-    var _el$51 = _$getNextElement(_tmpl$27),
-      _el$60 = _el$51.firstChild,
-      [_el$61, _co$1] = _$getNextMarker(_el$60.nextSibling),
-      _el$57 = _el$61.nextSibling,
-      _el$58 = _el$57.firstChild,
-      _el$62 = _el$57.nextSibling,
-      [_el$63, _co$10] = _$getNextMarker(_el$62.nextSibling);
-    _$insert(_el$51, _$createComponent(Show, {
+    var _el$55 = _$getNextElement(_tmpl$29),
+      _el$64 = _el$55.firstChild,
+      [_el$65, _co$10] = _$getNextMarker(_el$64.nextSibling),
+      _el$61 = _el$65.nextSibling,
+      _el$62 = _el$61.firstChild,
+      _el$66 = _el$61.nextSibling,
+      [_el$67, _co$11] = _$getNextMarker(_el$66.nextSibling);
+    _$insert(_el$55, _$createComponent(Show, {
       get when() {
         return props.context || props.contextMeta;
       },
       get children() {
-        var _el$52 = _$getNextElement(_tmpl$25),
-          _el$53 = _el$52.firstChild,
-          _el$55 = _el$53.nextSibling,
-          [_el$56, _co$0] = _$getNextMarker(_el$55.nextSibling);
-        _$insert(_el$53, () => props.context);
-        _$insert(_el$52, _$createComponent(Show, {
+        var _el$56 = _$getNextElement(_tmpl$27),
+          _el$57 = _el$56.firstChild,
+          _el$59 = _el$57.nextSibling,
+          [_el$60, _co$1] = _$getNextMarker(_el$59.nextSibling);
+        _$insert(_el$57, () => props.context);
+        _$insert(_el$56, _$createComponent(Show, {
           get when() {
             return props.contextMeta;
           },
           get children() {
-            var _el$54 = _$getNextElement(_tmpl$24);
-            _$insert(_el$54, () => props.contextMeta);
-            return _el$54;
+            var _el$58 = _$getNextElement(_tmpl$26);
+            _$insert(_el$58, () => props.contextMeta);
+            return _el$58;
           }
-        }), _el$56, _co$0);
-        return _el$52;
+        }), _el$60, _co$1);
+        return _el$56;
       }
-    }), _el$61, _co$1);
-    _$insert(_el$58, () => label());
-    _$insert(_el$51, _$createComponent(Show, {
+    }), _el$65, _co$10);
+    _$insert(_el$62, () => label());
+    _$insert(_el$55, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$59 = _$getNextElement(_tmpl$26);
-        _$insert(_el$59, () => props.description);
-        return _el$59;
+        var _el$63 = _$getNextElement(_tmpl$28);
+        _$insert(_el$63, () => props.description);
+        return _el$63;
       }
-    }), _el$63, _co$10);
-    _$effect(() => _$setAttribute(_el$57, "data-marquee", labelSlot()?.marquee ?? (props.variant ?? "row") === "row" ? "true" : "false"));
-    return _el$51;
+    }), _el$67, _co$11);
+    _$effect(() => _$setAttribute(_el$61, "data-marquee", labelSlot()?.marquee ?? (props.variant ?? "row") === "row" ? "true" : "false"));
+    return _el$55;
   })(), _$createComponent(Show, {
     get when() {
       return hasMeta();
     },
     get children() {
-      var _el$64 = _$getNextElement(_tmpl$28);
-      _$insert(_el$64, meta);
+      var _el$68 = _$getNextElement(_tmpl$30);
+      _$insert(_el$68, meta);
       _$effect(_p$ => {
-        var _v$49 = props.preview?.trigger === "row" ? metaId : undefined,
-          _v$50 = metaVisibility() === "hover" ? "hover" : undefined;
-        _v$49 !== _p$.e && _$setAttribute(_el$64, "id", _p$.e = _v$49);
-        _v$50 !== _p$.t && _$setAttribute(_el$64, "data-visibility", _p$.t = _v$50);
+        var _v$51 = props.preview?.trigger === "row" ? metaId : undefined,
+          _v$52 = metaVisibility() === "hover" ? "hover" : undefined;
+        _v$51 !== _p$.e && _$setAttribute(_el$68, "id", _p$.e = _v$51);
+        _v$52 !== _p$.t && _$setAttribute(_el$68, "data-visibility", _p$.t = _v$52);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$64;
+      return _el$68;
     }
   })];
   const singleAction = () => {
-    const label = () => actionSlot()?.label ?? props.actionLabel ?? messages().rowAction;
+    const label = () => actionSlot()?.label ?? props.actionLabel ?? workspaceMessages().rowAction;
     const select = event => {
       event.stopPropagation();
       if (actionSlot()?.disabled) {
@@ -1109,9 +1166,9 @@ function AppWorkspaceSidebarItem(props) {
       props.onActionClick?.(event);
     };
     const content = () => actionSlot()?.children ?? (() => {
-      var _el$66 = _$getNextElement(_tmpl$29);
-      _$effect(() => _$className(_el$66, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
-      return _el$66;
+      var _el$70 = _$getNextElement(_tmpl$31);
+      _$effect(() => _$className(_el$70, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$70;
     })();
     return _$createComponent(Show, {
       get when() {
@@ -1124,16 +1181,16 @@ function AppWorkspaceSidebarItem(props) {
           },
           get fallback() {
             return (() => {
-              var _el$68 = _$getNextElement(_tmpl$31);
-              _el$68.$$click = select;
-              _$insert(_el$68, content);
+              var _el$72 = _$getNextElement(_tmpl$33);
+              _el$72.$$click = select;
+              _$insert(_el$72, content);
               _$effect(_p$ => {
-                var _v$54 = actionSlot()?.disabled,
-                  _v$55 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                  _v$56 = label();
-                _v$54 !== _p$.e && _$setProperty(_el$68, "disabled", _p$.e = _v$54);
-                _v$55 !== _p$.t && _$setAttribute(_el$68, "data-visibility", _p$.t = _v$55);
-                _v$56 !== _p$.a && _$setAttribute(_el$68, "aria-label", _p$.a = _v$56);
+                var _v$56 = actionSlot()?.disabled,
+                  _v$57 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$58 = label();
+                _v$56 !== _p$.e && _$setProperty(_el$72, "disabled", _p$.e = _v$56);
+                _v$57 !== _p$.t && _$setAttribute(_el$72, "data-visibility", _p$.t = _v$57);
+                _v$58 !== _p$.a && _$setAttribute(_el$72, "aria-label", _p$.a = _v$58);
                 return _p$;
               }, {
                 e: undefined,
@@ -1141,20 +1198,20 @@ function AppWorkspaceSidebarItem(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$68;
+              return _el$72;
             })();
           },
           get children() {
-            var _el$67 = _$getNextElement(_tmpl$30);
-            _el$67.$$click = select;
-            _$insert(_el$67, content);
+            var _el$71 = _$getNextElement(_tmpl$32);
+            _el$71.$$click = select;
+            _$insert(_el$71, content);
             _$effect(_p$ => {
-              var _v$51 = actionSlot()?.href,
-                _v$52 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                _v$53 = label();
-              _v$51 !== _p$.e && _$setAttribute(_el$67, "href", _p$.e = _v$51);
-              _v$52 !== _p$.t && _$setAttribute(_el$67, "data-visibility", _p$.t = _v$52);
-              _v$53 !== _p$.a && _$setAttribute(_el$67, "aria-label", _p$.a = _v$53);
+              var _v$53 = actionSlot()?.href,
+                _v$54 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$55 = label();
+              _v$53 !== _p$.e && _$setAttribute(_el$71, "href", _p$.e = _v$53);
+              _v$54 !== _p$.t && _$setAttribute(_el$71, "data-visibility", _p$.t = _v$54);
+              _v$55 !== _p$.a && _$setAttribute(_el$71, "aria-label", _p$.a = _v$55);
               return _p$;
             }, {
               e: undefined,
@@ -1162,7 +1219,7 @@ function AppWorkspaceSidebarItem(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$67;
+            return _el$71;
           }
         });
       }
@@ -1354,6 +1411,8 @@ const AppWorkspaceNavTree = props => {
       const selected = () => props.selectedId === item.id;
       const siblingIndex = id => siblings().findIndex(sibling => sibling.id === id);
       const movable = () => Boolean(props.onMove && item.movable && !item.disabled);
+      // A folder that nobody selects: its row only expands and collapses it.
+      const disclosureOnly = () => hasChildren() && !item.href && !item.onSelect && !props.onSelectedIdChange;
       let treeItem;
       const ownRow = () => treeItem?.firstElementChild;
 
@@ -1375,7 +1434,7 @@ const AppWorkspaceNavTree = props => {
           preventScroll: true
         });
         setFocusedId(item.id);
-        if (hasChildren() && !item.href && !item.onSelect && !props.onSelectedIdChange) {
+        if (disclosureOnly()) {
           setExpanded(item.id, !isExpanded(item.id));
           return;
         }
@@ -1461,50 +1520,66 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          var _el$69 = _$getNextElement(_tmpl$32),
-            _el$70 = _el$69.firstChild;
-          _$spread(_el$69, _$mergeProps({
+          var _el$73 = _$getNextElement(_tmpl$34),
+            _el$74 = _el$73.firstChild;
+          _$spread(_el$73, _$mergeProps({
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
           }, () => iconAccessibility(item.iconLabel)), false, true);
-          _$effect(() => _$className(_el$70, iconClass(rowIcon())));
+          _$effect(() => _$className(_el$74, iconClass(rowIcon())));
           _$runHydrationEvents();
-          return _el$69;
+          return _el$73;
         }
-      }), (() => {
-        var _el$71 = _$getNextElement(_tmpl$33),
-          _el$72 = _el$71.firstChild;
-        _$insert(_el$72, () => item.label);
-        return _el$71;
-      })(), _$createComponent(Show, {
+      }), _$createComponent(Show, {
+        get when() {
+          return item.description !== undefined;
+        },
+        get fallback() {
+          return (() => {
+            var _el$82 = _$getNextElement(_tmpl$38),
+              _el$83 = _el$82.firstChild;
+            _$insert(_el$83, () => item.label);
+            return _el$82;
+          })();
+        },
+        get children() {
+          var _el$75 = _$getNextElement(_tmpl$35),
+            _el$76 = _el$75.firstChild,
+            _el$77 = _el$76.firstChild,
+            _el$78 = _el$76.nextSibling;
+          _$insert(_el$77, () => item.label);
+          _$insert(_el$78, () => item.description);
+          return _el$75;
+        }
+      }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          var _el$73 = _$getNextElement(_tmpl$34);
-          _$insert(_el$73, () => item.meta);
+          var _el$79 = _$getNextElement(_tmpl$36);
+          _$insert(_el$79, () => item.meta);
           _$effect(_p$ => {
-            var _v$57 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$58 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$57 !== _p$.e && _$className(_el$73, _p$.e = _v$57);
-            _v$58 !== _p$.t && _$setAttribute(_el$73, "data-visibility", _p$.t = _v$58);
+            var _v$59 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$60 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$59 !== _p$.e && _$className(_el$79, _p$.e = _v$59);
+            _v$60 !== _p$.t && _$setAttribute(_el$79, "data-visibility", _p$.t = _v$60);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$73;
+          return _el$79;
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          var _el$74 = _$getNextElement(_tmpl$35),
-            _el$75 = _el$74.firstChild;
-          _$effect(() => _$className(_el$75, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
-          return _el$74;
+          var _el$80 = _$getNextElement(_tmpl$37),
+            _el$81 = _el$80.firstChild;
+          _$effect(() => _$className(_el$81, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$80;
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1554,7 +1629,8 @@ const AppWorkspaceNavTree = props => {
         },
         get data() {
           return {
-            "has-actions": item.actions ? "true" : undefined
+            "has-actions": item.actions ? "true" : undefined,
+            "k2b-nav-tree-disclosure": disclosureOnly() ? "true" : undefined
           };
         },
         children: rowContent
@@ -1611,56 +1687,56 @@ const AppWorkspaceNavTree = props => {
         requestMove(target.move, false);
       };
       return (() => {
-        var _el$76 = _$getNextElement(_tmpl$37),
-          _el$78 = _el$76.firstChild,
-          [_el$79, _co$11] = _$getNextMarker(_el$78.nextSibling),
-          _el$80 = _el$79.nextSibling,
-          [_el$81, _co$12] = _$getNextMarker(_el$80.nextSibling);
-        _el$76.addEventListener("drop", onDrop);
-        _$addEventListener(_el$76, "dragleave", item.onDragLeave);
-        _el$76.addEventListener("dragover", onDragOver);
-        _$addEventListener(_el$76, "dragenter", item.onDragEnter);
-        _el$76.addEventListener("dragstart", onDragStart);
-        _el$76.$$keydown = onKeyDown;
-        _el$76.addEventListener("focus", () => setFocusedId(item.id));
-        var _ref$3 = treeItem;
-        typeof _ref$3 === "function" ? _$use(_ref$3, _el$76) : treeItem = _el$76;
-        _$setAttribute(_el$76, "aria-level", depth + 1);
-        _$setAttribute(_el$76, "data-k2b-nav-tree-parent-id", parentId);
-        _$insert(_el$76, row, _el$79, _co$11);
-        _$insert(_el$76, _$createComponent(Show, {
+        var _el$84 = _$getNextElement(_tmpl$40),
+          _el$86 = _el$84.firstChild,
+          [_el$87, _co$12] = _$getNextMarker(_el$86.nextSibling),
+          _el$88 = _el$87.nextSibling,
+          [_el$89, _co$13] = _$getNextMarker(_el$88.nextSibling);
+        _el$84.addEventListener("drop", onDrop);
+        _$addEventListener(_el$84, "dragleave", item.onDragLeave);
+        _el$84.addEventListener("dragover", onDragOver);
+        _$addEventListener(_el$84, "dragenter", item.onDragEnter);
+        _el$84.addEventListener("dragstart", onDragStart);
+        _el$84.$$keydown = onKeyDown;
+        _el$84.addEventListener("focus", () => setFocusedId(item.id));
+        var _ref$4 = treeItem;
+        typeof _ref$4 === "function" ? _$use(_ref$4, _el$84) : treeItem = _el$84;
+        _$setAttribute(_el$84, "aria-level", depth + 1);
+        _$setAttribute(_el$84, "data-k2b-nav-tree-parent-id", parentId);
+        _$insert(_el$84, row, _el$87, _co$12);
+        _$insert(_el$84, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!hasChildren())() && isExpanded(item.id);
           },
           get children() {
-            var _el$77 = _$getNextElement(_tmpl$36);
-            _$insert(_el$77, () => renderItems(nested, depth + 1, item.id));
-            return _el$77;
+            var _el$85 = _$getNextElement(_tmpl$39);
+            _$insert(_el$85, () => renderItems(nested, depth + 1, item.id));
+            return _el$85;
           }
-        }), _el$81, _co$12);
+        }), _el$89, _co$13);
         _$effect(_p$ => {
-          var _v$59 = siblings().length,
-            _v$60 = place() + 1,
-            _v$61 = selected(),
-            _v$62 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$63 = item.disabled ? "true" : undefined,
-            _v$64 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$65 = movable() ? true : undefined,
-            _v$66 = item.id,
-            _v$67 = dragged()?.id === item.id ? "" : undefined,
-            _v$68 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
-            _v$69 = String(props.indented === false ? 0 : depth);
-          _v$59 !== _p$.e && _$setAttribute(_el$76, "aria-setsize", _p$.e = _v$59);
-          _v$60 !== _p$.t && _$setAttribute(_el$76, "aria-posinset", _p$.t = _v$60);
-          _v$61 !== _p$.a && _$setAttribute(_el$76, "aria-selected", _p$.a = _v$61);
-          _v$62 !== _p$.o && _$setAttribute(_el$76, "aria-expanded", _p$.o = _v$62);
-          _v$63 !== _p$.i && _$setAttribute(_el$76, "aria-disabled", _p$.i = _v$63);
-          _v$64 !== _p$.n && _$setAttribute(_el$76, "tabindex", _p$.n = _v$64);
-          _v$65 !== _p$.s && _$setAttribute(_el$76, "draggable", _p$.s = _v$65);
-          _v$66 !== _p$.h && _$setAttribute(_el$76, "data-k2b-nav-tree-id", _p$.h = _v$66);
-          _v$67 !== _p$.r && _$setAttribute(_el$76, "data-k2b-nav-tree-dragging", _p$.r = _v$67);
-          _v$68 !== _p$.d && _$setAttribute(_el$76, "data-k2b-nav-tree-drop", _p$.d = _v$68);
-          _v$69 !== _p$.l && _$setStyleProperty(_el$76, "--k2b-nav-tree-depth", _p$.l = _v$69);
+          var _v$61 = siblings().length,
+            _v$62 = place() + 1,
+            _v$63 = selected(),
+            _v$64 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$65 = item.disabled ? "true" : undefined,
+            _v$66 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$67 = movable() ? true : undefined,
+            _v$68 = item.id,
+            _v$69 = dragged()?.id === item.id ? "" : undefined,
+            _v$70 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
+            _v$71 = String(props.indented === false ? 0 : depth);
+          _v$61 !== _p$.e && _$setAttribute(_el$84, "aria-setsize", _p$.e = _v$61);
+          _v$62 !== _p$.t && _$setAttribute(_el$84, "aria-posinset", _p$.t = _v$62);
+          _v$63 !== _p$.a && _$setAttribute(_el$84, "aria-selected", _p$.a = _v$63);
+          _v$64 !== _p$.o && _$setAttribute(_el$84, "aria-expanded", _p$.o = _v$64);
+          _v$65 !== _p$.i && _$setAttribute(_el$84, "aria-disabled", _p$.i = _v$65);
+          _v$66 !== _p$.n && _$setAttribute(_el$84, "tabindex", _p$.n = _v$66);
+          _v$67 !== _p$.s && _$setAttribute(_el$84, "draggable", _p$.s = _v$67);
+          _v$68 !== _p$.h && _$setAttribute(_el$84, "data-k2b-nav-tree-id", _p$.h = _v$68);
+          _v$69 !== _p$.r && _$setAttribute(_el$84, "data-k2b-nav-tree-dragging", _p$.r = _v$69);
+          _v$70 !== _p$.d && _$setAttribute(_el$84, "data-k2b-nav-tree-drop", _p$.d = _v$70);
+          _v$71 !== _p$.l && _$setStyleProperty(_el$84, "--k2b-nav-tree-depth", _p$.l = _v$71);
           return _p$;
         }, {
           e: undefined,
@@ -1676,7 +1752,7 @@ const AppWorkspaceNavTree = props => {
           l: undefined
         });
         _$runHydrationEvents();
-        return _el$76;
+        return _el$84;
       })();
     }
   });
@@ -1701,62 +1777,62 @@ const AppWorkspaceNavTree = props => {
     });
   });
   return (() => {
-    var _el$82 = _$getNextElement(_tmpl$38);
-    _el$82.addEventListener("dragend", endDrag);
-    _el$82.addEventListener("dragleave", event => {
+    var _el$90 = _$getNextElement(_tmpl$41);
+    _el$90.addEventListener("dragend", endDrag);
+    _el$90.addEventListener("dragleave", event => {
       if (!root?.contains(event.relatedTarget)) setDropTarget(null);
     });
-    _el$82.addEventListener("dragover", event => {
+    _el$90.addEventListener("dragover", event => {
       // Runs after the rows: a position no row claimed shows no gap.
       if (claimedDragOver !== event) setDropTarget(null);
     });
-    var _ref$4 = root;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$82) : root = _el$82;
-    _$insert(_el$82, () => renderItems(roots, 0));
+    var _ref$5 = root;
+    typeof _ref$5 === "function" ? _$use(_ref$5, _el$90) : root = _el$90;
+    _$insert(_el$90, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$70 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$71 = props.ariaLabel;
-      _v$70 !== _p$.e && _$className(_el$82, _p$.e = _v$70);
-      _v$71 !== _p$.t && _$setAttribute(_el$82, "aria-label", _p$.t = _v$71);
+      var _v$72 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$73 = props.ariaLabel;
+      _v$72 !== _p$.e && _$className(_el$90, _p$.e = _v$72);
+      _v$73 !== _p$.t && _$setAttribute(_el$90, "aria-label", _p$.t = _v$73);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$82;
+    return _el$90;
   })();
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => (() => {
-  var _el$83 = _$getNextElement(_tmpl$39),
-    _el$85 = _el$83.firstChild,
-    [_el$86, _co$13] = _$getNextMarker(_el$85.nextSibling),
-    _el$84 = _el$86.nextSibling;
-  _$spread(_el$83, _$mergeProps({
+  var _el$91 = _$getNextElement(_tmpl$42),
+    _el$93 = _el$91.firstChild,
+    [_el$94, _co$14] = _$getNextMarker(_el$93.nextSibling),
+    _el$92 = _el$94.nextSibling;
+  _$spread(_el$91, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$83, _$createComponent(Show, {
+  _$insert(_el$91, _$createComponent(Show, {
     get when() {
       return props.title;
     },
     children: title => (() => {
-      var _el$87 = _$getNextElement(_tmpl$13);
-      _$insert(_el$87, title);
-      return _el$87;
+      var _el$95 = _$getNextElement(_tmpl$15);
+      _$insert(_el$95, title);
+      return _el$95;
     })()
-  }), _el$86, _co$13);
-  _$insert(_el$84, () => props.children);
-  _$effect(() => _$setAttribute(_el$84, "data-columns", props.columns ?? 2));
+  }), _el$94, _co$14);
+  _$insert(_el$92, () => props.children);
+  _$effect(() => _$setAttribute(_el$92, "data-columns", props.columns ?? 2));
   _$runHydrationEvents();
-  return _el$83;
+  return _el$91;
 })();
 const AppWorkspaceSidebarIconAction = props => {
   const content = (() => {
-    var _el$88 = _$getNextElement(_tmpl$40);
-    _$effect(() => _$className(_el$88, iconClass(props.icon)));
-    return _el$88;
+    var _el$96 = _$getNextElement(_tmpl$43);
+    _$effect(() => _$className(_el$96, iconClass(props.icon)));
+    return _el$96;
   })();
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
@@ -1769,8 +1845,8 @@ const AppWorkspaceSidebarIconAction = props => {
     ...modeAttrs(props.sidebarMode)
   });
   if (!props.href || props.disabled) return (() => {
-    var _el$89 = _$getNextElement(_tmpl$20);
-    _$spread(_el$89, _$mergeProps(attrs, {
+    var _el$97 = _$getNextElement(_tmpl$22);
+    _$spread(_el$97, _$mergeProps(attrs, {
       get disabled() {
         return props.disabled;
       },
@@ -1778,13 +1854,13 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$89, content);
+    _$insert(_el$97, content);
     _$runHydrationEvents();
-    return _el$89;
+    return _el$97;
   })();
   if (props.navigation !== "enhanced" || !props.onNavigate) return (() => {
-    var _el$90 = _$getNextElement(_tmpl$21);
-    _$spread(_el$90, _$mergeProps({
+    var _el$98 = _$getNextElement(_tmpl$23);
+    _$spread(_el$98, _$mergeProps({
       get href() {
         return props.href;
       }
@@ -1793,9 +1869,9 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$90, content);
+    _$insert(_el$98, content);
     _$runHydrationEvents();
-    return _el$90;
+    return _el$98;
   })();
   return _$createComponent(Link, _$mergeProps({
     get href() {
@@ -1817,9 +1893,63 @@ const AppWorkspaceSidebarIconAction = props => {
     children: content
   }));
 };
+/**
+ * The row above the work area. From 48 to 64 rem it holds the button that
+ * opens the overlay sidebar. On a page with a page above it, at every width,
+ * it shows the host's page title with the way up (see `PageTitle`); the
+ * page's own `PageTitle` takes its place. It is one fixed height and draws no
+ * line; CSS decides when it shows, so the server-rendered page already has
+ * its final geometry.
+ */
+function AppWorkspaceHead(props) {
+  const messages = useWorkspaceMessages();
+  // A nested workspace is part of a page that already shows its title.
+  const trail = props.nested ? () => undefined : usePageTrail();
+  return (() => {
+    var _el$99 = _$getNextElement(_tmpl$45),
+      _el$101 = _el$99.firstChild,
+      [_el$102, _co$15] = _$getNextMarker(_el$101.nextSibling),
+      _el$103 = _el$102.nextSibling,
+      [_el$104, _co$16] = _$getNextMarker(_el$103.nextSibling);
+    _$insert(_el$99, _$createComponent(IconButton, {
+      "class": "k2b-app-workspace__head-toggle",
+      get label() {
+        return messages().showNavigation;
+      },
+      get ["aria-controls"]() {
+        return props.sidebarId();
+      },
+      "aria-expanded": "false",
+      "data-app-workspace-sidebar-toggle": "",
+      get children() {
+        return _$getNextElement(_tmpl$44);
+      }
+    }), _el$102, _co$15);
+    _$insert(_el$99, _$createComponent(Show, {
+      get when() {
+        return trail();
+      },
+      children: current => _$createComponent(PageTitle, {
+        get trail() {
+          return current();
+        },
+        as: "p",
+        fallback: true
+      })
+    }), _el$104, _co$16);
+    _$effect(() => _$setAttribute(_el$99, "data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : undefined));
+    return _el$99;
+  })();
+}
 const AppWorkspace = props => {
   let root;
   const serverLayoutState = useContext(LayoutStateContext);
+  const nested = Boolean(useContext(WorkspaceContext));
+  const [sidebarId, setSidebarId] = createSignal(`k2b-workspace-sidebar-${createUniqueId()}`);
+  const workspace = {
+    sidebarId: sidebarId(),
+    setSidebarId
+  };
   const initialLayoutState = () => props.layoutState?.() ?? serverLayoutState;
 
   // The resize handles are inert markup until the controller is attached, so
@@ -1840,30 +1970,43 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get children() {
-      var _el$91 = _$getNextElement(_tmpl$41);
-      var _ref$5 = root;
-      typeof _ref$5 === "function" ? _$use(_ref$5, _el$91) : root = _el$91;
-      _$insert(_el$91, () => props.children);
-      _$effect(_p$ => {
-        var _v$72 = `k2b-app-workspace ${props.class ?? ""}`,
-          _v$73 = props.mobileSurface,
-          _v$74 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-          _v$75 = props.resizable === false ? "false" : "true",
-          _v$76 = appWorkspaceLayoutStyle(initialLayoutState());
-        _v$72 !== _p$.e && _$className(_el$91, _p$.e = _v$72);
-        _v$73 !== _p$.t && _$setAttribute(_el$91, "data-mobile-surface", _p$.t = _v$73);
-        _v$74 !== _p$.a && _$setAttribute(_el$91, "data-sidebar-collapsed", _p$.a = _v$74);
-        _v$75 !== _p$.o && _$setAttribute(_el$91, "data-workspace-resizable", _p$.o = _v$75);
-        _p$.i = _$style(_el$91, _v$76, _p$.i);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined,
-        i: undefined
+      return _$createComponent(WorkspaceContext.Provider, {
+        value: workspace,
+        get children() {
+          var _el$105 = _$getNextElement(_tmpl$46),
+            _el$106 = _el$105.firstChild,
+            [_el$107, _co$17] = _$getNextMarker(_el$106.nextSibling),
+            _el$108 = _el$107.nextSibling,
+            [_el$109, _co$18] = _$getNextMarker(_el$108.nextSibling);
+          var _ref$6 = root;
+          typeof _ref$6 === "function" ? _$use(_ref$6, _el$105) : root = _el$105;
+          _$insert(_el$105, _$createComponent(AppWorkspaceHead, {
+            sidebarId: sidebarId,
+            nested: nested
+          }), _el$107, _co$17);
+          _$insert(_el$105, () => props.children, _el$109, _co$18);
+          _$effect(_p$ => {
+            var _v$74 = `k2b-app-workspace ${props.class ?? ""}`,
+              _v$75 = props.mobileSurface,
+              _v$76 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+              _v$77 = props.resizable === false ? "false" : "true",
+              _v$78 = appWorkspaceLayoutStyle(initialLayoutState());
+            _v$74 !== _p$.e && _$className(_el$105, _p$.e = _v$74);
+            _v$75 !== _p$.t && _$setAttribute(_el$105, "data-mobile-surface", _p$.t = _v$75);
+            _v$76 !== _p$.a && _$setAttribute(_el$105, "data-sidebar-collapsed", _p$.a = _v$76);
+            _v$77 !== _p$.o && _$setAttribute(_el$105, "data-workspace-resizable", _p$.o = _v$77);
+            _p$.i = _$style(_el$105, _v$78, _p$.i);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined
+          });
+          return _el$105;
+        }
       });
-      return _el$91;
     }
   });
 };
@@ -1876,10 +2019,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Content = props => (() => {
-  var _el$92 = _$getNextElement(_tmpl$2);
-  _$insert(_el$92, () => props.children);
-  _$effect(() => _$className(_el$92, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$92;
+  var _el$110 = _$getNextElement(_tmpl$2);
+  _$insert(_el$110, () => props.children);
+  _$effect(() => _$className(_el$110, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$110;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;