@tscircuit/schematic-viewer 2.0.79 → 2.0.81

package/dist/index.js

@@ -438,7 +438,7 @@ var enableDebug = () => {
 };
 
 // lib/components/SchematicViewer.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo4, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
 import { toString as transformToString } from "transformation-matrix";
 import { useMouseMatrixTransform } from "use-mouse-matrix-transform";
 
@@ -575,12 +575,137 @@ var useContextMenu = ({ containerRef }) => {
   };
 };
 
+// lib/utils/component-details.ts
+import {
+  getPcbElementBounds,
+  getPcbElementsWithinBounds
+} from "@tscircuit/circuit-json-util";
+import { gzipSync, strToU8 } from "fflate";
+var hiddenSourceComponentKeys = /* @__PURE__ */ new Set([
+  "type",
+  "source_component_id",
+  "source_group_id",
+  "subcircuit_id",
+  "display_name",
+  "ftype",
+  "are_pins_interchangeable"
+]);
+var priorityKeys = [
+  "name",
+  "resistance",
+  "capacitance",
+  "inductance",
+  "frequency",
+  "voltage",
+  "current",
+  "max_voltage_rating",
+  "max_current_rating",
+  "power_rating",
+  "manufacturer_part_number",
+  "supplier_part_numbers"
+];
+var getKeyPriority = (key) => {
+  const priority = priorityKeys.indexOf(key);
+  return priority === -1 ? priorityKeys.length : priority;
+};
+var formatComponentValue = (sourceComponent, key, value) => {
+  if (key === "name") return String(value);
+  const displayValue = sourceComponent[`display_${key}`];
+  if (typeof displayValue === "string" && displayValue.trim()) {
+    const propValue = key === "resistance" ? displayValue.replace(/Ω$/, "") : displayValue;
+    return JSON.stringify(propValue);
+  }
+  return JSON.stringify(value) ?? String(value);
+};
+var getSourceComponentInfoEntries = (sourceComponent) => Object.entries(sourceComponent).filter(([key, value]) => {
+  if (hiddenSourceComponentKeys.has(key)) return false;
+  if (key.startsWith("display_") && key.slice("display_".length) in sourceComponent) {
+    return false;
+  }
+  return value !== void 0 && value !== null && value !== "";
+}).sort(([keyA], [keyB]) => {
+  const priorityDifference = getKeyPriority(keyA) - getKeyPriority(keyB);
+  return priorityDifference || keyA.localeCompare(keyB);
+}).map(([key, value]) => ({
+  key,
+  label: key,
+  value: formatComponentValue(sourceComponent, key, value)
+}));
+var getSchematicComponentDetails = (circuitJson, schematicComponentId) => {
+  const schematicComponent = circuitJson.find(
+    (element) => element.type === "schematic_component" && element.schematic_component_id === schematicComponentId
+  );
+  if (!schematicComponent) return null;
+  const sourceComponent = circuitJson.find(
+    (element) => element.type === "source_component" && element.source_component_id === schematicComponent.source_component_id
+  );
+  if (!sourceComponent) return null;
+  const pcbComponent = circuitJson.find(
+    (element) => element.type === "pcb_component" && element.source_component_id === sourceComponent.source_component_id
+  );
+  const cadComponent = circuitJson.find(
+    (element) => element.type === "cad_component" && element.source_component_id === sourceComponent.source_component_id && (!pcbComponent || element.pcb_component_id === pcbComponent.pcb_component_id)
+  );
+  const footprinterString = pcbComponent?.footprinter_string ?? cadComponent?.footprinter_string;
+  const footprintPreview = pcbComponent ? getPcbComponentPreview(circuitJson, pcbComponent.pcb_component_id) : null;
+  return {
+    schematicComponent,
+    sourceComponent,
+    pcbComponent,
+    footprinterString,
+    footprintPreviewCircuitJson: footprintPreview?.circuitJson,
+    footprintPreviewViewBox: footprintPreview?.viewBox
+  };
+};
+var PCB_PREVIEW_PADDING_MM = 2;
+var getPcbComponentPreview = (circuitJson, pcbComponentId) => {
+  const pcbComponent = circuitJson.find(
+    (element) => element.type === "pcb_component" && element.pcb_component_id === pcbComponentId
+  );
+  if (!pcbComponent) return null;
+  const componentBounds = getPcbElementBounds(pcbComponent);
+  if (!componentBounds) return null;
+  const viewBox = {
+    minX: componentBounds.minX - PCB_PREVIEW_PADDING_MM,
+    minY: componentBounds.minY - PCB_PREVIEW_PADDING_MM,
+    maxX: componentBounds.maxX + PCB_PREVIEW_PADDING_MM,
+    maxY: componentBounds.maxY + PCB_PREVIEW_PADDING_MM
+  };
+  return {
+    circuitJson: getPcbElementsWithinBounds(circuitJson, viewBox),
+    viewBox
+  };
+};
+var bytesToBase64 = (bytes) => {
+  let binary = "";
+  const chunkSize = 8192;
+  for (let index = 0; index < bytes.length; index += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(index, index + chunkSize));
+  }
+  return btoa(binary);
+};
+var getFootprintPreviewUrl = (footprintPreviewCircuitJson, viewBox) => {
+  const encodedCircuitJson = bytesToBase64(
+    gzipSync(strToU8(JSON.stringify(footprintPreviewCircuitJson)))
+  );
+  const url = new URL("https://svg.tscircuit.com/");
+  url.searchParams.set("svg_type", "pcb");
+  url.searchParams.set("circuit_json", encodedCircuitJson);
+  url.searchParams.set(
+    "viewbox",
+    [viewBox.minX, viewBox.minY, viewBox.maxX, viewBox.maxY].join(",")
+  );
+  url.searchParams.set("background_color", "#f8fafc");
+  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
 };
