@3plate/graph-vue 0.1.7 → 0.1.9

package/README.md

@@ -0,0 +1,223 @@
+# @3plate/graph-vue
+
+Vue 3 components for @3plate/graph visualization.
+
+## Installation
+
+```bash
+npm install @3plate/graph-vue
+```
+
+## Usage
+
+### Basic Example
+
+```vue
+<script setup lang="ts">
+import { Graph } from '@3plate/graph-vue'
+
+const nodes = [
+  { id: 'a', title: 'Start' },
+  { id: 'b', title: 'Process' },
+  { id: 'c', title: 'End' },
+]
+
+const edges = [
+  { source: 'a', target: 'b' },
+  { source: 'b', target: 'c' },
+]
+</script>
+
+<template>
+  <div style="width: 100%; height: 400px">
+    <Graph :nodes="nodes" :edges="edges" />
+  </div>
+</template>
+```
+
+### With Options
+
+```vue
+<script setup lang="ts">
+import { Graph } from '@3plate/graph-vue'
+
+const nodes = [
+  { id: 'input', type: 'input', title: 'Input' },
+  { id: 'process', type: 'process', title: 'Process' },
+  { id: 'output', type: 'success', title: 'Output' },
+]
+
+const edges = [
+  { source: 'input', target: 'process' },
+  { source: 'process', target: 'output', type: 'success' },
+]
+
+const options = {
+  graph: {
+    orientation: 'LR',
+  },
+  canvas: {
+    colorMode: 'dark',
+    nodeTypes: {
+      input: { border: '#3b82f6' },
+      process: { border: '#8b5cf6' },
+      success: { bg: '#f0fdf4', border: '#22c55e', text: '#166534' },
+    },
+    edgeTypes: {
+      success: { color: '#22c55e' },
+    },
+  },
+}
+</script>
+
+<template>
+  <div style="width: 100%; height: 400px">
+    <Graph :nodes="nodes" :edges="edges" :options="options" />
+  </div>
+</template>
+```
+
+### With Events
+
+```vue
+<script setup lang="ts">
+import { Graph } from '@3plate/graph-vue'
+
+const nodes = [
+  { id: 'a', title: 'Node A' },
+  { id: 'b', title: 'Node B' },
+]
+
+const edges = [{ source: 'a', target: 'b' }]
+
+const events = {
+  nodeClick: (node) => console.log('Clicked:', node),
+  edgeClick: (edge) => console.log('Edge clicked:', edge),
+  historyChange: (index, length) => {
+    console.log(`Step ${index + 1} of ${length}`)
+  },
+}
+</script>
+
+<template>
+  <div style="width: 100%; height: 400px">
+    <Graph :nodes="nodes" :edges="edges" :events="events" />
+  </div>
+</template>
+```
+
+### With Real-time Ingestion
+
+```vue
+<script setup lang="ts">
+import { Graph } from '@3plate/graph-vue'
+
+// WebSocket ingestion
+const ingestion = {
+  type: 'websocket' as const,
+  url: 'ws://localhost:8787',
+}
+</script>
+
+<template>
+  <div style="width: 100%; height: 400px">
+    <Graph :ingestion="ingestion" />
+  </div>
+</template>
+```
+
+### Reactive Updates
+
+The component automatically handles reactive prop changes:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Graph } from '@3plate/graph-vue'
+
+const nodes = ref([
+  { id: 'a', title: 'Start' },
+  { id: 'b', title: 'End' },
+])
+
+const edges = ref([{ source: 'a', target: 'b' }])
+
+function addNode() {
+  const id = `node-${Date.now()}`
+  nodes.value = [...nodes.value, { id, title: `Node ${id}` }]
+  edges.value = [...edges.value, { source: 'a', target: id }]
+}
+</script>
+
+<template>
+  <button @click="addNode">Add Node</button>
+  <div style="width: 100%; height: 400px">
+    <Graph :nodes="nodes" :edges="edges" />
+  </div>
+</template>
+```
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `nodes` | `N[]` | Array of node objects |
+| `edges` | `E[]` | Array of edge objects |
+| `history` | `Update<N, E>[]` | History frames for time-travel |
+| `ingestion` | `IngestionConfig` | WebSocket or file source config |
+| `options` | `APIOptions` | Graph and canvas options |
+| `events` | `EventsOptions` | Event handlers |
+
+### Playground Component
+
+The Playground component provides a full-featured demo environment:
+
+```vue
+<script setup lang="ts">
+import { Playground } from '@3plate/graph-vue'
+
+const examples = {
+  simple: {
+    name: 'Simple Graph',
+    description: 'A basic graph example',
+    nodes: [
+      { id: 'a', title: 'Start' },
+      { id: 'b', title: 'End' },
+    ],
+    edges: [{ source: 'a', target: 'b' }],
+  },
+  complex: {
+    name: 'Complex Graph',
+    description: 'A more complex example',
+    nodes: [
+      { id: '1', title: 'Input' },
+      { id: '2', title: 'Process A' },
+      { id: '3', title: 'Process B' },
+      { id: '4', title: 'Output' },
+    ],
+    edges: [
+      { source: '1', target: '2' },
+      { source: '1', target: '3' },
+      { source: '2', target: '4' },
+      { source: '3', target: '4' },
+    ],
+  },
+}
+</script>
+
+<template>
+  <div style="width: 100%; height: 600px">
+    <Playground :examples="examples" default-example="simple" />
+  </div>
+</template>
+```
+
+## Features
+
+- **Reactive updates** — Props changes are efficiently diffed and applied
+- **Incremental history** — Appended history frames are applied incrementally
+- **Style updates** — Theme and type changes are applied without re-render
+- **Color mode** — Light/dark mode changes are applied instantly
+- **Cleanup** — Resources are properly cleaned up on unmount
+- **Playground** — Full-featured demo environment with example switching
+

package/dist/index.d.mts

@@ -1,2 +1,135 @@
+import * as _3plate_graph_core from '@3plate/graph-core';
+import { Update, IngestionConfig, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
+export { API, APIArguments, IngestionConfig, Update } from '@3plate/graph-core';
+import * as vue from 'vue';
+import { PropType } from 'vue';
 
-export {  }
+type GraphProps<N, E> = {
+    /** Initial nodes */
+    nodes?: N[];
+    /** Initial edges */
+    edges?: E[];
+    /** Initial history */
+    history?: Update<N, E>[];
+    /** Ingestion source configuration (alternative to nodes/edges/history) */
+    ingestion?: IngestionConfig;
+    /** Options */
+    options?: APIArguments<N, E>['options'];
+    /** Events */
+    events?: APIArguments<N, E>['events'];
+};
+/**
+ * Graph component - renders a graph visualization
+ * Intelligently handles prop changes by diffing nodes, edges, and history
+ */
+declare const Graph: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Initial nodes */
+    nodes: {
+        type: PropType<any[]>;
+        default: undefined;
+    };
+    /** Initial edges */
+    edges: {
+        type: PropType<any[]>;
+        default: undefined;
+    };
+    /** Initial history */
+    history: {
+        type: PropType<Update<any, any>[]>;
+        default: undefined;
+    };
+    /** Ingestion source configuration */
+    ingestion: {
+        type: PropType<IngestionConfig>;
+        default: undefined;
+    };
+    /** Options */
+    options: {
+        type: PropType<APIArguments<any, any>["options"]>;
+        default: undefined;
+    };
+    /** Events */
+    events: {
+        type: PropType<APIArguments<any, any>["events"]>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Initial nodes */
+    nodes: {
+        type: PropType<any[]>;
+        default: undefined;
+    };
+    /** Initial edges */
+    edges: {
+        type: PropType<any[]>;
+        default: undefined;
+    };
+    /** Initial history */
+    history: {
+        type: PropType<Update<any, any>[]>;
+        default: undefined;
+    };
+    /** Ingestion source configuration */
+    ingestion: {
+        type: PropType<IngestionConfig>;
+        default: undefined;
+    };
+    /** Options */
+    options: {
+        type: PropType<APIArguments<any, any>["options"]>;
+        default: undefined;
+    };
+    /** Events */
+    events: {
+        type: PropType<APIArguments<any, any>["events"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    options: _3plate_graph_core.APIOptions<any, any> | undefined;
+    events: _3plate_graph_core.EventsOptions<any, any> | undefined;
+    nodes: any[];
+    edges: any[];
+    history: Update<any, any>[];
+    ingestion: IngestionConfig;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type PlaygroundProps = {
+    /** Examples to display */
+    examples: PlaygroundOptions['examples'];
+    /** Default example key */
+    defaultExample?: string;
+};
+/**
+ * Playground component - renders the interactive playground with examples
+ */
+declare const Playground: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Examples to display */
+    examples: {
+        type: PropType<PlaygroundOptions["examples"]>;
+        required: true;
+    };
+    /** Default example key */
+    defaultExample: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Examples to display */
+    examples: {
+        type: PropType<PlaygroundOptions["examples"]>;
+        required: true;
+    };
+    /** Default example key */
+    defaultExample: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    defaultExample: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Graph, type GraphProps, Playground, type PlaygroundProps };

package/dist/index.d.ts

@@ -1,2 +1,135 @@
+import * as _3plate_graph_core from '@3plate/graph-core';
+import { Update, IngestionConfig, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
+export { API, APIArguments, IngestionConfig, Update } from '@3plate/graph-core';
+import * as vue from 'vue';
+import { PropType } from 'vue';
 
-export {  }
+type GraphProps<N, E> = {
+    /** Initial nodes */
+    nodes?: N[];
+    /** Initial edges */
+    edges?: E[];
+    /** Initial history */
+    history?: Update<N, E>[];
+    /** Ingestion source configuration (alternative to nodes/edges/history) */
+    ingestion?: IngestionConfig;
+    /** Options */
+    options?: APIArguments<N, E>['options'];
+    /** Events */
+    events?: APIArguments<N, E>['events'];
+};
+/**
+ * Graph component - renders a graph visualization
+ * Intelligently handles prop changes by diffing nodes, edges, and history
+ */
+declare const Graph: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Initial nodes */
+    nodes: {
+        type: PropType<any[]>;
+        default: undefined;
+    };
+    /** Initial edges */
+    edges: {
+        type: PropType<any[]>;
+        default: undefined;
+    };
+    /** Initial history */
+    history: {
+        type: PropType<Update<any, any>[]>;
+        default: undefined;
+    };
+    /** Ingestion source configuration */
+    ingestion: {
+        type: PropType<IngestionConfig>;
+        default: undefined;
+    };
+    /** Options */
+    options: {
+        type: PropType<APIArguments<any, any>["options"]>;
+        default: undefined;
+    };
+    /** Events */
+    events: {
+        type: PropType<APIArguments<any, any>["events"]>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Initial nodes */
+    nodes: {
+        type: PropType<any[]>;
+        default: undefined;
+    };
+    /** Initial edges */
+    edges: {
+        type: PropType<any[]>;
+        default: undefined;
+    };
+    /** Initial history */
+    history: {
+        type: PropType<Update<any, any>[]>;
+        default: undefined;
+    };
+    /** Ingestion source configuration */
+    ingestion: {
+        type: PropType<IngestionConfig>;
+        default: undefined;
+    };
+    /** Options */
+    options: {
+        type: PropType<APIArguments<any, any>["options"]>;
+        default: undefined;
+    };
+    /** Events */
+    events: {
+        type: PropType<APIArguments<any, any>["events"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    options: _3plate_graph_core.APIOptions<any, any> | undefined;
+    events: _3plate_graph_core.EventsOptions<any, any> | undefined;
+    nodes: any[];
+    edges: any[];
+    history: Update<any, any>[];
+    ingestion: IngestionConfig;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type PlaygroundProps = {
+    /** Examples to display */
+    examples: PlaygroundOptions['examples'];
+    /** Default example key */
+    defaultExample?: string;
+};
+/**
+ * Playground component - renders the interactive playground with examples
+ */
+declare const Playground: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Examples to display */
+    examples: {
+        type: PropType<PlaygroundOptions["examples"]>;
+        required: true;
+    };
+    /** Default example key */
+    defaultExample: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Examples to display */
+    examples: {
+        type: PropType<PlaygroundOptions["examples"]>;
+        required: true;
+    };
+    /** Default example key */
+    defaultExample: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    defaultExample: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Graph, type GraphProps, Playground, type PlaygroundProps };

package/dist/index.js

@@ -1 +1,215 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Graph: () => Graph,
+  Playground: () => Playground
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Graph.ts
+var import_vue = require("vue");
+var import_graph_core = require("@3plate/graph-core");
+var Graph = (0, import_vue.defineComponent)({
+  name: "Graph",
+  props: {
+    /** Initial nodes */
+    nodes: {
+      type: Array,
+      default: void 0
+    },
+    /** Initial edges */
+    edges: {
+      type: Array,
+      default: void 0
+    },
+    /** Initial history */
+    history: {
+      type: Array,
+      default: void 0
+    },
+    /** Ingestion source configuration */
+    ingestion: {
+      type: Object,
+      default: void 0
+    },
+    /** Options */
+    options: {
+      type: Object,
+      default: void 0
+    },
+    /** Events */
+    events: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const rootRef = (0, import_vue.ref)(null);
+    const apiRef = (0, import_vue.ref)(null);
+    const rootId = `graph-${Math.random().toString(36).slice(2, 11)}`;
+    (0, import_vue.onMounted)(async () => {
+      if (!rootRef.value) return;
+      rootRef.value.id = rootId;
+      const api = await (0, import_graph_core.graph)({
+        root: rootId,
+        nodes: props.nodes,
+        edges: props.edges,
+        history: props.history,
+        ingestion: props.ingestion,
+        options: props.options,
+        events: props.events
+      });
+      apiRef.value = api;
+    });
+    (0, import_vue.onUnmounted)(() => {
+      if (apiRef.value) {
+        apiRef.value.destroy();
+        apiRef.value = null;
+      }
+      if (rootRef.value) {
+        const canvas = rootRef.value.querySelector("canvas, svg");
+        if (canvas) {
+          canvas.remove();
+        }
+      }
+    });
+    (0, import_vue.watch)(
+      () => [props.nodes, props.edges, props.history, props.options],
+      () => {
+        if (!apiRef.value) return;
+        apiRef.value.applyProps({ nodes: props.nodes, edges: props.edges, history: props.history, options: props.options });
+      },
+      { deep: true }
+    );
+    return () => (0, import_vue.h)("div", {
+      ref: rootRef,
+      style: { width: "100%", height: "100%" }
+    });
+  }
+});
+
+// src/Playground.ts
+var import_vue2 = require("vue");
+var import_graph_core2 = require("@3plate/graph-core");
+var Playground = (0, import_vue2.defineComponent)({
+  name: "Playground",
+  props: {
+    /** Examples to display */
+    examples: {
+      type: Object,
+      required: true
+    },
+    /** Default example key */
+    defaultExample: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const rootRef = (0, import_vue2.ref)(null);
+    const playgroundRef = (0, import_vue2.ref)(null);
+    const rootId = `playground-${Math.random().toString(36).slice(2, 11)}`;
+    const prevExamples = (0, import_vue2.ref)({});
+    (0, import_vue2.onMounted)(async () => {
+      if (!rootRef.value) return;
+      rootRef.value.id = rootId;
+      const playground = new import_graph_core2.Playground({
+        root: rootId,
+        examples: props.examples,
+        defaultExample: props.defaultExample
+      });
+      playgroundRef.value = playground;
+      prevExamples.value = { ...props.examples };
+      await playground.init();
+    });
+    (0, import_vue2.onUnmounted)(() => {
+      playgroundRef.value = null;
+    });
+    (0, import_vue2.watch)(
+      () => props.examples,
+      (current) => {
+        if (!playgroundRef.value) return;
+        const playground = playgroundRef.value;
+        const prev = prevExamples.value;
+        const allKeys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(current)]);
+        for (const key of allKeys) {
+          const prevExample = prev[key];
+          const currentExample = current[key];
+          if (!prevExample && currentExample) {
+            playground.addExample(key, currentExample);
+          } else if (prevExample && !currentExample) {
+            playground.removeExample(key);
+          } else if (prevExample && currentExample && !shallowEqualExample(prevExample, currentExample)) {
+            playground.addExample(key, currentExample);
+          }
+        }
+        prevExamples.value = { ...current };
+      },
+      { deep: true }
+    );
+    return () => (0, import_vue2.h)("div", {
+      ref: rootRef,
+      style: { width: "100%", height: "100%" }
+    });
+  }
+});
+function shallowEqualExample(a, b) {
+  if (a === b) return true;
+  if (a.name !== b.name) return false;
+  if (a.description !== b.description) return false;
+  if (!shallowEqualArray(a.nodes, b.nodes)) return false;
+  if (!shallowEqualArray(a.edges, b.edges)) return false;
+  if (!shallowEqualOptions(a.options, b.options)) return false;
+  if (!shallowEqualSource(a.source, b.source)) return false;
+  return true;
+}
+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]) return false;
+  }
+  return true;
+}
+function shallowEqualOptions(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a === b;
+}
+function shallowEqualSource(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.type !== b.type) return false;
+  if (a.type === "file" && b.type === "file") {
+    return a.path === b.path;
+  }
+  if (a.type === "websocket" && b.type === "websocket") {
+    return a.url === b.url;
+  }
+  return false;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Graph,
+  Playground
+});

package/dist/index.mjs

@@ -0,0 +1,187 @@
+// src/Graph.ts
+import { defineComponent, ref, onMounted, onUnmounted, watch, h } from "vue";
+import { graph } from "@3plate/graph-core";
+var Graph = defineComponent({
+  name: "Graph",
+  props: {
+    /** Initial nodes */
+    nodes: {
+      type: Array,
+      default: void 0
+    },
+    /** Initial edges */
+    edges: {
+      type: Array,
+      default: void 0
+    },
+    /** Initial history */
+    history: {
+      type: Array,
+      default: void 0
+    },
+    /** Ingestion source configuration */
+    ingestion: {
+      type: Object,
+      default: void 0
+    },
+    /** Options */
+    options: {
+      type: Object,
+      default: void 0
+    },
+    /** Events */
+    events: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const rootRef = ref(null);
+    const apiRef = ref(null);
+    const rootId = `graph-${Math.random().toString(36).slice(2, 11)}`;
+    onMounted(async () => {
+      if (!rootRef.value) return;
+      rootRef.value.id = rootId;
+      const api = await graph({
+        root: rootId,
+        nodes: props.nodes,
+        edges: props.edges,
+        history: props.history,
+        ingestion: props.ingestion,
+        options: props.options,
+        events: props.events
+      });
+      apiRef.value = api;
+    });
+    onUnmounted(() => {
+      if (apiRef.value) {
+        apiRef.value.destroy();
+        apiRef.value = null;
+      }
+      if (rootRef.value) {
+        const canvas = rootRef.value.querySelector("canvas, svg");
+        if (canvas) {
+          canvas.remove();
+        }
+      }
+    });
+    watch(
+      () => [props.nodes, props.edges, props.history, props.options],
+      () => {
+        if (!apiRef.value) return;
+        apiRef.value.applyProps({ nodes: props.nodes, edges: props.edges, history: props.history, options: props.options });
+      },
+      { deep: true }
+    );
+    return () => h("div", {
+      ref: rootRef,
+      style: { width: "100%", height: "100%" }
+    });
+  }
+});
+
+// src/Playground.ts
+import { defineComponent as defineComponent2, ref as ref2, onMounted as onMounted2, onUnmounted as onUnmounted2, watch as watch2, h as h2 } from "vue";
+import { Playground as PlaygroundClass } from "@3plate/graph-core";
+var Playground = defineComponent2({
+  name: "Playground",
+  props: {
+    /** Examples to display */
+    examples: {
+      type: Object,
+      required: true
+    },
+    /** Default example key */
+    defaultExample: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const rootRef = ref2(null);
+    const playgroundRef = ref2(null);
+    const rootId = `playground-${Math.random().toString(36).slice(2, 11)}`;
+    const prevExamples = ref2({});
+    onMounted2(async () => {
+      if (!rootRef.value) return;
+      rootRef.value.id = rootId;
+      const playground = new PlaygroundClass({
+        root: rootId,
+        examples: props.examples,
+        defaultExample: props.defaultExample
+      });
+      playgroundRef.value = playground;
+      prevExamples.value = { ...props.examples };
+      await playground.init();
+    });
+    onUnmounted2(() => {
+      playgroundRef.value = null;
+    });
+    watch2(
+      () => props.examples,
+      (current) => {
+        if (!playgroundRef.value) return;
+        const playground = playgroundRef.value;
+        const prev = prevExamples.value;
+        const allKeys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(current)]);
+        for (const key of allKeys) {
+          const prevExample = prev[key];
+          const currentExample = current[key];
+          if (!prevExample && currentExample) {
+            playground.addExample(key, currentExample);
+          } else if (prevExample && !currentExample) {
+            playground.removeExample(key);
+          } else if (prevExample && currentExample && !shallowEqualExample(prevExample, currentExample)) {
+            playground.addExample(key, currentExample);
+          }
+        }
+        prevExamples.value = { ...current };
+      },
+      { deep: true }
+    );
+    return () => h2("div", {
+      ref: rootRef,
+      style: { width: "100%", height: "100%" }
+    });
+  }
+});
+function shallowEqualExample(a, b) {
+  if (a === b) return true;
+  if (a.name !== b.name) return false;
+  if (a.description !== b.description) return false;
+  if (!shallowEqualArray(a.nodes, b.nodes)) return false;
+  if (!shallowEqualArray(a.edges, b.edges)) return false;
+  if (!shallowEqualOptions(a.options, b.options)) return false;
+  if (!shallowEqualSource(a.source, b.source)) return false;
+  return true;
+}
+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]) return false;
+  }
+  return true;
+}
+function shallowEqualOptions(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a === b;
+}
+function shallowEqualSource(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.type !== b.type) return false;
+  if (a.type === "file" && b.type === "file") {
+    return a.path === b.path;
+  }
+  if (a.type === "websocket" && b.type === "websocket") {
+    return a.url === b.url;
+  }
+  return false;
+}
+export {
+  Graph,
+  Playground
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3plate/graph-vue",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "license": "GPL-3.0",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@3plate/graph-core": "0.1.7"
+    "@3plate/graph-core": "0.1.9"
   },
   "devDependencies": {
     "tsup": "^8.5.1",