circuit-to-svg 0.0.282 → 0.0.284

package/dist/index.js

@@ -3202,6 +3202,9 @@ function createSvgObjectsFromSmtPad(pad, ctx) {
     const height = pad.height * Math.abs(transform.d);
     const radius = pad.radius * Math.abs(transform.a);
     const [x, y] = applyToPoint20(transform, [pad.x, pad.y]);
+    const rotationTransformAttributes = isRotated ? {
+      transform: `translate(${x} ${y}) rotate(${-(pad.ccw_rotation ?? 0)})`
+    } : void 0;
     const baseAttributes = {
       class: "pcb-pad",
       fill: layerNameToColor(pad.layer, colorMap2),
@@ -3213,9 +3216,7 @@ function createSvgObjectsFromSmtPad(pad, ctx) {
       ry: radius.toString(),
       "data-type": "pcb_smtpad",
       "data-pcb-layer": pad.layer,
-      ...isRotated ? {
-        transform: `translate(${x} ${y}) rotate(${-(pad.ccw_rotation ?? 0)})`
-      } : {}
+      ...rotationTransformAttributes ?? {}
     };
     const padElement = {
       name: "rect",
@@ -3239,14 +3240,15 @@ function createSvgObjectsFromSmtPad(pad, ctx) {
         attributes: {
           class: "pcb-pad-covered",
           fill: soldermaskWithCopperUnderneathColor,
-          x: (x - width / 2).toString(),
-          y: (y - height / 2).toString(),
+          x: isRotated ? (-width / 2).toString() : (x - width / 2).toString(),
+          y: isRotated ? (-height / 2).toString() : (y - height / 2).toString(),
           width: width.toString(),
           height: height.toString(),
           rx: radius.toString(),
           ry: radius.toString(),
           "data-type": "pcb_smtpad",
-          "data-pcb-layer": pad.layer
+          "data-pcb-layer": pad.layer,
+          ...rotationTransformAttributes ?? {}
         }
       };
       const exposedAttributes = {
@@ -3260,7 +3262,7 @@ function createSvgObjectsFromSmtPad(pad, ctx) {
         ry: maskRadius.toString(),
         "data-type": "pcb_soldermask",
         "data-pcb-layer": pad.layer,
-        ...isRotated && pad.ccw_rotation ? { transform: `translate(${x} ${y}) rotate(${-pad.ccw_rotation})` } : {}
+        ...rotationTransformAttributes ?? {}
       };
       const exposedOpeningElement = {
         name: "rect",
@@ -3280,14 +3282,15 @@ function createSvgObjectsFromSmtPad(pad, ctx) {
         attributes: {
           class: "pcb-pad-covered",
           fill: soldermaskWithCopperUnderneathColor,
-          x: (x - width / 2).toString(),
-          y: (y - height / 2).toString(),
+          x: isRotated ? (-width / 2).toString() : (x - width / 2).toString(),
+          y: isRotated ? (-height / 2).toString() : (y - height / 2).toString(),
           width: width.toString(),
           height: height.toString(),
           rx: radius.toString(),
           ry: radius.toString(),
           "data-type": "pcb_smtpad",
-          "data-pcb-layer": pad.layer
+          "data-pcb-layer": pad.layer,
+          ...rotationTransformAttributes ?? {}
         }
       };
       return [coveredPadElement];
@@ -3303,7 +3306,7 @@ function createSvgObjectsFromSmtPad(pad, ctx) {
       ry: maskRadius.toString(),
       "data-type": "pcb_soldermask_opening",
       "data-pcb-layer": pad.layer,
-      ...isRotated && pad.ccw_rotation ? { transform: `translate(${x} ${y}) rotate(${-pad.ccw_rotation})` } : {}
+      ...rotationTransformAttributes ?? {}
     };
     const substrateElement = {
       name: "rect",
@@ -3505,180 +3508,503 @@ function createSvgObjectsFromSmtPad(pad, ctx) {
 }
 
 // lib/pcb/svg-object-fns/create-svg-objects-from-pcb-board.ts
+import { applyToPoint as applyToPoint22 } from "transformation-matrix";
+
+// lib/utils/create-pcb-component-anchor-offset-indicators.ts
 import { applyToPoint as applyToPoint21 } from "transformation-matrix";
-function createSvgObjectsFromPcbBoard(pcbBoard, ctx) {
-  const { transform, colorMap: colorMap2, showSolderMask } = ctx;
-  const { width, height, center, outline } = pcbBoard;
-  let path;
-  if (outline && Array.isArray(outline) && outline.length >= 3) {
-    path = outline.map((point, index) => {
-      const [x, y] = applyToPoint21(transform, [point.x, point.y]);
-      return index === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
-    }).join(" ");
-  } else {
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const topLeft = applyToPoint21(transform, [
-      center.x - halfWidth,
-      center.y - halfHeight
-    ]);
-    const topRight = applyToPoint21(transform, [
-      center.x + halfWidth,
-      center.y - halfHeight
-    ]);
-    const bottomRight = applyToPoint21(transform, [
-      center.x + halfWidth,
-      center.y + halfHeight
-    ]);
-    const bottomLeft = applyToPoint21(transform, [
-      center.x - halfWidth,
-      center.y + halfHeight
-    ]);
-    path = `M ${topLeft[0]} ${topLeft[1]} L ${topRight[0]} ${topRight[1]} L ${bottomRight[0]} ${bottomRight[1]} L ${bottomLeft[0]} ${bottomLeft[1]}`;
-  }
-  path += " Z";
-  const svgObjects = [];
-  if (showSolderMask) {
-    const layer = ctx.layer ?? "top";
-    const maskLayer = layer === "bottom" ? "soldermask-bottom" : "soldermask-top";
-    svgObjects.push({
-      name: "path",
-      type: "element",
-      value: "",
-      children: [],
-      attributes: {
-        class: "pcb-board-soldermask",
-        d: path,
-        fill: colorMap2.soldermask.top,
-        "fill-opacity": "0.8",
-        stroke: "none",
-        "data-type": "pcb_soldermask",
-        "data-pcb-layer": maskLayer
-      }
-    });
-  }
-  svgObjects.push({
-    name: "path",
+var OFFSET_THRESHOLD_MM = 0.01;
+var TICK_SIZE_PX = 4;
+var LABEL_GAP_PX = 8;
+var LABEL_FONT_SIZE_PX = 11;
+var STROKE_WIDTH_PX = 1;
+var ANCHOR_MARKER_SIZE_PX = 5;
+var ANCHOR_MARKER_STROKE_WIDTH_PX = 1.5;
+var COMPONENT_GAP_PX = 15;
+var COMPONENT_SIDE_GAP_PX = 10;
+var DISTANCE_MULTIPLIER = 0.2;
+var MAX_OFFSET_PX = 50;
+function createAnchorOffsetIndicators(params) {
+  const {
+    groupAnchorPosition,
+    componentPosition,
+    transform,
+    componentWidth = 0,
+    componentHeight = 0
+  } = params;
+  const objects = [];
+  const [screenGroupAnchorX, screenGroupAnchorY] = applyToPoint21(transform, [
+    groupAnchorPosition.x,
+    groupAnchorPosition.y
+  ]);
+  const [screenComponentX, screenComponentY] = applyToPoint21(transform, [
+    componentPosition.x,
+    componentPosition.y
+  ]);
+  const offsetX = componentPosition.x - groupAnchorPosition.x;
+  const offsetY = componentPosition.y - groupAnchorPosition.y;
+  const scale9 = Math.abs(transform.a);
+  const screenComponentWidth = componentWidth * scale9;
+  const screenComponentHeight = componentHeight * scale9;
+  objects.push(createAnchorMarker(screenGroupAnchorX, screenGroupAnchorY));
+  objects.push({
+    name: "line",
     type: "element",
-    value: "",
+    attributes: {
+      x1: screenGroupAnchorX.toString(),
+      y1: screenGroupAnchorY.toString(),
+      x2: screenComponentX.toString(),
+      y2: screenComponentY.toString(),
+      stroke: "#ffffff",
+      "stroke-width": "0.5",
+      "stroke-dasharray": "3,3",
+      opacity: "0.5",
+      class: "anchor-offset-connector"
+    },
     children: [],
+    value: ""
+  });
+  objects.push({
+    name: "circle",
+    type: "element",
     attributes: {
-      class: "pcb-board",
-      d: path,
-      fill: "none",
-      stroke: colorMap2.boardOutline,
-      "stroke-width": (0.1 * Math.abs(transform.a)).toString(),
-      "data-type": "pcb_board",
-      "data-pcb-layer": "board"
-    }
+      cx: screenComponentX.toString(),
+      cy: screenComponentY.toString(),
+      r: "2",
+      fill: "#ffffff",
+      opacity: "0.7",
+      class: "anchor-offset-component-marker"
+    },
+    children: [],
+    value: ""
   });
-  return svgObjects;
-}
-
-// lib/pcb/svg-object-fns/create-svg-objects-from-pcb-panel.ts
-import { applyToPoint as applyToPoint22 } from "transformation-matrix";
-function createSvgObjectsFromPcbPanel(pcbPanel, ctx) {
-  const { transform, colorMap: colorMap2, showSolderMask } = ctx;
-  const width = Number(pcbPanel.width);
-  const height = Number(pcbPanel.height);
-  const center = pcbPanel.center ?? { x: width / 2, y: height / 2 };
-  const halfWidth = width / 2;
-  const halfHeight = height / 2;
-  const topLeft = applyToPoint22(transform, [
-    center.x - halfWidth,
-    center.y - halfHeight
-  ]);
-  const topRight = applyToPoint22(transform, [
-    center.x + halfWidth,
-    center.y - halfHeight
-  ]);
-  const bottomRight = applyToPoint22(transform, [
-    center.x + halfWidth,
-    center.y + halfHeight
-  ]);
-  const bottomLeft = applyToPoint22(transform, [
-    center.x - halfWidth,
-    center.y + halfHeight
-  ]);
-  const path = `M ${topLeft[0]} ${topLeft[1]} L ${topRight[0]} ${topRight[1]} L ${bottomRight[0]} ${bottomRight[1]} L ${bottomLeft[0]} ${bottomLeft[1]} Z`;
-  const isCoveredWithSolderMask = pcbPanel.covered_with_solder_mask !== false;
-  const shouldShowSolderMask = Boolean(
-    showSolderMask && isCoveredWithSolderMask
+  const yDistance = Math.abs(screenComponentY - screenGroupAnchorY);
+  const xDistance = Math.abs(screenComponentX - screenGroupAnchorX);
+  const totalDistance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
+  const componentHeightOffset = screenComponentHeight / 2 + COMPONENT_GAP_PX;
+  const dynamicOffset = Math.max(
+    componentHeightOffset,
+    Math.min(MAX_OFFSET_PX, totalDistance * DISTANCE_MULTIPLIER)
   );
-  return [
-    {
-      name: "path",
-      type: "element",
-      value: "",
-      children: [],
-      attributes: {
-        class: "pcb-panel",
-        d: path,
-        fill: "none",
-        stroke: colorMap2.boardOutline,
-        "stroke-width": (0.1 * Math.abs(transform.a)).toString(),
-        "data-type": "pcb_panel",
-        "data-pcb-layer": "board"
-      }
-    }
-  ];
+  const horizontalLineY = offsetY > 0 ? screenComponentY - dynamicOffset : screenComponentY + dynamicOffset;
+  const componentWidthOffset = screenComponentWidth / 2 + COMPONENT_SIDE_GAP_PX;
+  const verticalLineX = offsetX > 0 ? screenComponentX + componentWidthOffset : screenComponentX - componentWidthOffset;
+  if (Math.abs(offsetX) > OFFSET_THRESHOLD_MM) {
+    objects.push(
+      ...createHorizontalDimension({
+        startX: screenGroupAnchorX,
+        endX: screenComponentX,
+        y: horizontalLineY,
+        offsetMm: offsetX,
+        offsetY
+      })
+    );
+  }
+  if (Math.abs(offsetY) > OFFSET_THRESHOLD_MM) {
+    objects.push(
+      ...createVerticalDimension({
+        x: verticalLineX,
+        startY: screenGroupAnchorY,
+        endY: screenComponentY,
+        offsetMm: offsetY,
+        offsetX
+      })
+    );
+  }
+  return objects;
 }
-
-// lib/pcb/svg-object-fns/create-svg-objects-from-pcb-via.ts
-import { applyToPoint as applyToPoint23 } from "transformation-matrix";
-function createSvgObjectsFromPcbVia(hole, ctx) {
-  const { transform, colorMap: colorMap2 } = ctx;
-  const [x, y] = applyToPoint23(transform, [hole.x, hole.y]);
-  const scaledOuterWidth = hole.outer_diameter * Math.abs(transform.a);
-  const scaledOuterHeight = hole.outer_diameter * Math.abs(transform.a);
-  const scaledHoleWidth = hole.hole_diameter * Math.abs(transform.a);
-  const scaledHoleHeight = hole.hole_diameter * Math.abs(transform.a);
-  const outerRadius = Math.min(scaledOuterWidth, scaledOuterHeight) / 2;
-  const innerRadius = Math.min(scaledHoleWidth, scaledHoleHeight) / 2;
+function createAnchorMarker(x, y) {
   return {
     name: "g",
     type: "element",
     attributes: {
-      "data-type": "pcb_via",
-      "data-pcb-layer": "through"
+      class: "anchor-offset-marker",
+      "data-type": "anchor_offset_marker"
     },
     children: [
       {
-        name: "circle",
+        name: "line",
         type: "element",
         attributes: {
-          class: "pcb-hole-outer",
-          fill: colorMap2.copper.top,
-          cx: x.toString(),
-          cy: y.toString(),
-          r: outerRadius.toString(),
-          "data-type": "pcb_via",
-          "data-pcb-layer": "top"
-        }
+          x1: x.toString(),
+          y1: (y - ANCHOR_MARKER_SIZE_PX).toString(),
+          x2: x.toString(),
+          y2: (y + ANCHOR_MARKER_SIZE_PX).toString(),
+          stroke: "#ffffff",
+          "stroke-width": ANCHOR_MARKER_STROKE_WIDTH_PX.toString(),
+          "stroke-linecap": "round"
+        },
+        children: [],
+        value: ""
       },
       {
-        name: "circle",
+        name: "line",
         type: "element",
         attributes: {
-          class: "pcb-hole-inner",
-          fill: colorMap2.drill,
-          cx: x.toString(),
-          cy: y.toString(),
-          r: innerRadius.toString(),
-          "data-type": "pcb_via",
-          "data-pcb-layer": "drill"
-        }
-      }
-    ]
-  };
-}
-
-// lib/pcb/svg-object-fns/create-svg-objects-from-pcb-hole.ts
+          x1: (x - ANCHOR_MARKER_SIZE_PX).toString(),
+          y1: y.toString(),
+          x2: (x + ANCHOR_MARKER_SIZE_PX).toString(),
+          y2: y.toString(),
+          stroke: "#ffffff",
+          "stroke-width": ANCHOR_MARKER_STROKE_WIDTH_PX.toString(),
+          "stroke-linecap": "round"
+        },
+        children: [],
+        value: ""
+      }
+    ],
+    value: ""
+  };
+}
+function createHorizontalDimension({
+  startX,
+  endX,
+  y,
+  offsetMm,
+  offsetY
+}) {
+  const objects = [];
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: startX.toString(),
+      y1: y.toString(),
+      x2: endX.toString(),
+      y2: y.toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString(),
+      class: "anchor-offset-dimension-x"
+    },
+    children: [],
+    value: ""
+  });
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: startX.toString(),
+      y1: (y - TICK_SIZE_PX).toString(),
+      x2: startX.toString(),
+      y2: (y + TICK_SIZE_PX).toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString()
+    },
+    children: [],
+    value: ""
+  });
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: endX.toString(),
+      y1: (y - TICK_SIZE_PX).toString(),
+      x2: endX.toString(),
+      y2: (y + TICK_SIZE_PX).toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString()
+    },
+    children: [],
+    value: ""
+  });
+  const midX = (startX + endX) / 2;
+  const labelY = offsetY > 0 ? y - TICK_SIZE_PX - LABEL_GAP_PX : y + TICK_SIZE_PX + LABEL_GAP_PX;
+  objects.push({
+    name: "text",
+    type: "element",
+    attributes: {
+      x: midX.toString(),
+      y: labelY.toString(),
+      fill: "#ffffff",
+      "font-size": LABEL_FONT_SIZE_PX.toString(),
+      "font-family": "Arial, sans-serif",
+      "text-anchor": "middle",
+      "dominant-baseline": offsetY > 0 ? "baseline" : "hanging",
+      class: "anchor-offset-label"
+    },
+    children: [
+      {
+        type: "text",
+        value: `X: ${offsetMm.toFixed(2)}mm`,
+        name: "",
+        attributes: {},
+        children: []
+      }
+    ],
+    value: ""
+  });
+  return objects;
+}
+function createVerticalDimension({
+  x,
+  startY,
+  endY,
+  offsetMm,
+  offsetX
+}) {
+  const objects = [];
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: x.toString(),
+      y1: startY.toString(),
+      x2: x.toString(),
+      y2: endY.toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString(),
+      class: "anchor-offset-dimension-y"
+    },
+    children: [],
+    value: ""
+  });
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: (x - TICK_SIZE_PX).toString(),
+      y1: startY.toString(),
+      x2: (x + TICK_SIZE_PX).toString(),
+      y2: startY.toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString()
+    },
+    children: [],
+    value: ""
+  });
+  objects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      x1: (x - TICK_SIZE_PX).toString(),
+      y1: endY.toString(),
+      x2: (x + TICK_SIZE_PX).toString(),
+      y2: endY.toString(),
+      stroke: "#ffffff",
+      "stroke-width": STROKE_WIDTH_PX.toString()
+    },
+    children: [],
+    value: ""
+  });
+  const midY = (startY + endY) / 2;
+  const labelX = offsetX < 0 ? x - TICK_SIZE_PX - 4 : x + TICK_SIZE_PX + 4;
+  objects.push({
+    name: "text",
+    type: "element",
+    attributes: {
+      x: labelX.toString(),
+      y: midY.toString(),
+      fill: "#ffffff",
+      "font-size": LABEL_FONT_SIZE_PX.toString(),
+      "font-family": "Arial, sans-serif",
+      "text-anchor": offsetX < 0 ? "end" : "start",
+      "dominant-baseline": "middle",
+      class: "anchor-offset-label"
+    },
+    children: [
+      {
+        type: "text",
+        value: `Y: ${offsetMm.toFixed(2)}mm`,
+        name: "",
+        attributes: {},
+        children: []
+      }
+    ],
+    value: ""
+  });
+  return objects;
+}
+
+// lib/pcb/svg-object-fns/create-svg-objects-from-pcb-board.ts
+function createSvgObjectsFromPcbBoard(pcbBoard, ctx) {
+  const { transform, colorMap: colorMap2, showSolderMask, circuitJson } = ctx;
+  const { width, height, center, outline } = pcbBoard;
+  let path;
+  if (outline && Array.isArray(outline) && outline.length >= 3) {
+    path = outline.map((point, index) => {
+      const [x, y] = applyToPoint22(transform, [point.x, point.y]);
+      return index === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
+    }).join(" ");
+  } else {
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const topLeft = applyToPoint22(transform, [
+      center.x - halfWidth,
+      center.y - halfHeight
+    ]);
+    const topRight = applyToPoint22(transform, [
+      center.x + halfWidth,
+      center.y - halfHeight
+    ]);
+    const bottomRight = applyToPoint22(transform, [
+      center.x + halfWidth,
+      center.y + halfHeight
+    ]);
+    const bottomLeft = applyToPoint22(transform, [
+      center.x - halfWidth,
+      center.y + halfHeight
+    ]);
+    path = `M ${topLeft[0]} ${topLeft[1]} L ${topRight[0]} ${topRight[1]} L ${bottomRight[0]} ${bottomRight[1]} L ${bottomLeft[0]} ${bottomLeft[1]}`;
+  }
+  path += " Z";
+  const svgObjects = [];
+  if (showSolderMask) {
+    const layer = ctx.layer ?? "top";
+    const maskLayer = layer === "bottom" ? "soldermask-bottom" : "soldermask-top";
+    svgObjects.push({
+      name: "path",
+      type: "element",
+      value: "",
+      children: [],
+      attributes: {
+        class: "pcb-board-soldermask",
+        d: path,
+        fill: colorMap2.soldermask.top,
+        "fill-opacity": "0.8",
+        stroke: "none",
+        "data-type": "pcb_soldermask",
+        "data-pcb-layer": maskLayer
+      }
+    });
+  }
+  svgObjects.push({
+    name: "path",
+    type: "element",
+    value: "",
+    children: [],
+    attributes: {
+      class: "pcb-board",
+      d: path,
+      fill: "none",
+      stroke: colorMap2.boardOutline,
+      "stroke-width": (0.1 * Math.abs(transform.a)).toString(),
+      "data-type": "pcb_board",
+      "data-pcb-layer": "board"
+    }
+  });
+  if (ctx.showAnchorOffsets && circuitJson) {
+    const panel = circuitJson.find(
+      (elm) => elm.type === "pcb_panel"
+    );
+    if (panel) {
+      const panelCenter = panel.center ?? { x: 0, y: 0 };
+      svgObjects.push(
+        ...createAnchorOffsetIndicators({
+          groupAnchorPosition: panelCenter,
+          componentPosition: center,
+          transform,
+          componentWidth: width,
+          componentHeight: height
+        })
+      );
+    }
+  }
+  return svgObjects;
+}
+
+// lib/pcb/svg-object-fns/create-svg-objects-from-pcb-panel.ts
+import { applyToPoint as applyToPoint23 } from "transformation-matrix";
+function createSvgObjectsFromPcbPanel(pcbPanel, ctx) {
+  const { transform, colorMap: colorMap2, showSolderMask } = ctx;
+  const width = Number(pcbPanel.width);
+  const height = Number(pcbPanel.height);
+  const center = pcbPanel.center ?? { x: width / 2, y: height / 2 };
+  const halfWidth = width / 2;
+  const halfHeight = height / 2;
+  const topLeft = applyToPoint23(transform, [
+    center.x - halfWidth,
+    center.y - halfHeight
+  ]);
+  const topRight = applyToPoint23(transform, [
+    center.x + halfWidth,
+    center.y - halfHeight
+  ]);
+  const bottomRight = applyToPoint23(transform, [
+    center.x + halfWidth,
+    center.y + halfHeight
+  ]);
+  const bottomLeft = applyToPoint23(transform, [
+    center.x - halfWidth,
+    center.y + halfHeight
+  ]);
+  const path = `M ${topLeft[0]} ${topLeft[1]} L ${topRight[0]} ${topRight[1]} L ${bottomRight[0]} ${bottomRight[1]} L ${bottomLeft[0]} ${bottomLeft[1]} Z`;
+  const isCoveredWithSolderMask = pcbPanel.covered_with_solder_mask !== false;
+  const shouldShowSolderMask = Boolean(
+    showSolderMask && isCoveredWithSolderMask
+  );
+  return [
+    {
+      name: "path",
+      type: "element",
+      value: "",
+      children: [],
+      attributes: {
+        class: "pcb-panel",
+        d: path,
+        fill: "none",
+        stroke: colorMap2.boardOutline,
+        "stroke-width": (0.1 * Math.abs(transform.a)).toString(),
+        "data-type": "pcb_panel",
+        "data-pcb-layer": "board"
+      }
+    }
+  ];
+}
+
+// lib/pcb/svg-object-fns/create-svg-objects-from-pcb-via.ts
 import { applyToPoint as applyToPoint24 } from "transformation-matrix";
