@nice2dev/ui-3d 1.1.10 → 1.2.1

package/dist/cjs/rendering/NiceSSR.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 i18n = require('../core/i18n.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -274,8 +275,9 @@ function useSSR(renderer, scene, camera, configOverride) {
 }
 /* ── Component ── */
 const NiceSSR = ({ renderer, scene, camera, config: configProp, className = '', }) => {
+    const { t } = i18n.useNiceTranslation();
     const { config, setConfig } = useSSR(renderer, scene, camera, configProp);
-    return (jsxRuntime.jsxs("div", { className: `nice-ssr ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "copy", size: 14 }), " Screen-Space Reflections"] }), jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), "Enabled"] })] }), jsxRuntime.jsxs("label", { children: ["Max Steps: ", config.maxSteps, jsxRuntime.jsx("input", { type: "range", min: 16, max: 256, step: 16, value: config.maxSteps, onChange: (e) => setConfig({ maxSteps: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Max Distance: ", config.maxDistance, jsxRuntime.jsx("input", { type: "range", min: 5, max: 200, step: 5, value: config.maxDistance, onChange: (e) => setConfig({ maxDistance: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Intensity: ", config.intensity.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.intensity, onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Thickness: ", config.thickness.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0.05, max: 2, step: 0.05, value: config.thickness, onChange: (e) => setConfig({ thickness: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Jitter: ", config.jitter.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.jitter, onChange: (e) => setConfig({ jitter: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Resolution Scale: ", config.resolution.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0.25, max: 1, step: 0.25, value: config.resolution, onChange: (e) => setConfig({ resolution: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Fresnel: ", config.fresnelExponent.toFixed(1), jsxRuntime.jsx("input", { type: "range", min: 1, max: 8, step: 0.5, value: config.fresnelExponent, onChange: (e) => setConfig({ fresnelExponent: parseFloat(e.target.value) }), style: { width: '100%' } })] })] }));
+    return (jsxRuntime.jsxs("div", { className: `nice-ssr ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "copy", size: 14 }), ' ', t('ssr.screenSpaceReflections', 'Screen-Space Reflections')] }), jsxRuntime.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), t('ssr.enabled', 'Enabled')] })] }), jsxRuntime.jsxs("label", { children: ["Max Steps: ", config.maxSteps, jsxRuntime.jsx("input", { type: "range", min: 16, max: 256, step: 16, value: config.maxSteps, onChange: (e) => setConfig({ maxSteps: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Max Distance: ", config.maxDistance, jsxRuntime.jsx("input", { type: "range", min: 5, max: 200, step: 5, value: config.maxDistance, onChange: (e) => setConfig({ maxDistance: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Intensity: ", config.intensity.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.intensity, onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Thickness: ", config.thickness.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0.05, max: 2, step: 0.05, value: config.thickness, onChange: (e) => setConfig({ thickness: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Jitter: ", config.jitter.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.jitter, onChange: (e) => setConfig({ jitter: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Resolution Scale: ", config.resolution.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0.25, max: 1, step: 0.25, value: config.resolution, onChange: (e) => setConfig({ resolution: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Fresnel: ", config.fresnelExponent.toFixed(1), jsxRuntime.jsx("input", { type: "range", min: 1, max: 8, step: 0.5, value: config.fresnelExponent, onChange: (e) => setConfig({ fresnelExponent: parseFloat(e.target.value) }), style: { width: '100%' } })] })] }));
 };
 
 exports.NiceSSR = NiceSSR;

package/dist/cjs/rendering/NiceWebGPURenderer.js

@@ -4,6 +4,8 @@ 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');
+var threeCompat = require('../core/threeCompat.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -137,7 +139,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);
@@ -229,14 +231,15 @@ const TONE_MAPPINGS = [
 ];
 /* ── Component ── */
 const NiceWebGPURenderer = ({ canvas, scene, camera, width, height, onRendererReady, className = '', }) => {
+    const { t } = i18n.useNiceTranslation();
     const { isWebGPU, capabilities, isReady, toneMapping, setToneMapping, toneMappingExposure, setToneMappingExposure, outputColorSpace, setOutputColorSpace, pixelRatio, setPixelRatio, } = useWebGPURenderer(canvas, scene, camera, width, height, onRendererReady);
-    return (jsxRuntime.jsxs("div", { className: `nice-webgpu-renderer ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "monitor", size: 14 }), " Renderer"] }), jsxRuntime.jsx("span", { style: {
+    return (jsxRuntime.jsxs("div", { className: `nice-webgpu-renderer ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(ui.NiceIcon, { name: "monitor", size: 14 }), " ", t('webGPURenderer.renderer', 'Renderer')] }), jsxRuntime.jsx("span", { style: {
                             fontSize: 10,
                             padding: '2px 6px',
                             borderRadius: 4,
                             background: isWebGPU ? 'var(--nice-success, #22c55e)' : 'var(--nice-warning, #f59e0b)',
-                            color: 'var(--nice-text-on-primary, #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%' } })] })] }));
+                            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: t('webGPURenderer.linearSrgb', '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%' } })] })] }));
 };
 
 exports.NiceWebGPURenderer = NiceWebGPURenderer;

