@dxos/plugin-navtree 0.7.4 → 0.7.5-labs.071a3e2

package/dist/lib/browser/chunk-54MPRXMH.mjs

@@ -0,0 +1,1109 @@
+import {
+  NavTreeCapabilities
+} from "./chunk-AOAGODQB.mjs";
+import {
+  COMMANDS_DIALOG,
+  KEY_BINDING,
+  NAVTREE_PLUGIN
+} from "./chunk-KOXMEAOS.mjs";
+
+// packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
+import React, { useMemo, useState } from "react";
+import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
+import { isActionGroup, isAction } from "@dxos/app-graph";
+import { Keyboard, keySymbols } from "@dxos/keyboard";
+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 }) => {
+  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 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()];
+    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.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, {
+      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"
+  }))));
+};
+
+// packages/plugins/plugin-navtree/src/components/CommandsTrigger.tsx
+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 = () => {
+  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)
+  }));
+};
+
+// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
+import React4 from "react";
+import { createIntent as createIntent3, useCapabilities, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import { ClientAction } from "@dxos/plugin-client/types";
+import { ObservabilityCapabilities } from "@dxos/plugin-observability";
+import { useIdentity } from "@dxos/react-client/halo";
+
+// packages/plugins/plugin-navtree/src/components/HaloButton.tsx
+import React3 from "react";
+import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
+import { Avatar } from "@dxos/react-ui";
+import { focusRing, mx as mx2 } 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__ */ React3.createElement("button", {
+    className: mx2(focusRing, "rounded grid place-items-center"),
+    onClick
+  }, /* @__PURE__ */ React3.createElement(Avatar.Root, {
+    size,
+    variant: "circle",
+    status: connectionState === ConnectionState.OFFLINE ? "error" : internal ? "internal" : "active",
+    hue: props.hue || fallbackValue.hue
+  }, /* @__PURE__ */ React3.createElement(Avatar.Frame, {
+    "data-testid": "treeView.haloButton",
+    "data-joyride": "welcome/halo"
+  }, internal ? /* @__PURE__ */ React3.createElement(Avatar.Image, {
+    href: INTERNAL
+  }) : /* @__PURE__ */ React3.createElement(Avatar.Fallback, {
+    text: props.emoji || fallbackValue.emoji
+  }))));
+};
+
+// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
+var NotchStart = () => {
+  const identity = useIdentity();
+  const [observability] = useCapabilities(ObservabilityCapabilities.Observability);
+  const { dispatchPromise: dispatch } = useIntentDispatcher3();
+  return /* @__PURE__ */ React4.createElement(HaloButton, {
+    size: 12,
+    identityKey: identity?.identityKey.toHex(),
+    hue: identity?.profile?.data?.hue,
+    emoji: identity?.profile?.data?.emoji,
+    internal: observability?.group === "dxos",
+    onClick: () => dispatch(createIntent3(ClientAction.ShareIdentity))
+  });
+};
+
+// packages/plugins/plugin-navtree/src/util.ts
+import { ACTION_TYPE, ACTION_GROUP_TYPE, isAction as isAction2, isActionLike } from "@dxos/app-graph";
+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) && 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 === "toolbar") {
+    return -1;
+  }
+  return 1;
+});
+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) => {
+    if (arg.properties.disposition === "item") {
+      return acc;
+    }
+    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)
+  ]);
+};
+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";
+  }
+};
+var renderableCharRegex = /^(?![\p{Control}\p{Mark}\p{Separator}\p{Surrogate}\p{Unassigned}])[\p{L}\p{N}\p{P}\p{S}\p{Emoji}]$/u;
+var getFirstTwoRenderableChars = (label) => {
+  const characters = Array.from(label);
+  const result = [
+    "",
+    ""
+  ];
+  let foundFirst = false;
+  for (let i = 0; i < characters.length; i++) {
+    const char = characters[i];
+    if (renderableCharRegex.test(char)) {
+      if (!foundFirst) {
+        result[0] = char;
+        foundFirst = true;
+      } else {
+        const textBetween = characters.slice(result[0].length, i).join("");
+        if (/[^\p{L}\p{N}_]/u.test(textBetween)) {
+          result[1] = char;
+          break;
+        }
+      }
+    }
+  }
+  return result;
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
+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 React10, { memo as memo2, useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo5 } from "react";
+import { createIntent as createIntent5, LayoutAction as LayoutAction4, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher5, useLayout as useLayout2 } from "@dxos/app-framework";
+import { isAction as isAction4, isActionLike as isActionLike2 } from "@dxos/app-graph";
+import { isEchoObject, isSpace } from "@dxos/react-client/echo";
+import { useMediaQuery as useMediaQuery2 } from "@dxos/react-ui";
+import { isTreeData } from "@dxos/react-ui-list";
+import { mx as mx5 } from "@dxos/react-ui-theme";
+import { arrayMove } from "@dxos/util";
+
+// packages/plugins/plugin-navtree/src/components/NavTree.tsx
+import React9, { useMemo as useMemo4 } from "react";
+import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
+import { byPosition } from "@dxos/util";
+
+// packages/plugins/plugin-navtree/src/components/L0Menu.tsx
+import React5, { useCallback, useMemo as useMemo2 } from "react";
+import { createIntent as createIntent4, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
+import { Icon as Icon2, toLocalizedString as toLocalizedString2, Tooltip, useMediaQuery, useSidebars, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { Tabs } from "@dxos/react-ui-tabs";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+
+// 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("NavTreeContext not found"));
+
+// packages/plugins/plugin-navtree/src/hooks.ts
+import { useEffect } from "react";
+var useLoadDescendents = (root) => {
+  const { loadDescendents } = useNavTreeContext();
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (root) {
+        void loadDescendents?.(root);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    root
+  ]);
+};
+
+// packages/plugins/plugin-navtree/src/components/L0Menu.tsx
+var useL0ItemClick = ({ item, parent, path }, type) => {
+  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
+  const { dispatchPromise: dispatch } = useIntentDispatcher4();
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+  const [isLg] = useMediaQuery("lg", {
+    ssr: false
+  });
+  return useCallback((event) => {
+    switch (type) {
+      case "tab":
+        void dispatch(createIntent4(LayoutAction3.UpdateSidebar, {
+          part: "sidebar",
+          options: {
+            state: item.id === tab ? navigationSidebarState === "expanded" ? isLg ? "collapsed" : "closed" : "expanded" : "expanded"
+          }
+        }));
+        return onTabChange?.(item);
+      case "link":
+        return onSelect?.({
+          item,
+          path,
+          current: !isCurrent(path, item),
+          option: event.altKey
+        });
+      case "action": {
+        const { data: invoke, properties: { caller } } = item;
+        return invoke?.(caller ? {
+          node: parent,
+          caller
+        } : {
+          node: parent
+        });
+      }
+    }
+  }, [
+    item,
+    type,
+    onSelect,
+    isCurrent,
+    parent,
+    tab,
+    navigationSidebarState,
+    isLg,
+    dispatch
+  ]);
+};
+var l0Breakpoints = {
+  lg: "hidden lg:grid"
+};
+var L0Item = ({ item, parent, path, pinned }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const type = l0ItemType(item);
+  const itemPath = useMemo2(() => [
+    ...path,
+    item.id
+  ], [
+    item.id,
+    path
+  ]);
+  const { getProps } = useNavTreeContext();
+  const { id, testId } = getProps?.(item, path) ?? {};
+  const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
+  const handleClick = useL0ItemClick({
+    item,
+    path: itemPath,
+    parent
+  }, 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 localizedString = toLocalizedString2(item.properties.label, t);
+  const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("") : [], [
+    type,
+    item.properties.label,
+    t
+  ]);
+  return /* @__PURE__ */ React5.createElement(Tooltip.Root, {
+    delayDuration: 0
+  }, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React5.createElement(Root, {
+    ...rootProps,
+    "data-type": type,
+    className: mx3('group/l0i dx-focus-ring-group grid overflow-hidden relative data[type!="collection"]:cursor-pointer app-no-drag', l0Breakpoints[item.properties.l0Breakpoint])
+  }, type !== "collection" && /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: mx3("absolute -z-[1] group-hover/l0i:bg-input dx-focus-ring-group-indicator transition-colors", type === "tab" || pinned ? "rounded" : "rounded-full", pinned ? "bg-transparent inset-inline-3 inset-block-0" : "bg-input inset-inline-3 inset-block-2")
+  }), /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
+  }), type === "tab" && item.properties.disposition !== "pin-end" ? /* @__PURE__ */ React5.createElement("span", {
+    role: "img",
+    className: "place-self-center text-3xl font-light"
+  }, avatarValue) : item.properties.icon && /* @__PURE__ */ React5.createElement(Icon2, {
+    icon: item.properties.icon,
+    size: pinned ? 5 : 7,
+    classNames: "place-self-center"
+  }), /* @__PURE__ */ React5.createElement("span", {
+    id: `${item.id}__label`,
+    className: "sr-only"
+  }, localizedString))), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, {
+    side: "right"
+  }, localizedString, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
+};
+var L0Collection = ({ item, path, parent }) => {
+  const navTreeContext = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = navTreeContext.getItems(item);
+  const groupPath = useMemo2(() => [
+    ...path,
+    item.id
+  ], [
+    item.id,
+    path
+  ]);
+  const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+  return /* @__PURE__ */ React5.createElement("div", {
+    role: "group",
+    className: "contents group/l0c",
+    "aria-labelledby": `${item.id}__label`,
+    "data-itemid": id,
+    "data-testid": testId
+  }, collectionItems.map((collectionItem) => /* @__PURE__ */ React5.createElement(L0Item, {
+    key: collectionItem.id,
+    item: collectionItem,
+    parent: item,
+    path: groupPath
+  })));
+};
+var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
+  return /* @__PURE__ */ React5.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-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag"
+  }, /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: 'grid auto-rows-[calc(var(--l0-size)-.5rem)] min-bs-0 !overflow-y-auto plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]'
+  }, topLevelItems.map((item) => {
+    if (l0ItemType(item) === "collection") {
+      return /* @__PURE__ */ React5.createElement(L0Collection, {
+        key: item.id,
+        item,
+        parent,
+        path
+      });
+    } else {
+      return /* @__PURE__ */ React5.createElement(L0Item, {
+        key: item.id,
+        item,
+        parent,
+        path
+      });
+    }
+  })), /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "grid grid-cols-1 auto-rows-[--rail-action] pbs-2"
+  }, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React5.createElement(L0Item, {
+    key: item.id,
+    item,
+    parent,
+    path,
+    pinned: true
+  }))), /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "grid p-2 app-no-drag"
+  }, /* @__PURE__ */ React5.createElement(NotchStart, null)), /* @__PURE__ */ React5.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-baseSurface) 0%, var(--dx-baseSurface) 70%, transparent 100%)"
+    }
+  }));
+};
+
+// packages/plugins/plugin-navtree/src/components/L1Panels.tsx
+import React8, { useMemo as useMemo3 } from "react";
+import { useLayout } from "@dxos/app-framework";
+import { toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Tree } from "@dxos/react-ui-list";
+import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
+
+// packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
+import React7, { Fragment, memo } from "react";
+import { isAction as isAction3 } from "@dxos/app-graph";
+import { Popover, toLocalizedString as toLocalizedString4, Treegrid, useTranslation as useTranslation5 } from "@dxos/react-ui";
+
+// packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
+import React6, { useRef } from "react";
+import { useTranslation as useTranslation4, toLocalizedString as toLocalizedString3, IconButton } from "@dxos/react-ui";
+import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
+import { hoverableControlItem, hoverableOpenControlItem, mx as mx4 } from "@dxos/react-ui-theme";
+var fallbackIcon = "ph--placeholder--regular";
+var actionButtonProps = {
+  size: 4,
+  density: "fine"
+};
+var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
+  const { t } = useTranslation4(NAVTREE_PLUGIN);
+  const suppressNextTooltip = useRef(false);
+  return /* @__PURE__ */ React6.createElement(MenuProvider, {
+    onAction
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+    items: menuActions,
+    suppressNextTooltip
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(IconButton, {
+    ...actionButtonProps,
+    classNames: mx4("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
+    variant: "ghost",
+    icon: icon ?? fallbackIcon,
+    iconOnly: true,
+    label: toLocalizedString3(label, t),
+    "data-testid": testId,
+    suppressNextTooltip
+  }))));
+};
+var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
+  label: "never"
+}, data: invoke, baseLabel }) => {
+  return /* @__PURE__ */ React6.createElement(IconButton, {
+    ...actionButtonProps,
+    variant,
+    classNames: mx4("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 ? {
+        node: parent,
+        caller
+      } : {
+        node: parent
+      });
+    },
+    "data-testid": testId
+  });
+};
+var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
+  const { t } = useTranslation4(NAVTREE_PLUGIN);
+  const monolithicAction = menuActions?.length === 1 && menuActions[0];
+  const baseLabel = toLocalizedString3(monolithicAction ? monolithicAction.properties.label : props.label, t);
+  return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React6.createElement(NavTreeItemMonolithicAction, {
+    baseLabel,
+    parent: node,
+    ...menuActions[0]
+  }) : /* @__PURE__ */ React6.createElement(NavTreeItemActionDropdownMenu, {
+    ...props,
+    label: baseLabel,
+    parent: node,
+    menuActions,
+    onAction: (action) => action.data?.(props.caller ? {
+      node,
+      caller: props.caller
+    } : {
+      node
+    })
+  });
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
+var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
+  const { t } = useTranslation5(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 === "toolbar" ? -1 : 1);
+  const actions = (primaryAction?.properties?.disposition === "toolbar" ? 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__ */ React7.createElement("div", {
+    role: "none",
+    className: "contents app-no-drag"
+  }, primaryAction?.properties?.disposition === "toolbar" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React7.createElement(NavTreeItemAction, {
+    testId: primaryAction.properties?.testId,
+    label: toLocalizedString4(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__ */ React7.createElement(Treegrid.Cell, null), /* @__PURE__ */ React7.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React7.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__ */ React7.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React7.createElement(ItemEnd, {
+    node: item,
+    open
+  }));
+});
+
+// packages/plugins/plugin-navtree/src/components/L1Panels.tsx
+var L1Panel = ({ item, path, currentItemId }) => {
+  const layout = useLayout();
+  const navTreeContext = useNavTreeContext();
+  const { t } = useTranslation6(NAVTREE_PLUGIN);
+  return /* @__PURE__ */ React8.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]",
+      item.id === currentItemId && "grid"
+    ],
+    tabIndex: -1,
+    ...!layout.sidebarOpen && {
+      inert: "true"
+    }
+  }, item.id === currentItemId && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h2", {
+    className: "flex items-center border-be border-separator pis-4 app-drag"
+  }, /* @__PURE__ */ React8.createElement("span", {
+    className: "flex-1 truncate cursor-default"
+  }, toLocalizedString5(item.properties.label, t)), /* @__PURE__ */ React8.createElement(NavTreeItemColumns, {
+    path,
+    item,
+    open: true
+  })), /* @__PURE__ */ React8.createElement("div", {
+    role: "none",
+    className: "overflow-y-auto"
+  }, /* @__PURE__ */ React8.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
+  }))));
+};
+var L1PanelCollection = ({ item, path, currentItemId }) => {
+  const { getItems } = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = getItems(item);
+  const groupPath = useMemo3(() => [
+    ...path,
+    item.id
+  ], [
+    item.id,
+    path
+  ]);
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React8.createElement(L1Panel, {
+    key: item2.id,
+    item: item2,
+    path: groupPath,
+    currentItemId
+  })));
+};
+var L1Panels = ({ topLevelItems, path, currentItemId }) => {
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, topLevelItems.map((item) => {
+    const type = l0ItemType(item);
+    switch (type) {
+      case "collection":
+        return /* @__PURE__ */ React8.createElement(L1PanelCollection, {
+          key: item.id,
+          item,
+          path,
+          currentItemId
+        });
+      case "tab":
+        return /* @__PURE__ */ React8.createElement(L1Panel, {
+          key: item.id,
+          item,
+          path,
+          currentItemId
+        });
+      default:
+        return null;
+    }
+  }));
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTree.tsx
+var NAV_TREE_ITEM = "NavTreeItem";
+var NavTree = ({ id, root }) => {
+  const { getItems, tab } = useNavTreeContext();
+  const topLevelActions = getItems(root, "item");
+  const topLevelCollections = getItems(root, "collection");
+  const topLevelWorkspaces = getItems(root, "workspace");
+  const topLevelNavigation = getItems(root, "navigation");
+  const l0Items = useMemo4(() => [
+    ...topLevelActions,
+    ...topLevelCollections,
+    ...topLevelWorkspaces,
+    ...topLevelNavigation
+  ], [
+    topLevelActions,
+    topLevelCollections,
+    topLevelWorkspaces,
+    topLevelNavigation
+  ]);
+  const pinnedItems = getItems(root, "pin-end").toSorted((a, b) => byPosition(a.properties, b.properties));
+  const topLevelItems = useMemo4(() => [
+    ...l0Items,
+    ...pinnedItems
+  ], [
+    l0Items,
+    pinnedItems
+  ]);
+  useLoadDescendents(root);
+  const path = useMemo4(() => [
+    id
+  ], [
+    id
+  ]);
+  return (
+    // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
+    /* @__PURE__ */ React9.createElement(Tabs3.Root, {
+      value: tab,
+      orientation: "vertical",
+      verticalVariant: "stateless",
+      classNames: "relative"
+    }, /* @__PURE__ */ React9.createElement(L0Menu, {
+      topLevelItems: l0Items,
+      pinnedItems,
+      path,
+      parent: root
+    }), /* @__PURE__ */ React9.createElement(L1Panels, {
+      topLevelItems,
+      path,
+      currentItemId: tab
+    }))
+  );
+};
+
+// packages/plugins/plugin-navtree/src/capabilities/index.ts
+import { lazy } from "@dxos/app-framework";
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-BL7LRXCM.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-U25VBFH3.mjs"));
+var Keyboard2 = lazy(() => import("./keyboard-MUBRTPI5.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-LNRTNSM6.mjs"));
+var State = lazy(() => import("./state-65TQKYX7.mjs"));
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
+var NODE_TYPE = "dxos/app-graph/node";
+var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React10.createElement(Surface, {
+  role: "navtree-item-end",
+  data: {
+    id: node.id,
+    subject: node.data,
+    open
+  },
+  limit: 1
+});
+var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
+  const [isLg] = useMediaQuery2("lg", {
+    ssr: false
+  });
+  const { dispatchPromise: dispatch } = useIntentDispatcher5();
+  const { graph } = useAppGraph2();
+  const layout = useLayout2();
+  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
+  const getActions2 = useCallback2((node) => getActions(graph, node), [
+    graph
+  ]);
+  const getItems = useCallback2((node, disposition) => {
+    return graph.nodes(node ?? graph.root, {
+      filter: (node2) => {
+        return untracked(() => {
+          const action = isActionLike2(node2);
+          if (!disposition) {
+            return !action || node2.properties.disposition === "item";
+          }
+          return node2.properties.disposition === disposition;
+        });
+      }
+    });
+  }, [
+    graph
+  ]);
+  const getProps = useCallback2((node, path) => {
+    const children = getChildren(graph, node, void 0, path);
+    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 = useCallback2((node) => {
+    void expandActions(graph, node);
+    if (!isActionLike2(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 onOpenChange = useCallback2(({ item: { id }, path, open }) => {
+    setItem(path, "open", open);
+    if (graph) {
+      const node = graph.findNode(id);
+      return node && expandChildrenAndActions(graph, node);
+    }
+  }, [
+    graph
+  ]);
+  const onTabChange = useCallback2(async (node) => {
+    await dispatch(createIntent5(LayoutAction4.SwitchWorkspace, {
+      part: "workspace",
+      subject: node.id
+    }));
+    if (layout.active.length === 0) {
+      const [item] = getItems(node).filter((node2) => !isActionLike2(node2));
+      if (item) {
+        await dispatch(createIntent5(LayoutAction4.Open, {
+          part: "main",
+          subject: [
+            item.id
+          ]
+        }));
+      }
+    }
+  }, [
+    dispatch,
+    layout
+  ]);
+  const canDrop = useCallback2((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 = useCallback2(({ item: node, path, option }) => {
+    if (!node.data) {
+      return;
+    }
+    if (isAction4(node)) {
+      const [parent] = graph.nodes(node, {
+        relation: "inbound"
+      });
+      void (parent && node.data({
+        node: parent,
+        caller: NAV_TREE_ITEM
+      }));
+      return;
+    }
+    const current = isCurrent(path, node);
+    if (!current) {
+      void dispatch(createIntent5(LayoutAction4.Open, {
+        part: "main",
+        subject: [
+          node.id
+        ],
+        options: {
+          key: node.properties.key
+        }
+      }));
+    } else if (option) {
+      void dispatch(createIntent5(LayoutAction4.Close, {
+        part: "main",
+        subject: [
+          node.id
+        ],
+        options: {
+          state: false
+        }
+      }));
+    } else {
+      void dispatch(createIntent5(LayoutAction4.ScrollIntoView, {
+        part: "current",
+        subject: node.id
+      }));
+    }
+    const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === "default");
+    if (isAction4(defaultAction)) {
+      void defaultAction.data();
+    }
+    if (!isLg) {
+      void dispatch(createIntent5(LayoutAction4.UpdateSidebar, {
+        part: "sidebar",
+        options: {
+          state: "closed"
+        }
+      }));
+    }
+  }, [
+    graph,
+    dispatch,
+    isCurrent,
+    isLg
+  ]);
+  useEffect2(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isTreeData(source.data),
+      onDrop: ({ location, source }) => {
+        if (!location.current.dropTargets.length) {
+          return;
+        }
+        const target = location.current.dropTargets[0];
+        const instruction = extractInstruction(target.data);
+        if (instruction !== null && instruction.type !== "instruction-blocked") {
+          const sourceNode = source.data.item;
+          const targetNode = target.data.item;
+          const sourcePath = source.data.path;
+          const targetPath = target.data.path;
+          const 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(sourceParent);
+          const targetItems = getItems(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);
+              arrayMove(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 navTreeContextValue = useMemo5(() => ({
+    tab,
+    onTabChange,
+    getActions: getActions2,
+    loadDescendents,
+    renderItemEnd,
+    popoverAnchorId,
+    topbar,
+    getItems,
+    getProps,
+    isCurrent,
+    isOpen,
+    onOpenChange,
+    canDrop,
+    onSelect: handleSelect
+  }), [
+    tab,
+    onTabChange,
+    getActions2,
+    loadDescendents,
+    renderItemEnd,
+    popoverAnchorId,
+    topbar,
+    getItems,
+    getProps,
+    isCurrent,
+    isOpen,
+    onOpenChange,
+    canDrop,
+    handleSelect
+  ]);
+  return /* @__PURE__ */ React10.createElement(NavTreeContext.Provider, {
+    value: navTreeContextValue
+  }, /* @__PURE__ */ React10.createElement(NavTree, {
+    root: graph.root,
+    id: graph.root.id
+  }));
+});
+
+// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
+import { useEffect as useEffect3 } from "react";
+import { toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+var NavTreeDocumentTitle = ({ node }) => {
+  const { t } = useTranslation7(NAVTREE_PLUGIN);
+  useEffect3(() => {
+    document.title = node ? toLocalizedString6(node.properties.label, t) : t("current app name", {
+      ns: "appkit"
+    });
+  }, [
+    node?.properties?.label
+  ]);
+  return null;
+};
+
+export {
+  CommandsDialogContent,
+  CommandsTrigger,
+  NotchStart,
+  getParent,
+  getPersistenceParent,
+  resolveMigrationOperation,
+  sortActions,
+  getChildren,
+  getActions,
+  expandChildrenAndActions,
+  expandChildren,
+  expandActions,
+  l0ItemType,
+  getFirstTwoRenderableChars,
+  NODE_TYPE,
+  NavTreeContainer,
+  NavTreeDocumentTitle,
+  AppGraphBuilder,
+  IntentResolver,
+  Keyboard2 as Keyboard,
+  ReactSurface,
+  State
+};
+//# sourceMappingURL=chunk-54MPRXMH.mjs.map