circuit-json-to-tscircuit 0.0.41 → 0.0.43

package/dist/{chunk-BA4FQZIF.js → chunk-UXTI3RT6.js}

@@ -529,6 +529,7 @@ var convertSmtPads = (circuitJson) => {
   const elementStrings = [];
   for (const smtPad of smtPads) {
     const commonAttrs = [];
+    const solderMaskAttrs = formatSolderMaskAttrs(smtPad);
     if (smtPad.port_hints !== void 0) {
       commonAttrs.push(`portHints={${JSON.stringify(smtPad.port_hints)}}`);
     }
@@ -541,85 +542,30 @@ var convertSmtPads = (circuitJson) => {
     if (smtPad.layer !== void 0) {
       commonAttrs.push(`layer="${smtPad.layer}"`);
     }
-    if (smtPad.is_covered_with_solder_mask !== void 0) {
-      commonAttrs.push(
-        `coveredWithSolderMask={${smtPad.is_covered_with_solder_mask}}`
-      );
-    }
-    if (smtPad.soldermask_margin !== void 0) {
-      commonAttrs.push(`solderMaskMargin="${mmStr6(smtPad.soldermask_margin)}"`);
-    }
     if (smtPad.shape === "circle") {
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} radius="${mmStr6(smtPad.radius ?? 0)}" shape="circle" />`
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs} radius="${mmStr6(smtPad.radius ?? 0)}" shape="circle" />`
       );
     } else if (smtPad.shape === "rect") {
-      if (smtPad.rect_border_radius !== void 0) {
-        commonAttrs.push(
-          `rectBorderRadius="${mmStr6(smtPad.rect_border_radius)}"`
-        );
-      }
-      if (smtPad.corner_radius !== void 0) {
-        commonAttrs.push(`cornerRadius="${mmStr6(smtPad.corner_radius)}"`);
-      }
-      if (smtPad.soldermask_margin_left !== void 0) {
-        commonAttrs.push(
-          `solderMaskMarginLeft="${mmStr6(smtPad.soldermask_margin_left)}"`
-        );
-      }
-      if (smtPad.soldermask_margin_top !== void 0) {
-        commonAttrs.push(
-          `solderMaskMarginTop="${mmStr6(smtPad.soldermask_margin_top)}"`
-        );
-      }
-      if (smtPad.soldermask_margin_right !== void 0) {
-        commonAttrs.push(
-          `solderMaskMarginRight="${mmStr6(smtPad.soldermask_margin_right)}"`
-        );
-      }
-      if (smtPad.soldermask_margin_bottom !== void 0) {
-        commonAttrs.push(
-          `solderMaskMarginBottom="${mmStr6(smtPad.soldermask_margin_bottom)}"`
-        );
-      }
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} width="${mmStr6(smtPad.width ?? 0)}" height="${mmStr6(smtPad.height ?? 0)}" shape="rect" />`
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs}${formatOptionalMmAttr("rectBorderRadius", smtPad.rect_border_radius)}${formatOptionalMmAttr("cornerRadius", smtPad.corner_radius)}${formatOptionalMmAttr("solderMaskMarginLeft", smtPad.soldermask_margin_left)}${formatOptionalMmAttr("solderMaskMarginTop", smtPad.soldermask_margin_top)}${formatOptionalMmAttr("solderMaskMarginRight", smtPad.soldermask_margin_right)}${formatOptionalMmAttr("solderMaskMarginBottom", smtPad.soldermask_margin_bottom)} width="${mmStr6(smtPad.width ?? 0)}" height="${mmStr6(smtPad.height ?? 0)}" shape="rect" />`
       );
     } else if (smtPad.shape === "pill") {
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} width="${mmStr6(smtPad.width ?? 0)}" height="${mmStr6(smtPad.height ?? 0)}" radius="${mmStr6(smtPad.radius ?? 0)}" shape="pill" />`
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs} width="${mmStr6(smtPad.width ?? 0)}" height="${mmStr6(smtPad.height ?? 0)}" radius="${mmStr6(smtPad.radius ?? 0)}" shape="pill" />`
+      );
+    } else if (smtPad.shape === "rotated_pill") {
+      elementStrings.push(
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs} width="${mmStr6(smtPad.width ?? 0)}" height="${mmStr6(smtPad.height ?? 0)}" radius="${mmStr6(smtPad.radius ?? 0)}"${formatPcbRotationAttr(smtPad.ccw_rotation)} shape="pill" />`
       );
     } else if (smtPad.shape === "polygon") {
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} shape="polygon" points={${JSON.stringify(smtPad.points)}} />`
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs} shape="polygon" points={${JSON.stringify(smtPad.points)}} />`
       );
     } else if (smtPad.shape === "rotated_rect") {
       const cornerRadius = smtPad.corner_radius ?? smtPad.rect_border_radius ?? void 0;
-      if (cornerRadius !== void 0) {
-        commonAttrs.push(`cornerRadius="${mmStr6(cornerRadius)}"`);
-      }
-      if (smtPad.soldermask_margin_left !== void 0) {
-        commonAttrs.push(
-          `solderMaskMarginLeft="${mmStr6(smtPad.soldermask_margin_left)}"`
-        );
-      }
-      if (smtPad.soldermask_margin_top !== void 0) {
-        commonAttrs.push(
-          `solderMaskMarginTop="${mmStr6(smtPad.soldermask_margin_top)}"`
-        );
-      }
-      if (smtPad.soldermask_margin_right !== void 0) {
-        commonAttrs.push(
-          `solderMaskMarginRight="${mmStr6(smtPad.soldermask_margin_right)}"`
-        );
-      }
-      if (smtPad.soldermask_margin_bottom !== void 0) {
-        commonAttrs.push(
-          `solderMaskMarginBottom="${mmStr6(smtPad.soldermask_margin_bottom)}"`
-        );
-      }
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} width="${mmStr6(smtPad.width ?? 0)}" height="${mmStr6(smtPad.height ?? 0)}"${formatPcbRotationAttr(smtPad.ccw_rotation)} shape="rotated_rect" />`
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs}${formatOptionalMmAttr("cornerRadius", cornerRadius)}${formatOptionalMmAttr("solderMaskMarginLeft", smtPad.soldermask_margin_left)}${formatOptionalMmAttr("solderMaskMarginTop", smtPad.soldermask_margin_top)}${formatOptionalMmAttr("solderMaskMarginRight", smtPad.soldermask_margin_right)}${formatOptionalMmAttr("solderMaskMarginBottom", smtPad.soldermask_margin_bottom)} width="${mmStr6(smtPad.width ?? 0)}" height="${mmStr6(smtPad.height ?? 0)}"${formatPcbRotationAttr(smtPad.ccw_rotation)} shape="rotated_rect" />`
       );
     }
   }

package/dist/cli/main.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   convertCircuitJsonToTscircuit
-} from "../chunk-BA4FQZIF.js";
+} from "../chunk-UXTI3RT6.js";
 
 // cli/main.ts
 import { Command } from "commander";
@@ -16,9 +16,11 @@ var package_default = {
     "./cli": "./dist/cli/main.js"
   },
   type: "module",
-  version: "0.0.40",
+  version: "0.0.42",
   scripts: {
     build: "tsup-node lib/index.ts cli/main.ts --format esm --dts",
+    "build:site": "bun build ./site/index.html --outdir site-build",
+    "dev:site": "bun --hot ./site/index.html",
     test: "bun test",
     format: "biome format --write .",
     "format:check": "biome format ."
@@ -34,6 +36,8 @@ var package_default = {
     "circuit-json": "^0.0.433",
     "circuit-to-svg": "^0.0.353",
     commander: "^13.1.0",
+    prettier: "^3.9.5",
+    shiki: "^4.3.1",
     tscircuit: "^0.0.1873",
     tsup: "^8.3.5"
   },

package/dist/lib/index.js

@@ -1,6 +1,6 @@
 import {
   convertCircuitJsonToTscircuit
-} from "../chunk-BA4FQZIF.js";
+} from "../chunk-UXTI3RT6.js";
 export {
   convertCircuitJsonToTscircuit
 };

package/lib/generate-footprint-tsx/convert-smt-pads.ts

@@ -1,7 +1,9 @@
 import { su } from "@tscircuit/soup-util"
 import { mmStr } from "@tscircuit/mm"
 import type { FootprintElementConverter } from "./converter-types"
+import { formatOptionalMmAttr } from "./footprint-tsx-attribute-formatters/format-optional-mm-attr"
 import { formatPcbRotationAttr } from "./footprint-tsx-attribute-formatters/format-pcb-rotation-attr"
+import { formatSolderMaskAttrs } from "./footprint-tsx-attribute-formatters/format-solder-mask-attrs"
 
 export const convertSmtPads: FootprintElementConverter = (circuitJson) => {
   const smtPads = su(circuitJson).pcb_smtpad.list()
@@ -9,6 +11,7 @@ export const convertSmtPads: FootprintElementConverter = (circuitJson) => {
 
   for (const smtPad of smtPads) {
     const commonAttrs: string[] = []
+    const solderMaskAttrs = formatSolderMaskAttrs(smtPad)
 
     if (smtPad.port_hints !== undefined) {
       commonAttrs.push(`portHints={${JSON.stringify(smtPad.port_hints)}}`)
@@ -22,88 +25,33 @@ export const convertSmtPads: FootprintElementConverter = (circuitJson) => {
     if (smtPad.layer !== undefined) {
       commonAttrs.push(`layer="${smtPad.layer}"`)
     }
-    if (smtPad.is_covered_with_solder_mask !== undefined) {
-      commonAttrs.push(
-        `coveredWithSolderMask={${smtPad.is_covered_with_solder_mask}}`,
-      )
-    }
-    if (smtPad.soldermask_margin !== undefined) {
-      commonAttrs.push(`solderMaskMargin="${mmStr(smtPad.soldermask_margin)}"`)
-    }
 
     if (smtPad.shape === "circle") {
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} radius="${mmStr(smtPad.radius ?? 0)}" shape="circle" />`,
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs} radius="${mmStr(smtPad.radius ?? 0)}" shape="circle" />`,
       )
     } else if (smtPad.shape === "rect") {
-      if (smtPad.rect_border_radius !== undefined) {
-        commonAttrs.push(
-          `rectBorderRadius="${mmStr(smtPad.rect_border_radius)}"`,
-        )
-      }
-      if (smtPad.corner_radius !== undefined) {
-        commonAttrs.push(`cornerRadius="${mmStr(smtPad.corner_radius)}"`)
-      }
-      if (smtPad.soldermask_margin_left !== undefined) {
-        commonAttrs.push(
-          `solderMaskMarginLeft="${mmStr(smtPad.soldermask_margin_left)}"`,
-        )
-      }
-      if (smtPad.soldermask_margin_top !== undefined) {
-        commonAttrs.push(
-          `solderMaskMarginTop="${mmStr(smtPad.soldermask_margin_top)}"`,
-        )
-      }
-      if (smtPad.soldermask_margin_right !== undefined) {
-        commonAttrs.push(
-          `solderMaskMarginRight="${mmStr(smtPad.soldermask_margin_right)}"`,
-        )
-      }
-      if (smtPad.soldermask_margin_bottom !== undefined) {
-        commonAttrs.push(
-          `solderMaskMarginBottom="${mmStr(smtPad.soldermask_margin_bottom)}"`,
-        )
-      }
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} width="${mmStr(smtPad.width ?? 0)}" height="${mmStr(smtPad.height ?? 0)}" shape="rect" />`,
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs}${formatOptionalMmAttr("rectBorderRadius", smtPad.rect_border_radius)}${formatOptionalMmAttr("cornerRadius", smtPad.corner_radius)}${formatOptionalMmAttr("solderMaskMarginLeft", smtPad.soldermask_margin_left)}${formatOptionalMmAttr("solderMaskMarginTop", smtPad.soldermask_margin_top)}${formatOptionalMmAttr("solderMaskMarginRight", smtPad.soldermask_margin_right)}${formatOptionalMmAttr("solderMaskMarginBottom", smtPad.soldermask_margin_bottom)} width="${mmStr(smtPad.width ?? 0)}" height="${mmStr(smtPad.height ?? 0)}" shape="rect" />`,
       )
     } else if (smtPad.shape === "pill") {
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} width="${mmStr(smtPad.width ?? 0)}" height="${mmStr(smtPad.height ?? 0)}" radius="${mmStr(smtPad.radius ?? 0)}" shape="pill" />`,
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs} width="${mmStr(smtPad.width ?? 0)}" height="${mmStr(smtPad.height ?? 0)}" radius="${mmStr(smtPad.radius ?? 0)}" shape="pill" />`,
+      )
+    } else if (smtPad.shape === "rotated_pill") {
+      elementStrings.push(
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs} width="${mmStr(smtPad.width ?? 0)}" height="${mmStr(smtPad.height ?? 0)}" radius="${mmStr(smtPad.radius ?? 0)}"${formatPcbRotationAttr(smtPad.ccw_rotation)} shape="pill" />`,
       )
     } else if (smtPad.shape === "polygon") {
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} shape="polygon" points={${JSON.stringify(smtPad.points)}} />`,
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs} shape="polygon" points={${JSON.stringify(smtPad.points)}} />`,
       )
     } else if (smtPad.shape === "rotated_rect") {
       const cornerRadius =
         smtPad.corner_radius ?? smtPad.rect_border_radius ?? undefined
 
-      if (cornerRadius !== undefined) {
-        commonAttrs.push(`cornerRadius="${mmStr(cornerRadius)}"`)
-      }
-      if (smtPad.soldermask_margin_left !== undefined) {
-        commonAttrs.push(
-          `solderMaskMarginLeft="${mmStr(smtPad.soldermask_margin_left)}"`,
-        )
-      }
-      if (smtPad.soldermask_margin_top !== undefined) {
-        commonAttrs.push(
-          `solderMaskMarginTop="${mmStr(smtPad.soldermask_margin_top)}"`,
-        )
-      }
-      if (smtPad.soldermask_margin_right !== undefined) {
-        commonAttrs.push(
-          `solderMaskMarginRight="${mmStr(smtPad.soldermask_margin_right)}"`,
-        )
-      }
-      if (smtPad.soldermask_margin_bottom !== undefined) {
-        commonAttrs.push(
-          `solderMaskMarginBottom="${mmStr(smtPad.soldermask_margin_bottom)}"`,
-        )
-      }
       elementStrings.push(
-        `<smtpad ${commonAttrs.join(" ")} width="${mmStr(smtPad.width ?? 0)}" height="${mmStr(smtPad.height ?? 0)}"${formatPcbRotationAttr(smtPad.ccw_rotation)} shape="rotated_rect" />`,
+        `<smtpad ${commonAttrs.join(" ")}${solderMaskAttrs}${formatOptionalMmAttr("cornerRadius", cornerRadius)}${formatOptionalMmAttr("solderMaskMarginLeft", smtPad.soldermask_margin_left)}${formatOptionalMmAttr("solderMaskMarginTop", smtPad.soldermask_margin_top)}${formatOptionalMmAttr("solderMaskMarginRight", smtPad.soldermask_margin_right)}${formatOptionalMmAttr("solderMaskMarginBottom", smtPad.soldermask_margin_bottom)} width="${mmStr(smtPad.width ?? 0)}" height="${mmStr(smtPad.height ?? 0)}"${formatPcbRotationAttr(smtPad.ccw_rotation)} shape="rotated_rect" />`,
       )
     }
   }

