@nice2dev/ui-graphics 1.2.0 → 1.2.1

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

package/dist/cjs/vector/VectorEditorShapeRenderer.js

@@ -8,7 +8,9 @@ const ShapeRenderer = ({ shape: s, selected, zoom }) => {
     if (s.hidden) {
         return null;
     }
-    const selStroke = selected ? 'rgba(85,102,204,0.6)' : undefined;
+    const selStroke = selected
+        ? 'color-mix(in srgb, var(--nice-color-primary, #5566cc) 60%, transparent)'
+        : undefined;
     const gProps = {};
     if (s.opacity < 1) {
         gProps.opacity = s.opacity;

package/dist/cjs/vector/useVectorEditor.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var editorAsk = require('../core/editorAsk.js');
 var vectorBooleanOps = require('./vectorBooleanOps.js');
 var vectorEditorExport = require('./vectorEditorExport.js');
 var vectorEditorImport = require('./vectorEditorImport.js');
@@ -12,10 +13,13 @@ var vectorEditorTypes = require('./vectorEditorTypes.js');
  * so the component file is pure layout.
  */
 function useVectorEditor({ artW, artH, onSaveToLibrary }) {
+    // the library's dialogs for the text tool and the library name (not window.prompt)
+    const { pendingAsk, ask } = editorAsk.useEditorAsk();
     /* ── state ── */
     const [shapes, setShapes] = React.useState([]);
     const [selId, setSelId] = React.useState(null);
     const [tool, setTool] = React.useState('pointer');
+    // audit-allow: literal-color — the first fill of a new shape - document data
     const [fillCol, setFillCol] = React.useState('#5566cc');
     const [strokeCol, setStrokeCol] = React.useState('#000000');
     const [strokeW, setStrokeW] = React.useState(2);
@@ -178,28 +182,30 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             return;
         }
         if (tool === 'text') {
-            const txt = prompt('Enter text:', 'Hello');
-            if (!txt) {
-                return;
-            }
-            const ns = {
-                id: vectorEditorTypes.sid(),
-                type: 'text',
-                x: p.x,
-                y: p.y,
-                w: txt.length * fontSize * 0.6,
-                h: fontSize,
-                ...defaultBase,
-                stroke: 'none',
-                strokeWidth: 0,
-                text: txt,
-                fontSize,
-                fontFamily,
-            };
-            const next = [...shapes, ns];
-            snap(next);
-            setShapes(next);
-            setSelId(ns.id);
+            // the text comes from a dialog: the shape is added once it is entered
+            void ask('prompt', 'Enter text:', 'Hello').then((txt) => {
+                if (!txt) {
+                    return;
+                }
+                const ns = {
+                    id: vectorEditorTypes.sid(),
+                    type: 'text',
+                    x: p.x,
+                    y: p.y,
+                    w: txt.length * fontSize * 0.6,
+                    h: fontSize,
+                    ...defaultBase,
+                    stroke: 'none',
+                    strokeWidth: 0,
+                    text: txt,
+                    fontSize,
+                    fontFamily,
+                };
+                const next = [...shapes, ns];
+                snap(next);
+                setShapes(next);
+                setSelId(ns.id);
+            });
             return;
         }
         if (tool === 'polygon') {
@@ -285,6 +291,7 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         starPoints2,
         starInnerRatio,
         cornerRadius,
+        ask,
     ]);
     const onMove = React.useCallback((e) => {
         if (panning.current) {
@@ -699,15 +706,15 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         const blob = new Blob([svg], { type: 'image/svg+xml' });
         const reader = new FileReader();
         reader.onload = () => {
-            const defaultName = 'drawing.svg';
-            const name = window.prompt('Save to library as:', defaultName);
-            if (!name || !name.trim()) {
-                return;
-            }
-            onSaveToLibrary(reader.result, name.trim(), 'image/svg+xml');
+            const dataUrl = reader.result;
+            void ask('prompt', 'Save to library as:', 'drawing.svg').then((name) => {
+                if (name && name.trim()) {
+                    onSaveToLibrary(dataUrl, name.trim(), 'image/svg+xml');
+                }
+            });
         };
         reader.readAsDataURL(blob);
-    }, [shapes, artW, artH, onSaveToLibrary]);
+    }, [shapes, artW, artH, onSaveToLibrary, ask]);
     /* ── export shortcuts ── */
     const exportSVG = React.useCallback(() => vectorEditorExport.exportSVGFile(shapes, artW, artH, animations), [shapes, artW, artH, animations]);
     const exportPNG = React.useCallback(() => vectorEditorExport.exportPNGFile(shapes, artW, artH), [shapes, artW, artH]);
@@ -793,6 +800,8 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     /* ── return ── */
     return {
         // state
+        /** The question the editor waits on; render it with `EditorAskDialog`. */
+        pendingAsk,
         shapes,
         selId,
         tool,

package/dist/cjs/vector/vectorEditorImport.js

@@ -18,6 +18,7 @@ function parseSVGToShapes(raw) {
     const elems = doc.querySelectorAll('rect, ellipse, circle, line, polyline, polygon, text, path');
     elems.forEach((el) => {
         const tag = el.tagName.toLowerCase();
+        // audit-allow: literal-color — an imported shape without a fill gets a visible default - document data
         const fill = el.getAttribute('fill') || (tag === 'line' ? 'none' : '#cccccc');
         const stroke = el.getAttribute('stroke') || 'none';
         const sw = parseFloat(el.getAttribute('stroke-width') || '1');

package/dist/cjs/vector/vectorIconImport.js

@@ -39,6 +39,7 @@ function iconComponentToShapes(Icon, options) {
     // Force a generous size and visible colors so the parser sees concrete strokes/fills.
     const renderProps = {
         size: 'lg',
+        // audit-allow: literal-color +2 — an imported icon's default colours - document data
         primaryColor: '#5566cc',
         secondaryColor: '#a29bfe',
         strokeWidth: 2,

package/dist/esm/animation/Audience.js

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

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

@@ -7,7 +7,7 @@ import NiceRiggedBody from './RiggedBody.js';
 import { solveFK } from './rigMath.js';
 import { DEFAULT_POSE, DEFAULT_RIG } from './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({ ...DEFAULT_POSE, ...(pose !== null && pose !== void 0 ? pose : {}) });
     const r = rig !== null && rig !== void 0 ? rig : DEFAULT_RIG;

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

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

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

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

package/dist/esm/animation/spineExport.js

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

package/dist/esm/core/NiceBrushEngine.js

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

package/dist/esm/core/editorAsk.js

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

package/dist/esm/core/i18n.js

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

package/dist/esm/core/plugins.js

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

package/dist/esm/core/rtl.js

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

package/dist/esm/core/theme.js

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