@k2b/ui 0.3.0 → 0.4.1

package/dist/ssr/layout/AppWorkspace.js

@@ -11,41 +11,42 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$3 = ["<section", " class=\"", "\"", " style=\"", "\">", "</section>"],
   _tmpl$4 = ["<aside", " class=\"", "\"", "", " style=\"", "\">", "</aside>"],
   _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 { createScrollFade } from "./scroll-fade";
-import { SidebarItemPreview } from "./SidebarItemPreview";
+  _tmpl$6 = ["<script>", "</script>"],
+  _tmpl$7 = ["<span aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$8 = ["<span class=\"k2b-app-workspace__sidebar-section-count\">", "</span>"],
+  _tmpl$9 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-section-toggle\"", ">", "<i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$0 = ["<div class=\"k2b-app-workspace__sidebar-section-actions\">", "</div>"],
+  _tmpl$1 = ["<header class=\"k2b-app-workspace__sidebar-section-header\">", "", "</header>"],
+  _tmpl$10 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
+  _tmpl$11 = ["<h2>", "</h2>"],
+  _tmpl$12 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
+  _tmpl$13 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$14 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
+  _tmpl$15 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
+  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
+  _tmpl$17 = ["<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$18 = ["<i", "></i>"],
+  _tmpl$19 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$20 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$21 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$22 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\"", " aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$23 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$24 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$25 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$26 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$27 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", ">", "", "</div>"],
+  _tmpl$28 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$29 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$30 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$31 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
+  _tmpl$32 = ["<div class=\"", "\">", "</div>"];
 import { Link } from "@k2b/ssr/nav";
-import { children, createContext, createMemo, mergeProps, 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);
@@ -364,17 +365,28 @@ const AppWorkspaceSidebarDesktop = props => ({
   kind: SIDEBAR_DESKTOP,
   children: props.children
 });
+// Document navigations rebuild the sidebar from the server, so this inline
+// script restores its offset while the document is still parsing: before the
+// first paint, before a view transition can snapshot it, and before any island
+// hydrates. Islands load asynchronously and server-only sidebars never mount,
+// so `onMount` would be too late or never run. The memory is one
+// `sessionStorage` entry per path segment and sidebar position and ends with
+// the tab. A stored offset is applied first; the current item is then kept in
+// view, which is a no-op when the offset already shows it. The frame callback
+// repeats the restore once the whole document is parsed, because content that
+// follows the sidebar can still change its height before the first paint.
+const SIDEBAR_SCROLL_MEMORY_SCRIPT = ["(function(){", "var body=document.currentScript&&document.currentScript.previousElementSibling;if(!body)return;", "var storage;try{storage=window.sessionStorage}catch(_){return}", 'var key="k2b-sidebar-scroll:"+location.pathname.split("/")[1]+":"+document.querySelectorAll(".k2b-app-workspace__sidebar-body").length;', "var restore=function(){", "var stored=storage.getItem(key);if(stored!==null)body.scrollTop=Number(stored);", 'var current=body.querySelector(\'[aria-current="page"]\');if(current)current.scrollIntoView({block:"nearest"});', "};", "restore();requestAnimationFrame(restore);", "var frame=0;", 'body.addEventListener("scroll",function(){if(frame)return;frame=requestAnimationFrame(function(){frame=0;try{storage.setItem(key,String(body.scrollTop))}catch(_){}})},{passive:true});', "})();"].join("");
 const AppWorkspaceSidebarBody = props => {
   let body;
   createScrollFade(() => body, () => props.scrollFade !== false);
-  return _$ssrElement("div", _$mergeProps({
+  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);
+  }, () => scrollAttrs(props.scrollPreserveKey), () => modeAttrs(props.sidebarMode)), _$escape(props.children), false), _$ssr(_tmpl$6, SIDEBAR_SCROLL_MEMORY_SCRIPT)];
 };
 const AppWorkspaceSidebarFooter = props => _$ssrElement("footer", _$mergeProps({
   get ["class"]() {
@@ -390,14 +402,14 @@ const AppWorkspaceSidebarSection = props => {
       return props.icon;
     },
     get children() {
-      return _$ssr(_tmpl$6, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+      return _$ssr(_tmpl$7, _$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 _$ssr(_tmpl$8, _$escape(props.count));
     }
   })];
   return _$ssrElement("section", _$mergeProps({
@@ -412,7 +424,7 @@ const AppWorkspaceSidebarSection = props => {
       return props.title || props.actions;
     },
     get children() {
-      return _$ssr(_tmpl$0, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$1, _$escape(_$createComponent(Show, {
         get when() {
           return props.collapsible;
         },
@@ -422,23 +434,23 @@ const AppWorkspaceSidebarSection = props => {
               return props.title;
             },
             get children() {
-              return _$ssr(_tmpl$10, _$escape(title()));
+              return _$ssr(_tmpl$11, _$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));
+          return _$ssr(_tmpl$9, _$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));
+          return _$ssr(_tmpl$0, _$escape(props.actions));
         }
       })));
     }
-  })), _$ssr(_tmpl$1, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
+  })), _$ssr(_tmpl$10, _$ssrAttribute("id", _$escape(id, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children))], false);
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
   kind: SIDEBAR_ITEM_ICON
