@nice2dev/ui-graphics 1.2.0 → 1.2.2

package/dist/esm/animation/rig/presets.js

@@ -1,65 +1,77 @@
-import { DEFAULT_RIG, DEFAULT_POSE } from './rigTypes.js';
+import { DEFAULT_POSE, DEFAULT_RIG } from './rigTypes.js';
 
 /** Slim proportions preset. */
-const RIG_SLIM = {
-    ...DEFAULT_RIG,
-    lUpperArm: { ...DEFAULT_RIG.lUpperArm, length: 0.11 },
-    lForearm: { ...DEFAULT_RIG.lForearm, length: 0.11 },
-    rUpperArm: { ...DEFAULT_RIG.rUpperArm, length: 0.11 },
-    rForearm: { ...DEFAULT_RIG.rForearm, length: 0.11 },
-    lThigh: { ...DEFAULT_RIG.lThigh, length: 0.14 },
-    lShin: { ...DEFAULT_RIG.lShin, length: 0.14 },
-    rThigh: { ...DEFAULT_RIG.rThigh, length: 0.14 },
-    rShin: { ...DEFAULT_RIG.rShin, length: 0.14 },
-};
+const RIG_SLIM = /* @__PURE__ */ (function () {
+    return {
+        ...DEFAULT_RIG,
+        lUpperArm: { ...DEFAULT_RIG.lUpperArm, length: 0.11 },
+        lForearm: { ...DEFAULT_RIG.lForearm, length: 0.11 },
+        rUpperArm: { ...DEFAULT_RIG.rUpperArm, length: 0.11 },
+        rForearm: { ...DEFAULT_RIG.rForearm, length: 0.11 },
+        lThigh: { ...DEFAULT_RIG.lThigh, length: 0.14 },
+        lShin: { ...DEFAULT_RIG.lShin, length: 0.14 },
+        rThigh: { ...DEFAULT_RIG.rThigh, length: 0.14 },
+        rShin: { ...DEFAULT_RIG.rShin, length: 0.14 },
+    };
+})();
 /** Broad shoulders preset. */
-const RIG_HERO = {
-    ...DEFAULT_RIG,
-    lShoulder: { ...DEFAULT_RIG.lShoulder, offset: [-0.13, 0] },
-    rShoulder: { ...DEFAULT_RIG.rShoulder, offset: [0.13, 0] },
-    lUpperArm: { ...DEFAULT_RIG.lUpperArm, length: 0.13 },
-    rUpperArm: { ...DEFAULT_RIG.rUpperArm, length: 0.13 },
-};
+const RIG_HERO = /* @__PURE__ */ (function () {
+    return {
+        ...DEFAULT_RIG,
+        lShoulder: { ...DEFAULT_RIG.lShoulder, offset: [-0.13, 0] },
+        rShoulder: { ...DEFAULT_RIG.rShoulder, offset: [0.13, 0] },
+        lUpperArm: { ...DEFAULT_RIG.lUpperArm, length: 0.13 },
+        rUpperArm: { ...DEFAULT_RIG.rUpperArm, length: 0.13 },
+    };
+})();
 /** Robot-like short limbs preset. */
-const RIG_ROBOT = {
-    ...DEFAULT_RIG,
-    lUpperArm: { ...DEFAULT_RIG.lUpperArm, length: 0.1 },
-    lForearm: { ...DEFAULT_RIG.lForearm, length: 0.1 },
-    rUpperArm: { ...DEFAULT_RIG.rUpperArm, length: 0.1 },
-    rForearm: { ...DEFAULT_RIG.rForearm, length: 0.1 },
-    lThigh: { ...DEFAULT_RIG.lThigh, length: 0.13 },
-    lShin: { ...DEFAULT_RIG.lShin, length: 0.13 },
-    rThigh: { ...DEFAULT_RIG.rThigh, length: 0.13 },
-    rShin: { ...DEFAULT_RIG.rShin, length: 0.13 },
-};
+const RIG_ROBOT = /* @__PURE__ */ (function () {
+    return {
+        ...DEFAULT_RIG,
+        lUpperArm: { ...DEFAULT_RIG.lUpperArm, length: 0.1 },
+        lForearm: { ...DEFAULT_RIG.lForearm, length: 0.1 },
+        rUpperArm: { ...DEFAULT_RIG.rUpperArm, length: 0.1 },
+        rForearm: { ...DEFAULT_RIG.rForearm, length: 0.1 },
+        lThigh: { ...DEFAULT_RIG.lThigh, length: 0.13 },
+        lShin: { ...DEFAULT_RIG.lShin, length: 0.13 },
+        rThigh: { ...DEFAULT_RIG.rThigh, length: 0.13 },
+        rShin: { ...DEFAULT_RIG.rShin, length: 0.13 },
+    };
+})();
 /** Happy pose. */
-const POSE_HAPPY = {
-    ...DEFAULT_POSE,
-    spineUpper: 80,
-    neck: 70,
-    head: 60,
-    lUpperArm: 60,
-    lForearm: 20,
-    rUpperArm: 120,
-    rForearm: 160,
-};
+const POSE_HAPPY = /* @__PURE__ */ (function () {
+    return {
+        ...DEFAULT_POSE,
+        spineUpper: 80,
+        neck: 70,
+        head: 60,
+        lUpperArm: 60,
+        lForearm: 20,
+        rUpperArm: 120,
+        rForearm: 160,
+    };
+})();
 /** Angry pose. */
