@tscircuit/pcb-viewer 1.11.365 → 1.11.367

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,11 @@ var getPopupPosition = (errorCenter, containerRef) => {
   };
 };
 
-// src/components/ErrorOverlay.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var ErrorSVG = ({
-  screenPort1,
-  screenPort2,
-  errorCenter,
-  canLineBeDrawn,
-  isHighlighted = false
-}) => /* @__PURE__ */ jsx10(
+// src/components/FocusMarkerSVG.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var FocusMarkerSVG = ({
+  center
+}) => /* @__PURE__ */ jsxs8(
   "svg",
   {
     style: {
@@ -12291,54 +12684,78 @@ var ErrorSVG = ({
       top: 0,
       pointerEvents: "none",
       mixBlendMode: "difference",
-      zIndex: zIndexMap.errorOverlay
+      zIndex: zIndexMap.errorOverlay + 30
     },
     width: "100%",
     height: "100%",
-    children: canLineBeDrawn && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    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: screenPort1.x,
-          y1: screenPort1.y,
-          x2: errorCenter.x,
-          y2: errorCenter.y,
-          strokeWidth: isHighlighted ? 3 : 1.5,
-          strokeDasharray: "2,2",
-          stroke: isHighlighted ? "#ff4444" : "red"
+          x1: center.x + 8,
+          y1: center.y,
+          x2: center.x + 18,
+          y2: center.y,
+          stroke: "#ff6b6b",
+          strokeWidth: 2
         }
       ),
       /* @__PURE__ */ jsx10(
         "line",
         {
-          x1: errorCenter.x,
-          y1: errorCenter.y,
-          x2: screenPort2.x,
-          y2: screenPort2.y,
-          strokeWidth: isHighlighted ? 3 : 1.5,
-          strokeDasharray: "2,2",
-          stroke: isHighlighted ? "#ff4444" : "red"
+          x1: center.x,
+          y1: center.y - 18,
+          x2: center.x,
+          y2: center.y - 8,
+          stroke: "#ff6b6b",
+          strokeWidth: 2
         }
       ),
-      isHighlighted ? /* @__PURE__ */ jsx10(
-        "rect",
+      /* @__PURE__ */ jsx10(
+        "line",
         {
-          x: errorCenter.x - 7,
-          y: errorCenter.y - 7,
-          width: 14,
-          height: 14,
-          transform: `rotate(45 ${errorCenter.x} ${errorCenter.y})`,
-          fill: "#ff4444"
+          x1: center.x,
+          y1: center.y + 8,
+          x2: center.x,
+          y2: center.y + 18,
+          stroke: "#ff6b6b",
+          strokeWidth: 2
         }
-      ) : /* @__PURE__ */ jsx10("circle", { cx: errorCenter.x, cy: errorCenter.y, r: 5, fill: "red" })
-    ] })
+      )
+    ]
   }
 );
