@tscircuit/schematic-viewer 2.0.67 → 2.0.69

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 useState7 } 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 });
@@ -794,65 +913,15 @@ var GridIcon = ({
   );
 };
 
-// lib/components/ViewMenuIcon.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var ViewMenuIcon = ({
-  onClick,
-  active
-}) => {
-  const handleInteraction = (e) => {
-    e.preventDefault();
-    onClick();
-  };
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      onClick: handleInteraction,
-      onTouchEnd: handleInteraction,
-      title: active ? "Hide view menu" : "Show view menu",
-      style: {
-        position: "absolute",
-        top: "16px",
-        right: "16px",
-        backgroundColor: active ? "#4CAF50" : "#fff",
-        color: active ? "#fff" : "#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.viewMenuIcon
-      },
-      children: /* @__PURE__ */ jsxs2(
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: [
-            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "1" }),
-            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "5", r: "1" }),
-            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "19", r: "1" })
-          ]
-        }
-      )
-    }
-  );
-};
-
 // 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.66",
+  version: "2.0.68",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -882,7 +951,7 @@ var package_default = {
     "react-dom": "^19.1.0",
     "react-reconciler": "^0.31.0",
     semver: "^7.7.2",
-    tscircuit: "^0.0.1938",
+    tscircuit: "^0.0.2012",
     tsup: "^8.3.5",
     vite: "^6.0.3"
   },
@@ -892,6 +961,7 @@ var package_default = {
     "circuit-json-to-spice": "*"
   },
   dependencies: {
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "chart.js": "^4.5.0",
     debug: "^4.4.0",
     "performance-now": "^2.1.0",
@@ -900,13 +970,123 @@ var package_default = {
   }
 };
 
+// lib/components/ViewMenuIcon.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ViewMenuIcon = ({
+  active = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      title: active ? "Hide view menu" : "Show view menu",
+      ...props,
+      style: {
+        position: "absolute",
+        top: "16px",
+        right: "16px",
+        backgroundColor: active ? "#4CAF50" : "#fff",
+        color: active ? "#fff" : "#000",
+        padding: "8px",
+        border: "none",
+        borderRadius: "4px",
+        cursor: "pointer",
+        outline: "none",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        zIndex: zIndexMap.viewMenuIcon
+      },
+      children: /* @__PURE__ */ jsxs2(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: [
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "5", r: "1" }),
+            /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "19", r: "1" })
+          ]
+        }
+      )
+    }
+  );
+};
+
 // lib/components/ViewMenu.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var FONT_FAMILY = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var contentStyles = {