@@ -764,6 +889,150 @@ var MouseTrackerProvider = ({ children }) => {
   return /* @__PURE__ */ jsx(MouseTrackerContext.Provider, { value, children });
 };
 
+// lib/components/SchematicComponentDetailsTooltip.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var detailLabelStyle = {
+  color: "#64748b",
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+  fontSize: "12px",
+  lineHeight: 1.45
+};
+var SchematicComponentDetailsTooltip = ({
+  sourceComponent,
+  footprinterString,
+  footprintPreviewCircuitJson,
+  footprintPreviewViewBox,
+  left,
+  top,
+  width,
+  maxHeight
+}) => {
+  const infoEntries = useMemo2(
+    () => getSourceComponentInfoEntries(sourceComponent),
+    [sourceComponent]
+  );
+  const footprintPreviewUrl = useMemo2(
+    () => footprintPreviewCircuitJson?.length && footprintPreviewViewBox ? getFootprintPreviewUrl(
+      footprintPreviewCircuitJson,
+      footprintPreviewViewBox
+    ) : void 0,
+    [footprintPreviewCircuitJson, footprintPreviewViewBox]
+  );
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      open: true,
+      "aria-label": `${sourceComponent.name} component details`,
+      "data-schematic-component-details-tooltip": true,
+      style: {
+        position: "absolute",
+        left,
+        right: "auto",
+        top,
+        bottom: "auto",
+        width,
+        maxHeight,
+        margin: 0,
+        padding: 0,
+        overflowY: "auto",
+        boxSizing: "border-box",
+        border: "1px solid #cbd5e1",
+        borderRadius: "4px",
+        backgroundColor: "rgba(255, 255, 255, 0.98)",
+        boxShadow: "0 20px 25px -5px rgba(15, 23, 42, 0.18), 0 8px 10px -6px rgba(15, 23, 42, 0.12)",
+        color: "#0f172a",
+        fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        pointerEvents: "auto",
+        userSelect: "text",
+        WebkitUserSelect: "text",
+        zIndex: zIndexMap.schematicComponentDetailsTooltip
+      },
+      onMouseDown: (event) => event.stopPropagation(),
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "dl",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "minmax(110px, 0.8fr) minmax(0, 1.2fr)",
+              gap: "6px 12px",
+              margin: 0,
+              padding: "8px"
+            },
+            children: [
+              infoEntries.map((entry) => /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+                /* @__PURE__ */ jsx2("dt", { style: detailLabelStyle, children: entry.label }),
+                /* @__PURE__ */ jsx2(
+                  "dd",
+                  {
+                    style: {
+                      minWidth: 0,
+                      margin: 0,
+                      color: "#1e293b",
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+                      fontSize: "12px",
+                      lineHeight: 1.45,
+                      overflowWrap: "anywhere"
+                    },
+                    children: entry.value
+                  }
+                )
+              ] }, entry.key)),
+              footprinterString && /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+                /* @__PURE__ */ jsx2("dt", { style: detailLabelStyle, children: "footprint" }),
+                /* @__PURE__ */ jsx2(
+                  "dd",
+                  {
+                    style: {
+                      minWidth: 0,
+                      margin: 0,
+                      color: "#1e293b",
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+                      fontSize: "12px",
+                      lineHeight: 1.45,
+                      overflowWrap: "anywhere"
+                    },
+                    children: JSON.stringify(footprinterString)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        footprinterString && footprintPreviewUrl && /* @__PURE__ */ jsx2("div", { style: { padding: "0 4px 4px" }, children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              height: "210px",
+              overflow: "hidden",
+              border: "1px solid #e2e8f0",
+              borderRadius: "2px",
+              background: "#f8fafc"
+            },
+            children: /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src: footprintPreviewUrl,
+                alt: `${sourceComponent.name} ${footprinterString} PCB footprint`,
+                loading: "lazy",
+                referrerPolicy: "no-referrer",
+                style: {
+                  display: "block",
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "contain"
+                }
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
+
 // lib/components/SchematicComponentMouseTarget.tsx
 import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef4, useState as useState3 } from "react";
 
@@ -772,7 +1041,7 @@ import {
   useContext as useContext2,
   useEffect as useEffect6,
   useId,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useRef as useRef3,
   useSyncExternalStore
 } from "react";
@@ -786,7 +1055,7 @@ var useMouseEventsOverBoundingBox = (options) => {
   const id = useId();
   const latestOptionsRef = useRef3(options);
   latestOptionsRef.current = options;
-  const handleClick = useMemo2(
+  const handleClick = useMemo3(
     () => (event) => {
       latestOptionsRef.current.onClick?.(event);
     },
@@ -825,7 +1094,7 @@ var useMouseEventsOverBoundingBox = (options) => {
 };
 
 // lib/components/SchematicComponentMouseTarget.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var areMeasurementsEqual = (a, b) => {
   if (!a && !b) return true;
   if (!a || !b) return false;
@@ -938,7 +1207,7 @@ var SchematicComponentMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
@@ -957,7 +1226,7 @@ var SchematicComponentMouseTarget = ({
 
 // lib/components/SchematicPortMouseTarget.tsx
 import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef5, useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var areMeasurementsEqual2 = (a, b) => {
   if (!a && !b) return true;
   if (!a || !b) return false;
@@ -1072,8 +1341,8 @@ var SchematicPortMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -1091,7 +1360,7 @@ var SchematicPortMouseTarget = ({
         }
       }
     ),
-    hovering && portLabel && /* @__PURE__ */ jsx3(
+    hovering && portLabel && /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -1118,7 +1387,7 @@ var SchematicPortMouseTarget = ({
 // lib/components/SchematicSheetSelector.tsx
 import { useState as useState5 } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FONT_FAMILY = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles = {
   backgroundColor: "#ffffff",
@@ -1168,7 +1437,7 @@ var MENU_CSS = `
 .sv-sheet-chevron { transition: transform 0.2s ease; }
 [data-state="open"] > .sv-sheet-chevron { transform: rotate(180deg); }
 `;
-var CheckIcon = () => /* @__PURE__ */ jsx4(
+var CheckIcon = () => /* @__PURE__ */ jsx5(
   "svg",
   {
     width: "14",
@@ -1180,10 +1449,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx4(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx4("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx4(
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx5(
   "svg",
   {
     className,
@@ -1197,7 +1466,7 @@ var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx4(
     strokeLinejoin: "round",
     style: { opacity: 0.6, flexShrink: 0 },
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx4("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx5("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var SchematicSheetSelector = ({
@@ -1211,10 +1480,10 @@ var SchematicSheetSelector = ({
     (s) => s.schematic_sheet_id === selectedSheetId
   );
   const selectedLabel = selectedSheet?.name ?? "Select sheet";
-  return /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    /* @__PURE__ */ jsx4("style", { children: MENU_CSS }),
-    /* @__PURE__ */ jsxs2(DropdownMenu.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx4(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx5("style", { children: MENU_CSS }),
+    /* @__PURE__ */ jsxs3(DropdownMenu.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx5(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -1241,13 +1510,13 @@ var SchematicSheetSelector = ({
             zIndex: zIndexMap.viewMenuIcon
           },
           children: [
-            /* @__PURE__ */ jsx4("span", { style: { color: "#888888", flexShrink: 0 }, children: "Sheet:" }),
-            /* @__PURE__ */ jsx4("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: selectedLabel }),
-            /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "sv-sheet-chevron" })
+            /* @__PURE__ */ jsx5("span", { style: { color: "#888888", flexShrink: 0 }, children: "Sheet:" }),
+            /* @__PURE__ */ jsx5("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx5(ChevronDownIcon, { className: "sv-sheet-chevron" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx4(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx5(
         DropdownMenu.Content,
         {
           style: contentStyles,
@@ -1257,7 +1526,7 @@ var SchematicSheetSelector = ({
           collisionPadding: 10,
           children: sheets.map((sheet) => {
             const selected = sheet.schematic_sheet_id === selectedSheetId;
-            return /* @__PURE__ */ jsxs2(
+            return /* @__PURE__ */ jsxs3(
               DropdownMenu.Item,
               {
                 className: "sv-sheet-item",
@@ -1269,8 +1538,8 @@ var SchematicSheetSelector = ({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx4("span", { style: iconSlotStyles, children: selected && /* @__PURE__ */ jsx4(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx4("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
+                  /* @__PURE__ */ jsx5("span", { style: iconSlotStyles, children: selected && /* @__PURE__ */ jsx5(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx5("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
                 ]
               },
               sheet.schematic_sheet_id
@@ -1285,12 +1554,12 @@ var SchematicSheetSelector = ({
 // lib/components/ViewMenu.tsx
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
 import { su as su3 } from "@tscircuit/soup-util";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.78",
+  version: "2.0.80",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -1329,16 +1598,18 @@ var package_default = {
   },
   dependencies: {
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@tscircuit/circuit-json-util": "^0.0.108",
     "circuit-json": "^0.0.465",
     "circuit-to-svg": "^0.0.393",
     debug: "^4.4.0",
+    fflate: "^0.8.3",
     "performance-now": "^2.1.0",
     "use-mouse-matrix-transform": "^1.2.2"
   }
 };
 
 // lib/components/ViewMenu.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { 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: "#262626",
@@ -1387,7 +1658,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__ */ jsx5(
+var CheckIcon2 = () => /* @__PURE__ */ jsx6(
   "svg",
   {
     width: "14",
@@ -1399,7 +1670,7 @@ var CheckIcon2 = () => /* @__PURE__ */ jsx5(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx6("path", { d: "M20 6 9 17l-5-5" })
   }
 );
 var ViewMenu = ({
@@ -1415,7 +1686,7 @@ var ViewMenu = ({
   showPorts,
   onTogglePorts
 }) => {
-  const hasGroups = useMemo3(() => {
+  const hasGroups = useMemo4(() => {
     if (!circuitJson || circuitJson.length === 0) return false;
     try {
       const sourceGroups = su3(circuitJson).source_group?.list() || [];
@@ -1439,7 +1710,7 @@ var ViewMenu = ({
       return false;
     }
   }, [circuitJsonKey]);
-  const hasPorts = useMemo3(() => {
+  const hasPorts = useMemo4(() => {
     if (!circuitJson || circuitJson.length === 0) return false;
     try {
       return (su3(circuitJson).schematic_port?.list() || []).length > 0;
@@ -1448,7 +1719,7 @@ var ViewMenu = ({
       return false;
     }
   }, [circuitJsonKey]);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref: menuRef,
@@ -1459,9 +1730,9 @@ var ViewMenu = ({
         width: 0,
         height: 0
       },
-      children: /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { open: true, onOpenChange, modal: false, children: [
-        /* @__PURE__ */ jsx5(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx5("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx5(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
+      children: /* @__PURE__ */ jsxs4(DropdownMenu2.Root, { open: true, onOpenChange, modal: false, children: [
+        /* @__PURE__ */ jsx6(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx6("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx6(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs4(
           DropdownMenu2.Content,
           {
             style: contentStyles2,
@@ -1470,8 +1741,8 @@ var ViewMenu = ({
             collisionPadding: 10,
             avoidCollisions: true,
             children: [
-              /* @__PURE__ */ jsx5("style", { children: HIGHLIGHT_CSS }),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsx6("style", { children: HIGHLIGHT_CSS }),
+              /* @__PURE__ */ jsxs4(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -1484,12 +1755,12 @@ var ViewMenu = ({
                     if (hasPorts) onTogglePorts(!showPorts);
                   },
                   children: [
-                    /* @__PURE__ */ jsx5("span", { style: iconSlotStyles2, children: showPorts && /* @__PURE__ */ jsx5(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx5("span", { children: "Show Schematic Ports" })
+                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showPorts && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx6("span", { children: "Show Schematic Ports" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs4(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -1502,12 +1773,12 @@ var ViewMenu = ({
                     if (hasGroups) onToggleGroups(!showGroups);
                   },
                   children: [
-                    /* @__PURE__ */ jsx5("span", { style: iconSlotStyles2, children: showGroups && /* @__PURE__ */ jsx5(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx5("span", { children: "View Schematic Groups" })
+                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showGroups && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx6("span", { children: "View Schematic Groups" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs4(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -1518,13 +1789,13 @@ var ViewMenu = ({
                     onToggleGrid(!showGrid);
                   },
                   children: [
-                    /* @__PURE__ */ jsx5("span", { style: iconSlotStyles2, children: showGrid && /* @__PURE__ */ jsx5(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx5("span", { children: "Show Grid" })
+                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showGrid && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx6("span", { children: "Show Grid" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx5(DropdownMenu2.Separator, { style: separatorStyles }),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsx6(DropdownMenu2.Separator, { style: separatorStyles }),
+              /* @__PURE__ */ jsxs4(
                 "div",
                 {
                   style: {
@@ -1550,7 +1821,7 @@ var ViewMenu = ({
 };
 
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
@@ -1573,11 +1844,11 @@ var SchematicViewer = ({
   const getCircuitHash = (circuitJson2) => {
     return `${circuitJson2?.length || 0}_${circuitJson2?.editCount || 0}`;
   };
-  const circuitJsonKey = useMemo4(
+  const circuitJsonKey = useMemo5(
     () => getCircuitHash(circuitJson),
     [circuitJson]
   );
-  const schematicSheets = useMemo4(() => {
+  const schematicSheets = useMemo5(() => {
     try {
       return circuitJson.filter((elm) => elm?.type === "schematic_sheet").slice().sort((a, b) => (a.sheet_index ?? 0) - (b.sheet_index ?? 0));
     } catch (err) {
@@ -1630,6 +1901,7 @@ var SchematicViewer = ({
   }, [showSchematicPorts]);
   const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState6(false);
   const hoveringComponentsRef = useRef6(/* @__PURE__ */ new Set());
+  const [selectedSchematicComponent, setSelectedSchematicComponent] = useState6(null);
   const handleComponentHoverChange = useCallback6(
     (componentId, isHovering) => {
       if (isHovering) {
@@ -1656,7 +1928,8 @@ var SchematicViewer = ({
   );
   const svgDivRef = useRef6(null);
   const touchStartRef = useRef6(null);
-  const schematicComponentIds = useMemo4(() => {
+  const zoomScaleRef = useRef6({ x: 1, y: 1 });
+  const schematicComponentIds = useMemo5(() => {
     try {
       const components = su4(circuitJson).schematic_component?.list() ?? [];
       return components.filter(
@@ -1667,7 +1940,7 @@ var SchematicViewer = ({
       return [];
     }
   }, [circuitJsonKey, circuitJson, activeSheetId]);
-  const schematicPortsInfo = useMemo4(() => {
+  const schematicPortsInfo = useMemo5(() => {
     if (!showSchematicPortsInternal) return [];
     try {
       const ports = (su4(circuitJson).schematic_port?.list() ?? []).filter(
@@ -1716,6 +1989,11 @@ var SchematicViewer = ({
   );
   const { ref: containerRef } = useMouseMatrixTransform({
     onSetTransform(transform) {
+      const zoomChanged = transform.a !== zoomScaleRef.current.x || transform.d !== zoomScaleRef.current.y;
+      zoomScaleRef.current = { x: transform.a, y: transform.d };
+      if (zoomChanged) {
+        setSelectedSchematicComponent(null);
+      }
       if (!svgDivRef.current) return;
       svgDivRef.current.style.transform = transformToString(transform);
     },
@@ -1731,7 +2009,77 @@ var SchematicViewer = ({
     contextMenuEventHandlers
   } = useContextMenu({ containerRef });
   const { containerWidth, containerHeight } = useResizeHandling(containerRef);
-  const svgString = useMemo4(() => {
+  const selectedComponentDetails = useMemo5(
+    () => selectedSchematicComponent ? getSchematicComponentDetails(
+      circuitJson,
+      selectedSchematicComponent.schematicComponentId
+    ) : null,
+    [circuitJsonKey, circuitJson, selectedSchematicComponent]
+  );
+  const componentTooltipLayout = useMemo5(() => {
+    if (!selectedSchematicComponent || !containerWidth || !containerHeight) {
+      return null;
+    }
+    const margin = 12;
+    const gap = 14;
+    const width = Math.min(420, containerWidth - margin * 2);
+    const maxHeight = Math.min(520, containerHeight - margin * 2);
+    const { anchorX, anchorY } = selectedSchematicComponent;
+    const rightOfAnchor = anchorX + gap;
+    const leftOfAnchor = anchorX - width - gap;
+    const left = rightOfAnchor + width <= containerWidth - margin ? rightOfAnchor : leftOfAnchor >= margin ? leftOfAnchor : Math.max(
+      margin,
+      Math.min(anchorX - width / 2, containerWidth - width - margin)
+    );
+    const top = Math.max(
+      margin,
+      Math.min(anchorY - 24, containerHeight - maxHeight - margin)
+    );
+    return { left, top, width, maxHeight };
+  }, [selectedSchematicComponent, containerWidth, containerHeight]);
+  const handleSchematicComponentClick = useCallback6(
+    (schematicComponentId, event) => {
+      if (event.target instanceof Element && event.target.closest("[data-schematic-component-details-tooltip]")) {
+        return;
+      }
+      const containerRect = containerRef.current?.getBoundingClientRect();
+      if (!containerRect) return;
+      setSelectedSchematicComponent({
+        schematicComponentId,
+        anchorX: event.clientX - containerRect.left,
+        anchorY: event.clientY - containerRect.top
+      });
+      onSchematicComponentClicked?.({
+        schematicComponentId,
+        event
+      });
+    },
+    [containerRef, onSchematicComponentClicked]
+  );
+  useEffect9(() => {
+    setSelectedSchematicComponent(null);
+  }, [circuitJsonKey, activeSheetId]);
+  useEffect9(() => {
+    if (!selectedSchematicComponent) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setSelectedSchematicComponent(null);
+      }
+    };
+    const handleDocumentMouseDown = (event) => {
+      if (event.target instanceof Element && event.target.closest("[data-schematic-component-details-tooltip]")) {
+        return;
+      }
+      setSelectedSchematicComponent(null);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("mousedown", handleDocumentMouseDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handleDocumentMouseDown);
+    };
+  }, [selectedSchematicComponent]);
+  const svgString = useMemo5(() => {
     if (!containerWidth || !containerHeight) return "";
     return convertCircuitJsonToSchematicSvg(circuitJson, {
       width: containerWidth,
@@ -1754,7 +2102,7 @@ var SchematicViewer = ({
     showSchematicPortsInternal,
     activeSheetId
   ]);
-  const containerBackgroundColor = useMemo4(() => {
+  const containerBackgroundColor = useMemo5(() => {
     const match = svgString.match(
       /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i
     );
@@ -1772,8 +2120,8 @@ var SchematicViewer = ({
     circuitJsonKey: `${circuitJsonKey}_${activeSheetId ?? ""}`,
     enabled: netHoverHighlightEnabled
   });
-  const svgDiv = useMemo4(
-    () => /* @__PURE__ */ jsx6(
+  const svgDiv = useMemo5(
+    () => /* @__PURE__ */ jsx7(
       "div",
       {
         ref: svgDivRef,
@@ -1781,18 +2129,18 @@ var SchematicViewer = ({
           pointerEvents: clickToInteractEnabled ? isInteractionEnabled ? "auto" : "none" : "auto",
           transformOrigin: "0 0"
         },
-        className: onSchematicComponentClicked ? "schematic-component-clickable" : void 0,
+        className: "schematic-component-clickable",
         dangerouslySetInnerHTML: { __html: svgString }
       }
     ),
     [svgString, isInteractionEnabled, clickToInteractEnabled]
   );
-  return /* @__PURE__ */ jsxs4(MouseTracker, { children: [
-    netHoverHighlightEnabled && /* @__PURE__ */ jsx6("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__ */ jsx6("style", { children: ".schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }" }),
-    onSchematicPortClicked && /* @__PURE__ */ jsx6("style", { children: "[data-schematic-port-id]:hover { cursor: pointer !important; }" }),
-    /* @__PURE__ */ jsxs4(
+    /* @__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,
@@ -1800,7 +2148,7 @@ var SchematicViewer = ({
           position: "relative",
           backgroundColor: containerBackgroundColor,
           overflow: "hidden",
-          cursor: clickToInteractEnabled && !isInteractionEnabled ? "pointer" : isHoveringClickableComponent && onSchematicComponentClicked ? "pointer" : isHoveringClickablePort && onSchematicPortClicked ? "pointer" : "grab",
+          cursor: clickToInteractEnabled && !isInteractionEnabled ? "pointer" : isHoveringClickableComponent ? "pointer" : isHoveringClickablePort && onSchematicPortClicked ? "pointer" : "grab",
           minHeight: "300px",
           userSelect: "none",
           WebkitUserSelect: "none",
@@ -1827,7 +2175,7 @@ var SchematicViewer = ({
         },
         onTouchCancel: contextMenuEventHandlers.onTouchCancel,
         children: [
-          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx6(
+          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx7(
             "div",
             {
               onClick: (e) => {
@@ -1846,7 +2194,7 @@ var SchematicViewer = ({
                 pointerEvents: "all",
                 touchAction: "pan-x pan-y pinch-zoom"
               },
-              children: /* @__PURE__ */ jsx6(
+              children: /* @__PURE__ */ jsx7(
                 "div",
                 {
                   style: {
@@ -1863,7 +2211,7 @@ var SchematicViewer = ({
               )
             }
           ),
-          menuVisible && /* @__PURE__ */ jsx6(
+          menuVisible && /* @__PURE__ */ jsx7(
             ViewMenu,
             {
               circuitJson,
@@ -1890,7 +2238,7 @@ var SchematicViewer = ({
               onToggleGrid: setShowGridInternal
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             SchematicSheetSelector,
             {
               sheets: schematicSheets,
@@ -1898,7 +2246,7 @@ var SchematicViewer = ({
               onSelectSheet: handleSelectSheet
             }
           ),
-          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx6(
+          schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx7(
             SchematicComponentMouseTarget,
             {
               componentId,
@@ -1907,17 +2255,22 @@ var SchematicViewer = ({
               showOutline: true,
               circuitJsonKey,
               onHoverChange: handleComponentHoverChange,
-              onComponentClick: (id, event) => {
-                onSchematicComponentClicked?.({
-                  schematicComponentId: id,
-                  event
-                });
-              }
+              onComponentClick: handleSchematicComponentClick
             },
             componentId
           )),
           svgDiv,
-          showSchematicPortsInternal && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx6(
+          selectedComponentDetails && componentTooltipLayout && /* @__PURE__ */ jsx7(
+            SchematicComponentDetailsTooltip,
+            {
+              sourceComponent: selectedComponentDetails.sourceComponent,
+              footprinterString: selectedComponentDetails.footprinterString,
+              footprintPreviewCircuitJson: selectedComponentDetails.footprintPreviewCircuitJson,
+              footprintPreviewViewBox: selectedComponentDetails.footprintPreviewViewBox,
+              ...componentTooltipLayout
+            }
+          ),
+          showSchematicPortsInternal && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx7(
             SchematicPortMouseTarget,
             {
               portId,
@@ -1947,7 +2300,7 @@ import {
   convertCircuitJsonToSchematicSimulationSvg,
   convertCircuitJsonToSimulationGraphSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect10, useMemo as useMemo5, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react";
 import { toString as transformToString2 } from "transformation-matrix";
 import { useMouseMatrixTransform as useMouseMatrixTransform2 } from "use-mouse-matrix-transform";
 
@@ -1966,7 +2319,7 @@ 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 jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+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",
@@ -2016,7 +2369,7 @@ var MENU_CSS2 = `
 .sv-simulation-chevron { transition: transform 0.2s ease; }
 [data-state="open"] > .sv-simulation-chevron { transform: rotate(180deg); }
 `;
-var CheckIcon3 = () => /* @__PURE__ */ jsx7(
+var CheckIcon3 = () => /* @__PURE__ */ jsx8(
   "svg",
   {
     width: "14",
@@ -2028,10 +2381,10 @@ var CheckIcon3 = () => /* @__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 ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx7(
+var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx8(
   "svg",
   {
     className,
@@ -2045,7 +2398,7 @@ var ChevronDownIcon2 = ({ 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 getSimulationLabels = (simulations) => {
@@ -2071,10 +2424,10 @@ var AnalogSimulationSelector = ({
     ({ simulation }) => simulation.simulation_experiment_id === selectedSimulationExperimentId
   );
   const selectedLabel = selectedSimulation?.label ?? "Select simulation";
-  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx7("style", { children: MENU_CSS2 }),
-    /* @__PURE__ */ jsxs5(DropdownMenu3.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx7(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
+  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",
@@ -2101,13 +2454,13 @@ var AnalogSimulationSelector = ({
             zIndex: zIndexMap.viewMenuIcon
           },
           children: [
-            /* @__PURE__ */ jsx7("span", { style: { color: "#888888", flexShrink: 0 }, children: "Simulation:" }),
-            /* @__PURE__ */ jsx7("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: selectedLabel }),
-            /* @__PURE__ */ jsx7(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__ */ jsx7(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx8(
         DropdownMenu3.Content,
         {
           style: contentStyles3,
@@ -2117,7 +2470,7 @@ var AnalogSimulationSelector = ({
           collisionPadding: 10,
           children: simulationLabels.map(({ simulation, label }) => {
             const selected = simulation.simulation_experiment_id === selectedSimulationExperimentId;
-            return /* @__PURE__ */ jsxs5(
+            return /* @__PURE__ */ jsxs6(
               DropdownMenu3.Item,
               {
                 className: "sv-simulation-item",
@@ -2129,8 +2482,8 @@ var AnalogSimulationSelector = ({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx7("span", { style: iconSlotStyles3, children: selected && /* @__PURE__ */ jsx7(CheckIcon3, {}) }),
-                  /* @__PURE__ */ jsx7("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
@@ -2143,7 +2496,7 @@ var AnalogSimulationSelector = ({
 };
 
 // lib/components/AnalogSimulationViewer.tsx
-import { jsx as jsx8, jsxs as jsxs6 } 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;
@@ -2189,7 +2542,7 @@ var AnalogSimulationViewer = ({
     setCircuitJson(inputCircuitJson);
     setIsLoading(false);
   }, [inputCircuitJson]);
-  const simulationExperiments = useMemo5(() => {
+  const simulationExperiments = useMemo6(() => {
     if (!circuitJson) return [];
     return circuitJson.filter(
       (element) => element.type === "simulation_experiment"
@@ -2208,7 +2561,7 @@ var AnalogSimulationViewer = ({
     setSelectedSimulationExperimentId(nextSimulationExperimentId);
     onSimulationChange?.(nextSimulationExperimentId);
   };
-  const simulationSvg = useMemo5(() => {
+  const simulationSvg = useMemo6(() => {
     if (!circuitJson || !effectiveWidth || !effectiveHeight || !simulationExperimentId)
       return "";
     try {
@@ -2253,7 +2606,7 @@ var AnalogSimulationViewer = ({
       setSvgObjectUrl(null);
     }
   }, [simulationSvg]);
-  const containerBackgroundColor = useMemo5(() => {
+  const containerBackgroundColor = useMemo6(() => {
     return getAnalogSimulationBackgroundColor(simulationSvg, colorOverrides);
   }, [simulationSvg, colorOverrides]);
   const handleMouseDown = (_e) => {
@@ -2277,7 +2630,7 @@ var AnalogSimulationViewer = ({
     };
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -2297,7 +2650,7 @@ var AnalogSimulationViewer = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         style: {
@@ -2312,15 +2665,15 @@ var AnalogSimulationViewer = ({
           ...containerStyle
         },
         className,
-        children: /* @__PURE__ */ jsxs6("div", { style: { textAlign: "center", padding: "20px" }, children: [
-          /* @__PURE__ */ jsx8("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
-          /* @__PURE__ */ jsx8("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__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         style: {
@@ -2336,11 +2689,11 @@ var AnalogSimulationViewer = ({
         },
         className,
         children: [
-          /* @__PURE__ */ jsx8("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
-          /* @__PURE__ */ jsxs6("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__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "code",
               {
                 style: {
@@ -2360,7 +2713,7 @@ var AnalogSimulationViewer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: (node) => {
@@ -2379,7 +2732,7 @@ var AnalogSimulationViewer = ({
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           AnalogSimulationSelector,
           {
             simulations: simulationExperiments,
@@ -2387,7 +2740,7 @@ var AnalogSimulationViewer = ({
             onSelectSimulation: handleSelectSimulation
           }
         ),
-        svgObjectUrl ? /* @__PURE__ */ jsx8(
+        svgObjectUrl ? /* @__PURE__ */ jsx9(
           "img",
           {
             ref: imgRef,
@@ -2401,7 +2754,7 @@ var AnalogSimulationViewer = ({
               objectFit: "contain"
             }
           }
-        ) : /* @__PURE__ */ jsx8(
+        ) : /* @__PURE__ */ jsx9(
           "div",
           {
             style: {