@nice2dev/ui-graphics 1.2.0 → 1.2.2

package/dist/esm/ui/NiceUIDesigner.js

@@ -2,6 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { NiceTutorialButton, resolveTutorial, NiceAppShell } from '@nice2dev/ui';
 import { NiceIcon } from '@nice2dev/ui-core';
 import React from 'react';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
 const UI_DESIGNER_TOUR = [
@@ -310,6 +311,7 @@ function updateInTree(nodes, id, updates) {
 /** Visual drag & drop UI builder that generates React code. */
 const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
     var _a, _b, _c, _d, _e;
+    const { t } = useNiceTranslation();
     const designer = useUIDesigner();
     const [breakpoint, setBreakpoint] = React.useState('desktop');
     const [dragType, setDragType] = React.useState(null);
@@ -393,7 +395,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                         color: 'var(--nice-text-secondary, #868e96)',
                         fontSize: 11,
                         gap: 4,
-                    }, children: [jsx(NiceIcon, { name: "image", size: 14 }), " Image"] })) : node.type === 'List' ? (jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => (jsx("li", { children: item }, i))) })) : node.type === 'Divider' ? (jsx("hr", { style: {
+                    }, children: [jsx(NiceIcon, { name: "image", size: 14 }), " ", t('uiDesigner.image', 'Image')] })) : node.type === 'List' ? (jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => (jsx("li", { children: item }, i))) })) : node.type === 'Divider' ? (jsx("hr", { style: {
                         margin: 0,
                         border: 'none',
                         borderTop: '1px solid var(--nice-border, #dee2e6)',
@@ -419,7 +421,9 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                         display: 'flex',
                         alignItems: 'center',
                         gap: 4,
-                        background: designer.selectedId === node.id ? 'rgba(51,154,240,0.2)' : 'transparent',
+                        background: designer.selectedId === node.id
+                            ? 'color-mix(in srgb, var(--nice-color-primary, #339af0) 20%, transparent)'
+                            : 'transparent',
                         borderRadius: 2,
                     }, children: [(def === null || def === void 0 ? void 0 : def.icon) && jsx(NiceIcon, { name: def.icon, size: 12 }), jsxs("span", { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: [node.type, node.props.text ? `: ${String(node.props.text).slice(0, 15)}` : ''] })] }), node.children.map((c) => renderTreeItem(c, depth + 1))] }, node.id));
     };
@@ -433,7 +437,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
             height: '100%',
             overflowY: 'auto',
             boxSizing: 'border-box',
