@dxos/plugin-navtree 0.6.8-main.046e6cf

package/dist/lib/browser/index.mjs

@@ -0,0 +1,1055 @@
+import {
+  KEY_BINDING,
+  NAVTREE_PLUGIN,
+  meta_default
+} from "./chunk-U7MTKDFQ.mjs";
+
+// packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
+import { MagnifyingGlass as MagnifyingGlass2 } from "@phosphor-icons/react";
+import React8 from "react";
+import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction4, parseGraphPlugin, NavigationAction as NavigationAction2 } from "@dxos/app-framework";
+import { createExtension, isAction as isAction4, isGraphNode } from "@dxos/app-graph";
+import { Keyboard as Keyboard2 } from "@dxos/keyboard";
+import { LocalStorageStore } from "@dxos/local-storage";
+import { Path as Path3 } from "@dxos/react-ui-mosaic";
+import { getHostPlatform as getHostPlatform2 } from "@dxos/util";
+
+// packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
+import { DotOutline } from "@phosphor-icons/react";
+import React, { useMemo, useState } from "react";
+import { useIntentDispatcher, LayoutAction } from "@dxos/app-framework";
+import { isActionGroup, isAction } from "@dxos/app-graph";
+import { Keyboard, keySymbols } from "@dxos/keyboard";
+import { useGraph } from "@dxos/plugin-graph";
+import { Button, Dialog, useTranslation, toLocalizedString } from "@dxos/react-ui";
+import { SearchList } from "@dxos/react-ui-searchlist";
+import { descriptionText, getSize, mx } from "@dxos/react-ui-theme";
+import { getHostPlatform } from "@dxos/util";
+var CommandsDialogContent = ({ selected: initial }) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const [selected, setSelected] = useState(initial);
+  const dispatch = useIntentDispatcher();
+  const { graph } = useGraph();
+  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 actions = isActionGroup(group) ? graph.actions(group) : 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()];
+    const Icon = action.properties.icon ?? DotOutline;
+    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({
+          action: LayoutAction.SET_LAYOUT,
+          data: {
+            element: "dialog",
+            state: false
+          }
+        });
+        setTimeout(() => {
+          const node = graph.nodes(group ?? action, {
+            relation: "inbound"
+          })[0];
+          void (node && isAction(action) && action.data({
+            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, {
+      className: mx(getSize(4), "shrink-0", !action.properties.icon && "invisible")
+    }), /* @__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"
+  }))));
+};
+
+// packages/plugins/plugin-navtree/src/components/NavBarStart.tsx
+import { DotsThreeVertical } from "@phosphor-icons/react";
+import React2, { Fragment } from "react";
+import { getGraph } from "@dxos/app-graph";
+import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { PlankHeading } from "@dxos/react-ui-deck";
+var TREE_ITEM_MAIN_HEADING = "TreeItemMainHeading";
+var NavBarStart = ({ activeNode, popoverAnchorId }) => {
+  const { t } = useTranslation2(NAVTREE_PLUGIN);
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${TREE_ITEM_MAIN_HEADING}/${activeNode.id}` || popoverAnchorId === `dxos.org/ui/${KEY_BINDING}/${activeNode.id}` ? Popover.Anchor : Fragment;
+  const Icon = activeNode.properties?.icon ?? DotsThreeVertical;
+  const graph = getGraph(activeNode);
+  const actions = graph.actions(activeNode);
+  const label = toLocalizedString2(activeNode.properties?.label, t);
+  const menuTriggerLabel = t("node actions menu invoker label");
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ActionRoot, null, /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
+    Icon,
+    attendableId: activeNode.id,
+    triggerLabel: menuTriggerLabel,
+    actions,
+    onAction: (action) => typeof action.data === "function" && action.data({
+      node: action,
+      caller: TREE_ITEM_MAIN_HEADING
+    })
+  })), /* @__PURE__ */ React2.createElement(PlankHeading.Label, {
+    attendableId: activeNode.id
+  }, label));
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
+import React4, { useCallback, useMemo as useMemo2 } from "react";
+import { NavigationAction, LayoutAction as LayoutAction2, Surface, SLUG_PATH_SEPARATOR, SLUG_COLLECTION_INDICATOR, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import { getGraph as getGraph2, isAction as isAction3, isActionLike } from "@dxos/app-graph";
+import { ElevationProvider, useMediaQuery, useSidebars as useSidebars2 } from "@dxos/react-ui";
+import { Path as Path2 } from "@dxos/react-ui-mosaic";
+import { NavTree, getLevel } from "@dxos/react-ui-navtree";
+import { arrayMove } from "@dxos/util";
+
+// packages/plugins/plugin-navtree/src/components/NavTreeFooter.tsx
+import { ArrowSquareOut, GearSix, Warning } from "@phosphor-icons/react";
+import { formatDistance } from "date-fns/formatDistance";
+import React3 from "react";
+import { SettingsAction, useResolvePlugin, parseNavigationPlugin, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { useConfig } from "@dxos/react-client";
+import { Button as Button2, Tooltip, Popover as Popover2, useSidebars, useTranslation as useTranslation3, Link, Message, Trans, useDefaultValue } from "@dxos/react-ui";
+import { PlankHeading as PlankHeading2 } from "@dxos/react-ui-deck";
+import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
+var buttonStyles = "pli-1.5 text-xs font-normal";
+var repo = "https://github.com/dxos/dxos";
+var NavTreeFooter = (props) => {
+  const layoutPart = useDefaultValue(props.layoutPart, "sidebar");
+  const config = useConfig();
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
+  const dispatch = useIntentDispatcher2();
+  const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
+  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
+  const releaseUrl = config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production" ? `${repo}/releases/tag/v${version}` : `${repo}/commit/${commitHash}`;
+  const previewUrl = "https://docs.dxos.org/composer#technology-preview";
+  return /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: mx2("bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content separator-separator border-bs pli-1 flex justify-end", layoutPart === "complementary" && "md:justify-end flex-row-reverse")
+  }, /* @__PURE__ */ React3.createElement(Popover2.Root, null, /* @__PURE__ */ React3.createElement(Popover2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Button2, {
+    variant: "ghost",
+    classNames: buttonStyles,
+    ...!navigationSidebarOpen && {
+      tabIndex: -1
+    }
+  }, "v", version)), /* @__PURE__ */ React3.createElement(Popover2.Portal, null, /* @__PURE__ */ React3.createElement(Popover2.Content, {
+    side: "top",
+    role: "message",
+    classNames: "z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]"
+  }, /* @__PURE__ */ React3.createElement(Message.Root, {
+    valence: "warning",
+    className: "rounded-be-none p-5"
+  }, /* @__PURE__ */ React3.createElement(Message.Title, null, /* @__PURE__ */ React3.createElement(Warning, {
+    weight: "duotone",
+    className: "inline mie-2 is-6 bs-6"
+  }), /* @__PURE__ */ React3.createElement("span", null, t("warning title"))), /* @__PURE__ */ React3.createElement(Message.Body, null, t("technology preview message"), /* @__PURE__ */ React3.createElement("br", null), /* @__PURE__ */ React3.createElement(Link, {
+    href: previewUrl,
+    target: "_blank",
+    rel: "noreferrer",
+    variant: "neutral"
+  }, t("learn more label"), /* @__PURE__ */ React3.createElement(ArrowSquareOut, {
+    className: "inline mis-1",
+    weight: "bold"
+  })))), /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "plb-4 pli-5 space-b-2 text-base"
+  }, timestamp && /* @__PURE__ */ React3.createElement("p", null, t("released message", {
+    released: formatDistance(new Date(timestamp), /* @__PURE__ */ new Date(), {
+      addSuffix: true
+    })
+  }), /* @__PURE__ */ React3.createElement("br", null), /* @__PURE__ */ React3.createElement(Link, {
+    href: releaseUrl,
+    target: "_blank",
+    rel: "noreferrer",
+    variant: "neutral"
+  }, t("see release label"), /* @__PURE__ */ React3.createElement(ArrowSquareOut, {
+    className: "inline mis-1",
+    weight: "bold"
+  }))), /* @__PURE__ */ React3.createElement("p", null, /* @__PURE__ */ React3.createElement(Trans, {
+    t,
+    i18nKey: "powered by dxos message",
+    components: {
+      dxos: /* @__PURE__ */ React3.createElement(Link, {
+        href: "https://dxos.org",
+        target: "_blank",
+        rel: "noreferrer",
+        variant: "neutral"
+      })
+    }
+  }))), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null)))), /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Button2, {
+    variant: "ghost",
+    classNames: buttonStyles,
+    "data-testid": "treeView.openSettings",
+    "data-joyride": "welcome/settings",
+    ...!navigationSidebarOpen && {
+      tabIndex: -1
+    },
+    onClick: () => dispatch({
+      action: SettingsAction.OPEN
+    })
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: "sr-only"
+  }, t("open settings label")), /* @__PURE__ */ React3.createElement(GearSix, {
+    className: mx2(getSize2(4), "rotate-90")
+  }))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, {
+    classNames: "z-[12]"
+  }, t("open settings label"), /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React3.createElement(PlankHeading2.Controls, {
+    variant: "hide-disabled",
+    capabilities: {
+      incrementStart: false,
+      incrementEnd: false
+    },
+    onClick: (_type) => {
+    }
+  }));
+};
+
+// packages/plugins/plugin-navtree/src/util.ts
+import { ACTION_TYPE, ACTION_GROUP_TYPE, isAction as isAction2 } from "@dxos/app-graph";
+import { Path } from "@dxos/react-ui-mosaic";
+import { nonNullable } from "@dxos/util";
+var getParent = (graph, node, path) => {
+  const parentId = path[path.length - 2];
+  return graph.nodes(node, {
+    relation: "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) && destinationRelatedNode.properties.onTransferStart ? "transfer" : destinationRelatedNode.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 === "toolbar") {
+    return -1;
+  }
+  return 1;
+});
+var getTreeItemNode = (treeItems, path) => {
+  if (!path) {
+    return void 0;
+  }
+  return treeItems.find((treeItem) => {
+    return treeItem.path && !treeItem.path.find((id, index) => path[index] !== id);
+  });
+};
+var getChildren = (graph, node, filter, path = []) => {
+  return graph.nodes(node, {
+    relation: "outbound",
+    filter
+  }).map((n) => {
+    const nextPath = [
+      ...path,
+      node.id
+    ];
+    return nextPath.includes(n.id) ? void 0 : n;
+  }).filter(nonNullable);
+};
+var getActions = (graph, node) => {
+  return graph.actions(node).reduce((acc, arg) => {
+    acc.actions.push(arg);
+    if (!isAction2(arg)) {
+      const actionGroup = graph.actions(arg);
+      acc.groupedActions[arg.id] = actionGroup;
+    }
+    return acc;
+  }, {
+    actions: [],
+    groupedActions: {}
+  });
+};
+var expandChildrenAndActions = (graph, node) => {
+  return Promise.all([
+    expandChildren(graph, node),
+    expandActions(graph, node)
+  ]);
+};
+var expandChildren = (graph, node) => {
+  return graph.expand(node, "outbound");
+};
+var expandActions = (graph, node) => {
+  return Promise.all([
+    graph.expand(node, "outbound", ACTION_TYPE),
+    graph.expand(node, "outbound", ACTION_GROUP_TYPE)
+  ]);
+};
+function* navTreeItemVisitor(graph, node, openItemIds, path = [], filter) {
+  const l0Children = getChildren(graph, node, filter, path);
+  const { actions: l0Actions, groupedActions: l0GroupedActions } = getActions(graph, node);
+  const stack = [
+    {
+      id: node.id,
+      node,
+      path: [],
+      parentOf: (l0Children ?? []).map(({ id }) => id),
+      actions: l0Actions,
+      groupedActions: l0GroupedActions
+    }
+  ];
+  while (stack.length > 0) {
+    const nextItem = stack.pop();
+    if ((nextItem.path?.length ?? 0) > 0) {
+      yield nextItem;
+    }
+    const { id, node: node2, path: path2 } = nextItem;
+    const children = getChildren(graph, node2, filter, path2);
+    if (path2?.length === 0 || (id ?? "never") in openItemIds) {
+      for (let i = children.length - 1; i >= 0; i--) {
+        const child = children[i];
+        const childPath = path2 ? [
+          ...path2,
+          child.id
+        ] : [
+          child.id
+        ];
+        const childChildren = getChildren(graph, child, filter, childPath);
+        const { actions: childActions, groupedActions: childGroupedActions } = getActions(graph, child);
+        stack.push({
+          id: Path.create(...childPath),
+          node: child,
+          path: childPath,
+          ...(childChildren?.length ?? 0) > 0 && {
+            parentOf: childChildren.map(({ id: id2 }) => Path.create(...childPath, id2))
+          },
+          actions: childActions,
+          groupedActions: childGroupedActions
+        });
+      }
+    }
+  }
+}
+var treeItemsFromRootNode = (graph, rootNode, openItemIds, path = [], filter) => {
+  return Array.from(navTreeItemVisitor(graph, rootNode, openItemIds, path, filter));
+};
+var expandOpenGraphNodes = (graph, openItemIds) => {
+  return Promise.all(Object.keys(openItemIds).map((openItemId) => {
+    const node = graph.findNode(Path.last(openItemId));
+    return node && expandChildrenAndActions(graph, node);
+  }).filter(nonNullable));
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
+var NODE_TYPE = "dxos/app-graph/node";
+var renderPresence = (node) => /* @__PURE__ */ React4.createElement(Surface, {
+  role: "presence--glyph",
+  data: {
+    object: node.data
+  }
+});
+var NavTreeContainer = ({ root, activeIds, openItemIds, onOpenItemIdsChange, attended, popoverAnchorId }) => {
+  const { closeNavigationSidebar } = useSidebars2(NAVTREE_PLUGIN);
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
+  });
+  const dispatch = useIntentDispatcher3();
+  const graph = useMemo2(() => getGraph2(root), [
+    root
+  ]);
+  const items = treeItemsFromRootNode(graph, root, openItemIds);
+  const loadDescendents = useCallback((node) => {
+    void expandActions(graph, node);
+    if (!isActionLike(node)) {
+      void expandChildren(graph, node).then(() => (
+        // Load one level deeper, which resolves some juddering observed on open/close.
+        Promise.all(getChildren(graph, node).flatMap((child) => [
+          expandActions(graph, child),
+          expandChildren(graph, child)
+        ]))
+      ));
+    }
+  }, [
+    graph
+  ]);
+  const handleNavigate = async ({ node, actions }) => {
+    if (!node.data) {
+      return;
+    }
+    await dispatch({
+      action: NavigationAction.OPEN,
+      data: {
+        activeParts: node.data?.comments ? {
+          main: [
+            node.id
+          ],
+          complementary: [
+            `${node.id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
+          ]
+        } : {
+          main: [
+            node.id
+          ]
+        }
+      }
+    });
+    await dispatch({
+      action: LayoutAction2.SCROLL_INTO_VIEW,
+      data: {
+        id: node.id
+      }
+    });
+    const defaultAction = actions?.find((action) => action.properties?.disposition === "default");
+    if (isAction3(defaultAction)) {
+      void defaultAction.data();
+    }
+    !isLg && closeNavigationSidebar();
+  };
+  const handleItemOpenChange = ({ id, actions, path }, nextOpen) => {
+    if (path) {
+      if (nextOpen) {
+        onOpenItemIdsChange({
+          ...openItemIds,
+          [id]: true
+        });
+      } else {
+        const { [id]: _, ...nextOpenItemIds } = openItemIds;
+        onOpenItemIdsChange(nextOpenItemIds);
+      }
+    }
+    const defaultAction = actions?.find((action) => action.properties?.disposition === "default");
+    if (isAction3(defaultAction)) {
+      void defaultAction.data();
+    }
+  };
+  const resolveItemLevel = useCallback((overPosition, activeId, levelOffset) => {
+    if (!(typeof overPosition === "number" && activeId)) {
+      return 1;
+    } else {
+      const nextItems = arrayMove(items, items.findIndex(({ id }) => id === activeId), overPosition);
+      const previousItem = nextItems[overPosition - 1];
+      const nextItem = nextItems[overPosition + 1];
+      return Math.min(previousItem ? getLevel(previousItem?.path) + 1 : 1, Math.max(nextItem ? getLevel(nextItem?.path) : 1, getLevel(nextItems[overPosition].path) + levelOffset));
+    }
+  }, [
+    items
+  ]);
+  const handleMove = useCallback(({ active, over, details }) => {
+    const levelOffset = Math.floor((details?.delta?.x ?? 0) / 16);
+    const overPosition = over.position ?? 0;
+    const nextItems = arrayMove(items, items.findIndex(({ id }) => id === active.item.id), overPosition);
+    const previousItem = nextItems[overPosition - 1];
+    const nextItem = nextItems[overPosition + 1];
+    const activeNode = "node" in active.item ? active.item.node : void 0;
+    if (!activeNode || !previousItem || !previousItem.path) {
+      return {
+        operation: "reject",
+        details: {
+          levelOffset
+        }
+      };
+    }
+    const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
+    const previousLevel = getLevel(previousItem.path);
+    if (previousLevel === overLevel - 1) {
+      if (Path2.hasChild(previousItem.id, active.item.id)) {
+        const operation = previousItem.node.properties.onRearrangeChildren ? "rearrange" : "reject";
+        return {
+          operation,
+          details: {
+            levelOffset
+          }
+        };
+      } else {
+        const operation = resolveMigrationOperation(graph, activeNode, previousItem.path, previousItem.node);
+        return {
+          operation,
+          details: {
+            levelOffset
+          }
+        };
+      }
+    } else if (previousLevel === overLevel) {
+      const parent = getParent(graph, previousItem.node, previousItem.path);
+      const parentPath = previousItem.path.slice(0, previousItem.path.length - 1);
+      if (Path2.siblings(previousItem.id, active.item.id)) {
+        const operation = parent?.properties.onRearrangeChildren ? "rearrange" : "reject";
+        return {
+          operation,
+          details: {
+            levelOffset
+          }
+        };
+      } else {
+        const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
+        return {
+          operation,
+          details: {
+            levelOffset
+          }
+        };
+      }
+    } else if (nextItem && nextItem.path) {
+      const nextLevel = getLevel(nextItem.path);
+      if (nextLevel === overLevel) {
+        const parent = getParent(graph, nextItem.node, nextItem.path);
+        const parentPath = nextItem.path.slice(0, nextItem.path.length - 1);
+        if (Path2.siblings(nextItem.id, active.item.id)) {
+          const operation = parent?.properties.onRearrangeChildren ? "rearrange" : "reject";
+          return {
+            operation,
+            details: {
+              levelOffset
+            }
+          };
+        } else {
+          const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
+          return {
+            operation,
+            details: {
+              levelOffset
+            }
+          };
+        }
+      } else {
+        return {
+          operation: "reject",
+          details: {
+            levelOffset
+          }
+        };
+      }
+    } else {
+      return {
+        operation: "reject",
+        details: {
+          levelOffset
+        }
+      };
+    }
+  }, [
+    root,
+    items
+  ]);
+  const handleDrop = useCallback(({ operation, active, over, details = {} }) => {
+    if (Path2.first(over.path) !== root.id) {
+      return void 0;
+    }
+    const { levelOffset = 0 } = details;
+    const overPosition = over.position ?? 0;
+    const nextItems = arrayMove(items, items.findIndex(({ id }) => id === active.item.id), overPosition);
+    const activeNode = "node" in active.item ? active.item.node : void 0;
+    const activeParentId = Path2.parent(active.item.id);
+    if (!activeNode) {
+      return void 0;
+    }
+    const activeParent = getParent(graph, activeNode, active.item.path ?? []);
+    if (operation === "rearrange") {
+      void activeParent?.properties.onRearrangeChildren?.(nextItems.filter(({ id }) => Path2.hasChild(activeParentId, id)).map(({ node }) => node.data));
+      return null;
+    } else {
+      const previousItem = nextItems[overPosition - 1];
+      const nextItem = nextItems[overPosition + 1];
+      const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
+      const previousLevel = getLevel(previousItem.path);
+      if (operation === "copy") {
+        if (previousLevel === overLevel - 1) {
+          void previousItem.node.properties.onCopy?.(activeNode, 0);
+          return null;
+        } else if (previousLevel === overLevel) {
+          const parent = getParent(graph, previousItem.node, previousItem.path ?? []);
+          void parent?.properties.onCopy?.(activeNode, getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1);
+          return null;
+        } else if (nextItem && nextItem.path) {
+          const parent = getParent(graph, nextItem.node, nextItem.path ?? []);
+          void parent?.properties.onCopy?.(activeNode, getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id));
+          return null;
+        }
+      } else if (operation === "transfer") {
+        const onTransferEnd = activeParent?.properties.onTransferEnd;
+        if (!onTransferEnd) {
+          return void 0;
+        } else if (previousLevel === overLevel - 1) {
+          const onTransferStart = previousItem.node.properties.onTransferStart;
+          if (onTransferStart) {
+            void onTransferEnd(activeNode, previousItem.node);
+            void onTransferStart(activeNode, 0);
+            return null;
+          }
+        } else if (previousLevel === overLevel && previousItem.path) {
+          const parent = getParent(graph, previousItem.node, previousItem.path);
+          if (parent?.properties.onTransferStart) {
+            void onTransferEnd(activeNode, previousItem.node);
+            void parent.properties.onTransferStart(activeNode, getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1);
+            return null;
+          }
+        } else if (nextItem && nextItem.path) {
+          const parent = getParent(graph, nextItem.node, nextItem.path);
+          if (parent?.properties.onTransferStart) {
+            void onTransferEnd(activeNode, previousItem.node);
+            void parent.properties.onTransferStart(activeNode, getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id));
+            return null;
+          }
+        }
+      }
+    }
+    return void 0;
+  }, [
+    root,
+    items
+  ]);
+  const handleDragEnd = useCallback(() => {
+    onOpenItemIdsChange({
+      ...openItemIds
+    });
+  }, [
+    onOpenItemIdsChange,
+    openItemIds
+  ]);
+  return /* @__PURE__ */ React4.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: "bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]"
+  }, /* @__PURE__ */ React4.createElement(Surface, {
+    role: "search-input",
+    limit: 1
+  }), /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: "!overflow-y-auto"
+  }, /* @__PURE__ */ React4.createElement(NavTree, {
+    id: root.id,
+    items,
+    current: activeIds,
+    attended,
+    type: NODE_TYPE,
+    onNavigate: handleNavigate,
+    onItemOpenChange: handleItemOpenChange,
+    open: openItemIds,
+    onMove: handleMove,
+    onDrop: handleDrop,
+    onDragEnd: handleDragEnd,
+    popoverAnchorId,
+    renderPresence,
+    resolveItemLevel,
+    loadDescendents
+  })), /* @__PURE__ */ React4.createElement(NavTreeFooter, null)));
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
+import { useEffect } from "react";
+import { toLocalizedString as toLocalizedString3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+var NavTreeDocumentTitle = ({ node }) => {
+  const { t } = useTranslation4(NAVTREE_PLUGIN);
+  useEffect(() => {
+    document.title = node ? toLocalizedString3(node.properties.label, t) : t("current app name", {
+      ns: "appkit"
+    });
+  }, [
+    node?.properties?.label
+  ]);
+  return null;
+};
+
+// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
+import React6 from "react";
+import { useIntentDispatcher as useIntentDispatcher4, useResolvePlugin as useResolvePlugin2 } from "@dxos/app-framework";
+import { ClientAction } from "@dxos/plugin-client/meta";
+import { parseObservabilityPlugin } from "@dxos/plugin-observability";
+import { useIdentity } from "@dxos/react-client/halo";
+
+// packages/plugins/plugin-navtree/src/components/HaloButton.tsx
+import React5 from "react";
+import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
+import { Avatar } from "@dxos/react-ui";
+import { focusRing, mx as mx3 } from "@dxos/react-ui-theme";
+import { hexToFallback } from "@dxos/util";
+var INTERNAL = "https://avatars.githubusercontent.com/u/57182821";
+var HaloButton = (props) => {
+  const { onClick, identityKey, internal, size = 8 } = props;
+  const fallbackValue = hexToFallback(identityKey ?? "0");
+  const { swarm: connectionState } = useNetworkStatus();
+  return /* @__PURE__ */ React5.createElement("button", {
+    className: mx3(focusRing, "rounded grid place-items-center"),
+    onClick
+  }, /* @__PURE__ */ React5.createElement(Avatar.Root, {
+    size,
+    variant: "circle",
+    status: connectionState === ConnectionState.OFFLINE ? "error" : internal ? "internal" : "active",
+    hue: props.hue || fallbackValue.hue
+  }, /* @__PURE__ */ React5.createElement(Avatar.Frame, {
+    "data-testid": "treeView.haloButton",
+    "data-joyride": "welcome/halo"
+  }, internal ? /* @__PURE__ */ React5.createElement(Avatar.Image, {
+    href: INTERNAL
+  }) : /* @__PURE__ */ React5.createElement(Avatar.Fallback, {
+    text: props.emoji || fallbackValue.emoji
+  }))));
+};
+
+// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
+var NotchStart = () => {
+  const identity = useIdentity();
+  const observabilityPlugin = useResolvePlugin2(parseObservabilityPlugin);
+  const dispatch = useIntentDispatcher4();
+  return /* @__PURE__ */ React6.createElement(HaloButton, {
+    size: 8,
+    identityKey: identity?.identityKey.toHex(),
+    hue: identity?.profile?.data?.hue,
+    emoji: identity?.profile?.data?.emoji,
+    internal: observabilityPlugin?.provides?.observability?.group === "dxos",
+    onClick: () => dispatch({
+      action: ClientAction.SHARE_IDENTITY
+    })
+  });
+};
+
+// packages/plugins/plugin-navtree/src/components/CommandsTrigger.tsx
+import { MagnifyingGlass } from "@phosphor-icons/react";
+import React7 from "react";
+import { LayoutAction as LayoutAction3, useIntent } from "@dxos/app-framework";
+import { Button as Button3, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { getSize as getSize3 } from "@dxos/react-ui-theme";
+var CommandsTrigger = () => {
+  const { dispatch } = useIntent();
+  const { t } = useTranslation5(NAVTREE_PLUGIN);
+  return /* @__PURE__ */ React7.createElement(Button3, {
+    classNames: "pis-3 pie-2 gap-2 mli-1 mbs-1 min-bs-0 bs-[--rail-action] justify-start",
+    onClick: () => dispatch({
+      action: LayoutAction3.SET_LAYOUT,
+      data: {
+        element: "dialog",
+        component: `${NAVTREE_PLUGIN}/Commands`,
+        dialogBlockAlign: "start"
+      }
+    })
+  }, /* @__PURE__ */ React7.createElement("span", {
+    className: "fg-description text-base font-normal grow text-start"
+  }, t("command list input placeholder")), /* @__PURE__ */ React7.createElement(MagnifyingGlass, {
+    className: getSize3(5)
+  }));
+};
+
+// packages/plugins/plugin-navtree/src/translations.ts
+import { translations as navtreeTranslations } from "@dxos/react-ui-navtree";
+var translations_default = [
+  {
+    "en-US": {
+      [NAVTREE_PLUGIN]: {
+        "open settings label": "Settings",
+        "open commands label": "Search commands",
+        "commands dialog title": "Commands",
+        "command list input placeholder": "Search for commands\u2026",
+        "node actions menu invoker label": "More options",
+        "warning title": "WARNING",
+        "technology preview message": "Composer is still in technology preview.",
+        "learn more label": "Learn more",
+        "released message": "This version released {{released}}.",
+        "see release label": "See release on GitHub",
+        "powered by dxos message": "Powered by <dxos>DXOS</dxos>"
+      }
+    }
+  },
+  ...navtreeTranslations
+];
+
+// packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
+var NavTreePlugin = () => {
+  const state = new LocalStorageStore("dxos.org/settings/navtree", {
+    // TODO(thure): Do this dynamically.
+    openItemIds: {
+      root: true,
+      "dxos.org/plugin/space-spaces": true,
+      "dxos.org/plugin/files": true
+    }
+  });
+  let graphPlugin;
+  let graph;
+  const handleOpenItemIdsChange = (nextOpenItemIds) => {
+    state.values.openItemIds = nextOpenItemIds;
+    if (graph) {
+      void expandOpenGraphNodes(graph, nextOpenItemIds);
+    }
+  };
+  return {
+    meta: meta_default,
+    ready: async (plugins) => {
+      graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+      graph = graphPlugin?.provides.graph;
+      if (!graph) {
+        return;
+      }
+      state.values.root = graph.root;
+      getChildren(graph, state.values.root);
+      getActions(graph, state.values.root);
+      state.prop({
+        key: "openItemIds",
+        storageKey: "openItemIds",
+        type: LocalStorageStore.json()
+      });
+      void expandOpenGraphNodes(graph, state.values.openItemIds);
+      graph.subscribeTraverse({
+        visitor: (node, path) => {
+          let shortcut;
+          if (typeof node.properties.keyBinding === "object") {
+            const availablePlatforms = Object.keys(node.properties.keyBinding);
+            const platform = getHostPlatform2();
+            shortcut = availablePlatforms.includes(platform) ? node.properties.keyBinding[platform] : platform === "ios" ? node.properties.keyBinding.macos : platform === "linux" || platform === "unknown" ? node.properties.keyBinding.windows : void 0;
+          } else {
+            shortcut = node.properties.keyBinding;
+          }
+          if (shortcut && isAction4(node)) {
+            Keyboard2.singleton.getContext(path.slice(0, -1).join("/")).bind({
+              shortcut,
+              handler: () => {
+                void node.data({
+                  node,
+                  caller: KEY_BINDING
+                });
+              },
+              data: node.properties.label
+            });
+          }
+        }
+      });
+      Keyboard2.singleton.initialize();
+      Keyboard2.singleton.setCurrentContext(graphPlugin?.provides.graph.root.id);
+    },
+    unload: async () => {
+      Keyboard2.singleton.destroy();
+    },
+    provides: {
+      metadata: {
+        records: {
+          [NODE_TYPE]: {
+            parse: (item, type) => {
+              switch (type) {
+                case "node":
+                  return item.node;
+                case "object":
+                  return item.node.data;
+                case "view-object":
+                  return {
+                    id: `${item.id}-view`,
+                    object: item.node.data
+                  };
+              }
+            }
+          }
+        }
+      },
+      surface: {
+        component: ({ data, role }) => {
+          switch (data.component) {
+            case `${NAVTREE_PLUGIN}/Commands`: {
+              const selected = typeof data.subject === "string" ? data.subject : void 0;
+              return /* @__PURE__ */ React8.createElement(CommandsDialogContent, {
+                selected
+              });
+            }
+          }
+          switch (role) {
+            case "navigation":
+              if (state.values.root && state.values.openItemIds) {
+                return /* @__PURE__ */ React8.createElement(NavTreeContainer, {
+                  root: state.values.root,
+                  activeIds: data.activeIds,
+                  openItemIds: state.values.openItemIds,
+                  onOpenItemIdsChange: handleOpenItemIdsChange,
+                  attended: data.attended,
+                  popoverAnchorId: data.popoverAnchorId
+                });
+              }
+              break;
+            case "document-title": {
+              return /* @__PURE__ */ React8.createElement(NavTreeDocumentTitle, {
+                node: isGraphNode(data.activeNode) ? data.activeNode : void 0
+              });
+            }
+            case "navbar-start": {
+              if (state.values.root && data.activeNode) {
+                return {
+                  node: /* @__PURE__ */ React8.createElement(NavBarStart, {
+                    activeNode: data.activeNode,
+                    popoverAnchorId: data.popoverAnchorId
+                  }),
+                  disposition: "hoist"
+                };
+              }
+              break;
+            }
+            case "notch-start":
+              return /* @__PURE__ */ React8.createElement(NotchStart, null);
+            case "search-input":
+              return {
+                node: /* @__PURE__ */ React8.createElement(CommandsTrigger, null),
+                disposition: "fallback"
+              };
+          }
+          return null;
+        }
+      },
+      intent: {
+        resolver: (intent) => {
+          switch (intent.action) {
+            case NavigationAction2.EXPOSE: {
+              if (graph && intent.data?.id) {
+                const path = graph.getPath({
+                  target: intent.data.id
+                });
+                if (Array.isArray(path)) {
+                  const additionalOpenItems = [
+                    ...Array(path.length - 1)
+                  ].reduce((acc, _, index) => {
+                    const itemId = Path3.create(...path.slice(1, index + 1));
+                    if (itemId.length > 0) {
+                      acc[itemId] = true;
+                    }
+                    return acc;
+                  }, {});
+                  state.values.openItemIds = {
+                    ...additionalOpenItems,
+                    ...state.values.openItemIds
+                  };
+                }
+              }
+              break;
+            }
+          }
+        }
+      },
+      graph: {
+        builder: (plugins) => {
+          const intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
+          return [
+            createExtension({
+              id: NAVTREE_PLUGIN,
+              filter: (node) => node.id === "root",
+              actions: () => [
+                {
+                  id: "dxos.org/plugin/navtree/open-commands",
+                  data: async () => {
+                    await intentPlugin?.provides.intent.dispatch({
+                      action: LayoutAction4.SET_LAYOUT,
+                      data: {
+                        element: "dialog",
+                        component: `${NAVTREE_PLUGIN}/Commands`,
+                        dialogBlockAlign: "start"
+                      }
+                    });
+                  },
+                  properties: {
+                    label: [
+                      "open commands label",
+                      {
+                        ns: NAVTREE_PLUGIN
+                      }
+                    ],
+                    icon: (props) => /* @__PURE__ */ React8.createElement(MagnifyingGlass2, props),
+                    iconSymbol: "ph--magnifying-glass--regular",
+                    keyBinding: {
+                      macos: "meta+k",
+                      windows: "ctrl+k"
+                    }
+                  }
+                }
+              ]
+            })
+          ];
+        }
+      },
+      translations: translations_default
+    }
+  };
+};
+
+// packages/plugins/plugin-navtree/src/index.ts
+var src_default = NavTreePlugin;
+export {
+  NavTreePlugin,
+  src_default as default,
+  expandActions,
+  expandChildren,
+  expandChildrenAndActions,
+  expandOpenGraphNodes,
+  getActions,
+  getChildren,
+  getParent,
+  getPersistenceParent,
+  getTreeItemNode,
+  resolveMigrationOperation,
+  sortActions,
+  treeItemsFromRootNode
+};
+//# sourceMappingURL=index.mjs.map