+  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: 224,
+  fontSize: 13,
+  fontFamily: FONT_FAMILY,
+  outline: "none",
+  zIndex: zIndexMap.viewMenu
+};
+var itemStyles = {
+  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_FAMILY
+};
+var iconSlotStyles = {
+  width: 16,
+  height: 16,
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#111111"
+};
+var separatorStyles = {
+  height: 1,
+  backgroundColor: "#ececec",
+  margin: "4px 0"
+};
+var HIGHLIGHT_CSS = `
+.sv-vm-item[data-highlighted]:not([data-disabled]),
+.sv-vm-item:hover:not([data-disabled]) { background-color: #f1f3f5; }
+.sv-vm-item[data-disabled] { opacity: 0.45; cursor: not-allowed; }
+`;
+var CheckIcon = () => /* @__PURE__ */ jsx4(
+  "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__ */ jsx4("path", { d: "M20 6 9 17l-5-5" })
+  }
+);
 var ViewMenu = ({
   circuitJson,
   circuitJsonKey,
-  isVisible,
-  onClose,
+  open,
+  onOpenChange,
   showGroups,
   onToggleGroups,
   showGrid,
@@ -915,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) {
@@ -936,166 +1116,58 @@ var ViewMenu = ({
       return false;
     }
   }, [circuitJsonKey]);
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
-      "div",
+  return /* @__PURE__ */ jsxs3(DropdownMenu.Root, { open, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsx4(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx4(ViewMenuIcon, { active: open }) }),
+    /* @__PURE__ */ jsx4(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs3(
+      DropdownMenu.Content,
       {
-        onClick: onClose,
-        onTouchEnd: (e) => {
-          e.preventDefault();
-          onClose();
-        },
-        style: {
-          position: "absolute",
-          inset: 0,
-          backgroundColor: "transparent",
-          zIndex: zIndexMap.viewMenuBackdrop
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: "56px",
-          right: "16px",
-          backgroundColor: "#ffffff",
-          color: "#000000",
-          border: "1px solid #ccc",
-          borderRadius: "4px",
-          boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-          minWidth: "200px",
-          zIndex: zIndexMap.viewMenu
-        },
+        style: contentStyles,
+        side: "bottom",
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 10,
         children: [
+          /* @__PURE__ */ jsx4("style", { children: HIGHLIGHT_CSS }),
           /* @__PURE__ */ jsxs3(
-            "div",
+            DropdownMenu.Item,
             {
-              onClick: () => {
-                if (hasGroups) {
-                  onToggleGroups(!showGroups);
-                }
-              },
-              onTouchEnd: (e) => {
-                e.preventDefault();
-                if (hasGroups) {
-                  onToggleGroups(!showGroups);
-                }
-              },
-              style: {
-                padding: "8px 12px",
-                cursor: hasGroups ? "pointer" : "not-allowed",
-                opacity: hasGroups ? 1 : 0.5,
-                fontSize: "13px",
-                color: "#000000",
-                fontFamily: "sans-serif",
-                display: "flex",
-                alignItems: "center",
-                gap: "8px"
-              },
-              onMouseEnter: (e) => {
-                if (hasGroups) {
-                  e.currentTarget.style.backgroundColor = "#f0f0f0";
-                }
-              },
-              onMouseLeave: (e) => {
-                if (hasGroups) {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                }
+              className: "sv-vm-item",
+              style: itemStyles,
+              disabled: !hasGroups,
+              title: hasGroups ? void 0 : "No groups found in this schematic",
+              onSelect: (e) => e.preventDefault(),
+              onPointerUp: () => {
+                if (hasGroups) onToggleGroups(!showGroups);
               },
               children: [
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      width: "16px",
-                      height: "16px",
-                      border: "2px solid #000",
-                      borderRadius: "2px",
-                      backgroundColor: "transparent",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: "10px",
-                      fontWeight: "bold"
-                    },
-                    children: showGroups && "\u2713"
-                  }
-                ),
-                "View Schematic Groups"
+                /* @__PURE__ */ jsx4("span", { style: iconSlotStyles, children: showGroups && /* @__PURE__ */ jsx4(CheckIcon, {}) }),
+                /* @__PURE__ */ jsx4("span", { children: "View Schematic Groups" })
               ]
             }
           ),
-          !hasGroups && /* @__PURE__ */ jsx4(
-            "div",
-            {
-              style: {
-                padding: "8px 12px",
-                fontSize: "11px",
-                color: "#666",
-                fontStyle: "italic"
-              },
-              children: "No groups found in this schematic"
-            }
-          ),
           /* @__PURE__ */ jsxs3(
-            "div",
+            DropdownMenu.Item,
             {
-              onClick: () => onToggleGrid(!showGrid),
-              onTouchEnd: (e) => {
-                e.preventDefault();
-                onToggleGrid(!showGrid);
-              },
-              style: {
-                padding: "8px 12px",
-                cursor: "pointer",
-                fontSize: "13px",
-                color: "#000000",
-                fontFamily: "sans-serif",
-                display: "flex",
-                alignItems: "center",
-                gap: "8px"
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.backgroundColor = "#f0f0f0";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-              },
+              className: "sv-vm-item",
+              style: itemStyles,
+              onSelect: (e) => e.preventDefault(),
+              onPointerUp: () => onToggleGrid(!showGrid),
               children: [
-                /* @__PURE__ */ jsx4(
-                  "div",
-                  {
-                    style: {
-                      width: "16px",
-                      height: "16px",
-                      border: "2px solid #000",
-                      borderRadius: "2px",
-                      backgroundColor: "transparent",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: "10px",
-                      fontWeight: "bold"
-                    },
-                    children: showGrid && "\u2713"
-                  }
-                ),
-                "Show Grid"
+                /* @__PURE__ */ jsx4("span", { style: iconSlotStyles, children: showGrid && /* @__PURE__ */ jsx4(CheckIcon, {}) }),
+                /* @__PURE__ */ jsx4("span", { children: "Show Grid" })
               ]
             }
           ),
+          /* @__PURE__ */ jsx4(DropdownMenu.Separator, { style: separatorStyles }),
           /* @__PURE__ */ jsxs3(
             "div",
             {
               style: {
                 padding: "4px 8px",
-                fontSize: "12px",
-                color: "#999",
-                borderTop: "1px solid #eee",
-                textAlign: "center"
+                fontSize: 12,
+                color: "#9ca3af",
+                textAlign: "center",
+                fontFamily: FONT_FAMILY
               },
               children: [
                 "v",
@@ -1105,7 +1177,7 @@ var ViewMenu = ({
           )
         ]
       }
-    )
+    ) })
   ] });
 };
 