-        }, children: [jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: "Components" }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: COMPONENT_DEFS.map((def) => (jsxs("button", { draggable: true, onDragStart: () => setDragType(def.type), onDragEnd: () => setDragType(null), onClick: () => { var _a; return designer.addNode(def.type, (_a = designer.selectedId) !== null && _a !== void 0 ? _a : undefined); }, style: {
+        }, children: [jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: t('uiDesigner.components', 'Components') }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: COMPONENT_DEFS.map((def) => (jsxs("button", { draggable: true, onDragStart: () => setDragType(def.type), onDragEnd: () => setDragType(null), onClick: () => { var _a; return designer.addNode(def.type, (_a = designer.selectedId) !== null && _a !== void 0 ? _a : undefined); }, style: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: 4,
@@ -445,8 +449,8 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                                 cursor: 'grab',
                                 textAlign: 'left',
                                 fontSize: 11,
-                            }, children: [jsx(NiceIcon, { name: def.icon, size: 14 }), " ", def.label] }, def.type))) })] }), jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: "Tree" }), jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: designer.tree.length === 0 ? (jsx("div", { style: { color: 'var(--nice-text-secondary, #5c5f66)', padding: 4 }, children: "Empty" })) : (designer.tree.map((n) => renderTreeItem(n))) })] })] }));
-    const toolbarContent = (jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', fontSize: 11, padding: '4px 8px' }, children: [jsx("button", { onClick: () => designer.undo(), disabled: !designer.canUndo, style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 }, title: "Undo (Ctrl+Z)", "aria-label": "Undo", children: jsx(NiceIcon, { name: "reply", size: 14 }) }), jsx("button", { onClick: () => designer.redo(), disabled: !designer.canRedo, style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 }, title: "Redo (Ctrl+Y)", "aria-label": "Redo", children: jsx(NiceIcon, { name: "forward", size: 14 }) }), jsx("div", { style: { width: 1, height: 16, background: 'var(--nice-border, #373a40)' } }), jsxs("button", { onClick: () => setBreakpoint('desktop'), style: btnStyle(breakpoint === 'desktop'), children: [jsx(NiceIcon, { name: "monitor", size: 14 }), " Desktop"] }), jsxs("button", { onClick: () => setBreakpoint('tablet'), style: btnStyle(breakpoint === 'tablet'), children: [jsx(NiceIcon, { name: "window", size: 14 }), " Tablet"] }), jsxs("button", { onClick: () => setBreakpoint('mobile'), style: btnStyle(breakpoint === 'mobile'), children: [jsx(NiceIcon, { name: "phone", size: 14 }), " Mobile"] }), jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxs("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: 'var(--nice-danger, #ff6b6b)' }, children: [jsx(NiceIcon, { name: "trash", size: 14 }), " Delete"] })), jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ['</>', " Code"] }), jsx("button", { onClick: () => onExport === null || onExport === void 0 ? void 0 : onExport(designer.exportCode()), style: {
+                            }, children: [jsx(NiceIcon, { name: def.icon, size: 14 }), " ", def.label] }, def.type))) })] }), jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: t('uiDesigner.tree', 'Tree') }), jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: designer.tree.length === 0 ? (jsx("div", { style: { color: 'var(--nice-text-secondary, #5c5f66)', padding: 4 }, children: t('uiDesigner.empty', 'Empty') })) : (designer.tree.map((n) => renderTreeItem(n))) })] })] }));
+    const toolbarContent = (jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', fontSize: 11, padding: '4px 8px' }, children: [jsx("button", { onClick: () => designer.undo(), disabled: !designer.canUndo, style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 }, title: t('uiDesigner.undoCtrlZ', 'Undo (Ctrl+Z)'), "aria-label": t('uiDesigner.undo', 'Undo'), children: jsx(NiceIcon, { name: "reply", size: 14 }) }), jsx("button", { onClick: () => designer.redo(), disabled: !designer.canRedo, style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 }, title: t('uiDesigner.redoCtrlY', 'Redo (Ctrl+Y)'), "aria-label": t('uiDesigner.redo', 'Redo'), children: jsx(NiceIcon, { name: "forward", size: 14 }) }), jsx("div", { style: { width: 1, height: 16, background: 'var(--nice-border, #373a40)' } }), jsxs("button", { onClick: () => setBreakpoint('desktop'), style: btnStyle(breakpoint === 'desktop'), children: [jsx(NiceIcon, { name: "monitor", size: 14 }), " ", t('uiDesigner.desktop', 'Desktop')] }), jsxs("button", { onClick: () => setBreakpoint('tablet'), style: btnStyle(breakpoint === 'tablet'), children: [jsx(NiceIcon, { name: "window", size: 14 }), " ", t('uiDesigner.tablet', 'Tablet')] }), jsxs("button", { onClick: () => setBreakpoint('mobile'), style: btnStyle(breakpoint === 'mobile'), children: [jsx(NiceIcon, { name: "phone", size: 14 }), " ", t('uiDesigner.mobile', 'Mobile')] }), jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxs("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: 'var(--nice-danger, #ff6b6b)' }, children: [jsx(NiceIcon, { name: "trash", size: 14 }), " ", t('uiDesigner.delete', 'Delete')] })), jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ['</>', " ", t('uiDesigner.code', 'Code')] }), jsx("button", { onClick: () => onExport === null || onExport === void 0 ? void 0 : onExport(designer.exportCode()), style: {
                     padding: '4px 8px',
                     background: 'var(--nice-primary, #228be6)',
                     color: 'var(--nice-text-on-primary, #fff)',
@@ -454,7 +458,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                     borderRadius: 3,
                     cursor: 'pointer',
                     fontSize: 11,
-                }, children: "Export" })] }));
+                }, children: t('uiDesigner.export', 'Export') })] }));
     const mainContent = (jsx("div", { style: {
             flex: 1,
             display: 'flex',
@@ -470,7 +474,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                 margin: 0,
                 overflow: 'auto',
                 fontSize: 11,
-                color: '#a6e3a1',
+                color: 'var(--nice-color-success, #a6e3a1)',
                 fontFamily: 'monospace',
             }, children: designer.exportCode() })) : (jsx("div", { style: {
                 flex: 1,
@@ -487,7 +491,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                     textAlign: 'center',
                     padding: 40,
                     color: 'var(--nice-text-secondary, #868e96)',
-                }, children: "Drag or click a component to add it" })) : (designer.tree.map((n) => renderNode(n))) })) }));
+                }, children: t('uiDesigner.dragOrClickAComponent', 'Drag or click a component to add it') })) : (designer.tree.map((n) => renderNode(n))) })) }));
     const rightPanel = (jsxs("div", { style: {
             width: 200,
             fontSize: 11,
@@ -498,7 +502,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
             overflowY: 'auto',
             padding: 8,
             boxSizing: 'border-box',
-        }, children: [jsx("strong", { style: { fontSize: 12 }, children: "Properties" }), selectedNode ? (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxs("div", { style: {
+        }, children: [jsx("strong", { style: { fontSize: 12 }, children: t('uiDesigner.properties', 'Properties') }), selectedNode ? (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxs("div", { style: {
                             color: 'var(--nice-text-secondary, #868e96)',
                             display: 'flex',
                             alignItems: 'center',
@@ -507,13 +511,13 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                                 var _a;
                                 const di = (_a = COMPONENT_DEFS.find((d) => d.type === selectedNode.type)) === null || _a === void 0 ? void 0 : _a.icon;
                                 return di ? jsx(NiceIcon, { name: di, size: 14 }) : null;
-                            })(), ' ', selectedNode.type] }), selectedNode.props.text !== undefined && (jsxs("div", { children: [jsx("label", { children: "Text" }), jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxs("div", { children: [jsx("label", { children: "Placeholder" }), jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxs("div", { children: [jsx("label", { children: "Heading Level" }), jsx("select", { value: Number(selectedNode.props.level), onChange: (e) => designer.updateNode(selectedNode.id, {
+                            })(), ' ', selectedNode.type] }), selectedNode.props.text !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.text', 'Text') }), jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.placeholder', 'Placeholder') }), jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.headingLevel', 'Heading Level') }), jsx("select", { value: Number(selectedNode.props.level), onChange: (e) => designer.updateNode(selectedNode.id, {
                                     props: { level: Number(e.target.value) },
-                                }), style: fieldStyle, children: [1, 2, 3, 4, 5, 6].map((v) => (jsxs("option", { value: v, children: ["H", v] }, v))) })] })), selectedNode.props.variant !== undefined && (jsxs("div", { children: [jsx("label", { children: "Variant" }), jsx("select", { value: String(selectedNode.props.variant), onChange: (e) => designer.updateNode(selectedNode.id, { props: { variant: e.target.value } }), style: fieldStyle, children: ['primary', 'secondary', 'outline', 'ghost'].map((v) => (jsx("option", { value: v, children: v }, v))) })] })), selectedNode.props.src !== undefined && (jsxs("div", { children: [jsx("label", { children: "Image URL" }), jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxs("div", { children: [jsx("label", { children: "Alt Text" }), jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsx("hr", { style: {
+                                }), style: fieldStyle, children: [1, 2, 3, 4, 5, 6].map((v) => (jsxs("option", { value: v, children: ["H", v] }, v))) })] })), selectedNode.props.variant !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.variant', 'Variant') }), jsx("select", { value: String(selectedNode.props.variant), onChange: (e) => designer.updateNode(selectedNode.id, { props: { variant: e.target.value } }), style: fieldStyle, children: ['primary', 'secondary', 'outline', 'ghost'].map((v) => (jsx("option", { value: v, children: v }, v))) })] })), selectedNode.props.src !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.imageUrl', 'Image URL') }), jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.altText', 'Alt Text') }), jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsx("hr", { style: {
                             border: 'none',
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             margin: '4px 0',
-                        } }), jsx("strong", { style: { color: 'var(--nice-text-secondary, #868e96)' }, children: "Style" }), ['padding', 'margin', 'gap', 'borderRadius'].map((prop) => (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: prop }), jsx("input", { type: "number", value: typeof selectedNode.style[prop] === 'number'
+                        } }), jsx("strong", { style: { color: 'var(--nice-text-secondary, #868e96)' }, children: t('uiDesigner.style', 'Style') }), ['padding', 'margin', 'gap', 'borderRadius'].map((prop) => (jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: prop }), jsx("input", { type: "number", value: typeof selectedNode.style[prop] === 'number'
                                     ? selectedNode.style[prop]
                                     : 0, onChange: (e) => designer.updateNode(selectedNode.id, {
                                     style: { [prop]: Number(e.target.value) },
@@ -543,7 +547,7 @@ const NiceUIDesigner = ({ onChange, onExport, className = '', tutorial, }) => {
                     color: 'var(--nice-text-secondary, #5c5f66)',
                     padding: 8,
                     textAlign: 'center',
-                }, children: "Select an element" }))] }));
+                }, children: t('uiDesigner.selectAnElement', 'Select an element') }))] }));
     return (jsxs("div", { className: `nice-ui-designer ${className}`, style: { position: 'relative', height: '100%' }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, UI_DESIGNER_TOUR) }) }), jsx(NiceAppShell, { flush: true, toolbar: toolbarContent, sidebar: leftPanel, rightSidebar: rightPanel, children: mainContent })] }));
 };
 

