@tscircuit/pcb-viewer 1.11.365 → 1.11.366

package/dist/index.js

@@ -6679,6 +6679,7 @@ var createStore = (initialState = {}, disablePcbGroups = false) => createZustand
       DEFAULT_PCB_GROUP_VIEW_MODE
     ),
     hovered_error_id: null,
+    focused_error_id: null,
     ...initialState,
     selectLayer: (layer) => set({ selected_layer: layer }),
     setEditMode: (mode) => set({
@@ -6735,7 +6736,8 @@ var createStore = (initialState = {}, disablePcbGroups = false) => createZustand
       setStoredString(STORAGE_KEYS.PCB_GROUP_VIEW_MODE, mode);
       set({ pcb_group_view_mode: mode });
     },
-    setHoveredErrorId: (errorId) => set({ hovered_error_id: errorId })
+    setHoveredErrorId: (errorId) => set({ hovered_error_id: errorId }),
+    setFocusedErrorId: (errorId) => set({ focused_error_id: errorId })
   })
 );
 var useGlobalStore = (s) => {
@@ -6788,7 +6790,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useCallback as useCallback11, useEffect as useEffect17, useMemo as useMemo9, useRef as useRef14, useState as useState13 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect19, useMemo as useMemo9, useRef as useRef16, useState as useState13 } from "react";
 
 // node_modules/react-use/esm/useMountedState.js
 import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
@@ -6927,7 +6929,7 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
 };
 
 // src/PCBViewer.tsx
-import { compose as compose7, scale as scale5, translate as translate11 } from "transformation-matrix";
+import { compose as compose8, scale as scale6, translate as translate12 } from "transformation-matrix";
 
 // node_modules/use-mouse-matrix-transform/dist/chunk-TGYMZPTI.js
 import { compose, translate as translate5, scale } from "transformation-matrix";
