@ts-graphviz/react 0.10.6 → 0.11.1

package/lib/react.js

@@ -1,45 +1,31 @@
-import { createContext, useContext, useEffect, useMemo, isValidElement, createElement } from "react";
-import { Digraph as Digraph$1, Graph as Graph$1, Subgraph as Subgraph$1, toDot } from "ts-graphviz";
+import { Digraph as Digraph$1, Graph as Graph$1, Subgraph as Subgraph$1, isRootGraphModel, toDot } from "ts-graphviz";
+import { isAttributeListModel, isEdgeModel, isNodeModel, isRootGraphModel as isRootGraphModel2, isSubgraphModel } from "ts-graphviz";
 import { jsx } from "react/jsx-runtime";
-import { renderToStaticMarkup } from "react-dom/server";
+import { createContext, useLayoutEffect, useContext, useMemo, useEffect, isValidElement, useImperativeHandle, createElement } from "react";
 import ReactReconciler from "react-reconciler";
-const GraphContainer = createContext(null);
-GraphContainer.displayName = "GraphContainer";
-function useGraphContainer() {
-  return useContext(GraphContainer);
-}
 const CurrentGraph = createContext(null);
 CurrentGraph.displayName = "CurrentGraph";
-function useCurrentGraph() {
-  const cluster = useContext(CurrentGraph);
-  if (cluster === null) {
-    throw Error(
-      "useCurrentGraph must be called within a cluster such as Digraph, Graph, Subgraph."
-    );
-  }
-  return cluster;
-}
+const GraphContainer = createContext(null);
+GraphContainer.displayName = "GraphContainer";
 function useGraphAttributes(cluster, attributes, { edge, node, graph }) {
-  useEffect(() => {
+  useLayoutEffect(() => {
     cluster.clear();
     cluster.apply(attributes);
   }, [cluster, attributes]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     cluster.attributes.node.clear();
     cluster.attributes.node.apply(node ?? {});
   }, [cluster, node]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     cluster.attributes.edge.clear();
     cluster.attributes.edge.apply(edge ?? {});
   }, [cluster, edge]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     cluster.attributes.graph.clear();
     cluster.attributes.graph.apply(graph ?? {});
   }, [cluster, graph]);
 }
