@nice2dev/ui-graphics 1.2.1 → 1.3.0

package/dist/cjs/core/minimap.js

@@ -20,6 +20,27 @@ const Minimap = ({ canvasRef, imageDataUrl, documentWidth, documentHeight, viewp
     const scale = Math.min(scaleX, scaleY);
     // Draw minimap
     React.useEffect(() => {
+        // inside the effect: it draws with this run's viewport, scale and size
+        const drawViewport = (ctx) => {
+            // Draw viewport rect
+            const vx = viewport.x * scale;
+            const vy = viewport.y * scale;
+            const vw = viewport.width * scale;
+            const vh = viewport.height * scale;
+            ctx.strokeStyle = uiCore.resolveCssColor('var(--nice-primary-tint-80, rgba(59, 130, 246, 0.8))', ctx.canvas);
+            ctx.lineWidth = 1.5;
+            ctx.strokeRect(vx, vy, vw, vh);
+            // Dim areas outside viewport
+            ctx.fillStyle = uiCore.resolveCssColor('var(--nice-overlay-30, rgba(0, 0, 0, 0.3))', ctx.canvas);
+            // Top
+            ctx.fillRect(0, 0, mapW, vy);
+            // Bottom
+            ctx.fillRect(0, vy + vh, mapW, mapH - vy - vh);
+            // Left
+            ctx.fillRect(0, vy, vx, vh);
+            // Right
+            ctx.fillRect(vx + vw, vy, mapW - vx - vw, vh);
+        };
         if (!visible) {
             return;
         }
@@ -64,26 +85,6 @@ const Minimap = ({ canvasRef, imageDataUrl, documentWidth, documentHeight, viewp
         mapW,
         mapH,
     ]);
-    function drawViewport(ctx) {
-        // Draw viewport rect
-        const vx = viewport.x * scale;
-        const vy = viewport.y * scale;
-        const vw = viewport.width * scale;
-        const vh = viewport.height * scale;
-        ctx.strokeStyle = uiCore.resolveCssColor('var(--nice-primary-tint-80, rgba(59, 130, 246, 0.8))', ctx.canvas);
-        ctx.lineWidth = 1.5;
-        ctx.strokeRect(vx, vy, vw, vh);
-        // Dim areas outside viewport
-        ctx.fillStyle = uiCore.resolveCssColor('var(--nice-overlay-30, rgba(0, 0, 0, 0.3))', ctx.canvas);
-        // Top
-        ctx.fillRect(0, 0, mapW, vy);
-        // Bottom
-        ctx.fillRect(0, vy + vh, mapW, mapH - vy - vh);
-        // Left
-        ctx.fillRect(0, vy, vx, vh);
-        // Right
-        ctx.fillRect(vx + vw, vy, mapW - vx - vw, vh);
-    }
     const handlePointerDown = (e) => {
         isDragging.current = true;
         updateViewportFromPointer(e);

package/dist/cjs/font/NiceFontEditor.js

@@ -239,17 +239,17 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                             borderRadius: 3,
                             cursor: 'pointer',
                             fontSize: 11,
-                        }, children: t('fontEditor.exportSvgFont', 'Export SVG Font') })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, borderBottom: '1px solid var(--nice-border, #373a40)' }, children: [jsxRuntime.jsx("button", { onClick: () => setTab('glyph'), style: tabBtnStyle(tab === 'glyph'), children: t('fontEditor.glyphs', 'Glyphs') }), jsxRuntime.jsx("button", { onClick: () => setTab('metrics'), style: tabBtnStyle(tab === 'metrics'), children: t('fontEditor.metrics', 'Metrics') }), jsxRuntime.jsx("button", { onClick: () => setTab('kerning'), style: tabBtnStyle(tab === 'kerning'), children: t('fontEditor.kerning', 'Kerning') })] }), tab === 'glyph' && (jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [jsxRuntime.jsxs("div", { style: {
+                        }, children: t('fontEditor.exportSvgFont', 'Export SVG Font') })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, borderBottom: '1px solid var(--nice-border, #373a40)' }, children: [jsxRuntime.jsx("button", { onClick: () => setTab('glyph'), style: tabBtnStyle(tab === 'glyph'), children: t('fontEditor.glyphs', 'Glyphs') }), jsxRuntime.jsx("button", { onClick: () => setTab('metrics'), style: tabBtnStyle(tab === 'metrics'), children: t('fontEditor.metrics', 'Metrics') }), jsxRuntime.jsx("button", { onClick: () => setTab('kerning'), style: tabBtnStyle(tab === 'kerning'), children: t('fontEditor.kerning', 'Kerning') })] }), tab === 'glyph' && (jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [jsxRuntime.jsx("div", { style: {
                                     fontSize: 11,
                                     marginBottom: 4,
                                     color: 'var(--nice-text-secondary, #868e96)',
-                                }, children: [editor.glyphs.length, " glyphs"] }), jsxRuntime.jsx("div", { style: {
+                                }, children: t('fontEditor.glyphs2', '{glyphs} glyphs').replace('{glyphs}', String(editor.glyphs.length)) }), jsxRuntime.jsx("div", { style: {
                                     display: 'grid',
                                     gridTemplateColumns: 'repeat(auto-fill, 36px)',
                                     gap: 2,
                                     maxHeight: 300,
                                     overflowY: 'auto',
-                                }, children: editor.glyphs.map((g) => (jsxRuntime.jsx("div", { onClick: () => {
+                                }, children: editor.glyphs.map((g) => (jsxRuntime.jsx("div", { role: "button", tabIndex: 0, "aria-pressed": editor.selectedGlyph === g.unicode, onKeyDown: uiCore.clickOnActivationKey, onClick: () => {
                                         editor.setSelectedGlyph(g.unicode);
                                         setPathPoints([]);
                                     }, title: `U+${g.unicode.toString(16).toUpperCase().padStart(4, '0')} - ${g.name}`, style: {
@@ -274,7 +274,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                                         border: g.path
                                             ? '1px solid var(--nice-border, #373a40)'
                                             : '1px solid transparent',
-                                    }, children: g.char }, g.unicode))) })] }), jsxRuntime.jsx("div", { style: { width: 320, fontSize: 11 }, children: selectedG ? (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsxs("strong", { children: ["\"", selectedG.char, "\" (U+", selectedG.unicode.toString(16).toUpperCase().padStart(4, '0'), ")"] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 2 }, children: [jsxRuntime.jsx("button", { onClick: () => setDrawMode('select'), style: btnStyle(drawMode === 'select'), children: t('fontEditor.select', 'Select') }), jsxRuntime.jsx("button", { onClick: () => setDrawMode('pen'), style: btnStyle(drawMode === 'pen'), children: "Pen" }), jsxRuntime.jsx("button", { onClick: clearPath, style: btnStyle(false), children: t('fontEditor.clear', 'Clear') }), jsxRuntime.jsx("button", { onClick: () => setShowGrid((g) => !g), style: btnStyle(showGrid), children: t('fontEditor.grid', 'Grid') })] })] }), jsxRuntime.jsxs("svg", { width: 280, height: 280, viewBox: `0 0 ${em} ${em}`, style: {
+                                    }, children: g.char }, g.unicode))) })] }), jsxRuntime.jsx("div", { style: { width: 320, fontSize: 11 }, children: selectedG ? (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxRuntime.jsxs("strong", { children: ["\"", selectedG.char, "\" (U+", selectedG.unicode.toString(16).toUpperCase().padStart(4, '0'), ")"] }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 2 }, children: [jsxRuntime.jsx("button", { onClick: () => setDrawMode('select'), style: btnStyle(drawMode === 'select'), children: t('fontEditor.select', 'Select') }), jsxRuntime.jsx("button", { onClick: () => setDrawMode('pen'), style: btnStyle(drawMode === 'pen'), children: t('fontEditor.pen', 'Pen') }), jsxRuntime.jsx("button", { onClick: clearPath, style: btnStyle(false), children: t('fontEditor.clear', 'Clear') }), jsxRuntime.jsx("button", { onClick: () => setShowGrid((g) => !g), style: btnStyle(showGrid), children: t('fontEditor.grid', 'Grid') })] })] }), jsxRuntime.jsxs("svg", { width: 280, height: 280, viewBox: `0 0 ${em} ${em}`, style: {
                                         background: 'var(--nice-bg, #141517)',
                                         borderRadius: 4,
                                         cursor: drawMode === 'pen' ? 'crosshair' : 'default',
@@ -282,7 +282,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                                             Array.from({ length: 11 }, (_, i) => {
                                                 const pos = (i / 10) * em;
                                                 return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("line", { x1: pos, y1: 0, x2: pos, y2: em, stroke: "var(--nice-overlay-light-5, rgba(255, 255, 255, 0.05))", strokeWidth: em * 0.002 }), jsxRuntime.jsx("line", { x1: 0, y1: pos, x2: em, y2: pos, stroke: "var(--nice-overlay-light-5, rgba(255, 255, 255, 0.05))", strokeWidth: em * 0.002 })] }, i));
-                                            }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.ascent, x2: em, y2: em - editor.metrics.ascent, stroke: "rgba(51,154,240,0.3)", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.01}` }), jsxRuntime.jsx("line", { x1: 0, y1: em, x2: em, y2: em, stroke: "rgba(47,158,68,0.3)", strokeWidth: em * 0.003 }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.xHeight, x2: em, y2: em - editor.metrics.xHeight, stroke: "rgba(249,226,175,0.3)", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.01}` }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.capHeight, x2: em, y2: em - editor.metrics.capHeight, stroke: "rgba(243,139,168,0.3)", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.01}` }), jsxRuntime.jsx("line", { x1: selectedG.leftBearing, y1: 0, x2: selectedG.leftBearing, y2: em, stroke: "rgba(166,227,161,0.2)", strokeWidth: em * 0.002 }), jsxRuntime.jsx("line", { x1: selectedG.advanceWidth, y1: 0, x2: selectedG.advanceWidth, y2: em, stroke: "rgba(243,139,168,0.2)", strokeWidth: em * 0.002 }), selectedG.path && (jsxRuntime.jsx("path", { d: selectedG.path, fill: "rgba(205,214,244,0.8)", stroke: "#89b4fa", strokeWidth: em * 0.005 })), pathPoints.map((p, i) => (jsxRuntime.jsx("circle", { cx: p.x, cy: p.y, r: em * 0.015, fill: i === 0 ? 'var(--nice-success, #2f9e44)' : 'var(--nice-info, #339af0)', stroke: "var(--nice-bg, #fff)", strokeWidth: em * 0.003 }, i))), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.ascent - em * 0.01, fill: "rgba(51,154,240,0.5)", fontSize: em * 0.03, children: "ascent" }), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.xHeight - em * 0.01, fill: "rgba(249,226,175,0.5)", fontSize: em * 0.03, children: "x-height" }), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.capHeight - em * 0.01, fill: "rgba(243,139,168,0.5)", fontSize: em * 0.03, children: "cap" })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: t('fontEditor.svgPath', 'SVG Path') }), jsxRuntime.jsx("textarea", { value: selectedG.path, onChange: (e) => editor.updateGlyph(selectedG.unicode, { path: e.target.value }), rows: 3, style: { ...fieldStyle, fontFamily: 'monospace', resize: 'vertical' } })] }), jsxRuntime.jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [jsxRuntime.jsx("label", { children: t('fontEditor.advanceWidth', 'Advance Width') }), jsxRuntime.jsx("input", { type: "number", value: selectedG.advanceWidth, onChange: (e) => editor.updateGlyph(selectedG.unicode, {
+                                            }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.ascent, x2: em, y2: em - editor.metrics.ascent, stroke: "rgba(51,154,240,0.3)", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.01}` }), jsxRuntime.jsx("line", { x1: 0, y1: em, x2: em, y2: em, stroke: "rgba(47,158,68,0.3)", strokeWidth: em * 0.003 }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.xHeight, x2: em, y2: em - editor.metrics.xHeight, stroke: "rgba(249,226,175,0.3)", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.01}` }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.capHeight, x2: em, y2: em - editor.metrics.capHeight, stroke: "rgba(243,139,168,0.3)", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.01}` }), jsxRuntime.jsx("line", { x1: selectedG.leftBearing, y1: 0, x2: selectedG.leftBearing, y2: em, stroke: "rgba(166,227,161,0.2)", strokeWidth: em * 0.002 }), jsxRuntime.jsx("line", { x1: selectedG.advanceWidth, y1: 0, x2: selectedG.advanceWidth, y2: em, stroke: "rgba(243,139,168,0.2)", strokeWidth: em * 0.002 }), selectedG.path && (jsxRuntime.jsx("path", { d: selectedG.path, fill: "rgba(205,214,244,0.8)", stroke: "#89b4fa", strokeWidth: em * 0.005 })), pathPoints.map((p, i) => (jsxRuntime.jsx("circle", { cx: p.x, cy: p.y, r: em * 0.015, fill: i === 0 ? 'var(--nice-success, #2f9e44)' : 'var(--nice-info, #339af0)', stroke: "var(--nice-bg, #fff)", strokeWidth: em * 0.003 }, i))), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.ascent - em * 0.01, fill: "rgba(51,154,240,0.5)", fontSize: em * 0.03, children: t('fontEditor.ascent2', 'ascent') }), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.xHeight - em * 0.01, fill: "rgba(249,226,175,0.5)", fontSize: em * 0.03, children: t('fontEditor.xHeight2', 'x-height') }), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.capHeight - em * 0.01, fill: "rgba(243,139,168,0.5)", fontSize: em * 0.03, children: t('fontEditor.cap2', 'cap') })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: t('fontEditor.svgPath', 'SVG Path') }), jsxRuntime.jsx("textarea", { value: selectedG.path, onChange: (e) => editor.updateGlyph(selectedG.unicode, { path: e.target.value }), rows: 3, style: { ...fieldStyle, fontFamily: 'monospace', resize: 'vertical' } })] }), jsxRuntime.jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [jsxRuntime.jsx("label", { children: t('fontEditor.advanceWidth', 'Advance Width') }), jsxRuntime.jsx("input", { type: "number", value: selectedG.advanceWidth, onChange: (e) => editor.updateGlyph(selectedG.unicode, {
                                                 advanceWidth: Number(e.target.value),
                                             }), style: fieldStyle }), jsxRuntime.jsx("label", { children: t('fontEditor.leftBearing', 'Left Bearing') }), jsxRuntime.jsx("input", { type: "number", value: selectedG.leftBearing, onChange: (e) => editor.updateGlyph(selectedG.unicode, { leftBearing: Number(e.target.value) }), style: fieldStyle })] })] })) : (jsxRuntime.jsx("div", { style: {
                                 color: 'var(--nice-text-secondary, #868e96)',
@@ -295,7 +295,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                         ['lineGap', 'Line Gap'],
                         ['xHeight', 'x-Height'],
                         ['capHeight', 'Cap Height'],
-                    ].map(([key, label]) => (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }, children: [jsxRuntime.jsx("span", { style: { minWidth: 100, fontSize: 11 }, children: label }), jsxRuntime.jsx("input", { type: "number", value: editor.metrics[key], onChange: (e) => editor.setMetrics({ ...editor.metrics, [key]: Number(e.target.value) }), style: fieldStyle })] }, key))), jsxRuntime.jsxs("svg", { width: 300, height: 200, viewBox: `0 0 ${em} ${em}`, style: { background: 'var(--nice-bg, #141517)', borderRadius: 4, marginTop: 12 }, children: [jsxRuntime.jsx("rect", { x: 0, y: em - editor.metrics.ascent, width: em, height: editor.metrics.ascent - editor.metrics.descent, fill: "rgba(51,154,240,0.05)", stroke: "rgba(51,154,240,0.2)", strokeWidth: em * 0.003 }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.ascent, x2: em, y2: em - editor.metrics.ascent, stroke: "var(--nice-info, #339af0)", strokeWidth: em * 0.004 }), jsxRuntime.jsx("line", { x1: 0, y1: em, x2: em, y2: em, stroke: "var(--nice-success, #2f9e44)", strokeWidth: em * 0.004 }), jsxRuntime.jsx("line", { x1: 0, y1: em + Math.abs(editor.metrics.descent), x2: em, y2: em + Math.abs(editor.metrics.descent), stroke: "#e03131", strokeWidth: em * 0.004 }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.xHeight, x2: em, y2: em - editor.metrics.xHeight, stroke: "#f9e2af", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.015}` }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.capHeight, x2: em, y2: em - editor.metrics.capHeight, stroke: "#f38ba8", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.015}` }), jsxRuntime.jsxs("text", { x: em * 0.02, y: em - editor.metrics.ascent + em * 0.05, fill: "var(--nice-info, #339af0)", fontSize: em * 0.04, children: ["Ascent (", editor.metrics.ascent, ")"] }), jsxRuntime.jsx("text", { x: em * 0.02, y: em + em * 0.05, fill: "var(--nice-success, #2f9e44)", fontSize: em * 0.04, children: t('fontEditor.baseline', 'Baseline') }), jsxRuntime.jsxs("text", { x: em * 0.02, y: em - editor.metrics.xHeight + em * 0.05, fill: "#f9e2af", fontSize: em * 0.04, children: ["x-Height (", editor.metrics.xHeight, ")"] }), jsxRuntime.jsxs("text", { x: em * 0.02, y: em - editor.metrics.capHeight + em * 0.05, fill: "#f38ba8", fontSize: em * 0.04, children: ["Cap (", editor.metrics.capHeight, ")"] })] })] })), tab === 'kerning' && (jsxRuntime.jsxs("div", { style: { maxWidth: 500 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 8 }, children: t('fontEditor.kerningPairs', 'Kerning Pairs') }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, marginBottom: 8, alignItems: 'center', fontSize: 11 }, children: [jsxRuntime.jsx("input", { value: newKernLeft, onChange: (e) => setNewKernLeft(e.target.value), maxLength: 1, style: { ...fieldStyle, width: 30, textAlign: 'center' } }), jsxRuntime.jsx("input", { value: newKernRight, onChange: (e) => setNewKernRight(e.target.value), maxLength: 1, style: { ...fieldStyle, width: 30, textAlign: 'center' } }), jsxRuntime.jsx("button", { onClick: () => {
+                    ].map(([key, label]) => (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }, children: [jsxRuntime.jsx("span", { style: { minWidth: 100, fontSize: 11 }, children: label }), jsxRuntime.jsx("input", { type: "number", value: editor.metrics[key], onChange: (e) => editor.setMetrics({ ...editor.metrics, [key]: Number(e.target.value) }), style: fieldStyle })] }, key))), jsxRuntime.jsxs("svg", { width: 300, height: 200, viewBox: `0 0 ${em} ${em}`, style: { background: 'var(--nice-bg, #141517)', borderRadius: 4, marginTop: 12 }, children: [jsxRuntime.jsx("rect", { x: 0, y: em - editor.metrics.ascent, width: em, height: editor.metrics.ascent - editor.metrics.descent, fill: "rgba(51,154,240,0.05)", stroke: "rgba(51,154,240,0.2)", strokeWidth: em * 0.003 }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.ascent, x2: em, y2: em - editor.metrics.ascent, stroke: "var(--nice-info, #339af0)", strokeWidth: em * 0.004 }), jsxRuntime.jsx("line", { x1: 0, y1: em, x2: em, y2: em, stroke: "var(--nice-success, #2f9e44)", strokeWidth: em * 0.004 }), jsxRuntime.jsx("line", { x1: 0, y1: em + Math.abs(editor.metrics.descent), x2: em, y2: em + Math.abs(editor.metrics.descent), stroke: "#e03131", strokeWidth: em * 0.004 }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.xHeight, x2: em, y2: em - editor.metrics.xHeight, stroke: "#f9e2af", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.015}` }), jsxRuntime.jsx("line", { x1: 0, y1: em - editor.metrics.capHeight, x2: em, y2: em - editor.metrics.capHeight, stroke: "#f38ba8", strokeWidth: em * 0.003, strokeDasharray: `${em * 0.015}` }), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.ascent + em * 0.05, fill: "var(--nice-info, #339af0)", fontSize: em * 0.04, children: t('fontEditor.ascent', 'Ascent ({ascent})').replace('{ascent}', String(editor.metrics.ascent)) }), jsxRuntime.jsx("text", { x: em * 0.02, y: em + em * 0.05, fill: "var(--nice-success, #2f9e44)", fontSize: em * 0.04, children: t('fontEditor.baseline', 'Baseline') }), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.xHeight + em * 0.05, fill: "#f9e2af", fontSize: em * 0.04, children: t('fontEditor.xHeight', 'x-Height ({xHeight})').replace('{xHeight}', String(editor.metrics.xHeight)) }), jsxRuntime.jsx("text", { x: em * 0.02, y: em - editor.metrics.capHeight + em * 0.05, fill: "#f38ba8", fontSize: em * 0.04, children: t('fontEditor.cap', 'Cap ({capHeight})').replace('{capHeight}', String(editor.metrics.capHeight)) })] })] })), tab === 'kerning' && (jsxRuntime.jsxs("div", { style: { maxWidth: 500 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 8 }, children: t('fontEditor.kerningPairs', 'Kerning Pairs') }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, marginBottom: 8, alignItems: 'center', fontSize: 11 }, children: [jsxRuntime.jsx("input", { value: newKernLeft, onChange: (e) => setNewKernLeft(e.target.value), maxLength: 1, style: { ...fieldStyle, width: 30, textAlign: 'center' } }), jsxRuntime.jsx("input", { value: newKernRight, onChange: (e) => setNewKernRight(e.target.value), maxLength: 1, style: { ...fieldStyle, width: 30, textAlign: 'center' } }), jsxRuntime.jsx("button", { onClick: () => {
                                     if (newKernLeft && newKernRight) {
                                         setKerningPairs((prev) => [
                                             ...prev,

package/dist/cjs/game/GameAsset2dEditor.js

@@ -14,7 +14,7 @@ var useGameAssetEditor = require('./useGameAssetEditor.js');
 const MenuBar = ({ api }) => {
     const { t } = i18n.useNiceTranslation();
     const fileInputRef = React.useRef(null);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuBar, children: [jsxRuntime.jsxs("h3", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "gamepad", size: 16 }), ' ', t('gameAsset2dEditor.gameAssetEditor', 'Game Asset Editor')] }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "file", size: 14 }), " New"] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "folder", size: 14 }), " ", t('gameAsset2dEditor.open', 'Open')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "save", size: 14 }), " ", t('gameAsset2dEditor.save', 'Save')] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, disabled: !api.canUndo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-left", size: 14 }), " ", t('gameAsset2dEditor.undo', 'Undo')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, disabled: !api.canRedo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-right", size: 14 }), " ", t('gameAsset2dEditor.redo', 'Redo')] })] }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: ".json", style: { display: 'none' }, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuBar, children: [jsxRuntime.jsxs("h3", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "gamepad", size: 16 }), ' ', t('gameAsset2dEditor.gameAssetEditor', 'Game Asset Editor')] }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.newProject('New Project'), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "file", size: 14 }), " ", t('gameAsset2dEditor.new', 'New')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "folder", size: 14 }), " ", t('gameAsset2dEditor.open', 'Open')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.saveProject, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "save", size: 14 }), " ", t('gameAsset2dEditor.save', 'Save')] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.menuGroup, children: [jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.undo, disabled: !api.canUndo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-left", size: 14 }), " ", t('gameAsset2dEditor.undo', 'Undo')] }), jsxRuntime.jsxs(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.redo, disabled: !api.canRedo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-right", size: 14 }), " ", t('gameAsset2dEditor.redo', 'Redo')] })] }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: ".json", style: { display: 'none' }, onChange: (e) => {
                     var _a;
                     const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (file) {
@@ -27,11 +27,12 @@ const MenuBar = ({ api }) => {
    MODE TABS
 ──────────────────────────────────────────────────────────────── */
 const ModeTabs = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const modes = [
-        { id: 'tilemap', label: 'Tile Map', icon: 'grid' },
-        { id: 'spritesheet', label: 'Sprite Sheet', icon: 'image' },
-        { id: 'animation', label: 'Animation', icon: 'video' },
-        { id: 'effects', label: 'Effects', icon: 'wand' },
+        { id: 'tilemap', label: t('gameAsset2dEditor.tileMap', 'Tile Map'), icon: 'grid' },
+        { id: 'spritesheet', label: t('gameAsset2dEditor.spriteSheet', 'Sprite Sheet'), icon: 'image' },
+        { id: 'animation', label: t('gameAsset2dEditor.animation', 'Animation'), icon: 'video' },
+        { id: 'effects', label: t('gameAsset2dEditor.effects2', 'Effects'), icon: 'wand' },
     ];
     return (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.modeTabs, children: modes.map((mode) => (jsxRuntime.jsxs(ui.NiceButton, { className: `${GameAsset2dEditor_module.modeTab} ${api.editorState.mode === mode.id ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.mode === mode.id ? 'primary' : 'ghost', onClick: () => api.setMode(mode.id), children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: mode.icon, size: 16 }), " ", mode.label] }, mode.id))) }));
 };
