@3plate/graph-core 0.1.6 → 0.1.7

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
@@ -3664,6 +3719,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 +3727,9 @@ var API = class {
     if (!root) throw new Error("root element not found");
     root.appendChild(this.canvas.container);
     await this.applyHistory();
+    if (this.events.onInit) {
+      this.events.onInit();
+    }
   }
   async applyHistory() {
     for (const update of this.history)
@@ -4126,6 +4185,18 @@ var API = class {
     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
@@ -4415,6 +4486,7 @@ var Playground = class {
   options;
   rootElement;
   currentExample;
+  examples;
   currentGraph = null;
   ingest = null;
   isEditable = false;
@@ -4432,7 +4504,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 +4536,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 +4622,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 +4716,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 +4750,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 +5093,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 +5191,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 +5258,7 @@ var index_default = graph;
   FileSystemSource,
   Ingest,
   Playground,
+  Updater,
   WebSocketSource,
   graph
 });

package/dist/index.d.cts

@@ -75,6 +75,8 @@ type GraphOptions = {
  * Events that can be handled by the user.
  */
 type EventsOptions<N, E> = {
+    /** Called when the API has finished initializing */
+    onInit?: () => void;
     /** Called when a node is clicked */
     nodeClick?: (node: N) => void;
     /** Called when an edge is clicked */
@@ -368,7 +370,7 @@ declare class API<N, E> {
     private nextNodeId;
     private nextEdgeId;
     private events;
-    private root;
+    root: string;
     constructor(args: APIArguments<N, E>);
     reset(): void;
     /** Initialize the API */
@@ -436,6 +438,16 @@ declare class API<N, E> {
     handleAddEdge(data: EditEdgeProps): Promise<void>;
     handleDeleteNode(id: NodeId): Promise<void>;
     handleDeleteEdge(id: EdgeId): Promise<void>;
+    /** Update theme and type styles dynamically */
+    updateStyles(options: {
+        theme?: ThemeVars;
+        nodeTypes?: Record<string, ThemeVars>;
+        edgeTypes?: Record<string, ThemeVars>;
+    }): void;
+    /** Update color mode without recreating the canvas */
+    setColorMode(colorMode: 'light' | 'dark' | 'system'): void;
+    /** Cleanup resources when the graph is destroyed */
+    destroy(): void;
 }
 
 type SnapshotMessage<N, E> = {
@@ -575,6 +587,7 @@ declare class Playground {
     private options;
     private rootElement;
     private currentExample;
+    private examples;
     private currentGraph;
     private ingest;
     private isEditable;
@@ -619,8 +632,20 @@ declare class Playground {
     private handleChangeConnection;
     private handleOpenFolder;
     private handleCloseFolder;
+    /**
+     * Add or update an example
+     */
+    addExample(key: string, example: Example): void;
+    /**
+     * Remove an example
+     */
+    removeExample(key: string): void;
+    /**
+     * Update the example list in the DOM
+     */
+    private updateExampleList;
 }
 
 declare function graph<N, E>(args?: APIArguments<N, E>): Promise<API<N, E>>;
 
-export { type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, FileSystemSource, type HistoryMessage, Ingest, type IngestMessage, Playground, type PlaygroundOptions, type SnapshotMessage, type UpdateMessage, WebSocketSource, graph as default, graph };
+export { API, type APIArguments, type APIOptions, type EventsOptions, type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, FileSystemSource, type HistoryMessage, Ingest, type IngestMessage, Playground, type PlaygroundOptions, type SnapshotMessage, type Update, type UpdateMessage, Updater, WebSocketSource, graph as default, graph };

package/dist/index.d.ts

@@ -75,6 +75,8 @@ type GraphOptions = {
  * Events that can be handled by the user.
  */
 type EventsOptions<N, E> = {
+    /** Called when the API has finished initializing */
+    onInit?: () => void;
     /** Called when a node is clicked */
     nodeClick?: (node: N) => void;
     /** Called when an edge is clicked */
@@ -368,7 +370,7 @@ declare class API<N, E> {
     private nextNodeId;
     private nextEdgeId;
     private events;
-    private root;
+    root: string;
     constructor(args: APIArguments<N, E>);
     reset(): void;
     /** Initialize the API */
@@ -436,6 +438,16 @@ declare class API<N, E> {
     handleAddEdge(data: EditEdgeProps): Promise<void>;
     handleDeleteNode(id: NodeId): Promise<void>;
     handleDeleteEdge(id: EdgeId): Promise<void>;
+    /** Update theme and type styles dynamically */
+    updateStyles(options: {
+        theme?: ThemeVars;
+        nodeTypes?: Record<string, ThemeVars>;
+        edgeTypes?: Record<string, ThemeVars>;
+    }): void;
+    /** Update color mode without recreating the canvas */
+    setColorMode(colorMode: 'light' | 'dark' | 'system'): void;
+    /** Cleanup resources when the graph is destroyed */
+    destroy(): void;
 }
 
 type SnapshotMessage<N, E> = {
@@ -575,6 +587,7 @@ declare class Playground {
     private options;
     private rootElement;
     private currentExample;
+    private examples;
     private currentGraph;
     private ingest;
     private isEditable;
@@ -619,8 +632,20 @@ declare class Playground {
     private handleChangeConnection;
     private handleOpenFolder;
     private handleCloseFolder;
+    /**
+     * Add or update an example
+     */
+    addExample(key: string, example: Example): void;
+    /**
+     * Remove an example
+     */
+    removeExample(key: string): void;
+    /**
+     * Update the example list in the DOM
+     */
+    private updateExampleList;
 }
 
 declare function graph<N, E>(args?: APIArguments<N, E>): Promise<API<N, E>>;
 
-export { type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, FileSystemSource, type HistoryMessage, Ingest, type IngestMessage, Playground, type PlaygroundOptions, type SnapshotMessage, type UpdateMessage, WebSocketSource, graph as default, graph };
+export { API, type APIArguments, type APIOptions, type EventsOptions, type Example, type ExampleEdge, type ExampleNode, type ExampleOptions, FileSource, FileSystemSource, type HistoryMessage, Ingest, type IngestMessage, Playground, type PlaygroundOptions, type SnapshotMessage, type Update, type UpdateMessage, Updater, WebSocketSource, graph as default, graph };

package/dist/index.js

@@ -1338,15 +1338,16 @@ var Layout = class _Layout {
 
 // src/canvas/marker.tsx
 import { jsx } from "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__ */ jsx(
     "marker",
     {
-      id: `g3p-marker-arrow${suffix}`,
+      id,
       className: "g3p-marker g3p-marker-arrow",
       markerWidth: size,
       markerHeight: size,
@@ -1358,14 +1359,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__ */ jsx(
     "marker",
     {
-      id: `g3p-marker-circle${suffix}`,
+      id,
       className: "g3p-marker g3p-marker-circle",
       markerWidth: size,
       markerHeight: size,
@@ -1377,15 +1379,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__ */ jsx(
     "marker",
     {
-      id: `g3p-marker-diamond${suffix}`,
+      id,
       className: "g3p-marker g3p-marker-diamond",
       markerWidth: size,
       markerHeight: size,
@@ -1397,14 +1400,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__ */ jsx(
     "marker",
     {
-      id: `g3p-marker-bar${suffix}`,
+      id,
       className: "g3p-marker g3p-marker-bar",
       markerWidth: size,
       markerHeight: size,
@@ -1416,7 +1420,7 @@ function bar(size, reverse = false) {
     }
   );
 }
-function none(size, reverse = false) {
+function none(size, reverse = false, prefix = "") {
   return void 0;
 }
 function normalize(data) {
@@ -2198,6 +2202,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__ */ jsxs2(
       "g",
       {
@@ -2212,8 +2219,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__ */ jsx3(
@@ -2798,6 +2805,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;
@@ -2811,6 +2822,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();
@@ -2819,9 +2837,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");
@@ -3006,12 +3022,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;
   }
@@ -3024,15 +3041,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__ */ jsx6(
       "div",
       {
         className: `g3p-canvas-container ${colorModeClass}`.trim(),
+        "data-g3p-instance": this.markerPrefix,
         ref: (el) => this.container = el,
         onContextMenu: this.onContextMenu.bind(this),
         children: /* @__PURE__ */ jsxs5(
@@ -3048,8 +3068,8 @@ var Canvas = class {
             onDblClick: this.onDoubleClick.bind(this),
             children: [
               /* @__PURE__ */ jsxs5("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__ */ jsx6(
                 "g",
@@ -3406,6 +3426,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
@@ -3622,6 +3676,7 @@ var API = class {
     this.nodeFields = /* @__PURE__ */ new Map();
     this.nextNodeId = 1;
     this.nextEdgeId = 1;
+    this.canvas?.reset?.();
   }
   /** Initialize the API */
   async init() {
@@ -3629,6 +3684,9 @@ var API = class {
     if (!root) throw new Error("root element not found");
     root.appendChild(this.canvas.container);
     await this.applyHistory();
+    if (this.events.onInit) {
+      this.events.onInit();
+    }
   }
   async applyHistory() {
     for (const update of this.history)
@@ -4084,6 +4142,18 @@ var API = class {
     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
@@ -4373,6 +4443,7 @@ var Playground = class {
   options;
   rootElement;
   currentExample;
+  examples;
   currentGraph = null;
   ingest = null;
   isEditable = false;
@@ -4390,7 +4461,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") {
@@ -4421,7 +4493,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}">
@@ -4507,7 +4579,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");
@@ -4594,8 +4673,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({
@@ -4626,7 +4707,7 @@ var Playground = class {
     }
   }
   connectExampleSource() {
-    const example = this.options.examples[this.currentExample];
+    const example = this.examples[this.currentExample];
     if (!example.source) {
       this.disconnectAllSources();
       return;
@@ -4969,7 +5050,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 = `
@@ -5067,6 +5148,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
@@ -5081,6 +5214,7 @@ export {
   FileSystemSource,
   Ingest,
   Playground,
+  Updater,
   WebSocketSource,
   index_default as default,
   graph

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3plate/graph-core",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "license": "GPL-3.0",
   "repository": {