@k2b/ui 0.27.0 → 0.29.0

package/dist/browser/layout/AppWorkspace.js

@@ -26,58 +26,64 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-left"aria-hidden=true>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__level-body>`),
   _tmpl$0 = /*#__PURE__*/_$template(`<style>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<aside><button type=button class=k2b-app-workspace__detail-grabber aria-pressed=false><span aria-hidden=true></span></button><!$><!/>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<aside>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-desktop>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<script>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<footer>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-section-count>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-section-toggle><!$><!/><i aria-hidden=true>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-section-content>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<h2>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-mention aria-hidden=true>@`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-muted aria-hidden=true><i class="ti ti-bell-off">`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-count>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-unread aria-hidden=true>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>, <!$><!/>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-dot>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<button type=button>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<a>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><!$><!/><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><!$><!/>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><span class=k2b-app-workspace__sidebar-item-description>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
-  _tmpl$47 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
-  _tmpl$48 = /*#__PURE__*/_$template(`<div role=tree>`),
-  _tmpl$49 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
-  _tmpl$50 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$51 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
-  _tmpl$52 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><!$><!/>`),
-  _tmpl$53 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
-  _tmpl$54 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace><!$><!/><!$><!/>`);
+  _tmpl$1 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar-right"aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<aside><button type=button class=k2b-app-workspace__detail-grabber aria-pressed=false><span aria-hidden=true></span></button><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<aside>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<nav class=k2b-app-workspace__sidebar-sheet>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-desktop>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-all aria-haspopup=dialog><span></span><i class="ti ti-chevron-down"aria-hidden=true>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<script>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<footer>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-section-count>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-section-toggle><!$><!/><i aria-hidden=true>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-section-content>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<h2>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-mention aria-hidden=true>@`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-muted aria-hidden=true><i class="ti ti-bell-off">`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-count>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-unread aria-hidden=true>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>, <!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-dot>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<span aria-hidden=true>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><!$><!/><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><!$><!/>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><span class=k2b-app-workspace__sidebar-item-description>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
+  _tmpl$48 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
+  _tmpl$50 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<div role=tree>`),
+  _tmpl$52 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
+  _tmpl$53 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$54 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
+  _tmpl$55 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><!$><!/>`),
+  _tmpl$56 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
+  _tmpl$57 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace><!$><!/><!$><!/>`);
 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";
