@3plate/graph-react 0.1.16 → 0.1.17

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, 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"]}
+{"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, APIOptions } 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  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 as 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 */\nexport type APIOptions<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?: APIOptions<N, E>\n  /** Events */\n  events?: APIArguments<N, E>['events']\n}\n\n/**\n * Converts APIOptions 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: APIOptions<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 unknown 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 unknown 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyD;AACzD,oBAA2B;AAC3B,uBAA0B;AAC1B,wBAAgC;AA2ChC,SAAS,iBACP,SACA,eAC+B;AAC/B,QAAM,iBAAiB,SAAS,QAAQ;AACxC,MAAI,CAAC,eAAgB,QAAO;AAE5B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,QAAQ;AAAA,MACN,GAAG,SAAS;AAAA,MACZ,YAAY,CAAC,MAAS,cAA0C;AAC9D,cAAM,SAAS,eAAe,MAAM,SAAS;AAC7C,YAAI,kBAAkB,YAAa,QAAO;AAC1C,cAAM,KAAK,SAAS,cAAc,KAAK;AACvC,sBAAc,IAAI,IAAI,MAAM;AAC5B,eAAO;AAAA,MACT;AAAA,MACA,WAAW,CAAC,MAAS,OAAyC;AAC5D,cAAM,YAAY,cAAc,IAAI,EAAE;AACtC,YAAI,cAAc,OAAW;AAC7B,sBAAc,OAAO,EAAE;AACvB,cAAM,WAAO,0BAAW,EAAE;AAC1B,wCAAU,MAAM,KAAK,OAAO,SAAsB,CAAC;AACnD,eAAO,MAAM,KAAK,QAAQ;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF;AAUO,SAAS,MAAY,OAAyB;AACnD,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,aAAS,qBAAyB,IAAI;AAC5C,QAAM,gBAAY,qBAAe,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,EAAE;AACnF,QAAM,oBAAgB,qBAAO,oBAAI,IAA4B,CAAC;AAG9D,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ,WAAW,OAAO,QAAS;AAExC,YAAQ,QAAQ,KAAK,UAAU;AAE/B,iCAAM;AAAA,MACJ,MAAM,UAAU;AAAA,MAChB,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,WAAW,MAAM;AAAA,MACjB,SAAS,iBAAiB,MAAM,SAAS,cAAc,OAAO;AAAA,MAC9D,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,8BAAU,MAAM;AACd,QAAI,CAAC,OAAO,QAAS;AACrB,WAAO,QAAQ,WAAW;AAAA,MACxB,GAAG;AAAA,MACH,SAAS,iBAAiB,MAAM,SAAS,cAAc,OAAO;AAAA,IAChE,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,OAAO,MAAM,OAAO,MAAM,SAAS,MAAM,OAAO,CAAC;AAE3D,SAAO,6BAAAA,QAAA,cAAC,SAAI,KAAK,SAAS,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG;AACtE;;;ACtIA,IAAAC,gBAAyC;AACzC,IAAAC,qBAAoF;AAY7E,SAAS,WAAW,OAAwB;AACjD,QAAM,cAAU,sBAAuB,IAAI;AAC3C,QAAM,oBAAgB,sBAA+B,IAAI;AACzD,QAAM,gBAAY,sBAAe,cAAc,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,EAAE;AACxF,QAAM,sBAAkB,sBAAgC,CAAC,CAAC;AAE1D,+BAAU,MAAM;AACd,QAAI,CAAC,QAAQ,WAAW,cAAc,QAAS;AAE/C,YAAQ,QAAQ,KAAK,UAAU;AAE/B,UAAM,aAAa,IAAI,mBAAAC,WAAgB;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,+BAAU,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,8BAAAC,QAAA,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","import_react","import_graph_core","PlaygroundClass","React"]}

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 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';
+import { Update, IngestionConfig, APIOptions as APIOptions$1, CanvasOptions, NodeProps, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
+export { API, APIArguments, 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;
@@ -9,7 +9,7 @@ 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'> & {
+type APIOptions<N, E> = Omit<APIOptions$1<N, E>, 'canvas'> & {
     canvas?: ReactCanvasOptions<N>;
 };
 type GraphProps<N, E> = {
@@ -22,7 +22,7 @@ type GraphProps<N, E> = {
     /** Ingestion source configuration (alternative to nodes/edges/history) */
     ingestion?: IngestionConfig;
     /** Options */
-    options?: ReactAPIOptions<N, E>;
+    options?: APIOptions<N, E>;
     /** Events */
     events?: APIArguments<N, E>['events'];
 };
@@ -47,4 +47,4 @@ type PlaygroundProps = {
  */
 declare function Playground(props: PlaygroundProps): React.JSX.Element;
 
-export { Graph, type GraphProps, Playground, type PlaygroundProps };
+export { type APIOptions, Graph, type GraphProps, Playground, type PlaygroundProps };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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';
+import { Update, IngestionConfig, APIOptions as APIOptions$1, CanvasOptions, NodeProps, APIArguments, PlaygroundOptions } from '@3plate/graph-core';
+export { API, APIArguments, 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;
@@ -9,7 +9,7 @@ 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'> & {
+type APIOptions<N, E> = Omit<APIOptions$1<N, E>, 'canvas'> & {
     canvas?: ReactCanvasOptions<N>;
 };
 type GraphProps<N, E> = {
@@ -22,7 +22,7 @@ type GraphProps<N, E> = {
     /** Ingestion source configuration (alternative to nodes/edges/history) */
     ingestion?: IngestionConfig;
     /** Options */
-    options?: ReactAPIOptions<N, E>;
+    options?: APIOptions<N, E>;
     /** Events */
     events?: APIArguments<N, E>['events'];
 };
@@ -47,4 +47,4 @@ type PlaygroundProps = {
  */
 declare function Playground(props: PlaygroundProps): React.JSX.Element;
 
-export { Graph, type GraphProps, Playground, type PlaygroundProps };
+export { type APIOptions, Graph, type GraphProps, Playground, type PlaygroundProps };

package/dist/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"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 as 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 */\nexport type APIOptions<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?: APIOptions<N, E>\n  /** Events */\n  events?: APIArguments<N, E>['events']\n}\n\n/**\n * Converts APIOptions 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: APIOptions<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 unknown 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 unknown 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.16",
+  "version": "0.1.17",
   "type": "module",
   "license": "GPL-3.0",
   "repository": {