@k2b/ui 0.17.0 → 0.19.0

package/dist/ssr/layout/AppWorkspace.js

@@ -22,28 +22,32 @@ var _tmpl$ = ["<button type=\"button\" class=\"k2b-app-workspace__resize\" role=
   _tmpl$11 = ["<div", "", " class=\"k2b-app-workspace__sidebar-section-content\">", "</div>"],
   _tmpl$12 = ["<h2>", "</h2>"],
   _tmpl$13 = ["<div class=\"k2b-app-workspace__sidebar-item-actions\"", ">", "</div>"],
-  _tmpl$14 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$15 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
-  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
-  _tmpl$17 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
-  _tmpl$18 = ["<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$19 = ["<i", "></i>"],
-  _tmpl$20 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
-  _tmpl$21 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
-  _tmpl$22 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
-  _tmpl$23 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\"", " aria-hidden=\"true\"><i", "></i></span>"],
-  _tmpl$24 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
-  _tmpl$25 = ["<span class=\"", "\"", ">", "</span>"],
-  _tmpl$26 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
-  _tmpl$27 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
-  _tmpl$28 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", ">", "", "</div>"],
-  _tmpl$29 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
-  _tmpl$30 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
-  _tmpl$31 = ["<i", " aria-hidden=\"true\"></i>"],
-  _tmpl$32 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
-  _tmpl$33 = ["<div class=\"", "\">", "</div>"];
+  _tmpl$14 = "<span class=\"k2b-app-workspace__sidebar-status-mention\" aria-hidden=\"true\">@</span>",
+  _tmpl$15 = "<span class=\"k2b-app-workspace__sidebar-status-muted\" aria-hidden=\"true\"><i class=\"ti ti-bell-off\"></i></span>",
+  _tmpl$16 = ["<span class=\"k2b-app-workspace__sidebar-status-count\"", ">", "</span>"],
+  _tmpl$17 = ["<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$18 = "<span class=\"k2b-app-workspace__sidebar-status-dot\"></span>",
+  _tmpl$19 = ["<span class=\"k2b-app-workspace__sidebar-item-icon\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$20 = ["<span class=\"k2b-app-workspace__sidebar-item-context-meta\">", "</span>"],
+  _tmpl$21 = ["<span class=\"k2b-app-workspace__sidebar-item-context\"><span class=\"k2b-app-workspace__sidebar-item-context-label\">", "</span>", "</span>"],
+  _tmpl$22 = ["<span class=\"k2b-app-workspace__sidebar-item-description\">", "</span>"],
+  _tmpl$23 = ["<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$24 = ["<span class=\"k2b-app-workspace__sidebar-item-meta\"", ">", "</span>"],
+  _tmpl$25 = ["<i", "></i>"],
+  _tmpl$26 = ["<a", " class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</a>"],
+  _tmpl$27 = ["<button type=\"button\" class=\"k2b-app-workspace__sidebar-item-action\"", ">", "</button>"],
+  _tmpl$28 = ["<span class=\"k2b-app-workspace__sidebar-item-label\"><span class=\"k2b-app-workspace__sidebar-item-label-text\">", "</span></span>"],
+  _tmpl$29 = ["<span class=\"", "\"", ">", "</span>"],
+  _tmpl$30 = ["<span class=\"k2b-app-workspace__nav-tree-toggle\" data-k2b-nav-tree-toggle aria-hidden=\"true\"><i class=\"", "\"></i></span>"],
+  _tmpl$31 = ["<div class=\"k2b-app-workspace__nav-tree-group\" role=\"group\">", "</div>"],
+  _tmpl$32 = ["<div class=\"k2b-app-workspace__nav-tree-node\" role=\"treeitem\"", " style=\"", "\">", "", "</div>"],
+  _tmpl$33 = ["<div class=\"", "\" role=\"tree\"", ">", "</div>"],
+  _tmpl$34 = ["<div class=\"k2b-app-workspace__sidebar-icon-grid\"", ">", "</div>"],
+  _tmpl$35 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$36 = ["<div class=\"", "\" data-k2b-app-workspace", " style=\"", "\">", "</div>"],
+  _tmpl$37 = ["<div class=\"", "\">", "</div>"];
 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";
@@ -72,8 +76,17 @@ 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) {
-  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? "Resize navigation" : props.kind === "pane" ? "Resize workspace pane" : props.kind === "detail" ? "Resize detail panel" : "Resize bottom drawer"), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
+  const messages = useUiMessages();
+  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(props.label ?? (props.kind === "sidebar" ? messages().resizeNavigation : props.kind === "pane" ? messages().resizeWorkspacePane : props.kind === "detail" ? messages().resizeDetailPanel : messages().resizeBottomDrawer), true), false) + _$ssrAttribute("aria-controls", _$escape(props.controls, true), false) + _$ssrAttribute("aria-orientation", props.kind === "drawer" ? "horizontal" : "vertical", false) + _$ssrAttribute("aria-valuemin", _$escape(props.minSize, true), false) + _$ssrAttribute("aria-valuemax", _$escape(props.maxSize, true), false) + _$ssrAttribute("aria-valuenow", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-app-workspace-resize", _$escape(props.kind, true), false) + _$ssrAttribute("data-workspace-panel-id", _$escape(props.panelId, true), false) + _$ssrAttribute("data-workspace-resize-edge", _$escape(props.edge, true), false) + _$ssrAttribute("data-workspace-resize-shadow", props.shadow ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-workspace-default-size", _$escape(props.defaultSize, true), false) + _$ssrAttribute("data-workspace-min-size", _$escape(props.minSize, true), false) + _$ssrAttribute("data-workspace-max-size", _$escape(props.maxSize, true), false), _$ssrStyle(props.style));
 }
