@tscircuit/3d-viewer 0.0.590 → 0.0.592

package/dist/index.d.ts

@@ -64,7 +64,14 @@ interface LayerVisibilityState {
     pcbNotes: boolean;
     backgroundStart: boolean;
     backgroundEnd: boolean;
+    /**
+     * Three-state display for the single assembled enclosure CAD entity. This is
+     * viewer state, not Circuit JSON: hidden to work unobstructed, translucent to
+     * check openings against the board, opaque to inspect the print itself.
+     */
+    enclosure: EnclosureVisibility;
 }
+type EnclosureVisibility = "hidden" | "translucent" | "opaque";
 
 interface CombinedBoardTextures {
     topBoard?: THREE.CanvasTexture | null;

package/dist/index.js

@@ -14452,6 +14452,12 @@ import {
   useMemo
 } from "react";
 import { jsx } from "react/jsx-runtime";
+var ENCLOSURE_VISIBILITY_CYCLE = [
+  "translucent",
+  "opaque",
+  "hidden"
+];
+var nextEnclosureVisibility = (current) => ENCLOSURE_VISIBILITY_CYCLE[(ENCLOSURE_VISIBILITY_CYCLE.indexOf(current) + 1) % ENCLOSURE_VISIBILITY_CYCLE.length];
 var defaultVisibility = {
   boardBody: true,
   topCopper: true,
@@ -14472,7 +14478,8 @@ var defaultVisibility = {
   threedAxis: false,
   pcbNotes: false,
   backgroundStart: true,
-  backgroundEnd: true
+  backgroundEnd: true,
+  enclosure: "translucent"
 };
 var LayerVisibilityContext = createContext(void 0);
 var LayerVisibilityProvider = ({ children }) => {
@@ -28151,6 +28158,79 @@ var SOD123W = () => {
     )
   ] });
 };
+var SOD123 = ({
+  fullWidth = 3.7,
+  fullLength: fullLength10 = 1.55
+} = {}) => {
+  const bodyWidth = fullWidth - 1;
+  const bodyLength10 = fullLength10;
+  const packageHeight = 1.175;
+  const bodyStandoff = 0.1;
+  const bodyHeight = packageHeight - bodyStandoff;
+  const leadWidth = 0.55;
+  const leadThickness = 0.12;
+  const leadHeight = 0.35;
+  const bodyDistance = (fullWidth - bodyWidth) / 2;
+  const padContactLength = 0.25;
+  const leadCurveLength = 0.2;
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      SmdChipLead,
+      {
+        position: {
+          x: -fullWidth / 2,
+          y: 0,
+          z: leadThickness / 2
+        },
+        width: leadWidth,
+        thickness: leadThickness,
+        padContactLength,
+        bodyDistance,
+        curveLength: leadCurveLength,
+        height: leadHeight
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      SmdChipLead,
+      {
+        rotation: Math.PI,
+        position: {
+          x: fullWidth / 2,
+          y: 0,
+          z: leadThickness / 2
+        },
+        width: leadWidth,
+        thickness: leadThickness,
+        padContactLength,
+        bodyDistance,
+        curveLength: leadCurveLength,
+        height: leadHeight
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      ChipBody,
+      {
+        center: { x: 0, y: 0, z: 0 },
+        width: bodyWidth,
+        length: bodyLength10,
+        height: bodyHeight,
+        heightAboveSurface: bodyStandoff,
+        includeNotch: false,
+        color: "#222",
+        taperRatio: 0.06,
+        straightHeightRatio: 0.6
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        color: "#777",
+        size: [0.45, bodyLength10 - 0.15, 0.02],
+        center: [-bodyWidth / 4, 0, packageHeight]
+      }
+    )
+  ] });
+};
 var SOD128 = () => {
   const fullWidth = 3.8;
   const bodyLength10 = 2.5;
@@ -30384,6 +30464,822 @@ var JSTZH1_5mm = ({
     })
   ] });
 };
