@tscircuit/3d-viewer 0.0.609 → 0.0.610

package/dist/index.d.ts

@@ -41,12 +41,13 @@ interface Props {
     onCameraControllerReady?: (controller: CameraController | null) => void;
     resolveStaticAsset?: (modelUrl: string) => string;
     referenceObject?: ReferenceObjectType | null;
+    hiddenCadComponentIds?: ReadonlySet<string>;
 }
 declare const CadViewerJscad: React$1.ForwardRefExoticComponent<Props & {
     children?: React$1.ReactNode | undefined;
 } & React$1.RefAttributes<THREE.Object3D<THREE.Object3DEventMap>>>;
 
-type CadViewerProps = Omit<React.ComponentProps<typeof CadViewerJscad>, "circuitJson"> & {
+type CadViewerProps = Omit<React.ComponentProps<typeof CadViewerJscad>, "circuitJson" | "hiddenCadComponentIds"> & {
     circuitJson?: any[];
     foldPcbs?: boolean;
     /** Enable right-click navigation using the same identity as the PCB viewer. */

package/dist/index.js

@@ -14479,6 +14479,7 @@ var CadComponentGroup = ({
 }) => {
   const scene = useThree();
   const group = useMemo(() => new THREE.Group(), []);
+  group.userData.cad_component_id = cadComponent.cad_component_id;
   group.userData.pcb_component_id = cadComponent.pcb_component_id;
   useEffect(() => {
     scene.rootObject.add(group);
@@ -14493,9 +14494,9 @@ var CadComponentGroup = ({
   return /* @__PURE__ */ jsx(ThreeContext.Provider, { value: context, children });
 };
 
-// src/utils/pick-schematic-component.ts
+// src/utils/pick-visible-mesh.ts
 import * as THREE2 from "three";
-var pickSchematicComponent = (scene, position, circuitJson) => {
+var pickVisibleMesh = (scene, position) => {
   if (!scene) return;
   const { camera, rootObject, renderer } = scene;
   const rect = renderer.domElement.getBoundingClientRect();
@@ -14515,31 +14516,39 @@ var pickSchematicComponent = (scene, position, circuitJson) => {
   for (const hit of raycaster.intersectObject(rootObject, true)) {
     if (!(hit.object instanceof THREE2.Mesh)) continue;
     let object = hit.object;
-    let pcbComponentId;
     let visible = true;
     while (object) {
       if (!object.visible) visible = false;
-      pcbComponentId ??= object.userData.pcb_component_id;
       object = object.parent;
     }
-    if (!visible) continue;
-    if (!pcbComponentId) return;
-    const pcb = circuitJson.find(
-      (e) => e.type === "pcb_component" && e.pcb_component_id === pcbComponentId
-    );
-    if (pcb?.type !== "pcb_component") return;
-    const source = circuitJson.find(
-      (e) => e.type === "source_component" && e.source_component_id === pcb.source_component_id
-    );
-    if (source?.type !== "source_component") return;
-    return {
-      source_component_id: source.source_component_id,
-      pcb_component_id: pcb.pcb_component_id,
-      refdes: source.name
-    };
+    if (visible) return hit.object;
   }
 };
 
+// src/utils/pick-schematic-component.ts
+var pickSchematicComponent = (scene, position, circuitJson) => {
+  let object = pickVisibleMesh(scene, position) ?? null;
+  let pcbComponentId;
+  while (object) {
+    pcbComponentId ??= object.userData.pcb_component_id;
+    object = object.parent;
+  }
+  if (!pcbComponentId) return;
+  const pcb = circuitJson.find(
+    (e) => e.type === "pcb_component" && e.pcb_component_id === pcbComponentId
+  );
+  if (pcb?.type !== "pcb_component") return;
+  const source = circuitJson.find(
+    (e) => e.type === "source_component" && e.source_component_id === pcb.source_component_id
+  );
+  if (source?.type !== "source_component") return;
+  return {
+    source_component_id: source.source_component_id,
+    pcb_component_id: pcb.pcb_component_id,
+    refdes: source.name
+  };
+};
+
 // src/utils/resolve-fold-pcbs.ts
 function resolveFoldPcbs(circuitJson, foldPcbs) {
   return foldPcbs ?? circuitJson.some(
@@ -14547,8 +14556,59 @@ function resolveFoldPcbs(circuitJson, foldPcbs) {
   );
 }
 
+// src/utils/pick-cad-component.ts
+var pickCadComponent = (scene, position, circuitJson) => {
+  let object = pickVisibleMesh(scene, position) ?? null;
+  while (object) {
+    const cadComponentId = object.userData.cad_component_id;
+    if (cadComponentId) {
+      const cad = circuitJson.find(
+        (e) => e.type === "cad_component" && e.cad_component_id === cadComponentId
+      );
+      if (cad?.type !== "cad_component") return;
+      const source = circuitJson.find(
+        (e) => e.type === "source_component" && e.source_component_id === cad.source_component_id
+      );
+      return {
+        cad_component_id: cad.cad_component_id,
+        componentName: source?.type === "source_component" ? source.name : cad.cad_component_id
+      };
+    }
+    object = object.parent;
+  }
+};
+
+// src/hooks/useHiddenCadComponents.ts
+import { useState } from "react";
+var NO_HIDDEN_COMPONENTS = /* @__PURE__ */ new Set();
+var useHiddenCadComponents = (circuitKey) => {
+  const [state, setState] = useState({
+    circuitKey,
+    ids: NO_HIDDEN_COMPONENTS
+  });
+  const hiddenCadComponentIds = state.circuitKey === circuitKey ? state.ids : NO_HIDDEN_COMPONENTS;
+  if (state.circuitKey !== circuitKey) {
+    setState({ circuitKey, ids: NO_HIDDEN_COMPONENTS });
+  }
+  return {
+    hiddenCadComponentIds,
+    hideComponent: (id) => {
+      setState((current) => ({
+        circuitKey,
+        ids: /* @__PURE__ */ new Set([
+          ...current.circuitKey === circuitKey ? current.ids : [],
+          id
+        ])
+      }));
+    },
+    unhideAllComponents: () => {
+      setState({ circuitKey, ids: NO_HIDDEN_COMPONENTS });
+    }
+  };
+};
+
 // src/CadViewer.tsx
-import { useCallback as useCallback24, useContext as useContext10, useEffect as useEffect50, useRef as useRef29, useState as useState40 } from "react";
+import { useCallback as useCallback24, useContext as useContext10, useEffect as useEffect50, useRef as useRef29, useState as useState41 } from "react";
 import * as THREE54 from "three";
 
 // src/hooks/use-convert-children-to-soup.ts
@@ -14586,13 +14646,13 @@ var getCadPcbContext = (cad, circuitJson) => {
 
 // src/AnyCadComponent.tsx
 import { su as su2 } from "@tscircuit/circuit-json-util";
-import { useCallback as useCallback3, useEffect as useEffect12, useMemo as useMemo10, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect12, useMemo as useMemo10, useState as useState8 } from "react";
 
 // src/contexts/LayerVisibilityContext.tsx
 import {
   createContext as createContext3,
   useContext as useContext3,
-  useState,
+  useState as useState2,
   useCallback,
   useMemo as useMemo3
 } from "react";
@@ -14628,7 +14688,7 @@ var defaultVisibility = {
 };
 var LayerVisibilityContext = createContext3(void 0);
 var LayerVisibilityProvider = ({ children }) => {
-  const [visibility, setVisibility] = useState(defaultVisibility);
+  const [visibility, setVisibility] = useState2(defaultVisibility);
   const setLayerVisibility = useCallback(
     (layer, visible) => {
       setVisibility((prev) => ({
@@ -14678,7 +14738,7 @@ function usePcbThickness(circuitJson) {
 }
 
 // src/react-three/Html.tsx
-import { useRef, useEffect as useEffect3, useState as useState2 } from "react";
+import { useRef, useEffect as useEffect3, useState as useState3 } from "react";
 import ReactDOM from "react-dom";
 import * as THREE3 from "three";
 
@@ -14695,7 +14755,7 @@ var zIndexMap = {
 var Html = ({ children, position, style }) => {
   const { camera, renderer } = useThree();
   const el = useRef(document.createElement("div"));
-  const [portal, setPortal] = useState2(null);
+  const [portal, setPortal] = useState3(null);
   useEffect3(() => {
     const rendererNode = renderer?.domElement.parentNode;
     if (!rendererNode) return;
@@ -37549,7 +37609,7 @@ import { useEffect as useEffect5 } from "react";
 import {
   createContext as createContext4,
   useContext as useContext4,
-  useState as useState3,
+  useState as useState4,
   useCallback as useCallback2,
   useMemo as useMemo5,
   useEffect as useEffect4,
@@ -37567,7 +37627,7 @@ var useHover = () => {
 };
 var HoverProvider = ({ children }) => {
   const { camera, renderer } = useThree();
-  const [hoverables, setHoverables] = useState3([]);
+  const [hoverables, setHoverables] = useState4([]);
   const raycaster = useMemo5(() => new THREE4.Raycaster(), []);
   const mouse = useMemo5(() => new THREE4.Vector2(), []);
   const hoverablesRef = useRef2(hoverables);
@@ -37799,7 +37859,7 @@ var FootprinterModel = ({
 };
 
 // src/three-components/GltfModel.tsx
-import { useState as useState4, useEffect as useEffect8 } from "react";
+import { useState as useState5, useEffect as useEffect8 } from "react";
 import * as THREE10 from "three";
 import { GLTFLoader } from "three-stdlib";
 
@@ -38013,8 +38073,8 @@ function GltfModel({
   isTranslucent = false
 }) {
   const { renderer } = useThree();
-  const [model, setModel] = useState4(null);
-  const [loadError, setLoadError] = useState4(null);
+  const [model, setModel] = useState5(null);
+  const [loadError, setLoadError] = useState5(null);
   const { boardTransformGroup } = useCadModelTransformGraph({
     model,
     position,
@@ -38216,7 +38276,7 @@ var JscadModel = ({
 };
 
 // src/hooks/use-global-obj-loader.ts
-import { useEffect as useEffect10, useState as useState5 } from "react";
+import { useEffect as useEffect10, useState as useState6 } from "react";
 
 // src/utils/vrml.ts
 import { VRMLLoader } from "three-stdlib";
@@ -38243,7 +38303,7 @@ if (typeof window !== "undefined" && !window.TSCIRCUIT_OBJ_LOADER_CACHE) {
   window.TSCIRCUIT_OBJ_LOADER_CACHE = /* @__PURE__ */ new Map();
 }
 function useGlobalObjLoader(url) {
-  const [obj, setObj] = useState5(null);
+  const [obj, setObj] = useState6(null);
   useEffect10(() => {
     if (!url) return;
     const cleanUrl = url.replace(/&cachebust_origin=$/, "");
@@ -38397,7 +38457,7 @@ function MixedStlModel({
 }
 
 // src/three-components/StepModel.tsx
-import { useEffect as useEffect11, useState as useState6 } from "react";
+import { useEffect as useEffect11, useState as useState7 } from "react";
 import { GLTFExporter } from "three-stdlib";
 
 // src/three-components/step-mesh-to-group.ts
@@ -38611,7 +38671,7 @@ var StepModel = ({
   isHovered,
   isTranslucent
 }) => {
-  const [stepGltfUrl, setStepGltfUrl] = useState6(null);
+  const [stepGltfUrl, setStepGltfUrl] = useState7(null);
   useEffect11(() => {
     let isActive = true;
     let objectUrl = null;
@@ -39049,9 +39109,9 @@ var AnyCadComponent = ({
   resolveStaticAsset
 }) => {
   const pcbThickness = usePcbThickness(circuitJson);
-  const [isHovered, setIsHovered] = useState7(false);
+  const [isHovered, setIsHovered] = useState8(false);
   const { visibility } = useLayerVisibility();
-  const [hoverPosition, setHoverPosition] = useState7(null);
+  const [hoverPosition, setHoverPosition] = useState8(null);
   const handleHover = useCallback3((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
@@ -39087,8 +39147,8 @@ var AnyCadComponent = ({
   const stepUrl = resolveModelUrlWithStaticResolver(
     cad_component.model_step_url
   );
-  const [fallbackModelIndex, setFallbackModelIndex] = useState7(0);
-  const [lastModelError, setLastModelError] = useState7(null);
+  const [fallbackModelIndex, setFallbackModelIndex] = useState8(0);
+  const [lastModelError, setLastModelError] = useState8(null);
   useEffect12(() => {
     setFallbackModelIndex(0);
     setLastModelError(null);
@@ -39309,13 +39369,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect21, useMemo as useMemo18, useState as useState11 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect21, useMemo as useMemo18, useState as useState12 } from "react";
 import * as THREE25 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.608",
+  version: "0.0.609",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -39413,7 +39473,7 @@ var package_default = {
 };
 
 // src/contexts/appearance-context.tsx
-import { createContext as createContext5, useContext as useContext5, useEffect as useEffect13, useMemo as useMemo11, useState as useState8 } from "react";
+import { createContext as createContext5, useContext as useContext5, useEffect as useEffect13, useMemo as useMemo11, useState as useState9 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var LIGHTING_STORAGE_KEY = "cadViewerLightingEnabled";
 var readStoredLightingEnabled = () => {
@@ -39426,9 +39486,9 @@ var AppearanceContext = createContext5(
 var AppearanceProvider = ({
   children
 }) => {
-  const [darkBackgroundEnabled, setDarkBackgroundEnabled] = useState8(false);
-  const [gridEnabled, setGridEnabled] = useState8(false);
-  const [lightingEnabled, setLightingEnabled] = useState8(
+  const [darkBackgroundEnabled, setDarkBackgroundEnabled] = useState9(false);
+  const [gridEnabled, setGridEnabled] = useState9(false);
+  const [lightingEnabled, setLightingEnabled] = useState9(
     readStoredLightingEnabled
   );
   useEffect13(() => {
@@ -39465,7 +39525,7 @@ import {
   useContext as useContext6,
   useMemo as useMemo12,
   useRef as useRef3,
-  useState as useState9
+  useState as useState10
 } from "react";
 import * as THREE15 from "three";
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -39510,12 +39570,12 @@ var CameraControllerContext = createContext6(void 0);
 var CameraControllerProvider = ({ children, defaultTarget, initialCameraPosition, initialCameraType }) => {
   const controlsRef = useRef3(null);
   const mainCameraRef = useRef3(null);
-  const [controller, setController] = useState9(null);
-  const [cameraType, setCameraType] = useState9(
+  const [controller, setController] = useState10(null);
+  const [cameraType, setCameraType] = useState10(
     initialCameraType ?? "perspective"
   );
-  const [cameraPosition, setCameraPosition] = useState9(initialCameraPosition ?? null);
-  const [cameraRotation, setCameraRotation] = useState9(
+  const [cameraPosition, setCameraPosition] = useState10(initialCameraPosition ?? null);
+  const [cameraRotation, setCameraRotation] = useState10(
     new THREE15.Euler(0, 0, 0)
   );
   const baseDistance = useMemo12(() => {
@@ -39857,7 +39917,7 @@ var useCameraSession = () => {
 import {
   useRef as useRef6,
   useEffect as useEffect15,
-  useState as useState10,
+  useState as useState11,
   useCallback as useCallback7,
   forwardRef,
   useImperativeHandle,
@@ -39886,7 +39946,7 @@ var Canvas = forwardRef(
   ({ children, scene: sceneProps, camera: cameraProps, style, onCreated }, ref) => {
     const { cameraType } = useCameraController();
     const mountRef = useRef6(null);
-    const [contextState, setContextState] = useState10(
+    const [contextState, setContextState] = useState11(
       null
     );
     const frameListeners = useRef6(
@@ -41002,7 +41062,7 @@ var CadViewerContainer = forwardRef2(
     onUserInteraction,
     onCameraControllerReady
   }, ref) => {
-    const [isInteractionEnabled, setIsInteractionEnabled] = useState11(
+    const [isInteractionEnabled, setIsInteractionEnabled] = useState12(
       !clickToInteractEnabled
     );
     const { mainCameraRef, handleControlsChange, controller } = useCameraController();
@@ -41161,11 +41221,11 @@ var CadViewerContainer = forwardRef2(
 );
 
 // src/hooks/use-stls-from-geom.ts
-import { useState as useState12, useEffect as useEffect22 } from "react";
+import { useState as useState13, useEffect as useEffect22 } from "react";
 import stlSerializer from "@jscad/stl-serializer";
 var useStlsFromGeom = (geom) => {
-  const [stls, setStls] = useState12([]);
-  const [loading, setLoading] = useState12(true);
+  const [stls, setStls] = useState13([]);
+  const [loading, setLoading] = useState13(true);
   useEffect22(() => {
     if (!geom) return;
     const generateStls = async () => {
@@ -41195,7 +41255,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState13, useEffect as useEffect23, useRef as useRef8 } from "react";
+import { useState as useState14, useEffect as useEffect23, useRef as useRef8 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_colors = __toESM(require_colors(), 1);
@@ -42637,7 +42697,7 @@ var BoardGeomBuilder = class {
 
 // src/hooks/useBoardGeomBuilder.ts
 var useBoardGeomBuilder = (circuitJson) => {
-  const [boardGeom, setBoardGeom] = useState13(null);
+  const [boardGeom, setBoardGeom] = useState14(null);
   const isProcessingRef = useRef8(false);
   useEffect23(() => {
     let isCancelled = false;
@@ -42685,7 +42745,7 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { useState as useState14, useCallback as useCallback8, useEffect as useEffect25, useMemo as useMemo20 } from "react";
+import { useState as useState15, useCallback as useCallback8, useEffect as useEffect25, useMemo as useMemo20 } from "react";
 
 // src/react-three/Text.tsx
 import { useEffect as useEffect24, useMemo as useMemo19 } from "react";
@@ -42748,8 +42808,8 @@ var Error3d = ({
   cad_component
 }) => {
   const { rootObject } = useThree();
-  const [isHovered, setIsHovered] = useState14(false);
-  const [hoverPosition, setHoverPosition] = useState14(null);
+  const [isHovered, setIsHovered] = useState15(false);
+  const [hoverPosition, setHoverPosition] = useState15(null);
   const handleHover = useCallback8((e) => {
     if (e?.mousePosition) {
       setIsHovered(true);
@@ -42779,6 +42839,8 @@ var Error3d = ({
     g.position.fromArray(position);
     return g;
   }, [position]);
+  group.userData.cad_component_id = cad_component?.cad_component_id;
+  group.userData.pcb_component_id = cad_component?.pcb_component_id;
   useEffect25(() => {
     if (!rootObject) return;
     rootObject.add(group);
@@ -45183,7 +45245,7 @@ function JscadBoardTextures({
 }
 
 // src/three-components/STLModel.tsx
-import { useState as useState15, useEffect as useEffect27, useMemo as useMemo22 } from "react";
+import { useState as useState16, useEffect as useEffect27, useMemo as useMemo22 } from "react";
 import * as THREE45 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
@@ -45195,7 +45257,7 @@ function STLModel({
   layerType
 }) {
   const { rootObject } = useThree();
-  const [geom, setGeom] = useState15(null);
+  const [geom, setGeom] = useState16(null);
   useEffect27(() => {
     const loader = new STLLoader();
     if (stlData) {
@@ -45383,7 +45445,8 @@ var CadViewerJscad = forwardRef3(
     onUserInteraction,
     onCameraControllerReady,
     resolveStaticAsset,
-    referenceObject
+    referenceObject,
+    hiddenCadComponentIds
   }, ref) => {
     const childrenSoup = useConvertChildrenToCircuitJson(children);
     const internalCircuitJson = useMemo23(() => {
@@ -45453,7 +45516,7 @@ var CadViewerJscad = forwardRef3(
     }, [internalCircuitJson]);
     const pcbThickness = usePcbThickness(internalCircuitJson);
     const { stls: boardStls, loading } = useStlsFromGeom(boardGeom);
-    const cad_components = su12(internalCircuitJson).cad_component.list();
+    const cad_components = su12(internalCircuitJson).cad_component.list().filter((cad) => !hiddenCadComponentIds?.has(cad.cad_component_id));
     return /* @__PURE__ */ jsxs5(
       CadViewerContainer,
       {
@@ -45710,15 +45773,11 @@ function indexSegment(head, stop) {
   do {
     const b = numBlocks++;
     blockHead[b] = p;
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    let minX = p.x, minY = p.y, maxX = p.x, maxY = p.y;
     let k = 0;
     do {
       const c = p.next;
       p.z = b;
-      if (p.x < minX) minX = p.x;
-      if (p.x > maxX) maxX = p.x;
-      if (p.y < minY) minY = p.y;
-      if (p.y > maxY) maxY = p.y;
       if (c.x < minX) minX = c.x;
       if (c.x > maxX) maxX = c.x;
       if (c.y < minY) minY = c.y;
@@ -45827,6 +45886,20 @@ function indexCurve(start, minX, minY, invSize) {
     prev = node;
   }
   prev.nextZ = null;
+  sortArr.fill(
+    /** @type {Node} */
+    /** @type {unknown} */
+    null,
+    0,
+    n
+  );
+  sortBuf.fill(
+    /** @type {Node} */
+    /** @type {unknown} */
+    null,
+    0,
+    n
+  );
 }
 function sortNodes(n) {
   if (n <= 32) {
@@ -46630,12 +46703,12 @@ function createFlexMeshes(geometryMeshes, textureMeshes, json, foldPcbs) {
 
 // src/CadViewerManifold.tsx
 import { su as su17 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect29, useMemo as useMemo25, useState as useState17 } from "react";
+import { useEffect as useEffect29, useMemo as useMemo25, useState as useState18 } from "react";
 import * as THREE53 from "three";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { su as su16 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect28, useMemo as useMemo24, useRef as useRef9, useState as useState16 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo24, useRef as useRef9, useState as useState17 } from "react";
 import * as THREE50 from "three";
 
 // src/utils/manifold/create-manifold-board.ts
@@ -47750,10 +47823,10 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 
 // src/hooks/useManifoldBoardBuilder.ts
 var useManifoldBoardBuilder = (manifoldJSModule, circuitJson, visibility) => {
-  const [geoms, setGeoms] = useState16(null);
-  const [pcbThickness, setPcbThickness] = useState16(null);
-  const [error, setError] = useState16(null);
-  const [isLoading, setIsLoading] = useState16(true);
+  const [geoms, setGeoms] = useState17(null);
+  const [pcbThickness, setPcbThickness] = useState17(null);
+  const [error, setError] = useState17(null);
+  const [isLoading, setIsLoading] = useState17(true);
   const manifoldInstancesForCleanup = useRef9([]);
   const boardData = useMemo24(() => {
     const panels = circuitJson.filter(
@@ -48157,15 +48230,16 @@ var CadViewerManifold = ({
   children,
   onCameraControllerReady,
   resolveStaticAsset,
-  referenceObject
+  referenceObject,
+  hiddenCadComponentIds
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children);
   const circuitJson = useMemo25(() => {
     const rawCircuitJson = circuitJsonProp ?? childrenCircuitJson;
     return addFauxBoardIfNeeded(rawCircuitJson);
   }, [circuitJsonProp, childrenCircuitJson]);
-  const [manifoldJSModule, setManifoldJSModule] = useState17(null);
-  const [manifoldLoadingError, setManifoldLoadingError] = useState17(null);
+  const [manifoldJSModule, setManifoldJSModule] = useState18(null);
+  const [manifoldLoadingError, setManifoldLoadingError] = useState18(null);
   const { visibility } = useLayerVisibility();
   useEffect29(() => {
     if (window.ManifoldModule && typeof window.ManifoldModule === "object" && window.ManifoldModule.setup) {
@@ -48270,8 +48344,8 @@ try {
     foldPcbs
   ]);
   const cadComponents = useMemo25(
-    () => su17(flex.posedJson).cad_component.list(),
-    [flex.posedJson]
+    () => su17(flex.posedJson).cad_component.list().filter((cad) => !hiddenCadComponentIds?.has(cad.cad_component_id)),
+    [flex.posedJson, hiddenCadComponentIds]
   );
   const boardDimensions = useMemo25(() => {
     if (!boardData) return void 0;
@@ -52970,9 +53044,9 @@ function assignRef(ref, value) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useRef.js
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 function useCallbackRef2(initialValue, callback) {
-  var ref = useState30(function() {
+  var ref = useState31(function() {
     return {
       // value
       value: initialValue,
@@ -54583,11 +54657,11 @@ var SubTrigger2 = DropdownMenuSubTrigger;
 var SubContent2 = DropdownMenuSubContent;
 
 // src/components/ViewportSubContent.tsx
-import { useLayoutEffect as useLayoutEffect5, useState as useState34 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useState as useState35 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var ViewportSubContent = (props) => {
-  const [content, setContent] = useState34(null);
-  const [overlapWidth, setOverlapWidth] = useState34();
+  const [content, setContent] = useState35(null);
+  const [overlapWidth, setOverlapWidth] = useState35();
   useLayoutEffect5(() => {
     if (!content) return;
     const trigger = document.getElementById(
@@ -54642,10 +54716,10 @@ var menuViewportStyles = {
 };
 
 // src/components/ContextMenu.tsx
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 
 // src/components/AppearanceMenu.tsx
-import { useState as useState35 } from "react";
+import { useState as useState36 } from "react";
 
 // src/components/Icons.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
@@ -54772,8 +54846,8 @@ var AppearanceMenu = () => {
     lightingEnabled,
     setLightingEnabled
   } = useAppearance();
-  const [appearanceSubOpen, setAppearanceSubOpen] = useState35(false);
-  const [hoveredItem, setHoveredItem] = useState35(null);
+  const [appearanceSubOpen, setAppearanceSubOpen] = useState36(false);
+  const [hoveredItem, setHoveredItem] = useState36(null);
   return /* @__PURE__ */ jsxs7(Fragment10, { children: [
     /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles }),
     /* @__PURE__ */ jsxs7(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
@@ -55214,14 +55288,17 @@ var ContextMenu = ({
   onReferenceObjectSelect = () => {
   },
   onViewSchematicComponent,
+  componentName,
+  onHideComponent,
+  onUnhideAllComponents,
   onDownloadGltf,
   onOpenKeyboardShortcuts
 }) => {
   const { cameraType, setCameraType } = useCameraController();
   const { gridEnabled, setGridEnabled } = useAppearance();
-  const [cameraSubOpen, setCameraSubOpen] = useState36(false);
-  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState36(false);
-  const [hoveredItem, setHoveredItem] = useState36(null);
+  const [cameraSubOpen, setCameraSubOpen] = useState37(false);
+  const [referenceObjectSubOpen, setReferenceObjectSubOpen] = useState37(false);
+  const [hoveredItem, setHoveredItem] = useState37(null);
   return /* @__PURE__ */ jsx36(
     "div",
     {
@@ -55244,23 +55321,49 @@ var ContextMenu = ({
             sideOffset: 0,
             align: "start",
             children: [
-              onViewSchematicComponent && /* @__PURE__ */ jsxs8(Fragment11, { children: [
-                /* @__PURE__ */ jsx36(
-                  Item22,
-                  {
-                    style: {
-                      ...itemStyles2,
-                      ...itemPaddingStyles2,
-                      backgroundColor: hoveredItem === "schematic" ? "#404040" : "transparent"
-                    },
-                    onSelect: onViewSchematicComponent,
-                    onMouseEnter: () => setHoveredItem("schematic"),
-                    onMouseLeave: () => setHoveredItem(null),
-                    children: "Show on schematic"
-                  }
-                ),
-                /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 })
-              ] }),
+              onViewSchematicComponent && /* @__PURE__ */ jsx36(Fragment11, { children: /* @__PURE__ */ jsx36(
+                Item22,
+                {
+                  style: {
+                    ...itemStyles2,
+                    ...itemPaddingStyles2,
+                    backgroundColor: hoveredItem === "schematic" ? "#404040" : "transparent"
+                  },
+                  onSelect: onViewSchematicComponent,
+                  onMouseEnter: () => setHoveredItem("schematic"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  children: "Show on schematic"
+                }
+              ) }),
+              onHideComponent && /* @__PURE__ */ jsx36(
+                Item22,
+                {
+                  style: {
+                    ...itemStyles2,
+                    ...itemPaddingStyles2,
+                    backgroundColor: hoveredItem === "hide" ? "#404040" : "transparent"
+                  },
+                  onSelect: onHideComponent,
+                  onMouseEnter: () => setHoveredItem("hide"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  children: `Hide "${componentName}"`
+                }
+              ),
+              onUnhideAllComponents && /* @__PURE__ */ jsx36(
+                Item22,
+                {
+                  style: {
+                    ...itemStyles2,
+                    ...itemPaddingStyles2,
+                    backgroundColor: hoveredItem === "unhide" ? "#404040" : "transparent"
+                  },
+                  onSelect: onUnhideAllComponents,
+                  onMouseEnter: () => setHoveredItem("unhide"),
+                  onMouseLeave: () => setHoveredItem(null),
+                  children: "Unhide All Components"
+                }
+              ),
+              (onViewSchematicComponent || onHideComponent || onUnhideAllComponents) && /* @__PURE__ */ jsx36(Separator2, { style: separatorStyles2 }),
               /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setCameraSubOpen, children: [
                 /* @__PURE__ */ jsxs8(
                   SubTrigger2,
@@ -55603,10 +55706,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect48, useMemo as useMemo33, useRef as useRef27, useState as useState38 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo33, useRef as useRef27, useState as useState39 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect47, useMemo as useMemo32, useRef as useRef26, useState as useState37 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo32, useRef as useRef26, useState as useState38 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -55750,7 +55853,7 @@ var useRegisteredHotkey = (id, handler, metadata) => {
   }, [id, normalizedMetadata]);
 };
 var useHotkeyRegistry = () => {
-  const [entries, setEntries] = useState37(
+  const [entries, setEntries] = useState38(
     () => Array.from(hotkeyRegistry.values())
   );
   useEffect47(() => subscribeToRegistry(setEntries), []);
@@ -55767,7 +55870,7 @@ var KeyboardShortcutsDialog = ({
   open,
   onClose
 }) => {
-  const [query, setQuery] = useState38("");
+  const [query, setQuery] = useState39("");
   const inputRef = useRef27(null);
   const hotkeys = useHotkeyRegistry();
   useEffect48(() => {
@@ -56010,10 +56113,10 @@ function useCameraPreset({
 }
 
 // src/hooks/useContextMenu.ts
-import { useState as useState39, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect49 } from "react";
+import { useState as useState40, useCallback as useCallback22, useRef as useRef28, useEffect as useEffect49 } from "react";
 var useContextMenu = ({ containerRef, onOpen }) => {
-  const [menuVisible, setMenuVisible] = useState39(false);
-  const [menuPos, setMenuPos] = useState39({
+  const [menuVisible, setMenuVisible] = useState40(false);
+  const [menuPos, setMenuPos] = useState40({
     x: 0,
     y: 0
   });
@@ -56205,37 +56308,48 @@ var CadViewerInner = (props) => {
   const circuitJson = props.circuitJson ?? childrenCircuitJson;
   const hasBends = circuitJson.some((element) => element.type === "pcb_bend");
   const hasFlexGeometry = hasBends || circuitJson.some((element) => element.type === "pcb_stiffener");
-  const [foldPcbsOverride, setFoldPcbs] = useState40(
+  const [foldPcbsOverride, setFoldPcbs] = useState41(
     void 0
   );
   const foldPcbs = foldPcbsOverride ?? props.foldPcbs;
   const resolvedFoldPcbs = resolveFoldPcbs(circuitJson, foldPcbs);
-  const resolvedProps = { ...props, circuitJson, children: void 0 };
-  const [engine, setEngine] = useState40(() => {
+  const circuitKey = JSON.stringify(circuitJson);
+  const { hiddenCadComponentIds, hideComponent, unhideAllComponents } = useHiddenCadComponents(circuitKey);
+  const resolvedProps = {
+    ...props,
+    circuitJson,
+    children: void 0,
+    hiddenCadComponentIds
+  };
+  const [engine, setEngine] = useState41(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     return stored === "jscad" || stored === "manifold" ? stored : "manifold";
   });
   const containerRef = useRef29(null);
-  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState40(false);
-  const [autoRotate, setAutoRotate] = useState40(() => {
+  const [isKeyboardShortcutsDialogOpen, setIsKeyboardShortcutsDialogOpen] = useState41(false);
+  const [autoRotate, setAutoRotate] = useState41(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored !== "false";
   });
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState40(() => {
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState41(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotateUserToggled");
     return stored === "true";
   });
-  const [cameraPreset, setCameraPreset] = useState40("Custom");
-  const [referenceObject, setReferenceObject] = useState40(null);
+  const [cameraPreset, setCameraPreset] = useState41("Custom");
+  const [referenceObject, setReferenceObject] = useState41(null);
   const { cameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const { showToast } = useToast();
   const cameraControllerRef = useRef29(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const sceneRef = useContext10(SchematicNavigationContext);
-  const [selectedComponent, setSelectedComponent] = useState40();
+  const [selectedComponent, setSelectedComponent] = useState41();
+  const [selectedCadComponent, setSelectedCadComponent] = useState41();
   const handleMenuOpen = useCallback24(
     (position) => {
+      setSelectedCadComponent(
+        pickCadComponent(sceneRef.current, position, circuitJson)
+      );
       setSelectedComponent(
         props.onViewSchematicComponent ? pickSchematicComponent(sceneRef.current, position, circuitJson) : void 0
       );
@@ -56367,7 +56481,7 @@ var CadViewerInner = (props) => {
   useEffect50(() => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
-  const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
+  const viewerKey = props.circuitJson ? circuitKey : void 0;
   return /* @__PURE__ */ jsxs11(
     "div",
     {
@@ -56418,6 +56532,15 @@ var CadViewerInner = (props) => {
         menuVisible && /* @__PURE__ */ jsx39(
           ContextMenu,
           {
+            componentName: selectedCadComponent?.componentName,
+            onHideComponent: selectedCadComponent ? () => {
+              hideComponent(selectedCadComponent.cad_component_id);
+              closeMenu();
+            } : void 0,
+            onUnhideAllComponents: hiddenCadComponentIds.size > 0 ? () => {
+              unhideAllComponents();
+              closeMenu();
+            } : void 0,
             onViewSchematicComponent: selectedComponent && props.onViewSchematicComponent ? () => {
               props.onViewSchematicComponent?.(selectedComponent);
               closeMenu();
@@ -56783,7 +56906,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 
 // src/hooks/exporter/gltf.ts
 import { GLTFExporter as GLTFExporter3 } from "three-stdlib";
-import { useEffect as useEffect51, useState as useState41, useMemo as useMemo34, useCallback as useCallback25 } from "react";
+import { useEffect as useEffect51, useState as useState42, useMemo as useMemo34, useCallback as useCallback25 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
   const link = useMemo34(() => document.createElement("a"), []);
@@ -56811,8 +56934,8 @@ function useSaveGltfAs(options = {}) {
 }
 function useExportGltfUrl(options = {}) {
   const parse2 = useParser(options);
-  const [url, setUrl] = useState41();
-  const [error, setError] = useState41();
+  const [url, setUrl] = useState42();
+  const [error, setError] = useState42();
   const ref = useCallback25(
     (instance) => parse2(instance).then(setUrl).catch(setError),
     []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.609",
+  "version": "0.0.610",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/3d-viewer"