@nice2dev/ui-3d 1.2.1 → 1.3.0

package/dist/esm/model/useModelEditor.js

@@ -22,6 +22,7 @@ import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';
 import { TDSLoader } from 'three/examples/jsm/loaders/TDSLoader.js';
 import { VTKLoader } from 'three/examples/jsm/loaders/VTKLoader.js';
 import { useEditorAsk } from '../core/editorAsk.js';
+import { useNiceTranslation } from '../core/i18n.js';
 import { createFrameClock, SOFT_SHADOW_MAP } from '../core/threeCompat.js';
 import { SUPPORTED_EXTENSIONS, pose3dToClip } from './modelEditorTypes.js';
 import { UndoRedoStack, createMaterialFromPreset, generateLOD, convertToInstanced, applyHDRIPreset, snapMulti, HDRI_PRESETS, PBR_PRESETS } from './modelEditorUtils.js';
@@ -55,6 +56,7 @@ function findNodeById(nodes, id) {
    ═══════════════════════════════════════════ */
 function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     var _a;
+    const { t } = useNiceTranslation();
     const { pendingAsk, ask } = useEditorAsk();
     /* ── refs ── */
     const mountRef = useRef(null);
@@ -394,14 +396,16 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
         focusOnObjectRef.current(obj);
         rebuildTree();
-        setStatusText(`Loaded: ${filename} (${clips.length} animation(s))`);
-    }, [rebuildTree]);
+        setStatusText(t('useModelEditor.loadedAnimationS', 'Loaded: {filename} ({clips} animation(s))')
+            .replace('{filename}', String(filename))
+            .replace('{clips}', String(clips.length)));
+    }, [rebuildTree, t]);
     const loadFile = useCallback(async (file) => {
         var _a, _b, _c, _d, _e, _f;
         const name = file.name.toLowerCase();
         const ext = '.' + name.split('.').pop();
         const url = URL.createObjectURL(file);
-        setStatusText(`Loading ${file.name}...`);
+        setStatusText(t('useModelEditor.loading', 'Loading {name}...').replace('{name}', String(file.name)));
         try {
             if (ext === '.fbx') {
                 const loader = new FBXLoader();
@@ -525,32 +529,34 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                 addObjectToScene(group, [], file.name);
             }
             else {
-                setStatusText(`Unsupported format: ${ext}`);
+                setStatusText(t('useModelEditor.unsupportedFormat', 'Unsupported format: {ext}').replace('{ext}', String(ext)));
             }
         }
         catch (err) {
             log.error('Load error:', err);
-            setStatusText(`Error loading ${file.name}: ${String(err)}`);
+            setStatusText(t('useModelEditor.errorLoading', 'Error loading {name}: {err}')
+                .replace('{name}', String(file.name))
+                .replace('{err}', String(String(err))));
         }
         finally {
             URL.revokeObjectURL(url);
         }
-    }, [addObjectToScene]);
+    }, [addObjectToScene, t]);
     const mergeAnimationFBX = useCallback(async (file) => {
         var _a;
         const url = URL.createObjectURL(file);
-        setStatusText(`Merging animations from ${file.name}...`);
+        setStatusText(t('useModelEditor.mergingAnimationsFrom', 'Merging animations from {name}...').replace('{name}', String(file.name)));
         try {
             const loader = new FBXLoader();
             const obj = await new Promise((res, rej) => loader.load(url, res, undefined, rej));
             const clips = (_a = obj.animations) !== null && _a !== void 0 ? _a : [];
             if (clips.length === 0) {
-                setStatusText(`No animations found in ${file.name}`);
+                setStatusText(t('useModelEditor.noAnimationsFoundIn', 'No animations found in {name}').replace('{name}', String(file.name)));
                 return;
             }
             const root = rootObjectRef.current;
             if (!root) {
-                setStatusText('No model loaded — load a base model first');
+                setStatusText(t('useModelEditor.noModelLoadedLoadA', 'No model loaded — load a base model first'));
                 return;
             }
             if (!mixerRef.current) {
@@ -564,16 +570,20 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             }));
             allClipsRef.current = [...allClipsRef.current, ...newAnims];
             setAnimations([...allClipsRef.current]);
-            setStatusText(`Merged ${clips.length} animation(s) from ${file.name}`);
+            setStatusText(t('useModelEditor.mergedAnimationSFrom', 'Merged {clips} animation(s) from {name}')
+                .replace('{clips}', String(clips.length))
+                .replace('{name}', String(file.name)));
         }
         catch (err) {
             log.error('Merge error:', err);
-            setStatusText(`Error merging ${file.name}: ${String(err)}`);
+            setStatusText(t('useModelEditor.errorMerging', 'Error merging {name}: {err}')
+                .replace('{name}', String(file.name))
+                .replace('{err}', String(String(err))));
         }
         finally {
             URL.revokeObjectURL(url);
         }
