@dxos/plugin-navtree 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/dist/lib/{browser/chunk-OGUYILOW.mjs → neutral/components/index.mjs}

@@ -1,256 +1,15 @@
 import {
-  NavTreeCapabilities
-} from "./chunk-KF26WA4O.mjs";
-import {
-  meta
-} from "./chunk-A4VDCIJC.mjs";
-
-// src/containers/NavTreeContainer/NavTreeContainer.tsx
-import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
-import React8, { forwardRef as forwardRef3, memo as memo4, useCallback as useCallback4, useEffect as useEffect2, useMemo as useMemo8, useRef as useRef2 } from "react";
-import { Surface, useOperationInvoker } from "@dxos/app-framework/ui";
-import { LayoutOperation } from "@dxos/app-toolkit";
-import { useAppGraph as useAppGraph6, useLayout } from "@dxos/app-toolkit/ui";
-import { Graph as Graph5, Node as Node6, useActionRunner as useActionRunner4 } from "@dxos/plugin-graph";
-import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
-import { isTreeData } from "@dxos/react-ui-list";
-import { arrayMove as arrayMove2 } from "@dxos/util";
+  l0ItemType
+} from "../chunk-JOSNCOV4.mjs";
+import "../chunk-J5LGTIGS.mjs";
 
 // src/components/NavTree/NavTree.tsx
-import React7, { forwardRef as forwardRef2, useMemo as useMemo7 } from "react";
-import { useAppGraph as useAppGraph5 } from "@dxos/app-toolkit/ui";
-import { Node as Node5, useConnections as useConnections2, useActions as useGraphActions2 } from "@dxos/plugin-graph";
+import React7, { forwardRef as forwardRef2, useMemo as useMemo4 } from "react";
+import { useAppGraph as useAppGraph2 } from "@dxos/app-toolkit/ui";
+import { Node as Node3, useConnections, useActions as useGraphActions } from "@dxos/plugin-graph";
 import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
 import { byPosition } from "@dxos/util";
