@dxos/plugin-navtree 0.6.13 → 0.6.14-main.7bd9c89

package/dist/types/src/components/CommandsDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandsDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandsDialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAcjD,eAAO,MAAM,qBAAqB,0BAA2B;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,sBA8FjF,CAAC"}
+{"version":3,"file":"CommandsDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandsDialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAcjD,eAAO,MAAM,qBAAqB,0BAA2B;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,sBA6FjF,CAAC"}

package/dist/types/src/components/HaloButton.stories.d.ts

@@ -1,12 +1,8 @@
 import '@dxos-theme';
+import { type Meta } from '@storybook/react';
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: (props: import("./HaloButton").HaloButtonProps) => React.JSX.Element;
-    actions: {
-        argTypesRegex: string;
-    };
-};
-export default _default;
-export declare const Normal: (props: any) => React.JSX.Element;
+import { HaloButton } from './HaloButton';
+export declare const Default: (props: any) => React.JSX.Element;
+declare const meta: Meta<typeof HaloButton>;
+export default meta;
 //# sourceMappingURL=HaloButton.stories.d.ts.map

package/dist/types/src/components/HaloButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HaloButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/HaloButton.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;AAI1B,wBAIE;AAEF,eAAO,MAAM,MAAM,UAAW,GAAG,sBAEhC,CAAC"}
+{"version":3,"file":"HaloButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/HaloButton.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,eAAO,MAAM,OAAO,UAAW,GAAG,sBAEjC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/src/components/NavBarStart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavBarStart.d.ts","sourceRoot":"","sources":["../../../../src/components/NavBarStart.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAQtD,eAAO,MAAM,WAAW,oCAAqC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAA;CAAE,sBAgC1G,CAAC"}
+{"version":3,"file":"NavBarStart.d.ts","sourceRoot":"","sources":["../../../../src/components/NavBarStart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAQtD,eAAO,MAAM,WAAW,oCAAqC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,CAAA;CAAE,sBA+B1G,CAAC"}

package/dist/types/src/components/NavTreeContainer.d.ts

@@ -6,7 +6,7 @@ export declare const NavTreeContainer: ({ root, activeIds, openItemIds, onOpenIt
     activeIds: Set<string>;
     openItemIds: Record<string, true>;
     onOpenItemIdsChange: (nextOpenItemIds: Record<string, true>) => void;
-    attended: Set<string>;
+    attended: string[];
     popoverAnchorId?: string;
 }) => React.JSX.Element;
 //# sourceMappingURL=NavTreeContainer.d.ts.map

package/dist/types/src/components/NavTreeContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavTreeContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/NavTreeContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+C,MAAM,OAAO,CAAC;AA0BpE,OAAO,EAML,KAAK,oBAAoB,EAG1B,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,SAAS,wBAAwB,CAAC;AAM/C,eAAO,MAAM,gBAAgB,sFAO1B;IACD,IAAI,EAAE,oBAAoB,CAAC;IAC3B,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,mBAAmB,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;IACrE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,sBA2TA,CAAC"}
+{"version":3,"file":"NavTreeContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/NavTreeContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAqBpE,OAAO,EAQL,KAAK,oBAAoB,EAC1B,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,SAAS,wBAAwB,CAAC;AAM/C,eAAO,MAAM,gBAAgB,sFAO1B;IACD,IAAI,EAAE,oBAAoB,CAAC;IAC3B,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,mBAAmB,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;IAErE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,sBA6UA,CAAC"}

package/dist/types/src/experimental/Tree.stories.d.ts

@@ -1,12 +1,8 @@
 import '@dxos-theme';
+import { type Meta } from '@storybook/react';
 import { type JSX } from 'react';
-import { type TreeProps } from './Tree';
-declare const _default: {
-    title: string;
-    component: ({ className, showRoot, ...props }: TreeProps) => JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
-};
-export default _default;
 export declare const Default: () => JSX.Element;
 export declare const Visitor: () => JSX.Element;
+declare const meta: Meta;
+export default meta;
 //# sourceMappingURL=Tree.stories.d.ts.map

package/dist/types/src/experimental/Tree.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../src/experimental/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAc,EAAE,KAAK,GAAG,EAA+C,MAAM,OAAO,CAAC;AAMrF,OAAO,EAAyC,KAAK,SAAS,EAAuB,MAAM,QAAQ,CAAC;;;;;;AAIpG,wBAIE;AA2FF,eAAO,MAAM,OAAO,mBAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,mBAenB,CAAC"}
+{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../src/experimental/Tree.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAc,EAAE,KAAK,GAAG,EAA+C,MAAM,OAAO,CAAC;AAmGrF,eAAO,MAAM,OAAO,mBAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,mBAenB,CAAC;AAmGF,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/src/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,4BAA4B,CAAC;AAGxD,eAAO,MAAM,WAAW,eAAe,CAAC;;;;AAExC,wBAEE"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,4BAA4B,CAAC;AAGxD,eAAO,MAAM,WAAW,eAAe,CAAC;;;;AAExC,wBAEuB"}

package/dist/types/src/stories/Graph.stories.d.ts

@@ -1,14 +1,11 @@
 import '@dxos-theme';
+import { type Meta } from '@storybook/react';
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: ({ id, items, current, attended, open, type, popoverAnchorId, onNavigate, onItemOpenChange, renderPresence, onOver, onDrop, onMove, onDragEnd, resolveItemLevel, indentation, loadDescendents, classNames, }: import("@dxos/react-ui-navtree").NavTreeProps) => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
-};
-export default _default;
 export declare const Default: {
     render: ({ debug }: {
         debug?: boolean;
     }) => React.JSX.Element;
 };
+declare const meta: Meta;
+export default meta;
 //# sourceMappingURL=Graph.stories.d.ts.map

package/dist/types/src/stories/Graph.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Graph.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Graph.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAA4B,MAAM,OAAO,CAAC;;;;;;AA+HjD,wBAIE;AAEF,eAAO,MAAM,OAAO;wBACE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE;CAMxC,CAAC"}
+{"version":3,"file":"Graph.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Graph.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAA4B,MAAM,OAAO,CAAC;AA+HjD,eAAO,MAAM,OAAO;wBACE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE;CAMxC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.6.13",
+  "version": "0.6.14-main.7bd9c89",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,25 +31,26 @@
   "dependencies": {
     "@preact/signals-core": "^1.6.0",
     "date-fns": "^3.3.1",
-    "@dxos/app-graph": "0.6.13",
-    "@dxos/app-framework": "0.6.13",
-    "@dxos/debug": "0.6.13",
-    "@dxos/async": "0.6.13",
-    "@dxos/echo-schema": "0.6.13",
-    "@dxos/keyboard": "0.6.13",
-    "@dxos/local-storage": "0.6.13",
-    "@dxos/log": "0.6.13",
-    "@dxos/plugin-client": "0.6.13",
-    "@dxos/plugin-graph": "0.6.13",
-    "@dxos/plugin-observability": "0.6.13",
-    "@dxos/plugin-theme": "0.6.13",
-    "@dxos/protocols": "0.6.13",
-    "@dxos/react-ui-deck": "0.6.13",
-    "@dxos/react-ui-mosaic": "0.6.13",
-    "@dxos/react-client": "0.6.13",
-    "@dxos/react-ui-navtree": "0.6.13",
-    "@dxos/util": "0.6.13",
-    "@dxos/react-ui-searchlist": "0.6.13"
+    "@dxos/app-graph": "0.6.14-main.7bd9c89",
+    "@dxos/async": "0.6.14-main.7bd9c89",
+    "@dxos/app-framework": "0.6.14-main.7bd9c89",
+    "@dxos/debug": "0.6.14-main.7bd9c89",
+    "@dxos/echo-schema": "0.6.14-main.7bd9c89",
+    "@dxos/keyboard": "0.6.14-main.7bd9c89",
+    "@dxos/log": "0.6.14-main.7bd9c89",
+    "@dxos/local-storage": "0.6.14-main.7bd9c89",
+    "@dxos/plugin-client": "0.6.14-main.7bd9c89",
+    "@dxos/plugin-graph": "0.6.14-main.7bd9c89",
+    "@dxos/plugin-theme": "0.6.14-main.7bd9c89",
+    "@dxos/protocols": "0.6.14-main.7bd9c89",
+    "@dxos/plugin-observability": "0.6.14-main.7bd9c89",
+    "@dxos/react-client": "0.6.14-main.7bd9c89",
+    "@dxos/react-ui-deck": "0.6.14-main.7bd9c89",
+    "@dxos/react-ui-list": "0.6.14-main.7bd9c89",
+    "@dxos/react-ui-mosaic": "0.6.14-main.7bd9c89",
+    "@dxos/react-ui-searchlist": "0.6.14-main.7bd9c89",
+    "@dxos/react-ui-navtree": "0.6.14-main.7bd9c89",
+    "@dxos/util": "0.6.14-main.7bd9c89"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -57,19 +58,19 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/echo-signals": "0.6.13",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13",
-    "@dxos/random": "0.6.13",
-    "@dxos/storybook-utils": "0.6.13"
+    "vite": "5.4.7",
+    "@dxos/echo-signals": "0.6.14-main.7bd9c89",
+    "@dxos/random": "0.6.14-main.7bd9c89",
+    "@dxos/react-ui": "0.6.14-main.7bd9c89",
+    "@dxos/storybook-utils": "0.6.14-main.7bd9c89",
+    "@dxos/react-ui-theme": "0.6.14-main.7bd9c89"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.14-main.7bd9c89",
+    "@dxos/react-ui-theme": "0.6.14-main.7bd9c89"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { MagnifyingGlass, type IconProps } from '@phosphor-icons/react';
 import React from 'react';
 
 import {
@@ -155,7 +154,7 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
                     activeIds={data.activeIds as Set<string>}
                     openItemIds={state.values.openItemIds}
                     onOpenItemIdsChange={handleOpenItemIdsChange}
-                    attended={data.attended as Set<string>}
+                    attended={data.attended as string[]}
                     popoverAnchorId={data.popoverAnchorId as string}
                   />
                 );
@@ -243,8 +242,7 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
                   },
                   properties: {
                     label: ['open commands label', { ns: NAVTREE_PLUGIN }],
-                    icon: (props: IconProps) => <MagnifyingGlass {...props} />,
-                    iconSymbol: 'ph--magnifying-glass--regular',
+                    icon: 'ph--magnifying-glass--regular',
                     keyBinding: {
                       macos: 'meta+k',
                       windows: 'ctrl+k',

package/src/components/CommandsDialog.tsx

@@ -2,14 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DotOutline } from '@phosphor-icons/react';
 import React, { useMemo, useState } from 'react';
 
 import { useIntentDispatcher, LayoutAction } from '@dxos/app-framework';
 import { type ActionLike, 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';
@@ -70,7 +69,6 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
               typeof action.properties.keyBinding === 'string'
                 ? action.properties.keyBinding
                 : action.properties.keyBinding?.[getHostPlatform()];
-            const Icon = action.properties.icon ?? DotOutline;
             return (
               <SearchList.Item
                 value={label}
@@ -95,7 +93,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                 disabled={action.properties.disabled}
                 {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
               >
-                <Icon size={4} className={mx(!action.properties.icon && 'invisible')} />
+                <Icon icon={action.properties.icon} size={4} />
                 <span className='grow truncate'>{label}</span>
                 {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
               </SearchList.Item>

package/src/components/HaloButton.stories.tsx

@@ -4,16 +4,18 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React from 'react';
 
 import { HaloButton } from './HaloButton';
 
-export default {
-  title: 'plugin-navtree/HaloButton',
-  component: HaloButton,
-  actions: { argTypesRegex: '^on.*' },
+export const Default = (props: any) => {
+  return <HaloButton {...props} />;
 };
 
-export const Normal = (props: any) => {
-  return <HaloButton {...props} />;
+const meta: Meta<typeof HaloButton> = {
+  title: 'plugins/plugin-navtree/HaloButton',
+  component: HaloButton,
 };
+
+export default meta;

package/src/components/NavBarStart.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DotsThreeVertical } from '@phosphor-icons/react';
 import React, { Fragment } from 'react';
 
 import { getGraph, type Node } from '@dxos/app-graph';
@@ -22,7 +21,6 @@ export const NavBarStart = ({ activeNode, popoverAnchorId }: { activeNode: Node;
       ? Popover.Anchor
       : Fragment;
 
-  const Icon = activeNode.properties?.icon ?? DotsThreeVertical;
   const graph = getGraph(activeNode);
   const actions = graph.actions(activeNode);
   const label = toLocalizedString(activeNode.properties?.label, t);
@@ -33,10 +31,10 @@ export const NavBarStart = ({ activeNode, popoverAnchorId }: { activeNode: Node;
     <>
       <ActionRoot>
         <PlankHeading.ActionsMenu
-          Icon={Icon}
+          icon={activeNode.properties?.icon ?? 'ph--dots-three-vertical--regular'}
           attendableId={activeNode.id}
           triggerLabel={menuTriggerLabel}
-          actions={actions}
+          actions={[actions]}
           onAction={(action) =>
             typeof action.data === 'function' && action.data({ node: action as Node, caller: TREE_ITEM_MAIN_HEADING })
           }

package/src/components/NavTreeContainer.tsx

@@ -4,26 +4,21 @@
 
 import React, { type ReactNode, useCallback, useMemo } from 'react';
 
-import {
-  NavigationAction,
-  LayoutAction,
-  Surface,
-  SLUG_PATH_SEPARATOR,
-  SLUG_COLLECTION_INDICATOR,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
 import { getGraph, isAction, isActionLike } from '@dxos/app-graph';
 import { ElevationProvider, useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '@dxos/react-ui-mosaic';
+import { List } from '@dxos/react-ui-list';
+import { type MosaicDropEvent, type MosaicMoveEvent, Mosaic, Path } from '@dxos/react-ui-mosaic';
 import {
+  getLevel,
   NavTree,
+  type NavTreeActionsNode,
+  type NavTreeItemMoveDetails,
   type NavTreeItemNode,
   type NavTreeNode,
-  getLevel,
-  type NavTreeActionsNode,
   type NavTreeProps,
-  type NavTreeItemMoveDetails,
 } from '@dxos/react-ui-navtree';
+import { ghostHover, mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { NavTreeFooter } from './NavTreeFooter';
@@ -33,10 +28,10 @@ import {
   expandChildren,
   getChildren,
   getParent,
-  type NavTreeItem,
-  type NavTreeItemGraphNode,
   resolveMigrationOperation,
   treeItemsFromRootNode,
+  type NavTreeItem,
+  type NavTreeItemGraphNode,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
@@ -58,7 +53,8 @@ export const NavTreeContainer = ({
   activeIds: Set<string>;
   openItemIds: Record<string, true>;
   onOpenItemIdsChange: (nextOpenItemIds: Record<string, true>) => void;
-  attended: Set<string>;
+  // TODO(wittjosiah): Use attention context directly?
+  attended: string[];
   popoverAnchorId?: string;
 }) => {
   const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
@@ -66,7 +62,6 @@ export const NavTreeContainer = ({
   const dispatch = useIntentDispatcher();
 
   const graph = useMemo(() => getGraph(root), [root]);
-
   const items = treeItemsFromRootNode(graph, root, openItemIds);
 
   const loadDescendents = useCallback(
@@ -96,19 +91,12 @@ export const NavTreeContainer = ({
     await dispatch({
       action: NavigationAction.OPEN,
       data: {
-        activeParts: node.data?.comments
-          ? {
-              main: [node.id],
-              complementary: [`${node.id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`],
-            }
-          : {
-              main: [node.id],
-            },
+        activeParts: {
+          main: [node.id],
+        },
       },
     });
 
-    await dispatch({ action: LayoutAction.SCROLL_INTO_VIEW, data: { id: node.id } });
-
     const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
     if (isAction(defaultAction)) {
       void (defaultAction.data as () => void)();
@@ -161,7 +149,6 @@ export const NavTreeContainer = ({
     ({ active, over, details }: MosaicMoveEvent<number, NavTreeItemMoveDetails>) => {
       const levelOffset = Math.floor((details?.delta?.x ?? 0) / 16);
       const overPosition = over.position ?? 0;
-
       const nextItems = arrayMove(
         items,
         items.findIndex(({ id }) => id === active.item.id),
@@ -170,9 +157,7 @@ export const NavTreeContainer = ({
 
       const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
       const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
-
       const activeNode = 'node' in active.item ? (active.item as NavTreeItem).node : undefined;
-
       if (!activeNode || !previousItem || !previousItem.path) {
         // console.log('[reject]', !activeNode, !previousItem, !previousItem.path);
         // log.warn('Top-level rearrange before the first item of the NavTree is unsupported at this time.');
@@ -180,11 +165,8 @@ export const NavTreeContainer = ({
       }
 
       const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
-
       const previousLevel = getLevel(previousItem.path);
-
       // console.log('[over]', overLevel, previousLevel, levelOffset);
-
       if (previousLevel === overLevel - 1) {
         if (Path.hasChild(previousItem.id, active.item.id)) {
           // Previous is already parent of Active, rearrange.
@@ -251,9 +233,9 @@ export const NavTreeContainer = ({
       if (Path.first(over.path) !== root.id) {
         return undefined;
       }
+
       const { levelOffset = 0 } = details;
       const overPosition = over.position ?? 0;
-
       const nextItems = arrayMove(
         items,
         items.findIndex(({ id }) => id === active.item.id),
@@ -262,13 +244,11 @@ export const NavTreeContainer = ({
 
       const activeNode = 'node' in active.item ? (active.item as NavTreeItem).node : undefined;
       const activeParentId = Path.parent(active.item.id);
-
       if (!activeNode) {
         return undefined;
       }
 
       const activeParent = getParent(graph, activeNode, (active.item as NavTreeItem).path ?? []);
-
       if (operation === 'rearrange') {
         void activeParent?.properties.onRearrangeChildren?.(
           nextItems.filter(({ id }) => Path.hasChild(activeParentId, id)).map(({ node }) => node.data),
@@ -277,11 +257,8 @@ export const NavTreeContainer = ({
       } else {
         const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
         const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
-
         const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
-
         const previousLevel = getLevel(previousItem.path);
-
         if (operation === 'copy') {
           if (previousLevel === overLevel - 1) {
             void previousItem.node.properties.onCopy?.(activeNode, 0);
@@ -344,35 +321,72 @@ export const NavTreeContainer = ({
     onOpenItemIdsChange({ ...openItemIds });
   }, [onOpenItemIdsChange, openItemIds]);
 
-  return (
-    <ElevationProvider elevation='chrome'>
-      <div
-        role='none'
-        className='bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]'
-      >
-        <Surface role='search-input' limit={1} />
-        {/* TODO(thure): what gives this an inline `overflow: initial`? */}
+  // TODO(burdon): Remove.
+  // Debug list.
+  const debug = false;
+  if (debug) {
+    const getLabel = (item: NavTreeItem) => {
+      const label = item.node?.properties?.label;
+      return typeof label === 'string' ? label : item.id;
+    };
+
+    return (
+      <div className='bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]'>
+        <div className='flex items-center p-2'>Items: {items.length}</div>
         <div role='none' className='!overflow-y-auto'>
-          <NavTree
-            id={root.id}
-            items={items}
-            current={activeIds}
-            attended={attended}
-            type={NODE_TYPE}
-            open={openItemIds}
-            onNavigate={handleNavigate}
-            onItemOpenChange={handleItemOpenChange}
-            onMove={handleMove}
-            onDrop={handleDrop}
-            onDragEnd={handleDragEnd}
-            popoverAnchorId={popoverAnchorId}
-            renderPresence={renderPresence}
-            resolveItemLevel={resolveItemLevel}
-            loadDescendents={loadDescendents}
-          />
+          <List.Root<NavTreeItem> items={items} isItem={() => true}>
+            {({ items }) =>
+              items.map((item) => (
+                <List.Item<NavTreeItem> key={item.id} item={item} classNames={mx('p-2', ghostHover)}>
+                  <List.ItemDragHandle />
+                  <List.ItemTitle classNames='p-2 text-sm' onClick={() => handleNavigate(item)}>
+                    {getLabel(item)}
+                  </List.ItemTitle>
+                  <List.IconButton icon='ph--caret-down--regular' onClick={() => handleItemOpenChange(item, true)} />
+                </List.Item>
+              ))
+            }
+          </List.Root>
         </div>
         <NavTreeFooter />
       </div>
-    </ElevationProvider>
+    );
+  }
+
+  return (
+    <Mosaic.Root>
+      <Mosaic.DragOverlay />
+      <ElevationProvider elevation='chrome'>
+        <div
+          role='none'
+          className='bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]'
+        >
+          <Surface role='search-input' limit={1} />
+
+          {/* TODO(thure): what gives this an inline `overflow: initial`? */}
+          <div role='none' className='!overflow-y-auto'>
+            <NavTree
+              id={root.id}
+              items={items}
+              current={activeIds}
+              attended={attended}
+              type={NODE_TYPE}
+              loadDescendents={loadDescendents}
+              popoverAnchorId={popoverAnchorId}
+              renderPresence={renderPresence}
+              resolveItemLevel={resolveItemLevel}
+              open={openItemIds}
+              onNavigate={handleNavigate}
+              onItemOpenChange={handleItemOpenChange}
+              onMove={handleMove}
+              onDrop={handleDrop}
+              onDragEnd={handleDragEnd}
+            />
+          </div>
+
+          <NavTreeFooter />
+        </div>
+      </ElevationProvider>
+    </Mosaic.Root>
   );
 };

package/src/components/NavTreeFooter.tsx

@@ -35,7 +35,7 @@ const buttonStyles = 'pli-1.5 text-xs font-normal';
 const repo = 'https://github.com/dxos/dxos';
 
 export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
-  const layoutPart = useDefaultValue(props.layoutPart, 'sidebar');
+  const layoutPart = useDefaultValue(props.layoutPart, () => 'sidebar');
   const config = useConfig();
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);

package/src/experimental/Tree.stories.tsx

@@ -5,6 +5,7 @@
 import '@dxos-theme';
 
 import { House, List, Planet, PlusCircle, Sailboat } from '@phosphor-icons/react';
+import { type Meta } from '@storybook/react';
 import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
@@ -15,12 +16,6 @@ import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visi
 
 faker.seed(1234);
 
-export default {
-  title: 'plugin-navtree/Tree',
-  component: Tree,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: modalSurface })],
-};
-
 /**
  * Space:
  * - Space panels are separated from each other to give them more weight than folders.
@@ -47,11 +42,11 @@ const Container = ({ children, sidebar }: PropsWithChildren<{ sidebar: JSX.Eleme
 const data: TreeNodeData[] = [
   {
     id: 'root',
-    title: 'Root',
+    title: 'plugins/Root',
     children: [
       {
         id: faker.string.uuid(),
-        title: 'Personal Space',
+        title: 'plugins/Personal Space',
         color: 'text-green-400',
         Icon: House,
         children: [
@@ -227,3 +222,11 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
     </div>
   );
 };
+
+const meta: Meta = {
+  title: 'plugins/plugin-navtree/Tree',
+  component: Tree,
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: modalSurface })],
+};
+
+export default meta;

package/src/experimental/Tree.tsx

@@ -6,7 +6,7 @@ import { CaretRight, Circle, File, Folder, type Icon, type IconProps, Plus, User
 import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 
 import { type ClassNameValue, type Size } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { getSize, mx } from '@dxos/react-ui-theme';
 
 // TODO(burdon): Rounded border if first/last.
 const styles = {
@@ -29,7 +29,7 @@ export const IconButton = ({
   // TODO(burdon): Density aware.
   return (
     <div className={mx('flex w-6 h-6 items-center justify-center select-none', classNames)} onClick={onClick}>
-      <Icon size={size} className='cursor-pointer' {...props} />
+      <Icon className={mx('cursor-pointer', getSize(size))} {...props} />
     </div>
   );
 };

package/src/meta.ts

@@ -2,6 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type PluginMeta } from '@dxos/app-framework';
+
 export const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';
 
 // TODO(wittjosiah): Factor out.
@@ -9,4 +11,4 @@ export const KEY_BINDING = 'KeyBinding';
 
 export default {
   id: NAVTREE_PLUGIN,
-};
+} satisfies PluginMeta;