@nice2dev/ui-3d 1.1.10 → 1.2.1

package/dist/esm/model/ModelEditorViewport.js

@@ -1,11 +1,22 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui';
 import React from 'react';
+import { useNiceTranslation } from '../core/i18n.js';
 import styles from './ModelEditor.module.css.js';
 
-const ModelEditorViewport = React.memo(({ api }) => {
+/** The viewport badge per editor mode: [key, English]. */
+const MODE_BADGE = {
+    object: ['modelEditorViewport.objectMode', 'OBJECT MODE'],
+    edit: ['modelEditorViewport.editMode', 'EDIT MODE'],
+    pose: ['modelEditorViewport.poseMode', 'POSE MODE'],
+    cad: ['modelEditorViewport.cadMode', 'CAD MODE'],
+    sims: ['modelEditorViewport.simsMode', 'SIMS MODE'],
+};
+const ModelEditorViewport = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.memo(({ api }) => {
+    const { t } = useNiceTranslation();
     const { mountRef, dragOver, handleDragOver, handleDragLeave, handleDrop, handleViewportClick, handleContextMenu, editorMode, polyCount, meshCount, boneCount, shadingMode, setShadingMode, gizmoSpace, setGizmoSpace, contextMenu, closeContextMenu, addPrimitive, addSceneLight, duplicateSelected, deleteSelected, selectedNode, rootObjectRef, focusOnObject, snapEnabled, setSnapEnabled, } = api;
-    return (jsxs(Fragment, { children: [jsxs("div", { ref: mountRef, className: `${styles.viewportContainer} ${dragOver ? styles.dragOver : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleViewportClick, onContextMenu: handleContextMenu, children: [jsxs("div", { className: styles.viewportOverlay, children: [jsxs("span", { className: styles.viewportBadge, children: [editorMode.toUpperCase(), " MODE"] }), jsxs("span", { className: styles.viewportBadge, children: [polyCount.toLocaleString(), " tris \u00B7 ", meshCount, " meshes \u00B7 ", boneCount, " bones"] })] }), jsx("div", { className: styles.viewportShadingBar, children: ['wireframe', 'solid', 'material', 'rendered'].map((m) => (jsx("button", { className: `${styles.shadingBtn} ${shadingMode === m ? styles.shadingBtnActive : ''}`, onClick: (e) => {
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: mountRef, className: `${styles.viewportContainer} ${dragOver ? styles.dragOver : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleViewportClick, onContextMenu: handleContextMenu, children: [jsxs("div", { className: styles.viewportOverlay, children: [jsx("span", { className: styles.viewportBadge, children: t(...MODE_BADGE[editorMode]) }), jsxs("span", { className: styles.viewportBadge, children: [polyCount.toLocaleString(), " tris \u00B7 ", meshCount, " meshes \u00B7 ", boneCount, " bones"] })] }), jsx("div", { className: styles.viewportShadingBar, children: ['wireframe', 'solid', 'material', 'rendered'].map((m) => (jsx("button", { className: `${styles.shadingBtn} ${shadingMode === m ? styles.shadingBtnActive : ''}`, onClick: (e) => {
                                 e.stopPropagation();
                                 setShadingMode(m);
                             }, title: m.charAt(0).toUpperCase() + m.slice(1), "aria-label": m.charAt(0).toUpperCase() + m.slice(1), children: jsx(NiceIcon, { name: m === 'wireframe'
@@ -17,12 +28,11 @@ const ModelEditorViewport = React.memo(({ api }) => {
                                             : 'lightbulb', size: 16 }) }, m))) }), jsx("div", { className: styles.viewportGizmoInfo, children: jsx("button", { className: styles.shadingBtn, onClick: (e) => {
                                 e.stopPropagation();
                                 setGizmoSpace((s) => (s === 'local' ? 'world' : 'local'));
-                            }, title: `Orientation: ${gizmoSpace}`, "aria-label": `Orientation: ${gizmoSpace}`, children: gizmoSpace === 'local' ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "target", size: 14 }), " Local"] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "globe", size: 14 }), " World"] })) }) }), dragOver && (jsx("div", { className: styles.viewportDropZone, children: jsx("span", { children: "Drop 3D files here" }) }))] }), contextMenu && (jsxs("div", { className: styles.contextMenu, style: { top: contextMenu.y, left: contextMenu.x }, onClick: closeContextMenu, children: [jsxs("div", { className: styles.contextItem, onClick: () => addPrimitive('cube'), children: [jsx("span", { children: "Add Cube" }), jsx("span", { className: styles.contextKey, children: "Shift+A" })] }), jsx("div", { className: styles.contextItem, onClick: () => addPrimitive('sphere'), children: jsx("span", { children: "Add Sphere" }) }), jsx("div", { className: styles.contextItem, onClick: () => addSceneLight('point'), children: jsx("span", { children: "Add Point Light" }) }), jsx("div", { className: styles.contextSep }), jsxs("div", { className: styles.contextItem, onClick: duplicateSelected, style: !selectedNode ? { opacity: 0.4, pointerEvents: 'none' } : {}, children: [jsx("span", { children: "Duplicate" }), jsx("span", { className: styles.contextKey, children: "Shift+D" })] }), jsxs("div", { className: styles.contextItem, onClick: deleteSelected, style: !selectedNode ? { opacity: 0.4, pointerEvents: 'none' } : {}, children: [jsx("span", { children: "Delete" }), jsx("span", { className: styles.contextKey, children: "Del" })] }), jsx("div", { className: styles.contextSep }), jsxs("div", { className: styles.contextItem, onClick: () => {
+                            }, title: `Orientation: ${gizmoSpace}`, "aria-label": `Orientation: ${gizmoSpace}`, children: gizmoSpace === 'local' ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "target", size: 14 }), " ", t('modelEditorViewport.local', 'Local')] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "globe", size: 14 }), " ", t('modelEditorViewport.world', 'World')] })) }) }), dragOver && (jsx("div", { className: styles.viewportDropZone, children: jsx("span", { children: t('modelEditorViewport.drop3dFilesHere', 'Drop 3D files here') }) }))] }), contextMenu && (jsxs("div", { className: styles.contextMenu, style: { top: contextMenu.y, left: contextMenu.x }, onClick: closeContextMenu, children: [jsxs("div", { className: styles.contextItem, onClick: () => addPrimitive('cube'), children: [jsx("span", { children: t('modelEditorViewport.addCube', 'Add Cube') }), jsx("span", { className: styles.contextKey, children: "Shift+A" })] }), jsx("div", { className: styles.contextItem, onClick: () => addPrimitive('sphere'), children: jsx("span", { children: t('modelEditorViewport.addSphere', 'Add Sphere') }) }), jsx("div", { className: styles.contextItem, onClick: () => addSceneLight('point'), children: jsx("span", { children: t('modelEditorViewport.addPointLight', 'Add Point Light') }) }), jsx("div", { className: styles.contextSep }), jsxs("div", { className: styles.contextItem, onClick: duplicateSelected, style: !selectedNode ? { opacity: 0.4, pointerEvents: 'none' } : {}, children: [jsx("span", { children: t('modelEditorViewport.duplicate', 'Duplicate') }), jsx("span", { className: styles.contextKey, children: "Shift+D" })] }), jsxs("div", { className: styles.contextItem, onClick: deleteSelected, style: !selectedNode ? { opacity: 0.4, pointerEvents: 'none' } : {}, children: [jsx("span", { children: t('modelEditorViewport.delete', 'Delete') }), jsx("span", { className: styles.contextKey, children: "Del" })] }), jsx("div", { className: styles.contextSep }), jsxs("div", { className: styles.contextItem, onClick: () => {
                             if (rootObjectRef.current) {
                                 focusOnObject(rootObjectRef.current);
                             }
-                        }, children: [jsx("span", { children: "Focus Camera" }), jsx("span", { className: styles.contextKey, children: "F" })] }), jsx("div", { className: styles.contextItem, onClick: () => setSnapEnabled((v) => !v), children: jsxs("span", { children: [snapEnabled && jsx(NiceIcon, { name: "check", size: 14 }), " Snap to Grid"] }) })] }))] }));
-});
-ModelEditorViewport.displayName = 'ModelEditorViewport';
+                        }, children: [jsx("span", { children: t('modelEditorViewport.focusCamera', 'Focus Camera') }), jsx("span", { className: styles.contextKey, children: "F" })] }), jsx("div", { className: styles.contextItem, onClick: () => setSnapEnabled((v) => !v), children: jsxs("span", { children: [snapEnabled && jsx(NiceIcon, { name: "check", size: 14 }), ' ', t('modelEditorViewport.snapToGrid', 'Snap to Grid')] }) })] }))] }));
+}), { displayName: 'ModelEditorViewport' });
 
 export { ModelEditorViewport as default };

package/dist/esm/model/ModelViewer.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { NiceButton, NiceIcon, NiceSelect, NiceSlider } from '@nice2dev/ui';
 import { useState, useRef, useCallback } from 'react';
