@dxos/app-graph 0.8.4-main.b97322e → 0.8.4-main.c4373fc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-graph",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.c4373fc",
   "description": "Constructs knowledge graphs for the purpose of building applications on top of",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -24,44 +25,43 @@
     "src"
   ],
   "dependencies": {
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "main-thread-scheduling": "^14.1.1",
-    "@dxos/async": "0.8.4-main.b97322e",
-    "@dxos/debug": "0.8.4-main.b97322e",
-    "@dxos/echo": "0.8.4-main.b97322e",
-    "@dxos/echo-schema": "0.8.4-main.b97322e",
-    "@dxos/echo-signals": "0.8.4-main.b97322e",
-    "@dxos/invariant": "0.8.4-main.b97322e",
-    "@dxos/live-object": "0.8.4-main.b97322e",
-    "@dxos/log": "0.8.4-main.b97322e",
-    "@dxos/util": "0.8.4-main.b97322e"
+    "@dxos/async": "0.8.4-main.c4373fc",
+    "@dxos/debug": "0.8.4-main.c4373fc",
+    "@dxos/echo": "0.8.4-main.c4373fc",
+    "@dxos/echo-signals": "0.8.4-main.c4373fc",
+    "@dxos/log": "0.8.4-main.c4373fc",
+    "@dxos/live-object": "0.8.4-main.c4373fc",
+    "@dxos/util": "0.8.4-main.c4373fc",
+    "@dxos/invariant": "0.8.4-main.c4373fc"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.b97322e",
-    "@dxos/echo-db": "0.8.4-main.b97322e",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-client": "0.8.4-main.b97322e",
-    "@dxos/react-ui-list": "0.8.4-main.b97322e",
-    "@dxos/react-ui-tabs": "0.8.4-main.b97322e",
-    "@dxos/storybook-utils": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.1",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo-db": "0.8.4-main.c4373fc",
+    "@dxos/random": "0.8.4-main.c4373fc",
+    "@dxos/react-client": "0.8.4-main.c4373fc",
+    "@dxos/react-ui": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-theme": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-tabs": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-list": "0.8.4-main.c4373fc",
+    "@dxos/storybook-utils": "0.8.4-main.c4373fc"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
     "effect": "3.14.21",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-theme": "0.8.4-main.c4373fc"
   },
   "publishConfig": {
     "access": "public"

package/src/graph-builder.test.ts

@@ -3,13 +3,14 @@
 //
 
 import { Registry, Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 import { describe, expect, onTestFinished, test } from 'vitest';
 
-import { sleep, Trigger } from '@dxos/async';
+import { Trigger, sleep } from '@dxos/async';
 
 import { ROOT_ID } from './graph';
-import { createExtension, GraphBuilder } from './graph-builder';
+import { GraphBuilder, createExtension } from './graph-builder';
 import { type Node } from './node';
 
 const exampleId = (id: number) => `dx:test:${id}`;
@@ -17,6 +18,63 @@ const EXAMPLE_ID = exampleId(1);
 const EXAMPLE_TYPE = 'dxos.org/type/example';
 
 describe('GraphBuilder', () => {
+  describe('resolver', () => {
+    test('works', async () => {
+      const registry = Registry.make();
+      const builder = new GraphBuilder({ registry });
+      const graph = builder.graph;
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node).to.be.null;
+      }
+
+      builder.addExtension(
+        createExtension({
+          id: 'resolver',
+          resolver: () => {
+            console.log('resolver');
+            return Rx.make({ id: EXAMPLE_ID, type: EXAMPLE_TYPE, data: 1 });
+          },
+        }),
+      );
+      await graph.initialize(EXAMPLE_ID);
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.id).to.equal(EXAMPLE_ID);
+        expect(node?.type).to.equal(EXAMPLE_TYPE);
+        expect(node?.data).to.equal(1);
+      }
+    });
+
+    test('updates', async () => {
+      const registry = Registry.make();
+      const builder = new GraphBuilder({ registry });
+      const name = Rx.make('default');
+      builder.addExtension(
+        createExtension({
+          id: 'resolver',
+          resolver: () => Rx.make((get) => ({ id: EXAMPLE_ID, type: EXAMPLE_TYPE, data: get(name) })),
+        }),
+      );
+      const graph = builder.graph;
+      await graph.initialize(EXAMPLE_ID);
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.data).to.equal('default');
+      }
+
+      registry.set(name, 'updated');
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.data).to.equal('updated');
+      }
+    });
+  });
+
   describe('connector', () => {
     test('works', () => {
       const registry = Registry.make();
@@ -181,7 +239,7 @@ describe('GraphBuilder', () => {
           id: 'root',
           connector: (node) =>
             Rx.make((get) =>
-              pipe(
+              Function.pipe(
                 get(node),
                 Option.flatMap((node) => (node.id === 'root' ? Option.some(get(name)) : Option.none())),
                 Option.filter((name) => name !== 'removed'),
@@ -273,7 +331,7 @@ describe('GraphBuilder', () => {
           id: 'root',
           connector: (node) =>
             Rx.make((get) =>
-              pipe(
+              Function.pipe(
                 get(node),
                 Option.flatMap((node) => (node.id === 'root' ? Option.some(get(name)) : Option.none())),
                 Option.filter((name) => name !== 'removed'),
@@ -286,7 +344,7 @@ describe('GraphBuilder', () => {
           id: 'connector1',
           connector: (node) =>
             Rx.make((get) =>
-              pipe(
+              Function.pipe(
                 get(node),
                 Option.flatMap((node) => (node.id === EXAMPLE_ID ? Option.some(get(sub)) : Option.none())),
                 Option.map((sub) => [{ id: exampleId(2), type: EXAMPLE_TYPE, data: sub }]),
@@ -298,7 +356,7 @@ describe('GraphBuilder', () => {
           id: 'connector2',
           connector: (node) =>
             Rx.make((get) =>
-              pipe(
+              Function.pipe(
                 get(node),
                 Option.flatMap((node) => (node.id === EXAMPLE_ID ? Option.some(node.data) : Option.none())),
                 Option.map((data) => [{ id: exampleId(3), type: EXAMPLE_TYPE, data }]),
@@ -382,7 +440,7 @@ describe('GraphBuilder', () => {
           id: 'connector',
           connector: (node) => {
             return Rx.make((get) =>
-              pipe(
+              Function.pipe(
                 get(node),
                 Option.map((node) => (node.data ? node.data + 1 : 1)),
                 Option.filter((data) => data <= 5),
@@ -418,7 +476,7 @@ describe('GraphBuilder', () => {
           id: 'connector',
           connector: (node) =>
             Rx.make((get) =>
-              pipe(
+              Function.pipe(
                 get(node),
                 Option.map((node) => (node.data ? node.data + 1 : 1)),
                 Option.filter((data) => data <= 5),

package/src/graph-builder.ts

@@ -4,14 +4,22 @@
 
 import { Registry, Rx } from '@effect-rx/rx-react';
 import { effect } from '@preact/signals-core';
-import { Array, type Option, pipe, Record } from 'effect';
+import * as Array from 'effect/Array';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import * as Record from 'effect/Record';
 
-import { type MulticastObservable, type CleanupFn } from '@dxos/async';
+import { type CleanupFn, type MulticastObservable, type Trigger } from '@dxos/async';
 import { log } from '@dxos/log';
-import { byPosition, getDebugName, isNode, isNonNullable, type MaybePromise, type Position } from '@dxos/util';
+import { type MaybePromise, type Position, byPosition, getDebugName, isNode, isNonNullable } from '@dxos/util';
 
-import { ACTION_GROUP_TYPE, ACTION_TYPE, Graph, ROOT_ID, type GraphParams, type ExpandableGraph } from './graph';
-import { actionGroupSymbol, type ActionData, type Node, type NodeArg, type Relation } from './node';
+import { ACTION_GROUP_TYPE, ACTION_TYPE, type ExpandableGraph, Graph, type GraphParams, ROOT_ID } from './graph';
+import { type ActionData, type Node, type NodeArg, type Relation, actionGroupSymbol } from './node';
+
+/**
+ * Graph builder extension for adding nodes to the graph based on a node id.
+ */
+export type ResolverExtension = (id: string) => Rx.Rx<NodeArg<any> | null>;
 
 /**
  * Graph builder extension for adding nodes to the graph based on a connection to an existing node.
@@ -49,8 +57,7 @@ export type CreateExtensionOptions = {
   id: string;
   relation?: Relation;
   position?: Position;
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // resolver?: ResolverExtension;
+  resolver?: ResolverExtension;
   connector?: ConnectorExtension;
   actions?: ActionsExtension;
   actionGroups?: ActionGroupsExtension;
@@ -64,12 +71,16 @@ export const createExtension = (extension: CreateExtensionOptions): BuilderExten
     id,
     position = 'static',
     relation = 'outbound',
+    resolver: _resolver,
     connector: _connector,
     actions: _actions,
     actionGroups: _actionGroups,
   } = extension;
   const getId = (key: string) => `${id}/${key}`;
 
+  const resolver =
+    _resolver && Rx.family((id: string) => _resolver(id).pipe(Rx.withLabel(`graph-builder:_resolver:${id}`)));
+
   const connector =
     _connector &&
     Rx.family((node: Rx.Rx<Option.Option<Node>>) =>
@@ -87,7 +98,7 @@ export const createExtension = (extension: CreateExtensionOptions): BuilderExten
     Rx.family((node: Rx.Rx<Option.Option<Node>>) => _actions(node).pipe(Rx.withLabel(`graph-builder:_actions:${id}`)));
 
   return [
-    // resolver ? { id: getId('resolver'), position, resolver } : undefined,
+    resolver ? { id: getId('resolver'), position, resolver } : undefined,
     connector
       ? ({
           id: getId('connector'),
@@ -157,7 +168,7 @@ export type BuilderExtension = Readonly<{
   id: string;
   position: Position;
   relation?: Relation; // Only for connector.
-  // resolver?: ResolverExtension;
+  resolver?: ResolverExtension;
   connector?: (node: Rx.Rx<Option.Option<Node>>) => Rx.Rx<NodeArg<any>[]>;
 }>;
 
@@ -179,12 +190,12 @@ export const flattenExtensions = (extension: BuilderExtensions, acc: BuilderExte
 //   Should track LRU nodes that are not in the set/radius and remove them beyond a certain threshold.
 export class GraphBuilder {
   // TODO(wittjosiah): Use Context.
-  private readonly _connectorSubscriptions = new Map<string, CleanupFn>();
+  private readonly _subscriptions = new Map<string, CleanupFn>();
   private readonly _extensions = Rx.make(Record.empty<string, BuilderExtension>()).pipe(
     Rx.keepAlive,
     Rx.withLabel('graph-builder:extensions'),
   );
-
+  private readonly _initialized: Record<string, Trigger> = {};
   private readonly _registry: Registry.Registry;
   private readonly _graph: Graph;
 
@@ -194,7 +205,7 @@ export class GraphBuilder {
       ...params,
       registry: this._registry,
       onExpand: (id, relation) => this._onExpand(id, relation),
-      // onInitialize: (id) => this._onInitialize(id),
+      onInitialize: (id) => this._onInitialize(id),
       onRemoveNode: (id) => this._onRemoveNode(id),
     });
   }
@@ -275,16 +286,31 @@ export class GraphBuilder {
   }
 
   destroy(): void {
-    this._connectorSubscriptions.forEach((unsubscribe) => unsubscribe());
-    this._connectorSubscriptions.clear();
+    this._subscriptions.forEach((unsubscribe) => unsubscribe());
+    this._subscriptions.clear();
   }
 
+  private readonly _resolvers = Rx.family<string, Rx.Rx<Option.Option<NodeArg<any>>>>((id) => {
+    return Rx.make((get) => {
+      return Function.pipe(
+        get(this._extensions),
+        Record.values,
+        Array.sortBy(byPosition),
+        Array.map(({ resolver }) => resolver),
+        Array.filter(isNonNullable),
+        Array.map((resolver) => get(resolver(id))),
+        Array.filter(isNonNullable),
+        Array.head,
+      );
+    });
+  });
+
   private readonly _connectors = Rx.family<string, Rx.Rx<NodeArg<any>[]>>((key) => {
     return Rx.make((get) => {
       const [id, relation] = key.split('+');
       const node = this._graph.node(id);
 
-      return pipe(
+      return Function.pipe(
         get(this._extensions),
         Record.values,
         // TODO(wittjosiah): Sort on write rather than read.
@@ -341,17 +367,38 @@ export class GraphBuilder {
       { immediate: true },
     );
 
-    this._connectorSubscriptions.set(id, cancel);
+    this._subscriptions.set(id, cancel);
   }
 
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // private async _onInitialize(id: string) {
-  //   log('onInitialize', { id });
-  // }
+  // TODO(wittjosiah): If the same node is added by a connector, the resolver should probably cancel itself?
+  private async _onInitialize(id: string) {
+    log('onInitialize', { id });
+    const resolver = this._resolvers(id);
+
+    const cancel = this._registry.subscribe(
+      resolver,
+      (node) => {
+        const trigger = this._initialized[id];
+        Option.match(node, {
+          onSome: (node) => {
+            this._graph.addNodes([node]);
+            trigger?.wake();
+          },
+          onNone: () => {
+            trigger?.wake();
+            this._graph.removeNodes([id]);
+          },
+        });
+      },
+      { immediate: true },
+    );
+
+    this._subscriptions.set(id, cancel);
+  }
 
   private _onRemoveNode(id: string): void {
-    this._connectorSubscriptions.get(id)?.();
-    this._connectorSubscriptions.delete(id);
+    this._subscriptions.get(id)?.();
+    this._subscriptions.delete(id);
   }
 }
 

package/src/graph.test.ts

@@ -3,10 +3,10 @@
 //
 
 import { Registry, Rx } from '@effect-rx/rx-react';
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import { assert, describe, expect, onTestFinished, test } from 'vitest';
 
-import { getGraph, Graph, ROOT_ID, ROOT_TYPE } from './graph';
+import { Graph, ROOT_ID, ROOT_TYPE, getGraph } from './graph';
 import { type Node } from './node';
 
 const exampleId = (id: number) => `dx:test:${id}`;

package/src/graph.ts

@@ -3,15 +3,17 @@
 //
 
 import { Registry, Rx } from '@effect-rx/rx-react';
-import { Option, pipe, Record } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import * as Record from 'effect/Record';
 
 import { Event, Trigger } from '@dxos/async';
 import { todo } from '@dxos/debug';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { isNonNullable, type MakeOptional } from '@dxos/util';
+import { type MakeOptional, isNonNullable } from '@dxos/util';
 
-import { type NodeArg, type Node, type Relation, type Action, type ActionGroup } from './node';
+import { type Action, type ActionGroup, type Node, type NodeArg, type Relation } from './node';
 
 const graphSymbol = Symbol('graph');
 type DeepWriteable<T> = { -readonly [K in keyof T]: T[K] extends object ? DeepWriteable<T[K]> : T[K] };
@@ -59,8 +61,7 @@ export type GraphParams = {
   nodes?: MakeOptional<Node, 'data' | 'cacheable'>[];
   edges?: Record<string, Edges>;
   onExpand?: Graph['_onExpand'];
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // onInitialize?: Graph['_onInitialize'];
+  onInitialize?: Graph['_onInitialize'];
   onRemoveNode?: Graph['_onRemoveNode'];
 };
 
@@ -166,7 +167,7 @@ export interface ExpandableGraph extends ReadableGraph {
    *
    * Fires the `onInitialize` callback to provide initial data for a node.
    */
-  // initialize(id: string): Promise<void>;
+  initialize(id: string): Promise<void>;
 
   /**
    * Expand a node in the graph.
@@ -230,7 +231,7 @@ export class Graph implements WritableGraph {
   readonly onNodeChanged = new Event<{ id: string; node: Option.Option<Node> }>();
 
   private readonly _onExpand?: (id: string, relation: Relation) => void;
-  // private readonly _onInitialize?: (id: string) => Promise<void>;
+  private readonly _onInitialize?: (id: string) => Promise<void>;
   private readonly _onRemoveNode?: (id: string) => void;
 
   private readonly _registry: Registry.Registry;
@@ -309,8 +310,9 @@ export class Graph implements WritableGraph {
     }).pipe(Rx.withLabel(`graph:json:${id}`));
   });
 
-  constructor({ registry, nodes, edges, onExpand, onRemoveNode }: GraphParams = {}) {
+  constructor({ registry, nodes, edges, onInitialize, onExpand, onRemoveNode }: GraphParams = {}) {
     this._registry = registry ?? Registry.make();
+    this._onInitialize = onInitialize;
     this._onExpand = onExpand;
     this._onRemoveNode = onRemoveNode;
 
@@ -379,15 +381,14 @@ export class Graph implements WritableGraph {
     return this._registry.get(this.edges(id));
   }
 
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // async initialize(id: string) {
-  //   const initialized = Record.get(this._initialized, id).pipe(Option.getOrElse(() => false));
-  //   log('initialize', { id, initialized });
-  //   if (!initialized) {
-  //     await this._onInitialize?.(id);
-  //     Record.set(this._initialized, id, true);
-  //   }
-  // }
+  async initialize(id: string) {
+    const initialized = Record.get(this._initialized, id).pipe(Option.getOrElse(() => false));
+    log('initialize', { id, initialized });
+    if (!initialized) {
+      await this._onInitialize?.(id);
+      Record.set(this._initialized, id, true);
+    }
+  }
 
   expand(id: string, relation: Relation = 'outbound'): void {
     const key = `${id}$${relation}`;
@@ -554,7 +555,7 @@ export class Graph implements WritableGraph {
   }
 
   getPath({ source = 'root', target }: { source?: string; target: string }): Option.Option<string[]> {
-    return pipe(
+    return Function.pipe(
       this.getNode(source),
       Option.flatMap((node) => {
         let found: Option.Option<string[]> = Option.none();

package/src/node.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type MaybePromise, type MakeOptional } from '@dxos/util';
+import { type MakeOptional, type MaybePromise } from '@dxos/util';
 
 import { ACTION_GROUP_TYPE, ACTION_TYPE } from './graph';
 

package/src/signals-integration.test.ts

@@ -7,14 +7,14 @@ import { signal } from '@preact/signals-core';
 import { afterEach, beforeEach, describe, expect, onTestFinished, test } from 'vitest';
 
 import { Trigger } from '@dxos/async';
+import { Obj, Type } from '@dxos/echo';
+import { Ref } from '@dxos/echo/internal';
 import { Filter } from '@dxos/echo-db';
 import { EchoTestBuilder } from '@dxos/echo-db/testing';
-import { Expando, Ref } from '@dxos/echo-schema';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
-import { live } from '@dxos/live-object';
 
 import { ROOT_ID } from './graph';
-import { createExtension, GraphBuilder, rxFromSignal } from './graph-builder';
+import { GraphBuilder, createExtension, rxFromSignal } from './graph-builder';
 import { rxFromQuery } from './testing';
 
 registerSignalsRuntime();
@@ -174,15 +174,15 @@ describe('signals integration', () => {
       const registry = Registry.make();
       await using peer = await dbBuilder.createPeer();
       await using db = await peer.createDatabase();
-      db.add(live(Expando, { name: 'a' }));
-      db.add(live(Expando, { name: 'b' }));
+      db.add(Obj.make(Type.Expando, { name: 'a' }));
+      db.add(Obj.make(Type.Expando, { name: 'b' }));
 
       const builder = new GraphBuilder({ registry });
       builder.addExtension(
         createExtension({
           id: 'expando',
           connector: () => {
-            const query = db.query(Filter.type(Expando));
+            const query = db.query(Filter.type(Type.Expando));
 
             return Rx.make((get) => {
               const objects = get(rxFromQuery(query));
@@ -205,7 +205,7 @@ describe('signals integration', () => {
       graph.expand(ROOT_ID);
       expect(count).to.eq(2);
 
-      const object = db.add(live(Expando, { name: 'c' }));
+      const object = db.add(Obj.make(Type.Expando, { name: 'c' }));
       await db.flush();
       expect(count).to.eq(3);
 

package/src/stories/EchoGraph.stories.tsx

@@ -2,40 +2,40 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Registry, RegistryContext, Rx, useRxValue } from '@effect-rx/rx-react';
-import { type Meta } from '@storybook/react-vite';
-import { Option, pipe } from 'effect';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import {
-  live,
-  isSpace,
+  Expando,
+  Filter,
+  type Live,
   Query,
   type QueryResult,
   type Space,
   SpaceState,
-  Expando,
-  type Live,
-  Filter,
+  isSpace,
+  live,
 } from '@dxos/client/echo';
 import { Obj, Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { type Client, useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Input, Select, Icon, IconButton } from '@dxos/react-ui';
+import { Icon, IconButton, Input, Select } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { Path, Tree } from '@dxos/react-ui-list';
 import { getSize, mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
 import { byPosition, isNonNullable, safeParseInt } from '@dxos/util';
 
-import { JsonTree } from './Tree';
 import { type ExpandableGraph, ROOT_ID } from '../graph';
 import { GraphBuilder, createExtension, rxFromObservable, rxFromSignal } from '../graph-builder';
 import { type Node } from '../node';
 import { rxFromQuery } from '../testing';
 
+import { JsonTree } from './Tree';
+
 const DEFAULT_PERIOD = 500;
 
 enum Action {
@@ -61,7 +61,7 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
     id: 'space',
     connector: (node) =>
       Rx.make((get) =>
-        pipe(
+        Function.pipe(
           get(node),
           Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
           Option.map(() => {
@@ -85,7 +85,7 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
     connector: (node) => {
       let query: QueryResult<Live<Expando>> | undefined;
       return Rx.make((get) =>
-        pipe(
+        Function.pipe(
           get(node),
           Option.flatMap((node) => (isSpace(node.data) ? Option.some(node.data) : Option.none())),
           Option.map((space) => {
@@ -246,23 +246,25 @@ const Controls = ({ children }: PropsWithChildren) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'sdk/app-graph/EchoGraph',
   decorators: [
+    withTheme,
     withClientProvider({
       createIdentity: true,
-      onIdentityCreated: async ({ client }) => {
+      onCreateIdentity: async ({ client }) => {
         await client.spaces.create();
         await client.spaces.create();
       },
     }),
-    withTheme,
   ],
-};
+} satisfies Meta<typeof Registry>;
 
 export default meta;
 
-export const JsonView = {
+type Story = StoryObj<typeof meta>;
+
+export const JsonView: Story = {
   render: () => {
     const client = useClient();
     const registry = useContext(RegistryContext);
@@ -278,7 +280,7 @@ export const JsonView = {
   },
 };
 
-export const TreeView = {
+export const TreeView: Story = {
   render: () => {
     const client = useClient();
     const registry = useContext(RegistryContext);