package/dist/cjs/uv/NiceUVEditor.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var UVEditor_module = require('./UVEditor.module.css.js');
 var uvEditorTypes = require('./uvEditorTypes.js');
 var uvEditorUtils = require('./uvEditorUtils.js');
@@ -22,6 +23,7 @@ const UV_EDITOR_TOUR = [
    Component
    ═══════════════════════════════════════════ */
 const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelectionChange, width = '100%', height = 600, showToolbar = true, showSidebar = true, className, readOnly = false, tutorial, }) => {
+    const { t } = i18n.useNiceTranslation();
     const canvasRef = React.useRef(null);
     const containerRef = React.useRef(null);
     // State
@@ -124,12 +126,14 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
             ctx.closePath();
             ctx.stroke();
         }
-        // Draw faces
+        // Draw faces — the two fills resolved once per frame, not once per face
+        const faceSelectedFill = ui.resolveCssColor('var(--nice-warning-tint-30, rgba(255, 170, 0, 0.3))', ctx.canvas);
+        const faceFill = ui.resolveCssColor('var(--nice-overlay-10, rgba(100, 100, 100, 0.1))', ctx.canvas);
         for (const face of meshData.faces.values()) {
             const verts = face.vertices.map((id) => meshData.vertices.get(id));
             const screenVerts = verts.map((v) => toScreen(v.position));
             // Fill
-            ctx.fillStyle = face.selected ? 'rgba(255, 170, 0, 0.3)' : 'rgba(100, 100, 100, 0.1)';
+            ctx.fillStyle = face.selected ? faceSelectedFill : faceFill;
             ctx.beginPath();
             ctx.moveTo(screenVerts[0].x, screenVerts[0].y);
             screenVerts.slice(1).forEach((sv) => ctx.lineTo(sv.x, sv.y));
@@ -530,33 +534,33 @@ const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelecti
         setMeshData(newData);
         onUVChange === null || onUVChange === void 0 ? void 0 : onUVChange(geometry);
     }, [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]);
