@k2b/ui 0.2.0 → 0.4.0

package/dist/browser/layout/AppWorkspace.js

@@ -1,8 +1,8 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
 import { addEventListener as _$addEventListener } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
@@ -21,47 +21,49 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__main-primary data-workspace-main-region=main>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<section>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<aside>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<nav class=k2b-app-workspace__sidebar-mobile><details><summary><span class=k2b-app-workspace__sidebar-mobile-trigger><i class="ti ti-menu-2"aria-hidden=true></i><span></span></span><i class="ti ti-chevron-down"aria-hidden=true></i></summary><!$><!/>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<aside><div class=k2b-app-workspace__sidebar-desktop>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-mobile-items>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<footer>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<section><!$><!/><!$><!/>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<h2>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div><button type=button class=k2b-app-workspace__sidebar-item-main></button><!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div><a class=k2b-app-workspace__sidebar-item-main></a><!$><!/>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<button type=button>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<a>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true><i>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div role=tree>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
+  _tmpl$6 = /*#__PURE__*/_$template(`<aside><div class=k2b-app-workspace__sidebar-desktop>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<footer>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-section-count>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-section-toggle><!$><!/><i aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-section-content>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<h2>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
+  _tmpl$21 = /*#__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$22 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true><i>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div role=tree>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
 import { Link } from "@k2b/ssr/nav";
-import { children, createContext, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, useContext } from "solid-js";
+import { children, createContext, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
 import { useUiMessages } from "../intl/messages";
 import { installAppWorkspaceController } from "./app-workspace-controller";
 import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable } from "./app-workspace-state";
+import { SidebarItemPreview } from "./SidebarItemPreview";
+import { createScrollFade } from "./scroll-fade";
 import { assertStableUiId, assertUniqueStableUiIds } from "./stable-id";
 const ResizeContext = createContext(true);
 const LayoutStateContext = createContext(null);
-const SidebarModeContext = createContext("desktop");
 const MAIN_PANE = Symbol("AppWorkspace.MainPane");
-const SIDEBAR_MOBILE_TRIGGER = Symbol("AppWorkspace.SidebarMobileTrigger");
-const SIDEBAR_MOBILE = Symbol("AppWorkspace.SidebarMobile");
 const SIDEBAR_DESKTOP = Symbol("AppWorkspace.SidebarDesktop");
 const SIDEBAR_ITEM_ICON = Symbol("AppWorkspace.SidebarItemIcon");
 const SIDEBAR_ITEM_LABEL = Symbol("AppWorkspace.SidebarItemLabel");
@@ -77,7 +79,7 @@ const flatten = value => {
   return value === null || value === undefined || typeof value === "boolean" ? [] : [value];
 };
 const mainPaneSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === MAIN_PANE);
-const sidebarChildSlot = value => Boolean(value && typeof value === "object" && "kind" in value && [SIDEBAR_MOBILE_TRIGGER, SIDEBAR_MOBILE, SIDEBAR_DESKTOP].includes(value.kind));
+const sidebarChildSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === SIDEBAR_DESKTOP);
 const sidebarItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && [SIDEBAR_ITEM_ICON, SIDEBAR_ITEM_LABEL, SIDEBAR_ITEM_META, SIDEBAR_ITEM_ACTION].includes(value.kind));
 const navTreeItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === NAV_TREE_ITEM);
 function ResizeHandle(props) {
@@ -167,7 +169,7 @@ function AppWorkspaceMain(props) {
     const result = [];
     all.forEach((value, index) => {
       if (mainPaneSlot(value)) {
-        if (value.props.open !== false) result.push({
+        result.push({
           type: "pane",
           index,
           slot: value
@@ -183,7 +185,7 @@ function AppWorkspaceMain(props) {
     });
     return result;
   });
-  const anchorRegion = createMemo(() => regions().find(candidate => candidate.type === "primary") ?? regions()[0]);
+  const anchorRegion = createMemo(() => regions().find(candidate => candidate.type === "primary") ?? regions().find(candidate => candidate.type === "pane" && candidate.slot.props.open !== false));
   // Presence of a MainPane slot — not of an *open* one — decides the split
   // layout. Deriving it from `regions()` made a workspace whose panes are all
   // closed fall back to `resolved()`, which renders the raw slot objects.
@@ -197,6 +199,9 @@ function AppWorkspaceMain(props) {
       get ["data-mobile-pane"]() {
         return props.mobilePane;
       },
+      get ["data-scroll-fade-mode"]() {
+        return !hasPanes() && props.scroll !== false && props.scrollFade !== false ? "both" : undefined;
+      },
       get ["data-scroll"]() {
         return props.scroll === false ? "false" : undefined;
       },
@@ -212,82 +217,121 @@ function AppWorkspaceMain(props) {
         return resolved();
       },
       get children() {
-        return regions().flatMap(region => {
-          const anchor = anchorRegion();
-          const activeMobilePane = props.mobilePane ?? (anchor?.type === "pane" ? anchor.slot.props.id : "main");
-          if (region.type === "primary") {
-            return (() => {
-              var _el$3 = _$getNextElement(_tmpl$3);
-              _$setAttribute(_el$3, "data-workspace-mobile-active", activeMobilePane === "main" ? "true" : "false");
-              _$insert(_el$3, () => region.children);
-              return _el$3;
-            })();
-          }
-          const pane = region.slot;
-          const panelId = assertStableUiId(pane.props.id, "AppWorkspace.MainPane id");
-          const variable = appWorkspacePanelVariable("pane", panelId);
-          const isAnchor = region === anchor;
-          const resizable = !isAnchor && (pane.props.resizable ?? rootResizable);
-          const defaultSize = pane.props.defaultSize ?? APP_WORKSPACE_PANE_DEFAULT;
-          const minSize = pane.props.minSize ?? APP_WORKSPACE_PANE_MIN;
-          const maxSize = Math.max(minSize, pane.props.maxSize ?? APP_WORKSPACE_PANE_MAX);
-          const content = (() => {
-            var _el$4 = _$getNextElement(_tmpl$4);
-            _$setAttribute(_el$4, "data-workspace-panel-id", panelId);
-            _$setAttribute(_el$4, "data-workspace-resizable", resizable ? "true" : "false");
-            _$insert(_el$4, () => pane.props.children);
-            _$effect(_p$ => {
-              var _v$13 = pane.domId,
-                _v$14 = `k2b-app-workspace__main-pane ${isAnchor ? "is-primary" : ""} ${pane.props.class ?? ""}`,
-                _v$15 = pane.props.label,
-                _v$16 = pane.props.id,
-                _v$17 = activeMobilePane === pane.props.id ? "true" : "false",
-                _v$18 = pane.props.surface === "navigation" ? "navigation" : undefined,
-                _v$19 = pane.props.scroll === false ? "false" : undefined,
-                _v$20 = isAnchor ? undefined : {
-                  "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize}px)`
-                };
-              _v$13 !== _p$.e && _$setAttribute(_el$4, "id", _p$.e = _v$13);
-              _v$14 !== _p$.t && _$className(_el$4, _p$.t = _v$14);
-              _v$15 !== _p$.a && _$setAttribute(_el$4, "aria-label", _p$.a = _v$15);
-              _v$16 !== _p$.o && _$setAttribute(_el$4, "data-workspace-main-region", _p$.o = _v$16);
-              _v$17 !== _p$.i && _$setAttribute(_el$4, "data-workspace-mobile-active", _p$.i = _v$17);
-              _v$18 !== _p$.n && _$setAttribute(_el$4, "data-surface", _p$.n = _v$18);
-              _v$19 !== _p$.s && _$setAttribute(_el$4, "data-scroll", _p$.s = _v$19);
-              _p$.h = _$style(_el$4, _v$20, _p$.h);
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined,
-              a: undefined,
-              o: undefined,
-              i: undefined,
-              n: undefined,
-              s: undefined,
-              h: undefined
-            });
-            return _el$4;
-          })();
-          if (!resizable) return content;
-          const before = region.index < (anchor?.index ?? 0);
-          const handle = _$createComponent(ResizeHandle, {
-            kind: "pane",
-            edge: before ? "end" : "start",
-            get controls() {
-              return pane.domId;
-            },
-            panelId: panelId,
-            defaultSize: defaultSize,
-            minSize: minSize,
-            maxSize: maxSize,
-            get shadow() {
-              return pane.props.resizeShadow !== false;
-            },
-            get label() {
-              return `Resize ${pane.props.label}`;
+        return _$createComponent(For, {
+          get each() {
+            return regions();
+          },
+          children: region => {
+            const activeMobilePane = () => {
+              const anchor = anchorRegion();
+              return props.mobilePane ?? (anchor?.type === "pane" ? anchor.slot.props.id : "main");
+            };
+            if (region.type === "primary") {
+              return (() => {
+                var _el$3 = _$getNextElement(_tmpl$3);
+                _$insert(_el$3, () => region.children);
+                _$effect(() => _$setAttribute(_el$3, "data-workspace-mobile-active", activeMobilePane() === "main" ? "true" : "false"));
+                return _el$3;
+              })();
             }
-          });
-          return before ? [content, handle] : [handle, content];
+            const pane = region.slot;
+            const panelId = assertStableUiId(pane.props.id, "AppWorkspace.MainPane id");
+            const variable = appWorkspacePanelVariable("pane", panelId);
+            const isAnchor = () => region === anchorRegion();
+            const resizable = () => !isAnchor() && (pane.props.resizable ?? rootResizable);
+            const defaultSize = () => pane.props.defaultSize ?? APP_WORKSPACE_PANE_DEFAULT;
+            const minSize = () => pane.props.minSize ?? APP_WORKSPACE_PANE_MIN;
+            const maxSize = () => Math.max(minSize(), pane.props.maxSize ?? APP_WORKSPACE_PANE_MAX);
+            const before = () => region.index < (anchorRegion()?.index ?? 0);
+            const handle = () => _$createComponent(ResizeHandle, {
+              kind: "pane",
+              get edge() {
+                return before() ? "end" : "start";
+              },
+              get controls() {
+                return pane.domId;
+              },
+              panelId: panelId,
+              get defaultSize() {
+                return defaultSize();
+              },
+              get minSize() {
+                return minSize();
+              },
+              get maxSize() {
+                return maxSize();
+              },
+              get shadow() {
+                return pane.props.resizeShadow !== false;
+              },
+              get label() {
+                return `Resize ${pane.props.label}`;
+              }
+            });
+            return _$createComponent(Show, {
+              get when() {
+                return pane.props.open !== false;
+              },
+              get children() {
+                return [_$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => !!resizable())() && !before();
+                  },
+                  get children() {
+                    return handle();
+                  }
+                }), (() => {
+                  var _el$4 = _$getNextElement(_tmpl$4);
+                  _$setAttribute(_el$4, "data-workspace-panel-id", panelId);
+                  _$insert(_el$4, () => pane.props.children);
+                  _$effect(_p$ => {
+                    var _v$13 = pane.domId,
+                      _v$14 = `k2b-app-workspace__main-pane ${isAnchor() ? "is-primary" : ""} ${pane.props.class ?? ""}`,
+                      _v$15 = pane.props.label,
+                      _v$16 = pane.props.id,
+                      _v$17 = activeMobilePane() === pane.props.id ? "true" : "false",
+                      _v$18 = resizable() ? "true" : "false",
+                      _v$19 = pane.props.surface === "navigation" ? "navigation" : undefined,
+                      _v$20 = pane.props.scroll === false ? "false" : undefined,
+                      _v$21 = pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : undefined,
+                      _v$22 = isAnchor() ? undefined : {
+                        "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize()}px)`
+                      };
+                    _v$13 !== _p$.e && _$setAttribute(_el$4, "id", _p$.e = _v$13);
+                    _v$14 !== _p$.t && _$className(_el$4, _p$.t = _v$14);
+                    _v$15 !== _p$.a && _$setAttribute(_el$4, "aria-label", _p$.a = _v$15);
+                    _v$16 !== _p$.o && _$setAttribute(_el$4, "data-workspace-main-region", _p$.o = _v$16);
+                    _v$17 !== _p$.i && _$setAttribute(_el$4, "data-workspace-mobile-active", _p$.i = _v$17);
+                    _v$18 !== _p$.n && _$setAttribute(_el$4, "data-workspace-resizable", _p$.n = _v$18);
+                    _v$19 !== _p$.s && _$setAttribute(_el$4, "data-surface", _p$.s = _v$19);
+                    _v$20 !== _p$.h && _$setAttribute(_el$4, "data-scroll", _p$.h = _v$20);
+                    _v$21 !== _p$.r && _$setAttribute(_el$4, "data-scroll-fade-mode", _p$.r = _v$21);
+                    _p$.d = _$style(_el$4, _v$22, _p$.d);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined,
+                    a: undefined,
+                    o: undefined,
+                    i: undefined,
+                    n: undefined,
+                    s: undefined,
+                    h: undefined,
+                    r: undefined,
+                    d: undefined
+                  });
+                  return _el$4;
+                })(), _$createComponent(Show, {
+                  get when() {
+                    return _$memo(() => !!resizable())() && before();
+                  },
+                  get children() {
+                    return handle();
+                  }
+                })];
+              }
+            });
+          }
         });
       }
     }));
