@3plate/graph-react 0.1.15 → 0.1.16

package/README.md

@@ -1,6 +1,6 @@
 # @3plate/graph-react
 
-React components for @3plate/graph visualization.
+React wrapper for [@3plate/graph](../../README.md) — a graph visualization library with stable layouts and incremental updates.
 
 ## Installation
 
@@ -8,27 +8,184 @@ React components for @3plate/graph visualization.
 npm install @3plate/graph-react
 ```
 
+React and React DOM are peer dependencies (React 18 or 19):
+
+```bash
+npm install react react-dom
+```
+
 ## Usage
 
 ```tsx
-import { GraphView, createGraph } from '@3plate/graph-react'
+import { Graph } from '@3plate/graph-react'
 
 function App() {
-  const graph = createGraph({
-    nodes: [
-      { id: '1', label: 'Node 1' },
-      { id: '2', label: 'Node 2' },
-    ],
-    edges: [{ id: 'e1', source: '1', target: '2' }],
-  })
-
   return (
-    <GraphView
-      graph={graph}
-      width={800}
-      height={600}
-      onNodeClick={nodeId => console.log('Node clicked:', nodeId)}
+    <Graph
+      nodes={[
+        { id: 'a', title: 'Start' },
+        { id: 'b', title: 'Process' },
+        { id: 'c', title: 'End' },
+      ]}
+      edges={[
+        { source: 'a', target: 'b' },
+        { source: 'b', target: 'c' },
+      ]}
     />
   )
 }
 ```
+
+The `<Graph>` component fills its container — give the parent a defined size:
+
+```tsx
+<div style={{ width: '100%', height: 600 }}>
+  <Graph nodes={nodes} edges={edges} />
+</div>
+```
+
+## Custom Node Rendering
+
+Use `options.canvas.renderNode` to control what appears inside each node. The function can return an **`HTMLElement` or a React node (JSX)**:
+
+```tsx
+<Graph
+  nodes={nodes}
+  edges={edges}
+  options={{
+    canvas: {
+      renderNode: (node) => (
+        <div className="my-node">
+          <strong>{node.title}</strong>
+          <span>{node.status}</span>
+        </div>
+      ),
+    },
+  }}
+/>
+```
+
+React content is mounted with `flushSync` so the graph can measure the node's dimensions before laying out the graph. Cleanup (unmounting the React root) happens automatically when a node is removed.
+
+### Full React components
+
+Any React component works, including those with hooks and state:
+
+```tsx
+function NodeCard({ node }: { node: MyNode }) {
+  const [expanded, setExpanded] = useState(false)
+  return (
+    <div className="node-card" onClick={() => setExpanded(e => !e)}>
+      <h3>{node.title}</h3>
+      {expanded && <p>{node.description}</p>}
+    </div>
+  )
+}
+
+<Graph
+  nodes={nodes}
+  edges={edges}
+  options={{
+    canvas: {
+      renderNode: (node) => <NodeCard node={node} />,
+    },
+  }}
+/>
+```
+
+> **Note:** Node dimensions are measured once when the node is first created. If your component can change size after the initial render (e.g. toggling expanded state), the graph layout won't automatically reflow. Prefer fixed-size or CSS-constrained node content.
+
+## Props
+
+```typescript
+type GraphProps<N, E> = {
+  nodes?: N[]
+  edges?: E[]
+  history?: Update<N, E>[]         // Replay a sequence of graph states
+  ingestion?: IngestionConfig       // WebSocket / file polling (alternative to nodes/edges)
+  options?: {
+    graph?: GraphOptions            // Layout options (orientation, margins, etc.)
+    canvas?: {
+      renderNode?: (node: N, props?: NodeProps<N>) => ReactNode | HTMLElement
+      width?: string | number       // default: '100%'
+      height?: string | number      // default: '100%'
+      padding?: number              // default: 20
+      editable?: boolean            // default: false
+      panZoom?: boolean             // default: true
+      colorMode?: 'light' | 'dark' | 'system'  // default: 'system'
+      theme?: ThemeVars
+      nodeTypes?: Record<string, ThemeVars>
+      edgeTypes?: Record<string, ThemeVars>
+    }
+    props?: PropsOptions<N, E>      // Extract id/title/ports from your data shape
+  }
+  events?: EventsOptions<N, E>
+}
+```
+
+## Reactive Updates
+
+Pass updated `nodes` and `edges` arrays and the graph updates automatically. Only changed nodes are re-measured and re-laid out:
+
+```tsx
+const [nodes, setNodes] = useState(initialNodes)
+const [edges, setEdges] = useState(initialEdges)
+
+// The graph rerenders incrementally when nodes or edges change
+return <Graph nodes={nodes} edges={edges} />
+```
+
+## Events
+
+```tsx
+<Graph
+  nodes={nodes}
+  edges={edges}
+  events={{
+    nodeClick: (node) => console.log('clicked', node),
+    edgeClick: (edge) => console.log('edge clicked', edge),
+    addNode: (props, done) => done({ id: crypto.randomUUID(), ...props }),
+    addEdge: (edge, done) => done(edge),
+    removeNode: (node, done) => done(confirm('Delete?')),
+    historyChange: (index, length) => setStep(`${index + 1}/${length}`),
+  }}
+/>
+```
+
+## Theming
+
+```tsx
+<Graph
+  nodes={[
+    { id: 'a', type: 'success', title: 'Passed' },
+    { id: 'b', type: 'error',   title: 'Failed' },
+  ]}
+  edges={edges}
+  options={{
+    canvas: {
+      colorMode: 'dark',
+      nodeTypes: {
+        success: { border: '#22c55e', text: '#dcfce7' },
+        error:   { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' },
+      },
+      edgeTypes: {
+        error: { color: '#ef4444' },
+      },
+    },
+  }}
+/>
+```
+
+## Real-time Ingestion
+
+```tsx
+// WebSocket
+<Graph ingestion={{ type: 'websocket', url: 'ws://localhost:8787' }} />
+
+// Polling
+<Graph ingestion={{ type: 'file', url: '/api/updates.ndjson', intervalMs: 1000 }} />
+```
+
+## License
+
+**GNU General Public License v3.0**. Commercial licenses available — see the [root README](../../README.md) for details.

package/dist/index.cjs

@@ -37,11 +37,39 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Graph.tsx
 var import_react = __toESM(require("react"), 1);
+var import_client = require("react-dom/client");
+var import_react_dom = require("react-dom");
 var import_graph_core = require("@3plate/graph-core");
+function buildCoreOptions(options, pendingMounts) {
+  const userRenderNode = options?.canvas?.renderNode;
+  if (!userRenderNode) return options;
+  return {
+    ...options,
+    canvas: {
+      ...options?.canvas,
+      renderNode: (node, nodeProps) => {
+        const result = userRenderNode(node, nodeProps);
+        if (result instanceof HTMLElement) return result;
+        const el = document.createElement("div");
+        pendingMounts.set(el, result);
+        return el;
+      },
+      mountNode: (node, el) => {
+        const reactNode = pendingMounts.get(el);
+        if (reactNode === void 0) return;
+        pendingMounts.delete(el);
+        const root = (0, import_client.createRoot)(el);
+        (0, import_react_dom.flushSync)(() => root.render(reactNode));
+        return () => root.unmount();
+      }
+    }
+  };
+}
 function Graph(props) {
   const rootRef = (0, import_react.useRef)(null);
   const apiRef = (0, import_react.useRef)(null);
   const rootIdRef = (0, import_react.useRef)(`graph-${Math.random().toString(36).slice(2, 11)}`);
+  const pendingMounts = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   (0, import_react.useEffect)(() => {
     if (!rootRef.current || apiRef.current) return;
     rootRef.current.id = rootIdRef.current;
@@ -51,7 +79,7 @@ function Graph(props) {
       edges: props.edges,
       history: props.history,
       ingestion: props.ingestion,
-      options: props.options,
+      options: buildCoreOptions(props.options, pendingMounts.current),
       events: props.events
     }).then((api) => {
       apiRef.current = api;
@@ -71,7 +99,10 @@ function Graph(props) {
   }, []);
   (0, import_react.useEffect)(() => {
     if (!apiRef.current) return;
-    apiRef.current.applyProps(props);
+    apiRef.current.applyProps({
+      ...props,
+      options: buildCoreOptions(props.options, pendingMounts.current)
+    });
   }, [props.nodes, props.edges, props.history, props.options]);
   return /* @__PURE__ */ import_react.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
 }

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Graph.tsx","../src/Playground.tsx"],"sourcesContent":["/**\n * @3plate/graph-react - React components for @3plate/graph graph visualization\n */\n\nexport { Graph } from './Graph'\nexport { Playground } from './Playground'\n\nexport type { GraphProps } from './Graph'\nexport type { PlaygroundProps } from './Playground'\n\n// Re-export types from core for convenience\nexport type {\n  // API types\n  API,\n  APIArguments,\n  APIOptions,\n  Update,\n  IngestionConfig,\n  EventsOptions,\n  // Callback parameter types\n  NewNode,\n  NewEdge,\n  NodeProps,\n  EdgeProps,\n  PortProps,\n  RenderNode,\n  // Ingestion types\n  IngestMessage,\n  SnapshotMessage,\n  UpdateMessage,\n  HistoryMessage,\n  // WebSocket types\n  WebSocketStatus,\n  WebSocketStatusListener,\n  // Theming types\n  ColorMode,\n  ThemeVars,\n  CanvasTheme,\n  NodeTheme,\n  PortTheme,\n  EdgeTheme,\n  // Common types\n  Orientation,\n  NodeAlign,\n  PortStyle,\n} from '@3plate/graph-core'\n","import React, { useEffect, useRef } from 'react'\nimport { graph, type API } from '@3plate/graph-core'\nimport type { APIArguments, Update, IngestionConfig } from '@3plate/graph-core'\n\nexport type GraphProps<N, E> = {\n  /** Initial nodes */\n  nodes?: N[]\n  /** Initial edges */\n  edges?: E[]\n  /** Initial history */\n  history?: Update<N, E>[]\n  /** Ingestion source configuration (alternative to nodes/edges/history) */\n  ingestion?: IngestionConfig\n  /** Options */\n  options?: APIArguments<N, E>['options']\n  /** Events */\n  events?: APIArguments<N, E>['events']\n}\n\n/**\n * Graph component - renders a graph visualization\n * Intelligently handles prop changes by diffing nodes, edges, and history\n */\nexport function Graph<N, E>(props: GraphProps<N, E>) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const apiRef = useRef<API<N, E> | null>(null)\n  const rootIdRef = useRef<string>(`graph-${Math.random().toString(36).slice(2, 11)}`)\n\n  // Initialize API once\n  useEffect(() => {\n    if (!rootRef.current || apiRef.current) return\n\n    rootRef.current.id = rootIdRef.current\n\n    graph({\n      root: rootIdRef.current,\n      nodes: props.nodes,\n      edges: props.edges,\n      history: props.history,\n      ingestion: props.ingestion,\n      options: props.options,\n      events: props.events,\n    }).then(api => {\n      apiRef.current = api\n    })\n\n    return () => {\n      // Cleanup\n      if (apiRef.current) {\n        apiRef.current.destroy()\n        apiRef.current = null\n      }\n      if (rootRef.current) {\n        // Remove canvas from DOM\n        const canvas = rootRef.current.querySelector('canvas, svg')\n        if (canvas) {\n          canvas.remove()\n        }\n      }\n    }\n  }, []) // Only run once on mount\n\n  // Handle prop changes using the centralized applyProps method\n  useEffect(() => {\n    if (!apiRef.current) return\n    apiRef.current.applyProps(props)\n  }, [props.nodes, props.edges, props.history, props.options])\n\n  return <div ref={rootRef} style={{ width: '100%', height: '100%' }} />\n}\n","import React, { useEffect, useRef } from 'react'\nimport { Playground as PlaygroundClass, type PlaygroundOptions, type Example } from '@3plate/graph-core'\n\nexport type PlaygroundProps = {\n  /** Examples to display */\n  examples: PlaygroundOptions['examples']\n  /** Default example key */\n  defaultExample?: string\n}\n\n/**\n * Playground component - renders the interactive playground with examples\n */\nexport function Playground(props: PlaygroundProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const playgroundRef = useRef<PlaygroundClass | null>(null)\n  const rootIdRef = useRef<string>(`playground-${Math.random().toString(36).slice(2, 11)}`)\n  const prevExamplesRef = useRef<Record<string, Example>>({})\n\n  useEffect(() => {\n    if (!rootRef.current || playgroundRef.current) return\n\n    rootRef.current.id = rootIdRef.current\n\n    const playground = new PlaygroundClass({\n      root: rootIdRef.current,\n      examples: props.examples,\n      defaultExample: props.defaultExample,\n    })\n    playgroundRef.current = playground\n    prevExamplesRef.current = { ...props.examples }\n    playground.init()\n\n    return () => {\n      // Cleanup if needed\n      playgroundRef.current = null\n    }\n  }, []) // Only initialize once\n\n  // Handle examples changes\n  useEffect(() => {\n    if (!playgroundRef.current) return\n\n    const playground = playgroundRef.current\n    const prev = prevExamplesRef.current\n    const current = props.examples\n\n    // Get all keys from both previous and current\n    const allKeys = new Set([...Object.keys(prev), ...Object.keys(current)])\n\n    for (const key of allKeys) {\n      const prevExample = prev[key]\n      const currentExample = current[key]\n\n      if (!prevExample && currentExample) {\n        // Example was added\n        playground.addExample(key, currentExample)\n      } else if (prevExample && !currentExample) {\n        // Example was removed\n        playground.removeExample(key)\n      } else if (prevExample && currentExample && !shallowEqualExample(prevExample, currentExample)) {\n        // Example was modified\n        playground.addExample(key, currentExample)\n      }\n    }\n\n    prevExamplesRef.current = { ...current }\n  }, [props.examples])\n\n  return <div ref={rootRef} style={{ width: '100%', height: '100%' }} />\n}\n\n/**\n * Shallow comparison of two Example objects\n */\nfunction shallowEqualExample(a: Example, b: Example): boolean {\n  if (a === b) return true\n  if (a.name !== b.name) return false\n  if (a.description !== b.description) return false\n  if (!shallowEqualArray(a.nodes, b.nodes)) return false\n  if (!shallowEqualArray(a.edges, b.edges)) return false\n  if (!shallowEqualOptions(a.options, b.options)) return false\n  if (!shallowEqualSource(a.source, b.source)) return false\n  return true\n}\n\n/**\n * Shallow comparison of arrays\n */\nfunction shallowEqualArray<T>(a: T[] | undefined, b: T[] | undefined): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i++) {\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\n\n/**\n * Shallow comparison of ExampleOptions\n */\nfunction shallowEqualOptions(\n  a: Example['options'],\n  b: Example['options']\n): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  // For now, do a simple reference check on options\n  // Can be enhanced if needed\n  return a === b\n}\n\n/**\n * Shallow comparison of ExampleSource\n */\nfunction shallowEqualSource(\n  a: Example['source'],\n  b: Example['source']\n): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  if (a.type !== b.type) return false\n  if (a.type === 'file' && b.type === 'file') {\n    return a.path === b.path\n  }\n  if (a.type === 'websocket' && b.type === 'websocket') {\n    return a.url === b.url\n  }\n  return false\n}\n"],"mappings":"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","names":["React","import_react","import_graph_core","PlaygroundClass","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Graph.tsx","../src/Playground.tsx"],"sourcesContent":["/**\n * @3plate/graph-react - React components for @3plate/graph graph visualization\n */\n\nexport { Graph } from './Graph'\nexport { Playground } from './Playground'\n\nexport type { GraphProps } from './Graph'\nexport type { PlaygroundProps } from './Playground'\n\n// Re-export types from core for convenience\nexport type {\n  // API types\n  API,\n  APIArguments,\n  APIOptions,\n  Update,\n  IngestionConfig,\n  EventsOptions,\n  // Callback parameter types\n  NewNode,\n  NewEdge,\n  NodeProps,\n  EdgeProps,\n  PortProps,\n  RenderNode,\n  // Ingestion types\n  IngestMessage,\n  SnapshotMessage,\n  UpdateMessage,\n  HistoryMessage,\n  // WebSocket types\n  WebSocketStatus,\n  WebSocketStatusListener,\n  // Theming types\n  ColorMode,\n  ThemeVars,\n  CanvasTheme,\n  NodeTheme,\n  PortTheme,\n  EdgeTheme,\n  // Common types\n  Orientation,\n  NodeAlign,\n  PortStyle,\n} from '@3plate/graph-core'\n","import React, { useEffect, useRef, type ReactNode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport { flushSync } from 'react-dom'\nimport { graph, type API } from '@3plate/graph-core'\nimport type {\n  APIArguments,\n  APIOptions,\n  CanvasOptions,\n  NodeProps,\n  Update,\n  IngestionConfig,\n} from '@3plate/graph-core'\n\n/** Extends the core renderNode signature to also accept React nodes */\ntype ReactRenderNode<N> = (node: N, props?: NodeProps<N>) => ReactNode | HTMLElement\n\n/** CanvasOptions with an extended renderNode that accepts React nodes */\ntype ReactCanvasOptions<N> = Omit<CanvasOptions<N>, 'renderNode'> & {\n  renderNode?: ReactRenderNode<N>\n}\n\n/** APIOptions with the React-extended canvas options */\ntype ReactAPIOptions<N, E> = Omit<APIOptions<N, E>, 'canvas'> & {\n  canvas?: ReactCanvasOptions<N>\n}\n\nexport type GraphProps<N, E> = {\n  /** Initial nodes */\n  nodes?: N[]\n  /** Initial edges */\n  edges?: E[]\n  /** Initial history */\n  history?: Update<N, E>[]\n  /** Ingestion source configuration (alternative to nodes/edges/history) */\n  ingestion?: IngestionConfig\n  /** Options */\n  options?: ReactAPIOptions<N, E>\n  /** Events */\n  events?: APIArguments<N, E>['events']\n}\n\n/**\n * Converts ReactAPIOptions into core APIOptions.\n * When renderNode returns a ReactNode, a placeholder element is produced and\n * mountNode renders the React content into it synchronously via flushSync.\n */\nfunction buildCoreOptions<N, E>(\n  options: ReactAPIOptions<N, E> | undefined,\n  pendingMounts: Map<HTMLElement, ReactNode>,\n): APIOptions<N, E> | undefined {\n  const userRenderNode = options?.canvas?.renderNode\n  if (!userRenderNode) return options as APIOptions<N, E> | undefined\n\n  return {\n    ...options,\n    canvas: {\n      ...options?.canvas,\n      renderNode: (node: N, nodeProps?: NodeProps<N>): HTMLElement => {\n        const result = userRenderNode(node, nodeProps)\n        if (result instanceof HTMLElement) return result\n        const el = document.createElement('div')\n        pendingMounts.set(el, result)\n        return el\n      },\n      mountNode: (node: N, el: HTMLElement): (() => void) | void => {\n        const reactNode = pendingMounts.get(el)\n        if (reactNode === undefined) return\n        pendingMounts.delete(el)\n        const root = createRoot(el)\n        flushSync(() => root.render(reactNode as ReactNode))\n        return () => root.unmount()\n      },\n    },\n  } as APIOptions<N, E>\n}\n\n/**\n * Graph component - renders a graph visualization.\n * Intelligently handles prop changes by diffing nodes, edges, and history.\n *\n * The `options.canvas.renderNode` function may return either an HTMLElement\n * or a React node (JSX). When JSX is returned the wrapper handles mounting\n * and cleanup automatically.\n */\nexport function Graph<N, E>(props: GraphProps<N, E>) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const apiRef = useRef<API<N, E> | null>(null)\n  const rootIdRef = useRef<string>(`graph-${Math.random().toString(36).slice(2, 11)}`)\n  const pendingMounts = useRef(new Map<HTMLElement, ReactNode>())\n\n  // Initialize API once\n  useEffect(() => {\n    if (!rootRef.current || apiRef.current) return\n\n    rootRef.current.id = rootIdRef.current\n\n    graph({\n      root: rootIdRef.current,\n      nodes: props.nodes,\n      edges: props.edges,\n      history: props.history,\n      ingestion: props.ingestion,\n      options: buildCoreOptions(props.options, pendingMounts.current),\n      events: props.events,\n    }).then(api => {\n      apiRef.current = api\n    })\n\n    return () => {\n      // Cleanup\n      if (apiRef.current) {\n        apiRef.current.destroy()\n        apiRef.current = null\n      }\n      if (rootRef.current) {\n        // Remove canvas from DOM\n        const canvas = rootRef.current.querySelector('canvas, svg')\n        if (canvas) {\n          canvas.remove()\n        }\n      }\n    }\n  }, []) // Only run once on mount\n\n  // Handle prop changes using the centralized applyProps method\n  useEffect(() => {\n    if (!apiRef.current) return\n    apiRef.current.applyProps({\n      ...props,\n      options: buildCoreOptions(props.options, pendingMounts.current),\n    })\n  }, [props.nodes, props.edges, props.history, props.options])\n\n  return <div ref={rootRef} style={{ width: '100%', height: '100%' }} />\n}\n","import React, { useEffect, useRef } from 'react'\nimport { Playground as PlaygroundClass, type PlaygroundOptions, type Example } from '@3plate/graph-core'\n\nexport type PlaygroundProps = {\n  /** Examples to display */\n  examples: PlaygroundOptions['examples']\n  /** Default example key */\n  defaultExample?: string\n}\n\n/**\n * Playground component - renders the interactive playground with examples\n */\nexport function Playground(props: PlaygroundProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const playgroundRef = useRef<PlaygroundClass | null>(null)\n  const rootIdRef = useRef<string>(`playground-${Math.random().toString(36).slice(2, 11)}`)\n  const prevExamplesRef = useRef<Record<string, Example>>({})\n\n  useEffect(() => {\n    if (!rootRef.current || playgroundRef.current) return\n\n    rootRef.current.id = rootIdRef.current\n\n    const playground = new PlaygroundClass({\n      root: rootIdRef.current,\n      examples: props.examples,\n      defaultExample: props.defaultExample,\n    })\n    playgroundRef.current = playground\n    prevExamplesRef.current = { ...props.examples }\n    playground.init()\n\n    return () => {\n      // Cleanup if needed\n      playgroundRef.current = null\n    }\n  }, []) // Only initialize once\n\n  // Handle examples changes\n  useEffect(() => {\n    if (!playgroundRef.current) return\n\n    const playground = playgroundRef.current\n    const prev = prevExamplesRef.current\n    const current = props.examples\n\n    // Get all keys from both previous and current\n    const allKeys = new Set([...Object.keys(prev), ...Object.keys(current)])\n\n    for (const key of allKeys) {\n      const prevExample = prev[key]\n      const currentExample = current[key]\n\n      if (!prevExample && currentExample) {\n        // Example was added\n        playground.addExample(key, currentExample)\n      } else if (prevExample && !currentExample) {\n        // Example was removed\n        playground.removeExample(key)\n      } else if (prevExample && currentExample && !shallowEqualExample(prevExample, currentExample)) {\n        // Example was modified\n        playground.addExample(key, currentExample)\n      }\n    }\n\n    prevExamplesRef.current = { ...current }\n  }, [props.examples])\n\n  return <div ref={rootRef} style={{ width: '100%', height: '100%' }} />\n}\n\n/**\n * Shallow comparison of two Example objects\n */\nfunction shallowEqualExample(a: Example, b: Example): boolean {\n  if (a === b) return true\n  if (a.name !== b.name) return false\n  if (a.description !== b.description) return false\n  if (!shallowEqualArray(a.nodes, b.nodes)) return false\n  if (!shallowEqualArray(a.edges, b.edges)) return false\n  if (!shallowEqualOptions(a.options, b.options)) return false\n  if (!shallowEqualSource(a.source, b.source)) return false\n  return true\n}\n\n/**\n * Shallow comparison of arrays\n */\nfunction shallowEqualArray<T>(a: T[] | undefined, b: T[] | undefined): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i++) {\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\n\n/**\n * Shallow comparison of ExampleOptions\n */\nfunction shallowEqualOptions(\n  a: Example['options'],\n  b: Example['options']\n): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  // For now, do a simple reference check on options\n  // Can be enhanced if needed\n  return a === b\n}\n\n/**\n * Shallow comparison of ExampleSource\n */\nfunction shallowEqualSource(\n  a: Example['source'],\n  b: Example['source']\n): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  if (a.type !== b.type) return false\n  if (a.type === 'file' && b.type === 'file') {\n    return a.path === b.path\n  }\n  if (a.type === 'websocket' && b.type === 'websocket') {\n    return a.url === b.url\n  }\n  return false\n}\n"],"mappings":"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","names":["React","import_react","import_graph_core","PlaygroundClass","React"]}

package/dist/index.d.cts

@@ -1,7 +1,17 @@
-import React from 'react';
-import { Update, IngestionConfig, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
+import React, { ReactNode } from 'react';
+import { Update, IngestionConfig, APIOptions, CanvasOptions, NodeProps, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
 export { API, APIArguments, APIOptions, CanvasTheme, ColorMode, EdgeProps, EdgeTheme, EventsOptions, HistoryMessage, IngestMessage, IngestionConfig, NewEdge, NewNode, NodeAlign, NodeProps, NodeTheme, Orientation, PortProps, PortStyle, PortTheme, RenderNode, SnapshotMessage, ThemeVars, Update, UpdateMessage, WebSocketStatus, WebSocketStatusListener } from '@3plate/graph-core';
 
+/** Extends the core renderNode signature to also accept React nodes */
+type ReactRenderNode<N> = (node: N, props?: NodeProps<N>) => ReactNode | HTMLElement;
+/** CanvasOptions with an extended renderNode that accepts React nodes */
+type ReactCanvasOptions<N> = Omit<CanvasOptions<N>, 'renderNode'> & {
+    renderNode?: ReactRenderNode<N>;
+};
+/** APIOptions with the React-extended canvas options */
+type ReactAPIOptions<N, E> = Omit<APIOptions<N, E>, 'canvas'> & {
+    canvas?: ReactCanvasOptions<N>;
+};
 type GraphProps<N, E> = {
     /** Initial nodes */
     nodes?: N[];
@@ -12,13 +22,17 @@ type GraphProps<N, E> = {
     /** Ingestion source configuration (alternative to nodes/edges/history) */
     ingestion?: IngestionConfig;
     /** Options */
-    options?: APIArguments<N, E>['options'];
+    options?: ReactAPIOptions<N, E>;
     /** Events */
     events?: APIArguments<N, E>['events'];
 };
 /**
- * Graph component - renders a graph visualization
- * Intelligently handles prop changes by diffing nodes, edges, and history
+ * Graph component - renders a graph visualization.
+ * Intelligently handles prop changes by diffing nodes, edges, and history.
+ *
+ * The `options.canvas.renderNode` function may return either an HTMLElement
+ * or a React node (JSX). When JSX is returned the wrapper handles mounting
+ * and cleanup automatically.
  */
 declare function Graph<N, E>(props: GraphProps<N, E>): React.JSX.Element;
 

package/dist/index.d.ts

@@ -1,7 +1,17 @@
-import React from 'react';
-import { Update, IngestionConfig, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
+import React, { ReactNode } from 'react';
+import { Update, IngestionConfig, APIOptions, CanvasOptions, NodeProps, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
 export { API, APIArguments, APIOptions, CanvasTheme, ColorMode, EdgeProps, EdgeTheme, EventsOptions, HistoryMessage, IngestMessage, IngestionConfig, NewEdge, NewNode, NodeAlign, NodeProps, NodeTheme, Orientation, PortProps, PortStyle, PortTheme, RenderNode, SnapshotMessage, ThemeVars, Update, UpdateMessage, WebSocketStatus, WebSocketStatusListener } from '@3plate/graph-core';
 
+/** Extends the core renderNode signature to also accept React nodes */
+type ReactRenderNode<N> = (node: N, props?: NodeProps<N>) => ReactNode | HTMLElement;
+/** CanvasOptions with an extended renderNode that accepts React nodes */
+type ReactCanvasOptions<N> = Omit<CanvasOptions<N>, 'renderNode'> & {
+    renderNode?: ReactRenderNode<N>;
+};
+/** APIOptions with the React-extended canvas options */
+type ReactAPIOptions<N, E> = Omit<APIOptions<N, E>, 'canvas'> & {
+    canvas?: ReactCanvasOptions<N>;
+};
 type GraphProps<N, E> = {
     /** Initial nodes */
     nodes?: N[];
@@ -12,13 +22,17 @@ type GraphProps<N, E> = {
     /** Ingestion source configuration (alternative to nodes/edges/history) */
     ingestion?: IngestionConfig;
     /** Options */
-    options?: APIArguments<N, E>['options'];
+    options?: ReactAPIOptions<N, E>;
     /** Events */
     events?: APIArguments<N, E>['events'];
 };
 /**
- * Graph component - renders a graph visualization
- * Intelligently handles prop changes by diffing nodes, edges, and history
+ * Graph component - renders a graph visualization.
+ * Intelligently handles prop changes by diffing nodes, edges, and history.
+ *
+ * The `options.canvas.renderNode` function may return either an HTMLElement
+ * or a React node (JSX). When JSX is returned the wrapper handles mounting
+ * and cleanup automatically.
  */
 declare function Graph<N, E>(props: GraphProps<N, E>): React.JSX.Element;
 

package/dist/index.js

@@ -1,10 +1,38 @@
 // src/Graph.tsx
 import React, { useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
 import { graph } from "@3plate/graph-core";
+function buildCoreOptions(options, pendingMounts) {
+  const userRenderNode = options?.canvas?.renderNode;
+  if (!userRenderNode) return options;
+  return {
+    ...options,
+    canvas: {
+      ...options?.canvas,
+      renderNode: (node, nodeProps) => {
+        const result = userRenderNode(node, nodeProps);
+        if (result instanceof HTMLElement) return result;
+        const el = document.createElement("div");
+        pendingMounts.set(el, result);
+        return el;
+      },
+      mountNode: (node, el) => {
+        const reactNode = pendingMounts.get(el);
+        if (reactNode === void 0) return;
+        pendingMounts.delete(el);
+        const root = createRoot(el);
+        flushSync(() => root.render(reactNode));
+        return () => root.unmount();
+      }
+    }
+  };
+}
 function Graph(props) {
   const rootRef = useRef(null);
   const apiRef = useRef(null);
   const rootIdRef = useRef(`graph-${Math.random().toString(36).slice(2, 11)}`);
+  const pendingMounts = useRef(/* @__PURE__ */ new Map());
   useEffect(() => {
     if (!rootRef.current || apiRef.current) return;
     rootRef.current.id = rootIdRef.current;
@@ -14,7 +42,7 @@ function Graph(props) {
       edges: props.edges,
       history: props.history,
       ingestion: props.ingestion,
-      options: props.options,
+      options: buildCoreOptions(props.options, pendingMounts.current),
       events: props.events
     }).then((api) => {
       apiRef.current = api;
@@ -34,7 +62,10 @@ function Graph(props) {
   }, []);
   useEffect(() => {
     if (!apiRef.current) return;
-    apiRef.current.applyProps(props);
+    apiRef.current.applyProps({
+      ...props,
+      options: buildCoreOptions(props.options, pendingMounts.current)
+    });
   }, [props.nodes, props.edges, props.history, props.options]);
   return /* @__PURE__ */ React.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
 }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Graph.tsx","../src/Playground.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { graph, type API } from '@3plate/graph-core'\nimport type { APIArguments, Update, IngestionConfig } from '@3plate/graph-core'\n\nexport type GraphProps<N, E> = {\n  /** Initial nodes */\n  nodes?: N[]\n  /** Initial edges */\n  edges?: E[]\n  /** Initial history */\n  history?: Update<N, E>[]\n  /** Ingestion source configuration (alternative to nodes/edges/history) */\n  ingestion?: IngestionConfig\n  /** Options */\n  options?: APIArguments<N, E>['options']\n  /** Events */\n  events?: APIArguments<N, E>['events']\n}\n\n/**\n * Graph component - renders a graph visualization\n * Intelligently handles prop changes by diffing nodes, edges, and history\n */\nexport function Graph<N, E>(props: GraphProps<N, E>) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const apiRef = useRef<API<N, E> | null>(null)\n  const rootIdRef = useRef<string>(`graph-${Math.random().toString(36).slice(2, 11)}`)\n\n  // Initialize API once\n  useEffect(() => {\n    if (!rootRef.current || apiRef.current) return\n\n    rootRef.current.id = rootIdRef.current\n\n    graph({\n      root: rootIdRef.current,\n      nodes: props.nodes,\n      edges: props.edges,\n      history: props.history,\n      ingestion: props.ingestion,\n      options: props.options,\n      events: props.events,\n    }).then(api => {\n      apiRef.current = api\n    })\n\n    return () => {\n      // Cleanup\n      if (apiRef.current) {\n        apiRef.current.destroy()\n        apiRef.current = null\n      }\n      if (rootRef.current) {\n        // Remove canvas from DOM\n        const canvas = rootRef.current.querySelector('canvas, svg')\n        if (canvas) {\n          canvas.remove()\n        }\n      }\n    }\n  }, []) // Only run once on mount\n\n  // Handle prop changes using the centralized applyProps method\n  useEffect(() => {\n    if (!apiRef.current) return\n    apiRef.current.applyProps(props)\n  }, [props.nodes, props.edges, props.history, props.options])\n\n  return <div ref={rootRef} style={{ width: '100%', height: '100%' }} />\n}\n","import React, { useEffect, useRef } from 'react'\nimport { Playground as PlaygroundClass, type PlaygroundOptions, type Example } from '@3plate/graph-core'\n\nexport type PlaygroundProps = {\n  /** Examples to display */\n  examples: PlaygroundOptions['examples']\n  /** Default example key */\n  defaultExample?: string\n}\n\n/**\n * Playground component - renders the interactive playground with examples\n */\nexport function Playground(props: PlaygroundProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const playgroundRef = useRef<PlaygroundClass | null>(null)\n  const rootIdRef = useRef<string>(`playground-${Math.random().toString(36).slice(2, 11)}`)\n  const prevExamplesRef = useRef<Record<string, Example>>({})\n\n  useEffect(() => {\n    if (!rootRef.current || playgroundRef.current) return\n\n    rootRef.current.id = rootIdRef.current\n\n    const playground = new PlaygroundClass({\n      root: rootIdRef.current,\n      examples: props.examples,\n      defaultExample: props.defaultExample,\n    })\n    playgroundRef.current = playground\n    prevExamplesRef.current = { ...props.examples }\n    playground.init()\n\n    return () => {\n      // Cleanup if needed\n      playgroundRef.current = null\n    }\n  }, []) // Only initialize once\n\n  // Handle examples changes\n  useEffect(() => {\n    if (!playgroundRef.current) return\n\n    const playground = playgroundRef.current\n    const prev = prevExamplesRef.current\n    const current = props.examples\n\n    // Get all keys from both previous and current\n    const allKeys = new Set([...Object.keys(prev), ...Object.keys(current)])\n\n    for (const key of allKeys) {\n      const prevExample = prev[key]\n      const currentExample = current[key]\n\n      if (!prevExample && currentExample) {\n        // Example was added\n        playground.addExample(key, currentExample)\n      } else if (prevExample && !currentExample) {\n        // Example was removed\n        playground.removeExample(key)\n      } else if (prevExample && currentExample && !shallowEqualExample(prevExample, currentExample)) {\n        // Example was modified\n        playground.addExample(key, currentExample)\n      }\n    }\n\n    prevExamplesRef.current = { ...current }\n  }, [props.examples])\n\n  return <div ref={rootRef} style={{ width: '100%', height: '100%' }} />\n}\n\n/**\n * Shallow comparison of two Example objects\n */\nfunction shallowEqualExample(a: Example, b: Example): boolean {\n  if (a === b) return true\n  if (a.name !== b.name) return false\n  if (a.description !== b.description) return false\n  if (!shallowEqualArray(a.nodes, b.nodes)) return false\n  if (!shallowEqualArray(a.edges, b.edges)) return false\n  if (!shallowEqualOptions(a.options, b.options)) return false\n  if (!shallowEqualSource(a.source, b.source)) return false\n  return true\n}\n\n/**\n * Shallow comparison of arrays\n */\nfunction shallowEqualArray<T>(a: T[] | undefined, b: T[] | undefined): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i++) {\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\n\n/**\n * Shallow comparison of ExampleOptions\n */\nfunction shallowEqualOptions(\n  a: Example['options'],\n  b: Example['options']\n): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  // For now, do a simple reference check on options\n  // Can be enhanced if needed\n  return a === b\n}\n\n/**\n * Shallow comparison of ExampleSource\n */\nfunction shallowEqualSource(\n  a: Example['source'],\n  b: Example['source']\n): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  if (a.type !== b.type) return false\n  if (a.type === 'file' && b.type === 'file') {\n    return a.path === b.path\n  }\n  if (a.type === 'websocket' && b.type === 'websocket') {\n    return a.url === b.url\n  }\n  return false\n}\n"],"mappings":";AAAA,OAAO,SAAS,WAAW,cAAc;AACzC,SAAS,aAAuB;AAsBzB,SAAS,MAAY,OAAyB;AACnD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,SAAS,OAAyB,IAAI;AAC5C,QAAM,YAAY,OAAe,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,EAAE;AAGnF,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,WAAW,OAAO,QAAS;AAExC,YAAQ,QAAQ,KAAK,UAAU;AAE/B,UAAM;AAAA,MACJ,MAAM,UAAU;AAAA,MAChB,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,WAAW,MAAM;AAAA,MACjB,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM;AAAA,IAChB,CAAC,EAAE,KAAK,SAAO;AACb,aAAO,UAAU;AAAA,IACnB,CAAC;AAED,WAAO,MAAM;AAEX,UAAI,OAAO,SAAS;AAClB,eAAO,QAAQ,QAAQ;AACvB,eAAO,UAAU;AAAA,MACnB;AACA,UAAI,QAAQ,SAAS;AAEnB,cAAM,SAAS,QAAQ,QAAQ,cAAc,aAAa;AAC1D,YAAI,QAAQ;AACV,iBAAO,OAAO;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AACd,QAAI,CAAC,OAAO,QAAS;AACrB,WAAO,QAAQ,WAAW,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,OAAO,MAAM,OAAO,MAAM,SAAS,MAAM,OAAO,CAAC;AAE3D,SAAO,oCAAC,SAAI,KAAK,SAAS,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG;AACtE;;;ACrEA,OAAOA,UAAS,aAAAC,YAAW,UAAAC,eAAc;AACzC,SAAS,cAAc,uBAA6D;AAY7E,SAAS,WAAW,OAAwB;AACjD,QAAM,UAAUA,QAAuB,IAAI;AAC3C,QAAM,gBAAgBA,QAA+B,IAAI;AACzD,QAAM,YAAYA,QAAe,cAAc,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,EAAE;AACxF,QAAM,kBAAkBA,QAAgC,CAAC,CAAC;AAE1D,EAAAD,WAAU,MAAM;AACd,QAAI,CAAC,QAAQ,WAAW,cAAc,QAAS;AAE/C,YAAQ,QAAQ,KAAK,UAAU;AAE/B,UAAM,aAAa,IAAI,gBAAgB;AAAA,MACrC,MAAM,UAAU;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,gBAAgB,MAAM;AAAA,IACxB,CAAC;AACD,kBAAc,UAAU;AACxB,oBAAgB,UAAU,EAAE,GAAG,MAAM,SAAS;AAC9C,eAAW,KAAK;AAEhB,WAAO,MAAM;AAEX,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,EAAAA,WAAU,MAAM;AACd,QAAI,CAAC,cAAc,QAAS;AAE5B,UAAM,aAAa,cAAc;AACjC,UAAM,OAAO,gBAAgB;AAC7B,UAAM,UAAU,MAAM;AAGtB,UAAM,UAAU,oBAAI,IAAI,CAAC,GAAG,OAAO,KAAK,IAAI,GAAG,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC;AAEvE,eAAW,OAAO,SAAS;AACzB,YAAM,cAAc,KAAK,GAAG;AAC5B,YAAM,iBAAiB,QAAQ,GAAG;AAElC,UAAI,CAAC,eAAe,gBAAgB;AAElC,mBAAW,WAAW,KAAK,cAAc;AAAA,MAC3C,WAAW,eAAe,CAAC,gBAAgB;AAEzC,mBAAW,cAAc,GAAG;AAAA,MAC9B,WAAW,eAAe,kBAAkB,CAAC,oBAAoB,aAAa,cAAc,GAAG;AAE7F,mBAAW,WAAW,KAAK,cAAc;AAAA,MAC3C;AAAA,IACF;AAEA,oBAAgB,UAAU,EAAE,GAAG,QAAQ;AAAA,EACzC,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,SAAO,gBAAAD,OAAA,cAAC,SAAI,KAAK,SAAS,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG;AACtE;AAKA,SAAS,oBAAoB,GAAY,GAAqB;AAC5D,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,EAAE,SAAS,EAAE,KAAM,QAAO;AAC9B,MAAI,EAAE,gBAAgB,EAAE,YAAa,QAAO;AAC5C,MAAI,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAG,QAAO;AACjD,MAAI,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAG,QAAO;AACjD,MAAI,CAAC,oBAAoB,EAAE,SAAS,EAAE,OAAO,EAAG,QAAO;AACvD,MAAI,CAAC,mBAAmB,EAAE,QAAQ,EAAE,MAAM,EAAG,QAAO;AACpD,SAAO;AACT;AAKA,SAAS,kBAAqB,GAAoB,GAA6B;AAC7E,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK;AACjC,QAAI,EAAE,CAAC,MAAM,EAAE,CAAC,EAAG,QAAO;AAAA,EAC5B;AACA,SAAO;AACT;AAKA,SAAS,oBACP,GACA,GACS;AACT,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AAGrB,SAAO,MAAM;AACf;AAKA,SAAS,mBACP,GACA,GACS;AACT,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,EAAG,QAAO;AACrB,MAAI,EAAE,SAAS,EAAE,KAAM,QAAO;AAC9B,MAAI,EAAE,SAAS,UAAU,EAAE,SAAS,QAAQ;AAC1C,WAAO,EAAE,SAAS,EAAE;AAAA,EACtB;AACA,MAAI,EAAE,SAAS,eAAe,EAAE,SAAS,aAAa;AACpD,WAAO,EAAE,QAAQ,EAAE;AAAA,EACrB;AACA,SAAO;AACT;","names":["React","useEffect","useRef"]}
+{"version":3,"sources":["../src/Graph.tsx","../src/Playground.tsx"],"sourcesContent":["import React, { useEffect, useRef, type ReactNode } from 'react'\nimport { createRoot } from 'react-dom/client'\nimport { flushSync } from 'react-dom'\nimport { graph, type API } from '@3plate/graph-core'\nimport type {\n  APIArguments,\n  APIOptions,\n  CanvasOptions,\n  NodeProps,\n  Update,\n  IngestionConfig,\n} from '@3plate/graph-core'\n\n/** Extends the core renderNode signature to also accept React nodes */\ntype ReactRenderNode<N> = (node: N, props?: NodeProps<N>) => ReactNode | HTMLElement\n\n/** CanvasOptions with an extended renderNode that accepts React nodes */\ntype ReactCanvasOptions<N> = Omit<CanvasOptions<N>, 'renderNode'> & {\n  renderNode?: ReactRenderNode<N>\n}\n\n/** APIOptions with the React-extended canvas options */\ntype ReactAPIOptions<N, E> = Omit<APIOptions<N, E>, 'canvas'> & {\n  canvas?: ReactCanvasOptions<N>\n}\n\nexport type GraphProps<N, E> = {\n  /** Initial nodes */\n  nodes?: N[]\n  /** Initial edges */\n  edges?: E[]\n  /** Initial history */\n  history?: Update<N, E>[]\n  /** Ingestion source configuration (alternative to nodes/edges/history) */\n  ingestion?: IngestionConfig\n  /** Options */\n  options?: ReactAPIOptions<N, E>\n  /** Events */\n  events?: APIArguments<N, E>['events']\n}\n\n/**\n * Converts ReactAPIOptions into core APIOptions.\n * When renderNode returns a ReactNode, a placeholder element is produced and\n * mountNode renders the React content into it synchronously via flushSync.\n */\nfunction buildCoreOptions<N, E>(\n  options: ReactAPIOptions<N, E> | undefined,\n  pendingMounts: Map<HTMLElement, ReactNode>,\n): APIOptions<N, E> | undefined {\n  const userRenderNode = options?.canvas?.renderNode\n  if (!userRenderNode) return options as APIOptions<N, E> | undefined\n\n  return {\n    ...options,\n    canvas: {\n      ...options?.canvas,\n      renderNode: (node: N, nodeProps?: NodeProps<N>): HTMLElement => {\n        const result = userRenderNode(node, nodeProps)\n        if (result instanceof HTMLElement) return result\n        const el = document.createElement('div')\n        pendingMounts.set(el, result)\n        return el\n      },\n      mountNode: (node: N, el: HTMLElement): (() => void) | void => {\n        const reactNode = pendingMounts.get(el)\n        if (reactNode === undefined) return\n        pendingMounts.delete(el)\n        const root = createRoot(el)\n        flushSync(() => root.render(reactNode as ReactNode))\n        return () => root.unmount()\n      },\n    },\n  } as APIOptions<N, E>\n}\n\n/**\n * Graph component - renders a graph visualization.\n * Intelligently handles prop changes by diffing nodes, edges, and history.\n *\n * The `options.canvas.renderNode` function may return either an HTMLElement\n * or a React node (JSX). When JSX is returned the wrapper handles mounting\n * and cleanup automatically.\n */\nexport function Graph<N, E>(props: GraphProps<N, E>) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const apiRef = useRef<API<N, E> | null>(null)\n  const rootIdRef = useRef<string>(`graph-${Math.random().toString(36).slice(2, 11)}`)\n  const pendingMounts = useRef(new Map<HTMLElement, ReactNode>())\n\n  // Initialize API once\n  useEffect(() => {\n    if (!rootRef.current || apiRef.current) return\n\n    rootRef.current.id = rootIdRef.current\n\n    graph({\n      root: rootIdRef.current,\n      nodes: props.nodes,\n      edges: props.edges,\n      history: props.history,\n      ingestion: props.ingestion,\n      options: buildCoreOptions(props.options, pendingMounts.current),\n      events: props.events,\n    }).then(api => {\n      apiRef.current = api\n    })\n\n    return () => {\n      // Cleanup\n      if (apiRef.current) {\n        apiRef.current.destroy()\n        apiRef.current = null\n      }\n      if (rootRef.current) {\n        // Remove canvas from DOM\n        const canvas = rootRef.current.querySelector('canvas, svg')\n        if (canvas) {\n          canvas.remove()\n        }\n      }\n    }\n  }, []) // Only run once on mount\n\n  // Handle prop changes using the centralized applyProps method\n  useEffect(() => {\n    if (!apiRef.current) return\n    apiRef.current.applyProps({\n      ...props,\n      options: buildCoreOptions(props.options, pendingMounts.current),\n    })\n  }, [props.nodes, props.edges, props.history, props.options])\n\n  return <div ref={rootRef} style={{ width: '100%', height: '100%' }} />\n}\n","import React, { useEffect, useRef } from 'react'\nimport { Playground as PlaygroundClass, type PlaygroundOptions, type Example } from '@3plate/graph-core'\n\nexport type PlaygroundProps = {\n  /** Examples to display */\n  examples: PlaygroundOptions['examples']\n  /** Default example key */\n  defaultExample?: string\n}\n\n/**\n * Playground component - renders the interactive playground with examples\n */\nexport function Playground(props: PlaygroundProps) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const playgroundRef = useRef<PlaygroundClass | null>(null)\n  const rootIdRef = useRef<string>(`playground-${Math.random().toString(36).slice(2, 11)}`)\n  const prevExamplesRef = useRef<Record<string, Example>>({})\n\n  useEffect(() => {\n    if (!rootRef.current || playgroundRef.current) return\n\n    rootRef.current.id = rootIdRef.current\n\n    const playground = new PlaygroundClass({\n      root: rootIdRef.current,\n      examples: props.examples,\n      defaultExample: props.defaultExample,\n    })\n    playgroundRef.current = playground\n    prevExamplesRef.current = { ...props.examples }\n    playground.init()\n\n    return () => {\n      // Cleanup if needed\n      playgroundRef.current = null\n    }\n  }, []) // Only initialize once\n\n  // Handle examples changes\n  useEffect(() => {\n    if (!playgroundRef.current) return\n\n    const playground = playgroundRef.current\n    const prev = prevExamplesRef.current\n    const current = props.examples\n\n    // Get all keys from both previous and current\n    const allKeys = new Set([...Object.keys(prev), ...Object.keys(current)])\n\n    for (const key of allKeys) {\n      const prevExample = prev[key]\n      const currentExample = current[key]\n\n      if (!prevExample && currentExample) {\n        // Example was added\n        playground.addExample(key, currentExample)\n      } else if (prevExample && !currentExample) {\n        // Example was removed\n        playground.removeExample(key)\n      } else if (prevExample && currentExample && !shallowEqualExample(prevExample, currentExample)) {\n        // Example was modified\n        playground.addExample(key, currentExample)\n      }\n    }\n\n    prevExamplesRef.current = { ...current }\n  }, [props.examples])\n\n  return <div ref={rootRef} style={{ width: '100%', height: '100%' }} />\n}\n\n/**\n * Shallow comparison of two Example objects\n */\nfunction shallowEqualExample(a: Example, b: Example): boolean {\n  if (a === b) return true\n  if (a.name !== b.name) return false\n  if (a.description !== b.description) return false\n  if (!shallowEqualArray(a.nodes, b.nodes)) return false\n  if (!shallowEqualArray(a.edges, b.edges)) return false\n  if (!shallowEqualOptions(a.options, b.options)) return false\n  if (!shallowEqualSource(a.source, b.source)) return false\n  return true\n}\n\n/**\n * Shallow comparison of arrays\n */\nfunction shallowEqualArray<T>(a: T[] | undefined, b: T[] | undefined): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  if (a.length !== b.length) return false\n  for (let i = 0; i < a.length; i++) {\n    if (a[i] !== b[i]) return false\n  }\n  return true\n}\n\n/**\n * Shallow comparison of ExampleOptions\n */\nfunction shallowEqualOptions(\n  a: Example['options'],\n  b: Example['options']\n): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  // For now, do a simple reference check on options\n  // Can be enhanced if needed\n  return a === b\n}\n\n/**\n * Shallow comparison of ExampleSource\n */\nfunction shallowEqualSource(\n  a: Example['source'],\n  b: Example['source']\n): boolean {\n  if (a === b) return true\n  if (!a || !b) return false\n  if (a.type !== b.type) return false\n  if (a.type === 'file' && b.type === 'file') {\n    return a.path === b.path\n  }\n  if (a.type === 'websocket' && b.type === 'websocket') {\n    return a.url === b.url\n  }\n  return false\n}\n"],"mappings":"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","names":["React","useEffect","useRef"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3plate/graph-react",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "type": "module",
   "license": "GPL-3.0",
   "repository": {
@@ -29,7 +29,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@3plate/graph-core": "0.1.15"
+    "@3plate/graph-core": "0.1.16"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",