-    const toolbarSlot = showToolbar ? (jsxRuntime.jsxs("div", { className: UVEditor_module.toolbar, children: [jsxRuntime.jsx("div", { className: UVEditor_module.toolGroup, children: uvEditorTypes.UV_TOOLS.slice(0, 5).map((tool) => (jsxRuntime.jsx("button", { className: `${UVEditor_module.toolBtn} ${state.activeTool === tool ? UVEditor_module.active : ''}`, onClick: () => setState((prev) => ({ ...prev, activeTool: tool })), title: tool, disabled: readOnly, children: tool[0].toUpperCase() }, tool))) }), jsxRuntime.jsx("div", { className: UVEditor_module.toolGroup, children: uvEditorTypes.UV_SELECTION_MODES.map((mode) => (jsxRuntime.jsx("button", { className: `${UVEditor_module.toolBtn} ${state.selectionMode === mode ? UVEditor_module.active : ''}`, onClick: () => setState((prev) => ({ ...prev, selectionMode: mode })), title: mode, children: mode[0].toUpperCase() }, mode))) }), jsxRuntime.jsxs("div", { className: UVEditor_module.toolGroup, children: [jsxRuntime.jsx("button", { className: UVEditor_module.toolBtn, onClick: handlePack, disabled: readOnly || !meshData, title: "Pack Islands (P)", children: "Pack" }), jsxRuntime.jsx("button", { className: UVEditor_module.toolBtn, onClick: handleRelax, disabled: readOnly || !meshData, title: "Relax UVs", children: "Relax" })] }), jsxRuntime.jsx("div", { className: UVEditor_module.toolGroup, children: jsxRuntime.jsxs("select", { className: UVEditor_module.select, onChange: (e) => handleProject(e.target.value), disabled: readOnly || !meshData, defaultValue: "", children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: "Project..." }), uvEditorTypes.PROJECTION_TYPES.map((type) => (jsxRuntime.jsx("option", { value: type, children: type }, type)))] }) }), jsxRuntime.jsx("div", { className: UVEditor_module.toolGroup, children: jsxRuntime.jsx("select", { className: UVEditor_module.select, value: state.activeChannel, onChange: (e) => setState((prev) => ({
+    const toolbarSlot = showToolbar ? (jsxRuntime.jsxs("div", { className: UVEditor_module.toolbar, children: [jsxRuntime.jsx("div", { className: UVEditor_module.toolGroup, children: uvEditorTypes.UV_TOOLS.slice(0, 5).map((tool) => (jsxRuntime.jsx("button", { className: `${UVEditor_module.toolBtn} ${state.activeTool === tool ? UVEditor_module.active : ''}`, onClick: () => setState((prev) => ({ ...prev, activeTool: tool })), title: tool, disabled: readOnly, children: tool[0].toUpperCase() }, tool))) }), jsxRuntime.jsx("div", { className: UVEditor_module.toolGroup, children: uvEditorTypes.UV_SELECTION_MODES.map((mode) => (jsxRuntime.jsx("button", { className: `${UVEditor_module.toolBtn} ${state.selectionMode === mode ? UVEditor_module.active : ''}`, onClick: () => setState((prev) => ({ ...prev, selectionMode: mode })), title: mode, children: mode[0].toUpperCase() }, mode))) }), jsxRuntime.jsxs("div", { className: UVEditor_module.toolGroup, children: [jsxRuntime.jsx("button", { className: UVEditor_module.toolBtn, onClick: handlePack, disabled: readOnly || !meshData, title: t('uvEditor.packIslandsP', 'Pack Islands (P)'), children: t('uvEditor.pack', 'Pack') }), jsxRuntime.jsx("button", { className: UVEditor_module.toolBtn, onClick: handleRelax, disabled: readOnly || !meshData, title: t('uvEditor.relaxUvs', 'Relax UVs'), children: t('uvEditor.relax', 'Relax') })] }), jsxRuntime.jsx("div", { className: UVEditor_module.toolGroup, children: jsxRuntime.jsxs("select", { className: UVEditor_module.select, onChange: (e) => handleProject(e.target.value), disabled: readOnly || !meshData, defaultValue: "", children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: t('uvEditor.project', 'Project...') }), uvEditorTypes.PROJECTION_TYPES.map((type) => (jsxRuntime.jsx("option", { value: type, children: type }, type)))] }) }), jsxRuntime.jsx("div", { className: UVEditor_module.toolGroup, children: jsxRuntime.jsx("select", { className: UVEditor_module.select, value: state.activeChannel, onChange: (e) => setState((prev) => ({
                         ...prev,
                         activeChannel: e.target.value,
-                    })), children: uvEditorTypes.UV_CHANNELS.map((ch) => (jsxRuntime.jsx("option", { value: ch, children: ch.toUpperCase() }, ch))) }) }), jsxRuntime.jsxs("div", { className: UVEditor_module.toolGroup, children: [jsxRuntime.jsx("button", { className: UVEditor_module.toolBtn, onClick: undo, disabled: undoStack.length === 0, title: "Undo (Ctrl+Z)", "aria-label": "Undo", children: jsxRuntime.jsx(ui.NiceIcon, { name: "arrow-left", size: 16 }) }), jsxRuntime.jsx("button", { className: UVEditor_module.toolBtn, onClick: redo, disabled: redoStack.length === 0, title: "Redo (Ctrl+Y)", "aria-label": "Redo", children: jsxRuntime.jsx(ui.NiceIcon, { name: "arrow-right", size: 16 }) })] })] })) : undefined;
-    const sidebarSlot = showSidebar && meshData ? (jsxRuntime.jsxs("div", { className: UVEditor_module.sidebar, children: [jsxRuntime.jsxs("div", { className: UVEditor_module.panel, children: [jsxRuntime.jsx("h4", { className: UVEditor_module.panelTitle, children: "Display" }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showGrid, onChange: (e) => setState((prev) => ({
+                    })), children: uvEditorTypes.UV_CHANNELS.map((ch) => (jsxRuntime.jsx("option", { value: ch, children: ch.toUpperCase() }, ch))) }) }), jsxRuntime.jsxs("div", { className: UVEditor_module.toolGroup, children: [jsxRuntime.jsx("button", { className: UVEditor_module.toolBtn, onClick: undo, disabled: undoStack.length === 0, title: t('uvEditor.undoCtrlZ', 'Undo (Ctrl+Z)'), "aria-label": t('uvEditor.undo', 'Undo'), children: jsxRuntime.jsx(ui.NiceIcon, { name: "arrow-left", size: 16 }) }), jsxRuntime.jsx("button", { className: UVEditor_module.toolBtn, onClick: redo, disabled: redoStack.length === 0, title: t('uvEditor.redoCtrlY', 'Redo (Ctrl+Y)'), "aria-label": t('uvEditor.redo', 'Redo'), children: jsxRuntime.jsx(ui.NiceIcon, { name: "arrow-right", size: 16 }) })] })] })) : undefined;
+    const sidebarSlot = showSidebar && meshData ? (jsxRuntime.jsxs("div", { className: UVEditor_module.sidebar, children: [jsxRuntime.jsxs("div", { className: UVEditor_module.panel, children: [jsxRuntime.jsx("h4", { className: UVEditor_module.panelTitle, children: t('uvEditor.display', 'Display') }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showGrid, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showGrid: e.target.checked },
-                                })) }), "Show Grid"] }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showTexture, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showGrid', 'Show Grid')] }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showTexture, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showTexture: e.target.checked },
-                                })) }), "Show Texture"] }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showSeams, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showTexture', 'Show Texture')] }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showSeams, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showSeams: e.target.checked },
-                                })) }), "Show Seams"] }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showDistortion, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showSeams', 'Show Seams')] }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showDistortion, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showDistortion: e.target.checked },
-                                })) }), "Show Distortion"] }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showIslandBounds, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showDistortion', 'Show Distortion')] }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.display.showIslandBounds, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showIslandBounds: e.target.checked },
-                                })) }), "Show Island Bounds"] })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.panel, children: [jsxRuntime.jsx("h4", { className: UVEditor_module.panelTitle, children: "Statistics" }), jsxRuntime.jsxs("div", { className: UVEditor_module.stat, children: [jsxRuntime.jsx("span", { children: "Vertices:" }), jsxRuntime.jsx("span", { children: meshData.vertices.size })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.stat, children: [jsxRuntime.jsx("span", { children: "Faces:" }), jsxRuntime.jsx("span", { children: meshData.faces.size })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.stat, children: [jsxRuntime.jsx("span", { children: "Islands:" }), jsxRuntime.jsx("span", { children: meshData.islands.size })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.stat, children: [jsxRuntime.jsx("span", { children: "Selected:" }), jsxRuntime.jsx("span", { children: uvEditorUtils.getSelectedVertices(meshData).length })] })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.panel, children: [jsxRuntime.jsx("h4", { className: UVEditor_module.panelTitle, children: "Snapping" }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.snapping, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showIslandBounds', 'Show Island Bounds')] })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.panel, children: [jsxRuntime.jsx("h4", { className: UVEditor_module.panelTitle, children: t('uvEditor.statistics', 'Statistics') }), jsxRuntime.jsxs("div", { className: UVEditor_module.stat, children: [jsxRuntime.jsx("span", { children: "Vertices:" }), jsxRuntime.jsx("span", { children: meshData.vertices.size })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.stat, children: [jsxRuntime.jsx("span", { children: "Faces:" }), jsxRuntime.jsx("span", { children: meshData.faces.size })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.stat, children: [jsxRuntime.jsx("span", { children: "Islands:" }), jsxRuntime.jsx("span", { children: meshData.islands.size })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.stat, children: [jsxRuntime.jsx("span", { children: "Selected:" }), jsxRuntime.jsx("span", { children: uvEditorUtils.getSelectedVertices(meshData).length })] })] }), jsxRuntime.jsxs("div", { className: UVEditor_module.panel, children: [jsxRuntime.jsx("h4", { className: UVEditor_module.panelTitle, children: t('uvEditor.snapping', 'Snapping') }), jsxRuntime.jsxs("label", { className: UVEditor_module.checkbox, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: state.snapping, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     snapping: e.target.checked,
-                                })) }), "Enable Snapping"] }), jsxRuntime.jsxs("label", { className: UVEditor_module.rangeLabel, children: ["Snap Size: ", state.snapSize.toFixed(4), jsxRuntime.jsx("input", { type: "range", min: "0.001", max: "0.25", step: "0.001", value: state.snapSize, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.enableSnapping', 'Enable Snapping')] }), jsxRuntime.jsxs("label", { className: UVEditor_module.rangeLabel, children: ["Snap Size: ", state.snapSize.toFixed(4), jsxRuntime.jsx("input", { type: "range", min: "0.001", max: "0.25", step: "0.001", value: state.snapSize, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     snapSize: parseFloat(e.target.value),
                                 })) })] })] })] })) : undefined;