@@ -347,22 +391,22 @@ function AppWorkspaceDetail(props) {
     var _el$5 = _$getNextElement(_tmpl$5);
     _$insert(_el$5, () => props.children);
     _$effect(_p$ => {
-      var _v$21 = domId(),
-        _v$22 = `k2b-app-workspace__detail ${props.class ?? ""}`,
-        _v$23 = props.width ?? "md",
-        _v$24 = panelId(),
-        _v$25 = resizable() ? "true" : "false",
-        _v$26 = !props.open,
-        _v$27 = `var(${variable()}, ${defaultWidth()}px)`,
-        _v$28 = props.viewTransitionName;
-      _v$21 !== _p$.e && _$setAttribute(_el$5, "id", _p$.e = _v$21);
-      _v$22 !== _p$.t && _$className(_el$5, _p$.t = _v$22);
-      _v$23 !== _p$.a && _$setAttribute(_el$5, "data-width", _p$.a = _v$23);
-      _v$24 !== _p$.o && _$setAttribute(_el$5, "data-workspace-panel-id", _p$.o = _v$24);
-      _v$25 !== _p$.i && _$setAttribute(_el$5, "data-workspace-resizable", _p$.i = _v$25);
-      _v$26 !== _p$.n && _$setProperty(_el$5, "hidden", _p$.n = _v$26);
-      _v$27 !== _p$.s && _$setStyleProperty(_el$5, "--k2b-workspace-panel-size", _p$.s = _v$27);
-      _v$28 !== _p$.h && _$setStyleProperty(_el$5, "view-transition-name", _p$.h = _v$28);
+      var _v$23 = domId(),
+        _v$24 = `k2b-app-workspace__detail ${props.class ?? ""}`,
+        _v$25 = props.width ?? "md",
+        _v$26 = panelId(),
+        _v$27 = resizable() ? "true" : "false",
+        _v$28 = !props.open,
+        _v$29 = `var(${variable()}, ${defaultWidth()}px)`,
+        _v$30 = props.viewTransitionName;
+      _v$23 !== _p$.e && _$setAttribute(_el$5, "id", _p$.e = _v$23);
+      _v$24 !== _p$.t && _$className(_el$5, _p$.t = _v$24);
+      _v$25 !== _p$.a && _$setAttribute(_el$5, "data-width", _p$.a = _v$25);
+      _v$26 !== _p$.o && _$setAttribute(_el$5, "data-workspace-panel-id", _p$.o = _v$26);
+      _v$27 !== _p$.i && _$setAttribute(_el$5, "data-workspace-resizable", _p$.i = _v$27);
+      _v$28 !== _p$.n && _$setProperty(_el$5, "hidden", _p$.n = _v$28);
+      _v$29 !== _p$.s && _$setStyleProperty(_el$5, "--k2b-workspace-panel-size", _p$.s = _v$29);
+      _v$30 !== _p$.h && _$setStyleProperty(_el$5, "view-transition-name", _p$.h = _v$30);
       return _p$;
     }, {
       e: undefined,
@@ -427,22 +471,22 @@ function AppWorkspaceBottomDrawer(props) {
     var _el$6 = _$getNextElement(_tmpl$5);
     _$insert(_el$6, () => props.children);
     _$effect(_p$ => {
-      var _v$29 = domId(),
-        _v$30 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
-        _v$31 = props.height ?? "md",
-        _v$32 = panelId(),
-        _v$33 = resizable() ? "true" : "false",
-        _v$34 = !props.open,
-        _v$35 = `var(${variable()}, ${defaultHeight()}px)`,
-        _v$36 = props.viewTransitionName;
-      _v$29 !== _p$.e && _$setAttribute(_el$6, "id", _p$.e = _v$29);
-      _v$30 !== _p$.t && _$className(_el$6, _p$.t = _v$30);
-      _v$31 !== _p$.a && _$setAttribute(_el$6, "data-height", _p$.a = _v$31);
-      _v$32 !== _p$.o && _$setAttribute(_el$6, "data-workspace-panel-id", _p$.o = _v$32);
-      _v$33 !== _p$.i && _$setAttribute(_el$6, "data-workspace-resizable", _p$.i = _v$33);
-      _v$34 !== _p$.n && _$setProperty(_el$6, "hidden", _p$.n = _v$34);
-      _v$35 !== _p$.s && _$setStyleProperty(_el$6, "--k2b-workspace-panel-size", _p$.s = _v$35);
-      _v$36 !== _p$.h && _$setStyleProperty(_el$6, "view-transition-name", _p$.h = _v$36);
+      var _v$31 = domId(),
+        _v$32 = `k2b-app-workspace__drawer ${props.class ?? ""}`,
+        _v$33 = props.height ?? "md",
+        _v$34 = panelId(),
+        _v$35 = resizable() ? "true" : "false",
+        _v$36 = !props.open,
+        _v$37 = `var(${variable()}, ${defaultHeight()}px)`,
+        _v$38 = props.viewTransitionName;
+      _v$31 !== _p$.e && _$setAttribute(_el$6, "id", _p$.e = _v$31);
+      _v$32 !== _p$.t && _$className(_el$6, _p$.t = _v$32);
+      _v$33 !== _p$.a && _$setAttribute(_el$6, "data-height", _p$.a = _v$33);
+      _v$34 !== _p$.o && _$setAttribute(_el$6, "data-workspace-panel-id", _p$.o = _v$34);
+      _v$35 !== _p$.i && _$setAttribute(_el$6, "data-workspace-resizable", _p$.i = _v$35);
+      _v$36 !== _p$.n && _$setProperty(_el$6, "hidden", _p$.n = _v$36);
+      _v$37 !== _p$.s && _$setStyleProperty(_el$6, "--k2b-workspace-panel-size", _p$.s = _v$37);
+      _v$38 !== _p$.h && _$setStyleProperty(_el$6, "view-transition-name", _p$.h = _v$38);
       return _p$;
     }, {
       e: undefined,
@@ -457,10 +501,6 @@ function AppWorkspaceBottomDrawer(props) {
     return _el$6;
   })()];
 }
-const AppWorkspaceSidebarMobileTrigger = props => ({
-  kind: SIDEBAR_MOBILE_TRIGGER,
-  ...props
-});
 function AppWorkspaceSidebar(props) {
   const rootResizable = useContext(ResizeContext);
   const resizable = () => props.resizable ?? rootResizable;
@@ -471,51 +511,21 @@ function AppWorkspaceSidebar(props) {
   const domId = `k2b-workspace-sidebar-${generatedId}`;
   const resolved = children(() => props.children);
   const slots = createMemo(() => flatten(resolved()).filter(sidebarChildSlot));
-  const mobileTrigger = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_MOBILE_TRIGGER));
-  const mobile = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_MOBILE));
   const desktop = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_DESKTOP));
