@nice2dev/ui-3d 1.1.10 → 1.2.0

package/dist/cjs/model/useModelEditor.js

@@ -23,6 +23,7 @@ var STLLoader_js = require('three/examples/jsm/loaders/STLLoader.js');
 var SVGLoader_js = require('three/examples/jsm/loaders/SVGLoader.js');
 var TDSLoader_js = require('three/examples/jsm/loaders/TDSLoader.js');
 var VTKLoader_js = require('three/examples/jsm/loaders/VTKLoader.js');
+var threeCompat = require('../core/threeCompat.js');
 var modelEditorTypes = require('./modelEditorTypes.js');
 var modelEditorUtils = require('./modelEditorUtils.js');
 
@@ -73,6 +74,7 @@ function findNodeById(nodes, id) {
    Hook
    ═══════════════════════════════════════════ */
 function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
+    var _a;
     /* ── refs ── */
     const mountRef = React.useRef(null);
     const rendererRef = React.useRef(null);
@@ -80,7 +82,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const cameraRef = React.useRef(new THREE__namespace.PerspectiveCamera(50, 1, 0.01, 10000));
     const orbitRef = React.useRef(null);
     const transformRef = React.useRef(null);
-    const clockRef = React.useRef(new THREE__namespace.Clock());
+    // Created once: useRef's argument runs on every render, and three r183 warns per Clock.
+    const clockRef = React.useRef(null);
+    (_a = clockRef.current) !== null && _a !== void 0 ? _a : (clockRef.current = threeCompat.createFrameClock());
     const mixerRef = React.useRef(null);
     const rafRef = React.useRef(0);
     const fileInputRef = React.useRef(null);
@@ -160,7 +164,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         const renderer = new THREE__namespace.WebGLRenderer({ antialias: true, alpha: false });
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.shadowMap.enabled = true;
-        renderer.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
+        renderer.shadowMap.type = threeCompat.SOFT_SHADOW_MAP;
         renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping;
         renderer.toneMappingExposure = 1.2;
         renderer.outputColorSpace = THREE__namespace.SRGBColorSpace;
@@ -243,8 +247,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         onResize();
         // Animation loop
         const animate = () => {
+            var _a, _b;
             rafRef.current = requestAnimationFrame(animate);
-            const dt = clockRef.current.getDelta();
+            const dt = (_b = (_a = clockRef.current) === null || _a === void 0 ? void 0 : _a.getDelta()) !== null && _b !== void 0 ? _b : 0;
             orbit.update();
             // Update mixer
             if (mixerRef.current && isPlayingRef.current) {

package/dist/cjs/model/useModelViewer.js

@@ -10,6 +10,7 @@ var GLTFLoader_js = require('three/examples/jsm/loaders/GLTFLoader.js');
 var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var PLYLoader_js = require('three/examples/jsm/loaders/PLYLoader.js');
 var STLLoader_js = require('three/examples/jsm/loaders/STLLoader.js');
+var threeCompat = require('../core/threeCompat.js');
 
 function _interopNamespaceDefault(e) {
    var n = Object.create(null);
@@ -60,6 +61,7 @@ const TONE_MAP = {
    Hook
    ═══════════════════════════════════════════ */
 function useModelViewer(props = {}) {
+    var _a;
     const { src, format, navigationMode: initNavMode = 'orbit', quality = 'high', autoRotateSpeed: initAutoRotate = 0, backgroundColor = 'var(--nice-bg, #1a1a2e)', showGrid: initShowGrid = true, shadows = true, gamepad = false, cameraPresets: _cameraPresets = [], annotations: _annotations = [], hotspots: _hotspots = [], floorPlans: _floorPlans = [], onHotspotClick: _onHotspotClick, onAnnotationClick: _onAnnotationClick, onLoadProgress, onLoad, onError, clippingPlanes = [], measureMode: initMeasureMode = false, measurements: _measurements = [], onMeasure: _onMeasure, minDistance = 0.1, maxDistance = 1000, fov = 50, vr: _vr = false, walkSpeed = 5, ambientIntensity = 0.5, directionalIntensity = 0.8, antiAlias = true, toneMapping = 'aces', exposure = 1, } = props;
     /* ── refs ── */
     const mountRef = React.useRef(null);
@@ -67,7 +69,9 @@ function useModelViewer(props = {}) {
     const sceneRef = React.useRef(new THREE__namespace.Scene());
     const cameraRef = React.useRef(new THREE__namespace.PerspectiveCamera(fov, 1, 0.01, 10000));
     const orbitRef = React.useRef(null);
-    const clockRef = React.useRef(new THREE__namespace.Clock());
+    // Created once: useRef's argument runs on every render, and three r183 warns per Clock.
+    const clockRef = React.useRef(null);
+    (_a = clockRef.current) !== null && _a !== void 0 ? _a : (clockRef.current = threeCompat.createFrameClock());
     const mixerRef = React.useRef(null);
     const rafRef = React.useRef(0);
     const rootRef = React.useRef(null);
@@ -123,7 +127,7 @@ function useModelViewer(props = {}) {
         renderer.outputColorSpace = THREE__namespace.SRGBColorSpace;
         if (shadows) {
             renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
+            renderer.shadowMap.type = threeCompat.SOFT_SHADOW_MAP;
         }
         mount.appendChild(renderer.domElement);
         rendererRef.current = renderer;
@@ -177,20 +181,20 @@ function useModelViewer(props = {}) {
         ro.observe(mount);
         // Animation loop
         const animate = () => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (disposeRef.current) {
                 return;
             }
             rafRef.current = requestAnimationFrame(animate);
-            const dt = clockRef.current.getDelta();
+            const dt = (_b = (_a = clockRef.current) === null || _a === void 0 ? void 0 : _a.getDelta()) !== null && _b !== void 0 ? _b : 0;
             // Gamepad FPS-style nav
             if (gamepad && navMode === 'fps') {
-                const pads = (_a = navigator.getGamepads) === null || _a === void 0 ? void 0 : _a.call(navigator);
-                const gp = (_b = pads === null || pads === void 0 ? void 0 : pads[0]) !== null && _b !== void 0 ? _b : null;
+                const pads = (_c = navigator.getGamepads) === null || _c === void 0 ? void 0 : _c.call(navigator);
+                const gp = (_d = pads === null || pads === void 0 ? void 0 : pads[0]) !== null && _d !== void 0 ? _d : null;
                 if (gp) {
-                    const lx = (_c = gp.axes[0]) !== null && _c !== void 0 ? _c : 0;
-                    const ly = (_d = gp.axes[1]) !== null && _d !== void 0 ? _d : 0;
-                    const rx = (_e = gp.axes[2]) !== null && _e !== void 0 ? _e : 0;
+                    const lx = (_e = gp.axes[0]) !== null && _e !== void 0 ? _e : 0;
+                    const ly = (_f = gp.axes[1]) !== null && _f !== void 0 ? _f : 0;
+                    const rx = (_g = gp.axes[2]) !== null && _g !== void 0 ? _g : 0;
                     const fwd = new THREE__namespace.Vector3();
                     camera.getWorldDirection(fwd);
                     fwd.y = 0;

package/dist/cjs/rendering/NiceRenderExport.js

@@ -341,13 +341,13 @@ const NiceRenderExport = ({ renderer, scene, camera, className = '', }) => {
                             ? 'var(--nice-color-accent, #6366f1)'
                             : 'transparent',
                         color: config.width === p.width && config.height === p.height
-                            ? 'var(--nice-text-on-primary, #fff)'
+                            ? 'var(--nice-color-white, #fff)'
                             : 'inherit',
                     }, children: p.label }, p.label))) }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [jsxRuntime.jsx("input", { type: "number", value: config.width, min: 1, max: 8192, onChange: (e) => setConfig({ width: parseInt(e.target.value, 10) || 1 }), style: { width: 70, padding: '3px 6px' } }), jsxRuntime.jsx("span", { children: "\u00D7" }), jsxRuntime.jsx("input", { type: "number", value: config.height, min: 1, max: 8192, onChange: (e) => setConfig({ height: parseInt(e.target.value, 10) || 1 }), style: { width: 70, padding: '3px 6px' } })] }), jsxRuntime.jsxs("label", { children: ["Format:", jsxRuntime.jsxs("select", { value: config.format, onChange: (e) => setConfig({ format: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsxRuntime.jsx("option", { value: "png", children: "PNG (lossless + alpha)" }), jsxRuntime.jsx("option", { value: "jpeg", children: "JPEG (lossy, no alpha)" }), jsxRuntime.jsx("option", { value: "exr", children: "EXR (HDR float)" })] })] }), jsxRuntime.jsxs("label", { children: ["Background:", jsxRuntime.jsxs("select", { value: config.backgroundMode, onChange: (e) => setConfig({ backgroundMode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsxRuntime.jsx("option", { value: "transparent", children: "Transparent" }), jsxRuntime.jsx("option", { value: "color", children: "Solid Color" }), jsxRuntime.jsx("option", { value: "scene", children: "Scene Background" })] })] }), config.backgroundMode === 'color' && (jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: ["Color:", jsxRuntime.jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig({ backgroundColor: e.target.value }) })] })), jsxRuntime.jsxs("label", { children: ["Supersampling: ", config.samples, "x", jsxRuntime.jsxs("select", { value: config.samples, onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }), style: { width: '100%', marginTop: 2 }, children: [jsxRuntime.jsx("option", { value: 1, children: "1x (none)" }), jsxRuntime.jsx("option", { value: 2, children: "2x" }), jsxRuntime.jsx("option", { value: 4, children: "4x (best quality)" })] })] }), jsxRuntime.jsx("button", { type: "button", onClick: handleRender, disabled: isRendering, style: {
                     background: isRendering
                         ? 'var(--nice-bg-tertiary, #94a3b8)'
                         : 'var(--nice-color-accent, #6366f1)',
-                    color: 'var(--nice-text-on-primary, #fff)',
+                    color: 'var(--nice-color-white, #fff)',
                     border: 'none',
                     borderRadius: 4,
                     padding: '8px 12px',

package/dist/cjs/rendering/NiceWebGPURenderer.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var React = require('react');
 var THREE = require('three');
+var threeCompat = require('../core/threeCompat.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -137,7 +138,7 @@ function useWebGPURenderer(canvas, scene, camera, width = 800, height = 600, onR
             r.toneMappingExposure = toneMappingExposure;
             r.outputColorSpace = outputColorSpace;
             r.shadowMap.enabled = true;
-            r.shadowMap.type = THREE__namespace.PCFSoftShadowMap;
+            r.shadowMap.type = threeCompat.SOFT_SHADOW_MAP;
             rendererRef.current = r;
             setRenderer(r);
             setIsWebGPU(usingWebGPU);
@@ -235,7 +236,7 @@ const NiceWebGPURenderer = ({ canvas, scene, camera, width, height, onRendererRe
                             padding: '2px 6px',
                             borderRadius: 4,
                             background: isWebGPU ? 'var(--nice-success, #22c55e)' : 'var(--nice-warning, #f59e0b)',
-                            color: 'var(--nice-text-on-primary, #fff)',
+                            color: 'var(--nice-color-white, #fff)',
                         }, children: isWebGPU ? 'WebGPU' : 'WebGL' })] }), !isReady && jsxRuntime.jsx("div", { style: { opacity: 0.6, fontSize: 11 }, children: "Initializing\u2026" }), capabilities && (jsxRuntime.jsxs("div", { style: { fontSize: 10, opacity: 0.7, lineHeight: 1.5 }, children: ["GPU: ", capabilities.adapterName, jsxRuntime.jsx("br", {}), "Vendor: ", capabilities.vendor, jsxRuntime.jsx("br", {}), "Max Texture: ", capabilities.maxTextureDimension2D, "px", capabilities.features.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("br", {}), "Features: ", capabilities.features.length] }))] })), jsxRuntime.jsxs("label", { children: ["Tone Mapping:", jsxRuntime.jsx("select", { value: toneMapping, onChange: (e) => setToneMapping(parseInt(e.target.value, 10)), style: { width: '100%', marginTop: 2 }, children: TONE_MAPPINGS.map((tm) => (jsxRuntime.jsx("option", { value: tm.value, children: tm.label }, tm.value))) })] }), jsxRuntime.jsxs("label", { children: ["Exposure: ", toneMappingExposure.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0.1, max: 3, step: 0.05, value: toneMappingExposure, onChange: (e) => setToneMappingExposure(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Output Color Space:", jsxRuntime.jsxs("select", { value: outputColorSpace, onChange: (e) => setOutputColorSpace(e.target.value), style: { width: '100%', marginTop: 2 }, children: [jsxRuntime.jsx("option", { value: THREE__namespace.SRGBColorSpace, children: "sRGB" }), jsxRuntime.jsx("option", { value: THREE__namespace.LinearSRGBColorSpace, children: "Linear sRGB" })] })] }), jsxRuntime.jsxs("label", { children: ["Pixel Ratio: ", pixelRatio.toFixed(1), jsxRuntime.jsx("input", { type: "range", min: 0.5, max: 3, step: 0.5, value: pixelRatio, onChange: (e) => setPixelRatio(parseFloat(e.target.value)), style: { width: '100%' } })] })] }));
 };
 

package/dist/esm/core/threeCompat.js

@@ -0,0 +1,30 @@
+import * as THREE from 'three';
+
+/**
+ * three.js r183 deprecated `Clock` (for `Timer`) and folds `PCFSoftShadowMap` into
+ * `PCFShadowMap`; both log a console warning there. The peer range starts at r150, which has
+ * neither `Timer` in its core nor the softer `PCFShadowMap`, so the choice follows the revision.
+ */
+const REVISION = Number.parseInt(THREE.REVISION, 10);
+const MODERN = REVISION >= 183;
+/** Soft shadows without the r183 deprecation warning; older three keeps `PCFSoftShadowMap`. */
+const SOFT_SHADOW_MAP = MODERN
+    ? THREE.PCFShadowMap
+    : THREE.PCFSoftShadowMap;
+/** `Timer` where three has deprecated `Clock`, `Clock` before. */
+function createFrameClock() {
+    const TimerCtor = THREE.Timer;
+    if (MODERN && TimerCtor) {
+        const timer = new TimerCtor();
+        return {
+            getDelta: () => {
+                timer.update();
+                return timer.getDelta();
+            },
+        };
+    }
+    const clock = new THREE.Clock();
+    return { getDelta: () => clock.getDelta() };
+}
+
+export { SOFT_SHADOW_MAP, createFrameClock };

package/dist/esm/dance/PoseDetector.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { resolveCssColor } from '@nice2dev/ui';
-import { forwardRef, useRef, useImperativeHandle, useCallback, useState, useEffect } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect, useState } from 'react';
 
 // ── Standard keypoint definitions (COCO 17-keypoint model) ──────
 const COCO_KEYPOINTS = [
@@ -40,19 +40,15 @@ const SKELETON_CONNECTIONS = [
     [12, 14],
     [14, 16], // right leg
 ];
-// ── Simulated pose detection (no external dependency) ───────────
-function createSimulatedKeypoints() {
-    return COCO_KEYPOINTS.map((name, _i) => ({
-        name,
-        x: 0,
-        y: 0,
-        z: 0,
-        confidence: 0,
-    }));
-}
+/** A keypoint the detector reported without a score counts as found. */
+const confidenceOf = (kp) => { var _a; return (_a = kp.confidence) !== null && _a !== void 0 ? _a : 1; };
 // ── Hook: usePoseDetection ──────────────────────────────────────
 function usePoseDetection(config = {}) {
-    const { maxPersons = 1, minConfidence = 0.5, targetFps = 30 } = config;
+    // The detection loop outlives renders: it reads the latest settings from here.
+    const configRef = useRef(config);
+    useEffect(() => {
+        configRef.current = config;
+    });
     const [isDetecting, setIsDetecting] = useState(false);
     const latestFrameRef = useRef(null);
     const frameIndexRef = useRef(0);
@@ -60,33 +56,67 @@ function usePoseDetection(config = {}) {
     const streamRef = useRef(null);
     const videoRef = useRef(null);
     const callbackRef = useRef(null);
-    const processFrame = useCallback(() => {
+    const errorRef = useRef(null);
+    const startedAtRef = useRef(0);
+    const lastRunRef = useRef(-Infinity);
+    const busyRef = useRef(false);
+    // Bumped by start() and stop(): a detection that resolves after them is dropped.
+    const runRef = useRef(0);
+    const stop = useCallback(() => {
         var _a;
-        if (!videoRef.current || videoRef.current.readyState < 2) {
-            rafRef.current = requestAnimationFrame(processFrame);
+        runRef.current += 1;
+        cancelAnimationFrame(rafRef.current);
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((t) => t.stop());
+        streamRef.current = null;
+        if (videoRef.current) {
+            videoRef.current.srcObject = null;
+        }
+        setIsDetecting(false);
+    }, []);
+    const processFrame = useCallback(() => {
+        rafRef.current = requestAnimationFrame(processFrame);
+        const video = videoRef.current;
+        const { detector, maxPersons = 1, minConfidence = 0.5, targetFps = 30 } = configRef.current;
+        if (!detector || !video || video.readyState < 2 || busyRef.current) {
             return;
         }
-        const idx = frameIndexRef.current++;
-        const timestamp = idx / targetFps;
-        // Build frame from video analysis (placeholder for actual ML model)
-        // In production, this calls MediaPipe/TensorFlow.js pose estimation
-        const persons = [];
-        for (let p = 0; p < maxPersons; p++) {
-            const keypoints = createSimulatedKeypoints();
-            if (keypoints.some((kp) => { var _a; return ((_a = kp.confidence) !== null && _a !== void 0 ? _a : 0) >= minConfidence; })) {
-                persons.push({ id: p, keypoints });
-            }
+        const now = performance.now();
+        if (now - lastRunRef.current < 1000 / targetFps) {
+            return;
         }
-        const frame = {
-            frame_index: idx,
-            timestamp_sec: timestamp,
-            persons,
-        };
-        latestFrameRef.current = frame;
-        (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, frame);
-        rafRef.current = requestAnimationFrame(processFrame);
-    }, [maxPersons, minConfidence, targetFps]);
-    const start = useCallback(async (video, onFrame) => {
+        lastRunRef.current = now;
+        busyRef.current = true;
+        const run = runRef.current;
+        Promise.resolve()
+            .then(() => detector(video, now))
+            .then((found) => {
+            var _a;
+            if (run !== runRef.current) {
+                return;
+            }
+            const frame = {
+                frame_index: frameIndexRef.current++,
+                timestamp_sec: (now - startedAtRef.current) / 1000,
+                persons: found
+                    .filter((person) => person.keypoints.some((kp) => confidenceOf(kp) >= minConfidence))
+                    .slice(0, maxPersons),
+            };
+            latestFrameRef.current = frame;
+            (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, frame);
+        })
+            .catch((err) => {
+            var _a;
+            if (run !== runRef.current) {
+                return;
+            }
+            stop();
+            (_a = errorRef.current) === null || _a === void 0 ? void 0 : _a.call(errorRef, err instanceof Error ? err : new Error(String(err)));
+        })
+            .finally(() => {
+            busyRef.current = false;
+        });
+    }, [stop]);
+    const start = useCallback(async (video, onFrame, onError) => {
         try {
             const stream = await navigator.mediaDevices.getUserMedia({
                 video: { facingMode: 'user', width: { ideal: 640 }, height: { ideal: 480 } },
@@ -96,7 +126,14 @@ function usePoseDetection(config = {}) {
             video.srcObject = stream;
             await video.play();
             callbackRef.current = onFrame !== null && onFrame !== void 0 ? onFrame : null;
+            errorRef.current = onError !== null && onError !== void 0 ? onError : null;
             frameIndexRef.current = 0;
+            startedAtRef.current = performance.now();
+            lastRunRef.current = -Infinity;
+            runRef.current += 1;
+            if (!configRef.current.detector) {
+                console.warn('[NicePoseDetector] started without a `detector`: the camera runs, but no poses are detected.');
+            }
             setIsDetecting(true);
             rafRef.current = requestAnimationFrame(processFrame);
         }
@@ -104,16 +141,6 @@ function usePoseDetection(config = {}) {
             throw new Error(`Camera access failed: ${err instanceof Error ? err.message : String(err)}`);
         }
     }, [processFrame]);
-    const stop = useCallback(() => {
-        var _a;
-        cancelAnimationFrame(rafRef.current);
-        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((t) => t.stop());
-        streamRef.current = null;
-        if (videoRef.current) {
-            videoRef.current.srcObject = null;
-        }
-        setIsDetecting(false);
-    }, []);
     useEffect(() => () => {
         stop();
     }, [stop]);
@@ -134,64 +161,90 @@ const NicePoseDetector = forwardRef(function NicePoseDetector(props, ref) {
         },
     }));
     const drawSkeleton = useCallback((frame) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a;
         const ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
         if (!ctx || !canvasRef.current) {
             return;
         }
         ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+        // Keypoints are in video pixels; the video fills the box with object-fit: cover.
+        const video = videoRef.current;
+        const videoW = (video === null || video === void 0 ? void 0 : video.videoWidth) || width;
+        const videoH = (video === null || video === void 0 ? void 0 : video.videoHeight) || height;
+        const scale = Math.max(width / videoW, height / videoH);
+        const offsetX = (width - videoW * scale) / 2;
+        const offsetY = (height - videoH * scale) / 2;
+        const at = (kp) => [
+            kp.x * scale + offsetX,
+            kp.y * scale + offsetY,
+        ];
         for (const person of frame.persons) {
             const kps = person.keypoints;
+            const byName = new Map(kps.map((kp) => [kp.name, kp]));
             // Draw connections
             if (showSkeleton) {
                 ctx.strokeStyle = resolveCssColor('var(--nice-success, #00ff88)', ctx.canvas);
                 ctx.lineWidth = 2;
                 for (const [a, b] of SKELETON_CONNECTIONS) {
-                    const ka = kps[a], kb = kps[b];
+                    const ka = byName.get(COCO_KEYPOINTS[a]);
+                    const kb = byName.get(COCO_KEYPOINTS[b]);
                     if (!ka || !kb) {
                         continue;
                     }
-                    if (((_b = ka.confidence) !== null && _b !== void 0 ? _b : 0) < 0.3 || ((_c = kb.confidence) !== null && _c !== void 0 ? _c : 0) < 0.3) {
+                    if (confidenceOf(ka) < 0.3 || confidenceOf(kb) < 0.3) {
                         continue;
                     }
                     ctx.beginPath();
-                    ctx.moveTo(ka.x, ka.y);
-                    ctx.lineTo(kb.x, kb.y);
+                    ctx.moveTo(...at(ka));
+                    ctx.lineTo(...at(kb));
                     ctx.stroke();
                 }
             }
             // Draw keypoints
             for (const kp of kps) {
-                if (((_d = kp.confidence) !== null && _d !== void 0 ? _d : 0) < 0.3) {
+                if (confidenceOf(kp) < 0.3) {
                     continue;
                 }
-                const radius = showConfidence ? 3 + ((_e = kp.confidence) !== null && _e !== void 0 ? _e : 0) * 5 : 4;
+                const radius = showConfidence ? 3 + confidenceOf(kp) * 5 : 4;
                 ctx.fillStyle = resolveCssColor(showConfidence
-                    ? `rgba(0, 255, 136, ${(_f = kp.confidence) !== null && _f !== void 0 ? _f : 0.5})`
+                    ? `rgba(0, 255, 136, ${confidenceOf(kp)})`
                     : 'var(--nice-success, #00ff88)', ctx.canvas);
                 ctx.beginPath();
-                ctx.arc(kp.x, kp.y, radius, 0, 2 * Math.PI);
+                ctx.arc(...at(kp), radius, 0, 2 * Math.PI);
                 ctx.fill();
             }
         }
-    }, [showSkeleton, showConfidence]);
+    }, [showSkeleton, showConfidence, width, height]);
+    // The detection loop is started once; it reaches this render's drawing and callbacks here.
+    const latestRef = useRef({ drawSkeleton, onFrame, onError });
+    useEffect(() => {
+        latestRef.current = { drawSkeleton, onFrame, onError };
+    });
     const handleFrame = useCallback((frame) => {
-        drawSkeleton(frame);
-        onFrame === null || onFrame === void 0 ? void 0 : onFrame(frame);
-    }, [drawSkeleton, onFrame]);
+        var _a, _b;
+        latestRef.current.drawSkeleton(frame);
+        (_b = (_a = latestRef.current).onFrame) === null || _b === void 0 ? void 0 : _b.call(_a, frame);
+    }, []);
+    const handleDetectorError = useCallback((error) => {
+        var _a, _b;
+        (_b = (_a = latestRef.current).onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
+    }, []);
     const handleStart = useCallback(async () => {
         try {
             if (videoRef.current) {
-                await detection.start(videoRef.current, handleFrame);
+                await detection.start(videoRef.current, handleFrame, handleDetectorError);
                 onStart === null || onStart === void 0 ? void 0 : onStart();
             }
         }
         catch (err) {
             onError === null || onError === void 0 ? void 0 : onError(err instanceof Error ? err : new Error(String(err)));
         }
-    }, [detection, handleFrame, onStart, onError]);
+    }, [detection, handleFrame, handleDetectorError, onStart, onError]);
     const handleStop = useCallback(() => {
+        var _a;
         detection.stop();
+        const canvas = canvasRef.current;
+        (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas.width, canvas.height);
         onStop === null || onStop === void 0 ? void 0 : onStop();
     }, [detection, onStop]);
     const containerStyle = {
@@ -232,7 +285,5 @@ const NicePoseDetector = forwardRef(function NicePoseDetector(props, ref) {
                     fontWeight: 600,
                 }, children: "Start Camera" }))] }));
 });
