@tscircuit/schematic-viewer 2.0.24 → 2.0.26

package/dist/index.js

@@ -201,7 +201,7 @@ var enableDebug = () => {
 var debug_default = debug;
 
 // lib/components/SchematicViewer.tsx
-import { useEffect as useEffect5, useMemo, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect6, useMemo, useRef as useRef4, useState as useState4 } from "react";
 import {
   fromString,
   identity,
@@ -386,6 +386,7 @@ var useComponentDragging = ({
 var zIndexMap = {
   schematicEditIcon: 50,
   schematicGridIcon: 49,
+  spiceSimulationIcon: 51,
   clickToInteractOverlay: 100
 };
 
@@ -474,8 +475,523 @@ var GridIcon = ({
   );
 };
 
+// lib/components/SpiceIcon.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SpiceIcon = () => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx3("path", { d: "M3 12h2.5l2.5-9 4 18 4-9h5.5" })
+  }
+);
+
+// lib/components/SpiceSimulationIcon.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SpiceSimulationIcon = ({
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      onClick,
+      style: {
+        position: "absolute",
+        top: "16px",
+        right: "56px",
+        backgroundColor: "#fff",
+        color: "#000",
+        padding: "8px",
+        borderRadius: "4px",
+        cursor: "pointer",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        zIndex: zIndexMap.spiceSimulationIcon
+      },
+      children: /* @__PURE__ */ jsx4(SpiceIcon, {})
+    }
+  );
+};
+
+// lib/components/SpicePlot.tsx
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+var colors = ["#8884d8", "#82ca9d", "#ffc658", "#ff7300", "#387908"];
+var formatTimeWithUnits = (seconds) => {
+  if (seconds === 0) return "0s";
+  const absSeconds = Math.abs(seconds);
+  let unit = "s";
+  let scale = 1;
+  if (absSeconds < 1e-12) {
+    unit = "fs";
+    scale = 1e15;
+  } else if (absSeconds < 1e-9) {
+    unit = "ps";
+    scale = 1e12;
+  } else if (absSeconds < 1e-6) {
+    unit = "ns";
+    scale = 1e9;
+  } else if (absSeconds < 1e-3) {
+    unit = "us";
+    scale = 1e6;
+  } else if (absSeconds < 1) {
+    unit = "ms";
+    scale = 1e3;
+  }
+  return `${parseFloat((seconds * scale).toPrecision(3))}${unit}`;
+};
+var SpicePlot = ({
+  plotData,
+  nodes,
+  isLoading,
+  error
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        style: {
+          height: "300px",
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: "Running simulation..."
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          height: "300px",
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "red"
+        },
+        children: [
+          "Error: ",
+          error
+        ]
+      }
+    );
+  }
+  if (plotData.length === 0) {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        style: {
+          height: "300px",
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: "No data to plot. Check simulation output or SPICE netlist."
+      }
+    );
+  }
+  const chartData = {
+    datasets: nodes.map((node, i) => ({
+      label: node,
+      data: plotData.map((p) => ({
+        x: Number(p.name),
+        y: p[node]
+      })),
+      borderColor: colors[i % colors.length],
+      backgroundColor: colors[i % colors.length],
+      fill: false,
+      tension: 0.1
+    }))
+  };
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: "top",
+        labels: {
+          font: {
+            family: "sans-serif"
+          }
+        }
+      },
+      title: {
+        display: false
+      },
+      tooltip: {
+        callbacks: {
+          title: (tooltipItems) => {
+            if (tooltipItems.length > 0) {
+              const item = tooltipItems[0];
+              return formatTimeWithUnits(item.parsed.x);
+            }
+            return "";
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        type: "linear",
+        title: {
+          display: true,
+          text: "Time",
+          font: {
+            family: "sans-serif"
+          }
+        },
+        ticks: {
+          callback: (value) => formatTimeWithUnits(value),
+          font: {
+            family: "sans-serif"
+          }
+        }
+      },
+      y: {
+        title: {
+          display: true,
+          text: "Voltage",
+          font: {
+            family: "sans-serif"
+          }
+        },
+        ticks: {
+          font: {
+            family: "sans-serif"
+          }
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx5("div", { style: { position: "relative", height: "300px", width: "100%" }, children: /* @__PURE__ */ jsx5(Line, { options, data: chartData }) });
+};
+
+// lib/components/SpiceSimulationOverlay.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var SpiceSimulationOverlay = ({
+  spiceString,
+  onClose,
+  plotData,
+  nodes,
+  isLoading,
+  error
+}) => {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1002,
+        fontFamily: "sans-serif"
+      },
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          style: {
+            backgroundColor: "white",
+            padding: "24px",
+            borderRadius: "12px",
+            width: "90%",
+            maxWidth: "900px",
+            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginBottom: "24px",
+                  borderBottom: "1px solid #eee",
+                  paddingBottom: "16px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx6(
+                    "h2",
+                    {
+                      style: {
+                        margin: 0,
+                        fontSize: "22px",
+                        fontWeight: 600,
+                        color: "#333"
+                      },
+                      children: "SPICE Simulation"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        fontSize: "28px",
+                        cursor: "pointer",
+                        color: "#888",
+                        padding: 0,
+                        lineHeight: 1
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6(
+              SpicePlot,
+              {
+                plotData,
+                nodes,
+                isLoading,
+                error
+              }
+            ) }),
+            /* @__PURE__ */ jsxs3("div", { style: { marginTop: "24px" }, children: [
+              /* @__PURE__ */ jsx6(
+                "h3",
+                {
+                  style: {
+                    marginTop: 0,
+                    marginBottom: "12px",
+                    fontSize: "18px",
+                    fontWeight: 600,
+                    color: "#333"
+                  },
+                  children: "SPICE Netlist"
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "pre",
+                {
+                  style: {
+                    backgroundColor: "#fafafa",
+                    padding: "16px",
+                    borderRadius: "6px",
+                    maxHeight: "150px",
+                    overflowY: "auto",
+                    border: "1px solid #eee",
+                    color: "#333",
+                    fontSize: "13px",
+                    fontFamily: "monospace"
+                  },
+                  children: spiceString
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// lib/hooks/useSpiceSimulation.ts
+import { useState as useState3, useEffect as useEffect5 } from "react";
+
+// lib/workers/spice-simulation.worker.blob.js
+var b64 = "dmFyIGU9bnVsbCxzPWFzeW5jKCk9Pihhd2FpdCBpbXBvcnQoImh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZWVjaXJjdWl0LWVuZ2luZUAxLjUuMi8rZXNtIikpLlNpbXVsYXRpb24sYz1hc3luYygpPT57aWYoZSYmZS5pc0luaXRpYWxpemVkKCkpcmV0dXJuO2xldCBpPWF3YWl0IHMoKTtlPW5ldyBpLGF3YWl0IGUuc3RhcnQoKX07c2VsZi5vbm1lc3NhZ2U9YXN5bmMgaT0+e3RyeXtpZihhd2FpdCBjKCksIWUpdGhyb3cgbmV3IEVycm9yKCJTaW11bGF0aW9uIG5vdCBpbml0aWFsaXplZCIpO2xldCB0PWkuZGF0YS5zcGljZVN0cmluZyxhPXQubWF0Y2goL3dyZGF0YVxzKyhcUyspXHMrKC4qKS9pKTtpZihhKXtsZXQgbz1gLnByb2JlICR7YVsyXS50cmltKCkuc3BsaXQoL1xzKy8pLmpvaW4oIiAiKX1gO3Q9dC5yZXBsYWNlKC93cmRhdGEuKi9pLG8pfWVsc2UgaWYoIXQubWF0Y2goL1wucHJvYmUvaSkpdGhyb3cgdC5tYXRjaCgvcGxvdFxzKyguKikvaSk/bmV3IEVycm9yKCJUaGUgJ3Bsb3QnIGNvbW1hbmQgaXMgbm90IHN1cHBvcnRlZCBmb3IgZGF0YSBleHRyYWN0aW9uLiBQbGVhc2UgdXNlICd3cmRhdGEgPGZpbGVuYW1lPiA8dmFyMT4gLi4uJyBvciAnLnByb2JlIDx2YXIxPiAuLi4nIGluc3RlYWQuIik6bmV3IEVycm9yKCJObyAnLnByb2JlJyBvciAnd3JkYXRhJyBjb21tYW5kIGZvdW5kIGluIFNQSUNFIGZpbGUuIFVzZSAnd3JkYXRhIDxmaWxlbmFtZT4gPHZhcjE+IC4uLicgdG8gc3BlY2lmeSBvdXRwdXQuIik7ZS5zZXROZXRMaXN0KHQpO2xldCBuPWF3YWl0IGUucnVuU2ltKCk7c2VsZi5wb3N0TWVzc2FnZSh7dHlwZToicmVzdWx0IixyZXN1bHQ6bn0pfWNhdGNoKHQpe3NlbGYucG9zdE1lc3NhZ2Uoe3R5cGU6ImVycm9yIixlcnJvcjp0Lm1lc3NhZ2V9KX19Owo=";
+var blobUrl = null;
+var getSpiceSimulationWorkerBlobUrl = () => {
+  if (typeof window === "undefined") return null;
+  if (blobUrl) return blobUrl;
+  try {
+    const blob = new Blob([atob(b64)], { type: "application/javascript" });
+    blobUrl = URL.createObjectURL(blob);
+    return blobUrl;
+  } catch (e) {
+    console.error("Failed to create blob URL for worker", e);
+    return null;
+  }
+};
+
+// lib/hooks/useSpiceSimulation.ts
+var parseEecEngineOutput = (result) => {
+  const columnData = {};
+  if (result.dataType === "real") {
+    result.data.forEach((col) => {
+      columnData[col.name] = col.values;
+    });
+  } else if (result.dataType === "complex") {
+    result.data.forEach((col) => {
+      columnData[col.name] = col.values.map((v) => v.real);
+    });
+  } else {
+    throw new Error("Unsupported data type in simulation result");
+  }
+  const timeKey = Object.keys(columnData).find(
+    (k) => k.toLowerCase() === "time" || k.toLowerCase() === "frequency"
+  );
+  if (!timeKey) {
+    throw new Error("No time or frequency data in simulation result");
+  }
+  const timeValues = columnData[timeKey];
+  const probedVariables = Object.keys(columnData).filter((k) => k !== timeKey);
+  const plotableNodes = probedVariables.map(
+    (n) => n.replace(/v\(([^)]+)\)/i, "$1")
+  );
+  const plotData = timeValues.map((t, i) => {
+    const point = { name: t.toExponential(2) };
+    probedVariables.forEach((variable, j) => {
+      point[plotableNodes[j]] = columnData[variable][i];
+    });
+    return point;
+  });
+  return { plotData, nodes: plotableNodes };
+};
+var useSpiceSimulation = (spiceString) => {
+  const [plotData, setPlotData] = useState3([]);
+  const [nodes, setNodes] = useState3([]);
+  const [isLoading, setIsLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  useEffect5(() => {
+    if (!spiceString) {
+      setIsLoading(false);
+      setPlotData([]);
+      setNodes([]);
+      setError(null);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    setPlotData([]);
+    setNodes([]);
+    const workerUrl = getSpiceSimulationWorkerBlobUrl();
+    if (!workerUrl) {
+      setError("Could not create SPICE simulation worker.");
+      setIsLoading(false);
+      return;
+    }
+    const worker = new Worker(workerUrl, { type: "module" });
+    worker.onmessage = (event) => {
+      if (event.data.type === "result") {
+        try {
+          const { plotData: parsedData, nodes: parsedNodes } = parseEecEngineOutput(event.data.result);
+          setPlotData(parsedData);
+          setNodes(parsedNodes);
+        } catch (e) {
+          setError(e.message || "Failed to parse simulation result");
+          console.error(e);
+        }
+      } else if (event.data.type === "error") {
+        setError(event.data.error);
+      }
+      setIsLoading(false);
+    };
+    worker.onerror = (err) => {
+      setError(err.message);
+      setIsLoading(false);
+    };
+    worker.postMessage({ spiceString });
+    return () => {
+      worker.terminate();
+    };
+  }, [spiceString]);
+  return { plotData, nodes, isLoading, error };
+};
+
+// lib/utils/spice-utils.ts
+import { circuitJsonToSpice } from "circuit-json-to-spice";
+var getSpiceFromCircuitJson = (circuitJson) => {
+  const spiceNetlist = circuitJsonToSpice(circuitJson);
+  const baseSpiceString = spiceNetlist.toSpiceString();
+  const lines = baseSpiceString.split("\n").filter((l) => l.trim() !== "");
+  const componentLines = lines.filter(
+    (l) => !l.startsWith("*") && !l.startsWith(".") && l.trim() !== ""
+  );
+  const allNodes = /* @__PURE__ */ new Set();
+  const capacitorNodes = /* @__PURE__ */ new Set();
+  for (const line of componentLines) {
+    const parts = line.trim().split(/\s+/);
+    if (parts.length < 3) continue;
+    const componentType = parts[0][0].toUpperCase();
+    let nodesOnLine = [];
+    if (["R", "C", "L", "V", "I", "D"].includes(componentType)) {
+      nodesOnLine = parts.slice(1, 3);
+    } else if (componentType === "Q" && parts.length >= 4) {
+      nodesOnLine = parts.slice(1, 4);
+    } else if (componentType === "M" && parts.length >= 5) {
+      nodesOnLine = parts.slice(1, 5);
+    } else if (componentType === "X") {
+      nodesOnLine = parts.slice(1, -1);
+    } else {
+      continue;
+    }
+    nodesOnLine.forEach((node) => allNodes.add(node));
+    if (componentType === "C") {
+      nodesOnLine.forEach((node) => capacitorNodes.add(node));
+    }
+  }
+  allNodes.delete("0");
+  capacitorNodes.delete("0");
+  const icLines = Array.from(capacitorNodes).map((node) => `.ic V(${node})=0`);
+  const probeNodes = Array.from(allNodes).map((node) => `V(${node})`);
+  const probeLine = probeNodes.length > 0 ? `.probe ${probeNodes.join(" ")}` : "";
+  const tranLine = ".tran 0.1ms 50ms UIC";
+  const endStatement = ".end";
+  const originalLines = baseSpiceString.split("\n");
+  let endIndex = -1;
+  for (let i = originalLines.length - 1; i >= 0; i--) {
+    if (originalLines[i].trim().toLowerCase().startsWith(endStatement)) {
+      endIndex = i;
+      break;
+    }
+  }
+  const injectionLines = [...icLines, probeLine, tranLine].filter(Boolean);
+  let finalLines;
+  if (endIndex !== -1) {
+    const beforeEnd = originalLines.slice(0, endIndex);
+    const endLineAndAfter = originalLines.slice(endIndex);
+    finalLines = [...beforeEnd, ...injectionLines, ...endLineAndAfter];
+  } else {
+    finalLines = [...originalLines, ...injectionLines, endStatement];
+  }
+  return finalLines.join("\n");
+};
+
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
@@ -486,14 +1002,38 @@ var SchematicViewer = ({
   editingEnabled = false,
   debug: debug3 = false,
   clickToInteractEnabled = false,
-  colorOverrides
+  colorOverrides,
+  spiceSimulationEnabled = false
 }) => {
   if (debug3) {
     enableDebug();
   }
-  const [editModeEnabled, setEditModeEnabled] = useState3(defaultEditMode);
-  const [snapToGrid, setSnapToGrid] = useState3(true);
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState3(
+  const [showSpiceOverlay, setShowSpiceOverlay] = useState4(false);
+  const getCircuitHash = (circuitJson2) => {
+    return `${circuitJson2?.length || 0}_${circuitJson2?.editCount || 0}`;
+  };
+  const circuitJsonKey = useMemo(
+    () => getCircuitHash(circuitJson),
+    [circuitJson]
+  );
+  const spiceString = useMemo(() => {
+    if (!spiceSimulationEnabled) return null;
+    try {
+      return getSpiceFromCircuitJson(circuitJson);
+    } catch (e) {
+      console.error("Failed to generate SPICE string", e);
+      return null;
+    }
+  }, [circuitJsonKey, spiceSimulationEnabled]);
+  const {
+    plotData,
+    nodes,
+    isLoading: isSpiceSimLoading,
+    error: spiceSimError
+  } = useSpiceSimulation(spiceString);
+  const [editModeEnabled, setEditModeEnabled] = useState4(defaultEditMode);
+  const [snapToGrid, setSnapToGrid] = useState4(true);
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState4(
     !clickToInteractEnabled
   );
   const svgDivRef = useRef4(null);
@@ -517,12 +1057,9 @@ var SchematicViewer = ({
     }
     touchStartRef.current = null;
   };
-  const [internalEditEvents, setInternalEditEvents] = useState3([]);
+  const [internalEditEvents, setInternalEditEvents] = useState4([]);
   const circuitJsonRef = useRef4(circuitJson);
-  const getCircuitHash = (circuitJson2) => {
-    return `${circuitJson2?.length || 0}_${circuitJson2?.editCount || 0}`;
-  };
-  useEffect5(() => {
+  useEffect6(() => {
     const circuitHash = getCircuitHash(circuitJson);
     const circuitHashRef = getCircuitHash(circuitJsonRef.current);
     if (circuitHash !== circuitHashRef) {
@@ -540,7 +1077,7 @@ var SchematicViewer = ({
       svgDivRef.current.style.transform = transformToString(transform);
     },
     // @ts-ignore disabled is a valid prop but not typed
-    enabled: isInteractionEnabled
+    enabled: isInteractionEnabled && !showSpiceOverlay
   });
   const { containerWidth, containerHeight } = useResizeHandling(containerRef);
   const svgString = useMemo(() => {
@@ -590,7 +1127,7 @@ var SchematicViewer = ({
       svgToScreenProjection,
       circuitJson,
       editEvents: editEventsWithUnappliedEditEvents,
-      enabled: editModeEnabled && isInteractionEnabled,
+      enabled: editModeEnabled && isInteractionEnabled && !showSpiceOverlay,
       snapToGrid
     }
   );
@@ -608,7 +1145,7 @@ var SchematicViewer = ({
     editEvents: editEventsWithUnappliedEditEvents
   });
   const svgDiv = useMemo(
-    () => /* @__PURE__ */ jsx3(
+    () => /* @__PURE__ */ jsx7(
       "div",
       {
         ref: svgDivRef,
@@ -621,7 +1158,7 @@ var SchematicViewer = ({
     ),
     [svgString, isInteractionEnabled, clickToInteractEnabled]
   );
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: containerRef,
@@ -629,10 +1166,15 @@ var SchematicViewer = ({
         position: "relative",
         backgroundColor: containerBackgroundColor,
         overflow: "hidden",
-        cursor: isDragging ? "grabbing" : clickToInteractEnabled && !isInteractionEnabled ? "pointer" : "grab",
+        cursor: showSpiceOverlay ? "auto" : isDragging ? "grabbing" : clickToInteractEnabled && !isInteractionEnabled ? "pointer" : "grab",
         minHeight: "300px",
         ...containerStyle
       },
+      onWheelCapture: (e) => {
+        if (showSpiceOverlay) {
+          e.stopPropagation();
+        }
+      },
       onMouseDown: (e) => {
         if (clickToInteractEnabled && !isInteractionEnabled) {
           e.preventDefault();
@@ -648,10 +1190,16 @@ var SchematicViewer = ({
           return;
         }
       },
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
+      onTouchStart: (e) => {
+        if (showSpiceOverlay) return;
+        handleTouchStart(e);
+      },
+      onTouchEnd: (e) => {
+        if (showSpiceOverlay) return;
+        handleTouchEnd(e);
+      },
       children: [
-        !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx3(
+        !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx7(
           "div",
           {
             onClick: (e) => {
@@ -670,7 +1218,7 @@ var SchematicViewer = ({
               pointerEvents: "all",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx3(
+            children: /* @__PURE__ */ jsx7(
               "div",
               {
                 style: {
@@ -687,20 +1235,32 @@ var SchematicViewer = ({
             )
           }
         ),
-        editingEnabled && /* @__PURE__ */ jsx3(
+        editingEnabled && /* @__PURE__ */ jsx7(
           EditIcon,
           {
             active: editModeEnabled,
             onClick: () => setEditModeEnabled(!editModeEnabled)
           }
         ),
-        editingEnabled && editModeEnabled && /* @__PURE__ */ jsx3(
+        editingEnabled && editModeEnabled && /* @__PURE__ */ jsx7(
           GridIcon,
           {
             active: snapToGrid,
             onClick: () => setSnapToGrid(!snapToGrid)
           }
         ),
+        spiceSimulationEnabled && /* @__PURE__ */ jsx7(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
+        showSpiceOverlay && /* @__PURE__ */ jsx7(
+          SpiceSimulationOverlay,
+          {
+            spiceString,
+            onClose: () => setShowSpiceOverlay(false),
+            plotData,
+            nodes,
+            isLoading: isSpiceSimLoading,
+            error: spiceSimError
+          }
+        ),
         svgDiv
       ]
     }