@dxos/plugin-navtree 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -4,19 +4,20 @@
 
 import React from 'react';
 
-import { type Action, type Node } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
+import { useActionRunner } from '@dxos/plugin-graph';
 import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
 import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
-import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
+import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
-  parent: Node;
+  parent: Node.Node;
   caller?: string;
   monolithic?: boolean;
-  menuActions?: Action[];
+  menuActions?: Node.Action[];
 };
 
 const fallbackIcon = 'ph--placeholder--regular';
@@ -40,8 +41,10 @@ export const NavTreeItemActionDropdownMenu = ({
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(meta.id);
   const density = useDensityContext();
+  const runAction = useActionRunner();
+
   return (
-    <MenuProvider>
+    <MenuProvider onAction={runAction}>
       <DropdownMenu.Root group={parent} items={menuActions as MenuItem[]} caller={caller}>
         <DropdownMenu.Trigger asChild>
           <IconButton
@@ -59,13 +62,16 @@ export const NavTreeItemActionDropdownMenu = ({
   );
 };
 
-export const NavTreeItemMonolithicAction = ({
-  parent,
-  properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
-  data: invoke,
-  baseLabel,
-}: Action & { parent: Node; onAction?: (action: Action) => void; baseLabel: string }) => {
+export const NavTreeItemMonolithicAction = (
+  props: Node.Action & { parent: Node.Node; onAction?: (action: Node.Action) => void; baseLabel: string },
+) => {
+  const {
+    parent,
+    properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
+    baseLabel,
+  } = props;
   const density = useDensityContext();
+  const runAction = useActionRunner();
   return (
     <IconButton
       {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
@@ -86,7 +92,7 @@ export const NavTreeItemMonolithicAction = ({
           return;
         }
 
-        void invoke?.(caller ? { parent, caller } : { parent });
+        void runAction(props, caller ? { parent, caller } : { parent });
       }}
       data-testid={testId}
     />

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -4,7 +4,7 @@
 
 import React, { Fragment, memo } from 'react';
 
-import { isAction } from '@dxos/app-graph';
+import { Node } from '@dxos/app-graph';
 import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { useLoadDescendents } from '../../hooks';
@@ -26,11 +26,11 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
   );
 
   const actions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions)
-    .flatMap((action) => (isAction(action) ? [action] : []))
+    .flatMap((action) => (Node.isAction(action) ? [action] : []))
     .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
 
   useLoadDescendents(item);
-  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
+  useLoadDescendents(primaryAction && !Node.isAction(primaryAction) ? (primaryAction as Node.Node) : undefined);
 
   const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
 
@@ -43,8 +43,8 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
             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]}
+            monolithic={Node.isAction(primaryAction)}
+            menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
             menuType={primaryAction.properties?.menuType}
             caller={NAV_TREE_ITEM}
           />

package/src/components/Sidebar/L0Menu.tsx

@@ -23,8 +23,8 @@ import React, {
 } from 'react';
 
 import { type Node } from '@dxos/app-graph';
-import { invariant } from '@dxos/invariant';
 import { DxAvatar } from '@dxos/lit-ui/react';
+import { useActionRunner } from '@dxos/plugin-graph';
 import {
   Icon,
   ListItem,
@@ -38,10 +38,10 @@ import {
 import { DropdownMenu, type MenuItem, MenuProvider } 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 { mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
 
-import { useLoadDescendents } from '../../hooks';
+import { useNavTreeState } from '../../hooks';
 import { meta } from '../../meta';
 import { l0ItemType } from '../../util';
 import { useNavTreeContext } from '../NavTreeContext';
@@ -57,43 +57,41 @@ type L0ItemData = {
 };
 
 type L0ItemRootProps = {
-  item: Node<any>;
-  parent?: Node<any>;
+  item: Node.Node;
+  parent?: Node.Node;
   path: string[];
 };
 
 type L0ItemProps = L0ItemRootProps & {
-  item: Node<any>;
-  parent?: Node<any>;
+  item: Node.Node;
+  parent?: Node.Node;
   path: string[];
   pinned?: boolean;
   onRearrange?: StackItemRearrangeHandler<L0ItemData>;
 };
 
 const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
-  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
+  const { tab, onSelect, onTabChange } = useNavTreeContext();
+  const { getItem } = useNavTreeState();
   const [isLg] = useMediaQuery('lg');
+  const runAction = useActionRunner();
 
   return useCallback(
     (event: MouseEvent) => {
       switch (type) {
         case 'action': {
-          const {
-            data: invoke,
-            properties: { caller },
-          } = item;
-
-          return invoke?.(caller ? { node: parent, caller } : { node: parent });
+          const { properties: { caller } = {} } = item;
+          return void runAction(item as Node.Action, caller ? { parent, caller } : { parent });
         }
 
         case 'tab':
           return onTabChange?.(item);
 
         case 'link':
-          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
+          return onSelect?.({ item, path, current: !getItem(path).current, option: event.altKey });
       }
     },
-    [item, parent, type, tab, isCurrent, onSelect, onTabChange, isLg],
+    [item, parent, type, tab, getItem, onSelect, onTabChange, isLg, runAction],
   );
 };
 
@@ -102,7 +100,7 @@ const l0Breakpoints: Record<string, string> = {
 };
 
 const l0ItemRoot =
-  'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
+  'group/l0item flex is-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
 
 const l0ItemContent = 'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm';
 
@@ -119,10 +117,8 @@ const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
     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, role: 'button' };
+        ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-object-id': id }
+        : { onClick: handleClick, 'data-testid': testId, 'data-object-id': id };
 
     return (
       <Tooltip.Trigger asChild delayDuration={0} side='right' content={localizedString}>
@@ -256,68 +252,50 @@ const ItemAvatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
 };
 
 //
-// L0Collection
+// L0Menu
 //
 
-const L0Collection = ({ item, path }: L0ItemProps) => {
-  const navTreeContext = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = navTreeContext.useItems(item);
-  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
-  const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+export type L0MenuProps = {
+  menuActions: MenuItem[];
+  topLevelItems: Node.Node[];
+  pinnedItems: Node.Node[];
+  userAccountItem?: Node.Node;
+  parent?: Node.Node;
+  path: string[];
+};
+
+export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }: L0MenuProps) => {
+  const { t } = useTranslation(meta.id);
+  const runAction = useActionRunner();
+  const handleAction = useCallback(
+    (action: Node.Action, params: Node.InvokeProps) => {
+      void runAction(action, params);
+    },
+    [runAction],
+  );
 
   const handleRearrange = useCallback<StackItemRearrangeHandler<L0ItemData>>(
     (source, target, closestEdge) => {
-      invariant(item.properties.onRearrangeChildren);
-      const sourceIndex = collectionItems.findIndex((i) => i.id === source.id);
-      const targetIndex = collectionItems.findIndex((i) => i.id === target.id);
+      const sourceItem = topLevelItems.find((i) => i.id === source.id);
+      if (!sourceItem?.properties.onRearrange) {
+        return;
+      }
+
+      const sourceIndex = topLevelItems.findIndex((i) => i.id === source.id);
+      const targetIndex = topLevelItems.findIndex((i) => i.id === target.id);
       const insertIndex =
         source.id === target.id
           ? sourceIndex
           : targetIndex +
             (sourceIndex < targetIndex ? (closestEdge === 'top' ? -1 : 0) : closestEdge === 'bottom' ? 1 : 0);
-      const nextOrder = arrayMove([...collectionItems], sourceIndex, insertIndex);
-      return item.properties.onRearrangeChildren(nextOrder);
+      const nextOrder = arrayMove([...topLevelItems], sourceIndex, insertIndex);
+      return sourceItem.properties.onRearrange(nextOrder.map((item) => item.data));
     },
-    [collectionItems, item.properties.onRearrangeChildren],
+    [topLevelItems],
   );
 
-  return (
-    <div
-      role='group'
-      className='contents group/l0c'
-      aria-labelledby={`${item.id}__label`}
-      data-itemid={id}
-      data-testid={testId}
-    >
-      {collectionItems.map((collectionItem) => (
-        <L0Item
-          key={collectionItem.id}
-          item={collectionItem}
-          parent={item}
-          path={groupPath}
-          {...(item.properties.onRearrangeChildren && { onRearrange: handleRearrange })}
-        />
-      ))}
-    </div>
-  );
-};
-
-//
-// L0Menu
-//
-
-export type L0MenuProps = {
-  menuActions: MenuItem[];
-  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(meta.id);
+  // Check if any items have onRearrange to enable drag-and-drop.
+  const hasRearrangeableItems = topLevelItems.some((item) => item.properties.onRearrange);
 
   return (
     <Tabs.Tablist
@@ -328,13 +306,17 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
       ]}
     >
       {/* TODO(wittjosiah): Use L0Item trigger. */}
-      <MenuProvider>
+      <MenuProvider onAction={handleAction}>
         <DropdownMenu.Root group={parent} items={menuActions}>
           <Tooltip.Trigger content={t('app menu label')} side='right' asChild>
             <Tabs.TabPrimitive value='options' asChild role='button'>
               <DropdownMenu.Trigger
                 data-testid='spacePlugin.addSpace'
-                className={mx(l0ItemRoot, 'grid place-items-center dx-focus-ring-group')}
+                className={mx(
+                  l0ItemRoot,
+                  'grid place-items-center dx-focus-ring-group',
+                  '[body[data-platform="macos"]_&]:mt-[30px]',
+                )}
               >
                 <div
                   role='none'
@@ -358,17 +340,19 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
             role='none'
             className={mx([
               'flex flex-col gap-1 pbs-1',
-              '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
+              '[body[data-platform="macos"]_&]:pbs-[30px]',
               '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]',
             ])}
           >
-            {topLevelItems.map((item) => {
-              if (l0ItemType(item) === 'collection') {
-                return <L0Collection key={item.id} item={item} parent={parent} path={path} />;
-              } else {
-                return <L0Item key={item.id} item={item} parent={parent} path={path} />;
-              }
-            })}
+            {topLevelItems.map((item) => (
+              <L0Item
+                key={item.id}
+                item={item}
+                parent={parent}
+                path={path}
+                {...(hasRearrangeableItems && { onRearrange: handleRearrange })}
+              />
+            ))}
           </div>
           <ScrollArea.Scrollbar orientation='vertical'>
             <ScrollArea.Thumb />
@@ -378,11 +362,9 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
 
       {/* Actions. */}
       <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
-        {pinnedItems
-          .filter((item) => l0ItemType(item) !== 'collection')
-          .map((item) => (
-            <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
-          ))}
+        {pinnedItems.map((item) => (
+          <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
+        ))}
       </div>
 
       {userAccountItem && (
@@ -398,14 +380,6 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
           </L0ItemRoot>
         </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%)',
-        }}
-      />
     </Tabs.Tablist>
   );
 };

