@k2b/ui 0.20.0 → 0.22.0

package/dist/ssr/layout/AppWorkspace.js

@@ -10,51 +10,60 @@ import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=\"separator\"", " style=\"", "\"><span aria-hidden=\"true\"></span></button>"],
   _tmpl$2 = ["<div class=\"k2b-app-workspace__main-primary\" data-workspace-main-region=\"main\"", ">", "</div>"],
   _tmpl$3 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
-  _tmpl$4 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
-  _tmpl$5 = ["<div class=\"k2b-app-workspace__sidebar-desktop\">", "</div>"],
-  _tmpl$6 = ["<aside", " class=\"", "\"", "", ">", "</aside>"],
-  _tmpl$7 = ["<script>", "</script>"],
-  _tmpl$8 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
-  _tmpl$9 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
-  _tmpl$0 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
-  _tmpl$1 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
-  _tmpl$10 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
-  _tmpl$11 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
-  _tmpl$12 = ["<h2>", "</h2>"],
-  _tmpl$13 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
-  _tmpl$14 = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
-  _tmpl$15 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
-  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
-  _tmpl$17 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "", "<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span><span class=\"k2b-sr-only\">, ", "</span></span>"],
-  _tmpl$18 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
-  _tmpl$19 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$20 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
-  _tmpl$21 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
-  _tmpl$22 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
-  _tmpl$23 = ["<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>"],
-  _tmpl$24 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
-  _tmpl$25 = ["<i", "></i>"],
-  _tmpl$26 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
-  _tmpl$27 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
-  _tmpl$28 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
-  _tmpl$29 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$30 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
-  _tmpl$31 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
-  _tmpl$32 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
-  _tmpl$33 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
-  _tmpl$34 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
-  _tmpl$35 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$36 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
-  _tmpl$37 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$4 = ["<style>", "</style>"],
+  _tmpl$5 = ["<aside", " class=\"", "\"", "", " style=\"", "\"><button type=\"button\" class=\"k2b-app-workspace__detail-grabber\"", " aria-pressed=\"false\"><span aria-hidden=\"true\"></span></button>", "</aside>"],
+  _tmpl$6 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
+  _tmpl$7 = ["<div class=\"k2b-app-workspace__sidebar-desktop\">", "</div>"],
+  _tmpl$8 = ["<aside", " class=\"", "\"", "", ">", "</aside>"],
+  _tmpl$9 = ["<script>", "</script>"],
+  _tmpl$0 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$1 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
+  _tmpl$10 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$11 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
+  _tmpl$12 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
+  _tmpl$13 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
+  _tmpl$14 = ["<h2>", "</h2>"],
+  _tmpl$15 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
+  _tmpl$16 = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
+  _tmpl$17 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
+  _tmpl$18 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
+  _tmpl$19 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "", "<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span><span class=\"k2b-sr-only\">, ", "</span></span>"],
+  _tmpl$20 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
+  _tmpl$21 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$22 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
+  _tmpl$23 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
+  _tmpl$24 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
+  _tmpl$25 = ["<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>"],
+  _tmpl$26 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$27 = ["<i", "></i>"],
+  _tmpl$28 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$29 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$30 = ["<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\">", "</span></span>"],
+  _tmpl$31 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$32 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$33 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$34 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$35 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
+  _tmpl$36 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$37 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$38 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$39 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
+  _tmpl$40 = ["<div class=\"k2b-app-workspace__head\"", ">", "", "</div>"],
+  _tmpl$41 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "", "</div>"],
+  _tmpl$42 = ["<div class=\"", "\">", "</div>"];
 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");