@@ -452,7 +464,7 @@ const AppWorkspaceSidebarItemMeta = props => mergeProps({
 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));
+const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$12, _$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 ?? ""}`;
@@ -584,19 +596,19 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      return _$ssr(_tmpl$12, _$escape(iconContent() ?? _$ssr(_tmpl$17, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+      return _$ssr(_tmpl$13, _$escape(iconContent() ?? _$ssr(_tmpl$18, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
     }
-  }), _$ssr(_tmpl$16, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
     get when() {
       return props.context || props.contextMeta;
     },
     get children() {
-      return _$ssr(_tmpl$14, _$escape(props.context), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$15, _$escape(props.context), _$escape(_$createComponent(Show, {
         get when() {
           return props.contextMeta;
         },
         get children() {
-          return _$ssr(_tmpl$13, _$escape(props.contextMeta));
+          return _$ssr(_tmpl$14, _$escape(props.contextMeta));
         }
       })));
     }
@@ -605,13 +617,13 @@ function AppWorkspaceSidebarItem(props) {
       return props.description;
     },
     get children() {
-      return _$ssr(_tmpl$15, _$escape(props.description));
+      return _$ssr(_tmpl$16, _$escape(props.description));
     }
   }))), _$createComponent(Show, {
     get when() {
       return meta();
     },
-    children: value => _$ssr(_tmpl$18, _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(value()))
+    children: value => _$ssr(_tmpl$19, _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(value()))
   })];
   const singleAction = () => {
     const label = () => actionSlot()?.label ?? props.actionLabel ?? messages().rowAction;
@@ -625,7 +637,7 @@ function AppWorkspaceSidebarItem(props) {
       actionSlot()?.onSelect?.(event);
       props.onActionClick?.(event);
     };
-    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$17, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$18, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
     return _$createComponent(Show, {
       get when() {
         return Boolean(actionSlot() || props.actionIcon);
@@ -636,10 +648,10 @@ function AppWorkspaceSidebarItem(props) {
             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()));
+            return _$ssr(_tmpl$21, _$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()));
+            return _$ssr(_tmpl$20, _$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()));
           }
         });
       }
@@ -875,21 +887,21 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          return _$ssr(_tmpl$21, _$ssrAttribute("data-k2b-nav-tree-toggle", usesIconDisclosure() ? "" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false));
+          return _$ssr(_tmpl$22, _$ssrAttribute("data-k2b-nav-tree-toggle", usesIconDisclosure() ? "" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false));
         }
-      }), _$ssr(_tmpl$22, _$escape(item.label)), _$createComponent(Show, {
+      }), _$ssr(_tmpl$23, _$escape(item.label)), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          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));
+          return _$ssr(_tmpl$24, `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$24, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+          return _$ssr(_tmpl$25, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -944,17 +956,17 @@ const AppWorkspaceNavTree = props => {
         },
         children: rowContent
       });
-      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, {
+      return _$ssr(_tmpl$27, _$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$25, _$escape(renderItems(nested, depth + 1, item.id)));
+          return _$ssr(_tmpl$26, _$escape(renderItems(nested, depth + 1, item.id)));
         }
       })));
     }
   });
-  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)));
+  return _$ssr(_tmpl$28, `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({
@@ -965,10 +977,10 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
   get when() {
     return props.title;
   },
-  children: title => _$ssr(_tmpl$10, _$escape(title()))
-})), _$ssr(_tmpl$28, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+  children: title => _$ssr(_tmpl$11, _$escape(title()))
+})), _$ssr(_tmpl$29, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
-  const content = _$ssr(_tmpl$29, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  const content = _$ssr(_tmpl$30, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
     title: props.label,
@@ -1034,7 +1046,7 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get 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));
+      return _$ssr(_tmpl$31, `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));
     }
   });
 };
@@ -1046,7 +1058,7 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$31, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$32, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;