@tscircuit/3d-viewer 0.0.274 → 0.0.276

package/dist/index.js

@@ -13980,7 +13980,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState10, useRef as useRef8, useEffect as useEffect8 } from "react";
+import { useState as useState11, useRef as useRef8, useEffect as useEffect8 } from "react";
 
 // src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/soup-util";
@@ -17282,7 +17282,7 @@ import {
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.273",
+  version: "0.0.275",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -17314,7 +17314,7 @@ var package_default = {
     "@react-three/drei": "^9.121.4",
     "@react-three/fiber": "^8.17.14",
     "@tscircuit/core": "^0.0.454",
-    "@tscircuit/props": "^0.0.231",
+    "@tscircuit/props": "^0.0.233",
     "@tscircuit/soup-util": "^0.0.41",
     "jscad-electronics": "^0.0.29",
     "jscad-fiber": "^0.0.79",
@@ -18820,12 +18820,28 @@ var useBoardGeomBuilder = (circuitJson) => {
 };
 
 // src/three-components/Error3d.tsx
-import { Text as Text2 } from "@react-three/drei";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Html as Html2, Text as Text2 } from "@react-three/drei";
+import { useState as useState6, useCallback as useCallback3 } from "react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var Error3d = ({
   error,
   cad_component
 }) => {
+  const [isHovered, setIsHovered] = useState6(false);
+  const [hoverPosition, setHoverPosition] = useState6(null);
+  const handleHover = useCallback3((e) => {
+    if (e?.mousePosition) {
+      setIsHovered(true);
+      setHoverPosition(e.mousePosition);
+    } else {
+      setIsHovered(false);
+      setHoverPosition(null);
+    }
+  }, []);
+  const handleUnhover = useCallback3(() => {
+    setIsHovered(false);
+    setHoverPosition(null);
+  }, []);
   let position = [0, 0, 0];
   if (cad_component?.position) {
     position = [
@@ -18835,52 +18851,83 @@ var Error3d = ({
     ];
     position = position.map((p) => Number.isNaN(p) ? 0 : p);
   }
-  return /* @__PURE__ */ jsxs5(
-    "group",
-    {
-      position,
-      children: [
-        /* @__PURE__ */ jsxs5(
-          "mesh",
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx8(
+      ContainerWithTooltip_default,
+      {
+        isHovered,
+        onHover: handleHover,
+        onUnhover: handleUnhover,
+        position,
+        children: /* @__PURE__ */ jsxs5(
+          "group",
           {
-            renderOrder: -99999,
-            rotation: [Math.PI / 4, Math.PI / 4, 0],
-            ref: (mesh) => {
-              if (mesh) {
-                mesh.renderOrder = 999999;
-              }
-            },
+            position,
             children: [
-              /* @__PURE__ */ jsx8("boxGeometry", { args: [0.5, 0.5, 0.5] }),
-              /* @__PURE__ */ jsx8(
-                "meshStandardMaterial",
+              /* @__PURE__ */ jsxs5(
+                "mesh",
+                {
+                  renderOrder: -99999,
+                  rotation: [Math.PI / 4, Math.PI / 4, 0],
+                  ref: (mesh) => {
+                    if (mesh) {
+                      mesh.renderOrder = 999999;
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8("boxGeometry", { args: [0.5, 0.5, 0.5] }),
+                    /* @__PURE__ */ jsx8(
+                      "meshStandardMaterial",
+                      {
+                        depthTest: false,
+                        transparent: true,
+                        color: "red",
+                        opacity: 0.5
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs5(
+                Text2,
                 {
-                  depthTest: false,
-                  transparent: true,
+                  scale: [0.1, 0.1, 0.1],
                   color: "red",
-                  opacity: 0.5
+                  anchorX: "center",
+                  anchorY: "middle",
+                  depthOffset: -99999,
+                  children: [
+                    error.toString().slice(0, 50),
+                    "..."
+                  ]
                 }
               )
             ]
           }
-        ),
-        /* @__PURE__ */ jsxs5(
-          Text2,
-          {
-            scale: [0.1, 0.1, 0.1],
-            color: "red",
-            anchorX: "center",
-            anchorY: "middle",
-            depthOffset: -99999,
-            children: [
-              error.toString().slice(0, 50),
-              "..."
-            ]
-          }
         )
-      ]
-    }
-  );
+      }
+    ),
+    isHovered && hoverPosition ? /* @__PURE__ */ jsx8(
+      Html2,
+      {
+        position: hoverPosition,
+        style: {
+          fontFamily: "sans-serif",
+          transform: "translate3d(50%, 50%, 0)",
+          backgroundColor: "white",
+          padding: "6px",
+          borderRadius: "4px",
+          color: "red",
+          pointerEvents: "none",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          MozUserSelect: "none",
+          msUserSelect: "none"
+        },
+        children: error.toString()
+      }
+    ) : null
+  ] });
 };
 
 // src/three-components/STLModel.tsx
@@ -19011,10 +19058,10 @@ var CadViewerJscad = forwardRef2(
 // src/CadViewerManifold.tsx
 import { su as su13 } from "@tscircuit/soup-util";
 import ManifoldModule from "manifold-3d";
-import { useEffect as useEffect6, useMemo as useMemo8, useState as useState8 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo8, useState as useState9 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
-import { useState as useState7, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef6 } from "react";
+import { useState as useState8, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef6 } from "react";
 import { su as su12 } from "@tscircuit/soup-util";
 import * as THREE10 from "three";
 
@@ -19675,11 +19722,11 @@ function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThick
 
 // src/hooks/useManifoldBoardBuilder.ts
 var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
-  const [geoms, setGeoms] = useState7(null);
-  const [textures, setTextures] = useState7(null);
-  const [pcbThickness, setPcbThickness] = useState7(null);
-  const [error, setError] = useState7(null);
-  const [isLoading, setIsLoading] = useState7(true);
+  const [geoms, setGeoms] = useState8(null);
+  const [textures, setTextures] = useState8(null);
+  const [pcbThickness, setPcbThickness] = useState8(null);
+  const [error, setError] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(true);
   const manifoldInstancesForCleanup = useRef6([]);
   const boardData = useMemo7(() => {
     if (!circuitJson) return null;
@@ -19946,8 +19993,8 @@ var CadViewerManifold = ({
   autoRotateDisabled,
   clickToInteractEnabled
 }) => {
-  const [manifoldJSModule, setManifoldJSModule] = useState8(null);
-  const [manifoldLoadingError, setManifoldLoadingError] = useState8(null);
+  const [manifoldJSModule, setManifoldJSModule] = useState9(null);
+  const [manifoldLoadingError, setManifoldLoadingError] = useState9(null);
   useEffect6(() => {
     const manifoldConfig = {
       locateFile: (path, scriptDirectory) => path === "manifold.wasm" ? "/manifold.wasm" : scriptDirectory + path
@@ -20062,16 +20109,16 @@ var CadViewerManifold = ({
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/hooks/useContextMenu.ts
-import { useState as useState9, useCallback as useCallback4, useRef as useRef7, useEffect as useEffect7 } from "react";
+import { useState as useState10, useCallback as useCallback5, useRef as useRef7, useEffect as useEffect7 } from "react";
 var useContextMenu = ({ containerRef }) => {
-  const [menuVisible, setMenuVisible] = useState9(false);
-  const [menuPos, setMenuPos] = useState9({
+  const [menuVisible, setMenuVisible] = useState10(false);
+  const [menuPos, setMenuPos] = useState10({
     x: 0,
     y: 0
   });
   const menuRef = useRef7(null);
   const interactionOriginPosRef = useRef7(null);
-  const handleContextMenu = useCallback4(
+  const handleContextMenu = useCallback5(
     (e) => {
       e.preventDefault();
       const eventX = typeof e.clientX === "number" ? e.clientX : 0;
@@ -20093,7 +20140,7 @@ var useContextMenu = ({ containerRef }) => {
     },
     [setMenuPos, setMenuVisible]
   );
-  const handleTouchStart = useCallback4((e) => {
+  const handleTouchStart = useCallback5((e) => {
     if (e.touches.length === 1) {
       const touch = e.touches[0];
       if (touch) {
@@ -20105,7 +20152,7 @@ var useContextMenu = ({ containerRef }) => {
       interactionOriginPosRef.current = null;
     }
   }, []);
-  const handleTouchMove = useCallback4((e) => {
+  const handleTouchMove = useCallback5((e) => {
     if (!interactionOriginPosRef.current || e.touches.length !== 1) {
       return;
     }
@@ -20121,14 +20168,14 @@ var useContextMenu = ({ containerRef }) => {
       interactionOriginPosRef.current = null;
     }
   }, []);
-  const handleTouchEnd = useCallback4(() => {
+  const handleTouchEnd = useCallback5(() => {
     setTimeout(() => {
       if (interactionOriginPosRef.current) {
         interactionOriginPosRef.current = null;
       }
     }, 0);
   }, []);
-  const handleClickAway = useCallback4((e) => {
+  const handleClickAway = useCallback5((e) => {
     const target = e.target;
     if (menuRef.current && !menuRef.current.contains(target)) {
       setMenuVisible(false);
@@ -20166,7 +20213,7 @@ var useContextMenu = ({ containerRef }) => {
 // src/CadViewer.tsx
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var CadViewer = (props) => {
-  const [engine, setEngine] = useState10("jscad");
+  const [engine, setEngine] = useState11("jscad");
   const containerRef = useRef8(null);
   const {
     menuVisible,
@@ -20545,7 +20592,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 }
 
 // src/hooks/exporter/gltf.ts
-import { useEffect as useEffect9, useState as useState11, useMemo as useMemo9, useCallback as useCallback6 } from "react";
+import { useEffect as useEffect9, useState as useState12, useMemo as useMemo9, useCallback as useCallback7 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
   const link = useMemo9(() => document.createElement("a"), []);
@@ -20566,16 +20613,16 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback6((obj3D) => {
+  const ref = useCallback7((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
-  const [url, setUrl] = useState11();
-  const [error, setError] = useState11();
-  const ref = useCallback6(
+  const [url, setUrl] = useState12();
+  const [error, setError] = useState12();
+  const ref = useCallback7(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.274",
+  "version": "0.0.276",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -32,7 +32,7 @@
     "@react-three/drei": "^9.121.4",
     "@react-three/fiber": "^8.17.14",
     "@tscircuit/core": "^0.0.454",
-    "@tscircuit/props": "^0.0.231",
+    "@tscircuit/props": "^0.0.233",
     "@tscircuit/soup-util": "^0.0.41",
     "jscad-electronics": "^0.0.29",
     "jscad-fiber": "^0.0.79",