-
-// src/hooks/useActions.ts
-import { useMemo } from "react";
-import { useAppGraph } from "@dxos/app-toolkit/ui";
-import { Graph, Node, useActions as useGraphActions } from "@dxos/plugin-graph";
-var useActions = (node) => {
-  const { graph } = useAppGraph();
-  const actions = useGraphActions(graph, node.id);
-  return useMemo(() => {
-    return actions.reduce((acc, arg) => {
-      if (arg.properties.disposition === "item") {
-        return acc;
-      }
-      acc.actions.push(arg);
-      if (!Node.isAction(arg)) {
-        const actionGroup = Graph.getActions(graph, arg.id);
-        acc.groupedActions[arg.id] = actionGroup;
-      }
-      return acc;
-    }, {
-      actions: [],
-      groupedActions: {}
-    });
-  }, [
-    actions
-  ]);
-};
-
-// src/hooks/useLoadDescendents.ts
-import { useEffect } from "react";
-import { useAppGraph as useAppGraph2 } from "@dxos/app-toolkit/ui";
-import { Graph as Graph2 } from "@dxos/plugin-graph";
-var useLoadDescendents = (root) => {
-  const { graph } = useAppGraph2();
-  useEffect(() => {
-    if (!root) {
-      return;
-    }
-    Graph2.expand(graph, root.id, "child");
-  }, [
-    graph,
-    root
-  ]);
-};
-
-// src/hooks/useNavTreeModel.ts
-import { Atom } from "@effect-atom/atom-react";
-import * as Option from "effect/Option";
-import { useMemo as useMemo3 } from "react";
-import { useAppGraph as useAppGraph3 } from "@dxos/app-toolkit/ui";
-import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
-import { Path } from "@dxos/react-ui-list";
-import { mx } from "@dxos/ui-theme";
-
-// src/util.ts
-import { Graph as Graph3, Node as Node2 } from "@dxos/plugin-graph";
-import { isNonNullable } from "@dxos/util";
-var getParent = (graph, node, path) => {
-  const parentId = path[path.length - 2];
-  return Graph3.getConnections(graph, node.id, Node2.childRelation("inbound")).find((n) => n.id === parentId);
-};
-var getPersistenceParent = (graph, node, path, persistenceClass) => {
-  if (node.properties.acceptPersistenceClass?.has(persistenceClass)) {
-    return node;
-  } else {
-    const parent = getParent(graph, node, path);
-    return parent ? getPersistenceParent(graph, parent, path.slice(0, path.length - 1), persistenceClass) : null;
-  }
-};
-var resolveMigrationOperation = (graph, activeNode, destinationPath, destinationRelatedNode) => {
-  const activeClass = activeNode.properties.persistenceClass;
-  if (destinationRelatedNode && activeClass) {
-    const persistenceParent = getPersistenceParent(graph, destinationRelatedNode, destinationPath, activeClass);
-    if (persistenceParent) {
-      const activeKey = activeNode.properties.persistenceKey;
-      if (activeKey && persistenceParent?.properties.acceptPersistenceKey) {
-        return persistenceParent.properties.acceptPersistenceKey.has(activeKey) && persistenceParent.properties.onTransferStart ? "transfer" : persistenceParent.properties.onCopy ? "copy" : "reject";
-      } else {
-        return "reject";
-      }
-    } else {
-      return "reject";
-    }
-  } else {
-    return "reject";
-  }
-};
-var sortActions = (actions) => actions.sort((a, b) => {
-  if (a.properties.disposition === b.properties.disposition) {
-    return 0;
-  }
-  if (a.properties.disposition === "list-item-primary") {
-    return -1;
-  }
-  return 1;
-});
-var getChildren = (graph, node, path = []) => {
-  return Graph3.getConnections(graph, node.id, "child").map((n) => {
-    const nextPath = [
-      ...path,
-      node.id
-    ];
-    return nextPath.includes(n.id) ? void 0 : n;
-  }).filter(isNonNullable);
-};
-var filterItems = (node, disposition) => {
-  if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
-    return false;
-  } else if (!disposition) {
-    const action = Node2.isAction(node);
-    return !action || node.properties.disposition === "item";
-  } else {
-    return node.properties.disposition === disposition;
-  }
-};
-var l0ItemType = (item) => {
-  if (Node2.isActionLike(item)) {
-    return "action";
-  } else {
-    return "tab";
-  }
-};
-
-// src/hooks/useNavTreeState.ts
-import { useAtomValue } from "@effect-atom/atom-react";
-import { useMemo as useMemo2 } from "react";
-import { useCapability } from "@dxos/app-framework/ui";
-var useNavTreeState = () => {
-  return useCapability(NavTreeCapabilities.State);
-};
-var useNavTreeItemState = (path) => {
-  const { getItemAtom } = useCapability(NavTreeCapabilities.State);
-  const pathKey = useMemo2(() => path.join("~"), [
-    path
-  ]);
-  const atom = useMemo2(() => getItemAtom(path), [
-    getItemAtom,
-    pathKey
-  ]);
-  return useAtomValue(atom);
-};
-var useIsAlternateTree = (path, _item) => {
-  return useNavTreeItemState(path).alternateTree ?? false;
-};
-
-// src/hooks/useNavTreeModel.ts
-var isVisibleChild = (node) => node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== "hidden";
-var createItemPropsFamily = (graph) => Atom.family((pathKey) => {
-  const path = Path.parts(pathKey);
-  const id = Path.last(pathKey);
-  return Atom.make((get) => {
-    const nodeOpt = get(graph.node(id));
-    const node = Option.getOrElse(nodeOpt, () => void 0);
-    if (!node) {
-      return {
-        id,
-        label: id
-      };
-    }
-    const safeChildren = get(graph.connections(node.id, "child")).filter((child) => !path.includes(child.id));
-    const visibleChildren = safeChildren.filter(isVisibleChild);
-    const parentOf = visibleChildren.length > 0 ? visibleChildren.map((child) => child.id) : node.properties.role === "branch" ? [] : void 0;
-    const parentId = path.length >= 2 ? path[path.length - 2] : void 0;
-    const parentNode = parentId ? Option.getOrElse(get(graph.node(parentId)), () => void 0) : void 0;
-    const droppable = node.properties.droppable === false || parentNode?.properties.childrenDroppable === false ? false : void 0;
-    return {
-      id: node.id,
-      parentOf,
-      disabled: node.properties.disabled,
-      draggable: node.properties.draggable,
-      droppable,
-      label: node.properties.label ?? node.id,
-      className: mx(node.properties.className, node.properties.modified && "italic"),
-      headingClassName: node.properties.headingClassName,
-      icon: node.properties.icon,
-      iconHue: node.properties.iconHue,
-      testId: node.properties.testId
-    };
-  }).pipe(Atom.keepAlive);
-});
-var createChildIdsFamily = (graph) => Atom.family((id) => Atom.make((get) => get(graph.connections(id, "child")).map((child) => child.id)).pipe(Atom.keepAlive));
-var createItemFamily = (graph) => Atom.family((id) => Atom.make((get) => {
-  const node = Option.getOrElse(get(graph.node(id)), () => void 0);
-  return node && filterItems(node) ? node : void 0;
-}).pipe(Atom.keepAlive));
-var createItemOpenFamily = (getItemAtom) => Atom.family((pathKey) => {
-  const path = Path.parts(pathKey);
-  const stateAtom = getItemAtom(path);
-  return Atom.make((get) => get(stateAtom).open).pipe(Atom.keepAlive);
-});
-var createItemCurrentFamily = (getItemAtom) => Atom.family((pathKey) => {
-  const path = Path.parts(pathKey);
-  const stateAtom = getItemAtom(path);
-  return Atom.make((get) => get(stateAtom).current).pipe(Atom.keepAlive);
-});
-var useNavTreeModel = (rootId) => {
-  const { graph } = useAppGraph3();
-  const { getItemAtom } = useNavTreeState();
-  const itemPropsFamily = useMemo3(() => createItemPropsFamily(graph), [
-    graph
-  ]);
-  const childIdsFamily = useMemo3(() => createChildIdsFamily(graph), [
-    graph
-  ]);
-  const itemFamily = useMemo3(() => createItemFamily(graph), [
-    graph
-  ]);
-  const itemOpenFamily = useMemo3(() => createItemOpenFamily(getItemAtom), [
-    getItemAtom
-  ]);
-  const itemCurrentFamily = useMemo3(() => createItemCurrentFamily(getItemAtom), [
-    getItemAtom
-  ]);
-  return useMemo3(() => ({
-    item: (id) => itemFamily(id),
-    itemProps: (path) => itemPropsFamily(Path.create(...path)),
-    itemOpen: (path) => itemOpenFamily(Path.create(...path)),
-    itemCurrent: (path) => itemCurrentFamily(Path.create(...path)),
-    childIds: (parentId) => childIdsFamily(parentId ?? rootId)
-  }), [
-    itemFamily,
-    itemPropsFamily,
-    itemOpenFamily,
-    itemCurrentFamily,
-    childIdsFamily,
-    rootId
-  ]);
-};
+import { useLoadDescendents as useLoadDescendents2 } from "#hooks";
 
 // src/components/NavTreeContext/NavTreeContext.tsx
 import { createContext, useContext } from "react";
@@ -259,20 +18,22 @@ var NavTreeContext = /* @__PURE__ */ createContext(null);
 var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("Missing NavTreeContext"));
 
 // src/components/Sidebar/L0Menu.tsx
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
 import { scrollJustEnoughIntoView } from "@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view";
