@k2b/ui 0.24.0 → 0.26.0

package/dist/ssr/layout/AppWorkspace.js

@@ -27,31 +27,33 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$16 = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
   _tmpl$17 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
   _tmpl$18 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
-  _tmpl$19 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "", "<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span><span class=\"k2b-sr-only\">, ", "</span></span>"],
-  _tmpl$20 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
-  _tmpl$21 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$22 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
-  _tmpl$23 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
-  _tmpl$24 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
-  _tmpl$25 = ["<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$26 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
-  _tmpl$27 = ["<i", "></i>"],
-  _tmpl$28 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
-  _tmpl$29 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
-  _tmpl$30 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\"><span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span><span class=\"k2b-app-workspace__sidebar-item-description\">", "</span></span>"],
-  _tmpl$31 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$32 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
-  _tmpl$33 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
-  _tmpl$34 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
-  _tmpl$35 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
-  _tmpl$36 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
-  _tmpl$37 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
-  _tmpl$38 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$39 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
-  _tmpl$40 = ["<div class=\"k2b-app-workspace__head\"", ">", "", "</div>"],
-  _tmpl$41 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
-  _tmpl$42 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "", "</div>"],
-  _tmpl$43 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$19 = ["<span class=\"k2b-app-workspace__sidebar-status-unread\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$20 = ["<span class=\"k2b-sr-only\">, ", "</span>"],
+  _tmpl$21 = ["<span class=\"k2b-app-workspace__sidebar-status\"", ">", "</span>"],
+  _tmpl$22 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
+  _tmpl$23 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$24 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
+  _tmpl$25 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
+  _tmpl$26 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
+  _tmpl$27 = ["<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$28 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$29 = ["<i", "></i>"],
+  _tmpl$30 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$31 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$32 = ["<span class=\"k2b-app-workspace__sidebar-item-copy\"><span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span><span class=\"k2b-app-workspace__sidebar-item-description\">", "</span></span>"],
+  _tmpl$33 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$34 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$35 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"", "><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$36 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$37 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
+  _tmpl$38 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$39 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$40 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$41 = "<i class=\"ti ti-layout-sidebar\" aria-hidden=\"true\"></i>",
+  _tmpl$42 = ["<div class=\"k2b-app-workspace__head\"", ">", "", "</div>"],
+  _tmpl$43 = ["<h1 class=\"k2b-app-workspace__head-heading\" data-k2b-page-trail-title", ">", "</h1>"],
+  _tmpl$44 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "", "</div>"],
+  _tmpl$45 = ["<div class=\"", "\">", "</div>"];
 import { Link } from "@k2b/ssr/nav";
 import { children, createContext, createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
 import { isServer } from "solid-js/web";
@@ -61,7 +63,8 @@ import { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_D
 import { PageTitle, usePageTrail } from "./PageTitle";
 import { SidebarItemPreview } from "./SidebarItemPreview";
 import { AppWorkspaceSidebarSwitcher } from "./SidebarSwitcher";
-import { createScrollFade } from "./scroll-fade";
+import { createScrollFade, scrollFadeEdges } from "./scroll-fade";
+import { rememberSidebarScroll } from "./sidebar-scroll-memory";
 import { assertStableUiId, assertUniqueStableUiIds } from "./stable-id";
 import { useWorkspaceMessages } from "./workspace-messages";
 const ResizeContext = createContext(true);
@@ -454,20 +457,18 @@ 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, or on a deeper
-// page the item that contains it, 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"]\')||body.querySelector(\'[aria-current="true"]\');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("");
+// The inline script restores server markup while parsing; onMount restores a
+// client-rendered sidebar when an island replaces it. Both paths keep the
+// current item in view and set the fade before paint, repeating the restore
+// in the first frame when the whole document has its final layout. Only
+// pagehide stores the offset: restores before final layout can be clamped,
+// and remembering those programmatic scrolls would shrink the stored offset.
+// Memory is per scroll-preserve key (or page path) and sidebar position and
+// ends with the tab.
+const SIDEBAR_SCROLL_MEMORY_SCRIPT = `(${rememberSidebarScroll})(document.currentScript&&document.currentScript.previousElementSibling,${scrollFadeEdges})`;
 const AppWorkspaceSidebarBody = props => {
   let body;
+  onMount(() => onCleanup(rememberSidebarScroll(body, scrollFadeEdges)));
   createScrollFade(() => body, () => props.scrollFade !== false);
   return [_$ssrElement("div", _$mergeProps({
     get ["class"]() {
@@ -567,26 +568,29 @@ const AppWorkspaceSidebarItemStatus = props => {
   }) : dot() ? workspaceMessages().sidebarNewActivity : "", props.mention ? workspaceMessages().sidebarMentioned : "", props.muted ? workspaceMessages().sidebarMuted : ""].filter(Boolean).join(", ");
   // The unread slot stays reserved at the end, and the marks that change most
   // often sit outermost, so new activity or a mention never moves another mark.
-  return _$createComponent(Show, {
+  // The element itself stays when there is nothing to show: empty, it takes no
+  // space, and it still keeps the row's label on one line, so the first count
+  // never re-wraps the label and moves the rows below.
+  return _$ssr(_tmpl$21, _$ssrAttribute("data-unread", waiting() !== null ? _$escape(undefined, true) : count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", waiting() === null ? _$escape(undefined, true) : waiting() ? "count" : "zero", false), _$escape(_$createComponent(Show, {
     get when() {
       return description();
     },
     get children() {
-      return _$ssr(_tmpl$19, _$ssrAttribute("data-unread", waiting() !== null ? _$escape(undefined, true) : count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false) + _$ssrAttribute("data-waiting", waiting() === null ? _$escape(undefined, true) : waiting() ? "count" : "zero", false), _$escape(_$createComponent(Show, {
+      return [_$createComponent(Show, {
         get when() {
           return props.mention;
         },
         get children() {
           return _$ssr(_tmpl$16);
         }
-      })), _$escape(_$createComponent(Show, {
+      }), _$createComponent(Show, {
         get when() {
           return props.muted;
         },
         get children() {
           return _$ssr(_tmpl$17);
         }
-      })), _$escape(_$createComponent(Show, {
+      }), _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
         get when() {
           return count() || waiting() === 0;
         },
@@ -596,16 +600,16 @@ const AppWorkspaceSidebarItemStatus = props => {
               return dot();
             },
             get children() {
-              return _$ssr(_tmpl$20);
+              return _$ssr(_tmpl$22);
             }
           });
         },
         get children() {
           return _$ssr(_tmpl$18, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
         }
-      })), _$escape(description()));
+      }))), _$ssr(_tmpl$20, _$escape(description()))];
     }
-  });
+  })));
 };
 /** Shared visual and semantic row frame for flat sidebar items and tree items. */
 function AppWorkspaceSidebarRow(props) {
@@ -726,10 +730,11 @@ function AppWorkspaceSidebarItem(props) {
   const actionSlot = createMemo(() => slots().find(slot => slot.kind === SIDEBAR_ITEM_ACTION));
   const legacy = createMemo(() => values().filter(value => !sidebarItemSlot(value)));
   const label = () => labelSlot()?.children ?? (legacy().length === 1 ? legacy()[0] : legacy());
+  const oneLine = () => !(labelSlot()?.marquee ?? (props.variant ?? "row") === "row");
   const icon = () => iconSlot()?.icon ?? props.icon;
   const iconContent = () => iconSlot()?.children;
-  // Resolved first, so a component that renders nothing, such as a status with
-  // nothing to show, leaves no empty slot in the browser either.
+  // Resolved first, so metadata that renders nothing leaves no empty slot. An
+  // empty status still renders its element; the stylesheet hides that slot.
   const meta = children(() => metaSlot()?.children ?? props.meta);
   const hasMeta = () => meta.toArray().some(Boolean);
   const metaId = createUniqueId();
@@ -742,35 +747,35 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      return _$ssr(_tmpl$21, _$escape(iconContent() ?? _$ssr(_tmpl$27, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+      return _$ssr(_tmpl$23, _$escape(iconContent() ?? _$ssr(_tmpl$29, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
     }
-  }), _$ssr(_tmpl$25, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$27, _$escape(_$createComponent(Show, {
     get when() {
       return props.context || props.contextMeta;
     },
     get children() {
-      return _$ssr(_tmpl$23, _$escape(props.context), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$25, _$escape(props.context), _$escape(_$createComponent(Show, {
         get when() {
           return props.contextMeta;
         },
         get children() {
-          return _$ssr(_tmpl$22, _$escape(props.contextMeta));
+          return _$ssr(_tmpl$24, _$escape(props.contextMeta));
         }
       })));
     }
-  })), _$ssrAttribute("data-marquee", labelSlot()?.marquee ?? (props.variant ?? "row") === "row" ? "true" : "false", false), _$escape(label()), _$escape(_$createComponent(Show, {
+  })), _$ssrAttribute("data-lines", oneLine() ? "1" : _$escape(undefined, true), false) + _$ssrAttribute("data-label", !oneLine() && typeof label() === "string" ? _$escape(label(), true) : _$escape(undefined, true), false), _$escape(label()), _$escape(_$createComponent(Show, {
     get when() {
       return props.description;
     },
     get children() {
-      return _$ssr(_tmpl$24, _$escape(props.description));
+      return _$ssr(_tmpl$26, _$escape(props.description));
     }
   }))), _$createComponent(Show, {
     get when() {
       return hasMeta();
     },
     get children() {
-      return _$ssr(_tmpl$26, _$ssrAttribute("id", props.preview?.trigger === "row" ? _$escape(metaId, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(meta()));
+      return _$ssr(_tmpl$28, _$ssrAttribute("id", props.preview?.trigger === "row" ? _$escape(metaId, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(meta()));
     }
   })];
   const singleAction = () => {
@@ -785,7 +790,7 @@ function AppWorkspaceSidebarItem(props) {
       actionSlot()?.onSelect?.(event);
       props.onActionClick?.(event);
     };
-    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$27, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$29, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
     return _$createComponent(Show, {
       get when() {
         return Boolean(actionSlot() || props.actionIcon);
@@ -796,10 +801,10 @@ function AppWorkspaceSidebarItem(props) {
             return _$memo(() => !!actionSlot()?.href)() && !actionSlot()?.disabled;
           },
           get fallback() {
-            return _$ssr(_tmpl$29, _$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$31, _$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$28, _$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$30, _$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()));
           }
         });
       }
@@ -1105,31 +1110,31 @@ const AppWorkspaceNavTree = props => {
             get ["data-k2b-nav-tree-toggle"]() {
               return usesIconDisclosure() ? "" : undefined;
             }
-          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$27, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
+          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$29, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
         }
       }), _$createComponent(Show, {
         get when() {
           return item.description !== undefined;
         },
         get fallback() {
-          return _$ssr(_tmpl$33, _$escape(item.label));
+          return _$ssr(_tmpl$35, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label));
         },
         get children() {
-          return _$ssr(_tmpl$30, _$escape(item.label), _$escape(item.description));
+          return _$ssr(_tmpl$32, _$ssrAttribute("data-label", typeof item.label === "string" ? _$escape(item.label, true) : _$escape(undefined, true), false), _$escape(item.label), _$escape(item.description));
         }
       }), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          return _$ssr(_tmpl$31, `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$33, `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 _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          return _$ssr(_tmpl$32, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+          return _$ssr(_tmpl$34, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1236,12 +1241,12 @@ const AppWorkspaceNavTree = props => {
         endDrag();
         requestMove(target.move, false);
       };
-      return _$ssr(_tmpl$35, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-setsize", _$escape(siblings().length, true), false) + _$ssrAttribute("aria-posinset", _$escape(place(), 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("draggable", movable() ? _$escape(true, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false) + _$ssrAttribute("data-k2b-nav-tree-dragging", dragged()?.id === item.id ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-drop", dropTarget()?.id === item.id ? _$escape(dropTarget().side, true) : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-nav-tree-depth:", _$escape(String(props.indented === false ? 0 : depth), true)), _$escape(row()), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$37, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-setsize", _$escape(siblings().length, true), false) + _$ssrAttribute("aria-posinset", _$escape(place(), 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("draggable", movable() ? _$escape(true, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false) + _$ssrAttribute("data-k2b-nav-tree-dragging", dragged()?.id === item.id ? "" : _$escape(undefined, true), false) + _$ssrAttribute("data-k2b-nav-tree-drop", dropTarget()?.id === item.id ? _$escape(dropTarget().side, true) : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-nav-tree-depth:", _$escape(String(props.indented === false ? 0 : depth), true)), _$escape(row()), _$escape(_$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && isExpanded(item.id);
         },
         get children() {
-          return _$ssr(_tmpl$34, _$escape(renderItems(nested, depth + 1, item.id)));
+          return _$ssr(_tmpl$36, _$escape(renderItems(nested, depth + 1, item.id)));
         }
       })));
     }
@@ -1266,7 +1271,7 @@ const AppWorkspaceNavTree = props => {
       doc?.removeEventListener("pointermove", forgetDrag, true);
     });
   });
-  return _$ssr(_tmpl$36, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots, 0)));
+  return _$ssr(_tmpl$38, `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({
@@ -1278,9 +1283,9 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
     return props.title;
   },
   children: title => _$ssr(_tmpl$14, _$escape(title()))
-})), _$ssr(_tmpl$37, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+})), _$ssr(_tmpl$39, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
-  const content = _$ssr(_tmpl$38, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  const content = _$ssr(_tmpl$40, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
     title: props.label,
@@ -1338,7 +1343,7 @@ function AppWorkspaceHead(props) {
   const messages = useWorkspaceMessages();
   // A nested workspace is part of a page that already shows its title.
   const trail = props.nested ? () => undefined : usePageTrail();
-  return _$ssr(_tmpl$40, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false), _$escape(_$createComponent(IconButton, {
+  return _$ssr(_tmpl$42, _$ssrAttribute("data-trail", trail()?.ancestors.length ? "up" : trail() ? "title" : _$escape(undefined, true), false), _$escape(_$createComponent(IconButton, {
     "class": "k2b-app-workspace__head-toggle",
     get label() {
       return messages().showNavigation;
@@ -1349,7 +1354,7 @@ function AppWorkspaceHead(props) {
     "aria-expanded": "false",
     "data-app-workspace-sidebar-toggle": "",
     get children() {
-      return _$ssr(_tmpl$39);
+      return _$ssr(_tmpl$41);
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
@@ -1361,7 +1366,7 @@ function AppWorkspaceHead(props) {
       },
       as: "p",
       fallback: true
-    }), _$ssr(_tmpl$41, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
+    }), _$ssr(_tmpl$43, _$ssrAttribute("data-k2b-server", isServer ? "" : _$escape(undefined, true), false), _$escape(current().title))]
   })));
 }
 const AppWorkspace = props => {
@@ -1396,7 +1401,7 @@ const AppWorkspace = props => {
       return _$createComponent(WorkspaceContext.Provider, {
         value: workspace,
         get children() {
-          return _$ssr(_tmpl$42, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, 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(_$createComponent(AppWorkspaceHead, {
+          return _$ssr(_tmpl$44, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-flat", props.flat ? "true" : _$escape(undefined, 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(_$createComponent(AppWorkspaceHead, {
             sidebarId: sidebarId,
             nested: nested
           })), _$escape(props.children));
@@ -1413,7 +1418,7 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$43, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$45, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;