@k2b/ui 0.48.0 → 0.50.0

package/dist/browser/layout/AppWorkspace.js

@@ -5,10 +5,10 @@ import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
@@ -18,68 +18,71 @@ import { effect as _$effect } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__resize role=separator><span aria-hidden=true>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__level-lead>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<p class=k2b-truncate-fade>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__level-actions>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__level-head><!$><!/><div class=k2b-app-workspace__level-title><h2 tabindex=-1><!$><!/><span class=k2b-truncate-fade></span></h2><!$><!/></div><!$><!/>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<style>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__main-primary data-workspace-main-region=main>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<section>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__level-body>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-left"aria-hidden=true>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<aside><button type=button class=k2b-app-workspace__detail-grabber aria-pressed=false><span aria-hidden=true></span></button><!$><!/>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<aside>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<nav class=k2b-app-workspace__sidebar-sheet>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-desktop>`),
-  _tmpl$15 = /*#__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$16 = /*#__PURE__*/_$template(`<script>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<footer>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-section-count>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-section-toggle><!$><!/><i aria-hidden=true>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-section-content>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<h2>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<button type=button>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<a>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<span aria-hidden=true>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class="k2b-app-workspace__sidebar-item-context-label k2b-truncate-fade"></span><!$><!/>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<span class="k2b-app-workspace__sidebar-item-description k2b-truncate-fade">`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<span class="k2b-app-workspace__sidebar-item-note k2b-truncate-fade">`),
-  _tmpl$34 = /*#__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 k2b-truncate-fade-lines"></span></span><!$><!/><!$><!/>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
-  _tmpl$40 = /*#__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 k2b-truncate-fade-lines"></span></span><span class="k2b-app-workspace__sidebar-item-description k2b-truncate-fade">`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class="k2b-app-workspace__sidebar-item-label-text k2b-truncate-fade-lines">`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<div role=tree>`),
-  _tmpl$47 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
-  _tmpl$48 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-down k2b-app-workspace__head-primary-chevron"aria-hidden=true>`),
-  _tmpl$49 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-primary-label><!$><!/><!$><!/>`),
-  _tmpl$50 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
-  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-views>`),
-  _tmpl$52 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-filters role=group><!$><!/><!$><!/>`),
-  _tmpl$53 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-count><span>`),
-  _tmpl$54 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-actions><!$><!/><!$><!/>`),
-  _tmpl$55 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><div class=k2b-app-workspace__head-lead><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
-  _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>`);
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-truncate-fade>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<p class=k2b-truncate-fade>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__level-actions>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__level-head><!$><!/><div class=k2b-app-workspace__level-title><h2 tabindex=-1></h2><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__level-switch aria-haspopup=menu><!$><!/><i class="ti ti-chevron-down k2b-app-workspace__level-switch-chevron"aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<style>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__main-primary data-workspace-main-region=main>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<section>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__level-body>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-left"aria-hidden=true>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<aside><button type=button class=k2b-app-workspace__detail-grabber aria-pressed=false><span aria-hidden=true></span></button><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<aside>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<nav class=k2b-app-workspace__sidebar-sheet>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-desktop>`),
+  _tmpl$17 = /*#__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$18 = /*#__PURE__*/_$template(`<script>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<footer>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-section-count>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-section-toggle><!$><!/><i aria-hidden=true>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-section-content>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<h2>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<span aria-hidden=true>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class="k2b-app-workspace__sidebar-item-context-label k2b-truncate-fade"></span><!$><!/>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<span class="k2b-app-workspace__sidebar-item-description k2b-truncate-fade">`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<span class="k2b-app-workspace__sidebar-item-note k2b-truncate-fade">`),
+  _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 k2b-truncate-fade-lines"></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 k2b-truncate-fade-lines"></span></span><span class="k2b-app-workspace__sidebar-item-description k2b-truncate-fade">`),
+  _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 k2b-truncate-fade-lines">`),
+  _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 class="ti ti-chevron-down k2b-app-workspace__head-primary-chevron"aria-hidden=true>`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-primary-label><!$><!/><!$><!/>`),
+  _tmpl$52 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
+  _tmpl$53 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-views>`),
+  _tmpl$54 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-filters role=group data-scroll-fade-mode=both data-scroll-fade-axis=horizontal><!$><!/><!$><!/>`),
+  _tmpl$55 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__head-count><span>`),
+  _tmpl$56 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head-actions><!$><!/><!$><!/>`),
+  _tmpl$57 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><div class=k2b-app-workspace__head-lead><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$58 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
+  _tmpl$59 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
 import { AppWorkspaceSidebarItemStatus } from "./AppWorkspaceSidebarItemStatus";
 import { Link } from "@k2b/ssr/nav";
 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, ButtonLink, IconButton, IconButtonLink } from "../actions/Button";
+import { Dropdown } from "../actions/Dropdown";
 import { useFilterMessages } from "../actions/filter-messages";
 import { dialogCore } from "../feedback/dialog-core";
 import { Tooltip } from "../feedback/Tooltip";
@@ -205,6 +208,8 @@ function ResizeHandle(props) {
   })();
 }
 
