@k2b/ui 0.2.0 → 0.4.0

package/dist/ssr/layout/AppWorkspace.js

@@ -10,43 +10,46 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$2 = ["<div class=\"k2b-app-workspace__main-primary\" data-workspace-main-region=\"main\"", ">", "</div>"],
   _tmpl$3 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
   _tmpl$4 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
-  _tmpl$5 = ["<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>", "</details></nav>"],
-  _tmpl$6 = ["<aside", " class=\"", "\"", "><div class=\"k2b-app-workspace__sidebar-desktop\">", "</div></aside>"],
-  _tmpl$7 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
-  _tmpl$8 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
-  _tmpl$9 = ["<h2>", "</h2>"],
-  _tmpl$0 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
-  _tmpl$1 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-main\"", "", ">", "</button>"],
-  _tmpl$10 = ["<a", " class=\"k2b-app-workspace__sidebar-item-main\"", ">", "</a>"],
-  _tmpl$11 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$12 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
-  _tmpl$13 = ["<i", "></i>"],
-  _tmpl$14 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
-  _tmpl$15 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
-  _tmpl$16 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
-  _tmpl$17 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\"", " aria-hidden=\"true\"><i", "></i></span>"],
-  _tmpl$18 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
-  _tmpl$19 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$20 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
-  _tmpl$21 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
-  _tmpl$22 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", ">", "", "</div>"],
-  _tmpl$23 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
-  _tmpl$24 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
-  _tmpl$25 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$26 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
-  _tmpl$27 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$5 = ["<aside", " class=\"", "\"", "><div class=\"k2b-app-workspace__sidebar-desktop\">", "</div></aside>"],
+  _tmpl$6 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$7 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
+  _tmpl$8 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$9 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
+  _tmpl$0 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
+  _tmpl$1 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
+  _tmpl$10 = ["<h2>", "</h2>"],
+  _tmpl$11 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
+  _tmpl$12 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$13 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
+  _tmpl$14 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
+  _tmpl$15 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
+  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\">", "<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>", "</span>"],
+  _tmpl$17 = ["<i", "></i>"],
+  _tmpl$18 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$19 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$20 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$21 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\"", " aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$22 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$23 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$24 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$25 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", ">", "", "</div>"],
+  _tmpl$27 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$28 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$29 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$30 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
+  _tmpl$31 = ["<div class=\"", "\">", "</div>"];
 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");
@@ -62,7 +65,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) {
@@ -103,7 +106,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
@@ -119,7 +122,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.
@@ -131,6 +134,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;
     },
@@ -145,43 +151,77 @@ 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 _$ssr(_tmpl$2, _$ssrAttribute("data-workspace-mobile-active", activeMobilePane === "main" ? "true" : "false", false), _$escape(region.children));
-        }
-        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 = _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(pane.domId, true), false), `k2b-app-workspace__main-pane ${isAnchor ? "is-primary" : ""} ${_$escape(pane.props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(pane.props.label, true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", activeMobilePane === pane.props.id ? "true" : "false", false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId, true), false) + _$ssrAttribute("data-workspace-resizable", resizable ? "true" : "false", false) + _$ssrAttribute("data-surface", pane.props.surface === "navigation" ? "navigation" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false), _$ssrStyle(isAnchor ? undefined : {
-          "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize}px)`
-        }), _$escape(pane.props.children));
-        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 _$ssr(_tmpl$2, _$ssrAttribute("data-workspace-mobile-active", activeMobilePane() === "main" ? "true" : "false", false), _$escape(region.children));
           }
