@nice2dev/ui-graphics 1.2.0 → 1.2.1

package/dist/cjs/pixel/characterGeneratorPresets.js

@@ -49,7 +49,7 @@ const CLOTHING_PALETTES = {
    16×16 CHARACTER PARTS — HEADS
    ════════════════════════════════════════════════════════════════ */
 const _ = -1; // transparent shorthand
-const HEAD_ROUND_S = spriteGeneratorCore.createPartData(8, 8, [
+const HEAD_ROUND_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(8, 8, [
     [_, _, 1, 1, 1, 1, _, _],
     [_, 1, 0, 0, 0, 0, 1, _],
     [1, 0, 0, 0, 0, 0, 0, 1],
@@ -59,7 +59,7 @@ const HEAD_ROUND_S = spriteGeneratorCore.createPartData(8, 8, [
     [_, 1, 0, 0, 0, 0, 1, _],
     [_, _, 1, 1, 1, 1, _, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848', '#e05050', '#2a2a4e']);
-const HEAD_ROUND_E = spriteGeneratorCore.createPartData(7, 8, [
+const HEAD_ROUND_E = /* @__PURE__ */ spriteGeneratorCore.createPartData(7, 8, [
     [_, _, 1, 1, 1, _, _],
     [_, 1, 0, 0, 0, 1, _],
     [1, 0, 0, 0, 0, 0, 1],
@@ -69,7 +69,7 @@ const HEAD_ROUND_E = spriteGeneratorCore.createPartData(7, 8, [
     [_, 1, 0, 0, 0, 1, _],
     [_, _, 1, 1, 1, _, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848', '#e05050', '#2a2a4e']);
-const HEAD_ROUND_N = spriteGeneratorCore.createPartData(8, 8, [
+const HEAD_ROUND_N = /* @__PURE__ */ spriteGeneratorCore.createPartData(8, 8, [
     [_, _, 1, 1, 1, 1, _, _],
     [_, 1, 0, 0, 0, 0, 1, _],
     [1, 0, 0, 0, 0, 0, 0, 1],
@@ -79,7 +79,7 @@ const HEAD_ROUND_N = spriteGeneratorCore.createPartData(8, 8, [
     [_, 1, 0, 0, 0, 0, 1, _],
     [_, _, 1, 1, 1, 1, _, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848', '#e05050', '#2a2a4e']);
-const HEAD_SQUARE_S = spriteGeneratorCore.createPartData(8, 7, [
+const HEAD_SQUARE_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(8, 7, [
     [_, 1, 1, 1, 1, 1, 1, _],
     [1, 0, 0, 0, 0, 0, 0, 1],
     [1, 0, 3, 0, 0, 3, 0, 1],
@@ -88,7 +88,7 @@ const HEAD_SQUARE_S = spriteGeneratorCore.createPartData(8, 7, [
     [1, 0, 0, 0, 0, 0, 0, 1],
     [_, 1, 1, 1, 1, 1, 1, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848', '#e05050', '#2a2a4e']);
-const HEAD_CHIBI_S = spriteGeneratorCore.createPartData(10, 10, [
+const HEAD_CHIBI_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 10, [
     [_, _, _, 1, 1, 1, 1, _, _, _],
     [_, _, 1, 0, 0, 0, 0, 1, _, _],
     [_, 1, 0, 0, 0, 0, 0, 0, 1, _],
@@ -101,13 +101,13 @@ const HEAD_CHIBI_S = spriteGeneratorCore.createPartData(10, 10, [
     [_, _, 1, 1, 1, 1, 1, 1, _, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848', '#e05050', '#2a2a4e']);
 /* ── HAIR ── */
-const HAIR_SHORT_S = spriteGeneratorCore.createPartData(8, 4, [
+const HAIR_SHORT_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(8, 4, [
     [_, _, 0, 0, 0, 0, _, _],
     [_, 0, 0, 0, 0, 0, 0, _],
     [0, 0, 1, 1, 1, 1, 0, 0],
     [0, 1, _, _, _, _, 1, 0],
 ], ['#4a3508', '#6b4e0a']);
-const HAIR_LONG_S = spriteGeneratorCore.createPartData(10, 10, [
+const HAIR_LONG_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 10, [
     [_, _, _, 0, 0, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, 0, 0, _, _],
     [_, 0, 0, 1, 1, 1, 1, 0, 0, _],
@@ -119,7 +119,7 @@ const HAIR_LONG_S = spriteGeneratorCore.createPartData(10, 10, [
     [_, 0, _, _, _, _, _, _, 0, _],
     [_, 0, 0, _, _, _, _, 0, 0, _],
 ], ['#4a3508', '#6b4e0a']);
-const HAIR_MOHAWK_S = spriteGeneratorCore.createPartData(8, 6, [
+const HAIR_MOHAWK_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(8, 6, [
     [_, _, _, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, _, _],
     [_, _, 0, 0, 0, 0, _, _],
@@ -127,7 +127,7 @@ const HAIR_MOHAWK_S = spriteGeneratorCore.createPartData(8, 6, [
     [_, 0, 1, _, _, 1, 0, _],
     [0, 1, _, _, _, _, 1, 0],
 ], ['#d03020', '#a02018']);
-const HAIR_PONYTAIL_S = spriteGeneratorCore.createPartData(10, 8, [
+const HAIR_PONYTAIL_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 8, [
     [_, _, _, 0, 0, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, 0, 0, _, _],
     [_, 0, 0, 1, 1, 1, 1, 0, 0, _],
@@ -137,7 +137,7 @@ const HAIR_PONYTAIL_S = spriteGeneratorCore.createPartData(10, 8, [
     [_, _, _, _, _, _, _, _, _, 0],
     [_, _, _, _, _, _, _, _, 0, _],
 ], ['#f0d060', '#d0b040']);
-const HAIR_SPIKY_S = spriteGeneratorCore.createPartData(10, 6, [
+const HAIR_SPIKY_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 6, [
     [_, 0, _, _, 0, _, 0, _, _, _],
     [_, 0, 0, 0, 0, 0, 0, 0, _, _],
     [0, 0, 0, 0, 0, 0, 0, 0, 0, _],
@@ -146,7 +146,7 @@ const HAIR_SPIKY_S = spriteGeneratorCore.createPartData(10, 6, [
     [_, _, _, _, _, _, _, _, _, _],
 ], ['var(--nice-bg, #1a1a2e)', '#101020']);
 /* ── TORSOS ── */
-const TORSO_BASIC_S = spriteGeneratorCore.createPartData(8, 6, [
+const TORSO_BASIC_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(8, 6, [
     [_, _, 1, 1, 1, 1, _, _],
     [_, 1, 0, 0, 0, 0, 1, _],
     [1, 0, 0, 0, 0, 0, 0, 1],
@@ -154,7 +154,7 @@ const TORSO_BASIC_S = spriteGeneratorCore.createPartData(8, 6, [
     [_, 1, 0, 0, 0, 0, 1, _],
     [_, _, 1, 1, 1, 1, _, _],
 ], ['#4060d0', '#3040b0']);
-const TORSO_ARMOR_S = spriteGeneratorCore.createPartData(10, 7, [
+const TORSO_ARMOR_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 7, [
     [_, _, _, 1, 1, 1, 1, _, _, _],
     [_, _, 1, 0, 2, 2, 0, 1, _, _],
     [_, 1, 0, 0, 2, 2, 0, 0, 1, _],
@@ -163,7 +163,7 @@ const TORSO_ARMOR_S = spriteGeneratorCore.createPartData(10, 7, [
     [_, 1, 0, 0, 0, 0, 0, 0, 1, _],
     [_, _, 1, 1, 1, 1, 1, 1, _, _],
 ], ['var(--nice-border, #c0c0c8)', '#909098', '#f0d060']);
-const TORSO_ROBE_S = spriteGeneratorCore.createPartData(10, 10, [
+const TORSO_ROBE_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 10, [
     [_, _, _, 1, 1, 1, 1, _, _, _],
     [_, _, 1, 0, 0, 0, 0, 1, _, _],
     [_, 1, 0, 0, 2, 2, 0, 0, 1, _],
@@ -176,14 +176,14 @@ const TORSO_ROBE_S = spriteGeneratorCore.createPartData(10, 10, [
     [_, _, _, 1, 1, 1, 1, _, _, _],
 ], ['#8020a0', '#601080', '#f0d060']);
 /* ── ARMS ── */
-const ARM_BASIC_S = spriteGeneratorCore.createPartData(3, 5, [
+const ARM_BASIC_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(3, 5, [
     [_, 0, _],
     [0, 0, 1],
     [0, 0, 1],
     [0, 0, 1],
     [_, 0, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848']);
-const ARM_ARMORED_S = spriteGeneratorCore.createPartData(4, 5, [
+const ARM_ARMORED_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(4, 5, [
     [_, 0, 1, _],
     [0, 0, 0, 1],
     [0, 0, 0, 1],
@@ -191,14 +191,14 @@ const ARM_ARMORED_S = spriteGeneratorCore.createPartData(4, 5, [
     [_, 0, 1, _],
 ], ['var(--nice-border, #c0c0c8)', '#909098']);
 /* ── LEGS ── */
-const LEG_BASIC_S = spriteGeneratorCore.createPartData(3, 5, [
+const LEG_BASIC_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(3, 5, [
     [_, 0, _],
     [0, 0, 1],
     [0, 0, 1],
     [0, 0, 1],
     [0, 1, 1],
 ], ['#4060d0', '#3040b0']);
-const LEG_BOOT_S = spriteGeneratorCore.createPartData(4, 5, [
+const LEG_BOOT_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(4, 5, [
     [_, 0, 0, _],
     [_, 0, 0, _],
     [_, 0, 0, _],
@@ -206,7 +206,7 @@ const LEG_BOOT_S = spriteGeneratorCore.createPartData(4, 5, [
     [0, 0, 0, 1],
 ], ['#b08060', '#906840']);
 /* ── HATS ── */
-const HAT_WIZARD_S = spriteGeneratorCore.createPartData(10, 8, [
+const HAT_WIZARD_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 8, [
     [_, _, _, _, 0, _, _, _, _, _],
     [_, _, _, 0, 0, 0, _, _, _, _],
     [_, _, 0, 0, 0, 0, 0, _, _, _],
@@ -216,7 +216,7 @@ const HAT_WIZARD_S = spriteGeneratorCore.createPartData(10, 8, [
     [0, 1, 1, 1, 1, 1, 1, 1, 0, _],
     [_, _, _, _, _, _, _, _, _, _],
 ], ['#8020a0', '#601080', '#f0d060']);
-const HAT_KNIGHT_S = spriteGeneratorCore.createPartData(10, 6, [
+const HAT_KNIGHT_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 6, [
     [_, _, _, 0, 0, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, 0, 0, _, _],
     [_, 0, 0, 0, 0, 0, 0, 0, 0, _],
@@ -224,14 +224,14 @@ const HAT_KNIGHT_S = spriteGeneratorCore.createPartData(10, 6, [
     [0, 0, 2, 2, 2, 2, 2, 2, 0, 0],
     [_, _, _, 1, 1, 1, 1, _, _, _],
 ], ['var(--nice-border, #c0c0c8)', '#606068', '#f0d060']);
-const HAT_CROWN_S = spriteGeneratorCore.createPartData(10, 5, [
+const HAT_CROWN_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(10, 5, [
     [_, 2, _, _, 2, _, _, 2, _, _],
     [_, 0, 2, _, 0, _, 2, 0, _, _],
     [_, 0, 0, 2, 0, 2, 0, 0, _, _],
     [_, 0, 0, 0, 0, 0, 0, 0, _, _],
     [_, 1, 1, 1, 1, 1, 1, 1, _, _],
 ], ['#f0d060', '#d0b040', '#ff4040']);
-const HAT_CAP_S = spriteGeneratorCore.createPartData(9, 5, [
+const HAT_CAP_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(9, 5, [
     [_, _, _, 0, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, 0, _, _],
     [_, 0, 0, 0, 0, 0, 0, 0, _],
@@ -239,7 +239,7 @@ const HAT_CAP_S = spriteGeneratorCore.createPartData(9, 5, [
     [_, _, 1, 1, 1, 1, 1, _, _],
 ], ['#d04040', '#b02020']);
 /* ── WEAPONS ── */
-const WEAPON_SWORD_S = spriteGeneratorCore.createPartData(3, 10, [
+const WEAPON_SWORD_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(3, 10, [
     [_, 0, _],
     [_, 0, _],
     [_, 0, _],
@@ -251,7 +251,7 @@ const WEAPON_SWORD_S = spriteGeneratorCore.createPartData(3, 10, [
     [_, 2, _],
     [_, 2, _],
 ], ['var(--nice-border, #c0c0c8)', '#f0d060', '#8b5e3c']);
-const WEAPON_STAFF_S = spriteGeneratorCore.createPartData(3, 12, [
+const WEAPON_STAFF_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(3, 12, [
     [_, 1, _],
     [1, 1, 1],
     [_, 1, _],
@@ -265,7 +265,7 @@ const WEAPON_STAFF_S = spriteGeneratorCore.createPartData(3, 12, [
     [_, 0, _],
     [_, 0, _],
 ], ['#8b5e3c', '#4080e0']);
-const WEAPON_BOW_S = spriteGeneratorCore.createPartData(5, 10, [
+const WEAPON_BOW_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(5, 10, [
     [_, _, _, 0, _],
     [_, _, 0, _, 1],
     [_, 0, _, _, 1],
@@ -277,7 +277,7 @@ const WEAPON_BOW_S = spriteGeneratorCore.createPartData(5, 10, [
     [_, _, 0, _, 1],
     [_, _, _, 0, _],
 ], ['#8b5e3c', 'var(--nice-border, #c0c0c8)']);
-const SHIELD_ROUND_S = spriteGeneratorCore.createPartData(6, 7, [
+const SHIELD_ROUND_S = /* @__PURE__ */ spriteGeneratorCore.createPartData(6, 7, [
     [_, _, 1, 1, _, _],
     [_, 1, 0, 0, 1, _],
     [1, 0, 0, 2, 0, 1],

package/dist/cjs/pixel/usePixelEditor.js

@@ -2,6 +2,7 @@
 
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var editorAsk = require('../core/editorAsk.js');
 var asepriteFormat = require('./asepriteFormat.js');
 var pixelEditorExports = require('./pixelEditorExports.js');
 var pixelEditorTypes = require('./pixelEditorTypes.js');
@@ -11,11 +12,12 @@ var pixelEditorUtils = require('./pixelEditorUtils.js');
  * usePixelEditor — custom hook encapsulating ALL state, refs, callbacks,
  * side-effects and memos for the PixelEditor component.
  */
-const log = { warn: console.warn, error: console.error, info: console.info, debug: console.debug };
+const log = { warn: console.warn, error: console.error };
 /* ═══════════════════════════════════════════
    Hook
    ═══════════════════════════════════════════ */
 function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary, }) {
+    const { pendingAsk, ask } = editorAsk.useEditorAsk();
     /* ── state ── */
     const [dw, setDw] = React.useState(initialWidth);
     const [dh, setDh] = React.useState(initialHeight);
@@ -296,7 +298,7 @@ function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary
         }
         // symmetry guides
         if (symmetry !== 'none') {
-            ctx.strokeStyle = 'rgba(255,100,100,0.3)';
+            ctx.strokeStyle = uiCore.resolveCssColor('var(--nice-danger-tint-30, rgba(255,100,100,0.3))', ctx.canvas);
             ctx.lineWidth = 1 / zoom;
             ctx.setLineDash([4 / zoom, 4 / zoom]);
             if (symmetry === 'h' || symmetry === 'both') {
@@ -331,6 +333,7 @@ function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary
         }
         // grid
         if (grid && zoom >= 4) {
+            // audit-allow: literal-color — a faint light grid over the pixels, the same on every theme's canvas
             ctx.strokeStyle = 'rgba(255,255,255,0.07)';
             ctx.lineWidth = 1 / zoom;
             for (let x = 0; x <= dw; x++) {
@@ -347,7 +350,7 @@ function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary
             }
         }
         // border
-        ctx.strokeStyle = 'rgba(80,100,200,0.4)';
+        ctx.strokeStyle = uiCore.resolveCssColor('var(--nice-primary-tint-40, rgba(80,100,200,0.4))', ctx.canvas);
         ctx.lineWidth = 1 / zoom;
         ctx.strokeRect(-0.5 / zoom, -0.5 / zoom, dw + 1 / zoom, dh + 1 / zoom);
         // brush cursor preview
@@ -834,13 +837,12 @@ function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary
         cv.height = dh;
         cv.getContext('2d').putImageData(data, 0, 0);
         const dataUrl = cv.toDataURL('image/png');
-        const defaultName = `sprite-${dw}x${dh}.png`;
-        const name = window.prompt('Save to library as:', defaultName);
-        if (!name || !name.trim()) {
-            return;
-        }
-        onSaveToLibrary(dataUrl, name.trim(), 'image/png');
-    }, [onSaveToLibrary, afi, dw, dh, compFrame]);
+        void ask('prompt', 'Save to library as:', `sprite-${dw}x${dh}.png`).then((name) => {
+            if (name && name.trim()) {
+                onSaveToLibrary(dataUrl, name.trim(), 'image/png');
+            }
+        });
+    }, [onSaveToLibrary, afi, dw, dh, compFrame, ask]);
     /* ── layer management ── */
     const addLayer = React.useCallback(() => {
         snap('Add Layer');
@@ -1274,6 +1276,7 @@ function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary
     }, [fc, dw, dh, layers, tick]);
     /* ── return API ── */
     return {
+        pendingAsk,
         dw,
         dh,
         layers,

package/dist/cjs/texture/Nice3DTexturePainter.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 
 // ── Default Config ──────────────────────────────────────────────
 const DEFAULT_BRUSH = {
@@ -203,6 +204,7 @@ function useTexturePainter(width, height) {
 // ── Component ───────────────────────────────────────────────────
 /** 3D texture painting tool with UV-space brush painting, zoom/pan, and layers. */
 const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSave, className = '', }) => {
+    const { t } = i18n.useNiceTranslation();
     const painter = useTexturePainter(textureWidth, textureHeight);
     const canvasRef = React.useRef(null);
     const isPainting = React.useRef(false);
@@ -334,17 +336,17 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
             color: 'var(--nice-text, #c1c2c5)',
             padding: 12,
             borderRadius: 8,
-        }, children: [jsxRuntime.jsxs("div", { style: { width: 140, fontSize: 11, display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: "Tools" }), ['brush', 'eraser', 'eyedropper', 'fill'].map((t) => (jsxRuntime.jsxs("button", { onClick: () => painter.setTool(t), style: btnStyle(painter.tool === t), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: toolIcons[t], size: 14 }), " ", t.charAt(0).toUpperCase() + t.slice(1), ' ', jsxRuntime.jsx("span", { style: { color: 'var(--nice-text-secondary, #868e96)', marginLeft: 'auto' }, children: t === 'brush' ? 'B' : t === 'eraser' ? 'E' : t === 'eyedropper' ? 'I' : 'G' })] }, t))), jsxRuntime.jsx("hr", { style: {
+        }, children: [jsxRuntime.jsxs("div", { style: { width: 140, fontSize: 11, display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: t('texturePainter3d.tools', 'Tools') }), ['brush', 'eraser', 'eyedropper', 'fill'].map((t) => (jsxRuntime.jsxs("button", { onClick: () => painter.setTool(t), style: btnStyle(painter.tool === t), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: toolIcons[t], size: 14 }), " ", t.charAt(0).toUpperCase() + t.slice(1), ' ', jsxRuntime.jsx("span", { style: { color: 'var(--nice-text-secondary, #868e96)', marginLeft: 'auto' }, children: t === 'brush' ? 'B' : t === 'eraser' ? 'E' : t === 'eyedropper' ? 'I' : 'G' })] }, t))), jsxRuntime.jsx("hr", { style: {
                             border: 'none',
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             width: '100%',
                             margin: '4px 0',
-                        } }), jsxRuntime.jsx("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: jsxRuntime.jsxs("button", { onClick: () => painter.undo(), style: btnStyle(false), title: "Undo (Ctrl+Z)", children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "reply", size: 14 }), " Undo"] }) }), jsxRuntime.jsx("hr", { style: {
+                        } }), jsxRuntime.jsx("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: jsxRuntime.jsxs("button", { onClick: () => painter.undo(), style: btnStyle(false), title: t('texturePainter3d.undoCtrlZ', 'Undo (Ctrl+Z)'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "reply", size: 14 }), " ", t('texturePainter3d.undo', 'Undo')] }) }), jsxRuntime.jsx("hr", { style: {
                             border: 'none',
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             width: '100%',
                             margin: '4px 0',
-                        } }), jsxRuntime.jsxs("label", { children: ["Size: ", painter.brush.size, "px"] }), jsxRuntime.jsx("input", { type: "range", min: 1, max: 100, value: painter.brush.size, onChange: (e) => painter.setBrush({ ...painter.brush, size: Number(e.target.value) }), style: { width: '100%' } }), jsxRuntime.jsxs("label", { children: ["Opacity: ", Math.round(painter.brush.opacity * 100), "%"] }), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: painter.brush.opacity, onChange: (e) => painter.setBrush({ ...painter.brush, opacity: Number(e.target.value) }), style: { width: '100%' } }), jsxRuntime.jsxs("label", { children: ["Hardness: ", Math.round(painter.brush.hardness * 100), "%"] }), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: painter.brush.hardness, onChange: (e) => painter.setBrush({ ...painter.brush, hardness: Number(e.target.value) }), style: { width: '100%' } }), jsxRuntime.jsx("label", { children: "Blend Mode" }), jsxRuntime.jsxs("select", { value: painter.brush.blendMode, onChange: (e) => painter.setBrush({
+                        } }), jsxRuntime.jsxs("label", { children: ["Size: ", painter.brush.size, "px"] }), jsxRuntime.jsx("input", { type: "range", min: 1, max: 100, value: painter.brush.size, onChange: (e) => painter.setBrush({ ...painter.brush, size: Number(e.target.value) }), style: { width: '100%' } }), jsxRuntime.jsxs("label", { children: ["Opacity: ", Math.round(painter.brush.opacity * 100), "%"] }), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: painter.brush.opacity, onChange: (e) => painter.setBrush({ ...painter.brush, opacity: Number(e.target.value) }), style: { width: '100%' } }), jsxRuntime.jsxs("label", { children: ["Hardness: ", Math.round(painter.brush.hardness * 100), "%"] }), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: painter.brush.hardness, onChange: (e) => painter.setBrush({ ...painter.brush, hardness: Number(e.target.value) }), style: { width: '100%' } }), jsxRuntime.jsx("label", { children: t('texturePainter3d.blendMode', 'Blend Mode') }), jsxRuntime.jsxs("select", { value: painter.brush.blendMode, onChange: (e) => painter.setBrush({
                             ...painter.brush,
                             blendMode: e.target.value,
                         }), style: {
@@ -355,12 +357,12 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                             border: '1px solid var(--nice-border, #373a40)',
                             borderRadius: 3,
                             fontSize: 10,
-                        }, children: [jsxRuntime.jsx("option", { value: "normal", children: "Normal" }), jsxRuntime.jsx("option", { value: "multiply", children: "Multiply" }), jsxRuntime.jsx("option", { value: "screen", children: "Screen" }), jsxRuntime.jsx("option", { value: "overlay", children: "Overlay" })] }), jsxRuntime.jsx("label", { children: "Color" }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [jsxRuntime.jsx("input", { type: "color", value: painter.brush.color, onChange: (e) => painter.setBrush({ ...painter.brush, color: e.target.value }), style: { width: 32, height: 24, border: 'none', cursor: 'pointer' } }), jsxRuntime.jsx("span", { style: { fontFamily: 'monospace', fontSize: 10 }, children: painter.brush.color })] }), jsxRuntime.jsx("hr", { style: {
+                        }, children: [jsxRuntime.jsx("option", { value: "normal", children: t('texturePainter3d.normal', 'Normal') }), jsxRuntime.jsx("option", { value: "multiply", children: t('texturePainter3d.multiply', 'Multiply') }), jsxRuntime.jsx("option", { value: "screen", children: t('texturePainter3d.screen', 'Screen') }), jsxRuntime.jsx("option", { value: "overlay", children: t('texturePainter3d.overlay', 'Overlay') })] }), jsxRuntime.jsx("label", { children: t('texturePainter3d.color', 'Color') }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [jsxRuntime.jsx("input", { type: "color", value: painter.brush.color, onChange: (e) => painter.setBrush({ ...painter.brush, color: e.target.value }), style: { width: 32, height: 24, border: 'none', cursor: 'pointer' } }), jsxRuntime.jsx("span", { style: { fontFamily: 'monospace', fontSize: 10 }, children: painter.brush.color })] }), jsxRuntime.jsx("hr", { style: {
                             border: 'none',
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             width: '100%',
                             margin: '4px 0',
-                        } }), jsxRuntime.jsxs("label", { children: ["Zoom: ", Math.round(zoom * 100), "%"] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 2 }, children: [jsxRuntime.jsx("button", { onClick: () => setZoom((z) => Math.max(0.1, z - 0.1)), style: btnStyle(false), children: "\u2212" }), jsxRuntime.jsx("button", { onClick: () => setZoom(0.5), style: btnStyle(false), children: "Reset" }), jsxRuntime.jsx("button", { onClick: () => setZoom((z) => Math.min(4, z + 0.1)), style: btnStyle(false), children: "+" })] })] }), jsxRuntime.jsxs("div", { style: {
+                        } }), jsxRuntime.jsxs("label", { children: ["Zoom: ", Math.round(zoom * 100), "%"] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 2 }, children: [jsxRuntime.jsx("button", { onClick: () => setZoom((z) => Math.max(0.1, z - 0.1)), style: btnStyle(false), children: "\u2212" }), jsxRuntime.jsx("button", { onClick: () => setZoom(0.5), style: btnStyle(false), children: t('texturePainter3d.reset', 'Reset') }), jsxRuntime.jsx("button", { onClick: () => setZoom((z) => Math.min(4, z + 0.1)), style: btnStyle(false), children: "+" })] })] }), jsxRuntime.jsxs("div", { style: {
                     flex: 1,
                     overflow: 'hidden',
                     position: 'relative',
@@ -382,7 +384,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                             color: 'var(--nice-text-secondary, #868e96)',
                             display: 'flex',
                             gap: 12,
-                        }, children: [jsxRuntime.jsxs("span", { children: [textureWidth, "\u00D7", textureHeight] }), cursorPos && (jsxRuntime.jsxs("span", { children: ["X: ", cursorPos.x, " Y: ", cursorPos.y] })), jsxRuntime.jsxs("span", { children: ["Zoom: ", Math.round(zoom * 100), "%"] })] })] }), jsxRuntime.jsxs("div", { style: { width: 160, fontSize: 11, display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: "Layers" }), jsxRuntime.jsx("div", { style: { flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }, children: [...painter.layers].reverse().map((l) => (jsxRuntime.jsxs("div", { style: {
+                        }, children: [jsxRuntime.jsxs("span", { children: [textureWidth, "\u00D7", textureHeight] }), cursorPos && (jsxRuntime.jsxs("span", { children: ["X: ", cursorPos.x, " Y: ", cursorPos.y] })), jsxRuntime.jsxs("span", { children: ["Zoom: ", Math.round(zoom * 100), "%"] })] })] }), jsxRuntime.jsxs("div", { style: { width: 160, fontSize: 11, display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: t('texturePainter3d.layers', 'Layers') }), jsxRuntime.jsx("div", { style: { flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }, children: [...painter.layers].reverse().map((l) => (jsxRuntime.jsxs("div", { style: {
                                 padding: '4px 6px',
                                 borderRadius: 3,
                                 background: painter.activeLayerId === l.id
@@ -418,7 +420,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                                                 cursor: 'pointer',
                                                 padding: 0,
                                                 fontSize: 10,
-                                            }, "aria-label": "Remove layer", title: "Remove layer", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 10 }) }))] }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginTop: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 9, color: 'var(--nice-text-secondary, #868e96)' }, children: "\u03B1" }), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: l.opacity, onChange: (e) => painter.setLayerOpacity(l.id, Number(e.target.value)), style: { flex: 1, height: 12 } }), jsxRuntime.jsxs("span", { style: { fontSize: 9, minWidth: 24, textAlign: 'right' }, children: [Math.round(l.opacity * 100), "%"] })] })] }, l.id))) }), jsxRuntime.jsx("button", { onClick: () => painter.addLayer(`Layer ${painter.layers.length + 1}`), style: {
+                                            }, "aria-label": t('texturePainter3d.removeLayer', 'Remove layer'), title: t('texturePainter3d.removeLayer', 'Remove layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 10 }) }))] }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4, marginTop: 2 }, children: [jsxRuntime.jsx("span", { style: { fontSize: 9, color: 'var(--nice-text-secondary, #868e96)' }, children: "\u03B1" }), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: l.opacity, onChange: (e) => painter.setLayerOpacity(l.id, Number(e.target.value)), style: { flex: 1, height: 12 } }), jsxRuntime.jsxs("span", { style: { fontSize: 9, minWidth: 24, textAlign: 'right' }, children: [Math.round(l.opacity * 100), "%"] })] })] }, l.id))) }), jsxRuntime.jsx("button", { onClick: () => painter.addLayer(`Layer ${painter.layers.length + 1}`), style: {
                             padding: '4px 8px',
                             border: 'none',
                             borderRadius: 3,
@@ -438,7 +440,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                             borderRadius: 3,
                             cursor: 'pointer',
                             fontWeight: 'bold',
-                        }, children: "Save Texture" })] })] }));
+                        }, children: t('texturePainter3d.saveTexture', 'Save Texture') })] })] }));
 };
 
 exports.Nice3DTexturePainter = Nice3DTexturePainter;

package/dist/cjs/ui/NiceUIDesigner.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 
 /** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const UI_DESIGNER_TOUR = [
@@ -312,6 +313,7 @@ function updateInTree(nodes, id, updates) {
 /** Visual drag & drop UI builder that generates React code. */
 const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
     var _a, _b, _c, _d, _e;
+    const { t } = i18n.useNiceTranslation();
     const designer = useUIDesigner();
     const [breakpoint, setBreakpoint] = React.useState('desktop');
     const [dragType, setDragType] = React.useState(null);
@@ -395,7 +397,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                         color: 'var(--nice-text-secondary, #868e96)',
                         fontSize: 11,
                         gap: 4,
-                    }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "image", size: 14 }), " Image"] })) : node.type === 'List' ? (jsxRuntime.jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => (jsxRuntime.jsx("li", { children: item }, i))) })) : node.type === 'Divider' ? (jsxRuntime.jsx("hr", { style: {
+                    }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "image", size: 14 }), " ", t('uiDesigner.image', 'Image')] })) : node.type === 'List' ? (jsxRuntime.jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => (jsxRuntime.jsx("li", { children: item }, i))) })) : node.type === 'Divider' ? (jsxRuntime.jsx("hr", { style: {
                         margin: 0,
                         border: 'none',
                         borderTop: '1px solid var(--nice-border, #dee2e6)',
@@ -421,7 +423,9 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                         display: 'flex',
                         alignItems: 'center',
                         gap: 4,
-                        background: designer.selectedId === node.id ? 'rgba(51,154,240,0.2)' : 'transparent',
+                        background: designer.selectedId === node.id
+                            ? 'color-mix(in srgb, var(--nice-color-primary, #339af0) 20%, transparent)'
+                            : 'transparent',
                         borderRadius: 2,
                     }, children: [(def === null || def === void 0 ? void 0 : def.icon) && jsxRuntime.jsx(uiCore.NiceIcon, { name: def.icon, size: 12 }), jsxRuntime.jsxs("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: [node.type, node.props.text ? `: ${String(node.props.text).slice(0, 15)}` : ''] })] }), node.children.map((c) => renderTreeItem(c, depth + 1))] }, node.id));
     };
@@ -435,7 +439,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
             height: '100%',
             overflowY: 'auto',
             boxSizing: 'border-box',
-        }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: "Components" }), jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: COMPONENT_DEFS.map((def) => (jsxRuntime.jsxs("button", { draggable: true, onDragStart: () => setDragType(def.type), onDragEnd: () => setDragType(null), onClick: () => { var _a; return designer.addNode(def.type, (_a = designer.selectedId) !== null && _a !== void 0 ? _a : undefined); }, style: {
+        }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: t('uiDesigner.components', 'Components') }), jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: COMPONENT_DEFS.map((def) => (jsxRuntime.jsxs("button", { draggable: true, onDragStart: () => setDragType(def.type), onDragEnd: () => setDragType(null), onClick: () => { var _a; return designer.addNode(def.type, (_a = designer.selectedId) !== null && _a !== void 0 ? _a : undefined); }, style: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: 4,
@@ -447,8 +451,8 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                                 cursor: 'grab',
                                 textAlign: 'left',
                                 fontSize: 11,
-                            }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: def.icon, size: 14 }), " ", def.label] }, def.type))) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: "Tree" }), jsxRuntime.jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: designer.tree.length === 0 ? (jsxRuntime.jsx("div", { style: { color: 'var(--nice-text-secondary, #5c5f66)', padding: 4 }, children: "Empty" })) : (designer.tree.map((n) => renderTreeItem(n))) })] })] }));
-    const toolbarContent = (jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', fontSize: 11, padding: '4px 8px' }, children: [jsxRuntime.jsx("button", { onClick: () => designer.undo(), disabled: !designer.canUndo, style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 }, title: "Undo (Ctrl+Z)", "aria-label": "Undo", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "reply", size: 14 }) }), jsxRuntime.jsx("button", { onClick: () => designer.redo(), disabled: !designer.canRedo, style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 }, title: "Redo (Ctrl+Y)", "aria-label": "Redo", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "forward", size: 14 }) }), jsxRuntime.jsx("div", { style: { width: 1, height: 16, background: 'var(--nice-border, #373a40)' } }), jsxRuntime.jsxs("button", { onClick: () => setBreakpoint('desktop'), style: btnStyle(breakpoint === 'desktop'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "monitor", size: 14 }), " Desktop"] }), jsxRuntime.jsxs("button", { onClick: () => setBreakpoint('tablet'), style: btnStyle(breakpoint === 'tablet'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "window", size: 14 }), " Tablet"] }), jsxRuntime.jsxs("button", { onClick: () => setBreakpoint('mobile'), style: btnStyle(breakpoint === 'mobile'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "phone", size: 14 }), " Mobile"] }), jsxRuntime.jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxRuntime.jsxs("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: 'var(--nice-danger, #ff6b6b)' }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "trash", size: 14 }), " Delete"] })), jsxRuntime.jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ['</>', " Code"] }), jsxRuntime.jsx("button", { onClick: () => onExport === null || onExport === void 0 ? void 0 : onExport(designer.exportCode()), style: {
+                            }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: def.icon, size: 14 }), " ", def.label] }, def.type))) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: t('uiDesigner.tree', 'Tree') }), jsxRuntime.jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: designer.tree.length === 0 ? (jsxRuntime.jsx("div", { style: { color: 'var(--nice-text-secondary, #5c5f66)', padding: 4 }, children: t('uiDesigner.empty', 'Empty') })) : (designer.tree.map((n) => renderTreeItem(n))) })] })] }));
+    const toolbarContent = (jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', fontSize: 11, padding: '4px 8px' }, children: [jsxRuntime.jsx("button", { onClick: () => designer.undo(), disabled: !designer.canUndo, style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 }, title: t('uiDesigner.undoCtrlZ', 'Undo (Ctrl+Z)'), "aria-label": t('uiDesigner.undo', 'Undo'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "reply", size: 14 }) }), jsxRuntime.jsx("button", { onClick: () => designer.redo(), disabled: !designer.canRedo, style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 }, title: t('uiDesigner.redoCtrlY', 'Redo (Ctrl+Y)'), "aria-label": t('uiDesigner.redo', 'Redo'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "forward", size: 14 }) }), jsxRuntime.jsx("div", { style: { width: 1, height: 16, background: 'var(--nice-border, #373a40)' } }), jsxRuntime.jsxs("button", { onClick: () => setBreakpoint('desktop'), style: btnStyle(breakpoint === 'desktop'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "monitor", size: 14 }), " ", t('uiDesigner.desktop', 'Desktop')] }), jsxRuntime.jsxs("button", { onClick: () => setBreakpoint('tablet'), style: btnStyle(breakpoint === 'tablet'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "window", size: 14 }), " ", t('uiDesigner.tablet', 'Tablet')] }), jsxRuntime.jsxs("button", { onClick: () => setBreakpoint('mobile'), style: btnStyle(breakpoint === 'mobile'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "phone", size: 14 }), " ", t('uiDesigner.mobile', 'Mobile')] }), jsxRuntime.jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxRuntime.jsxs("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: 'var(--nice-danger, #ff6b6b)' }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "trash", size: 14 }), " ", t('uiDesigner.delete', 'Delete')] })), jsxRuntime.jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ['</>', " ", t('uiDesigner.code', 'Code')] }), jsxRuntime.jsx("button", { onClick: () => onExport === null || onExport === void 0 ? void 0 : onExport(designer.exportCode()), style: {
                     padding: '4px 8px',
                     background: 'var(--nice-primary, #228be6)',
                     color: 'var(--nice-text-on-primary, #fff)',
@@ -456,7 +460,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                     borderRadius: 3,
                     cursor: 'pointer',
                     fontSize: 11,
-                }, children: "Export" })] }));
+                }, children: t('uiDesigner.export', 'Export') })] }));
     const mainContent = (jsxRuntime.jsx("div", { style: {
             flex: 1,
             display: 'flex',
@@ -472,7 +476,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                 margin: 0,
                 overflow: 'auto',
                 fontSize: 11,
-                color: '#a6e3a1',
+                color: 'var(--nice-color-success, #a6e3a1)',
                 fontFamily: 'monospace',
             }, children: designer.exportCode() })) : (jsxRuntime.jsx("div", { style: {
                 flex: 1,
@@ -489,7 +493,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                     textAlign: 'center',
                     padding: 40,
                     color: 'var(--nice-text-secondary, #868e96)',
-                }, children: "Drag or click a component to add it" })) : (designer.tree.map((n) => renderNode(n))) })) }));
+                }, children: t('uiDesigner.dragOrClickAComponent', 'Drag or click a component to add it') })) : (designer.tree.map((n) => renderNode(n))) })) }));
     const rightPanel = (jsxRuntime.jsxs("div", { style: {
             width: 200,
             fontSize: 11,
@@ -500,7 +504,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
             overflowY: 'auto',
             padding: 8,
             boxSizing: 'border-box',
-        }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: "Properties" }), selectedNode ? (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxRuntime.jsxs("div", { style: {
+        }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: t('uiDesigner.properties', 'Properties') }), selectedNode ? (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxRuntime.jsxs("div", { style: {
                             color: 'var(--nice-text-secondary, #868e96)',
                             display: 'flex',
                             alignItems: 'center',
@@ -509,13 +513,13 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                                 var _a;
                                 const di = (_a = COMPONENT_DEFS.find((d) => d.type === selectedNode.type)) === null || _a === void 0 ? void 0 : _a.icon;
                                 return di ? jsxRuntime.jsx(uiCore.NiceIcon, { name: di, size: 14 }) : null;
-                            })(), ' ', selectedNode.type] }), selectedNode.props.text !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Text" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Placeholder" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Heading Level" }), jsxRuntime.jsx("select", { value: Number(selectedNode.props.level), onChange: (e) => designer.updateNode(selectedNode.id, {
+                            })(), ' ', selectedNode.type] }), selectedNode.props.text !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: t('uiDesigner.text', 'Text') }), jsxRuntime.jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: t('uiDesigner.placeholder', 'Placeholder') }), jsxRuntime.jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: t('uiDesigner.headingLevel', 'Heading Level') }), jsxRuntime.jsx("select", { value: Number(selectedNode.props.level), onChange: (e) => designer.updateNode(selectedNode.id, {
                                     props: { level: Number(e.target.value) },
-                                }), style: fieldStyle, children: [1, 2, 3, 4, 5, 6].map((v) => (jsxRuntime.jsxs("option", { value: v, children: ["H", v] }, v))) })] })), selectedNode.props.variant !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Variant" }), jsxRuntime.jsx("select", { value: String(selectedNode.props.variant), onChange: (e) => designer.updateNode(selectedNode.id, { props: { variant: e.target.value } }), style: fieldStyle, children: ['primary', 'secondary', 'outline', 'ghost'].map((v) => (jsxRuntime.jsx("option", { value: v, children: v }, v))) })] })), selectedNode.props.src !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Image URL" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Alt Text" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsxRuntime.jsx("hr", { style: {
+                                }), style: fieldStyle, children: [1, 2, 3, 4, 5, 6].map((v) => (jsxRuntime.jsxs("option", { value: v, children: ["H", v] }, v))) })] })), selectedNode.props.variant !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: t('uiDesigner.variant', 'Variant') }), jsxRuntime.jsx("select", { value: String(selectedNode.props.variant), onChange: (e) => designer.updateNode(selectedNode.id, { props: { variant: e.target.value } }), style: fieldStyle, children: ['primary', 'secondary', 'outline', 'ghost'].map((v) => (jsxRuntime.jsx("option", { value: v, children: v }, v))) })] })), selectedNode.props.src !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: t('uiDesigner.imageUrl', 'Image URL') }), jsxRuntime.jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: t('uiDesigner.altText', 'Alt Text') }), jsxRuntime.jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsxRuntime.jsx("hr", { style: {
                             border: 'none',
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             margin: '4px 0',
-                        } }), jsxRuntime.jsx("strong", { style: { color: 'var(--nice-text-secondary, #868e96)' }, children: "Style" }), ['padding', 'margin', 'gap', 'borderRadius'].map((prop) => (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: prop }), jsxRuntime.jsx("input", { type: "number", value: typeof selectedNode.style[prop] === 'number'
+                        } }), jsxRuntime.jsx("strong", { style: { color: 'var(--nice-text-secondary, #868e96)' }, children: t('uiDesigner.style', 'Style') }), ['padding', 'margin', 'gap', 'borderRadius'].map((prop) => (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: prop }), jsxRuntime.jsx("input", { type: "number", value: typeof selectedNode.style[prop] === 'number'
                                     ? selectedNode.style[prop]
                                     : 0, onChange: (e) => designer.updateNode(selectedNode.id, {
                                     style: { [prop]: Number(e.target.value) },
@@ -545,7 +549,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                     color: 'var(--nice-text-secondary, #5c5f66)',
                     padding: 8,
                     textAlign: 'center',
-                }, children: "Select an element" }))] }));
+                }, children: t('uiDesigner.selectAnElement', 'Select an element') }))] }));
     return (jsxRuntime.jsxs("div", { className: `nice-ui-designer ${className}`, style: { position: 'relative', height: '100%' }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 20 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, UI_DESIGNER_TOUR) }) }), jsxRuntime.jsx(ui.NiceAppShell, { flush: true, toolbar: toolbarContent, sidebar: leftPanel, rightSidebar: rightPanel, children: mainContent })] }));
 };
 

