@dxos/plugin-navtree 0.7.4 → 0.7.5-main.9d26e3a

package/dist/lib/browser/{chunk-PSVCPL4T.mjs → chunk-VAXG4OAG.mjs}

@@ -1,6 +1,7 @@
 // packages/plugins/plugin-navtree/src/meta.ts
 var NAVTREE_PLUGIN = "dxos.org/plugin/navtree";
 var KEY_BINDING = "KeyBinding";
+var COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
 var meta_default = {
   id: NAVTREE_PLUGIN
 };
@@ -8,6 +9,7 @@ var meta_default = {
 export {
   NAVTREE_PLUGIN,
   KEY_BINDING,
+  COMMANDS_DIALOG,
   meta_default
 };
-//# sourceMappingURL=chunk-PSVCPL4T.mjs.map
+//# sourceMappingURL=chunk-VAXG4OAG.mjs.map

package/dist/lib/browser/chunk-VAXG4OAG.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/meta.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';\n\n// TODO(wittjosiah): Factor out.\nexport const KEY_BINDING = 'KeyBinding';\n// TODO(wittjosiah): Factor out.\nexport const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;\n\nexport default {\n  id: NAVTREE_PLUGIN,\n} satisfies PluginMeta;\n"],
+  "mappings": ";AAMO,IAAMA,iBAAiB;AAGvB,IAAMC,cAAc;AAEpB,IAAMC,kBAAkB,GAAGF,cAAAA;AAElC,IAAA,eAAe;EACbG,IAAIH;AACN;",
+  "names": ["NAVTREE_PLUGIN", "KEY_BINDING", "COMMANDS_DIALOG", "id"]
+}

package/dist/lib/browser/index.mjs

@@ -1,13 +1,14 @@
 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";
@@ -16,7 +17,7 @@ import { getHostPlatform as getHostPlatform3 } 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"
@@ -166,9 +164,7 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, defaultMenuOpen, men
   }, 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) => {
+  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, menuActions?.map((action) => {
     const shortcut = getShortcut(action);
     return /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
       key: action.id,
@@ -241,7 +237,7 @@ var NavTreeItemActionSearchList = ({ menuActions, icon, label, testId, suppressN
     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"
+    classNames: "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, {
@@ -366,11 +362,12 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
 // 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, menuOpen, setMenuOpen }) => {
     return /* @__PURE__ */ React3.createElement(NavTreeColumns, {
       path,
       node: item,
       getActions: getActions2,
+      open,
       menuOpen,
       setMenuOpen,
       loadDescendents,
@@ -389,7 +386,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, menuOpen, setMenuOpen, loadDescendents, renderItemEnd: ItemEnd, popoverAnchorId }) => {
   const { t } = useTranslation3(NAVTREE_PLUGIN);
   const level = path.length - 2;
   const { actions: _actions, groupedActions } = getActions2(node);
@@ -431,7 +428,8 @@ var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOp
     menuOpen,
     onChangeMenuOpen: setMenuOpen
   }) : /* @__PURE__ */ React3.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React3.createElement(ItemEnd, {
-    node
+    node,
+    open
   }));
 };
 
@@ -440,11 +438,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,7 +451,7 @@ 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 { LayoutControls } from "@dxos/react-ui-stack";
@@ -466,7 +464,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) ?? [];
@@ -537,9 +535,7 @@ 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, {
@@ -647,19 +643,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 +732,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 +816,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 +840,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 +860,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 +898,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 { createIntent as createIntent5, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher5 } 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 { dispatchPromise: dispatch } = useIntentDispatcher5();
   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"
-      }
-    })
+    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, {
@@ -1048,7 +1030,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 +1039,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(() => {
@@ -1143,81 +1121,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: [