From 1a7ae6d52d408046da7294b0436739ba49cf7199 Mon Sep 17 00:00:00 2001
From: Excellencedev <ademiluyisuccessandexcellence@gmail.com>
Date: Thu, 12 Mar 2026 12:13:39 +0100
Subject: [PATCH 1/3] Fix issue

---
 docs/elements/courtyardoutline.mdx | 81 ++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/docs/elements/courtyardoutline.mdx b/docs/elements/courtyardoutline.mdx
index 5fa2511..1688df1 100644
--- a/docs/elements/courtyardoutline.mdx
+++ b/docs/elements/courtyardoutline.mdx
@@ -75,3 +75,84 @@ export default () => (
 )
 `}
 />
+
+## Anchor Alignment Examples
+
+Use `anchorAlignment` to control which point of the outline's bounding box is
+placed at the `pcbX`/`pcbY` anchor. This is helpful when you want to define an
+outline using only positive coordinates (e.g. `{ x: 0, y: 0 }` to
+`{ x: w, y: h }`) but still position it relative to a footprint origin.
+
+<CircuitPreview
+  showCourtyards
+  defaultView="pcb"
+  hideSchematicTab
+  hide3DTab
+  code={`
+export default () => (
+  <board width="70mm" height="26mm">
+    <chip
+      name="CENTER"
+      pcbX={-20}
+      footprint={
+        <footprint>
+          <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
+          <courtyardoutline
+            pcbX={0}
+            pcbY={0}
+            anchorAlignment="center"
+            outline={[
+              { x: 0, y: 0 },
+              { x: 10, y: 0 },
+              { x: 10, y: 6 },
+              { x: 0, y: 6 },
+            ]}
+          />
+        </footprint>
+      }
+    />
+
+    <chip
+      name="TOP_LEFT"
+      footprint={
+        <footprint>
+          <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
+          <courtyardoutline
+            pcbX={0}
+            pcbY={0}
+            anchorAlignment="top_left"
+            outline={[
+              { x: 0, y: 0 },
+              { x: 10, y: 0 },
+              { x: 10, y: 6 },
+              { x: 0, y: 6 },
+            ]}
+          />
+        </footprint>
+      }
+    />
+
+    <chip
+      name="BOTTOM_RIGHT"
+      pcbX={20}
+      footprint={
+        <footprint>
+          <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
+          <courtyardoutline
+            pcbX={0}
+            pcbY={0}
+            anchorAlignment="bottom_right"
+            outline={[
+              { x: 0, y: 0 },
+              { x: 10, y: 0 },
+              { x: 10, y: 6 },
+              { x: 0, y: 6 },
+            ]}
+          />
+        </footprint>
+      }
+    />
+  </board>
+)
+`}
+/>

From 708202be6618cc4d5c64d5b93e072ce369f0528d Mon Sep 17 00:00:00 2001
From: Excellencedev <ademiluyisuccessandexcellence@gmail.com>
Date: Thu, 12 Mar 2026 12:47:29 +0100
Subject: [PATCH 2/3] change

---
 docs/elements/courtyardoutline.mdx | 118 +++++++++++++----------------
 1 file changed, 51 insertions(+), 67 deletions(-)

diff --git a/docs/elements/courtyardoutline.mdx b/docs/elements/courtyardoutline.mdx
index 1688df1..6fe86af 100644
--- a/docs/elements/courtyardoutline.mdx
+++ b/docs/elements/courtyardoutline.mdx
@@ -78,10 +78,9 @@ export default () => (
 
 ## Anchor Alignment Examples
 
-Use `anchorAlignment` to control which point of the outline's bounding box is
-placed at the `pcbX`/`pcbY` anchor. This is helpful when you want to define an
-outline using only positive coordinates (e.g. `{ x: 0, y: 0 }` to
-`{ x: w, y: h }`) but still position it relative to a footprint origin.
+`<courtyardoutline />` draws the polygon you provide in footprint coordinates.
+To make the footprint origin act like a specific “anchor” (center, top-left,
+bottom-right, etc), translate the outline points accordingly.
 
 <CircuitPreview
   showCourtyards
@@ -89,70 +88,55 @@ outline using only positive coordinates (e.g. `{ x: 0, y: 0 }` to
   hideSchematicTab
   hide3DTab
   code={`