-        });
-        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 resizable() && !before();
+                },
+                get children() {
+                  return handle();
+                }
+              }), _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(pane.domId, true), false), `k2b-app-workspace__main-pane ${isAnchor() ? "is-primary" : ""} ${_$escape(pane.props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(pane.props.label, true), false) + _$ssrAttribute("data-workspace-main-region", _$escape(pane.props.id, true), false) + _$ssrAttribute("data-workspace-mobile-active", activeMobilePane() === pane.props.id ? "true" : "false", false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-surface", pane.props.surface === "navigation" ? "navigation" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll", pane.props.scroll === false ? "false" : _$escape(undefined, true), false) + _$ssrAttribute("data-scroll-fade-mode", pane.props.scroll !== false && pane.props.scrollFade !== false ? "both" : _$escape(undefined, true), false), _$ssrStyle(isAnchor() ? undefined : {
+                "--k2b-workspace-panel-size": `var(${variable}, ${defaultSize()}px)`
+              }), _$escape(pane.props.children)), _$createComponent(Show, {
+                get when() {
+                  return resizable() && before();
+                },
+                get children() {
+                  return handle();
+                }
+              })];
+            }
+          });
+        }
       });
     }
   })), false);
@@ -284,10 +324,6 @@ function AppWorkspaceBottomDrawer(props) {
     }
   }), _$ssr(_tmpl$4, _$ssrAttribute("id", _$escape(domId(), true), false), `k2b-app-workspace__drawer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-height", _$escape(props.height ?? "md", true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(panelId(), true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false), _$ssrAttribute("hidden", !props.open, true), _$ssrStyleProperty("--k2b-workspace-panel-size:", `var(${_$escape(variable(), true)}, ${_$escape(defaultHeight(), true)}px)`) + _$ssrStyleProperty(";view-transition-name:", _$escape(props.viewTransitionName, true)), _$escape(props.children))];
 }
-const AppWorkspaceSidebarMobileTrigger = props => ({
-  kind: SIDEBAR_MOBILE_TRIGGER,
-  ...props
-});
 function AppWorkspaceSidebar(props) {
   const rootResizable = useContext(ResizeContext);
   const resizable = () => props.resizable ?? rootResizable;
@@ -298,27 +334,8 @@ 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 mobileTrigger() && mobile();
-    },
-    get children() {
-      return _$ssr(_tmpl$5, _$ssrAttribute("aria-label", _$escape(mobileTrigger().label, true), false), _$escape(mobileTrigger().label), _$escape(_$createComponent(SidebarModeContext.Provider, {
-        value: "mobile",
-        get children() {
-          return mobile().children;
-        }
-      })));
-    }
-  }), _$ssr(_tmpl$6, _$ssrAttribute("id", _$escape(domId, true), false), `k2b-app-workspace__sidebar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(mobileTrigger()?.label, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-collapsible", props.collapsible ? "true" : "false", false), _$escape(_$createComponent(SidebarModeContext.Provider, {
-    value: "desktop",
-    get children() {
-      return desktop()?.children;
-    }
-  }))), _$createComponent(Show, {
+  return [_$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(domId, true), false), `k2b-app-workspace__sidebar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.label, true), false) + _$ssrAttribute("data-workspace-resizable", resizable() ? "true" : "false", false) + _$ssrAttribute("data-workspace-collapsible", props.collapsible ? "true" : "false", false), _$escape(desktop()?.children)), _$createComponent(Show, {
     get when() {
       return resizable();
     },
@@ -343,73 +360,99 @@ function AppWorkspaceSidebar(props) {
     }
   })];
 }
-const AppWorkspaceSidebarMobile = props => ({
-  kind: SIDEBAR_MOBILE,
-  children: props.children
-});
 const AppWorkspaceSidebarDesktop = props => ({
   kind: SIDEBAR_DESKTOP,
   children: props.children
 });
-const AppWorkspaceSidebarMobileItems = props => _$ssrElement("div", _$mergeProps({
-  "class": "k2b-app-workspace__sidebar-mobile-items"
-}, () => scrollAttrs(props.scrollPreserveKey)), _$escape(props.children), false);
-const AppWorkspaceSidebarBody = props => _$ssrElement("div", _$mergeProps({
-  get ["class"]() {
-    return `k2b-app-workspace__sidebar-body ${props.class ?? ""}`;
-  }
-}, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false);
-const AppWorkspaceSidebarMobileBody = props => _$ssrElement("div", _$mergeProps({
-  get ["class"]() {
-    return `k2b-app-workspace__sidebar-mobile-body ${props.class ?? ""}`;
-  }
-}, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false);
+const AppWorkspaceSidebarBody = props => {
+  let body;
+  createScrollFade(() => body, () => props.scrollFade !== false);
+  return _$ssrElement("div", _$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)), _$escape(props.children), false);
+};
 const AppWorkspaceSidebarFooter = props => _$ssrElement("footer", _$mergeProps({
   get ["class"]() {
     return `k2b-app-workspace__sidebar-footer ${props.class ?? ""}`;
   }
 }, () => modeAttrs(props.sidebarMode)), _$escape(props.children), false);
