@k2b/ui 0.27.0 → 0.29.0

package/dist/ssr/layout/AppWorkspace.js

@@ -16,55 +16,60 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$7 = "<i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i>",
   _tmpl$8 = ["<div class=\"k2b-app-workspace__level-body\"", ">", "</div>"],
   _tmpl$9 = ["<style>", "</style>"],
-  _tmpl$0 = ["<aside", " class=\"", "\"", "", " style=\"", "\"><button type=\"button\" class=\"k2b-app-workspace__detail-grabber\"", " aria-pressed=\"false\"><span aria-hidden=\"true\"></span></button>", "</aside>"],
-  _tmpl$1 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
-  _tmpl$10 = ["<div class=\"k2b-app-workspace__sidebar-desktop\">", "</div>"],
-  _tmpl$11 = ["<aside", " class=\"", "\"", "", ">", "</aside>"],
-  _tmpl$12 = ["<script>", "</script>"],
-  _tmpl$13 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
-  _tmpl$14 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
-  _tmpl$15 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
-  _tmpl$16 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
-  _tmpl$17 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
-  _tmpl$18 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
-  _tmpl$19 = ["<h2>", "</h2>"],
-  _tmpl$20 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
-  _tmpl$21 = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
-  _tmpl$22 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
-  _tmpl$23 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
-  _tmpl$24 = ["<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$25 = ["<span class=\"k2b-sr-only\">, ", "</span>"],
-  _tmpl$26 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "</span>"],
-  _tmpl$27 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
-  _tmpl$28 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$29 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
-  _tmpl$30 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
-  _tmpl$31 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
-  _tmpl$32 = ["<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$33 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
-  _tmpl$34 = ["<i", "></i>"],
-  _tmpl$35 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
-  _tmpl$36 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
-  _tmpl$37 = ["<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$38 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$39 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
-  _tmpl$40 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
-  _tmpl$41 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
-  _tmpl$42 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
-  _tmpl$43 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
-  _tmpl$44 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
-  _tmpl$45 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$46 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
-  _tmpl$47 = ["<div class=\"k2b-app-workspace__head\"", ">", "", "</div>"],
-  _tmpl$48 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
-  _tmpl$49 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "", "</div>"],
-  _tmpl$50 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$0 = "<i class=\"ti ti-layout-sidebar-right\" aria-hidden=\"true\"></i>",
+  _tmpl$1 = ["<aside", " class=\"", "\"", "", " style=\"", "\"><button type=\"button\" class=\"k2b-app-workspace__detail-grabber\"", " aria-pressed=\"false\"><span aria-hidden=\"true\"></span></button>", "</aside>"],
+  _tmpl$10 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
+  _tmpl$11 = ["<nav class=\"k2b-app-workspace__sidebar-sheet\"", " style=\"", "\">", "</nav>"],
+  _tmpl$12 = ["<div class=\"k2b-app-workspace__sidebar-desktop\"", ">", "</div>"],
+  _tmpl$13 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-all\" aria-haspopup=\"dialog\"", "><span>", "</span><i class=\"ti ti-chevron-down\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$14 = ["<script>", "</script>"],
+  _tmpl$15 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
+  _tmpl$17 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$18 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
+  _tmpl$19 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
+  _tmpl$20 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
+  _tmpl$21 = ["<h2>", "</h2>"],
+  _tmpl$22 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
+  _tmpl$23 = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
+  _tmpl$24 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
+  _tmpl$25 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
+  _tmpl$26 = ["<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$27 = ["<span class=\"k2b-sr-only\">, ", "</span>"],
+  _tmpl$28 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "</span>"],
+  _tmpl$29 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
+  _tmpl$30 = ["<span", " aria-hidden=\"true\">", "</span>"],
+  _tmpl$31 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
+  _tmpl$32 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
+  _tmpl$33 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
+  _tmpl$34 = ["<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$35 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$36 = ["<i", "></i>"],
+  _tmpl$37 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$38 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$39 = ["<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$40 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$41 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$42 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$43 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$44 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
+  _tmpl$45 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$46 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$47 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$48 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
+  _tmpl$49 = ["<div class=\"k2b-app-workspace__head\"", ">", "", "</div>"],
+  _tmpl$50 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
+  _tmpl$51 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "", "</div>"],
+  _tmpl$52 = ["<div class=\"", "\">", "</div>"];
 import { Link } from "@k2b/ssr/nav";
-import { children, createContext, createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, on, onCleanup, onMount, Show, useContext } from "solid-js";
-import { isServer } from "solid-js/web";
-import { IconButton, IconButtonLink } from "../actions/Button";
+import { children, createContext, createEffect, createMemo, createRoot, createSignal, createUniqueId, For, getOwner, mergeProps, on, onCleanup, onMount, Show, useContext } from "solid-js";
+import { Dynamic, isServer } from "solid-js/web";
+import { Button, IconButton, IconButtonLink } from "../actions/Button";
+import { dialogCore } from "../feedback/dialog-core";
+import { RenderErrorBoundary } from "../internal/render-error";
 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 BottomSheet, { bottomSheetAdaptiveOptions } from "./BottomSheet";
 import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
 import { AppWorkspaceSidebarSwitcher } from "./SidebarSwitcher";
@@ -452,7 +457,19 @@ function AppWorkspaceDetail(props) {
       aside?.removeEventListener(APP_WORKSPACE_DETAIL_STEP_EVENT, step);
     });
   });
