@liveroom-tech/react-immersive 1.1.7 → 1.2.0

package/dist/index.mjs

@@ -4,7 +4,7 @@
 import {
   useRef as useRef11,
   useState as useState10,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useCallback as useCallback4,
   useMemo as useMemo13,
   Suspense as Suspense2
@@ -1536,6 +1536,7 @@ function Viewer({
       dpr: [1, effectiveMaxDpr],
       shadows: effectiveShadows ? "soft" : false,
       resize: { debounce: 0, scroll: false },
+      raycaster: { firstHitOnly: true },
       style: backgroundStyle,
       camera: camera ?? {
         fov: 50
@@ -1583,7 +1584,7 @@ function Controls({ controlsRef, onCameraChange }) {
 }
 
 // src/components/Lights.tsx
-import { useRef as useRef4, useMemo as useMemo5 } from "react";
+import { useRef as useRef4, useMemo as useMemo5, useEffect as useEffect6 } from "react";
 import { useFrame as useFrame3, useThree as useThree5 } from "@react-three/fiber";
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function rotatePositionY(pos, deg) {
@@ -1593,6 +1594,24 @@ function rotatePositionY(pos, deg) {
   const s = Math.sin(rad);
   return [pos[0] * c + pos[2] * s, pos[1], -pos[0] * s + pos[2] * c];
 }
+function fitShadowCamera(bounds, position) {
+  const [cx, cy, cz] = bounds.center;
+  const radius = bounds.radius;
+  const length = Math.hypot(position[0], position[1], position[2]);
+  const dir = length > 1e-6 ? [position[0] / length, position[1] / length, position[2] / length] : [0, 1, 0];
+  const distance = radius * 2;
+  return {
+    position: [
+      cx + dir[0] * distance,
+      cy + dir[1] * distance,
+      cz + dir[2] * distance
+    ],
+    target: bounds.center,
+    extent: radius,
+    near: Math.max(radius / 100, 1e-3),
+    far: distance + radius * 2
+  };
+}
 var DEFAULT_LIGHTING = {
   ambient: { intensity: 0.25, color: "#ffffff" },
   lights: [
@@ -1642,7 +1661,8 @@ function LightInstance({
   light,
   shadows,
   shadowsEnabled,
-  environmentRotation
+  environmentRotation,
+  modelBounds
 }) {
   const dirRef = useRef4(null);
   const pointRef = useRef4(null);
@@ -1658,8 +1678,19 @@ function LightInstance({
     if (pointRef.current) pointRef.current.position.copy(camera.position);
     if (spotRef.current) spotRef.current.position.copy(camera.position);
   });
-  if (!light.visible || light.type === "none") return null;
   const castShadow = shadowsEnabled && shadows.enabled && light.castShadow;
+  const fit = useMemo5(
+    () => light.type === "directional" && castShadow && modelBounds && !light.attachedToCamera ? fitShadowCamera(modelBounds, position) : null,
+    [light.type, light.attachedToCamera, castShadow, modelBounds, position]
+  );
+  useEffect6(() => {
+    const dirLight = dirRef.current;
+    if (!dirLight) return;
+    const [tx, ty, tz] = fit?.target ?? [0, 0, 0];
+    dirLight.target.position.set(tx, ty, tz);
+    dirLight.target.updateMatrixWorld();
+  }, [fit]);
+  if (!light.visible || light.type === "none") return null;
   if (light.type === "directional") {
     return /* @__PURE__ */ jsx7(
       "directionalLight",
@@ -1667,19 +1698,19 @@ function LightInstance({
         ref: dirRef,
         color: light.color,
         intensity: light.intensity,
-        position,
+        position: fit?.position ?? position,
         castShadow,
         "shadow-mapSize-width": shadows.mapSize,
         "shadow-mapSize-height": shadows.mapSize,
         "shadow-bias": light.shadowBias,
         "shadow-normalBias": shadows.normalBias,
         "shadow-radius": shadows.radius,
-        "shadow-camera-near": 0.5,
-        "shadow-camera-far": 40,
-        "shadow-camera-left": -8,
-        "shadow-camera-right": 8,
-        "shadow-camera-top": 8,
-        "shadow-camera-bottom": -8
+        "shadow-camera-near": fit?.near ?? 0.5,
+        "shadow-camera-far": fit?.far ?? 40,
+        "shadow-camera-left": -(fit?.extent ?? 8),
+        "shadow-camera-right": fit?.extent ?? 8,
+        "shadow-camera-top": fit?.extent ?? 8,
+        "shadow-camera-bottom": -(fit?.extent ?? 8)
       }
     );
   }
@@ -1715,7 +1746,8 @@ function Lights({
   shadowConfig,
   shadowsEnabled = true,
   environmentRotation = 0,
-  environmentConfig
+  environmentConfig,
+  modelBounds
 }) {
   const lighting = lightingConfig ?? DEFAULT_LIGHTING;
   const shadows = shadowConfig ?? DEFAULT_SHADOWS;
@@ -1735,35 +1767,36 @@ function Lights({
         light,
         shadows,
         shadowsEnabled,
-        environmentRotation
+        environmentRotation,
+        modelBounds
       },
       light.id
     )),
     sl?.enabled && /* @__PURE__ */ jsx7(
-      "directionalLight",
+      LightInstance,
       {
-        color: "#ffffff",
-        intensity: sl.intensity,
-        position: envShadowPosition,
-        castShadow: shadowsEnabled && shadows.enabled,
-        "shadow-mapSize-width": shadows.mapSize,
-        "shadow-mapSize-height": shadows.mapSize,
-        "shadow-bias": sl.bias,
-        "shadow-normalBias": shadows.normalBias,
-        "shadow-radius": shadows.radius,
-        "shadow-camera-near": 0.5,
-        "shadow-camera-far": 40,
-        "shadow-camera-left": -8,
-        "shadow-camera-right": 8,
-        "shadow-camera-top": 8,
-        "shadow-camera-bottom": -8
+        light: {
+          id: "light-env-shadow",
+          type: "directional",
+          color: "#ffffff",
+          intensity: sl.intensity,
+          position: envShadowPosition,
+          attachedToCamera: false,
+          castShadow: true,
+          shadowBias: sl.bias,
+          visible: true
+        },
+        shadows,
+        shadowsEnabled,
+        environmentRotation: 0,
+        modelBounds
       }
     )
   ] });
 }
 
 // src/components/Model.tsx
-import { useState as useState3, useEffect as useEffect6, useRef as useRef5, useMemo as useMemo7 } from "react";
+import { useState as useState3, useEffect as useEffect7, useRef as useRef5, useMemo as useMemo7 } from "react";
 import { useFrame as useFrame4, useThree as useThree7 } from "@react-three/fiber";
 
 // src/utils/gltfLoader.ts
@@ -2479,6 +2512,72 @@ function refreshSkinnedBounds(root) {
   });
 }
 
+// src/utils/bvh.ts
+import { Mesh as Mesh4 } from "three";
+import {
+  acceleratedRaycast,
+  computeBoundsTree,
+  disposeBoundsTree
+} from "three-mesh-bvh";
+var raycastPatched = false;
+function enableAcceleratedRaycast() {
+  if (raycastPatched) return;
+  Mesh4.prototype.raycast = acceleratedRaycast;
+  raycastPatched = true;
+}
+function collectGeometries(root) {
+  const seen = /* @__PURE__ */ new Set();
+  root.traverse((node) => {
+    const geometry = node.geometry;
+    if (!geometry || !geometry.attributes?.position) return;
+    if (geometry.boundsTree) return;
+    seen.add(geometry);
+  });
+  return [...seen];
+}
+async function buildSceneBVH(root, signal) {
+  const geometries = collectGeometries(root);
+  if (geometries.length === 0) return;
+  enableAcceleratedRaycast();
+  let worker = null;
+  if (typeof window !== "undefined" && typeof Worker !== "undefined") {
+    try {
+      const mod = await import("three-mesh-bvh/src/workers/ParallelMeshBVHWorker.js");
+      worker = new mod.ParallelMeshBVHWorker();
+    } catch {
+      worker = null;
+    }
+  }
+  try {
+    for (const geometry of geometries) {
+      if (signal?.aborted) return;
+      let tree;
+      if (worker) {
+        try {
+          tree = await worker.generate(geometry);
+        } catch {
+        }
+      }
+      if (tree === void 0) {
+        tree = computeBoundsTree.call(geometry);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+      if (signal?.aborted) return;
+      geometry.boundsTree = tree;
+    }
+  } finally {
+    worker?.dispose?.();
+  }
+}
+function disposeSceneBVH(root) {
+  root.traverse((node) => {
+    const geometry = node.geometry;
+    if (!geometry?.boundsTree) return;
+    disposeBoundsTree.call(geometry);
+    geometry.boundsTree = void 0;
+  });
+}
+
 // src/components/Model.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 function firstMaterial(node) {
@@ -2511,14 +2610,14 @@ function Model({
   const invalidate = useThree7((state) => state.invalidate);
   const [hoveredItem, setHoveredItem] = useState3(null);
   const groupRef = useRef5(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!highlightOnHover) {
       setHoveredItem(null);
       onItemHover?.(null);
       document.body.style.cursor = "default";
     }
   }, [highlightOnHover, onItemHover]);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       document.body.style.cursor = "default";
     };
@@ -2554,7 +2653,7 @@ function Model({
     }
     return shell;
   }, [nodeMap]);
-  useEffect6(() => {
+  useEffect7(() => {
     scene.traverse((node) => {
       if (!isMeshNode(node)) return;
       const mesh = node;
@@ -2562,9 +2661,17 @@ function Model({
       mesh.receiveShadow = true;
     });
   }, [scene, shellNodeNames]);
-  useEffect6(() => {
+  useEffect7(() => {
     refreshSkinnedBounds(scene);
   }, [scene]);
+  useEffect7(() => {
+    const controller = new AbortController();
+    void buildSceneBVH(scene, controller.signal);
+    return () => {
+      controller.abort();
+      disposeSceneBVH(scene);
+    };
+  }, [scene]);
   const bindingKeyByNodeName = useMemo7(() => {
     const map = {};
     for (const [nodeName, binding] of Object.entries(objectBindings)) {
@@ -2593,10 +2700,10 @@ function Model({
     }
     return map;
   }, [nodeMap, nodeBindingSignature]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (materialRefsOut) materialRefsOut.current = perNodeMaterials;
   }, [perNodeMaterials, materialRefsOut]);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       for (const material of Object.values(perNodeMaterials)) {
         material.dispose();
@@ -2647,7 +2754,7 @@ function Model({
     }
     return map;
   }, [perNodeMaterials, shadingMode, rendererMode]);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       for (const material of Object.values(perNodeBasicMaterials))
         material.dispose();
@@ -2663,10 +2770,10 @@ function Model({
     if (rendererMode === "matcap") return perNodeMatcapMaterials[nodeName];
     return perNodeMaterials[nodeName];
   };
-  useEffect6(() => {
+  useEffect7(() => {
     onModelLoaded?.(scene);
   }, [scene, onModelLoaded]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!nodeRefsOut) return;
     for (const [nodeName, binding] of Object.entries(objectBindings)) {
       const glbNodeName = binding.modelObjectId ?? nodeName;
@@ -2675,7 +2782,7 @@ function Model({
     }
   }, [nodeMap, objectBindings, nodeRefsOut]);
   const appliedTextureUrls = useRef5({});
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       for (const nodeTextures of Object.values(appliedTextureUrls.current)) {
         for (const [key, appliedUrl] of Object.entries(nodeTextures)) {
@@ -2690,7 +2797,7 @@ function Model({
       appliedTextureUrls.current = {};
     };
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     const seenNodeNames = /* @__PURE__ */ new Set();
     for (const [nodeName, binding] of Object.entries(objectBindings)) {
       seenNodeNames.add(nodeName);
@@ -2797,7 +2904,7 @@ function Model({
     rendererMode,
     invalidate
   ]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!wireframeEnabled) return;
     const added = [];
     for (const [nodeName, binding] of Object.entries(objectBindings)) {
@@ -2931,7 +3038,7 @@ function Model({
     emitPlaybackState();
     invalidate();
   };
-  useEffect6(() => {
+  useEffect7(() => {
     const mixer = new AnimationMixer(scene);
     mixerRef.current = mixer;
     const actions = {};
@@ -2986,7 +3093,7 @@ function Model({
       emitPlaybackState();
     };
   }, [scene, resolvedAnimationClips]);
-  useEffect6(() => {
+  useEffect7(() => {
     const currentClip = activeClipNameRef.current;
     const activeAction = activeActionRef.current;
     if (!currentClip || !activeAction) return;
@@ -3045,7 +3152,7 @@ function Model({
   const explodeStrengthRef = useRef5(0);
   const currentExplodeRef = useRef5(0);
   const explodeTmp = useMemo7(() => new Vector32(), []);
-  useEffect6(() => {
+  useEffect7(() => {
     for (const part of explodePartsRef.current) {
       part.node.position.copy(part.restLocalPos);
     }
@@ -3094,7 +3201,7 @@ function Model({
     explodePartsRef.current = parts;
     invalidate();
   }, [scene, nodeMap, nodeBindingSignature, invalidate]);
-  useEffect6(() => {
+  useEffect7(() => {
     invalidate();
   }, [explodeFactor, invalidate]);
   useFrame4((_, delta) => {
@@ -3172,7 +3279,7 @@ import {
   useMemo as useMemo8,
   useRef as useRef6,
   useState as useState4,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useCallback
 } from "react";
 import { Html } from "@react-three/drei";
@@ -3202,7 +3309,7 @@ function useCameraBiasedAnchor(annotation, worldPositionsRef) {
   const worldPosition = useMemo8(() => new Vector33(), []);
   const biasedWorldPosition = useMemo8(() => new Vector33(), []);
   const toCamera = useMemo8(() => new Vector33(), []);
-  useEffect7(() => {
+  useEffect8(() => {
     anchorNodeRef.current = null;
   }, [annotation.anchorNodeName]);
   useFrame5(({ camera }) => {
@@ -3248,7 +3355,7 @@ function AnnotationMarker3D({ annotation, occluders, worldPositionsRef, onClick,
   const [zIndex, setZIndex] = useState4(1);
   const clickTimeoutRef = useRef6(null);
   const markerRef = useRef6(null);
-  useEffect7(() => {
+  useEffect8(() => {
     return () => {
       if (clickTimeoutRef.current) {
         clearTimeout(clickTimeoutRef.current);
@@ -3430,13 +3537,13 @@ function AnnotationsLayer({
     };
     invalidateFrameRef.current = window.requestAnimationFrame(step);
   }, [invalidate]);
-  useEffect7(() => {
+  useEffect8(() => {
     requestAnnotationRefresh();
   }, [annotations, requestAnnotationRefresh]);
-  useEffect7(() => {
+  useEffect8(() => {
     requestAnnotationRefresh();
   }, [activeAnnotation, requestAnnotationRefresh]);
-  useEffect7(() => {
+  useEffect8(() => {
     return () => {
       if (invalidateFrameRef.current !== null) {
         window.cancelAnimationFrame(invalidateFrameRef.current);
@@ -3499,7 +3606,7 @@ function AnnotationsLayer({
       onCloseAnnotation?.();
     }
   }, [isLocked, onCloseAnnotation]);
-  useEffect7(() => {
+  useEffect8(() => {
     const canvas = canvasRootRef.current;
     if (canvas) {
       canvas.addEventListener("click", handleCanvasClick);
@@ -3568,7 +3675,7 @@ function AnnotationsLayer({
 }
 
 // src/components/ModelViewer/MeasurementLayer.tsx
-import { useEffect as useEffect8, useMemo as useMemo9 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo9 } from "react";
 import { Html as Html2, Line } from "@react-three/drei";
 import { BoxGeometry, EdgesGeometry, Vector3 as Vector34 } from "three";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -3603,7 +3710,7 @@ function DimensionsBox({ box, unit }) {
     );
     return geometry;
   }, [box.size]);
-  useEffect8(() => {
+  useEffect9(() => {
     return () => {
       edges.dispose();
     };
@@ -3659,7 +3766,7 @@ function MeasurementLayer({
 import {
   forwardRef as forwardRef2,
   useCallback as useCallback2,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo10,
   useRef as useRef7
@@ -3767,7 +3874,7 @@ var XRModelPresenter = forwardRef2(
       }),
       [cancelPlacementMode, finishPlacementMode, placeCurrent, startPlacementMode]
     );
-    useEffect9(() => {
+    useEffect10(() => {
       if (!inSession) {
         placedPosition.current.set(0, 0, -FORWARD_DISTANCE);
         userScale.current = 1;
@@ -3815,7 +3922,7 @@ var XRModelPresenter = forwardRef2(
       },
       [isAR, placeCurrent]
     );
-    useEffect9(() => {
+    useEffect10(() => {
       if (!isAR) return;
       const onTouchStart = (event) => {
         if (event.touches.length !== 2) return;
@@ -3900,7 +4007,7 @@ var XRModelPresenter = forwardRef2(
 var XRModelPresenter_default = XRModelPresenter;
 
 // src/components/ModelViewer/CinematicCamera.tsx
-import { useEffect as useEffect10, useMemo as useMemo11, useRef as useRef8 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo11, useRef as useRef8 } from "react";
 import { useFrame as useFrame7, useThree as useThree9 } from "@react-three/fiber";
 import {
   Box3 as Box32,
@@ -3951,7 +4058,7 @@ function CinematicCamera({
   const orbitRef = useRef8(null);
   const tmpPos = useMemo11(() => new Vector36(), []);
   const tmpTarget = useMemo11(() => new Vector36(), []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!playing) {
       startedRef.current = false;
       return;
@@ -3976,7 +4083,7 @@ function CinematicCamera({
     startedRef.current = true;
     invalidate();
   }, [playing, hasPath, controlsRef, sceneRef, invalidate]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!playing || !onUserInteract) return;
     const controls = controlsRef.current;
     if (!controls) return;
@@ -4034,7 +4141,7 @@ function CinematicCamera({
 }
 
 // src/hooks/useLicense.ts
-import { useEffect as useEffect11, useState as useState5 } from "react";
+import { useEffect as useEffect12, useState as useState5 } from "react";
 var LOCAL_HOSTNAMES = ["localhost", "127.0.0.1", "0.0.0.0"];
 var isLocalHostname = (hostname) => LOCAL_HOSTNAMES.includes(hostname) || hostname.endsWith(".local") || hostname.endsWith(".localhost");
 var LICENSE_SERVER = "https://react-immersive.liveroom.dev/api/validate-license";
@@ -4209,7 +4316,7 @@ var useLicense = (licenseKey) => {
     // window isn't available during SSR — useEffect below recomputes this on mount
     isLocalDomain: false
   });
-  useEffect11(() => {
+  useEffect12(() => {
     if (!canUseBrowserAPI()) {
       return;
     }
@@ -4260,10 +4367,10 @@ var useLicense = (licenseKey) => {
 };
 
 // src/components/MouseController.tsx
-import { useRef as useRef9, useState as useState6, useCallback as useCallback3, useEffect as useEffect12 } from "react";
+import { useRef as useRef9, useState as useState6, useCallback as useCallback3, useEffect as useEffect13 } from "react";
 
 // src/styles/MouseController.css
-styleInject(".mc__wrapper {\n  position: fixed;\n  bottom: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index: 100;\n}\n.mc__dpad {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  margin-bottom: 20px;\n}\n.mc__middle-row {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n.mc__joystick {\n  width: 60px;\n  height: 60px;\n  flex-shrink: 0;\n  background:\n    radial-gradient(\n      circle at 40% 35%,\n      rgba(255, 255, 255, 0.07),\n      rgba(0, 0, 0, 0.55));\n  border-radius: 50%;\n  border: 1.5px solid rgba(255, 255, 255, 0.15);\n  position: relative;\n  cursor: grab;\n  touch-action: none;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  margin: 4px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.03);\n}\n.mc__joystick:hover {\n  border-color: rgba(255, 255, 255, 0.28);\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(66, 133, 244, 0.08);\n}\n.mc__joystick:active {\n  cursor: grabbing;\n  border-color: rgba(66, 133, 244, 0.6);\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 4px rgba(66, 133, 244, 0.15);\n}\n.mc__knob {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 34px;\n  height: 34px;\n  margin-left: -17px;\n  margin-top: -17px;\n  background:\n    linear-gradient(\n      145deg,\n      #5a9bf5,\n      #1a66d9);\n  border-radius: 50%;\n  cursor: grab;\n  box-shadow: 0 3px 10px rgba(26, 102, 217, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25) inset;\n  transition: transform 0.04s linear, box-shadow 0.1s ease;\n  border: 1.5px solid rgba(255, 255, 255, 0.45);\n}\n.mc__joystick:active .mc__knob {\n  box-shadow: 0 2px 16px rgba(66, 133, 244, 0.7), 0 1px 0 rgba(255, 255, 255, 0.25) inset;\n  animation: pulse 0.6s ease infinite;\n}\n.mc__arrow {\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: none;\n  border-radius: 0;\n  box-shadow: none;\n  outline: none;\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition: transform 0.1s ease, filter 0.15s ease;\n  overflow: visible;\n}\n.mc__arrow svg {\n  display: block !important;\n  pointer-events: none !important;\n  user-select: none !important;\n  -webkit-user-select: none !important;\n  overflow: visible !important;\n}\n.mc__arrow--up {\n  margin-bottom: 2px;\n}\n.mc__arrow--up:hover {\n  transform: scale(1.15) translateY(-2px);\n  filter: drop-shadow(0 4px 12px rgba(66, 133, 244, 0.8));\n}\n.mc__arrow--up:active {\n  transform: scale(0.92) translateY(2px);\n}\n.mc__arrow--down {\n  margin-top: 2px;\n}\n.mc__arrow--down:hover {\n  transform: scale(1.15) translateY(2px);\n  filter: drop-shadow(0 -4px 12px rgba(66, 133, 244, 0.8));\n}\n.mc__arrow--down:active {\n  transform: scale(0.92) translateY(-2px);\n}\n.mc__arrow--left {\n  margin-right: 2px;\n}\n.mc__arrow--left:hover {\n  transform: scale(1.15) translateX(-2px);\n  filter: drop-shadow(4px 0 12px rgba(66, 133, 244, 0.8));\n}\n.mc__arrow--left:active {\n  transform: scale(0.92) translateX(2px);\n}\n.mc__arrow--right {\n  margin-left: 2px;\n}\n.mc__arrow--right:hover {\n  transform: scale(1.15) translateX(2px);\n  filter: drop-shadow(-4px 0 12px rgba(66, 133, 244, 0.8));\n}\n.mc__arrow--right:active {\n  transform: scale(0.92) translateX(-2px);\n}\n@keyframes pulse {\n  0%, 100% {\n    box-shadow: 0 2px 16px rgba(66, 133, 244, 0.6), 0 1px 0 rgba(255, 255, 255, 0.25) inset;\n    opacity: 0.85;\n  }\n  50% {\n    box-shadow: 0 4px 24px rgba(66, 133, 244, 0.95), 0 1px 0 rgba(255, 255, 255, 0.25) inset;\n    opacity: 1;\n  }\n}\n@media (max-width: 768px) {\n  .mc__wrapper {\n    bottom: -5px;\n  }\n  .mc__joystick {\n    width: 68px;\n    height: 68px;\n  }\n  .mc__knob {\n    width: 30px;\n    height: 30px;\n    margin-left: -15px;\n    margin-top: -15px;\n  }\n  .mc__arrow--up:hover {\n    transform: scale(1.1) translateY(-1px);\n  }\n  .mc__arrow--down:hover {\n    transform: scale(1.1) translateY(1px);\n  }\n  .mc__arrow--left:hover {\n    transform: scale(1.1) translateX(-1px);\n  }\n  .mc__arrow--right:hover {\n    transform: scale(1.1) translateX(1px);\n  }\n}\n@media (max-width: 480px) {\n  .mc__joystick {\n    width: 56px;\n    height: 56px;\n  }\n  .mc__knob {\n    width: 26px;\n    height: 26px;\n    margin-left: -13px;\n    margin-top: -13px;\n  }\n  .mc__arrow--up {\n    margin-bottom: 1px;\n  }\n  .mc__arrow--down {\n    margin-top: 1px;\n  }\n  .mc__arrow--left {\n    margin-right: 1px;\n  }\n  .mc__arrow--right {\n    margin-left: 1px;\n  }\n}\n@media (hover: none) {\n  .mc__arrow:hover {\n    transform: none !important;\n    filter: none !important;\n  }\n  .mc__arrow:active {\n    transform: scale(0.92) !important;\n  }\n}\n");
+styleInject(".mc__wrapper {\n  position: absolute;\n  bottom: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index: 100;\n}\n.mc__dpad {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  margin-bottom: 20px;\n}\n.mc__middle-row {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n.mc__joystick {\n  width: 60px;\n  height: 60px;\n  flex-shrink: 0;\n  background:\n    radial-gradient(\n      circle at 40% 35%,\n      rgba(255, 255, 255, 0.07),\n      rgba(0, 0, 0, 0.55));\n  border-radius: 50%;\n  border: 1.5px solid rgba(255, 255, 255, 0.15);\n  position: relative;\n  cursor: grab;\n  touch-action: none;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  margin: 4px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.03);\n}\n.mc__joystick:hover {\n  border-color: rgba(255, 255, 255, 0.28);\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(66, 133, 244, 0.08);\n}\n.mc__joystick:active {\n  cursor: grabbing;\n  border-color: rgba(66, 133, 244, 0.6);\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 4px rgba(66, 133, 244, 0.15);\n}\n.mc__knob {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 34px;\n  height: 34px;\n  margin-left: -17px;\n  margin-top: -17px;\n  background:\n    linear-gradient(\n      145deg,\n      #5a9bf5,\n      #1a66d9);\n  border-radius: 50%;\n  cursor: grab;\n  box-shadow: 0 3px 10px rgba(26, 102, 217, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25) inset;\n  transition: transform 0.04s linear, box-shadow 0.1s ease;\n  border: 1.5px solid rgba(255, 255, 255, 0.45);\n}\n.mc__joystick:active .mc__knob {\n  box-shadow: 0 2px 16px rgba(66, 133, 244, 0.7), 0 1px 0 rgba(255, 255, 255, 0.25) inset;\n  animation: pulse 0.6s ease infinite;\n}\n.mc__arrow {\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: none;\n  border-radius: 0;\n  box-shadow: none;\n  outline: none;\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition: transform 0.1s ease, filter 0.15s ease;\n  overflow: visible;\n}\n.mc__arrow svg {\n  display: block !important;\n  pointer-events: none !important;\n  user-select: none !important;\n  -webkit-user-select: none !important;\n  overflow: visible !important;\n}\n.mc__arrow--up {\n  margin-bottom: 2px;\n}\n.mc__arrow--up:hover {\n  transform: scale(1.15) translateY(-2px);\n  filter: drop-shadow(0 4px 12px rgba(66, 133, 244, 0.8));\n}\n.mc__arrow--up:active {\n  transform: scale(0.92) translateY(2px);\n}\n.mc__arrow--down {\n  margin-top: 2px;\n}\n.mc__arrow--down:hover {\n  transform: scale(1.15) translateY(2px);\n  filter: drop-shadow(0 -4px 12px rgba(66, 133, 244, 0.8));\n}\n.mc__arrow--down:active {\n  transform: scale(0.92) translateY(-2px);\n}\n.mc__arrow--left {\n  margin-right: 2px;\n}\n.mc__arrow--left:hover {\n  transform: scale(1.15) translateX(-2px);\n  filter: drop-shadow(4px 0 12px rgba(66, 133, 244, 0.8));\n}\n.mc__arrow--left:active {\n  transform: scale(0.92) translateX(2px);\n}\n.mc__arrow--right {\n  margin-left: 2px;\n}\n.mc__arrow--right:hover {\n  transform: scale(1.15) translateX(2px);\n  filter: drop-shadow(-4px 0 12px rgba(66, 133, 244, 0.8));\n}\n.mc__arrow--right:active {\n  transform: scale(0.92) translateX(-2px);\n}\n@keyframes pulse {\n  0%, 100% {\n    box-shadow: 0 2px 16px rgba(66, 133, 244, 0.6), 0 1px 0 rgba(255, 255, 255, 0.25) inset;\n    opacity: 0.85;\n  }\n  50% {\n    box-shadow: 0 4px 24px rgba(66, 133, 244, 0.95), 0 1px 0 rgba(255, 255, 255, 0.25) inset;\n    opacity: 1;\n  }\n}\n@media (max-width: 768px) {\n  .mc__wrapper {\n    bottom: -5px;\n  }\n  .mc__joystick {\n    width: 68px;\n    height: 68px;\n  }\n  .mc__knob {\n    width: 30px;\n    height: 30px;\n    margin-left: -15px;\n    margin-top: -15px;\n  }\n  .mc__arrow--up:hover {\n    transform: scale(1.1) translateY(-1px);\n  }\n  .mc__arrow--down:hover {\n    transform: scale(1.1) translateY(1px);\n  }\n  .mc__arrow--left:hover {\n    transform: scale(1.1) translateX(-1px);\n  }\n  .mc__arrow--right:hover {\n    transform: scale(1.1) translateX(1px);\n  }\n}\n@media (max-width: 480px) {\n  .mc__joystick {\n    width: 56px;\n    height: 56px;\n  }\n  .mc__knob {\n    width: 26px;\n    height: 26px;\n    margin-left: -13px;\n    margin-top: -13px;\n  }\n  .mc__arrow--up {\n    margin-bottom: 1px;\n  }\n  .mc__arrow--down {\n    margin-top: 1px;\n  }\n  .mc__arrow--left {\n    margin-right: 1px;\n  }\n  .mc__arrow--right {\n    margin-left: 1px;\n  }\n}\n@media (hover: none) {\n  .mc__arrow:hover {\n    transform: none !important;\n    filter: none !important;\n  }\n  .mc__arrow:active {\n    transform: scale(0.92) !important;\n  }\n}\n");
 
 // src/components/MouseController.tsx
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -4464,7 +4571,7 @@ var MouseController = ({
       lastRepeatTimeRef.current = 0;
     }
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     window.addEventListener("mousemove", onJoystickMove);
     window.addEventListener("mouseup", onJoystickEnd);
     window.addEventListener("touchmove", onJoystickMove, { passive: false });
@@ -4695,7 +4802,7 @@ var MaterialPicker = ({
 };
 
 // src/components/ModelViewer/ObjectBindingDataPanel.tsx
-import { Fragment as Fragment5, useEffect as useEffect13, useRef as useRef10, useState as useState7 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect14, useRef as useRef10, useState as useState7 } from "react";
 
 // src/styles/ObjectBindingDataPanel.css
 styleInject('.left-panel {\n  width: 280px;\n  min-height: 0;\n  background: var(--ri-databinding-bg, #111318);\n  border-right: 1px solid var(--ri-databinding-border, rgba(255, 255, 255, 0.06));\n  display: flex;\n  flex-direction: column;\n  padding: 24px 18px;\n  overflow-y: auto;\n  font-family: var( --ri-databinding-font-family, "Inter", "Segoe UI", sans-serif );\n  flex-shrink: 0;\n  transition: margin-left 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: var(--ri-databinding-shadow, 4px 0 24px rgba(0, 0, 0, 0.35));\n}\n.left-panel--open {\n  margin-left: 0;\n}\n.left-panel--closed {\n  margin-left: -280px;\n}\n.left-panel::-webkit-scrollbar {\n  width: 4px;\n}\n.left-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n.left-panel::-webkit-scrollbar-thumb {\n  background: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 4px;\n}\n.left-panel__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.left-panel__title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ri-databinding-text, #f1f5f9);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-right: 8px;\n  margin: 0;\n  letter-spacing: 0.02em;\n}\n.left-panel__close-btn {\n  width: 26px;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 6px;\n  color: var(--ri-databinding-text-subtle, #64748b);\n  font-size: 13px;\n  flex-shrink: 0;\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease;\n}\n.left-panel__close-btn:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  color: var(--ri-databinding-text-hover, #cbd5e1);\n  border-color: var(--ri-databinding-border-hover, rgba(255, 255, 255, 0.15));\n}\n.left-panel__data {\n  padding: 12px 6px;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 10px;\n  font-size: 11px;\n  font-family: var( --ri-databinding-mono-font-family, "JetBrains Mono", "Fira Code", "Menlo", monospace );\n  color: var(--ri-databinding-text-muted, #94a3b8);\n  line-height: 1.7;\n  overflow-x: auto;\n  margin-bottom: 18px;\n}\n.left-panel__divider {\n  border: none;\n  border-top: 1px solid var(--ri-databinding-border, rgba(255, 255, 255, 0.06));\n  margin-bottom: 16px;\n}\n.left-panel__actions-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--ri-databinding-text-faint, #475569);\n  text-transform: uppercase;\n  letter-spacing: 0.12em;\n  margin-bottom: 10px;\n}\n.left-panel__actions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.left-panel__action-extra {\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  margin-top: 0;\n  transition:\n    grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.2s ease,\n    margin-top 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.left-panel__action-extra--open {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  margin-top: 4px;\n}\n.left-panel__action-extra-inner {\n  overflow: hidden;\n  min-height: 0;\n}\n.left-panel__action-btn {\n  position: relative;\n  padding: 9px 14px;\n  border-radius: 8px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  overflow: hidden;\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  color: var(--ri-databinding-text-muted, #94a3b8);\n  letter-spacing: 0.01em;\n}\n.left-panel__action-btn:active {\n  transform: scale(0.97);\n}\n.left-panel__action-btn--active::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 20%;\n  bottom: 20%;\n  width: 3px;\n  background: var(--ri-databinding-accent, #93c5fd);\n  border-radius: 0 3px 3px 0;\n  box-shadow: 0 0 8px var(--ri-databinding-accent-glow, rgba(147, 197, 253, 0.8));\n}\n.left-panel__action-btn--active:hover {\n  background: var( --ri-databinding-accent-gradient, linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 60%, #2563eb 100%) );\n  border-color: var(--ri-databinding-accent-border, rgba(96, 165, 250, 0.55));\n}\n.left-panel__action-btn--active:active {\n  transform: scale(0.97);\n  background: var( --ri-databinding-accent-gradient-active, linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) );\n}\n.left-panel__data {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 18px;\n}\n.left-panel__data-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 7px 10px;\n  border-radius: 7px;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid transparent;\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.left-panel__data-row:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.left-panel__data-key {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--ri-databinding-text-faint, #475569);\n  text-transform: uppercase;\n  letter-spacing: 0.07em;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.left-panel__data-value {\n  font-size: 12px;\n  font-family: var( --ri-databinding-mono-font-family, "JetBrains Mono", "Fira Code", "Menlo", monospace );\n  text-align: right;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  min-width: 0;\n}\n.left-panel__data-group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 7px 10px;\n  border-radius: 7px;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid transparent;\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.left-panel__data-group:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.left-panel__data-children {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: 4px;\n  padding-left: 10px;\n  border-left: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.left-panel__data-children .left-panel__data-row,\n.left-panel__data-children .left-panel__data-group {\n  padding: 3px 0;\n  background: transparent;\n  border-color: transparent;\n}\n.left-panel__data-children .left-panel__data-row:hover,\n.left-panel__data-children .left-panel__data-group:hover {\n  background: transparent;\n}\n@media (max-width: 900px) {\n  .left-panel {\n    width: 50vw;\n  }\n  .left-panel--open {\n    margin-left: 0;\n  }\n  .left-panel--closed {\n    margin-left: -50vw;\n  }\n  .left-panel {\n    padding: 18px 12px;\n  }\n  .left-panel__data-row {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 2px;\n    padding: 6px 8px;\n  }\n  .left-panel__data-group {\n    padding: 6px 8px;\n  }\n  .left-panel__data-value {\n    text-align: left;\n    font-size: 11.5px;\n  }\n  .left-panel__data-children {\n    padding-left: 8px;\n  }\n}\n');
@@ -4730,7 +4837,7 @@ function ActionExtra({ content }) {
   const [expanded, setExpanded] = useState7(hasContent);
   const cachedRef = useRef10(content);
   if (hasContent) cachedRef.current = content;
-  useEffect13(() => {
+  useEffect14(() => {
     if (hasContent) {
       setMounted(true);
       return;
@@ -4741,7 +4848,7 @@ function ActionExtra({ content }) {
       return () => clearTimeout(timer);
     }
   }, [hasContent, mounted]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (mounted && hasContent) {
       const frame = requestAnimationFrame(() => setExpanded(true));
       return () => cancelAnimationFrame(frame);
@@ -4765,7 +4872,7 @@ function ObjectBindingDataPanel({
   renderActionExtra
 }) {
   const [displayedObject, setDisplayedObject] = useState7(selectedObject);
-  useEffect13(() => {
+  useEffect14(() => {
     if (selectedObject) setDisplayedObject(selectedObject);
   }, [selectedObject]);
   const objectToRender = selectedObject ?? displayedObject;
@@ -5170,7 +5277,7 @@ function GuidedTourCameraFollow({
   const goal = useMemo13(() => new Vector37(), []);
   const nodeName = annotation?.anchorNodeName;
   const localPosition = annotation?.anchorLocalPosition;
-  useEffect14(() => {
+  useEffect15(() => {
     nodeRef.current = null;
     hasPrev.current = false;
   }, [nodeName, annotation?.id]);
@@ -5215,6 +5322,14 @@ function computeMeasureBox(scene) {
     size: [size.x, size.y, size.z]
   };
 }
+function computeModelBounds(scene) {
+  const box = new Box33().setFromObject(scene);
+  if (box.isEmpty()) return null;
+  const center = box.getCenter(new Vector37());
+  const radius = box.getSize(new Vector37()).length() / 2;
+  if (!Number.isFinite(radius) || radius <= 0) return null;
+  return { center: [center.x, center.y, center.z], radius };
+}
 function fitClippingPlanesToScene(scene, controls) {
   const camera = controls?.camera;
   if (!(camera instanceof PerspectiveCamera3)) return;
@@ -5315,7 +5430,7 @@ function ModelViewer({
     [performanceProfile]
   );
   const controlsRef = useRef11(null);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!controlsRef.current) return;
     controlsRef.current.dollySpeed = Math.max(zoomSensitivity, 0);
   }, [zoomSensitivity]);
@@ -5325,7 +5440,7 @@ function ModelViewer({
   const pendingObjectId = useRef11(null);
   const rendererCaptureRef = useRef11(null);
   const createdBlobUrls = useRef11({});
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       for (const url of Object.values(createdBlobUrls.current)) {
         URL.revokeObjectURL(url);
@@ -5384,13 +5499,14 @@ function ModelViewer({
   const [measurePoints, setMeasurePoints] = useState10([]);
   const [showDimensions, setShowDimensions] = useState10(false);
   const [measureBox, setMeasureBox] = useState10(null);
+  const [modelBounds, setModelBounds] = useState10(null);
   const measureModeRef = useRef11(false);
   measureModeRef.current = measureMode;
   const measurePointCounter = useRef11(0);
   const measureDownRef = useRef11(null);
   const [explodeFactor, setExplodeFactor] = useState10(0);
   const [explodeOpen, setExplodeOpen] = useState10(false);
-  useEffect14(() => {
+  useEffect15(() => {
     setExplodeFactor(0);
     setExplodeOpen(false);
   }, [modelUrl]);
@@ -5411,11 +5527,11 @@ function ModelViewer({
   }, [cinematic, resolvedSceneConfig]);
   const [cinematicPlaying, setCinematicPlaying] = useState10(false);
   const cinematicAutoStartedRef = useRef11(false);
-  useEffect14(() => {
+  useEffect15(() => {
     setCinematicPlaying(false);
     cinematicAutoStartedRef.current = false;
   }, [modelUrl]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!cinematicConfig?.autoPlay || cinematicAutoStartedRef.current) return;
     if (modelLoaded && cameraPositioned && !isAutoFraming) {
       cinematicAutoStartedRef.current = true;
@@ -5443,7 +5559,7 @@ function ModelViewer({
   const [isHandheld, setIsHandheld] = useState10(true);
   const [resolvedMobileHandoffUrl, setResolvedMobileHandoffUrl] = useState10(null);
   const [isMobileHandoffOpen, setIsMobileHandoffOpen] = useState10(false);
-  useEffect14(() => {
+  useEffect15(() => {
     setIsHandheld(isHandheldDevice());
   }, []);
   const resolveMobileHandoffUrl = useCallback4(() => {
@@ -5458,7 +5574,7 @@ function ModelViewer({
       return null;
     }
   }, [mobileHandoffUrl]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!enableXR || isHandheld) {
       setResolvedMobileHandoffUrl(null);
       setIsMobileHandoffOpen(false);
@@ -5477,17 +5593,17 @@ function ModelViewer({
     DEFAULT_AR_OVERLAY_STATE
   );
   const [relocatePressed, setRelocatePressed] = useState10(false);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!xrStore) return;
     return xrStore.subscribe(
       (state) => setInARSession(state.session != null && state.mode === "immersive-ar")
     );
   }, [xrStore]);
-  useEffect14(() => {
+  useEffect15(() => {
     setRelocatePressed(false);
     setArOverlayState(DEFAULT_AR_OVERLAY_STATE);
   }, [inARSession]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!enableXR) return;
     const xr = navigator.xr;
     if (!xr?.isSessionSupported) return;
@@ -5522,7 +5638,7 @@ function ModelViewer({
     setRelocatePressed(true);
     xrPresenterRef.current?.startPlacementMode();
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!relocatePressed) return;
     const onPointerUp = () => finishRelocation(true);
     const onPointerCancel = () => finishRelocation(false);
@@ -5585,7 +5701,7 @@ function ModelViewer({
   const [annotations, setAnnotations] = useState10(
     () => sceneConfig?.annotations ?? []
   );
-  useEffect14(() => {
+  useEffect15(() => {
     if (annotations.length > 0) {
       const maxId = annotations.reduce((max, ann) => Math.max(max, ann.id), 0);
       annotationCounterRef.current = maxId;
@@ -5751,23 +5867,23 @@ function ModelViewer({
       );
     }
   }, [setActiveAnnotation]);
-  useEffect14(() => {
+  useEffect15(() => {
     setCurrentAnnotationIndex(-1);
     setIsGuidedTourActive(false);
   }, [sortedAnnotations.length]);
-  useEffect14(() => {
+  useEffect15(() => {
     return () => {
       if (annotationSmoothRestoreTimeoutRef.current) {
         clearTimeout(annotationSmoothRestoreTimeoutRef.current);
       }
     };
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (currentAnnotation && isGuidedTourActive) {
       setActiveAnnotation(currentAnnotation);
     }
   }, [currentAnnotation, setActiveAnnotation, isGuidedTourActive]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (sceneConfig?.annotations === void 0) {
       return;
     }
@@ -5796,7 +5912,7 @@ function ModelViewer({
     );
     return annotation ?? null;
   }, [activeAnnotation, annotations]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (activeAnnotation && !activeViewingAnnotation) {
       closeViewingAnnotation();
     }
@@ -5848,12 +5964,12 @@ function ModelViewer({
   );
   const isPanelOpen = showObjectBindingDataPanel && currentSelectedObject !== null && currentSelectedObjectKey !== null;
   const currentPanelObject = (currentSelectedObjectKey ? currentObjectBindings[currentSelectedObjectKey] : null) ?? currentSelectedObject;
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isControlledBindings) {
       setInternalObjectBindings(objectBindings);
     }
   }, [isControlledBindings, objectBindings]);
-  useEffect14(() => {
+  useEffect15(() => {
     onHiddenObjectsChange?.(currentHiddenObjects);
   }, [currentHiddenObjects, onHiddenObjectsChange]);
   const applySelection = useCallback4(
@@ -6035,24 +6151,24 @@ function ModelViewer({
       bindingKeyIndex
     ]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     if (!colorPicker) return;
     window.addEventListener("pointerdown", closeColorPicker);
     return () => window.removeEventListener("pointerdown", closeColorPicker);
   }, [colorPicker, closeColorPicker]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!materialPopup) return;
     const close = () => setMaterialPopup(null);
     window.addEventListener("pointerdown", close);
     return () => window.removeEventListener("pointerdown", close);
   }, [materialPopup]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!downloadMenuOpen) return;
     const close = () => setDownloadMenuOpen(false);
     window.addEventListener("pointerdown", close);
     return () => window.removeEventListener("pointerdown", close);
   }, [downloadMenuOpen]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!activeViewingAnnotation) return;
     const handleClickOutside = (event) => {
       if (viewAnnotationPopupRef.current && !viewAnnotationPopupRef.current.contains(event.target)) {
@@ -6070,7 +6186,7 @@ function ModelViewer({
       document.removeEventListener("touchstart", handleClickOutside);
     };
   }, [activeViewingAnnotation, closeViewingAnnotation]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!pendingAnnotation) return;
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -6217,7 +6333,7 @@ function ModelViewer({
     },
     [captureInitialCameraState, notifyViewerReady]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     fitAttemptedRef.current = false;
     fitInFlightRef.current = false;
     initialCameraStateRef.current = null;
@@ -6289,7 +6405,7 @@ function ModelViewer({
     notifyViewerReady,
     onAutoFit
   ]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!refitOnResize) {
       return;
     }
@@ -6398,7 +6514,7 @@ function ModelViewer({
     },
     [applySelection, resolveBindingKey2, disableZoom]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     notifyViewerReady();
   }, [notifyViewerReady]);
   const handleCameraChangeInternal = useCallback4(
@@ -6412,6 +6528,7 @@ function ModelViewer({
     (scene) => {
       sceneRef.current = scene;
       setMeasureBox(computeMeasureBox(scene));
+      setModelBounds(computeModelBounds(scene));
       setModelLoaded(true);
       setModelLoadFailed(false);
       setMismatchDismissed(false);
@@ -6429,7 +6546,7 @@ function ModelViewer({
     },
     [onLoadError]
   );
-  useEffect14(() => {
+  useEffect15(() => {
     const scene = sceneRef.current;
     if (!modelLoaded || !scene) {
       setBindingsMismatch(false);
@@ -6490,7 +6607,7 @@ function ModelViewer({
     },
     []
   );
-  useEffect14(() => {
+  useEffect15(() => {
     setMeasurePoints([]);
   }, [modelUrl, resolvedSceneConfig.model.rotation]);
   const handleDownloadMesh = useCallback4(() => {
@@ -6767,7 +6884,8 @@ function ModelViewer({
                       shadowConfig: resolvedSceneConfig.shadows,
                       shadowsEnabled: shadows,
                       environmentRotation: resolvedSceneConfig.environment.rotation,
-                      environmentConfig: resolvedSceneConfig.environment
+                      environmentConfig: resolvedSceneConfig.environment,
+                      modelBounds
                     }
                   ),
                   /* @__PURE__ */ jsx19(
@@ -7327,7 +7445,7 @@ function ModelViewer({
 }
 
 // src/components/BindingBuilder/BindingBuilder.tsx
-import { useCallback as useCallback8, useEffect as useEffect19, useMemo as useMemo16, useRef as useRef18, useState as useState24 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect20, useMemo as useMemo16, useRef as useRef18, useState as useState24 } from "react";
 import {
   Redo2,
   Undo2,
@@ -7579,7 +7697,7 @@ function useViewerCamera() {
 }
 
 // src/hooks/useViewerAnimations.ts
-import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef13, useState as useState12 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect16, useRef as useRef13, useState as useState12 } from "react";
 function useViewerAnimations() {
   const controlsRef = useRef13(null);
   const [clips, setClips] = useState12([]);
@@ -7590,7 +7708,7 @@ function useViewerAnimations() {
   const [speed, setSpeedState] = useState12(1);
   const [time, setTime] = useState12(0);
   const [duration, setDuration] = useState12(0);
-  useEffect15(
+  useEffect16(
     () => () => {
       unsubscribeRef.current?.();
     },
@@ -7852,7 +7970,7 @@ function inferMimeType(path) {
 }
 
 // src/components/BindingBuilder/SceneSettings/SceneSettingsTab.tsx
-import { useState as useState19, useEffect as useEffect17 } from "react";
+import { useState as useState19, useEffect as useEffect18 } from "react";
 
 // src/components/BindingBuilder/SceneSettings/GeneralSceneSettings.tsx
 import { useState as useState14 } from "react";
@@ -7880,9 +7998,9 @@ function getContrastTextColor(hex) {
 }
 
 // src/hooks/useClickOutside.ts
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 function useClickOutside(refs, onOutside, active) {
-  useEffect16(() => {
+  useEffect17(() => {
     if (!active) return;
     const refList = Array.isArray(refs) ? refs : [refs];
     const handlePointerDown = (event) => {
@@ -11664,7 +11782,7 @@ function SceneSettingsTab({
   const { tier } = useBindingBuilderContext();
   const canUseStarterFeatures = hasTier(tier, "starter");
   const canUseGrowthFeatures = hasTier(tier, "growth");
-  useEffect17(() => {
+  useEffect18(() => {
     if (controlledActiveSubTab !== void 0) {
       setInternalActiveSubTab(controlledActiveSubTab);
     }
@@ -13152,7 +13270,7 @@ function MaterialPresetGallery({
 }
 
 // src/components/BindingBuilder/components/ToolbarExportMenu.tsx
-import { useEffect as useEffect18, useRef as useRef16, useState as useState22 } from "react";
+import { useEffect as useEffect19, useRef as useRef16, useState as useState22 } from "react";
 import { ChevronDown as ChevronDown5, Download as Download2, FileCode2, FileJson } from "lucide-react";
 import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 function ToolbarExportMenu({
@@ -13163,7 +13281,7 @@ function ToolbarExportMenu({
 }) {
   const [open, setOpen] = useState22(false);
   const wrapperRef = useRef16(null);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!open) return;
     const close = (event) => {
       if (!wrapperRef.current?.contains(event.target)) {
@@ -13603,8 +13721,6 @@ function CameraPositionPanel({
 import { useMemo as useMemo15, useState as useState23 } from "react";
 
 // src/components/BindingBuilder/utils/bindingFactory.ts
-import { GLTFLoader } from "three-stdlib";
-import { WebGLRenderer as WebGLRenderer2 } from "three";
 function slugify(value) {
   return value.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase();
 }
@@ -13670,51 +13786,15 @@ function buildBindingsFromNodes(nodeNames) {
     nodeNames.map((nodeName) => [nodeName, createDefaultBinding(nodeName)])
   );
 }
-function collectModelMetadata(modelUrl) {
-  const loader = new GLTFLoader();
-  let renderer = null;
-  if (typeof document !== "undefined") {
-    try {
-      renderer = new WebGLRenderer2({
-        canvas: document.createElement("canvas"),
-        antialias: false
-      });
-      configureGLTFLoader(loader, {}, renderer);
-    } catch {
-      renderer = null;
-      configureGLTFLoader(loader, {});
+function collectNodeNames(scene) {
+  const names = /* @__PURE__ */ new Set();
+  scene.traverse((child) => {
+    const mesh = child;
+    if (mesh.isMesh && mesh.geometry && child.name) {
+      names.add(child.name);
     }
-  } else {
-    configureGLTFLoader(loader, {});
-  }
-  return new Promise((resolve, reject) => {
-    loader.load(
-      modelUrl,
-      (gltf) => {
-        const names = /* @__PURE__ */ new Set();
-        gltf.scene.traverse((child) => {
-          if (child?.isMesh && child.geometry && child.name) {
-            names.add(child.name);
-          }
-        });
-        resolve({
-          nodeNames: Array.from(names).sort((a, b) => a.localeCompare(b)),
-          animations: resolveAnimationClips(gltf.animations).map(
-            ({ sourceName, duration }) => ({
-              sourceName,
-              duration
-            })
-          )
-        });
-        renderer?.dispose();
-      },
-      void 0,
-      (error) => {
-        renderer?.dispose();
-        reject(error);
-      }
-    );
   });
+  return Array.from(names).sort((a, b) => a.localeCompare(b));
 }
 
 // src/components/BindingBuilder/components/SceneNodesPanel.tsx
@@ -14260,6 +14340,8 @@ function BindingBuilder({ licenseKey }) {
   const uploadedModelRef = useRef18(null);
   const previewDragDepthRef = useRef18(0);
   const loadRequestRef = useRef18(0);
+  const pendingLoadRef = useRef18(null);
+  const loadedSceneRef = useRef18(null);
   const {
     cameraState,
     resetView,
@@ -14317,7 +14399,7 @@ function BindingBuilder({ licenseKey }) {
     },
     []
   );
-  useEffect19(() => {
+  useEffect20(() => {
     if (!selectedBinding) {
       setMetricsDraft("{}");
       setMetadataDraft("{}");
@@ -14330,7 +14412,7 @@ function BindingBuilder({ licenseKey }) {
     setMetricsError(null);
     setMetadataError(null);
   }, [selectedBinding]);
-  useEffect19(() => {
+  useEffect20(() => {
     const derived = createMaterialPanelEnabledState(selectedMaterial);
     if (materialPanelItemRef.current !== selectedItem) {
       materialPanelItemRef.current = selectedItem;
@@ -14349,12 +14431,12 @@ function BindingBuilder({ licenseKey }) {
       return changed ? next : prev;
     });
   }, [selectedItem, selectedMaterial]);
-  useEffect19(() => {
+  useEffect20(() => {
     return () => {
       uploadedModelRef.current?.cleanup();
     };
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     const handleKeyDown = (event) => {
       if (event.key.toLowerCase() !== "z" || !(event.metaKey || event.ctrlKey)) {
         return;
@@ -14375,7 +14457,7 @@ function BindingBuilder({ licenseKey }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [activeEditorTab, bindingsHistory, sceneConfigHistory]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (loading || statusTone === "default" || statusTone === "success") return;
     setStatusBannerVisible(true);
     const timeout = window.setTimeout(
@@ -14428,42 +14510,76 @@ function BindingBuilder({ licenseKey }) {
       });
     }
   };
-  const generateBindingsForModel = async (nextModelUrl, nextModelName) => {
+  const applyBindingsFromScene = useCallback8(
+    (scene, nextModelName) => {
+      const nodeNames = collectNodeNames(scene);
+      bindingsHistory.reset(buildBindingsFromNodes(nodeNames));
+      setSelectedItem(nodeNames[0] ?? null);
+      setSceneConfig((prev) => ({ ...prev, annotations: [] }));
+      setStatusMessage(
+        `Generated ${nodeNames.length} bindings from ${nextModelName}.`
+      );
+      setStatusTone("success");
+      setLoading(false);
+    },
+    [bindingsHistory, setSceneConfig]
+  );
+  const generateBindingsForModel = (nextModelUrl, nextModelName) => {
     const requestId = ++loadRequestRef.current;
     setLoading(true);
     setStatusMessage(
       `Reading ${nextModelName} and generating starter bindings...`
     );
     setStatusTone("default");
-    try {
-      const { nodeNames, animations } = await collectModelMetadata(nextModelUrl);
-      if (requestId !== loadRequestRef.current) return;
-      const nextBindings = buildBindingsFromNodes(nodeNames);
-      setModelUrl(nextModelUrl);
-      setModelName(nextModelName);
-      bindingsHistory.reset(nextBindings);
-      setSelectedItem(nodeNames[0] ?? null);
-      setActiveAnnotation(null);
+    setModelName(nextModelName);
+    setActiveAnnotation(null);
+    const loaded = loadedSceneRef.current;
+    if (nextModelUrl === modelUrl && loaded?.url === nextModelUrl) {
+      pendingLoadRef.current = null;
+      applyBindingsFromScene(loaded.scene, nextModelName);
+      return;
+    }
+    pendingLoadRef.current = {
+      requestId,
+      modelName: nextModelName,
+      modelUrl: nextModelUrl
+    };
+    setModelUrl(nextModelUrl);
+    bindingsHistory.reset({});
+    setSelectedItem(null);
+  };
+  const handleViewerModelLoaded = useCallback8(
+    (scene) => {
+      const pending = pendingLoadRef.current;
+      if (!pending || pending.requestId !== loadRequestRef.current) return;
+      pendingLoadRef.current = null;
+      loadedSceneRef.current = { url: pending.modelUrl, scene };
+      applyBindingsFromScene(scene, pending.modelName);
+    },
+    [applyBindingsFromScene]
+  );
+  const handleViewerLoadError = useCallback8((error) => {
+    const pending = pendingLoadRef.current;
+    if (!pending || pending.requestId !== loadRequestRef.current) return;
+    pendingLoadRef.current = null;
+    console.error(error);
+    setStatusMessage(
+      `Could not read ${pending.modelName}. Make sure the file is a valid GLB/GLTF asset.`
+    );
+    setStatusTone("error");
+    setLoading(false);
+  }, []);
+  const handleAnimationsReady = useCallback8(
+    (controls) => {
+      viewerAnimations.handleAnimationsReady(controls);
+      const details = controls.clipDetails ?? controls.clips.map((sourceName) => ({ sourceName, duration: 0 }));
       setSceneConfig((prev) => ({
         ...prev,
-        animations: mergeAnimationConfig(prev, animations),
-        annotations: []
+        animations: mergeAnimationConfig(prev, details)
       }));
-      setStatusMessage(
-        `Generated ${nodeNames.length} bindings from ${nextModelName}.`
-      );
-      setStatusTone("success");
-    } catch (error) {
-      if (requestId !== loadRequestRef.current) return;
-      console.error(error);
-      setStatusMessage(
-        `Could not read ${nextModelName}. Make sure the file is a valid GLB/GLTF asset.`
-      );
-      setStatusTone("error");
-    } finally {
-      if (requestId === loadRequestRef.current) setLoading(false);
-    }
-  };
+    },
+    [viewerAnimations, setSceneConfig]
+  );
   const handleLoadDemo = async () => {
     uploadedModelRef.current?.cleanup();
     uploadedModelRef.current = null;
@@ -14493,6 +14609,8 @@ function BindingBuilder({ licenseKey }) {
   const clearModel = () => {
     uploadedModelRef.current?.cleanup();
     uploadedModelRef.current = null;
+    loadedSceneRef.current = null;
+    pendingLoadRef.current = null;
     previewDragDepthRef.current = 0;
     setIsPreviewDragActive(false);
     setModelUrl(null);
@@ -15291,7 +15409,9 @@ function BindingBuilder({ licenseKey }) {
               onAnnotationsChange: handleAnnotationsChange,
               activeAnnotation: activeAnnotation?.annotation ?? null,
               onActiveAnnotationChange: handleActiveAnnotationChange,
-              onAnimationsReady: viewerAnimations.handleAnimationsReady,
+              onAnimationsReady: handleAnimationsReady,
+              onModelLoaded: handleViewerModelLoaded,
+              onLoadError: handleViewerLoadError,
               licenseKey,
               sceneConfig,
               disableZoom: false,
@@ -15374,7 +15494,7 @@ import {
   useRef as useRef19,
   useState as useState25,
   useCallback as useCallback9,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useMemo as useMemo17,
   Component as Component3,
   Suspense as Suspense3
@@ -15492,14 +15612,14 @@ function InnerModel({
     }
     return map;
   }, [meshMap]);
-  useEffect20(
+  useEffect21(
     () => () => {
       Object.values(perKeyMaterials).forEach((m) => m.dispose());
     },
     [perKeyMaterials]
   );
   const notifiedUrl = useRef19(null);
-  useEffect20(() => {
+  useEffect21(() => {
     if (notifiedUrl.current === url) return;
     notifiedUrl.current = url;
     scene.updateWorldMatrix(true, true);
@@ -15507,22 +15627,22 @@ function InnerModel({
     onMeshesReady(meshMap);
     onModelLoaded(scene);
   }, [url, scene, meshMap, onMeshesReady, onModelLoaded]);
-  useEffect20(() => {
+  useEffect21(() => {
     for (const [key, { ref }] of Object.entries(meshMap)) {
       nodeRefsOut.current[key] = ref;
     }
   }, [meshMap, nodeRefsOut]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!highlightOnHover && hoveredKey !== null) {
       setHoveredKey(null);
     }
   }, [highlightOnHover, hoveredKey]);
-  useEffect20(() => {
+  useEffect21(() => {
     return () => {
       document.body.style.cursor = "default";
     };
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     for (const [key, { ref }] of Object.entries(meshMap)) {
       ref.visible = !hiddenKeys.has(key);
       const mat = perKeyMaterials[key];
@@ -15599,7 +15719,7 @@ function CameraFitter({
   const invalidate = useThree11((state) => state.invalidate);
   const size = useThree11((state) => state.size);
   const resizeTimerRef = useRef19(null);
-  useEffect20(() => {
+  useEffect21(() => {
     fitted.current = false;
     invalidate();
   }, [invalidate, scene]);
@@ -15619,7 +15739,7 @@ function CameraFitter({
     }).catch(() => {
     }).finally(onInitialFitComplete);
   });
-  useEffect20(() => {
+  useEffect21(() => {
     if (!refitOnResize || !fitted.current || !scene || !controlsRef.current) {
       return;
     }
@@ -15647,7 +15767,7 @@ function CameraFitter({
 function ExposureController({ exposure }) {
   const gl = useThree11((state) => state.gl);
   const invalidate = useThree11((state) => state.invalidate);
-  useEffect20(() => {
+  useEffect21(() => {
     gl.toneMappingExposure = exposure;
     invalidate();
   }, [gl, exposure, invalidate]);
@@ -16150,7 +16270,7 @@ function SimpleModelViewer({
     },
     [handleUploadedModel]
   );
-  useEffect20(() => {
+  useEffect21(() => {
     return () => {
       revokeUploadedModelUrl();
     };
@@ -16161,10 +16281,10 @@ function SimpleModelViewer({
     },
     []
   );
-  useEffect20(() => {
+  useEffect21(() => {
     setEnvSettings((prev) => ({ ...prev, backgroundColor }));
   }, [backgroundColor]);
-  useEffect20(() => {
+  useEffect21(() => {
     resetModelState();
   }, [activeModelUrl, resetModelState]);
   const handleMeshesReady = useCallback9((meshes) => {
@@ -16726,7 +16846,7 @@ function useViewerActions(objectBindings, options = {}) {
 }
 
 // src/hooks/useShareableViewerState.ts
-import { useCallback as useCallback15, useEffect as useEffect21, useRef as useRef20, useState as useState29 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect22, useRef as useRef20, useState as useState29 } from "react";
 function serializeState(cameraState, objectBindings, selectedObjectBinding) {
   const hidden = Object.values(objectBindings).filter((binding) => binding.visible === false).map((binding) => binding.id);
   return {
@@ -16780,7 +16900,7 @@ function useShareableViewerState({
   };
   const [restoreAttempted, setRestoreAttempted] = useState29(false);
   const lastSyncedHashRef = useRef20(null);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!autoSync || !restoreAttempted) return;
     const tick = () => {
       const current = latestStateRef.current;
@@ -16857,7 +16977,7 @@ function useShareableViewerState({
     setCameraState,
     setSelectedObjectBinding
   ]);
-  useEffect21(() => {
+  useEffect22(() => {
     const handleHashChange = () => {
       void restoreFromUrl();
     };