-import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import React2, { forwardRef, memo, useCallback, useLayoutEffect, useMemo as useMemo4, useRef, useState } from "react";
+import { useAtomValue } from "@effect-atom/atom-react";
+import React2, { forwardRef, memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DxAvatar } from "@dxos/lit-ui/react";
 import { useActionRunner } from "@dxos/plugin-graph";
 import { Icon, IconButton, ListItem, ScrollArea, Tooltip, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
 import { Menu } from "@dxos/react-ui-menu";
 import { Tabs } from "@dxos/react-ui-tabs";
-import { mx as mx2 } from "@dxos/ui-theme";
+import { mx } from "@dxos/ui-theme";
 import { arrayMove } from "@dxos/util";
+import { useNavTreeState } from "#hooks";
+import { meta } from "#meta";
 
 // src/components/UserAccountAvatar/UserAccountAvatar.tsx
 import React from "react";
@@ -338,53 +99,43 @@ var useL0ItemClick = ({ item, parent, path }, type) => {
 var l0Breakpoints = {
   lg: "hidden lg:grid"
 };
-var l0ItemRoot = 'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer dx-app-no-drag dx-focus-ring-group';
-var l0ItemContent = "flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm";
 var L0ItemRoot = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ item, parent, path, onMouseEnter, children }, forwardedRef) => {
+  const { t } = useTranslation(meta.id);
   const { model } = useNavTreeContext();
-  const itemPath = useMemo4(() => [
+  const itemPath = useMemo(() => [
     ...path,
     item.id
   ], [
     item.id,
     path
   ]);
-  const { id, testId } = useAtomValue2(model.itemProps(itemPath));
-  const type = l0ItemType(item);
-  const { t } = useTranslation(meta.id);
+  const { id, testId } = useAtomValue(model.itemProps(itemPath));
   const localizedString = toLocalizedString(item.properties.label, t);
+  const type = l0ItemType(item);
   const handleClick = useL0ItemClick({
     item,
     parent,
     path: itemPath
   }, type);
-  const rootProps = type === "tab" ? {
-    value: item.id,
-    tabIndex: 0,
-    onClick: handleClick,
-    "data-testid": testId,
-    "data-object-id": id
-  } : {
-    onClick: handleClick,
-    "data-testid": testId,
-    "data-object-id": id
-  };
   return /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true,
     delayDuration: 0,
     side: "right",
     content: localizedString
   }, /* @__PURE__ */ React2.createElement(Tabs.TabPrimitive, {
-    ...rootProps,
+    className: mx("group/l0item flex w-full justify-center items-center relative", 'dx-app-no-drag dx-focus-ring-group data[type!="collection"]:cursor-pointer', l0Breakpoints[item.properties.l0Breakpoint]),
+    tabIndex: type === "tab" ? 0 : void 0,
     "data-type": type,
-    className: mx2(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint]),
-    ref: forwardedRef,
-    onMouseEnter
+    "data-testid": testId,
+    "data-object-id": id,
+    value: item.id,
+    onClick: handleClick,
+    onMouseEnter,
+    ref: forwardedRef
   }, children));
 }));
 var L0ItemActiveTabIndicator = ({ classNames }) => /* @__PURE__ */ React2.createElement("div", {
-  role: "none",
-  className: mx2("hidden group-aria-selected/l0item:block absolute start-0 inset-y-2 w-1 bg-accent-surface rounded-ie", classNames)
+  className: mx("hidden group-aria-selected/l0item:block absolute start-0 h-6 w-1.5 bg-accent-surface rounded-sm", classNames)
 });
 var L0Item = /* @__PURE__ */ memo(({ item, parent, path, pinned, onRearrange, onItemHover }) => {
   const { t } = useTranslation(meta.id);
@@ -473,14 +224,13 @@ var L0Item = /* @__PURE__ */ memo(({ item, parent, path, pinned, onRearrange, on
     path,
     onMouseEnter: handleMouseEnter
   }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     "data-frame": true,
     ...hue && {
       style: {
         background: `var(--color-${hue}-surface)`
       }
     },
-    className: mx2(l0ItemContent, pinned ? "p-2 group-hover/l0item:bg-active-surface" : "w-(--dx-l0-avatar-size) h-(--dx-l0-avatar-size) bg-active-surface")
+    className: mx("flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm", pinned ? "p-2 group-hover/l0item:bg-current-surface" : "w-(--dx-l0-avatar-size) h-(--dx-l0-avatar-size) bg-current-surface")
   }, /* @__PURE__ */ React2.createElement(ItemAvatar, {
     item
   })), /* @__PURE__ */ React2.createElement(L0ItemActiveTabIndicator, null), /* @__PURE__ */ React2.createElement("span", {
@@ -492,12 +242,11 @@ var L0Item = /* @__PURE__ */ memo(({ item, parent, path, pinned, onRearrange, on
 });
 var ItemAvatar = ({ item }) => {
   const { t } = useTranslation(meta.id);
-  const type = l0ItemType(item);
   if (item.properties.icon) {
     const hue = item.properties.hue ?? null;
     const hueFgStyle = hue && {
       style: {
-        color: `var(--color-${hue}-surface-text)`
+        color: `var(--color-${hue}-foreground)`
       }
     };
     return /* @__PURE__ */ React2.createElement(Icon, {
@@ -506,6 +255,7 @@ var ItemAvatar = ({ item }) => {
       ...hueFgStyle
     });
   }
+  const type = l0ItemType(item);
   if (type === "tab" && item.properties.disposition !== "pin-end") {
     const hue = item.properties.hue ?? null;
     const localizedString = toLocalizedString(item.properties.label, t);
@@ -544,10 +294,13 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
   ]);
   const hasRearrangeableItems = topLevelItems.some((item) => item.properties.onRearrange);
   return /* @__PURE__ */ React2.createElement(Tabs.Tablist, {
+    "data-tauri-drag-region": true,
     classNames: [
       "group/l0 absolute z-[1] inset-y-0 start-0 rounded-is",
       "grid grid-cols-[var(--dx-l0-size)] grid-rows-[var(--dx-rail-size)_1fr_min-content_var(--dx-l0-size)] dx-contain-layout",
-      "!w-(--dx-l0-size) bg-toolbar-surface border-e border-subdued-separator dx-app-drag pb-[env(safe-area-inset-bottom)]"
+      "w-(--dx-l0-size) bg-toolbar-surface dx-app-drag pb-[env(safe-area-inset-bottom)]",
+      '[body[data-platform="macos"]_&]:pt-[30px]',
+      '[body[data-platform="ios"]_&]:pt-[max(env(safe-area-inset-top),0.25rem)]'
     ]
   }, /* @__PURE__ */ React2.createElement(Menu.Root, {
     onAction: handleAction
@@ -555,27 +308,21 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
     asChild: true,
     "data-testid": "spacePlugin.addSpace"
   }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     className: "grid place-items-center"
   }, /* @__PURE__ */ React2.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--list--regular",
     iconOnly: true,
-    label: t("app menu label"),
-    size: 5
+    label: t("app-menu.label")
   }))), /* @__PURE__ */ React2.createElement(Menu.Content, {
     group: parent,
     items: menuActions
   })), /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
+    centered: true,
     thin: true,
     orientation: "vertical"
-  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx2([
-      "flex flex-col gap-2 pt-1",
-      '[body[data-platform="macos"]_&]:py-[30px]',
-      '[body[data-platform="ios"]_&]:py-[max(env(safe-area-inset-top),0.25rem)]'
-    ])
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, {
+    classNames: "flex flex-col gap-2 py-1"
   }, topLevelItems.map((item) => /* @__PURE__ */ React2.createElement(L0Item, {
     key: item.id,
     item,
@@ -585,8 +332,7 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
     ...hasRearrangeableItems && {
       onRearrange: handleRearrange
     }
-  }))))), /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
+  })))), /* @__PURE__ */ React2.createElement("div", {
     className: "grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2"
   }, pinnedItems.map((item) => /* @__PURE__ */ React2.createElement(L0Item, {
     key: item.id,
@@ -595,7 +341,6 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
     path,
     pinned: true
   }))), userAccountItem && /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     className: "grid dx-app-no-drag"
   }, /* @__PURE__ */ React2.createElement(L0ItemRoot, {
     key: userAccountItem.id,
@@ -612,26 +357,27 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
 };
 
 // src/components/Sidebar/L1Panel.tsx
-import * as Effect from "effect/Effect";
-import * as Option2 from "effect/Option";
-import React5, { memo as memo3, useCallback as useCallback3, useMemo as useMemo6 } from "react";
-import { Node as Node4 } from "@dxos/app-graph";
+import * as Option from "effect/Option";
+import React5, { memo as memo3, useCallback as useCallback3, useMemo as useMemo3 } from "react";
+import { Node as Node2 } from "@dxos/app-graph";
 import { isPinnedWorkspace } from "@dxos/app-toolkit";
-import { useAppGraph as useAppGraph4 } from "@dxos/app-toolkit/ui";
-import { Graph as Graph4, useActionRunner as useActionRunner3, useConnections, useEdges } from "@dxos/plugin-graph";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { Graph, useActionRunner as useActionRunner3, useEdges } from "@dxos/plugin-graph";
 import { DensityProvider, IconButton as IconButton3, ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString4, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { useAttended } from "@dxos/react-ui-attention";
 import { Tree } from "@dxos/react-ui-list";
 import { Menu as Menu3 } from "@dxos/react-ui-menu";
 import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
 import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2 } from "@dxos/ui-theme";
+import { useActions as useActions2, useLoadDescendents } from "#hooks";
+import { meta as meta4 } from "#meta";
 
 // src/components/NavTreeItem/NavTreeItemAction.tsx
 import React3, { useCallback as useCallback2 } from "react";
 import { useActionRunner as useActionRunner2 } from "@dxos/plugin-graph";
 import { IconButton as IconButton2, toLocalizedString as toLocalizedString2, useDensityContext, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { Menu as Menu2 } from "@dxos/react-ui-menu";
-import { hoverableControlItem, hoverableOpenControlItem } from "@dxos/ui-theme";
+import { composable, composableProps, hoverableControlItem, hoverableOpenControlItem } from "@dxos/ui-theme";
+import { meta as meta2 } from "#meta";
 var fallbackIcon = "ph--placeholder--regular";
 var fineActionButtonProps = {
   size: 4,
@@ -641,8 +387,8 @@ var coarseActionButtonProps = {
   size: 5,
   density: "coarse"
 };
-var NavTreeItemActionDropdownMenu = ({ parent, path, label, icon, testId, menuActions, caller }) => {
-  const { t } = useTranslation2(meta.id);
+var NavTreeItemActionDropdownMenu = composable(({ parent, path, label, icon, testId, menuActions, caller, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(meta2.id);
   const density = useDensityContext();
   const runAction = useActionRunner2();
   const handleAction = useCallback2((action, params = {}) => runAction(action, {
@@ -659,6 +405,7 @@ var NavTreeItemActionDropdownMenu = ({ parent, path, label, icon, testId, menuAc
     asChild: true
   }, /* @__PURE__ */ React3.createElement(IconButton2, {
     ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
+    ...composableProps(props),
     classNames: [
       "shrink-0 px-2 pointer-fine:px-1",
       hoverableControlItem,
@@ -668,12 +415,14 @@ var NavTreeItemActionDropdownMenu = ({ parent, path, label, icon, testId, menuAc
     icon: icon ?? fallbackIcon,
     iconOnly: true,
     label: toLocalizedString2(label, t),
-    "data-testid": testId
+    "data-testid": testId,
+    ref: forwardedRef
   })), /* @__PURE__ */ React3.createElement(Menu2.Content, {
     group: parent,
     items: menuActions
   }));
-};
+});
+NavTreeItemActionDropdownMenu.displayName = "NavTreeItemActionDropdownMenu";
 var NavTreeItemMonolithicAction = (props) => {
   const { parent, path, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
     label: "never"
@@ -710,34 +459,36 @@ var NavTreeItemMonolithicAction = (props) => {
     "data-testid": testId
   });
 };
-var NavTreeItemAction = ({ monolithic, menuActions, parent: node, path, ...props }) => {
-  const { t } = useTranslation2(meta.id);
+var NavTreeItemAction = ({ monolithic, menuActions, menuType, parent, path, ...props }) => {
+  const { t } = useTranslation2(meta2.id);
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString2(monolithicAction ? monolithicAction.properties.label : props.label, t);
   return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React3.createElement(NavTreeItemMonolithicAction, {
     baseLabel,
-    parent: node,
+    parent,
     path,
     ...menuActions[0]
   }) : /* @__PURE__ */ React3.createElement(NavTreeItemActionDropdownMenu, {
     ...props,
     label: baseLabel,
-    parent: node,
+    parent,
     path,
     menuActions
   });
 };
 
 // src/components/NavTreeItem/NavTreeItemColumns.tsx
-import React4, { Fragment, memo as memo2, useMemo as useMemo5 } from "react";
-import { Node as Node3 } from "@dxos/app-graph";
+import React4, { Fragment, memo as memo2, useMemo as useMemo2 } from "react";
+import { Node } from "@dxos/app-graph";
 import { Popover, Treegrid, toLocalizedString as toLocalizedString3, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { useActions } from "#hooks";
+import { meta as meta3 } from "#meta";
 var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
-  const { t } = useTranslation3(meta.id);
+  const { t } = useTranslation3(meta3.id);
   const { renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
   const level = path.length - 2;
   const { actions: actionsProp, groupedActions } = useActions(item);
-  const sortedActions = useMemo5(() => actionsProp.toSorted((actionA, actionB) => {
+  const sortedActions = useMemo2(() => actionsProp.toSorted((actionA, actionB) => {
     const primaryA = actionA.properties?.disposition === "list-item-primary";
     const primaryB = actionB.properties?.disposition === "list-item-primary";
     if (primaryA && !primaryB) {
@@ -751,7 +502,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
     actionsProp
   ]);
   const [primaryAction, ...secondaryActions] = sortedActions;
-  const actions = useMemo5(() => (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : sortedActions).flatMap((action) => Node3.isAction(action) ? [
+  const actions = useMemo2(() => (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : sortedActions).flatMap((action) => Node.isAction(action) ? [
     action
   ] : []).filter((a) => [
     "list-item",
@@ -760,7 +511,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
     sortedActions,
     primaryAction
   ]);
-  const primaryMenuActions = useMemo5(() => primaryAction ? Node3.isAction(primaryAction) ? [
+  const primaryMenuActions = useMemo2(() => primaryAction ? Node.isAction(primaryAction) ? [
     primaryAction
   ] : groupedActions[primaryAction?.id ?? ""] : void 0, [
     primaryAction,
@@ -768,7 +519,6 @@ var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
   ]);
   const ActionRoot = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}` ? Popover.Anchor : Fragment;
   return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
     className: "contents dx-app-no-drag"
   }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
     classNames: "contents"
@@ -778,7 +528,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
     icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
     parent: item,
     path,
-    monolithic: Node3.isAction(primaryAction),
+    monolithic: Node.isAction(primaryAction),
     menuActions: primaryMenuActions,
     menuType: primaryAction.properties?.menuType,
     caller: NAV_TREE_ITEM
@@ -788,7 +538,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
     classNames: "contents"
   }, /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
     testId: `navtree.treeItem.actionsLevel${level}`,
-    label: t("tree item actions label"),
+    label: t("tree-item-actions.label"),
     icon: "ph--dots-three-vertical--regular",
     parent: item,
     path,
@@ -807,11 +557,11 @@ var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
 
 // src/components/Sidebar/L1Panel.tsx
 var L1Panel$ = ({ open, path, item, isCurrent, onBack }) => {
-  const { t } = useTranslation4(meta.id);
+  const { t } = useTranslation4(meta4.id);
   const title = toLocalizedString4(item.properties.label, t);
   const isActivated = useIsActivatedWorkspace(item);
   const shouldRenderContent = isCurrent || isActivated;
-  return /* @__PURE__ */ React5.createElement(Tabs2.Tabpanel, {
+  return /* @__PURE__ */ React5.createElement(Tabs2.Panel, {
     key: item.id,
     value: item.id,
     classNames: [
@@ -836,13 +586,13 @@ var L1Panel$ = ({ open, path, item, isCurrent, onBack }) => {
   }));
 };
 var useIsActivatedWorkspace = (item) => {
-  const { graph } = useAppGraph4();
+  const { graph } = useAppGraph();
   const edges = useEdges(graph, item.id);
-  return useMemo6(() => {
-    const childIds = edges[Graph4.relationKey("child")] ?? [];
+  return useMemo3(() => {
+    const childIds = edges[Graph.relationKey("child")] ?? [];
     return childIds.some((childId) => {
-      const child = Graph4.getNode(graph, childId);
-      if (Option2.isNone(child)) {
+      const child = Graph.getNode(graph, childId);
+      if (Option.isNone(child)) {
         return false;
       }
       return child.value.properties.disposition === void 0;
@@ -854,15 +604,6 @@ var useIsActivatedWorkspace = (item) => {
 };
 var L1PanelContent = ({ path, item, onBack }) => {
   const navTreeContext = useNavTreeContext();
-  const alternateTree = useAlternateTreeItem(item);
-  const alternatePath = useMemo6(() => [
-    ...path,
-    item.id
-  ], [
-    item.id,
-    path
-  ]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
   return /* @__PURE__ */ React5.createElement(DensityProvider, {
     density: "fine"
   }, /* @__PURE__ */ React5.createElement(L1PanelHeader, {
@@ -872,28 +613,15 @@ var L1PanelContent = ({ path, item, onBack }) => {
   }), /* @__PURE__ */ React5.createElement(ScrollArea2.Root, {
     thin: true,
     orientation: "vertical"
-  }, /* @__PURE__ */ React5.createElement(ScrollArea2.Viewport, null, isAlternate && alternateTree ? /* @__PURE__ */ React5.createElement(Tree, {
-    model: navTreeContext.model,
-    id: alternateTree.id,
-    rootId: alternateTree.id,
-    path: alternatePath,
-    levelOffset: 5,
-    gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
-    renderColumns: NavTreeItemColumns,
-    blockInstruction: navTreeContext.blockInstruction,
-    canDrop: navTreeContext.canDrop,
-    canSelect: navTreeContext.canSelect,
-    onOpenChange: navTreeContext.onOpenChange,
-    onSelect: navTreeContext.onSelect,
-    onItemHover: navTreeContext.onItemHover
-  }) : /* @__PURE__ */ React5.createElement(Tree, {
+  }, /* @__PURE__ */ React5.createElement(ScrollArea2.Viewport, null, /* @__PURE__ */ React5.createElement(Tree, {
+    classNames: "pt-[2px]",
     model: navTreeContext.model,
     id: item.id,
     rootId: item.id,
     path,
     levelOffset: 5,
-    gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
     draggable: true,
+    gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
     renderColumns: NavTreeItemColumns,
     blockInstruction: navTreeContext.blockInstruction,
     canDrop: navTreeContext.canDrop,
@@ -904,7 +632,7 @@ var L1PanelContent = ({ path, item, onBack }) => {
   }))));
 };
 var L1PanelHeader = ({ item, path, onBack }) => {
-  const { t } = useTranslation4(meta.id);
+  const { t } = useTranslation4(meta4.id);
   const { renderItemEnd: ItemEnd } = useNavTreeContext();
   const title = toLocalizedString4(item.properties.label, t);
   const backCapableWorkspace = isPinnedWorkspace(item.id);
@@ -913,22 +641,10 @@ var L1PanelHeader = ({ item, path, onBack }) => {
     path
   });
   useLoadDescendents(item);
-  const alternateTree = useAlternateTreeItem(item);
-  const attended = useAttended();
-  const alternateTreeOpen = useMemo6(() => {
-    if (!alternateTree) {
-      return true;
-    }
-    const hasAlternateAttended = attended.some((attendedId) => attendedId === alternateTree.id || attendedId.startsWith(alternateTree.id + "/"));
-    return !hasAlternateAttended;
-  }, [
-    alternateTree,
-    attended
-  ]);
   return /* @__PURE__ */ React5.createElement("div", {
+    "data-tauri-drag-region": true,
     className: "flex w-full items-center border-b border-subdued-separator dx-app-drag dx-density-coarse pe-1"
   }, backCapableWorkspace ? /* @__PURE__ */ React5.createElement(IconButton3, {
-    size: 5,
     density: "coarse",
     classNames: [
       "shrink-0 px-2 pointer-fine:px-1",
@@ -938,15 +654,16 @@ var L1PanelHeader = ({ item, path, onBack }) => {
     variant: "ghost",
     icon: "ph--caret-left--regular",
     iconOnly: true,
-    label: t("button back"),
+    label: t("button-back.button"),
     "data-testid": "treeView.primaryTreeButton",
     onClick: () => onBack?.()
   }) : /* @__PURE__ */ React5.createElement("div", {
+    "data-tauri-drag-region": true,
     className: "w-6"
   }), /* @__PURE__ */ React5.createElement("h2", {
+    "data-tauri-drag-region": true,
     className: "flex-1 truncate min-w-0"
   }, title), /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
     className: "contents dx-app-no-drag"
   }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled && /* @__PURE__ */ React5.createElement(NavTreeItemAction, {
     testId: primaryAction.properties?.testId,
@@ -954,33 +671,48 @@ var L1PanelHeader = ({ item, path, onBack }) => {
     icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
     parent: item,
     path,
-    monolithic: Node4.isAction(primaryAction),
-    menuActions: Node4.isAction(primaryAction) ? [
+    monolithic: Node2.isAction(primaryAction),
+    menuActions: Node2.isAction(primaryAction) ? [
       primaryAction
     ] : groupedActions[primaryAction?.id ?? ""],
     menuType: primaryAction.properties?.menuType,
     caller: NAV_TREE_ITEM
-  }), menuActions.length === 1 && /* @__PURE__ */ React5.createElement(IconButton3, {
-    size: 5,
-    density: "coarse",
-    classNames: [
-      "shrink-0 px-2 pointer-fine:px-1",
-      hoverableControlItem2,
-      hoverableOpenControlItem2
-    ],
-    variant: "ghost",
-    icon: menuActions[0].properties?.icon ?? "ph--placeholder--regular",
-    iconOnly: true,
-    label: toLocalizedString4(menuActions[0].properties?.label, t),
-    "data-testid": menuActions[0].properties?.testId,
-    onClick: () => onAction(menuActions[0])
-  }), menuActions.length > 1 && /* @__PURE__ */ React5.createElement(Menu3.Root, {
+  }), /* @__PURE__ */ React5.createElement(MenuActions, {
+    item,
+    menuActions,
+    onAction
+  }), ItemEnd && /* @__PURE__ */ React5.createElement(ItemEnd, {
+    node: item,
+    open: true
+  })));
+};
+var MenuActions = ({ item, menuActions, onAction }) => {
+  const { t } = useTranslation4(meta4.id);
+  if (menuActions.length === 0) {
+    return null;
+  }
+  if (menuActions.length === 1) {
+    return /* @__PURE__ */ React5.createElement(IconButton3, {
+      density: "coarse",
+      classNames: [
+        "shrink-0 px-2 pointer-fine:px-1",
+        hoverableControlItem2,
+        hoverableOpenControlItem2
+      ],
+      variant: "ghost",
+      icon: menuActions[0].properties?.icon ?? "ph--placeholder--regular",
+      iconOnly: true,
+      label: toLocalizedString4(menuActions[0].properties?.label, t),
+      "data-testid": menuActions[0].properties?.testId,
+      onClick: () => onAction(menuActions[0])
+    });
+  }
+  return /* @__PURE__ */ React5.createElement(Menu3.Root, {
     caller: NAV_TREE_ITEM,
     onAction
   }, /* @__PURE__ */ React5.createElement(Menu3.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React5.createElement(IconButton3, {
-    size: 5,
     density: "coarse",
     classNames: [
       "shrink-0 px-2 pointer-fine:px-1",
@@ -990,94 +722,30 @@ var L1PanelHeader = ({ item, path, onBack }) => {
     variant: "ghost",
     icon: "ph--dots-three-vertical--regular",
     iconOnly: true,
-    label: t("tree item actions label"),
+    label: t("tree-item-actions.label"),
     "data-testid": "navtree.treeItem.actionsLevel0"
   })), /* @__PURE__ */ React5.createElement(Menu3.Content, {
     group: item,
     items: menuActions
-  })), ItemEnd && /* @__PURE__ */ React5.createElement(ItemEnd, {
-    node: item,
-    open: alternateTreeOpen
-  })));
+  }));
 };
 var useL1MenuActions = ({ item, path }) => {
-  const { t } = useTranslation4(meta.id);
-  const { setAlternateTree } = useNavTreeContext();
-  const { graph } = useAppGraph4();
   const runAction = useActionRunner3();
-  const alternateTree = useAlternateTreeItem(item);
-  const alternatePath = useMemo6(() => [
-    ...path,
-    item.id
-  ], [
-    item.id,
-    path
-  ]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
-  const { actions: actionsProp, groupedActions } = useActions(item);
+  const { actions: actionsProp, groupedActions } = useActions2(item);
   const [primaryAction, ...secondaryActions] = actionsProp.toSorted((a, _b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
-  const graphMenuActions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : actionsProp).flatMap((action) => Node4.isAction(action) ? [
+  const menuActions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : actionsProp).flatMap((action) => Node2.isAction(action) ? [
     action
   ] : []).filter((a) => [
     "list-item",
     "list-item-primary"
   ].includes(a.properties?.disposition));
-  const settingsActionId = `${item.id}~settings`;
-  const settingsAction = useMemo6(() => {
-    if (!alternateTree) {
-      return void 0;
-    }
-    return {
-      id: settingsActionId,
-      type: Node4.ActionType,
-      data: () => Effect.void,
-      properties: {
-        label: isAlternate ? [
-          "button back",
-          {
-            ns: meta.id
-          }
-        ] : alternateTree.properties.label ?? alternateTree.id,
-        icon: isAlternate ? "ph--arrow-u-down-left--regular" : alternateTree.properties.icon ?? "ph--placeholder--regular",
-        disposition: "list-item",
-        testId: isAlternate ? "navtree.backToSpace" : "navtree.spaceSettings"
-      }
-    };
-  }, [
-    alternateTree,
-    isAlternate,
-    settingsActionId,
-    t
-  ]);
-  const menuActions = useMemo6(() => [
-    ...graphMenuActions,
-    ...settingsAction ? [
-      settingsAction
-    ] : []
-  ], [
-    graphMenuActions,
-    settingsAction
-  ]);
   const onAction = useCallback3((action, params) => {
-    if (action.id === settingsActionId) {
-      if (alternateTree && !isAlternate) {
-        Graph4.expand(graph, alternateTree.id, "child");
-      }
-      setAlternateTree?.(alternatePath, !isAlternate);
-    } else {
-      void runAction(action, {
-        ...params,
-        path
-      });
-    }
+    void runAction(action, {
+      ...params,
+      path
+    });
   }, [
-    settingsActionId,
-    setAlternateTree,
-    alternatePath,
-    isAlternate,
     runAction,
-    graph,
-    alternateTree,
     path
   ]);
   return {
@@ -1087,11 +755,6 @@ var useL1MenuActions = ({ item, path }) => {
     onAction
   };
 };
-var useAlternateTreeItem = (item) => {
-  const { graph } = useAppGraph4();
-  const connections = useConnections(graph, item.id, "child");
-  return connections.find((node) => node.properties.disposition === "alternate-tree");
-};
 var L1Panel = /* @__PURE__ */ memo3(L1Panel$);
 
 // src/components/Sidebar/L1Tabs.tsx
@@ -1118,8 +781,8 @@ var NAV_TREE_ITEM = "NavTreeItem";
 var NavTree = /* @__PURE__ */ forwardRef2(({ id, root, tab, ...props }, forwardedRef) => {
   const { onBack, onItemHover } = useNavTreeContext();
   const { topLevelActions, l0Items, pinnedItems, userAccountItem, topLevelItems } = useTopLevelNavItems(root);
-  useLoadDescendents(root);
-  const path = useMemo7(() => [
+  useLoadDescendents2(root);
+  const path = useMemo4(() => [
     id
   ], [
     id
@@ -1132,7 +795,6 @@ var NavTree = /* @__PURE__ */ forwardRef2(({ id, root, tab, ...props }, forwarde
     /* @__PURE__ */ React7.createElement(Tabs3.Root, {
       value: tab,
       orientation: "vertical",
-      verticalVariant: "stateless",
       classNames: "relative",
       ref: forwardedRef
     }, /* @__PURE__ */ React7.createElement(L0Menu, {
@@ -1153,11 +815,11 @@ var NavTree = /* @__PURE__ */ forwardRef2(({ id, root, tab, ...props }, forwarde
   );
 });
 var useTopLevelNavItems = (root) => {
-  const { graph } = useAppGraph5();
-  const rootId = root?.id ?? Node5.RootId;
-  const rootOutboundItems = useConnections2(graph, rootId, "child");
-  const rootActions = useGraphActions2(graph, rootId);
-  const { topLevelActions, l0Items, pinnedItems, userAccountItem } = useMemo7(() => {
+  const { graph } = useAppGraph2();
+  const rootId = root?.id ?? Node3.RootId;
+  const rootOutboundItems = useConnections(graph, rootId, "child");
+  const rootActions = useGraphActions(graph, rootId);
+  const { topLevelActions, l0Items, pinnedItems, userAccountItem } = useMemo4(() => {
     const topLevelWorkspaces = [];
     const outboundPinnedItems = [];
     let userAccountItem2;
@@ -1180,16 +842,16 @@ var useTopLevelNavItems = (root) => {
       ...rootActions.filter((action) => action.properties.disposition === "pin-end")
     ].toSorted((a, b) => byPosition(a.properties, b.properties));
     return {
-      topLevelActions: topLevelActions2,
-      l0Items: topLevelWorkspaces,
       pinnedItems: pinnedItems2,
-      userAccountItem: userAccountItem2
+      topLevelActions: topLevelActions2,
+      userAccountItem: userAccountItem2,
+      l0Items: topLevelWorkspaces
     };
   }, [
     rootActions,
     rootOutboundItems
   ]);
-  const topLevelItems = useMemo7(() => [
+  const topLevelItems = useMemo4(() => [
     ...l0Items,
     ...pinnedItems,
     ...userAccountItem ? [
@@ -1208,255 +870,10 @@ var useTopLevelNavItems = (root) => {
     topLevelItems
   };
 };
-
-// src/containers/NavTreeContainer/NavTreeContainer.tsx
-var NODE_TYPE = "dxos/app-graph/node";
-var NavTreeItemEnd = ({ node, open }) => {
-  const data = useMemo8(() => ({
-    id: node.id,
-    subject: node.data,
-    open
-  }), [
-    node.id,
-    node.data,
-    open
-  ]);
-  return /* @__PURE__ */ React8.createElement(Surface.Surface, {
-    role: "navtree-item-end",
-    data,
-    limit: 1
-  });
-};
-var getItems = (graph, node, disposition) => {
-  return Graph5.getConnections(graph, node?.id ?? Node6.RootId, "child").filter((node2) => filterItems(node2, disposition));
-};
-var NavTreeContainer$ = /* @__PURE__ */ forwardRef3(({ tab, popoverAnchorId }, forwardedRef) => {
-  const [isLg] = useMediaQuery2("lg");
-  const { invokeSync, invokePromise } = useOperationInvoker();
-  const runAction = useActionRunner4();
-  const { graph } = useAppGraph6();
-  const { getItem, setItem } = useNavTreeState();
-  const layout = useLayout();
-  const model = useNavTreeModel(Node6.RootId);
-  const { navigationSidebarState } = useSidebars(meta.id);
-  const latestRef = useRef2({
-    tab,
-    activeItems: layout.active,
-    navigationSidebarState,
-    isLg
-  });
-  useEffect2(() => {
-    latestRef.current = {
-      tab,
-      activeItems: layout.active,
-      navigationSidebarState,
-      isLg
-    };
-  }, [
-    tab,
-    layout.active,
-    navigationSidebarState,
-    isLg
-  ]);
-  const handleOpenChange = useCallback4(({ item: { id }, path, open }) => {
-    setItem(path, "open", open);
-    Graph5.expand(graph, id, "child");
-  }, [
-    graph,
-    setItem
-  ]);
-  const handleTabChange = useCallback4((node) => {
-    Graph5.expand(graph, node.id, "child");
-    const { tab: activeTab, activeItems, navigationSidebarState: currentSidebarState, isLg: latestIsLg } = latestRef.current;
-    invokeSync(LayoutOperation.UpdateSidebar, {
-      state: node.id === activeTab ? currentSidebarState === "expanded" ? latestIsLg ? "collapsed" : "closed" : "expanded" : "expanded"
-    });
-    invokeSync(LayoutOperation.SwitchWorkspace, {
-      subject: node.id
-    });
-    if (activeItems.length === 0) {
-      const [item] = getItems(graph, node).filter((node2) => !Node6.isActionLike(node2));
-      if (item && item.data) {
-        invokeSync(LayoutOperation.Open, {
-          subject: [
-            item.id
-          ]
-        });
-      }
-    }
-  }, [
-    invokeSync,
-    graph
-  ]);
-  const blockInstruction = useCallback4(({ instruction, source, target }) => {
-    return target.item.properties.blockInstruction?.(source, instruction) ?? false;
-  }, []);
-  const canDrop = useCallback4(({ source, target }) => {
-    return target.item.properties.canDrop?.(source) ?? false;
-  }, []);
-  const canSelect = useCallback4(({ item }) => {
-    return item.properties.selectable ?? true;
-  }, []);
-  const handleSelect = useCallback4(({ item: node, path, option }) => {
-    if (!node.data) {
-      return;
-    }
-    if (Node6.isAction(node)) {
-      const [parent] = Graph5.getConnections(graph, node.id, Node6.childRelation("inbound"));
-      if (parent) {
-        void runAction(node, {
-          parent,
-          path,
-          caller: NAV_TREE_ITEM
-        });
-      }
-      return;
-    }
-    const current = getItem(path).current;
-    if (!current) {
-      invokeSync(LayoutOperation.Open, {
-        subject: [
-          node.id
-        ],
-        key: node.properties.key
-      });
-    } else if (option) {
-      invokeSync(LayoutOperation.Close, {
-        subject: [
-          node.id
-        ]
-      });
-    } else {
-      void invokePromise(LayoutOperation.ScrollIntoView, {
-        subject: node.id
-      });
-    }
-    const defaultAction = Graph5.getActions(graph, node.id).find((action) => action.properties?.disposition === "default");
-    if (Node6.isAction(defaultAction)) {
-      void runAction(defaultAction);
-    }
-    if (!isLg) {
-      invokeSync(LayoutOperation.UpdateSidebar, {
-        state: "closed"
-      });
-    }
-  }, [
-    graph,
-    invokeSync,
-    invokePromise,
-    getItem,
-    runAction,
-    isLg
-  ]);
-  const handleBack = useCallback4(() => invokeSync(LayoutOperation.RevertWorkspace), [
-    invokeSync
-  ]);
-  useEffect2(() => {
-    return monitorForElements({
-      canMonitor: ({ source }) => isTreeData(source.data),
-      onDrop: ({ location, source }) => {
-        if (!location.current.dropTargets.length) {
-          return;
-        }
-        const target = location.current.dropTargets[0];
-        const instruction = extractInstruction(target.data);
-        if (instruction !== null && instruction.type !== "instruction-blocked") {
-          const sourceNode = source.data.item;
-          const targetNode = target.data.item;
-          const sourcePath = source.data.path;
-          const targetPath = target.data.path;
-          const sameParent = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join();
-          const operation = sameParent && instruction.type !== "make-child" ? "rearrange" : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
-          const sourceParent = getParent(graph, sourceNode, sourcePath);
-          const targetParent = getParent(graph, targetNode, targetPath);
-          const sourceItems = getItems(graph, sourceParent);
-          const targetItems = getItems(graph, targetParent);
-          const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
-          const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
-          const migrationIndex = instruction.type === "make-child" ? void 0 : instruction.type === "reorder-below" ? targetIndex + 1 : targetIndex;
-          switch (operation) {
-            case "rearrange": {
-              const nextItems = sourceItems.map(({ data }) => data);
-              arrayMove2(nextItems, sourceIndex, targetIndex);
-              void sourceNode.properties.onRearrange?.(nextItems);
-              break;
-            }
-            case "copy": {
-              const target2 = instruction.type === "make-child" ? targetNode : targetParent;
-              void target2?.properties.onCopy?.(sourceNode, migrationIndex);
-              break;
-            }
-            case "transfer": {
-              const target2 = instruction.type === "make-child" ? targetNode : targetParent;
-              if (!target2?.properties.onTransferStart || target2?.id === sourceParent?.id) {
-                break;
-              }
-              void target2?.properties.onTransferStart(sourceNode, migrationIndex);
-              void sourceParent?.properties.onTransferEnd?.(sourceNode, target2);
-              break;
-            }
-          }
-        }
-      }
-    });
-  }, [
-    graph
-  ]);
-  const setAlternateTree = useCallback4((path, open) => {
-    setItem(path, "alternateTree", open);
-  }, [
-    setItem
-  ]);
-  const onItemHover = useCallback4(({ item }) => Graph5.expand(graph, item.id, "child"), [
-    graph
-  ]);
-  const navTreeContextValue = useMemo8(() => ({
-    model,
-    popoverAnchorId,
-    renderItemEnd: NavTreeItemEnd,
-    blockInstruction,
-    canDrop,
-    canSelect,
-    setAlternateTree,
-    onBack: handleBack,
-    onOpenChange: handleOpenChange,
-    onSelect: handleSelect,
-    onTabChange: handleTabChange,
-    onItemHover
-  }), [
-    model,
-    popoverAnchorId,
-    blockInstruction,
-    canDrop,
-    canSelect,
-    setAlternateTree,
-    handleBack,
-    handleOpenChange,
-    handleSelect,
-    handleTabChange,
-    onItemHover
-  ]);
-  return /* @__PURE__ */ React8.createElement(NavTreeContext.Provider, {
-    value: navTreeContextValue
-  }, /* @__PURE__ */ React8.createElement(NavTree, {
-    id: Node6.RootId,
-    root: Graph5.getRoot(graph),
-    tab,
-    open: layout.sidebarOpen,
-    ref: forwardedRef
-  }));
-});
-var NavTreeContainer = /* @__PURE__ */ memo4(NavTreeContainer$);
-
 export {
-  getParent,
-  getPersistenceParent,
-  resolveMigrationOperation,
-  sortActions,
-  getChildren,
-  filterItems,
-  l0ItemType,
-  NODE_TYPE,
-  NavTreeContainer
+  NAV_TREE_ITEM,
+  NavTree,
+  NavTreeContext,
+  useNavTreeContext
 };
-//# sourceMappingURL=chunk-OGUYILOW.mjs.map
+//# sourceMappingURL=index.mjs.map