@tscircuit/schematic-viewer 2.0.91 → 2.0.92

package/dist/index.js

@@ -1,3 +1,179 @@
+// lib/components/StyleAnalysisDialog.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+
+// lib/utils/load-style-analyzer.ts
+var STYLE_ANALYZER_URL = "https://jscdn.tscircuit.com/@tscircuit/circuit-json-schematic-placement-analysis/latest/dist/browser.js";
+var styleAnalyzerLoader = {
+  async load() {
+    const analyzer = await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      STYLE_ANALYZER_URL
+    );
+    if (typeof analyzer.createSchematicPlacementIssueArtifacts !== "function") {
+      throw new Error(
+        "The style analyzer module does not export its analysis function."
+      );
+    }
+    return analyzer;
+  }
+};
+
+// lib/components/StyleAnalysisDialog.tsx
+import { useEffect, useState } from "react";
+
+// lib/utils/z-index-map.ts
+var zIndexMap = {
+  contextMenu: 110,
+  styleAnalysis: 120,
+  viewMenu: 55,
+  viewMenuIcon: 48,
+  clickToInteractOverlay: 100,
+  schematicComponentDetailsTooltip: 105,
+  schematicComponentHoverOutline: 47,
+  schematicPortHoverOutline: 48,
+  schematicSearch: 101
+};
+
+// lib/components/StyleAnalysisDialog.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyleAnalysisDialog = ({
+  circuitJson,
+  onClose
+}) => {
+  const [state, setState] = useState({ status: "loading" });
+  useEffect(() => {
+    let cancelled = false;
+    const timer = window.setTimeout(async () => {
+      try {
+        const { createSchematicPlacementIssueArtifacts } = await styleAnalyzerLoader.load();
+        if (cancelled) return;
+        const artifacts = createSchematicPlacementIssueArtifacts(circuitJson);
+        if (!cancelled) setState({ status: "complete", artifacts });
+      } catch (error) {
+        if (!cancelled) {
+          setState({
+            status: "error",
+            message: error instanceof Error ? error.message : String(error)
+          });
+        }
+      }
+    }, 0);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [circuitJson]);
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: true, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog.Overlay,
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "#0008",
+          zIndex: zIndexMap.styleAnalysis
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        style: {
+          position: "fixed",
+          top: "5vh",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: "min(1000px, 94vw)",
+          maxHeight: "90vh",
+          overflowY: "auto",
+          boxSizing: "border-box",
+          padding: 24,
+          borderRadius: 12,
+          background: "#fafafa",
+          color: "#171717",
+          fontFamily: "system-ui, sans-serif",
+          boxShadow: "0 20px 60px #0005",
+          zIndex: zIndexMap.styleAnalysis
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 16
+              },
+              children: [
+                /* @__PURE__ */ jsx(Dialog.Title, { style: { margin: 0, fontSize: 22 }, children: "Style Analysis" }),
+                /* @__PURE__ */ jsx(Dialog.Close, { style: { cursor: "pointer", padding: "6px 12px" }, children: "Close" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Dialog.Description, { style: { color: "#525252" }, children: "Placement and style issues across all schematic sheets. Each image highlights one issue with its description below." }),
+          state.status === "loading" && /* @__PURE__ */ jsx("p", { role: "status", children: "Running style analysis\u2026" }),
+          state.status === "error" && /* @__PURE__ */ jsxs("p", { role: "alert", children: [
+            "Style analysis failed: ",
+            state.message
+          ] }),
+          state.status === "complete" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { role: "status", children: state.artifacts.length === 0 ? "No style issues found." : `${state.artifacts.length} style ${state.artifacts.length === 1 ? "issue" : "issues"} found.` }),
+            state.artifacts.map((artifact) => /* @__PURE__ */ jsxs(
+              "section",
+              {
+                style: {
+                  marginTop: 24,
+                  border: "1px solid #ddd",
+                  borderRadius: 8,
+                  overflow: "hidden",
+                  background: "white"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("h3", { style: { margin: 16, fontSize: 16 }, children: [
+                    artifact.issueIndex + 1,
+                    ".",
+                    " ",
+                    artifact.issue.lineItemType.replace(
+                      /([a-z])([A-Z])/g,
+                      "$1 $2"
+                    ),
+                    artifact.schematicSheetId && /* @__PURE__ */ jsxs(
+                      "small",
+                      {
+                        style: {
+                          display: "block",
+                          marginTop: 4,
+                          color: "#525252"
+                        },
+                        children: [
+                          "Sheet: ",
+                          artifact.schematicSheetId
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(artifact.content)}`,
+                      alt: artifact.descriptionXml,
+                      loading: "lazy",
+                      style: { display: "block", width: "100%", height: "auto" }
+                    }
+                  )
+                ]
+              },
+              artifact.issueIndex
+            ))
+          ] })
+        ]
+      }
+    )
+  ] }) });
+};
+
 // lib/components/SchematicViewer.tsx
 import { su as su4 } from "@tscircuit/soup-util";
 import {
@@ -44,7 +220,7 @@ var setStoredString = (key, value) => {
 };
 
 // lib/hooks/useSchematicGroupsOverlay.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import { su } from "@tscircuit/soup-util";
 var GROUP_COLORS = [
   "#8B0000",
@@ -70,7 +246,7 @@ var GROUP_COLORS = [
 ];
 var useSchematicGroupsOverlay = (options) => {
   const { svgDivRef, circuitJson, circuitJsonKey, showGroups } = options;
-  useEffect(() => {
+  useEffect2(() => {
     if (svgDivRef.current) {
       const existingOverlays = svgDivRef.current.querySelectorAll(
         ".schematic-group-overlay"
@@ -313,7 +489,7 @@ function calculateGroupBounds(components, svg) {
 
 // lib/hooks/useSchematicNetHover.ts
 import { su as su2 } from "@tscircuit/soup-util";
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } 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]";
@@ -323,7 +499,7 @@ var useSchematicNetHover = ({
   circuitJsonKey,
   enabled
 }) => {
-  useEffect2(() => {
+  useEffect3(() => {
     const svgDiv = svgDivRef.current;
     if (!enabled || !svgDiv) return;
     const { componentIdToKeys, netLabelIdToKey } = buildNetRegistry(circuitJson);
@@ -431,7 +607,7 @@ function buildNetRegistry(circuitJson) {
 }
 
 // lib/hooks/useSchematicSearch.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo, useRef, useState as useState2 } from "react";
 import { fromString } from "transformation-matrix";
 
 // lib/utils/get-schematic-search-results.ts
@@ -637,8 +813,8 @@ var useSchematicSearch = ({
   setSvgToScreenProjection,
   setIsInteractionEnabled
 }) => {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [pendingSearchResult, setPendingSearchResult] = useState(null);
+  const [searchQuery, setSearchQuery] = useState2("");
+  const [pendingSearchResult, setPendingSearchResult] = useState2(null);
   const searchAnimationTimerRef = useRef(
     null
   );
@@ -733,7 +909,7 @@ var useSchematicSearch = ({
       );
     }
   }, [svgDivRef]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!pendingSearchResult || !svgString) return;
     const frame = requestAnimationFrame(() => {
       if (focusSearchResult(pendingSearchResult)) {
@@ -742,11 +918,11 @@ var useSchematicSearch = ({
     });
     return () => cancelAnimationFrame(frame);
   }, [focusSearchResult, pendingSearchResult, svgString]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (searchQuery) return;
     svgDivRef.current?.querySelectorAll(".schematic-search-match").forEach((element) => element.classList.remove("schematic-search-match"));
   }, [searchQuery, svgDivRef]);
-  useEffect3(
+  useEffect4(
     () => () => {
       if (searchAnimationTimerRef.current) {
         clearTimeout(searchAnimationTimerRef.current);
@@ -771,16 +947,16 @@ var enableDebug = () => {
 };
 
 // lib/components/SchematicViewer.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef8, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo6, useRef as useRef8, useState as useState9 } from "react";
 import { toString as transformToString } from "transformation-matrix";
 import { useMouseMatrixTransform } from "use-mouse-matrix-transform";
 
 // lib/hooks/use-resize-handling.ts
-import { useEffect as useEffect4, useState as useState2 } from "react";
+import { useEffect as useEffect5, useState as useState3 } from "react";
 var useResizeHandling = (containerRef) => {
-  const [containerWidth, setContainerWidth] = useState2(0);
-  const [containerHeight, setContainerHeight] = useState2(0);
-  useEffect4(() => {
+  const [containerWidth, setContainerWidth] = useState3(0);
+  const [containerHeight, setContainerHeight] = useState3(0);
+  useEffect5(() => {
     if (!containerRef.current) return;
     const updateDimensions = () => {
       const rect = containerRef.current?.getBoundingClientRect();
@@ -800,12 +976,12 @@ var useResizeHandling = (containerRef) => {
 };
 
 // lib/hooks/useContextMenu.ts
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
 var LONG_PRESS_DURATION_MS = 600;
 var MOVEMENT_THRESHOLD_PX = 10;
 var useContextMenu = ({ containerRef }) => {
-  const [menuVisible, setMenuVisible] = useState3(false);
-  const [menuPos, setMenuPos] = useState3({ x: 0, y: 0 });
+  const [menuVisible, setMenuVisible] = useState4(false);
+  const [menuPos, setMenuPos] = useState4({ x: 0, y: 0 });
   const menuRef = useRef2(null);
   const interactionOriginRef = useRef2(null);
   const longPressTimeoutRef = useRef2(null);
@@ -880,7 +1056,7 @@ var useContextMenu = ({ containerRef }) => {
     if (isInRadixPortal) return;
     setMenuVisible(false);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!menuVisible) return;
     document.addEventListener("mousedown", handleClickAway);
     document.addEventListener("touchstart", handleClickAway);
@@ -889,7 +1065,7 @@ var useContextMenu = ({ containerRef }) => {
       document.removeEventListener("touchstart", handleClickAway);
     };
   }, [handleClickAway, menuVisible]);
-  useEffect5(() => clearLongPressTimeout, [clearLongPressTimeout]);
+  useEffect6(() => clearLongPressTimeout, [clearLongPressTimeout]);
   return {
     menuVisible,
     menuPos,
@@ -1067,28 +1243,16 @@ var getFootprintPreviewUrl = (footprintPreviewCircuitJson, viewBox) => {
   return url.toString();
 };
 
-// lib/utils/z-index-map.ts
-var zIndexMap = {
-  contextMenu: 110,
-  viewMenu: 55,
-  viewMenuIcon: 48,
-  clickToInteractOverlay: 100,
-  schematicComponentDetailsTooltip: 105,
-  schematicComponentHoverOutline: 47,
-  schematicPortHoverOutline: 48,
-  schematicSearch: 101
-};
-
 // lib/components/MouseTracker.tsx
 import {
   createContext,
   useCallback as useCallback4,
   useContext,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useMemo as useMemo2,
   useRef as useRef3
 } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
 var MouseTrackerContext = createContext(null);
 var DRAG_THRESHOLD_PX = 5;
 var boundsAreEqual = (a, b) => {
@@ -1099,9 +1263,9 @@ var boundsAreEqual = (a, b) => {
 var MouseTracker = ({ children }) => {
   const existingContext = useContext(MouseTrackerContext);
   if (existingContext) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
+    return /* @__PURE__ */ jsx2(Fragment2, { children });
   }
-  return /* @__PURE__ */ jsx(MouseTrackerProvider, { children });
+  return /* @__PURE__ */ jsx2(MouseTrackerProvider, { children });
 };
 var MouseTrackerProvider = ({ children }) => {
   const storeRef = useRef3({
@@ -1171,7 +1335,7 @@ var MouseTrackerProvider = ({ children }) => {
   const isHovering = useCallback4((id) => {
     return storeRef.current.hoveringIds.has(id);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     const handlePointerPosition = (event) => {
       const { clientX, clientY } = event;
       const pointer = storeRef.current.pointer;
@@ -1255,12 +1419,12 @@ var MouseTrackerProvider = ({ children }) => {
       isHovering
     ]
   );
-  return /* @__PURE__ */ jsx(MouseTrackerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(MouseTrackerContext.Provider, { value, children });
 };
 
 // lib/components/SchematicComponentDetailsTooltip.tsx
 import { useMemo as useMemo3 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var detailLabelStyle = {
   color: "#64748b",
   fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
@@ -1292,7 +1456,7 @@ var SchematicComponentDetailsTooltip = ({
     ) : void 0,
     [footprintPreviewCircuitJson, footprintPreviewViewBox]
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "dialog",
     {
       open: true,
@@ -1324,7 +1488,7 @@ var SchematicComponentDetailsTooltip = ({
       onMouseDown: (event) => event.stopPropagation(),
       onClick: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           "dl",
           {
             style: {
@@ -1335,9 +1499,9 @@ var SchematicComponentDetailsTooltip = ({
               padding: "8px"
             },
             children: [
-              infoEntries.map((entry) => /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-                /* @__PURE__ */ jsx2("dt", { style: detailLabelStyle, children: entry.label }),
-                /* @__PURE__ */ jsx2(
+              infoEntries.map((entry) => /* @__PURE__ */ jsxs2("div", { style: { display: "contents" }, children: [
+                /* @__PURE__ */ jsx3("dt", { style: detailLabelStyle, children: entry.label }),
+                /* @__PURE__ */ jsx3(
                   "dd",
                   {
                     style: {
@@ -1353,9 +1517,9 @@ var SchematicComponentDetailsTooltip = ({
                   }
                 )
               ] }, entry.key)),
-              supplierPartNumberEntries.map((entry) => /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-                /* @__PURE__ */ jsx2("dt", { style: detailLabelStyle, children: entry.label }),
-                /* @__PURE__ */ jsx2(
+              supplierPartNumberEntries.map((entry) => /* @__PURE__ */ jsxs2("div", { style: { display: "contents" }, children: [
+                /* @__PURE__ */ jsx3("dt", { style: detailLabelStyle, children: entry.label }),
+                /* @__PURE__ */ jsx3(
                   "dd",
                   {
                     style: {
@@ -1366,9 +1530,9 @@ var SchematicComponentDetailsTooltip = ({
                       lineHeight: 1.45,
                       overflowWrap: "anywhere"
                     },
-                    children: entry.links.map((link, index) => /* @__PURE__ */ jsxs("span", { children: [
+                    children: entry.links.map((link, index) => /* @__PURE__ */ jsxs2("span", { children: [
                       index > 0 && ", ",
-                      /* @__PURE__ */ jsx2(
+                      /* @__PURE__ */ jsx3(
                         "a",
                         {
                           href: link.href,
@@ -1382,9 +1546,9 @@ var SchematicComponentDetailsTooltip = ({
                   }
                 )
               ] }, entry.key)),
-              footprinterString && /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-                /* @__PURE__ */ jsx2("dt", { style: detailLabelStyle, children: "footprint" }),
-                /* @__PURE__ */ jsx2(
+              footprinterString && /* @__PURE__ */ jsxs2("div", { style: { display: "contents" }, children: [
+                /* @__PURE__ */ jsx3("dt", { style: detailLabelStyle, children: "footprint" }),
+                /* @__PURE__ */ jsx3(
                   "dd",
                   {
                     style: {
@@ -1403,7 +1567,7 @@ var SchematicComponentDetailsTooltip = ({
             ]
           }
         ),
-        footprintPreviewUrl && /* @__PURE__ */ jsx2("div", { style: { padding: "0 4px 4px" }, children: /* @__PURE__ */ jsx2(
+        footprintPreviewUrl && /* @__PURE__ */ jsx3("div", { style: { padding: "0 4px 4px" }, children: /* @__PURE__ */ jsx3(
           "div",
           {
             style: {
@@ -1413,7 +1577,7 @@ var SchematicComponentDetailsTooltip = ({
               borderRadius: "2px",
               background: "#f8fafc"
             },
-            children: /* @__PURE__ */ jsx2(
+            children: /* @__PURE__ */ jsx3(
               "img",
               {
                 src: footprintPreviewUrl,
@@ -1436,12 +1600,12 @@ var SchematicComponentDetailsTooltip = ({
 };
 
 // lib/components/SchematicComponentMouseTarget.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef5, useState as useState5 } from "react";
 
 // lib/hooks/useMouseEventsOverBoundingBox.ts
 import {
   useContext as useContext2,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useId,
   useMemo as useMemo4,
   useRef as useRef4,
@@ -1463,7 +1627,7 @@ var useMouseEventsOverBoundingBox = (options) => {
     },
     []
   );
-  useEffect7(() => {
+  useEffect8(() => {
     context.registerBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -1472,7 +1636,7 @@ var useMouseEventsOverBoundingBox = (options) => {
       context.unregisterBoundingBox(id);
     };
   }, [context, handleClick, id]);
-  useEffect7(() => {
+  useEffect8(() => {
     context.updateBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -1496,7 +1660,7 @@ var useMouseEventsOverBoundingBox = (options) => {
 };
 
 // lib/components/SchematicComponentMouseTarget.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var areMeasurementsEqual = (a, b) => {
   if (!a && !b) return true;
   if (!a || !b) return false;
@@ -1511,7 +1675,7 @@ var SchematicComponentMouseTarget = ({
   showOutline,
   circuitJsonKey
 }) => {
-  const [measurement, setMeasurement] = useState4(null);
+  const [measurement, setMeasurement] = useState5(null);
   const frameRef = useRef5(null);
   const measure = useCallback5(() => {
     frameRef.current = null;
@@ -1552,10 +1716,10 @@ var SchematicComponentMouseTarget = ({
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect8(() => {
+  useEffect9(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect8(() => {
+  useEffect9(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1600,7 +1764,7 @@ var SchematicComponentMouseTarget = ({
     bounds,
     onClick: onComponentClick ? handleClick : void 0
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (onHoverChange) {
       onHoverChange(componentId, hovering);
     }
@@ -1609,7 +1773,7 @@ var SchematicComponentMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       style: {
@@ -1627,8 +1791,8 @@ var SchematicComponentMouseTarget = ({
 };
 
 // lib/components/SchematicPortMouseTarget.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useRef as useRef6, useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef6, useState as useState6 } from "react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var areMeasurementsEqual2 = (a, b) => {
   if (!a && !b) return true;
   if (!a || !b) return false;
@@ -1644,7 +1808,7 @@ var SchematicPortMouseTarget = ({
   showOutline,
   circuitJsonKey
 }) => {
-  const [measurement, setMeasurement] = useState5(null);
+  const [measurement, setMeasurement] = useState6(null);
   const frameRef = useRef6(null);
   const measure = useCallback6(() => {
     frameRef.current = null;
@@ -1686,10 +1850,10 @@ var SchematicPortMouseTarget = ({
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect9(() => {
+  useEffect10(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect9(() => {
+  useEffect10(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1734,7 +1898,7 @@ var SchematicPortMouseTarget = ({
     bounds,
     onClick: onPortClick ? handleClick : void 0
   });
-  useEffect9(() => {
+  useEffect10(() => {
     if (onHoverChange) {
       onHoverChange(portId, hovering);
     }
@@ -1743,8 +1907,8 @@ var SchematicPortMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -1762,7 +1926,7 @@ var SchematicPortMouseTarget = ({
         }
       }
     ),
-    hovering && portLabel && /* @__PURE__ */ jsx4(
+    hovering && portLabel && /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -1787,15 +1951,15 @@ var SchematicPortMouseTarget = ({
 };
 
 // lib/components/SchematicSearch.tsx
-import { useEffect as useEffect10, useRef as useRef7, useState as useState6 } from "react";
+import { useEffect as useEffect11, useRef as useRef7, useState as useState7 } from "react";
 
 // lib/components/SchematicSearchIcons.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var Icon = ({
   children,
   size,
   strokeWidth
-}) => /* @__PURE__ */ jsx5(
+}) => /* @__PURE__ */ jsx6(
   "svg",
   {
     width: size,
@@ -1810,31 +1974,31 @@ var Icon = ({
     children
   }
 );
-var SearchIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
-  /* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
-  /* @__PURE__ */ jsx5("path", { d: "m21 21-4.34-4.34" })
+var SearchIcon = (props) => /* @__PURE__ */ jsxs4(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx6("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx6("path", { d: "m21 21-4.34-4.34" })
 ] });
-var CloseIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
-  /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
+var CloseIcon = (props) => /* @__PURE__ */ jsxs4(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx6("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx6("path", { d: "m6 6 12 12" })
 ] });
-var ComponentIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
-  /* @__PURE__ */ jsx5("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
-  /* @__PURE__ */ jsx5("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }),
-  /* @__PURE__ */ jsx5("path", { d: "M7 2v2M12 2v2M17 2v2M7 20v2M12 20v2M17 20v2M2 7h2M2 12h2M2 17h2M20 7h2M20 12h2M20 17h2" })
+var ComponentIcon = (props) => /* @__PURE__ */ jsxs4(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx6("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx6("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }),
+  /* @__PURE__ */ jsx6("path", { d: "M7 2v2M12 2v2M17 2v2M7 20v2M12 20v2M17 20v2M2 7h2M2 12h2M2 17h2M20 7h2M20 12h2M20 17h2" })
 ] });
-var NetIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
-  /* @__PURE__ */ jsx5("path", { d: "M15 6a9 9 0 0 0-9 9V3" }),
-  /* @__PURE__ */ jsx5("circle", { cx: "18", cy: "6", r: "3" }),
-  /* @__PURE__ */ jsx5("circle", { cx: "6", cy: "18", r: "3" })
+var NetIcon = (props) => /* @__PURE__ */ jsxs4(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx6("path", { d: "M15 6a9 9 0 0 0-9 9V3" }),
+  /* @__PURE__ */ jsx6("circle", { cx: "18", cy: "6", r: "3" }),
+  /* @__PURE__ */ jsx6("circle", { cx: "6", cy: "18", r: "3" })
 ] });
-var EnterIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
-  /* @__PURE__ */ jsx5("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }),
-  /* @__PURE__ */ jsx5("path", { d: "m9 10-5 5 5 5" })
+var EnterIcon = (props) => /* @__PURE__ */ jsxs4(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx6("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }),
+  /* @__PURE__ */ jsx6("path", { d: "m9 10-5 5 5 5" })
 ] });
 
 // lib/components/SchematicSearch.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var HighlightedSearchText = ({
   text,
   query
@@ -1850,7 +2014,7 @@ var HighlightedSearchText = ({
       parts.push(text.slice(cursor, matchIndex));
     }
     parts.push(
-      /* @__PURE__ */ jsx6("strong", { style: { fontWeight: 700 }, children: text.slice(matchIndex, matchIndex + normalizedQuery.length) }, `${matchIndex}-${cursor}`)
+      /* @__PURE__ */ jsx7("strong", { style: { fontWeight: 700 }, children: text.slice(matchIndex, matchIndex + normalizedQuery.length) }, `${matchIndex}-${cursor}`)
     );
     cursor = matchIndex + normalizedQuery.length;
     matchIndex = normalizedText.indexOf(normalizedQuery, cursor);
@@ -1872,13 +2036,13 @@ var SchematicSearch = ({
   onSelect,
   viewerContainerRef
 }) => {
-  const [isOpen, setIsOpen] = useState6(false);
-  const [activeResultId, setActiveResultId] = useState6(null);
-  const [hoveredResultId, setHoveredResultId] = useState6(null);
+  const [isOpen, setIsOpen] = useState7(false);
+  const [activeResultId, setActiveResultId] = useState7(null);
+  const [hoveredResultId, setHoveredResultId] = useState7(null);
   const inputRef = useRef7(null);
   const resultsListRef = useRef7(null);
   const shortcutLabel = getShortcutLabel();
-  useEffect10(() => {
+  useEffect11(() => {
     setActiveResultId((currentId) => {
       if (results.some((result) => result.target.id === currentId)) {
         return currentId;
@@ -1886,11 +2050,11 @@ var SchematicSearch = ({
       return results.find((result) => result.kind === "component")?.target.id ?? results[0]?.target.id ?? null;
     });
   }, [results]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!activeResultId) return;
     resultsListRef.current?.querySelector(`[data-search-result-id="${activeResultId}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }, [activeResultId]);
-  useEffect10(() => {
+  useEffect11(() => {
     const handleSearchShortcut = (event) => {
       if (event.key === "Escape" && isOpen) {
         event.preventDefault();
@@ -1991,8 +2155,8 @@ var SchematicSearch = ({
   };
   const renderResultSection = (title, sectionResults) => {
     if (sectionResults.length === 0) return null;
-    return /* @__PURE__ */ jsxs4("section", { children: [
-      /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs5("section", { children: [
+      /* @__PURE__ */ jsx7(
         "div",
         {
           style: {
@@ -2012,16 +2176,16 @@ var SchematicSearch = ({
         const hovering = result.target.id === hoveredResultId;
         let resultBackground = "#ffffff";
         if (hovering || active) resultBackground = "#f1f3f5";
-        let resultIcon = /* @__PURE__ */ jsx6(NetIcon, { size: 15, strokeWidth: 1.8 });
+        let resultIcon = /* @__PURE__ */ jsx7(NetIcon, { size: 15, strokeWidth: 1.8 });
         if (result.kind === "component") {
-          resultIcon = /* @__PURE__ */ jsx6(ComponentIcon, { size: 15, strokeWidth: 1.8 });
+          resultIcon = /* @__PURE__ */ jsx7(ComponentIcon, { size: 15, strokeWidth: 1.8 });
         }
         const selectResult = () => {
           inputRef.current?.blur();
           setActiveResultId(result.target.id);
           onSelect(result);
         };
-        return /* @__PURE__ */ jsxs4(
+        return /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -2047,7 +2211,7 @@ var SchematicSearch = ({
               textAlign: "left"
             },
             children: [
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   style: {
@@ -2064,8 +2228,8 @@ var SchematicSearch = ({
                   children: resultIcon
                 }
               ),
-              /* @__PURE__ */ jsxs4("span", { style: { minWidth: 0, flex: 1 }, children: [
-                /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsxs5("span", { style: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsx7(
                   "span",
                   {
                     style: {
@@ -2077,10 +2241,10 @@ var SchematicSearch = ({
                       textOverflow: "ellipsis",
                       whiteSpace: "nowrap"
                     },
-                    children: /* @__PURE__ */ jsx6(HighlightedSearchText, { text: result.label, query })
+                    children: /* @__PURE__ */ jsx7(HighlightedSearchText, { text: result.label, query })
                   }
                 ),
-                result.detail && /* @__PURE__ */ jsx6(
+                result.detail && /* @__PURE__ */ jsx7(
                   "span",
                   {
                     style: {
@@ -2096,7 +2260,7 @@ var SchematicSearch = ({
                     children: result.detail
                   }
                 ),
-                result.schematicSheetName && /* @__PURE__ */ jsxs4(
+                result.schematicSheetName && /* @__PURE__ */ jsxs5(
                   "span",
                   {
                     style: {
@@ -2116,7 +2280,7 @@ var SchematicSearch = ({
                   }
                 )
               ] }),
-              active && /* @__PURE__ */ jsx6(
+              active && /* @__PURE__ */ jsx7(
                 "span",
                 {
                   title: "Press Enter to open",
@@ -2126,7 +2290,7 @@ var SchematicSearch = ({
                     fontSize: "17px",
                     lineHeight: 1
                   },
-                  children: /* @__PURE__ */ jsx6(EnterIcon, { size: 14, strokeWidth: 1.8 })
+                  children: /* @__PURE__ */ jsx7(EnterIcon, { size: 14, strokeWidth: 1.8 })
                 }
               )
             ]
@@ -2136,7 +2300,7 @@ var SchematicSearch = ({
       })
     ] });
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-schematic-search": true,
@@ -2149,7 +2313,7 @@ var SchematicSearch = ({
         zIndex: zIndexMap.schematicSearch,
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
       },
-      children: !isOpen ? /* @__PURE__ */ jsx6(
+      children: !isOpen ? /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -2180,9 +2344,9 @@ var SchematicSearch = ({
             cursor: "pointer",
             boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
           },
-          children: /* @__PURE__ */ jsx6(SearchIcon, { size: 16, strokeWidth: 2 })
+          children: /* @__PURE__ */ jsx7(SearchIcon, { size: 16, strokeWidth: 2 })
         }
-      ) : /* @__PURE__ */ jsxs4(
+      ) : /* @__PURE__ */ jsxs5(
         "div",
         {
           onKeyDown: handleSearchKeyDown,
@@ -2195,7 +2359,7 @@ var SchematicSearch = ({
             boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
           },
           children: [
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "div",
               {
                 style: {
@@ -2208,8 +2372,8 @@ var SchematicSearch = ({
                   borderBottom: searchHeaderBorder
                 },
                 children: [
-                  /* @__PURE__ */ jsx6(SearchIcon, { size: 15, strokeWidth: 2 }),
-                  /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx7(SearchIcon, { size: 15, strokeWidth: 2 }),
+                  /* @__PURE__ */ jsx7(
                     "input",
                     {
                       ref: inputRef,
@@ -2229,7 +2393,7 @@ var SchematicSearch = ({
                       }
                     }
                   ),
-                  query && results.length > 0 ? /* @__PURE__ */ jsx6(
+                  query && results.length > 0 ? /* @__PURE__ */ jsx7(
                     "span",
                     {
                       style: {
@@ -2240,7 +2404,7 @@ var SchematicSearch = ({
                       },
                       children: resultCountLabel
                     }
-                  ) : /* @__PURE__ */ jsx6(
+                  ) : /* @__PURE__ */ jsx7(
                     "kbd",
                     {
                       style: {
@@ -2257,7 +2421,7 @@ var SchematicSearch = ({
                       children: shortcutLabel
                     }
                   ),
-                  isOpen && /* @__PURE__ */ jsx6(
+                  isOpen && /* @__PURE__ */ jsx7(
                     "button",
                     {
                       type: "button",
@@ -2280,13 +2444,13 @@ var SchematicSearch = ({
                         padding: 0,
                         lineHeight: 1
                       },
-                      children: /* @__PURE__ */ jsx6(CloseIcon, { size: 16, strokeWidth: 2 })
+                      children: /* @__PURE__ */ jsx7(CloseIcon, { size: 16, strokeWidth: 2 })
                     }
                   )
                 ]
               }
             ),
-            query && /* @__PURE__ */ jsx6(
+            query && /* @__PURE__ */ jsx7(
               "div",
               {
                 ref: resultsListRef,
@@ -2301,7 +2465,7 @@ var SchematicSearch = ({
                 },
                 onWheel: (event) => event.stopPropagation(),
                 onTouchMove: (event) => event.stopPropagation(),
-                children: results.length === 0 ? /* @__PURE__ */ jsx6(
+                children: results.length === 0 ? /* @__PURE__ */ jsx7(
                   "div",
                   {
                     style: {
@@ -2311,7 +2475,7 @@ var SchematicSearch = ({
                     },
                     children: "No matching components or nets"
                   }
-                ) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                ) : /* @__PURE__ */ jsxs5(Fragment4, { children: [
                   renderResultSection("components", componentResults),
                   renderResultSection("nets", netResults)
                 ] })
@@ -2325,9 +2489,9 @@ var SchematicSearch = ({
 };
 
 // lib/components/SchematicSheetSelector.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var FONT_FAMILY = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles = {
   backgroundColor: "#ffffff",
@@ -2377,7 +2541,7 @@ var MENU_CSS = `
 .sv-sheet-chevron { transition: transform 0.2s ease; }
 [data-state="open"] > .sv-sheet-chevron { transform: rotate(180deg); }
 `;
-var CheckIcon = () => /* @__PURE__ */ jsx7(
+var CheckIcon = () => /* @__PURE__ */ jsx8(
   "svg",
   {
     width: "14",
@@ -2389,10 +2553,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx7(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx7("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx8("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx7(
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx8(
   "svg",
   {
     className,
@@ -2406,7 +2570,7 @@ var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx7(
     strokeLinejoin: "round",
     style: { opacity: 0.6, flexShrink: 0 },
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx7("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx8("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var SchematicSheetSelector = ({
@@ -2414,16 +2578,16 @@ var SchematicSheetSelector = ({
   selectedSheetId,
   onSelectSheet
 }) => {
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState8(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__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx7("style", { children: MENU_CSS }),
-    /* @__PURE__ */ jsxs5(DropdownMenu.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx7(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsx8("style", { children: MENU_CSS }),
+    /* @__PURE__ */ jsxs6(DropdownMenu.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx8(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
         "button",
         {
           type: "button",
@@ -2448,13 +2612,13 @@ var SchematicSheetSelector = ({
             fontFamily: FONT_FAMILY
           },
           children: [
-            /* @__PURE__ */ jsx7("span", { style: { color: "#888888", flexShrink: 0 }, children: "Sheet:" }),
-            /* @__PURE__ */ jsx7("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: selectedLabel }),
-            /* @__PURE__ */ jsx7(ChevronDownIcon, { className: "sv-sheet-chevron" })
+            /* @__PURE__ */ jsx8("span", { style: { color: "#888888", flexShrink: 0 }, children: "Sheet:" }),
+            /* @__PURE__ */ jsx8("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx8(ChevronDownIcon, { className: "sv-sheet-chevron" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx7(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx8(
         DropdownMenu.Content,
         {
           style: contentStyles,
@@ -2464,7 +2628,7 @@ var SchematicSheetSelector = ({
           collisionPadding: 10,
           children: sheets.map((sheet) => {
             const selected = sheet.schematic_sheet_id === selectedSheetId;
-            return /* @__PURE__ */ jsxs5(
+            return /* @__PURE__ */ jsxs6(
               DropdownMenu.Item,
               {
                 className: "sv-sheet-item",
@@ -2476,8 +2640,8 @@ var SchematicSheetSelector = ({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx7("span", { style: iconSlotStyles, children: selected && /* @__PURE__ */ jsx7(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx7("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
+                  /* @__PURE__ */ jsx8("span", { style: iconSlotStyles, children: selected && /* @__PURE__ */ jsx8(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx8("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
                 ]
               },
               sheet.schematic_sheet_id
@@ -2497,7 +2661,7 @@ import { useMemo as useMemo5 } from "react";
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.90",
+  version: "2.0.91",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/schematic-viewer"
@@ -2532,13 +2696,15 @@ var package_default = {
     semver: "^7.7.2",
     tscircuit: "^0.0.2460",
     tsup: "^8.3.5",
-    vite: "^6.0.3"
+    vite: "^6.0.3",
+    "@tscircuit/circuit-json-schematic-placement-analysis": "https://codeload.github.com/tscircuit/circuit-json-schematic-placement-analysis/tar.gz/refs/heads/main"
   },
   peerDependencies: {
     typescript: "^5.0.0",
     tscircuit: "*"
   },
   dependencies: {
+    "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@tscircuit/circuit-json-util": "^0.0.108",
     "circuit-json": "^0.0.479",
@@ -2551,7 +2717,7 @@ var package_default = {
 };
 
 // lib/components/ViewMenu.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var FONT_FAMILY2 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles2 = {
   backgroundColor: "#262626",
@@ -2600,7 +2766,7 @@ var HIGHLIGHT_CSS = `
 .sv-vm-item:hover:not([data-disabled]) { background-color: #404040; }
 .sv-vm-item[data-disabled] { opacity: 0.45; cursor: not-allowed; }
 `;
-var CheckIcon2 = () => /* @__PURE__ */ jsx8(
+var CheckIcon2 = () => /* @__PURE__ */ jsx9(
   "svg",
   {
     width: "14",
@@ -2612,7 +2778,7 @@ var CheckIcon2 = () => /* @__PURE__ */ jsx8(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx8("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx9("path", { d: "M20 6 9 17l-5-5" })
   }
 );
 var ViewMenu = ({
@@ -2621,6 +2787,7 @@ var ViewMenu = ({
   menuRef,
   menuPos,
   onOpenChange,
+  onRunStyleAnalysis,
   showGroups,
   onToggleGroups,
   showGrid,
@@ -2663,7 +2830,7 @@ var ViewMenu = ({
       return false;
     }
   }, [circuitJsonKey]);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ref: menuRef,
@@ -2674,9 +2841,9 @@ var ViewMenu = ({
         width: 0,
         height: 0
       },
-      children: /* @__PURE__ */ jsxs6(DropdownMenu2.Root, { open: true, onOpenChange, modal: false, children: [
-        /* @__PURE__ */ jsx8(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx8("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx8(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsxs7(DropdownMenu2.Root, { open: true, onOpenChange, modal: false, children: [
+        /* @__PURE__ */ jsx9(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx9(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs7(
           DropdownMenu2.Content,
           {
             style: contentStyles2,
@@ -2685,8 +2852,8 @@ var ViewMenu = ({
             collisionPadding: 10,
             avoidCollisions: true,
             children: [
-              /* @__PURE__ */ jsx8("style", { children: HIGHLIGHT_CSS }),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsx9("style", { children: HIGHLIGHT_CSS }),
+              /* @__PURE__ */ jsxs7(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -2699,12 +2866,12 @@ var ViewMenu = ({
                     if (hasPorts) onTogglePorts(!showPorts);
                   },
                   children: [
-                    /* @__PURE__ */ jsx8("span", { style: iconSlotStyles2, children: showPorts && /* @__PURE__ */ jsx8(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx8("span", { children: "Show Schematic Ports" })
+                    /* @__PURE__ */ jsx9("span", { style: iconSlotStyles2, children: showPorts && /* @__PURE__ */ jsx9(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx9("span", { children: "Show Schematic Ports" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -2717,12 +2884,12 @@ var ViewMenu = ({
                     if (hasGroups) onToggleGroups(!showGroups);
                   },
                   children: [
-                    /* @__PURE__ */ jsx8("span", { style: iconSlotStyles2, children: showGroups && /* @__PURE__ */ jsx8(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx8("span", { children: "View Schematic Groups" })
+                    /* @__PURE__ */ jsx9("span", { style: iconSlotStyles2, children: showGroups && /* @__PURE__ */ jsx9(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx9("span", { children: "View Schematic Groups" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -2733,12 +2900,12 @@ var ViewMenu = ({
                     onToggleGrid(!showGrid);
                   },
                   children: [
-                    /* @__PURE__ */ jsx8("span", { style: iconSlotStyles2, children: showGrid && /* @__PURE__ */ jsx8(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx8("span", { children: "Show Grid" })
+                    /* @__PURE__ */ jsx9("span", { style: iconSlotStyles2, children: showGrid && /* @__PURE__ */ jsx9(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx9("span", { children: "Show Grid" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 DropdownMenu2.CheckboxItem,
                 {
                   className: "sv-vm-item",
@@ -2747,13 +2914,26 @@ var ViewMenu = ({
                   onCheckedChange: onToggleWarnings,
                   onSelect: (event) => event.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx8("span", { style: iconSlotStyles2, children: /* @__PURE__ */ jsx8(DropdownMenu2.ItemIndicator, { children: /* @__PURE__ */ jsx8(CheckIcon2, {}) }) }),
-                    /* @__PURE__ */ jsx8("span", { children: "Show Warnings" })
+                    /* @__PURE__ */ jsx9("span", { style: iconSlotStyles2, children: /* @__PURE__ */ jsx9(DropdownMenu2.ItemIndicator, { children: /* @__PURE__ */ jsx9(CheckIcon2, {}) }) }),
+                    /* @__PURE__ */ jsx9("span", { children: "Show Warnings" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx8(DropdownMenu2.Separator, { style: separatorStyles }),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsx9(DropdownMenu2.Separator, { style: separatorStyles }),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenu2.Item,
+                {
+                  className: "sv-vm-item",
+                  style: itemStyles2,
+                  onSelect: onRunStyleAnalysis,
+                  children: [
+                    /* @__PURE__ */ jsx9("span", { style: iconSlotStyles2 }),
+                    /* @__PURE__ */ jsx9("span", { children: "Run Style Analysis" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx9(DropdownMenu2.Separator, { style: separatorStyles }),
+              /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   style: {
@@ -2779,7 +2959,7 @@ var ViewMenu = ({
 };
 
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
@@ -2817,7 +2997,7 @@ var SchematicViewer = ({
   }, [circuitJsonKey]);
   const hasMultipleSheets = schematicSheets.length > 1;
   const defaultSheetId = schematicSheets[0]?.schematic_sheet_id;
-  const [selectedSheetId, setSelectedSheetId] = useState8(
+  const [selectedSheetId, setSelectedSheetId] = useState9(
     () => {
       const stored = getStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET);
       if (stored && schematicSheets.some((s) => s.schematic_sheet_id === stored)) {
@@ -2826,7 +3006,7 @@ var SchematicViewer = ({
       return defaultSheetId;
     }
   );
-  useEffect11(() => {
+  useEffect12(() => {
     const stillExists = selectedSheetId !== void 0 && schematicSheets.some((s) => s.schematic_sheet_id === selectedSheetId);
     if (!stillExists) {
       setSelectedSheetId(defaultSheetId);
@@ -2841,27 +3021,28 @@ var SchematicViewer = ({
     },
     [onSchematicSheetChange]
   );
-  const [showGridInternal, setShowGridInternal] = useState8(false);
-  const [showWarnings, setShowWarnings] = useState8(false);
+  const [showGridInternal, setShowGridInternal] = useState9(false);
+  const [analysisCircuitJson, setAnalysisCircuitJson] = useState9(null);
+  const [showWarnings, setShowWarnings] = useState9(false);
   const showGrid = debugGrid || showGridInternal;
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState8(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState9(
     !clickToInteractEnabled
   );
-  const [showSchematicGroups, setShowSchematicGroups] = useState8(() => {
+  const [showSchematicGroups, setShowSchematicGroups] = useState9(() => {
     if (disableGroups) return false;
     return getStoredBoolean(STORAGE_KEYS.IS_SHOWING_SCHEMATIC_GROUPS, false);
   });
-  const [showSchematicPortsInternal, setShowSchematicPortsInternal] = useState8(
+  const [showSchematicPortsInternal, setShowSchematicPortsInternal] = useState9(
     () => showSchematicPorts ?? getStoredBoolean(STORAGE_KEYS.IS_SHOWING_SCHEMATIC_PORTS, false)
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (showSchematicPorts !== void 0) {
       setShowSchematicPortsInternal(showSchematicPorts);
     }
   }, [showSchematicPorts]);
-  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState8(false);
+  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState9(false);
   const hoveringComponentsRef = useRef8(/* @__PURE__ */ new Set());
-  const [selectedSchematicComponent, setSelectedSchematicComponent] = useState8(null);
+  const [selectedSchematicComponent, setSelectedSchematicComponent] = useState9(null);
   const handleComponentHoverChange = useCallback7(
     (componentId, isHovering) => {
       if (isHovering) {
@@ -2873,7 +3054,7 @@ var SchematicViewer = ({
     },
     []
   );
-  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState8(false);
+  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState9(false);
   const hoveringPortsRef = useRef8(/* @__PURE__ */ new Set());
   const handlePortHoverChange = useCallback7(
     (portId, isHovering) => {
@@ -3023,10 +3204,10 @@ var SchematicViewer = ({
     },
     [containerRef, onSchematicComponentClicked]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     setSelectedSchematicComponent(null);
   }, [circuitJsonKey, activeSheetId]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!selectedSchematicComponent) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -3109,7 +3290,7 @@ var SchematicViewer = ({
     enabled: netHoverHighlightEnabled
   });
   const svgDiv = useMemo6(
-    () => /* @__PURE__ */ jsx9(
+    () => /* @__PURE__ */ jsx10(
       "div",
       {
         ref: svgDivRef,
@@ -3123,10 +3304,10 @@ var SchematicViewer = ({
     ),
     [svgString, isInteractionEnabled, clickToInteractEnabled]
   );
-  return /* @__PURE__ */ jsxs7(MouseTracker, { children: [
-    netHoverHighlightEnabled && /* @__PURE__ */ jsx9("style", { children: `.sch-net-faded { opacity: 0.35; }
+  return /* @__PURE__ */ jsxs8(MouseTracker, { children: [
+    netHoverHighlightEnabled && /* @__PURE__ */ jsx10("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; }` }),
-    searchEnabled && /* @__PURE__ */ jsx9("style", { children: `.schematic-search-match text,
+    searchEnabled && /* @__PURE__ */ jsx10("style", { children: `.schematic-search-match text,
             text.schematic-search-match {
               fill: #ff00d4 !important;
             }
@@ -3142,9 +3323,9 @@ var SchematicViewer = ({
                 flex-direction: column;
               }
             }` }),
-    /* @__PURE__ */ jsx9("style", { children: ".schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }" }),
-    onSchematicPortClicked && /* @__PURE__ */ jsx9("style", { children: "[data-schematic-port-id]:hover { cursor: pointer !important; }" }),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx10("style", { children: ".schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }" }),
+    onSchematicPortClicked && /* @__PURE__ */ jsx10("style", { children: "[data-schematic-port-id]:hover { cursor: pointer !important; }" }),
+    /* @__PURE__ */ jsxs8(
       "div",
       {
         ref: containerRef,
@@ -3179,7 +3360,7 @@ var SchematicViewer = ({
         },
         onTouchCancel: contextMenuEventHandlers.onTouchCancel,
         children: [
-          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx9(
+          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx10(
             "div",
             {
               onClick: (e) => {
@@ -3198,7 +3379,7 @@ var SchematicViewer = ({
                 pointerEvents: "all",
                 touchAction: "pan-x pan-y pinch-zoom"
               },
-              children: /* @__PURE__ */ jsx9(
+              children: /* @__PURE__ */ jsx10(
                 "div",
                 {
                   style: {
@@ -3215,7 +3396,14 @@ var SchematicViewer = ({
               )
             }
           ),
-          menuVisible && /* @__PURE__ */ jsx9(
+          analysisCircuitJson && /* @__PURE__ */ jsx10(
+            StyleAnalysisDialog,
+            {
+              circuitJson: analysisCircuitJson,
+              onClose: () => setAnalysisCircuitJson(null)
+            }
+          ),
+          menuVisible && /* @__PURE__ */ jsx10(
             ViewMenu,
             {
               circuitJson,
@@ -3223,6 +3411,10 @@ var SchematicViewer = ({
               menuRef,
               menuPos,
               onOpenChange: setMenuVisible,
+              onRunStyleAnalysis: () => {
+                setMenuVisible(false);
+                setAnalysisCircuitJson(structuredClone(circuitJson));
+              },
               showPorts: showSchematicPortsInternal,
               onTogglePorts: (value) => {
                 setShowSchematicPortsInternal(value);
@@ -3244,7 +3436,7 @@ var SchematicViewer = ({
               onToggleGrid: setShowGridInternal
             }
           ),
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs8(
             "div",
             {
               className: "schematic-viewer-toolbar",
@@ -3258,7 +3450,7 @@ var SchematicViewer = ({
                 zIndex: zIndexMap.schematicSearch
               },
               children: [
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10(
                   SchematicSheetSelector,
                   {
                     sheets: schematicSheets,
@@ -3266,7 +3458,7 @@ var SchematicViewer = ({
                     onSelectSheet: handleSelectSheet
                   }
                 ),
-                searchEnabled && /* @__PURE__ */ jsx9(
+                searchEnabled && /* @__PURE__ */ jsx10(
                   SchematicSearch,
                   {
                     query: searchQuery,
@@ -3280,7 +3472,7 @@ var SchematicViewer = ({
               ]
             }
           ),
-          schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx9(
+          schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx10(
             SchematicComponentMouseTarget,
             {
               componentId,
@@ -3294,7 +3486,7 @@ var SchematicViewer = ({
             componentId
           )),
           svgDiv,
-          selectedComponentDetails && componentTooltipLayout && /* @__PURE__ */ jsx9(
+          selectedComponentDetails && componentTooltipLayout && /* @__PURE__ */ jsx10(
             SchematicComponentDetailsTooltip,
             {
               sourceComponent: selectedComponentDetails.sourceComponent,
@@ -3304,7 +3496,7 @@ var SchematicViewer = ({
               ...componentTooltipLayout
             }
           ),
-          showSchematicPortsInternal && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx9(
+          showSchematicPortsInternal && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx10(
             SchematicPortMouseTarget,
             {
               portId,
@@ -3334,7 +3526,7 @@ import {
   convertCircuitJsonToSchematicSimulationSvg,
   convertCircuitJsonToSimulationGraphSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect12, useMemo as useMemo7, useRef as useRef9, useState as useState10 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo7, useRef as useRef9, useState as useState11 } from "react";
 import { toString as transformToString2 } from "transformation-matrix";
 import { useMouseMatrixTransform as useMouseMatrixTransform2 } from "use-mouse-matrix-transform";
 
@@ -3352,8 +3544,8 @@ var getAnalogSimulationBackgroundColor = (simulationSvg, colorOverrides) => getR
 
 // lib/components/AnalogSimulationSelector.tsx
 import * as DropdownMenu3 from "@radix-ui/react-dropdown-menu";
-import { useState as useState9 } from "react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var FONT_FAMILY3 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles3 = {
   backgroundColor: "#ffffff",
@@ -3403,7 +3595,7 @@ var MENU_CSS2 = `
 .sv-simulation-chevron { transition: transform 0.2s ease; }
 [data-state="open"] > .sv-simulation-chevron { transform: rotate(180deg); }
 `;
-var CheckIcon3 = () => /* @__PURE__ */ jsx10(
+var CheckIcon3 = () => /* @__PURE__ */ jsx11(
   "svg",
   {
     width: "14",
@@ -3415,10 +3607,10 @@ var CheckIcon3 = () => /* @__PURE__ */ jsx10(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx10("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx11("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx10(
+var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx11(
   "svg",
   {
     className,
@@ -3432,7 +3624,7 @@ var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx10(
     strokeLinejoin: "round",
     style: { opacity: 0.6, flexShrink: 0 },
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx10("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx11("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var getSimulationLabels = (simulations) => {
@@ -3451,17 +3643,17 @@ var AnalogSimulationSelector = ({
   selectedSimulationExperimentId,
   onSelectSimulation
 }) => {
-  const [open, setOpen] = useState9(false);
+  const [open, setOpen] = useState10(false);
   if (simulations.length <= 1) return null;
   const simulationLabels = getSimulationLabels(simulations);
   const selectedSimulation = simulationLabels.find(
     ({ simulation }) => simulation.simulation_experiment_id === selectedSimulationExperimentId
   );
   const selectedLabel = selectedSimulation?.label ?? "Select simulation";
-  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    /* @__PURE__ */ jsx10("style", { children: MENU_CSS2 }),
-    /* @__PURE__ */ jsxs8(DropdownMenu3.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx10(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx11("style", { children: MENU_CSS2 }),
+    /* @__PURE__ */ jsxs9(DropdownMenu3.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx11(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
         "button",
         {
           type: "button",
@@ -3488,13 +3680,13 @@ var AnalogSimulationSelector = ({
             zIndex: zIndexMap.viewMenuIcon
           },
           children: [
-            /* @__PURE__ */ jsx10("span", { style: { color: "#888888", flexShrink: 0 }, children: "Simulation:" }),
-            /* @__PURE__ */ jsx10("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: selectedLabel }),
-            /* @__PURE__ */ jsx10(ChevronDownIcon2, { className: "sv-simulation-chevron" })
+            /* @__PURE__ */ jsx11("span", { style: { color: "#888888", flexShrink: 0 }, children: "Simulation:" }),
+            /* @__PURE__ */ jsx11("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx11(ChevronDownIcon2, { className: "sv-simulation-chevron" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx10(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx11(
         DropdownMenu3.Content,
         {
           style: contentStyles3,
@@ -3504,7 +3696,7 @@ var AnalogSimulationSelector = ({
           collisionPadding: 10,
           children: simulationLabels.map(({ simulation, label }) => {
             const selected = simulation.simulation_experiment_id === selectedSimulationExperimentId;
-            return /* @__PURE__ */ jsxs8(
+            return /* @__PURE__ */ jsxs9(
               DropdownMenu3.Item,
               {
                 className: "sv-simulation-item",
@@ -3516,8 +3708,8 @@ var AnalogSimulationSelector = ({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx10("span", { style: iconSlotStyles3, children: selected && /* @__PURE__ */ jsx10(CheckIcon3, {}) }),
-                  /* @__PURE__ */ jsx10("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: label })
+                  /* @__PURE__ */ jsx11("span", { style: iconSlotStyles3, children: selected && /* @__PURE__ */ jsx11(CheckIcon3, {}) }),
+                  /* @__PURE__ */ jsx11("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: label })
                 ]
               },
               simulation.simulation_experiment_id
@@ -3530,7 +3722,7 @@ var AnalogSimulationSelector = ({
 };
 
 // lib/components/AnalogSimulationViewer.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_RENDER_WIDTH = 1200;
 var DEFAULT_COMBINED_RENDER_ASPECT_RATIO = 1;
 var DEFAULT_GRAPH_ONLY_RENDER_ASPECT_RATIO = 2;
@@ -3545,16 +3737,16 @@ var AnalogSimulationViewer = ({
   onSimulationChange,
   acSweepView = "magnitude"
 }) => {
-  const [circuitJson, setCircuitJson] = useState10(null);
-  const [isLoading, setIsLoading] = useState10(true);
-  const [error, setError] = useState10(null);
-  const [svgObjectUrl, setSvgObjectUrl] = useState10(null);
+  const [circuitJson, setCircuitJson] = useState11(null);
+  const [isLoading, setIsLoading] = useState11(true);
+  const [error, setError] = useState11(null);
+  const [svgObjectUrl, setSvgObjectUrl] = useState11(null);
   const containerRef = useRef9(null);
   const imgRef = useRef9(null);
   const { containerWidth } = useResizeHandling(
     containerRef
   );
-  const [isDragging, setIsDragging] = useState10(false);
+  const [isDragging, setIsDragging] = useState11(false);
   const {
     ref: transformRef,
     cancelDrag: _cancelDrag,
@@ -3570,7 +3762,7 @@ var AnalogSimulationViewer = ({
   const renderAspectRatio = width && height ? width / height : defaultRenderAspectRatio;
   const effectiveWidth = width || (height ? height * renderAspectRatio : containerWidth) || DEFAULT_RENDER_WIDTH;
   const effectiveHeight = height || effectiveWidth / renderAspectRatio;
-  useEffect12(() => {
+  useEffect13(() => {
     setIsLoading(true);
     setError(null);
     setCircuitJson(inputCircuitJson);
@@ -3582,11 +3774,11 @@ var AnalogSimulationViewer = ({
       (element) => element.type === "simulation_experiment"
     );
   }, [circuitJson]);
-  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState10(null);
+  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState11(null);
   const simulationExperimentId = (selectedSimulationExperimentId && simulationExperiments.some(
     (simulation) => simulation.simulation_experiment_id === selectedSimulationExperimentId
   ) ? selectedSimulationExperimentId : simulationExperiments[0]?.simulation_experiment_id) ?? null;
-  useEffect12(() => {
+  useEffect13(() => {
     if (simulationExperimentId !== selectedSimulationExperimentId) {
       setSelectedSimulationExperimentId(simulationExperimentId);
     }
@@ -3623,7 +3815,7 @@ var AnalogSimulationViewer = ({
     simulationExperimentId,
     acSweepView
   ]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!simulationSvg) {
       setSvgObjectUrl(null);
       return;
@@ -3649,7 +3841,7 @@ var AnalogSimulationViewer = ({
   const handleTouchStart = (_e) => {
     setIsDragging(true);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     const handleMouseUp = () => {
       setIsDragging(false);
     };
@@ -3664,7 +3856,7 @@ var AnalogSimulationViewer = ({
     };
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         style: {
@@ -3684,7 +3876,7 @@ var AnalogSimulationViewer = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         style: {
@@ -3699,15 +3891,15 @@ var AnalogSimulationViewer = ({
           ...containerStyle
         },
         className,
-        children: /* @__PURE__ */ jsxs9("div", { style: { textAlign: "center", padding: "20px" }, children: [
-          /* @__PURE__ */ jsx11("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
-          /* @__PURE__ */ jsx11("div", { style: { fontSize: "14px" }, children: error })
+        children: /* @__PURE__ */ jsxs10("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 })
         ] })
       }
     );
   }
   if (!simulationSvg) {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         style: {
@@ -3723,11 +3915,11 @@ var AnalogSimulationViewer = ({
         },
         className,
         children: [
-          /* @__PURE__ */ jsx11("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
-          /* @__PURE__ */ jsxs9("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
+          /* @__PURE__ */ jsx12("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
+          /* @__PURE__ */ jsxs10("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
             "Use",
             " ",
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(
               "code",
               {
                 style: {
@@ -3747,7 +3939,7 @@ var AnalogSimulationViewer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       ref: (node) => {
@@ -3766,7 +3958,7 @@ var AnalogSimulationViewer = ({
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           AnalogSimulationSelector,
           {
             simulations: simulationExperiments,
@@ -3774,7 +3966,7 @@ var AnalogSimulationViewer = ({
             onSelectSimulation: handleSelectSimulation
           }
         ),
-        svgObjectUrl ? /* @__PURE__ */ jsx11(
+        svgObjectUrl ? /* @__PURE__ */ jsx12(
           "img",
           {
             ref: imgRef,
@@ -3788,7 +3980,7 @@ var AnalogSimulationViewer = ({
               objectFit: "contain"
             }
           }
-        ) : /* @__PURE__ */ jsx11(
+        ) : /* @__PURE__ */ jsx12(
           "div",
           {
             style: {