@k2b/ui 0.17.0 → 0.19.0

package/dist/browser/layout/AppWorkspace.js

@@ -32,30 +32,35 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspac
   _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>`);
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-mention aria-hidden=true>@`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-muted aria-hidden=true><i class="ti ti-bell-off">`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-count>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status><!$><!/><!$><!/><span class=k2b-app-workspace__sidebar-status-unread aria-hidden=true></span><span class=k2b-sr-only>, <!$><!/>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-status-dot>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<button type=button>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div><!$><!/><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon aria-hidden=true>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context-meta>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-context><span class=k2b-app-workspace__sidebar-item-context-label></span><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-description>`),
+  _tmpl$27 = /*#__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$28 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-meta>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<a class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<button type=button class=k2b-app-workspace__sidebar-item-action>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-icon><i>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__sidebar-item-label><span class=k2b-app-workspace__sidebar-item-label-text>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<span class=k2b-app-workspace__nav-tree-toggle data-k2b-nav-tree-toggle aria-hidden=true><i>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-group role=group>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-app-workspace__nav-tree-node role=treeitem><!$><!/><!$><!/>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<div role=tree>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<section><!$><!/><div class=k2b-app-workspace__sidebar-icon-grid>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$41 = /*#__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 { children, createContext, createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, useContext } from "solid-js";
 import { useUiMessages } from "../intl/messages";
 import { APP_WORKSPACE_SIDEBAR_HIDE_EVENT, 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";
@@ -84,10 +89,11 @@ const sidebarChildSlot = value => Boolean(value && typeof value === "object" &&
 const sidebarItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && [SIDEBAR_ITEM_ICON, SIDEBAR_ITEM_LABEL, SIDEBAR_ITEM_META, SIDEBAR_ITEM_ACTION].includes(value.kind));
 const navTreeItemSlot = value => Boolean(value && typeof value === "object" && "kind" in value && value.kind === NAV_TREE_ITEM);
 function ResizeHandle(props) {
+  const messages = useUiMessages();
   return (() => {
     var _el$ = _$getNextElement(_tmpl$);
     _$effect(_p$ => {
-      var _v$ = props.label ?? (props.kind === "sidebar" ? "Resize navigation" : props.kind === "pane" ? "Resize workspace pane" : props.kind === "detail" ? "Resize detail panel" : "Resize bottom drawer"),
+      var _v$ = props.label ?? (props.kind === "sidebar" ? messages().resizeNavigation : props.kind === "pane" ? messages().resizeWorkspacePane : props.kind === "detail" ? messages().resizeDetailPanel : messages().resizeBottomDrawer),
         _v$2 = props.controls,
         _v$3 = props.kind === "drawer" ? "horizontal" : "vertical",
         _v$4 = props.minSize,
@@ -135,6 +141,14 @@ function ResizeHandle(props) {
     return _el$;
   })();
 }
+
+/**
+ * Unread state for the trailing `meta` slot. Every mark keeps a fixed width,
+ * so the row keeps its height and the label its start in every state.
+ */
+
+/** One requested place for an item among its unchanged siblings. */
+
 const modeAttrs = mode => mode && mode !== "always" ? {
   "data-sidebar-mode": mode
 } : {};
@@ -146,6 +160,13 @@ const scrollAttrs = key => key ? {
   "data-scroll-preserve": key
 } : {};
 const iconClass = (icon, fallback = "ti-circle") => icon?.startsWith("ti ") ? icon : `ti ${icon || fallback}`;
