@tscircuit/schematic-viewer 2.0.68 → 2.0.69

package/dist/index.d.ts

@@ -17,6 +17,8 @@ interface Props$1 {
     colorOverrides?: ColorOverrides;
     spiceSimulationEnabled?: boolean;
     disableGroups?: boolean;
+    /** Fade unrelated nets/chips when hovering a wire or net label. Default true. */
+    netHoverHighlightEnabled?: boolean;
     css?: string;
     className?: string;
     onSchematicComponentClicked?: (options: {
@@ -31,7 +33,7 @@ interface Props$1 {
     /** Called when the active schematic sheet changes (multi-sheet circuits). */
     onSchematicSheetChange?: (schematicSheetId: string) => void;
 }
-declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, colorOverrides, spiceSimulationEnabled, disableGroups, onSchematicComponentClicked, showSchematicPorts, onSchematicPortClicked, onSchematicSheetChange, css, className, }: Props$1) => react.JSX.Element;
+declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, colorOverrides, spiceSimulationEnabled, disableGroups, netHoverHighlightEnabled, onSchematicComponentClicked, showSchematicPorts, onSchematicPortClicked, onSchematicSheetChange, css, className, }: Props$1) => react.JSX.Element;
 
 interface BoundingBoxBounds {
     minX: number;

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   convertCircuitJsonToSchematicSvg
 } from "circuit-to-svg";
-import { su as su6 } from "@tscircuit/soup-util";
+import { su as su7 } from "@tscircuit/soup-util";
 
 // lib/hooks/useChangeSchematicComponentLocationsInSvg.ts
 import "@tscircuit/soup-util";
@@ -461,6 +461,125 @@ function calculateGroupBounds(components, svg) {
   return bounds;
 }
 
