diff --git a/README.md b/README.md
index d2c5486..512a762 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@ Interactive, infinitely zoomable, editable SVG diagrams from JSON Canvas documen
 | `system-canvas`            | Pure TypeScript core. Types, themes, edge routing, viewport math. Zero dependencies. |
 | `system-canvas-react`      | React components. Pan/zoom viewport, node renderers, breadcrumb navigation.          |
 | `system-canvas-standalone` | Self-contained IIFE bundle for `<script>` tag / CDN use. No build step required.     |
+| `system-canvas-collab`     | Yjs-backed multi-user collaboration. Binds a Y.Doc to the renderer's props + awareness → conflict-free multiplayer; you supply the transport. |
 
 ## Install
 
@@ -172,6 +173,40 @@ Interactions in editable mode:
 - **Hover** a node to reveal four connection handles (one per side); **drag** from a handle to another node to create an edge. Groups don't participate in edge creation.
 - **Click** to select, **Delete** or **Backspace** to remove the selected node or edge. **Escape** clears selection.
 
+## Multiplayer (`system-canvas-collab`)
+
+Conflict-free multi-user editing, backed by [Yjs](https://yjs.dev). The
+library owns the merge; you supply a transport (y-websocket, a hosted
+provider, or your own HTTP+pub/sub bridge).
+
+```bash
+npm install system-canvas-collab yjs
+```
+
+```tsx
+import * as Y from "yjs";
+import { WebsocketProvider } from "y-websocket";
+import { SystemCanvas } from "system-canvas-react";
+import { useYjsCanvas, useCollaborators } from "system-canvas-collab";
+
+const doc = new Y.Doc();
+const provider = new WebsocketProvider("wss://…", "room-id", doc);
+
+function Board() {
+  const { canvas, ...handlers } = useYjsCanvas(doc); // Y.Doc ⇄ CanvasData
+  const { collaborators, setLocalCursor } = useCollaborators(provider.awareness);
+  return (
+    <SystemCanvas canvas={canvas} editable collaborators={collaborators} {...handlers} />
+  );
+}
+```
+
+`useYjsCanvas` returns the controlled `canvas` plus every edit callback
+`<SystemCanvas>` needs, routing edits into the Y.Doc (field-level merge;
+per-user undo via `Y.UndoManager`). `useCollaborators` maps a Yjs
+`Awareness` to the `collaborators` prop for live cursors/selection. The
+renderer core is unchanged — collaboration is entirely opt-in.
+
 ## Props
 
 | Prop                | Type                                     | Description                                                        |
diff --git a/demo/package.json b/demo/package.json
index 652c90f..eaa4cbf 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -10,8 +10,12 @@
   "dependencies": {
     "system-canvas": "*",
     "system-canvas-react": "*",
+    "system-canvas-collab": "*",
+    "yjs": "^13.6.0",
+    "y-protocols": "^1.0.6",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "y-websocket": "^2.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
diff --git a/demo/src/CollabDemo.tsx b/demo/src/CollabDemo.tsx
new file mode 100644
index 0000000..07489e5
--- /dev/null
+++ b/demo/src/CollabDemo.tsx
@@ -0,0 +1,171 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as Y from "yjs";
+import { WebsocketProvider } from "y-websocket";
+import type { Awareness } from "y-protocols/awareness";
+import { SystemCanvas } from "system-canvas-react";
+import { darkTheme, screenToCanvas } from "system-canvas";
+import type { CanvasData, CanvasSelection, ViewportState } from "system-canvas";
+import {
+  seedYDoc,
+  useCollaborators,
+  useYjsCanvas,
+} from "system-canvas-collab";
+import { BroadcastChannelProvider } from "./broadcastProvider";
+
+const ROOM = "system-canvas-collab-demo";
+
+// Transport is chosen by URL:
+//   ?mode=collab          → BroadcastChannel (same-browser tabs, zero setup)
+//   ?mode=collab&ws=1     → y-websocket (ANY browser/window/machine; needs the
+//                            local relay: `npx y-websocket` on port 1234)
+const USE_WS =
+  new URLSearchParams(window.location.search).get("ws") === "1";
+const WS_URL = "ws://localhost:1234";
+
+/** The subset both providers expose that this demo needs. */
+interface Transport {
+  awareness: Awareness;
+  destroy(): void;
+}
+
+const SEED: CanvasData = {
+  theme: { base: "dark" },
+  nodes: [
+    { id: "n1", type: "text", x: -260, y: -80, width: 200, height: 90, text: "Drag me\n\nOpen a 2nd tab — I move there too" },
+    { id: "n2", type: "text", x: 40, y: -80, width: 200, height: 90, text: "Rename me while\nthe other tab moves me" },
+    { id: "n3", type: "text", x: -110, y: 120, width: 200, height: 90, text: "Add / delete nodes —\nboth tabs converge" },
+  ],
+  edges: [
+    { id: "e1", fromNode: "n1", toNode: "n2" },
+    { id: "e2", fromNode: "n1", toNode: "n3" },
+  ],
+};
+
+/**
+ * Deterministic seed update: seed a throwaway doc with a FIXED clientID
+ * and encode it once. Every tab applies these exact same bytes, so all
+ * tabs share one identical base state (idempotent) — instead of each tab
+ * seeding independently and creating divergent Y.Map instances for the
+ * same ids (which makes cross-tab edits silently not merge).
+ */
+const SEED_UPDATE: Uint8Array = (() => {
+  const d = new Y.Doc();
+  d.clientID = 0;
+  seedYDoc(d, SEED);
+  return Y.encodeStateAsUpdate(d);
+})();
+
+const COLORS = ["#ef4444", "#3b82f6", "#22c55e", "#eab308", "#a855f7", "#ec4899"];
+
+function makeUser() {
+  const n = Math.floor(Math.random() * 10000);
+  return { id: `u${n}`, name: `User ${n}`, color: COLORS[n % COLORS.length] };
+}
+
+/**
+ * A fully self-contained multiplayer canvas: one Y.Doc, synced across
+ * same-origin tabs via BroadcastChannel, bound to the renderer with
+ * `useYjsCanvas`. Open this URL in two tabs to see live conflict-free
+ * merge + selection presence. No server, no backend.
+ */
+export function CollabDemo() {
+  // useState lazy-init guarantees ONE stable doc + provider for the
+  // component's lifetime (useMemo is not a stability guarantee and can
+  // orphan side-effectful instances on a re-render).
+  const [doc] = useState(() => new Y.Doc());
+  const [provider] = useState<Transport>(() =>
+    USE_WS
+      ? new WebsocketProvider(WS_URL, ROOM, doc)
+      : new BroadcastChannelProvider(ROOM, doc),
+  );
+  useEffect(() => () => provider.destroy(), [provider]);
+
+  const { canvas, ...handlers } = useYjsCanvas(doc);
+  const { collaborators, setLocalUser, setLocalSelection, setLocalCursor } =
+    useCollaborators(provider.awareness);
+
+  // Live cursor sharing, computed demo-side (the library has no local-
+  // cursor-out prop yet — that's the clean follow-up). We track the
+  // viewport via onViewportChange and convert screen→canvas coords.
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const viewportRef = useRef<ViewportState>({ x: 0, y: 0, zoom: 1 });
+  const lastCursorSentRef = useRef(0);
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    const now = e.timeStamp;
+    if (now - lastCursorSentRef.current < 40) return; // ~25/s throttle
+    lastCursorSentRef.current = now;
+    const rect = wrapperRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const pos = screenToCanvas(
+      e.clientX - rect.left,
+      e.clientY - rect.top,
+      viewportRef.current,
+    );
+    setLocalCursor({ x: pos.x, y: pos.y });
+  };
+
+  const user = useMemo(makeUser, []);
+  useEffect(() => {
+    setLocalUser(user);
+  }, [setLocalUser, user]);
+
+  // Apply the shared deterministic seed on mount. Idempotent, so every
+  // tab converges to the same base whether it opened first or synced in.
+  useEffect(() => {
+    Y.applyUpdate(doc, SEED_UPDATE);
+  }, [doc]);
+
+  const onSelectionChange = (sel: CanvasSelection) => {
+    setLocalSelection(sel && sel.kind === "node" ? sel.node.id : null);
+  };
+
+  return (
+    <div
+      ref={wrapperRef}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={() => setLocalCursor(null)}
+      style={{ position: "fixed", inset: 0, background: "#0b0e14" }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: 12,
+          left: 12,
+          zIndex: 10,
+          padding: "6px 10px",
+          borderRadius: 6,
+          background: "rgba(0,0,0,0.6)",
+          color: user.color,
+          font: "12px system-ui, sans-serif",
+          pointerEvents: "none",
+        }}
+      >
+        You are <b>{user.name}</b> · {collaborators.length} other
+        {collaborators.length === 1 ? "" : "s"} here ·{" "}
+        {USE_WS
+          ? "WebSocket — open in ANY browser/window"
+          : "BroadcastChannel — open a 2nd tab in THIS browser"}
+      </div>
+      <SystemCanvas
+        canvas={canvas}
+        theme={darkTheme}
+        editable
+        zoomNavigation
+        collaborators={collaborators}
+        onViewportChange={(vp) => {
+          viewportRef.current = vp;
+        }}
+        onSelectionChange={onSelectionChange}
+        onNodeAdd={handlers.onNodeAdd}
+        onNodeUpdate={handlers.onNodeUpdate}
+        onNodesUpdate={handlers.onNodesUpdate}
+        onNodeDelete={handlers.onNodeDelete}
+        onNodesDelete={handlers.onNodesDelete}
+        onEdgeAdd={handlers.onEdgeAdd}
+        onEdgeUpdate={handlers.onEdgeUpdate}
+        onEdgeDelete={handlers.onEdgeDelete}
+      />
+    </div>
+  );
+}
diff --git a/demo/src/broadcastProvider.ts b/demo/src/broadcastProvider.ts
new file mode 100644
index 0000000..f8aaa37
--- /dev/null
+++ b/demo/src/broadcastProvider.ts
@@ -0,0 +1,99 @@
+import * as Y from "yjs";
+import {
+  Awareness,
+  applyAwarenessUpdate,
+  encodeAwarenessUpdate,
+  removeAwarenessStates,
+} from "y-protocols/awareness";
+
+/**
+ * Zero-server Yjs transport for same-origin browser tabs, over
+ * `BroadcastChannel`. Syncs both the Y.Doc and a y-protocols `Awareness`.
+ *
+ * This is the SIMPLEST possible transport adapter — it exists to prove
+ * multiplayer in the demo with no backend. A real consumer (e.g. hive)
+ * swaps this class for a WebSocket / HTTP+pubsub provider that speaks the
+ * same three moves: (1) broadcast local doc updates, (2) apply remote
+ * ones, (3) exchange full state on join. The rest of the stack —
+ * `useYjsCanvas`, `useCollaborators`, the renderer — is unchanged.
+ *
+ * Echo guard: updates applied FROM the channel are tagged with `origin =
+ * this`, and the local update handler skips anything with that origin, so
+ * a received update is never rebroadcast.
+ */
+type Message =
+  | { type: "doc"; update: Uint8Array }
+  | { type: "awareness"; update: Uint8Array }
+  | { type: "sync-request" };
+
+export class BroadcastChannelProvider {
+  readonly awareness: Awareness;
+  private readonly channel: BroadcastChannel;
+  private readonly doc: Y.Doc;
+
+  constructor(room: string, doc: Y.Doc) {
+    this.doc = doc;
+    this.awareness = new Awareness(doc);
+    this.channel = new BroadcastChannel(room);
+
+    doc.on("update", this.handleDocUpdate);
+    this.awareness.on("update", this.handleAwarenessUpdate);
+    this.channel.onmessage = this.handleMessage;
+    window.addEventListener("beforeunload", this.handleUnload);
+
+    // Ask any already-open tab for its current doc + awareness state.
+    this.post({ type: "sync-request" });
+  }
+
+  private post(msg: Message): void {
+    this.channel.postMessage(msg);
+  }
+
+  private handleDocUpdate = (update: Uint8Array, origin: unknown): void => {
+    if (origin === this) return; // came from the channel — don't echo
+    this.post({ type: "doc", update });
+  };
+
+  private handleAwarenessUpdate = (
+    changes: { added: number[]; updated: number[]; removed: number[] },
+    origin: unknown,
+  ): void => {
+    if (origin === this) return;
+    const changed = changes.added.concat(changes.updated, changes.removed);
+    this.post({
+      type: "awareness",
+      update: encodeAwarenessUpdate(this.awareness, changed),
+    });
+  };
+
+  private handleMessage = (ev: MessageEvent<Message>): void => {
+    const msg = ev.data;
+    if (msg.type === "doc") {
+      Y.applyUpdate(this.doc, msg.update, this);
+    } else if (msg.type === "awareness") {
+      applyAwarenessUpdate(this.awareness, msg.update, this);
+    } else if (msg.type === "sync-request") {
+      // A new tab joined — send it our full doc + awareness snapshot.
+      this.post({ type: "doc", update: Y.encodeStateAsUpdate(this.doc) });
+      this.post({
+        type: "awareness",
+        update: encodeAwarenessUpdate(this.awareness, [
+          ...this.awareness.getStates().keys(),
+        ]),
+      });
+    }
+  };
+
+  private handleUnload = (): void => {
+    removeAwarenessStates(this.awareness, [this.doc.clientID], "unload");
+  };
+
+  destroy(): void {
+    this.doc.off("update", this.handleDocUpdate);
+    this.awareness.off("update", this.handleAwarenessUpdate);
+    window.removeEventListener("beforeunload", this.handleUnload);
+    this.handleUnload();
+    this.channel.close();
+    this.awareness.destroy();
+  }
+}
diff --git a/demo/src/main.tsx b/demo/src/main.tsx
index 056076c..52103fb 100644
--- a/demo/src/main.tsx
+++ b/demo/src/main.tsx
@@ -33,6 +33,7 @@ import { swimlaneRoot, swimlaneCanvasMap, swimlaneTheme } from './swimlane.js'
 import { nestedRoot, nestedCanvasMap } from './nested.js'
 import { showcaseRoot, showcaseCanvasMap, showcaseTheme } from './showcase.js'
 import { gatewayRoot, gatewayCanvasMap, gatewayTheme } from './gateway.js'
