@nice2dev/ui-graphics 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @nice2dev/ui-graphics — Changelog
 
+## 1.2.2
+
+### Patch Changes
+
+- 06eb0d2: 1.2.2 — library texts through the translator, a translator in the packages that had none, and the
+  end of the hook-dependency warnings. Nothing removed or renamed. Upgrade notes:
+  `documentation/omniverk/OMNIVERK_UPGRADE_1.2.2.md`.
+
+  **Translations.** 2,825 new keys in the global dictionary (en, pl, de, fr, es, uk), 80 in the local
+  dictionaries of ui-math, ui-diagrams and ui-presentations: column headers, option labels, texts in
+  conditions and templates, messages given to setters, labels returned by helpers, Polish texts that
+  were the English default. Relative dates through `Intl.RelativeTimeFormat`, plural forms through
+  `…One` / `…Many` keys. ui-science, ui-platform, ui-mobile, auth, licensing, templates, social and
+  the icon tools translate through `useNiceTranslation` (new peer `@nice2dev/ui-core ^1.2.0`);
+  ui-security reads the global translator when its own provider is absent.
+
+  **Additions.** `labelKey` on ui-mobile `TabItem` and `SwipeAction` (the presets set it);
+  `registerWebAuthn` / `authenticateWebAuthn` take the WebAuthn options `NiceWebAuthnButton` used to
+  drop (defaults unchanged); `NiceKeyboardHint` shows `descriptionKey`. Eight icons in
+  `@nice2dev/icons` — `NtdPoint`, `NtdSegment`, `NtdPerpendicular`, `NtdParallel`, `NtdMidpoint`,
+  `NtdAngleBisector`, `NtdGroup`, `NtdUngroup` — and the same names as `NiceIcon` built-ins.
+
+  **Behaviour changes, agreed.** ui-math, ui-diagrams and ui-presentations follow the app's global
+  `NiceI18nProvider` language when their own provider is absent (they stayed English);
+  `NicePresentationEditor` without `lang` takes the surrounding language. Icons drawn as glyphs are
+  Nice icons: the `NiceGeometry` tools, Align / Group / Ungroup / Layout of the diagram toolbar, the
+  presentation grid toggle, zoom and "Add Track" of `NiceDMXTimeline`. icons-gaming and
+  icons-filetypes name an icon by its `title` and are decorative without one, like `createIcon`
+  (screen readers read "GiHeart" or "DOCX file icon"); new optional `title` on the gaming icon props.
+
+  **Hook dependencies (161 → 0).** Fixed along the way: `NiceLowPowerMode` re-rendered forever from
+  mount and overflowed the stack on wake; `GenericPlayer` / `NiceGenericPlayerStage` restarted the
+  track on a volume change; `NiceDMXTimeline` called `onPlay` on every frame and missed cues added
+  during playback; `NiceConflictResolution` `autoResolve` never resolved; `NiceMAM` selected by the
+  previous filter; `NiceRulesEngine` "Run All" kept only the last result; `NiceCodeEditor` saved with
+  the first render's `onSave`; a consumer's cursor handler switched off `NiceCodeEditorAI`
+  completion; `useRadioStream` lost a volume set before the first play; `NiceGameEditor` shortcuts,
+  `useVoiceControl` continuous sessions, `NiceDeviceTrust` with a host storing the score.
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cjs/animation/AnimatedPerson.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var animationHelper = require('./animationHelper.js');
 var characterTypes = require('./characterTypes.js');
 