-const AppWorkspaceSidebarSection = props => _$ssrElement("section", _$mergeProps({
-  get ["class"]() {
-    return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
-  }
-}, () => modeAttrs(props.sidebarMode)), [_$escape(_$createComponent(Show, {
-  get when() {
-    return props.title || props.actions;
-  },
-  get children() {
-    return _$ssr(_tmpl$8, _$escape(_$createComponent(Show, {
-      get when() {
-        return props.title;
-      },
-      children: title => _$ssr(_tmpl$9, _$escape(title()))
-    })), _$escape(_$createComponent(Show, {
-      get when() {
-        return props.actions;
-      },
-      get children() {
-        return _$ssr(_tmpl$7, _$escape(props.actions));
-      }
-    })));
-  }
-})), _$escape(props.children)], false);
-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
-});
-const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$0, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
+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() {
+      return _$ssr(_tmpl$6, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+    }
+  }), props.title, _$createComponent(Show, {
+    get when() {
+      return props.count !== undefined;
+    },
+    get children() {
+      return _$ssr(_tmpl$7, _$escape(props.count));
+    }
+  })];
+  return _$ssrElement("section", _$mergeProps({
+    get ["class"]() {
+      return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
+    },
+    get ["data-collapsible"]() {
+      return props.collapsible ? "true" : undefined;
+    }
+  }, () => modeAttrs(props.sidebarMode)), [_$escape(_$createComponent(Show, {
+    get when() {
+      return props.title || props.actions;
+    },
+    get children() {
+      return _$ssr(_tmpl$0, _$escape(_$createComponent(Show, {
+        get when() {
+          return props.collapsible;
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return props.title;
+            },
+            get children() {
+              return _$ssr(_tmpl$10, _$escape(title()));
+            }
+          });
+        },
+        get children() {
+          return _$ssr(_tmpl$8, _$ssrAttribute("aria-expanded", _$escape(open(), true), false) + _$ssrAttribute("aria-controls", _$escape(id, true), false), _$escape(title()), _$ssrAttribute("class", open() ? "ti ti-chevron-down" : "ti ti-chevron-right", false));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.actions;
+        },
+        get children() {
+          return _$ssr(_tmpl$9, _$escape(props.actions));
+        }
+      })));
+    }
+  })), _$ssr(_tmpl$1, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
+};
+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 => _$ssr(_tmpl$11, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
 /** Shared visual and semantic row frame for flat sidebar items and tree items. */
 function AppWorkspaceSidebarRow(props) {
   const className = () => `k2b-app-workspace__sidebar-item ${props.hasActions ? "has-action" : ""} ${props.active ? props.activeClass ?? "is-active" : ""} ${props.class ?? ""}`;
@@ -418,7 +461,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))
@@ -426,102 +468,100 @@ function AppWorkspaceSidebarRow(props) {
     ...data()
   });
   const current = () => props.active ? "page" : undefined;