+/** The places a level title switches between; `label` names the menu, such as "Switch Space". */
+
 /** One requested place for an item among its unchanged siblings. */
 
 const modeAttrs = mode => mode && mode !== "always" ? {
@@ -240,52 +245,95 @@ function LevelHead(props) {
   const description = children(() => props.description);
   const actions = children(() => props.actions);
   const lead = children(() => props.lead);
+  let switchButton;
+  const title = () => [_$createComponent(Show, {
+    get when() {
+      return lead();
+    },
+    get children() {
+      var _el$2 = _$getNextElement(_tmpl$2);
+      _$insert(_el$2, lead);
+      return _el$2;
+    }
+  }), (() => {
+    var _el$3 = _$getNextElement(_tmpl$3);
+    _$insert(_el$3, () => props.label);
+    return _el$3;
+  })()];
   return (() => {
-    var _el$2 = _$getNextElement(_tmpl$5),
-      _el$11 = _el$2.firstChild,
+    var _el$4 = _$getNextElement(_tmpl$6),
+      _el$11 = _el$4.firstChild,
       [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling),
-      _el$3 = _el$12.nextSibling,
-      _el$4 = _el$3.firstChild,
-      _el$7 = _el$4.firstChild,
-      [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling),
-      _el$6 = _el$8.nextSibling,
-      _el$0 = _el$4.nextSibling,
+      _el$5 = _el$12.nextSibling,
+      _el$6 = _el$5.firstChild,
+      _el$8 = _el$6.nextSibling,
+      [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
+      _el$0 = _el$9.nextSibling,
       [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling),
-      _el$13 = _el$3.nextSibling,
+      _el$13 = _el$5.nextSibling,
       [_el$14, _co$4] = _$getNextMarker(_el$13.nextSibling);
-    _$insert(_el$2, () => props.children, _el$12, _co$3);
-    _$insert(_el$4, _$createComponent(Show, {
+    _$insert(_el$4, () => props.children, _el$12, _co$3);
+    _$insert(_el$6, _$createComponent(Show, {
       get when() {
-        return lead();
+        return props.switcher;
       },
-      get children() {
-        var _el$5 = _$getNextElement(_tmpl$2);
-        _$insert(_el$5, lead);
-        return _el$5;
-      }
-    }), _el$8, _co$);
-    _$insert(_el$6, () => props.label);
-    _$insert(_el$3, _$createComponent(Show, {
+      get fallback() {
+        return title();
+      },
+      children: switcher => (() => {
+        var _el$15 = _$getNextElement(_tmpl$7),
+          _el$17 = _el$15.firstChild,
+          [_el$18, _co$5] = _$getNextMarker(_el$17.nextSibling),
+          _el$16 = _el$18.nextSibling;
+        var _ref$ = switchButton;
+        typeof _ref$ === "function" ? _$use(_ref$, _el$15) : switchButton = _el$15;
+        _$insert(_el$15, title, _el$18, _co$5);
+        _$effect(() => _$setAttribute(_el$15, "aria-label", `${props.label}, ${switcher().label}`));
+        return _el$15;
+      })()
+    }));
+    _$insert(_el$5, _$createComponent(Show, {
+      get when() {
+        return props.switcher;
+      },
+      children: switcher => _$createComponent(Dropdown, {
+        get items() {
+          return switcher().items;
+        },
+        get label() {
+          return switcher().label;
+        },
+        get search() {
+          return switcher().search;
+        },
+        phone: "sheet",
+        variant: "touch",
+        position: "bottom-left",
+        attach: () => switchButton
+      })
+    }), _el$9, _co$);
+    _$insert(_el$5, _$createComponent(Show, {
       get when() {
         return description();
       },
       get children() {
-        var _el$9 = _$getNextElement(_tmpl$3);
-        _$insert(_el$9, description);
-        return _el$9;
+        var _el$7 = _$getNextElement(_tmpl$4);
+        _$insert(_el$7, description);
+        return _el$7;
       }
     }), _el$1, _co$2);
-    _$insert(_el$2, _$createComponent(Show, {
+    _$insert(_el$4, _$createComponent(Show, {
       get when() {
         return actions();
       },
       get children() {
-        var _el$10 = _$getNextElement(_tmpl$4);
+        var _el$10 = _$getNextElement(_tmpl$5);
         _$insert(_el$10, actions);
         return _el$10;
       }
     }), _el$14, _co$4);
-    return _el$2;
+    _$effect(() => _$setAttribute(_el$6, "data-switcher", props.switcher ? "" : undefined));
+    return _el$4;
   })();
 }
 function AppWorkspaceMain(props) {
@@ -404,15 +452,15 @@ function AppWorkspaceMain(props) {
       return minWidth();
     },
     children: value => (() => {
-      var _el$16 = _$getNextElement(_tmpl$7);
-      _$effect(() => _$setProperty(_el$16, "innerHTML", minWidthRule(value())));
-      return _el$16;
+      var _el$20 = _$getNextElement(_tmpl$9);
+      _$effect(() => _$setProperty(_el$20, "innerHTML", minWidthRule(value())));
+      return _el$20;
     })()
   }), (() => {
-    var _el$15 = _$getNextElement(_tmpl$6);
-    var _ref$ = mainElement;
-    typeof _ref$ === "function" ? _$use(_ref$, _el$15) : mainElement = _el$15;
-    _$spread(_el$15, _$mergeProps({
+    var _el$19 = _$getNextElement(_tmpl$8);
+    var _ref$2 = mainElement;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$19) : mainElement = _el$19;
+    _$spread(_el$19, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__main ${hasPanes() ? "has-panes" : ""} ${props.class ?? ""}`;
       },
@@ -441,7 +489,7 @@ function AppWorkspaceMain(props) {
         return props["aria-busy"];
       }
     }, () => scrollAttrs(props.scrollPreserveKey)), false, true);
-    _$insert(_el$15, _$createComponent(Show, {
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return hasPanes();
       },
@@ -460,10 +508,10 @@ function AppWorkspaceMain(props) {
             };
             if (region.type === "primary") {
               return (() => {
-                var _el$17 = _$getNextElement(_tmpl$8);
-                _$insert(_el$17, () => region.children);
-                _$effect(() => _$setAttribute(_el$17, "data-workspace-mobile-active", activeMobilePane() === "main" ? "true" : "false"));
-                return _el$17;
+                var _el$21 = _$getNextElement(_tmpl$0);
+                _$insert(_el$21, () => region.children);
+                _$effect(() => _$setAttribute(_el$21, "data-workspace-mobile-active", activeMobilePane() === "main" ? "true" : "false"));
+                return _el$21;
               })();
             }
             const pane = region.slot;
@@ -521,9 +569,9 @@ function AppWorkspaceMain(props) {
                     return handle();
                   }
                 }), (() => {
-                  var _el$18 = _$getNextElement(_tmpl$9);
-                  _$setAttribute(_el$18, "data-workspace-panel-id", panelId);
-                  _$insert(_el$18, (() => {
+                  var _el$22 = _$getNextElement(_tmpl$1);
+                  _$setAttribute(_el$22, "data-workspace-panel-id", panelId);
+                  _$insert(_el$22, (() => {
                     var _c$ = _$memo(() => !!levelsMode());
                     return () => _c$() ? [_$createComponent(LevelHead, {
                       get label() {
@@ -538,6 +586,9 @@ function AppWorkspaceMain(props) {
                       get lead() {
                         return pane.props.lead;
                       },
+                      get switcher() {
+                        return pane.props.switcher;
+                      },
                       get children() {
                         return _$createComponent(Show, {
                           get when() {
@@ -566,7 +617,7 @@ function AppWorkspaceMain(props) {
                                     return props.onLevelNavigate ? navigateBack : undefined;
                                   },
                                   get children() {
-                                    return _$getNextElement(_tmpl$1);
+                                    return _$getNextElement(_tmpl$11);
                                   }
                                 });
                               }
@@ -583,25 +634,25 @@ function AppWorkspaceMain(props) {
                               });
                             },
                             get children() {
-                              return _$getNextElement(_tmpl$1);
+                              return _$getNextElement(_tmpl$11);
                             }
                           })
                         });
                       }
                     }), (() => {
-                      var _el$19 = _$getNextElement(_tmpl$0);
-                      _$insert(_el$19, () => pane.props.children);
+                      var _el$23 = _$getNextElement(_tmpl$10);
+                      _$insert(_el$23, () => pane.props.children);
                       _$effect(_p$ => {
                         var _v$29 = pane.props.scroll === false ? "false" : undefined,
                           _v$30 = pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : undefined;
-                        _v$29 !== _p$.e && _$setAttribute(_el$19, "data-scroll", _p$.e = _v$29);
-                        _v$30 !== _p$.t && _$setAttribute(_el$19, "data-scroll-fade-mode", _p$.t = _v$30);
+                        _v$29 !== _p$.e && _$setAttribute(_el$23, "data-scroll", _p$.e = _v$29);
+                        _v$30 !== _p$.t && _$setAttribute(_el$23, "data-scroll-fade-mode", _p$.t = _v$30);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$19;
+                      return _el$23;
                     })()] : pane.props.children;
                   })());
                   _$effect(_p$ => {
@@ -631,21 +682,21 @@ function AppWorkspaceMain(props) {
                           "--k2b-workspace-level-min": `${levelLastMin(pane.props.minSize)}px`
                         } : {})
                       });
-                    _v$14 !== _p$.e && _$setAttribute(_el$18, "id", _p$.e = _v$14);
-                    _v$15 !== _p$.t && _$className(_el$18, _p$.t = _v$15);
-                    _v$16 !== _p$.a && _$setAttribute(_el$18, "aria-label", _p$.a = _v$16);
-                    _v$17 !== _p$.o && _$setAttribute(_el$18, "data-workspace-level", _p$.o = _v$17);
-                    _v$18 !== _p$.i && _$setAttribute(_el$18, "data-workspace-level-shown", _p$.i = _v$18);
-                    _v$19 !== _p$.n && _$setAttribute(_el$18, "data-workspace-level-first", _p$.n = _v$19);
-                    _v$20 !== _p$.s && _$setAttribute(_el$18, "data-workspace-level-last", _p$.s = _v$20);
-                    _v$21 !== _p$.h && _$setAttribute(_el$18, "data-workspace-main-region", _p$.h = _v$21);
-                    _v$22 !== _p$.r && _$setAttribute(_el$18, "data-workspace-heading", _p$.r = _v$22);
-                    _v$23 !== _p$.d && _$setAttribute(_el$18, "data-workspace-mobile-active", _p$.d = _v$23);
-                    _v$24 !== _p$.l && _$setAttribute(_el$18, "data-workspace-resizable", _p$.l = _v$24);
-                    _v$25 !== _p$.u && _$setAttribute(_el$18, "data-surface", _p$.u = _v$25);
-                    _v$26 !== _p$.c && _$setAttribute(_el$18, "data-scroll", _p$.c = _v$26);
-                    _v$27 !== _p$.w && _$setAttribute(_el$18, "data-scroll-fade-mode", _p$.w = _v$27);
-                    _p$.m = _$style(_el$18, _v$28, _p$.m);
+                    _v$14 !== _p$.e && _$setAttribute(_el$22, "id", _p$.e = _v$14);
+                    _v$15 !== _p$.t && _$className(_el$22, _p$.t = _v$15);
+                    _v$16 !== _p$.a && _$setAttribute(_el$22, "aria-label", _p$.a = _v$16);
+                    _v$17 !== _p$.o && _$setAttribute(_el$22, "data-workspace-level", _p$.o = _v$17);
+                    _v$18 !== _p$.i && _$setAttribute(_el$22, "data-workspace-level-shown", _p$.i = _v$18);
+                    _v$19 !== _p$.n && _$setAttribute(_el$22, "data-workspace-level-first", _p$.n = _v$19);
+                    _v$20 !== _p$.s && _$setAttribute(_el$22, "data-workspace-level-last", _p$.s = _v$20);
+                    _v$21 !== _p$.h && _$setAttribute(_el$22, "data-workspace-main-region", _p$.h = _v$21);
+                    _v$22 !== _p$.r && _$setAttribute(_el$22, "data-workspace-heading", _p$.r = _v$22);
+                    _v$23 !== _p$.d && _$setAttribute(_el$22, "data-workspace-mobile-active", _p$.d = _v$23);
+                    _v$24 !== _p$.l && _$setAttribute(_el$22, "data-workspace-resizable", _p$.l = _v$24);
+                    _v$25 !== _p$.u && _$setAttribute(_el$22, "data-surface", _p$.u = _v$25);
+                    _v$26 !== _p$.c && _$setAttribute(_el$22, "data-scroll", _p$.c = _v$26);
+                    _v$27 !== _p$.w && _$setAttribute(_el$22, "data-scroll-fade-mode", _p$.w = _v$27);
+                    _p$.m = _$style(_el$22, _v$28, _p$.m);
                     return _p$;
                   }, {
                     e: undefined,
@@ -664,7 +715,7 @@ function AppWorkspaceMain(props) {
                     w: undefined,
                     m: undefined
                   });
-                  return _el$18;
+                  return _el$22;
                 })(), _$createComponent(Show, {
                   get when() {
                     return _$memo(() => !!resizable())() && before();
@@ -680,7 +731,7 @@ function AppWorkspaceMain(props) {
       }
     }));
     _$runHydrationEvents();
-    return _el$15;
+    return _el$19;
   })()];
 }
 
@@ -740,9 +791,9 @@ function AppWorkspaceDetail(props) {
     });
   });
   return [(() => {
-    var _el$22 = _$getNextElement(_tmpl$7);
-    _$effect(() => _$setProperty(_el$22, "innerHTML", workspaceRule()));
-    return _el$22;
+    var _el$26 = _$getNextElement(_tmpl$9);
+    _$effect(() => _$setProperty(_el$26, "innerHTML", workspaceRule()));
+    return _el$26;
   })(), _$createComponent(Show, {
     get when() {
       return props.toggle !== false;
@@ -765,9 +816,9 @@ function AppWorkspaceDetail(props) {
         "class": "k2b-app-workspace__detail-toggle k2b-details-toggle",
         get children() {
           return [(() => {
-            var _el$23 = _$getNextElement(_tmpl$10);
-            _$className(_el$23, DETAILS_ICON);
-            return _el$23;
+            var _el$27 = _$getNextElement(_tmpl$12);
+            _$className(_el$27, DETAILS_ICON);
+            return _el$27;
           })(), _$memo(() => workspaceMessages().details)];
         }
       });
@@ -802,13 +853,13 @@ function AppWorkspaceDetail(props) {
       });
     }
   }), (() => {
-    var _el$24 = _$getNextElement(_tmpl$11),
-      _el$25 = _el$24.firstChild,
-      _el$26 = _el$25.nextSibling,
-      [_el$27, _co$5] = _$getNextMarker(_el$26.nextSibling);
-    var _ref$2 = aside;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$24) : aside = _el$24;
-    _$insert(_el$24, () => props.children, _el$27, _co$5);
+    var _el$28 = _$getNextElement(_tmpl$13),
+      _el$29 = _el$28.firstChild,
+      _el$30 = _el$29.nextSibling,
+      [_el$31, _co$6] = _$getNextMarker(_el$30.nextSibling);
+    var _ref$3 = aside;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$28) : aside = _el$28;
+    _$insert(_el$28, () => props.children, _el$31, _co$6);
     _$effect(_p$ => {
       var _v$31 = domId(),
         _v$32 = `k2b-app-workspace__detail ${props.class ?? ""}`,
@@ -826,19 +877,19 @@ function AppWorkspaceDetail(props) {
           "view-transition-name": props.viewTransitionName
         },
         _v$43 = workspaceMessages().detailFullHeight;
-      _v$31 !== _p$.e && _$setAttribute(_el$24, "id", _p$.e = _v$31);
-      _v$32 !== _p$.t && _$className(_el$24, _p$.t = _v$32);
-      _v$33 !== _p$.a && _$setAttribute(_el$24, "data-width", _p$.a = _v$33);
-      _v$34 !== _p$.o && _$setAttribute(_el$24, "data-workspace-detail-phone", _p$.o = _v$34);
-      _v$35 !== _p$.i && _$setAttribute(_el$24, "data-workspace-detail-choice", _p$.i = _v$35);
-      _v$36 !== _p$.n && _$setAttribute(_el$24, "data-workspace-panel-id", _p$.n = _v$36);
-      _v$37 !== _p$.s && _$setAttribute(_el$24, "data-workspace-resizable", _p$.s = _v$37);
-      _v$38 !== _p$.h && _$setAttribute(_el$24, "data-workspace-detail-reopen", _p$.h = _v$38);
-      _v$39 !== _p$.r && _$setAttribute(_el$24, "data-workspace-detail-closable", _p$.r = _v$39);
-      _v$40 !== _p$.d && _$setAttribute(_el$24, "data-workspace-detail-steppable", _p$.d = _v$40);
-      _v$41 !== _p$.l && _$setProperty(_el$24, "hidden", _p$.l = _v$41);
-      _p$.u = _$style(_el$24, _v$42, _p$.u);
-      _v$43 !== _p$.c && _$setAttribute(_el$25, "aria-label", _p$.c = _v$43);
+      _v$31 !== _p$.e && _$setAttribute(_el$28, "id", _p$.e = _v$31);
+      _v$32 !== _p$.t && _$className(_el$28, _p$.t = _v$32);
+      _v$33 !== _p$.a && _$setAttribute(_el$28, "data-width", _p$.a = _v$33);
+      _v$34 !== _p$.o && _$setAttribute(_el$28, "data-workspace-detail-phone", _p$.o = _v$34);
+      _v$35 !== _p$.i && _$setAttribute(_el$28, "data-workspace-detail-choice", _p$.i = _v$35);
+      _v$36 !== _p$.n && _$setAttribute(_el$28, "data-workspace-panel-id", _p$.n = _v$36);
+      _v$37 !== _p$.s && _$setAttribute(_el$28, "data-workspace-resizable", _p$.s = _v$37);
+      _v$38 !== _p$.h && _$setAttribute(_el$28, "data-workspace-detail-reopen", _p$.h = _v$38);
+      _v$39 !== _p$.r && _$setAttribute(_el$28, "data-workspace-detail-closable", _p$.r = _v$39);
+      _v$40 !== _p$.d && _$setAttribute(_el$28, "data-workspace-detail-steppable", _p$.d = _v$40);
+      _v$41 !== _p$.l && _$setProperty(_el$28, "hidden", _p$.l = _v$41);
+      _p$.u = _$style(_el$28, _v$42, _p$.u);
+      _v$43 !== _p$.c && _$setAttribute(_el$29, "aria-label", _p$.c = _v$43);
       return _p$;
     }, {
       e: undefined,
@@ -855,7 +906,7 @@ function AppWorkspaceDetail(props) {
       u: undefined,
       c: undefined
     });
-    return _el$24;
+    return _el$28;
   })()];
 }
 function AppWorkspaceBottomDrawer(props) {
@@ -905,8 +956,8 @@ function AppWorkspaceBottomDrawer(props) {
       });
     }
   }), (() => {
-    var _el$28 = _$getNextElement(_tmpl$12);
-    _$insert(_el$28, () => props.children);
+    var _el$32 = _$getNextElement(_tmpl$14);
+    _$insert(_el$32, () => props.children);
     _$effect(_p$ => {
       var _v$44 = domId(),
         _v$45 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
@@ -916,14 +967,14 @@ function AppWorkspaceBottomDrawer(props) {
         _v$49 = !props.open,
         _v$50 = `var(${variable()}, ${defaultHeight()}px)`,
         _v$51 = props.viewTransitionName;
-      _v$44 !== _p$.e && _$setAttribute(_el$28, "id", _p$.e = _v$44);
-      _v$45 !== _p$.t && _$className(_el$28, _p$.t = _v$45);
-      _v$46 !== _p$.a && _$setAttribute(_el$28, "data-height", _p$.a = _v$46);
-      _v$47 !== _p$.o && _$setAttribute(_el$28, "data-workspace-panel-id", _p$.o = _v$47);
-      _v$48 !== _p$.i && _$setAttribute(_el$28, "data-workspace-resizable", _p$.i = _v$48);
-      _v$49 !== _p$.n && _$setProperty(_el$28, "hidden", _p$.n = _v$49);
-      _v$50 !== _p$.s && _$setStyleProperty(_el$28, "--k2b-workspace-panel-size", _p$.s = _v$50);
-      _v$51 !== _p$.h && _$setStyleProperty(_el$28, "view-transition-name", _p$.h = _v$51);
+      _v$44 !== _p$.e && _$setAttribute(_el$32, "id", _p$.e = _v$44);
+      _v$45 !== _p$.t && _$className(_el$32, _p$.t = _v$45);
+      _v$46 !== _p$.a && _$setAttribute(_el$32, "data-height", _p$.a = _v$46);
+      _v$47 !== _p$.o && _$setAttribute(_el$32, "data-workspace-panel-id", _p$.o = _v$47);
+      _v$48 !== _p$.i && _$setAttribute(_el$32, "data-workspace-resizable", _p$.i = _v$48);
+      _v$49 !== _p$.n && _$setProperty(_el$32, "hidden", _p$.n = _v$49);
+      _v$50 !== _p$.s && _$setStyleProperty(_el$32, "--k2b-workspace-panel-size", _p$.s = _v$50);
+      _v$51 !== _p$.h && _$setStyleProperty(_el$32, "view-transition-name", _p$.h = _v$51);
       return _p$;
     }, {
       e: undefined,
@@ -935,7 +986,7 @@ function AppWorkspaceBottomDrawer(props) {
       s: undefined,
       h: undefined
     });
-    return _el$28;
+    return _el$32;
   })()];
 }
 function AppWorkspaceSidebar(props) {
@@ -1027,20 +1078,20 @@ function AppWorkspaceSidebar(props) {
                       return null;
                     }
                     return (() => {
-                      var _el$29 = _$getNextElement(_tmpl$13);
-                      _$addEventListener(_el$29, "click", event => choose(event, () => close()));
-                      _$insert(_el$29, resolved);
+                      var _el$33 = _$getNextElement(_tmpl$15);
+                      _$addEventListener(_el$33, "click", event => choose(event, () => close()));
+                      _$insert(_el$33, resolved);
                       _$effect(_p$ => {
                         var _v$52 = props.label,
                           _v$53 = accent;
-                        _v$52 !== _p$.e && _$setAttribute(_el$29, "aria-label", _p$.e = _v$52);
-                        _p$.t = _$style(_el$29, _v$53, _p$.t);
+                        _v$52 !== _p$.e && _$setAttribute(_el$33, "aria-label", _p$.e = _v$52);
+                        _p$.t = _$style(_el$33, _v$53, _p$.t);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$29;
+                      return _el$33;
                     })();
                   }
                 });
@@ -1079,8 +1130,8 @@ function AppWorkspaceSidebar(props) {
       return stacked() ? "nav" : "aside";
     },
     ref(r$) {
-      var _ref$3 = aside;
-      typeof _ref$3 === "function" ? _ref$3(r$) : aside = r$;
+      var _ref$4 = aside;
+      typeof _ref$4 === "function" ? _ref$4(r$) : aside = r$;
     },
     get id() {
       return domId();
@@ -1113,49 +1164,49 @@ function AppWorkspaceSidebar(props) {
         },
         get children() {
           return [(() => {
-            var _el$30 = _$getNextElement(_tmpl$14);
-            var _ref$4 = row;
-            typeof _ref$4 === "function" ? _$use(_ref$4, _el$30) : row = _el$30;
-            _$insert(_el$30, () => desktop()?.children);
+            var _el$34 = _$getNextElement(_tmpl$16);
+            var _ref$5 = row;
+            typeof _ref$5 === "function" ? _$use(_ref$5, _el$34) : row = _el$34;
+            _$insert(_el$34, () => desktop()?.children);
             _$effect(_p$ => {
               var _v$54 = stacked() ? "both" : undefined,
                 _v$55 = stacked() ? "horizontal" : undefined;
-              _v$54 !== _p$.e && _$setAttribute(_el$30, "data-scroll-fade-mode", _p$.e = _v$54);
-              _v$55 !== _p$.t && _$setAttribute(_el$30, "data-scroll-fade-axis", _p$.t = _v$55);
+              _v$54 !== _p$.e && _$setAttribute(_el$34, "data-scroll-fade-mode", _p$.e = _v$54);
+              _v$55 !== _p$.t && _$setAttribute(_el$34, "data-scroll-fade-axis", _p$.t = _v$55);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$30;
+            return _el$34;
           })(), _$createComponent(Show, {
             get when() {
               return stacked();
             },
             get children() {
               return [(() => {
-                var _el$31 = _$getNextElement(_tmpl$15),
-                  _el$32 = _el$31.firstChild;
-                _el$31.$$click = event => openAll(event.currentTarget);
-                _$insert(_el$32, () => workspaceMessages().sidebarAll);
+                var _el$35 = _$getNextElement(_tmpl$17),
+                  _el$36 = _el$35.firstChild;
+                _el$35.$$click = event => openAll(event.currentTarget);
+                _$insert(_el$36, () => workspaceMessages().sidebarAll);
                 _$effect(_p$ => {
                   var _v$56 = sheetOpen(),
                     _v$57 = props.label ? workspaceMessages().sidebarAllLabel({
                       label: props.label
                     }) : undefined;
-                  _v$56 !== _p$.e && _$setAttribute(_el$31, "aria-expanded", _p$.e = _v$56);
-                  _v$57 !== _p$.t && _$setAttribute(_el$31, "aria-label", _p$.t = _v$57);
+                  _v$56 !== _p$.e && _$setAttribute(_el$35, "aria-expanded", _p$.e = _v$56);
+                  _v$57 !== _p$.t && _$setAttribute(_el$35, "aria-label", _p$.t = _v$57);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
                 _$runHydrationEvents();
-                return _el$31;
+                return _el$35;
               })(), (() => {
-                var _el$33 = _$getNextElement(_tmpl$16);
-                _$setProperty(_el$33, "innerHTML", CHIP_ROW_SCRIPT);
-                return _el$33;
+                var _el$37 = _$getNextElement(_tmpl$18);
+                _$setProperty(_el$37, "innerHTML", CHIP_ROW_SCRIPT);
+                return _el$37;
               })()];
             }
           })];
@@ -1230,10 +1281,10 @@ const AppWorkspaceSidebarBody = props => {
   onMount(() => onCleanup(rememberSidebarScroll(body, scrollFadeEdges)));
   createScrollFade(() => body, () => props.scrollFade !== false);
   return [(() => {
-    var _el$34 = _$getNextElement(_tmpl$6);
-    var _ref$5 = body;
-    typeof _ref$5 === "function" ? _$use(_ref$5, _el$34) : body = _el$34;
-    _$spread(_el$34, _$mergeProps({
+    var _el$38 = _$getNextElement(_tmpl$8);
+    var _ref$6 = body;
+    typeof _ref$6 === "function" ? _$use(_ref$6, _el$38) : body = _el$38;
+    _$spread(_el$38, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
       },
@@ -1241,25 +1292,25 @@ const AppWorkspaceSidebarBody = props => {
         return props.scrollFade !== false ? "both" : undefined;
       }
     }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), false, true);
-    _$insert(_el$34, () => props.children);
+    _$insert(_el$38, () => props.children);
     _$runHydrationEvents();
-    return _el$34;
+    return _el$38;
   })(), (() => {
-    var _el$35 = _$getNextElement(_tmpl$16);
-    _$setProperty(_el$35, "innerHTML", SIDEBAR_SCROLL_MEMORY_SCRIPT);
-    return _el$35;
+    var _el$39 = _$getNextElement(_tmpl$18);
+    _$setProperty(_el$39, "innerHTML", SIDEBAR_SCROLL_MEMORY_SCRIPT);
+    return _el$39;
   })()];
 };
 const AppWorkspaceSidebarFooter = props => (() => {
-  var _el$36 = _$getNextElement(_tmpl$17);
-  _$spread(_el$36, _$mergeProps({
+  var _el$40 = _$getNextElement(_tmpl$19);
+  _$spread(_el$40, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-footer ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$36, () => props.children);
+  _$insert(_el$40, () => props.children);
   _$runHydrationEvents();
-  return _el$36;
+  return _el$40;
 })();
 const AppWorkspaceSidebarSection = props => {
   const [expanded, setExpanded] = createSignal(props.defaultOpen ?? true);
@@ -1270,27 +1321,27 @@ const AppWorkspaceSidebarSection = props => {
       return props.icon;
     },
     get children() {
-      var _el$37 = _$getNextElement(_tmpl$18),
-        _el$38 = _el$37.firstChild;
-      _$effect(() => _$className(_el$38, iconClass(props.icon)));
-      return _el$37;
+      var _el$41 = _$getNextElement(_tmpl$20),
+        _el$42 = _el$41.firstChild;
+      _$effect(() => _$className(_el$42, iconClass(props.icon)));
+      return _el$41;
     }
   }), _$memo(() => props.title), _$createComponent(Show, {
     get when() {
       return props.count !== undefined;
     },
     get children() {
-      var _el$39 = _$getNextElement(_tmpl$19);
-      _$insert(_el$39, () => props.count);
-      return _el$39;
+      var _el$43 = _$getNextElement(_tmpl$21);
+      _$insert(_el$43, () => props.count);
+      return _el$43;
     }
   })];
   return (() => {
-    var _el$40 = _$getNextElement(_tmpl$23),
-      _el$52 = _el$40.firstChild,
-      [_el$53, _co$9] = _$getNextMarker(_el$52.nextSibling),
-      _el$51 = _el$53.nextSibling;
-    _$spread(_el$40, _$mergeProps({
+    var _el$44 = _$getNextElement(_tmpl$25),
+      _el$56 = _el$44.firstChild,
+      [_el$57, _co$0] = _$getNextMarker(_el$56.nextSibling),
+      _el$55 = _el$57.nextSibling;
+    _$spread(_el$44, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
       },
@@ -1298,17 +1349,17 @@ const AppWorkspaceSidebarSection = props => {
         return props.collapsible ? "true" : undefined;
       }
     }, () => modeAttrs(props.sidebarMode)), false, true);
-    _$insert(_el$40, _$createComponent(Show, {
+    _$insert(_el$44, _$createComponent(Show, {
       get when() {
         return props.title || props.actions;
       },
       get children() {
-        var _el$41 = _$getNextElement(_tmpl$22),
-          _el$47 = _el$41.firstChild,
-          [_el$48, _co$7] = _$getNextMarker(_el$47.nextSibling),
-          _el$49 = _el$48.nextSibling,
-          [_el$50, _co$8] = _$getNextMarker(_el$49.nextSibling);
-        _$insert(_el$41, _$createComponent(Show, {
+        var _el$45 = _$getNextElement(_tmpl$24),
+          _el$51 = _el$45.firstChild,
+          [_el$52, _co$8] = _$getNextMarker(_el$51.nextSibling),
+          _el$53 = _el$52.nextSibling,
+          [_el$54, _co$9] = _$getNextMarker(_el$53.nextSibling);
+        _$insert(_el$45, _$createComponent(Show, {
           get when() {
             return props.collapsible;
           },
@@ -1318,56 +1369,56 @@ const AppWorkspaceSidebarSection = props => {
                 return props.title;
               },
               get children() {
-                var _el$54 = _$getNextElement(_tmpl$24);
-                _$insert(_el$54, title);
-                return _el$54;
+                var _el$58 = _$getNextElement(_tmpl$26);
+                _$insert(_el$58, title);
+                return _el$58;
               }
             });
           },
           get children() {
-            var _el$42 = _$getNextElement(_tmpl$20),
-              _el$44 = _el$42.firstChild,
-              [_el$45, _co$6] = _$getNextMarker(_el$44.nextSibling),
-              _el$43 = _el$45.nextSibling;
-            _el$42.$$click = () => {
+            var _el$46 = _$getNextElement(_tmpl$22),
+              _el$48 = _el$46.firstChild,
+              [_el$49, _co$7] = _$getNextMarker(_el$48.nextSibling),
+              _el$47 = _el$49.nextSibling;
+            _el$46.$$click = () => {
               const next = !open();
               setExpanded(next);
               props.onOpenChange?.(next);
             };
-            _$setAttribute(_el$42, "aria-controls", id);
-            _$insert(_el$42, title, _el$45, _co$6);
+            _$setAttribute(_el$46, "aria-controls", id);
+            _$insert(_el$46, title, _el$49, _co$7);
             _$effect(_p$ => {
               var _v$58 = open(),
                 _v$59 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
-              _v$58 !== _p$.e && _$setAttribute(_el$42, "aria-expanded", _p$.e = _v$58);
-              _v$59 !== _p$.t && _$className(_el$43, _p$.t = _v$59);
+              _v$58 !== _p$.e && _$setAttribute(_el$46, "aria-expanded", _p$.e = _v$58);
+              _v$59 !== _p$.t && _$className(_el$47, _p$.t = _v$59);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
             _$runHydrationEvents();
-            return _el$42;
+            return _el$46;
           }
-        }), _el$48, _co$7);
-        _$insert(_el$41, _$createComponent(Show, {
+        }), _el$52, _co$8);
+        _$insert(_el$45, _$createComponent(Show, {
           get when() {
             return props.actions;
           },
           get children() {
-            var _el$46 = _$getNextElement(_tmpl$21);
-            _$insert(_el$46, () => props.actions);
-            return _el$46;
+            var _el$50 = _$getNextElement(_tmpl$23);
+            _$insert(_el$50, () => props.actions);
+            return _el$50;
           }
-        }), _el$50, _co$8);
-        return _el$41;
+        }), _el$54, _co$9);
+        return _el$45;
       }
-    }), _el$53, _co$9);
-    _$setAttribute(_el$51, "id", id);
-    _$insert(_el$51, () => props.children);
-    _$effect(() => _$setProperty(_el$51, "hidden", !open()));
+    }), _el$57, _co$0);
+    _$setAttribute(_el$55, "id", id);
+    _$insert(_el$55, () => props.children);
+    _$effect(() => _$setProperty(_el$55, "hidden", !open()));
     _$runHydrationEvents();
-    return _el$40;
+    return _el$44;
   })();
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
@@ -1383,10 +1434,10 @@ const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
 const AppWorkspaceSidebarItemActions = props => (() => {
-  var _el$55 = _$getNextElement(_tmpl$25);
-  _$insert(_el$55, () => props.children);
-  _$effect(() => _$setAttribute(_el$55, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
-  return _el$55;
+  var _el$59 = _$getNextElement(_tmpl$27);
+  _$insert(_el$59, () => props.children);
+  _$effect(() => _$setAttribute(_el$59, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
+  return _el$59;
 })();
 /**
  * Hover actions overlay a row's end, so the label and count under them fade
@@ -1476,21 +1527,24 @@ function AppWorkspaceSidebarRow(props) {
       },
       get fallback() {
         return (() => {
-          var _el$56 = _$getNextElement(_tmpl$26);
-          _$spread(_el$56, _$mergeProps(attrs, {
+          var _el$60 = _$getNextElement(_tmpl$28);
+          _$spread(_el$60, _$mergeProps(attrs, {
             get tabIndex() {
               return props.tabIndex;
             },
             get disabled() {
               return props.disabled;
             },
+            get ["aria-expanded"]() {
+              return props.expanded;
+            },
             get onClick() {
               return props.onClick;
             }
           }), false, true);
-          _$insert(_el$56, () => props.children);
+          _$insert(_el$60, () => props.children);
           _$runHydrationEvents();
-          return _el$56;
+          return _el$60;
         })();
       },
       get children() {
@@ -1500,8 +1554,8 @@ function AppWorkspaceSidebarRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$57 = _$getNextElement(_tmpl$27);
-              _$spread(_el$57, _$mergeProps({
+              var _el$61 = _$getNextElement(_tmpl$29);
+              _$spread(_el$61, _$mergeProps({
                 get href() {
                   return props.href;
                 }
@@ -1516,9 +1570,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() {
@@ -1564,23 +1618,23 @@ function AppWorkspaceSidebarRow(props) {
       });
     },
     get children() {
-      var _el$58 = _$getNextElement(_tmpl$28),
-        _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);
-      _$use(row => onMount(() => observeSidebarRowCover(row)), _el$58);
-      _$spread(_el$58, _$mergeProps(common, {
+      var _el$62 = _$getNextElement(_tmpl$30),
+        _el$63 = _el$62.firstChild,
+        [_el$64, _co$1] = _$getNextMarker(_el$63.nextSibling),
+        _el$65 = _el$64.nextSibling,
+        [_el$66, _co$10] = _$getNextMarker(_el$65.nextSibling);
+      _$use(row => onMount(() => observeSidebarRowCover(row)), _el$62);
+      _$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$1);
+      _$insert(_el$62, () => props.actions, _el$66, _co$10);
       _$runHydrationEvents();
-      return _el$58;
+      return _el$62;
     }
   }), _$createComponent(Show, {
     get when() {
@@ -1632,102 +1686,102 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      var _el$63 = _$getNextElement(_tmpl$29);
-      _$insert(_el$63, () => iconContent() ?? (() => {
-        var _el$81 = _$getNextElement(_tmpl$36);
-        _$effect(() => _$className(_el$81, iconClass(icon())));
-        return _el$81;
+      var _el$67 = _$getNextElement(_tmpl$31);
+      _$insert(_el$67, () => iconContent() ?? (() => {
+        var _el$85 = _$getNextElement(_tmpl$38);
+        _$effect(() => _$className(_el$85, iconClass(icon())));
+        return _el$85;
       })());
-      _$effect(() => _$className(_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$63;
+      return _el$67;
     }
   }), (() => {
-    var _el$64 = _$getNextElement(_tmpl$34),
-      _el$74 = _el$64.firstChild,
-      [_el$75, _co$11] = _$getNextMarker(_el$74.nextSibling),
-      _el$70 = _el$75.nextSibling,
-      _el$71 = _el$70.firstChild,
-      _el$76 = _el$70.nextSibling,
-      [_el$77, _co$12] = _$getNextMarker(_el$76.nextSibling),
-      _el$78 = _el$77.nextSibling,
-      [_el$79, _co$13] = _$getNextMarker(_el$78.nextSibling);
-    _$insert(_el$64, _$createComponent(Show, {
+    var _el$68 = _$getNextElement(_tmpl$36),
+      _el$78 = _el$68.firstChild,
+      [_el$79, _co$12] = _$getNextMarker(_el$78.nextSibling),
+      _el$74 = _el$79.nextSibling,
+      _el$75 = _el$74.firstChild,
+      _el$80 = _el$74.nextSibling,
+      [_el$81, _co$13] = _$getNextMarker(_el$80.nextSibling),
+      _el$82 = _el$81.nextSibling,
+      [_el$83, _co$14] = _$getNextMarker(_el$82.nextSibling);
+    _$insert(_el$68, _$createComponent(Show, {
       get when() {
         return props.context || props.contextMeta;
       },
       get children() {
-        var _el$65 = _$getNextElement(_tmpl$31),
-          _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$33),
+          _el$70 = _el$69.firstChild,
+          _el$72 = _el$70.nextSibling,
+          [_el$73, _co$11] = _$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$30);
-            _$insert(_el$67, () => props.contextMeta);
-            return _el$67;
+            var _el$71 = _$getNextElement(_tmpl$32);
+            _$insert(_el$71, () => props.contextMeta);
+            return _el$71;
           }
-        }), _el$69, _co$10);
-        return _el$65;
+        }), _el$73, _co$11);
+        return _el$69;
       }
-    }), _el$75, _co$11);
-    _$insert(_el$71, () => label());
-    _$insert(_el$64, _$createComponent(Show, {
+    }), _el$79, _co$12);
+    _$insert(_el$75, () => label());
+    _$insert(_el$68, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$72 = _$getNextElement(_tmpl$32);
-        _$insert(_el$72, () => props.description);
-        return _el$72;
+        var _el$76 = _$getNextElement(_tmpl$34);
+        _$insert(_el$76, () => props.description);
+        return _el$76;
       }
-    }), _el$77, _co$12);
-    _$insert(_el$64, _$createComponent(Show, {
+    }), _el$81, _co$13);
+    _$insert(_el$68, _$createComponent(Show, {
       get when() {
         return props.note;
       },
       get children() {
-        var _el$73 = _$getNextElement(_tmpl$33);
-        _$insert(_el$73, () => props.note);
-        _$effect(() => _$setAttribute(_el$73, "data-tone", props.noteTone ?? "neutral"));
-        return _el$73;
+        var _el$77 = _$getNextElement(_tmpl$35);
+        _$insert(_el$77, () => props.note);
+        _$effect(() => _$setAttribute(_el$77, "data-tone", props.noteTone ?? "neutral"));
+        return _el$77;
       }
-    }), _el$79, _co$13);
+    }), _el$83, _co$14);
     _$effect(_p$ => {
       var _v$60 = oneLine() ? "1" : undefined,
         _v$61 = !oneLine() && typeof label() === "string" ? label() : undefined;
-      _v$60 !== _p$.e && _$setAttribute(_el$70, "data-lines", _p$.e = _v$60);
-      _v$61 !== _p$.t && _$setAttribute(_el$70, "data-label", _p$.t = _v$61);
+      _v$60 !== _p$.e && _$setAttribute(_el$74, "data-lines", _p$.e = _v$60);
+      _v$61 !== _p$.t && _$setAttribute(_el$74, "data-label", _p$.t = _v$61);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$64;
+    return _el$68;
   })(), _$createComponent(Show, {
     get when() {
       return hasMeta();
     },
     get children() {
-      var _el$80 = _$getNextElement(_tmpl$35);
-      _$insert(_el$80, meta);
+      var _el$84 = _$getNextElement(_tmpl$37);
+      _$insert(_el$84, meta);
       _$effect(_p$ => {
         var _v$62 = props.preview?.trigger === "row" ? metaId : undefined,
           _v$63 = metaVisibility() === "hover" ? "hover" : undefined;
-        _v$62 !== _p$.e && _$setAttribute(_el$80, "id", _p$.e = _v$62);
-        _v$63 !== _p$.t && _$setAttribute(_el$80, "data-visibility", _p$.t = _v$63);
+        _v$62 !== _p$.e && _$setAttribute(_el$84, "id", _p$.e = _v$62);
+        _v$63 !== _p$.t && _$setAttribute(_el$84, "data-visibility", _p$.t = _v$63);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$80;
+      return _el$84;
     }
   })];
   const singleAction = () => {
@@ -1743,9 +1797,9 @@ function AppWorkspaceSidebarItem(props) {
       props.onActionClick?.(event);
     };
     const content = () => actionSlot()?.children ?? (() => {
-      var _el$82 = _$getNextElement(_tmpl$36);
-      _$effect(() => _$className(_el$82, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
-      return _el$82;
+      var _el$86 = _$getNextElement(_tmpl$38);
+      _$effect(() => _$className(_el$86, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$86;
     })();
     return _$createComponent(Show, {
       get when() {
@@ -1758,16 +1812,16 @@ function AppWorkspaceSidebarItem(props) {
           },
           get fallback() {
             return (() => {
-              var _el$84 = _$getNextElement(_tmpl$38);
-              _el$84.$$click = select;
-              _$insert(_el$84, content);
+              var _el$88 = _$getNextElement(_tmpl$40);
+              _el$88.$$click = select;
+              _$insert(_el$88, content);
               _$effect(_p$ => {
                 var _v$67 = actionSlot()?.disabled,
                   _v$68 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
                   _v$69 = label();
-                _v$67 !== _p$.e && _$setProperty(_el$84, "disabled", _p$.e = _v$67);
-                _v$68 !== _p$.t && _$setAttribute(_el$84, "data-visibility", _p$.t = _v$68);
-                _v$69 !== _p$.a && _$setAttribute(_el$84, "aria-label", _p$.a = _v$69);
+                _v$67 !== _p$.e && _$setProperty(_el$88, "disabled", _p$.e = _v$67);
+                _v$68 !== _p$.t && _$setAttribute(_el$88, "data-visibility", _p$.t = _v$68);
+                _v$69 !== _p$.a && _$setAttribute(_el$88, "aria-label", _p$.a = _v$69);
                 return _p$;
               }, {
                 e: undefined,
@@ -1775,20 +1829,20 @@ function AppWorkspaceSidebarItem(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$84;
+              return _el$88;
             })();
           },
           get children() {
-            var _el$83 = _$getNextElement(_tmpl$37);
-            _el$83.$$click = select;
-            _$insert(_el$83, content);
+            var _el$87 = _$getNextElement(_tmpl$39);
+            _el$87.$$click = select;
+            _$insert(_el$87, content);
             _$effect(_p$ => {
               var _v$64 = actionSlot()?.href,
                 _v$65 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
                 _v$66 = label();
-              _v$64 !== _p$.e && _$setAttribute(_el$83, "href", _p$.e = _v$64);
-              _v$65 !== _p$.t && _$setAttribute(_el$83, "data-visibility", _p$.t = _v$65);
-              _v$66 !== _p$.a && _$setAttribute(_el$83, "aria-label", _p$.a = _v$66);
+              _v$64 !== _p$.e && _$setAttribute(_el$87, "href", _p$.e = _v$64);
+              _v$65 !== _p$.t && _$setAttribute(_el$87, "data-visibility", _p$.t = _v$65);
+              _v$66 !== _p$.a && _$setAttribute(_el$87, "aria-label", _p$.a = _v$66);
               return _p$;
             }, {
               e: undefined,
@@ -1796,7 +1850,7 @@ function AppWorkspaceSidebarItem(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$83;
+            return _el$87;
           }
         });
       }
@@ -1852,6 +1906,9 @@ function AppWorkspaceSidebarItem(props) {
     get onClick() {
       return props.onClick;
     },
+    get expanded() {
+      return _$memo(() => !!props.href)() ? undefined : props.expanded;
+    },
     get active() {
       return props.active;
     },
@@ -2100,16 +2157,16 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          var _el$85 = _$getNextElement(_tmpl$39),
-            _el$86 = _el$85.firstChild;
-          _$spread(_el$85, _$mergeProps({
+          var _el$89 = _$getNextElement(_tmpl$41),
+            _el$90 = _el$89.firstChild;
+          _$spread(_el$89, _$mergeProps({
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
           }, () => iconAccessibility(item.iconLabel)), false, true);
-          _$effect(() => _$className(_el$86, iconClass(rowIcon())));
+          _$effect(() => _$className(_el$90, iconClass(rowIcon())));
           _$runHydrationEvents();
-          return _el$85;
+          return _el$89;
         }
       }), _$createComponent(Show, {
         get when() {
@@ -2117,51 +2174,51 @@ const AppWorkspaceNavTree = props => {
         },
         get fallback() {
           return (() => {
-            var _el$94 = _$getNextElement(_tmpl$43),
-              _el$95 = _el$94.firstChild;
-            _$insert(_el$95, () => item.label);
-            _$effect(() => _$setAttribute(_el$94, "data-label", typeof item.label === "string" ? item.label : undefined));
-            return _el$94;
+            var _el$98 = _$getNextElement(_tmpl$45),
+              _el$99 = _el$98.firstChild;
+            _$insert(_el$99, () => item.label);
+            _$effect(() => _$setAttribute(_el$98, "data-label", typeof item.label === "string" ? item.label : undefined));
+            return _el$98;
           })();
         },
         get children() {
-          var _el$87 = _$getNextElement(_tmpl$40),
-            _el$88 = _el$87.firstChild,
-            _el$89 = _el$88.firstChild,
-            _el$90 = _el$88.nextSibling;
-          _$insert(_el$89, () => item.label);
-          _$insert(_el$90, () => item.description);
-          _$effect(() => _$setAttribute(_el$88, "data-label", typeof item.label === "string" ? item.label : undefined));
-          return _el$87;
+          var _el$91 = _$getNextElement(_tmpl$42),
+            _el$92 = _el$91.firstChild,
+            _el$93 = _el$92.firstChild,
+            _el$94 = _el$92.nextSibling;
+          _$insert(_el$93, () => item.label);
+          _$insert(_el$94, () => item.description);
+          _$effect(() => _$setAttribute(_el$92, "data-label", typeof item.label === "string" ? item.label : undefined));
+          return _el$91;
         }
       }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          var _el$91 = _$getNextElement(_tmpl$41);
-          _$insert(_el$91, () => item.meta);
+          var _el$95 = _$getNextElement(_tmpl$43);
+          _$insert(_el$95, () => item.meta);
           _$effect(_p$ => {
             var _v$70 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
               _v$71 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$70 !== _p$.e && _$className(_el$91, _p$.e = _v$70);
-            _v$71 !== _p$.t && _$setAttribute(_el$91, "data-visibility", _p$.t = _v$71);
+            _v$70 !== _p$.e && _$className(_el$95, _p$.e = _v$70);
+            _v$71 !== _p$.t && _$setAttribute(_el$95, "data-visibility", _p$.t = _v$71);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$91;
+          return _el$95;
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          var _el$92 = _$getNextElement(_tmpl$42),
-            _el$93 = _el$92.firstChild;
-          _$effect(() => _$className(_el$93, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
-          return _el$92;
+          var _el$96 = _$getNextElement(_tmpl$44),
+            _el$97 = _el$96.firstChild;
+          _$effect(() => _$className(_el$97, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$96;
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -2273,33 +2330,33 @@ const AppWorkspaceNavTree = props => {
         requestMove(target.move, false);
       };
       return (() => {
-        var _el$96 = _$getNextElement(_tmpl$45),
-          _el$98 = _el$96.firstChild,
-          [_el$99, _co$14] = _$getNextMarker(_el$98.nextSibling),
-          _el$100 = _el$99.nextSibling,
-          [_el$101, _co$15] = _$getNextMarker(_el$100.nextSibling);
-        _el$96.addEventListener("drop", onDrop);
-        _$addEventListener(_el$96, "dragleave", item.onDragLeave);
-        _el$96.addEventListener("dragover", onDragOver);
-        _$addEventListener(_el$96, "dragenter", item.onDragEnter);
-        _el$96.addEventListener("dragstart", onDragStart);
-        _el$96.$$keydown = onKeyDown;
-        _el$96.addEventListener("focus", () => setFocusedId(item.id));
-        var _ref$6 = treeItem;
-        typeof _ref$6 === "function" ? _$use(_ref$6, _el$96) : treeItem = _el$96;
-        _$setAttribute(_el$96, "aria-level", depth + 1);
-        _$setAttribute(_el$96, "data-k2b-nav-tree-parent-id", parentId);
-        _$insert(_el$96, row, _el$99, _co$14);
-        _$insert(_el$96, _$createComponent(Show, {
+        var _el$100 = _$getNextElement(_tmpl$47),
+          _el$102 = _el$100.firstChild,
+          [_el$103, _co$15] = _$getNextMarker(_el$102.nextSibling),
+          _el$104 = _el$103.nextSibling,
+          [_el$105, _co$16] = _$getNextMarker(_el$104.nextSibling);
+        _el$100.addEventListener("drop", onDrop);
+        _$addEventListener(_el$100, "dragleave", item.onDragLeave);
+        _el$100.addEventListener("dragover", onDragOver);
+        _$addEventListener(_el$100, "dragenter", item.onDragEnter);
+        _el$100.addEventListener("dragstart", onDragStart);
+        _el$100.$$keydown = onKeyDown;
+        _el$100.addEventListener("focus", () => setFocusedId(item.id));
+        var _ref$7 = treeItem;
+        typeof _ref$7 === "function" ? _$use(_ref$7, _el$100) : treeItem = _el$100;
+        _$setAttribute(_el$100, "aria-level", depth + 1);
+        _$setAttribute(_el$100, "data-k2b-nav-tree-parent-id", parentId);
+        _$insert(_el$100, row, _el$103, _co$15);
+        _$insert(_el$100, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!hasChildren())() && isExpanded(item.id);
           },
           get children() {
-            var _el$97 = _$getNextElement(_tmpl$44);
-            _$insert(_el$97, () => renderItems(nested, depth + 1, item.id));
-            return _el$97;
+            var _el$101 = _$getNextElement(_tmpl$46);
+            _$insert(_el$101, () => renderItems(nested, depth + 1, item.id));
+            return _el$101;
           }
-        }), _el$101, _co$15);
+        }), _el$105, _co$16);
         _$effect(_p$ => {
           var _v$72 = siblings().length,
             _v$73 = place() + 1,
@@ -2312,17 +2369,17 @@ const AppWorkspaceNavTree = props => {
             _v$80 = dragged()?.id === item.id ? "" : undefined,
             _v$81 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
             _v$82 = String(props.indented === false ? 0 : depth);
-          _v$72 !== _p$.e && _$setAttribute(_el$96, "aria-setsize", _p$.e = _v$72);
-          _v$73 !== _p$.t && _$setAttribute(_el$96, "aria-posinset", _p$.t = _v$73);
-          _v$74 !== _p$.a && _$setAttribute(_el$96, "aria-selected", _p$.a = _v$74);
-          _v$75 !== _p$.o && _$setAttribute(_el$96, "aria-expanded", _p$.o = _v$75);
-          _v$76 !== _p$.i && _$setAttribute(_el$96, "aria-disabled", _p$.i = _v$76);
-          _v$77 !== _p$.n && _$setAttribute(_el$96, "tabindex", _p$.n = _v$77);
-          _v$78 !== _p$.s && _$setAttribute(_el$96, "draggable", _p$.s = _v$78);
-          _v$79 !== _p$.h && _$setAttribute(_el$96, "data-k2b-nav-tree-id", _p$.h = _v$79);
-          _v$80 !== _p$.r && _$setAttribute(_el$96, "data-k2b-nav-tree-dragging", _p$.r = _v$80);
-          _v$81 !== _p$.d && _$setAttribute(_el$96, "data-k2b-nav-tree-drop", _p$.d = _v$81);
-          _v$82 !== _p$.l && _$setStyleProperty(_el$96, "--k2b-nav-tree-depth", _p$.l = _v$82);
+          _v$72 !== _p$.e && _$setAttribute(_el$100, "aria-setsize", _p$.e = _v$72);
+          _v$73 !== _p$.t && _$setAttribute(_el$100, "aria-posinset", _p$.t = _v$73);
+          _v$74 !== _p$.a && _$setAttribute(_el$100, "aria-selected", _p$.a = _v$74);
+          _v$75 !== _p$.o && _$setAttribute(_el$100, "aria-expanded", _p$.o = _v$75);
+          _v$76 !== _p$.i && _$setAttribute(_el$100, "aria-disabled", _p$.i = _v$76);
+          _v$77 !== _p$.n && _$setAttribute(_el$100, "tabindex", _p$.n = _v$77);
+          _v$78 !== _p$.s && _$setAttribute(_el$100, "draggable", _p$.s = _v$78);
+          _v$79 !== _p$.h && _$setAttribute(_el$100, "data-k2b-nav-tree-id", _p$.h = _v$79);
+          _v$80 !== _p$.r && _$setAttribute(_el$100, "data-k2b-nav-tree-dragging", _p$.r = _v$80);
+          _v$81 !== _p$.d && _$setAttribute(_el$100, "data-k2b-nav-tree-drop", _p$.d = _v$81);
+          _v$82 !== _p$.l && _$setStyleProperty(_el$100, "--k2b-nav-tree-depth", _p$.l = _v$82);
           return _p$;
         }, {
           e: undefined,
@@ -2338,7 +2395,7 @@ const AppWorkspaceNavTree = props => {
           l: undefined
         });
         _$runHydrationEvents();
-        return _el$96;
+        return _el$100;
       })();
     }
   });
@@ -2363,63 +2420,63 @@ const AppWorkspaceNavTree = props => {
     });
   });
   return (() => {
-    var _el$102 = _$getNextElement(_tmpl$46);
-    _el$102.addEventListener("dragend", endDrag);
-    _el$102.addEventListener("dragleave", event => {
+    var _el$106 = _$getNextElement(_tmpl$48);
+    _el$106.addEventListener("dragend", endDrag);
+    _el$106.addEventListener("dragleave", event => {
       if (!root?.contains(event.relatedTarget)) setDropTarget(null);
     });
-    _el$102.addEventListener("dragover", event => {
+    _el$106.addEventListener("dragover", event => {
       // Runs after the rows: a position no row claimed shows no gap.
       if (claimedDragOver !== event) setDropTarget(null);
     });
-    var _ref$7 = root;
-    typeof _ref$7 === "function" ? _$use(_ref$7, _el$102) : root = _el$102;
-    _$insert(_el$102, () => renderItems(roots, 0));
+    var _ref$8 = root;
+    typeof _ref$8 === "function" ? _$use(_ref$8, _el$106) : root = _el$106;
+    _$insert(_el$106, () => renderItems(roots, 0));
     _$effect(_p$ => {
       var _v$83 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
         _v$84 = props.ariaLabel;
-      _v$83 !== _p$.e && _$className(_el$102, _p$.e = _v$83);
-      _v$84 !== _p$.t && _$setAttribute(_el$102, "aria-label", _p$.t = _v$84);
+      _v$83 !== _p$.e && _$className(_el$106, _p$.e = _v$83);
+      _v$84 !== _p$.t && _$setAttribute(_el$106, "aria-label", _p$.t = _v$84);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$102;
+    return _el$106;
   })();
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => (() => {
-  var _el$103 = _$getNextElement(_tmpl$47),
-    _el$105 = _el$103.firstChild,
-    [_el$106, _co$16] = _$getNextMarker(_el$105.nextSibling),
-    _el$104 = _el$106.nextSibling;
-  _$spread(_el$103, _$mergeProps({
+  var _el$107 = _$getNextElement(_tmpl$49),
+    _el$109 = _el$107.firstChild,
+    [_el$110, _co$17] = _$getNextMarker(_el$109.nextSibling),
+    _el$108 = _el$110.nextSibling;
+  _$spread(_el$107, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$103, _$createComponent(Show, {
+  _$insert(_el$107, _$createComponent(Show, {
     get when() {
       return props.title;
     },
     children: title => (() => {
-      var _el$107 = _$getNextElement(_tmpl$24);
-      _$insert(_el$107, title);
-      return _el$107;
+      var _el$111 = _$getNextElement(_tmpl$26);
+      _$insert(_el$111, title);
+      return _el$111;
     })()
-  }), _el$106, _co$16);
-  _$insert(_el$104, () => props.children);
-  _$effect(() => _$setAttribute(_el$104, "data-columns", props.columns ?? 2));
+  }), _el$110, _co$17);
+  _$insert(_el$108, () => props.children);
+  _$effect(() => _$setAttribute(_el$108, "data-columns", props.columns ?? 2));
   _$runHydrationEvents();
-  return _el$103;
+  return _el$107;
 })();
 const AppWorkspaceSidebarIconAction = props => {
   let target;
   const content = (() => {
-    var _el$108 = _$getNextElement(_tmpl$10);
-    _$effect(() => _$className(_el$108, iconClass(props.icon)));
-    return _el$108;
+    var _el$112 = _$getNextElement(_tmpl$12);
+    _$effect(() => _$className(_el$112, iconClass(props.icon)));
+    return _el$112;
   })();
   const attrs = () => ({
     ref: element => target = element,
@@ -2444,8 +2501,8 @@ const AppWorkspaceSidebarIconAction = props => {
     delay: 0
   });
   if (!props.href || props.disabled) return [(() => {
-    var _el$109 = _$getNextElement(_tmpl$26);
-    _$spread(_el$109, _$mergeProps(attrs, {
+    var _el$113 = _$getNextElement(_tmpl$28);
+    _$spread(_el$113, _$mergeProps(attrs, {
       get disabled() {
         return props.disabled;
       },
@@ -2453,13 +2510,13 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$109, content);
+    _$insert(_el$113, content);
     _$runHydrationEvents();
-    return _el$109;
+    return _el$113;
   })(), hint];
   if (props.navigation !== "enhanced" || !props.onNavigate) return [(() => {
-    var _el$110 = _$getNextElement(_tmpl$27);
-    _$spread(_el$110, _$mergeProps({
+    var _el$114 = _$getNextElement(_tmpl$29);
+    _$spread(_el$114, _$mergeProps({
       get href() {
         return props.href;
       }
@@ -2468,9 +2525,9 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$110, content);
+    _$insert(_el$114, content);
     _$runHydrationEvents();
-    return _el$110;
+    return _el$114;
   })(), hint];
   return [_$createComponent(Link, _$mergeProps({
     get href() {
@@ -2498,7 +2555,8 @@ const AppWorkspaceSidebarIconAction = props => {
  * host's page title with the way up (see `PageTitle`); the page's own
  * `PageTitle` takes its place. The visible title is no heading, because many
  * pages render their own `h1`. From 64 rem a sidebar that marks the current
- * page names it already: the title and the way up hide, and only on a page
+ * page, or the item a deeper page belongs to, names it already and links the
+ * way up: the title and the way up hide, and only on a page
  * without its own `h1` its heading stays for assistive technology. With an
  * `AppWorkspace.Head` slot the row is always there and also carries the
  * views, the filters, the result count, and the actions; only its title
@@ -2528,54 +2586,54 @@ function AppWorkspaceHead(props) {
   };
   const resetContent = () => filters().reset;
   const primaryContent = () => [(() => {
-    var _el$111 = _$getNextElement(_tmpl$10);
-    _$effect(() => _$className(_el$111, props.head?.primary?.icon));
-    return _el$111;
+    var _el$115 = _$getNextElement(_tmpl$12);
+    _$effect(() => _$className(_el$115, props.head?.primary?.icon));
+    return _el$115;
   })(), (() => {
-    var _el$112 = _$getNextElement(_tmpl$49),
-      _el$114 = _el$112.firstChild,
-      [_el$115, _co$17] = _$getNextMarker(_el$114.nextSibling),
-      _el$116 = _el$115.nextSibling,
-      [_el$117, _co$18] = _$getNextMarker(_el$116.nextSibling);
-    _$insert(_el$112, () => props.head?.primary?.label, _el$115, _co$17);
-    _$insert(_el$112, _$createComponent(Show, {
+    var _el$116 = _$getNextElement(_tmpl$51),
+      _el$118 = _el$116.firstChild,
+      [_el$119, _co$18] = _$getNextMarker(_el$118.nextSibling),
+      _el$120 = _el$119.nextSibling,
+      [_el$121, _co$19] = _$getNextMarker(_el$120.nextSibling);
+    _$insert(_el$116, () => props.head?.primary?.label, _el$119, _co$18);
+    _$insert(_el$116, _$createComponent(Show, {
       get when() {
         return props.head?.primary?.popup;
       },
       get children() {
-        return _$getNextElement(_tmpl$48);
+        return _$getNextElement(_tmpl$50);
       }
-    }), _el$117, _co$18);
-    return _el$112;
+    }), _el$121, _co$19);
+    return _el$116;
   })()];
   return (() => {
-    var _el$118 = _$getNextElement(_tmpl$55),
-      _el$144 = _el$118.firstChild,
-      [_el$145, _co$28] = _$getNextMarker(_el$144.nextSibling),
-      _el$119 = _el$145.nextSibling,
-      _el$129 = _el$119.firstChild,
-      [_el$130, _co$21] = _$getNextMarker(_el$129.nextSibling),
-      _el$131 = _el$130.nextSibling,
-      [_el$132, _co$22] = _$getNextMarker(_el$131.nextSibling),
-      _el$133 = _el$132.nextSibling,
-      [_el$134, _co$23] = _$getNextMarker(_el$133.nextSibling),
+    var _el$122 = _$getNextElement(_tmpl$57),
+      _el$148 = _el$122.firstChild,
+      [_el$149, _co$29] = _$getNextMarker(_el$148.nextSibling),
+      _el$123 = _el$149.nextSibling,
+      _el$133 = _el$123.firstChild,
+      [_el$134, _co$22] = _$getNextMarker(_el$133.nextSibling),
       _el$135 = _el$134.nextSibling,
-      [_el$136, _co$24] = _$getNextMarker(_el$135.nextSibling),
+      [_el$136, _co$23] = _$getNextMarker(_el$135.nextSibling),
       _el$137 = _el$136.nextSibling,
-      [_el$138, _co$25] = _$getNextMarker(_el$137.nextSibling),
-      _el$146 = _el$119.nextSibling,
-      [_el$147, _co$29] = _$getNextMarker(_el$146.nextSibling);
-    _$insert(_el$118, _$createComponent(Show, {
+      [_el$138, _co$24] = _$getNextMarker(_el$137.nextSibling),
+      _el$139 = _el$138.nextSibling,
+      [_el$140, _co$25] = _$getNextMarker(_el$139.nextSibling),
+      _el$141 = _el$140.nextSibling,
+      [_el$142, _co$26] = _$getNextMarker(_el$141.nextSibling),
+      _el$150 = _el$123.nextSibling,
+      [_el$151, _co$30] = _$getNextMarker(_el$150.nextSibling);
+    _$insert(_el$122, _$createComponent(Show, {
       get when() {
         return mobilePane();
       },
       children: pane => (() => {
-        var _el$148 = _$getNextElement(_tmpl$7);
-        _$effect(() => _$setProperty(_el$148, "innerHTML", mobilePaneRule(pane())));
-        return _el$148;
+        var _el$152 = _$getNextElement(_tmpl$9);
+        _$effect(() => _$setProperty(_el$152, "innerHTML", mobilePaneRule(pane())));
+        return _el$152;
       })()
-    }), _el$145, _co$28);
-    _$insert(_el$119, _$createComponent(IconButton, {
+    }), _el$149, _co$29);
+    _$insert(_el$123, _$createComponent(IconButton, {
       "class": "k2b-app-workspace__head-toggle",
       get label() {
         return messages().showNavigation;
@@ -2586,10 +2644,10 @@ function AppWorkspaceHead(props) {
       "aria-expanded": "false",
       "data-app-workspace-sidebar-toggle": "",
       get children() {
-        return _$getNextElement(_tmpl$50);
+        return _$getNextElement(_tmpl$52);
       }
-    }), _el$130, _co$21);
-    _$insert(_el$119, _$createComponent(Show, {
+    }), _el$134, _co$22);
+    _$insert(_el$123, _$createComponent(Show, {
       get when() {
         return trail();
       },
@@ -2600,34 +2658,34 @@ function AppWorkspaceHead(props) {
         as: "p",
         fallback: true
       }), (() => {
-        var _el$149 = _$getNextElement(_tmpl$56);
-        _$setAttribute(_el$149, "data-k2b-server", isServer ? "" : undefined);
-        _$insert(_el$149, () => current().title);
-        return _el$149;
+        var _el$153 = _$getNextElement(_tmpl$58);
+        _$setAttribute(_el$153, "data-k2b-server", isServer ? "" : undefined);
+        _$insert(_el$153, () => current().title);
+        return _el$153;
       })()]
-    }), _el$132, _co$22);
-    _$insert(_el$119, _$createComponent(Show, {
+    }), _el$136, _co$23);
+    _$insert(_el$123, _$createComponent(Show, {
       get when() {
         return resolvedViews.toArray().some(Boolean);
       },
       get children() {
-        var _el$121 = _$getNextElement(_tmpl$51);
-        _$insert(_el$121, resolvedViews);
-        return _el$121;
+        var _el$125 = _$getNextElement(_tmpl$53);
+        _$insert(_el$125, resolvedViews);
+        return _el$125;
       }
-    }), _el$134, _co$23);
-    _$insert(_el$119, _$createComponent(Show, {
+    }), _el$138, _co$24);
+    _$insert(_el$123, _$createComponent(Show, {
       get when() {
         return resolvedFilters.toArray().some(Boolean) || props.head?.filtered;
       },
       get children() {
-        var _el$122 = _$getNextElement(_tmpl$52),
-          _el$123 = _el$122.firstChild,
-          [_el$124, _co$19] = _$getNextMarker(_el$123.nextSibling),
-          _el$125 = _el$124.nextSibling,
-          [_el$126, _co$20] = _$getNextMarker(_el$125.nextSibling);
-        _$insert(_el$122, resolvedFilters, _el$124, _co$19);
-        _$insert(_el$122, _$createComponent(Show, {
+        var _el$126 = _$getNextElement(_tmpl$54),
+          _el$127 = _el$126.firstChild,
+          [_el$128, _co$20] = _$getNextMarker(_el$127.nextSibling),
+          _el$129 = _el$128.nextSibling,
+          [_el$130, _co$21] = _$getNextMarker(_el$129.nextSibling);
+        _$insert(_el$126, resolvedFilters, _el$128, _co$20);
+        _$insert(_el$126, _$createComponent(Show, {
           get when() {
             return props.head?.filtered;
           },
@@ -2667,34 +2725,34 @@ function AppWorkspaceHead(props) {
               })
             });
           }
-        }), _el$126, _co$20);
-        _$effect(() => _$setAttribute(_el$122, "aria-label", filters().filters));
-        return _el$122;
+        }), _el$130, _co$21);
+        _$effect(() => _$setAttribute(_el$126, "aria-label", filters().filters));
+        return _el$126;
       }
-    }), _el$136, _co$24);
-    _$insert(_el$119, _$createComponent(Show, {
+    }), _el$140, _co$25);
+    _$insert(_el$123, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!props.head?.filtered)() && resolvedCount.toArray().some(value => value !== undefined && value !== null && value !== false);
       },
       get children() {
-        var _el$127 = _$getNextElement(_tmpl$53),
-          _el$128 = _el$127.firstChild;
-        _$insert(_el$128, resolvedCount);
-        return _el$127;
+        var _el$131 = _$getNextElement(_tmpl$55),
+          _el$132 = _el$131.firstChild;
+        _$insert(_el$132, resolvedCount);
+        return _el$131;
       }
-    }), _el$138, _co$25);
-    _$insert(_el$118, _$createComponent(Show, {
+    }), _el$142, _co$26);
+    _$insert(_el$122, _$createComponent(Show, {
       get when() {
         return resolvedActions.toArray().some(Boolean) || props.head?.primary;
       },
       get children() {
-        var _el$139 = _$getNextElement(_tmpl$54),
-          _el$140 = _el$139.firstChild,
-          [_el$141, _co$26] = _$getNextMarker(_el$140.nextSibling),
-          _el$142 = _el$141.nextSibling,
-          [_el$143, _co$27] = _$getNextMarker(_el$142.nextSibling);
-        _$insert(_el$139, resolvedActions, _el$141, _co$26);
-        _$insert(_el$139, _$createComponent(Show, {
+        var _el$143 = _$getNextElement(_tmpl$56),
+          _el$144 = _el$143.firstChild,
+          [_el$145, _co$27] = _$getNextMarker(_el$144.nextSibling),
+          _el$146 = _el$145.nextSibling,
+          [_el$147, _co$28] = _$getNextMarker(_el$146.nextSibling);
+        _$insert(_el$143, resolvedActions, _el$145, _co$27);
+        _$insert(_el$143, _$createComponent(Show, {
           get when() {
             return props.head?.primary;
           },
@@ -2744,24 +2802,24 @@ function AppWorkspaceHead(props) {
               }
             })
           })
-        }), _el$143, _co$27);
-        return _el$139;
+        }), _el$147, _co$28);
+        return _el$143;
       }
-    }), _el$147, _co$29);
+    }), _el$151, _co$30);
     _$effect(_p$ => {
       var _v$85 = trail()?.ancestors.length ? "up" : trail() ? "title" : undefined,
         _v$86 = props.head ? "" : undefined,
         _v$87 = mobilePane();
-      _v$85 !== _p$.e && _$setAttribute(_el$118, "data-trail", _p$.e = _v$85);
-      _v$86 !== _p$.t && _$setAttribute(_el$118, "data-row", _p$.t = _v$86);
-      _v$87 !== _p$.a && _$setAttribute(_el$118, "data-workspace-head-pane", _p$.a = _v$87);
+      _v$85 !== _p$.e && _$setAttribute(_el$122, "data-trail", _p$.e = _v$85);
+      _v$86 !== _p$.t && _$setAttribute(_el$122, "data-row", _p$.t = _v$86);
+      _v$87 !== _p$.a && _$setAttribute(_el$122, "data-workspace-head-pane", _p$.a = _v$87);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$118;
+    return _el$122;
   })();
 }
 const AppWorkspace = props => {
@@ -2816,10 +2874,10 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          var _el$150 = _$getNextElement(_tmpl$57);
-          var _ref$8 = root;
-          typeof _ref$8 === "function" ? _$use(_ref$8, _el$150) : root = _el$150;
-          _$insert(_el$150, contents);
+          var _el$154 = _$getNextElement(_tmpl$59);
+          var _ref$9 = root;
+          typeof _ref$9 === "function" ? _$use(_ref$9, _el$154) : root = _el$154;
+          _$insert(_el$154, contents);
           _$effect(_p$ => {
             var _v$88 = `k2b-app-workspace ${props.class ?? ""}`,
               _v$89 = props.mobileSurface,
@@ -2827,12 +2885,12 @@ const AppWorkspace = props => {
               _v$91 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
               _v$92 = props.resizable === false ? "false" : "true",
               _v$93 = appWorkspaceLayoutStyle(initialLayoutState());
-            _v$88 !== _p$.e && _$className(_el$150, _p$.e = _v$88);
-            _v$89 !== _p$.t && _$setAttribute(_el$150, "data-mobile-surface", _p$.t = _v$89);
-            _v$90 !== _p$.a && _$setAttribute(_el$150, "data-flat", _p$.a = _v$90);
-            _v$91 !== _p$.o && _$setAttribute(_el$150, "data-sidebar-collapsed", _p$.o = _v$91);
-            _v$92 !== _p$.i && _$setAttribute(_el$150, "data-workspace-resizable", _p$.i = _v$92);
-            _p$.n = _$style(_el$150, _v$93, _p$.n);
+            _v$88 !== _p$.e && _$className(_el$154, _p$.e = _v$88);
+            _v$89 !== _p$.t && _$setAttribute(_el$154, "data-mobile-surface", _p$.t = _v$89);
+            _v$90 !== _p$.a && _$setAttribute(_el$154, "data-flat", _p$.a = _v$90);
+            _v$91 !== _p$.o && _$setAttribute(_el$154, "data-sidebar-collapsed", _p$.o = _v$91);
+            _v$92 !== _p$.i && _$setAttribute(_el$154, "data-workspace-resizable", _p$.i = _v$92);
+            _p$.n = _$style(_el$154, _v$93, _p$.n);
             return _p$;
           }, {
             e: undefined,
@@ -2842,7 +2900,7 @@ const AppWorkspace = props => {
             i: undefined,
             n: undefined
           });
-          return _el$150;
+          return _el$154;
         }
       });
     }
@@ -2858,10 +2916,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
 });
 AppWorkspace.Head = AppWorkspaceHeadSlot;
 AppWorkspace.Content = props => (() => {
-  var _el$151 = _$getNextElement(_tmpl$6);
-  _$insert(_el$151, () => props.children);
-  _$effect(() => _$className(_el$151, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$151;
+  var _el$155 = _$getNextElement(_tmpl$8);
+  _$insert(_el$155, () => props.children);
+  _$effect(() => _$className(_el$155, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$155;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;