@nice2dev/ui-3d 1.2.0 → 1.2.2

package/dist/esm/rendering/NiceSSR.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import * as THREE from 'three';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /* ── SSR Shader ── */
 const SSR_VERTEX = `
@@ -206,6 +207,7 @@ function useSSR(renderer, scene, camera, configOverride) {
             material.dispose();
             ortho.remove(quad);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- the uniforms' first values; the next effect updates them without rebuilding the render targets
     }, [renderer, camera, config.resolution]);
     // Update uniforms when config changes
     useEffect(() => {
@@ -253,8 +255,9 @@ function useSSR(renderer, scene, camera, configOverride) {
 }
 /* ── Component ── */
 const NiceSSR = ({ renderer, scene, camera, config: configProp, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { config, setConfig } = useSSR(renderer, scene, camera, configProp);
-    return (jsxs("div", { className: `nice-ssr ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "copy", size: 14 }), " Screen-Space Reflections"] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), "Enabled"] })] }), jsxs("label", { children: ["Max Steps: ", config.maxSteps, jsx("input", { type: "range", min: 16, max: 256, step: 16, value: config.maxSteps, onChange: (e) => setConfig({ maxSteps: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Max Distance: ", config.maxDistance, jsx("input", { type: "range", min: 5, max: 200, step: 5, value: config.maxDistance, onChange: (e) => setConfig({ maxDistance: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Intensity: ", config.intensity.toFixed(2), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.intensity, onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Thickness: ", config.thickness.toFixed(2), jsx("input", { type: "range", min: 0.05, max: 2, step: 0.05, value: config.thickness, onChange: (e) => setConfig({ thickness: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Jitter: ", config.jitter.toFixed(2), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.jitter, onChange: (e) => setConfig({ jitter: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Resolution Scale: ", config.resolution.toFixed(2), jsx("input", { type: "range", min: 0.25, max: 1, step: 0.25, value: config.resolution, onChange: (e) => setConfig({ resolution: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: ["Fresnel: ", config.fresnelExponent.toFixed(1), jsx("input", { type: "range", min: 1, max: 8, step: 0.5, value: config.fresnelExponent, onChange: (e) => setConfig({ fresnelExponent: parseFloat(e.target.value) }), style: { width: '100%' } })] })] }));
+    return (jsxs("div", { className: `nice-ssr ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "copy", size: 14 }), ' ', t('ssr.screenSpaceReflections', 'Screen-Space Reflections')] }), jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 11 }, children: [jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig({ enabled: e.target.checked }) }), t('ssr.enabled', 'Enabled')] })] }), jsxs("label", { children: [t('ssr.maxSteps', 'Max Steps: {maxSteps}').replace('{maxSteps}', String(config.maxSteps)), jsx("input", { type: "range", min: 16, max: 256, step: 16, value: config.maxSteps, onChange: (e) => setConfig({ maxSteps: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.maxDistance', 'Max Distance: {maxDistance}').replace('{maxDistance}', String(config.maxDistance)), jsx("input", { type: "range", min: 5, max: 200, step: 5, value: config.maxDistance, onChange: (e) => setConfig({ maxDistance: parseInt(e.target.value, 10) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.intensity', 'Intensity: {intensity}').replace('{intensity}', String(config.intensity.toFixed(2))), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.intensity, onChange: (e) => setConfig({ intensity: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.thickness', 'Thickness: {thickness}').replace('{thickness}', String(config.thickness.toFixed(2))), jsx("input", { type: "range", min: 0.05, max: 2, step: 0.05, value: config.thickness, onChange: (e) => setConfig({ thickness: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.jitter', 'Jitter: {jitter}').replace('{jitter}', String(config.jitter.toFixed(2))), jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: config.jitter, onChange: (e) => setConfig({ jitter: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.resolutionScale', 'Resolution Scale: {resolution}').replace('{resolution}', String(config.resolution.toFixed(2))), jsx("input", { type: "range", min: 0.25, max: 1, step: 0.25, value: config.resolution, onChange: (e) => setConfig({ resolution: parseFloat(e.target.value) }), style: { width: '100%' } })] }), jsxs("label", { children: [t('ssr.fresnel', 'Fresnel: {fresnelExponent}').replace('{fresnelExponent}', String(config.fresnelExponent.toFixed(1))), jsx("input", { type: "range", min: 1, max: 8, step: 0.5, value: config.fresnelExponent, onChange: (e) => setConfig({ fresnelExponent: parseFloat(e.target.value) }), style: { width: '100%' } })] })] }));
 };
 
 export { NiceSSR, useSSR };

package/dist/esm/rendering/NiceWebGPURenderer.js

@@ -2,6 +2,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';
 import { SOFT_SHADOW_MAP } from '../core/threeCompat.js';
 
 /* ── WebGPU detection ── */
@@ -130,6 +131,7 @@ function useWebGPURenderer(canvas, scene, camera, width = 800, height = 600, onR
             disposed = true;
             (_a = rendererRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- one renderer per canvas, made with the first settings; the effects below apply later changes, and onRendererReady reports that one renderer
     }, [canvas]);
     // Update renderer settings reactively
     useEffect(() => {
@@ -209,14 +211,15 @@ const TONE_MAPPINGS = [
 ];
 /* ── Component ── */
 const NiceWebGPURenderer = ({ canvas, scene, camera, width, height, onRendererReady, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { isWebGPU, capabilities, isReady, toneMapping, setToneMapping, toneMappingExposure, setToneMappingExposure, outputColorSpace, setOutputColorSpace, pixelRatio, setPixelRatio, } = useWebGPURenderer(canvas, scene, camera, width, height, onRendererReady);
-    return (jsxs("div", { className: `nice-webgpu-renderer ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "monitor", size: 14 }), " Renderer"] }), jsx("span", { style: {
+    return (jsxs("div", { className: `nice-webgpu-renderer ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "monitor", size: 14 }), " ", t('webGPURenderer.renderer', 'Renderer')] }), jsx("span", { style: {
                             fontSize: 10,
                             padding: '2px 6px',
                             borderRadius: 4,
                             background: isWebGPU ? 'var(--nice-success, #22c55e)' : 'var(--nice-warning, #f59e0b)',
                             color: 'var(--nice-color-white, #fff)',
-                        }, children: isWebGPU ? 'WebGPU' : 'WebGL' })] }), !isReady && jsx("div", { style: { opacity: 0.6, fontSize: 11 }, children: "Initializing\u2026" }), capabilities && (jsxs("div", { style: { fontSize: 10, opacity: 0.7, lineHeight: 1.5 }, children: ["GPU: ", capabilities.adapterName, jsx("br", {}), "Vendor: ", capabilities.vendor, jsx("br", {}), "Max Texture: ", capabilities.maxTextureDimension2D, "px", capabilities.features.length > 0 && (jsxs(Fragment, { children: [jsx("br", {}), "Features: ", capabilities.features.length] }))] })), jsxs("label", { children: ["Tone Mapping:", jsx("select", { value: toneMapping, onChange: (e) => setToneMapping(parseInt(e.target.value, 10)), style: { width: '100%', marginTop: 2 }, children: TONE_MAPPINGS.map((tm) => (jsx("option", { value: tm.value, children: tm.label }, tm.value))) })] }), jsxs("label", { children: ["Exposure: ", toneMappingExposure.toFixed(2), jsx("input", { type: "range", min: 0.1, max: 3, step: 0.05, value: toneMappingExposure, onChange: (e) => setToneMappingExposure(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxs("label", { children: ["Output Color Space:", jsxs("select", { value: outputColorSpace, onChange: (e) => setOutputColorSpace(e.target.value), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: THREE.SRGBColorSpace, children: "sRGB" }), jsx("option", { value: THREE.LinearSRGBColorSpace, children: "Linear sRGB" })] })] }), jsxs("label", { children: ["Pixel Ratio: ", pixelRatio.toFixed(1), jsx("input", { type: "range", min: 0.5, max: 3, step: 0.5, value: pixelRatio, onChange: (e) => setPixelRatio(parseFloat(e.target.value)), style: { width: '100%' } })] })] }));
+                        }, children: isWebGPU ? 'WebGPU' : 'WebGL' })] }), !isReady && (jsx("div", { style: { opacity: 0.6, fontSize: 11 }, children: t('webGPURenderer.initializing', 'Initializing…') })), capabilities && (jsxs("div", { style: { fontSize: 10, opacity: 0.7, lineHeight: 1.5 }, children: [t('webGPURenderer.gpu', 'GPU: {adapterName}').replace('{adapterName}', String(capabilities.adapterName)), jsx("br", {}), t('webGPURenderer.vendor', 'Vendor: {vendor}').replace('{vendor}', String(capabilities.vendor)), jsx("br", {}), t('webGPURenderer.maxTexturePx', 'Max Texture: {maxTextureDimension2D}px').replace('{maxTextureDimension2D}', String(capabilities.maxTextureDimension2D)), capabilities.features.length > 0 && (jsxs(Fragment, { children: [jsx("br", {}), t('webGPURenderer.features', 'Features: {features}').replace('{features}', String(capabilities.features.length))] }))] })), jsxs("label", { children: [t('webGPURenderer.toneMapping', 'Tone Mapping:'), jsx("select", { value: toneMapping, onChange: (e) => setToneMapping(parseInt(e.target.value, 10)), style: { width: '100%', marginTop: 2 }, children: TONE_MAPPINGS.map((tm) => (jsx("option", { value: tm.value, children: tm.label }, tm.value))) })] }), jsxs("label", { children: [t('webGPURenderer.exposure', 'Exposure: {toneMappingExposure}').replace('{toneMappingExposure}', String(toneMappingExposure.toFixed(2))), jsx("input", { type: "range", min: 0.1, max: 3, step: 0.05, value: toneMappingExposure, onChange: (e) => setToneMappingExposure(parseFloat(e.target.value)), style: { width: '100%' } })] }), jsxs("label", { children: [t('webGPURenderer.outputColorSpace', 'Output Color Space:'), jsxs("select", { value: outputColorSpace, onChange: (e) => setOutputColorSpace(e.target.value), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: THREE.SRGBColorSpace, children: "sRGB" }), jsx("option", { value: THREE.LinearSRGBColorSpace, children: t('webGPURenderer.linearSrgb', 'Linear sRGB') })] })] }), jsxs("label", { children: [t('webGPURenderer.pixelRatio', 'Pixel Ratio: {pixelRatio}').replace('{pixelRatio}', String(pixelRatio.toFixed(1))), jsx("input", { type: "range", min: 0.5, max: 3, step: 0.5, value: pixelRatio, onChange: (e) => setPixelRatio(parseFloat(e.target.value)), style: { width: '100%' } })] })] }));
 };
 
 export { NiceWebGPURenderer, useWebGPURenderer };

package/dist/esm/uv/NiceUVEditor.js

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

package/dist/esm/uv/uvEditorTypes.js

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+/** A question an editor hook waits on; {@link EditorAskDialog} shows it. */
+export interface EditorAsk {
+    /** `prompt` asks for a value, `confirm` for a yes / no. */
+    kind: 'prompt' | 'confirm';
+    /** The prompt's title, or the question to confirm. */
+    text: string;
+    /** Initial value of a prompt. */
+    defaultValue?: string;
+    /** Settles it: the entered value (`''` for an accepted confirm), or `null` when cancelled. */
+    answer: (value: string | null) => void;
+}
+/**
+ * The library's dialogs in place of `window.prompt` / `window.confirm` for the editor hooks,
+ * which hold state but render nothing: `ask` resolves with the answer (`null` when cancelled)
+ * and `pendingAsk` is the open question, for the editor component to pass to
+ * {@link EditorAskDialog}. One question at a time: a new one settles the open one as cancelled.
+ */
+export declare function useEditorAsk(): {
+    pendingAsk: EditorAsk | null;
+    ask: (kind: EditorAsk["kind"], text: string, defaultValue?: string) => Promise<string | null>;
+};
+/** Shows the question {@link useEditorAsk} is waiting on, if any. */
+export declare const EditorAskDialog: React.FC<{
+    ask: EditorAsk | null;
+}>;

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

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

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

@@ -1,9 +1,3 @@
-/**
- * DanceScoreEngine — Compares detected poses against reference choreography
- *
- * Calculates real-time dance accuracy by comparing camera-detected Pose3DFrames
- * against a reference sequence (from choreography DSL or recorded poses).
- */
 import type { Pose3DFrame, Pose3DSequenceResult } from '../model/modelEditorTypes';
 export interface DanceScoreConfig {
     /** Weight per keypoint category (0–1). Keys not listed default to 1. */

package/dist/types/model/useModelEditor.d.ts

@@ -6,6 +6,7 @@
  * Extracted from the original ModelEditor.tsx god-component.
  */
 import * as THREE from 'three';
+import { type EditorAsk } from '../core/editorAsk';
 import { type SceneNode, type AnimClip, type TransformMode, type ShadingMode, type EditorMode, type PropTab, type AddMenuCat, type Pose3DSequenceResult } from './modelEditorTypes';
 import { type PBRPreset, type HDRIPreset, type SnapResult } from './modelEditorUtils';
 export interface UseModelEditorProps {
@@ -43,6 +44,8 @@ export interface ModelEditorAPI {
     bgColor: string;
     setBgColor: React.Dispatch<React.SetStateAction<string>>;
     statusText: string;
+    /** The question the editor waits on (clear scene, library name); render it with `EditorAskDialog`. */
+    pendingAsk: EditorAsk | null;
     dragOver: boolean;
     polyCount: number;
     meshCount: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-3d",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Nice2Dev 3D Editor — Blender-style 3D model editor component for React, powered by Three.js",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",
@@ -59,13 +59,13 @@
     "nicetodev"
   ],
   "peerDependencies": {
-    "@nice2dev/ui": "^1.0.20",
+    "@nice2dev/ui": "^1.2.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
     "three": ">=0.150.0"
   },
   "devDependencies": {
-    "@nice2dev/ui": "^1.2.0",
+    "@nice2dev/ui": "^1.2.2",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",