-const GraphvizContext = createContext(
-  null
-);
+const GraphvizContext = createContext(null);
 GraphvizContext.displayName = "GraphvizContext";
 function useGraphvizContext() {
   const context = useContext(
@@ -53,7 +39,7 @@ function useGraphvizContext() {
   return context;
 }
 function useHasComment(target, comment) {
-  useEffect(() => {
+  useLayoutEffect(() => {
     target.comment = comment;
   }, [target, comment]);
 }
@@ -63,13 +49,8 @@ function useDigraph(options = {}) {
   const digraph = useMemo(() => {
     const g = new Digraph$1(id);
     context.container = g;
-    g.comment = comment;
-    g.apply(attributes);
-    g.attributes.node.apply(node ?? {});
-    g.attributes.edge.apply(edge ?? {});
-    g.attributes.graph.apply(graph ?? {});
     return g;
-  }, [context, id, comment, edge, node, graph, attributes]);
+  }, [context, id]);
   useHasComment(digraph, comment);
   useGraphAttributes(digraph, attributes, { edge, node, graph });
   useEffect(() => {
@@ -79,57 +60,174 @@ function useDigraph(options = {}) {
   }, [context]);
   return digraph;
 }
-function useGraph(options = {}) {
-  const { id, comment, edge, node, graph, ...attributes } = options;
-  const context = useGraphvizContext();
-  const memoGraph = useMemo(() => {
-    const g = new Graph$1(id);
-    context.container = g;
-    g.comment = comment;
-    g.apply(attributes);
-    g.attributes.node.apply(node ?? {});
-    g.attributes.edge.apply(edge ?? {});
-    g.attributes.graph.apply(graph ?? {});
-    return g;
-  }, [context, id, comment, edge, node, graph, attributes]);
-  useHasComment(memoGraph, comment);
-  useGraphAttributes(memoGraph, attributes, { edge, node, graph });
-  useEffect(() => {
-    return () => {
-      context.container = void 0;
-    };
-  }, [context]);
-  return memoGraph;
+function useGraphContainer() {
+  return useContext(GraphContainer);
 }
-function useSubgraph(props = {}) {
-  const { id, comment, edge, node, graph, ...attributes } = props;
-  const context = useGraphvizContext();
-  const cluster = useCurrentGraph();
-  const subgraph = useMemo(() => {
-    const g = new Subgraph$1(id);
-    if (cluster !== null) {
-      cluster.addSubgraph(g);
-    } else if (!context.container) {
-      context.container = g;
+const GraphMap = createContext(
+  null
+);
+GraphMap.displayName = "GraphMap";
+function useGraphMap() {
+  const graphMap = useContext(GraphMap);
+  if (graphMap === null) {
+    throw new Error(
+      "useGraphMap must be called within a GraphMap provider. This usually means you are calling it outside of a Graphviz root context."
+    );
+  }
+  return graphMap;
+}
+const ModelCollectorContext = createContext(null);
+ModelCollectorContext.displayName = "ModelCollectorContext";
+function useModelCollector() {
+  return useContext(ModelCollectorContext);
+}
+const DOT_ELEMENT_MAP = {
+  "dot:table": "table",
+  "dot:tr": "tr",
+  "dot:td": "td",
+  "dot:font": "font",
+  "dot:br": "br",
+  "dot:img": "img",
+  "dot:i": "i",
+  "dot:b": "b",
+  "dot:u": "u",
+  "dot:o": "o",
+  "dot:sub": "sub",
+  "dot:sup": "sup",
+  "dot:s": "s",
+  "dot:hr": "hr",
+  "dot:vr": "vr"
+};
+function manuallyRenderElement(element) {
+  const { type, props } = element;
+  if (typeof type === "function") {
+    try {
+      const result = typeof type === "function" && type.prototype?.render ? new type(props).render() : type(props);
+      if (result && typeof result === "object" && result.type) {
+        return manuallyRenderElement(result);
+      }
+    } catch {
     }
-    g.comment = comment;
-    g.apply(attributes);
-    g.attributes.node.apply(node ?? {});
-    g.attributes.edge.apply(edge ?? {});
-    g.attributes.graph.apply(graph ?? {});
-    return g;
-  }, [context, cluster, id, comment, edge, node, graph, attributes]);
-  useHasComment(subgraph, comment);
-  useGraphAttributes(subgraph, attributes, { edge, node, graph });
+    return "";
+  }
+  if (typeof type === "string") {
+    let tagName = type;
+    if (tagName === "dot:port") {
+      const propsWithChildren2 = props;
+      const childrenString2 = renderChildrenToString(
+        propsWithChildren2?.children
+      );
+      return `<${childrenString2}>`;
+    }
+    if (tagName.startsWith("dot:")) {
+      const htmlElement = DOT_ELEMENT_MAP[tagName];
+      if (htmlElement) {
+        tagName = htmlElement;
+      }
+    }
+    const attributes = [];
+    const propsWithChildren = props;
+    Object.entries(propsWithChildren || {}).forEach(([key, value]) => {
+      if (key !== "children" && value != null) {
+        if (typeof value === "string" || typeof value === "number") {
+          attributes.push(`${key}="${String(value)}"`);
+        } else if (typeof value === "boolean" && value) {
+          attributes.push(key);
+        }
+      }
+    });
+    const attrsString = attributes.length > 0 ? ` ${attributes.join(" ")}` : "";
+    const childrenString = renderChildrenToString(propsWithChildren?.children);
+    if (childrenString) {
+      return `<${tagName}${attrsString}>${childrenString}</${tagName}>`;
+    }
+    return `<${tagName}${attrsString}></${tagName}>`;
+  }
+  return "";
+}
+function renderChildrenToString(children) {
+  if (children == null || typeof children === "boolean") {
+    return "";
+  }
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(renderChildrenToString).join("");
+  }
+  if (typeof children === "object" && children !== null && "type" in children) {
+    return manuallyRenderElement(children);
+  }
+  return "";
+}
+function renderHTMLLike(label) {
+  if (!label) {
+    return "<>";
+  }
+  try {
+    const markup = manuallyRenderElement(label);
+    if (!markup) {
+      return "<>";
+    }
+    return `<${markup}>`;
+  } catch (error) {
+    console.warn(
+      "renderHTMLLike fallback:",
+      error instanceof Error ? error.message : error
+    );
+    return "<>";
+  }
+}
+function renderId(id) {
+  if (isValidElement(id)) {
+    return renderHTMLLike(id);
+  }
+  return id;
+}
+function useRenderedID(id) {
+  return useMemo(() => renderId(id), [id]);
+}
+const Digraph = ({
+  children,
+  label,
+  ref,
+  ...options
+}) => {
+  const container = useGraphContainer();
+  if (container !== null) {
+    throw Error(
+      "RootCluster is duplicated.\nUse only one of Digraph and Graph."
+    );
+  }
+  const renderedLabel = useRenderedID(label);
+  if (renderedLabel !== void 0)
+    Object.assign(options, { label: renderedLabel });
+  const digraph = useDigraph(options);
+  const clusters = useGraphMap();
+  const modelCollector = useModelCollector();
+  useImperativeHandle(ref, () => digraph, [digraph]);
+  useLayoutEffect(() => {
+    modelCollector?.collectModel(digraph);
+  }, [modelCollector, digraph]);
   useEffect(() => {
-    return () => {
-      cluster.removeSubgraph(subgraph);
-    };
-  }, [cluster, subgraph]);
-  return subgraph;
+    if (digraph.id !== void 0) {
+      clusters.set(digraph.id, digraph);
+    }
+  }, [clusters, digraph]);
+  return /* @__PURE__ */ jsx(GraphContainer.Provider, { value: digraph, children: /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: digraph, children }) });
+};
+Digraph.displayName = "Digraph";
+function useCurrentGraph() {
+  const cluster = useContext(CurrentGraph);
+  if (cluster === null) {
+    throw Error(
+      "useCurrentGraph must be called within a cluster such as Digraph, Graph, Subgraph."
+    );
+  }
+  return cluster;
 }
 function useHasAttributes(target, attributes) {
-  useEffect(() => {
+  useLayoutEffect(() => {
     target.attributes.clear();
     target.attributes.apply(attributes);
   }, [target, attributes]);
@@ -142,10 +240,8 @@ function useEdge(targets, props = {}) {
   }
   const edge = useMemo(() => {
     const e = cluster.createEdge(targets);
-    e.comment = comment;
-    e.attributes.apply(attributes);
     return e;
-  }, [cluster, targets, comment, attributes]);
+  }, [cluster, targets]);
   useHasComment(edge, comment);
   useHasAttributes(edge, attributes);
   useEffect(() => {
@@ -155,43 +251,42 @@ function useEdge(targets, props = {}) {
   }, [cluster, edge]);
   return edge;
 }
-function useNode(id, options = {}) {
-  const { comment, ...attributes } = options;
-  const cluster = useCurrentGraph();
-  const node = useMemo(() => {
-    const n = cluster.createNode(id);
-    n.attributes.apply(attributes);
-    n.comment = comment;
-    return n;
-  }, [cluster, id, attributes, comment]);
-  useHasComment(node, comment);
-  useHasAttributes(node, attributes);
+const Edge = ({ targets, label, ref, ...options }) => {
+  const renderedLabel = useRenderedID(label);
+  if (renderedLabel !== void 0)
+    Object.assign(options, { label: renderedLabel });
+  const edge = useEdge(targets, options);
+  const modelCollector = useModelCollector();
+  useImperativeHandle(ref, () => edge, [edge]);
+  useLayoutEffect(() => {
+    modelCollector?.collectModel(edge);
+  }, [modelCollector, edge]);
+  return null;
+};
+Edge.displayName = "Edge";
+function useGraph(options = {}) {
+  const { id, comment, edge, node, graph, ...attributes } = options;
+  const context = useGraphvizContext();
+  const memoGraph = useMemo(() => {
+    const g = new Graph$1(id);
+    context.container = g;
+    return g;
+  }, [context, id]);
+  useHasComment(memoGraph, comment);
+  useGraphAttributes(memoGraph, attributes, { edge, node, graph });
   useEffect(() => {
     return () => {
-      cluster.removeNode(node);
+      context.container = void 0;
     };
-  }, [cluster, node]);
-  return node;
-}
-const GraphMap = createContext(/* @__PURE__ */ new Map());
-GraphMap.displayName = "GraphMap";
-function useGraphMap() {
-  return useContext(GraphMap);
-}
-function renderHTMLLike(label) {
-  const htmlLike = renderToStaticMarkup(label).replace(/<dot:port>(.+?)<\/dot:port>/gi, "<$1>").replace(/<(\/?)dot:([a-z-]+)/gi, (_, $1, $2) => `<${$1}${$2}`);
-  return `<${htmlLike}>`;
-}
-function renderId(id) {
-  if (isValidElement(id)) {
-    return renderHTMLLike(id);
-  }
-  return id;
-}
-function useRenderedID(id) {
-  return useMemo(() => renderId(id), [id]);
+  }, [context]);
+  return memoGraph;
 }
-const Graph = ({ children, label, ...options }) => {
+const Graph = ({
+  children,
+  label,
+  ref,
+  ...options
+}) => {
   const container = useGraphContainer();
   if (container !== null) {
     throw Error(
@@ -203,6 +298,11 @@ const Graph = ({ children, label, ...options }) => {
     Object.assign(options, { label: renderedLabel });
   const graph = useGraph(options);
   const clusters = useGraphMap();
+  const modelCollector = useModelCollector();
+  useImperativeHandle(ref, () => graph, [graph]);
+  useLayoutEffect(() => {
+    modelCollector?.collectModel(graph);
+  }, [modelCollector, graph]);
   useEffect(() => {
     if (graph.id !== void 0) {
       clusters.set(graph.id, graph);
@@ -211,33 +311,74 @@ const Graph = ({ children, label, ...options }) => {
   return /* @__PURE__ */ jsx(GraphContainer.Provider, { value: graph, children: /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: graph, children }) });
 };
 Graph.displayName = "Graph";
-const Digraph = ({
-  children,
-  label,
-  ...options
-}) => {
+const GraphPortal = ({ children, id }) => {
   const container = useGraphContainer();
-  if (container !== null) {
-    throw Error(
-      "RootCluster is duplicated.\nUse only one of Digraph and Graph."
-    );
-  }
+  const map = useContext(GraphMap);
+  const cluster = useMemo(
+    () => id && map ? map.get(id) ?? container : container,
+    [container, map, id]
+  );
+  return /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: cluster, children });
+};
+GraphPortal.displayName = "GraphPortal";
+function useNode(id, options = {}) {
+  const { comment, ...attributes } = options;
+  const cluster = useCurrentGraph();
+  const node = useMemo(() => {
+    const n = cluster.createNode(id);
+    return n;
+  }, [cluster, id]);
+  useHasComment(node, comment);
+  useHasAttributes(node, attributes);
+  useEffect(() => {
+    return () => {
+      cluster.removeNode(node);
+    };
+  }, [cluster, node]);
+  return node;
+}
+const Node = ({ id, label, xlabel, ref, ...options }) => {
   const renderedLabel = useRenderedID(label);
+  const renderedXlabel = useRenderedID(xlabel);
   if (renderedLabel !== void 0)
     Object.assign(options, { label: renderedLabel });
-  const digraph = useDigraph(options);
-  const clusters = useGraphMap();
-  useEffect(() => {
-    if (digraph.id !== void 0) {
-      clusters.set(digraph.id, digraph);
-    }
-  }, [clusters, digraph]);
-  return /* @__PURE__ */ jsx(GraphContainer.Provider, { value: digraph, children: /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: digraph, children }) });
+  if (renderedXlabel !== void 0)
+    Object.assign(options, { xlabel: renderedXlabel });
+  const node = useNode(id, options);
+  const modelCollector = useModelCollector();
+  useImperativeHandle(ref, () => node, [node]);
+  useLayoutEffect(() => {
+    modelCollector?.collectModel(node);
+  }, [modelCollector, node]);
+  return null;
 };
-Digraph.displayName = "Digraph";
+Node.displayName = "Node";
+function useSubgraph(props = {}) {
+  const { id, comment, edge, node, graph, ...attributes } = props;
+  const context = useGraphvizContext();
+  const cluster = useCurrentGraph();
+  const subgraph = useMemo(() => {
+    const g = new Subgraph$1(id);
+    if (cluster !== null) {
+      cluster.addSubgraph(g);
+    } else if (!context.container) {
+      context.container = g;
+    }
+    return g;
+  }, [context, cluster, id]);
+  useHasComment(subgraph, comment);
+  useGraphAttributes(subgraph, attributes, { edge, node, graph });
+  useEffect(() => {
+    return () => {
+      cluster.removeSubgraph(subgraph);
+    };
+  }, [cluster, subgraph]);
+  return subgraph;
+}
 const Subgraph = ({
   children,
   label,
+  ref,
   ...options
 }) => {
   const renderedLabel = useRenderedID(label);
@@ -245,6 +386,11 @@ const Subgraph = ({
     Object.assign(options, { label: renderedLabel });
   const subgraph = useSubgraph(options);
   const clusters = useGraphMap();
+  const modelCollector = useModelCollector();
+  useImperativeHandle(ref, () => subgraph, [subgraph]);
+  useLayoutEffect(() => {
+    modelCollector?.collectModel(subgraph);
+  }, [modelCollector, subgraph]);
   useEffect(() => {
     if (subgraph.id !== void 0) {
       clusters.set(subgraph.id, subgraph);
@@ -253,43 +399,80 @@ const Subgraph = ({
   return /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: subgraph, children });
 };
 Subgraph.displayName = "Subgraph";
-const Node = ({ id, label, xlabel, ...options }) => {
-  const renderedLabel = useRenderedID(label);
-  const renderedXlabel = useRenderedID(xlabel);
-  if (renderedLabel !== void 0)
-    Object.assign(options, { label: renderedLabel });
-  if (renderedXlabel !== void 0)
-    Object.assign(options, { xlabel: renderedXlabel });
-  useNode(id, options);
-  return null;
-};
-Node.displayName = "Node";
-const Edge = ({ targets, label, ...options }) => {
-  const renderedLabel = useRenderedID(label);
-  if (renderedLabel !== void 0)
-    Object.assign(options, { label: renderedLabel });
-  useEdge(targets, options);
-  return null;
-};
-Edge.displayName = "Edge";
-const GraphPortal = ({ children, id }) => {
-  const container = useGraphContainer();
-  const map = useContext(GraphMap);
-  const cluster = useMemo(
-    () => id ? map.get(id) ?? container : container,
-    [container, map, id]
-  );
-  return /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: cluster, children });
-};
-GraphPortal.displayName = "GraphPortal";
 class HostConfig {
-  preparePortalMount(containerInfo) {
+  preparePortalMount(_containerInfo) {
   }
   scheduleTimeout(fn, delay) {
+    return setTimeout(fn, delay || 0);
   }
   cancelTimeout(id) {
+    clearTimeout(id);
   }
   queueMicrotask(fn) {
+    fn();
+  }
+  // For update priority management
+  resolveUpdatePriority() {
+    return 1;
+  }
+  setCurrentUpdatePriority(_priority) {
+  }
+  getCurrentUpdatePriority() {
+    return 1;
+  }
+  // form-related methods
+  resetFormInstance(_form) {
+  }
+  // transition-related properties
+  NotPendingTransition = null;
+  // suspense and commit methods
+  maySuspendCommit(_type, _props) {
+    return false;
+  }
+  preloadInstance(_type, _props) {
+    return false;
+  }
+  startSuspendingCommit() {
+  }
+  suspendInstance(_type, _props) {
+  }
+  waitForCommitToBeReady() {
+    return null;
+  }
+  // additional required methods
+  getInstanceFromNode(_node) {
+    return null;
+  }
+  beforeActiveInstanceBlur() {
+  }
+  afterActiveInstanceBlur() {
+  }
+  prepareScopeUpdate(_scopeInstance, _instance) {
+  }
+  getInstanceFromScope(_scopeInstance) {
+    return null;
+  }
+  detachDeletedInstance(_instance) {
+  }
+  logRecoverableError(_error) {
+  }
+  requestPostPaintCallback(_callback) {
+  }
+  // container clearing method
+  clearContainer(_container) {
+  }
+  // transition context and scheduling methods
+  HostTransitionContext = null;
+  shouldAttemptEagerTransition() {
+    return false;
+  }
+  trackSchedulerEvent() {
+  }
+  resolveEventType() {
+    return null;
+  }
+  resolveEventTimeStamp() {
+    return Date.now();
   }
   cloneInstance;
   cloneFundamentalInstance;
@@ -307,51 +490,75 @@ class HostConfig {
   // Temporary workaround for scenario where multiple renderers concurrently
   // render using the same context objects. E.g. React DOM and React ART on the
   // same page. DOM is the primary renderer; ART is the secondary renderer.
-  isPrimaryRenderer = false;
-  supportsMutation = false;
+  isPrimaryRenderer = true;
+  supportsMutation = true;
   supportsPersistence = false;
   supportsHydration = false;
+  // specific configurations for synchronous rendering
+  supportsMicrotasks = false;
   getPublicInstance(instance) {
     return instance;
   }
-  getRootHostContext(rootContainerInstance) {
-    return {};
+  getRootHostContext(_rootContainerInstance) {
+    return {
+      graph: void 0
+    };
   }
-  getChildHostContext(parentHostContext, type, rootContainerInstance) {
-    return parentHostContext;
+  getChildHostContext(parentHostContext, _type, _rootContainerInstance) {
+    return {
+      ...parentHostContext
+      // You could extend context based on component type if needed
+    };
   }
-  prepareForCommit(containerInfo) {
+  prepareForCommit(_containerInfo) {
     return null;
   }
-  resetAfterCommit(containerInfo) {
+  resetAfterCommit(_containerInfo) {
   }
   /**
-   * Create component instance
+   * Create component instance for Graphviz elements
    */
-  createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
-    return type(props);
+  createInstance(type, props, _rootContainerInstance, _hostContext, _internalInstanceHandle) {
+    const instance = {
+      type: type.displayName || type.name || "Unknown",
+      props,
+      children: [],
+      appendChild: (child) => {
+        instance.children.push(child);
+      }
+    };
+    return instance;
   }
   appendInitialChild(parentInstance, child) {
-    parentInstance.appendChild(child);
+    if (parentInstance.appendChild) {
+      parentInstance.appendChild(child);
+    }
   }
-  finalizeInitialChildren(parentInstance, type, props, rootContainerInstance, hostContext) {
+  finalizeInitialChildren(_instance, _type, _props, _rootContainerInstance, _hostContext) {
     return false;
   }
-  prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, hostContext) {
-    return {};
+  prepareUpdate(_instance, _type, oldProps, newProps, _rootContainerInstance, _hostContext) {
+    if (JSON.stringify(oldProps) !== JSON.stringify(newProps)) {
+      return {
+        type: "UPDATE",
+        oldProps,
+        newProps
+      };
+    }
+    return null;
   }
-  shouldSetTextContent(type, props) {
+  shouldSetTextContent(_type, _props) {
     return false;
   }
-  shouldDeprioritizeSubtree(type, props) {
+  shouldDeprioritizeSubtree(_type, _props) {
     return false;
   }
-  createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) {
-    return text;
+  createTextInstance(text, _rootContainerInstance, _hostContext, _internalInstanceHandle) {
+    return text.trim();
   }
-  scheduleDeferredCallback(callback, options) {
+  scheduleDeferredCallback(_callback, _options) {
   }
-  cancelDeferredCallback(callbackID) {
+  cancelDeferredCallback(_callbackID) {
   }
   // -------------------
   //      Mutation
@@ -363,22 +570,26 @@ class HostConfig {
     }
   }
   appendChildToContainer(container, child) {
+    if (typeof child === "object" && "type" in child) {
+      container.__rootInstance = child;
+    }
   }
-  commitTextUpdate(textInstance, oldText, newText) {
+  commitTextUpdate(_textInstance, _oldText, _newText) {
   }
-  commitMount(instance, type, newProps, internalInstanceHandle) {
+  commitMount(_instance, _type, _props, _internalInstanceHandle) {
   }
-  commitUpdate(instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) {
+  commitUpdate(instance, _type, _prevProps, nextProps, _internalHandle) {
+    instance.props = nextProps;
   }
-  insertBefore(parentInstance, child, beforeChild) {
+  insertBefore(_parentInstance, _child, _beforeChild) {
   }
-  insertInContainerBefore(container, child, beforeChild) {
+  insertInContainerBefore(_container, _child, _beforeChild) {
   }
-  removeChild(parentInstance, child) {
+  removeChild(_parentInstance, _child) {
   }
-  removeChildFromContainer(container, child) {
+  removeChildFromContainer(_container, _child) {
   }
-  resetTextContent(instance) {
+  resetTextContent(_instance) {
   }
 }
 const reconciler = ReactReconciler(new HostConfig());
@@ -394,12 +605,13 @@ function clusterMap(graph, map = /* @__PURE__ */ new Map()) {
   }
   return map;
 }
-function render(element, container) {
-  const context = { container };
-  reconciler.updateContainer(
+function createWrappedElement(element, context, collectModel, container) {
+  return createElement(
+    GraphvizContext.Provider,
+    { value: context },
     createElement(
-      GraphvizContext.Provider,
-      { value: context },
+      ModelCollectorContext.Provider,
+      { value: { collectModel } },
       createElement(
         GraphMap.Provider,
         { value: clusterMap(container) },
@@ -413,29 +625,155 @@ function render(element, container) {
           ) : element
         )
       )
-    ),
-    reconciler.createContainer(
-      {},
-      0,
-      null,
-      true,
-      null,
-      "@ts-graphviz/react",
-      noop,
-      null
-    ),
+    )
+  );
+}
+function createFiberRoot(containerInfo, options = {}) {
+  const { onUncaughtError = noop } = options;
+  return reconciler.createContainer(
+    containerInfo,
+    1,
+    // tag - ConcurrentRoot = 1 for concurrent mode (React 19 default)
+    null,
+    // hydrationCallbacks
+    false,
+    // isStrictMode
     null,
-    noop
+    // concurrentUpdatesByDefaultOverride
+    "@ts-graphviz/react",
+    // identifierPrefix
+    // Enhance onRecoverableError to forward componentStack for better diagnostics
+    onUncaughtError ? (error, errorInfo = {}) => onUncaughtError(error, errorInfo) : noop,
+    // onRecoverableError
+    null
+    // transitionCallbacks
   );
-  if (!context.container) {
-    throw Error(
-      "There are no clusters of container(Subgraph, Digraph, Graph)."
+}
+function validateModels(models, container) {
+  if (container) {
+    return;
+  }
+  const topLevelGraphs = models.filter((model) => model.$$type === "Graph");
+  if (topLevelGraphs.length === 0) {
+    throw new Error(
+      "No top-level graph found. When not using a container, you must provide exactly one Graph or Digraph component at the top level."
     );
   }
-  return context.container;
+  if (topLevelGraphs.length > 1) {
+    throw new Error(
+      `Multiple top-level graphs detected (${topLevelGraphs.length}). DOT language only supports one graph per file. Consider using a container or rendering graphs separately.`
+    );
+  }
+}
+async function renderInternal(containerInfo, fiberRoot, wrappedElement, originalContainer, options = {}) {
+  const { timeout = 5e3, onRenderComplete } = options;
+  return new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      reject(new Error(`Rendering timeout after ${timeout}ms`));
+    }, timeout);
+    try {
+      reconciler.updateContainer(wrappedElement, fiberRoot, null, () => {
+        clearTimeout(timeoutId);
+        try {
+          validateModels(containerInfo.renderedModels, originalContainer);
+          if (onRenderComplete) {
+            onRenderComplete([...containerInfo.renderedModels]);
+          }
+          resolve();
+        } catch (error) {
+          reject(error);
+        }
+      });
+    } catch (error) {
+      clearTimeout(timeoutId);
+      reject(error);
+    }
+  });
 }
-function renderToDot(element, container) {
-  return toDot(render(element, container));
+function createRoot(options = {}) {
+  const { container, ...otherOptions } = options;
+  const containerInfo = {
+    renderedModels: []
+  };
+  const collectModel = (model) => {
+    if (container) {
+      if (model !== container) {
+        containerInfo.renderedModels.push(model);
+      }
+    } else {
+      if (isRootGraphModel(model)) {
+        containerInfo.renderedModels.push(model);
+      }
+    }
+  };
+  const context = {
+    container
+  };
+  containerInfo.context = context;
+  const fiberRoot = createFiberRoot(containerInfo, otherOptions);
+  let isUnmounted = false;
+  return {
+    async render(element) {
+      if (isUnmounted) {
+        throw new Error("Cannot render on an unmounted root");
+      }
+      containerInfo.renderedModels = [];
+      const wrappedElement = createWrappedElement(
+        element,
+        context,
+        collectModel,
+        container
+      );
+      return renderInternal(
+        containerInfo,
+        fiberRoot,
+        wrappedElement,
+        container,
+        otherOptions
+      );
+    },
+    unmount() {
+      if (isUnmounted) {
+        return;
+      }
+      isUnmounted = true;
+      reconciler.updateContainer(null, fiberRoot, null, noop);
+      containerInfo.renderedModels = [];
+    },
+    getTopLevelModels(typeGuard) {
+      const models = [...containerInfo.renderedModels];
+      if (typeGuard) {
+        return models.filter(typeGuard);
+      }
+      return models;
+    }
+  };
+}
+async function renderToDot(element, options = {}) {
+  const { container, ...rootOptions } = options;
+  if (container) {
+    const root = createRoot({ container, ...rootOptions });
+    try {
+      await root.render(element);
+      return toDot(container);
+    } finally {
+      root.unmount();
+    }
+  } else {
+    const root = createRoot(rootOptions);
+    try {
+      await root.render(element);
+      const models = root.getTopLevelModels();
+      if (models.length !== 1) {
+        throw new Error(
+          `Expected exactly one top-level graph, but got ${models.length}. Use a container or ensure only one Graph/Digraph component is at the top level.`
+        );
+      }
+      return toDot(models[0]);
+    } finally {
+      root.unmount();
+    }
+  }
 }
 export {
   Digraph,
@@ -444,7 +782,12 @@ export {
   GraphPortal,
   Node,
   Subgraph,
-  render,
+  createRoot,
+  isAttributeListModel,
+  isEdgeModel,
+  isNodeModel,
+  isRootGraphModel2 as isRootGraphModel,
+  isSubgraphModel,
   renderHTMLLike,
   renderToDot,
   useCurrentGraph,