+import { useNiceTranslation } from '../core/i18n.js';
 import styles from './ModelViewer.module.css.js';
 import { useModelViewer } from './useModelViewer.js';
 
@@ -12,6 +13,7 @@ const NAV_META = {
 };
 const NavLabel = ({ mode }) => (jsxs(Fragment, { children: [jsx(NiceIcon, { name: NAV_META[mode].icon, size: 14 }), " ", NAV_META[mode].label] }));
 const NiceModelViewer = ({ className, showToolbar = true, showStatusBar = true, showInfoPanel = true, toolbarExtra, onFileDrop, children, ...viewerProps }) => {
+    const { t } = useNiceTranslation();
     const api = useModelViewer(viewerProps);
     const [panelOpen, setPanelOpen] = useState(false);
     const [dragOver, setDragOver] = useState(false);
@@ -41,26 +43,24 @@ const NiceModelViewer = ({ className, showToolbar = true, showStatusBar = true,
         const idx = navModes.indexOf(api.navigationMode);
         api.setNavigationMode(navModes[(idx + 1) % navModes.length]);
     }, [api]);
-    return (jsxs("div", { className: `${styles.root} ${className !== null && className !== void 0 ? className : ''}`, children: [showToolbar && (jsxs("div", { className: styles.toolbar, children: [jsxs(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", title: "Open file\u2026", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsx(NiceIcon, { name: "folder", size: 14 }), " Open"] }), jsx("input", { ref: fileInputRef, type: "file", accept: ".fbx,.glb,.gltf,.obj,.dae,.stl,.ply", style: { display: 'none' }, onChange: (e) => {
+    return (jsxs("div", { className: `${styles.root} ${className !== null && className !== void 0 ? className : ''}`, children: [showToolbar && (jsxs("div", { className: styles.toolbar, children: [jsxs(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", title: t('modelViewer.openFile', 'Open file…'), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsx(NiceIcon, { name: "folder", size: 14 }), " ", t('modelViewer.open', 'Open')] }), jsx("input", { ref: fileInputRef, type: "file", accept: ".fbx,.glb,.gltf,.obj,.dae,.stl,.ply", style: { display: 'none' }, onChange: (e) => {
                             var _a;
                             const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                             if (f) {
                                 api.loadFile(f);
                             }
                             e.target.value = '';
-                        } }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", title: "Navigation mode", onClick: cycleNav, children: jsx(NavLabel, { mode: api.navigationMode }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.wireframe ? 'primary' : 'ghost', size: "sm", onClick: () => api.setWireframe(!api.wireframe), title: "Wireframe", "aria-label": "Wireframe", children: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.showGrid ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShowGrid(!api.showGrid), title: "Grid", "aria-label": "Grid", children: jsx(NiceIcon, { name: "grid", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.clippingEnabled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setClippingEnabled(!api.clippingEnabled), title: "Clipping plane", "aria-label": "Clipping plane", children: jsx(NiceIcon, { name: "scissors", size: 16 }) }), api.clippingEnabled && (jsxs(Fragment, { children: [jsx(NiceSelect, { className: styles.animSelect, value: api.clippingAxis, onChange: (val) => api.setClippingAxis(val), options: [
+                        } }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", title: t('modelViewer.navigationMode', 'Navigation mode'), onClick: cycleNav, children: jsx(NavLabel, { mode: api.navigationMode }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.wireframe ? 'primary' : 'ghost', size: "sm", onClick: () => api.setWireframe(!api.wireframe), title: t('modelViewer.wireframe', 'Wireframe'), "aria-label": t('modelViewer.wireframe', 'Wireframe'), children: jsx(NiceIcon, { name: "square", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.showGrid ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShowGrid(!api.showGrid), title: t('modelViewer.grid', 'Grid'), "aria-label": t('modelViewer.grid', 'Grid'), children: jsx(NiceIcon, { name: "grid", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: api.clippingEnabled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setClippingEnabled(!api.clippingEnabled), title: t('modelViewer.clippingPlane', 'Clipping plane'), "aria-label": t('modelViewer.clippingPlane', 'Clipping plane'), children: jsx(NiceIcon, { name: "scissors", size: 16 }) }), api.clippingEnabled && (jsxs(Fragment, { children: [jsx(NiceSelect, { className: styles.animSelect, value: api.clippingAxis, onChange: (val) => api.setClippingAxis(val), options: [
                                     { value: 'x', label: 'X' },
                                     { value: 'y', label: 'Y' },
                                     { value: 'z', label: 'Z' },
-                                ] }), jsx(NiceSlider, { min: -10, max: 10, step: 0.1, value: api.clippingPosition, onChange: (val) => api.setClippingPosition(val), style: { width: 60 } })] })), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.zoomToFit, title: "Zoom to fit", "aria-label": "Zoom to fit", children: jsx(NiceIcon, { name: "search", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.resetCamera, title: "Reset camera", "aria-label": "Reset camera", children: jsx(NiceIcon, { name: "home", size: 16 }) }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
+                                ] }), jsx(NiceSlider, { min: -10, max: 10, step: 0.1, value: api.clippingPosition, onChange: (val) => api.setClippingPosition(val), style: { width: 60 } })] })), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.zoomToFit, title: t('modelViewer.zoomToFit', 'Zoom to fit'), "aria-label": t('modelViewer.zoomToFit', 'Zoom to fit'), children: jsx(NiceIcon, { name: "search", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.resetCamera, title: t('modelViewer.resetCamera', 'Reset camera'), "aria-label": t('modelViewer.resetCamera', 'Reset camera'), children: jsx(NiceIcon, { name: "home", size: 16 }) }), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
                             const url = api.screenshot();
                             const a = document.createElement('a');
                             a.href = url;
                             a.download = 'screenshot.png';
                             a.click();
-                        }, title: "Screenshot", "aria-label": "Screenshot", children: jsx(NiceIcon, { name: "camera", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.toggleFullscreen, title: "Fullscreen", "aria-label": "Fullscreen", children: jsx(NiceIcon, { name: api.isFullscreen ? 'collapse' : 'expand', size: 16 }) }), toolbarExtra, showInfoPanel && (jsx("div", { className: styles.toolRight, children: jsx(NiceButton, { className: `${styles.toolBtn} ${panelOpen ? styles.active : ''}`, variant: panelOpen ? 'primary' : 'ghost', size: "sm", onClick: () => setPanelOpen(!panelOpen), title: "Info panel", "aria-label": "Info panel", children: jsx(NiceIcon, { name: "info", size: 16 }) }) }))] })), jsxs("div", { className: styles.viewport, ref: api.mountRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [api.loading && (jsxs("div", { className: styles.loadingOverlay, children: [jsx("span", { className: styles.loadingText, children: "Loading model\u2026" }), jsx("div", { className: styles.loadingBar, children: jsx("div", { className: styles.loadingBarFill, style: { width: `${(api.loadProgress * 100).toFixed(0)}%` } }) })] })), api.error && (jsxs("div", { className: styles.errorOverlay, children: [jsx(NiceIcon, { name: "warning", size: 28 }), jsx("span", { style: { marginTop: 8 }, children: api.error })] })), dragOver && jsx("div", { className: styles.dropZone, children: "Drop 3D model file here" })] }), jsxs("div", { className: `${styles.sidePanel} ${!panelOpen ? styles.hidden : ''}`, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Model Info" }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Triangles" }), jsx("span", { children: api.polyCount.toLocaleString() })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Meshes" }), jsx("span", { children: api.meshCount })] }), api.dimensions && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Width" }), jsx("span", { children: api.dimensions.width })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Height" }), jsx("span", { children: api.dimensions.height })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: "Depth" }), jsx("span", { children: api.dimensions.depth })] })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Navigation" }), navModes.map((m) => (jsx(NiceButton, { className: styles.toolBtn, variant: api.navigationMode === m ? 'primary' : 'ghost', size: "sm", onClick: () => api.setNavigationMode(m), children: jsx(NavLabel, { mode: m }) }, m)))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Auto Rotate" }), jsx(NiceSlider, { min: 0, max: 10, step: 0.5, value: api.autoRotateSpeed, onChange: (val) => api.setAutoRotateSpeed(val), style: { width: '100%' } })] }), api.animations.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: "Animations" }), api.animations.map((name, i) => (jsxs(NiceButton, { className: styles.toolBtn, variant: api.activeAnimIdx === i ? 'primary' : 'ghost', size: "sm", onClick: () => api.playAnimation(i), children: [jsx(NiceIcon, { name: "play", size: 14 }), " ", name] }, i)))] }))] }), jsxs("div", { className: `${styles.animBar} ${api.animations.length === 0 ? styles.hidden : ''}`, children: [jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.togglePlay, "aria-label": "Play/Pause", children: jsx(NiceIcon, { name: api.isPlaying ? 'pause' : 'play', size: 16 }) }), jsx(NiceSelect, { className: styles.animSelect, value: String(api.activeAnimIdx), onChange: (val) => api.playAnimation(parseInt(val)), options: api.animations.map((n, i) => ({ value: String(i), label: n })) }), jsx(NiceSlider, { className: styles.animSlider, min: 0, max: api.animDuration || 1, step: 0.01, value: api.animTime, onChange: (val) => api.seekAnim(val) }), jsxs("span", { className: styles.toolLabel, children: [api.animTime.toFixed(1), "s / ", api.animDuration.toFixed(1), "s"] })] }), showStatusBar && (jsxs("div", { className: styles.statusBar, children: [jsx("span", { children: api.statusText }), jsxs("div", { className: styles.statusRight, children: [jsx("span", { children: jsx(NavLabel, { mode: api.navigationMode }) }), api.dimensions && (jsxs("span", { children: [api.dimensions.width, "\u00D7", api.dimensions.height, "\u00D7", api.dimensions.depth] }))] })] })), children === null || children === void 0 ? void 0 : children(api)] }));
+                        }, title: t('modelViewer.screenshot', 'Screenshot'), "aria-label": t('modelViewer.screenshot', 'Screenshot'), children: jsx(NiceIcon, { name: "camera", size: 16 }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.toggleFullscreen, title: t('modelViewer.fullscreen', 'Fullscreen'), "aria-label": t('modelViewer.fullscreen', 'Fullscreen'), children: jsx(NiceIcon, { name: api.isFullscreen ? 'collapse' : 'expand', size: 16 }) }), toolbarExtra, showInfoPanel && (jsx("div", { className: styles.toolRight, children: jsx(NiceButton, { className: `${styles.toolBtn} ${panelOpen ? styles.active : ''}`, variant: panelOpen ? 'primary' : 'ghost', size: "sm", onClick: () => setPanelOpen(!panelOpen), title: t('modelViewer.infoPanel', 'Info panel'), "aria-label": t('modelViewer.infoPanel', 'Info panel'), children: jsx(NiceIcon, { name: "info", size: 16 }) }) }))] })), jsxs("div", { className: styles.viewport, ref: api.mountRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [api.loading && (jsxs("div", { className: styles.loadingOverlay, children: [jsx("span", { className: styles.loadingText, children: "Loading model\u2026" }), jsx("div", { className: styles.loadingBar, children: jsx("div", { className: styles.loadingBarFill, style: { width: `${(api.loadProgress * 100).toFixed(0)}%` } }) })] })), api.error && (jsxs("div", { className: styles.errorOverlay, children: [jsx(NiceIcon, { name: "warning", size: 28 }), jsx("span", { style: { marginTop: 8 }, children: api.error })] })), dragOver && (jsx("div", { className: styles.dropZone, children: t('modelViewer.drop3dModelFileHere', 'Drop 3D model file here') }))] }), jsxs("div", { className: `${styles.sidePanel} ${!panelOpen ? styles.hidden : ''}`, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: t('modelViewer.modelInfo', 'Model Info') }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.triangles', 'Triangles') }), jsx("span", { children: api.polyCount.toLocaleString() })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.meshes', 'Meshes') }), jsx("span", { children: api.meshCount })] }), api.dimensions && (jsxs(Fragment, { children: [jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.width', 'Width') }), jsx("span", { children: api.dimensions.width })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.height', 'Height') }), jsx("span", { children: api.dimensions.height })] }), jsxs("div", { className: styles.panelRow, children: [jsx("label", { children: t('modelViewer.depth', 'Depth') }), jsx("span", { children: api.dimensions.depth })] })] }))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: t('modelViewer.navigation', 'Navigation') }), navModes.map((m) => (jsx(NiceButton, { className: styles.toolBtn, variant: api.navigationMode === m ? 'primary' : 'ghost', size: "sm", onClick: () => api.setNavigationMode(m), children: jsx(NavLabel, { mode: m }) }, m)))] }), jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: t('modelViewer.autoRotate', 'Auto Rotate') }), jsx(NiceSlider, { min: 0, max: 10, step: 0.5, value: api.autoRotateSpeed, onChange: (val) => api.setAutoRotateSpeed(val), style: { width: '100%' } })] }), api.animations.length > 0 && (jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: t('modelViewer.animations', 'Animations') }), api.animations.map((name, i) => (jsxs(NiceButton, { className: styles.toolBtn, variant: api.activeAnimIdx === i ? 'primary' : 'ghost', size: "sm", onClick: () => api.playAnimation(i), children: [jsx(NiceIcon, { name: "play", size: 14 }), " ", name] }, i)))] }))] }), jsxs("div", { className: `${styles.animBar} ${api.animations.length === 0 ? styles.hidden : ''}`, children: [jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: api.togglePlay, "aria-label": t('modelViewer.playPause', 'Play/Pause'), children: jsx(NiceIcon, { name: api.isPlaying ? 'pause' : 'play', size: 16 }) }), jsx(NiceSelect, { className: styles.animSelect, value: String(api.activeAnimIdx), onChange: (val) => api.playAnimation(parseInt(val)), options: api.animations.map((n, i) => ({ value: String(i), label: n })) }), jsx(NiceSlider, { className: styles.animSlider, min: 0, max: api.animDuration || 1, step: 0.01, value: api.animTime, onChange: (val) => api.seekAnim(val) }), jsxs("span", { className: styles.toolLabel, children: [api.animTime.toFixed(1), "s / ", api.animDuration.toFixed(1), "s"] })] }), showStatusBar && (jsxs("div", { className: styles.statusBar, children: [jsx("span", { children: api.statusText }), jsxs("div", { className: styles.statusRight, children: [jsx("span", { children: jsx(NavLabel, { mode: api.navigationMode }) }), api.dimensions && (jsxs("span", { children: [api.dimensions.width, "\u00D7", api.dimensions.height, "\u00D7", api.dimensions.depth] }))] })] })), children === null || children === void 0 ? void 0 : children(api)] }));
 };
