circuit-to-canvas 0.0.51 → 0.0.53

package/dist/index.js

@@ -1,70 +1,51 @@
 // lib/drawer/CircuitToCanvasDrawer.ts
 import {
-  identity,
   compose,
-  translate,
-  scale
+  identity,
+  scale,
+  translate
 } from "transformation-matrix";
 
-// lib/drawer/pcb-render-layer-filter.ts
-import { getElementRenderLayers } from "@tscircuit/circuit-json-util";
-function shouldDrawElement(element, options) {
-  if (!options.layers || options.layers.length === 0) {
-    return true;
-  }
-  const elementLayers = getElementRenderLayers(element);
-  if (elementLayers.length === 0) {
-    return true;
-  }
-  return elementLayers.some((layer) => options.layers.includes(layer));
-}
-
-// lib/drawer/types.ts
-var DEFAULT_PCB_COLOR_MAP = {
-  copper: {
-    top: "rgb(200, 52, 52)",
-    inner1: "rgb(255, 140, 0)",
-    inner2: "rgb(255, 215, 0)",
-    inner3: "rgb(50, 205, 50)",
-    inner4: "rgb(64, 224, 208)",
-    inner5: "rgb(138, 43, 226)",
-    inner6: "rgb(255, 105, 180)",
-    bottom: "rgb(77, 127, 196)"
-  },
-  soldermaskWithCopperUnderneath: {
-    top: "rgb(18, 82, 50)",
-    bottom: "rgb(77, 127, 196)"
-  },
-  soldermask: {
-    top: "rgb(12, 55, 33)",
-    bottom: "rgb(12, 55, 33)"
-  },
-  soldermaskOverCopper: {
-    top: "rgb(52, 135, 73)",
-    bottom: "rgb(52, 135, 73)"
-  },
-  substrate: "rgb(201, 162, 110)",
-  drill: "#FF26E2",
-  silkscreen: {
-    top: "#f2eda1",
-    bottom: "#5da9e9"
-  },
-  boardOutline: "rgba(255, 255, 255, 0.5)",
-  courtyard: "#FF00FF",
-  keepout: "#FF6B6B"
-  // Red color for keepout zones
-};
-
-// lib/drawer/shapes/circle.ts
+// lib/drawer/shapes/path.ts
 import { applyToPoint } from "transformation-matrix";
-function drawCircle(params) {
-  const { ctx, center, radius, fill, realToCanvasMat } = params;
-  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y]);
-  const scaledRadius = radius * Math.abs(realToCanvasMat.a);
+function drawPath(params) {
+  const {
+    ctx,
+    points,
+    fill,
+    stroke,
+    strokeWidth = 1,
+    realToCanvasMat,
+    closePath = false
+  } = params;
+  if (points.length < 2) return;
   ctx.beginPath();
-  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
-  ctx.fillStyle = fill;
-  ctx.fill();
+  const canvasPoints = points.map(
+    (p) => applyToPoint(realToCanvasMat, [p.x, p.y])
+  );
+  const firstPoint = canvasPoints[0];
+  if (!firstPoint) return;
+  const [firstX, firstY] = firstPoint;
+  ctx.moveTo(firstX, firstY);
+  for (let i = 1; i < canvasPoints.length; i++) {
+    const point = canvasPoints[i];
+    if (!point) continue;
+    const [x, y] = point;
+    ctx.lineTo(x, y);
+  }
+  if (closePath) {
+    ctx.closePath();
+  }
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke) {
+    const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = scaledStrokeWidth;
+    ctx.stroke();
+  }
 }
 
 // lib/drawer/shapes/rect.ts
@@ -133,107 +114,71 @@ function drawRect(params) {
   ctx.restore();
 }
 
