@dxos/plugin-navtree 0.7.4 → 0.7.5-main.937ce75

package/dist/lib/browser/index.mjs

@@ -1,22 +1,23 @@
 import {
+  COMMANDS_DIALOG,
   KEY_BINDING,
   NAVTREE_PLUGIN,
   meta_default
-} from "./chunk-PSVCPL4T.mjs";
+} from "./chunk-VAXG4OAG.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 { createIntent as createIntent6, createResolver, createSurface, 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";
+import { getHostPlatform as getHostPlatform2 } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
 import React, { useMemo, useState } from "react";
-import { useIntentDispatcher, LayoutAction } from "@dxos/app-framework";
+import { useIntentDispatcher, LayoutAction, createIntent } from "@dxos/app-framework";
 import { isActionGroup, isAction } from "@dxos/app-graph";
 import { Keyboard, keySymbols } from "@dxos/keyboard";
 import { useGraph } from "@dxos/plugin-graph";
@@ -27,7 +28,7 @@ import { getHostPlatform } from "@dxos/util";
 var CommandsDialogContent = ({ selected: initial }) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const [selected, setSelected] = useState(initial);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useGraph();
   const allActions = useMemo(() => {
     const current = Keyboard.singleton.getCurrentContext();
@@ -78,13 +79,10 @@ var CommandsDialogContent = ({ selected: initial }) => {
           setSelected(action.id);
           return;
         }
-        void dispatch({
-          action: LayoutAction.SET_LAYOUT,
-          data: {
-            element: "dialog",
-            state: false
-          }
-        });
+        void dispatch(createIntent(LayoutAction.SetLayout, {
+          element: "dialog",
+          state: false
+        }));
         setTimeout(() => {
           const node = graph.nodes(group ?? action, {
             relation: "inbound"
@@ -125,177 +123,42 @@ import { Popover, toLocalizedString as toLocalizedString3, Treegrid, useTranslat
 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()];
-};
+import React2, { useRef } from "react";
+import { useTranslation as useTranslation2, toLocalizedString as toLocalizedString2, IconButton } from "@dxos/react-ui";
+import { DropdownMenu } from "@dxos/react-ui-menu";
+import { hoverableControlItem, hoverableOpenControlItem, mx as mx2 } from "@dxos/react-ui-theme";
 var fallbackIcon = "ph--placeholder--regular";
-var NavTreeItemActionDropdownMenu = ({ label, icon, testId, defaultMenuOpen, menuActions, menuOpen, suppressNextTooltip, onChangeMenuOpen, onAction }) => {
+var actionButtonProps = {
+  iconOnly: true,
+  size: 4,
+  variant: "ghost",
+  density: "fine",
+  classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem)
+};
+var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
   const { t } = useTranslation2(NAVTREE_PLUGIN);
-  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
-    prop: menuOpen,
-    defaultProp: defaultMenuOpen,
-    onChange: onChangeMenuOpen
-  });
+  const suppressNextTooltip = useRef(false);
   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
+    actions: menuActions,
+    onAction,
+    suppressNextTooltip
   }, /* @__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, {
+  }, /* @__PURE__ */ React2.createElement(IconButton, {
+    ...actionButtonProps,
     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),
+    label: toLocalizedString2(label, t),
     "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))))))));
+    suppressNextTooltip
+  })));
 };
