@3plate/graph-core 0.1.6 → 0.1.9

package/dist/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   FileSystemSource: () => FileSystemSource,
   Ingest: () => Ingest,
   Playground: () => Playground,
+  Updater: () => Updater,
   WebSocketSource: () => WebSocketSource,
   default: () => index_default,
   graph: () => graph
@@ -1380,15 +1381,16 @@ var Layout = class _Layout {
 
 // src/canvas/marker.tsx
 var import_jsx_runtime = require("jsx-dom/jsx-runtime");
-function arrow(size, reverse = false) {
+function arrow(size, reverse = false, prefix = "") {
   const h = size / 1.5;
   const w = size;
   const ry = h / 2;
   const suffix = reverse ? "-reverse" : "";
+  const id = prefix ? `${prefix}-g3p-marker-arrow${suffix}` : `g3p-marker-arrow${suffix}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "marker",
     {
-      id: `g3p-marker-arrow${suffix}`,
+      id,
       className: "g3p-marker g3p-marker-arrow",
       markerWidth: size,
       markerHeight: size,
@@ -1400,14 +1402,15 @@ function arrow(size, reverse = false) {
     }
   );
 }
-function circle(size, reverse = false) {
+function circle(size, reverse = false, prefix = "") {
   const r = size / 3;
   const cy = size / 2;
   const suffix = reverse ? "-reverse" : "";
+  const id = prefix ? `${prefix}-g3p-marker-circle${suffix}` : `g3p-marker-circle${suffix}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "marker",
     {
-      id: `g3p-marker-circle${suffix}`,
+      id,
       className: "g3p-marker g3p-marker-circle",
       markerWidth: size,
       markerHeight: size,
@@ -1419,15 +1422,16 @@ function circle(size, reverse = false) {
     }
   );
 }
-function diamond(size, reverse = false) {
+function diamond(size, reverse = false, prefix = "") {
   const w = size * 0.7;
   const h = size / 2;
   const cy = size / 2;
   const suffix = reverse ? "-reverse" : "";
+  const id = prefix ? `${prefix}-g3p-marker-diamond${suffix}` : `g3p-marker-diamond${suffix}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "marker",
     {
-      id: `g3p-marker-diamond${suffix}`,
+      id,
       className: "g3p-marker g3p-marker-diamond",
       markerWidth: size,
       markerHeight: size,
@@ -1439,14 +1443,15 @@ function diamond(size, reverse = false) {
     }
   );
 }
-function bar(size, reverse = false) {
+function bar(size, reverse = false, prefix = "") {
   const h = size * 0.6;
   const cy = size / 2;
   const suffix = reverse ? "-reverse" : "";
+  const id = prefix ? `${prefix}-g3p-marker-bar${suffix}` : `g3p-marker-bar${suffix}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "marker",
     {
-      id: `g3p-marker-bar${suffix}`,
+      id,
       className: "g3p-marker g3p-marker-bar",
       markerWidth: size,
       markerHeight: size,
@@ -1458,7 +1463,7 @@ function bar(size, reverse = false) {
     }
   );
 }
-function none(size, reverse = false) {
+function none(size, reverse = false, prefix = "") {
   return void 0;
 }
 function normalize(data) {
@@ -2240,6 +2245,9 @@ var Seg2 = class {
     if (this.source.isDummy) source = void 0;
     if (this.target.isDummy) target = void 0;
     const typeClass = this.type ? `g3p-edge-type-${this.type}` : "";
+    const prefix = this.canvas.markerPrefix;
+    const markerStartId = source ? prefix ? `${prefix}-g3p-marker-${source}-reverse` : `g3p-marker-${source}-reverse` : void 0;
+    const markerEndId = target ? prefix ? `${prefix}-g3p-marker-${target}` : `g3p-marker-${target}` : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "g",
       {
@@ -2254,8 +2262,8 @@ var Seg2 = class {
               d: this.svg,
               fill: "none",
               className: "g3p-seg-line",
-              markerStart: source ? `url(#g3p-marker-${source}-reverse)` : void 0,
-              markerEnd: target ? `url(#g3p-marker-${target})` : void 0
+              markerStart: markerStartId ? `url(#${markerStartId})` : void 0,
+              markerEnd: markerEndId ? `url(#${markerEndId})` : void 0
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2840,6 +2848,10 @@ var Canvas = class {
   curNodes;
   curSegs;
   updating;
+  // Unique marker ID prefix for this canvas instance
+  markerPrefix;
+  // Dynamic style element for this instance (for cleanup)
+  dynamicStyleEl;
   // Pan-zoom state
   panScale = null;
   zoomControls;
@@ -2853,6 +2865,13 @@ var Canvas = class {
   constructor(api, options) {
     Object.assign(this, options);
     this.api = api;
+    this.reset();
+    this.markerPrefix = api.root.replace(/[^a-zA-Z0-9-_]/g, "-");
+    this.createMeasurementContainer();
+    this.createCanvasContainer();
+    if (this.panZoom) this.setupPanZoom();
+  }
+  reset() {
     this.allNodes = /* @__PURE__ */ new Map();
     this.curNodes = /* @__PURE__ */ new Map();
     this.curSegs = /* @__PURE__ */ new Map();
@@ -2861,9 +2880,7 @@ var Canvas = class {
     this.transform = { x: 0, y: 0, scale: 1 };
     this.editMode = new EditMode();
     this.editMode.editable = this.editable;
-    this.createMeasurementContainer();
-    this.createCanvasContainer();
-    if (this.panZoom) this.setupPanZoom();
+    if (this.group) this.group.innerHTML = "";
   }
   createMeasurementContainer() {
     this.measurement = document.createElement("div");
@@ -3048,12 +3065,13 @@ var Canvas = class {
   }
   generateDynamicStyles() {
     let css = "";
-    css += themeToCSS(this.theme, `.g3p-canvas-container`);
+    const scope = `[data-g3p-instance="${this.markerPrefix}"]`;
+    css += themeToCSS(this.theme, scope);
     for (const [type, vars] of Object.entries(this.nodeTypes)) {
-      css += themeToCSS(vars, `.g3p-node-type-${type}`, "node");
+      css += themeToCSS(vars, `${scope} .g3p-node-type-${type}`, "node");
     }
     for (const [type, vars] of Object.entries(this.edgeTypes)) {
-      css += themeToCSS(vars, `.g3p-edge-type-${type}`);
+      css += themeToCSS(vars, `${scope} .g3p-edge-type-${type}`);
     }
     return css;
   }
@@ -3066,15 +3084,18 @@ var Canvas = class {
     }
     const dynamicStyles = this.generateDynamicStyles();
     if (dynamicStyles) {
-      const dynamicStyleEl = document.createElement("style");
-      dynamicStyleEl.textContent = dynamicStyles;
-      document.head.appendChild(dynamicStyleEl);
+      this.dynamicStyleEl?.remove();
+      this.dynamicStyleEl = document.createElement("style");
+      this.dynamicStyleEl.id = `g3p-styles-${this.markerPrefix}`;
+      this.dynamicStyleEl.textContent = dynamicStyles;
+      document.head.appendChild(this.dynamicStyleEl);
     }
     const colorModeClass = this.colorMode !== "system" ? `g3p-${this.colorMode}` : "";
     this.container = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
         className: `g3p-canvas-container ${colorModeClass}`.trim(),
+        "data-g3p-instance": this.markerPrefix,
         ref: (el) => this.container = el,
         onContextMenu: this.onContextMenu.bind(this),
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -3090,8 +3111,8 @@ var Canvas = class {
             onDblClick: this.onDoubleClick.bind(this),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("defs", { children: [
-                Object.values(markerDefs).map((marker) => marker(this.markerSize, false)),
-                Object.values(markerDefs).map((marker) => marker(this.markerSize, true))
+                Object.values(markerDefs).map((marker) => marker(this.markerSize, false, this.markerPrefix)),
+                Object.values(markerDefs).map((marker) => marker(this.markerSize, true, this.markerPrefix))
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "g",
@@ -3448,6 +3469,40 @@ var Canvas = class {
     }
     return { type: "canvas" };
   }
+  /** Update theme and type styles dynamically */
+  updateStyles(options) {
+    if (options.theme !== void 0) this.theme = options.theme;
+    if (options.nodeTypes !== void 0) this.nodeTypes = options.nodeTypes;
+    if (options.edgeTypes !== void 0) this.edgeTypes = options.edgeTypes;
+    const dynamicStyles = this.generateDynamicStyles();
+    if (dynamicStyles) {
+      if (!this.dynamicStyleEl) {
+        this.dynamicStyleEl = document.createElement("style");
+        this.dynamicStyleEl.id = `g3p-styles-${this.markerPrefix}`;
+        document.head.appendChild(this.dynamicStyleEl);
+      }
+      this.dynamicStyleEl.textContent = dynamicStyles;
+    } else if (this.dynamicStyleEl) {
+      this.dynamicStyleEl.remove();
+      this.dynamicStyleEl = void 0;
+    }
+  }
+  /** Update color mode without recreating the canvas */
+  setColorMode(colorMode) {
+    if (!this.container) return;
+    this.colorMode = colorMode;
+    this.container.classList.remove("g3p-light", "g3p-dark");
+    if (colorMode !== "system") {
+      this.container.classList.add(`g3p-${colorMode}`);
+    }
+  }
+  /** Cleanup resources when the canvas is destroyed */
+  destroy() {
+    this.dynamicStyleEl?.remove();
+    this.dynamicStyleEl = void 0;
+    this.measurement?.remove();
+    this.measurement = void 0;
+  }
 };
 var themeVarMap = {
   // Canvas
@@ -3614,6 +3669,225 @@ 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(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.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(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;
+    }
+    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/api.ts
 var log11 = logger("api");
 var API = class {
@@ -3632,11 +3906,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,
@@ -3650,6 +3929,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 });
@@ -3664,6 +3952,7 @@ var API = class {
     this.nodeFields = /* @__PURE__ */ new Map();
     this.nextNodeId = 1;
     this.nextEdgeId = 1;
+    this.canvas?.reset?.();
   }
   /** Initialize the API */
   async init() {
@@ -3671,6 +3960,49 @@ 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 handleMessage = (msg) => {
+      this.ingest.apply(msg);
+    };
+    switch (this.ingestionConfig.type) {
+      case "websocket":
+        this.ingestionSource = new WebSocketSource(
+          this.ingestionConfig.url,
+          handleMessage,
+          void 0,
+          this.ingestionConfig.reconnectMs
+        );
+        this.ingestionSource.connect();
+        break;
+      case "file":
+        this.ingestionSource = new FileSource(
+          this.ingestionConfig.url,
+          handleMessage,
+          void 0,
+          this.ingestionConfig.intervalMs
+        );
+        this.ingestionSource.connect();
+        break;
+    }
+  }
+  /** 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)
@@ -4126,150 +4458,125 @@ var API = class {
     else
       await this.deleteEdge(edge.data);
   }
-};
-
-// src/api/ingest.ts
-var Ingest = class {
-  constructor(api) {
-    this.api = api;
+  /** 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);
   }
   /**
-   * 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)
+   * 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
    */
-  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;
+  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);
       }
     }
-  }
-};
-
-// 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 {
+    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);
       }
-      this.ws = null;
     }
-    this.onStatus?.("closed");
+    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.prevProps = {
+      nodes: props.nodes,
+      edges: props.edges,
+      history: props.history,
+      options: props.options
+    };
   }
-  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;
+  /** Cleanup resources when the graph is destroyed */
+  destroy() {
+    this.disconnectIngestion();
+    this.canvas?.destroy();
+  }
+};
+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;
         }
-        this.clearTotalTimeout();
-        this.onStatus?.("error", new Error("Connection timeout after 10 seconds"));
+      } else {
+        return false;
       }
-    }, 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;
+  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;
     }
-    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 {
-        }
-      }
-    };
   }