-  if (props.hasActions) {
-    if (!props.href || props.disabled) {
-      return _$ssrElement("div", _$mergeProps(common, {
-        get ["data-disabled"]() {
-          return props.disabled ? "true" : undefined;
-        }
-      }), [_$ssr(_tmpl$1, _$ssrAttribute("tabindex", _$escape(props.tabIndex, true), false), _$ssrAttribute("disabled", props.disabled, true), _$escape(props.children)), _$escape(props.actions)], false);
-    }
-    if (props.navigation !== "enhanced" || !props.onNavigate) {
-      return _$ssrElement("div", common(), [_$ssr(_tmpl$10, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("tabindex", _$escape(props.tabIndex, true), false) + _$ssrAttribute("aria-current", _$escape(current(), true), false), _$escape(props.children)), _$escape(props.actions)], false);
-    }
-    return _$ssrElement("div", common(), [_$escape(_$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;
+  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 onClick() {
-        return props.onClick;
+      get fallback() {
+        return _$ssrElement("button", _$mergeProps({
+          type: "button"
+        }, attrs, {
+          get tabIndex() {
+            return props.tabIndex;
+          },
+          get disabled() {
+            return props.disabled;
+          }
+        }), _$escape(props.children), false);
       },
       get children() {
-        return props.children;
-      }
-    })), _$escape(props.actions)], false);
-  }
-  if (!props.href || props.disabled) {
-    return _$ssrElement("button", _$mergeProps({
-      type: "button"
-    }, common, {
-      get tabIndex() {
-        return props.tabIndex;
-      },
-      get disabled() {
-        return props.disabled;
-      }
-    }), _$escape(props.children), false);
-  }
-  if (props.navigation !== "enhanced" || !props.onNavigate) {
-    return _$ssrElement("a", _$mergeProps({
-      get href() {
-        return props.href;
-      }
-    }, common, {
-      get tabIndex() {
-        return props.tabIndex;
-      },
-      get ["aria-current"]() {
-        return current();
+        return _$createComponent(Show, {
+          get when() {
+            return props.navigation === "enhanced" && Boolean(props.onNavigate);
+          },
+          get fallback() {
+            return _$ssrElement("a", _$mergeProps({
+              get href() {
+                return props.href;
+              }
+            }, attrs, {
+              get tabIndex() {
+                return props.tabIndex;
+              },
+              get ["aria-current"]() {
+                return current();
+              }
+            }), _$escape(props.children), false);
+          },
+          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;
+              }
+            }));
+          }
+        });
       }
-    }), _$escape(props.children), false);
-  }
-  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;
+      return _$ssrElement("div", _$mergeProps(common, {
+        get ["data-disabled"]() {
+          return props.disabled ? "true" : undefined;
+        }
+      }), [_$escape(_$createComponent(Control, {
+        grouped: true
+      })), _$escape(props.actions)], false);
     }
-  }));
+  });
 }
 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()));
@@ -538,43 +578,99 @@ 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() {
-      return _$ssr(_tmpl$11, _$escape(iconContent() ?? _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+      return _$ssr(_tmpl$12, _$escape(iconContent() ?? _$ssr(_tmpl$17, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+    }
+  }), _$ssr(_tmpl$16, _$escape(_$createComponent(Show, {
+    get when() {
+      return props.context || props.contextMeta;
+    },
+    get children() {
+      return _$ssr(_tmpl$14, _$escape(props.context), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.contextMeta;
+        },
+        get children() {
+          return _$ssr(_tmpl$13, _$escape(props.contextMeta));
+        }
+      })));
+    }
+  })), _$ssrAttribute("data-marquee", labelSlot()?.marquee ?? props.variant !== "card" ? "true" : "false", false), _$escape(label()), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.description;
+    },
+    get children() {
+      return _$ssr(_tmpl$15, _$escape(props.description));
     }
-  }), _$ssr(_tmpl$12, _$ssrAttribute("data-marquee", labelSlot()?.marquee === false ? _$escape(undefined, true) : "true", false), _$escape(label())), _$createComponent(Show, {
+  }))), _$createComponent(Show, {
     get when() {
       return meta();
     },
-    children: value => _$ssr(_tmpl$14, _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(value()))
+    children: value => _$ssr(_tmpl$18, _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(value()))
   })];
   const singleAction = () => {
-    const slot = actionSlot();
-    if (!slot && !props.actionIcon) return null;
-    const content = slot?.children ?? _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(iconClass(slot?.icon ?? props.actionIcon, "ti-dots"), true), false));
-    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 ? _$ssr(_tmpl$15, _$ssrAttribute("href", _$escape(slot.href, true), false), _$ssrAttribute("data-visibility", slot.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label, true), false), _$escape(content)) : _$ssr(_tmpl$16, _$ssrAttribute("data-visibility", slot?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label, true), false), _$escape(content));
+    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$17, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    return _$createComponent(Show, {
+      get when() {
+        return Boolean(actionSlot() || props.actionIcon);
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return actionSlot()?.href && !actionSlot()?.disabled;
+          },
+          get fallback() {
+            return _$ssr(_tmpl$20, _$ssrAttribute("disabled", actionSlot()?.disabled, true) + _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
+          },
+          get children() {
+            return _$ssr(_tmpl$19, _$ssrAttribute("href", _$escape(actionSlot()?.href, true), false), _$ssrAttribute("data-visibility", actionSlot()?.visibility === "hover" ? "hover" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false), _$escape(content()));
+          }
+        });
+      }
+    });
   };