-/** @deprecated Use NiceModelViewer */
-const ModelViewer = NiceModelViewer;
 
-export { ModelViewer, NiceModelViewer };
+export { NiceModelViewer };

package/dist/esm/model/NiceArmatureEditor.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceTutorialButton, resolveTutorial, NiceIcon } from '@nice2dev/ui';
+import { NiceTutorialButton, resolveTutorial, NiceIcon, createId } from '@nice2dev/ui';
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const ARMATURE_EDITOR_TOUR = [
@@ -145,7 +146,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
             }
         }
         const pose = {
-            id: crypto.randomUUID(),
+            id: createId(),
             name,
             timestamp: Date.now(),
             boneTransforms: transforms,
@@ -211,6 +212,7 @@ function useArmatureEditor(skeleton, scene, onBoneSelect) {
 }
 /* ── Component ── */
 const NiceArmatureEditor = ({ skeleton, skinnedMesh: _skinnedMesh, scene, camera: _camera, onBoneSelect, onPoseChange: _onPoseChange, className = '', tutorial, }) => {
+    const { t } = useNiceTranslation();
     const { bones, selectedBoneId, selectBone, setBonePosition: _setBonePosition, setBoneRotation, addBone, removeBone, savePose, loadPose, resetPose, savedPoses, skeletonHelper: _skeletonHelper, } = useArmatureEditor(skeleton, scene, onBoneSelect);
     const [newBoneName, setNewBoneName] = useState('');
     const selectedBone = useMemo(() => bones.find((b) => b.id === selectedBoneId), [bones, selectedBoneId]);
@@ -222,19 +224,19 @@ const NiceArmatureEditor = ({ skeleton, skinnedMesh: _skinnedMesh, scene, camera
                         padding: '4px 8px',
                         paddingLeft: depth * 16 + 8,
                         background: isSelected ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                        color: isSelected ? 'var(--nice-text-on-primary, #fff)' : 'inherit',
+                        color: isSelected ? 'var(--nice-color-white, #fff)' : 'inherit',
                         cursor: 'pointer',
                         fontSize: 13,
                         borderRadius: 4,
                     }, children: [jsx(NiceIcon, { name: "target", size: 14 }), " ", boneInfo.name] }), childBones.map((child) => renderBoneTree(child, depth + 1))] }, boneInfo.id));
     };