package/dist/cjs/vector/NiceSvgToCode.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 
 /* ── Default config ── */
 const DEFAULT_CONFIG = {
@@ -419,6 +420,7 @@ function useSvgToCode() {
 }
 /* ── Component ── */
 const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
+    const { t } = i18n.useNiceTranslation();
     const { svgInput, setSvgInput, config, updateConfig, convert, result } = useSvgToCode();
     // Initialize with provided SVG
     React.useEffect(() => {
@@ -437,21 +439,21 @@ const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
             navigator.clipboard.writeText(result.code);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: `nice-svg-to-code ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14 }), " SVG \u2192 Code"] }), jsxRuntime.jsx("textarea", { value: svgInput, onChange: (e) => setSvgInput(e.target.value), placeholder: "Paste SVG markup here\u2026", rows: 6, style: {
+    return (jsxRuntime.jsxs("div", { className: `nice-svg-to-code ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14 }), " SVG \u2192 Code"] }), jsxRuntime.jsx("textarea", { value: svgInput, onChange: (e) => setSvgInput(e.target.value), placeholder: t('svgToCode.pasteSvgMarkupHere', 'Paste SVG markup here…'), rows: 6, style: {
                     width: '100%',
                     fontFamily: 'monospace',
                     fontSize: 11,
                     padding: 6,
                     borderRadius: 4,
                     border: '1px solid var(--nice-border, #e2e8f0)',
-                } }), jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: ["Framework:", jsxRuntime.jsxs("select", { value: config.framework, onChange: (e) => updateConfig({ framework: e.target.value }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "react", children: "React (JSX/TSX)" }), jsxRuntime.jsx("option", { value: "vue", children: "Vue (SFC)" }), jsxRuntime.jsx("option", { value: "web-component", children: "Web Component" }), jsxRuntime.jsx("option", { value: "typescript", children: "TypeScript (utility)" })] })] }), jsxRuntime.jsxs("label", { children: ["Component name:", jsxRuntime.jsx("input", { type: "text", value: config.componentName, onChange: (e) => updateConfig({ componentName: e.target.value.replace(/[^a-zA-Z0-9]/g, '') }), style: { width: '100%', padding: '3px 6px' } })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 11 }, children: [jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.typescript, onChange: (e) => updateConfig({ typescript: e.target.checked }) }), ' ', "TypeScript"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.optimize, onChange: (e) => updateConfig({ optimize: e.target.checked }) }), ' ', "Optimize"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.sizeProps, onChange: (e) => updateConfig({ sizeProps: e.target.checked }) }), ' ', "Size props"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.useCurrentColor, onChange: (e) => updateConfig({ useCurrentColor: e.target.checked }) }), ' ', "currentColor"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.memo, onChange: (e) => updateConfig({ memo: e.target.checked }) }), ' ', "memo"] })] })] }), jsxRuntime.jsxs("button", { type: "button", onClick: handleConvert, disabled: !svgInput.trim(), style: {
+                } }), jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: ["Framework:", jsxRuntime.jsxs("select", { value: config.framework, onChange: (e) => updateConfig({ framework: e.target.value }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "react", children: "React (JSX/TSX)" }), jsxRuntime.jsx("option", { value: "vue", children: "Vue (SFC)" }), jsxRuntime.jsx("option", { value: "web-component", children: t('svgToCode.webComponent', 'Web Component') }), jsxRuntime.jsx("option", { value: "typescript", children: "TypeScript (utility)" })] })] }), jsxRuntime.jsxs("label", { children: ["Component name:", jsxRuntime.jsx("input", { type: "text", value: config.componentName, onChange: (e) => updateConfig({ componentName: e.target.value.replace(/[^a-zA-Z0-9]/g, '') }), style: { width: '100%', padding: '3px 6px' } })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 11 }, children: [jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.typescript, onChange: (e) => updateConfig({ typescript: e.target.checked }) }), ' ', t('svgToCode.typescript', 'TypeScript')] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.optimize, onChange: (e) => updateConfig({ optimize: e.target.checked }) }), ' ', t('svgToCode.optimize', 'Optimize')] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.sizeProps, onChange: (e) => updateConfig({ sizeProps: e.target.checked }) }), ' ', t('svgToCode.sizeProps', 'Size props')] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.useCurrentColor, onChange: (e) => updateConfig({ useCurrentColor: e.target.checked }) }), ' ', "currentColor"] }), jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: config.memo, onChange: (e) => updateConfig({ memo: e.target.checked }) }), ' ', "memo"] })] })] }), jsxRuntime.jsxs("button", { type: "button", onClick: handleConvert, disabled: !svgInput.trim(), style: {
                     background: 'var(--nice-color-accent, #6366f1)',
                     color: 'var(--nice-text-on-primary, #fff)',
                     border: 'none',
                     borderRadius: 4,
                     padding: '8px 12px',
                     cursor: 'pointer',
-                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14 }), " Convert to", ' ', config.framework.charAt(0).toUpperCase() + config.framework.slice(1)] }), result && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { style: {
+                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14 }), ' ', t('svgToCode.convertTo', 'Convert to {framework}').replace('{framework}', config.framework.charAt(0).toUpperCase() + config.framework.slice(1))] }), result && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { style: {
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center',
@@ -463,7 +465,7 @@ const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
                                     borderRadius: 3,
                                     border: '1px solid var(--nice-border, #e2e8f0)',
                                     background: 'transparent',
-                                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "clipboard", size: 12 }), " Copy"] })] }), jsxRuntime.jsx("pre", { style: {
+                                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "clipboard", size: 12 }), " ", t('svgToCode.copy', 'Copy')] })] }), jsxRuntime.jsx("pre", { style: {
                             background: 'var(--nice-code-bg, #1e293b)',
                             color: 'var(--nice-code-color, #e2e8f0)',
                             padding: 8,