@@ -41,13 +42,17 @@ const ModeTabs = ({ api }) => {
 const TileMapToolbar = ({ api }) => {
     const { t } = i18n.useNiceTranslation();
     const tools = [
-        { id: 'select', icon: 'square', label: 'Select' },
-        { id: 'brush', icon: 'brush', label: 'Brush' },
-        { id: 'eraser', icon: 'eraser', label: 'Eraser' },
-        { id: 'fill', icon: 'bucket', label: 'Fill' },
-        { id: 'rectangle', icon: 'square', label: 'Rectangle' },
-        { id: 'line', icon: 'line', label: 'Line' },
-        { id: 'eyedropper', icon: 'eyedropper', label: 'Eyedropper' },
+        { id: 'select', icon: 'square', label: t('gameAsset2dEditor.select', 'Select') },
+        { id: 'brush', icon: 'brush', label: t('gameAsset2dEditor.brush', 'Brush') },
+        { id: 'eraser', icon: 'eraser', label: t('gameAsset2dEditor.eraser', 'Eraser') },
+        { id: 'fill', icon: 'bucket', label: t('gameAsset2dEditor.fill', 'Fill') },
+        { id: 'rectangle', icon: 'square', label: t('gameAsset2dEditor.rectangle', 'Rectangle') },
+        { id: 'line', icon: 'line', label: t('gameAsset2dEditor.line', 'Line') },
+        {
+            id: 'eyedropper',
+            icon: 'eyedropper',
+            label: t('gameAsset2dEditor.eyedropper', 'Eyedropper'),
+        },
     ];
     return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.toolGroup, children: tools.map((tool) => (jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.tileMapTool === tool.id ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.tileMapTool === tool.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTileMapTool(tool.id), title: tool.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: tool.icon, size: 16 }) }, tool.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.showGrid ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.showGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleGrid, title: t('gameAsset2dEditor.toggleGrid', 'Toggle Grid'), "aria-label": t('gameAsset2dEditor.toggleGrid', 'Toggle Grid'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "grid", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.showCollision ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.showCollision ? 'primary' : 'ghost', size: "sm", onClick: api.toggleCollision, title: t('gameAsset2dEditor.showCollision', 'Show Collision'), "aria-label": t('gameAsset2dEditor.showCollision', 'Show Collision'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.snapToGrid ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.snapToGrid ? 'primary' : 'ghost', size: "sm", onClick: api.toggleSnap, title: t('gameAsset2dEditor.snapToGrid', 'Snap to Grid'), "aria-label": t('gameAsset2dEditor.snapToGrid', 'Snap to Grid'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "grid", size: 16 }) })] }));
 };
