@nice2dev/ui-3d 1.1.10 → 1.2.1

package/dist/esm/particle/NiceParticleEditor.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { NiceTutorialButton, resolveTutorial, NiceAppShell, resolveCssColor, NiceIcon } from '@nice2dev/ui';
 import { useRef, useMemo, useEffect, useReducer, useState } from 'react';
+import { useNiceTranslation } from '../core/i18n.js';
 import styles from './ParticleEditor.module.css.js';
 import { MODULE_NAMES, BLEND_MODE_NAMES, RENDER_MODE_NAMES, EMITTER_SHAPE_NAMES } from './particleEditorTypes.js';
 import { applyPreset, createDefaultSystem, PARTICLE_PRESETS, importSystemsFromJSON, exportSystemsToJSON, cloneSystem } from './particleEditorUtils.js';
@@ -280,6 +281,7 @@ function useParticleEditor(initialSystems) {
     return { state, dispatch };
 }
 function SystemListPanel({ systems, selectedId, onSelect, onAdd, onRemove, onDuplicate, onRename, onAddPreset, }) {
+    const { t } = useNiceTranslation();
     const [editingId, setEditingId] = useState(null);
     const [editName, setEditName] = useState('');
     const [showPresets, setShowPresets] = useState(false);
@@ -293,20 +295,21 @@ function SystemListPanel({ systems, selectedId, onSelect, onAdd, onRemove, onDup
         }
         setEditingId(null);
     };
-    return (jsxs("div", { className: styles.systemList, children: [jsxs("div", { className: styles.systemListHeader, children: [jsxs("span", { children: ["Systems (", systems.length, ")"] }), jsxs("div", { className: styles.systemListActions, children: [jsx("button", { onClick: onAdd, title: "New System", "aria-label": "New System", children: jsx(NiceIcon, { name: "plus", size: 14 }) }), jsx("button", { onClick: () => setShowPresets(!showPresets), title: "Add Preset", "aria-label": "Add Preset", children: jsx(NiceIcon, { name: "clipboard", size: 14 }) })] })] }), showPresets && (jsx("div", { className: styles.presetMenu, children: Object.keys(PARTICLE_PRESETS).map((preset) => (jsx("button", { className: styles.presetItem, onClick: () => {
+    return (jsxs("div", { className: styles.systemList, children: [jsxs("div", { className: styles.systemListHeader, children: [jsxs("span", { children: ["Systems (", systems.length, ")"] }), jsxs("div", { className: styles.systemListActions, children: [jsx("button", { onClick: onAdd, title: t('particleEditor.newSystem', 'New System'), "aria-label": t('particleEditor.newSystem', 'New System'), children: jsx(NiceIcon, { name: "plus", size: 14 }) }), jsx("button", { onClick: () => setShowPresets(!showPresets), title: t('particleEditor.addPreset', 'Add Preset'), "aria-label": t('particleEditor.addPreset', 'Add Preset'), children: jsx(NiceIcon, { name: "clipboard", size: 14 }) })] })] }), showPresets && (jsx("div", { className: styles.presetMenu, children: Object.keys(PARTICLE_PRESETS).map((preset) => (jsx("button", { className: styles.presetItem, onClick: () => {
                         onAddPreset(preset);
                         setShowPresets(false);
                     }, children: preset.charAt(0).toUpperCase() + preset.slice(1) }, preset))) })), jsx("div", { className: styles.systemItems, children: systems.map((system) => (jsx("div", { className: `${styles.systemItem} ${selectedId === system.id ? styles.selected : ''}`, onClick: () => onSelect(system.id), children: editingId === system.id ? (jsx("input", { type: "text", value: editName, onChange: (e) => setEditName(e.target.value), onBlur: handleFinishRename, onKeyDown: (e) => e.key === 'Enter' && handleFinishRename(), autoFocus: true, className: styles.renameInput })) : (jsxs(Fragment, { children: [jsx("span", { className: styles.systemName, onDoubleClick: () => handleStartRename(system), children: system.name }), jsxs("div", { className: styles.systemItemActions, children: [jsx("button", { onClick: (e) => {
                                             e.stopPropagation();
                                             onDuplicate(system.id);
-                                        }, title: "Duplicate", "aria-label": "Duplicate", children: jsx(NiceIcon, { name: "clipboard", size: 14 }) }), jsx("button", { onClick: (e) => {
+                                        }, title: t('particleEditor.duplicate', 'Duplicate'), "aria-label": t('particleEditor.duplicate', 'Duplicate'), children: jsx(NiceIcon, { name: "clipboard", size: 14 }) }), jsx("button", { onClick: (e) => {
                                             e.stopPropagation();
                                             onRemove(system.id);
-                                        }, title: "Remove", "aria-label": "Remove", disabled: systems.length <= 1, children: jsx(NiceIcon, { name: "trash", size: 14 }) })] })] })) }, system.id))) })] }));
+                                        }, title: t('particleEditor.remove', 'Remove'), "aria-label": t('particleEditor.remove', 'Remove'), disabled: systems.length <= 1, children: jsx(NiceIcon, { name: "trash", size: 14 }) })] })] })) }, system.id))) })] }));
 }
 function InspectorPanel({ system, expandedModules, selectedModule, onToggleModule, onSelectModule: _onSelectModule, onUpdateSystem, }) {
+    const { t } = useNiceTranslation();
     if (!system) {
-        return (jsx("div", { className: styles.inspector, children: jsx("div", { className: styles.emptyInspector, children: "No system selected" }) }));
+        return (jsx("div", { className: styles.inspector, children: jsx("div", { className: styles.emptyInspector, children: t('particleEditor.noSystemSelected', 'No system selected') }) }));
     }
     const modules = [
         { key: 'main', hasEnabled: false },
@@ -351,6 +354,7 @@ function InspectorPanel({ system, expandedModules, selectedModule, onToggleModul
                                     }, className: styles.moduleCheckbox })), jsx("span", { className: styles.moduleName, children: MODULE_NAMES[mod.key] || mod.key })] }), expandedModules.includes(mod.key) && (jsx("div", { className: styles.moduleContent, children: jsx(ModuleEditor, { system: system, moduleKey: mod.key, onUpdate: onUpdateSystem }) }))] }, mod.key))) })] }));
 }
 function ModuleEditor({ system, moduleKey, onUpdate }) {
+    const { t } = useNiceTranslation();
     const renderDistributionInput = (label, value, onChange) => (jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: label }), jsxs("div", { className: styles.distributionInput, children: [jsxs("select", { value: value.type, onChange: (e) => {
                             const newType = e.target.value;
                             if (newType === 'constant') {
@@ -368,7 +372,7 @@ function ModuleEditor({ system, moduleKey, onUpdate }) {
                                     ],
                                 });
                             }
-                        }, className: styles.distributionType, children: [jsx("option", { value: "constant", children: "Constant" }), jsx("option", { value: "random", children: "Random" }), jsx("option", { value: "curve", children: "Curve" })] }), value.type === 'constant' && (jsx("input", { type: "number", value: value.value, onChange: (e) => onChange({ ...value, value: parseFloat(e.target.value) || 0 }), className: styles.numberInput })), value.type === 'random' && (jsxs(Fragment, { children: [jsx("input", { type: "number", value: value.min, onChange: (e) => onChange({ ...value, min: parseFloat(e.target.value) || 0 }), className: styles.numberInput, placeholder: "Min" }), jsx("input", { type: "number", value: value.max, onChange: (e) => onChange({ ...value, max: parseFloat(e.target.value) || 0 }), className: styles.numberInput, placeholder: "Max" })] }))] })] }));
+                        }, className: styles.distributionType, children: [jsx("option", { value: "constant", children: t('particleEditor.constant', 'Constant') }), jsx("option", { value: "random", children: t('particleEditor.random', 'Random') }), jsx("option", { value: "curve", children: t('particleEditor.curve', 'Curve') })] }), value.type === 'constant' && (jsx("input", { type: "number", value: value.value, onChange: (e) => onChange({ ...value, value: parseFloat(e.target.value) || 0 }), className: styles.numberInput })), value.type === 'random' && (jsxs(Fragment, { children: [jsx("input", { type: "number", value: value.min, onChange: (e) => onChange({ ...value, min: parseFloat(e.target.value) || 0 }), className: styles.numberInput, placeholder: t('particleEditor.min', 'Min') }), jsx("input", { type: "number", value: value.max, onChange: (e) => onChange({ ...value, max: parseFloat(e.target.value) || 0 }), className: styles.numberInput, placeholder: t('particleEditor.max', 'Max') })] }))] })] }));
     const renderNumberInput = (label, value, onChange, props) => (jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: label }), jsx("input", { type: "number", value: value, onChange: (e) => onChange(parseFloat(e.target.value) || 0), className: styles.numberInput, ...props })] }));
     const renderToggle = (label, value, onChange) => (jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: label }), jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked), className: styles.toggleInput })] }));
     const renderSelect = (label, value, options, onChange) => (jsxs("div", { className: styles.propertyRow, children: [jsx("label", { children: label }), jsx("select", { value: value, onChange: (e) => onChange(e.target.value), className: styles.selectInput, children: Object.entries(options).map(([key, name]) => (jsx("option", { value: key, children: name }, key))) })] }));