-// lib/drawer/shapes/oval.ts
-import { applyToPoint as applyToPoint3 } from "transformation-matrix";
-function drawOval(params) {
-  const {
-    ctx,
-    center,
-    radius_x,
-    radius_y,
-    fill,
-    stroke,
-    strokeWidth = 0.1,
-    realToCanvasMat,
-    rotation = 0
-  } = params;
-  const [cx, cy] = applyToPoint3(realToCanvasMat, [center.x, center.y]);
-  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a);
-  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a);
-  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
-  ctx.save();
-  ctx.translate(cx, cy);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  ctx.beginPath();
-  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
-  if (fill) {
-    ctx.fillStyle = fill;
-    ctx.fill();
+// lib/drawer/elements/pcb-board.ts
+function drawPcbBoard(params) {
+  const { ctx, board, realToCanvasMat, colorMap, drawBoardMaterial } = params;
+  const { width, height, center, outline } = board;
+  if (outline && Array.isArray(outline) && outline.length >= 3) {
+    if (drawBoardMaterial) {
+      drawPath({
+        ctx,
+        points: outline.map((p) => ({ x: p.x, y: p.y })),
+        fill: colorMap.substrate,
+        realToCanvasMat,
+        closePath: true
+      });
+    }
+    drawPath({
+      ctx,
+      points: outline.map((p) => ({ x: p.x, y: p.y })),
+      stroke: colorMap.boardOutline,
+      strokeWidth: 0.1,
+      realToCanvasMat,
+      closePath: true
+    });
+    return;
   }
-  if (stroke) {
-    ctx.strokeStyle = stroke;
-    ctx.lineWidth = scaledStrokeWidth;
-    ctx.stroke();
+  if (width !== void 0 && height !== void 0 && center) {
+    if (drawBoardMaterial) {
+      drawRect({
+        ctx,
+        center,
+        width,
+        height,
+        fill: colorMap.substrate,
+        realToCanvasMat
+      });
+    }
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    const corners = [
+      { x: center.x - halfWidth, y: center.y - halfHeight },
+      { x: center.x + halfWidth, y: center.y - halfHeight },
+      { x: center.x + halfWidth, y: center.y + halfHeight },
+      { x: center.x - halfWidth, y: center.y + halfHeight }
+    ];
+    drawPath({
+      ctx,
+      points: corners,
+      stroke: colorMap.boardOutline,
+      strokeWidth: 0.1,
+      realToCanvasMat,
+      closePath: true
+    });
   }
-  ctx.restore();
 }
 
-// lib/drawer/shapes/pill.ts
+// lib/drawer/elements/pcb-copper-pour.ts
 import { applyToPoint as applyToPoint4 } from "transformation-matrix";
-function drawPill(params) {
-  const {
-    ctx,
-    center,
-    width,
-    height,
-    fill,
-    realToCanvasMat,
-    rotation = 0,
-    stroke,
-    strokeWidth
-  } = params;
-  const [cx, cy] = applyToPoint4(realToCanvasMat, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(realToCanvasMat.a);
-  const scaledHeight = height * Math.abs(realToCanvasMat.a);
-  const scaledStrokeWidth = strokeWidth ? strokeWidth * Math.abs(realToCanvasMat.a) : void 0;
-  ctx.save();
-  ctx.translate(cx, cy);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  ctx.beginPath();
-  if (scaledWidth > scaledHeight) {
-    const radius = scaledHeight / 2;
-    const straightLength = scaledWidth - scaledHeight;
-    ctx.moveTo(-straightLength / 2, -radius);
-    ctx.lineTo(straightLength / 2, -radius);
-    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
-    ctx.lineTo(-straightLength / 2, radius);
-    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
-  } else if (scaledHeight > scaledWidth) {
-    const radius = scaledWidth / 2;
-    const straightLength = scaledHeight - scaledWidth;
-    ctx.moveTo(radius, -straightLength / 2);
-    ctx.lineTo(radius, straightLength / 2);
-    ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
-    ctx.lineTo(-radius, -straightLength / 2);
-    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
-  } else {
-    ctx.arc(0, 0, scaledWidth / 2, 0, Math.PI * 2);
-  }
-  ctx.closePath();
-  if (fill) {
-    ctx.fillStyle = fill;
-    ctx.fill();
-  }
-  if (stroke && scaledStrokeWidth) {
-    ctx.strokeStyle = stroke;
-    ctx.lineWidth = scaledStrokeWidth;
-    ctx.stroke();
-  }
-  ctx.restore();
-}
 
 // lib/drawer/shapes/polygon.ts
-import { applyToPoint as applyToPoint5 } from "transformation-matrix";
+import { applyToPoint as applyToPoint3 } from "transformation-matrix";
 function drawPolygon(params) {
   const { ctx, points, fill, realToCanvasMat } = params;
   if (points.length < 3) return;
   ctx.beginPath();
   const canvasPoints = points.map(
-    (p) => applyToPoint5(realToCanvasMat, [p.x, p.y])
+    (p) => applyToPoint3(realToCanvasMat, [p.x, p.y])
   );
   const firstPoint = canvasPoints[0];
   if (!firstPoint) return;
@@ -250,452 +195,425 @@ function drawPolygon(params) {
   ctx.fill();
 }
 
-// lib/drawer/elements/soldermask-margin.ts
-import { applyToPoint as applyToPoint6 } from "transformation-matrix";
-function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRadius, rotation, realToCanvasMat, soldermaskColor, padColor, asymmetricMargins) {
-  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(realToCanvasMat.a);
-  const scaledHeight = height * Math.abs(realToCanvasMat.a);
-  const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a);
-  const ml = asymmetricMargins?.left ?? margin;
-  const mr = asymmetricMargins?.right ?? margin;
-  const mt = asymmetricMargins?.top ?? margin;
-  const mb = asymmetricMargins?.bottom ?? margin;
-  const scaledThicknessL = Math.max(0, -ml) * Math.abs(realToCanvasMat.a);
-  const scaledThicknessR = Math.max(0, -mr) * Math.abs(realToCanvasMat.a);
-  const scaledThicknessT = Math.max(0, -mt) * Math.abs(realToCanvasMat.a);
-  const scaledThicknessB = Math.max(0, -mb) * Math.abs(realToCanvasMat.a);
-  ctx.save();
-  ctx.translate(cx, cy);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
+// lib/drawer/elements/pcb-copper-pour.ts
+function layerToColor(layer, colorMap) {
+  return colorMap.copper[layer] ?? colorMap.copper.top;
+}
+function computeArcFromBulge(startX, startY, endX, endY, bulge) {
+  if (Math.abs(bulge) < 1e-10) {
+    return null;
   }
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
+  const chordX = endX - startX;
+  const chordY = endY - startY;
+  const chordLength = Math.hypot(chordX, chordY);
+  if (chordLength < 1e-10) {
+    return null;
   }
-  const outerWidth = scaledWidth;
-  const outerHeight = scaledHeight;
-  const outerRadius = scaledRadius;
-  ctx.beginPath();
-  if (outerRadius > 0) {
-    const x = -outerWidth / 2;
-    const y = -outerHeight / 2;
-    const r = Math.min(outerRadius, outerWidth / 2, outerHeight / 2);
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + outerWidth - r, y);
-    ctx.arcTo(x + outerWidth, y, x + outerWidth, y + r, r);
-    ctx.lineTo(x + outerWidth, y + outerHeight - r);
-    ctx.arcTo(
-      x + outerWidth,
-      y + outerHeight,
-      x + outerWidth - r,
-      y + outerHeight,
-      r
-    );
-    ctx.lineTo(x + r, y + outerHeight);
-    ctx.arcTo(x, y + outerHeight, x, y + outerHeight - r, r);
-    ctx.lineTo(x, y + r);
-    ctx.arcTo(x, y, x + r, y, r);
-  } else {
-    ctx.rect(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight);
+  const sagitta = Math.abs(bulge) * (chordLength / 2);
+  const halfChord = chordLength / 2;
+  const radius = (sagitta * sagitta + halfChord * halfChord) / (2 * sagitta);
+  const distToCenter = radius - sagitta;
+  const midX = (startX + endX) / 2;
+  const midY = (startY + endY) / 2;
+  const perpX = -chordY / chordLength;
+  const perpY = chordX / chordLength;
+  const sign = bulge > 0 ? -1 : 1;
+  const centerX = midX + sign * perpX * distToCenter;
+  const centerY = midY + sign * perpY * distToCenter;
+  return { centerX, centerY, radius };
+}
+function drawArcFromBulge(ctx, realStartX, realStartY, realEndX, realEndY, bulge, realToCanvasMat) {
+  if (Math.abs(bulge) < 1e-10) {
+    const [endX, endY] = applyToPoint4(realToCanvasMat, [realEndX, realEndY]);
+    ctx.lineTo(endX, endY);
+    return;
   }
-  ctx.fillStyle = soldermaskColor;
-  ctx.fill();
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  const arc = computeArcFromBulge(
+    realStartX,
+    realStartY,
+    realEndX,
+    realEndY,
+    bulge
+  );
+  if (!arc) {
+    const [endX, endY] = applyToPoint4(realToCanvasMat, [realEndX, realEndY]);
+    ctx.lineTo(endX, endY);
+    return;
   }
-  const innerWidth = Math.max(
-    0,
-    scaledWidth - (scaledThicknessL + scaledThicknessR)
+  const [canvasStartX, canvasStartY] = applyToPoint4(realToCanvasMat, [
+    realStartX,
+    realStartY
+  ]);
+  const [canvasEndX, canvasEndY] = applyToPoint4(realToCanvasMat, [
+    realEndX,
+    realEndY
+  ]);
+  const [canvasCenterX, canvasCenterY] = applyToPoint4(realToCanvasMat, [
+    arc.centerX,
+    arc.centerY
+  ]);
+  const canvasRadius = Math.hypot(
+    canvasStartX - canvasCenterX,
+    canvasStartY - canvasCenterY
   );
-  const innerHeight = Math.max(
-    0,
-    scaledHeight - (scaledThicknessT + scaledThicknessB)
+  const startAngle = Math.atan2(
+    canvasStartY - canvasCenterY,
+    canvasStartX - canvasCenterX
   );
-  const innerRadius = Math.max(
-    0,
-    scaledRadius - (scaledThicknessL + scaledThicknessR + scaledThicknessT + scaledThicknessB) / 4
+  const endAngle = Math.atan2(
+    canvasEndY - canvasCenterY,
+    canvasEndX - canvasCenterX
   );
-  if (innerWidth > 0 && innerHeight > 0) {
-    ctx.beginPath();
-    const x = -scaledWidth / 2 + scaledThicknessL;
-    const y = -scaledHeight / 2 + scaledThicknessT;
-    if (innerRadius > 0) {
-      const r = Math.min(innerRadius, innerWidth / 2, innerHeight / 2);
-      ctx.moveTo(x + r, y);
-      ctx.lineTo(x + innerWidth - r, y);
-      ctx.arcTo(x + innerWidth, y, x + innerWidth, y + r, r);
-      ctx.lineTo(x + innerWidth, y + innerHeight - r);
-      ctx.arcTo(
-        x + innerWidth,
-        y + innerHeight,
-        x + innerWidth - r,
-        y + innerHeight,
-        r
-      );
-      ctx.lineTo(x + r, y + innerHeight);
-      ctx.arcTo(x, y + innerHeight, x, y + innerHeight - r, r);
-      ctx.lineTo(x, y + r);
-      ctx.arcTo(x, y, x + r, y, r);
+  const det = realToCanvasMat.a * realToCanvasMat.d - realToCanvasMat.b * realToCanvasMat.c;
+  const isFlipped = det < 0;
+  const counterclockwise = bulge > 0 ? !isFlipped : isFlipped;
+  ctx.arc(
+    canvasCenterX,
+    canvasCenterY,
+    canvasRadius,
+    startAngle,
+    endAngle,
+    counterclockwise
+  );
+}
+function drawRing(ctx, ring, realToCanvasMat) {
+  if (ring.vertices.length < 2) return;
+  if (ring.vertices.length === 2) {
+    const v0 = ring.vertices[0];
+    const v1 = ring.vertices[1];
+    if (v0 && v1 && Math.abs((v0.bulge ?? 0) - 1) < 1e-10 && Math.abs((v1.bulge ?? 0) - 1) < 1e-10) {
+      const [x0, y0] = applyToPoint4(realToCanvasMat, [v0.x, v0.y]);
+      ctx.moveTo(x0, y0);
+      drawArcFromBulge(ctx, v0.x, v0.y, v1.x, v1.y, 1, realToCanvasMat);
+      drawArcFromBulge(ctx, v1.x, v1.y, v0.x, v0.y, 1, realToCanvasMat);
+      return;
+    }
+  }
+  const firstVertex = ring.vertices[0];
+  if (!firstVertex) return;
+  const [firstX, firstY] = applyToPoint4(realToCanvasMat, [
+    firstVertex.x,
+    firstVertex.y
+  ]);
+  ctx.moveTo(firstX, firstY);
+  for (let i = 0; i < ring.vertices.length; i++) {
+    const currentVertex = ring.vertices[i];
+    const nextIndex = (i + 1) % ring.vertices.length;
+    const nextVertex = ring.vertices[nextIndex];
+    if (!currentVertex || !nextVertex) continue;
+    const bulge = currentVertex.bulge ?? 0;
+    if (Math.abs(bulge) < 1e-10) {
+      const [nextX, nextY] = applyToPoint4(realToCanvasMat, [
+        nextVertex.x,
+        nextVertex.y
+      ]);
+      ctx.lineTo(nextX, nextY);
     } else {
-      ctx.rect(x, y, innerWidth, innerHeight);
+      drawArcFromBulge(
+        ctx,
+        currentVertex.x,
+        currentVertex.y,
+        nextVertex.x,
+        nextVertex.y,
+        bulge,
+        realToCanvasMat
+      );
     }
-    ctx.fillStyle = padColor;
-    ctx.fill();
   }
-  ctx.restore();
 }
-function drawSoldermaskRingForCircle(ctx, center, radius, margin, realToCanvasMat, soldermaskColor, padColor) {
-  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
-  const scaledRadius = radius * Math.abs(realToCanvasMat.a);
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+function drawPcbCopperPour(params) {
+  const { ctx, pour, realToCanvasMat, colorMap } = params;
+  const color = layerToColor(pour.layer, colorMap);
   ctx.save();
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
+  if (pour.shape === "rect") {
+    const [cx, cy] = applyToPoint4(realToCanvasMat, [
+      pour.center.x,
+      pour.center.y
+    ]);
+    const scaledWidth = pour.width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = pour.height * Math.abs(realToCanvasMat.a);
+    ctx.translate(cx, cy);
+    if (pour.rotation) {
+      ctx.rotate(-pour.rotation * (Math.PI / 180));
+    }
+    ctx.beginPath();
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+    ctx.fillStyle = color;
+    ctx.globalAlpha = 0.5;
+    ctx.fill();
+    ctx.restore();
+    return;
   }
-  ctx.beginPath();
-  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
-  ctx.fillStyle = soldermaskColor;
-  ctx.fill();
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  if (pour.shape === "polygon") {
+    if (pour.points && pour.points.length >= 3) {
+      const canvasPoints = pour.points.map(
+        (p) => applyToPoint4(realToCanvasMat, [p.x, p.y])
+      );
+      const firstPoint = canvasPoints[0];
+      if (!firstPoint) {
+        ctx.restore();
+        return;
+      }
+      ctx.beginPath();
+      const [firstX, firstY] = firstPoint;
+      ctx.moveTo(firstX, firstY);
+      for (let i = 1; i < canvasPoints.length; i++) {
+        const point = canvasPoints[i];
+        if (!point) continue;
+        const [x, y] = point;
+        ctx.lineTo(x, y);
+      }
+      ctx.closePath();
+      ctx.fillStyle = color;
+      ctx.globalAlpha = 0.5;
+      ctx.fill();
+    }
+    ctx.restore();
+    return;
   }
-  const innerRadius = Math.max(0, scaledRadius - scaledMargin);
-  if (innerRadius > 0) {
+  if (pour.shape === "brep") {
     ctx.beginPath();
-    ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2);
-    ctx.fillStyle = padColor;
-    ctx.fill();
+    drawRing(ctx, pour.brep_shape.outer_ring, realToCanvasMat);
+    if (pour.brep_shape.inner_rings) {
+      for (const innerRing of pour.brep_shape.inner_rings) {
+        drawRing(ctx, innerRing, realToCanvasMat);
+      }
+    }
+    ctx.fillStyle = color;
+    ctx.globalAlpha = 0.5;
+    ctx.fill("evenodd");
+    ctx.restore();
+    return;
   }
   ctx.restore();
 }
-function drawSoldermaskRingForPill(ctx, center, width, height, margin, rotation, realToCanvasMat, soldermaskColor, padColor) {
-  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(realToCanvasMat.a);
-  const scaledHeight = height * Math.abs(realToCanvasMat.a);
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
-  ctx.save();
-  ctx.translate(cx, cy);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
-  }
-  const outerWidth = scaledWidth;
-  const outerHeight = scaledHeight;
-  ctx.beginPath();
-  if (outerWidth > outerHeight) {
-    const radius = outerHeight / 2;
-    const straightLength = outerWidth - outerHeight;
-    ctx.moveTo(-straightLength / 2, -radius);
-    ctx.lineTo(straightLength / 2, -radius);
-    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
-    ctx.lineTo(-straightLength / 2, radius);
-    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
-  } else if (outerHeight > outerWidth) {
-    const radius = outerWidth / 2;
-    const straightLength = outerHeight - outerWidth;
-    ctx.moveTo(radius, -straightLength / 2);
-    ctx.lineTo(radius, straightLength / 2);
-    ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
-    ctx.lineTo(-radius, -straightLength / 2);
-    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
-  } else {
-    ctx.arc(0, 0, outerWidth / 2, 0, Math.PI * 2);
+
+// lib/drawer/elements/pcb-copper-text.ts
+import { applyToPoint as applyToPoint6 } from "transformation-matrix";
+
+// lib/drawer/shapes/text/text.ts
+import { lineAlphabet } from "@tscircuit/alphabet";
+import { applyToPoint as applyToPoint5 } from "transformation-matrix";
+
+// lib/drawer/shapes/text/getAlphabetLayout.ts
+var GLYPH_WIDTH_RATIO = 0.62;
+var LETTER_SPACING_RATIO = 0.3;
+var SPACE_WIDTH_RATIO = 1;
+var STROKE_WIDTH_RATIO = 0.13;
+function getAlphabetLayout(text, fontSize) {
+  const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
+  const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
+  const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO;
+  const characters = Array.from(text);
+  let width = 0;
+  characters.forEach((char, index) => {
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    width += advance;
+    if (index < characters.length - 1) width += letterSpacing;
+  });
+  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
+  return {
+    width,
+    height: fontSize,
+    glyphWidth,
+    letterSpacing,
+    spaceWidth,
+    strokeWidth
+  };
+}
+
+// lib/drawer/shapes/text/getTextStartPosition.ts
+function getTextStartPosition(alignment, layout) {
+  const totalWidth = layout.width + layout.strokeWidth;
+  const totalHeight = layout.height + layout.strokeWidth;
+  let x = 0;
+  let y = 0;
+  if (alignment === "center" || alignment === "top_center" || alignment === "bottom_center") {
+    x = -totalWidth / 2;
+  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
+    x = 0;
+  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
+    x = -totalWidth;
   }
-  ctx.fillStyle = soldermaskColor;
-  ctx.fill();
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  if (alignment === "center" || alignment === "center_left" || alignment === "center_right") {
+    y = -totalHeight / 2;
+  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
+    y = 0;
+  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom_center") {
+    y = -totalHeight;
   }
-  const innerWidth = scaledWidth - scaledMargin * 2;
-  const innerHeight = scaledHeight - scaledMargin * 2;
-  if (innerWidth > 0 && innerHeight > 0) {
-    ctx.beginPath();
-    if (innerWidth > innerHeight) {
-      const radius = innerHeight / 2;
-      const straightLength = innerWidth - innerHeight;
-      ctx.moveTo(-straightLength / 2, -radius);
-      ctx.lineTo(straightLength / 2, -radius);
-      ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
-      ctx.lineTo(-straightLength / 2, radius);
-      ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
-    } else if (innerHeight > innerWidth) {
-      const radius = innerWidth / 2;
-      const straightLength = innerHeight - innerWidth;
-      ctx.moveTo(radius, -straightLength / 2);
-      ctx.lineTo(radius, straightLength / 2);
-      ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
-      ctx.lineTo(-radius, -straightLength / 2);
-      ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
-    } else {
-      ctx.arc(0, 0, innerWidth / 2, 0, Math.PI * 2);
+  return { x, y };
+}
+
+// lib/drawer/shapes/text/text.ts
+var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
+function strokeAlphabetText(params) {
+  const { ctx, text, fontSize, startX, startY } = params;
+  const layout = getAlphabetLayout(text, fontSize);
+  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
+  const topY = startY;
+  const characters = Array.from(text);
+  let cursor = startX + strokeWidth / 2;
+  characters.forEach((char, index) => {
+    const lines = getGlyphLines(char);
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    if (lines?.length) {
+      ctx.beginPath();
+      for (const line of lines) {
+        const x1 = cursor + line.x1 * glyphWidth;
+        const y1 = topY + (1 - line.y1) * height;
+        const x2 = cursor + line.x2 * glyphWidth;
+        const y2 = topY + (1 - line.y2) * height;
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+      }
+      ctx.stroke();
     }
-    ctx.fillStyle = padColor;
-    ctx.fill();
-  }
-  ctx.restore();
+    cursor += advance;
+    if (index < characters.length - 1) {
+      cursor += letterSpacing;
+    }
+  });
 }
-function drawSoldermaskRingForOval(ctx, center, radius_x, radius_y, margin, rotation, realToCanvasMat, soldermaskColor, holeColor) {
-  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
-  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a);
-  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a);
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+function drawText(params) {
+  const {
+    ctx,
+    text,
+    x,
+    y,
+    fontSize,
+    color,
+    realToCanvasMat,
+    anchorAlignment,
+    rotation = 0
+  } = params;
+  if (!text) return;
+  const [canvasX, canvasY] = applyToPoint5(realToCanvasMat, [x, y]);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const scaledFontSize = fontSize * scale2;
+  const layout = getAlphabetLayout(text, scaledFontSize);
+  const startPos = getTextStartPosition(anchorAlignment, layout);
   ctx.save();
-  ctx.translate(cx, cy);
+  ctx.translate(canvasX, canvasY);
   if (rotation !== 0) {
     ctx.rotate(-rotation * (Math.PI / 180));
   }
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
-  }
-  ctx.beginPath();
-  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
-  ctx.fillStyle = soldermaskColor;
-  ctx.fill();
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
-  }
-  const innerRadiusX = Math.max(0, scaledRadiusX - scaledMargin);
-  const innerRadiusY = Math.max(0, scaledRadiusY - scaledMargin);
-  if (innerRadiusX > 0 && innerRadiusY > 0) {
-    ctx.beginPath();
-    ctx.ellipse(0, 0, innerRadiusX, innerRadiusY, 0, 0, Math.PI * 2);
-    ctx.fillStyle = holeColor;
-    ctx.fill();
-  }
+  ctx.lineWidth = layout.strokeWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = color;
+  strokeAlphabetText({
+    ctx,
+    text,
+    fontSize: scaledFontSize,
+    startX: startPos.x,
+    startY: startPos.y
+  });
   ctx.restore();
 }
-function offsetPolygonPoints(points, offset) {
-  if (points.length < 3 || offset === 0) return points;
-  let centerX = 0;
-  let centerY = 0;
-  for (const point of points) {
-    centerX += point.x;
-    centerY += point.y;
-  }
-  centerX /= points.length;
-  centerY /= points.length;
-  const result = [];
-  for (const point of points) {
-    const vectorX = point.x - centerX;
-    const vectorY = point.y - centerY;
-    const distance = Math.sqrt(vectorX * vectorX + vectorY * vectorY);
-    if (distance > 0) {
-      const normalizedX = vectorX / distance;
-      const normalizedY = vectorY / distance;
-      result.push({
-        x: point.x + normalizedX * offset,
-        y: point.y + normalizedY * offset
-      });
-    } else {
-      result.push({
-        x: point.x + offset,
-        y: point.y
-      });
-    }
+
+// lib/drawer/elements/pcb-copper-text.ts
+var DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 };
+function mapAnchorAlignment(alignment) {
+  if (!alignment) return "center";
+  if (alignment.includes("left")) return "center_left";
+  if (alignment.includes("right")) return "center_right";
+  return "center";
+}
+function drawPcbCopperText(params) {
+  const { ctx, text, realToCanvasMat, colorMap } = params;
+  const content = text.text ?? "";
+  if (!content) return;
+  const [x, y] = applyToPoint6(realToCanvasMat, [
+    text.anchor_position.x,
+    text.anchor_position.y
+  ]);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const fontSize = (text.font_size ?? 1) * scale2;
+  const rotation = text.ccw_rotation ?? 0;
+  const padding = {
+    ...DEFAULT_PADDING,
+    ...text.knockout_padding
+  };
+  const textColor = colorMap.copper[text.layer] ?? colorMap.copper.top;
+  const layout = getAlphabetLayout(content, fontSize);
+  const totalWidth = layout.width + layout.strokeWidth;
+  const alignment = mapAnchorAlignment(text.anchor_alignment);
+  const startPos = getTextStartPosition(alignment, layout);
+  ctx.save();
+  ctx.translate(x, y);
+  if (text.is_mirrored) ctx.scale(-1, 1);
+  if (rotation !== 0) ctx.rotate(-rotation * (Math.PI / 180));
+  ctx.lineWidth = layout.strokeWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  if (text.is_knockout) {
+    const paddingLeft = padding.left * scale2;
+    const paddingRight = padding.right * scale2;
+    const paddingTop = padding.top * scale2;
+    const paddingBottom = padding.bottom * scale2;
+    const rectX = startPos.x - paddingLeft * 4;
+    const rectY = startPos.y - paddingTop * 4;
+    const rectWidth = totalWidth + paddingLeft * 2 + paddingRight * 2;
+    const rectHeight = layout.height + layout.strokeWidth + paddingTop * 2 + paddingBottom * 2;
+    ctx.fillStyle = textColor;
+    ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
+  } else {
+    ctx.strokeStyle = textColor;
   }
-  return result;
+  strokeAlphabetText({
+    ctx,
+    text: content,
+    fontSize,
+    startX: startPos.x,
+    startY: startPos.y
+  });
+  ctx.restore();
 }
 
-// lib/drawer/elements/pcb-plated-hole.ts
-function drawPcbPlatedHole(params) {
-  const {
-    ctx,
-    hole,
-    realToCanvasMat,
-    colorMap,
-    soldermaskMargin = 0,
-    showSoldermask
-  } = params;
-  if (hole.is_covered_with_solder_mask === true && showSoldermask) {
-    return;
-  }
-  const copperColor = colorMap.copper.top;
-  const copperInset = soldermaskMargin < 0 ? Math.abs(soldermaskMargin) : 0;
-  if (hole.shape === "circle") {
-    drawCircle({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      radius: hole.outer_diameter / 2 - copperInset,
-      fill: copperColor,
-      realToCanvasMat
-    });
-    drawCircle({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      radius: hole.hole_diameter / 2,
-      fill: colorMap.drill,
-      realToCanvasMat
-    });
-    return;
-  }
-  if (hole.shape === "oval") {
-    drawOval({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      radius_x: hole.outer_width / 2 - copperInset,
-      radius_y: hole.outer_height / 2 - copperInset,
-      fill: copperColor,
-      realToCanvasMat,
-      rotation: hole.ccw_rotation
-    });
-    drawOval({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      radius_x: hole.hole_width / 2,
-      radius_y: hole.hole_height / 2,
-      fill: colorMap.drill,
-      realToCanvasMat,
-      rotation: hole.ccw_rotation
-    });
-    return;
-  }
-  if (hole.shape === "pill") {
-    drawPill({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      width: hole.outer_width - copperInset * 2,
-      height: hole.outer_height - copperInset * 2,
-      fill: copperColor,
-      realToCanvasMat,
-      rotation: hole.ccw_rotation
-    });
-    drawPill({
+// lib/drawer/shapes/circle.ts
+import { applyToPoint as applyToPoint7 } from "transformation-matrix";
+function drawCircle(params) {
+  const { ctx, center, radius, fill, realToCanvasMat } = params;
+  const [cx, cy] = applyToPoint7(realToCanvasMat, [center.x, center.y]);
+  const scaledRadius = radius * Math.abs(realToCanvasMat.a);
+  ctx.beginPath();
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+  ctx.fillStyle = fill;
+  ctx.fill();
+}
+
+// lib/drawer/elements/pcb-cutout.ts
+function drawPcbCutout(params) {
+  const { ctx, cutout, realToCanvasMat, colorMap } = params;
+  if (cutout.shape === "rect") {
+    drawRect({
       ctx,
-      center: { x: hole.x, y: hole.y },
-      width: hole.hole_width,
-      height: hole.hole_height,
+      center: cutout.center,
+      width: cutout.width,
+      height: cutout.height,
       fill: colorMap.drill,
       realToCanvasMat,
-      rotation: hole.ccw_rotation
+      rotation: cutout.rotation ?? 0,
+      borderRadius: cutout.corner_radius ?? 0
     });
     return;
   }
-  if (hole.shape === "circular_hole_with_rect_pad") {
-    drawRect({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      width: hole.rect_pad_width - copperInset * 2,
-      height: hole.rect_pad_height - copperInset * 2,
-      fill: copperColor,
-      realToCanvasMat,
-      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0
-    });
-    const holeX = hole.x + (hole.hole_offset_x ?? 0);
-    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+  if (cutout.shape === "circle") {
     drawCircle({
       ctx,
-      center: { x: holeX, y: holeY },
-      radius: hole.hole_diameter / 2,
-      fill: colorMap.drill,
-      realToCanvasMat
-    });
-    return;
-  }
-  if (hole.shape === "pill_hole_with_rect_pad") {
-    drawRect({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      width: hole.rect_pad_width - copperInset * 2,
-      height: hole.rect_pad_height - copperInset * 2,
-      fill: copperColor,
-      realToCanvasMat,
-      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0
-    });
-    const holeX = hole.x + (hole.hole_offset_x ?? 0);
-    const holeY = hole.y + (hole.hole_offset_y ?? 0);
-    drawPill({
-      ctx,
-      center: { x: holeX, y: holeY },
-      width: hole.hole_width,
-      height: hole.hole_height,
+      center: cutout.center,
+      radius: cutout.radius,
       fill: colorMap.drill,
       realToCanvasMat
     });
     return;
   }
-  if (hole.shape === "rotated_pill_hole_with_rect_pad") {
-    drawRect({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      width: hole.rect_pad_width - copperInset * 2,
-      height: hole.rect_pad_height - copperInset * 2,
-      fill: copperColor,
-      realToCanvasMat,
-      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0,
-      rotation: hole.rect_ccw_rotation
-    });
-    const holeX = hole.x + (hole.hole_offset_x ?? 0);
-    const holeY = hole.y + (hole.hole_offset_y ?? 0);
-    drawPill({
-      ctx,
-      center: { x: holeX, y: holeY },
-      width: hole.hole_width,
-      height: hole.hole_height,
-      fill: colorMap.drill,
-      realToCanvasMat,
-      rotation: hole.hole_ccw_rotation
-    });
-    return;
-  }
-  if (hole.shape === "hole_with_polygon_pad") {
-    const padOutline = hole.pad_outline;
-    if (padOutline && padOutline.length >= 3) {
-      const padPoints = padOutline.map((point) => ({
-        x: hole.x + point.x,
-        y: hole.y + point.y
-      }));
-      const copperPoints = copperInset > 0 ? offsetPolygonPoints(padPoints, -copperInset) : padPoints;
-      if (copperPoints.length >= 3) {
-        drawPolygon({
-          ctx,
-          points: copperPoints,
-          fill: copperColor,
-          realToCanvasMat
-        });
-      }
-    }
-    const holeX = hole.x + (hole.hole_offset_x ?? 0);
-    const holeY = hole.y + (hole.hole_offset_y ?? 0);
-    const holeShape = hole.hole_shape;
-    if (holeShape === "circle") {
-      drawCircle({
-        ctx,
-        center: { x: holeX, y: holeY },
-        radius: (hole.hole_diameter ?? 0) / 2,
-        fill: colorMap.drill,
-        realToCanvasMat
-      });
-    } else if (holeShape === "oval") {
-      drawOval({
-        ctx,
-        center: { x: holeX, y: holeY },
-        radius_x: (hole.hole_width ?? 0) / 2,
-        radius_y: (hole.hole_height ?? 0) / 2,
-        fill: colorMap.drill,
-        realToCanvasMat
-      });
-    } else if (holeShape === "pill") {
-      drawPill({
-        ctx,
-        center: { x: holeX, y: holeY },
-        width: hole.hole_width ?? 0,
-        height: hole.hole_height ?? 0,
-        fill: colorMap.drill,
-        realToCanvasMat
-      });
-    } else if (holeShape === "rotated_pill") {
-      drawPill({
+  if (cutout.shape === "polygon") {
+    if (cutout.points && cutout.points.length >= 3) {
+      drawPolygon({
         ctx,
-        center: { x: holeX, y: holeY },
-        width: hole.hole_width ?? 0,
-        height: hole.hole_height ?? 0,
+        points: cutout.points,
         fill: colorMap.drill,
         realToCanvasMat
       });
@@ -704,188 +622,213 @@ function drawPcbPlatedHole(params) {
   }
 }
 
-// lib/drawer/elements/pcb-via.ts
-function drawPcbVia(params) {
-  const { ctx, via, realToCanvasMat, colorMap } = params;
-  drawCircle({
-    ctx,
-    center: { x: via.x, y: via.y },
-    radius: via.outer_diameter / 2,
-    fill: colorMap.copper.top,
-    realToCanvasMat
-  });
-  drawCircle({
-    ctx,
-    center: { x: via.x, y: via.y },
-    radius: via.hole_diameter / 2,
-    fill: colorMap.drill,
-    realToCanvasMat
-  });
-}
-
-// lib/drawer/elements/pcb-hole.ts
-function getRotation(hole) {
-  if ("ccw_rotation" in hole && typeof hole.ccw_rotation === "number") {
-    return hole.ccw_rotation;
-  }
-  return 0;
+// lib/drawer/shapes/dimension-line.ts
+import { applyToPoint as applyToPoint8 } from "transformation-matrix";
+var TEXT_OFFSET_MULTIPLIER = 1.5;
+var CHARACTER_WIDTH_MULTIPLIER = 0.6;
+var TEXT_INTERSECTION_PADDING_MULTIPLIER = 0.3;
+function normalize(v) {
+  const len = Math.hypot(v.x, v.y) || 1;
+  return { x: v.x / len, y: v.y / len };
 }
-function drawPcbHole(params) {
-  const { ctx, hole, realToCanvasMat, colorMap, soldermaskMargin = 0 } = params;
-  if (hole.is_covered_with_solder_mask === true) {
-    return;
-  }
-  const holeInset = soldermaskMargin < 0 ? Math.abs(soldermaskMargin) : 0;
-  if (hole.hole_shape === "circle") {
-    drawCircle({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      radius: hole.hole_diameter / 2 - holeInset,
-      fill: colorMap.drill,
-      realToCanvasMat
-    });
-    return;
-  }
-  if (hole.hole_shape === "square") {
-    const rotation = getRotation(hole);
-    drawRect({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      width: hole.hole_diameter - holeInset * 2,
-      height: hole.hole_diameter - holeInset * 2,
-      fill: colorMap.drill,
-      realToCanvasMat,
-      rotation
-    });
-    return;
-  }
-  if (hole.hole_shape === "oval") {
-    const rotation = getRotation(hole);
-    drawOval({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      radius_x: hole.hole_width / 2 - holeInset,
-      radius_y: hole.hole_height / 2 - holeInset,
-      fill: colorMap.drill,
-      realToCanvasMat,
-      rotation
-    });
-    return;
-  }
-  if (hole.hole_shape === "rect") {
-    const rotation = getRotation(hole);
-    drawRect({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      width: hole.hole_width - holeInset * 2,
-      height: hole.hole_height - holeInset * 2,
-      fill: colorMap.drill,
-      realToCanvasMat,
-      rotation
-    });
-    return;
-  }
-  if (hole.hole_shape === "pill" || hole.hole_shape === "rotated_pill") {
-    const rotation = getRotation(hole);
-    drawPill({
-      ctx,
-      center: { x: hole.x, y: hole.y },
-      width: hole.hole_width - holeInset * 2,
-      height: hole.hole_height - holeInset * 2,
-      fill: colorMap.drill,
-      realToCanvasMat,
-      rotation
-    });
-    return;
-  }
-}
-
-// lib/drawer/elements/pcb-smtpad.ts
-function layerToColor(layer, colorMap) {
-  return colorMap.copper[layer] ?? colorMap.copper.top;
-}
-function getBorderRadius(pad) {
-  if (pad.shape === "rect" || pad.shape === "rotated_rect") {
-    return pad.corner_radius ?? pad.rect_border_radius ?? 0;
-  }
-  return 0;
-}
-function drawPcbSmtPad(params) {
-  const { ctx, pad, realToCanvasMat, colorMap } = params;
-  const color = layerToColor(pad.layer, colorMap);
-  if (pad.shape === "rect") {
-    drawRect({
-      ctx,
-      center: { x: pad.x, y: pad.y },
-      width: pad.width,
-      height: pad.height,
-      fill: color,
-      realToCanvasMat,
-      borderRadius: getBorderRadius(pad)
-    });
-    return;
-  }
-  if (pad.shape === "rotated_rect") {
-    drawRect({
-      ctx,
-      center: { x: pad.x, y: pad.y },
-      width: pad.width,
-      height: pad.height,
-      fill: color,
-      realToCanvasMat,
-      borderRadius: getBorderRadius(pad),
-      rotation: pad.ccw_rotation ?? 0
-    });
-    return;
-  }
-  if (pad.shape === "circle") {
-    drawCircle({
-      ctx,
-      center: { x: pad.x, y: pad.y },
-      radius: pad.radius,
-      fill: color,
-      realToCanvasMat
-    });
-    return;
-  }
-  if (pad.shape === "pill") {
-    drawPill({
-      ctx,
-      center: { x: pad.x, y: pad.y },
-      width: pad.width,
-      height: pad.height,
-      fill: color,
-      realToCanvasMat
+function drawDimensionLine(params) {
+  const {
+    ctx,
+    from,
+    to,
+    realToCanvasMat,
+    color,
+    fontSize,
+    arrowSize = 1,
+    strokeWidth: manualStrokeWidth,
+    text,
+    textRotation,
+    offset
+  } = params;
+  const direction = normalize({ x: to.x - from.x, y: to.y - from.y });
+  const perpendicular = { x: -direction.y, y: direction.x };
+  const hasOffsetDirection = offset?.direction && typeof offset.direction.x === "number" && typeof offset.direction.y === "number";
+  const normalizedOffsetDirection = hasOffsetDirection ? normalize(offset.direction) : { x: 0, y: 0 };
+  const offsetMagnitude = offset?.distance ?? 0;
+  const offsetVector = {
+    x: normalizedOffsetDirection.x * offsetMagnitude,
+    y: normalizedOffsetDirection.y * offsetMagnitude
+  };
+  const fromOffset = { x: from.x + offsetVector.x, y: from.y + offsetVector.y };
+  const toOffset = { x: to.x + offsetVector.x, y: to.y + offsetVector.y };
+  const fromBase = {
+    x: fromOffset.x + direction.x * arrowSize,
+    y: fromOffset.y + direction.y * arrowSize
+  };
+  const toBase = {
+    x: toOffset.x - direction.x * arrowSize,
+    y: toOffset.y - direction.y * arrowSize
+  };
+  const scaleValue = Math.abs(realToCanvasMat.a);
+  const strokeWidth = manualStrokeWidth ?? arrowSize / 5;
+  const lineColor = color || "rgba(255,255,255,0.5)";
+  const extensionDirection = hasOffsetDirection && (Math.abs(normalizedOffsetDirection.x) > Number.EPSILON || Math.abs(normalizedOffsetDirection.y) > Number.EPSILON) ? normalizedOffsetDirection : perpendicular;
+  const extensionLength = offsetMagnitude + 0.5;
+  const allPoints = [];
+  const getExtensionPoints = (anchor) => {
+    const endPoint = {
+      x: anchor.x + extensionDirection.x * extensionLength,
+      y: anchor.y + extensionDirection.y * extensionLength
+    };
+    const halfWidth = strokeWidth / 2;
+    const extPerpendicular = {
+      x: -extensionDirection.y,
+      y: extensionDirection.x
+    };
+    return [
+      {
+        x: anchor.x + extPerpendicular.x * halfWidth,
+        y: anchor.y + extPerpendicular.y * halfWidth
+      },
+      {
+        x: anchor.x - extPerpendicular.x * halfWidth,
+        y: anchor.y - extPerpendicular.y * halfWidth
+      },
+      {
+        x: endPoint.x - extPerpendicular.x * halfWidth,
+        y: endPoint.y - extPerpendicular.y * halfWidth
+      },
+      {
+        x: endPoint.x + extPerpendicular.x * halfWidth,
+        y: endPoint.y + extPerpendicular.y * halfWidth
+      }
+    ];
+  };
+  allPoints.push(fromOffset);
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (arrowSize / 2),
+    y: fromBase.y + perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y + perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (strokeWidth / 2),
+    y: toBase.y + perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (arrowSize / 2),
+    y: toBase.y + perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push(toOffset);
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (arrowSize / 2),
+    y: toBase.y - perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (strokeWidth / 2),
+    y: toBase.y - perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y - perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (arrowSize / 2),
+    y: fromBase.y - perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push(fromOffset);
+  const startPoint = allPoints[0];
+  const addTick = (anchor) => {
+    const pts = getExtensionPoints(anchor);
+    allPoints.push(startPoint);
+    allPoints.push(pts[0]);
+    allPoints.push(...pts);
+    allPoints.push(pts[0]);
+    allPoints.push(startPoint);
+  };
+  addTick(from);
+  addTick(to);
+  drawPolygon({
+    ctx,
+    points: allPoints,
+    fill: lineColor,
+    realToCanvasMat
+  });
+  if (text) {
+    const midPoint = {
+      x: (from.x + to.x) / 2 + offsetVector.x,
+      y: (from.y + to.y) / 2 + offsetVector.y
+    };
+    const [screenFromX, screenFromY] = applyToPoint8(realToCanvasMat, [
+      fromOffset.x,
+      fromOffset.y
+    ]);
+    const [screenToX, screenToY] = applyToPoint8(realToCanvasMat, [
+      toOffset.x,
+      toOffset.y
+    ]);
+    const screenDirection = normalize({
+      x: screenToX - screenFromX,
+      y: screenToY - screenFromY
     });
-    return;
-  }
-  if (pad.shape === "rotated_pill") {
-    drawPill({
+    let textAngle = Math.atan2(screenDirection.y, screenDirection.x) * 180 / Math.PI;
+    if (textAngle > 90 || textAngle < -90) {
+      textAngle += 180;
+    }
+    const finalTextAngle = typeof textRotation === "number" && Number.isFinite(textRotation) ? textAngle - textRotation : textAngle;
+    let additionalOffset = 0;
+    if (text && typeof textRotation === "number" && Number.isFinite(textRotation)) {
+      const textWidth = text.length * fontSize * CHARACTER_WIDTH_MULTIPLIER;
+      const textHeight = fontSize;
+      const rotationRad = textRotation * Math.PI / 180;
+      const sinRot = Math.abs(Math.sin(rotationRad));
+      const cosRot = Math.abs(Math.cos(rotationRad));
+      const halfWidth = textWidth / 2;
+      const halfHeight = textHeight / 2;
+      const maxExtension = halfWidth * sinRot + halfHeight * cosRot;
+      additionalOffset = maxExtension + fontSize * TEXT_INTERSECTION_PADDING_MULTIPLIER;
+    }
+    const textOffset = arrowSize * TEXT_OFFSET_MULTIPLIER + additionalOffset;
+    const textPoint = {
+      x: midPoint.x + perpendicular.x * textOffset,
+      y: midPoint.y + perpendicular.y * textOffset
+    };
+    drawText({
       ctx,
-      center: { x: pad.x, y: pad.y },
-      width: pad.width,
-      height: pad.height,
-      fill: color,
+      text,
+      x: textPoint.x,
+      y: textPoint.y,
+      fontSize,
+      color: lineColor,
       realToCanvasMat,
-      rotation: pad.ccw_rotation ?? 0
+      anchorAlignment: "center",
+      rotation: -finalTextAngle
+      // drawText expects CCW rotation in degrees
     });
-    return;
-  }
-  if (pad.shape === "polygon") {
-    if (pad.points && pad.points.length >= 3) {
-      drawPolygon({
-        ctx,
-        points: pad.points,
-        fill: color,
-        realToCanvasMat
-      });
-    }
-    return;
   }
 }
 
+// lib/drawer/elements/pcb-fabrication-note-dimension.ts
+var DEFAULT_FABRICATION_NOTE_COLOR = "rgba(255,255,255,0.5)";
+function drawPcbFabricationNoteDimension(params) {
+  const { ctx, pcbFabricationNoteDimension, realToCanvasMat } = params;
+  const color = pcbFabricationNoteDimension.color ?? DEFAULT_FABRICATION_NOTE_COLOR;
+  drawDimensionLine({
+    ctx,
+    from: pcbFabricationNoteDimension.from,
+    to: pcbFabricationNoteDimension.to,
+    realToCanvasMat,
+    color,
+    fontSize: pcbFabricationNoteDimension.font_size ?? 1,
+    arrowSize: pcbFabricationNoteDimension.arrow_size ?? 1,
+    text: pcbFabricationNoteDimension.text,
+    textRotation: pcbFabricationNoteDimension.text_ccw_rotation,
+    offset: pcbFabricationNoteDimension.offset_distance && pcbFabricationNoteDimension.offset_direction ? {
+      distance: pcbFabricationNoteDimension.offset_distance,
+      direction: pcbFabricationNoteDimension.offset_direction
+    } : void 0
+  });
+}
+
 // lib/drawer/shapes/line.ts
-import { applyToPoint as applyToPoint7 } from "transformation-matrix";
+import { applyToPoint as applyToPoint9 } from "transformation-matrix";
 function drawLine(params) {
   const {
     ctx,
@@ -896,8 +839,8 @@ function drawLine(params) {
     realToCanvasMat,
     lineCap = "round"
   } = params;
-  const [x1, y1] = applyToPoint7(realToCanvasMat, [start.x, start.y]);
-  const [x2, y2] = applyToPoint7(realToCanvasMat, [end.x, end.y]);
+  const [x1, y1] = applyToPoint9(realToCanvasMat, [start.x, start.y]);
+  const [x2, y2] = applyToPoint9(realToCanvasMat, [end.x, end.y]);
   const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
   ctx.beginPath();
   ctx.moveTo(x1, y1);
@@ -908,355 +851,381 @@ function drawLine(params) {
   ctx.stroke();
 }
 
-// lib/drawer/elements/pcb-trace.ts
-function layerToColor2(layer, colorMap) {
-  return colorMap.copper[layer] ?? colorMap.copper.top;
-}
-function drawPcbTrace(params) {
-  const { ctx, trace, realToCanvasMat, colorMap } = params;
-  if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
-    return;
-  }
-  for (let i = 0; i < trace.route.length - 1; i++) {
-    const start = trace.route[i];
-    const end = trace.route[i + 1];
+// lib/drawer/elements/pcb-fabrication-note-path.ts
+function drawPcbFabricationNotePath(params) {
+  const { ctx, path, realToCanvasMat, colorMap } = params;
+  const defaultColor = "rgba(255,255,255,0.5)";
+  const color = path.color ?? defaultColor;
+  if (!path.route || path.route.length < 2) return;
+  for (let i = 0; i < path.route.length - 1; i++) {
+    const start = path.route[i];
+    const end = path.route[i + 1];
     if (!start || !end) continue;
-    const layer = "layer" in start ? start.layer : "layer" in end ? end.layer : null;
-    if (!layer) continue;
-    const color = layerToColor2(layer, colorMap);
-    const traceWidth = "width" in start ? start.width : "width" in end ? end.width : 0.1;
     drawLine({
       ctx,
       start: { x: start.x, y: start.y },
       end: { x: end.x, y: end.y },
-      strokeWidth: traceWidth,
+      strokeWidth: path.stroke_width ?? 0.1,
       stroke: color,
-      realToCanvasMat,
-      lineCap: "round"
+      realToCanvasMat
     });
   }
 }
 
-// lib/drawer/shapes/path.ts
-import { applyToPoint as applyToPoint8 } from "transformation-matrix";
-function drawPath(params) {
+// lib/drawer/elements/pcb-fabrication-note-rect.ts
+function drawPcbFabricationNoteRect(params) {
+  const { ctx, rect, realToCanvasMat, colorMap } = params;
+  const defaultColor = "rgba(255,255,255,0.5)";
+  const color = rect.color ?? defaultColor;
+  const isFilled = rect.is_filled ?? false;
+  const hasStroke = rect.has_stroke ?? true;
+  const isStrokeDashed = rect.is_stroke_dashed ?? false;
+  drawRect({
+    ctx,
+    center: rect.center,
+    width: rect.width,
+    height: rect.height,
+    fill: isFilled ? color : void 0,
+    stroke: hasStroke ? color : void 0,
+    strokeWidth: hasStroke ? rect.stroke_width : void 0,
+    borderRadius: rect.corner_radius,
+    realToCanvasMat,
+    isStrokeDashed
+  });
+}
+
+// lib/drawer/elements/pcb-fabrication-note-text.ts
+var DEFAULT_FABRICATION_NOTE_COLOR2 = "rgba(255,255,255,0.5)";
+function layerToColor2(layer, colorMap) {
+  return DEFAULT_FABRICATION_NOTE_COLOR2;
+}
+function drawPcbFabricationNoteText(params) {
+  const { ctx, text, realToCanvasMat, colorMap } = params;
+  const defaultColor = layerToColor2(text.layer, colorMap);
+  const color = text.color ?? defaultColor;
+  const fontSize = text.font_size;
+  drawText({
+    ctx,
+    text: text.text,
+    x: text.anchor_position.x,
+    y: text.anchor_position.y,
+    fontSize,
+    color,
+    realToCanvasMat,
+    anchorAlignment: text.anchor_alignment
+  });
+}
+
+// lib/drawer/shapes/oval.ts
+import { applyToPoint as applyToPoint10 } from "transformation-matrix";
+function drawOval(params) {
   const {
     ctx,
-    points,
+    center,
+    radius_x,
+    radius_y,
     fill,
     stroke,
-    strokeWidth = 1,
+    strokeWidth = 0.1,
     realToCanvasMat,
-    closePath = false
+    rotation = 0
   } = params;
-  if (points.length < 2) return;
+  const [cx, cy] = applyToPoint10(realToCanvasMat, [center.x, center.y]);
+  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a);
+  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a);
+  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
   ctx.beginPath();
-  const canvasPoints = points.map(
-    (p) => applyToPoint8(realToCanvasMat, [p.x, p.y])
-  );
-  const firstPoint = canvasPoints[0];
-  if (!firstPoint) return;
-  const [firstX, firstY] = firstPoint;
-  ctx.moveTo(firstX, firstY);
-  for (let i = 1; i < canvasPoints.length; i++) {
-    const point = canvasPoints[i];
-    if (!point) continue;
-    const [x, y] = point;
-    ctx.lineTo(x, y);
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
   }
-  if (closePath) {
-    ctx.closePath();
+  if (stroke) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = scaledStrokeWidth;
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+// lib/drawer/shapes/pill.ts
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+function drawPill(params) {
+  const {
+    ctx,
+    center,
+    width,
+    height,
+    fill,
+    realToCanvasMat,
+    rotation = 0,
+    stroke,
+    strokeWidth
+  } = params;
+  const [cx, cy] = applyToPoint11(realToCanvasMat, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(realToCanvasMat.a);
+  const scaledHeight = height * Math.abs(realToCanvasMat.a);
+  const scaledStrokeWidth = strokeWidth ? strokeWidth * Math.abs(realToCanvasMat.a) : void 0;
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  ctx.beginPath();
+  if (scaledWidth > scaledHeight) {
+    const radius = scaledHeight / 2;
+    const straightLength = scaledWidth - scaledHeight;
+    ctx.moveTo(-straightLength / 2, -radius);
+    ctx.lineTo(straightLength / 2, -radius);
+    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
+    ctx.lineTo(-straightLength / 2, radius);
+    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
+  } else if (scaledHeight > scaledWidth) {
+    const radius = scaledWidth / 2;
+    const straightLength = scaledHeight - scaledWidth;
+    ctx.moveTo(radius, -straightLength / 2);
+    ctx.lineTo(radius, straightLength / 2);
+    ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
+    ctx.lineTo(-radius, -straightLength / 2);
+    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
+  } else {
+    ctx.arc(0, 0, scaledWidth / 2, 0, Math.PI * 2);
   }
+  ctx.closePath();
   if (fill) {
     ctx.fillStyle = fill;
     ctx.fill();
   }
-  if (stroke) {
-    const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
+  if (stroke && scaledStrokeWidth) {
     ctx.strokeStyle = stroke;
     ctx.lineWidth = scaledStrokeWidth;
     ctx.stroke();
   }
+  ctx.restore();
 }
 
-// lib/drawer/elements/pcb-board.ts
-function drawPcbBoard(params) {
-  const { ctx, board, realToCanvasMat, colorMap } = params;
-  const { width, height, center, outline } = board;
-  if (outline && Array.isArray(outline) && outline.length >= 3) {
-    drawPath({
+// lib/drawer/elements/pcb-hole.ts
+function getRotation(hole) {
+  if ("ccw_rotation" in hole && typeof hole.ccw_rotation === "number") {
+    return hole.ccw_rotation;
+  }
+  return 0;
+}
+function drawPcbHole(params) {
+  const { ctx, hole, realToCanvasMat, colorMap, soldermaskMargin = 0 } = params;
+  if (hole.is_covered_with_solder_mask === true) {
+    return;
+  }
+  const holeInset = soldermaskMargin < 0 ? Math.abs(soldermaskMargin) : 0;
+  if (hole.hole_shape === "circle") {
+    drawCircle({
       ctx,
-      points: outline.map((p) => ({ x: p.x, y: p.y })),
-      fill: colorMap.substrate,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.hole_diameter / 2 - holeInset,
+      fill: colorMap.drill,
+      realToCanvasMat
+    });
+    return;
+  }
+  if (hole.hole_shape === "square") {
+    const rotation = getRotation(hole);
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_diameter - holeInset * 2,
+      height: hole.hole_diameter - holeInset * 2,
+      fill: colorMap.drill,
       realToCanvasMat,
-      closePath: true
+      rotation
     });
-    drawPath({
+    return;
+  }
+  if (hole.hole_shape === "oval") {
+    const rotation = getRotation(hole);
+    drawOval({
       ctx,
-      points: outline.map((p) => ({ x: p.x, y: p.y })),
-      stroke: colorMap.boardOutline,
-      strokeWidth: 0.1,
+      center: { x: hole.x, y: hole.y },
+      radius_x: hole.hole_width / 2 - holeInset,
+      radius_y: hole.hole_height / 2 - holeInset,
+      fill: colorMap.drill,
       realToCanvasMat,
-      closePath: true
+      rotation
     });
     return;
   }
-  if (width !== void 0 && height !== void 0 && center) {
+  if (hole.hole_shape === "rect") {
+    const rotation = getRotation(hole);
     drawRect({
       ctx,
-      center,
-      width,
-      height,
-      fill: colorMap.substrate,
-      realToCanvasMat
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width - holeInset * 2,
+      height: hole.hole_height - holeInset * 2,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation
     });
-    const halfWidth = width / 2;
-    const halfHeight = height / 2;
-    const corners = [
-      { x: center.x - halfWidth, y: center.y - halfHeight },
-      { x: center.x + halfWidth, y: center.y - halfHeight },
-      { x: center.x + halfWidth, y: center.y + halfHeight },
-      { x: center.x - halfWidth, y: center.y + halfHeight }
-    ];
-    drawPath({
+    return;
+  }
+  if (hole.hole_shape === "pill" || hole.hole_shape === "rotated_pill") {
+    const rotation = getRotation(hole);
+    drawPill({
       ctx,
-      points: corners,
-      stroke: colorMap.boardOutline,
-      strokeWidth: 0.1,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width - holeInset * 2,
+      height: hole.hole_height - holeInset * 2,
+      fill: colorMap.drill,
       realToCanvasMat,
-      closePath: true
+      rotation
     });
+    return;
   }
 }
 
-// lib/drawer/elements/pcb-silkscreen-text.ts
-import { applyToPoint as applyToPoint10 } from "transformation-matrix";
-
-// lib/drawer/shapes/text/text.ts
-import { lineAlphabet } from "@tscircuit/alphabet";
-import { applyToPoint as applyToPoint9 } from "transformation-matrix";
-
-// lib/drawer/shapes/text/getAlphabetLayout.ts
-var GLYPH_WIDTH_RATIO = 0.62;
-var LETTER_SPACING_RATIO = 0.3;
-var SPACE_WIDTH_RATIO = 1;
-var STROKE_WIDTH_RATIO = 0.13;
-function getAlphabetLayout(text, fontSize) {
-  const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
-  const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
-  const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO;
-  const characters = Array.from(text);
-  let width = 0;
-  characters.forEach((char, index) => {
-    const advance = char === " " ? spaceWidth : glyphWidth;
-    width += advance;
-    if (index < characters.length - 1) width += letterSpacing;
-  });
-  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
-  return {
-    width,
-    height: fontSize,
-    glyphWidth,
-    letterSpacing,
-    spaceWidth,
-    strokeWidth
-  };
-}
-
-// lib/drawer/shapes/text/getTextStartPosition.ts
-function getTextStartPosition(alignment, layout) {
-  const totalWidth = layout.width + layout.strokeWidth;
-  const totalHeight = layout.height + layout.strokeWidth;
-  let x = 0;
-  let y = 0;
-  if (alignment === "center") {
-    x = -totalWidth / 2;
-  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
-    x = 0;
-  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
-    x = -totalWidth;
-  }
-  if (alignment === "center") {
-    y = -totalHeight / 2;
-  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
-    y = 0;
-  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom_center") {
-    y = -totalHeight;
-  } else {
-    y = 0;
-  }
-  return { x, y };
+// lib/drawer/elements/pcb-keepout.ts
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
-
-// lib/drawer/shapes/text/text.ts
-var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
-function strokeAlphabetText(params) {
-  const { ctx, text, fontSize, startX, startY } = params;
-  const layout = getAlphabetLayout(text, fontSize);
-  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
-  const topY = startY;
-  const characters = Array.from(text);
-  let cursor = startX + strokeWidth / 2;
-  characters.forEach((char, index) => {
-    const lines = getGlyphLines(char);
-    const advance = char === " " ? spaceWidth : glyphWidth;
-    if (lines?.length) {
+function drawPcbKeepout(params) {
+  const { ctx, keepout, realToCanvasMat, colorMap } = params;
+  const strokeColor = colorMap.keepout;
+  const fillColor = hexToRgba(colorMap.keepout, 0.2);
+  const hatchSpacing = 1;
+  if (keepout.shape === "rect") {
+    const [cx, cy] = applyToPoint12(realToCanvasMat, [
+      keepout.center.x,
+      keepout.center.y
+    ]);
+    const scaledWidth = keepout.width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = keepout.height * Math.abs(realToCanvasMat.a);
+    const rotation = keepout.rotation ?? 0;
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * (Math.PI / 180));
+    }
+    ctx.beginPath();
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+    ctx.beginPath();
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+    ctx.clip();
+    const scaledSpacing = hatchSpacing * Math.abs(realToCanvasMat.a);
+    const diagonal = Math.sqrt(
+      scaledWidth * scaledWidth + scaledHeight * scaledHeight
+    );
+    const halfWidth = scaledWidth / 2;
+    const halfHeight = scaledHeight / 2;
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = 0.15 * Math.abs(realToCanvasMat.a);
+    ctx.setLineDash([]);
+    for (let offset = -diagonal; offset < diagonal * 2; offset += scaledSpacing) {
       ctx.beginPath();
-      for (const line of lines) {
-        const x1 = cursor + line.x1 * glyphWidth;
-        const y1 = topY + (1 - line.y1) * height;
-        const x2 = cursor + line.x2 * glyphWidth;
-        const y2 = topY + (1 - line.y2) * height;
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
-      }
+      const startX = -halfWidth + offset;
+      const startY = -halfHeight;
+      const endX = -halfWidth + offset + diagonal;
+      const endY = -halfHeight + diagonal;
+      ctx.moveTo(startX, startY);
+      ctx.lineTo(endX, endY);
       ctx.stroke();
     }
-    cursor += advance;
-    if (index < characters.length - 1) {
-      cursor += letterSpacing;
-    }
-  });
-}
-function drawText(params) {
-  const {
-    ctx,
-    text,
-    x,
-    y,
-    fontSize,
-    color,
-    realToCanvasMat,
-    anchorAlignment,
-    rotation = 0
-  } = params;
-  if (!text) return;
-  const [canvasX, canvasY] = applyToPoint9(realToCanvasMat, [x, y]);
-  const scale2 = Math.abs(realToCanvasMat.a);
-  const scaledFontSize = fontSize * scale2;
-  const layout = getAlphabetLayout(text, scaledFontSize);
-  const startPos = getTextStartPosition(anchorAlignment, layout);
-  ctx.save();
-  ctx.translate(canvasX, canvasY);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  ctx.lineWidth = layout.strokeWidth;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  ctx.strokeStyle = color;
-  strokeAlphabetText({
-    ctx,
-    text,
-    fontSize: scaledFontSize,
-    startX: startPos.x,
-    startY: startPos.y
-  });
-  ctx.restore();
-}
-
-// lib/drawer/elements/pcb-silkscreen-text.ts
-function layerToSilkscreenColor(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
-}
-function mapAnchorAlignment(alignment) {
-  if (!alignment) return "center";
-  return alignment;
-}
-function drawPcbSilkscreenText(params) {
-  const { ctx, text, realToCanvasMat, colorMap } = params;
-  const content = text.text ?? "";
-  if (!content) return;
-  const color = layerToSilkscreenColor(text.layer, colorMap);
-  const [x, y] = applyToPoint10(realToCanvasMat, [
-    text.anchor_position.x,
-    text.anchor_position.y
-  ]);
-  const scale2 = Math.abs(realToCanvasMat.a);
-  const fontSize = (text.font_size ?? 1) * scale2;
-  const rotation = text.ccw_rotation ?? 0;
-  const layout = getAlphabetLayout(content, fontSize);
-  const alignment = mapAnchorAlignment(text.anchor_alignment);
-  const startPos = getTextStartPosition(alignment, layout);
-  ctx.save();
-  ctx.translate(x, y);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
+    ctx.restore();
+    return;
   }
-  if (text.layer === "bottom") {
-    ctx.scale(-1, 1);
+  if (keepout.shape === "circle") {
+    const [cx, cy] = applyToPoint12(realToCanvasMat, [
+      keepout.center.x,
+      keepout.center.y
+    ]);
+    const scaledRadius = keepout.radius * Math.abs(realToCanvasMat.a);
+    const scaledSpacing = hatchSpacing * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.beginPath();
+    ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2);
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2);
+    ctx.clip();
+    const diagonal = scaledRadius * 2;
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = 0.15 * Math.abs(realToCanvasMat.a);
+    ctx.setLineDash([]);
+    for (let offset = -diagonal; offset < diagonal * 2; offset += scaledSpacing) {
+      ctx.beginPath();
+      ctx.moveTo(offset - diagonal, -diagonal);
+      ctx.lineTo(offset + diagonal, diagonal);
+      ctx.stroke();
+    }
+    ctx.restore();
+    return;
   }
-  ctx.lineWidth = layout.strokeWidth;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  ctx.strokeStyle = color;
-  strokeAlphabetText({
-    ctx,
-    text: content,
-    fontSize,
-    startX: startPos.x,
-    startY: startPos.y
-  });
-  ctx.restore();
-}
-
-// lib/drawer/elements/pcb-silkscreen-rect.ts
-function layerToSilkscreenColor2(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
-}
-function drawPcbSilkscreenRect(params) {
-  const { ctx, rect, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor2(rect.layer, colorMap);
-  drawRect({
-    ctx,
-    center: rect.center,
-    width: rect.width,
-    height: rect.height,
-    fill: color,
-    realToCanvasMat
-  });
 }
 
-// lib/drawer/elements/pcb-silkscreen-circle.ts
-function layerToSilkscreenColor3(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
-}
-function drawPcbSilkscreenCircle(params) {
-  const { ctx, circle, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor3(circle.layer, colorMap);
-  drawCircle({
+// lib/drawer/elements/pcb-note-dimension.ts
+var DEFAULT_NOTE_COLOR = "rgba(255,255,255,0.5)";
+function drawPcbNoteDimension(params) {
+  const { ctx, pcbNoteDimension, realToCanvasMat } = params;
+  const color = pcbNoteDimension.color ?? DEFAULT_NOTE_COLOR;
+  drawDimensionLine({
     ctx,
-    center: circle.center,
-    radius: circle.radius,
-    fill: color,
-    realToCanvasMat
+    from: pcbNoteDimension.from,
+    to: pcbNoteDimension.to,
+    realToCanvasMat,
+    color,
+    fontSize: pcbNoteDimension.font_size,
+    arrowSize: pcbNoteDimension.arrow_size,
+    text: pcbNoteDimension.text,
+    textRotation: pcbNoteDimension.text_ccw_rotation,
+    offset: pcbNoteDimension.offset_distance && pcbNoteDimension.offset_direction ? {
+      distance: pcbNoteDimension.offset_distance,
+      direction: pcbNoteDimension.offset_direction
+    } : void 0
   });
 }
 
-// lib/drawer/elements/pcb-silkscreen-line.ts
-function layerToSilkscreenColor4(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
-}
-function drawPcbSilkscreenLine(params) {
+// lib/drawer/elements/pcb-note-line.ts
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+function drawPcbNoteLine(params) {
   const { ctx, line, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor4(line.layer, colorMap);
-  drawLine({
-    ctx,
-    start: { x: line.x1, y: line.y1 },
-    end: { x: line.x2, y: line.y2 },
-    strokeWidth: line.stroke_width ?? 0.1,
-    stroke: color,
-    realToCanvasMat
-  });
+  const defaultColor = "rgb(89, 148, 220)";
+  const color = line.color ?? defaultColor;
+  const strokeWidth = line.stroke_width ?? 0.1;
+  const isDashed = line.is_dashed ?? false;
+  const [x1, y1] = applyToPoint13(realToCanvasMat, [line.x1, line.y1]);
+  const [x2, y2] = applyToPoint13(realToCanvasMat, [line.x2, line.y2]);
+  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  if (isDashed) {
+    ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2]);
+  } else {
+    ctx.setLineDash([]);
+  }
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.lineWidth = scaledStrokeWidth;
+  ctx.strokeStyle = color;
+  ctx.lineCap = "round";
+  ctx.stroke();
+  ctx.restore();
 }
 
-// lib/drawer/elements/pcb-silkscreen-path.ts
-function layerToSilkscreenColor5(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
-}
-function drawPcbSilkscreenPath(params) {
+// lib/drawer/elements/pcb-note-path.ts
+function drawPcbNotePath(params) {
   const { ctx, path, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor5(path.layer, colorMap);
+  const defaultColor = "rgb(89, 148, 220)";
+  const color = path.color ?? defaultColor;
   if (!path.route || path.route.length < 2) return;
   for (let i = 0; i < path.route.length - 1; i++) {
     const start = path.route[i];
@@ -1273,515 +1242,560 @@ function drawPcbSilkscreenPath(params) {
   }
 }
 
-// lib/drawer/elements/pcb-silkscreen-oval.ts
-function layerToSilkscreenColor6(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
-}
-function drawPcbSilkscreenOval(params) {
-  const { ctx, oval, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor6(oval.layer, colorMap);
-  drawOval({
+// lib/drawer/elements/pcb-note-rect.ts
+function drawPcbNoteRect(params) {
+  const { ctx, rect, realToCanvasMat, colorMap } = params;
+  const defaultColor = "rgb(89, 148, 220)";
+  const color = rect.color ?? defaultColor;
+  const isFilled = rect.is_filled ?? false;
+  const hasStroke = rect.has_stroke ?? true;
+  const isStrokeDashed = rect.is_stroke_dashed ?? false;
+  drawRect({
     ctx,
-    center: oval.center,
-    radius_x: oval.radius_x,
-    radius_y: oval.radius_y,
-    stroke: color,
-    strokeWidth: 0.1,
+    center: rect.center,
+    width: rect.width,
+    height: rect.height,
+    fill: isFilled ? color : void 0,
+    stroke: hasStroke ? color : void 0,
+    strokeWidth: hasStroke ? rect.stroke_width : void 0,
+    borderRadius: rect.corner_radius,
     realToCanvasMat,
-    rotation: oval.ccw_rotation ?? 0
+    isStrokeDashed
   });
 }
 
-// lib/drawer/elements/pcb-silkscreen-pill.ts
-function layerToSilkscreenColor7(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
-}
-function drawPcbSilkscreenPill(params) {
-  const { ctx, pill, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor7(pill.layer, colorMap);
-  const strokeWidth = 0.2;
-  drawPill({
+// lib/drawer/elements/pcb-note-text.ts
+var DEFAULT_NOTE_TEXT_COLOR = "rgb(89, 148, 220)";
+function drawPcbNoteText(params) {
+  const { ctx, text, realToCanvasMat, colorMap } = params;
+  const defaultColor = DEFAULT_NOTE_TEXT_COLOR;
+  const color = text.color ?? defaultColor;
+  const fontSize = text.font_size ?? 1;
+  drawText({
     ctx,
-    center: pill.center,
-    width: pill.width,
-    height: pill.height,
-    stroke: color,
-    strokeWidth,
-    realToCanvasMat
+    text: text.text ?? "",
+    x: text.anchor_position.x,
+    y: text.anchor_position.y,
+    fontSize,
+    color,
+    realToCanvasMat,
+    anchorAlignment: text.anchor_alignment ?? "center"
   });
 }
 
-// lib/drawer/elements/pcb-cutout.ts
-function drawPcbCutout(params) {
-  const { ctx, cutout, realToCanvasMat, colorMap } = params;
-  if (cutout.shape === "rect") {
-    drawRect({
-      ctx,
-      center: cutout.center,
-      width: cutout.width,
-      height: cutout.height,
-      fill: colorMap.drill,
-      realToCanvasMat,
-      rotation: cutout.rotation ?? 0,
-      borderRadius: cutout.corner_radius ?? 0
-    });
-    return;
+// lib/drawer/elements/soldermask-margin.ts
+import { applyToPoint as applyToPoint14 } from "transformation-matrix";
+function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRadius, rotation, realToCanvasMat, soldermaskColor, padColor, asymmetricMargins) {
+  const [cx, cy] = applyToPoint14(realToCanvasMat, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(realToCanvasMat.a);
+  const scaledHeight = height * Math.abs(realToCanvasMat.a);
+  const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a);
+  const ml = asymmetricMargins?.left ?? margin;
+  const mr = asymmetricMargins?.right ?? margin;
+  const mt = asymmetricMargins?.top ?? margin;
+  const mb = asymmetricMargins?.bottom ?? margin;
+  const scaledThicknessL = Math.max(0, -ml) * Math.abs(realToCanvasMat.a);
+  const scaledThicknessR = Math.max(0, -mr) * Math.abs(realToCanvasMat.a);
+  const scaledThicknessT = Math.max(0, -mt) * Math.abs(realToCanvasMat.a);
+  const scaledThicknessB = Math.max(0, -mb) * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
   }
-  if (cutout.shape === "circle") {
-    drawCircle({
-      ctx,
-      center: cutout.center,
-      radius: cutout.radius,
-      fill: colorMap.drill,
-      realToCanvasMat
-    });
-    return;
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
   }
-  if (cutout.shape === "polygon") {
-    if (cutout.points && cutout.points.length >= 3) {
-      drawPolygon({
-        ctx,
-        points: cutout.points,
-        fill: colorMap.drill,
-        realToCanvasMat
-      });
+  const outerWidth = scaledWidth;
+  const outerHeight = scaledHeight;
+  const outerRadius = scaledRadius;
+  ctx.beginPath();
+  if (outerRadius > 0) {
+    const x = -outerWidth / 2;
+    const y = -outerHeight / 2;
+    const r = Math.min(outerRadius, outerWidth / 2, outerHeight / 2);
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + outerWidth - r, y);
+    ctx.arcTo(x + outerWidth, y, x + outerWidth, y + r, r);
+    ctx.lineTo(x + outerWidth, y + outerHeight - r);
+    ctx.arcTo(
+      x + outerWidth,
+      y + outerHeight,
+      x + outerWidth - r,
+      y + outerHeight,
+      r
+    );
+    ctx.lineTo(x + r, y + outerHeight);
+    ctx.arcTo(x, y + outerHeight, x, y + outerHeight - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+  } else {
+    ctx.rect(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight);
+  }
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerWidth = Math.max(
+    0,
+    scaledWidth - (scaledThicknessL + scaledThicknessR)
+  );
+  const innerHeight = Math.max(
+    0,
+    scaledHeight - (scaledThicknessT + scaledThicknessB)
+  );
+  const innerRadius = Math.max(
+    0,
+    scaledRadius - (scaledThicknessL + scaledThicknessR + scaledThicknessT + scaledThicknessB) / 4
+  );
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath();
+    const x = -scaledWidth / 2 + scaledThicknessL;
+    const y = -scaledHeight / 2 + scaledThicknessT;
+    if (innerRadius > 0) {
+      const r = Math.min(innerRadius, innerWidth / 2, innerHeight / 2);
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + innerWidth - r, y);
+      ctx.arcTo(x + innerWidth, y, x + innerWidth, y + r, r);
+      ctx.lineTo(x + innerWidth, y + innerHeight - r);
+      ctx.arcTo(
+        x + innerWidth,
+        y + innerHeight,
+        x + innerWidth - r,
+        y + innerHeight,
+        r
+      );
+      ctx.lineTo(x + r, y + innerHeight);
+      ctx.arcTo(x, y + innerHeight, x, y + innerHeight - r, r);
+      ctx.lineTo(x, y + r);
+      ctx.arcTo(x, y, x + r, y, r);
+    } else {
+      ctx.rect(x, y, innerWidth, innerHeight);
     }
-    return;
+    ctx.fillStyle = padColor;
+    ctx.fill();
   }
+  ctx.restore();
 }
-
-// lib/drawer/elements/pcb-keepout.ts
-import { applyToPoint as applyToPoint11 } from "transformation-matrix";
-function hexToRgba(hex, alpha) {
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-function drawPcbKeepout(params) {
-  const { ctx, keepout, realToCanvasMat, colorMap } = params;
-  const strokeColor = colorMap.keepout;
-  const fillColor = hexToRgba(colorMap.keepout, 0.2);
-  const hatchSpacing = 1;
-  if (keepout.shape === "rect") {
-    const [cx, cy] = applyToPoint11(realToCanvasMat, [
-      keepout.center.x,
-      keepout.center.y
-    ]);
-    const scaledWidth = keepout.width * Math.abs(realToCanvasMat.a);
-    const scaledHeight = keepout.height * Math.abs(realToCanvasMat.a);
-    const rotation = keepout.rotation ?? 0;
-    ctx.save();
-    ctx.translate(cx, cy);
-    if (rotation !== 0) {
-      ctx.rotate(-rotation * (Math.PI / 180));
-    }
+function drawSoldermaskRingForCircle(ctx, center, radius, margin, realToCanvasMat, soldermaskColor, padColor) {
+  const [cx, cy] = applyToPoint14(realToCanvasMat, [center.x, center.y]);
+  const scaledRadius = radius * Math.abs(realToCanvasMat.a);
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  ctx.beginPath();
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerRadius = Math.max(0, scaledRadius - scaledMargin);
+  if (innerRadius > 0) {
     ctx.beginPath();
-    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
-    ctx.fillStyle = fillColor;
+    ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2);
+    ctx.fillStyle = padColor;
     ctx.fill();
+  }
+  ctx.restore();
+}
+function drawSoldermaskRingForPill(ctx, center, width, height, margin, rotation, realToCanvasMat, soldermaskColor, padColor) {
+  const [cx, cy] = applyToPoint14(realToCanvasMat, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(realToCanvasMat.a);
+  const scaledHeight = height * Math.abs(realToCanvasMat.a);
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  const outerWidth = scaledWidth;
+  const outerHeight = scaledHeight;
+  ctx.beginPath();
+  if (outerWidth > outerHeight) {
+    const radius = outerHeight / 2;
+    const straightLength = outerWidth - outerHeight;
+    ctx.moveTo(-straightLength / 2, -radius);
+    ctx.lineTo(straightLength / 2, -radius);
+    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
+    ctx.lineTo(-straightLength / 2, radius);
+    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
+  } else if (outerHeight > outerWidth) {
+    const radius = outerWidth / 2;
+    const straightLength = outerHeight - outerWidth;
+    ctx.moveTo(radius, -straightLength / 2);
+    ctx.lineTo(radius, straightLength / 2);
+    ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
+    ctx.lineTo(-radius, -straightLength / 2);
+    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
+  } else {
+    ctx.arc(0, 0, outerWidth / 2, 0, Math.PI * 2);
+  }
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerWidth = scaledWidth - scaledMargin * 2;
+  const innerHeight = scaledHeight - scaledMargin * 2;
+  if (innerWidth > 0 && innerHeight > 0) {
     ctx.beginPath();
-    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
-    ctx.clip();
-    const scaledSpacing = hatchSpacing * Math.abs(realToCanvasMat.a);
-    const diagonal = Math.sqrt(
-      scaledWidth * scaledWidth + scaledHeight * scaledHeight
-    );
-    const halfWidth = scaledWidth / 2;
-    const halfHeight = scaledHeight / 2;
-    ctx.strokeStyle = strokeColor;
-    ctx.lineWidth = 0.15 * Math.abs(realToCanvasMat.a);
-    ctx.setLineDash([]);
-    for (let offset = -diagonal; offset < diagonal * 2; offset += scaledSpacing) {
-      ctx.beginPath();
-      const startX = -halfWidth + offset;
-      const startY = -halfHeight;
-      const endX = -halfWidth + offset + diagonal;
-      const endY = -halfHeight + diagonal;
-      ctx.moveTo(startX, startY);
-      ctx.lineTo(endX, endY);
-      ctx.stroke();
+    if (innerWidth > innerHeight) {
+      const radius = innerHeight / 2;
+      const straightLength = innerWidth - innerHeight;
+      ctx.moveTo(-straightLength / 2, -radius);
+      ctx.lineTo(straightLength / 2, -radius);
+      ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
+      ctx.lineTo(-straightLength / 2, radius);
+      ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
+    } else if (innerHeight > innerWidth) {
+      const radius = innerWidth / 2;
+      const straightLength = innerHeight - innerWidth;
+      ctx.moveTo(radius, -straightLength / 2);
+      ctx.lineTo(radius, straightLength / 2);
+      ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
+      ctx.lineTo(-radius, -straightLength / 2);
+      ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
+    } else {
+      ctx.arc(0, 0, innerWidth / 2, 0, Math.PI * 2);
     }
-    ctx.restore();
-    return;
+    ctx.fillStyle = padColor;
+    ctx.fill();
   }
-  if (keepout.shape === "circle") {
-    const [cx, cy] = applyToPoint11(realToCanvasMat, [
-      keepout.center.x,
-      keepout.center.y
-    ]);
-    const scaledRadius = keepout.radius * Math.abs(realToCanvasMat.a);
-    const scaledSpacing = hatchSpacing * Math.abs(realToCanvasMat.a);
-    ctx.save();
-    ctx.translate(cx, cy);
+  ctx.restore();
+}
+function drawSoldermaskRingForOval(ctx, center, radius_x, radius_y, margin, rotation, realToCanvasMat, soldermaskColor, holeColor) {
+  const [cx, cy] = applyToPoint14(realToCanvasMat, [center.x, center.y]);
+  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a);
+  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a);
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  ctx.beginPath();
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerRadiusX = Math.max(0, scaledRadiusX - scaledMargin);
+  const innerRadiusY = Math.max(0, scaledRadiusY - scaledMargin);
+  if (innerRadiusX > 0 && innerRadiusY > 0) {
     ctx.beginPath();
-    ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2);
-    ctx.fillStyle = fillColor;
+    ctx.ellipse(0, 0, innerRadiusX, innerRadiusY, 0, 0, Math.PI * 2);
+    ctx.fillStyle = holeColor;
     ctx.fill();
-    ctx.beginPath();
-    ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2);
-    ctx.clip();
-    const diagonal = scaledRadius * 2;
-    ctx.strokeStyle = strokeColor;
-    ctx.lineWidth = 0.15 * Math.abs(realToCanvasMat.a);
-    ctx.setLineDash([]);
-    for (let offset = -diagonal; offset < diagonal * 2; offset += scaledSpacing) {
-      ctx.beginPath();
-      ctx.moveTo(offset - diagonal, -diagonal);
-      ctx.lineTo(offset + diagonal, diagonal);
-      ctx.stroke();
+  }
+  ctx.restore();
+}
+function offsetPolygonPoints(points, offset) {
+  if (points.length < 3 || offset === 0) return points;
+  let centerX = 0;
+  let centerY = 0;
+  for (const point of points) {
+    centerX += point.x;
+    centerY += point.y;
+  }
+  centerX /= points.length;
+  centerY /= points.length;
+  const result = [];
+  for (const point of points) {
+    const vectorX = point.x - centerX;
+    const vectorY = point.y - centerY;
+    const distance = Math.sqrt(vectorX * vectorX + vectorY * vectorY);
+    if (distance > 0) {
+      const normalizedX = vectorX / distance;
+      const normalizedY = vectorY / distance;
+      result.push({
+        x: point.x + normalizedX * offset,
+        y: point.y + normalizedY * offset
+      });
+    } else {
+      result.push({
+        x: point.x + offset,
+        y: point.y
+      });
     }
-    ctx.restore();
-    return;
   }
+  return result;
 }
 
-// lib/drawer/elements/pcb-copper-pour.ts
-import { applyToPoint as applyToPoint12 } from "transformation-matrix";
-function layerToColor3(layer, colorMap) {
-  return colorMap.copper[layer] ?? colorMap.copper.top;
-}
-function computeArcFromBulge(startX, startY, endX, endY, bulge) {
-  if (Math.abs(bulge) < 1e-10) {
-    return null;
+// lib/drawer/elements/pcb-plated-hole.ts
+function drawPcbPlatedHole(params) {
+  const {
+    ctx,
+    hole,
+    realToCanvasMat,
+    colorMap,
+    soldermaskMargin = 0,
+    drawSoldermask
+  } = params;
+  if (hole.is_covered_with_solder_mask === true && drawSoldermask) {
+    return;
   }
-  const chordX = endX - startX;
-  const chordY = endY - startY;
-  const chordLength = Math.hypot(chordX, chordY);
-  if (chordLength < 1e-10) {
-    return null;
+  const copperColor = colorMap.copper.top;
+  const copperInset = soldermaskMargin < 0 ? Math.abs(soldermaskMargin) : 0;
+  if (hole.shape === "circle") {
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.outer_diameter / 2 - copperInset,
+      fill: copperColor,
+      realToCanvasMat
+    });
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      realToCanvasMat
+    });
+    return;
   }
-  const sagitta = Math.abs(bulge) * (chordLength / 2);
-  const halfChord = chordLength / 2;
-  const radius = (sagitta * sagitta + halfChord * halfChord) / (2 * sagitta);
-  const distToCenter = radius - sagitta;
-  const midX = (startX + endX) / 2;
-  const midY = (startY + endY) / 2;
-  const perpX = -chordY / chordLength;
-  const perpY = chordX / chordLength;
-  const sign = bulge > 0 ? -1 : 1;
-  const centerX = midX + sign * perpX * distToCenter;
-  const centerY = midY + sign * perpY * distToCenter;
-  return { centerX, centerY, radius };
-}
-function drawArcFromBulge(ctx, realStartX, realStartY, realEndX, realEndY, bulge, realToCanvasMat) {
-  if (Math.abs(bulge) < 1e-10) {
-    const [endX, endY] = applyToPoint12(realToCanvasMat, [realEndX, realEndY]);
-    ctx.lineTo(endX, endY);
+  if (hole.shape === "oval") {
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius_x: hole.outer_width / 2 - copperInset,
+      radius_y: hole.outer_height / 2 - copperInset,
+      fill: copperColor,
+      realToCanvasMat,
+      rotation: hole.ccw_rotation
+    });
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius_x: hole.hole_width / 2,
+      radius_y: hole.hole_height / 2,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation: hole.ccw_rotation
+    });
     return;
   }
-  const arc = computeArcFromBulge(
-    realStartX,
-    realStartY,
-    realEndX,
-    realEndY,
-    bulge
-  );
-  if (!arc) {
-    const [endX, endY] = applyToPoint12(realToCanvasMat, [realEndX, realEndY]);
-    ctx.lineTo(endX, endY);
+  if (hole.shape === "pill") {
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.outer_width - copperInset * 2,
+      height: hole.outer_height - copperInset * 2,
+      fill: copperColor,
+      realToCanvasMat,
+      rotation: hole.ccw_rotation
+    });
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation: hole.ccw_rotation
+    });
     return;
   }
-  const [canvasStartX, canvasStartY] = applyToPoint12(realToCanvasMat, [
-    realStartX,
-    realStartY
-  ]);
-  const [canvasEndX, canvasEndY] = applyToPoint12(realToCanvasMat, [
-    realEndX,
-    realEndY
-  ]);
-  const [canvasCenterX, canvasCenterY] = applyToPoint12(realToCanvasMat, [
-    arc.centerX,
-    arc.centerY
-  ]);
-  const canvasRadius = Math.hypot(
-    canvasStartX - canvasCenterX,
-    canvasStartY - canvasCenterY
-  );
-  const startAngle = Math.atan2(
-    canvasStartY - canvasCenterY,
-    canvasStartX - canvasCenterX
-  );
-  const endAngle = Math.atan2(
-    canvasEndY - canvasCenterY,
-    canvasEndX - canvasCenterX
-  );
-  const det = realToCanvasMat.a * realToCanvasMat.d - realToCanvasMat.b * realToCanvasMat.c;
-  const isFlipped = det < 0;
-  const counterclockwise = bulge > 0 ? !isFlipped : isFlipped;
-  ctx.arc(
-    canvasCenterX,
-    canvasCenterY,
-    canvasRadius,
-    startAngle,
-    endAngle,
-    counterclockwise
-  );
-}
-function drawRing(ctx, ring, realToCanvasMat) {
-  if (ring.vertices.length < 2) return;
-  if (ring.vertices.length === 2) {
-    const v0 = ring.vertices[0];
-    const v1 = ring.vertices[1];
-    if (v0 && v1 && Math.abs((v0.bulge ?? 0) - 1) < 1e-10 && Math.abs((v1.bulge ?? 0) - 1) < 1e-10) {
-      const [x0, y0] = applyToPoint12(realToCanvasMat, [v0.x, v0.y]);
-      ctx.moveTo(x0, y0);
-      drawArcFromBulge(ctx, v0.x, v0.y, v1.x, v1.y, 1, realToCanvasMat);
-      drawArcFromBulge(ctx, v1.x, v1.y, v0.x, v0.y, 1, realToCanvasMat);
-      return;
-    }
+  if (hole.shape === "circular_hole_with_rect_pad") {
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width - copperInset * 2,
+      height: hole.rect_pad_height - copperInset * 2,
+      fill: copperColor,
+      realToCanvasMat,
+      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0
+    });
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawCircle({
+      ctx,
+      center: { x: holeX, y: holeY },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      realToCanvasMat
+    });
+    return;
   }
-  const firstVertex = ring.vertices[0];
-  if (!firstVertex) return;
-  const [firstX, firstY] = applyToPoint12(realToCanvasMat, [
-    firstVertex.x,
-    firstVertex.y
-  ]);
-  ctx.moveTo(firstX, firstY);
-  for (let i = 0; i < ring.vertices.length; i++) {
-    const currentVertex = ring.vertices[i];
-    const nextIndex = (i + 1) % ring.vertices.length;
-    const nextVertex = ring.vertices[nextIndex];
-    if (!currentVertex || !nextVertex) continue;
-    const bulge = currentVertex.bulge ?? 0;
-    if (Math.abs(bulge) < 1e-10) {
-      const [nextX, nextY] = applyToPoint12(realToCanvasMat, [
-        nextVertex.x,
-        nextVertex.y
-      ]);
-      ctx.lineTo(nextX, nextY);
-    } else {
-      drawArcFromBulge(
-        ctx,
-        currentVertex.x,
-        currentVertex.y,
-        nextVertex.x,
-        nextVertex.y,
-        bulge,
-        realToCanvasMat
-      );
-    }
+  if (hole.shape === "pill_hole_with_rect_pad") {
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width - copperInset * 2,
+      height: hole.rect_pad_height - copperInset * 2,
+      fill: copperColor,
+      realToCanvasMat,
+      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0
+    });
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawPill({
+      ctx,
+      center: { x: holeX, y: holeY },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      realToCanvasMat
+    });
+    return;
   }
-}
-function drawPcbCopperPour(params) {
-  const { ctx, pour, realToCanvasMat, colorMap } = params;
-  const color = layerToColor3(pour.layer, colorMap);
-  ctx.save();
-  if (pour.shape === "rect") {
-    const [cx, cy] = applyToPoint12(realToCanvasMat, [
-      pour.center.x,
-      pour.center.y
-    ]);
-    const scaledWidth = pour.width * Math.abs(realToCanvasMat.a);
-    const scaledHeight = pour.height * Math.abs(realToCanvasMat.a);
-    ctx.translate(cx, cy);
-    if (pour.rotation) {
-      ctx.rotate(-pour.rotation * (Math.PI / 180));
-    }
-    ctx.beginPath();
-    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
-    ctx.fillStyle = color;
-    ctx.globalAlpha = 0.5;
-    ctx.fill();
-    ctx.restore();
+  if (hole.shape === "rotated_pill_hole_with_rect_pad") {
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width - copperInset * 2,
+      height: hole.rect_pad_height - copperInset * 2,
+      fill: copperColor,
+      realToCanvasMat,
+      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0,
+      rotation: hole.rect_ccw_rotation
+    });
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawPill({
+      ctx,
+      center: { x: holeX, y: holeY },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation: hole.hole_ccw_rotation
+    });
     return;
   }
-  if (pour.shape === "polygon") {
-    if (pour.points && pour.points.length >= 3) {
-      const canvasPoints = pour.points.map(
-        (p) => applyToPoint12(realToCanvasMat, [p.x, p.y])
-      );
-      const firstPoint = canvasPoints[0];
-      if (!firstPoint) {
-        ctx.restore();
-        return;
-      }
-      ctx.beginPath();
-      const [firstX, firstY] = firstPoint;
-      ctx.moveTo(firstX, firstY);
-      for (let i = 1; i < canvasPoints.length; i++) {
-        const point = canvasPoints[i];
-        if (!point) continue;
-        const [x, y] = point;
-        ctx.lineTo(x, y);
+  if (hole.shape === "hole_with_polygon_pad") {
+    const padOutline = hole.pad_outline;
+    if (padOutline && padOutline.length >= 3) {
+      const padPoints = padOutline.map((point) => ({
+        x: hole.x + point.x,
+        y: hole.y + point.y
+      }));
+      const copperPoints = copperInset > 0 ? offsetPolygonPoints(padPoints, -copperInset) : padPoints;
+      if (copperPoints.length >= 3) {
+        drawPolygon({
+          ctx,
+          points: copperPoints,
+          fill: copperColor,
+          realToCanvasMat
+        });
       }
-      ctx.closePath();
-      ctx.fillStyle = color;
-      ctx.globalAlpha = 0.5;
-      ctx.fill();
     }
-    ctx.restore();
-    return;
-  }
-  if (pour.shape === "brep") {
-    ctx.beginPath();
-    drawRing(ctx, pour.brep_shape.outer_ring, realToCanvasMat);
-    if (pour.brep_shape.inner_rings) {
-      for (const innerRing of pour.brep_shape.inner_rings) {
-        drawRing(ctx, innerRing, realToCanvasMat);
-      }
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    const holeShape = hole.hole_shape;
+    if (holeShape === "circle") {
+      drawCircle({
+        ctx,
+        center: { x: holeX, y: holeY },
+        radius: (hole.hole_diameter ?? 0) / 2,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "oval") {
+      drawOval({
+        ctx,
+        center: { x: holeX, y: holeY },
+        radius_x: (hole.hole_width ?? 0) / 2,
+        radius_y: (hole.hole_height ?? 0) / 2,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "pill") {
+      drawPill({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "rotated_pill") {
+      drawPill({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
     }
-    ctx.fillStyle = color;
-    ctx.globalAlpha = 0.5;
-    ctx.fill("evenodd");
-    ctx.restore();
     return;
   }
-  ctx.restore();
 }
 
-// lib/drawer/elements/pcb-copper-text.ts
-import { applyToPoint as applyToPoint13 } from "transformation-matrix";
-var DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 };
-function mapAnchorAlignment2(alignment) {
-  if (!alignment) return "center";
-  if (alignment.includes("left")) return "center_left";
-  if (alignment.includes("right")) return "center_right";
-  return "center";
+// lib/drawer/elements/pcb-silkscreen-circle.ts
+function layerToSilkscreenColor(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
-function drawPcbCopperText(params) {
-  const { ctx, text, realToCanvasMat, colorMap } = params;
-  const content = text.text ?? "";
-  if (!content) return;
-  const [x, y] = applyToPoint13(realToCanvasMat, [
-    text.anchor_position.x,
-    text.anchor_position.y
-  ]);
-  const scale2 = Math.abs(realToCanvasMat.a);
-  const fontSize = (text.font_size ?? 1) * scale2;
-  const rotation = text.ccw_rotation ?? 0;
-  const padding = {
-    ...DEFAULT_PADDING,
-    ...text.knockout_padding
-  };
-  const textColor = colorMap.copper[text.layer] ?? colorMap.copper.top;
-  const layout = getAlphabetLayout(content, fontSize);
-  const totalWidth = layout.width + layout.strokeWidth;
-  const alignment = mapAnchorAlignment2(text.anchor_alignment);
-  const startPos = getTextStartPosition(alignment, layout);
-  ctx.save();
-  ctx.translate(x, y);
-  if (text.is_mirrored) ctx.scale(-1, 1);
-  if (rotation !== 0) ctx.rotate(-rotation * (Math.PI / 180));
-  ctx.lineWidth = layout.strokeWidth;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  if (text.is_knockout) {
-    const paddingLeft = padding.left * scale2;
-    const paddingRight = padding.right * scale2;
-    const paddingTop = padding.top * scale2;
-    const paddingBottom = padding.bottom * scale2;
-    const rectX = startPos.x - paddingLeft * 4;
-    const rectY = startPos.y - paddingTop * 4;
-    const rectWidth = totalWidth + paddingLeft * 2 + paddingRight * 2;
-    const rectHeight = layout.height + layout.strokeWidth + paddingTop * 2 + paddingBottom * 2;
-    ctx.fillStyle = textColor;
-    ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
-  } else {
-    ctx.strokeStyle = textColor;
-  }
-  strokeAlphabetText({
+function drawPcbSilkscreenCircle(params) {
+  const { ctx, circle, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor(circle.layer, colorMap);
+  drawCircle({
     ctx,
-    text: content,
-    fontSize,
-    startX: startPos.x,
-    startY: startPos.y
+    center: circle.center,
+    radius: circle.radius,
+    fill: color,
+    realToCanvasMat
   });
-  ctx.restore();
 }
 
-// lib/drawer/elements/pcb-fabrication-note-text.ts
-var DEFAULT_FABRICATION_NOTE_COLOR = "rgba(255,255,255,0.5)";
-function layerToColor4(layer, colorMap) {
-  return DEFAULT_FABRICATION_NOTE_COLOR;
-}
-function drawPcbFabricationNoteText(params) {
-  const { ctx, text, realToCanvasMat, colorMap } = params;
-  const defaultColor = layerToColor4(text.layer, colorMap);
-  const color = text.color ?? defaultColor;
-  const fontSize = text.font_size;
-  drawText({
-    ctx,
-    text: text.text,
-    x: text.anchor_position.x,
-    y: text.anchor_position.y,
-    fontSize,
-    color,
-    realToCanvasMat,
-    anchorAlignment: text.anchor_alignment
-  });
+// lib/drawer/elements/pcb-silkscreen-line.ts
+function layerToSilkscreenColor2(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
-
-// lib/drawer/elements/pcb-fabrication-note-rect.ts
-function drawPcbFabricationNoteRect(params) {
-  const { ctx, rect, realToCanvasMat, colorMap } = params;
-  const defaultColor = "rgba(255,255,255,0.5)";
-  const color = rect.color ?? defaultColor;
-  const isFilled = rect.is_filled ?? false;
-  const hasStroke = rect.has_stroke ?? true;
-  const isStrokeDashed = rect.is_stroke_dashed ?? false;
-  drawRect({
+function drawPcbSilkscreenLine(params) {
+  const { ctx, line, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor2(line.layer, colorMap);
+  drawLine({
     ctx,
-    center: rect.center,
-    width: rect.width,
-    height: rect.height,
-    fill: isFilled ? color : void 0,
-    stroke: hasStroke ? color : void 0,
-    strokeWidth: hasStroke ? rect.stroke_width : void 0,
-    borderRadius: rect.corner_radius,
-    realToCanvasMat,
-    isStrokeDashed
+    start: { x: line.x1, y: line.y1 },
+    end: { x: line.x2, y: line.y2 },
+    strokeWidth: line.stroke_width ?? 0.1,
+    stroke: color,
+    realToCanvasMat
   });
 }
 
-// lib/drawer/elements/pcb-note-rect.ts
-function drawPcbNoteRect(params) {
-  const { ctx, rect, realToCanvasMat, colorMap } = params;
-  const defaultColor = "rgb(89, 148, 220)";
-  const color = rect.color ?? defaultColor;
-  const isFilled = rect.is_filled ?? false;
-  const hasStroke = rect.has_stroke ?? true;
-  const isStrokeDashed = rect.is_stroke_dashed ?? false;
-  drawRect({
-    ctx,
-    center: rect.center,
-    width: rect.width,
-    height: rect.height,
-    fill: isFilled ? color : void 0,
-    stroke: hasStroke ? color : void 0,
-    strokeWidth: hasStroke ? rect.stroke_width : void 0,
-    borderRadius: rect.corner_radius,
-    realToCanvasMat,
-    isStrokeDashed
-  });
+// lib/drawer/elements/pcb-silkscreen-oval.ts
+function layerToSilkscreenColor3(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
-
-// lib/drawer/elements/pcb-fabrication-note-path.ts
-function drawPcbFabricationNotePath(params) {
-  const { ctx, path, realToCanvasMat, colorMap } = params;
-  const defaultColor = "rgba(255,255,255,0.5)";
-  const color = path.color ?? defaultColor;
-  if (!path.route || path.route.length < 2) return;
-  for (let i = 0; i < path.route.length - 1; i++) {
-    const start = path.route[i];
-    const end = path.route[i + 1];
-    if (!start || !end) continue;
-    drawLine({
-      ctx,
-      start: { x: start.x, y: start.y },
-      end: { x: end.x, y: end.y },
-      strokeWidth: path.stroke_width ?? 0.1,
-      stroke: color,
-      realToCanvasMat
-    });
-  }
+function drawPcbSilkscreenOval(params) {
+  const { ctx, oval, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor3(oval.layer, colorMap);
+  drawOval({
+    ctx,
+    center: oval.center,
+    radius_x: oval.radius_x,
+    radius_y: oval.radius_y,
+    stroke: color,
+    strokeWidth: 0.1,
+    realToCanvasMat,
+    rotation: oval.ccw_rotation ?? 0
+  });
 }
 
-// lib/drawer/elements/pcb-note-path.ts
-function drawPcbNotePath(params) {
+// lib/drawer/elements/pcb-silkscreen-path.ts
+function layerToSilkscreenColor4(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
+function drawPcbSilkscreenPath(params) {
   const { ctx, path, realToCanvasMat, colorMap } = params;
-  const defaultColor = "rgb(89, 148, 220)";
-  const color = path.color ?? defaultColor;
+  const color = layerToSilkscreenColor4(path.layer, colorMap);
   if (!path.route || path.route.length < 2) return;
   for (let i = 0; i < path.route.length - 1; i++) {
     const start = path.route[i];
@@ -1798,279 +1812,172 @@ function drawPcbNotePath(params) {
   }
 }
 
-// lib/drawer/elements/pcb-note-text.ts
-var DEFAULT_NOTE_TEXT_COLOR = "rgb(89, 148, 220)";
-function drawPcbNoteText(params) {
-  const { ctx, text, realToCanvasMat, colorMap } = params;
-  const defaultColor = DEFAULT_NOTE_TEXT_COLOR;
-  const color = text.color ?? defaultColor;
-  const fontSize = text.font_size ?? 1;
-  drawText({
-    ctx,
-    text: text.text ?? "",
-    x: text.anchor_position.x,
-    y: text.anchor_position.y,
-    fontSize,
-    color,
-    realToCanvasMat,
-    anchorAlignment: text.anchor_alignment ?? "center"
-  });
-}
-
-// lib/drawer/shapes/dimension-line.ts
-import { applyToPoint as applyToPoint14 } from "transformation-matrix";
-var TEXT_OFFSET_MULTIPLIER = 1.5;
-var CHARACTER_WIDTH_MULTIPLIER = 0.6;
-var TEXT_INTERSECTION_PADDING_MULTIPLIER = 0.3;
-function normalize(v) {
-  const len = Math.hypot(v.x, v.y) || 1;
-  return { x: v.x / len, y: v.y / len };
+// lib/drawer/elements/pcb-silkscreen-pill.ts
+function layerToSilkscreenColor5(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
-function drawDimensionLine(params) {
-  const {
-    ctx,
-    from,
-    to,
-    realToCanvasMat,
-    color,
-    fontSize,
-    arrowSize = 1,
-    strokeWidth: manualStrokeWidth,
-    text,
-    textRotation,
-    offset
-  } = params;
-  const direction = normalize({ x: to.x - from.x, y: to.y - from.y });
-  const perpendicular = { x: -direction.y, y: direction.x };
-  const hasOffsetDirection = offset?.direction && typeof offset.direction.x === "number" && typeof offset.direction.y === "number";
-  const normalizedOffsetDirection = hasOffsetDirection ? normalize(offset.direction) : { x: 0, y: 0 };
-  const offsetMagnitude = offset?.distance ?? 0;
-  const offsetVector = {
-    x: normalizedOffsetDirection.x * offsetMagnitude,
-    y: normalizedOffsetDirection.y * offsetMagnitude
-  };
-  const fromOffset = { x: from.x + offsetVector.x, y: from.y + offsetVector.y };
-  const toOffset = { x: to.x + offsetVector.x, y: to.y + offsetVector.y };
-  const fromBase = {
-    x: fromOffset.x + direction.x * arrowSize,
-    y: fromOffset.y + direction.y * arrowSize
-  };
-  const toBase = {
-    x: toOffset.x - direction.x * arrowSize,
-    y: toOffset.y - direction.y * arrowSize
-  };
-  const scaleValue = Math.abs(realToCanvasMat.a);
-  const strokeWidth = manualStrokeWidth ?? arrowSize / 5;
-  const lineColor = color || "rgba(255,255,255,0.5)";
-  const extensionDirection = hasOffsetDirection && (Math.abs(normalizedOffsetDirection.x) > Number.EPSILON || Math.abs(normalizedOffsetDirection.y) > Number.EPSILON) ? normalizedOffsetDirection : perpendicular;
-  const extensionLength = offsetMagnitude + 0.5;
-  const allPoints = [];
-  const getExtensionPoints = (anchor) => {
-    const endPoint = {
-      x: anchor.x + extensionDirection.x * extensionLength,
-      y: anchor.y + extensionDirection.y * extensionLength
-    };
-    const halfWidth = strokeWidth / 2;
-    const extPerpendicular = {
-      x: -extensionDirection.y,
-      y: extensionDirection.x
-    };
-    return [
-      {
-        x: anchor.x + extPerpendicular.x * halfWidth,
-        y: anchor.y + extPerpendicular.y * halfWidth
-      },
-      {
-        x: anchor.x - extPerpendicular.x * halfWidth,
-        y: anchor.y - extPerpendicular.y * halfWidth
-      },
-      {
-        x: endPoint.x - extPerpendicular.x * halfWidth,
-        y: endPoint.y - extPerpendicular.y * halfWidth
-      },
-      {
-        x: endPoint.x + extPerpendicular.x * halfWidth,
-        y: endPoint.y + extPerpendicular.y * halfWidth
-      }
-    ];
-  };
-  allPoints.push(fromOffset);
-  allPoints.push({
-    x: fromBase.x + perpendicular.x * (arrowSize / 2),
-    y: fromBase.y + perpendicular.y * (arrowSize / 2)
-  });
-  allPoints.push({
-    x: fromBase.x + perpendicular.x * (strokeWidth / 2),
-    y: fromBase.y + perpendicular.y * (strokeWidth / 2)
-  });
-  allPoints.push({
-    x: toBase.x + perpendicular.x * (strokeWidth / 2),
-    y: toBase.y + perpendicular.y * (strokeWidth / 2)
-  });
-  allPoints.push({
-    x: toBase.x + perpendicular.x * (arrowSize / 2),
-    y: toBase.y + perpendicular.y * (arrowSize / 2)
-  });
-  allPoints.push(toOffset);
-  allPoints.push({
-    x: toBase.x - perpendicular.x * (arrowSize / 2),
-    y: toBase.y - perpendicular.y * (arrowSize / 2)
-  });
-  allPoints.push({
-    x: toBase.x - perpendicular.x * (strokeWidth / 2),
-    y: toBase.y - perpendicular.y * (strokeWidth / 2)
-  });
-  allPoints.push({
-    x: fromBase.x - perpendicular.x * (strokeWidth / 2),
-    y: fromBase.y - perpendicular.y * (strokeWidth / 2)
-  });
-  allPoints.push({
-    x: fromBase.x - perpendicular.x * (arrowSize / 2),
-    y: fromBase.y - perpendicular.y * (arrowSize / 2)
-  });
-  allPoints.push(fromOffset);
-  const startPoint = allPoints[0];
-  const addTick = (anchor) => {
-    const pts = getExtensionPoints(anchor);
-    allPoints.push(startPoint);
-    allPoints.push(pts[0]);
-    allPoints.push(...pts);
-    allPoints.push(pts[0]);
-    allPoints.push(startPoint);
-  };
-  addTick(from);
-  addTick(to);
-  drawPolygon({
+function drawPcbSilkscreenPill(params) {
+  const { ctx, pill, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor5(pill.layer, colorMap);
+  const strokeWidth = 0.2;
+  drawPill({
     ctx,
-    points: allPoints,
-    fill: lineColor,
+    center: pill.center,
+    width: pill.width,
+    height: pill.height,
+    stroke: color,
+    strokeWidth,
     realToCanvasMat
   });
-  if (text) {
-    const midPoint = {
-      x: (from.x + to.x) / 2 + offsetVector.x,
-      y: (from.y + to.y) / 2 + offsetVector.y
-    };
-    const [screenFromX, screenFromY] = applyToPoint14(realToCanvasMat, [
-      fromOffset.x,
-      fromOffset.y
-    ]);
-    const [screenToX, screenToY] = applyToPoint14(realToCanvasMat, [
-      toOffset.x,
-      toOffset.y
-    ]);
-    const screenDirection = normalize({
-      x: screenToX - screenFromX,
-      y: screenToY - screenFromY
-    });
-    let textAngle = Math.atan2(screenDirection.y, screenDirection.x) * 180 / Math.PI;
-    if (textAngle > 90 || textAngle < -90) {
-      textAngle += 180;
-    }
-    const finalTextAngle = typeof textRotation === "number" && Number.isFinite(textRotation) ? textAngle - textRotation : textAngle;
-    let additionalOffset = 0;
-    if (text && typeof textRotation === "number" && Number.isFinite(textRotation)) {
-      const textWidth = text.length * fontSize * CHARACTER_WIDTH_MULTIPLIER;
-      const textHeight = fontSize;
-      const rotationRad = textRotation * Math.PI / 180;
-      const sinRot = Math.abs(Math.sin(rotationRad));
-      const cosRot = Math.abs(Math.cos(rotationRad));
-      const halfWidth = textWidth / 2;
-      const halfHeight = textHeight / 2;
-      const maxExtension = halfWidth * sinRot + halfHeight * cosRot;
-      additionalOffset = maxExtension + fontSize * TEXT_INTERSECTION_PADDING_MULTIPLIER;
-    }
-    const textOffset = arrowSize * TEXT_OFFSET_MULTIPLIER + additionalOffset;
-    const textPoint = {
-      x: midPoint.x + perpendicular.x * textOffset,
-      y: midPoint.y + perpendicular.y * textOffset
-    };
-    drawText({
-      ctx,
-      text,
-      x: textPoint.x,
-      y: textPoint.y,
-      fontSize,
-      color: lineColor,
-      realToCanvasMat,
-      anchorAlignment: "center",
-      rotation: -finalTextAngle
-      // drawText expects CCW rotation in degrees
-    });
-  }
-}
-
-// lib/drawer/elements/pcb-note-dimension.ts
-var DEFAULT_NOTE_COLOR = "rgba(255,255,255,0.5)";
-function drawPcbNoteDimension(params) {
-  const { ctx, pcbNoteDimension, realToCanvasMat } = params;
-  const color = pcbNoteDimension.color ?? DEFAULT_NOTE_COLOR;
-  drawDimensionLine({
-    ctx,
-    from: pcbNoteDimension.from,
-    to: pcbNoteDimension.to,
-    realToCanvasMat,
-    color,
-    fontSize: pcbNoteDimension.font_size,
-    arrowSize: pcbNoteDimension.arrow_size,
-    text: pcbNoteDimension.text,
-    textRotation: pcbNoteDimension.text_ccw_rotation,
-    offset: pcbNoteDimension.offset_distance && pcbNoteDimension.offset_direction ? {
-      distance: pcbNoteDimension.offset_distance,
-      direction: pcbNoteDimension.offset_direction
-    } : void 0
-  });
 }
 
-// lib/drawer/elements/pcb-fabrication-note-dimension.ts
-var DEFAULT_FABRICATION_NOTE_COLOR2 = "rgba(255,255,255,0.5)";
-function drawPcbFabricationNoteDimension(params) {
-  const { ctx, pcbFabricationNoteDimension, realToCanvasMat } = params;
-  const color = pcbFabricationNoteDimension.color ?? DEFAULT_FABRICATION_NOTE_COLOR2;
-  drawDimensionLine({
+// lib/drawer/elements/pcb-silkscreen-rect.ts
+function layerToSilkscreenColor6(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
+function drawPcbSilkscreenRect(params) {
+  const { ctx, rect, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor6(rect.layer, colorMap);
+  drawRect({
     ctx,
-    from: pcbFabricationNoteDimension.from,
-    to: pcbFabricationNoteDimension.to,
-    realToCanvasMat,
-    color,
-    fontSize: pcbFabricationNoteDimension.font_size ?? 1,
-    arrowSize: pcbFabricationNoteDimension.arrow_size ?? 1,
-    text: pcbFabricationNoteDimension.text,
-    textRotation: pcbFabricationNoteDimension.text_ccw_rotation,
-    offset: pcbFabricationNoteDimension.offset_distance && pcbFabricationNoteDimension.offset_direction ? {
-      distance: pcbFabricationNoteDimension.offset_distance,
-      direction: pcbFabricationNoteDimension.offset_direction
-    } : void 0
+    center: rect.center,
+    width: rect.width,
+    height: rect.height,
+    fill: color,
+    realToCanvasMat
   });
 }
 
-// lib/drawer/elements/pcb-note-line.ts
+// lib/drawer/elements/pcb-silkscreen-text.ts
 import { applyToPoint as applyToPoint15 } from "transformation-matrix";
-function drawPcbNoteLine(params) {
-  const { ctx, line, realToCanvasMat, colorMap } = params;
-  const defaultColor = "rgb(89, 148, 220)";
-  const color = line.color ?? defaultColor;
-  const strokeWidth = line.stroke_width ?? 0.1;
-  const isDashed = line.is_dashed ?? false;
-  const [x1, y1] = applyToPoint15(realToCanvasMat, [line.x1, line.y1]);
-  const [x2, y2] = applyToPoint15(realToCanvasMat, [line.x2, line.y2]);
-  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
+function layerToSilkscreenColor7(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
+function mapAnchorAlignment2(alignment) {
+  if (!alignment) return "center";
+  return alignment;
+}
+function drawPcbSilkscreenText(params) {
+  const { ctx, text, realToCanvasMat, colorMap } = params;
+  const content = text.text ?? "";
+  if (!content) return;
+  const color = layerToSilkscreenColor7(text.layer, colorMap);
+  const [x, y] = applyToPoint15(realToCanvasMat, [
+    text.anchor_position.x,
+    text.anchor_position.y
+  ]);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const fontSize = (text.font_size ?? 1) * scale2;
+  const rotation = text.ccw_rotation ?? 0;
+  const layout = getAlphabetLayout(content, fontSize);
+  const alignment = mapAnchorAlignment2(text.anchor_alignment);
+  const startPos = getTextStartPosition(alignment, layout);
   ctx.save();
-  if (isDashed) {
-    ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2]);
-  } else {
-    ctx.setLineDash([]);
+  ctx.translate(x, y);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
   }
-  ctx.beginPath();
-  ctx.moveTo(x1, y1);
-  ctx.lineTo(x2, y2);
-  ctx.lineWidth = scaledStrokeWidth;
-  ctx.strokeStyle = color;
+  if (text.layer === "bottom") {
+    ctx.scale(-1, 1);
+  }
+  ctx.lineWidth = layout.strokeWidth;
   ctx.lineCap = "round";
-  ctx.stroke();
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = color;
+  strokeAlphabetText({
+    ctx,
+    text: content,
+    fontSize,
+    startX: startPos.x,
+    startY: startPos.y
+  });
   ctx.restore();
 }
 
+// lib/drawer/elements/pcb-smtpad.ts
+function layerToColor3(layer, colorMap) {
+  return colorMap.copper[layer] ?? colorMap.copper.top;
+}
+function getBorderRadius(pad) {
+  if (pad.shape === "rect" || pad.shape === "rotated_rect") {
+    return pad.corner_radius ?? pad.rect_border_radius ?? 0;
+  }
+  return 0;
+}
+function drawPcbSmtPad(params) {
+  const { ctx, pad, realToCanvasMat, colorMap } = params;
+  const color = layerToColor3(pad.layer, colorMap);
+  if (pad.shape === "rect") {
+    drawRect({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      width: pad.width,
+      height: pad.height,
+      fill: color,
+      realToCanvasMat,
+      borderRadius: getBorderRadius(pad)
+    });
+    return;
+  }
+  if (pad.shape === "rotated_rect") {
+    drawRect({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      width: pad.width,
+      height: pad.height,
+      fill: color,
+      realToCanvasMat,
+      borderRadius: getBorderRadius(pad),
+      rotation: pad.ccw_rotation ?? 0
+    });
+    return;
+  }
+  if (pad.shape === "circle") {
+    drawCircle({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      radius: pad.radius,
+      fill: color,
+      realToCanvasMat
+    });
+    return;
+  }
+  if (pad.shape === "pill") {
+    drawPill({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      width: pad.width,
+      height: pad.height,
+      fill: color,
+      realToCanvasMat
+    });
+    return;
+  }
+  if (pad.shape === "rotated_pill") {
+    drawPill({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      width: pad.width,
+      height: pad.height,
+      fill: color,
+      realToCanvasMat,
+      rotation: pad.ccw_rotation ?? 0
+    });
+    return;
+  }
+  if (pad.shape === "polygon") {
+    if (pad.points && pad.points.length >= 3) {
+      drawPolygon({
+        ctx,
+        points: pad.points,
+        fill: color,
+        realToCanvasMat
+      });
+    }
+    return;
+  }
+}
+
 // lib/drawer/elements/pcb-soldermask/board.ts
 import { applyToPoint as applyToPoint16 } from "transformation-matrix";
 
@@ -2228,10 +2135,10 @@ function processHoleSoldermask(params) {
     realToCanvasMat,
     colorMap,
     soldermaskOverCopperColor,
-    showSoldermask
+    drawSoldermask
   } = params;
-  const isCoveredWithSoldermask = showSoldermask && hole.is_covered_with_solder_mask === true;
-  const margin = showSoldermask ? hole.soldermask_margin ?? 0 : 0;
+  const isCoveredWithSoldermask = drawSoldermask && hole.is_covered_with_solder_mask === true;
+  const margin = drawSoldermask ? hole.soldermask_margin ?? 0 : 0;
   if (isCoveredWithSoldermask) {
     ctx.fillStyle = soldermaskOverCopperColor;
     drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
@@ -2451,11 +2358,11 @@ function processPlatedHoleSoldermask(params) {
     colorMap,
     soldermaskOverCopperColor,
     layer,
-    showSoldermask
+    drawSoldermask
   } = params;
   if (hole.layers && !hole.layers.includes(layer)) return;
-  const isCoveredWithSoldermask = showSoldermask && hole.is_covered_with_solder_mask === true;
-  const margin = showSoldermask ? hole.soldermask_margin ?? 0 : 0;
+  const isCoveredWithSoldermask = drawSoldermask && hole.is_covered_with_solder_mask === true;
+  const margin = drawSoldermask ? hole.soldermask_margin ?? 0 : 0;
   const copperColor = colorMap.copper.top;
   if (isCoveredWithSoldermask) {
     ctx.fillStyle = soldermaskOverCopperColor;
@@ -2714,11 +2621,11 @@ function processSmtPadSoldermask(params) {
     colorMap,
     soldermaskOverCopperColor,
     layer,
-    showSoldermask
+    drawSoldermask
   } = params;
   if (pad.layer !== layer) return;
-  const isCoveredWithSoldermask = showSoldermask && pad.is_covered_with_solder_mask === true;
-  const margin = showSoldermask ? pad.soldermask_margin ?? 0 : 0;
+  const isCoveredWithSoldermask = drawSoldermask && pad.is_covered_with_solder_mask === true;
+  const margin = drawSoldermask ? pad.soldermask_margin ?? 0 : 0;
   let ml = margin;
   let mr = margin;
   let mt = margin;
@@ -2981,11 +2888,11 @@ function drawPcbSoldermask(params) {
     realToCanvasMat,
     colorMap,
     layer,
-    showSoldermask
+    drawSoldermask
   } = params;
   const soldermaskColor = colorMap.soldermask[layer] ?? colorMap.soldermask.top;
   const soldermaskOverCopperColor = colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
-  if (showSoldermask) {
+  if (drawSoldermask) {
     drawBoardSoldermask({ ctx, board, realToCanvasMat, soldermaskColor });
   }
   for (const element of elements) {
@@ -2996,7 +2903,7 @@ function drawPcbSoldermask(params) {
       colorMap,
       soldermaskOverCopperColor,
       layer,
-      showSoldermask
+      drawSoldermask
     });
   }
 }
@@ -3008,7 +2915,7 @@ function processElementSoldermask(params) {
     colorMap,
     soldermaskOverCopperColor,
     layer,
-    showSoldermask
+    drawSoldermask
   } = params;
   if (element.type === "pcb_smtpad") {
     processSmtPadSoldermask({
@@ -3018,7 +2925,7 @@ function processElementSoldermask(params) {
       colorMap,
       soldermaskOverCopperColor,
       layer,
-      showSoldermask
+      drawSoldermask
     });
   } else if (element.type === "pcb_plated_hole") {
     processPlatedHoleSoldermask({
@@ -3028,7 +2935,7 @@ function processElementSoldermask(params) {
       colorMap,
       soldermaskOverCopperColor,
       layer,
-      showSoldermask
+      drawSoldermask
     });
   } else if (element.type === "pcb_hole") {
     processHoleSoldermask({
@@ -3037,7 +2944,7 @@ function processElementSoldermask(params) {
       realToCanvasMat,
       colorMap,
       soldermaskOverCopperColor,
-      showSoldermask
+      drawSoldermask
     });
   } else if (element.type === "pcb_via") {
     processViaSoldermask({
@@ -3056,6 +2963,103 @@ function processElementSoldermask(params) {
   }
 }
 
+// lib/drawer/elements/pcb-trace.ts
+function layerToColor4(layer, colorMap) {
+  return colorMap.copper[layer] ?? colorMap.copper.top;
+}
+function drawPcbTrace(params) {
+  const { ctx, trace, realToCanvasMat, colorMap } = params;
+  if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
+    return;
+  }
+  for (let i = 0; i < trace.route.length - 1; i++) {
+    const start = trace.route[i];
+    const end = trace.route[i + 1];
+    if (!start || !end) continue;
+    const layer = "layer" in start ? start.layer : "layer" in end ? end.layer : null;
+    if (!layer) continue;
+    const color = layerToColor4(layer, colorMap);
+    const traceWidth = "width" in start ? start.width : "width" in end ? end.width : 0.1;
+    drawLine({
+      ctx,
+      start: { x: start.x, y: start.y },
+      end: { x: end.x, y: end.y },
+      strokeWidth: traceWidth,
+      stroke: color,
+      realToCanvasMat,
+      lineCap: "round"
+    });
+  }
+}
+
+// lib/drawer/elements/pcb-via.ts
+function drawPcbVia(params) {
+  const { ctx, via, realToCanvasMat, colorMap } = params;
+  drawCircle({
+    ctx,
+    center: { x: via.x, y: via.y },
+    radius: via.outer_diameter / 2,
+    fill: colorMap.copper.top,
+    realToCanvasMat
+  });
+  drawCircle({
+    ctx,
+    center: { x: via.x, y: via.y },
+    radius: via.hole_diameter / 2,
+    fill: colorMap.drill,
+    realToCanvasMat
+  });
+}
+
+// lib/drawer/pcb-render-layer-filter.ts
+import { getElementRenderLayers } from "@tscircuit/circuit-json-util";
+function shouldDrawElement(element, options) {
+  if (!options.layers || options.layers.length === 0) {
+    return true;
+  }
+  const elementLayers = getElementRenderLayers(element);
+  if (elementLayers.length === 0) {
+    return true;
+  }
+  return elementLayers.some((layer) => options.layers.includes(layer));
+}
+
+// lib/drawer/types.ts
+var DEFAULT_PCB_COLOR_MAP = {
+  copper: {
+    top: "rgb(200, 52, 52)",
+    inner1: "rgb(255, 140, 0)",
+    inner2: "rgb(255, 215, 0)",
+    inner3: "rgb(50, 205, 50)",
+    inner4: "rgb(64, 224, 208)",
+    inner5: "rgb(138, 43, 226)",
+    inner6: "rgb(255, 105, 180)",
+    bottom: "rgb(77, 127, 196)"
+  },
+  soldermaskWithCopperUnderneath: {
+    top: "rgb(18, 82, 50)",
+    bottom: "rgb(77, 127, 196)"
+  },
+  soldermask: {
+    top: "rgb(12, 55, 33)",
+    bottom: "rgb(12, 55, 33)"
+  },
+  soldermaskOverCopper: {
+    top: "rgb(52, 135, 73)",
+    bottom: "rgb(52, 135, 73)"
+  },
+  substrate: "rgb(201, 162, 110)",
+  drill: "#FF26E2",
+  silkscreen: {
+    top: "#f2eda1",
+    bottom: "#5da9e9"
+  },
+  boardOutline: "rgba(255, 255, 255, 0.5)",
+  courtyard: "#FF00FF",
+  keepout: "#FF6B6B"
+  // Red color for keepout zones
+};
+
 // lib/drawer/CircuitToCanvasDrawer.ts
 var CircuitToCanvasDrawer = class {
   ctx;
@@ -3126,7 +3130,8 @@ var CircuitToCanvasDrawer = class {
         ctx: this.ctx,
         board,
         realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+        colorMap: this.colorMap,
+        drawBoardMaterial: options.drawBoardMaterial ?? false
       });
     }
     for (const element of elements) {
@@ -3148,7 +3153,7 @@ var CircuitToCanvasDrawer = class {
         });
       }
     }
-    const showSoldermask = options.showSoldermask ?? false;
+    const drawSoldermask = options.drawSoldermask ?? false;
     if (board) {
       drawPcbSoldermask({
         ctx: this.ctx,
@@ -3157,7 +3162,7 @@ var CircuitToCanvasDrawer = class {
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
         layer: "top",
-        showSoldermask
+        drawSoldermask
       });
     }
     for (const element of elements) {
@@ -3246,8 +3251,8 @@ var CircuitToCanvasDrawer = class {
           hole: element,
           realToCanvasMat: this.realToCanvasMat,
           colorMap: this.colorMap,
-          soldermaskMargin: showSoldermask ? element.soldermask_margin : void 0,
-          showSoldermask
+          soldermaskMargin: drawSoldermask ? element.soldermask_margin : void 0,
+          drawSoldermask
         });
       }
       if (element.type === "pcb_via") {
@@ -3267,7 +3272,7 @@ var CircuitToCanvasDrawer = class {
           hole: element,
           realToCanvasMat: this.realToCanvasMat,
           colorMap: this.colorMap,
-          soldermaskMargin: showSoldermask ? element.soldermask_margin : void 0
+          soldermaskMargin: drawSoldermask ? element.soldermask_margin : void 0
         });
       }
       if (element.type === "pcb_cutout") {