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

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":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAcjD,eAAO,MAAM,qBAAqB,0BAA2B;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,sBA6FjF,CAAC"}
+{"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"}

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":"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"}
+{"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"}

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: string[];
+    attended: Set<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;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"}
+{"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"}

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

@@ -1 +1 @@
-{"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"}
+{"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"}

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

@@ -2,7 +2,7 @@ import '@dxos-theme';
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ classNames, id, items, current, attended, open, type, popoverAnchorId, renderPresence, resolveItemLevel, indentation, loadDescendents, onNavigate, onItemOpenChange, onOver, onDrop, onMove, onDragEnd, }: import("@dxos/react-ui-navtree").NavTreeProps) => React.JSX.Element;
+    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;

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;;;qRAuBK,GAAG,CAAC,OAAO;;;AAwGjE,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,KAA4B,MAAM,OAAO,CAAC;;;;;;AA+HjD,wBAIE;AAEF,eAAO,MAAM,OAAO;wBACE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE;CAMxC,CAAC"}

package/package.json

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

package/src/NavTreePlugin.tsx

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

package/src/components/CommandsDialog.tsx

@@ -2,13 +2,14 @@
 // 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, 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';
@@ -69,6 +70,7 @@ 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}
@@ -93,7 +95,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                 disabled={action.properties.disabled}
                 {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
               >
-                <Icon icon={action.properties.icon} size={4} />
+                <Icon size={4} className={mx(!action.properties.icon && 'invisible')} />
                 <span className='grow truncate'>{label}</span>
                 {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
               </SearchList.Item>

package/src/components/NavBarStart.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { DotsThreeVertical } from '@phosphor-icons/react';
 import React, { Fragment } from 'react';
 
 import { getGraph, type Node } from '@dxos/app-graph';
@@ -21,6 +22,7 @@ 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);
@@ -31,10 +33,10 @@ export const NavBarStart = ({ activeNode, popoverAnchorId }: { activeNode: Node;
     <>
       <ActionRoot>
         <PlankHeading.ActionsMenu
-          icon={activeNode.properties?.icon ?? 'ph--dots-three-vertical--regular'}
+          Icon={Icon}
           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,21 +4,26 @@
 
 import React, { type ReactNode, useCallback, useMemo } from 'react';
 
-import { NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import {
+  NavigationAction,
+  LayoutAction,
+  Surface,
+  SLUG_PATH_SEPARATOR,
+  SLUG_COLLECTION_INDICATOR,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
 import { getGraph, isAction, isActionLike } from '@dxos/app-graph';
 import { ElevationProvider, useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { List } from '@dxos/react-ui-list';
-import { type MosaicDropEvent, type MosaicMoveEvent, Mosaic, Path } from '@dxos/react-ui-mosaic';
+import { type MosaicDropEvent, type MosaicMoveEvent, 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';
@@ -28,10 +33,10 @@ import {
   expandChildren,
   getChildren,
   getParent,
-  resolveMigrationOperation,
-  treeItemsFromRootNode,
   type NavTreeItem,
   type NavTreeItemGraphNode,
+  resolveMigrationOperation,
+  treeItemsFromRootNode,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
@@ -53,8 +58,7 @@ export const NavTreeContainer = ({
   activeIds: Set<string>;
   openItemIds: Record<string, true>;
   onOpenItemIdsChange: (nextOpenItemIds: Record<string, true>) => void;
-  // TODO(wittjosiah): Use attention context directly?
-  attended: string[];
+  attended: Set<string>;
   popoverAnchorId?: string;
 }) => {
   const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
@@ -62,6 +66,7 @@ export const NavTreeContainer = ({
   const dispatch = useIntentDispatcher();
 
   const graph = useMemo(() => getGraph(root), [root]);
+
   const items = treeItemsFromRootNode(graph, root, openItemIds);
 
   const loadDescendents = useCallback(
@@ -91,12 +96,19 @@ export const NavTreeContainer = ({
     await dispatch({
       action: NavigationAction.OPEN,
       data: {
-        activeParts: {
-          main: [node.id],
-        },
+        activeParts: node.data?.comments
+          ? {
+              main: [node.id],
+              complementary: [`${node.id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`],
+            }
+          : {
+              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)();
@@ -149,6 +161,7 @@ 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),
@@ -157,7 +170,9 @@ 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.');
@@ -165,8 +180,11 @@ 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.
@@ -233,9 +251,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),
@@ -244,11 +262,13 @@ 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),
@@ -257,8 +277,11 @@ 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);
@@ -321,72 +344,35 @@ export const NavTreeContainer = ({
     onOpenItemIdsChange({ ...openItemIds });
   }, [onOpenItemIdsChange, openItemIds]);
 
-  // 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>
+  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`? */}
         <div role='none' className='!overflow-y-auto'>
-          <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>
+          <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}
+          />
         </div>
         <NavTreeFooter />
       </div>
-    );
-  }
-
-  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>
+    </ElevationProvider>
   );
 };

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.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 { getSize, mx } from '@dxos/react-ui-theme';
+import { 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 className={mx('cursor-pointer', getSize(size))} {...props} />
+      <Icon size={size} className='cursor-pointer' {...props} />
     </div>
   );
 };

package/src/meta.ts

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

package/src/stories/Graph.stories.tsx

@@ -8,7 +8,7 @@ import { batch } from '@preact/signals-core';
 import React, { useMemo, useState } from 'react';
 
 import { Graph } from '@dxos/app-graph';
-import { registerSignalsRuntime } from '@dxos/echo-signals/react';
+import { registerSignalRuntime } from '@dxos/echo-signals/react';
 import { faker } from '@dxos/random';
 import { Treegrid } from '@dxos/react-ui';
 import { Mosaic, Path, type MosaicDropEvent, type MosaicMoveEvent, type MosaicOperation } from '@dxos/react-ui-mosaic';
@@ -19,7 +19,7 @@ import { arrayMove } from '@dxos/util';
 import { type NavTreeItemGraphNode, treeItemsFromRootNode } from '../util';
 
 faker.seed(3);
-registerSignalsRuntime();
+registerSignalRuntime();
 
 const createGraph = () => {
   const graph = new Graph();

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

@@ -1,7 +0,0 @@
-{
-  "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"]
-}