@dxos/plugin-navtree 0.6.13-main.ed424a1 → 0.6.13

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/meta.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\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};\n"],
+  "mappings": ";AAIO,IAAMA,iBAAiB;AAGvB,IAAMC,cAAc;AAE3B,IAAA,eAAe;EACbC,IAAIF;AACN;",
+  "names": ["NAVTREE_PLUGIN", "KEY_BINDING", "id"]
+}

package/dist/lib/browser/index.mjs

@@ -2,11 +2,12 @@ import {
   KEY_BINDING,
   NAVTREE_PLUGIN,
   meta_default
-} from "./chunk-PSVCPL4T.mjs";
+} from "./chunk-U7MTKDFQ.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 LayoutAction3, parseGraphPlugin, NavigationAction as NavigationAction2 } from "@dxos/app-framework";
+import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction4, 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";
@@ -14,12 +15,13 @@ 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, Icon, useTranslation, toLocalizedString } from "@dxos/react-ui";
+import { Button, Dialog, 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";
@@ -66,6 +68,7 @@ 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,
@@ -100,8 +103,8 @@ var CommandsDialogContent = ({ selected: initial }) => {
         "data-testid": action.properties.testId
       }
     }, /* @__PURE__ */ React.createElement(Icon, {
-      icon: action.properties.icon,
-      size: 4
+      size: 4,
+      className: mx(!action.properties.icon && "invisible")
     }), /* @__PURE__ */ React.createElement("span", {
       className: "grow truncate"
     }, label), shortcut && /* @__PURE__ */ React.createElement("span", {
@@ -118,6 +121,7 @@ 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";
@@ -126,17 +130,16 @@ 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: activeNode.properties?.icon ?? "ph--dots-three-vertical--regular",
+    Icon,
     attendableId: activeNode.id,
     triggerLabel: menuTriggerLabel,
-    actions: [
-      actions
-    ],
+    actions,
     onAction: (action) => typeof action.data === "function" && action.data({
       node: action,
       caller: TREE_ITEM_MAIN_HEADING
@@ -148,13 +151,11 @@ var NavBarStart = ({ activeNode, popoverAnchorId }) => {
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 import React4, { useCallback, useMemo as useMemo2 } from "react";
-import { NavigationAction, Surface, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import { NavigationAction, LayoutAction as LayoutAction2, Surface, SLUG_PATH_SEPARATOR, SLUG_COLLECTION_INDICATOR, 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 { 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 { Path as Path2 } from "@dxos/react-ui-mosaic";
+import { NavTree, getLevel } from "@dxos/react-ui-navtree";
 import { arrayMove } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeFooter.tsx
@@ -169,7 +170,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);
@@ -450,13 +451,26 @@ var NavTreeContainer = ({ root, activeIds, openItemIds, onOpenItemIdsChange, att
     await dispatch({
       action: NavigationAction.OPEN,
       data: {
-        activeParts: {
+        activeParts: node.data?.comments ? {
+          main: [
+            node.id
+          ],
+          complementary: [
+            `${node.id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
+          ]
+        } : {
           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();
@@ -666,35 +680,7 @@ var NavTreeContainer = ({ root, activeIds, openItemIds, onOpenItemIdsChange, att
     onOpenItemIdsChange,
     openItemIds
   ]);
-  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, {
+  return /* @__PURE__ */ React4.createElement(ElevationProvider, {
     elevation: "chrome"
   }, /* @__PURE__ */ React4.createElement("div", {
     role: "none",
@@ -711,17 +697,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
-  })), /* @__PURE__ */ React4.createElement(NavTreeFooter, null))));
+    onDragEnd: handleDragEnd,
+    popoverAnchorId,
+    renderPresence,
+    resolveItemLevel,
+    loadDescendents
+  })), /* @__PURE__ */ React4.createElement(NavTreeFooter, null)));
 };
 
 // packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
@@ -750,7 +736,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 mx4 } from "@dxos/react-ui-theme";
+import { focusRing, mx as mx3 } from "@dxos/react-ui-theme";
 import { hexToFallback } from "@dxos/util";
 var INTERNAL = "https://avatars.githubusercontent.com/u/57182821";
 var HaloButton = (props) => {
@@ -758,7 +744,7 @@ var HaloButton = (props) => {
   const fallbackValue = hexToFallback(identityKey ?? "0");
   const { swarm: connectionState } = useNetworkStatus();
   return /* @__PURE__ */ React5.createElement("button", {
-    className: mx4(focusRing, "rounded grid place-items-center"),
+    className: mx3(focusRing, "rounded grid place-items-center"),
     onClick
   }, /* @__PURE__ */ React5.createElement(Avatar.Root, {
     size,
@@ -795,7 +781,7 @@ var NotchStart = () => {
 // packages/plugins/plugin-navtree/src/components/CommandsTrigger.tsx
 import { MagnifyingGlass } from "@phosphor-icons/react";
 import React7 from "react";
-import { LayoutAction as LayoutAction2, useIntent } from "@dxos/app-framework";
+import { LayoutAction as LayoutAction3, 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 = () => {
@@ -804,7 +790,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: LayoutAction2.SET_LAYOUT,
+      action: LayoutAction3.SET_LAYOUT,
       data: {
         element: "dialog",
         component: `${NAVTREE_PLUGIN}/Commands`,
@@ -1018,7 +1004,7 @@ var NavTreePlugin = () => {
                   id: "dxos.org/plugin/navtree/open-commands",
                   data: async () => {
                     await intentPlugin?.provides.intent.dispatch({
-                      action: LayoutAction3.SET_LAYOUT,
+                      action: LayoutAction4.SET_LAYOUT,
                       data: {
                         element: "dialog",
                         component: `${NAVTREE_PLUGIN}/Commands`,
@@ -1033,7 +1019,8 @@ var NavTreePlugin = () => {
                         ns: NAVTREE_PLUGIN
                       }
                     ],
-                    icon: "ph--magnifying-glass--regular",
+                    icon: (props) => /* @__PURE__ */ React8.createElement(MagnifyingGlass2, props),
+                    iconSymbol: "ph--magnifying-glass--regular",
                     keyBinding: {
                       macos: "meta+k",
                       windows: "ctrl+k"