-  return [_$createComponent(Show, {
-    get when() {
-      return _$memo(() => !!mobileTrigger())() && mobile();
-    },
-    get children() {
-      var _el$7 = _$getNextElement(_tmpl$6),
-        _el$8 = _el$7.firstChild,
-        _el$9 = _el$8.firstChild,
-        _el$0 = _el$9.firstChild,
-        _el$1 = _el$0.firstChild,
-        _el$10 = _el$1.nextSibling,
-        _el$11 = _el$9.nextSibling,
-        [_el$12, _co$] = _$getNextMarker(_el$11.nextSibling);
-      _$insert(_el$10, () => mobileTrigger().label);
-      _$insert(_el$8, _$createComponent(SidebarModeContext.Provider, {
-        value: "mobile",
-        get children() {
-          return mobile().children;
-        }
-      }), _el$12, _co$);
-      _$effect(() => _$setAttribute(_el$7, "aria-label", mobileTrigger().label));
-      return _el$7;
-    }
-  }), (() => {
-    var _el$13 = _$getNextElement(_tmpl$7),
-      _el$14 = _el$13.firstChild;
-    _$setAttribute(_el$13, "id", domId);
-    _$insert(_el$14, _$createComponent(SidebarModeContext.Provider, {
-      value: "desktop",
-      get children() {
-        return desktop()?.children;
-      }
-    }));
+  return [(() => {
+    var _el$7 = _$getNextElement(_tmpl$6),
+      _el$8 = _el$7.firstChild;
+    _$setAttribute(_el$7, "id", domId);
+    _$insert(_el$8, () => desktop()?.children);
     _$effect(_p$ => {
-      var _v$37 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
-        _v$38 = mobileTrigger()?.label,
-        _v$39 = resizable() ? "true" : "false",
-        _v$40 = props.collapsible ? "true" : "false";
-      _v$37 !== _p$.e && _$className(_el$13, _p$.e = _v$37);
-      _v$38 !== _p$.t && _$setAttribute(_el$13, "aria-label", _p$.t = _v$38);
-      _v$39 !== _p$.a && _$setAttribute(_el$13, "data-workspace-resizable", _p$.a = _v$39);
-      _v$40 !== _p$.o && _$setAttribute(_el$13, "data-workspace-collapsible", _p$.o = _v$40);
+      var _v$39 = `k2b-app-workspace__sidebar ${props.class ?? ""}`,
+        _v$40 = props.label,
+        _v$41 = resizable() ? "true" : "false",
+        _v$42 = props.collapsible ? "true" : "false";
+      _v$39 !== _p$.e && _$className(_el$7, _p$.e = _v$39);
+      _v$40 !== _p$.t && _$setAttribute(_el$7, "aria-label", _p$.t = _v$40);
+      _v$41 !== _p$.a && _$setAttribute(_el$7, "data-workspace-resizable", _p$.a = _v$41);
+      _v$42 !== _p$.o && _$setAttribute(_el$7, "data-workspace-collapsible", _p$.o = _v$42);
       return _p$;
     }, {
       e: undefined,
@@ -523,7 +533,7 @@ function AppWorkspaceSidebar(props) {
       a: undefined,
       o: undefined
     });
-    return _el$13;
+    return _el$7;
   })(), _$createComponent(Show, {
     get when() {
       return resizable();
@@ -549,123 +559,167 @@ function AppWorkspaceSidebar(props) {
     }
   })];
 }
-const AppWorkspaceSidebarMobile = props => ({
-  kind: SIDEBAR_MOBILE,
-  children: props.children
-});
 const AppWorkspaceSidebarDesktop = props => ({
   kind: SIDEBAR_DESKTOP,
   children: props.children
 });
-const AppWorkspaceSidebarMobileItems = props => (() => {
-  var _el$15 = _$getNextElement(_tmpl$8);
-  _$spread(_el$15, _$mergeProps(() => scrollAttrs(props.scrollPreserveKey)), false, true);
-  _$insert(_el$15, () => props.children);
-  _$runHydrationEvents();
-  return _el$15;
-})();
-const AppWorkspaceSidebarBody = props => (() => {
-  var _el$16 = _$getNextElement(_tmpl$2);
-  _$spread(_el$16, _$mergeProps({
-    get ["class"]() {
-      return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
-    }
-  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$16, () => props.children);
-  _$runHydrationEvents();
-  return _el$16;
-})();
-const AppWorkspaceSidebarMobileBody = props => (() => {
-  var _el$17 = _$getNextElement(_tmpl$2);
-  _$spread(_el$17, _$mergeProps({
-    get ["class"]() {
-      return `k2b-app-workspace__sidebar-mobile-body ${props.class ?? ""}`;
-    }
-  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$17, () => props.children);
-  _$runHydrationEvents();
-  return _el$17;
-})();
+const AppWorkspaceSidebarBody = props => {
+  let body;
+  createScrollFade(() => body, () => props.scrollFade !== false);
+  return (() => {
+    var _el$9 = _$getNextElement(_tmpl$2);
+    var _ref$ = body;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$9) : body = _el$9;
+    _$spread(_el$9, _$mergeProps({
+      get ["class"]() {
+        return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
+      },
+      get ["data-scroll-fade-mode"]() {
+        return props.scrollFade !== false ? "both" : undefined;
+      }
+    }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), false, true);
+    _$insert(_el$9, () => props.children);
+    _$runHydrationEvents();
+    return _el$9;
+  })();
+};
 const AppWorkspaceSidebarFooter = props => (() => {
-  var _el$18 = _$getNextElement(_tmpl$9);
-  _$spread(_el$18, _$mergeProps({
+  var _el$0 = _$getNextElement(_tmpl$7);
+  _$spread(_el$0, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-footer ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$18, () => props.children);
+  _$insert(_el$0, () => props.children);
   _$runHydrationEvents();
-  return _el$18;
+  return _el$0;
 })();
-const AppWorkspaceSidebarSection = props => (() => {
-  var _el$19 = _$getNextElement(_tmpl$10),
-    _el$26 = _el$19.firstChild,
-    [_el$27, _co$4] = _$getNextMarker(_el$26.nextSibling),
-    _el$28 = _el$27.nextSibling,
-    [_el$29, _co$5] = _$getNextMarker(_el$28.nextSibling);
-  _$spread(_el$19, _$mergeProps({
-    get ["class"]() {
-      return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
+const AppWorkspaceSidebarSection = props => {
+  const [expanded, setExpanded] = createSignal(props.defaultOpen ?? true);
+  const open = () => !props.collapsible || (props.open ?? expanded());
+  const id = `sidebar-section-${createUniqueId()}`;
+  const title = () => [_$createComponent(Show, {
+    get when() {
+      return props.icon;
+    },
+    get children() {
+      var _el$1 = _$getNextElement(_tmpl$8),
+        _el$10 = _el$1.firstChild;
+      _$effect(() => _$className(_el$10, iconClass(props.icon)));
+      return _el$1;
     }
-  }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$19, _$createComponent(Show, {
+  }), _$memo(() => props.title), _$createComponent(Show, {
     get when() {
-      return props.title || props.actions;
+      return props.count !== undefined;
     },
     get children() {
-      var _el$20 = _$getNextElement(_tmpl$1),
-        _el$22 = _el$20.firstChild,
-        [_el$23, _co$2] = _$getNextMarker(_el$22.nextSibling),
-        _el$24 = _el$23.nextSibling,
-        [_el$25, _co$3] = _$getNextMarker(_el$24.nextSibling);
-      _$insert(_el$20, _$createComponent(Show, {
-        get when() {
-          return props.title;
-        },
-        children: title => (() => {
-          var _el$30 = _$getNextElement(_tmpl$11);
-          _$insert(_el$30, title);
-          return _el$30;
-        })()
-      }), _el$23, _co$2);
-      _$insert(_el$20, _$createComponent(Show, {
-        get when() {
-          return props.actions;
-        },
-        get children() {
-          var _el$21 = _$getNextElement(_tmpl$0);
-          _$insert(_el$21, () => props.actions);
-          return _el$21;
-        }
-      }), _el$25, _co$3);
-      return _el$20;
+      var _el$11 = _$getNextElement(_tmpl$9);
+      _$insert(_el$11, () => props.count);
+      return _el$11;
     }
-  }), _el$27, _co$4);
-  _$insert(_el$19, () => props.children, _el$29, _co$5);
-  _$runHydrationEvents();
-  return _el$19;
-})();
-const AppWorkspaceSidebarItemIcon = props => ({
-  kind: SIDEBAR_ITEM_ICON,
-  ...props
-});
-const AppWorkspaceSidebarItemLabel = props => ({
-  kind: SIDEBAR_ITEM_LABEL,
-  ...props
-});
-const AppWorkspaceSidebarItemMeta = props => ({
-  kind: SIDEBAR_ITEM_META,
-  ...props
-});
-const AppWorkspaceSidebarItemAction = props => ({
-  kind: SIDEBAR_ITEM_ACTION,
-  ...props
-});
+  })];
+  return (() => {
+    var _el$12 = _$getNextElement(_tmpl$11),
+      _el$24 = _el$12.firstChild,
+      [_el$25, _co$4] = _$getNextMarker(_el$24.nextSibling),
+      _el$23 = _el$25.nextSibling;
+    _$spread(_el$12, _$mergeProps({
+      get ["class"]() {
+        return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
+      },
+      get ["data-collapsible"]() {
+        return props.collapsible ? "true" : undefined;
+      }
+    }, () => modeAttrs(props.sidebarMode)), false, true);
+    _$insert(_el$12, _$createComponent(Show, {
+      get when() {
+        return props.title || props.actions;
+      },
+      get children() {
+        var _el$13 = _$getNextElement(_tmpl$10),
+          _el$19 = _el$13.firstChild,
+          [_el$20, _co$2] = _$getNextMarker(_el$19.nextSibling),
+          _el$21 = _el$20.nextSibling,
+          [_el$22, _co$3] = _$getNextMarker(_el$21.nextSibling);
+        _$insert(_el$13, _$createComponent(Show, {
+          get when() {
+            return props.collapsible;
+          },
+          get fallback() {
+            return _$createComponent(Show, {
+              get when() {
+                return props.title;
+              },
+              get children() {
+                var _el$26 = _$getNextElement(_tmpl$12);
+                _$insert(_el$26, title);
+                return _el$26;
+              }
+            });
+          },
+          get children() {
+            var _el$14 = _$getNextElement(_tmpl$0),
+              _el$16 = _el$14.firstChild,
+              [_el$17, _co$] = _$getNextMarker(_el$16.nextSibling),
+              _el$15 = _el$17.nextSibling;
+            _el$14.$$click = () => {
+              const next = !open();
+              setExpanded(next);
+              props.onOpenChange?.(next);
+            };
+            _$setAttribute(_el$14, "aria-controls", id);
+            _$insert(_el$14, title, _el$17, _co$);
+            _$effect(_p$ => {
+              var _v$43 = open(),
+                _v$44 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
+              _v$43 !== _p$.e && _$setAttribute(_el$14, "aria-expanded", _p$.e = _v$43);
+              _v$44 !== _p$.t && _$className(_el$15, _p$.t = _v$44);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            _$runHydrationEvents();
+            return _el$14;
+          }
+        }), _el$20, _co$2);
+        _$insert(_el$13, _$createComponent(Show, {
+          get when() {
+            return props.actions;
+          },
+          get children() {
+            var _el$18 = _$getNextElement(_tmpl$1);
+            _$insert(_el$18, () => props.actions);
+            return _el$18;
+          }
+        }), _el$22, _co$3);
+        return _el$13;
+      }
+    }), _el$25, _co$4);
+    _$setAttribute(_el$23, "id", id);
+    _$insert(_el$23, () => props.children);
+    _$effect(() => _$setProperty(_el$23, "hidden", !open()));
+    _$runHydrationEvents();
+    return _el$12;
+  })();
+};
+const AppWorkspaceSidebarItemIcon = props => mergeProps({
+  kind: SIDEBAR_ITEM_ICON
+}, props);
+const AppWorkspaceSidebarItemLabel = props => mergeProps({
+  kind: SIDEBAR_ITEM_LABEL
+}, props);
+const AppWorkspaceSidebarItemMeta = props => mergeProps({
+  kind: SIDEBAR_ITEM_META
+}, props);
+const AppWorkspaceSidebarItemAction = props => mergeProps({
+  kind: SIDEBAR_ITEM_ACTION
+}, props);
 const AppWorkspaceSidebarItemActions = props => (() => {
-  var _el$31 = _$getNextElement(_tmpl$12);
-  _$insert(_el$31, () => props.children);
-  _$effect(() => _$setAttribute(_el$31, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
-  return _el$31;
+  var _el$27 = _$getNextElement(_tmpl$13);
+  _$insert(_el$27, () => props.children);
+  _$effect(() => _$setAttribute(_el$27, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
+  return _el$27;
 })();
 /** Shared visual and semantic row frame for flat sidebar items and tree items. */
 function AppWorkspaceSidebarRow(props) {
@@ -675,7 +729,6 @@ function AppWorkspaceSidebarRow(props) {
     class: className(),
     title: props.title,
     "data-tone": props.tone,
-    "data-mode": props.mode,
     style: {
       "view-transition-name": props.viewTransitionName,
       "--k2b-sidebar-item-depth": props.depth === undefined ? undefined : String(Math.max(0, props.depth))
@@ -683,174 +736,125 @@ function AppWorkspaceSidebarRow(props) {
     ...data()
   });
   const current = () => props.active ? "page" : undefined;
-  if (props.hasActions) {
-    if (!props.href || props.disabled) {
-      return (() => {
-        var _el$32 = _$getNextElement(_tmpl$13),
-          _el$33 = _el$32.firstChild,
-          _el$34 = _el$33.nextSibling,
-          [_el$35, _co$6] = _$getNextMarker(_el$34.nextSibling);
-        _$spread(_el$32, _$mergeProps(common, {
-          get ["data-disabled"]() {
-            return props.disabled ? "true" : undefined;
+  const Control = control => {
+    const attrs = () => control.grouped ? {
+      class: "k2b-app-workspace__sidebar-item-main"
+    } : common();
+    return _$createComponent(Show, {
+      get when() {
+        return Boolean(props.href && !props.disabled);
+      },
+      get fallback() {
+        return (() => {
+          var _el$28 = _$getNextElement(_tmpl$14);
+          _$spread(_el$28, _$mergeProps(attrs, {
+            get tabIndex() {
+              return props.tabIndex;
+            },
+            get disabled() {
+              return props.disabled;
+            },
+            get onClick() {
+              return props.onClick;
+            }
+          }), false, true);
+          _$insert(_el$28, () => props.children);
+          _$runHydrationEvents();
+          return _el$28;
+        })();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return _$memo(() => props.navigation === "enhanced")() && Boolean(props.onNavigate);
+          },
+          get fallback() {
+            return (() => {
+              var _el$29 = _$getNextElement(_tmpl$15);
+              _$spread(_el$29, _$mergeProps({
+                get href() {
+                  return props.href;
+                }
+              }, attrs, {
+                get tabIndex() {
+                  return props.tabIndex;
+                },
+                get ["aria-current"]() {
+                  return current();
+                },
+                get onClick() {
+                  return props.onClick;
+                }
+              }), false, true);
+              _$insert(_el$29, () => props.children);
+              _$runHydrationEvents();
+              return _el$29;
+            })();
+          },
+          get children() {
+            return _$createComponent(Link, _$mergeProps({
+              get href() {
+                return props.href;
+              }
+            }, attrs, {
+              get tabIndex() {
+                return props.tabIndex;
+              },
+              get ["aria-current"]() {
+                return current();
+              },
+              get replace() {
+                return props.replace;
+              },
+              get scroll() {
+                return props.scroll;
+              },
+              get onNavigate() {
+                return props.onNavigate;
+              },
+              get onClick() {
+                return props.onClick;
+              },
+              get children() {
+                return props.children;
+              }
+            }));
           }
-        }), false, true);
-        _$addEventListener(_el$33, "click", props.onClick, true);
-        _$insert(_el$33, () => props.children);
-        _$insert(_el$32, () => props.actions, _el$35, _co$6);
-        _$effect(_p$ => {
-          var _v$41 = props.tabIndex,
-            _v$42 = props.disabled;
-          _v$41 !== _p$.e && _$setAttribute(_el$33, "tabindex", _p$.e = _v$41);
-          _v$42 !== _p$.t && _$setProperty(_el$33, "disabled", _p$.t = _v$42);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        _$runHydrationEvents();
-        return _el$32;
-      })();
-    }
-    if (props.navigation !== "enhanced" || !props.onNavigate) {
-      return (() => {
-        var _el$36 = _$getNextElement(_tmpl$14),
-          _el$37 = _el$36.firstChild,
-          _el$38 = _el$37.nextSibling,
-          [_el$39, _co$7] = _$getNextMarker(_el$38.nextSibling);
-        _$spread(_el$36, _$mergeProps(common), false, true);
-        _$addEventListener(_el$37, "click", props.onClick, true);
-        _$insert(_el$37, () => props.children);
-        _$insert(_el$36, () => props.actions, _el$39, _co$7);
-        _$effect(_p$ => {
-          var _v$43 = props.href,
-            _v$44 = props.tabIndex,
-            _v$45 = current();
-          _v$43 !== _p$.e && _$setAttribute(_el$37, "href", _p$.e = _v$43);
-          _v$44 !== _p$.t && _$setAttribute(_el$37, "tabindex", _p$.t = _v$44);
-          _v$45 !== _p$.a && _$setAttribute(_el$37, "aria-current", _p$.a = _v$45);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined
         });
-        _$runHydrationEvents();
-        return _el$36;
-      })();
-    }
-    return (() => {
-      var _el$40 = _$getNextElement(_tmpl$15),
-        _el$41 = _el$40.firstChild,
-        [_el$42, _co$8] = _$getNextMarker(_el$41.nextSibling),
-        _el$43 = _el$42.nextSibling,
-        [_el$44, _co$9] = _$getNextMarker(_el$43.nextSibling);
-      _$spread(_el$40, _$mergeProps(common), false, true);
-      _$insert(_el$40, _$createComponent(Link, {
-        get href() {
-          return props.href;
-        },
-        "class": "k2b-app-workspace__sidebar-item-main",
-        get tabIndex() {
-          return props.tabIndex;
-        },
-        get ["aria-current"]() {
-          return current();
-        },
-        get replace() {
-          return props.replace;
-        },
-        get scroll() {
-          return props.scroll;
-        },
-        get onNavigate() {
-          return props.onNavigate;
-        },
-        get onClick() {
-          return props.onClick;
-        },
-        get children() {
-          return props.children;
-        }
-      }), _el$42, _co$8);
-      _$insert(_el$40, () => props.actions, _el$44, _co$9);
-      _$runHydrationEvents();
-      return _el$40;
-    })();
-  }
-  if (!props.href || props.disabled) {
-    return (() => {
-      var _el$45 = _$getNextElement(_tmpl$16);
-      _$spread(_el$45, _$mergeProps(common, {
-        get tabIndex() {
-          return props.tabIndex;
-        },
-        get disabled() {
-          return props.disabled;
-        },
-        get onClick() {
-          return props.onClick;
-        }
-      }), false, true);
-      _$insert(_el$45, () => props.children);
-      _$runHydrationEvents();
-      return _el$45;
-    })();
-  }
-  if (props.navigation !== "enhanced" || !props.onNavigate) {
-    return (() => {
-      var _el$46 = _$getNextElement(_tmpl$17);
-      _$spread(_el$46, _$mergeProps({
-        get href() {
-          return props.href;
-        }
-      }, common, {
-        get tabIndex() {
-          return props.tabIndex;
-        },
-        get ["aria-current"]() {
-          return current();
-        },
-        get onClick() {
-          return props.onClick;
-        }
-      }), false, true);
-      _$insert(_el$46, () => props.children);
-      _$runHydrationEvents();
-      return _el$46;
-    })();
-  }
-  return _$createComponent(Link, _$mergeProps({
-    get href() {
-      return props.href;
-    }
-  }, common, {
-    get tabIndex() {
-      return props.tabIndex;
-    },
-    get ["aria-current"]() {
-      return current();
-    },
-    get replace() {
-      return props.replace;
-    },
-    get scroll() {
-      return props.scroll;
-    },
-    get onNavigate() {
-      return props.onNavigate;
+      }
+    });
+  };
+  return _$createComponent(Show, {
+    get when() {
+      return props.hasActions;
     },
-    get onClick() {
-      return props.onClick;
+    get fallback() {
+      return _$createComponent(Control, {
+        grouped: false
+      });
     },
     get children() {
-      return props.children;
+      var _el$30 = _$getNextElement(_tmpl$16),
+        _el$31 = _el$30.firstChild,
+        [_el$32, _co$5] = _$getNextMarker(_el$31.nextSibling),
+        _el$33 = _el$32.nextSibling,
+        [_el$34, _co$6] = _$getNextMarker(_el$33.nextSibling);
+      _$spread(_el$30, _$mergeProps(common, {
+        get ["data-disabled"]() {
+          return props.disabled ? "true" : undefined;
+        }
+      }), false, true);
+      _$insert(_el$30, _$createComponent(Control, {
+        grouped: true
+      }), _el$32, _co$5);
+      _$insert(_el$30, () => props.actions, _el$34, _co$6);
+      _$runHydrationEvents();
+      return _el$30;
     }
-  }));
+  });
 }
 function AppWorkspaceSidebarItem(props) {
   const messages = useUiMessages();
-  const mode = useContext(SidebarModeContext);
   const resolved = children(() => props.children);
   const resolvedActions = children(() => props.actions);
   const values = createMemo(() => flatten(resolved()));
@@ -867,89 +871,173 @@ function AppWorkspaceSidebarItem(props) {
   const metaVisibility = () => metaSlot()?.visibility ?? props.metaVisibility;
   const customActions = () => resolvedActions();
   const hasCustomActions = () => Boolean(customActions());
-  const hasAction = () => Boolean(actionSlot() || props.actionIcon || hasCustomActions());
+  const hasAction = () => Boolean(actionSlot() || props.actionIcon || hasCustomActions() || props.preview);
   const mainContent = [_$createComponent(Show, {
     get when() {
       return iconContent() || icon();
     },
     get children() {
-      var _el$47 = _$getNextElement(_tmpl$18);
-      _$insert(_el$47, () => iconContent() ?? (() => {
-        var _el$50 = _$getNextElement(_tmpl$20);
-        _$effect(() => _$className(_el$50, iconClass(icon())));
-        return _el$50;
+      var _el$35 = _$getNextElement(_tmpl$17);
+      _$insert(_el$35, () => iconContent() ?? (() => {
+        var _el$49 = _$getNextElement(_tmpl$22);
+        _$effect(() => _$className(_el$49, iconClass(icon())));
+        return _el$49;
       })());
-      return _el$47;
+      return _el$35;
     }
   }), (() => {
-    var _el$48 = _$getNextElement(_tmpl$19),
-      _el$49 = _el$48.firstChild;
-    _$insert(_el$49, () => label());
-    _$effect(() => _$setAttribute(_el$48, "data-marquee", labelSlot()?.marquee === false ? undefined : "true"));
-    return _el$48;
+    var _el$36 = _$getNextElement(_tmpl$21),
+      _el$45 = _el$36.firstChild,
+      [_el$46, _co$8] = _$getNextMarker(_el$45.nextSibling),
+      _el$42 = _el$46.nextSibling,
+      _el$43 = _el$42.firstChild,
+      _el$47 = _el$42.nextSibling,
+      [_el$48, _co$9] = _$getNextMarker(_el$47.nextSibling);
+    _$insert(_el$36, _$createComponent(Show, {
+      get when() {
+        return props.context || props.contextMeta;
+      },
+      get children() {
+        var _el$37 = _$getNextElement(_tmpl$19),
+          _el$38 = _el$37.firstChild,
+          _el$40 = _el$38.nextSibling,
+          [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling);
+        _$insert(_el$38, () => props.context);
+        _$insert(_el$37, _$createComponent(Show, {
+          get when() {
+            return props.contextMeta;
+          },
+          get children() {
+            var _el$39 = _$getNextElement(_tmpl$18);
+            _$insert(_el$39, () => props.contextMeta);
+            return _el$39;
+          }
+        }), _el$41, _co$7);
+        return _el$37;
+      }
+    }), _el$46, _co$8);
+    _$insert(_el$43, () => label());
+    _$insert(_el$36, _$createComponent(Show, {
+      get when() {
+        return props.description;
+      },
+      get children() {
+        var _el$44 = _$getNextElement(_tmpl$20);
+        _$insert(_el$44, () => props.description);
+        return _el$44;
+      }
+    }), _el$48, _co$9);
+    _$effect(() => _$setAttribute(_el$42, "data-marquee", labelSlot()?.marquee ?? props.variant !== "card" ? "true" : "false"));
+    return _el$36;
   })(), _$createComponent(Show, {
     get when() {
       return meta();
     },
     children: value => (() => {
-      var _el$51 = _$getNextElement(_tmpl$21);
-      _$insert(_el$51, value);
-      _$effect(() => _$setAttribute(_el$51, "data-visibility", metaVisibility() === "hover" ? "hover" : undefined));
-      return _el$51;
+      var _el$50 = _$getNextElement(_tmpl$23);
+      _$insert(_el$50, value);
+      _$effect(() => _$setAttribute(_el$50, "data-visibility", metaVisibility() === "hover" ? "hover" : undefined));
+      return _el$50;
     })()
   })];
   const singleAction = () => {
-    const slot = actionSlot();
-    if (!slot && !props.actionIcon) return null;
-    const content = slot?.children ?? (() => {
-      var _el$52 = _$getNextElement(_tmpl$20);
-      _$effect(() => _$className(_el$52, iconClass(slot?.icon ?? props.actionIcon, "ti-dots")));
-      return _el$52;
-    })();
-    const label = slot?.label ?? props.actionLabel ?? messages().rowAction;
+    const label = () => actionSlot()?.label ?? props.actionLabel ?? messages().rowAction;
     const select = event => {
-      event.preventDefault();
-      event.stopPropagation();
-      slot?.onSelect?.(event);
-      props.onActionClick?.(event);
-    };
-    // A row action that is a link must still navigate — only the row's own
-    // click handling is suppressed.
-    const follow = event => {
       event.stopPropagation();
-      slot?.onSelect?.(event);
+      if (actionSlot()?.disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (!actionSlot()?.href) event.preventDefault();
+      actionSlot()?.onSelect?.(event);
       props.onActionClick?.(event);
     };
-    return slot?.href ? (() => {
-      var _el$53 = _$getNextElement(_tmpl$22);
-      _el$53.$$click = follow;
-      _$setAttribute(_el$53, "aria-label", label);
-      _$insert(_el$53, content);
-      _$effect(_p$ => {
-        var _v$46 = slot.href,
-          _v$47 = slot.visibility === "hover" ? "hover" : undefined;
-        _v$46 !== _p$.e && _$setAttribute(_el$53, "href", _p$.e = _v$46);
-        _v$47 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$47);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined
-      });
-      _$runHydrationEvents();
-      return _el$53;
-    })() : (() => {
-      var _el$54 = _$getNextElement(_tmpl$23);
-      _el$54.$$click = select;
-      _$setAttribute(_el$54, "aria-label", label);
-      _$insert(_el$54, content);
-      _$effect(() => _$setAttribute(_el$54, "data-visibility", slot?.visibility === "hover" ? "hover" : undefined));
-      _$runHydrationEvents();
-      return _el$54;
+    const content = () => actionSlot()?.children ?? (() => {
+      var _el$51 = _$getNextElement(_tmpl$22);
+      _$effect(() => _$className(_el$51, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$51;
     })();
+    return _$createComponent(Show, {
+      get when() {
+        return Boolean(actionSlot() || props.actionIcon);
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!actionSlot()?.href)() && !actionSlot()?.disabled;
+          },
+          get fallback() {
+            return (() => {
+              var _el$53 = _$getNextElement(_tmpl$25);
+              _el$53.$$click = select;
+              _$insert(_el$53, content);
+              _$effect(_p$ => {
+                var _v$48 = actionSlot()?.disabled,
+                  _v$49 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$50 = label();
+                _v$48 !== _p$.e && _$setProperty(_el$53, "disabled", _p$.e = _v$48);
+                _v$49 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$49);
+                _v$50 !== _p$.a && _$setAttribute(_el$53, "aria-label", _p$.a = _v$50);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              _$runHydrationEvents();
+              return _el$53;
+            })();
+          },
+          get children() {
+            var _el$52 = _$getNextElement(_tmpl$24);
+            _el$52.$$click = select;
+            _$insert(_el$52, content);
+            _$effect(_p$ => {
+              var _v$45 = actionSlot()?.href,
+                _v$46 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$47 = label();
+              _v$45 !== _p$.e && _$setAttribute(_el$52, "href", _p$.e = _v$45);
+              _v$46 !== _p$.t && _$setAttribute(_el$52, "data-visibility", _p$.t = _v$46);
+              _v$47 !== _p$.a && _$setAttribute(_el$52, "aria-label", _p$.a = _v$47);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            _$runHydrationEvents();
+            return _el$52;
+          }
+        });
+      }
+    });
   };
-  const actions = () => [_$memo(customActions), _$memo(singleAction)];
+  const actions = () => [_$memo(customActions), _$memo(singleAction), _$createComponent(Show, {
+    get when() {
+      return props.preview;
+    },
+    children: preview => _$createComponent(SidebarItemPreview, {
+      get label() {
+        return preview().label;
+      },
+      get trigger() {
+        return preview().trigger;
+      },
+      get align() {
+        return preview().align;
+      },
+      get viewportSize() {
+        return preview().viewportSize;
+      },
+      get onOpenChange() {
+        return preview().onOpenChange;
+      },
+      get children() {
+        return preview().content;
+      }
+    })
+  })];
   return _$createComponent(AppWorkspaceSidebarRow, {
-    mode: mode,
     get hasActions() {
       return hasAction();
     },
@@ -1002,6 +1090,7 @@ function AppWorkspaceSidebarItem(props) {
       return {
         ...props.data,
         ...modeData(props.sidebarMode),
+        variant: props.variant ?? "row",
         "has-actions": hasCustomActions() ? "true" : undefined,
         "action-visibility": actionSlot()?.visibility === "hover" ? "hover" : undefined
       };
@@ -1015,7 +1104,6 @@ const AppWorkspaceNavTreeItem = props => ({
   ...props
 });
 const AppWorkspaceNavTree = props => {
-  const mode = useContext(SidebarModeContext);
   let root;
   const resolved = children(() => props.children);
   const roots = createMemo(() => navTreeItems(resolved()));
@@ -1058,9 +1146,11 @@ const AppWorkspaceNavTree = props => {
       preventScroll: true
     });
   };
+
+  // Items arrive through an accessor so a changed nested list reconciles rows by identity instead of rebuilding the list.
   const renderItems = (value, depth, parentId) => _$createComponent(For, {
     get each() {
-      return navTreeItems(value);
+      return navTreeItems(value());
     },
     children: item => {
       const nested = createMemo(() => navTreeItems(item.children));
@@ -1152,57 +1242,56 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          var _el$55 = _$getNextElement(_tmpl$24),
-            _el$56 = _el$55.firstChild;
+          var _el$54 = _$getNextElement(_tmpl$26),
+            _el$55 = _el$54.firstChild;
           _$effect(_p$ => {
-            var _v$48 = usesIconDisclosure() ? "" : undefined,
-              _v$49 = iconClass(rowIcon());
-            _v$48 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$48);
-            _v$49 !== _p$.t && _$className(_el$56, _p$.t = _v$49);
+            var _v$51 = usesIconDisclosure() ? "" : undefined,
+              _v$52 = iconClass(rowIcon());
+            _v$51 !== _p$.e && _$setAttribute(_el$54, "data-k2b-nav-tree-toggle", _p$.e = _v$51);
+            _v$52 !== _p$.t && _$className(_el$55, _p$.t = _v$52);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$55;
+          return _el$54;
         }
       }), (() => {
-        var _el$57 = _$getNextElement(_tmpl$19),
-          _el$58 = _el$57.firstChild;
-        _$insert(_el$58, () => item.label);
-        return _el$57;
+        var _el$56 = _$getNextElement(_tmpl$27),
+          _el$57 = _el$56.firstChild;
+        _$insert(_el$57, () => item.label);
+        return _el$56;
       })(), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          var _el$59 = _$getNextElement(_tmpl$25);
-          _$insert(_el$59, () => item.meta);
+          var _el$58 = _$getNextElement(_tmpl$28);
+          _$insert(_el$58, () => item.meta);
           _$effect(_p$ => {
-            var _v$50 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
-              _v$51 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$50 !== _p$.e && _$className(_el$59, _p$.e = _v$50);
-            _v$51 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$51);
+            var _v$53 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
+              _v$54 = item.metaVisibility === "hover" ? "hover" : undefined;
+            _v$53 !== _p$.e && _$className(_el$58, _p$.e = _v$53);
+            _v$54 !== _p$.t && _$setAttribute(_el$58, "data-visibility", _p$.t = _v$54);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$59;
+          return _el$58;
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          var _el$60 = _$getNextElement(_tmpl$26),
-            _el$61 = _el$60.firstChild;
-          _$effect(() => _$className(_el$61, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
-          return _el$60;
+          var _el$59 = _$getNextElement(_tmpl$29),
+            _el$60 = _el$59.firstChild;
+          _$effect(() => _$className(_el$60, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$59;
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
-        mode: mode,
         get hasActions() {
           return Boolean(item.actions);
         },
@@ -1255,43 +1344,43 @@ const AppWorkspaceNavTree = props => {
         children: rowContent
       });
       return (() => {
-        var _el$62 = _$getNextElement(_tmpl$28),
-          _el$64 = _el$62.firstChild,
-          [_el$65, _co$0] = _$getNextMarker(_el$64.nextSibling),
-          _el$66 = _el$65.nextSibling,
-          [_el$67, _co$1] = _$getNextMarker(_el$66.nextSibling);
-        _$addEventListener(_el$62, "drop", item.onDrop);
-        _$addEventListener(_el$62, "dragleave", item.onDragLeave);
-        _$addEventListener(_el$62, "dragover", item.onDragOver);
-        _$addEventListener(_el$62, "dragenter", item.onDragEnter);
-        _el$62.$$keydown = onKeyDown;
-        _el$62.addEventListener("focus", () => setFocusedId(item.id));
-        var _ref$ = treeItem;
-        typeof _ref$ === "function" ? _$use(_ref$, _el$62) : treeItem = _el$62;
-        _$setAttribute(_el$62, "aria-level", depth + 1);
-        _$setAttribute(_el$62, "data-k2b-nav-tree-parent-id", parentId);
-        _$insert(_el$62, row, _el$65, _co$0);
-        _$insert(_el$62, _$createComponent(Show, {
+        var _el$61 = _$getNextElement(_tmpl$31),
+          _el$63 = _el$61.firstChild,
+          [_el$64, _co$0] = _$getNextMarker(_el$63.nextSibling),
+          _el$65 = _el$64.nextSibling,
+          [_el$66, _co$1] = _$getNextMarker(_el$65.nextSibling);
+        _$addEventListener(_el$61, "drop", item.onDrop);
+        _$addEventListener(_el$61, "dragleave", item.onDragLeave);
+        _$addEventListener(_el$61, "dragover", item.onDragOver);
+        _$addEventListener(_el$61, "dragenter", item.onDragEnter);
+        _el$61.$$keydown = onKeyDown;
+        _el$61.addEventListener("focus", () => setFocusedId(item.id));
+        var _ref$2 = treeItem;
+        typeof _ref$2 === "function" ? _$use(_ref$2, _el$61) : treeItem = _el$61;
+        _$setAttribute(_el$61, "aria-level", depth + 1);
+        _$setAttribute(_el$61, "data-k2b-nav-tree-parent-id", parentId);
+        _$insert(_el$61, row, _el$64, _co$0);
+        _$insert(_el$61, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!hasChildren())() && isExpanded(item.id);
           },
           get children() {
-            var _el$63 = _$getNextElement(_tmpl$27);
-            _$insert(_el$63, () => renderItems(nested(), depth + 1, item.id));
-            return _el$63;
+            var _el$62 = _$getNextElement(_tmpl$30);
+            _$insert(_el$62, () => renderItems(nested, depth + 1, item.id));
+            return _el$62;
           }
-        }), _el$67, _co$1);
+        }), _el$66, _co$1);
         _$effect(_p$ => {
-          var _v$52 = selected(),
-            _v$53 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$54 = item.disabled ? "true" : undefined,
-            _v$55 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$56 = item.id;
-          _v$52 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$52);
-          _v$53 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$53);
-          _v$54 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$54);
-          _v$55 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$55);
-          _v$56 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$56);
+          var _v$55 = selected(),
+            _v$56 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$57 = item.disabled ? "true" : undefined,
+            _v$58 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$59 = item.id;
+          _v$55 !== _p$.e && _$setAttribute(_el$61, "aria-selected", _p$.e = _v$55);
+          _v$56 !== _p$.t && _$setAttribute(_el$61, "aria-expanded", _p$.t = _v$56);
+          _v$57 !== _p$.a && _$setAttribute(_el$61, "aria-disabled", _p$.a = _v$57);
+          _v$58 !== _p$.o && _$setAttribute(_el$61, "tabindex", _p$.o = _v$58);
+          _v$59 !== _p$.i && _$setAttribute(_el$61, "data-k2b-nav-tree-id", _p$.i = _v$59);
           return _p$;
         }, {
           e: undefined,
@@ -1301,59 +1390,59 @@ const AppWorkspaceNavTree = props => {
           i: undefined
         });
         _$runHydrationEvents();
-        return _el$62;
+        return _el$61;
       })();
     }
   });
   return (() => {
-    var _el$68 = _$getNextElement(_tmpl$29);
-    var _ref$2 = root;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$68) : root = _el$68;
-    _$insert(_el$68, () => renderItems(roots(), 0));
+    var _el$67 = _$getNextElement(_tmpl$32);
+    var _ref$3 = root;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$67) : root = _el$67;
+    _$insert(_el$67, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$57 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$58 = props.ariaLabel;
-      _v$57 !== _p$.e && _$className(_el$68, _p$.e = _v$57);
-      _v$58 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$58);
+      var _v$60 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$61 = props.ariaLabel;
+      _v$60 !== _p$.e && _$className(_el$67, _p$.e = _v$60);
+      _v$61 !== _p$.t && _$setAttribute(_el$67, "aria-label", _p$.t = _v$61);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$68;
+    return _el$67;
   })();
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => (() => {
-  var _el$69 = _$getNextElement(_tmpl$30),
-    _el$71 = _el$69.firstChild,
-    [_el$72, _co$10] = _$getNextMarker(_el$71.nextSibling),
-    _el$70 = _el$72.nextSibling;
-  _$spread(_el$69, _$mergeProps({
+  var _el$68 = _$getNextElement(_tmpl$33),
+    _el$70 = _el$68.firstChild,
+    [_el$71, _co$10] = _$getNextMarker(_el$70.nextSibling),
+    _el$69 = _el$71.nextSibling;
+  _$spread(_el$68, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$69, _$createComponent(Show, {
+  _$insert(_el$68, _$createComponent(Show, {
     get when() {
       return props.title;
     },
     children: title => (() => {
-      var _el$73 = _$getNextElement(_tmpl$11);
-      _$insert(_el$73, title);
-      return _el$73;
+      var _el$72 = _$getNextElement(_tmpl$12);
+      _$insert(_el$72, title);
+      return _el$72;
     })()
-  }), _el$72, _co$10);
-  _$insert(_el$70, () => props.children);
-  _$effect(() => _$setAttribute(_el$70, "data-columns", props.columns ?? 2));
+  }), _el$71, _co$10);
+  _$insert(_el$69, () => props.children);
+  _$effect(() => _$setAttribute(_el$69, "data-columns", props.columns ?? 2));
   _$runHydrationEvents();
-  return _el$69;
+  return _el$68;
 })();
 const AppWorkspaceSidebarIconAction = props => {
   const content = (() => {
-    var _el$74 = _$getNextElement(_tmpl$31);
-    _$effect(() => _$className(_el$74, iconClass(props.icon)));
-    return _el$74;
+    var _el$73 = _$getNextElement(_tmpl$34);
+    _$effect(() => _$className(_el$73, iconClass(props.icon)));
+    return _el$73;
   })();
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
@@ -1366,8 +1455,8 @@ const AppWorkspaceSidebarIconAction = props => {
     ...modeAttrs(props.sidebarMode)
   });
   if (!props.href || props.disabled) return (() => {
-    var _el$75 = _$getNextElement(_tmpl$16);
-    _$spread(_el$75, _$mergeProps(attrs, {
+    var _el$74 = _$getNextElement(_tmpl$14);
+    _$spread(_el$74, _$mergeProps(attrs, {
       get disabled() {
         return props.disabled;
       },
@@ -1375,13 +1464,13 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$75, content);
+    _$insert(_el$74, content);
     _$runHydrationEvents();
-    return _el$75;
+    return _el$74;
   })();
   if (props.navigation !== "enhanced" || !props.onNavigate) return (() => {
-    var _el$76 = _$getNextElement(_tmpl$17);
-    _$spread(_el$76, _$mergeProps({
+    var _el$75 = _$getNextElement(_tmpl$15);
+    _$spread(_el$75, _$mergeProps({
       get href() {
         return props.href;
       }
@@ -1390,9 +1479,9 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$76, content);
+    _$insert(_el$75, content);
     _$runHydrationEvents();
-    return _el$76;
+    return _el$75;
   })();
   return _$createComponent(Link, _$mergeProps({
     get href() {
@@ -1437,27 +1526,30 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get children() {
-      var _el$77 = _$getNextElement(_tmpl$32);
-      var _ref$3 = root;
-      typeof _ref$3 === "function" ? _$use(_ref$3, _el$77) : root = _el$77;
-      _$insert(_el$77, () => props.children);
+      var _el$76 = _$getNextElement(_tmpl$35);
+      var _ref$4 = root;
+      typeof _ref$4 === "function" ? _$use(_ref$4, _el$76) : root = _el$76;
+      _$insert(_el$76, () => props.children);
       _$effect(_p$ => {
-        var _v$59 = `k2b-app-workspace ${props.class ?? ""}`,
-          _v$60 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-          _v$61 = props.resizable === false ? "false" : "true",
-          _v$62 = appWorkspaceLayoutStyle(initialLayoutState());
-        _v$59 !== _p$.e && _$className(_el$77, _p$.e = _v$59);
-        _v$60 !== _p$.t && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.t = _v$60);
-        _v$61 !== _p$.a && _$setAttribute(_el$77, "data-workspace-resizable", _p$.a = _v$61);
-        _p$.o = _$style(_el$77, _v$62, _p$.o);
+        var _v$62 = `k2b-app-workspace ${props.class ?? ""}`,
+          _v$63 = props.mobileSurface,
+          _v$64 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+          _v$65 = props.resizable === false ? "false" : "true",
+          _v$66 = appWorkspaceLayoutStyle(initialLayoutState());
+        _v$62 !== _p$.e && _$className(_el$76, _p$.e = _v$62);
+        _v$63 !== _p$.t && _$setAttribute(_el$76, "data-mobile-surface", _p$.t = _v$63);
+        _v$64 !== _p$.a && _$setAttribute(_el$76, "data-sidebar-collapsed", _p$.a = _v$64);
+        _v$65 !== _p$.o && _$setAttribute(_el$76, "data-workspace-resizable", _p$.o = _v$65);
+        _p$.i = _$style(_el$76, _v$66, _p$.i);
         return _p$;
       }, {
         e: undefined,
         t: undefined,
         a: undefined,
-        o: undefined
+        o: undefined,
+        i: undefined
       });
-      return _el$77;
+      return _el$76;
     }
   });
 };
@@ -1470,20 +1562,16 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Content = props => (() => {
-  var _el$78 = _$getNextElement(_tmpl$2);
-  _$insert(_el$78, () => props.children);
-  _$effect(() => _$className(_el$78, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$78;
+  var _el$77 = _$getNextElement(_tmpl$2);
+  _$insert(_el$77, () => props.children);
+  _$effect(() => _$className(_el$77, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$77;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;
 AppWorkspace.BottomDrawer = AppWorkspaceBottomDrawer;
 AppWorkspace.Sidebar = AppWorkspaceSidebar;
-AppWorkspace.SidebarMobileTrigger = AppWorkspaceSidebarMobileTrigger;
-AppWorkspace.SidebarMobile = AppWorkspaceSidebarMobile;
-AppWorkspace.SidebarMobileItems = AppWorkspaceSidebarMobileItems;
-AppWorkspace.SidebarMobileBody = AppWorkspaceSidebarMobileBody;
 AppWorkspace.SidebarDesktop = AppWorkspaceSidebarDesktop;
 AppWorkspace.SidebarSection = AppWorkspaceSidebarSection;
 AppWorkspace.SidebarBody = AppWorkspaceSidebarBody;