@nice2dev/ui-graphics 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,108 @@
 # @nice2dev/ui-graphics — Changelog
 
+## 1.2.1
+
+### Patch Changes
+
+- 8c82c30: 1.2.1 — the decisions that waited since 1.2.0, and the debts the CI gates were holding. One API
+  change, agreed: `NiceIconSuggestorAI` suggests Nice icons only. Two stylesheets to import if you use
+  the packages: `@nice2dev/social/style.css`, `@nice2dev/ui-science/style.css`. Upgrade notes:
+  `documentation/omniverk/OMNIVERK_UPGRADE_1.2.1.md`.
+
+  **Tree-shaking.** An import from a package no longer brings the whole package. Module-level
+  statements that may have a side effect — a `displayName` assigned after each component (now
+  `Object.assign` inside `/* @__PURE__ */`, or under a development check for plain functions),
+  unannotated `forwardRef` / `memo` / `createContext` / icon-factory calls, spreads, registries filled
+  at import, `<style>` tags injected at import, a direct `eval` in ui-math — are gone. One import from
+  each of 53 packages: 5066.5 kB → 1171.6 kB (`@nice2dev/ui` 1928.2 kB → 12.9 kB, icon packs 48–275 kB
+  → 1.6–2.6 kB). `defaultViewRegistry` has the Nice\* input controls from the start, each loading its
+  module on first render; sixteen controls add their styles to `<head>` on first render.
+
+  **Dead code.** 405 source files no entry point imported (never on npm) are deleted;
+  `NiceClipboardStack` (`@nice2dev/ui`) and `NiceSampleBrowser` (`@nice2dev/ui-audio`), finished and
+  documented, are exported.
+
+  **ui-mobile draws Nice icons.** New peer `@nice2dev/icons ^1.2.0`; `TabIcons`, `DrawerIcons`,
+  `HeaderIcons`, the `NiceSwipeActions` presets and the `NiceInfiniteScroll` states are `Ntd*` icons
+  instead of pasted `<svg>`, simple glyphs are CSS marks. `@nice2dev/icons` adds `NtdReply` and
+  `NtdInbox`; an icon no longer throws without `window.matchMedia`.
+
+  **`NiceIconSuggestorAI` (breaking, agreed).** `AIIconLibrary` is `'nice'`; `svgPath` and `unicode`
+  left `AISuggestedIcon`; the preview is a `<NiceIcon>`, "Copy SVG" is "Copy JSX".
+
+  **Peer ranges.** Every internal `@nice2dev/*` peer is `^1.2.0` (was as wide as `^1.0.20`), except
+  `@nice2dev/icons ^1.2.1` where a package draws an icon new in 1.2.1: ui-mobile (`NtdReply`,
+  `NtdInbox`), ui-audio (`NtdMicrophoneOff`) and ui-security (`NtdBackspace`). ui-security, licensing
+  (`^1.2.0`) and templates (`^1.2.0`) gain the `@nice2dev/icons` peer: their glyph icons (`⌫`, `←`,
+  `→`, `↑`, `↓`) are Nice icons now. `@nice2dev/icons` adds `NtdBackspace`.
+
+  **Class names inside components.** 834 class names in library stylesheets had no `nice-` prefix
+  (`.tab-button`, `.status-badge`, `.selected`, …) and styled every element of that name on the page.
+  They follow `nice-{block}__{element}--{modifier}` now — no change on screen. The class theme hooks
+  next to `[data-theme]` on seven controls (`dark` on the AI chart / data grid / code and HTML
+  editors / form builder, `light-theme` on `NiceMAM` and `NiceVideoAnnotator`) are `nice-dark` /
+  `nice-light`; `NiceLowPowerMode` marks `<html>` with `nice-lpm-no-animations` /
+  `nice-lpm-reduced-quality`; the `NiceVideoEditor` of `@nice2dev/ui-video` styles its elements under
+  `nice-video-studio`, so they no longer collide with the `NiceVideoEditor` of `@nice2dev/ui`.
+  Rules for classes nothing rendered are gone, among them the stylesheet of `NiceGanttChart`, which
+  left ui-erp in 1.0.10.
+
+  **Translations.** About 3,400 UI texts in 32 packages were hard-coded; they go through `t()` now,
+  with the English text unchanged and pl / de / fr / es / uk in `@nice2dev/i18n` (ui-diagrams,
+  ui-presentations and ui-math in their own dictionaries). In `@nice2dev/events` and
+  `@nice2dev/admin` that includes column headers, option labels and the statuses and roles they used
+  to print raw (`checked-in`, `no-show`) — English labels for those come from the dictionary. ui-3d and ui-graphics read the app's
+  global translator, as ui-audio does since 1.2.0 — their own provider overrides it. ui-audio's
+  controls used 631 keys the dictionary did not have (English in every language), and the radio
+  player showed raw keys (`search_stations`). Texts that were hard-coded **in Polish** — in
+  `NiceSidebarNav`, `NiceNetworkDiscoveryPanel`, the backup and smart-home controls,
+  `NiceSavedQueryPanel`, `NiceNotificationPreferences`, the ui-buildings panels, the ui-printing
+  template editor and the photo editor — default to English now; Polish is in the dictionary. English
+  plurals glued on (`result{s}`) are two keys. `presentationsTranslator(lang)` (ui-presentations)
+  translates outside its provider.
+
+  **List props are optional.** 170 list props (`items`, `columns`, `data`, …) in 15 packages that
+  were required without a default are optional, with a stable empty default; every one of those
+  controls mounts without data (tested). `NiceStockChart` without data no longer computes NaN
+  coordinates.
+
+  **Unstyled components get stylesheets.** 98 components rendered class names no stylesheet had —
+  admin panels, auth forms, events rounds and pickers, the ERP invoice / purchase order / VAT table /
+  HR dashboard, the radio player, `NiceInbox`, PWA prompts, `NiceViewRenderer`, shells, smart-home,
+  … The fixed layout that sat in inline style objects is in classes now, so an app can override it;
+  values that depend on data stay inline. **`@nice2dev/social` and `@nice2dev/ui-science` ship a
+  stylesheet — import `@nice2dev/social/style.css` / `@nice2dev/ui-science/style.css`.** ui-science's
+  `sideEffects` is `["*.css"]`. Colours, spacing and radii in every stylesheet come from theme tokens
+  (visible in dark themes: `NiceRecipe` difficulty badges, transcoder states, warehouse heat map).
+
+  **Icons only from Nice.** About 130 glyphs (`×`, `→`, `↑`) and 100 pasted `<svg>` used as icons
+  are Nice icons; 11 `<svg>` stay as the control's own graphic (logos, spinners, checkbox mark). `NiceIcon`
+  gains `pin`, `mic-off`, `log-out`, `chevrons-left`, `chevrons-right`, `zoom-in`, `zoom-out`,
+  `navigation`, `refresh-ccw`, `minimize` and `smartphone`; `@nice2dev/icons` gains
+  `NtdMicrophoneOff`. The `icon` fields of the module, menu, tab, mode, quick-action, scene and admin
+  widget DTOs, notification channels and view toolbar items are rendered through `NiceIcon` — they
+  used to be printed as text. `NiceRatings` `thumbs` draws shapes instead of emoji.
+
+  **Dialogs instead of `window.prompt` / `confirm` / `alert`.** New `useNiceDialogs()` — `prompt`,
+  `confirm` and `alert` as promises on `NicePromptDialog` / `NiceConfirmDialog` — and
+  `NiceConfirmDialog.showReject`. Seventeen controls asked through the browser's blocking dialogs and
+  use the library's now (`NiceFileManager`, `NiceHtmlEditor`, `NiceViewRenderer` action `confirm`, the 3D,
+  vector and pixel editors, …). Keys pressed in `NicePromptDialog` / `NiceConfirmDialog` no longer
+  reach the page's shortcuts (Escape still closes them), and `NicePromptDialog`'s backdrop covers the
+  whole viewport.
+
+  **Smaller fixes.** `NiceFileManager.items` is optional. `NiceMLStudio` status badges: `draft`,
+  `registered`, `archived`, `cancelled` get a neutral colour, deploying / stopped deployments theirs.
+  Component docs (`doc.json`) list only props the components have. `NiceMobileTabs`: tabs beyond
+  `maxTabs` open from "More" (it only logged). `NiceInventoryManager`: new `onCreatePurchaseOrder`;
+  without it the "Create PO" button is gone (it only logged). Keyboard: `NiceNavShell` tabs follow the
+  WAI-ARIA tabs pattern, clickable `NiceDeviceTile` / `NiceCardGroup` cards and animated icons with
+  `trigger="click"` are focusable. ui-math: `CalculatorService.evaluate` parses instead of running
+  `new Function` (`asin`, `sinh`, `ceil`, exponents and `angleUnit` were wrong); `ExpressionParser`
+  takes `functions`, `constants`, `ignoreCase` and `strict`, multiplies implicitly (`2x`) and reads `^`
+  right to left. `InvoiceLine.vatRate` and `VatRate.rate` are documented as fractions (0.23).
+  `AmqpServerBinding` is `Record<string, never>`.
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/animation/Audience.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var AnimatedPerson = require('./AnimatedPerson.js');
 var characterTypes = require('./characterTypes.js');
 var choreoDSL = require('./choreoDSL.js');