@@ -393,7 +397,7 @@ function ModuleEditor({ system, moduleKey, onUpdate }) {
                                             },
                                         ],
                                     },
-                                }), children: "Add Burst" })] })] }));
+                                }), children: t('particleEditor.addBurst', 'Add Burst') })] })] }));
         case 'shape':
             return (jsxs(Fragment, { children: [renderSelect('Shape', system.shape.type, EMITTER_SHAPE_NAMES, (v) => 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- writing into discriminated-union variant; runtime narrowed by `type`
@@ -421,11 +425,12 @@ function ModuleEditor({ system, moduleKey, onUpdate }) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- BLEND_MODE_NAMES is keyed by ParticleBlendMode but renderSelect is generic
                     BLEND_MODE_NAMES, (v) => onUpdate({ material: { ...system.material, blendMode: v } }))] }));
         default:
-            return jsx("div", { className: styles.moduleNotImplemented, children: "Module editor not yet implemented" });
+            return (jsx("div", { className: styles.moduleNotImplemented, children: t('particleEditor.moduleEditorNotYetImplemented', 'Module editor not yet implemented') }));
     }
 }
 function Toolbar({ isPlaying, isPaused, playbackSpeed, currentTime, canUndo, canRedo, showGrid, showBounds, showEmitterShape, viewMode, onPlay, onPause, onStop, onRestart, onSpeedChange, onUndo, onRedo, onToggleGrid, onToggleBounds, onToggleEmitterShape, onViewModeChange, onNew, onExport, onImport, }) {
-    return (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onNew, title: "New Project", "aria-label": "New Project", children: jsx(NiceIcon, { name: "file", size: 16 }) }), jsx("button", { onClick: onImport, title: "Import", "aria-label": "Import", children: jsx(NiceIcon, { name: "folder", size: 16 }) }), jsx("button", { onClick: onExport, title: "Export", "aria-label": "Export", children: jsx(NiceIcon, { name: "save", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onUndo, disabled: !canUndo, title: "Undo", "aria-label": "Undo", children: jsx(NiceIcon, { name: "arrow-left", size: 16 }) }), jsx("button", { onClick: onRedo, disabled: !canRedo, title: "Redo", "aria-label": "Redo", children: jsx(NiceIcon, { name: "arrow-right", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [isPlaying && !isPaused ? (jsx("button", { onClick: onPause, title: "Pause", "aria-label": "Pause", children: jsx(NiceIcon, { name: "pause", size: 16 }) })) : (jsx("button", { onClick: onPlay, title: "Play", "aria-label": "Play", children: jsx(NiceIcon, { name: "play", size: 16 }) })), jsx("button", { onClick: onStop, title: "Stop", "aria-label": "Stop", children: jsx(NiceIcon, { name: "stop", size: 16 }) }), jsx("button", { onClick: onRestart, title: "Restart", "aria-label": "Restart", children: jsx(NiceIcon, { name: "refresh", size: 16 }) }), jsxs("select", { value: playbackSpeed, onChange: (e) => onSpeedChange(parseFloat(e.target.value)), className: styles.speedSelect, title: "Playback Speed", children: [jsx("option", { value: 0.25, children: "0.25x" }), jsx("option", { value: 0.5, children: "0.5x" }), jsx("option", { value: 1, children: "1x" }), jsx("option", { value: 2, children: "2x" }), jsx("option", { value: 4, children: "4x" })] }), jsxs("span", { className: styles.timeDisplay, children: [currentTime.toFixed(2), "s"] })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onToggleGrid, className: showGrid ? styles.active : '', title: "Toggle Grid", "aria-label": "Toggle Grid", children: jsx(NiceIcon, { name: "hash", size: 16 }) }), jsx("button", { onClick: onToggleBounds, className: showBounds ? styles.active : '', title: "Toggle Bounds", "aria-label": "Toggle Bounds", children: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx("button", { onClick: onToggleEmitterShape, className: showEmitterShape ? styles.active : '', title: "Toggle Emitter Shape", "aria-label": "Toggle Emitter Shape", children: jsx(NiceIcon, { name: "target", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsx("div", { className: styles.toolbarGroup, children: ['3d', 'top', 'side', 'front'].map((mode) => (jsx("button", { onClick: () => onViewModeChange(mode), className: viewMode === mode ? styles.active : '', title: mode.toUpperCase(), children: mode === '3d' ? jsx(NiceIcon, { name: "video", size: 16 }) : mode.charAt(0).toUpperCase() }, mode))) })] }));
+    const { t } = useNiceTranslation();
+    return (jsxs("div", { className: styles.toolbar, children: [jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onNew, title: t('particleEditor.newProject', 'New Project'), "aria-label": t('particleEditor.newProject', 'New Project'), children: jsx(NiceIcon, { name: "file", size: 16 }) }), jsx("button", { onClick: onImport, title: t('particleEditor.import', 'Import'), "aria-label": t('particleEditor.import', 'Import'), children: jsx(NiceIcon, { name: "folder", size: 16 }) }), jsx("button", { onClick: onExport, title: t('particleEditor.export', 'Export'), "aria-label": t('particleEditor.export', 'Export'), children: jsx(NiceIcon, { name: "save", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onUndo, disabled: !canUndo, title: t('particleEditor.undo', 'Undo'), "aria-label": t('particleEditor.undo', 'Undo'), children: jsx(NiceIcon, { name: "arrow-left", size: 16 }) }), jsx("button", { onClick: onRedo, disabled: !canRedo, title: t('particleEditor.redo', 'Redo'), "aria-label": t('particleEditor.redo', 'Redo'), children: jsx(NiceIcon, { name: "arrow-right", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [isPlaying && !isPaused ? (jsx("button", { onClick: onPause, title: t('particleEditor.pause', 'Pause'), "aria-label": t('particleEditor.pause', 'Pause'), children: jsx(NiceIcon, { name: "pause", size: 16 }) })) : (jsx("button", { onClick: onPlay, title: t('particleEditor.play', 'Play'), "aria-label": t('particleEditor.play', 'Play'), children: jsx(NiceIcon, { name: "play", size: 16 }) })), jsx("button", { onClick: onStop, title: t('particleEditor.stop', 'Stop'), "aria-label": t('particleEditor.stop', 'Stop'), children: jsx(NiceIcon, { name: "stop", size: 16 }) }), jsx("button", { onClick: onRestart, title: t('particleEditor.restart', 'Restart'), "aria-label": t('particleEditor.restart', 'Restart'), children: jsx(NiceIcon, { name: "refresh", size: 16 }) }), jsxs("select", { value: playbackSpeed, onChange: (e) => onSpeedChange(parseFloat(e.target.value)), className: styles.speedSelect, title: t('particleEditor.playbackSpeed', 'Playback Speed'), children: [jsx("option", { value: 0.25, children: "0.25x" }), jsx("option", { value: 0.5, children: "0.5x" }), jsx("option", { value: 1, children: "1x" }), jsx("option", { value: 2, children: "2x" }), jsx("option", { value: 4, children: "4x" })] }), jsxs("span", { className: styles.timeDisplay, children: [currentTime.toFixed(2), "s"] })] }), jsx("div", { className: styles.toolbarSeparator }), jsxs("div", { className: styles.toolbarGroup, children: [jsx("button", { onClick: onToggleGrid, className: showGrid ? styles.active : '', title: t('particleEditor.toggleGrid', 'Toggle Grid'), "aria-label": t('particleEditor.toggleGrid', 'Toggle Grid'), children: jsx(NiceIcon, { name: "hash", size: 16 }) }), jsx("button", { onClick: onToggleBounds, className: showBounds ? styles.active : '', title: t('particleEditor.toggleBounds', 'Toggle Bounds'), "aria-label": t('particleEditor.toggleBounds', 'Toggle Bounds'), children: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx("button", { onClick: onToggleEmitterShape, className: showEmitterShape ? styles.active : '', title: t('particleEditor.toggleEmitterShape', 'Toggle Emitter Shape'), "aria-label": t('particleEditor.toggleEmitterShape', 'Toggle Emitter Shape'), children: jsx(NiceIcon, { name: "target", size: 16 }) })] }), jsx("div", { className: styles.toolbarSeparator }), jsx("div", { className: styles.toolbarGroup, children: ['3d', 'top', 'side', 'front'].map((mode) => (jsx("button", { onClick: () => onViewModeChange(mode), className: viewMode === mode ? styles.active : '', title: mode.toUpperCase(), children: mode === '3d' ? jsx(NiceIcon, { name: "video", size: 16 }) : mode.charAt(0).toUpperCase() }, mode))) })] }));
 }
 function PreviewPanel({ systems, isPlaying, isPaused, currentTime, showGrid, showEmitterShape, }) {
     const canvasRef = useRef(null);
@@ -466,7 +471,7 @@ function PreviewPanel({ systems, isPlaying, isPaused, currentTime, showGrid, sho
         }
         // Draw emitter shape indicator
         if (showEmitterShape && systems.length > 0) {
-            ctx.strokeStyle = 'rgba(0,200,255,0.5)';
+            ctx.strokeStyle = resolveCssColor('var(--nice-primary-tint-60, rgba(0,200,255,0.5))', ctx.canvas);
             ctx.lineWidth = 2;
             ctx.setLineDash([5, 5]);
             ctx.beginPath();

package/dist/esm/rendering/NiceCascadedShadows.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /* ── Cascade split calculation ── */
 function computeCascadeSplits(cascadeCount, near, far, splitMode, lambda) {
@@ -245,13 +246,14 @@ function useCSM(scene, camera, configOverride) {
 }
 /* ── Component ── */
 const NiceCascadedShadows = ({ scene, camera, config: configProp, showDebug: initialDebug, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { config, setConfig, cascadeSplits, showDebug, setShowDebug } = useCSM(scene, camera, configProp);
     useEffect(() => {
         if (initialDebug !== undefined) {
             setShowDebug(initialDebug);
         }
     }, [initialDebug, setShowDebug]);
-    return (jsxs("div", { className: `nice-cascaded-shadows ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "lightbulb", size: 14 }), " Cascaded Shadow Maps"] }), jsxs("label", { children: ["Cascades: ", config.cascadeCount, jsx("input", { type: "range", min: 1, max: 5, value: config.cascadeCount, onChange: (e) => setConfig({ cascadeCount: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Max Distance: ", config.maxFar, jsx("input", { type: "range", min: 50, max: 1000, step: 10, value: config.maxFar, onChange: (e) => setConfig({ maxFar: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Split Mode:", jsxs("select", { value: config.splitMode, onChange: (e) => setConfig({ splitMode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "practical", children: "Practical" }), jsx("option", { value: "logarithmic", children: "Logarithmic" }), jsx("option", { value: "linear", children: "Linear" })] })] }), config.splitMode === 'practical' && (jsxs("label", { children: ["Lambda: ", config.practicalSplitLambda.toFixed(2), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.practicalSplitLambda, onChange: (e) => setConfig({ practicalSplitLambda: parseFloat(e.target.value) }), style: { width: '100%' } })] })), jsxs("label", { children: ["Shadow Map Size: ", config.shadowMapSize, jsxs("select", { value: config.shadowMapSize, onChange: (e) => setConfig({ shadowMapSize: parseInt(e.target.value, 10) }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: 512, children: "512" }), jsx("option", { value: 1024, children: "1024" }), jsx("option", { value: 2048, children: "2048" }), jsx("option", { value: 4096, children: "4096" })] })] }), jsxs("div", { style: { fontSize: 10, opacity: 0.7 }, children: ["Cascade splits: ", cascadeSplits.map((s) => s.toFixed(1)).join(' | ')] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: showDebug, onChange: (e) => setShowDebug(e.target.checked) }), "Show cascade frustums"] })] }));
+    return (jsxs("div", { className: `nice-cascaded-shadows ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "lightbulb", size: 14 }), ' ', t('cascadedShadows.cascadedShadowMaps', 'Cascaded Shadow Maps')] }), jsxs("label", { children: ["Cascades: ", config.cascadeCount, jsx("input", { type: "range", min: 1, max: 5, value: config.cascadeCount, onChange: (e) => setConfig({ cascadeCount: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Max Distance: ", config.maxFar, jsx("input", { type: "range", min: 50, max: 1000, step: 10, value: config.maxFar, onChange: (e) => setConfig({ maxFar: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Split Mode:", jsxs("select", { value: config.splitMode, onChange: (e) => setConfig({ splitMode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "practical", children: t('cascadedShadows.practical', 'Practical') }), jsx("option", { value: "logarithmic", children: t('cascadedShadows.logarithmic', 'Logarithmic') }), jsx("option", { value: "linear", children: t('cascadedShadows.linear', 'Linear') })] })] }), config.splitMode === 'practical' && (jsxs("label", { children: ["Lambda: ", config.practicalSplitLambda.toFixed(2), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.practicalSplitLambda, onChange: (e) => setConfig({ practicalSplitLambda: parseFloat(e.target.value) }), style: { width: '100%' } })] })), jsxs("label", { children: ["Shadow Map Size: ", config.shadowMapSize, jsxs("select", { value: config.shadowMapSize, onChange: (e) => setConfig({ shadowMapSize: parseInt(e.target.value, 10) }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: 512, children: "512" }), jsx("option", { value: 1024, children: "1024" }), jsx("option", { value: 2048, children: "2048" }), jsx("option", { value: 4096, children: "4096" })] })] }), jsxs("div", { style: { fontSize: 10, opacity: 0.7 }, children: ["Cascade splits: ", cascadeSplits.map((s) => s.toFixed(1)).join(' | ')] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: showDebug, onChange: (e) => setShowDebug(e.target.checked) }), t('cascadedShadows.showCascadeFrustums', 'Show cascade frustums')] })] }));
 };
 
 export { NiceCascadedShadows, useCSM };

package/dist/esm/rendering/NiceRenderExport.js

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui';
 import { useState, useCallback } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /* ── EXR writer (minimal, uncompressed) ── */
 function writeEXR(width, height, floatData) {
@@ -182,6 +183,7 @@ const DEFAULT_CONFIG = {
     // resolves to nothing, so the exported frame needs the literal (cf. 344d1b2).
     backgroundColor: '#000000',
     backgroundMode: 'transparent',
+    // audit-allow: literal-color +2 — the default sky gradient of the rendered image
     gradientTop: '#87CEEB',
     gradientBottom: '#2E4057',
     samples: 1,
@@ -296,6 +298,7 @@ function useRenderExport(renderer, scene, camera) {
 }
 /* ── Component ── */
 const NiceRenderExport = ({ renderer, scene, camera, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { config, setConfig, render, isRendering, presetSizes } = useRenderExport(renderer, scene, camera);
     const handleRender = async () => {
         const blob = await render();
@@ -310,7 +313,7 @@ const NiceRenderExport = ({ renderer, scene, camera, className = '', }) => {
         link.click();
         URL.revokeObjectURL(url);
     };
-    return (jsxs("div", { className: `nice-render-export ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "camera", size: 14 }), " Render Export"] }), jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 2 }, children: presetSizes.map((p) => (jsx("button", { type: "button", onClick: () => setConfig({ width: p.width, height: p.height }), style: {
+    return (jsxs("div", { className: `nice-render-export ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "camera", size: 14 }), " ", t('renderExport.renderExport', 'Render Export')] }), jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 2 }, children: presetSizes.map((p) => (jsx("button", { type: "button", onClick: () => setConfig({ width: p.width, height: p.height }), style: {
                         padding: '2px 6px',
                         fontSize: 10,
                         cursor: 'pointer',
@@ -320,18 +323,21 @@ 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))) }), jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [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' } }), jsx("span", { children: "\u00D7" }), 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' } })] }), jsxs("label", { children: ["Format:", jsxs("select", { value: config.format, onChange: (e) => setConfig({ format: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "png", children: "PNG (lossless + alpha)" }), jsx("option", { value: "jpeg", children: "JPEG (lossy, no alpha)" }), jsx("option", { value: "exr", children: "EXR (HDR float)" })] })] }), jsxs("label", { children: ["Background:", jsxs("select", { value: config.backgroundMode, onChange: (e) => setConfig({ backgroundMode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "transparent", children: "Transparent" }), jsx("option", { value: "color", children: "Solid Color" }), jsx("option", { value: "scene", children: "Scene Background" })] })] }), config.backgroundMode === 'color' && (jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: ["Color:", jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig({ backgroundColor: e.target.value }) })] })), jsxs("label", { children: ["Supersampling: ", config.samples, "x", jsxs("select", { value: config.samples, onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: 1, children: "1x (none)" }), jsx("option", { value: 2, children: "2x" }), jsx("option", { value: 4, children: "4x (best quality)" })] })] }), jsx("button", { type: "button", onClick: handleRender, disabled: isRendering, style: {
+                    }, children: p.label }, p.label))) }), jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [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' } }), jsx("span", { children: "\u00D7" }), 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' } })] }), jsxs("label", { children: ["Format:", jsxs("select", { value: config.format, onChange: (e) => setConfig({ format: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "png", children: "PNG (lossless + alpha)" }), jsx("option", { value: "jpeg", children: "JPEG (lossy, no alpha)" }), jsx("option", { value: "exr", children: "EXR (HDR float)" })] })] }), jsxs("label", { children: ["Background:", jsxs("select", { value: config.backgroundMode, onChange: (e) => setConfig({ backgroundMode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "transparent", children: t('renderExport.transparent', 'Transparent') }), jsx("option", { value: "color", children: t('renderExport.solidColor', 'Solid Color') }), jsx("option", { value: "scene", children: t('renderExport.sceneBackground', 'Scene Background') })] })] }), config.backgroundMode === 'color' && (jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: ["Color:", jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig({ backgroundColor: e.target.value }) })] })), jsxs("label", { children: ["Supersampling: ", config.samples, "x", jsxs("select", { value: config.samples, onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: 1, children: "1x (none)" }), jsx("option", { value: 2, children: "2x" }), jsx("option", { value: 4, children: "4x (best quality)" })] })] }), 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',
                     cursor: isRendering ? 'wait' : 'pointer',