@@ -621,7 +627,19 @@ function AppWorkspaceDetail(props) {
     var _el$16 = _$getNextElement(_tmpl$0);
     _$effect(() => _$setProperty(_el$16, "innerHTML", workspaceRule()));
     return _el$16;
-  })(), _$createComponent(Show, {
+  })(), _$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 [_$getNextElement(_tmpl$1), _$memo(() => workspaceMessages().details)];
+    }
+  }), _$createComponent(Show, {
     get when() {
       return resizable();
     },
@@ -650,13 +668,13 @@ function AppWorkspaceDetail(props) {
       });
     }
   }), (() => {
-    var _el$17 = _$getNextElement(_tmpl$1),
-      _el$18 = _el$17.firstChild,
-      _el$19 = _el$18.nextSibling,
-      [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling);
+    var _el$18 = _$getNextElement(_tmpl$10),
+      _el$19 = _el$18.firstChild,
+      _el$20 = _el$19.nextSibling,
+      [_el$21, _co$4] = _$getNextMarker(_el$20.nextSibling);
     var _ref$2 = aside;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$17) : aside = _el$17;
-    _$insert(_el$17, () => props.children, _el$20, _co$4);
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$18) : aside = _el$18;
+    _$insert(_el$18, () => props.children, _el$21, _co$4);
     _$effect(_p$ => {
       var _v$30 = domId(),
         _v$31 = `k2b-app-workspace__detail ${props.class ?? ""}`,
@@ -672,17 +690,17 @@ function AppWorkspaceDetail(props) {
           "view-transition-name": props.viewTransitionName
         },
         _v$40 = workspaceMessages().detailFullHeight;
-      _v$30 !== _p$.e && _$setAttribute(_el$17, "id", _p$.e = _v$30);
-      _v$31 !== _p$.t && _$className(_el$17, _p$.t = _v$31);
-      _v$32 !== _p$.a && _$setAttribute(_el$17, "data-width", _p$.a = _v$32);
-      _v$33 !== _p$.o && _$setAttribute(_el$17, "data-workspace-detail-phone", _p$.o = _v$33);
-      _v$34 !== _p$.i && _$setAttribute(_el$17, "data-workspace-panel-id", _p$.i = _v$34);
-      _v$35 !== _p$.n && _$setAttribute(_el$17, "data-workspace-resizable", _p$.n = _v$35);
-      _v$36 !== _p$.s && _$setAttribute(_el$17, "data-workspace-detail-closable", _p$.s = _v$36);
-      _v$37 !== _p$.h && _$setAttribute(_el$17, "data-workspace-detail-steppable", _p$.h = _v$37);
-      _v$38 !== _p$.r && _$setProperty(_el$17, "hidden", _p$.r = _v$38);
-      _p$.d = _$style(_el$17, _v$39, _p$.d);
-      _v$40 !== _p$.l && _$setAttribute(_el$18, "aria-label", _p$.l = _v$40);
+      _v$30 !== _p$.e && _$setAttribute(_el$18, "id", _p$.e = _v$30);
+      _v$31 !== _p$.t && _$className(_el$18, _p$.t = _v$31);
+      _v$32 !== _p$.a && _$setAttribute(_el$18, "data-width", _p$.a = _v$32);
+      _v$33 !== _p$.o && _$setAttribute(_el$18, "data-workspace-detail-phone", _p$.o = _v$33);
+      _v$34 !== _p$.i && _$setAttribute(_el$18, "data-workspace-panel-id", _p$.i = _v$34);
+      _v$35 !== _p$.n && _$setAttribute(_el$18, "data-workspace-resizable", _p$.n = _v$35);
+      _v$36 !== _p$.s && _$setAttribute(_el$18, "data-workspace-detail-closable", _p$.s = _v$36);
+      _v$37 !== _p$.h && _$setAttribute(_el$18, "data-workspace-detail-steppable", _p$.h = _v$37);
+      _v$38 !== _p$.r && _$setProperty(_el$18, "hidden", _p$.r = _v$38);
+      _p$.d = _$style(_el$18, _v$39, _p$.d);
+      _v$40 !== _p$.l && _$setAttribute(_el$19, "aria-label", _p$.l = _v$40);
       return _p$;
     }, {
       e: undefined,
@@ -697,7 +715,7 @@ function AppWorkspaceDetail(props) {
       d: undefined,
       l: undefined
     });
-    return _el$17;
+    return _el$18;
   })()];
 }
 function AppWorkspaceBottomDrawer(props) {
@@ -747,8 +765,8 @@ function AppWorkspaceBottomDrawer(props) {
       });
     }
   }), (() => {
-    var _el$21 = _$getNextElement(_tmpl$10);
-    _$insert(_el$21, () => props.children);
+    var _el$22 = _$getNextElement(_tmpl$11);
+    _$insert(_el$22, () => props.children);
     _$effect(_p$ => {
       var _v$41 = domId(),
         _v$42 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
@@ -758,14 +776,14 @@ function AppWorkspaceBottomDrawer(props) {
         _v$46 = !props.open,
         _v$47 = `var(${variable()}, ${defaultHeight()}px)`,
         _v$48 = props.viewTransitionName;
-      _v$41 !== _p$.e && _$setAttribute(_el$21, "id", _p$.e = _v$41);
-      _v$42 !== _p$.t && _$className(_el$21, _p$.t = _v$42);
-      _v$43 !== _p$.a && _$setAttribute(_el$21, "data-height", _p$.a = _v$43);
-      _v$44 !== _p$.o && _$setAttribute(_el$21, "data-workspace-panel-id", _p$.o = _v$44);
-      _v$45 !== _p$.i && _$setAttribute(_el$21, "data-workspace-resizable", _p$.i = _v$45);
-      _v$46 !== _p$.n && _$setProperty(_el$21, "hidden", _p$.n = _v$46);
-      _v$47 !== _p$.s && _$setStyleProperty(_el$21, "--k2b-workspace-panel-size", _p$.s = _v$47);
-      _v$48 !== _p$.h && _$setStyleProperty(_el$21, "view-transition-name", _p$.h = _v$48);
+      _v$41 !== _p$.e && _$setAttribute(_el$22, "id", _p$.e = _v$41);
+      _v$42 !== _p$.t && _$className(_el$22, _p$.t = _v$42);
+      _v$43 !== _p$.a && _$setAttribute(_el$22, "data-height", _p$.a = _v$43);
+      _v$44 !== _p$.o && _$setAttribute(_el$22, "data-workspace-panel-id", _p$.o = _v$44);
+      _v$45 !== _p$.i && _$setAttribute(_el$22, "data-workspace-resizable", _p$.i = _v$45);
+      _v$46 !== _p$.n && _$setProperty(_el$22, "hidden", _p$.n = _v$46);
+      _v$47 !== _p$.s && _$setStyleProperty(_el$22, "--k2b-workspace-panel-size", _p$.s = _v$47);
+      _v$48 !== _p$.h && _$setStyleProperty(_el$22, "view-transition-name", _p$.h = _v$48);
       return _p$;
     }, {
       e: undefined,
@@ -777,7 +795,7 @@ function AppWorkspaceBottomDrawer(props) {
       s: undefined,
       h: undefined
     });
-    return _el$21;
+    return _el$22;
   })()];
 }
 function AppWorkspaceSidebar(props) {
@@ -796,56 +814,210 @@ 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 [(() => {
-    var _el$22 = _$getNextElement(_tmpl$10);
-    var _ref$3 = aside;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$22) : aside = _el$22;
-    _$insert(_el$22, _$createComponent(Show, {
-      get when() {
-        return !props.hidden;
-      },
-      get children() {
-        var _el$23 = _$getNextElement(_tmpl$11);
-        _$insert(_el$23, () => desktop()?.children);
-        return _el$23;
+  /**
+   * 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 (() => {
+                      var _el$23 = _$getNextElement(_tmpl$12);
+                      _$addEventListener(_el$23, "click", event => choose(event, () => close()));
+                      _$insert(_el$23, resolved);
+                      _$effect(_p$ => {
+                        var _v$49 = props.label,
+                          _v$50 = accent;
+                        _v$49 !== _p$.e && _$setAttribute(_el$23, "aria-label", _p$.e = _v$49);
+                        _p$.t = _$style(_el$23, _v$50, _p$.t);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined
+                      });
+                      return _el$23;
+                    })();
+                  }
+                });
+              }
+            })];
+          }
+        });
+      }, 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
+          });
+        }
       }
-    }));
-    _$effect(_p$ => {
-      var _v$49 = domId(),
-        _v$50 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
-        _v$51 = props.label,
-        _v$52 = props.hidden || undefined,
-        _v$53 = props.mobile === "stacked" ? "stacked" : undefined,
-        _v$54 = resizable() ? "true" : "false",
-        _v$55 = props.collapsible ? "true" : "false",
-        _v$56 = props.onHiddenChange ? "true" : undefined;
-      _v$49 !== _p$.e && _$setAttribute(_el$22, "id", _p$.e = _v$49);
-      _v$50 !== _p$.t && _$className(_el$22, _p$.t = _v$50);
-      _v$51 !== _p$.a && _$setAttribute(_el$22, "aria-label", _p$.a = _v$51);
-      _v$52 !== _p$.o && _$setProperty(_el$22, "hidden", _p$.o = _v$52);
-      _v$53 !== _p$.i && _$setAttribute(_el$22, "data-mobile", _p$.i = _v$53);
-      _v$54 !== _p$.n && _$setAttribute(_el$22, "data-workspace-resizable", _p$.n = _v$54);
-      _v$55 !== _p$.s && _$setAttribute(_el$22, "data-workspace-collapsible", _p$.s = _v$55);
-      _v$56 !== _p$.h && _$setAttribute(_el$22, "data-workspace-hideable", _p$.h = _v$56);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined,
-      i: undefined,
-      n: undefined,
-      s: undefined,
-      h: undefined
     });
-    return _el$22;
-  })(), _$createComponent(Show, {
+  };
+  return [_$createComponent(Dynamic, {
+    get component() {
+      return stacked() ? "nav" : "aside";
+    },
+    ref(r$) {
+      var _ref$3 = aside;
+      typeof _ref$3 === "function" ? _ref$3(r$) : aside = r$;
+    },
+    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 _$createComponent(Show, {
+        get when() {
+          return !props.hidden;
+        },
+        get children() {
+          return [(() => {
+            var _el$24 = _$getNextElement(_tmpl$13);
+            var _ref$4 = row;
+            typeof _ref$4 === "function" ? _$use(_ref$4, _el$24) : row = _el$24;
+            _$insert(_el$24, () => desktop()?.children);
+            _$effect(_p$ => {
+              var _v$51 = stacked() ? "both" : undefined,
+                _v$52 = stacked() ? "horizontal" : undefined;
+              _v$51 !== _p$.e && _$setAttribute(_el$24, "data-scroll-fade-mode", _p$.e = _v$51);
+              _v$52 !== _p$.t && _$setAttribute(_el$24, "data-scroll-fade-axis", _p$.t = _v$52);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$24;
+          })(), _$createComponent(Show, {
+            get when() {
+              return stacked();
+            },
+            get children() {
+              return [(() => {
+                var _el$25 = _$getNextElement(_tmpl$14),
+                  _el$26 = _el$25.firstChild;
+                _el$25.$$click = event => openAll(event.currentTarget);
+                _$insert(_el$26, () => workspaceMessages().sidebarAll);
+                _$effect(_p$ => {
+                  var _v$53 = sheetOpen(),
+                    _v$54 = props.label ? workspaceMessages().sidebarAllLabel({
+                      label: props.label
+                    }) : undefined;
+                  _v$53 !== _p$.e && _$setAttribute(_el$25, "aria-expanded", _p$.e = _v$53);
+                  _v$54 !== _p$.t && _$setAttribute(_el$25, "aria-label", _p$.t = _v$54);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
+                _$runHydrationEvents();
+                return _el$25;
+              })(), (() => {
+                var _el$27 = _$getNextElement(_tmpl$15);
+                _$setProperty(_el$27, "innerHTML", CHIP_ROW_SCRIPT);
+                return _el$27;
+              })()];
+            }
+          })];
+        }
+      });
+    }
+  }), _$createComponent(Show, {
     get when() {
       return _$memo(() => !!resizable())() && !props.hidden;
     },
@@ -872,6 +1044,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
@@ -890,10 +1085,10 @@ const AppWorkspaceSidebarBody = props => {
   onMount(() => onCleanup(rememberSidebarScroll(body, scrollFadeEdges)));
   createScrollFade(() => body, () => props.scrollFade !== false);
   return [(() => {
-    var _el$24 = _$getNextElement(_tmpl$5);
-    var _ref$4 = body;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$24) : body = _el$24;
-    _$spread(_el$24, _$mergeProps({
+    var _el$28 = _$getNextElement(_tmpl$5);
+    var _ref$5 = body;
+    typeof _ref$5 === "function" ? _$use(_ref$5, _el$28) : body = _el$28;
+    _$spread(_el$28, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
       },
@@ -901,25 +1096,25 @@ const AppWorkspaceSidebarBody = props => {
         return props.scrollFade !== false ? "both" : undefined;
       }
     }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), false, true);
-    _$insert(_el$24, () => props.children);
+    _$insert(_el$28, () => props.children);
     _$runHydrationEvents();
-    return _el$24;
+    return _el$28;
   })(), (() => {
-    var _el$25 = _$getNextElement(_tmpl$12);
-    _$setProperty(_el$25, "innerHTML", SIDEBAR_SCROLL_MEMORY_SCRIPT);
-    return _el$25;
+    var _el$29 = _$getNextElement(_tmpl$15);
+    _$setProperty(_el$29, "innerHTML", SIDEBAR_SCROLL_MEMORY_SCRIPT);
+    return _el$29;
   })()];
 };
 const AppWorkspaceSidebarFooter = props => (() => {
-  var _el$26 = _$getNextElement(_tmpl$13);
-  _$spread(_el$26, _$mergeProps({
+  var _el$30 = _$getNextElement(_tmpl$16);
+  _$spread(_el$30, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-footer ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$26, () => props.children);
+  _$insert(_el$30, () => props.children);
   _$runHydrationEvents();
-  return _el$26;
+  return _el$30;
 })();
 const AppWorkspaceSidebarSection = props => {
   const [expanded, setExpanded] = createSignal(props.defaultOpen ?? true);
@@ -930,27 +1125,27 @@ const AppWorkspaceSidebarSection = props => {
       return props.icon;
     },
     get children() {
-      var _el$27 = _$getNextElement(_tmpl$14),
-        _el$28 = _el$27.firstChild;
-      _$effect(() => _$className(_el$28, iconClass(props.icon)));
-      return _el$27;
+      var _el$31 = _$getNextElement(_tmpl$17),
+        _el$32 = _el$31.firstChild;
+      _$effect(() => _$className(_el$32, iconClass(props.icon)));
+      return _el$31;
     }
   }), _$memo(() => props.title), _$createComponent(Show, {
     get when() {
       return props.count !== undefined;
     },
     get children() {
-      var _el$29 = _$getNextElement(_tmpl$15);
-      _$insert(_el$29, () => props.count);
-      return _el$29;
+      var _el$33 = _$getNextElement(_tmpl$18);
+      _$insert(_el$33, () => props.count);
+      return _el$33;
     }
   })];
   return (() => {
-    var _el$30 = _$getNextElement(_tmpl$19),
-      _el$42 = _el$30.firstChild,
-      [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
-      _el$41 = _el$43.nextSibling;
-    _$spread(_el$30, _$mergeProps({
+    var _el$34 = _$getNextElement(_tmpl$22),
+      _el$46 = _el$34.firstChild,
+      [_el$47, _co$8] = _$getNextMarker(_el$46.nextSibling),
+      _el$45 = _el$47.nextSibling;
+    _$spread(_el$34, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
       },
@@ -958,17 +1153,17 @@ const AppWorkspaceSidebarSection = props => {
         return props.collapsible ? "true" : undefined;
       }
     }, () => modeAttrs(props.sidebarMode)), false, true);
-    _$insert(_el$30, _$createComponent(Show, {
+    _$insert(_el$34, _$createComponent(Show, {
       get when() {
         return props.title || props.actions;
       },
       get children() {
-        var _el$31 = _$getNextElement(_tmpl$18),
-          _el$37 = _el$31.firstChild,
-          [_el$38, _co$6] = _$getNextMarker(_el$37.nextSibling),
-          _el$39 = _el$38.nextSibling,
-          [_el$40, _co$7] = _$getNextMarker(_el$39.nextSibling);
-        _$insert(_el$31, _$createComponent(Show, {
+        var _el$35 = _$getNextElement(_tmpl$21),
+          _el$41 = _el$35.firstChild,
+          [_el$42, _co$6] = _$getNextMarker(_el$41.nextSibling),
+          _el$43 = _el$42.nextSibling,
+          [_el$44, _co$7] = _$getNextMarker(_el$43.nextSibling);
+        _$insert(_el$35, _$createComponent(Show, {
           get when() {
             return props.collapsible;
           },
@@ -978,56 +1173,56 @@ const AppWorkspaceSidebarSection = props => {
                 return props.title;
               },
               get children() {
-                var _el$44 = _$getNextElement(_tmpl$20);
-                _$insert(_el$44, title);
-                return _el$44;
+                var _el$48 = _$getNextElement(_tmpl$23);
+                _$insert(_el$48, title);
+                return _el$48;
               }
             });
           },
           get children() {
-            var _el$32 = _$getNextElement(_tmpl$16),
-              _el$34 = _el$32.firstChild,
-              [_el$35, _co$5] = _$getNextMarker(_el$34.nextSibling),
-              _el$33 = _el$35.nextSibling;
-            _el$32.$$click = () => {
+            var _el$36 = _$getNextElement(_tmpl$19),
+              _el$38 = _el$36.firstChild,
+              [_el$39, _co$5] = _$getNextMarker(_el$38.nextSibling),
+              _el$37 = _el$39.nextSibling;
+            _el$36.$$click = () => {
               const next = !open();
               setExpanded(next);
               props.onOpenChange?.(next);
             };
-            _$setAttribute(_el$32, "aria-controls", id);
-            _$insert(_el$32, title, _el$35, _co$5);
+            _$setAttribute(_el$36, "aria-controls", id);
+            _$insert(_el$36, title, _el$39, _co$5);
             _$effect(_p$ => {
-              var _v$57 = open(),
-                _v$58 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
-              _v$57 !== _p$.e && _$setAttribute(_el$32, "aria-expanded", _p$.e = _v$57);
-              _v$58 !== _p$.t && _$className(_el$33, _p$.t = _v$58);
+              var _v$55 = open(),
+                _v$56 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
+              _v$55 !== _p$.e && _$setAttribute(_el$36, "aria-expanded", _p$.e = _v$55);
+              _v$56 !== _p$.t && _$className(_el$37, _p$.t = _v$56);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
             _$runHydrationEvents();
-            return _el$32;
+            return _el$36;
           }
-        }), _el$38, _co$6);
-        _$insert(_el$31, _$createComponent(Show, {
+        }), _el$42, _co$6);
+        _$insert(_el$35, _$createComponent(Show, {
           get when() {
             return props.actions;
           },
           get children() {
-            var _el$36 = _$getNextElement(_tmpl$17);
-            _$insert(_el$36, () => props.actions);
-            return _el$36;
+            var _el$40 = _$getNextElement(_tmpl$20);
+            _$insert(_el$40, () => props.actions);
+            return _el$40;
           }
-        }), _el$40, _co$7);
-        return _el$31;
+        }), _el$44, _co$7);
+        return _el$35;
       }
-    }), _el$43, _co$8);
-    _$setAttribute(_el$41, "id", id);
-    _$insert(_el$41, () => props.children);
-    _$effect(() => _$setProperty(_el$41, "hidden", !open()));
+    }), _el$47, _co$8);
+    _$setAttribute(_el$45, "id", id);
+    _$insert(_el$45, () => props.children);
+    _$effect(() => _$setProperty(_el$45, "hidden", !open()));
     _$runHydrationEvents();
-    return _el$30;
+    return _el$34;
   })();
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
@@ -1043,10 +1238,10 @@ const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
 const AppWorkspaceSidebarItemActions = props => (() => {
-  var _el$45 = _$getNextElement(_tmpl$21);
-  _$insert(_el$45, () => props.children);
-  _$effect(() => _$setAttribute(_el$45, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
-  return _el$45;
+  var _el$49 = _$getNextElement(_tmpl$24);
+  _$insert(_el$49, () => props.children);
+  _$effect(() => _$setAttribute(_el$49, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
+  return _el$49;
 })();
 const AppWorkspaceSidebarItemStatus = props => {
   const workspaceMessages = useWorkspaceMessages();
@@ -1064,8 +1259,8 @@ const AppWorkspaceSidebarItemStatus = props => {
   // 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 (() => {
-    var _el$46 = _$getNextElement(_tmpl$27);
-    _$insert(_el$46, _$createComponent(Show, {
+    var _el$50 = _$getNextElement(_tmpl$30);
+    _$insert(_el$50, _$createComponent(Show, {
       get when() {
         return description();
       },
@@ -1075,18 +1270,18 @@ const AppWorkspaceSidebarItemStatus = props => {
             return props.mention;
           },
           get children() {
-            return _$getNextElement(_tmpl$22);
+            return _$getNextElement(_tmpl$25);
           }
         }), _$createComponent(Show, {
           get when() {
             return props.muted;
           },
           get children() {
-            return _$getNextElement(_tmpl$23);
+            return _$getNextElement(_tmpl$26);
           }
         }), (() => {
-          var _el$49 = _$getNextElement(_tmpl$25);
-          _$insert(_el$49, _$createComponent(Show, {
+          var _el$53 = _$getNextElement(_tmpl$28);
+          _$insert(_el$53, _$createComponent(Show, {
             get when() {
               return count() || waiting() === 0;
             },
@@ -1096,42 +1291,42 @@ const AppWorkspaceSidebarItemStatus = props => {
                   return dot();
                 },
                 get children() {
-                  return _$getNextElement(_tmpl$28);
+                  return _$getNextElement(_tmpl$31);
                 }
               });
             },
             get children() {
-              var _el$50 = _$getNextElement(_tmpl$24);
-              _$insert(_el$50, (() => {
+              var _el$54 = _$getNextElement(_tmpl$27);
+              _$insert(_el$54, (() => {
                 var _c$2 = _$memo(() => count() > 99);
                 return () => _c$2() ? "99+" : count();
               })());
-              _$effect(() => _$setAttribute(_el$50, "data-mention", props.mention ? "true" : undefined));
-              return _el$50;
+              _$effect(() => _$setAttribute(_el$54, "data-mention", props.mention ? "true" : undefined));
+              return _el$54;
             }
           }));
-          return _el$49;
+          return _el$53;
         })(), (() => {
-          var _el$51 = _$getNextElement(_tmpl$26),
-            _el$52 = _el$51.firstChild,
-            _el$53 = _el$52.nextSibling,
-            [_el$54, _co$9] = _$getNextMarker(_el$53.nextSibling);
-          _$insert(_el$51, description, _el$54, _co$9);
-          return _el$51;
+          var _el$55 = _$getNextElement(_tmpl$29),
+            _el$56 = _el$55.firstChild,
+            _el$57 = _el$56.nextSibling,
+            [_el$58, _co$9] = _$getNextMarker(_el$57.nextSibling);
+          _$insert(_el$55, description, _el$58, _co$9);
+          return _el$55;
         })()];
       }
     }));
     _$effect(_p$ => {
-      var _v$59 = waiting() !== null ? undefined : count() ? "count" : dot() ? "dot" : undefined,
-        _v$60 = waiting() === null ? undefined : waiting() ? "count" : "zero";
-      _v$59 !== _p$.e && _$setAttribute(_el$46, "data-unread", _p$.e = _v$59);
-      _v$60 !== _p$.t && _$setAttribute(_el$46, "data-waiting", _p$.t = _v$60);
+      var _v$57 = waiting() !== null ? undefined : count() ? "count" : dot() ? "dot" : undefined,
+        _v$58 = waiting() === null ? undefined : waiting() ? "count" : "zero";
+      _v$57 !== _p$.e && _$setAttribute(_el$50, "data-unread", _p$.e = _v$57);
+      _v$58 !== _p$.t && _$setAttribute(_el$50, "data-waiting", _p$.t = _v$58);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$46;
+    return _el$50;
   })();
 };
 /** Shared visual and semantic row frame for flat sidebar items and tree items. */
@@ -1159,8 +1354,8 @@ function AppWorkspaceSidebarRow(props) {
       },
       get fallback() {
         return (() => {
-          var _el$56 = _$getNextElement(_tmpl$29);
-          _$spread(_el$56, _$mergeProps(attrs, {
+          var _el$60 = _$getNextElement(_tmpl$32);
+          _$spread(_el$60, _$mergeProps(attrs, {
             get tabIndex() {
               return props.tabIndex;
             },
@@ -1171,9 +1366,9 @@ function AppWorkspaceSidebarRow(props) {
               return props.onClick;
             }
           }), false, true);
-          _$insert(_el$56, () => props.children);
+          _$insert(_el$60, () => props.children);
           _$runHydrationEvents();
-          return _el$56;
+          return _el$60;
         })();
       },
       get children() {
@@ -1183,8 +1378,8 @@ function AppWorkspaceSidebarRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$57 = _$getNextElement(_tmpl$30);
-              _$spread(_el$57, _$mergeProps({
+              var _el$61 = _$getNextElement(_tmpl$33);
+              _$spread(_el$61, _$mergeProps({
                 get href() {
                   return props.href;
                 }
@@ -1199,9 +1394,9 @@ function AppWorkspaceSidebarRow(props) {
                   return props.onClick;
                 }
               }), false, true);
-              _$insert(_el$57, () => props.children);
+              _$insert(_el$61, () => props.children);
               _$runHydrationEvents();
-              return _el$57;
+              return _el$61;
             })();
           },
           get children() {
@@ -1247,22 +1442,22 @@ function AppWorkspaceSidebarRow(props) {
       });
     },
     get children() {
-      var _el$58 = _$getNextElement(_tmpl$31),
-        _el$59 = _el$58.firstChild,
-        [_el$60, _co$0] = _$getNextMarker(_el$59.nextSibling),
-        _el$61 = _el$60.nextSibling,
-        [_el$62, _co$1] = _$getNextMarker(_el$61.nextSibling);
-      _$spread(_el$58, _$mergeProps(common, {
+      var _el$62 = _$getNextElement(_tmpl$34),
+        _el$63 = _el$62.firstChild,
+        [_el$64, _co$0] = _$getNextMarker(_el$63.nextSibling),
+        _el$65 = _el$64.nextSibling,
+        [_el$66, _co$1] = _$getNextMarker(_el$65.nextSibling);
+      _$spread(_el$62, _$mergeProps(common, {
         get ["data-disabled"]() {
           return props.disabled ? "true" : undefined;
         }
       }), false, true);
-      _$insert(_el$58, _$createComponent(Control, {
+      _$insert(_el$62, _$createComponent(Control, {
         grouped: true
-      }), _el$60, _co$0);
-      _$insert(_el$58, () => props.actions, _el$62, _co$1);
+      }), _el$64, _co$0);
+      _$insert(_el$62, () => props.actions, _el$66, _co$1);
       _$runHydrationEvents();
-      return _el$58;
+      return _el$62;
     }
   });
 }
@@ -1295,85 +1490,89 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      var _el$63 = _$getNextElement(_tmpl$32);
-      _$insert(_el$63, () => iconContent() ?? (() => {
-        var _el$78 = _$getNextElement(_tmpl$38);
-        _$effect(() => _$className(_el$78, iconClass(icon())));
-        return _el$78;
+      var _el$67 = _$getNextElement(_tmpl$35);
+      _$insert(_el$67, () => iconContent() ?? (() => {
+        var _el$82 = _$getNextElement(_tmpl$41);
+        _$effect(() => _$className(_el$82, iconClass(icon())));
+        return _el$82;
       })());
-      return _el$63;
+      _$effect(() => _$className(_el$67,
+      // 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"));
+      return _el$67;
     }
   }), (() => {
-    var _el$64 = _$getNextElement(_tmpl$36),
-      _el$73 = _el$64.firstChild,
-      [_el$74, _co$11] = _$getNextMarker(_el$73.nextSibling),
-      _el$70 = _el$74.nextSibling,
-      _el$71 = _el$70.firstChild,
-      _el$75 = _el$70.nextSibling,
-      [_el$76, _co$12] = _$getNextMarker(_el$75.nextSibling);
-    _$insert(_el$64, _$createComponent(Show, {
+    var _el$68 = _$getNextElement(_tmpl$39),
+      _el$77 = _el$68.firstChild,
+      [_el$78, _co$11] = _$getNextMarker(_el$77.nextSibling),
+      _el$74 = _el$78.nextSibling,
+      _el$75 = _el$74.firstChild,
+      _el$79 = _el$74.nextSibling,
+      [_el$80, _co$12] = _$getNextMarker(_el$79.nextSibling);
+    _$insert(_el$68, _$createComponent(Show, {
       get when() {
         return props.context || props.contextMeta;
       },
       get children() {
-        var _el$65 = _$getNextElement(_tmpl$34),
-          _el$66 = _el$65.firstChild,
-          _el$68 = _el$66.nextSibling,
-          [_el$69, _co$10] = _$getNextMarker(_el$68.nextSibling);
-        _$insert(_el$66, () => props.context);
-        _$insert(_el$65, _$createComponent(Show, {
+        var _el$69 = _$getNextElement(_tmpl$37),
+          _el$70 = _el$69.firstChild,
+          _el$72 = _el$70.nextSibling,
+          [_el$73, _co$10] = _$getNextMarker(_el$72.nextSibling);
+        _$insert(_el$70, () => props.context);
+        _$insert(_el$69, _$createComponent(Show, {
           get when() {
             return props.contextMeta;
           },
           get children() {
-            var _el$67 = _$getNextElement(_tmpl$33);
-            _$insert(_el$67, () => props.contextMeta);
-            return _el$67;
+            var _el$71 = _$getNextElement(_tmpl$36);
+            _$insert(_el$71, () => props.contextMeta);
+            return _el$71;
           }
-        }), _el$69, _co$10);
-        return _el$65;
+        }), _el$73, _co$10);
+        return _el$69;
       }
-    }), _el$74, _co$11);
-    _$insert(_el$71, () => label());
-    _$insert(_el$64, _$createComponent(Show, {
+    }), _el$78, _co$11);
+    _$insert(_el$75, () => label());
+    _$insert(_el$68, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$72 = _$getNextElement(_tmpl$35);
-        _$insert(_el$72, () => props.description);
-        return _el$72;
+        var _el$76 = _$getNextElement(_tmpl$38);
+        _$insert(_el$76, () => props.description);
+        return _el$76;
       }
-    }), _el$76, _co$12);
+    }), _el$80, _co$12);
     _$effect(_p$ => {
-      var _v$61 = oneLine() ? "1" : undefined,
-        _v$62 = !oneLine() && typeof label() === "string" ? label() : undefined;
-      _v$61 !== _p$.e && _$setAttribute(_el$70, "data-lines", _p$.e = _v$61);
-      _v$62 !== _p$.t && _$setAttribute(_el$70, "data-label", _p$.t = _v$62);
+      var _v$59 = oneLine() ? "1" : undefined,
+        _v$60 = !oneLine() && typeof label() === "string" ? label() : undefined;
+      _v$59 !== _p$.e && _$setAttribute(_el$74, "data-lines", _p$.e = _v$59);
+      _v$60 !== _p$.t && _$setAttribute(_el$74, "data-label", _p$.t = _v$60);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$64;
+    return _el$68;
   })(), _$createComponent(Show, {
     get when() {
       return hasMeta();
     },
     get children() {
-      var _el$77 = _$getNextElement(_tmpl$37);
-      _$insert(_el$77, meta);
+      var _el$81 = _$getNextElement(_tmpl$40);
+      _$insert(_el$81, meta);
       _$effect(_p$ => {
-        var _v$63 = props.preview?.trigger === "row" ? metaId : undefined,
-          _v$64 = metaVisibility() === "hover" ? "hover" : undefined;
-        _v$63 !== _p$.e && _$setAttribute(_el$77, "id", _p$.e = _v$63);
-        _v$64 !== _p$.t && _$setAttribute(_el$77, "data-visibility", _p$.t = _v$64);
+        var _v$61 = props.preview?.trigger === "row" ? metaId : undefined,
+          _v$62 = metaVisibility() === "hover" ? "hover" : undefined;
+        _v$61 !== _p$.e && _$setAttribute(_el$81, "id", _p$.e = _v$61);
+        _v$62 !== _p$.t && _$setAttribute(_el$81, "data-visibility", _p$.t = _v$62);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$77;
+      return _el$81;
     }
   })];
   const singleAction = () => {
@@ -1389,9 +1588,9 @@ function AppWorkspaceSidebarItem(props) {
       props.onActionClick?.(event);
     };
     const content = () => actionSlot()?.children ?? (() => {
-      var _el$79 = _$getNextElement(_tmpl$38);
-      _$effect(() => _$className(_el$79, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
-      return _el$79;
+      var _el$83 = _$getNextElement(_tmpl$41);
+      _$effect(() => _$className(_el$83, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$83;
     })();
     return _$createComponent(Show, {
       get when() {
@@ -1404,16 +1603,16 @@ function AppWorkspaceSidebarItem(props) {
           },
           get fallback() {
             return (() => {
-              var _el$81 = _$getNextElement(_tmpl$40);
-              _el$81.$$click = select;
-              _$insert(_el$81, content);
+              var _el$85 = _$getNextElement(_tmpl$43);
+              _el$85.$$click = select;
+              _$insert(_el$85, content);
               _$effect(_p$ => {
-                var _v$68 = actionSlot()?.disabled,
-                  _v$69 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                  _v$70 = label();
-                _v$68 !== _p$.e && _$setProperty(_el$81, "disabled", _p$.e = _v$68);
-                _v$69 !== _p$.t && _$setAttribute(_el$81, "data-visibility", _p$.t = _v$69);
-                _v$70 !== _p$.a && _$setAttribute(_el$81, "aria-label", _p$.a = _v$70);
+                var _v$66 = actionSlot()?.disabled,
+                  _v$67 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$68 = label();
+                _v$66 !== _p$.e && _$setProperty(_el$85, "disabled", _p$.e = _v$66);
+                _v$67 !== _p$.t && _$setAttribute(_el$85, "data-visibility", _p$.t = _v$67);
+                _v$68 !== _p$.a && _$setAttribute(_el$85, "aria-label", _p$.a = _v$68);
                 return _p$;
               }, {
                 e: undefined,
@@ -1421,20 +1620,20 @@ function AppWorkspaceSidebarItem(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$81;
+              return _el$85;
             })();
           },
           get children() {
-            var _el$80 = _$getNextElement(_tmpl$39);
-            _el$80.$$click = select;
-            _$insert(_el$80, content);
+            var _el$84 = _$getNextElement(_tmpl$42);
+            _el$84.$$click = select;
+            _$insert(_el$84, content);
             _$effect(_p$ => {
-              var _v$65 = actionSlot()?.href,
-                _v$66 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                _v$67 = label();
-              _v$65 !== _p$.e && _$setAttribute(_el$80, "href", _p$.e = _v$65);
-              _v$66 !== _p$.t && _$setAttribute(_el$80, "data-visibility", _p$.t = _v$66);
-              _v$67 !== _p$.a && _$setAttribute(_el$80, "aria-label", _p$.a = _v$67);
+              var _v$63 = actionSlot()?.href,
+                _v$64 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$65 = label();
+              _v$63 !== _p$.e && _$setAttribute(_el$84, "href", _p$.e = _v$63);
+              _v$64 !== _p$.t && _$setAttribute(_el$84, "data-visibility", _p$.t = _v$64);
+              _v$65 !== _p$.a && _$setAttribute(_el$84, "aria-label", _p$.a = _v$65);
               return _p$;
             }, {
               e: undefined,
@@ -1442,7 +1641,7 @@ function AppWorkspaceSidebarItem(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$80;
+            return _el$84;
           }
         });
       }
@@ -1743,16 +1942,16 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          var _el$82 = _$getNextElement(_tmpl$41),
-            _el$83 = _el$82.firstChild;
-          _$spread(_el$82, _$mergeProps({
+          var _el$86 = _$getNextElement(_tmpl$44),
+            _el$87 = _el$86.firstChild;
+          _$spread(_el$86, _$mergeProps({
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
           }, () => iconAccessibility(item.iconLabel)), false, true);
-          _$effect(() => _$className(_el$83, iconClass(rowIcon())));
+          _$effect(() => _$className(_el$87, iconClass(rowIcon())));
           _$runHydrationEvents();
-          return _el$82;
+          return _el$86;
         }
       }), _$createComponent(Show, {
         get when() {
@@ -1760,51 +1959,51 @@ const AppWorkspaceNavTree = props => {
         },
         get fallback() {
           return (() => {
-            var _el$91 = _$getNextElement(_tmpl$45),
-              _el$92 = _el$91.firstChild;
-            _$insert(_el$92, () => item.label);
-            _$effect(() => _$setAttribute(_el$91, "data-label", typeof item.label === "string" ? item.label : undefined));
-            return _el$91;
+            var _el$95 = _$getNextElement(_tmpl$48),
+              _el$96 = _el$95.firstChild;
+            _$insert(_el$96, () => item.label);
+            _$effect(() => _$setAttribute(_el$95, "data-label", typeof item.label === "string" ? item.label : undefined));
+            return _el$95;
           })();
         },
         get children() {
-          var _el$84 = _$getNextElement(_tmpl$42),
-            _el$85 = _el$84.firstChild,
-            _el$86 = _el$85.firstChild,
-            _el$87 = _el$85.nextSibling;
-          _$insert(_el$86, () => item.label);
-          _$insert(_el$87, () => item.description);
-          _$effect(() => _$setAttribute(_el$85, "data-label", typeof item.label === "string" ? item.label : undefined));
-          return _el$84;
+          var _el$88 = _$getNextElement(_tmpl$45),
+            _el$89 = _el$88.firstChild,
+            _el$90 = _el$89.firstChild,
+            _el$91 = _el$89.nextSibling;
+          _$insert(_el$90, () => item.label);
+          _$insert(_el$91, () => item.description);
+          _$effect(() => _$setAttribute(_el$89, "data-label", typeof item.label === "string" ? item.label : undefined));
+          return _el$88;
         }
       }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          var _el$88 = _$getNextElement(_tmpl$43);
-          _$insert(_el$88, () => item.meta);
+          var _el$92 = _$getNextElement(_tmpl$46);
+          _$insert(_el$92, () => item.meta);
           _$effect(_p$ => {
-            var _v$71 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$72 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$71 !== _p$.e && _$className(_el$88, _p$.e = _v$71);
-            _v$72 !== _p$.t && _$setAttribute(_el$88, "data-visibility", _p$.t = _v$72);
+            var _v$69 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$70 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$69 !== _p$.e && _$className(_el$92, _p$.e = _v$69);
+            _v$70 !== _p$.t && _$setAttribute(_el$92, "data-visibility", _p$.t = _v$70);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$88;
+          return _el$92;
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          var _el$89 = _$getNextElement(_tmpl$44),
-            _el$90 = _el$89.firstChild;
-          _$effect(() => _$className(_el$90, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
-          return _el$89;
+          var _el$93 = _$getNextElement(_tmpl$47),
+            _el$94 = _el$93.firstChild;
+          _$effect(() => _$className(_el$94, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$93;
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1912,56 +2111,56 @@ const AppWorkspaceNavTree = props => {
         requestMove(target.move, false);
       };
       return (() => {
-        var _el$93 = _$getNextElement(_tmpl$47),
-          _el$95 = _el$93.firstChild,
-          [_el$96, _co$13] = _$getNextMarker(_el$95.nextSibling),
-          _el$97 = _el$96.nextSibling,
-          [_el$98, _co$14] = _$getNextMarker(_el$97.nextSibling);
-        _el$93.addEventListener("drop", onDrop);
-        _$addEventListener(_el$93, "dragleave", item.onDragLeave);
-        _el$93.addEventListener("dragover", onDragOver);
-        _$addEventListener(_el$93, "dragenter", item.onDragEnter);
-        _el$93.addEventListener("dragstart", onDragStart);
-        _el$93.$$keydown = onKeyDown;
-        _el$93.addEventListener("focus", () => setFocusedId(item.id));
-        var _ref$5 = treeItem;
-        typeof _ref$5 === "function" ? _$use(_ref$5, _el$93) : treeItem = _el$93;
-        _$setAttribute(_el$93, "aria-level", depth + 1);
-        _$setAttribute(_el$93, "data-k2b-nav-tree-parent-id", parentId);
-        _$insert(_el$93, row, _el$96, _co$13);
-        _$insert(_el$93, _$createComponent(Show, {
+        var _el$97 = _$getNextElement(_tmpl$50),
+          _el$99 = _el$97.firstChild,
+          [_el$100, _co$13] = _$getNextMarker(_el$99.nextSibling),
+          _el$101 = _el$100.nextSibling,
+          [_el$102, _co$14] = _$getNextMarker(_el$101.nextSibling);
+        _el$97.addEventListener("drop", onDrop);
+        _$addEventListener(_el$97, "dragleave", item.onDragLeave);
+        _el$97.addEventListener("dragover", onDragOver);
+        _$addEventListener(_el$97, "dragenter", item.onDragEnter);
+        _el$97.addEventListener("dragstart", onDragStart);
+        _el$97.$$keydown = onKeyDown;
+        _el$97.addEventListener("focus", () => setFocusedId(item.id));
+        var _ref$6 = treeItem;
+        typeof _ref$6 === "function" ? _$use(_ref$6, _el$97) : treeItem = _el$97;
+        _$setAttribute(_el$97, "aria-level", depth + 1);
+        _$setAttribute(_el$97, "data-k2b-nav-tree-parent-id", parentId);
+        _$insert(_el$97, row, _el$100, _co$13);
+        _$insert(_el$97, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!hasChildren())() && isExpanded(item.id);
           },
           get children() {
-            var _el$94 = _$getNextElement(_tmpl$46);
-            _$insert(_el$94, () => renderItems(nested, depth + 1, item.id));
-            return _el$94;
+            var _el$98 = _$getNextElement(_tmpl$49);
+            _$insert(_el$98, () => renderItems(nested, depth + 1, item.id));
+            return _el$98;
           }
-        }), _el$98, _co$14);
+        }), _el$102, _co$14);
         _$effect(_p$ => {
-          var _v$73 = siblings().length,
-            _v$74 = place() + 1,
-            _v$75 = selected(),
-            _v$76 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$77 = item.disabled ? "true" : undefined,
-            _v$78 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$79 = movable() ? true : undefined,
-            _v$80 = item.id,
-            _v$81 = dragged()?.id === item.id ? "" : undefined,
-            _v$82 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
-            _v$83 = String(props.indented === false ? 0 : depth);
-          _v$73 !== _p$.e && _$setAttribute(_el$93, "aria-setsize", _p$.e = _v$73);
-          _v$74 !== _p$.t && _$setAttribute(_el$93, "aria-posinset", _p$.t = _v$74);
-          _v$75 !== _p$.a && _$setAttribute(_el$93, "aria-selected", _p$.a = _v$75);
-          _v$76 !== _p$.o && _$setAttribute(_el$93, "aria-expanded", _p$.o = _v$76);
-          _v$77 !== _p$.i && _$setAttribute(_el$93, "aria-disabled", _p$.i = _v$77);
-          _v$78 !== _p$.n && _$setAttribute(_el$93, "tabindex", _p$.n = _v$78);
-          _v$79 !== _p$.s && _$setAttribute(_el$93, "draggable", _p$.s = _v$79);
-          _v$80 !== _p$.h && _$setAttribute(_el$93, "data-k2b-nav-tree-id", _p$.h = _v$80);
-          _v$81 !== _p$.r && _$setAttribute(_el$93, "data-k2b-nav-tree-dragging", _p$.r = _v$81);
-          _v$82 !== _p$.d && _$setAttribute(_el$93, "data-k2b-nav-tree-drop", _p$.d = _v$82);
-          _v$83 !== _p$.l && _$setStyleProperty(_el$93, "--k2b-nav-tree-depth", _p$.l = _v$83);
+          var _v$71 = siblings().length,
+            _v$72 = place() + 1,
+            _v$73 = selected(),
+            _v$74 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$75 = item.disabled ? "true" : undefined,
+            _v$76 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$77 = movable() ? true : undefined,
+            _v$78 = item.id,
+            _v$79 = dragged()?.id === item.id ? "" : undefined,
+            _v$80 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
+            _v$81 = String(props.indented === false ? 0 : depth);
+          _v$71 !== _p$.e && _$setAttribute(_el$97, "aria-setsize", _p$.e = _v$71);
+          _v$72 !== _p$.t && _$setAttribute(_el$97, "aria-posinset", _p$.t = _v$72);
+          _v$73 !== _p$.a && _$setAttribute(_el$97, "aria-selected", _p$.a = _v$73);
+          _v$74 !== _p$.o && _$setAttribute(_el$97, "aria-expanded", _p$.o = _v$74);
+          _v$75 !== _p$.i && _$setAttribute(_el$97, "aria-disabled", _p$.i = _v$75);
+          _v$76 !== _p$.n && _$setAttribute(_el$97, "tabindex", _p$.n = _v$76);
+          _v$77 !== _p$.s && _$setAttribute(_el$97, "draggable", _p$.s = _v$77);
+          _v$78 !== _p$.h && _$setAttribute(_el$97, "data-k2b-nav-tree-id", _p$.h = _v$78);
+          _v$79 !== _p$.r && _$setAttribute(_el$97, "data-k2b-nav-tree-dragging", _p$.r = _v$79);
+          _v$80 !== _p$.d && _$setAttribute(_el$97, "data-k2b-nav-tree-drop", _p$.d = _v$80);
+          _v$81 !== _p$.l && _$setStyleProperty(_el$97, "--k2b-nav-tree-depth", _p$.l = _v$81);
           return _p$;
         }, {
           e: undefined,
@@ -1977,7 +2176,7 @@ const AppWorkspaceNavTree = props => {
           l: undefined
         });
         _$runHydrationEvents();
-        return _el$93;
+        return _el$97;
       })();
     }
   });
@@ -2002,62 +2201,62 @@ const AppWorkspaceNavTree = props => {
     });
   });
   return (() => {
-    var _el$99 = _$getNextElement(_tmpl$48);
-    _el$99.addEventListener("dragend", endDrag);
-    _el$99.addEventListener("dragleave", event => {
+    var _el$103 = _$getNextElement(_tmpl$51);
+    _el$103.addEventListener("dragend", endDrag);
+    _el$103.addEventListener("dragleave", event => {
       if (!root?.contains(event.relatedTarget)) setDropTarget(null);
     });
-    _el$99.addEventListener("dragover", event => {
+    _el$103.addEventListener("dragover", event => {
       // Runs after the rows: a position no row claimed shows no gap.
       if (claimedDragOver !== event) setDropTarget(null);
     });
-    var _ref$6 = root;
-    typeof _ref$6 === "function" ? _$use(_ref$6, _el$99) : root = _el$99;
-    _$insert(_el$99, () => renderItems(roots, 0));
+    var _ref$7 = root;
+    typeof _ref$7 === "function" ? _$use(_ref$7, _el$103) : root = _el$103;
+    _$insert(_el$103, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$84 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$85 = props.ariaLabel;
-      _v$84 !== _p$.e && _$className(_el$99, _p$.e = _v$84);
-      _v$85 !== _p$.t && _$setAttribute(_el$99, "aria-label", _p$.t = _v$85);
+      var _v$82 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$83 = props.ariaLabel;
+      _v$82 !== _p$.e && _$className(_el$103, _p$.e = _v$82);
+      _v$83 !== _p$.t && _$setAttribute(_el$103, "aria-label", _p$.t = _v$83);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$99;
+    return _el$103;
   })();
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => (() => {
-  var _el$100 = _$getNextElement(_tmpl$49),
-    _el$102 = _el$100.firstChild,
-    [_el$103, _co$15] = _$getNextMarker(_el$102.nextSibling),
-    _el$101 = _el$103.nextSibling;
-  _$spread(_el$100, _$mergeProps({
+  var _el$104 = _$getNextElement(_tmpl$52),
+    _el$106 = _el$104.firstChild,
+    [_el$107, _co$15] = _$getNextMarker(_el$106.nextSibling),
+    _el$105 = _el$107.nextSibling;
+  _$spread(_el$104, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$100, _$createComponent(Show, {
+  _$insert(_el$104, _$createComponent(Show, {
     get when() {
       return props.title;
     },
     children: title => (() => {
-      var _el$104 = _$getNextElement(_tmpl$20);
-      _$insert(_el$104, title);
-      return _el$104;
+      var _el$108 = _$getNextElement(_tmpl$23);
+      _$insert(_el$108, title);
+      return _el$108;
     })()
-  }), _el$103, _co$15);
-  _$insert(_el$101, () => props.children);
-  _$effect(() => _$setAttribute(_el$101, "data-columns", props.columns ?? 2));
+  }), _el$107, _co$15);
+  _$insert(_el$105, () => props.children);
+  _$effect(() => _$setAttribute(_el$105, "data-columns", props.columns ?? 2));
   _$runHydrationEvents();
-  return _el$100;
+  return _el$104;
 })();
 const AppWorkspaceSidebarIconAction = props => {
   const content = (() => {
-    var _el$105 = _$getNextElement(_tmpl$50);
-    _$effect(() => _$className(_el$105, iconClass(props.icon)));
-    return _el$105;
+    var _el$109 = _$getNextElement(_tmpl$53);
+    _$effect(() => _$className(_el$109, iconClass(props.icon)));
+    return _el$109;
   })();
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
@@ -2070,8 +2269,8 @@ const AppWorkspaceSidebarIconAction = props => {
     ...modeAttrs(props.sidebarMode)
   });
   if (!props.href || props.disabled) return (() => {
-    var _el$106 = _$getNextElement(_tmpl$29);
-    _$spread(_el$106, _$mergeProps(attrs, {
+    var _el$110 = _$getNextElement(_tmpl$32);
+    _$spread(_el$110, _$mergeProps(attrs, {
       get disabled() {
         return props.disabled;
       },
@@ -2079,13 +2278,13 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$106, content);
+    _$insert(_el$110, content);
     _$runHydrationEvents();
-    return _el$106;
+    return _el$110;
   })();
   if (props.navigation !== "enhanced" || !props.onNavigate) return (() => {
-    var _el$107 = _$getNextElement(_tmpl$30);
-    _$spread(_el$107, _$mergeProps({
+    var _el$111 = _$getNextElement(_tmpl$33);
+    _$spread(_el$111, _$mergeProps({
       get href() {
         return props.href;
       }
@@ -2094,9 +2293,9 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$107, content);
+    _$insert(_el$111, content);
     _$runHydrationEvents();
-    return _el$107;
+    return _el$111;
   })();
   return _$createComponent(Link, _$mergeProps({
     get href() {
@@ -2134,12 +2333,12 @@ function AppWorkspaceHead(props) {
   // A nested workspace is part of a page that already shows its title.
   const trail = props.nested ? () => undefined : usePageTrail();
   return (() => {
-    var _el$108 = _$getNextElement(_tmpl$52),
-      _el$110 = _el$108.firstChild,
-      [_el$111, _co$16] = _$getNextMarker(_el$110.nextSibling),
-      _el$112 = _el$111.nextSibling,
-      [_el$113, _co$17] = _$getNextMarker(_el$112.nextSibling);
-    _$insert(_el$108, _$createComponent(IconButton, {
+    var _el$112 = _$getNextElement(_tmpl$55),
+      _el$114 = _el$112.firstChild,
+      [_el$115, _co$16] = _$getNextMarker(_el$114.nextSibling),
+      _el$116 = _el$115.nextSibling,
+      [_el$117, _co$17] = _$getNextMarker(_el$116.nextSibling);
+    _$insert(_el$112, _$createComponent(IconButton, {
       "class": "k2b-app-workspace__head-toggle",
       get label() {
         return messages().showNavigation;
@@ -2150,10 +2349,10 @@ function AppWorkspaceHead(props) {
       "aria-expanded": "false",
       "data-app-workspace-sidebar-toggle": "",
       get children() {
-        return _$getNextElement(_tmpl$51);
+        return _$getNextElement(_tmpl$54);
       }
-    }), _el$111, _co$16);
-    _$insert(_el$108, _$createComponent(Show, {
+    }), _el$115, _co$16);
+    _$insert(_el$112, _$createComponent(Show, {
       get when() {
         return trail();
       },
@@ -2164,14 +2363,14 @@ function AppWorkspaceHead(props) {
         as: "p",
         fallback: true
       }), (() => {
-        var _el$114 = _$getNextElement(_tmpl$53);
-        _$setAttribute(_el$114, "data-k2b-server", isServer ? "" : undefined);
-        _$insert(_el$114, () => current().title);
-        return _el$114;
+        var _el$118 = _$getNextElement(_tmpl$56);
+        _$setAttribute(_el$118, "data-k2b-server", isServer ? "" : undefined);
+        _$insert(_el$118, () => current().title);
+        return _el$118;
       })()]
-    }), _el$113, _co$17);
-    _$effect(() => _$setAttribute(_el$108, "data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : undefined));
-    return _el$108;
+    }), _el$117, _co$17);
+    _$effect(() => _$setAttribute(_el$112, "data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : undefined));
+    return _el$112;
   })();
 }
 const AppWorkspace = props => {
@@ -2207,31 +2406,31 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          var _el$115 = _$getNextElement(_tmpl$54),
-            _el$116 = _el$115.firstChild,
-            [_el$117, _co$18] = _$getNextMarker(_el$116.nextSibling),
-            _el$118 = _el$117.nextSibling,
-            [_el$119, _co$19] = _$getNextMarker(_el$118.nextSibling);
-          var _ref$7 = root;
-          typeof _ref$7 === "function" ? _$use(_ref$7, _el$115) : root = _el$115;
-          _$insert(_el$115, _$createComponent(AppWorkspaceHead, {
+          var _el$119 = _$getNextElement(_tmpl$57),
+            _el$120 = _el$119.firstChild,
+            [_el$121, _co$18] = _$getNextMarker(_el$120.nextSibling),
+            _el$122 = _el$121.nextSibling,
+            [_el$123, _co$19] = _$getNextMarker(_el$122.nextSibling);
+          var _ref$8 = root;
+          typeof _ref$8 === "function" ? _$use(_ref$8, _el$119) : root = _el$119;
+          _$insert(_el$119, _$createComponent(AppWorkspaceHead, {
             sidebarId: sidebarId,
             nested: nested
-          }), _el$117, _co$18);
-          _$insert(_el$115, () => props.children, _el$119, _co$19);
+          }), _el$121, _co$18);
+          _$insert(_el$119, () => props.children, _el$123, _co$19);
           _$effect(_p$ => {
-            var _v$86 = `k2b-app-workspace ${props.class ?? ""}`,
-              _v$87 = props.mobileSurface,
-              _v$88 = props.flat ? "true" : undefined,
-              _v$89 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-              _v$90 = props.resizable === false ? "false" : "true",
-              _v$91 = appWorkspaceLayoutStyle(initialLayoutState());
-            _v$86 !== _p$.e && _$className(_el$115, _p$.e = _v$86);
-            _v$87 !== _p$.t && _$setAttribute(_el$115, "data-mobile-surface", _p$.t = _v$87);
-            _v$88 !== _p$.a && _$setAttribute(_el$115, "data-flat", _p$.a = _v$88);
-            _v$89 !== _p$.o && _$setAttribute(_el$115, "data-sidebar-collapsed", _p$.o = _v$89);
-            _v$90 !== _p$.i && _$setAttribute(_el$115, "data-workspace-resizable", _p$.i = _v$90);
-            _p$.n = _$style(_el$115, _v$91, _p$.n);
+            var _v$84 = `k2b-app-workspace ${props.class ?? ""}`,
+              _v$85 = props.mobileSurface,
+              _v$86 = props.flat ? "true" : undefined,
+              _v$87 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+              _v$88 = props.resizable === false ? "false" : "true",
+              _v$89 = appWorkspaceLayoutStyle(initialLayoutState());
+            _v$84 !== _p$.e && _$className(_el$119, _p$.e = _v$84);
+            _v$85 !== _p$.t && _$setAttribute(_el$119, "data-mobile-surface", _p$.t = _v$85);
+            _v$86 !== _p$.a && _$setAttribute(_el$119, "data-flat", _p$.a = _v$86);
+            _v$87 !== _p$.o && _$setAttribute(_el$119, "data-sidebar-collapsed", _p$.o = _v$87);
+            _v$88 !== _p$.i && _$setAttribute(_el$119, "data-workspace-resizable", _p$.i = _v$88);
+            _p$.n = _$style(_el$119, _v$89, _p$.n);
             return _p$;
           }, {
             e: undefined,
@@ -2241,7 +2440,7 @@ const AppWorkspace = props => {
             i: undefined,
             n: undefined
           });
-          return _el$115;
+          return _el$119;
         }
       });
     }
@@ -2256,10 +2455,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Content = props => (() => {
-  var _el$120 = _$getNextElement(_tmpl$5);
-  _$insert(_el$120, () => props.children);
-  _$effect(() => _$className(_el$120, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$120;
+  var _el$124 = _$getNextElement(_tmpl$5);
+  _$insert(_el$124, () => props.children);
+  _$effect(() => _$className(_el$124, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$124;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;