-    return (jsxs("div", { className: `nice-armature-editor ${className}`, style: { position: 'relative', display: 'flex', flexDirection: 'column', gap: 8 }, children: [jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, ARMATURE_EDITOR_TOUR) }) }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsxs("button", { type: "button", onClick: resetPose, title: "Reset Pose", children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " Reset"] }), jsxs("button", { type: "button", onClick: () => savePose(`Pose ${savedPoses.length + 1}`), title: "Save Pose", children: [jsx(NiceIcon, { name: "save", size: 14 }), " Save Pose"] })] }), jsx("div", { style: {
+    return (jsxs("div", { className: `nice-armature-editor ${className}`, style: { position: 'relative', display: 'flex', flexDirection: 'column', gap: 8 }, children: [jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, ARMATURE_EDITOR_TOUR) }) }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsxs("button", { type: "button", onClick: resetPose, title: t('armatureEditor.resetPose', 'Reset Pose'), children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " ", t('armatureEditor.reset', 'Reset')] }), jsxs("button", { type: "button", onClick: () => savePose(`Pose ${savedPoses.length + 1}`), title: t('armatureEditor.savePose', 'Save Pose'), children: [jsx(NiceIcon, { name: "save", size: 14 }), " ", t('armatureEditor.savePose', 'Save Pose')] })] }), jsx("div", { style: {
                     maxHeight: 200,
                     overflowY: 'auto',
                     border: '1px solid var(--nice-border, #e2e8f0)',
                     borderRadius: 6,
                     padding: 4,
-                }, children: rootBones.length === 0 ? (jsx("div", { style: { padding: 16, textAlign: 'center', color: 'var(--nice-text-muted, #999)' }, children: "No skeleton found" })) : (rootBones.map((b) => renderBoneTree(b))) }), selectedBoneId && (jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsx("input", { type: "text", value: newBoneName, onChange: (e) => setNewBoneName(e.target.value), placeholder: "New bone name", style: {
+                }, children: rootBones.length === 0 ? (jsx("div", { style: { padding: 16, textAlign: 'center', color: 'var(--nice-text-muted, #999)' }, children: t('armatureEditor.noSkeletonFound', 'No skeleton found') })) : (rootBones.map((b) => renderBoneTree(b))) }), selectedBoneId && (jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsx("input", { type: "text", value: newBoneName, onChange: (e) => setNewBoneName(e.target.value), placeholder: t('armatureEditor.newBoneName', 'New bone name'), style: {
                             flex: 1,
                             padding: '4px 8px',
                             borderRadius: 4,
@@ -242,7 +244,7 @@ const NiceArmatureEditor = ({ skeleton, skinnedMesh: _skinnedMesh, scene, camera
                         } }), jsx("button", { type: "button", disabled: !newBoneName.trim(), onClick: () => {
                             addBone(selectedBoneId, newBoneName.trim());
                             setNewBoneName('');
-                        }, children: "+ Add" }), jsx("button", { type: "button", onClick: () => removeBone(selectedBoneId), "aria-label": "Remove bone", children: jsx(NiceIcon, { name: "trash", size: 14 }) })] })), selectedBone && (jsxs("div", { style: {
+                        }, children: "+ Add" }), jsx("button", { type: "button", onClick: () => removeBone(selectedBoneId), "aria-label": t('armatureEditor.removeBone', 'Remove bone'), children: jsx(NiceIcon, { name: "trash", size: 14 }) })] })), selectedBone && (jsxs("div", { style: {
                     display: 'grid',
                     gap: 4,
                     fontSize: 12,
@@ -261,7 +263,7 @@ const NiceArmatureEditor = ({ skeleton, skinnedMesh: _skinnedMesh, scene, camera
                             const rot = selectedBone.localRotation.clone();
                             rot.z = parseFloat(e.target.value) * (Math.PI / 180);
                             setBoneRotation(selectedBone.id, rot);
-                        } })] })), savedPoses.length > 0 && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsx("strong", { style: { fontSize: 12 }, children: "Saved Poses" }), savedPoses.map((pose) => (jsx("button", { type: "button", onClick: () => loadPose(pose), style: { textAlign: 'left', padding: '4px 8px', fontSize: 12 }, children: pose.name }, pose.id)))] }))] }));
+                        } })] })), savedPoses.length > 0 && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsx("strong", { style: { fontSize: 12 }, children: t('armatureEditor.savedPoses', 'Saved Poses') }), savedPoses.map((pose) => (jsx("button", { type: "button", onClick: () => loadPose(pose), style: { textAlign: 'left', padding: '4px 8px', fontSize: 12 }, children: pose.name }, pose.id)))] }))] }));
 };
 
 export { NiceArmatureEditor, useArmatureEditor };

package/dist/esm/model/NiceMorphTargetEditor.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceTutorialButton, resolveTutorial, NiceIcon } from '@nice2dev/ui';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const MORPH_TARGET_EDITOR_TOUR = [
@@ -190,6 +191,7 @@ function useMorphTargetEditor(mesh, onInfluenceChange) {
 }
 /* ── Component ── */
 const NiceMorphTargetEditor = ({ mesh, onInfluenceChange, className = '', tutorial, }) => {
+    const { t } = useNiceTranslation();
     const { targets, setInfluence, createMorphTarget, deleteMorphTarget, resetAllInfluences, isAnimating, startAnimation, stopAnimation, animations, addAnimation: _addAnimation, removeAnimation, } = useMorphTargetEditor(mesh, onInfluenceChange);
     const [newName, setNewName] = useState('');
     const handleCreate = () => {
@@ -200,17 +202,17 @@ const NiceMorphTargetEditor = ({ mesh, onInfluenceChange, className = '', tutori
         createMorphTarget(name);
         setNewName('');
     };
-    return (jsxs("div", { className: `nice-morph-target-editor ${className}`, style: { position: 'relative', display: 'grid', gap: 8, fontSize: 13 }, children: [jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, MORPH_TARGET_EDITOR_TOUR) }) }), jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsx("strong", { children: "Morph Targets" }), jsx("button", { type: "button", onClick: resetAllInfluences, style: { fontSize: 11 }, children: "Reset All" })] }), targets.length === 0 && (jsx("div", { style: { opacity: 0.6, fontStyle: 'italic' }, children: "No morph targets found." })), targets.map((target) => (jsxs("div", { style: {
+    return (jsxs("div", { className: `nice-morph-target-editor ${className}`, style: { position: 'relative', display: 'grid', gap: 8, fontSize: 13 }, children: [jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, MORPH_TARGET_EDITOR_TOUR) }) }), jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsx("strong", { children: t('morphTargetEditor.morphTargets', 'Morph Targets') }), jsx("button", { type: "button", onClick: resetAllInfluences, style: { fontSize: 11 }, children: t('morphTargetEditor.resetAll', 'Reset All') })] }), targets.length === 0 && (jsx("div", { style: { opacity: 0.6, fontStyle: 'italic' }, children: t('morphTargetEditor.noMorphTargetsFound', 'No morph targets found.') })), targets.map((target) => (jsxs("div", { style: {
                     display: 'grid',
                     gridTemplateColumns: '1fr 50px auto',
                     alignItems: 'center',
                     gap: 6,
-                }, children: [jsxs("div", { children: [jsx("label", { style: { display: 'block', fontSize: 11, marginBottom: 2 }, children: target.name }), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: target.influence, onChange: (e) => setInfluence(target.index, parseFloat(e.target.value)), style: { width: '100%' } })] }), jsx("span", { style: { fontSize: 11, textAlign: 'right' }, children: target.influence.toFixed(2) }), jsx("button", { type: "button", onClick: () => deleteMorphTarget(target.index), title: "Delete", "aria-label": "Delete", style: { background: 'none', border: 'none', cursor: 'pointer' }, children: jsx(NiceIcon, { name: "trash", size: 14 }) })] }, target.index))), jsxs("div", { style: { display: 'flex', gap: 4, marginTop: 4 }, children: [jsx("input", { type: "text", value: newName, onChange: (e) => setNewName(e.target.value), placeholder: "New morph target name\u2026", onKeyDown: (e) => e.key === 'Enter' && handleCreate(), style: {
+                }, children: [jsxs("div", { children: [jsx("label", { style: { display: 'block', fontSize: 11, marginBottom: 2 }, children: target.name }), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: target.influence, onChange: (e) => setInfluence(target.index, parseFloat(e.target.value)), style: { width: '100%' } })] }), jsx("span", { style: { fontSize: 11, textAlign: 'right' }, children: target.influence.toFixed(2) }), jsx("button", { type: "button", onClick: () => deleteMorphTarget(target.index), title: t('morphTargetEditor.delete', 'Delete'), "aria-label": t('morphTargetEditor.delete', 'Delete'), style: { background: 'none', border: 'none', cursor: 'pointer' }, children: jsx(NiceIcon, { name: "trash", size: 14 }) })] }, target.index))), jsxs("div", { style: { display: 'flex', gap: 4, marginTop: 4 }, children: [jsx("input", { type: "text", value: newName, onChange: (e) => setNewName(e.target.value), placeholder: t('morphTargetEditor.newMorphTargetName', 'New morph target name…'), onKeyDown: (e) => e.key === 'Enter' && handleCreate(), style: {
                             flex: 1,
                             padding: '4px 8px',
                             border: '1px solid var(--nice-border, #e2e8f0)',
                             borderRadius: 4,
-                        } }), jsx("button", { type: "button", onClick: handleCreate, children: "+ Add" })] }), animations.length > 0 && (jsxs("div", { style: { marginTop: 8 }, children: [jsx("strong", { style: { fontSize: 12 }, children: "Animations" }), animations.map((anim) => (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }, children: [jsx("span", { style: { flex: 1 }, children: anim.name }), jsx("button", { type: "button", onClick: () => (isAnimating ? stopAnimation() : startAnimation(anim)), style: { fontSize: 11 }, "aria-label": isAnimating ? 'Stop' : 'Play', children: jsx(NiceIcon, { name: isAnimating ? 'stop' : 'play', size: 14 }) }), jsx("button", { type: "button", onClick: () => removeAnimation(anim.name), style: { fontSize: 11 }, "aria-label": "Remove animation", children: jsx(NiceIcon, { name: "trash", size: 14 }) })] }, anim.name)))] }))] }));
+                        } }), jsx("button", { type: "button", onClick: handleCreate, children: "+ Add" })] }), animations.length > 0 && (jsxs("div", { style: { marginTop: 8 }, children: [jsx("strong", { style: { fontSize: 12 }, children: t('morphTargetEditor.animations', 'Animations') }), animations.map((anim) => (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }, children: [jsx("span", { style: { flex: 1 }, children: anim.name }), jsx("button", { type: "button", onClick: () => (isAnimating ? stopAnimation() : startAnimation(anim)), style: { fontSize: 11 }, "aria-label": isAnimating ? 'Stop' : 'Play', children: jsx(NiceIcon, { name: isAnimating ? 'stop' : 'play', size: 14 }) }), jsx("button", { type: "button", onClick: () => removeAnimation(anim.name), style: { fontSize: 11 }, "aria-label": t('morphTargetEditor.removeAnimation', 'Remove animation'), children: jsx(NiceIcon, { name: "trash", size: 14 }) })] }, anim.name)))] }))] }));
 };
 
 export { NiceMorphTargetEditor, useMorphTargetEditor };