-    }, []);
+    }, [t]);
     /* ─────────────────────────────────────────
        Animation controls
        ───────────────────────────────────────── */
@@ -931,18 +941,40 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         clone.position.x += 1;
         sceneRef.current.add(clone);
         rebuildTree();
-        setStatusText(`Duplicated ${selectedNode.name}`);
-    }, [selectedNode, rebuildTree]);
+        setStatusText(t('useModelEditor.duplicated', 'Duplicated {name}').replace('{name}', String(selectedNode.name)));
+    }, [selectedNode, rebuildTree, t]);
     /* ─────────────────────────────────────────
        Keyboard shortcuts
        ───────────────────────────────────────── */
     useEffect(() => {
+        // Escape, then Tab, leaves the viewport, where Tab cycles the mode (WCAG 2.1.2)
+        let tabEscape = false;
         const handleKey = (e) => {
-            var _a, _b, _c;
-            const tag = (_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName;
-            if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+            var _a, _b, _c, _d;
+            // a key sent to the window itself counts as the body's
+            const target = e.target instanceof HTMLElement ? e.target : null;
+            const tag = target === null || target === void 0 ? void 0 : target.tagName;
+            if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (target === null || target === void 0 ? void 0 : target.isContentEditable)) {
+                return;
+            }
+            // The shortcuts are this editor's: keys elsewhere on the page are not, and Tab / Space on
+            // one of its controls move focus and press it. They listened on the whole page — Tab moved
+            // focus nowhere on a page with the editor and Space pressed no button (TODO_1.3.0 I4).
+            const root = (_b = (_a = mountRef.current) === null || _a === void 0 ? void 0 : _a.closest('.nice-app-shell')) !== null && _b !== void 0 ? _b : mountRef.current;
+            if (target && target !== document.body && !(root === null || root === void 0 ? void 0 : root.contains(target))) {
+                return;
+            }
+            if ((e.key === 'Tab' || e.key === ' ') &&
+                (target === null || target === void 0 ? void 0 : target.closest('button, a[href], [role="button"], [role="combobox"], [role="menuitem"], [role="tab"], [role="option"], [role="checkbox"], [role="switch"], [role="slider"], [role="treeitem"]'))) {
                 return;
             }
+            if (e.key === 'Tab' && tabEscape) {
+                tabEscape = false;
+                return;
+            }
+            if (!['Shift', 'Control', 'Alt', 'Meta'].includes(e.key)) {
+                tabEscape = e.key === 'Escape';
+            }
             switch (e.key.toLowerCase()) {
                 case 'g':
                     setTransformMode('translate');
@@ -969,7 +1001,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                         const sel = findNodeById(sceneTree, selectedId);
                         if (sel) {
                             sel.object.removeFromParent();
-                            (_b = transformRef.current) === null || _b === void 0 ? void 0 : _b.detach();
+                            (_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.detach();
                             setSelectedId(null);
                             rebuildTree();
                         }
@@ -980,7 +1012,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                         const sel = findNodeById(sceneTree, selectedId);
                         if (sel) {
                             sel.object.removeFromParent();
-                            (_c = transformRef.current) === null || _c === void 0 ? void 0 : _c.detach();
+                            (_d = transformRef.current) === null || _d === void 0 ? void 0 : _d.detach();
                             setSelectedId(null);
                             rebuildTree();
                         }
@@ -1076,7 +1108,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const exportGLTF = useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText('Nothing to export');
+            setStatusText(t('useModelEditor.nothingToExport', 'Nothing to export'));
             return;
         }
         const exporter = new GLTFExporter();
@@ -1097,16 +1129,16 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             a.download = `export.${binary ? 'glb' : 'gltf'}`;
             a.click();
             URL.revokeObjectURL(a.href);
-            setStatusText(`Exported ${binary ? 'GLB' : 'GLTF'} successfully`);
+            setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', binary ? 'GLB' : 'GLTF'));
         }, (err) => {
             log.error('Export error:', err);
-            setStatusText(`Export error: ${String(err)}`);
+            setStatusText(t('useModelEditor.exportError', 'Export error: {err}').replace('{err}', String(String(err))));
         }, options);
-    }, []);
+    }, [t]);
     const exportOBJ = useCallback(() => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText('Nothing to export');
+            setStatusText(t('useModelEditor.nothingToExport', 'Nothing to export'));
             return;
         }
         const exporter = new OBJExporter();