@@ -58,7 +63,7 @@ const SpriteSheetToolbar = ({ api }) => {
     const { t } = i18n.useNiceTranslation();
     const [sliceWidth, setSliceWidth] = React.useState(16);
     const [sliceHeight, setSliceHeight] = React.useState(16);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolGroup, children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'select' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('select'), title: t('gameAsset2dEditor.select', 'Select'), "aria-label": t('gameAsset2dEditor.select', 'Select'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'slice' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('slice'), title: t('gameAsset2dEditor.manualSlice', 'Manual Slice'), "aria-label": t('gameAsset2dEditor.manualSlice', 'Manual Slice'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "scissors", size: 16 }) })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("label", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #8892a8)' }, children: ["Frame size:", jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceWidth, onChange: (val) => setSliceWidth(val !== null && val !== void 0 ? val : 16), style: { width: 40, margin: '0 4px' }, className: GameAsset2dEditor_module.panelInput }), "\u00D7", jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceHeight, onChange: (val) => setSliceHeight(val !== null && val !== void 0 ? val : 16), style: { width: 40, marginLeft: 4 }, className: GameAsset2dEditor_module.panelInput })] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => api.autoSlice(sliceWidth, sliceHeight), style: { marginLeft: 8 }, children: t('gameAsset2dEditor.autoSlice', 'Auto Slice') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: api.detectSprites, style: { marginLeft: 4 }, children: t('gameAsset2dEditor.detectSprites', 'Detect Sprites') })] }));
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolbar, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.toolGroup, children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'select' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'select' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('select'), title: t('gameAsset2dEditor.select', 'Select'), "aria-label": t('gameAsset2dEditor.select', 'Select'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.toolBtn} ${api.editorState.spriteSheetTool === 'slice' ? GameAsset2dEditor_module.active : ''}`, variant: api.editorState.spriteSheetTool === 'slice' ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSpriteSheetTool('slice'), title: t('gameAsset2dEditor.manualSlice', 'Manual Slice'), "aria-label": t('gameAsset2dEditor.manualSlice', 'Manual Slice'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "scissors", size: 16 }) })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.spacer }), jsxRuntime.jsxs("label", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #8892a8)' }, children: [t('gameAsset2dEditor.frameSize', 'Frame size:'), jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceWidth, onChange: (val) => setSliceWidth(val !== null && val !== void 0 ? val : 16), style: { width: 40, margin: '0 4px' }, className: GameAsset2dEditor_module.panelInput }), "\u00D7", jsxRuntime.jsx(ui.NiceNumberInput, { value: sliceHeight, onChange: (val) => setSliceHeight(val !== null && val !== void 0 ? val : 16), style: { width: 40, marginLeft: 4 }, className: GameAsset2dEditor_module.panelInput })] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => api.autoSlice(sliceWidth, sliceHeight), style: { marginLeft: 8 }, children: t('gameAsset2dEditor.autoSlice', 'Auto Slice') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: api.detectSprites, style: { marginLeft: 4 }, children: t('gameAsset2dEditor.detectSprites', 'Detect Sprites') })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    TILE PALETTE (LEFT PANEL)
@@ -66,7 +71,7 @@ const SpriteSheetToolbar = ({ api }) => {
 const TilePalette = ({ api }) => {
     const { t } = i18n.useNiceTranslation();
     const fileInputRef = React.useRef(null);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.tiles', 'Tiles') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileSets.length === 0 ? (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noTilesYet', 'No tiles yet') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.importTiles', 'Import Tiles') })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.tilePalette, children: api.project.tileSets.map((tile) => (jsxRuntime.jsx("div", { className: `${GameAsset2dEditor_module.tileItem} ${api.editorState.selectedTileId === tile.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTile(tile.id), title: tile.name, children: jsxRuntime.jsx("img", { src: tile.thumbnail, alt: tile.name }) }, tile.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.tiles', 'Tiles') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileSets.length === 0 ? (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.emptyState, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noTilesYet', 'No tiles yet') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.importTiles', 'Import Tiles') })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.tilePalette, children: api.project.tileSets.map((tile) => (jsxRuntime.jsx("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${GameAsset2dEditor_module.tileItem} ${api.editorState.selectedTileId === tile.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTile(tile.id), title: tile.name, children: jsxRuntime.jsx("img", { src: tile.thumbnail, alt: tile.name }) }, tile.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
                     var _a;
                     const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (file) {
@@ -81,10 +86,12 @@ const TilePalette = ({ api }) => {
 const LayersPanel = ({ api }) => {
     const { t } = i18n.useNiceTranslation();
     const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.layers', 'Layers') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeMap ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeLayerId === layer.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.layerVisibility} ${!layer.visible ? GameAsset2dEditor_module.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.layers', 'Layers') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: api.addLayer, disabled: !activeMap, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeMap ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: [...activeMap.layers].reverse().map((layer) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeLayerId === layer.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectLayer(layer.id), children: [jsxRuntime.jsx(ui.NiceButton, { className: `${GameAsset2dEditor_module.layerVisibility} ${!layer.visible ? GameAsset2dEditor_module.hidden : ''}`, variant: "ghost", size: "sm", onClick: (e) => {
                                     e.stopPropagation();
                                     api.toggleLayerVisibility(layer.id);
-                                }, "aria-label": layer.visible ? 'Hide layer' : 'Show layer', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: layer.visible ? 'eye' : 'eye-off', size: 16 }) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: layer.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [Math.round(layer.opacity * 100), "%"] })] }, layer.id))) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noTileMapSelected', 'No tile map selected') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.maps', 'Maps') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: "+ New" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileMaps.map((map) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeTileMapId === map.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTileMap(map.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: map.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [map.width, "\u00D7", map.height] })] }, map.id))) })] }));
+                                }, "aria-label": layer.visible
+                                    ? t('gameAsset2dEditor.hideLayer', 'Hide layer')
+                                    : t('gameAsset2dEditor.showLayer', 'Show layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: layer.visible ? 'eye' : 'eye-off', size: 16 }) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: layer.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [Math.round(layer.opacity * 100), "%"] })] }, layer.id))) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noTileMapSelected', 'No tile map selected') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.maps', 'Maps') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.createTileMap('New Map', 32, 32), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.tileMaps.map((map) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeTileMapId === map.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectTileMap(map.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: map.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [map.width, "\u00D7", map.height] })] }, map.id))) })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    TILE MAP CANVAS
@@ -266,7 +273,7 @@ const SpriteSheetCanvas = ({ api }) => {
 const SpriteSheetsList = ({ api }) => {
     const { t } = i18n.useNiceTranslation();
     const fileInputRef = React.useRef(null);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.spriteSheets', 'Sprite Sheets') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: "+ Import" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.spriteSheets.length === 0 ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noSpriteSheets', 'No sprite sheets') }) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: api.project.spriteSheets.map((sheet) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sheet.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [sheet.frames.length, " frames"] })] }, sheet.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.spriteSheets', 'Sprite Sheets') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: t('gameAsset2dEditor.import', '+ Import') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: api.project.spriteSheets.length === 0 ? (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.noSpriteSheets', 'No sprite sheets') }) })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.layersList, children: api.project.spriteSheets.map((sheet) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeSpriteSheetId === sheet.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectSpriteSheet(sheet.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sheet.name }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: t('gameAsset2dEditor.frames', '{frames} frames').replace('{frames}', String(sheet.frames.length)) })] }, sheet.id))) })) }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => {
                     var _a;
                     const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (file) {
@@ -289,7 +296,7 @@ const FramesPanel = ({ api }) => {
             setAnimName('');
         }
     }, [animName, api]);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsxs("span", { children: ["Frames (", (_a = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.length) !== null && _a !== void 0 ? _a : 0, ")"] }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 200 }, children: activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.map((frame) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectFrames([frame.id]), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: frame.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [frame.width, "\u00D7", frame.height] })] }, frame.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.animations', 'Animations') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.animationName', 'Animation name...'), value: animName, onChange: (val) => setAnimName(val) }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: t('gameAsset2dEditor.createFromFrames', 'Create from {count} frames').replace('{count}', String(api.editorState.selectedFrameIds.length)) })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map((anim) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: anim.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [anim.frameIds.length, "f"] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), "aria-label": t('gameAsset2dEditor.removeAnimation', 'Remove animation'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, anim.id)))] })] }));
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.frames2', 'Frames ({frames})').replace('{frames}', String((_a = activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.length) !== null && _a !== void 0 ? _a : 0)) }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 200 }, children: activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.frames.map((frame) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.selectedFrameIds.includes(frame.id) ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectFrames([frame.id]), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: frame.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [frame.width, "\u00D7", frame.height] })] }, frame.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.animations', 'Animations') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [api.editorState.selectedFrameIds.length > 0 && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.animationName', 'Animation name...'), value: animName, onChange: (val) => setAnimName(val) }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnPrimary, variant: "primary", onClick: createAnimationFromSelection, style: { marginTop: 8, width: '100%' }, disabled: !animName, children: t('gameAsset2dEditor.createFromFrames', 'Create from {count} frames').replace('{count}', String(api.editorState.selectedFrameIds.length)) })] })), activeSheet === null || activeSheet === void 0 ? void 0 : activeSheet.animations.map((anim) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: anim.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [anim.frameIds.length, "f"] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeAnimation(anim.id), "aria-label": t('gameAsset2dEditor.removeAnimation', 'Remove animation'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, anim.id)))] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    ANIMATION STATE MACHINE
@@ -309,18 +316,21 @@ const AnimationStateMachineView = ({ api }) => {
         }
         return result;
     }, [api.project.spriteSheets]);
