@tscircuit/pcb-viewer 1.11.437 → 1.11.438

package/dist/index.js

@@ -9609,6 +9609,113 @@ var PIN1_LOCATION_PARTS = {
   bottomside_right: { side: "bottomside", alignment: "right" }
 };
 var PIN1_LOCATIONS = Object.keys(PIN1_LOCATION_PARTS);
+var placePolygon = (polygon2, center, degrees = 0) => {
+  const { a, b, c, d, e, f } = compose2(
+    translate5(center.x, center.y),
+    rotate(degrees * Math.PI / 180)
+  );
+  return polygon2.transform(new Matrix(a, b, c, d, e, f));
+};
+var ccw = (polygon2) => polygon2.orientation() === ORIENTATION.CCW ? polygon2 : polygon2.reverse();
+var circlePolygon = (center, radius) => ccw(new Polygon$1(new Circle$1(new Point$2(center.x, center.y), radius)));
+var roundedRectangle = (center, width, height, radius = 0, degrees = 0) => {
+  const x = width / 2;
+  const y = height / 2;
+  const r = Math.max(0, Math.min(radius, x, y));
+  if (r === 0)
+    return placePolygon(
+      ccw(new Polygon$1(new Box(-x, -y, x, y))),
+      center,
+      degrees
+    );
+  const arcs = [
+    new Arc(new Point$2(x - r, -y + r), r, -Math.PI / 2, 0, true),
+    new Arc(new Point$2(x - r, y - r), r, 0, Math.PI / 2, true),
+    new Arc(new Point$2(-x + r, y - r), r, Math.PI / 2, Math.PI, true),
+    new Arc(new Point$2(-x + r, -y + r), r, Math.PI, Math.PI * 1.5, true)
+  ];
+  const edges = [];
+  for (let i = 0; i < arcs.length; i++) {
+    const arc2 = arcs[i];
+    const next = arcs[(i + 1) % arcs.length];
+    edges.push(arc2);
+    if (arc2.end.distanceTo(next.start)[0] > 1e-12)
+      edges.push(new Segment$1(arc2.end, next.start));
+  }
+  return placePolygon(ccw(new Polygon$1(edges)), center, degrees);
+};
+var subtractHole = (outer, hole) => {
+  for (const face of hole.reverse().faces) outer.addFace(face.shapes);
+  return outer;
+};
+var getSmtPadPolygon = (pad) => {
+  if (pad.shape === "polygon")
+    return ccw(new Polygon$1(pad.points.map((p) => new Point$2(p.x, p.y))));
+  if (pad.shape === "circle") return circlePolygon(pad, pad.radius);
+  const radius = pad.shape === "pill" || pad.shape === "rotated_pill" ? pad.radius : pad.corner_radius ?? pad.rect_border_radius ?? 0;
+  return roundedRectangle(
+    pad,
+    pad.width,
+    pad.height,
+    radius,
+    "ccw_rotation" in pad ? pad.ccw_rotation : 0
+  );
+};
+var getViaPolygon = (center, outerDiameter, holeDiameter) => subtractHole(
+  circlePolygon(center, outerDiameter / 2),
+  circlePolygon(center, holeDiameter / 2)
+);
+var getPlatedHolePolygon = (pad, componentRotation = 0) => {
+  if (pad.shape === "circle")
+    return getViaPolygon(pad, pad.outer_diameter, pad.hole_diameter);
+  if ("outer_width" in pad) {
+    return subtractHole(
+      roundedRectangle(
+        pad,
+        pad.outer_width,
+        pad.outer_height,
+        Math.min(pad.outer_width, pad.outer_height) / 2,
+        pad.ccw_rotation
+      ),
+      roundedRectangle(
+        pad,
+        pad.hole_width,
+        pad.hole_height,
+        Math.min(pad.hole_width, pad.hole_height) / 2,
+        pad.ccw_rotation
+      )
+    );
+  }
+  const center = { x: pad.x + pad.hole_offset_x, y: pad.y + pad.hole_offset_y };
+  const outer = pad.shape === "hole_with_polygon_pad" ? placePolygon(
+    ccw(new Polygon$1(pad.pad_outline.map((p) => new Point$2(p.x, p.y)))),
+    pad,
+    pad.ccw_rotation ?? componentRotation
+  ) : roundedRectangle(
+    pad,
+    pad.rect_pad_width,
+    pad.rect_pad_height,
+    pad.rect_border_radius,
+    "rect_ccw_rotation" in pad ? pad.rect_ccw_rotation : 0
+  );
+  if (pad.shape === "circular_hole_with_rect_pad" || pad.shape === "hole_with_polygon_pad" && pad.hole_shape === "circle") {
+    if (pad.hole_diameter === void 0)
+      throw new Error("Circular plated hole requires hole_diameter");
+    return subtractHole(outer, circlePolygon(center, pad.hole_diameter / 2));
+  }
+  if (!("hole_width" in pad) || pad.hole_width === void 0 || pad.hole_height === void 0)
+    throw new Error("Slotted plated hole requires hole_width and hole_height");
+  return subtractHole(
+    outer,
+    roundedRectangle(
+      center,
+      pad.hole_width,
+      pad.hole_height,
+      Math.min(pad.hole_width, pad.hole_height) / 2,
+      "hole_ccw_rotation" in pad ? pad.hole_ccw_rotation : pad.shape === "hole_with_polygon_pad" ? pad.ccw_rotation ?? componentRotation : 0
+    )
+  );
+};
 
 // src/lib/apply-edit-events.ts
 import { translate as translate6 } from "transformation-matrix";
@@ -9993,7 +10100,7 @@ var zIndexMap = {
 };
 
 // src/PCBViewer.tsx
-import { useCallback as useCallback13, useEffect as useEffect22, useMemo as useMemo16, useRef as useRef18, useState as useState15 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect24, useMemo as useMemo17, useRef as useRef20, useState as useState16 } from "react";
 
 // node_modules/react-use/esm/useMountedState.js
 import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
@@ -10132,7 +10239,7 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
 };
 
 // src/PCBViewer.tsx
-import { compose as compose11, scale as scale6, translate as translate15 } from "transformation-matrix";
+import { compose as compose13, scale as scale7, translate as translate16 } from "transformation-matrix";
 
 // node_modules/use-mouse-matrix-transform/dist/chunk-TGYMZPTI.js
 import { compose as compose3, translate as translate7, scale } from "transformation-matrix";
