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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.a4bbb77",
+  "version": "0.8.4-main.ae835ea",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,50 +31,49 @@
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
-    "@dxos/app-framework": "0.8.4-main.a4bbb77",
-    "@dxos/app-graph": "0.8.4-main.a4bbb77",
-    "@dxos/async": "0.8.4-main.a4bbb77",
-    "@dxos/echo": "0.8.4-main.a4bbb77",
-    "@dxos/debug": "0.8.4-main.a4bbb77",
-    "@dxos/echo-schema": "0.8.4-main.a4bbb77",
-    "@dxos/invariant": "0.8.4-main.a4bbb77",
-    "@dxos/keyboard": "0.8.4-main.a4bbb77",
-    "@dxos/lit-ui": "0.8.4-main.a4bbb77",
-    "@dxos/live-object": "0.8.4-main.a4bbb77",
-    "@dxos/local-storage": "0.8.4-main.a4bbb77",
-    "@dxos/log": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-deck": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-graph": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-observability": "0.8.4-main.a4bbb77",
-    "@dxos/protocols": "0.8.4-main.a4bbb77",
-    "@dxos/react-client": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-attention": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-list": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-menu": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-searchlist": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-stack": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-tabs": "0.8.4-main.a4bbb77",
-    "@dxos/util": "0.8.4-main.a4bbb77"
+    "@dxos/app-framework": "0.8.4-main.ae835ea",
+    "@dxos/app-graph": "0.8.4-main.ae835ea",
+    "@dxos/echo": "0.8.4-main.ae835ea",
+    "@dxos/keyboard": "0.8.4-main.ae835ea",
+    "@dxos/invariant": "0.8.4-main.ae835ea",
+    "@dxos/lit-ui": "0.8.4-main.ae835ea",
+    "@dxos/live-object": "0.8.4-main.ae835ea",
+    "@dxos/async": "0.8.4-main.ae835ea",
+    "@dxos/debug": "0.8.4-main.ae835ea",
+    "@dxos/local-storage": "0.8.4-main.ae835ea",
+    "@dxos/log": "0.8.4-main.ae835ea",
+    "@dxos/plugin-deck": "0.8.4-main.ae835ea",
+    "@dxos/plugin-graph": "0.8.4-main.ae835ea",
+    "@dxos/protocols": "0.8.4-main.ae835ea",
+    "@dxos/plugin-observability": "0.8.4-main.ae835ea",
+    "@dxos/react-client": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-attention": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-list": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-menu": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-tabs": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-stack": "0.8.4-main.ae835ea",
+    "@dxos/util": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-searchlist": "0.8.4-main.ae835ea"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.42.4",
     "@effect/platform": "0.92.1",
-    "@types/react": "~19.2.0",
-    "@types/react-dom": "~19.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "effect": "3.18.3",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/echo-signals": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-attention": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-client": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-space": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-storybook-layout": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-theme": "0.8.4-main.a4bbb77",
-    "@dxos/random": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
-    "@dxos/storybook-utils": "0.8.4-main.a4bbb77"
+    "@dxos/echo-signals": "0.8.4-main.ae835ea",
+    "@dxos/plugin-client": "0.8.4-main.ae835ea",
+    "@dxos/plugin-attention": "0.8.4-main.ae835ea",
+    "@dxos/plugin-space": "0.8.4-main.ae835ea",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.ae835ea",
+    "@dxos/plugin-theme": "0.8.4-main.ae835ea",
+    "@dxos/random": "0.8.4-main.ae835ea",
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
+    "@dxos/storybook-utils": "0.8.4-main.ae835ea"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -82,8 +81,8 @@
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
+    "@dxos/react-ui": "0.8.4-main.ae835ea"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/app-graph-builder.ts