+// lib/hooks/useSchematicNetHover.ts
+import { su as su4 } from "@tscircuit/soup-util";
+import { useEffect as useEffect4 } from "react";
+var FADED_CLASS = "sch-net-faded";
+var TRACE_SELECTOR = "g.trace[data-subcircuit-connectivity-map-key], g.trace-overlays[data-subcircuit-connectivity-map-key]";
+var NET_LABEL_SELECTOR = "[data-schematic-net-label-id]";
+var useSchematicNetHover = ({
+  svgDivRef,
+  circuitJson,
+  circuitJsonKey,
+  enabled
+}) => {
+  useEffect4(() => {
+    const svgDiv = svgDivRef.current;
+    if (!enabled || !svgDiv) return;
+    const { componentIdToKeys, netLabelIdToKey } = buildNetRegistry(circuitJson);
+    let netElements = [];
+    const triggerNetKeys = /* @__PURE__ */ new Map();
+    let hoveredNetKey = null;
+    const collectNetElements = () => {
+      for (const { el } of netElements) el.classList.remove(FADED_CLASS);
+      netElements = [];
+      triggerNetKeys.clear();
+      hoveredNetKey = null;
+      const svg = svgDiv.querySelector("svg");
+      if (!svg) return;
+      for (const el of Array.from(svg.querySelectorAll(TRACE_SELECTOR))) {
+        const key = el.getAttribute("data-subcircuit-connectivity-map-key");
+        const keys = /* @__PURE__ */ new Set();
+        if (key) {
+          keys.add(key);
+          triggerNetKeys.set(el, key);
+        }
+        netElements.push({ el, keys });
+      }
+      for (const el of Array.from(
+        svg.querySelectorAll("g[data-schematic-component-id]")
+      )) {
+        const id = el.getAttribute("data-schematic-component-id");
+        netElements.push({ el, keys: componentIdToKeys.get(id) ?? /* @__PURE__ */ new Set() });
+      }
+      for (const el of Array.from(svg.querySelectorAll(NET_LABEL_SELECTOR))) {
+        const key = netLabelIdToKey.get(
+          el.getAttribute("data-schematic-net-label-id")
+        );
+        const keys = /* @__PURE__ */ new Set();
+        if (key) {
+          keys.add(key);
+          triggerNetKeys.set(el, key);
+        }
+        netElements.push({ el, keys });
+      }
+    };
+    const highlightNet = (key) => {
+      if (key === hoveredNetKey) return;
+      hoveredNetKey = key;
+      for (const { el, keys } of netElements) {
+        el.classList.toggle(FADED_CLASS, key !== null && !keys.has(key));
+      }
+    };
+    const handleMouseOver = (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) {
+        highlightNet(null);
+        return;
+      }
+      const trigger = target.closest(`${TRACE_SELECTOR}, ${NET_LABEL_SELECTOR}`);
+      if (!trigger) {
+        highlightNet(null);
+        return;
+      }
+      highlightNet(triggerNetKeys.get(trigger) ?? null);
+    };
+    const handleMouseLeave = () => highlightNet(null);
+    collectNetElements();
+    svgDiv.addEventListener("mouseover", handleMouseOver);
+    svgDiv.addEventListener("mouseleave", handleMouseLeave);
+    const observer = new MutationObserver(collectNetElements);
+    observer.observe(svgDiv, { childList: true });
+    return () => {
+      observer.disconnect();
+      svgDiv.removeEventListener("mouseover", handleMouseOver);
+      svgDiv.removeEventListener("mouseleave", handleMouseLeave);
+      for (const { el } of netElements) el.classList.remove(FADED_CLASS);
+    };
+  }, [svgDivRef, circuitJsonKey, enabled]);
+};
+function buildNetRegistry(circuitJson) {
+  const cju = su4(circuitJson);
+  const srcCompToSchComp = /* @__PURE__ */ new Map();
+  for (const c of cju.schematic_component.list()) {
+    if (c.source_component_id) {
+      srcCompToSchComp.set(c.source_component_id, c.schematic_component_id);
+    }
+  }
+  const componentIdToKeys = /* @__PURE__ */ new Map();
+  for (const sourceTrace of cju.source_trace.list()) {
+    const key = sourceTrace.subcircuit_connectivity_map_key;
+    if (!key) continue;
+    for (const portId of sourceTrace.connected_source_port_ids ?? []) {
+      const schCompId = srcCompToSchComp.get(
+        cju.source_port.get(portId)?.source_component_id ?? ""
+      );
+      if (!schCompId) continue;
+      if (!componentIdToKeys.has(schCompId)) {
+        componentIdToKeys.set(schCompId, /* @__PURE__ */ new Set());
+      }
+      componentIdToKeys.get(schCompId).add(key);
+    }
+  }
+  const netLabelIdToKey = /* @__PURE__ */ new Map();
+  for (const label of cju.schematic_net_label.list()) {
+    if (!label.source_net_id) continue;
+    const key = cju.source_net.get(label.source_net_id)?.subcircuit_connectivity_map_key ?? label.source_net_id;
+    netLabelIdToKey.set(label.schematic_net_label_id, key);
+  }
+  return { componentIdToKeys, netLabelIdToKey };
+}
+
 // lib/utils/debug.ts
 import Debug from "debug";
 var debug = Debug("schematic-viewer");
