@tscircuit/3d-viewer 0.0.414 → 0.0.416

package/dist/index.js

@@ -14228,15 +14228,15 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState16, useCallback as useCallback8, useRef as useRef9, useEffect as useEffect23 } from "react";
+import { useState as useState18, useCallback as useCallback9, useRef as useRef9, useEffect as useEffect24 } from "react";
 
 // src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/circuit-json-util";
-import { forwardRef as forwardRef3, useMemo as useMemo17 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo18 } from "react";
 
 // src/AnyCadComponent.tsx
 import { su } from "@tscircuit/circuit-json-util";
-import { useMemo as useMemo6, useState as useState5, useCallback as useCallback2 } from "react";
+import { useMemo as useMemo7, useState as useState6, useCallback as useCallback3 } from "react";
 
 // src/ContainerWithTooltip.tsx
 import { useEffect as useEffect2 } from "react";
@@ -26440,15 +26440,87 @@ var Html = ({ children, position, style }) => {
   return portal;
 };
 
+// src/contexts/LayerVisibilityContext.tsx
+import {
+  createContext as createContext3,
+  useContext as useContext3,
+  useState as useState5,
+  useCallback as useCallback2,
+  useMemo as useMemo6
+} from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var defaultVisibility = {
+  boardBody: true,
+  topCopper: true,
+  bottomCopper: true,
+  adhesive: false,
+  solderPaste: false,
+  topSilkscreen: true,
+  bottomSilkscreen: true,
+  topMask: true,
+  bottomMask: true,
+  throughHoleModels: true,
+  smtModels: true,
+  virtualModels: false,
+  modelsNotInPosFile: false,
+  modelsMarkedDNP: false,
+  modelBoundingBoxes: false,
+  threedAxis: false,
+  backgroundStart: true,
+  backgroundEnd: true
+};
+var LayerVisibilityContext = createContext3(void 0);
+var LayerVisibilityProvider = ({ children }) => {
+  const [visibility, setVisibility] = useState5(defaultVisibility);
+  const toggleLayer = useCallback2((layer) => {
+    setVisibility((prev) => ({
+      ...prev,
+      [layer]: !prev[layer]
+    }));
+  }, []);
+  const setLayerVisibility = useCallback2(
+    (layer, visible) => {
+      setVisibility((prev) => ({
+        ...prev,
+        [layer]: visible
+      }));
+    },
+    []
+  );
+  const resetToDefaults = useCallback2(() => {
+    setVisibility(defaultVisibility);
+  }, []);
+  const value = useMemo6(
+    () => ({
+      visibility,
+      toggleLayer,
+      setLayerVisibility,
+      resetToDefaults
+    }),
+    [visibility, toggleLayer, setLayerVisibility, resetToDefaults]
+  );
+  return /* @__PURE__ */ jsx8(LayerVisibilityContext.Provider, { value, children });
+};
+var useLayerVisibility = () => {
+  const context = useContext3(LayerVisibilityContext);
+  if (!context) {
+    throw new Error(
+      "useLayerVisibility must be used within a LayerVisibilityProvider"
+    );
+  }
+  return context;
+};
+
 // src/AnyCadComponent.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var AnyCadComponent = ({
   cad_component: cad_component2,
   circuitJson
 }) => {
-  const [isHovered, setIsHovered] = useState5(false);
-  const [hoverPosition, setHoverPosition] = useState5(null);
-  const handleHover = useCallback2((e) => {
+  const [isHovered, setIsHovered] = useState6(false);
+  const { visibility } = useLayerVisibility();
+  const [hoverPosition, setHoverPosition] = useState6(null);
+  const handleHover = useCallback3((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
       setHoverPosition(e.mousePosition);
@@ -26457,11 +26529,11 @@ var AnyCadComponent = ({
       setHoverPosition(null);
     }
   }, []);
-  const handleUnhover = useCallback2(() => {
+  const handleUnhover = useCallback3(() => {
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const componentName = useMemo6(() => {
+  const componentName = useMemo7(() => {
     return su(circuitJson).source_component.getUsing({
       source_component_id: cad_component2.source_component_id
     })?.name;
@@ -26475,7 +26547,7 @@ var AnyCadComponent = ({
   ) : void 0;
   let modelComponent = null;
   if (url) {
-    modelComponent = /* @__PURE__ */ jsx8(
+    modelComponent = /* @__PURE__ */ jsx9(
       MixedStlModel,
       {
         url,
@@ -26493,7 +26565,7 @@ var AnyCadComponent = ({
       cad_component2.cad_component_id
     );
   } else if (gltfUrl) {
-    modelComponent = /* @__PURE__ */ jsx8(
+    modelComponent = /* @__PURE__ */ jsx9(
       GltfModel,
       {
         gltfUrl,
@@ -26511,7 +26583,7 @@ var AnyCadComponent = ({
       cad_component2.cad_component_id
     );
   } else if (cad_component2.model_jscad) {
-    modelComponent = /* @__PURE__ */ jsx8(
+    modelComponent = /* @__PURE__ */ jsx9(
       JscadModel,
       {
         jscadPlan: cad_component2.model_jscad,
@@ -26524,7 +26596,7 @@ var AnyCadComponent = ({
       cad_component2.cad_component_id
     );
   } else if (cad_component2.footprinter_string) {
-    modelComponent = /* @__PURE__ */ jsx8(
+    modelComponent = /* @__PURE__ */ jsx9(
       FootprinterModel,
       {
         positionOffset: cad_component2.position ? [
@@ -26541,9 +26613,12 @@ var AnyCadComponent = ({
       }
     );
   }
+  if (!visibility.smtModels) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
     modelComponent,
-    isHovered && hoverPosition ? /* @__PURE__ */ jsx8(
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx9(
       Html,
       {
         position: hoverPosition,
@@ -26568,15 +26643,15 @@ var AnyCadComponent = ({
 // src/CadViewerContainer.tsx
 import {
   forwardRef as forwardRef2,
-  useMemo as useMemo13,
-  useState as useState7
+  useMemo as useMemo14,
+  useState as useState8
 } from "react";
 import * as THREE13 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.413",
+  version: "0.0.415",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -26655,11 +26730,11 @@ var package_default = {
 };
 
 // src/three-components/cube-with-labeled-sides.tsx
-import { useEffect as useEffect10, useMemo as useMemo8 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo9 } from "react";
 import * as THREE8 from "three";
 
 // src/react-three/Text.tsx
-import { useEffect as useEffect9, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8 } from "react";
 import { Text as TroikaText } from "troika-three-text";
 var Text = ({
   children,
@@ -26674,7 +26749,7 @@ var Text = ({
   depthOffset
 }) => {
   const { rootObject } = useThree();
-  const mesh = useMemo7(() => {
+  const mesh = useMemo8(() => {
     const textMesh = new TroikaText();
     textMesh.text = children;
     if (position) textMesh.position.fromArray(position);
@@ -26699,7 +26774,7 @@ var Text = ({
     anchorY,
     depthOffset
   ]);
-  useEffect9(() => {
+  useEffect10(() => {
     const parentObject = parent || rootObject;
     if (!parentObject || !mesh) return;
     parentObject.add(mesh);
@@ -26712,7 +26787,7 @@ var Text = ({
 };
 
 // src/three-components/cube-with-labeled-sides.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 if (typeof window !== "undefined") {
   window.TSCI_MAIN_CAMERA_ROTATION = new THREE8.Euler(0, 0, 0);
 }
@@ -26727,7 +26802,7 @@ function computePointInFront(rotationVector, distance2) {
 }
 var CubeWithLabeledSides = ({}) => {
   const { camera, scene } = useThree();
-  useEffect10(() => {
+  useEffect11(() => {
     if (!scene) return;
     const ambientLight = new THREE8.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
@@ -26742,7 +26817,7 @@ var CubeWithLabeledSides = ({}) => {
     camera.position.copy(cameraPosition);
     camera.lookAt(0, 0, 0);
   });
-  const group = useMemo8(() => {
+  const group = useMemo9(() => {
     const g = new THREE8.Group();
     g.rotation.fromArray([Math.PI / 2, 0, 0]);
     const box = new THREE8.Mesh(
@@ -26757,7 +26832,7 @@ var CubeWithLabeledSides = ({}) => {
     g.add(edges);
     return g;
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!scene) return;
     scene.add(group);
     return () => {
@@ -26765,7 +26840,7 @@ var CubeWithLabeledSides = ({}) => {
     };
   }, [scene, group]);
   return /* @__PURE__ */ jsxs3(Fragment4, { children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Text,
       {
         parent: group,
@@ -26775,7 +26850,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Front"
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Text,
       {
         parent: group,
@@ -26786,7 +26861,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Text,
       {
         parent: group,
@@ -26797,7 +26872,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Right"
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Text,
       {
         parent: group,
@@ -26808,7 +26883,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Left"
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Text,
       {
         parent: group,
@@ -26819,7 +26894,7 @@ var CubeWithLabeledSides = ({}) => {
         children: "Top"
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Text,
       {
         parent: group,
@@ -26836,12 +26911,12 @@ var CubeWithLabeledSides = ({}) => {
 // src/react-three/Canvas.tsx
 import {
   useRef as useRef4,
-  useEffect as useEffect11,
-  useState as useState6,
-  useCallback as useCallback3,
+  useEffect as useEffect12,
+  useState as useState7,
+  useCallback as useCallback4,
   forwardRef,
   useImperativeHandle,
-  useMemo as useMemo9
+  useMemo as useMemo10
 } from "react";
 import * as THREE10 from "three";
 
@@ -26859,23 +26934,23 @@ var configureRenderer = (renderer) => {
 };
 
 // src/react-three/Canvas.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Canvas = forwardRef(
   ({ children, scene: sceneProps, camera: cameraProps, style }, ref) => {
     const mountRef = useRef4(null);
-    const [contextState, setContextState] = useState6(
+    const [contextState, setContextState] = useState7(
       null
     );
     const frameListeners = useRef4(
       []
     );
-    const addFrameListener = useCallback3(
+    const addFrameListener = useCallback4(
       (listener) => {
         frameListeners.current.push(listener);
       },
       []
     );
-    const removeFrameListener = useCallback3(
+    const removeFrameListener = useCallback4(
       (listener) => {
         frameListeners.current = frameListeners.current.filter(
           (l) => l !== listener
@@ -26883,13 +26958,13 @@ var Canvas = forwardRef(
       },
       []
     );
-    const scene = useMemo9(() => new THREE10.Scene(), []);
+    const scene = useMemo10(() => new THREE10.Scene(), []);
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
     const rootObject = useRef4(new THREE10.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
-    useEffect11(() => {
+    useEffect12(() => {
       if (!mountRef.current) return;
       removeExistingCanvases(mountRef.current);
       const renderer = new THREE10.WebGLRenderer({ antialias: true, alpha: true });
@@ -26961,12 +27036,12 @@ var Canvas = forwardRef(
         }
       };
     }, [scene, addFrameListener, removeFrameListener]);
-    return /* @__PURE__ */ jsx10("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx10(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx10(HoverProvider, { children }) }) });
+    return /* @__PURE__ */ jsx11("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx11(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx11(HoverProvider, { children }) }) });
   }
 );
 
 // src/react-three/OrbitControls.tsx
-import { useEffect as useEffect12, useMemo as useMemo10 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo11 } from "react";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 var OrbitControls = ({
   autoRotate,
@@ -26980,11 +27055,11 @@ var OrbitControls = ({
   target
 }) => {
   const { camera, renderer } = useThree();
-  const controls = useMemo10(() => {
+  const controls = useMemo11(() => {
     if (!camera || !renderer) return null;
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!controls) return;
     controls.autoRotate = autoRotate || false;
     controls.autoRotateSpeed = autoRotateSpeed || 1;
@@ -27009,14 +27084,14 @@ var OrbitControls = ({
     dampingFactor,
     target
   ]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!controls || !onStart) return;
     controls.addEventListener("start", onStart);
     return () => {
       controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!controls) return;
     return () => {
       controls.dispose();
@@ -27029,7 +27104,7 @@ var OrbitControls = ({
 };
 
 // src/react-three/Grid.tsx
-import { useEffect as useEffect13, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
 import * as THREE11 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
@@ -27075,7 +27150,7 @@ var Grid = ({
 }) => {
   const { scene, camera } = useThree();
   const size2 = 1e3;
-  const gridMesh = useMemo11(() => {
+  const gridMesh = useMemo12(() => {
     const geometry = new THREE11.PlaneGeometry(size2, size2);
     geometry.rotateX(-Math.PI / 2);
     const material = new THREE11.ShaderMaterial({
@@ -27104,7 +27179,7 @@ var Grid = ({
       gridMesh.position.set(camera.position.x, camera.position.y, 0);
     }
   });
-  useEffect13(() => {
+  useEffect14(() => {
     if (!scene || !gridMesh) return;
     scene.add(gridMesh);
     return () => {
@@ -27121,21 +27196,21 @@ var Grid = ({
 };
 
 // src/react-three/Lights.tsx
-import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo13 } from "react";
 import * as THREE12 from "three";
 var Lights = () => {
   const { scene } = useThree();
-  const ambientLight = useMemo12(
+  const ambientLight = useMemo13(
     () => new THREE12.AmbientLight(16777215, Math.PI / 2),
     []
   );
-  const pointLight = useMemo12(() => {
+  const pointLight = useMemo13(() => {
     const light = new THREE12.PointLight(16777215, Math.PI / 4);
     light.position.set(-10, -10, 10);
     light.decay = 0;
     return light;
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!scene) return;
     scene.add(ambientLight);
     scene.add(pointLight);
@@ -27148,7 +27223,7 @@ var Lights = () => {
 };
 
 // src/CadViewerContainer.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var RotationTracker = () => {
   const { camera } = useThree();
   useFrame(() => {
@@ -27168,10 +27243,10 @@ var CadViewerContainer = forwardRef2(
     boardCenter,
     onUserInteraction
   }, ref) => {
-    const [isInteractionEnabled, setIsInteractionEnabled] = useState7(
+    const [isInteractionEnabled, setIsInteractionEnabled] = useState8(
       !clickToInteractEnabled
     );
-    const gridSectionSize = useMemo13(() => {
+    const gridSectionSize = useMemo14(() => {
       if (!boardDimensions) return 10;
       const width10 = boardDimensions.width ?? 0;
       const height10 = boardDimensions.height ?? 0;
@@ -27179,12 +27254,12 @@ var CadViewerContainer = forwardRef2(
       const desired = largest * 1.5;
       return desired > 10 ? desired : 10;
     }, [boardDimensions]);
-    const orbitTarget = useMemo13(() => {
+    const orbitTarget = useMemo14(() => {
       if (!boardCenter) return void 0;
       return [boardCenter.x, boardCenter.y, 0];
     }, [boardCenter]);
     return /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
@@ -27194,7 +27269,7 @@ var CadViewerContainer = forwardRef2(
             width: 120,
             height: 120
           },
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12(
             Canvas,
             {
               camera: {
@@ -27202,7 +27277,7 @@ var CadViewerContainer = forwardRef2(
                 position: [1, 1, 1]
               },
               style: { zIndex: 10 },
-              children: /* @__PURE__ */ jsx11(CubeWithLabeledSides, {})
+              children: /* @__PURE__ */ jsx12(CubeWithLabeledSides, {})
             }
           )
         }
@@ -27214,8 +27289,8 @@ var CadViewerContainer = forwardRef2(
           scene: { up: new THREE13.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           children: [
-            /* @__PURE__ */ jsx11(RotationTracker, {}),
-            isInteractionEnabled && /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(RotationTracker, {}),
+            isInteractionEnabled && /* @__PURE__ */ jsx12(
               OrbitControls,
               {
                 autoRotate: !autoRotateDisabled,
@@ -27229,8 +27304,8 @@ var CadViewerContainer = forwardRef2(
                 target: orbitTarget
               }
             ),
-            /* @__PURE__ */ jsx11(Lights, {}),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(Lights, {}),
+            /* @__PURE__ */ jsx12(
               Grid,
               {
                 rotation: [Math.PI / 2, 0, 0],
@@ -27262,7 +27337,7 @@ var CadViewerContainer = forwardRef2(
           ]
         }
       ),
-      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx11(
+      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -27281,7 +27356,7 @@ var CadViewerContainer = forwardRef2(
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12(
             "div",
             {
               style: {
@@ -27304,9 +27379,9 @@ var CadViewerContainer = forwardRef2(
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 var useConvertChildrenToCircuitJson = (children) => {
-  return useMemo14(() => {
+  return useMemo15(() => {
     if (!children) return [];
     const circuit = new Circuit();
     circuit.add(children);
@@ -27316,21 +27391,23 @@ var useConvertChildrenToCircuitJson = (children) => {
 };
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState8, useEffect as useEffect16 } from "react";
+import { useState as useState9, useEffect as useEffect17 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
-  const [stls, setStls] = useState8([]);
-  const [loading, setLoading] = useState8(true);
-  useEffect16(() => {
+  const [stls, setStls] = useState9([]);
+  const [loading, setLoading] = useState9(true);
+  useEffect17(() => {
     if (!geom) return;
     const generateStls = async () => {
       setLoading(true);
       const geometries = Array.isArray(geom) ? geom : [geom];
-      const stlPromises = geometries.map(async (g) => {
+      const stlPromises = geometries.map(async (g, index) => {
         const rawParts = stlSerializer.serialize({ binary: true }, [g]);
         const blob = new Blob(rawParts);
         const stlData = await blob.arrayBuffer();
-        return { stlData, color: g.color };
+        const layerType = g.layerType;
+        const inferredLayerType = layerType || (index === 0 ? "board" : void 0);
+        return { stlData, color: g.color, layerType: inferredLayerType };
       });
       try {
         const generatedStls = await Promise.all(stlPromises);
@@ -27348,7 +27425,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState9, useEffect as useEffect17, useRef as useRef6 } from "react";
+import { useState as useState10, useEffect as useEffect18, useRef as useRef6 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_primitives2 = __toESM(require_primitives(), 1);
@@ -27475,7 +27552,7 @@ function extractRectBorderRadius(source) {
 }
 
 // src/geoms/plated-hole.ts
-var platedHoleLipHeight = 0.05;
+var platedHoleLipHeight = 0.02;
 var RECT_PAD_SEGMENTS = 64;
 var maybeClip = (geom, clipGeom) => clipGeom ? (0, import_booleans.intersect)(clipGeom, geom) : geom;
 var createRectPadGeom = ({
@@ -27504,7 +27581,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
   const throughDrillHeight = ctx.pcbThickness + 2 * platedHoleLipHeight + 4 * M;
   if (plated_hole.shape === "circle") {
     const outerDiameter = plated_hole.outer_diameter ?? Math.max(plated_hole.hole_diameter, 0);
-    const copperHeight = ctx.pcbThickness + 2 * (platedHoleLipHeight + M);
+    const copperHeight = ctx.pcbThickness + 2 * platedHoleLipHeight;
     const copperBody = (0, import_primitives3.cylinder)({
       center: [plated_hole.x, plated_hole.y, 0],
       radius: outerDiameter / 2,
@@ -27530,7 +27607,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
         createRectPadGeom({
           width: padWidth,
           height: padHeight,
-          thickness: platedHoleLipHeight + 0.1,
+          thickness: platedHoleLipHeight,
           // Slightly thicker to ensure connection
           center: [
             plated_hole.x,
@@ -27544,7 +27621,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
         createRectPadGeom({
           width: padWidth,
           height: padHeight,
-          thickness: platedHoleLipHeight + 0.1,
+          thickness: platedHoleLipHeight,
           // Slightly thicker to ensure connection
           center: [
             plated_hole.x,
@@ -27696,11 +27773,11 @@ var platedHole = (plated_hole, ctx, options = {}) => {
         size: shouldRotate ? [
           holeHeight + 2 * barrelMargin,
           rectLength + 2 * barrelMargin,
-          ctx.pcbThickness + 0.2
+          ctx.pcbThickness + 0.02
         ] : [
           rectLength + 2 * barrelMargin,
           holeHeight + 2 * barrelMargin,
-          ctx.pcbThickness + 0.2
+          ctx.pcbThickness
         ]
       }),
       (0, import_primitives3.cylinder)({
@@ -27714,8 +27791,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
           0
         ],
         radius: holeRadius + barrelMargin,
-        height: ctx.pcbThickness + 0.2
-        // extend slightly above/below PCB
+        height: ctx.pcbThickness + 0.02
       }),
       (0, import_primitives3.cylinder)({
         center: shouldRotate ? [
@@ -27728,7 +27804,7 @@ var platedHole = (plated_hole, ctx, options = {}) => {
           0
         ],
         radius: holeRadius + barrelMargin,
-        height: ctx.pcbThickness + 0.2
+        height: ctx.pcbThickness + 0.02
       })
     );
     const holeCut = (0, import_booleans.union)(
@@ -27763,30 +27839,41 @@ var platedHole = (plated_hole, ctx, options = {}) => {
         height: throughDrillHeight * 1.1
       })
     );
-    const mainFill = createRectPadGeom({
+    const copperTopPad = createRectPadGeom({
       width: padWidth,
       height: padHeight,
-      thickness: ctx.pcbThickness - 2 * platedHoleLipHeight - M * 2 + 0.1,
-      center: [plated_hole.x, plated_hole.y, 0],
+      thickness: platedHoleLipHeight,
+      center: [
+        plated_hole.x,
+        plated_hole.y,
+        ctx.pcbThickness / 2 + platedHoleLipHeight / 2 + M - 0.05
+      ],
       borderRadius: rectBorderRadius
     });
-    const createPadWithHole = (zOffset) => {
-      const pad2 = createRectPadGeom({
-        width: padWidth,
-        height: padHeight,
-        thickness: platedHoleLipHeight + 0.1,
-        center: [plated_hole.x, plated_hole.y, zOffset],
-        borderRadius: rectBorderRadius
+    const copperBottomPad = createRectPadGeom({
+      width: padWidth,
+      height: padHeight,
+      thickness: platedHoleLipHeight,
+      center: [
+        plated_hole.x,
+        plated_hole.y,
+        -ctx.pcbThickness / 2 - platedHoleLipHeight / 2 - M + 0.05
+      ],
+      borderRadius: rectBorderRadius
+    });
+    const copperFill = (() => {
+      const height10 = ctx.pcbThickness - platedHoleLipHeight * 2 - M * 2 + 0.1;
+      const rect2d = (0, import_primitives3.roundedRectangle)({
+        size: [padWidth, padHeight],
+        roundRadius: rectBorderRadius || 0,
+        segments: RECT_PAD_SEGMENTS
       });
-      return (0, import_booleans.subtract)(pad2, holeCut);
-    };
-    const topPad = createPadWithHole(
-      ctx.pcbThickness / 2 - platedHoleLipHeight / 2 + 0.05
-    );
-    const bottomPad = createPadWithHole(
-      -ctx.pcbThickness / 2 + platedHoleLipHeight / 2 - 0.05
-    );
-    const filledArea = (0, import_booleans.subtract)(mainFill, holeCut);
+      const extruded = (0, import_extrusions2.extrudeLinear)({ height: height10 }, rect2d);
+      return (0, import_transforms2.translate)([plated_hole.x, plated_hole.y, -height10 / 2], extruded);
+    })();
+    const copperTopPadCut = (0, import_booleans.subtract)(copperTopPad, holeCut);
+    const copperBottomPadCut = (0, import_booleans.subtract)(copperBottomPad, holeCut);
+    const copperFillCut = (0, import_booleans.subtract)(copperFill, holeCut);
     const barrelHoleCut = (0, import_booleans.union)(
       (0, import_primitives3.cuboid)({
         center: [plated_hole.x + holeOffsetX, plated_hole.y + holeOffsetY, 0],
@@ -27820,9 +27907,11 @@ var platedHole = (plated_hole, ctx, options = {}) => {
       })
     );
     const barrelWithHole = (0, import_booleans.subtract)(barrel, barrelHoleCut);
-    const finalCopper = (0, import_booleans.union)(filledArea, barrelWithHole, topPad, bottomPad);
-    let result = maybeClip(finalCopper, clipGeom);
-    return (0, import_colors2.colorize)(colors.copper, result);
+    const finalCopper = maybeClip(
+      (0, import_booleans.union)(copperTopPadCut, copperBottomPadCut, copperFillCut, barrelWithHole),
+      clipGeom
+    );
+    return (0, import_colors2.colorize)(colors.copper, finalCopper);
   } else {
     throw new Error(`Unsupported plated hole shape: ${plated_hole.shape}`);
   }
@@ -28660,111 +28749,80 @@ var BoardGeomBuilder = class {
   }
   processHole(hole) {
     if (!this.boardGeom) return;
+    const holeDepth = this.ctx.pcbThickness * 1.5;
+    const copperInset = 0.02;
     if (hole.hole_shape === "round" || hole.hole_shape === "circle") {
       const cyGeom = (0, import_primitives6.cylinder)({
         center: [hole.x, hole.y, 0],
         radius: hole.hole_diameter / 2 + M,
-        // Add margin for subtraction
-        height: this.ctx.pcbThickness * 1.5
-        // Ensure it cuts through
+        height: holeDepth
       });
       this.boardGeom = (0, import_booleans3.subtract)(this.boardGeom, cyGeom);
       this.padGeoms = this.padGeoms.map(
         (pg) => (0, import_colors4.colorize)(colors.copper, (0, import_booleans3.subtract)(pg, cyGeom))
       );
-    } else if (hole.hole_shape === "pill") {
+      const copperCut = (0, import_primitives6.cylinder)({
+        center: [hole.x, hole.y, 0],
+        radius: hole.hole_diameter / 2 + M / 2,
+        height: holeDepth
+      });
+      this.platedHoleGeoms = this.platedHoleGeoms.map(
+        (phg) => (0, import_colors4.colorize)(colors.copper, (0, import_booleans3.subtract)(phg, copperCut))
+      );
+    } else if (hole.hole_shape === "pill" || hole.hole_shape === "rotated_pill") {
       const holeWidth = hole.hole_width;
       const holeHeight = hole.hole_height;
       const holeRadius = Math.min(holeWidth, holeHeight) / 2;
       const rectLength = Math.abs(holeWidth - holeHeight);
+      const isRotated = hole.hole_shape === "rotated_pill";
       let pillHole;
       if (holeWidth > holeHeight) {
         pillHole = (0, import_booleans3.union)(
           (0, import_primitives6.cuboid)({
             center: [hole.x, hole.y, 0],
-            size: [rectLength, holeHeight, this.ctx.pcbThickness * 1.5]
+            size: [rectLength, holeHeight, holeDepth]
           }),
           (0, import_primitives6.cylinder)({
             center: [hole.x - rectLength / 2, hole.y, 0],
             radius: holeRadius,
-            height: this.ctx.pcbThickness * 1.5
+            height: holeDepth
           }),
           (0, import_primitives6.cylinder)({
             center: [hole.x + rectLength / 2, hole.y, 0],
             radius: holeRadius,
-            height: this.ctx.pcbThickness * 1.5
+            height: holeDepth
           })
         );
       } else {
         pillHole = (0, import_booleans3.union)(
           (0, import_primitives6.cuboid)({
             center: [hole.x, hole.y, 0],
-            size: [holeWidth, rectLength, this.ctx.pcbThickness * 1.5]
+            size: [holeWidth, rectLength, holeDepth]
           }),
           (0, import_primitives6.cylinder)({
             center: [hole.x, hole.y - rectLength / 2, 0],
             radius: holeRadius,
-            height: this.ctx.pcbThickness * 1.5
+            height: holeDepth
           }),
           (0, import_primitives6.cylinder)({
             center: [hole.x, hole.y + rectLength / 2, 0],
             radius: holeRadius,
-            height: this.ctx.pcbThickness * 1.5
+            height: holeDepth
           })
         );
       }
-      this.boardGeom = (0, import_booleans3.subtract)(this.boardGeom, pillHole);
-      this.padGeoms = this.padGeoms.map(
-        (pg) => (0, import_colors4.colorize)(colors.copper, (0, import_booleans3.subtract)(pg, pillHole))
-      );
-    } else if (hole.hole_shape === "rotated_pill") {
-      const holeWidth = hole.hole_width;
-      const holeHeight = hole.hole_height;
-      const holeRadius = Math.min(holeWidth, holeHeight) / 2;
-      const rectLength = Math.abs(holeWidth - holeHeight);
-      let pillHole;
-      if (holeWidth > holeHeight) {
-        pillHole = (0, import_booleans3.union)(
-          (0, import_primitives6.cuboid)({
-            center: [0, 0, 0],
-            size: [rectLength, holeHeight, this.ctx.pcbThickness * 1.5]
-          }),
-          (0, import_primitives6.cylinder)({
-            center: [-rectLength / 2, 0, 0],
-            radius: holeRadius,
-            height: this.ctx.pcbThickness * 1.5
-          }),
-          (0, import_primitives6.cylinder)({
-            center: [rectLength / 2, 0, 0],
-            radius: holeRadius,
-            height: this.ctx.pcbThickness * 1.5
-          })
-        );
-      } else {
-        pillHole = (0, import_booleans3.union)(
-          (0, import_primitives6.cuboid)({
-            center: [0, 0, 0],
-            size: [holeWidth, rectLength, this.ctx.pcbThickness * 1.5]
-          }),
-          (0, import_primitives6.cylinder)({
-            center: [0, -rectLength / 2, 0],
-            radius: holeRadius,
-            height: this.ctx.pcbThickness * 1.5
-          }),
-          (0, import_primitives6.cylinder)({
-            center: [0, rectLength / 2, 0],
-            radius: holeRadius,
-            height: this.ctx.pcbThickness * 1.5
-          })
-        );
+      if (isRotated) {
+        const rotationRadians = hole.ccw_rotation * Math.PI / 180;
+        pillHole = (0, import_transforms4.rotateZ)(rotationRadians, pillHole);
       }
-      const rotationRadians = hole.ccw_rotation * Math.PI / 180;
-      pillHole = (0, import_transforms4.rotateZ)(rotationRadians, pillHole);
-      pillHole = (0, import_transforms4.translate)([hole.x, hole.y, 0], pillHole);
       this.boardGeom = (0, import_booleans3.subtract)(this.boardGeom, pillHole);
       this.padGeoms = this.padGeoms.map(
         (pg) => (0, import_colors4.colorize)(colors.copper, (0, import_booleans3.subtract)(pg, pillHole))
       );
+      const copperPill = (0, import_expansions3.expand)({ delta: -copperInset }, pillHole);
+      this.platedHoleGeoms = this.platedHoleGeoms.map(
+        (phg) => (0, import_colors4.colorize)(colors.copper, (0, import_booleans3.subtract)(phg, copperPill))
+      );
     }
   }
   processPad(pad2) {
@@ -28986,9 +29044,9 @@ var BoardGeomBuilder = class {
 
 // src/hooks/useBoardGeomBuilder.ts
 var useBoardGeomBuilder = (circuitJson) => {
-  const [boardGeom, setBoardGeom] = useState9(null);
+  const [boardGeom, setBoardGeom] = useState10(null);
   const isProcessingRef = useRef6(false);
-  useEffect17(() => {
+  useEffect18(() => {
     let isCancelled = false;
     if (!circuitJson) {
       setBoardGeom(null);
@@ -29031,17 +29089,17 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState10, useCallback as useCallback4, useEffect as useEffect18, useMemo as useMemo15 } from "react";
+import { useState as useState11, useCallback as useCallback5, useEffect as useEffect19, useMemo as useMemo16 } from "react";
 import * as THREE14 from "three";
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var Error3d = ({
   error,
   cad_component: cad_component2
 }) => {
   const { rootObject } = useThree();
-  const [isHovered, setIsHovered] = useState10(false);
-  const [hoverPosition, setHoverPosition] = useState10(null);
-  const handleHover = useCallback4((e) => {
+  const [isHovered, setIsHovered] = useState11(false);
+  const [hoverPosition, setHoverPosition] = useState11(null);
+  const handleHover = useCallback5((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
       setHoverPosition(e.mousePosition);
@@ -29050,11 +29108,11 @@ var Error3d = ({
       setHoverPosition(null);
     }
   }, []);
-  const handleUnhover = useCallback4(() => {
+  const handleUnhover = useCallback5(() => {
     setIsHovered(false);
     setHoverPosition(null);
   }, []);
-  const position = useMemo15(() => {
+  const position = useMemo16(() => {
     if (cad_component2?.position) {
       const p = [
         cad_component2.position.x,
@@ -29065,12 +29123,12 @@ var Error3d = ({
     }
     return [0, 0, 0];
   }, [cad_component2]);
-  const group = useMemo15(() => {
+  const group = useMemo16(() => {
     const g = new THREE14.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!rootObject) return;
     rootObject.add(group);
     return () => {
@@ -29086,8 +29144,8 @@ var Error3d = ({
         onUnhover: handleUnhover,
         object: group,
         children: [
-          /* @__PURE__ */ jsx12(ErrorBox, { parent: group }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(ErrorBox, { parent: group }),
+          /* @__PURE__ */ jsx13(
             Text,
             {
               parent: group,
@@ -29102,7 +29160,7 @@ var Error3d = ({
         ]
       }
     ),
-    isHovered && hoverPosition ? /* @__PURE__ */ jsx12(
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx13(
       Html,
       {
         position: hoverPosition,
@@ -29125,7 +29183,7 @@ var Error3d = ({
   ] });
 };
 var ErrorBox = ({ parent }) => {
-  const mesh = useMemo15(() => {
+  const mesh = useMemo16(() => {
     const m = new THREE14.Mesh(
       new THREE14.BoxGeometry(0.5, 0.5, 0.5),
       new THREE14.MeshStandardMaterial({
@@ -29139,7 +29197,7 @@ var ErrorBox = ({ parent }) => {
     m.rotation.fromArray([Math.PI / 4, Math.PI / 4, 0]);
     return m;
   }, []);
-  useEffect18(() => {
+  useEffect19(() => {
     parent.add(mesh);
     return () => {
       parent.remove(mesh);
@@ -29149,7 +29207,7 @@ var ErrorBox = ({ parent }) => {
 };
 
 // src/three-components/STLModel.tsx
-import { useState as useState11, useEffect as useEffect19, useMemo as useMemo16 } from "react";
+import { useState as useState12, useEffect as useEffect20, useMemo as useMemo17 } from "react";
 import * as THREE15 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
@@ -29160,8 +29218,8 @@ function STLModel({
   opacity = 1
 }) {
   const { rootObject } = useThree();
-  const [geom, setGeom] = useState11(null);
-  useEffect19(() => {
+  const [geom, setGeom] = useState12(null);
+  useEffect20(() => {
     const loader = new STLLoader();
     if (stlData) {
       try {
@@ -29179,7 +29237,7 @@ function STLModel({
       });
     }
   }, [stlUrl, stlData]);
-  const mesh = useMemo16(() => {
+  const mesh = useMemo17(() => {
     if (!geom) return null;
     const material = new THREE15.MeshStandardMaterial({
       color: Array.isArray(color) ? new THREE15.Color(color[0], color[1], color[2]) : color,
@@ -29188,7 +29246,7 @@ function STLModel({
     });
     return new THREE15.Mesh(geom, material);
   }, [geom, color, opacity]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -29204,9 +29262,36 @@ function STLModel({
   return null;
 }
 
+// src/three-components/VisibleSTLModel.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function VisibleSTLModel({
+  stlData,
+  color,
+  opacity = 1,
+  layerType
+}) {
+  const { visibility } = useLayerVisibility();
+  let shouldShow = true;
+  if (layerType === "board") {
+    shouldShow = visibility.boardBody;
+  } else if (layerType === "top-copper") {
+    shouldShow = visibility.topCopper;
+  } else if (layerType === "bottom-copper") {
+    shouldShow = visibility.bottomCopper;
+  } else if (layerType === "top-silkscreen") {
+    shouldShow = visibility.topSilkscreen;
+  } else if (layerType === "bottom-silkscreen") {
+    shouldShow = visibility.bottomSilkscreen;
+  }
+  if (!shouldShow) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx14(STLModel, { stlData, color, opacity });
+}
+
 // src/three-components/ThreeErrorBoundary.tsx
-import React10 from "react";
-var ThreeErrorBoundary = class extends React10.Component {
+import React11 from "react";
+var ThreeErrorBoundary = class extends React11.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -29223,7 +29308,7 @@ var ThreeErrorBoundary = class extends React10.Component {
 };
 
 // src/CadViewerJscad.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var CadViewerJscad = forwardRef3(
   ({
     soup,
@@ -29234,12 +29319,12 @@ var CadViewerJscad = forwardRef3(
     onUserInteraction
   }, ref) => {
     const childrenSoup = useConvertChildrenToCircuitJson(children);
-    const internalCircuitJson = useMemo17(() => {
+    const internalCircuitJson = useMemo18(() => {
       const cj = soup ?? circuitJson;
       return cj ?? childrenSoup;
     }, [soup, circuitJson, childrenSoup]);
     const boardGeom = useBoardGeomBuilder(internalCircuitJson);
-    const initialCameraPosition = useMemo17(() => {
+    const initialCameraPosition = useMemo18(() => {
       if (!internalCircuitJson) return [5, 5, 5];
       try {
         const board = su4(internalCircuitJson).pcb_board.list()[0];
@@ -29258,7 +29343,7 @@ var CadViewerJscad = forwardRef3(
         return [5, 5, 5];
       }
     }, [internalCircuitJson]);
-    const boardDimensions = useMemo17(() => {
+    const boardDimensions = useMemo18(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su4(internalCircuitJson).pcb_board.list()[0];
@@ -29269,7 +29354,7 @@ var CadViewerJscad = forwardRef3(
         return void 0;
       }
     }, [internalCircuitJson]);
-    const boardCenter = useMemo17(() => {
+    const boardCenter = useMemo18(() => {
       if (!internalCircuitJson) return void 0;
       try {
         const board = su4(internalCircuitJson).pcb_board.list()[0];
@@ -29293,20 +29378,21 @@ var CadViewerJscad = forwardRef3(
         boardCenter,
         onUserInteraction,
         children: [
-          boardStls.map(({ stlData, color }, index) => /* @__PURE__ */ jsx13(
-            STLModel,
+          boardStls.map(({ stlData, color, layerType }, index) => /* @__PURE__ */ jsx15(
+            VisibleSTLModel,
             {
               stlData,
               color,
-              opacity: index === 0 ? 0.95 : 1
+              opacity: index === 0 ? 0.95 : 1,
+              layerType
             },
-            `board-${index - boardStls.length}`
+            `board-${index}`
           )),
-          cad_components.map((cad_component2) => /* @__PURE__ */ jsx13(
+          cad_components.map((cad_component2) => /* @__PURE__ */ jsx15(
             ThreeErrorBoundary,
             {
-              fallback: ({ error }) => /* @__PURE__ */ jsx13(Error3d, { cad_component: cad_component2, error }),
-              children: /* @__PURE__ */ jsx13(
+              fallback: ({ error }) => /* @__PURE__ */ jsx15(Error3d, { cad_component: cad_component2, error }),
+              children: /* @__PURE__ */ jsx15(
                 AnyCadComponent,
                 {
                   cad_component: cad_component2,
@@ -29325,10 +29411,10 @@ var CadViewerJscad = forwardRef3(
 
 // src/CadViewerManifold.tsx
 import { su as su13 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect21, useMemo as useMemo19, useState as useState14 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo20, useState as useState15 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
-import { useState as useState13, useEffect as useEffect20, useMemo as useMemo18, useRef as useRef7 } from "react";
+import { useState as useState14, useEffect as useEffect21, useMemo as useMemo19, useRef as useRef7 } from "react";
 import { su as su12 } from "@tscircuit/circuit-json-util";
 import * as THREE23 from "three";
 
@@ -29771,6 +29857,7 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
   const platedHoleBoardDrills = [];
   const pcbPlatedHoles = su8(circuitJson).pcb_plated_hole.list();
   const platedHoleCopperGeoms = [];
+  const platedHoleCopperOpsForSubtract = [];
   const createPillOp = (width10, height10, depth) => {
     const pillOp = createRoundedRectPrism({
       Manifold,
@@ -29827,6 +29914,7 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         manifoldInstancesForCleanup.push(clipped);
         finalCopperOp = clipped;
       }
+      platedHoleCopperOpsForSubtract.push(finalCopperOp);
       const threeGeom = manifoldMeshToThreeGeometry(finalCopperOp.getMesh());
       platedHoleCopperGeoms.push({
         key: `ph-${ph.pcb_plated_hole_id || index}`,
@@ -29878,9 +29966,17 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
       }
       const translatedPlatedPart = finalPlatedPartOp.translate([ph.x, ph.y, 0]);
       manifoldInstancesForCleanup.push(translatedPlatedPart);
-      const threeGeom = manifoldMeshToThreeGeometry(
-        translatedPlatedPart.getMesh()
-      );
+      let finalCopperOp = translatedPlatedPart;
+      if (boardClipVolume) {
+        const clipped = Manifold.intersection([
+          translatedPlatedPart,
+          boardClipVolume
+        ]);
+        manifoldInstancesForCleanup.push(clipped);
+        finalCopperOp = clipped;
+      }
+      platedHoleCopperOpsForSubtract.push(finalCopperOp);
+      const threeGeom = manifoldMeshToThreeGeometry(finalCopperOp.getMesh());
       platedHoleCopperGeoms.push({
         key: `ph-${ph.pcb_plated_hole_id || index}`,
         geometry: threeGeom,
@@ -29921,14 +30017,14 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         Manifold,
         width: padWidth,
         height: padHeight,
-        thickness: padThickness + 0.1,
+        thickness: padThickness,
         borderRadius: rectBorderRadius
       }).translate([0, 0, pcbThickness / 2 - padThickness / 2 + 0.05]);
       const bottomPad = createRoundedRectPrism({
         Manifold,
         width: padWidth,
         height: padHeight,
-        thickness: padThickness + 0.1,
+        thickness: padThickness,
         borderRadius: rectBorderRadius
       }).translate([0, 0, -pcbThickness / 2 + padThickness / 2 - 0.05]);
       manifoldInstancesForCleanup.push(topPad, bottomPad);
@@ -29966,6 +30062,7 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         manifoldInstancesForCleanup.push(clipped);
         finalCopperOp = clipped;
       }
+      platedHoleCopperOpsForSubtract.push(finalCopperOp);
       const threeGeom = manifoldMeshToThreeGeometry(finalCopperOp.getMesh());
       platedHoleCopperGeoms.push({
         key: `ph-${ph.pcb_plated_hole_id || index}`,
@@ -30005,14 +30102,14 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         Manifold,
         width: padWidth,
         height: padHeight,
-        thickness: padThickness + 0.1,
+        thickness: padThickness,
         borderRadius: rectBorderRadius
       }).translate([0, 0, pcbThickness / 2 - padThickness / 2 + 0.05]);
       const bottomPad = createRoundedRectPrism({
         Manifold,
         width: padWidth,
         height: padHeight,
-        thickness: padThickness + 0.1,
+        thickness: padThickness,
         borderRadius: rectBorderRadius
       }).translate([0, 0, -pcbThickness / 2 + padThickness / 2 - 0.05]);
       manifoldInstancesForCleanup.push(topPad, bottomPad);
@@ -30054,6 +30151,7 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         manifoldInstancesForCleanup.push(clipped);
         finalCopperOp = clipped;
       }
+      platedHoleCopperOpsForSubtract.push(finalCopperOp);
       const threeGeom = manifoldMeshToThreeGeometry(finalCopperOp.getMesh());
       platedHoleCopperGeoms.push({
         key: `ph-${ph.pcb_plated_hole_id || index}`,
@@ -30062,7 +30160,12 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
       });
     }
   });
-  return { platedHoleBoardDrills, platedHoleCopperGeoms };
+  let platedHoleSubtractOp = void 0;
+  if (platedHoleCopperOpsForSubtract.length > 0) {
+    platedHoleSubtractOp = Manifold.union(platedHoleCopperOpsForSubtract);
+    manifoldInstancesForCleanup.push(platedHoleSubtractOp);
+  }
+  return { platedHoleBoardDrills, platedHoleCopperGeoms, platedHoleSubtractOp };
 }
 
 // src/utils/manifold/process-vias.ts
@@ -30182,7 +30285,7 @@ function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifold
       }
       const threeGeom = manifoldMeshToThreeGeometry(finalPadOp.getMesh());
       smtPadGeoms.push({
-        key: `pad-${pad2.pcb_smtpad_id || index}`,
+        key: `smt_pad-${pad2.layer || "top"}-${pad2.pcb_smtpad_id || index}`,
         geometry: threeGeom,
         color: COPPER_COLOR3
       });
@@ -30521,20 +30624,20 @@ function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThick
 
 // src/hooks/useManifoldBoardBuilder.ts
 var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
-  const [geoms, setGeoms] = useState13(null);
-  const [textures, setTextures] = useState13(null);
-  const [pcbThickness, setPcbThickness] = useState13(null);
-  const [error, setError] = useState13(null);
-  const [isLoading, setIsLoading] = useState13(true);
+  const [geoms, setGeoms] = useState14(null);
+  const [textures, setTextures] = useState14(null);
+  const [pcbThickness, setPcbThickness] = useState14(null);
+  const [error, setError] = useState14(null);
+  const [isLoading, setIsLoading] = useState14(true);
   const manifoldInstancesForCleanup = useRef7([]);
-  const boardData = useMemo18(() => {
+  const boardData = useMemo19(() => {
     const boards = su12(circuitJson).pcb_board.list();
     if (boards.length === 0) {
       return null;
     }
     return boards[0];
   }, [circuitJson]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!manifoldJSModule || !boardData) {
       setGeoms(null);
       setTextures(null);
@@ -30615,7 +30718,12 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         manifoldInstancesForCleanup.current
       );
       allBoardDrills.push(...nonPlatedHoleBoardDrills);
-      const { platedHoleBoardDrills, platedHoleCopperGeoms } = processPlatedHolesForManifold(
+      const {
+        platedHoleBoardDrills,
+        platedHoleCopperGeoms,
+        // NEW: bring in platedHoleSubtractOp
+        platedHoleSubtractOp
+      } = processPlatedHolesForManifold(
         Manifold,
         circuitJson,
         currentPcbThickness,
@@ -30636,9 +30744,28 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
       if (allBoardDrills.length > 0) {
         holeUnion = Manifold.union(allBoardDrills);
         manifoldInstancesForCleanup.current.push(holeUnion);
-        const nextBoardAfterDrills = currentBoardOp.subtract(holeUnion);
+        const totalSubtractionOps = platedHoleSubtractOp ? Manifold.union([holeUnion, platedHoleSubtractOp]) : holeUnion;
+        manifoldInstancesForCleanup.current.push(totalSubtractionOps);
+        const nextBoardAfterDrills = currentBoardOp.subtract(totalSubtractionOps);
         manifoldInstancesForCleanup.current.push(nextBoardAfterDrills);
         currentBoardOp = nextBoardAfterDrills;
+        if (platedHoleSubtractOp) {
+          const cutPlatedCopper = platedHoleSubtractOp.subtract(holeUnion);
+          manifoldInstancesForCleanup.current.push(cutPlatedCopper);
+          const cutPlatedMesh = cutPlatedCopper.getMesh();
+          const cutPlatedGeom = manifoldMeshToThreeGeometry(cutPlatedMesh);
+          currentGeoms.platedHoles = [
+            {
+              key: "plated-holes-union",
+              geometry: cutPlatedGeom,
+              color: new THREE23.Color(
+                colors.copper[0],
+                colors.copper[1],
+                colors.copper[2]
+              )
+            }
+          ];
+        }
       }
       const { cutoutOps } = processCutoutsForManifold(
         Manifold,
@@ -30880,21 +31007,64 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
 }
 
 // src/CadViewerManifold.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var BoardMeshes = ({
   geometryMeshes,
   textureMeshes
 }) => {
   const { rootObject } = useThree();
-  useEffect21(() => {
+  const { visibility } = useLayerVisibility();
+  useEffect22(() => {
     if (!rootObject) return;
-    geometryMeshes.forEach((mesh) => rootObject.add(mesh));
-    textureMeshes.forEach((mesh) => rootObject.add(mesh));
+    geometryMeshes.forEach((mesh) => {
+      let shouldShow = true;
+      if (mesh.name === "board-geom") {
+        shouldShow = visibility.boardBody;
+      } else if (mesh.name.includes("smt_pad")) {
+        if (mesh.name.includes("smt_pad-top")) {
+          shouldShow = visibility.topCopper;
+        } else if (mesh.name.includes("smt_pad-bottom")) {
+          shouldShow = visibility.bottomCopper;
+        } else {
+          shouldShow = visibility.topCopper || visibility.bottomCopper;
+        }
+      } else if (mesh.name.includes("plated_hole") || mesh.name.includes("via")) {
+        shouldShow = visibility.topCopper || visibility.bottomCopper;
+      } else if (mesh.name.includes("copper_pour")) {
+        shouldShow = visibility.topCopper || visibility.bottomCopper;
+      }
+      if (shouldShow) {
+        rootObject.add(mesh);
+      }
+    });
+    textureMeshes.forEach((mesh) => {
+      let shouldShow = true;
+      if (mesh.name.includes("top-trace")) {
+        shouldShow = visibility.topCopper;
+      } else if (mesh.name.includes("bottom-trace")) {
+        shouldShow = visibility.bottomCopper;
+      } else if (mesh.name.includes("top-silkscreen")) {
+        shouldShow = visibility.topSilkscreen;
+      } else if (mesh.name.includes("bottom-silkscreen")) {
+        shouldShow = visibility.bottomSilkscreen;
+      }
+      if (shouldShow) {
+        rootObject.add(mesh);
+      }
+    });
     return () => {
-      geometryMeshes.forEach((mesh) => rootObject.remove(mesh));
-      textureMeshes.forEach((mesh) => rootObject.remove(mesh));
+      geometryMeshes.forEach((mesh) => {
+        if (mesh.parent === rootObject) {
+          rootObject.remove(mesh);
+        }
+      });
+      textureMeshes.forEach((mesh) => {
+        if (mesh.parent === rootObject) {
+          rootObject.remove(mesh);
+        }
+      });
     };
-  }, [rootObject, geometryMeshes, textureMeshes]);
+  }, [rootObject, geometryMeshes, textureMeshes, visibility]);
   return null;
 };
 var MANIFOLD_CDN_BASE_URL = "https://cdn.jsdelivr.net/npm/manifold-3d@3.2.1";
@@ -30906,12 +31076,12 @@ var CadViewerManifold = ({
   children
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children);
-  const circuitJson = useMemo19(() => {
+  const circuitJson = useMemo20(() => {
     return circuitJsonProp ?? childrenCircuitJson;
   }, [circuitJsonProp, childrenCircuitJson]);
-  const [manifoldJSModule, setManifoldJSModule] = useState14(null);
-  const [manifoldLoadingError, setManifoldLoadingError] = useState14(null);
-  useEffect21(() => {
+  const [manifoldJSModule, setManifoldJSModule] = useState15(null);
+  const [manifoldLoadingError, setManifoldLoadingError] = useState15(null);
+  useEffect22(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
       setManifoldJSModule(window.ManifoldModule);
       return;
@@ -30981,27 +31151,27 @@ try {
     isLoading: builderIsLoading,
     boardData
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
-  const geometryMeshes = useMemo19(() => createGeometryMeshes(geoms), [geoms]);
-  const textureMeshes = useMemo19(
+  const geometryMeshes = useMemo20(() => createGeometryMeshes(geoms), [geoms]);
+  const textureMeshes = useMemo20(
     () => createTextureMeshes(textures, boardData, pcbThickness),
     [textures, boardData, pcbThickness]
   );
-  const cadComponents = useMemo19(
+  const cadComponents = useMemo20(
     () => su13(circuitJson).cad_component.list(),
     [circuitJson]
   );
-  const boardDimensions = useMemo19(() => {
+  const boardDimensions = useMemo20(() => {
     if (!boardData) return void 0;
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     return { width: width10, height: height10 };
   }, [boardData]);
-  const boardCenter = useMemo19(() => {
+  const boardCenter = useMemo20(() => {
     if (!boardData) return void 0;
     const { center } = boardData;
     if (!center) return void 0;
     return { x: center.x, y: center.y };
   }, [boardData]);
-  const initialCameraPosition = useMemo19(() => {
+  const initialCameraPosition = useMemo20(() => {
     if (!boardData) return [5, 5, 5];
     const { width: width10 = 0, height: height10 = 0 } = boardData;
     const safeWidth = Math.max(width10, 1);
@@ -31027,7 +31197,7 @@ try {
     );
   }
   if (!manifoldJSModule) {
-    return /* @__PURE__ */ jsx14("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
+    return /* @__PURE__ */ jsx16("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
   }
   if (builderError) {
     return /* @__PURE__ */ jsxs7(
@@ -31047,7 +31217,7 @@ try {
     );
   }
   if (builderIsLoading) {
-    return /* @__PURE__ */ jsx14("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
+    return /* @__PURE__ */ jsx16("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
   }
   return /* @__PURE__ */ jsxs7(
     CadViewerContainer,
@@ -31059,18 +31229,18 @@ try {
       boardCenter,
       onUserInteraction,
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           BoardMeshes,
           {
             geometryMeshes,
             textureMeshes
           }
         ),
-        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx14(
+        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx16(
           ThreeErrorBoundary,
           {
-            fallback: ({ error }) => /* @__PURE__ */ jsx14(Error3d, { cad_component: cad_component2, error }),
-            children: /* @__PURE__ */ jsx14(
+            fallback: ({ error }) => /* @__PURE__ */ jsx16(Error3d, { cad_component: cad_component2, error }),
+            children: /* @__PURE__ */ jsx16(
               AnyCadComponent,
               {
                 cad_component: cad_component2,
@@ -31087,10 +31257,10 @@ try {
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/hooks/useContextMenu.ts
-import { useState as useState15, useCallback as useCallback6, useRef as useRef8, useEffect as useEffect22 } from "react";
+import { useState as useState16, useCallback as useCallback7, useRef as useRef8, useEffect as useEffect23 } from "react";
 var useContextMenu = ({ containerRef }) => {
-  const [menuVisible, setMenuVisible] = useState15(false);
-  const [menuPos, setMenuPos] = useState15({
+  const [menuVisible, setMenuVisible] = useState16(false);
+  const [menuPos, setMenuPos] = useState16({
     x: 0,
     y: 0
   });
@@ -31104,7 +31274,7 @@ var useContextMenu = ({ containerRef }) => {
       longPressTimeoutRef.current = null;
     }
   };
-  const handleContextMenu = useCallback6(
+  const handleContextMenu = useCallback7(
     (e) => {
       e.preventDefault();
       const eventX = typeof e.clientX === "number" ? e.clientX : 0;
@@ -31130,7 +31300,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [setMenuPos, setMenuVisible]
   );
-  const handleTouchStart = useCallback6(
+  const handleTouchStart = useCallback7(
     (e) => {
       if (e.touches.length === 1) {
         const touch = e.touches[0];
@@ -31163,7 +31333,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [containerRef]
   );
-  const handleTouchMove = useCallback6((e) => {
+  const handleTouchMove = useCallback7((e) => {
     if (!interactionOriginPosRef.current || e.touches.length !== 1) {
       return;
     }
@@ -31181,7 +31351,7 @@ var useContextMenu = ({ containerRef }) => {
       clearLongPressTimeout();
     }
   }, []);
-  const handleTouchEnd = useCallback6(() => {
+  const handleTouchEnd = useCallback7(() => {
     clearLongPressTimeout();
     setTimeout(() => {
       if (interactionOriginPosRef.current) {
@@ -31189,13 +31359,13 @@ var useContextMenu = ({ containerRef }) => {
       }
     }, 0);
   }, []);
-  const handleClickAway = useCallback6((e) => {
+  const handleClickAway = useCallback7((e) => {
     const target = e.target;
     if (menuRef.current && !menuRef.current.contains(target)) {
       setMenuVisible(false);
     }
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
       document.addEventListener("touchstart", handleClickAway);
@@ -31229,10 +31399,10 @@ var useContextMenu = ({ containerRef }) => {
 };
 
 // src/hooks/useGlobalDownloadGltf.ts
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback8 } from "react";
 import { GLTFExporter } from "three-stdlib";
 var useGlobalDownloadGltf = () => {
-  return useCallback7(() => {
+  return useCallback8(() => {
     const root = window.__TSCIRCUIT_THREE_OBJECT;
     if (!root) return;
     const exporter = new GLTFExporter();
@@ -31257,13 +31427,190 @@ var useGlobalDownloadGltf = () => {
   }, []);
 };
 
+// src/components/AppearanceMenu.tsx
+import { useState as useState17 } from "react";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var menuItemStyle = {
+  padding: "8px 18px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  color: "#f5f6fa",
+  fontWeight: 400,
+  fontSize: 14,
+  transition: "background 0.1s"
+};
+var checkmarkStyle = {
+  width: 20
+};
+var handleMouseOver = (e) => {
+  e.currentTarget.style.background = "#2d313a";
+};
+var handleMouseOut = (e) => {
+  e.currentTarget.style.background = "transparent";
+};
+var AppearanceMenu = () => {
+  const { visibility, toggleLayer } = useLayerVisibility();
+  const [showSubmenu, setShowSubmenu] = useState17(false);
+  return /* @__PURE__ */ jsxs8(Fragment6, { children: [
+    /* @__PURE__ */ jsx17(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+          margin: "8px 0"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        style: {
+          padding: "8px 18px",
+          fontSize: 14,
+          color: "#f5f6fa",
+          fontWeight: 400,
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          transition: "background 0.1s",
+          position: "relative"
+        },
+        onMouseEnter: () => setShowSubmenu(true),
+        onMouseLeave: () => setShowSubmenu(false),
+        onMouseOver: handleMouseOver,
+        onMouseOut: handleMouseOut,
+        children: [
+          /* @__PURE__ */ jsx17("span", { children: "Appearance" }),
+          /* @__PURE__ */ jsx17(
+            "span",
+            {
+              style: {
+                fontSize: 10,
+                transform: showSubmenu ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 0.2s",
+                display: "inline-block"
+              },
+              children: "\u25B6"
+            }
+          ),
+          showSubmenu && /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: "100%",
+                top: 0,
+                minWidth: 200,
+                background: "#23272f",
+                border: "1px solid rgba(255, 255, 255, 0.1)",
+                borderRadius: 6,
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.4)",
+                zIndex: 1e3,
+                marginTop: 8,
+                marginBottom: 8
+              },
+              onMouseEnter: () => setShowSubmenu(true),
+              onMouseLeave: () => setShowSubmenu(false),
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    style: menuItemStyle,
+                    onClick: () => toggleLayer("boardBody"),
+                    onMouseOver: handleMouseOver,
+                    onMouseOut: handleMouseOut,
+                    children: [
+                      /* @__PURE__ */ jsx17("span", { style: checkmarkStyle, children: visibility.boardBody ? "\u2714" : "" }),
+                      "Board Body"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    style: menuItemStyle,
+                    onClick: () => toggleLayer("topCopper"),
+                    onMouseOver: handleMouseOver,
+                    onMouseOut: handleMouseOut,
+                    children: [
+                      /* @__PURE__ */ jsx17("span", { style: checkmarkStyle, children: visibility.topCopper ? "\u2714" : "" }),
+                      "Top Copper"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    style: menuItemStyle,
+                    onClick: () => toggleLayer("bottomCopper"),
+                    onMouseOver: handleMouseOver,
+                    onMouseOut: handleMouseOut,
+                    children: [
+                      /* @__PURE__ */ jsx17("span", { style: checkmarkStyle, children: visibility.bottomCopper ? "\u2714" : "" }),
+                      "Bottom Copper"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    style: menuItemStyle,
+                    onClick: () => toggleLayer("topSilkscreen"),
+                    onMouseOver: handleMouseOver,
+                    onMouseOut: handleMouseOut,
+                    children: [
+                      /* @__PURE__ */ jsx17("span", { style: checkmarkStyle, children: visibility.topSilkscreen ? "\u2714" : "" }),
+                      "Top Silkscreen"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    style: menuItemStyle,
+                    onClick: () => toggleLayer("bottomSilkscreen"),
+                    onMouseOver: handleMouseOver,
+                    onMouseOut: handleMouseOut,
+                    children: [
+                      /* @__PURE__ */ jsx17("span", { style: checkmarkStyle, children: visibility.bottomSilkscreen ? "\u2714" : "" }),
+                      "Bottom Silkscreen"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs8(
+                  "div",
+                  {
+                    style: menuItemStyle,
+                    onClick: () => toggleLayer("smtModels"),
+                    onMouseOver: handleMouseOver,
+                    onMouseOut: handleMouseOut,
+                    children: [
+                      /* @__PURE__ */ jsx17("span", { style: checkmarkStyle, children: visibility.smtModels ? "\u2714" : "" }),
+                      "CAD Models"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
 // src/CadViewer.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-var CadViewer = (props) => {
-  const [engine, setEngine] = useState16("manifold");
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var CadViewerInner = (props) => {
+  const [engine, setEngine] = useState18("manifold");
   const containerRef = useRef9(null);
-  const [autoRotate, setAutoRotate] = useState16(true);
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState16(false);
+  const [autoRotate, setAutoRotate] = useState18(true);
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState18(false);
+  const { visibility, toggleLayer } = useLayerVisibility();
   const {
     menuVisible,
     menuPos,
@@ -31273,12 +31620,12 @@ var CadViewer = (props) => {
   } = useContextMenu({ containerRef });
   const autoRotateUserToggledRef = useRef9(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const handleUserInteraction = useCallback8(() => {
+  const handleUserInteraction = useCallback9(() => {
     if (!autoRotateUserToggledRef.current) {
       setAutoRotate(false);
     }
   }, []);
-  const toggleAutoRotate = useCallback8(() => {
+  const toggleAutoRotate = useCallback9(() => {
     setAutoRotate((prev) => !prev);
     setAutoRotateUserToggled(true);
   }, []);
@@ -31287,17 +31634,17 @@ var CadViewer = (props) => {
     setEngine(newEngine);
     setMenuVisible(false);
   };
-  useEffect23(() => {
+  useEffect24(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: containerRef,
@@ -31313,14 +31660,14 @@ var CadViewer = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx15(
+        engine === "jscad" ? /* @__PURE__ */ jsx18(
           CadViewerJscad,
           {
             ...props,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
             onUserInteraction: handleUserInteraction
           }
-        ) : /* @__PURE__ */ jsx15(
+        ) : /* @__PURE__ */ jsx18(
           CadViewerManifold_default,
           {
             ...props,
@@ -31328,7 +31675,7 @@ var CadViewer = (props) => {
             onUserInteraction: handleUserInteraction
           }
         ),
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -31345,11 +31692,11 @@ var CadViewer = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx15("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx18("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
-        menuVisible && /* @__PURE__ */ jsxs8(
+        menuVisible && /* @__PURE__ */ jsxs9(
           "div",
           {
             ref: menuRef,
@@ -31370,7 +31717,7 @@ var CadViewer = (props) => {
               transition: "opacity 0.1s"
             },
             children: [
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   style: {
@@ -31391,7 +31738,7 @@ var CadViewer = (props) => {
                     "Switch to ",
                     engine === "jscad" ? "Manifold" : "JSCAD",
                     " Engine",
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "span",
                       {
                         style: {
@@ -31406,7 +31753,7 @@ var CadViewer = (props) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   style: {
@@ -31427,12 +31774,12 @@ var CadViewer = (props) => {
                   onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
                   onMouseOut: (e) => e.currentTarget.style.background = "transparent",
                   children: [
-                    /* @__PURE__ */ jsx15("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
+                    /* @__PURE__ */ jsx18("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
                     "Auto rotate"
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx18(
                 "div",
                 {
                   style: {
@@ -31455,7 +31802,8 @@ var CadViewer = (props) => {
                   children: "Download GLTF"
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx18(AppearanceMenu, {}),
+              /* @__PURE__ */ jsx18(
                 "div",
                 {
                   style: {
@@ -31465,7 +31813,7 @@ var CadViewer = (props) => {
                     borderTop: "1px solid rgba(255, 255, 255, 0.1)",
                     marginTop: "8px"
                   },
-                  children: /* @__PURE__ */ jsxs8(
+                  children: /* @__PURE__ */ jsxs9(
                     "span",
                     {
                       style: {
@@ -31490,6 +31838,9 @@ var CadViewer = (props) => {
     viewerKey
   );
 };
+var CadViewer = (props) => {
+  return /* @__PURE__ */ jsx18(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx18(CadViewerInner, { ...props }) });
+};
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
@@ -31770,10 +32121,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter2 } from "three-stdlib";
-import { useEffect as useEffect24, useState as useState17, useMemo as useMemo20, useCallback as useCallback9 } from "react";
+import { useEffect as useEffect25, useState as useState19, useMemo as useMemo21, useCallback as useCallback10 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
-  const link = useMemo20(() => document.createElement("a"), []);
+  const link = useMemo21(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -31783,7 +32134,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect24(
+  useEffect25(
     () => () => {
       link.remove();
       instance = null;
@@ -31791,24 +32142,24 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback9((obj3D) => {
+  const ref = useCallback10((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
-  const [url, setUrl] = useState17();
-  const [error, setError] = useState17();
-  const ref = useCallback9(
+  const [url, setUrl] = useState19();
+  const [error, setError] = useState19();
+  const ref = useCallback10(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect24(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect25(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo20(() => new GLTFExporter2(), []);
+  const exporter = useMemo21(() => new GLTFExporter2(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(