package/dist/esm/model/NiceOctree.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui';
 import { useEffect, useMemo, useState, useRef, useCallback } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /* ── Octree implementation ── */
 const DEFAULT_CONFIG = {
@@ -324,6 +325,7 @@ function useOctree(scene, configOverride) {
 }
 /* ── Component ── */
 const NiceOctree = ({ scene, config, showDebug: initialShowDebug, className = '', }) => {
+    const { t } = useNiceTranslation();
     const octree = useOctree(scene, config);
     useEffect(() => {
         if (initialShowDebug !== undefined) {
@@ -337,7 +339,7 @@ const NiceOctree = ({ scene, config, showDebug: initialShowDebug, className = ''
                     borderRadius: 4,
                     padding: '6px 12px',
                     cursor: 'pointer',
-                }, children: [jsx(NiceIcon, { name: "zap", size: 14 }), " Build Octree"] }), jsxs("div", { style: { fontSize: 11, opacity: 0.7 }, children: ["Nodes: ", octree.nodeCount, " | Objects: ", octree.objectCount] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: octree.showDebug, onChange: (e) => octree.setShowDebug(e.target.checked) }), "Show debug wireframes"] })] }));
+                }, children: [jsx(NiceIcon, { name: "zap", size: 14 }), " ", t('octree.buildOctree', 'Build Octree')] }), jsxs("div", { style: { fontSize: 11, opacity: 0.7 }, children: ["Nodes: ", octree.nodeCount, " | Objects: ", octree.objectCount] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: octree.showDebug, onChange: (e) => octree.setShowDebug(e.target.checked) }), t('octree.showDebugWireframes', 'Show debug wireframes')] })] }));
 };
 
 export { NiceOctree, useOctree };

package/dist/esm/model/NicePhysicsSimulation.js

@@ -2,6 +2,7 @@ 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';
 
 function inferColliderShape(object) {
     if (object instanceof THREE.Mesh) {
@@ -261,19 +262,20 @@ function usePhysicsSimulation(scene, onSimulationStep) {
 }
 /* ── Component ── */
 const NicePhysicsSimulation = ({ scene, selectedObject, onSimulationStep, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { worldConfig, setWorldConfig, bodies, addBody, removeBody, updateBody, getBodyForObject, isRunning, play, pause, step, reset, debugDraw, setDebugDraw, } = usePhysicsSimulation(scene, onSimulationStep);
     const selectedBody = selectedObject
         ? getBodyForObject(selectedObject.name || selectedObject.uuid)
         : undefined;
-    return (jsxs("div", { className: `nice-physics-simulation ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "zap", size: 14 }), " Physics"] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: debugDraw, onChange: (e) => setDebugDraw(e.target.checked) }), "Debug"] })] }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsx("button", { type: "button", onClick: isRunning ? pause : play, style: {
+    return (jsxs("div", { className: `nice-physics-simulation ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "zap", size: 14 }), " ", t('physicsSimulation.physics', 'Physics')] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: debugDraw, onChange: (e) => setDebugDraw(e.target.checked) }), t('physicsSimulation.debug', 'Debug')] })] }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsx("button", { type: "button", onClick: isRunning ? pause : play, style: {
                             flex: 1,
                             background: isRunning ? 'var(--nice-danger, #ef4444)' : 'var(--nice-success, #22c55e)',
-                            color: 'var(--nice-text-on-primary, #fff)',
+                            color: 'var(--nice-color-white, #fff)',
                             border: 'none',
                             borderRadius: 4,
                             padding: '5px 8px',
                             cursor: 'pointer',
-                        }, children: isRunning ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "pause", size: 14 }), " Pause"] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "play", size: 14 }), " Play"] })) }), jsxs("button", { type: "button", onClick: step, disabled: isRunning, style: { padding: '5px 8px', cursor: 'pointer' }, children: [jsx(NiceIcon, { name: "skip-forward", size: 14 }), " Step"] }), jsxs("button", { type: "button", onClick: reset, style: { padding: '5px 8px', cursor: 'pointer' }, children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " Reset"] })] }), jsxs("label", { children: ["Gravity Y: ", worldConfig.gravity.y.toFixed(1), jsx("input", { type: "range", min: -20, max: 0, step: 0.1, value: worldConfig.gravity.y, onChange: (e) => setWorldConfig({ gravity: new THREE.Vector3(0, parseFloat(e.target.value), 0) }), style: { width: '100%' } })] }), selectedObject && (jsxs("fieldset", { style: {
+                        }, children: isRunning ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "pause", size: 14 }), " ", t('physicsSimulation.pause', 'Pause')] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "play", size: 14 }), " ", t('physicsSimulation.play', 'Play')] })) }), jsxs("button", { type: "button", onClick: step, disabled: isRunning, style: { padding: '5px 8px', cursor: 'pointer' }, children: [jsx(NiceIcon, { name: "skip-forward", size: 14 }), " ", t('physicsSimulation.step', 'Step')] }), jsxs("button", { type: "button", onClick: reset, style: { padding: '5px 8px', cursor: 'pointer' }, children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " ", t('physicsSimulation.reset', 'Reset')] })] }), jsxs("label", { children: ["Gravity Y: ", worldConfig.gravity.y.toFixed(1), jsx("input", { type: "range", min: -20, max: 0, step: 0.1, value: worldConfig.gravity.y, onChange: (e) => setWorldConfig({ gravity: new THREE.Vector3(0, parseFloat(e.target.value), 0) }), style: { width: '100%' } })] }), selectedObject && (jsxs("fieldset", { style: {
                     border: '1px solid var(--nice-border, #e2e8f0)',
                     borderRadius: 6,
                     padding: 6,
@@ -286,7 +288,7 @@ const NicePhysicsSimulation = ({ scene, selectedObject, onSimulationStep, classN
                             borderRadius: 4,
                             padding: '5px 8px',
                             cursor: 'pointer',
-                        }, children: "+ Add Rigid Body" })) : (jsxs(Fragment, { children: [jsxs("label", { children: ["Type:", jsxs("select", { value: selectedBody.bodyType, onChange: (e) => updateBody(selectedBody.id, { bodyType: e.target.value }), style: { marginLeft: 8, width: '100%' }, children: [jsx("option", { value: "dynamic", children: "Dynamic" }), jsx("option", { value: "static", children: "Static" }), jsx("option", { value: "kinematic", children: "Kinematic" })] })] }), jsxs("label", { children: ["Shape:", jsxs("select", { value: selectedBody.colliderShape, onChange: (e) => updateBody(selectedBody.id, { colliderShape: e.target.value }), style: { marginLeft: 8, width: '100%' }, children: [jsx("option", { value: "box", children: "Box" }), jsx("option", { value: "sphere", children: "Sphere" }), jsx("option", { value: "capsule", children: "Capsule" }), jsx("option", { value: "convexHull", children: "Convex Hull" }), jsx("option", { value: "trimesh", children: "Trimesh" })] })] }), jsxs("label", { children: ["Mass: ", selectedBody.mass.toFixed(1), jsx("input", { type: "range", min: 0.1, max: 100, step: 0.1, value: selectedBody.mass, onChange: (e) => updateBody(selectedBody.id, { mass: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Restitution: ", selectedBody.restitution.toFixed(2), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: selectedBody.restitution, onChange: (e) => updateBody(selectedBody.id, { restitution: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Friction: ", selectedBody.friction.toFixed(2), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: selectedBody.friction, onChange: (e) => updateBody(selectedBody.id, { friction: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: selectedBody.isSensor, onChange: (e) => updateBody(selectedBody.id, { isSensor: e.target.checked }) }), "Sensor (trigger only)"] }), jsx("button", { type: "button", onClick: () => removeBody(selectedBody.id), style: {
+                        }, children: "+ Add Rigid Body" })) : (jsxs(Fragment, { children: [jsxs("label", { children: ["Type:", jsxs("select", { value: selectedBody.bodyType, onChange: (e) => updateBody(selectedBody.id, { bodyType: e.target.value }), style: { marginLeft: 8, width: '100%' }, children: [jsx("option", { value: "dynamic", children: t('physicsSimulation.dynamic', 'Dynamic') }), jsx("option", { value: "static", children: t('physicsSimulation.static', 'Static') }), jsx("option", { value: "kinematic", children: t('physicsSimulation.kinematic', 'Kinematic') })] })] }), jsxs("label", { children: ["Shape:", jsxs("select", { value: selectedBody.colliderShape, onChange: (e) => updateBody(selectedBody.id, { colliderShape: e.target.value }), style: { marginLeft: 8, width: '100%' }, children: [jsx("option", { value: "box", children: "Box" }), jsx("option", { value: "sphere", children: t('physicsSimulation.sphere', 'Sphere') }), jsx("option", { value: "capsule", children: t('physicsSimulation.capsule', 'Capsule') }), jsx("option", { value: "convexHull", children: t('physicsSimulation.convexHull', 'Convex Hull') }), jsx("option", { value: "trimesh", children: t('physicsSimulation.trimesh', 'Trimesh') })] })] }), jsxs("label", { children: ["Mass: ", selectedBody.mass.toFixed(1), jsx("input", { type: "range", min: 0.1, max: 100, step: 0.1, value: selectedBody.mass, onChange: (e) => updateBody(selectedBody.id, { mass: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Restitution: ", selectedBody.restitution.toFixed(2), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: selectedBody.restitution, onChange: (e) => updateBody(selectedBody.id, { restitution: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Friction: ", selectedBody.friction.toFixed(2), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: selectedBody.friction, onChange: (e) => updateBody(selectedBody.id, { friction: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: selectedBody.isSensor, onChange: (e) => updateBody(selectedBody.id, { isSensor: e.target.checked }) }), "Sensor (trigger only)"] }), jsx("button", { type: "button", onClick: () => removeBody(selectedBody.id), style: {
                                     background: 'var(--nice-danger, #ef4444)',
                                     color: 'var(--nice-text-on-primary, #fff)',
                                     border: 'none',
@@ -294,7 +296,7 @@ const NicePhysicsSimulation = ({ scene, selectedObject, onSimulationStep, classN
                                     padding: '4px 8px',
                                     cursor: 'pointer',
                                     fontSize: 11,
-                                }, children: "Remove Rigid Body" })] }))] })), jsxs("div", { style: { fontSize: 11, opacity: 0.7 }, children: ["Total bodies: ", bodies.length] })] }));
+                                }, children: t('physicsSimulation.removeRigidBody', 'Remove Rigid Body') })] }))] })), jsxs("div", { style: { fontSize: 11, opacity: 0.7 }, children: ["Total bodies: ", bodies.length] })] }));
 };
 
 export { NicePhysicsSimulation, usePhysicsSimulation };

