@dxos/plugin-navtree 0.6.13 → 0.6.14-main.2b6a0f3

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

@@ -10,4 +10,4 @@ export {
   KEY_BINDING,
   meta_default
 };
-//# sourceMappingURL=chunk-U7MTKDFQ.mjs.map
+//# sourceMappingURL=chunk-PSVCPL4T.mjs.map

package/dist/lib/browser/chunk-PSVCPL4T.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\nexport default {\n  id: NAVTREE_PLUGIN,\n} satisfies PluginMeta;\n"],
+  "mappings": ";AAMO,IAAMA,iBAAiB;AAGvB,IAAMC,cAAc;AAE3B,IAAA,eAAe;EACbC,IAAIF;AACN;",
+  "names": ["NAVTREE_PLUGIN", "KEY_BINDING", "id"]
+}

package/dist/lib/browser/index.mjs

@@ -2,12 +2,11 @@ import {
   KEY_BINDING,
   NAVTREE_PLUGIN,
   meta_default
-} from "./chunk-U7MTKDFQ.mjs";
+} from "./chunk-PSVCPL4T.mjs";
 
 // packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
-import { MagnifyingGlass as MagnifyingGlass2 } from "@phosphor-icons/react";
 import React8 from "react";
-import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction4, parseGraphPlugin, NavigationAction as NavigationAction2 } from "@dxos/app-framework";
+import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction3, parseGraphPlugin, NavigationAction as NavigationAction2 } from "@dxos/app-framework";
 import { createExtension, isAction as isAction4, isGraphNode } from "@dxos/app-graph";
 import { Keyboard as Keyboard2 } from "@dxos/keyboard";
 import { LocalStorageStore } from "@dxos/local-storage";
@@ -15,13 +14,12 @@ import { Path as Path3 } from "@dxos/react-ui-mosaic";
 import { getHostPlatform as getHostPlatform2 } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
-import { DotOutline } from "@phosphor-icons/react";
 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, useTranslation, toLocalizedString } from "@dxos/react-ui";