package/dist/esm/vector/NiceSvgToCode.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { NiceIcon } from '@nice2dev/ui-core';
 import React, { useState, useCallback } from 'react';
+import { useNiceTranslation } from '../core/i18n.js';
 
 /* ── Default config ── */
 const DEFAULT_CONFIG = {
@@ -417,6 +418,7 @@ function useSvgToCode() {
 }
 /* ── Component ── */
 const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
+    const { t } = useNiceTranslation();
     const { svgInput, setSvgInput, config, updateConfig, convert, result } = useSvgToCode();
     // Initialize with provided SVG
     React.useEffect(() => {
@@ -435,21 +437,21 @@ const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
             navigator.clipboard.writeText(result.code);
         }
     };
-    return (jsxs("div", { className: `nice-svg-to-code ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " SVG \u2192 Code"] }), jsx("textarea", { value: svgInput, onChange: (e) => setSvgInput(e.target.value), placeholder: "Paste SVG markup here\u2026", rows: 6, style: {
+    return (jsxs("div", { className: `nice-svg-to-code ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " ", t('svgToCode.svgCode', 'SVG → Code')] }), jsx("textarea", { value: svgInput, onChange: (e) => setSvgInput(e.target.value), placeholder: t('svgToCode.pasteSvgMarkupHere', 'Paste SVG markup here…'), rows: 6, style: {
                     width: '100%',
                     fontFamily: 'monospace',
                     fontSize: 11,
                     padding: 6,
                     borderRadius: 4,
                     border: '1px solid var(--nice-border, #e2e8f0)',
-                } }), jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: ["Framework:", jsxs("select", { value: config.framework, onChange: (e) => updateConfig({ framework: e.target.value }), style: { width: '100%' }, children: [jsx("option", { value: "react", children: "React (JSX/TSX)" }), jsx("option", { value: "vue", children: "Vue (SFC)" }), jsx("option", { value: "web-component", children: "Web Component" }), jsx("option", { value: "typescript", children: "TypeScript (utility)" })] })] }), jsxs("label", { children: ["Component name:", jsx("input", { type: "text", value: config.componentName, onChange: (e) => updateConfig({ componentName: e.target.value.replace(/[^a-zA-Z0-9]/g, '') }), style: { width: '100%', padding: '3px 6px' } })] }), jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 11 }, children: [jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.typescript, onChange: (e) => updateConfig({ typescript: e.target.checked }) }), ' ', "TypeScript"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.optimize, onChange: (e) => updateConfig({ optimize: e.target.checked }) }), ' ', "Optimize"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.sizeProps, onChange: (e) => updateConfig({ sizeProps: e.target.checked }) }), ' ', "Size props"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.useCurrentColor, onChange: (e) => updateConfig({ useCurrentColor: e.target.checked }) }), ' ', "currentColor"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.memo, onChange: (e) => updateConfig({ memo: e.target.checked }) }), ' ', "memo"] })] })] }), jsxs("button", { type: "button", onClick: handleConvert, disabled: !svgInput.trim(), style: {
+                } }), jsxs("div", { style: { display: 'grid', gap: 4 }, children: [jsxs("label", { children: [t('svgToCode.framework', 'Framework:'), jsxs("select", { value: config.framework, onChange: (e) => updateConfig({ framework: e.target.value }), style: { width: '100%' }, children: [jsx("option", { value: "react", children: "React (JSX/TSX)" }), jsx("option", { value: "vue", children: "Vue (SFC)" }), jsx("option", { value: "web-component", children: t('svgToCode.webComponent', 'Web Component') }), jsx("option", { value: "typescript", children: t('svgToCode.typescriptUtility', 'TypeScript (utility)') })] })] }), jsxs("label", { children: [t('svgToCode.componentName', 'Component name:'), jsx("input", { type: "text", value: config.componentName, onChange: (e) => updateConfig({ componentName: e.target.value.replace(/[^a-zA-Z0-9]/g, '') }), style: { width: '100%', padding: '3px 6px' } })] }), jsxs("div", { style: { display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 11 }, children: [jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.typescript, onChange: (e) => updateConfig({ typescript: e.target.checked }) }), ' ', t('svgToCode.typescript', 'TypeScript')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.optimize, onChange: (e) => updateConfig({ optimize: e.target.checked }) }), ' ', t('svgToCode.optimize', 'Optimize')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.sizeProps, onChange: (e) => updateConfig({ sizeProps: e.target.checked }) }), ' ', t('svgToCode.sizeProps', 'Size props')] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.useCurrentColor, onChange: (e) => updateConfig({ useCurrentColor: e.target.checked }) }), ' ', "currentColor"] }), jsxs("label", { children: [jsx("input", { type: "checkbox", checked: config.memo, onChange: (e) => updateConfig({ memo: e.target.checked }) }), ' ', "memo"] })] })] }), jsxs("button", { type: "button", onClick: handleConvert, disabled: !svgInput.trim(), style: {
                     background: 'var(--nice-color-accent, #6366f1)',
                     color: 'var(--nice-text-on-primary, #fff)',
                     border: 'none',
                     borderRadius: 4,
                     padding: '8px 12px',
                     cursor: 'pointer',
-                }, children: [jsx(NiceIcon, { name: "refresh", size: 14 }), " Convert to", ' ', config.framework.charAt(0).toUpperCase() + config.framework.slice(1)] }), result && (jsxs("div", { children: [jsxs("div", { style: {
+                }, children: [jsx(NiceIcon, { name: "refresh", size: 14 }), ' ', t('svgToCode.convertTo', 'Convert to {framework}').replace('{framework}', config.framework.charAt(0).toUpperCase() + config.framework.slice(1))] }), result && (jsxs("div", { children: [jsxs("div", { style: {
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center',
@@ -461,7 +463,7 @@ const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
                                     borderRadius: 3,
                                     border: '1px solid var(--nice-border, #e2e8f0)',
                                     background: 'transparent',
-                                }, children: [jsx(NiceIcon, { name: "clipboard", size: 12 }), " Copy"] })] }), jsx("pre", { style: {
+                                }, children: [jsx(NiceIcon, { name: "clipboard", size: 12 }), " ", t('svgToCode.copy', 'Copy')] })] }), jsx("pre", { style: {
                             background: 'var(--nice-code-bg, #1e293b)',
                             color: 'var(--nice-code-color, #e2e8f0)',
                             padding: 8,
@@ -470,7 +472,7 @@ const NiceSvgToCode = ({ initialSvg = '', onConvert, className = '', }) => {
                             overflow: 'auto',
                             maxHeight: 300,
                             whiteSpace: 'pre-wrap',
-                        }, children: result.code }), result.extractedColors.length > 0 && (jsxs("div", { style: { fontSize: 11, marginTop: 4 }, children: ["Kolory:", ' ', result.extractedColors.map((c) => (jsx("span", { style: {
+                        }, children: result.code }), result.extractedColors.length > 0 && (jsxs("div", { style: { fontSize: 11, marginTop: 4 }, children: [t('svgToCode.colors', 'Colors:'), ' ', result.extractedColors.map((c) => (jsx("span", { style: {
                                     display: 'inline-block',
                                     width: 12,
                                     height: 12,

package/dist/esm/vector/VectorEditor.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { NiceButton, NiceAppShell, NiceModal, NiceTextArea } from '@nice2dev/ui';
 import { NiceIcon } from '@nice2dev/ui-core';
 import { useRef, useState, useCallback, useEffect } from 'react';
+import { EditorAskDialog } from '../core/editorAsk.js';
 import { useNiceTranslation } from '../core/i18n.js';
 import { useVectorEditor } from './useVectorEditor.js';
 import { frameToTransform, sampleAnimation } from './vectorAnimation.js';
@@ -63,7 +64,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 = (jsx("div", { className: styles.toolbar, children: TOOLS.map((t) => (jsx(NiceButton, { className: `${styles.toolBtn} ${tool === t.id ? styles.toolBtnActive : ''}`, onClick: () => switchTool(t.id), "aria-label": `${t.label} (${t.key})`, variant: tool === t.id ? 'primary' : 'ghost', size: "sm", children: jsx(NiceIcon, { name: t.icon, size: "sm" }) }, t.id))) }));
-    return (jsxs(Fragment, { children: [jsx("input", { ref: fInp, type: "file", accept: ".svg", style: { display: 'none' }, onChange: (e) => {
+    return (jsxs(Fragment, { children: [jsx(EditorAskDialog, { ask: api.pendingAsk }), 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) {
@@ -109,7 +110,7 @@ const NiceVectorEditor = ({ width: artW = 512, height: artH = 512, className, on
                                 }
                                 const node = (jsx(ShapeRenderer, { shape: s, selected: s.id === selId, zoom: zoom }, s.id));
                                 return previewTr ? (jsx("g", { transform: previewTr, children: node }, s.id)) : (node);
-                            })] }) }) }), jsxs(NiceModal, { open: dlgSvg, onClose: () => setDlgSvg(false), title: "Paste SVG", children: [jsx("label", { children: "Paste SVG source code below:" }), jsx(NiceTextArea, { value: svgText, onChange: (val) => setSvgText(val), placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...>' }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "ghost", onClick: () => setDlgSvg(false), children: "Cancel" }), jsx(NiceButton, { variant: "primary", onClick: () => importSVGString(svgText), children: "Import" })] })] }), jsxs(NiceModal, { open: snippetOpen, onClose: () => setSnippetOpen(false), title: t('vectorEditor.snippet.title', 'Icon snippet copied to clipboard'), children: [jsxs("p", { style: { marginTop: 0 }, children: [t('vectorEditor.snippet.pasteHint', 'Paste into'), ' ', jsxs("code", { children: ["packages/icons/src/icons/", iconCategory ? `${iconCategory.toLowerCase()}` : '<category>', ".tsx"] }), ":"] }), jsx(NiceTextArea, { value: snippetText, onChange: (val) => setSnippetText(val), rows: 16 }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "primary", onClick: () => {
+                            })] }) }) }), jsxs(NiceModal, { open: dlgSvg, onClose: () => setDlgSvg(false), title: t('vectorEditor.pasteSvg', 'Paste SVG'), children: [jsx("label", { children: t('vectorEditor.pasteSvgSourceCodeBelow', 'Paste SVG source code below:') }), jsx(NiceTextArea, { value: svgText, onChange: (val) => setSvgText(val), placeholder: t('vectorEditor.svgXmlnsHttpWwwW3', '<svg xmlns="http://www.w3.org/2000/svg" ...>') }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "ghost", onClick: () => setDlgSvg(false), children: t('vectorEditor.cancel', 'Cancel') }), jsx(NiceButton, { variant: "primary", onClick: () => importSVGString(svgText), children: t('vectorEditor.import', 'Import') })] })] }), jsxs(NiceModal, { open: snippetOpen, onClose: () => setSnippetOpen(false), title: t('vectorEditor.snippet.title', 'Icon snippet copied to clipboard'), children: [jsxs("p", { style: { marginTop: 0 }, children: [t('vectorEditor.snippet.pasteHint', 'Paste into'), ' ', jsxs("code", { children: ["packages/icons/src/icons/", iconCategory ? `${iconCategory.toLowerCase()}` : '<category>', ".tsx"] }), ":"] }), jsx(NiceTextArea, { value: snippetText, onChange: (val) => setSnippetText(val), rows: 16 }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { variant: "primary", onClick: () => {
                                     if (typeof navigator !== 'undefined' && navigator.clipboard) {
                                         navigator.clipboard.writeText(snippetText).catch(() => { });
                                     }

package/dist/esm/vector/VectorEditorMenuBar.js

@@ -262,7 +262,13 @@ const VectorEditorMenuBar$1 = ({ api, hasOnSaveToLibrary, onExportIconSnippet })
                     { value: '', label: t('vectorEditor.menu.secondShape', '2nd Shape') },
                     ...shapes
                         .filter((s) => s.id !== selId)
-                        .map((s, i) => { var _a; return ({ value: s.id, label: (_a = s.name) !== null && _a !== void 0 ? _a : `Shape ${i + 1}` }); }),
+                        .map((s, i) => {
+                        var _a;
+                        return ({
+                            value: s.id,
+                            label: (_a = s.name) !== null && _a !== void 0 ? _a : t('vectorEditor.shape', 'Shape {i}').replace('{i}', String(i + 1)),
+                        });
+                    }),
                 ], style: { minWidth: 100 } })), jsxs("label", { className: styles.menuLabel, children: [jsx(NiceCheckbox, { checked: snapGrid, onChange: () => setSnapGrid((v) => !v) }), t('vectorEditor.menu.snap', 'Snap')] }), onExportIconSnippet && (jsxs(Fragment, { children: [jsx("div", { className: styles.menuSep }), jsxs(NiceButton, { className: styles.menuBtn, variant: "primary", size: "sm", onClick: onExportIconSnippet, children: [jsx(NiceIcon, { name: "clipboard", size: 14 }), ' ', t('vectorEditor.menu.exportIcon', 'Export Icon')] })] }))] }));
 };
 var VectorEditorMenuBar = React.memo(VectorEditorMenuBar$1);

package/dist/esm/vector/VectorEditorRightPanel.js

@@ -44,7 +44,7 @@ const VectorEditorRightPanel$1 = ({ api, library, artW = 512, artH = 512 }) => {
                                         border: (selectedGradient === null || selectedGradient === void 0 ? void 0 : selectedGradient.id) === grad.id
                                             ? '2px solid var(--nice-bg, #FFF)'
                                             : '1px solid var(--nice-border-color, #444)',
-                                    }, onClick: () => applyGradient(grad), title: `${grad.type} gradient` }, i))) }), jsx("div", { className: styles.propRow, children: jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: '100%', fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: [jsx(NiceIcon, { name: showGradientEditor ? 'chevron-down' : 'chevron-right', size: 14 }), ' ', showGradientEditor
+                                    }, onClick: () => applyGradient(grad), title: t('vectorEditor.gradient', '{type} gradient').replace('{type}', String(grad.type)) }, i))) }), jsx("div", { className: styles.propRow, children: jsxs(NiceButton, { className: styles.menuBtn, variant: "ghost", size: "sm", style: { width: '100%', fontSize: 10 }, onClick: () => setShowGradientEditor(!showGradientEditor), children: [jsx(NiceIcon, { name: showGradientEditor ? 'chevron-down' : 'chevron-right', size: 14 }), ' ', showGradientEditor
                                             ? t('vectorEditor.properties.hideEditor', 'Hide Editor')
                                             : t('vectorEditor.properties.editGradient', 'Edit Gradient')] }) }), showGradientEditor && selectedGradient && (jsxs("div", { style: {
                                     padding: 4,

package/dist/esm/vector/VectorEditorShapeRenderer.js

@@ -6,7 +6,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/esm/vector/useVectorEditor.js

@@ -1,4 +1,5 @@
 import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { useEditorAsk } from '../core/editorAsk.js';
 import { booleanOperation, flattenToOutline } from './vectorBooleanOps.js';
 import { buildSVGString, exportSVGFile, exportPNGFile, exportJPGFile, exportWebPFile, exportBMPFile } from './vectorEditorExport.js';
 import { parseSVGToShapes } from './vectorEditorImport.js';
@@ -10,10 +11,13 @@ import { cloneShapes, sid, snapToGrid } from './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 } = useEditorAsk();
     /* ── state ── */
     const [shapes, setShapes] = useState([]);
     const [selId, setSelId] = useState(null);
     const [tool, setTool] = useState('pointer');
+    // audit-allow: literal-color — the first fill of a new shape - document data
     const [fillCol, setFillCol] = useState('#5566cc');
     const [strokeCol, setStrokeCol] = useState('#000000');
     const [strokeW, setStrokeW] = useState(2);
@@ -176,28 +180,30 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             return;
         }
         if (tool === 'text') {
-            const txt = prompt('Enter text:', 'Hello');
-            if (!txt) {
-                return;
-            }
-            const ns = {
-                id: 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: 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') {
@@ -283,6 +289,7 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         starPoints2,
         starInnerRatio,
         cornerRadius,
+        ask,
     ]);
     const onMove = useCallback((e) => {
         if (panning.current) {
@@ -697,15 +704,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 = useCallback(() => exportSVGFile(shapes, artW, artH, animations), [shapes, artW, artH, animations]);
     const exportPNG = useCallback(() => exportPNGFile(shapes, artW, artH), [shapes, artW, artH]);
@@ -791,6 +798,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/esm/vector/vectorEditorImport.js

@@ -16,6 +16,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/esm/vector/vectorIconImport.js

@@ -37,6 +37,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/types/core/LocalUI.d.ts

@@ -16,6 +16,5 @@ export interface RangeInputProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 }
 export declare const RangeInput: React.FC<RangeInputProps>;
-export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-}
+export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 export declare const TextArea: React.FC<TextAreaProps>;

package/dist/types/core/editorAsk.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+/** A question an editor hook waits on; {@link EditorAskDialog} shows it. */
+export interface EditorAsk {
+    /** `prompt` asks for a value, `confirm` for a yes / no. */
+    kind: 'prompt' | 'confirm';
+    /** The prompt's title, or the question to confirm. */
+    text: string;
+    /** Initial value of a prompt. */
+    defaultValue?: string;
+    /** Settles it: the entered value (`''` for an accepted confirm), or `null` when cancelled. */
+    answer: (value: string | null) => void;
+}
+/**
+ * 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.
+ */
+export declare function useEditorAsk(): {
+    pendingAsk: EditorAsk | null;
+    ask: (kind: EditorAsk["kind"], text: string, defaultValue?: string) => Promise<string | null>;
+};
+/** Shows the question {@link useEditorAsk} is waiting on, if any. */
+export declare const EditorAskDialog: React.FC<{
+    ask: EditorAsk | null;
+}>;

package/dist/types/core/i18n.d.ts

@@ -1,26 +1,10 @@
-/**
- * i18n — Lightweight translation context for @nice2dev/ui-graphics.
- *
- * Drop-in replacement for react-i18next's useTranslation, requires NO
- * external dependencies. Consumers can optionally wrap with NiceI18nProvider
- * to supply their own translation function. Falls back to the default
- * (English key strings) when no provider is present.
- *
- * Usage in components:
- *   const { t } = useNiceTranslation();
- *   <button>{t('actions.save', 'Save')}</button>
- *
- * Usage in apps:
- *   <NiceI18nProvider t={(key, fallback) => myI18n(key) ?? fallback}>
- *     <App />
- *   </NiceI18nProvider>
- */
 import React from 'react';
 export type NiceTranslateFn = (key: string, defaultValue: string) => string;
 export interface NiceI18nProviderProps {
     t: NiceTranslateFn;
     children: React.ReactNode;
 }
+/** Overrides the app's global translator for the graphics controls below it. */
 export declare const NiceI18nProvider: React.FC<NiceI18nProviderProps>;
 export declare function useNiceTranslation(): {
     t: NiceTranslateFn;

package/dist/types/pixel/usePixelEditor.d.ts

@@ -2,6 +2,7 @@
  * usePixelEditor — custom hook encapsulating ALL state, refs, callbacks,
  * side-effects and memos for the PixelEditor component.
  */
+import { type EditorAsk } from '../core/editorAsk';
 import { type Tool, type Layer, type BlendMode, type Selection } from './pixelEditorTypes';
 import { type BrushConfig, type SymmetryMode } from './pixelEditorUtils';
 export interface UsePixelEditorProps {
@@ -81,6 +82,8 @@ export interface PixelEditorAPI {
     exportSVG: () => void;
     exportSheet: () => void;
     saveToLibrary: () => void;
+    /** The question the editor waits on (library name); render it with `EditorAskDialog`. */
+    pendingAsk: EditorAsk | null;
     addLayer: () => void;
     rmLayer: () => void;
     toggleVis: (i: number) => void;

package/dist/types/vector/useVectorEditor.d.ts

@@ -11,6 +11,8 @@ export interface UseVectorEditorOptions {
     onSaveToLibrary?: (dataUrl: string, name: string, mimeType: string) => void;
 }
 export declare function useVectorEditor({ artW, artH, onSaveToLibrary }: UseVectorEditorOptions): {
+    /** The question the editor waits on; render it with `EditorAskDialog`. */
+    readonly pendingAsk: import("../core/editorAsk").EditorAsk | null;
     readonly shapes: VShape[];
     readonly selId: string | null;
     readonly tool: VTool;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-graphics",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Nice2Dev Graphics Editors — Pixel, Vector, Photo and Animation editors for React",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",
@@ -64,15 +64,15 @@
     "nicetodev"
   ],
   "peerDependencies": {
-    "@nice2dev/ui-core": "^1.0.20",
-    "@nice2dev/ui": "^1.0.20",
+    "@nice2dev/ui-core": "^1.2.0",
+    "@nice2dev/ui": "^1.2.0",
     "framer-motion": ">=10.0.0",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@nice2dev/ui": "^1.2.0",
-    "@nice2dev/ui-core": "^1.2.0",
+    "@nice2dev/ui": "^1.2.2",
+    "@nice2dev/ui-core": "^1.2.2",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",