add pcb_courtyard_circle support

package.json

@@ -53,9 +53,9 @@
     "@tscircuit/alphabet": "^0.0.20",
     "@tscircuit/math-utils": "^0.0.29",
     "@vitejs/plugin-react": "^5.0.2",
-    "circuit-json": "^0.0.356",
-    "circuit-to-canvas": "^0.0.62",
-    "circuit-to-svg": "^0.0.271",
+    "circuit-json": "^0.0.374",
+    "circuit-to-canvas": "^0.0.66",
+    "circuit-to-svg": "^0.0.323",
     "color": "^4.2.3",
     "react-supergrid": "^1.0.10",
     "react-toastify": "^10.0.5",

src/components/CanvasPrimitiveRenderer.tsx

@@ -16,6 +16,7 @@ import { drawPrimitives } from "lib/draw-primitives"
 import { drawSoldermaskElementsForLayer } from "lib/draw-soldermask"
 import { drawSilkscreenElementsForLayer } from "lib/draw-silkscreen"
 import { drawPcbViaElementsForLayer } from "lib/draw-via"
+import { drawCourtyardElementsForLayer } from "lib/draw-courtyard"
 import type { GridConfig, Primitive } from "lib/types"
 import React, { useEffect, useRef } from "react"
 import { SuperGrid, toMMSI } from "react-supergrid"
@@ -55,6 +56,8 @@ const orderedLayers = [
   "top_notes",
   "top_silkscreen",
   "bottom_silkscreen",
+  "top_courtyard",
+  "bottom_courtyard",
   "other",
 ]
 