+
+/**
+ * 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
 } : {};
@@ -85,6 +98,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,
@@ -487,6 +507,57 @@ const AppWorkspaceSidebarItemAction = props => mergeProps({
   kind: SIDEBAR_ITEM_ACTION
 }, props);
 const AppWorkspaceSidebarItemActions = props => _$ssr(_tmpl$13, _$ssrAttribute("data-visibility", props.visibility === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(props.children));
+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() {
+      return _$ssr(_tmpl$17, _$ssrAttribute("data-unread", count() ? "count" : dot() ? "dot" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.mention;
+        },
+        get children() {
+          return _$ssr(_tmpl$14);
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.muted;
+        },
+        get children() {
+          return _$ssr(_tmpl$15);
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return count();
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return dot();
+            },
+            get children() {
+              return _$ssr(_tmpl$18);
+            }
+          });
+        },
+        get children() {
+          return _$ssr(_tmpl$16, _$ssrAttribute("data-mention", props.mention ? "true" : _$escape(undefined, true), false), count() > 99 ? "99+" : _$escape(count()));
+        }
+      })), _$escape(description()));
+    }
+  });
+};
 /** 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 ?? ""}`;
@@ -608,7 +679,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());
@@ -618,19 +693,19 @@ function AppWorkspaceSidebarItem(props) {
       return iconContent() || icon();
     },
     get children() {
-      return _$ssr(_tmpl$14, _$escape(iconContent() ?? _$ssr(_tmpl$19, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
+      return _$ssr(_tmpl$19, _$escape(iconContent() ?? _$ssr(_tmpl$25, _$ssrAttribute("class", _$escape(iconClass(icon()), true), false))));
     }
-  }), _$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$23, _$escape(_$createComponent(Show, {
     get when() {
       return props.context || props.contextMeta;
     },
     get children() {
-      return _$ssr(_tmpl$16, _$escape(props.context), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$21, _$escape(props.context), _$escape(_$createComponent(Show, {
         get when() {
           return props.contextMeta;
         },
         get children() {
-          return _$ssr(_tmpl$15, _$escape(props.contextMeta));
+          return _$ssr(_tmpl$20, _$escape(props.contextMeta));
         }
       })));
     }
@@ -639,13 +714,15 @@ function AppWorkspaceSidebarItem(props) {
       return props.description;
     },
     get children() {
-      return _$ssr(_tmpl$17, _$escape(props.description));
+      return _$ssr(_tmpl$22, _$escape(props.description));
     }
   }))), _$createComponent(Show, {
     get when() {
-      return meta();
+      return hasMeta();
     },
-    children: value => _$ssr(_tmpl$20, _$ssrAttribute("data-visibility", metaVisibility() === "hover" ? "hover" : _$escape(undefined, true), false), _$escape(value()))
+    get children() {
+      return _$ssr(_tmpl$24, _$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 = () => {
     const label = () => actionSlot()?.label ?? props.actionLabel ?? messages().rowAction;
@@ -659,7 +736,7 @@ function AppWorkspaceSidebarItem(props) {
       actionSlot()?.onSelect?.(event);
       props.onActionClick?.(event);
     };
-    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$19, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
+    const content = () => actionSlot()?.children ?? _$ssr(_tmpl$25, _$ssrAttribute("class", _$escape(iconClass(actionSlot()?.icon ?? props.actionIcon, "ti-dots"), true), false));
     return _$createComponent(Show, {
       get when() {
         return Boolean(actionSlot() || props.actionIcon);
@@ -670,10 +747,10 @@ function AppWorkspaceSidebarItem(props) {
             return _$memo(() => !!actionSlot()?.href)() && !actionSlot()?.disabled;
           },
           get fallback() {
-            return _$ssr(_tmpl$22, _$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$27, _$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$21, _$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$26, _$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()));
           }
         });
       }
@@ -696,6 +773,9 @@ function AppWorkspaceSidebarItem(props) {
       get viewportSize() {
         return preview().viewportSize;
       },
+      get describedBy() {
+        return hasMeta() ? metaId : undefined;
+      },
       get onOpenChange() {
         return preview().onOpenChange;
       },
@@ -770,6 +850,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);
@@ -814,16 +915,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({
@@ -856,6 +989,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);
@@ -909,21 +1049,26 @@ const AppWorkspaceNavTree = props => {
           return rowIcon();
         },
         get children() {
-          return _$ssr(_tmpl$23, _$ssrAttribute("data-k2b-nav-tree-toggle", usesIconDisclosure() ? "" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false));
+          return _$ssrElement("span", _$mergeProps({
+            "class": "k2b-app-workspace__sidebar-item-icon",
+            get ["data-k2b-nav-tree-toggle"]() {
+              return usesIconDisclosure() ? "" : undefined;
+            }
+          }, () => iconAccessibility(item.iconLabel)), _$ssr(_tmpl$25, _$ssrAttribute("class", _$escape(iconClass(rowIcon()), true), false)), false);
         }
-      }), _$ssr(_tmpl$24, _$escape(item.label)), _$createComponent(Show, {
+      }), _$ssr(_tmpl$28, _$escape(item.label)), _$createComponent(Show, {
         get when() {
           return item.meta !== undefined;
         },
         get children() {
-          return _$ssr(_tmpl$25, `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$29, `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$26, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
+          return _$ssr(_tmpl$30, `ti ${isExpanded(item.id) ? "ti-chevron-down" : "ti-chevron-right"}`);
         }
       })];
       const row = () => _$createComponent(AppWorkspaceSidebarRow, {
@@ -978,17 +1123,88 @@ const AppWorkspaceNavTree = props => {
         },
         children: rowContent
       });
-      return _$ssr(_tmpl$28, _$ssrAttribute("aria-level", _$escape(depth, true) + 1, false) + _$ssrAttribute("aria-selected", _$escape(selected(), true), false) + _$ssrAttribute("aria-expanded", hasChildren() ? _$escape(isExpanded(item.id), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-disabled", item.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", item.disabled ? -1 : tabStopId() === item.id ? 0 : -1, false) + _$ssrAttribute("data-k2b-nav-tree-id", _$escape(item.id, true), false) + _$ssrAttribute("data-k2b-nav-tree-parent-id", _$escape(parentId, true), false), _$escape(row()), _$escape(_$createComponent(Show, {
+
+      // 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 _$ssr(_tmpl$32, _$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$27, _$escape(renderItems(nested, depth + 1, item.id)));
+          return _$ssr(_tmpl$31, _$escape(renderItems(nested, depth + 1, item.id)));
         }
       })));
     }
   });
-  return _$ssr(_tmpl$29, `k2b-app-workspace__nav-tree ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false), _$escape(renderItems(roots, 0)));
+
+  // 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 _$ssr(_tmpl$33, `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({
@@ -1000,9 +1216,9 @@ const AppWorkspaceSidebarIconGrid = props => _$ssrElement("section", _$mergeProp
     return props.title;
   },
   children: title => _$ssr(_tmpl$12, _$escape(title()))
-})), _$ssr(_tmpl$30, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
+})), _$ssr(_tmpl$34, _$ssrAttribute("data-columns", _$escape(props.columns ?? 2, true), false), _$escape(props.children))], false);
 const AppWorkspaceSidebarIconAction = props => {
-  const content = _$ssr(_tmpl$31, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
+  const content = _$ssr(_tmpl$35, _$ssrAttribute("class", _$escape(iconClass(props.icon), true), false));
   const attrs = () => ({
     class: `k2b-app-workspace__sidebar-icon-action ${props.active ? "is-active" : ""}`,
     title: props.label,
@@ -1068,7 +1284,7 @@ const AppWorkspace = props => {
       return props.resizable !== false;
     },
     get children() {
-      return _$ssr(_tmpl$32, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(props.children));
+      return _$ssr(_tmpl$36, `k2b-app-workspace ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-mobile-surface", _$escape(props.mobileSurface, true), false) + _$ssrAttribute("data-sidebar-collapsed", initialLayoutState()?.sidebarCollapsed === undefined ? _$escape(undefined, true) : _$escape(String(initialLayoutState()?.sidebarCollapsed), true), false) + _$ssrAttribute("data-workspace-resizable", props.resizable === false ? "false" : "true", false), _$ssrStyle(appWorkspaceLayoutStyle(initialLayoutState())), _$escape(props.children));
     }
   });
 };
@@ -1080,7 +1296,7 @@ AppWorkspace.LayoutStateProvider = props => _$createComponent(LayoutStateContext
     return props.children;
   }
 });
-AppWorkspace.Content = props => _$ssr(_tmpl$33, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+AppWorkspace.Content = props => _$ssr(_tmpl$37, `k2b-app-workspace__content ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 AppWorkspace.Main = AppWorkspaceMain;
 AppWorkspace.MainPane = AppWorkspaceMainPane;
 AppWorkspace.Detail = AppWorkspaceDetail;
@@ -1096,6 +1312,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;