@dxos/plugin-navtree 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/{Sidebar/L0Menu.tsx → L0Menu.tsx}

@@ -7,92 +7,88 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
 import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
 import {
-  type Edge,
   attachClosestEdge,
+  type Edge,
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import React, {
-  forwardRef,
-  type MouseEvent,
-  type PropsWithChildren,
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { type MouseEvent, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
 import { invariant } from '@dxos/invariant';
 import {
-  Icon,
-  IconButton,
-  ListItem,
+  Popover,
   ScrollArea,
-  Tooltip,
   toLocalizedString,
+  Tooltip,
   useMediaQuery,
+  useSidebars,
   useTranslation,
+  ListItem,
+  Icon,
 } from '@dxos/react-ui';
-import { MenuProvider, DropdownMenu, type MenuItem } from '@dxos/react-ui-menu';
 import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove, getFirstTwoRenderableChars } from '@dxos/util';
 
-import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
-import { l0ItemType } from '../../util';
-import { useNavTreeContext } from '../NavTreeContext';
-import { UserAccountAvatar } from '../UserAccountAvatar';
-
-//
-// L0Item
-//
-
-type L0ItemData = {
-  id: L0ItemProps['item']['id'];
-  type: 'l0Item';
-};
+import { useNavTreeContext } from './NavTreeContext';
+import { UserAccountAvatar } from './UserAccountAvatar';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { l0ItemType } from '../util';
 
-type L0ItemRootProps = {
-  item: Node<any>;
-  parent?: Node<any>;
-  path: string[];
-};
+type L0ItemData = { id: L0ItemProps['item']['id']; type: 'l0Item' };
 
-type L0ItemProps = L0ItemRootProps & {
+type L0ItemProps = {
   item: Node<any>;
   parent?: Node<any>;
   path: string[];
   pinned?: boolean;
+  userAccount?: boolean;
   onRearrange?: StackItemRearrangeHandler<L0ItemData>;
 };
 
 const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
-  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
+  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery('lg', { ssr: false });
 
   return useCallback(
     (event: MouseEvent) => {
       switch (type) {
+        case 'tab':
+          // TODO(thure): This dispatch should rightly be in `onTabChange`, but that callback wasn’t reacting to changes
+          //  to its dependencies.
+          void dispatch(
+            createIntent(LayoutAction.UpdateSidebar, {
+              part: 'sidebar',
+              options: {
+                state:
+                  item.id === tab
+                    ? navigationSidebarState === 'expanded'
+                      ? isLg
+                        ? 'collapsed'
+                        : 'closed'
+                      : 'expanded'
+                    : 'expanded',
+              },
+            }),
+          );
+          return onTabChange?.(item);
+        case 'link':
+          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
         case 'action': {
           const {
             data: invoke,
             properties: { caller },
           } = item;
-
           return invoke?.(caller ? { node: parent, caller } : { node: parent });
         }
-
-        case 'tab':
-          return onTabChange?.(item);
-
-        case 'link':
-          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
       }
     },
-    [item, parent, type, tab, isCurrent, onSelect, onTabChange, isLg],
+    [item, type, onSelect, isCurrent, parent, tab, navigationSidebarState, isLg, dispatch],
   );
 };
 
@@ -100,70 +96,28 @@ const l0Breakpoints: Record<string, string> = {
   lg: 'hidden lg:grid',
 };
 
-const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
-  ({ item, parent, path, children }, forwardedRef) => {
-    const { getProps } = useNavTreeContext();
-    const { id, testId } = getProps?.(item, path) ?? {};
-    const type = l0ItemType(item);
-    const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
-
-    const { t } = useTranslation(NAVTREE_PLUGIN);
-    const localizedString = toLocalizedString(item.properties.label, t);
-
-    const handleClick = useL0ItemClick({ item, parent, path: itemPath }, type);
-    const rootProps =
-      type === 'tab'
-        ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
-        : type !== 'collection'
-          ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
-          : { onClick: handleClick };
-
-    const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
-
-    return (
-      <Tooltip.Trigger asChild delayDuration={0} side='right' content={localizedString}>
-        <Root
-          {...(rootProps as any)}
-          data-type={type}
-          className={mx(
-            'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group',
-            l0Breakpoints[item.properties.l0Breakpoint],
-          )}
-          ref={forwardedRef}
-        >
-          {children}
-        </Root>
-      </Tooltip.Trigger>
-    );
-  },
-);
-
-const L0Avator = ({ item }: Pick<L0ItemProps, 'item'>) => {
+const L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }: L0ItemProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
+  const itemElement = useRef<HTMLElement | null>(null);
+  const [closestEdge, setEdge] = useState<Edge | null>(null);
   const type = l0ItemType(item);
-  const hue = item.properties.hue ?? null;
-  const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
+  const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
+  const { getProps, popoverAnchorId } = useNavTreeContext();
+  const { id, testId } = getProps?.(item, path) ?? {};
+  const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
+  const handleClick = useL0ItemClick({ item, path: itemPath, parent }, type);
+  const rootProps =
+    type === 'tab'
+      ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+      : type !== 'collection'
+        ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+        : { onClick: handleClick };
   const localizedString = toLocalizedString(item.properties.label, t);
+  const hue = item.properties.hue ?? null;
   const avatarValue = useMemo(
     () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('').toUpperCase() : []),
     [type, item.properties.label, t],
   );
