@dxos/plugin-navtree 0.7.5-main.9d2a38b → 0.7.5-main.e94eead

package/src/components/NavTree.tsx

@@ -2,130 +2,40 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, useCallback, useEffect, type FC } from 'react';
+import React, { useMemo } from 'react';
 
-import { isAction, type Node } from '@dxos/app-graph';
-import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
-import { Tree, type TreeProps } from '@dxos/react-ui-list';
-import { type MaybePromise } from '@dxos/util';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
 
-import { NavTreeItemAction } from './NavTreeItemAction';
-import { NAVTREE_PLUGIN } from '../meta';
-import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
+import { L0Menu } from './L0Menu';
+import { L1Panels } from './L1Panels';
+import { useNavTreeContext } from './NavTreeContext';
+import { type NavTreeProps } from './types';
+import { useLoadDescendents } from '../hooks';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Omit<
-  TreeProps<NavTreeItemGraphNode>,
-  'draggable' | 'gridTemplateColumns' | 'renderColumns'
-> &
-  Pick<NavTreeColumnsProps, 'getActions' | 'loadDescendents' | 'renderItemEnd' | 'popoverAnchorId'>;
-
-export const NavTree = ({ getActions, loadDescendents, renderItemEnd, popoverAnchorId, ...props }: NavTreeProps) => {
-  const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItemGraphNode>['renderColumns']>>(
-    ({ item, path, open }) => {
-      return (
-        <NavTreeColumns
-          path={path}
-          node={item}
-          getActions={getActions}
-          open={open}
-          loadDescendents={loadDescendents}
-          renderItemEnd={renderItemEnd}
-          popoverAnchorId={popoverAnchorId}
-        />
-      );
-    },
-    [renderItemEnd, popoverAnchorId, loadDescendents],
-  );
-
-  return (
-    <Tree
-      {...props}
-      draggable
-      gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-      renderColumns={renderColumns}
-    />
+export const NavTree = ({ id, root }: NavTreeProps) => {
+  const { tab, getItems, onBack } = useNavTreeContext();
+  const topLevelActions = getItems(root, 'item').toSorted((a, b) => byPosition(a.properties, b.properties));
+  const topLevelCollections = getItems(root, 'collection');
+  const topLevelWorkspaces = getItems(root, 'workspace');
+  const topLevelNavigation = getItems(root, 'navigation');
+  const l0Items = useMemo(
+    () => [...topLevelActions, ...topLevelCollections, ...topLevelWorkspaces, ...topLevelNavigation],
+    [topLevelActions, topLevelCollections, topLevelWorkspaces, topLevelNavigation],
   );
-};
-
-type NavTreeColumnsProps = {
-  path: string[];
-  node: Node;
-  getActions: (node: Node) => FlattenedActions;
-  open: boolean;
-  loadDescendents?: (node: Node) => MaybePromise<void>;
-  renderItemEnd?: FC<{ node: Node; open: boolean }>;
-  popoverAnchorId?: string;
-};
-
-const NavTreeColumns = ({
-  path,
-  node,
-  getActions,
-  open,
-  loadDescendents,
-  renderItemEnd: ItemEnd,
-  popoverAnchorId,
-}: NavTreeColumnsProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  const level = path.length - 2;
-
-  const { actions: _actions, groupedActions } = getActions(node);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
-    a.properties?.disposition === 'toolbar' ? -1 : 1,
-  );
-
-  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : _actions)
-    .flatMap((action) => (isAction(action) ? [action] : []))
-    .filter((action) => !action.properties?.hidden);
-
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${node.id}` ? Popover.Anchor : Fragment;
+  const pinnedItems = getItems(root, 'pin-end').toSorted((a, b) => byPosition(a.properties, b.properties));
+  const topLevelItems = useMemo(() => [...l0Items, ...pinnedItems], [l0Items, pinnedItems]);
 
-  // TODO(thure): Ideally this should not be necessary.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      void loadDescendents?.(node);
-      if (primaryAction && !isAction(primaryAction)) {
-        void loadDescendents?.(primaryAction);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [primaryAction]);
+  useLoadDescendents(root);
+  const path = useMemo(() => [id], [id]);
 
   return (
-    <>
-      {primaryAction?.properties?.disposition === 'toolbar' ? (
-        <NavTreeItemAction
-          testId={primaryAction.properties?.testId}
-          label={toLocalizedString(primaryAction.properties?.label, t)}
-          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
-          parent={node}
-          monolithic={isAction(primaryAction)}
-          menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
-          menuType={primaryAction.properties?.menuType}
-          caller={NAV_TREE_ITEM}
-        />
-      ) : (
-        <Treegrid.Cell />
-      )}
-      <ActionRoot>
-        {actions.length > 0 ? (
-          <NavTreeItemAction
-            testId={`navtree.treeItem.actionsLevel${level}`}
-            label={t('tree item actions label')}
-            icon='ph--dots-three-vertical--regular'
-            parent={node}
-            menuActions={actions}
-            menuType='dropdown'
-            caller={NAV_TREE_ITEM}
-          />
-        ) : (
-          <Treegrid.Cell />
-        )}
-      </ActionRoot>
-      {ItemEnd && <ItemEnd node={node} open={open} />}
-    </>
+    // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
+    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+      <L0Menu topLevelItems={l0Items} pinnedItems={pinnedItems} path={path} parent={root} />
+      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} />
+    </Tabs.Root>
   );
 };

package/src/components/NavTreeContainer.tsx

@@ -5,19 +5,28 @@
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { untracked } from '@preact/signals-core';
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useMemo } from 'react';
 
-import { createIntent, LayoutAction, NavigationAction, useIntentDispatcher, Surface } from '@dxos/app-framework';
+import {
+  createIntent,
+  LayoutAction,
+  Surface,
+  useAppGraph,
+  useCapability,
+  useIntentDispatcher,
+  useLayout,
+} from '@dxos/app-framework';
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
-import { useGraph } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { useMediaQuery, useSidebars } from '@dxos/react-ui';
+import { useMediaQuery } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
 
-import { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
-import { NAVTREE_PLUGIN } from '../meta';
+import { NAV_TREE_ITEM, NavTree } from './NavTree';
+import { NavTreeContext } from './NavTreeContext';
+import { type NavTreeContextValue } from './types';
+import { NavTreeCapabilities } from '../capabilities';
 import { type NavTreeItemGraphNode } from '../types';
 import {
   expandActions,
@@ -26,6 +35,7 @@ import {
   getChildren,
   getParent,
   resolveMigrationOperation,
+  expandChildrenAndActions,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
@@ -37,24 +47,29 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
-} & Pick<NavTreeProps, 'isOpen' | 'isCurrent' | 'onOpenChange'>;
+  topbar?: boolean;
+} & Pick<NavTreeContextValue, 'tab'>;
 
-export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }: NavTreeContainerProps) => {
-  const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
+export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeContainerProps) => {
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useGraph();
+  const { graph } = useAppGraph();
+  const layout = useLayout();
+  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
   const getItems = useCallback(
-    (node?: Node) => {
+    (node?: Node, disposition?: string) => {
       return graph.nodes(node ?? graph.root, {
         filter: (node): node is Node => {
           return untracked(() => {
-            const action = isActionLike(node);
-            const disposition = node.properties.disposition;
-            return !action || (action && disposition === 'item');
+            const action = isAction(node);
+            if (!disposition) {
+              return !action || node.properties.disposition === 'item';
+            }
+
+            return node.properties.disposition === disposition;
           });
         },
       });
@@ -96,6 +111,33 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
     [graph],
   );
 
+  const onOpenChange = useCallback(
+    ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
+      // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
+      setItem(path, 'open', open);
+
+      if (graph) {
+        const node = graph.findNode(id);
+        return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
+      }
+    },
+    [graph],
+  );
+
+  const onTabChange = useCallback(
+    async (node: NavTreeItemGraphNode) => {
+      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: node.id }));
+      // Open the first item if the workspace is empty.
+      if (layout.active.length === 0) {
+        const [item] = getItems(node).filter((node) => !isActionLike(node));
+        if (item && item.data) {
+          await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
+        }
+      }
+    },
+    [dispatch, layout],
+  );
+
   const canDrop = useCallback((source: TreeData, target: TreeData) => {
     const sourceNode = source.item as Node;
     const targetNode = target.item as Node;
@@ -123,11 +165,19 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
 
       const current = isCurrent(path, node);
       if (!current) {
-        void dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [node.id] } }));
+        void dispatch(
+          createIntent(LayoutAction.Open, {
+            part: 'main',
+            subject: [node.id],
+            options: { key: node.properties.key },
+          }),
+        );
       } else if (option) {
-        void dispatch(createIntent(NavigationAction.Close, { activeParts: { main: [node.id] } }));
+        void dispatch(
+          createIntent(LayoutAction.Close, { part: 'main', subject: [node.id], options: { state: false } }),
+        );
       } else {
-        void dispatch(createIntent(LayoutAction.ScrollIntoView, { id: node.id }));
+        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
       }
 
       const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
@@ -136,10 +186,15 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
       }
 
       if (!isLg) {
-        closeNavigationSidebar();
+        void dispatch(createIntent(LayoutAction.UpdateSidebar, { part: 'sidebar', options: { state: 'closed' } }));
       }
     },
-    [graph, dispatch, isCurrent, isLg, closeNavigationSidebar],
+    [graph, dispatch, isCurrent, isLg],
+  );
+
+  const onBack = useCallback(
+    () => dispatch(createIntent(LayoutAction.RevertWorkspace, { part: 'workspace', options: { revert: true } })),
+    [dispatch],
   );
 
   // TODO(wittjosiah): Factor out hook.
@@ -201,20 +256,46 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
     });
   }, [graph]);
 
-  // TODO(thure): What gives this an inline `overflow: initial`?
+  const navTreeContextValue = useMemo(
+    () => ({
+      tab,
+      onTabChange,
+      onBack,
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      topbar,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      onSelect: handleSelect,
+    }),
+    [
+      tab,
+      onTabChange,
+      onBack,
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      topbar,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      handleSelect,
+    ],
+  );
+
   return (
-    <NavTree
-      id={graph.root.id}
-      getActions={getActions}
-      getItems={getItems}
-      getProps={getProps}
-      isCurrent={isCurrent}
-      loadDescendents={loadDescendents}
-      renderItemEnd={renderItemEnd}
-      popoverAnchorId={popoverAnchorId}
-      canDrop={canDrop}
-      onSelect={handleSelect}
-      {...props}
-    />
+    <NavTreeContext.Provider value={navTreeContextValue}>
+      <NavTree root={graph.root} id={graph.root.id} />
+    </NavTreeContext.Provider>
   );
 });

package/src/components/NavTreeContext.tsx

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+
+import { type NavTreeContextValue } from './types';
+
+export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
+
+export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('NavTreeContext not found'));

package/src/components/NavTreeItemAction.tsx

@@ -24,11 +24,8 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
 const fallbackIcon = 'ph--placeholder--regular';
 
 const actionButtonProps = {
-  iconOnly: true,
   size: 4 as const,
-  variant: 'ghost' as const,
   density: 'fine' as const,
-  classNames: mx('shrink-0 !pli-2 pointer-fine:!pli-1', hoverableControlItem, hoverableOpenControlItem),
 };
 
 export const NavTreeItemActionDropdownMenu = ({
@@ -46,7 +43,10 @@ export const NavTreeItemActionDropdownMenu = ({
         <DropdownMenu.Trigger asChild>
           <IconButton
             {...actionButtonProps}
+            classNames={mx('shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem)}
+            variant='ghost'
             icon={icon ?? fallbackIcon}
+            iconOnly
             label={toLocalizedString(label, t)}
             data-testid={testId}
             suppressNextTooltip={suppressNextTooltip}
@@ -59,14 +59,22 @@ export const NavTreeItemActionDropdownMenu = ({
 
 export const NavTreeItemMonolithicAction = ({
   parent,
-  properties: { disabled, caller, testId, icon } = { label: 'never' },
+  properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
   data: invoke,
   baseLabel,
 }: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
   return (
     <IconButton
       {...actionButtonProps}
+      variant={variant}
+      classNames={mx(
+        'shrink-0',
+        hoverableControlItem,
+        hoverableOpenControlItem,
+        iconOnly ? 'pli-2 pointer-fine:pli-1' : 'p-2 pointer-fine:p-2 mie-1',
+      )}
       icon={icon ?? fallbackIcon}
+      iconOnly={iconOnly}
       label={baseLabel}
       disabled={disabled}
       onClick={(event) => {

package/src/components/NavTreeItemColumns.tsx

@@ -0,0 +1,71 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { Fragment, memo } from 'react';
+
+import { isAction } from '@dxos/app-graph';
+import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+
+import { NAV_TREE_ITEM } from './NavTree';
+import { useNavTreeContext } from './NavTreeContext';
+import { NavTreeItemAction } from './NavTreeItemAction';
+import type { NavTreeItemColumnsProps } from './types';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+
+export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+
+  const level = path.length - 2;
+
+  const { actions: _actions, groupedActions } = getActions(item);
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
+    a.properties?.disposition === 'toolbar' ? -1 : 1,
+  );
+
+  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : _actions)
+    .flatMap((action) => (isAction(action) ? [action] : []))
+    .filter((action) => !action.properties?.hidden);
+
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+
+  useLoadDescendents(item);
+  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
+
+  return (
+    <div role='none' className='contents app-no-drag'>
+      {primaryAction?.properties?.disposition === 'toolbar' && !primaryAction?.properties?.disabled ? (
+        <NavTreeItemAction
+          testId={primaryAction.properties?.testId}
+          label={toLocalizedString(primaryAction.properties?.label, t)}
+          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
+          parent={item}
+          monolithic={isAction(primaryAction)}
+          menuActions={isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction.id]}
+          menuType={primaryAction.properties?.menuType}
+          caller={NAV_TREE_ITEM}
+        />
+      ) : (
+        <Treegrid.Cell />
+      )}
+      <ActionRoot>
+        {actions.length > 0 ? (
+          <NavTreeItemAction
+            testId={`navtree.treeItem.actionsLevel${level}`}
+            label={t('tree item actions label')}
+            icon='ph--dots-three-vertical--regular'
+            parent={item}
+            menuActions={actions}
+            menuType='dropdown'
+            caller={NAV_TREE_ITEM}
+          />
+        ) : (
+          <Treegrid.Cell />
+        )}
+      </ActionRoot>
+      {ItemEnd && <ItemEnd node={item} open={open} />}
+    </div>
+  );
+});

package/src/components/NotchStart.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { createIntent, useIntentDispatcher, useCapabilities } from '@dxos/app-framework';
+import { createIntent, useCapabilities, useIntentDispatcher } from '@dxos/app-framework';
 import { ClientAction } from '@dxos/plugin-client/types';
 import { ObservabilityCapabilities } from '@dxos/plugin-observability';
 import { useIdentity } from '@dxos/react-client/halo';
@@ -19,7 +19,7 @@ export const NotchStart = () => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   return (
     <HaloButton
-      size={8}
+      size={12}
       identityKey={identity?.identityKey.toHex()}
       hue={identity?.profile?.data?.hue}
       emoji={identity?.profile?.data?.emoji}

package/src/components/index.ts

@@ -6,5 +6,7 @@ export * from './CommandsDialog';
 export * from './CommandsTrigger';
 export * from './NavTree';
 export * from './NavTreeContainer';
+export * from './NavTreeContext';
 export * from './NavTreeDocumentTitle';
 export * from './NotchStart';
+export * from './types';

package/src/components/types.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type { FC } from 'react';
+
+import type { Node } from '@dxos/app-graph';
+import type { TreeProps } from '@dxos/react-ui-list';
+import type { MaybePromise } from '@dxos/util';
+
+import { type L1PanelProps } from './L1Panels';
+import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
+
+export type NavTreeItemColumnsProps = {
+  path: string[];
+  item: Node;
+  open: boolean;
+};
+
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
+
+export type NavTreeContextValue = Pick<
+  TreeProps<NavTreeItemGraphNode>,
+  'getProps' | 'isCurrent' | 'isOpen' | 'onOpenChange' | 'canDrop' | 'onSelect'
+> &
+  Pick<L1PanelProps, 'onBack'> & {
+    tab: string;
+    onTabChange?: (node: NavTreeItemGraphNode) => void;
+    getItems: (node?: NavTreeItemGraphNode, disposition?: string) => NavTreeItemGraphNode[];
+    getActions: (node: Node) => FlattenedActions;
+    loadDescendents?: (node: Node) => MaybePromise<void>;
+    renderItemEnd?: FC<{ node: Node; open: boolean }>;
+    popoverAnchorId?: string;
+    topbar?: boolean;
+  };

package/src/hooks.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { type Node } from '@dxos/app-graph';
+
+import { useNavTreeContext } from './components';
+
+export const useLoadDescendents = (root?: Node) => {
+  const { loadDescendents } = useNavTreeContext();
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (root) {
+        void loadDescendents?.(root);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [root]);
+};

package/src/stories/Graph.stories.tsx

@@ -15,10 +15,10 @@ import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { create, type ReactiveObject } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { isTreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
-import { Path } from '@dxos/react-ui-mosaic';
+import { Path } from '@dxos/react-ui-list';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { NavTree } from '../components';
+import { StorybookNavTree } from './StorybookNavTree';
 import { getActions, getChildren } from '../util';
 
 faker.seed(3);
@@ -53,9 +53,9 @@ const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }
 
 export const Default = {};
 
-const meta: Meta<typeof NavTree> = {
+const meta: Meta<typeof StorybookNavTree> = {
   title: 'plugins/plugin-navtree/Graph',
-  component: NavTree,
+  component: StorybookNavTree,
   decorators: [withTheme, withLayout({ tooltips: true })],
   render: (args) => {
     useEffect(() => {
@@ -78,9 +78,10 @@ const meta: Meta<typeof NavTree> = {
       });
     }, []);
 
-    return <NavTree {...args} />;
+    return <StorybookNavTree {...args} />;
   },
   args: {
+    root: graph.root,
     id: graph.root.id,
     getActions: (node: Node) => getActions(graph, node),
     getItems: (node?: Node) => graph.nodes(node ?? graph.root),