+var getTerminalPoints = ([centerX, centerY], width10, length64, chamfer, isPinOne) => {
+  const xDirection = Math.sign(centerX);
+  const yDirection = Math.sign(centerY);
+  const halfWidth = width10 / 2;
+  const halfLength = length64 / 2;
+  const innerChamfer = isPinOne ? Math.min(0.32, length64 * 0.36) : 0;
+  const outerChamfer = Math.min(chamfer, halfWidth, halfLength);
+  const points = [
+    [-halfWidth, -halfLength],
+    [halfWidth, -halfLength],
+    [halfWidth, halfLength - outerChamfer],
+    [halfWidth - outerChamfer, halfLength],
+    [-halfWidth, halfLength]
+  ];
+  if (innerChamfer) {
+    points[0] = [-halfWidth + innerChamfer, -halfLength];
+    points.push([-halfWidth, -halfLength + innerChamfer]);
+  }
+  const oriented = points.map(
+    ([x, y]) => [centerX + x * xDirection, centerY + y * yDirection]
+  );
+  return xDirection * yDirection < 0 ? oriented.reverse() : oriented;
+};
+var getRoundedRectProfile = ({
+  width: width10,
+  length: length64,
+  radius,
+  height: height10,
+  z: z21
+}) => {
+  const x = width10 / 2 - radius;
+  const y = length64 / 2 - radius;
+  return [
+    [-x, -y],
+    [x, -y],
+    [x, y],
+    [-x, y]
+  ].map(([cornerX, cornerY], index2) => /* @__PURE__ */ jsx2(
+    Cylinder,
+    {
+      center: [cornerX, cornerY, z21 + height10 / 2],
+      height: height10,
+      radius
+    },
+    `${z21}-${index2}`
+  ));
+};
+var Crystal = ({
+  horizontalPadPitch = 2.2,
+  verticalPadPitch = 1.7,
+  padWidth = 1.4,
+  padHeight = 1.2,
+  bodyHeight = 0.7
+}) => {
+  const bodyWidth = horizontalPadPitch + padWidth * (5 / 7);
+  const bodyLength10 = verticalPadPitch + padHeight * (2 / 3);
+  const terminalThickness = Math.min(0.01, bodyHeight * 0.02);
+  const terminalWidth = padWidth * (5 / 7);
+  const terminalLength = padHeight * 0.75;
+  const ceramicTopZ = bodyHeight * (5 / 7);
+  const baseHeight = ceramicTopZ - terminalThickness;
+  const sealHeight = bodyHeight * (2 / 35);
+  const sealWidth = bodyWidth * 0.95;
+  const sealLength = bodyLength10 * 0.94;
+  const lidShoulderWidth = bodyWidth * 0.905;
+  const lidShoulderLength = bodyLength10 * 0.9;
+  const lidTopWidth = bodyWidth * 0.83;
+  const lidTopLength = bodyLength10 * 0.82;
+  const lidBaseZ = ceramicTopZ + sealHeight;
+  const lidProfileHeight = Math.min(0.01, bodyHeight * 0.015);
+  const bodyChamfer = Math.min(0.12, bodyLength10 * 0.05);
+  const terminalX = (bodyWidth - terminalWidth) / 2;
+  const terminalY = (bodyLength10 - terminalLength) / 2;
+  const terminalPositions = [
+    [-terminalX, -terminalY],
+    [terminalX, -terminalY],
+    [terminalX, terminalY],
+    [-terminalX, terminalY]
+  ];
+  const sealProfile = getRoundedRectProfile({
+    width: sealWidth,
+    length: sealLength,
+    radius: Math.min(0.13, sealLength * 0.08),
+    height: sealHeight,
+    z: ceramicTopZ
+  });
+  const lidProfiles = [
+    ...getRoundedRectProfile({
+      width: lidShoulderWidth,
+      length: lidShoulderLength,
+      radius: Math.min(0.14, lidShoulderLength * 0.08),
+      height: lidProfileHeight,
+      z: lidBaseZ
+    }),
+    ...getRoundedRectProfile({
+      width: lidTopWidth,
+      length: lidTopLength,
+      radius: Math.min(0.15, lidTopLength * 0.09),
+      height: lidProfileHeight,
+      z: bodyHeight - lidProfileHeight
+    })
+  ];
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    terminalPositions.map((center, index2) => /* @__PURE__ */ jsx2(Colorize, { color: "#d6a258", children: /* @__PURE__ */ jsx2(ExtrudeLinear, { height: terminalThickness, children: /* @__PURE__ */ jsx2(
+      Polygon,
+      {
+        points: getTerminalPoints(
+          center,
+          terminalWidth,
+          terminalLength,
+          bodyChamfer,
+          index2 === 0
+        )
+      }
+    ) }) }, index2)),
+    /* @__PURE__ */ jsx2(
+      ChipBody,
+      {
+        center: { x: 0, y: 0, z: terminalThickness },
+        width: bodyWidth,
+        length: bodyLength10,
+        height: baseHeight - 5e-3,
+        heightAboveSurface: 0,
+        color: "#34343d",
+        taperRatio: 0,
+        straightHeightRatio: 1,
+        includeNotch: false,
+        chamferSize: bodyChamfer
+      }
+    ),
+    /* @__PURE__ */ jsx2(Colorize, { color: "#d2a057", children: /* @__PURE__ */ jsx2(Hull, { children: sealProfile }) }),
+    /* @__PURE__ */ jsx2(Colorize, { color: "#b9bec2", children: /* @__PURE__ */ jsx2(Hull, { children: lidProfiles }) })
+  ] });
+};
+var HOUSING_COLOR = "#303339";
+var HOUSING_SHADOW = "#1f2227";
+var ACTUATOR_COLOR = "#eee8d8";
+var ACTUATOR_HIGHLIGHT = "#f8f3e7";
+var TIN_COLOR = "#b7bdc2";
+var TIN_HIGHLIGHT = "#d2d6d9";
+var HOLD_DOWN_COLOR = "#767d82";
+var HOLD_DOWN_HIGHLIGHT = "#9ba1a5";
+var FPC = ({
+  pinCount = 12,
+  pitch = 0.5,
+  padWidth = 0.3,
+  padLength = 1.25,
+  staggered = false,
+  reverse = false,
+  rowPitch = 2.4,
+  topPadLength = padLength,
+  bottomPadLength = padLength,
+  mountPadPitchX,
+  mountPadOffsetY = 2.575,
+  mountTop = false,
+  mountPadWidth = 2,
+  mountPadLength = 2.5
+}) => {
+  const contactSpan = Math.max((pinCount - 1) * pitch, pitch);
+  const contactStartX = -contactSpan / 2;
+  const resolvedMountPitch = mountPadPitchX ?? contactSpan + (staggered ? 3.5 : 3.38);
+  const mountY = mountPadOffsetY === 0 ? 0 : (mountTop ? 1 : -1) * mountPadOffsetY;
+  const contactRows = Array.from({ length: pinCount }, (_, index2) => {
+    const isUpperRow = staggered && index2 % 2 === 1 !== reverse;
+    const y = staggered ? isUpperRow ? rowPitch / 2 : -rowPitch / 2 : 0;
+    const length64 = isUpperRow ? topPadLength : bottomPadLength;
+    return {
+      index: index2,
+      x: contactStartX + index2 * pitch,
+      y,
+      length: length64
+    };
+  });
+  const contactMaxY = Math.max(
+    ...contactRows.map((contact) => contact.y + contact.length / 2)
+  );
+  const contactMinY = Math.min(
+    ...contactRows.map((contact) => contact.y - contact.length / 2)
+  );
+  const mountingMinY = mountY - mountPadLength / 2;
+  const mountingMaxY = mountY + mountPadLength / 2;
+  const signalSideY = mountTop ? contactMinY : contactMaxY;
+  const cableSideY = mountTop ? Math.max(mountingMaxY, contactMaxY) + 0.67 : Math.min(mountingMinY, contactMinY) - 0.67;
+  const directionToSignal = mountTop ? -1 : 1;
+  const housingSignalY = signalSideY - directionToSignal * Math.max(padLength * 0.86, 1.05);
+  const housingCableY = cableSideY + directionToSignal * 0.22;
+  const housingDepth = Math.abs(housingSignalY - housingCableY);
+  const housingCenterY = (housingSignalY + housingCableY) / 2;
+  const cableEdgeY = housingCableY - directionToSignal * 0.01;
+  const bodyWidth = Math.max(
+    contactSpan + 4.9,
+    resolvedMountPitch + mountPadWidth * 0.76
+  );
+  const openingWidth = Math.min(bodyWidth - 2.3, contactSpan + 1.1);
+  const housingBaseHeight = 0.3;
+  const housingHeight = 1.42;
+  const overallHeight = 2;
+  const throatDepth = Math.min(0.92, housingDepth * 0.28);
+  const throatCenterY = cableEdgeY + directionToSignal * (throatDepth / 2 - 0.04);
+  const throatHeight = 1.6;
+  const throatCenterZ = 1.1;
+  const actuatorDepth = Math.max(housingDepth - 0.78, 1.5);
+  const actuatorCenterY = cableEdgeY + directionToSignal * (actuatorDepth / 2 + 0.68);
+  const actuatorWidth = bodyWidth - 0.72;
+  const actuatorHeight = 0.34;
+  const actuatorCenterZ = overallHeight - actuatorHeight / 2;
+  const hingeY = cableEdgeY + directionToSignal * Math.min(0.68, housingDepth * 0.22);
+  const hingeZ = 1.48;
+  const terminalWidth = Math.max(padWidth * 0.82, 0.15);
+  const terminalOuterY = signalSideY;
+  const terminalLength = Math.abs(terminalOuterY - housingSignalY);
+  const terminalCenterY = (terminalOuterY + housingSignalY) / 2;
+  const springLength = Math.max(throatDepth * 0.8, 0.5);
+  const springCenterY = cableEdgeY + directionToSignal * (springLength / 2 + 0.08);
+  const endClipX = resolvedMountPitch / 2;
+  const clipHeight = 0.75;
+  const clipWallX = bodyWidth / 2 - 0.04;
+  const clipCapX = bodyWidth / 2 - 0.23;
+  const sideBossX = bodyWidth / 2 - 0.32;
+  const sideBossWidth = 0.68;
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    [-1, 1].map((direction) => /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        color: TIN_COLOR,
+        center: [direction * endClipX, mountY, 0.07],
+        size: [mountPadWidth, mountPadLength, 0.14]
+      },
+      `mount-pad:${direction}`
+    )),
+    contactRows.map((contact) => /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        color: TIN_COLOR,
+        center: [contact.x, terminalCenterY, 0.065],
+        size: [terminalWidth, terminalLength, 0.13]
+      },
+      `terminal:${contact.index}`
+    )),
+    /* @__PURE__ */ jsx2(
+      RoundedCuboid,
+      {
+        color: HOUSING_SHADOW,
+        center: [0, housingCenterY, housingBaseHeight / 2],
+        size: [bodyWidth, housingDepth, housingBaseHeight],
+        roundRadius: 0.1
+      }
+    ),
+    /* @__PURE__ */ jsx2(Colorize, { color: HOUSING_COLOR, children: /* @__PURE__ */ jsxs(Subtract, { children: [
+      /* @__PURE__ */ jsx2(
+        RoundedCuboid,
+        {
+          center: [0, housingCenterY, housingBaseHeight + housingHeight / 2],
+          size: [bodyWidth - 0.2, housingDepth - 0.12, housingHeight],
+          roundRadius: 0.14
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Cuboid,
+        {
+          center: [0, throatCenterY, throatCenterZ],
+          size: [openingWidth, throatDepth, throatHeight]
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Cuboid,
+        {
+          center: [0, actuatorCenterY, overallHeight - actuatorHeight * 0.72],
+          size: [actuatorWidth - 0.32, actuatorDepth - 0.16, actuatorHeight]
+        }
+      )
+    ] }) }),
+    contactRows.map((contact) => /* @__PURE__ */ jsx2(
+      RoundedCuboid,
+      {
+        color: TIN_HIGHLIGHT,
+        center: [contact.x, springCenterY, housingBaseHeight + 0.82],
+        size: [terminalWidth * 0.82, springLength, 0.14],
+        roundRadius: 0.035
+      },
+      `spring:${contact.index}`
+    )),
+    contactRows.map((contact) => /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        color: TIN_COLOR,
+        center: [
+          contact.x,
+          housingSignalY - directionToSignal * 0.03,
+          housingBaseHeight + 0.32
+        ],
+        size: [terminalWidth, 0.13, 0.62]
+      },
+      `terminal-rise:${contact.index}`
+    )),
+    /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        color: HOUSING_SHADOW,
+        center: [
+          0,
+          cableEdgeY + directionToSignal * 0.1,
+          housingBaseHeight + 0.71
+        ],
+        size: [openingWidth + 0.18, 0.16, 0.8]
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      RoundedCuboid,
+      {
+        color: ACTUATOR_COLOR,
+        center: [0, actuatorCenterY, actuatorCenterZ],
+        size: [actuatorWidth, actuatorDepth, actuatorHeight],
+        roundRadius: 0.11
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        color: ACTUATOR_HIGHLIGHT,
+        center: [
+          0,
+          actuatorCenterY - directionToSignal * (actuatorDepth / 2 - 0.12),
+          overallHeight - 0.035
+        ],
+        size: [actuatorWidth - 0.36, 0.24, 0.07]
+      }
+    ),
+    [-1, 1].map((direction) => /* @__PURE__ */ jsx2(
+      RoundedCuboid,
+      {
+        color: ACTUATOR_COLOR,
+        center: [direction * sideBossX, hingeY, hingeZ],
+        size: [sideBossWidth, 0.92, 0.72],
+        roundRadius: 0.1
+      },
+      `actuator-ear:${direction}`
+    )),
+    [-1, 1].map((direction) => /* @__PURE__ */ jsx2(
+      Translate,
+      {
+        x: direction * sideBossX,
+        y: hingeY,
+        z: hingeZ,
+        children: /* @__PURE__ */ jsx2(Rotate, { rotation: [0, Math.PI / 2, 0], children: /* @__PURE__ */ jsx2(
+          Cylinder,
+          {
+            color: ACTUATOR_HIGHLIGHT,
+            height: sideBossWidth + 0.12,
+            radius: 0.24
+          }
+        ) })
+      },
+      `hinge:${direction}`
+    )),
+    [-1, 1].map((direction) => /* @__PURE__ */ jsx2(
+      RoundedCuboid,
+      {
+        color: HOLD_DOWN_COLOR,
+        center: [direction * clipWallX, mountY, clipHeight / 2],
+        size: [0.17, Math.min(mountPadLength * 0.3, 0.7), clipHeight],
+        roundRadius: 0.04
+      },
+      `hold-down-wall:${direction}`
+    )),
+    [-1, 1].map((direction) => /* @__PURE__ */ jsx2(
+      RoundedCuboid,
+      {
+        color: HOLD_DOWN_HIGHLIGHT,
+        center: [direction * clipCapX, mountY, clipHeight - 0.05],
+        size: [0.42, Math.min(mountPadLength * 0.3, 0.7), 0.1],
+        roundRadius: 0.035
+      },
+      `hold-down-cap:${direction}`
+    )),
+    /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        color: HOUSING_SHADOW,
+        center: [0, housingCenterY, 0.025],
+        size: [openingWidth + 0.7, housingDepth * 0.58, 0.05]
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        color: HOUSING_SHADOW,
+        center: [
+          0,
+          housingSignalY - directionToSignal * 0.06,
+          housingBaseHeight + 0.82
+        ],
+        size: [openingWidth + 0.4, 0.15, 0.92]
+      }
+    )
+  ] });
+};
+var SmdPinHeader = ({
+  numberOfPins,
+  pitch = 2.54,
+  pinThickness = 0.64,
+  bodyWidth = 2.5,
+  bodyHeight = 2.54,
+  standoffHeight = 1.27,
+  matingPinLength = 5.8,
+  tailSpan = 5.08
+}) => {
+  const xStart = -((numberOfPins - 1) * pitch) / 2;
+  const bodyTop = standoffHeight + bodyHeight;
+  const tailLength = tailSpan / 2;
+  const tipChamferHeight = pinThickness * 0.35;
+  return /* @__PURE__ */ jsx2(Fragment2, { children: Array.from({ length: numberOfPins }, (_, index2) => {
+    const x = xStart + index2 * pitch;
+    const tailDirection = index2 % 2 === 0 ? 1 : -1;
+    const postBodyLength = matingPinLength - tipChamferHeight;
+    const verticalTailLength = standoffHeight - pinThickness / 2;
+    return /* @__PURE__ */ jsxs(Translate, { x, children: [
+      /* @__PURE__ */ jsx2(
+        Cuboid,
+        {
+          color: "#222",
+          size: [pitch, bodyWidth, bodyHeight],
+          center: [0, 0, standoffHeight + bodyHeight / 2]
+        }
+      ),
+      /* @__PURE__ */ jsxs(Colorize, { color: "#d4af37", children: [
+        /* @__PURE__ */ jsx2(
+          Cuboid,
+          {
+            size: [pinThickness, tailLength, pinThickness],
+            center: [0, tailDirection * (tailLength / 2), pinThickness / 2]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Cuboid,
+          {
+            size: [pinThickness, pinThickness, verticalTailLength],
+            center: [0, 0, pinThickness / 2 + verticalTailLength / 2]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Cuboid,
+          {
+            size: [pinThickness, pinThickness, postBodyLength],
+            center: [0, 0, bodyTop + postBodyLength / 2]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Hull, { children: [
+          /* @__PURE__ */ jsx2(
+            Cuboid,
+            {
+              size: [pinThickness, pinThickness, 0.01],
+              center: [0, 0, bodyTop + postBodyLength]
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            Cuboid,
+            {
+              size: [pinThickness * 0.65, pinThickness * 0.65, 0.01],
+              center: [0, 0, bodyTop + matingPinLength]
+            }
+          )
+        ] })
+      ] })
+    ] }, index2);
+  }) });
+};
+var ParametricChip = ({
+  padPitch,
+  padHeight,
+  color = "#333"
+}) => {
+  const fullLength10 = padPitch;
+  const width10 = padHeight * 0.85;
+  const height10 = width10;
+  const terminatorWidth9 = fullLength10 * 0.2;
+  const bodyLength10 = fullLength10 - terminatorWidth9 * 2;
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        size: [bodyLength10, width10, height10],
+        offset: [0, 0, height10 / 2],
+        color
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        size: [terminatorWidth9, height10, width10],
+        offset: [fullLength10 / 2 - terminatorWidth9 / 2, 0, height10 / 2],
+        color: "#ccc"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Cuboid,
+      {
+        size: [terminatorWidth9, height10, width10],
+        offset: [-fullLength10 / 2 + terminatorWidth9 / 2, 0, height10 / 2],
+        color: "#ccc"
+      }
+    )
+  ] });
+};
+var Led5050 = ({
+  color = "#ffff00",
+  bodyColor = "#ffffff",
+  leadColor = "#dedede"
+}) => {
+  const bodySize = 5;
+  const leadSpan = 5.4;
+  const bodyBottom = 0.2;
+  const bodyHeight = 1.3;
+  const bodyTop = bodyBottom + bodyHeight;
+  const leadLength = 1.4;
+  const leadWidth = 1;
+  const leadThickness = 0.2;
+  const leadCenterX = leadSpan / 2 - leadLength / 2;
+  const lensRadius = 2;
+  const lensHeight = 0.25;
+  const lensTop = 1.55;
+  const cornerCutDepth = 0.3;
+  const leadYPositions = [-1.7, 0, 1.7];
+  const leadSides = [-1, 1];
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    leadYPositions.flatMap(
+      (y) => leadSides.map((side) => /* @__PURE__ */ jsx2(
+        Cuboid,
+        {
+          color: leadColor,
+          size: [leadLength, leadWidth, leadThickness],
+          center: [side * leadCenterX, y, leadThickness / 2]
+        },
+        `${side}-${y}`
+      ))
+    ),
+    /* @__PURE__ */ jsx2(Colorize, { color: bodyColor, children: /* @__PURE__ */ jsxs(Subtract, { children: [
+      /* @__PURE__ */ jsx2(
+        ChipBody,
+        {
+          width: bodySize,
+          length: bodySize,
+          height: bodyHeight,
+          heightAboveSurface: bodyBottom,
+          center: { x: 0, y: 0, z: 0 },
+          color: bodyColor,
+          taperRatio: 0.036,
+          straightHeightRatio: 0.01,
+          includeNotch: false
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Cylinder,
+        {
+          radius: lensRadius,
+          height: lensHeight,
+          center: [0, 0, bodyTop - lensHeight / 2]
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Translate,
+        {
+          offset: [
+            -bodySize / 2,
+            bodySize / 2,
+            bodyTop - cornerCutDepth / 2 + 5e-3
+          ],
+          children: /* @__PURE__ */ jsx2(Rotate, { rotation: [0, 0, Math.PI / 4], children: /* @__PURE__ */ jsx2(Cuboid, { size: [0.9, 0.9, cornerCutDepth + 0.01] }) })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx2(
+      Cylinder,
+      {
+        color,
+        radius: lensRadius,
+        height: lensHeight,
+        center: [0, 0, lensTop - lensHeight / 2]
+      }
+    )
+  ] });
+};
+var range2 = (length64) => Array.from({ length: length64 }, (_, index2) => index2);
+var RJ45 = ({
+  bodyWidth = 16.26,
+  bodyDepth = 15.88,
+  bodyHeight = 13.5,
+  bodyCenterY = -0.96,
+  ledPins = false,
+  firstPinLeft = false,
+  firstPinTop = false,
+  signalPitch = 1.02,
+  signalRowPitch = 1.78,
+  signalHoleDiameter = 0.9144,
+  shieldPinX = 8.13,
+  shieldPinY = 0.13,
+  shieldHoleDiameter = 1.8,
+  locatorHoleX = 6.35,
+  locatorHoleY = -3.43,
+  locatorHoleDiameter = 3.25,
+  ledPinX = 4.57,
+  ledPinPitch = 2.29,
+  ledPinY = 5.7,
+  openingDirection,
+  shellColor = "#b7bdc2",
+  housingColor = "#20242a",
+  contactColor = "#d6a928"
+}) => {
+  const frontDirection = openingDirection ?? (bodyCenterY > 0 ? 1 : -1);
+  const frontY = bodyCenterY + frontDirection * bodyDepth / 2;
+  const shellThickness = Math.min(0.38, bodyWidth * 0.024);
+  const openingWidth = Math.max(bodyWidth - 2.5, bodyWidth * 0.72);
+  const openingHeight = Math.min(bodyHeight - 2.4, 9.6);
+  const openingCenterZ = 1.3 + openingHeight / 2;
+  const cavityDepth = Math.min(4.4, bodyDepth * 0.34);
+  const cavityCenterY = frontY - frontDirection * cavityDepth / 2;
+  const backWallY = frontY - frontDirection * (cavityDepth + shellThickness * 0.7);
+  const signalLeadRadius = Math.max(
+    0.22,
+    Math.min(signalHoleDiameter * 0.36, 0.38)
+  );
+  const signalPinPositions = range2(8).map((index2) => {
+    const defaultX = (3.5 - index2) * signalPitch;
+    const defaultY = index2 % 2 === 0 ? -signalRowPitch / 2 : signalRowPitch / 2;
+    return {
+      x: firstPinLeft ? -defaultX : defaultX,
+      y: firstPinTop ? -defaultY : defaultY
+    };
+  });
+  const ledPinPositions = [
+    -ledPinX - ledPinPitch,
+    -ledPinX,
+    ledPinX,
+    ledPinX + ledPinPitch
+  ];
+  const contactPitch = openingWidth / 10;
+  const contactY = frontY - frontDirection * Math.max(cavityDepth * 0.48, 1.2);
+  const contactZ = openingCenterZ + openingHeight * 0.18;
+  const frontLipY = frontY + frontDirection * shellThickness * 0.2;
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsxs(Colorize, { color: shellColor, children: [
+      /* @__PURE__ */ jsxs(Subtract, { children: [
+        /* @__PURE__ */ jsx2(
+          Cuboid,
+          {
+            center: [0, bodyCenterY, bodyHeight / 2],
+            size: [bodyWidth, bodyDepth, bodyHeight]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Cuboid,
+          {
+            center: [0, cavityCenterY, openingCenterZ],
+            size: [
+              openingWidth,
+              cavityDepth + shellThickness * 2,
+              openingHeight
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        Cuboid,
+        {
+          center: [0, frontLipY, 0.72],
+          size: [openingWidth + 0.5, shellThickness * 1.25, 1.05]
+        }
+      ),
+      [-1, 1].map((direction) => /* @__PURE__ */ jsx2(
+        Cuboid,
+        {
+          center: [direction * shieldPinX, shieldPinY, 0.25],
+          size: [
+            Math.max(shieldHoleDiameter * 0.46, 0.65),
+            Math.max(shieldHoleDiameter * 0.72, 1.1),
+            3.4
+          ]
+        },
+        `shield-tab:${direction}`
+      )),
+      [-1, 1].map((direction) => /* @__PURE__ */ jsx2(
+        Cuboid,
+        {
+          center: [
+            direction * bodyWidth * 0.24,
+            bodyCenterY - frontDirection * bodyDepth * 0.08,
+            bodyHeight + 0.04
+          ],
+          size: [bodyWidth * 0.22, bodyDepth * 0.42, 0.1]
+        },
+        `top-seam:${direction}`
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs(Colorize, { color: housingColor, children: [
+      /* @__PURE__ */ jsxs(Subtract, { children: [
+        /* @__PURE__ */ jsx2(
+          RoundedCuboid,
+          {
+            center: [0, cavityCenterY, openingCenterZ],
+            size: [
+              openingWidth - 0.2,
+              cavityDepth + shellThickness * 0.5,
+              openingHeight - 0.2
+            ],
+            roundRadius: 0.22
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Cuboid,
+          {
+            center: [
+              0,
+              cavityCenterY - frontDirection * shellThickness * 0.2,
+              openingCenterZ - 0.05
+            ],
+            size: [
+              openingWidth - 1.25,
+              cavityDepth + shellThickness,
+              openingHeight - 1.35
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        Cuboid,
+        {
+          center: [0, backWallY, openingCenterZ],
+          size: [openingWidth - 1.15, shellThickness, openingHeight - 1.25]
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        RoundedCuboid,
+        {
+          center: [0, frontY - frontDirection * cavityDepth * 0.28, 1.55],
+          size: [openingWidth - 2.6, cavityDepth * 0.5, 1.15],
+          roundRadius: 0.16
+        }
+      ),
+      [-1, 1].map((direction) => /* @__PURE__ */ jsx2(
+        Cylinder,
+        {
+          center: [direction * locatorHoleX, locatorHoleY, -0.25],
+          radius: Math.max(locatorHoleDiameter * 0.41, 0.65),
+          height: 2.7
+        },
+        `locator:${direction}`
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs(Colorize, { color: contactColor, children: [
+      signalPinPositions.map(({ x, y }, index2) => /* @__PURE__ */ jsx2(
+        Cylinder,
+        {
+          center: [x, y, 0.15],
+          radius: signalLeadRadius,
+          height: 3.1
+        },
+        `signal-lead:${index2}`
+      )),
+      range2(8).map((index2) => /* @__PURE__ */ jsx2(
+        Translate,
+        {
+          offset: [
+            (index2 - 3.5) * contactPitch,
+            contactY,
+            contactZ + (index2 % 2 === 0 ? 0.03 : -0.03)
+          ],
+          children: /* @__PURE__ */ jsx2(Rotate, { rotation: [frontDirection * 0.2, 0, 0], children: /* @__PURE__ */ jsx2(
+            RoundedCuboid,
+            {
+              size: [Math.max(contactPitch * 0.28, 0.28), 3.25, 0.16],
+              roundRadius: 0.05
+            }
+          ) })
+        },
+        `socket-contact:${index2}`
+      )),
+      ledPins && ledPinPositions.map((x, index2) => /* @__PURE__ */ jsx2(
+        Cylinder,
+        {
+          center: [x, ledPinY, 0.15],
+          radius: signalLeadRadius,
+          height: 3.1
+        },
+        `led-lead:${index2}`
+      ))
+    ] }),
+    ledPins && /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(
+        RoundedCuboid,
+        {
+          color: "#73b744",
+          center: [
+            -bodyWidth / 2 + 2.05,
+            frontY + frontDirection * shellThickness * 0.35,
+            bodyHeight - 2.05
+          ],
+          size: [2.15, shellThickness * 1.55, 1.45],
+          roundRadius: 0.18
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        RoundedCuboid,
+        {
+          color: "#e0aa35",
+          center: [
+            bodyWidth / 2 - 2.05,
+            frontY + frontDirection * shellThickness * 0.35,
+            bodyHeight - 2.05
+          ],
+          size: [2.15, shellThickness * 1.55, 1.45],
+          roundRadius: 0.18
+        }
+      )
+    ] })
+  ] });
+};
 var Footprinter3d = ({ footprint }) => {
   let normalizedFootprint = footprint;
   if (footprint.startsWith("jstzh1_5mm")) {
@@ -30392,7 +31288,19 @@ var Footprinter3d = ({ footprint }) => {
     normalizedFootprint = `zh${numPins}`;
   }
   const fpJson = fp.string(normalizedFootprint).json();
+  const colorMatch = footprint.match(/_color\(([^)]+)\)/);
+  const color = colorMatch ? colorMatch[1] : void 0;
   switch (fpJson.fn) {
+    case "crystal":
+      return /* @__PURE__ */ jsx2(
+        Crystal,
+        {
+          horizontalPadPitch: fpJson.px,
+          verticalPadPitch: fpJson.py,
+          padWidth: fpJson.pw,
+          padHeight: fpJson.ph
+        }
+      );
     case "dip":
       return /* @__PURE__ */ jsx2(Dip, { numPins: fpJson.num_pins, pitch: fpJson.p, bodyWidth: fpJson.w });
     case "axial":
@@ -30508,6 +31416,17 @@ var Footprinter3d = ({ footprint }) => {
           }
         );
     }
+    case "smdpinheader":
+      return /* @__PURE__ */ jsx2(
+        SmdPinHeader,
+        {
+          numberOfPins: fpJson.num_pins,
+          pitch: fpJson.p,
+          bodyWidth: fpJson.bh
+        }
+      );
+    case "led5050":
+      return /* @__PURE__ */ jsx2(Led5050, { color });
     case "cap": {
       switch (fpJson.imperial) {
         case "0402":
@@ -30529,6 +31448,7 @@ var Footprinter3d = ({ footprint }) => {
         case "2512":
           return /* @__PURE__ */ jsx2(A2512, { color: "#856c4d" });
       }
+      break;
     }
     case "sot235":
       return /* @__PURE__ */ jsx2(SOT_235_default, {});
@@ -30564,6 +31484,50 @@ var Footprinter3d = ({ footprint }) => {
         return /* @__PURE__ */ jsx2(JSTZH1_5mm, { numPins: fpJson.num_pins });
       }
       break;
+    case "fpc":
+      return /* @__PURE__ */ jsx2(
+        FPC,
+        {
+          pinCount: fpJson.num_pins,
+          pitch: fpJson.p,
+          padWidth: fpJson.pw,
+          padLength: fpJson.pl,
+          staggered: fpJson.staggered,
+          reverse: fpJson.reverse,
+          rowPitch: fpJson.py,
+          topPadLength: fpJson.toppl,
+          bottomPadLength: fpJson.bottompl,
+          mountPadPitchX: fpJson.mpx,
+          mountPadOffsetY: fpJson.mpy,
+          mountTop: fpJson.mounttop,
+          mountPadWidth: fpJson.mpw,
+          mountPadLength: fpJson.mpl
+        }
+      );
+    case "rj45":
+      return /* @__PURE__ */ jsx2(
+        RJ45,
+        {
+          bodyWidth: fpJson.w,
+          bodyDepth: fpJson.h,
+          bodyCenterY: fpJson.bodyy,
+          ledPins: fpJson.ledpins || fpJson.num_pins === 14,
+          firstPinLeft: fpJson.firstpinleft,
+          firstPinTop: fpJson.firstpintop,
+          signalPitch: fpJson.p,
+          signalRowPitch: fpJson.py,
+          signalHoleDiameter: fpJson.id,
+          shieldPinX: fpJson.shieldx,
+          shieldPinY: fpJson.shieldy,
+          shieldHoleDiameter: fpJson.shieldid,
+          locatorHoleX: fpJson.holex,
+          locatorHoleY: fpJson.holey,
+          locatorHoleDiameter: fpJson.holed,
+          ledPinX: fpJson.ledx,
+          ledPinPitch: fpJson.ledp,
+          ledPinY: fpJson.ledy
+        }
+      );
     case "soic":
       return /* @__PURE__ */ jsx2(
         SOIC,
@@ -30589,6 +31553,8 @@ var Footprinter3d = ({ footprint }) => {
       return /* @__PURE__ */ jsx2(SMC, {});
     case "smf":
       return /* @__PURE__ */ jsx2(SMF, {});
+    case "sod123":
+      return /* @__PURE__ */ jsx2(SOD123, {});
     case "sod123f":
       return /* @__PURE__ */ jsx2(SOD123F, {});
     case "sod123fl":
@@ -30686,8 +31652,6 @@ var Footprinter3d = ({ footprint }) => {
       );
     }
   }
-  const colorMatch = footprint.match(/_color\(([^)]+)\)/);
-  const color = colorMatch ? colorMatch[1] : void 0;
   switch (fpJson.imperial) {
     case "0402":
       return /* @__PURE__ */ jsx2(A0402, { color });
@@ -30708,6 +31672,20 @@ var Footprinter3d = ({ footprint }) => {
     case "2512":
       return /* @__PURE__ */ jsx2(A2512, { color });
   }
+  if ((fpJson.fn === "res" || fpJson.fn === "cap") && fpJson.p !== void 0 && fpJson.ph !== void 0) {
+    const padPitch = mm(fpJson.p);
+    const padHeight = mm(fpJson.ph);
+    if (Number.isFinite(padPitch) && Number.isFinite(padHeight)) {
+      return /* @__PURE__ */ jsx2(
+        ParametricChip,
+        {
+          padPitch,
+          padHeight,
+          color: color ?? (fpJson.fn === "cap" ? "#856c4d" : void 0)
+        }
+      );
+    }
+  }
   return null;
 };
 var isVNode = (n) => n && typeof n === "object" && "type" in n;
@@ -32389,6 +33367,19 @@ var getRenderedCadModelType = (modelType) => {
   return modelType === "step" ? "glb" : modelType;
 };
 
+// src/utils/is-legacy-fdm-enclosure.ts
+var isLegacyFdmEnclosure = (cadComponent, circuitJson) => {
+  if (!cadComponent.model_jscad || cadComponent.model_origin_alignment !== "bottom_center_of_component") {
+    return false;
+  }
+  const pcbComponent = circuitJson.find(
+    (element) => element.type === "pcb_component" && element.pcb_component_id === cadComponent.pcb_component_id
+  );
+  return Boolean(
+    pcbComponent && pcbComponent.do_not_place && pcbComponent.is_allowed_to_be_off_board && pcbComponent.obstructs_within_bounds === false
+  );
+};
+
 // src/utils/resolve-model-url.ts
 var resolveModelUrl = (modelUrl, resolveStaticAsset) => {
   if (!modelUrl) return void 0;
@@ -32483,6 +33474,11 @@ var AnyCadComponent = ({
     (elm) => elm.type === "pcb_component" && elm.source_component_id === cad_component.source_component_id
   );
   const layer = pcbComponent?.layer ?? "top";
+  const isEnclosure = useMemo8(
+    () => isLegacyFdmEnclosure(cad_component, circuitJson),
+    [cad_component, circuitJson]
+  );
+  const isTranslucent = isEnclosure ? visibility.enclosure === "translucent" : Boolean(cad_component.show_as_translucent_model);
   const sourceModelType = getCadModelType(cad_component);
   const renderedModelType = getRenderedCadModelType(sourceModelType);
   const gltfModelType = cad_component.model_glb_url ? "glb" : "gltf";
@@ -32518,7 +33514,7 @@ var AnyCadComponent = ({
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
-            isTranslucent: cad_component.show_as_translucent_model
+            isTranslucent
           },
           `${cad_component.cad_component_id}-gltf-${gltfUrl}`
         )
@@ -32543,7 +33539,7 @@ var AnyCadComponent = ({
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
-            isTranslucent: cad_component.show_as_translucent_model
+            isTranslucent
           },
           `${cad_component.cad_component_id}-mixed-${url}`
         )
@@ -32568,7 +33564,7 @@ var AnyCadComponent = ({
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
-            isTranslucent: cad_component.show_as_translucent_model
+            isTranslucent
           },
           `${cad_component.cad_component_id}-step-${stepUrl}`
         )
@@ -32580,7 +33576,7 @@ var AnyCadComponent = ({
     cad_component.cad_component_id,
     cad_component.footprinter_string,
     cad_component.model_jscad,
-    cad_component.show_as_translucent_model,
+    isTranslucent,
     gltfUrl,
     gltfModelType,
     handleHover,
@@ -32642,7 +33638,7 @@ var AnyCadComponent = ({
         onHover: handleHover,
         onUnhover: handleUnhover,
         isHovered,
-        isTranslucent: cad_component.show_as_translucent_model
+        isTranslucent
       },
       cad_component.cad_component_id
     );
@@ -32657,21 +33653,17 @@ var AnyCadComponent = ({
         onHover: handleHover,
         onUnhover: handleUnhover,
         isHovered,
-        isTranslucent: cad_component.show_as_translucent_model
+        isTranslucent
       }
     );
   }
-  if (cad_component.show_as_translucent_model) {
-    if (!visibility.translucentModels) {
-      return null;
-    }
+  if (isEnclosure) {
+    if (visibility.enclosure === "hidden") return null;
+  } else if (cad_component.show_as_translucent_model) {
+    if (!visibility.translucentModels) return null;
   } else {
-    if (isThroughHole && !visibility.throughHoleModels) {
-      return null;
-    }
-    if (!isThroughHole && !visibility.smtModels) {
-      return null;
-    }
+    if (isThroughHole && !visibility.throughHoleModels) return null;
+    if (!isThroughHole && !visibility.smtModels) return null;
   }
   return /* @__PURE__ */ jsxs2(Fragment4, { children: [
     modelComponent,
@@ -32704,7 +33696,7 @@ import * as THREE23 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.589",
+  version: "0.0.591",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -32765,7 +33757,7 @@ var package_default = {
     "bun-match-svg": "^0.0.9",
     "bun-types": "1.2.1",
     debug: "^4.4.0",
-    "jscad-electronics": "^0.0.138",
+    "jscad-electronics": "^0.0.146",
     "jscad-planner": "^0.0.13",
     jsdom: "^26.0.0",
     "manifold-3d": "^3.2.1",
@@ -46668,6 +47660,21 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx32(
     children: /* @__PURE__ */ jsx32("path", { d: "m9 18 6-6-6-6" })
   }
 );
+var CheckMinusIcon = () => /* @__PURE__ */ jsx32(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx32("path", { d: "M5 12h14" })
+  }
+);
 var DotIcon = () => /* @__PURE__ */ jsx32(
   "svg",
   {
@@ -47060,6 +48067,35 @@ var AppearanceMenu = () => {
                   /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
                 ]
               }
+            ),
+            /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles }),
+            /* @__PURE__ */ jsxs7(
+              Item22,
+              {
+                style: {
+                  ...itemStyles,
+                  backgroundColor: hoveredItem === "enclosure" ? "#404040" : "transparent"
+                },
+                onSelect: (e) => e.preventDefault(),
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  setLayerVisibility(
+                    "enclosure",
+                    nextEnclosureVisibility(visibility.enclosure)
+                  );
+                },
+                onMouseEnter: () => setHoveredItem("enclosure"),
+                onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("enclosure"),
+                title: `Enclosure: ${visibility.enclosure}`,
+                children: [
+                  /* @__PURE__ */ jsxs7("span", { style: iconContainerStyles, children: [
+                    visibility.enclosure === "opaque" && /* @__PURE__ */ jsx33(CheckIcon, {}),
+                    visibility.enclosure === "translucent" && /* @__PURE__ */ jsx33(CheckMinusIcon, {})
+                  ] }),
+                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Enclosure" })
+                ]
+              }
             )
           ]
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.590",
+  "version": "0.0.592",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -61,7 +61,7 @@
     "bun-match-svg": "^0.0.9",
     "bun-types": "1.2.1",
     "debug": "^4.4.0",
-    "jscad-electronics": "^0.0.138",
+    "jscad-electronics": "^0.0.146",
     "jscad-planner": "^0.0.13",
     "jsdom": "^26.0.0",
     "manifold-3d": "^3.2.1",