@@ -10701,16 +10808,16 @@ function getExpandedStroke(strokeInput, defaultWidth) {
       addPoint(current, normalPrev, -1, currentWidth);
       addPoint(current, normalNext, -1, currentWidth);
     } else {
-      const scale7 = 1 / miterLength;
+      const scale8 = 1 / miterLength;
       addPoint(
         current,
-        { x: miterX * scale7, y: miterY * scale7 },
+        { x: miterX * scale8, y: miterY * scale8 },
         1,
         currentWidth
       );
       addPoint(
         current,
-        { x: miterX * scale7, y: miterY * scale7 },
+        { x: miterX * scale8, y: miterY * scale8 },
         -1,
         currentWidth
       );
@@ -11876,8 +11983,8 @@ function getPrimitivesNearPoint({
   realToScreenScale,
   spatialIndex
 }) {
-  const scale7 = Math.max(Math.abs(realToScreenScale), Number.EPSILON);
-  const queryRadius = Math.max(spatialIndex.maxTraceWidth * 25, 2) / scale7;
+  const scale8 = Math.max(Math.abs(realToScreenScale), Number.EPSILON);
+  const queryRadius = Math.max(spatialIndex.maxTraceWidth * 25, 2) / scale8;
   const minCellX = Math.floor((point2.x - queryRadius) / spatialIndex.cellSize);
   const maxCellX = Math.floor((point2.x + queryRadius) / spatialIndex.cellSize);
   const minCellY = Math.floor((point2.y - queryRadius) / spatialIndex.cellSize);
@@ -12320,8 +12427,8 @@ var animateTransform = ({
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef16, useState as useState13 } from "react";
-import { applyToPoint as applyToPoint22, inverse as inverse6 } from "transformation-matrix";
+import { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo16, useRef as useRef17, useState as useState14 } from "react";
+import { applyToPoint as applyToPoint23, inverse as inverse6 } from "transformation-matrix";
 
 // src/lib/get-pad-component.ts
 var getPadComponent = (pad, elements) => {
@@ -12769,10 +12876,10 @@ var Drawer = class {
         }
         if (is_stroke_dashed) {
           let dashPattern = [];
-          const scale7 = Math.abs(this.transform.a);
-          if (scale7 > 0) {
+          const scale8 = Math.abs(this.transform.a);
+          if (scale8 > 0) {
             const SEGMENT_LENGTH = 0.1;
-            const dash = SEGMENT_LENGTH * scale7;
+            const dash = SEGMENT_LENGTH * scale8;
             const gap = dash * 1.3;
             if (dash > 0.5) {
               dashPattern = [dash, gap];
@@ -16158,7 +16265,9 @@ var DimensionOverlay = ({
           containerRef.current.blur();
         }
       },
-      onClick: () => {
+      onClick: (event) => {
+        if (event.target.closest("[data-toolbar-overlay]"))
+          return;
         if (containerRef.current) {
           containerRef.current.focus();
         }
@@ -17058,13 +17167,13 @@ var ErrorOverlay = ({
         const screenCenter = applyToPoint14(transform, center);
         if (Number.isNaN(screenCenter.x) || Number.isNaN(screenCenter.y))
           return null;
-        const scale7 = Math.abs(transform.a);
+        const scale8 = Math.abs(transform.a);
         const baseRadius = 0.5;
         const minRadius = 8;
         const maxRadius = 30;
         const scaledRadius = Math.max(
           minRadius,
-          Math.min(maxRadius, baseRadius * scale7)
+          Math.min(maxRadius, baseRadius * scale8)
         );
         const popupPosition = getPopupPosition(screenCenter, containerRef);
         return /* @__PURE__ */ jsxs7(
@@ -17182,19 +17291,59 @@ var ErrorOverlay = ({
 
 // src/components/FocusedPcbComponentOverlay.tsx
 import { useEffect as useEffect9 } from "react";
-import { applyToPoint as applyToPoint15 } from "transformation-matrix";
+import {
+  applyToPoint as applyToPoint16,
+  compose as compose11,
+  rotateDEG as rotateDEG4
+} from "transformation-matrix";
 
 // src/lib/get-pcb-component-focus.ts
+import { applyToPoint as applyToPoint15, rotateDEG as rotateDEG3 } from "transformation-matrix";
 var getPcbComponentFocus = (elements, pcbComponentId, width, height) => {
   if (width <= 0 || height <= 0) return;
   const component = elements.find(
     (element) => element.type === "pcb_component" && element.pcb_component_id === pcbComponentId
   );
   if (component?.type !== "pcb_component") return;
-  const bounds = getPcbElementBounds(component);
-  if (!bounds) return;
+  const rotation = component.rotation ?? 0;
+  const polygons = elements.flatMap((element) => {
+    if (!("pcb_component_id" in element) || element.pcb_component_id !== pcbComponentId)
+      return [];
+    if (element.type === "pcb_smtpad") return [getSmtPadPolygon(element)];
+    if (element.type === "pcb_plated_hole")
+      return [getPlatedHolePolygon(element, rotation)];
+    return [];
+  });
+  const boxes = polygons.map((polygon2) => polygon2.rotate(-rotation * Math.PI / 180).box).filter(
+    (box2) => [box2.xmin, box2.xmax, box2.ymin, box2.ymax].every(Number.isFinite)
+  );
+  const fallbackBounds = getPcbElementBounds({ ...component, rotation: 0 });
+  if (!fallbackBounds) return;
+  const localBounds = boxes.length ? {
+    minX: Math.min(...boxes.map((box2) => box2.xmin)),
+    maxX: Math.max(...boxes.map((box2) => box2.xmax)),
+    minY: Math.min(...boxes.map((box2) => box2.ymin)),
+    maxY: Math.max(...boxes.map((box2) => box2.ymax))
+  } : fallbackBounds;
+  const outlineRotation = boxes.length ? rotation : 0;
+  const outline = {
+    center: applyToPoint15(rotateDEG3(outlineRotation), {
+      x: (localBounds.minX + localBounds.maxX) / 2,
+      y: (localBounds.minY + localBounds.maxY) / 2
+    }),
+    width: localBounds.maxX - localBounds.minX,
+    height: localBounds.maxY - localBounds.minY,
+    rotation: outlineRotation
+  };
+  const bounds = boxes.length ? {
+    minX: Math.min(...polygons.map((polygon2) => polygon2.box.xmin)),
+    maxX: Math.max(...polygons.map((polygon2) => polygon2.box.xmax)),
+    minY: Math.min(...polygons.map((polygon2) => polygon2.box.ymin)),
+    maxY: Math.max(...polygons.map((polygon2) => polygon2.box.ymax))
+  } : fallbackBounds;
   return {
     component,
+    outline,
     bounds,
     transform: createTransformForBounds({ bounds, width, height })
   };
@@ -17215,19 +17364,24 @@ var FocusedPcbComponentOverlay = ({
     if (layer) selectLayer(layer);
   }, [focusRequest, layer, selectLayer]);
   if (!focus || !transform) return null;
-  const { bounds } = focus;
-  const a = applyToPoint15(transform, { x: bounds.minX, y: bounds.minY });
-  const b = applyToPoint15(transform, { x: bounds.maxX, y: bounds.maxY });
+  const { outline } = focus;
+  const center = applyToPoint16(transform, outline.center);
+  const rotatedTransform = compose11(transform, rotateDEG4(outline.rotation ?? 0));
+  const width = outline.width * Math.hypot(rotatedTransform.a, rotatedTransform.b) + 8;
+  const height = outline.height * Math.hypot(rotatedTransform.c, rotatedTransform.d) + 8;
+  const rotation = Math.atan2(rotatedTransform.b, rotatedTransform.a);
   return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-focused-pcb-component-id": componentId,
       style: {
         position: "absolute",
-        left: Math.min(a.x, b.x) - 4,
-        top: Math.min(a.y, b.y) - 4,
-        width: Math.abs(b.x - a.x) + 8,
-        height: Math.abs(b.y - a.y) + 8,
+        left: center.x - width / 2,
+        top: center.y - height / 2,
+        width,
+        height,
+        transform: `rotate(${rotation}rad)`,
+        transformOrigin: "center",
         border: "2px solid #3399ff",
         borderRadius: 4,
         boxSizing: "border-box",
@@ -17250,10 +17404,10 @@ function ifSetsMatchExactly(set1, set2) {
 
 // src/components/MouseElementTracker.tsx
 import { useEffect as useEffect11, useMemo as useMemo8, useState as useState7 } from "react";
-import { applyToPoint as applyToPoint18, inverse as inverse5 } from "transformation-matrix";
+import { applyToPoint as applyToPoint19, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
-import { applyToPoint as applyToPoint16 } from "transformation-matrix";
+import { applyToPoint as applyToPoint17 } from "transformation-matrix";
 
 // src/components/AnchorOffsetOverlay/common/constants.ts
 var VISUAL_CONFIG = {
@@ -17298,7 +17452,7 @@ var AnchorOffsetOverlay = ({
   const anchorScreens = /* @__PURE__ */ new Map();
   targets.forEach((target) => {
     if (!anchorScreens.has(target.anchor_id)) {
-      const screenPoint = applyToPoint16(transform, target.anchor);
+      const screenPoint = applyToPoint17(transform, target.anchor);
       anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
@@ -17332,7 +17486,7 @@ var AnchorOffsetOverlay = ({
               const anchorKey = target.anchor_id;
               const targetCenter = target.target;
               const anchorMarkerScreen = anchorScreens.get(anchorKey);
-              const targetScreen = applyToPoint16(transform, targetCenter);
+              const targetScreen = applyToPoint17(transform, targetCenter);
               const offsetX = targetCenter.x - anchorPosition.x;
               const offsetY = targetCenter.y - anchorPosition.y;
               const xLineLength = Math.abs(targetScreen.x - anchorMarkerScreen.x);
@@ -17710,7 +17864,7 @@ var GroupAnchorOffsetOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/ComponentBoundingBoxOverlay.tsx
-import { applyToPoint as applyToPoint17 } from "transformation-matrix";
+import { applyToPoint as applyToPoint18 } from "transformation-matrix";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var calculateComponentBoundingBox = (component, elements) => {
   const componentId = component.pcb_component_id;
@@ -17774,11 +17928,11 @@ var ComponentBoundingBoxOverlay = ({
           width: containerWidth,
           height: containerHeight,
           children: renderData.map(({ component, bbox, group }) => {
-            const topLeft = applyToPoint17(transform, {
+            const topLeft = applyToPoint18(transform, {
               x: bbox.minX,
               y: bbox.maxY
             });
-            const bottomRight = applyToPoint17(transform, {
+            const bottomRight = applyToPoint18(transform, {
               x: bbox.maxX,
               y: bbox.minY
             });
@@ -17792,7 +17946,7 @@ var ComponentBoundingBoxOverlay = ({
               x: (bbox.minX + bbox.maxX) / 2,
               y: (bbox.minY + bbox.maxY) / 2
             };
-            const componentCenterScreen = applyToPoint17(transform, componentCenter);
+            const componentCenterScreen = applyToPoint18(transform, componentCenter);
             return /* @__PURE__ */ jsxs9("g", { children: [
               /* @__PURE__ */ jsx14(
                 "rect",
@@ -18352,7 +18506,7 @@ var MouseElementTracker = ({
         h = "h" in primitive ? primitive.h : "r" in primitive ? primitive.r * 2 : "rX" in primitive && "rY" in primitive ? primitive.rY * 2 : 0;
       }
       if (!basePoint) continue;
-      const screenPos = applyToPoint18(transform, basePoint);
+      const screenPos = applyToPoint19(transform, basePoint);
       const screenSize = {
         w: w * transform.a,
         h: h * transform.a
@@ -18381,7 +18535,7 @@ var MouseElementTracker = ({
   }) => {
     const { x, y } = screenPoint;
     setMousePos({ x, y });
-    const rwPoint = applyToPoint18(inverse5(transform2), { x, y });
+    const rwPoint = applyToPoint19(inverse5(transform2), { x, y });
     const nearbyPrimitives = getPrimitivesNearPoint({
       point: rwPoint,
       realToScreenScale: transform2.a,
@@ -18484,7 +18638,7 @@ var MouseElementTracker = ({
 
 // src/components/PcbGroupOverlay.tsx
 import { useEffect as useEffect12, useMemo as useMemo9, useRef as useRef8 } from "react";
-import { applyToPoint as applyToPoint19 } from "transformation-matrix";
+import { applyToPoint as applyToPoint20 } from "transformation-matrix";
 import { identity as identity7 } from "transformation-matrix";
 import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var GROUP_COLORS = [
@@ -18654,10 +18808,10 @@ var PcbGroupOverlay = ({
         minY -= totalPadding;
         maxY += totalPadding;
       }
-      const topLeft = applyToPoint19(transform, { x: minX, y: maxY });
-      const topRight = applyToPoint19(transform, { x: maxX, y: maxY });
-      const bottomLeft = applyToPoint19(transform, { x: minX, y: minY });
-      const bottomRight = applyToPoint19(transform, { x: maxX, y: minY });
+      const topLeft = applyToPoint20(transform, { x: minX, y: maxY });
+      const topRight = applyToPoint20(transform, { x: maxX, y: maxY });
+      const bottomLeft = applyToPoint20(transform, { x: minX, y: minY });
+      const bottomRight = applyToPoint20(transform, { x: maxX, y: minY });
       const groupColor = GROUP_COLORS[groupIndex % GROUP_COLORS.length];
       ctx.strokeStyle = groupColor;
       ctx.lineWidth = 2;
@@ -18707,7 +18861,7 @@ var PcbGroupOverlay = ({
           x: group.anchor_position[0] ?? 0,
           y: group.anchor_position[1] ?? 0
         } : { x: group.anchor_position.x, y: group.anchor_position.y };
-        const anchorScreenPos = applyToPoint19(transform, anchorPositionValue);
+        const anchorScreenPos = applyToPoint20(transform, anchorPositionValue);
         ctx.strokeStyle = "white";
         ctx.lineWidth = 1.5;
         ctx.setLineDash([]);
@@ -18761,7 +18915,7 @@ var PcbGroupOverlay = ({
 };
 
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint20, identity as identity8 } from "transformation-matrix";
+import { applyToPoint as applyToPoint21, identity as identity8 } from "transformation-matrix";
 import { useMemo as useMemo10 } from "react";
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var RatsNestOverlay = ({
@@ -18844,8 +18998,8 @@ var RatsNestOverlay = ({
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint20(transform, startPoint);
-          const transformedEnd = applyToPoint20(transform, endPoint);
+          const transformedStart = applyToPoint21(transform, startPoint);
+          const transformedEnd = applyToPoint21(transform, endPoint);
           return /* @__PURE__ */ jsx19(
             "line",
             {
@@ -18866,7 +19020,7 @@ var RatsNestOverlay = ({
 };
 
 // src/components/ToolbarOverlay.tsx
-import { css as css3 } from "@emotion/css";
+import { css as css4 } from "@emotion/css";
 
 // src/hooks/useHotKey.ts
 import { useEffect as useEffect13, useRef as useRef9 } from "react";
@@ -18961,17 +19115,17 @@ var useMobileTouch = (onClick, options = { stopPropagation: true }) => {
 // src/components/ToolbarOverlay.tsx
 import {
   useCallback as useCallback10,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo12,
-  useRef as useRef13,
-  useState as useState11
+  useMemo as useMemo13,
+  useRef as useRef14,
+  useState as useState12
 } from "react";
 
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.436",
+  version: "1.11.437",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -19053,8 +19207,233 @@ var package_default = {
   }
 };
 
+// src/components/ComponentSearch.tsx
+import { css as css2 } from "@emotion/css";
+import { useEffect as useEffect15, useId, useMemo as useMemo11, useRef as useRef11, useState as useState9 } from "react";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+var buttonClass = css2`
+  background: #1f1f1f;
+  border: 1px solid #666;
+  border-radius: 2px;
+  color: #eee;
+  padding: 4px 8px;
+  font: inherit;
+  cursor: pointer;
+  &:hover, &:focus-visible { background: #444; }
+`;
+var ComponentSearch = ({
+  elements,
+  onSelect
+}) => {
+  const [open, setOpen] = useState9(false);
+  const [query, setQuery] = useState9("");
+  const [activeComponentId, setActiveComponentId] = useState9(
+    null
+  );
+  const container = useRef11(null);
+  const toggle = useRef11(null);
+  const input = useRef11(null);
+  const panelId = useId();
+  const components = useMemo11(() => {
+    const names = new Map(
+      elements.flatMap(
+        (element) => element.type === "source_component" ? [[element.source_component_id, element.name]] : []
+      )
+    );
+    return elements.flatMap((element) => {
+      if (element.type !== "pcb_component") return [];
+      const name = names.get(element.source_component_id);
+      return name ? [{ id: element.pcb_component_id, name, layer: element.layer }] : [];
+    }).sort(
+      (a, b) => a.name.localeCompare(b.name, void 0, { numeric: true })
+    );
+  }, [elements]);
+  const normalizedQuery = query.trim().toLowerCase();
+  const matches = components.filter(
+    (component) => component.name.toLowerCase().includes(normalizedQuery)
+  );
+  const activeIndex = matches.findIndex(
+    (component) => component.id === activeComponentId
+  );
+  const activeOptionId = activeIndex >= 0 ? `${panelId}-option-${activeIndex}` : void 0;
+  useEffect15(() => {
+    if (open && activeOptionId)
+      document.getElementById(activeOptionId)?.scrollIntoView({ block: "nearest" });
+  }, [open, activeOptionId]);
+  useEffect15(() => {
+    if (!open) return;
+    setActiveComponentId(null);
+    input.current?.focus();
+    const closeOutside = (event) => {
+      if (!container.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", closeOutside);
+    return () => document.removeEventListener("pointerdown", closeOutside);
+  }, [open]);
+  const select = (id) => {
+    onSelect(id);
+    setOpen(false);
+    toggle.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      ref: container,
+      style: { position: "relative", height: "fit-content" },
+      onKeyDown: (event) => {
+        if ((event.key === "ArrowDown" || event.key === "ArrowUp") && open && normalizedQuery && matches.length) {
+          event.preventDefault();
+          event.stopPropagation();
+          const nextIndex = activeIndex < 0 ? event.key === "ArrowDown" ? 0 : matches.length - 1 : (activeIndex + (event.key === "ArrowDown" ? 1 : -1) + matches.length) % matches.length;
+          const component = matches[nextIndex];
+          setActiveComponentId(component.id);
+          onSelect(component.id);
+          input.current?.focus();
+        }
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          setOpen(false);
+          toggle.current?.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            ref: toggle,
+            type: "button",
+            className: buttonClass,
+            "aria-label": "Search components",
+            title: "Search components",
+            style: { display: "flex", alignItems: "center", padding: "4px 6px" },
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            onClick: () => setOpen(!open),
+            children: /* @__PURE__ */ jsxs14(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx20("circle", { cx: "10.5", cy: "10.5", r: "6.5" }),
+                  /* @__PURE__ */ jsx20("path", { d: "m16 16 5 5" })
+                ]
+              }
+            )
+          }
+        ),
+        open && /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            id: panelId,
+            style: {
+              position: "absolute",
+              top: "100%",
+              left: 0,
+              marginTop: 4,
+              width: "min(260px, calc(100vw - 140px))",
+              padding: 8,
+              border: "1px solid #666",
+              borderRadius: 4,
+              background: "#1f1f1f",
+              color: "#eee",
+              boxSizing: "border-box"
+            },
+            children: [
+              /* @__PURE__ */ jsx20(
+                "input",
+                {
+                  ref: input,
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": open,
+                  "aria-controls": `${panelId}-results`,
+                  "aria-activedescendant": activeOptionId,
+                  "aria-label": "Component name",
+                  placeholder: "Search component name\u2026",
+                  value: query,
+                  onChange: (event) => {
+                    setQuery(event.target.value);
+                    setActiveComponentId(null);
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" && normalizedQuery && matches[0]) {
+                      event.preventDefault();
+                      select(matches[activeIndex >= 0 ? activeIndex : 0].id);
+                    }
+                  },
+                  style: {
+                    width: "100%",
+                    boxSizing: "border-box",
+                    padding: 6,
+                    background: "#111",
+                    color: "#eee",
+                    border: "1px solid #666",
+                    borderRadius: 2
+                  }
+                }
+              ),
+              !normalizedQuery ? /* @__PURE__ */ jsx20("output", { style: { display: "block", marginTop: 8 }, children: "Type a component name." }) : matches.length === 0 ? /* @__PURE__ */ jsx20("output", { style: { display: "block", marginTop: 8 }, children: "No matching components." }) : /* @__PURE__ */ jsx20(
+                "div",
+                {
+                  id: `${panelId}-results`,
+                  role: "listbox",
+                  tabIndex: -1,
+                  "aria-label": "Matching components",
+                  style: {
+                    listStyle: "none",
+                    padding: "0 12px 0 0",
+                    scrollbarGutter: "stable",
+                    overflowX: "hidden",
+                    margin: "8px 0 0",
+                    maxHeight: 220,
+                    overflowY: "auto"
+                  },
+                  children: matches.map((component, index) => /* @__PURE__ */ jsx20("div", { role: "presentation", children: /* @__PURE__ */ jsxs14(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      id: `${panelId}-option-${index}`,
+                      "aria-selected": component.id === activeComponentId,
+                      tabIndex: -1,
+                      className: buttonClass,
+                      style: {
+                        width: "100%",
+                        boxSizing: "border-box",
+                        display: "flex",
+                        justifyContent: "space-between",
+                        border: "none",
+                        borderTop: index > 0 ? "1px solid #444" : "0",
+                        borderRadius: 0,
+                        padding: "8px 6px",
+                        backgroundColor: component.id === activeComponentId ? "#34506e" : void 0
+                      },
+                      onClick: () => select(component.id),
+                      children: [
+                        /* @__PURE__ */ jsx20("span", { children: component.name }),
+                        /* @__PURE__ */ jsx20("span", { style: { color: "#aaa" }, children: component.layer })
+                      ]
+                    }
+                  ) }, component.id))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/components/ToolbarButton.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ToolbarButton = ({
   children,
   isSmallScreen,
@@ -19062,7 +19441,7 @@ var ToolbarButton = ({
   ...props
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ...props,
@@ -19090,7 +19469,7 @@ var ToolbarButton = ({
 };
 
 // src/components/ToolbarErrorDropdown.tsx
-import { useCallback as useCallback9, useMemo as useMemo11, useState as useState9 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo12, useState as useState10 } from "react";
 
 // src/lib/util/group-errors-by-type.ts
 var groupErrorsByType = (errors) => {
@@ -19112,16 +19491,16 @@ var groupErrorsByType = (errors) => {
 };
 
 // src/components/useToolbarErrorFocus.ts
-import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef12 } from "react";
 var useToolbarErrorFocus = ({
   onClose,
   setHoveredErrorId,
   setFocusedErrorId,
   highlightDurationMs = 3e3
 }) => {
-  const clearHighlightTimeoutRef = useRef11(null);
-  const focusRequestRef = useRef11(null);
-  const selectedErrorIdRef = useRef11(null);
+  const clearHighlightTimeoutRef = useRef12(null);
+  const focusRequestRef = useRef12(null);
+  const selectedErrorIdRef = useRef12(null);
   const clearPendingSelection = useCallback8(() => {
     if (clearHighlightTimeoutRef.current !== null) {
       window.clearTimeout(clearHighlightTimeoutRef.current);
@@ -19132,7 +19511,7 @@ var useToolbarErrorFocus = ({
       focusRequestRef.current = null;
     }
   }, []);
-  useEffect15(() => clearPendingSelection, [clearPendingSelection]);
+  useEffect16(() => clearPendingSelection, [clearPendingSelection]);
   const handleErrorSelect = useCallback8(
     (errorId) => {
       clearPendingSelection();
@@ -19170,7 +19549,7 @@ var useToolbarErrorFocus = ({
 };
 
 // src/components/ToolbarErrorDropdown.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var CopyErrorButton = ({
   errorId,
   errorMessage,
@@ -19180,7 +19559,7 @@ var CopyErrorButton = ({
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(
     () => onCopy(errorMessage, errorId)
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "button",
     {
       type: "button",
@@ -19200,7 +19579,7 @@ var CopyErrorButton = ({
         ...touchStyle
       },
       ...touchHandlers,
-      children: copiedErrorId === errorId ? /* @__PURE__ */ jsx21("span", { style: { color: "#4caf50", fontSize: 12 }, children: "Copied!" }) : /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx21("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) })
+      children: copiedErrorId === errorId ? /* @__PURE__ */ jsx22("span", { style: { color: "#4caf50", fontSize: 12 }, children: "Copied!" }) : /* @__PURE__ */ jsx22("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx22("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) })
     }
   );
 };
@@ -19213,11 +19592,11 @@ var ToolbarErrorDropdown = ({
   setHoveredErrorId,
   setFocusedErrorId
 }) => {
-  const [copiedErrorId, setCopiedErrorId] = useState9(null);
-  const [collapsedErrorGroups, setCollapsedErrorGroups] = useState9(
+  const [copiedErrorId, setCopiedErrorId] = useState10(null);
+  const [collapsedErrorGroups, setCollapsedErrorGroups] = useState10(
     /* @__PURE__ */ new Set()
   );
-  const [expandedErrorIds, setExpandedErrorIds] = useState9(
+  const [expandedErrorIds, setExpandedErrorIds] = useState10(
     /* @__PURE__ */ new Set()
   );
   const [, copyToClipboard] = useCopyToClipboard_default();
@@ -19226,14 +19605,14 @@ var ToolbarErrorDropdown = ({
     setHoveredErrorId,
     setFocusedErrorId
   });
-  const errorElements = useMemo11(
+  const errorElements = useMemo12(
     () => elements?.filter(
       (el) => el.type.includes("error")
     ) ?? [],
     [elements]
   );
   const errorCount = errorElements.length;
-  const groupedErrorElements = useMemo11(
+  const groupedErrorElements = useMemo12(
     () => groupErrorsByType(errorElements),
     [errorElements]
   );
@@ -19259,20 +19638,20 @@ var ToolbarErrorDropdown = ({
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsxs14("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs15("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx22(
       ToolbarButton,
       {
         isSmallScreen,
         style: errorCount > 0 ? { color: "red" } : void 0,
         onClick: onToggle,
-        children: /* @__PURE__ */ jsxs14("div", { children: [
+        children: /* @__PURE__ */ jsxs15("div", { children: [
           errorCount,
           " errors"
         ] })
       }
     ),
-    isOpen && errorCount > 0 && /* @__PURE__ */ jsx21(
+    isOpen && errorCount > 0 && /* @__PURE__ */ jsx22(
       "div",
       {
         style: {
@@ -19292,14 +19671,14 @@ var ToolbarErrorDropdown = ({
         },
         children: groupedErrorElements.map(({ errorType, errors }, groupIndex) => {
           const isGroupCollapsed = collapsedErrorGroups.has(errorType);
-          return /* @__PURE__ */ jsxs14(
+          return /* @__PURE__ */ jsxs15(
             "div",
             {
               style: {
                 borderBottom: groupIndex < groupedErrorElements.length - 1 ? "1px solid #444" : "none"
               },
               children: [
-                /* @__PURE__ */ jsxs14(
+                /* @__PURE__ */ jsxs15(
                   "div",
                   {
                     style: {
@@ -19336,7 +19715,7 @@ var ToolbarErrorDropdown = ({
                       toggleErrorGroup(errorType);
                     },
                     children: [
-                      /* @__PURE__ */ jsxs14(
+                      /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           style: {
@@ -19346,7 +19725,7 @@ var ToolbarErrorDropdown = ({
                             color: "#ff6b6b"
                           },
                           children: [
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx22(
                               "div",
                               {
                                 style: {
@@ -19359,7 +19738,7 @@ var ToolbarErrorDropdown = ({
                                 children: "\u203A"
                               }
                             ),
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx22(
                               "div",
                               {
                                 style: {
@@ -19372,7 +19751,7 @@ var ToolbarErrorDropdown = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         "div",
                         {
                           style: {
@@ -19390,14 +19769,14 @@ var ToolbarErrorDropdown = ({
                 !isGroupCollapsed && errors.map(({ error, index, errorId }) => {
                   const isExpanded = expandedErrorIds.has(errorId);
                   const errorMessage = error.message ?? "No error message";
-                  return /* @__PURE__ */ jsxs14(
+                  return /* @__PURE__ */ jsxs15(
                     "div",
                     {
                       style: {
                         borderTop: "1px solid #3a3a3a"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs14(
+                        /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             style: {
@@ -19436,7 +19815,7 @@ var ToolbarErrorDropdown = ({
                               handleErrorSelect(errorId);
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 "div",
                                 {
                                   style: {
@@ -19452,7 +19831,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 "button",
                                 {
                                   type: "button",
@@ -19484,7 +19863,7 @@ var ToolbarErrorDropdown = ({
                             ]
                           }
                         ),
-                        isExpanded && /* @__PURE__ */ jsxs14(
+                        isExpanded && /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             "data-error-id": index,
@@ -19496,7 +19875,7 @@ var ToolbarErrorDropdown = ({
                               position: "relative"
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 "div",
                                 {
                                   style: {
@@ -19514,7 +19893,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 CopyErrorButton,
                                 {
                                   errorId,
@@ -19551,11 +19930,11 @@ var RenderingEngineContext = createContext2(null);
 var useRenderingEngine = () => useContext3(RenderingEngineContext);
 
 // src/components/VisibilityContextMenu.tsx
-import { css as css2 } from "@emotion/css";
-import { useEffect as useEffect16, useRef as useRef12, useState as useState10 } from "react";
+import { css as css3 } from "@emotion/css";
+import { useEffect as useEffect17, useRef as useRef13, useState as useState11 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var menuStyle = css2`
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var menuStyle = css3`
   background: #222;
   color: #eee;
   border: 1px solid #555;
@@ -19565,7 +19944,7 @@ var menuStyle = css2`
   box-shadow: 0 4px 16px #0008;
   outline: none;
 `;
-var itemStyle = css2`
+var itemStyle = css3`
   display: block;
   width: 100%;
   padding: 8px;
@@ -19591,18 +19970,18 @@ var VisibilityContextMenu = ({
   onExitXRayNet
 }) => {
   const engine = useRenderingEngine();
-  const [rendererOpen, setRendererOpen] = useState10(false);
+  const [rendererOpen, setRendererOpen] = useState11(false);
   const opacity = useGlobalStore((s) => s.hidden_layer_opacity);
   const setOpacity = useGlobalStore((s) => s.setHiddenLayerOpacity);
   const copperPourOpacity = useGlobalStore((s) => s.copper_pour_opacity);
   const setCopperPourOpacity = useGlobalStore((s) => s.setCopperPourOpacity);
   const showCopperPours = useGlobalStore((s) => s.is_showing_copper_pours);
   const setShowCopperPours = useGlobalStore((s) => s.setIsShowingCopperPours);
-  const [copperPourOpacityOpen, setCopperPourOpacityOpen] = useState10(false);
+  const [copperPourOpacityOpen, setCopperPourOpacityOpen] = useState11(false);
   const effectiveCopperPourOpacity = showCopperPours ? copperPourOpacity : 0;
-  const [visibilityOpen, setVisibilityOpen] = useState10(false);
-  const [opacityOpen, setOpacityOpen] = useState10(false);
-  const ref = useRef12(null);
+  const [visibilityOpen, setVisibilityOpen] = useState11(false);
+  const [opacityOpen, setOpacityOpen] = useState11(false);
+  const ref = useRef13(null);
   const stacked = window.innerWidth < 480;
   const openLeft = !stacked && position.x + 460 > window.innerWidth;
   const submenuStyle = stacked ? { position: "relative" } : {
@@ -19610,7 +19989,7 @@ var VisibilityContextMenu = ({
     top: 0,
     ...openLeft ? { right: "100%" } : { left: "100%" }
   };
-  useEffect16(() => {
+  useEffect17(() => {
     const dismiss = (event) => {
       if (!ref.current?.contains(event.target)) {
         event.preventDefault();
@@ -19636,7 +20015,7 @@ var VisibilityContextMenu = ({
     };
   }, [onClose]);
   return createPortal(
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs16(
       "div",
       {
         ref,
@@ -19702,7 +20081,7 @@ var VisibilityContextMenu = ({
           ...stacked ? { overflowY: "auto" } : {}
         },
         children: [
-          onXRayNet && /* @__PURE__ */ jsxs15(
+          onXRayNet && /* @__PURE__ */ jsxs16(
             "button",
             {
               type: "button",
@@ -19719,7 +20098,7 @@ var VisibilityContextMenu = ({
               ]
             }
           ),
-          onXRayGroup && xRayGroups.map((group) => /* @__PURE__ */ jsxs15(
+          onXRayGroup && xRayGroups.map((group) => /* @__PURE__ */ jsxs16(
             "button",
             {
               type: "button",
@@ -19737,7 +20116,7 @@ var VisibilityContextMenu = ({
             },
             group.id
           )),
-          onExitXRayNet && /* @__PURE__ */ jsx22(
+          onExitXRayNet && /* @__PURE__ */ jsx23(
             "button",
             {
               type: "button",
@@ -19750,7 +20129,7 @@ var VisibilityContextMenu = ({
               children: "Exit X-Ray Net"
             }
           ),
-          /* @__PURE__ */ jsxs15(
+          /* @__PURE__ */ jsxs16(
             "div",
             {
               style: { position: "relative" },
@@ -19759,7 +20138,7 @@ var VisibilityContextMenu = ({
                 setRendererOpen(false);
               },
               children: [
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "button",
                   {
                     type: "button",
@@ -19774,7 +20153,7 @@ var VisibilityContextMenu = ({
                     children: "Visibility \u25B8"
                   }
                 ),
-                visibilityOpen && /* @__PURE__ */ jsxs15(
+                visibilityOpen && /* @__PURE__ */ jsxs16(
                   "div",
                   {
                     role: "menu",
@@ -19782,7 +20161,7 @@ var VisibilityContextMenu = ({
                     className: menuStyle,
                     style: submenuStyle,
                     children: [
-                      /* @__PURE__ */ jsxs15(
+                      /* @__PURE__ */ jsxs16(
                         "div",
                         {
                           style: { position: "relative" },
@@ -19791,7 +20170,7 @@ var VisibilityContextMenu = ({
                             setCopperPourOpacityOpen(false);
                           },
                           children: [
-                            /* @__PURE__ */ jsx22(
+                            /* @__PURE__ */ jsx23(
                               "button",
                               {
                                 type: "button",
@@ -19806,7 +20185,7 @@ var VisibilityContextMenu = ({
                                 children: "Hidden Layer Visibility \u25B8"
                               }
                             ),
-                            opacityOpen && /* @__PURE__ */ jsx22(
+                            opacityOpen && /* @__PURE__ */ jsx23(
                               "div",
                               {
                                 role: "menu",
@@ -19816,7 +20195,7 @@ var VisibilityContextMenu = ({
                                   minWidth: 80,
                                   ...submenuStyle
                                 },
-                                children: [0, 0.05, 0.1, 0.2, 0.4, 0.6, 0.8, 1].map((value) => /* @__PURE__ */ jsxs15(
+                                children: [0, 0.05, 0.1, 0.2, 0.4, 0.6, 0.8, 1].map((value) => /* @__PURE__ */ jsxs16(
                                   "button",
                                   {
                                     type: "button",
@@ -19828,7 +20207,7 @@ var VisibilityContextMenu = ({
                                       onClose();
                                     },
                                     children: [
-                                      /* @__PURE__ */ jsx22(
+                                      /* @__PURE__ */ jsx23(
                                         "span",
                                         {
                                           "aria-hidden": "true",
@@ -19846,7 +20225,7 @@ var VisibilityContextMenu = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsxs15(
+                      /* @__PURE__ */ jsxs16(
                         "div",
                         {
                           style: { position: "relative" },
@@ -19855,7 +20234,7 @@ var VisibilityContextMenu = ({
                             setOpacityOpen(false);
                           },
                           children: [
-                            /* @__PURE__ */ jsx22(
+                            /* @__PURE__ */ jsx23(
                               "button",
                               {
                                 type: "button",
@@ -19870,14 +20249,14 @@ var VisibilityContextMenu = ({
                                 children: "Copper Pour Visibility \u25B8"
                               }
                             ),
-                            copperPourOpacityOpen && /* @__PURE__ */ jsx22(
+                            copperPourOpacityOpen && /* @__PURE__ */ jsx23(
                               "div",
                               {
                                 role: "menu",
                                 "aria-label": "Copper Pour Visibility",
                                 className: menuStyle,
                                 style: { minWidth: 80, ...submenuStyle },
-                                children: [0, 0.05, 0.1, 0.2, 0.4, 0.6, 0.8, 1].map((value) => /* @__PURE__ */ jsxs15(
+                                children: [0, 0.05, 0.1, 0.2, 0.4, 0.6, 0.8, 1].map((value) => /* @__PURE__ */ jsxs16(
                                   "button",
                                   {
                                     type: "button",
@@ -19890,7 +20269,7 @@ var VisibilityContextMenu = ({
                                       onClose();
                                     },
                                     children: [
-                                      /* @__PURE__ */ jsx22(
+                                      /* @__PURE__ */ jsx23(
                                         "span",
                                         {
                                           "aria-hidden": "true",
@@ -19914,7 +20293,7 @@ var VisibilityContextMenu = ({
               ]
             }
           ),
-          engine && /* @__PURE__ */ jsxs15(
+          engine && /* @__PURE__ */ jsxs16(
             "div",
             {
               style: { position: "relative" },
@@ -19923,7 +20302,7 @@ var VisibilityContextMenu = ({
                 setVisibilityOpen(false);
               },
               children: [
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "button",
                   {
                     type: "button",
@@ -19938,14 +20317,14 @@ var VisibilityContextMenu = ({
                     children: "Rendering Engine \u25B8"
                   }
                 ),
-                rendererOpen && /* @__PURE__ */ jsx22(
+                rendererOpen && /* @__PURE__ */ jsx23(
                   "div",
                   {
                     role: "menu",
                     "aria-label": "Rendering Engine",
                     className: menuStyle,
                     style: submenuStyle,
-                    children: ["canvas", "webgpu"].map((renderer) => /* @__PURE__ */ jsxs15(
+                    children: ["canvas", "webgpu"].map((renderer) => /* @__PURE__ */ jsxs16(
                       "button",
                       {
                         type: "button",
@@ -19957,7 +20336,7 @@ var VisibilityContextMenu = ({
                           onClose();
                         },
                         children: [
-                          /* @__PURE__ */ jsx22(
+                          /* @__PURE__ */ jsx23(
                             "span",
                             {
                               "aria-hidden": "true",
@@ -19975,7 +20354,7 @@ var VisibilityContextMenu = ({
               ]
             }
           ),
-          component && onViewSchematicComponent && /* @__PURE__ */ jsxs15(
+          component && onViewSchematicComponent && /* @__PURE__ */ jsxs16(
             "button",
             {
               type: "button",
@@ -19991,7 +20370,7 @@ var VisibilityContextMenu = ({
                 });
               },
               children: [
-                /* @__PURE__ */ jsx22(
+                /* @__PURE__ */ jsx23(
                   "svg",
                   {
                     "aria-hidden": "true",
@@ -20004,7 +20383,7 @@ var VisibilityContextMenu = ({
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     style: { verticalAlign: "-1px", marginRight: 5 },
-                    children: /* @__PURE__ */ jsx22("path", { d: "M5 11 11 5M5 5h6v6" })
+                    children: /* @__PURE__ */ jsx23("path", { d: "M5 11 11 5M5 5h6v6" })
                   }
                 ),
                 component.refdes,
@@ -20012,7 +20391,7 @@ var VisibilityContextMenu = ({
               ]
             }
           ),
-          component?.manufacturer_part_number && /* @__PURE__ */ jsxs15(
+          component?.manufacturer_part_number && /* @__PURE__ */ jsxs16(
             "button",
             {
               type: "button",
@@ -20042,13 +20421,13 @@ var VisibilityContextMenu = ({
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: css3`
+      className: css4`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -20062,8 +20441,8 @@ var LayerButton = ({ name, selected, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx23("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx24(
           "span",
           {
             style: {
@@ -20084,10 +20463,10 @@ var CheckboxMenuItem = ({
   onClick
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: css3`
+      className: css4`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -20104,19 +20483,19 @@ var CheckboxMenuItem = ({
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx23("input", { type: "checkbox", checked, onChange: () => {
+        /* @__PURE__ */ jsx24("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx23("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx24("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
-      className: css3`
+      className: css4`
         margin-top: 2px;
         padding: 4px;
         padding-left: 8px;
@@ -20133,9 +20512,9 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx23("input", { type: "radio", checked, onChange: () => {
+        /* @__PURE__ */ jsx24("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx23("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx24("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -20143,6 +20522,7 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
 var ToolbarOverlay = ({
   children,
   elements,
+  onSearchComponent,
   onContextMenuOpenChange,
   getNetAtPoint,
   getComponentAtPoint,
@@ -20211,11 +20591,11 @@ var ToolbarOverlay = ({
     setHoveredErrorId: s.setHoveredErrorId,
     setFocusedErrorId: s.setFocusedErrorId
   }));
-  const [contextMenuPosition, setContextMenuPosition] = useState11(null);
-  const [contextGroups, setContextGroups] = useState11([]);
-  const [contextNetId, setContextNetId] = useState11();
-  const [contextNetDisplayName, setContextNetDisplayName] = useState11("Net");
-  const [contextComponent, setContextComponent] = useState11();
+  const [contextMenuPosition, setContextMenuPosition] = useState12(null);
+  const [contextGroups, setContextGroups] = useState12([]);
+  const [contextNetId, setContextNetId] = useState12();
+  const [contextNetDisplayName, setContextNetDisplayName] = useState12("Net");
+  const [contextComponent, setContextComponent] = useState12();
   const componentAtEvent = (event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     return getComponentAtPoint?.({
@@ -20223,7 +20603,7 @@ var ToolbarOverlay = ({
       y: event.clientY - rect.top
     });
   };
-  const pointerStart = useRef13(null);
+  const pointerStart = useRef14(null);
   const inEditMode = useGlobalStore((s) => s.in_edit_mode);
   const netAtEvent = (event) => {
     const rect = event.currentTarget.getBoundingClientRect();
@@ -20236,12 +20616,12 @@ var ToolbarOverlay = ({
     setContextMenuPosition(null);
     onContextMenuOpenChange?.(false);
   }, [onContextMenuOpenChange]);
-  const [isViewMenuOpen, setViewMenuOpen] = useState11(false);
-  const [isLayerMenuOpen, setLayerMenuOpen] = useState11(false);
-  const [isErrorsOpen, setErrorsOpen] = useState11(false);
-  const [measureToolArmed, setMeasureToolArmed] = useState11(false);
-  const [boundsToolArmed, setBoundsToolArmed] = useState11(false);
-  useEffect17(() => {
+  const [isViewMenuOpen, setViewMenuOpen] = useState12(false);
+  const [isLayerMenuOpen, setLayerMenuOpen] = useState12(false);
+  const [isErrorsOpen, setErrorsOpen] = useState12(false);
+  const [measureToolArmed, setMeasureToolArmed] = useState12(false);
+  const [boundsToolArmed, setBoundsToolArmed] = useState12(false);
+  useEffect18(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
     const armBounds = () => setBoundsToolArmed(true);
@@ -20257,13 +20637,13 @@ var ToolbarOverlay = ({
       window.removeEventListener("disarm-bounds-tool", disarmBounds);
     };
   }, []);
-  const availableLayers = useMemo12(
+  const availableLayers = useMemo13(
     () => getCopperLayerRefsFromElements(elements ?? []),
     [elements]
   );
   const processedLayers = availableLayers;
-  const hasRunInitialMouseCheck = useRef13(false);
-  const hotkeyBoundaryRef = useRef13(null);
+  const hasRunInitialMouseCheck = useRef14(false);
+  const hotkeyBoundaryRef = useRef14(null);
   const hotKeyCallbacks = {
     "1": availableLayers[0] ? () => selectLayer(availableLayers[0]) : () => {
     },
@@ -20370,7 +20750,7 @@ var ToolbarOverlay = ({
     },
     []
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: hotkeyBoundaryRef,
@@ -20427,7 +20807,7 @@ var ToolbarOverlay = ({
       onMouseMove: handleMouseMove,
       children: [
         children,
-        contextMenuPosition && /* @__PURE__ */ jsx23(
+        contextMenuPosition && /* @__PURE__ */ jsx24(
           VisibilityContextMenu,
           {
             position: contextMenuPosition,
@@ -20443,7 +20823,7 @@ var ToolbarOverlay = ({
             onExitXRayNet: xRayNetIds.length > 0 ? () => onXRayNetsChange?.([]) : void 0
           }
         ),
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           "div",
           {
             style: {
@@ -20464,10 +20844,11 @@ var ToolbarOverlay = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           "div",
           {
             "data-toolbar-overlay": true,
+            className: css4`&:focus-within { opacity: 1 !important; }`,
             onTouchStart: (e) => e.stopPropagation(),
             onTouchEnd: (e) => e.stopPropagation(),
             onTouchMove: (e) => e.stopPropagation(),
@@ -20495,7 +20876,7 @@ var ToolbarOverlay = ({
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs16(
+              /* @__PURE__ */ jsxs17(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -20506,10 +20887,10 @@ var ToolbarOverlay = ({
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs16("div", { children: [
+                    /* @__PURE__ */ jsxs17("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         "span",
                         {
                           style: {
@@ -20521,7 +20902,7 @@ var ToolbarOverlay = ({
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx23("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx23(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx24("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx24(
                       LayerButton,
                       {
                         name: layer,
@@ -20535,7 +20916,14 @@ var ToolbarOverlay = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              onSearchComponent && /* @__PURE__ */ jsx24(
+                ComponentSearch,
+                {
+                  elements: elements ?? [],
+                  onSelect: onSearchComponent
+                }
+              ),
+              /* @__PURE__ */ jsx24(
                 ToolbarErrorDropdown,
                 {
                   elements,
@@ -20547,44 +20935,44 @@ var ToolbarOverlay = ({
                   setFocusedErrorId
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs16("div", { children: [
+                  children: /* @__PURE__ */ jsxs17("div", { children: [
                     viewSettings.is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleMeasureToolClick,
-                  children: /* @__PURE__ */ jsx23("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx24("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: boundsToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleBoundsToolClick,
-                  children: /* @__PURE__ */ jsx23("div", { children: "Bounds" })
+                  children: /* @__PURE__ */ jsx24("div", { children: "Bounds" })
                 }
               ),
-              /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(
                 ToolbarButton,
                 {
                   "data-view-menu": true,
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs16("div", { children: [
-                    /* @__PURE__ */ jsxs16(
+                  children: /* @__PURE__ */ jsxs17("div", { children: [
+                    /* @__PURE__ */ jsxs17(
                       "div",
                       {
                         style: {
@@ -20594,7 +20982,7 @@ var ToolbarOverlay = ({
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx23(
+                          /* @__PURE__ */ jsx24(
                             "span",
                             {
                               style: {
@@ -20609,8 +20997,8 @@ var ToolbarOverlay = ({
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs16("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx23(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs17("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -20622,7 +21010,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -20634,7 +21022,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -20644,7 +21032,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Warnings",
@@ -20656,7 +21044,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -20668,7 +21056,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -20678,7 +21066,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -20688,7 +21076,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -20698,7 +21086,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -20710,7 +21098,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Notes",
@@ -20720,7 +21108,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -20732,7 +21120,7 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx23(
+                      /* @__PURE__ */ jsx24(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -20742,8 +21130,8 @@ var ToolbarOverlay = ({
                           }
                         }
                       ),
-                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs16("div", { style: { marginLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx23(
+                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs17("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx24(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -20753,7 +21141,7 @@ var ToolbarOverlay = ({
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx23(
+                        /* @__PURE__ */ jsx24(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -20786,20 +21174,20 @@ var getPcbWarningHighlightLabel = (warning) => {
 };
 
 // src/components/WarningGraphicsOverlay.tsx
-import { useEffect as useEffect18, useMemo as useMemo13, useRef as useRef14 } from "react";
-import { applyToPoint as applyToPoint21, identity as identity9 } from "transformation-matrix";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect19, useMemo as useMemo14, useRef as useRef15 } from "react";
+import { applyToPoint as applyToPoint22, identity as identity9 } from "transformation-matrix";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var WarningGraphicsOverlay = ({
   children,
   transform = identity9(),
   elements = []
 }) => {
   const [containerRef, { width, height }] = useMeasure_default();
-  const canvasRef = useRef14(null);
+  const canvasRef = useRef15(null);
   const isShowingDrcWarnings = useGlobalStore(
     (state) => state.is_showing_drc_warnings
   );
-  const { pcbComponentById, warnings } = useMemo13(() => {
+  const { pcbComponentById, warnings } = useMemo14(() => {
     const pcbComponentById2 = /* @__PURE__ */ new Map();
     const warnings2 = [];
     for (const element of elements) {
@@ -20811,7 +21199,7 @@ var WarningGraphicsOverlay = ({
     }
     return { pcbComponentById: pcbComponentById2, warnings: warnings2 };
   }, [elements]);
-  useEffect18(() => {
+  useEffect19(() => {
     const canvas = canvasRef.current;
     if (!canvas || !width || !height) return;
     canvas.width = width;
@@ -20825,7 +21213,7 @@ var WarningGraphicsOverlay = ({
       const component = pcbComponentById.get(warning.pcb_component_id);
       if (!component) return;
       const { width: width2, height: height2, center } = component;
-      const transformedCenter = applyToPoint21(transform, center);
+      const transformedCenter = applyToPoint22(transform, center);
       const scaledWidth = width2 * Math.abs(transform.a);
       const scaledHeight = height2 * Math.abs(transform.d);
       const boxPadding = 0.1 * Math.abs(transform.a);
@@ -20863,7 +21251,7 @@ var WarningGraphicsOverlay = ({
     width
   ]);
   if (!isShowingDrcWarnings) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       "div",
       {
         ref: containerRef,
@@ -20872,14 +21260,14 @@ var WarningGraphicsOverlay = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "canvas",
           {
             ref: canvasRef,
@@ -20904,20 +21292,20 @@ var createWebGpuWorker = async () => {
 };
 
 // src/components/WebGpuElementsRenderer.tsx
-import { useEffect as useEffect19, useLayoutEffect as useLayoutEffect3, useMemo as useMemo14, useRef as useRef15, useState as useState12 } from "react";
+import { useEffect as useEffect20, useLayoutEffect as useLayoutEffect3, useMemo as useMemo15, useRef as useRef16, useState as useState13 } from "react";
 import { SuperGrid as SuperGrid2, toMMSI as toMMSI2 } from "react-supergrid";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function WebGpuElementsRenderer(props) {
   const { elements, primitives, transform, width = 500, height = 500 } = props;
-  const holder = useRef15(null);
-  const workerRef = useRef15(void 0);
-  const onRenderCompleteRef = useRef15(props.onRenderComplete);
-  const sceneRef = useRef15({ elements, sceneGeneration: 0 });
-  const latestSubmittedSceneGenerationRef = useRef15(0);
-  const completedSceneGenerationRef = useRef15(0);
-  const ready = useRef15(false);
-  const [supportsXRayNet, setSupportsXRayNet] = useState12(null);
-  const [failure, setFailure] = useState12();
+  const holder = useRef16(null);
+  const workerRef = useRef16(void 0);
+  const onRenderCompleteRef = useRef16(props.onRenderComplete);
+  const sceneRef = useRef16({ elements, sceneGeneration: 0 });
+  const latestSubmittedSceneGenerationRef = useRef16(0);
+  const completedSceneGenerationRef = useRef16(0);
+  const ready = useRef16(false);
+  const [supportsXRayNet, setSupportsXRayNet] = useState13(null);
+  const [failure, setFailure] = useState13();
   const selectedLayer = useGlobalStore((s) => s.selected_layer);
   const hiddenLayerOpacity = useGlobalStore((s) => s.hidden_layer_opacity);
   const copperPourOpacity = useGlobalStore((s) => s.copper_pour_opacity);
@@ -20929,7 +21317,7 @@ function WebGpuElementsRenderer(props) {
   );
   const showPcbNotes = useGlobalStore((s) => s.is_showing_pcb_notes);
   const showCourtyards = useGlobalStore((s) => s.is_showing_courtyards);
-  const highlightedElementIds = useMemo14(
+  const highlightedElementIds = useMemo15(
     () => [
       .../* @__PURE__ */ new Set([
         ...props.highlightedCopperPourIds ?? [],
@@ -20943,13 +21331,13 @@ function WebGpuElementsRenderer(props) {
     ],
     [primitives, props.highlightedCopperPourIds]
   );
-  const xRayElementIds = useMemo14(
+  const xRayElementIds = useMemo15(
     () => (props.xRayElements ?? []).map(
       (element) => element[`${element.type}_id`]
     ),
     [props.xRayElements]
   );
-  const options = useMemo14(
+  const options = useMemo15(
     () => ({
       selectedLayer,
       hiddenLayerOpacity,
@@ -20977,7 +21365,7 @@ function WebGpuElementsRenderer(props) {
       xRayElementIds
     ]
   );
-  const viewRef = useRef15(void 0);
+  const viewRef = useRef16(void 0);
   if (transform) {
     const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
     viewRef.current = {
@@ -21009,7 +21397,7 @@ function WebGpuElementsRenderer(props) {
       sceneGeneration
     });
   }, [elements]);
-  useEffect19(() => {
+  useEffect20(() => {
     let disposed = false, failed = false, worker;
     const canvas = document.createElement("canvas");
     canvas.className = "pcb-webgpu-canvas";
@@ -21096,14 +21484,14 @@ function WebGpuElementsRenderer(props) {
       canvas.remove();
     };
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     if (ready.current && viewRef.current)
       workerRef.current?.postMessage(viewRef.current);
   }, [transform, width, height, options]);
   const xRayUnavailable = Boolean(
     props.xRayElements && supportsXRayNet === false
   );
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       ref: holder,
@@ -21116,18 +21504,18 @@ function WebGpuElementsRenderer(props) {
         position: "relative",
         overflow: "hidden"
       },
-      children: failure ? /* @__PURE__ */ jsxs18(
+      children: failure ? /* @__PURE__ */ jsxs19(
         "div",
         {
           role: "alert",
           style: { padding: 16, color: "white", position: "relative" },
           children: [
-            /* @__PURE__ */ jsx25("strong", { children: "WebGPU rendering failed" }),
-            /* @__PURE__ */ jsx25("div", { children: failure })
+            /* @__PURE__ */ jsx26("strong", { children: "WebGPU rendering failed" }),
+            /* @__PURE__ */ jsx26("div", { children: failure })
           ]
         }
-      ) : /* @__PURE__ */ jsxs18(Fragment5, { children: [
-        /* @__PURE__ */ jsx25(
+      ) : /* @__PURE__ */ jsxs19(Fragment5, { children: [
+        /* @__PURE__ */ jsx26(
           SuperGrid2,
           {
             textColor: "rgba(0,255,0,0.8)",
@@ -21140,7 +21528,7 @@ function WebGpuElementsRenderer(props) {
             stringifyCoord: (x, y, z) => `${toMMSI2(x, z)}, ${toMMSI2(y, z)}`
           }
         ),
-        xRayUnavailable && /* @__PURE__ */ jsx25(
+        xRayUnavailable && /* @__PURE__ */ jsx26(
           "div",
           {
             role: "status",
@@ -21154,14 +21542,14 @@ function WebGpuElementsRenderer(props) {
 }
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function getHitTestCandidates({
   primitiveSpatialIndex,
   screenPoint,
   transform
 }) {
   if (!transform) return null;
-  const realWorldPoint = applyToPoint22(inverse6(transform), screenPoint);
+  const realWorldPoint = applyToPoint23(inverse6(transform), screenPoint);
   return {
     primitives: getPrimitivesNearPoint({
       point: realWorldPoint,
@@ -21187,23 +21575,23 @@ var CanvasElementsRenderer = (props) => {
     selectedLayer: state.selected_layer
   }));
   const activeErrorId = focusedErrorId ?? hoveredErrorId;
-  const elementsToRender = useMemo15(
+  const elementsToRender = useMemo16(
     () => isShowingCopperPours ? elements : elements.filter((elm) => elm.type !== "pcb_copper_pour"),
     [elements, isShowingCopperPours]
   );
-  const primitivesWithoutInteractionMetadata = useMemo15(() => {
+  const primitivesWithoutInteractionMetadata = useMemo16(() => {
     const metadataIndex = createPrimitiveMetadataIndex(elements);
     return elementsToRender.flatMap(
       (element) => convertElementToPrimitives(element, elements, metadataIndex)
     );
   }, [elementsToRender, elements]);
-  const connectivityMap = useMemo15(
+  const connectivityMap = useMemo16(
     () => getFullConnectivityMapFromCircuitJson(elements),
     [elements]
   );
-  const [xRayNetIds, setXRayNetIds] = useState13([]);
-  useEffect20(() => setXRayNetIds([]), [connectivityMap]);
-  useEffect20(() => {
+  const [xRayNetIds, setXRayNetIds] = useState14([]);
+  useEffect21(() => setXRayNetIds([]), [connectivityMap]);
+  useEffect21(() => {
     if (xRayNetIds.length === 0) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") setXRayNetIds([]);
@@ -21211,7 +21599,7 @@ var CanvasElementsRenderer = (props) => {
     window.addEventListener("keydown", onKeyDown, true);
     return () => window.removeEventListener("keydown", onKeyDown, true);
   }, [xRayNetIds.length]);
-  const xRayElements = useMemo15(
+  const xRayElements = useMemo16(
     () => xRayNetIds.length > 0 ? elementsToRender.filter(
       (element) => isXRayCopper(element) && (element.type !== "pcb_copper_pour" || copperPourOpacity > 0) && xRayNetIds.includes(
         getElementNetId(element, connectivityMap) ?? ""
@@ -21219,14 +21607,14 @@ var CanvasElementsRenderer = (props) => {
     ) : void 0,
     [elementsToRender, connectivityMap, xRayNetIds, copperPourOpacity]
   );
-  const hoverPrimitives = useMemo15(() => {
+  const hoverPrimitives = useMemo16(() => {
     if (!xRayElements) return primitivesWithoutInteractionMetadata;
     const selectedElements = new Set(xRayElements);
     return primitivesWithoutInteractionMetadata.filter(
       (primitive) => (primitive._element?.type === "pcb_smtpad" || primitive._element?.type === "pcb_plated_hole") && selectedElements.has(primitive._element)
     );
   }, [primitivesWithoutInteractionMetadata, xRayElements]);
-  const primitiveSpatialIndex = useMemo15(
+  const primitiveSpatialIndex = useMemo16(
     () => createPrimitiveSpatialIndex(primitivesWithoutInteractionMetadata),
     [primitivesWithoutInteractionMetadata]
   );
@@ -21265,7 +21653,7 @@ var CanvasElementsRenderer = (props) => {
     if (isShowingCopperPours && copperPourOpacity > 0) {
       for (const pour of getCopperPoursUnderPoint(
         elementsToRender,
-        applyToPoint22(inverse6(transform), point2),
+        applyToPoint23(inverse6(transform), point2),
         selectedLayer
       ).reverse()) {
         const net = getElementNetId(pour, connectivityMap);
@@ -21295,11 +21683,11 @@ var CanvasElementsRenderer = (props) => {
       if (net) return describeNet(net, primitive._element);
     }
   };
-  const [hoverState, setHoverState] = useState13({
+  const [hoverState, setHoverState] = useState14({
     drawingObjectIdsWithMouseOver: /* @__PURE__ */ new Set(),
     primitiveIdsInMousedOverNet: []
   });
-  const highlightedCopperPourIds = useMemo15(
+  const highlightedCopperPourIds = useMemo16(
     () => xRayNetIds.length > 0 ? [] : getHighlightedCopperPourIds(
       elementsToRender,
       hoverState.primitiveIdsInMousedOverNet,
@@ -21307,14 +21695,14 @@ var CanvasElementsRenderer = (props) => {
     ),
     [elementsToRender, hoverState, connectivityMap, xRayNetIds]
   );
-  const [hoveredComponentIds, setHoveredComponentIds] = useState13([]);
-  const currentTransformRef = useRef16(transform ?? null);
-  const zoomAnimationFrameRef = useRef16(null);
-  const elementIndexes = useMemo15(
+  const [hoveredComponentIds, setHoveredComponentIds] = useState14([]);
+  const currentTransformRef = useRef17(transform ?? null);
+  const zoomAnimationFrameRef = useRef17(null);
+  const elementIndexes = useMemo16(
     () => buildErrorPreviewElementIndexes(elements),
     [elements]
   );
-  const errorRelatedIds = useMemo15(() => {
+  const errorRelatedIds = useMemo16(() => {
     if (!activeErrorId) return [];
     const errorElements = elements.filter(
       (el) => el.type.includes("error")
@@ -21325,17 +21713,17 @@ var CanvasElementsRenderer = (props) => {
     if (!activeError) return [];
     return getRelatedIdsForError(activeError);
   }, [activeErrorId, elements]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (transform) {
       currentTransformRef.current = transform;
     }
   }, [transform]);
-  useEffect20(() => {
+  useEffect21(() => {
     return () => {
       cancelTransformAnimation(zoomAnimationFrameRef.current);
     };
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!props.width || !props.height || !props.setTransform || !focusedErrorId)
       return;
     const focusedError = findErrorElementById(elements, focusedErrorId);
@@ -21373,7 +21761,7 @@ var CanvasElementsRenderer = (props) => {
     props.setTransform,
     props.width
   ]);
-  const primitives = useMemo15(() => {
+  const primitives = useMemo16(() => {
     if (xRayNetIds.length > 0) return primitivesWithoutInteractionMetadata;
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
@@ -21423,7 +21811,7 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     MouseElementTracker,
     {
       elements: elementsToRender,
@@ -21432,7 +21820,7 @@ var CanvasElementsRenderer = (props) => {
       selectedLayer,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
       children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           FocusedPcbComponentOverlay,
           {
             focusRequest: props.focusedPcbComponent,
@@ -21440,7 +21828,7 @@ var CanvasElementsRenderer = (props) => {
             transform
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           EditPlacementOverlay,
           {
             disabled: !props.allowEditing,
@@ -21449,7 +21837,7 @@ var CanvasElementsRenderer = (props) => {
             cancelPanDrag: props.cancelPanDrag,
             onCreateEditEvent: props.onCreateEditEvent,
             onModifyEditEvent: props.onModifyEditEvent,
-            children: /* @__PURE__ */ jsx26(
+            children: /* @__PURE__ */ jsx27(
               DimensionOverlay,
               {
                 transform,
@@ -21457,39 +21845,40 @@ var CanvasElementsRenderer = (props) => {
                 primitives: primitivesWithoutInteractionMetadata,
                 onBoundsSelected: props.onBoundsSelected,
                 cancelPanDrag: props.cancelPanDrag,
-                children: /* @__PURE__ */ jsx26(
+                children: /* @__PURE__ */ jsx27(
                   ToolbarOverlay,
                   {
                     elements,
+                    onSearchComponent: props.onSearchComponent,
                     getNetAtPoint,
                     xRayNetIds,
                     onXRayNetsChange: setXRayNetIds,
                     onContextMenuOpenChange: props.onContextMenuOpenChange,
                     getComponentAtPoint,
                     onViewSchematicComponent: props.onViewSchematicComponent,
-                    children: /* @__PURE__ */ jsx26(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx26(
+                    children: /* @__PURE__ */ jsx27(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx27(
                       RatsNestOverlay,
                       {
                         transform,
                         soup: elements,
                         connectivityMap,
-                        children: /* @__PURE__ */ jsx26(
+                        children: /* @__PURE__ */ jsx27(
                           PcbGroupOverlay,
                           {
                             transform,
                             elements,
                             hoveredComponentIds,
-                            children: /* @__PURE__ */ jsx26(
+                            children: /* @__PURE__ */ jsx27(
                               DebugGraphicsOverlay,
                               {
                                 transform,
                                 debugGraphics: props.debugGraphics,
-                                children: /* @__PURE__ */ jsx26(
+                                children: /* @__PURE__ */ jsx27(
                                   WarningGraphicsOverlay,
                                   {
                                     transform,
                                     elements,
-                                    children: props.renderer === "canvas" ? /* @__PURE__ */ jsx26(
+                                    children: props.renderer === "canvas" ? /* @__PURE__ */ jsx27(
                                       CanvasPrimitiveRenderer,
                                       {
                                         transform,
@@ -21502,7 +21891,7 @@ var CanvasElementsRenderer = (props) => {
                                         grid: props.grid,
                                         onRenderComplete: props.onRenderComplete
                                       }
-                                    ) : /* @__PURE__ */ jsx26(
+                                    ) : /* @__PURE__ */ jsx27(
                                       WebGpuElementsRenderer,
                                       {
                                         highlightedCopperPourIds,
@@ -21536,11 +21925,11 @@ var CanvasElementsRenderer = (props) => {
 };
 
 // src/hooks/useAnimationFrameTransformState.ts
-import { useCallback as useCallback12, useEffect as useEffect21, useRef as useRef17, useState as useState14 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect22, useRef as useRef18, useState as useState15 } from "react";
 function useAnimationFrameTransformState(initialTransform) {
-  const [transform, setTransformState] = useState14(initialTransform);
-  const animationFrameIdRef = useRef17(null);
-  const pendingTransformRef = useRef17(null);
+  const [transform, setTransformState] = useState15(initialTransform);
+  const animationFrameIdRef = useRef18(null);
+  const pendingTransformRef = useRef18(null);
   const setTransform = useCallback12((nextTransform) => {
     pendingTransformRef.current = nextTransform;
     if (animationFrameIdRef.current !== null) return;
@@ -21551,7 +21940,7 @@ function useAnimationFrameTransformState(initialTransform) {
       pendingTransformRef.current = null;
     });
   }, []);
-  useEffect21(
+  useEffect22(
     () => () => {
       if (animationFrameIdRef.current !== null) {
         cancelAnimationFrame(animationFrameIdRef.current);
@@ -21562,9 +21951,66 @@ function useAnimationFrameTransformState(initialTransform) {
   return { setTransform, transform };
 }
 
+// src/hooks/usePcbComponentSearchFocus.ts
+import { useCallback as useCallback13, useEffect as useEffect23, useRef as useRef19 } from "react";
+import { compose as compose12, scale as scale6, translate as translate15 } from "transformation-matrix";
+var usePcbComponentSearchFocus = ({
+  transform,
+  setTransform,
+  focusedPcbComponent,
+  setFocusedPcbComponent,
+  circuitJson
+}) => {
+  const animationFrameRef = useRef19(null);
+  const searchRequestRef = useRef19(null);
+  const cancelSearchAnimation = useCallback13(() => {
+    cancelTransformAnimation(animationFrameRef.current);
+    animationFrameRef.current = null;
+  }, []);
+  useEffect23(() => cancelSearchAnimation, [cancelSearchAnimation]);
+  useEffect23(() => {
+    cancelSearchAnimation();
+  }, [circuitJson, cancelSearchAnimation]);
+  useEffect23(() => {
+    if (!focusedPcbComponent || focusedPcbComponent !== searchRequestRef.current)
+      return;
+    const timeout = window.setTimeout(() => setFocusedPcbComponent(null), 3e3);
+    return () => window.clearTimeout(timeout);
+  }, [focusedPcbComponent, setFocusedPcbComponent]);
+  const focusComponent = useCallback13(
+    (focus, width, height) => {
+      const target = compose12(
+        translate15(width / 2, height / 2),
+        scale6(0.5, 0.5),
+        translate15(-width / 2, -height / 2),
+        focus.transform
+      );
+      cancelSearchAnimation();
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        setTransform(target);
+      } else {
+        animateTransform({
+          startTransform: transform,
+          endTransform: target,
+          durationMs: 450,
+          onUpdate: setTransform,
+          setAnimationFrameId: (id) => {
+            animationFrameRef.current = id;
+          }
+        });
+      }
+      const request = { pcbComponentId: focus.component.pcb_component_id };
+      searchRequestRef.current = request;
+      setFocusedPcbComponent(request);
+    },
+    [transform, setTransform, cancelSearchAnimation, setFocusedPcbComponent]
+  );
+  return { focusComponent, cancelSearchAnimation };
+};
+
 // src/PCBViewer.tsx
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
-var defaultTransform = compose11(translate15(400, 300), scale6(40, -40));
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var defaultTransform = compose13(translate16(400, 300), scale7(40, -40));
 var getPreferredRenderer = () => {
   const stored = getStoredString(STORAGE_KEYS.RENDERING_ENGINE, "webgpu");
   return stored === "canvas" || stored === "webgpu" ? stored : "webgpu";
@@ -21586,30 +22032,30 @@ var PCBViewer = ({
   disablePcbGroups = false,
   controller
 }) => {
-  const [activeRenderer, setActiveRenderer] = useState15(
+  const [activeRenderer, setActiveRenderer] = useState16(
     () => renderer ?? getPreferredRenderer()
   );
-  const [focusedPcbComponent, setFocusedPcbComponent] = useState15(null);
-  useEffect22(
+  const [focusedPcbComponent, setFocusedPcbComponent] = useState16(null);
+  useEffect24(
     () => setActiveRenderer(renderer ?? getPreferredRenderer()),
     [renderer]
   );
-  const setPreferredRenderer = useCallback13((engine) => {
+  const setPreferredRenderer = useCallback14((engine) => {
     setActiveRenderer(engine);
     setStoredString(STORAGE_KEYS.RENDERING_ENGINE, engine);
   }, []);
-  const renderingEngine = useMemo16(
+  const renderingEngine = useMemo17(
     () => ({ renderer: activeRenderer, setRenderer: setPreferredRenderer }),
     [activeRenderer, setPreferredRenderer]
   );
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState15(
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState16(
     !clickToInteractEnabled
   );
-  const [isContextMenuOpen, setIsContextMenuOpen] = useState15(false);
-  const contextMenuOpenRef = useRef18(false);
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState16(false);
+  const contextMenuOpenRef = useRef20(false);
   const [ref, refDimensions] = useMeasure_default();
   const { transform, setTransform: setTransformOnAnimationFrame } = useAnimationFrameTransformState(defaultTransform);
-  const shouldAllowCanvasInteraction = useCallback13(
+  const shouldAllowCanvasInteraction = useCallback14(
     (event) => {
       if (contextMenuOpenRef.current) return false;
       if (event instanceof MouseEvent && (event.button === 2 || (event.buttons & 2) !== 0))
@@ -21622,7 +22068,7 @@ var PCBViewer = ({
   );
   const {
     ref: transformRef,
-    setTransform,
+    setTransform: setMouseTransform,
     cancelDrag: cancelPanDrag
   } = src_default({
     transform,
@@ -21630,7 +22076,21 @@ var PCBViewer = ({
     enabled: isInteractionEnabled && !isContextMenuOpen,
     shouldDrag: shouldAllowCanvasInteraction
   });
-  const onContextMenuOpenChange = useCallback13(
+  const { focusComponent, cancelSearchAnimation } = usePcbComponentSearchFocus({
+    transform,
+    setTransform: setMouseTransform,
+    focusedPcbComponent,
+    setFocusedPcbComponent,
+    circuitJson
+  });
+  const setTransform = useCallback14(
+    (next) => {
+      cancelSearchAnimation();
+      setMouseTransform(next);
+    },
+    [cancelSearchAnimation, setMouseTransform]
+  );
+  const onContextMenuOpenChange = useCallback14(
     (open) => {
       contextMenuOpenRef.current = open;
       if (open) cancelPanDrag();
@@ -21638,11 +22098,11 @@ var PCBViewer = ({
     },
     [cancelPanDrag]
   );
-  let [editEvents, setEditEvents] = useState15([]);
+  let [editEvents, setEditEvents] = useState16([]);
   editEvents = editEventsProp ?? editEvents;
-  const initialRenderCompleted = useRef18(false);
-  const touchStartRef = useRef18(null);
-  const circuitJsonKey = useMemo16(
+  const initialRenderCompleted = useRef20(false);
+  const touchStartRef = useRef20(null);
+  const circuitJsonKey = useMemo17(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
   );
@@ -21659,15 +22119,15 @@ var PCBViewer = ({
       (elmBounds.height ?? 0) / height2,
       100
     ) * 0.75;
-    const targetTransform = compose11(
-      translate15((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-      scale6(scaleFactor, -scaleFactor, 0, 0),
-      translate15(-center.x, -center.y)
+    const targetTransform = compose13(
+      translate16((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+      scale7(scaleFactor, -scaleFactor, 0, 0),
+      translate16(-center.x, -center.y)
     );
     setTransform(targetTransform);
     return;
   };
-  useEffect22(() => {
+  useEffect24(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -21676,23 +22136,23 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  useEffect22(() => {
+  useEffect24(() => {
     if (initialRenderCompleted.current === true) {
       resetTransform();
     }
   }, [boardSizeKey]);
-  const pcbElmsPreEdit = useMemo16(() => {
+  const pcbElmsPreEdit = useMemo17(() => {
     return circuitJson?.filter(
       (e) => e.type.startsWith("pcb_") || e.type.startsWith("source_")
     ) ?? [];
-  }, [circuitJsonKey]);
-  const elements = useMemo16(() => {
+  }, [circuitJson, circuitJsonKey]);
+  const elements = useMemo17(() => {
     return applyEditEvents({
       circuitJson: pcbElmsPreEdit,
       editEvents
     });
   }, [pcbElmsPreEdit, editEvents]);
-  useEffect22(() => {
+  useEffect24(() => {
     const request = controller?.focusRequest;
     if (!request || !refDimensions.width || !height || !elements.length) return;
     const focus = getPcbComponentFocus(
@@ -21715,6 +22175,21 @@ var PCBViewer = ({
     cancelPanDrag,
     setTransform
   ]);
+  const focusSearchComponent = useCallback14(
+    (pcbComponentId) => {
+      const width = refDimensions.width;
+      const focus = getPcbComponentFocus(
+        elements,
+        pcbComponentId,
+        width,
+        height
+      );
+      if (!focus) return;
+      cancelPanDrag();
+      focusComponent(focus, width, height);
+    },
+    [elements, refDimensions.width, height, cancelPanDrag, focusComponent]
+  );
   const onCreateEditEvent = (event) => {
     setEditEvents([...editEvents, event]);
     onEditEventsChanged?.([...editEvents, event]);
@@ -21726,27 +22201,35 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  const mergedInitialState = useMemo16(
+  const mergedInitialState = useMemo17(
     () => ({
       ...initialState,
       ...disablePcbGroups && { is_showing_pcb_groups: false }
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsx27(RenderingEngineContext.Provider, { value: renderingEngine, children: /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx28(RenderingEngineContext.Provider, { value: renderingEngine, children: /* @__PURE__ */ jsxs21(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
+      onPointerDownCapture: (event) => {
+        if (!event.target.closest("[data-toolbar-overlay]"))
+          cancelSearchAnimation();
+      },
+      onWheelCapture: (event) => {
+        if (!event.target.closest("[data-toolbar-overlay]"))
+          cancelSearchAnimation();
+      },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx27("div", { ref, children: /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsx28("div", { ref, children: /* @__PURE__ */ jsxs21(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28(
                 CanvasElementsRenderer,
                 {
                   renderer: activeRenderer,
@@ -21759,6 +22242,7 @@ var PCBViewer = ({
                   onBoundsSelected,
                   onViewSchematicComponent,
                   focusedPcbComponent,
+                  onSearchComponent: focusSearchComponent,
                   cancelPanDrag,
                   onContextMenuOpenChange,
                   onCreateEditEvent,
@@ -21777,11 +22261,11 @@ var PCBViewer = ({
                   debugGraphics
                 }
               ),
-              /* @__PURE__ */ jsx27(ToastContainer, {})
+              /* @__PURE__ */ jsx28(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx27(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx28(
           "div",
           {
             onClick: () => {
@@ -21818,7 +22302,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(
               "div",
               {
                 style: {
@@ -21840,19 +22324,19 @@ var PCBViewer = ({
 };
 
 // src/hooks/usePcbViewerController.ts
-import { useCallback as useCallback14, useMemo as useMemo17, useState as useState16 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo18, useState as useState17 } from "react";
 var usePcbViewerController = () => {
-  const [focusRequest, setFocusRequest] = useState16(null);
-  const focusPcbComponent = useCallback14((pcbComponentId) => {
+  const [focusRequest, setFocusRequest] = useState17(null);
+  const focusPcbComponent = useCallback15((pcbComponentId) => {
     setFocusRequest({ pcbComponentId });
   }, []);
-  const onFocusRequestHandled = useCallback14(
+  const onFocusRequestHandled = useCallback15(
     (request) => {
       setFocusRequest((current) => current === request ? null : current);
     },
     []
   );
-  const controller = useMemo17(
+  const controller = useMemo18(
     () => ({ focusRequest, onFocusRequestHandled }),
     [focusRequest, onFocusRequestHandled]
   );