-    return (jsxRuntime.jsxs("div", { style: { position: 'relative', width, height }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, UV_EDITOR_TOUR) }) }), jsxRuntime.jsx(ui.NiceAppShell, { className: `nice-uv-editor ${UVEditor_module.uvEditor} ${className !== null && className !== void 0 ? className : ''}`, flush: true, toolbar: toolbarSlot, rightSidebar: sidebarSlot, statusBar: jsxRuntime.jsxs("div", { className: UVEditor_module.statusBar, children: [jsxRuntime.jsxs("span", { children: ["Tool: ", state.activeTool] }), jsxRuntime.jsxs("span", { children: ["Mode: ", state.selectionMode] }), jsxRuntime.jsxs("span", { children: ["Zoom: ", (state.zoom * 100).toFixed(0), "%"] }), jsxRuntime.jsxs("span", { children: ["Channel: ", state.activeChannel] })] }), children: jsxRuntime.jsxs("div", { ref: containerRef, className: UVEditor_module.viewport, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onWheel: handleWheel, children: [jsxRuntime.jsx("canvas", { ref: canvasRef, className: UVEditor_module.canvas }), !meshData && jsxRuntime.jsx("div", { className: UVEditor_module.noGeometry, children: "No geometry selected" })] }) })] }));
+    return (jsxRuntime.jsxs("div", { style: { position: 'relative', width, height }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, UV_EDITOR_TOUR) }) }), jsxRuntime.jsx(ui.NiceAppShell, { className: `nice-uv-editor ${UVEditor_module.uvEditor} ${className !== null && className !== void 0 ? className : ''}`, flush: true, toolbar: toolbarSlot, rightSidebar: sidebarSlot, statusBar: jsxRuntime.jsxs("div", { className: UVEditor_module.statusBar, children: [jsxRuntime.jsxs("span", { children: ["Tool: ", state.activeTool] }), jsxRuntime.jsxs("span", { children: ["Mode: ", state.selectionMode] }), jsxRuntime.jsxs("span", { children: ["Zoom: ", (state.zoom * 100).toFixed(0), "%"] }), jsxRuntime.jsxs("span", { children: ["Channel: ", state.activeChannel] })] }), children: jsxRuntime.jsxs("div", { ref: containerRef, className: UVEditor_module.viewport, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onWheel: handleWheel, children: [jsxRuntime.jsx("canvas", { ref: canvasRef, className: UVEditor_module.canvas }), !meshData && (jsxRuntime.jsx("div", { className: UVEditor_module.noGeometry, children: t('uvEditor.noGeometrySelected', 'No geometry selected') }))] }) })] }));
 };
 
 exports.NiceUVEditor = NiceUVEditor;