+import { CollabDemo } from './CollabDemo.js'
 
 const allThemes: Record<string, CanvasTheme> = {
   dark: darkTheme,
@@ -687,4 +688,9 @@ function App() {
 }
 
 const root = createRoot(document.getElementById('root')!)
-root.render(<App />)
+// `?mode=collab` mounts the self-contained Yjs multiplayer demo
+// (open in two tabs). It's a separate top-level route so it stays
+// isolated from the single-user `Mode` machinery above.
+const isCollab =
+  new URLSearchParams(window.location.search).get('mode') === 'collab'
+root.render(isCollab ? <CollabDemo /> : <App />)
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
index 1faef73..06e0d95 100644
--- a/demo/tsconfig.json
+++ b/demo/tsconfig.json
@@ -6,7 +6,8 @@
     "baseUrl": ".",
     "paths": {
       "system-canvas": ["../packages/core/src/index.ts"],
-      "system-canvas-react": ["../packages/react/src/index.ts"]
+      "system-canvas-react": ["../packages/react/src/index.ts"],
+      "system-canvas-collab": ["../packages/collab/src/index.ts"]
     }
   },
   "include": ["src"]
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index e459802..af7926e 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -8,6 +8,9 @@ export default defineConfig({
     alias: {
       'system-canvas': path.resolve(__dirname, '../packages/core/src'),
       'system-canvas-react': path.resolve(__dirname, '../packages/react/src'),
+      'system-canvas-collab': path.resolve(__dirname, '../packages/collab/src'),
     },
+    // Single React instance across the aliased-from-source packages.
+    dedupe: ['react', 'react-dom'],
   },
 })
