@dxos/plugin-navtree 0.8.4-main.67995b8 → 0.8.4-main.6fa680abb7

package/dist/lib/browser/chunk-JT37R5HS.mjs

@@ -0,0 +1,1468 @@
+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";
+
+// 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 { 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
+  ]);
+};
+
+// src/components/NavTreeContext/NavTreeContext.tsx
+import { createContext, useContext } from "react";
+import { raise } from "@dxos/debug";
+var NavTreeContext = /* @__PURE__ */ createContext(null);
+var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("Missing NavTreeContext"));
+
+// src/components/Sidebar/L0Menu.tsx
+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 { DxAvatar } from "@dxos/lit-ui/react";
+import { useActionRunner } from "@dxos/plugin-graph";
+import { Icon, 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 { arrayMove } from "@dxos/util";
+
+// src/components/UserAccountAvatar/UserAccountAvatar.tsx
+import React from "react";
+import { Avatar } from "@dxos/react-ui";
+import { hexToFallback } from "@dxos/util";
+var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
+  const fallbackValue = hexToFallback(userId ?? "0");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(L0ItemActiveTabIndicator, {
+    classNames: "inset-y-6"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "grid place-items-center dx-focus-ring-group-indicator rounded-full",
+    "data-joyride": "welcome/account"
+  }, /* @__PURE__ */ React.createElement(Avatar.Root, null, /* @__PURE__ */ React.createElement(Avatar.Content, {
+    variant: "circle",
+    size: size ?? 12,
+    status: status ?? "active",
+    hue: hue || fallbackValue.hue,
+    fallback: emoji || fallbackValue.emoji,
+    "data-testid": "treeView.userAccount"
+  }))));
+};
+
+// src/components/Sidebar/L0Menu.tsx
+var useL0ItemClick = ({ item, parent, path }, type) => {
+  const { onSelect, onTabChange } = useNavTreeContext();
+  const { getItem } = useNavTreeState();
+  const [isLg] = useMediaQuery("lg");
+  const runAction = useActionRunner();
+  return useCallback((event) => {
+    switch (type) {
+      case "action": {
+        const { properties: { caller } = {} } = item;
+        return void runAction(item, caller ? {
+          parent,
+          path,
+          caller
+        } : {
+          parent,
+          path
+        });
+      }
+      case "tab":
+        return onTabChange?.(item);
+      case "link":
+        return onSelect?.({
+          item,
+          path,
+          current: !getItem(path).current,
+          option: event.altKey
+        });
+    }
+  }, [
+    item,
+    parent,
+    type,
+    getItem,
+    onSelect,
+    onTabChange,
+    isLg,
+    runAction
+  ]);
+};
+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 { model } = useNavTreeContext();
+  const itemPath = useMemo4(() => [
+    ...path,
+    item.id
+  ], [
+    item.id,
+    path
+  ]);
+  const { id, testId } = useAtomValue2(model.itemProps(itemPath));
+  const type = l0ItemType(item);
+  const { t } = useTranslation(meta.id);
+  const localizedString = toLocalizedString(item.properties.label, t);
+  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,
+    "data-type": type,
+    className: mx2(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint]),
+    ref: forwardedRef,
+    onMouseEnter
+  }, 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)
+});
+var L0Item = /* @__PURE__ */ memo(({ item, parent, path, pinned, onRearrange, onItemHover }) => {
+  const { t } = useTranslation(meta.id);
+  const itemElement = useRef(null);
+  const [closestEdge, setEdge] = useState(null);
+  const localizedString = toLocalizedString(item.properties.label, t);
+  const hue = item.properties.hue ?? null;
+  useLayoutEffect(() => {
+    if (!itemElement.current || !onRearrange) {
+      return;
+    }
+    return combine(draggable({
+      element: itemElement.current,
+      getInitialData: () => ({
+        id: item.id,
+        type: "l0Item"
+      }),
+      onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+        document.body.setAttribute("data-drag-preview", "true");
+        const element = source.element.querySelector("[data-frame]");
+        scrollJustEnoughIntoView({
+          element
+        });
+        const { x, y } = preserveOffsetOnSource({
+          element,
+          input: location.current.input
+        })({
+          container: element.offsetParent ?? document.body
+        });
+        nativeSetDragImage?.(element, x, y);
+      },
+      onDragStart: () => {
+        document.body.removeAttribute("data-drag-preview");
+        itemElement.current.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
+      },
+      onDrop: () => {
+        itemElement.current.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "idle");
+      }
+    }), dropTargetForElements({
+      element: itemElement.current,
+      getData: ({ input, element }) => {
+        return attachClosestEdge({
+          id: item.id,
+          type: "l0Item"
+        }, {
+          input,
+          element,
+          allowedEdges: [
+            "top",
+            "bottom"
+          ]
+        });
+      },
+      onDragEnter: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge(extractClosestEdge(self.data));
+        }
+      },
+      onDrag: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge(extractClosestEdge(self.data));
+        }
+      },
+      onDragLeave: () => setEdge(null),
+      onDrop: ({ self, source }) => {
+        setEdge(null);
+        if (source.data.type === self.data.type) {
+          onRearrange(source.data, self.data, extractClosestEdge(self.data));
+        }
+      }
+    }));
+  }, [
+    item,
+    onRearrange
+  ]);
+  const handleMouseEnter = useCallback(() => onItemHover?.({
+    item
+  }), [
+    item,
+    onItemHover
+  ]);
+  return /* @__PURE__ */ React2.createElement(L0ItemRoot, {
+    ref: itemElement,
+    item,
+    parent,
+    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")
+  }, /* @__PURE__ */ React2.createElement(ItemAvatar, {
+    item
+  })), /* @__PURE__ */ React2.createElement(L0ItemActiveTabIndicator, null), /* @__PURE__ */ React2.createElement("span", {
+    id: `${item.id}__label`,
+    className: "sr-only"
+  }, localizedString), closestEdge && /* @__PURE__ */ React2.createElement(ListItem.DropIndicator, {
+    edge: closestEdge
+  }));
+});
+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)`
+      }
+    };
+    return /* @__PURE__ */ React2.createElement(Icon, {
+      icon: item.properties.icon,
+      size: 6,
+      ...hueFgStyle
+    });
+  }
+  if (type === "tab" && item.properties.disposition !== "pin-end") {
+    const hue = item.properties.hue ?? null;
+    const localizedString = toLocalizedString(item.properties.label, t);
+    return /* @__PURE__ */ React2.createElement(DxAvatar, {
+      hue,
+      hueVariant: "surface",
+      variant: "square",
+      size: 12,
+      fallback: localizedString
+    });
+  }
+  return null;
+};
+var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path, onItemHover }) => {
+  const { t } = useTranslation(meta.id);
+  const runAction = useActionRunner();
+  const handleAction = useCallback((action, params) => {
+    void runAction(action, params);
+  }, [
+    runAction
+  ]);
+  const handleRearrange = useCallback((source, target, closestEdge) => {
+    const sourceItem = topLevelItems.find((i) => i.id === source.id);
+    if (!sourceItem?.properties.onRearrange) {
+      return;
+    }
+    const sourceIndex = topLevelItems.findIndex((i) => i.id === source.id);
+    const targetIndex = topLevelItems.findIndex((i) => i.id === target.id);
+    const insertIndex = source.id === target.id ? sourceIndex : targetIndex + (sourceIndex < targetIndex ? closestEdge === "top" ? -1 : 0 : closestEdge === "bottom" ? 1 : 0);
+    const nextOrder = arrayMove([
+      ...topLevelItems
+    ], sourceIndex, insertIndex);
+    return sourceItem.properties.onRearrange(nextOrder.map((item) => item.data));
+  }, [
+    topLevelItems
+  ]);
+  const hasRearrangeableItems = topLevelItems.some((item) => item.properties.onRearrange);
+  return /* @__PURE__ */ React2.createElement(Tabs.Tablist, {
+    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)]"
+    ]
+  }, /* @__PURE__ */ React2.createElement(Menu.Root, {
+    onAction: handleAction
+  }, /* @__PURE__ */ React2.createElement(Menu.Trigger, {
+    asChild: true,
+    "data-testid": "spacePlugin.addSpace",
+    className: mx2(l0ItemRoot, "grid place-items-center dx-focus-ring-group", '[body[data-platform="macos"]_&]:mt-[30px]')
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    content: t("app menu label"),
+    side: "right",
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Tabs.TabPrimitive, {
+    value: "options",
+    asChild: true,
+    role: "button"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx2(l0ItemContent, "h-(--dx-rail-action) w-(--dx-rail-action) group-hover/l0item:bg-hover-surface")
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--list--regular",
+    size: 5
+  }))))), /* @__PURE__ */ React2.createElement(Menu.Content, {
+    group: parent,
+    items: menuActions
+  })), /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
+    thin: true,
+    orientation: "vertical"
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx2([
+      "flex flex-col gap-1 pt-1",
+      '[body[data-platform="macos"]_&]:py-[30px]',
+      '[body[data-platform="ios"]_&]:py-[max(env(safe-area-inset-top),0.25rem)]'
+    ])
+  }, topLevelItems.map((item) => /* @__PURE__ */ React2.createElement(L0Item, {
+    key: item.id,
+    item,
+    parent,
+    path,
+    onItemHover,
+    ...hasRearrangeableItems && {
+      onRearrange: handleRearrange
+    }
+  }))))), /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2"
+  }, pinnedItems.map((item) => /* @__PURE__ */ React2.createElement(L0Item, {
+    key: item.id,
+    item,
+    parent,
+    path,
+    pinned: true
+  }))), userAccountItem && /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "grid dx-app-no-drag"
+  }, /* @__PURE__ */ React2.createElement(L0ItemRoot, {
+    key: userAccountItem.id,
+    item: userAccountItem,
+    parent,
+    path
+  }, /* @__PURE__ */ React2.createElement(UserAccountAvatar, {
+    userId: userAccountItem.properties.userId,
+    hue: userAccountItem.properties.hue,
+    emoji: userAccountItem.properties.emoji,
+    status: userAccountItem.properties.status,
+    size: 10
+  }))));
+};
+
+// 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 { 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 { DensityProvider, IconButton as IconButton2, 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";
+
+// src/components/NavTreeItem/NavTreeItemAction.tsx
+import React3, { useCallback as useCallback2 } from "react";
+import { useActionRunner as useActionRunner2 } from "@dxos/plugin-graph";
+import { IconButton, 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";
+var fallbackIcon = "ph--placeholder--regular";
+var fineActionButtonProps = {
+  size: 4,
+  density: "fine"
+};
+var coarseActionButtonProps = {
+  size: 5,
+  density: "coarse"
+};
+var NavTreeItemActionDropdownMenu = ({ parent, path, label, icon, testId, menuActions, caller }) => {
+  const { t } = useTranslation2(meta.id);
+  const density = useDensityContext();
+  const runAction = useActionRunner2();
+  const handleAction = useCallback2((action, params = {}) => runAction(action, {
+    ...params,
+    path
+  }), [
+    runAction,
+    path
+  ]);
+  return /* @__PURE__ */ React3.createElement(Menu2.Root, {
+    caller,
+    onAction: handleAction
+  }, /* @__PURE__ */ React3.createElement(Menu2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(IconButton, {
+    ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
+    classNames: [
+      "shrink-0 px-2 pointer-fine:px-1",
+      hoverableControlItem,
+      hoverableOpenControlItem
+    ],
+    variant: "ghost",
+    icon: icon ?? fallbackIcon,
+    iconOnly: true,
+    label: toLocalizedString2(label, t),
+    "data-testid": testId
+  })), /* @__PURE__ */ React3.createElement(Menu2.Content, {
+    group: parent,
+    items: menuActions
+  }));
+};
+var NavTreeItemMonolithicAction = (props) => {
+  const { parent, path, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
+    label: "never"
+  }, baseLabel } = props;
+  const density = useDensityContext();
+  const runAction = useActionRunner2();
+  return /* @__PURE__ */ React3.createElement(IconButton, {
+    ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
+    variant,
+    classNames: [
+      "shrink-0",
+      hoverableControlItem,
+      hoverableOpenControlItem,
+      iconOnly ? "px-2 pointer-fine:px-1" : "p-2 pointer-fine:p-2 me-1"
+    ],
+    icon: icon ?? fallbackIcon,
+    iconOnly,
+    label: baseLabel,
+    disabled,
+    onClick: (event) => {
+      event.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      void runAction(props, caller ? {
+        parent,
+        caller,
+        path
+      } : {
+        parent,
+        path
+      });
+    },
+    "data-testid": testId
+  });
+};
+var NavTreeItemAction = ({ monolithic, menuActions, parent: node, path, ...props }) => {
+  const { t } = useTranslation2(meta.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,
+    path,
+    ...menuActions[0]
+  }) : /* @__PURE__ */ React3.createElement(NavTreeItemActionDropdownMenu, {
+    ...props,
+    label: baseLabel,
+    parent: node,
+    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 { Popover, Treegrid, toLocalizedString as toLocalizedString3, useTranslation as useTranslation3 } from "@dxos/react-ui";
+var NavTreeItemColumns = /* @__PURE__ */ memo2(({ path, item, open }) => {
+  const { t } = useTranslation3(meta.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 primaryA = actionA.properties?.disposition === "list-item-primary";
+    const primaryB = actionB.properties?.disposition === "list-item-primary";
+    if (primaryA && !primaryB) {
+      return -1;
+    }
+    if (primaryB && !primaryA) {
+      return 1;
+    }
+    return 0;
+  }), [
+    actionsProp
+  ]);
+  const [primaryAction, ...secondaryActions] = sortedActions;
+  const actions = useMemo5(() => (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : sortedActions).flatMap((action) => Node3.isAction(action) ? [
+    action
+  ] : []).filter((a) => [
+    "list-item",
+    "list-item-primary"
+  ].includes(a.properties?.disposition)), [
+    sortedActions,
+    primaryAction
+  ]);
+  const primaryMenuActions = useMemo5(() => primaryAction ? Node3.isAction(primaryAction) ? [
+    primaryAction
+  ] : groupedActions[primaryAction?.id ?? ""] : void 0, [
+    primaryAction,
+    groupedActions
+  ]);
+  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"
+  }, /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
+    testId: primaryAction.properties?.testId,
+    label: toLocalizedString3(primaryAction.properties?.label, t),
+    icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
+    parent: item,
+    path,
+    monolithic: Node3.isAction(primaryAction),
+    menuActions: primaryMenuActions,
+    menuType: primaryAction.properties?.menuType,
+    caller: NAV_TREE_ITEM
+  })) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
+    role: "none"
+  }), /* @__PURE__ */ React4.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
+    classNames: "contents"
+  }, /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
+    testId: `navtree.treeItem.actionsLevel${level}`,
+    label: t("tree item actions label"),
+    icon: "ph--dots-three-vertical--regular",
+    parent: item,
+    path,
+    menuActions: actions,
+    menuType: "dropdown",
+    caller: NAV_TREE_ITEM
+  })) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
+    role: "none"
+  })), ItemEnd && /* @__PURE__ */ React4.createElement(Treegrid.Cell, {
+    classNames: "contents"
+  }, /* @__PURE__ */ React4.createElement(ItemEnd, {
+    node: item,
+    open
+  })));
+});
+
+// src/components/Sidebar/L1Panel.tsx
+var L1Panel$ = ({ open, path, item, isCurrent, onBack }) => {
+  const { t } = useTranslation4(meta.id);
+  const title = toLocalizedString4(item.properties.label, t);
+  const isActivated = useIsActivatedWorkspace(item);
+  const shouldRenderContent = isCurrent || isActivated;
+  return /* @__PURE__ */ React5.createElement(Tabs2.Tabpanel, {
+    key: item.id,
+    value: item.id,
+    classNames: [
+      "absolute inset-y-0 end-0",
+      "w-[calc(100%-var(--dx-l0-size))] lg:w-(--dx-l1-size) grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr]",
+      "py-[env(safe-area-inset-top)]",
+      isCurrent && "grid"
+    ],
+    tabIndex: -1,
+    "aria-label": title,
+    ...isCurrent && {
+      "data-testid": "navtree.workspace.visible"
+    },
+    ...!open && {
+      inert: true
+    }
+  }, shouldRenderContent && /* @__PURE__ */ React5.createElement(L1PanelContent, {
+    open,
+    path,
+    item,
+    onBack
+  }));
+};
+var useIsActivatedWorkspace = (item) => {
+  const { graph } = useAppGraph4();
+  const edges = useEdges(graph, item.id);
+  return useMemo6(() => {
+    const childIds = edges[Graph4.relationKey("child")] ?? [];
+    return childIds.some((childId) => {
+      const child = Graph4.getNode(graph, childId);
+      if (Option2.isNone(child)) {
+        return false;
+      }
+      return child.value.properties.disposition === void 0;
+    });
+  }, [
+    edges,
+    graph
+  ]);
+};
+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, {
+    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, {
+    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,
+    renderColumns: NavTreeItemColumns,
+    blockInstruction: navTreeContext.blockInstruction,
+    canDrop: navTreeContext.canDrop,
+    canSelect: navTreeContext.canSelect,
+    onOpenChange: navTreeContext.onOpenChange,
+    onSelect: navTreeContext.onSelect,
+    onItemHover: navTreeContext.onItemHover
+  }))));
+};
+var L1PanelHeader = ({ item, path, onBack }) => {
+  const { t } = useTranslation4(meta.id);
+  const { renderItemEnd: ItemEnd } = useNavTreeContext();
+  const title = toLocalizedString4(item.properties.label, t);
+  const backCapableWorkspace = isPinnedWorkspace(item.id);
+  const { primaryAction, groupedActions, menuActions, onAction } = useL1MenuActions({
+    item,
+    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", {
+    className: "flex w-full items-center border-b border-subdued-separator dx-app-drag dx-density-coarse pe-1"
+  }, backCapableWorkspace ? /* @__PURE__ */ React5.createElement(IconButton2, {
+    size: 5,
+    density: "coarse",
+    classNames: [
+      "shrink-0 px-2 pointer-fine:px-1",
+      hoverableControlItem2,
+      hoverableOpenControlItem2
+    ],
+    variant: "ghost",
+    icon: "ph--caret-left--regular",
+    iconOnly: true,
+    label: t("button back"),
+    "data-testid": "treeView.primaryTreeButton",
+    onClick: () => onBack?.()
+  }) : /* @__PURE__ */ React5.createElement("div", {
+    className: "w-6"
+  }), /* @__PURE__ */ React5.createElement("h2", {
+    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,
+    label: toLocalizedString4(primaryAction.properties?.label, t),
+    icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
+    parent: item,
+    path,
+    monolithic: Node4.isAction(primaryAction),
+    menuActions: Node4.isAction(primaryAction) ? [
+      primaryAction
+    ] : groupedActions[primaryAction?.id ?? ""],
+    menuType: primaryAction.properties?.menuType,
+    caller: NAV_TREE_ITEM
+  }), menuActions.length === 1 && /* @__PURE__ */ React5.createElement(IconButton2, {
+    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, {
+    caller: NAV_TREE_ITEM,
+    onAction
+  }, /* @__PURE__ */ React5.createElement(Menu3.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(IconButton2, {
+    size: 5,
+    density: "coarse",
+    classNames: [
+      "shrink-0 px-2 pointer-fine:px-1",
+      hoverableControlItem2,
+      hoverableOpenControlItem2
+    ],
+    variant: "ghost",
+    icon: "ph--dots-three-vertical--regular",
+    iconOnly: true,
+    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 [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) ? [
+    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
+      });
+    }
+  }, [
+    settingsActionId,
+    setAlternateTree,
+    alternatePath,
+    isAlternate,
+    runAction,
+    graph,
+    alternateTree,
+    path
+  ]);
+  return {
+    primaryAction,
+    groupedActions,
+    menuActions,
+    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
+import React6 from "react";
+var L1Tabs = ({ topLevelItems, currentItemId, onBack, open, path }) => {
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, topLevelItems.map((item) => {
+    const type = l0ItemType(item);
+    if (type === "tab") {
+      return /* @__PURE__ */ React6.createElement(L1Panel, {
+        key: item.id,
+        item,
+        path,
+        open,
+        onBack,
+        isCurrent: item.id === currentItemId
+      });
+    }
+    return null;
+  }));
+};
+
+// src/components/NavTree/NavTree.tsx
+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(() => [
+    id
+  ], [
+    id
+  ]);
+  return (
+    // TODO(thure): `Tabs.Root` forces all items that should be able to receive focus to use `Tabs.Tab(Primitive)` since
+    //  it uses RovingFocus and doesn't support moving focus to an item that is not a tab. Assess whether this situation
+    //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
+    //  not use `react-ui-tabs` at all.
+    /* @__PURE__ */ React7.createElement(Tabs3.Root, {
+      value: tab,
+      orientation: "vertical",
+      verticalVariant: "stateless",
+      classNames: "relative",
+      ref: forwardedRef
+    }, /* @__PURE__ */ React7.createElement(L0Menu, {
+      menuActions: topLevelActions,
+      topLevelItems: l0Items,
+      pinnedItems,
+      userAccountItem,
+      path,
+      parent: root,
+      onItemHover
+    }), /* @__PURE__ */ React7.createElement(L1Tabs, {
+      topLevelItems,
+      path,
+      currentItemId: tab,
+      onBack,
+      ...props
+    }))
+  );
+});
+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 topLevelWorkspaces = [];
+    const outboundPinnedItems = [];
+    let userAccountItem2;
+    for (const node of rootOutboundItems) {
+      switch (node.properties.disposition) {
+        case "workspace":
+          topLevelWorkspaces.push(node);
+          break;
+        case "pin-end":
+          outboundPinnedItems.push(node);
+          break;
+        case "user-account":
+          userAccountItem2 ??= node;
+          break;
+      }
+    }
+    const topLevelActions2 = rootActions.filter((action) => action.properties.disposition === "menu").toSorted((a, b) => byPosition(a.properties, b.properties));
+    const pinnedItems2 = [
+      ...outboundPinnedItems,
+      ...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
+    };
+  }, [
+    rootActions,
+    rootOutboundItems
+  ]);
+  const topLevelItems = useMemo7(() => [
+    ...l0Items,
+    ...pinnedItems,
+    ...userAccountItem ? [
+      userAccountItem
+    ] : []
+  ], [
+    l0Items,
+    pinnedItems,
+    userAccountItem
+  ]);
+  return {
+    topLevelActions,
+    l0Items,
+    pinnedItems,
+    userAccountItem,
+    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
+};
+//# sourceMappingURL=chunk-JT37R5HS.mjs.map