@dxos/graph 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/dist/types/src/selection.d.ts

@@ -0,0 +1,22 @@
+import { type ReadonlySignal } from '@preact/signals-core';
+/**
+ * Reactive selection model.
+ */
+export declare class SelectionModel {
+    private readonly _singleSelect;
+    private readonly _selected;
+    private readonly _selectedIds;
+    constructor(_singleSelect?: boolean);
+    toJSON(): {
+        selected: string[];
+    };
+    get size(): number;
+    get selected(): ReadonlySignal<string[]>;
+    contains(id: string): boolean;
+    clear(): void;
+    add(id: string): void;
+    remove(id: string): void;
+    setSelected(ids: string[], shift?: boolean): void;
+    toggleSelected(ids: string[], shift?: boolean): void;
+}
+//# sourceMappingURL=selection.d.ts.map

package/dist/types/src/selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../src/selection.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,KAAK,cAAc,EAAe,MAAM,sBAAsB,CAAC;AAI1F;;GAEG;AACH,qBAAa,cAAc;IAIb,OAAO,CAAC,QAAQ,CAAC,aAAa;IAH1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAkD;IAC5E,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6D;gBAE7D,aAAa,GAAE,OAAe;IAE3D,MAAM,IAAI;QAAE,QAAQ,EAAE,MAAM,EAAE,CAAA;KAAE;IAMhC,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,QAAQ,IAAI,cAAc,CAAC,MAAM,EAAE,CAAC,CAEvC;IAED,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAI7B,KAAK,IAAI,IAAI;IAIb,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAOrB,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAOxB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,UAAQ,GAAG,IAAI;IAI/C,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,UAAQ,GAAG,IAAI;CAYnD"}

package/dist/types/src/types.d.ts

@@ -1,30 +1,32 @@
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
 import { type Specialize } from '@dxos/util';