@@ -7406,15 +7408,19 @@ function addInteractionMetadataToPrimitives({
   const newPrimitives = [];
   for (const primitive of primitivesWithoutInteractionMetadata) {
     const newPrimitive = { ...primitive };
+    const primitiveElement = primitive._element;
+    const parentComponent = primitive._parent_pcb_component;
     if (primitive?.layer === "drill") {
       newPrimitive.is_in_highlighted_net = false;
       newPrimitive.is_mouse_over = false;
     } else if (drawingObjectIdsWithMouseOver.has(primitive._pcb_drawing_object_id)) {
       newPrimitive.is_mouse_over = true;
-    } else if (primitive._element && ("pcb_trace_id" in primitive._element && primitiveIdsInMousedOverNet.includes(
-      primitive._element.pcb_trace_id
-    ) || "pcb_port_id" in primitive._element && primitiveIdsInMousedOverNet.includes(
-      primitive._element.pcb_port_id
+    } else if (primitiveElement && ("pcb_trace_id" in primitiveElement && primitiveIdsInMousedOverNet.includes(primitiveElement.pcb_trace_id) || "pcb_port_id" in primitiveElement && primitiveIdsInMousedOverNet.includes(
+      primitiveElement.pcb_port_id
+    ) || "pcb_via_id" in primitiveElement && primitiveIdsInMousedOverNet.includes(primitiveElement.pcb_via_id) || "pcb_component_id" in primitiveElement && primitiveIdsInMousedOverNet.includes(
+      primitiveElement.pcb_component_id
+    ) || parentComponent && "pcb_component_id" in parentComponent && primitiveIdsInMousedOverNet.includes(
+      parentComponent.pcb_component_id
     ))) {
       newPrimitive.is_in_highlighted_net = true;
     } else {
@@ -7426,8 +7432,399 @@ function addInteractionMetadataToPrimitives({
   return newPrimitives;
 }
 
+// src/lib/util/get-error-id.ts
+var getErrorId = (error, index) => {
+  const explicitIdKeys = [
+    "pcb_trace_error_id",
+    "pcb_via_clearance_error_id",
+    "pcb_component_outside_board_error_id",
+    "source_failed_to_create_component_error_id",
+    "pcb_error_id"
+  ];
+  for (const key of explicitIdKeys) {
+    if (typeof error?.[key] === "string" && error[key].length > 0) {
+      return error[key];
+    }
+  }
+  for (const [key, value] of Object.entries(error ?? {})) {
+    if (key.endsWith("_error_id") && typeof value === "string" && value.length > 0) {
+      return value;
+    }
+  }
+  return `error_${index}_${error?.error_type}_${error?.message?.slice(0, 20)}`;
+};
+var findErrorElementById = (elements, errorId) => {
+  if (!errorId) return null;
+  return elements.find((element, index) => {
+    if (!element.type?.includes("error")) return false;
+    return getErrorId(element, index) === errorId;
+  }) ?? null;
+};
+
+// src/lib/util/error-preview.ts
+import {
+  getBoundsFromPoints
+} from "@tscircuit/math-utils";
+import { compose as compose3, scale as scale3, translate as translate7 } from "transformation-matrix";
+var buildErrorPreviewElementIndexes = (elements) => {
+  const tracesById = /* @__PURE__ */ new Map();
+  const portsById = /* @__PURE__ */ new Map();
+  const viasById = /* @__PURE__ */ new Map();
+  const componentsById = /* @__PURE__ */ new Map();
+  const boardsById = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    if (element.type === "pcb_trace" && element.pcb_trace_id) {
+      tracesById.set(element.pcb_trace_id, element);
+    } else if (element.type === "pcb_port" && element.pcb_port_id) {
+      portsById.set(element.pcb_port_id, element);
+    } else if (element.type === "pcb_via" && element.pcb_via_id) {
+      viasById.set(element.pcb_via_id, element);
+    } else if (element.type === "pcb_component" && element.pcb_component_id) {
+      componentsById.set(element.pcb_component_id, element);
+    } else if (element.type === "pcb_board" && element.pcb_board_id) {
+      boardsById.set(element.pcb_board_id, element);
+    }
+  }
+  return {
+    tracesById,
+    portsById,
+    viasById,
+    componentsById,
+    boardsById
+  };
+};
+var mergeBounds2 = (existing, next) => {
+  if (!next) return existing;
+  if (!existing) return next;
+  return {
+    minX: Math.min(existing.minX, next.minX),
+    maxX: Math.max(existing.maxX, next.maxX),
+    minY: Math.min(existing.minY, next.minY),
+    maxY: Math.max(existing.maxY, next.maxY)
+  };
+};
+var createBoundsFromCenter = (center, radius = 0.45) => ({
+  minX: center.x - radius,
+  maxX: center.x + radius,
+  minY: center.y - radius,
+  maxY: center.y + radius
+});
+var createBoundsFromRoute = (route) => {
+  if (route.length === 0) return null;
+  let bounds = null;
+  for (const point of route) {
+    const radius = Math.max((point.width ?? 0.2) / 2, 0.3);
+    bounds = mergeBounds2(bounds, createBoundsFromCenter(point, radius));
+  }
+  return bounds;
+};
+var createBoundsFromComponent = (component) => {
+  if (!component?.center) return null;
+  const width = Math.max(component.width ?? 0, 1.2);
+  const height = Math.max(component.height ?? 0, 1.2);
+  return {
+    minX: component.center.x - width / 2,
+    maxX: component.center.x + width / 2,
+    minY: component.center.y - height / 2,
+    maxY: component.center.y + height / 2
+  };
+};
+var createBoardBounds = (board) => {
+  if (!board?.center || typeof board.width !== "number" || typeof board.height !== "number") {
+    return null;
+  }
+  return {
+    minX: board.center.x - board.width / 2,
+    maxX: board.center.x + board.width / 2,
+    minY: board.center.y - board.height / 2,
+    maxY: board.center.y + board.height / 2
+  };
+};
+var expandBounds = (bounds, padding) => ({
+  minX: bounds.minX - padding,
+  maxX: bounds.maxX + padding,
+  minY: bounds.minY - padding,
+  maxY: bounds.maxY + padding
+});
+var createBoundsFromPoints = (points, radius = 0.35) => {
+  const bounds = getBoundsFromPoints(points);
+  if (!bounds) return null;
+  return expandBounds(bounds, radius);
+};
+var getErrorFocusCenter = ({
+  error,
+  tracesById,
+  portsById,
+  viasById,
+  componentsById
+}) => {
+  if (error.center) return error.center;
+  if (error.pcb_center) return error.pcb_center;
+  if (error.component_center) return error.component_center;
+  if (error.pcb_via_ids?.length) {
+    const vias = error.pcb_via_ids.map((pcbViaId) => viasById.get(pcbViaId)).filter(Boolean);
+    if (vias.length > 0) {
+      return {
+        x: vias.reduce((sum, via) => sum + via.x, 0) / vias.length,
+        y: vias.reduce((sum, via) => sum + via.y, 0) / vias.length
+      };
+    }
+  }
+  if (error.pcb_port_ids?.length) {
+    const ports = error.pcb_port_ids.map((pcbPortId) => portsById.get(pcbPortId)).filter(Boolean);
+    if (ports.length > 0) {
+      return {
+        x: ports.reduce((sum, port) => sum + port.x, 0) / ports.length,
+        y: ports.reduce((sum, port) => sum + port.y, 0) / ports.length
+      };
+    }
+  }
+  if (error.pcb_trace_id) {
+    const trace = tracesById.get(error.pcb_trace_id);
+    if (trace?.route?.length) {
+      const middleIndex = Math.floor(trace.route.length / 2);
+      return {
+        x: trace.route[middleIndex].x,
+        y: trace.route[middleIndex].y
+      };
+    }
+  }
+  if (error.pcb_component_id) {
+    return componentsById.get(error.pcb_component_id)?.center ?? null;
+  }
+  return null;
+};
+var getErrorFocusPoint = ({
+  error,
+  indexes
+}) => getErrorFocusCenter({
+  error,
+  ...indexes
+});
+var getComponentBoundaryViolationBounds = ({
+  error,
+  boardsById
+}) => {
+  if (!error.component_bounds || !error.pcb_board_id) return null;
+  const boardBounds = createBoardBounds(boardsById.get(error.pcb_board_id));
+  if (!boardBounds) return null;
+  const componentBounds = error.component_bounds;
+  const violationPoints = [];
+  if (componentBounds.min_x < boardBounds.minX) {
+    violationPoints.push({
+      x: boardBounds.minX,
+      y: Math.max(componentBounds.min_y, boardBounds.minY)
+    });
+    violationPoints.push({
+      x: boardBounds.minX,
+      y: Math.min(componentBounds.max_y, boardBounds.maxY)
+    });
+  }
+  if (componentBounds.max_x > boardBounds.maxX) {
+    violationPoints.push({
+      x: boardBounds.maxX,
+      y: Math.max(componentBounds.min_y, boardBounds.minY)
+    });
+    violationPoints.push({
+      x: boardBounds.maxX,
+      y: Math.min(componentBounds.max_y, boardBounds.maxY)
+    });
+  }
+  if (componentBounds.min_y < boardBounds.minY) {
+    violationPoints.push({
+      x: Math.max(componentBounds.min_x, boardBounds.minX),
+      y: boardBounds.minY
+    });
+    violationPoints.push({
+      x: Math.min(componentBounds.max_x, boardBounds.maxX),
+      y: boardBounds.minY
+    });
+  }
+  if (componentBounds.max_y > boardBounds.maxY) {
+    violationPoints.push({
+      x: Math.max(componentBounds.min_x, boardBounds.minX),
+      y: boardBounds.maxY
+    });
+    violationPoints.push({
+      x: Math.min(componentBounds.max_x, boardBounds.maxX),
+      y: boardBounds.maxY
+    });
+  }
+  return createBoundsFromPoints(violationPoints, 0.3);
+};
+var nonZoomableErrorTypes = /* @__PURE__ */ new Set([
+  "source_failed_to_create_component_error"
+]);
+var getErrorPreviewBounds = ({
+  error,
+  indexes
+}) => {
+  if (nonZoomableErrorTypes.has(error.error_type) || nonZoomableErrorTypes.has(error.type)) {
+    return null;
+  }
+  let bounds = null;
+  const focusCenter = getErrorFocusCenter({
+    error,
+    ...indexes
+  });
+  if (focusCenter) {
+    bounds = mergeBounds2(bounds, createBoundsFromCenter(focusCenter, 0.35));
+  }
+  if (error.error_type === "pcb_component_outside_board_error") {
+    bounds = mergeBounds2(
+      bounds,
+      getComponentBoundaryViolationBounds({
+        error,
+        boardsById: indexes.boardsById
+      })
+    );
+  } else if (error.component_bounds && !focusCenter) {
+    bounds = mergeBounds2(bounds, {
+      minX: error.component_bounds.min_x,
+      maxX: error.component_bounds.max_x,
+      minY: error.component_bounds.min_y,
+      maxY: error.component_bounds.max_y
+    });
+  }
+  if (error.center && !focusCenter) {
+    bounds = mergeBounds2(bounds, createBoundsFromCenter(error.center));
+  }
+  if (error.pcb_center && !focusCenter) {
+    bounds = mergeBounds2(bounds, createBoundsFromCenter(error.pcb_center));
+  }
+  if (error.component_center && !focusCenter) {
+    bounds = mergeBounds2(bounds, createBoundsFromCenter(error.component_center));
+  }
+  if (error.pcb_port_ids && !focusCenter) {
+    for (const pcbPortId of error.pcb_port_ids) {
+      const port = indexes.portsById.get(pcbPortId);
+      if (port) {
+        bounds = mergeBounds2(
+          bounds,
+          createBoundsFromCenter({ x: port.x, y: port.y }, 0.4)
+        );
+      }
+    }
+  }
+  if (error.pcb_trace_id && !focusCenter) {
+    const trace = indexes.tracesById.get(error.pcb_trace_id);
+    if (trace?.route) {
+      bounds = mergeBounds2(bounds, createBoundsFromRoute(trace.route));
+    }
+  }
+  if (error.pcb_via_ids) {
+    for (const pcbViaId of error.pcb_via_ids) {
+      const via = indexes.viasById.get(pcbViaId);
+      if (via) {
+        bounds = mergeBounds2(
+          bounds,
+          createBoundsFromCenter(
+            { x: via.x, y: via.y },
+            Math.max((via.outer_diameter ?? 0.5) / 2, 0.28)
+          )
+        );
+      }
+    }
+  }
+  if (error.pcb_component_id && !focusCenter) {
+    bounds = mergeBounds2(
+      bounds,
+      createBoundsFromComponent(
+        indexes.componentsById.get(error.pcb_component_id)
+      )
+    );
+  }
+  if (error.pcb_component_ids && !focusCenter) {
+    for (const pcbComponentId of error.pcb_component_ids) {
+      bounds = mergeBounds2(
+        bounds,
+        createBoundsFromComponent(indexes.componentsById.get(pcbComponentId))
+      );
+    }
+  }
+  return bounds;
+};
+var createTransformForBounds = ({
+  bounds,
+  width,
+  height
+}) => {
+  const center = {
+    x: (bounds.minX + bounds.maxX) / 2,
+    y: (bounds.minY + bounds.maxY) / 2
+  };
+  const targetWidth = Math.max(bounds.maxX - bounds.minX, 0.8) + 1.4;
+  const targetHeight = Math.max(bounds.maxY - bounds.minY, 0.8) + 1.4;
+  const scaleFactor = Math.min(width / targetWidth, height / targetHeight, 240) * 0.92;
+  return compose3(
+    translate7(width / 2, height / 2),
+    scale3(scaleFactor, -scaleFactor, 0, 0),
+    translate7(-center.x, -center.y)
+  );
+};
+var getRelatedIdsForError = (error) => {
+  const relatedIds = /* @__PURE__ */ new Set();
+  if (error.pcb_trace_id) {
+    relatedIds.add(error.pcb_trace_id);
+  }
+  for (const pcbPortId of error.pcb_port_ids ?? []) {
+    relatedIds.add(pcbPortId);
+  }
+  for (const pcbViaId of error.pcb_via_ids ?? []) {
+    relatedIds.add(pcbViaId);
+  }
+  if (error.pcb_component_id) {
+    relatedIds.add(error.pcb_component_id);
+  }
+  for (const pcbComponentId of error.pcb_component_ids ?? []) {
+    relatedIds.add(pcbComponentId);
+  }
+  return [...relatedIds];
+};
+
+// src/lib/util/transform-animation.ts
+var easeOutCubic = (progress) => 1 - (1 - progress) ** 3;
+var interpolateTransform = (start, end, progress) => ({
+  a: start.a + (end.a - start.a) * progress,
+  b: start.b + (end.b - start.b) * progress,
+  c: start.c + (end.c - start.c) * progress,
+  d: start.d + (end.d - start.d) * progress,
+  e: start.e + (end.e - start.e) * progress,
+  f: start.f + (end.f - start.f) * progress
+});
+var cancelTransformAnimation = (animationFrameId) => {
+  if (animationFrameId !== null) {
+    window.cancelAnimationFrame(animationFrameId);
+  }
+};
+var animateTransform = ({
+  startTransform,
+  endTransform,
+  durationMs,
+  onUpdate,
+  setAnimationFrameId,
+  onComplete
+}) => {
+  const startTime = performance.now();
+  const tick = (timestamp) => {
+    const elapsed = timestamp - startTime;
+    const rawProgress = Math.min(1, elapsed / durationMs);
+    const easedProgress = easeOutCubic(rawProgress);
+    onUpdate(interpolateTransform(startTransform, endTransform, easedProgress));
+    if (rawProgress < 1) {
+      setAnimationFrameId(window.requestAnimationFrame(tick));
+      return;
+    }
+    setAnimationFrameId(null);
+    onComplete?.();
+  };
+  const animationFrameId = window.requestAnimationFrame(tick);
+  setAnimationFrameId(animationFrameId);
+  return animationFrameId;
+};
+
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback10, useMemo as useMemo8, useState as useState12 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect18, useMemo as useMemo8, useRef as useRef15, useState as useState12 } from "react";
 
 // src/lib/util/expand-stroke.ts
 function getExpandedStroke(strokeInput, defaultWidth) {
@@ -7481,16 +7878,16 @@ function getExpandedStroke(strokeInput, defaultWidth) {
       addPoint(current, normalPrev, -1, currentWidth);
       addPoint(current, normalNext, -1, currentWidth);
     } else {
-      const scale6 = 1 / miterLength;
+      const scale7 = 1 / miterLength;
       addPoint(
         current,
-        { x: miterX * scale6, y: miterY * scale6 },
+        { x: miterX * scale7, y: miterY * scale7 },
         1,
         currentWidth
       );
       addPoint(
         current,
-        { x: miterX * scale6, y: miterY * scale6 },
+        { x: miterX * scale7, y: miterY * scale7 },
         -1,
         currentWidth
       );
@@ -8180,10 +8577,10 @@ var convertElementToPrimitives = (element, allElements) => {
 import colorParser from "color";
 import {
   applyToPoint as applyToPoint3,
-  compose as compose3,
+  compose as compose4,
   identity as identity2,
   inverse,
-  translate as translate7
+  translate as translate8
 } from "transformation-matrix";
 
 // src/lib/colors.ts
@@ -8524,7 +8921,7 @@ var Drawer = class {
     );
     this.transform = identity2();
     this.transform.d *= -1;
-    this.transform = compose3(this.transform, translate7(0, -500));
+    this.transform = compose4(this.transform, translate8(0, -500));
     this.lastPoint = { x: 0, y: 0 };
     this.equip({});
   }
@@ -8619,10 +9016,10 @@ var Drawer = class {
         }
         if (is_stroke_dashed) {
           let dashPattern = [];
-          const scale6 = Math.abs(this.transform.a);
-          if (scale6 > 0) {
+          const scale7 = Math.abs(this.transform.a);
+          if (scale7 > 0) {
             const SEGMENT_LENGTH = 0.1;
-            const dash = SEGMENT_LENGTH * scale6;
+            const dash = SEGMENT_LENGTH * scale7;
             const gap = dash * 1.3;
             if (dash > 0.5) {
               dashPattern = [dash, gap];
@@ -9369,16 +9766,16 @@ function drawPlatedHolePads({
 }
 
 // src/lib/util/rotate-text.ts
-import { compose as compose4, translate as translate8, rotate, applyToPoint as applyToPoint4 } from "transformation-matrix";
+import { compose as compose5, translate as translate9, rotate, applyToPoint as applyToPoint4 } from "transformation-matrix";
 function rotateText(rotateTextParams) {
   const { lines, anchorPoint, ccwRotation } = rotateTextParams;
   if (!ccwRotation) return lines;
   const rad = ccwRotation * Math.PI / 180;
   const rotationMatrix = rotate(rad);
-  const transform = compose4(
-    translate8(anchorPoint.x, anchorPoint.y),
+  const transform = compose5(
+    translate9(anchorPoint.x, anchorPoint.y),
     rotationMatrix,
-    translate8(-anchorPoint.x, -anchorPoint.y)
+    translate9(-anchorPoint.x, -anchorPoint.y)
   );
   applyToPoint4(transform, anchorPoint);
   return lines.map((line) => ({
@@ -10371,17 +10768,17 @@ var FONT_SIZE_HEIGHT_RATIO = 1;
 var import_svgson = __toESM(require_svgson_umd(), 1);
 var import_pretty = __toESM(require_pretty(), 1);
 import {
-  compose as compose5,
-  translate as translate9,
-  scale as scale3,
+  compose as compose6,
+  translate as translate10,
+  scale as scale4,
   applyToPoint as applyToPoint5
 } from "transformation-matrix";
 
 // node_modules/graphics-debug/dist/chunk-ARYXS3GC.js
 import {
-  compose as compose6,
-  scale as scale4,
-  translate as translate10,
+  compose as compose7,
+  scale as scale5,
+  translate as translate11,
   applyToPoint as applyToPoint6
 } from "transformation-matrix";
 var defaultColors = [
@@ -10444,10 +10841,10 @@ function computeTransformFromViewbox(viewbox, canvasWidth, canvasHeight, options
     (canvasWidth - 2 * padding) / width,
     (canvasHeight - 2 * padding) / height
   );
-  return compose6(
-    translate10(canvasWidth / 2, canvasHeight / 2),
-    scale4(scale_factor, yFlip ? -scale_factor : scale_factor),
-    translate10(-(bounds.minX + width / 2), -(bounds.minY + height / 2))
+  return compose7(
+    translate11(canvasWidth / 2, canvasHeight / 2),
+    scale5(scale_factor, yFlip ? -scale_factor : scale_factor),
+    translate11(-(bounds.minX + width / 2), -(bounds.minY + height / 2))
   );
 }
 function getBounds(graphics) {
@@ -12274,15 +12671,94 @@ var getPopupPosition = (errorCenter, containerRef) => {
   };
 };
 
+// src/components/FocusMarkerSVG.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var FocusMarkerSVG = ({
+  center
+}) => /* @__PURE__ */ jsxs8(
+  "svg",
+  {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      pointerEvents: "none",
+      mixBlendMode: "difference",
+      zIndex: zIndexMap.errorOverlay + 30
+    },
+    width: "100%",
+    height: "100%",
+    children: [
+      /* @__PURE__ */ jsx10(
+        "circle",
+        {
+          cx: center.x,
+          cy: center.y,
+          r: 11,
+          fill: "none",
+          stroke: "#ff6b6b",
+          strokeWidth: 2.5,
+          opacity: 0.95
+        }
+      ),
+      /* @__PURE__ */ jsx10("circle", { cx: center.x, cy: center.y, r: 4.5, fill: "#ff6b6b", opacity: 0.95 }),
+      /* @__PURE__ */ jsx10(
+        "line",
+        {
+          x1: center.x - 18,
+          y1: center.y,
+          x2: center.x - 8,
+          y2: center.y,
+          stroke: "#ff6b6b",
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "line",
+        {
+          x1: center.x + 8,
+          y1: center.y,
+          x2: center.x + 18,
+          y2: center.y,
+          stroke: "#ff6b6b",
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "line",
+        {
+          x1: center.x,
+          y1: center.y - 18,
+          x2: center.x,
+          y2: center.y - 8,
+          stroke: "#ff6b6b",
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "line",
+        {
+          x1: center.x,
+          y1: center.y + 8,
+          x2: center.x,
+          y2: center.y + 18,
+          stroke: "#ff6b6b",
+          strokeWidth: 2
+        }
+      )
+    ]
+  }
+);
+
 // src/components/ErrorOverlay.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var ErrorSVG = ({
   screenPort1,
   screenPort2,
   errorCenter,
   canLineBeDrawn,
   isHighlighted = false
-}) => /* @__PURE__ */ jsx10(
+}) => /* @__PURE__ */ jsx11(
   "svg",
   {
     style: {
@@ -12295,8 +12771,8 @@ var ErrorSVG = ({
     },
     width: "100%",
     height: "100%",
-    children: canLineBeDrawn && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-      /* @__PURE__ */ jsx10(
+    children: canLineBeDrawn && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+      /* @__PURE__ */ jsx11(
         "line",
         {
           x1: screenPort1.x,
@@ -12308,7 +12784,7 @@ var ErrorSVG = ({
           stroke: isHighlighted ? "#ff4444" : "red"
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "line",
         {
           x1: errorCenter.x,
@@ -12320,7 +12796,7 @@ var ErrorSVG = ({
           stroke: isHighlighted ? "#ff4444" : "red"
         }
       ),
-      isHighlighted ? /* @__PURE__ */ jsx10(
+      isHighlighted ? /* @__PURE__ */ jsx11(
         "rect",
         {
           x: errorCenter.x - 7,
@@ -12330,7 +12806,7 @@ var ErrorSVG = ({
           transform: `rotate(45 ${errorCenter.x} ${errorCenter.y})`,
           fill: "#ff4444"
         }
-      ) : /* @__PURE__ */ jsx10("circle", { cx: errorCenter.x, cy: errorCenter.y, r: 5, fill: "red" })
+      ) : /* @__PURE__ */ jsx11("circle", { cx: errorCenter.x, cy: errorCenter.y, r: 5, fill: "red" })
     ] })
   }
 );
@@ -12338,7 +12814,7 @@ var RouteSVG = ({
   points,
   errorCenter,
   isHighlighted = false
-}) => /* @__PURE__ */ jsxs8(
+}) => /* @__PURE__ */ jsxs9(
   "svg",
   {
     style: {
@@ -12352,7 +12828,7 @@ var RouteSVG = ({
     width: "100%",
     height: "100%",
     children: [
-      points.length > 1 && /* @__PURE__ */ jsx10(
+      points.length > 1 && /* @__PURE__ */ jsx11(
         "polyline",
         {
           points: points.map((pt) => `${pt.x},${pt.y}`).join(" "),
@@ -12362,7 +12838,7 @@ var RouteSVG = ({
           strokeDasharray: "2,2"
         }
       ),
-      isHighlighted ? /* @__PURE__ */ jsx10(
+      isHighlighted ? /* @__PURE__ */ jsx11(
         "rect",
         {
           x: errorCenter.x - 7,
@@ -12372,7 +12848,7 @@ var RouteSVG = ({
           transform: `rotate(45 ${errorCenter.x} ${errorCenter.y})`,
           fill: "#ff4444"
         }
-      ) : /* @__PURE__ */ jsx10("circle", { cx: errorCenter.x, cy: errorCenter.y, r: 5, fill: "red" })
+      ) : /* @__PURE__ */ jsx11("circle", { cx: errorCenter.x, cy: errorCenter.y, r: 5, fill: "red" })
     ]
   }
 );
@@ -12396,12 +12872,16 @@ var ErrorOverlay = ({
   elements
 }) => {
   const containerRef = useRef9(null);
-  const { isShowingDRCErrors, hoveredErrorId } = useGlobalStore((state) => ({
-    isShowingDRCErrors: state.is_showing_drc_errors,
-    hoveredErrorId: state.hovered_error_id
-  }));
+  const { isShowingDRCErrors, hoveredErrorId, focusedErrorId } = useGlobalStore(
+    (state) => ({
+      isShowingDRCErrors: state.is_showing_drc_errors,
+      hoveredErrorId: state.hovered_error_id,
+      focusedErrorId: state.focused_error_id
+    })
+  );
+  const activeErrorId = focusedErrorId ?? hoveredErrorId;
   if (!elements) {
-    return /* @__PURE__ */ jsx10("div", { style: { position: "relative" }, ref: containerRef, children });
+    return /* @__PURE__ */ jsx11("div", { style: { position: "relative" }, ref: containerRef, children });
   }
   const traceErrors = elements.filter(
     (el) => el.type === "pcb_trace_error"
@@ -12412,21 +12892,30 @@ var ErrorOverlay = ({
   const componentErrors = elements.filter(
     (el) => el.type === "pcb_trace_error" && el.message?.includes("Multiple components found with name")
   );
-  const portsMap = /* @__PURE__ */ new Map();
-  elements.forEach((el) => {
-    if (el.type === "pcb_port") {
-      portsMap.set(el.pcb_port_id, el);
+  const elementIndexes = buildErrorPreviewElementIndexes(elements);
+  const focusedErrorElement = findErrorElementById(elements, activeErrorId);
+  let focusScreenCenter = null;
+  if (focusedErrorElement) {
+    const focusCenter = getErrorFocusPoint({
+      error: focusedErrorElement,
+      indexes: elementIndexes
+    });
+    if (focusCenter && typeof focusCenter.x === "number" && typeof focusCenter.y === "number") {
+      const screenCenter = applyToPoint11(transform, focusCenter);
+      if (!isNaN(screenCenter.x) && !isNaN(screenCenter.y)) {
+        focusScreenCenter = screenCenter;
+      }
     }
-  });
-  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, ref: containerRef, children: [
+  }
+  return /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, ref: containerRef, children: [
     children,
     traceErrors.map((el, index) => {
       const { pcb_port_ids, pcb_trace_id } = el;
-      const port1 = pcb_port_ids?.[0] ? portsMap.get(pcb_port_ids[0]) : void 0;
-      const port2 = pcb_port_ids?.[1] ? portsMap.get(pcb_port_ids[1]) : void 0;
-      const trace = elements ? su(elements).pcb_trace.get(pcb_trace_id) : void 0;
-      const errorId = el.pcb_trace_error_id;
-      const isHighlighted = hoveredErrorId === errorId;
+      const port1 = pcb_port_ids?.[0] ? elementIndexes.portsById.get(pcb_port_ids[0]) : void 0;
+      const port2 = pcb_port_ids?.[1] ? elementIndexes.portsById.get(pcb_port_ids[1]) : void 0;
+      const trace = pcb_trace_id ? elementIndexes.tracesById.get(pcb_trace_id) : void 0;
+      const errorId = getErrorId(el, index);
+      const isHighlighted = activeErrorId === errorId;
       if (port1 && port2) {
         const screenPort1 = applyToPoint11(transform, {
           x: port1.x,
@@ -12448,8 +12937,8 @@ var ErrorOverlay = ({
           return null;
         }
         const popupPosition = getPopupPosition(errorCenter, containerRef);
-        return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+          /* @__PURE__ */ jsx11(
             ErrorSVG,
             {
               screenPort1,
@@ -12459,7 +12948,7 @@ var ErrorOverlay = ({
               isHighlighted
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -12494,7 +12983,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -12512,7 +13001,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -12531,13 +13020,15 @@ var ErrorOverlay = ({
         const screenPoints = trace.route.map(
           (pt) => applyToPoint11(transform, { x: pt.x, y: pt.y })
         );
-        if (screenPoints.some((pt) => Number.isNaN(pt.x) || Number.isNaN(pt.y)))
+        if (screenPoints.some(
+          (pt) => Number.isNaN(pt.x) || Number.isNaN(pt.y)
+        ))
           return null;
         const mid = Math.floor(screenPoints.length / 2);
         const errorCenter = screenPoints[mid];
         const popupPosition = getPopupPosition(errorCenter, containerRef);
-        return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+          /* @__PURE__ */ jsx11(
             RouteSVG,
             {
               points: screenPoints,
@@ -12545,7 +13036,7 @@ var ErrorOverlay = ({
               isHighlighted
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -12580,7 +13071,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -12598,7 +13089,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -12617,8 +13108,8 @@ var ErrorOverlay = ({
     }),
     viaClearanceErrors.map((el, index) => {
       if (!el.pcb_center) return null;
-      const errorId = el.pcb_via_ids;
-      const isHighlighted = hoveredErrorId === errorId[0];
+      const errorId = getErrorId(el, index);
+      const isHighlighted = activeErrorId === errorId;
       if (!isHighlighted && !isShowingDRCErrors) return null;
       const errorCenter = applyToPoint11(transform, {
         x: el.pcb_center.x,
@@ -12630,8 +13121,8 @@ var ErrorOverlay = ({
         { x: errorCenter.x, y: errorCenter.y },
         containerRef
       );
-      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-        /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+        /* @__PURE__ */ jsx11(
           RouteSVG,
           {
             points: [],
@@ -12639,7 +13130,7 @@ var ErrorOverlay = ({
             isHighlighted
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             style: {
@@ -12674,7 +13165,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             style: {
@@ -12692,7 +13183,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx11(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -12705,7 +13196,7 @@ var ErrorOverlay = ({
             )
           }
         )
-      ] }, errorId[0]);
+      ] }, errorId);
     }),
     componentErrors.map((el, index) => {
       const componentName = el.component_name || el.message?.match(/name "([^"]+)"/)?.[1];
@@ -12715,8 +13206,8 @@ var ErrorOverlay = ({
           (src) => src.type === "source_component" && src.source_component_id === comp.source_component_id && src.name === componentName
         )
       ) || [];
-      const errorId = el.error_id;
-      const isHighlighted = hoveredErrorId === errorId;
+      const errorId = getErrorId(el, index);
+      const isHighlighted = activeErrorId === errorId;
       if (!isHighlighted && !isShowingDRCErrors) return null;
       return components.map((comp, compIndex) => {
         let center = { x: 0, y: 0 };
@@ -12732,17 +13223,17 @@ var ErrorOverlay = ({
         const screenCenter = applyToPoint11(transform, center);
         if (Number.isNaN(screenCenter.x) || Number.isNaN(screenCenter.y))
           return null;
-        const scale6 = Math.abs(transform.a);
+        const scale7 = Math.abs(transform.a);
         const baseRadius = 0.5;
         const minRadius = 8;
         const maxRadius = 30;
         const scaledRadius = Math.max(
           minRadius,
-          Math.min(maxRadius, baseRadius * scale6)
+          Math.min(maxRadius, baseRadius * scale7)
         );
         const popupPosition = getPopupPosition(screenCenter, containerRef);
-        return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+          /* @__PURE__ */ jsx11(
             "svg",
             {
               style: {
@@ -12755,13 +13246,13 @@ var ErrorOverlay = ({
               },
               width: "100%",
               height: "100%",
-              children: isHighlighted ? /* @__PURE__ */ jsx10(
+              children: isHighlighted ? /* @__PURE__ */ jsx11(
                 "polygon",
                 {
                   points: `${screenCenter.x},${screenCenter.y - scaledRadius * 1.25} ${screenCenter.x + scaledRadius},${screenCenter.y} ${screenCenter.x},${screenCenter.y + scaledRadius * 1.25} ${screenCenter.x - scaledRadius},${screenCenter.y}`,
                   fill: "#ff4444"
                 }
-              ) : /* @__PURE__ */ jsx10(
+              ) : /* @__PURE__ */ jsx11(
                 "circle",
                 {
                   cx: screenCenter.x,
@@ -12775,7 +13266,7 @@ var ErrorOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -12810,7 +13301,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -12828,7 +13319,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -12841,9 +13332,10 @@ var ErrorOverlay = ({
               )
             }
           )
-        ] }, errorId);
+        ] }, `${errorId}_${compIndex}`);
       });
-    })
+    }),
+    focusScreenCenter && /* @__PURE__ */ jsx11(FocusMarkerSVG, { center: focusScreenCenter })
   ] });
 };
 
@@ -12917,7 +13409,7 @@ function filterTracesIfMultiple(filterTraces) {
 }
 
 // src/components/ElementOverlayBox.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var containerStyle = {
   position: "absolute",
   left: 0,
@@ -13009,7 +13501,7 @@ var HighlightedPrimitiveBoxWithText = ({
     const overlayInfo = getTraceOverlayInfo(traceTextContext);
     if (!overlayInfo) return null;
     const yOffset = mousePos.y - 35;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "div",
       {
         style: {
@@ -13021,7 +13513,7 @@ var HighlightedPrimitiveBoxWithText = ({
           pointerEvents: "none",
           transform: "translateX(-50%)"
         },
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -13047,7 +13539,7 @@ var HighlightedPrimitiveBoxWithText = ({
   if (label.trim().length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -13061,7 +13553,7 @@ var HighlightedPrimitiveBoxWithText = ({
         transform: `rotate(${-rotation}deg)`,
         transformOrigin: "center center"
       },
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
@@ -13077,7 +13569,7 @@ var HighlightedPrimitiveBoxWithText = ({
             opacity: finalState ? 1 : si === 0 ? 1 : 0,
             transition: "width 0.2s, height 0.2s, margin-left 0.2s, margin-top 0.2s, opacity 0.2s"
           },
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12(
             "div",
             {
               style: {
@@ -13125,7 +13617,7 @@ var ElementOverlayBox = ({
     is_showing_multiple_traces_length,
     elements
   });
-  return /* @__PURE__ */ jsx11("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive, i) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("div", { style: containerStyle, children: !is_moving_component && primitives.map((primitive, i) => /* @__PURE__ */ jsx12(
     HighlightedPrimitiveBoxWithText,
     {
       primitive,
@@ -13169,7 +13661,7 @@ var COLORS = {
 };
 
 // src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var AnchorOffsetOverlay = ({
   targets,
   transform,
@@ -13192,7 +13684,7 @@ var AnchorOffsetOverlay = ({
       anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       style: {
@@ -13205,7 +13697,7 @@ var AnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         "svg",
         {
           style: {
@@ -13235,8 +13727,8 @@ var AnchorOffsetOverlay = ({
               const shouldShowYLabel = yLineLength > VISUAL_CONFIG.MIN_LINE_LENGTH_FOR_LABEL;
               const xLabelText = `${target.display_offset_x ?? offsetX.toFixed(2)}mm`;
               const yLabelText = `${target.display_offset_y ?? offsetY.toFixed(2)}mm`;
-              return /* @__PURE__ */ jsxs9("g", { children: [
-                /* @__PURE__ */ jsx12(
+              return /* @__PURE__ */ jsxs10("g", { children: [
+                /* @__PURE__ */ jsx13(
                   "line",
                   {
                     x1: anchorMarkerScreen.x,
@@ -13248,7 +13740,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   "line",
                   {
                     x1: targetScreen.x,
@@ -13260,7 +13752,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx12(
+                target.type === "component" || target.type === "board" ? /* @__PURE__ */ jsx13(
                   "circle",
                   {
                     cx: targetScreen.x,
@@ -13272,8 +13764,8 @@ var AnchorOffsetOverlay = ({
                   }
                 ) : (
                   // assumes "group"
-                  /* @__PURE__ */ jsxs9(Fragment5, { children: [
-                    /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsxs10(Fragment5, { children: [
+                    /* @__PURE__ */ jsx13(
                       "line",
                       {
                         x1: targetScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -13284,7 +13776,7 @@ var AnchorOffsetOverlay = ({
                         strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                       }
                     ),
-                    /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13(
                       "line",
                       {
                         x1: targetScreen.x,
@@ -13297,7 +13789,7 @@ var AnchorOffsetOverlay = ({
                     )
                   ] })
                 ),
-                shouldShowXLabel && /* @__PURE__ */ jsx12(
+                shouldShowXLabel && /* @__PURE__ */ jsx13(
                   "foreignObject",
                   {
                     x: Math.min(anchorMarkerScreen.x, targetScreen.x),
@@ -13305,10 +13797,10 @@ var AnchorOffsetOverlay = ({
                     width: Math.abs(targetScreen.x - anchorMarkerScreen.x),
                     height: 20,
                     style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx12("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
+                    children: /* @__PURE__ */ jsx13("div", { style: { ...labelStyle, textAlign: "center" }, children: xLabelText })
                   }
                 ),
-                shouldShowYLabel && /* @__PURE__ */ jsx12(
+                shouldShowYLabel && /* @__PURE__ */ jsx13(
                   "foreignObject",
                   {
                     x: targetScreen.x + yLabelOffset,
@@ -13316,7 +13808,7 @@ var AnchorOffsetOverlay = ({
                     width: VISUAL_CONFIG.Y_LABEL_MIN_WIDTH,
                     height: Math.abs(targetScreen.y - anchorMarkerScreen.y),
                     style: { overflow: "visible" },
-                    children: /* @__PURE__ */ jsx12(
+                    children: /* @__PURE__ */ jsx13(
                       "div",
                       {
                         style: {
@@ -13335,8 +13827,8 @@ var AnchorOffsetOverlay = ({
                 )
               ] }, target.id);
             }),
-            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs9("g", { children: [
-              /* @__PURE__ */ jsx12(
+            Array.from(anchorScreens.entries()).map(([anchorId, anchorScreen]) => /* @__PURE__ */ jsxs10("g", { children: [
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: anchorScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -13347,7 +13839,7 @@ var AnchorOffsetOverlay = ({
                   strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: anchorScreen.x,
@@ -13367,7 +13859,7 @@ var AnchorOffsetOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/BoardAnchorOffsetOverlay.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var BoardAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -13454,7 +13946,7 @@ var BoardAnchorOffsetOverlay = ({
       display_offset_y: target.group.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -13466,7 +13958,7 @@ var BoardAnchorOffsetOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/GroupAnchorOffsetOverlay.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var GroupAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -13582,7 +14074,7 @@ var GroupAnchorOffsetOverlay = ({
       display_offset_y: target.group.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -13595,7 +14087,7 @@ var GroupAnchorOffsetOverlay = ({
 
 // src/components/AnchorOffsetOverlay/ComponentBoundingBoxOverlay.tsx
 import { applyToPoint as applyToPoint13 } from "transformation-matrix";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var calculateComponentBoundingBox = (component, elements) => {
   const componentId = component.pcb_component_id;
   const padsAndHoles = elements.filter(
@@ -13638,7 +14130,7 @@ var ComponentBoundingBoxOverlay = ({
     renderData.push({ component, bbox, group });
   }
   if (renderData.length === 0) return null;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       style: {
@@ -13651,7 +14143,7 @@ var ComponentBoundingBoxOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         "svg",
         {
           style: { position: "absolute", left: 0, top: 0, pointerEvents: "none" },
@@ -13677,8 +14169,8 @@ var ComponentBoundingBoxOverlay = ({
               y: (bbox.minY + bbox.maxY) / 2
             };
             const componentCenterScreen = applyToPoint13(transform, componentCenter);
-            return /* @__PURE__ */ jsxs10("g", { children: [
-              /* @__PURE__ */ jsx15(
+            return /* @__PURE__ */ jsxs11("g", { children: [
+              /* @__PURE__ */ jsx16(
                 "rect",
                 {
                   x: screenBbox.x,
@@ -13691,7 +14183,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeDasharray: "4,4"
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "line",
                 {
                   x1: componentCenterScreen.x - 6,
@@ -13702,7 +14194,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "line",
                 {
                   x1: componentCenterScreen.x,
@@ -13713,7 +14205,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "circle",
                 {
                   cx: componentCenterScreen.x,
@@ -13733,7 +14225,7 @@ var ComponentBoundingBoxOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/PanelAnchorOffsetOverlay.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var PanelAnchorOffsetOverlay = ({
   elements,
   highlightedPrimitives,
@@ -13782,7 +14274,7 @@ var PanelAnchorOffsetOverlay = ({
       display_offset_y: target.board.display_offset_y
     };
   }).filter((t) => Boolean(t));
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     AnchorOffsetOverlay,
     {
       targets: sharedTargets,
@@ -13794,7 +14286,7 @@ var PanelAnchorOffsetOverlay = ({
 };
 
 // src/components/MouseElementTracker.tsx
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var getPolygonBoundingBox = (points) => {
   if (points.length === 0) return null;
   let minX = points[0].x;
@@ -13981,7 +14473,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: containerRef,
@@ -14005,7 +14497,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           ElementOverlayBox,
           {
             elements,
@@ -14013,8 +14505,8 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsxs11(Fragment6, { children: [
-          /* @__PURE__ */ jsx17(
+        transform && /* @__PURE__ */ jsxs12(Fragment6, { children: [
+          /* @__PURE__ */ jsx18(
             BoardAnchorOffsetOverlay,
             {
               elements,
@@ -14024,7 +14516,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             GroupAnchorOffsetOverlay,
             {
               elements,
@@ -14034,7 +14526,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             ComponentBoundingBoxOverlay,
             {
               elements,
@@ -14044,7 +14536,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             PanelAnchorOffsetOverlay,
             {
               elements,
@@ -14064,7 +14556,7 @@ var MouseElementTracker = ({
 import { applyToPoint as applyToPoint15 } from "transformation-matrix";
 import { identity as identity8 } from "transformation-matrix";
 import { useRef as useRef10, useEffect as useEffect13 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "rgb(255, 100, 100)",
   "rgb(100, 255, 100)",
@@ -14300,14 +14792,14 @@ var PcbGroupOverlay = ({
     is_showing_group_anchor_offsets,
     hoveredComponentIds
   ]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       ref: containerRef,
       style: { position: "relative", width: "100%", height: "100%" },
       children: [
         children,
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "canvas",
           {
             ref: canvasRef,
@@ -14329,7 +14821,7 @@ var PcbGroupOverlay = ({
 // src/components/RatsNestOverlay.tsx
 import { applyToPoint as applyToPoint16, identity as identity9 } from "transformation-matrix";
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var RatsNestOverlay = ({ transform, soup, children }) => {
   const isShowingRatsNest = useGlobalStore((s) => s.is_showing_rats_nest);
   const { netMap, idToNetMap } = useMemo6(
@@ -14392,9 +14884,9 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
   if (!transform) transform = identity9();
-  return /* @__PURE__ */ jsxs13("div", { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs14("div", { style: { position: "relative" }, children: [
     children,
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       "svg",
       {
         style: {
@@ -14410,7 +14902,7 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
           const transformedStart = applyToPoint16(transform, startPoint);
           const transformedEnd = applyToPoint16(transform, endPoint);
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx20(
             "line",
             {
               x1: transformedStart.x,
@@ -14431,10 +14923,10 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
 
 // src/components/ToolbarOverlay.tsx
 import {
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useState as useState11,
-  useCallback as useCallback9,
-  useRef as useRef13,
+  useCallback as useCallback10,
+  useRef as useRef14,
   useLayoutEffect as useLayoutEffect2
 } from "react";
 import { css as css3 } from "@emotion/css";
@@ -14442,7 +14934,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.364",
+  version: "1.11.365",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -14597,7 +15089,7 @@ var useMobileTouch = (onClick, options = { stopPropagation: true }) => {
 };
 
 // src/components/ToolbarButton.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ToolbarButton = ({
   children,
   isSmallScreen,
@@ -14605,7 +15097,7 @@ var ToolbarButton = ({
   ...props
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ...props,
@@ -14633,8 +15125,87 @@ var ToolbarButton = ({
 };
 
 // src/components/ToolbarErrorDropdown.tsx
-import { useCallback as useCallback8, useMemo as useMemo7, useState as useState10 } from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useCallback as useCallback9, useMemo as useMemo7, useState as useState10 } from "react";
+
+// src/lib/util/group-errors-by-type.ts
+var groupErrorsByType = (errors) => {
+  const groups = /* @__PURE__ */ new Map();
+  errors.forEach((error, index) => {
+    const errorType = error.error_type || "unknown_error";
+    const existingGroup = groups.get(errorType) || [];
+    existingGroup.push({
+      error,
+      index,
+      errorId: getErrorId(error, index)
+    });
+    groups.set(errorType, existingGroup);
+  });
+  return Array.from(groups.entries()).map(([errorType, groupedErrors]) => ({
+    errorType,
+    errors: groupedErrors
+  }));
+};
+
+// src/components/useToolbarErrorFocus.ts
+import { useCallback as useCallback8, useEffect as useEffect16, useRef as useRef13 } from "react";
+var useToolbarErrorFocus = ({
+  onClose,
+  setHoveredErrorId,
+  setFocusedErrorId,
+  highlightDurationMs = 3e3
+}) => {
+  const clearHighlightTimeoutRef = useRef13(null);
+  const focusRequestRef = useRef13(null);
+  const selectedErrorIdRef = useRef13(null);
+  const clearPendingSelection = useCallback8(() => {
+    if (clearHighlightTimeoutRef.current !== null) {
+      window.clearTimeout(clearHighlightTimeoutRef.current);
+      clearHighlightTimeoutRef.current = null;
+    }
+    if (focusRequestRef.current !== null) {
+      window.cancelAnimationFrame(focusRequestRef.current);
+      focusRequestRef.current = null;
+    }
+  }, []);
+  useEffect16(() => clearPendingSelection, [clearPendingSelection]);
+  const handleErrorSelect = useCallback8(
+    (errorId) => {
+      clearPendingSelection();
+      selectedErrorIdRef.current = errorId;
+      setHoveredErrorId(errorId);
+      setFocusedErrorId(null);
+      focusRequestRef.current = window.requestAnimationFrame(() => {
+        setFocusedErrorId(errorId);
+        focusRequestRef.current = null;
+      });
+      onClose();
+      clearHighlightTimeoutRef.current = window.setTimeout(() => {
+        selectedErrorIdRef.current = null;
+        setHoveredErrorId(null);
+        setFocusedErrorId(null);
+        clearHighlightTimeoutRef.current = null;
+      }, highlightDurationMs);
+    },
+    [
+      clearPendingSelection,
+      highlightDurationMs,
+      onClose,
+      setFocusedErrorId,
+      setHoveredErrorId
+    ]
+  );
+  const isSelectedError = useCallback8(
+    (errorId) => selectedErrorIdRef.current === errorId,
+    []
+  );
+  return {
+    handleErrorSelect,
+    isSelectedError
+  };
+};
+
+// src/components/ToolbarErrorDropdown.tsx
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var CopyErrorButton = ({
   errorId,
   errorMessage,
@@ -14644,7 +15215,7 @@ var CopyErrorButton = ({
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(
     () => onCopy(errorMessage, errorId)
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "button",
     {
       type: "button",
@@ -14664,7 +15235,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" }) })
     }
   );
 };
@@ -14673,7 +15244,9 @@ var ToolbarErrorDropdown = ({
   isOpen,
   isSmallScreen,
   onToggle,
-  setHoveredErrorId
+  onClose,
+  setHoveredErrorId,
+  setFocusedErrorId
 }) => {
   const [copiedErrorId, setCopiedErrorId] = useState10(null);
   const [collapsedErrorGroups, setCollapsedErrorGroups] = useState10(
@@ -14683,6 +15256,11 @@ var ToolbarErrorDropdown = ({
     /* @__PURE__ */ new Set()
   );
   const [, copyToClipboard] = useCopyToClipboard_default();
+  const { handleErrorSelect, isSelectedError } = useToolbarErrorFocus({
+    onClose,
+    setHoveredErrorId,
+    setFocusedErrorId
+  });
   const errorElements = useMemo7(
     () => elements?.filter(
       (el) => el.type.includes("error")
@@ -14690,24 +15268,11 @@ var ToolbarErrorDropdown = ({
     [elements]
   );
   const errorCount = errorElements.length;
-  const groupedErrorElements = useMemo7(() => {
-    const groups = /* @__PURE__ */ new Map();
-    errorElements.forEach((error, index) => {
-      const errorType = error.error_type || "unknown_error";
-      const existingGroup = groups.get(errorType) || [];
-      existingGroup.push({
-        error,
-        index,
-        errorId: error.pcb_trace_error_id
-      });
-      groups.set(errorType, existingGroup);
-    });
-    return Array.from(groups.entries()).map(([errorType, errors]) => ({
-      errorType,
-      errors
-    }));
-  }, [errorElements]);
-  const toggleErrorGroup = useCallback8((errorType) => {
+  const groupedErrorElements = useMemo7(
+    () => groupErrorsByType(errorElements),
+    [errorElements]
+  );
+  const toggleErrorGroup = useCallback9((errorType) => {
     setCollapsedErrorGroups((prev) => {
       const next = new Set(prev);
       if (next.has(errorType)) {
@@ -14718,7 +15283,7 @@ var ToolbarErrorDropdown = ({
       return next;
     });
   }, []);
-  const toggleExpandedError = useCallback8((errorId) => {
+  const toggleExpandedError = useCallback9((errorId) => {
     setExpandedErrorIds((prev) => {
       const next = new Set(prev);
       if (next.has(errorId)) {
@@ -14729,20 +15294,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: {
@@ -14762,14 +15327,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: {
@@ -14806,7 +15371,7 @@ var ToolbarErrorDropdown = ({
                       toggleErrorGroup(errorType);
                     },
                     children: [
-                      /* @__PURE__ */ jsxs14(
+                      /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           style: {
@@ -14816,7 +15381,7 @@ var ToolbarErrorDropdown = ({
                             color: "#ff6b6b"
                           },
                           children: [
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx22(
                               "div",
                               {
                                 style: {
@@ -14829,7 +15394,7 @@ var ToolbarErrorDropdown = ({
                                 children: "\u203A"
                               }
                             ),
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx22(
                               "div",
                               {
                                 style: {
@@ -14842,7 +15407,7 @@ var ToolbarErrorDropdown = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         "div",
                         {
                           style: {
@@ -14860,14 +15425,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: {
@@ -14886,7 +15451,9 @@ var ToolbarErrorDropdown = ({
                             },
                             onMouseLeave: (e) => {
                               e.currentTarget.style.backgroundColor = "#2a2a2a";
-                              setHoveredErrorId(null);
+                              if (!isSelectedError(errorId)) {
+                                setHoveredErrorId(null);
+                              }
                             },
                             onTouchStart: (e) => {
                               e.stopPropagation();
@@ -14897,15 +15464,14 @@ var ToolbarErrorDropdown = ({
                               e.stopPropagation();
                               e.preventDefault();
                               e.currentTarget.style.backgroundColor = "#2a2a2a";
-                              setHoveredErrorId(null);
-                              toggleExpandedError(errorId);
+                              handleErrorSelect(errorId);
                             },
                             onClick: (e) => {
                               e.stopPropagation();
-                              toggleExpandedError(errorId);
+                              handleErrorSelect(errorId);
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 "div",
                                 {
                                   style: {
@@ -14918,20 +15484,34 @@ var ToolbarErrorDropdown = ({
                                     whiteSpace: "nowrap",
                                     userSelect: "text"
                                   },
-                                  onMouseDown: (event) => event.stopPropagation(),
-                                  onClick: (event) => event.stopPropagation(),
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
-                                "div",
+                              /* @__PURE__ */ jsx22(
+                                "button",
                                 {
+                                  type: "button",
+                                  "aria-label": isExpanded ? "Collapse error details" : "Expand error details",
                                   style: {
                                     color: "#888",
                                     fontSize: "16px",
                                     transform: isExpanded ? "rotate(0deg)" : "rotate(90deg)",
                                     transition: "transform 0.2s ease",
-                                    flexShrink: 0
+                                    flexShrink: 0,
+                                    background: "none",
+                                    border: "none",
+                                    padding: 0,
+                                    cursor: "pointer"
+                                  },
+                                  onMouseDown: (event) => event.stopPropagation(),
+                                  onClick: (event) => {
+                                    event.stopPropagation();
+                                    toggleExpandedError(errorId);
+                                  },
+                                  onTouchEnd: (event) => {
+                                    event.stopPropagation();
+                                    event.preventDefault();
+                                    toggleExpandedError(errorId);
                                   },
                                   children: "\u203A"
                                 }
@@ -14939,7 +15519,7 @@ var ToolbarErrorDropdown = ({
                             ]
                           }
                         ),
-                        isExpanded && /* @__PURE__ */ jsxs14(
+                        isExpanded && /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             "data-error-id": index,
@@ -14951,7 +15531,7 @@ var ToolbarErrorDropdown = ({
                               position: "relative"
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 "div",
                                 {
                                   style: {
@@ -14969,7 +15549,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 CopyErrorButton,
                                 {
                                   errorId,
@@ -15001,10 +15581,10 @@ var ToolbarErrorDropdown = ({
 };
 
 // src/components/ToolbarOverlay.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var LayerButton = ({ name, selected, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: css3`
@@ -15021,8 +15601,8 @@ var LayerButton = ({ name, selected, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx22("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23("span", { style: { marginRight: 2, opacity: selected ? 1 : 0 }, children: "\u2022" }),
+        /* @__PURE__ */ jsx23(
           "span",
           {
             style: {
@@ -15043,7 +15623,7 @@ var CheckboxMenuItem = ({
   onClick
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: css3`
@@ -15063,16 +15643,16 @@ var CheckboxMenuItem = ({
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx22("input", { type: "checkbox", checked, onChange: () => {
+        /* @__PURE__ */ jsx23("input", { type: "checkbox", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx22("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx23("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
 };
 var RadioMenuItem = ({ label, checked, onClick }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: css3`
@@ -15092,9 +15672,9 @@ var RadioMenuItem = ({ label, checked, onClick }) => {
       ...touchHandlers,
       style: touchStyle,
       children: [
-        /* @__PURE__ */ jsx22("input", { type: "radio", checked, onChange: () => {
+        /* @__PURE__ */ jsx23("input", { type: "radio", checked, onChange: () => {
         }, readOnly: true }),
-        /* @__PURE__ */ jsx22("span", { style: { color: "#eee" }, children: label })
+        /* @__PURE__ */ jsx23("span", { style: { color: "#eee" }, children: label })
       ]
     }
   );
@@ -15121,7 +15701,8 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingSilkscreen,
     setIsShowingFabricationNotes,
     setPcbGroupViewMode,
-    setHoveredErrorId
+    setHoveredErrorId,
+    setFocusedErrorId
   } = useGlobalStore((s) => ({
     isMouseOverContainer: s.is_mouse_over_container,
     setIsMouseOverContainer: s.setIsMouseOverContainer,
@@ -15158,13 +15739,14 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingSilkscreen: s.setIsShowingSilkscreen,
     setIsShowingFabricationNotes: s.setIsShowingFabricationNotes,
     setPcbGroupViewMode: s.setPcbGroupViewMode,
-    setHoveredErrorId: s.setHoveredErrorId
+    setHoveredErrorId: s.setHoveredErrorId,
+    setFocusedErrorId: s.setFocusedErrorId
   }));
   const [isViewMenuOpen, setViewMenuOpen] = useState11(false);
   const [isLayerMenuOpen, setLayerMenuOpen] = useState11(false);
   const [isErrorsOpen, setErrorsOpen] = useState11(false);
   const [measureToolArmed, setMeasureToolArmed] = useState11(false);
-  useEffect16(() => {
+  useEffect17(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
     window.addEventListener("arm-dimension-tool", arm);
@@ -15182,8 +15764,8 @@ var ToolbarOverlay = ({ children, elements }) => {
     "bottom"
   ];
   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]) : () => {
     },
@@ -15228,25 +15810,24 @@ var ToolbarOverlay = ({ children, elements }) => {
       document.removeEventListener("mousemove", checkMousePosition);
     };
   }, [setIsMouseOverContainer]);
-  const handleMouseEnter = useCallback9(() => {
+  const handleMouseEnter = useCallback10(() => {
     setIsMouseOverContainer(true);
   }, [setIsMouseOverContainer]);
-  const handleMouseMove = useCallback9(() => {
+  const handleMouseMove = useCallback10(() => {
     if (!isMouseOverContainer) {
       setIsMouseOverContainer(true);
     }
   }, [isMouseOverContainer, setIsMouseOverContainer]);
-  const handleMouseLeave = useCallback9(() => {
+  const handleMouseLeave = useCallback10(() => {
     setIsMouseOverContainer(false);
     setLayerMenuOpen(false);
     setViewMenuOpen(false);
     setErrorsOpen(false);
-    setHoveredErrorId(null);
-  }, [setIsMouseOverContainer, setHoveredErrorId]);
-  const handleLayerMenuToggle = useCallback9(() => {
+  }, [setIsMouseOverContainer]);
+  const handleLayerMenuToggle = useCallback10(() => {
     setLayerMenuOpen(!isLayerMenuOpen);
   }, [isLayerMenuOpen]);
-  const handleErrorsToggle = useCallback9(() => {
+  const handleErrorsToggle = useCallback10(() => {
     const newErrorsOpen = !isErrorsOpen;
     setErrorsOpen(newErrorsOpen);
     if (newErrorsOpen) {
@@ -15256,33 +15837,36 @@ var ToolbarOverlay = ({ children, elements }) => {
       setHoveredErrorId(null);
     }
   }, [isErrorsOpen, setHoveredErrorId]);
-  const handleEditTraceToggle = useCallback9(() => {
+  const closeErrorsMenu = useCallback10(() => {
+    setErrorsOpen(false);
+  }, []);
+  const handleEditTraceToggle = useCallback10(() => {
     setEditMode(editModes.in_draw_trace_mode ? "off" : "draw_trace");
   }, [editModes.in_draw_trace_mode, setEditMode]);
-  const handleMoveComponentToggle = useCallback9(() => {
+  const handleMoveComponentToggle = useCallback10(() => {
     setEditMode(editModes.in_move_footprint_mode ? "off" : "move_footprint");
   }, [editModes.in_move_footprint_mode, setEditMode]);
-  const handleRatsNestToggle = useCallback9(() => {
+  const handleRatsNestToggle = useCallback10(() => {
     setIsShowingRatsNest(!viewSettings.is_showing_rats_nest);
   }, [viewSettings.is_showing_rats_nest, setIsShowingRatsNest]);
-  const handleMeasureToolClick = useCallback9(() => {
+  const handleMeasureToolClick = useCallback10(() => {
     setMeasureToolArmed(true);
     window.dispatchEvent(new Event("arm-dimension-tool"));
   }, []);
-  const handleViewMenuToggle = useCallback9(() => {
+  const handleViewMenuToggle = useCallback10(() => {
     const newViewMenuOpen = !isViewMenuOpen;
     setViewMenuOpen(newViewMenuOpen);
     if (newViewMenuOpen) {
       setErrorsOpen(false);
     }
   }, [isViewMenuOpen]);
-  const stopCanvasInteractionPropagation = useCallback9(
+  const stopCanvasInteractionPropagation = useCallback10(
     (event) => {
       event.stopPropagation();
     },
     []
   );
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ref: hotkeyBoundaryRef,
@@ -15292,7 +15876,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseMove: handleMouseMove,
       children: [
         children,
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             style: {
@@ -15313,7 +15897,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -15343,7 +15927,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs16(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -15354,10 +15938,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs15("div", { children: [
+                    /* @__PURE__ */ jsxs16("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         "span",
                         {
                           style: {
@@ -15369,7 +15953,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         }
                       )
                     ] }),
-                    isLayerMenuOpen && /* @__PURE__ */ jsx22("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx22(
+                    isLayerMenuOpen && /* @__PURE__ */ jsx23("div", { style: { marginTop: 4, minWidth: 120 }, children: processedLayers.map((layer) => /* @__PURE__ */ jsx23(
                       LayerButton,
                       {
                         name: layer,
@@ -15383,68 +15967,70 @@ var ToolbarOverlay = ({ children, elements }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 ToolbarErrorDropdown,
                 {
                   elements,
                   isOpen: isErrorsOpen,
                   isSmallScreen,
                   onToggle: handleErrorsToggle,
-                  setHoveredErrorId
+                  onClose: closeErrorsMenu,
+                  setHoveredErrorId,
+                  setFocusedErrorId
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleEditTraceToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                  children: /* @__PURE__ */ jsxs16("div", { children: [
                     editModes.in_draw_trace_mode ? "\u2716 " : "",
                     "Edit Traces"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleMoveComponentToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                  children: /* @__PURE__ */ jsxs16("div", { children: [
                     editModes.in_move_footprint_mode ? "\u2716 " : "",
                     "Move Components"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: {},
                   onClick: handleRatsNestToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
+                  children: /* @__PURE__ */ jsxs16("div", { children: [
                     viewSettings.is_showing_rats_nest ? "\u2716 " : "",
                     "Rats Nest"
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   style: measureToolArmed ? { backgroundColor: "#444" } : {},
                   onClick: handleMeasureToolClick,
-                  children: /* @__PURE__ */ jsx22("div", { children: "\u{1F4CF}" })
+                  children: /* @__PURE__ */ jsx23("div", { children: "\u{1F4CF}" })
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23(
                 ToolbarButton,
                 {
                   isSmallScreen,
                   onClick: handleViewMenuToggle,
-                  children: /* @__PURE__ */ jsxs15("div", { children: [
-                    /* @__PURE__ */ jsxs15(
+                  children: /* @__PURE__ */ jsxs16("div", { children: [
+                    /* @__PURE__ */ jsxs16(
                       "div",
                       {
                         style: {
@@ -15454,7 +16040,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx22(
+                          /* @__PURE__ */ jsx23(
                             "span",
                             {
                               style: {
@@ -15469,8 +16055,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                         ]
                       }
                     ),
-                    isViewMenuOpen && /* @__PURE__ */ jsxs15("div", { style: { marginTop: 4, minWidth: 120 }, children: [
-                      /* @__PURE__ */ jsx22(
+                    isViewMenuOpen && /* @__PURE__ */ jsxs16("div", { style: { marginTop: 4, minWidth: 120 }, children: [
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show All Trace Lengths",
@@ -15482,7 +16068,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -15494,7 +16080,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -15504,7 +16090,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -15516,7 +16102,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -15526,7 +16112,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -15536,7 +16122,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -15546,7 +16132,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -15558,7 +16144,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -15570,7 +16156,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -15580,8 +16166,8 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs15("div", { style: { marginLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx22(
+                      viewSettings.is_showing_pcb_groups && /* @__PURE__ */ jsxs16("div", { style: { marginLeft: 16 }, children: [
+                        /* @__PURE__ */ jsx23(
                           RadioMenuItem,
                           {
                             label: "Show All Groups",
@@ -15591,7 +16177,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx22(
+                        /* @__PURE__ */ jsx23(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -15615,13 +16201,15 @@ var ToolbarOverlay = ({ children, elements }) => {
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
-  const hoveredErrorId = useGlobalStore((state) => state.hovered_error_id);
-  const isShowingCopperPours = useGlobalStore(
-    (state) => state.is_showing_copper_pours
-  );
+  const { hoveredErrorId, focusedErrorId, isShowingCopperPours } = useGlobalStore((state) => ({
+    hoveredErrorId: state.hovered_error_id,
+    focusedErrorId: state.focused_error_id,
+    isShowingCopperPours: state.is_showing_copper_pours
+  }));
+  const activeErrorId = focusedErrorId ?? hoveredErrorId;
   const elementsToRender = useMemo8(
     () => isShowingCopperPours ? elements : elements.filter((elm) => elm.type !== "pcb_copper_pour"),
     [elements, isShowingCopperPours]
@@ -15640,27 +16228,71 @@ var CanvasElementsRenderer = (props) => {
     primitiveIdsInMousedOverNet: []
   });
   const [hoveredComponentIds, setHoveredComponentIds] = useState12([]);
+  const currentTransformRef = useRef15(transform ?? null);
+  const zoomAnimationFrameRef = useRef15(null);
+  const elementIndexes = useMemo8(
+    () => buildErrorPreviewElementIndexes(elements),
+    [elements]
+  );
   const errorRelatedIds = useMemo8(() => {
-    if (!hoveredErrorId) return [];
+    if (!activeErrorId) return [];
     const errorElements = elements.filter(
       (el) => el.type.includes("error")
     );
-    const hoveredError = errorElements.find((el) => {
-      return el.error_id === hoveredErrorId;
+    const activeError = errorElements.find((el, index) => {
+      return getErrorId(el, index) === activeErrorId;
     });
-    if (!hoveredError) return [];
-    const relatedIds = [];
-    if (hoveredError.pcb_trace_id) {
-      relatedIds.push(hoveredError.pcb_trace_id);
-    }
-    if (hoveredError.pcb_port_ids) {
-      relatedIds.push(...hoveredError.pcb_port_ids);
-    }
-    if (hoveredError.pcb_via_ids) {
-      relatedIds.push(...hoveredError.pcb_via_ids);
+    if (!activeError) return [];
+    return getRelatedIdsForError(activeError);
+  }, [activeErrorId, elements]);
+  useEffect18(() => {
+    if (transform) {
+      currentTransformRef.current = transform;
     }
-    return relatedIds;
-  }, [hoveredErrorId, elements]);
+  }, [transform]);
+  useEffect18(() => {
+    return () => {
+      cancelTransformAnimation(zoomAnimationFrameRef.current);
+    };
+  }, []);
+  useEffect18(() => {
+    if (!props.width || !props.height || !props.setTransform || !focusedErrorId)
+      return;
+    const focusedError = findErrorElementById(elements, focusedErrorId);
+    if (!focusedError) return;
+    const previewBounds = getErrorPreviewBounds({
+      error: focusedError,
+      indexes: elementIndexes
+    });
+    if (!previewBounds) return;
+    const startTransform = currentTransformRef.current ?? transform;
+    if (!startTransform) return;
+    const targetTransform = createTransformForBounds({
+      bounds: previewBounds,
+      width: props.width,
+      height: props.height
+    });
+    cancelTransformAnimation(zoomAnimationFrameRef.current);
+    animateTransform({
+      startTransform,
+      endTransform: targetTransform,
+      durationMs: 420,
+      setAnimationFrameId: (animationFrameId) => {
+        zoomAnimationFrameRef.current = animationFrameId;
+      },
+      onUpdate: (nextTransform) => {
+        currentTransformRef.current = nextTransform;
+        props.setTransform?.(nextTransform);
+      }
+    });
+  }, [
+    focusedErrorId,
+    elements,
+    elementIndexes,
+    props.height,
+    props.setTransform,
+    props.width
+  ]);
   const primitives = useMemo8(() => {
     const combinedPrimitiveIds = [
       ...hoverState.primitiveIdsInMousedOverNet,
@@ -15672,7 +16304,7 @@ var CanvasElementsRenderer = (props) => {
       primitiveIdsInMousedOverNet: combinedPrimitiveIds
     });
   }, [primitivesWithoutInteractionMetadata, hoverState, errorRelatedIds]);
-  const onMouseOverPrimitives = useCallback10(
+  const onMouseOverPrimitives = useCallback11(
     (primitivesHoveredOver) => {
       const primitiveIdsInMousedOverNet = [];
       for (const primitive of primitivesHoveredOver) {
@@ -15705,14 +16337,14 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     MouseElementTracker,
     {
       elements: elementsToRender,
       transform,
       primitives: primitivesWithoutInteractionMetadata,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -15721,7 +16353,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx23(
+          children: /* @__PURE__ */ jsx24(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -15730,29 +16362,29 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx23(
+              children: /* @__PURE__ */ jsx24(
                 DimensionOverlay,
                 {
                   transform,
                   focusOnHover: props.focusOnHover,
                   primitives: primitivesWithoutInteractionMetadata,
-                  children: /* @__PURE__ */ jsx23(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx23(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx23(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx23(
+                  children: /* @__PURE__ */ jsx24(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx24(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx24(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx24(
                     PcbGroupOverlay,
                     {
                       transform,
                       elements,
                       hoveredComponentIds,
-                      children: /* @__PURE__ */ jsx23(
+                      children: /* @__PURE__ */ jsx24(
                         DebugGraphicsOverlay,
                         {
                           transform,
                           debugGraphics: props.debugGraphics,
-                          children: /* @__PURE__ */ jsx23(
+                          children: /* @__PURE__ */ jsx24(
                             WarningGraphicsOverlay,
                             {
                               transform,
                               elements,
-                              children: /* @__PURE__ */ jsx23(
+                              children: /* @__PURE__ */ jsx24(
                                 CanvasPrimitiveRenderer,
                                 {
                                   transform,
@@ -15834,8 +16466,8 @@ var calculateBoardSizeKey = (circuitJson) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
-var defaultTransform = compose7(translate11(400, 300), scale5(40, -40));
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var defaultTransform = compose8(translate12(400, 300), scale6(40, -40));
 var PCBViewer = ({
   circuitJson,
   debugGraphics,
@@ -15853,7 +16485,7 @@ var PCBViewer = ({
   );
   const [ref, refDimensions] = useMeasure_default();
   const [transform, setTransformInternal] = useState13(defaultTransform);
-  const shouldAllowCanvasInteraction = useCallback11(
+  const shouldAllowCanvasInteraction = useCallback12(
     (event) => {
       const target = event.target;
       if (!(target instanceof Element)) return true;
@@ -15873,8 +16505,8 @@ var PCBViewer = ({
   });
   let [editEvents, setEditEvents] = useState13([]);
   editEvents = editEventsProp ?? editEvents;
-  const initialRenderCompleted = useRef14(false);
-  const touchStartRef = useRef14(null);
+  const initialRenderCompleted = useRef16(false);
+  const touchStartRef = useRef16(null);
   const circuitJsonKey = useMemo9(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]
@@ -15892,15 +16524,15 @@ var PCBViewer = ({
       (elmBounds.height ?? 0) / height2,
       100
     ) * 0.75;
-    const targetTransform = compose7(
-      translate11((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-      scale5(scaleFactor, -scaleFactor, 0, 0),
-      translate11(-center.x, -center.y)
+    const targetTransform = compose8(
+      translate12((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+      scale6(scaleFactor, -scaleFactor, 0, 0),
+      translate12(-center.x, -center.y)
     );
     setTransform(targetTransform);
     return;
   };
-  useEffect17(() => {
+  useEffect19(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -15909,7 +16541,7 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  useEffect17(() => {
+  useEffect19(() => {
     if (initialRenderCompleted.current === true) {
       resetTransform();
     }
@@ -15943,23 +16575,24 @@ var PCBViewer = ({
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx24("div", { ref, children: /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsx25("div", { ref, children: /* @__PURE__ */ jsxs17(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 CanvasElementsRenderer,
                 {
                   transform,
+                  setTransform,
                   height,
                   width: refDimensions.width,
                   allowEditing,
@@ -15981,11 +16614,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx24(ToastContainer, {})
+              /* @__PURE__ */ jsx25(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx24(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx25(
           "div",
           {
             onClick: () => {
@@ -16022,7 +16655,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx24(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 style: {