@tscircuit/schematic-viewer 2.0.77 → 2.0.78

package/dist/index.js

@@ -2,200 +2,11 @@
 import {
   convertCircuitJsonToSchematicSvg
 } from "circuit-to-svg";
-import { su as su7 } from "@tscircuit/soup-util";
-
-// lib/hooks/useChangeSchematicComponentLocationsInSvg.ts
-import "@tscircuit/soup-util";
-import "transformation-matrix";
-import { useEffect, useRef } from "react";
-
-// lib/utils/get-component-offset-due-to-events.ts
-var getComponentOffsetDueToEvents = ({
-  editEvents,
-  schematic_component_id
-}) => {
-  const editEventsForComponent = editEvents.filter(
-    (event) => "schematic_component_id" in event && event.schematic_component_id === schematic_component_id
-  ).filter(
-    (event) => "edit_event_type" in event && event.edit_event_type === "edit_schematic_component_location"
-  );
-  const totalOffsetX = editEventsForComponent.reduce((acc, event) => {
-    return acc + event.new_center.x - event.original_center.x;
-  }, 0);
-  const totalOffsetY = editEventsForComponent.reduce((acc, event) => {
-    return acc + event.new_center.y - event.original_center.y;
-  }, 0);
-  return {
-    x: totalOffsetX,
-    y: totalOffsetY
-  };
-};
-
-// lib/hooks/useChangeSchematicComponentLocationsInSvg.ts
-var useChangeSchematicComponentLocationsInSvg = ({
-  svgDivRef,
-  realToSvgProjection,
-  svgToScreenProjection,
-  activeEditEvent,
-  editEvents
-}) => {
-  const lastSvgContentRef = useRef(null);
-  useEffect(() => {
-    const svg = svgDivRef.current;
-    if (!svg) return;
-    const observer = new MutationObserver((mutations) => {
-      const currentSvgContent = svg.innerHTML;
-      if (currentSvgContent !== lastSvgContentRef.current) {
-        lastSvgContentRef.current = currentSvgContent;
-        applyTransforms();
-      }
-    });
-    const applyTransforms = () => {
-      const componentsThatHaveBeenMoved = /* @__PURE__ */ new Set();
-      for (const event of editEvents) {
-        if ("edit_event_type" in event && event.edit_event_type === "edit_schematic_component_location") {
-          componentsThatHaveBeenMoved.add(event.schematic_component_id);
-        }
-      }
-      if (activeEditEvent) {
-        componentsThatHaveBeenMoved.add(activeEditEvent.schematic_component_id);
-      }
-      const allComponents = svg.querySelectorAll(
-        '[data-circuit-json-type="schematic_component"]'
-      );
-      for (const component of Array.from(allComponents)) {
-        const schematic_component_id = component.getAttribute(
-          "data-schematic-component-id"
-        );
-        const offsetMm = getComponentOffsetDueToEvents({
-          editEvents: [
-            ...editEvents,
-            ...activeEditEvent ? [activeEditEvent] : []
-          ],
-          schematic_component_id
-        });
-        const offsetPx = {
-          x: offsetMm.x * realToSvgProjection.a,
-          y: offsetMm.y * realToSvgProjection.d
-        };
-        const style = component.style;
-        style.transform = `translate(${offsetPx.x}px, ${offsetPx.y}px)`;
-        if (activeEditEvent?.schematic_component_id === schematic_component_id) {
-          style.outline = "solid 2px rgba(255,0,0,0.5)";
-          style.outlineOffset = "5px";
-        } else if (style.outline) {
-          style.outline = "";
-        }
-      }
-    };
-    observer.observe(svg, {
-      childList: true,
-      // Watch for changes to the child elements
-      subtree: false,
-      // Watch for changes in the entire subtree
-      characterData: false
-      // Watch for changes to text content
-    });
-    applyTransforms();
-    return () => {
-      observer.disconnect();
-    };
-  }, [svgDivRef, editEvents, activeEditEvent]);
-};
-
-// lib/hooks/useChangeSchematicTracesForMovedComponents.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { su as su2 } from "@tscircuit/soup-util";
-var useChangeSchematicTracesForMovedComponents = ({
-  svgDivRef,
-  circuitJson,
-  activeEditEvent,
-  editEvents
-}) => {
-  const lastSvgContentRef = useRef2(null);
-  useEffect2(() => {
-    const svg = svgDivRef.current;
-    if (!svg) return;
-    const updateTraceStyles = () => {
-      const allTraces = svg.querySelectorAll(
-        '[data-circuit-json-type="schematic_trace"] path'
-      );
-      for (const trace of Array.from(allTraces)) {
-        trace.setAttribute("stroke-dasharray", "0");
-        trace.style.animation = "";
-      }
-      for (const editEvent of [
-        ...editEvents,
-        ...activeEditEvent ? [activeEditEvent] : []
-      ]) {
-        if ("schematic_component_id" in editEvent && editEvent.edit_event_type === "edit_schematic_component_location") {
-          const sch_component = su2(circuitJson).schematic_component.get(
-            editEvent.schematic_component_id
-          );
-          if (!sch_component) return;
-          const src_ports = su2(circuitJson).source_port.list({
-            source_component_id: sch_component.source_component_id
-          });
-          const src_port_ids = new Set(src_ports.map((sp) => sp.source_port_id));
-          const src_traces = su2(circuitJson).source_trace.list().filter(
-            (st) => st.connected_source_port_ids?.some(
-              (spi) => src_port_ids.has(spi)
-            )
-          );
-          const src_trace_ids = new Set(
-            src_traces.map((st) => st.source_trace_id)
-          );
-          const schematic_traces = su2(circuitJson).schematic_trace.list().filter((st) => src_trace_ids.has(st.source_trace_id));
-          schematic_traces.forEach((trace) => {
-            const traceElements = svg.querySelectorAll(
-              `[data-schematic-trace-id="${trace.schematic_trace_id}"] path`
-            );
-            for (const traceElement of Array.from(traceElements)) {
-              if (traceElement.getAttribute("class")?.includes("invisible"))
-                continue;
-              traceElement.setAttribute("stroke-dasharray", "20,20");
-              traceElement.style.animation = "dash-animation 350ms linear infinite, pulse-animation 900ms linear infinite";
-              if (!svg.querySelector("style#dash-animation")) {
-                const style = document.createElement("style");
-                style.id = "dash-animation";
-                style.textContent = `
-                  @keyframes dash-animation {
-                    to {
-                      stroke-dashoffset: -40;
-                    }
-                  }
-                  @keyframes pulse-animation {
-                    0% { opacity: 0.6; }
-                    50% { opacity: 0.2; }
-                    100% { opacity: 0.6; }
-                  }
-                `;
-                svg.appendChild(style);
-              }
-            }
-          });
-        }
-      }
-    };
-    updateTraceStyles();
-    const observer = new MutationObserver(updateTraceStyles);
-    observer.observe(svg, {
-      childList: true,
-      // Watch for changes to the child elements
-      subtree: false,
-      // Watch for changes in the entire subtree
-      characterData: false
-      // Watch for changes to text content
-    });
-    return () => {
-      observer.disconnect();
-    };
-  }, [svgDivRef, activeEditEvent, circuitJson, editEvents]);
-};
+import { su as su4 } from "@tscircuit/soup-util";
 
 // lib/hooks/useSchematicGroupsOverlay.ts
