@dxos/plugin-navtree 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.5ad4a44",
+  "version": "0.8.4-main.66e292d",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,58 +31,58 @@
     "@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.5ad4a44",
-    "@dxos/async": "0.8.4-main.5ad4a44",
-    "@dxos/debug": "0.8.4-main.5ad4a44",
-    "@dxos/app-graph": "0.8.4-main.5ad4a44",
-    "@dxos/invariant": "0.8.4-main.5ad4a44",
-    "@dxos/echo": "0.8.4-main.5ad4a44",
-    "@dxos/lit-ui": "0.8.4-main.5ad4a44",
-    "@dxos/keyboard": "0.8.4-main.5ad4a44",
-    "@dxos/local-storage": "0.8.4-main.5ad4a44",
-    "@dxos/live-object": "0.8.4-main.5ad4a44",
-    "@dxos/log": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-deck": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-graph": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-observability": "0.8.4-main.5ad4a44",
-    "@dxos/protocols": "0.8.4-main.5ad4a44",
-    "@dxos/react-client": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-attention": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-list": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-menu": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-searchlist": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-stack": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-tabs": "0.8.4-main.5ad4a44",
-    "@dxos/util": "0.8.4-main.5ad4a44"
+    "@dxos/app-framework": "0.8.4-main.66e292d",
+    "@dxos/app-graph": "0.8.4-main.66e292d",
+    "@dxos/debug": "0.8.4-main.66e292d",
+    "@dxos/echo": "0.8.4-main.66e292d",
+    "@dxos/async": "0.8.4-main.66e292d",
+    "@dxos/invariant": "0.8.4-main.66e292d",
+    "@dxos/keyboard": "0.8.4-main.66e292d",
+    "@dxos/lit-ui": "0.8.4-main.66e292d",
+    "@dxos/local-storage": "0.8.4-main.66e292d",
+    "@dxos/live-object": "0.8.4-main.66e292d",
+    "@dxos/log": "0.8.4-main.66e292d",
+    "@dxos/plugin-graph": "0.8.4-main.66e292d",
+    "@dxos/plugin-deck": "0.8.4-main.66e292d",
+    "@dxos/plugin-observability": "0.8.4-main.66e292d",
+    "@dxos/react-client": "0.8.4-main.66e292d",
+    "@dxos/protocols": "0.8.4-main.66e292d",
+    "@dxos/react-ui-attention": "0.8.4-main.66e292d",
+    "@dxos/react-ui-list": "0.8.4-main.66e292d",
+    "@dxos/react-ui-menu": "0.8.4-main.66e292d",
+    "@dxos/react-ui-searchlist": "0.8.4-main.66e292d",
+    "@dxos/react-ui-stack": "0.8.4-main.66e292d",
+    "@dxos/react-ui-tabs": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.42.4",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "0.92.1",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@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.5ad4a44",
-    "@dxos/plugin-attention": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-client": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-space": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-theme": "0.8.4-main.5ad4a44",
-    "@dxos/random": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-storybook-layout": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44",
-    "@dxos/storybook-utils": "0.8.4-main.5ad4a44"
+    "@dxos/echo-signals": "0.8.4-main.66e292d",
+    "@dxos/plugin-attention": "0.8.4-main.66e292d",
+    "@dxos/plugin-client": "0.8.4-main.66e292d",
+    "@dxos/plugin-space": "0.8.4-main.66e292d",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.66e292d",
+    "@dxos/plugin-theme": "0.8.4-main.66e292d",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/random": "0.8.4-main.66e292d",
+    "@dxos/storybook-utils": "0.8.4-main.66e292d"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44"
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
 
@@ -17,7 +17,7 @@ export default (context: PluginContext) =>
     createExtension({
       id: meta.id,
       actions: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),

package/src/capabilities/keyboard.ts

@@ -34,9 +34,7 @@ export default (context: PluginContext) => {
     if (shortcut && isAction(node)) {
       Keyboard.singleton.getContext(path.slice(0, -1).join('/')).bind({
         shortcut,
-        handler: () => {
-          void node.data({ parent: node, caller: KEY_BINDING });
-        },
+        handler: () => node.data({ parent: node, caller: KEY_BINDING }),
         data: node.properties.label,
       });
     }

package/src/capabilities/state.ts

@@ -5,8 +5,7 @@
 import { effect, untracked } from '@preact/signals-core';
 
 import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
-import { type Live } from '@dxos/echo';
-import { live } from '@dxos/live-object';
+import { type Live, live } from '@dxos/live-object';
 import { Path } from '@dxos/react-ui-list';
 
 import { meta } from '../meta';

package/src/components/CommandsDialog/CommandsDialog.tsx

@@ -4,7 +4,8 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useAppGraph, useIntentDispatcher } from '@dxos/app-framework/react';
 import { type ActionLike, isAction, isActionGroup } from '@dxos/app-graph';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { useActions } from '@dxos/plugin-graph';
@@ -89,7 +90,12 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                     return;
                   }
 
