@3plate/graph-core 0.1.7 → 0.1.10

package/dist/index.cjs

@@ -3669,6 +3669,287 @@ var Updater = class _Updater {
   }
 };
 
+// src/api/ingest.ts
+var Ingest = class {
+  constructor(api) {
+    this.api = api;
+  }
+  /**
+   * Apply an incoming ingest message to the API.
+   * - snapshot: rebuild state from nodes/edges (clears prior history)
+   * - update: apply incremental update
+   * - history: initialize from a set of frames (clears prior history)
+   */
+  async apply(msg) {
+    switch (msg.type) {
+      case "snapshot": {
+        await this.api.replaceSnapshot(msg.nodes, msg.edges, msg.description);
+        break;
+      }
+      case "update": {
+        await this.api.update((u) => {
+          if (msg.addNodes) u.addNodes(...msg.addNodes);
+          if (msg.removeNodes) u.deleteNodes(...msg.removeNodes);
+          if (msg.updateNodes) u.updateNodes(...msg.updateNodes);
+          if (msg.addEdges) u.addEdges(...msg.addEdges);
+          if (msg.removeEdges) u.deleteEdges(...msg.removeEdges);
+          if (msg.updateEdges) u.updateEdges(...msg.updateEdges);
+          if (msg.description) u.describe(msg.description);
+        });
+        break;
+      }
+      case "history": {
+        await this.api.replaceHistory(msg.frames);
+        break;
+      }
+    }
+  }
+};
+
+// src/api/sources/WebSocketSource.ts
+var WebSocketSource = class {
+  url;
+  ws = null;
+  onMessage;
+  onStatus;
+  reconnectMs;
+  closedByUser = false;
+  connectStartTime = null;
+  totalTimeoutMs = 1e4;
+  totalTimeoutTimer = null;
+  constructor(args) {
+    this.url = args.url;
+    this.onMessage = args.onMessage;
+    this.onStatus = args.onStatus;
+    this.reconnectMs = args.reconnectMs ?? 1500;
+  }
+  connect() {
+    this.closedByUser = false;
+    this.connectStartTime = Date.now();
+    this.startTotalTimeout();
+    this.open();
+  }
+  disconnect() {
+    this.closedByUser = true;
+    this.clearTotalTimeout();
+    if (this.ws) {
+      try {
+        this.ws.close();
+      } catch {
+      }
+      this.ws = null;
+    }
+    this.onStatus?.("closed");
+  }
+  startTotalTimeout() {
+    this.clearTotalTimeout();
+    this.totalTimeoutTimer = window.setTimeout(() => {
+      if (!this.closedByUser && this.ws?.readyState !== WebSocket.OPEN) {
+        this.closedByUser = true;
+        if (this.ws) {
+          try {
+            this.ws.close();
+          } catch {
+          }
+          this.ws = null;
+        }
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+      }
+    }, this.totalTimeoutMs);
+  }
+  clearTotalTimeout() {
+    if (this.totalTimeoutTimer !== null) {
+      clearTimeout(this.totalTimeoutTimer);
+      this.totalTimeoutTimer = null;
+    }
+    this.connectStartTime = null;
+  }
+  open() {
+    if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
+      if (!this.closedByUser) {
+        this.closedByUser = true;
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+      }
+      return;
+    }
+    this.onStatus?.(this.ws ? "reconnecting" : "connecting");
+    const ws = new WebSocket(this.url);
+    this.ws = ws;
+    ws.onopen = () => {
+      this.clearTotalTimeout();
+      this.onStatus?.("connected");
+    };
+    ws.onerror = (e) => {
+      this.onStatus?.("error", e);
+    };
+    ws.onclose = () => {
+      if (this.closedByUser) {
+        this.onStatus?.("closed");
+        return;
+      }
+      if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
+        this.closedByUser = true;
+        this.clearTotalTimeout();
+        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+        return;
+      }
+      this.onStatus?.("reconnecting");
+      setTimeout(() => this.open(), this.reconnectMs);
+    };
+    ws.onmessage = (ev) => {
+      const data = typeof ev.data === "string" ? ev.data : "";
+      const lines = data.split("\n").map((l) => l.trim()).filter(Boolean);
+      for (const line of lines) {
+        try {
+          const obj = JSON.parse(line);
+          this.onMessage(obj);
+        } catch {
+        }
+      }
+    };
+  }
+};
+
+// src/api/sources/FileSource.ts
+var FileSource = class {
+  url;
+  onMessage;
+  onStatus;
+  timer = null;
+  lastETag = null;
+  lastContent = "";
+  intervalMs = 1e3;
+  closed = false;
+  constructor(args) {
+    this.url = args.url;
+    this.onMessage = args.onMessage;
+    this.onStatus = args.onStatus;
+    this.intervalMs = args.intervalMs ?? 1e3;
+  }
+  async connect() {
+    this.closed = false;
+    this.lastETag = null;
+    this.lastContent = "";
+    this.onStatus?.("opened");
+    this.startPolling();
+  }
+  close() {
+    this.closed = true;
+    if (this.timer) {
+      window.clearInterval(this.timer);
+      this.timer = null;
+    }
+    this.onStatus?.("closed");
+  }
+  startPolling() {
+    if (this.timer) window.clearInterval(this.timer);
+    this.timer = window.setInterval(() => this.poll(), this.intervalMs);
+    this.poll();
+  }
+  async poll() {
+    if (this.closed) return;
+    try {
+      this.onStatus?.("reading");
+      const headers = {};
+      if (this.lastETag) {
+        headers["If-None-Match"] = this.lastETag;
+      }
+      const response = await fetch(this.url, { headers });
+      if (response.status === 304) {
+        return;
+      }
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const etag = response.headers.get("ETag");
+      if (etag) {
+        this.lastETag = etag;
+      }
+      const content = await response.text();
+      if (content === this.lastContent) {
+        return;
+      }
+      const lines = content.split("\n").map((l) => l.trim()).filter(Boolean);
+      const lastContentLines = this.lastContent.split("\n").map((l) => l.trim()).filter(Boolean);
+      const newLines = lines.slice(lastContentLines.length);
+      for (const line of newLines) {
+        try {
+          const obj = JSON.parse(line);
+          this.onMessage(obj);
+        } catch {
+        }
+      }
+      this.lastContent = content;
+    } catch (e) {
+      this.onStatus?.("error", e);
+    }
+  }
+};
+
+// src/api/sources/FileSystemSource.ts
+var FileSystemSource = class {
+  handle = null;
+  onMessage;
+  onStatus;
+  timer = null;
+  lastSize = 0;
+  filename;
+  intervalMs;
+  constructor(args) {
+    this.filename = args.filename;
+    this.onMessage = args.onMessage;
+    this.onStatus = args.onStatus;
+    this.intervalMs = args.intervalMs ?? 1e3;
+  }
+  async openDirectory() {
+    try {
+      const dir = await window.showDirectoryPicker?.();
+      if (!dir) throw new Error("File System Access not supported or cancelled");
+      const handle = await dir.getFileHandle(this.filename, { create: false });
+      this.handle = handle;
+      this.onStatus?.("opened", { file: this.filename });
+      this.lastSize = 0;
+      this.startPolling();
+    } catch (e) {
+      this.onStatus?.("error", e);
+    }
+  }
+  close() {
+    if (this.timer) {
+      window.clearInterval(this.timer);
+      this.timer = null;
+    }
+    this.handle = null;
+    this.onStatus?.("closed");
+  }
+  startPolling() {
+    if (this.timer) window.clearInterval(this.timer);
+    this.timer = window.setInterval(() => this.readNewLines(), this.intervalMs);
+  }
+  async readNewLines() {
+    try {
+      if (!this.handle) return;
+      this.onStatus?.("reading");
+      const file = await this.handle.getFile();
+      if (file.size === this.lastSize) return;
+      const slice = await file.slice(this.lastSize).text();
+      this.lastSize = file.size;
+      const lines = slice.split("\n").map((l) => l.trim()).filter(Boolean);
+      for (const line of lines) {
+        try {
+          const obj = JSON.parse(line);
+          this.onMessage(obj);
+        } catch {
+        }
+      }
+    } catch (e) {
+      this.onStatus?.("error", e);
+    }
+  }
+};
+
 // src/api/api.ts
 var log11 = logger("api");
 var API = class {
@@ -3687,11 +3968,16 @@ var API = class {
   nextNodeId;
   nextEdgeId;
   events;
+  ingest;
+  ingestionSource;
+  ingestionConfig;
+  prevProps = {};
   root;
   constructor(args) {
     this.root = args.root;
     this.options = applyDefaults(args.options);
     this.events = args.events || {};
+    this.ingestionConfig = args.ingestion;
     this.reset();
     this.canvas = new Canvas(this, {
       ...this.options.canvas,
@@ -3705,6 +3991,15 @@ var API = class {
     } else {
       this.history = [];
     }
+    this.prevProps = {
+      nodes: args.nodes,
+      edges: args.edges,
+      history: args.history,
+      options: args.options
+    };
+    if (this.ingestionConfig) {
+      this.ingest = new Ingest(this);
+    }
   }
   reset() {
     let graph2 = new Graph({ options: this.options.graph });
@@ -3727,10 +4022,40 @@ var API = class {
     if (!root) throw new Error("root element not found");
     root.appendChild(this.canvas.container);
     await this.applyHistory();
+    if (this.ingestionConfig && this.ingest) {
+      this.connectIngestion();
+    }
     if (this.events.onInit) {
       this.events.onInit();
     }
   }
+  /** Connect to the configured ingestion source */
+  connectIngestion() {
+    if (!this.ingestionConfig || !this.ingest) return;
+    const args = {
+      ...this.ingestionConfig,
+      onMessage: (msg) => {
+        this.ingest.apply(msg);
+      }
+    };
+    const source = {
+      "websocket": WebSocketSource,
+      "file": FileSource,
+      "filesystem": FileSystemSource
+    }[this.ingestionConfig.type];
+    this.ingestionSource = new source[this.ingestionConfig.type](args);
+    this.ingestionSource?.connect();
+  }
+  /** Disconnect from the ingestion source */
+  disconnectIngestion() {
+    if (!this.ingestionSource) return;
+    if (this.ingestionSource instanceof WebSocketSource) {
+      this.ingestionSource.disconnect();
+    } else if (this.ingestionSource instanceof FileSource) {
+      this.ingestionSource.close();
+    }
+    this.ingestionSource = void 0;
+  }
   async applyHistory() {
     for (const update of this.history)
       await this.applyUpdate(update);
@@ -4117,368 +4442,193 @@ var API = class {
     else {
       this.canvas.showEditNodeModal(node, async (data) => {
         if (this.events.updateNode)
-          this.events.updateNode(node.data, data, gotNode);
-        else {
-          this.nodeOverrides.set(node.data, data);
-          await gotNode(node.data);
-        }
-      });
-    }
-  }
-  async handleEditEdge(id) {
-    const seg = this.graph.getSeg(id);
-    if (seg.edgeIds.size != 1) return;
-    const edge = this.graph.getEdge(seg.edgeIds.values().next().value);
-    const gotEdge = async (edge2) => {
-      if (edge2) await this.updateEdge(edge2);
-    };
-    if (this.events.editEdge)
-      this.events.editEdge(edge.data, gotEdge);
-    else
-      this.canvas.showEditEdgeModal(edge, async (data) => {
-        const sourceNode = edge.sourceNode(this.graph);
-        const targetNode = edge.targetNode(this.graph);
-        const update = {
-          source: { node: sourceNode.data, port: data.source.port, marker: data.source.marker },
-          target: { node: targetNode.data, port: data.target.port, marker: data.target.marker }
-        };
-        if (this.events.updateEdge)
-          this.events.updateEdge(edge.data, update, gotEdge);
-        else {
-          this.edgeOverrides.set(edge.data, {
-            source: { id: sourceNode.id, port: data.source.port, marker: data.source.marker },
-            target: { id: targetNode.id, port: data.target.port, marker: data.target.marker },
-            type: data.type
-          });
-          await gotEdge(edge.data);
-        }
-      });
-  }
-  async handleAddEdge(data) {
-    const gotEdge = async (edge) => {
-      if (edge) await this.addEdge(edge);
-    };
-    const newEdge = {
-      source: { node: this.graph.getNode(data.source.id).data, port: data.source.port, marker: data.source.marker },
-      target: { node: this.graph.getNode(data.target.id).data, port: data.target.port, marker: data.target.marker }
-    };
-    if (this.events.addEdge)
-      this.events.addEdge(newEdge, gotEdge);
-    else
-      await gotEdge(data);
-  }
-  async handleDeleteNode(id) {
-    const node = this.getNode(id);
-    if (this.events.removeNode)
-      this.events.removeNode(node.data, async (remove) => {
-        if (remove) await this.deleteNode(node.data);
-      });
-    else
-      await this.deleteNode(node.data);
-  }
-  async handleDeleteEdge(id) {
-    const edge = this.getEdge(id);
-    if (this.events.removeEdge)
-      this.events.removeEdge(edge.data, async (remove) => {
-        if (remove) await this.deleteEdge(edge.data);
-      });
-    else
-      await this.deleteEdge(edge.data);
-  }
-  /** Update theme and type styles dynamically */
-  updateStyles(options) {
-    this.canvas?.updateStyles(options);
-  }
-  /** Update color mode without recreating the canvas */
-  setColorMode(colorMode) {
-    this.canvas?.setColorMode(colorMode);
-  }
-  /** Cleanup resources when the graph is destroyed */
-  destroy() {
-    this.canvas?.destroy();
-  }
-};
-
-// src/api/ingest.ts
-var Ingest = class {
-  constructor(api) {
-    this.api = api;
-  }
-  /**
-   * Apply an incoming ingest message to the API.
-   * - snapshot: rebuild state from nodes/edges (clears prior history)
-   * - update: apply incremental update
-   * - history: initialize from a set of frames (clears prior history)
-   */
-  async apply(msg) {
-    switch (msg.type) {
-      case "snapshot": {
-        await this.api.replaceSnapshot(msg.nodes, msg.edges, msg.description);
-        break;
-      }
-      case "update": {
-        await this.api.update((u) => {
-          if (msg.addNodes) u.addNodes(...msg.addNodes);
-          if (msg.removeNodes) u.deleteNodes(...msg.removeNodes);
-          if (msg.updateNodes) u.updateNodes(...msg.updateNodes);
-          if (msg.addEdges) u.addEdges(...msg.addEdges);
-          if (msg.removeEdges) u.deleteEdges(...msg.removeEdges);
-          if (msg.updateEdges) u.updateEdges(...msg.updateEdges);
-          if (msg.description) u.describe(msg.description);
-        });
-        break;
-      }
-      case "history": {
-        await this.api.replaceHistory(msg.frames);
-        break;
-      }
-    }
-  }
-};
-
-// src/api/sources/WebSocketSource.ts
-var WebSocketSource = class {
-  url;
-  ws = null;
-  onMessage;
-  onStatus;
-  reconnectMs;
-  closedByUser = false;
-  connectStartTime = null;
-  totalTimeoutMs = 1e4;
-  totalTimeoutTimer = null;
-  constructor(url, onMessage, onStatus, reconnectMs = 1500) {
-    this.url = url;
-    this.onMessage = onMessage;
-    this.onStatus = onStatus;
-    this.reconnectMs = reconnectMs;
-  }
-  connect() {
-    this.closedByUser = false;
-    this.connectStartTime = Date.now();
-    this.startTotalTimeout();
-    this.open();
-  }
-  disconnect() {
-    this.closedByUser = true;
-    this.clearTotalTimeout();
-    if (this.ws) {
-      try {
-        this.ws.close();
-      } catch {
-      }
-      this.ws = null;
-    }
-    this.onStatus?.("closed");
-  }
-  startTotalTimeout() {
-    this.clearTotalTimeout();
-    this.totalTimeoutTimer = window.setTimeout(() => {
-      if (!this.closedByUser && this.ws?.readyState !== WebSocket.OPEN) {
-        this.closedByUser = true;
-        if (this.ws) {
-          try {
-            this.ws.close();
-          } catch {
-          }
-          this.ws = null;
+          this.events.updateNode(node.data, data, gotNode);
+        else {
+          this.nodeOverrides.set(node.data, data);
+          await gotNode(node.data);
         }
-        this.clearTotalTimeout();
-        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
-      }
-    }, this.totalTimeoutMs);
-  }
-  clearTotalTimeout() {
-    if (this.totalTimeoutTimer !== null) {
-      clearTimeout(this.totalTimeoutTimer);
-      this.totalTimeoutTimer = null;
+      });
     }
-    this.connectStartTime = null;
   }
-  open() {
-    if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
-      if (!this.closedByUser) {
-        this.closedByUser = true;
-        this.clearTotalTimeout();
-        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
-      }
-      return;
-    }
-    this.onStatus?.(this.ws ? "reconnecting" : "connecting");
-    const ws = new WebSocket(this.url);
-    this.ws = ws;
-    ws.onopen = () => {
-      this.clearTotalTimeout();
-      this.onStatus?.("connected");
-    };
-    ws.onerror = (e) => {
-      this.onStatus?.("error", e);
-    };
-    ws.onclose = () => {
-      if (this.closedByUser) {
-        this.onStatus?.("closed");
-        return;
-      }
-      if (this.connectStartTime && Date.now() - this.connectStartTime >= this.totalTimeoutMs) {
-        this.closedByUser = true;
-        this.clearTotalTimeout();
-        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
-        return;
-      }
-      this.onStatus?.("reconnecting");
-      setTimeout(() => this.open(), this.reconnectMs);
+  async handleEditEdge(id) {
+    const seg = this.graph.getSeg(id);
+    if (seg.edgeIds.size != 1) return;
+    const edge = this.graph.getEdge(seg.edgeIds.values().next().value);
+    const gotEdge = async (edge2) => {
+      if (edge2) await this.updateEdge(edge2);
     };
-    ws.onmessage = (ev) => {
-      const data = typeof ev.data === "string" ? ev.data : "";
-      const lines = data.split("\n").map((l) => l.trim()).filter(Boolean);
-      for (const line of lines) {
-        try {
-          const obj = JSON.parse(line);
-          this.onMessage(obj);
-        } catch {
+    if (this.events.editEdge)
+      this.events.editEdge(edge.data, gotEdge);
+    else
+      this.canvas.showEditEdgeModal(edge, async (data) => {
+        const sourceNode = edge.sourceNode(this.graph);
+        const targetNode = edge.targetNode(this.graph);
+        const update = {
+          source: { node: sourceNode.data, port: data.source.port, marker: data.source.marker },
+          target: { node: targetNode.data, port: data.target.port, marker: data.target.marker }
+        };
+        if (this.events.updateEdge)
+          this.events.updateEdge(edge.data, update, gotEdge);
+        else {
+          this.edgeOverrides.set(edge.data, {
+            source: { id: sourceNode.id, port: data.source.port, marker: data.source.marker },
+            target: { id: targetNode.id, port: data.target.port, marker: data.target.marker },
+            type: data.type
+          });
+          await gotEdge(edge.data);
         }
-      }
+      });
+  }
+  async handleAddEdge(data) {
+    const gotEdge = async (edge) => {
+      if (edge) await this.addEdge(edge);
+    };
+    const newEdge = {
+      source: { node: this.graph.getNode(data.source.id).data, port: data.source.port, marker: data.source.marker },
+      target: { node: this.graph.getNode(data.target.id).data, port: data.target.port, marker: data.target.marker }
     };
+    if (this.events.addEdge)
+      this.events.addEdge(newEdge, gotEdge);
+    else
+      await gotEdge(data);
   }
-};
-
-// src/api/sources/FileSystemSource.ts
-var FileSystemSource = class {
-  handle = null;
-  onMessage;
-  onStatus;
-  timer = null;
-  lastSize = 0;
-  filename;
-  intervalMs;
-  constructor(onMessage, onStatus, filename = "graph.ndjson", intervalMs = 1e3) {
-    this.onMessage = onMessage;
-    this.onStatus = onStatus;
-    this.filename = filename;
-    this.intervalMs = intervalMs;
+  async handleDeleteNode(id) {
+    const node = this.getNode(id);
+    if (this.events.removeNode)
+      this.events.removeNode(node.data, async (remove) => {
+        if (remove) await this.deleteNode(node.data);
+      });
+    else
+      await this.deleteNode(node.data);
   }
-  async openDirectory() {
-    try {
-      const dir = await window.showDirectoryPicker?.();
-      if (!dir) throw new Error("File System Access not supported or cancelled");
-      const handle = await dir.getFileHandle(this.filename, { create: false });
-      this.handle = handle;
-      this.onStatus?.("opened", { file: this.filename });
-      this.lastSize = 0;
-      this.startPolling();
-    } catch (e) {
-      this.onStatus?.("error", e);
-    }
+  async handleDeleteEdge(id) {
+    const edge = this.getEdge(id);
+    if (this.events.removeEdge)
+      this.events.removeEdge(edge.data, async (remove) => {
+        if (remove) await this.deleteEdge(edge.data);
+      });
+    else
+      await this.deleteEdge(edge.data);
   }
-  close() {
-    if (this.timer) {
-      window.clearInterval(this.timer);
-      this.timer = null;
-    }
-    this.handle = null;
-    this.onStatus?.("closed");
+  /** Update theme and type styles dynamically */
+  updateStyles(options) {
+    this.canvas?.updateStyles(options);
   }
-  startPolling() {
-    if (this.timer) window.clearInterval(this.timer);
-    this.timer = window.setInterval(() => this.readNewLines(), this.intervalMs);
+  /** Update color mode without recreating the canvas */
+  setColorMode(colorMode) {
+    this.canvas?.setColorMode(colorMode);
   }
-  async readNewLines() {
-    try {
-      if (!this.handle) return;
-      this.onStatus?.("reading");
-      const file = await this.handle.getFile();
-      if (file.size === this.lastSize) return;
-      const slice = await file.slice(this.lastSize).text();
-      this.lastSize = file.size;
-      const lines = slice.split("\n").map((l) => l.trim()).filter(Boolean);
-      for (const line of lines) {
-        try {
-          const obj = JSON.parse(line);
-          this.onMessage(obj);
-        } catch {
+  /**
+   * Apply prop changes by diffing against previously applied props.
+   * This is a convenience method for framework wrappers that centralizes
+   * the logic for detecting and applying changes to nodes, edges, history, and options.
+   * The API stores the previous props internally, so you just pass the new props.
+   *
+   * @param props - The new props to apply
+   */
+  applyProps(props) {
+    const prev = this.prevProps;
+    const nodesChanged = !shallowEqualArray(props.nodes, prev.nodes);
+    const edgesChanged = !shallowEqualArray(props.edges, prev.edges);
+    if (nodesChanged || edgesChanged) {
+      if (props.nodes) {
+        this.replaceSnapshot(props.nodes, props.edges || [], void 0);
+      }
+    }
+    if (!nodesChanged && !edgesChanged && props.history !== prev.history) {
+      if (props.history === void 0) {
+        if (props.nodes) {
+          this.replaceSnapshot(props.nodes, props.edges || [], void 0);
+        }
+      } else if (prev.history && isHistoryPrefix(prev.history, props.history)) {
+        const prevLength = prev.history.length;
+        const newFrames = props.history.slice(prevLength);
+        for (const frame of newFrames) {
+          this.update((u) => {
+            if (frame.addNodes) u.addNodes(...frame.addNodes);
+            if (frame.removeNodes) u.deleteNodes(...frame.removeNodes);
+            if (frame.updateNodes) u.updateNodes(...frame.updateNodes);
+            if (frame.addEdges) u.addEdges(...frame.addEdges);
+            if (frame.removeEdges) u.deleteEdges(...frame.removeEdges);
+            if (frame.updateEdges) u.updateEdges(...frame.updateEdges);
+            if (frame.description) u.describe(frame.description);
+          });
         }
+      } else {
+        this.replaceHistory(props.history);
       }
-    } catch (e) {
-      this.onStatus?.("error", e);
     }
-  }
-};
-
-// src/api/sources/FileSource.ts
-var FileSource = class {
-  url;
-  onMessage;
-  onStatus;
-  timer = null;
-  lastETag = null;
-  lastContent = "";
-  intervalMs = 1e3;
-  closed = false;
-  constructor(url, onMessage, onStatus, intervalMs = 1e3) {
-    this.url = url;
-    this.onMessage = onMessage;
-    this.onStatus = onStatus;
-    this.intervalMs = intervalMs;
-  }
-  async connect() {
-    this.closed = false;
-    this.lastETag = null;
-    this.lastContent = "";
-    this.onStatus?.("opened");
-    this.startPolling();
-  }
-  close() {
-    this.closed = true;
-    if (this.timer) {
-      window.clearInterval(this.timer);
-      this.timer = null;
+    const prevCanvas = prev.options?.canvas;
+    const currCanvas = props.options?.canvas;
+    const colorModeChanged = prevCanvas?.colorMode !== currCanvas?.colorMode;
+    if (colorModeChanged && currCanvas?.colorMode) {
+      this.setColorMode(currCanvas.colorMode);
+    }
+    const themeChanged = prevCanvas?.theme !== currCanvas?.theme;
+    const nodeTypesChanged = prevCanvas?.nodeTypes !== currCanvas?.nodeTypes;
+    const edgeTypesChanged = prevCanvas?.edgeTypes !== currCanvas?.edgeTypes;
+    if (themeChanged || nodeTypesChanged || edgeTypesChanged) {
+      this.updateStyles({
+        theme: currCanvas?.theme,
+        nodeTypes: currCanvas?.nodeTypes,
+        edgeTypes: currCanvas?.edgeTypes
+      });
     }
-    this.onStatus?.("closed");
+    this.prevProps = {
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      options: props.options
+    };
   }
-  startPolling() {
-    if (this.timer) window.clearInterval(this.timer);
-    this.timer = window.setInterval(() => this.poll(), this.intervalMs);
-    this.poll();
+  /** Cleanup resources when the graph is destroyed */
+  destroy() {
+    this.disconnectIngestion();
+    this.canvas?.destroy();
   }
-  async poll() {
-    if (this.closed) return;
-    try {
-      this.onStatus?.("reading");
-      const headers = {};
-      if (this.lastETag) {
-        headers["If-None-Match"] = this.lastETag;
-      }
-      const response = await fetch(this.url, { headers });
-      if (response.status === 304) {
-        return;
-      }
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-      }
-      const etag = response.headers.get("ETag");
-      if (etag) {
-        this.lastETag = etag;
-      }
-      const content = await response.text();
-      if (content === this.lastContent) {
-        return;
-      }
-      const lines = content.split("\n").map((l) => l.trim()).filter(Boolean);
-      const lastContentLines = this.lastContent.split("\n").map((l) => l.trim()).filter(Boolean);
-      const newLines = lines.slice(lastContentLines.length);
-      for (const line of newLines) {
-        try {
-          const obj = JSON.parse(line);
-          this.onMessage(obj);
-        } catch {
+};
+function shallowEqualArray(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      if (typeof a[i] === "object" && a[i] !== null && typeof b[i] === "object" && b[i] !== null) {
+        const aObj = a[i];
+        const bObj = b[i];
+        const aKeys = Object.keys(aObj);
+        const bKeys = Object.keys(bObj);
+        if (aKeys.length !== bKeys.length) return false;
+        for (const key of aKeys) {
+          if (aObj[key] !== bObj[key]) return false;
         }
+      } else {
+        return false;
       }
-      this.lastContent = content;
-    } catch (e) {
-      this.onStatus?.("error", e);
     }
   }
-};
+  return true;
+}
+function isHistoryPrefix(oldHistory, newHistory) {
+  if (newHistory.length < oldHistory.length) return false;
+  for (let i = 0; i < oldHistory.length; i++) {
+    if (!shallowEqualUpdate(oldHistory[i], newHistory[i])) {
+      return false;
+    }
+  }
+  return true;
+}
+function shallowEqualUpdate(a, b) {
+  if (a === b) return true;
+  if (a.description !== b.description) return false;
+  if (!shallowEqualArray(a.addNodes, b.addNodes)) return false;
+  if (!shallowEqualArray(a.removeNodes, b.removeNodes)) return false;
+  if (!shallowEqualArray(a.updateNodes, b.updateNodes)) return false;
+  if (!shallowEqualArray(a.addEdges, b.addEdges)) return false;
+  if (!shallowEqualArray(a.removeEdges, b.removeEdges)) return false;
+  if (!shallowEqualArray(a.updateEdges, b.updateEdges)) return false;
+  return true;
+}
 
 // src/playground/playground.ts
 var import_styles2 = __toESM(require("./styles.css?raw"), 1);
@@ -4758,10 +4908,18 @@ var Playground = class {
     this.disconnectAllSources();
     if (example.source.type === "websocket") {
       this.wsUrl = example.source.url;
-      this.wsSource = new WebSocketSource(example.source.url, this.handleIngestMessage.bind(this), this.updateWsStatus);
+      this.wsSource = new WebSocketSource({
+        url: example.source.url,
+        onMessage: this.handleIngestMessage.bind(this),
+        onStatus: this.updateWsStatus
+      });
       this.wsSource.connect();
     } else if (example.source.type === "file") {
-      this.fileSource = new FileSource(example.source.path, this.handleIngestMessage.bind(this), this.updateFileStatus);
+      this.fileSource = new FileSource({
+        url: example.source.path,
+        onMessage: this.handleIngestMessage.bind(this),
+        onStatus: this.updateFileStatus
+      });
       this.fileSource.connect();
     }
   }
@@ -5161,7 +5319,11 @@ var Playground = class {
     if (this.wsSource) {
       this.wsSource.disconnect();
     }
-    this.wsSource = new WebSocketSource(url, this.handleIngestMessage.bind(this), this.updateWsStatus);
+    this.wsSource = new WebSocketSource({
+      url,
+      onMessage: this.handleIngestMessage.bind(this),
+      onStatus: this.updateWsStatus
+    });
     this.wsSource.connect();
     this.updateSourceModal();
   }
@@ -5182,7 +5344,11 @@ var Playground = class {
   }
   async handleOpenFolder() {
     if (!this.fsSource) {
-      this.fsSource = new FileSystemSource(this.handleIngestMessage.bind(this), this.updateFsStatus);
+      this.fsSource = new FileSystemSource({
+        filename: "graph.ndjson",
+        onMessage: this.handleIngestMessage.bind(this),
+        onStatus: this.updateFsStatus
+      });
     }
     this.updateSourceModal();
     await this.fsSource.openDirectory();