@liveroom-tech/react-immersive 1.1.8 → 1.2.0

package/dist/index.js

@@ -55,7 +55,7 @@ var import_react_dom = require("react-dom");
 var import_fiber11 = require("@react-three/fiber");
 var import_xr4 = require("@react-three/xr");
 var import_qrcode = require("qrcode.react");
-var import_three18 = require("three");
+var import_three19 = require("three");
 
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
@@ -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
@@ -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 = (0, import_react9.useRef)(null);
   const pointRef = (0, import_react9.useRef)(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 = (0, import_react9.useMemo)(
+    () => light.type === "directional" && castShadow && modelBounds && !light.attachedToCamera ? fitShadowCamera(modelBounds, position) : null,
+    [light.type, light.attachedToCamera, castShadow, modelBounds, position]
+  );
+  (0, import_react9.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime7.jsx)(
       "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,28 +1767,29 @@ function Lights({
         light,
         shadows,
         shadowsEnabled,
-        environmentRotation
+        environmentRotation,
+        modelBounds
       },
       light.id
     )),
     sl?.enabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "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
       }
     )
   ] });
@@ -1854,7 +1887,7 @@ function useConfiguredGLTF(url, config = {}) {
 }
 
 // src/components/Model.tsx
-var import_three13 = require("three");
+var import_three14 = require("three");
 var import_three_stdlib3 = require("three-stdlib");
 
 // src/utils/animationClips.ts
@@ -2451,6 +2484,68 @@ function refreshSkinnedBounds(root) {
   });
 }
 
+// src/utils/bvh.ts
+var import_three13 = require("three");
+var import_three_mesh_bvh = require("three-mesh-bvh");
+var raycastPatched = false;
+function enableAcceleratedRaycast() {
+  if (raycastPatched) return;
+  import_three13.Mesh.prototype.raycast = import_three_mesh_bvh.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 = import_three_mesh_bvh.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;
+    import_three_mesh_bvh.disposeBoundsTree.call(geometry);
+    geometry.boundsTree = void 0;
+  });
+}
+
 // src/components/Model.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function firstMaterial(node) {