@@ -35,6 +36,7 @@ function makeAudience(n) {
 }
 /** Grid of animated audience members with wave/cheer actions. */
 const NiceAudience = ({ count = 36, columns = 12 }) => {
+    const { t } = i18n.useNiceTranslation();
     const people = React.useMemo(() => makeAudience(count), [count]);
     const refs = React.useRef([]);
     refs.current = [];
@@ -59,7 +61,7 @@ const NiceAudience = ({ count = 36, columns = 12 }) => {
                     display: 'grid',
                     gap: 8,
                     gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-                }, children: people.map((c, i) => (jsxRuntime.jsx(AnimatedPerson, { character: c, score: 10, startPose: "idle", onReady: (fx) => (refs.current[i] = fx) }, i))) }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: wave, children: "Wave" }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: cheer, children: "Cheer" })] })] }));
+                }, children: people.map((c, i) => (jsxRuntime.jsx(AnimatedPerson, { character: c, score: 10, startPose: "idle", onReady: (fx) => (refs.current[i] = fx) }, i))) }), jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: wave, children: t('audience.wave', 'Wave') }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: cheer, children: t('audience.cheer', 'Cheer') })] })] }));
 };
 
 module.exports = NiceAudience;

package/dist/cjs/animation/rig/RigPlayer.js

