@tscircuit/schematic-viewer 2.0.70 → 2.0.72

package/dist/index.d.ts

@@ -59,7 +59,11 @@ interface Props {
     width?: number;
     height?: number;
     className?: string;
+    /** Whether to hide the schematic and render only the simulation graph. Defaults to false. */
+    hideSchematic?: boolean;
+    /** Called when the active simulation changes. */
+    onSimulationChange?: (simulationExperimentId: string) => void;
 }
-declare const AnalogSimulationViewer: ({ circuitJson: inputCircuitJson, containerStyle, colorOverrides, width, height, className, }: Props) => react.JSX.Element;
+declare const AnalogSimulationViewer: ({ circuitJson: inputCircuitJson, containerStyle, colorOverrides, width, height, className, hideSchematic, onSimulationChange, }: Props) => react.JSX.Element;
 
 export { AnalogSimulationViewer, MouseTracker, SchematicViewer, useMouseEventsOverBoundingBox };

package/dist/index.js

@@ -920,7 +920,7 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.69",
+  version: "2.0.71",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -2357,12 +2357,194 @@ var SchematicViewer = ({
 
 // lib/components/AnalogSimulationViewer.tsx
 import {
-  convertCircuitJsonToSchematicSimulationSvg
+  convertCircuitJsonToSchematicSimulationSvg,
+  convertCircuitJsonToSimulationGraphSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect12, useState as useState7, useMemo as useMemo5, useRef as useRef9 } from "react";
+import { useEffect as useEffect12, useState as useState8, useMemo as useMemo5, useRef as useRef9 } from "react";
 import { useMouseMatrixTransform as useMouseMatrixTransform2 } from "use-mouse-matrix-transform";
 import { toString as transformToString2 } from "transformation-matrix";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// lib/components/AnalogSimulationSelector.tsx
+import * as DropdownMenu3 from "@radix-ui/react-dropdown-menu";
+import { useState as useState7 } from "react";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var FONT_FAMILY3 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var contentStyles3 = {
+  backgroundColor: "#ffffff",
+  color: "#111111",
+  borderRadius: 8,
+  boxShadow: "0 6px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08)",
+  border: "1px solid #e5e7eb",
+  padding: 4,
+  minWidth: 220,
+  maxWidth: 360,
+  maxHeight: 320,
+  overflowY: "auto",
+  fontSize: 13,
+  fontFamily: FONT_FAMILY3,
+  outline: "none",
+  zIndex: zIndexMap.viewMenu
+};
+var itemStyles3 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "7px 10px 7px 8px",
+  borderRadius: 6,
+  cursor: "pointer",
+  outline: "none",
+  userSelect: "none",
+  color: "#111111",
+  fontSize: 13,
+  fontFamily: FONT_FAMILY3
+};
+var iconSlotStyles3 = {
+  width: 16,
+  height: 16,
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#111111"
+};
+var ellipsisStyles2 = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var MENU_CSS2 = `
+.sv-simulation-item[data-highlighted], .sv-simulation-item:hover { background-color: #f1f3f5; }
+.sv-simulation-chevron { transition: transform 0.2s ease; }
+[data-state="open"] > .sv-simulation-chevron { transform: rotate(180deg); }
+`;
+var CheckIcon3 = () => /* @__PURE__ */ jsx10(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx10("path", { d: "M20 6 9 17l-5-5" })
+  }
+);
+var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx10(
+  "svg",
+  {
+    className,
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { opacity: 0.6, flexShrink: 0 },
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx10("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var getSimulationLabels = (simulations) => {
+  const nameCounts = /* @__PURE__ */ new Map();
+  return simulations.map((simulation) => {
+    const count = (nameCounts.get(simulation.name) ?? 0) + 1;
+    nameCounts.set(simulation.name, count);
+    return {
+      simulation,
+      label: count === 1 ? simulation.name : `${simulation.name} (${count})`
+    };
+  });
+};
+var AnalogSimulationSelector = ({
+  simulations,
+  selectedSimulationExperimentId,
+  onSelectSimulation
+}) => {
+  const [open, setOpen] = useState7(false);
+  if (simulations.length <= 1) return null;
+  const simulationLabels = getSimulationLabels(simulations);
+  const selectedSimulation = simulationLabels.find(
+    ({ simulation }) => simulation.simulation_experiment_id === selectedSimulationExperimentId
+  );
+  const selectedLabel = selectedSimulation?.label ?? "Select simulation";
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx10("style", { children: MENU_CSS2 }),
+    /* @__PURE__ */ jsxs7(DropdownMenu3.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx10(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          type: "button",
+          title: selectedLabel,
+          onPointerDown: (event) => event.stopPropagation(),
+          style: {
+            position: "absolute",
+            top: "16px",
+            left: "16px",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            maxWidth: "280px",
+            padding: "8px 12px",
+            backgroundColor: "#ffffff",
+            color: "#000000",
+            border: "none",
+            outline: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+            fontSize: "13px",
+            fontFamily: FONT_FAMILY3,
+            zIndex: zIndexMap.viewMenuIcon
+          },
+          children: [
+            /* @__PURE__ */ jsx10("span", { style: { color: "#888888", flexShrink: 0 }, children: "Simulation:" }),
+            /* @__PURE__ */ jsx10("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx10(ChevronDownIcon2, { className: "sv-simulation-chevron" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx10(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx10(
+        DropdownMenu3.Content,
+        {
+          style: contentStyles3,
+          side: "bottom",
+          align: "start",
+          sideOffset: 8,
+          collisionPadding: 10,
+          children: simulationLabels.map(({ simulation, label }) => {
+            const selected = simulation.simulation_experiment_id === selectedSimulationExperimentId;
+            return /* @__PURE__ */ jsxs7(
+              DropdownMenu3.Item,
+              {
+                className: "sv-simulation-item",
+                style: itemStyles3,
+                title: label,
+                onSelect: (event) => event.preventDefault(),
+                onPointerUp: () => {
+                  onSelectSimulation(simulation.simulation_experiment_id);
+                  setOpen(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx10("span", { style: iconSlotStyles3, children: selected && /* @__PURE__ */ jsx10(CheckIcon3, {}) }),
+                  /* @__PURE__ */ jsx10("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: label })
+                ]
+              },
+              simulation.simulation_experiment_id
+            );
+          })
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// lib/components/AnalogSimulationViewer.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_RENDER_WIDTH = 1200;
 var DEFAULT_RENDER_ASPECT_RATIO = 1;
 var AnalogSimulationViewer = ({
@@ -2371,18 +2553,20 @@ var AnalogSimulationViewer = ({
   colorOverrides,
   width,
   height,
-  className
+  className,
+  hideSchematic = false,
+  onSimulationChange
 }) => {
-  const [circuitJson, setCircuitJson] = useState7(null);
-  const [isLoading, setIsLoading] = useState7(true);
-  const [error, setError] = useState7(null);
-  const [svgObjectUrl, setSvgObjectUrl] = useState7(null);
+  const [circuitJson, setCircuitJson] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(true);
+  const [error, setError] = useState8(null);
+  const [svgObjectUrl, setSvgObjectUrl] = useState8(null);
   const containerRef = useRef9(null);
   const imgRef = useRef9(null);
   const { containerWidth } = useResizeHandling(
     containerRef
   );
-  const [isDragging, setIsDragging] = useState7(false);
+  const [isDragging, setIsDragging] = useState8(false);
   const {
     ref: transformRef,
     cancelDrag: _cancelDrag,
@@ -2403,36 +2587,55 @@ var AnalogSimulationViewer = ({
     setCircuitJson(inputCircuitJson);
     setIsLoading(false);
   }, [inputCircuitJson]);
-  const simulationExperimentId = useMemo5(() => {
-    if (!circuitJson) return null;
-    const simulationElement = circuitJson.find(
-      (el) => el.type === "simulation_experiment"
+  const simulationExperiments = useMemo5(() => {
+    if (!circuitJson) return [];
+    return circuitJson.filter(
+      (element) => element.type === "simulation_experiment"
     );
-    return simulationElement?.simulation_experiment_id || null;
   }, [circuitJson]);
+  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState8(null);
+  const simulationExperimentId = (selectedSimulationExperimentId && simulationExperiments.some(
+    (simulation) => simulation.simulation_experiment_id === selectedSimulationExperimentId
+  ) ? selectedSimulationExperimentId : simulationExperiments[0]?.simulation_experiment_id) ?? null;
+  useEffect12(() => {
+    if (simulationExperimentId !== selectedSimulationExperimentId) {
+      setSelectedSimulationExperimentId(simulationExperimentId);
+    }
+  }, [simulationExperimentId, selectedSimulationExperimentId]);
+  const handleSelectSimulation = (nextSimulationExperimentId) => {
+    setSelectedSimulationExperimentId(nextSimulationExperimentId);
+    onSimulationChange?.(nextSimulationExperimentId);
+  };
   const simulationVoltageGraphIds = useMemo5(() => {
     if (!circuitJson) return [];
-    return circuitJson.filter((el) => el.type === "simulation_transient_voltage_graph").map((el) => el.simulation_transient_voltage_graph_id);
-  }, [circuitJson]);
+    return circuitJson.flatMap(
+      (element) => element.type === "simulation_transient_voltage_graph" && element.simulation_experiment_id === simulationExperimentId ? [element.simulation_transient_voltage_graph_id] : []
+    );
+  }, [circuitJson, simulationExperimentId]);
   const simulationCurrentGraphIds = useMemo5(() => {
     if (!circuitJson) return [];
-    return circuitJson.filter((el) => el.type === "simulation_transient_current_graph").map((el) => el.simulation_transient_current_graph_id);
-  }, [circuitJson]);
+    return circuitJson.flatMap(
+      (element) => element.type === "simulation_transient_current_graph" && element.simulation_experiment_id === simulationExperimentId ? [element.simulation_transient_current_graph_id] : []
+    );
+  }, [circuitJson, simulationExperimentId]);
   const simulationSvg = useMemo5(() => {
     if (!circuitJson || !effectiveWidth || !effectiveHeight || !simulationExperimentId)
       return "";
     try {
-      return convertCircuitJsonToSchematicSimulationSvg({
+      const simulationOptions = {
         circuitJson,
         simulation_experiment_id: simulationExperimentId,
         simulation_transient_current_graph_ids: simulationCurrentGraphIds,
         simulation_transient_voltage_graph_ids: simulationVoltageGraphIds,
         width: effectiveWidth,
-        height: effectiveHeight,
+        height: effectiveHeight
+      };
+      return hideSchematic ? convertCircuitJsonToSimulationGraphSvg(simulationOptions) : convertCircuitJsonToSchematicSimulationSvg({
+        ...simulationOptions,
         schematicOptions: { colorOverrides }
       });
-    } catch (fallbackErr) {
-      console.error("Failed to generate fallback schematic SVG:", fallbackErr);
+    } catch (error2) {
+      console.error("Failed to generate simulation SVG:", error2);
       return "";
     }
   }, [
@@ -2440,6 +2643,7 @@ var AnalogSimulationViewer = ({
     effectiveWidth,
     effectiveHeight,
     colorOverrides,
+    hideSchematic,
     simulationExperimentId,
     simulationCurrentGraphIds,
     simulationVoltageGraphIds
@@ -2489,7 +2693,7 @@ var AnalogSimulationViewer = ({
     };
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         style: {
@@ -2509,7 +2713,7 @@ var AnalogSimulationViewer = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         style: {
@@ -2524,15 +2728,15 @@ var AnalogSimulationViewer = ({
           ...containerStyle
         },
         className,
-        children: /* @__PURE__ */ jsxs7("div", { style: { textAlign: "center", padding: "20px" }, children: [
-          /* @__PURE__ */ jsx10("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
-          /* @__PURE__ */ jsx10("div", { style: { fontSize: "14px" }, children: error })
+        children: /* @__PURE__ */ jsxs8("div", { style: { textAlign: "center", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx11("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
+          /* @__PURE__ */ jsx11("div", { style: { fontSize: "14px" }, children: error })
         ] })
       }
     );
   }
   if (!simulationSvg) {
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         style: {
@@ -2548,11 +2752,11 @@ var AnalogSimulationViewer = ({
         },
         className,
         children: [
-          /* @__PURE__ */ jsx10("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
-          /* @__PURE__ */ jsxs7("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
+          /* @__PURE__ */ jsx11("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
+          /* @__PURE__ */ jsxs8("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
             "Use",
             " ",
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx11(
               "code",
               {
                 style: {
@@ -2572,7 +2776,7 @@ var AnalogSimulationViewer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       ref: (node) => {
@@ -2590,35 +2794,45 @@ var AnalogSimulationViewer = ({
       className,
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
-      children: svgObjectUrl ? /* @__PURE__ */ jsx10(
-        "img",
-        {
-          ref: imgRef,
-          src: svgObjectUrl,
-          alt: "Circuit Simulation",
-          style: {
-            transformOrigin: "0 0",
-            width: "100%",
-            height: "100%",
-            display: "block",
-            objectFit: "contain"
+      children: [
+        /* @__PURE__ */ jsx11(
+          AnalogSimulationSelector,
+          {
+            simulations: simulationExperiments,
+            selectedSimulationExperimentId: simulationExperimentId,
+            onSelectSimulation: handleSelectSimulation
           }
-        }
-      ) : /* @__PURE__ */ jsx10(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            height: "100%",
-            minHeight: "300px",
-            color: "#666",
-            fontFamily: "sans-serif"
-          },
-          children: "Failed to render SVG"
-        }
-      )
+        ),
+        svgObjectUrl ? /* @__PURE__ */ jsx11(
+          "img",
+          {
+            ref: imgRef,
+            src: svgObjectUrl,
+            alt: "Circuit Simulation",
+            style: {
+              transformOrigin: "0 0",
+              width: "100%",
+              height: "100%",
+              display: "block",
+              objectFit: "contain"
+            }
+          }
+        ) : /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%",
+              minHeight: "300px",
+              color: "#666",
+              fontFamily: "sans-serif"
+            },
+            children: "Failed to render SVG"
+          }
+        )
+      ]
     }
   );
 };