-  const actions = () => [customActions(), singleAction()];
+  const actions = () => [customActions(), 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();
     },
@@ -627,6 +723,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
       };
@@ -640,7 +737,6 @@ const AppWorkspaceNavTreeItem = props => ({
   ...props
 });
 const AppWorkspaceNavTree = props => {
-  const mode = useContext(SidebarModeContext);
   let root;
   const resolved = children(() => props.children);
   const roots = createMemo(() => navTreeItems(resolved()));
@@ -683,9 +779,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));
@@ -777,25 +875,24 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          return _$ssr(_tmpl$17, _$ssrAttribute("data-k2b-nav-tree-toggle", usesIconDisclosure() ? "" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false));
+          return _$ssr(_tmpl$21, _$ssrAttribute("data-k2b-nav-tree-toggle", usesIconDisclosure() ? "" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false));
         }
-      }), _$ssr(_tmpl$18, _$escape(item.label)), _$createComponent(Show, {
+      }), _$ssr(_tmpl$22, _$escape(item.label)), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          return _$ssr(_tmpl$19, `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`, _$ssrAttribute("data-visibility", item.metaVisibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(item.meta));
+          return _$ssr(_tmpl$23, `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`, _$ssrAttribute("data-visibility", item.metaVisibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(item.meta));
         }
       }), _$createComponent(Show, {
         get when() {
           return hasChildren() && !usesIconDisclosure();
         },
         get children() {
-          return _$ssr(_tmpl$20, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+          return _$ssr(_tmpl$24, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
-        mode: mode,
         get hasActions() {
           return Boolean(item.actions);
         },
@@ -847,17 +944,17 @@ const AppWorkspaceNavTree = props => {
         },
         children: rowContent
       });
-      return _$ssr(_tmpl$22, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-selected", _$escape(selected(), true), false) + _$ssrAttribute("aria-expanded", hasChildren() ? _$escape(isExpanded(item.id), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-disabled", item.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", item.disabled ? -1 : tabStopId() === item.id ? 0 : -1, false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false), _$escape(row()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$26, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-selected", _$escape(selected(), true), false) + _$ssrAttribute("aria-expanded", hasChildren() ? _$escape(isExpanded(item.id), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-disabled", item.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", item.disabled ? -1 : tabStopId() === item.id ? 0 : -1, false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false), _$escape(row()), _$escape(_$createComponent(Show, {
         get when() {
           return hasChildren() && isExpanded(item.id);
         },
         get children() {
-          return _$ssr(_tmpl$21, _$escape(renderItems(nested(), depth + 1, item.id)));
+          return _$ssr(_tmpl$25, _$escape(renderItems(nested, depth + 1, item.id)));
         }
       })));
     }
   });
-  return _$ssr(_tmpl$23, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots(), 0)));
+  return _$ssr(_tmpl$27, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots, 0)));
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProps({
@@ -868,10 +965,10 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
   get when() {
     return props.title;
   },
-  children: title => _$ssr(_tmpl$9, _$escape(title()))
-})), _$ssr(_tmpl$24, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+  children: title => _$ssr(_tmpl$10, _$escape(title()))
+})), _$ssr(_tmpl$28, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
-  const content = _$ssr(_tmpl$25, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  const content = _$ssr(_tmpl$29, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
     title: props.label,
@@ -937,7 +1034,7 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get children() {
-      return _$ssr(_tmpl$26, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(props.children));
+      return _$ssr(_tmpl$30, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(props.children));
     }
   });
 };
@@ -949,16 +1046,12 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$27, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$31, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 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;