diff --git a/package-lock.json b/package-lock.json
index a248107..f57ad83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,11 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "system-canvas": "*",
-        "system-canvas-react": "*"
+        "system-canvas-collab": "*",
+        "system-canvas-react": "*",
+        "y-protocols": "^1.0.6",
+        "y-websocket": "^2.0.0",
+        "yjs": "^13.6.0"
       },
       "devDependencies": {
         "@types/react": "^19.0.0",
@@ -1823,6 +1827,24 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/abstract-leveldown": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/abstract-leveldown/-/abstract-leveldown-6.2.3.tgz",
+      "integrity": "sha512-BsLm5vFMRUrrLeCcRc+G0t2qOaTzpoJQLOubq2XM72eNpjF5UdU5o/5NvlNhx95XHcAvcl8OMXr4mlg/fRgUXQ==",
+      "deprecated": "Superseded by abstract-level (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "immediate": "^3.2.3",
+        "level-concat-iterator": "~2.0.0",
+        "level-supports": "~1.0.0",
+        "xtend": "~4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -1907,6 +1929,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.19",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.19.tgz",
@@ -1964,6 +2014,31 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/bundle-require": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/bundle-require/-/bundle-require-5.1.0.tgz",
@@ -2243,6 +2318,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/deferred-leveldown": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/deferred-leveldown/-/deferred-leveldown-5.3.0.tgz",
+      "integrity": "sha512-a59VOT+oDy7vtAbLRCZwWgxu2BaCfd5Hk7wxJd48ei7I+nsg8Orlb9CLG0PMZienk9BSUKgeAqkO2+Lw+1+Ukw==",
+      "deprecated": "Superseded by abstract-level (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "abstract-leveldown": "~6.2.1",
+        "inherits": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2268,6 +2358,23 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/encoding-down": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/encoding-down/-/encoding-down-6.3.0.tgz",
+      "integrity": "sha512-QKrV0iKR6MZVJV08QY0wp1e7vF6QbhnbQhb07bwpEyuz4uZiZgPlEGdkCROuFkUwdxlFaiPIhjyarH1ee/3vhw==",
+      "deprecated": "Superseded by abstract-level (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "abstract-leveldown": "^6.2.1",
+        "inherits": "^2.0.3",
+        "level-codec": "^9.0.0",
+        "level-errors": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/entities": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
@@ -2281,6 +2388,19 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
@@ -2445,6 +2565,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/immediate": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
+      "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -2455,6 +2603,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -2462,6 +2617,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/isomorphic.js": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
+      "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
+      "license": "MIT",
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -2595,6 +2760,177 @@
         "node": ">=6"
       }
     },
