@tscircuit/3d-viewer 0.0.413 → 0.0.415

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.412",
+  version: "0.0.414",
   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);
@@ -28555,7 +28632,11 @@ var BoardGeomBuilder = class {
       let cyGeom = null;
       if (ph.shape === "circular_hole_with_rect_pad") {
         cyGeom = (0, import_primitives6.cylinder)({
-          center: [ph.x + ph.hole_offset_x, ph.y + ph.hole_offset_y, 0],
+          center: [
+            ph.x + (ph.hole_offset_x || 0),
+            ph.y + (ph.hole_offset_y || 0),
+            0
+          ],
           radius: ph.hole_diameter / 2 + M,
           // Add margin for subtraction
           height: this.ctx.pcbThickness * 1.5
@@ -28590,17 +28671,21 @@ var BoardGeomBuilder = class {
       if (ph.shape === "pill_hole_with_rect_pad") {
         pillHole = (0, import_booleans3.union)(
           (0, import_primitives6.cuboid)({
-            center: [ph.x + ph.hole_offset_x, ph.y + ph.hole_offset_y, 0],
+            center: [
+              ph.x + (ph.hole_offset_x || 0),
+              ph.y + (ph.hole_offset_y || 0),
+              0
+            ],
             size: shouldRotate ? [holeHeight, rectLength, this.ctx.pcbThickness * 1.5] : [rectLength, holeHeight, this.ctx.pcbThickness * 1.5]
           }),
           (0, import_primitives6.cylinder)({
             center: shouldRotate ? [
-              ph.x + ph.hole_offset_x,
-              ph.y + ph.hole_offset_y - rectLength / 2,
+              ph.x + (ph.hole_offset_x || 0),
+              ph.y + (ph.hole_offset_y || 0) - rectLength / 2,
               0
             ] : [
-              ph.x + ph.hole_offset_x - rectLength / 2,
-              ph.y + ph.hole_offset_y,
+              ph.x + (ph.hole_offset_x || 0) - rectLength / 2,
+              ph.y + (ph.hole_offset_y || 0),
               0
             ],
             radius: holeRadius,
@@ -28608,12 +28693,12 @@ var BoardGeomBuilder = class {
           }),
           (0, import_primitives6.cylinder)({
             center: shouldRotate ? [
-              ph.x + ph.hole_offset_x,
-              ph.y + ph.hole_offset_y + rectLength / 2,
+              ph.x + (ph.hole_offset_x || 0),
+              ph.y + (ph.hole_offset_y || 0) + rectLength / 2,
               0
             ] : [
-              ph.x + ph.hole_offset_x + rectLength / 2,
-              ph.y + ph.hole_offset_y,
+              ph.x + (ph.hole_offset_x || 0) + rectLength / 2,
+              ph.y + (ph.hole_offset_y || 0),
               0
             ],
             radius: holeRadius,
@@ -28978,9 +29063,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);
@@ -29023,17 +29108,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);
@@ -29042,11 +29127,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,
@@ -29057,12 +29142,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 () => {
@@ -29078,8 +29163,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,
@@ -29094,7 +29179,7 @@ var Error3d = ({
         ]
       }
     ),
-    isHovered && hoverPosition ? /* @__PURE__ */ jsx12(
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx13(
       Html,
       {
         position: hoverPosition,
@@ -29117,7 +29202,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({
@@ -29131,7 +29216,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);
@@ -29141,7 +29226,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({
@@ -29152,8 +29237,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 {
@@ -29171,7 +29256,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,
@@ -29180,7 +29265,7 @@ function STLModel({
     });
     return new THREE15.Mesh(geom, material);
   }, [geom, color, opacity]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!rootObject || !mesh) return;
     rootObject.add(mesh);
     return () => {
@@ -29196,9 +29281,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 };
@@ -29215,7 +29327,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,
@@ -29226,12 +29338,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];
@@ -29250,7 +29362,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];
@@ -29261,7 +29373,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];
@@ -29285,20 +29397,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,
@@ -29317,10 +29430,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";
 
@@ -30174,7 +30287,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
       });
@@ -30513,20 +30626,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);
@@ -30872,21 +30985,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";
@@ -30898,12 +31054,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;
@@ -30973,27 +31129,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);
@@ -31019,7 +31175,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(
@@ -31039,7 +31195,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,
@@ -31051,18 +31207,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,
@@ -31079,10 +31235,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
   });
@@ -31096,7 +31252,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;
@@ -31122,7 +31278,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [setMenuPos, setMenuVisible]
   );
-  const handleTouchStart = useCallback6(
+  const handleTouchStart = useCallback7(
     (e) => {
       if (e.touches.length === 1) {
         const touch = e.touches[0];
@@ -31155,7 +31311,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [containerRef]
   );
-  const handleTouchMove = useCallback6((e) => {
+  const handleTouchMove = useCallback7((e) => {
     if (!interactionOriginPosRef.current || e.touches.length !== 1) {
       return;
     }
@@ -31173,7 +31329,7 @@ var useContextMenu = ({ containerRef }) => {
       clearLongPressTimeout();
     }
   }, []);
-  const handleTouchEnd = useCallback6(() => {
+  const handleTouchEnd = useCallback7(() => {
     clearLongPressTimeout();
     setTimeout(() => {
       if (interactionOriginPosRef.current) {
@@ -31181,13 +31337,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);
@@ -31221,10 +31377,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();
@@ -31249,13 +31405,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,
@@ -31265,12 +31598,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);
   }, []);
@@ -31279,17 +31612,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,
@@ -31305,14 +31638,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,
@@ -31320,7 +31653,7 @@ var CadViewer = (props) => {
             onUserInteraction: handleUserInteraction
           }
         ),
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           "div",
           {
             style: {
@@ -31337,11 +31670,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,
@@ -31362,7 +31695,7 @@ var CadViewer = (props) => {
               transition: "opacity 0.1s"
             },
             children: [
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   style: {
@@ -31383,7 +31716,7 @@ var CadViewer = (props) => {
                     "Switch to ",
                     engine === "jscad" ? "Manifold" : "JSCAD",
                     " Engine",
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx18(
                       "span",
                       {
                         style: {
@@ -31398,7 +31731,7 @@ var CadViewer = (props) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   style: {
@@ -31419,12 +31752,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: {
@@ -31447,7 +31780,8 @@ var CadViewer = (props) => {
                   children: "Download GLTF"
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx18(AppearanceMenu, {}),
+              /* @__PURE__ */ jsx18(
                 "div",
                 {
                   style: {
@@ -31457,7 +31791,7 @@ var CadViewer = (props) => {
                     borderTop: "1px solid rgba(255, 255, 255, 0.1)",
                     marginTop: "8px"
                   },
-                  children: /* @__PURE__ */ jsxs8(
+                  children: /* @__PURE__ */ jsxs9(
                     "span",
                     {
                       style: {
@@ -31482,6 +31816,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);
@@ -31762,10 +32099,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");
@@ -31775,7 +32112,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect24(
+  useEffect25(
     () => () => {
       link.remove();
       instance = null;
@@ -31783,24 +32120,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(