-  return [_$ssr(_tmpl$9, workspaceRule()), _$createComponent(Show, {
+  return [_$ssr(_tmpl$9, workspaceRule()), _$createComponent(Button, {
+    type: "button",
+    variant: "ghost",
+    get ["aria-controls"]() {
+      return domId();
+    },
+    "aria-expanded": "false",
+    "data-app-workspace-detail-toggle": "",
+    "class": "k2b-app-workspace__detail-toggle",
+    get children() {
+      return [_$ssr(_tmpl$0), workspaceMessages().details];
+    }
+  }), _$createComponent(Show, {
     get when() {
       return resizable();
     },
@@ -480,7 +497,7 @@ function AppWorkspaceDetail(props) {
         }
       });
     }
-  }), _$ssr(_tmpl$0, _$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-detail-phone", props.phone === "page" ? "page" : _$escape(undefined, 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({
+  }), _$ssr(_tmpl$1, _$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-detail-phone", props.phone === "page" ? "page" : _$escape(undefined, 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))];
@@ -531,7 +548,7 @@ function AppWorkspaceBottomDrawer(props) {
         }
       });
     }
-  }), _$ssr(_tmpl$1, _$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$10, _$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);
@@ -549,20 +566,154 @@ function AppWorkspaceSidebar(props) {
   const resolved = children(() => props.hidden ? undefined : props.children);
   const slots = createMemo(() => flatten(resolved()).filter(sidebarChildSlot));
   const desktop = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_DESKTOP));
+  const stacked = () => props.mobile === "stacked";
+  const workspaceMessages = useWorkspaceMessages();
+  const owner = getOwner();
+  const [sheetOpen, setSheetOpen] = createSignal(false);
   let aside;
+  let row;
+  // Fades mark the row's cut edges; the sidebar column never scrolls sideways, so it never shows one.
+  createScrollFade(() => row, () => stacked());
   onMount(() => {
     const requestHide = () => props.onHiddenChange?.(true);
     aside?.addEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide);
     onCleanup(() => aside?.removeEventListener(APP_WORKSPACE_SIDEBAR_HIDE_EVENT, requestHide));
+    // A client-rendered row settles here; server markup settled in its inline script.
+    if (stacked() && row) settleChipRow(row, scrollFadeEdges);
   });