@@ -1359,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,
@@ -1378,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]);
@@ -1625,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=";
@@ -1680,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([]);
@@ -1818,6 +1890,10 @@ var getSpiceFromCircuitJson = (circuitJson, options) => {
 
 // lib/hooks/useLocalStorage.ts
 import { useCallback as useCallback2 } from "react";
+var STORAGE_KEYS = {
+  IS_SHOWING_SCHEMATIC_GROUPS: "schematic_viewer_show_groups",
+  SELECTED_SCHEMATIC_SHEET: "schematic_viewer_selected_sheet"
+};
 var getStoredBoolean = (key, defaultValue) => {
   if (typeof window === "undefined") return defaultValue;
   try {
@@ -1834,17 +1910,32 @@ var setStoredBoolean = (key, value) => {
   } catch {
   }
 };
+var getStoredString = (key) => {
+  if (typeof window === "undefined") return null;
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+var setStoredString = (key, value) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+};
 
 // lib/components/MouseTracker.tsx
 import {
   createContext,
   useCallback as useCallback3,
   useContext,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo3,
   useRef as useRef4
 } from "react";
-import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9 } from "react/jsx-runtime";
 var MouseTrackerContext = createContext(null);
 var DRAG_THRESHOLD_PX = 5;
 var boundsAreEqual = (a, b) => {
@@ -1855,7 +1946,7 @@ var boundsAreEqual = (a, b) => {
 var MouseTracker = ({ children }) => {
   const existingContext = useContext(MouseTrackerContext);
   if (existingContext) {
-    return /* @__PURE__ */ jsx9(Fragment2, { children });
+    return /* @__PURE__ */ jsx9(Fragment, { children });
   }
   const storeRef = useRef4({
     pointer: null,
@@ -1924,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;
@@ -2012,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,
@@ -2039,7 +2130,7 @@ var useMouseEventsOverBoundingBox = (options) => {
     },
     []
   );
-  useEffect9(() => {
+  useEffect10(() => {
     context.registerBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -2048,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
@@ -2128,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;
@@ -2176,7 +2267,7 @@ var SchematicComponentMouseTarget = ({
     bounds,
     onClick: onComponentClick ? handleClick : void 0
   });
-  useEffect10(() => {
+  useEffect11(() => {
     if (onHoverChange) {
       onHoverChange(componentId, hovering);
     }
@@ -2203,8 +2294,8 @@ 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";
+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;
   if (!a || !b) return false;
@@ -2262,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;
@@ -2310,7 +2401,7 @@ var SchematicPortMouseTarget = ({
     bounds,
     onClick: onPortClick ? handleClick : void 0
   });
-  useEffect11(() => {
+  useEffect12(() => {
     if (onHoverChange) {
       onHoverChange(portId, hovering);
     }
@@ -2319,7 +2410,7 @@ var SchematicPortMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     /* @__PURE__ */ jsx11(
       "div",
       {
@@ -2362,8 +2453,175 @@ var SchematicPortMouseTarget = ({
   ] });
 };
 
+// lib/components/SchematicSheetSelector.tsx
+import { useState as useState7 } from "react";
+import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var FONT_FAMILY2 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+var contentStyles2 = {
+  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: 200,
+  maxWidth: 320,
+  maxHeight: 320,
+  overflowY: "auto",
+  fontSize: 13,
+  fontFamily: FONT_FAMILY2,
+  outline: "none",
+  zIndex: zIndexMap.viewMenu
+};
+var itemStyles2 = {
+  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_FAMILY2
+};
+var iconSlotStyles2 = {
+  width: 16,
+  height: 16,
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#111111"
+};
+var ellipsisStyles = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var MENU_CSS = `
+.sv-sheet-item[data-highlighted], .sv-sheet-item:hover { background-color: #f1f3f5; }
+.sv-sheet-chevron { transition: transform 0.2s ease; }
+[data-state="open"] > .sv-sheet-chevron { transform: rotate(180deg); }
+`;
+var CheckIcon2 = () => /* @__PURE__ */ jsx12(
+  "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__ */ jsx12("path", { d: "M20 6 9 17l-5-5" })
+  }
+);
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx12(
+  "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__ */ jsx12("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var SchematicSheetSelector = ({
+  sheets,
+  selectedSheetId,
+  onSelectSheet
+}) => {
+  const [open, setOpen] = useState7(false);
+  if (sheets.length <= 1) return null;
+  const selectedSheet = sheets.find(
+    (s) => s.schematic_sheet_id === selectedSheetId
+  );
+  const selectedLabel = selectedSheet?.name ?? "Select sheet";
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx12("style", { children: MENU_CSS }),
+    /* @__PURE__ */ jsxs7(DropdownMenu2.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx12(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          type: "button",
+          title: selectedLabel,
+          onPointerDown: (e) => e.stopPropagation(),
+          style: {
+            position: "absolute",
+            top: "16px",
+            left: "16px",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            maxWidth: "220px",
+            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_FAMILY2,
+            zIndex: zIndexMap.viewMenuIcon
+          },
+          children: [
+            /* @__PURE__ */ jsx12("span", { style: { color: "#888888", flexShrink: 0 }, children: "Sheet:" }),
+            /* @__PURE__ */ jsx12("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx12(ChevronDownIcon, { className: "sv-sheet-chevron" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx12(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx12(
+        DropdownMenu2.Content,
+        {
+          style: contentStyles2,
+          side: "bottom",
+          align: "start",
+          sideOffset: 8,
+          collisionPadding: 10,
+          children: sheets.map((sheet) => {
+            const selected = sheet.schematic_sheet_id === selectedSheetId;
+            return /* @__PURE__ */ jsxs7(
+              DropdownMenu2.Item,
+              {
+                className: "sv-sheet-item",
+                style: itemStyles2,
+                title: sheet.name,
+                onSelect: (e) => e.preventDefault(),
+                onPointerUp: () => {
+                  onSelectSheet(sheet.schematic_sheet_id);
+                  setOpen(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx12("span", { style: iconSlotStyles2, children: selected && /* @__PURE__ */ jsx12(CheckIcon2, {}) }),
+                  /* @__PURE__ */ jsx12("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
+                ]
+              },
+              sheet.schematic_sheet_id
+            );
+          })
+        }
+      ) })
+    ] })
+  ] });
+};
+
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
@@ -2377,17 +2635,19 @@ var SchematicViewer = ({
   colorOverrides,
   spiceSimulationEnabled = false,
   disableGroups = false,
+  netHoverHighlightEnabled = true,
   onSchematicComponentClicked,
   showSchematicPorts = false,
   onSchematicPortClicked,
+  onSchematicSheetChange,
   css,
   className
 }) => {
   if (debug3) {
     enableDebug();
   }
-  const [showSpiceOverlay, setShowSpiceOverlay] = useState7(false);
-  const [spiceSimOptions, setSpiceSimOptions] = useState7({
+  const [showSpiceOverlay, setShowSpiceOverlay] = useState8(false);
+  const [spiceSimOptions, setSpiceSimOptions] = useState8({
     showVoltage: true,
     showCurrent: false,
     startTime: 0,
@@ -2402,6 +2662,40 @@ var SchematicViewer = ({
     () => getCircuitHash(circuitJson),
     [circuitJson]
   );
+  const schematicSheets = useMemo5(() => {
+    try {
+      return circuitJson.filter((elm) => elm?.type === "schematic_sheet").slice().sort((a, b) => (a.sheet_index ?? 0) - (b.sheet_index ?? 0));
+    } catch (err) {
+      console.error("Failed to derive schematic sheets", err);
+      return [];
+    }
+  }, [circuitJsonKey]);
+  const hasMultipleSheets = schematicSheets.length > 1;
+  const defaultSheetId = schematicSheets[0]?.schematic_sheet_id;
+  const [selectedSheetId, setSelectedSheetId] = useState8(
+    () => {
+      const stored = getStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET);
+      if (stored && schematicSheets.some((s) => s.schematic_sheet_id === stored)) {
+        return stored;
+      }
+      return defaultSheetId;
+    }
+  );
+  useEffect13(() => {
+    const stillExists = selectedSheetId !== void 0 && schematicSheets.some((s) => s.schematic_sheet_id === selectedSheetId);
+    if (!stillExists) {
+      setSelectedSheetId(defaultSheetId);
+    }
+  }, [circuitJsonKey]);
+  const activeSheetId = hasMultipleSheets ? selectedSheetId ?? defaultSheetId : void 0;
+  const handleSelectSheet = useCallback6(
+    (sheetId) => {
+      setSelectedSheetId(sheetId);
+      setStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET, sheetId);
+      onSchematicSheetChange?.(sheetId);
+    },
+    [onSchematicSheetChange]
+  );
   const spiceString = useMemo5(() => {
     if (!spiceSimulationEnabled) return null;
     try {
@@ -2416,8 +2710,8 @@ var SchematicViewer = ({
     spiceSimOptions.startTime,
     spiceSimOptions.duration
   ]);
-  const [hasSpiceSimRun, setHasSpiceSimRun] = useState7(false);
-  useEffect12(() => {
+  const [hasSpiceSimRun, setHasSpiceSimRun] = useState8(false);
+  useEffect13(() => {
     setHasSpiceSimRun(false);
   }, [circuitJsonKey]);
   const {
@@ -2426,19 +2720,19 @@ var SchematicViewer = ({
     isLoading: isSpiceSimLoading,
     error: spiceSimError
   } = useSpiceSimulation(hasSpiceSimRun ? spiceString : null);
-  const [editModeEnabled, setEditModeEnabled] = useState7(defaultEditMode);
-  const [snapToGrid, setSnapToGrid] = useState7(true);
-  const [showGridInternal, setShowGridInternal] = useState7(false);
+  const [editModeEnabled, setEditModeEnabled] = useState8(defaultEditMode);
+  const [snapToGrid, setSnapToGrid] = useState8(true);
+  const [showGridInternal, setShowGridInternal] = useState8(false);
   const showGrid = debugGrid || showGridInternal;
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState7(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState8(
     !clickToInteractEnabled
   );
-  const [showViewMenu, setShowViewMenu] = useState7(false);
-  const [showSchematicGroups, setShowSchematicGroups] = useState7(() => {
+  const [showViewMenu, setShowViewMenu] = useState8(false);
+  const [showSchematicGroups, setShowSchematicGroups] = useState8(() => {
     if (disableGroups) return false;
     return getStoredBoolean("schematic_viewer_show_groups", false);
   });
-  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState7(false);
+  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState8(false);
   const hoveringComponentsRef = useRef8(/* @__PURE__ */ new Set());
   const handleComponentHoverChange = useCallback6(
     (componentId, isHovering) => {
@@ -2451,7 +2745,7 @@ var SchematicViewer = ({
     },
     []
   );
-  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState7(false);
+  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState8(false);
   const hoveringPortsRef = useRef8(/* @__PURE__ */ new Set());
   const handlePortHoverChange = useCallback6(
     (portId, isHovering) => {
@@ -2468,19 +2762,24 @@ var SchematicViewer = ({
   const touchStartRef = useRef8(null);
   const schematicComponentIds = useMemo5(() => {
     try {
-      return su6(circuitJson).schematic_component?.list()?.map((component) => component.schematic_component_id) ?? [];
+      const components = su7(circuitJson).schematic_component?.list() ?? [];
+      return components.filter(
+        (component) => !activeSheetId || component.schematic_sheet_id === activeSheetId
+      ).map((component) => component.schematic_component_id);
     } catch (err) {
       console.error("Failed to derive schematic component ids", err);
       return [];
     }
-  }, [circuitJsonKey, circuitJson]);
+  }, [circuitJsonKey, circuitJson, activeSheetId]);
   const schematicPortsInfo = useMemo5(() => {
     if (!showSchematicPorts) return [];
     try {
-      const ports = su6(circuitJson).schematic_port?.list() ?? [];
+      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 {
@@ -2492,7 +2791,7 @@ var SchematicViewer = ({
       console.error("Failed to derive schematic port info", err);
       return [];
     }
-  }, [circuitJsonKey, circuitJson, showSchematicPorts]);
+  }, [circuitJsonKey, circuitJson, showSchematicPorts, activeSheetId]);
   const handleTouchStart = (e) => {
     const touch = e.touches[0];
     touchStartRef.current = {
@@ -2512,9 +2811,9 @@ var SchematicViewer = ({
     }
     touchStartRef.current = null;
   };
-  const [internalEditEvents, setInternalEditEvents] = useState7([]);
+  const [internalEditEvents, setInternalEditEvents] = useState8([]);
   const circuitJsonRef = useRef8(circuitJson);
-  useEffect12(() => {
+  useEffect13(() => {
     const circuitHash = getCircuitHash(circuitJson);
     const circuitHashRef = getCircuitHash(circuitJsonRef.current);
     if (circuitHash !== circuitHashRef) {
@@ -2541,6 +2840,7 @@ var SchematicViewer = ({
       width: containerWidth,
       height: containerHeight || 720,
       drawPorts: showSchematicPorts,
+      schematicSheetId: activeSheetId,
       grid: !showGrid ? void 0 : {
         cellSize: 1,
         labelCells: true
@@ -2554,7 +2854,8 @@ var SchematicViewer = ({
     containerWidth,
     containerHeight,
     showGrid,
-    showSchematicPorts
+    showSchematicPorts,
+    activeSheetId
   ]);
   const containerBackgroundColor = useMemo5(() => {
     const match = svgString.match(
@@ -2614,15 +2915,21 @@ var SchematicViewer = ({
   useSchematicGroupsOverlay({
     svgDivRef,
     circuitJson,
-    circuitJsonKey,
+    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(
-    () => /* @__PURE__ */ jsx12(
+    () => /* @__PURE__ */ jsx13(
       "div",
       {
         ref: svgDivRef,
@@ -2647,10 +2954,12 @@ var SchematicViewer = ({
       showSpiceOverlay
     ]
   );
-  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(
+  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(
       "div",
       {
         ref: containerRef,
@@ -2691,7 +3000,7 @@ var SchematicViewer = ({
           handleTouchEnd(e);
         },
         children: [
-          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx12(
+          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx13(
             "div",
             {
               onClick: (e) => {
@@ -2710,7 +3019,7 @@ var SchematicViewer = ({
                 pointerEvents: "all",
                 touchAction: "pan-x pan-y pinch-zoom"
               },
-              children: /* @__PURE__ */ jsx12(
+              children: /* @__PURE__ */ jsx13(
                 "div",
                 {
                   style: {
@@ -2727,34 +3036,27 @@ var SchematicViewer = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx12(
-            ViewMenuIcon,
-            {
-              active: showViewMenu,
-              onClick: () => setShowViewMenu(!showViewMenu)
-            }
-          ),
-          editingEnabled && /* @__PURE__ */ jsx12(
+          editingEnabled && /* @__PURE__ */ jsx13(
             EditIcon,
             {
               active: editModeEnabled,
               onClick: () => setEditModeEnabled(!editModeEnabled)
             }
           ),
-          editingEnabled && editModeEnabled && /* @__PURE__ */ jsx12(
+          editingEnabled && editModeEnabled && /* @__PURE__ */ jsx13(
             GridIcon,
             {
               active: snapToGrid,
               onClick: () => setSnapToGrid(!snapToGrid)
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             ViewMenu,
             {
               circuitJson,
               circuitJsonKey,
-              isVisible: showViewMenu,
-              onClose: () => setShowViewMenu(false),
+              open: showViewMenu,
+              onOpenChange: setShowViewMenu,
               showGroups: showSchematicGroups,
               onToggleGroups: (value) => {
                 if (!disableGroups) {
@@ -2766,8 +3068,16 @@ var SchematicViewer = ({
               onToggleGrid: setShowGridInternal
             }
           ),
-          spiceSimulationEnabled && /* @__PURE__ */ jsx12(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
-          showSpiceOverlay && /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
+            SchematicSheetSelector,
+            {
+              sheets: schematicSheets,
+              selectedSheetId: activeSheetId,
+              onSelectSheet: handleSelectSheet
+            }
+          ),
+          spiceSimulationEnabled && /* @__PURE__ */ jsx13(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
+          showSpiceOverlay && /* @__PURE__ */ jsx13(
             SpiceSimulationOverlay,
             {
               spiceString,
@@ -2784,7 +3094,7 @@ var SchematicViewer = ({
               hasRun: hasSpiceSimRun
             }
           ),
-          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx12(
+          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx13(
             SchematicComponentMouseTarget,
             {
               componentId,
@@ -2803,7 +3113,7 @@ var SchematicViewer = ({
             componentId
           )),
           svgDiv,
-          showSchematicPorts && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx12(
+          showSchematicPorts && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx13(
             SchematicPortMouseTarget,
             {
               portId,
@@ -2832,10 +3142,10 @@ var SchematicViewer = ({
 import {
   convertCircuitJsonToSchematicSimulationSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect13, useState as useState8, 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 jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_RENDER_WIDTH = 1200;
 var DEFAULT_RENDER_ASPECT_RATIO = 1;
 var AnalogSimulationViewer = ({
@@ -2846,16 +3156,16 @@ var AnalogSimulationViewer = ({
   height,
   className
 }) => {
-  const [circuitJson, setCircuitJson] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(true);
-  const [error, setError] = useState8(null);
-  const [svgObjectUrl, setSvgObjectUrl] = useState8(null);
+  const [circuitJson, setCircuitJson] = useState9(null);
+  const [isLoading, setIsLoading] = useState9(true);
+  const [error, setError] = useState9(null);
+  const [svgObjectUrl, setSvgObjectUrl] = useState9(null);
   const containerRef = useRef9(null);
   const imgRef = useRef9(null);
   const { containerWidth } = useResizeHandling(
     containerRef
   );
-  const [isDragging, setIsDragging] = useState8(false);
+  const [isDragging, setIsDragging] = useState9(false);
   const {
     ref: transformRef,
     cancelDrag: _cancelDrag,
@@ -2870,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);
@@ -2917,7 +3227,7 @@ var AnalogSimulationViewer = ({
     simulationCurrentGraphIds,
     simulationVoltageGraphIds
   ]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!simulationSvg) {
       setSvgObjectUrl(null);
       return;
@@ -2947,7 +3257,7 @@ var AnalogSimulationViewer = ({
   const handleTouchStart = (_e) => {
     setIsDragging(true);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const handleMouseUp = () => {
       setIsDragging(false);
     };
@@ -2962,7 +3272,7 @@ var AnalogSimulationViewer = ({
     };
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "div",
       {
         style: {
@@ -2982,7 +3292,7 @@ var AnalogSimulationViewer = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "div",
       {
         style: {
@@ -2997,15 +3307,15 @@ var AnalogSimulationViewer = ({
           ...containerStyle
         },
         className,
-        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 })
+        children: /* @__PURE__ */ jsxs9("div", { style: { textAlign: "center", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx14("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
+          /* @__PURE__ */ jsx14("div", { style: { fontSize: "14px" }, children: error })
         ] })
       }
     );
   }
   if (!simulationSvg) {
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         style: {
@@ -3021,11 +3331,11 @@ var AnalogSimulationViewer = ({
         },
         className,
         children: [
-          /* @__PURE__ */ jsx13("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
-          /* @__PURE__ */ jsxs8("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
+          /* @__PURE__ */ jsx14("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
+          /* @__PURE__ */ jsxs9("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
             "Use",
             " ",
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               "code",
               {
                 style: {
@@ -3045,7 +3355,7 @@ var AnalogSimulationViewer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       ref: (node) => {
@@ -3063,7 +3373,7 @@ var AnalogSimulationViewer = ({
       className,
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
-      children: svgObjectUrl ? /* @__PURE__ */ jsx13(
+      children: svgObjectUrl ? /* @__PURE__ */ jsx14(
         "img",
         {
           ref: imgRef,
@@ -3077,7 +3387,7 @@ var AnalogSimulationViewer = ({
             objectFit: "contain"
           }
         }
-      ) : /* @__PURE__ */ jsx13(
+      ) : /* @__PURE__ */ jsx14(
         "div",
         {
           style: {