+    "node_modules/level": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/level/-/level-6.0.1.tgz",
+      "integrity": "sha512-psRSqJZCsC/irNhfHzrVZbmPYXDcEYhA5TVNwr+V92jF44rbf86hqGp8fiT702FyiArScYIlPSBTDUASCVNSpw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "level-js": "^5.0.0",
+        "level-packager": "^5.1.0",
+        "leveldown": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/level"
+      }
+    },
+    "node_modules/level-codec": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/level-codec/-/level-codec-9.0.2.tgz",
+      "integrity": "sha512-UyIwNb1lJBChJnGfjmO0OR+ezh2iVu1Kas3nvBS/BzGnx79dv6g7unpKIDNPMhfdTEGoc7mC8uAu51XEtX+FHQ==",
+      "deprecated": "Superseded by level-transcoder (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-concat-iterator": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/level-concat-iterator/-/level-concat-iterator-2.0.1.tgz",
+      "integrity": "sha512-OTKKOqeav2QWcERMJR7IS9CUo1sHnke2C0gkSmcR7QuEtFNLLzHQAvnMw8ykvEcv0Qtkg0p7FOwP1v9e5Smdcw==",
+      "deprecated": "Superseded by abstract-level (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/level-errors/-/level-errors-2.0.1.tgz",
+      "integrity": "sha512-UVprBJXite4gPS+3VznfgDSU8PTRuVX0NXwoWW50KLxd2yw4Y1t2JUR5In1itQnudZqRMT9DlAM3Q//9NCjCFw==",
+      "deprecated": "Superseded by abstract-level (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "errno": "~0.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-iterator-stream": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/level-iterator-stream/-/level-iterator-stream-4.0.2.tgz",
+      "integrity": "sha512-ZSthfEqzGSOMWoUGhTXdX9jv26d32XJuHz/5YnuHZzH6wldfWMOVwI9TBtKcya4BKTyTt3XVA0A3cF3q5CY30Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0",
+        "xtend": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-js": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/level-js/-/level-js-5.0.2.tgz",
+      "integrity": "sha512-SnBIDo2pdO5VXh02ZmtAyPP6/+6YTJg2ibLtl9C34pWvmtMEmRTWpra+qO/hifkUtBTOtfx6S9vLDjBsBK4gRg==",
+      "deprecated": "Superseded by browser-level (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "abstract-leveldown": "~6.2.3",
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.3",
+        "ltgt": "^2.1.2"
+      }
+    },
+    "node_modules/level-packager": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/level-packager/-/level-packager-5.1.1.tgz",
+      "integrity": "sha512-HMwMaQPlTC1IlcwT3+swhqf/NUO+ZhXVz6TY1zZIIZlIR0YSn8GtAAWmIvKjNY16ZkEg/JcpAuQskxsXqC0yOQ==",
+      "deprecated": "Superseded by abstract-level (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "encoding-down": "^6.3.0",
+        "levelup": "^4.3.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/level-supports": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/level-supports/-/level-supports-1.0.1.tgz",
+      "integrity": "sha512-rXM7GYnW8gsl1vedTJIbzOrRv85c/2uCMpiiCzO2fndd06U/kUXEEU9evYn4zFggBOg36IsBW8LzqIpETwwQzg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "xtend": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/leveldown": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/leveldown/-/leveldown-5.6.0.tgz",
+      "integrity": "sha512-iB8O/7Db9lPaITU1aA2txU/cBEXAt4vWwKQRrrWuS6XDgbP4QZGj9BL2aNbwb002atoQ/lIotJkfyzz+ygQnUQ==",
+      "deprecated": "Superseded by classic-level (https://github.com/Level/community#faq)",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "abstract-leveldown": "~6.2.1",
+        "napi-macros": "~2.0.0",
+        "node-gyp-build": "~4.1.0"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/levelup": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/levelup/-/levelup-4.4.0.tgz",
+      "integrity": "sha512-94++VFO3qN95cM/d6eBXvd894oJE0w3cInq9USsyQzzoJxmiYzPAocNcuGCPGGjoXqDVJcr3C1jzt1TSjyaiLQ==",
+      "deprecated": "Superseded by abstract-level (https://github.com/Level/community#faq)",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "deferred-leveldown": "~5.3.0",
+        "level-errors": "~2.0.0",
+        "level-iterator-stream": "~4.0.0",
+        "level-supports": "~1.0.0",
+        "xtend": "~4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lib0": {
+      "version": "0.2.117",
+      "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.117.tgz",
+      "integrity": "sha512-DeXj9X5xDCjgKLU/7RR+/HQEVzuuEUiwldwOGsHK/sfAfELGWEyTcf0x+uOvCvK3O2zPmZePXWL85vtia6GyZw==",
+      "license": "MIT",
+      "dependencies": {
+        "isomorphic.js": "^0.2.4"
+      },
+      "bin": {
+        "0ecdsa-generate-keypair": "bin/0ecdsa-generate-keypair.js",
+        "0gentesthtml": "bin/gentesthtml.js",
+        "0serve": "bin/0serve.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -2625,6 +2961,12 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2635,6 +2977,13 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/ltgt": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ltgt/-/ltgt-2.2.1.tgz",
+      "integrity": "sha512-AI2r85+4MquTw9ZYqabu4nMwy9Oftlfa/e/52t9IjtfG+mGBbTNdAoZ3RQKLHR6r0wQnwZnPIEh/Ya6XTWAKNA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -2765,6 +3114,25 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-macros": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-macros/-/napi-macros-2.0.0.tgz",
+      "integrity": "sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-gyp-build": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.1.1.tgz",
+      "integrity": "sha512-dSq1xmcPDKPZ2EED2S6zw/b9NKsqzXRE6dVr8TVQnI3FJOTteUMuqF3Qqs6LZg+mLGYJWqQzMbIjMtJqTv87nQ==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.37",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.37.tgz",
@@ -2943,6 +3311,13 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2992,6 +3367,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -3085,6 +3475,27 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -3155,6 +3566,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -3215,6 +3636,10 @@
       "resolved": "packages/core",
       "link": true
     },
+    "node_modules/system-canvas-collab": {
+      "resolved": "packages/collab",
+      "link": true
+    },
     "node_modules/system-canvas-demo": {
       "resolved": "demo",
       "link": true
@@ -3953,6 +4378,13 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/vite": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
@@ -4193,6 +4625,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/ws": {
+      "version": "6.2.4",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.4.tgz",
+      "integrity": "sha512-PNIUUyLI5YpkJZj60YBzX1o0ByQ4ovvfmq9N/Kig/PAYbVlGyz4R6G0SEWrD0O9acc0sT2+IdMBVLFv8FSi0Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "async-limiter": "~1.0.0"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
@@ -4210,6 +4652,84 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y-leveldb": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/y-leveldb/-/y-leveldb-0.1.2.tgz",
+      "integrity": "sha512-6ulEn5AXfXJYi89rXPEg2mMHAyyw8+ZfeMMdOtBbV8FJpQ1NOrcgi6DTAcXof0dap84NjHPT2+9d0rb6cFsjEg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "level": "^6.0.1",
+        "lib0": "^0.2.31"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "peerDependencies": {
+        "yjs": "^13.0.0"
+      }
+    },
+    "node_modules/y-protocols": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.7.tgz",
+      "integrity": "sha512-YSVsLoXxO67J6eE/nV4AtFtT3QEotZf5sK5BHxFBXso7VDUT3Tx07IfA6hsu5Q5OmBdMkQVmFZ9QOA7fikWvnw==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.85"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "peerDependencies": {
+        "yjs": "^13.0.0"
+      }
+    },
+    "node_modules/y-websocket": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/y-websocket/-/y-websocket-2.1.0.tgz",
+      "integrity": "sha512-WHYDRqomaGkkaujtowCDwL8KYk+t1zQCGIgKyvxvchhjTQlMgWXRHJK+FDEcWmHA7I7o/4fy0eniOrtmz0e4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.52",
+        "lodash.debounce": "^4.0.8",
+        "y-protocols": "^1.0.5"
+      },
+      "bin": {
+        "y-websocket": "bin/server.cjs",
+        "y-websocket-server": "bin/server.cjs"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      },
+      "optionalDependencies": {
+        "ws": "^6.2.1",
+        "y-leveldb": "^0.1.0"
+      },
+      "peerDependencies": {
+        "yjs": "^13.5.6"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -4217,9 +4737,49 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yjs": {
+      "version": "13.6.31",
+      "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.31.tgz",
+      "integrity": "sha512-Eq+5BRfbeGyqGVrTJL3bEcr8gKkxPuyuoHmAwpk52fDb8kOVMrfVSTRPd6yiGgX5Fskb96qCRjzjbRjrL4YEnw==",
+      "license": "MIT",
+      "dependencies": {
+        "lib0": "^0.2.99"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/dmonad"
+      }
+    },
+    "packages/collab": {
+      "name": "system-canvas-collab",
+      "version": "0.2.57",
+      "license": "MIT",
+      "devDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "react": "^19.0.0",
+        "system-canvas": "^0.2.57",
+        "typescript": "^5.4.0",
+        "vitest": "^4.1.7",
+        "yjs": "^13.6.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "system-canvas": "^0.2.57",
+        "yjs": "^13.6.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "packages/core": {
       "name": "system-canvas",
-      "version": "0.2.54",
+      "version": "0.2.57",
       "license": "MIT",
       "devDependencies": {
         "typescript": "^5.4.0"
@@ -4227,13 +4787,13 @@
     },
     "packages/react": {
       "name": "system-canvas-react",
-      "version": "0.2.54",
+      "version": "0.2.57",
       "license": "MIT",
       "dependencies": {
         "d3-selection": "^3.0.0",
         "d3-transition": "^3.0.0",
         "d3-zoom": "^3.0.0",
-        "system-canvas": "^0.2.54"
+        "system-canvas": "^0.2.57"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.9.1",
@@ -4257,13 +4817,13 @@
     },
     "packages/standalone": {
       "name": "system-canvas-standalone",
-      "version": "0.2.54",
+      "version": "0.2.57",
       "license": "MIT",
       "dependencies": {
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "system-canvas": "^0.2.54",
-        "system-canvas-react": "^0.2.54"
+        "system-canvas": "^0.2.57",
+        "system-canvas-react": "^0.2.57"
       },
       "devDependencies": {
         "@types/react": "^19.0.0",
diff --git a/package.json b/package.json
index 3005c39..5510d55 100644
--- a/package.json
+++ b/package.json
@@ -7,13 +7,14 @@
     "demo"
   ],
   "scripts": {
-    "build": "npm run build:core && npm run build:react && npm run build:standalone",
+    "build": "npm run build:core && npm run build:react && npm run build:standalone && npm run build:collab",
     "build:core": "npm run build -w system-canvas",
     "build:react": "npm run build -w system-canvas-react",
     "build:standalone": "npm run build -w system-canvas-standalone",
+    "build:collab": "npm run build -w system-canvas-collab",
     "dev": "npm run dev -w system-canvas-demo",
-    "test": "npm run test -w system-canvas-react",
-    "typecheck": "npm run typecheck -w system-canvas && npm run typecheck -w system-canvas-react && npm run typecheck -w system-canvas-standalone && npm run typecheck -w system-canvas-demo",
+    "test": "npm run test -w system-canvas-react && npm run test -w system-canvas-collab",
+    "typecheck": "npm run typecheck -w system-canvas && npm run typecheck -w system-canvas-react && npm run typecheck -w system-canvas-standalone && npm run typecheck -w system-canvas-collab && npm run typecheck -w system-canvas-demo",
     "sync-versions": "node scripts/sync-versions.mjs",
     "release:minor": "npm version minor --no-git-tag-version && npm run sync-versions && git add -A && git commit -m \"release: v$(node -p \\\"require('./package.json').version\\\")\" && git push",
     "release:major": "npm version major --no-git-tag-version && npm run sync-versions && git add -A && git commit -m \"release: v$(node -p \\\"require('./package.json').version\\\")\" && git push"
diff --git a/packages/collab/package.json b/packages/collab/package.json
new file mode 100644
index 0000000..eb40437
--- /dev/null
+++ b/packages/collab/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "system-canvas-collab",
+  "version": "0.2.57",
+  "description": "Yjs-backed multi-user collaboration for system-canvas. Binds a Y.Doc to the renderer's controlled props so any consumer gets conflict-free multiplayer by supplying only a transport.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stakwork/system-canvas.git",
+    "directory": "packages/collab"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "system-canvas",
+    "yjs",
+    "crdt",
+    "collaboration",
+    "multiplayer"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "system-canvas": "^0.2.57",
+    "yjs": "^13.6.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^19.0.0",
+    "system-canvas": "^0.2.57",
+    "typescript": "^5.4.0",
+    "vitest": "^4.1.7",
+    "yjs": "^13.6.0"
+  }
+}
diff --git a/packages/collab/src/doc.test.ts b/packages/collab/src/doc.test.ts
new file mode 100644
index 0000000..ca8e097
--- /dev/null
+++ b/packages/collab/src/doc.test.ts
@@ -0,0 +1,151 @@
+import { describe, expect, it } from "vitest";
+import * as Y from "yjs";
+import type { CanvasData, CanvasNode } from "system-canvas";
+import {
+  addEdge,
+  addNode,
+  removeNode,
+  seedYDoc,
+  updateNode,
+  yDocToCanvasData,
+} from "./doc.js";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function node(id: string, extra: Partial<CanvasNode> = {}): CanvasNode {
+  return { id, type: "text", x: 0, y: 0, text: id, ...extra };
+}
+
+/** Full bidirectional merge — after this, a and b have converged. */
+function sync(a: Y.Doc, b: Y.Doc): void {
+  const ua = Y.encodeStateAsUpdate(a);
+  const ub = Y.encodeStateAsUpdate(b);
+  Y.applyUpdate(a, ub);
+  Y.applyUpdate(b, ua);
+}
+
+function getNode(data: CanvasData, id: string): CanvasNode | undefined {
+  return data.nodes?.find((n) => n.id === id);
+}
+
+/** Two docs seeded from the same initial state (both start identical). */
+function makePair(initial: CanvasData): [Y.Doc, Y.Doc] {
+  const a = new Y.Doc();
+  seedYDoc(a, initial);
+  const b = new Y.Doc();
+  Y.applyUpdate(b, Y.encodeStateAsUpdate(a));
+  return [a, b];
+}
+
+// ---------------------------------------------------------------------------
+// Round-trip
+// ---------------------------------------------------------------------------
+
+describe("round-trip", () => {
+  it("preserves all fields including customData and edge extras", () => {
+    const doc = new Y.Doc();
+    seedYDoc(doc, {
+      nodes: [
+        node("a", { x: 5, y: 6, width: 100, category: "note", customData: { status: "todo", n: 3 } }),
+      ],
+      edges: [
+        // `connectionId` is an informal consumer extension — must survive.
+        { id: "e1", fromNode: "a", toNode: "b", label: "L", customData: { connectionId: "c-9" } } as never,
+      ],
+    });
+    const out = yDocToCanvasData(doc);
+    expect(getNode(out, "a")).toEqual(
+      node("a", { x: 5, y: 6, width: 100, category: "note", customData: { status: "todo", n: 3 } }),
+    );
+    expect(out.edges?.[0]).toEqual({
+      id: "e1",
+      fromNode: "a",
+      toNode: "b",
+      label: "L",
+      customData: { connectionId: "c-9" },
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Convergence — the plug-and-play conflict-free proof
+// ---------------------------------------------------------------------------
+
+describe("conflict-free convergence", () => {
+  it("concurrent moves of DIFFERENT nodes both survive", () => {
+    const [a, b] = makePair({ nodes: [node("a"), node("b")], edges: [] });
+    updateNode(a, "a", { x: 100, y: 100 }); // user A drags node a
+    updateNode(b, "b", { x: 200, y: 200 }); // user B drags node b
+    sync(a, b);
+    const da = yDocToCanvasData(a);
+    const db = yDocToCanvasData(b);
+    expect(da).toEqual(db); // converged
+    expect(getNode(da, "a")).toMatchObject({ x: 100, y: 100 });
+    expect(getNode(da, "b")).toMatchObject({ x: 200, y: 200 }); // neither clobbered
+  });
+
+  it("concurrent edits to DIFFERENT fields of the SAME node both survive", () => {
+    const [a, b] = makePair({ nodes: [node("a")], edges: [] });
+    updateNode(a, "a", { x: 100 }); // A moves it
+    updateNode(b, "a", { text: "renamed" }); // B renames it — field-level merge
+    sync(a, b);
+    const da = yDocToCanvasData(a);
+    expect(yDocToCanvasData(b)).toEqual(da);
+    expect(getNode(da, "a")).toMatchObject({ x: 100, text: "renamed" });
+  });
+
+  it("concurrent ADD of different nodes both survive", () => {
+    const [a, b] = makePair({ nodes: [], edges: [] });
+    addNode(a, node("c"));
+    addNode(b, node("d"));
+    sync(a, b);
+    const da = yDocToCanvasData(a);
+    expect(yDocToCanvasData(b)).toEqual(da);
+    expect(da.nodes?.map((n) => n.id).sort()).toEqual(["c", "d"]);
+  });
+
+  it("concurrent add + update converge", () => {
+    const [a, b] = makePair({ nodes: [node("a")], edges: [] });
+    addNode(a, node("c", { x: 9 }));
+    updateNode(b, "a", { text: "hi" });
+    sync(a, b);
+    const da = yDocToCanvasData(a);
+    expect(yDocToCanvasData(b)).toEqual(da);
+    expect(getNode(da, "c")).toMatchObject({ x: 9 });
+    expect(getNode(da, "a")).toMatchObject({ text: "hi" });
+  });
+
+  it("delete-vs-update on the same node CONVERGES (deterministic winner)", () => {
+    const [a, b] = makePair({ nodes: [node("a"), node("b")], edges: [] });
+    removeNode(a, "a"); // A deletes
+    updateNode(b, "a", { text: "still here?" }); // B edits concurrently
+    sync(a, b);
+    // We don't assert who wins — only that both replicas agree.
+    expect(yDocToCanvasData(a)).toEqual(yDocToCanvasData(b));
+  });
+
+  it("concurrent edge adds both survive and converge", () => {
+    const [a, b] = makePair({ nodes: [node("a"), node("b"), node("c")], edges: [] });
+    addEdge(a, { id: "e1", fromNode: "a", toNode: "b" });
+    addEdge(b, { id: "e2", fromNode: "b", toNode: "c" });
+    sync(a, b);
+    const da = yDocToCanvasData(a);
+    expect(yDocToCanvasData(b)).toEqual(da);
+    expect(da.edges?.map((e) => e.id).sort()).toEqual(["e1", "e2"]);
+  });
+
+  it("order of update application does not affect the converged result", () => {
+    const [a, b] = makePair({ nodes: [node("a")], edges: [] });
+    updateNode(a, "a", { x: 1 });
+    updateNode(b, "a", { y: 2 });
+    // apply in the opposite order to prove commutativity
+    const ua = Y.encodeStateAsUpdate(a);
+    const ub = Y.encodeStateAsUpdate(b);
+    Y.applyUpdate(b, ua);
+    Y.applyUpdate(a, ub);
+    expect(yDocToCanvasData(a)).toEqual(yDocToCanvasData(b));
+    expect(getNode(yDocToCanvasData(a), "a")).toMatchObject({ x: 1, y: 2 });
+  });
+});
diff --git a/packages/collab/src/doc.ts b/packages/collab/src/doc.ts
new file mode 100644
index 0000000..af64594
--- /dev/null
+++ b/packages/collab/src/doc.ts
@@ -0,0 +1,200 @@
+/**
+ * Framework-agnostic Y.Doc <-> CanvasData binding.
+ *
+ * The authored canvas is represented as two top-level Y.Maps:
+ *   - `nodes`: nodeId -> Y.Map of that node's fields
+ *   - `edges`: edgeId -> Y.Map of that edge's fields
+ *
+ * Storing each node/edge as its own Y.Map is what makes editing
+ * conflict-free at field granularity: two users changing DIFFERENT
+ * fields of the same node (or different nodes) both survive; only a
+ * true same-field collision falls back to last-writer-wins. Every field
+ * of the source object is round-tripped verbatim, so consumer-specific
+ * extras (`customData`, an edge's informal `connectionId`, etc.) survive
+ * untouched — the binding has no opinion on the domain.
+ *
+ * `text` / `label` are stored as plain string values (whole-label LWW);
+ * character-level merge (Y.Text) is a deliberate later enhancement.
+ *
+ * Pure Yjs, no React — unit-testable headlessly.
+ */
+import * as Y from "yjs";
+import type { CanvasData, CanvasEdge, CanvasNode } from "system-canvas";
+
+export const NODES_KEY = "nodes";
+export const EDGES_KEY = "edges";
+
+/**
+ * Origin tag stamped on this-client mutations. A `Y.UndoManager`
+ * configured with `trackedOrigins: new Set([LOCAL_ORIGIN])` will then
+ * undo only local edits, never a remote collaborator's — per-user undo.
+ */
+export const LOCAL_ORIGIN = Symbol.for("system-canvas-collab/local");
+
+export function nodesMap(doc: Y.Doc): Y.Map<Y.Map<unknown>> {
+  return doc.getMap(NODES_KEY);
+}
+
+export function edgesMap(doc: Y.Doc): Y.Map<Y.Map<unknown>> {
+  return doc.getMap(EDGES_KEY);
+}
+
+function recordToYMap(record: Record<string, unknown>): Y.Map<unknown> {
+  const m = new Y.Map<unknown>();
+  for (const [k, v] of Object.entries(record)) {
+    if (v !== undefined) m.set(k, v);
+  }
+  return m;
+}
+
+function yMapToRecord<T>(m: Y.Map<unknown>): T {
+  const out: Record<string, unknown> = {};
+  m.forEach((v, k) => {
+    out[k] = v;
+  });
+  return out as T;
+}
+
+/** Apply a partial patch to a node/edge's field map. `undefined` clears a field; `id` is never reassigned. */
+function applyPatch(m: Y.Map<unknown>, patch: Record<string, unknown>): void {
+  for (const [k, v] of Object.entries(patch)) {
+    if (k === "id") continue;
+    if (v === undefined) m.delete(k);
+    else m.set(k, v);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Read
+// ---------------------------------------------------------------------------
+
+/**
+ * Snapshot the Y.Doc as a plain `CanvasData`. Nodes/edges are sorted by
+ * id so the output is deterministic across clients (Y.Map iteration
+ * order is not guaranteed to match) — matters for stable rendering and
+ * for equality assertions.
+ */
+export function yDocToCanvasData(doc: Y.Doc): CanvasData {
+  const nodes: CanvasNode[] = [];
+  nodesMap(doc).forEach((m) => nodes.push(yMapToRecord<CanvasNode>(m)));
+  const edges: CanvasEdge[] = [];
+  edgesMap(doc).forEach((m) => edges.push(yMapToRecord<CanvasEdge>(m)));
+  nodes.sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+  edges.sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+  return { nodes, edges };
+}
+
+// ---------------------------------------------------------------------------
+// Seed / migrate
+// ---------------------------------------------------------------------------
+
+/**
+ * Populate a (typically fresh) Y.Doc from a plain `CanvasData`. Used for
+ * the one-time migration of an existing JSON blob into a Y.Doc, and for
+ * bootstrapping a doc in tests. Idempotent per id (re-seeding overwrites).
+ */
+export function seedYDoc(
+  doc: Y.Doc,
+  data: CanvasData,
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => {
+    const nodes = nodesMap(doc);
+    const edges = edgesMap(doc);
+    for (const n of data.nodes ?? []) {
+      nodes.set(n.id, recordToYMap(n as unknown as Record<string, unknown>));
+    }
+    for (const e of data.edges ?? []) {
+      edges.set(e.id, recordToYMap(e as unknown as Record<string, unknown>));
+    }
+  }, origin);
+}
+
+// ---------------------------------------------------------------------------
+// Mutations — each wrapped in one transaction with an origin tag.
+// ---------------------------------------------------------------------------
+
+export function addNode(
+  doc: Y.Doc,
+  node: CanvasNode,
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => {
+    nodesMap(doc).set(node.id, recordToYMap(node as unknown as Record<string, unknown>));
+  }, origin);
+}
+
+export function updateNode(
+  doc: Y.Doc,
+  id: string,
+  patch: Partial<CanvasNode>,
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => {
+    const m = nodesMap(doc).get(id);
+    if (m) applyPatch(m, patch as Record<string, unknown>);
+  }, origin);
+}
+
+export function updateNodes(
+  doc: Y.Doc,
+  updates: { id: string; patch: Partial<CanvasNode> }[],
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => {
+    const nodes = nodesMap(doc);
+    for (const u of updates) {
+      const m = nodes.get(u.id);
+      if (m) applyPatch(m, u.patch as Record<string, unknown>);
+    }
+  }, origin);
+}
+
+export function removeNode(
+  doc: Y.Doc,
+  id: string,
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => nodesMap(doc).delete(id), origin);
+}
+
+export function removeNodes(
+  doc: Y.Doc,
+  ids: string[],
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => {
+    const nodes = nodesMap(doc);
+    for (const id of ids) nodes.delete(id);
+  }, origin);
+}
+
+export function addEdge(
+  doc: Y.Doc,
+  edge: CanvasEdge,
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => {
+    edgesMap(doc).set(edge.id, recordToYMap(edge as unknown as Record<string, unknown>));
+  }, origin);
+}
+
+export function updateEdge(
+  doc: Y.Doc,
+  id: string,
+  patch: Partial<CanvasEdge>,
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => {
+    const m = edgesMap(doc).get(id);
+    if (m) applyPatch(m, patch as Record<string, unknown>);
+  }, origin);
+}
+
+export function removeEdge(
+  doc: Y.Doc,
+  id: string,
+  origin: unknown = LOCAL_ORIGIN,
+): void {
+  doc.transact(() => edgesMap(doc).delete(id), origin);
+}
diff --git a/packages/collab/src/index.ts b/packages/collab/src/index.ts
new file mode 100644
index 0000000..cf46fc4
--- /dev/null
+++ b/packages/collab/src/index.ts
@@ -0,0 +1,39 @@
+/**
+ * system-canvas-collab — Yjs-backed multi-user collaboration for
+ * system-canvas.
+ *
+ * A consumer gets conflict-free multiplayer by:
+ *   1. holding a `Y.Doc` per canvas (one per sub-canvas ref),
+ *   2. binding it with `useYjsCanvas(doc)` and spreading the result onto
+ *      `<SystemCanvas>`,
+ *   3. syncing the doc over ANY transport (this package is transport-
+ *      agnostic — plug in y-websocket, a hosted provider, or a custom
+ *      HTTP+pubsub bridge),
+ *   4. optionally wiring presence with `useCollaborators(awareness)`.
+ *
+ * The Y.Doc is the source of truth + merge; the renderer stays a pure
+ * controlled component (no library-core changes required).
+ */
+export {
+  NODES_KEY,
+  EDGES_KEY,
+  LOCAL_ORIGIN,
+  nodesMap,
+  edgesMap,
+  seedYDoc,
+  yDocToCanvasData,
+  addNode,
+  updateNode,
+  updateNodes,
+  removeNode,
+  removeNodes,
+  addEdge,
+  updateEdge,
+  removeEdge,
+} from "./doc.js";
+
+export { useYjsCanvas } from "./useYjsCanvas.js";
+export type { UseYjsCanvasResult } from "./useYjsCanvas.js";
+
+export { useCollaborators } from "./useCollaborators.js";
+export type { AwarenessLike, CollabUser } from "./useCollaborators.js";
diff --git a/packages/collab/src/useCollaborators.ts b/packages/collab/src/useCollaborators.ts
new file mode 100644
index 0000000..9a4b1fb
--- /dev/null
+++ b/packages/collab/src/useCollaborators.ts
@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useState } from "react";
+import type { CollaboratorInfo } from "system-canvas";
+
+/**
+ * Structural subset of a Yjs `Awareness` (from `y-protocols/awareness`)
+ * that this hook uses. Declared locally so the collab package doesn't
+ * force a `y-protocols` dependency on consumers — the real Awareness
+ * satisfies this shape. Presence is ephemeral: never persisted, never in
+ * the Y.Doc.
+ */
+export interface AwarenessLike {
+  clientID: number;
+  getStates(): Map<number, Record<string, unknown>>;
+  on(event: "change", cb: () => void): void;
+  off(event: "change", cb: () => void): void;
+  setLocalStateField(field: string, value: unknown): void;
+}
+
+/** The per-client presence payload this package reads/writes on awareness. */
+export interface CollabUser {
+  id: string;
+  name: string;
+  color: string;
+  image?: string | null;
+}
+
+const USER_FIELD = "user";
+const CURSOR_FIELD = "cursor";
+const SELECTION_FIELD = "selectedNodeId";
+
+function statesToCollaborators(
+  states: Map<number, Record<string, unknown>>,
+  localClientId: number,
+): CollaboratorInfo[] {
+  const out: CollaboratorInfo[] = [];
+  states.forEach((state, clientId) => {
+    if (clientId === localClientId) return; // exclude self
+    const user = state[USER_FIELD] as CollabUser | undefined;
+    if (!user || typeof user.id !== "string") return; // no identity → skip
+    const cursor = state[CURSOR_FIELD] as { x: number; y: number } | null | undefined;
+    const selectedNodeId = state[SELECTION_FIELD] as string | null | undefined;
+    out.push({
+      id: user.id,
+      name: user.name,
+      color: user.color,
+      image: user.image ?? null,
+      cursor: cursor ?? null,
+      selectedNodeId: selectedNodeId ?? null,
+    });
+  });
+  return out;
+}
+
+/**
+ * Map a Yjs Awareness to the renderer's `CollaboratorInfo[]` — feed the
+ * result straight into `<CollaboratorsOverlay collaborators={...}/>` (or
+ * the `collaborators` prop of `<SystemCanvas>`). Returns setters for this
+ * client's identity, cursor, and selection.
+ */
+export function useCollaborators(awareness: AwarenessLike): {
+  collaborators: CollaboratorInfo[];
+  setLocalUser: (user: CollabUser) => void;
+  setLocalCursor: (cursor: { x: number; y: number } | null) => void;
+  setLocalSelection: (nodeId: string | null) => void;
+} {
+  const [collaborators, setCollaborators] = useState<CollaboratorInfo[]>(() =>
+    statesToCollaborators(awareness.getStates(), awareness.clientID),
+  );
+
+  useEffect(() => {
+    const onChange = () =>
+      setCollaborators(
+        statesToCollaborators(awareness.getStates(), awareness.clientID),
+      );
+    onChange();
+    awareness.on("change", onChange);
+    return () => {
+      awareness.off("change", onChange);
+    };
+  }, [awareness]);
+
+  const setLocalUser = useCallback(
+    (user: CollabUser) => awareness.setLocalStateField(USER_FIELD, user),
+    [awareness],
+  );
+  const setLocalCursor = useCallback(
+    (cursor: { x: number; y: number } | null) =>
+      awareness.setLocalStateField(CURSOR_FIELD, cursor),
+    [awareness],
+  );
+  const setLocalSelection = useCallback(
+    (nodeId: string | null) =>
+      awareness.setLocalStateField(SELECTION_FIELD, nodeId),
+    [awareness],
+  );
+
+  return { collaborators, setLocalUser, setLocalCursor, setLocalSelection };
+}
diff --git a/packages/collab/src/useYjsCanvas.ts b/packages/collab/src/useYjsCanvas.ts
new file mode 100644
index 0000000..302dc58
--- /dev/null
+++ b/packages/collab/src/useYjsCanvas.ts
@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import * as Y from "yjs";
+import type {
+  CanvasData,
+  CanvasEdge,
+  CanvasNode,
+  EdgeUpdate,
+  NodeUpdate,
+} from "system-canvas";
+import {
+  addEdge,
+  addNode,
+  edgesMap,
+  LOCAL_ORIGIN,
+  nodesMap,
+  removeEdge,
+  removeNode,
+  removeNodes,
+  updateEdge,
+  updateNode,
+  updateNodes,
+  yDocToCanvasData,
+} from "./doc.js";
+
+/**
+ * The controlled `canvas` + edit callbacks a `<SystemCanvas>` needs,
+ * backed by a Y.Doc. The returned object is designed to be spread onto
+ * the renderer:
+ *
+ *   const { canvas, ...handlers } = useYjsCanvas(doc)
+ *   <SystemCanvas canvas={canvas} editable {...handlers} />
+ *
+ * Every edit callback mutates the Y.Doc (conflict-free); `canvas`
+ * re-derives on any doc change (local OR remote), so remote collaborators'
+ * edits render live without touching the consumer's own state, viewport,
+ * or in-flight drag. One hook == one canvas (== one Y.Doc); a consumer
+ * with sub-canvases holds one doc per ref.
+ */
+export interface UseYjsCanvasResult {
+  canvas: CanvasData;
+  onNodeAdd: (node: CanvasNode, canvasRef?: string) => void;
+  onNodeUpdate: (id: string, patch: NodeUpdate, canvasRef?: string) => void;
+  onNodesUpdate: (
+    updates: { id: string; patch: NodeUpdate }[],
+    canvasRef?: string,
+  ) => void;
+  onNodeDelete: (id: string, canvasRef?: string) => void;
+  onNodesDelete: (ids: string[], canvasRef?: string) => void;
+  onEdgeAdd: (edge: CanvasEdge, canvasRef?: string) => void;
+  onEdgeUpdate: (id: string, patch: EdgeUpdate, canvasRef?: string) => void;
+  onEdgeDelete: (id: string, canvasRef?: string) => void;
+  /** Undo/redo scoped to THIS client's edits (never a collaborator's). */
+  undo: () => void;
+  redo: () => void;
+  undoManager: Y.UndoManager;
+}
+
+export function useYjsCanvas(doc: Y.Doc): UseYjsCanvasResult {
+  const [canvas, setCanvas] = useState<CanvasData>(() => yDocToCanvasData(doc));
+
+  // Re-derive the render document on every doc change — local edits and
+  // remote merges alike. Yjs `update` fires after each transaction.
+  useEffect(() => {
+    const onUpdate = () => setCanvas(yDocToCanvasData(doc));
+    onUpdate(); // resync immediately if `doc` changed identity
+    doc.on("update", onUpdate);
+    return () => {
+      doc.off("update", onUpdate);
+    };
+  }, [doc]);
+
+  // Per-user undo: only transactions stamped with LOCAL_ORIGIN are tracked,
+  // so undo never reverts a remote collaborator's edit.
+  const undoManager = useMemo(
+    () =>
+      new Y.UndoManager([nodesMap(doc), edgesMap(doc)], {
+        trackedOrigins: new Set([LOCAL_ORIGIN]),
+      }),
+    [doc],
+  );
+  useEffect(() => () => undoManager.destroy(), [undoManager]);
+
+  const onNodeAdd = useCallback(
+    (node: CanvasNode) => addNode(doc, node),
+    [doc],
+  );
+  const onNodeUpdate = useCallback(
+    (id: string, patch: NodeUpdate) =>
+      updateNode(doc, id, patch as Partial<CanvasNode>),
+    [doc],
+  );
+  const onNodesUpdate = useCallback(
+    (updates: { id: string; patch: NodeUpdate }[]) =>
+      updateNodes(
+        doc,
+        updates.map((u) => ({ id: u.id, patch: u.patch as Partial<CanvasNode> })),
+      ),
+    [doc],
+  );
+  const onNodeDelete = useCallback(
+    (id: string) => removeNode(doc, id),
+    [doc],
+  );
+  const onNodesDelete = useCallback(
+    (ids: string[]) => removeNodes(doc, ids),
+    [doc],
+  );
+  const onEdgeAdd = useCallback(
+    (edge: CanvasEdge) => addEdge(doc, edge),
+    [doc],
+  );
+  const onEdgeUpdate = useCallback(
+    (id: string, patch: EdgeUpdate) =>
+      updateEdge(doc, id, patch as Partial<CanvasEdge>),
+    [doc],
+  );
+  const onEdgeDelete = useCallback(
+    (id: string) => removeEdge(doc, id),
+    [doc],
+  );
+
+  const undo = useCallback(() => undoManager.undo(), [undoManager]);
+  const redo = useCallback(() => undoManager.redo(), [undoManager]);
+
+  return {
+    canvas,
+    onNodeAdd,
+    onNodeUpdate,
+    onNodesUpdate,
+    onNodeDelete,
+    onNodesDelete,
+    onEdgeAdd,
+    onEdgeUpdate,
+    onEdgeDelete,
+    undo,
+    redo,
+    undoManager,
+  };
+}
diff --git a/packages/collab/tsconfig.json b/packages/collab/tsconfig.json
new file mode 100644
index 0000000..3da91b3
--- /dev/null
+++ b/packages/collab/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "lib": ["ES2020", "DOM"]
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts"]
+}
diff --git a/packages/collab/vitest.config.ts b/packages/collab/vitest.config.ts
new file mode 100644
index 0000000..faf2b5a
--- /dev/null
+++ b/packages/collab/vitest.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    // The core Y.Doc <-> CanvasData binding + convergence tests are pure
+    // (Yjs only, no DOM). Node environment keeps them fast and headless.
+    environment: "node",
+    include: ["src/**/*.test.ts"],
+  },
+});
diff --git a/scripts/sync-versions.mjs b/scripts/sync-versions.mjs
index a1c2483..e559a85 100644
--- a/scripts/sync-versions.mjs
+++ b/scripts/sync-versions.mjs
@@ -14,6 +14,7 @@ const workspaces = [
   'packages/core',
   'packages/react',
   'packages/standalone',
+  'packages/collab',
 ];
 
 // Names of packages in this monorepo whose cross-dependency ranges should
@@ -22,6 +23,7 @@ const internalNames = new Set([
   'system-canvas',
   'system-canvas-react',
   'system-canvas-standalone',
+  'system-canvas-collab',
 ]);
 
 const depFields = ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies'];