-                  void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
+                  void dispatch(
+                    createIntent(LayoutAction.UpdateDialog, {
+                      part: 'dialog',
+                      options: { state: false },
+                    }),
+                  );
                   setTimeout(() => {
                     const node = graph.getConnections(group?.id ?? action.id, 'inbound')[0];
                     void (node && isAction(action) && action.data({ parent: node, caller: KEY_BINDING }));
@@ -97,7 +103,9 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                 }}
                 classNames='flex items-center gap-2'
                 disabled={action.properties.disabled}
-                {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+                {...(action.properties?.testId && {
+                  'data-testid': action.properties.testId,
+                })}
               >
                 <Icon icon={action.properties.icon} size={4} />
                 <span className='grow truncate'>{label}</span>

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -4,7 +4,8 @@
 
 import React from 'react';
 
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
 import { COMMANDS_DIALOG, meta } from '../../meta';

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

@@ -15,8 +15,8 @@ import {
   contributes,
   createResolver,
   defineCapability,
-  useCapability,
 } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { live } from '@dxos/live-object';
 import { AttentionPlugin } from '@dxos/plugin-attention';
@@ -86,7 +86,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
     >
       <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>
 

package/src/components/NavTreeContainer.tsx

@@ -7,15 +7,8 @@ import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-a
 import { untracked } from '@preact/signals-core';
 import React, { memo, useCallback, useEffect, useMemo } from 'react';
 
-import {
-  LayoutAction,
-  Surface,
-  createIntent,
-  useAppGraph,
-  useCapability,
-  useIntentDispatcher,
-  useLayout,
-} from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { Surface, useAppGraph, useCapability, useIntentDispatcher, useLayout } from '@dxos/app-framework/react';
 import { type Node, ROOT_ID, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
 import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
@@ -118,7 +111,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         className: mx(node.properties.className, node.properties.modified && 'italic'), // TODO(burdon): Italic?
         headingClassName: node.properties.headingClassName,
         icon: node.properties.icon,
-        iconClassName: node.properties.iconClassName,
+        iconHue: node.properties.iconHue,
         testId: node.properties.testId,
       };
     },
@@ -163,19 +156,36 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         }),
       );
 
-      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: node.id }));
+      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(graph, node).filter((node) => !isActionLike(node));
         if (item && item.data) {
-          await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
+          await dispatch(
+            createIntent(LayoutAction.Open, {
+              part: 'main',
+              subject: [item.id],
+            }),
+          );
         }
       }
     },
     [dispatch, layout.active, tab, navigationSidebarState, isLg],
   );
 
+  const blockInstruction = useCallback(
+    ({ instruction, source, target }: { instruction: Instruction; source: TreeData; target: TreeData }) => {
+      return target.item.properties.blockInstruction?.(source, instruction) ?? false;
+    },
+    [],
+  );
+
   const canDrop = useCallback(({ source, target }: { source: TreeData; target: TreeData }) => {
     return target.item.properties.canDrop?.(source) ?? false;
   }, []);
@@ -207,10 +217,19 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         );
       } else if (option) {
         void dispatch(
-          createIntent(LayoutAction.Close, { part: 'main', subject: [node.id], options: { state: false } }),
+          createIntent(LayoutAction.Close, {
+            part: 'main',
+            subject: [node.id],
+            options: { state: false },
+          }),
         );
       } else {
-        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
+        void dispatch(
+          createIntent(LayoutAction.ScrollIntoView, {
+            part: 'current',
+            subject: node.id,
+          }),
+        );
       }
 
       const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === 'default');
@@ -219,14 +238,25 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       }
 
       if (!isLg) {
-        void dispatch(createIntent(LayoutAction.UpdateSidebar, { part: 'sidebar', options: { state: 'closed' } }));
+        void dispatch(
+          createIntent(LayoutAction.UpdateSidebar, {
+            part: 'sidebar',
+            options: { state: 'closed' },
+          }),
+        );
       }
     },
     [graph, dispatch, isCurrent, isLg],
   );
 
   const handleBack = useCallback(
-    () => dispatch(createIntent(LayoutAction.RevertWorkspace, { part: 'workspace', options: { revert: true } })),
+    () =>
+      dispatch(
+        createIntent(LayoutAction.RevertWorkspace, {
+          part: 'workspace',
+          options: { revert: true },
+        }),
+      ),
     [dispatch],
   );
 