package/src/components/Sidebar/L1Panel.tsx

@@ -8,8 +8,9 @@ import { type Node } from '@dxos/app-graph';
 import { DensityProvider, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tree } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
+import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
+import { useIsAlternateTree } from '../../hooks';
 import { meta } from '../../meta';
 import { useNavTreeContext } from '../NavTreeContext';
 import { NavTreeItemColumns } from '../NavTreeItem';
@@ -17,7 +18,7 @@ import { NavTreeItemColumns } from '../NavTreeItem';
 export type L1PanelProps = {
   open?: boolean;
   path: string[];
-  item: Node<any>;
+  item: Node.Node;
   currentItemId: string;
   onBack?: () => void;
 };
@@ -27,16 +28,16 @@ export type L1PanelProps = {
  */
 export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProps) => {
   const { t } = useTranslation(meta.id);
-  const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const navTreeContext = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
 
   // TODO(wittjosiah): Support multiple alternate trees.
   const { useItems } = navTreeContext;
   const alternateTree = useItems(item, { disposition: 'alternate-tree' })[0];
   const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
+  const isAlternate = useIsAlternateTree(alternatePath, item);
   const useAlternateItems = useCallback(
-    (node?: Node, { disposition }: { disposition?: string } = {}) => {
+    (node?: Node.Node, { disposition }: { disposition?: string } = {}) => {
       // TODO(wittjosiah): Sorting is expensive, limit to necessary items for now.
       return useItems(node, { disposition, sort: node?.id === alternateTree.id });
     },
@@ -96,13 +97,13 @@ export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProp
  */
 const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
   const { t } = useTranslation(meta.id);
-  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const { setAlternateTree, ...navTreeContext } = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
 
   // TODO(wittjosiah): Support multiple alternate trees.
   const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
   const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
+  const isAlternate = useIsAlternateTree(alternatePath, item);
   const backCapable = item.id.startsWith('!') || isAlternate;
 
   const handleOpen = useCallback(() => {
@@ -124,10 +125,10 @@ const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
       <h2 className='flex-1 truncate min-is-0'>{title}</h2>
       {(backCapable && (
         <IconButton
+          data-testid='treeView.primaryTreeButton'
           variant='ghost'
           icon='ph--arrow-u-down-left--regular'
           iconOnly
-          size={5}
           label={t('button back')}
           classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
           onClick={handleBack}
@@ -139,7 +140,6 @@ const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
             variant='ghost'
             icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
             iconOnly
-            size={5}
             label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
             classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
             onClick={handleOpen}

package/src/components/Sidebar/L1Tabs.tsx

@@ -2,57 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { type Node } from '@dxos/app-graph';
 
-import { useLoadDescendents } from '../../hooks';
 import { l0ItemType } from '../../util';
-import { useNavTreeContext } from '../NavTreeContext';
 
 import { L1Panel, type L1PanelProps } from './L1Panel';
 
 export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
   path: string[];
-  topLevelItems: Node<any>[];
+  topLevelItems: Node.Node[];
 };
 
 /**
- * Each space is an L1 tab.
+ * Each workspace is an L1 tab.
  */
 export const L1Tabs = ({ topLevelItems, onBack, ...props }: L1TabsProps) => {
   return (
     <>
       {topLevelItems.map((item) => {
         const type = l0ItemType(item);
-        switch (type) {
-          case 'tab':
-            return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
-          case 'collection':
-            return <L1PanelCollection key={item.id} item={item} {...props} />;
-          default:
-            return null;
+        if (type === 'tab') {
+          return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
         }
+        return null;
       })}
     </>
   );
 };
-
-/**
- *
- */
-const L1PanelCollection = ({ item, path, ...props }: L1PanelProps) => {
-  const { useItems } = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = useItems(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} {...props} />
-        ))}
-    </>
-  );
-};

package/src/components/index.ts

@@ -7,4 +7,5 @@ export * from './NavTree';
 export * from './NavTreeContainer';
 export * from './NavTreeContext';
 export * from './NavTreeDocumentTitle';
+
 export type * from './types';

package/src/components/types.ts

@@ -4,7 +4,7 @@
 
 import type { FC } from 'react';
 
-import type { Node } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import type { Density } from '@dxos/react-ui';
 import type { TreeProps } from '@dxos/react-ui-list';
 import type { MaybePromise } from '@dxos/util';
@@ -15,23 +15,23 @@ import type { L1PanelProps } from './Sidebar';
 
 export type NavTreeContextValue = Pick<
   TreeProps<NavTreeItemGraphNode, { disposition?: string; sort?: boolean }>,
-  'useItems' | 'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
+  'useItems' | 'getProps' | 'useIsCurrent' | 'useIsOpen' | 'blockInstruction' | 'canDrop' | 'onOpenChange' | 'onSelect'
 > &
   Pick<L1PanelProps, 'onBack'> & {
     tab: string;
     topbar?: boolean;
     popoverAnchorId?: string;
-    renderItemEnd?: FC<{ node: Node; open: boolean }>;
-    useActions: (node: Node) => FlattenedActions;
-    loadDescendents?: (node: Node) => MaybePromise<void>;
-    isAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
+    renderItemEnd?: FC<{ node: Node.Node; open: boolean }>;
+    useActions: (node: Node.Node) => FlattenedActions;
+    loadDescendents?: (node: Node.Node) => MaybePromise<void>;
+    useIsAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
     setAlternateTree?: (path: string[], open: boolean) => void;
     onTabChange?: (node: NavTreeItemGraphNode) => void;
   };
 
 export type NavTreeItemColumnsProps = {
   path: string[];
-  item: Node;
+  item: Node.Node;
   open: boolean;
   density?: Density;
 };

package/src/experimental/Tree.stories.tsx

@@ -8,7 +8,7 @@ import React, { type JSX, type PropsWithChildren, useEffect, useState } from 're
 import { faker } from '@dxos/random';
 import { Icon, IconButton } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
 
@@ -30,7 +30,7 @@ const Container = ({ children, sidebar }: PropsWithChildren<{ sidebar: JSX.Eleme
     <div className='flex'>
       {/* TODO(burdon): Custom thin scrollbar. */}
       {/* TODO(burdon): Horizontal scrolling within navtree? */}
-      <div className='flex flex-col overflow-y-auto w-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
+      <div className='flex flex-col overflow-y-auto is-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
       <div className='flex flex-col grow overflow-hidden'>{children}</div>
     </div>
   );
@@ -189,7 +189,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
         />
       </div>
 
-      <div className='flex items-center my-2 px-2 gap-2'>
+      <div className='flex items-center my-2 pli-2 gap-2'>
         <IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
         <span className='grow text-sm' onClick={handleCreateSpace}>
           New space
@@ -203,7 +203,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
 const meta = {
   title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
-  decorators: [withTheme, withLayout({ container: 'column' })],
+  decorators: [withTheme, withLayout({ layout: 'column' })],
 } satisfies Meta<typeof Tree>;
 
 export default meta;

package/src/experimental/Tree.tsx

@@ -5,7 +5,7 @@
 import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 
 import { type ClassNameValue, Icon, type Size } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 export const IconButton = ({
   iconName,
@@ -19,7 +19,7 @@ export const IconButton = ({
 } & Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>) => {
   // TODO(burdon): Density aware.
   return (
-    <div className={mx('flex w-6 h-6 items-center justify-center select-none', classNames)} onClick={onClick}>
+    <div className={mx('flex is-6 bs-6 items-center justify-center select-none', classNames)} onClick={onClick}>
       <Icon icon={iconName} classNames='cursor-pointer' size={size} />
     </div>
   );
@@ -193,7 +193,7 @@ export const TreeNodeRow = (props: TreeNodeProps & { className?: string }) => {
     <Grid
       style={{ paddingLeft: `${(depth - 1) * 24}px` }}
       className={mx(
-        'group w-full items-center cursor-pointer bg-hoverSurface',
+        'group is-full items-center cursor-pointer bg-hoverSurface',
         // TODO(burdon): Use data-active.
         selected?.[id] && 'bg-activeSurface',
         className,