-  return [_$ssr(_tmpl$11, _$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;
+  /**
+   * The complete sidebar for a chip row: a second rendering of the same
+   * children in a sheet. It shares the application's state through its
+   * signals, inherits this sidebar's context and accent, and is disposed with
+   * the sheet. A chosen link runs its own handlers in the sheet and closes it.
+   */
+  const openAll = button => {
+    if (sheetOpen() || !aside) return;
+    setSheetOpen(true);
+    const computed = getComputedStyle(aside);
+    const accent = Object.fromEntries(["--k2b-app-workspace-active", "--k2b-app-workspace-selected", "--k2b-link-accent", "--k2b-detail-panel-accent"].map(name => [name, computed.getPropertyValue(name).trim()]).filter(([, value]) => value));
+    // The sheet belongs to the chip row: when the workspace widens into the sidebar column, All disappears and the sheet closes.
+    const leave = new AbortController();
+    const watch = new ResizeObserver(() => {
+      if (button.getClientRects().length === 0) leave.abort();
+    });
+    watch.observe(button);
+    /** A chosen link closes the sheet once its own handlers ran, an enhanced navigation's included. */
+    const choose = (event, close) => {
+      const target = event.target;
+      if (!target?.closest?.("a[href]")) return;
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      // A tree branch's disclosure inside its link only expands the branch.
+      if (target.closest("[data-k2b-nav-tree-toggle]")) return;
+      // A task, not a microtask: the document's delegated handlers run later in this dispatch.
+      setTimeout(close);
+    };
+    void dialogCore.open((close, context) => {
+      let dispose;
+      const view = createRoot(disposeRoot => {
+        dispose = disposeRoot;
+        return _$createComponent(BottomSheet, {
+          get onDismiss() {
+            return context.requestDismiss;
+          },
+          get children() {
+            return [_$createComponent(BottomSheet.Header, {
+              get title() {
+                return props.label;
+              },
+              close: () => void context.requestDismiss()
+            }), _$createComponent(BottomSheet.Body, {
+              get children() {
+                return _$createComponent(RenderErrorBoundary, {
+                  onClose: () => void context.requestDismiss(),
+                  content: () => {
+                    const resolved = children(() => flatten(props.hidden ? undefined : props.children).filter(sidebarChildSlot).find(slot => slot.kind === SIDEBAR_DESKTOP)?.children);
+                    // Pre-resolved children belong to the row; inserting them here would move its nodes into the sheet.
+                    if (resolved.toArray().some(node => node instanceof Node && aside?.contains(node))) {
+                      console.error("AppWorkspace.Sidebar: write the sidebar children as JSX inside AppWorkspace.Sidebar so they can render a second time in the All sheet; pre-resolved children cannot be reused.");
+                      return null;
+                    }
+                    return _$ssr(_tmpl$11, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$ssrStyle(accent), _$escape(resolved()));
+                  }
+                });
+              }
+            })];
+          }
+        });
+      }, owner);
+      onCleanup(() => dispose?.());
+      return view;
+    },
+    // No history entry: an application may replace the URL from inside the sidebar, such as a search, and an
+    // entry of the sheet would then outlive it. So Back leaves the page here, unlike other phone sheets.
+    {
+      ...bottomSheetAdaptiveOptions,
+      ariaLabel: props.label,
+      signal: leave.signal
+    }).finally(() => {
+      watch.disconnect();
+      setSheetOpen(false);
+      if (button.isConnected && !aside?.contains(document.activeElement)) {
+        if (button.getClientRects().length) button.focus({
+          preventScroll: true
+        });else {
+          const current = aside?.querySelector("[aria-current], .k2b-app-workspace__sidebar-item.is-active");
+          const link = current?.matches("a[href]") ? current : current?.querySelector("a[href]");
+          (link ?? aside?.querySelector("a[href]"))?.focus({
+            preventScroll: true
+          });
+        }
+      }
+    });
+  };
+  return [_$createComponent(Dynamic, {
+    get component() {
+      return stacked() ? "nav" : "aside";
+    },
+    get id() {
+      return domId();
+    },
+    get ["class"]() {
+      return `k2b-app-workspace__sidebar ${props.class ?? ""}`;
+    },
+    get ["aria-label"]() {
+      return props.label;
+    },
+    get hidden() {
+      return props.hidden || undefined;
+    },
+    get ["data-mobile"]() {
+      return stacked() ? "stacked" : undefined;
+    },
+    get ["data-workspace-resizable"]() {
+      return resizable() ? "true" : "false";
+    },
+    get ["data-workspace-collapsible"]() {
+      return props.collapsible ? "true" : "false";
+    },
+    get ["data-workspace-hideable"]() {
+      return props.onHiddenChange ? "true" : undefined;
     },
     get children() {
-      return _$ssr(_tmpl$10, _$escape(desktop()?.children));
+      return _$createComponent(Show, {
+        get when() {
+          return !props.hidden;
+        },
+        get children() {
+          return [_$ssr(_tmpl$12, _$ssrAttribute("data-scroll-fade-mode", stacked() ? "both" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-axis", stacked() ? "horizontal" : _$escape(undefined, true), false), _$escape(desktop()?.children)), _$createComponent(Show, {
+            get when() {
+              return stacked();
+            },
+            get children() {
+              return [_$ssr(_tmpl$13, _$ssrAttribute("aria-expanded", _$escape(sheetOpen(), true), false) + _$ssrAttribute("aria-label", props.label ? _$escape(workspaceMessages().sidebarAllLabel({
+                label: props.label
+              }), true) : _$escape(undefined, true), false), _$escape(workspaceMessages().sidebarAll)), _$ssr(_tmpl$14, CHIP_ROW_SCRIPT)];
+            }
+          })];
+        }
+      });
     }
-  }))), _$createComponent(Show, {
+  }), _$createComponent(Show, {
     get when() {
       return _$memo(() => !!resizable())() && !props.hidden;
     },
@@ -589,6 +740,29 @@ function AppWorkspaceSidebar(props) {
     }
   })];
 }