package/dist/esm/model/NiceProceduralGeometry.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } 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';
 
 /* ── Generators ── */
 function seededRng(seed) {
@@ -292,21 +293,22 @@ function useProceduralGeometry(scene, onGenerated) {
 }
 /* ── Component ── */
 const NiceProceduralGeometry = ({ scene, onGenerated, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { type, setType, treeParams, setTreeParams, rockParams, setRockParams, buildingParams, setBuildingParams, gearParams, setGearParams, generate, } = useProceduralGeometry(scene, onGenerated);
-    return (jsxs("div", { className: `nice-procedural-geometry ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsx("strong", { children: "Procedural Geometry" }), jsxs("select", { value: type, onChange: (e) => setType(e.target.value), style: { width: '100%', padding: '4px 8px' }, children: [jsx("option", { value: "tree", children: "Tree" }), jsx("option", { value: "rock", children: "Rock" }), jsx("option", { value: "building", children: "Building" }), jsx("option", { value: "pipe", children: "Pipe" }), jsx("option", { value: "gear", children: "Gear" })] }), type === 'tree' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Height: ", treeParams.trunkHeight.toFixed(1), jsx("input", { type: "range", min: 1, max: 15, step: 0.5, value: treeParams.trunkHeight, onChange: (e) => setTreeParams({ ...treeParams, trunkHeight: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Branches: ", treeParams.branches, jsx("input", { type: "range", min: 1, max: 6, value: treeParams.branches, onChange: (e) => setTreeParams({ ...treeParams, branches: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Depth: ", treeParams.depth, jsx("input", { type: "range", min: 1, max: 5, value: treeParams.depth, onChange: (e) => setTreeParams({ ...treeParams, depth: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Angle: ", treeParams.branchAngle, "\u00B0", jsx("input", { type: "range", min: 10, max: 80, value: treeParams.branchAngle, onChange: (e) => setTreeParams({ ...treeParams, branchAngle: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Seed: ", treeParams.seed, jsx("input", { type: "range", min: 1, max: 999, value: treeParams.seed, onChange: (e) => setTreeParams({ ...treeParams, seed: parseInt(e.target.value, 10) }), style: { width: '100%' } })] })] })), type === 'rock' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Radius: ", rockParams.radius.toFixed(1), jsx("input", { type: "range", min: 0.2, max: 5, step: 0.1, value: rockParams.radius, onChange: (e) => setRockParams({ ...rockParams, radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Detail: ", rockParams.detail, jsx("input", { type: "range", min: 1, max: 5, value: rockParams.detail, onChange: (e) => setRockParams({ ...rockParams, detail: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Noise: ", rockParams.noiseAmount.toFixed(2), jsx("input", { type: "range", min: 0, max: 0.5, step: 0.01, value: rockParams.noiseAmount, onChange: (e) => setRockParams({ ...rockParams, noiseAmount: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Seed: ", rockParams.seed, jsx("input", { type: "range", min: 1, max: 999, value: rockParams.seed, onChange: (e) => setRockParams({ ...rockParams, seed: parseInt(e.target.value, 10) }), style: { width: '100%' } })] })] })), type === 'building' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Width: ", buildingParams.width, jsx("input", { type: "range", min: 4, max: 20, step: 1, value: buildingParams.width, onChange: (e) => setBuildingParams({ ...buildingParams, width: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Floors: ", buildingParams.floors, jsx("input", { type: "range", min: 1, max: 20, value: buildingParams.floors, onChange: (e) => setBuildingParams({ ...buildingParams, floors: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Windows/Floor: ", buildingParams.windowsPerFloor, jsx("input", { type: "range", min: 1, max: 10, value: buildingParams.windowsPerFloor, onChange: (e) => setBuildingParams({
+    return (jsxs("div", { className: `nice-procedural-geometry ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsx("strong", { children: t('proceduralGeometry.proceduralGeometry', 'Procedural Geometry') }), jsxs("select", { value: type, onChange: (e) => setType(e.target.value), style: { width: '100%', padding: '4px 8px' }, children: [jsx("option", { value: "tree", children: t('proceduralGeometry.tree', 'Tree') }), jsx("option", { value: "rock", children: t('proceduralGeometry.rock', 'Rock') }), jsx("option", { value: "building", children: t('proceduralGeometry.building', 'Building') }), jsx("option", { value: "pipe", children: t('proceduralGeometry.pipe', 'Pipe') }), jsx("option", { value: "gear", children: t('proceduralGeometry.gear', 'Gear') })] }), type === 'tree' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Height: ", treeParams.trunkHeight.toFixed(1), jsx("input", { type: "range", min: 1, max: 15, step: 0.5, value: treeParams.trunkHeight, onChange: (e) => setTreeParams({ ...treeParams, trunkHeight: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Branches: ", treeParams.branches, jsx("input", { type: "range", min: 1, max: 6, value: treeParams.branches, onChange: (e) => setTreeParams({ ...treeParams, branches: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Depth: ", treeParams.depth, jsx("input", { type: "range", min: 1, max: 5, value: treeParams.depth, onChange: (e) => setTreeParams({ ...treeParams, depth: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Angle: ", treeParams.branchAngle, "\u00B0", jsx("input", { type: "range", min: 10, max: 80, value: treeParams.branchAngle, onChange: (e) => setTreeParams({ ...treeParams, branchAngle: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Seed: ", treeParams.seed, jsx("input", { type: "range", min: 1, max: 999, value: treeParams.seed, onChange: (e) => setTreeParams({ ...treeParams, seed: parseInt(e.target.value, 10) }), style: { width: '100%' } })] })] })), type === 'rock' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Radius: ", rockParams.radius.toFixed(1), jsx("input", { type: "range", min: 0.2, max: 5, step: 0.1, value: rockParams.radius, onChange: (e) => setRockParams({ ...rockParams, radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Detail: ", rockParams.detail, jsx("input", { type: "range", min: 1, max: 5, value: rockParams.detail, onChange: (e) => setRockParams({ ...rockParams, detail: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Noise: ", rockParams.noiseAmount.toFixed(2), jsx("input", { type: "range", min: 0, max: 0.5, step: 0.01, value: rockParams.noiseAmount, onChange: (e) => setRockParams({ ...rockParams, noiseAmount: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Seed: ", rockParams.seed, jsx("input", { type: "range", min: 1, max: 999, value: rockParams.seed, onChange: (e) => setRockParams({ ...rockParams, seed: parseInt(e.target.value, 10) }), style: { width: '100%' } })] })] })), type === 'building' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Width: ", buildingParams.width, jsx("input", { type: "range", min: 4, max: 20, step: 1, value: buildingParams.width, onChange: (e) => setBuildingParams({ ...buildingParams, width: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Floors: ", buildingParams.floors, jsx("input", { type: "range", min: 1, max: 20, value: buildingParams.floors, onChange: (e) => setBuildingParams({ ...buildingParams, floors: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Windows/Floor: ", buildingParams.windowsPerFloor, jsx("input", { type: "range", min: 1, max: 10, value: buildingParams.windowsPerFloor, onChange: (e) => setBuildingParams({
                                     ...buildingParams,
                                     windowsPerFloor: parseInt(e.target.value, 10),
                                 }), style: { width: '100%' } })] }), jsxs("label", { children: ["Roof:", jsxs("select", { value: buildingParams.roofStyle, onChange: (e) => setBuildingParams({
                                     ...buildingParams,
                                     roofStyle: e.target.value,
-                                }), style: { marginLeft: 8 }, children: [jsx("option", { value: "flat", children: "Flat" }), jsx("option", { value: "gable", children: "Gable" }), jsx("option", { value: "hip", children: "Hip" })] })] })] })), type === 'gear' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Outer Radius: ", gearParams.outerRadius.toFixed(1), jsx("input", { type: "range", min: 0.5, max: 5, step: 0.1, value: gearParams.outerRadius, onChange: (e) => setGearParams({ ...gearParams, outerRadius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Teeth: ", gearParams.teeth, jsx("input", { type: "range", min: 4, max: 30, value: gearParams.teeth, onChange: (e) => setGearParams({ ...gearParams, teeth: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Tooth Depth: ", gearParams.toothDepth.toFixed(2), jsx("input", { type: "range", min: 0.05, max: 1, step: 0.05, value: gearParams.toothDepth, onChange: (e) => setGearParams({ ...gearParams, toothDepth: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Thickness: ", gearParams.thickness.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 2, step: 0.1, value: gearParams.thickness, onChange: (e) => setGearParams({ ...gearParams, thickness: parseFloat(e.target.value) }), style: { width: '100%' } })] })] })), jsxs("button", { type: "button", onClick: generate, style: {
+                                }), style: { marginLeft: 8 }, children: [jsx("option", { value: "flat", children: t('proceduralGeometry.flat', 'Flat') }), jsx("option", { value: "gable", children: t('proceduralGeometry.gable', 'Gable') }), jsx("option", { value: "hip", children: "Hip" })] })] })] })), type === 'gear' && (jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Outer Radius: ", gearParams.outerRadius.toFixed(1), jsx("input", { type: "range", min: 0.5, max: 5, step: 0.1, value: gearParams.outerRadius, onChange: (e) => setGearParams({ ...gearParams, outerRadius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Teeth: ", gearParams.teeth, jsx("input", { type: "range", min: 4, max: 30, value: gearParams.teeth, onChange: (e) => setGearParams({ ...gearParams, teeth: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Tooth Depth: ", gearParams.toothDepth.toFixed(2), jsx("input", { type: "range", min: 0.05, max: 1, step: 0.05, value: gearParams.toothDepth, onChange: (e) => setGearParams({ ...gearParams, toothDepth: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Thickness: ", gearParams.thickness.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 2, step: 0.1, value: gearParams.thickness, onChange: (e) => setGearParams({ ...gearParams, thickness: parseFloat(e.target.value) }), style: { width: '100%' } })] })] })), jsxs("button", { type: "button", onClick: generate, style: {
                     background: 'var(--nice-color-accent, #6366f1)',
                     color: 'var(--nice-text-on-primary, #fff)',
                     border: 'none',
                     borderRadius: 4,
                     padding: '6px 12px',
                     cursor: 'pointer',
-                }, children: [jsx(NiceIcon, { name: "wand", size: 14 }), " Generate"] })] }));
+                }, children: [jsx(NiceIcon, { name: "wand", size: 14 }), " ", t('proceduralGeometry.generate', 'Generate')] })] }));
 };
 
 export { NiceProceduralGeometry, generateBuilding, generateGear, generatePipe, generateRock, generateTree, useProceduralGeometry };