package/dist/cjs/uv/uvEditorTypes.js

@@ -50,6 +50,7 @@ const DEFAULT_UV_DISPLAY = {
     showDistortion: false,
     distortionGradient: { low: 'var(--nice-success, #00ff00)', high: 'var(--nice-danger, #ff0000)' },
     showSeams: true,
+    // audit-allow: literal-color — the seam colour setting's default
     seamColor: '#ff6600',
     highlightSelected: true,
     selectionColor: 'var(--nice-warning, #ffaa00)',

package/dist/esm/core/editorAsk.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { NiceConfirmDialog, NicePromptDialog } from '@nice2dev/ui';
+import { useState, useRef, useCallback } from 'react';
+
+/**
+ * The library's dialogs in place of `window.prompt` / `window.confirm` for the editor hooks,
+ * which hold state but render nothing: `ask` resolves with the answer (`null` when cancelled)
+ * and `pendingAsk` is the open question, for the editor component to pass to
+ * {@link EditorAskDialog}. One question at a time: a new one settles the open one as cancelled.
+ */
+function useEditorAsk() {
+    const [pendingAsk, setPendingAsk] = useState(null);
+    const pendingRef = useRef(null);
+    const ask = useCallback((kind, text, defaultValue) => new Promise((resolve) => {
+        var _a;
+        (_a = pendingRef.current) === null || _a === void 0 ? void 0 : _a.answer(null);
+        const next = {
+            kind,
+            text,
+            defaultValue,
+            answer: (value) => {
+                if (pendingRef.current === next) {
+                    pendingRef.current = null;
+                    setPendingAsk(null);
+                }
+                resolve(value);
+            },
+        };
+        pendingRef.current = next;
+        setPendingAsk(next);
+    }), []);
+    return { pendingAsk, ask };
+}
+/** Shows the question {@link useEditorAsk} is waiting on, if any. */
+const EditorAskDialog = ({ ask }) => {
+    if (!ask) {
+        return null;
+    }
+    if (ask.kind === 'confirm') {
+        return (jsx(NiceConfirmDialog, { visible: true, message: ask.text, onAccept: () => ask.answer(''), onReject: () => ask.answer(null) }));
+    }
+    return (jsx(NicePromptDialog, { open: true, title: ask.text, defaultValue: ask.defaultValue, onSubmit: (value) => ask.answer(value), onCancel: () => ask.answer(null) }));
+};
+
+export { EditorAskDialog, useEditorAsk };

package/dist/esm/core/i18n.js

@@ -1,11 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import { useNiceTranslation as useNiceTranslation$1 } from '@nice2dev/ui';
+import { useContext, useMemo, createContext } from 'react';
 
-const fallback = (_key, defaultValue) => defaultValue;
-const NiceI18nContext = createContext(fallback);
+/** `null` outside this package's provider: the global translator applies. */
+const NiceI18nContext = /* @__PURE__ */ createContext(null);
+/** Overrides the app's global translator for the 3D controls below it. */
 const NiceI18nProvider = ({ t, children }) => (jsx(NiceI18nContext.Provider, { value: t, children: children }));
 function useNiceTranslation() {
-    const t = useContext(NiceI18nContext);
+    const own = useContext(NiceI18nContext);
+    const { t: global } = useNiceTranslation$1();
+    const t = useMemo(() => own !== null && own !== void 0 ? own : ((key, defaultValue) => global(key, defaultValue)), [own, global]);
     return { t };
 }
 

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/DanceScoreEngine.js

@@ -1,5 +1,11 @@
 import { useRef, useState, useCallback } from 'react';
 
+/**
+ * DanceScoreEngine — Compares detected poses against reference choreography
+ *
+ * Calculates real-time dance accuracy by comparing camera-detected Pose3DFrames
+ * against a reference sequence (from choreography DSL or recorded poses).
+ */
 // ── Default config ──────────────────────────────────────────────
 const DEFAULT_CONFIG = {
     keypointWeights: {},
@@ -190,6 +196,7 @@ class DanceScoreEngine {
         return 'F';
     }
 }
+// ── React hook ──────────────────────────────────────────────────
 function useDanceScore(config) {
     const engineRef = useRef(new DanceScoreEngine(config));
     const [lastScore, setLastScore] = useState(null);

package/dist/esm/dance/PoseDetector.js

@@ -1,6 +1,7 @@
 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';
+import { useNiceTranslation } from '../core/i18n.js';
 
 // ── Standard keypoint definitions (COCO 17-keypoint model) ──────
 const COCO_KEYPOINTS = [
@@ -40,19 +41,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 +57,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 +127,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,23 +142,14 @@ 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]);
     return { start, stop, isDetecting, getLatestFrame: () => latestFrameRef.current };
 }
 // ── Component: PoseDetector ─────────────────────────────────────
-const NicePoseDetector = forwardRef(function NicePoseDetector(props, ref) {
+const NicePoseDetector = /* @__PURE__ */ forwardRef(function NicePoseDetector(props, ref) {
+    const { t } = useNiceTranslation();
     const { onFrame, onStart, onStop, onError, className, style, width = 640, height = 480, mirror = true, showSkeleton = true, showConfidence = false, ...config } = props;
     const videoRef = useRef(null);
     const canvasRef = useRef(null);
@@ -134,64 +163,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 = {
@@ -230,9 +285,7 @@ const NicePoseDetector = forwardRef(function NicePoseDetector(props, ref) {
                     cursor: 'pointer',
                     fontSize: 14,
                     fontWeight: 600,
-                }, children: "Start Camera" }))] }));
+                }, children: t('poseDetector.startCamera', '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';