+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";
@@ -68,7 +66,6 @@ var CommandsDialogContent = ({ selected: initial }) => {
   }, actions?.map((action) => {
     const label = toLocalizedString(action.properties.label, t);
     const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
-    const Icon = action.properties.icon ?? DotOutline;
     return /* @__PURE__ */ React.createElement(SearchList.Item, {
       value: label,
       key: action.id,
@@ -103,8 +100,8 @@ var CommandsDialogContent = ({ selected: initial }) => {
         "data-testid": action.properties.testId
       }
     }, /* @__PURE__ */ React.createElement(Icon, {
-      size: 4,
-      className: mx(!action.properties.icon && "invisible")
+      icon: action.properties.icon,
+      size: 4
     }), /* @__PURE__ */ React.createElement("span", {
       className: "grow truncate"
     }, label), shortcut && /* @__PURE__ */ React.createElement("span", {
@@ -121,7 +118,6 @@ var CommandsDialogContent = ({ selected: initial }) => {
 };
 
 // packages/plugins/plugin-navtree/src/components/NavBarStart.tsx
-import { DotsThreeVertical } from "@phosphor-icons/react";
 import React2, { Fragment } from "react";
 import { getGraph } from "@dxos/app-graph";
 import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
@@ -130,16 +126,17 @@ var TREE_ITEM_MAIN_HEADING = "TreeItemMainHeading";
 var NavBarStart = ({ activeNode, popoverAnchorId }) => {
   const { t } = useTranslation2(NAVTREE_PLUGIN);
   const ActionRoot = popoverAnchorId === `dxos.org/ui/${TREE_ITEM_MAIN_HEADING}/${activeNode.id}` || popoverAnchorId === `dxos.org/ui/${KEY_BINDING}/${activeNode.id}` ? Popover.Anchor : Fragment;
-  const Icon = activeNode.properties?.icon ?? DotsThreeVertical;
   const graph = getGraph(activeNode);
   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, {
-    Icon,
+    icon: activeNode.properties?.icon ?? "ph--dots-three-vertical--regular",
     attendableId: activeNode.id,
     triggerLabel: menuTriggerLabel,
-    actions,
+    actions: [
+      actions
+    ],
     onAction: (action) => typeof action.data === "function" && action.data({
       node: action,
       caller: TREE_ITEM_MAIN_HEADING
@@ -151,11 +148,13 @@ var NavBarStart = ({ activeNode, popoverAnchorId }) => {
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 import React4, { useCallback, useMemo as useMemo2 } from "react";
-import { NavigationAction, LayoutAction as LayoutAction2, Surface, SLUG_PATH_SEPARATOR, SLUG_COLLECTION_INDICATOR, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import { NavigationAction, Surface, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
 import { getGraph as getGraph2, isAction as isAction3, isActionLike } from "@dxos/app-graph";
 import { ElevationProvider, useMediaQuery, useSidebars as useSidebars2 } from "@dxos/react-ui";
-import { Path as Path2 } from "@dxos/react-ui-mosaic";
-import { NavTree, getLevel } from "@dxos/react-ui-navtree";
+import { List } from "@dxos/react-ui-list";
+import { Mosaic, Path as Path2 } from "@dxos/react-ui-mosaic";
+import { getLevel, NavTree } from "@dxos/react-ui-navtree";
+import { ghostHover, mx as mx3 } from "@dxos/react-ui-theme";
 import { arrayMove } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeFooter.tsx
@@ -170,7 +169,7 @@ import { getSize, mx as mx2 } from "@dxos/react-ui-theme";
 var buttonStyles = "pli-1.5 text-xs font-normal";
 var repo = "https://github.com/dxos/dxos";
 var NavTreeFooter = (props) => {
-  const layoutPart = useDefaultValue(props.layoutPart, "sidebar");
+  const layoutPart = useDefaultValue(props.layoutPart, () => "sidebar");
   const config = useConfig();
   const { t } = useTranslation3(NAVTREE_PLUGIN);
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
@@ -451,26 +450,13 @@ var NavTreeContainer = ({ root, activeIds, openItemIds, onOpenItemIdsChange, att
     await dispatch({
       action: NavigationAction.OPEN,
       data: {
-        activeParts: node.data?.comments ? {
-          main: [
-            node.id
-          ],
-          complementary: [
-            `${node.id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
-          ]
-        } : {
+        activeParts: {
           main: [
             node.id
           ]
         }
       }
     });
-    await dispatch({
-      action: LayoutAction2.SCROLL_INTO_VIEW,
-      data: {
-        id: node.id
-      }
-    });
     const defaultAction = actions?.find((action) => action.properties?.disposition === "default");
     if (isAction3(defaultAction)) {
       void defaultAction.data();
@@ -680,7 +666,35 @@ var NavTreeContainer = ({ root, activeIds, openItemIds, onOpenItemIdsChange, att
     onOpenItemIdsChange,
     openItemIds
   ]);
-  return /* @__PURE__ */ React4.createElement(ElevationProvider, {
+  const debug = false;
+  if (debug) {
+    const getLabel = (item) => {
+      const label = item.node?.properties?.label;
+      return typeof label === "string" ? label : item.id;
+    };
+    return /* @__PURE__ */ React4.createElement("div", {
+      className: "bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]"
+    }, /* @__PURE__ */ React4.createElement("div", {
+      className: "flex items-center p-2"
+    }, "Items: ", items.length), /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: "!overflow-y-auto"
+    }, /* @__PURE__ */ React4.createElement(List.Root, {
+      items,
+      isItem: () => true
+    }, ({ items: items2 }) => items2.map((item) => /* @__PURE__ */ React4.createElement(List.Item, {
+      key: item.id,
+      item,
+      classNames: mx3("p-2", ghostHover)
+    }, /* @__PURE__ */ React4.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React4.createElement(List.ItemTitle, {
+      classNames: "p-2 text-sm",
+      onClick: () => handleNavigate(item)
+    }, getLabel(item)), /* @__PURE__ */ React4.createElement(List.IconButton, {
+      icon: "ph--caret-down--regular",
+      onClick: () => handleItemOpenChange(item, true)
+    }))))), /* @__PURE__ */ React4.createElement(NavTreeFooter, null));
+  }
+  return /* @__PURE__ */ React4.createElement(Mosaic.Root, null, /* @__PURE__ */ React4.createElement(Mosaic.DragOverlay, null), /* @__PURE__ */ React4.createElement(ElevationProvider, {
     elevation: "chrome"
   }, /* @__PURE__ */ React4.createElement("div", {
     role: "none",
@@ -697,17 +711,17 @@ var NavTreeContainer = ({ root, activeIds, openItemIds, onOpenItemIdsChange, att
     current: activeIds,
     attended,
     type: NODE_TYPE,
+    loadDescendents,
+    popoverAnchorId,
+    renderPresence,
+    resolveItemLevel,
     open: openItemIds,
     onNavigate: handleNavigate,
     onItemOpenChange: handleItemOpenChange,
     onMove: handleMove,
     onDrop: handleDrop,
-    onDragEnd: handleDragEnd,
-    popoverAnchorId,
-    renderPresence,
-    resolveItemLevel,
-    loadDescendents
-  })), /* @__PURE__ */ React4.createElement(NavTreeFooter, null)));
+    onDragEnd: handleDragEnd
+  })), /* @__PURE__ */ React4.createElement(NavTreeFooter, null))));
 };
 
 // packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
@@ -736,7 +750,7 @@ import { useIdentity } from "@dxos/react-client/halo";
 import React5 from "react";
 import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
 import { Avatar } from "@dxos/react-ui";
-import { focusRing, mx as mx3 } from "@dxos/react-ui-theme";
+import { focusRing, mx as mx4 } from "@dxos/react-ui-theme";
 import { hexToFallback } from "@dxos/util";
 var INTERNAL = "https://avatars.githubusercontent.com/u/57182821";
 var HaloButton = (props) => {
@@ -744,7 +758,7 @@ var HaloButton = (props) => {
   const fallbackValue = hexToFallback(identityKey ?? "0");
   const { swarm: connectionState } = useNetworkStatus();
   return /* @__PURE__ */ React5.createElement("button", {
-    className: mx3(focusRing, "rounded grid place-items-center"),
+    className: mx4(focusRing, "rounded grid place-items-center"),
     onClick
   }, /* @__PURE__ */ React5.createElement(Avatar.Root, {
     size,
@@ -781,7 +795,7 @@ var NotchStart = () => {
 // packages/plugins/plugin-navtree/src/components/CommandsTrigger.tsx
 import { MagnifyingGlass } from "@phosphor-icons/react";
 import React7 from "react";
-import { LayoutAction as LayoutAction3, useIntent } from "@dxos/app-framework";
+import { LayoutAction as LayoutAction2, useIntent } from "@dxos/app-framework";
 import { Button as Button3, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { getSize as getSize2 } from "@dxos/react-ui-theme";
 var CommandsTrigger = () => {
@@ -790,7 +804,7 @@ var CommandsTrigger = () => {
   return /* @__PURE__ */ React7.createElement(Button3, {
     classNames: "pis-3 pie-2 gap-2 mli-1 mbs-1 min-bs-0 bs-[--rail-action] justify-start",
     onClick: () => dispatch({
-      action: LayoutAction3.SET_LAYOUT,
+      action: LayoutAction2.SET_LAYOUT,
       data: {
         element: "dialog",
         component: `${NAVTREE_PLUGIN}/Commands`,
@@ -1004,7 +1018,7 @@ var NavTreePlugin = () => {
                   id: "dxos.org/plugin/navtree/open-commands",
                   data: async () => {
                     await intentPlugin?.provides.intent.dispatch({
-                      action: LayoutAction4.SET_LAYOUT,
+                      action: LayoutAction3.SET_LAYOUT,
                       data: {
                         element: "dialog",
                         component: `${NAVTREE_PLUGIN}/Commands`,
@@ -1019,8 +1033,7 @@ var NavTreePlugin = () => {
                         ns: NAVTREE_PLUGIN
                       }
                     ],
-                    icon: (props) => /* @__PURE__ */ React8.createElement(MagnifyingGlass2, props),
-                    iconSymbol: "ph--magnifying-glass--regular",
+                    icon: "ph--magnifying-glass--regular",
                     keyBinding: {
                       macos: "meta+k",
                       windows: "ctrl+k"