package/dist/esm/model/NiceTerrainEditor.js

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { NiceTutorialButton, resolveTutorial, NiceIcon } from '@nice2dev/ui';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const TERRAIN_EDITOR_TOUR = [
@@ -319,6 +320,7 @@ function useTerrainEditor(scene, camera, canvas, config = { width: 100, depth: 1
 }
 /* ── Component ── */
 const NiceTerrainEditor = ({ scene, camera, canvas, config: configProp, onTerrainChange, className = '', tutorial, }) => {
+    const { t } = useNiceTranslation();
     const config = {
         width: 100,
         depth: 100,
@@ -329,43 +331,43 @@ const NiceTerrainEditor = ({ scene, camera, canvas, config: configProp, onTerrai
     const { brush, setBrush, isPainting, startPainting, stopPainting, generateFlat, generateNoise, exportHeightmap, textureLayers, setTextureLayer, activeTextureLayer, setActiveTextureLayer, } = useTerrainEditor(scene, camera, canvas, config, onTerrainChange);
     const [noiseOctaves, setNoiseOctaves] = useState(6);
     const [noisePersistence, setNoisePersistence] = useState(0.5);
-    return (jsxs("div", { className: `nice-terrain-editor ${className}`, style: { position: 'relative', display: 'grid', gap: 8, fontSize: 13 }, children: [jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, TERRAIN_EDITOR_TOUR) }) }), jsx("strong", { children: "Terrain Editor" }), jsxs("fieldset", { style: {
+    return (jsxs("div", { className: `nice-terrain-editor ${className}`, style: { position: 'relative', display: 'grid', gap: 8, fontSize: 13 }, children: [jsx("span", { style: { position: 'absolute', top: 0, right: 0, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, TERRAIN_EDITOR_TOUR) }) }), jsx("strong", { children: t('terrainEditor.terrainEditor', 'Terrain Editor') }), jsxs("fieldset", { style: {
                     border: '1px solid var(--nice-border, #e2e8f0)',
                     borderRadius: 6,
                     padding: 4,
                     display: 'flex',
                     flexWrap: 'wrap',
                     gap: 2,
-                }, children: [jsx("legend", { style: { fontSize: 11 }, children: "Brush" }), ['raise', 'lower', 'flatten', 'smooth', 'noise', 'paint'].map((m) => (jsx("button", { type: "button", onClick: () => setBrush({ mode: m }), style: {
+                }, children: [jsx("legend", { style: { fontSize: 11 }, children: t('terrainEditor.brush', 'Brush') }), ['raise', 'lower', 'flatten', 'smooth', 'noise', 'paint'].map((m) => (jsx("button", { type: "button", onClick: () => setBrush({ mode: m }), style: {
                             padding: '3px 6px',
                             fontSize: 11,
                             cursor: 'pointer',
                             borderRadius: 4,
                             border: '1px solid var(--nice-border, #e2e8f0)',
                             background: brush.mode === m ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                            color: brush.mode === m ? 'var(--nice-text-on-primary, #fff)' : 'inherit',
+                            color: brush.mode === m ? 'var(--nice-color-white, #fff)' : 'inherit',
                         }, children: m }, m)))] }), jsxs("label", { children: ["Radius: ", brush.radius.toFixed(1), jsx("input", { type: "range", min: 0.5, max: 20, step: 0.5, value: brush.radius, onChange: (e) => setBrush({ radius: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Strength: ", brush.strength.toFixed(2), jsx("input", { type: "range", min: 0.01, max: 1, step: 0.01, value: brush.strength, onChange: (e) => setBrush({ strength: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsx("button", { type: "button", onClick: isPainting ? stopPainting : startPainting, style: {
                     background: isPainting
                         ? 'var(--nice-danger, #ef4444)'
                         : 'var(--nice-color-accent, #6366f1)',
-                    color: 'var(--nice-text-on-primary, #fff)',
+                    color: 'var(--nice-color-white, #fff)',
                     border: 'none',
                     borderRadius: 4,
                     padding: '6px 12px',
                     cursor: 'pointer',
-                }, children: isPainting ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "stop", size: 14 }), " Stop Painting"] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "brush", size: 14 }), " Start Painting"] })) }), jsxs("fieldset", { style: {
+                }, children: isPainting ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "stop", size: 14 }), " ", t('terrainEditor.stopPainting', 'Stop Painting')] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "brush", size: 14 }), " ", t('terrainEditor.startPainting', 'Start Painting')] })) }), jsxs("fieldset", { style: {
                     border: '1px solid var(--nice-border, #e2e8f0)',
                     borderRadius: 6,
                     padding: 6,
                     display: 'grid',
                     gap: 4,
-                }, children: [jsx("legend", { style: { fontSize: 11 }, children: "Procedural" }), jsxs("label", { children: ["Octaves: ", noiseOctaves, jsx("input", { type: "range", min: 1, max: 10, value: noiseOctaves, onChange: (e) => setNoiseOctaves(parseInt(e.target.value, 10)), style: { width: '100%' } })] }), jsxs("label", { children: ["Persistence: ", noisePersistence.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 1, step: 0.05, value: noisePersistence, onChange: (e) => setNoisePersistence(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsxs("button", { type: "button", onClick: () => generateNoise(noiseOctaves, noisePersistence), style: { flex: 1 }, children: [jsx(NiceIcon, { name: "mountain", size: 14 }), " Generate Noise"] }), jsxs("button", { type: "button", onClick: generateFlat, style: { flex: 1 }, children: [jsx(NiceIcon, { name: "square", size: 14 }), " Flatten"] })] })] }), brush.mode === 'paint' && (jsxs("fieldset", { style: {
+                }, children: [jsx("legend", { style: { fontSize: 11 }, children: t('terrainEditor.procedural', 'Procedural') }), jsxs("label", { children: ["Octaves: ", noiseOctaves, jsx("input", { type: "range", min: 1, max: 10, value: noiseOctaves, onChange: (e) => setNoiseOctaves(parseInt(e.target.value, 10)), style: { width: '100%' } })] }), jsxs("label", { children: ["Persistence: ", noisePersistence.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 1, step: 0.05, value: noisePersistence, onChange: (e) => setNoisePersistence(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxs("div", { style: { display: 'flex', gap: 4 }, children: [jsxs("button", { type: "button", onClick: () => generateNoise(noiseOctaves, noisePersistence), style: { flex: 1 }, children: [jsx(NiceIcon, { name: "mountain", size: 14 }), ' ', t('terrainEditor.generateNoise', 'Generate Noise')] }), jsxs("button", { type: "button", onClick: generateFlat, style: { flex: 1 }, children: [jsx(NiceIcon, { name: "square", size: 14 }), " ", t('terrainEditor.flatten', 'Flatten')] })] })] }), brush.mode === 'paint' && (jsxs("fieldset", { style: {
                     border: '1px solid var(--nice-border, #e2e8f0)',
                     borderRadius: 6,
                     padding: 6,
                     display: 'grid',
                     gap: 4,
-                }, children: [jsx("legend", { style: { fontSize: 11 }, children: "Texture Layers" }), textureLayers.map((layer, i) => (jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "radio", name: "texLayer", checked: activeTextureLayer === i, onChange: () => setActiveTextureLayer(i) }), jsx("input", { type: "text", value: layer.name, onChange: (e) => setTextureLayer(i, { name: e.target.value }), style: {
+                }, children: [jsx("legend", { style: { fontSize: 11 }, children: t('terrainEditor.textureLayers', 'Texture Layers') }), textureLayers.map((layer, i) => (jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "radio", name: "texLayer", checked: activeTextureLayer === i, onChange: () => setActiveTextureLayer(i) }), jsx("input", { type: "text", value: layer.name, onChange: (e) => setTextureLayer(i, { name: e.target.value }), style: {
                                     flex: 1,
                                     padding: '2px 6px',
                                     border: '1px solid var(--nice-border, #e2e8f0)',
@@ -378,7 +380,7 @@ const NiceTerrainEditor = ({ scene, camera, canvas, config: configProp, onTerrai
                         link.href = c.toDataURL('image/png');
                         link.click();
                     }
-                }, style: { fontSize: 11 }, children: [jsx(NiceIcon, { name: "download", size: 14 }), " Export Heightmap PNG"] })] }));
+                }, style: { fontSize: 11 }, children: [jsx(NiceIcon, { name: "download", size: 14 }), ' ', t('terrainEditor.exportHeightmapPng', 'Export Heightmap PNG')] })] }));
 };
 
 export { NiceTerrainEditor, useTerrainEditor };

package/dist/esm/model/NiceWeightPainter.js

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } 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';
 
 /* ── Weight painting utilities ── */
 function getFalloff(distance, radius, type) {
@@ -225,6 +226,7 @@ function updateHeatMapColors(mesh, boneIndex, colors) {
 }
 /* ── Component ── */
 const NiceWeightPainter = ({ skinnedMesh, activeBoneIndex: initialBoneIndex, scene, camera, canvas, onWeightsChange, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { brush, setBrush, isPainting, activeBoneIndex, setActiveBoneIndex, boneNames, startPainting, stopPainting, normalizeWeights, showHeatMap, setShowHeatMap, } = useWeightPainter(skinnedMesh, scene, camera, canvas, onWeightsChange);
     useEffect(() => {
         setActiveBoneIndex(initialBoneIndex);
@@ -235,11 +237,11 @@ const NiceWeightPainter = ({ skinnedMesh, activeBoneIndex: initialBoneIndex, sce
                     border: '1px solid var(--nice-border, #e2e8f0)',
                     borderRadius: 6,
                     padding: 4,
-                }, children: [jsx("legend", { style: { fontSize: 11 }, children: "Mode" }), ['add', 'subtract', 'smooth', 'blur'].map((mode) => (jsx("button", { type: "button", onClick: () => setBrush({ mode }), style: {
+                }, children: [jsx("legend", { style: { fontSize: 11 }, children: t('weightPainter.mode', 'Mode') }), ['add', 'subtract', 'smooth', 'blur'].map((mode) => (jsx("button", { type: "button", onClick: () => setBrush({ mode }), style: {
                             flex: 1,
                             padding: '4px 6px',
                             background: brush.mode === mode ? 'var(--nice-color-accent, #6366f1)' : 'transparent',
-                            color: brush.mode === mode ? 'var(--nice-text-on-primary, #fff)' : 'inherit',
+                            color: brush.mode === mode ? 'var(--nice-color-white, #fff)' : 'inherit',
                             border: '1px solid var(--nice-border, #e2e8f0)',
                             borderRadius: 4,
                             cursor: 'pointer',
@@ -249,12 +251,12 @@ const NiceWeightPainter = ({ skinnedMesh, activeBoneIndex: initialBoneIndex, sce
                             background: isPainting
                                 ? 'var(--nice-danger, #ef4444)'
                                 : 'var(--nice-color-accent, #6366f1)',
-                            color: 'var(--nice-text-on-primary, #fff)',
+                            color: 'var(--nice-color-white, #fff)',
                             border: 'none',
                             borderRadius: 4,
                             padding: '6px 12px',
                             cursor: 'pointer',
-                        }, children: isPainting ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "stop", size: 14 }), " Stop Painting"] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "brush", size: 14 }), " Start Painting"] })) }), jsxs("button", { type: "button", onClick: normalizeWeights, title: "Normalize all weights", children: [jsx(NiceIcon, { name: "scale", size: 14 }), " Normalize"] })] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: showHeatMap, onChange: (e) => setShowHeatMap(e.target.checked) }), "Show weight heat map"] })] }));
+                        }, children: isPainting ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "stop", size: 14 }), " ", t('weightPainter.stopPainting', 'Stop Painting')] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "brush", size: 14 }), ' ', t('weightPainter.startPainting', 'Start Painting')] })) }), jsxs("button", { type: "button", onClick: normalizeWeights, title: t('weightPainter.normalizeAllWeights', 'Normalize all weights'), children: [jsx(NiceIcon, { name: "scale", size: 14 }), " ", t('weightPainter.normalize', 'Normalize')] })] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [jsx("input", { type: "checkbox", checked: showHeatMap, onChange: (e) => setShowHeatMap(e.target.checked) }), t('weightPainter.showWeightHeatMap', 'Show weight heat map')] })] }));
 };
 
 export { NiceWeightPainter, useWeightPainter };