@tscircuit/cli 0.1.126 → 0.1.127

package/README.md

@@ -54,7 +54,8 @@ Commands:
   add <component>            Add a tscircuit component package to your project
   remove <component>         Remove a tscircuit component package from your
                              project
-  snapshot [options]         Generate schematic and PCB snapshots
+  snapshot [options]         Generate schematic and PCB snapshots (add --3d for
+                             3d preview)
   setup                      Setup utilities like GitHub Actions
   upgrade                    Upgrade CLI to the latest version
   search <query>             Search for packages in the tscircuit registry

package/dist/main.js

@@ -441906,7 +441906,7 @@ var getGlobalDepsInstallCommand = (packageManager, deps) => {
 import { execSync as execSync2 } from "node:child_process";
 var import_semver2 = __toESM2(require_semver2(), 1);
 // package.json
-var version = "0.1.125";
+var version = "0.1.126";
 var package_default = {
   name: "@tscircuit/cli",
   version,
@@ -441951,7 +441951,9 @@ var package_default = {
     tempy: "^3.1.0",
     tscircuit: "^0.0.491",
     "@tscircuit/circuit-json-util": "^0.0.47",
-    "typed-ky": "^0.0.4"
+    "typed-ky": "^0.0.4",
+    "circuit-json-to-simple-3d": "^0.0.3",
+    "@tscircuit/simple-3d-svg": "^0.0.10"
   },
   peerDependencies: {
     typescript: "^5.0.0"
@@ -495782,9 +495784,648 @@ var registerBuild = (program3) => {
 import fs24 from "node:fs";
 import path24 from "node:path";
 init_dist6();
+
+// node_modules/circuit-json-to-simple-3d/dist/index.js
+init_dist4();
+
+// node_modules/@tscircuit/simple-3d-svg/dist/index.js
+var stlCache = /* @__PURE__ */ new Map;
+async function loadSTL(url) {
+  if (stlCache.has(url)) {
+    return stlCache.get(url);
+  }
+  const response = await fetch(url);
+  const buffer = await response.arrayBuffer();
+  const mesh = parseSTL(buffer);
+  stlCache.set(url, mesh);
+  return mesh;
+}
+function parseSTL(buffer) {
+  const view = new DataView(buffer);
+  const header = new TextDecoder().decode(buffer.slice(0, 5));
+  if (header.toLowerCase() === "solid") {
+    return parseASCIISTL(buffer);
+  } else {
+    return parseBinarySTL(view);
+  }
+}
+function parseASCIISTL(buffer) {
+  const text = new TextDecoder().decode(buffer);
+  const lines = text.split(`
+`).map((line) => line.trim());
+  const triangles = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line && line.startsWith("facet normal")) {
+      const normalMatch = line.match(/facet normal\s+([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)\s+([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)\s+([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)/);
+      const normal = normalMatch ? {
+        x: parseFloat(normalMatch[1]),
+        y: parseFloat(normalMatch[2]),
+        z: parseFloat(normalMatch[3])
+      } : { x: 0, y: 0, z: 1 };
+      i++;
+      const vertices = [];
+      while (i < lines.length && lines[i] && !lines[i].startsWith("endfacet")) {
+        const vertexLine = lines[i];
+        if (vertexLine.startsWith("vertex")) {
+          const vertexMatch = vertexLine.match(/vertex\s+([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)\s+([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)\s+([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)/);
+          if (vertexMatch) {
+            vertices.push({
+              x: parseFloat(vertexMatch[1]),
+              y: parseFloat(vertexMatch[2]),
+              z: parseFloat(vertexMatch[3])
+            });
+          }
+        }
+        i++;
+      }
+      if (vertices.length === 3) {
+        triangles.push({
+          vertices: [vertices[0], vertices[1], vertices[2]],
+          normal
+        });
+      }
+    }
+    i++;
+  }
+  return {
+    triangles,
+    boundingBox: calculateBoundingBox(triangles)
+  };
+}
+function parseBinarySTL(view) {
+  let offset = 80;
+  const numTriangles = view.getUint32(offset, true);
+  offset += 4;
+  const triangles = [];
+  for (let i = 0;i < numTriangles; i++) {
+    const normal = {
+      x: view.getFloat32(offset, true),
+      y: view.getFloat32(offset + 4, true),
+      z: view.getFloat32(offset + 8, true)
+    };
+    offset += 12;
+    const vertices = [
+      {
+        x: view.getFloat32(offset, true),
+        y: view.getFloat32(offset + 4, true),
+        z: view.getFloat32(offset + 8, true)
+      },
+      {
+        x: view.getFloat32(offset + 12, true),
+        y: view.getFloat32(offset + 16, true),
+        z: view.getFloat32(offset + 20, true)
+      },
+      {
+        x: view.getFloat32(offset + 24, true),
+        y: view.getFloat32(offset + 28, true),
+        z: view.getFloat32(offset + 32, true)
+      }
+    ];
+    offset += 36;
+    offset += 2;
+    triangles.push({ vertices, normal });
+  }
+  return {
+    triangles,
+    boundingBox: calculateBoundingBox(triangles)
+  };
+}
+function calculateBoundingBox(triangles) {
+  if (triangles.length === 0) {
+    return {
+      min: { x: 0, y: 0, z: 0 },
+      max: { x: 0, y: 0, z: 0 }
+    };
+  }
+  let minX = Infinity, minY = Infinity, minZ = Infinity;
+  let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+  for (const triangle of triangles) {
+    for (const vertex of triangle.vertices) {
+      minX = Math.min(minX, vertex.x);
+      minY = Math.min(minY, vertex.y);
+      minZ = Math.min(minZ, vertex.z);
+      maxX = Math.max(maxX, vertex.x);
+      maxY = Math.max(maxY, vertex.y);
+      maxZ = Math.max(maxZ, vertex.z);
+    }
+  }
+  return {
+    min: { x: minX, y: minY, z: minZ },
+    max: { x: maxX, y: maxY, z: maxZ }
+  };
+}
+function colorToCss(c) {
+  return typeof c === "string" ? c : `rgba(${c[0]},${c[1]},${c[2]},${c[3]})`;
+}
+function add(a, b) {
+  return { x: a.x + b.x, y: a.y + b.y, z: a.z + b.z };
+}
+function sub(a, b) {
+  return { x: a.x - b.x, y: a.y - b.y, z: a.z - b.z };
+}
+function dot(a, b) {
+  return a.x * b.x + a.y * b.y + a.z * b.z;
+}
+function cross3(a, b) {
+  return {
+    x: a.y * b.z - a.z * b.y,
+    y: a.z * b.x - a.x * b.z,
+    z: a.x * b.y - a.y * b.x
+  };
+}
+function scale9(v, k) {
+  return { x: v.x * k, y: v.y * k, z: v.z * k };
+}
+function len(v) {
+  return Math.sqrt(dot(v, v));
+}
+function norm(v) {
+  const l = len(v) || 1;
+  return scale9(v, 1 / l);
+}
+function rotLocal(p, r = { x: 0, y: 0, z: 0 }) {
+  let { x, y, z: z3 } = p;
+  if (r.x) {
+    const c = Math.cos(r.x);
+    const s = Math.sin(r.x);
+    const y2 = y * c - z3 * s;
+    z3 = y * s + z3 * c;
+    y = y2;
+  }
+  if (r.y) {
+    const c = Math.cos(r.y);
+    const s = Math.sin(r.y);
+    const x2 = x * c + z3 * s;
+    z3 = -x * s + z3 * c;
+    x = x2;
+  }
+  if (r.z) {
+    const c = Math.cos(r.z);
+    const s = Math.sin(r.z);
+    const x2 = x * c - y * s;
+    y = x * s + y * c;
+    x = x2;
+  }
+  return { x, y, z: z3 };
+}
+var W_DEF = 400;
+var H_DEF = 400;
+var FOCAL = 2;
+function axes(cam) {
+  const f = norm(sub(cam.lookAt, cam.position));
+  const wUp = { x: 0, y: 1, z: 0 };
+  let r = norm(cross3(f, wUp));
+  if (!len(r))
+    r = { x: 1, y: 0, z: 0 };
+  const u = cross3(r, f);
+  return { r, u, f };
+}
+function toCam(p, cam) {
+  const { r, u, f } = axes(cam);
+  const d = sub(p, cam.position);
+  return { x: dot(d, r), y: dot(d, u), z: dot(d, f) };
+}
+function proj(p, w, h, focal) {
+  if (p.z <= 0)
+    return null;
+  const s = focal / p.z;
+  return { x: p.x * s * w / 2, y: -p.y * s * h / 2, z: p.z };
+}
+var FACES = [
+  [0, 1, 2, 3],
+  [4, 5, 6, 7],
+  [0, 1, 5, 4],
+  [3, 2, 6, 7],
+  [1, 2, 6, 5],
+  [0, 3, 7, 4]
+];
+var TOP = [3, 2, 6, 7];
+function verts(b) {
+  const {
+    size: { x: sx, y: sy, z: sz },
+    center,
+    rotation: rotation4
+  } = b;
+  const offs = [
+    { x: -sx / 2, y: -sy / 2, z: -sz / 2 },
+    { x: sx / 2, y: -sy / 2, z: -sz / 2 },
+    { x: sx / 2, y: sy / 2, z: -sz / 2 },
+    { x: -sx / 2, y: sy / 2, z: -sz / 2 },
+    { x: -sx / 2, y: -sy / 2, z: sz / 2 },
+    { x: sx / 2, y: -sy / 2, z: sz / 2 },
+    { x: sx / 2, y: sy / 2, z: sz / 2 },
+    { x: -sx / 2, y: sy / 2, z: sz / 2 }
+  ];
+  return offs.map((o) => add(center, rotLocal(o, rotation4)));
+}
+function inv3(m2) {
+  const a = m2[0][0], d = m2[0][1], g = m2[0][2];
+  const b = m2[1][0], e = m2[1][1], h = m2[1][2];
+  const c = m2[2][0], f = m2[2][1], i = m2[2][2];
+  const A = e * i - f * h;
+  const B = -(d * i - f * g);
+  const C = d * h - e * g;
+  const D = -(b * i - c * h);
+  const E = a * i - c * g;
+  const F = -(a * h - b * g);
+  const G = b * f - c * e;
+  const H = -(a * f - c * d);
+  const I = a * e - b * d;
+  const det = a * A + d * D + g * G;
+  const invDet = det ? 1 / det : 0;
+  return [
+    [A * invDet, B * invDet, C * invDet],
+    [D * invDet, E * invDet, F * invDet],
+    [G * invDet, H * invDet, I * invDet]
+  ];
+}
+function mul3(a, b) {
+  const r = [
+    [0, 0, 0],
+    [0, 0, 0],
+    [0, 0, 0]
+  ];
+  for (let i = 0;i < 3; i++) {
+    for (let j = 0;j < 3; j++) {
+      r[i][j] = a[i][0] * b[0][j] + a[i][1] * b[1][j] + a[i][2] * b[2][j];
+    }
+  }
+  return r;
+}
+function affineMatrix(src, dst) {
+  const S = [
+    [src[0].x, src[1].x, src[2].x],
+    [src[0].y, src[1].y, src[2].y],
+    [1, 1, 1]
+  ];
+  const D = [
+    [dst[0].x, dst[1].x, dst[2].x],
+    [dst[0].y, dst[1].y, dst[2].y],
+    [1, 1, 1]
+  ];
+  const M = mul3(D, inv3(S));
+  return `matrix(${M[0][0]} ${M[1][0]} ${M[0][1]} ${M[1][1]} ${M[0][2]} ${M[1][2]})`;
+}
+function scaleAndPositionMesh(mesh, box) {
+  const { boundingBox } = mesh;
+  const meshSize = sub(boundingBox.max, boundingBox.min);
+  const boxSize = box.size;
+  const scaleX = boxSize.x / meshSize.x;
+  const scaleY = boxSize.y / meshSize.y;
+  const scaleZ = boxSize.z / meshSize.z;
+  const uniformScale = Math.min(scaleX, scaleY, scaleZ);
+  const meshCenter = scale9(add(boundingBox.min, boundingBox.max), 0.5);
+  const transformedVertices = [];
+  for (const triangle of mesh.triangles) {
+    for (const vertex of triangle.vertices) {
+      let transformed = sub(vertex, meshCenter);
+      transformed = scale9(transformed, uniformScale);
+      if (box.stlRotation) {
+        transformed = rotLocal(transformed, box.stlRotation);
+      }
+      if (box.stlPosition) {
+        transformed = add(transformed, box.stlPosition);
+      }
+      if (box.rotation) {
+        transformed = rotLocal(transformed, box.rotation);
+      }
+      transformed = add(transformed, box.center);
+      transformedVertices.push(transformed);
+    }
+  }
+  return transformedVertices;
+}
+async function renderScene(scene, opt = {}) {
+  const W = opt.width ?? W_DEF;
+  const H = opt.height ?? H_DEF;
+  const focal = scene.camera.focalLength ?? FOCAL;
+  const faces = [];
+  const images = [];
+  const labels = [];
+  let clipSeq = 0;
+  const texId = /* @__PURE__ */ new Map;
+  const stlMeshes = /* @__PURE__ */ new Map;
+  for (const box of scene.boxes) {
+    if (box.stlUrl && !stlMeshes.has(box.stlUrl)) {
+      try {
+        const mesh = await loadSTL(box.stlUrl);
+        stlMeshes.set(box.stlUrl, mesh);
+      } catch (error) {
+        console.warn(`Failed to load STL from ${box.stlUrl}:`, error);
+      }
+    }
+  }
+  for (const box of scene.boxes) {
+    if (box.stlUrl && stlMeshes.has(box.stlUrl)) {
+      const mesh = stlMeshes.get(box.stlUrl);
+      const transformedVertices = scaleAndPositionMesh(mesh, box);
+      for (let i = 0;i < mesh.triangles.length; i++) {
+        const triangle = mesh.triangles[i];
+        const vertexStart = i * 3;
+        const v0w = transformedVertices[vertexStart];
+        const v1w = transformedVertices[vertexStart + 1];
+        const v2w = transformedVertices[vertexStart + 2];
+        const v0c = toCam(v0w, scene.camera);
+        const v1c = toCam(v1w, scene.camera);
+        const v2c = toCam(v2w, scene.camera);
+        const v0p = proj(v0c, W, H, focal);
+        const v1p = proj(v1c, W, H, focal);
+        const v2p = proj(v2c, W, H, focal);
+        if (v0p && v1p && v2p) {
+          const edge1 = sub(v1c, v0c);
+          const edge2 = sub(v2c, v0c);
+          const faceNormal = cross3(edge1, edge2);
+          if (faceNormal.z < 0) {
+            const depth = Math.max(v0c.z, v1c.z, v2c.z);
+            faces.push({
+              pts: [v0p, v1p, v2p],
+              depth,
+              fill: colorToCss(box.color)
+            });
+          }
+        }
+      }
+    } else {
+      const vw = verts(box);
+      const vc = vw.map((v) => toCam(v, scene.camera));
+      const vp = vc.map((v) => proj(v, W, H, focal));
+      for (const idx of FACES) {
+        const p4 = [];
+        let zMax = -Infinity;
+        let behind = false;
+        for (const i of idx) {
+          const p = vp[i];
+          if (!p) {
+            behind = true;
+            break;
+          }
+          p4.push(p);
+          zMax = Math.max(zMax, vc[i].z);
+        }
+        if (behind)
+          continue;
+        const [a, b, c] = idx;
+        const n2 = cross3(sub(vc[b], vc[a]), sub(vc[c], vc[a]));
+        if (n2.z >= 0)
+          continue;
+        faces.push({
+          pts: p4,
+          depth: zMax,
+          fill: colorToCss(box.color)
+        });
+      }
+      if (box.faceImages?.top) {
+        const pts = TOP.map((i) => vp[i]);
+        if (pts.every(Boolean)) {
+          const dst = pts;
+          const cz = Math.max(...TOP.map((i) => vc[i].z));
+          const href = box.faceImages.top;
+          if (!texId.has(href)) {
+            texId.set(href, `tex${texId.size}`);
+          }
+          const sym = texId.get(href);
+          const subdivisions = box.projectionSubdivision ?? 2;
+          const quadsPerSide = subdivisions;
+          for (let row = 0;row < quadsPerSide; row++) {
+            for (let col = 0;col < quadsPerSide; col++) {
+              const u0 = col / quadsPerSide;
+              const u1 = (col + 1) / quadsPerSide;
+              const v0 = row / quadsPerSide;
+              const v1 = (row + 1) / quadsPerSide;
+              const lerp = (a, b, t2) => ({
+                x: a.x * (1 - t2) + b.x * t2,
+                y: a.y * (1 - t2) + b.y * t2,
+                z: a.z * (1 - t2) + b.z * t2
+              });
+              const p00 = lerp(lerp(dst[0], dst[1], u0), lerp(dst[3], dst[2], u0), v0);
+              const p10 = lerp(lerp(dst[0], dst[1], u1), lerp(dst[3], dst[2], u1), v0);
+              const p01 = lerp(lerp(dst[0], dst[1], u0), lerp(dst[3], dst[2], u0), v1);
+              const p11 = lerp(lerp(dst[0], dst[1], u1), lerp(dst[3], dst[2], u1), v1);
+              const tri0Mat = affineMatrix([
+                { x: u0, y: v0 },
+                { x: u1, y: v0 },
+                { x: u1, y: v1 }
+              ], [p00, p10, p11]);
+              const id0 = `clip${clipSeq++}`;
+              images.push({
+                matrix: tri0Mat,
+                depth: cz,
+                href,
+                clip: id0,
+                points: `${u0},${v0} ${u1},${v0} ${u1},${v1}`,
+                sym
+              });
+              const tri1Mat = affineMatrix([
+                { x: u0, y: v0 },
+                { x: u1, y: v1 },
+                { x: u0, y: v1 }
+              ], [p00, p11, p01]);
+              const id1 = `clip${clipSeq++}`;
+              images.push({
+                matrix: tri1Mat,
+                depth: cz,
+                href,
+                clip: id1,
+                points: `${u0},${v0} ${u1},${v1} ${u0},${v1}`,
+                sym
+              });
+            }
+          }
+        }
+      }
+      if (box.topLabel) {
+        const pts = TOP.map((i) => vp[i]);
+        if (pts.every(Boolean)) {
+          const p0 = pts[0];
+          const p1 = pts[1];
+          const p3 = pts[3];
+          const u = sub(p1, p0);
+          const v = sub(p3, p0);
+          const lu = len(u);
+          const lv = len(v);
+          if (lu && lv) {
+            const uN = scale9(u, 1 / lu);
+            const vN = scale9(v, 1 / lv);
+            const cx = pts.reduce((s, p) => s + p.x, 0) / 4;
+            const cy = pts.reduce((s, p) => s + p.y, 0) / 4;
+            const cz = Math.max(...TOP.map((i) => vc[i].z));
+            const m2 = `matrix(${uN.x} ${uN.y} ${vN.x} ${vN.y} ${cx} ${cy})`;
+            const fillCol = box.topLabelColor ?? [0, 0, 0, 1];
+            labels.push({
+              matrix: m2,
+              depth: cz,
+              text: box.topLabel,
+              fill: colorToCss(fillCol)
+            });
+          }
+        }
+      }
+    }
+  }
+  const allElements = [
+    ...faces.map((f) => ({ type: "face", data: f })),
+    ...images.map((i) => ({ type: "image", data: i })),
+    ...labels.map((l) => ({ type: "label", data: l }))
+  ];
+  allElements.sort((a, b) => b.data.depth - a.data.depth);
+  const out = [];
+  out.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="${-W / 2} ${-H / 2} ${W} ${H}">`);
+  if (opt.backgroundColor) {
+    out.push(`  <rect x="${-W / 2}" y="${-H / 2}" width="${W}" height="${H}" fill="${colorToCss(opt.backgroundColor)}" />
+`);
+  }
+  if (images.length) {
+    out.push(`  <defs>
+`);
+    for (const [href, id] of texId) {
+      out.push(`    <image id="${id}" href="${href}" width="1" height="1" preserveAspectRatio="none" style="image-rendering:pixelated"/>
+`);
+    }
+    for (const img of images) {
+      out.push(`    <clipPath id="${img.clip}" clipPathUnits="objectBoundingBox"><polygon points="${img.points}" /></clipPath>
+`);
+    }
+    out.push(`  </defs>
+`);
+  }
+  let inStrokeGroup = false;
+  for (const element of allElements) {
+    if (element.type === "face" || element.type === "image") {
+      if (!inStrokeGroup) {
+        out.push(`  <g stroke="#000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+`);
+        inStrokeGroup = true;
+      }
+      if (element.type === "face") {
+        const f = element.data;
+        out.push(`    <polygon fill="${f.fill}" points="${f.pts.map((p) => `${p.x},${p.y}`).join(" ")}" />
+`);
+      } else {
+        const img = element.data;
+        out.push(`    <g transform="${img.matrix}" clip-path="url(#${img.clip})"><use href="#${img.sym}"/></g>
+`);
+      }
+    } else if (element.type === "label") {
+      if (inStrokeGroup) {
+        out.push(`  </g>
+`);
+        inStrokeGroup = false;
+      }
+      const l = element.data;
+      out.push(`  <g font-family="sans-serif" font-size="14" text-anchor="middle" dominant-baseline="central" transform="${l.matrix}"><text x="0" y="0" fill="${l.fill}">${l.text}</text></g>
+`);
+    }
+  }
+  if (inStrokeGroup) {
+    out.push(`  </g>
+`);
+  }
+  out.push("</svg>");
+  return out.join("");
+}
+
+// node_modules/circuit-json-to-simple-3d/dist/index.js
+init_dist6();
+function getDefaultCameraForPcbBoard(pcbBoard, anglePreset = "angle1") {
+  const w = pcbBoard.width;
+  const h = pcbBoard.height;
+  const cx = pcbBoard.center?.x;
+  const cz = pcbBoard.center?.y;
+  const dist = Math.max(w, h) * 1.5;
+  let position4;
+  if (anglePreset === "angle1") {
+    position4 = { x: cx - dist, y: dist, z: cz - dist };
+  } else if (anglePreset === "angle2") {
+    position4 = { x: cx + dist, y: dist, z: cz - dist };
+  } else if (anglePreset === "left") {
+    position4 = { x: cx - dist, y: 0, z: 0 };
+  } else if (anglePreset === "right") {
+    position4 = { x: cx + dist, y: 0, z: 0 };
+  } else if (anglePreset === "left-raised") {
+    position4 = { x: cx - dist, y: dist, z: 0 };
+  } else if (anglePreset === "right-raised") {
+    position4 = { x: cx + dist, y: dist, z: 0 };
+  } else {
+    throw new Error(`Unknown angle preset: ${anglePreset}`);
+  }
+  return {
+    position: position4,
+    lookAt: { x: cx, y: 0, z: cz },
+    focalLength: 2
+  };
+}
+async function convertCircuitJsonToSimple3dSvg(circuitJson, opts = {}) {
+  const db = cju_default(circuitJson);
+  const boxes = [];
+  const pcbTopSvg = convertCircuitJsonToPcbSvg(circuitJson, {
+    layer: "top",
+    matchBoardAspectRatio: true,
+    backgroundColor: "transparent",
+    drawPaddingOutsideBoard: false,
+    colorOverrides: {
+      copper: {
+        top: "#ffe066",
+        bottom: "#ffe066"
+      },
+      drill: "rgba(0,0,0,0.5)"
+    }
+  }).replace("<svg", "<svg transform='scale(1, -1)'");
+  const pcbBoard = db.pcb_board.list()[0];
+  if (!pcbBoard)
+    throw new Error("No pcb_board, can't render to 3d");
+  const camera = opts.camera ?? getDefaultCameraForPcbBoard(pcbBoard, opts.anglePreset ?? "angle1");
+  if (!camera.focalLength) {
+    camera.focalLength = 1;
+  }
+  boxes.push({
+    center: {
+      x: pcbBoard.center.x,
+      y: 0,
+      z: pcbBoard.center.y
+    },
+    size: {
+      x: pcbBoard.width,
+      y: pcbBoard.thickness,
+      z: pcbBoard.height
+    },
+    faceImages: {
+      top: `data:image/svg+xml;base64,${btoa(pcbTopSvg)}`
+    },
+    projectionSubdivision: 10,
+    color: "rgba(0,140,0,0.8)"
+  });
+  const DEFAULT_COMP_HEIGHT = 2;
+  for (const comp of db.pcb_component.list()) {
+    const sourceComponent = db.source_component.get(comp.source_component_id);
+    const compHeight = Math.min(Math.min(comp.width, comp.height), DEFAULT_COMP_HEIGHT);
+    boxes.push({
+      center: {
+        x: comp.center.x,
+        y: pcbBoard.thickness / 2 + compHeight / 2,
+        z: comp.center.y
+      },
+      size: {
+        x: comp.width,
+        y: compHeight,
+        z: comp.height
+      },
+      color: "rgba(128,128,128,0.5)",
+      topLabel: sourceComponent?.name ?? "?",
+      topLabelColor: "white"
+    });
+  }
+  return await renderScene({ boxes, camera }, {
+    backgroundColor: "lightgray"
+  });
+}
+
+// lib/shared/snapshot-project.ts
 var snapshotProject = async ({
   update = false,
   ignored = [],
+  threeD = false,
   onExit = (code) => process.exit(code),
   onError = (msg) => console.error(msg),
   onSuccess = (msg) => console.log(msg)
@@ -495811,13 +496452,18 @@ var snapshotProject = async ({
     const { circuitJson } = await generateCircuitJson({ filePath: file });
     const pcbSvg = convertCircuitJsonToPcbSvg(circuitJson);
     const schSvg = convertCircuitJsonToSchematicSvg(circuitJson);
+    const svg3d = threeD ? await convertCircuitJsonToSimple3dSvg(circuitJson) : null;
     const snapDir = path24.join(path24.dirname(file), "__snapshots__");
     fs24.mkdirSync(snapDir, { recursive: true });
     const base = path24.basename(file).replace(/\.tsx$/, "");
-    for (const [type, svg] of [
+    const snapshotPairs = [
       ["pcb", pcbSvg],
       ["schematic", schSvg]
-    ]) {
+    ];
+    if (threeD && svg3d) {
+      snapshotPairs.push(["3d", svg3d]);
+    }
+    for (const [type, svg] of snapshotPairs) {
       const snapPath = path24.join(snapDir, `${base}-${type}.snap.svg`);
       if (update || !fs24.existsSync(snapPath)) {
         fs24.writeFileSync(snapPath, svg);
@@ -495844,9 +496490,10 @@ ${mismatches.join(`
 
 // cli/snapshot/register.ts
 var registerSnapshot = (program3) => {
-  program3.command("snapshot").description("Generate schematic and PCB snapshots").option("-u, --update", "Update snapshots on disk").action(async (options) => {
+  program3.command("snapshot").description("Generate schematic and PCB snapshots (add --3d for 3d preview)").option("-u, --update", "Update snapshots on disk").option("--3d", "Generate 3d preview snapshots").action(async (options) => {
     await snapshotProject({
       update: options.update ?? false,
+      threeD: options["3d"] ?? false,
       onExit: (code) => process.exit(code),
       onError: (msg) => console.error(msg),
       onSuccess: (msg) => console.log(msg)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/cli",
-  "version": "0.1.126",
+  "version": "0.1.127",
   "main": "dist/main.js",
   "devDependencies": {
     "@babel/standalone": "^7.26.9",
@@ -42,7 +42,9 @@
     "tempy": "^3.1.0",
     "tscircuit": "^0.0.491",
     "@tscircuit/circuit-json-util": "^0.0.47",
-    "typed-ky": "^0.0.4"
+    "typed-ky": "^0.0.4",
+    "circuit-json-to-simple-3d": "^0.0.3",
+    "@tscircuit/simple-3d-svg": "^0.0.10"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"