@tscircuit/schematic-viewer 2.0.81 → 2.0.85

package/dist/index.js

@@ -430,6 +430,321 @@ function buildNetRegistry(circuitJson) {
   return { componentIdToKeys, netLabelIdToKey };
 }
 
+// lib/hooks/useSchematicSearch.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef, useState } from "react";
+import { fromString } from "transformation-matrix";
+
+// lib/utils/get-schematic-search-results.ts
+var normalize = (value) => String(value ?? "").toLocaleLowerCase();
+var getTextMatchScore = (text, query) => {
+  const normalizedText = normalize(text);
+  if (normalizedText === query) return 0;
+  if (normalizedText.startsWith(query)) return 1;
+  if (normalizedText.includes(query)) return 2;
+  return Number.POSITIVE_INFINITY;
+};
+var humanizeComponentType = (ftype) => {
+  if (!ftype) return void 0;
+  return String(ftype).replace(/^simple_/, "").replaceAll("_", " ").replace(/\b\w/g, (character) => character.toLocaleUpperCase());
+};
+var getComponentDetail = (sourceComponent, schematicComponent, primaryLabel) => {
+  const componentType = humanizeComponentType(sourceComponent?.ftype);
+  let displayName;
+  if (sourceComponent?.display_name !== primaryLabel) {
+    displayName = sourceComponent?.display_name;
+  }
+  let componentValue = sourceComponent?.display_value;
+  if (!componentValue && sourceComponent) {
+    for (const displayField of [
+      "display_resistance",
+      "display_capacitance",
+      "display_inductance",
+      "display_frequency",
+      "symbol_display_value"
+    ]) {
+      if (displayField in sourceComponent) {
+        const displayedMeasurement = sourceComponent[displayField];
+        if (typeof displayedMeasurement === "string") {
+          componentValue = displayedMeasurement;
+          break;
+        }
+      }
+    }
+  }
+  componentValue ?? (componentValue = schematicComponent.symbol_display_value);
+  if (componentType && componentValue) {
+    return `${componentType} \xB7 ${componentValue}`;
+  }
+  return componentValue ?? displayName ?? sourceComponent?.manufacturer_part_number ?? componentType;
+};
+var isSourceComponent = (element) => element.type === "source_component" && "source_component_id" in element;
+var isSourcePort = (element) => element.type === "source_port";
+var isSourceTrace = (element) => element.type === "source_trace";
+var isSchematicComponent = (element) => element.type === "schematic_component";
+var isSchematicPort = (element) => element.type === "schematic_port";
+var isSchematicNetLabel = (element) => element.type === "schematic_net_label";
+var isSchematicSheet = (element) => element.type === "schematic_sheet";
+var getSchematicSheetName = ({
+  schematicSheets,
+  schematicSheetId
+}) => {
+  if (schematicSheets.length <= 1 || !schematicSheetId) return void 0;
+  return schematicSheets.find(
+    (sheet) => sheet.schematic_sheet_id === schematicSheetId
+  )?.name;
+};
+var getSchematicSearchResults = (circuitJson, query) => {
+  const normalizedQuery = normalize(query).trim();
+  if (!normalizedQuery) return [];
+  const sourceComponents = new Map(
+    circuitJson.filter(isSourceComponent).map((element) => [element.source_component_id, element])
+  );
+  const sourcePorts = new Map(
+    circuitJson.filter(isSourcePort).map((element) => [element.source_port_id, element])
+  );
+  const schematicPorts = circuitJson.filter(isSchematicPort);
+  const sourceTraces = circuitJson.filter(isSourceTrace);
+  const schematicSheets = circuitJson.filter(isSchematicSheet);
+  const results = [];
+  const resultScores = /* @__PURE__ */ new Map();
+  for (const component of circuitJson.filter(isSchematicComponent)) {
+    const sourceComponent = component.source_component_id ? sourceComponents.get(component.source_component_id) : void 0;
+    const primaryLabel = sourceComponent?.name ?? sourceComponent?.display_name ?? "Component";
+    const componentScore = getTextMatchScore(primaryLabel, normalizedQuery);
+    if (Number.isFinite(componentScore)) {
+      const result = {
+        label: primaryLabel,
+        detail: getComponentDetail(sourceComponent, component, primaryLabel),
+        kind: "component",
+        schematicSheetId: component.schematic_sheet_id,
+        schematicSheetName: getSchematicSheetName({
+          schematicSheets,
+          schematicSheetId: component.schematic_sheet_id
+        }),
+        target: {
+          type: "schematic_component",
+          id: component.schematic_component_id
+        }
+      };
+      results.push(result);
+      resultScores.set(result, componentScore);
+    }
+  }
+  for (const netLabel of circuitJson.filter(isSchematicNetLabel)) {
+    if (!normalize(netLabel.text).includes(normalizedQuery)) continue;
+    const connectedPortIds = /* @__PURE__ */ new Set();
+    for (const trace of sourceTraces.filter(
+      (sourceTrace) => sourceTrace.connected_source_net_ids.includes(netLabel.source_net_id)
+    )) {
+      for (const portId of trace.connected_source_port_ids) {
+        connectedPortIds.add(portId);
+      }
+    }
+    const anchorPosition = netLabel.anchor_position ?? netLabel.center;
+    const nearestConnectedPort = schematicPorts.filter(
+      (port) => connectedPortIds.has(port.source_port_id) && (!netLabel.schematic_sheet_id || !port.schematic_sheet_id || port.schematic_sheet_id === netLabel.schematic_sheet_id)
+    ).map((port) => ({
+      port,
+      distance: Math.hypot(
+        port.center.x - anchorPosition.x,
+        port.center.y - anchorPosition.y
+      )
+    })).filter(({ distance }) => distance <= 1).sort((a, b) => a.distance - b.distance)[0]?.port;
+    const sourcePort = nearestConnectedPort ? sourcePorts.get(nearestConnectedPort.source_port_id) : void 0;
+    const connectedComponent = sourcePort?.source_component_id ? sourceComponents.get(sourcePort.source_component_id) : void 0;
+    const connectedPinName = sourcePort?.name ?? (sourcePort?.pin_number !== void 0 ? `pin${sourcePort.pin_number}` : nearestConnectedPort?.display_pin_label);
+    const connectionLabel = connectedComponent?.name && connectedPinName ? `Connected to ${connectedComponent.name}.${connectedPinName}` : void 0;
+    const result = {
+      label: netLabel.text,
+      detail: connectionLabel,
+      kind: "net",
+      schematicSheetId: netLabel.schematic_sheet_id,
+      schematicSheetName: getSchematicSheetName({
+        schematicSheets,
+        schematicSheetId: netLabel.schematic_sheet_id
+      }),
+      target: {
+        type: "schematic_net_label",
+        id: netLabel.schematic_net_label_id
+      }
+    };
+    results.push(result);
+    resultScores.set(result, getTextMatchScore(netLabel.text, normalizedQuery));
+  }
+  return results.sort((a, b) => {
+    return (resultScores.get(a) ?? Number.POSITIVE_INFINITY) - (resultScores.get(b) ?? Number.POSITIVE_INFINITY) || a.label.localeCompare(b.label);
+  });
+};
+
+// lib/utils/get-search-result-transform.ts
+var getSearchResultTransform = ({
+  containerRect,
+  targetRect,
+  visibleProjection,
+  minimumScale
+}) => {
+  const currentScale = visibleProjection.a || 1;
+  const targetCenterInContainer = {
+    x: targetRect.left + targetRect.width / 2 - containerRect.left,
+    y: targetRect.top + targetRect.height / 2 - containerRect.top
+  };
+  const targetCenterBeforeViewerTransform = {
+    x: (targetCenterInContainer.x - visibleProjection.e) / currentScale,
+    y: (targetCenterInContainer.y - visibleProjection.f) / currentScale
+  };
+  const targetScale = Math.max(currentScale, minimumScale);
+  return {
+    a: targetScale,
+    b: 0,
+    c: 0,
+    d: targetScale,
+    e: containerRect.width / 2 - targetCenterBeforeViewerTransform.x * targetScale,
+    f: containerRect.height / 2 - targetCenterBeforeViewerTransform.y * targetScale
+  };
+};
+
+// lib/hooks/useSchematicSearch.ts
+var MIN_SEARCH_RESULT_ZOOM = 1.8;
+var SEARCH_FOCUS_ANIMATION_MS = 350;
+var useSchematicSearch = ({
+  circuitJson,
+  circuitJsonKey,
+  svgDivRef,
+  containerRef,
+  activeSheetId,
+  hasMultipleSheets,
+  handleSelectSheet,
+  svgString,
+  svgToScreenProjection,
+  setSvgToScreenProjection,
+  setIsInteractionEnabled
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [pendingSearchResult, setPendingSearchResult] = useState(null);
+  const searchAnimationTimerRef = useRef(
+    null
+  );
+  const searchResults = useMemo(
+    () => getSchematicSearchResults(circuitJson, searchQuery),
+    [circuitJson, circuitJsonKey, searchQuery]
+  );
+  const focusSearchResult = useCallback2(
+    (result) => {
+      const svgRoot = svgDivRef.current;
+      const container = containerRef.current;
+      if (!svgRoot || !container) return false;
+      let attribute = "data-schematic-net-label-id";
+      if (result.target.type === "schematic_component") {
+        attribute = "data-schematic-component-id";
+      }
+      const target = Array.from(
+        svgRoot.querySelectorAll(`[${attribute}]`)
+      ).find((element) => element.getAttribute(attribute) === result.target.id);
+      if (!target) return false;
+      const targetRect = target.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      if (!targetRect.width && !targetRect.height) return false;
+      if (searchAnimationTimerRef.current) {
+        clearTimeout(searchAnimationTimerRef.current);
+      }
+      let visibleProjection = svgToScreenProjection;
+      const visibleTransform = getComputedStyle(svgRoot).transform;
+      if (visibleTransform && visibleTransform !== "none") {
+        try {
+          visibleProjection = fromString(visibleTransform);
+          svgRoot.style.transition = "none";
+          svgRoot.style.transform = visibleTransform;
+          void svgRoot.offsetWidth;
+        } catch {
+        }
+      }
+      svgRoot.style.transition = `transform ${SEARCH_FOCUS_ANIMATION_MS}ms ease-in-out`;
+      void svgRoot.offsetWidth;
+      setSvgToScreenProjection(
+        getSearchResultTransform({
+          containerRect,
+          targetRect,
+          visibleProjection,
+          minimumScale: MIN_SEARCH_RESULT_ZOOM
+        })
+      );
+      searchAnimationTimerRef.current = setTimeout(() => {
+        svgRoot.style.transition = "";
+      }, SEARCH_FOCUS_ANIMATION_MS);
+      svgRoot.querySelectorAll(".schematic-search-match").forEach(
+        (element) => element.classList.remove("schematic-search-match")
+      );
+      svgRoot.querySelectorAll(`[${attribute}]`).forEach((element) => {
+        if (element.getAttribute(attribute) === result.target.id) {
+          element.classList.add("schematic-search-match");
+        }
+      });
+      return true;
+    },
+    [containerRef, setSvgToScreenProjection, svgDivRef, svgToScreenProjection]
+  );
+  const handleSearchResultSelect = useCallback2(
+    (result) => {
+      setIsInteractionEnabled(true);
+      if (result.schematicSheetId && result.schematicSheetId !== activeSheetId && hasMultipleSheets) {
+        handleSelectSheet(result.schematicSheetId);
+        setPendingSearchResult(result);
+        return;
+      }
+      focusSearchResult(result);
+    },
+    [
+      activeSheetId,
+      focusSearchResult,
+      handleSelectSheet,
+      hasMultipleSheets,
+      setIsInteractionEnabled
+    ]
+  );
+  const handleCancelSearch = useCallback2(() => {
+    setSearchQuery("");
+    setPendingSearchResult(null);
+    if (searchAnimationTimerRef.current) {
+      clearTimeout(searchAnimationTimerRef.current);
+      searchAnimationTimerRef.current = null;
+    }
+    if (svgDivRef.current) {
+      svgDivRef.current.style.transition = "";
+      svgDivRef.current.querySelectorAll(".schematic-search-match").forEach(
+        (element) => element.classList.remove("schematic-search-match")
+      );
+    }
+  }, [svgDivRef]);
+  useEffect3(() => {
+    if (!pendingSearchResult || !svgString) return;
+    const frame = requestAnimationFrame(() => {
+      if (focusSearchResult(pendingSearchResult)) {
+        setPendingSearchResult(null);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [focusSearchResult, pendingSearchResult, svgString]);
+  useEffect3(() => {
+    if (searchQuery) return;
+    svgDivRef.current?.querySelectorAll(".schematic-search-match").forEach((element) => element.classList.remove("schematic-search-match"));
+  }, [searchQuery, svgDivRef]);
+  useEffect3(
+    () => () => {
+      if (searchAnimationTimerRef.current) {
+        clearTimeout(searchAnimationTimerRef.current);
+      }
+    },
+    []
+  );
+  return {
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    handleSearchResultSelect,
+    handleCancelSearch
+  };
+};
+
 // lib/utils/debug.ts
 import Debug from "debug";
 var debug = Debug("schematic-viewer");
@@ -438,16 +753,16 @@ var enableDebug = () => {
 };
 
 // lib/components/SchematicViewer.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef8, useState as useState8 } from "react";
 import { toString as transformToString } from "transformation-matrix";
 import { useMouseMatrixTransform } from "use-mouse-matrix-transform";
 
 // lib/hooks/use-resize-handling.ts
-import { useEffect as useEffect3, useState } from "react";
+import { useEffect as useEffect4, useState as useState2 } from "react";
 var useResizeHandling = (containerRef) => {
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
-  useEffect3(() => {
+  const [containerWidth, setContainerWidth] = useState2(0);
+  const [containerHeight, setContainerHeight] = useState2(0);
+  useEffect4(() => {
     if (!containerRef.current) return;
     const updateDimensions = () => {
       const rect = containerRef.current?.getBoundingClientRect();
@@ -467,22 +782,22 @@ var useResizeHandling = (containerRef) => {
 };
 
 // lib/hooks/useContextMenu.ts
-import { useCallback as useCallback2, useEffect as useEffect4, useRef, useState as useState2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef2, useState as useState3 } 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(() => {
+  const [menuVisible, setMenuVisible] = useState3(false);
+  const [menuPos, setMenuPos] = useState3({ x: 0, y: 0 });
+  const menuRef = useRef2(null);
+  const interactionOriginRef = useRef2(null);
+  const longPressTimeoutRef = useRef2(null);
+  const ignoreContextMenuUntilRef = useRef2(0);
+  const clearLongPressTimeout = useCallback3(() => {
     if (longPressTimeoutRef.current === null) return;
     window.clearTimeout(longPressTimeoutRef.current);
     longPressTimeoutRef.current = null;
   }, []);
-  const handleContextMenu = useCallback2((event) => {
+  const handleContextMenu = useCallback3((event) => {
     event.preventDefault();
     if (Date.now() < ignoreContextMenuUntilRef.current) return;
     const origin = interactionOriginRef.current;
@@ -493,7 +808,7 @@ var useContextMenu = ({ containerRef }) => {
     setMenuPos({ x: event.clientX, y: event.clientY });
     setMenuVisible(true);
   }, []);
-  const handleTouchStart = useCallback2(
+  const handleTouchStart = useCallback3(
     (event) => {
       clearLongPressTimeout();
       if (event.touches.length !== 1) {
@@ -521,7 +836,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [clearLongPressTimeout, containerRef]
   );
-  const handleTouchMove = useCallback2(
+  const handleTouchMove = useCallback3(
     (event) => {
       const origin = interactionOriginRef.current;
       if (!origin || event.touches.length !== 1) return;
@@ -534,11 +849,11 @@ var useContextMenu = ({ containerRef }) => {
     },
     [clearLongPressTimeout]
   );
-  const handleTouchEnd = useCallback2(() => {
+  const handleTouchEnd = useCallback3(() => {
     clearLongPressTimeout();
     interactionOriginRef.current = null;
   }, [clearLongPressTimeout]);
-  const handleClickAway = useCallback2((event) => {
+  const handleClickAway = useCallback3((event) => {
     const target = event.target;
     if (menuRef.current?.contains(target)) return;
     const isInRadixPortal = target.closest?.(
@@ -547,7 +862,7 @@ var useContextMenu = ({ containerRef }) => {
     if (isInRadixPortal) return;
     setMenuVisible(false);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!menuVisible) return;
     document.addEventListener("mousedown", handleClickAway);
     document.addEventListener("touchstart", handleClickAway);
@@ -556,7 +871,7 @@ var useContextMenu = ({ containerRef }) => {
       document.removeEventListener("touchstart", handleClickAway);
     };
   }, [handleClickAway, menuVisible]);
-  useEffect4(() => clearLongPressTimeout, [clearLongPressTimeout]);
+  useEffect5(() => clearLongPressTimeout, [clearLongPressTimeout]);
   return {
     menuVisible,
     menuPos,
@@ -588,7 +903,8 @@ var hiddenSourceComponentKeys = /* @__PURE__ */ new Set([
   "subcircuit_id",
   "display_name",
   "ftype",
-  "are_pins_interchangeable"
+  "are_pins_interchangeable",
+  "supplier_part_numbers"
 ]);
 var priorityKeys = [
   "name",
@@ -601,9 +917,17 @@ var priorityKeys = [
   "max_voltage_rating",
   "max_current_rating",
   "power_rating",
-  "manufacturer_part_number",
-  "supplier_part_numbers"
+  "manufacturer_part_number"
 ];
+var supplierPartNumberUrls = {
+  jlcpcb: (partNumber) => `https://jlcpcb.com/partdetail/${encodeURIComponent(partNumber)}`,
+  lcsc: (partNumber) => `https://www.lcsc.com/product-detail/${encodeURIComponent(partNumber)}.html`
+};
+var normalizeLcscPartNumber = (partNumber) => {
+  const trimmedPartNumber = partNumber.trim();
+  const numericPartNumber = /^c?(\d+)$/i.exec(trimmedPartNumber);
+  return numericPartNumber ? `C${numericPartNumber[1]}` : trimmedPartNumber;
+};
 var getKeyPriority = (key) => {
   const priority = priorityKeys.indexOf(key);
   return priority === -1 ? priorityKeys.length : priority;
@@ -631,6 +955,32 @@ var getSourceComponentInfoEntries = (sourceComponent) => Object.entries(sourceCo
   label: key,
   value: formatComponentValue(sourceComponent, key, value)
 }));
+var getSupplierPartNumberEntries = (sourceComponent) => {
+  const supplierPartNumbers = sourceComponent.supplier_part_numbers;
+  if (!supplierPartNumbers) return [];
+  return ["jlcpcb", "lcsc"].flatMap((supplier) => {
+    const partNumbers = supplierPartNumbers[supplier];
+    if (!Array.isArray(partNumbers)) return [];
+    const normalizedPartNumbers = [
+      ...new Set(
+        partNumbers.filter(
+          (partNumber) => Boolean(typeof partNumber === "string" && partNumber.trim())
+        ).map(normalizeLcscPartNumber)
+      )
+    ];
+    if (!normalizedPartNumbers.length) return [];
+    return [
+      {
+        key: `supplier_part_numbers.${supplier}`,
+        label: supplier,
+        links: normalizedPartNumbers.map((partNumber) => ({
+          partNumber,
+          href: supplierPartNumberUrls[supplier](partNumber)
+        }))
+      }
+    ];
+  });
+};
 var getSchematicComponentDetails = (circuitJson, schematicComponentId) => {
   const schematicComponent = circuitJson.find(
     (element) => element.type === "schematic_component" && element.schematic_component_id === schematicComponentId
@@ -707,17 +1057,18 @@ var zIndexMap = {
   clickToInteractOverlay: 100,
   schematicComponentDetailsTooltip: 105,
   schematicComponentHoverOutline: 47,
-  schematicPortHoverOutline: 48
+  schematicPortHoverOutline: 48,
+  schematicSearch: 101
 };
 
 // lib/components/MouseTracker.tsx
 import {
   createContext,
-  useCallback as useCallback3,
+  useCallback as useCallback4,
   useContext,
-  useEffect as useEffect5,
-  useMemo,
-  useRef as useRef2
+  useEffect as useEffect6,
+  useMemo as useMemo2,
+  useRef as useRef3
 } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 var MouseTrackerContext = createContext(null);
@@ -735,19 +1086,19 @@ var MouseTracker = ({ children }) => {
   return /* @__PURE__ */ jsx(MouseTrackerProvider, { children });
 };
 var MouseTrackerProvider = ({ children }) => {
-  const storeRef = useRef2({
+  const storeRef = useRef3({
     pointer: null,
     boundingBoxes: /* @__PURE__ */ new Map(),
     hoveringIds: /* @__PURE__ */ new Set(),
     subscribers: /* @__PURE__ */ new Set(),
     mouseDownPosition: null
   });
-  const notifySubscribers = useCallback3(() => {
+  const notifySubscribers = useCallback4(() => {
     for (const callback of storeRef.current.subscribers) {
       callback();
     }
   }, []);
-  const updateHovering = useCallback3(() => {
+  const updateHovering = useCallback4(() => {
     const pointer = storeRef.current.pointer;
     const newHovering = /* @__PURE__ */ new Set();
     if (pointer) {
@@ -766,14 +1117,14 @@ var MouseTrackerProvider = ({ children }) => {
     storeRef.current.hoveringIds = newHovering;
     notifySubscribers();
   }, [notifySubscribers]);
-  const registerBoundingBox = useCallback3(
+  const registerBoundingBox = useCallback4(
     (id, registration) => {
       storeRef.current.boundingBoxes.set(id, registration);
       updateHovering();
     },
     [updateHovering]
   );
-  const updateBoundingBox = useCallback3(
+  const updateBoundingBox = useCallback4(
     (id, registration) => {
       const existing = storeRef.current.boundingBoxes.get(id);
       if (existing && boundsAreEqual(existing.bounds, registration.bounds) && existing.onClick === registration.onClick) {
@@ -784,7 +1135,7 @@ var MouseTrackerProvider = ({ children }) => {
     },
     [updateHovering]
   );
-  const unregisterBoundingBox = useCallback3(
+  const unregisterBoundingBox = useCallback4(
     (id) => {
       const removed = storeRef.current.boundingBoxes.delete(id);
       if (removed) {
@@ -793,16 +1144,16 @@ var MouseTrackerProvider = ({ children }) => {
     },
     [updateHovering]
   );
-  const subscribe = useCallback3((listener) => {
+  const subscribe = useCallback4((listener) => {
     storeRef.current.subscribers.add(listener);
     return () => {
       storeRef.current.subscribers.delete(listener);
     };
   }, []);
-  const isHovering = useCallback3((id) => {
+  const isHovering = useCallback4((id) => {
     return storeRef.current.hoveringIds.has(id);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const handlePointerPosition = (event) => {
       const { clientX, clientY } = event;
       const pointer = storeRef.current.pointer;
@@ -870,7 +1221,7 @@ var MouseTrackerProvider = ({ children }) => {
       window.removeEventListener("click", handleClick);
     };
   }, [updateHovering]);
-  const value = useMemo(
+  const value = useMemo2(
     () => ({
       registerBoundingBox,
       updateBoundingBox,
@@ -890,7 +1241,7 @@ var MouseTrackerProvider = ({ children }) => {
 };
 
 // lib/components/SchematicComponentDetailsTooltip.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var detailLabelStyle = {
   color: "#64748b",
@@ -908,11 +1259,15 @@ var SchematicComponentDetailsTooltip = ({
   width,
   maxHeight
 }) => {
-  const infoEntries = useMemo2(
+  const infoEntries = useMemo3(
     () => getSourceComponentInfoEntries(sourceComponent),
     [sourceComponent]
   );
-  const footprintPreviewUrl = useMemo2(
+  const supplierPartNumberEntries = useMemo3(
+    () => getSupplierPartNumberEntries(sourceComponent),
+    [sourceComponent]
+  );
+  const footprintPreviewUrl = useMemo3(
     () => footprintPreviewCircuitJson?.length && footprintPreviewViewBox ? getFootprintPreviewUrl(
       footprintPreviewCircuitJson,
       footprintPreviewViewBox
@@ -980,6 +1335,35 @@ var SchematicComponentDetailsTooltip = ({
                   }
                 )
               ] }, entry.key)),
+              supplierPartNumberEntries.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,
+                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+                      fontSize: "12px",
+                      lineHeight: 1.45,
+                      overflowWrap: "anywhere"
+                    },
+                    children: entry.links.map((link, index) => /* @__PURE__ */ jsxs("span", { children: [
+                      index > 0 && ", ",
+                      /* @__PURE__ */ jsx2(
+                        "a",
+                        {
+                          href: link.href,
+                          target: "_blank",
+                          rel: "noreferrer noopener",
+                          style: { color: "#2563eb", textDecoration: "underline" },
+                          children: link.partNumber
+                        }
+                      )
+                    ] }, link.href))
+                  }
+                )
+              ] }, entry.key)),
               footprinterString && /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
                 /* @__PURE__ */ jsx2("dt", { style: detailLabelStyle, children: "footprint" }),
                 /* @__PURE__ */ jsx2(
@@ -1001,7 +1385,7 @@ var SchematicComponentDetailsTooltip = ({
             ]
           }
         ),
-        footprinterString && footprintPreviewUrl && /* @__PURE__ */ jsx2("div", { style: { padding: "0 4px 4px" }, children: /* @__PURE__ */ jsx2(
+        footprintPreviewUrl && /* @__PURE__ */ jsx2("div", { style: { padding: "0 4px 4px" }, children: /* @__PURE__ */ jsx2(
           "div",
           {
             style: {
@@ -1015,7 +1399,7 @@ var SchematicComponentDetailsTooltip = ({
               "img",
               {
                 src: footprintPreviewUrl,
-                alt: `${sourceComponent.name} ${footprinterString} PCB footprint`,
+                alt: `${sourceComponent.name}${footprinterString ? ` ${footprinterString}` : ""} PCB footprint`,
                 loading: "lazy",
                 referrerPolicy: "no-referrer",
                 style: {
@@ -1034,15 +1418,15 @@ var SchematicComponentDetailsTooltip = ({
 };
 
 // lib/components/SchematicComponentMouseTarget.tsx
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef5, useState as useState4 } from "react";
 
 // lib/hooks/useMouseEventsOverBoundingBox.ts
 import {
   useContext as useContext2,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useId,
-  useMemo as useMemo3,
-  useRef as useRef3,
+  useMemo as useMemo4,
+  useRef as useRef4,
   useSyncExternalStore
 } from "react";
 var useMouseEventsOverBoundingBox = (options) => {
@@ -1053,15 +1437,15 @@ var useMouseEventsOverBoundingBox = (options) => {
     );
   }
   const id = useId();
-  const latestOptionsRef = useRef3(options);
+  const latestOptionsRef = useRef4(options);
   latestOptionsRef.current = options;
-  const handleClick = useMemo3(
+  const handleClick = useMemo4(
     () => (event) => {
       latestOptionsRef.current.onClick?.(event);
     },
     []
   );
-  useEffect6(() => {
+  useEffect7(() => {
     context.registerBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -1070,7 +1454,7 @@ var useMouseEventsOverBoundingBox = (options) => {
       context.unregisterBoundingBox(id);
     };
   }, [context, handleClick, id]);
-  useEffect6(() => {
+  useEffect7(() => {
     context.updateBoundingBox(id, {
       bounds: latestOptionsRef.current.bounds,
       onClick: latestOptionsRef.current.onClick ? handleClick : void 0
@@ -1109,9 +1493,9 @@ var SchematicComponentMouseTarget = ({
   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;
@@ -1146,14 +1530,14 @@ var SchematicComponentMouseTarget = ({
       (prev) => areMeasurementsEqual(prev, nextMeasurement) ? prev : nextMeasurement
     );
   }, [componentId, 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;
@@ -1185,7 +1569,7 @@ var SchematicComponentMouseTarget = ({
       }
     };
   }, [scheduleMeasure, svgDivRef, containerRef]);
-  const handleClick = useCallback4(
+  const handleClick = useCallback5(
     (event) => {
       if (onComponentClick) {
         onComponentClick(componentId, event);
@@ -1198,7 +1582,7 @@ var SchematicComponentMouseTarget = ({
     bounds,
     onClick: onComponentClick ? handleClick : void 0
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (onHoverChange) {
       onHoverChange(componentId, hovering);
     }
@@ -1225,7 +1609,7 @@ var SchematicComponentMouseTarget = ({
 };
 
 // lib/components/SchematicPortMouseTarget.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useRef as useRef6, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var areMeasurementsEqual2 = (a, b) => {
   if (!a && !b) return true;
@@ -1242,9 +1626,9 @@ var SchematicPortMouseTarget = ({
   showOutline,
   circuitJsonKey
 }) => {
-  const [measurement, setMeasurement] = useState4(null);
-  const frameRef = useRef5(null);
-  const measure = useCallback5(() => {
+  const [measurement, setMeasurement] = useState5(null);
+  const frameRef = useRef6(null);
+  const measure = useCallback6(() => {
     frameRef.current = null;
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1280,14 +1664,14 @@ var SchematicPortMouseTarget = ({
       (prev) => areMeasurementsEqual2(prev, nextMeasurement) ? prev : nextMeasurement
     );
   }, [portId, containerRef, svgDivRef]);
-  const scheduleMeasure = useCallback5(() => {
+  const scheduleMeasure = useCallback6(() => {
     if (frameRef.current !== null) return;
     frameRef.current = window.requestAnimationFrame(measure);
   }, [measure]);
-  useEffect8(() => {
+  useEffect9(() => {
     scheduleMeasure();
   }, [scheduleMeasure, circuitJsonKey]);
-  useEffect8(() => {
+  useEffect9(() => {
     scheduleMeasure();
     const svgDiv = svgDivRef.current;
     const container = containerRef.current;
@@ -1319,7 +1703,7 @@ var SchematicPortMouseTarget = ({
       }
     };
   }, [scheduleMeasure, svgDivRef, containerRef]);
-  const handleClick = useCallback5(
+  const handleClick = useCallback6(
     (event) => {
       if (onPortClick) {
         onPortClick(portId, event);
@@ -1332,7 +1716,7 @@ var SchematicPortMouseTarget = ({
     bounds,
     onClick: onPortClick ? handleClick : void 0
   });
-  useEffect8(() => {
+  useEffect9(() => {
     if (onHoverChange) {
       onHoverChange(portId, hovering);
     }
@@ -1384,10 +1768,548 @@ var SchematicPortMouseTarget = ({
   ] });
 };
 
+// lib/components/SchematicSearch.tsx
+import { useEffect as useEffect10, useRef as useRef7, useState as useState6 } from "react";
+
+// lib/components/SchematicSearchIcons.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Icon = ({
+  children,
+  size,
+  strokeWidth
+}) => /* @__PURE__ */ jsx5(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children
+  }
+);
+var SearchIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx5("path", { d: "m21 21-4.34-4.34" })
+] });
+var CloseIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
+] });
+var ComponentIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx5("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }),
+  /* @__PURE__ */ jsx5("rect", { x: "8", y: "8", width: "8", height: "8", rx: "1" }),
+  /* @__PURE__ */ jsx5("path", { d: "M7 2v2M12 2v2M17 2v2M7 20v2M12 20v2M17 20v2M2 7h2M2 12h2M2 17h2M20 7h2M20 12h2M20 17h2" })
+] });
+var NetIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx5("path", { d: "M15 6a9 9 0 0 0-9 9V3" }),
+  /* @__PURE__ */ jsx5("circle", { cx: "18", cy: "6", r: "3" }),
+  /* @__PURE__ */ jsx5("circle", { cx: "6", cy: "18", r: "3" })
+] });
+var EnterIcon = (props) => /* @__PURE__ */ jsxs3(Icon, { ...props, children: [
+  /* @__PURE__ */ jsx5("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }),
+  /* @__PURE__ */ jsx5("path", { d: "m9 10-5 5 5 5" })
+] });
+
+// lib/components/SchematicSearch.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var HighlightedSearchText = ({
+  text,
+  query
+}) => {
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  if (!normalizedQuery) return text;
+  const normalizedText = text.toLocaleLowerCase();
+  const parts = [];
+  let cursor = 0;
+  let matchIndex = normalizedText.indexOf(normalizedQuery);
+  while (matchIndex !== -1) {
+    if (matchIndex > cursor) {
+      parts.push(text.slice(cursor, matchIndex));
+    }
+    parts.push(
+      /* @__PURE__ */ jsx6("strong", { style: { fontWeight: 700 }, children: text.slice(matchIndex, matchIndex + normalizedQuery.length) }, `${matchIndex}-${cursor}`)
+    );
+    cursor = matchIndex + normalizedQuery.length;
+    matchIndex = normalizedText.indexOf(normalizedQuery, cursor);
+  }
+  if (cursor < text.length) parts.push(text.slice(cursor));
+  if (parts.length > 0) return parts;
+  return text;
+};
+var getShortcutLabel = () => {
+  if (typeof navigator === "undefined") return "Ctrl F";
+  if (/mac/i.test(navigator.platform)) return "\u2318 F";
+  return "Ctrl F";
+};
+var SchematicSearch = ({
+  query,
+  onQueryChange,
+  onCancel,
+  results,
+  onSelect,
+  viewerContainerRef
+}) => {
+  const [isOpen, setIsOpen] = useState6(false);
+  const [activeResultId, setActiveResultId] = useState6(null);
+  const [hoveredResultId, setHoveredResultId] = useState6(null);
+  const inputRef = useRef7(null);
+  const resultsListRef = useRef7(null);
+  const shortcutLabel = getShortcutLabel();
+  useEffect10(() => {
+    setActiveResultId((currentId) => {
+      if (results.some((result) => result.target.id === currentId)) {
+        return currentId;
+      }
+      return results.find((result) => result.kind === "component")?.target.id ?? results[0]?.target.id ?? null;
+    });
+  }, [results]);
+  useEffect10(() => {
+    if (!activeResultId) return;
+    resultsListRef.current?.querySelector(`[data-search-result-id="${activeResultId}"]`)?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [activeResultId]);
+  useEffect10(() => {
+    const handleSearchShortcut = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        onCancel();
+        setIsOpen(false);
+        inputRef.current?.blur();
+        return;
+      }
+      if (event.code !== "KeyF" && event.key.toLocaleLowerCase() !== "f") {
+        return;
+      }
+      if (!event.metaKey && !event.ctrlKey) {
+        return;
+      }
+      if (!viewerContainerRef.current?.matches(":hover")) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      setIsOpen(true);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    };
+    const shortcutWindows = [window];
+    try {
+      if (window.parent !== window && window.parent.document) {
+        shortcutWindows.push(window.parent);
+      }
+    } catch {
+    }
+    shortcutWindows.forEach(
+      (targetWindow) => targetWindow.addEventListener("keydown", handleSearchShortcut, {
+        capture: true
+      })
+    );
+    return () => {
+      shortcutWindows.forEach(
+        (targetWindow) => targetWindow.removeEventListener("keydown", handleSearchShortcut, {
+          capture: true
+        })
+      );
+    };
+  }, [isOpen, onCancel, viewerContainerRef]);
+  const cancelSearch = () => {
+    onCancel();
+    setIsOpen(false);
+    inputRef.current?.blur();
+  };
+  const openSearch = (focusInput) => {
+    setIsOpen(true);
+    if (focusInput) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  };
+  const componentResults = results.filter(
+    (result) => result.kind === "component"
+  );
+  const netResults = results.filter((result) => result.kind === "net");
+  const orderedResults = [...componentResults, ...netResults];
+  const activeResult = orderedResults.find((result) => result.target.id === activeResultId) ?? orderedResults[0];
+  const resultCountLabel = results.length === 1 ? "1 result" : `${results.length} results`;
+  let searchHeaderBorder = "none";
+  if (query) searchHeaderBorder = "1px solid #e8e8e8";
+  const handleSearchKeyDown = (event) => {
+    if (event.key === "Enter" && event.target instanceof Element && event.target.closest('[aria-label="Clear search"]')) {
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancelSearch();
+      return;
+    }
+    if (orderedResults.length > 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      let direction = -1;
+      if (event.key === "ArrowDown") direction = 1;
+      setActiveResultId((currentId) => {
+        const currentIndex = orderedResults.findIndex(
+          (result) => result.target.id === currentId
+        );
+        let startIndex = currentIndex;
+        if (currentIndex === -1) {
+          startIndex = 0;
+          if (direction === 1) startIndex = -1;
+        }
+        const nextIndex = (startIndex + direction + orderedResults.length) % orderedResults.length;
+        return orderedResults[nextIndex]?.target.id ?? null;
+      });
+      return;
+    }
+    if (event.key === "Enter" && activeResult) {
+      event.preventDefault();
+      onSelect(activeResult);
+    }
+  };
+  const renderResultSection = (title, sectionResults) => {
+    if (sectionResults.length === 0) return null;
+    return /* @__PURE__ */ jsxs4("section", { children: [
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          style: {
+            padding: "6px 12px 3px",
+            backgroundColor: "#f7f7f8",
+            color: "#777777",
+            fontSize: "11px",
+            fontWeight: 600,
+            letterSpacing: "0.02em",
+            textTransform: "lowercase"
+          },
+          children: title
+        }
+      ),
+      sectionResults.map((result) => {
+        const active = result.target.id === activeResult?.target.id;
+        const hovering = result.target.id === hoveredResultId;
+        let resultBackground = "#ffffff";
+        if (hovering || active) resultBackground = "#f1f3f5";
+        let resultIcon = /* @__PURE__ */ jsx6(NetIcon, { size: 15, strokeWidth: 1.8 });
+        if (result.kind === "component") {
+          resultIcon = /* @__PURE__ */ jsx6(ComponentIcon, { size: 15, strokeWidth: 1.8 });
+        }
+        const selectResult = () => {
+          inputRef.current?.blur();
+          setActiveResultId(result.target.id);
+          onSelect(result);
+        };
+        return /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            "data-search-result-id": result.target.id,
+            onPointerUp: (event) => {
+              if (event.button === 0) selectResult();
+            },
+            onClick: (event) => {
+              if (event.detail === 0) selectResult();
+            },
+            onMouseEnter: () => setHoveredResultId(result.target.id),
+            onMouseLeave: () => setHoveredResultId(null),
+            style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              gap: "9px",
+              padding: "7px 12px",
+              border: "none",
+              background: resultBackground,
+              color: "#222222",
+              cursor: "pointer",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  style: {
+                    width: "26px",
+                    height: "26px",
+                    flexShrink: 0,
+                    display: "grid",
+                    placeItems: "center",
+                    border: "1px solid #e5e5e5",
+                    borderRadius: "6px",
+                    backgroundColor: "#f7f7f7",
+                    color: "#666666"
+                  },
+                  children: resultIcon
+                }
+              ),
+              /* @__PURE__ */ jsxs4("span", { style: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsx6(
+                  "span",
+                  {
+                    style: {
+                      display: "block",
+                      overflow: "hidden",
+                      fontSize: "13px",
+                      fontWeight: 400,
+                      lineHeight: 1.25,
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: /* @__PURE__ */ jsx6(HighlightedSearchText, { text: result.label, query })
+                  }
+                ),
+                result.detail && /* @__PURE__ */ jsx6(
+                  "span",
+                  {
+                    style: {
+                      display: "block",
+                      overflow: "hidden",
+                      marginTop: "2px",
+                      color: "#777777",
+                      fontSize: "11px",
+                      lineHeight: 1.2,
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: result.detail
+                  }
+                ),
+                result.schematicSheetName && /* @__PURE__ */ jsxs4(
+                  "span",
+                  {
+                    style: {
+                      display: "block",
+                      overflow: "hidden",
+                      marginTop: "2px",
+                      color: "#777777",
+                      fontSize: "11px",
+                      lineHeight: 1.2,
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: [
+                      "Sheet: ",
+                      result.schematicSheetName
+                    ]
+                  }
+                )
+              ] }),
+              active && /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  title: "Press Enter to open",
+                  style: {
+                    flexShrink: 0,
+                    color: "#666666",
+                    fontSize: "17px",
+                    lineHeight: 1
+                  },
+                  children: /* @__PURE__ */ jsx6(EnterIcon, { size: 14, strokeWidth: 1.8 })
+                }
+              )
+            ]
+          },
+          result.target.id
+        );
+      })
+    ] });
+  };
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-schematic-search": true,
+      onPointerDown: (event) => event.stopPropagation(),
+      onMouseDown: (event) => event.stopPropagation(),
+      onTouchStart: (event) => event.stopPropagation(),
+      onTouchEnd: (event) => event.stopPropagation(),
+      style: {
+        position: "relative",
+        zIndex: zIndexMap.schematicSearch,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+      },
+      children: !isOpen ? /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          title: "Search schematic",
+          "aria-label": "Search schematic",
+          onPointerDown: (event) => {
+            event.stopPropagation();
+            if (event.pointerType !== "mouse") openSearch(false);
+          },
+          onPointerUp: (event) => {
+            if (event.pointerType === "mouse" && event.button === 0) {
+              openSearch(true);
+            }
+          },
+          onClick: (event) => {
+            if (event.detail === 0) openSearch(true);
+          },
+          style: {
+            width: "32px",
+            height: "32px",
+            display: "grid",
+            placeItems: "center",
+            padding: 0,
+            border: "none",
+            borderRadius: "4px",
+            backgroundColor: "#ffffff",
+            color: "#000000",
+            cursor: "pointer",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+          },
+          children: /* @__PURE__ */ jsx6(SearchIcon, { size: 16, strokeWidth: 2 })
+        }
+      ) : /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          onKeyDown: handleSearchKeyDown,
+          style: {
+            width: "min(280px, calc(100vw - 32px))",
+            overflow: "hidden",
+            border: "none",
+            borderRadius: "4px",
+            backgroundColor: "#ffffff",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  height: "32px",
+                  boxSizing: "border-box",
+                  padding: "0 12px",
+                  borderBottom: searchHeaderBorder
+                },
+                children: [
+                  /* @__PURE__ */ jsx6(SearchIcon, { size: 15, strokeWidth: 2 }),
+                  /* @__PURE__ */ jsx6(
+                    "input",
+                    {
+                      ref: inputRef,
+                      value: query,
+                      "aria-label": "Search components and nets",
+                      placeholder: "Search...",
+                      onPointerUp: (event) => event.currentTarget.focus(),
+                      onChange: (event) => onQueryChange(event.target.value),
+                      style: {
+                        minWidth: 0,
+                        flex: 1,
+                        border: "none",
+                        outline: "none",
+                        fontSize: "13px",
+                        color: "#222222",
+                        background: "transparent"
+                      }
+                    }
+                  ),
+                  query && results.length > 0 ? /* @__PURE__ */ jsx6(
+                    "span",
+                    {
+                      style: {
+                        flexShrink: 0,
+                        color: "#888888",
+                        fontSize: "12px",
+                        whiteSpace: "nowrap"
+                      },
+                      children: resultCountLabel
+                    }
+                  ) : /* @__PURE__ */ jsx6(
+                    "kbd",
+                    {
+                      style: {
+                        flexShrink: 0,
+                        padding: "2px 5px",
+                        border: "1px solid #dddddd",
+                        borderRadius: "4px",
+                        backgroundColor: "#f7f7f7",
+                        color: "#777777",
+                        fontFamily: "inherit",
+                        fontSize: "10px",
+                        lineHeight: 1.2
+                      },
+                      children: shortcutLabel
+                    }
+                  ),
+                  isOpen && /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Clear search",
+                      onPointerUp: (event) => {
+                        if (event.button === 0) cancelSearch();
+                      },
+                      onClick: (event) => {
+                        if (event.detail === 0) cancelSearch();
+                      },
+                      style: {
+                        border: "none",
+                        background: "transparent",
+                        color: "#777777",
+                        cursor: "pointer",
+                        width: "20px",
+                        height: "20px",
+                        display: "grid",
+                        placeItems: "center",
+                        padding: 0,
+                        lineHeight: 1
+                      },
+                      children: /* @__PURE__ */ jsx6(CloseIcon, { size: 16, strokeWidth: 2 })
+                    }
+                  )
+                ]
+              }
+            ),
+            query && /* @__PURE__ */ jsx6(
+              "div",
+              {
+                ref: resultsListRef,
+                style: {
+                  maxHeight: "240px",
+                  overflowX: "hidden",
+                  overflowY: "auto",
+                  overscrollBehavior: "contain",
+                  scrollBehavior: "smooth",
+                  touchAction: "pan-y",
+                  WebkitOverflowScrolling: "touch"
+                },
+                onWheel: (event) => event.stopPropagation(),
+                onTouchMove: (event) => event.stopPropagation(),
+                children: results.length === 0 ? /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    style: {
+                      padding: "12px",
+                      color: "#777777",
+                      fontSize: "13px"
+                    },
+                    children: "No matching components or nets"
+                  }
+                ) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                  renderResultSection("components", componentResults),
+                  renderResultSection("nets", netResults)
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
 // lib/components/SchematicSheetSelector.tsx
-import { useState as useState5 } from "react";
+import { useState as useState7 } 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";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var FONT_FAMILY = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles = {
   backgroundColor: "#ffffff",
@@ -1437,7 +2359,7 @@ var MENU_CSS = `
 .sv-sheet-chevron { transition: transform 0.2s ease; }
 [data-state="open"] > .sv-sheet-chevron { transform: rotate(180deg); }
 `;
-var CheckIcon = () => /* @__PURE__ */ jsx5(
+var CheckIcon = () => /* @__PURE__ */ jsx7(
   "svg",
   {
     width: "14",
@@ -1449,10 +2371,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx5(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx7("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx5(
+var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx7(
   "svg",
   {
     className,
@@ -1466,7 +2388,7 @@ var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx5(
     strokeLinejoin: "round",
     style: { opacity: 0.6, flexShrink: 0 },
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx5("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx7("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var SchematicSheetSelector = ({
@@ -1474,25 +2396,22 @@ var SchematicSheetSelector = ({
   selectedSheetId,
   onSelectSheet
 }) => {
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState7(false);
   if (sheets.length <= 1) return null;
   const selectedSheet = sheets.find(
     (s) => s.schematic_sheet_id === selectedSheetId
   );
   const selectedLabel = selectedSheet?.name ?? "Select sheet";
-  return /* @__PURE__ */ 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(
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx7("style", { children: MENU_CSS }),
+    /* @__PURE__ */ jsxs5(DropdownMenu.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx7(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
         "button",
         {
           type: "button",
           title: selectedLabel,
           onPointerDown: (e) => e.stopPropagation(),
           style: {
-            position: "absolute",
-            top: "16px",
-            left: "16px",
             display: "flex",
             alignItems: "center",
             gap: "6px",
@@ -1506,17 +2425,16 @@ var SchematicSheetSelector = ({
             cursor: "pointer",
             boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
             fontSize: "13px",
-            fontFamily: FONT_FAMILY,
-            zIndex: zIndexMap.viewMenuIcon
+            fontFamily: FONT_FAMILY
           },
           children: [
-            /* @__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__ */ jsx7("span", { style: { color: "#888888", flexShrink: 0 }, children: "Sheet:" }),
+            /* @__PURE__ */ jsx7("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx7(ChevronDownIcon, { className: "sv-sheet-chevron" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx5(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx7(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx7(
         DropdownMenu.Content,
         {
           style: contentStyles,
@@ -1526,7 +2444,7 @@ var SchematicSheetSelector = ({
           collisionPadding: 10,
           children: sheets.map((sheet) => {
             const selected = sheet.schematic_sheet_id === selectedSheetId;
-            return /* @__PURE__ */ jsxs3(
+            return /* @__PURE__ */ jsxs5(
               DropdownMenu.Item,
               {
                 className: "sv-sheet-item",
@@ -1538,8 +2456,8 @@ var SchematicSheetSelector = ({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx5("span", { style: iconSlotStyles, children: selected && /* @__PURE__ */ jsx5(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx5("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
+                  /* @__PURE__ */ jsx7("span", { style: iconSlotStyles, children: selected && /* @__PURE__ */ jsx7(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx7("span", { style: { ...ellipsisStyles, minWidth: 0 }, children: sheet.name })
                 ]
               },
               sheet.schematic_sheet_id
@@ -1554,12 +2472,16 @@ 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";
+import { useMemo as useMemo5 } from "react";
 
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.80",
+  version: "2.0.81",
+  repository: {
+    type: "git",
+    url: "https://github.com/tscircuit/schematic-viewer"
+  },
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -1609,7 +2531,7 @@ var package_default = {
 };
 
 // lib/components/ViewMenu.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var FONT_FAMILY2 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles2 = {
   backgroundColor: "#262626",
@@ -1658,7 +2580,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__ */ jsx6(
+var CheckIcon2 = () => /* @__PURE__ */ jsx8(
   "svg",
   {
     width: "14",
@@ -1670,7 +2592,7 @@ var CheckIcon2 = () => /* @__PURE__ */ jsx6(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx6("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx8("path", { d: "M20 6 9 17l-5-5" })
   }
 );
 var ViewMenu = ({
@@ -1686,7 +2608,7 @@ var ViewMenu = ({
   showPorts,
   onTogglePorts
 }) => {
-  const hasGroups = useMemo4(() => {
+  const hasGroups = useMemo5(() => {
     if (!circuitJson || circuitJson.length === 0) return false;
     try {
       const sourceGroups = su3(circuitJson).source_group?.list() || [];
@@ -1710,7 +2632,7 @@ var ViewMenu = ({
       return false;
     }
   }, [circuitJsonKey]);
-  const hasPorts = useMemo4(() => {
+  const hasPorts = useMemo5(() => {
     if (!circuitJson || circuitJson.length === 0) return false;
     try {
       return (su3(circuitJson).schematic_port?.list() || []).length > 0;
@@ -1719,7 +2641,7 @@ var ViewMenu = ({
       return false;
     }
   }, [circuitJsonKey]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       ref: menuRef,
@@ -1730,9 +2652,9 @@ var ViewMenu = ({
         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(
+      children: /* @__PURE__ */ jsxs6(DropdownMenu2.Root, { open: true, onOpenChange, modal: false, children: [
+        /* @__PURE__ */ jsx8(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx8("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx8(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs6(
           DropdownMenu2.Content,
           {
             style: contentStyles2,
@@ -1741,8 +2663,8 @@ var ViewMenu = ({
             collisionPadding: 10,
             avoidCollisions: true,
             children: [
-              /* @__PURE__ */ jsx6("style", { children: HIGHLIGHT_CSS }),
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsx8("style", { children: HIGHLIGHT_CSS }),
+              /* @__PURE__ */ jsxs6(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -1755,12 +2677,12 @@ var ViewMenu = ({
                     if (hasPorts) onTogglePorts(!showPorts);
                   },
                   children: [
-                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showPorts && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx6("span", { children: "Show Schematic Ports" })
+                    /* @__PURE__ */ jsx8("span", { style: iconSlotStyles2, children: showPorts && /* @__PURE__ */ jsx8(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx8("span", { children: "Show Schematic Ports" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs6(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -1773,12 +2695,12 @@ var ViewMenu = ({
                     if (hasGroups) onToggleGroups(!showGroups);
                   },
                   children: [
-                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showGroups && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx6("span", { children: "View Schematic Groups" })
+                    /* @__PURE__ */ jsx8("span", { style: iconSlotStyles2, children: showGroups && /* @__PURE__ */ jsx8(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx8("span", { children: "View Schematic Groups" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs6(
                 DropdownMenu2.Item,
                 {
                   className: "sv-vm-item",
@@ -1789,13 +2711,13 @@ var ViewMenu = ({
                     onToggleGrid(!showGrid);
                   },
                   children: [
-                    /* @__PURE__ */ jsx6("span", { style: iconSlotStyles2, children: showGrid && /* @__PURE__ */ jsx6(CheckIcon2, {}) }),
-                    /* @__PURE__ */ jsx6("span", { children: "Show Grid" })
+                    /* @__PURE__ */ jsx8("span", { style: iconSlotStyles2, children: showGrid && /* @__PURE__ */ jsx8(CheckIcon2, {}) }),
+                    /* @__PURE__ */ jsx8("span", { children: "Show Grid" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx6(DropdownMenu2.Separator, { style: separatorStyles }),
-              /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsx8(DropdownMenu2.Separator, { style: separatorStyles }),
+              /* @__PURE__ */ jsxs6(
                 "div",
                 {
                   style: {
@@ -1821,7 +2743,7 @@ var ViewMenu = ({
 };
 
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
@@ -1835,6 +2757,7 @@ var SchematicViewer = ({
   showSchematicPorts,
   onSchematicPortClicked,
   onSchematicSheetChange,
+  searchEnabled = true,
   css,
   className
 }) => {
@@ -1844,11 +2767,11 @@ var SchematicViewer = ({
   const getCircuitHash = (circuitJson2) => {
     return `${circuitJson2?.length || 0}_${circuitJson2?.editCount || 0}`;
   };
-  const circuitJsonKey = useMemo5(
+  const circuitJsonKey = useMemo6(
     () => getCircuitHash(circuitJson),
     [circuitJson]
   );
-  const schematicSheets = useMemo5(() => {
+  const schematicSheets = useMemo6(() => {
     try {
       return circuitJson.filter((elm) => elm?.type === "schematic_sheet").slice().sort((a, b) => (a.sheet_index ?? 0) - (b.sheet_index ?? 0));
     } catch (err) {
@@ -1858,7 +2781,7 @@ var SchematicViewer = ({
   }, [circuitJsonKey]);
   const hasMultipleSheets = schematicSheets.length > 1;
   const defaultSheetId = schematicSheets[0]?.schematic_sheet_id;
-  const [selectedSheetId, setSelectedSheetId] = useState6(
+  const [selectedSheetId, setSelectedSheetId] = useState8(
     () => {
       const stored = getStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET);
       if (stored && schematicSheets.some((s) => s.schematic_sheet_id === stored)) {
@@ -1867,14 +2790,14 @@ var SchematicViewer = ({
       return defaultSheetId;
     }
   );
-  useEffect9(() => {
+  useEffect11(() => {
     const stillExists = selectedSheetId !== void 0 && schematicSheets.some((s) => s.schematic_sheet_id === selectedSheetId);
     if (!stillExists) {
       setSelectedSheetId(defaultSheetId);
     }
   }, [circuitJsonKey]);
   const activeSheetId = hasMultipleSheets ? selectedSheetId ?? defaultSheetId : void 0;
-  const handleSelectSheet = useCallback6(
+  const handleSelectSheet = useCallback7(
     (sheetId) => {
       setSelectedSheetId(sheetId);
       setStoredString(STORAGE_KEYS.SELECTED_SCHEMATIC_SHEET, sheetId);
@@ -1882,27 +2805,27 @@ var SchematicViewer = ({
     },
     [onSchematicSheetChange]
   );
-  const [showGridInternal, setShowGridInternal] = useState6(false);
+  const [showGridInternal, setShowGridInternal] = useState8(false);
   const showGrid = debugGrid || showGridInternal;
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState6(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState8(
     !clickToInteractEnabled
   );
-  const [showSchematicGroups, setShowSchematicGroups] = useState6(() => {
+  const [showSchematicGroups, setShowSchematicGroups] = useState8(() => {
     if (disableGroups) return false;
     return getStoredBoolean(STORAGE_KEYS.IS_SHOWING_SCHEMATIC_GROUPS, false);
   });
-  const [showSchematicPortsInternal, setShowSchematicPortsInternal] = useState6(
+  const [showSchematicPortsInternal, setShowSchematicPortsInternal] = useState8(
     () => showSchematicPorts ?? getStoredBoolean(STORAGE_KEYS.IS_SHOWING_SCHEMATIC_PORTS, false)
   );
-  useEffect9(() => {
+  useEffect11(() => {
     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(
+  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState8(false);
+  const hoveringComponentsRef = useRef8(/* @__PURE__ */ new Set());
+  const [selectedSchematicComponent, setSelectedSchematicComponent] = useState8(null);
+  const handleComponentHoverChange = useCallback7(
     (componentId, isHovering) => {
       if (isHovering) {
         hoveringComponentsRef.current.add(componentId);
@@ -1913,9 +2836,9 @@ var SchematicViewer = ({
     },
     []
   );
-  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState6(false);
-  const hoveringPortsRef = useRef6(/* @__PURE__ */ new Set());
-  const handlePortHoverChange = useCallback6(
+  const [isHoveringClickablePort, setIsHoveringClickablePort] = useState8(false);
+  const hoveringPortsRef = useRef8(/* @__PURE__ */ new Set());
+  const handlePortHoverChange = useCallback7(
     (portId, isHovering) => {
       if (isHovering) {
         hoveringPortsRef.current.add(portId);
@@ -1926,10 +2849,10 @@ var SchematicViewer = ({
     },
     []
   );
-  const svgDivRef = useRef6(null);
-  const touchStartRef = useRef6(null);
-  const zoomScaleRef = useRef6({ x: 1, y: 1 });
-  const schematicComponentIds = useMemo5(() => {
+  const svgDivRef = useRef8(null);
+  const touchStartRef = useRef8(null);
+  const zoomScaleRef = useRef8({ x: 1, y: 1 });
+  const schematicComponentIds = useMemo6(() => {
     try {
       const components = su4(circuitJson).schematic_component?.list() ?? [];
       return components.filter(
@@ -1940,7 +2863,7 @@ var SchematicViewer = ({
       return [];
     }
   }, [circuitJsonKey, circuitJson, activeSheetId]);
-  const schematicPortsInfo = useMemo5(() => {
+  const schematicPortsInfo = useMemo6(() => {
     if (!showSchematicPortsInternal) return [];
     try {
       const ports = (su4(circuitJson).schematic_port?.list() ?? []).filter(
@@ -1980,14 +2903,21 @@ var SchematicViewer = ({
     }
     touchStartRef.current = null;
   };
-  const shouldPanSchematic = useCallback6(
+  const shouldPanSchematic = useCallback7(
     (event) => {
+      if (event.target instanceof Element && event.target.closest("[data-schematic-search]")) {
+        return false;
+      }
       if (event.type !== "mousedown" || !("button" in event)) return true;
       return event.button !== 2 && !(event.button === 0 && event.ctrlKey);
     },
     []
   );
-  const { ref: containerRef } = useMouseMatrixTransform({
+  const {
+    ref: containerRef,
+    transform: svgToScreenProjection,
+    setTransform: setSvgToScreenProjection
+  } = useMouseMatrixTransform({
     onSetTransform(transform) {
       const zoomChanged = transform.a !== zoomScaleRef.current.x || transform.d !== zoomScaleRef.current.y;
       zoomScaleRef.current = { x: transform.a, y: transform.d };
@@ -2009,14 +2939,14 @@ var SchematicViewer = ({
     contextMenuEventHandlers
   } = useContextMenu({ containerRef });
   const { containerWidth, containerHeight } = useResizeHandling(containerRef);
-  const selectedComponentDetails = useMemo5(
+  const selectedComponentDetails = useMemo6(
     () => selectedSchematicComponent ? getSchematicComponentDetails(
       circuitJson,
       selectedSchematicComponent.schematicComponentId
     ) : null,
     [circuitJsonKey, circuitJson, selectedSchematicComponent]
   );
-  const componentTooltipLayout = useMemo5(() => {
+  const componentTooltipLayout = useMemo6(() => {
     if (!selectedSchematicComponent || !containerWidth || !containerHeight) {
       return null;
     }
@@ -2037,7 +2967,7 @@ var SchematicViewer = ({
     );
     return { left, top, width, maxHeight };
   }, [selectedSchematicComponent, containerWidth, containerHeight]);
-  const handleSchematicComponentClick = useCallback6(
+  const handleSchematicComponentClick = useCallback7(
     (schematicComponentId, event) => {
       if (event.target instanceof Element && event.target.closest("[data-schematic-component-details-tooltip]")) {
         return;
@@ -2056,10 +2986,10 @@ var SchematicViewer = ({
     },
     [containerRef, onSchematicComponentClicked]
   );
-  useEffect9(() => {
+  useEffect11(() => {
     setSelectedSchematicComponent(null);
   }, [circuitJsonKey, activeSheetId]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!selectedSchematicComponent) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -2079,7 +3009,7 @@ var SchematicViewer = ({
       document.removeEventListener("mousedown", handleDocumentMouseDown);
     };
   }, [selectedSchematicComponent]);
-  const svgString = useMemo5(() => {
+  const svgString = useMemo6(() => {
     if (!containerWidth || !containerHeight) return "";
     return convertCircuitJsonToSchematicSvg(circuitJson, {
       width: containerWidth,
@@ -2102,12 +3032,31 @@ var SchematicViewer = ({
     showSchematicPortsInternal,
     activeSheetId
   ]);
-  const containerBackgroundColor = useMemo5(() => {
+  const containerBackgroundColor = useMemo6(() => {
     const match = svgString.match(
       /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i
     );
     return match?.[1] ?? "transparent";
   }, [svgString]);
+  const {
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    handleSearchResultSelect,
+    handleCancelSearch
+  } = useSchematicSearch({
+    circuitJson,
+    circuitJsonKey,
+    svgDivRef,
+    containerRef,
+    activeSheetId,
+    hasMultipleSheets,
+    handleSelectSheet,
+    svgString,
+    svgToScreenProjection,
+    setSvgToScreenProjection,
+    setIsInteractionEnabled
+  });
   useSchematicGroupsOverlay({
     svgDivRef,
     circuitJson,
@@ -2120,8 +3069,8 @@ var SchematicViewer = ({
     circuitJsonKey: `${circuitJsonKey}_${activeSheetId ?? ""}`,
     enabled: netHoverHighlightEnabled
   });
-  const svgDiv = useMemo5(
-    () => /* @__PURE__ */ jsx7(
+  const svgDiv = useMemo6(
+    () => /* @__PURE__ */ jsx9(
       "div",
       {
         ref: svgDivRef,
@@ -2135,12 +3084,28 @@ var SchematicViewer = ({
     ),
     [svgString, isInteractionEnabled, clickToInteractEnabled]
   );
-  return /* @__PURE__ */ jsxs5(MouseTracker, { children: [
-    netHoverHighlightEnabled && /* @__PURE__ */ jsx7("style", { children: `.sch-net-faded { opacity: 0.35; }
+  return /* @__PURE__ */ jsxs7(MouseTracker, { children: [
+    netHoverHighlightEnabled && /* @__PURE__ */ jsx9("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; }` }),
-    /* @__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(
+    searchEnabled && /* @__PURE__ */ jsx9("style", { children: `.schematic-search-match text,
+            text.schematic-search-match {
+              fill: #ff00d4 !important;
+            }
+            .schematic-search-match [stroke]:not(text):not([stroke="none"]),
+            [stroke]:not(text):not([stroke="none"]).schematic-search-match {
+              stroke: #ff00d4 !important;
+            }
+            .schematic-viewer-toolbar {
+              flex-direction: row;
+            }
+            @media (max-width: 640px) {
+              .schematic-viewer-toolbar {
+                flex-direction: column;
+              }
+            }` }),
+    /* @__PURE__ */ jsx9("style", { children: ".schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }" }),
+    onSchematicPortClicked && /* @__PURE__ */ jsx9("style", { children: "[data-schematic-port-id]:hover { cursor: pointer !important; }" }),
+    /* @__PURE__ */ jsxs7(
       "div",
       {
         ref: containerRef,
@@ -2175,7 +3140,7 @@ var SchematicViewer = ({
         },
         onTouchCancel: contextMenuEventHandlers.onTouchCancel,
         children: [
-          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx7(
+          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx9(
             "div",
             {
               onClick: (e) => {
@@ -2194,7 +3159,7 @@ var SchematicViewer = ({
                 pointerEvents: "all",
                 touchAction: "pan-x pan-y pinch-zoom"
               },
-              children: /* @__PURE__ */ jsx7(
+              children: /* @__PURE__ */ jsx9(
                 "div",
                 {
                   style: {
@@ -2211,7 +3176,7 @@ var SchematicViewer = ({
               )
             }
           ),
-          menuVisible && /* @__PURE__ */ jsx7(
+          menuVisible && /* @__PURE__ */ jsx9(
             ViewMenu,
             {
               circuitJson,
@@ -2238,15 +3203,43 @@ var SchematicViewer = ({
               onToggleGrid: setShowGridInternal
             }
           ),
-          /* @__PURE__ */ jsx7(
-            SchematicSheetSelector,
+          /* @__PURE__ */ jsxs7(
+            "div",
             {
-              sheets: schematicSheets,
-              selectedSheetId: activeSheetId,
-              onSelectSheet: handleSelectSheet
+              className: "schematic-viewer-toolbar",
+              style: {
+                position: "absolute",
+                top: "16px",
+                left: "16px",
+                display: "flex",
+                alignItems: "flex-start",
+                gap: "8px",
+                zIndex: zIndexMap.schematicSearch
+              },
+              children: [
+                /* @__PURE__ */ jsx9(
+                  SchematicSheetSelector,
+                  {
+                    sheets: schematicSheets,
+                    selectedSheetId: activeSheetId,
+                    onSelectSheet: handleSelectSheet
+                  }
+                ),
+                searchEnabled && /* @__PURE__ */ jsx9(
+                  SchematicSearch,
+                  {
+                    query: searchQuery,
+                    onQueryChange: setSearchQuery,
+                    onCancel: handleCancelSearch,
+                    results: searchResults,
+                    onSelect: handleSearchResultSelect,
+                    viewerContainerRef: containerRef
+                  }
+                )
+              ]
             }
           ),
-          schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx7(
+          schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx9(
             SchematicComponentMouseTarget,
             {
               componentId,
@@ -2260,7 +3253,7 @@ var SchematicViewer = ({
             componentId
           )),
           svgDiv,
-          selectedComponentDetails && componentTooltipLayout && /* @__PURE__ */ jsx7(
+          selectedComponentDetails && componentTooltipLayout && /* @__PURE__ */ jsx9(
             SchematicComponentDetailsTooltip,
             {
               sourceComponent: selectedComponentDetails.sourceComponent,
@@ -2270,7 +3263,7 @@ var SchematicViewer = ({
               ...componentTooltipLayout
             }
           ),
-          showSchematicPortsInternal && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx7(
+          showSchematicPortsInternal && schematicPortsInfo.map(({ portId, label }) => /* @__PURE__ */ jsx9(
             SchematicPortMouseTarget,
             {
               portId,
@@ -2300,7 +3293,7 @@ import {
   convertCircuitJsonToSchematicSimulationSvg,
   convertCircuitJsonToSimulationGraphSvg
 } from "circuit-to-svg";
-import { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo7, useRef as useRef9, useState as useState10 } from "react";
 import { toString as transformToString2 } from "transformation-matrix";
 import { useMouseMatrixTransform as useMouseMatrixTransform2 } from "use-mouse-matrix-transform";
 
@@ -2318,8 +3311,8 @@ var getAnalogSimulationBackgroundColor = (simulationSvg, colorOverrides) => getR
 
 // lib/components/AnalogSimulationSelector.tsx
 import * as DropdownMenu3 from "@radix-ui/react-dropdown-menu";
-import { useState as useState7 } from "react";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var FONT_FAMILY3 = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 var contentStyles3 = {
   backgroundColor: "#ffffff",
@@ -2369,7 +3362,7 @@ var MENU_CSS2 = `
 .sv-simulation-chevron { transition: transform 0.2s ease; }
 [data-state="open"] > .sv-simulation-chevron { transform: rotate(180deg); }
 `;
-var CheckIcon3 = () => /* @__PURE__ */ jsx8(
+var CheckIcon3 = () => /* @__PURE__ */ jsx10(
   "svg",
   {
     width: "14",
@@ -2381,10 +3374,10 @@ var CheckIcon3 = () => /* @__PURE__ */ jsx8(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx8("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx10("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx8(
+var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx10(
   "svg",
   {
     className,
@@ -2398,7 +3391,7 @@ var ChevronDownIcon2 = ({ className }) => /* @__PURE__ */ jsx8(
     strokeLinejoin: "round",
     style: { opacity: 0.6, flexShrink: 0 },
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx8("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx10("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var getSimulationLabels = (simulations) => {
@@ -2417,17 +3410,17 @@ var AnalogSimulationSelector = ({
   selectedSimulationExperimentId,
   onSelectSimulation
 }) => {
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState9(false);
   if (simulations.length <= 1) return null;
   const simulationLabels = getSimulationLabels(simulations);
   const selectedSimulation = simulationLabels.find(
     ({ simulation }) => simulation.simulation_experiment_id === selectedSimulationExperimentId
   );
   const selectedLabel = selectedSimulation?.label ?? "Select simulation";
-  return /* @__PURE__ */ 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(
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx10("style", { children: MENU_CSS2 }),
+    /* @__PURE__ */ jsxs8(DropdownMenu3.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx10(DropdownMenu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs8(
         "button",
         {
           type: "button",
@@ -2454,13 +3447,13 @@ var AnalogSimulationSelector = ({
             zIndex: zIndexMap.viewMenuIcon
           },
           children: [
-            /* @__PURE__ */ jsx8("span", { style: { color: "#888888", flexShrink: 0 }, children: "Simulation:" }),
-            /* @__PURE__ */ jsx8("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: selectedLabel }),
-            /* @__PURE__ */ jsx8(ChevronDownIcon2, { className: "sv-simulation-chevron" })
+            /* @__PURE__ */ jsx10("span", { style: { color: "#888888", flexShrink: 0 }, children: "Simulation:" }),
+            /* @__PURE__ */ jsx10("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: selectedLabel }),
+            /* @__PURE__ */ jsx10(ChevronDownIcon2, { className: "sv-simulation-chevron" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx8(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(DropdownMenu3.Portal, { children: /* @__PURE__ */ jsx10(
         DropdownMenu3.Content,
         {
           style: contentStyles3,
@@ -2470,7 +3463,7 @@ var AnalogSimulationSelector = ({
           collisionPadding: 10,
           children: simulationLabels.map(({ simulation, label }) => {
             const selected = simulation.simulation_experiment_id === selectedSimulationExperimentId;
-            return /* @__PURE__ */ jsxs6(
+            return /* @__PURE__ */ jsxs8(
               DropdownMenu3.Item,
               {
                 className: "sv-simulation-item",
@@ -2482,8 +3475,8 @@ var AnalogSimulationSelector = ({
                   setOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx8("span", { style: iconSlotStyles3, children: selected && /* @__PURE__ */ jsx8(CheckIcon3, {}) }),
-                  /* @__PURE__ */ jsx8("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: label })
+                  /* @__PURE__ */ jsx10("span", { style: iconSlotStyles3, children: selected && /* @__PURE__ */ jsx10(CheckIcon3, {}) }),
+                  /* @__PURE__ */ jsx10("span", { style: { ...ellipsisStyles2, minWidth: 0 }, children: label })
                 ]
               },
               simulation.simulation_experiment_id
@@ -2496,7 +3489,7 @@ var AnalogSimulationSelector = ({
 };
 
 // lib/components/AnalogSimulationViewer.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_RENDER_WIDTH = 1200;
 var DEFAULT_COMBINED_RENDER_ASPECT_RATIO = 1;
 var DEFAULT_GRAPH_ONLY_RENDER_ASPECT_RATIO = 2;
@@ -2511,16 +3504,16 @@ var AnalogSimulationViewer = ({
   onSimulationChange,
   acSweepView = "magnitude"
 }) => {
-  const [circuitJson, setCircuitJson] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(true);
-  const [error, setError] = useState8(null);
-  const [svgObjectUrl, setSvgObjectUrl] = useState8(null);
-  const containerRef = useRef7(null);
-  const imgRef = useRef7(null);
+  const [circuitJson, setCircuitJson] = useState10(null);
+  const [isLoading, setIsLoading] = useState10(true);
+  const [error, setError] = useState10(null);
+  const [svgObjectUrl, setSvgObjectUrl] = useState10(null);
+  const containerRef = useRef9(null);
+  const imgRef = useRef9(null);
   const { containerWidth } = useResizeHandling(
     containerRef
   );
-  const [isDragging, setIsDragging] = useState8(false);
+  const [isDragging, setIsDragging] = useState10(false);
   const {
     ref: transformRef,
     cancelDrag: _cancelDrag,
@@ -2536,23 +3529,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;
-  useEffect10(() => {
+  useEffect12(() => {
     setIsLoading(true);
     setError(null);
     setCircuitJson(inputCircuitJson);
     setIsLoading(false);
   }, [inputCircuitJson]);
-  const simulationExperiments = useMemo6(() => {
+  const simulationExperiments = useMemo7(() => {
     if (!circuitJson) return [];
     return circuitJson.filter(
       (element) => element.type === "simulation_experiment"
     );
   }, [circuitJson]);
-  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState8(null);
+  const [selectedSimulationExperimentId, setSelectedSimulationExperimentId] = useState10(null);
   const simulationExperimentId = (selectedSimulationExperimentId && simulationExperiments.some(
     (simulation) => simulation.simulation_experiment_id === selectedSimulationExperimentId
   ) ? selectedSimulationExperimentId : simulationExperiments[0]?.simulation_experiment_id) ?? null;
-  useEffect10(() => {
+  useEffect12(() => {
     if (simulationExperimentId !== selectedSimulationExperimentId) {
       setSelectedSimulationExperimentId(simulationExperimentId);
     }
@@ -2561,7 +3554,7 @@ var AnalogSimulationViewer = ({
     setSelectedSimulationExperimentId(nextSimulationExperimentId);
     onSimulationChange?.(nextSimulationExperimentId);
   };
-  const simulationSvg = useMemo6(() => {
+  const simulationSvg = useMemo7(() => {
     if (!circuitJson || !effectiveWidth || !effectiveHeight || !simulationExperimentId)
       return "";
     try {
@@ -2589,7 +3582,7 @@ var AnalogSimulationViewer = ({
     simulationExperimentId,
     acSweepView
   ]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!simulationSvg) {
       setSvgObjectUrl(null);
       return;
@@ -2606,7 +3599,7 @@ var AnalogSimulationViewer = ({
       setSvgObjectUrl(null);
     }
   }, [simulationSvg]);
-  const containerBackgroundColor = useMemo6(() => {
+  const containerBackgroundColor = useMemo7(() => {
     return getAnalogSimulationBackgroundColor(simulationSvg, colorOverrides);
   }, [simulationSvg, colorOverrides]);
   const handleMouseDown = (_e) => {
@@ -2615,7 +3608,7 @@ var AnalogSimulationViewer = ({
   const handleTouchStart = (_e) => {
     setIsDragging(true);
   };
-  useEffect10(() => {
+  useEffect12(() => {
     const handleMouseUp = () => {
       setIsDragging(false);
     };
@@ -2630,7 +3623,7 @@ var AnalogSimulationViewer = ({
     };
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         style: {
@@ -2650,7 +3643,7 @@ var AnalogSimulationViewer = ({
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         style: {
@@ -2665,15 +3658,15 @@ var AnalogSimulationViewer = ({
           ...containerStyle
         },
         className,
-        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 })
+        children: /* @__PURE__ */ jsxs9("div", { style: { textAlign: "center", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx11("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
+          /* @__PURE__ */ jsx11("div", { style: { fontSize: "14px" }, children: error })
         ] })
       }
     );
   }
   if (!simulationSvg) {
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         style: {
@@ -2689,11 +3682,11 @@ var AnalogSimulationViewer = ({
         },
         className,
         children: [
-          /* @__PURE__ */ jsx9("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
-          /* @__PURE__ */ jsxs7("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
+          /* @__PURE__ */ jsx11("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
+          /* @__PURE__ */ jsxs9("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
             "Use",
             " ",
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx11(
               "code",
               {
                 style: {
@@ -2713,7 +3706,7 @@ var AnalogSimulationViewer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: (node) => {
@@ -2732,7 +3725,7 @@ var AnalogSimulationViewer = ({
       onMouseDown: handleMouseDown,
       onTouchStart: handleTouchStart,
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(
           AnalogSimulationSelector,
           {
             simulations: simulationExperiments,
@@ -2740,7 +3733,7 @@ var AnalogSimulationViewer = ({
             onSelectSimulation: handleSelectSimulation
           }
         ),
-        svgObjectUrl ? /* @__PURE__ */ jsx9(
+        svgObjectUrl ? /* @__PURE__ */ jsx11(
           "img",
           {
             ref: imgRef,
@@ -2754,7 +3747,7 @@ var AnalogSimulationViewer = ({
               objectFit: "contain"
             }
           }
-        ) : /* @__PURE__ */ jsx9(
+        ) : /* @__PURE__ */ jsx11(
           "div",
           {
             style: {