+
+/**
+ * A chip row that overflows shows the current object, centered when it is
+ * not in view from the row's start, and fades its cut edges. Self-contained, because the inline script after server markup
+ * embeds its source and runs it before the first paint; at 64 rem the column
+ * does not overflow sideways and nothing changes.
+ */
+function settleChipRow(row, edges) {
+  if (!(row instanceof HTMLElement) || row.scrollWidth - row.clientWidth <= 1) return;
+  const current = row.querySelector(".k2b-app-workspace__sidebar-item.is-active, [aria-current]");
+  const chip = current && (current.closest(".k2b-app-workspace__sidebar-item") || current);
+  if (chip) {
+    // From the row's start, whatever scrolled it before (a body's own restore
+    // runs first on the client, last on the server), so both paths agree.
+    row.scrollLeft = 0;
+    const bounds = row.getBoundingClientRect();
+    const item = chip.getBoundingClientRect();
+    if (item.left < bounds.left || item.right > bounds.right) row.scrollLeft += item.left - bounds.left - (bounds.width - item.width) / 2;
+  }
+  const fade = edges(row);
+  if (fade) row.setAttribute("data-scroll-fade", fade);
+}
+const CHIP_ROW_SCRIPT = `(${settleChipRow})(document.currentScript&&document.currentScript.parentElement.querySelector(":scope>.k2b-app-workspace__sidebar-desktop"),${scrollFadeEdges})`;
 const AppWorkspaceSidebarDesktop = props => ({
   kind: SIDEBAR_DESKTOP,
   children: props.children
@@ -613,7 +787,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$12, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
+  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false), _$ssr(_tmpl$14, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
 };
 const AppWorkspaceSidebarFooter = props => _$ssrElement("footer", _$mergeProps({
   get ["class"]() {
@@ -629,14 +803,14 @@ const AppWorkspaceSidebarSection = props => {
       return props.icon;
     },
     get children() {
-      return _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+      return _$ssr(_tmpl$15, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
     }
   }), props.title, _$createComponent(Show, {
     get when() {
       return props.count !== undefined;
     },
     get children() {
-      return _$ssr(_tmpl$14, _$escape(props.count));
+      return _$ssr(_tmpl$16, _$escape(props.count));
     }
   })];
   return _$ssrElement("section", _$mergeProps({
@@ -651,7 +825,7 @@ const AppWorkspaceSidebarSection = props => {
       return props.title || props.actions;
     },
     get children() {
-      return _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
         get when() {
           return props.collapsible;
         },
@@ -661,23 +835,23 @@ const AppWorkspaceSidebarSection = props => {
               return props.title;
             },
             get children() {
-              return _$ssr(_tmpl$19, _$escape(title()));
+              return _$ssr(_tmpl$21, _$escape(title()));
             }
           });
         },
         get children() {
-          return _$ssr(_tmpl$15, _$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$17, _$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$16, _$escape(props.actions));
+          return _$ssr(_tmpl$18, _$escape(props.actions));
         }
       })));
     }