@@ -1117,12 +1149,12 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         a.download = 'export.obj';
         a.click();
         URL.revokeObjectURL(a.href);
-        setStatusText('Exported OBJ successfully');
-    }, []);
+        setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', 'OBJ'));
+    }, [t]);
     const exportSTL = useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText('Nothing to export');
+            setStatusText(t('useModelEditor.nothingToExport', 'Nothing to export'));
             return;
         }
         const exporter = new STLExporter();
@@ -1139,12 +1171,12 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         a.download = 'export.stl';
         a.click();
         URL.revokeObjectURL(a.href);
-        setStatusText(`Exported STL${binary ? ' (binary)' : ''} successfully`);
-    }, []);
+        setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', binary ? t('useModelEditor.stlBinary', 'STL (binary)') : 'STL'));
+    }, [t]);
     const exportPLY = useCallback((binary) => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText('Nothing to export');
+            setStatusText(t('useModelEditor.nothingToExport', 'Nothing to export'));
             return;
         }
         const exporter = new PLYExporter();
@@ -1162,13 +1194,13 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             a.download = 'export.ply';
             a.click();
             URL.revokeObjectURL(a.href);
-            setStatusText(`Exported PLY${binary ? ' (binary)' : ''} successfully`);
+            setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', binary ? t('useModelEditor.plyBinary', 'PLY (binary)') : 'PLY'));
         }, { binary });
-    }, []);
+    }, [t]);
     const exportUSDZ = useCallback(async () => {
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText('Nothing to export');
+            setStatusText(t('useModelEditor.nothingToExport', 'Nothing to export'));
             return;
         }
         try {
@@ -1183,13 +1215,13 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             a.download = 'export.usdz';
             a.click();
             URL.revokeObjectURL(a.href);
-            setStatusText('Exported USDZ successfully');
+            setStatusText(t('useModelEditor.exportedFormat', 'Exported {format} successfully').replace('{format}', 'USDZ'));
         }
         catch (err) {
             log.error('USDZ export error:', err);
-            setStatusText(`USDZ export error: ${String(err)}`);
+            setStatusText(t('useModelEditor.usdzExportError', 'USDZ export error: {err}').replace('{err}', String(String(err))));
         }
-    }, []);
+    }, [t]);
     /* ─────────────────────────────────────────
        Dispose & clear
        ───────────────────────────────────────── */
@@ -1258,8 +1290,8 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         setAnimDuration(0);
         setSelectedId(null);
         rebuildTree();
-        setStatusText('Scene cleared');
-    }, [rebuildTree, disposeObject]);
+        setStatusText(t('useModelEditor.sceneCleared', 'Scene cleared'));
+    }, [rebuildTree, disposeObject, t]);
     // asks first: clearing cannot be undone
     const clearScene = useCallback(() => {
         void ask('confirm', 'Clear the entire scene? This cannot be undone.').then((answer) => {
@@ -1277,7 +1309,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
         const root = rootObjectRef.current;
         if (!root) {
-            setStatusText('Nothing to save');
+            setStatusText(t('useModelEditor.nothingToSave', 'Nothing to save'));
             return;
         }
         const exporter = new GLTFExporter();
@@ -1295,9 +1327,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             reader.readAsDataURL(blob);
         }, (err) => {
             log.error('Save to library error:', err);
-            setStatusText(`Save error: ${String(err)}`);
+            setStatusText(t('useModelEditor.saveError', 'Save error: {err}').replace('{err}', String(String(err))));
         }, { binary: true, animations: allClipsRef.current.map((a) => a.clip) });
-    }, [onSaveToLibrary, ask]);
+    }, [onSaveToLibrary, ask, t]);
     /* ─────────────────────────────────────────
        Add Mesh / Light / Camera / Empty
        ───────────────────────────────────────── */
@@ -1364,9 +1396,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
         sceneRef.current.add(mesh);
         rebuildTree();