-
-  return (
-    <span role='img' className='place-self-center text-xl font-light' {...hueFgStyle}>
-      {avatarValue}
-    </span>
-  );
-};
-
-// TODO(burdon): Factor out pinned (non-draggable) items.
-const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const itemElement = useRef<HTMLElement | null>(null);
-  const [closestEdge, setEdge] = useState<Edge | null>(null);
-  const type = l0ItemType(item);
-  const localizedString = toLocalizedString(item.properties.label, t);
-  const hue = item.properties.hue ?? null;
   const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
 
   useLayoutEffect(() => {
@@ -171,7 +125,6 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
     if (!itemElement.current || !onRearrange) {
       return;
     }
-
     return combine(
       draggable({
         element: itemElement.current,
@@ -222,43 +175,80 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
     );
   }, [item, onRearrange]);
 
-  return (
-    <L0ItemRoot ref={itemElement} item={item} parent={parent} path={path}>
-      <div
-        role='none'
-        data-frame={true}
-        className={mx(
-          'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded',
-          // TODO(burdon): Create reusable button/component and/or create var for size.
-          pinned
-            ? 'bg-transparent w-[50px] p-2 group-hover/l0item:bg-groupSurface'
-            : 'bg-groupSurface w-[50px] h-[50px]',
-        )}
-        {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
-      >
-        {(item.properties.icon && <Icon icon={item.properties.icon} size={pinned ? 5 : 6} {...hueFgStyle} />) ||
-          (type === 'tab' && item.properties.disposition !== 'pin-end' && <L0Avator item={item} />)}
-      </div>
+  const l0ItemTrigger = (
+    <Root
+      {...(rootProps as any)}
+      data-type={type}
+      className={mx(
+        'group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag',
+        l0Breakpoints[item.properties.l0Breakpoint],
+      )}
+      ref={itemElement}
+    >
+      {userAccount ? (
+        <UserAccountAvatar
+          userId={item.properties.userId}
+          hue={item.properties.hue}
+          emoji={item.properties.emoji}
+          status={item.properties.status}
+        />
+      ) : (
+        <div
+          role='none'
+          data-frame={true}
+          className={mx(
+            'absolute grid dx-focus-ring-group-indicator transition-colors',
+            type === 'tab' || pinned ? 'rounded' : 'rounded-full',
+            pinned
+              ? 'bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5'
+              : 'bg-groupSurface inset-inline-3 inset-block-2',
+          )}
+          {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
+        >
+          {(item.properties.icon && (
+            <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
+          )) ||
+            (type === 'tab' && item.properties.disposition !== 'pin-end' ? (
+              <span role='img' className='place-self-center text-3xl font-light' {...hueFgStyle}>
+                {avatarValue}
+              </span>
+            ) : (
+              item.properties.icon && (
+                <Icon icon='ph--planet--regular' size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
+              )
+            ))}
+        </div>
+      )}
       <div
         role='none'
-        className='hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+        className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
       />
       <span id={`${item.id}__label`} className='sr-only'>
         {localizedString}
       </span>
       {onRearrange && closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
-    </L0ItemRoot>
+    </Root>
   );
-};
 
-//
-// L0Collection
-//
+  return popoverAnchorId === id ? (
+    <Popover.Anchor asChild>{l0ItemTrigger}</Popover.Anchor>
+  ) : (
+    <Tooltip.Root delayDuration={0}>
+      <Tooltip.Trigger asChild>{l0ItemTrigger}</Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content side='right'>
+          {localizedString}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
 
-const L0Collection = ({ item, path }: L0ItemProps) => {
+const L0Collection = ({ item, path, parent }: L0ItemProps) => {
   const navTreeContext = useNavTreeContext();
   useLoadDescendents(item);
-  const collectionItems = navTreeContext.useItems(item);
+  const collectionItems = navTreeContext.getItems(item);
   const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
   const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
   const handleRearrange = useCallback<StackItemRearrangeHandler<L0ItemData>>(
@@ -276,7 +266,6 @@ const L0Collection = ({ item, path }: L0ItemProps) => {
     },
     [collectionItems, item.properties.onRearrangeChildren],
   );
-
   return (
     <div
       role='group'
@@ -298,61 +287,26 @@ const L0Collection = ({ item, path }: L0ItemProps) => {
   );
 };
 
-//
-// L0Menu
-//
-
-export type L0MenuProps = {
-  menuActions: MenuItem[];
+export const L0Menu = ({
+  topLevelItems,
+  pinnedItems,
+  userAccountItem,
+  parent,
+  path,
+}: {
   topLevelItems: Node<any>[];
   pinnedItems: Node<any>[];
   userAccountItem: Node<any>;
   parent?: Node<any>;
   path: string[];
-};
-
-export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }: L0MenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef(true);
-
+}) => {
   return (
-    <Tabs.Tablist
-      classNames={[
-        'group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg',
-        'grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout',
-        '!is-[--l0-size] bg-baseSurface border-ie border-separator app-drag pbe-[env(safe-area-inset-bottom)]',
-      ]}
-    >
-      <div role='none' className='flex justify-center p-1'>
-        <MenuProvider>
-          <DropdownMenu.Root group={parent} items={menuActions}>
-            <DropdownMenu.Trigger asChild>
-              {/* TODO(wittjosiah): Use L0Item trigger. */}
-              {/* TODO(burdon): Replace with Sigil. */}
-              <IconButton
-                iconOnly
-                icon='ph--dots-three--regular'
-                size={5}
-                label={t('app menu label')}
-                tooltipSide='right'
-                classNames='w-[50px] _bg-primary-500'
-                suppressNextTooltip={suppressNextTooltip}
-                data-testid='spacePlugin.addSpace'
-              />
-            </DropdownMenu.Trigger>
-          </DropdownMenu.Root>
-        </MenuProvider>
-      </div>
-
+    <Tabs.Tablist classNames='group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag  pbe-[env(safe-area-inset-bottom)]'>
       <ScrollArea.Root>
         <ScrollArea.Viewport>
           <div
             role='none'
-            className={mx([
-              'flex flex-col gap-2 pbs-1',
-              '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
-              '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]',
-            ])}
+            className='grid auto-rows-[calc(var(--l0-size)-.5rem)] plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)] [body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
           >
             {topLevelItems.map((item) => {
               if (l0ItemType(item) === 'collection') {
@@ -367,7 +321,6 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
           </ScrollArea.Scrollbar>
         </ScrollArea.Viewport>
       </ScrollArea.Root>
-
       <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
         {pinnedItems
           .filter((item) => l0ItemType(item) !== 'collection')
@@ -375,27 +328,17 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
             <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
           ))}
       </div>
-
       {userAccountItem && (
-        <div role='none' className='grid app-no-drag'>
-          <L0ItemRoot key={userAccountItem.id} item={userAccountItem} parent={parent} path={path}>
-            <UserAccountAvatar
-              userId={userAccountItem.properties.userId}
-              hue={userAccountItem.properties.hue}
-              emoji={userAccountItem.properties.emoji}
-              status={userAccountItem.properties.status}
-              size={11}
-            />
-          </L0ItemRoot>
+        <div role='none' className='grid py-2 app-no-drag'>
+          <L0Item key={userAccountItem.id} item={userAccountItem} parent={parent} path={path} userAccount />
         </div>
       )}
-
       <div
         role='none'
         className='hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]'
         style={{
           background:
-            'linear-gradient(to bottom, var(--dx-sidebarSurface) 0%, var(--dx-sidebarSurface) 70%, transparent 100%)',
+            'linear-gradient(to bottom, var(--dx-baseSurface) 0%, var(--dx-baseSurface) 70%, transparent 100%)',
         }}
       />
     </Tabs.Tablist>

package/src/components/L1Panels.tsx

@@ -0,0 +1,115 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { useLayout } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+import { Button, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Tree } from '@dxos/react-ui-list';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
+
+import { useNavTreeContext } from './NavTreeContext';
+import { NavTreeItemColumns } from './NavTreeItemColumns';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { l0ItemType } from '../util';
+
+export type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string; onBack?: () => void };
+
+const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
+  const layout = useLayout();
+  const navTreeContext = useNavTreeContext();
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  return (
+    <Tabs.Tabpanel
+      key={item.id}
+      value={item.id}
+      classNames={[
+        'absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr] pbs-[env(safe-area-inset-top)]',
+        item.id === currentItemId && 'grid',
+      ]}
+      tabIndex={-1}
+      {...(!layout.sidebarOpen && { inert: 'true' })}
+    >
+      {item.id === currentItemId && (
+        <>
+          <h2 className='flex items-center border-be border-separator app-drag'>
+            <Button
+              variant='ghost'
+              density='fine'
+              classNames={mx(
+                'is-6 pli-0 dx-focus-ring-inset',
+                !item.id.startsWith('!') && 'invisible',
+                hoverableControlItem,
+                hoverableOpenControlItem,
+              )}
+              onClick={onBack}
+            >
+              <Icon icon='ph--caret-left--regular' size={3} />
+            </Button>
+            <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
+            <NavTreeItemColumns path={path} item={item} open />
+          </h2>
+          <div role='none' className='overflow-y-auto'>
+            <Tree
+              {...navTreeContext}
+              id={item.id}
+              root={item}
+              path={path}
+              levelOffset={5}
+              draggable
+              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+              renderColumns={NavTreeItemColumns}
+            />
+          </div>
+        </>
+      )}
+    </Tabs.Tabpanel>
+  );
+};
+
+const L1PanelCollection = ({ item, path, currentItemId }: L1PanelProps) => {
+  const { getItems } = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = getItems(item);
+  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
+  return (
+    <>
+      {collectionItems
+        .filter((item) => l0ItemType(item) === 'tab')
+        .map((item) => (
+          <L1Panel key={item.id} item={item} path={groupPath} currentItemId={currentItemId} />
+        ))}
+    </>
+  );
+};
+
+export const L1Panels = ({
+  topLevelItems,
+  path,
+  currentItemId,
+  onBack,
+}: Pick<L1PanelProps, 'onBack'> & {
+  topLevelItems: Node<any>[];
+  path: string[];
+  currentItemId: string;
+}) => {
+  return (
+    <>
+      {topLevelItems.map((item) => {
+        const type = l0ItemType(item);
+        switch (type) {
+          case 'collection':
+            return <L1PanelCollection key={item.id} item={item} path={path} currentItemId={currentItemId} />;
+          case 'tab':
+            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} onBack={onBack} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

package/src/components/NavTree.stories.tsx

@@ -0,0 +1,107 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { type Meta } from '@storybook/react';
+import React, { useEffect } from 'react';
+
+import { isActionLike, type NodeArg } from '@dxos/app-graph';
+import { create, type ReactiveObject } from '@dxos/live-object';
+import { faker } from '@dxos/random';
+import { isTreeData, type TreeData } from '@dxos/react-ui-list';
+import { Path } from '@dxos/react-ui-list';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { StorybookNavTree } from '../stories/StorybookNavTree';
+import { createTree, updateState } from '../testing';
+
+faker.seed(1234);
+
+const tree = create<NodeArg<any>>(createTree());
+const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
+
+const meta: Meta<typeof StorybookNavTree> = {
+  title: 'plugins/plugin-navtree/NavTree',
+  component: StorybookNavTree,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  render: (args) => {
+    useEffect(() => {
+      return monitorForElements({
+        canMonitor: ({ source }) => isTreeData(source),
+        onDrop: ({ location, source }) => {
+          // Didn't drop on anything.
+          if (!location.current.dropTargets.length) {
+            return;
+          }
+
+          const target = location.current.dropTargets[0];
+          const instruction: Instruction | null = extractInstruction(target.data);
+          if (instruction !== null) {
+            updateState({
+              state: tree,
+              instruction,
+              source: source.data as TreeData,
+              target: target.data as TreeData,
+            });
+          }
+        },
+      });
+    }, []);
+
+    return <StorybookNavTree {...args} />;
+  },
+  args: {
+    id: tree.id,
+    getActions: (arg: NodeArg<any>) => ({
+      actions: arg.nodes?.filter((node) => isActionLike(node)) ?? [],
+      groupedActions: {},
+    }),
+    getItems: (testItem?: any) => {
+      return testItem?.nodes ?? tree.nodes ?? [];
+    },
+    getProps: (testItem: NodeArg<any>) => ({
+      id: testItem.id,
+      label: testItem.properties?.label ?? testItem.id,
+      icon: testItem.properties?.icon,
+      ...((testItem.nodes?.length ?? 0) > 0 && {
+        parentOf: testItem.nodes!.map(({ id }) => id),
+      }),
+    }),
+    isOpen: (_path: string[]) => {
+      const path = Path.create(..._path);
+      const value = state.get(path) ?? create({ open: false, current: false });
+      if (!state.has(path)) {
+        state.set(path, value);
+      }
+
+      return value.open;
+    },
+    isCurrent: (_path: string[]) => {
+      const path = Path.create(..._path);
+      const value = state.get(path) ?? create({ open: false, current: false });
+      if (!state.has(path)) {
+        state.set(path, value);
+      }
+
+      return value.current;
+    },
+    onOpenChange: ({ path: _path, open }) => {
+      const path = Path.create(..._path);
+      const object = state.get(path);
+      object!.open = open;
+    },
+    onSelect: ({ path: _path, current }) => {
+      const path = Path.create(..._path);
+      const object = state.get(path);
+      object!.current = current;
+    },
+  },
+};
+
+export default meta;
+
+export const Default = {};