-};
+  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/api/sources/FileSystemSource.ts
 var FileSystemSource = class {
@@ -4333,88 +4640,13 @@ var FileSystemSource = class {
   }
 };
 
-// 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;
-    }
-    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/playground/playground.ts
 var import_styles2 = __toESM(require("./styles.css?raw"), 1);
 var Playground = class {
   options;
   rootElement;
   currentExample;
+  examples;
   currentGraph = null;
   ingest = null;
   isEditable = false;
@@ -4432,7 +4664,8 @@ var Playground = class {
   graphContainerId;
   constructor(options) {
     this.options = options;
-    this.exampleList = Object.keys(options.examples);
+    this.examples = { ...options.examples };
+    this.exampleList = Object.keys(this.examples);
     this.currentExample = options.defaultExample || this.exampleList[0];
     this.graphContainerId = `playground-graph-${Math.random().toString(36).substr(2, 9)}`;
     if (typeof options.root === "string") {
@@ -4463,7 +4696,7 @@ var Playground = class {
   }
   createDOM() {
     const exampleList = this.exampleList.map((key, i) => {
-      const example = this.options.examples[key];
+      const example = this.examples[key];
       const isActive = i === 0 || key === this.currentExample;
       return `
         <button class="example-btn ${isActive ? "active" : ""}" data-example="${key}">
@@ -4549,7 +4782,14 @@ var Playground = class {
       });
     });
     this.rootElement.querySelectorAll(".options select, .options input").forEach((el) => {
-      el.addEventListener("change", () => this.renderGraph());
+      el.addEventListener("change", () => {
+        if (el.id === "colorMode" && this.currentGraph) {
+          const mode = el.value;
+          this.currentGraph.setColorMode(mode);
+        } else {
+          this.renderGraph();
+        }
+      });
     });
     this.rootElement.querySelector("#nav-first")?.addEventListener("click", () => {
       this.currentGraph?.nav("first");
@@ -4636,8 +4876,10 @@ var Playground = class {
   async renderGraph() {
     const container = this.rootElement.querySelector(`#${this.graphContainerId}`);
     if (!container) return;
+    this.currentGraph?.destroy();
+    this.currentGraph = null;
     container.innerHTML = "";
-    const example = this.options.examples[this.currentExample];
+    const example = this.examples[this.currentExample];
     const options = this.getOptions(example.options);
     try {
       this.currentGraph = await graph({
@@ -4668,7 +4910,7 @@ var Playground = class {
     }
   }
   connectExampleSource() {
-    const example = this.options.examples[this.currentExample];
+    const example = this.examples[this.currentExample];
     if (!example.source) {
       this.disconnectAllSources();
       return;
@@ -5011,7 +5253,7 @@ var Playground = class {
         `;
       }
     } else if (this.activeSourceType === "file") {
-      const example = this.options.examples[this.currentExample];
+      const example = this.examples[this.currentExample];
       const filePath = example.source?.type === "file" ? example.source.path : "";
       if (this.fileStatus === "connecting") {
         statusDiv.innerHTML = `
@@ -5109,6 +5351,58 @@ var Playground = class {
     this.fsSource?.close();
     this.updateSourceModal();
   }
+  /**
+   * Add or update an example
+   */
+  addExample(key, example) {
+    this.examples[key] = example;
+    this.updateExampleList();
+    if (this.currentExample === key) {
+      this.renderGraph();
+      this.connectExampleSource();
+    }
+  }
+  /**
+   * Remove an example
+   */
+  removeExample(key) {
+    delete this.examples[key];
+    if (this.currentExample === key) {
+      this.exampleList = Object.keys(this.examples);
+      this.currentExample = this.exampleList[0] || "";
+      if (this.currentExample) {
+        this.renderGraph();
+        this.connectExampleSource();
+      }
+    }
+    this.updateExampleList();
+  }
+  /**
+   * Update the example list in the DOM
+   */
+  updateExampleList() {
+    this.exampleList = Object.keys(this.examples);
+    const exampleListEl = this.rootElement.querySelector(".example-list");
+    if (!exampleListEl) return;
+    exampleListEl.innerHTML = this.exampleList.map((key, i) => {
+      const example = this.examples[key];
+      const isActive = key === this.currentExample;
+      return `
+        <button class="example-btn ${isActive ? "active" : ""}" data-example="${key}">
+          ${example.name}
+        </button>
+      `;
+    }).join("");
+    exampleListEl.querySelectorAll(".example-btn").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.rootElement.querySelectorAll(".example-btn").forEach((b) => b.classList.remove("active"));
+        btn.classList.add("active");
+        this.currentExample = btn.getAttribute("data-example") || this.exampleList[0];
+        this.renderGraph();
+        this.connectExampleSource();
+      });
+    });
+  }
 };
 
 // src/index.ts
@@ -5124,6 +5418,7 @@ var index_default = graph;
   FileSystemSource,
   Ingest,
   Playground,
+  Updater,
   WebSocketSource,
   graph
 });