+function createSvgObjectsFromPcbVia(hole, ctx) {
+  const { transform, colorMap: colorMap2 } = ctx;
+  const [x, y] = applyToPoint24(transform, [hole.x, hole.y]);
+  const scaledOuterWidth = hole.outer_diameter * Math.abs(transform.a);
+  const scaledOuterHeight = hole.outer_diameter * Math.abs(transform.a);
+  const scaledHoleWidth = hole.hole_diameter * Math.abs(transform.a);
+  const scaledHoleHeight = hole.hole_diameter * Math.abs(transform.a);
+  const outerRadius = Math.min(scaledOuterWidth, scaledOuterHeight) / 2;
+  const innerRadius = Math.min(scaledHoleWidth, scaledHoleHeight) / 2;
+  return {
+    name: "g",
+    type: "element",
+    attributes: {
+      "data-type": "pcb_via",
+      "data-pcb-layer": "through"
+    },
+    children: [
+      {
+        name: "circle",
+        type: "element",
+        attributes: {
+          class: "pcb-hole-outer",
+          fill: colorMap2.copper.top,
+          cx: x.toString(),
+          cy: y.toString(),
+          r: outerRadius.toString(),
+          "data-type": "pcb_via",
+          "data-pcb-layer": "top"
+        }
+      },
+      {
+        name: "circle",
+        type: "element",
+        attributes: {
+          class: "pcb-hole-inner",
+          fill: colorMap2.drill,
+          cx: x.toString(),
+          cy: y.toString(),
+          r: innerRadius.toString(),
+          "data-type": "pcb_via",
+          "data-pcb-layer": "drill"
+        }
+      }
+    ]
+  };
+}
+
+// lib/pcb/svg-object-fns/create-svg-objects-from-pcb-hole.ts
+import { applyToPoint as applyToPoint25 } from "transformation-matrix";
 function createSvgObjectsFromPcbHole(hole, ctx) {
   const { transform, colorMap: colorMap2, showSolderMask } = ctx;
   const layer = ctx.layer ?? "top";
-  const [x, y] = applyToPoint24(transform, [hole.x, hole.y]);
+  const [x, y] = applyToPoint25(transform, [hole.x, hole.y]);
   const isCoveredWithSolderMask = Boolean(hole.is_covered_with_solder_mask);
   const soldermaskMargin = (hole.soldermask_margin ?? 0) * Math.abs(transform.a);
   const shouldShowSolderMask = showSolderMask && isCoveredWithSolderMask && soldermaskMargin !== 0;
@@ -4175,7 +4501,7 @@ import {
   getFullConnectivityMapFromCircuitJson
 } from "circuit-json-to-connectivity-map";
 import "svgson";
-import { applyToPoint as applyToPoint25 } from "transformation-matrix";
+import { applyToPoint as applyToPoint26 } from "transformation-matrix";
 
 // lib/pcb/create-svg-objects-from-pcb-rats-nest/get-element-position.ts
 import { su } from "@tscircuit/circuit-json-util";
@@ -4255,11 +4581,11 @@ function createSvgObjectsForRatsNest(circuitJson, ctx) {
   });
   const svgObjects = [];
   for (const line of ratsNestLines) {
-    const transformedStart = applyToPoint25(transform, [
+    const transformedStart = applyToPoint26(transform, [
       line.startPoint.x,
       line.startPoint.y
     ]);
-    const transformedEnd = applyToPoint25(transform, [
+    const transformedEnd = applyToPoint26(transform, [
       line.endPoint.x,
       line.endPoint.y
     ]);
@@ -4287,7 +4613,7 @@ function createSvgObjectsForRatsNest(circuitJson, ctx) {
 
 // lib/pcb/svg-object-fns/create-svg-objects-from-pcb-cutout.ts
 import {
-  applyToPoint as applyToPoint26,
+  applyToPoint as applyToPoint27,
   compose as compose3,
   rotate as rotate3,
   translate as translate3,
@@ -4297,7 +4623,7 @@ function createSvgObjectsFromPcbCutout(cutout, ctx) {
   const { transform, colorMap: colorMap2 } = ctx;
   if (cutout.shape === "rect") {
     const rectCutout = cutout;
-    const [cx, cy] = applyToPoint26(transform, [
+    const [cx, cy] = applyToPoint27(transform, [
       rectCutout.center.x,
       rectCutout.center.y
     ]);
@@ -4339,7 +4665,7 @@ function createSvgObjectsFromPcbCutout(cutout, ctx) {
   }
   if (cutout.shape === "circle") {
     const circleCutout = cutout;
-    const [cx, cy] = applyToPoint26(transform, [
+    const [cx, cy] = applyToPoint27(transform, [
       circleCutout.center.x,
       circleCutout.center.y
     ]);
@@ -4366,7 +4692,7 @@ function createSvgObjectsFromPcbCutout(cutout, ctx) {
     const polygonCutout = cutout;
     if (!polygonCutout.points || polygonCutout.points.length === 0) return [];
     const transformedPoints = polygonCutout.points.map(
-      (p) => applyToPoint26(transform, [p.x, p.y])
+      (p) => applyToPoint27(transform, [p.x, p.y])
     );
     const pointsString = transformedPoints.map((p) => `${p[0]},${p[1]}`).join(" ");
     return [
@@ -4390,7 +4716,7 @@ function createSvgObjectsFromPcbCutout(cutout, ctx) {
 
 // lib/pcb/svg-object-fns/create-svg-objects-from-pcb-copper-pour.ts
 import {
-  applyToPoint as applyToPoint28,
+  applyToPoint as applyToPoint29,
   compose as compose4,
   rotate as rotate4,
   toString as matrixToString7,
@@ -4398,11 +4724,11 @@ import {
 } from "transformation-matrix";
 
 // lib/utils/ring-to-path-d.ts
-import { applyToPoint as applyToPoint27 } from "transformation-matrix";
+import { applyToPoint as applyToPoint28 } from "transformation-matrix";
 function ringToPathD(vertices, transform) {
   if (vertices.length === 0) return "";
   const transformedVertices = vertices.map((v) => {
-    const [x, y] = applyToPoint27(transform, [v.x, v.y]);
+    const [x, y] = applyToPoint28(transform, [v.x, v.y]);
     return { ...v, x, y };
   });
   let d = `M ${transformedVertices[0].x} ${transformedVertices[0].y}`;
@@ -4491,7 +4817,7 @@ function createSvgObjectsFromPcbCopperPour(pour, ctx) {
   const maskOverlayColor = layer === "bottom" ? colorMap2.soldermaskOverCopper.bottom : colorMap2.soldermaskOverCopper.top;
   const maskOverlayOpacity = "0.9";
   if (pour.shape === "rect") {
-    const [cx, cy] = applyToPoint28(transform, [pour.center.x, pour.center.y]);
+    const [cx, cy] = applyToPoint29(transform, [pour.center.x, pour.center.y]);
     const scaledWidth = pour.width * Math.abs(transform.a);
     const scaledHeight = pour.height * Math.abs(transform.d);
     const svgRotation = -(pour.rotation ?? 0);
@@ -4543,7 +4869,7 @@ function createSvgObjectsFromPcbCopperPour(pour, ctx) {
   if (pour.shape === "polygon") {
     if (!pour.points || pour.points.length === 0) return [];
     const transformedPoints = pour.points.map(
-      (p) => applyToPoint28(transform, [p.x, p.y])
+      (p) => applyToPoint29(transform, [p.x, p.y])
     );
     const pointsString = transformedPoints.map((p) => `${p[0]},${p[1]}`).join(" ");
     const copperPolygon = {
@@ -4681,398 +5007,92 @@ function createSvgObjectsForPcbGrid({
         stroke: gridLineColor,
         "stroke-width": "1",
         "shape-rendering": "crispEdges"
-      },
-      children: []
-    }
-  ];
-  const defs = {
-    name: "defs",
-    type: "element",
-    value: "",
-    attributes: {},
-    children: [
-      {
-        name: "pattern",
-        type: "element",
-        value: "",
-        attributes: {
-          id: GRID_PATTERN_ID,
-          width: hasMajorGrid ? majorCellSize.toString() : gridCellSize.toString(),
-          height: hasMajorGrid ? majorCellSize.toString() : gridCellSize.toString(),
-          patternUnits: "userSpaceOnUse"
-        },
-        children: patternChildren
-      }
-    ]
-  };
-  const rect = {
-    name: "rect",
-    type: "element",
-    value: "",
-    attributes: {
-      x: "0",
-      y: "0",
-      width: svgWidth.toString(),
-      height: svgHeight.toString(),
-      fill: `url(#${GRID_PATTERN_ID})`,
-      "pointer-events": "none",
-      "data-type": "pcb_grid",
-      "data-pcb-layer": "global"
-    },
-    children: []
-  };
-  return { defs, rect };
-}
-function createMajorGridPatternChildren(cellSize, majorCellSize, lineColor, majorLineColor) {
-  const children = [];
-  const steps = Math.round(majorCellSize / cellSize);
-  for (let step = 0; step < steps; step += 1) {
-    const offset = Number((step * cellSize).toFixed(6));
-    const offsetString = offset.toString();
-    const color = step === 0 ? majorLineColor : lineColor;
-    const majorSizeString = majorCellSize.toString();
-    children.push({
-      name: "line",
-      type: "element",
-      value: "",
-      attributes: {
-        x1: offsetString,
-        y1: "0",
-        x2: offsetString,
-        y2: majorSizeString,
-        stroke: color,
-        "stroke-width": "1",
-        "shape-rendering": "crispEdges"
-      },
-      children: []
-    });
-    children.push({
-      name: "line",
-      type: "element",
-      value: "",
-      attributes: {
-        x1: "0",
-        y1: offsetString,
-        x2: majorSizeString,
-        y2: offsetString,
-        stroke: color,
-        "stroke-width": "1",
-        "shape-rendering": "crispEdges"
-      },
-      children: []
-    });
-  }
-  return children;
-}
-
-// lib/pcb/svg-object-fns/create-svg-objects-from-pcb-component.ts
-import { applyToPoint as applyToPoint30 } from "transformation-matrix";
-
-// lib/utils/create-pcb-component-anchor-offset-indicators.ts
-import { applyToPoint as applyToPoint29 } from "transformation-matrix";
-var OFFSET_THRESHOLD_MM = 0.01;
-var TICK_SIZE_PX = 4;
-var LABEL_GAP_PX = 8;
-var LABEL_FONT_SIZE_PX = 11;
-var STROKE_WIDTH_PX = 1;
-var ANCHOR_MARKER_SIZE_PX = 5;
-var ANCHOR_MARKER_STROKE_WIDTH_PX = 1.5;
-var COMPONENT_GAP_PX = 15;
-var COMPONENT_SIDE_GAP_PX = 10;
-var DISTANCE_MULTIPLIER = 0.2;
-var MAX_OFFSET_PX = 50;
-function createAnchorOffsetIndicators(params) {
-  const {
-    groupAnchorPosition,
-    componentPosition,
-    transform,
-    componentWidth = 0,
-    componentHeight = 0
-  } = params;
-  const objects = [];
-  const [screenGroupAnchorX, screenGroupAnchorY] = applyToPoint29(transform, [
-    groupAnchorPosition.x,
-    groupAnchorPosition.y
-  ]);
-  const [screenComponentX, screenComponentY] = applyToPoint29(transform, [
-    componentPosition.x,
-    componentPosition.y
-  ]);
-  const offsetX = componentPosition.x - groupAnchorPosition.x;
-  const offsetY = componentPosition.y - groupAnchorPosition.y;
-  const scale9 = Math.abs(transform.a);
-  const screenComponentWidth = componentWidth * scale9;
-  const screenComponentHeight = componentHeight * scale9;
-  objects.push(createAnchorMarker(screenGroupAnchorX, screenGroupAnchorY));
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: screenGroupAnchorX.toString(),
-      y1: screenGroupAnchorY.toString(),
-      x2: screenComponentX.toString(),
-      y2: screenComponentY.toString(),
-      stroke: "#ffffff",
-      "stroke-width": "0.5",
-      "stroke-dasharray": "3,3",
-      opacity: "0.5",
-      class: "anchor-offset-connector"
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "circle",
-    type: "element",
-    attributes: {
-      cx: screenComponentX.toString(),
-      cy: screenComponentY.toString(),
-      r: "2",
-      fill: "#ffffff",
-      opacity: "0.7",
-      class: "anchor-offset-component-marker"
-    },
-    children: [],
-    value: ""
-  });
-  const yDistance = Math.abs(screenComponentY - screenGroupAnchorY);
-  const xDistance = Math.abs(screenComponentX - screenGroupAnchorX);
-  const totalDistance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
-  const componentHeightOffset = screenComponentHeight / 2 + COMPONENT_GAP_PX;
-  const dynamicOffset = Math.max(
-    componentHeightOffset,
-    Math.min(MAX_OFFSET_PX, totalDistance * DISTANCE_MULTIPLIER)
-  );
-  const horizontalLineY = offsetY > 0 ? screenComponentY - dynamicOffset : screenComponentY + dynamicOffset;
-  const componentWidthOffset = screenComponentWidth / 2 + COMPONENT_SIDE_GAP_PX;
-  const verticalLineX = offsetX > 0 ? screenComponentX + componentWidthOffset : screenComponentX - componentWidthOffset;
-  if (Math.abs(offsetX) > OFFSET_THRESHOLD_MM) {
-    objects.push(
-      ...createHorizontalDimension({
-        startX: screenGroupAnchorX,
-        endX: screenComponentX,
-        y: horizontalLineY,
-        offsetMm: offsetX,
-        offsetY
-      })
-    );
-  }
-  if (Math.abs(offsetY) > OFFSET_THRESHOLD_MM) {
-    objects.push(
-      ...createVerticalDimension({
-        x: verticalLineX,
-        startY: screenGroupAnchorY,
-        endY: screenComponentY,
-        offsetMm: -offsetY,
-        offsetX
-      })
-    );
-  }
-  return objects;
-}
-function createAnchorMarker(x, y) {
-  return {
-    name: "g",
+      },
+      children: []
+    }
+  ];
+  const defs = {
+    name: "defs",
     type: "element",
-    attributes: {
-      class: "anchor-offset-marker",
-      "data-type": "anchor_offset_marker"
-    },
+    value: "",
+    attributes: {},
     children: [
       {
-        name: "line",
-        type: "element",
-        attributes: {
-          x1: x.toString(),
-          y1: (y - ANCHOR_MARKER_SIZE_PX).toString(),
-          x2: x.toString(),
-          y2: (y + ANCHOR_MARKER_SIZE_PX).toString(),
-          stroke: "#ffffff",
-          "stroke-width": ANCHOR_MARKER_STROKE_WIDTH_PX.toString(),
-          "stroke-linecap": "round"
-        },
-        children: [],
-        value: ""
-      },
-      {
-        name: "line",
+        name: "pattern",
         type: "element",
+        value: "",
         attributes: {
-          x1: (x - ANCHOR_MARKER_SIZE_PX).toString(),
-          y1: y.toString(),
-          x2: (x + ANCHOR_MARKER_SIZE_PX).toString(),
-          y2: y.toString(),
-          stroke: "#ffffff",
-          "stroke-width": ANCHOR_MARKER_STROKE_WIDTH_PX.toString(),
-          "stroke-linecap": "round"
+          id: GRID_PATTERN_ID,
+          width: hasMajorGrid ? majorCellSize.toString() : gridCellSize.toString(),
+          height: hasMajorGrid ? majorCellSize.toString() : gridCellSize.toString(),
+          patternUnits: "userSpaceOnUse"
         },
-        children: [],
-        value: ""
+        children: patternChildren
       }
-    ],
-    value: ""
+    ]
   };
-}
-function createHorizontalDimension({
-  startX,
-  endX,
-  y,
-  offsetMm,
-  offsetY
-}) {
-  const objects = [];
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: startX.toString(),
-      y1: y.toString(),
-      x2: endX.toString(),
-      y2: y.toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString(),
-      class: "anchor-offset-dimension-x"
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: startX.toString(),
-      y1: (y - TICK_SIZE_PX).toString(),
-      x2: startX.toString(),
-      y2: (y + TICK_SIZE_PX).toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString()
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: endX.toString(),
-      y1: (y - TICK_SIZE_PX).toString(),
-      x2: endX.toString(),
-      y2: (y + TICK_SIZE_PX).toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString()
-    },
-    children: [],
-    value: ""
-  });
-  const midX = (startX + endX) / 2;
-  const labelY = offsetY > 0 ? y - TICK_SIZE_PX - LABEL_GAP_PX : y + TICK_SIZE_PX + LABEL_GAP_PX;
-  objects.push({
-    name: "text",
+  const rect = {
+    name: "rect",
     type: "element",
+    value: "",
     attributes: {
-      x: midX.toString(),
-      y: labelY.toString(),
-      fill: "#ffffff",
-      "font-size": LABEL_FONT_SIZE_PX.toString(),
-      "font-family": "Arial, sans-serif",
-      "text-anchor": "middle",
-      "dominant-baseline": offsetY > 0 ? "baseline" : "hanging",
-      class: "anchor-offset-label"
+      x: "0",
+      y: "0",
+      width: svgWidth.toString(),
+      height: svgHeight.toString(),
+      fill: `url(#${GRID_PATTERN_ID})`,
+      "pointer-events": "none",
+      "data-type": "pcb_grid",
+      "data-pcb-layer": "global"
     },
-    children: [
-      {
-        type: "text",
-        value: `X: ${offsetMm.toFixed(2)}mm`,
-        name: "",
-        attributes: {},
-        children: []
-      }
-    ],
-    value: ""
-  });
-  return objects;
+    children: []
+  };
+  return { defs, rect };
 }
-function createVerticalDimension({
-  x,
-  startY,
-  endY,
-  offsetMm,
-  offsetX
-}) {
-  const objects = [];
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: x.toString(),
-      y1: startY.toString(),
-      x2: x.toString(),
-      y2: endY.toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString(),
-      class: "anchor-offset-dimension-y"
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: (x - TICK_SIZE_PX).toString(),
-      y1: startY.toString(),
-      x2: (x + TICK_SIZE_PX).toString(),
-      y2: startY.toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString()
-    },
-    children: [],
-    value: ""
-  });
-  objects.push({
-    name: "line",
-    type: "element",
-    attributes: {
-      x1: (x - TICK_SIZE_PX).toString(),
-      y1: endY.toString(),
-      x2: (x + TICK_SIZE_PX).toString(),
-      y2: endY.toString(),
-      stroke: "#ffffff",
-      "stroke-width": STROKE_WIDTH_PX.toString()
-    },
-    children: [],
-    value: ""
-  });
-  const midY = (startY + endY) / 2;
-  const labelX = offsetX < 0 ? x - TICK_SIZE_PX - 4 : x + TICK_SIZE_PX + 4;
-  objects.push({
-    name: "text",
-    type: "element",
-    attributes: {
-      x: labelX.toString(),
-      y: midY.toString(),
-      fill: "#ffffff",
-      "font-size": LABEL_FONT_SIZE_PX.toString(),
-      "font-family": "Arial, sans-serif",
-      "text-anchor": offsetX < 0 ? "end" : "start",
-      "dominant-baseline": "middle",
-      class: "anchor-offset-label"
-    },
-    children: [
-      {
-        type: "text",
-        value: `Y: ${offsetMm.toFixed(2)}mm`,
-        name: "",
-        attributes: {},
-        children: []
-      }
-    ],
-    value: ""
-  });
-  return objects;
+function createMajorGridPatternChildren(cellSize, majorCellSize, lineColor, majorLineColor) {
+  const children = [];
+  const steps = Math.round(majorCellSize / cellSize);
+  for (let step = 0; step < steps; step += 1) {
+    const offset = Number((step * cellSize).toFixed(6));
+    const offsetString = offset.toString();
+    const color = step === 0 ? majorLineColor : lineColor;
+    const majorSizeString = majorCellSize.toString();
+    children.push({
+      name: "line",
+      type: "element",
+      value: "",
+      attributes: {
+        x1: offsetString,
+        y1: "0",
+        x2: offsetString,
+        y2: majorSizeString,
+        stroke: color,
+        "stroke-width": "1",
+        "shape-rendering": "crispEdges"
+      },
+      children: []
+    });
+    children.push({
+      name: "line",
+      type: "element",
+      value: "",
+      attributes: {
+        x1: "0",
+        y1: offsetString,
+        x2: majorSizeString,
+        y2: offsetString,
+        stroke: color,
+        "stroke-width": "1",
+        "shape-rendering": "crispEdges"
+      },
+      children: []
+    });
+  }
+  return children;
 }
 
 // lib/pcb/svg-object-fns/create-svg-objects-from-pcb-component.ts
+import { applyToPoint as applyToPoint30 } from "transformation-matrix";
 function createSvgObjectsFromPcbComponent(component, ctx) {
   const { transform, circuitJson } = ctx;
   const { center, width, height, rotation = 0 } = component;
@@ -5220,7 +5240,7 @@ function getSoftwareUsedString(circuitJson) {
 var package_default = {
   name: "circuit-to-svg",
   type: "module",
-  version: "0.0.281",
+  version: "0.0.283",
   description: "Convert Circuit JSON to SVG",
   main: "dist/index.js",
   files: [
@@ -5244,12 +5264,12 @@ var package_default = {
     "bun-match-svg": "^0.0.12",
     esbuild: "^0.20.2",
     "performance-now": "^2.1.0",
-    "circuit-json": "^0.0.319",
+    "circuit-json": "^0.0.327",
     react: "19.1.0",
     "react-cosmos": "7.0.0",
     "react-cosmos-plugin-vite": "7.0.0",
     "react-dom": "19.1.0",
-    tscircuit: "^0.0.937",
+    tscircuit: "^0.0.1018",
     tsup: "^8.0.2",
     typescript: "^5.4.5",
     "vite-tsconfig-paths": "^5.0.1"