-  })), _$ssr(_tmpl$18, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
+  })), _$ssr(_tmpl$20, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
   kind: SIDEBAR_ITEM_ICON
@@ -691,7 +865,7 @@ const AppWorkspaceSidebarItemMeta = props => mergeProps({
 const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
-const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$20, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
+const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$22, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
 const AppWorkspaceSidebarItemStatus = props => {
   const workspaceMessages = useWorkspaceMessages();
   const waiting = () => props.waiting && Number.isFinite(props.waiting.count) ? Math.max(0, Math.floor(props.waiting.count)) : null;
@@ -707,7 +881,7 @@ const AppWorkspaceSidebarItemStatus = props => {
   // The element itself stays when there is nothing to show: empty, it takes no
   // space, and it still keeps the row's label on one line, so the first count
   // never re-wraps the label and moves the rows below.
-  return _$ssr(_tmpl$26, _$ssrAttribute("data-unread", waiting() !== null ? _$escape(undefined, true) : count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", waiting() === null ? _$escape(undefined, true) : waiting() ? "count" : "zero", false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$28, _$ssrAttribute("data-unread", waiting() !== null ? _$escape(undefined, true) : count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", waiting() === null ? _$escape(undefined, true) : waiting() ? "count" : "zero", false), _$escape(_$createComponent(Show, {
     get when() {
       return description();
     },
@@ -717,16 +891,16 @@ const AppWorkspaceSidebarItemStatus = props => {
           return props.mention;
         },
         get children() {
-          return _$ssr(_tmpl$21);
+          return _$ssr(_tmpl$23);
         }
       }), _$createComponent(Show, {
         get when() {
           return props.muted;
         },
         get children() {
-          return _$ssr(_tmpl$22);
+          return _$ssr(_tmpl$24);
         }
-      }), _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+      }), _$ssr(_tmpl$26, _$escape(_$createComponent(Show, {
         get when() {
           return count() || waiting() === 0;
         },
@@ -736,14 +910,14 @@ const AppWorkspaceSidebarItemStatus = props => {
               return dot();
             },
             get children() {
-              return _$ssr(_tmpl$27);
+              return _$ssr(_tmpl$29);
             }
           });
         },
         get children() {
-          return _$ssr(_tmpl$23, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
+          return _$ssr(_tmpl$25, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
         }
-      }))), _$ssr(_tmpl$25, _$escape(description()))];
+      }))), _$ssr(_tmpl$27, _$escape(description()))];
     }
   })));
 };
