@tscircuit/schematic-viewer 2.0.78 → 2.0.80

package/dist/index.js

@@ -1,8 +1,47 @@
 // lib/components/SchematicViewer.tsx
+import { su as su4 } from "@tscircuit/soup-util";
 import {
   convertCircuitJsonToSchematicSvg
 } from "circuit-to-svg";
-import { su as su4 } from "@tscircuit/soup-util";
+
+// lib/hooks/useLocalStorage.ts
+import { useCallback } from "react";
+var STORAGE_KEYS = {
+  IS_SHOWING_SCHEMATIC_GROUPS: "schematic_viewer_show_groups",
+  IS_SHOWING_SCHEMATIC_PORTS: "schematic_viewer_show_ports",
+  SELECTED_SCHEMATIC_SHEET: "schematic_viewer_selected_sheet"
+};
+var getStoredBoolean = (key, defaultValue) => {
+  if (typeof window === "undefined") return defaultValue;
+  try {
+    const stored = localStorage.getItem(key);
+    return stored !== null ? JSON.parse(stored) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+};
+var setStoredBoolean = (key, value) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+};
+var getStoredString = (key) => {
+  if (typeof window === "undefined") return null;
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+var setStoredString = (key, value) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+  }
+};
 
 // lib/hooks/useSchematicGroupsOverlay.ts
 import { useEffect } from "react";
@@ -399,7 +438,7 @@ var enableDebug = () => {
 };
 
 // lib/components/SchematicViewer.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef5, useState as useState5 } 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";
 
@@ -427,328 +466,268 @@ var useResizeHandling = (containerRef) => {
   return { containerWidth, containerHeight };
 };
 
