@k2b/ui 0.4.0 → 0.4.2

package/dist/browser/layout/AppWorkspace.js

@@ -22,37 +22,38 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _tmpl$4 = /*#__PURE__*/_$template(`<section>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<aside>`),
   _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>`);
+  _tmpl$7 = /*#__PURE__*/_$template(`<script>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<footer>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span aria-hidden=true><i>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-section-count>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-section-toggle><!$><!/><i aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-section-actions>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<header class=k2b-app-workspace__sidebar-section-header><!$><!/><!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-section-content>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<h2>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__sidebar-item-actions>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
+  _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-context-meta>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
+  _tmpl$22 = /*#__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$23 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true><i>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<div role=tree>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<div data-k2b-app-workspace>`);
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
 import { useUiMessages } from "../intl/messages";
@@ -563,10 +564,21 @@ 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 (() => {
+  return [(() => {
     var _el$9 = _$getNextElement(_tmpl$2);
     var _ref$ = body;
     typeof _ref$ === "function" ? _$use(_ref$, _el$9) : body = _el$9;
@@ -581,18 +593,22 @@ const AppWorkspaceSidebarBody = props => {
     _$insert(_el$9, () => props.children);
     _$runHydrationEvents();
     return _el$9;
-  })();
+  })(), (() => {
+    var _el$0 = _$getNextElement(_tmpl$7);
+    _$setProperty(_el$0, "innerHTML", SIDEBAR_SCROLL_MEMORY_SCRIPT);
+    return _el$0;
+  })()];
 };
 const AppWorkspaceSidebarFooter = props => (() => {
-  var _el$0 = _$getNextElement(_tmpl$7);
-  _$spread(_el$0, _$mergeProps({
+  var _el$1 = _$getNextElement(_tmpl$8);
+  _$spread(_el$1, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-footer ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$0, () => props.children);
+  _$insert(_el$1, () => props.children);
   _$runHydrationEvents();
-  return _el$0;
+  return _el$1;
 })();
 const AppWorkspaceSidebarSection = props => {
   const [expanded, setExpanded] = createSignal(props.defaultOpen ?? true);
@@ -603,27 +619,27 @@ const AppWorkspaceSidebarSection = props => {
       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;
+      var _el$10 = _$getNextElement(_tmpl$9),
+        _el$11 = _el$10.firstChild;
+      _$effect(() => _$className(_el$11, iconClass(props.icon)));
+      return _el$10;
     }
   }), _$memo(() => props.title), _$createComponent(Show, {
     get when() {
       return props.count !== undefined;
     },
     get children() {
-      var _el$11 = _$getNextElement(_tmpl$9);
-      _$insert(_el$11, () => props.count);
-      return _el$11;
+      var _el$12 = _$getNextElement(_tmpl$0);
+      _$insert(_el$12, () => props.count);
+      return _el$12;
     }
   })];
   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({
+    var _el$13 = _$getNextElement(_tmpl$12),
+      _el$25 = _el$13.firstChild,
+      [_el$26, _co$4] = _$getNextMarker(_el$25.nextSibling),
+      _el$24 = _el$26.nextSibling;
+    _$spread(_el$13, _$mergeProps({
       get ["class"]() {
         return `k2b-app-workspace__sidebar-section ${props.class ?? ""}`;
       },
@@ -631,17 +647,17 @@ const AppWorkspaceSidebarSection = props => {
         return props.collapsible ? "true" : undefined;
       }
     }, () => modeAttrs(props.sidebarMode)), false, true);
-    _$insert(_el$12, _$createComponent(Show, {
+    _$insert(_el$13, _$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, {
+        var _el$14 = _$getNextElement(_tmpl$11),
+          _el$20 = _el$14.firstChild,
+          [_el$21, _co$2] = _$getNextMarker(_el$20.nextSibling),
+          _el$22 = _el$21.nextSibling,
+          [_el$23, _co$3] = _$getNextMarker(_el$22.nextSibling);
+        _$insert(_el$14, _$createComponent(Show, {
           get when() {
             return props.collapsible;
           },
@@ -651,56 +667,56 @@ const AppWorkspaceSidebarSection = props => {
                 return props.title;
               },
               get children() {
-                var _el$26 = _$getNextElement(_tmpl$12);
-                _$insert(_el$26, title);
-                return _el$26;
+                var _el$27 = _$getNextElement(_tmpl$13);
+                _$insert(_el$27, title);
+                return _el$27;
               }
             });
           },
           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 = () => {
+            var _el$15 = _$getNextElement(_tmpl$1),
+              _el$17 = _el$15.firstChild,
+              [_el$18, _co$] = _$getNextMarker(_el$17.nextSibling),
+              _el$16 = _el$18.nextSibling;
+            _el$15.$$click = () => {
               const next = !open();
               setExpanded(next);
               props.onOpenChange?.(next);
             };
-            _$setAttribute(_el$14, "aria-controls", id);
-            _$insert(_el$14, title, _el$17, _co$);
+            _$setAttribute(_el$15, "aria-controls", id);
+            _$insert(_el$15, title, _el$18, _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);
+              _v$43 !== _p$.e && _$setAttribute(_el$15, "aria-expanded", _p$.e = _v$43);
+              _v$44 !== _p$.t && _$className(_el$16, _p$.t = _v$44);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
             _$runHydrationEvents();
-            return _el$14;
+            return _el$15;
           }
-        }), _el$20, _co$2);
-        _$insert(_el$13, _$createComponent(Show, {
+        }), _el$21, _co$2);
+        _$insert(_el$14, _$createComponent(Show, {
           get when() {
             return props.actions;
           },
           get children() {
-            var _el$18 = _$getNextElement(_tmpl$1);
-            _$insert(_el$18, () => props.actions);
-            return _el$18;
+            var _el$19 = _$getNextElement(_tmpl$10);
+            _$insert(_el$19, () => props.actions);
+            return _el$19;
           }
-        }), _el$22, _co$3);
-        return _el$13;
+        }), _el$23, _co$3);
+        return _el$14;
       }
-    }), _el$25, _co$4);
-    _$setAttribute(_el$23, "id", id);
-    _$insert(_el$23, () => props.children);
-    _$effect(() => _$setProperty(_el$23, "hidden", !open()));
+    }), _el$26, _co$4);
+    _$setAttribute(_el$24, "id", id);
+    _$insert(_el$24, () => props.children);
+    _$effect(() => _$setProperty(_el$24, "hidden", !open()));
     _$runHydrationEvents();
-    return _el$12;
+    return _el$13;
   })();
 };
 const AppWorkspaceSidebarItemIcon = props => mergeProps({
@@ -716,10 +732,10 @@ const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
 const AppWorkspaceSidebarItemActions = props => (() => {
-  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;
+  var _el$28 = _$getNextElement(_tmpl$14);
+  _$insert(_el$28, () => props.children);
+  _$effect(() => _$setAttribute(_el$28, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
+  return _el$28;
 })();
 /** Shared visual and semantic row frame for flat sidebar items and tree items. */
 function AppWorkspaceSidebarRow(props) {
@@ -746,8 +762,8 @@ function AppWorkspaceSidebarRow(props) {
       },
       get fallback() {
         return (() => {
-          var _el$28 = _$getNextElement(_tmpl$14);
-          _$spread(_el$28, _$mergeProps(attrs, {
+          var _el$29 = _$getNextElement(_tmpl$15);
+          _$spread(_el$29, _$mergeProps(attrs, {
             get tabIndex() {
               return props.tabIndex;
             },
@@ -758,9 +774,9 @@ function AppWorkspaceSidebarRow(props) {
               return props.onClick;
             }
           }), false, true);
-          _$insert(_el$28, () => props.children);
+          _$insert(_el$29, () => props.children);
           _$runHydrationEvents();
-          return _el$28;
+          return _el$29;
         })();
       },
       get children() {
@@ -770,8 +786,8 @@ function AppWorkspaceSidebarRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$29 = _$getNextElement(_tmpl$15);
-              _$spread(_el$29, _$mergeProps({
+              var _el$30 = _$getNextElement(_tmpl$16);
+              _$spread(_el$30, _$mergeProps({
                 get href() {
                   return props.href;
                 }
@@ -786,9 +802,9 @@ function AppWorkspaceSidebarRow(props) {
                   return props.onClick;
                 }
               }), false, true);
-              _$insert(_el$29, () => props.children);
+              _$insert(_el$30, () => props.children);
               _$runHydrationEvents();
-              return _el$29;
+              return _el$30;
             })();
           },
           get children() {
@@ -834,22 +850,22 @@ function AppWorkspaceSidebarRow(props) {
       });
     },
     get 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, {
+      var _el$31 = _$getNextElement(_tmpl$17),
+        _el$32 = _el$31.firstChild,
+        [_el$33, _co$5] = _$getNextMarker(_el$32.nextSibling),
+        _el$34 = _el$33.nextSibling,
+        [_el$35, _co$6] = _$getNextMarker(_el$34.nextSibling);
+      _$spread(_el$31, _$mergeProps(common, {
         get ["data-disabled"]() {
           return props.disabled ? "true" : undefined;
         }
       }), false, true);
-      _$insert(_el$30, _$createComponent(Control, {
+      _$insert(_el$31, _$createComponent(Control, {
         grouped: true
-      }), _el$32, _co$5);
-      _$insert(_el$30, () => props.actions, _el$34, _co$6);
+      }), _el$33, _co$5);
+      _$insert(_el$31, () => props.actions, _el$35, _co$6);
       _$runHydrationEvents();
-      return _el$30;
+      return _el$31;
     }
   });
 }
@@ -877,67 +893,67 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      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;
+      var _el$36 = _$getNextElement(_tmpl$18);
+      _$insert(_el$36, () => iconContent() ?? (() => {
+        var _el$50 = _$getNextElement(_tmpl$23);
+        _$effect(() => _$className(_el$50, iconClass(icon())));
+        return _el$50;
       })());
-      return _el$35;
+      return _el$36;
     }
   }), (() => {
-    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, {
+    var _el$37 = _$getNextElement(_tmpl$22),
+      _el$46 = _el$37.firstChild,
+      [_el$47, _co$8] = _$getNextMarker(_el$46.nextSibling),
+      _el$43 = _el$47.nextSibling,
+      _el$44 = _el$43.firstChild,
+      _el$48 = _el$43.nextSibling,
+      [_el$49, _co$9] = _$getNextMarker(_el$48.nextSibling);
+    _$insert(_el$37, _$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, {
+        var _el$38 = _$getNextElement(_tmpl$20),
+          _el$39 = _el$38.firstChild,
+          _el$41 = _el$39.nextSibling,
+          [_el$42, _co$7] = _$getNextMarker(_el$41.nextSibling);
+        _$insert(_el$39, () => props.context);
+        _$insert(_el$38, _$createComponent(Show, {
           get when() {
             return props.contextMeta;
           },
           get children() {
-            var _el$39 = _$getNextElement(_tmpl$18);
-            _$insert(_el$39, () => props.contextMeta);
-            return _el$39;
+            var _el$40 = _$getNextElement(_tmpl$19);
+            _$insert(_el$40, () => props.contextMeta);
+            return _el$40;
           }
-        }), _el$41, _co$7);
-        return _el$37;
+        }), _el$42, _co$7);
+        return _el$38;
       }
-    }), _el$46, _co$8);
-    _$insert(_el$43, () => label());
-    _$insert(_el$36, _$createComponent(Show, {
+    }), _el$47, _co$8);
+    _$insert(_el$44, () => label());
+    _$insert(_el$37, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$44 = _$getNextElement(_tmpl$20);
-        _$insert(_el$44, () => props.description);
-        return _el$44;
+        var _el$45 = _$getNextElement(_tmpl$21);
+        _$insert(_el$45, () => props.description);
+        return _el$45;
       }
