@tscircuit/schematic-viewer 2.0.54 → 2.0.56

package/CLAUDE.md

@@ -0,0 +1 @@
+- Use `bun`/`bunx` instead of `npm`/`npx`

package/dist/index.d.ts

@@ -21,8 +21,13 @@ interface Props$1 {
         schematicComponentId: string;
         event: MouseEvent;
     }) => void;
+    showSchematicPorts?: boolean;
+    onSchematicPortClicked?: (options: {
+        schematicPortId: string;
+        event: MouseEvent;
+    }) => void;
 }
-declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, colorOverrides, spiceSimulationEnabled, disableGroups, onSchematicComponentClicked, }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, colorOverrides, spiceSimulationEnabled, disableGroups, onSchematicComponentClicked, showSchematicPorts, onSchematicPortClicked, }: Props$1) => react_jsx_runtime.JSX.Element;
 
 interface BoundingBoxBounds {
     minX: number;

package/dist/index.js

@@ -470,7 +470,7 @@ var enableDebug = () => {
 var debug_default = debug;
 
 // lib/components/SchematicViewer.tsx
-import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef8, useState as useState7 } from "react";
 import {
   fromString,
   identity,
@@ -693,7 +693,8 @@ var zIndexMap = {
   viewMenu: 55,
   viewMenuBackdrop: 54,
   clickToInteractOverlay: 100,
-  schematicComponentHoverOutline: 47
+  schematicComponentHoverOutline: 47,
+  schematicPortHoverOutline: 48
 };
 
 // lib/components/EditIcon.tsx
@@ -851,7 +852,7 @@ import { su as su5 } from "@tscircuit/soup-util";
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.53",
+  version: "2.0.55",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -2198,8 +2199,168 @@ var SchematicComponentMouseTarget = ({
   );
 };
 
+// lib/components/SchematicPortMouseTarget.tsx
+import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef7, useState as useState6 } from "react";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var areMeasurementsEqual2 = (a, b) => {
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  return Math.abs(a.bounds.minX - b.bounds.minX) < 0.5 && Math.abs(a.bounds.maxX - b.bounds.maxX) < 0.5 && Math.abs(a.bounds.minY - b.bounds.minY) < 0.5 && Math.abs(a.bounds.maxY - b.bounds.maxY) < 0.5 && Math.abs(a.rect.left - b.rect.left) < 0.5 && Math.abs(a.rect.top - b.rect.top) < 0.5 && Math.abs(a.rect.width - b.rect.width) < 0.5 && Math.abs(a.rect.height - b.rect.height) < 0.5;
+};
+var SchematicPortMouseTarget = ({
+  portId,
+  portLabel,
+  svgDivRef,
+  containerRef,
+  onPortClick,
+  onHoverChange,
+  showOutline,
+  circuitJsonKey
+}) => {
+  const [measurement, setMeasurement] = useState6(null);
+  const frameRef = useRef7(null);
+  const measure = useCallback5(() => {
+    frameRef.current = null;
+    const svgDiv = svgDivRef.current;
+    const container = containerRef.current;
+    if (!svgDiv || !container) {
+      setMeasurement((prev) => prev ? null : prev);
+      return;
+    }
+    const element = svgDiv.querySelector(
+      `[data-schematic-port-id="${portId}"]`
+    );
+    if (!element) {
+      setMeasurement((prev) => prev ? null : prev);
+      return;
+    }
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const padding = 4;
+    const nextMeasurement = {
+      bounds: {
+        minX: elementRect.left - padding,
+        maxX: elementRect.right + padding,
+        minY: elementRect.top - padding,
+        maxY: elementRect.bottom + padding
+      },
+      rect: {
+        left: elementRect.left - containerRect.left - padding,
+        top: elementRect.top - containerRect.top - padding,
+        width: elementRect.width + padding * 2,
+        height: elementRect.height + padding * 2
+      }
+    };
+    setMeasurement(
+      (prev) => areMeasurementsEqual2(prev, nextMeasurement) ? prev : nextMeasurement
+    );
+  }, [portId, containerRef, svgDivRef]);
+  const scheduleMeasure = useCallback5(() => {
+    if (frameRef.current !== null) return;
+    frameRef.current = window.requestAnimationFrame(measure);
+  }, [measure]);
+  useEffect11(() => {
+    scheduleMeasure();
+  }, [scheduleMeasure, circuitJsonKey]);
+  useEffect11(() => {
+    scheduleMeasure();
+    const svgDiv = svgDivRef.current;
+    const container = containerRef.current;
+    if (!svgDiv || !container) return;
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      scheduleMeasure();
+    }) : null;
+    resizeObserver?.observe(container);
+    resizeObserver?.observe(svgDiv);
+    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
+      scheduleMeasure();
+    }) : null;
+    mutationObserver?.observe(svgDiv, {
+      attributes: true,
+      attributeFilter: ["style", "transform"],
+      subtree: true,
+      childList: true
+    });
+    window.addEventListener("scroll", scheduleMeasure, true);
+    window.addEventListener("resize", scheduleMeasure);
+    return () => {
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      window.removeEventListener("scroll", scheduleMeasure, true);
+      window.removeEventListener("resize", scheduleMeasure);
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [scheduleMeasure, svgDivRef, containerRef]);
+  const handleClick = useCallback5(
+    (event) => {
+      if (onPortClick) {
+        onPortClick(portId, event);
+      }
+    },
+    [portId, onPortClick]
+  );
+  const bounds = measurement?.bounds ?? null;
+  const { hovering } = useMouseEventsOverBoundingBox({
+    bounds,
+    onClick: onPortClick ? handleClick : void 0
+  });
+  useEffect11(() => {
+    if (onHoverChange) {
+      onHoverChange(portId, hovering);
+    }
+  }, [hovering, portId, onHoverChange]);
+  if (!measurement || !showOutline) {
+    return null;
+  }
+  const rect = measurement.rect;
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+          border: hovering ? "1.5px solid rgba(255, 153, 51, 0.9)" : "1.5px solid rgba(255, 153, 51, 0.3)",
+          backgroundColor: hovering ? "rgba(255, 153, 51, 0.15)" : "rgba(255, 153, 51, 0.05)",
+          borderRadius: "50%",
+          pointerEvents: "none",
+          zIndex: zIndexMap.schematicPortHoverOutline,
+          transition: "border-color 0.15s, background-color 0.15s"
+        }
+      }
+    ),
+    hovering && portLabel && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: rect.left + rect.width / 2,
+          top: rect.top - 24,
+          transform: "translateX(-50%)",
+          backgroundColor: "rgba(0, 0, 0, 0.85)",
+          color: "white",
+          padding: "4px 8px",
+          borderRadius: "4px",
+          fontSize: "12px",
+          fontFamily: "monospace",
+          whiteSpace: "nowrap",
+          pointerEvents: "none",
+          zIndex: zIndexMap.schematicPortHoverOutline + 1
+        },
+        children: portLabel
+      }
+    )
+  ] });
+};
+
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
@@ -2213,13 +2374,15 @@ var SchematicViewer = ({
   colorOverrides,
   spiceSimulationEnabled = false,
   disableGroups = false,
-  onSchematicComponentClicked
+  onSchematicComponentClicked,
+  showSchematicPorts = false,
+  onSchematicPortClicked
 }) => {
   if (debug3) {
     enableDebug();
   }
-  const [showSpiceOverlay, setShowSpiceOverlay] = useState6(false);
-  const [spiceSimOptions, setSpiceSimOptions] = useState6({
+  const [showSpiceOverlay, setShowSpiceOverlay] = useState7(false);
+  const [spiceSimOptions, setSpiceSimOptions] = useState7({
     showVoltage: true,
     showCurrent: false,
     startTime: 0,
@@ -2248,8 +2411,8 @@ var SchematicViewer = ({
     spiceSimOptions.startTime,
     spiceSimOptions.duration
   ]);
-  const [hasSpiceSimRun, setHasSpiceSimRun] = useState6(false);
-  useEffect11(() => {
+  const [hasSpiceSimRun, setHasSpiceSimRun] = useState7(false);
+  useEffect12(() => {
     setHasSpiceSimRun(false);
   }, [circuitJsonKey]);
   const {
@@ -2258,20 +2421,21 @@ var SchematicViewer = ({
     isLoading: isSpiceSimLoading,
     error: spiceSimError
   } = useSpiceSimulation(hasSpiceSimRun ? spiceString : null);
-  const [editModeEnabled, setEditModeEnabled] = useState6(defaultEditMode);
-  const [snapToGrid, setSnapToGrid] = useState6(true);
-  const [showGrid, setShowGrid] = useState6(debugGrid);
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState6(
+  const [editModeEnabled, setEditModeEnabled] = useState7(defaultEditMode);
+  const [snapToGrid, setSnapToGrid] = useState7(true);
+  const [showGridInternal, setShowGridInternal] = useState7(false);
+  const showGrid = debugGrid || showGridInternal;
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState7(
     !clickToInteractEnabled
   );
-  const [showViewMenu, setShowViewMenu] = useState6(false);
-  const [showSchematicGroups, setShowSchematicGroups] = useState6(() => {
+  const [showViewMenu, setShowViewMenu] = useState7(false);
+  const [showSchematicGroups, setShowSchematicGroups] = useState7(() => {
     if (disableGroups) return false;
     return getStoredBoolean("schematic_viewer_show_groups", false);
   });
-  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState6(false);
-  const hoveringComponentsRef = useRef7(/* @__PURE__ */ new Set());
-  const handleComponentHoverChange = useCallback5(
+  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState7(false);
+  const hoveringComponentsRef = useRef8(/* @__PURE__ */ new Set());
+  const handleComponentHoverChange = useCallback6(
     (componentId, isHovering) => {
       if (isHovering) {
         hoveringComponentsRef.current.add(componentId);
@@ -2282,8 +2446,21 @@ var SchematicViewer = ({
     },
     []
   );
-  const svgDivRef = useRef7(null);
-  const touchStartRef = useRef7(null);
+  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState7(false);
+  const hoveringPortsRef = useRef8(/* @__PURE__ */ new Set());
+  const handlePortHoverChange = useCallback6(
+    (portId, isHovering) => {
+      if (isHovering) {
+        hoveringPortsRef.current.add(portId);
+      } else {
+        hoveringPortsRef.current.delete(portId);
+      }
+      setIsHoveringClickablePort(hoveringPortsRef.current.size > 0);
+    },
+    []
+  );
+  const svgDivRef = useRef8(null);
+  const touchStartRef = useRef8(null);
   const schematicComponentIds = useMemo5(() => {
     try {
       return su6(circuitJson).schematic_component?.list()?.map((component) => component.schematic_component_id) ?? [];
@@ -2292,6 +2469,25 @@ var SchematicViewer = ({
       return [];
     }
   }, [circuitJsonKey, circuitJson]);
+  const schematicPortsInfo = useMemo5(() => {
+    if (!showSchematicPorts) return [];
+    try {
+      const ports = su6(circuitJson).schematic_port?.list() ?? [];
+      return ports.map((port) => {
+        const sourcePort = su6(circuitJson).source_port.get(port.source_port_id);
+        const sourceComponent = sourcePort?.source_component_id ? su6(circuitJson).source_component.get(sourcePort.source_component_id) : null;
+        const componentName = sourceComponent?.name ?? "?";
+        const pinLabel = port.display_pin_label ?? sourcePort?.pin_number ?? sourcePort?.name ?? "?";
+        return {
+          portId: port.source_port_id,
+          label: `${componentName}.${pinLabel}`
+        };
+      });
+    } catch (err) {
+      console.error("Failed to derive schematic port info", err);
+      return [];
+    }
+  }, [circuitJsonKey, circuitJson, showSchematicPorts]);
   const handleTouchStart = (e) => {
     const touch = e.touches[0];
     touchStartRef.current = {
@@ -2311,9 +2507,9 @@ var SchematicViewer = ({
     }
     touchStartRef.current = null;
   };
-  const [internalEditEvents, setInternalEditEvents] = useState6([]);
-  const circuitJsonRef = useRef7(circuitJson);
-  useEffect11(() => {
+  const [internalEditEvents, setInternalEditEvents] = useState7([]);
+  const circuitJsonRef = useRef8(circuitJson);
+  useEffect12(() => {
     const circuitHash = getCircuitHash(circuitJson);
     const circuitHashRef = getCircuitHash(circuitJsonRef.current);
     if (circuitHash !== circuitHashRef) {
@@ -2407,12 +2603,12 @@ var SchematicViewer = ({
     circuitJsonKey,
     showGroups: showSchematicGroups && !disableGroups
   });
-  const handleComponentTouchStartRef = useRef7(handleComponentTouchStart);
-  useEffect11(() => {
+  const handleComponentTouchStartRef = useRef8(handleComponentTouchStart);
+  useEffect12(() => {
     handleComponentTouchStartRef.current = handleComponentTouchStart;
   }, [handleComponentTouchStart]);
   const svgDiv = useMemo5(
-    () => /* @__PURE__ */ jsx11(
+    () => /* @__PURE__ */ jsx12(
       "div",
       {
         ref: svgDivRef,
@@ -2437,9 +2633,10 @@ var SchematicViewer = ({
       showSpiceOverlay
     ]
   );
-  return /* @__PURE__ */ jsxs6(MouseTracker, { children: [
-    onSchematicComponentClicked && /* @__PURE__ */ jsx11("style", { children: `.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }` }),
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(MouseTracker, { children: [
+    onSchematicComponentClicked && /* @__PURE__ */ jsx12("style", { children: `.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }` }),
+    onSchematicPortClicked && /* @__PURE__ */ jsx12("style", { children: `[data-schematic-port-id]:hover { cursor: pointer !important; }` }),
+    /* @__PURE__ */ jsxs7(
       "div",
       {
         ref: containerRef,
@@ -2447,7 +2644,7 @@ var SchematicViewer = ({
           position: "relative",
           backgroundColor: containerBackgroundColor,
           overflow: "hidden",
-          cursor: showSpiceOverlay ? "auto" : isDragging ? "grabbing" : clickToInteractEnabled && !isInteractionEnabled ? "pointer" : isHoveringClickableComponent && onSchematicComponentClicked ? "pointer" : "grab",
+          cursor: showSpiceOverlay ? "auto" : isDragging ? "grabbing" : clickToInteractEnabled && !isInteractionEnabled ? "pointer" : isHoveringClickableComponent && onSchematicComponentClicked ? "pointer" : isHoveringClickablePort && onSchematicPortClicked ? "pointer" : "grab",
           minHeight: "300px",
           ...containerStyle
         },
@@ -2480,7 +2677,7 @@ var SchematicViewer = ({
           handleTouchEnd(e);
         },
         children: [
-          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx11(
+          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx12(
             "div",
             {
               onClick: (e) => {
@@ -2499,7 +2696,7 @@ var SchematicViewer = ({
                 pointerEvents: "all",
                 touchAction: "pan-x pan-y pinch-zoom"
               },
-              children: /* @__PURE__ */ jsx11(
+              children: /* @__PURE__ */ jsx12(
                 "div",
                 {
                   style: {
@@ -2516,28 +2713,28 @@ var SchematicViewer = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             ViewMenuIcon,
             {
               active: showViewMenu,
               onClick: () => setShowViewMenu(!showViewMenu)
             }
           ),
-          editingEnabled && /* @__PURE__ */ jsx11(
+          editingEnabled && /* @__PURE__ */ jsx12(
             EditIcon,
             {
               active: editModeEnabled,
               onClick: () => setEditModeEnabled(!editModeEnabled)
             }
           ),
-          editingEnabled && editModeEnabled && /* @__PURE__ */ jsx11(
+          editingEnabled && editModeEnabled && /* @__PURE__ */ jsx12(
             GridIcon,
             {
               active: snapToGrid,
               onClick: () => setSnapToGrid(!snapToGrid)
             }
           ),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             ViewMenu,
             {
               circuitJson,
@@ -2552,11 +2749,11 @@ var SchematicViewer = ({
                 }
               },
               showGrid,
-              onToggleGrid: setShowGrid
+              onToggleGrid: setShowGridInternal
             }
           ),
-          spiceSimulationEnabled && /* @__PURE__ */ jsx11(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
-          showSpiceOverlay && /* @__PURE__ */ jsx11(
+          spiceSimulationEnabled && /* @__PURE__ */ jsx12(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
+          showSpiceOverlay && /* @__PURE__ */ jsx12(
             SpiceSimulationOverlay,
             {
               spiceString,
@@ -2573,7 +2770,7 @@ var SchematicViewer = ({
               hasRun: hasSpiceSimRun
             }
           ),
-          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx11(
+          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx12(
             SchematicComponentMouseTarget,
             {
               componentId,
@@ -2591,7 +2788,26 @@ var SchematicViewer = ({
             },
             componentId
           )),
-          svgDiv
+          svgDiv,
+          showSchematicPorts && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx12(
+            SchematicPortMouseTarget,
+            {
+              portId,
+              portLabel: label,
+              svgDivRef,
+              containerRef,
+              showOutline: true,
+              circuitJsonKey,
+              onHoverChange: handlePortHoverChange,
+              onPortClick: onSchematicPortClicked ? (id, event) => {
+                onSchematicPortClicked?.({
+                  schematicPortId: id,
+                  event
+                });
+              } : void 0
+            },
+            portId
+          ))
         ]
       }
     )
@@ -2602,10 +2818,10 @@ var SchematicViewer = ({
 import {
   convertCircuitJsonToSchematicSimulationSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect12, useState as useState7, useMemo as useMemo6, useRef as useRef8 } from "react";
+import { useEffect as useEffect13, useState as useState8, useMemo as useMemo6, useRef as useRef9 } from "react";
 import { useMouseMatrixTransform as useMouseMatrixTransform2 } from "use-mouse-matrix-transform";
 import { toString as transformToString2 } from "transformation-matrix";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var AnalogSimulationViewer = ({
   circuitJson: inputCircuitJson,
   containerStyle,
@@ -2614,16 +2830,16 @@ var AnalogSimulationViewer = ({
   height,
   className
 }) => {
-  const [circuitJson, setCircuitJson] = useState7(null);
-  const [isLoading, setIsLoading] = useState7(true);
-  const [error, setError] = useState7(null);
-  const [svgObjectUrl, setSvgObjectUrl] = useState7(null);
-  const containerRef = useRef8(null);
-  const imgRef = useRef8(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, containerHeight } = useResizeHandling(
     containerRef
   );
-  const [isDragging, setIsDragging] = useState7(false);
+  const [isDragging, setIsDragging] = useState8(false);
   const {
     ref: transformRef,
     cancelDrag: _cancelDrag,
@@ -2637,7 +2853,7 @@ var AnalogSimulationViewer = ({
   });
   const effectiveWidth = width || containerWidth || 1e3;
   const effectiveHeight = height || containerHeight || 600;
-  useEffect12(() => {
+  useEffect13(() => {
     setIsLoading(true);
     setError(null);
     setCircuitJson(inputCircuitJson);
@@ -2678,7 +2894,7 @@ var AnalogSimulationViewer = ({
     simulationExperimentId,
     simulationGraphIds
   ]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!simulationSvg) {
       setSvgObjectUrl(null);
       return;
@@ -2708,7 +2924,7 @@ var AnalogSimulationViewer = ({
   const handleTouchStart = (_e) => {
     setIsDragging(true);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     const handleMouseUp = () => {
       setIsDragging(false);
     };
@@ -2723,7 +2939,7 @@ var AnalogSimulationViewer = ({
     };
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         style: {
@@ -2743,7 +2959,7 @@ var AnalogSimulationViewer = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         style: {
@@ -2758,15 +2974,15 @@ var AnalogSimulationViewer = ({
           ...containerStyle
         },
         className,
-        children: /* @__PURE__ */ jsxs7("div", { style: { textAlign: "center", padding: "20px" }, children: [
-          /* @__PURE__ */ jsx12("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
-          /* @__PURE__ */ jsx12("div", { style: { fontSize: "14px" }, children: error })
+        children: /* @__PURE__ */ jsxs8("div", { style: { textAlign: "center", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx13("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
+          /* @__PURE__ */ jsx13("div", { style: { fontSize: "14px" }, children: error })
         ] })
       }
     );
   }
   if (!simulationSvg) {
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         style: {
@@ -2782,11 +2998,11 @@ var AnalogSimulationViewer = ({
         },
         className,
         children: [
-          /* @__PURE__ */ jsx12("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
-          /* @__PURE__ */ jsxs7("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
+          /* @__PURE__ */ jsx13("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
+          /* @__PURE__ */ jsxs8("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
             "Use",
             " ",
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "code",
               {
                 style: {
@@ -2806,7 +3022,7 @@ var AnalogSimulationViewer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       ref: (node) => {
@@ -2824,7 +3040,7 @@ var AnalogSimulationViewer = ({
       className,
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
-      children: svgObjectUrl ? /* @__PURE__ */ jsx12(
+      children: svgObjectUrl ? /* @__PURE__ */ jsx13(
         "img",
         {
           ref: imgRef,
@@ -2838,7 +3054,7 @@ var AnalogSimulationViewer = ({
             objectFit: "contain"
           }
         }
-      ) : /* @__PURE__ */ jsx12(
+      ) : /* @__PURE__ */ jsx13(
         "div",
         {
           style: {