-                }, children: isRendering ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "clock", size: 14 }), " Rendering\u2026"] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "camera", size: 14 }), " Render ", config.width, "\u00D7", config.height, ' ', config.format.toUpperCase()] })) })] }));
+                }, children: isRendering ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "clock", size: 14 }), " Rendering\u2026"] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "camera", size: 14 }), ' ', t('renderExport.render', 'Render {width}×{height} {format}')
+                            .replace('{width}', String(config.width))
+                            .replace('{height}', String(config.height))
+                            .replace('{format}', config.format.toUpperCase())] })) })] }));
 };
 
 export { NiceRenderExport, useRenderExport };

package/dist/esm/rendering/NiceSSAO.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /* ── SSAO Shaders ── */
 const SSAO_VERTEX = `
@@ -336,8 +337,9 @@ function useSSAO(renderer, scene, camera, configOverride) {
 }
 /* ── Component ── */
 const NiceSSAO = ({ renderer, scene, camera, config: configProp, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { config, setConfig } = useSSAO(renderer, scene, camera, configProp);
-    return (jsxs("div", { className: `nice-ssao ${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: "circle", size: 14 }), " Ambient Occlusion"] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), "Enabled"] })] }), jsxs("label", { children: ["Mode:", jsxs("select", { value: config.mode, onChange: (e) => setConfig({ mode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "ssao", children: "SSAO" }), jsx("option", { value: "hbao", children: "HBAO" })] })] }), jsxs("label", { children: ["Samples: ", config.samples, jsx("input", { type: "range", min: 8, max: 128, step: 8, value: config.samples, onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Radius: ", config.radius.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 5, step: 0.1, value: config.radius, onChange: (e) => setConfig({ radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Intensity: ", config.intensity.toFixed(2), jsx("input", { type: "range", min: 0, max: 3, step: 0.1, value: config.intensity, onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Bias: ", config.bias.toFixed(3), jsx("input", { type: "range", min: 0.001, max: 0.1, step: 0.001, value: config.bias, onChange: (e) => setConfig({ bias: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Resolution: ", config.resolution.toFixed(2), 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%' } })] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: config.blurEnabled, onChange: (e) => setConfig({ blurEnabled: e.target.checked }) }), "Bilateral Blur (size: ", config.blurSize, ")"] })] }));
+    return (jsxs("div", { className: `nice-ssao ${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: "circle", size: 14 }), " ", t('ssao.ambientOcclusion', 'Ambient Occlusion')] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), t('ssao.enabled', 'Enabled')] })] }), jsxs("label", { children: ["Mode:", jsxs("select", { value: config.mode, onChange: (e) => setConfig({ mode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "ssao", children: t('ssao.ssao', 'SSAO') }), jsx("option", { value: "hbao", children: t('ssao.hbao', 'HBAO') })] })] }), jsxs("label", { children: ["Samples: ", config.samples, jsx("input", { type: "range", min: 8, max: 128, step: 8, value: config.samples, onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Radius: ", config.radius.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 5, step: 0.1, value: config.radius, onChange: (e) => setConfig({ radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Intensity: ", config.intensity.toFixed(2), jsx("input", { type: "range", min: 0, max: 3, step: 0.1, value: config.intensity, onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Bias: ", config.bias.toFixed(3), jsx("input", { type: "range", min: 0.001, max: 0.1, step: 0.001, value: config.bias, onChange: (e) => setConfig({ bias: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Resolution: ", config.resolution.toFixed(2), 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%' } })] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: config.blurEnabled, onChange: (e) => setConfig({ blurEnabled: e.target.checked }) }), "Bilateral Blur (size: ", config.blurSize, ")"] })] }));
 };
 
 export { NiceSSAO, useSSAO };

package/dist/esm/rendering/NiceSSR.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /* ── SSR Shader ── */
 const SSR_VERTEX = `
@@ -253,8 +254,9 @@ function useSSR(renderer, scene, camera, configOverride) {
 }
 /* ── Component ── */
 const NiceSSR = ({ renderer, scene, camera, config: configProp, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { config, setConfig } = useSSR(renderer, scene, camera, configProp);
-    return (jsxs("div", { className: `nice-ssr ${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: "copy", size: 14 }), " Screen-Space Reflections"] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), "Enabled"] })] }), jsxs("label", { children: ["Max Steps: ", config.maxSteps, 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%' } })] }), jsxs("label", { children: ["Max Distance: ", config.maxDistance, 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%' } })] }), jsxs("label", { children: ["Intensity: ", config.intensity.toFixed(2), 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%' } })] }), jsxs("label", { children: ["Thickness: ", config.thickness.toFixed(2), 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%' } })] }), jsxs("label", { children: ["Jitter: ", config.jitter.toFixed(2), 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%' } })] }), jsxs("label", { children: ["Resolution Scale: ", config.resolution.toFixed(2), 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%' } })] }), jsxs("label", { children: ["Fresnel: ", config.fresnelExponent.toFixed(1), 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 (jsxs("div", { className: `nice-ssr ${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: "copy", size: 14 }), ' ', t('ssr.screenSpaceReflections', 'Screen-Space Reflections')] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), t('ssr.enabled', 'Enabled')] })] }), jsxs("label", { children: ["Max Steps: ", config.maxSteps, 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%' } })] }), jsxs("label", { children: ["Max Distance: ", config.maxDistance, 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%' } })] }), jsxs("label", { children: ["Intensity: ", config.intensity.toFixed(2), 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%' } })] }), jsxs("label", { children: ["Thickness: ", config.thickness.toFixed(2), 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%' } })] }), jsxs("label", { children: ["Jitter: ", config.jitter.toFixed(2), 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%' } })] }), jsxs("label", { children: ["Resolution Scale: ", config.resolution.toFixed(2), 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%' } })] }), jsxs("label", { children: ["Fresnel: ", config.fresnelExponent.toFixed(1), 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%' } })] })] }));
 };
 
 export { NiceSSR, useSSR };

package/dist/esm/rendering/NiceWebGPURenderer.js

@@ -2,6 +2,8 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
+import { SOFT_SHADOW_MAP } from '../core/threeCompat.js';
 
 /* ── WebGPU detection ── */
 async function detectWebGPU() {
@@ -116,7 +118,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.PCFSoftShadowMap;
+            r.shadowMap.type = SOFT_SHADOW_MAP;
             rendererRef.current = r;
             setRenderer(r);
             setIsWebGPU(usingWebGPU);
@@ -208,14 +210,15 @@ const TONE_MAPPINGS = [
 ];
 /* ── Component ── */
 const NiceWebGPURenderer = ({ canvas, scene, camera, width, height, onRendererReady, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { isWebGPU, capabilities, isReady, toneMapping, setToneMapping, toneMappingExposure, setToneMappingExposure, outputColorSpace, setOutputColorSpace, pixelRatio, setPixelRatio, } = useWebGPURenderer(canvas, scene, camera, width, height, onRendererReady);
-    return (jsxs("div", { className: `nice-webgpu-renderer ${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: "monitor", size: 14 }), " Renderer"] }), jsx("span", { style: {
+    return (jsxs("div", { className: `nice-webgpu-renderer ${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: "monitor", size: 14 }), " ", t('webGPURenderer.renderer', 'Renderer')] }), 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 && jsx("div", { style: { opacity: 0.6, fontSize: 11 }, children: "Initializing\u2026" }), capabilities && (jsxs("div", { style: { fontSize: 10, opacity: 0.7, lineHeight: 1.5 }, children: ["GPU: ", capabilities.adapterName, jsx("br", {}), "Vendor: ", capabilities.vendor, jsx("br", {}), "Max Texture: ", capabilities.maxTextureDimension2D, "px", capabilities.features.length > 0 && (jsxs(Fragment, { children: [jsx("br", {}), "Features: ", capabilities.features.length] }))] })), jsxs("label", { children: ["Tone Mapping:", jsx("select", { value: toneMapping, onChange: (e) => setToneMapping(parseInt(e.target.value, 10)), style: { width: '100%', marginTop: 2 }, children: TONE_MAPPINGS.map((tm) => (jsx("option", { value: tm.value, children: tm.label }, tm.value))) })] }), jsxs("label", { children: ["Exposure: ", toneMappingExposure.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 3, step: 0.05, value: toneMappingExposure, onChange: (e) => setToneMappingExposure(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxs("label", { children: ["Output Color Space:", jsxs("select", { value: outputColorSpace, onChange: (e) => setOutputColorSpace(e.target.value), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: THREE.SRGBColorSpace, children: "sRGB" }), jsx("option", { value: THREE.LinearSRGBColorSpace, children: "Linear sRGB" })] })] }), jsxs("label", { children: ["Pixel Ratio: ", pixelRatio.toFixed(1), 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 && jsx("div", { style: { opacity: 0.6, fontSize: 11 }, children: "Initializing\u2026" }), capabilities && (jsxs("div", { style: { fontSize: 10, opacity: 0.7, lineHeight: 1.5 }, children: ["GPU: ", capabilities.adapterName, jsx("br", {}), "Vendor: ", capabilities.vendor, jsx("br", {}), "Max Texture: ", capabilities.maxTextureDimension2D, "px", capabilities.features.length > 0 && (jsxs(Fragment, { children: [jsx("br", {}), "Features: ", capabilities.features.length] }))] })), jsxs("label", { children: ["Tone Mapping:", jsx("select", { value: toneMapping, onChange: (e) => setToneMapping(parseInt(e.target.value, 10)), style: { width: '100%', marginTop: 2 }, children: TONE_MAPPINGS.map((tm) => (jsx("option", { value: tm.value, children: tm.label }, tm.value))) })] }), jsxs("label", { children: ["Exposure: ", toneMappingExposure.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 3, step: 0.05, value: toneMappingExposure, onChange: (e) => setToneMappingExposure(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxs("label", { children: ["Output Color Space:", jsxs("select", { value: outputColorSpace, onChange: (e) => setOutputColorSpace(e.target.value), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: THREE.SRGBColorSpace, children: "sRGB" }), jsx("option", { value: THREE.LinearSRGBColorSpace, children: t('webGPURenderer.linearSrgb', 'Linear sRGB') })] })] }), jsxs("label", { children: ["Pixel Ratio: ", pixelRatio.toFixed(1), jsx("input", { type: "range", min: 0.5, max: 3, step: 0.5, value: pixelRatio, onChange: (e) => setPixelRatio(parseFloat(e.target.value)), style: { width: '100%' } })] })] }));
 };
 
 export { NiceWebGPURenderer, useWebGPURenderer };

package/dist/esm/uv/NiceUVEditor.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { resolveCssColor, NiceIcon, NiceTutorialButton, resolveTutorial, NiceAppShell } from '@nice2dev/ui';
 import { useRef, useState, useEffect, useCallback } from 'react';
+import { useNiceTranslation } from '../core/i18n.js';
 import styles from './UVEditor.module.css.js';
 import { DEFAULT_UV_STATE, DEFAULT_RELAX_OPTIONS, UV_TOOLS, UV_SELECTION_MODES, PROJECTION_TYPES, UV_CHANNELS, DEFAULT_PACKING_OPTIONS } from './uvEditorTypes.js';
 import { extractUVMeshData, uvSub, uvAdd, uvRotate, selectVerticesInRect, syncToGeometry, packIslands, applyIslandTransforms, relaxUVs, applyProjection, getSelectedVertices } from './uvEditorUtils.js';
@@ -20,6 +21,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 } = useNiceTranslation();
     const canvasRef = useRef(null);
     const containerRef = useRef(null);
     // State
@@ -122,12 +124,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 = resolveCssColor('var(--nice-warning-tint-30, rgba(255, 170, 0, 0.3))', ctx.canvas);
+        const faceFill = 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));
@@ -528,33 +532,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 ? (jsxs("div", { className: styles.toolbar, children: [jsx("div", { className: styles.toolGroup, children: UV_TOOLS.slice(0, 5).map((tool) => (jsx("button", { className: `${styles.toolBtn} ${state.activeTool === tool ? styles.active : ''}`, onClick: () => setState((prev) => ({ ...prev, activeTool: tool })), title: tool, disabled: readOnly, children: tool[0].toUpperCase() }, tool))) }), jsx("div", { className: styles.toolGroup, children: UV_SELECTION_MODES.map((mode) => (jsx("button", { className: `${styles.toolBtn} ${state.selectionMode === mode ? styles.active : ''}`, onClick: () => setState((prev) => ({ ...prev, selectionMode: mode })), title: mode, children: mode[0].toUpperCase() }, mode))) }), jsxs("div", { className: styles.toolGroup, children: [jsx("button", { className: styles.toolBtn, onClick: handlePack, disabled: readOnly || !meshData, title: "Pack Islands (P)", children: "Pack" }), jsx("button", { className: styles.toolBtn, onClick: handleRelax, disabled: readOnly || !meshData, title: "Relax UVs", children: "Relax" })] }), jsx("div", { className: styles.toolGroup, children: jsxs("select", { className: styles.select, onChange: (e) => handleProject(e.target.value), disabled: readOnly || !meshData, defaultValue: "", children: [jsx("option", { value: "", disabled: true, children: "Project..." }), PROJECTION_TYPES.map((type) => (jsx("option", { value: type, children: type }, type)))] }) }), jsx("div", { className: styles.toolGroup, children: jsx("select", { className: styles.select, value: state.activeChannel, onChange: (e) => setState((prev) => ({
+    const toolbarSlot = showToolbar ? (jsxs("div", { className: styles.toolbar, children: [jsx("div", { className: styles.toolGroup, children: UV_TOOLS.slice(0, 5).map((tool) => (jsx("button", { className: `${styles.toolBtn} ${state.activeTool === tool ? styles.active : ''}`, onClick: () => setState((prev) => ({ ...prev, activeTool: tool })), title: tool, disabled: readOnly, children: tool[0].toUpperCase() }, tool))) }), jsx("div", { className: styles.toolGroup, children: UV_SELECTION_MODES.map((mode) => (jsx("button", { className: `${styles.toolBtn} ${state.selectionMode === mode ? styles.active : ''}`, onClick: () => setState((prev) => ({ ...prev, selectionMode: mode })), title: mode, children: mode[0].toUpperCase() }, mode))) }), jsxs("div", { className: styles.toolGroup, children: [jsx("button", { className: styles.toolBtn, onClick: handlePack, disabled: readOnly || !meshData, title: t('uvEditor.packIslandsP', 'Pack Islands (P)'), children: t('uvEditor.pack', 'Pack') }), jsx("button", { className: styles.toolBtn, onClick: handleRelax, disabled: readOnly || !meshData, title: t('uvEditor.relaxUvs', 'Relax UVs'), children: t('uvEditor.relax', 'Relax') })] }), jsx("div", { className: styles.toolGroup, children: jsxs("select", { className: styles.select, onChange: (e) => handleProject(e.target.value), disabled: readOnly || !meshData, defaultValue: "", children: [jsx("option", { value: "", disabled: true, children: t('uvEditor.project', 'Project...') }), PROJECTION_TYPES.map((type) => (jsx("option", { value: type, children: type }, type)))] }) }), jsx("div", { className: styles.toolGroup, children: jsx("select", { className: styles.select, value: state.activeChannel, onChange: (e) => setState((prev) => ({
                         ...prev,
                         activeChannel: e.target.value,
-                    })), children: UV_CHANNELS.map((ch) => (jsx("option", { value: ch, children: ch.toUpperCase() }, ch))) }) }), jsxs("div", { className: styles.toolGroup, children: [jsx("button", { className: styles.toolBtn, onClick: undo, disabled: undoStack.length === 0, title: "Undo (Ctrl+Z)", "aria-label": "Undo", children: jsx(NiceIcon, { name: "arrow-left", size: 16 }) }), jsx("button", { className: styles.toolBtn, onClick: redo, disabled: redoStack.length === 0, title: "Redo (Ctrl+Y)", "aria-label": "Redo", children: jsx(NiceIcon, { name: "arrow-right", size: 16 }) })] })] })) : undefined;
-    const sidebarSlot = showSidebar && meshData ? (jsxs("div", { className: styles.sidebar, children: [jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: "Display" }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showGrid, onChange: (e) => setState((prev) => ({
+                    })), children: UV_CHANNELS.map((ch) => (jsx("option", { value: ch, children: ch.toUpperCase() }, ch))) }) }), jsxs("div", { className: styles.toolGroup, children: [jsx("button", { className: styles.toolBtn, onClick: undo, disabled: undoStack.length === 0, title: t('uvEditor.undoCtrlZ', 'Undo (Ctrl+Z)'), "aria-label": t('uvEditor.undo', 'Undo'), children: jsx(NiceIcon, { name: "arrow-left", size: 16 }) }), jsx("button", { className: styles.toolBtn, onClick: redo, disabled: redoStack.length === 0, title: t('uvEditor.redoCtrlY', 'Redo (Ctrl+Y)'), "aria-label": t('uvEditor.redo', 'Redo'), children: jsx(NiceIcon, { name: "arrow-right", size: 16 }) })] })] })) : undefined;
+    const sidebarSlot = showSidebar && meshData ? (jsxs("div", { className: styles.sidebar, children: [jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: t('uvEditor.display', 'Display') }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showGrid, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showGrid: e.target.checked },
-                                })) }), "Show Grid"] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showTexture, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showGrid', 'Show Grid')] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showTexture, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showTexture: e.target.checked },
-                                })) }), "Show Texture"] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showSeams, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showTexture', 'Show Texture')] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showSeams, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showSeams: e.target.checked },
-                                })) }), "Show Seams"] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showDistortion, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showSeams', 'Show Seams')] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showDistortion, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showDistortion: e.target.checked },
-                                })) }), "Show Distortion"] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showIslandBounds, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showDistortion', 'Show Distortion')] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showIslandBounds, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     display: { ...prev.display, showIslandBounds: e.target.checked },
-                                })) }), "Show Island Bounds"] })] }), jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: "Statistics" }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: "Vertices:" }), jsx("span", { children: meshData.vertices.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: "Faces:" }), jsx("span", { children: meshData.faces.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: "Islands:" }), jsx("span", { children: meshData.islands.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: "Selected:" }), jsx("span", { children: getSelectedVertices(meshData).length })] })] }), jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: "Snapping" }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.snapping, onChange: (e) => setState((prev) => ({
+                                })) }), t('uvEditor.showIslandBounds', 'Show Island Bounds')] })] }), jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: t('uvEditor.statistics', 'Statistics') }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: "Vertices:" }), jsx("span", { children: meshData.vertices.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: "Faces:" }), jsx("span", { children: meshData.faces.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: "Islands:" }), jsx("span", { children: meshData.islands.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: "Selected:" }), jsx("span", { children: getSelectedVertices(meshData).length })] })] }), jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: t('uvEditor.snapping', 'Snapping') }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.snapping, onChange: (e) => setState((prev) => ({
                                     ...prev,
                                     snapping: e.target.checked,
-                                })) }), "Enable Snapping"] }), jsxs("label", { className: styles.rangeLabel, children: ["Snap Size: ", state.snapSize.toFixed(4), 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')] }), jsxs("label", { className: styles.rangeLabel, children: ["Snap Size: ", state.snapSize.toFixed(4), 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 (jsxs("div", { style: { position: 'relative', width, height }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, UV_EDITOR_TOUR) }) }), jsx(NiceAppShell, { className: `nice-uv-editor ${styles.uvEditor} ${className !== null && className !== void 0 ? className : ''}`, flush: true, toolbar: toolbarSlot, rightSidebar: sidebarSlot, statusBar: jsxs("div", { className: styles.statusBar, children: [jsxs("span", { children: ["Tool: ", state.activeTool] }), jsxs("span", { children: ["Mode: ", state.selectionMode] }), jsxs("span", { children: ["Zoom: ", (state.zoom * 100).toFixed(0), "%"] }), jsxs("span", { children: ["Channel: ", state.activeChannel] })] }), children: jsxs("div", { ref: containerRef, className: styles.viewport, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onWheel: handleWheel, children: [jsx("canvas", { ref: canvasRef, className: styles.canvas }), !meshData && jsx("div", { className: styles.noGeometry, children: "No geometry selected" })] }) })] }));
+    return (jsxs("div", { style: { position: 'relative', width, height }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, UV_EDITOR_TOUR) }) }), jsx(NiceAppShell, { className: `nice-uv-editor ${styles.uvEditor} ${className !== null && className !== void 0 ? className : ''}`, flush: true, toolbar: toolbarSlot, rightSidebar: sidebarSlot, statusBar: jsxs("div", { className: styles.statusBar, children: [jsxs("span", { children: ["Tool: ", state.activeTool] }), jsxs("span", { children: ["Mode: ", state.selectionMode] }), jsxs("span", { children: ["Zoom: ", (state.zoom * 100).toFixed(0), "%"] }), jsxs("span", { children: ["Channel: ", state.activeChannel] })] }), children: jsxs("div", { ref: containerRef, className: styles.viewport, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onWheel: handleWheel, children: [jsx("canvas", { ref: canvasRef, className: styles.canvas }), !meshData && (jsx("div", { className: styles.noGeometry, children: t('uvEditor.noGeometrySelected', 'No geometry selected') }))] }) })] }));
 };
 
 export { NiceUVEditor };