-export declare const BaseGraphNode: S.Struct<{
-    id: typeof S.String;
-    type: S.optional<typeof S.String>;
-    data: S.optional<typeof S.Any>;
+export declare const BaseGraphNode: Schema.Struct<{
+    id: typeof Schema.String;
+    type: Schema.optional<typeof Schema.String>;
+    data: Schema.optional<typeof Schema.Any>;
 }>;
 /** Raw base type. */
-export type BaseGraphNode = S.Schema.Type<typeof BaseGraphNode>;
+export type BaseGraphNode = Schema.Schema.Type<typeof BaseGraphNode>;
 /** Typed node data. */
-export type GraphNode<Data = any, Optional extends boolean = false> = Specialize<BaseGraphNode, Optional extends true ? {
+type GraphNode<Data = any, Optional extends boolean = false> = Specialize<BaseGraphNode, Optional extends true ? {
     data?: Data;
 } : {
     data: Data;
 }>;
 export declare namespace GraphNode {
-    type Optional<T = any> = GraphNode<T, true>;
+    type Any = GraphNode<any, true>;
+    type Optional<Data = any> = GraphNode<Data, true>;
+    type Required<Data = any> = GraphNode<Data, false>;
 }
-export declare const BaseGraphEdge: S.Struct<{
-    id: typeof S.String;
-    type: S.optional<typeof S.String>;
-    data: S.optional<typeof S.Any>;
-    source: typeof S.String;
-    target: typeof S.String;
+export declare const BaseGraphEdge: Schema.Struct<{
+    id: typeof Schema.String;
+    type: Schema.optional<typeof Schema.String>;
+    source: typeof Schema.String;
+    target: typeof Schema.String;
+    data: Schema.optional<typeof Schema.Any>;
 }>;
 /** Raw base type. */
-export type BaseGraphEdge = S.Schema.Type<typeof BaseGraphEdge>;
+export type BaseGraphEdge = Schema.Schema.Type<typeof BaseGraphEdge>;
 /** Typed edge data. */
 export type GraphEdge<Data = any, Optional extends boolean = false> = Specialize<BaseGraphEdge, Optional extends true ? {
     data?: Data;
@@ -32,28 +34,25 @@ export type GraphEdge<Data = any, Optional extends boolean = false> = Specialize
     data: Data;
 }>;
 export declare namespace GraphEdge {
-    type Optional<T = any> = GraphEdge<T, true>;
+    type Any = GraphEdge<any, true>;
+    type Optional<Data = any> = GraphEdge<Data, true>;
+    type Required<Data = any> = GraphEdge<Data, false>;
 }
-/**
- * Generic graph.
- */
-export declare const Graph: S.Struct<{
-    id: S.optional<typeof S.String>;
-    nodes: S.mutable<S.Array$<S.extend<S.Struct<{
-        id: typeof S.String;
-        type: S.optional<typeof S.String>;
-        data: S.optional<typeof S.Any>;
-    }>, S.TypeLiteral<{}, readonly [{
-        readonly key: typeof S.String;
-        readonly value: typeof S.Any;
-    }]>>>>;
-    edges: S.mutable<S.Array$<S.Struct<{
-        id: typeof S.String;
-        type: S.optional<typeof S.String>;
-        data: S.optional<typeof S.Any>;
-        source: typeof S.String;
-        target: typeof S.String;
+export declare const Graph: Schema.Struct<{
+    id: Schema.optional<typeof Schema.String>;
+    nodes: Schema.mutable<Schema.Array$<Schema.Struct<{
+        id: typeof Schema.String;
+        type: Schema.optional<typeof Schema.String>;
+        data: Schema.optional<typeof Schema.Any>;
+    }>>>;
+    edges: Schema.mutable<Schema.Array$<Schema.Struct<{
+        id: typeof Schema.String;
+        type: Schema.optional<typeof Schema.String>;
+        source: typeof Schema.String;
+        target: typeof Schema.String;
+        data: Schema.optional<typeof Schema.Any>;
     }>>>;
 }>;
-export type Graph = S.Schema.Type<typeof Graph>;
+export type Graph = Schema.Schema.Type<typeof Graph>;
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,eAAO,MAAM,aAAa;;;;EAIxB,CAAC;AAEH,qBAAqB;AACrB,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,aAAa,CAAC,CAAC;AAEhE,uBAAuB;AACvB,MAAM,MAAM,SAAS,CAAC,IAAI,GAAG,GAAG,EAAE,QAAQ,SAAS,OAAO,GAAG,KAAK,IAAI,UAAU,CAC9E,aAAa,EACb,QAAQ,SAAS,IAAI,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CACzD,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,SAAS,CAAC;IACjC,KAAY,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;CACpD;AAED,eAAO,MAAM,aAAa;;;;;;EAMxB,CAAC;AAEH,qBAAqB;AACrB,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,aAAa,CAAC,CAAC;AAEhE,uBAAuB;AACvB,MAAM,MAAM,SAAS,CAAC,IAAI,GAAG,GAAG,EAAE,QAAQ,SAAS,OAAO,GAAG,KAAK,IAAI,UAAU,CAC9E,aAAa,EACb,QAAQ,SAAS,IAAI,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CACzD,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,SAAS,CAAC;IACjC,KAAY,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;CACpD;AAOD;;GAEG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;EAIhB,CAAC;AAEH,MAAM,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAO7C,eAAO,MAAM,aAAa;;;;EAIxB,CAAC;AAEH,qBAAqB;AACrB,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,aAAa,CAAC,CAAC;AAErE,uBAAuB;AACvB,KAAK,SAAS,CAAC,IAAI,GAAG,GAAG,EAAE,QAAQ,SAAS,OAAO,GAAG,KAAK,IAAI,UAAU,CACvE,aAAa,EACb,QAAQ,SAAS,IAAI,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CACzD,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,SAAS,CAAC;IACjC,KAAY,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IACvC,KAAY,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACzD,KAAY,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;CAC3D;AAMD,eAAO,MAAM,aAAa;;;;;;EAMxB,CAAC;AAEH,qBAAqB;AACrB,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,aAAa,CAAC,CAAC;AAErE,uBAAuB;AACvB,MAAM,MAAM,SAAS,CAAC,IAAI,GAAG,GAAG,EAAE,QAAQ,SAAS,OAAO,GAAG,KAAK,IAAI,UAAU,CAC9E,aAAa,EACb,QAAQ,SAAS,IAAI,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CACzD,CAAC;AAEF,MAAM,CAAC,OAAO,WAAW,SAAS,CAAC;IACjC,KAAY,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IACvC,KAAY,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACzD,KAAY,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;CAC3D;AAMD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;EAIhB,CAAC;AAEH,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC"}

package/dist/types/src/util.d.ts

@@ -1,6 +1,3 @@
-import { type ReactiveEchoObject } from '@dxos/echo-db';
-import { GraphModel } from './model';
-import { type GraphNode } from './types';
 type EdgeMeta = {
     source: string;
     target: string;
@@ -8,10 +5,5 @@ type EdgeMeta = {
 };
 export declare const createEdgeId: ({ source, target, relation }: EdgeMeta) => string;
 export declare const parseEdgeId: (id: string) => EdgeMeta;
-/**
- * Creates a new reactive graph from a set of ECHO objects.
- * References are mapped onto graph edges.
- */
-export declare const createGraph: (objects: ReactiveEchoObject<any>[]) => GraphModel<GraphNode<ReactiveEchoObject<any>>>;
 export {};
 //# sourceMappingURL=util.d.ts.map

package/dist/types/src/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAOxD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,KAAK,QAAQ,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE,eAAO,MAAM,YAAY,iCAAkC,QAAQ,WAIlE,CAAC;AAEF,eAAO,MAAM,WAAW,OAAQ,MAAM,KAAG,QAIxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,kBAAkB,CAAC,GAAG,CAAC,EAAE,KAAG,UAAU,CAAC,SAAS,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAiC7G,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AASA,KAAK,QAAQ,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtE,eAAO,MAAM,YAAY,GAAI,8BAA8B,QAAQ,WAIlE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,IAAI,MAAM,KAAG,QAIxC,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/graph",
-  "version": "0.8.2-staging.7ac8446",
+  "version": "0.8.3-main.672df60",
   "description": "Low-level graph API",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -18,11 +18,8 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ],
       "types": [
-        "dist/types/src/types/index.d.ts"
+        "dist/types/src/types.d.ts"
       ]
     }
   },
@@ -31,25 +28,29 @@
     "src"
   ],
   "dependencies": {
-    "@preact/signals-core": "^1.6.0",
+    "@preact/signals-core": "^1.9.0",
+    "effect": "3.14.21",
     "lodash.defaultsdeep": "^4.6.1",
-    "@dxos/async": "0.8.2-staging.7ac8446",
-    "@dxos/echo-db": "0.8.2-staging.7ac8446",
-    "@dxos/debug": "0.8.2-staging.7ac8446",
-    "@dxos/echo-schema": "0.8.2-staging.7ac8446",
-    "@dxos/invariant": "0.8.2-staging.7ac8446",
-    "@dxos/live-object": "0.8.2-staging.7ac8446",
-    "@dxos/log": "0.8.2-staging.7ac8446",
-    "@dxos/schema": "0.8.2-staging.7ac8446",
-    "@dxos/util": "0.8.2-staging.7ac8446"
+    "@dxos/async": "0.8.3-main.672df60",
+    "@dxos/debug": "0.8.3-main.672df60",
+    "@dxos/echo-db": "0.8.3-main.672df60",
+    "@dxos/echo-schema": "0.8.3-main.672df60",
+    "@dxos/echo-signals": "0.8.3-main.672df60",
+    "@dxos/invariant": "0.8.3-main.672df60",
+    "@dxos/util": "0.8.3-main.672df60",
+    "@dxos/live-object": "0.8.3-main.672df60",
+    "@dxos/log": "0.8.3-main.672df60"
   },
   "devDependencies": {
     "@antv/graphlib": "^2.0.4",
     "@antv/layout": "^1.2.13",
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@dxos/echo-db": "0.8.2-staging.7ac8446",
-    "@dxos/random": "0.8.2-staging.7ac8446",
-    "@dxos/echo-schema": "0.8.2-staging.7ac8446"
+    "@dxos/echo-db": "0.8.3-main.672df60",
+    "@dxos/echo-schema": "0.8.3-main.672df60",
+    "@dxos/random": "0.8.3-main.672df60"
+  },
+  "peerDependencies": {
+    "effect": "^3.13.3"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -3,5 +3,6 @@
 //
 
 export * from './model';
+export * from './selection';
 export * from './types';
 export * from './util';

package/src/model.test.ts

@@ -2,21 +2,27 @@
 // Copyright 2024 DXOS.org
 //
 
+import { effect } from '@preact/signals-core';
+import { Schema } from 'effect';
 import { describe, test } from 'vitest';
 
-import { S } from '@dxos/echo-schema';
+import { Trigger } from '@dxos/async';
+import { registerSignalsRuntime } from '@dxos/echo-signals';
+import { live } from '@dxos/live-object';
 
-import { GraphModel } from './model';
-import { BaseGraphNode, type GraphNode } from './types';
+import { GraphModel, ReactiveGraphModel } from './model';
+import { BaseGraphNode, type Graph, type GraphNode } from './types';
 
-const TestNode = S.extend(
+registerSignalsRuntime();
+
+const TestNode = Schema.extend(
   BaseGraphNode,
-  S.Struct({
-    value: S.String,
+  Schema.Struct({
+    value: Schema.String,
   }),
 );
 
-type TestNode = S.Schema.Type<typeof TestNode>;
+type TestNode = Schema.Schema.Type<typeof TestNode>;
 
 type TestData = { value: string };
 
@@ -25,7 +31,7 @@ describe('Graph', () => {
     const graph = new GraphModel();
     expect(graph.nodes).to.have.length(0);
     expect(graph.edges).to.have.length(0);
-    expect(graph.toJSON()).to.deep.eq({ nodes: [], edges: [] });
+    expect(graph.toJSON()).to.deep.eq({ nodes: 0, edges: 0 });
   });
 
   test('extended', ({ expect }) => {
@@ -34,9 +40,71 @@ describe('Graph', () => {
     expect(node.value.length).to.eq(4);
   });
 
+  test('reactive', async ({ expect }) => {
+    const graph = new GraphModel(live({ nodes: [], edges: [] }));
+
+    const done = new Trigger<Graph>();
+
+    // NOTE: Requires `registerSignalsRuntime` to be called.
+    const unsubscribe = effect(() => {
+      if (graph.edges.length === 2) {
+        done.wake(graph.graph);
+      }
+    });
+
+    setTimeout(() => {
+      graph.builder.addNode({ id: 'node-1' });
+      graph.builder.addNode({ id: 'node-2' });
+      graph.builder.addNode({ id: 'node-3' });
+    });
+
+    setTimeout(() => {
+      graph.builder.addEdge({ source: 'node-1', target: 'node-2' });
+      graph.builder.addEdge({ source: 'node-2', target: 'node-3' });
+    });
+
+    {
+      const graph = await done.wait();
+      expect(graph.nodes).to.have.length(3);
+      expect(graph.edges).to.have.length(2);
+    }
+
+    unsubscribe();
+  });
+
+  test('reactive model', async ({ expect }) => {
+    const graph = new ReactiveGraphModel();
+
+    const done = new Trigger<Graph>();
+    const unsubscribe = graph.subscribe((graph) => {
+      if (graph.edges.length === 2) {
+        done.wake(graph.graph);
+      }
+    });
+
+    setTimeout(() => {
+      graph.builder.addNode({ id: 'node-1' });
+      graph.builder.addNode({ id: 'node-2' });
+      graph.builder.addNode({ id: 'node-3' });
+    });
+
+    setTimeout(() => {
+      graph.builder.addEdge({ source: 'node-1', target: 'node-2' });
+      graph.builder.addEdge({ source: 'node-2', target: 'node-3' });
+    });
+
+    {
+      const graph = await done.wait();
+      expect(graph.nodes).to.have.length(3);
+      expect(graph.edges).to.have.length(2);
+    }
+
+    unsubscribe();
+  });
+
   test('optional', ({ expect }) => {
     {
-      const graph = new GraphModel<GraphNode<string>>();
+      const graph = new GraphModel<GraphNode.Required<string>>();
       const node = graph.addNode({ id: 'test', data: 'test' });
       expect(node.data.length).to.eq(4);
     }
@@ -49,7 +117,7 @@ describe('Graph', () => {
   });
 
   test('add and remove subgraphs', ({ expect }) => {
-    const graph = new GraphModel<GraphNode<TestData>>();
+    const graph = new GraphModel<GraphNode.Required<TestData>>();
     graph.builder
       .addNode({ id: 'node1', data: { value: 'test' } })
       .addNode({ id: 'node2', data: { value: 'test' } })

package/src/model.ts

@@ -2,16 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
+import { effect } from '@preact/signals-core';
+
 import { inspectCustom } from '@dxos/debug';
 import { failedInvariant, invariant } from '@dxos/invariant';
-import { getSnapshot } from '@dxos/live-object';
-import { type MakeOptional, isNotFalsy, removeBy, stripUndefined } from '@dxos/util';
+import { type Live, live } from '@dxos/live-object';
+import { type MakeOptional, isNotFalsy, removeBy } from '@dxos/util';
 
-import { type Graph, type GraphNode, type GraphEdge, type BaseGraphNode, type BaseGraphEdge } from './types';
+import { type BaseGraphEdge, type BaseGraphNode, type Graph, type GraphEdge, type GraphNode } from './types';
 import { createEdgeId } from './util';
 
 /**
- * Wrapper class contains reactive nodes and edges.
+ * Readonly Graph wrapper.
  */
 export class ReadonlyGraphModel<
   Node extends BaseGraphNode = BaseGraphNode,
@@ -20,10 +22,13 @@ export class ReadonlyGraphModel<
   protected readonly _graph: Graph;
 
   /**
-   * NOTE: Pass in simple Graph or ReactiveObject.
+   * NOTE: Pass in simple Graph or Live.
    */
   constructor(graph?: Graph) {
-    this._graph = graph ?? { nodes: [], edges: [] };
+    this._graph = graph ?? {
+      nodes: [],
+      edges: [],
+    };
   }
 
   [inspectCustom]() {
@@ -33,12 +38,11 @@ export class ReadonlyGraphModel<
   /**
    * Return stable sorted JSON representation of graph.
    */
-  // TODO(burdon): Create separate toJson method with computed signal.
   toJSON() {
-    const { id, nodes, edges } = getSnapshot(this._graph);
-    nodes.sort(({ id: a }, { id: b }) => a.localeCompare(b));
-    edges.sort(({ id: a }, { id: b }) => a.localeCompare(b));
-    return stripUndefined({ id, nodes, edges });
+    return {
+      nodes: this.nodes.length,
+      edges: this.edges.length,
+    };
   }
 
   get graph(): Graph {
@@ -65,7 +69,7 @@ export class ReadonlyGraphModel<
     return this.findNode(id) ?? failedInvariant();
   }
 
-  filterNodes({ type }: Partial<GraphNode> = {}): Node[] {
+  filterNodes({ type }: Partial<GraphNode.Any> = {}): Node[] {
     return this.nodes.filter((node) => !type || type === node.type);
   }
 
@@ -111,13 +115,13 @@ export class ReadonlyGraphModel<
 }
 
 /**
- * Typed wrapper.
+ * Mutable Graph wrapper.
  */
 export abstract class AbstractGraphModel<
-  Node extends BaseGraphNode,
-  Edge extends BaseGraphEdge,
-  Model extends AbstractGraphModel<Node, Edge, Model, Builder>,
-  Builder extends AbstractGraphBuilder<Node, Edge, Model>,
+  Node extends BaseGraphNode = BaseGraphNode,
+  Edge extends BaseGraphEdge = BaseGraphEdge,
+  Model extends AbstractGraphModel<Node, Edge, Model, Builder> = any,
+  Builder extends AbstractGraphBuilder<Node, Edge, Model> = AbstractGraphBuilder<Node, Edge, Model>,
 > extends ReadonlyGraphModel<Node, Edge> {
   /**
    * Allows chaining.
@@ -177,8 +181,8 @@ export abstract class AbstractGraphModel<
   }
 
   removeNode(id: string): Model {
-    const nodes = removeBy<Node>(this._graph.nodes as Node[], (node) => node.id === id);
     const edges = removeBy<Edge>(this._graph.edges as Edge[], (edge) => edge.source === id || edge.target === id);
+    const nodes = removeBy<Node>(this._graph.nodes as Node[], (node) => node.id === id);
     return this.copy({ nodes, edges });
   }
 
@@ -199,7 +203,7 @@ export abstract class AbstractGraphModel<
 }
 
 /**
- * Chainable wrapper
+ * Chainable builder wrapper
  */
 export abstract class AbstractGraphBuilder<
   Node extends BaseGraphNode,
@@ -242,6 +246,9 @@ export abstract class AbstractGraphBuilder<
   }
 }
 
+/**
+ * Basic model.
+ */
 export class GraphModel<
   Node extends BaseGraphNode = BaseGraphNode,
   Edge extends BaseGraphEdge = BaseGraphEdge,
@@ -250,16 +257,60 @@ export class GraphModel<
     return new GraphBuilder<Node, Edge>(this);
   }
 
-  override copy(graph?: Partial<Graph>) {
+  override copy(graph?: Partial<Graph>): GraphModel<Node, Edge> {
     return new GraphModel<Node, Edge>({ nodes: graph?.nodes ?? [], edges: graph?.edges ?? [] });
   }
 }
 
+export type GraphModelSubscription = (model: GraphModel, graph: Live<Graph>) => void;
+
+/**
+ * Subscription.
+ * NOTE: Requires `registerSignalsRuntime` to be called.
+ */
+export const subscribe = (model: GraphModel, cb: GraphModelSubscription, fire = false) => {
+  if (fire) {
+    cb(model, model.graph);
+  }
+
+  return effect(() => {
+    cb(model, model.graph); // TODO(burdon): This won't work unless model.graph is reactive.
+  });
+};
+
+/**
+ * Basic reactive model.
+ */
+export class ReactiveGraphModel<
+  Node extends BaseGraphNode = BaseGraphNode,
+  Edge extends BaseGraphEdge = BaseGraphEdge,
+> extends GraphModel<Node, Edge> {
+  constructor(graph?: Partial<Graph>) {
+    super(
+      live({
+        nodes: graph?.nodes ?? [],
+        edges: graph?.edges ?? [],
+      }),
+    );
+  }
+
+  override copy(graph?: Partial<Graph>): ReactiveGraphModel<Node, Edge> {
+    return new ReactiveGraphModel<Node, Edge>(graph);
+  }
+
+  subscribe(cb: GraphModelSubscription, fire = false): () => void {
+    return subscribe(this, cb, fire);
+  }
+}
+
+/**
+ * Basic builder.
+ */
 export class GraphBuilder<
   Node extends BaseGraphNode = BaseGraphNode,
   Edge extends BaseGraphEdge = BaseGraphEdge,
 > extends AbstractGraphBuilder<Node, Edge, GraphModel<Node, Edge>> {
-  override call(cb: (builder: this) => void) {
+  override call(cb: (builder: this) => void): this {
     cb(this);
     return this;
   }

package/src/selection.ts

@@ -0,0 +1,70 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { computed, signal, type ReadonlySignal, type Signal } from '@preact/signals-core';
+
+import { invariant } from '@dxos/invariant';
+
+/**
+ * Reactive selection model.
+ */
+export class SelectionModel {
+  private readonly _selected: Signal<Set<string>> = signal(new Set<string>());
+  private readonly _selectedIds = computed(() => Array.from(this._selected.value.values()));
+
+  constructor(private readonly _singleSelect: boolean = false) {}
+
+  toJSON(): { selected: string[] } {
+    return {
+      selected: Array.from(this._selected.value.values()),
+    };
+  }
+
+  get size(): number {
+    return this._selected.value.size;
+  }
+
+  get selected(): ReadonlySignal<string[]> {
+    return this._selectedIds;
+  }
+
+  contains(id: string): boolean {
+    return this._selected.value.has(id);
+  }
+
+  clear(): void {
+    this._selected.value = new Set();
+  }
+
+  add(id: string): void {
+    invariant(id);
+    this._selected.value = new Set<string>(
+      this._singleSelect ? [id] : [...Array.from(this._selected.value.values()), id],
+    );
+  }
+
+  remove(id: string): void {
+    invariant(id);
+    this._selected.value = new Set<string>(Array.from(this._selected.value.values()).filter((_id) => _id !== id));
+  }
+
+  // TODO(burdon): Handle single select.
+
+  setSelected(ids: string[], shift = false): void {
+    this._selected.value = new Set([...(shift ? Array.from(this._selected.value.values()) : []), ...ids]);
+  }
+
+  toggleSelected(ids: string[], shift = false): void {
+    const set = new Set<string>(shift ? Array.from(this._selected.value.values()) : undefined);
+    ids.forEach((id) => {
+      if (this._selected.value.has(id)) {
+        set.delete(id);
+      } else {
+        set.add(id);
+      }
+    });
+
+    this._selected.value = set;
+  }
+}