@@ -9,7 +9,7 @@ var RiggedBody = require('./RiggedBody.js');
 var rigMath = require('./rigMath.js');
 var rigTypes = require('./rigTypes.js');
 
-const NiceRigPlayer = React.forwardRef(({ character, rig, pose, size, debug }, ref) => {
+const NiceRigPlayer = /* @__PURE__ */ React.forwardRef(({ character, rig, pose, size, debug }, ref) => {
     var _a;
     const [current, setCurrent] = React.useState({ ...rigTypes.DEFAULT_POSE, ...(pose !== null && pose !== void 0 ? pose : {}) });
     const r = rig !== null && rig !== void 0 ? rig : rigTypes.DEFAULT_RIG;

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

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

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

@@ -10,13 +10,16 @@ const HeadwearCap = ({ colors, scale = 1, transform }) => {
 };
 const HeadwearCrown = ({ colors, scale = 1, transform }) => {
     const base = characterTypes.pick(colors, 0, 'var(--nice-warning, #FFD700)');
-    return (jsxRuntime.jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, children: jsxRuntime.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 (jsxRuntime.jsx("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, children: jsxRuntime.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 = characterTypes.pick(colors, 0, 'var(--nice-text, #333)');
     return (jsxRuntime.jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, stroke: base, strokeWidth: 2.5, fill: "none", children: [jsxRuntime.jsx("path", { d: "M-30 0 q0 -40 30 -42 q30 2 30 42" }), jsxRuntime.jsx("rect", { x: -36, y: -6, width: 10, height: 16, rx: 3, fill: base }), jsxRuntime.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 = characterTypes.pick(colors, 0, '#E53E3E');
     return (jsxRuntime.jsxs("g", { transform: `${transform !== null && transform !== void 0 ? transform : ''} scale(${scale})`, children: [jsxRuntime.jsx("path", { d: "M-28 -14 q0 -22 28 -26 q28 4 28 26 z", fill: base }), jsxRuntime.jsx("circle", { cx: 0, cy: -42, r: 6, fill: base })] }));
 };

package/dist/cjs/core/NiceBrushEngine.js

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('./i18n.js');
 
 /* ── Brush Presets ── */
 const DEFAULT_DYNAMICS = {
@@ -543,6 +544,7 @@ color = '#000000') {
 }
 /* ── Component ── */
 const NiceBrushEngine = ({ canvas, color = '#000000', onStrokeEnd, className = '', }) => {
+    const { t } = i18n.useNiceTranslation();
     const engine = useBrushEngine(canvas, color);
     // Override endStroke to fire callback
     React.useEffect(() => {
@@ -559,7 +561,7 @@ const NiceBrushEngine = ({ canvas, color = '#000000', onStrokeEnd, className = '
         return () => canvas.removeEventListener('pointerup', onUp);
     }, [canvas, engine.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 }), " Brush Engine v2"] }), jsxRuntime.jsx("div", { style: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: engine.presetNames.map((name) => {
+    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;
                     return (jsxRuntime.jsx("button", { type: "button", onClick: () => engine.applyPreset(name), style: {
                             padding: '2px 6px',
@@ -572,13 +574,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: "Circle" }), jsxRuntime.jsx("option", { value: "square", children: "Square" }), jsxRuntime.jsx("option", { value: "diamond", children: "Diamond" }), jsxRuntime.jsx("option", { value: "texture", children: "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 }), " Size Dynamics"] }), jsxRuntime.jsxs("label", { children: ["Source:", jsxRuntime.jsxs("select", { value: s.sizeDynamics.source, onChange: (e) => engine.setSettings({
+                }) }), 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({
                                     ...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: "Pressure" }), jsxRuntime.jsx("option", { value: "tilt", children: "Tilt" }), jsxRuntime.jsx("option", { value: "speed", children: "Speed" }), jsxRuntime.jsx("option", { value: "random", children: "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 }) }), "Wet Edges"] })] }));
+                                }), 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')] })] }));
 };
 
 exports.BRUSH_PRESETS = BRUSH_PRESETS;

package/dist/cjs/core/editorAsk.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@nice2dev/ui');
+var React = require('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] = React.useState(null);
+    const pendingRef = React.useRef(null);
+    const ask = React.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 (jsxRuntime.jsx(ui.NiceConfirmDialog, { visible: true, message: ask.text, onAccept: () => ask.answer(''), onReject: () => ask.answer(null) }));
+    }
+    return (jsxRuntime.jsx(ui.NicePromptDialog, { open: true, title: ask.text, defaultValue: ask.defaultValue, onSubmit: (value) => ask.answer(value), onCancel: () => ask.answer(null) }));
+};
+
+exports.EditorAskDialog = EditorAskDialog;
+exports.useEditorAsk = useEditorAsk;

package/dist/cjs/core/i18n.js

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

package/dist/cjs/core/plugins.js

@@ -112,7 +112,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/cjs/core/rtl.js

@@ -14,7 +14,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/cjs/core/theme.js

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

package/dist/cjs/font/NiceFontEditor.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 
 /** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const FONT_EDITOR_TOUR = [
@@ -134,6 +135,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 } = i18n.useNiceTranslation();
     const editor = useFontEditor(fontName);
     const [drawMode, setDrawMode] = React.useState('select');
     const [pathPoints, setPathPoints] = React.useState([]);
@@ -221,7 +223,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
             color: 'var(--nice-text, #c1c2c5)',
             padding: 12,
             borderRadius: 8,
-        }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 20 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, FONT_EDITOR_TOUR) }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 14 }, children: "Font Editor" }), jsxRuntime.jsx("input", { value: editor.fontName, onChange: (e) => editor.setFontName(e.target.value), placeholder: "Font name", style: { flex: 1, maxWidth: 200, ...fieldStyle, fontSize: 12 } }), jsxRuntime.jsx("button", { onClick: handleSave, style: {
+        }, children: [jsxRuntime.jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 20 }, children: jsxRuntime.jsx(ui.NiceTutorialButton, { steps: ui.resolveTutorial(tutorial, FONT_EDITOR_TOUR) }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 14 }, children: t('fontEditor.fontEditor', 'Font Editor') }), jsxRuntime.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 } }), jsxRuntime.jsx("button", { onClick: handleSave, style: {
                             padding: '4px 12px',
                             background: 'var(--nice-success, #2f9e44)',
                             color: 'var(--nice-text-on-primary, #fff)',
@@ -229,7 +231,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                             borderRadius: 3,
                             cursor: 'pointer',
                             fontSize: 11,
-                        }, children: "Save" }), jsxRuntime.jsx("button", { onClick: handleExportSvg, style: {
+                        }, children: t('fontEditor.save', 'Save') }), jsxRuntime.jsx("button", { onClick: handleExportSvg, style: {
                             padding: '4px 12px',
                             background: '#228be6',
                             color: 'var(--nice-color-white, #fff)',
@@ -237,7 +239,7 @@ const NiceFontEditor = ({ fontName = 'MyFont', onSave, className = '', tutorial,
                             borderRadius: 3,
                             cursor: 'pointer',
                             fontSize: 11,
-                        }, children: "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: "Glyphs" }), jsxRuntime.jsx("button", { onClick: () => setTab('metrics'), style: tabBtnStyle(tab === 'metrics'), children: "Metrics" }), jsxRuntime.jsx("button", { onClick: () => setTab('kerning'), style: tabBtnStyle(tab === 'kerning'), children: "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.jsxs("div", { style: {
                                     fontSize: 11,
                                     marginBottom: 4,
                                     color: 'var(--nice-text-secondary, #868e96)',
@@ -272,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: "Select" }), jsxRuntime.jsx("button", { onClick: () => setDrawMode('pen'), style: btnStyle(drawMode === 'pen'), children: "Pen" }), jsxRuntime.jsx("button", { onClick: clearPath, style: btnStyle(false), children: "Clear" }), jsxRuntime.jsx("button", { onClick: () => setShowGrid((g) => !g), style: btnStyle(showGrid), children: "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: "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',
@@ -280,32 +282,32 @@ 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: "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: "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: "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, {
                                                 advanceWidth: Number(e.target.value),
-                                            }), style: fieldStyle }), jsxRuntime.jsx("label", { children: "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: {
+                                            }), 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)',
                                 padding: 20,
                                 textAlign: 'center',
-                            }, children: "Select a glyph to edit" })) })] })), tab === 'metrics' && (jsxRuntime.jsxs("div", { style: { maxWidth: 400 }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 8 }, children: "Font Metrics" }), [
+                            }, children: t('fontEditor.selectAGlyphToEdit', 'Select a glyph to edit') })) })] })), tab === 'metrics' && (jsxRuntime.jsxs("div", { style: { maxWidth: 400 }, children: [jsxRuntime.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]) => (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: "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: "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.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: () => {
                                     if (newKernLeft && newKernRight) {
                                         setKerningPairs((prev) => [
                                             ...prev,
                                             { left: newKernLeft, right: newKernRight, value: -50 },
                                         ]);
                                     }
-                                }, style: btnStyle(false), children: "Add Pair" })] }), jsxRuntime.jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: kerningPairs.length === 0 ? (jsxRuntime.jsx("div", { style: {
+                                }, style: btnStyle(false), children: t('fontEditor.addPair', 'Add Pair') })] }), jsxRuntime.jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: kerningPairs.length === 0 ? (jsxRuntime.jsx("div", { style: {
                                 color: 'var(--nice-text-secondary, #868e96)',
                                 fontSize: 11,
                                 padding: 8,
                                 textAlign: 'center',
-                            }, children: "No kerning pairs defined" })) : (kerningPairs.map((kp, i) => (jsxRuntime.jsxs("div", { style: {
+                            }, children: t('fontEditor.noKerningPairsDefined', 'No kerning pairs defined') })) : (kerningPairs.map((kp, i) => (jsxRuntime.jsxs("div", { style: {
                                 display: 'flex',
                                 gap: 8,
                                 alignItems: 'center',
@@ -316,7 +318,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: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, i)))) })] })), jsxRuntime.jsxs("div", { style: { marginTop: 8, borderTop: '1px solid var(--nice-border, #373a40)', paddingTop: 8 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #868e96)', marginBottom: 4 }, children: "Preview" }), jsxRuntime.jsx("input", { value: editor.previewText, onChange: (e) => editor.setPreviewText(e.target.value), style: { width: '100%', padding: '6px 8px', ...fieldStyle, fontSize: 12 } }), jsxRuntime.jsx("div", { style: {
+                                    }, "aria-label": t('fontEditor.removeKerningPair', 'Remove kerning pair'), title: t('fontEditor.removeKerningPair', 'Remove kerning pair'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, i)))) })] })), jsxRuntime.jsxs("div", { style: { marginTop: 8, borderTop: '1px solid var(--nice-border, #373a40)', paddingTop: 8 }, children: [jsxRuntime.jsx("div", { style: { fontSize: 11, color: 'var(--nice-text-secondary, #868e96)', marginBottom: 4 }, children: t('fontEditor.preview', 'Preview') }), jsxRuntime.jsx("input", { value: editor.previewText, onChange: (e) => editor.setPreviewText(e.target.value), style: { width: '100%', padding: '6px 8px', ...fieldStyle, fontSize: 12 } }), jsxRuntime.jsx("div", { style: {
                             marginTop: 8,
                             padding: 16,
                             background: 'var(--nice-bg, #fff)',