package/dist/esm/uv/uvEditorTypes.js

@@ -48,6 +48,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/types/core/editorAsk.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+/** A question an editor hook waits on; {@link EditorAskDialog} shows it. */
+export interface EditorAsk {
+    /** `prompt` asks for a value, `confirm` for a yes / no. */
+    kind: 'prompt' | 'confirm';
+    /** The prompt's title, or the question to confirm. */
+    text: string;
+    /** Initial value of a prompt. */
+    defaultValue?: string;
+    /** Settles it: the entered value (`''` for an accepted confirm), or `null` when cancelled. */
+    answer: (value: string | null) => void;
+}
+/**
+ * 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.
+ */
+export declare function useEditorAsk(): {
+    pendingAsk: EditorAsk | null;
+    ask: (kind: EditorAsk["kind"], text: string, defaultValue?: string) => Promise<string | null>;
+};
+/** Shows the question {@link useEditorAsk} is waiting on, if any. */
+export declare const EditorAskDialog: React.FC<{
+    ask: EditorAsk | null;
+}>;

package/dist/types/core/i18n.d.ts

@@ -1,26 +1,10 @@
-/**
- * i18n — Lightweight translation context for @nice2dev/ui-3d.
- *
- * Drop-in replacement for react-i18next's useTranslation, requires NO
- * external dependencies. Consumers can optionally wrap with NiceI18nProvider
- * to supply their own translation function. Falls back to the default
- * (English key strings) when no provider is present.
- *
- * Usage in components:
- *   const { t } = useNiceTranslation();
- *   <button>{t('actions.save', 'Save')}</button>
- *
- * Usage in apps:
- *   <NiceI18nProvider t={(key, fallback) => myI18n(key) ?? fallback}>
- *     <App />
- *   </NiceI18nProvider>
- */
 import React from 'react';
 export type NiceTranslateFn = (key: string, defaultValue: string) => string;
 export interface NiceI18nProviderProps {
     t: NiceTranslateFn;
     children: React.ReactNode;
 }
