@tscircuit/3d-viewer 0.0.442 → 0.0.443

package/dist/index.js

@@ -28200,6 +28200,12 @@ var AnyCadComponent = ({
       source_component_id: cad_component2.source_component_id
     })?.name;
   }, [circuitJson, cad_component2.source_component_id]);
+  const isThroughHole = useMemo7(() => {
+    const platedHoles = circuitJson.filter(
+      (elm) => elm.type === "pcb_plated_hole" && elm.pcb_component_id === cad_component2.pcb_component_id
+    );
+    return platedHoles.length > 0;
+  }, [circuitJson, cad_component2.pcb_component_id]);
   const url = cad_component2.model_obj_url ?? cad_component2.model_wrl_url ?? cad_component2.model_stl_url;
   const gltfUrl = cad_component2.model_glb_url ?? cad_component2.model_gltf_url;
   const rotationOffset = cad_component2.rotation ? tuple(
@@ -28275,7 +28281,10 @@ var AnyCadComponent = ({
       }
     );
   }
-  if (!visibility.smtModels) {
+  if (isThroughHole && !visibility.throughHoleModels) {
+    return null;
+  }
+  if (!isThroughHole && !visibility.smtModels) {
     return null;
   }
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
@@ -28309,7 +28318,7 @@ import * as THREE15 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.441",
+  version: "0.0.442",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -28338,6 +28347,7 @@ var package_default = {
   dependencies: {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
+    "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
     "troika-three-text": "^0.52.4"
@@ -34547,6 +34557,11 @@ import { useEffect as useEffect25, useMemo as useMemo21, useRef as useRef11, use
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
+var lastMouseX = 0;
+var lastMouseY = 0;
+var viewerElement = null;
+var mouseTrackingAttached = false;
+var MAX_PARENT_DEPTH = 20;
 var parseShortcut = (shortcut) => {
   const parts = shortcut.toLowerCase().split("+");
   const key = parts[parts.length - 1];
@@ -34576,10 +34591,53 @@ var isEditableTarget = (target) => {
   if (editableTags.includes(tagName)) {
     return true;
   }
-  return Boolean(element.getAttribute?.("contenteditable"));
+  const contentEditable = element.getAttribute?.("contenteditable");
+  if (contentEditable === "true" || contentEditable === "") {
+    return true;
+  }
+  let current2 = element.parentElement;
+  for (let depth = 0; depth < MAX_PARENT_DEPTH && current2; depth++) {
+    const tagName2 = current2.tagName;
+    if (editableTags.includes(tagName2)) {
+      return true;
+    }
+    const contentEditable2 = current2.getAttribute?.("contenteditable");
+    if (contentEditable2 === "true" || contentEditable2 === "") {
+      return true;
+    }
+    current2 = current2.parentElement;
+  }
+  return false;
+};
+var isInputFocused = () => {
+  if (typeof document === "undefined") return false;
+  const activeElement = document.activeElement;
+  if (!activeElement) return false;
+  const tagName = activeElement.tagName;
+  if (tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") {
+    return true;
+  }
+  const contentEditable = activeElement.getAttribute("contenteditable");
+  return contentEditable === "true" || contentEditable === "";
+};
+var isMouseOverViewer = () => {
+  if (!viewerElement) return true;
+  const rect = viewerElement.getBoundingClientRect();
+  return lastMouseX >= rect.left && lastMouseX <= rect.right && lastMouseY >= rect.top && lastMouseY <= rect.bottom;
+};
+var attachMouseTracking = () => {
+  if (mouseTrackingAttached || typeof window === "undefined") return;
+  window.addEventListener("mousemove", (e) => {
+    lastMouseX = e.clientX;
+    lastMouseY = e.clientY;
+  });
+  mouseTrackingAttached = true;
 };
 var handleKeydown = (event) => {
-  if (isEditableTarget(event.target)) {
+  if (isEditableTarget(event.target) || isInputFocused()) {
+    return;
+  }
+  if (viewerElement && !isMouseOverViewer()) {
     return;
   }
   hotkeyRegistry.forEach((entry) => {
@@ -34645,6 +34703,29 @@ var useHotkeyRegistry = () => {
   useEffect25(() => subscribeToRegistry(setEntries), []);
   return entries;
 };
+var registerHotkeyViewer = (element) => {
+  viewerElement = element;
+  attachMouseTracking();
+};
+
+// src/contexts/ToastContext.tsx
+import { Toaster, toast as hotToast } from "react-hot-toast";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+var useToast = () => {
+  return {
+    showToast: (message, duration = 2e3) => {
+      hotToast(message, { duration });
+    }
+  };
+};
+var ToastProvider = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    children,
+    /* @__PURE__ */ jsx18(Toaster, { position: "bottom-right" })
+  ] });
+};
 
 // src/components/ContextMenu.tsx
 import { useState as useState34 } from "react";
@@ -34702,7 +34783,7 @@ function useComposedRefs(...refs) {
 
 // node_modules/@radix-ui/react-context/dist/index.mjs
 import * as React13 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
@@ -34713,7 +34794,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React13.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx18(Context.Provider, { value, children });
+      return /* @__PURE__ */ jsx19(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
@@ -34843,7 +34924,7 @@ import * as ReactDOM2 from "react-dom";
 
 // node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React16 from "react";
-import { Fragment as Fragment23, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx20 } from "react/jsx-runtime";
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -34861,9 +34942,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx19(SlotClone, { ...slotProps, ref: forwardedRef, children: React16.isValidElement(newElement) ? React16.cloneElement(newElement, void 0, newChildren) : null });
+      return /* @__PURE__ */ jsx20(SlotClone, { ...slotProps, ref: forwardedRef, children: React16.isValidElement(newElement) ? React16.cloneElement(newElement, void 0, newChildren) : null });
     }
-    return /* @__PURE__ */ jsx19(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ jsx20(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
@@ -34928,7 +35009,7 @@ function getElementRef(element) {
 }
 
 // node_modules/@radix-ui/react-primitive/dist/index.mjs
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var NODES = [
   "a",
   "button",
@@ -34956,7 +35037,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ jsx20(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx21(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -34970,9 +35051,9 @@ import * as React42 from "react";
 
 // node_modules/@radix-ui/react-collection/dist/index.mjs
 import React18 from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-import React23 from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
+import React23 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function createCollection(name) {
   const PROVIDER_NAME = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope3] = createContextScope(PROVIDER_NAME);
@@ -34984,7 +35065,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = React18.useRef(null);
     const itemMap = React18.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx21(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ jsx22(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -34994,7 +35075,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx21(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx22(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -35011,7 +35092,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ jsx21(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx22(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -35038,7 +35119,7 @@ function createCollection(name) {
 
 // node_modules/@radix-ui/react-direction/dist/index.mjs
 import * as React19 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var DirectionContext = React19.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React19.useContext(DirectionContext);
@@ -35074,7 +35155,7 @@ function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.docum
 }
 
 // node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
@@ -35162,7 +35243,7 @@ var DismissableLayer = React24.forwardRef(
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25(
       Primitive.div,
       {
         ...layerProps,
@@ -35196,7 +35277,7 @@ var DismissableLayerBranch = React24.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ jsx24(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ jsx25(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
@@ -35308,7 +35389,7 @@ function createFocusGuard() {
 
 // node_modules/@radix-ui/react-focus-scope/dist/index.mjs
 import * as React26 from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
@@ -35427,7 +35508,7 @@ var FocusScope = React26.forwardRef((props, forwardedRef) => {
     },
     [loop, trapped, focusScope.paused]
   );
-  return /* @__PURE__ */ jsx25(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
+  return /* @__PURE__ */ jsx26(Primitive.div, { tabIndex: -1, ...scopeProps, ref: composedRefs, onKeyDown: handleKeyDown });
 });
 FocusScope.displayName = FOCUS_SCOPE_NAME;
 function focusFirst(candidates, { select = false } = {}) {
@@ -37417,11 +37498,11 @@ var arrow3 = (options, deps) => ({
 
 // node_modules/@radix-ui/react-arrow/dist/index.mjs
 import * as React29 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var NAME = "Arrow";
 var Arrow = React29.forwardRef((props, forwardedRef) => {
   const { children, width: width10 = 10, height: height10 = 5, ...arrowProps } = props;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     Primitive.svg,
     {
       ...arrowProps,
@@ -37430,7 +37511,7 @@ var Arrow = React29.forwardRef((props, forwardedRef) => {
       height: height10,
       viewBox: "0 0 30 10",
       preserveAspectRatio: "none",
-      children: props.asChild ? children : /* @__PURE__ */ jsx26("polygon", { points: "0,0 30,0 15,10" })
+      children: props.asChild ? children : /* @__PURE__ */ jsx27("polygon", { points: "0,0 30,0 15,10" })
     }
   );
 });
@@ -37475,14 +37556,14 @@ function useSize(element) {
 }
 
 // node_modules/@radix-ui/react-popper/dist/index.mjs
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var POPPER_NAME = "Popper";
 var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
   const [anchor, setAnchor] = React31.useState(null);
-  return /* @__PURE__ */ jsx27(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  return /* @__PURE__ */ jsx28(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
@@ -37500,7 +37581,7 @@ var PopperAnchor = React31.forwardRef(
         context.onAnchorChange(anchorRef.current);
       }
     });
-    return virtualRef ? null : /* @__PURE__ */ jsx27(Primitive.div, { ...anchorProps, ref: composedRefs });
+    return virtualRef ? null : /* @__PURE__ */ jsx28(Primitive.div, { ...anchorProps, ref: composedRefs });
   }
 );
 PopperAnchor.displayName = ANCHOR_NAME;
@@ -37593,7 +37674,7 @@ var PopperContent = React31.forwardRef(
     useLayoutEffect2(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "div",
       {
         ref: refs.setFloating,
@@ -37617,7 +37698,7 @@ var PopperContent = React31.forwardRef(
           }
         },
         dir: props.dir,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           PopperContentProvider,
           {
             scope: __scopePopper,
@@ -37626,7 +37707,7 @@ var PopperContent = React31.forwardRef(
             arrowX,
             arrowY,
             shouldHideArrow: cannotCenterArrow,
-            children: /* @__PURE__ */ jsx27(
+            children: /* @__PURE__ */ jsx28(
               Primitive.div,
               {
                 "data-side": placedSide,
@@ -37663,7 +37744,7 @@ var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef)
     // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
     // doesn't report size as we'd expect on SVG elements.
     // it reports their bounding box which is effectively the largest path inside the SVG.
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "span",
       {
         ref: contentContext.onArrowChange,
@@ -37686,7 +37767,7 @@ var PopperArrow = React31.forwardRef(function PopperArrow2(props, forwardedRef)
           }[contentContext.placedSide],
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           Root,
           {
             ...arrowProps,
@@ -37749,14 +37830,14 @@ var Arrow2 = PopperArrow;
 // node_modules/@radix-ui/react-portal/dist/index.mjs
 import * as React32 from "react";
 import ReactDOM4 from "react-dom";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var PORTAL_NAME = "Portal";
 var Portal = React32.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React32.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
-  return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx28(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+  return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx29(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal.displayName = PORTAL_NAME;
 
@@ -37888,7 +37969,7 @@ function getElementRef2(element) {
 
 // node_modules/@radix-ui/react-roving-focus/dist/index.mjs
 import * as React34 from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var EVENT_OPTIONS2 = { bubbles: false, cancelable: true };
 var GROUP_NAME = "RovingFocusGroup";
@@ -37900,7 +37981,7 @@ var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContext
 var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
 var RovingFocusGroup = React34.forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx29(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx29(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
+    return /* @__PURE__ */ jsx30(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx30(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: /* @__PURE__ */ jsx30(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
   }
 );
 RovingFocusGroup.displayName = GROUP_NAME;
@@ -37938,7 +38019,7 @@ var RovingFocusGroupImpl = React34.forwardRef((props, forwardedRef) => {
       return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
     }
   }, [handleEntryFocus]);
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     RovingFocusProvider,
     {
       scope: __scopeRovingFocusGroup,
@@ -37959,7 +38040,7 @@ var RovingFocusGroupImpl = React34.forwardRef((props, forwardedRef) => {
         () => setFocusableItemsCount((prevCount) => prevCount - 1),
         []
       ),
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx30(
         Primitive.div,
         {
           tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
@@ -38017,14 +38098,14 @@ var RovingFocusGroupItem = React34.forwardRef(
         return () => onFocusableItemRemove();
       }
     }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30(
       Collection.ItemSlot,
       {
         scope: __scopeRovingFocusGroup,
         id,
         focusable,
         active,
-        children: /* @__PURE__ */ jsx29(
+        children: /* @__PURE__ */ jsx30(
           Primitive.span,
           {
             tabIndex: isCurrentTabStop ? 0 : -1,
@@ -38935,7 +39016,7 @@ ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // node_modules/@radix-ui/react-menu/dist/index.mjs
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var SELECTION_KEYS = ["Enter", " "];
 var FIRST_KEYS = ["ArrowDown", "PageUp", "Home"];
 var LAST_KEYS = ["ArrowUp", "PageDown", "End"];
@@ -38980,7 +39061,7 @@ var Menu = (props) => {
       document.removeEventListener("pointermove", handlePointer, { capture: true });
     };
   }, []);
-  return /* @__PURE__ */ jsx30(Root2, { ...popperScope, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(Root2, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -38988,7 +39069,7 @@ var Menu = (props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         MenuRootProvider,
         {
           scope: __scopeMenu,
@@ -39008,7 +39089,7 @@ var MenuAnchor = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...anchorProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx30(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
   }
 );
 MenuAnchor.displayName = ANCHOR_NAME2;
@@ -39019,7 +39100,7 @@ var [PortalProvider, usePortalContext] = createMenuContext(PORTAL_NAME2, {
 var MenuPortal = (props) => {
   const { __scopeMenu, forceMount, children, container } = props;
   const context = useMenuContext(PORTAL_NAME2, __scopeMenu);
-  return /* @__PURE__ */ jsx30(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Portal, { asChild: true, container, children }) }) });
+  return /* @__PURE__ */ jsx31(PortalProvider, { scope: __scopeMenu, forceMount, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Portal, { asChild: true, container, children }) }) });
 };
 MenuPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "MenuContent";
@@ -39030,7 +39111,7 @@ var MenuContent = React42.forwardRef(
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
     const rootContext = useMenuRootContext(CONTENT_NAME2, props.__scopeMenu);
-    return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx30(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx30(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
+    return /* @__PURE__ */ jsx31(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Collection2.Slot, { scope: props.__scopeMenu, children: rootContext.modal ? /* @__PURE__ */ jsx31(MenuRootContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx31(MenuRootContentNonModal, { ...contentProps, ref: forwardedRef }) }) }) });
   }
 );
 var MenuRootContentModal = React42.forwardRef(
@@ -39042,7 +39123,7 @@ var MenuRootContentModal = React42.forwardRef(
       const content = ref.current;
       if (content) return hideOthers(content);
     }, []);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuContentImpl,
       {
         ...props,
@@ -39062,7 +39143,7 @@ var MenuRootContentModal = React42.forwardRef(
 );
 var MenuRootContentNonModal = React42.forwardRef((props, forwardedRef) => {
   const context = useMenuContext(CONTENT_NAME2, props.__scopeMenu);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     MenuContentImpl,
     {
       ...props,
@@ -39134,7 +39215,7 @@ var MenuContentImpl = React42.forwardRef(
       const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;
       return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);
     }, []);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuContentProvider,
       {
         scope: __scopeMenu,
@@ -39163,7 +39244,7 @@ var MenuContentImpl = React42.forwardRef(
         onPointerGraceIntentChange: React42.useCallback((intent) => {
           pointerGraceIntentRef.current = intent;
         }, []),
-        children: /* @__PURE__ */ jsx30(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(ScrollLockWrapper, { ...scrollLockWrapperProps, children: /* @__PURE__ */ jsx31(
           FocusScope,
           {
             asChild: true,
@@ -39173,7 +39254,7 @@ var MenuContentImpl = React42.forwardRef(
               contentRef.current?.focus({ preventScroll: true });
             }),
             onUnmountAutoFocus: onCloseAutoFocus,
-            children: /* @__PURE__ */ jsx30(
+            children: /* @__PURE__ */ jsx31(
               DismissableLayer,
               {
                 asChild: true,
@@ -39183,7 +39264,7 @@ var MenuContentImpl = React42.forwardRef(
                 onFocusOutside,
                 onInteractOutside,
                 onDismiss,
-                children: /* @__PURE__ */ jsx30(
+                children: /* @__PURE__ */ jsx31(
                   Root3,
                   {
                     asChild: true,
@@ -39197,7 +39278,7 @@ var MenuContentImpl = React42.forwardRef(
                       if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();
                     }),
                     preventScrollOnEntryFocus: true,
-                    children: /* @__PURE__ */ jsx30(
+                    children: /* @__PURE__ */ jsx31(
                       Content,
                       {
                         role: "menu",
@@ -39262,7 +39343,7 @@ var GROUP_NAME2 = "MenuGroup";
 var MenuGroup = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...groupProps } = props;
-    return /* @__PURE__ */ jsx30(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Primitive.div, { role: "group", ...groupProps, ref: forwardedRef });
   }
 );
 MenuGroup.displayName = GROUP_NAME2;
@@ -39270,7 +39351,7 @@ var LABEL_NAME = "MenuLabel";
 var MenuLabel = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...labelProps } = props;
-    return /* @__PURE__ */ jsx30(Primitive.div, { ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Primitive.div, { ...labelProps, ref: forwardedRef });
   }
 );
 MenuLabel.displayName = LABEL_NAME;
@@ -39297,7 +39378,7 @@ var MenuItem = React42.forwardRef(
         }
       }
     };
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
         ...itemProps,
@@ -39339,13 +39420,13 @@ var MenuItemImpl = React42.forwardRef(
         setTextContent((menuItem.textContent ?? "").trim());
       }
     }, [itemProps.children]);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Collection2.ItemSlot,
       {
         scope: __scopeMenu,
         disabled,
         textValue: textValue ?? textContent,
-        children: /* @__PURE__ */ jsx30(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(Item, { asChild: true, ...rovingFocusGroupScope, focusable: !disabled, children: /* @__PURE__ */ jsx31(
           Primitive.div,
           {
             role: "menuitem",
@@ -39384,7 +39465,7 @@ var CHECKBOX_ITEM_NAME = "MenuCheckboxItem";
 var MenuCheckboxItem = React42.forwardRef(
   (props, forwardedRef) => {
     const { checked = false, onCheckedChange, ...checkboxItemProps } = props;
-    return /* @__PURE__ */ jsx30(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx31(
       MenuItem,
       {
         role: "menuitemcheckbox",
@@ -39412,7 +39493,7 @@ var MenuRadioGroup = React42.forwardRef(
   (props, forwardedRef) => {
     const { value, onValueChange, ...groupProps } = props;
     const handleValueChange = useCallbackRef(onValueChange);
-    return /* @__PURE__ */ jsx30(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx30(MenuGroup, { ...groupProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ jsx31(RadioGroupProvider, { scope: props.__scopeMenu, value, onValueChange: handleValueChange, children: /* @__PURE__ */ jsx31(MenuGroup, { ...groupProps, ref: forwardedRef }) });
   }
 );
 MenuRadioGroup.displayName = RADIO_GROUP_NAME;
@@ -39422,7 +39503,7 @@ var MenuRadioItem = React42.forwardRef(
     const { value, ...radioItemProps } = props;
     const context = useRadioGroupContext(RADIO_ITEM_NAME, props.__scopeMenu);
     const checked = value === context.value;
-    return /* @__PURE__ */ jsx30(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(ItemIndicatorProvider, { scope: props.__scopeMenu, checked, children: /* @__PURE__ */ jsx31(
       MenuItem,
       {
         role: "menuitemradio",
@@ -39449,11 +39530,11 @@ var MenuItemIndicator = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;
     const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Presence,
       {
         present: forceMount || isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true,
-        children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx31(
           Primitive.span,
           {
             ...itemIndicatorProps,
@@ -39470,7 +39551,7 @@ var SEPARATOR_NAME = "MenuSeparator";
 var MenuSeparator = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...separatorProps } = props;
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       Primitive.div,
       {
         role: "separator",
@@ -39487,7 +39568,7 @@ var MenuArrow = React42.forwardRef(
   (props, forwardedRef) => {
     const { __scopeMenu, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopeMenu);
-    return /* @__PURE__ */ jsx30(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx31(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
   }
 );
 MenuArrow.displayName = ARROW_NAME2;
@@ -39504,7 +39585,7 @@ var MenuSub = (props) => {
     if (parentMenuContext.open === false) handleOpenChange(false);
     return () => handleOpenChange(false);
   }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx30(Root2, { ...popperScope, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(Root2, { ...popperScope, children: /* @__PURE__ */ jsx31(
     MenuProvider,
     {
       scope: __scopeMenu,
@@ -39512,7 +39593,7 @@ var MenuSub = (props) => {
       onOpenChange: handleOpenChange,
       content,
       onContentChange: setContent,
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         MenuSubProvider,
         {
           scope: __scopeMenu,
@@ -39549,7 +39630,7 @@ var MenuSubTrigger = React42.forwardRef(
         onPointerGraceIntentChange(null);
       };
     }, [pointerGraceTimerRef, onPointerGraceIntentChange]);
-    return /* @__PURE__ */ jsx30(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(MenuAnchor, { asChild: true, ...scope, children: /* @__PURE__ */ jsx31(
       MenuItemImpl,
       {
         id: subContext.triggerId,
@@ -39638,7 +39719,7 @@ var MenuSubContent = React42.forwardRef(
     const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);
     const ref = React42.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
-    return /* @__PURE__ */ jsx30(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx30(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(Collection2.Provider, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx31(Collection2.Slot, { scope: props.__scopeMenu, children: /* @__PURE__ */ jsx31(
       MenuContentImpl,
       {
         id: subContext.contentId,
@@ -39749,7 +39830,7 @@ var SubTrigger = MenuSubTrigger;
 var SubContent = MenuSubContent;
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var DROPDOWN_MENU_NAME = "DropdownMenu";
 var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
   DROPDOWN_MENU_NAME,
@@ -39775,7 +39856,7 @@ var DropdownMenu = (props) => {
     onChange: onOpenChange,
     caller: DROPDOWN_MENU_NAME
   });
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     DropdownMenuProvider,
     {
       scope: __scopeDropdownMenu,
@@ -39786,7 +39867,7 @@ var DropdownMenu = (props) => {
       onOpenChange: setOpen,
       onOpenToggle: React43.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
       modal,
-      children: /* @__PURE__ */ jsx31(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
+      children: /* @__PURE__ */ jsx32(Root32, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
     }
   );
 };
@@ -39797,7 +39878,7 @@ var DropdownMenuTrigger = React43.forwardRef(
     const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
     const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(Anchor2, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx32(
       Primitive.button,
       {
         type: "button",
@@ -39831,7 +39912,7 @@ var PORTAL_NAME3 = "DropdownMenuPortal";
 var DropdownMenuPortal = (props) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(Portal2, { ...menuScope, ...portalProps });
+  return /* @__PURE__ */ jsx32(Portal2, { ...menuScope, ...portalProps });
 };
 DropdownMenuPortal.displayName = PORTAL_NAME3;
 var CONTENT_NAME3 = "DropdownMenuContent";
@@ -39841,7 +39922,7 @@ var DropdownMenuContent = React43.forwardRef(
     const context = useDropdownMenuContext(CONTENT_NAME3, __scopeDropdownMenu);
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = React43.useRef(false);
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(
       Content2,
       {
         id: context.contentId,
@@ -39881,7 +39962,7 @@ var DropdownMenuGroup = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...groupProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Group4, { ...menuScope, ...groupProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Group4, { ...menuScope, ...groupProps, ref: forwardedRef });
   }
 );
 DropdownMenuGroup.displayName = GROUP_NAME3;
@@ -39890,7 +39971,7 @@ var DropdownMenuLabel = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...labelProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
   }
 );
 DropdownMenuLabel.displayName = LABEL_NAME2;
@@ -39899,7 +39980,7 @@ var DropdownMenuItem = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...itemProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Item2, { ...menuScope, ...itemProps, ref: forwardedRef });
   }
 );
 DropdownMenuItem.displayName = ITEM_NAME3;
@@ -39907,35 +39988,35 @@ var CHECKBOX_ITEM_NAME2 = "DropdownMenuCheckboxItem";
 var DropdownMenuCheckboxItem = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...checkboxItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
 });
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME2;
 var RADIO_GROUP_NAME2 = "DropdownMenuRadioGroup";
 var DropdownMenuRadioGroup = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioGroupProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
 });
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME2;
 var RADIO_ITEM_NAME2 = "DropdownMenuRadioItem";
 var DropdownMenuRadioItem = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...radioItemProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
 });
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME2;
 var INDICATOR_NAME = "DropdownMenuItemIndicator";
 var DropdownMenuItemIndicator = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
 });
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 var SEPARATOR_NAME2 = "DropdownMenuSeparator";
 var DropdownMenuSeparator = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...separatorProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
 });
 DropdownMenuSeparator.displayName = SEPARATOR_NAME2;
 var ARROW_NAME3 = "DropdownMenuArrow";
@@ -39943,7 +40024,7 @@ var DropdownMenuArrow = React43.forwardRef(
   (props, forwardedRef) => {
     const { __scopeDropdownMenu, ...arrowProps } = props;
     const menuScope = useMenuScope(__scopeDropdownMenu);
-    return /* @__PURE__ */ jsx31(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx32(Arrow22, { ...menuScope, ...arrowProps, ref: forwardedRef });
   }
 );
 DropdownMenuArrow.displayName = ARROW_NAME3;
@@ -39956,20 +40037,20 @@ var DropdownMenuSub = (props) => {
     onChange: onOpenChange,
     caller: "DropdownMenuSub"
   });
-  return /* @__PURE__ */ jsx31(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
+  return /* @__PURE__ */ jsx32(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
 };
 var SUB_TRIGGER_NAME2 = "DropdownMenuSubTrigger";
 var DropdownMenuSubTrigger = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
+  return /* @__PURE__ */ jsx32(SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
 });
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME2;
 var SUB_CONTENT_NAME2 = "DropdownMenuSubContent";
 var DropdownMenuSubContent = React43.forwardRef((props, forwardedRef) => {
   const { __scopeDropdownMenu, ...subContentProps } = props;
   const menuScope = useMenuScope(__scopeDropdownMenu);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     SubContent,
     {
       ...menuScope,
@@ -40004,8 +40085,8 @@ var SubContent2 = DropdownMenuSubContent;
 import { useState as useState33 } from "react";
 
 // src/components/Icons.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx32(
+import { jsx as jsx33 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40017,10 +40098,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx32(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx32("path", { d: "M20 6 9 17l-5-5" })
+    children: /* @__PURE__ */ jsx33("path", { d: "M20 6 9 17l-5-5" })
   }
 );
-var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx32(
+var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40037,10 +40118,10 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx32(
       transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
       opacity: 0.6
     },
-    children: /* @__PURE__ */ jsx32("path", { d: "m9 18 6-6-6-6" })
+    children: /* @__PURE__ */ jsx33("path", { d: "m9 18 6-6-6-6" })
   }
 );
-var DotIcon = () => /* @__PURE__ */ jsx32(
+var DotIcon = () => /* @__PURE__ */ jsx33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -40053,12 +40134,12 @@ var DotIcon = () => /* @__PURE__ */ jsx32(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className: "lucide lucide-dot-icon lucide-dot",
-    children: /* @__PURE__ */ jsx32("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
+    children: /* @__PURE__ */ jsx33("circle", { cx: "12.1", cy: "12.1", r: "4.5", fill: "white" })
   }
 );
 
 // src/components/AppearanceMenu.tsx
-import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
 var itemStyles = {
   padding: "6px 8px",
   borderRadius: 6,
@@ -40109,10 +40190,10 @@ var AppearanceMenu = () => {
   const { visibility, setLayerVisibility } = useLayerVisibility();
   const [appearanceSubOpen, setAppearanceSubOpen] = useState33(false);
   const [hoveredItem, setHoveredItem] = useState33(null);
-  return /* @__PURE__ */ jsxs7(Fragment9, { children: [
-    /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles }),
-    /* @__PURE__ */ jsxs7(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
-      /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(Fragment10, { children: [
+    /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles }),
+    /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setAppearanceSubOpen, children: [
+      /* @__PURE__ */ jsxs8(
         SubTrigger2,
         {
           style: {
@@ -40124,8 +40205,8 @@ var AppearanceMenu = () => {
           onMouseLeave: () => setHoveredItem(null),
           onTouchStart: () => setHoveredItem("appearance"),
           children: [
-            /* @__PURE__ */ jsx33("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
+            /* @__PURE__ */ jsx34(
               "div",
               {
                 style: {
@@ -40134,20 +40215,20 @@ var AppearanceMenu = () => {
                   alignItems: "flex-end",
                   marginBottom: "-5px"
                 },
-                children: /* @__PURE__ */ jsx33(ChevronRightIcon, { isOpen: appearanceSubOpen })
+                children: /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: appearanceSubOpen })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsx33(Portal22, { children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsxs8(
         SubContent2,
         {
           style: { ...contentStyles, marginLeft: -2 },
           collisionPadding: 10,
           avoidCollisions: true,
           children: [
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40163,12 +40244,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("boardBody"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40184,12 +40265,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topCopper"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40205,12 +40286,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomCopper"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40226,12 +40307,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("topSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40250,12 +40331,12 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("bottomSilkscreen"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsxs8(
               Item22,
               {
                 style: {
@@ -40271,8 +40352,32 @@ var AppearanceMenu = () => {
                 onMouseLeave: () => setHoveredItem(null),
                 onTouchStart: () => setHoveredItem("smtModels"),
                 children: [
-                  /* @__PURE__ */ jsx33("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
-                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "CAD Models" })
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Surface Mount Components" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs8(
+              Item22,
+              {
+                style: {
+                  ...itemStyles,
+                  backgroundColor: hoveredItem === "throughHoleModels" ? "#404040" : "transparent"
+                },
+                onSelect: (e) => e.preventDefault(),
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  setLayerVisibility(
+                    "throughHoleModels",
+                    !visibility.throughHoleModels
+                  );
+                },
+                onMouseEnter: () => setHoveredItem("throughHoleModels"),
+                onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("throughHoleModels"),
+                children: [
+                  /* @__PURE__ */ jsx34("span", { style: iconContainerStyles, children: visibility.throughHoleModels && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
+                  /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
                 ]
               }
             )
@@ -40284,7 +40389,7 @@ var AppearanceMenu = () => {
 };
 
 // src/components/ContextMenu.tsx
-import { jsx as jsx34, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
 var cameraOptions = [
   "Custom",
   "Top Center Angled",
@@ -40368,7 +40473,7 @@ var ContextMenu = ({
   const { cameraType, setCameraType } = useCameraController();
   const [cameraSubOpen, setCameraSubOpen] = useState34(false);
   const [hoveredItem, setHoveredItem] = useState34(null);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       ref: menuRef,
@@ -40379,9 +40484,9 @@ var ContextMenu = ({
         width: 0,
         height: 0
       },
-      children: /* @__PURE__ */ jsxs8(Root22, { open: true, modal: false, children: [
-        /* @__PURE__ */ jsx34(Trigger, { asChild: true, children: /* @__PURE__ */ jsx34("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
-        /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs9(Root22, { open: true, modal: false, children: [
+        /* @__PURE__ */ jsx35(Trigger, { asChild: true, children: /* @__PURE__ */ jsx35("div", { style: { position: "absolute", width: 1, height: 1 } }) }),
+        /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsxs9(
           Content22,
           {
             style: contentStyles2,
@@ -40390,8 +40495,8 @@ var ContextMenu = ({
             sideOffset: 0,
             align: "start",
             children: [
-              /* @__PURE__ */ jsxs8(Sub2, { onOpenChange: setCameraSubOpen, children: [
-                /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(Sub2, { onOpenChange: setCameraSubOpen, children: [
+                /* @__PURE__ */ jsxs9(
                   SubTrigger2,
                   {
                     style: {
@@ -40403,14 +40508,14 @@ var ContextMenu = ({
                     onMouseLeave: () => setHoveredItem(null),
                     onTouchStart: () => setHoveredItem("camera"),
                     children: [
-                      /* @__PURE__ */ jsx34(
+                      /* @__PURE__ */ jsx35(
                         "span",
                         {
                           style: { flex: 1, display: "flex", alignItems: "center" },
                           children: "Camera Position"
                         }
                       ),
-                      /* @__PURE__ */ jsxs8(
+                      /* @__PURE__ */ jsxs9(
                         "div",
                         {
                           style: {
@@ -40420,21 +40525,21 @@ var ContextMenu = ({
                             marginLeft: "auto"
                           },
                           children: [
-                            /* @__PURE__ */ jsx34("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
-                            /* @__PURE__ */ jsx34(ChevronRightIcon, { isOpen: cameraSubOpen })
+                            /* @__PURE__ */ jsx35("span", { style: { opacity: 0.55, fontSize: 13 }, children: cameraPreset }),
+                            /* @__PURE__ */ jsx35(ChevronRightIcon, { isOpen: cameraSubOpen })
                           ]
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx34(Portal22, { children: /* @__PURE__ */ jsx34(
+                /* @__PURE__ */ jsx35(Portal22, { children: /* @__PURE__ */ jsx35(
                   SubContent2,
                   {
                     style: { ...contentStyles2, marginLeft: -2 },
                     collisionPadding: 10,
                     avoidCollisions: true,
-                    children: cameraOptions.map((option) => /* @__PURE__ */ jsxs8(
+                    children: cameraOptions.map((option) => /* @__PURE__ */ jsxs9(
                       Item22,
                       {
                         style: {
@@ -40450,8 +40555,8 @@ var ContextMenu = ({
                         onMouseLeave: () => setHoveredItem(null),
                         onTouchStart: () => setHoveredItem(option),
                         children: [
-                          /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx34(DotIcon, {}) }),
-                          /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: option })
+                          /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx35(DotIcon, {}) }),
+                          /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: option })
                         ]
                       },
                       option
@@ -40459,7 +40564,7 @@ var ContextMenu = ({
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 Item22,
                 {
                   style: {
@@ -40476,12 +40581,12 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("autorotate"),
                   children: [
-                    /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 Item22,
                 {
                   style: {
@@ -40500,14 +40605,14 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("cameratype"),
                   children: [
-                    /* @__PURE__ */ jsx34("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx34(CheckIcon, {}) }),
-                    /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
+                    /* @__PURE__ */ jsx35("span", { style: iconContainerStyles2, children: cameraType === "orthographic" && /* @__PURE__ */ jsx35(CheckIcon, {}) }),
+                    /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Orthographic Camera" })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx34(AppearanceMenu, {}),
-              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx35(AppearanceMenu, {}),
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx35(
                 Item22,
                 {
                   style: {
@@ -40519,11 +40624,11 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("download"),
-                  children: /* @__PURE__ */ jsx34("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
+                  children: /* @__PURE__ */ jsx35("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
                 }
               ),
-              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs9(
                 Item22,
                 {
                   style: {
@@ -40540,12 +40645,12 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("engine"),
                   children: [
-                    /* @__PURE__ */ jsxs8("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsxs9("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: [
                       "Switch to ",
                       engine === "jscad" ? "Manifold" : "JSCAD",
                       " Engine"
                     ] }),
-                    /* @__PURE__ */ jsx34(
+                    /* @__PURE__ */ jsx35(
                       "div",
                       {
                         style: {
@@ -40559,8 +40664,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsxs9(
                 Item22,
                 {
                   style: {
@@ -40573,8 +40678,8 @@ var ContextMenu = ({
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("shortcuts"),
                   children: [
-                    /* @__PURE__ */ jsx34("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
-                    /* @__PURE__ */ jsx34(
+                    /* @__PURE__ */ jsx35("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Keyboard Shortcuts" }),
+                    /* @__PURE__ */ jsx35(
                       "div",
                       {
                         style: {
@@ -40588,8 +40693,8 @@ var ContextMenu = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx34(Separator2, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsx35(Separator2, { style: separatorStyles2 }),
+              /* @__PURE__ */ jsx35(
                 "div",
                 {
                   style: {
@@ -40600,7 +40705,7 @@ var ContextMenu = ({
                     paddingTop: 4,
                     paddingBottom: 4
                   },
-                  children: /* @__PURE__ */ jsxs8(
+                  children: /* @__PURE__ */ jsxs9(
                     "span",
                     {
                       style: {
@@ -40628,7 +40733,7 @@ var ContextMenu = ({
 
 // src/components/KeyboardShortcutsDialog.tsx
 import { useEffect as useEffect41, useMemo as useMemo27, useRef as useRef25, useState as useState35 } from "react";
-import { jsx as jsx35, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
 var KeyboardShortcutsDialog = ({
   open,
   onClose
@@ -40667,7 +40772,7 @@ var KeyboardShortcutsDialog = ({
   if (!open) {
     return null;
   }
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       role: "dialog",
@@ -40682,7 +40787,7 @@ var KeyboardShortcutsDialog = ({
         zIndex: 9999
       },
       onClick: onClose,
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         "div",
         {
           style: {
@@ -40698,7 +40803,7 @@ var KeyboardShortcutsDialog = ({
           },
           onClick: (event) => event.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsxs10(
               "header",
               {
                 style: {
@@ -40706,8 +40811,8 @@ var KeyboardShortcutsDialog = ({
                   borderBottom: "1px solid rgba(255, 255, 255, 0.08)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs9("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
-                    /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ jsx36(
                       "h2",
                       {
                         style: {
@@ -40719,7 +40824,7 @@ var KeyboardShortcutsDialog = ({
                         children: "Keyboard Shortcuts"
                       }
                     ),
-                    /* @__PURE__ */ jsx35(
+                    /* @__PURE__ */ jsx36(
                       "button",
                       {
                         type: "button",
@@ -40735,7 +40840,7 @@ var KeyboardShortcutsDialog = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsx36(
                     "input",
                     {
                       ref: inputRef,
@@ -40758,7 +40863,7 @@ var KeyboardShortcutsDialog = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx35("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs9(
+            /* @__PURE__ */ jsx36("div", { style: { overflowY: "auto" }, children: /* @__PURE__ */ jsxs10(
               "table",
               {
                 style: {
@@ -40767,23 +40872,23 @@ var KeyboardShortcutsDialog = ({
                   fontSize: "0.95rem"
                 },
                 children: [
-                  /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs9("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
-                    /* @__PURE__ */ jsx35("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
-                    /* @__PURE__ */ jsx35("th", { style: { padding: "12px 24px" }, children: "Description" })
+                  /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsxs10("tr", { style: { textAlign: "left", color: "#a1a1b5" }, children: [
+                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px", width: "25%" }, children: "Key" }),
+                    /* @__PURE__ */ jsx36("th", { style: { padding: "12px 24px" }, children: "Description" })
                   ] }) }),
-                  /* @__PURE__ */ jsx35("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35(
+                  /* @__PURE__ */ jsx36("tbody", { children: filteredHotkeys.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
                     "td",
                     {
                       colSpan: 2,
                       style: { padding: "24px", textAlign: "center" },
                       children: "No shortcuts found"
                     }
-                  ) }) : filteredHotkeys.map((hotkey) => /* @__PURE__ */ jsxs9(
+                  ) }) : filteredHotkeys.map((hotkey) => /* @__PURE__ */ jsxs10(
                     "tr",
                     {
                       style: { borderTop: "1px solid rgba(255, 255, 255, 0.05)" },
                       children: [
-                        /* @__PURE__ */ jsx35("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx35(
+                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: /* @__PURE__ */ jsx36(
                           "span",
                           {
                             style: {
@@ -40801,7 +40906,7 @@ var KeyboardShortcutsDialog = ({
                             children: hotkey.shortcut
                           }
                         ) }),
-                        /* @__PURE__ */ jsx35("td", { style: { padding: "12px 24px" }, children: hotkey.description })
+                        /* @__PURE__ */ jsx36("td", { style: { padding: "12px 24px" }, children: hotkey.description })
                       ]
                     },
                     hotkey.id
@@ -40817,7 +40922,7 @@ var KeyboardShortcutsDialog = ({
 };
 
 // src/CadViewer.tsx
-import { jsx as jsx36, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
 var CadViewerInner = (props) => {
   const [engine, setEngine] = useState36("manifold");
   const containerRef = useRef26(null);
@@ -40833,6 +40938,7 @@ var CadViewerInner = (props) => {
   const [cameraPreset, setCameraPreset] = useState36("Custom");
   const { cameraType, setCameraType } = useCameraController();
   const { visibility, setLayerVisibility } = useLayerVisibility();
+  const { showToast } = useToast();
   const cameraControllerRef = useRef26(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
@@ -40895,6 +41001,41 @@ var CadViewerInner = (props) => {
       description: "Open keyboard shortcuts"
     }
   );
+  useRegisteredHotkey(
+    "toggle_smt_models",
+    () => {
+      const newVisibility = !visibility.smtModels;
+      setLayerVisibility("smtModels", newVisibility);
+      showToast(
+        newVisibility ? "SMT components visible" : "SMT components hidden",
+        1500
+      );
+    },
+    {
+      shortcut: "shift+s",
+      description: "Toggle surface mount components"
+    }
+  );
+  useRegisteredHotkey(
+    "toggle_through_hole_models",
+    () => {
+      const newVisibility = !visibility.throughHoleModels;
+      setLayerVisibility("throughHoleModels", newVisibility);
+      showToast(
+        newVisibility ? "Through-hole components visible" : "Through-hole components hidden",
+        1500
+      );
+    },
+    {
+      shortcut: "shift+t",
+      description: "Toggle through-hole components"
+    }
+  );
+  useEffect42(() => {
+    if (containerRef.current) {
+      registerHotkeyViewer(containerRef.current);
+    }
+  }, []);
   useEffect42(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
@@ -40923,7 +41064,7 @@ var CadViewerInner = (props) => {
     window.localStorage.setItem("cadViewerCameraType", cameraType);
   }, [cameraType]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -40939,7 +41080,7 @@ var CadViewerInner = (props) => {
       },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx36(
+        engine === "jscad" ? /* @__PURE__ */ jsx37(
           CadViewerJscad,
           {
             ...props,
@@ -40948,7 +41089,7 @@ var CadViewerInner = (props) => {
             onUserInteraction: handleUserInteraction,
             onCameraControllerReady: handleCameraControllerReady
           }
-        ) : /* @__PURE__ */ jsx36(
+        ) : /* @__PURE__ */ jsx37(
           CadViewerManifold_default,
           {
             ...props,
@@ -40958,7 +41099,7 @@ var CadViewerInner = (props) => {
             onCameraControllerReady: handleCameraControllerReady
           }
         ),
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             style: {
@@ -40975,11 +41116,11 @@ var CadViewerInner = (props) => {
             },
             children: [
               "Engine: ",
-              /* @__PURE__ */ jsx36("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
+              /* @__PURE__ */ jsx37("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
             ]
           }
         ),
-        menuVisible && /* @__PURE__ */ jsx36(
+        menuVisible && /* @__PURE__ */ jsx37(
           ContextMenu,
           {
             menuRef,
@@ -41006,7 +41147,7 @@ var CadViewerInner = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           KeyboardShortcutsDialog,
           {
             open: isKeyboardShortcutsDialogOpen,
@@ -41024,12 +41165,12 @@ var CadViewer = (props) => {
     () => [5, -5, 5],
     []
   );
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     CameraControllerProvider,
     {
       defaultTarget,
       initialCameraPosition,
-      children: /* @__PURE__ */ jsx36(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx36(CadViewerInner, { ...props }) })
+      children: /* @__PURE__ */ jsx37(LayerVisibilityProvider, { children: /* @__PURE__ */ jsx37(ToastProvider, { children: /* @__PURE__ */ jsx37(CadViewerInner, { ...props }) }) })
     }
   );
 };