@@ -470,7 +589,7 @@ var enableDebug = () => {
 var debug_default = debug;
 
 // lib/components/SchematicViewer.tsx
-import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo5, useRef as useRef8, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo5, useRef as useRef8, useState as useState8 } from "react";
 import {
   fromString,
   identity,
@@ -479,11 +598,11 @@ import {
 import { useMouseMatrixTransform } from "use-mouse-matrix-transform";
 
 // lib/hooks/use-resize-handling.ts
-import { useEffect as useEffect4, useState } from "react";
+import { useEffect as useEffect5, useState } from "react";
 var useResizeHandling = (containerRef) => {
   const [containerWidth, setContainerWidth] = useState(0);
   const [containerHeight, setContainerHeight] = useState(0);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!containerRef.current) return;
     const updateDimensions = () => {
       const rect = containerRef.current?.getBoundingClientRect();
@@ -503,8 +622,8 @@ var useResizeHandling = (containerRef) => {
 };
 
 // lib/hooks/useComponentDragging.ts
-import { su as su4 } from "@tscircuit/soup-util";
-import { useCallback, useEffect as useEffect5, useRef as useRef3, useState as useState2 } from "react";
+import { su as su5 } from "@tscircuit/soup-util";
+import { useCallback, useEffect as useEffect6, useRef as useRef3, useState as useState2 } from "react";
 import { compose as compose2 } from "transformation-matrix";
 var debug2 = debug_default.extend("useComponentDragging");
 var useComponentDragging = ({
@@ -527,7 +646,7 @@ var useComponentDragging = ({
   const componentPositionsRef = useRef3(
     /* @__PURE__ */ new Map()
   );
-  useEffect5(() => {
+  useEffect6(() => {
     editEvents.forEach((event) => {
       if ("edit_event_type" in event && event.edit_event_type === "edit_schematic_component_location" && !event.in_progress) {
         componentPositionsRef.current.set(event.schematic_component_id, {
@@ -548,7 +667,7 @@ var useComponentDragging = ({
       );
       if (!schematic_component_id) return false;
       if (cancelDrag) cancelDrag();
-      const schematic_component = su4(circuitJson).schematic_component.get(
+      const schematic_component = su5(circuitJson).schematic_component.get(
         schematic_component_id
       );
       if (!schematic_component) return false;
@@ -664,7 +783,7 @@ var useComponentDragging = ({
   }, [onEditEvent]);
   const handleMouseUp = useCallback(() => endDrag(), [endDrag]);
   const handleTouchEnd = useCallback(() => endDrag(), [endDrag]);
-  useEffect5(() => {
+  useEffect6(() => {
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
     window.addEventListener("touchmove", handleTouchMove, { passive: false });
@@ -796,13 +915,13 @@ var GridIcon = ({
 
 // lib/components/ViewMenu.tsx
 import { useMemo } from "react";
-import { su as su5 } from "@tscircuit/soup-util";
+import { su as su6 } from "@tscircuit/soup-util";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.67",
+  version: "2.0.68",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -832,7 +951,7 @@ var package_default = {
     "react-dom": "^19.1.0",
     "react-reconciler": "^0.31.0",
     semver: "^7.7.2",
-    tscircuit: "^0.0.1972",
+    tscircuit: "^0.0.2012",
     tsup: "^8.3.5",
     vite: "^6.0.3"
   },
@@ -976,13 +1095,13 @@ var ViewMenu = ({
   const hasGroups = useMemo(() => {
     if (!circuitJson || circuitJson.length === 0) return false;
     try {
-      const sourceGroups = su5(circuitJson).source_group?.list() || [];
+      const sourceGroups = su6(circuitJson).source_group?.list() || [];
       if (sourceGroups.length > 0) return true;
-      const schematicComponents = su5(circuitJson).schematic_component?.list() || [];
+      const schematicComponents = su6(circuitJson).schematic_component?.list() || [];
       if (schematicComponents.length > 1) {
         const componentTypes = /* @__PURE__ */ new Set();
         for (const comp of schematicComponents) {
-          const sourceComp = su5(circuitJson).source_component.get(
+          const sourceComp = su6(circuitJson).source_component.get(
             comp.source_component_id
           );
           if (sourceComp?.ftype) {
@@ -1312,7 +1431,7 @@ var SpicePlot = ({
 };
 
 // lib/components/SpiceSimulationOverlay.tsx
-import { useEffect as useEffect6, useState as useState3 } from "react";
+import { useEffect as useEffect7, useState as useState3 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var SpiceSimulationOverlay = ({
   spiceString,
@@ -1331,7 +1450,7 @@ var SpiceSimulationOverlay = ({
   const [durationDraft, setDurationDraft] = useState3(
     String(simOptions.duration)
   );
-  useEffect6(() => {
+  useEffect7(() => {
     setStartTimeDraft(String(simOptions.startTime));
     setDurationDraft(String(simOptions.duration));
   }, [simOptions.startTime, simOptions.duration]);
@@ -1578,7 +1697,7 @@ var SpiceSimulationOverlay = ({
 };
 
 // lib/hooks/useSpiceSimulation.ts
-import { useState as useState4, useEffect as useEffect7 } from "react";
+import { useState as useState4, useEffect as useEffect8 } from "react";
 
 // lib/workers/spice-simulation.worker.blob.js
 var b64 = "dmFyIGU9bnVsbCxzPWFzeW5jKCk9Pihhd2FpdCBpbXBvcnQoImh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZWVjaXJjdWl0LWVuZ2luZUAxLjUuMi8rZXNtIikpLlNpbXVsYXRpb24sYz1hc3luYygpPT57aWYoZSYmZS5pc0luaXRpYWxpemVkKCkpcmV0dXJuO2xldCBpPWF3YWl0IHMoKTtlPW5ldyBpLGF3YWl0IGUuc3RhcnQoKX07c2VsZi5vbm1lc3NhZ2U9YXN5bmMgaT0+e3RyeXtpZihhd2FpdCBjKCksIWUpdGhyb3cgbmV3IEVycm9yKCJTaW11bGF0aW9uIG5vdCBpbml0aWFsaXplZCIpO2xldCB0PWkuZGF0YS5zcGljZVN0cmluZyxhPXQubWF0Y2goL3dyZGF0YVxzKyhcUyspXHMrKC4qKS9pKTtpZihhKXtsZXQgbz1gLnByb2JlICR7YVsyXS50cmltKCkuc3BsaXQoL1xzKy8pLmpvaW4oIiAiKX1gO3Q9dC5yZXBsYWNlKC93cmRhdGEuKi9pLG8pfWVsc2UgaWYoIXQubWF0Y2goL1wucHJvYmUvaSkpdGhyb3cgdC5tYXRjaCgvcGxvdFxzKyguKikvaSk/bmV3IEVycm9yKCJUaGUgJ3Bsb3QnIGNvbW1hbmQgaXMgbm90IHN1cHBvcnRlZCBmb3IgZGF0YSBleHRyYWN0aW9uLiBQbGVhc2UgdXNlICd3cmRhdGEgPGZpbGVuYW1lPiA8dmFyMT4gLi4uJyBvciAnLnByb2JlIDx2YXIxPiAuLi4nIGluc3RlYWQuIik6bmV3IEVycm9yKCJObyAnLnByb2JlJyBvciAnd3JkYXRhJyBjb21tYW5kIGZvdW5kIGluIFNQSUNFIGZpbGUuIFVzZSAnd3JkYXRhIDxmaWxlbmFtZT4gPHZhcjE+IC4uLicgdG8gc3BlY2lmeSBvdXRwdXQuIik7ZS5zZXROZXRMaXN0KHQpO2xldCBuPWF3YWl0IGUucnVuU2ltKCk7c2VsZi5wb3N0TWVzc2FnZSh7dHlwZToicmVzdWx0IixyZXN1bHQ6bn0pfWNhdGNoKHQpe3NlbGYucG9zdE1lc3NhZ2Uoe3R5cGU6ImVycm9yIixlcnJvcjp0Lm1lc3NhZ2V9KX19Owo=";
@@ -1633,7 +1752,7 @@ var useSpiceSimulation = (spiceString) => {
   const [nodes, setNodes] = useState4([]);
   const [isLoading, setIsLoading] = useState4(true);
   const [error, setError] = useState4(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!spiceString) {
       setIsLoading(false);
       setPlotData([]);
@@ -1812,7 +1931,7 @@ import {
   createContext,
   useCallback as useCallback3,
   useContext,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo3,
   useRef as useRef4
 } from "react";
@@ -1896,7 +2015,7 @@ var MouseTracker = ({ children }) => {
   const isHovering = useCallback3((id) => {
     return storeRef.current.hoveringIds.has(id);
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     const handlePointerPosition = (event) => {
       const { clientX, clientY } = event;
       const pointer = storeRef.current.pointer;
@@ -1984,12 +2103,12 @@ var MouseTracker = ({ children }) => {
 };
 
 // lib/components/SchematicComponentMouseTarget.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useRef as useRef6, useState as useState5 } from "react";
 
 // lib/hooks/useMouseEventsOverBoundingBox.ts
 import {
   useContext as useContext2,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useId,
   useMemo as useMemo4,
   useRef as useRef5,
@@ -2011,7 +2130,7 @@ var useMouseEventsOverBoundingBox = (options) => {
     },
     []
   );
-  useEffect9(() => {
+  useEffect10(() => {
     context.registerBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -2020,7 +2139,7 @@ var useMouseEventsOverBoundingBox = (options) => {
       context.unregisterBoundingBox(id);
     };
   }, [context, handleClick, id]);
-  useEffect9(() => {
+  useEffect10(() => {
     context.updateBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -2100,10 +2219,10 @@ var SchematicComponentMouseTarget = ({
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect10(() => {
+  useEffect11(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect10(() => {
+  useEffect11(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -2148,7 +2267,7 @@ var SchematicComponentMouseTarget = ({
     bounds,
     onClick: onComponentClick ? handleClick : void 0
   });
-  useEffect10(() => {
+  useEffect11(() => {
     if (onHoverChange) {
       onHoverChange(componentId, hovering);
     }
@@ -2175,7 +2294,7 @@ var SchematicComponentMouseTarget = ({
 };
 
 // lib/components/SchematicPortMouseTarget.tsx
-import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef7, useState as useState6 } from "react";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var areMeasurementsEqual2 = (a, b) => {
   if (!a && !b) return true;
@@ -2234,10 +2353,10 @@ var SchematicPortMouseTarget = ({
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect11(() => {
+  useEffect12(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect11(() => {
+  useEffect12(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -2282,7 +2401,7 @@ var SchematicPortMouseTarget = ({
     bounds,
     onClick: onPortClick ? handleClick : void 0
   });
-  useEffect11(() => {
+  useEffect12(() => {
     if (onHoverChange) {
       onHoverChange(portId, hovering);
     }
@@ -2516,6 +2635,7 @@ var SchematicViewer = ({
   colorOverrides,
   spiceSimulationEnabled = false,
   disableGroups = false,
+  netHoverHighlightEnabled = true,
   onSchematicComponentClicked,
   showSchematicPorts = false,
   onSchematicPortClicked,
@@ -2561,7 +2681,7 @@ var SchematicViewer = ({
       return defaultSheetId;
     }
   );
-  useEffect12(() => {
+  useEffect13(() => {
     const stillExists = selectedSheetId !== void 0 && schematicSheets.some((s) => s.schematic_sheet_id === selectedSheetId);
     if (!stillExists) {
       setSelectedSheetId(defaultSheetId);
@@ -2591,7 +2711,7 @@ var SchematicViewer = ({
     spiceSimOptions.duration
   ]);
   const [hasSpiceSimRun, setHasSpiceSimRun] = useState8(false);
-  useEffect12(() => {
+  useEffect13(() => {
     setHasSpiceSimRun(false);
   }, [circuitJsonKey]);
   const {
@@ -2642,7 +2762,7 @@ var SchematicViewer = ({
   const touchStartRef = useRef8(null);
   const schematicComponentIds = useMemo5(() => {
     try {
-      const components = su6(circuitJson).schematic_component?.list() ?? [];
+      const components = su7(circuitJson).schematic_component?.list() ?? [];
       return components.filter(
         (component) => !activeSheetId || component.schematic_sheet_id === activeSheetId
       ).map((component) => component.schematic_component_id);
@@ -2654,12 +2774,12 @@ var SchematicViewer = ({
   const schematicPortsInfo = useMemo5(() => {
     if (!showSchematicPorts) return [];
     try {
-      const ports = (su6(circuitJson).schematic_port?.list() ?? []).filter(
+      const ports = (su7(circuitJson).schematic_port?.list() ?? []).filter(
         (port) => !activeSheetId || port.schematic_sheet_id === activeSheetId
       );
       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 sourcePort = su7(circuitJson).source_port.get(port.source_port_id);
+        const sourceComponent = sourcePort?.source_component_id ? su7(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 {
@@ -2693,7 +2813,7 @@ var SchematicViewer = ({
   };
   const [internalEditEvents, setInternalEditEvents] = useState8([]);
   const circuitJsonRef = useRef8(circuitJson);
-  useEffect12(() => {
+  useEffect13(() => {
     const circuitHash = getCircuitHash(circuitJson);
     const circuitHashRef = getCircuitHash(circuitJsonRef.current);
     if (circuitHash !== circuitHashRef) {
@@ -2798,8 +2918,14 @@ var SchematicViewer = ({
     circuitJsonKey: `${circuitJsonKey}_${activeSheetId ?? ""}`,
     showGroups: showSchematicGroups && !disableGroups
   });
+  useSchematicNetHover({
+    svgDivRef,
+    circuitJson,
+    circuitJsonKey: `${circuitJsonKey}_${activeSheetId ?? ""}`,
+    enabled: netHoverHighlightEnabled
+  });
   const handleComponentTouchStartRef = useRef8(handleComponentTouchStart);
-  useEffect12(() => {
+  useEffect13(() => {
     handleComponentTouchStartRef.current = handleComponentTouchStart;
   }, [handleComponentTouchStart]);
   const svgDiv = useMemo5(
@@ -2829,6 +2955,8 @@ var SchematicViewer = ({
     ]
   );
   return /* @__PURE__ */ jsxs8(MouseTracker, { children: [
+    netHoverHighlightEnabled && /* @__PURE__ */ jsx13("style", { children: `.sch-net-faded { opacity: 0.35; }
+            svg :is(g.trace, g.trace-overlays, g[data-schematic-component-id], [data-schematic-net-label-id]) { transition: opacity 0.12s ease-in-out; }` }),
     onSchematicComponentClicked && /* @__PURE__ */ jsx13("style", { children: `.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }` }),
     onSchematicPortClicked && /* @__PURE__ */ jsx13("style", { children: `[data-schematic-port-id]:hover { cursor: pointer !important; }` }),
     /* @__PURE__ */ jsxs8(
@@ -3014,7 +3142,7 @@ var SchematicViewer = ({
 import {
   convertCircuitJsonToSchematicSimulationSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect13, useState as useState9, useMemo as useMemo6, useRef as useRef9 } from "react";
+import { useEffect as useEffect14, useState as useState9, 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 jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -3052,7 +3180,7 @@ var AnalogSimulationViewer = ({
   const renderAspectRatio = width && height ? width / height : DEFAULT_RENDER_ASPECT_RATIO;
   const effectiveWidth = width || (height ? height * renderAspectRatio : containerWidth) || DEFAULT_RENDER_WIDTH;
   const effectiveHeight = height || effectiveWidth / renderAspectRatio;
-  useEffect13(() => {
+  useEffect14(() => {
     setIsLoading(true);
     setError(null);
     setCircuitJson(inputCircuitJson);
@@ -3099,7 +3227,7 @@ var AnalogSimulationViewer = ({
     simulationCurrentGraphIds,
     simulationVoltageGraphIds
   ]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!simulationSvg) {
       setSvgObjectUrl(null);
       return;
@@ -3129,7 +3257,7 @@ var AnalogSimulationViewer = ({
   const handleTouchStart = (_e) => {
     setIsDragging(true);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const handleMouseUp = () => {
       setIsDragging(false);
     };