diff --git a/docs/elements/courtyardoutline.mdx b/docs/elements/courtyardoutline.mdx
index 5fa2511..04a0b19 100644
--- a/docs/elements/courtyardoutline.mdx
+++ b/docs/elements/courtyardoutline.mdx
@@ -2,76 +2,229 @@
title:
description: Draw custom polygon courtyard boundaries for irregular package geometry.
---
-
-import CircuitPreview from "@site/src/components/CircuitPreview"
-
-## Overview
-
-Use `` when your footprint needs a non-rectangular, non-circular courtyard shape.
-
-## Basic Outline Example
-
- (
-
-
-
-
-
-
-
-
- }
- />
-
-)
-`}
-/>
-
-## Filled Outline Example
-
- (
-
-
-
-
-
- }
- />
-
-)
-`}
-/>
+
+# ``
+
+The `` element lets you define a custom polygon boundary for a component's
+courtyard — the keep-out zone that prevents other components from being placed too close.
+Use it inside a `` whenever the standard rectangular or circular courtyard shapes
+don't match your package geometry.
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `points` | `Array<{ x: number; y: number }>` | required | Polygon vertices in millimetres, relative to the component origin |
+| `anchorAlignment` | `"center" \| "top_left" \| "top_right" \| "bottom_left" \| "bottom_right"` | `"center"` | Which point of the bounding box is treated as the origin anchor |
+| `layer` | `string` | `"F.Courtyard"` | PCB layer for the courtyard outline |
+
+---
+
+## How `anchorAlignment` Works
+
+By default the courtyard polygon is positioned so that its **bounding-box centre** sits at the
+component's `pcbX` / `pcbY` coordinates. Changing `anchorAlignment` shifts which corner (or the
+centre) of the bounding box aligns with that position.
+
+Think of it like CSS `transform-origin`: the polygon itself doesn't change shape — only the
+reference point used to place it does.
+
+---
+
+## Examples
+
+### Default — `center` alignment
+
+The most common case. The centroid of the bounding box lands exactly at the component origin.
+
+```tsx
+
+
+
+```
+
+```
+ ┌──────────┐
+ │ │
+ ───┼──origin──┼───
+ │ │
+ └──────────┘
+```
+
+---
+
+### `top_left` alignment
+
+The **top-left corner** of the bounding box lands at the component origin. Useful when your
+component's pin 1 is at the top-left and you want to align the courtyard to it precisely.
+
+```tsx
+
+
+
+```
+
+```
+ origin (0,0) = top-left corner
+ ┌──────────┐
+ │ │
+ │ │
+ └──────────┘
+```
+
+---
+
+### `top_right` alignment
+
+The **top-right corner** lands at the component origin. Handy for edge-mounted connectors
+where the right edge must align with a board boundary.
+
+```tsx
+
+
+
+```
+
+```
+ origin = top-right corner
+ ┌──────────┐
+ │ │
+ │ │
+ └──────────┘
+```
+
+---
+
+### `bottom_left` alignment
+
+The **bottom-left corner** lands at the component origin. Useful for components that grow
+upward from a reference baseline (e.g. tall through-hole parts referenced from the bottom pad).
+
+```tsx
+
+
+
+```
+
+```
+ ┌──────────┐
+ │ │
+ │ │
+ └──────────┘
+ origin (0,0) = bottom-left corner
+```
+
+---
+
+### `bottom_right` alignment
+
+The **bottom-right corner** lands at the component origin. Mirrors `bottom_left`, useful for
+right-aligned connectors or pads referenced from the bottom-right.
+
+```tsx
+
+
+
+```
+
+```
+ ┌──────────┐
+ │ │
+ │ │
+ └──────────┘
+ origin = bottom-right corner
+```
+
+---
+
+### Irregular (non-rectangular) polygon
+
+`` accepts any convex or concave polygon. This is its main advantage over
+``. Here is an L-shaped courtyard for a component with an asymmetric body:
+
+```tsx
+
+
+
+```
+
+```
+ ┌───┐
+ │ │
+ │ └──────┐
+ │ │
+ └──────────┘
+ (centre anchored at origin)
+```
+
+---
+
+## Tips
+
+- All `points` coordinates are **relative to the component's placed position** on the PCB, not
+ absolute board coordinates.
+- The polygon does not need to be closed — tscircuit automatically connects the last point back
+ to the first.
+- Combine `` with `` or `` inside the
+ same `` to build compound keep-out zones for complex packages.
+- If you just need a simple rectangle, prefer `` — it is less verbose and
+ supports the same `anchorAlignment` prop.
+---
+
+## Related Elements
+
+- [``](./courtyardrect) — rectangular courtyard, same alignment options
+- [``](./courtyardcircle) — circular courtyard
+- [``](./footprint) — the parent element that contains courtyard elements
diff --git a/docs/tutorials/building-a-simple-usb-flashlight.mdx b/docs/tutorials/building-a-simple-usb-flashlight.mdx
index bdf3473..097b929 100644
--- a/docs/tutorials/building-a-simple-usb-flashlight.mdx
+++ b/docs/tutorials/building-a-simple-usb-flashlight.mdx
@@ -1,42 +1,236 @@
---
title: Building a Simple USB Flashlight
-description: Learn how to build a simple USB-powered flashlight circuit using tscircuit with a push button, LED, and USB-C connector.
----
-
-## Overview
-
-This tutorial will walk you through building a simple USB flashlight using
-tscircuit.
-
-import TscircuitIframe from "@site/src/components/TscircuitIframe"
-
- {
- return (
-
- ` |
+| Current-limiting resistor | 68 Ω, 0402 | `` |
+| White LED | Generic 0402 white | `` |
+
+---
+
+## How the Circuit Works
+
+USB supplies 5 V on pin 1 (VBUS) and ground on pin 4 (GND).
+
+A white LED typically has a forward voltage (V_f) of about 3.0 V–3.4 V and wants roughly
+20 mA of current. We choose R so that:
+
+```
+R = (V_supply − V_f) / I_led
+R = (5 V − 3.2 V) / 0.020 A
+R ≈ 90 Ω → use standard value 68 Ω (gives ~26 mA, fine for a bright flash)
+```
+
+The circuit is simply: **VBUS → R1 → LED anode → LED cathode → GND**.
+
+---
+
+## Step 1 — Create a New Project
+
+If you haven't installed tscircuit yet, follow the [Quickstart CLI guide](../intro/quickstart-cli)
+or use the [online editor](https://tscircuit.com) to follow along in your browser.
+
+```bash
+tsci init usb-flashlight
+cd usb-flashlight
+tsci dev
+```
+
+Open `lib/MyCircuit.tsx` in your editor. You will see a blank board template.
+
+---
+
+## Step 2 — Add the USB Connector
+
+A USB-A male connector exposes four pins. We only need **pin 1 (VBUS, +5 V)** and
+**pin 4 (GND)**. In tscircuit we declare it with `` and assign net labels
+to the pins we care about:
+
+```tsx
+import { connector, resistor, led, board, trace } from "@tscircuit/core"
+
+export default () => (
+
+
+
+)
+```
+
+> **Tip:** `footprint="usb_a_male_th"` selects a through-hole USB-A male footprint from the
+> built-in footprint library. You can browse available footprints at
+> [tscircuit.com/footprints](https://tscircuit.com).
+
+After saving, you should see the connector appear on the PCB preview in your browser.
+
+---
+
+## Step 3 — Add the Current-Limiting Resistor
+
+Place a 68 Ω 0402 resistor to the right of the connector. Its left pin (`pin1`) will connect
+to VBUS, and its right pin (`pin2`) will go to the LED:
+
+```tsx
+
+```
+
+---
+
+## Step 4 — Add the LED
+
+Place a 0402 white LED to the right of the resistor. The **anode** (`pin1`) connects to R1,
+and the **cathode** (`pin2`) connects to GND:
+
+```tsx
+
+```
+
+---
+
+## Step 5 — Connect the Components with Traces
+
+Now wire everything together. tscircuit traces are declared by listing the net path using
+dot notation `ComponentName.pinLabel`:
+
+```tsx
+ {/* VBUS from USB connector pin 1 to resistor pin 1 */}
+
+
+ {/* R1 pin 2 to LED anode */}
+
+
+ {/* LED cathode back to GND on USB connector pin 4 */}
+
+```
+
+---
+
+## Full Circuit Code
+
+Putting it all together:
+
+```tsx
+import { connector, resistor, led, board, trace } from "@tscircuit/core"
+
+export default () => (
+
+ {/* USB-A Male Connector */}
+
+
+ {/* 68 Ω current-limiting resistor */}
+
- .pos", pin2: "net.VBUS" }}
- pcbX={0}
- pcbY={-1}
- />
-
-
-
-
-
-
- )
-}
-`} />
+
+ {/* White LED */}
+
+
+ {/* Traces */}
+
+
+
+
+)
+```
+
+---
+
+## Step 6 — Preview and Verify
+
+The `tsci dev` server shows three tabs: **Schematic**, **PCB**, and **3D**.
+
+Check the following:
+
+- **Schematic**: The net from J1 pin 1 flows through R1 and then through LED1 to GND. No
+ unconnected pins ("ratsnest" lines) should remain.
+- **PCB**: All three components fit within the 20 × 15 mm board outline. All traces are routed
+ (no airwires).
+- **3D**: The USB connector overhangs the board edge slightly — this is normal for a plug-style
+ connector.
+If you see any ratsnest (unrouted) lines, double-check the `from` / `to` pin names in your
+`` elements.
+
+---
+
+## Step 7 — Export and Order
+
+When you are happy with the design, export Gerber files for fabrication:
+
+```bash
+tsci export --format gerber
+```
+
+The files land in `./output/gerbers/`. Zip the folder and upload it to your preferred PCB
+manufacturer (JLCPCB, PCBWay, OSH Park, etc.). A standard 5-board run of this simple design
+typically costs under $5 including shipping.
+
+---
+
+## What's Next?
+
+- Add a push-button switch between VBUS and R1 to turn the light on and off
+ (`` element).
+- Swap the single LED for three LEDs in parallel (each with its own 100 Ω resistor) for a
+ brighter beam.
+- Try the [Building a 3×5 LED Matrix](./building-led-matrix) tutorial to scale up to a full
+ dot-matrix display.