@@ -11,6 +12,7 @@ const NiceAnimatedPerson = ({ id, name, size, score = 10, startPose = 'idle', on
 // colors prop is destructured for API completeness but not yet fully wired into character defaults.
  }) => {
     var _a, _b, _c, _d, _e;
+    const { t } = i18n.useNiceTranslation();
     const fx = animationHelper.usePersonControls();
     const effectiveStartPose = pose !== null && pose !== void 0 ? pose : startPose;
     const effectiveCharacter = character !== null && character !== void 0 ? character : config;
@@ -22,7 +24,7 @@ const NiceAnimatedPerson = ({ id, name, size, score = 10, startPose = 'idle', on
     }, [fx, onReady, effectiveStartPose]);
     const W = (_c = (_b = (_a = cfg.size) !== null && _a !== void 0 ? _a : effectiveSize) !== null && _b !== void 0 ? _b : characterTypes.DEFAULT_CHARACTER.size) !== null && _c !== void 0 ? _c : 180;
     const skin = characterTypes.pick(cfg.face.colors, 0, 'var(--anim-skin, #FFD2B3)');
-    return (jsxRuntime.jsx(framerMotion.motion.div, { id: id, style: { width: W, height: W * 1.35, overflow: 'visible' }, animate: fx.root, children: jsxRuntime.jsxs("svg", { viewBox: "0 0 180 240", width: "100%", height: "100%", role: "img", "aria-label": (_e = (_d = cfg.name) !== null && _d !== void 0 ? _d : name) !== null && _e !== void 0 ? _e : 'Juror', children: [jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.body, children: [jsxRuntime.jsx("rect", { x: "68", y: "158", width: "14", height: "46", rx: "6", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg, #334155)') }), jsxRuntime.jsx("ellipse", { cx: "75", cy: "204", rx: "10", ry: "5", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg-shadow, #1E293B)') }), jsxRuntime.jsx("rect", { x: "98", y: "158", width: "14", height: "46", rx: "6", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg, #334155)') }), jsxRuntime.jsx("ellipse", { cx: "105", cy: "204", rx: "10", ry: "5", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg-shadow, #1E293B)') })] }), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.body, children: renderOutfit(cfg.outfit) }), jsxRuntime.jsx("rect", { x: "84", y: "82", width: "12", height: "12", rx: "4", fill: skin }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.leftArm, style: { transformOrigin: '64px 96px' }, children: [jsxRuntime.jsx("rect", { x: "36", y: "96", width: "16", height: "36", rx: "7", fill: skin }), jsxRuntime.jsx("circle", { cx: "44", cy: "136", r: "7", fill: skin })] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.rightArm, style: { transformOrigin: '116px 96px' }, children: [jsxRuntime.jsx("rect", { x: "128", y: "96", width: "16", height: "36", rx: "7", fill: skin }), jsxRuntime.jsx("circle", { cx: "136", cy: "136", r: "7", fill: skin }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.card, children: [jsxRuntime.jsx("rect", { x: "126", y: "50", width: "42", height: "30", rx: "4", fill: "var(--nice-color-surface, #fff)", stroke: "var(--nice-text-primary, #111)", strokeWidth: 1.2 }), jsxRuntime.jsx("text", { x: "147", y: "70", textAnchor: "middle", fontSize: "16", fontWeight: 700, fill: "var(--nice-text-primary, #111)", children: String(score) })] }), renderProp(cfg.prop)] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.head, children: [renderHairBack(cfg.hair), renderFace(cfg.face), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.eyes, children: renderEyes(cfg.eyes) }), renderNose(cfg.nose), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.mouth, children: renderMouth(cfg.mouth) }), renderHeadwear(cfg.headwear)] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.curse, initial: { opacity: 0 }, children: [jsxRuntime.jsx("rect", { x: "62", y: "10", width: "56", height: "22", rx: "8", fill: "var(--nice-text-primary, #111)" }), jsxRuntime.jsx("text", { x: "90", y: "26", textAnchor: "middle", fontSize: "12", fill: "var(--nice-text-inverse, #fff)", children: "#!%&*" }), jsxRuntime.jsx("path", { d: "M82 32 l4 8 l4 -8", fill: "var(--nice-text-primary, #111)" })] })] }) }));
+    return (jsxRuntime.jsx(framerMotion.motion.div, { id: id, style: { width: W, height: W * 1.35, overflow: 'visible' }, animate: fx.root, children: jsxRuntime.jsxs("svg", { viewBox: "0 0 180 240", width: "100%", height: "100%", role: "img", "aria-label": (_e = (_d = cfg.name) !== null && _d !== void 0 ? _d : name) !== null && _e !== void 0 ? _e : t('animatedPerson.juror', 'Juror'), children: [jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.body, children: [jsxRuntime.jsx("rect", { x: "68", y: "158", width: "14", height: "46", rx: "6", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg, #334155)') }), jsxRuntime.jsx("ellipse", { cx: "75", cy: "204", rx: "10", ry: "5", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg-shadow, #1E293B)') }), jsxRuntime.jsx("rect", { x: "98", y: "158", width: "14", height: "46", rx: "6", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg, #334155)') }), jsxRuntime.jsx("ellipse", { cx: "105", cy: "204", rx: "10", ry: "5", fill: characterTypes.pick(cfg.outfit.colors, 1, 'var(--anim-outfit-leg-shadow, #1E293B)') })] }), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.body, children: renderOutfit(cfg.outfit) }), jsxRuntime.jsx("rect", { x: "84", y: "82", width: "12", height: "12", rx: "4", fill: skin }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.leftArm, style: { transformOrigin: '64px 96px' }, children: [jsxRuntime.jsx("rect", { x: "36", y: "96", width: "16", height: "36", rx: "7", fill: skin }), jsxRuntime.jsx("circle", { cx: "44", cy: "136", r: "7", fill: skin })] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.rightArm, style: { transformOrigin: '116px 96px' }, children: [jsxRuntime.jsx("rect", { x: "128", y: "96", width: "16", height: "36", rx: "7", fill: skin }), jsxRuntime.jsx("circle", { cx: "136", cy: "136", r: "7", fill: skin }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.card, children: [jsxRuntime.jsx("rect", { x: "126", y: "50", width: "42", height: "30", rx: "4", fill: "var(--nice-color-surface, #fff)", stroke: "var(--nice-text-primary, #111)", strokeWidth: 1.2 }), jsxRuntime.jsx("text", { x: "147", y: "70", textAnchor: "middle", fontSize: "16", fontWeight: 700, fill: "var(--nice-text-primary, #111)", children: String(score) })] }), renderProp(cfg.prop)] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.head, children: [renderHairBack(cfg.hair), renderFace(cfg.face), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.eyes, children: renderEyes(cfg.eyes) }), renderNose(cfg.nose), jsxRuntime.jsx(framerMotion.motion.g, { animate: fx.mouth, children: renderMouth(cfg.mouth) }), renderHeadwear(cfg.headwear)] }), jsxRuntime.jsxs(framerMotion.motion.g, { animate: fx.curse, initial: { opacity: 0 }, children: [jsxRuntime.jsx("rect", { x: "62", y: "10", width: "56", height: "22", rx: "8", fill: "var(--nice-text-primary, #111)" }), jsxRuntime.jsx("text", { x: "90", y: "26", textAnchor: "middle", fontSize: "12", fill: "var(--nice-text-inverse, #fff)", children: "#!%&*" }), jsxRuntime.jsx("path", { d: "M82 32 l4 8 l4 -8", fill: "var(--nice-text-primary, #111)" })] })] }) }));
 };
 /* ---------------- RENDERERS (redesigned proportions) ---------------- */
 function renderOutfit(cfg) {

package/dist/cjs/core/NiceBrushEngine.js

@@ -546,20 +546,21 @@ color = '#000000') {
 const NiceBrushEngine = ({ canvas, color = '#000000', onStrokeEnd, className = '', }) => {
     const { t } = i18n.useNiceTranslation();
     const engine = useBrushEngine(canvas, color);
+    const { endStroke } = engine;
     // Override endStroke to fire callback
     React.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 (jsxRuntime.jsxs("div", { className: `nice-brush-engine ${className}`, style: { display: 'grid', gap: 6, fontSize: 13 }, children: [jsxRuntime.jsxs("strong", { children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "brush", size: 14 }), " ", t('brushEngine.brushEngineV2', 'Brush Engine v2')] }), jsxRuntime.jsx("div", { style: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: engine.presetNames.map((name) => {
                     var _a, _b;
@@ -574,13 +575,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));
-                }) }), jsxRuntime.jsxs("label", { children: ["Size: ", s.size, "px", jsxRuntime.jsx("input", { type: "range", min: 1, max: 200, value: s.size, onChange: (e) => engine.setSettings({ ...s, size: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: ["Opacity: ", Math.round(s.opacity * 100), "%", jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: ["Flow: ", Math.round(s.flow * 100), "%", jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: ["Hardness: ", Math.round(s.hardness * 100), "%", jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: ["Smoothing: ", Math.round(s.smoothing * 100), "%", jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: ["Tip:", jsxRuntime.jsxs("select", { value: s.tipShape, onChange: (e) => engine.setSettings({ ...s, tipShape: e.target.value }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "circle", children: t('brushEngine.circle', 'Circle') }), jsxRuntime.jsx("option", { value: "square", children: t('brushEngine.square', 'Square') }), jsxRuntime.jsx("option", { value: "diamond", children: t('brushEngine.diamond', 'Diamond') }), jsxRuntime.jsx("option", { value: "texture", children: t('brushEngine.texture', 'Texture') })] })] }), jsxRuntime.jsxs("label", { children: ["Roundness: ", Math.round(s.roundness * 100), "%", jsxRuntime.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%' } })] }), jsxRuntime.jsxs("details", { children: [jsxRuntime.jsxs("summary", { style: { cursor: 'pointer', fontSize: 12 }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "bar-chart", size: 12 }), " ", t('brushEngine.sizeDynamics', 'Size Dynamics')] }), jsxRuntime.jsxs("label", { children: ["Source:", jsxRuntime.jsxs("select", { value: s.sizeDynamics.source, onChange: (e) => engine.setSettings({
+                }) }), jsxRuntime.jsxs("label", { children: [t('brushEngine.sizePx', 'Size: {size}px').replace('{size}', String(s.size)), jsxRuntime.jsx("input", { type: "range", min: 1, max: 200, value: s.size, onChange: (e) => engine.setSettings({ ...s, size: +e.target.value }), style: { width: '100%' } })] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.opacity', 'Opacity: {opacity}%').replace('{opacity}', String(Math.round(s.opacity * 100))), jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.flow', 'Flow: {flow}%').replace('{flow}', String(Math.round(s.flow * 100))), jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.hardness', 'Hardness: {hardness}%').replace('{hardness}', String(Math.round(s.hardness * 100))), jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.smoothing', 'Smoothing: {smoothing}%').replace('{smoothing}', String(Math.round(s.smoothing * 100))), jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.tip', 'Tip:'), jsxRuntime.jsxs("select", { value: s.tipShape, onChange: (e) => engine.setSettings({ ...s, tipShape: e.target.value }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "circle", children: t('brushEngine.circle', 'Circle') }), jsxRuntime.jsx("option", { value: "square", children: t('brushEngine.square', 'Square') }), jsxRuntime.jsx("option", { value: "diamond", children: t('brushEngine.diamond', 'Diamond') }), jsxRuntime.jsx("option", { value: "texture", children: t('brushEngine.texture', 'Texture') })] })] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.roundness', 'Roundness: {roundness}%').replace('{roundness}', String(Math.round(s.roundness * 100))), jsxRuntime.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%' } })] }), jsxRuntime.jsxs("details", { children: [jsxRuntime.jsxs("summary", { style: { cursor: 'pointer', fontSize: 12 }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "bar-chart", size: 12 }), " ", t('brushEngine.sizeDynamics', 'Size Dynamics')] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.source', 'Source:'), jsxRuntime.jsxs("select", { value: s.sizeDynamics.source, onChange: (e) => engine.setSettings({
                                     ...s,
                                     sizeDynamics: {
                                         ...s.sizeDynamics,
                                         source: e.target.value,
                                     },
-                                }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "none", children: "Off" }), jsxRuntime.jsx("option", { value: "pressure", children: t('brushEngine.pressure', 'Pressure') }), jsxRuntime.jsx("option", { value: "tilt", children: t('brushEngine.tilt', 'Tilt') }), jsxRuntime.jsx("option", { value: "speed", children: t('brushEngine.speed', 'Speed') }), jsxRuntime.jsx("option", { value: "random", children: t('brushEngine.random', 'Random') })] })] })] }), jsxRuntime.jsxs("label", { children: ["Scatter: ", Math.round(s.scatter * 100), "%", jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: ["Blend:", jsxRuntime.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) => (jsxRuntime.jsx("option", { value: m, children: m }, m))) })] }), jsxRuntime.jsxs("label", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: s.wetEdges, onChange: (e) => engine.setSettings({ ...s, wetEdges: e.target.checked }) }), t('brushEngine.wetEdges', 'Wet Edges')] })] }));
+                                }), style: { width: '100%' }, children: [jsxRuntime.jsx("option", { value: "none", children: t('brushEngine.off', 'Off') }), jsxRuntime.jsx("option", { value: "pressure", children: t('brushEngine.pressure', 'Pressure') }), jsxRuntime.jsx("option", { value: "tilt", children: t('brushEngine.tilt', 'Tilt') }), jsxRuntime.jsx("option", { value: "speed", children: t('brushEngine.speed', 'Speed') }), jsxRuntime.jsx("option", { value: "random", children: t('brushEngine.random', 'Random') })] })] })] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.scatter', 'Scatter: {scatter}%').replace('{scatter}', String(Math.round(s.scatter * 100))), jsxRuntime.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%' } })] }), jsxRuntime.jsxs("label", { children: [t('brushEngine.blend', 'Blend:'), jsxRuntime.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) => (jsxRuntime.jsx("option", { value: m, children: m }, m))) })] }), jsxRuntime.jsxs("label", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: s.wetEdges, onChange: (e) => engine.setSettings({ ...s, wetEdges: e.target.checked }) }), t('brushEngine.wetEdges', 'Wet Edges')] })] }));
 };
 
 exports.BRUSH_PRESETS = BRUSH_PRESETS;

package/dist/cjs/core/collaboration.js

@@ -171,10 +171,14 @@ function useCollaboration(transport, roomId, currentUser) {
     const [users, setUsers] = React.useState([]);
     const [connected, setConnected] = React.useState(false);
     const operationHandlers = React.useRef([]);
+    // the user as it is when the room is joined: a new object with the same id must not rejoin
+    const currentUserRef = React.useRef(currentUser);
+    currentUserRef.current = currentUser;
     React.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':
@@ -204,17 +208,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 = React.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 = React.useCallback((x, y) => transport.send({ type: 'cursor', userId: currentUser.id, x, y }), [transport, currentUser.id]);
     const sendOperation = React.useCallback((op) => transport.send({
         type: 'operation',
         operation: { ...op, timestamp: Date.now(), userId: currentUser.id },
-    }), [currentUser.id]);
+    }), [transport, currentUser.id]);
     const onOperation = React.useCallback((handler) => {
         operationHandlers.current.push(handler);
         return () => {

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,11 +239,11 @@ 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,
@@ -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,