@nice2dev/ui-graphics 1.2.0 → 1.2.1

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.1",
   "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.1",
+    "@nice2dev/ui-core": "^1.2.1",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",