-// 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 = {
-  viewMenuIcon: 48,
-  viewMenu: 55,
-  viewMenuBackdrop: 54,
-  clickToInteractOverlay: 100,
-  schematicComponentHoverOutline: 47,
-  schematicPortHoverOutline: 48
-};
-
-// package.json
-var package_default = {
-  name: "@tscircuit/schematic-viewer",
-  version: "2.0.77",
-  main: "dist/index.js",
-  type: "module",
-  scripts: {
-    start: "cosmos",
-    build: "tsup-node ./lib/index.ts --dts --format esm --sourcemap",
-    "build:site": "cosmos-export",
-    "vercel-build": "bun run build:site",
-    format: "biome format --write .",
-    "format:check": "biome format ."
-  },
-  files: [
-    "dist"
-  ],
-  devDependencies: {
-    "@biomejs/biome": "^1.9.4",
-    "@types/bun": "latest",
-    "@types/debug": "^4.1.12",
-    "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.2",
-    "@vitejs/plugin-react": "^4.3.4",
-    react: "^19.1.0",
-    "react-cosmos": "^6.2.1",
-    "react-cosmos-plugin-vite": "^6.2.0",
-    "react-dom": "^19.1.0",
-    "react-reconciler": "^0.31.0",
-    semver: "^7.7.2",
-    tscircuit: "^0.0.2112",
-    tsup: "^8.3.5",
-    vite: "^6.0.3"
-  },
-  peerDependencies: {
-    typescript: "^5.0.0",
-    tscircuit: "*"
-  },
-  dependencies: {
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "circuit-json": "^0.0.465",
-    "circuit-to-svg": "^0.0.393",
-    debug: "^4.4.0",
-    "performance-now": "^2.1.0",
-    "use-mouse-matrix-transform": "^1.2.2"
-  }
-};
-
-// lib/components/ViewMenuIcon.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ViewMenuIcon = ({
-  active = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      title: active ? "Hide view menu" : "Show view menu",
-      ...props,
-      style: {
-        position: "absolute",
-        top: "16px",
-        right: "16px",
-        backgroundColor: active ? "#4CAF50" : "#fff",
-        color: active ? "#fff" : "#000",
-        padding: "8px",
-        border: "none",
-        borderRadius: "4px",
-        cursor: "pointer",
-        outline: "none",
-        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        zIndex: zIndexMap.viewMenuIcon
-      },
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: [
-            /* @__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" })
-          ]
-        }
-      )
-    }
+// lib/hooks/useContextMenu.ts
+import { useCallback as useCallback2, useEffect as useEffect4, useRef, useState as useState2 } from "react";
+var LONG_PRESS_DURATION_MS = 600;
+var MOVEMENT_THRESHOLD_PX = 10;
+var useContextMenu = ({ containerRef }) => {
+  const [menuVisible, setMenuVisible] = useState2(false);
+  const [menuPos, setMenuPos] = useState2({ x: 0, y: 0 });
+  const menuRef = useRef(null);
+  const interactionOriginRef = useRef(null);
+  const longPressTimeoutRef = useRef(null);
+  const ignoreContextMenuUntilRef = useRef(0);
+  const clearLongPressTimeout = useCallback2(() => {
+    if (longPressTimeoutRef.current === null) return;
+    window.clearTimeout(longPressTimeoutRef.current);
+    longPressTimeoutRef.current = null;
+  }, []);
+  const handleContextMenu = useCallback2((event) => {
+    event.preventDefault();
+    if (Date.now() < ignoreContextMenuUntilRef.current) return;
+    const origin = interactionOriginRef.current;
+    if (!origin) return;
+    const movedTooFar = Math.abs(event.clientX - origin.x) > MOVEMENT_THRESHOLD_PX || Math.abs(event.clientY - origin.y) > MOVEMENT_THRESHOLD_PX;
+    interactionOriginRef.current = null;
+    if (movedTooFar) return;
+    setMenuPos({ x: event.clientX, y: event.clientY });
+    setMenuVisible(true);
+  }, []);
+  const handleTouchStart = useCallback2(
+    (event) => {
+      clearLongPressTimeout();
+      if (event.touches.length !== 1) {
+        interactionOriginRef.current = null;
+        return;
+      }
+      const touch = event.touches[0];
+      if (!touch) return;
+      interactionOriginRef.current = {
+        x: touch.clientX,
+        y: touch.clientY
+      };
+      longPressTimeoutRef.current = window.setTimeout(() => {
+        const container = containerRef.current;
+        if (!container || !interactionOriginRef.current) return;
+        const rect = container.getBoundingClientRect();
+        setMenuPos({
+          x: rect.left + rect.width / 2,
+          y: rect.top + rect.height / 2
+        });
+        setMenuVisible(true);
+        ignoreContextMenuUntilRef.current = Date.now() + 1e3;
+        interactionOriginRef.current = null;
+      }, LONG_PRESS_DURATION_MS);
+    },
+    [clearLongPressTimeout, containerRef]
   );
-};
-
-// lib/components/ViewMenu.tsx
-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",
-  color: "#111111",
-  borderRadius: 8,
-  boxShadow: "0 6px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08)",
-  border: "1px solid #e5e7eb",
-  padding: 4,
-  minWidth: 224,
-  fontSize: 13,
-  fontFamily: FONT_FAMILY,
-  outline: "none",
-  zIndex: zIndexMap.viewMenu
-};
-var itemStyles = {
-  display: "flex",
-  alignItems: "center",
-  gap: 8,
-  padding: "7px 10px 7px 8px",
-  borderRadius: 6,
-  cursor: "pointer",
-  outline: "none",
-  userSelect: "none",
-  color: "#111111",
-  fontSize: 13,
-  fontFamily: FONT_FAMILY
-};
-var iconSlotStyles = {
-  width: 16,
-  height: 16,
-  flexShrink: 0,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "#111111"
-};
-var separatorStyles = {
-  height: 1,
-  backgroundColor: "#ececec",
-  margin: "4px 0"
-};
-var HIGHLIGHT_CSS = `
-.sv-vm-item[data-highlighted]:not([data-disabled]),
-.sv-vm-item:hover:not([data-disabled]) { background-color: #f1f3f5; }
-.sv-vm-item[data-disabled] { opacity: 0.45; cursor: not-allowed; }
-`;
-var CheckIcon = () => /* @__PURE__ */ jsx2(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" })
-  }
-);
-var ViewMenu = ({
-  circuitJson,
-  circuitJsonKey,
-  open,
-  onOpenChange,
-  showGroups,
-  onToggleGroups,
-  showGrid,
-  onToggleGrid
-}) => {
-  const hasGroups = useMemo(() => {
-    if (!circuitJson || circuitJson.length === 0) return false;
-    try {
-      const sourceGroups = su3(circuitJson).source_group?.list() || [];
-      if (sourceGroups.length > 0) return true;
-      const schematicComponents = su3(circuitJson).schematic_component?.list() || [];
-      if (schematicComponents.length > 1) {
-        const componentTypes = /* @__PURE__ */ new Set();
-        for (const comp of schematicComponents) {
-          const sourceComp = su3(circuitJson).source_component.get(
-            comp.source_component_id
-          );
-          if (sourceComp?.ftype) {
-            componentTypes.add(sourceComp.ftype);
-          }
-        }
-        return componentTypes.size > 1;
+  const handleTouchMove = useCallback2(
+    (event) => {
+      const origin = interactionOriginRef.current;
+      if (!origin || event.touches.length !== 1) return;
+      const touch = event.touches[0];
+      const movedTooFar = !touch || Math.abs(touch.clientX - origin.x) > MOVEMENT_THRESHOLD_PX || Math.abs(touch.clientY - origin.y) > MOVEMENT_THRESHOLD_PX;
+      if (movedTooFar) {
+        interactionOriginRef.current = null;
+        clearLongPressTimeout();
       }
-      return false;
-    } catch (error) {
-      console.error("Error checking for groups:", error);
-      return false;
+    },
+    [clearLongPressTimeout]
+  );
+  const handleTouchEnd = useCallback2(() => {
+    clearLongPressTimeout();
+    interactionOriginRef.current = null;
+  }, [clearLongPressTimeout]);
+  const handleClickAway = useCallback2((event) => {
+    const target = event.target;
+    if (menuRef.current?.contains(target)) return;
+    const isInRadixPortal = target.closest?.(
+      "[data-radix-popper-content-wrapper], [data-radix-dropdown-menu-content]"
+    );
+    if (isInRadixPortal) return;
+    setMenuVisible(false);
+  }, []);
+  useEffect4(() => {
+    if (!menuVisible) return;
+    document.addEventListener("mousedown", handleClickAway);
+    document.addEventListener("touchstart", handleClickAway);
+    return () => {
+      document.removeEventListener("mousedown", handleClickAway);
+      document.removeEventListener("touchstart", handleClickAway);
+    };
+  }, [handleClickAway, menuVisible]);
+  useEffect4(() => clearLongPressTimeout, [clearLongPressTimeout]);
+  return {
+    menuVisible,
+    menuPos,
+    menuRef,
+    setMenuVisible,
+    contextMenuEventHandlers: {
+      onMouseDown: (event) => {
+        interactionOriginRef.current = event.button === 2 || event.button === 0 && event.ctrlKey ? { x: event.clientX, y: event.clientY } : null;
+      },
+      onContextMenu: handleContextMenu,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchEnd
     }
-  }, [circuitJsonKey]);
-  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,
-        side: "bottom",
-        align: "end",
-        sideOffset: 8,
-        collisionPadding: 10,
-        children: [
-          /* @__PURE__ */ jsx2("style", { children: HIGHLIGHT_CSS }),
-          /* @__PURE__ */ jsxs2(
-            DropdownMenu.Item,
-            {
-              className: "sv-vm-item",
-              style: itemStyles,
-              disabled: !hasGroups,
-              title: hasGroups ? void 0 : "No groups found in this schematic",
-              onSelect: (e) => e.preventDefault(),
-              onPointerUp: () => {
-                if (hasGroups) onToggleGroups(!showGroups);
-              },
-              children: [
-                /* @__PURE__ */ jsx2("span", { style: iconSlotStyles, children: showGroups && /* @__PURE__ */ jsx2(CheckIcon, {}) }),
-                /* @__PURE__ */ jsx2("span", { children: "View Schematic Groups" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs2(
-            DropdownMenu.Item,
-            {
-              className: "sv-vm-item",
-              style: itemStyles,
-              onSelect: (e) => e.preventDefault(),
-              onPointerUp: () => onToggleGrid(!showGrid),
-              children: [
-                /* @__PURE__ */ jsx2("span", { style: iconSlotStyles, children: showGrid && /* @__PURE__ */ jsx2(CheckIcon, {}) }),
-                /* @__PURE__ */ jsx2("span", { children: "Show Grid" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx2(DropdownMenu.Separator, { style: separatorStyles }),
-          /* @__PURE__ */ jsxs2(
-            "div",
-            {
-              style: {
-                padding: "4px 8px",
-                fontSize: 12,
-                color: "#9ca3af",
-                textAlign: "center",
-                fontFamily: FONT_FAMILY
-              },
-              children: [
-                "v",
-                String(package_default?.version)
-              ]
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
+  };
 };
 
-// lib/hooks/useLocalStorage.ts
-import { useCallback } from "react";
-var STORAGE_KEYS = {
-  IS_SHOWING_SCHEMATIC_GROUPS: "schematic_viewer_show_groups",
-  SELECTED_SCHEMATIC_SHEET: "schematic_viewer_selected_sheet"
+// 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",
+  "name",
+  "display_name",
+  "ftype",
+  "are_pins_interchangeable"
+]);
+var priorityKeys = [
+  "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 getStoredBoolean = (key, defaultValue) => {
-  if (typeof window === "undefined") return defaultValue;
-  try {
-    const stored = localStorage.getItem(key);
-    return stored !== null ? JSON.parse(stored) : defaultValue;
-  } catch {
-    return defaultValue;
+var humanizeComponentField = (field) => field.replace(/^simple_/, "").replaceAll("_", " ").replace(/\b\w/g, (character) => character.toUpperCase());
+var formatObjectValue = (value) => Object.entries(value).map(([key, nestedValue]) => {
+  const formattedNestedValue = Array.isArray(nestedValue) ? nestedValue.join(", ") : String(nestedValue);
+  return `${humanizeComponentField(key)}: ${formattedNestedValue}`;
+}).join(" \xB7 ");
+var formatComponentValue = (sourceComponent, key, value) => {
+  const displayValue = sourceComponent[`display_${key}`];
+  if (typeof displayValue === "string" && displayValue.trim()) {
+    return displayValue;
   }
-};
-var setStoredBoolean = (key, value) => {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(key, JSON.stringify(value));
-  } catch {
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.join(", ");
+  if (value && typeof value === "object") {
+    return formatObjectValue(value);
   }
+  return String(value);
 };
-var getStoredString = (key) => {
-  if (typeof window === "undefined") return null;
-  try {
-    return localStorage.getItem(key);
-  } catch {
-    return null;
+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: humanizeComponentField(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 setStoredString = (key, value) => {
-  if (typeof window === "undefined") return;
-  try {
-    localStorage.setItem(key, value);
-  } catch {
+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
 };
 
 // lib/components/MouseTracker.tsx
 import {
   createContext,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext,
-  useEffect as useEffect4,
-  useMemo as useMemo2,
-  useRef
+  useEffect as useEffect5,
+  useMemo,
+  useRef as useRef2
 } from "react";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 var MouseTrackerContext = createContext(null);
 var DRAG_THRESHOLD_PX = 5;
 var boundsAreEqual = (a, b) => {
@@ -759,24 +738,24 @@ var boundsAreEqual = (a, b) => {
 var MouseTracker = ({ children }) => {
   const existingContext = useContext(MouseTrackerContext);
   if (existingContext) {
-    return /* @__PURE__ */ jsx3(Fragment, { children });
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return /* @__PURE__ */ jsx3(MouseTrackerProvider, { children });
+  return /* @__PURE__ */ jsx(MouseTrackerProvider, { children });
 };
 var MouseTrackerProvider = ({ children }) => {
-  const storeRef = useRef({
+  const storeRef = useRef2({
     pointer: null,
     boundingBoxes: /* @__PURE__ */ new Map(),
     hoveringIds: /* @__PURE__ */ new Set(),
     subscribers: /* @__PURE__ */ new Set(),
     mouseDownPosition: null
   });
-  const notifySubscribers = useCallback2(() => {
+  const notifySubscribers = useCallback3(() => {
     for (const callback of storeRef.current.subscribers) {
       callback();
     }
   }, []);
-  const updateHovering = useCallback2(() => {
+  const updateHovering = useCallback3(() => {
     const pointer = storeRef.current.pointer;
     const newHovering = /* @__PURE__ */ new Set();
     if (pointer) {
@@ -795,14 +774,14 @@ var MouseTrackerProvider = ({ children }) => {
     storeRef.current.hoveringIds = newHovering;
     notifySubscribers();
   }, [notifySubscribers]);
-  const registerBoundingBox = useCallback2(
+  const registerBoundingBox = useCallback3(
     (id, registration) => {
       storeRef.current.boundingBoxes.set(id, registration);
       updateHovering();
     },
     [updateHovering]
   );
-  const updateBoundingBox = useCallback2(
+  const updateBoundingBox = useCallback3(
     (id, registration) => {
       const existing = storeRef.current.boundingBoxes.get(id);
       if (existing && boundsAreEqual(existing.bounds, registration.bounds) && existing.onClick === registration.onClick) {
@@ -813,7 +792,7 @@ var MouseTrackerProvider = ({ children }) => {
     },
     [updateHovering]
   );
-  const unregisterBoundingBox = useCallback2(
+  const unregisterBoundingBox = useCallback3(
     (id) => {
       const removed = storeRef.current.boundingBoxes.delete(id);
       if (removed) {
@@ -822,16 +801,16 @@ var MouseTrackerProvider = ({ children }) => {
     },
     [updateHovering]
   );
-  const subscribe = useCallback2((listener) => {
+  const subscribe = useCallback3((listener) => {
     storeRef.current.subscribers.add(listener);
     return () => {
       storeRef.current.subscribers.delete(listener);
     };
   }, []);
-  const isHovering = useCallback2((id) => {
+  const isHovering = useCallback3((id) => {
     return storeRef.current.hoveringIds.has(id);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const handlePointerPosition = (event) => {
       const { clientX, clientY } = event;
       const pointer = storeRef.current.pointer;
@@ -899,7 +878,7 @@ var MouseTrackerProvider = ({ children }) => {
       window.removeEventListener("click", handleClick);
     };
   }, [updateHovering]);
-  const value = useMemo2(
+  const value = useMemo(
     () => ({
       registerBoundingBox,
       updateBoundingBox,
@@ -915,19 +894,222 @@ var MouseTrackerProvider = ({ children }) => {
       isHovering
     ]
   );
-  return /* @__PURE__ */ jsx3(MouseTrackerContext.Provider, { value, 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",
+  fontSize: "11px",
+  fontWeight: 700,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase"
+};
+var SchematicComponentDetailsTooltip = ({
+  sourceComponent,
+  footprinterString,
+  footprintPreviewCircuitJson,
+  footprintPreviewViewBox,
+  left,
+  top,
+  width,
+  maxHeight,
+  onClose
+}) => {
+  const infoEntries = useMemo2(
+    () => getSourceComponentInfoEntries(sourceComponent),
+    [sourceComponent]
+  );
+  const footprintPreviewUrl = useMemo2(
+    () => footprintPreviewCircuitJson?.length && footprintPreviewViewBox ? getFootprintPreviewUrl(
+      footprintPreviewCircuitJson,
+      footprintPreviewViewBox
+    ) : void 0,
+    [footprintPreviewCircuitJson, footprintPreviewViewBox]
+  );
+  const componentType = sourceComponent.ftype ? humanizeComponentField(sourceComponent.ftype) : "Component";
+  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: "12px",
+        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(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: "16px",
+              padding: "18px 18px 14px",
+              borderBottom: "1px solid #e2e8f0"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "20px",
+                      fontWeight: 750,
+                      lineHeight: 1.2,
+                      overflowWrap: "anywhere"
+                    },
+                    children: sourceComponent.display_name ?? sourceComponent.name
+                  }
+                ),
+                /* @__PURE__ */ jsx2("div", { style: { color: "#64748b", fontSize: "13px", marginTop: 4 }, children: componentType })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close component details",
+                  onClick: onClose,
+                  style: {
+                    display: "grid",
+                    placeItems: "center",
+                    flex: "0 0 auto",
+                    width: "30px",
+                    height: "30px",
+                    padding: 0,
+                    border: "1px solid #e2e8f0",
+                    borderRadius: "8px",
+                    background: "#f8fafc",
+                    color: "#475569",
+                    cursor: "pointer",
+                    fontSize: "20px",
+                    lineHeight: 1
+                  },
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        infoEntries.length > 0 && /* @__PURE__ */ jsx2(
+          "dl",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "minmax(110px, 0.8fr) minmax(0, 1.2fr)",
+              gap: "10px 18px",
+              margin: 0,
+              padding: "16px 18px",
+              borderBottom: footprinterString ? "1px solid #e2e8f0" : void 0
+            },
+            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: { padding: "16px 18px 18px" }, children: [
+          /* @__PURE__ */ jsx2("div", { style: { ...detailLabelStyle, marginBottom: 7 }, children: "Footprint" }),
+          /* @__PURE__ */ jsx2(
+            "code",
+            {
+              style: {
+                display: "block",
+                marginBottom: "12px",
+                padding: "8px 10px",
+                borderRadius: "7px",
+                background: "#f1f5f9",
+                color: "#334155",
+                fontSize: "12px",
+                lineHeight: 1.4,
+                overflowWrap: "anywhere",
+                whiteSpace: "pre-wrap"
+              },
+              children: footprinterString
+            }
+          ),
+          footprintPreviewUrl && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                height: "210px",
+                overflow: "hidden",
+                border: "1px solid #e2e8f0",
+                borderRadius: "9px",
+                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 useCallback3, useEffect as useEffect6, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef4, useState as useState3 } from "react";
 
 // lib/hooks/useMouseEventsOverBoundingBox.ts
 import {
   useContext as useContext2,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useId,
   useMemo as useMemo3,
-  useRef as useRef2,
+  useRef as useRef3,
   useSyncExternalStore
 } from "react";
 var useMouseEventsOverBoundingBox = (options) => {
@@ -938,7 +1120,7 @@ var useMouseEventsOverBoundingBox = (options) => {
     );
   }
   const id = useId();
-  const latestOptionsRef = useRef2(options);
+  const latestOptionsRef = useRef3(options);
   latestOptionsRef.current = options;
   const handleClick = useMemo3(
     () => (event) => {
@@ -946,7 +1128,7 @@ var useMouseEventsOverBoundingBox = (options) => {
     },
     []
   );
-  useEffect5(() => {
+  useEffect6(() => {
     context.registerBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -955,7 +1137,7 @@ var useMouseEventsOverBoundingBox = (options) => {
       context.unregisterBoundingBox(id);
     };
   }, [context, handleClick, id]);
-  useEffect5(() => {
+  useEffect6(() => {
     context.updateBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -979,7 +1161,7 @@ var useMouseEventsOverBoundingBox = (options) => {
 };
 
 // lib/components/SchematicComponentMouseTarget.tsx
-import { jsx as jsx4 } 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;
@@ -994,9 +1176,9 @@ var SchematicComponentMouseTarget = ({
   showOutline,
   circuitJsonKey
 }) => {
-  const [measurement, setMeasurement] = useState2(null);
-  const frameRef = useRef3(null);
-  const measure = useCallback3(() => {
+  const [measurement, setMeasurement] = useState3(null);
+  const frameRef = useRef4(null);
+  const measure = useCallback4(() => {
     frameRef.current = null;
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1031,14 +1213,14 @@ var SchematicComponentMouseTarget = ({
       (prev) => areMeasurementsEqual(prev, nextMeasurement) ? prev : nextMeasurement
     );
   }, [componentId, containerRef, svgDivRef]);
-  const scheduleMeasure = useCallback3(() => {
+  const scheduleMeasure = useCallback4(() => {
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect6(() => {
+  useEffect7(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect6(() => {
+  useEffect7(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1070,7 +1252,7 @@ var SchematicComponentMouseTarget = ({
       }
     };
   }, [scheduleMeasure, svgDivRef, containerRef]);
-  const handleClick = useCallback3(
+  const handleClick = useCallback4(
     (event) => {
       if (onComponentClick) {
         onComponentClick(componentId, event);
@@ -1083,7 +1265,7 @@ var SchematicComponentMouseTarget = ({
     bounds,
     onClick: onComponentClick ? handleClick : void 0
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (onHoverChange) {
       onHoverChange(componentId, hovering);
     }
@@ -1092,7 +1274,7 @@ var SchematicComponentMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
@@ -1110,8 +1292,8 @@ var SchematicComponentMouseTarget = ({
 };
 
 // lib/components/SchematicPortMouseTarget.tsx
-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";
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef5, useState as useState4 } from "react";
+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;
@@ -1127,9 +1309,9 @@ var SchematicPortMouseTarget = ({
   showOutline,
   circuitJsonKey
 }) => {
-  const [measurement, setMeasurement] = useState3(null);
-  const frameRef = useRef4(null);
-  const measure = useCallback4(() => {
+  const [measurement, setMeasurement] = useState4(null);
+  const frameRef = useRef5(null);
+  const measure = useCallback5(() => {
     frameRef.current = null;
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1165,14 +1347,14 @@ var SchematicPortMouseTarget = ({
       (prev) => areMeasurementsEqual2(prev, nextMeasurement) ? prev : nextMeasurement
     );
   }, [portId, containerRef, svgDivRef]);
-  const scheduleMeasure = useCallback4(() => {
+  const scheduleMeasure = useCallback5(() => {
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect7(() => {
+  useEffect8(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect7(() => {
+  useEffect8(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1204,7 +1386,7 @@ var SchematicPortMouseTarget = ({
       }
     };
   }, [scheduleMeasure, svgDivRef, containerRef]);
-  const handleClick = useCallback4(
+  const handleClick = useCallback5(
     (event) => {
       if (onPortClick) {
         onPortClick(portId, event);
@@ -1217,7 +1399,7 @@ var SchematicPortMouseTarget = ({
     bounds,
     onClick: onPortClick ? handleClick : void 0
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (onHoverChange) {
       onHoverChange(portId, hovering);
     }
@@ -1226,8 +1408,8 @@ var SchematicPortMouseTarget = ({
     return null;
   }
   const rect = measurement.rect;
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -1245,7 +1427,7 @@ var SchematicPortMouseTarget = ({
         }
       }
     ),
-    hovering && portLabel && /* @__PURE__ */ jsx5(
+    hovering && portLabel && /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -1270,11 +1452,11 @@ var SchematicPortMouseTarget = ({
 };
 
 // lib/components/SchematicSheetSelector.tsx
-import { useState as useState4 } from "react";
-import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-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 = {
+import { useState as useState5 } from "react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+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",
   color: "#111111",
   borderRadius: 8,
@@ -1286,11 +1468,11 @@ var contentStyles2 = {
   maxHeight: 320,
   overflowY: "auto",
   fontSize: 13,
-  fontFamily: FONT_FAMILY2,
+  fontFamily: FONT_FAMILY,
   outline: "none",
   zIndex: zIndexMap.viewMenu
 };
-var itemStyles2 = {
+var itemStyles = {
   display: "flex",
   alignItems: "center",
   gap: 8,
@@ -1301,9 +1483,9 @@ var itemStyles2 = {
   userSelect: "none",
   color: "#111111",
   fontSize: 13,
-  fontFamily: FONT_FAMILY2
+  fontFamily: FONT_FAMILY
 };
-var iconSlotStyles2 = {
+var iconSlotStyles = {
   width: 16,
   height: 16,
   flexShrink: 0,
@@ -1322,7 +1504,7 @@ var MENU_CSS = `
 .sv-sheet-chevron { transition: transform 0.2s ease; }
 [data-state="open"] > .sv-sheet-chevron { transform: rotate(180deg); }
 `;
-var CheckIcon2 = () => /* @__PURE__ */ jsx6(
+var CheckIcon = () => /* @__PURE__ */ jsx5(
   "svg",
   {
     width: "14",
@@ -1334,10 +1516,10 @@ var CheckIcon2 = () => /* @__PURE__ */ jsx6(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx6("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx6(
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx5(
   "svg",
   {
     className,
@@ -1351,7 +1533,7 @@ var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx6(
     strokeLinejoin: "round",
     style: { opacity: 0.6, flexShrink: 0 },
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx6("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx5("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var SchematicSheetSelector = ({
@@ -1359,16 +1541,16 @@ var SchematicSheetSelector = ({
   selectedSheetId,
   onSelectSheet
 }) => {
-  const [open, setOpen] = useState4(false);
+  const [open, setOpen] = useState5(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__ */ 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(
+  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",
@@ -1391,31 +1573,31 @@ var SchematicSheetSelector = ({
             cursor: "pointer",
             boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
             fontSize: "13px",
-            fontFamily: FONT_FAMILY2,
+            fontFamily: FONT_FAMILY,
             zIndex: zIndexMap.viewMenuIcon
           },
           children: [
-            /* @__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__ */ 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__ */ jsx6(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx6(
-        DropdownMenu2.Content,
+      /* @__PURE__ */ jsx5(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx5(
+        DropdownMenu.Content,
         {
-          style: contentStyles2,
+          style: contentStyles,
           side: "bottom",
           align: "start",
           sideOffset: 8,
           collisionPadding: 10,
           children: sheets.map((sheet) => {
             const selected = sheet.schematic_sheet_id === selectedSheetId;
-            return /* @__PURE__ */ jsxs4(
-              DropdownMenu2.Item,
+            return /* @__PURE__ */ jsxs3(
+              DropdownMenu.Item,
               {
                 className: "sv-sheet-item",
-                style: itemStyles2,
+                style: itemStyles,
                 title: sheet.name,
                 onSelect: (e) => e.preventDefault(),
                 onPointerUp: () => {
@@ -1423,8 +1605,8 @@ var SchematicSheetSelector = ({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: selected && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
-                  /* @__PURE__ */ jsx6("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
@@ -1436,6 +1618,275 @@ 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 useMemo4 } from "react";
+
+// package.json
+var package_default = {
+  name: "@tscircuit/schematic-viewer",
+  version: "2.0.79",
+  main: "dist/index.js",
+  type: "module",
+  scripts: {
+    start: "cosmos",
+    build: "tsup-node ./lib/index.ts --dts --format esm --sourcemap",
+    "build:site": "cosmos-export",
+    "vercel-build": "bun run build:site",
+    format: "biome format --write .",
+    "format:check": "biome format ."
+  },
+  files: [
+    "dist"
+  ],
+  devDependencies: {
+    "@biomejs/biome": "^1.9.4",
+    "@types/bun": "latest",
+    "@types/debug": "^4.1.12",
+    "@types/jsdom": "^21.1.7",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    jsdom: "^26.0.0",
+    react: "^19.1.0",
+    "react-cosmos": "^6.2.1",
+    "react-cosmos-plugin-vite": "^6.2.0",
+    "react-dom": "^19.1.0",
+    "react-reconciler": "^0.31.0",
+    semver: "^7.7.2",
+    tscircuit: "^0.0.2112",
+    tsup: "^8.3.5",
+    vite: "^6.0.3"
+  },
+  peerDependencies: {
+    typescript: "^5.0.0",
+    tscircuit: "*"
+  },
+  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 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",
+  color: "#fafafa",
+  borderRadius: 6,
+  boxShadow: "0px 12px 48px -12px rgba(0, 0, 0, 0.5), 0px 8px 24px -8px rgba(0, 0, 0, 0.3)",
+  border: "1px solid #333333",
+  padding: 4,
+  minWidth: 208,
+  fontSize: 14,
+  fontWeight: 400,
+  fontFamily: FONT_FAMILY2,
+  outline: "none",
+  zIndex: zIndexMap.contextMenu
+};
+var itemStyles2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "6px 8px",
+  borderRadius: 6,
+  cursor: "default",
+  outline: "none",
+  userSelect: "none",
+  color: "#fafafa",
+  fontSize: 14,
+  fontWeight: 400,
+  fontFamily: FONT_FAMILY2
+};
+var iconSlotStyles2 = {
+  width: 16,
+  height: 16,
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#fafafa"
+};
+var separatorStyles = {
+  height: 1,
+  backgroundColor: "#ffffff1a",
+  margin: "4px 0"
+};
+var HIGHLIGHT_CSS = `
+.sv-vm-item[data-highlighted]:not([data-disabled]),
+.sv-vm-item:hover:not([data-disabled]) { background-color: #404040; }
+.sv-vm-item[data-disabled] { opacity: 0.45; cursor: not-allowed; }
+`;
+var CheckIcon2 = () => /* @__PURE__ */ jsx6(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx6("path", { d: "M20 6 9 17l-5-5" })
+  }
+);
+var ViewMenu = ({
+  circuitJson,
+  circuitJsonKey,
+  menuRef,
+  menuPos,
+  onOpenChange,
+  showGroups,
+  onToggleGroups,
+  showGrid,
+  onToggleGrid,
+  showPorts,
+  onTogglePorts
+}) => {
+  const hasGroups = useMemo4(() => {
+    if (!circuitJson || circuitJson.length === 0) return false;
+    try {
+      const sourceGroups = su3(circuitJson).source_group?.list() || [];
+      if (sourceGroups.length > 0) return true;
+      const schematicComponents = su3(circuitJson).schematic_component?.list() || [];
+      if (schematicComponents.length > 1) {
+        const componentTypes = /* @__PURE__ */ new Set();
+        for (const comp of schematicComponents) {
+          const sourceComp = su3(circuitJson).source_component.get(
+            comp.source_component_id
+          );
+          if (sourceComp?.ftype) {
+            componentTypes.add(sourceComp.ftype);
+          }
+        }
+        return componentTypes.size > 1;
+      }
+      return false;
+    } catch (error) {
+      console.error("Error checking for groups:", error);
+      return false;
+    }
+  }, [circuitJsonKey]);
+  const hasPorts = useMemo4(() => {
+    if (!circuitJson || circuitJson.length === 0) return false;
+    try {
+      return (su3(circuitJson).schematic_port?.list() || []).length > 0;
+    } catch (error) {
+      console.error("Error checking for schematic ports:", error);
+      return false;
+    }
+  }, [circuitJsonKey]);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref: menuRef,
+      style: {
+        position: "fixed",
+        left: menuPos.x,
+        top: menuPos.y,
+        width: 0,
+        height: 0
+      },
+      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,
+            align: "start",
+            sideOffset: 0,
+            collisionPadding: 10,
+            avoidCollisions: true,
+            children: [
+              /* @__PURE__ */ jsx6("style", { children: HIGHLIGHT_CSS }),
+              /* @__PURE__ */ jsxs4(
+                DropdownMenu2.Item,
+                {
+                  className: "sv-vm-item",
+                  style: itemStyles2,
+                  disabled: !hasPorts,
+                  title: hasPorts ? void 0 : "No ports found in this schematic",
+                  onSelect: (event) => event.preventDefault(),
+                  onPointerDown: (event) => {
+                    event.preventDefault();
+                    if (hasPorts) onTogglePorts(!showPorts);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showPorts && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx6("span", { children: "Show Schematic Ports" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                DropdownMenu2.Item,
+                {
+                  className: "sv-vm-item",
+                  style: itemStyles2,
+                  disabled: !hasGroups,
+                  title: hasGroups ? void 0 : "No groups found in this schematic",
+                  onSelect: (event) => event.preventDefault(),
+                  onPointerDown: (event) => {
+                    event.preventDefault();
+                    if (hasGroups) onToggleGroups(!showGroups);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showGroups && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx6("span", { children: "View Schematic Groups" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                DropdownMenu2.Item,
+                {
+                  className: "sv-vm-item",
+                  style: itemStyles2,
+                  onSelect: (event) => event.preventDefault(),
+                  onPointerDown: (event) => {
+                    event.preventDefault();
+                    onToggleGrid(!showGrid);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showGrid && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx6("span", { children: "Show Grid" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx6(DropdownMenu2.Separator, { style: separatorStyles }),
+              /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  style: {
+                    padding: "4px 8px 4px 32px",
+                    fontSize: 11,
+                    opacity: 0.35,
+                    color: "#a1a1aa",
+                    letterSpacing: "0.2px",
+                    fontFamily: FONT_FAMILY2
+                  },
+                  children: [
+                    "@tscircuit/schematic-viewer@",
+                    String(package_default?.version)
+                  ]
+                }
+              )
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+};
+
 // lib/components/SchematicViewer.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var SchematicViewer = ({
@@ -1448,7 +1899,7 @@ var SchematicViewer = ({
   disableGroups = false,
   netHoverHighlightEnabled = true,
   onSchematicComponentClicked,
-  showSchematicPorts = false,
+  showSchematicPorts,
   onSchematicPortClicked,
   onSchematicSheetChange,
   css,
@@ -1460,11 +1911,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) {
@@ -1474,7 +1925,7 @@ var SchematicViewer = ({
   }, [circuitJsonKey]);
   const hasMultipleSheets = schematicSheets.length > 1;
   const defaultSheetId = schematicSheets[0]?.schematic_sheet_id;
-  const [selectedSheetId, setSelectedSheetId] = useState5(
+  const [selectedSheetId, setSelectedSheetId] = useState6(
     () => {
       const stored = getStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET);
       if (stored && schematicSheets.some((s) => s.schematic_sheet_id === stored)) {
@@ -1483,14 +1934,14 @@ var SchematicViewer = ({
       return defaultSheetId;
     }
   );
-  useEffect8(() => {
+  useEffect9(() => {
     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 = useCallback5(
+  const handleSelectSheet = useCallback6(
     (sheetId) => {
       setSelectedSheetId(sheetId);
       setStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET, sheetId);
@@ -1498,19 +1949,27 @@ var SchematicViewer = ({
     },
     [onSchematicSheetChange]
   );
-  const [showGridInternal, setShowGridInternal] = useState5(false);
+  const [showGridInternal, setShowGridInternal] = useState6(false);
   const showGrid = debugGrid || showGridInternal;
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState5(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState6(
     !clickToInteractEnabled
   );
-  const [showViewMenu, setShowViewMenu] = useState5(false);
-  const [showSchematicGroups, setShowSchematicGroups] = useState5(() => {
+  const [showSchematicGroups, setShowSchematicGroups] = useState6(() => {
     if (disableGroups) return false;
-    return getStoredBoolean("schematic_viewer_show_groups", false);
+    return getStoredBoolean(STORAGE_KEYS.IS_SHOWING_SCHEMATIC_GROUPS, false);
   });
-  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState5(false);
-  const hoveringComponentsRef = useRef5(/* @__PURE__ */ new Set());
-  const handleComponentHoverChange = useCallback5(
+  const [showSchematicPortsInternal, setShowSchematicPortsInternal] = useState6(
+    () => showSchematicPorts ?? getStoredBoolean(STORAGE_KEYS.IS_SHOWING_SCHEMATIC_PORTS, false)
+  );
+  useEffect9(() => {
+    if (showSchematicPorts !== void 0) {
+      setShowSchematicPortsInternal(showSchematicPorts);
+    }
+  }, [showSchematicPorts]);
+  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState6(false);
+  const hoveringComponentsRef = useRef6(/* @__PURE__ */ new Set());
+  const [selectedSchematicComponent, setSelectedSchematicComponent] = useState6(null);
+  const handleComponentHoverChange = useCallback6(
     (componentId, isHovering) => {
       if (isHovering) {
         hoveringComponentsRef.current.add(componentId);
@@ -1521,9 +1980,9 @@ var SchematicViewer = ({
     },
     []
   );
-  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState5(false);
-  const hoveringPortsRef = useRef5(/* @__PURE__ */ new Set());
-  const handlePortHoverChange = useCallback5(
+  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState6(false);
+  const hoveringPortsRef = useRef6(/* @__PURE__ */ new Set());
+  const handlePortHoverChange = useCallback6(
     (portId, isHovering) => {
       if (isHovering) {
         hoveringPortsRef.current.add(portId);
@@ -1534,9 +1993,9 @@ var SchematicViewer = ({
     },
     []
   );
-  const svgDivRef = useRef5(null);
-  const touchStartRef = useRef5(null);
-  const schematicComponentIds = useMemo4(() => {
+  const svgDivRef = useRef6(null);
+  const touchStartRef = useRef6(null);
+  const schematicComponentIds = useMemo5(() => {
     try {
       const components = su4(circuitJson).schematic_component?.list() ?? [];
       return components.filter(
@@ -1547,8 +2006,8 @@ var SchematicViewer = ({
       return [];
     }
   }, [circuitJsonKey, circuitJson, activeSheetId]);
-  const schematicPortsInfo = useMemo4(() => {
-    if (!showSchematicPorts) return [];
+  const schematicPortsInfo = useMemo5(() => {
+    if (!showSchematicPortsInternal) return [];
     try {
       const ports = (su4(circuitJson).schematic_port?.list() ?? []).filter(
         (port) => !activeSheetId || port.schematic_sheet_id === activeSheetId
@@ -1567,7 +2026,7 @@ var SchematicViewer = ({
       console.error("Failed to derive schematic port info", err);
       return [];
     }
-  }, [circuitJsonKey, circuitJson, showSchematicPorts, activeSheetId]);
+  }, [circuitJsonKey, circuitJson, showSchematicPortsInternal, activeSheetId]);
   const handleTouchStart = (e) => {
     const touch = e.touches[0];
     touchStartRef.current = {
@@ -1587,21 +2046,106 @@ var SchematicViewer = ({
     }
     touchStartRef.current = null;
   };
+  const shouldPanSchematic = useCallback6(
+    (event) => {
+      if (event.type !== "mousedown" || !("button" in event)) return true;
+      return event.button !== 2 && !(event.button === 0 && event.ctrlKey);
+    },
+    []
+  );
   const { ref: containerRef } = useMouseMatrixTransform({
     onSetTransform(transform) {
       if (!svgDivRef.current) return;
       svgDivRef.current.style.transform = transformToString(transform);
     },
     // @ts-ignore disabled is a valid prop but not typed
-    enabled: isInteractionEnabled
+    enabled: isInteractionEnabled,
+    shouldDrag: shouldPanSchematic
   });
+  const {
+    menuVisible,
+    menuPos,
+    menuRef,
+    setMenuVisible,
+    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,
       height: containerHeight || 720,
-      drawPorts: showSchematicPorts,
+      drawPorts: showSchematicPortsInternal,
       schematicSheetId: activeSheetId,
       grid: !showGrid ? void 0 : {
         cellSize: 1,
@@ -1616,10 +2160,10 @@ var SchematicViewer = ({
     containerWidth,
     containerHeight,
     showGrid,
-    showSchematicPorts,
+    showSchematicPortsInternal,
     activeSheetId
   ]);
-  const containerBackgroundColor = useMemo4(() => {
+  const containerBackgroundColor = useMemo5(() => {
     const match = svgString.match(
       /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i
     );
@@ -1637,7 +2181,7 @@ var SchematicViewer = ({
     circuitJsonKey: `${circuitJsonKey}_${activeSheetId ?? ""}`,
     enabled: netHoverHighlightEnabled
   });
-  const svgDiv = useMemo4(
+  const svgDiv = useMemo5(
     () => /* @__PURE__ */ jsx7(
       "div",
       {
@@ -1646,7 +2190,7 @@ 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 }
       }
     ),
@@ -1655,8 +2199,8 @@ var SchematicViewer = ({
   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__ */ 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__ */ 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",
       {
@@ -1665,19 +2209,32 @@ 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",
+          WebkitTouchCallout: "none",
           ...containerStyle
         },
         onMouseDownCapture: (e) => {
+          contextMenuEventHandlers.onMouseDown(e);
           if (clickToInteractEnabled && !isInteractionEnabled) {
             e.preventDefault();
             e.stopPropagation();
             return;
           }
         },
-        onTouchStart: handleTouchStart,
-        onTouchEnd: handleTouchEnd,
+        onContextMenu: contextMenuEventHandlers.onContextMenu,
+        onTouchStart: (event) => {
+          handleTouchStart(event);
+          contextMenuEventHandlers.onTouchStart(event);
+        },
+        onTouchMove: contextMenuEventHandlers.onTouchMove,
+        onTouchEnd: (event) => {
+          handleTouchEnd(event);
+          contextMenuEventHandlers.onTouchEnd();
+        },
+        onTouchCancel: contextMenuEventHandlers.onTouchCancel,
         children: [
           !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx7(
             "div",
@@ -1715,18 +2272,27 @@ var SchematicViewer = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx7(
+          menuVisible && /* @__PURE__ */ jsx7(
             ViewMenu,
             {
               circuitJson,
               circuitJsonKey,
-              open: showViewMenu,
-              onOpenChange: setShowViewMenu,
+              menuRef,
+              menuPos,
+              onOpenChange: setMenuVisible,
+              showPorts: showSchematicPortsInternal,
+              onTogglePorts: (value) => {
+                setShowSchematicPortsInternal(value);
+                setStoredBoolean(STORAGE_KEYS.IS_SHOWING_SCHEMATIC_PORTS, value);
+              },
               showGroups: showSchematicGroups,
               onToggleGroups: (value) => {
                 if (!disableGroups) {
                   setShowSchematicGroups(value);
-                  setStoredBoolean("schematic_viewer_show_groups", value);
+                  setStoredBoolean(
+                    STORAGE_KEYS.IS_SHOWING_SCHEMATIC_GROUPS,
+                    value
+                  );
                 }
               },
               showGrid,
@@ -1741,7 +2307,7 @@ var SchematicViewer = ({
               onSelectSheet: handleSelectSheet
             }
           ),
-          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx7(
+          schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx7(
             SchematicComponentMouseTarget,
             {
               componentId,
@@ -1750,17 +2316,23 @@ var SchematicViewer = ({
               showOutline: true,
               circuitJsonKey,
               onHoverChange: handleComponentHoverChange,
-              onComponentClick: (id, event) => {
-                onSchematicComponentClicked?.({
-                  schematicComponentId: id,
-                  event
-                });
-              }
+              onComponentClick: handleSchematicComponentClick
             },
             componentId
           )),
           svgDiv,
-          showSchematicPorts && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx7(
+          selectedComponentDetails && componentTooltipLayout && /* @__PURE__ */ jsx7(
+            SchematicComponentDetailsTooltip,
+            {
+              sourceComponent: selectedComponentDetails.sourceComponent,
+              footprinterString: selectedComponentDetails.footprinterString,
+              footprintPreviewCircuitJson: selectedComponentDetails.footprintPreviewCircuitJson,
+              footprintPreviewViewBox: selectedComponentDetails.footprintPreviewViewBox,
+              ...componentTooltipLayout,
+              onClose: () => setSelectedSchematicComponent(null)
+            }
+          ),
+          showSchematicPortsInternal && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx7(
             SchematicPortMouseTarget,
             {
               portId,
@@ -1790,7 +2362,7 @@ import {
   convertCircuitJsonToSchematicSimulationSvg,
   convertCircuitJsonToSimulationGraphSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect9, useMemo as useMemo5, useRef as useRef6, useState as useState7 } 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";
 
@@ -1808,7 +2380,7 @@ var getAnalogSimulationBackgroundColor = (simulationSvg, colorOverrides) => getR
 
 // lib/components/AnalogSimulationSelector.tsx
 import * as DropdownMenu3 from "@radix-ui/react-dropdown-menu";
-import { useState as useState6 } from "react";
+import { useState as useState7 } 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 = {
@@ -1907,7 +2479,7 @@ var AnalogSimulationSelector = ({
   selectedSimulationExperimentId,
   onSelectSimulation
 }) => {
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState7(false);
   if (simulations.length <= 1) return null;
   const simulationLabels = getSimulationLabels(simulations);
   const selectedSimulation = simulationLabels.find(
@@ -2001,16 +2573,16 @@ var AnalogSimulationViewer = ({
   onSimulationChange,
   acSweepView = "magnitude"
 }) => {
-  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 [circuitJson, setCircuitJson] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(true);
+  const [error, setError] = useState8(null);
+  const [svgObjectUrl, setSvgObjectUrl] = useState8(null);
+  const containerRef = useRef7(null);
+  const imgRef = useRef7(null);
   const { containerWidth } = useResizeHandling(
     containerRef
   );
-  const [isDragging, setIsDragging] = useState7(false);
+  const [isDragging, setIsDragging] = useState8(false);
   const {
     ref: transformRef,
     cancelDrag: _cancelDrag,
@@ -2026,23 +2598,23 @@ var AnalogSimulationViewer = ({
   const renderAspectRatio = width && height ? width / height : defaultRenderAspectRatio;
   const effectiveWidth = width || (height ? height * renderAspectRatio : containerWidth) || DEFAULT_RENDER_WIDTH;
   const effectiveHeight = height || effectiveWidth / renderAspectRatio;
-  useEffect9(() => {
+  useEffect10(() => {
     setIsLoading(true);
     setError(null);
     setCircuitJson(inputCircuitJson);
     setIsLoading(false);
   }, [inputCircuitJson]);
-  const simulationExperiments = useMemo5(() => {
+  const simulationExperiments = useMemo6(() => {
     if (!circuitJson) return [];
     return circuitJson.filter(
       (element) => element.type === "simulation_experiment"
     );
   }, [circuitJson]);
-  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState7(null);
+  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState8(null);
   const simulationExperimentId = (selectedSimulationExperimentId && simulationExperiments.some(
     (simulation) => simulation.simulation_experiment_id === selectedSimulationExperimentId
   ) ? selectedSimulationExperimentId : simulationExperiments[0]?.simulation_experiment_id) ?? null;
-  useEffect9(() => {
+  useEffect10(() => {
     if (simulationExperimentId !== selectedSimulationExperimentId) {
       setSelectedSimulationExperimentId(simulationExperimentId);
     }
@@ -2051,7 +2623,7 @@ var AnalogSimulationViewer = ({
     setSelectedSimulationExperimentId(nextSimulationExperimentId);
     onSimulationChange?.(nextSimulationExperimentId);
   };
-  const simulationSvg = useMemo5(() => {
+  const simulationSvg = useMemo6(() => {
     if (!circuitJson || !effectiveWidth || !effectiveHeight || !simulationExperimentId)
       return "";
     try {
@@ -2079,7 +2651,7 @@ var AnalogSimulationViewer = ({
     simulationExperimentId,
     acSweepView
   ]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!simulationSvg) {
       setSvgObjectUrl(null);
       return;
@@ -2096,7 +2668,7 @@ var AnalogSimulationViewer = ({
       setSvgObjectUrl(null);
     }
   }, [simulationSvg]);
-  const containerBackgroundColor = useMemo5(() => {
+  const containerBackgroundColor = useMemo6(() => {
     return getAnalogSimulationBackgroundColor(simulationSvg, colorOverrides);
   }, [simulationSvg, colorOverrides]);
   const handleMouseDown = (_e) => {
@@ -2105,7 +2677,7 @@ var AnalogSimulationViewer = ({
   const handleTouchStart = (_e) => {
     setIsDragging(true);
   };
-  useEffect9(() => {
+  useEffect10(() => {
     const handleMouseUp = () => {
       setIsDragging(false);
     };