-var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, label, icon } = {
+var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, 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),
+}, data: invoke, baseLabel }) => {
+  return /* @__PURE__ */ React2.createElement(IconButton, {
+    ...actionButtonProps,
+    icon: icon ?? fallbackIcon,
+    label: baseLabel,
     disabled,
     onClick: (event) => {
       if (disabled) {
@@ -310,69 +173,39 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
       });
     },
     "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, {
+  return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React2.createElement(NavTreeItemMonolithicAction, {
+    baseLabel,
     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,
+    label: baseLabel,
     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 }) => {
+  const renderColumns = useCallback(({ item, path, open }) => {
     return /* @__PURE__ */ React3.createElement(NavTreeColumns, {
       path,
       node: item,
       getActions: getActions2,
-      menuOpen,
-      setMenuOpen,
+      open,
       loadDescendents,
       renderItemEnd: renderItemEnd2,
       popoverAnchorId
@@ -389,7 +222,7 @@ var NavTree = ({ getActions: getActions2, loadDescendents, renderItemEnd: render
     renderColumns
   });
 };
-var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOpen, loadDescendents, renderItemEnd: ItemEnd, popoverAnchorId }) => {
+var NavTreeColumns = ({ path, node, getActions: getActions2, open, loadDescendents, renderItemEnd: ItemEnd, popoverAnchorId }) => {
   const { t } = useTranslation3(NAVTREE_PLUGIN);
   const level = path.length - 2;
   const { actions: _actions, groupedActions } = getActions2(node);
@@ -427,11 +260,10 @@ var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOp
     parent: node,
     menuActions: actions,
     menuType: "dropdown",
-    caller: NAV_TREE_ITEM,
-    menuOpen,
-    onChangeMenuOpen: setMenuOpen
+    caller: NAV_TREE_ITEM
   }) : /* @__PURE__ */ React3.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React3.createElement(ItemEnd, {
-    node
+    node,
+    open
   }));
 };
 
@@ -440,11 +272,11 @@ import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/ad
 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 { createIntent as createIntent3, 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 { 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";
@@ -453,9 +285,9 @@ import { arrayMove } from "@dxos/util";
 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 { SettingsAction, parseNavigationPlugin, useResolvePlugin, useIntentDispatcher as useIntentDispatcher2, createIntent as createIntent2 } 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 { Button as Button2, Link, Message, Popover as Popover2, Tooltip, 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";
@@ -466,7 +298,7 @@ var NavTreeFooter = (props) => {
   const config = useConfig();
   const { t } = useTranslation4(NAVTREE_PLUGIN);
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
-  const dispatch = useIntentDispatcher2();
+  const { dispatchPromise: dispatch } = useIntentDispatcher2();
   const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
   const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
   const [_, v] = version?.match(VERSION_REGEX) ?? [];
@@ -477,7 +309,7 @@ var NavTreeFooter = (props) => {
     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, {
+  }, /* @__PURE__ */ React4.createElement(Button2, {
     variant: "ghost",
     classNames: buttonStyles,
     ...!navigationSidebarOpen && {
@@ -527,9 +359,9 @@ var NavTreeFooter = (props) => {
         variant: "neutral"
       })
     }
-  }))), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null)))), /* @__PURE__ */ React4.createElement(Tooltip2.Root, null, /* @__PURE__ */ React4.createElement(Tooltip2.Trigger, {
+  }))), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null)))), /* @__PURE__ */ React4.createElement(Tooltip.Root, null, /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button3, {
+  }, /* @__PURE__ */ React4.createElement(Button2, {
     variant: "ghost",
     classNames: buttonStyles,
     "data-testid": "treeView.openSettings",
@@ -537,16 +369,14 @@ var NavTreeFooter = (props) => {
     ...!navigationSidebarOpen && {
       tabIndex: -1
     },
-    onClick: () => dispatch({
-      action: SettingsAction.OPEN
-    })
+    onClick: () => dispatch(createIntent2(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, {
+  }))), /* @__PURE__ */ React4.createElement(Tooltip.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip.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, {
+  }, t("open settings label"), /* @__PURE__ */ React4.createElement(Tooltip.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React4.createElement(LayoutControls, {
     variant: "hide-disabled",
     capabilities: {
       incrementStart: false,
@@ -647,19 +477,21 @@ var expandActions = (graph, node) => {
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 var NODE_TYPE = "dxos/app-graph/node";
-var renderItemEnd = ({ node }) => /* @__PURE__ */ React5.createElement(Surface, {
+var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React5.createElement(Surface, {
   role: "navtree-item-end",
   data: {
-    object: node.data,
-    id: node.id
-  }
+    id: node.id,
+    subject: node.data,
+    open
+  },
+  limit: 1
 });
 var NavTreeContainer = /* @__PURE__ */ memo(({ isCurrent, popoverAnchorId, ...props }) => {
   const { closeNavigationSidebar } = useSidebars2(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const dispatch = useIntentDispatcher3();
+  const { dispatchPromise: dispatch } = useIntentDispatcher3();
   const { graph } = useGraph2();
   const getActions2 = useCallback2((node) => getActions(graph, node), [
     graph
@@ -734,34 +566,25 @@ var NavTreeContainer = /* @__PURE__ */ memo(({ isCurrent, popoverAnchorId, ...pr
     }
     const current = isCurrent(path, node);
     if (!current) {
-      void dispatch({
-        action: NavigationAction.OPEN,
-        data: {
-          activeParts: {
-            main: [
-              node.id
-            ]
-          }
+      void dispatch(createIntent3(NavigationAction.Open, {
+        activeParts: {
+          main: [
+            node.id
+          ]
         }
-      });
+      }));
     } else if (option) {
-      void dispatch({
-        action: NavigationAction.CLOSE,
-        data: {
-          activeParts: {
-            main: [
-              node.id
-            ]
-          }
+      void dispatch(createIntent3(NavigationAction.Close, {
+        activeParts: {
+          main: [
+            node.id
+          ]
         }
-      });
+      }));
     } else {
-      void dispatch({
-        action: LayoutAction2.SCROLL_INTO_VIEW,
-        data: {
-          id: node.id
-        }
-      });
+      void dispatch(createIntent3(LayoutAction2.ScrollIntoView, {
+        id: node.id
+      }));
     }
     const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === "default");
     if (isAction4(defaultAction)) {
@@ -827,9 +650,7 @@ var NavTreeContainer = /* @__PURE__ */ memo(({ isCurrent, popoverAnchorId, ...pr
   }, [
     graph
   ]);
-  return /* @__PURE__ */ React5.createElement(ElevationProvider, {
-    elevation: "chrome"
-  }, /* @__PURE__ */ React5.createElement("div", {
+  return /* @__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", {
@@ -853,7 +674,7 @@ var NavTreeContainer = /* @__PURE__ */ memo(({ isCurrent, popoverAnchorId, ...pr
     canDrop,
     onSelect: handleSelect,
     ...props
-  })), /* @__PURE__ */ React5.createElement(NavTreeFooter, null)));
+  })), /* @__PURE__ */ React5.createElement(NavTreeFooter, null));
 });
 
 // packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
@@ -873,8 +694,8 @@ var NavTreeDocumentTitle = ({ node }) => {
 
 // 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 { createIntent as createIntent4, useIntentDispatcher as useIntentDispatcher4, useResolvePlugin as useResolvePlugin2 } from "@dxos/app-framework";
+import { ClientAction } from "@dxos/plugin-client/types";
 import { parseObservabilityPlugin } from "@dxos/plugin-observability";
 import { useIdentity } from "@dxos/react-client/halo";
 
@@ -911,38 +732,33 @@ var HaloButton = (props) => {
 var NotchStart = () => {
   const identity = useIdentity();
   const observabilityPlugin = useResolvePlugin2(parseObservabilityPlugin);
-  const dispatch = useIntentDispatcher4();
+  const { dispatchPromise: 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
-    })
+    onClick: () => dispatch(createIntent4(ClientAction.ShareIdentity))
   });
 };
 
 // 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 { createIntent as createIntent5, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher5 } from "@dxos/app-framework";
+import { Button as Button3, useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { getSize as getSize2 } from "@dxos/react-ui-theme";
 var CommandsTrigger = () => {
-  const { dispatch } = useIntent();
+  const { dispatchPromise: dispatch } = useIntentDispatcher5();
   const { t } = useTranslation6(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React8.createElement(Button4, {
+  return /* @__PURE__ */ React8.createElement(Button3, {
     classNames: "w-full h-full !rounded-none",
-    onClick: () => dispatch({
-      action: LayoutAction3.SET_LAYOUT,
-      data: {
-        element: "dialog",
-        component: `${NAVTREE_PLUGIN}/Commands`,
-        dialogBlockAlign: "start"
-      }
-    })
+    onClick: () => dispatch(createIntent5(LayoutAction3.SetLayout, {
+      element: "dialog",
+      component: COMMANDS_DIALOG,
+      dialogBlockAlign: "start"
+    }))
   }, /* @__PURE__ */ React8.createElement("span", {
     className: "text-description font-normal grow text-start"
   }, t("command list input placeholder")), /* @__PURE__ */ React8.createElement(MagnifyingGlass, {
@@ -967,7 +783,6 @@ var translations_default = [
         "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"
       }
     }
@@ -1048,7 +863,7 @@ var NavTreePlugin = () => {
   };
   return {
     meta: meta_default,
-    ready: async (plugins) => {
+    ready: async ({ plugins }) => {
       const layout = resolvePlugin(plugins, parseLayoutPlugin)?.provides.layout;
       const location = resolvePlugin(plugins, parseNavigationPlugin2)?.provides.location;
       graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
@@ -1057,15 +872,11 @@ var NavTreePlugin = () => {
         return;
       }
       const soloPart = location?.active.solo?.[0];
-      const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+      const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatchPromise;
       if (dispatch && soloPart) {
-        void dispatch({
-          plugin: NAVTREE_PLUGIN,
-          action: NavigationAction2.EXPOSE,
-          data: {
-            id: soloPart.id
-          }
-        });
+        void dispatch(createIntent6(NavigationAction2.Expose, {
+          id: soloPart.id
+        }));
       }
       let previous = [];
       unsubscribe = effect(() => {
@@ -1096,7 +907,7 @@ var NavTreePlugin = () => {
           let shortcut;
           if (typeof node.properties.keyBinding === "object") {
             const availablePlatforms = Object.keys(node.properties.keyBinding);
-            const platform = getHostPlatform3();
+            const platform = getHostPlatform2();
             shortcut = availablePlatforms.includes(platform) ? node.properties.keyBinding[platform] : platform === "ios" ? node.properties.keyBinding.macos : platform === "linux" || platform === "unknown" ? node.properties.keyBinding.windows : void 0;
           } else {
             shortcut = node.properties.keyBinding;
@@ -1143,81 +954,83 @@ var NavTreePlugin = () => {
         }
       },
       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":
-              return {
-                node: /* @__PURE__ */ React9.createElement(CommandsTrigger, null),
-                disposition: "fallback"
-              };
-          }
-          return null;
-        }
+        definitions: () => [
+          createSurface({
+            id: COMMANDS_DIALOG,
+            role: "dialog",
+            filter: (data) => data.component === COMMANDS_DIALOG,
+            component: ({ data }) => /* @__PURE__ */ React9.createElement(CommandsDialogContent, {
+              selected: data.subject
+            })
+          }),
+          createSurface({
+            id: `${NAVTREE_PLUGIN}/navigation`,
+            role: "navigation",
+            component: ({ data }) => /* @__PURE__ */ React9.createElement(NavTreeContainer, {
+              isOpen,
+              isCurrent,
+              onOpenChange: handleOpenChange,
+              popoverAnchorId: data.popoverAnchorId
+            })
+          }),
+          createSurface({
+            id: `${NAVTREE_PLUGIN}/document-title`,
+            role: "document-title",
+            component: ({ data }) => /* @__PURE__ */ React9.createElement(NavTreeDocumentTitle, {
+              node: isGraphNode(data.subject) ? data.subject : void 0
+            })
+          }),
+          createSurface({
+            id: `${NAVTREE_PLUGIN}/notch-start`,
+            role: "notch-start",
+            component: () => /* @__PURE__ */ React9.createElement(NotchStart, null)
+          }),
+          createSurface({
+            id: `${NAVTREE_PLUGIN}/search-input`,
+            role: "search-input",
+            disposition: "fallback",
+            component: () => /* @__PURE__ */ React9.createElement(CommandsTrigger, 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;
-            }
+        resolvers: ({ plugins }) => {
+          const graph2 = resolvePlugin(plugins, parseGraphPlugin)?.provides.graph;
+          if (!graph2) {
+            return [];
           }
+          return createResolver(NavigationAction2.Expose, async ({ id }) => {
+            const path = await graph2.waitForPath({
+              target: id
+            });
+            [
+              ...Array(path.length)
+            ].forEach((_, index) => {
+              const subpath = path.slice(0, index);
+              const value = getItem(subpath);
+              if (!value.open) {
+                setItem(subpath, "open", true);
+              }
+            });
+          });
         }
       },
       graph: {
         builder: (plugins) => {
-          const intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatchPromise;
           return [
             createExtension({
               id: NAVTREE_PLUGIN,
               filter: (node) => node.id === "root",
               actions: () => [
                 {
-                  id: "dxos.org/plugin/navtree/open-commands",
+                  id: COMMANDS_DIALOG,
                   data: async () => {
-                    await intentPlugin?.provides.intent.dispatch({
-                      action: LayoutAction4.SET_LAYOUT,
-                      data: {
-                        element: "dialog",
-                        component: `${NAVTREE_PLUGIN}/Commands`,
-                        dialogBlockAlign: "start"
-                      }
-                    });
+                    await dispatch?.(createIntent6(LayoutAction4.SetLayout, {
+                      element: "dialog",
+                      component: COMMANDS_DIALOG,
+                      dialogBlockAlign: "start"
+                    }));
                   },
                   properties: {
                     label: [