-import { useEffect as useEffect3 } from "react";
-import { su as su3 } from "@tscircuit/soup-util";
+import { useEffect } from "react";
+import { su } from "@tscircuit/soup-util";
 var GROUP_COLORS = [
   "#8B0000",
   // Dark Red
@@ -220,7 +31,7 @@ var GROUP_COLORS = [
 ];
 var useSchematicGroupsOverlay = (options) => {
   const { svgDivRef, circuitJson, circuitJsonKey, showGroups } = options;
-  useEffect3(() => {
+  useEffect(() => {
     if (svgDivRef.current) {
       const existingOverlays = svgDivRef.current.querySelectorAll(
         ".schematic-group-overlay"
@@ -239,8 +50,8 @@ var useSchematicGroupsOverlay = (options) => {
       const existingOverlays = svg.querySelectorAll(".schematic-group-overlay");
       existingOverlays.forEach((overlay) => overlay.remove());
       try {
-        const sourceGroups = su3(circuitJson).source_group?.list().filter((x) => !!!x.is_subcircuit) || [];
-        const schematicComponents = su3(circuitJson).schematic_component?.list() || [];
+        const sourceGroups = su(circuitJson).source_group?.list().filter((x) => !!!x.is_subcircuit) || [];
+        const schematicComponents = su(circuitJson).schematic_component?.list() || [];
         const sourceGroupHierarchy = /* @__PURE__ */ new Map();
         sourceGroups.forEach((group) => {
           const groupWithParent = group;
@@ -278,7 +89,7 @@ var useSchematicGroupsOverlay = (options) => {
         if (hasMeaningfulGroups) {
           const groupMap = /* @__PURE__ */ new Map();
           for (const comp of schematicComponents) {
-            const sourceComp = su3(circuitJson).source_component.get(
+            const sourceComp = su(circuitJson).source_component.get(
               comp.source_component_id
             );
             if (sourceComp?.source_group_id) {
@@ -462,8 +273,8 @@ function calculateGroupBounds(components, svg) {
 }
 
 // lib/hooks/useSchematicNetHover.ts
-import { su as su4 } from "@tscircuit/soup-util";
-import { useEffect as useEffect4 } from "react";
+import { su as su2 } from "@tscircuit/soup-util";
+import { useEffect as useEffect2 } 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]";
@@ -473,7 +284,7 @@ var useSchematicNetHover = ({
   circuitJsonKey,
   enabled
 }) => {
-  useEffect4(() => {
+  useEffect2(() => {
     const svgDiv = svgDivRef.current;
     if (!enabled || !svgDiv) return;
     const { componentIdToKeys, netLabelIdToKey } = buildNetRegistry(circuitJson);
@@ -549,7 +360,7 @@ var useSchematicNetHover = ({
   }, [svgDivRef, circuitJsonKey, enabled]);
 };
 function buildNetRegistry(circuitJson) {
-  const cju = su4(circuitJson);
+  const cju = su2(circuitJson);
   const srcCompToSchComp = /* @__PURE__ */ new Map();
   for (const c of cju.schematic_component.list()) {
     if (c.source_component_id) {
@@ -586,23 +397,18 @@ var debug = Debug("schematic-viewer");
 var enableDebug = () => {
   Debug.enable("schematic-viewer*");
 };
-var debug_default = debug;
 
 // lib/components/SchematicViewer.tsx
-import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo4, useRef as useRef8, useState as useState6 } from "react";
-import {
-  fromString,
-  identity,
-  toString as transformToString
-} from "transformation-matrix";
+import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef5, useState as useState5 } 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 useEffect5, useState } from "react";
+import { useEffect as useEffect3, useState } from "react";
 var useResizeHandling = (containerRef) => {
   const [containerWidth, setContainerWidth] = useState(0);
   const [containerHeight, setContainerHeight] = useState(0);
-  useEffect5(() => {
+  useEffect3(() => {
     if (!containerRef.current) return;
     const updateDimensions = () => {
       const rect = containerRef.current?.getBoundingClientRect();
@@ -621,192 +427,13 @@ var useResizeHandling = (containerRef) => {
   return { containerWidth, containerHeight };
 };
 
-// lib/hooks/useComponentDragging.ts
-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 = ({
-  onEditEvent,
-  editEvents = [],
-  circuitJson,
-  cancelDrag,
-  svgToScreenProjection,
-  realToSvgProjection,
-  enabled = false,
-  snapToGrid = false
-}) => {
-  const [activeEditEvent, setActiveEditEvent] = useState2(null);
-  const realToScreenProjection = compose2(
-    realToSvgProjection,
-    svgToScreenProjection
-  );
-  const dragStartPosRef = useRef3(null);
-  const activeEditEventRef = useRef3(null);
-  const componentPositionsRef = useRef3(
-    /* @__PURE__ */ new Map()
-  );
-  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, {
-          ...event.new_center
-        });
-      }
-    });
-  }, [editEvents]);
-  const startDrag = useCallback(
-    (clientX, clientY, target) => {
-      if (!enabled) return false;
-      const componentGroup = target.closest(
-        '[data-circuit-json-type="schematic_component"]'
-      );
-      if (!componentGroup) return false;
-      const schematic_component_id = componentGroup.getAttribute(
-        "data-schematic-component-id"
-      );
-      if (!schematic_component_id) return false;
-      if (cancelDrag) cancelDrag();
-      const schematic_component = su5(circuitJson).schematic_component.get(
-        schematic_component_id
-      );
-      if (!schematic_component) return false;
-      dragStartPosRef.current = { x: clientX, y: clientY };
-      let current_position;
-      const trackedPosition = componentPositionsRef.current.get(
-        schematic_component_id
-      );
-      if (trackedPosition) {
-        current_position = { ...trackedPosition };
-      } else {
-        const editEventOffset = getComponentOffsetDueToEvents({
-          editEvents,
-          schematic_component_id
-        });
-        current_position = {
-          x: schematic_component.center.x + editEventOffset.x,
-          y: schematic_component.center.y + editEventOffset.y
-        };
-        componentPositionsRef.current.set(schematic_component_id, {
-          ...current_position
-        });
-      }
-      const newEditEvent = {
-        edit_event_id: Math.random().toString(36).substr(2, 9),
-        edit_event_type: "edit_schematic_component_location",
-        schematic_component_id,
-        original_center: current_position,
-        new_center: { ...current_position },
-        in_progress: true,
-        created_at: Date.now(),
-        _element: componentGroup
-      };
-      activeEditEventRef.current = newEditEvent;
-      setActiveEditEvent(newEditEvent);
-      return true;
-    },
-    [cancelDrag, enabled, circuitJson, editEvents]
-  );
-  const handleMouseDown = useCallback(
-    (e) => {
-      startDrag(e.clientX, e.clientY, e.target);
-    },
-    [startDrag]
-  );
-  const handleTouchStart = useCallback(
-    (e) => {
-      if (e.touches.length !== 1) return;
-      const touch = e.touches[0];
-      if (startDrag(touch.clientX, touch.clientY, e.target)) {
-        e.preventDefault();
-      }
-    },
-    [startDrag]
-  );
-  const updateDragPosition = useCallback(
-    (clientX, clientY) => {
-      if (!activeEditEventRef.current || !dragStartPosRef.current) return;
-      const screenDelta = {
-        x: clientX - dragStartPosRef.current.x,
-        y: clientY - dragStartPosRef.current.y
-      };
-      const mmDelta = {
-        x: screenDelta.x / realToScreenProjection.a,
-        y: screenDelta.y / realToScreenProjection.d
-      };
-      let newCenter = {
-        x: activeEditEventRef.current.original_center.x + mmDelta.x,
-        y: activeEditEventRef.current.original_center.y + mmDelta.y
-      };
-      if (snapToGrid) {
-        const snap = (v) => Math.round(v * 10) / 10;
-        newCenter = { x: snap(newCenter.x), y: snap(newCenter.y) };
-      }
-      const newEditEvent = {
-        ...activeEditEventRef.current,
-        new_center: newCenter
-      };
-      activeEditEventRef.current = newEditEvent;
-      setActiveEditEvent(newEditEvent);
-    },
-    [realToScreenProjection, snapToGrid]
-  );
-  const handleMouseMove = useCallback(
-    (e) => updateDragPosition(e.clientX, e.clientY),
-    [updateDragPosition]
-  );
-  const handleTouchMove = useCallback(
-    (e) => {
-      if (e.touches.length !== 1 || !activeEditEventRef.current) return;
-      e.preventDefault();
-      const touch = e.touches[0];
-      updateDragPosition(touch.clientX, touch.clientY);
-    },
-    [updateDragPosition]
-  );
-  const endDrag = useCallback(() => {
-    if (!activeEditEventRef.current) return;
-    const finalEvent = {
-      ...activeEditEventRef.current,
-      in_progress: false
-    };
-    componentPositionsRef.current.set(finalEvent.schematic_component_id, {
-      ...finalEvent.new_center
-    });
-    debug2("endDrag calling onEditEvent with new edit event", {
-      newEditEvent: finalEvent
-    });
-    if (onEditEvent) onEditEvent(finalEvent);
-    activeEditEventRef.current = null;
-    dragStartPosRef.current = null;
-    setActiveEditEvent(null);
-  }, [onEditEvent]);
-  const handleMouseUp = useCallback(() => endDrag(), [endDrag]);
-  const handleTouchEnd = useCallback(() => endDrag(), [endDrag]);
-  useEffect6(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    window.addEventListener("touchmove", handleTouchMove, { passive: false });
-    window.addEventListener("touchend", handleTouchEnd);
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-      window.removeEventListener("touchmove", handleTouchMove);
-      window.removeEventListener("touchend", handleTouchEnd);
-    };
-  }, [handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
-  return {
-    handleMouseDown,
-    handleTouchStart,
-    isDragging: !!activeEditEventRef.current,
-    activeEditEvent
-  };
-};
+// lib/components/ViewMenu.tsx
+import { useMemo } from "react";
+import { su as su3 } from "@tscircuit/soup-util";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
 // lib/utils/z-index-map.ts
 var zIndexMap = {
-  schematicEditIcon: 50,
-  schematicGridIcon: 49,
   viewMenuIcon: 48,
   viewMenu: 55,
   viewMenuBackdrop: 54,
@@ -815,112 +442,10 @@ var zIndexMap = {
   schematicPortHoverOutline: 48
 };
 
-// lib/components/EditIcon.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var EditIcon = ({
-  onClick,
-  active
-}) => {
-  const handleInteraction = (e) => {
-    e.preventDefault();
-    onClick();
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      onClick: handleInteraction,
-      onTouchEnd: handleInteraction,
-      title: active ? "Disable edit mode" : "Enable edit mode",
-      style: {
-        position: "absolute",
-        top: "16px",
-        right: "64px",
-        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.schematicEditIcon
-      },
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: [
-            /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-            /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
-          ]
-        }
-      )
-    }
-  );
-};
-
-// lib/components/GridIcon.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var GridIcon = ({
-  onClick,
-  active
-}) => {
-  const handleInteraction = (e) => {
-    e.preventDefault();
-    onClick();
-  };
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      onClick: handleInteraction,
-      onTouchEnd: handleInteraction,
-      title: active ? "Hide grid" : "Show grid",
-      style: {
-        position: "absolute",
-        top: "56px",
-        right: "64px",
-        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.schematicGridIcon
-      },
-      children: /* @__PURE__ */ jsx2(
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: /* @__PURE__ */ jsx2("path", { d: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" })
-        }
-      )
-    }
-  );
-};
-
-// lib/components/ViewMenu.tsx
-import { useMemo } from "react";
-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.76",
+  version: "2.0.77",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -966,12 +491,12 @@ var package_default = {
 };
 
 // lib/components/ViewMenuIcon.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ViewMenuIcon = ({
   active = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -994,7 +519,7 @@ var ViewMenuIcon = ({
         gap: "4px",
         zIndex: zIndexMap.viewMenuIcon
       },
-      children: /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs(
         "svg",
         {
           width: "16",
@@ -1004,9 +529,9 @@ var ViewMenuIcon = ({
           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" })
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1" }),
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1" })
           ]
         }
       )
@@ -1015,7 +540,7 @@ var ViewMenuIcon = ({
 };
 
 // lib/components/ViewMenu.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var FONT_FAMILY = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles = {
   backgroundColor: "#ffffff",
@@ -1062,7 +587,7 @@ var HIGHLIGHT_CSS = `
 .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(
+var CheckIcon = () => /* @__PURE__ */ jsx2(
   "svg",
   {
     width: "14",
@@ -1074,7 +599,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx4(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx4("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" })
   }
 );
 var ViewMenu = ({
@@ -1090,13 +615,13 @@ var ViewMenu = ({
   const hasGroups = useMemo(() => {
     if (!circuitJson || circuitJson.length === 0) return false;
     try {
-      const sourceGroups = su6(circuitJson).source_group?.list() || [];
+      const sourceGroups = su3(circuitJson).source_group?.list() || [];
       if (sourceGroups.length > 0) return true;
-      const schematicComponents = su6(circuitJson).schematic_component?.list() || [];
+      const schematicComponents = su3(circuitJson).schematic_component?.list() || [];
       if (schematicComponents.length > 1) {
         const componentTypes = /* @__PURE__ */ new Set();
         for (const comp of schematicComponents) {
-          const sourceComp = su6(circuitJson).source_component.get(
+          const sourceComp = su3(circuitJson).source_component.get(
             comp.source_component_id
           );
           if (sourceComp?.ftype) {
@@ -1111,9 +636,9 @@ var ViewMenu = ({
       return false;
     }
   }, [circuitJsonKey]);
-  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(
+  return /* @__PURE__ */ jsxs2(DropdownMenu.Root, { open, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsx2(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx2(ViewMenuIcon, { active: open }) }),
+    /* @__PURE__ */ jsx2(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs2(
       DropdownMenu.Content,
       {
         style: contentStyles,
@@ -1122,8 +647,8 @@ var ViewMenu = ({
         sideOffset: 8,
         collisionPadding: 10,
         children: [
-          /* @__PURE__ */ jsx4("style", { children: HIGHLIGHT_CSS }),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx2("style", { children: HIGHLIGHT_CSS }),
+          /* @__PURE__ */ jsxs2(
             DropdownMenu.Item,
             {
               className: "sv-vm-item",
@@ -1135,12 +660,12 @@ var ViewMenu = ({
                 if (hasGroups) onToggleGroups(!showGroups);
               },
               children: [
-                /* @__PURE__ */ jsx4("span", { style: iconSlotStyles, children: showGroups && /* @__PURE__ */ jsx4(CheckIcon, {}) }),
-                /* @__PURE__ */ jsx4("span", { children: "View Schematic Groups" })
+                /* @__PURE__ */ jsx2("span", { style: iconSlotStyles, children: showGroups && /* @__PURE__ */ jsx2(CheckIcon, {}) }),
+                /* @__PURE__ */ jsx2("span", { children: "View Schematic Groups" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsxs2(
             DropdownMenu.Item,
             {
               className: "sv-vm-item",
@@ -1148,13 +673,13 @@ var ViewMenu = ({
               onSelect: (e) => e.preventDefault(),
               onPointerUp: () => onToggleGrid(!showGrid),
               children: [
-                /* @__PURE__ */ jsx4("span", { style: iconSlotStyles, children: showGrid && /* @__PURE__ */ jsx4(CheckIcon, {}) }),
-                /* @__PURE__ */ jsx4("span", { children: "Show Grid" })
+                /* @__PURE__ */ jsx2("span", { style: iconSlotStyles, children: showGrid && /* @__PURE__ */ jsx2(CheckIcon, {}) }),
+                /* @__PURE__ */ jsx2("span", { children: "Show Grid" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx4(DropdownMenu.Separator, { style: separatorStyles }),
-          /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx2(DropdownMenu.Separator, { style: separatorStyles }),
+          /* @__PURE__ */ jsxs2(
             "div",
             {
               style: {
@@ -1177,7 +702,7 @@ var ViewMenu = ({
 };
 
 // lib/hooks/useLocalStorage.ts
-import { useCallback as useCallback2 } from "react";
+import { useCallback } from "react";
 var STORAGE_KEYS = {
   IS_SHOWING_SCHEMATIC_GROUPS: "schematic_viewer_show_groups",
   SELECTED_SCHEMATIC_SHEET: "schematic_viewer_selected_sheet"
@@ -1217,13 +742,13 @@ var setStoredString = (key, value) => {
 // lib/components/MouseTracker.tsx
 import {
   createContext,
-  useCallback as useCallback3,
+  useCallback as useCallback2,
   useContext,
-  useEffect as useEffect7,
+  useEffect as useEffect4,
   useMemo as useMemo2,
-  useRef as useRef4
+  useRef
 } from "react";
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
 var MouseTrackerContext = createContext(null);
 var DRAG_THRESHOLD_PX = 5;
 var boundsAreEqual = (a, b) => {
@@ -1234,24 +759,24 @@ var boundsAreEqual = (a, b) => {
 var MouseTracker = ({ children }) => {
   const existingContext = useContext(MouseTrackerContext);
   if (existingContext) {
-    return /* @__PURE__ */ jsx5(Fragment, { children });
+    return /* @__PURE__ */ jsx3(Fragment, { children });
   }
-  return /* @__PURE__ */ jsx5(MouseTrackerProvider, { children });
+  return /* @__PURE__ */ jsx3(MouseTrackerProvider, { children });
 };
 var MouseTrackerProvider = ({ children }) => {
-  const storeRef = useRef4({
+  const storeRef = useRef({
     pointer: null,
     boundingBoxes: /* @__PURE__ */ new Map(),
     hoveringIds: /* @__PURE__ */ new Set(),
     subscribers: /* @__PURE__ */ new Set(),
     mouseDownPosition: null
   });
-  const notifySubscribers = useCallback3(() => {
+  const notifySubscribers = useCallback2(() => {
     for (const callback of storeRef.current.subscribers) {
       callback();
     }
   }, []);
-  const updateHovering = useCallback3(() => {
+  const updateHovering = useCallback2(() => {
     const pointer = storeRef.current.pointer;
     const newHovering = /* @__PURE__ */ new Set();
     if (pointer) {
@@ -1270,14 +795,14 @@ var MouseTrackerProvider = ({ children }) => {
     storeRef.current.hoveringIds = newHovering;
     notifySubscribers();
   }, [notifySubscribers]);
-  const registerBoundingBox = useCallback3(
+  const registerBoundingBox = useCallback2(
     (id, registration) => {
       storeRef.current.boundingBoxes.set(id, registration);
       updateHovering();
     },
     [updateHovering]
   );
-  const updateBoundingBox = useCallback3(
+  const updateBoundingBox = useCallback2(
     (id, registration) => {
       const existing = storeRef.current.boundingBoxes.get(id);
       if (existing && boundsAreEqual(existing.bounds, registration.bounds) && existing.onClick === registration.onClick) {
@@ -1288,7 +813,7 @@ var MouseTrackerProvider = ({ children }) => {
     },
     [updateHovering]
   );
-  const unregisterBoundingBox = useCallback3(
+  const unregisterBoundingBox = useCallback2(
     (id) => {
       const removed = storeRef.current.boundingBoxes.delete(id);
       if (removed) {
@@ -1297,16 +822,16 @@ var MouseTrackerProvider = ({ children }) => {
     },
     [updateHovering]
   );
-  const subscribe = useCallback3((listener) => {
+  const subscribe = useCallback2((listener) => {
     storeRef.current.subscribers.add(listener);
     return () => {
       storeRef.current.subscribers.delete(listener);
     };
   }, []);
-  const isHovering = useCallback3((id) => {
+  const isHovering = useCallback2((id) => {
     return storeRef.current.hoveringIds.has(id);
   }, []);
-  useEffect7(() => {
+  useEffect4(() => {
     const handlePointerPosition = (event) => {
       const { clientX, clientY } = event;
       const pointer = storeRef.current.pointer;
@@ -1390,19 +915,19 @@ var MouseTrackerProvider = ({ children }) => {
       isHovering
     ]
   );
-  return /* @__PURE__ */ jsx5(MouseTrackerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx3(MouseTrackerContext.Provider, { value, children });
 };
 
 // lib/components/SchematicComponentMouseTarget.tsx
-import { useCallback as useCallback4, useEffect as useEffect9, useRef as useRef6, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef3, useState as useState2 } from "react";
 
 // lib/hooks/useMouseEventsOverBoundingBox.ts
 import {
   useContext as useContext2,
-  useEffect as useEffect8,
+  useEffect as useEffect5,
   useId,
   useMemo as useMemo3,
-  useRef as useRef5,
+  useRef as useRef2,
   useSyncExternalStore
 } from "react";
 var useMouseEventsOverBoundingBox = (options) => {
@@ -1413,7 +938,7 @@ var useMouseEventsOverBoundingBox = (options) => {
     );
   }
   const id = useId();
-  const latestOptionsRef = useRef5(options);
+  const latestOptionsRef = useRef2(options);
   latestOptionsRef.current = options;
   const handleClick = useMemo3(
     () => (event) => {
@@ -1421,7 +946,7 @@ var useMouseEventsOverBoundingBox = (options) => {
     },
     []
   );
-  useEffect8(() => {
+  useEffect5(() => {
     context.registerBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -1430,7 +955,7 @@ var useMouseEventsOverBoundingBox = (options) => {
       context.unregisterBoundingBox(id);
     };
   }, [context, handleClick, id]);
-  useEffect8(() => {
+  useEffect5(() => {
     context.updateBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -1454,7 +979,7 @@ var useMouseEventsOverBoundingBox = (options) => {
 };
 
 // lib/components/SchematicComponentMouseTarget.tsx
-import { jsx as jsx6 } 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;
@@ -1469,9 +994,9 @@ var SchematicComponentMouseTarget = ({
   showOutline,
   circuitJsonKey
 }) => {
-  const [measurement, setMeasurement] = useState3(null);
-  const frameRef = useRef6(null);
-  const measure = useCallback4(() => {
+  const [measurement, setMeasurement] = useState2(null);
+  const frameRef = useRef3(null);
+  const measure = useCallback3(() => {
     frameRef.current = null;
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1506,14 +1031,14 @@ var SchematicComponentMouseTarget = ({
       (prev) => areMeasurementsEqual(prev, nextMeasurement) ? prev : nextMeasurement
     );
   }, [componentId, containerRef, svgDivRef]);
-  const scheduleMeasure = useCallback4(() => {
+  const scheduleMeasure = useCallback3(() => {
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect9(() => {
+  useEffect6(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect9(() => {
+  useEffect6(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1545,7 +1070,7 @@ var SchematicComponentMouseTarget = ({
       }
     };
   }, [scheduleMeasure, svgDivRef, containerRef]);
-  const handleClick = useCallback4(
+  const handleClick = useCallback3(
     (event) => {
       if (onComponentClick) {
         onComponentClick(componentId, event);
@@ -1558,7 +1083,7 @@ var SchematicComponentMouseTarget = ({
     bounds,
     onClick: onComponentClick ? handleClick : void 0
   });
-  useEffect9(() => {
+  useEffect6(() => {
     if (onHoverChange) {
       onHoverChange(componentId, hovering);
     }
@@ -1567,7 +1092,7 @@ var SchematicComponentMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       style: {
@@ -1585,8 +1110,8 @@ var SchematicComponentMouseTarget = ({
 };
 
 // lib/components/SchematicPortMouseTarget.tsx
-import { useCallback as useCallback5, useEffect as useEffect10, useRef as useRef7, useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef4, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var areMeasurementsEqual2 = (a, b) => {
   if (!a && !b) return true;
   if (!a || !b) return false;
@@ -1602,9 +1127,9 @@ var SchematicPortMouseTarget = ({
   showOutline,
   circuitJsonKey
 }) => {
-  const [measurement, setMeasurement] = useState4(null);
-  const frameRef = useRef7(null);
-  const measure = useCallback5(() => {
+  const [measurement, setMeasurement] = useState3(null);
+  const frameRef = useRef4(null);
+  const measure = useCallback4(() => {
     frameRef.current = null;
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1640,14 +1165,14 @@ var SchematicPortMouseTarget = ({
       (prev) => areMeasurementsEqual2(prev, nextMeasurement) ? prev : nextMeasurement
     );
   }, [portId, containerRef, svgDivRef]);
-  const scheduleMeasure = useCallback5(() => {
+  const scheduleMeasure = useCallback4(() => {
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect10(() => {
+  useEffect7(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect10(() => {
+  useEffect7(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1679,7 +1204,7 @@ var SchematicPortMouseTarget = ({
       }
     };
   }, [scheduleMeasure, svgDivRef, containerRef]);
-  const handleClick = useCallback5(
+  const handleClick = useCallback4(
     (event) => {
       if (onPortClick) {
         onPortClick(portId, event);
@@ -1692,7 +1217,7 @@ var SchematicPortMouseTarget = ({
     bounds,
     onClick: onPortClick ? handleClick : void 0
   });
-  useEffect10(() => {
+  useEffect7(() => {
     if (onHoverChange) {
       onHoverChange(portId, hovering);
     }
@@ -1701,8 +1226,8 @@ var SchematicPortMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -1720,7 +1245,7 @@ var SchematicPortMouseTarget = ({
         }
       }
     ),
-    hovering && portLabel && /* @__PURE__ */ jsx7(
+    hovering && portLabel && /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -1745,9 +1270,9 @@ var SchematicPortMouseTarget = ({
 };
 
 // lib/components/SchematicSheetSelector.tsx
-import { useState as useState5 } from "react";
+import { useState as useState4 } from "react";
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var FONT_FAMILY2 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles2 = {
   backgroundColor: "#ffffff",
@@ -1797,7 +1322,7 @@ var MENU_CSS = `
 .sv-sheet-chevron { transition: transform 0.2s ease; }
 [data-state="open"] > .sv-sheet-chevron { transform: rotate(180deg); }
 `;
-var CheckIcon2 = () => /* @__PURE__ */ jsx8(
+var CheckIcon2 = () => /* @__PURE__ */ jsx6(
   "svg",
   {
     width: "14",
@@ -1809,10 +1334,10 @@ var CheckIcon2 = () => /* @__PURE__ */ jsx8(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx8("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx6("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx8(
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx6(
   "svg",
   {
     className,
@@ -1826,7 +1351,7 @@ var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx8(
     strokeLinejoin: "round",
     style: { opacity: 0.6, flexShrink: 0 },
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx8("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx6("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var SchematicSheetSelector = ({
@@ -1834,16 +1359,16 @@ var SchematicSheetSelector = ({
   selectedSheetId,
   onSelectSheet
 }) => {
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState4(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(Fragment3, { children: [
-    /* @__PURE__ */ jsx8("style", { children: MENU_CSS }),
-    /* @__PURE__ */ jsxs5(DropdownMenu2.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx8(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx6("style", { children: MENU_CSS }),
+    /* @__PURE__ */ jsxs4(DropdownMenu2.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx6(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
         "button",
         {
           type: "button",
@@ -1870,13 +1395,13 @@ var SchematicSheetSelector = ({
             zIndex: zIndexMap.viewMenuIcon
           },
           children: [
-            /* @__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__ */ jsx6("span", { style: { color: "#888888", flexShrink: 0 }, children: "Sheet:" }),
+            /* @__PURE__ */ jsx6("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx6(ChevronDownIcon, { className: "sv-sheet-chevron" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx8(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx6(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx6(
         DropdownMenu2.Content,
         {
           style: contentStyles2,
@@ -1886,7 +1411,7 @@ var SchematicSheetSelector = ({
           collisionPadding: 10,
           children: sheets.map((sheet) => {
             const selected = sheet.schematic_sheet_id === selectedSheetId;
-            return /* @__PURE__ */ jsxs5(
+            return /* @__PURE__ */ jsxs4(
               DropdownMenu2.Item,
               {
                 className: "sv-sheet-item",
@@ -1898,8 +1423,8 @@ var SchematicSheetSelector = ({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx8("span", { style: iconSlotStyles2, children: selected && /* @__PURE__ */ jsx8(CheckIcon2, {}) }),
-                  /* @__PURE__ */ jsx8("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
+                  /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: selected && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
+                  /* @__PURE__ */ jsx6("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
                 ]
               },
               sheet.schematic_sheet_id
@@ -1912,16 +1437,12 @@ var SchematicSheetSelector = ({
 };
 
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
-  editEvents: unappliedEditEvents = [],
-  onEditEvent,
-  defaultEditMode = false,
   debugGrid = false,
-  editingEnabled = false,
-  debug: debug3 = false,
+  debug: debug2 = false,
   clickToInteractEnabled = false,
   colorOverrides,
   disableGroups = false,
@@ -1933,7 +1454,7 @@ var SchematicViewer = ({
   css,
   className
 }) => {
-  if (debug3) {
+  if (debug2) {
     enableDebug();
   }
   const getCircuitHash = (circuitJson2) => {
@@ -1953,7 +1474,7 @@ var SchematicViewer = ({
   }, [circuitJsonKey]);
   const hasMultipleSheets = schematicSheets.length > 1;
   const defaultSheetId = schematicSheets[0]?.schematic_sheet_id;
-  const [selectedSheetId, setSelectedSheetId] = useState6(
+  const [selectedSheetId, setSelectedSheetId] = useState5(
     () => {
       const stored = getStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET);
       if (stored && schematicSheets.some((s) => s.schematic_sheet_id === stored)) {
@@ -1962,14 +1483,14 @@ var SchematicViewer = ({
       return defaultSheetId;
     }
   );
-  useEffect11(() => {
+  useEffect8(() => {
     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(
+  const handleSelectSheet = useCallback5(
     (sheetId) => {
       setSelectedSheetId(sheetId);
       setStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET, sheetId);
@@ -1977,21 +1498,19 @@ var SchematicViewer = ({
     },
     [onSchematicSheetChange]
   );
-  const [editModeEnabled, setEditModeEnabled] = useState6(defaultEditMode);
-  const [snapToGrid, setSnapToGrid] = useState6(true);
-  const [showGridInternal, setShowGridInternal] = useState6(false);
+  const [showGridInternal, setShowGridInternal] = useState5(false);
   const showGrid = debugGrid || showGridInternal;
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState6(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState5(
     !clickToInteractEnabled
   );
-  const [showViewMenu, setShowViewMenu] = useState6(false);
-  const [showSchematicGroups, setShowSchematicGroups] = useState6(() => {
+  const [showViewMenu, setShowViewMenu] = useState5(false);
+  const [showSchematicGroups, setShowSchematicGroups] = useState5(() => {
     if (disableGroups) return false;
     return getStoredBoolean("schematic_viewer_show_groups", false);
   });
-  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState6(false);
-  const hoveringComponentsRef = useRef8(/* @__PURE__ */ new Set());
-  const handleComponentHoverChange = useCallback6(
+  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState5(false);
+  const hoveringComponentsRef = useRef5(/* @__PURE__ */ new Set());
+  const handleComponentHoverChange = useCallback5(
     (componentId, isHovering) => {
       if (isHovering) {
         hoveringComponentsRef.current.add(componentId);
@@ -2002,9 +1521,9 @@ var SchematicViewer = ({
     },
     []
   );
-  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState6(false);
-  const hoveringPortsRef = useRef8(/* @__PURE__ */ new Set());
-  const handlePortHoverChange = useCallback6(
+  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState5(false);
+  const hoveringPortsRef = useRef5(/* @__PURE__ */ new Set());
+  const handlePortHoverChange = useCallback5(
     (portId, isHovering) => {
       if (isHovering) {
         hoveringPortsRef.current.add(portId);
@@ -2015,11 +1534,11 @@ var SchematicViewer = ({
     },
     []
   );
-  const svgDivRef = useRef8(null);
-  const touchStartRef = useRef8(null);
+  const svgDivRef = useRef5(null);
+  const touchStartRef = useRef5(null);
   const schematicComponentIds = useMemo4(() => {
     try {
-      const components = su7(circuitJson).schematic_component?.list() ?? [];
+      const components = su4(circuitJson).schematic_component?.list() ?? [];
       return components.filter(
         (component) => !activeSheetId || component.schematic_sheet_id === activeSheetId
       ).map((component) => component.schematic_component_id);
@@ -2031,12 +1550,12 @@ var SchematicViewer = ({
   const schematicPortsInfo = useMemo4(() => {
     if (!showSchematicPorts) return [];
     try {
-      const ports = (su7(circuitJson).schematic_port?.list() ?? []).filter(
+      const ports = (su4(circuitJson).schematic_port?.list() ?? []).filter(
         (port) => !activeSheetId || port.schematic_sheet_id === activeSheetId
       );
       return ports.map((port) => {
-        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 sourcePort = su4(circuitJson).source_port.get(port.source_port_id);
+        const sourceComponent = sourcePort?.source_component_id ? su4(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 {
@@ -2068,21 +1587,7 @@ var SchematicViewer = ({
     }
     touchStartRef.current = null;
   };
-  const [internalEditEvents, setInternalEditEvents] = useState6([]);
-  const circuitJsonRef = useRef8(circuitJson);
-  useEffect11(() => {
-    const circuitHash = getCircuitHash(circuitJson);
-    const circuitHashRef = getCircuitHash(circuitJsonRef.current);
-    if (circuitHash !== circuitHashRef) {
-      setInternalEditEvents([]);
-      circuitJsonRef.current = circuitJson;
-    }
-  }, [circuitJson]);
-  const {
-    ref: containerRef,
-    cancelDrag,
-    transform: svgToScreenProjection
-  } = useMouseMatrixTransform({
+  const { ref: containerRef } = useMouseMatrixTransform({
     onSetTransform(transform) {
       if (!svgDivRef.current) return;
       svgDivRef.current.style.transform = transformToString(transform);
@@ -2120,55 +1625,6 @@ var SchematicViewer = ({
     );
     return match?.[1] ?? "transparent";
   }, [svgString]);
-  const realToSvgProjection = useMemo4(() => {
-    if (!svgString) return identity();
-    const transformString = svgString.match(
-      /data-real-to-screen-transform="([^"]+)"/
-    )?.[1];
-    try {
-      return fromString(transformString);
-    } catch (e) {
-      console.error(e);
-      return identity();
-    }
-  }, [svgString]);
-  const handleEditEvent = (event) => {
-    setInternalEditEvents((prev) => [...prev, event]);
-    if (onEditEvent) {
-      onEditEvent(event);
-    }
-  };
-  const editEventsWithUnappliedEditEvents = useMemo4(() => {
-    return [...unappliedEditEvents, ...internalEditEvents];
-  }, [unappliedEditEvents, internalEditEvents]);
-  const {
-    handleMouseDown,
-    handleTouchStart: handleComponentTouchStart,
-    isDragging,
-    activeEditEvent
-  } = useComponentDragging({
-    onEditEvent: handleEditEvent,
-    cancelDrag,
-    realToSvgProjection,
-    svgToScreenProjection,
-    circuitJson,
-    editEvents: editEventsWithUnappliedEditEvents,
-    enabled: editModeEnabled && isInteractionEnabled,
-    snapToGrid
-  });
-  useChangeSchematicComponentLocationsInSvg({
-    svgDivRef,
-    editEvents: editEventsWithUnappliedEditEvents,
-    realToSvgProjection,
-    svgToScreenProjection,
-    activeEditEvent
-  });
-  useChangeSchematicTracesForMovedComponents({
-    svgDivRef,
-    circuitJson,
-    activeEditEvent,
-    editEvents: editEventsWithUnappliedEditEvents
-  });
   useSchematicGroupsOverlay({
     svgDivRef,
     circuitJson,
@@ -2181,12 +1637,8 @@ var SchematicViewer = ({
     circuitJsonKey: `${circuitJsonKey}_${activeSheetId ?? ""}`,
     enabled: netHoverHighlightEnabled
   });
-  const handleComponentTouchStartRef = useRef8(handleComponentTouchStart);
-  useEffect11(() => {
-    handleComponentTouchStartRef.current = handleComponentTouchStart;
-  }, [handleComponentTouchStart]);
   const svgDiv = useMemo4(
-    () => /* @__PURE__ */ jsx9(
+    () => /* @__PURE__ */ jsx7(
       "div",
       {
         ref: svgDivRef,
@@ -2195,22 +1647,17 @@ var SchematicViewer = ({
           transformOrigin: "0 0"
         },
         className: onSchematicComponentClicked ? "schematic-component-clickable" : void 0,
-        onTouchStart: (e) => {
-          if (editModeEnabled && isInteractionEnabled) {
-            handleComponentTouchStartRef.current(e);
-          }
-        },
         dangerouslySetInnerHTML: { __html: svgString }
       }
     ),
-    [svgString, isInteractionEnabled, clickToInteractEnabled, editModeEnabled]
+    [svgString, isInteractionEnabled, clickToInteractEnabled]
   );
-  return /* @__PURE__ */ jsxs6(MouseTracker, { children: [
-    netHoverHighlightEnabled && /* @__PURE__ */ jsx9("style", { children: `.sch-net-faded { opacity: 0.35; }
+  return /* @__PURE__ */ jsxs5(MouseTracker, { children: [
+    netHoverHighlightEnabled && /* @__PURE__ */ jsx7("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__ */ 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__ */ jsxs6(
+    onSchematicComponentClicked && /* @__PURE__ */ jsx7("style", { children: `.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }` }),
+    onSchematicPortClicked && /* @__PURE__ */ jsx7("style", { children: `[data-schematic-port-id]:hover { cursor: pointer !important; }` }),
+    /* @__PURE__ */ jsxs5(
       "div",
       {
         ref: containerRef,
@@ -2218,18 +1665,10 @@ var SchematicViewer = ({
           position: "relative",
           backgroundColor: containerBackgroundColor,
           overflow: "hidden",
-          cursor: isDragging ? "grabbing" : clickToInteractEnabled && !isInteractionEnabled ? "pointer" : isHoveringClickableComponent && onSchematicComponentClicked ? "pointer" : isHoveringClickablePort && onSchematicPortClicked ? "pointer" : "grab",
+          cursor: clickToInteractEnabled && !isInteractionEnabled ? "pointer" : isHoveringClickableComponent && onSchematicComponentClicked ? "pointer" : isHoveringClickablePort && onSchematicPortClicked ? "pointer" : "grab",
           minHeight: "300px",
           ...containerStyle
         },
-        onMouseDown: (e) => {
-          if (clickToInteractEnabled && !isInteractionEnabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-          }
-          handleMouseDown(e);
-        },
         onMouseDownCapture: (e) => {
           if (clickToInteractEnabled && !isInteractionEnabled) {
             e.preventDefault();
@@ -2240,7 +1679,7 @@ var SchematicViewer = ({
         onTouchStart: handleTouchStart,
         onTouchEnd: handleTouchEnd,
         children: [
-          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx9(
+          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx7(
             "div",
             {
               onClick: (e) => {
@@ -2259,7 +1698,7 @@ var SchematicViewer = ({
                 pointerEvents: "all",
                 touchAction: "pan-x pan-y pinch-zoom"
               },
-              children: /* @__PURE__ */ jsx9(
+              children: /* @__PURE__ */ jsx7(
                 "div",
                 {
                   style: {
@@ -2276,21 +1715,7 @@ var SchematicViewer = ({
               )
             }
           ),
-          editingEnabled && /* @__PURE__ */ jsx9(
-            EditIcon,
-            {
-              active: editModeEnabled,
-              onClick: () => setEditModeEnabled(!editModeEnabled)
-            }
-          ),
-          editingEnabled && editModeEnabled && /* @__PURE__ */ jsx9(
-            GridIcon,
-            {
-              active: snapToGrid,
-              onClick: () => setSnapToGrid(!snapToGrid)
-            }
-          ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx7(
             ViewMenu,
             {
               circuitJson,
@@ -2308,7 +1733,7 @@ var SchematicViewer = ({
               onToggleGrid: setShowGridInternal
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx7(
             SchematicSheetSelector,
             {
               sheets: schematicSheets,
@@ -2316,7 +1741,7 @@ var SchematicViewer = ({
               onSelectSheet: handleSelectSheet
             }
           ),
-          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx9(
+          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx7(
             SchematicComponentMouseTarget,
             {
               componentId,
@@ -2335,7 +1760,7 @@ var SchematicViewer = ({
             componentId
           )),
           svgDiv,
-          showSchematicPorts && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx9(
+          showSchematicPorts && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx7(
             SchematicPortMouseTarget,
             {
               portId,
@@ -2365,7 +1790,7 @@ import {
   convertCircuitJsonToSchematicSimulationSvg,
   convertCircuitJsonToSimulationGraphSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect12, useMemo as useMemo5, useRef as useRef9, useState as useState8 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef6, useState as useState7 } from "react";
 import { toString as transformToString2 } from "transformation-matrix";
 import { useMouseMatrixTransform as useMouseMatrixTransform2 } from "use-mouse-matrix-transform";
 
@@ -2383,8 +1808,8 @@ var getAnalogSimulationBackgroundColor = (simulationSvg, colorOverrides) => getR
 
 // lib/components/AnalogSimulationSelector.tsx
 import * as DropdownMenu3 from "@radix-ui/react-dropdown-menu";
-import { useState as useState7 } from "react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var FONT_FAMILY3 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles3 = {
   backgroundColor: "#ffffff",
@@ -2434,7 +1859,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__ */ jsx8(
   "svg",
   {
     width: "14",
@@ -2446,10 +1871,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__ */ jsx8("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx10(
+var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx8(
   "svg",
   {
     className,
@@ -2463,7 +1888,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__ */ jsx8("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var getSimulationLabels = (simulations) => {
@@ -2482,17 +1907,17 @@ var AnalogSimulationSelector = ({
   selectedSimulationExperimentId,
   onSelectSimulation
 }) => {
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState6(false);
   if (simulations.length <= 1) return null;
   const simulationLabels = getSimulationLabels(simulations);
   const selectedSimulation = simulationLabels.find(
     ({ simulation }) => simulation.simulation_experiment_id === selectedSimulationExperimentId
   );
   const selectedLabel = selectedSimulation?.label ?? "Select simulation";
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx10("style", { children: MENU_CSS2 }),
-    /* @__PURE__ */ jsxs7(DropdownMenu3.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx10(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx8("style", { children: MENU_CSS2 }),
+    /* @__PURE__ */ jsxs6(DropdownMenu3.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx8(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs6(
         "button",
         {
           type: "button",
@@ -2519,13 +1944,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__ */ jsx8("span", { style: { color: "#888888", flexShrink: 0 }, children: "Simulation:" }),
+            /* @__PURE__ */ jsx8("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx8(ChevronDownIcon2, { className: "sv-simulation-chevron" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx10(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx8(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx8(
         DropdownMenu3.Content,
         {
           style: contentStyles3,
@@ -2535,7 +1960,7 @@ var AnalogSimulationSelector = ({
           collisionPadding: 10,
           children: simulationLabels.map(({ simulation, label }) => {
             const selected = simulation.simulation_experiment_id === selectedSimulationExperimentId;
-            return /* @__PURE__ */ jsxs7(
+            return /* @__PURE__ */ jsxs6(
               DropdownMenu3.Item,
               {
                 className: "sv-simulation-item",
@@ -2547,8 +1972,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__ */ jsx8("span", { style: iconSlotStyles3, children: selected && /* @__PURE__ */ jsx8(CheckIcon3, {}) }),
+                  /* @__PURE__ */ jsx8("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: label })
                 ]
               },
               simulation.simulation_experiment_id
@@ -2561,7 +1986,7 @@ var AnalogSimulationSelector = ({
 };
 
 // lib/components/AnalogSimulationViewer.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_RENDER_WIDTH = 1200;
 var DEFAULT_COMBINED_RENDER_ASPECT_RATIO = 1;
 var DEFAULT_GRAPH_ONLY_RENDER_ASPECT_RATIO = 2;
@@ -2576,16 +2001,16 @@ var AnalogSimulationViewer = ({
   onSimulationChange,
   acSweepView = "magnitude"
 }) => {
-  const [circuitJson, setCircuitJson] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(true);
-  const [error, setError] = useState8(null);
-  const [svgObjectUrl, setSvgObjectUrl] = useState8(null);
-  const containerRef = useRef9(null);
-  const imgRef = useRef9(null);
+  const [circuitJson, setCircuitJson] = useState7(null);
+  const [isLoading, setIsLoading] = useState7(true);
+  const [error, setError] = useState7(null);
+  const [svgObjectUrl, setSvgObjectUrl] = useState7(null);
+  const containerRef = useRef6(null);
+  const imgRef = useRef6(null);
   const { containerWidth } = useResizeHandling(
     containerRef
   );
-  const [isDragging, setIsDragging] = useState8(false);
+  const [isDragging, setIsDragging] = useState7(false);
   const {
     ref: transformRef,
     cancelDrag: _cancelDrag,
@@ -2601,7 +2026,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(() => {
+  useEffect9(() => {
     setIsLoading(true);
     setError(null);
     setCircuitJson(inputCircuitJson);
@@ -2613,11 +2038,11 @@ var AnalogSimulationViewer = ({
       (element) => element.type === "simulation_experiment"
     );
   }, [circuitJson]);
-  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState8(null);
+  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState7(null);
   const simulationExperimentId = (selectedSimulationExperimentId && simulationExperiments.some(
     (simulation) => simulation.simulation_experiment_id === selectedSimulationExperimentId
   ) ? selectedSimulationExperimentId : simulationExperiments[0]?.simulation_experiment_id) ?? null;
-  useEffect12(() => {
+  useEffect9(() => {
     if (simulationExperimentId !== selectedSimulationExperimentId) {
       setSelectedSimulationExperimentId(simulationExperimentId);
     }
@@ -2654,7 +2079,7 @@ var AnalogSimulationViewer = ({
     simulationExperimentId,
     acSweepView
   ]);
-  useEffect12(() => {
+  useEffect9(() => {
     if (!simulationSvg) {
       setSvgObjectUrl(null);
       return;
@@ -2680,7 +2105,7 @@ var AnalogSimulationViewer = ({
   const handleTouchStart = (_e) => {
     setIsDragging(true);
   };
-  useEffect12(() => {
+  useEffect9(() => {
     const handleMouseUp = () => {
       setIsDragging(false);
     };
@@ -2695,7 +2120,7 @@ var AnalogSimulationViewer = ({
     };
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -2715,7 +2140,7 @@ var AnalogSimulationViewer = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -2730,15 +2155,15 @@ var AnalogSimulationViewer = ({
           ...containerStyle
         },
         className,
-        children: /* @__PURE__ */ jsxs8("div", { style: { textAlign: "center", padding: "20px" }, children: [
-          /* @__PURE__ */ jsx11("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
-          /* @__PURE__ */ jsx11("div", { style: { fontSize: "14px" }, children: error })
+        children: /* @__PURE__ */ jsxs7("div", { style: { textAlign: "center", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx9("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
+          /* @__PURE__ */ jsx9("div", { style: { fontSize: "14px" }, children: error })
         ] })
       }
     );
   }
   if (!simulationSvg) {
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         style: {
@@ -2754,11 +2179,11 @@ var AnalogSimulationViewer = ({
         },
         className,
         children: [
-          /* @__PURE__ */ jsx11("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
-          /* @__PURE__ */ jsxs8("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
+          /* @__PURE__ */ jsx9("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
+          /* @__PURE__ */ jsxs7("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
             "Use",
             " ",
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx9(
               "code",
               {
                 style: {
@@ -2778,7 +2203,7 @@ var AnalogSimulationViewer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: (node) => {
@@ -2797,7 +2222,7 @@ var AnalogSimulationViewer = ({
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx9(
           AnalogSimulationSelector,
           {
             simulations: simulationExperiments,
@@ -2805,7 +2230,7 @@ var AnalogSimulationViewer = ({
             onSelectSimulation: handleSelectSimulation
           }
         ),
-        svgObjectUrl ? /* @__PURE__ */ jsx11(
+        svgObjectUrl ? /* @__PURE__ */ jsx9(
           "img",
           {
             ref: imgRef,
@@ -2819,7 +2244,7 @@ var AnalogSimulationViewer = ({
               objectFit: "contain"
             }
           }
-        ) : /* @__PURE__ */ jsx11(
+        ) : /* @__PURE__ */ jsx9(
           "div",
           {
             style: {