@@ -100,7 +103,10 @@ export const CanvasPrimitiveRenderer = ({
       .filter((p) => p._element?.type !== "pcb_smtpad")
       .filter((p) => p._element?.type !== "pcb_plated_hole")
       .filter((p) => p._element?.type !== "pcb_via")
+      .filter((p) => p._element?.type !== "pcb_via")
       .filter((p) => p._element?.type !== "pcb_trace")
+      .filter((p) => p._element?.type !== "pcb_courtyard_circle")
+      .filter((p) => p._element?.type !== "pcb_courtyard_rect")
 
     drawPrimitives(drawer, filteredPrimitives)
 
@@ -355,6 +361,29 @@ export const CanvasPrimitiveRenderer = ({
           realToCanvasMat: transform,
         })
       }
+
+      // Draw top courtyard
+      const topCourtyardCanvas = canvasRefs.current.top_courtyard
+      if (topCourtyardCanvas) {
+        drawCourtyardElementsForLayer({
+          canvas: topCourtyardCanvas,
+          elements,
+          layers: ["top_courtyard" as PcbRenderLayer],
+          realToCanvasMat: transform,
+        })
+      }
+
+      // Draw bottom courtyard
+      const bottomCourtyardCanvas = canvasRefs.current.bottom_courtyard
+      if (bottomCourtyardCanvas) {
+        drawCourtyardElementsForLayer({
+          canvas: bottomCourtyardCanvas,
+          elements,
+          layers: ["bottom_courtyard" as PcbRenderLayer],
+          realToCanvasMat: transform,
+        })
+      }
+
       // Draw board outline using circuit-to-canvas
       const boardCanvas = canvasRefs.current.board
       if (boardCanvas) {

src/examples/2025/simple/courtyard-circle.fixture.tsx

@@ -0,0 +1,35 @@
+import type React from "react"
+import { PCBViewer } from "../../../PCBViewer"
+import { AnyCircuitElement } from "circuit-json"
+
+export const CourtyardCircleExample: React.FC = () => {
+  return (
+    <div style={{ backgroundColor: "black" }}>
+      <PCBViewer
+        circuitJson={
+          [
+            {
+              type: "pcb_courtyard_circle",
+              pcb_courtyard_circle_id: "courtyard_1",
+              pcb_component_id: "component_1",
+              center: { x: 0, y: 0 },
+              radius: 5,
+              layer: "bottom",
+            },
+            {
+              type: "pcb_courtyard_rect",
+              pcb_courtyard_rect_id: "courtyard_2",
+              pcb_component_id: "component_1",
+              center: { x: 5, y: 0 },
+              width: 5,
+              height: 5,
+              layer: "top",
+            },
+          ] as AnyCircuitElement[]
+        }
+      />
+    </div>
+  )
+}
+
+export default CourtyardCircleExample

src/lib/Drawer.ts

@@ -49,6 +49,9 @@ export const LAYER_NAME_TO_COLOR = {
   tkeepout: colors.board.b_crtyd,
   tplace: colors.board.b_silks,
 
+  top_courtyard: colors.board.f_crtyd,
+  bottom_courtyard: colors.board.b_crtyd,
+
   top_silkscreen: colors.board.f_silks,
   bottom_silkscreen: colors.board.b_silks,
 
@@ -82,7 +85,9 @@ export const DEFAULT_DRAW_ORDER = [
   "soldermask_top",
   "soldermask_with_copper_bottom",
   "soldermask_with_copper_top",
+  "bottom_courtyard",
   "bottom_fabrication",
+  "top_courtyard",
   "top_fabrication",
   "edge_cuts",
   "top_silkscreen",
@@ -370,12 +375,27 @@ export class Drawer {
     ctx.restore()
   }
 
-  circle(x: number, y: number, r: number, mesh_fill?: boolean) {
+  circle(
+    x: number,
+    y: number,
+    r: number,
+    mesh_fill?: boolean,
+    is_filled = true,
+  ) {
     const r$ = scaleOnly(this.transform, r)
     const [x$, y$] = applyToPoint(this.transform, [x, y])
     this.applyAperture()
     const ctx = this.getLayerCtx()
 
+    // Ensure we have a stroke if not filled
+    if (!is_filled) {
+      const originalLineWidth = ctx.lineWidth
+      // Set a minimum visible stroke width if calculated width is 0 or too small
+      // or rely on what applyAperture set.
+      // If the aperture size was 0, we might want a hairline.
+      // But typically applyAperture sets lineWidth based on aperture.size.
+    }
+
     if (mesh_fill) {
       ctx.save()
       ctx.beginPath()
@@ -395,7 +415,11 @@ export class Drawer {
     } else {
       ctx.beginPath()
       ctx.arc(x$, y$, r$, 0, 2 * Math.PI)
-      ctx.fill()
+      if (is_filled !== false) {
+        ctx.fill()
+      } else {
+        ctx.stroke()
+      }
     }
   }
 

src/lib/colors.ts

@@ -16,7 +16,7 @@ export default {
     anchor: "rgb(255, 38, 226)",
     aux_items: "rgb(255, 255, 255)",
     b_adhes: "rgb(0, 0, 132)",
-    b_crtyd: "rgb(255, 38, 226)",
+    b_crtyd: "rgb(38, 233, 255)",
     b_fab: "rgb(88, 93, 132)",
     b_mask: "rgba(2, 255, 238, 0.400)",
     b_paste: "rgb(0, 194, 194)",

src/lib/convert-element-to-primitive.ts

@@ -10,6 +10,7 @@ import {
   convertSmtpadPill,
   convertSmtpadRotatedPill,
 } from "./element-to-primitive-converters/convert-smtpad-pill"
+
 import { convertPcbCopperTextToPrimitive } from "./element-to-primitive/convert-pcb-copper-text-to-primitive"
 
 type MetaData = {

src/lib/draw-courtyard.ts

@@ -0,0 +1,47 @@
+import type { AnyCircuitElement, PcbRenderLayer } from "circuit-json"
+import {
+  CircuitToCanvasDrawer,
+  DEFAULT_PCB_COLOR_MAP,
+  type PcbColorMap,
+} from "circuit-to-canvas"
+import type { Matrix } from "transformation-matrix"
+import colors from "./colors"
+
+const PCB_VIEWER_COLOR_MAP: PcbColorMap = {
+  ...DEFAULT_PCB_COLOR_MAP,
+  courtyard: {
+    top: colors.board.f_crtyd,
+    bottom: colors.board.b_crtyd,
+  },
+}
+
+export function isCourtyardElement(element: AnyCircuitElement) {
+  return (
+    element.type === "pcb_courtyard_circle" ||
+    element.type === "pcb_courtyard_rect"
+  )
+}
+
+export function drawCourtyardElementsForLayer({
+  canvas,
+  elements,
+  layers,
+  realToCanvasMat,
+}: {
+  canvas: HTMLCanvasElement
+  elements: AnyCircuitElement[]
+  layers: PcbRenderLayer[]
+  realToCanvasMat: Matrix
+}) {
+  const drawer = new CircuitToCanvasDrawer(canvas)
+
+  drawer.configure({
+    colorOverrides: PCB_VIEWER_COLOR_MAP,
+  })
+
+  drawer.realToCanvasMat = realToCanvasMat
+
+  const courtyardElements = elements.filter(isCourtyardElement)
+
+  drawer.drawElements(courtyardElements, { layers })
+}

src/lib/draw-primitives.ts

@@ -309,7 +309,13 @@ export const drawCircle = (drawer: Drawer, circle: Circle) => {
     color: getColor(circle),
     layer: circle.layer,
   })
-  drawer.circle(circle.x, circle.y, circle.r, circle.mesh_fill)
+  drawer.circle(
+    circle.x,
+    circle.y,
+    circle.r,
+    circle.mesh_fill,
+    circle.is_filled,
+  )
 }
 
 export const drawOval = (drawer: Drawer, oval: Oval) => {

src/lib/types.ts

@@ -102,6 +102,7 @@ export interface Circle extends PCBDrawingObject {
   y: number
   r: number
   mesh_fill?: boolean
+  is_filled?: boolean
 }
 
 export interface Oval extends PCBDrawingObject {