@tscircuit/pcb-viewer 1.11.434 → 1.11.435

package/dist/index.js

@@ -10132,7 +10132,7 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
 };
 
 // src/PCBViewer.tsx
-import { compose as compose10, scale as scale6, translate as translate14 } from "transformation-matrix";
+import { compose as compose11, scale as scale6, translate as translate15 } from "transformation-matrix";
 
 // node_modules/use-mouse-matrix-transform/dist/chunk-TGYMZPTI.js
 import { compose as compose3, translate as translate7, scale } from "transformation-matrix";
@@ -10641,6 +10641,14 @@ var getFullConnectivityMapFromCircuitJson = (circuitJson) => {
   return new ConnectivityMap(netMap);
 };
 
+// src/lib/convert-element-to-primitive.ts
+import {
+  applyToPoint as applyToPoint3,
+  compose as compose5,
+  rotateDEG as rotateDEG2,
+  translate as translate9
+} from "transformation-matrix";
+
 // src/lib/util/expand-stroke.ts
 function getExpandedStroke(strokeInput, defaultWidth) {
   if (strokeInput.length < 2) {
@@ -11335,6 +11343,7 @@ var convertElementToPrimitives = (element, allElements, metadataIndex) => {
         const {
           x,
           y,
+          ccw_rotation,
           pad_outline,
           hole_shape,
           hole_diameter,
@@ -11346,17 +11355,20 @@ var convertElementToPrimitives = (element, allElements, metadataIndex) => {
         } = element;
         const parsed_hole_offset_x = distance.parse(hole_offset_x ?? 0);
         const parsed_hole_offset_y = distance.parse(hole_offset_y ?? 0);
-        const pcb_outline = pad_outline;
+        const transformPadLocalToBoard = compose5(
+          translate9(x, y),
+          rotateDEG2(ccw_rotation ?? 0)
+        );
         const padPrimitives = [];
-        if (pcb_outline && Array.isArray(pcb_outline)) {
-          const translatedPoints = normalizePolygonPoints(pcb_outline).map(
-            (p) => ({ x: p.x + x, y: p.y + y })
+        if (Array.isArray(pad_outline)) {
+          const points = normalizePolygonPoints(pad_outline).map(
+            (p) => applyToPoint3(transformPadLocalToBoard, p)
           );
           for (const layer of layers || ["top", "bottom"]) {
             padPrimitives.push({
               _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
               pcb_drawing_type: "polygon",
-              points: translatedPoints,
+              points,
               layer,
               _element: element,
               _parent_pcb_component,
@@ -11365,10 +11377,10 @@ var convertElementToPrimitives = (element, allElements, metadataIndex) => {
             });
           }
         }
-        const holeCenter = {
-          x: x + parsed_hole_offset_x,
-          y: y + parsed_hole_offset_y
-        };
+        const holeCenter = applyToPoint3(transformPadLocalToBoard, {
+          x: parsed_hole_offset_x,
+          y: parsed_hole_offset_y
+        });
         const holePrimitives = [];
         if (hole_shape === "circle") {
           holePrimitives.push({
@@ -11390,6 +11402,7 @@ var convertElementToPrimitives = (element, allElements, metadataIndex) => {
             y: holeCenter.y,
             rX: (hole_width ?? 0) / 2,
             rY: (hole_height ?? 0) / 2,
+            ccw_rotation,
             layer: "drill",
             _element: element,
             _parent_pcb_component,
@@ -11407,7 +11420,7 @@ var convertElementToPrimitives = (element, allElements, metadataIndex) => {
             _element: element,
             _parent_pcb_component,
             _parent_source_component,
-            ccw_rotation: element.ccw_rotation
+            ccw_rotation
           });
         }
         return [...padPrimitives, ...holePrimitives];
@@ -11560,11 +11573,16 @@ var getPrimitiveBoundingBox = (primitive) => {
       };
     }
     case "oval": {
+      const ccwRotationRadians = (primitive.ccw_rotation ?? 0) * Math.PI / 180;
+      const cos = Math.cos(ccwRotationRadians);
+      const sin = Math.sin(ccwRotationRadians);
+      const halfWidth = Math.hypot(primitive.rX * cos, primitive.rY * sin);
+      const halfHeight = Math.hypot(primitive.rX * sin, primitive.rY * cos);
       return {
-        minX: primitive.x - primitive.rX,
-        maxX: primitive.x + primitive.rX,
-        minY: primitive.y - primitive.rY,
-        maxY: primitive.y + primitive.rY
+        minX: primitive.x - halfWidth,
+        maxX: primitive.x + halfWidth,
+        minY: primitive.y - halfHeight,
+        maxY: primitive.y + halfHeight
       };
     }
     case "pill": {
@@ -11758,7 +11776,7 @@ function addInteractionMetadataToPrimitives({
 import {
   getBoundsFromPoints as getBoundsFromPoints2
 } from "@tscircuit/math-utils";
-import { compose as compose5, scale as scale3, translate as translate9 } from "transformation-matrix";
+import { compose as compose6, scale as scale3, translate as translate10 } from "transformation-matrix";
 var buildErrorPreviewElementIndexes = (elements) => {
   const tracesById = /* @__PURE__ */ new Map();
   const portsById = /* @__PURE__ */ new Map();
@@ -12049,10 +12067,10 @@ var createTransformForBounds = ({
   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 compose5(
-    translate9(width / 2, height / 2),
+  return compose6(
+    translate10(width / 2, height / 2),
     scale3(scaleFactor, -scaleFactor, 0, 0),
-    translate9(-center.x, -center.y)
+    translate10(-center.x, -center.y)
   );
 };
 var getRelatedIdsForError = (error) => {
@@ -12287,7 +12305,7 @@ function getXRayGroups(netId, elements, connectivityMap) {
 
 // src/components/CanvasElementsRenderer.tsx
 import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef16, useState as useState13 } from "react";
-import { applyToPoint as applyToPoint21, inverse as inverse6 } from "transformation-matrix";
+import { applyToPoint as applyToPoint22, inverse as inverse6 } from "transformation-matrix";
 
 // src/lib/get-pad-component.ts
 var getPadComponent = (pad, elements) => {
@@ -12314,11 +12332,11 @@ import { CircuitToCanvasDrawer as CircuitToCanvasDrawer17 } from "circuit-to-can
 // src/lib/Drawer.ts
 import colorParser from "color";
 import {
-  applyToPoint as applyToPoint3,
-  compose as compose6,
+  applyToPoint as applyToPoint4,
+  compose as compose7,
   identity as identity3,
   inverse,
-  translate as translate10
+  translate as translate11
 } from "transformation-matrix";
 
 // src/lib/colors.ts
@@ -12640,7 +12658,7 @@ var Drawer = class {
     );
     this.transform = identity3();
     this.transform.d *= -1;
-    this.transform = compose6(this.transform, translate10(0, -500));
+    this.transform = compose7(this.transform, translate11(0, -500));
     this.lastPoint = { x: 0, y: 0 };
     this.equip({});
   }
@@ -12663,8 +12681,8 @@ var Drawer = class {
   }
   drawMeshPattern(x, y, width, height, spacing, angle = 45) {
     const ctx = this.getLayerCtx();
-    const [x1, y1] = applyToPoint3(this.transform, [x, y]);
-    const [x2, y2] = applyToPoint3(this.transform, [x + width, y + height]);
+    const [x1, y1] = applyToPoint4(this.transform, [x, y]);
+    const [x2, y2] = applyToPoint4(this.transform, [x + width, y + height]);
     const spacing$ = scaleOnly(this.transform, spacing);
     ctx.lineWidth = 1;
     ctx.strokeStyle = this.aperture.color;
@@ -12694,8 +12712,8 @@ var Drawer = class {
     stroke_width,
     roundness
   }) {
-    const [x1$, y1$] = applyToPoint3(this.transform, [x - w / 2, y - h / 2]);
-    const [x2$, y2$] = applyToPoint3(this.transform, [x + w / 2, y + h / 2]);
+    const [x1$, y1$] = applyToPoint4(this.transform, [x - w / 2, y - h / 2]);
+    const [x2$, y2$] = applyToPoint4(this.transform, [x + w / 2, y + h / 2]);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     const radius$ = roundness ? scaleOnly(this.transform, roundness) : 0;
@@ -12765,11 +12783,11 @@ var Drawer = class {
   rotatedRect(x, y, w, h, ccw_rotation, roundness, mesh_fill) {
     const ctx = this.getLayerCtx();
     this.applyAperture();
-    const [x1$, y1$] = applyToPoint3(this.transform, [x - w / 2, y - h / 2]);
-    const [x2$, y2$] = applyToPoint3(this.transform, [x + w / 2, y + h / 2]);
+    const [x1$, y1$] = applyToPoint4(this.transform, [x - w / 2, y - h / 2]);
+    const [x2$, y2$] = applyToPoint4(this.transform, [x + w / 2, y + h / 2]);
     const radius$ = roundness ? scaleOnly(this.transform, roundness) : 0;
     ctx.save();
-    const [centerX, centerY] = applyToPoint3(this.transform, [x, y]);
+    const [centerX, centerY] = applyToPoint4(this.transform, [x, y]);
     ctx.translate(centerX, centerY);
     const cw_rotation = 360 - ccw_rotation;
     if (ccw_rotation) ctx.rotate(cw_rotation * Math.PI / 180);
@@ -12805,7 +12823,7 @@ var Drawer = class {
     const ctx = this.getLayerCtx();
     this.applyAperture();
     ctx.save();
-    const [centerX, centerY] = applyToPoint3(this.transform, [x, y]);
+    const [centerX, centerY] = applyToPoint4(this.transform, [x, y]);
     ctx.translate(centerX, centerY);
     const cw_rotation = 360 - ccw_rotation;
     if (ccw_rotation) ctx.rotate(cw_rotation * Math.PI / 180);
@@ -12815,7 +12833,7 @@ var Drawer = class {
   }
   circle(x, y, r, mesh_fill, is_filled = true) {
     const r$ = scaleOnly(this.transform, r);
-    const [x$, y$] = applyToPoint3(this.transform, [x, y]);
+    const [x$, y$] = applyToPoint4(this.transform, [x, y]);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     if (mesh_fill) {
@@ -12834,19 +12852,26 @@ var Drawer = class {
       ctx.fill();
     }
   }
-  oval(x, y, rx, ry) {
+  oval({
+    x,
+    y,
+    rx,
+    ry,
+    ccwRotationDegrees = 0
+  }) {
     const rx$ = scaleOnly(this.transform, rx);
     const ry$ = scaleOnly(this.transform, ry);
-    const [x$, y$] = applyToPoint3(this.transform, [x, y]);
+    const [x$, y$] = applyToPoint4(this.transform, [x, y]);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     ctx.beginPath();
-    ctx.ellipse(x$, y$, rx$, ry$, 0, 0, 2 * Math.PI);
+    const cwRotationRadians = -ccwRotationDegrees * Math.PI / 180;
+    ctx.ellipse(x$, y$, rx$, ry$, cwRotationRadians, 0, 2 * Math.PI);
     ctx.fill();
     ctx.closePath();
   }
   pill(x, y, w, h) {
-    const [x$, y$] = applyToPoint3(this.transform, [x - w / 2, y + h / 2]);
+    const [x$, y$] = applyToPoint4(this.transform, [x - w / 2, y + h / 2]);
     const width$ = scaleOnly(this.transform, w);
     const height$ = scaleOnly(this.transform, h);
     const radius = Math.min(width$, height$) / 2;
@@ -12873,7 +12898,7 @@ var Drawer = class {
     this.applyAperture();
     const ctx = this.getLayerCtx();
     const transformedPoints = points.map(
-      (point2) => applyToPoint3(this.transform, [point2.x, point2.y])
+      (point2) => applyToPoint4(this.transform, [point2.x, point2.y])
     );
     ctx.beginPath();
     ctx.moveTo(transformedPoints[0][0], transformedPoints[0][1]);
@@ -12890,7 +12915,7 @@ var Drawer = class {
   }
   /* NOTE: This is not gerber compatible */
   debugText(text, x, y) {
-    const [x$, y$] = applyToPoint3(this.transform, [x, y]);
+    const [x$, y$] = applyToPoint4(this.transform, [x, y]);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     ctx.font = "10px sans-serif";
@@ -12999,11 +13024,11 @@ var Drawer = class {
     this.lastPoint = { x, y };
   }
   lineTo(x, y) {
-    const [x$, y$] = applyToPoint3(this.transform, [x, y]);
+    const [x$, y$] = applyToPoint4(this.transform, [x, y]);
     const { size, shape, mode } = this.aperture;
     const size$ = scaleOnly(this.transform, size);
     const { lastPoint } = this;
-    const lastPoint$ = applyToPoint3(this.transform, lastPoint);
+    const lastPoint$ = applyToPoint4(this.transform, lastPoint);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     if (shape === "square")
@@ -13027,7 +13052,7 @@ var Drawer = class {
     const processRing = (ring) => {
       if (ring.vertices.length === 0) return;
       const startPoint = ring.vertices[0];
-      const t_start_point = applyToPoint3(this.transform, [
+      const t_start_point = applyToPoint4(this.transform, [
         startPoint.x,
         startPoint.y
       ]);
@@ -13041,7 +13066,7 @@ var Drawer = class {
           const dy = p2.y - p1.y;
           const chord = Math.sqrt(dx * dx + dy * dy);
           if (chord < 1e-9) {
-            const t_p2 = applyToPoint3(this.transform, [p2.x, p2.y]);
+            const t_p2 = applyToPoint4(this.transform, [p2.x, p2.y]);
             ctx.lineTo(t_p2[0], t_p2[1]);
             continue;
           }
@@ -13065,7 +13090,7 @@ var Drawer = class {
           } else if (bulge < 0 && endAngle > startAngle) {
             endAngle -= 2 * Math.PI;
           }
-          const t_center = applyToPoint3(this.transform, [cx, cy]);
+          const t_center = applyToPoint4(this.transform, [cx, cy]);
           const t_radius = scaleOnly(this.transform, radius);
           ctx.arc(
             t_center[0],
@@ -13076,7 +13101,7 @@ var Drawer = class {
             bulge > 0
           );
         } else {
-          const t_p2 = applyToPoint3(this.transform, [p2.x, p2.y]);
+          const t_p2 = applyToPoint4(this.transform, [p2.x, p2.y]);
           ctx.lineTo(t_p2[0], t_p2[1]);
         }
       }
@@ -13607,24 +13632,24 @@ function drawPlatedHolePads({
 }
 
 // src/lib/util/rotate-text.ts
-import { compose as compose7, translate as translate11, rotate as rotate2, applyToPoint as applyToPoint4 } from "transformation-matrix";
+import { compose as compose8, translate as translate12, rotate as rotate2, applyToPoint as applyToPoint5 } from "transformation-matrix";
 function rotateText(rotateTextParams) {
   const { lines, anchorPoint, ccwRotation } = rotateTextParams;
   if (!ccwRotation) return lines;
   const rad = ccwRotation * Math.PI / 180;
   const rotationMatrix = rotate2(rad);
-  const transform = compose7(
-    translate11(anchorPoint.x, anchorPoint.y),
+  const transform = compose8(
+    translate12(anchorPoint.x, anchorPoint.y),
     rotationMatrix,
-    translate11(-anchorPoint.x, -anchorPoint.y)
+    translate12(-anchorPoint.x, -anchorPoint.y)
   );
-  applyToPoint4(transform, anchorPoint);
+  applyToPoint5(transform, anchorPoint);
   return lines.map((line2) => ({
     ...line2,
-    x1: applyToPoint4(transform, { x: line2.x1, y: line2.y1 }).x,
-    y1: applyToPoint4(transform, { x: line2.x1, y: line2.y1 }).y,
-    x2: applyToPoint4(transform, { x: line2.x2, y: line2.y2 }).x,
-    y2: applyToPoint4(transform, { x: line2.x2, y: line2.y2 }).y
+    x1: applyToPoint5(transform, { x: line2.x1, y: line2.y1 }).x,
+    y1: applyToPoint5(transform, { x: line2.x1, y: line2.y1 }).y,
+    x2: applyToPoint5(transform, { x: line2.x2, y: line2.y2 }).x,
+    y2: applyToPoint5(transform, { x: line2.x2, y: line2.y2 }).y
   }));
 }
 
@@ -13940,7 +13965,13 @@ var drawOval = (drawer, oval) => {
     color: getColor(oval),
     layer: oval.layer
   });
-  drawer.oval(oval.x, oval.y, oval.rX, oval.rY);
+  drawer.oval({
+    x: oval.x,
+    y: oval.y,
+    rx: oval.rX,
+    ry: oval.rY,
+    ccwRotationDegrees: oval.ccw_rotation
+  });
 };
 var drawPill = (drawer, pill) => {
   drawer.equip({
@@ -14696,7 +14727,7 @@ var pngSignature = Uint8Array.of(137, 80, 78, 71, 13, 10, 26, 10);
 var latin1Decoder = new TextDecoder("latin1");
 
 // node_modules/graphics-debug/dist/chunk-FLFF6QXL.js
-import { applyToPoint as applyToPoint5, inverse as inverse2 } from "transformation-matrix";
+import { applyToPoint as applyToPoint6, inverse as inverse2 } from "transformation-matrix";
 var EPSILON = 1e-9;
 var isWithin = (value, min, max) => {
   return value >= min - EPSILON && value <= max + EPSILON;
@@ -14766,10 +14797,10 @@ function clipInfiniteLineToBounds(infiniteLine, bounds) {
 function getViewportBoundsFromMatrix(matrix2, width, height) {
   const screenToReal = inverse2(matrix2);
   const corners = [
-    applyToPoint5(screenToReal, { x: 0, y: 0 }),
-    applyToPoint5(screenToReal, { x: width, y: 0 }),
-    applyToPoint5(screenToReal, { x: 0, y: height }),
-    applyToPoint5(screenToReal, { x: width, y: height })
+    applyToPoint6(screenToReal, { x: 0, y: 0 }),
+    applyToPoint6(screenToReal, { x: width, y: 0 }),
+    applyToPoint6(screenToReal, { x: 0, y: height }),
+    applyToPoint6(screenToReal, { x: width, y: height })
   ];
   return {
     minX: Math.min(...corners.map((p) => p.x)),
@@ -14784,7 +14815,7 @@ var FONT_SIZE_WIDTH_RATIO = 0.6;
 var FONT_SIZE_HEIGHT_RATIO = 1;
 
 // node_modules/graphics-debug/dist/chunk-MLQPMI4V.js
-import { applyToPoint as applyToPoint6 } from "transformation-matrix";
+import { applyToPoint as applyToPoint7 } from "transformation-matrix";
 var getDistanceBetweenPoints = (a, b) => {
   return Math.hypot(a.x - b.x, a.y - b.y);
 };
@@ -14833,9 +14864,9 @@ var getRectCornersWithAngle = (rect, angleRadians) => {
 };
 var getProjectedRectGeometry = (rect, matrix2) => {
   const corners = getRectCornersForMatrix(rect, matrix2).map(
-    (point2) => applyToPoint6(matrix2, point2)
+    (point2) => applyToPoint7(matrix2, point2)
   );
-  const center = applyToPoint6(matrix2, rect.center);
+  const center = applyToPoint7(matrix2, rect.center);
   const width = getDistanceBetweenPoints(corners[0], corners[1]);
   const height = getDistanceBetweenPoints(corners[1], corners[2]);
   const angleRadians = corners.length >= 2 ? Math.atan2(corners[1].y - corners[0].y, corners[1].x - corners[0].x) : 0;
@@ -15013,10 +15044,10 @@ function getInlineLabelLayout(shaftStart, shaftEnd, {
 
 // node_modules/graphics-debug/dist/chunk-TKCBDTT7.js
 import {
-  applyToPoint as applyToPoint7,
-  compose as compose8,
+  applyToPoint as applyToPoint8,
+  compose as compose9,
   scale as scale4,
-  translate as translate12
+  translate as translate13
 } from "transformation-matrix";
 var defaultColors = [
   "rgba(239, 68, 68, 0.8)",
@@ -15078,10 +15109,10 @@ function computeTransformFromViewbox(viewbox, canvasWidth, canvasHeight, options
     (canvasWidth - 2 * padding) / width,
     (canvasHeight - 2 * padding) / height
   );
-  return compose8(
-    translate12(canvasWidth / 2, canvasHeight / 2),
+  return compose9(
+    translate13(canvasWidth / 2, canvasHeight / 2),
     scale4(scale_factor, yFlip ? -scale_factor : scale_factor),
-    translate12(-(bounds.minX + width / 2), -(bounds.minY + height / 2))
+    translate13(-(bounds.minX + width / 2), -(bounds.minY + height / 2))
   );
 }
 function getBounds(graphics) {
@@ -15207,7 +15238,7 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
   }
   if (graphics.circles && graphics.circles.length > 0) {
     graphics.circles.forEach((circle2) => {
-      const projected = applyToPoint7(matrix2, circle2.center);
+      const projected = applyToPoint8(matrix2, circle2.center);
       const scaledRadius = circle2.radius * Math.abs(matrix2.a);
       ctx.beginPath();
       ctx.arc(projected.x, projected.y, scaledRadius, 0, 2 * Math.PI);
@@ -15225,7 +15256,7 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
     graphics.polygons.forEach((polygon2) => {
       if (polygon2.points.length === 0) return;
       const projectedPoints = polygon2.points.map(
-        (point2) => applyToPoint7(matrix2, point2)
+        (point2) => applyToPoint8(matrix2, point2)
       );
       ctx.beginPath();
       ctx.moveTo(projectedPoints[0].x, projectedPoints[0].y);
@@ -15249,8 +15280,8 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
   if (graphics.arrows && graphics.arrows.length > 0) {
     graphics.arrows.forEach((arrow, arrowIndex) => {
       const geometry = getArrowGeometry(arrow);
-      const shaftStart = applyToPoint7(matrix2, geometry.shaftStart);
-      const shaftEnd = applyToPoint7(matrix2, geometry.shaftEnd);
+      const shaftStart = applyToPoint8(matrix2, geometry.shaftStart);
+      const shaftEnd = applyToPoint8(matrix2, geometry.shaftEnd);
       const color9 = arrow.color || defaultColors[arrowIndex % defaultColors.length];
       const scaleFactor = Math.hypot(matrix2.a, matrix2.b);
       ctx.strokeStyle = color9;
@@ -15263,9 +15294,9 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
       ctx.lineTo(shaftEnd.x, shaftEnd.y);
       ctx.stroke();
       geometry.heads.forEach((head) => {
-        const tip = applyToPoint7(matrix2, head.tip);
-        const leftWing = applyToPoint7(matrix2, head.leftWing);
-        const rightWing = applyToPoint7(matrix2, head.rightWing);
+        const tip = applyToPoint8(matrix2, head.tip);
+        const leftWing = applyToPoint8(matrix2, head.leftWing);
+        const rightWing = applyToPoint8(matrix2, head.rightWing);
         ctx.beginPath();
         ctx.moveTo(tip.x, tip.y);
         ctx.lineTo(leftWing.x, leftWing.y);
@@ -15316,10 +15347,10 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
     ).forEach(({ line: line2, originalIndex: lineIndex }) => {
       if (line2.points.length === 0) return;
       ctx.beginPath();
-      const firstPoint = applyToPoint7(matrix2, line2.points[0]);
+      const firstPoint = applyToPoint8(matrix2, line2.points[0]);
       ctx.moveTo(firstPoint.x, firstPoint.y);
       for (let i = 1; i < line2.points.length; i++) {
-        const projected = applyToPoint7(matrix2, line2.points[i]);
+        const projected = applyToPoint8(matrix2, line2.points[i]);
         ctx.lineTo(projected.x, projected.y);
       }
       ctx.strokeStyle = line2.strokeColor || defaultColors[lineIndex % defaultColors.length];
@@ -15358,8 +15389,8 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
       const segment2 = clipInfiniteLineToBounds(line2, viewportBounds);
       if (!segment2) return;
       const [start, end] = segment2;
-      const projectedStart = applyToPoint7(matrix2, start);
-      const projectedEnd = applyToPoint7(matrix2, end);
+      const projectedStart = applyToPoint8(matrix2, start);
+      const projectedEnd = applyToPoint8(matrix2, end);
       ctx.beginPath();
       ctx.moveTo(projectedStart.x, projectedStart.y);
       ctx.lineTo(projectedEnd.x, projectedEnd.y);
@@ -15387,7 +15418,7 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
   }
   if (graphics.texts && graphics.texts.length > 0) {
     graphics.texts.forEach((text) => {
-      const projected = applyToPoint7(matrix2, { x: text.x, y: text.y });
+      const projected = applyToPoint8(matrix2, { x: text.x, y: text.y });
       ctx.fillStyle = text.color || "black";
       ctx.font = `${(text.fontSize ?? 12) * Math.abs(matrix2.a)}px sans-serif`;
       const anchor = text.anchorSide ?? "center";
@@ -15420,7 +15451,7 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
   }
   if (graphics.points && graphics.points.length > 0) {
     graphics.points.forEach((point2, pointIndex) => {
-      const projected = applyToPoint7(matrix2, point2);
+      const projected = applyToPoint8(matrix2, point2);
       ctx.beginPath();
       ctx.arc(projected.x, projected.y, 3, 0, 2 * Math.PI);
       ctx.fillStyle = point2.color || defaultColors[pointIndex % defaultColors.length];
@@ -15436,15 +15467,15 @@ function drawGraphicsToCanvas(graphics, target, options = {}) {
 }
 
 // node_modules/graphics-debug/dist/chunk-5XG5QE5Z.js
-import { applyToPoint as applyToPoint8 } from "transformation-matrix";
+import { applyToPoint as applyToPoint9 } from "transformation-matrix";
 
 // node_modules/graphics-debug/dist/chunk-WDTSQY35.js
 var import_svgson = __toESM(require_svgson_umd(), 1);
 import {
-  applyToPoint as applyToPoint9,
-  compose as compose9,
+  applyToPoint as applyToPoint10,
+  compose as compose10,
   scale as scale5,
-  translate as translate13
+  translate as translate14
 } from "transformation-matrix";
 
 // src/components/DebugGraphicsOverlay.tsx
@@ -15500,7 +15531,7 @@ var DebugGraphicsOverlay = ({
 
 // src/components/DimensionOverlay.tsx
 import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState4 } from "react";
-import { applyToPoint as applyToPoint11, identity as identity4, inverse as inverse3 } from "transformation-matrix";
+import { applyToPoint as applyToPoint12, identity as identity4, inverse as inverse3 } from "transformation-matrix";
 
 // src/hooks/useDiagonalLabel.ts
 import { useMemo as useMemo3 } from "react";
@@ -15694,7 +15725,10 @@ var getPrimitiveSnapPoints = (primitive) => {
           anchor: "oval_bottom",
           point: { x: primitive.x, y: primitive.y + primitive.rY }
         }
-      ];
+      ].map(({ anchor, point: point2 }) => ({
+        anchor,
+        point: rotatePoint3(point2, primitive, primitive.ccw_rotation ?? 0)
+      }));
     }
     case "line": {
       const midPoint = {
@@ -15725,7 +15759,7 @@ var getPrimitiveSnapPoints = (primitive) => {
 };
 
 // src/lib/get-screen-snapping-points.ts
-import { applyToPoint as applyToPoint10 } from "transformation-matrix";
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
 var EMPTY_SCREEN_SNAPPING_POINTS = [];
 function getScreenSnappingPoints({
   snappingPoints,
@@ -15736,7 +15770,7 @@ function getScreenSnappingPoints({
   return snappingPoints.map((snap, index) => ({
     ...snap,
     id: `${index}-${snap.anchor}`,
-    screenPoint: applyToPoint10(realToScreenTransform, snap.point)
+    screenPoint: applyToPoint11(realToScreenTransform, snap.point)
   }));
 }
 
@@ -15936,7 +15970,7 @@ var DimensionOverlay = ({
       if (screenSnappingPoints.length === 0) {
         return { point: rwPoint, id: null };
       }
-      const screenPoint = applyToPoint11(transform, rwPoint);
+      const screenPoint = applyToPoint12(transform, rwPoint);
       let bestMatch = null;
       for (const snap of screenSnappingPoints) {
         const dx = snap.screenPoint.x - screenPoint.x;
@@ -16023,10 +16057,10 @@ var DimensionOverlay = ({
     disarmBounds,
     findSnap
   ]);
-  const screenDStart = applyToPoint11(transform, dStart);
-  const screenDEnd = applyToPoint11(transform, dEnd);
-  const screenBoundsStart = applyToPoint11(transform, boundsStart);
-  const screenBoundsEnd = applyToPoint11(transform, boundsEnd);
+  const screenDStart = applyToPoint12(transform, dStart);
+  const screenDEnd = applyToPoint12(transform, dEnd);
+  const screenBoundsStart = applyToPoint12(transform, boundsStart);
+  const screenBoundsEnd = applyToPoint12(transform, boundsEnd);
   const selectedBounds = {
     minX: Math.min(boundsStart.x, boundsEnd.x),
     minY: Math.min(boundsStart.y, boundsEnd.y),
@@ -16117,7 +16151,7 @@ var DimensionOverlay = ({
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        const rwPoint = applyToPoint11(inverse3(transform), { x, y });
+        const rwPoint = applyToPoint12(inverse3(transform), { x, y });
         mousePosRef.current.x = rwPoint.x;
         mousePosRef.current.y = rwPoint.y;
         if (dimensionToolStretching) {
@@ -16135,7 +16169,7 @@ var DimensionOverlay = ({
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        const rwPoint = applyToPoint11(inverse3(transform), { x, y });
+        const rwPoint = applyToPoint12(inverse3(transform), { x, y });
         if (boundsToolArmed) {
           e.preventDefault();
           e.stopPropagation();
@@ -16166,7 +16200,7 @@ var DimensionOverlay = ({
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        const rwPoint = applyToPoint11(inverse3(transform), { x, y });
+        const rwPoint = applyToPoint12(inverse3(transform), { x, y });
         const end = { x: rwPoint.x, y: rwPoint.y };
         e.preventDefault();
         e.stopPropagation();
@@ -16423,7 +16457,7 @@ var DimensionOverlay = ({
 
 // src/components/EditPlacementOverlay.tsx
 import { useRef as useRef6, useState as useState5 } from "react";
-import { applyToPoint as applyToPoint12, identity as identity5, inverse as inverse4 } from "transformation-matrix";
+import { applyToPoint as applyToPoint13, identity as identity5, inverse as inverse4 } from "transformation-matrix";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isInsideOf = (pcb_component, point2, padding = 0) => {
   const halfWidth = pcb_component.width / 2;
@@ -16468,7 +16502,7 @@ var EditPlacementOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (Number.isNaN(x) || Number.isNaN(y)) return;
-        const rwMousePoint = applyToPoint12(inverse4(transform), { x, y });
+        const rwMousePoint = applyToPoint13(inverse4(transform), { x, y });
         let foundActiveComponent = false;
         for (const e2 of soup) {
           if (e2.type === "pcb_component" && isInsideOf(e2, rwMousePoint, 10 / transform.a)) {
@@ -16510,7 +16544,7 @@ var EditPlacementOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (Number.isNaN(x) || Number.isNaN(y)) return;
-        const rwMousePoint = applyToPoint12(inverse4(transform), { x, y });
+        const rwMousePoint = applyToPoint13(inverse4(transform), { x, y });
         setDragState({
           ...dragState,
           dragEnd: rwMousePoint
@@ -16539,7 +16573,7 @@ var EditPlacementOverlay = ({
         children,
         !disabled && soup.filter((e) => e.type === "pcb_component").map((e) => {
           if (!e?.center) return null;
-          const projectedCenter = applyToPoint12(transform, e.center);
+          const projectedCenter = applyToPoint13(transform, e.center);
           return /* @__PURE__ */ jsx7(
             "div",
             {
@@ -16602,7 +16636,7 @@ var getPopupPosition = (errorCenter, containerRef) => {
 
 // src/components/ErrorOverlay.tsx
 import { Fragment as Fragment2, useMemo as useMemo6, useRef as useRef7 } from "react";
-import { applyToPoint as applyToPoint13, identity as identity6 } from "transformation-matrix";
+import { applyToPoint as applyToPoint14, identity as identity6 } from "transformation-matrix";
 
 // src/components/FocusMarkerSVG.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -16807,7 +16841,7 @@ var ErrorOverlay = ({
     if (!focusCenter || typeof focusCenter.x !== "number" || typeof focusCenter.y !== "number") {
       return null;
     }
-    const screenCenter = applyToPoint13(transform, focusCenter);
+    const screenCenter = applyToPoint14(transform, focusCenter);
     if (Number.isNaN(screenCenter.x) || Number.isNaN(screenCenter.y)) {
       return null;
     }
@@ -17005,7 +17039,7 @@ var ErrorOverlay = ({
           if (pcbComp && pcbComp.type === "pcb_component")
             center = pcbComp.center || { x: 0, y: 0 };
         }
-        const screenCenter = applyToPoint13(transform, center);
+        const screenCenter = applyToPoint14(transform, center);
         if (Number.isNaN(screenCenter.x) || Number.isNaN(screenCenter.y))
           return null;
         const scale7 = Math.abs(transform.a);
@@ -17132,7 +17166,7 @@ var ErrorOverlay = ({
 
 // src/components/FocusedPcbComponentOverlay.tsx
 import { useEffect as useEffect9 } from "react";
-import { applyToPoint as applyToPoint14 } from "transformation-matrix";
+import { applyToPoint as applyToPoint15 } from "transformation-matrix";
 
 // src/lib/get-pcb-component-focus.ts
 var getPcbComponentFocus = (elements, pcbComponentId, width, height) => {
@@ -17166,8 +17200,8 @@ var FocusedPcbComponentOverlay = ({
   }, [focusRequest, layer, selectLayer]);
   if (!focus || !transform) return null;
   const { bounds } = focus;
-  const a = applyToPoint14(transform, { x: bounds.minX, y: bounds.minY });
-  const b = applyToPoint14(transform, { x: bounds.maxX, y: bounds.maxY });
+  const a = applyToPoint15(transform, { x: bounds.minX, y: bounds.minY });
+  const b = applyToPoint15(transform, { x: bounds.maxX, y: bounds.maxY });
   return /* @__PURE__ */ jsx10(
     "div",
     {
@@ -17200,10 +17234,10 @@ function ifSetsMatchExactly(set1, set2) {
 
 // src/components/MouseElementTracker.tsx
 import { useEffect as useEffect11, useMemo as useMemo8, useState as useState7 } from "react";
-import { applyToPoint as applyToPoint17, inverse as inverse5 } from "transformation-matrix";
+import { applyToPoint as applyToPoint18, inverse as inverse5 } from "transformation-matrix";
 
 // src/components/AnchorOffsetOverlay/AnchorOffsetOverlay.tsx
-import { applyToPoint as applyToPoint15 } from "transformation-matrix";
+import { applyToPoint as applyToPoint16 } from "transformation-matrix";
 
 // src/components/AnchorOffsetOverlay/common/constants.ts
 var VISUAL_CONFIG = {
@@ -17248,7 +17282,7 @@ var AnchorOffsetOverlay = ({
   const anchorScreens = /* @__PURE__ */ new Map();
   targets.forEach((target) => {
     if (!anchorScreens.has(target.anchor_id)) {
-      const screenPoint = applyToPoint15(transform, target.anchor);
+      const screenPoint = applyToPoint16(transform, target.anchor);
       anchorScreens.set(target.anchor_id, screenPoint);
     }
   });
@@ -17282,7 +17316,7 @@ var AnchorOffsetOverlay = ({
               const anchorKey = target.anchor_id;
               const targetCenter = target.target;
               const anchorMarkerScreen = anchorScreens.get(anchorKey);
-              const targetScreen = applyToPoint15(transform, targetCenter);
+              const targetScreen = applyToPoint16(transform, targetCenter);
               const offsetX = targetCenter.x - anchorPosition.x;
               const offsetY = targetCenter.y - anchorPosition.y;
               const xLineLength = Math.abs(targetScreen.x - anchorMarkerScreen.x);
@@ -17660,7 +17694,7 @@ var GroupAnchorOffsetOverlay = ({
 };
 
 // src/components/AnchorOffsetOverlay/ComponentBoundingBoxOverlay.tsx
-import { applyToPoint as applyToPoint16 } from "transformation-matrix";
+import { applyToPoint as applyToPoint17 } from "transformation-matrix";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var calculateComponentBoundingBox = (component, elements) => {
   const componentId = component.pcb_component_id;
@@ -17724,11 +17758,11 @@ var ComponentBoundingBoxOverlay = ({
           width: containerWidth,
           height: containerHeight,
           children: renderData.map(({ component, bbox, group }) => {
-            const topLeft = applyToPoint16(transform, {
+            const topLeft = applyToPoint17(transform, {
               x: bbox.minX,
               y: bbox.maxY
             });
-            const bottomRight = applyToPoint16(transform, {
+            const bottomRight = applyToPoint17(transform, {
               x: bbox.maxX,
               y: bbox.minY
             });
@@ -17742,7 +17776,7 @@ var ComponentBoundingBoxOverlay = ({
               x: (bbox.minX + bbox.maxX) / 2,
               y: (bbox.minY + bbox.maxY) / 2
             };
-            const componentCenterScreen = applyToPoint16(transform, componentCenter);
+            const componentCenterScreen = applyToPoint17(transform, componentCenter);
             return /* @__PURE__ */ jsxs9("g", { children: [
               /* @__PURE__ */ jsx14(
                 "rect",
@@ -18232,8 +18266,9 @@ var getPrimitivesUnderPoint = ({
       w = primitive.r * 2;
       h = primitive.r * 2;
     } else if ("rX" in primitive && "rY" in primitive) {
-      w = primitive.rX * 2;
-      h = primitive.rY * 2;
+      const bounds = getPrimitiveBoundingBox(primitive);
+      w = bounds.maxX - bounds.minX;
+      h = bounds.maxY - bounds.minY;
     } else {
       continue;
     }
@@ -18301,7 +18336,7 @@ var MouseElementTracker = ({
         h = "h" in primitive ? primitive.h : "r" in primitive ? primitive.r * 2 : "rX" in primitive && "rY" in primitive ? primitive.rY * 2 : 0;
       }
       if (!basePoint) continue;
-      const screenPos = applyToPoint17(transform, basePoint);
+      const screenPos = applyToPoint18(transform, basePoint);
       const screenSize = {
         w: w * transform.a,
         h: h * transform.a
@@ -18330,7 +18365,7 @@ var MouseElementTracker = ({
   }) => {
     const { x, y } = screenPoint;
     setMousePos({ x, y });
-    const rwPoint = applyToPoint17(inverse5(transform2), { x, y });
+    const rwPoint = applyToPoint18(inverse5(transform2), { x, y });
     const nearbyPrimitives = getPrimitivesNearPoint({
       point: rwPoint,
       realToScreenScale: transform2.a,
@@ -18433,7 +18468,7 @@ var MouseElementTracker = ({
 
 // src/components/PcbGroupOverlay.tsx
 import { useEffect as useEffect12, useMemo as useMemo9, useRef as useRef8 } from "react";
-import { applyToPoint as applyToPoint18 } from "transformation-matrix";
+import { applyToPoint as applyToPoint19 } from "transformation-matrix";
 import { identity as identity7 } from "transformation-matrix";
 import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var GROUP_COLORS = [
@@ -18603,10 +18638,10 @@ var PcbGroupOverlay = ({
         minY -= totalPadding;
         maxY += totalPadding;
       }
-      const topLeft = applyToPoint18(transform, { x: minX, y: maxY });
-      const topRight = applyToPoint18(transform, { x: maxX, y: maxY });
-      const bottomLeft = applyToPoint18(transform, { x: minX, y: minY });
-      const bottomRight = applyToPoint18(transform, { x: maxX, y: minY });
+      const topLeft = applyToPoint19(transform, { x: minX, y: maxY });
+      const topRight = applyToPoint19(transform, { x: maxX, y: maxY });
+      const bottomLeft = applyToPoint19(transform, { x: minX, y: minY });
+      const bottomRight = applyToPoint19(transform, { x: maxX, y: minY });
       const groupColor = GROUP_COLORS[groupIndex % GROUP_COLORS.length];
       ctx.strokeStyle = groupColor;
       ctx.lineWidth = 2;
@@ -18656,7 +18691,7 @@ var PcbGroupOverlay = ({
           x: group.anchor_position[0] ?? 0,
           y: group.anchor_position[1] ?? 0
         } : { x: group.anchor_position.x, y: group.anchor_position.y };
-        const anchorScreenPos = applyToPoint18(transform, anchorPositionValue);
+        const anchorScreenPos = applyToPoint19(transform, anchorPositionValue);
         ctx.strokeStyle = "white";
         ctx.lineWidth = 1.5;
         ctx.setLineDash([]);
@@ -18710,7 +18745,7 @@ var PcbGroupOverlay = ({
 };
 
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint19, identity as identity8 } from "transformation-matrix";
+import { applyToPoint as applyToPoint20, identity as identity8 } from "transformation-matrix";
 import { useMemo as useMemo10 } from "react";
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var RatsNestOverlay = ({
@@ -18793,8 +18828,8 @@ var RatsNestOverlay = ({
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint19(transform, startPoint);
-          const transformedEnd = applyToPoint19(transform, endPoint);
+          const transformedStart = applyToPoint20(transform, startPoint);
+          const transformedEnd = applyToPoint20(transform, endPoint);
           return /* @__PURE__ */ jsx19(
             "line",
             {
@@ -20736,7 +20771,7 @@ var getPcbWarningHighlightLabel = (warning) => {
 
 // src/components/WarningGraphicsOverlay.tsx
 import { useEffect as useEffect18, useMemo as useMemo13, useRef as useRef14 } from "react";
-import { applyToPoint as applyToPoint20, identity as identity9 } from "transformation-matrix";
+import { applyToPoint as applyToPoint21, identity as identity9 } from "transformation-matrix";
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var WarningGraphicsOverlay = ({
   children,
@@ -20774,7 +20809,7 @@ var WarningGraphicsOverlay = ({
       const component = pcbComponentById.get(warning.pcb_component_id);
       if (!component) return;
       const { width: width2, height: height2, center } = component;
-      const transformedCenter = applyToPoint20(transform, center);
+      const transformedCenter = applyToPoint21(transform, center);
       const scaledWidth = width2 * Math.abs(transform.a);
       const scaledHeight = height2 * Math.abs(transform.d);
       const boxPadding = 0.1 * Math.abs(transform.a);
@@ -21109,7 +21144,7 @@ function getHitTestCandidates({
   transform
 }) {
   if (!transform) return null;
-  const realWorldPoint = applyToPoint21(inverse6(transform), screenPoint);
+  const realWorldPoint = applyToPoint22(inverse6(transform), screenPoint);
   return {
     primitives: getPrimitivesNearPoint({
       point: realWorldPoint,
@@ -21213,7 +21248,7 @@ var CanvasElementsRenderer = (props) => {
     if (isShowingCopperPours && copperPourOpacity > 0) {
       for (const pour of getCopperPoursUnderPoint(
         elementsToRender,
-        applyToPoint21(inverse6(transform), point2),
+        applyToPoint22(inverse6(transform), point2),
         selectedLayer
       ).reverse()) {
         const net = getElementNetId(pour, connectivityMap);
@@ -21503,7 +21538,7 @@ function useAnimationFrameTransformState(initialTransform) {
 
 // src/PCBViewer.tsx
 import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
-var defaultTransform = compose10(translate14(400, 300), scale6(40, -40));
+var defaultTransform = compose11(translate15(400, 300), scale6(40, -40));
 var getPreferredRenderer = () => {
   const stored = getStoredString(STORAGE_KEYS.RENDERING_ENGINE, "webgpu");
   return stored === "canvas" || stored === "webgpu" ? stored : "webgpu";
@@ -21598,10 +21633,10 @@ var PCBViewer = ({
       (elmBounds.height ?? 0) / height2,
       100
     ) * 0.75;
-    const targetTransform = compose10(
-      translate14((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+    const targetTransform = compose11(
+      translate15((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
       scale6(scaleFactor, -scaleFactor, 0, 0),
-      translate14(-center.x, -center.y)
+      translate15(-center.x, -center.y)
     );
     setTransform(targetTransform);
     return;