-    }), _el$48, _co$9);
-    _$effect(() => _$setAttribute(_el$42, "data-marquee", labelSlot()?.marquee ?? props.variant !== "card" ? "true" : "false"));
-    return _el$36;
+    }), _el$49, _co$9);
+    _$effect(() => _$setAttribute(_el$43, "data-marquee", labelSlot()?.marquee ?? props.variant !== "card" ? "true" : "false"));
+    return _el$37;
   })(), _$createComponent(Show, {
     get when() {
       return meta();
     },
     children: value => (() => {
-      var _el$50 = _$getNextElement(_tmpl$23);
-      _$insert(_el$50, value);
-      _$effect(() => _$setAttribute(_el$50, "data-visibility", metaVisibility() === "hover" ? "hover" : undefined));
-      return _el$50;
+      var _el$51 = _$getNextElement(_tmpl$24);
+      _$insert(_el$51, value);
+      _$effect(() => _$setAttribute(_el$51, "data-visibility", metaVisibility() === "hover" ? "hover" : undefined));
+      return _el$51;
     })()
   })];
   const singleAction = () => {
@@ -953,9 +969,9 @@ function AppWorkspaceSidebarItem(props) {
       props.onActionClick?.(event);
     };
     const content = () => actionSlot()?.children ?? (() => {
-      var _el$51 = _$getNextElement(_tmpl$22);
-      _$effect(() => _$className(_el$51, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
-      return _el$51;
+      var _el$52 = _$getNextElement(_tmpl$23);
+      _$effect(() => _$className(_el$52, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$52;
     })();
     return _$createComponent(Show, {
       get when() {
@@ -968,16 +984,16 @@ function AppWorkspaceSidebarItem(props) {
           },
           get fallback() {
             return (() => {
-              var _el$53 = _$getNextElement(_tmpl$25);
-              _el$53.$$click = select;
-              _$insert(_el$53, content);
+              var _el$54 = _$getNextElement(_tmpl$26);
+              _el$54.$$click = select;
+              _$insert(_el$54, 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);
+                _v$48 !== _p$.e && _$setProperty(_el$54, "disabled", _p$.e = _v$48);
+                _v$49 !== _p$.t && _$setAttribute(_el$54, "data-visibility", _p$.t = _v$49);
+                _v$50 !== _p$.a && _$setAttribute(_el$54, "aria-label", _p$.a = _v$50);
                 return _p$;
               }, {
                 e: undefined,
@@ -985,20 +1001,20 @@ function AppWorkspaceSidebarItem(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$53;
+              return _el$54;
             })();
           },
           get children() {
-            var _el$52 = _$getNextElement(_tmpl$24);
-            _el$52.$$click = select;
-            _$insert(_el$52, content);
+            var _el$53 = _$getNextElement(_tmpl$25);
+            _el$53.$$click = select;
+            _$insert(_el$53, 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);
+              _v$45 !== _p$.e && _$setAttribute(_el$53, "href", _p$.e = _v$45);
+              _v$46 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$46);
+              _v$47 !== _p$.a && _$setAttribute(_el$53, "aria-label", _p$.a = _v$47);
               return _p$;
             }, {
               e: undefined,
@@ -1006,7 +1022,7 @@ function AppWorkspaceSidebarItem(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$52;
+            return _el$53;
           }
         });
       }
@@ -1242,53 +1258,53 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          var _el$54 = _$getNextElement(_tmpl$26),
-            _el$55 = _el$54.firstChild;
+          var _el$55 = _$getNextElement(_tmpl$27),
+            _el$56 = _el$55.firstChild;
           _$effect(_p$ => {
             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);
+            _v$51 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$51);
+            _v$52 !== _p$.t && _$className(_el$56, _p$.t = _v$52);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$54;
+          return _el$55;
         }
       }), (() => {
-        var _el$56 = _$getNextElement(_tmpl$27),
-          _el$57 = _el$56.firstChild;
-        _$insert(_el$57, () => item.label);
-        return _el$56;
+        var _el$57 = _$getNextElement(_tmpl$28),
+          _el$58 = _el$57.firstChild;
+        _$insert(_el$58, () => item.label);
+        return _el$57;
       })(), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          var _el$58 = _$getNextElement(_tmpl$28);
-          _$insert(_el$58, () => item.meta);
+          var _el$59 = _$getNextElement(_tmpl$29);
+          _$insert(_el$59, () => item.meta);
           _$effect(_p$ => {
             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);
+            _v$53 !== _p$.e && _$className(_el$59, _p$.e = _v$53);
+            _v$54 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$54);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$58;
+          return _el$59;
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          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;
+          var _el$60 = _$getNextElement(_tmpl$30),
+            _el$61 = _el$60.firstChild;
+          _$effect(() => _$className(_el$61, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$60;
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1344,43 +1360,43 @@ const AppWorkspaceNavTree = props => {
         children: rowContent
       });
       return (() => {
-        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 _el$62 = _$getNextElement(_tmpl$32),
+          _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$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, {
+        typeof _ref$2 === "function" ? _$use(_ref$2, _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, {
           get when() {
             return _$memo(() => !!hasChildren())() && isExpanded(item.id);
           },
           get children() {
-            var _el$62 = _$getNextElement(_tmpl$30);
-            _$insert(_el$62, () => renderItems(nested, depth + 1, item.id));
-            return _el$62;
+            var _el$63 = _$getNextElement(_tmpl$31);
+            _$insert(_el$63, () => renderItems(nested, depth + 1, item.id));
+            return _el$63;
           }
-        }), _el$66, _co$1);
+        }), _el$67, _co$1);
         _$effect(_p$ => {
           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);
+          _v$55 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$55);
+          _v$56 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$56);
+          _v$57 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$57);
+          _v$58 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$58);
+          _v$59 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$59);
           return _p$;
         }, {
           e: undefined,
@@ -1390,59 +1406,59 @@ const AppWorkspaceNavTree = props => {
           i: undefined
         });
         _$runHydrationEvents();