-    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.stateMachines', 'State Machines') }), jsxRuntime.jsx("button", { className: GameAsset2dEditor_module.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: "+ New" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeStateMachineId === sm.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sm.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [sm.states.length, " states"] })] }, sm.id))) }), activeSM && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.states', 'States') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.stateName', 'State name...'), value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, style: { marginTop: 4 }, onChange: (val) => {
+    return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.stateMachines', 'State Machines') }), jsxRuntime.jsx("button", { className: GameAsset2dEditor_module.menuBtn, onClick: () => api.createStateMachine('New State Machine'), children: t('gameAsset2dEditor.new2', '+ New') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, style: { maxHeight: 150 }, children: api.project.stateMachines.map((sm) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.activeStateMachineId === sm.id ? GameAsset2dEditor_module.selected : ''}`, onClick: () => api.selectStateMachine(sm.id), children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: sm.name }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: t('gameAsset2dEditor.states2', '{states} states').replace('{states}', String(sm.states.length)) })] }, sm.id))) }), activeSM && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.states', 'States') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.stateName', 'State name...'), value: newStateName, onChange: (val) => setNewStateName(val) }), allAnimations.length > 0 && newStateName && (jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, style: { marginTop: 4 }, onChange: (val) => {
                                                     if (val) {
                                                         api.addState(newStateName, val);
                                                         setNewStateName('');
                                                     }
                                                 }, options: [
-                                                    { value: '', label: 'Select animation...' },
+                                                    {
+                                                        value: '',
+                                                        label: t('gameAsset2dEditor.selectAnimation', 'Select animation...'),
+                                                    },
                                                     ...allAnimations.map((anim) => ({
                                                         value: anim.id,
                                                         label: `${anim.sheetName}: ${anim.name}`,
                                                     })),
-                                                ] }))] }), activeSM.states.map((state) => (jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.selectedStateId === state.id ? GameAsset2dEditor_module.selected : ''} ${activeSM.entryStateId === state.id ? GameAsset2dEditor_module.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerName, children: [activeSM.entryStateId === state.id && jsxRuntime.jsx(uiCore.NiceIcon, { name: "play", size: 12 }), ' ', state.name] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: (e) => {
+                                                ] }))] }), activeSM.states.map((state) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${GameAsset2dEditor_module.layerItem} ${api.editorState.selectedStateId === state.id ? GameAsset2dEditor_module.selected : ''} ${activeSM.entryStateId === state.id ? GameAsset2dEditor_module.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerName, children: [activeSM.entryStateId === state.id && jsxRuntime.jsx(uiCore.NiceIcon, { name: "play", size: 12 }), ' ', state.name] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: (e) => {
                                                     e.stopPropagation();
                                                     api.removeState(state.id);
                                                 }, "aria-label": t('gameAsset2dEditor.removeState', 'Remove state'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, state.id)))] })] }))] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateGraph, children: activeSM ? (jsxRuntime.jsxs("svg", { width: "100%", height: "100%", children: [jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto", children: jsxRuntime.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "var(--nice-text-secondary, #4a5a7e)" }) }) }), activeSM.transitions.map((trans) => {
@@ -332,18 +342,21 @@ const AnimationStateMachineView = ({ api }) => {
                             return (jsxRuntime.jsx("line", { x1: from.position.x + 60, y1: from.position.y + 20, x2: to.position.x + 60, y2: to.position.y + 20, className: GameAsset2dEditor_module.transition, onClick: () => api.removeTransition(trans.id) }, trans.id));
                         }), activeSM.states.map((state) => {
                             var _a, _b;
-                            return (jsxRuntime.jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxRuntime.jsxs("div", { className: `${GameAsset2dEditor_module.stateNode} ${api.editorState.selectedStateId === state.id ? GameAsset2dEditor_module.selected : ''} ${activeSM.entryStateId === state.id ? GameAsset2dEditor_module.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeName, children: state.name }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeAnim, children: (_b = (_a = allAnimations.find((a) => a.id === state.animationId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'No animation' })] }) }, state.id));
-                        })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.createAStateMachineTo', 'Create a state machine to design animation flows') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.parameters', 'Parameters') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: "+ Add" })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeSM === null || activeSM === void 0 ? void 0 : activeSM.parameters.map((param) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: param.type }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: param.name }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), "aria-label": t('gameAsset2dEditor.removeParameter', 'Remove parameter'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, param.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.transitions', 'Transitions') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [activeSM === null || activeSM === void 0 ? void 0 : activeSM.transitions.map((trans) => {
+                            return (jsxRuntime.jsx("foreignObject", { x: state.position.x, y: state.position.y, width: 120, height: 50, children: jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: `${GameAsset2dEditor_module.stateNode} ${api.editorState.selectedStateId === state.id ? GameAsset2dEditor_module.selected : ''} ${activeSM.entryStateId === state.id ? GameAsset2dEditor_module.entry : ''}`, onClick: () => api.selectState(state.id), children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeName, children: state.name }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.stateNodeAnim, children: (_b = (_a = allAnimations.find((a) => a.id === state.animationId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : t('gameAsset2dEditor.noAnimation', 'No animation') })] }) }, state.id));
+                        })] })) : (jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.createAStateMachineTo', 'Create a state machine to design animation flows') }) })) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelHeader, children: [jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.parameters', 'Parameters') }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.menuBtn, variant: "ghost", size: "sm", onClick: () => api.addParameter('new_param', 'trigger'), disabled: !activeSM, children: t('gameAsset2dEditor.add', '+ Add') })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: activeSM === null || activeSM === void 0 ? void 0 : activeSM.parameters.map((param) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: param.type }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: param.name }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeParameter(param.id), "aria-label": t('gameAsset2dEditor.removeParameter', 'Remove parameter'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, param.id))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.transitions', 'Transitions') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [activeSM === null || activeSM === void 0 ? void 0 : activeSM.transitions.map((trans) => {
                                 var _a, _b;
                                 const from = activeSM.states.find((s) => s.id === trans.fromStateId);
                                 const to = activeSM.states.find((s) => s.id === trans.toStateId);
                                 return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerName, children: [(_a = from === null || from === void 0 ? void 0 : from.name) !== null && _a !== void 0 ? _a : '?', " ", jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-right", size: 12 }), " ", (_b = to === null || to === void 0 ? void 0 : to.name) !== null && _b !== void 0 ? _b : '?'] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.effectRemove, variant: "ghost", size: "sm", onClick: () => api.removeTransition(trans.id), "aria-label": t('gameAsset2dEditor.removeTransition', 'Remove transition'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, trans.id));
-                            }), api.editorState.selectedStateId && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, style: { marginTop: 12 }, children: [jsxRuntime.jsx("label", { className: GameAsset2dEditor_module.panelLabel, children: "Add transition to:" }), jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, onChange: (val) => {
+                            }), api.editorState.selectedStateId && (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, style: { marginTop: 12 }, children: [jsxRuntime.jsx("label", { className: GameAsset2dEditor_module.panelLabel, children: t('gameAsset2dEditor.addTransitionTo', 'Add transition to:') }), jsxRuntime.jsx(ui.NiceSelect, { className: GameAsset2dEditor_module.panelInput, onChange: (val) => {
                                             if (val && api.editorState.selectedStateId) {
                                                 api.addTransition(api.editorState.selectedStateId, val);
                                             }
                                         }, options: [
-                                            { value: '', label: 'Select target state...' },
+                                            {
+                                                value: '',
+                                                label: t('gameAsset2dEditor.selectTargetState', 'Select target state...'),
+                                            },
                                             ...((_a = activeSM === null || activeSM === void 0 ? void 0 : activeSM.states.filter((s) => s.id !== api.editorState.selectedStateId).map((s) => ({ value: s.id, label: s.name }))) !== null && _a !== void 0 ? _a : []),
                                         ] })] }))] })] })] }));
 };
@@ -355,33 +368,39 @@ const EffectsView = ({ api }) => {
     const [_currentEffects, _setCurrentEffects] = React.useState([]);
     const [presetName, setPresetName] = React.useState('');
     const effectTypes = [
-        { type: 'brightness', label: 'Brightness' },
-        { type: 'contrast', label: 'Contrast' },
-        { type: 'saturation', label: 'Saturation' },
-        { type: 'hue-shift', label: 'Hue Shift' },
-        { type: 'invert', label: 'Invert' },
-        { type: 'pixelate', label: 'Pixelate' },
-        { type: 'outline', label: 'Outline' },
-        { type: 'tint', label: 'Tint' },
-        { type: 'blur', label: 'Blur' },
-        { type: 'glow', label: 'Glow' },
-        { type: 'shadow', label: 'Shadow' },
-        { type: 'palette-swap', label: 'Palette Swap' },
+        { type: 'brightness', label: t('gameAsset2dEditor.brightness', 'Brightness') },
+        { type: 'contrast', label: t('gameAsset2dEditor.contrast', 'Contrast') },
+        { type: 'saturation', label: t('gameAsset2dEditor.saturation', 'Saturation') },
+        { type: 'hue-shift', label: t('gameAsset2dEditor.hueShift', 'Hue Shift') },
+        { type: 'invert', label: t('gameAsset2dEditor.invert', 'Invert') },
+        { type: 'pixelate', label: t('gameAsset2dEditor.pixelate', 'Pixelate') },
+        { type: 'outline', label: t('gameAsset2dEditor.outline', 'Outline') },
+        { type: 'tint', label: t('gameAsset2dEditor.tint', 'Tint') },
+        { type: 'blur', label: t('gameAsset2dEditor.blur', 'Blur') },
+        { type: 'glow', label: t('gameAsset2dEditor.glow', 'Glow') },
+        { type: 'shadow', label: t('gameAsset2dEditor.shadow', 'Shadow') },
+        { type: 'palette-swap', label: t('gameAsset2dEditor.paletteSwap', 'Palette Swap') },
     ];
     return (jsxRuntime.jsxs("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.leftPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.addEffect', 'Add Effect') }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: effectTypes.map(({ type, label }) => (jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.layerItem, variant: "ghost", onClick: () => api.addEffect(type), style: { cursor: 'pointer', border: 'none', textAlign: 'left' }, children: jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: label }) }, type))) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.presets', 'Presets') }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelContent, children: [jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.panelSection, children: [jsxRuntime.jsx(ui.NiceTextInput, { className: GameAsset2dEditor_module.panelInput, placeholder: t('gameAsset2dEditor.presetName', 'Preset name...'), value: presetName, onChange: (val) => setPresetName(val) }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.btnSecondary, variant: "ghost", style: { marginTop: 4, width: '100%' }, onClick: () => {
                                             if (presetName) {
                                                 api.saveEffectPreset(presetName);
                                                 setPresetName('');
                                             }
-                                        }, disabled: !presetName, children: t('gameAsset2dEditor.saveCurrentEffects', 'Save Current Effects') })] }), api.project.effectPresets.map((preset) => (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: preset.name }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.layerOpacity, children: [preset.effects.length, " effects"] })] }, preset.id)))] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.viewport, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.selectASpriteOrTile', 'Select a sprite or tile to preview effects') }) }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.activeEffects', 'Active Effects') }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.effectsList, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.addEffectsFromTheLeft', 'Add effects from the left panel') }) }) }) })] })] }));
+                                        }, disabled: !presetName, children: t('gameAsset2dEditor.saveCurrentEffects', 'Save Current Effects') })] }), api.project.effectPresets.map((preset) => (jsxRuntime.jsxs("div", { role: "button", tabIndex: 0, onKeyDown: uiCore.clickOnActivationKey, className: GameAsset2dEditor_module.layerItem, onClick: () => api.loadEffectPreset(preset.id), style: { cursor: 'pointer' }, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerName, children: preset.name }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.layerOpacity, children: t('gameAsset2dEditor.effects', '{effects} effects').replace('{effects}', String(preset.effects.length)) })] }, preset.id)))] })] }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.viewport, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.selectASpriteOrTile', 'Select a sprite or tile to preview effects') }) }) }), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.rightPanel, children: [jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelHeader, children: jsxRuntime.jsx("span", { children: t('gameAsset2dEditor.activeEffects', 'Active Effects') }) }), jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.panelContent, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.effectsList, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyState, children: jsxRuntime.jsx("div", { className: GameAsset2dEditor_module.emptyStateText, children: t('gameAsset2dEditor.addEffectsFromTheLeft', 'Add effects from the left panel') }) }) }) })] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    STATUS BAR
 ──────────────────────────────────────────────────────────────── */
 const StatusBar = ({ api }) => {
+    const { t } = i18n.useNiceTranslation();
     const activeMap = api.project.tileMaps.find((m) => m.id === api.editorState.activeTileMapId);
     const activeSheet = api.project.spriteSheets.find((s) => s.id === api.editorState.activeSpriteSheetId);
-    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.statusBar, children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.statusItem, children: ["Mode: ", api.editorState.mode] }), api.editorState.mode === 'tilemap' && activeMap && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.statusItem, children: ["Map: ", activeMap.name, " (", activeMap.width, "\u00D7", activeMap.height, ")"] }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.statusItem, children: ["Tile: ", activeMap.tileWidth, "\u00D7", activeMap.tileHeight, "px"] })] })), api.editorState.mode === 'spritesheet' && activeSheet && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.statusItem, children: ["Sheet: ", activeSheet.name] }), jsxRuntime.jsxs("span", { className: GameAsset2dEditor_module.statusItem, children: ["Selected: ", api.editorState.selectedFrameIds.length, " frames"] })] })), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.zoomControl, children: [jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom - 0.25), children: "\u2212" }), jsxRuntime.jsxs("span", { children: [Math.round(api.editorState.zoom * 100), "%"] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom + 0.25), children: "+" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(1), children: "\u2299" })] })] }));
+    return (jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.statusBar, children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.mode', 'Mode: {mode}').replace('{mode}', String(api.editorState.mode)) }), api.editorState.mode === 'tilemap' && activeMap && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.map', 'Map: {name} ({width}×{height})')
+                            .replace('{name}', String(activeMap.name))
+                            .replace('{width}', String(activeMap.width))
+                            .replace('{height}', String(activeMap.height)) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.tilePx', 'Tile: {tileWidth}×{tileHeight}px')
+                            .replace('{tileWidth}', String(activeMap.tileWidth))
+                            .replace('{tileHeight}', String(activeMap.tileHeight)) })] })), api.editorState.mode === 'spritesheet' && activeSheet && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.sheet', 'Sheet: {name}').replace('{name}', String(activeSheet.name)) }), jsxRuntime.jsx("span", { className: GameAsset2dEditor_module.statusItem, children: t('gameAsset2dEditor.selectedFrames', 'Selected: {selectedFrameIds} frames').replace('{selectedFrameIds}', String(api.editorState.selectedFrameIds.length)) })] })), jsxRuntime.jsxs("div", { className: GameAsset2dEditor_module.zoomControl, children: [jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom - 0.25), children: "\u2212" }), jsxRuntime.jsxs("span", { children: [Math.round(api.editorState.zoom * 100), "%"] }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(api.editorState.zoom + 0.25), children: "+" }), jsxRuntime.jsx(ui.NiceButton, { className: GameAsset2dEditor_module.zoomBtn, variant: "ghost", size: "sm", onClick: () => api.setZoom(1), children: "\u2299" })] })] }));
 };
 /* ────────────────────────────────────────────────────────────────
    MAIN COMPONENT

package/dist/cjs/photo/NiceAITools.js

@@ -483,10 +483,10 @@ const NiceAITools = ({ sourceImage, onResult, className = '', }) => {
                         alignItems: 'center',
                         justifyContent: 'center',
                         gap: 4,
-                    }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: TOOL_ICONS[key], size: 14 }), " ", label] }, key))) }), ai.activeTool === 'colorize' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: ["Intensity: ", ai.colorizeOptions.intensity.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.colorizeOptions.intensity, onChange: (e) => ai.setColorizeOptions({ ...ai.colorizeOptions, intensity: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Saturation: ", ai.colorizeOptions.saturation.toFixed(1), jsxRuntime.jsx("input", { type: "range", min: 0, max: 2, step: 0.1, value: ai.colorizeOptions.saturation, onChange: (e) => ai.setColorizeOptions({ ...ai.colorizeOptions, saturation: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Temperature:", jsxRuntime.jsxs("select", { value: ai.colorizeOptions.temperature, onChange: (e) => ai.setColorizeOptions({
+                    }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: TOOL_ICONS[key], size: 14 }), " ", label] }, key))) }), ai.activeTool === 'colorize' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [t('aiTools.intensity', 'Intensity: {intensity}').replace('{intensity}', String(ai.colorizeOptions.intensity.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.colorizeOptions.intensity, onChange: (e) => ai.setColorizeOptions({ ...ai.colorizeOptions, intensity: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.saturation', 'Saturation: {saturation}').replace('{saturation}', String(ai.colorizeOptions.saturation.toFixed(1))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 2, step: 0.1, value: ai.colorizeOptions.saturation, onChange: (e) => ai.setColorizeOptions({ ...ai.colorizeOptions, saturation: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.temperature', 'Temperature:'), jsxRuntime.jsxs("select", { value: ai.colorizeOptions.temperature, onChange: (e) => ai.setColorizeOptions({
                                     ...ai.colorizeOptions,
                                     temperature: e.target.value,
-                                }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "warm", children: t('aiTools.warm', 'Warm') }), jsxRuntime.jsx("option", { value: "neutral", children: t('aiTools.neutral', 'Neutral') }), jsxRuntime.jsx("option", { value: "cool", children: t('aiTools.cool', 'Cool') })] })] })] })), ai.activeTool === 'background-remove' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: ["Threshold: ", ai.bgRemoveOptions.threshold.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0.1, max: 0.9, step: 0.05, value: ai.bgRemoveOptions.threshold, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, threshold: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Iterations: ", ai.bgRemoveOptions.iterations, jsxRuntime.jsx("input", { type: "range", min: 1, max: 20, step: 1, value: ai.bgRemoveOptions.iterations, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, iterations: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Feather: ", ai.bgRemoveOptions.featherRadius, "px", jsxRuntime.jsx("input", { type: "range", min: 0, max: 10, step: 1, value: ai.bgRemoveOptions.featherRadius, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, featherRadius: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: ["Replace BG:", jsxRuntime.jsx("input", { type: "color", value: (_a = ai.bgRemoveOptions.replacementColor) !== null && _a !== void 0 ? _a : '#ffffff', onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, replacementColor: e.target.value }) }), jsxRuntime.jsx("button", { type: "button", onClick: () => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, replacementColor: null }), style: { fontSize: 10 }, children: t('aiTools.transparent', 'Transparent') })] })] })), ai.activeTool === 'upscale' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: ["Scale:", jsxRuntime.jsxs("select", { value: ai.upscaleOptions.scale, onChange: (e) => ai.setUpscaleOptions({ ...ai.upscaleOptions, scale: +e.target.value }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: 2, children: "2x" }), jsxRuntime.jsx("option", { value: 3, children: "3x" }), jsxRuntime.jsx("option", { value: 4, children: "4x" })] })] }), jsxRuntime.jsxs("label", { children: ["Sharpen: ", ai.upscaleOptions.sharpen.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.upscaleOptions.sharpen, onChange: (e) => ai.setUpscaleOptions({ ...ai.upscaleOptions, sharpen: +e.target.value }), style: { width: '100%' } })] })] })), ai.activeTool === 'denoise' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: ["Strength: ", ai.denoiseOptions.strength.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.denoiseOptions.strength, onChange: (e) => ai.setDenoiseOptions({ ...ai.denoiseOptions, strength: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Detail: ", ai.denoiseOptions.detailPreservation.toFixed(2), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.denoiseOptions.detailPreservation, onChange: (e) => ai.setDenoiseOptions({ ...ai.denoiseOptions, detailPreservation: +e.target.value }), style: { width: '100%' } })] })] })), jsxRuntime.jsx("button", { type: "button", onClick: handleProcess, disabled: ai.isProcessing || !sourceImage, style: {
+                                }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "warm", children: t('aiTools.warm', 'Warm') }), jsxRuntime.jsx("option", { value: "neutral", children: t('aiTools.neutral', 'Neutral') }), jsxRuntime.jsx("option", { value: "cool", children: t('aiTools.cool', 'Cool') })] })] })] })), ai.activeTool === 'background-remove' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [t('aiTools.threshold', 'Threshold: {threshold}').replace('{threshold}', String(ai.bgRemoveOptions.threshold.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0.1, max: 0.9, step: 0.05, value: ai.bgRemoveOptions.threshold, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, threshold: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.iterations', 'Iterations: {iterations}').replace('{iterations}', String(ai.bgRemoveOptions.iterations)), jsxRuntime.jsx("input", { type: "range", min: 1, max: 20, step: 1, value: ai.bgRemoveOptions.iterations, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, iterations: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.featherPx', 'Feather: {featherRadius}px').replace('{featherRadius}', String(ai.bgRemoveOptions.featherRadius)), jsxRuntime.jsx("input", { type: "range", min: 0, max: 10, step: 1, value: ai.bgRemoveOptions.featherRadius, onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, featherRadius: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [t('aiTools.replaceBg', 'Replace BG:'), jsxRuntime.jsx("input", { type: "color", value: (_a = ai.bgRemoveOptions.replacementColor) !== null && _a !== void 0 ? _a : '#ffffff', onChange: (e) => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, replacementColor: e.target.value }) }), jsxRuntime.jsx("button", { type: "button", onClick: () => ai.setBgRemoveOptions({ ...ai.bgRemoveOptions, replacementColor: null }), style: { fontSize: 10 }, children: t('aiTools.transparent', 'Transparent') })] })] })), ai.activeTool === 'upscale' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [t('aiTools.scale', 'Scale:'), jsxRuntime.jsxs("select", { value: ai.upscaleOptions.scale, onChange: (e) => ai.setUpscaleOptions({ ...ai.upscaleOptions, scale: +e.target.value }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: 2, children: "2x" }), jsxRuntime.jsx("option", { value: 3, children: "3x" }), jsxRuntime.jsx("option", { value: 4, children: "4x" })] })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.sharpen', 'Sharpen: {sharpen}').replace('{sharpen}', String(ai.upscaleOptions.sharpen.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.upscaleOptions.sharpen, onChange: (e) => ai.setUpscaleOptions({ ...ai.upscaleOptions, sharpen: +e.target.value }), style: { width: '100%' } })] })] })), ai.activeTool === 'denoise' && (jsxRuntime.jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxRuntime.jsxs("label", { children: [t('aiTools.strength', 'Strength: {strength}').replace('{strength}', String(ai.denoiseOptions.strength.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.denoiseOptions.strength, onChange: (e) => ai.setDenoiseOptions({ ...ai.denoiseOptions, strength: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('aiTools.detail', 'Detail: {detailPreservation}').replace('{detailPreservation}', String(ai.denoiseOptions.detailPreservation.toFixed(2))), jsxRuntime.jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: ai.denoiseOptions.detailPreservation, onChange: (e) => ai.setDenoiseOptions({ ...ai.denoiseOptions, detailPreservation: +e.target.value }), style: { width: '100%' } })] })] })), jsxRuntime.jsx("button", { type: "button", onClick: handleProcess, disabled: ai.isProcessing || !sourceImage, style: {
                     background: ai.isProcessing
                         ? 'var(--nice-bg-tertiary, #94a3b8)'
                         : 'var(--nice-color-accent, #6366f1)',
@@ -499,7 +499,7 @@ const NiceAITools = ({ sourceImage, onResult, className = '', }) => {
                     alignItems: 'center',
                     justifyContent: 'center',
                     gap: 4,
-                }, children: ai.isProcessing ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14 }), " Processing\u2026"] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "play", size: 14 }), " ", TOOL_LABELS[ai.activeTool]] })) }), ai.lastResult && (jsxRuntime.jsxs("div", { style: { fontSize: 11, color: 'var(--nice-text-muted, #64748b)' }, children: [t('aiTools.processedInMs', 'Processed in {ms}ms').replace('{ms}', ai.lastResult.processingTimeMs.toFixed(0)), ai.activeTool === 'upscale' &&
+                }, children: ai.isProcessing ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14 }), " ", t('aiTools.processing', 'Processing…')] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "play", size: 14 }), " ", TOOL_LABELS[ai.activeTool]] })) }), ai.lastResult && (jsxRuntime.jsxs("div", { style: { fontSize: 11, color: 'var(--nice-text-muted, #64748b)' }, children: [t('aiTools.processedInMs', 'Processed in {ms}ms').replace('{ms}', ai.lastResult.processingTimeMs.toFixed(0)), ai.activeTool === 'upscale' &&
                         ` → ${ai.lastResult.imageData.width}×${ai.lastResult.imageData.height}`] }))] }));
 };