@k2b/ui 0.23.0 → 0.25.0

package/dist/browser/layout/AppWorkspace.js

@@ -37,34 +37,36 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-mention aria-hidden=true>@`),
   _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-muted aria-hidden=true><i class="ti ti-bell-off">`),
   _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-count>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status><!$><!/><!$><!/><span class=k2b-app-workspace__sidebar-status-unread aria-hidden=true></span><span class=k2b-sr-only>, <!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-dot>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<button type=button>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<a>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><!$><!/><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><!$><!/>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-copy><span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text></span></span><span class=k2b-app-workspace__sidebar-item-description>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<div role=tree>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><!$><!/>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
-  _tmpl$47 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace><!$><!/><!$><!/>`);
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-unread aria-hidden=true>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>, <!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-dot>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
+  _tmpl$31 = /*#__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$32 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
+  _tmpl$37 = /*#__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$38 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<div role=tree>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<i class="ti ti-layout-sidebar"aria-hidden=true>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__head><!$><!/><!$><!/>`),
+  _tmpl$48 = /*#__PURE__*/_$template(`<h1 class=k2b-app-workspace__head-heading data-k2b-page-trail-title>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace><!$><!/><!$><!/>`);
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
 import { isServer } from "solid-js/web";
@@ -73,6 +75,7 @@ import { APP_WORKSPACE_DETAIL_CLOSE_EVENT, APP_WORKSPACE_DETAIL_STEP_EVENT, APP_
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
 import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
+import { AppWorkspaceSidebarSwitcher } from "./SidebarSwitcher";
 import { createScrollFade } from "./scroll-fade";
 import { assertStableUiId, assertUniqueStableUiIds } from "./stable-id";
 import { useWorkspaceMessages } from "./workspace-messages";
@@ -866,75 +869,79 @@ const AppWorkspaceSidebarItemStatus = props => {
   }) : dot() ? workspaceMessages().sidebarNewActivity : "", props.mention ? workspaceMessages().sidebarMentioned : "", props.muted ? workspaceMessages().sidebarMuted : ""].filter(Boolean).join(", ");
   // The unread slot stays reserved at the end, and the marks that change most
   // often sit outermost, so new activity or a mention never moves another mark.
