@dxos/plugin-navtree 0.6.14-staging.e15392e → 0.7.1-staging.599df14

package/dist/lib/browser/index.mjs

@@ -6,12 +6,13 @@ import {
 
 // packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
 import React10 from "react";
-import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction3, parseGraphPlugin, NavigationAction as NavigationAction2 } from "@dxos/app-framework";
+import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction3, parseGraphPlugin, NavigationAction as NavigationAction2, parseNavigationPlugin as parseNavigationPlugin2 } from "@dxos/app-framework";
 import { createExtension, isAction as isAction5, isGraphNode } from "@dxos/app-graph";
 import { invariant } from "@dxos/invariant";
 import { Keyboard as Keyboard2 } from "@dxos/keyboard";
 import { LocalStorageStore } from "@dxos/local-storage";
 import { Path as Path2 } from "@dxos/react-ui-mosaic";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 import { getHostPlatform as getHostPlatform3 } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
@@ -122,7 +123,7 @@ var CommandsDialogContent = ({ selected: initial }) => {
 import React2, { Fragment } from "react";
 import { getGraph } from "@dxos/app-graph";
 import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { PlankHeading } from "@dxos/react-ui-deck";
+import { StackItem } from "@dxos/react-ui-stack";
 var TREE_ITEM_MAIN_HEADING = "TreeItemMainHeading";
 var NavBarStart = ({ activeNode, popoverAnchorId }) => {
   const { t } = useTranslation2(NAVTREE_PLUGIN);
@@ -131,7 +132,7 @@ var NavBarStart = ({ activeNode, popoverAnchorId }) => {
   const actions = graph.actions(activeNode);
   const label = toLocalizedString2(activeNode.properties?.label, t);
   const menuTriggerLabel = t("node actions menu invoker label");
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ActionRoot, null, /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ActionRoot, null, /* @__PURE__ */ React2.createElement(StackItem.Sigil, {
     icon: activeNode.properties?.icon ?? "ph--dots-three-vertical--regular",
     attendableId: activeNode.id,
     triggerLabel: menuTriggerLabel,
@@ -142,7 +143,7 @@ var NavBarStart = ({ activeNode, popoverAnchorId }) => {
       node: action,
       caller: TREE_ITEM_MAIN_HEADING
     })
-  })), /* @__PURE__ */ React2.createElement(PlankHeading.Label, {
+  })), /* @__PURE__ */ React2.createElement(StackItem.HeadingLabel, {
     attendableId: activeNode.id
   }, label));
 };
@@ -413,7 +414,6 @@ var NavTree = ({ loadDescendents, renderPresence: renderPresence2, popoverAnchor
     ...props,
     draggable: true,
     gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
-    classNames: "pbs-1",
     renderColumns
   });
 };
@@ -478,13 +478,14 @@ import { arrayMove } from "@dxos/util";
 import { ArrowSquareOut, GearSix, Warning } from "@phosphor-icons/react";
 import { formatDistance } from "date-fns/formatDistance";
 import React5 from "react";