@@ -883,19 +1057,22 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      return _$ssr(_tmpl$28, _$escape(iconContent() ?? _$ssr(_tmpl$34, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+      return _$ssr(_tmpl$30, _$ssrAttribute("class",
+      // An object row's own glyph sits in a soft chip of the app colour; custom content such as an avatar keeps
+      // its own look.
+      props.variant === "object" && !iconContent() ? "k2b-app-workspace__sidebar-item-icon k2b-icon-tile" : "k2b-app-workspace__sidebar-item-icon", false), _$escape(iconContent() ?? _$ssr(_tmpl$36, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
     }
-  }), _$ssr(_tmpl$32, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$34, _$escape(_$createComponent(Show, {
     get when() {
       return props.context || props.contextMeta;
     },
     get children() {
-      return _$ssr(_tmpl$30, _$escape(props.context), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$32, _$escape(props.context), _$escape(_$createComponent(Show, {
         get when() {
           return props.contextMeta;
         },
         get children() {
-          return _$ssr(_tmpl$29, _$escape(props.contextMeta));
+          return _$ssr(_tmpl$31, _$escape(props.contextMeta));
         }
       })));
     }
@@ -904,14 +1081,14 @@ function AppWorkspaceSidebarItem(props) {
       return props.description;
     },
     get children() {
-      return _$ssr(_tmpl$31, _$escape(props.description));
+      return _$ssr(_tmpl$33, _$escape(props.description));
     }
   }))), _$createComponent(Show, {
     get when() {
       return hasMeta();
     },
     get children() {
-      return _$ssr(_tmpl$33, _$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$35, _$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 = () => {
@@ -926,7 +1103,7 @@ function AppWorkspaceSidebarItem(props) {
       actionSlot()?.onSelect?.(event);
       props.onActionClick?.(event);
     };
-    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$34, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$36, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
     return _$createComponent(Show, {
       get when() {
         return Boolean(actionSlot() || props.actionIcon);
@@ -937,10 +1114,10 @@ function AppWorkspaceSidebarItem(props) {
             return _$memo(() => !!actionSlot()?.href)() && !actionSlot()?.disabled;
           },
           get fallback() {
-            return _$ssr(_tmpl$36, _$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$38, _$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$35, _$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$37, _$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()));
           }
         });
       }
@@ -1246,31 +1423,31 @@ const AppWorkspaceNavTree = props => {
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
-          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$34, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
+          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$36, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
         }
       }), _$createComponent(Show, {
         get when() {
           return item.description !== undefined;
         },
         get fallback() {
-          return _$ssr(_tmpl$40, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label));
+          return _$ssr(_tmpl$42, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label));
         },
         get children() {
-          return _$ssr(_tmpl$37, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label), _$escape(item.description));
+          return _$ssr(_tmpl$39, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label), _$escape(item.description));
         }
       }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          return _$ssr(_tmpl$38, `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$40, `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$39, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+          return _$ssr(_tmpl$41, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1377,12 +1554,12 @@ const AppWorkspaceNavTree = props => {
         endDrag();
         requestMove(target.move, false);
       };
-      return _$ssr(_tmpl$42, _$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$44, _$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$41, _$escape(renderItems(nested, depth + 1, item.id)));
+          return _$ssr(_tmpl$43, _$escape(renderItems(nested, depth + 1, item.id)));
         }
       })));
     }
@@ -1407,7 +1584,7 @@ const AppWorkspaceNavTree = props => {
       doc?.removeEventListener("pointermove", forgetDrag, true);
     });
   });
-  return _$ssr(_tmpl$43, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots, 0)));
+  return _$ssr(_tmpl$45, `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({
@@ -1418,10 +1595,10 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
   get when() {
     return props.title;
   },
-  children: title => _$ssr(_tmpl$19, _$escape(title()))
-})), _$ssr(_tmpl$44, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+  children: title => _$ssr(_tmpl$21, _$escape(title()))
+})), _$ssr(_tmpl$46, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
-  const content = _$ssr(_tmpl$45, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  const content = _$ssr(_tmpl$47, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
     title: props.label,
@@ -1479,7 +1656,7 @@ 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$47, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false), _$escape(_$createComponent(IconButton, {
+  return _$ssr(_tmpl$49, _$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;
@@ -1490,7 +1667,7 @@ function AppWorkspaceHead(props) {
     "aria-expanded": "false",
     "data-app-workspace-sidebar-toggle": "",
     get children() {
-      return _$ssr(_tmpl$46);
+      return _$ssr(_tmpl$48);
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -1502,7 +1679,7 @@ function AppWorkspaceHead(props) {
       },
       as: "p",
       fallback: true
-    }), _$ssr(_tmpl$48, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
+    }), _$ssr(_tmpl$50, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
   })));
 }
 const AppWorkspace = props => {
@@ -1538,7 +1715,7 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          return _$ssr(_tmpl$49, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, 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, {
+          return _$ssr(_tmpl$51, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, 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));
@@ -1555,7 +1732,7 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$50, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$52, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;