-        setStatusText(`Added ${mesh.name}`);
+        setStatusText(t('useModelEditor.added', 'Added {name}').replace('{name}', String(mesh.name)));
         setAddMenuOpen(null);
-    }, [rebuildTree]);
+    }, [rebuildTree, t]);
     const addSceneLight = useCallback((type) => {
         let light;
         switch (type) {
@@ -1418,9 +1450,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             sceneRef.current.add(helper);
         }
         rebuildTree();
-        setStatusText(`Added ${light.name}`);
+        setStatusText(t('useModelEditor.added', 'Added {name}').replace('{name}', String(light.name)));
         setAddMenuOpen(null);
-    }, [rebuildTree]);
+    }, [rebuildTree, t]);
     const addCameraObject = useCallback(() => {
         const cam = new THREE.PerspectiveCamera(50, 16 / 9, 0.1, 1000);
         cam.name = 'Camera';
@@ -1431,9 +1463,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         helper.name = '__helper_Camera';
         sceneRef.current.add(helper);
         rebuildTree();
-        setStatusText('Added Camera');
+        setStatusText(t('useModelEditor.addedCamera', 'Added Camera'));
         setAddMenuOpen(null);
-    }, [rebuildTree]);
+    }, [rebuildTree, t]);
     const addEmpty = useCallback((type) => {
         const obj = new THREE.Object3D();
         obj.name =
@@ -1445,9 +1477,9 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             obj.add(h);
         }
         rebuildTree();
-        setStatusText(`Added ${obj.name}`);
+        setStatusText(t('useModelEditor.added', 'Added {name}').replace('{name}', String(obj.name)));
         setAddMenuOpen(null);
-    }, [rebuildTree]);
+    }, [rebuildTree, t]);
     /* ─────────────────────────────────────────
        Raycaster click-to-select
        ───────────────────────────────────────── */
@@ -1515,14 +1547,16 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         }
         e.target.value = '';
         if (!onAIPoseVideo) {
-            setAiStatus('AI pose callback not configured.');
+            setAiStatus(t('useModelEditor.aiPoseCallbackNotConfigured', 'AI pose callback not configured.'));
             return;
         }
         setAiBusy(true);
-        setAiStatus('Uploading video for AI pose estimation...');
+        setAiStatus(t('useModelEditor.uploadingVideoForAiPose', 'Uploading video for AI pose estimation...'));
         try {
             const result = await onAIPoseVideo(file);
-            setAiStatus(`Got ${result.frame_count} frames at ${result.fps} fps. Creating animation clip...`);
+            setAiStatus(t('useModelEditor.gotFramesAtFpsCreating', 'Got {frame_count} frames at {fps} fps. Creating animation clip...')
+                .replace('{frame_count}', String(result.frame_count))
+                .replace('{fps}', String(result.fps)));
             const clip = pose3dToClip(result);
             if (clip && rootObjectRef.current) {
                 if (!mixerRef.current) {
@@ -1537,20 +1571,20 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
                 allClipsRef.current = [...allClipsRef.current, newAnim];
                 setAnimations([...allClipsRef.current]);
                 playClip(allClipsRef.current.length - 1);
-                setAiStatus('Animation created successfully!');
+                setAiStatus(t('useModelEditor.animationCreatedSuccessfully', 'Animation created successfully!'));
             }
             else {
-                setAiStatus('Could not create animation — load a rigged model first.');
+                setAiStatus(t('useModelEditor.couldNotCreateAnimationLoad', 'Could not create animation — load a rigged model first.'));
             }
         }
         catch (err) {
             log.error('AI pose error:', err);
-            setAiStatus(`Error: ${String(err)}`);
+            setAiStatus(t('useModelEditor.error', 'Error: {err}').replace('{err}', String(String(err))));
         }
         finally {
             setAiBusy(false);
         }
-    }, [playClip, onAIPoseVideo]);
+    }, [playClip, onAIPoseVideo, t]);
     /* ─────────────────────────────────────────
        Node helpers
        ───────────────────────────────────────── */