+/** A named icon is an image screen readers announce; any other icon is decoration. */
+const iconAccessibility = label => label ? {
+  role: "img",
+  "aria-label": label
+} : {
+  "aria-hidden": true
+};
 function AppWorkspaceMainPane(props) {
   return {
     kind: MAIN_PANE,
@@ -771,6 +792,78 @@ const AppWorkspaceSidebarItemActions = props => (() => {
   _$effect(() => _$setAttribute(_el$28, "data-visibility", props.visibility === "hover" ? "hover" : undefined));
   return _el$28;
 })();
+const AppWorkspaceSidebarItemStatus = props => {
+  const messages = useUiMessages();
+  const count = () => typeof props.unread === "number" && props.unread >= 1 ? Math.floor(props.unread) : 0;
+  const dot = () => props.unread === true;
+  // The marks are decorative; the row's accessible name gets one phrase instead,
+  // which says no more than the "99+" a capped count shows.
+  const description = () => [count() > 99 ? messages().sidebarUnreadMany : count() ? messages().sidebarUnread({
+    count: count()
+  }) : dot() ? messages().sidebarNewActivity : "", props.mention ? messages().sidebarMentioned : "", props.muted ? messages().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, {
+    get when() {
+      return description();
+    },
+    get children() {
+      var _el$29 = _$getNextElement(_tmpl$18),
+        _el$38 = _el$29.firstChild,
+        [_el$39, _co$6] = _$getNextMarker(_el$38.nextSibling),
+        _el$40 = _el$39.nextSibling,
+        [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling),
+        _el$32 = _el$41.nextSibling,
+        _el$34 = _el$32.nextSibling,
+        _el$35 = _el$34.firstChild,
+        _el$36 = _el$35.nextSibling,
+        [_el$37, _co$5] = _$getNextMarker(_el$36.nextSibling);
+      _$insert(_el$29, _$createComponent(Show, {
+        get when() {
+          return props.mention;
+        },
+        get children() {
+          return _$getNextElement(_tmpl$15);
+        }
+      }), _el$39, _co$6);
+      _$insert(_el$29, _$createComponent(Show, {
+        get when() {
+          return props.muted;
+        },
+        get children() {
+          return _$getNextElement(_tmpl$16);
+        }
+      }), _el$41, _co$7);
+      _$insert(_el$32, _$createComponent(Show, {
+        get when() {
+          return count();
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return dot();
+            },
+            get children() {
+              return _$getNextElement(_tmpl$19);
+            }
+          });
+        },
+        get children() {
+          var _el$33 = _$getNextElement(_tmpl$17);
+          _$insert(_el$33, (() => {
+            var _c$ = _$memo(() => count() > 99);
+            return () => _c$() ? "99+" : count();
+          })());
+          _$effect(() => _$setAttribute(_el$33, "data-mention", props.mention ? "true" : undefined));
+          return _el$33;
+        }
+      }));
+      _$insert(_el$34, description, _el$37, _co$5);
+      _$effect(() => _$setAttribute(_el$29, "data-unread", count() ? "count" : dot() ? "dot" : undefined));
+      return _el$29;
+    }
+  });
+};
 /** 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 ?? ""}`;
@@ -796,8 +889,8 @@ function AppWorkspaceSidebarRow(props) {
       },
       get fallback() {
         return (() => {
-          var _el$29 = _$getNextElement(_tmpl$15);
-          _$spread(_el$29, _$mergeProps(attrs, {
+          var _el$43 = _$getNextElement(_tmpl$20);
+          _$spread(_el$43, _$mergeProps(attrs, {
             get tabIndex() {
               return props.tabIndex;
             },
@@ -808,9 +901,9 @@ function AppWorkspaceSidebarRow(props) {
               return props.onClick;
             }
           }), false, true);
-          _$insert(_el$29, () => props.children);
+          _$insert(_el$43, () => props.children);
           _$runHydrationEvents();
-          return _el$29;
+          return _el$43;
         })();
       },
       get children() {
@@ -820,8 +913,8 @@ function AppWorkspaceSidebarRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$30 = _$getNextElement(_tmpl$16);
-              _$spread(_el$30, _$mergeProps({
+              var _el$44 = _$getNextElement(_tmpl$21);
+              _$spread(_el$44, _$mergeProps({
                 get href() {
                   return props.href;
                 }
@@ -836,9 +929,9 @@ function AppWorkspaceSidebarRow(props) {
                   return props.onClick;
                 }
               }), false, true);
-              _$insert(_el$30, () => props.children);
+              _$insert(_el$44, () => props.children);
               _$runHydrationEvents();
-              return _el$30;
+              return _el$44;
             })();
           },
           get children() {
@@ -884,22 +977,22 @@ function AppWorkspaceSidebarRow(props) {
       });
     },
     get children() {
-      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, {
+      var _el$45 = _$getNextElement(_tmpl$22),
+        _el$46 = _el$45.firstChild,
+        [_el$47, _co$8] = _$getNextMarker(_el$46.nextSibling),
+        _el$48 = _el$47.nextSibling,
+        [_el$49, _co$9] = _$getNextMarker(_el$48.nextSibling);
+      _$spread(_el$45, _$mergeProps(common, {
         get ["data-disabled"]() {
           return props.disabled ? "true" : undefined;
         }
       }), false, true);
-      _$insert(_el$31, _$createComponent(Control, {
+      _$insert(_el$45, _$createComponent(Control, {
         grouped: true
-      }), _el$33, _co$5);
-      _$insert(_el$31, () => props.actions, _el$35, _co$6);
+      }), _el$47, _co$8);
+      _$insert(_el$45, () => props.actions, _el$49, _co$9);
       _$runHydrationEvents();
-      return _el$31;
+      return _el$45;
     }
   });
 }
@@ -917,7 +1010,11 @@ function AppWorkspaceSidebarItem(props) {
   const label = () => labelSlot()?.children ?? (legacy().length === 1 ? legacy()[0] : legacy());
   const icon = () => iconSlot()?.icon ?? props.icon;
   const iconContent = () => iconSlot()?.children;
-  const meta = () => metaSlot()?.children ?? props.meta;
+  // Resolved first, so a component that renders nothing, such as a status with
+  // nothing to show, leaves no empty slot in the browser either.
+  const meta = children(() => metaSlot()?.children ?? props.meta);
+  const hasMeta = () => meta.toArray().some(Boolean);
+  const metaId = createUniqueId();
   const metaVisibility = () => metaSlot()?.visibility ?? props.metaVisibility;
   const customActions = () => resolvedActions();
   const hasCustomActions = () => Boolean(customActions());
@@ -927,68 +1024,77 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      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;
+      var _el$50 = _$getNextElement(_tmpl$23);
+      _$insert(_el$50, () => iconContent() ?? (() => {
+        var _el$65 = _$getNextElement(_tmpl$29);
+        _$effect(() => _$className(_el$65, iconClass(icon())));
+        return _el$65;
       })());
-      return _el$36;
+      return _el$50;
     }
   }), (() => {
-    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, {
+    var _el$51 = _$getNextElement(_tmpl$27),
+      _el$60 = _el$51.firstChild,
+      [_el$61, _co$1] = _$getNextMarker(_el$60.nextSibling),
+      _el$57 = _el$61.nextSibling,
+      _el$58 = _el$57.firstChild,
+      _el$62 = _el$57.nextSibling,
+      [_el$63, _co$10] = _$getNextMarker(_el$62.nextSibling);
+    _$insert(_el$51, _$createComponent(Show, {
       get when() {
         return props.context || props.contextMeta;
       },
       get children() {
-        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, {
+        var _el$52 = _$getNextElement(_tmpl$25),
+          _el$53 = _el$52.firstChild,
+          _el$55 = _el$53.nextSibling,
+          [_el$56, _co$0] = _$getNextMarker(_el$55.nextSibling);
+        _$insert(_el$53, () => props.context);
+        _$insert(_el$52, _$createComponent(Show, {
           get when() {
             return props.contextMeta;
           },
           get children() {
-            var _el$40 = _$getNextElement(_tmpl$19);
-            _$insert(_el$40, () => props.contextMeta);
-            return _el$40;
+            var _el$54 = _$getNextElement(_tmpl$24);
+            _$insert(_el$54, () => props.contextMeta);
+            return _el$54;
           }
-        }), _el$42, _co$7);
-        return _el$38;
+        }), _el$56, _co$0);
+        return _el$52;
       }
-    }), _el$47, _co$8);
-    _$insert(_el$44, () => label());
-    _$insert(_el$37, _$createComponent(Show, {
+    }), _el$61, _co$1);
+    _$insert(_el$58, () => label());
+    _$insert(_el$51, _$createComponent(Show, {
       get when() {
         return props.description;
       },
       get children() {
-        var _el$45 = _$getNextElement(_tmpl$21);
-        _$insert(_el$45, () => props.description);
-        return _el$45;
+        var _el$59 = _$getNextElement(_tmpl$26);
+        _$insert(_el$59, () => props.description);
+        return _el$59;
       }
-    }), _el$49, _co$9);
-    _$effect(() => _$setAttribute(_el$43, "data-marquee", labelSlot()?.marquee ?? (props.variant ?? "row") === "row" ? "true" : "false"));
-    return _el$37;
+    }), _el$63, _co$10);
+    _$effect(() => _$setAttribute(_el$57, "data-marquee", labelSlot()?.marquee ?? (props.variant ?? "row") === "row" ? "true" : "false"));
+    return _el$51;
   })(), _$createComponent(Show, {
     get when() {
-      return meta();
+      return hasMeta();
     },
-    children: value => (() => {
-      var _el$51 = _$getNextElement(_tmpl$24);
-      _$insert(_el$51, value);
-      _$effect(() => _$setAttribute(_el$51, "data-visibility", metaVisibility() === "hover" ? "hover" : undefined));
-      return _el$51;
-    })()
+    get children() {
+      var _el$64 = _$getNextElement(_tmpl$28);
+      _$insert(_el$64, meta);
+      _$effect(_p$ => {
+        var _v$49 = props.preview?.trigger === "row" ? metaId : undefined,
+          _v$50 = metaVisibility() === "hover" ? "hover" : undefined;
+        _v$49 !== _p$.e && _$setAttribute(_el$64, "id", _p$.e = _v$49);
+        _v$50 !== _p$.t && _$setAttribute(_el$64, "data-visibility", _p$.t = _v$50);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      return _el$64;
+    }
   })];
   const singleAction = () => {
     const label = () => actionSlot()?.label ?? props.actionLabel ?? messages().rowAction;
@@ -1003,9 +1109,9 @@ function AppWorkspaceSidebarItem(props) {
       props.onActionClick?.(event);
     };
     const content = () => actionSlot()?.children ?? (() => {
-      var _el$52 = _$getNextElement(_tmpl$23);
-      _$effect(() => _$className(_el$52, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
-      return _el$52;
+      var _el$66 = _$getNextElement(_tmpl$29);
+      _$effect(() => _$className(_el$66, iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots")));
+      return _el$66;
     })();
     return _$createComponent(Show, {
       get when() {
@@ -1018,16 +1124,16 @@ function AppWorkspaceSidebarItem(props) {
           },
           get fallback() {
             return (() => {
-              var _el$54 = _$getNextElement(_tmpl$26);
-              _el$54.$$click = select;
-              _$insert(_el$54, content);
+              var _el$68 = _$getNextElement(_tmpl$31);
+              _el$68.$$click = select;
+              _$insert(_el$68, content);
               _$effect(_p$ => {
-                var _v$52 = actionSlot()?.disabled,
-                  _v$53 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                  _v$54 = label();
-                _v$52 !== _p$.e && _$setProperty(_el$54, "disabled", _p$.e = _v$52);
-                _v$53 !== _p$.t && _$setAttribute(_el$54, "data-visibility", _p$.t = _v$53);
-                _v$54 !== _p$.a && _$setAttribute(_el$54, "aria-label", _p$.a = _v$54);
+                var _v$54 = actionSlot()?.disabled,
+                  _v$55 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                  _v$56 = label();
+                _v$54 !== _p$.e && _$setProperty(_el$68, "disabled", _p$.e = _v$54);
+                _v$55 !== _p$.t && _$setAttribute(_el$68, "data-visibility", _p$.t = _v$55);
+                _v$56 !== _p$.a && _$setAttribute(_el$68, "aria-label", _p$.a = _v$56);
                 return _p$;
               }, {
                 e: undefined,
@@ -1035,20 +1141,20 @@ function AppWorkspaceSidebarItem(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$54;
+              return _el$68;
             })();
           },
           get children() {
-            var _el$53 = _$getNextElement(_tmpl$25);
-            _el$53.$$click = select;
-            _$insert(_el$53, content);
+            var _el$67 = _$getNextElement(_tmpl$30);
+            _el$67.$$click = select;
+            _$insert(_el$67, content);
             _$effect(_p$ => {
-              var _v$49 = actionSlot()?.href,
-                _v$50 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
-                _v$51 = label();
-              _v$49 !== _p$.e && _$setAttribute(_el$53, "href", _p$.e = _v$49);
-              _v$50 !== _p$.t && _$setAttribute(_el$53, "data-visibility", _p$.t = _v$50);
-              _v$51 !== _p$.a && _$setAttribute(_el$53, "aria-label", _p$.a = _v$51);
+              var _v$51 = actionSlot()?.href,
+                _v$52 = actionSlot()?.visibility === "hover" ? "hover" : undefined,
+                _v$53 = label();
+              _v$51 !== _p$.e && _$setAttribute(_el$67, "href", _p$.e = _v$51);
+              _v$52 !== _p$.t && _$setAttribute(_el$67, "data-visibility", _p$.t = _v$52);
+              _v$53 !== _p$.a && _$setAttribute(_el$67, "aria-label", _p$.a = _v$53);
               return _p$;
             }, {
               e: undefined,
@@ -1056,7 +1162,7 @@ function AppWorkspaceSidebarItem(props) {
               a: undefined
             });
             _$runHydrationEvents();
-            return _el$53;
+            return _el$67;
           }
         });
       }
@@ -1079,6 +1185,9 @@ function AppWorkspaceSidebarItem(props) {
       get viewportSize() {
         return preview().viewportSize;
       },
+      get describedBy() {
+        return hasMeta() ? metaId : undefined;
+      },
       get onOpenChange() {
         return preview().onOpenChange;
       },
@@ -1153,6 +1262,27 @@ const AppWorkspaceNavTreeItem = props => ({
   kind: NAV_TREE_ITEM,
   ...props
 });
+const NAV_TREE_DRAG_TYPE = "application/x-k2b-nav-tree-item";
+const callDragHandler = (handler, event) => {
+  if (typeof handler === "function") handler(event);else handler?.[0](handler[1], event);
+};
+
+/**
+ * The move that puts the sibling at `from` into the gap before `slot`
+ * (`siblings.length` is the gap after the last one), or `null` when its place
+ * would not change or it would pass an item that is not movable.
+ */
+const navTreeMove = (siblings, from, slot, parentId) => {
+  if (from < 0 || slot < 0 || slot > siblings.length || slot === from || slot === from + 1) return null;
+  const passed = slot < from ? siblings.slice(slot, from) : siblings.slice(from + 1, slot);
+  if (passed.some(sibling => !sibling.movable)) return null;
+  return {
+    id: siblings[from].id,
+    parentId,
+    beforeId: siblings[slot]?.id ?? null,
+    afterId: siblings[slot - 1]?.id ?? null
+  };
+};
 const AppWorkspaceNavTree = props => {
   let root;
   const resolved = children(() => props.children);
@@ -1197,16 +1327,48 @@ const AppWorkspaceNavTree = props => {
     });
   };
 