-/** @deprecated Use NicePoseDetector */
-const PoseDetector = NicePoseDetector;
 
-export { NicePoseDetector, PoseDetector, usePoseDetection };
+export { NicePoseDetector, usePoseDetection };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-export { ModelEditor, NiceModelEditor } from './model/ModelEditor.js';
-export { ModelViewer, NiceModelViewer } from './model/ModelViewer.js';
+export { NiceModelEditor } from './model/ModelEditor.js';
+export { NiceModelViewer } from './model/ModelViewer.js';
 export { DEFAULT_CAD_SETTINGS, FLOOR_MATERIALS, ROOM_COLORS, UNIT_SCALES, WALL_MATERIALS, createCADGrid, snapToCADGrid } from './model/cadModeUtils.js';
 export { FURNITURE_CATALOG, FURNITURE_CATEGORIES, ROOM_PRESETS, applyRoomLayout, calculateBudget, checkFurnitureCollision, createDragPreview, createFurnitureMesh, getFloorIntersection, placeFurnitureInScene, removeFurnitureFromScene, resizePlacedItem, rotatePlacedItem } from './model/simsModeUtils.js';
 export { useModelEditor } from './model/useModelEditor.js';
@@ -7,7 +7,7 @@ export { useModelViewer } from './model/useModelViewer.js';
 export { NiceI18nProvider, useNiceTranslation } from './core/i18n.js';
 export { HDRI_PRESETS, PBR_PRESETS, QUAD_VIEWPORT, UndoRedoStack, applyHDRIPreset, applyPBRPreset, blendAnimations, computeSceneBounds, convertToInstanced, countTriangles, createAnimationClip, createMaterialFromPreset, createViewportCamera, crossfadeAnimations, downloadBlob, evaluateTrack, exportSceneGLTF, exportSceneUSDZ, generateLOD, makeAdditiveAction, measureAngle, measureDistance, removeKeyframe, renderMultiViewport, setKeyframe, snapMulti, snapToEdge, snapToGrid, snapToVertex, solveIKChain, subclip, toThreeKeyframeTrack } from './model/modelEditorUtils.js';
 export { EditorShortcutManager } from './model/editorShortcuts.js';