-  return _$createComponent(Show, {
-    get when() {
-      return description();
-    },
-    get children() {
-      var _el$33 = _$getNextElement(_tmpl$20),
-        _el$42 = _el$33.firstChild,
-        [_el$43, _co$7] = _$getNextMarker(_el$42.nextSibling),
-        _el$44 = _el$43.nextSibling,
-        [_el$45, _co$8] = _$getNextMarker(_el$44.nextSibling),
-        _el$36 = _el$45.nextSibling,
-        _el$38 = _el$36.nextSibling,
-        _el$39 = _el$38.firstChild,
-        _el$40 = _el$39.nextSibling,
-        [_el$41, _co$6] = _$getNextMarker(_el$40.nextSibling);
-      _$insert(_el$33, _$createComponent(Show, {
-        get when() {
-          return props.mention;
-        },
-        get children() {
-          return _$getNextElement(_tmpl$17);
-        }
-      }), _el$43, _co$7);
-      _$insert(_el$33, _$createComponent(Show, {
-        get when() {
-          return props.muted;
-        },
-        get children() {
-          return _$getNextElement(_tmpl$18);
-        }
-      }), _el$45, _co$8);
-      _$insert(_el$36, _$createComponent(Show, {
-        get when() {
-          return count() || waiting() === 0;
-        },
-        get fallback() {
-          return _$createComponent(Show, {
+  // The element itself stays when there is nothing to show: empty, it takes no
+  // space, and it still keeps the row's label on one line, so the first count
+  // never re-wraps the label and moves the rows below.
+  return (() => {
+    var _el$33 = _$getNextElement(_tmpl$22);
+    _$insert(_el$33, _$createComponent(Show, {
+      get when() {
+        return description();
+      },
+      get children() {
+        return [_$createComponent(Show, {
+          get when() {
+            return props.mention;
+          },
+          get children() {
+            return _$getNextElement(_tmpl$17);
+          }
+        }), _$createComponent(Show, {
+          get when() {
+            return props.muted;
+          },
+          get children() {
+            return _$getNextElement(_tmpl$18);
+          }
+        }), (() => {
+          var _el$36 = _$getNextElement(_tmpl$20);
+          _$insert(_el$36, _$createComponent(Show, {
             get when() {
-              return dot();
+              return count() || waiting() === 0;
+            },
+            get fallback() {
+              return _$createComponent(Show, {
+                get when() {
+                  return dot();
+                },
+                get children() {
+                  return _$getNextElement(_tmpl$23);
+                }
+              });
             },
             get children() {
-              return _$getNextElement(_tmpl$21);
+              var _el$37 = _$getNextElement(_tmpl$19);
+              _$insert(_el$37, (() => {
+                var _c$ = _$memo(() => count() > 99);
+                return () => _c$() ? "99+" : count();
+              })());
+              _$effect(() => _$setAttribute(_el$37, "data-mention", props.mention ? "true" : undefined));
+              return _el$37;
             }
-          });
-        },
-        get children() {
-          var _el$37 = _$getNextElement(_tmpl$19);
-          _$insert(_el$37, (() => {
-            var _c$ = _$memo(() => count() > 99);
-            return () => _c$() ? "99+" : count();
-          })());
-          _$effect(() => _$setAttribute(_el$37, "data-mention", props.mention ? "true" : undefined));
-          return _el$37;
-        }
-      }));
-      _$insert(_el$38, description, _el$41, _co$6);
-      _$effect(_p$ => {
-        var _v$51 = waiting() !== null ? undefined : count() ? "count" : dot() ? "dot" : undefined,
-          _v$52 = waiting() === null ? undefined : waiting() ? "count" : "zero";
-        _v$51 !== _p$.e && _$setAttribute(_el$33, "data-unread", _p$.e = _v$51);
-        _v$52 !== _p$.t && _$setAttribute(_el$33, "data-waiting", _p$.t = _v$52);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined
-      });
-      return _el$33;
-    }
-  });
+          }));
+          return _el$36;
+        })(), (() => {
+          var _el$38 = _$getNextElement(_tmpl$21),
+            _el$39 = _el$38.firstChild,
+            _el$40 = _el$39.nextSibling,
+            [_el$41, _co$6] = _$getNextMarker(_el$40.nextSibling);
+          _$insert(_el$38, description, _el$41, _co$6);
+          return _el$38;
+        })()];
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$51 = waiting() !== null ? undefined : count() ? "count" : dot() ? "dot" : undefined,
+        _v$52 = waiting() === null ? undefined : waiting() ? "count" : "zero";
+      _v$51 !== _p$.e && _$setAttribute(_el$33, "data-unread", _p$.e = _v$51);
+      _v$52 !== _p$.t && _$setAttribute(_el$33, "data-waiting", _p$.t = _v$52);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$33;
+  })();
 };
 /** Shared visual and semantic row frame for flat sidebar items and tree items. */
 function AppWorkspaceSidebarRow(props) {
@@ -961,8 +968,8 @@ function AppWorkspaceSidebarRow(props) {
       },
       get fallback() {
         return (() => {
-          var _el$47 = _$getNextElement(_tmpl$22);
-          _$spread(_el$47, _$mergeProps(attrs, {
+          var _el$43 = _$getNextElement(_tmpl$24);
+          _$spread(_el$43, _$mergeProps(attrs, {
             get tabIndex() {
               return props.tabIndex;
             },
@@ -973,9 +980,9 @@ function AppWorkspaceSidebarRow(props) {
               return props.onClick;
             }
           }), false, true);
-          _$insert(_el$47, () => props.children);
+          _$insert(_el$43, () => props.children);
           _$runHydrationEvents();
-          return _el$47;
+          return _el$43;
         })();
       },
       get children() {
@@ -985,8 +992,8 @@ function AppWorkspaceSidebarRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$48 = _$getNextElement(_tmpl$23);
-              _$spread(_el$48, _$mergeProps({
+              var _el$44 = _$getNextElement(_tmpl$25);
+              _$spread(_el$44, _$mergeProps({
                 get href() {
                   return props.href;
                 }
@@ -1001,9 +1008,9 @@ function AppWorkspaceSidebarRow(props) {
                   return props.onClick;
                 }
               }), false, true);
-              _$insert(_el$48, () => props.children);
+              _$insert(_el$44, () => props.children);
               _$runHydrationEvents();
-              return _el$48;
+              return _el$44;
             })();
           },
           get children() {
@@ -1049,22 +1056,22 @@ function AppWorkspaceSidebarRow(props) {
       });
     },
     get children() {
-      var _el$49 = _$getNextElement(_tmpl$24),
-        _el$50 = _el$49.firstChild,
-        [_el$51, _co$9] = _$getNextMarker(_el$50.nextSibling),
-        _el$52 = _el$51.nextSibling,
-        [_el$53, _co$0] = _$getNextMarker(_el$52.nextSibling);
-      _$spread(_el$49, _$mergeProps(common, {
+      var _el$45 = _$getNextElement(_tmpl$26),
+        _el$46 = _el$45.firstChild,
+        [_el$47, _co$7] = _$getNextMarker(_el$46.nextSibling),
+        _el$48 = _el$47.nextSibling,
+        [_el$49, _co$8] = _$getNextMarker(_el$48.nextSibling);
+      _$spread(_el$45, _$mergeProps(common, {
         get ["data-disabled"]() {
           return props.disabled ? "true" : undefined;
         }
       }), false, true);
-      _$insert(_el$49, _$createComponent(Control, {
+      _$insert(_el$45, _$createComponent(Control, {
         grouped: true
-      }), _el$51, _co$9);
-      _$insert(_el$49, () => props.actions, _el$53, _co$0);
+      }), _el$47, _co$7);
+      _$insert(_el$45, () => props.actions, _el$49, _co$8);
       _$runHydrationEvents();
-      return _el$49;
+      return _el$45;
     }
   });
 }
@@ -1080,10 +1087,11 @@ function AppWorkspaceSidebarItem(props) {
   const actionSlot = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_ITEM_ACTION));
   const legacy = createMemo(() => values().filter(value => !sidebarItemSlot(value)));
   const label = () => labelSlot()?.children ?? (legacy().length === 1 ? legacy()[0] : legacy());
+  const oneLine = () => !(labelSlot()?.marquee ?? (props.variant ?? "row") === "row");
   const icon = () => iconSlot()?.icon ?? props.icon;
   const iconContent = () => iconSlot()?.children;
-  // Resolved first, so a component that renders nothing, such as a status with
-  // nothing to show, leaves no empty slot in the browser either.
+  // Resolved first, so metadata that renders nothing leaves no empty slot. An
+  // empty status still renders its element; the stylesheet hides that slot.
   const meta = children(() => metaSlot()?.children ?? props.meta);
   const hasMeta = () => meta.toArray().some(Boolean);
   const metaId = createUniqueId();
@@ -1096,76 +1104,85 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      var _el$54 = _$getNextElement(_tmpl$25);
-      _$insert(_el$54, () => iconContent() ?? (() => {
-        var _el$69 = _$getNextElement(_tmpl$31);
-        _$effect(() => _$className(_el$69, iconClass(icon())));
-        return _el$69;
+      var _el$50 = _$getNextElement(_tmpl$27);
+      _$insert(_el$50, () => iconContent() ?? (() => {
+        var _el$65 = _$getNextElement(_tmpl$33);
+        _$effect(() => _$className(_el$65, iconClass(icon())));
+        return _el$65;
       })());
-      return _el$54;
+      return _el$50;
     }
   }), (() => {
-    var _el$55 = _$getNextElement(_tmpl$29),
-      _el$64 = _el$55.firstChild,
-      [_el$65, _co$10] = _$getNextMarker(_el$64.nextSibling),
-      _el$61 = _el$65.nextSibling,
-      _el$62 = _el$61.firstChild,
-      _el$66 = _el$61.nextSibling,
-      [_el$67, _co$11] = _$getNextMarker(_el$66.nextSibling);
-    _$insert(_el$55, _$createComponent(Show, {
+    var _el$51 = _$getNextElement(_tmpl$31),
+      _el$60 = _el$51.firstChild,
+      [_el$61, _co$0] = _$getNextMarker(_el$60.nextSibling),
+      _el$57 = _el$61.nextSibling,
+      _el$58 = _el$57.firstChild,
+      _el$62 = _el$57.nextSibling,
+      [_el$63, _co$1] = _$getNextMarker(_el$62.nextSibling);
+    _$insert(_el$51, _$createComponent(Show, {
       get when() {
         return props.context || props.contextMeta;
       },
       get children() {
-        var _el$56 = _$getNextElement(_tmpl$27),
-          _el$57 = _el$56.firstChild,
-          _el$59 = _el$57.nextSibling,
-          [_el$60, _co$1] = _$getNextMarker(_el$59.nextSibling);
-        _$insert(_el$57, () => props.context);
-        _$insert(_el$56, _$createComponent(Show, {
+        var _el$52 = _$getNextElement(_tmpl$29),
+          _el$53 = _el$52.firstChild,
+          _el$55 = _el$53.nextSibling,
+          [_el$56, _co$9] = _$getNextMarker(_el$55.nextSibling);
+        _$insert(_el$53, () => props.context);
+        _$insert(_el$52, _$createComponent(Show, {
           get when() {
             return props.contextMeta;
           },
           get children() {
-            var _el$58 = _$getNextElement(_tmpl$26);
-            _$insert(_el$58, () => props.contextMeta);
-            return _el$58;
+            var _el$54 = _$getNextElement(_tmpl$28);
+            _$insert(_el$54, () => props.contextMeta);
+            return _el$54;
           }
-        }), _el$60, _co$1);
-        return _el$56;
+        }), _el$56, _co$9);
+        return _el$52;
       }
-    }), _el$65, _co$10);
-    _$insert(_el$62, () => label());
-    _$insert(_el$55, _$createComponent(Show, {
+    }), _el$61, _co$0);
+    _$insert(_el$58, () => label());
+    _$insert(_el$51, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$63 = _$getNextElement(_tmpl$28);
-        _$insert(_el$63, () => props.description);
-        return _el$63;
+        var _el$59 = _$getNextElement(_tmpl$30);
+        _$insert(_el$59, () => props.description);
+        return _el$59;
       }
-    }), _el$67, _co$11);
-    _$effect(() => _$setAttribute(_el$61, "data-marquee", labelSlot()?.marquee ?? (props.variant ?? "row") === "row" ? "true" : "false"));
-    return _el$55;
+    }), _el$63, _co$1);
+    _$effect(_p$ => {
+      var _v$53 = oneLine() ? "1" : undefined,
+        _v$54 = !oneLine() && typeof label() === "string" ? label() : undefined;
+      _v$53 !== _p$.e && _$setAttribute(_el$57, "data-lines", _p$.e = _v$53);
+      _v$54 !== _p$.t && _$setAttribute(_el$57, "data-label", _p$.t = _v$54);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$51;
   })(), _$createComponent(Show, {
     get when() {
       return hasMeta();
     },
     get children() {
-      var _el$68 = _$getNextElement(_tmpl$30);
-      _$insert(_el$68, meta);
+      var _el$64 = _$getNextElement(_tmpl$32);
+      _$insert(_el$64, meta);
       _$effect(_p$ => {
-        var _v$53 = props.preview?.trigger === "row" ? metaId : undefined,
-          _v$54 = metaVisibility() === "hover" ? "hover" : undefined;
-        _v$53 !== _p$.e && _$setAttribute(_el$68, "id", _p$.e = _v$53);
-        _v$54 !== _p$.t && _$setAttribute(_el$68, "data-visibility", _p$.t = _v$54);
+        var _v$55 = props.preview?.trigger === "row" ? metaId : undefined,
+          _v$56 = metaVisibility() === "hover" ? "hover" : undefined;
+        _v$55 !== _p$.e && _$setAttribute(_el$64, "id", _p$.e = _v$55);
+        _v$56 !== _p$.t && _$setAttribute(_el$64, "data-visibility", _p$.t = _v$56);
         return _p$;
       }, {
         e: undefined,
         t: undefined
       });
-      return _el$68;
+      return _el$64;
     }
   })];
   const singleAction = () => {
@@ -1181,9 +1198,9 @@ function AppWorkspaceSidebarItem(props) {
       props.onActionClick?.(event);
     };
     const content = () => actionSlot()?.children ?? (() => {
-      var _el$70 = _$getNextElement(_tmpl$31);
-      _$effect(() => _$className(_el$70, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
-      return _el$70;
+      var _el$66 = _$getNextElement(_tmpl$33);
+      _$effect(() => _$className(_el$66, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$66;
     })();
     return _$createComponent(Show, {
       get when() {
@@ -1196,16 +1213,16 @@ function AppWorkspaceSidebarItem(props) {
           },
           get fallback() {
             return (() => {
-              var _el$72 = _$getNextElement(_tmpl$33);
-              _el$72.$$click = select;
-              _$insert(_el$72, content);
+              var _el$68 = _$getNextElement(_tmpl$35);
+              _el$68.$$click = select;
+              _$insert(_el$68, content);
               _$effect(_p$ => {
-                var _v$58 = actionSlot()?.disabled,
-                  _v$59 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                  _v$60 = label();
-                _v$58 !== _p$.e && _$setProperty(_el$72, "disabled", _p$.e = _v$58);
-                _v$59 !== _p$.t && _$setAttribute(_el$72, "data-visibility", _p$.t = _v$59);
-                _v$60 !== _p$.a && _$setAttribute(_el$72, "aria-label", _p$.a = _v$60);
+                var _v$60 = actionSlot()?.disabled,
+                  _v$61 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$62 = label();
+                _v$60 !== _p$.e && _$setProperty(_el$68, "disabled", _p$.e = _v$60);
+                _v$61 !== _p$.t && _$setAttribute(_el$68, "data-visibility", _p$.t = _v$61);
+                _v$62 !== _p$.a && _$setAttribute(_el$68, "aria-label", _p$.a = _v$62);
                 return _p$;
               }, {
                 e: undefined,
@@ -1213,20 +1230,20 @@ function AppWorkspaceSidebarItem(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$72;
+              return _el$68;
             })();
           },
           get children() {
-            var _el$71 = _$getNextElement(_tmpl$32);
-            _el$71.$$click = select;
-            _$insert(_el$71, content);
+            var _el$67 = _$getNextElement(_tmpl$34);
+            _el$67.$$click = select;
+            _$insert(_el$67, content);
             _$effect(_p$ => {
-              var _v$55 = actionSlot()?.href,
-                _v$56 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                _v$57 = label();
-              _v$55 !== _p$.e && _$setAttribute(_el$71, "href", _p$.e = _v$55);
-              _v$56 !== _p$.t && _$setAttribute(_el$71, "data-visibility", _p$.t = _v$56);
-              _v$57 !== _p$.a && _$setAttribute(_el$71, "aria-label", _p$.a = _v$57);
+              var _v$57 = actionSlot()?.href,
+                _v$58 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$59 = label();
+              _v$57 !== _p$.e && _$setAttribute(_el$67, "href", _p$.e = _v$57);
+              _v$58 !== _p$.t && _$setAttribute(_el$67, "data-visibility", _p$.t = _v$58);
+              _v$59 !== _p$.a && _$setAttribute(_el$67, "aria-label", _p$.a = _v$59);
               return _p$;
             }, {
               e: undefined,
@@ -1234,7 +1251,7 @@ function AppWorkspaceSidebarItem(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$71;
+            return _el$67;
           }
         });
       }
@@ -1535,16 +1552,16 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          var _el$73 = _$getNextElement(_tmpl$34),
-            _el$74 = _el$73.firstChild;
-          _$spread(_el$73, _$mergeProps({
+          var _el$69 = _$getNextElement(_tmpl$36),
+            _el$70 = _el$69.firstChild;
+          _$spread(_el$69, _$mergeProps({
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
           }, () => iconAccessibility(item.iconLabel)), false, true);
-          _$effect(() => _$className(_el$74, iconClass(rowIcon())));
+          _$effect(() => _$className(_el$70, iconClass(rowIcon())));
           _$runHydrationEvents();
-          return _el$73;
+          return _el$69;
         }
       }), _$createComponent(Show, {
         get when() {
@@ -1552,49 +1569,51 @@ const AppWorkspaceNavTree = props => {
         },
         get fallback() {
           return (() => {
-            var _el$82 = _$getNextElement(_tmpl$38),
-              _el$83 = _el$82.firstChild;
-            _$insert(_el$83, () => item.label);
-            return _el$82;
+            var _el$78 = _$getNextElement(_tmpl$40),
+              _el$79 = _el$78.firstChild;
+            _$insert(_el$79, () => item.label);
+            _$effect(() => _$setAttribute(_el$78, "data-label", typeof item.label === "string" ? item.label : undefined));
+            return _el$78;
           })();
         },
         get children() {
-          var _el$75 = _$getNextElement(_tmpl$35),
-            _el$76 = _el$75.firstChild,
-            _el$77 = _el$76.firstChild,
-            _el$78 = _el$76.nextSibling;
-          _$insert(_el$77, () => item.label);
-          _$insert(_el$78, () => item.description);
-          return _el$75;
+          var _el$71 = _$getNextElement(_tmpl$37),
+            _el$72 = _el$71.firstChild,
+            _el$73 = _el$72.firstChild,
+            _el$74 = _el$72.nextSibling;
+          _$insert(_el$73, () => item.label);
+          _$insert(_el$74, () => item.description);
+          _$effect(() => _$setAttribute(_el$72, "data-label", typeof item.label === "string" ? item.label : undefined));
+          return _el$71;
         }
       }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          var _el$79 = _$getNextElement(_tmpl$36);
-          _$insert(_el$79, () => item.meta);
+          var _el$75 = _$getNextElement(_tmpl$38);
+          _$insert(_el$75, () => item.meta);
           _$effect(_p$ => {
-            var _v$61 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$62 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$61 !== _p$.e && _$className(_el$79, _p$.e = _v$61);
-            _v$62 !== _p$.t && _$setAttribute(_el$79, "data-visibility", _p$.t = _v$62);
+            var _v$63 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$64 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$63 !== _p$.e && _$className(_el$75, _p$.e = _v$63);
+            _v$64 !== _p$.t && _$setAttribute(_el$75, "data-visibility", _p$.t = _v$64);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$79;
+          return _el$75;
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          var _el$80 = _$getNextElement(_tmpl$37),
-            _el$81 = _el$80.firstChild;
-          _$effect(() => _$className(_el$81, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
-          return _el$80;
+          var _el$76 = _$getNextElement(_tmpl$39),
+            _el$77 = _el$76.firstChild;
+          _$effect(() => _$className(_el$77, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$76;
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1702,56 +1721,56 @@ const AppWorkspaceNavTree = props => {
         requestMove(target.move, false);
       };
       return (() => {
-        var _el$84 = _$getNextElement(_tmpl$40),
-          _el$86 = _el$84.firstChild,
-          [_el$87, _co$12] = _$getNextMarker(_el$86.nextSibling),
-          _el$88 = _el$87.nextSibling,
-          [_el$89, _co$13] = _$getNextMarker(_el$88.nextSibling);
-        _el$84.addEventListener("drop", onDrop);
-        _$addEventListener(_el$84, "dragleave", item.onDragLeave);
-        _el$84.addEventListener("dragover", onDragOver);
-        _$addEventListener(_el$84, "dragenter", item.onDragEnter);
-        _el$84.addEventListener("dragstart", onDragStart);
-        _el$84.$$keydown = onKeyDown;
-        _el$84.addEventListener("focus", () => setFocusedId(item.id));
+        var _el$80 = _$getNextElement(_tmpl$42),
+          _el$82 = _el$80.firstChild,
+          [_el$83, _co$10] = _$getNextMarker(_el$82.nextSibling),
+          _el$84 = _el$83.nextSibling,
+          [_el$85, _co$11] = _$getNextMarker(_el$84.nextSibling);
+        _el$80.addEventListener("drop", onDrop);
+        _$addEventListener(_el$80, "dragleave", item.onDragLeave);
+        _el$80.addEventListener("dragover", onDragOver);
+        _$addEventListener(_el$80, "dragenter", item.onDragEnter);
+        _el$80.addEventListener("dragstart", onDragStart);
+        _el$80.$$keydown = onKeyDown;
+        _el$80.addEventListener("focus", () => setFocusedId(item.id));
         var _ref$4 = treeItem;
-        typeof _ref$4 === "function" ? _$use(_ref$4, _el$84) : treeItem = _el$84;
-        _$setAttribute(_el$84, "aria-level", depth + 1);
-        _$setAttribute(_el$84, "data-k2b-nav-tree-parent-id", parentId);
-        _$insert(_el$84, row, _el$87, _co$12);
-        _$insert(_el$84, _$createComponent(Show, {
+        typeof _ref$4 === "function" ? _$use(_ref$4, _el$80) : treeItem = _el$80;
+        _$setAttribute(_el$80, "aria-level", depth + 1);
+        _$setAttribute(_el$80, "data-k2b-nav-tree-parent-id", parentId);
+        _$insert(_el$80, row, _el$83, _co$10);
+        _$insert(_el$80, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!hasChildren())() && isExpanded(item.id);
           },
           get children() {
-            var _el$85 = _$getNextElement(_tmpl$39);
-            _$insert(_el$85, () => renderItems(nested, depth + 1, item.id));
-            return _el$85;
+            var _el$81 = _$getNextElement(_tmpl$41);
+            _$insert(_el$81, () => renderItems(nested, depth + 1, item.id));
+            return _el$81;
           }
-        }), _el$89, _co$13);
+        }), _el$85, _co$11);
         _$effect(_p$ => {
-          var _v$63 = siblings().length,
-            _v$64 = place() + 1,
-            _v$65 = selected(),
-            _v$66 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$67 = item.disabled ? "true" : undefined,
-            _v$68 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$69 = movable() ? true : undefined,
-            _v$70 = item.id,
-            _v$71 = dragged()?.id === item.id ? "" : undefined,
-            _v$72 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
-            _v$73 = String(props.indented === false ? 0 : depth);
-          _v$63 !== _p$.e && _$setAttribute(_el$84, "aria-setsize", _p$.e = _v$63);
-          _v$64 !== _p$.t && _$setAttribute(_el$84, "aria-posinset", _p$.t = _v$64);
-          _v$65 !== _p$.a && _$setAttribute(_el$84, "aria-selected", _p$.a = _v$65);
-          _v$66 !== _p$.o && _$setAttribute(_el$84, "aria-expanded", _p$.o = _v$66);
-          _v$67 !== _p$.i && _$setAttribute(_el$84, "aria-disabled", _p$.i = _v$67);
-          _v$68 !== _p$.n && _$setAttribute(_el$84, "tabindex", _p$.n = _v$68);
-          _v$69 !== _p$.s && _$setAttribute(_el$84, "draggable", _p$.s = _v$69);
-          _v$70 !== _p$.h && _$setAttribute(_el$84, "data-k2b-nav-tree-id", _p$.h = _v$70);
-          _v$71 !== _p$.r && _$setAttribute(_el$84, "data-k2b-nav-tree-dragging", _p$.r = _v$71);
-          _v$72 !== _p$.d && _$setAttribute(_el$84, "data-k2b-nav-tree-drop", _p$.d = _v$72);
-          _v$73 !== _p$.l && _$setStyleProperty(_el$84, "--k2b-nav-tree-depth", _p$.l = _v$73);
+          var _v$65 = siblings().length,
+            _v$66 = place() + 1,
+            _v$67 = selected(),
+            _v$68 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$69 = item.disabled ? "true" : undefined,
+            _v$70 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$71 = movable() ? true : undefined,
+            _v$72 = item.id,
+            _v$73 = dragged()?.id === item.id ? "" : undefined,
+            _v$74 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
+            _v$75 = String(props.indented === false ? 0 : depth);
+          _v$65 !== _p$.e && _$setAttribute(_el$80, "aria-setsize", _p$.e = _v$65);
+          _v$66 !== _p$.t && _$setAttribute(_el$80, "aria-posinset", _p$.t = _v$66);
+          _v$67 !== _p$.a && _$setAttribute(_el$80, "aria-selected", _p$.a = _v$67);
+          _v$68 !== _p$.o && _$setAttribute(_el$80, "aria-expanded", _p$.o = _v$68);
+          _v$69 !== _p$.i && _$setAttribute(_el$80, "aria-disabled", _p$.i = _v$69);
+          _v$70 !== _p$.n && _$setAttribute(_el$80, "tabindex", _p$.n = _v$70);
+          _v$71 !== _p$.s && _$setAttribute(_el$80, "draggable", _p$.s = _v$71);
+          _v$72 !== _p$.h && _$setAttribute(_el$80, "data-k2b-nav-tree-id", _p$.h = _v$72);
+          _v$73 !== _p$.r && _$setAttribute(_el$80, "data-k2b-nav-tree-dragging", _p$.r = _v$73);
+          _v$74 !== _p$.d && _$setAttribute(_el$80, "data-k2b-nav-tree-drop", _p$.d = _v$74);
+          _v$75 !== _p$.l && _$setStyleProperty(_el$80, "--k2b-nav-tree-depth", _p$.l = _v$75);
           return _p$;
         }, {
           e: undefined,
@@ -1767,7 +1786,7 @@ const AppWorkspaceNavTree = props => {
           l: undefined
         });
         _$runHydrationEvents();
-        return _el$84;
+        return _el$80;
       })();
     }
   });
@@ -1792,62 +1811,62 @@ const AppWorkspaceNavTree = props => {
     });
   });
   return (() => {
-    var _el$90 = _$getNextElement(_tmpl$41);
-    _el$90.addEventListener("dragend", endDrag);
-    _el$90.addEventListener("dragleave", event => {
+    var _el$86 = _$getNextElement(_tmpl$43);
+    _el$86.addEventListener("dragend", endDrag);
+    _el$86.addEventListener("dragleave", event => {
       if (!root?.contains(event.relatedTarget)) setDropTarget(null);
     });
-    _el$90.addEventListener("dragover", event => {
+    _el$86.addEventListener("dragover", event => {
       // Runs after the rows: a position no row claimed shows no gap.
       if (claimedDragOver !== event) setDropTarget(null);
     });
     var _ref$5 = root;
-    typeof _ref$5 === "function" ? _$use(_ref$5, _el$90) : root = _el$90;
-    _$insert(_el$90, () => renderItems(roots, 0));
+    typeof _ref$5 === "function" ? _$use(_ref$5, _el$86) : root = _el$86;
+    _$insert(_el$86, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$74 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$75 = props.ariaLabel;
-      _v$74 !== _p$.e && _$className(_el$90, _p$.e = _v$74);
-      _v$75 !== _p$.t && _$setAttribute(_el$90, "aria-label", _p$.t = _v$75);
+      var _v$76 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$77 = props.ariaLabel;
+      _v$76 !== _p$.e && _$className(_el$86, _p$.e = _v$76);
+      _v$77 !== _p$.t && _$setAttribute(_el$86, "aria-label", _p$.t = _v$77);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$90;
+    return _el$86;
   })();
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => (() => {
-  var _el$91 = _$getNextElement(_tmpl$42),
-    _el$93 = _el$91.firstChild,
-    [_el$94, _co$14] = _$getNextMarker(_el$93.nextSibling),
-    _el$92 = _el$94.nextSibling;
-  _$spread(_el$91, _$mergeProps({
+  var _el$87 = _$getNextElement(_tmpl$44),
+    _el$89 = _el$87.firstChild,
+    [_el$90, _co$12] = _$getNextMarker(_el$89.nextSibling),
+    _el$88 = _el$90.nextSibling;
+  _$spread(_el$87, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$91, _$createComponent(Show, {
+  _$insert(_el$87, _$createComponent(Show, {
     get when() {
       return props.title;
     },
     children: title => (() => {
-      var _el$95 = _$getNextElement(_tmpl$15);
-      _$insert(_el$95, title);
-      return _el$95;
+      var _el$91 = _$getNextElement(_tmpl$15);
+      _$insert(_el$91, title);
+      return _el$91;
     })()
-  }), _el$94, _co$14);
-  _$insert(_el$92, () => props.children);
-  _$effect(() => _$setAttribute(_el$92, "data-columns", props.columns ?? 2));
+  }), _el$90, _co$12);
+  _$insert(_el$88, () => props.children);
+  _$effect(() => _$setAttribute(_el$88, "data-columns", props.columns ?? 2));
   _$runHydrationEvents();
-  return _el$91;
+  return _el$87;
 })();
 const AppWorkspaceSidebarIconAction = props => {
   const content = (() => {
-    var _el$96 = _$getNextElement(_tmpl$43);
-    _$effect(() => _$className(_el$96, iconClass(props.icon)));
-    return _el$96;
+    var _el$92 = _$getNextElement(_tmpl$45);
+    _$effect(() => _$className(_el$92, iconClass(props.icon)));
+    return _el$92;
   })();
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
@@ -1860,8 +1879,8 @@ const AppWorkspaceSidebarIconAction = props => {
     ...modeAttrs(props.sidebarMode)
   });
   if (!props.href || props.disabled) return (() => {
-    var _el$97 = _$getNextElement(_tmpl$22);
-    _$spread(_el$97, _$mergeProps(attrs, {
+    var _el$93 = _$getNextElement(_tmpl$24);
+    _$spread(_el$93, _$mergeProps(attrs, {
       get disabled() {
         return props.disabled;
       },
@@ -1869,13 +1888,13 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$97, content);
+    _$insert(_el$93, content);
     _$runHydrationEvents();
-    return _el$97;
+    return _el$93;
   })();
   if (props.navigation !== "enhanced" || !props.onNavigate) return (() => {
-    var _el$98 = _$getNextElement(_tmpl$23);
-    _$spread(_el$98, _$mergeProps({
+    var _el$94 = _$getNextElement(_tmpl$25);
+    _$spread(_el$94, _$mergeProps({
       get href() {
         return props.href;
       }
@@ -1884,9 +1903,9 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$98, content);
+    _$insert(_el$94, content);
     _$runHydrationEvents();
-    return _el$98;
+    return _el$94;
   })();
   return _$createComponent(Link, _$mergeProps({
     get href() {
@@ -1924,12 +1943,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$99 = _$getNextElement(_tmpl$45),
-      _el$101 = _el$99.firstChild,
-      [_el$102, _co$15] = _$getNextMarker(_el$101.nextSibling),
-      _el$103 = _el$102.nextSibling,
-      [_el$104, _co$16] = _$getNextMarker(_el$103.nextSibling);
-    _$insert(_el$99, _$createComponent(IconButton, {
+    var _el$95 = _$getNextElement(_tmpl$47),
+      _el$97 = _el$95.firstChild,
+      [_el$98, _co$13] = _$getNextMarker(_el$97.nextSibling),
+      _el$99 = _el$98.nextSibling,
+      [_el$100, _co$14] = _$getNextMarker(_el$99.nextSibling);
+    _$insert(_el$95, _$createComponent(IconButton, {
       "class": "k2b-app-workspace__head-toggle",
       get label() {
         return messages().showNavigation;
@@ -1940,10 +1959,10 @@ function AppWorkspaceHead(props) {
       "aria-expanded": "false",
       "data-app-workspace-sidebar-toggle": "",
       get children() {
-        return _$getNextElement(_tmpl$44);
+        return _$getNextElement(_tmpl$46);
       }
-    }), _el$102, _co$15);
-    _$insert(_el$99, _$createComponent(Show, {
+    }), _el$98, _co$13);
+    _$insert(_el$95, _$createComponent(Show, {
       get when() {
         return trail();
       },
@@ -1954,14 +1973,14 @@ function AppWorkspaceHead(props) {
         as: "p",
         fallback: true
       }), (() => {
-        var _el$105 = _$getNextElement(_tmpl$46);
-        _$setAttribute(_el$105, "data-k2b-server", isServer ? "" : undefined);
-        _$insert(_el$105, () => current().title);
-        return _el$105;
+        var _el$101 = _$getNextElement(_tmpl$48);
+        _$setAttribute(_el$101, "data-k2b-server", isServer ? "" : undefined);
+        _$insert(_el$101, () => current().title);
+        return _el$101;
       })()]
-    }), _el$104, _co$16);
-    _$effect(() => _$setAttribute(_el$99, "data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : undefined));
-    return _el$99;
+    }), _el$100, _co$14);
+    _$effect(() => _$setAttribute(_el$95, "data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : undefined));
+    return _el$95;
   })();
 }
 const AppWorkspace = props => {
@@ -1996,31 +2015,31 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          var _el$106 = _$getNextElement(_tmpl$47),
-            _el$107 = _el$106.firstChild,
-            [_el$108, _co$17] = _$getNextMarker(_el$107.nextSibling),
-            _el$109 = _el$108.nextSibling,
-            [_el$110, _co$18] = _$getNextMarker(_el$109.nextSibling);
+          var _el$102 = _$getNextElement(_tmpl$49),
+            _el$103 = _el$102.firstChild,
+            [_el$104, _co$15] = _$getNextMarker(_el$103.nextSibling),
+            _el$105 = _el$104.nextSibling,
+            [_el$106, _co$16] = _$getNextMarker(_el$105.nextSibling);
           var _ref$6 = root;
-          typeof _ref$6 === "function" ? _$use(_ref$6, _el$106) : root = _el$106;
-          _$insert(_el$106, _$createComponent(AppWorkspaceHead, {
+          typeof _ref$6 === "function" ? _$use(_ref$6, _el$102) : root = _el$102;
+          _$insert(_el$102, _$createComponent(AppWorkspaceHead, {
             sidebarId: sidebarId,
             nested: nested
-          }), _el$108, _co$17);
-          _$insert(_el$106, () => props.children, _el$110, _co$18);
+          }), _el$104, _co$15);
+          _$insert(_el$102, () => props.children, _el$106, _co$16);
           _$effect(_p$ => {
-            var _v$76 = `k2b-app-workspace ${props.class ?? ""}`,
-              _v$77 = props.mobileSurface,
-              _v$78 = props.flat ? "true" : undefined,
-              _v$79 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-              _v$80 = props.resizable === false ? "false" : "true",
-              _v$81 = appWorkspaceLayoutStyle(initialLayoutState());
-            _v$76 !== _p$.e && _$className(_el$106, _p$.e = _v$76);
-            _v$77 !== _p$.t && _$setAttribute(_el$106, "data-mobile-surface", _p$.t = _v$77);
-            _v$78 !== _p$.a && _$setAttribute(_el$106, "data-flat", _p$.a = _v$78);
-            _v$79 !== _p$.o && _$setAttribute(_el$106, "data-sidebar-collapsed", _p$.o = _v$79);
-            _v$80 !== _p$.i && _$setAttribute(_el$106, "data-workspace-resizable", _p$.i = _v$80);
-            _p$.n = _$style(_el$106, _v$81, _p$.n);
+            var _v$78 = `k2b-app-workspace ${props.class ?? ""}`,
+              _v$79 = props.mobileSurface,
+              _v$80 = props.flat ? "true" : undefined,
+              _v$81 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+              _v$82 = props.resizable === false ? "false" : "true",
+              _v$83 = appWorkspaceLayoutStyle(initialLayoutState());
+            _v$78 !== _p$.e && _$className(_el$102, _p$.e = _v$78);
+            _v$79 !== _p$.t && _$setAttribute(_el$102, "data-mobile-surface", _p$.t = _v$79);
+            _v$80 !== _p$.a && _$setAttribute(_el$102, "data-flat", _p$.a = _v$80);
+            _v$81 !== _p$.o && _$setAttribute(_el$102, "data-sidebar-collapsed", _p$.o = _v$81);
+            _v$82 !== _p$.i && _$setAttribute(_el$102, "data-workspace-resizable", _p$.i = _v$82);
+            _p$.n = _$style(_el$102, _v$83, _p$.n);
             return _p$;
           }, {
             e: undefined,
@@ -2030,7 +2049,7 @@ const AppWorkspace = props => {
             i: undefined,
             n: undefined
           });
-          return _el$106;
+          return _el$102;
         }
       });
     }
@@ -2045,10 +2064,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Content = props => (() => {
-  var _el$111 = _$getNextElement(_tmpl$2);
-  _$insert(_el$111, () => props.children);
-  _$effect(() => _$className(_el$111, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$111;
+  var _el$107 = _$getNextElement(_tmpl$2);
+  _$insert(_el$107, () => props.children);
+  _$effect(() => _$className(_el$107, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$107;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
@@ -2056,6 +2075,7 @@ AppWorkspace.Detail = AppWorkspaceDetail;
 AppWorkspace.BottomDrawer = AppWorkspaceBottomDrawer;
 AppWorkspace.Sidebar = AppWorkspaceSidebar;
 AppWorkspace.SidebarDesktop = AppWorkspaceSidebarDesktop;
+AppWorkspace.SidebarSwitcher = AppWorkspaceSidebarSwitcher;
 AppWorkspace.SidebarSection = AppWorkspaceSidebarSection;
 AppWorkspace.SidebarBody = AppWorkspaceSidebarBody;
 AppWorkspace.SidebarFooter = AppWorkspaceSidebarFooter;