@nice2dev/ui-graphics 1.2.0 → 1.2.1

package/dist/esm/pixel/characterGeneratorPresets.js

@@ -1,4 +1,4 @@
-import { createPartData, generateMirroredDirections, registerParts } from './spriteGeneratorCore.js';
+import { generateMirroredDirections, createPartData, registerParts } from './spriteGeneratorCore.js';
 
 /**
  * characterGeneratorPresets.ts — Extensive library of character parts
@@ -47,7 +47,7 @@ const CLOTHING_PALETTES = {
    16×16 CHARACTER PARTS — HEADS
    ════════════════════════════════════════════════════════════════ */
 const _ = -1; // transparent shorthand
-const HEAD_ROUND_S = createPartData(8, 8, [
+const HEAD_ROUND_S = /* @__PURE__ */ createPartData(8, 8, [
     [_, _, 1, 1, 1, 1, _, _],
     [_, 1, 0, 0, 0, 0, 1, _],
     [1, 0, 0, 0, 0, 0, 0, 1],
@@ -57,7 +57,7 @@ const HEAD_ROUND_S = 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 = createPartData(7, 8, [
+const HEAD_ROUND_E = /* @__PURE__ */ createPartData(7, 8, [
     [_, _, 1, 1, 1, _, _],
     [_, 1, 0, 0, 0, 1, _],
     [1, 0, 0, 0, 0, 0, 1],
@@ -67,7 +67,7 @@ const HEAD_ROUND_E = createPartData(7, 8, [
     [_, 1, 0, 0, 0, 1, _],
     [_, _, 1, 1, 1, _, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848', '#e05050', '#2a2a4e']);
-const HEAD_ROUND_N = createPartData(8, 8, [
+const HEAD_ROUND_N = /* @__PURE__ */ createPartData(8, 8, [
     [_, _, 1, 1, 1, 1, _, _],
     [_, 1, 0, 0, 0, 0, 1, _],
     [1, 0, 0, 0, 0, 0, 0, 1],
@@ -77,7 +77,7 @@ const HEAD_ROUND_N = 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 = createPartData(8, 7, [
+const HEAD_SQUARE_S = /* @__PURE__ */ 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],
@@ -86,7 +86,7 @@ const HEAD_SQUARE_S = 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 = createPartData(10, 10, [
+const HEAD_CHIBI_S = /* @__PURE__ */ createPartData(10, 10, [
     [_, _, _, 1, 1, 1, 1, _, _, _],
     [_, _, 1, 0, 0, 0, 0, 1, _, _],
     [_, 1, 0, 0, 0, 0, 0, 0, 1, _],
@@ -99,13 +99,13 @@ const HEAD_CHIBI_S = createPartData(10, 10, [
     [_, _, 1, 1, 1, 1, 1, 1, _, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848', '#e05050', '#2a2a4e']);
 /* ── HAIR ── */
-const HAIR_SHORT_S = createPartData(8, 4, [
+const HAIR_SHORT_S = /* @__PURE__ */ 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 = createPartData(10, 10, [
+const HAIR_LONG_S = /* @__PURE__ */ createPartData(10, 10, [
     [_, _, _, 0, 0, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, 0, 0, _, _],
     [_, 0, 0, 1, 1, 1, 1, 0, 0, _],
@@ -117,7 +117,7 @@ const HAIR_LONG_S = createPartData(10, 10, [
     [_, 0, _, _, _, _, _, _, 0, _],
     [_, 0, 0, _, _, _, _, 0, 0, _],
 ], ['#4a3508', '#6b4e0a']);
-const HAIR_MOHAWK_S = createPartData(8, 6, [
+const HAIR_MOHAWK_S = /* @__PURE__ */ createPartData(8, 6, [
     [_, _, _, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, _, _],
     [_, _, 0, 0, 0, 0, _, _],
@@ -125,7 +125,7 @@ const HAIR_MOHAWK_S = createPartData(8, 6, [
     [_, 0, 1, _, _, 1, 0, _],
     [0, 1, _, _, _, _, 1, 0],
 ], ['#d03020', '#a02018']);
-const HAIR_PONYTAIL_S = createPartData(10, 8, [
+const HAIR_PONYTAIL_S = /* @__PURE__ */ createPartData(10, 8, [
     [_, _, _, 0, 0, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, 0, 0, _, _],
     [_, 0, 0, 1, 1, 1, 1, 0, 0, _],
@@ -135,7 +135,7 @@ const HAIR_PONYTAIL_S = createPartData(10, 8, [
     [_, _, _, _, _, _, _, _, _, 0],
     [_, _, _, _, _, _, _, _, 0, _],
 ], ['#f0d060', '#d0b040']);
-const HAIR_SPIKY_S = createPartData(10, 6, [
+const HAIR_SPIKY_S = /* @__PURE__ */ createPartData(10, 6, [
     [_, 0, _, _, 0, _, 0, _, _, _],
     [_, 0, 0, 0, 0, 0, 0, 0, _, _],
     [0, 0, 0, 0, 0, 0, 0, 0, 0, _],
@@ -144,7 +144,7 @@ const HAIR_SPIKY_S = createPartData(10, 6, [
     [_, _, _, _, _, _, _, _, _, _],
 ], ['var(--nice-bg, #1a1a2e)', '#101020']);
 /* ── TORSOS ── */
-const TORSO_BASIC_S = createPartData(8, 6, [
+const TORSO_BASIC_S = /* @__PURE__ */ createPartData(8, 6, [
     [_, _, 1, 1, 1, 1, _, _],
     [_, 1, 0, 0, 0, 0, 1, _],
     [1, 0, 0, 0, 0, 0, 0, 1],
@@ -152,7 +152,7 @@ const TORSO_BASIC_S = createPartData(8, 6, [
     [_, 1, 0, 0, 0, 0, 1, _],
     [_, _, 1, 1, 1, 1, _, _],
 ], ['#4060d0', '#3040b0']);
-const TORSO_ARMOR_S = createPartData(10, 7, [
+const TORSO_ARMOR_S = /* @__PURE__ */ createPartData(10, 7, [
     [_, _, _, 1, 1, 1, 1, _, _, _],
     [_, _, 1, 0, 2, 2, 0, 1, _, _],
     [_, 1, 0, 0, 2, 2, 0, 0, 1, _],
@@ -161,7 +161,7 @@ const TORSO_ARMOR_S = 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 = createPartData(10, 10, [
+const TORSO_ROBE_S = /* @__PURE__ */ createPartData(10, 10, [
     [_, _, _, 1, 1, 1, 1, _, _, _],
     [_, _, 1, 0, 0, 0, 0, 1, _, _],
     [_, 1, 0, 0, 2, 2, 0, 0, 1, _],
@@ -174,14 +174,14 @@ const TORSO_ROBE_S = createPartData(10, 10, [
     [_, _, _, 1, 1, 1, 1, _, _, _],
 ], ['#8020a0', '#601080', '#f0d060']);
 /* ── ARMS ── */
-const ARM_BASIC_S = createPartData(3, 5, [
+const ARM_BASIC_S = /* @__PURE__ */ createPartData(3, 5, [
     [_, 0, _],
     [0, 0, 1],
     [0, 0, 1],
     [0, 0, 1],
     [_, 0, _],
 ], ['var(--nice-warning-bg, #ffecd2)', '#c07848']);
-const ARM_ARMORED_S = createPartData(4, 5, [
+const ARM_ARMORED_S = /* @__PURE__ */ createPartData(4, 5, [
     [_, 0, 1, _],
     [0, 0, 0, 1],
     [0, 0, 0, 1],
@@ -189,14 +189,14 @@ const ARM_ARMORED_S = createPartData(4, 5, [
     [_, 0, 1, _],
 ], ['var(--nice-border, #c0c0c8)', '#909098']);
 /* ── LEGS ── */
-const LEG_BASIC_S = createPartData(3, 5, [
+const LEG_BASIC_S = /* @__PURE__ */ createPartData(3, 5, [
     [_, 0, _],
     [0, 0, 1],
     [0, 0, 1],
     [0, 0, 1],
     [0, 1, 1],
 ], ['#4060d0', '#3040b0']);
-const LEG_BOOT_S = createPartData(4, 5, [
+const LEG_BOOT_S = /* @__PURE__ */ createPartData(4, 5, [
     [_, 0, 0, _],
     [_, 0, 0, _],
     [_, 0, 0, _],
@@ -204,7 +204,7 @@ const LEG_BOOT_S = createPartData(4, 5, [
     [0, 0, 0, 1],
 ], ['#b08060', '#906840']);
 /* ── HATS ── */
-const HAT_WIZARD_S = createPartData(10, 8, [
+const HAT_WIZARD_S = /* @__PURE__ */ createPartData(10, 8, [
     [_, _, _, _, 0, _, _, _, _, _],
     [_, _, _, 0, 0, 0, _, _, _, _],
     [_, _, 0, 0, 0, 0, 0, _, _, _],
@@ -214,7 +214,7 @@ const HAT_WIZARD_S = createPartData(10, 8, [
     [0, 1, 1, 1, 1, 1, 1, 1, 0, _],
     [_, _, _, _, _, _, _, _, _, _],
 ], ['#8020a0', '#601080', '#f0d060']);
-const HAT_KNIGHT_S = createPartData(10, 6, [
+const HAT_KNIGHT_S = /* @__PURE__ */ createPartData(10, 6, [
     [_, _, _, 0, 0, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, 0, 0, _, _],
     [_, 0, 0, 0, 0, 0, 0, 0, 0, _],
@@ -222,14 +222,14 @@ const HAT_KNIGHT_S = 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 = createPartData(10, 5, [
+const HAT_CROWN_S = /* @__PURE__ */ 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 = createPartData(9, 5, [
+const HAT_CAP_S = /* @__PURE__ */ createPartData(9, 5, [
     [_, _, _, 0, 0, 0, _, _, _],
     [_, _, 0, 0, 0, 0, 0, _, _],
     [_, 0, 0, 0, 0, 0, 0, 0, _],
@@ -237,7 +237,7 @@ const HAT_CAP_S = createPartData(9, 5, [
     [_, _, 1, 1, 1, 1, 1, _, _],
 ], ['#d04040', '#b02020']);
 /* ── WEAPONS ── */
-const WEAPON_SWORD_S = createPartData(3, 10, [
+const WEAPON_SWORD_S = /* @__PURE__ */ createPartData(3, 10, [
     [_, 0, _],
     [_, 0, _],
     [_, 0, _],
@@ -249,7 +249,7 @@ const WEAPON_SWORD_S = createPartData(3, 10, [
     [_, 2, _],
     [_, 2, _],
 ], ['var(--nice-border, #c0c0c8)', '#f0d060', '#8b5e3c']);
-const WEAPON_STAFF_S = createPartData(3, 12, [
+const WEAPON_STAFF_S = /* @__PURE__ */ createPartData(3, 12, [
     [_, 1, _],
     [1, 1, 1],
     [_, 1, _],
@@ -263,7 +263,7 @@ const WEAPON_STAFF_S = createPartData(3, 12, [
     [_, 0, _],
     [_, 0, _],
 ], ['#8b5e3c', '#4080e0']);
-const WEAPON_BOW_S = createPartData(5, 10, [
+const WEAPON_BOW_S = /* @__PURE__ */ createPartData(5, 10, [
     [_, _, _, 0, _],
     [_, _, 0, _, 1],
     [_, 0, _, _, 1],
@@ -275,7 +275,7 @@ const WEAPON_BOW_S = createPartData(5, 10, [
     [_, _, 0, _, 1],
     [_, _, _, 0, _],
 ], ['#8b5e3c', 'var(--nice-border, #c0c0c8)']);
-const SHIELD_ROUND_S = createPartData(6, 7, [
+const SHIELD_ROUND_S = /* @__PURE__ */ createPartData(6, 7, [
     [_, _, 1, 1, _, _],
     [_, 1, 0, 0, 1, _],
     [1, 0, 0, 2, 0, 1],

package/dist/esm/pixel/usePixelEditor.js

@@ -1,5 +1,6 @@
 import { resolveCssColor } from '@nice2dev/ui-core';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useEditorAsk } from '../core/editorAsk.js';
 import { aseColorToHex, parseAseFile } from './asepriteFormat.js';
 import { exportAse, exportPNG, exportJPG, exportWebP, exportBMP, exportSVG, exportSheet } from './pixelEditorExports.js';
 import { lid, DEFAULT_PALETTE, celKey, PIXEL_CHECKER_DARK, hex2t, inB, plotEllipse } from './pixelEditorTypes.js';
@@ -9,11 +10,12 @@ import { DEFAULT_BRUSH, createBlankImageData, cloneImageData, bresenhamLine, set
  * 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 } = useEditorAsk();
     /* ── state ── */
     const [dw, setDw] = useState(initialWidth);
     const [dh, setDh] = useState(initialHeight);
@@ -294,7 +296,7 @@ function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary
         }
         // symmetry guides
         if (symmetry !== 'none') {
-            ctx.strokeStyle = 'rgba(255,100,100,0.3)';
+            ctx.strokeStyle = 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') {
@@ -329,6 +331,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++) {
@@ -345,7 +348,7 @@ function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary
             }
         }
         // border
-        ctx.strokeStyle = 'rgba(80,100,200,0.4)';
+        ctx.strokeStyle = 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
@@ -832,13 +835,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 = useCallback(() => {
         snap('Add Layer');
@@ -1272,6 +1274,7 @@ function usePixelEditor({ initialWidth = 64, initialHeight = 64, onSaveToLibrary
     }, [fc, dw, dh, layers, tick]);
     /* ── return API ── */
     return {
+        pendingAsk,
         dw,
         dh,
         layers,

package/dist/esm/texture/Nice3DTexturePainter.js

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

package/dist/esm/ui/NiceUIDesigner.js

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { NiceTutorialButton, resolveTutorial, NiceAppShell } from '@nice2dev/ui';
 import { NiceIcon } from '@nice2dev/ui-core';
 import React from 'react';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const UI_DESIGNER_TOUR = [
@@ -310,6 +311,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 } = useNiceTranslation();
     const designer = useUIDesigner();
     const [breakpoint, setBreakpoint] = React.useState('desktop');
     const [dragType, setDragType] = React.useState(null);
@@ -393,7 +395,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                         color: 'var(--nice-text-secondary, #868e96)',
                         fontSize: 11,
                         gap: 4,
-                    }, children: [jsx(NiceIcon, { name: "image", size: 14 }), " Image"] })) : node.type === 'List' ? (jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => (jsx("li", { children: item }, i))) })) : node.type === 'Divider' ? (jsx("hr", { style: {
+                    }, children: [jsx(NiceIcon, { name: "image", size: 14 }), " ", t('uiDesigner.image', 'Image')] })) : node.type === 'List' ? (jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => (jsx("li", { children: item }, i))) })) : node.type === 'Divider' ? (jsx("hr", { style: {
                         margin: 0,
                         border: 'none',
                         borderTop: '1px solid var(--nice-border, #dee2e6)',
@@ -419,7 +421,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) && jsx(NiceIcon, { name: def.icon, size: 12 }), 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));
     };
@@ -433,7 +437,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
             height: '100%',
             overflowY: 'auto',
             boxSizing: 'border-box',
-        }, children: [jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: "Components" }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: COMPONENT_DEFS.map((def) => (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: [jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: t('uiDesigner.components', 'Components') }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: COMPONENT_DEFS.map((def) => (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,
@@ -445,8 +449,8 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                                 cursor: 'grab',
                                 textAlign: 'left',
                                 fontSize: 11,
-                            }, children: [jsx(NiceIcon, { name: def.icon, size: 14 }), " ", def.label] }, def.type))) })] }), jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: "Tree" }), jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: designer.tree.length === 0 ? (jsx("div", { style: { color: 'var(--nice-text-secondary, #5c5f66)', padding: 4 }, children: "Empty" })) : (designer.tree.map((n) => renderTreeItem(n))) })] })] }));
-    const toolbarContent = (jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', fontSize: 11, padding: '4px 8px' }, children: [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: jsx(NiceIcon, { name: "reply", size: 14 }) }), 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: jsx(NiceIcon, { name: "forward", size: 14 }) }), jsx("div", { style: { width: 1, height: 16, background: 'var(--nice-border, #373a40)' } }), jsxs("button", { onClick: () => setBreakpoint('desktop'), style: btnStyle(breakpoint === 'desktop'), children: [jsx(NiceIcon, { name: "monitor", size: 14 }), " Desktop"] }), jsxs("button", { onClick: () => setBreakpoint('tablet'), style: btnStyle(breakpoint === 'tablet'), children: [jsx(NiceIcon, { name: "window", size: 14 }), " Tablet"] }), jsxs("button", { onClick: () => setBreakpoint('mobile'), style: btnStyle(breakpoint === 'mobile'), children: [jsx(NiceIcon, { name: "phone", size: 14 }), " Mobile"] }), jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxs("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: 'var(--nice-danger, #ff6b6b)' }, children: [jsx(NiceIcon, { name: "trash", size: 14 }), " Delete"] })), jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ['</>', " Code"] }), jsx("button", { onClick: () => onExport === null || onExport === void 0 ? void 0 : onExport(designer.exportCode()), style: {
+                            }, children: [jsx(NiceIcon, { name: def.icon, size: 14 }), " ", def.label] }, def.type))) })] }), jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: t('uiDesigner.tree', 'Tree') }), jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: designer.tree.length === 0 ? (jsx("div", { style: { color: 'var(--nice-text-secondary, #5c5f66)', padding: 4 }, children: t('uiDesigner.empty', 'Empty') })) : (designer.tree.map((n) => renderTreeItem(n))) })] })] }));
+    const toolbarContent = (jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', fontSize: 11, padding: '4px 8px' }, children: [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: jsx(NiceIcon, { name: "reply", size: 14 }) }), 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: jsx(NiceIcon, { name: "forward", size: 14 }) }), jsx("div", { style: { width: 1, height: 16, background: 'var(--nice-border, #373a40)' } }), jsxs("button", { onClick: () => setBreakpoint('desktop'), style: btnStyle(breakpoint === 'desktop'), children: [jsx(NiceIcon, { name: "monitor", size: 14 }), " ", t('uiDesigner.desktop', 'Desktop')] }), jsxs("button", { onClick: () => setBreakpoint('tablet'), style: btnStyle(breakpoint === 'tablet'), children: [jsx(NiceIcon, { name: "window", size: 14 }), " ", t('uiDesigner.tablet', 'Tablet')] }), jsxs("button", { onClick: () => setBreakpoint('mobile'), style: btnStyle(breakpoint === 'mobile'), children: [jsx(NiceIcon, { name: "phone", size: 14 }), " ", t('uiDesigner.mobile', 'Mobile')] }), jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxs("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: 'var(--nice-danger, #ff6b6b)' }, children: [jsx(NiceIcon, { name: "trash", size: 14 }), " ", t('uiDesigner.delete', 'Delete')] })), jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ['</>', " ", t('uiDesigner.code', 'Code')] }), 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)',
@@ -454,7 +458,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                     borderRadius: 3,
                     cursor: 'pointer',
                     fontSize: 11,
-                }, children: "Export" })] }));
+                }, children: t('uiDesigner.export', 'Export') })] }));
     const mainContent = (jsx("div", { style: {
             flex: 1,
             display: 'flex',
@@ -470,7 +474,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() })) : (jsx("div", { style: {
                 flex: 1,
@@ -487,7 +491,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 = (jsxs("div", { style: {
             width: 200,
             fontSize: 11,
@@ -498,7 +502,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
             overflowY: 'auto',
             padding: 8,
             boxSizing: 'border-box',
-        }, children: [jsx("strong", { style: { fontSize: 12 }, children: "Properties" }), selectedNode ? (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxs("div", { style: {
+        }, children: [jsx("strong", { style: { fontSize: 12 }, children: t('uiDesigner.properties', 'Properties') }), selectedNode ? (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxs("div", { style: {
                             color: 'var(--nice-text-secondary, #868e96)',
                             display: 'flex',
                             alignItems: 'center',
@@ -507,13 +511,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 ? jsx(NiceIcon, { name: di, size: 14 }) : null;
-                            })(), ' ', selectedNode.type] }), selectedNode.props.text !== undefined && (jsxs("div", { children: [jsx("label", { children: "Text" }), jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxs("div", { children: [jsx("label", { children: "Placeholder" }), jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxs("div", { children: [jsx("label", { children: "Heading Level" }), jsx("select", { value: Number(selectedNode.props.level), onChange: (e) => designer.updateNode(selectedNode.id, {
+                            })(), ' ', selectedNode.type] }), selectedNode.props.text !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.text', 'Text') }), jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.placeholder', 'Placeholder') }), jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.headingLevel', 'Heading Level') }), 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) => (jsxs("option", { value: v, children: ["H", v] }, v))) })] })), selectedNode.props.variant !== undefined && (jsxs("div", { children: [jsx("label", { children: "Variant" }), 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) => (jsx("option", { value: v, children: v }, v))) })] })), selectedNode.props.src !== undefined && (jsxs("div", { children: [jsx("label", { children: "Image URL" }), jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxs("div", { children: [jsx("label", { children: "Alt Text" }), jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsx("hr", { style: {
+                                }), style: fieldStyle, children: [1, 2, 3, 4, 5, 6].map((v) => (jsxs("option", { value: v, children: ["H", v] }, v))) })] })), selectedNode.props.variant !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.variant', 'Variant') }), 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) => (jsx("option", { value: v, children: v }, v))) })] })), selectedNode.props.src !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.imageUrl', 'Image URL') }), jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.altText', 'Alt Text') }), jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsx("hr", { style: {
                             border: 'none',
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             margin: '4px 0',
-                        } }), jsx("strong", { style: { color: 'var(--nice-text-secondary, #868e96)' }, children: "Style" }), ['padding', 'margin', 'gap', 'borderRadius'].map((prop) => (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: prop }), jsx("input", { type: "number", value: typeof selectedNode.style[prop] === 'number'
+                        } }), jsx("strong", { style: { color: 'var(--nice-text-secondary, #868e96)' }, children: t('uiDesigner.style', 'Style') }), ['padding', 'margin', 'gap', 'borderRadius'].map((prop) => (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: prop }), 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) },
@@ -543,7 +547,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 (jsxs("div", { className: `nice-ui-designer ${className}`, style: { position: 'relative', height: '100%' }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, UI_DESIGNER_TOUR) }) }), jsx(NiceAppShell, { flush: true, toolbar: toolbarContent, sidebar: leftPanel, rightSidebar: rightPanel, children: mainContent })] }));
 };
 

package/dist/esm/vector/NiceSvgToCode.js

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

package/dist/esm/vector/VectorEditor.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { NiceButton, NiceAppShell, NiceModal, NiceTextArea } from '@nice2dev/ui';
 import { NiceIcon } from '@nice2dev/ui-core';
 import { useRef, useState, useCallback, useEffect } from 'react';
+import { EditorAskDialog } from '../core/editorAsk.js';
 import { useNiceTranslation } from '../core/i18n.js';
 import { useVectorEditor } from './useVectorEditor.js';
 import { frameToTransform, sampleAnimation } from './vectorAnimation.js';
@@ -63,7 +64,7 @@ const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, on
     }, [initialIcon, artW, artH, api]);
     const { shapes, selId, tool, zoom, px, py, dlgSvg, svgText, gridSize, boxRef, fInp, animations, previewTime, isPlaying, onDown, onMove, onUp, onWheel, onDblClick, openFile, switchTool, importSVGString, setDlgSvg, setSvgText, } = api;
     const toolRail = (jsx("div", { className: styles.toolbar, children: TOOLS.map((t) => (jsx(NiceButton, { className: `${styles.toolBtn} ${tool === t.id ? styles.toolBtnActive : ''}`, onClick: () => switchTool(t.id), "aria-label": `${t.label} (${t.key})`, variant: tool === t.id ? 'primary' : 'ghost', size: "sm", children: jsx(NiceIcon, { name: t.icon, size: "sm" }) }, t.id))) }));
-    return (jsxs(Fragment, { children: [jsx("input", { ref: fInp, type: "file", accept: ".svg", style: { display: 'none' }, onChange: (e) => {
+    return (jsxs(Fragment, { children: [jsx(EditorAskDialog, { ask: api.pendingAsk }), jsx("input", { ref: fInp, type: "file", accept: ".svg", style: { display: 'none' }, onChange: (e) => {
                     var _a;
                     const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (f) {
@@ -109,7 +110,7 @@ const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, on
                                 }
                                 const node = (jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id));
                                 return previewTr ? (jsx("g", { transform: previewTr, children: node }, s.id)) : (node);
-                            })] }) }) }), jsxs(NiceModal, { open: dlgSvg, onClose: () => setDlgSvg(false), title: "Paste SVG", children: [jsx("label", { children: "Paste SVG source code below:" }), jsx(NiceTextArea, { value: svgText, onChange: (val) => setSvgText(val), placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...>' }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "ghost", onClick: () => setDlgSvg(false), children: "Cancel" }), jsx(NiceButton, { variant: "primary", onClick: () => importSVGString(svgText), children: "Import" })] })] }), jsxs(NiceModal, { open: snippetOpen, onClose: () => setSnippetOpen(false), title: t('vectorEditor.snippet.title', 'Icon snippet copied to clipboard'), children: [jsxs("p", { style: { marginTop: 0 }, children: [t('vectorEditor.snippet.pasteHint', 'Paste into'), ' ', jsxs("code", { children: ["packages/icons/src/icons/", iconCategory ? `${iconCategory.toLowerCase()}` : '<category>', ".tsx"] }), ":"] }), jsx(NiceTextArea, { value: snippetText, onChange: (val) => setSnippetText(val), rows: 16 }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "primary", onClick: () => {
+                            })] }) }) }), jsxs(NiceModal, { open: dlgSvg, onClose: () => setDlgSvg(false), title: t('vectorEditor.pasteSvg', 'Paste SVG'), children: [jsx("label", { children: "Paste SVG source code below:" }), jsx(NiceTextArea, { value: svgText, onChange: (val) => setSvgText(val), placeholder: t('vectorEditor.svgXmlnsHttpWwwW3', '<svg xmlns="http://www.w3.org/2000/svg" ...>') }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "ghost", onClick: () => setDlgSvg(false), children: t('vectorEditor.cancel', 'Cancel') }), jsx(NiceButton, { variant: "primary", onClick: () => importSVGString(svgText), children: t('vectorEditor.import', 'Import') })] })] }), jsxs(NiceModal, { open: snippetOpen, onClose: () => setSnippetOpen(false), title: t('vectorEditor.snippet.title', 'Icon snippet copied to clipboard'), children: [jsxs("p", { style: { marginTop: 0 }, children: [t('vectorEditor.snippet.pasteHint', 'Paste into'), ' ', jsxs("code", { children: ["packages/icons/src/icons/", iconCategory ? `${iconCategory.toLowerCase()}` : '<category>', ".tsx"] }), ":"] }), jsx(NiceTextArea, { value: snippetText, onChange: (val) => setSnippetText(val), rows: 16 }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "primary", onClick: () => {
                                     if (typeof navigator !== 'undefined' && navigator.clipboard) {
                                         navigator.clipboard.writeText(snippetText).catch(() => { });
                                     }