@@ -298,43 +328,45 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
 
   const navTreeContextValue = useMemo(
     () => ({
-      useItems,
-      tab,
-      useActions,
-      loadDescendents,
-      renderItemEnd,
-      popoverAnchorId,
-      topbar,
-      getProps,
-      isCurrent,
-      isOpen,
+      blockInstruction,
       canDrop,
       canSelect,
+      getProps,
       isAlternateTree,
-      setAlternateTree,
-      onTabChange: handleTabChange,
+      isCurrent,
+      isOpen,
+      loadDescendents,
+      onBack: handleBack,
       onOpenChange: handleOpenChange,
       onSelect: handleSelect,
-      onBack: handleBack,
-    }),
-    [
-      tab,
-      useActions,
-      loadDescendents,
-      renderItemEnd,
+      onTabChange: handleTabChange,
       popoverAnchorId,
+      renderItemEnd,
+      setAlternateTree,
+      tab,
       topbar,
-      getProps,
-      isCurrent,
-      isOpen,
+      useActions,
+      useItems,
+    }),
+    [
+      blockInstruction,
       canDrop,
       canSelect,
-      isAlternateTree,
-      setAlternateTree,
-      handleTabChange,
+      getProps,
+      handleBack,
       handleOpenChange,
       handleSelect,
-      handleBack,
+      handleTabChange,
+      isAlternateTree,
+      isCurrent,
+      isOpen,
+      loadDescendents,
+      popoverAnchorId,
+      renderItemEnd,
+      setAlternateTree,
+      tab,
+      topbar,
+      useActions,
     ],
   );
 

package/src/components/Sidebar/L0Menu.tsx

@@ -102,7 +102,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,9 +119,9 @@ 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 }
+        ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-object-id': id }
         : type !== 'collection'
-          ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+          ? { onClick: handleClick, 'data-testid': testId, 'data-object-id': id }
           : { onClick: handleClick, role: 'button' };
 
     return (
@@ -287,7 +287,7 @@ const L0Collection = ({ item, path }: L0ItemProps) => {
       role='group'
       className='contents group/l0c'
       aria-labelledby={`${item.id}__label`}
-      data-itemid={id}
+      data-object-id={id}
       data-testid={testId}
     >
       {collectionItems.map((collectionItem) => (

package/src/components/Sidebar/L1Panel.tsx

@@ -127,7 +127,6 @@ const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
           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 +138,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/types.ts

@@ -15,7 +15,7 @@ import type { L1PanelProps } from './Sidebar';
 
 export type NavTreeContextValue = Pick<
   TreeProps<NavTreeItemGraphNode, { disposition?: string; sort?: boolean }>,
-  'useItems' | 'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
+  'useItems' | 'getProps' | 'isCurrent' | 'isOpen' | 'blockInstruction' | 'canDrop' | 'onOpenChange' | 'onSelect'
 > &
   Pick<L1PanelProps, 'onBack'> & {
     tab: string;

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';
@@ -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,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/experimental/Tree.tsx

@@ -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,

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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
 
@@ -28,7 +28,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'app-menu',
       actions: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
@@ -55,7 +55,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'user-account',
       connector: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
@@ -112,7 +112,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
       id: 'spaces-root',
       position: 'hoist',
       connector: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
@@ -138,7 +138,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'spaces',
       connector: (node) => {
-        const count = Rx.make((get) => {
+        const count = Atom.make((get) => {
           let value = 3;
           const interval = setInterval(() => {
             if (value >= 10) {
@@ -153,7 +153,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
           return value;
         });
 
-        return Rx.make((get) =>
+        return Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
@@ -179,7 +179,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'space-actions',
       actions: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
@@ -205,7 +205,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'objects',
       connector: (node) => {
-        const count = Rx.make((get) => {
+        const count = Atom.make((get) => {
           let value = 3;
           const interval = setInterval(() => {
             if (value >= 20) {
@@ -220,7 +220,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
           return value;
         });
 
-        return Rx.make((get) =>
+        return Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
@@ -245,7 +245,7 @@ export const storybookGraphBuilders = (context: PluginContext): BuilderExtension
     createExtension({
       id: 'object-actions',
       actions: (node) =>
-        Rx.make((get) =>
+        Atom.make((get) =>
           Function.pipe(
             get(node),
             Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),

package/src/testing/generator.ts

@@ -5,8 +5,8 @@
 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/internal';
+import { Obj, Type } from '@dxos/echo';
+import { type Live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { range } from '@dxos/util';
 
@@ -58,15 +58,17 @@ export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
 
   project: {
     createSchema: () =>
-      class ProjectType extends TypedObject({
-        typename: 'example.com/type/Project',
-        version: '0.1.0',
-      })({
+      Schema.Struct({
         title: Schema.String,
         repo: Schema.String,
         status: Schema.String,
         priority: Schema.Number,
-      }) {},
+      }).pipe(
+        Type.Obj({
+          typename: 'example.com/type/Project',
+          version: '0.1.0',
+        }),
+      ),
 
     createData: () => ({
       title: faker.commerce.productName(),