-var RouteSVG = ({
-  points,
+
+// src/components/ErrorOverlay.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var ErrorMarkerSVG = ({
   errorCenter,
   isHighlighted = false
-}) => /* @__PURE__ */ jsxs8(
+}) => /* @__PURE__ */ jsx11(
   "svg",
   {
     style: {
@@ -12351,29 +12768,19 @@ var RouteSVG = ({
     },
     width: "100%",
     height: "100%",
-    children: [
-      points.length > 1 && /* @__PURE__ */ jsx10(
-        "polyline",
-        {
-          points: points.map((pt) => `${pt.x},${pt.y}`).join(" "),
-          fill: "none",
-          stroke: isHighlighted ? "#ff4444" : "red",
-          strokeWidth: isHighlighted ? 3 : 1.5,
-          strokeDasharray: "2,2"
-        }
-      ),
-      isHighlighted ? /* @__PURE__ */ jsx10(
-        "rect",
-        {
-          x: errorCenter.x - 7,
-          y: errorCenter.y - 7,
-          width: 14,
-          height: 14,
-          transform: `rotate(45 ${errorCenter.x} ${errorCenter.y})`,
-          fill: "#ff4444"
-        }
-      ) : /* @__PURE__ */ jsx10("circle", { cx: errorCenter.x, cy: errorCenter.y, r: 5, fill: "red" })
-    ]
+    children: /* @__PURE__ */ jsx11(
+      "rect",
+      {
+        x: errorCenter.x - 7,
+        y: errorCenter.y - 7,
+        width: 14,
+        height: 14,
+        transform: `rotate(45 ${errorCenter.x} ${errorCenter.y})`,
+        fill: isHighlighted ? "#ff4444" : "transparent",
+        stroke: isHighlighted ? "#ff4444" : "red",
+        strokeWidth: isHighlighted ? 2.5 : 1.5
+      }
+    )
   }
 );
 var errorMessageStyles = css2`
@@ -12396,15 +12803,19 @@ 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"
+    (el) => el.type === "pcb_trace_error" && !el.message?.includes("Multiple components found with name")
   );
   const viaClearanceErrors = elements.filter(
     (el) => el.type === "pcb_via_clearance_error"
@@ -12412,234 +12823,132 @@ 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);
+  const getScreenErrorCenter = (error) => {
+    const focusCenter = getErrorFocusPoint({
+      error,
+      indexes: elementIndexes
+    });
+    if (!focusCenter || typeof focusCenter.x !== "number" || typeof focusCenter.y !== "number") {
+      return null;
     }
-  });
-  return /* @__PURE__ */ jsxs8("div", { style: { position: "relative" }, ref: containerRef, children: [
+    const screenCenter = applyToPoint11(transform, focusCenter);
+    if (Number.isNaN(screenCenter.x) || Number.isNaN(screenCenter.y)) {
+      return null;
+    }
+    return screenCenter;
+  };
+  let focusScreenCenter = null;
+  if (focusedErrorElement) {
+    focusScreenCenter = getScreenErrorCenter(
+      focusedErrorElement
+    );
+  }
+  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;
-      if (port1 && port2) {
-        const screenPort1 = applyToPoint11(transform, {
-          x: port1.x,
-          y: port1.y
-        });
-        const screenPort2 = applyToPoint11(transform, {
-          x: port2.x,
-          y: port2.y
-        });
-        if (!isShowingDRCErrors) {
-          return null;
-        }
-        const canLineBeDrawn = !(Number.isNaN(screenPort1.x) || Number.isNaN(screenPort1.y) || Number.isNaN(screenPort2.x) || Number.isNaN(screenPort2.y));
-        const errorCenter = {
-          x: (screenPort1.x + screenPort2.x) / 2,
-          y: (screenPort1.y + screenPort2.y) / 2
-        };
-        if (Number.isNaN(errorCenter.x) || Number.isNaN(errorCenter.y)) {
-          return null;
-        }
-        const popupPosition = getPopupPosition(errorCenter, containerRef);
-        return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-          /* @__PURE__ */ jsx10(
-            ErrorSVG,
-            {
-              screenPort1,
-              screenPort2,
-              errorCenter,
-              canLineBeDrawn,
-              isHighlighted
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: errorCenter.x - 15,
-                top: errorCenter.y - 15,
-                width: 30,
-                height: 30,
-                zIndex: zIndexMap.errorOverlay + 5,
-                cursor: "pointer",
-                borderRadius: "50%"
-              },
-              onMouseEnter: (e) => {
-                const popup = e.currentTarget.nextElementSibling;
-                if (popup) {
-                  const msg = popup.querySelector(
-                    ".error-message"
-                  );
-                  if (msg) msg.style.opacity = "1";
-                }
-              },
-              onMouseLeave: (e) => {
-                if (!isHighlighted) {
-                  const popup = e.currentTarget.nextElementSibling;
-                  if (popup) {
-                    const msg = popup.querySelector(
-                      ".error-message"
-                    );
-                    if (msg) msg.style.opacity = "0";
-                  }
-                }
+      const errorId = getErrorId(el, index);
+      const isHighlighted = activeErrorId === errorId;
+      if (!isHighlighted && !isShowingDRCErrors) return null;
+      const errorCenter = getScreenErrorCenter(el);
+      if (!errorCenter) return null;
+      const popupPosition = getPopupPosition(errorCenter, containerRef);
+      return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+        /* @__PURE__ */ jsx11(
+          ErrorMarkerSVG,
+          {
+            errorCenter,
+            isHighlighted
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: errorCenter.x - 15,
+              top: errorCenter.y - 15,
+              width: 30,
+              height: 30,
+              zIndex: zIndexMap.errorOverlay + 5,
+              cursor: "pointer",
+              borderRadius: "50%"
+            },
+            onMouseEnter: (e) => {
+              const popup = e.currentTarget.nextElementSibling;
+              if (popup) {
+                const msg = popup.querySelector(
+                  ".error-message"
+                );
+                if (msg) msg.style.opacity = "1";
               }
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                zIndex: isHighlighted ? 200 : 100,
-                left: popupPosition.left,
-                top: popupPosition.top,
-                color: isHighlighted ? "#ff4444" : "red",
-                textAlign: "center",
-                fontFamily: "sans-serif",
-                fontSize: 12,
-                display: isShowingDRCErrors || isHighlighted ? "flex" : "none",
-                flexDirection: "column",
-                alignItems: "center",
-                pointerEvents: "none",
-                transform: popupPosition.transform
-              },
-              children: /* @__PURE__ */ jsx10(
-                "div",
-                {
-                  className: `error-message ${errorMessageStyles}`,
-                  style: {
-                    opacity: isHighlighted ? 1 : 0,
-                    border: `1px solid ${isHighlighted ? "#ff4444" : "red"}`
-                  },
-                  children: el.message
-                }
-              )
-            }
-          )
-        ] }, errorId);
-      }
-      if (trace?.route && (isShowingDRCErrors || isHighlighted)) {
-        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)))
-          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(
-            RouteSVG,
-            {
-              points: screenPoints,
-              errorCenter,
-              isHighlighted
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: errorCenter.x - 15,
-                top: errorCenter.y - 15,
-                width: 30,
-                height: 30,
-                zIndex: zIndexMap.errorOverlay + 5,
-                cursor: "pointer",
-                borderRadius: "50%"
-              },
-              onMouseEnter: (e) => {
+            },
+            onMouseLeave: (e) => {
+              if (!isHighlighted) {
                 const popup = e.currentTarget.nextElementSibling;
                 if (popup) {
                   const msg = popup.querySelector(
                     ".error-message"
                   );
-                  if (msg) msg.style.opacity = "1";
-                }
-              },
-              onMouseLeave: (e) => {
-                if (!isHighlighted) {
-                  const popup = e.currentTarget.nextElementSibling;
-                  if (popup) {
-                    const msg = popup.querySelector(
-                      ".error-message"
-                    );
-                    if (msg) msg.style.opacity = "0";
-                  }
+                  if (msg) msg.style.opacity = "0";
                 }
               }
             }
-          ),
-          /* @__PURE__ */ jsx10(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                zIndex: isHighlighted ? zIndexMap.errorOverlay + 10 : zIndexMap.errorOverlay + 1,
-                left: popupPosition.left,
-                top: popupPosition.top,
-                color: isHighlighted ? "#ff4444" : "red",
-                textAlign: "center",
-                fontFamily: "sans-serif",
-                fontSize: 12,
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                pointerEvents: "none",
-                transform: popupPosition.transform
-              },
-              children: /* @__PURE__ */ jsx10(
-                "div",
-                {
-                  className: `error-message ${errorMessageStyles}`,
-                  style: {
-                    opacity: isHighlighted ? 1 : 0,
-                    border: `1px solid ${isHighlighted ? "#ff4444" : "red"}`
-                  },
-                  children: el.message
-                }
-              )
-            }
-          )
-        ] }, errorId);
-      }
-      return null;
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              zIndex: isHighlighted ? 200 : 100,
+              left: popupPosition.left,
+              top: popupPosition.top,
+              color: isHighlighted ? "#ff4444" : "red",
+              textAlign: "center",
+              fontFamily: "sans-serif",
+              fontSize: 12,
+              display: isShowingDRCErrors || isHighlighted ? "flex" : "none",
+              flexDirection: "column",
+              alignItems: "center",
+              pointerEvents: "none",
+              transform: popupPosition.transform
+            },
+            children: /* @__PURE__ */ jsx11(
+              "div",
+              {
+                className: `error-message ${errorMessageStyles}`,
+                style: {
+                  opacity: isHighlighted ? 1 : 0,
+                  border: `1px solid ${isHighlighted ? "#ff4444" : "red"}`
+                },
+                children: el.message
+              }
+            )
+          }
+        )
+      ] }, errorId);
     }),
     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,
-        y: el.pcb_center.y
-      });
-      if (Number.isNaN(errorCenter.x) || Number.isNaN(errorCenter.y))
-        return null;
+      const errorCenter = getScreenErrorCenter(el);
+      if (!errorCenter) return null;
       const popupPosition = getPopupPosition(
         { x: errorCenter.x, y: errorCenter.y },
         containerRef
       );
-      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-        /* @__PURE__ */ jsx10(
-          RouteSVG,
+      return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+        /* @__PURE__ */ jsx11(
+          ErrorMarkerSVG,
           {
-            points: [],
             errorCenter,
             isHighlighted
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             style: {
@@ -12674,7 +12983,7 @@ var ErrorOverlay = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "div",
           {
             style: {
@@ -12692,7 +13001,7 @@ var ErrorOverlay = ({
               pointerEvents: "none",
               transform: popupPosition.transform
             },
-            children: /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx11(
               "div",
               {
                 className: `error-message ${errorMessageStyles}`,
@@ -12705,7 +13014,7 @@ var ErrorOverlay = ({
             )
           }
         )
-      ] }, errorId[0]);
+      ] }, errorId);
     }),
     componentErrors.map((el, index) => {
       const componentName = el.component_name || el.message?.match(/name "([^"]+)"/)?.[1];
@@ -12715,8 +13024,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 +13041,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 +13064,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 +13084,7 @@ var ErrorOverlay = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -12810,7 +13119,7 @@ var ErrorOverlay = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "div",
             {
               style: {
@@ -12828,7 +13137,7 @@ var ErrorOverlay = ({
                 pointerEvents: "none",
                 transform: popupPosition.transform
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx11(
                 "div",
                 {
                   className: `error-message ${errorMessageStyles}`,
@@ -12841,9 +13150,10 @@ var ErrorOverlay = ({
               )
             }
           )
-        ] }, errorId);
+        ] }, `${errorId}_${compIndex}`);
       });
-    })
+    }),
+    focusScreenCenter && /* @__PURE__ */ jsx11(FocusMarkerSVG, { center: focusScreenCenter })
   ] });
 };
 
@@ -12917,7 +13227,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 +13319,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 +13331,7 @@ var HighlightedPrimitiveBoxWithText = ({
           pointerEvents: "none",
           transform: "translateX(-50%)"
         },
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           "div",
           {
             style: {
@@ -13047,7 +13357,7 @@ var HighlightedPrimitiveBoxWithText = ({
   if (label.trim().length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -13061,7 +13371,7 @@ var HighlightedPrimitiveBoxWithText = ({
         transform: `rotate(${-rotation}deg)`,
         transformOrigin: "center center"
       },
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
@@ -13077,7 +13387,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 +13435,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 +13479,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 Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var AnchorOffsetOverlay = ({
   targets,
   transform,
@@ -13192,7 +13502,7 @@ var AnchorOffsetOverlay = ({
       anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "div",
     {
       style: {
@@ -13205,7 +13515,7 @@ var AnchorOffsetOverlay = ({
         pointerEvents: "none",
         zIndex: zIndexMap.dimensionOverlay
       },
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         "svg",
         {
           style: {
@@ -13235,8 +13545,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 +13558,7 @@ var AnchorOffsetOverlay = ({
                     strokeDasharray: VISUAL_CONFIG.LINE_DASH_PATTERN
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(
                   "line",
                   {
                     x1: targetScreen.x,
@@ -13260,7 +13570,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 +13582,8 @@ var AnchorOffsetOverlay = ({
                   }
                 ) : (
                   // assumes "group"
-                  /* @__PURE__ */ jsxs9(Fragment5, { children: [
-                    /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsxs10(Fragment4, { children: [
+                    /* @__PURE__ */ jsx13(
                       "line",
                       {
                         x1: targetScreen.x - VISUAL_CONFIG.ANCHOR_MARKER_SIZE,
@@ -13284,7 +13594,7 @@ var AnchorOffsetOverlay = ({
                         strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                       }
                     ),
-                    /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13(
                       "line",
                       {
                         x1: targetScreen.x,
@@ -13297,7 +13607,7 @@ var AnchorOffsetOverlay = ({
                     )
                   ] })
                 ),
-                shouldShowXLabel && /* @__PURE__ */ jsx12(
+                shouldShowXLabel && /* @__PURE__ */ jsx13(
                   "foreignObject",
                   {
                     x: Math.min(anchorMarkerScreen.x, targetScreen.x),
@@ -13305,10 +13615,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 +13626,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 +13645,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 +13657,7 @@ var AnchorOffsetOverlay = ({
                   strokeWidth: VISUAL_CONFIG.ANCHOR_MARKER_STROKE_WIDTH
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 "line",
                 {
                   x1: anchorScreen.x,
@@ -13367,7 +13677,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 +13764,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 +13776,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 +13892,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 +13905,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 +13948,7 @@ var ComponentBoundingBoxOverlay = ({
     renderData.push({ component, bbox, group });
   }
   if (renderData.length === 0) return null;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       style: {
@@ -13651,7 +13961,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 +13987,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 +14001,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeDasharray: "4,4"
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "line",
                 {
                   x1: componentCenterScreen.x - 6,
@@ -13702,7 +14012,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "line",
                 {
                   x1: componentCenterScreen.x,
@@ -13713,7 +14023,7 @@ var ComponentBoundingBoxOverlay = ({
                   strokeWidth: 1.5
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "circle",
                 {
                   cx: componentCenterScreen.x,
@@ -13733,7 +14043,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 +14092,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 +14104,7 @@ var PanelAnchorOffsetOverlay = ({
 };
 
 // src/components/MouseElementTracker.tsx
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, 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 +14291,7 @@ var MouseElementTracker = ({
     setMousedPrimitives(newMousedPrimitives);
     onMouseHoverOverPrimitives(newMousedPrimitives);
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: containerRef,
@@ -14005,7 +14315,7 @@ var MouseElementTracker = ({
       },
       children: [
         children,
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           ElementOverlayBox,
           {
             elements,
@@ -14013,8 +14323,8 @@ var MouseElementTracker = ({
             highlightedPrimitives
           }
         ),
-        transform && /* @__PURE__ */ jsxs11(Fragment6, { children: [
-          /* @__PURE__ */ jsx17(
+        transform && /* @__PURE__ */ jsxs12(Fragment5, { children: [
+          /* @__PURE__ */ jsx18(
             BoardAnchorOffsetOverlay,
             {
               elements,
@@ -14024,7 +14334,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             GroupAnchorOffsetOverlay,
             {
               elements,
@@ -14034,7 +14344,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             ComponentBoundingBoxOverlay,
             {
               elements,
@@ -14044,7 +14354,7 @@ var MouseElementTracker = ({
               containerHeight: height
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             PanelAnchorOffsetOverlay,
             {
               elements,
@@ -14064,7 +14374,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 +14610,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 +14639,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 +14702,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 +14720,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 +14741,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 +14752,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.364",
+  version: "1.11.366",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -14597,7 +14907,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 +14915,7 @@ var ToolbarButton = ({
   ...props
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ...props,
@@ -14633,8 +14943,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 +15033,7 @@ var CopyErrorButton = ({
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(
     () => onCopy(errorMessage, errorId)
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "button",
     {
       type: "button",
@@ -14664,7 +15053,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 +15062,9 @@ var ToolbarErrorDropdown = ({
   isOpen,
   isSmallScreen,
   onToggle,
-  setHoveredErrorId
+  onClose,
+  setHoveredErrorId,
+  setFocusedErrorId
 }) => {
   const [copiedErrorId, setCopiedErrorId] = useState10(null);
   const [collapsedErrorGroups, setCollapsedErrorGroups] = useState10(
@@ -14683,6 +15074,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 +15086,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 +15101,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 +15112,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 +15145,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 +15189,7 @@ var ToolbarErrorDropdown = ({
                       toggleErrorGroup(errorType);
                     },
                     children: [
-                      /* @__PURE__ */ jsxs14(
+                      /* @__PURE__ */ jsxs15(
                         "div",
                         {
                           style: {
@@ -14816,7 +15199,7 @@ var ToolbarErrorDropdown = ({
                             color: "#ff6b6b"
                           },
                           children: [
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx22(
                               "div",
                               {
                                 style: {
@@ -14829,7 +15212,7 @@ var ToolbarErrorDropdown = ({
                                 children: "\u203A"
                               }
                             ),
-                            /* @__PURE__ */ jsx21(
+                            /* @__PURE__ */ jsx22(
                               "div",
                               {
                                 style: {
@@ -14842,7 +15225,7 @@ var ToolbarErrorDropdown = ({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx21(
+                      /* @__PURE__ */ jsx22(
                         "div",
                         {
                           style: {
@@ -14860,14 +15243,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 +15269,9 @@ var ToolbarErrorDropdown = ({
                             },
                             onMouseLeave: (e) => {
                               e.currentTarget.style.backgroundColor = "#2a2a2a";
-                              setHoveredErrorId(null);
+                              if (!isSelectedError(errorId)) {
+                                setHoveredErrorId(null);
+                              }
                             },
                             onTouchStart: (e) => {
                               e.stopPropagation();
@@ -14897,15 +15282,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 +15302,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 +15337,7 @@ var ToolbarErrorDropdown = ({
                             ]
                           }
                         ),
-                        isExpanded && /* @__PURE__ */ jsxs14(
+                        isExpanded && /* @__PURE__ */ jsxs15(
                           "div",
                           {
                             "data-error-id": index,
@@ -14951,7 +15349,7 @@ var ToolbarErrorDropdown = ({
                               position: "relative"
                             },
                             children: [
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 "div",
                                 {
                                   style: {
@@ -14969,7 +15367,7 @@ var ToolbarErrorDropdown = ({
                                   children: errorMessage
                                 }
                               ),
-                              /* @__PURE__ */ jsx21(
+                              /* @__PURE__ */ jsx22(
                                 CopyErrorButton,
                                 {
                                   errorId,
@@ -15001,10 +15399,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 +15419,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 +15441,7 @@ var CheckboxMenuItem = ({
   onClick
 }) => {
   const { style: touchStyle, ...touchHandlers } = useMobileTouch(onClick);
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: css3`
@@ -15063,16 +15461,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 +15490,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 +15519,8 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingSilkscreen,
     setIsShowingFabricationNotes,
     setPcbGroupViewMode,
-    setHoveredErrorId
+    setHoveredErrorId,
+    setFocusedErrorId
   } = useGlobalStore((s) => ({
     isMouseOverContainer: s.is_mouse_over_container,
     setIsMouseOverContainer: s.setIsMouseOverContainer,
@@ -15158,13 +15557,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 +15582,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 +15628,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 +15655,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 +15694,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       onMouseMove: handleMouseMove,
       children: [
         children,
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             style: {
@@ -15313,7 +15715,7 @@ var ToolbarOverlay = ({ children, elements }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           "div",
           {
             "data-toolbar-overlay": true,
@@ -15343,7 +15745,7 @@ var ToolbarOverlay = ({ children, elements }) => {
               fontFamily: "sans-serif"
             },
             children: [
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs16(
                 ToolbarButton,
                 {
                   isSmallScreen,
@@ -15354,10 +15756,10 @@ var ToolbarOverlay = ({ children, elements }) => {
                     }
                   },
                   children: [
-                    /* @__PURE__ */ jsxs15("div", { children: [
+                    /* @__PURE__ */ jsxs16("div", { children: [
                       "layer:",
                       " ",
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         "span",
                         {
                           style: {
@@ -15369,7 +15771,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 +15785,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 +15858,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                         },
                         children: [
                           "View",
-                          /* @__PURE__ */ jsx22(
+                          /* @__PURE__ */ jsx23(
                             "span",
                             {
                               style: {
@@ -15469,8 +15873,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 +15886,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Autorouting Animation",
@@ -15494,7 +15898,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show DRC Errors",
@@ -15504,7 +15908,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Copper Pours",
@@ -15516,7 +15920,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Courtyards",
@@ -15526,7 +15930,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Solder Mask",
@@ -15536,7 +15940,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Silkscreen",
@@ -15546,7 +15950,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Fabrication Notes",
@@ -15558,7 +15962,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show Group Anchor Offsets",
@@ -15570,7 +15974,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx22(
+                      /* @__PURE__ */ jsx23(
                         CheckboxMenuItem,
                         {
                           label: "Show PCB Groups",
@@ -15580,8 +15984,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 +15995,7 @@ var ToolbarOverlay = ({ children, elements }) => {
                             }
                           }
                         ),
-                        /* @__PURE__ */ jsx22(
+                        /* @__PURE__ */ jsx23(
                           RadioMenuItem,
                           {
                             label: "Show Named Groups",
@@ -15615,13 +16019,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 +16046,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 +16122,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 +16155,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 +16171,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 +16180,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 +16284,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 +16303,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 +16323,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 +16342,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 +16359,7 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  useEffect17(() => {
+  useEffect19(() => {
     if (initialRenderCompleted.current === true) {
       resetTransform();
     }
@@ -15943,23 +16393,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 +16432,11 @@ var PCBViewer = ({
                 },
                 refDimensions.width
               ),
-              /* @__PURE__ */ jsx24(ToastContainer, {})
+              /* @__PURE__ */ jsx25(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx24(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx25(
           "div",
           {
             onClick: () => {
@@ -16022,7 +16473,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx24(
+            children: /* @__PURE__ */ jsx25(
               "div",
               {
                 style: {