package/package.json

@@ -6,9 +6,11 @@
     "./cli": "./dist/cli/main.js"
   },
   "type": "module",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "scripts": {
     "build": "tsup-node lib/index.ts cli/main.ts --format esm --dts",
+    "build:site": "bun build ./site/index.html --outdir site-build",
+    "dev:site": "bun --hot ./site/index.html",
     "test": "bun test",
     "format": "biome format --write .",
     "format:check": "biome format ."
@@ -24,6 +26,8 @@
     "circuit-json": "^0.0.433",
     "circuit-to-svg": "^0.0.353",
     "commander": "^13.1.0",
+    "prettier": "^3.9.5",
+    "shiki": "^4.3.1",
     "tscircuit": "^0.0.1873",
     "tsup": "^8.3.5"
   },

package/site/index.html

@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Circuit JSON → tscircuit</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap"
+  rel="stylesheet"
+/>
+<style>
+  :root {
+    --bg: #f5f7fa;
+    --surface: #ffffff;
+    --surface-alt: #f1f5f9;
+    --border: #e2e8f0;
+    --text: #0f172a;
+    --text-muted: #64748b;
+    --accent: #2563eb;
+    --accent-strong: #1d4ed8;
+    --accent-contrast: #ffffff;
+    --success: #059669;
+    --success-bg: #ecfdf5;
+    --success-border: #a7f3d0;
+    --error: #dc2626;
+    --error-bg: #fef2f2;
+    --error-border: #fecaca;
+    --processing: #d97706;
+    --processing-bg: #fffbeb;
+    --processing-border: #fde68a;
+    --code-bg: #ffffff;
+    --code-header: #f6f8fa;
+    --code-text: #24292f;
+    --code-text-muted: #6e7781;
+    --focus-ring: #2563eb;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    font-family:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      Roboto, sans-serif;
+    color: var(--text);
+    background: var(--bg);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  code {
+    font-family: "Fira Code", ui-monospace, monospace;
+  }
+
+  /* Top bar */
+  .topbar {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 0 20px;
+    height: 56px;
+    border-bottom: 1px solid var(--border);
+    background: var(--surface);
+  }
+
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: none;
+    text-decoration: none;
+  }
+
+  .brand .badge {
+    display: inline-flex;
+    align-items: center;
+    background: var(--accent);
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    padding: 4px 9px;
+    border-radius: 0.4rem;
+  }
+
+  .brand .path {
+    font-family: "Fira Code", ui-monospace, monospace;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .topbar-spacer {
+    flex: 1;
+  }
+
+  .status {
+    display: none;
+    align-items: center;
+    gap: 7px;
+    padding: 5px 12px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    font-size: 12.5px;
+    flex: none;
+    white-space: nowrap;
+  }
+
+  .status.visible {
+    display: flex;
+  }
+
+  .status .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .status.success {
+    background: var(--success-bg);
+    color: var(--success);
+    border-color: var(--success-border);
+  }
+  .status.success .dot {
+    background: var(--success);
+  }
+
+  .status.error {
+    background: var(--error-bg);
+    color: var(--error);
+    border-color: var(--error-border);
+  }
+  .status.error .dot {
+    background: var(--error);
+  }
+
+  .status.processing {
+    background: var(--processing-bg);
+    color: var(--processing);
+    border-color: var(--processing-border);
+  }
+  .status.processing .dot {
+    background: var(--processing);
+    animation: pulse 1.1s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.35;
+    }
+  }
+
+  button {
+    font-family: inherit;
+    border: 1px solid transparent;
+    border-radius: 0.4rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+      transform 0.1s ease,
+      background-color 0.15s ease,
+      border-color 0.15s ease;
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+  }
+
+  .btn-convert {
+    flex: none;
+    padding: 8px 16px;
+    font-size: 13px;
+    background: var(--accent);
+    color: var(--accent-contrast);
+  }
+
+  .btn-convert:hover:not(:disabled) {
+    background: var(--accent-strong);
+  }
+
+  .btn-convert:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+
+  .btn-convert:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .btn-clear {
+    flex: none;
+    padding: 8px 14px;
+    font-size: 13px;
+    background: transparent;
+    color: var(--text-muted);
+    border-color: var(--border);
+  }
+
+  .btn-clear:hover {
+    color: var(--text);
+    border-color: var(--text-muted);
+  }
+
+  /* Split layout */
+  .split {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 380px 1px minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  @media (max-width: 860px) {
+    .split {
+      grid-template-columns: minmax(0, 1fr);
+      grid-auto-rows: min-content minmax(320px, 1fr);
+      overflow-y: auto;
+    }
+    .split-divider {
+      display: none;
+    }
+  }
+
+  .split-divider {
+    background: var(--border);
+  }
+
+  .pane-input {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 20px;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  .pane-output {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    background: var(--code-bg);
+  }
+
+  .upload-area {
+    flex: none;
+    border: 1.5px dashed var(--border);
+    border-radius: 0.5rem;
+    padding: 22px 16px;
+    text-align: center;
+    cursor: pointer;
+    transition:
+      border-color 0.15s ease,
+      background-color 0.15s ease;
+    background: var(--surface-alt);
+  }
+
+  .upload-area:hover,
+  .upload-area:focus-visible {
+    border-color: var(--accent);
+    background: color-mix(in srgb, var(--accent) 6%, var(--surface-alt));
+  }
+
+  .upload-area.dragover {
+    border-color: var(--accent);
+    border-style: solid;
+    background: color-mix(in srgb, var(--accent) 10%, var(--surface-alt));
+  }
+
+  .upload-area:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+  }
+
+  .upload-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .upload-glyph {
+    width: 18px;
+    height: 18px;
+    color: var(--accent);
+    flex: none;
+  }
+
+  .upload-text {
+    font-size: 13.5px;
+    font-weight: 500;
+  }
+
+  .upload-hint {
+    color: var(--text-muted);
+    font-size: 12px;
+    margin-top: 4px;
+    font-family: "Fira Code", ui-monospace, monospace;
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+
+  .divider {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .divider::before,
+  .divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+  }
+
+  .paste-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 100px;
+  }
+
+  .paste-area textarea {
+    flex: 1;
+    width: 100%;
+    resize: none;
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    font-size: 12.5px;
+    font-family: "Fira Code", ui-monospace, monospace;
+    background: var(--surface-alt);
+    color: var(--text);
+    line-height: 1.5;
+  }
+
+  .paste-area textarea:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
+  }
+
+  .paste-area textarea::placeholder {
+    color: var(--text-muted);
+  }
+
+  .file-info {
+    flex: none;
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 9px 12px;
+    background: var(--surface-alt);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    font-family: "Fira Code", ui-monospace, monospace;
+    font-size: 12.5px;
+  }
+
+  .file-info.visible {
+    display: flex;
+  }
+
+  .file-name {
+    color: var(--text);
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-size {
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  /* Output pane */
+  .output-header {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    height: 44px;
+    background: var(--code-header);
+    border-bottom: 1px solid var(--border);
+    font-family: "Fira Code", ui-monospace, monospace;
+    font-size: 12px;
+    color: var(--code-text-muted);
+    gap: 10px;
+  }
+
+  .output-header .output-filename {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .output-header .header-actions {
+    display: flex;
+    gap: 8px;
+    flex: none;
+  }
+
+  .btn-copy,
+  .btn-download {
+    flex: none;
+    background: transparent;
+    border: 1px solid color-mix(in srgb, var(--code-text-muted) 45%, transparent);
+    color: var(--code-text-muted);
+    font-family: "Fira Code", ui-monospace, monospace;
+    font-size: 11.5px;
+    font-weight: 500;
+    padding: 4px 10px;
+    border-radius: 0.35rem;
+  }
+
+  .btn-copy:hover,
+  .btn-download:hover {
+    color: var(--code-text);
+    border-color: var(--code-text-muted);
+  }
+
+  .btn-download:disabled,
+  .btn-copy:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .output-body {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .shiki-container {
+    height: 100%;
+    overflow: auto;
+  }
+
+  .shiki-container .shiki {
+    margin: 0;
+    padding: 14px 0;
+    font-family: "Fira Code", ui-monospace, monospace;
+    font-size: 12.5px;
+    line-height: 1.5;
+    background-color: var(--code-bg) !important;
+  }
+
+  .shiki-container .shiki code {
+    display: block;
+    counter-reset: line;
+  }
+
+  .shiki-container .shiki .line {
+    display: inline-block;
+    min-width: 100%;
+    padding: 0 16px;
+  }
+
+  .shiki-container .shiki .line::before {
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: 1.8rem;
+    margin-right: 14px;
+    text-align: right;
+    color: var(--text-muted);
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  .output-empty {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    color: var(--code-text-muted);
+    text-align: center;
+    padding: 24px;
+  }
+
+  .output-empty svg {
+    width: 26px;
+    height: 26px;
+    opacity: 0.5;
+  }
+
+  .output-empty p {
+    font-size: 13px;
+    max-width: 32ch;
+    line-height: 1.5;
+  }
+
+  .output-body.has-code .output-empty {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.001ms !important;
+      transition-duration: 0.001ms !important;
+    }
+  }
+</style>
+</head>
+<body>
+  <div class="topbar">
+    <a class="brand" href="https://tscircuit.com" target="_blank" rel="noopener">
+      <span class="badge">tscircuit</span>
+      <span class="path">circuit-json &rarr; tsx</span>
+    </a>
+
+    <div class="topbar-spacer"></div>
+
+    <div class="status" id="status" role="status"><span class="dot"></span><span id="statusText"></span></div>
+
+    <button class="btn-convert" id="convertBtn" disabled>Convert</button>
+    <button class="btn-clear" id="clearBtn">Clear</button>
+  </div>
+
+  <div class="split">
+    <div class="pane-input">
+      <div class="upload-area" id="uploadArea" tabindex="0" role="button" aria-label="Upload circuit JSON file">
+        <div class="upload-row">
+          <svg class="upload-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
+            <path d="M7 9l5-5 5 5" />
+            <path d="M12 4v12" />
+          </svg>
+          <span class="upload-text">Drop circuit.json or click to browse</span>
+        </div>
+        <div class="upload-hint">.json</div>
+      </div>
+
+      <input type="file" id="fileInput" accept=".json,application/json" />
+
+      <div class="file-info" id="fileInfo">
+        <span class="file-name" id="fileName"></span>
+        <span class="file-size" id="fileSize"></span>
+      </div>
+
+      <div class="divider">or paste JSON</div>
+
+      <div class="paste-area">
+        <textarea
+          id="pasteArea"
+          placeholder='[{"type": "pcb_board", ...}, ...]'
+          spellcheck="false"
+        ></textarea>
+      </div>
+    </div>
+
+    <div class="split-divider"></div>
+
+    <div class="pane-output">
+      <div class="output-header">
+        <span class="output-filename" id="outputFileName">output.tsx</span>
+        <div class="header-actions">
+          <button class="btn-copy" id="copyBtn" type="button" disabled>Copy</button>
+          <button class="btn-download" id="downloadBtn" type="button" disabled>Download</button>
+        </div>
+      </div>
+      <div class="output-body" id="outputBody">
+        <div class="shiki-container" id="outputCode"></div>
+        <div class="output-empty" id="outputEmpty">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M9 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4" />
+            <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+            <path d="M9 9l3 3-3 3" />
+          </svg>
+          <p>Your generated TSX will appear here after you convert a circuit.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="main.tsx"></script>
+</body>
+</html>

package/site/main.tsx

@@ -0,0 +1,268 @@
+import type { CircuitJson } from "circuit-json"
+import parserEstree from "prettier/plugins/estree"
+import parserTs from "prettier/plugins/typescript"
+import * as prettier from "prettier/standalone"
+import { codeToHtml } from "shiki/bundle/web"
+import { convertCircuitJsonToTscircuit } from "../lib"
+
+async function formatTsx(code: string): Promise<string> {
+  try {
+    return await prettier.format(code, {
+      parser: "typescript",
+      plugins: [parserTs, parserEstree],
+      semi: false,
+      singleQuote: false,
+    })
+  } catch (error) {
+    console.warn("Failed to format generated code:", error)
+    return code
+  }
+}
+
+// Get DOM elements
+const uploadArea = document.getElementById("uploadArea")!
+const fileInput = document.getElementById("fileInput")! as HTMLInputElement
+const fileInfo = document.getElementById("fileInfo")!
+const fileName = document.getElementById("fileName")!
+const fileSize = document.getElementById("fileSize")!
+const convertBtn = document.getElementById("convertBtn")! as HTMLButtonElement
+const clearBtn = document.getElementById("clearBtn")!
+const status = document.getElementById("status")!
+const statusText = document.getElementById("statusText")!
+const outputBody = document.getElementById("outputBody")!
+const outputFileName = document.getElementById("outputFileName")!
+const outputCode = document.getElementById("outputCode")!
+const copyBtn = document.getElementById("copyBtn")! as HTMLButtonElement
+const downloadBtn = document.getElementById("downloadBtn")! as HTMLButtonElement
+const pasteArea = document.getElementById("pasteArea")! as HTMLTextAreaElement
+
+let currentFile: File | null = null
+let circuitJson: CircuitJson | null = null
+let lastOutput: { fileName: string; code: string } | null = null
+
+// Handle click / keyboard activation on upload area
+uploadArea.addEventListener("click", () => {
+  fileInput.click()
+})
+
+uploadArea.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault()
+    fileInput.click()
+  }
+})
+
+// Handle file selection
+fileInput.addEventListener("change", (e) => {
+  const target = e.target as HTMLInputElement
+  if (target.files && target.files.length > 0 && target.files[0]) {
+    handleFile(target.files[0])
+  }
+})
+
+// Handle drag over
+uploadArea.addEventListener("dragover", (e) => {
+  e.preventDefault()
+  uploadArea.classList.add("dragover")
+})
+
+// Handle drag leave
+uploadArea.addEventListener("dragleave", () => {
+  uploadArea.classList.remove("dragover")
+})
+
+// Handle drop
+uploadArea.addEventListener("drop", (e) => {
+  e.preventDefault()
+  uploadArea.classList.remove("dragover")
+
+  if (
+    e.dataTransfer &&
+    e.dataTransfer.files.length > 0 &&
+    e.dataTransfer.files[0]
+  ) {
+    handleFile(e.dataTransfer.files[0])
+  }
+})
+
+function baseNameFromFile(file: File) {
+  return file.name.replace(/\.json$/i, "")
+}
+
+// Handle file
+async function handleFile(file: File) {
+  currentFile = file
+
+  // Show file info
+  fileName.textContent = file.name
+  fileSize.textContent = `${(file.size / 1024).toFixed(2)} KB`
+  fileInfo.classList.add("visible")
+
+  clearOutput()
+
+  // Read and parse the file
+  try {
+    showStatus("Reading file...", "processing")
+    const text = await file.text()
+    circuitJson = JSON.parse(text)
+
+    // Enable convert button
+    convertBtn.disabled = false
+    showStatus("File loaded. Ready to convert.", "success")
+  } catch (error) {
+    showStatus(
+      `Error reading file: ${error instanceof Error ? error.message : String(error)}`,
+      "error",
+    )
+    convertBtn.disabled = true
+    circuitJson = null
+  }
+}
+
+// Handle pasted JSON: parse automatically once the user pastes or leaves the field
+function loadPastedJson() {
+  const text = pasteArea.value.trim()
+
+  currentFile = null
+  fileInput.value = ""
+  fileInfo.classList.remove("visible")
+  clearOutput()
+
+  if (!text) {
+    convertBtn.disabled = true
+    circuitJson = null
+    hideStatus()
+    return
+  }
+
+  try {
+    circuitJson = JSON.parse(text)
+    convertBtn.disabled = false
+    showStatus("Pasted JSON loaded. Ready to convert.", "success")
+  } catch (error) {
+    showStatus(
+      `Error parsing pasted JSON: ${error instanceof Error ? error.message : String(error)}`,
+      "error",
+    )
+    convertBtn.disabled = true
+    circuitJson = null
+  }
+}
+
+pasteArea.addEventListener("paste", () => {
+  // Wait for the pasted text to land in the textarea before reading it
+  setTimeout(loadPastedJson, 0)
+})
+
+pasteArea.addEventListener("blur", loadPastedJson)
+
+// Convert
+convertBtn.addEventListener("click", async () => {
+  if (!circuitJson) return
+
+  try {
+    showStatus("Converting to tscircuit...", "processing")
+    convertBtn.disabled = true
+
+    // Allow UI to update
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    const baseName = currentFile ? baseNameFromFile(currentFile) : "Circuit"
+    const outFileName = `${baseName}.tsx`
+
+    const tsxContent = convertCircuitJsonToTscircuit(circuitJson, {
+      componentName: "Circuit",
+    })
+    const formatted = await formatTsx(tsxContent)
+
+    await setOutput(outFileName, formatted)
+
+    showStatus("Conversion complete.", "success")
+    convertBtn.disabled = false
+  } catch (error) {
+    showStatus(
+      `Error during conversion: ${error instanceof Error ? error.message : String(error)}`,
+      "error",
+    )
+    convertBtn.disabled = false
+    console.error(error)
+  }
+})
+
+// Copy output to clipboard
+copyBtn.addEventListener("click", async () => {
+  if (!lastOutput) return
+  try {
+    await navigator.clipboard.writeText(lastOutput.code)
+    const original = copyBtn.textContent
+    copyBtn.textContent = "Copied"
+    setTimeout(() => {
+      copyBtn.textContent = original
+    }, 1500)
+  } catch (error) {
+    console.error("Failed to copy:", error)
+  }
+})
+
+// Download output as a .tsx file
+downloadBtn.addEventListener("click", () => {
+  if (!lastOutput) return
+  downloadFile(lastOutput.fileName, lastOutput.code)
+})
+
+// Clear button
+clearBtn.addEventListener("click", () => {
+  currentFile = null
+  circuitJson = null
+  fileInput.value = ""
+  pasteArea.value = ""
+  fileInfo.classList.remove("visible")
+  clearOutput()
+  convertBtn.disabled = true
+  hideStatus()
+})
+
+async function setOutput(fileNameStr: string, code: string) {
+  lastOutput = { fileName: fileNameStr, code }
+  outputFileName.textContent = fileNameStr
+  outputCode.innerHTML = await codeToHtml(code, {
+    lang: "tsx",
+    theme: "github-light",
+  })
+  outputBody.classList.add("has-code")
+  copyBtn.disabled = false
+  downloadBtn.disabled = false
+}
+
+function clearOutput() {
+  lastOutput = null
+  outputFileName.textContent = "output.tsx"
+  outputCode.innerHTML = ""
+  outputBody.classList.remove("has-code")
+  copyBtn.disabled = true
+  downloadBtn.disabled = true
+}
+
+// Helper function to download a file
+function downloadFile(filename: string, content: string) {
+  const blob = new Blob([content], { type: "text/plain" })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement("a")
+  a.href = url
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+// Helper function to show status
+function showStatus(message: string, type: "success" | "error" | "processing") {
+  statusText.textContent = message
+  status.className = `status visible ${type}`
+}
+
+// Helper function to hide status
+function hideStatus() {
+  status.classList.remove("visible")
+}

package/tests/__snapshots__/test16-support-pcb-smtpad-shapes-pcb.snap.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" data-software-used-string="@tscircuit/core@0.0.1090"><style></style><rect class="boundary" x="0" y="0" fill="#000" width="800" height="600" data-type="pcb_background" data-pcb-layer="global"/><rect class="pcb-boundary" fill="none" stroke="#fff" stroke-width="0.3" x="127.27272727272725" y="27.272727272727252" width="545.4545454545455" height="545.4545454545455" data-type="pcb_boundary" data-pcb-layer="global"/><path class="pcb-board" d="M 127.27272727272725 572.7272727272727 L 672.7272727272727 572.7272727272727 L 672.7272727272727 27.272727272727252 L 127.27272727272725 27.272727272727252 Z" fill="none" stroke="rgba(255, 255, 255, 0.5)" stroke-width="2.7272727272727275" data-type="pcb_board" data-pcb-layer="board"/><rect class="pcb-pad" fill="rgb(77, 127, 196)" x="-27.272727272727273" y="-8.181818181818182" width="54.54545454545455" height="16.363636363636363" transform="translate(372.72727272727275 354.54545454545456) rotate(-45)" data-type="pcb_smtpad" data-pcb-layer="bottom" rx="4.090909090909091" ry="4.090909090909091"/><rect class="pcb-pad" fill="rgb(77, 127, 196)" x="443.6363636363636" y="328.6363636363636" width="49.09090909090909" height="24.545454545454547" data-type="pcb_smtpad" data-pcb-layer="bottom" rx="5.454545454545455" ry="5.454545454545455"/><rect class="pcb-pad" fill="rgb(77, 127, 196)" x="-27.272727272727273" y="-8.181818181818182" width="54.54545454545455" height="16.363636363636363" transform="translate(372.72727272727275 354.54545454545456) rotate(-45)" data-type="pcb_smtpad" data-pcb-layer="bottom" rx="4.090909090909091" ry="4.090909090909091"/><rect class="pcb-pad" fill="rgb(77, 127, 196)" x="443.6363636363636" y="328.6363636363636" width="49.09090909090909" height="24.545454545454547" data-type="pcb_smtpad" data-pcb-layer="bottom" rx="5.454545454545455" ry="5.454545454545455"/><rect class="pcb-pad" fill="rgb(200, 52, 52)" x="406.8181818181818" y="234.54545454545453" width="40.90909090909091" height="21.81818181818182" rx="10.90909090909091" ry="10.90909090909091" data-type="pcb_smtpad" data-pcb-layer="top"/><polygon class="pcb-pad" fill="rgb(200, 52, 52)" points="400,300 427.27272727272725,300 413.6363636363636,272.72727272727275" data-type="pcb_smtpad" data-pcb-layer="top"/><rect class="pcb-pad" fill="rgb(200, 52, 52)" x="406.8181818181818" y="234.54545454545453" width="40.90909090909091" height="21.81818181818182" rx="10.90909090909091" ry="10.90909090909091" data-type="pcb_smtpad" data-pcb-layer="top"/><polygon class="pcb-pad" fill="rgb(200, 52, 52)" points="400,300 427.27272727272725,300 413.6363636363636,272.72727272727275" data-type="pcb_smtpad" data-pcb-layer="top"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" data-software-used-string="@tscircuit/core@0.0.1322"><style></style><rect class="boundary" x="0" y="0" fill="#000" width="800" height="600" data-type="pcb_background" data-pcb-layer="global"/><rect class="pcb-boundary" fill="none" stroke="#fff" stroke-width="0.3" x="127.27272727272725" y="27.272727272727252" width="545.4545454545455" height="545.4545454545455" data-type="pcb_boundary" data-pcb-layer="global"/><path class="pcb-board" d="M 127.27272727272725 572.7272727272727 L 672.7272727272727 572.7272727272727 L 672.7272727272727 27.272727272727252 L 127.27272727272725 27.272727272727252 Z" fill="none" stroke="rgba(255, 255, 255, 0.5)" stroke-width="2.7272727272727275" data-type="pcb_board" data-pcb-layer="board"/><rect class="pcb-pad" fill="rgb(77, 127, 196)" x="-27.272727272727273" y="-8.181818181818182" width="54.54545454545455" height="16.363636363636363" transform="translate(372.72727272727275 354.54545454545456) rotate(-45)" data-type="pcb_smtpad" data-pcb-layer="bottom" rx="4.090909090909091" ry="4.090909090909091"/><rect class="pcb-pad" fill="rgb(77, 127, 196)" x="443.6363636363636" y="328.6363636363636" width="49.09090909090909" height="24.545454545454547" data-type="pcb_smtpad" data-pcb-layer="bottom" rx="5.454545454545455" ry="5.454545454545455"/><rect class="pcb-pad" fill="rgb(77, 127, 196)" x="-27.272727272727273" y="-8.181818181818182" width="54.54545454545455" height="16.363636363636363" transform="translate(372.72727272727275 354.54545454545456) rotate(-45)" data-type="pcb_smtpad" data-pcb-layer="bottom" rx="4.090909090909091" ry="4.090909090909091"/><rect class="pcb-pad" fill="rgb(77, 127, 196)" x="443.6363636363636" y="328.6363636363636" width="49.09090909090909" height="24.545454545454547" data-type="pcb_smtpad" data-pcb-layer="bottom" rx="5.454545454545455" ry="5.454545454545455"/><rect class="pcb-pad" fill="rgb(200, 52, 52)" x="406.8181818181818" y="234.54545454545453" width="40.90909090909091" height="21.81818181818182" rx="10.90909090909091" ry="10.90909090909091" data-type="pcb_smtpad" data-pcb-layer="top"/><polygon class="pcb-pad" fill="rgb(200, 52, 52)" points="400,300 427.27272727272725,300 413.6363636363636,272.72727272727275" data-type="pcb_smtpad" data-pcb-layer="top"/><rect class="pcb-pad" fill="rgb(200, 52, 52)" x="-30.000000000000004" y="-12.272727272727273" width="60.00000000000001" height="24.545454545454547" rx="12.272727272727273" ry="12.272727272727273" data-type="pcb_smtpad" data-pcb-layer="top" transform="translate(334.54545454545456 256.3636363636364) rotate(-30)"/><rect class="pcb-pad" fill="rgb(200, 52, 52)" x="406.8181818181818" y="234.54545454545453" width="40.90909090909091" height="21.81818181818182" rx="10.90909090909091" ry="10.90909090909091" data-type="pcb_smtpad" data-pcb-layer="top"/><polygon class="pcb-pad" fill="rgb(200, 52, 52)" points="400,300 427.27272727272725,300 413.6363636363636,272.72727272727275" data-type="pcb_smtpad" data-pcb-layer="top"/><rect class="pcb-pad" fill="rgb(200, 52, 52)" x="-30.000000000000004" y="-12.272727272727273" width="60.00000000000001" height="24.545454545454547" rx="12.272727272727273" ry="12.272727272727273" data-type="pcb_smtpad" data-pcb-layer="top" transform="translate(334.54545454545456 256.3636363636364) rotate(-30)"/></svg>

package/tests/test16-support-pcb-smtpad-shapes.test.tsx

@@ -18,6 +18,7 @@ test("test16 support pcb smtpad shapes", async () => {
     <smtpad portHints={["2"]} layer="top" coveredWithSolderMask={true} solderMaskMargin="0.06mm" shape="polygon" points={[{"x":0,"y":0},{"x":1,"y":0},{"x":0.5,"y":1}]} />
     <smtpad portHints={["3"]} pcbX="-1mm" pcbY="-2mm" layer="bottom" coveredWithSolderMask={true} solderMaskMargin="0.04mm" cornerRadius="0.15mm" solderMaskMarginLeft="0.01mm" solderMaskMarginTop="0.02mm" solderMaskMarginRight="0.03mm" solderMaskMarginBottom="0.05mm" width="2mm" height="0.6mm" pcbRotation="45deg" shape="rotated_rect" />
     <smtpad portHints={["4"]} pcbX="2.5mm" pcbY="-1.5mm" layer="bottom" coveredWithSolderMask={true} solderMaskMargin="0.05mm" rectBorderRadius="0.25mm" cornerRadius="0.2mm" solderMaskMarginLeft="0.11mm" solderMaskMarginTop="0.12mm" solderMaskMarginRight="0.13mm" solderMaskMarginBottom="0.14mm" width="1.8mm" height="0.9mm" shape="rect" />
+    <smtpad portHints={["5"]} pcbX="-2.4mm" pcbY="1.6mm" layer="top" coveredWithSolderMask={true} solderMaskMargin="0.07mm" width="2.2mm" height="0.9mm" radius="0.45mm" pcbRotation="30deg" shape="pill" />
           </footprint>}
         {...props}
       />
@@ -25,6 +26,7 @@ test("test16 support pcb smtpad shapes", async () => {
   `)
   expect(tscircuit).toContain(`pcbRotation="45deg"`)
   expect(tscircuit).toContain(`shape="rotated_rect"`)
+  expect(tscircuit).toContain(`pcbRotation="30deg"`)
 
   // The generator emits pcbRotation for consistency, but the current smtpad
   // runtime still expects ccwRotation for rotated_rect pads.
@@ -47,7 +49,7 @@ circuit.add(
     (elm): elm is PcbSmtPad => elm.type === "pcb_smtpad",
   )
 
-  expect(renderedSmtPads).toHaveLength(8)
+  expect(renderedSmtPads).toHaveLength(10)
   expect(renderedSmtPads).toEqual(
     expect.arrayContaining([
       expect.objectContaining({
@@ -66,6 +68,17 @@ circuit.add(
         is_covered_with_solder_mask: true,
         soldermask_margin: 0.05,
       }),
+      expect.objectContaining({
+        port_hints: ["5"],
+        layer: "top",
+        shape: "rotated_pill",
+        ccw_rotation: 30,
+        radius: 0.45,
+        width: 2.2,
+        height: 0.9,
+        is_covered_with_solder_mask: true,
+        soldermask_margin: 0.07,
+      }),
     ]),
   )
 
@@ -167,4 +180,20 @@ const circuitJson: any = [
     soldermask_margin_bottom: 0.14,
     port_hints: ["4"],
   },
+  {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "rotated_pill_pad",
+    pcb_component_id: "pcb_generic_component_0",
+    shape: "rotated_pill",
+    x: -2.4,
+    y: 1.6,
+    width: 2.2,
+    height: 0.9,
+    radius: 0.45,
+    ccw_rotation: 30,
+    layer: "top",
+    is_covered_with_solder_mask: true,
+    soldermask_margin: 0.07,
+    port_hints: ["5"],
+  },
 ]