-import { SettingsAction, useResolvePlugin, parseNavigationPlugin, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { SettingsAction, parseNavigationPlugin, useResolvePlugin, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { useConfig } from "@dxos/react-client";
-import { Button as Button3, Tooltip as Tooltip2, Popover as Popover3, useSidebars, useTranslation as useTranslation5, Link, Message, Trans, useDefaultValue } from "@dxos/react-ui";
-import { PlankHeading as PlankHeading2 } from "@dxos/react-ui-deck";
+import { Button as Button3, Link, Message, Popover as Popover3, Tooltip as Tooltip2, Trans, useDefaultValue, useSidebars, useTranslation as useTranslation5 } 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();
@@ -493,11 +494,12 @@ var NavTreeFooter = (props) => {
   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__ */ React5.createElement("div", {
     role: "none",
-    className: mx3("bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content border-separator border-bs pli-1 flex justify-end", layoutPart === "complementary" && "md:justify-end flex-row-reverse")
+    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__ */ React5.createElement(Popover3.Root, null, /* @__PURE__ */ React5.createElement(Popover3.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React5.createElement(Button3, {
@@ -506,7 +508,7 @@ var NavTreeFooter = (props) => {
     ...!navigationSidebarOpen && {
       tabIndex: -1
     }
-  }, "v", version)), /* @__PURE__ */ React5.createElement(Popover3.Portal, null, /* @__PURE__ */ React5.createElement(Popover3.Content, {
+  }, "v", v)), /* @__PURE__ */ React5.createElement(Popover3.Portal, null, /* @__PURE__ */ React5.createElement(Popover3.Content, {
     side: "top",
     role: "message",
     classNames: "z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]"
@@ -566,10 +568,10 @@ var NavTreeFooter = (props) => {
   }, /* @__PURE__ */ React5.createElement("span", {
     className: "sr-only"
   }, t("open settings label")), /* @__PURE__ */ React5.createElement(GearSix, {
-    className: mx3(getSize(4), "rotate-90")
+    className: mx3(getSize(5), "rotate-90")
   }))), /* @__PURE__ */ React5.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip2.Content, {
     classNames: "z-[12]"
-  }, t("open settings label"), /* @__PURE__ */ React5.createElement(Tooltip2.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React5.createElement(PlankHeading2.Controls, {
+  }, t("open settings label"), /* @__PURE__ */ React5.createElement(Tooltip2.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React5.createElement(LayoutControls, {
     variant: "hide-disabled",
     capabilities: {
       incrementStart: false,
@@ -845,13 +847,16 @@ var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) =>
     elevation: "chrome"
   }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: "bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]"
+    className: "grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] bs-full overflow-hidden"
+  }, /* @__PURE__ */ React6.createElement("div", {
+    role: "none",
+    className: "border-be border-separator"
   }, /* @__PURE__ */ React6.createElement(Surface, {
     role: "search-input",
     limit: 1
-  }), /* @__PURE__ */ React6.createElement("div", {
+  })), /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: "!overflow-y-auto"
+    className: "border-be border-separator !overflow-y-auto"
   }, /* @__PURE__ */ React6.createElement(NavTree, {
     items,
     open,
@@ -943,7 +948,7 @@ var CommandsTrigger = () => {
   const { dispatch } = useIntent();
   const { t } = useTranslation7(NAVTREE_PLUGIN);
   return /* @__PURE__ */ React9.createElement(Button4, {
-    classNames: "pis-3 pie-2 gap-2 mli-1 mbs-1 min-bs-0 bs-[--rail-action] justify-start",
+    classNames: "w-full h-full !rounded-none",
     onClick: () => dispatch({
       action: LayoutAction2.SET_LAYOUT,
       data: {
@@ -1007,7 +1012,7 @@ var NavTreePlugin = () => {
   const getItem = (node, parent, filter) => {
     invariant(graph, void 0, {
       F: __dxlog_file,
-      L: 80,
+      L: 82,
       S: void 0,
       A: [
         "graph",
@@ -1027,7 +1032,7 @@ var NavTreePlugin = () => {
       icon: node.properties.icon,
       disabled: node.properties.disabled,
       testId: node.properties.testId,
-      className: node.properties.className,
+      className: mx5(node.properties.modified && "italic", node.properties.className),
       headingClassName: node.properties.headingClassName,
       path,
       parentOf,
@@ -1060,18 +1065,27 @@ var NavTreePlugin = () => {
   return {
     meta: meta_default,
     ready: async (plugins) => {
+      state.prop({
+        key: "open",
+        type: LocalStorageStore.json()
+      });
       graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
       graph = graphPlugin?.provides.graph;
       if (!graph) {
         return;
       }
+      const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+      const soloPart = resolvePlugin(plugins, parseNavigationPlugin2)?.provides.location.active.solo?.[0];
+      if (dispatch && soloPart) {
+        void dispatch({
+          plugin: NAVTREE_PLUGIN,
+          action: NavigationAction2.EXPOSE,
+          data: {
+            id: soloPart.id
+          }
+        });
+      }
       state.values.root = graph.root;
-      getChildren(graph, state.values.root);
-      getActions(graph, state.values.root);
-      state.prop({
-        key: "open",
-        type: LocalStorageStore.json()
-      });
       void expandOpenGraphNodes(graph, state.values.open);
       graph.subscribeTraverse({
         visitor: (node, path) => {
@@ -1171,25 +1185,23 @@ var NavTreePlugin = () => {
         }
       },
       intent: {
-        resolver: (intent) => {
+        resolver: async (intent) => {
           switch (intent.action) {
             case NavigationAction2.EXPOSE: {
               if (graph && intent.data?.id) {
-                const path = graph.getPath({
+                const path = await graph.waitForPath({
                   target: intent.data.id
                 });
-                if (Array.isArray(path)) {
-                  const additionalOpenItems = [
-                    ...Array(path.length)
-                  ].reduce((acc, _, index) => {
-                    const itemId = Path2.create(...path.slice(0, index));
-                    if (itemId.length > 0) {
-                      acc.push(itemId);
-                    }
-                    return acc;
-                  }, []);
-                  state.values.open.push(...additionalOpenItems);
-                }
+                const additionalOpenItems = [
+                  ...Array(path.length)
+                ].reduce((acc, _, index) => {
+                  const itemId = Path2.create(...path.slice(0, index));
+                  if (itemId.length > 0 && !state.values.open.includes(itemId)) {
+                    acc.push(itemId);
+                  }
+                  return acc;
+                }, []);
+                state.values.open.push(...additionalOpenItems);
               }
               break;
             }