@@ -76,8 +85,8 @@ 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();
-  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? messages().resizeNavigation : props.kind === "pane" ? messages().resizeWorkspacePane : props.kind === "detail" ? messages().resizeDetailPanel : messages().resizeBottomDrawer), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
+  const workspaceMessages = useWorkspaceMessages();
+  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? workspaceMessages().resizeNavigation : props.kind === "pane" ? workspaceMessages().resizeWorkspacePane : props.kind === "detail" ? workspaceMessages().resizeDetailPanel : workspaceMessages().resizeBottomDrawer), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
 }
 
 /**
@@ -236,7 +245,8 @@ function AppWorkspaceMain(props) {
                   return handle();
                 }
               }), _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(pane.domId, true), false), `k2b-app-workspace__main-pane ${isAnchor() ? "is-primary" : ""} ${_$escape(pane.props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(pane.props.label, true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", activeMobilePane() === pane.props.id ? "true" : "false", false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-surface", pane.props.surface === "navigation" ? "navigation" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$ssrStyle(isAnchor() ? undefined : {
-                "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize()}px)`
+                "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize()}px)`,
+                "--k2b-workspace-panel-min": `${minSize()}px`
               }), _$escape(pane.props.children)), _$createComponent(Show, {
                 get when() {
                   return _$memo(() => !!resizable())() && before();
@@ -253,15 +263,16 @@ function AppWorkspaceMain(props) {
   })), false);
 }
 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
   };
@@ -269,7 +280,35 @@ 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 [_$ssr(_tmpl$4, contentRule()), _$createComponent(Show, {
     get when() {
       return resizable();
     },
@@ -292,15 +331,15 @@ function AppWorkspaceDetail(props) {
         get maxSize() {
           return maxWidth();
         },
-        shadow: true,
         get style() {
-          return {
-            "--k2b-workspace-panel-size": `var(${variable()}, ${defaultWidth()}px)`
-          };
+          return sizeStyle();
         }
       });
     }
-  }), _$ssr(_tmpl$4, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__detail ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-width", _$escape(props.width ?? "md", true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyleProperty("--k2b-workspace-panel-size:", `var(${_$escape(variable(), true)}, ${_$escape(defaultWidth(), true)}px)`) + _$ssrStyleProperty(";view-transition-name:", _$escape(props.viewTransitionName, true)), _$escape(props.children))];
+  }), _$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__detail ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-width", _$escape(props.width ?? "md", true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-detail-closable", props.onClose ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-detail-steppable", props.onStep ? "true" : _$escape(undefined, true), false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyle({
+    ...sizeStyle(),
+    "view-transition-name": props.viewTransitionName
+  }), _$ssrAttribute("aria-label", _$escape(workspaceMessages().detailFullHeight, true), false), _$escape(props.children))];
 }
 function AppWorkspaceBottomDrawer(props) {
   const rootResizable = useContext(ResizeContext);
@@ -348,7 +387,7 @@ function AppWorkspaceBottomDrawer(props) {
         }
       });
     }
-  }), _$ssr(_tmpl$4, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__drawer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-height", _$escape(props.height ?? "md", true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyleProperty("--k2b-workspace-panel-size:", `var(${_$escape(variable(), true)}, ${_$escape(defaultHeight(), true)}px)`) + _$ssrStyleProperty(";view-transition-name:", _$escape(props.viewTransitionName, true)), _$escape(props.children))];
+  }), _$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__drawer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-height", _$escape(props.height ?? "md", true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyleProperty("--k2b-workspace-panel-size:", `var(${_$escape(variable(), true)}, ${_$escape(defaultHeight(), true)}px)`) + _$ssrStyleProperty(";view-transition-name:", _$escape(props.viewTransitionName, true)), _$escape(props.children))];
 }
 function AppWorkspaceSidebar(props) {
   const rootResizable = useContext(ResizeContext);
@@ -356,8 +395,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);
@@ -369,12 +411,12 @@ function AppWorkspaceSidebar(props) {
     aside?.addEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide);
     onCleanup(() => aside?.removeEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide));
   });
-  return [_$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__sidebar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrAttribute("hidden", props.hidden || undefined, true) + _$ssrAttribute("data-mobile", props.mobile === "stacked" ? "stacked" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-collapsible", props.collapsible ? "true" : "false", false) + _$ssrAttribute("data-workspace-hideable", props.onHiddenChange ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  return [_$ssr(_tmpl$8, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__sidebar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrAttribute("hidden", props.hidden || undefined, true) + _$ssrAttribute("data-mobile", props.mobile === "stacked" ? "stacked" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-collapsible", props.collapsible ? "true" : "false", false) + _$ssrAttribute("data-workspace-hideable", props.onHiddenChange ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return !props.hidden;
     },
     get children() {
-      return _$ssr(_tmpl$5, _$escape(desktop()?.children));
+      return _$ssr(_tmpl$7, _$escape(desktop()?.children));
     }
   }))), _$createComponent(Show, {
     get when() {
@@ -428,7 +470,7 @@ const AppWorkspaceSidebarBody = props => {
     get ["data-scroll-fade-mode"]() {
       return props.scrollFade !== false ? "both" : undefined;
     }
-  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false), _$ssr(_tmpl$7, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
+  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false), _$ssr(_tmpl$9, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
 };
 const AppWorkspaceSidebarFooter = props => _$ssrElement("footer", _$mergeProps({
   get ["class"]() {
@@ -444,14 +486,14 @@ const AppWorkspaceSidebarSection = props => {
       return props.icon;
     },
     get children() {
-      return _$ssr(_tmpl$8, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+      return _$ssr(_tmpl$0, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
     }
   }), props.title, _$createComponent(Show, {
     get when() {
       return props.count !== undefined;
     },
     get children() {
-      return _$ssr(_tmpl$9, _$escape(props.count));
+      return _$ssr(_tmpl$1, _$escape(props.count));
     }
   })];
   return _$ssrElement("section", _$mergeProps({
@@ -466,7 +508,7 @@ const AppWorkspaceSidebarSection = props => {
       return props.title || props.actions;
     },
     get children() {
-      return _$ssr(_tmpl$10, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$12, _$escape(_$createComponent(Show, {
         get when() {
           return props.collapsible;
         },
@@ -476,23 +518,23 @@ const AppWorkspaceSidebarSection = props => {
               return props.title;
             },
             get children() {
-              return _$ssr(_tmpl$12, _$escape(title()));
+              return _$ssr(_tmpl$14, _$escape(title()));
             }
           });
         },
         get children() {
-          return _$ssr(_tmpl$0, _$ssrAttribute("aria-expanded", _$escape(open(), true), false) + _$ssrAttribute("aria-controls", _$escape(id, true), false), _$escape(title()), _$ssrAttribute("class", open() ? "ti ti-chevron-down" : "ti ti-chevron-right", false));
+          return _$ssr(_tmpl$10, _$ssrAttribute("aria-expanded", _$escape(open(), true), false) + _$ssrAttribute("aria-controls", _$escape(id, true), false), _$escape(title()), _$ssrAttribute("class", open() ? "ti ti-chevron-down" : "ti ti-chevron-right", false));
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
           return props.actions;
         },
         get children() {
-          return _$ssr(_tmpl$1, _$escape(props.actions));
+          return _$ssr(_tmpl$11, _$escape(props.actions));
         }
       })));
     }
-  })), _$ssr(_tmpl$11, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
+  })), _$ssr(_tmpl$13, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
   kind: SIDEBAR_ITEM_ICON
@@ -506,16 +548,16 @@ const AppWorkspaceSidebarItemMeta = props => mergeProps({
 const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
-const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$13, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
+const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$15, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
 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, {
@@ -523,19 +565,19 @@ const AppWorkspaceSidebarItemStatus = props => {
       return description();
     },
     get children() {
-      return _$ssr(_tmpl$17, _$ssrAttribute("data-unread", count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$19, _$ssrAttribute("data-unread", count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
         get when() {
           return props.mention;
         },
         get children() {
-          return _$ssr(_tmpl$14);
+          return _$ssr(_tmpl$16);
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
           return props.muted;
         },
         get children() {
-          return _$ssr(_tmpl$15);
+          return _$ssr(_tmpl$17);
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
@@ -547,12 +589,12 @@ const AppWorkspaceSidebarItemStatus = props => {
               return dot();
             },
             get children() {
-              return _$ssr(_tmpl$18);
+              return _$ssr(_tmpl$20);
             }
           });
         },
         get children() {
-          return _$ssr(_tmpl$16, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
+          return _$ssr(_tmpl$18, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
         }
       })), _$escape(description()));
     }
@@ -666,7 +708,7 @@ function AppWorkspaceSidebarRow(props) {
   });
 }
 function AppWorkspaceSidebarItem(props) {
-  const messages = useUiMessages();
+  const workspaceMessages = useWorkspaceMessages();
   const resolved = children(() => props.children);
   const resolvedActions = children(() => props.actions);
   const values = createMemo(() => flatten(resolved()));
@@ -693,19 +735,19 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      return _$ssr(_tmpl$19, _$escape(iconContent() ?? _$ssr(_tmpl$25, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+      return _$ssr(_tmpl$21, _$escape(iconContent() ?? _$ssr(_tmpl$27, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
     }
-  }), _$ssr(_tmpl$23, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$25, _$escape(_$createComponent(Show, {
     get when() {
       return props.context || props.contextMeta;
     },
     get children() {
-      return _$ssr(_tmpl$21, _$escape(props.context), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$23, _$escape(props.context), _$escape(_$createComponent(Show, {
         get when() {
           return props.contextMeta;
         },
         get children() {
-          return _$ssr(_tmpl$20, _$escape(props.contextMeta));
+          return _$ssr(_tmpl$22, _$escape(props.contextMeta));
         }
       })));
     }
@@ -714,18 +756,18 @@ function AppWorkspaceSidebarItem(props) {
       return props.description;
     },
     get children() {
-      return _$ssr(_tmpl$22, _$escape(props.description));
+      return _$ssr(_tmpl$24, _$escape(props.description));
     }
   }))), _$createComponent(Show, {
     get when() {
       return hasMeta();
     },
     get children() {
-      return _$ssr(_tmpl$24, _$ssrAttribute("id", props.preview?.trigger === "row" ? _$escape(metaId, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(meta()));
+      return _$ssr(_tmpl$26, _$ssrAttribute("id", props.preview?.trigger === "row" ? _$escape(metaId, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(meta()));
     }
   })];
   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) {
@@ -736,7 +778,7 @@ function AppWorkspaceSidebarItem(props) {
       actionSlot()?.onSelect?.(event);
       props.onActionClick?.(event);
     };
-    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$25, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$27, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
     return _$createComponent(Show, {
       get when() {
         return Boolean(actionSlot() || props.actionIcon);
@@ -747,10 +789,10 @@ function AppWorkspaceSidebarItem(props) {
             return _$memo(() => !!actionSlot()?.href)() && !actionSlot()?.disabled;
           },
           get fallback() {
-            return _$ssr(_tmpl$27, _$ssrAttribute("disabled", actionSlot()?.disabled, true) + _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
+            return _$ssr(_tmpl$29, _$ssrAttribute("disabled", actionSlot()?.disabled, true) + _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
           },
           get children() {
-            return _$ssr(_tmpl$26, _$ssrAttribute("href", _$escape(actionSlot()?.href, true), false), _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
+            return _$ssr(_tmpl$28, _$ssrAttribute("href", _$escape(actionSlot()?.href, true), false), _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
           }
         });
       }
@@ -942,6 +984,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;
 
@@ -963,7 +1007,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;
         }
@@ -1054,21 +1098,31 @@ const AppWorkspaceNavTree = props => {
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
-          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$25, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
+          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$27, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
         }
-      }), _$ssr(_tmpl$28, _$escape(item.label)), _$createComponent(Show, {
+      }), _$createComponent(Show, {
+        get when() {
+          return item.description !== undefined;
+        },
+        get fallback() {
+          return _$ssr(_tmpl$33, _$escape(item.label));
+        },
+        get children() {
+          return _$ssr(_tmpl$30, _$escape(item.label), _$escape(item.description));
+        }
+      }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          return _$ssr(_tmpl$29, `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`, _$ssrAttribute("data-visibility", item.metaVisibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(item.meta));
+          return _$ssr(_tmpl$31, `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`, _$ssrAttribute("data-visibility", item.metaVisibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(item.meta));
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          return _$ssr(_tmpl$30, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+          return _$ssr(_tmpl$32, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1118,7 +1172,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
@@ -1174,12 +1229,12 @@ const AppWorkspaceNavTree = props => {
         endDrag();
         requestMove(target.move, false);
       };
-      return _$ssr(_tmpl$32, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-setsize", _$escape(siblings().length, true), false) + _$ssrAttribute("aria-posinset", _$escape(place(), true) + 1, false) + _$ssrAttribute("aria-selected", _$escape(selected(), true), false) + _$ssrAttribute("aria-expanded", hasChildren() ? _$escape(isExpanded(item.id), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-disabled", item.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", item.disabled ? -1 : tabStopId() === item.id ? 0 : -1, false) + _$ssrAttribute("draggable", movable() ? _$escape(true, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false) + _$ssrAttribute("data-k2b-nav-tree-dragging", dragged()?.id === item.id ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-drop", dropTarget()?.id === item.id ? _$escape(dropTarget().side, true) : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-nav-tree-depth:", _$escape(String(props.indented === false ? 0 : depth), true)), _$escape(row()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$35, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-setsize", _$escape(siblings().length, true), false) + _$ssrAttribute("aria-posinset", _$escape(place(), true) + 1, false) + _$ssrAttribute("aria-selected", _$escape(selected(), true), false) + _$ssrAttribute("aria-expanded", hasChildren() ? _$escape(isExpanded(item.id), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-disabled", item.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", item.disabled ? -1 : tabStopId() === item.id ? 0 : -1, false) + _$ssrAttribute("draggable", movable() ? _$escape(true, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false) + _$ssrAttribute("data-k2b-nav-tree-dragging", dragged()?.id === item.id ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-drop", dropTarget()?.id === item.id ? _$escape(dropTarget().side, true) : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-nav-tree-depth:", _$escape(String(props.indented === false ? 0 : depth), true)), _$escape(row()), _$escape(_$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && isExpanded(item.id);
         },
         get children() {
-          return _$ssr(_tmpl$31, _$escape(renderItems(nested, depth + 1, item.id)));
+          return _$ssr(_tmpl$34, _$escape(renderItems(nested, depth + 1, item.id)));
         }
       })));
     }
@@ -1204,7 +1259,7 @@ const AppWorkspaceNavTree = props => {
       doc?.removeEventListener("pointermove", forgetDrag, true);
     });
   });
-  return _$ssr(_tmpl$33, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots, 0)));
+  return _$ssr(_tmpl$36, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots, 0)));
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProps({
@@ -1215,10 +1270,10 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
   get when() {
     return props.title;
   },
-  children: title => _$ssr(_tmpl$12, _$escape(title()))
-})), _$ssr(_tmpl$34, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+  children: title => _$ssr(_tmpl$14, _$escape(title()))
+})), _$ssr(_tmpl$37, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
-  const content = _$ssr(_tmpl$35, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  const content = _$ssr(_tmpl$38, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
     title: props.label,
@@ -1261,9 +1316,53 @@ 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 _$ssr(_tmpl$40, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false), _$escape(_$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 _$ssr(_tmpl$39);
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return trail();
+    },
+    children: current => _$createComponent(PageTitle, {
+      get trail() {
+        return current();
+      },
+      as: "p",
+      fallback: true
+    })
+  })));
+}
 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
@@ -1284,7 +1383,15 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get children() {
-      return _$ssr(_tmpl$36, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(props.children));
+      return _$createComponent(WorkspaceContext.Provider, {
+        value: workspace,
+        get children() {
+          return _$ssr(_tmpl$41, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(_$createComponent(AppWorkspaceHead, {
+            sidebarId: sidebarId,
+            nested: nested
+          })), _$escape(props.children));
+        }
+      });
     }
   });
 };
@@ -1296,7 +1403,7 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$37, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$42, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;