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

package/dist/lib/browser/index.mjs

@@ -1,954 +1,41 @@
 import {
+  AppGraphBuilder,
+  IntentResolver,
+  Keyboard,
+  NODE_TYPE,
+  ReactSurface,
+  State,
+  expandActions,
+  expandChildren,
+  expandChildrenAndActions,
+  getActions,
+  getChildren,
+  getFirstTwoRenderableChars,
+  getParent,
+  getPersistenceParent,
+  l0ItemType,
+  resolveMigrationOperation,
+  sortActions
+} from "./chunk-54MPRXMH.mjs";
+import {
+  NavTreeCapabilities
+} from "./chunk-AOAGODQB.mjs";
+import {
+  COMMANDS_DIALOG,
   KEY_BINDING,
   NAVTREE_PLUGIN,
-  meta_default
-} from "./chunk-PSVCPL4T.mjs";
+  meta
+} from "./chunk-KOXMEAOS.mjs";
 
-// packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
-import { effect } from "@preact/signals-core";
-import React9 from "react";
-import { LayoutAction as LayoutAction4, NavigationAction as NavigationAction2, parseGraphPlugin, parseIntentPlugin, parseLayoutPlugin, parseNavigationPlugin as parseNavigationPlugin2, resolvePlugin } from "@dxos/app-framework";
-import { createExtension, isAction as isAction5, isGraphNode } from "@dxos/app-graph";
-import { Keyboard as Keyboard2 } from "@dxos/keyboard";
-import { create } from "@dxos/live-object";
-import { Path } from "@dxos/react-ui-mosaic";
-import { getHostPlatform as getHostPlatform3 } from "@dxos/util";
+// packages/plugins/plugin-navtree/src/events.ts
+import { Events } from "@dxos/app-framework";
+var NavTreeEvents;
+(function(NavTreeEvents2) {
+  NavTreeEvents2.StateReady = Events.createStateEvent(NAVTREE_PLUGIN);
+})(NavTreeEvents || (NavTreeEvents = {}));
 
-// packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
-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, 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 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()];
-    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, {
-      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/NavTree.tsx
-import React3, { Fragment, useCallback, useEffect } from "react";
-import { isAction as isAction2 } from "@dxos/app-graph";
-import { Popover, toLocalizedString as toLocalizedString3, Treegrid, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { Tree } from "@dxos/react-ui-list";
-
-// packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React2, { useRef, useState as useState2 } from "react";
-import { keySymbols as keySymbols2 } from "@dxos/keyboard";
-import { Button as Button2, Dialog as Dialog2, DropdownMenu, ContextMenu, Tooltip, useTranslation as useTranslation2, toLocalizedString as toLocalizedString2, Icon as Icon2 } from "@dxos/react-ui";
-import { SearchList as SearchList2 } from "@dxos/react-ui-searchlist";
-import { descriptionText as descriptionText2, hoverableControlItem, hoverableOpenControlItem, mx as mx2 } from "@dxos/react-ui-theme";
-import { getHostPlatform as getHostPlatform2 } from "@dxos/util";
-var getShortcut = (action) => {
-  return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[getHostPlatform2()];
-};
-var fallbackIcon = "ph--placeholder--regular";
-var NavTreeItemActionDropdownMenu = ({ label, icon, testId, defaultMenuOpen, menuActions, menuOpen, suppressNextTooltip, onChangeMenuOpen, onAction }) => {
-  const { t } = useTranslation2(NAVTREE_PLUGIN);
-  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: menuOpen,
-    defaultProp: defaultMenuOpen,
-    onChange: onChangeMenuOpen
-  });
-  return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen && suppressNextTooltip) {
-        suppressNextTooltip.current = true;
-      }
-      return setOptionsMenuOpen(nextOpen);
-    }
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost",
-    density: "fine",
-    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
-    "data-testid": testId,
-    "aria-label": t("tree item actions label")
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, toLocalizedString2(label, t)), /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: icon ?? fallbackIcon,
-    size: 4
-  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
-    classNames: "z-[31]"
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, menuActions?.map((action) => {
-    const shortcut = getShortcut(action);
-    return /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-      key: action.id,
-      onClick: (event) => {
-        if (action.properties?.disabled) {
-          return;
-        }
-        event.stopPropagation();
-        if (suppressNextTooltip) {
-          suppressNextTooltip.current = true;
-        }
-        setOptionsMenuOpen(false);
-        onAction?.(action);
-      },
-      classNames: "gap-2",
-      disabled: action.properties?.disabled,
-      ...action.properties?.testId && {
-        "data-testid": action.properties.testId
-      }
-    }, action.properties?.icon && /* @__PURE__ */ React2.createElement(Icon2, {
-      icon: action.properties.icon,
-      size: 4
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "grow truncate"
-    }, toLocalizedString2(action.properties.label, t)), shortcut && /* @__PURE__ */ React2.createElement("span", {
-      className: mx2("shrink-0", descriptionText2)
-    }, keySymbols2(shortcut).join("")));
-  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
-};
-var NavTreeItemActionSearchList = ({ menuActions, icon, label, testId, suppressNextTooltip, onAction }) => {
-  const { t } = useTranslation2(NAVTREE_PLUGIN);
-  const [optionsMenuOpen, setOptionsMenuOpen] = useState2(false);
-  const button = useRef(null);
-  const sortedActions = menuActions?.sort(({ properties: p1 }, { properties: p2 }) => {
-    const t1 = toLocalizedString2(p1.label, t).toLowerCase();
-    const t2 = toLocalizedString2(p2.label, t).toLowerCase();
-    return t1.localeCompare(t2);
-  });
-  return /* @__PURE__ */ React2.createElement(Dialog2.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen && suppressNextTooltip) {
-        suppressNextTooltip.current = true;
-      }
-      return setOptionsMenuOpen(nextOpen);
-    }
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Dialog2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost",
-    density: "fine",
-    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
-    "data-testid": testId,
-    onKeyDownCapture: (event) => {
-      if (button.current && button.current === event.target) {
-        switch (event.key) {
-          case "Enter":
-          case " ":
-            event.stopPropagation();
-            setOptionsMenuOpen(true);
-            break;
-          default:
-        }
-      }
-    },
-    ref: button
-  }, /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: icon ?? fallbackIcon,
-    size: 4
-  })))), /* @__PURE__ */ React2.createElement(Dialog2.Portal, null, /* @__PURE__ */ React2.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React2.createElement(Dialog2.Content, {
-    classNames: "z-[31] is-full max-is-[24rem] pli-2 plb-1"
-  }, /* @__PURE__ */ React2.createElement(SearchList2.Root, {
-    label: t("tree item searchlist input placeholder")
-  }, /* @__PURE__ */ React2.createElement(SearchList2.Input, {
-    placeholder: t("tree item searchlist input placeholder"),
-    classNames: "pli-3"
-  }), /* @__PURE__ */ React2.createElement(SearchList2.Content, {
-    classNames: "min-bs-[12rem] bs-[50dvh] max-bs-[30rem] overflow-auto"
-  }, sortedActions?.map((action) => {
-    const label2 = toLocalizedString2(action.properties.label, t);
-    const shortcut = getShortcut(action);
-    return /* @__PURE__ */ React2.createElement(SearchList2.Item, {
-      // TODO(burdon): Value should be id since label is not unique.
-      value: label2,
-      key: action.id,
-      onSelect: () => {
-        if (action.properties?.disabled) {
-          return;
-        }
-        if (suppressNextTooltip) {
-          suppressNextTooltip.current = true;
-        }
-        setOptionsMenuOpen(false);
-        onAction?.(action);
-      },
-      classNames: "flex items-center gap-2 pli-2",
-      disabled: action.properties?.disabled,
-      ...action.properties?.testId && {
-        "data-testid": action.properties.testId
-      }
-    }, action.properties?.icon && /* @__PURE__ */ React2.createElement(Icon2, {
-      icon: action.properties?.icon,
-      size: 4
-    }), /* @__PURE__ */ React2.createElement("span", {
-      className: "grow truncate"
-    }, label2), shortcut && /* @__PURE__ */ React2.createElement("span", {
-      className: mx2("shrink-0", descriptionText2)
-    }, keySymbols2(shortcut).join("")));
-  })), /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: "flex items-center plb-2 pli-3"
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: descriptionText2
-  }, toLocalizedString2(label, t))))))));
-};
-var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, label, icon } = {
-  label: "never"
-}, data: invoke }) => {
-  const { t } = useTranslation2(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost",
-    density: "fine",
-    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
-    disabled,
-    onClick: (event) => {
-      if (disabled) {
-        return;
-      }
-      event.stopPropagation();
-      void invoke?.(caller ? {
-        node: parent,
-        caller
-      } : {
-        node: parent
-      });
-    },
-    "data-testid": testId
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, toLocalizedString2(label, t)), /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: icon ?? fallbackIcon,
-    size: 4
-  })));
-};
-var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
-  const { t } = useTranslation2(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
-  const monolithicAction = menuActions?.length === 1 && menuActions[0];
-  const baseLabel = toLocalizedString2(monolithicAction ? monolithicAction.properties.label : props.label, t);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
-    open: triggerTooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (suppressNextTooltip.current) {
-        setTriggerTooltipOpen(false);
-        suppressNextTooltip.current = false;
-      } else {
-        setTriggerTooltipOpen(nextOpen);
-      }
-    }
-  }, baseLabel && /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
-    classNames: "z-[31]",
-    side: "bottom"
-  }, baseLabel, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))), monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React2.createElement(NavTreeItemMonolithicAction, {
-    parent: node,
-    ...menuActions[0]
-  }) : props.menuType === "searchList" ? /* @__PURE__ */ React2.createElement(NavTreeItemActionSearchList, {
-    ...props,
-    menuActions,
-    suppressNextTooltip,
-    onAction: (action) => action.data?.(props.caller ? {
-      node,
-      caller: props.caller
-    } : {
-      node
-    })
-  }) : /* @__PURE__ */ React2.createElement(NavTreeItemActionDropdownMenu, {
-    ...props,
-    parent: node,
-    menuActions,
-    suppressNextTooltip,
-    onAction: (action) => action.data?.(props.caller ? {
-      node,
-      caller: props.caller
-    } : {
-      node
-    })
-  }));
-};
-
-// packages/plugins/plugin-navtree/src/components/NavTree.tsx
-var NAV_TREE_ITEM = "NavTreeItem";
-var NavTree = ({ getActions: getActions2, loadDescendents, renderItemEnd: renderItemEnd2, popoverAnchorId, ...props }) => {
-  const renderColumns = useCallback(({ item, path, menuOpen, setMenuOpen }) => {
-    return /* @__PURE__ */ React3.createElement(NavTreeColumns, {
-      path,
-      node: item,
-      getActions: getActions2,
-      menuOpen,
-      setMenuOpen,
-      loadDescendents,
-      renderItemEnd: renderItemEnd2,
-      popoverAnchorId
-    });
-  }, [
-    renderItemEnd2,
-    popoverAnchorId,
-    loadDescendents
-  ]);
-  return /* @__PURE__ */ React3.createElement(Tree, {
-    ...props,
-    draggable: true,
-    gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
-    renderColumns
-  });
-};
-var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOpen, loadDescendents, renderItemEnd: ItemEnd, popoverAnchorId }) => {
-  const { t } = useTranslation3(NAVTREE_PLUGIN);
-  const level = path.length - 2;
-  const { actions: _actions, groupedActions } = getActions2(node);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "toolbar" ? -1 : 1);
-  const actions = (primaryAction?.properties?.disposition === "toolbar" ? secondaryActions : _actions).flatMap((action) => isAction2(action) ? [
-    action
-  ] : []).filter((action) => !action.properties?.hidden);
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${node.id}` ? Popover.Anchor : Fragment;
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      void loadDescendents?.(node);
-      if (primaryAction && !isAction2(primaryAction)) {
-        void loadDescendents?.(primaryAction);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [
-    primaryAction
-  ]);
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, primaryAction?.properties?.disposition === "toolbar" ? /* @__PURE__ */ React3.createElement(NavTreeItemAction, {
-    testId: primaryAction.properties?.testId,
-    label: toLocalizedString3(primaryAction.properties?.label, t),
-    icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
-    parent: node,
-    monolithic: isAction2(primaryAction),
-    menuActions: isAction2(primaryAction) ? [
-      primaryAction
-    ] : groupedActions[primaryAction.id],
-    menuType: primaryAction.properties?.menuType,
-    caller: NAV_TREE_ITEM
-  }) : /* @__PURE__ */ React3.createElement(Treegrid.Cell, null), /* @__PURE__ */ React3.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React3.createElement(NavTreeItemAction, {
-    testId: `navtree.treeItem.actionsLevel${level}`,
-    label: t("tree item actions label"),
-    icon: "ph--dots-three-vertical--regular",
-    parent: node,
-    menuActions: actions,
-    menuType: "dropdown",
-    caller: NAV_TREE_ITEM,
-    menuOpen,
-    onChangeMenuOpen: setMenuOpen
-  }) : /* @__PURE__ */ React3.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React3.createElement(ItemEnd, {
-    node
-  }));
-};
-
-// 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 React5, { memo, useCallback as useCallback2, useEffect as useEffect2 } from "react";
-import { LayoutAction as LayoutAction2, NavigationAction, Surface, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
-import { isAction as isAction4, isActionLike } from "@dxos/app-graph";
-import { useGraph as useGraph2 } from "@dxos/plugin-graph";
-import { isEchoObject, isSpace } from "@dxos/react-client/echo";
-import { ElevationProvider, useMediaQuery, useSidebars as useSidebars2 } from "@dxos/react-ui";
-import { isTreeData } from "@dxos/react-ui-list";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-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 React4 from "react";
-import { SettingsAction, parseNavigationPlugin, useResolvePlugin, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
-import { useConfig } from "@dxos/react-client";
-import { Button as Button3, Link, Message, Popover as Popover2, Tooltip as Tooltip2, Trans, useDefaultValue, useSidebars, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { LayoutControls } from "@dxos/react-ui-stack";
-import { getSize, mx as mx3 } from "@dxos/react-ui-theme";
-var buttonStyles = "pli-1.5 text-xs font-normal";
-var repo = "https://github.com/dxos/dxos";
-var VERSION_REGEX = /([\d.]+)/;
-var NavTreeFooter = (props) => {
-  const layoutPart = useDefaultValue(props.layoutPart, () => "sidebar");
-  const config = useConfig();
-  const { t } = useTranslation4(NAVTREE_PLUGIN);
-  const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
-  const dispatch = useIntentDispatcher2();
-  const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
-  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
-  const [_, v] = version?.match(VERSION_REGEX) ?? [];
-  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__ */ React4.createElement("div", {
-    role: "none",
-    className: mx3("flex bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content justify-end", layoutPart === "complementary" && "md:justify-end flex-row-reverse")
-  }, /* @__PURE__ */ React4.createElement(Popover2.Root, null, /* @__PURE__ */ React4.createElement(Popover2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button3, {
-    variant: "ghost",
-    classNames: buttonStyles,
-    ...!navigationSidebarOpen && {
-      tabIndex: -1
-    }
-  }, "v", v)), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, {
-    side: "top",
-    role: "message",
-    classNames: "z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]"
-  }, /* @__PURE__ */ React4.createElement(Message.Root, {
-    valence: "warning",
-    className: "rounded-be-none p-5"
-  }, /* @__PURE__ */ React4.createElement(Message.Title, null, /* @__PURE__ */ React4.createElement(Warning, {
-    weight: "duotone",
-    className: "inline mie-2 is-6 bs-6"
-  }), /* @__PURE__ */ React4.createElement("span", null, t("warning title"))), /* @__PURE__ */ React4.createElement(Message.Body, null, t("technology preview message"), /* @__PURE__ */ React4.createElement("br", null), /* @__PURE__ */ React4.createElement(Link, {
-    href: previewUrl,
-    target: "_blank",
-    rel: "noreferrer",
-    variant: "neutral"
-  }, t("learn more label"), /* @__PURE__ */ React4.createElement(ArrowSquareOut, {
-    className: "inline mis-1",
-    weight: "bold"
-  })))), /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: "plb-4 pli-5 space-b-2 text-baseText"
-  }, timestamp && /* @__PURE__ */ React4.createElement("p", null, t("released message", {
-    released: formatDistance(new Date(timestamp), /* @__PURE__ */ new Date(), {
-      addSuffix: true
-    })
-  }), /* @__PURE__ */ React4.createElement("br", null), /* @__PURE__ */ React4.createElement(Link, {
-    href: releaseUrl,
-    target: "_blank",
-    rel: "noreferrer",
-    variant: "neutral"
-  }, t("see release label"), /* @__PURE__ */ React4.createElement(ArrowSquareOut, {
-    className: "inline mis-1",
-    weight: "bold"
-  }))), /* @__PURE__ */ React4.createElement("p", null, /* @__PURE__ */ React4.createElement(Trans, {
-    t,
-    i18nKey: "powered by dxos message",
-    components: {
-      dxos: /* @__PURE__ */ React4.createElement(Link, {
-        href: "https://dxos.org",
-        target: "_blank",
-        rel: "noreferrer",
-        variant: "neutral"
-      })
-    }
-  }))), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null)))), /* @__PURE__ */ React4.createElement(Tooltip2.Root, null, /* @__PURE__ */ React4.createElement(Tooltip2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button3, {
-    variant: "ghost",
-    classNames: buttonStyles,
-    "data-testid": "treeView.openSettings",
-    "data-joyride": "welcome/settings",
-    ...!navigationSidebarOpen && {
-      tabIndex: -1
-    },
-    onClick: () => dispatch({
-      action: SettingsAction.OPEN
-    })
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "sr-only"
-  }, t("open settings label")), /* @__PURE__ */ React4.createElement(GearSix, {
-    className: mx3(getSize(5), "rotate-90")
-  }))), /* @__PURE__ */ React4.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip2.Content, {
-    classNames: "z-[12]"
-  }, t("open settings label"), /* @__PURE__ */ React4.createElement(Tooltip2.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React4.createElement(LayoutControls, {
-    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 isAction3 } 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 (!isAction3(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)
-  ]);
-};
-
-// packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
-var NODE_TYPE = "dxos/app-graph/node";
-var renderItemEnd = ({ node }) => /* @__PURE__ */ React5.createElement(Surface, {
-  role: "navtree-item-end",
-  data: {
-    object: node.data,
-    id: node.id
-  }
-});
-var NavTreeContainer = /* @__PURE__ */ memo(({ isCurrent, popoverAnchorId, ...props }) => {
-  const { closeNavigationSidebar } = useSidebars2(NAVTREE_PLUGIN);
-  const [isLg] = useMediaQuery("lg", {
-    ssr: false
-  });
-  const dispatch = useIntentDispatcher3();
-  const { graph } = useGraph2();
-  const getActions2 = useCallback2((node) => getActions(graph, node), [
-    graph
-  ]);
-  const getItems = useCallback2((node) => {
-    return graph.nodes(node ?? graph.root, {
-      filter: (node2) => {
-        return untracked(() => {
-          const action = isActionLike(node2);
-          const disposition = node2.properties.disposition;
-          return !action || action && disposition === "item";
-        });
-      }
-    });
-  }, [
-    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: mx4(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 (!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 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({
-        action: NavigationAction.OPEN,
-        data: {
-          activeParts: {
-            main: [
-              node.id
-            ]
-          }
-        }
-      });
-    } else if (option) {
-      void dispatch({
-        action: NavigationAction.CLOSE,
-        data: {
-          activeParts: {
-            main: [
-              node.id
-            ]
-          }
-        }
-      });
-    } else {
-      void dispatch({
-        action: LayoutAction2.SCROLL_INTO_VIEW,
-        data: {
-          id: node.id
-        }
-      });
-    }
-    const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === "default");
-    if (isAction4(defaultAction)) {
-      void defaultAction.data();
-    }
-    if (!isLg) {
-      closeNavigationSidebar();
-    }
-  }, [
-    graph,
-    dispatch,
-    isCurrent,
-    isLg,
-    closeNavigationSidebar
-  ]);
-  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
-  ]);
-  return /* @__PURE__ */ React5.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] bs-full overflow-hidden"
-  }, /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "border-be border-separator"
-  }, /* @__PURE__ */ React5.createElement(Surface, {
-    role: "search-input",
-    limit: 1
-  })), /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "border-be border-separator !overflow-y-auto"
-  }, /* @__PURE__ */ React5.createElement(NavTree, {
-    id: graph.root.id,
-    getActions: getActions2,
-    getItems,
-    getProps,
-    isCurrent,
-    loadDescendents,
-    renderItemEnd,
-    popoverAnchorId,
-    canDrop,
-    onSelect: handleSelect,
-    ...props
-  })), /* @__PURE__ */ React5.createElement(NavTreeFooter, null)));
-});
-
-// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
-import { useEffect as useEffect3 } from "react";
-import { toLocalizedString as toLocalizedString4, useTranslation as useTranslation5 } from "@dxos/react-ui";
-var NavTreeDocumentTitle = ({ node }) => {
-  const { t } = useTranslation5(NAVTREE_PLUGIN);
-  useEffect3(() => {
-    document.title = node ? toLocalizedString4(node.properties.label, t) : t("current app name", {
-      ns: "appkit"
-    });
-  }, [
-    node?.properties?.label
-  ]);
-  return null;
-};
-
-// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
-import React7 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 React6 from "react";
-import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
-import { Avatar } from "@dxos/react-ui";
-import { focusRing, mx as mx5 } 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__ */ React6.createElement("button", {
-    className: mx5(focusRing, "rounded grid place-items-center"),
-    onClick
-  }, /* @__PURE__ */ React6.createElement(Avatar.Root, {
-    size,
-    variant: "circle",
-    status: connectionState === ConnectionState.OFFLINE ? "error" : internal ? "internal" : "active",
-    hue: props.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React6.createElement(Avatar.Frame, {
-    "data-testid": "treeView.haloButton",
-    "data-joyride": "welcome/halo"
-  }, internal ? /* @__PURE__ */ React6.createElement(Avatar.Image, {
-    href: INTERNAL
-  }) : /* @__PURE__ */ React6.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__ */ React7.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 React8 from "react";
-import { LayoutAction as LayoutAction3, useIntent } from "@dxos/app-framework";
-import { Button as Button4, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { getSize as getSize2 } from "@dxos/react-ui-theme";
-var CommandsTrigger = () => {
-  const { dispatch } = useIntent();
-  const { t } = useTranslation6(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React8.createElement(Button4, {
-    classNames: "w-full h-full !rounded-none",
-    onClick: () => dispatch({
-      action: LayoutAction3.SET_LAYOUT,
-      data: {
-        element: "dialog",
-        component: `${NAVTREE_PLUGIN}/Commands`,
-        dialogBlockAlign: "start"
-      }
-    })
-  }, /* @__PURE__ */ React8.createElement("span", {
-    className: "text-description font-normal grow text-start"
-  }, t("command list input placeholder")), /* @__PURE__ */ React8.createElement(MagnifyingGlass, {
-    className: getSize2(5)
-  }));
-};
+// packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
+import { definePlugin, defineModule, Events as Events2, contributes, Capabilities, allOf, createIntent, LayoutAction } from "@dxos/app-framework";
 
 // packages/plugins/plugin-navtree/src/translations.ts
 var translations_default = [
@@ -960,14 +47,7 @@ var translations_default = [
         "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>",
         "tree item actions label": "More actions",
-        "tree item searchlist input placeholder": "Search for actions\u2026",
         "empty branch message": "\xA0"
       }
     }
@@ -975,286 +55,95 @@ var translations_default = [
 ];
 
 // packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
-var KEY = `${NAVTREE_PLUGIN}/state`;
-var getInitialState = () => {
-  const stringified = localStorage.getItem(KEY);
-  if (!stringified) {
-    return;
-  }
-  try {
-    const cached = JSON.parse(stringified);
-    return cached.map(([key, value]) => [
-      key,
-      create({
-        open: value.open,
-        current: false
-      })
-    ]);
-  } catch {
-  }
-};
-var NavTreePlugin = () => {
-  let graphPlugin;
-  let graph;
-  let unsubscribe;
-  const state = new Map(getInitialState() ?? [
-    // TODO(thure): Initialize these dynamically.
-    [
-      "root",
-      create({
-        open: true,
-        current: false
-      })
+var NavTreePlugin = () => definePlugin(meta, [
+  defineModule({
+    id: `${meta.id}/module/state`,
+    activatesOn: Events2.LayoutReady,
+    activatesAfter: [
+      NavTreeEvents.StateReady
     ],
-    [
-      "root~dxos.org/plugin/space-spaces",
-      create({
-        open: true,
-        current: false
-      })
-    ],
-    [
-      "root~dxos.org/plugin/files",
-      create({
-        open: true,
-        current: false
-      })
-    ]
-  ]);
-  const getItem = (_path) => {
-    const path = Path.create(..._path);
-    const value = state.get(path) ?? create({
-      open: false,
-      current: false
-    });
-    if (!state.has(path)) {
-      state.set(path, value);
-    }
-    return value;
-  };
-  const setItem = (path, key, next) => {
-    const value = getItem(path);
-    value[key] = next;
-    localStorage.setItem(KEY, JSON.stringify(Array.from(state.entries())));
-  };
-  const isOpen = (path) => getItem(path).open;
-  const isCurrent = (path) => getItem(path).current;
-  const handleOpenChange = ({ item: { id }, path, open }) => {
-    setItem(path, "open", open);
-    if (graph) {
-      const node = graph.findNode(id);
-      return node && expandChildrenAndActions(graph, node);
-    }
-  };
-  return {
-    meta: meta_default,
-    ready: async (plugins) => {
-      const layout = resolvePlugin(plugins, parseLayoutPlugin)?.provides.layout;
-      const location = resolvePlugin(plugins, parseNavigationPlugin2)?.provides.location;
-      graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
-      graph = graphPlugin?.provides.graph;
-      if (!graph || !location || !layout) {
-        return;
-      }
-      const soloPart = location?.active.solo?.[0];
-      const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-      if (dispatch && soloPart) {
-        void dispatch({
-          plugin: NAVTREE_PLUGIN,
-          action: NavigationAction2.EXPOSE,
-          data: {
-            id: soloPart.id
-          }
-        });
-      }
-      let previous = [];
-      unsubscribe = effect(() => {
-        const part = layout.layoutMode === "solo" ? "solo" : "main";
-        const current = location.active[part]?.map(({ id }) => id) ?? [];
-        const removed = previous.filter((id) => !current.includes(id));
-        previous = current;
-        setTimeout(() => {
-          removed.forEach((id) => {
-            const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
-            keys.forEach((key) => {
-              setItem(Path.parts(key), "current", false);
-            });
-          });
-          current.forEach((id) => {
-            const keys = Array.from(/* @__PURE__ */ new Set([
-              ...state.keys(),
-              id
-            ])).filter((key) => Path.last(key) === id);
-            keys.forEach((key) => {
-              setItem(Path.parts(key), "current", true);
-            });
-          });
-        });
-      });
-      graph.subscribeTraverse({
-        visitor: (node, path) => {
-          let shortcut;
-          if (typeof node.properties.keyBinding === "object") {
-            const availablePlatforms = Object.keys(node.properties.keyBinding);
-            const platform = getHostPlatform3();
-            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 && isAction5(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 () => {
-      unsubscribe?.();
-      Keyboard2.singleton.destroy();
-    },
-    provides: {
+    activate: State
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events2.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations_default)
+  }),
+  defineModule({
+    id: `${meta.id}/module/metadata`,
+    activatesOn: Events2.SetupMetadata,
+    activate: () => contributes(Capabilities.Metadata, {
+      id: NODE_TYPE,
       metadata: {
-        records: {
-          [NODE_TYPE]: {
-            parse: ({ item }, type) => {
-              switch (type) {
-                case "node":
-                  return item;
-                case "object":
-                  return item.data;
-                case "view-object":
-                  return {
-                    id: `${item.id}-view`,
-                    object: item.data
-                  };
-              }
-            }
-          }
-        }
-      },
-      surface: {
-        component: ({ data, role }) => {
-          switch (data.component) {
-            case `${NAVTREE_PLUGIN}/Commands`: {
-              const selected = typeof data.subject === "string" ? data.subject : void 0;
-              return /* @__PURE__ */ React9.createElement(CommandsDialogContent, {
-                selected
-              });
-            }
-          }
-          switch (role) {
-            case "navigation":
-              return /* @__PURE__ */ React9.createElement(NavTreeContainer, {
-                isOpen,
-                isCurrent,
-                onOpenChange: handleOpenChange,
-                popoverAnchorId: data.popoverAnchorId
-              });
-            case "document-title": {
-              return /* @__PURE__ */ React9.createElement(NavTreeDocumentTitle, {
-                node: isGraphNode(data.activeNode) ? data.activeNode : void 0
-              });
-            }
-            case "notch-start":
-              return /* @__PURE__ */ React9.createElement(NotchStart, null);
-            case "search-input":
+        parse: ({ item }, type) => {
+          switch (type) {
+            case "node":
+              return item;
+            case "object":
+              return item.data;
+            case "view-object":
               return {
-                node: /* @__PURE__ */ React9.createElement(CommandsTrigger, null),
-                disposition: "fallback"
+                id: `${item.id}-view`,
+                object: item.data
               };
           }
-          return null;
-        }
-      },
-      intent: {
-        resolver: async (intent) => {
-          switch (intent.action) {
-            case NavigationAction2.EXPOSE: {
-              if (graph && intent.data?.id) {
-                const path = await graph.waitForPath({
-                  target: intent.data.id
-                });
-                [
-                  ...Array(path.length)
-                ].forEach((_, index) => {
-                  const subpath = path.slice(0, index);
-                  const value = getItem(subpath);
-                  if (!value.open) {
-                    setItem(subpath, "open", true);
-                  }
-                });
-              }
-              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: "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;
+      }
+    })
+  }),
+  defineModule({
+    id: `${meta.id}/module/expose`,
+    activatesOn: allOf(Events2.DispatcherReady, Events2.LayoutReady, NavTreeEvents.StateReady),
+    activate: async (context) => {
+      const layout = context.requestCapability(Capabilities.Layout);
+      const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+      if (dispatch && layout.active.length === 1) {
+        await dispatch(createIntent(LayoutAction.Expose, {
+          part: "navigation",
+          subject: layout.active[0]
+        }));
+      }
+      return [];
+    }
+  }),
+  defineModule({
+    id: `${meta.id}/module/keyboard`,
+    activatesOn: Events2.AppGraphReady,
+    activate: Keyboard
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events2.SetupSurfaces,
+    activate: ReactSurface
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events2.SetupIntents,
+    activate: IntentResolver
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events2.SetupAppGraph,
+    activate: AppGraphBuilder
+  })
+]);
 export {
+  COMMANDS_DIALOG,
+  KEY_BINDING,
+  NAVTREE_PLUGIN,
+  NavTreeCapabilities,
+  NavTreeEvents,
   NavTreePlugin,
-  src_default as default,
   expandActions,
   expandChildren,
   expandChildrenAndActions,
   getActions,
   getChildren,
+  getFirstTwoRenderableChars,
   getParent,
   getPersistenceParent,
+  l0ItemType,
+  meta,
   resolveMigrationOperation,
   sortActions
 };