+  // Reordering: the dragged item and the gap the pointer marks. The application renders the new
+  // order; the item moved by keyboard takes focus back when its row mounts or changes place.
+  const [dragged, setDragged] = createSignal(null);
+  const [dropTarget, setDropTarget] = createSignal(null);
+  let claimedDragOver = null;
+  let refocusId = null;
+  const endDrag = () => {
+    setDragged(null);
+    setDropTarget(null);
+  };
+  const requestMove = (move, keepFocus) => {
+    if (!move || !props.onMove) return;
+    refocusId = keepFocus ? move.id : null;
+    props.onMove(move);
+  };
+
   // Items arrive through an accessor so a changed nested list reconciles rows by identity instead of rebuilding the list.
-  const renderItems = (value, depth, parentId) => _$createComponent(For, {
+  const renderItems = (siblings, depth, parentId) => _$createComponent(For, {
     get each() {
-      return navTreeItems(value());
+      return siblings();
     },
-    children: item => {
+    children: (item, place) => {
       const nested = createMemo(() => navTreeItems(item.children));
       const hasChildren = () => nested().length > 0;
       const selected = () => props.selectedId === item.id;
+      const siblingIndex = id => siblings().findIndex(sibling => sibling.id === id);
+      const movable = () => Boolean(props.onMove && item.movable && !item.disabled);
       let treeItem;
+      const ownRow = () => treeItem?.firstElementChild;
+
+      // A new row for the moved item, or the same row at its new place: moving a focused row drops its focus.
+      createEffect(() => {
+        place();
+        if (refocusId !== item.id) return;
+        queueMicrotask(() => {
+          if (refocusId !== item.id || !treeItem?.isConnected) return;
+          const active = treeItem.ownerDocument.activeElement;
+          if (!active || active === treeItem.ownerDocument.body) treeItem.focus({
+            preventScroll: true
+          });
+        });
+      });
       const activate = event => {
         if (item.disabled) return;
         treeItem?.focus({
@@ -1239,6 +1401,13 @@ const AppWorkspaceNavTree = props => {
       };
       const onKeyDown = event => {
         if (event.target !== event.currentTarget) return;
+        if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+          if (!movable()) return;
+          event.preventDefault();
+          const from = siblingIndex(item.id);
+          requestMove(navTreeMove(siblings(), from, event.key === "ArrowUp" ? from - 1 : from + 2, parentId ?? null), true);
+          return;
+        }
         if (event.altKey || event.ctrlKey || event.metaKey) return;
         const items = treeItemElements();
         const index = items.indexOf(event.currentTarget);
@@ -1292,53 +1461,50 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          var _el$55 = _$getNextElement(_tmpl$27),
-            _el$56 = _el$55.firstChild;
-          _$effect(_p$ => {
-            var _v$55 = usesIconDisclosure() ? "" : undefined,
-              _v$56 = iconClass(rowIcon());
-            _v$55 !== _p$.e && _$setAttribute(_el$55, "data-k2b-nav-tree-toggle", _p$.e = _v$55);
-            _v$56 !== _p$.t && _$className(_el$56, _p$.t = _v$56);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$55;
+          var _el$69 = _$getNextElement(_tmpl$32),
+            _el$70 = _el$69.firstChild;
+          _$spread(_el$69, _$mergeProps({
+            get ["data-k2b-nav-tree-toggle"]() {
+              return usesIconDisclosure() ? "" : undefined;
+            }
+          }, () => iconAccessibility(item.iconLabel)), false, true);
+          _$effect(() => _$className(_el$70, iconClass(rowIcon())));
+          _$runHydrationEvents();
+          return _el$69;
         }
       }), (() => {
-        var _el$57 = _$getNextElement(_tmpl$28),
-          _el$58 = _el$57.firstChild;
-        _$insert(_el$58, () => item.label);
-        return _el$57;
+        var _el$71 = _$getNextElement(_tmpl$33),
+          _el$72 = _el$71.firstChild;
+        _$insert(_el$72, () => item.label);
+        return _el$71;
       })(), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          var _el$59 = _$getNextElement(_tmpl$29);
-          _$insert(_el$59, () => item.meta);
+          var _el$73 = _$getNextElement(_tmpl$34);
+          _$insert(_el$73, () => item.meta);
           _$effect(_p$ => {
             var _v$57 = `k2b-app-workspace__sidebar-item-meta ${hasChildren() ? "" : "k2b-app-workspace__nav-tree-leaf-meta"}`,
               _v$58 = item.metaVisibility === "hover" ? "hover" : undefined;
-            _v$57 !== _p$.e && _$className(_el$59, _p$.e = _v$57);
-            _v$58 !== _p$.t && _$setAttribute(_el$59, "data-visibility", _p$.t = _v$58);
+            _v$57 !== _p$.e && _$className(_el$73, _p$.e = _v$57);
+            _v$58 !== _p$.t && _$setAttribute(_el$73, "data-visibility", _p$.t = _v$58);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$59;
+          return _el$73;
         }
       }), _$createComponent(Show, {
         get when() {
           return _$memo(() => !!hasChildren())() && !usesIconDisclosure();
         },
         get children() {
-          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;
+          var _el$74 = _$getNextElement(_tmpl$35),
+            _el$75 = _el$74.firstChild;
+          _$effect(() => _$className(_el$75, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`));
+          return _el$74;
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -1393,106 +1559,204 @@ const AppWorkspaceNavTree = props => {
         },
         children: rowContent
       });
+
+      // A gap is offered only next to a sibling's own row, never over its sub-items.
+      const dropMove = event => {
+        const drag = dragged();
+        const row = ownRow();
+        if (!drag || !event.dataTransfer?.types.includes(NAV_TREE_DRAG_TYPE)) return null;
+        if (drag.parentId !== (parentId ?? null) || drag.id === item.id || !row?.contains(event.target)) return null;
+        const rect = row.getBoundingClientRect();
+        const side = event.clientY < rect.top + rect.height / 2 ? "before" : "after";
+        const slot = siblingIndex(item.id) + (side === "after" ? 1 : 0);
+        const move = navTreeMove(siblings(), siblingIndex(drag.id), slot, parentId ?? null);
+        return move ? {
+          side,
+          move
+        } : null;
+      };
+      const onDragStart = event => {
+        const row = ownRow();
+        if (!movable() || !row?.contains(event.target)) return;
+        event.stopPropagation();
+        setDragged({
+          id: item.id,
+          parentId: parentId ?? null
+        });
+        if (!event.dataTransfer) return;
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData(NAV_TREE_DRAG_TYPE, item.id);
+        const rect = row.getBoundingClientRect();
+        event.dataTransfer.setDragImage(row, event.clientX - rect.left, event.clientY - rect.top);
+      };
+      const onDragOver = event => {
+        callDragHandler(item.onDragOver, event);
+        const target = dropMove(event);
+        if (!target) return;
+        event.preventDefault();
+        if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+        claimedDragOver = event;
+        setDropTarget({
+          id: item.id,
+          side: target.side
+        });
+      };
+      const onDrop = event => {
+        callDragHandler(item.onDrop, event);
+        const target = dropMove(event);
+        if (!target) return;
+        event.preventDefault();
+        event.stopPropagation();
+        endDrag();
+        requestMove(target.move, false);
+      };
       return (() => {
-        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 _el$76 = _$getNextElement(_tmpl$37),
+          _el$78 = _el$76.firstChild,
+          [_el$79, _co$11] = _$getNextMarker(_el$78.nextSibling),
+          _el$80 = _el$79.nextSibling,
+          [_el$81, _co$12] = _$getNextMarker(_el$80.nextSibling);
+        _el$76.addEventListener("drop", onDrop);
+        _$addEventListener(_el$76, "dragleave", item.onDragLeave);
+        _el$76.addEventListener("dragover", onDragOver);
+        _$addEventListener(_el$76, "dragenter", item.onDragEnter);
+        _el$76.addEventListener("dragstart", onDragStart);
+        _el$76.$$keydown = onKeyDown;
+        _el$76.addEventListener("focus", () => setFocusedId(item.id));
         var _ref$3 = treeItem;
-        typeof _ref$3 === "function" ? _$use(_ref$3, _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, {
+        typeof _ref$3 === "function" ? _$use(_ref$3, _el$76) : treeItem = _el$76;
+        _$setAttribute(_el$76, "aria-level", depth + 1);
+        _$setAttribute(_el$76, "data-k2b-nav-tree-parent-id", parentId);
+        _$insert(_el$76, row, _el$79, _co$11);
+        _$insert(_el$76, _$createComponent(Show, {
           get when() {
             return _$memo(() => !!hasChildren())() && isExpanded(item.id);
           },
           get children() {
-            var _el$63 = _$getNextElement(_tmpl$31);
-            _$insert(_el$63, () => renderItems(nested, depth + 1, item.id));
-            return _el$63;
+            var _el$77 = _$getNextElement(_tmpl$36);
+            _$insert(_el$77, () => renderItems(nested, depth + 1, item.id));
+            return _el$77;
           }
-        }), _el$67, _co$1);
+        }), _el$81, _co$12);
         _$effect(_p$ => {
-          var _v$59 = selected(),
-            _v$60 = hasChildren() ? isExpanded(item.id) : undefined,
-            _v$61 = item.disabled ? "true" : undefined,
-            _v$62 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
-            _v$63 = item.id;
-          _v$59 !== _p$.e && _$setAttribute(_el$62, "aria-selected", _p$.e = _v$59);
-          _v$60 !== _p$.t && _$setAttribute(_el$62, "aria-expanded", _p$.t = _v$60);
-          _v$61 !== _p$.a && _$setAttribute(_el$62, "aria-disabled", _p$.a = _v$61);
-          _v$62 !== _p$.o && _$setAttribute(_el$62, "tabindex", _p$.o = _v$62);
-          _v$63 !== _p$.i && _$setAttribute(_el$62, "data-k2b-nav-tree-id", _p$.i = _v$63);
+          var _v$59 = siblings().length,
+            _v$60 = place() + 1,
+            _v$61 = selected(),
+            _v$62 = hasChildren() ? isExpanded(item.id) : undefined,
+            _v$63 = item.disabled ? "true" : undefined,
+            _v$64 = item.disabled ? -1 : tabStopId() === item.id ? 0 : -1,
+            _v$65 = movable() ? true : undefined,
+            _v$66 = item.id,
+            _v$67 = dragged()?.id === item.id ? "" : undefined,
+            _v$68 = dropTarget()?.id === item.id ? dropTarget().side : undefined,
+            _v$69 = String(props.indented === false ? 0 : depth);
+          _v$59 !== _p$.e && _$setAttribute(_el$76, "aria-setsize", _p$.e = _v$59);
+          _v$60 !== _p$.t && _$setAttribute(_el$76, "aria-posinset", _p$.t = _v$60);
+          _v$61 !== _p$.a && _$setAttribute(_el$76, "aria-selected", _p$.a = _v$61);
+          _v$62 !== _p$.o && _$setAttribute(_el$76, "aria-expanded", _p$.o = _v$62);
+          _v$63 !== _p$.i && _$setAttribute(_el$76, "aria-disabled", _p$.i = _v$63);
+          _v$64 !== _p$.n && _$setAttribute(_el$76, "tabindex", _p$.n = _v$64);
+          _v$65 !== _p$.s && _$setAttribute(_el$76, "draggable", _p$.s = _v$65);
+          _v$66 !== _p$.h && _$setAttribute(_el$76, "data-k2b-nav-tree-id", _p$.h = _v$66);
+          _v$67 !== _p$.r && _$setAttribute(_el$76, "data-k2b-nav-tree-dragging", _p$.r = _v$67);
+          _v$68 !== _p$.d && _$setAttribute(_el$76, "data-k2b-nav-tree-drop", _p$.d = _v$68);
+          _v$69 !== _p$.l && _$setStyleProperty(_el$76, "--k2b-nav-tree-depth", _p$.l = _v$69);
           return _p$;
         }, {
           e: undefined,
           t: undefined,
           a: undefined,
           o: undefined,
-          i: undefined
+          i: undefined,
+          n: undefined,
+          s: undefined,
+          h: undefined,
+          r: undefined,
+          d: undefined,
+          l: undefined
         });
         _$runHydrationEvents();
-        return _el$62;
+        return _el$76;
       })();
     }
   });
+
+  // Any other click or focus is the person's choice; only the moved item itself keeps its claim.
+  const forgetRefocus = event => {
+    if (event.type === "pointerdown" || event.target?.dataset?.k2bNavTreeId !== refocusId) refocusId = null;
+  };
+  // A row replaced during a drag never receives its dragend; the next pointer movement means the drag is over.
+  const forgetDrag = () => {
+    if (dragged()) endDrag();
+  };
+  onMount(() => {
+    const doc = root?.ownerDocument;
+    doc?.addEventListener("pointerdown", forgetRefocus, true);
+    doc?.addEventListener("focusin", forgetRefocus, true);
+    doc?.addEventListener("pointermove", forgetDrag, true);
+    onCleanup(() => {
+      doc?.removeEventListener("pointerdown", forgetRefocus, true);
+      doc?.removeEventListener("focusin", forgetRefocus, true);
+      doc?.removeEventListener("pointermove", forgetDrag, true);
+    });
+  });
   return (() => {
-    var _el$68 = _$getNextElement(_tmpl$33);
+    var _el$82 = _$getNextElement(_tmpl$38);
+    _el$82.addEventListener("dragend", endDrag);
+    _el$82.addEventListener("dragleave", event => {
+      if (!root?.contains(event.relatedTarget)) setDropTarget(null);
+    });
+    _el$82.addEventListener("dragover", event => {
+      // Runs after the rows: a position no row claimed shows no gap.
+      if (claimedDragOver !== event) setDropTarget(null);
+    });
     var _ref$4 = root;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$68) : root = _el$68;
-    _$insert(_el$68, () => renderItems(roots, 0));
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$82) : root = _el$82;
+    _$insert(_el$82, () => renderItems(roots, 0));
     _$effect(_p$ => {
-      var _v$64 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
-        _v$65 = props.ariaLabel;
-      _v$64 !== _p$.e && _$className(_el$68, _p$.e = _v$64);
-      _v$65 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$65);
+      var _v$70 = `k2b-app-workspace__nav-tree ${props.class ?? ""}`,
+        _v$71 = props.ariaLabel;
+      _v$70 !== _p$.e && _$className(_el$82, _p$.e = _v$70);
+      _v$71 !== _p$.t && _$setAttribute(_el$82, "aria-label", _p$.t = _v$71);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$68;
+    return _el$82;
   })();
 };
 AppWorkspaceNavTree.Item = AppWorkspaceNavTreeItem;
 const AppWorkspaceSidebarIconGrid = props => (() => {
-  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({
+  var _el$83 = _$getNextElement(_tmpl$39),
+    _el$85 = _el$83.firstChild,
+    [_el$86, _co$13] = _$getNextMarker(_el$85.nextSibling),
+    _el$84 = _el$86.nextSibling;
+  _$spread(_el$83, _$mergeProps({
     get ["class"]() {
       return `k2b-app-workspace__sidebar-icon-grid-wrap ${props.class ?? ""}`;
     }
   }, () => modeAttrs(props.sidebarMode)), false, true);
-  _$insert(_el$69, _$createComponent(Show, {
+  _$insert(_el$83, _$createComponent(Show, {
     get when() {
       return props.title;
     },
     children: title => (() => {
-      var _el$73 = _$getNextElement(_tmpl$13);
-      _$insert(_el$73, title);
-      return _el$73;
+      var _el$87 = _$getNextElement(_tmpl$13);
+      _$insert(_el$87, title);
+      return _el$87;
     })()
-  }), _el$72, _co$10);
-  _$insert(_el$70, () => props.children);
-  _$effect(() => _$setAttribute(_el$70, "data-columns", props.columns ?? 2));
+  }), _el$86, _co$13);
+  _$insert(_el$84, () => props.children);
+  _$effect(() => _$setAttribute(_el$84, "data-columns", props.columns ?? 2));
   _$runHydrationEvents();
-  return _el$69;
+  return _el$83;
 })();
 const AppWorkspaceSidebarIconAction = props => {
   const content = (() => {
-    var _el$74 = _$getNextElement(_tmpl$35);
-    _$effect(() => _$className(_el$74, iconClass(props.icon)));
-    return _el$74;
+    var _el$88 = _$getNextElement(_tmpl$40);
+    _$effect(() => _$className(_el$88, iconClass(props.icon)));
+    return _el$88;
   })();
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
@@ -1505,8 +1769,8 @@ const AppWorkspaceSidebarIconAction = props => {
     ...modeAttrs(props.sidebarMode)
   });
   if (!props.href || props.disabled) return (() => {
-    var _el$75 = _$getNextElement(_tmpl$15);
-    _$spread(_el$75, _$mergeProps(attrs, {
+    var _el$89 = _$getNextElement(_tmpl$20);
+    _$spread(_el$89, _$mergeProps(attrs, {
       get disabled() {
         return props.disabled;
       },
@@ -1514,13 +1778,13 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$75, content);
+    _$insert(_el$89, content);
     _$runHydrationEvents();
-    return _el$75;
+    return _el$89;
   })();
   if (props.navigation !== "enhanced" || !props.onNavigate) return (() => {
-    var _el$76 = _$getNextElement(_tmpl$16);
-    _$spread(_el$76, _$mergeProps({
+    var _el$90 = _$getNextElement(_tmpl$21);
+    _$spread(_el$90, _$mergeProps({
       get href() {
         return props.href;
       }
@@ -1529,9 +1793,9 @@ const AppWorkspaceSidebarIconAction = props => {
         return props.onClick;
       }
     }), false, true);
-    _$insert(_el$76, content);
+    _$insert(_el$90, content);
     _$runHydrationEvents();
-    return _el$76;
+    return _el$90;
   })();
   return _$createComponent(Link, _$mergeProps({
     get href() {
@@ -1576,21 +1840,21 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get children() {
-      var _el$77 = _$getNextElement(_tmpl$36);
+      var _el$91 = _$getNextElement(_tmpl$41);
       var _ref$5 = root;
-      typeof _ref$5 === "function" ? _$use(_ref$5, _el$77) : root = _el$77;
-      _$insert(_el$77, () => props.children);
+      typeof _ref$5 === "function" ? _$use(_ref$5, _el$91) : root = _el$91;
+      _$insert(_el$91, () => props.children);
       _$effect(_p$ => {
-        var _v$66 = `k2b-app-workspace ${props.class ?? ""}`,
-          _v$67 = props.mobileSurface,
-          _v$68 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
-          _v$69 = props.resizable === false ? "false" : "true",
-          _v$70 = appWorkspaceLayoutStyle(initialLayoutState());
-        _v$66 !== _p$.e && _$className(_el$77, _p$.e = _v$66);
-        _v$67 !== _p$.t && _$setAttribute(_el$77, "data-mobile-surface", _p$.t = _v$67);
-        _v$68 !== _p$.a && _$setAttribute(_el$77, "data-sidebar-collapsed", _p$.a = _v$68);
-        _v$69 !== _p$.o && _$setAttribute(_el$77, "data-workspace-resizable", _p$.o = _v$69);
-        _p$.i = _$style(_el$77, _v$70, _p$.i);
+        var _v$72 = `k2b-app-workspace ${props.class ?? ""}`,
+          _v$73 = props.mobileSurface,
+          _v$74 = initialLayoutState()?.sidebarCollapsed === undefined ? undefined : String(initialLayoutState()?.sidebarCollapsed),
+          _v$75 = props.resizable === false ? "false" : "true",
+          _v$76 = appWorkspaceLayoutStyle(initialLayoutState());
+        _v$72 !== _p$.e && _$className(_el$91, _p$.e = _v$72);
+        _v$73 !== _p$.t && _$setAttribute(_el$91, "data-mobile-surface", _p$.t = _v$73);
+        _v$74 !== _p$.a && _$setAttribute(_el$91, "data-sidebar-collapsed", _p$.a = _v$74);
+        _v$75 !== _p$.o && _$setAttribute(_el$91, "data-workspace-resizable", _p$.o = _v$75);
+        _p$.i = _$style(_el$91, _v$76, _p$.i);
         return _p$;
       }, {
         e: undefined,
@@ -1599,7 +1863,7 @@ const AppWorkspace = props => {
         o: undefined,
         i: undefined
       });
-      return _el$77;
+      return _el$91;
     }
   });
 };
@@ -1612,10 +1876,10 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
   }
 });
 AppWorkspace.Content = props => (() => {
-  var _el$78 = _$getNextElement(_tmpl$2);
-  _$insert(_el$78, () => props.children);
-  _$effect(() => _$className(_el$78, `k2b-app-workspace__content ${props.class ?? ""}`));
-  return _el$78;
+  var _el$92 = _$getNextElement(_tmpl$2);
+  _$insert(_el$92, () => props.children);
+  _$effect(() => _$className(_el$92, `k2b-app-workspace__content ${props.class ?? ""}`));
+  return _el$92;
 })();
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
@@ -1632,6 +1896,7 @@ AppWorkspace.SidebarItemLabel = AppWorkspaceSidebarItemLabel;
 AppWorkspace.SidebarItemMeta = AppWorkspaceSidebarItemMeta;
 AppWorkspace.SidebarItemAction = AppWorkspaceSidebarItemAction;
 AppWorkspace.SidebarItemActions = AppWorkspaceSidebarItemActions;
+AppWorkspace.SidebarItemStatus = AppWorkspaceSidebarItemStatus;
 AppWorkspace.NavTree = AppWorkspaceNavTree;
 AppWorkspace.SidebarIconGrid = AppWorkspaceSidebarIconGrid;
 AppWorkspace.SidebarIconAction = AppWorkspaceSidebarIconAction;