-        return _el$61;
+        return _el$62;
       })();
     }
   });
   return (() => {
-    var _el$67 = _$getNextElement(_tmpl$32);
+    var _el$68 = _$getNextElement(_tmpl$33);
     var _ref$3 = root;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$67) : root = _el$67;
-    _$insert(_el$67, () => renderItems(roots, 0));
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$68) : root = _el$68;
+    _$insert(_el$68, () => renderItems(roots, 0));
     _$effect(_p$ => {
       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);
+      _v$60 !== _p$.e && _$className(_el$68, _p$.e = _v$60);
+      _v$61 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$61);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$67;
+    return _el$68;
   })();
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => (() => {
-  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({
+  var _el$69 = _$getNextElement(_tmpl$34),
+    _el$71 = _el$69.firstChild,
+    [_el$72, _co$10] = _$getNextMarker(_el$71.nextSibling),
+    _el$70 = _el$72.nextSibling;
+  _$spread(_el$69, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$68, _$createComponent(Show, {
+  _$insert(_el$69, _$createComponent(Show, {
     get when() {
       return props.title;
     },
     children: title => (() => {
-      var _el$72 = _$getNextElement(_tmpl$12);
-      _$insert(_el$72, title);
-      return _el$72;
+      var _el$73 = _$getNextElement(_tmpl$13);
+      _$insert(_el$73, title);
+      return _el$73;
     })()
-  }), _el$71, _co$10);
-  _$insert(_el$69, () => props.children);
-  _$effect(() => _$setAttribute(_el$69, "data-columns", props.columns ?? 2));
+  }), _el$72, _co$10);
+  _$insert(_el$70, () => props.children);
+  _$effect(() => _$setAttribute(_el$70, "data-columns", props.columns ?? 2));
   _$runHydrationEvents();
-  return _el$68;
+  return _el$69;
 })();
 const AppWorkspaceSidebarIconAction = props => {
   const content = (() => {
-    var _el$73 = _$getNextElement(_tmpl$34);
-    _$effect(() => _$className(_el$73, iconClass(props.icon)));
-    return _el$73;
+    var _el$74 = _$getNextElement(_tmpl$35);
+    _$effect(() => _$className(_el$74, iconClass(props.icon)));
+    return _el$74;
   })();
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
@@ -1455,8 +1471,8 @@ const AppWorkspaceSidebarIconAction = props => {
     ...modeAttrs(props.sidebarMode)
   });
   if (!props.href || props.disabled) return (() => {
-    var _el$74 = _$getNextElement(_tmpl$14);
-    _$spread(_el$74, _$mergeProps(attrs, {
+    var _el$75 = _$getNextElement(_tmpl$15);
+    _$spread(_el$75, _$mergeProps(attrs, {
       get disabled() {
         return props.disabled;
       },
@@ -1464,13 +1480,13 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$74, content);
+    _$insert(_el$75, content);
     _$runHydrationEvents();
-    return _el$74;
+    return _el$75;
   })();
   if (props.navigation !== "enhanced" || !props.onNavigate) return (() => {
-    var _el$75 = _$getNextElement(_tmpl$15);
-    _$spread(_el$75, _$mergeProps({
+    var _el$76 = _$getNextElement(_tmpl$16);
+    _$spread(_el$76, _$mergeProps({
       get href() {
         return props.href;
       }
@@ -1479,9 +1495,9 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$75, content);
+    _$insert(_el$76, content);
     _$runHydrationEvents();
-    return _el$75;
+    return _el$76;
   })();
   return _$createComponent(Link, _$mergeProps({
     get href() {
@@ -1526,21 +1542,21 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get children() {
-      var _el$76 = _$getNextElement(_tmpl$35);
+      var _el$77 = _$getNextElement(_tmpl$36);
       var _ref$4 = root;
-      typeof _ref$4 === "function" ? _$use(_ref$4, _el$76) : root = _el$76;
-      _$insert(_el$76, () => props.children);
+      typeof _ref$4 === "function" ? _$use(_ref$4, _el$77) : root = _el$77;
+      _$insert(_el$77, () => props.children);
       _$effect(_p$ => {
         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);
+        _v$62 !== _p$.e && _$className(_el$77, _p$.e = _v$62);
+        _v$63 !== _p$.t && _$setAttribute(_el$77, "data-mobile-surface", _p$.t = _v$63);
+        _v$64 !== _p$.a && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.a = _v$64);
+        _v$65 !== _p$.o && _$setAttribute(_el$77, "data-workspace-resizable", _p$.o = _v$65);
+        _p$.i = _$style(_el$77, _v$66, _p$.i);
         return _p$;
       }, {
         e: undefined,
@@ -1549,7 +1565,7 @@ const AppWorkspace = props => {
         o: undefined,
         i: undefined
       });
-      return _el$76;
+      return _el$77;
     }
   });
 };
@@ -1562,10 +1578,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Content = props => (() => {
-  var _el$77 = _$getNextElement(_tmpl$2);
-  _$insert(_el$77, () => props.children);
-  _$effect(() => _$className(_el$77, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$77;
+  var _el$78 = _$getNextElement(_tmpl$2);
+  _$insert(_el$78, () => props.children);
+  _$effect(() => _$className(_el$78, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$78;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;