@3plate/graph-react 0.1.10 → 0.1.14

package/dist/{index.mjs → index.cjs}

@@ -1,14 +1,51 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Graph: () => Graph,
+  Playground: () => Playground
+});
+module.exports = __toCommonJS(index_exports);
+
 // src/Graph.tsx
-import React, { useEffect, useRef } from "react";
-import { graph } from "@3plate/graph-core";
+var import_react = __toESM(require("react"), 1);
+var import_graph_core = require("@3plate/graph-core");
 function Graph(props) {
-  const rootRef = useRef(null);
-  const apiRef = useRef(null);
-  const rootIdRef = useRef(`graph-${Math.random().toString(36).slice(2, 11)}`);
-  useEffect(() => {
+  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)}`);
+  (0, import_react.useEffect)(() => {
     if (!rootRef.current || apiRef.current) return;
     rootRef.current.id = rootIdRef.current;
-    graph({
+    (0, import_graph_core.graph)({
       root: rootIdRef.current,
       nodes: props.nodes,
       edges: props.edges,
@@ -32,25 +69,25 @@ function Graph(props) {
       }
     };
   }, []);
-  useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!apiRef.current) return;
     apiRef.current.applyProps(props);
   }, [props.nodes, props.edges, props.history, props.options]);
-  return /* @__PURE__ */ React.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
 }
 
 // src/Playground.tsx
-import React2, { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { Playground as PlaygroundClass } from "@3plate/graph-core";
+var import_react2 = __toESM(require("react"), 1);
+var import_graph_core2 = require("@3plate/graph-core");
 function Playground(props) {
-  const rootRef = useRef2(null);
-  const playgroundRef = useRef2(null);
-  const rootIdRef = useRef2(`playground-${Math.random().toString(36).slice(2, 11)}`);
-  const prevExamplesRef = useRef2({});
-  useEffect2(() => {
+  const rootRef = (0, import_react2.useRef)(null);
+  const playgroundRef = (0, import_react2.useRef)(null);
+  const rootIdRef = (0, import_react2.useRef)(`playground-${Math.random().toString(36).slice(2, 11)}`);
+  const prevExamplesRef = (0, import_react2.useRef)({});
+  (0, import_react2.useEffect)(() => {
     if (!rootRef.current || playgroundRef.current) return;
     rootRef.current.id = rootIdRef.current;
-    const playground = new PlaygroundClass({
+    const playground = new import_graph_core2.Playground({
       root: rootIdRef.current,
       examples: props.examples,
       defaultExample: props.defaultExample
@@ -62,7 +99,7 @@ function Playground(props) {
       playgroundRef.current = null;
     };
   }, []);
-  useEffect2(() => {
+  (0, import_react2.useEffect)(() => {
     if (!playgroundRef.current) return;
     const playground = playgroundRef.current;
     const prev = prevExamplesRef.current;
@@ -81,7 +118,7 @@ function Playground(props) {
     }
     prevExamplesRef.current = { ...current };
   }, [props.examples]);
-  return /* @__PURE__ */ React2.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+  return /* @__PURE__ */ import_react2.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
 }
 function shallowEqualExample(a, b) {
   if (a === b) return true;
@@ -119,7 +156,9 @@ function shallowEqualSource(a, b) {
   }
   return false;
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   Graph,
   Playground
-};
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyC;AACzC,wBAAgC;AAsBzB,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;AAGnF,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,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,8BAAU,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,6BAAAA,QAAA,cAAC,SAAI,KAAK,SAAS,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG;AACtE;;;ACrEA,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.js

@@ -1,51 +1,14 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  Graph: () => Graph,
-  Playground: () => Playground
-});
-module.exports = __toCommonJS(index_exports);
-
 // src/Graph.tsx
-var import_react = __toESM(require("react"));
-var import_graph_core = require("@3plate/graph-core");
+import React, { useEffect, useRef } from "react";
+import { graph } from "@3plate/graph-core";
 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)}`);
-  (0, import_react.useEffect)(() => {
+  const rootRef = useRef(null);
+  const apiRef = useRef(null);
+  const rootIdRef = useRef(`graph-${Math.random().toString(36).slice(2, 11)}`);
+  useEffect(() => {
     if (!rootRef.current || apiRef.current) return;
     rootRef.current.id = rootIdRef.current;
-    (0, import_graph_core.graph)({
+    graph({
       root: rootIdRef.current,
       nodes: props.nodes,
       edges: props.edges,
@@ -69,25 +32,25 @@ function Graph(props) {
       }
     };
   }, []);
-  (0, import_react.useEffect)(() => {
+  useEffect(() => {
     if (!apiRef.current) return;
     apiRef.current.applyProps(props);
   }, [props.nodes, props.edges, props.history, props.options]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+  return /* @__PURE__ */ React.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
 }
 
 // src/Playground.tsx
-var import_react2 = __toESM(require("react"));
-var import_graph_core2 = require("@3plate/graph-core");
+import React2, { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Playground as PlaygroundClass } from "@3plate/graph-core";
 function Playground(props) {
-  const rootRef = (0, import_react2.useRef)(null);
-  const playgroundRef = (0, import_react2.useRef)(null);
-  const rootIdRef = (0, import_react2.useRef)(`playground-${Math.random().toString(36).slice(2, 11)}`);
-  const prevExamplesRef = (0, import_react2.useRef)({});
-  (0, import_react2.useEffect)(() => {
+  const rootRef = useRef2(null);
+  const playgroundRef = useRef2(null);
+  const rootIdRef = useRef2(`playground-${Math.random().toString(36).slice(2, 11)}`);
+  const prevExamplesRef = useRef2({});
+  useEffect2(() => {
     if (!rootRef.current || playgroundRef.current) return;
     rootRef.current.id = rootIdRef.current;
-    const playground = new import_graph_core2.Playground({
+    const playground = new PlaygroundClass({
       root: rootIdRef.current,
       examples: props.examples,
       defaultExample: props.defaultExample
@@ -99,7 +62,7 @@ function Playground(props) {
       playgroundRef.current = null;
     };
   }, []);
-  (0, import_react2.useEffect)(() => {
+  useEffect2(() => {
     if (!playgroundRef.current) return;
     const playground = playgroundRef.current;
     const prev = prevExamplesRef.current;
@@ -118,7 +81,7 @@ function Playground(props) {
     }
     prevExamplesRef.current = { ...current };
   }, [props.examples]);
-  return /* @__PURE__ */ import_react2.default.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
+  return /* @__PURE__ */ React2.createElement("div", { ref: rootRef, style: { width: "100%", height: "100%" } });
 }
 function shallowEqualExample(a, b) {
   if (a === b) return true;
@@ -156,8 +119,8 @@ function shallowEqualSource(a, b) {
   }
   return false;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   Graph,
   Playground
-});
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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":"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","names":["React","useEffect","useRef"]}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@3plate/graph-react",
-  "version": "0.1.10",
+  "version": "0.1.14",
+  "type": "module",
   "license": "GPL-3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/3plt/graph",
     "directory": "packages/react"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -21,7 +29,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@3plate/graph-core": "0.1.10"
+    "@3plate/graph-core": "0.1.14"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -35,8 +43,8 @@
     "vitest": "^2.1.8"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom",
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --external react --external react-dom",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --sourcemap --watch --external react --external react-dom",
     "test": "vitest run",
     "test:watch": "vitest"
   }