-const POSE_ANGRY = {
-    ...DEFAULT_POSE,
-    head: 90,
-    lUpperArm: 150,
-    rUpperArm: 30,
-    lForearm: 160,
-    rForearm: 20,
-};
+const POSE_ANGRY = /* @__PURE__ */ (function () {
+    return {
+        ...DEFAULT_POSE,
+        head: 90,
+        lUpperArm: 150,
+        rUpperArm: 30,
+        lForearm: 160,
+        rForearm: 20,
+    };
+})();
 /** Dance pose A. */
-const POSE_DANCE_A = {
-    ...DEFAULT_POSE,
-    pelvis: 100,
-    lThigh: 120,
-    rThigh: 70,
-    lUpperArm: 30,
-    rUpperArm: 150,
-};
+const POSE_DANCE_A = /* @__PURE__ */ (function () {
+    return {
+        ...DEFAULT_POSE,
+        pelvis: 100,
+        lThigh: 120,
+        rThigh: 70,
+        lUpperArm: 30,
+        rUpperArm: 150,
+    };
+})();
 
 export { POSE_ANGRY, POSE_DANCE_A, POSE_HAPPY, RIG_HERO, RIG_ROBOT, RIG_SLIM };

package/dist/esm/animation/shapes/headwear.js

@@ -8,13 +8,16 @@ const HeadwearCap = ({ colors, scale = 1, transform }) => {
 };
 const HeadwearCrown = ({ colors, scale = 1, transform }) => {
     const base = pick(colors, 0, 'var(--nice-warning, #FFD700)');
-    return (jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, children: jsx("path", { d: "M-22 -30 l6 -16 l8 10 l8 -14 l8 14 l8 -10 l6 16 z", fill: base, stroke: "#B8860B", strokeWidth: 1.2 }) }));
+    return (jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, children: jsx("path", { d: "M-22 -30 l6 -16 l8 10 l8 -14 l8 14 l8 -10 l6 16 z", fill: base, 
+            // audit-allow: literal-color — a character-generator shape: its own drawing colour
+            stroke: "#B8860B", strokeWidth: 1.2 }) }));
 };
 const HeadwearHeadphones = ({ colors, scale = 1, transform }) => {
     const base = pick(colors, 0, 'var(--nice-text, #333)');
     return (jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: base, strokeWidth: 2.5, fill: "none", children: [jsx("path", { d: "M-30 0 q0 -40 30 -42 q30 2 30 42" }), jsx("rect", { x: -36, y: -6, width: 10, height: 16, rx: 3, fill: base }), jsx("rect", { x: 26, y: -6, width: 10, height: 16, rx: 3, fill: base })] }));
 };
 const HeadwearBeanie = ({ colors, scale = 1, transform }) => {
+    // audit-allow: literal-color — the hat's default colour when the character sets none
     const base = pick(colors, 0, '#E53E3E');
     return (jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, children: [jsx("path", { d: "M-28 -14 q0 -22 28 -26 q28 4 28 26 z", fill: base }), jsx("circle", { cx: 0, cy: -42, r: 6, fill: base })] }));
 };

package/dist/esm/animation/spineExport.js

@@ -1,5 +1,5 @@
 import { solveFK } from './rig/rigMath.js';
-import { DEFAULT_RIG, DEFAULT_POSE, BONE_ORDER } from './rig/rigTypes.js';
+import { DEFAULT_RIG, BONE_ORDER, DEFAULT_POSE } from './rig/rigTypes.js';
 
 /**
  * spineExport.ts — Export animations to Spine JSON format.

package/dist/esm/core/NiceBrushEngine.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui-core';
 import { useEffect, useState, useRef, useCallback } from 'react';
+import { useNiceTranslation } from './i18n.js';
 
 /* ── Brush Presets ── */
 const DEFAULT_DYNAMICS = {
@@ -541,23 +542,25 @@ color = '#000000') {
 }
 /* ── Component ── */
 const NiceBrushEngine = ({ canvas, color = '#000000', onStrokeEnd, className = '', }) => {
+    const { t } = useNiceTranslation();
     const engine = useBrushEngine(canvas, color);
+    const { endStroke } = engine;
     // Override endStroke to fire callback
     useEffect(() => {
         if (!canvas) {
             return;
         }
         const onUp = () => {
-            const stroke = engine.endStroke();
+            const stroke = endStroke();
             if (stroke && onStrokeEnd) {
                 onStrokeEnd(stroke);
             }
         };
         canvas.addEventListener('pointerup', onUp);
         return () => canvas.removeEventListener('pointerup', onUp);
-    }, [canvas, engine.endStroke, onStrokeEnd]);
+    }, [canvas, endStroke, onStrokeEnd]);
     const s = engine.settings;