@@ -3,7 +3,8 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { ROOT_ID, createExtension } from '@dxos/plugin-graph';
@@ -17,7 +18,7 @@ export default (context: PluginContext) =>
       id: meta.id,
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => [

package/src/capabilities/intent-resolver.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { Capabilities, LayoutAction, type PluginContext, contributes, createResolver } from '@dxos/app-framework';
 import { log } from '@dxos/log';

package/src/components/NavTree/NavTree.stories.tsx

@@ -3,8 +3,9 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
-import React from 'react';
+import * as Schema from 'effect/Schema';
+import React, { type KeyboardEvent, useCallback, useRef } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
 
 import {
   Capabilities,
@@ -19,9 +20,7 @@ import {
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { live } from '@dxos/live-object';
 import { AttentionPlugin } from '@dxos/plugin-attention';
-import { ClientPlugin } from '@dxos/plugin-client';
 import { GraphPlugin } from '@dxos/plugin-graph';
-import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
@@ -66,6 +65,15 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
 
 const StoryPlank = ({ attendableId }: { attendableId: string }) => {
   const attentionAttrs = useAttentionAttributes(attendableId);
+  const rootElement = useRef<HTMLDivElement | null>(null);
+
+  // NOTE(thure): This is the same workaround as in Plank, but that component is out of scope for this story.
+  // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.target === event.currentTarget && event.key === 'Escape') {
+      rootElement.current?.closest('main')?.focus();
+    }
+  }, []);
 
   return (
     <StackItem.Root
@@ -73,10 +81,12 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
       {...attentionAttrs}
       classNames='bg-baseSurface border-ie border-separator'
       size={30}
+      onKeyDown={handleKeyDown}
+      ref={rootElement}
     >
       <StoryPlankHeading attendableId={attendableId} />
       <StackItem.Content toolbar>
-        <Toolbar.Root classNames='border-b border-subduedSeparator'>
+        <Toolbar.Root classNames='border-be border-subduedSeparator'>
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
@@ -157,47 +167,48 @@ export default meta;
 
 type Story = StoryObj<typeof NavTreeContainer>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-// TODO(wittjosiah): Deduplicate plugins/capabilities with default story.
-export const WithClient: Story = {
-  decorators: [
-    withPluginManager({
-      plugins: [
-        ClientPlugin({
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
-        }),
-        SpacePlugin({}),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
+    // Find the element with treegrid role and click on its parent
+    const treegridElement = await canvas.findByRole('treegrid');
+    const treegridParent = treegridElement.parentElement;
+    if (treegridParent) {
+      await userEvent.click(treegridParent);
+    }
 
-        // UI
-        ThemePlugin({ tx: defaultTx }),
-        NavTreePlugin(),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        contributes(Capabilities.IntentResolver, [
-          createResolver({
-            intent: LayoutAction.UpdateLayout,
-            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
-            resolve: ({ subject }) => {
-              const state = context.getCapability(StoryState);
-              state.tab = subject;
-            },
-          }),
-        ]),
-      ],
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    translations,
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is on an element with attribute data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
+
+    // Press Tab
+    await userEvent.keyboard('{Tab}');
+
+    // Confirm that focus is now on an element with data-main-landmark="0"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '0');
+
+    // Press Shift-Tab
+    await userEvent.keyboard('{Shift>}{Tab}{/Shift}');
+
+    // Press Enter
+    await userEvent.keyboard('{Enter}');
+
+    // Confirm that focus is now on an element with data-attendable-id="space-0:object-0"
+    await expect(document.activeElement).toHaveAttribute('data-attendable-id', 'space-0:object-0');
+
+    // Press Escape
+    await userEvent.keyboard('{Escape}');
+
+    // Confirm that focus is now on an element with data-main-landmark="1"
+    await expect(document.activeElement).toHaveAttribute('data-main-landmark', '1');
   },
 };

package/src/components/NavTreeContainer.tsx

@@ -98,7 +98,7 @@ export type NavTreeContainerProps = {
 } & Pick<NavTreeContextValue, 'tab'>;
 
 export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeContainerProps) => {
-  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const [isLg] = useMediaQuery('lg');
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useAppGraph();
   const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
@@ -112,12 +112,13 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
       return {
         id: node.id,
-        label: node.properties.label ?? node.id,
         parentOf,
-        icon: node.properties.icon,
         disabled: node.properties.disabled,
-        className: mx(node.properties.modified && 'italic', node.properties.className),
+        label: node.properties.label ?? node.id,
+        className: mx(node.properties.className, node.properties.modified && 'italic'), // TODO(burdon): Italic?
         headingClassName: node.properties.headingClassName,
+        icon: node.properties.icon,
+        iconHue: node.properties.iconHue,
         testId: node.properties.testId,
       };
     },
@@ -179,6 +180,10 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     return target.item.properties.canDrop?.(source) ?? false;
   }, []);
 
+  const canSelect = useCallback(({ item }: { item: Node }) => {
+    return item.properties.selectable ?? true;
+  }, []);
+
   const handleSelect = useCallback(
     ({ item: node, path, option }: { item: Node; path: string[]; option: boolean }) => {
       if (!node.data) {
@@ -304,6 +309,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       isCurrent,
       isOpen,
       canDrop,
+      canSelect,
       isAlternateTree,
       setAlternateTree,
       onTabChange: handleTabChange,
@@ -322,6 +328,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       isCurrent,
       isOpen,
       canDrop,
+      canSelect,
       isAlternateTree,
       setAlternateTree,
       handleTabChange,

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -81,10 +81,11 @@ export const NavTreeItemMonolithicAction = ({
       label={baseLabel}
       disabled={disabled}
       onClick={(event) => {
+        event.stopPropagation();
         if (disabled) {
           return;
         }
-        event.stopPropagation();
+
         void invoke?.(caller ? { parent, caller } : { parent });
       }}
       data-testid={testId}

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -5,7 +5,7 @@
 import React, { Fragment, memo } from 'react';
 
 import { isAction } from '@dxos/app-graph';
-import { DensityProvider, Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { useLoadDescendents } from '../../hooks';
 import { meta } from '../../meta';
@@ -15,7 +15,7 @@ import { type NavTreeItemColumnsProps } from '../types';
 
 import { NavTreeItemAction } from './NavTreeItemAction';
 
-export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: NavTreeItemColumnsProps) => {
+export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(meta.id);
   const { useActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
@@ -29,15 +29,15 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
     .flatMap((action) => (isAction(action) ? [action] : []))
     .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
 
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
-
   useLoadDescendents(item);
   useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
 
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+
   return (
-    <DensityProvider density={density}>
-      <div role='none' className='contents app-no-drag'>
-        {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+    <div role='none' className='contents app-no-drag'>
+      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+        <Treegrid.Cell classNames='contents'>
           <NavTreeItemAction
             testId={primaryAction.properties?.testId}
             label={toLocalizedString(primaryAction.properties?.label, t)}
@@ -48,11 +48,13 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
             menuType={primaryAction.properties?.menuType}
             caller={NAV_TREE_ITEM}
           />
-        ) : (
-          <Treegrid.Cell />
-        )}
-        <ActionRoot>
-          {actions.length > 0 ? (
+        </Treegrid.Cell>
+      ) : (
+        <Treegrid.Cell role='none' />
+      )}
+      <ActionRoot>
+        {actions.length > 0 ? (
+          <Treegrid.Cell classNames='contents'>
             <NavTreeItemAction
               testId={`navtree.treeItem.actionsLevel${level}`}
               label={t('tree item actions label')}
@@ -62,12 +64,16 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
               menuType='dropdown'
               caller={NAV_TREE_ITEM}
             />
-          ) : (
-            <Treegrid.Cell />
-          )}
-        </ActionRoot>
-        {ItemEnd && <ItemEnd node={item} open={open} />}
-      </div>
-    </DensityProvider>
+          </Treegrid.Cell>
+        ) : (
+          <Treegrid.Cell role='none' />
+        )}
+      </ActionRoot>
+      {ItemEnd && (
+        <Treegrid.Cell classNames='contents'>
+          <ItemEnd node={item} open={open} />
+        </Treegrid.Cell>
+      )}
+    </div>
   );
 });

package/src/components/Sidebar/L0Menu.tsx

@@ -72,7 +72,7 @@ type L0ItemProps = L0ItemRootProps & {
 
 const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
   const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
-  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const [isLg] = useMediaQuery('lg');
 
   return useCallback(
     (event: MouseEvent) => {

package/src/components/Sidebar/L1Panel.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { type Node } from '@dxos/app-graph';
-import { IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+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';
@@ -28,11 +28,10 @@ export type L1PanelProps = {
 export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProps) => {
   const { t } = useTranslation(meta.id);
   const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
-  // NOTE(burdon): I'm very uneasy about this pattern of declaring hooks as context props.
-  const { useItems } = navTreeContext;
   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;
@@ -59,19 +58,19 @@ export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProp
       {...(!open && { inert: true })}
     >
       {item.id === currentItemId && (
-        <>
+        <DensityProvider density='fine'>
           <L1PanelHeader path={path} item={item} currentItemId={currentItemId} onBack={onBack} />
           <div role='none' className='overflow-y-auto'>
             {isAlternate ? (
               <Tree
                 {...navTreeContext}
-                useItems={useAlternateItems}
                 id={alternateTree.id}
                 root={alternateTree}
                 path={alternatePath}
                 levelOffset={5}
                 gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
                 renderColumns={NavTreeItemColumns}
+                useItems={useAlternateItems}
               />
             ) : (
               <Tree
@@ -80,13 +79,13 @@ export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProp
                 root={item}
                 path={path}
                 levelOffset={5}
-                draggable
                 gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
                 renderColumns={NavTreeItemColumns}
+                draggable
               />
             )}
           </div>
-        </>
+        </DensityProvider>
       )}
     </Tabs.Tabpanel>
   );

package/src/experimental/Tree.stories.tsx

@@ -7,7 +7,7 @@ import React, { type JSX, type PropsWithChildren, useEffect, useState } from 're
 
 import { faker } from '@dxos/random';
 import { Icon, IconButton } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/react-ui-theme';
 
 import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visitor } from './Tree';
@@ -203,10 +203,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
 const meta = {
   title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'column',
-  },
+  decorators: [withTheme, withLayout({ container: 'column' })],
 } satisfies Meta<typeof Tree>;
 
 export default meta;

package/src/meta.ts

@@ -3,10 +3,15 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
   id: 'dxos.org/plugin/navtree',
   name: 'Navtree',
+  description: trim`
+    Hierarchical navigation tree for browsing spaces, folders, and objects.
+    Provides sidebar navigation with collapsible sections and quick access to workspace content.
+  `,
 };
 
 // TODO(wittjosiah): Factor out.

package/src/testing/app-graph-builder.ts

@@ -3,7 +3,8 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { type PluginContext } from '@dxos/app-framework';
 import { log } from '@dxos/log';
@@ -28,7 +29,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
       id: 'app-menu',
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map((node) => {
@@ -55,7 +56,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
       id: 'user-account',
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => {
@@ -112,7 +113,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
       position: 'hoist',
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => {
@@ -153,7 +154,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
         });
 
         return Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
             Option.map(() => {
@@ -179,7 +180,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
       id: 'space-actions',
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
             Option.map((node) => {
@@ -220,7 +221,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
         });
 
         return Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
             Option.map((node) => {
@@ -245,7 +246,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
       id: 'object-actions',
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
             Option.map((node) => {

package/src/testing/generator.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { type NodeArg } from '@dxos/app-graph';
 import { type Live, Obj, Type } from '@dxos/echo';
-import { TypedObject } from '@dxos/echo-schema';
+import { TypedObject } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
 import { range } from '@dxos/util';
 

package/src/types.ts

@@ -28,13 +28,14 @@ export type FlattenedActions = {
 };
 
 type SharedProperties = {
-  label: Label;
-  icon?: string;
+  testId?: string;
   disabled?: boolean;
   position?: Position;
-  testId?: string;
+  label: Label;
   className?: string;
   headingClassName?: string;
+  icon?: string;
+  iconHue?: string;
 };
 
 export type NodeProperties = SharedProperties & {

package/dist/lib/browser/app-graph-builder-BCXDEDN7.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/app-graph-builder.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport { Option, pipe } from 'effect';\n\nimport { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';\nimport { ROOT_ID, createExtension } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, meta } from '../meta';\n\nexport default (context: PluginContext) =>\n  contributes(\n    Capabilities.AppGraphBuilder,\n    createExtension({\n      id: meta.id,\n      actions: (node) =>\n        Rx.make((get) =>\n          pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map(() => [\n              {\n                id: COMMANDS_DIALOG,\n                data: async () => {\n                  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n                  await dispatch(\n                    createIntent(LayoutAction.UpdateDialog, {\n                      part: 'dialog',\n                      subject: COMMANDS_DIALOG,\n                      options: {\n                        blockAlign: 'start',\n                      },\n                    }),\n                  );\n                },\n                properties: {\n                  label: ['open commands label', { ns: meta.id }],\n                  icon: 'ph--magnifying-glass--regular',\n                  keyBinding: {\n                    macos: 'meta+k',\n                    windows: 'ctrl+k',\n                  },\n                },\n              },\n            ]),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n  );\n"],
-  "mappings": ";;;;;;AAIA,SAASA,UAAU;AACnB,SAASC,QAAQC,YAAY;AAE7B,SAASC,cAAcC,cAAkCC,aAAaC,oBAAoB;AAC1F,SAASC,SAASC,uBAAuB;AAIzC,IAAA,6BAAe,CAACC,YACdC,YACEC,aAAaC,iBACbC,gBAAgB;EACdC,IAAIC,KAAKD;EACTE,SAAS,CAACC,SACRC,GAAGC,KAAK,CAACC,QACPC,KACED,IAAIH,IAAAA,GACJK,OAAOC,QAAQ,CAACN,UAAUA,MAAKH,OAAOU,UAAUF,OAAOG,KAAKR,KAAAA,IAAQK,OAAOI,KAAI,CAAA,GAC/EJ,OAAOK,IAAI,MAAM;IACf;MACEb,IAAIc;MACJC,MAAM,YAAA;AACJ,cAAM,EAAEC,iBAAiBC,SAAQ,IAAKtB,QAAQuB,cAAcrB,aAAasB,gBAAgB;AACzF,cAAMF,SACJG,aAAaC,aAAaC,cAAc;UACtCC,MAAM;UACNC,SAASV;UACTW,SAAS;YACPC,YAAY;UACd;QACF,CAAA,CAAA;MAEJ;MACAC,YAAY;QACVC,OAAO;UAAC;UAAuB;YAAEC,IAAI5B,KAAKD;UAAG;;QAC7C8B,MAAM;QACNC,YAAY;UACVC,OAAO;UACPC,SAAS;QACX;MACF;IACF;GACD,GACDzB,OAAO0B,UAAU,MAAM,CAAA,CAAE,CAAA,CAAA;AAGjC,CAAA,CAAA;",
-  "names": ["Rx", "Option", "pipe", "Capabilities", "LayoutAction", "contributes", "createIntent", "ROOT_ID", "createExtension", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "meta", "actions", "node", "Rx", "make", "get", "pipe", "Option", "flatMap", "ROOT_ID", "some", "none", "map", "COMMANDS_DIALOG", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "createIntent", "LayoutAction", "UpdateDialog", "part", "subject", "options", "blockAlign", "properties", "label", "ns", "icon", "keyBinding", "macos", "windows", "getOrElse"]
-}