@dxos/plugin-navtree 0.8.2-staging.7ac8446 → 0.8.2

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

@@ -0,0 +1,1418 @@
+import {
+  NavTreeCapabilities
+} from "./chunk-33VLL4IJ.mjs";
+import {
+  COMMANDS_DIALOG,
+  KEY_BINDING,
+  NAVTREE_PLUGIN
+} from "./chunk-IEW3JD5C.mjs";
+
+// packages/plugins/plugin-navtree/src/components/CommandsDialog/CommandsDialog.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React, { useMemo, useState } from "react";
+import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
+import { isAction, isActionGroup } from "@dxos/app-graph";
+import { Keyboard, keySymbols } from "@dxos/keyboard";
+import { useActions } from "@dxos/plugin-graph";
+import { Button, Dialog, Icon, useTranslation, toLocalizedString } from "@dxos/react-ui";
+import { SearchList } from "@dxos/react-ui-searchlist";
+import { descriptionText, mx } from "@dxos/react-ui-theme";
+import { getHostPlatform } from "@dxos/util";
+var CommandsDialogContent = ({ selected: initial }) => {
+  var _effect = _useSignals();
+  try {
+    const { t } = useTranslation(NAVTREE_PLUGIN);
+    const [selected, setSelected] = useState(initial);
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { graph } = useAppGraph();
+    const allActions = useMemo(() => {
+      const current = Keyboard.singleton.getCurrentContext();
+      const actionMap = /* @__PURE__ */ new Set();
+      const actions2 = [];
+      graph.traverse({
+        visitor: (node, path) => {
+          if ((isAction(node) || isActionGroup(node)) && !actionMap.has(node.id) && current.startsWith(path.slice(0, -1).join("/"))) {
+            actionMap.add(node.id);
+            actions2.push(node);
+          }
+        }
+      });
+      actions2.sort((a, b) => {
+        return toLocalizedString(a.properties.label, t)?.toLowerCase().localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
+      });
+      return actions2;
+    }, [
+      graph
+    ]);
+    const group = allActions.find(({ id }) => id === selected);
+    const groupActions = useActions(graph, group?.id);
+    const actions = isActionGroup(group) ? groupActions : allActions;
+    return /* @__PURE__ */ React.createElement(Dialog.Content, {
+      classNames: [
+        "md:max-is-[30rem] overflow-hidden mbs-12"
+      ]
+    }, /* @__PURE__ */ React.createElement(Dialog.Title, null, t("commands dialog title", {
+      ns: NAVTREE_PLUGIN
+    })), /* @__PURE__ */ React.createElement(SearchList.Root, {
+      label: t("command list input placeholder"),
+      classNames: "flex flex-col grow overflow-hidden my-2"
+    }, /* @__PURE__ */ React.createElement(SearchList.Input, {
+      placeholder: t("command list input placeholder"),
+      classNames: "px-1 my-2"
+    }), /* @__PURE__ */ React.createElement(SearchList.Content, {
+      classNames: "max-bs-[24rem] overflow-auto"
+    }, actions?.map((action) => {
+      const label = toLocalizedString(action.properties.label, t);
+      const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
+      return /* @__PURE__ */ React.createElement(SearchList.Item, {
+        value: label,
+        key: action.id,
+        onSelect: () => {
+          if (action.properties.disabled) {
+            return;
+          }
+          if (isActionGroup(action)) {
+            setSelected(action.id);
+            return;
+          }
+          void dispatch(createIntent(LayoutAction.UpdateDialog, {
+            part: "dialog",
+            options: {
+              state: false
+            }
+          }));
+          setTimeout(() => {
+            const node = graph.getConnections(group?.id ?? action.id, "inbound")[0];
+            void (node && isAction(action) && action.data({
+              parent: node,
+              caller: KEY_BINDING
+            }));
+          });
+        },
+        classNames: "flex items-center gap-2",
+        disabled: action.properties.disabled,
+        ...action.properties?.testId && {
+          "data-testid": action.properties.testId
+        }
+      }, /* @__PURE__ */ React.createElement(Icon, {
+        icon: action.properties.icon,
+        size: 4
+      }), /* @__PURE__ */ React.createElement("span", {
+        className: "grow truncate"
+      }, label), shortcut && /* @__PURE__ */ React.createElement("span", {
+        className: mx("shrink-0", descriptionText)
+      }, keySymbols(shortcut).join("")));
+    }))), /* @__PURE__ */ React.createElement(Dialog.Close, {
+      asChild: true
+    }, /* @__PURE__ */ React.createElement(Button, {
+      variant: "primary",
+      classNames: "mbs-2"
+    }, t("close label", {
+      ns: "os"
+    }))));
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-navtree/src/components/CommandsDialog/CommandsTrigger.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import React2 from "react";
+import { createIntent as createIntent2, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { Button as Button2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+var CommandsTrigger = () => {
+  var _effect = _useSignals2();
+  try {
+    const { dispatchPromise: dispatch } = useIntentDispatcher2();
+    const { t } = useTranslation2(NAVTREE_PLUGIN);
+    return /* @__PURE__ */ React2.createElement(Button2, {
+      classNames: "m-1 pli-1 lg:pli-2",
+      onClick: () => dispatch(createIntent2(LayoutAction2.UpdateDialog, {
+        part: "dialog",
+        subject: COMMANDS_DIALOG,
+        options: {
+          blockAlign: "start"
+        }
+      }))
+    }, /* @__PURE__ */ React2.createElement("span", {
+      className: "text-description font-normal grow text-start"
+    }, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(MagnifyingGlass, {
+      className: getSize(5)
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-navtree/src/util.ts
+import { isAction as isAction2, isActionLike } from "@dxos/app-graph";
+import { isNonNullable } from "@dxos/util";
+var getParent = (graph, node, path) => {
+  const parentId = path[path.length - 2];
+  return graph.getConnections(node.id, "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 graph.getConnections(node.id, "outbound").map((n) => {
+    const nextPath = [
+      ...path,
+      node.id
+    ];
+    return nextPath.includes(n.id) ? void 0 : n;
+  }).filter(isNonNullable);
+};
+var getActions = (graph, node) => {
+  return graph.getActions(node.id).reduce((acc, arg) => {
+    if (arg.properties.disposition === "item") {
+      return acc;
+    }
+    acc.actions.push(arg);
+    if (!isAction2(arg)) {
+      const actionGroup = graph.getActions(arg.id);
+      acc.groupedActions[arg.id] = actionGroup;
+    }
+    return acc;
+  }, {
+    actions: [],
+    groupedActions: {}
+  });
+};
+var l0ItemType = (item) => {
+  if (item.properties.disposition === "collection") {
+    return "collection";
+  } else if (isActionLike(item)) {
+    return "action";
+  } else if (item.properties.disposition === "navigation") {
+    return "link";
+  } else {
+    return "tab";
+  }
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { untracked } from "@preact/signals-core";
+import React9, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo5 } from "react";
+import { createIntent as createIntent3, LayoutAction as LayoutAction3, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework";
+import { isAction as isAction4, isActionLike as isActionLike2, ROOT_ID } from "@dxos/app-graph";
+import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
+import { useConnections } from "@dxos/plugin-graph";
+import { isEchoObject, isSpace } from "@dxos/react-client/echo";
+import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
+import { isTreeData } from "@dxos/react-ui-list";
+import { mx as mx5 } from "@dxos/react-ui-theme";
+import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
+
+// packages/plugins/plugin-navtree/src/components/NavTree/NavTree.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8, { useMemo as useMemo4 } from "react";
+import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
+
+// packages/plugins/plugin-navtree/src/hooks.ts
+import { useEffect as useEffect2 } from "react";
+
+// packages/plugins/plugin-navtree/src/components/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"));
+
+// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
+import { useEffect } from "react";
+import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+var NavTreeDocumentTitle = ({ node }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  useEffect(() => {
+    document.title = node ? toLocalizedString2(node.properties.label, t) : t("current app name", {
+      ns: "appkit"
+    });
+  }, [
+    node?.properties?.label
+  ]);
+  return null;
+};
+
+// packages/plugins/plugin-navtree/src/hooks.ts
+var useLoadDescendents = (root) => {
+  const { loadDescendents } = useNavTreeContext();
+  useEffect2(() => {
+    const frame = requestAnimationFrame(() => {
+      if (root) {
+        void loadDescendents?.(root);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    root
+  ]);
+};
+
+// packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+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 React4, { forwardRef, useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { invariant } from "@dxos/invariant";
+import { Icon as Icon2, IconButton, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString3, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { MenuProvider, DropdownMenu } from "@dxos/react-ui-menu";
+import { Tabs } from "@dxos/react-ui-tabs";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+import { arrayMove, getFirstTwoRenderableChars } from "@dxos/util";
+
+// packages/plugins/plugin-navtree/src/components/UserAccountAvatar/UserAccountAvatar.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3 from "react";
+import { Avatar } from "@dxos/react-ui";
+import { hexToFallback } from "@dxos/util";
+var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
+  var _effect = _useSignals3();
+  try {
+    const fallbackValue = hexToFallback(userId ?? "0");
+    return /* @__PURE__ */ React3.createElement("div", {
+      className: "grid place-items-center",
+      "data-joyride": "welcome/account"
+    }, /* @__PURE__ */ React3.createElement(Avatar.Root, null, /* @__PURE__ */ React3.createElement(Avatar.Content, {
+      variant: "circle",
+      size: size ?? 12,
+      status: status ?? "active",
+      hue: hue || fallbackValue.hue,
+      fallback: emoji || fallbackValue.emoji,
+      "data-testid": "treeView.userAccount"
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx";
+var useL0ItemClick = ({ item, parent, path }, type) => {
+  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
+  });
+  return useCallback((event) => {
+    switch (type) {
+      case "action": {
+        const { data: invoke, properties: { caller } } = item;
+        return invoke?.(caller ? {
+          node: parent,
+          caller
+        } : {
+          node: parent
+        });
+      }
+      case "tab":
+        return onTabChange?.(item);
+      case "link":
+        return onSelect?.({
+          item,
+          path,
+          current: !isCurrent(path, item),
+          option: event.altKey
+        });
+    }
+  }, [
+    item,
+    parent,
+    type,
+    tab,
+    isCurrent,
+    onSelect,
+    onTabChange,
+    isLg
+  ]);
+};
+var l0Breakpoints = {
+  lg: "hidden lg:grid"
+};
+var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, forwardedRef) => {
+  var _effect = _useSignals4();
+  try {
+    const { getProps } = useNavTreeContext();
+    const { id, testId } = getProps?.(item, path) ?? {};
+    const type = l0ItemType(item);
+    const itemPath = useMemo2(() => [
+      ...path,
+      item.id
+    ], [
+      item.id,
+      path
+    ]);
+    const { t } = useTranslation4(NAVTREE_PLUGIN);
+    const localizedString = toLocalizedString3(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-itemid": id
+    } : type !== "collection" ? {
+      onClick: handleClick,
+      "data-testid": testId,
+      "data-itemid": id
+    } : {
+      onClick: handleClick
+    };
+    const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
+    return /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
+      asChild: true,
+      delayDuration: 0,
+      side: "right",
+      content: localizedString
+    }, /* @__PURE__ */ React4.createElement(Root, {
+      ...rootProps,
+      "data-type": type,
+      className: mx2('group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group', l0Breakpoints[item.properties.l0Breakpoint]),
+      ref: forwardedRef
+    }, children));
+  } finally {
+    _effect.f();
+  }
+});
+var L0Avator = ({ item }) => {
+  var _effect = _useSignals4();
+  try {
+    const { t } = useTranslation4(NAVTREE_PLUGIN);
+    const type = l0ItemType(item);
+    const hue = item.properties.hue ?? null;
+    const hueFgStyle = hue && {
+      style: {
+        color: `var(--dx-${hue}SurfaceText)`
+      }
+    };
+    const localizedString = toLocalizedString3(item.properties.label, t);
+    const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("").toUpperCase() : [], [
+      type,
+      item.properties.label,
+      t
+    ]);
+    return /* @__PURE__ */ React4.createElement("span", {
+      role: "img",
+      className: "place-self-center text-xl font-light",
+      ...hueFgStyle
+    }, avatarValue);
+  } finally {
+    _effect.f();
+  }
+};
+var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
+  var _effect = _useSignals4();
+  try {
+    const { t } = useTranslation4(NAVTREE_PLUGIN);
+    const itemElement = useRef(null);
+    const [closestEdge, setEdge] = useState2(null);
+    const type = l0ItemType(item);
+    const localizedString = toLocalizedString3(item.properties.label, t);
+    const hue = item.properties.hue ?? null;
+    const hueFgStyle = hue && {
+      style: {
+        color: `var(--dx-${hue}SurfaceText)`
+      }
+    };
+    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
+    ]);
+    return /* @__PURE__ */ React4.createElement(L0ItemRoot, {
+      ref: itemElement,
+      item,
+      parent,
+      path
+    }, /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      "data-frame": true,
+      className: mx2(
+        "flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded",
+        // TODO(burdon): Create reusable button/component and/or create var for size.
+        pinned ? "bg-transparent w-[50px] p-2 group-hover/l0item:bg-activeSurface" : "bg-activeSurface w-[50px] h-[50px]"
+      ),
+      ...hue && {
+        style: {
+          background: `var(--dx-${hue}Surface)`
+        }
+      }
+    }, item.properties.icon && /* @__PURE__ */ React4.createElement(Icon2, {
+      icon: item.properties.icon,
+      size: pinned ? 5 : 6,
+      ...hueFgStyle
+    }) || type === "tab" && item.properties.disposition !== "pin-end" && /* @__PURE__ */ React4.createElement(L0Avator, {
+      item
+    })), /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: "hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
+    }), /* @__PURE__ */ React4.createElement("span", {
+      id: `${item.id}__label`,
+      className: "sr-only"
+    }, localizedString), onRearrange && closestEdge && /* @__PURE__ */ React4.createElement(ListItem.DropIndicator, {
+      edge: closestEdge
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var L0Collection = ({ item, path }) => {
+  var _effect = _useSignals4();
+  try {
+    const navTreeContext = useNavTreeContext();
+    useLoadDescendents(item);
+    const collectionItems = navTreeContext.useItems(item);
+    const groupPath = useMemo2(() => [
+      ...path,
+      item.id
+    ], [
+      item.id,
+      path
+    ]);
+    const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+    const handleRearrange = useCallback((source, target, closestEdge) => {
+      invariant(item.properties.onRearrangeChildren, void 0, {
+        F: __dxlog_file,
+        L: 266,
+        S: void 0,
+        A: [
+          "item.properties.onRearrangeChildren",
+          ""
+        ]
+      });
+      const sourceIndex = collectionItems.findIndex((i) => i.id === source.id);
+      const targetIndex = collectionItems.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([
+        ...collectionItems
+      ], sourceIndex, insertIndex);
+      return item.properties.onRearrangeChildren(nextOrder);
+    }, [
+      collectionItems,
+      item.properties.onRearrangeChildren
+    ]);
+    return /* @__PURE__ */ React4.createElement("div", {
+      role: "group",
+      className: "contents group/l0c",
+      "aria-labelledby": `${item.id}__label`,
+      "data-itemid": id,
+      "data-testid": testId
+    }, collectionItems.map((collectionItem) => /* @__PURE__ */ React4.createElement(L0Item, {
+      key: collectionItem.id,
+      item: collectionItem,
+      parent: item,
+      path: groupPath,
+      ...item.properties.onRearrangeChildren && {
+        onRearrange: handleRearrange
+      }
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
+  var _effect = _useSignals4();
+  try {
+    const { t } = useTranslation4(NAVTREE_PLUGIN);
+    return /* @__PURE__ */ React4.createElement(Tabs.Tablist, {
+      classNames: [
+        "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg",
+        "grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout",
+        "!is-[--l0-size] bg-baseSurface border-ie border-subduedSeparator app-drag pbe-[env(safe-area-inset-bottom)]"
+      ]
+    }, /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: "flex justify-center p-1"
+    }, /* @__PURE__ */ React4.createElement(MenuProvider, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+      group: parent,
+      items: menuActions
+    }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React4.createElement(IconButton, {
+      iconOnly: true,
+      icon: "ph--dots-three--regular",
+      size: 5,
+      label: t("app menu label"),
+      tooltipSide: "right",
+      classNames: "w-[50px] _bg-primary-500",
+      "data-testid": "spacePlugin.addSpace"
+    }))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: mx2([
+        "flex flex-col gap-2 pbs-1",
+        '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
+        '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
+      ])
+    }, topLevelItems.map((item) => {
+      if (l0ItemType(item) === "collection") {
+        return /* @__PURE__ */ React4.createElement(L0Collection, {
+          key: item.id,
+          item,
+          parent,
+          path
+        });
+      } else {
+        return /* @__PURE__ */ React4.createElement(L0Item, {
+          key: item.id,
+          item,
+          parent,
+          path
+        });
+      }
+    })), /* @__PURE__ */ React4.createElement(ScrollArea.Scrollbar, {
+      orientation: "vertical"
+    }, /* @__PURE__ */ React4.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: "grid grid-cols-1 auto-rows-[--rail-action] pbs-2"
+    }, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React4.createElement(L0Item, {
+      key: item.id,
+      item,
+      parent,
+      path,
+      pinned: true
+    }))), userAccountItem && /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: "grid app-no-drag"
+    }, /* @__PURE__ */ React4.createElement(L0ItemRoot, {
+      key: userAccountItem.id,
+      item: userAccountItem,
+      parent,
+      path
+    }, /* @__PURE__ */ React4.createElement(UserAccountAvatar, {
+      userId: userAccountItem.properties.userId,
+      hue: userAccountItem.properties.hue,
+      emoji: userAccountItem.properties.emoji,
+      status: userAccountItem.properties.status,
+      size: 11
+    }))), /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: 'hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]',
+      style: {
+        background: "linear-gradient(to bottom, var(--dx-sidebarSurface) 0%, var(--dx-sidebarSurface) 70%, transparent 100%)"
+      }
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-navtree/src/components/Sidebar/L1Panel.tsx
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+import { Button as Button3, Icon as Icon3, IconButton as IconButton3, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { Tree } from "@dxos/react-ui-list";
+import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
+import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2, mx as mx4 } from "@dxos/react-ui-theme";
+
+// packages/plugins/plugin-navtree/src/components/NavTreeItem/NavTreeItemAction.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import React5 from "react";
+import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton as IconButton2, useDensityContext } from "@dxos/react-ui";
+import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
+import { hoverableControlItem, hoverableOpenControlItem, mx as mx3 } from "@dxos/react-ui-theme";
+var fallbackIcon = "ph--placeholder--regular";
+var fineActionButtonProps = {
+  size: 4,
+  density: "fine"
+};
+var coarseActionButtonProps = {
+  size: 5,
+  density: "coarse"
+};
+var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions, caller }) => {
+  var _effect = _useSignals5();
+  try {
+    const { t } = useTranslation5(NAVTREE_PLUGIN);
+    const density = useDensityContext();
+    return /* @__PURE__ */ React5.createElement(MenuProvider2, null, /* @__PURE__ */ React5.createElement(DropdownMenu2.Root, {
+      group: parent,
+      items: menuActions,
+      caller
+    }, /* @__PURE__ */ React5.createElement(DropdownMenu2.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React5.createElement(IconButton2, {
+      ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
+      classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
+      variant: "ghost",
+      icon: icon ?? fallbackIcon,
+      iconOnly: true,
+      label: toLocalizedString4(label, t),
+      "data-testid": testId
+    }))));
+  } finally {
+    _effect.f();
+  }
+};
+var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
+  label: "never"
+}, data: invoke, baseLabel }) => {
+  var _effect = _useSignals5();
+  try {
+    const density = useDensityContext();
+    return /* @__PURE__ */ React5.createElement(IconButton2, {
+      ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
+      variant,
+      classNames: mx3("shrink-0", hoverableControlItem, hoverableOpenControlItem, iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"),
+      icon: icon ?? fallbackIcon,
+      iconOnly,
+      label: baseLabel,
+      disabled,
+      onClick: (event) => {
+        if (disabled) {
+          return;
+        }
+        event.stopPropagation();
+        void invoke?.(caller ? {
+          parent,
+          caller
+        } : {
+          parent
+        });
+      },
+      "data-testid": testId
+    });
+  } finally {
+    _effect.f();
+  }
+};
+var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
+  var _effect = _useSignals5();
+  try {
+    const { t } = useTranslation5(NAVTREE_PLUGIN);
+    const monolithicAction = menuActions?.length === 1 && menuActions[0];
+    const baseLabel = toLocalizedString4(monolithicAction ? monolithicAction.properties.label : props.label, t);
+    return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React5.createElement(NavTreeItemMonolithicAction, {
+      baseLabel,
+      parent: node,
+      ...menuActions[0]
+    }) : /* @__PURE__ */ React5.createElement(NavTreeItemActionDropdownMenu, {
+      ...props,
+      label: baseLabel,
+      parent: node,
+      menuActions
+    });
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeItem/NavTreeItemColumns.tsx
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import React6, { Fragment, memo } from "react";
+import { isAction as isAction3 } from "@dxos/app-graph";
+import { DensityProvider, Popover, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
+var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
+  var _effect = _useSignals6();
+  try {
+    const { t } = useTranslation6(NAVTREE_PLUGIN);
+    const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+    const level = path.length - 2;
+    const { actions: _actions, groupedActions } = getActions2(item);
+    const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
+    const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
+      action
+    ] : []).filter((action) => !action.properties?.hidden);
+    const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+    useLoadDescendents(item);
+    useLoadDescendents(primaryAction && !isAction3(primaryAction) ? primaryAction : void 0);
+    return /* @__PURE__ */ React6.createElement(DensityProvider, {
+      density
+    }, /* @__PURE__ */ React6.createElement("div", {
+      role: "none",
+      className: "contents app-no-drag"
+    }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
+      testId: primaryAction.properties?.testId,
+      label: toLocalizedString5(primaryAction.properties?.label, t),
+      icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
+      parent: item,
+      monolithic: isAction3(primaryAction),
+      menuActions: isAction3(primaryAction) ? [
+        primaryAction
+      ] : groupedActions[primaryAction.id],
+      menuType: primaryAction.properties?.menuType,
+      caller: NAV_TREE_ITEM
+    }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
+      testId: `navtree.treeItem.actionsLevel${level}`,
+      label: t("tree item actions label"),
+      icon: "ph--dots-three-vertical--regular",
+      parent: item,
+      menuActions: actions,
+      menuType: "dropdown",
+      caller: NAV_TREE_ITEM
+    }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React6.createElement(ItemEnd, {
+      node: item,
+      open
+    })));
+  } finally {
+    _effect.f();
+  }
+});
+
+// packages/plugins/plugin-navtree/src/components/Sidebar/L1Panel.tsx
+var headingBackButtonLabel = "inset-0 min-is-0 truncate flex items-center pis-2";
+var TitleButton = ({ title, onClick }) => {
+  var _effect = _useSignals7();
+  try {
+    return /* @__PURE__ */ React7.createElement(Button3, {
+      variant: "ghost",
+      classNames: "pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal",
+      onClick
+    }, /* @__PURE__ */ React7.createElement(Icon3, {
+      icon: "ph--caret-left--bold",
+      size: 3
+    }), /* @__PURE__ */ React7.createElement("span", {
+      className: mx4(headingBackButtonLabel)
+    }, title));
+  } finally {
+    _effect.f();
+  }
+};
+var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
+  var _effect = _useSignals7();
+  try {
+    const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
+    const { t } = useTranslation7(NAVTREE_PLUGIN);
+    const alternateTree = navTreeContext.useItems(item, {
+      disposition: "alternate-tree"
+    })[0];
+    const alternatePath = useMemo3(() => [
+      ...path,
+      item.id
+    ], [
+      item.id,
+      path
+    ]);
+    const handleOpen = useCallback2(() => setAlternateTree?.(alternatePath, true), [
+      alternatePath,
+      setAlternateTree
+    ]);
+    const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
+    const useAlternateItems = useCallback2((node, { disposition } = {}) => {
+      return navTreeContext.useItems(node, {
+        disposition,
+        sort: node?.id === alternateTree.id
+      });
+    }, [
+      navTreeContext,
+      alternateTree
+    ]);
+    const handleBack = useCallback2(() => {
+      if (isAlternate) {
+        setAlternateTree?.(alternatePath, false);
+      } else {
+        onBack?.();
+      }
+    }, [
+      isAlternate,
+      onBack,
+      alternatePath,
+      setAlternateTree
+    ]);
+    const title = toLocalizedString6(item.properties.label, t);
+    const backCapable = item.id.startsWith("!") || isAlternate;
+    return /* @__PURE__ */ React7.createElement(Tabs2.Tabpanel, {
+      key: item.id,
+      value: item.id,
+      classNames: [
+        "absolute inset-block-0 inline-end-0",
+        "is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]",
+        "pbs-[env(safe-area-inset-top)]",
+        item.id === currentItemId && "grid"
+      ],
+      tabIndex: -1,
+      "aria-label": title,
+      ...!open && {
+        inert: "true"
+      }
+    }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
+      className: "flex items-center border-be border-subduedSeparator app-drag pli-1"
+    }, backCapable ? /* @__PURE__ */ React7.createElement(TitleButton, {
+      title,
+      onClick: handleBack
+    }) : /* @__PURE__ */ React7.createElement("span", {
+      className: "flex-1 truncate min-is-0 pis-6"
+    }, title), alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton3, {
+      variant: "ghost",
+      classNames: mx4("shrink-0", hoverableControlItem2, hoverableOpenControlItem2, "pli-2 pointer-fine:pli-1"),
+      iconOnly: true,
+      size: 5,
+      density: "coarse",
+      icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
+      label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
+      "data-testid": "treeView.alternateTreeButton",
+      onClick: handleOpen
+    }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
+      path,
+      item,
+      open: true,
+      density: "coarse"
+    })), /* @__PURE__ */ React7.createElement("div", {
+      role: "none",
+      className: "overflow-y-auto"
+    }, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
+      ...navTreeContext,
+      useItems: useAlternateItems,
+      id: alternateTree.id,
+      root: alternateTree,
+      path: alternatePath,
+      levelOffset: 5,
+      gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
+      renderColumns: NavTreeItemColumns
+    }) : /* @__PURE__ */ React7.createElement(Tree, {
+      ...navTreeContext,
+      id: item.id,
+      root: item,
+      path,
+      levelOffset: 5,
+      draggable: true,
+      gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
+      renderColumns: NavTreeItemColumns
+    }))));
+  } finally {
+    _effect.f();
+  }
+};
+var L1PanelCollection = ({ item, path, ...props }) => {
+  var _effect = _useSignals7();
+  try {
+    const { useItems: useItems2 } = useNavTreeContext();
+    useLoadDescendents(item);
+    const collectionItems = useItems2(item);
+    const groupPath = useMemo3(() => [
+      ...path,
+      item.id
+    ], [
+      item.id,
+      path
+    ]);
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React7.createElement(L1Panel, {
+      key: item2.id,
+      item: item2,
+      path: groupPath,
+      ...props
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var L1Panels = ({ topLevelItems, onBack, ...props }) => {
+  var _effect = _useSignals7();
+  try {
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, topLevelItems.map((item) => {
+      const type = l0ItemType(item);
+      switch (type) {
+        case "collection":
+          return /* @__PURE__ */ React7.createElement(L1PanelCollection, {
+            key: item.id,
+            item,
+            ...props
+          });
+        case "tab":
+          return /* @__PURE__ */ React7.createElement(L1Panel, {
+            key: item.id,
+            item,
+            ...props,
+            onBack
+          });
+        default:
+          return null;
+      }
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTree/NavTree.tsx
+var NAV_TREE_ITEM = "NavTreeItem";
+var NavTree = ({ id, root, ...props }) => {
+  var _effect = _useSignals8();
+  try {
+    const { tab, useItems: useItems2, onBack } = useNavTreeContext();
+    const topLevelActions = useItems2(root, {
+      disposition: "menu",
+      sort: true
+    });
+    const topLevelCollections = useItems2(root, {
+      disposition: "collection"
+    });
+    const topLevelWorkspaces = useItems2(root, {
+      disposition: "workspace"
+    });
+    const topLevelNavigation = useItems2(root, {
+      disposition: "navigation"
+    });
+    const l0Items = useMemo4(() => [
+      // prettier-ignore
+      ...topLevelCollections,
+      ...topLevelWorkspaces,
+      ...topLevelNavigation
+    ], [
+      topLevelCollections,
+      topLevelWorkspaces,
+      topLevelNavigation
+    ]);
+    const pinnedItems = useItems2(root, {
+      disposition: "pin-end",
+      sort: true
+    });
+    const userAccountItem = useItems2(root, {
+      disposition: "user-account"
+    })[0];
+    const topLevelItems = useMemo4(() => [
+      // prettier-ignore
+      ...l0Items,
+      ...pinnedItems,
+      ...userAccountItem ? [
+        userAccountItem
+      ] : []
+    ], [
+      l0Items,
+      pinnedItems,
+      userAccountItem
+    ]);
+    useLoadDescendents(root);
+    const path = useMemo4(() => [
+      id
+    ], [
+      id
+    ]);
+    return /* @__PURE__ */ React8.createElement(Tabs3.Root, {
+      value: tab,
+      orientation: "vertical",
+      verticalVariant: "stateless",
+      classNames: "relative"
+    }, /* @__PURE__ */ React8.createElement(L0Menu, {
+      menuActions: topLevelActions,
+      topLevelItems: l0Items,
+      pinnedItems,
+      userAccountItem,
+      path,
+      parent: root
+    }), /* @__PURE__ */ React8.createElement(L1Panels, {
+      topLevelItems,
+      path,
+      currentItemId: tab,
+      onBack,
+      ...props
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-navtree/src/capabilities/index.ts
+import { lazy } from "@dxos/app-framework";
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-P7AY3K72.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-NAYKKAOP.mjs"));
+var Keyboard2 = lazy(() => import("./keyboard-DDFATRUG.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-HGA3TAQU.mjs"));
+var State = lazy(() => import("./state-R2UMYAHN.mjs"));
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
+var NODE_TYPE = "dxos/app-graph/node";
+var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Surface, {
+  role: "navtree-item-end",
+  data: {
+    id: node.id,
+    subject: node.data,
+    open
+  },
+  limit: 1
+});
+var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE);
+var filterItems = (node, disposition) => {
+  if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
+    return false;
+  } else if (!disposition) {
+    const action = isAction4(node);
+    return !action || node.properties.disposition === "item";
+  } else {
+    return node.properties.disposition === disposition;
+  }
+};
+var getItems = (graph, node, disposition) => {
+  return graph.getConnections(node?.id ?? ROOT_ID, "outbound").filter((node2) => filterItems(node2, disposition));
+};
+var useItems = (node, options) => {
+  const { graph } = useAppGraph2();
+  const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node2) => filterItems(node2, options?.disposition));
+  return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
+};
+var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
+  var _effect = _useSignals9();
+  try {
+    const [isLg] = useMediaQuery2("lg", {
+      ssr: false
+    });
+    const { dispatchPromise: dispatch } = useIntentDispatcher3();
+    const { graph } = useAppGraph2();
+    const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
+    const layout = useLayout();
+    const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+    const getActions2 = useCallback3((node) => getActions(graph, node), [
+      graph
+    ]);
+    const getProps = useCallback3((node, path) => {
+      const children = getChildren(graph, node, path).filter(getChildrenFilter);
+      const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
+      return {
+        id: node.id,
+        label: node.properties.label ?? node.id,
+        parentOf,
+        icon: node.properties.icon,
+        disabled: node.properties.disabled,
+        className: mx5(node.properties.modified && "italic", node.properties.className),
+        headingClassName: node.properties.headingClassName,
+        testId: node.properties.testId
+      };
+    }, [
+      graph
+    ]);
+    const loadDescendents = useCallback3((node) => {
+      graph.expand(node.id, "outbound");
+      graph.getConnections(node.id, "outbound").forEach((child) => {
+        graph.expand(child.id, "outbound");
+      });
+    }, [
+      graph
+    ]);
+    const handleOpenChange = useCallback3(({ item: { id }, path, open }) => {
+      setItem(path, "open", open);
+      graph.expand(id, "outbound");
+    }, [
+      graph
+    ]);
+    const handleTabChange = useCallback3(async (node) => {
+      await dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
+        part: "sidebar",
+        options: {
+          state: node.id === tab ? navigationSidebarState === "expanded" ? isLg ? "collapsed" : "closed" : "expanded" : "expanded"
+        }
+      }));
+      await dispatch(createIntent3(LayoutAction3.SwitchWorkspace, {
+        part: "workspace",
+        subject: node.id
+      }));
+      if (layout.active.length === 0) {
+        const [item] = getItems(graph, node).filter((node2) => !isActionLike2(node2));
+        if (item && item.data) {
+          await dispatch(createIntent3(LayoutAction3.Open, {
+            part: "main",
+            subject: [
+              item.id
+            ]
+          }));
+        }
+      }
+    }, [
+      dispatch,
+      layout.active,
+      tab,
+      navigationSidebarState,
+      isLg
+    ]);
+    const canDrop = useCallback3((source, target) => {
+      const sourceNode = source.item;
+      const targetNode = target.item;
+      if (isSpace(targetNode.data)) {
+        return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
+      } else if (isEchoObject(targetNode.data)) {
+        return isEchoObject(sourceNode.data);
+      } else {
+        return false;
+      }
+    }, []);
+    const handleSelect = useCallback3(({ item: node, path, option }) => {
+      if (!node.data) {
+        return;
+      }
+      if (isAction4(node)) {
+        const [parent] = graph.getConnections(node.id, "inbound");
+        void (parent && node.data({
+          parent,
+          caller: NAV_TREE_ITEM
+        }));
+        return;
+      }
+      const current = isCurrent(path, node);
+      if (!current) {
+        void dispatch(createIntent3(LayoutAction3.Open, {
+          part: "main",
+          subject: [
+            node.id
+          ],
+          options: {
+            key: node.properties.key
+          }
+        }));
+      } else if (option) {
+        void dispatch(createIntent3(LayoutAction3.Close, {
+          part: "main",
+          subject: [
+            node.id
+          ],
+          options: {
+            state: false
+          }
+        }));
+      } else {
+        void dispatch(createIntent3(LayoutAction3.ScrollIntoView, {
+          part: "current",
+          subject: node.id
+        }));
+      }
+      const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === "default");
+      if (isAction4(defaultAction)) {
+        void defaultAction.data();
+      }
+      if (!isLg) {
+        void dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
+          part: "sidebar",
+          options: {
+            state: "closed"
+          }
+        }));
+      }
+    }, [
+      graph,
+      dispatch,
+      isCurrent,
+      isLg
+    ]);
+    const handleBack = useCallback3(() => dispatch(createIntent3(LayoutAction3.RevertWorkspace, {
+      part: "workspace",
+      options: {
+        revert: true
+      }
+    })), [
+      dispatch
+    ]);
+    useEffect3(() => {
+      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 operation = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && 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 sourceParent?.properties.onRearrangeChildren?.(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 || !sourceParent?.properties.onTransferEnd) {
+                  break;
+                }
+                void target2?.properties.onTransferStart(sourceNode, migrationIndex);
+                void sourceParent?.properties.onTransferEnd?.(sourceNode, target2);
+                break;
+              }
+            }
+          }
+        }
+      });
+    }, [
+      graph
+    ]);
+    const setAlternateTree = useCallback3((path, open) => {
+      setItem(path, "alternateTree", open);
+    }, [
+      setItem
+    ]);
+    const navTreeContextValue = useMemo5(() => ({
+      useItems,
+      tab,
+      getActions: getActions2,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      topbar,
+      getProps,
+      isCurrent,
+      isOpen,
+      canDrop,
+      isAlternateTree,
+      setAlternateTree,
+      onTabChange: handleTabChange,
+      onOpenChange: handleOpenChange,
+      onSelect: handleSelect,
+      onBack: handleBack
+    }), [
+      tab,
+      getActions2,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      topbar,
+      getProps,
+      isCurrent,
+      isOpen,
+      canDrop,
+      isAlternateTree,
+      setAlternateTree,
+      handleTabChange,
+      handleOpenChange,
+      handleSelect,
+      handleBack
+    ]);
+    return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
+      value: navTreeContextValue
+    }, /* @__PURE__ */ React9.createElement(NavTree, {
+      id: ROOT_ID,
+      root: graph.root,
+      open: layout.sidebarOpen
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+
+export {
+  CommandsDialogContent,
+  CommandsTrigger,
+  getParent,
+  getPersistenceParent,
+  resolveMigrationOperation,
+  sortActions,
+  getChildren,
+  getActions,
+  l0ItemType,
+  NODE_TYPE,
+  NavTreeContainer,
+  NavTreeDocumentTitle,
+  AppGraphBuilder,
+  IntentResolver,
+  Keyboard2 as Keyboard,
+  ReactSurface,
+  State
+};
+//# sourceMappingURL=chunk-MFAWMFJC.mjs.map