-    return (jsxs("div", { className: `nice-brush-engine ${className}`, style: { display: 'grid', gap: 6, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "brush", size: 14 }), " Brush Engine v2"] }), jsx("div", { style: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: engine.presetNames.map((name) => {
+    return (jsxs("div", { className: `nice-brush-engine ${className}`, style: { display: 'grid', gap: 6, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "brush", size: 14 }), " ", t('brushEngine.brushEngineV2', 'Brush Engine v2')] }), jsx("div", { style: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: engine.presetNames.map((name) => {
                     var _a, _b;
                     return (jsx("button", { type: "button", onClick: () => engine.applyPreset(name), style: {
                             padding: '2px 6px',
@@ -570,13 +573,13 @@ const NiceBrushEngine = ({ canvas, color = '#000000', onStrokeEnd, className = '
                                 : 'transparent',
                             color: s.name === ((_b = BRUSH_PRESETS[name]) === null || _b === void 0 ? void 0 : _b.name) ? 'var(--nice-color-white, #fff)' : 'inherit',
                         }, children: BRUSH_PRESETS[name].name }, name));
-                }) }), jsxs("label", { children: ["Size: ", s.size, "px", jsx("input", { type: "range", min: 1, max: 200, value: s.size, onChange: (e) => engine.setSettings({ ...s, size: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: ["Opacity: ", Math.round(s.opacity * 100), "%", jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.opacity, onChange: (e) => engine.setSettings({ ...s, opacity: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: ["Flow: ", Math.round(s.flow * 100), "%", jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.flow, onChange: (e) => engine.setSettings({ ...s, flow: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: ["Hardness: ", Math.round(s.hardness * 100), "%", jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.hardness, onChange: (e) => engine.setSettings({ ...s, hardness: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: ["Smoothing: ", Math.round(s.smoothing * 100), "%", jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.smoothing, onChange: (e) => engine.setSettings({ ...s, smoothing: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: ["Tip:", jsxs("select", { value: s.tipShape, onChange: (e) => engine.setSettings({ ...s, tipShape: e.target.value }), style: { width: '100%' }, children: [jsx("option", { value: "circle", children: "Circle" }), jsx("option", { value: "square", children: "Square" }), jsx("option", { value: "diamond", children: "Diamond" }), jsx("option", { value: "texture", children: "Texture" })] })] }), jsxs("label", { children: ["Roundness: ", Math.round(s.roundness * 100), "%", jsx("input", { type: "range", min: 0.05, max: 1, step: 0.05, value: s.roundness, onChange: (e) => engine.setSettings({ ...s, roundness: +e.target.value }), style: { width: '100%' } })] }), jsxs("details", { children: [jsxs("summary", { style: { cursor: 'pointer', fontSize: 12 }, children: [jsx(NiceIcon, { name: "bar-chart", size: 12 }), " Size Dynamics"] }), jsxs("label", { children: ["Source:", jsxs("select", { value: s.sizeDynamics.source, onChange: (e) => engine.setSettings({
+                }) }), jsxs("label", { children: [t('brushEngine.sizePx', 'Size: {size}px').replace('{size}', String(s.size)), jsx("input", { type: "range", min: 1, max: 200, value: s.size, onChange: (e) => engine.setSettings({ ...s, size: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: [t('brushEngine.opacity', 'Opacity: {opacity}%').replace('{opacity}', String(Math.round(s.opacity * 100))), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.opacity, onChange: (e) => engine.setSettings({ ...s, opacity: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: [t('brushEngine.flow', 'Flow: {flow}%').replace('{flow}', String(Math.round(s.flow * 100))), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.flow, onChange: (e) => engine.setSettings({ ...s, flow: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: [t('brushEngine.hardness', 'Hardness: {hardness}%').replace('{hardness}', String(Math.round(s.hardness * 100))), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.hardness, onChange: (e) => engine.setSettings({ ...s, hardness: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: [t('brushEngine.smoothing', 'Smoothing: {smoothing}%').replace('{smoothing}', String(Math.round(s.smoothing * 100))), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.smoothing, onChange: (e) => engine.setSettings({ ...s, smoothing: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: [t('brushEngine.tip', 'Tip:'), jsxs("select", { value: s.tipShape, onChange: (e) => engine.setSettings({ ...s, tipShape: e.target.value }), style: { width: '100%' }, children: [jsx("option", { value: "circle", children: t('brushEngine.circle', 'Circle') }), jsx("option", { value: "square", children: t('brushEngine.square', 'Square') }), jsx("option", { value: "diamond", children: t('brushEngine.diamond', 'Diamond') }), jsx("option", { value: "texture", children: t('brushEngine.texture', 'Texture') })] })] }), jsxs("label", { children: [t('brushEngine.roundness', 'Roundness: {roundness}%').replace('{roundness}', String(Math.round(s.roundness * 100))), jsx("input", { type: "range", min: 0.05, max: 1, step: 0.05, value: s.roundness, onChange: (e) => engine.setSettings({ ...s, roundness: +e.target.value }), style: { width: '100%' } })] }), jsxs("details", { children: [jsxs("summary", { style: { cursor: 'pointer', fontSize: 12 }, children: [jsx(NiceIcon, { name: "bar-chart", size: 12 }), " ", t('brushEngine.sizeDynamics', 'Size Dynamics')] }), jsxs("label", { children: [t('brushEngine.source', 'Source:'), jsxs("select", { value: s.sizeDynamics.source, onChange: (e) => engine.setSettings({
                                     ...s,
                                     sizeDynamics: {
                                         ...s.sizeDynamics,
                                         source: e.target.value,
                                     },
-                                }), style: { width: '100%' }, children: [jsx("option", { value: "none", children: "Off" }), jsx("option", { value: "pressure", children: "Pressure" }), jsx("option", { value: "tilt", children: "Tilt" }), jsx("option", { value: "speed", children: "Speed" }), jsx("option", { value: "random", children: "Random" })] })] })] }), jsxs("label", { children: ["Scatter: ", Math.round(s.scatter * 100), "%", jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.scatter, onChange: (e) => engine.setSettings({ ...s, scatter: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: ["Blend:", jsx("select", { value: s.blendMode, onChange: (e) => engine.setSettings({ ...s, blendMode: e.target.value }), style: { width: '100%' }, children: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten'].map((m) => (jsx("option", { value: m, children: m }, m))) })] }), jsxs("label", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [jsx("input", { type: "checkbox", checked: s.wetEdges, onChange: (e) => engine.setSettings({ ...s, wetEdges: e.target.checked }) }), "Wet Edges"] })] }));
+                                }), style: { width: '100%' }, children: [jsx("option", { value: "none", children: t('brushEngine.off', 'Off') }), jsx("option", { value: "pressure", children: t('brushEngine.pressure', 'Pressure') }), jsx("option", { value: "tilt", children: t('brushEngine.tilt', 'Tilt') }), jsx("option", { value: "speed", children: t('brushEngine.speed', 'Speed') }), jsx("option", { value: "random", children: t('brushEngine.random', 'Random') })] })] })] }), jsxs("label", { children: [t('brushEngine.scatter', 'Scatter: {scatter}%').replace('{scatter}', String(Math.round(s.scatter * 100))), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: s.scatter, onChange: (e) => engine.setSettings({ ...s, scatter: +e.target.value }), style: { width: '100%' } })] }), jsxs("label", { children: [t('brushEngine.blend', 'Blend:'), jsx("select", { value: s.blendMode, onChange: (e) => engine.setSettings({ ...s, blendMode: e.target.value }), style: { width: '100%' }, children: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten'].map((m) => (jsx("option", { value: m, children: m }, m))) })] }), jsxs("label", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [jsx("input", { type: "checkbox", checked: s.wetEdges, onChange: (e) => engine.setSettings({ ...s, wetEdges: e.target.checked }) }), t('brushEngine.wetEdges', 'Wet Edges')] })] }));
 };
 
 export { BRUSH_PRESETS, NiceBrushEngine, useBrushEngine };

package/dist/esm/core/collaboration.js

@@ -169,10 +169,14 @@ function useCollaboration(transport, roomId, currentUser) {
     const [users, setUsers] = useState([]);
     const [connected, setConnected] = useState(false);
     const operationHandlers = useRef([]);
+    // the user as it is when the room is joined: a new object with the same id must not rejoin
+    const currentUserRef = useRef(currentUser);
+    currentUserRef.current = currentUser;
     useEffect(() => {
-        transport.connect(roomId, currentUser.id);
+        const user = currentUserRef.current;
+        transport.connect(roomId, user.id);
         setConnected(true);
-        transport.send({ type: 'join', user: currentUser });
+        transport.send({ type: 'join', user });
         const unsubscribe = transport.onMessage((msg) => {
             switch (msg.type) {
                 case 'join':
@@ -202,17 +206,18 @@ function useCollaboration(transport, roomId, currentUser) {
             }
         });
         return () => {
-            transport.send({ type: 'leave', userId: currentUser.id });
+            transport.send({ type: 'leave', userId: user.id });
             unsubscribe();
             transport.disconnect();
             setConnected(false);
         };
-    }, [roomId, currentUser.id]);
-    const sendCursor = useCallback((x, y) => transport.send({ type: 'cursor', userId: currentUser.id, x, y }), [currentUser.id]);
+        // a new transport reconnects (until 1.2.2 it was ignored and messages went to the old one)
+    }, [transport, roomId, currentUser.id]);
+    const sendCursor = useCallback((x, y) => transport.send({ type: 'cursor', userId: currentUser.id, x, y }), [transport, currentUser.id]);
     const sendOperation = useCallback((op) => transport.send({
         type: 'operation',
         operation: { ...op, timestamp: Date.now(), userId: currentUser.id },
-    }), [currentUser.id]);
+    }), [transport, currentUser.id]);
     const onOperation = useCallback((handler) => {
         operationHandlers.current.push(handler);
         return () => {

package/dist/esm/core/editorAsk.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { NiceConfirmDialog, NicePromptDialog } from '@nice2dev/ui';
+import { useState, useRef, useCallback } from 'react';
+
+/**
+ * The library's dialogs in place of `window.prompt` / `window.confirm` for the editor hooks,
+ * which hold state but render nothing: `ask` resolves with the answer (`null` when cancelled)
+ * and `pendingAsk` is the open question, for the editor component to pass to
+ * {@link EditorAskDialog}. One question at a time: a new one settles the open one as cancelled.
+ */
+function useEditorAsk() {
+    const [pendingAsk, setPendingAsk] = useState(null);
+    const pendingRef = useRef(null);
+    const ask = useCallback((kind, text, defaultValue) => new Promise((resolve) => {
+        var _a;
+        (_a = pendingRef.current) === null || _a === void 0 ? void 0 : _a.answer(null);
+        const next = {
+            kind,
+            text,
+            defaultValue,
+            answer: (value) => {
+                if (pendingRef.current === next) {
+                    pendingRef.current = null;
+                    setPendingAsk(null);
+                }
+                resolve(value);
+            },
+        };
+        pendingRef.current = next;
+        setPendingAsk(next);
+    }), []);
+    return { pendingAsk, ask };
+}
+/** Shows the question {@link useEditorAsk} is waiting on, if any. */
+const EditorAskDialog = ({ ask }) => {
+    if (!ask) {
+        return null;
+    }
+    if (ask.kind === 'confirm') {
+        return (jsx(NiceConfirmDialog, { visible: true, message: ask.text, onAccept: () => ask.answer(''), onReject: () => ask.answer(null) }));
+    }
+    return (jsx(NicePromptDialog, { open: true, title: ask.text, defaultValue: ask.defaultValue, onSubmit: (value) => ask.answer(value), onCancel: () => ask.answer(null) }));
+};
+
+export { EditorAskDialog, useEditorAsk };

package/dist/esm/core/i18n.js

@@ -1,11 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext } from 'react';
+import { useNiceTranslation as useNiceTranslation$1 } from '@nice2dev/ui-core';
+import { useContext, useMemo, createContext } from 'react';
 
-const fallback = (_key, defaultValue) => defaultValue;
-const NiceI18nContext = createContext(fallback);
+/** `null` outside this package's provider: the global translator applies. */
+const NiceI18nContext = /* @__PURE__ */ createContext(null);
+/** Overrides the app's global translator for the graphics controls below it. */
 const NiceI18nProvider = ({ t, children }) => (jsx(NiceI18nContext.Provider, { value: t, children: children }));
 function useNiceTranslation() {
-    const t = useContext(NiceI18nContext);
+    const own = useContext(NiceI18nContext);
+    const { t: global } = useNiceTranslation$1();
+    const t = useMemo(() => own !== null && own !== void 0 ? own : ((key, defaultValue) => global(key, defaultValue)), [own, global]);
     return { t };
 }
 

package/dist/esm/core/minimap.js

@@ -18,6 +18,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 = 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 = 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;
         }
@@ -62,26 +83,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 = 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 = 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/esm/core/plugins.js

@@ -110,7 +110,7 @@ function usePlugins(editor) {
     };
 }
 // ── Plugin Context (React) ──────────────────────────────────────
-const PluginContext = React.createContext(PluginRegistry);
+const PluginContext = /* @__PURE__ */ React.createContext(PluginRegistry);
 const NicePluginProvider = ({ plugins, children }) => {
     React.useEffect(() => {
         if (plugins) {

package/dist/esm/core/rtl.js

@@ -12,7 +12,7 @@ const defaultRTLConfig = {
     mirrorToolbar: false,
     mirrorPanels: false,
 };
-const RTLContext = React.createContext(defaultRTLConfig);
+const RTLContext = /* @__PURE__ */ React.createContext(defaultRTLConfig);
 /** Provider for RTL configuration. Wraps editors to enable RTL support. */
 const NiceRTLProvider = ({ direction = 'ltr', mirrorToolbar = true, mirrorPanels = true, children }) => {
     const config = React.useMemo(() => ({

package/dist/esm/core/theme.js

@@ -107,7 +107,7 @@ function resolveThemeMode(mode) {
     }
     return mode;
 }
-const ThemeContext = React.createContext({
+const ThemeContext = /* @__PURE__ */ React.createContext({
     theme: DARK_THEME,
     mode: 'dark',
     setMode: () => { },

package/dist/esm/font/NiceFontEditor.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceTutorialButton, resolveTutorial } from '@nice2dev/ui';
 import { NiceIcon } from '@nice2dev/ui-core';
 import React from 'react';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const FONT_EDITOR_TOUR = [
@@ -132,6 +133,7 @@ function useFontEditor(initialName) {
 /** Font glyph editor with metrics, visual path editing, and preview. */
 const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial, }) => {
     var _a;
+    const { t } = useNiceTranslation();
     const editor = useFontEditor(fontName);
     const [drawMode, setDrawMode] = React.useState('select');
     const [pathPoints, setPathPoints] = React.useState([]);
@@ -219,7 +221,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
             color: 'var(--nice-text, #c1c2c5)',
             padding: 12,
             borderRadius: 8,
-        }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, FONT_EDITOR_TOUR) }) }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }, children: [jsx("strong", { style: { fontSize: 14 }, children: "Font Editor" }), jsx("input", { value: editor.fontName, onChange: (e) => editor.setFontName(e.target.value), placeholder: "Font name", style: { flex: 1, maxWidth: 200, ...fieldStyle, fontSize: 12 } }), jsx("button", { onClick: handleSave, style: {
+        }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, FONT_EDITOR_TOUR) }) }), jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }, children: [jsx("strong", { style: { fontSize: 14 }, children: t('fontEditor.fontEditor', 'Font Editor') }), jsx("input", { value: editor.fontName, onChange: (e) => editor.setFontName(e.target.value), placeholder: t('fontEditor.fontName', 'Font name'), style: { flex: 1, maxWidth: 200, ...fieldStyle, fontSize: 12 } }), jsx("button", { onClick: handleSave, style: {
                             padding: '4px 12px',
                             background: 'var(--nice-success, #2f9e44)',
                             color: 'var(--nice-text-on-primary, #fff)',
@@ -227,7 +229,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                             borderRadius: 3,
                             cursor: 'pointer',
                             fontSize: 11,
-                        }, children: "Save" }), jsx("button", { onClick: handleExportSvg, style: {
+                        }, children: t('fontEditor.save', 'Save') }), jsx("button", { onClick: handleExportSvg, style: {
                             padding: '4px 12px',
                             background: '#228be6',
                             color: 'var(--nice-color-white, #fff)',
@@ -235,11 +237,11 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                             borderRadius: 3,
                             cursor: 'pointer',
                             fontSize: 11,
-                        }, children: "Export SVG Font" })] }), jsxs("div", { style: { display: 'flex', gap: 4, borderBottom: '1px solid var(--nice-border, #373a40)' }, children: [jsx("button", { onClick: () => setTab('glyph'), style: tabBtnStyle(tab === 'glyph'), children: "Glyphs" }), jsx("button", { onClick: () => setTab('metrics'), style: tabBtnStyle(tab === 'metrics'), children: "Metrics" }), jsx("button", { onClick: () => setTab('kerning'), style: tabBtnStyle(tab === 'kerning'), children: "Kerning" })] }), tab === 'glyph' && (jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxs("div", { style: { flex: 1 }, children: [jsxs("div", { style: {
+                        }, children: t('fontEditor.exportSvgFont', 'Export SVG Font') })] }), jsxs("div", { style: { display: 'flex', gap: 4, borderBottom: '1px solid var(--nice-border, #373a40)' }, children: [jsx("button", { onClick: () => setTab('glyph'), style: tabBtnStyle(tab === 'glyph'), children: t('fontEditor.glyphs', 'Glyphs') }), jsx("button", { onClick: () => setTab('metrics'), style: tabBtnStyle(tab === 'metrics'), children: t('fontEditor.metrics', 'Metrics') }), jsx("button", { onClick: () => setTab('kerning'), style: tabBtnStyle(tab === 'kerning'), children: t('fontEditor.kerning', 'Kerning') })] }), tab === 'glyph' && (jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: {
                                     fontSize: 11,
                                     marginBottom: 4,
                                     color: 'var(--nice-text-secondary, #868e96)',
-                                }, children: [editor.glyphs.length, " glyphs"] }), jsx("div", { style: {
+                                }, children: t('fontEditor.glyphs2', '{glyphs} glyphs').replace('{glyphs}', String(editor.glyphs.length)) }), jsx("div", { style: {
                                     display: 'grid',
                                     gridTemplateColumns: 'repeat(auto-fill, 36px)',
                                     gap: 2,
@@ -270,7 +272,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))) })] }), jsx("div", { style: { width: 320, fontSize: 11 }, children: selectedG ? (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: ["\"", selectedG.char, "\" (U+", selectedG.unicode.toString(16).toUpperCase().padStart(4, '0'), ")"] }), jsxs("div", { style: { display: 'flex', gap: 2 }, children: [jsx("button", { onClick: () => setDrawMode('select'), style: btnStyle(drawMode === 'select'), children: "Select" }), jsx("button", { onClick: () => setDrawMode('pen'), style: btnStyle(drawMode === 'pen'), children: "Pen" }), jsx("button", { onClick: clearPath, style: btnStyle(false), children: "Clear" }), jsx("button", { onClick: () => setShowGrid((g) => !g), style: btnStyle(showGrid), children: "Grid" })] })] }), jsxs("svg", { width: 280, height: 280, viewBox: `0 0 ${em} ${em}`, style: {
+                                    }, children: g.char }, g.unicode))) })] }), jsx("div", { style: { width: 320, fontSize: 11 }, children: selectedG ? (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [jsxs("strong", { children: ["\"", selectedG.char, "\" (U+", selectedG.unicode.toString(16).toUpperCase().padStart(4, '0'), ")"] }), jsxs("div", { style: { display: 'flex', gap: 2 }, children: [jsx("button", { onClick: () => setDrawMode('select'), style: btnStyle(drawMode === 'select'), children: t('fontEditor.select', 'Select') }), jsx("button", { onClick: () => setDrawMode('pen'), style: btnStyle(drawMode === 'pen'), children: t('fontEditor.pen', 'Pen') }), jsx("button", { onClick: clearPath, style: btnStyle(false), children: t('fontEditor.clear', 'Clear') }), jsx("button", { onClick: () => setShowGrid((g) => !g), style: btnStyle(showGrid), children: t('fontEditor.grid', 'Grid') })] })] }), jsxs("svg", { width: 280, height: 280, viewBox: `0 0 ${em} ${em}`, style: {
                                         background: 'var(--nice-bg, #141517)',
                                         borderRadius: 4,
                                         cursor: drawMode === 'pen' ? 'crosshair' : 'default',
@@ -278,32 +280,32 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                                             Array.from({ length: 11 }, (_, i) => {
                                                 const pos = (i / 10) * em;
                                                 return (jsxs(React.Fragment, { children: [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 }), 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));
-                                            }), 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}` }), jsx("line", { x1: 0, y1: em, x2: em, y2: em, stroke: "rgba(47,158,68,0.3)", strokeWidth: em * 0.003 }), 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}` }), 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}` }), jsx("line", { x1: selectedG.leftBearing, y1: 0, x2: selectedG.leftBearing, y2: em, stroke: "rgba(166,227,161,0.2)", strokeWidth: em * 0.002 }), 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 && (jsx("path", { d: selectedG.path, fill: "rgba(205,214,244,0.8)", stroke: "#89b4fa", strokeWidth: em * 0.005 })), pathPoints.map((p, i) => (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))), 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" }), 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" }), 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" })] }), jsxs("div", { children: [jsx("label", { children: "SVG Path" }), jsx("textarea", { value: selectedG.path, onChange: (e) => editor.updateGlyph(selectedG.unicode, { path: e.target.value }), rows: 3, style: { ...fieldStyle, fontFamily: 'monospace', resize: 'vertical' } })] }), jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [jsx("label", { children: "Advance Width" }), jsx("input", { type: "number", value: selectedG.advanceWidth, onChange: (e) => editor.updateGlyph(selectedG.unicode, {
+                                            }), 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}` }), jsx("line", { x1: 0, y1: em, x2: em, y2: em, stroke: "rgba(47,158,68,0.3)", strokeWidth: em * 0.003 }), 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}` }), 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}` }), jsx("line", { x1: selectedG.leftBearing, y1: 0, x2: selectedG.leftBearing, y2: em, stroke: "rgba(166,227,161,0.2)", strokeWidth: em * 0.002 }), 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 && (jsx("path", { d: selectedG.path, fill: "rgba(205,214,244,0.8)", stroke: "#89b4fa", strokeWidth: em * 0.005 })), pathPoints.map((p, i) => (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))), 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') }), 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') }), 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') })] }), jsxs("div", { children: [jsx("label", { children: t('fontEditor.svgPath', 'SVG Path') }), jsx("textarea", { value: selectedG.path, onChange: (e) => editor.updateGlyph(selectedG.unicode, { path: e.target.value }), rows: 3, style: { ...fieldStyle, fontFamily: 'monospace', resize: 'vertical' } })] }), jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [jsx("label", { children: t('fontEditor.advanceWidth', 'Advance Width') }), jsx("input", { type: "number", value: selectedG.advanceWidth, onChange: (e) => editor.updateGlyph(selectedG.unicode, {
                                                 advanceWidth: Number(e.target.value),
-                                            }), style: fieldStyle }), jsx("label", { children: "Left Bearing" }), jsx("input", { type: "number", value: selectedG.leftBearing, onChange: (e) => editor.updateGlyph(selectedG.unicode, { leftBearing: Number(e.target.value) }), style: fieldStyle })] })] })) : (jsx("div", { style: {
+                                            }), style: fieldStyle }), jsx("label", { children: t('fontEditor.leftBearing', 'Left Bearing') }), jsx("input", { type: "number", value: selectedG.leftBearing, onChange: (e) => editor.updateGlyph(selectedG.unicode, { leftBearing: Number(e.target.value) }), style: fieldStyle })] })] })) : (jsx("div", { style: {
                                 color: 'var(--nice-text-secondary, #868e96)',
                                 padding: 20,
                                 textAlign: 'center',
-                            }, children: "Select a glyph to edit" })) })] })), tab === 'metrics' && (jsxs("div", { style: { maxWidth: 400 }, children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 8 }, children: "Font Metrics" }), [
+                            }, children: t('fontEditor.selectAGlyphToEdit', 'Select a glyph to edit') })) })] })), tab === 'metrics' && (jsxs("div", { style: { maxWidth: 400 }, children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 8 }, children: t('fontEditor.fontMetrics', 'Font Metrics') }), [
                         ['unitsPerEm', 'Units per Em'],
                         ['ascent', 'Ascent'],
                         ['descent', 'Descent'],
                         ['lineGap', 'Line Gap'],
                         ['xHeight', 'x-Height'],
                         ['capHeight', 'Cap Height'],
-                    ].map(([key, label]) => (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }, children: [jsx("span", { style: { minWidth: 100, fontSize: 11 }, children: label }), jsx("input", { type: "number", value: editor.metrics[key], onChange: (e) => editor.setMetrics({ ...editor.metrics, [key]: Number(e.target.value) }), style: fieldStyle })] }, key))), jsxs("svg", { width: 300, height: 200, viewBox: `0 0 ${em} ${em}`, style: { background: 'var(--nice-bg, #141517)', borderRadius: 4, marginTop: 12 }, children: [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 }), 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 }), jsx("line", { x1: 0, y1: em, x2: em, y2: em, stroke: "var(--nice-success, #2f9e44)", strokeWidth: em * 0.004 }), 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 }), 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}` }), 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}` }), 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, ")"] }), jsx("text", { x: em * 0.02, y: em + em * 0.05, fill: "var(--nice-success, #2f9e44)", fontSize: em * 0.04, children: "Baseline" }), 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, ")"] }), 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' && (jsxs("div", { style: { maxWidth: 500 }, children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 8 }, children: "Kerning Pairs" }), jsxs("div", { style: { display: 'flex', gap: 4, marginBottom: 8, alignItems: 'center', fontSize: 11 }, children: [jsx("input", { value: newKernLeft, onChange: (e) => setNewKernLeft(e.target.value), maxLength: 1, style: { ...fieldStyle, width: 30, textAlign: 'center' } }), jsx("input", { value: newKernRight, onChange: (e) => setNewKernRight(e.target.value), maxLength: 1, style: { ...fieldStyle, width: 30, textAlign: 'center' } }), jsx("button", { onClick: () => {
+                    ].map(([key, label]) => (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }, children: [jsx("span", { style: { minWidth: 100, fontSize: 11 }, children: label }), jsx("input", { type: "number", value: editor.metrics[key], onChange: (e) => editor.setMetrics({ ...editor.metrics, [key]: Number(e.target.value) }), style: fieldStyle })] }, key))), jsxs("svg", { width: 300, height: 200, viewBox: `0 0 ${em} ${em}`, style: { background: 'var(--nice-bg, #141517)', borderRadius: 4, marginTop: 12 }, children: [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 }), 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 }), jsx("line", { x1: 0, y1: em, x2: em, y2: em, stroke: "var(--nice-success, #2f9e44)", strokeWidth: em * 0.004 }), 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 }), 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}` }), 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}` }), 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)) }), 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') }), 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)) }), 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' && (jsxs("div", { style: { maxWidth: 500 }, children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 8 }, children: t('fontEditor.kerningPairs', 'Kerning Pairs') }), jsxs("div", { style: { display: 'flex', gap: 4, marginBottom: 8, alignItems: 'center', fontSize: 11 }, children: [jsx("input", { value: newKernLeft, onChange: (e) => setNewKernLeft(e.target.value), maxLength: 1, style: { ...fieldStyle, width: 30, textAlign: 'center' } }), jsx("input", { value: newKernRight, onChange: (e) => setNewKernRight(e.target.value), maxLength: 1, style: { ...fieldStyle, width: 30, textAlign: 'center' } }), jsx("button", { onClick: () => {
                                     if (newKernLeft && newKernRight) {
                                         setKerningPairs((prev) => [
                                             ...prev,
                                             { left: newKernLeft, right: newKernRight, value: -50 },
                                         ]);
                                     }
-                                }, style: btnStyle(false), children: "Add Pair" })] }), jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: kerningPairs.length === 0 ? (jsx("div", { style: {
+                                }, style: btnStyle(false), children: t('fontEditor.addPair', 'Add Pair') })] }), jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: kerningPairs.length === 0 ? (jsx("div", { style: {
                                 color: 'var(--nice-text-secondary, #868e96)',
                                 fontSize: 11,
                                 padding: 8,
                                 textAlign: 'center',
-                            }, children: "No kerning pairs defined" })) : (kerningPairs.map((kp, i) => (jsxs("div", { style: {
+                            }, children: t('fontEditor.noKerningPairsDefined', 'No kerning pairs defined') })) : (kerningPairs.map((kp, i) => (jsxs("div", { style: {
                                 display: 'flex',
                                 gap: 8,
                                 alignItems: 'center',
@@ -314,7 +316,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                                         border: 'none',
                                         color: 'var(--nice-danger, #ff6b6b)',
                                         cursor: 'pointer',
-                                    }, "aria-label": "Remove kerning pair", title: "Remove kerning pair", children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, i)))) })] })), jsxs("div", { style: { marginTop: 8, borderTop: '1px solid var(--nice-border, #373a40)', paddingTop: 8 }, children: [jsx("div", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #868e96)', marginBottom: 4 }, children: "Preview" }), jsx("input", { value: editor.previewText, onChange: (e) => editor.setPreviewText(e.target.value), style: { width: '100%', padding: '6px 8px', ...fieldStyle, fontSize: 12 } }), jsx("div", { style: {
+                                    }, "aria-label": t('fontEditor.removeKerningPair', 'Remove kerning pair'), title: t('fontEditor.removeKerningPair', 'Remove kerning pair'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, i)))) })] })), jsxs("div", { style: { marginTop: 8, borderTop: '1px solid var(--nice-border, #373a40)', paddingTop: 8 }, children: [jsx("div", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #868e96)', marginBottom: 4 }, children: t('fontEditor.preview', 'Preview') }), jsx("input", { value: editor.previewText, onChange: (e) => editor.setPreviewText(e.target.value), style: { width: '100%', padding: '6px 8px', ...fieldStyle, fontSize: 12 } }), jsx("div", { style: {
                             marginTop: 8,
                             padding: 16,
                             background: 'var(--nice-bg, #fff)',