@@ -1574,26 +1608,37 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
     const undo = useCallback(() => {
         const label = undoRedoRef.current.undo();
         if (label) {
-            setStatusText(`Undo: ${label}`);
+            setStatusText(t('useModelEditor.undo', 'Undo: {label}').replace('{label}', String(label)));
             rebuildTree();
         }
         setUndoRedoVer((v) => v + 1);
-    }, [rebuildTree]);
+    }, [rebuildTree, t]);
     const redo = useCallback(() => {
         const label = undoRedoRef.current.redo();
         if (label) {
-            setStatusText(`Redo: ${label}`);
+            setStatusText(t('useModelEditor.redo', 'Redo: {label}').replace('{label}', String(label)));
             rebuildTree();
         }
         setUndoRedoVer((v) => v + 1);
-    }, [rebuildTree]);
+    }, [rebuildTree, t]);
     const canUndo = undoRedoRef.current.canUndo();
     const canRedo = undoRedoRef.current.canRedo();
     const undoLabel = undoRedoRef.current.undoLabel;
     const redoLabel = undoRedoRef.current.redoLabel;
-    // Keyboard shortcuts for undo/redo
+    // Keyboard shortcuts for undo/redo — in this editor only, and not in a text field, whose own
+    // undo they took (on the whole page before)
     useEffect(() => {
         const handleKeyDown = (e) => {
+            var _a, _b;
+            const target = e.target instanceof HTMLElement ? e.target : null;
+            const tag = target === null || target === void 0 ? void 0 : target.tagName;
+            const root = (_b = (_a = mountRef.current) === null || _a === void 0 ? void 0 : _a.closest('.nice-app-shell')) !== null && _b !== void 0 ? _b : mountRef.current;
+            if (tag === 'INPUT' ||
+                tag === 'TEXTAREA' ||
+                (target === null || target === void 0 ? void 0 : target.isContentEditable) ||
+                (target && target !== document.body && !(root === null || root === void 0 ? void 0 : root.contains(target)))) {
+                return;
+            }
             if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
                 e.preventDefault();
                 undo();
@@ -1615,30 +1660,35 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             return SUPPORTED_EXTENSIONS.includes(ext);
         });
         if (fileArray.length === 0) {
-            setStatusText('No supported files found');
+            setStatusText(t('useModelEditor.noSupportedFilesFound', 'No supported files found'));
             return;
         }
-        setStatusText(`Importing ${fileArray.length} file(s)...`);
+        setStatusText(t('useModelEditor.importingFileS', 'Importing {fileArray} file(s)...').replace('{fileArray}', String(fileArray.length)));
         let loaded = 0;
         for (const file of fileArray) {
             try {
                 await loadFile(file);
                 loaded++;
-                setStatusText(`Imported ${loaded}/${fileArray.length}: ${file.name}`);
+                setStatusText(t('useModelEditor.imported', 'Imported {loaded}/{fileArray}: {name}')
+                    .replace('{loaded}', String(loaded))
+                    .replace('{fileArray}', String(fileArray.length))
+                    .replace('{name}', String(file.name)));
             }
             catch (err) {
                 log.error(`Failed to import ${file.name}:`, err);
             }
         }
-        setStatusText(`Batch import complete: ${loaded}/${fileArray.length} files loaded`);
-    }, [loadFile]);
+        setStatusText(t('useModelEditor.batchImportCompleteFilesLoaded', 'Batch import complete: {loaded}/{fileArray} files loaded')
+            .replace('{loaded}', String(loaded))
+            .replace('{fileArray}', String(fileArray.length)));
+    }, [loadFile, t]);
     /* ─────────────────────────────────────────
        PBR Presets
        ───────────────────────────────────────── */
     const applyPreset = useCallback((preset) => {
         const node = selectedNode;
         if (!node || !(node.object instanceof THREE.Mesh)) {
-            setStatusText('Select a mesh to apply material preset');
+            setStatusText(t('useModelEditor.selectAMeshToApply', 'Select a mesh to apply material preset'));
             return;
         }
         const mesh = node.object;
@@ -1671,7 +1721,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             mesh.material = newMaterial;
         }
         pushUndo({
-            label: `Apply ${preset.name} preset`,
+            label: t('useModelEditor.applyPreset', 'Apply {name} preset').replace('{name}', String(preset.name)),
             undo: () => {
                 if (Array.isArray(mesh.material)) {
                     mesh.material[materialIdx] = oldClone;
@@ -1690,15 +1740,15 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             },
         });
         setMatRefresh((v) => v + 1);
-        setStatusText(`Applied ${preset.name} preset`);
-    }, [selectedNode, selMaterialIdx, pushUndo]);
+        setStatusText(t('useModelEditor.appliedPreset', 'Applied {name} preset').replace('{name}', String(preset.name)));
+    }, [selectedNode, selMaterialIdx, pushUndo, t]);
     /* ─────────────────────────────────────────
        LOD Generation
        ───────────────────────────────────────── */
     const generateSelectedLOD = useCallback(() => {
         const node = selectedNode;
         if (!node || !(node.object instanceof THREE.Mesh)) {
-            setStatusText('Select a mesh to generate LOD');
+            setStatusText(t('useModelEditor.selectAMeshToGenerate', 'Select a mesh to generate LOD'));
             return;
         }
         const mesh = node.object;
@@ -1707,7 +1757,7 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         parent.remove(mesh);
         parent.add(lod);
         pushUndo({
-            label: `Generate LOD for ${mesh.name}`,
+            label: t('useModelEditor.generateLodFor', 'Generate LOD for {name}').replace('{name}', String(mesh.name)),
             undo: () => {
                 parent.remove(lod);
                 parent.add(mesh);
@@ -1718,8 +1768,8 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
             },
         });
         rebuildTree();
-        setStatusText(`Generated LOD for ${mesh.name} (4 levels)`);
-    }, [selectedNode, pushUndo, rebuildTree]);
+        setStatusText(t('useModelEditor.generatedLodFor4Levels', 'Generated LOD for {name} (4 levels)').replace('{name}', String(mesh.name)));
+    }, [selectedNode, pushUndo, rebuildTree, t]);
     /* ─────────────────────────────────────────
        Instancing
        ───────────────────────────────────────── */