+/** Overrides the app's global translator for the 3D controls below it. */
 export declare const NiceI18nProvider: React.FC<NiceI18nProviderProps>;
 export declare function useNiceTranslation(): {
     t: NiceTranslateFn;

package/dist/types/core/threeCompat.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+import * as THREE from 'three';
+/** Soft shadows without the r183 deprecation warning; older three keeps `PCFSoftShadowMap`. */
+export declare const SOFT_SHADOW_MAP: THREE.ShadowMapType;
+/** Seconds since the previous call — what an animation loop feeds its mixer. */
+export interface FrameClock {
+    getDelta(): number;
+}
+/** `Timer` where three has deprecated `Clock`, `Clock` before. */
+export declare function createFrameClock(): FrameClock;

package/dist/types/dance/DanceScoreEngine.d.ts

@@ -1,9 +1,3 @@
-/**
- * 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).
- */
 import type { Pose3DFrame, Pose3DSequenceResult } from '../model/modelEditorTypes';
 export interface DanceScoreConfig {
     /** Weight per keypoint category (0–1). Keys not listed default to 1. */

package/dist/types/dance/PoseDetector.d.ts

@@ -1,8 +1,17 @@
 import React from 'react';
-import type { Pose3DFrame } from '../model/modelEditorTypes';
+import type { PosePerson3D, Pose3DFrame } from '../model/modelEditorTypes';
 export type PoseBackend = 'mediapipe' | 'tfjs';
+/**
+ * Finds the people in one video frame; the model is yours — TF.js pose-detection (MoveNet,
+ * BlazePose), MediaPipe Pose Landmarker… Return keypoints in video pixels, named as in COCO-17
+ * (`nose`, `left_shoulder`, `right_ankle`, …): the overlay connects them by name. It may be
+ * async; the next detection waits for it.
+ */
+export type NicePoseDetectorFn = (video: HTMLVideoElement, timestampMs: number) => PosePerson3D[] | Promise<PosePerson3D[]>;
 export interface NicePoseDetectorConfig {
-    /** Detection backend */
+    /** Finds the poses in each frame. Without it the camera runs, but nothing is detected. */
+    detector?: NicePoseDetectorFn;
+    /** Which backend your `detector` uses — informational; the component loads no model. */
     backend?: PoseBackend;
     /** Maximum number of persons to track */
     maxPersons?: number;
@@ -17,8 +26,6 @@ export interface NicePoseDetectorConfig {
     /** Show confidence dots on keypoints */
     showConfidence?: boolean;
 }
-/** @deprecated Use NicePoseDetectorConfig */
-export type PoseDetectorConfig = NicePoseDetectorConfig;
 export interface NicePoseDetectorHandle {
     /** Start detection */
     start(): void;
@@ -29,8 +36,6 @@ export interface NicePoseDetectorHandle {
     /** Check if actively detecting */
     readonly isDetecting: boolean;
 }
-/** @deprecated Use NicePoseDetectorHandle */
-export type PoseDetectorHandle = NicePoseDetectorHandle;
 export interface NicePoseDetectorProps extends NicePoseDetectorConfig {
     /** Called each frame with detected poses */
     onFrame?: (frame: Pose3DFrame) => void;
@@ -38,7 +43,7 @@ export interface NicePoseDetectorProps extends NicePoseDetectorConfig {
     onStart?: () => void;
     /** Called when detection stops */
     onStop?: () => void;
-    /** Called on error */
+    /** Called when the camera cannot start or the detector fails (detection then stops) */
     onError?: (error: Error) => void;
     /** CSS class for the container */
     className?: string;
@@ -49,14 +54,10 @@ export interface NicePoseDetectorProps extends NicePoseDetectorConfig {
     /** Height of the video feed */
     height?: number;
 }
-/** @deprecated Use NicePoseDetectorProps */
-export type PoseDetectorProps = NicePoseDetectorProps;
-export declare function usePoseDetection(config?: PoseDetectorConfig): {
-    start: (video: HTMLVideoElement, onFrame?: (frame: Pose3DFrame) => void) => Promise<void>;
+export declare function usePoseDetection(config?: NicePoseDetectorConfig): {
+    start: (video: HTMLVideoElement, onFrame?: (frame: Pose3DFrame) => void, onError?: (error: Error) => void) => Promise<void>;
     stop: () => void;
     isDetecting: boolean;
     getLatestFrame: () => Pose3DFrame | null;
 };
 export declare const NicePoseDetector: React.ForwardRefExoticComponent<NicePoseDetectorProps & React.RefAttributes<NicePoseDetectorHandle>>;
-/** @deprecated Use NicePoseDetector */
-export declare const PoseDetector: React.ForwardRefExoticComponent<NicePoseDetectorProps & React.RefAttributes<NicePoseDetectorHandle>>;