-export default () => (
-  <board width="70mm" height="26mm">
-    <chip
-      name="CENTER"
-      pcbX={-20}
-      footprint={
-        <footprint>
-          <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
-          <courtyardoutline
-            pcbX={0}
-            pcbY={0}
-            anchorAlignment="center"
-            outline={[
-              { x: 0, y: 0 },
-              { x: 10, y: 0 },
-              { x: 10, y: 6 },
-              { x: 0, y: 6 },
-            ]}
-          />
-        </footprint>
-      }
-    />
+export default () => {
+  const W = 10
+  const H = 6
 
-    <chip
-      name="TOP_LEFT"
-      footprint={
-        <footprint>
-          <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
-          <courtyardoutline
-            pcbX={0}
-            pcbY={0}
-            anchorAlignment="top_left"
-            outline={[
-              { x: 0, y: 0 },
-              { x: 10, y: 0 },
-              { x: 10, y: 6 },
-              { x: 0, y: 6 },
-            ]}
-          />
-        </footprint>
-      }
-    />
+  const rect = [
+    { x: 0, y: 0 },
+    { x: W, y: 0 },
+    { x: W, y: H },
+    { x: 0, y: H },
+  ]
 
-    <chip
-      name="BOTTOM_RIGHT"
-      pcbX={20}
-      footprint={
-        <footprint>
-          <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
-          <courtyardoutline
-            pcbX={0}
-            pcbY={0}
-            anchorAlignment="bottom_right"
-            outline={[
-              { x: 0, y: 0 },
-              { x: 10, y: 0 },
-              { x: 10, y: 6 },
-              { x: 0, y: 6 },
-            ]}
-          />
-        </footprint>
-      }
-    />
-  </board>
-)
+  const translate = (outline, dx, dy) =>
+    outline.map((p) => ({ x: p.x + dx, y: p.y + dy }))
+
+  return (
+    <board width="70mm" height="26mm">
+      <chip
+        name="CENTER"
+        pcbX={-20}
+        footprint={
+          <footprint>
+            <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
+            <courtyardoutline outline={translate(rect, -W / 2, -H / 2)} />
+          </footprint>
+        }
+      />
+
+      <chip
+        name="TOP_LEFT"
+        footprint={
+          <footprint>
+            <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
+            <courtyardoutline outline={translate(rect, 0, -H)} />
+          </footprint>
+        }
+      />
+
+      <chip
+        name="BOTTOM_RIGHT"
+        pcbX={20}
+        footprint={
+          <footprint>
+            <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />
+            <courtyardoutline outline={translate(rect, -W, 0)} />
+          </footprint>
+        }
+      />
+    </board>
+  )
+}
 `}
 />

From 01f52ccd9db90407693d2699b190399743c9de35 Mon Sep 17 00:00:00 2001
From: Excellencedev <ademiluyisuccessandexcellence@gmail.com>
Date: Thu, 12 Mar 2026 13:24:21 +0100
Subject: [PATCH 3/3] add gap

---
 docs/elements/courtyardoutline.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/elements/courtyardoutline.mdx b/docs/elements/courtyardoutline.mdx
index 6fe86af..f3b51b9 100644
--- a/docs/elements/courtyardoutline.mdx
+++ b/docs/elements/courtyardoutline.mdx
@@ -79,8 +79,8 @@ export default () => (
 ## Anchor Alignment Examples
 
 `<courtyardoutline />` draws the polygon you provide in footprint coordinates.
-To make the footprint origin act like a specific “anchor” (center, top-left,
-bottom-right, etc), translate the outline points accordingly.
+To make the footprint origin act like a specific anchor (center, top-left,
+bottom-right, etc.), translate the outline points accordingly.
 
 <CircuitPreview
   showCourtyards
@@ -127,7 +127,7 @@ export default () => {
 
       <chip
         name="BOTTOM_RIGHT"
-        pcbX={20}
+        pcbX={30}
         footprint={
           <footprint>
             <platedhole shape="circle" pcbX={0} pcbY={0} outerDiameter={1.6} holeDiameter={0.8} />