@@ -2508,17 +2603,17 @@ function Model({
   }, [scene]);
   const shellNodeNames = (0, import_react11.useMemo)(() => {
     const shell = /* @__PURE__ */ new Set();
-    const sceneBox = new import_three13.Box3();
+    const sceneBox = new import_three14.Box3();
     const meshNodes = [];
     for (const [name, node] of Object.entries(nodeMap)) {
       if (!isMeshNode(node)) continue;
-      const box = new import_three13.Box3().setFromObject(node);
+      const box = new import_three14.Box3().setFromObject(node);
       if (box.isEmpty()) continue;
       meshNodes.push({ name, box });
       sceneBox.union(box);
     }
-    const sceneSize = sceneBox.getSize(new import_three13.Vector3());
-    const size = new import_three13.Vector3();
+    const sceneSize = sceneBox.getSize(new import_three14.Vector3());
+    const size = new import_three14.Vector3();
     for (const { name, box } of meshNodes) {
       box.getSize(size);
       const isShell = size.x > sceneSize.x * 0.7 && size.z > sceneSize.z * 0.7 && size.y > sceneSize.y * 0.4;
@@ -2537,6 +2632,14 @@ function Model({
   (0, import_react11.useEffect)(() => {
     refreshSkinnedBounds(scene);
   }, [scene]);
+  (0, import_react11.useEffect)(() => {
+    const controller = new AbortController();
+    void buildSceneBVH(scene, controller.signal);
+    return () => {
+      controller.abort();
+      disposeSceneBVH(scene);
+    };
+  }, [scene]);
   const bindingKeyByNodeName = (0, import_react11.useMemo)(() => {
     const map = {};
     for (const [nodeName, binding] of Object.entries(objectBindings)) {
@@ -2584,7 +2687,7 @@ function Model({
     const map = {};
     if (shadingMode !== "unlit") return map;
     for (const [nodeName, material] of Object.entries(perNodeMaterials)) {
-      const basic = new import_three13.MeshBasicMaterial();
+      const basic = new import_three14.MeshBasicMaterial();
       basic.color.copy(material.color);
       basic.map = material.map;
       basic.alphaMap = material.alphaMap;
@@ -2600,7 +2703,7 @@ function Model({
     const map = {};
     if (shadingMode !== "normals") return map;
     for (const nodeName of Object.keys(perNodeMaterials)) {
-      map[nodeName] = new import_three13.MeshNormalMaterial();
+      map[nodeName] = new import_three14.MeshNormalMaterial();
     }
     return map;
   }, [perNodeMaterials, shadingMode]);
@@ -2609,7 +2712,7 @@ function Model({
     if (shadingMode !== "lit" || rendererMode !== "matcap") return map;
     const matcapTexture = getMatcapTexture();
     for (const [nodeName, material] of Object.entries(perNodeMaterials)) {
-      const matcap = new import_three13.MeshMatcapMaterial();
+      const matcap = new import_three14.MeshMatcapMaterial();
       matcap.matcap = matcapTexture;
       matcap.color.copy(material.color);
       matcap.alphaMap = material.alphaMap;
@@ -2776,16 +2879,16 @@ function Model({
       const glbNodeName = binding.modelObjectId ?? nodeName;
       const node = nodeMap[glbNodeName];
       if (!isMeshNode(node)) continue;
-      const geometry = new import_three13.WireframeGeometry(
+      const geometry = new import_three14.WireframeGeometry(
         node.geometry
       );
-      const lineMaterial = new import_three13.LineBasicMaterial({
+      const lineMaterial = new import_three14.LineBasicMaterial({
         color: wireframeColor,
         transparent: true,
         opacity: wireframeOpacity,
         depthTest: false
       });
-      const line = new import_three13.LineSegments(geometry, lineMaterial);
+      const line = new import_three14.LineSegments(geometry, lineMaterial);
       line.renderOrder = 1;
       node.add(line);
       added.push({ node, line });
@@ -2837,7 +2940,7 @@ function Model({
   const applyClipConfigToAction = (action, clipConfig) => {
     const loopMode = getClipLoopMode(clipConfig);
     action.setLoop(
-      loopMode === "once" ? import_three13.LoopOnce : import_three13.LoopRepeat,
+      loopMode === "once" ? import_three14.LoopOnce : import_three14.LoopRepeat,
       loopMode === "once" ? 1 : Infinity
     );
     action.clampWhenFinished = loopMode === "once";
@@ -2904,7 +3007,7 @@ function Model({
     invalidate();
   };
   (0, import_react11.useEffect)(() => {
-    const mixer = new import_three13.AnimationMixer(scene);
+    const mixer = new import_three14.AnimationMixer(scene);
     mixerRef.current = mixer;
     const actions = {};
     for (const { clip, sourceName } of resolvedAnimationClips) {
@@ -2995,17 +3098,17 @@ function Model({
   (0, import_fiber7.useFrame)((_, delta) => {
     if (!groupRef.current) return;
     const rotation = groupRef.current.rotation;
-    rotation.x = import_three13.MathUtils.lerp(
+    rotation.x = import_three14.MathUtils.lerp(
       rotation.x,
       targetRotation[0],
       1 - Math.exp(-5 * delta)
     );
-    rotation.y = import_three13.MathUtils.lerp(
+    rotation.y = import_three14.MathUtils.lerp(
       rotation.y,
       targetRotation[1],
       1 - Math.exp(-5 * delta)
     );
-    rotation.z = import_three13.MathUtils.lerp(
+    rotation.z = import_three14.MathUtils.lerp(
       rotation.z,
       targetRotation[2],
       1 - Math.exp(-5 * delta)
@@ -3016,16 +3119,16 @@ function Model({
   const explodePartsRef = (0, import_react11.useRef)([]);
   const explodeStrengthRef = (0, import_react11.useRef)(0);
   const currentExplodeRef = (0, import_react11.useRef)(0);
-  const explodeTmp = (0, import_react11.useMemo)(() => new import_three13.Vector3(), []);
+  const explodeTmp = (0, import_react11.useMemo)(() => new import_three14.Vector3(), []);
   (0, import_react11.useEffect)(() => {
     for (const part of explodePartsRef.current) {
       part.node.position.copy(part.restLocalPos);
     }
     currentExplodeRef.current = 0;
     scene.updateWorldMatrix(true, true);
-    const sceneBox = new import_three13.Box3().setFromObject(scene);
-    const modelCenter = sceneBox.getCenter(new import_three13.Vector3());
-    const radius = sceneBox.getSize(new import_three13.Vector3()).length() * 0.5;
+    const sceneBox = new import_three14.Box3().setFromObject(scene);
+    const modelCenter = sceneBox.getCenter(new import_three14.Vector3());
+    const radius = sceneBox.getSize(new import_three14.Vector3()).length() * 0.5;
     explodeStrengthRef.current = Number.isFinite(radius) ? radius : 0;
     const targets = [];
     const targetSet = /* @__PURE__ */ new Set();
@@ -3036,7 +3139,7 @@ function Model({
       targets.push(node);
     }
     const parts = [];
-    const partCenter = new import_three13.Vector3();
+    const partCenter = new import_three14.Vector3();
     for (const node of targets) {
       if (!node.parent) continue;
       let ancestor = node.parent;
@@ -3049,7 +3152,7 @@ function Model({
         ancestor = ancestor.parent;
       }
       if (nested) continue;
-      const box = new import_three13.Box3().setFromObject(node);
+      const box = new import_three14.Box3().setFromObject(node);
       if (box.isEmpty()) continue;
       box.getCenter(partCenter);
       const worldDir = partCenter.clone().sub(modelCenter);
@@ -3058,9 +3161,9 @@ function Model({
       parts.push({
         node,
         restLocalPos: node.position.clone(),
-        restWorldPos: node.getWorldPosition(new import_three13.Vector3()),
+        restWorldPos: node.getWorldPosition(new import_three14.Vector3()),
         worldDir,
-        parentInverse: new import_three13.Matrix4().copy(node.parent.matrixWorld).invert()
+        parentInverse: new import_three14.Matrix4().copy(node.parent.matrixWorld).invert()
       });
     }
     explodePartsRef.current = parts;
@@ -3078,7 +3181,7 @@ function Model({
       if (current === target) return;
       currentExplodeRef.current = target;
     } else {
-      currentExplodeRef.current = import_three13.MathUtils.lerp(
+      currentExplodeRef.current = import_three14.MathUtils.lerp(
         current,
         target,
         1 - Math.exp(-6 * delta)
@@ -3143,7 +3246,7 @@ function Model({
 var import_react12 = require("react");
 var import_drei4 = require("@react-three/drei");
 var import_fiber8 = require("@react-three/fiber");
-var import_three14 = require("three");
+var import_three15 = require("three");
 
 // src/styles/AnnotationsLayer.css
 styleInject(".ri-annotationMarker--hovered {\n  transform: scale(1.08);\n  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);\n  background: rgba(40, 40, 40, 0.92);\n}\n.ri-viewAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.ri-viewAnnotationTitle {\n  margin: 0;\n  color: #e2e8f0;\n  font-size: 14px;\n  font-weight: 600;\n}\n");
@@ -3156,7 +3259,7 @@ function useCameraBiasedAnchor(annotation, worldPositionsRef) {
   const scene = (0, import_fiber8.useThree)((state) => state.scene);
   const anchorNodeRef = (0, import_react12.useRef)(null);
   const baseLocalPosition = (0, import_react12.useMemo)(
-    () => new import_three14.Vector3(
+    () => new import_three15.Vector3(
       ...annotation.anchorLocalPosition ?? annotation.localPosition ?? annotation.worldPosition
     ),
     [
@@ -3165,9 +3268,9 @@ function useCameraBiasedAnchor(annotation, worldPositionsRef) {
       annotation.worldPosition
     ]
   );
-  const worldPosition = (0, import_react12.useMemo)(() => new import_three14.Vector3(), []);
-  const biasedWorldPosition = (0, import_react12.useMemo)(() => new import_three14.Vector3(), []);
-  const toCamera = (0, import_react12.useMemo)(() => new import_three14.Vector3(), []);
+  const worldPosition = (0, import_react12.useMemo)(() => new import_three15.Vector3(), []);
+  const biasedWorldPosition = (0, import_react12.useMemo)(() => new import_three15.Vector3(), []);
+  const toCamera = (0, import_react12.useMemo)(() => new import_three15.Vector3(), []);
   (0, import_react12.useEffect)(() => {
     anchorNodeRef.current = null;
   }, [annotation.anchorNodeName]);
@@ -3190,7 +3293,7 @@ function useCameraBiasedAnchor(annotation, worldPositionsRef) {
     if (worldPositionsRef) {
       let stored = worldPositionsRef.current.get(annotation.id);
       if (!stored) {
-        stored = new import_three14.Vector3();
+        stored = new import_three15.Vector3();
         worldPositionsRef.current.set(annotation.id, stored);
       }
       stored.copy(worldPosition);
@@ -3488,17 +3591,17 @@ function AnnotationsLayer({
   );
   (0, import_fiber8.useFrame)((_, delta) => {
     if (!groupRef.current) return;
-    groupRef.current.rotation.x = import_three14.MathUtils.lerp(
+    groupRef.current.rotation.x = import_three15.MathUtils.lerp(
       groupRef.current.rotation.x,
       targetRotation[0],
       1 - Math.exp(-5 * delta)
     );
-    groupRef.current.rotation.y = import_three14.MathUtils.lerp(
+    groupRef.current.rotation.y = import_three15.MathUtils.lerp(
       groupRef.current.rotation.y,
       targetRotation[1],
       1 - Math.exp(-5 * delta)
     );
-    groupRef.current.rotation.z = import_three14.MathUtils.lerp(
+    groupRef.current.rotation.z = import_three15.MathUtils.lerp(
       groupRef.current.rotation.z,
       targetRotation[2],
       1 - Math.exp(-5 * delta)
@@ -3536,7 +3639,7 @@ function AnnotationsLayer({
 // src/components/ModelViewer/MeasurementLayer.tsx
 var import_react13 = require("react");
 var import_drei5 = require("@react-three/drei");
-var import_three15 = require("three");
+var import_three16 = require("three");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var LINE_COLOR = "#22d3ee";
 var BOX_COLOR = "#facc15";
@@ -3564,8 +3667,8 @@ function DimensionsBox({ box, unit }) {
   );
   const edges = (0, import_react13.useMemo)(() => {
     const [w2, h2, d2] = box.size;
-    const geometry = new import_three15.EdgesGeometry(
-      new import_three15.BoxGeometry(w2 || 1e-4, h2 || 1e-4, d2 || 1e-4)
+    const geometry = new import_three16.EdgesGeometry(
+      new import_three16.BoxGeometry(w2 || 1e-4, h2 || 1e-4, d2 || 1e-4)
     );
     return geometry;
   }, [box.size]);
@@ -3611,7 +3714,7 @@ function MeasurementLayer({
     points.slice(1).map((point, index) => {
       const a = points[index].position;
       const b = point.position;
-      const distance = new import_three15.Vector3(...a).distanceTo(new import_three15.Vector3(...b));
+      const distance = new import_three16.Vector3(...a).distanceTo(new import_three16.Vector3(...b));
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("group", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_drei5.Line, { points: [a, b], color: LINE_COLOR, lineWidth: 2 }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MeasureLabel, { position: midpoint(a, b), children: formatMeasurement(distance, unit) })
@@ -3625,7 +3728,7 @@ function MeasurementLayer({
 var import_react14 = require("react");
 var import_xr3 = require("@react-three/xr");
 var import_fiber9 = require("@react-three/fiber");
-var import_three16 = require("three");
+var import_three17 = require("three");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var TARGET_SIZE = 1;
 var FORWARD_DISTANCE = 1;
@@ -3662,13 +3765,13 @@ var XRModelPresenter = (0, import_react14.forwardRef)(
       () => box ? computeNormalization(box, scaleMode) : null,
       [box, scaleMode]
     );
-    const placedPosition = (0, import_react14.useRef)(new import_three16.Vector3(0, 0, -FORWARD_DISTANCE));
+    const placedPosition = (0, import_react14.useRef)(new import_three17.Vector3(0, 0, -FORWARD_DISTANCE));
     const userScale = (0, import_react14.useRef)(1);
     const rotationY = (0, import_react14.useRef)(0);
     const placementMode = (0, import_react14.useRef)(true);
     const modelPlaced = (0, import_react14.useRef)(false);
-    const hitMatrix = (0, import_react14.useMemo)(() => new import_three16.Matrix4(), []);
-    const hitPosition = (0, import_react14.useRef)(new import_three16.Vector3());
+    const hitMatrix = (0, import_react14.useMemo)(() => new import_three17.Matrix4(), []);
+    const hitPosition = (0, import_react14.useRef)(new import_three17.Vector3());
     const hasHit = (0, import_react14.useRef)(false);
     const lastARState = (0, import_react14.useRef)(null);
     const gesturing = (0, import_react14.useRef)(false);
@@ -3861,7 +3964,7 @@ var XRModelPresenter_default = XRModelPresenter;
 // src/components/ModelViewer/CinematicCamera.tsx
 var import_react15 = require("react");
 var import_fiber10 = require("@react-three/fiber");
-var import_three17 = require("three");
+var import_three18 = require("three");
 var ENTER_BLEND_SECONDS = 1.2;
 function CinematicCamera({
   controlsRef,
@@ -3883,14 +3986,14 @@ function CinematicCamera({
   const curves = (0, import_react15.useMemo)(() => {
     if (!hasPath) return null;
     return {
-      position: new import_three17.CatmullRomCurve3(
-        waypoints.map((w) => new import_three17.Vector3(...w.position)),
+      position: new import_three18.CatmullRomCurve3(
+        waypoints.map((w) => new import_three18.Vector3(...w.position)),
         loop,
         "catmullrom",
         0.5
       ),
-      target: new import_three17.CatmullRomCurve3(
-        waypoints.map((w) => new import_three17.Vector3(...w.target)),
+      target: new import_three18.CatmullRomCurve3(
+        waypoints.map((w) => new import_three18.Vector3(...w.target)),
         loop,
         "catmullrom",
         0.5
@@ -3899,12 +4002,12 @@ function CinematicCamera({
   }, [signature, hasPath, loop]);
   const elapsedRef = (0, import_react15.useRef)(0);
   const enterElapsedRef = (0, import_react15.useRef)(0);
-  const enterPos = (0, import_react15.useRef)(new import_three17.Vector3());
-  const enterTarget = (0, import_react15.useRef)(new import_three17.Vector3());
+  const enterPos = (0, import_react15.useRef)(new import_three18.Vector3());
+  const enterTarget = (0, import_react15.useRef)(new import_three18.Vector3());
   const startedRef = (0, import_react15.useRef)(false);
   const orbitRef = (0, import_react15.useRef)(null);
-  const tmpPos = (0, import_react15.useMemo)(() => new import_three17.Vector3(), []);
-  const tmpTarget = (0, import_react15.useMemo)(() => new import_three17.Vector3(), []);
+  const tmpPos = (0, import_react15.useMemo)(() => new import_three18.Vector3(), []);
+  const tmpTarget = (0, import_react15.useMemo)(() => new import_three18.Vector3(), []);
   (0, import_react15.useEffect)(() => {
     if (!playing) {
       startedRef.current = false;
@@ -3920,7 +4023,7 @@ function CinematicCamera({
     if (!hasPath) {
       const scene = sceneRef.current;
       if (scene) {
-        const sphere = new import_three17.Box3().setFromObject(scene).getBoundingSphere(new import_three17.Sphere());
+        const sphere = new import_three18.Box3().setFromObject(scene).getBoundingSphere(new import_three18.Sphere());
         orbitRef.current = {
           center: sphere.center.clone(),
           radius: sphere.radius > 0 ? sphere.radius : 1
@@ -5049,7 +5152,7 @@ function findInfluencingBone(hit) {
   if (!skinIndex || !skinWeight || !position) return null;
   const localHit = mesh.worldToLocal(hit.point.clone());
   const vertices = [hit.face.a, hit.face.b, hit.face.c];
-  const vertex = new import_three18.Vector3();
+  const vertex = new import_three19.Vector3();
   let nearest = vertices[0];
   let nearestDist = Infinity;
   for (const vi of vertices) {
@@ -5099,9 +5202,9 @@ function GuidedTourCameraFollow({
   const scene = (0, import_fiber11.useThree)((state) => state.scene);
   const nodeRef = (0, import_react22.useRef)(null);
   const hasPrev = (0, import_react22.useRef)(false);
-  const live = (0, import_react22.useMemo)(() => new import_three18.Vector3(), []);
-  const prev = (0, import_react22.useMemo)(() => new import_three18.Vector3(), []);
-  const goal = (0, import_react22.useMemo)(() => new import_three18.Vector3(), []);
+  const live = (0, import_react22.useMemo)(() => new import_three19.Vector3(), []);
+  const prev = (0, import_react22.useMemo)(() => new import_three19.Vector3(), []);
+  const goal = (0, import_react22.useMemo)(() => new import_three19.Vector3(), []);
   const nodeName = annotation?.anchorNodeName;
   const localPosition = annotation?.anchorLocalPosition;
   (0, import_react22.useEffect)(() => {
@@ -5140,8 +5243,8 @@ var DEFAULT_AR_OVERLAY_STATE = {
   isModelPlaced: false
 };
 function computeMeasureBox(scene) {
-  const box = new import_three18.Box3().setFromObject(scene);
-  const size = new import_three18.Vector3();
+  const box = new import_three19.Box3().setFromObject(scene);
+  const size = new import_three19.Vector3();
   box.getSize(size);
   return {
     min: [box.min.x, box.min.y, box.min.z],
@@ -5149,11 +5252,19 @@ function computeMeasureBox(scene) {
     size: [size.x, size.y, size.z]
   };
 }
+function computeModelBounds(scene) {
+  const box = new import_three19.Box3().setFromObject(scene);
+  if (box.isEmpty()) return null;
+  const center = box.getCenter(new import_three19.Vector3());
+  const radius = box.getSize(new import_three19.Vector3()).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 import_three18.PerspectiveCamera)) return;
-  const box = new import_three18.Box3().setFromObject(scene);
-  const size = box.getSize(new import_three18.Vector3()).length();
+  if (!(camera instanceof import_three19.PerspectiveCamera)) return;
+  const box = new import_three19.Box3().setFromObject(scene);
+  const size = box.getSize(new import_three19.Vector3()).length();
   if (!Number.isFinite(size) || size <= 0) return;
   camera.near = size / 100;
   camera.far = size * 100;
@@ -5306,8 +5417,8 @@ function ModelViewer({
     if (!controls || initialCameraStateRef.current) {
       return;
     }
-    const position = controls.getPosition(new import_three18.Vector3());
-    const target = controls.getTarget(new import_three18.Vector3());
+    const position = controls.getPosition(new import_three19.Vector3());
+    const target = controls.getTarget(new import_three19.Vector3());
     initialCameraStateRef.current = {
       position: [position.x, position.y, position.z],
       target: [target.x, target.y, target.z]
@@ -5318,6 +5429,7 @@ function ModelViewer({
   const [measurePoints, setMeasurePoints] = (0, import_react22.useState)([]);
   const [showDimensions, setShowDimensions] = (0, import_react22.useState)(false);
   const [measureBox, setMeasureBox] = (0, import_react22.useState)(null);
+  const [modelBounds, setModelBounds] = (0, import_react22.useState)(null);
   const measureModeRef = (0, import_react22.useRef)(false);
   measureModeRef.current = measureMode;
   const measurePointCounter = (0, import_react22.useRef)(0);
@@ -5561,7 +5673,7 @@ function ModelViewer({
       const controls = controlsRef.current;
       const scene = sceneRef.current;
       if (!controls) return;
-      const target = new import_three18.Vector3();
+      const target = new import_three19.Vector3();
       const livePosition = annotationWorldPositionsRef.current.get(
         annotation.id
       );
@@ -5579,15 +5691,15 @@ function ModelViewer({
       controls.smoothTime = 0.6;
       const storedNormal = annotation.worldNormal;
       if (scene) {
-        const box = new import_three18.Box3().setFromObject(scene);
-        const modelCenter = new import_three18.Vector3();
+        const box = new import_three19.Box3().setFromObject(scene);
+        const modelCenter = new import_three19.Vector3();
         box.getCenter(modelCenter);
-        const modelSize = new import_three18.Vector3();
+        const modelSize = new import_three19.Vector3();
         box.getSize(modelSize);
         const modelRadius = modelSize.length() * 0.2;
         let outwardDir;
         if (storedNormal) {
-          outwardDir = new import_three18.Vector3(
+          outwardDir = new import_three19.Vector3(
             storedNormal[0],
             storedNormal[1],
             storedNormal[2]
@@ -5885,8 +5997,8 @@ function ModelViewer({
       };
       if (canvasContainer && cameraControls && object) {
         const canvasRect = canvasContainer.getBoundingClientRect();
-        const objectCenter = new import_three18.Vector3();
-        new import_three18.Box3().setFromObject(object).getCenter(objectCenter);
+        const objectCenter = new import_three19.Vector3();
+        new import_three19.Box3().setFromObject(object).getCenter(objectCenter);
         objectCenter.project(cameraControls);
         const projectedX = (objectCenter.x + 1) / 2 * canvasRect.width + (canvasRect.left - rect.left);
         const projectedY = (1 - objectCenter.y) / 2 * canvasRect.height + (canvasRect.top - rect.top);
@@ -6110,14 +6222,14 @@ function ModelViewer({
       }
       try {
         if (flyIn) {
-          const target = controls.getTarget(new import_three18.Vector3());
-          const position = controls.getPosition(new import_three18.Vector3());
+          const target = controls.getTarget(new import_three19.Vector3());
+          const position = controls.getPosition(new import_three19.Vector3());
           const direction = position.clone().sub(target);
           if (direction.lengthSq() < 1e-6) {
             direction.set(0, 0, 1);
           }
           direction.normalize();
-          const sphere = new import_three18.Box3().setFromObject(scene).getBoundingSphere(new import_three18.Sphere());
+          const sphere = new import_three19.Box3().setFromObject(scene).getBoundingSphere(new import_three19.Sphere());
           const farDistance = Math.max(sphere.radius * 10, 20);
           const farPosition = target.clone().add(direction.multiplyScalar(farDistance));
           await controls.setLookAt(
@@ -6346,6 +6458,7 @@ function ModelViewer({
     (scene) => {
       sceneRef.current = scene;
       setMeasureBox(computeMeasureBox(scene));
+      setModelBounds(computeModelBounds(scene));
       setModelLoaded(true);
       setModelLoadFailed(false);
       setMismatchDismissed(false);
@@ -6408,8 +6521,8 @@ function ModelViewer({
       const rect = canvas.getBoundingClientRect();
       const ndcX = (event.clientX - rect.left) / rect.width * 2 - 1;
       const ndcY = -((event.clientY - rect.top) / rect.height) * 2 + 1;
-      const raycaster = new import_three18.Raycaster();
-      raycaster.setFromCamera(new import_three18.Vector2(ndcX, ndcY), cam);
+      const raycaster = new import_three19.Raycaster();
+      raycaster.setFromCamera(new import_three19.Vector2(ndcX, ndcY), cam);
       const hits = raycaster.intersectObject(scene, true);
       if (hits.length === 0) return;
       const { point } = hits[0];
@@ -6505,8 +6618,8 @@ function ModelViewer({
       const rect = canvas.getBoundingClientRect();
       const ndcX = (e.clientX - rect.left) / rect.width * 2 - 1;
       const ndcY = -((e.clientY - rect.top) / rect.height) * 2 + 1;
-      const raycaster = new import_three18.Raycaster();
-      raycaster.setFromCamera(new import_three18.Vector2(ndcX, ndcY), cam);
+      const raycaster = new import_three19.Raycaster();
+      raycaster.setFromCamera(new import_three19.Vector2(ndcX, ndcY), cam);
       const hits = raycaster.intersectObject(scene, true);
       if (hits.length === 0) return;
       const hit = hits[0];
@@ -6701,7 +6814,8 @@ function ModelViewer({
                       shadowConfig: resolvedSceneConfig.shadows,
                       shadowsEnabled: shadows,
                       environmentRotation: resolvedSceneConfig.environment.rotation,
-                      environmentConfig: resolvedSceneConfig.environment
+                      environmentConfig: resolvedSceneConfig.environment,
+                      modelBounds
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -7269,7 +7383,7 @@ styleInject('.bb-root {\n  --bb-font-family:\n    Inter,\n    "Segoe UI",\n    H
 
 // src/hooks/useViewerCamera.ts
 var import_react23 = require("react");
-var import_three19 = require("three");
+var import_three20 = require("three");
 
 // src/utils/resolveBindingKey.ts
 function resolveBindingKey(objectBindings, objectId) {
@@ -7293,8 +7407,8 @@ function toTuple(vector) {
   return [vector.x, vector.y, vector.z];
 }
 function buildCameraState(camera, controls) {
-  const position = new import_three19.Vector3();
-  const target = new import_three19.Vector3();
+  const position = new import_three20.Vector3();
+  const target = new import_three20.Vector3();
   controls.getPosition(position);
   controls.getTarget(target);
   return {
@@ -13518,8 +13632,6 @@ function CameraPositionPanel({
 var import_react36 = require("react");
 
 // src/components/BindingBuilder/utils/bindingFactory.ts
-var import_three_stdlib4 = require("three-stdlib");
-var import_three20 = require("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();
 }
@@ -13585,51 +13697,15 @@ function buildBindingsFromNodes(nodeNames) {
     nodeNames.map((nodeName) => [nodeName, createDefaultBinding(nodeName)])
   );
 }
-function collectModelMetadata(modelUrl) {
-  const loader = new import_three_stdlib4.GLTFLoader();
-  let renderer = null;
-  if (typeof document !== "undefined") {
-    try {
-      renderer = new import_three20.WebGLRenderer({
-        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
@@ -14175,6 +14251,8 @@ function BindingBuilder({ licenseKey }) {
   const uploadedModelRef = (0, import_react38.useRef)(null);
   const previewDragDepthRef = (0, import_react38.useRef)(0);
   const loadRequestRef = (0, import_react38.useRef)(0);
+  const pendingLoadRef = (0, import_react38.useRef)(null);
+  const loadedSceneRef = (0, import_react38.useRef)(null);
   const {
     cameraState,
     resetView,
@@ -14343,42 +14421,76 @@ function BindingBuilder({ licenseKey }) {
       });
     }
   };
-  const generateBindingsForModel = async (nextModelUrl, nextModelName) => {
+  const applyBindingsFromScene = (0, import_react38.useCallback)(
+    (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 = (0, import_react38.useCallback)(
+    (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 = (0, import_react38.useCallback)((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 = (0, import_react38.useCallback)(
+    (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;
@@ -14408,6 +14520,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);
@@ -15206,7 +15320,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,
@@ -15290,7 +15406,7 @@ var import_drei6 = require("@react-three/drei");
 var import_fiber12 = require("@react-three/fiber");
 var import_fiber13 = require("@react-three/fiber");
 var import_three21 = require("three");
-var import_three_stdlib5 = require("three-stdlib");
+var import_three_stdlib4 = require("three-stdlib");
 
 // src/styles/SimpleModelViewer.css
 styleInject('.smv-root {\n  --smv-panel-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --smv-panel-bg: #141824;\n  --smv-panel-bg-strong: #1a1f2e;\n  --smv-panel-bg-strong-hover: #252b3b;\n  --smv-panel-border: rgba(255, 255, 255, 0.06);\n  --smv-panel-border-strong: rgba(255, 255, 255, 0.08);\n  --smv-panel-border-active: rgba(255, 255, 255, 0.18);\n  --smv-panel-shadow-left: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --smv-panel-shadow-right: -4px 0 24px rgba(0, 0, 0, 0.35);\n  --smv-panel-text: #f1f5f9;\n  --smv-panel-text-emphasis: #ffffff;\n  --smv-panel-text-muted: #94a3b8;\n  --smv-panel-text-subtle: #64748b;\n  --smv-panel-surface: rgba(255, 255, 255, 0.05);\n  --smv-panel-surface-hover: rgba(255, 255, 255, 0.1);\n  --smv-panel-surface-soft: rgba(255, 255, 255, 0.04);\n  --smv-panel-accent: #3b82f6;\n  --smv-panel-accent-contrast: #ffffff;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-synthesis: none;\n}\n.smv-canvasArea {\n  flex: 1;\n  position: relative;\n  min-width: 0;\n}\n.smv-upload-input {\n  display: none;\n}\n.smv-upload-toolbar {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  z-index: 120;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  max-width: calc(100% - 32px);\n  padding: 5px 6px;\n  border: 1px solid var(--smv-panel-border-strong);\n  border-radius: 10px;\n  background: rgba(20, 24, 36, 0.88);\n  color: var(--smv-panel-text);\n  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);\n  backdrop-filter: blur(14px);\n  transform: translateX(-50%);\n}\n.smv-upload-toolbar__name {\n  max-width: 260px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--smv-panel-text-muted);\n  font-size: 12px;\n  font-weight: 500;\n}\n.smv-upload-toolbar__button {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  min-height: 34px;\n  padding: 0 14px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 10px;\n  background: rgba(59, 130, 246, 0.18);\n  color: var(--smv-panel-text-emphasis);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.smv-upload-toolbar__button--ghost {\n  background: var(--smv-panel-surface);\n  color: var(--smv-panel-text-muted);\n}\n.smv-upload-empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 24px;\n}\n.smv-upload-empty-state__card {\n  width: min(440px, 100%);\n  padding: 28px;\n  border: 1px dashed rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: var(--smv-panel-text);\n  text-align: center;\n  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.28);\n  backdrop-filter: blur(14px);\n}\n.smv-upload-empty-state__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 56px;\n  height: 56px;\n  margin-bottom: 18px;\n  border-radius: 10px;\n  background: rgba(59, 130, 246, 0.18);\n  color: #bfdbfe;\n}\n.smv-upload-empty-state__title {\n  margin: 0 0 10px;\n  color: var(--smv-panel-text-emphasis);\n  font-size: 24px;\n  line-height: 1.15;\n}\n.smv-upload-empty-state__body {\n  margin: 0 0 18px;\n  color: var(--smv-panel-text-muted);\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.6;\n}\n.smv-upload-empty-state__body code {\n  color: var(--smv-panel-text-emphasis);\n  font-family: var(--smv-panel-font-family);\n}\n.smv-upload-empty-state__button {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 40px;\n  padding: 0 18px;\n  border: none;\n  border-radius: 8px;\n  background: #3b82f6;\n  color: #eff6ff;\n  font-size: 13px;\n  font-weight: 700;\n  cursor: pointer;\n}\n.smv-upload-drop-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 130;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: rgba(8, 12, 20, 0.48);\n  backdrop-filter: blur(4px);\n}\n.smv-upload-drop-overlay__card {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 20px;\n  border: 1px dashed rgba(191, 219, 254, 0.75);\n  border-radius: 10px;\n  background: rgba(30, 41, 59, 0.92);\n  color: #dbeafe;\n  font-size: 14px;\n  font-weight: 700;\n  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);\n}\n.smv-canvasArea .bb-loadingOverlay {\n  position: absolute;\n  inset: 0;\n  z-index: 110;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 24px;\n  text-align: center;\n  border-radius: 14px;\n  background: rgba(15, 23, 42, 0.46);\n  backdrop-filter: blur(1px);\n}\n.smv-canvasArea .bb-loadingSpinner {\n  width: 40px;\n  height: 40px;\n  border-radius: 999px;\n  border: 3px solid rgba(226, 232, 240, 0.24);\n  border-top-color: #93c5fd;\n  animation: bb-spin 0.8s linear infinite;\n}\n.smv-canvasArea .bb-loadingMessage {\n  max-width: 320px;\n  color: #f7f8fa;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.5;\n}\n@keyframes bb-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.right-panel-wrapper {\n  height: 100%;\n  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: visible;\n}\n.right-panel-wrapper--open {\n  width: 300px;\n  flex-shrink: 0;\n}\n.right-panel-wrapper--closed {\n  width: 0;\n  flex-shrink: 0;\n}\n.left-panel-wrapper {\n  height: 100%;\n  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: visible;\n  order: -1;\n}\n.left-panel-wrapper--open {\n  width: 280px;\n  flex-shrink: 0;\n}\n.left-panel-wrapper--closed {\n  width: 0;\n  flex-shrink: 0;\n}\n.side-panel__open-btn.side-panel__open-btn--left {\n  left: 12px;\n  right: auto;\n}\n.side-panel.side-panel--left {\n  left: 0;\n  right: auto;\n  width: 280px;\n  transform: translateX(-100%);\n  border-left: none;\n  border-right: 1px solid var(--smv-panel-border);\n  box-shadow: var(--smv-panel-shadow-left);\n}\n.side-panel.side-panel--open-left {\n  transform: translateX(0);\n}\n.side-panel.side-panel--closed-left {\n  transform: translateX(-100%);\n}\n.env-controls {\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  flex: 1;\n}\n.env-section {\n  border-bottom: 1px solid var(--smv-panel-border-strong);\n}\n.env-section__header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 9px 14px;\n  border: none;\n  background: var(--smv-panel-surface-soft);\n  color: var(--smv-panel-text-muted);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n.env-section__chevron {\n  transition: transform 0.15s;\n}\n.env-section__chevron--collapsed {\n  transform: rotate(-90deg);\n}\n.env-section__body {\n  display: flex;\n  flex-direction: column;\n}\n.env-row {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  min-height: 32px;\n  border-bottom: 1px solid var(--smv-panel-surface);\n}\n.env-row__label {\n  flex: 0 0 42%;\n  padding: 0 0 0 14px;\n  font-size: 11.5px;\n  font-weight: 500;\n  color: var(--smv-panel-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.env-row__value {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  padding: 5px 10px 5px 8px;\n  min-width: 0;\n}\n.env-row__value--slider {\n  gap: 6px;\n}\n.env-checkbox-btn {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n}\n.env-checkbox {\n  width: 15px;\n  height: 15px;\n  border-radius: 3px;\n  border: 1.5px solid var(--smv-panel-border-active);\n  background: var(--smv-panel-surface-soft);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, border-color 0.15s;\n}\n.env-checkbox--checked {\n  background: var(--smv-panel-accent);\n  border-color: var(--smv-panel-accent);\n}\n.env-select {\n  width: 100%;\n  padding: 5px 8px;\n  border-radius: 4px;\n  border: none;\n  background: var(--smv-panel-surface-hover);\n  color: var(--smv-panel-text);\n  font-size: 11.5px;\n  outline: none;\n  box-sizing: border-box;\n  text-transform: capitalize;\n}\n.env-color-swatch {\n  position: relative;\n  width: 100%;\n  height: 22px;\n  border-radius: 4px;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  cursor: pointer;\n}\n.env-color-swatch__hex {\n  font-size: 10.5px;\n  font-weight: 700;\n  color: #0f172a;\n  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);\n  pointer-events: none;\n  text-transform: uppercase;\n}\n.env-color-swatch__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border: none;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.env-slider {\n  flex: 1;\n  accent-color: var(--smv-panel-accent);\n  cursor: pointer;\n  min-width: 0;\n}\n.env-slider__value {\n  flex-shrink: 0;\n  min-width: 32px;\n  padding: 2px 5px;\n  border-radius: 4px;\n  background: var(--smv-panel-surface-hover);\n  color: var(--smv-panel-accent);\n  font-size: 10.5px;\n  font-weight: 600;\n  text-align: center;\n}\n.side-panel__open-btn {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 7px 13px;\n  border-radius: 7px;\n  border: 1px solid var(--smv-panel-border-strong);\n  background: var(--smv-panel-bg-strong);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--smv-panel-text);\n  z-index: 190;\n  transition: background 0.15s;\n}\n.side-panel__open-btn:hover {\n  background: var(--smv-panel-bg-strong-hover);\n}\n.side-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 300px;\n  height: 100%;\n  background: var(--smv-panel-bg);\n  display: flex;\n  flex-direction: column;\n  font-family: var(--smv-panel-font-family);\n  transform: translateX(100%);\n  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 200;\n  border-left: 1px solid var(--smv-panel-border);\n  box-shadow: var(--smv-panel-shadow-right);\n}\n.side-panel--open {\n  transform: translateX(0);\n}\n.side-panel--closed {\n  transform: translateX(100%);\n}\n.side-panel__header {\n  padding: 24px 20px 16px 20px;\n  border-bottom: 1px solid var(--smv-panel-border-strong);\n}\n.side-panel__header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n}\n.side-panel__eyebrow {\n  font-size: 15px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  color: var(--smv-panel-text-subtle);\n  text-transform: uppercase;\n}\n.side-panel__title {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--smv-panel-text);\n  margin: 0;\n  line-height: 1.2;\n}\n.side-panel__close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border-radius: 8px;\n  border: 1px solid var(--smv-panel-border-strong);\n  background: var(--smv-panel-surface);\n  cursor: pointer;\n  color: var(--smv-panel-text-muted);\n  transition: background 0.15s, color 0.15s;\n  flex-shrink: 0;\n}\n.side-panel__close-btn:hover {\n  background: var(--smv-panel-surface-hover);\n  color: var(--smv-panel-text);\n}\n.side-panel__search-wrap {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--smv-panel-border-strong);\n}\n.side-panel__search {\n  width: 100%;\n  padding: 10px 14px;\n  border-radius: 10px;\n  border: 1px solid var(--smv-panel-border-strong);\n  background: var(--smv-panel-surface);\n  color: var(--smv-panel-text);\n  font-size: 13px;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 0.15s, background 0.15s;\n}\n.side-panel__search::placeholder {\n  color: var(--smv-panel-text-subtle);\n}\n.side-panel__search:focus {\n  border-color: var(--smv-panel-border-active);\n  background: var(--smv-panel-surface-hover);\n}\n.side-panel__list {\n  display: flex;\n  flex-direction: column;\n  padding: 10px 0;\n  overflow-y: auto;\n  flex: 1;\n}\n.side-panel__list::-webkit-scrollbar {\n  width: 4px;\n}\n.side-panel__list::-webkit-scrollbar-track {\n  background: transparent;\n}\n.side-panel__list::-webkit-scrollbar-thumb {\n  background: var(--smv-panel-surface-hover);\n  border-radius: 4px;\n}\n.side-panel__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 20px;\n  cursor: pointer;\n  transition: background 0.12s;\n  border-bottom: 1px solid var(--smv-panel-surface-soft);\n}\n.side-panel__row:hover,\n.side-panel__row--hovered {\n  background: var(--smv-panel-surface);\n}\n.side-panel__label {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--smv-panel-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex: 1;\n}\n.side-panel__label--hovered {\n  color: var(--smv-panel-text-emphasis);\n}\n.side-panel__vis-btn {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  margin-left: 10px;\n}\n.side-panel__checkbox {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  border: 1.5px solid var(--smv-panel-border-active);\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, border-color 0.15s;\n}\n.side-panel__checkbox--checked {\n  background: var(--smv-panel-accent);\n  border-color: var(--smv-panel-accent);\n}\n@media (max-width: 900px) {\n  .smv-upload-toolbar {\n    top: 56px;\n    gap: 8px;\n    max-width: calc(100% - 24px);\n    padding: 8px 10px;\n  }\n  .smv-upload-toolbar__name {\n    max-width: 140px;\n  }\n  .right-panel-wrapper--open,\n  .left-panel-wrapper--open {\n    width: 0;\n  }\n  .side-panel,\n  .side-panel.side-panel--left {\n    width: min(300px, 85vw);\n  }\n}\n');
@@ -15359,7 +15475,7 @@ function InnerModel({
   const invalidate = (0, import_fiber12.useThree)((state) => state.invalidate);
   const [hoveredKey, setHoveredKey] = (0, import_react39.useState)(null);
   const scene = (0, import_react39.useMemo)(
-    () => import_three_stdlib5.SkeletonUtils.clone(rawScene),
+    () => import_three_stdlib4.SkeletonUtils.clone(rawScene),
     [rawScene]
   );
   const meshMap = (0, import_react39.useMemo)(() => {