@@ -1727,12 +1777,14 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         const root = rootObjectRef.current || sceneRef.current;
         const result = convertToInstanced(root);
         if (result.created === 0) {
-            setStatusText('No duplicate meshes found to instance');
+            setStatusText(t('useModelEditor.noDuplicateMeshesFoundTo', 'No duplicate meshes found to instance'));
             return;
         }
         rebuildTree();
-        setStatusText(`Created ${result.created} instanced meshes, removed ${result.removed} duplicates`);
-    }, [rebuildTree]);
+        setStatusText(t('useModelEditor.createdInstancedMeshesRemovedDuplicates', 'Created {created} instanced meshes, removed {removed} duplicates')
+            .replace('{created}', String(result.created))
+            .replace('{removed}', String(result.removed)));
+    }, [rebuildTree, t]);
     /* ── HDRI Environment ── */
     const applyHDRI = useCallback((preset) => {
         const renderer = rendererRef.current;
@@ -1750,8 +1802,8 @@ function useModelEditor({ onSaveToLibrary, onAIPoseVideo, }) {
         else {
             setFogEnabled(false);
         }
-        setStatusText(`Environment: ${preset.name}`);
-    }, []);
+        setStatusText(t('useModelEditor.environment', 'Environment: {name}').replace('{name}', String(preset.name)));
+    }, [t]);
     /* ── Snap ── */
     const snapPoint = useCallback((point) => {
         const root = rootObjectRef.current || sceneRef.current;

package/dist/esm/model/useModelViewer.js

@@ -1,4 +1,4 @@
-import { resolveCssColor } from '@nice2dev/ui';
+import { resolveCssColor, getInputEngine } from '@nice2dev/ui';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -8,6 +8,7 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { PLYLoader } from 'three/examples/jsm/loaders/PLYLoader.js';
 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
+import { useNiceTranslation } from '../core/i18n.js';
 import { createFrameClock, SOFT_SHADOW_MAP } from '../core/threeCompat.js';
 
 /**
@@ -41,6 +42,7 @@ const TONE_MAP = {
    ═══════════════════════════════════════════ */
 function useModelViewer(props = {}) {
     var _a;
+    const { t } = useNiceTranslation();
     const { src, format, navigationMode: initNavMode = 'orbit', quality = 'high', autoRotateSpeed: initAutoRotate = 0, backgroundColor = 'var(--nice-bg, #1a1a2e)', showGrid: initShowGrid = true, shadows = true, gamepad = false, cameraPresets: _cameraPresets = [], annotations: _annotations = [], hotspots: _hotspots = [], floorPlans: _floorPlans = [], onHotspotClick: _onHotspotClick, onAnnotationClick: _onAnnotationClick, onLoadProgress, onLoad, onError, clippingPlanes = [], measureMode: initMeasureMode = false, measurements: _measurements = [], onMeasure: _onMeasure, minDistance = 0.1, maxDistance = 1000, fov = 50, vr: _vr = false, walkSpeed = 5, ambientIntensity = 0.5, directionalIntensity = 0.8, antiAlias = true, toneMapping = 'aces', exposure = 1, } = props;
     /* ── refs ── */
     const mountRef = useRef(null);
@@ -160,7 +162,7 @@ function useModelViewer(props = {}) {
         ro.observe(mount);
         // Animation loop
         const animate = () => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f;
             if (disposeRef.current) {
                 return;
             }
@@ -168,12 +170,12 @@ function useModelViewer(props = {}) {
             const dt = (_b = (_a = clockRef.current) === null || _a === void 0 ? void 0 : _a.getDelta()) !== null && _b !== void 0 ? _b : 0;
             // Gamepad FPS-style nav
             if (gamepad && navMode === 'fps') {
-                const pads = (_c = navigator.getGamepads) === null || _c === void 0 ? void 0 : _c.call(navigator);
-                const gp = (_d = pads === null || pads === void 0 ? void 0 : pads[0]) !== null && _d !== void 0 ? _d : null;
+                // The pads the input engine read this frame (1.3.0: the engine is the only pad reader).
+                const gp = (_c = getInputEngine().gamepadSnapshot[0]) !== null && _c !== void 0 ? _c : null;
                 if (gp) {
-                    const lx = (_e = gp.axes[0]) !== null && _e !== void 0 ? _e : 0;
-                    const ly = (_f = gp.axes[1]) !== null && _f !== void 0 ? _f : 0;
-                    const rx = (_g = gp.axes[2]) !== null && _g !== void 0 ? _g : 0;
+                    const lx = (_d = gp.axes[0]) !== null && _d !== void 0 ? _d : 0;
+                    const ly = (_e = gp.axes[1]) !== null && _e !== void 0 ? _e : 0;
+                    const rx = (_f = gp.axes[2]) !== null && _f !== void 0 ? _f : 0;
                     const fwd = new THREE.Vector3();
                     camera.getWorldDirection(fwd);
                     fwd.y = 0;
@@ -328,7 +330,7 @@ function useModelViewer(props = {}) {
         setLoading(true);
         setLoadProgress(0);
         setError(null);
-        setStatusText('Loading…');
+        setStatusText(t('useModelViewer.loading', 'Loading…'));
         const detectedFmt = detectFormat(url, fmt);
         const onProgress = (e) => {
             if (e.lengthComputable) {
@@ -436,21 +438,23 @@ function useModelViewer(props = {}) {
                     mixerRef.current = mixer;
                 }
                 countScene();
-                setStatusText(`Loaded – ${polyCount} tris, ${meshCount} meshes`);
+                setStatusText(t('useModelViewer.loadedTrisMeshes', 'Loaded – {polyCount} tris, {meshCount} meshes')
+                    .replace('{polyCount}', String(polyCount))
+                    .replace('{meshCount}', String(meshCount)));
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad();
             }
         }
         catch (err) {
             const msg = err instanceof Error ? err.message : String(err);
             setError(msg);
-            setStatusText(`Error: ${msg}`);
+            setStatusText(t('useModelViewer.error', 'Error: {msg}').replace('{msg}', String(msg)));
             onError === null || onError === void 0 ? void 0 : onError(err instanceof Error ? err : new Error(msg));
         }
         finally {
             setLoading(false);
             setLoadProgress(1);
         }
-    }, [countScene, detectFormat, onLoad, onError, onLoadProgress, polyCount, meshCount]);
+    }, [countScene, detectFormat, onLoad, onError, onLoadProgress, polyCount, meshCount, t]);
     /* ── auto-load from src ── */
     useEffect(() => {
         if (src) {
@@ -591,9 +595,12 @@ function useModelViewer(props = {}) {
     /* ── finalise status text ── */
     useEffect(() => {
         if (!loading && !error && polyCount > 0) {
-            setStatusText(`${polyCount.toLocaleString()} triangles · ${meshCount} meshes · ${animNames.length} animation(s)`);
+            setStatusText(t('useModelViewer.trianglesMeshesAnimationS', '{polyCount} triangles · {meshCount} meshes · {animNames} animation(s)')
+                .replace('{polyCount}', String(polyCount.toLocaleString()))
+                .replace('{meshCount}', String(meshCount))
+                .replace('{animNames}', String(animNames.length)));
         }
-    }, [loading, error, polyCount, meshCount, animNames.length]);
+    }, [loading, error, polyCount, meshCount, animNames.length, t]);
     return {
         mountRef,
         loading,