-export { NicePoseDetector, PoseDetector, usePoseDetection } from './dance/PoseDetector.js';
+export { NicePoseDetector, usePoseDetection } from './dance/PoseDetector.js';
 export { DanceScoreEngine, useDanceScore } from './dance/DanceScoreEngine.js';
 export { DanceBridge, rhythmToBeatSync, useDanceBridge } from './dance/DanceBridge.js';
 export { NiceUVEditor } from './uv/NiceUVEditor.js';

package/dist/esm/model/ModelEditor.js

@@ -29,7 +29,5 @@ const NiceModelEditor = ({ className, onSaveToLibrary, onAIPoseVideo, }) => {
                     e.target.value = '';
                 } }), jsx("input", { ref: api.videoInputRef, type: "file", accept: "video/*", style: { display: 'none' }, onChange: api.handleAIVideo }), jsx(NiceAppShell, { className: `${styles.root} ${className !== null && className !== void 0 ? className : ''}`, flush: true, menubar: jsx(ModelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary }), sidebar: jsxs("div", { style: { display: 'flex', minHeight: 0 }, children: [jsx(ModelEditorLeftPanel, { api: api }), jsx(ModelEditorToolbar, { api: api })] }), rightSidebar: jsx(ModelEditorRightPanel, { api: api }), bottomPanel: jsx(ModelEditorTimeline, { api: api }), statusBar: jsxs("div", { className: styles.statusBar, children: [jsx("span", { children: api.statusText }), jsxs("span", { style: { marginLeft: 'auto' }, children: [api.polyCount.toLocaleString(), " triangles \u00B7 ", api.meshCount, " meshes \u00B7 ", api.boneCount, ' ', "bones \u00B7 ", api.animations.length, " anim(s)"] })] }), children: jsx(ModelEditorViewport, { api: api }) })] }));
 };
