@nice2dev/ui-3d 1.3.14 → 1.3.16

package/dist/cjs/model/NiceXRPreview.js

@@ -1,323 +1,400 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-var THREE = require('three');
-var i18n = require('../core/i18n.js');
-
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
+const THREE = require("three");
+const i18n = require("../core/i18n.js");
 function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
         });
+      }
     }
-    n.default = e;
-    return Object.freeze(n);
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
-
-var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
-
-/* ── Hook ── */
+const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
 function useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd) {
-    const [isSupported, setIsSupported] = React.useState(false);
-    const [isSessionActive, setIsSessionActive] = React.useState(false);
-    const [mode, setMode] = React.useState('vr');
-    const [controllers, setControllers] = React.useState([]);
-    const [teleportEnabled, setTeleportEnabled] = React.useState(true);
-    const [hitTestResult, setHitTestResult] = React.useState(null);
-    const controllerGripsRef = React.useRef([]);
-    const controllerRaysRef = React.useRef([]);
-    const teleportMarkerRef = React.useRef(null);
-    const hitTestSourceRef = React.useRef(null);
-    const cameraGroupRef = React.useRef(new THREE__namespace.Group());
-    // Check WebXR support
-    React.useEffect(() => {
-        if ('xr' in navigator) {
-            const xr = navigator.xr;
-            xr.isSessionSupported('immersive-vr')
-                .then((vr) => {
-                if (vr) {
-                    setIsSupported(true);
-                }
-                else {
-                    xr.isSessionSupported('immersive-ar').then((ar) => {
-                        setIsSupported(ar);
-                    });
-                }
-            })
-                .catch(() => setIsSupported(false));
+  const [isSupported, setIsSupported] = React.useState(false);
+  const [isSessionActive, setIsSessionActive] = React.useState(false);
+  const [mode, setMode] = React.useState("vr");
+  const [controllers, setControllers] = React.useState([]);
+  const [teleportEnabled, setTeleportEnabled] = React.useState(true);
+  const [hitTestResult, setHitTestResult] = React.useState(null);
+  const controllerGripsRef = React.useRef([]);
+  const controllerRaysRef = React.useRef([]);
+  const teleportMarkerRef = React.useRef(null);
+  const hitTestSourceRef = React.useRef(null);
+  const cameraGroupRef = React.useRef(new THREE__namespace.Group());
+  React.useEffect(() => {
+    if ("xr" in navigator) {
+      const xr = navigator.xr;
+      xr.isSessionSupported("immersive-vr").then((vr) => {
+        if (vr) {
+          setIsSupported(true);
+        } else {
+          xr.isSessionSupported("immersive-ar").then((ar) => {
+            setIsSupported(ar);
+          });
         }
-    }, []);
-    // Setup camera rig
-    React.useEffect(() => {
-        if (!scene || !camera) {
-            return;
-        }
-        const rig = cameraGroupRef.current;
-        rig.name = '__xr_camera_rig__';
-        rig.add(camera);
-        scene.add(rig);
-        return () => {
-            rig.remove(camera);
-            scene.remove(rig);
-        };
-    }, [scene, camera]);
-    const setupControllers = React.useCallback(() => {
-        if (!renderer || !scene) {
-            return;
+      }).catch(() => setIsSupported(false));
+    }
+  }, []);
+  React.useEffect(() => {
+    if (!scene || !camera) {
+      return;
+    }
+    const rig = cameraGroupRef.current;
+    rig.name = "__xr_camera_rig__";
+    rig.add(camera);
+    scene.add(rig);
+    return () => {
+      rig.remove(camera);
+      scene.remove(rig);
+    };
+  }, [scene, camera]);
+  const setupControllers = React.useCallback(() => {
+    if (!renderer || !scene) {
+      return;
+    }
+    for (let i = 0; i < 2; i++) {
+      const controller = renderer.xr.getController(i);
+      const grip = renderer.xr.getControllerGrip(i);
+      const lineGeo = new THREE__namespace.BufferGeometry().setFromPoints([
+        new THREE__namespace.Vector3(0, 0, 0),
+        new THREE__namespace.Vector3(0, 0, -3)
+      ]);
+      const ray = new THREE__namespace.Line(lineGeo, new THREE__namespace.LineBasicMaterial({ color: 65535 }));
+      controller.add(ray);
+      controllerRaysRef.current[i] = ray;
+      const gripGeo = new THREE__namespace.CylinderGeometry(0.015, 0.015, 0.15, 8);
+      gripGeo.rotateX(-Math.PI / 2);
+      grip.add(new THREE__namespace.Mesh(gripGeo, new THREE__namespace.MeshStandardMaterial({ color: 4473924 })));
+      cameraGroupRef.current.add(controller);
+      cameraGroupRef.current.add(grip);
+      controllerGripsRef.current[i] = grip;
+      controller.addEventListener("selectstart", () => {
+        setControllers((prev) => {
+          const copy = [...prev];
+          if (copy[i]) {
+            copy[i] = { ...copy[i], isSelecting: true };
+          }
+          return copy;
+        });
+      });
+      controller.addEventListener("selectend", () => {
+        setControllers((prev) => {
+          const copy = [...prev];
+          if (copy[i]) {
+            copy[i] = { ...copy[i], isSelecting: false };
+          }
+          return copy;
+        });
+        if (teleportEnabled && teleportMarkerRef.current?.visible) {
+          cameraGroupRef.current.position.copy(teleportMarkerRef.current.position);
         }
-        for (let i = 0; i < 2; i++) {
+      });
+      controller.addEventListener("squeezestart", () => {
+        setControllers((prev) => {
+          const copy = [...prev];
+          if (copy[i]) {
+            copy[i] = { ...copy[i], isSqueezing: true };
+          }
+          return copy;
+        });
+      });
+      controller.addEventListener("squeezeend", () => {
+        setControllers((prev) => {
+          const copy = [...prev];
+          if (copy[i]) {
+            copy[i] = { ...copy[i], isSqueezing: false };
+          }
+          return copy;
+        });
+      });
+    }
+    const marker = new THREE__namespace.Mesh(
+      new THREE__namespace.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2),
+      new THREE__namespace.MeshBasicMaterial({ color: 65280, side: THREE__namespace.DoubleSide })
+    );
+    marker.visible = false;
+    scene.add(marker);
+    teleportMarkerRef.current = marker;
+    setControllers([
+      {
+        hand: "left",
+        position: new THREE__namespace.Vector3(),
+        rotation: new THREE__namespace.Quaternion(),
+        isSelecting: false,
+        isSqueezing: false,
+        gamepad: null
+      },
+      {
+        hand: "right",
+        position: new THREE__namespace.Vector3(),
+        rotation: new THREE__namespace.Quaternion(),
+        isSelecting: false,
+        isSqueezing: false,
+        gamepad: null
+      }
+    ]);
+  }, [renderer, scene, teleportEnabled]);
+  const startSession = React.useCallback(async () => {
+    if (!renderer || !isSupported) {
+      return;
+    }
+    const xr = navigator.xr;
+    const sessionType = mode === "vr" ? "immersive-vr" : "immersive-ar";
+    const features = mode === "vr" ? ["local-floor", "bounded-floor"] : ["hit-test", "dom-overlay", "local-floor"];
+    try {
+      const session = await xr.requestSession(sessionType, {
+        optionalFeatures: features
+      });
+      renderer.xr.enabled = true;
+      await renderer.xr.setSession(session);
+      setupControllers();
+      setIsSessionActive(true);
+      onSessionStart?.();
+      if (mode === "ar") {
+        const refSpace = await session.requestReferenceSpace("viewer");
+        const hitTestSource = await session.requestHitTestSource({ space: refSpace });
+        hitTestSourceRef.current = hitTestSource ?? null;
+      }
+      session.addEventListener("end", () => {
+        renderer.xr.enabled = false;
+        setIsSessionActive(false);
+        hitTestSourceRef.current = null;
+        onSessionEnd?.();
+      });
+      renderer.xr.addEventListener("sessionstart", () => {
+        renderer.setAnimationLoop((_time, frame) => {
+          for (let i = 0; i < 2; i++) {
             const controller = renderer.xr.getController(i);
-            const grip = renderer.xr.getControllerGrip(i);
-            // Controller ray
-            const lineGeo = new THREE__namespace.BufferGeometry().setFromPoints([
-                new THREE__namespace.Vector3(0, 0, 0),
-                new THREE__namespace.Vector3(0, 0, -3),
-            ]);
-            const ray = new THREE__namespace.Line(lineGeo, new THREE__namespace.LineBasicMaterial({ color: 0x00ffff }));
-            controller.add(ray);
-            controllerRaysRef.current[i] = ray;
-            // Grip model (simple cylinder)
-            const gripGeo = new THREE__namespace.CylinderGeometry(0.015, 0.015, 0.15, 8);
-            gripGeo.rotateX(-Math.PI / 2);
-            grip.add(new THREE__namespace.Mesh(gripGeo, new THREE__namespace.MeshStandardMaterial({ color: 0x444444 })));
-            cameraGroupRef.current.add(controller);
-            cameraGroupRef.current.add(grip);
-            controllerGripsRef.current[i] = grip;
-            // Events
-            controller.addEventListener('selectstart', () => {
-                setControllers((prev) => {
-                    const copy = [...prev];
-                    if (copy[i]) {
-                        copy[i] = { ...copy[i], isSelecting: true };
-                    }
-                    return copy;
-                });
+            setControllers((prev) => {
+              const copy = [...prev];
+              if (copy[i]) {
+                copy[i] = {
+                  ...copy[i],
+                  position: controller.position.clone(),
+                  rotation: controller.quaternion.clone(),
+                  gamepad: session.inputSources[i]?.gamepad ?? null
+                };
+              }
+              return copy;
             });
-            controller.addEventListener('selectend', () => {
-                var _a;
-                setControllers((prev) => {
-                    const copy = [...prev];
-                    if (copy[i]) {
-                        copy[i] = { ...copy[i], isSelecting: false };
-                    }
-                    return copy;
-                });
-                // Teleport on select release
-                if (teleportEnabled && ((_a = teleportMarkerRef.current) === null || _a === void 0 ? void 0 : _a.visible)) {
-                    cameraGroupRef.current.position.copy(teleportMarkerRef.current.position);
+            if (teleportEnabled && controllerRaysRef.current[i]) {
+              const raycaster = new THREE__namespace.Raycaster();
+              const tempMatrix = new THREE__namespace.Matrix4().identity().extractRotation(controller.matrixWorld);
+              raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
+              raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);
+              if (scene) {
+                const floorMeshes = scene.children.filter(
+                  (c) => c instanceof THREE__namespace.Mesh && c.name !== "__xr_camera_rig__"
+                );
+                const intersects = raycaster.intersectObjects(floorMeshes);
+                if (intersects.length > 0 && teleportMarkerRef.current) {
+                  teleportMarkerRef.current.position.copy(intersects[0].point);
+                  teleportMarkerRef.current.visible = true;
+                } else if (teleportMarkerRef.current) {
+                  teleportMarkerRef.current.visible = false;
                 }
-            });
-            controller.addEventListener('squeezestart', () => {
-                setControllers((prev) => {
-                    const copy = [...prev];
-                    if (copy[i]) {
-                        copy[i] = { ...copy[i], isSqueezing: true };
-                    }
-                    return copy;
-                });
-            });
-            controller.addEventListener('squeezeend', () => {
-                setControllers((prev) => {
-                    const copy = [...prev];
-                    if (copy[i]) {
-                        copy[i] = { ...copy[i], isSqueezing: false };
-                    }
-                    return copy;
-                });
-            });
-        }
-        // Teleport marker
-        const marker = new THREE__namespace.Mesh(new THREE__namespace.RingGeometry(0.15, 0.2, 32).rotateX(-Math.PI / 2), new THREE__namespace.MeshBasicMaterial({ color: 0x00ff00, side: THREE__namespace.DoubleSide }));
-        marker.visible = false;
-        scene.add(marker);
-        teleportMarkerRef.current = marker;
-        // Initial controller states
-        setControllers([
-            {
-                hand: 'left',
-                position: new THREE__namespace.Vector3(),
-                rotation: new THREE__namespace.Quaternion(),
-                isSelecting: false,
-                isSqueezing: false,
-                gamepad: null,
-            },
-            {
-                hand: 'right',
-                position: new THREE__namespace.Vector3(),
-                rotation: new THREE__namespace.Quaternion(),
-                isSelecting: false,
-                isSqueezing: false,
-                gamepad: null,
-            },
-        ]);
-    }, [renderer, scene, teleportEnabled]);
-    const startSession = React.useCallback(async () => {
-        if (!renderer || !isSupported) {
-            return;
-        }
-        const xr = navigator.xr;
-        const sessionType = mode === 'vr' ? 'immersive-vr' : 'immersive-ar';
-        const features = mode === 'vr' ? ['local-floor', 'bounded-floor'] : ['hit-test', 'dom-overlay', 'local-floor'];
-        try {
-            const session = await xr.requestSession(sessionType, {
-                optionalFeatures: features,
-            });
-            renderer.xr.enabled = true;
-            await renderer.xr.setSession(session);
-            setupControllers();
-            setIsSessionActive(true);
-            onSessionStart === null || onSessionStart === void 0 ? void 0 : onSessionStart();
-            // AR hit-test setup
-            if (mode === 'ar') {
-                const refSpace = await session.requestReferenceSpace('viewer');
-                const hitTestSource = await session.requestHitTestSource({ space: refSpace });
-                hitTestSourceRef.current = hitTestSource !== null && hitTestSource !== void 0 ? hitTestSource : null;
+              }
             }
-            session.addEventListener('end', () => {
-                renderer.xr.enabled = false;
-                setIsSessionActive(false);
-                hitTestSourceRef.current = null;
-                onSessionEnd === null || onSessionEnd === void 0 ? void 0 : onSessionEnd();
-            });
-            // XR render loop for controller updates
-            renderer.xr.addEventListener('sessionstart', () => {
-                renderer.setAnimationLoop((_time, frame) => {
-                    // Update controller positions
-                    for (let i = 0; i < 2; i++) {
-                        const controller = renderer.xr.getController(i);
-                        setControllers((prev) => {
-                            var _a, _b;
-                            const copy = [...prev];
-                            if (copy[i]) {
-                                copy[i] = {
-                                    ...copy[i],
-                                    position: controller.position.clone(),
-                                    rotation: controller.quaternion.clone(),
-                                    gamepad: (_b = (_a = session.inputSources[i]) === null || _a === void 0 ? void 0 : _a.gamepad) !== null && _b !== void 0 ? _b : null,
-                                };
-                            }
-                            return copy;
-                        });
-                        // Teleport aiming
-                        if (teleportEnabled && controllerRaysRef.current[i]) {
-                            const raycaster = new THREE__namespace.Raycaster();
-                            const tempMatrix = new THREE__namespace.Matrix4()
-                                .identity()
-                                .extractRotation(controller.matrixWorld);
-                            raycaster.ray.origin.setFromMatrixPosition(controller.matrixWorld);
-                            raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);
-                            if (scene) {
-                                const floorMeshes = scene.children.filter((c) => c instanceof THREE__namespace.Mesh && c.name !== '__xr_camera_rig__');
-                                const intersects = raycaster.intersectObjects(floorMeshes);
-                                if (intersects.length > 0 && teleportMarkerRef.current) {
-                                    teleportMarkerRef.current.position.copy(intersects[0].point);
-                                    teleportMarkerRef.current.visible = true;
-                                }
-                                else if (teleportMarkerRef.current) {
-                                    teleportMarkerRef.current.visible = false;
-                                }
-                            }
-                        }
-                    }
-                    // AR hit-test
-                    if (mode === 'ar' && frame && hitTestSourceRef.current) {
-                        const results = frame.getHitTestResults(hitTestSourceRef.current);
-                        if (results.length > 0) {
-                            const refSpace = renderer.xr.getReferenceSpace();
-                            if (refSpace) {
-                                const pose = results[0].getPose(refSpace);
-                                if (pose) {
-                                    setHitTestResult(new THREE__namespace.Vector3(pose.transform.position.x, pose.transform.position.y, pose.transform.position.z));
-                                }
-                            }
-                        }
-                    }
-                    renderer.render(scene, camera);
-                });
-            });
-        }
-        catch (err) {
-            console.warn('Failed to start XR session:', err);
-        }
-    }, [
-        renderer,
-        isSupported,
-        mode,
-        setupControllers,
-        onSessionStart,
-        onSessionEnd,
-        scene,
-        camera,
-        teleportEnabled,
-    ]);
-    const endSession = React.useCallback(() => {
-        if (!renderer) {
-            return;
-        }
-        const session = renderer.xr.getSession();
-        session === null || session === void 0 ? void 0 : session.end();
-    }, [renderer]);
-    return {
-        isSupported,
-        isSessionActive,
-        mode,
-        setMode,
-        startSession,
-        endSession,
-        controllers,
-        teleportEnabled,
-        setTeleportEnabled,
-        hitTestResult,
-    };
+          }
+          if (mode === "ar" && frame && hitTestSourceRef.current) {
+            const results = frame.getHitTestResults(hitTestSourceRef.current);
+            if (results.length > 0) {
+              const refSpace = renderer.xr.getReferenceSpace();
+              if (refSpace) {
+                const pose = results[0].getPose(refSpace);
+                if (pose) {
+                  setHitTestResult(
+                    new THREE__namespace.Vector3(
+                      pose.transform.position.x,
+                      pose.transform.position.y,
+                      pose.transform.position.z
+                    )
+                  );
+                }
+              }
+            }
+          }
+          renderer.render(scene, camera);
+        });
+      });
+    } catch (err) {
+      console.warn("Failed to start XR session:", err);
+    }
+  }, [
+    renderer,
+    isSupported,
+    mode,
+    setupControllers,
+    onSessionStart,
+    onSessionEnd,
+    scene,
+    camera,
+    teleportEnabled
+  ]);
+  const endSession = React.useCallback(() => {
+    if (!renderer) {
+      return;
+    }
+    const session = renderer.xr.getSession();
+    session?.end();
+  }, [renderer]);
+  return {
+    isSupported,
+    isSessionActive,
+    mode,
+    setMode,
+    startSession,
+    endSession,
+    controllers,
+    teleportEnabled,
+    setTeleportEnabled,
+    hitTestResult
+  };
 }
-/* ── Component ── */
-const NiceXRPreview = ({ renderer, scene, camera, mode: initialMode, onSessionStart, onSessionEnd, className = '', }) => {
-    const { t } = i18n.useNiceTranslation();
-    const { isSupported, isSessionActive, mode, setMode, startSession, endSession, controllers, teleportEnabled, setTeleportEnabled, hitTestResult, } = useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd);
-    React.useEffect(() => {
-        if (initialMode) {
-            setMode(initialMode);
-        }
-    }, [initialMode, setMode]);
-    return (jsxRuntime.jsxs("div", { className: `nice-xr-preview ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "eye", size: 14 }), " ", t('xrPreview.xrPreview', 'XR Preview')] }), !isSupported && (jsxRuntime.jsx("div", { style: { color: 'var(--nice-danger, #ef4444)', fontSize: 11 }, children: t('xrPreview.webxrIsNotSupportedIn', 'WebXR is not supported in this browser.') })), isSupported && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => setMode('vr'), style: {
-                                    flex: 1,
-                                    padding: '5px 8px',
-                                    borderRadius: 4,
-                                    cursor: 'pointer',
-                                    background: mode === 'vr' ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                                    color: mode === 'vr' ? 'var(--nice-color-white, #fff)' : 'inherit',
-                                    border: '1px solid var(--nice-border, #e2e8f0)',
-                                }, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "eye", size: 14 }), " ", t('xrPreview.vr', 'VR')] }), jsxRuntime.jsxs("button", { type: "button", onClick: () => setMode('ar'), style: {
-                                    flex: 1,
-                                    padding: '5px 8px',
-                                    borderRadius: 4,
-                                    cursor: 'pointer',
-                                    background: mode === 'ar' ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                                    color: mode === 'ar' ? 'var(--nice-color-white, #fff)' : 'inherit',
-                                    border: '1px solid var(--nice-border, #e2e8f0)',
-                                }, children: [jsxRuntime.jsx(ui.NiceIcon, { name: "window", size: 14 }), " ", t('xrPreview.ar', 'AR')] })] }), jsxRuntime.jsx("button", { type: "button", onClick: isSessionActive ? endSession : startSession, style: {
-                            background: isSessionActive
-                                ? 'var(--nice-danger, #ef4444)'
-                                : 'var(--nice-success, #22c55e)',
-                            color: 'var(--nice-color-white, #fff)',
-                            border: 'none',
-                            borderRadius: 4,
-                            padding: '6px 12px',
-                            cursor: 'pointer',
-                        }, children: isSessionActive ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "stop", size: 14 }), " ", t('xrPreview.exitXr', 'Exit XR')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "play", size: 14 }), " ", t('xrPreview.enterXr', 'Enter XR')] })) }), mode === 'vr' && (jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: teleportEnabled, onChange: (e) => setTeleportEnabled(e.target.checked) }), t('xrPreview.teleportation', 'Teleportation')] })), isSessionActive && (jsxRuntime.jsxs("div", { style: { fontSize: 11, opacity: 0.7 }, children: [t('xrPreview.controllers', 'Controllers: {controllers}').replace('{controllers}', String(controllers.length)), jsxRuntime.jsx("br", {}), mode === 'ar' && hitTestResult && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: t('xrPreview.hit', 'Hit: ({x}, {y}, {z})')
-                                    .replace('{x}', String(hitTestResult.x.toFixed(2)))
-                                    .replace('{y}', String(hitTestResult.y.toFixed(2)))
-                                    .replace('{z}', String(hitTestResult.z.toFixed(2))) }))] }))] }))] }));
+const NiceXRPreview = ({
+  renderer,
+  scene,
+  camera,
+  mode: initialMode,
+  onSessionStart,
+  onSessionEnd,
+  className = ""
+}) => {
+  const { t } = i18n.useNiceTranslation();
+  const {
+    isSupported,
+    isSessionActive,
+    mode,
+    setMode,
+    startSession,
+    endSession,
+    controllers,
+    teleportEnabled,
+    setTeleportEnabled,
+    hitTestResult
+  } = useXRPreview(renderer, scene, camera, onSessionStart, onSessionEnd);
+  React.useEffect(() => {
+    if (initialMode) {
+      setMode(initialMode);
+    }
+  }, [initialMode, setMode]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `nice-xr-preview ${className}`,
+      style: { display: "grid", gap: 8, fontSize: 13 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "eye", size: 14 }),
+          " ",
+          t("xrPreview.xrPreview", "XR Preview")
+        ] }),
+        !isSupported && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--nice-danger, #ef4444)", fontSize: 11 }, children: t("xrPreview.webxrIsNotSupportedIn", "WebXR is not supported in this browser.") }),
+        isSupported && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setMode("vr"),
+                style: {
+                  flex: 1,
+                  padding: "5px 8px",
+                  borderRadius: 4,
+                  cursor: "pointer",
+                  background: mode === "vr" ? "var(--nice-color-accent, #6366f1)" : "transparent",
+                  color: mode === "vr" ? "var(--nice-color-white, #fff)" : "inherit",
+                  border: "1px solid var(--nice-border, #e2e8f0)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "eye", size: 14 }),
+                  " ",
+                  t("xrPreview.vr", "VR")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setMode("ar"),
+                style: {
+                  flex: 1,
+                  padding: "5px 8px",
+                  borderRadius: 4,
+                  cursor: "pointer",
+                  background: mode === "ar" ? "var(--nice-color-accent, #6366f1)" : "transparent",
+                  color: mode === "ar" ? "var(--nice-color-white, #fff)" : "inherit",
+                  border: "1px solid var(--nice-border, #e2e8f0)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "window", size: 14 }),
+                  " ",
+                  t("xrPreview.ar", "AR")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: isSessionActive ? endSession : startSession,
+              style: {
+                background: isSessionActive ? "var(--nice-danger, #ef4444)" : "var(--nice-success, #22c55e)",
+                color: "var(--nice-color-white, #fff)",
+                border: "none",
+                borderRadius: 4,
+                padding: "6px 12px",
+                cursor: "pointer"
+              },
+              children: isSessionActive ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "stop", size: 14 }),
+                " ",
+                t("xrPreview.exitXr", "Exit XR")
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.NiceIcon, { name: "play", size: 14 }),
+                " ",
+                t("xrPreview.enterXr", "Enter XR")
+              ] })
+            }
+          ),
+          mode === "vr" && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: teleportEnabled,
+                onChange: (e) => setTeleportEnabled(e.target.checked)
+              }
+            ),
+            t("xrPreview.teleportation", "Teleportation")
+          ] }),
+          isSessionActive && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 11, opacity: 0.7 }, children: [
+            t("xrPreview.controllers", "Controllers: {controllers}").replace(
+              "{controllers}",
+              String(controllers.length)
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            mode === "ar" && hitTestResult && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: t("xrPreview.hit", "Hit: ({x}, {y}, {z})").replace("{x}", String(hitTestResult.x.toFixed(2))).replace("{y}", String(hitTestResult.y.toFixed(2))).replace("{z}", String(hitTestResult.z.toFixed(2))) })
+          ] })
+        ] })
+      ]
+    }
+  );
 };
-
 exports.NiceXRPreview = NiceXRPreview;
 exports.useXRPreview = useXRPreview;