-/** @deprecated Use NiceModelEditor */
-const ModelEditor = NiceModelEditor;
 
-export { ModelEditor, NiceModelEditor };
+export { NiceModelEditor };

package/dist/esm/model/ModelViewer.js

@@ -60,7 +60,5 @@ const NiceModelViewer = ({ className, showToolbar = true, showStatusBar = true,
                             a.click();
                         }, title: "Screenshot", "aria-label": "Screenshot", children: jsx(NiceIcon, { name: "camera", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.toggleFullscreen, title: "Fullscreen", "aria-label": "Fullscreen", children: jsx(NiceIcon, { name: api.isFullscreen ? 'collapse' : 'expand', size: 16 }) }), toolbarExtra, showInfoPanel && (jsx("div", { className: styles.toolRight, children: jsx(NiceButton, { className: `${styles.toolBtn} ${panelOpen ? styles.active : ''}`, variant: panelOpen ? 'primary' : 'ghost', size: "sm", onClick: () => setPanelOpen(!panelOpen), title: "Info panel", "aria-label": "Info panel", children: jsx(NiceIcon, { name: "info", size: 16 }) }) }))] })), jsxs("div", { className: styles.viewport, ref: api.mountRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [api.loading && (jsxs("div", { className: styles.loadingOverlay, children: [jsx("span", { className: styles.loadingText, children: "Loading model\u2026" }), jsx("div", { className: styles.loadingBar, children: jsx("div", { className: styles.loadingBarFill, style: { width: `${(api.loadProgress * 100).toFixed(0)}%` } }) })] })), api.error && (jsxs("div", { className: styles.errorOverlay, children: [jsx(NiceIcon, { name: "warning", size: 28 }), jsx("span", { style: { marginTop: 8 }, children: api.error })] })), dragOver && jsx("div", { className: styles.dropZone, children: "Drop 3D model file here" })] }), jsxs("div", { className: `${styles.sidePanel} ${!panelOpen ? styles.hidden : ''}`, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Model Info" }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Triangles" }), jsx("span", { children: api.polyCount.toLocaleString() })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Meshes" }), jsx("span", { children: api.meshCount })] }), api.dimensions && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Width" }), jsx("span", { children: api.dimensions.width })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Height" }), jsx("span", { children: api.dimensions.height })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Depth" }), jsx("span", { children: api.dimensions.depth })] })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Navigation" }), navModes.map((m) => (jsx(NiceButton, { className: styles.toolBtn, variant: api.navigationMode === m ? 'primary' : 'ghost', size: "sm", onClick: () => api.setNavigationMode(m), children: jsx(NavLabel, { mode: m }) }, m)))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Auto Rotate" }), jsx(NiceSlider, { min: 0, max: 10, step: 0.5, value: api.autoRotateSpeed, onChange: (val) => api.setAutoRotateSpeed(val), style: { width: '100%' } })] }), api.animations.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Animations" }), api.animations.map((name, i) => (jsxs(NiceButton, { className: styles.toolBtn, variant: api.activeAnimIdx === i ? 'primary' : 'ghost', size: "sm", onClick: () => api.playAnimation(i), children: [jsx(NiceIcon, { name: "play", size: 14 }), " ", name] }, i)))] }))] }), jsxs("div", { className: `${styles.animBar} ${api.animations.length === 0 ? styles.hidden : ''}`, children: [jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.togglePlay, "aria-label": "Play/Pause", children: jsx(NiceIcon, { name: api.isPlaying ? 'pause' : 'play', size: 16 }) }), jsx(NiceSelect, { className: styles.animSelect, value: String(api.activeAnimIdx), onChange: (val) => api.playAnimation(parseInt(val)), options: api.animations.map((n, i) => ({ value: String(i), label: n })) }), jsx(NiceSlider, { className: styles.animSlider, min: 0, max: api.animDuration || 1, step: 0.01, value: api.animTime, onChange: (val) => api.seekAnim(val) }), jsxs("span", { className: styles.toolLabel, children: [api.animTime.toFixed(1), "s / ", api.animDuration.toFixed(1), "s"] })] }), showStatusBar && (jsxs("div", { className: styles.statusBar, children: [jsx("span", { children: api.statusText }), jsxs("div", { className: styles.statusRight, children: [jsx("span", { children: jsx(NavLabel, { mode: api.navigationMode }) }), api.dimensions && (jsxs("span", { children: [api.dimensions.width, "\u00D7", api.dimensions.height, "\u00D7", api.dimensions.depth] }))] })] })), children === null || children === void 0 ? void 0 : children(api)] }));
 };
-/** @deprecated Use NiceModelViewer */
-const ModelViewer = NiceModelViewer;
 
-export { ModelViewer, NiceModelViewer };
+export { NiceModelViewer };

package/dist/esm/model/NiceArmatureEditor.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceTutorialButton, resolveTutorial, NiceIcon } from '@nice2dev/ui';
+import { NiceTutorialButton, resolveTutorial, NiceIcon, createId } from '@nice2dev/ui';
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import * as THREE from 'three';
 
@@ -145,7 +145,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
             }
         }
         const pose = {
-            id: crypto.randomUUID(),
+            id: createId(),
             name,
             timestamp: Date.now(),
             boneTransforms: transforms,
@@ -222,7 +222,7 @@ const NiceArmatureEditor = ({ skeleton, skinnedMesh: _skinnedMesh, scene, camera
                         padding: '4px 8px',
                         paddingLeft: depth * 16 + 8,
                         background: isSelected ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                        color: isSelected ? 'var(--nice-text-on-primary, #fff)' : 'inherit',
+                        color: isSelected ? 'var(--nice-color-white, #fff)' : 'inherit',
                         cursor: 'pointer',
                         fontSize: 13,
                         borderRadius: 4,

package/dist/esm/model/NicePhysicsSimulation.js

@@ -268,7 +268,7 @@ const NicePhysicsSimulation = ({ scene, selectedObject, onSimulationStep, classN
     return (jsxs("div", { className: `nice-physics-simulation ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "zap", size: 14 }), " Physics"] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: debugDraw, onChange: (e) => setDebugDraw(e.target.checked) }), "Debug"] })] }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsx("button", { type: "button", onClick: isRunning ? pause : play, style: {
                             flex: 1,
                             background: isRunning ? 'var(--nice-danger, #ef4444)' : 'var(--nice-success, #22c55e)',
-                            color: 'var(--nice-text-on-primary, #fff)',
+                            color: 'var(--nice-color-white, #fff)',
                             border: 'none',
                             borderRadius: 4,
                             padding: '5px 8px',

package/dist/esm/model/NiceTerrainEditor.js

@@ -343,12 +343,12 @@ const NiceTerrainEditor = ({ scene, camera, canvas, config: configProp, onTerrai
                             borderRadius: 4,
                             border: '1px solid var(--nice-border, #e2e8f0)',
                             background: brush.mode === m ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                            color: brush.mode === m ? 'var(--nice-text-on-primary, #fff)' : 'inherit',
+                            color: brush.mode === m ? 'var(--nice-color-white, #fff)' : 'inherit',
                         }, children: m }, m)))] }), jsxs("label", { children: ["Radius: ", brush.radius.toFixed(1), jsx("input", { type: "range", min: 0.5, max: 20, step: 0.5, value: brush.radius, onChange: (e) => setBrush({ radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Strength: ", brush.strength.toFixed(2), jsx("input", { type: "range", min: 0.01, max: 1, step: 0.01, value: brush.strength, onChange: (e) => setBrush({ strength: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsx("button", { type: "button", onClick: isPainting ? stopPainting : startPainting, style: {
                     background: isPainting
                         ? 'var(--nice-danger, #ef4444)'
                         : 'var(--nice-color-accent, #6366f1)',
-                    color: 'var(--nice-text-on-primary, #fff)',
+                    color: 'var(--nice-color-white, #fff)',
                     border: 'none',
                     borderRadius: 4,
                     padding: '6px 12px',

package/dist/esm/model/NiceWeightPainter.js

@@ -239,7 +239,7 @@ const NiceWeightPainter = ({ skinnedMesh, activeBoneIndex: initialBoneIndex, sce
                             flex: 1,
                             padding: '4px 6px',
                             background: brush.mode === mode ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                            color: brush.mode === mode ? 'var(--nice-text-on-primary, #fff)' : 'inherit',
+                            color: brush.mode === mode ? 'var(--nice-color-white, #fff)' : 'inherit',
                             border: '1px solid var(--nice-border, #e2e8f0)',
                             borderRadius: 4,
                             cursor: 'pointer',
@@ -249,7 +249,7 @@ const NiceWeightPainter = ({ skinnedMesh, activeBoneIndex: initialBoneIndex, sce
                             background: isPainting
                                 ? 'var(--nice-danger, #ef4444)'
                                 : 'var(--nice-color-accent, #6366f1)',
-                            color: 'var(--nice-text-on-primary, #fff)',
+                            color: 'var(--nice-color-white, #fff)',
                             border: 'none',
                             borderRadius: 4,
                             padding: '6px 12px',

package/dist/esm/model/NiceXRPreview.js

@@ -271,7 +271,7 @@ const NiceXRPreview = ({ renderer, scene, camera, mode: initialMode, onSessionSt
                                     borderRadius: 4,
                                     cursor: 'pointer',
                                     background: mode === 'vr' ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                                    color: mode === 'vr' ? 'var(--nice-text-on-primary, #fff)' : 'inherit',
+                                    color: mode === 'vr' ? 'var(--nice-color-white, #fff)' : 'inherit',
                                     border: '1px solid var(--nice-border, #e2e8f0)',
                                 }, children: [jsx(NiceIcon, { name: "eye", size: 14 }), " VR"] }), jsxs("button", { type: "button", onClick: () => setMode('ar'), style: {
                                     flex: 1,
@@ -279,13 +279,13 @@ const NiceXRPreview = ({ renderer, scene, camera, mode: initialMode, onSessionSt
                                     borderRadius: 4,
                                     cursor: 'pointer',
                                     background: mode === 'ar' ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                                    color: mode === 'ar' ? 'var(--nice-text-on-primary, #fff)' : 'inherit',
+                                    color: mode === 'ar' ? 'var(--nice-color-white, #fff)' : 'inherit',
                                     border: '1px solid var(--nice-border, #e2e8f0)',
                                 }, children: [jsx(NiceIcon, { name: "window", size: 14 }), " AR"] })] }), jsx("button", { type: "button", onClick: isSessionActive ? endSession : startSession, style: {
                             background: isSessionActive
                                 ? 'var(--nice-danger, #ef4444)'
                                 : 'var(--nice-success, #22c55e)',
-                            color: 'var(--nice-text-on-primary, #fff)',
+                            color: 'var(--nice-color-white, #fff)',
                             border: 'none',
                             borderRadius: 4,
                             padding: '6px 12px',