@nice2dev/ui-graphics 1.1.0 → 1.1.1

package/dist/esm/vector/useVectorEditor.js

@@ -1,8 +1,8 @@
 import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import { cloneShapes, snapToGrid, sid } from './vectorEditorTypes.js';
+import { booleanOperation, flattenToOutline } from './vectorBooleanOps.js';
 import { buildSVGString, exportSVGFile, exportPNGFile, exportJPGFile, exportWebPFile, exportBMPFile } from './vectorEditorExport.js';
 import { parseSVGToShapes } from './vectorEditorImport.js';
-import { booleanOperation, flattenToOutline } from './vectorBooleanOps.js';
+import { cloneShapes, snapToGrid, sid } from './vectorEditorTypes.js';
 
 /**
  * useVectorEditor — extracted logic + state for VectorEditor.
@@ -13,12 +13,12 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     /* ── state ── */
     const [shapes, setShapes] = useState([]);
     const [selId, setSelId] = useState(null);
-    const [tool, setTool] = useState("pointer");
-    const [fillCol, setFillCol] = useState("#5566cc");
-    const [strokeCol, setStrokeCol] = useState("#ffffff");
+    const [tool, setTool] = useState('pointer');
+    const [fillCol, setFillCol] = useState('#5566cc');
+    const [strokeCol, setStrokeCol] = useState('#ffffff');
     const [strokeW, setStrokeW] = useState(2);
     const [fontSize, setFontSize] = useState(24);
-    const [fontFamily, setFontFamily] = useState("sans-serif");
+    const [fontFamily, setFontFamily] = useState('sans-serif');
     const [shapeOpacity, setShapeOpacity] = useState(1);
     const [cornerRadius, setCornerRadius] = useState(12);
     const [polygonSides, setPolygonSides] = useState(6);
@@ -28,7 +28,7 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     const [px, setPx] = useState(0);
     const [py, setPy] = useState(0);
     const [dlgSvg, setDlgSvg] = useState(false);
-    const [svgText, setSvgText] = useState("");
+    const [svgText, setSvgText] = useState('');
     const [snapGrid, setSnapGrid] = useState(false);
     const [gridSize, setGridSize] = useState(16);
     const [hasClipboard, setHasClipboard] = useState(false);
@@ -59,18 +59,21 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         hIdx.current = hist.current.length - 1;
     }, []);
     useEffect(() => {
-        if (hist.current.length === 0)
+        if (hist.current.length === 0) {
             snap([]);
+        }
     }, [snap]);
     const undo = useCallback(() => {
-        if (hIdx.current <= 0)
+        if (hIdx.current <= 0) {
             return;
+        }
         hIdx.current--;
         setShapes(cloneShapes(hist.current[hIdx.current].shapes));
     }, []);
     const redo = useCallback(() => {
-        if (hIdx.current >= hist.current.length - 1)
+        if (hIdx.current >= hist.current.length - 1) {
             return;
+        }
         hIdx.current++;
         setShapes(cloneShapes(hist.current[hIdx.current].shapes));
     }, []);
@@ -78,8 +81,9 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     const scr2art = useCallback((cx, cy) => {
         var _a;
         const r = (_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!r)
+        if (!r) {
             return { x: 0, y: 0 };
+        }
         let x = (cx - r.left - r.width / 2 - px) / zoom + artW / 2;
         let y = (cy - r.top - r.height / 2 - py) / zoom + artH / 2;
         if (snapGrid) {
@@ -96,8 +100,9 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             panStart.current = { mx: e.clientX, my: e.clientY, px, py };
             return;
         }
-        if (e.button !== 0)
+        if (e.button !== 0) {
             return;
+        }
         const p = scr2art(e.clientX, e.clientY);
         const defaultBase = {
             fill: fillCol,
@@ -106,7 +111,7 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             opacity: shapeOpacity,
             rotation: 0,
         };
-        if (tool === "pointer") {
+        if (tool === 'pointer') {
             let hit = null;
             for (let i = shapes.length - 1; i >= 0; i--) {
                 const s = shapes[i];
@@ -122,13 +127,22 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             }
             return;
         }
-        if (tool === "pen") {
+        if (tool === 'pen') {
             penPts.current.push(p);
             if (penPts.current.length === 1) {
                 const ns = {
-                    id: sid(), type: "polyline", x: p.x, y: p.y, w: 0, h: 0,
-                    points: [{ x: p.x, y: p.y }], fill: "none", stroke: strokeCol,
-                    strokeWidth: strokeW, opacity: shapeOpacity, rotation: 0,
+                    id: sid(),
+                    type: 'polyline',
+                    x: p.x,
+                    y: p.y,
+                    w: 0,
+                    h: 0,
+                    points: [{ x: p.x, y: p.y }],
+                    fill: 'none',
+                    stroke: strokeCol,
+                    strokeWidth: strokeW,
+                    opacity: shapeOpacity,
+                    rotation: 0,
                 };
                 pendingShape.current = ns;
                 setShapes((prev) => [...prev, ns]);
@@ -140,21 +154,37 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
                 setShapes((prev) => prev.map((s) => {
                     var _a;
                     return s.id === ((_a = pendingShape.current) === null || _a === void 0 ? void 0 : _a.id)
-                        ? { ...s, points: pts, x: Math.min(...xs), y: Math.min(...ys), w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) }
+                        ? {
+                            ...s,
+                            points: pts,
+                            x: Math.min(...xs),
+                            y: Math.min(...ys),
+                            w: Math.max(...xs) - Math.min(...xs),
+                            h: Math.max(...ys) - Math.min(...ys),
+                        }
                         : s;
                 }));
             }
             return;
         }
-        if (tool === "text") {
-            const txt = prompt("Enter text:", "Hello");
-            if (!txt)
+        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,
+                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);
@@ -162,11 +192,17 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             setSelId(ns.id);
             return;
         }
-        if (tool === "polygon") {
+        if (tool === 'polygon') {
             const r2 = 40;
             const ns = {
-                id: sid(), type: "polygon", x: p.x - r2, y: p.y - r2,
-                w: r2 * 2, h: r2 * 2, ...defaultBase, sides: polygonSides,
+                id: sid(),
+                type: 'polygon',
+                x: p.x - r2,
+                y: p.y - r2,
+                w: r2 * 2,
+                h: r2 * 2,
+                ...defaultBase,
+                sides: polygonSides,
             };
             drawing.current = true;
             startPt.current = p;
@@ -174,11 +210,18 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             setShapes((prev) => [...prev, ns]);
             return;
         }
-        if (tool === "star") {
+        if (tool === 'star') {
             const r2 = 40;
             const ns = {
-                id: sid(), type: "star", x: p.x - r2, y: p.y - r2,
-                w: r2 * 2, h: r2 * 2, ...defaultBase, sides: starPoints2, innerRadius: starInnerRatio,
+                id: sid(),
+                type: 'star',
+                x: p.x - r2,
+                y: p.y - r2,
+                w: r2 * 2,
+                h: r2 * 2,
+                ...defaultBase,
+                sides: starPoints2,
+                innerRadius: starInnerRatio,
             };
             drawing.current = true;
             startPt.current = p;
@@ -189,29 +232,61 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         // rect / roundrect / ellipse / line / arrow — start drag
         drawing.current = true;
         startPt.current = p;
-        const typeMap = { line: "line", arrow: "arrow", ellipse: "ellipse", roundrect: "roundrect" };
-        const shapeType = typeMap[tool] || "rect";
-        const isLineLike = shapeType === "line" || shapeType === "arrow";
+        const typeMap = {
+            line: 'line',
+            arrow: 'arrow',
+            ellipse: 'ellipse',
+            roundrect: 'roundrect',
+        };
+        const shapeType = typeMap[tool] || 'rect';
+        const isLineLike = shapeType === 'line' || shapeType === 'arrow';
         const ns = {
-            id: sid(), type: shapeType, x: p.x, y: p.y, w: 0, h: 0,
-            x2: p.x, y2: p.y,
-            fill: isLineLike ? "none" : fillCol, stroke: strokeCol,
-            strokeWidth: strokeW, opacity: shapeOpacity, rotation: 0,
-            rx: shapeType === "roundrect" ? cornerRadius : undefined,
+            id: sid(),
+            type: shapeType,
+            x: p.x,
+            y: p.y,
+            w: 0,
+            h: 0,
+            x2: p.x,
+            y2: p.y,
+            fill: isLineLike ? 'none' : fillCol,
+            stroke: strokeCol,
+            strokeWidth: strokeW,
+            opacity: shapeOpacity,
+            rotation: 0,
+            rx: shapeType === 'roundrect' ? cornerRadius : undefined,
         };
         pendingShape.current = ns;
         setShapes((prev) => [...prev, ns]);
-    }, [tool, shapes, scr2art, px, py, fillCol, strokeCol, strokeW, fontSize, fontFamily, snap, shapeOpacity, polygonSides, starPoints2, starInnerRatio, cornerRadius]);
+    }, [
+        tool,
+        shapes,
+        scr2art,
+        px,
+        py,
+        fillCol,
+        strokeCol,
+        strokeW,
+        fontSize,
+        fontFamily,
+        snap,
+        shapeOpacity,
+        polygonSides,
+        starPoints2,
+        starInnerRatio,
+        cornerRadius,
+    ]);
     const onMove = useCallback((e) => {
         if (panning.current) {
             setPx(panStart.current.px + (e.clientX - panStart.current.mx));
             setPy(panStart.current.py + (e.clientY - panStart.current.my));
             return;
         }
-        if (!drawing.current)
+        if (!drawing.current) {
             return;
+        }
         const p = scr2art(e.clientX, e.clientY);
-        if (tool === "pointer" && selId) {
+        if (tool === 'pointer' && selId) {
             const dx = p.x - startPt.current.x;
             const dy = p.y - startPt.current.y;
             startPt.current = p;
@@ -219,7 +294,9 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
                 var _a;
                 return s.id === selId
                     ? {
-                        ...s, x: s.x + dx, y: s.y + dy,
+                        ...s,
+                        x: s.x + dx,
+                        y: s.y + dy,
                         x2: s.x2 != null ? s.x2 + dx : undefined,
                         y2: s.y2 != null ? s.y2 + dy : undefined,
                         points: (_a = s.points) === null || _a === void 0 ? void 0 : _a.map((pt) => ({ x: pt.x + dx, y: pt.y + dy })),
@@ -228,10 +305,11 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             }));
             return;
         }
-        if (!pendingShape.current)
+        if (!pendingShape.current) {
             return;
+        }
         const t = pendingShape.current.type;
-        if (t === "polygon" || t === "star") {
+        if (t === 'polygon' || t === 'star') {
             const cx = startPt.current.x;
             const cy = startPt.current.y;
             const dx = p.x - cx;
@@ -242,14 +320,14 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
                 : s));
             return;
         }
-        if (t === "rect" || t === "roundrect" || t === "ellipse") {
+        if (t === 'rect' || t === 'roundrect' || t === 'ellipse') {
             const x1 = Math.min(startPt.current.x, p.x);
             const y1 = Math.min(startPt.current.y, p.y);
             const w2 = Math.abs(p.x - startPt.current.x);
             const h2 = Math.abs(p.y - startPt.current.y);
             setShapes((prev) => prev.map((s) => s.id === pendingShape.current.id ? { ...s, x: x1, y: y1, w: w2, h: h2 } : s));
         }
-        else if (t === "line" || t === "arrow") {
+        else if (t === 'line' || t === 'arrow') {
             setShapes((prev) => prev.map((s) => s.id === pendingShape.current.id
                 ? { ...s, w: Math.abs(p.x - s.x), h: Math.abs(p.y - s.y), x2: p.x, y2: p.y }
                 : s));
@@ -265,9 +343,9 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             drawing.current = false;
             if (pendingShape.current) {
                 const ps = pendingShape.current;
-                if (ps.type !== "polyline" && ps.type !== "text") {
+                if (ps.type !== 'polyline' && ps.type !== 'text') {
                     const minD = 3;
-                    const isTiny = ps.type === "line" || ps.type === "arrow"
+                    const isTiny = ps.type === 'line' || ps.type === 'arrow'
                         ? Math.abs(((_a = ps.x2) !== null && _a !== void 0 ? _a : ps.x) - ps.x) < minD && Math.abs(((_b = ps.y2) !== null && _b !== void 0 ? _b : ps.y) - ps.y) < minD
                         : Math.abs(ps.w) < minD && Math.abs(ps.h) < minD;
                     if (isTiny) {
@@ -282,14 +360,22 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         }
     }, [snap]);
     const onWheel = useCallback((e) => {
-        e.preventDefault();
         setZoom((z) => {
             const n = e.deltaY < 0 ? z * 1.15 : z / 1.15;
             return Math.max(0.1, Math.min(10, n));
         });
     }, []);
+    useEffect(() => {
+        const el = boxRef.current;
+        if (!el) {
+            return;
+        }
+        const handler = (e) => e.preventDefault();
+        el.addEventListener('wheel', handler, { passive: false });
+        return () => el.removeEventListener('wheel', handler);
+    }, []);
     const onDblClick = useCallback(() => {
-        if (tool === "pen" && pendingShape.current) {
+        if (tool === 'pen' && pendingShape.current) {
             snap(shapesRef.current);
             setSelId(pendingShape.current.id);
             pendingShape.current = null;
@@ -298,52 +384,69 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     }, [tool, snap]);
     /* ── shape operations ── */
     const deleteShape = useCallback(() => {
-        if (!selId)
+        if (!selId) {
             return;
+        }
         const next = shapes.filter((s) => s.id !== selId);
         snap(next);
         setShapes(next);
         setSelId(null);
     }, [selId, shapes, snap]);
     const bringToFront = useCallback(() => {
-        if (!selId)
+        if (!selId) {
             return;
+        }
         const next = [...shapes.filter((s) => s.id !== selId), shapes.find((s) => s.id === selId)];
         snap(next);
         setShapes(next);
     }, [selId, shapes, snap]);
     const sendToBack = useCallback(() => {
-        if (!selId)
+        if (!selId) {
             return;
+        }
         const next = [shapes.find((s) => s.id === selId), ...shapes.filter((s) => s.id !== selId)];
         snap(next);
         setShapes(next);
     }, [selId, shapes, snap]);
     const updateSel = useCallback((patch) => {
-        if (!selId)
+        if (!selId) {
             return;
+        }
         setShapes((prev) => prev.map((s) => (s.id === selId ? { ...s, ...patch } : s)));
     }, [selId]);
     /* ── clipboard ── */
     const copyShape = useCallback(() => {
-        if (!selShape)
+        if (!selShape) {
             return;
+        }
         clipboard.current = JSON.parse(JSON.stringify(selShape));
         setHasClipboard(true);
     }, [selShape]);
     const pasteShape = useCallback(() => {
-        if (!clipboard.current)
+        if (!clipboard.current) {
             return;
-        const ns = { ...JSON.parse(JSON.stringify(clipboard.current)), id: sid(), x: clipboard.current.x + 20, y: clipboard.current.y + 20 };
+        }
+        const ns = {
+            ...JSON.parse(JSON.stringify(clipboard.current)),
+            id: sid(),
+            x: clipboard.current.x + 20,
+            y: clipboard.current.y + 20,
+        };
         const next = [...shapes, ns];
         snap(next);
         setShapes(next);
         setSelId(ns.id);
     }, [shapes, snap]);
     const duplicateShape = useCallback(() => {
-        if (!selShape)
+        if (!selShape) {
             return;
-        const ns = { ...JSON.parse(JSON.stringify(selShape)), id: sid(), x: selShape.x + 20, y: selShape.y + 20 };
+        }
+        const ns = {
+            ...JSON.parse(JSON.stringify(selShape)),
+            id: sid(),
+            x: selShape.x + 20,
+            y: selShape.y + 20,
+        };
         const next = [...shapes, ns];
         snap(next);
         setShapes(next);
@@ -351,69 +454,82 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     }, [selShape, shapes, snap]);
     /* ── flip ── */
     const flipH = useCallback(() => {
-        if (!selId || !selShape)
+        if (!selId || !selShape) {
             return;
+        }
         if (selShape.points) {
             const cx = selShape.x + selShape.w / 2;
-            const next = shapes.map((s) => { var _a; return s.id === selId ? { ...s, points: (_a = s.points) === null || _a === void 0 ? void 0 : _a.map((pt) => ({ x: cx * 2 - pt.x, y: pt.y })) } : s; });
+            const next = shapes.map((s) => {
+                var _a;
+                return s.id === selId
+                    ? { ...s, points: (_a = s.points) === null || _a === void 0 ? void 0 : _a.map((pt) => ({ x: cx * 2 - pt.x, y: pt.y })) }
+                    : s;
+            });
             snap(next);
             setShapes(next);
         }
-        else if (selShape.type === "line" || selShape.type === "arrow") {
-            const next = shapes.map((s) => { var _a; return s.id === selId ? { ...s, x: (_a = s.x2) !== null && _a !== void 0 ? _a : s.x, x2: s.x } : s; });
+        else if (selShape.type === 'line' || selShape.type === 'arrow') {
+            const next = shapes.map((s) => { var _a; return (s.id === selId ? { ...s, x: (_a = s.x2) !== null && _a !== void 0 ? _a : s.x, x2: s.x } : s); });
             snap(next);
             setShapes(next);
         }
         else {
             const newRot = selShape.rotation ? -selShape.rotation : 0;
-            const next = shapes.map((s) => s.id === selId ? { ...s, rotation: newRot } : s);
+            const next = shapes.map((s) => (s.id === selId ? { ...s, rotation: newRot } : s));
             snap(next);
             setShapes(next);
         }
     }, [selId, selShape, shapes, snap]);
     const flipV = useCallback(() => {
-        if (!selId || !selShape)
+        if (!selId || !selShape) {
             return;
+        }
         if (selShape.points) {
             const cy = selShape.y + selShape.h / 2;
-            const next = shapes.map((s) => { var _a; return s.id === selId ? { ...s, points: (_a = s.points) === null || _a === void 0 ? void 0 : _a.map((pt) => ({ x: pt.x, y: cy * 2 - pt.y })) } : s; });
+            const next = shapes.map((s) => {
+                var _a;
+                return s.id === selId
+                    ? { ...s, points: (_a = s.points) === null || _a === void 0 ? void 0 : _a.map((pt) => ({ x: pt.x, y: cy * 2 - pt.y })) }
+                    : s;
+            });
             snap(next);
             setShapes(next);
         }
-        else if (selShape.type === "line" || selShape.type === "arrow") {
-            const next = shapes.map((s) => { var _a; return s.id === selId ? { ...s, y: (_a = s.y2) !== null && _a !== void 0 ? _a : s.y, y2: s.y } : s; });
+        else if (selShape.type === 'line' || selShape.type === 'arrow') {
+            const next = shapes.map((s) => { var _a; return (s.id === selId ? { ...s, y: (_a = s.y2) !== null && _a !== void 0 ? _a : s.y, y2: s.y } : s); });
             snap(next);
             setShapes(next);
         }
         else {
             const newRot = selShape.rotation ? (180 - selShape.rotation) % 360 : 180;
-            const next = shapes.map((s) => s.id === selId ? { ...s, rotation: newRot } : s);
+            const next = shapes.map((s) => (s.id === selId ? { ...s, rotation: newRot } : s));
             snap(next);
             setShapes(next);
         }
     }, [selId, selShape, shapes, snap]);
     /* ── alignment ── */
     const alignShapes = useCallback((mode) => {
-        if (!selId || !selShape)
+        if (!selId || !selShape) {
             return;
+        }
         let patch = {};
         switch (mode) {
-            case "left":
+            case 'left':
                 patch = { x: 0 };
                 break;
-            case "right":
+            case 'right':
                 patch = { x: artW - selShape.w };
                 break;
-            case "center":
+            case 'center':
                 patch = { x: (artW - selShape.w) / 2 };
                 break;
-            case "top":
+            case 'top':
                 patch = { y: 0 };
                 break;
-            case "bottom":
+            case 'bottom':
                 patch = { y: artH - selShape.h };
                 break;
-            case "middle":
+            case 'middle':
                 patch = { y: (artH - selShape.h) / 2 };
                 break;
         }
@@ -425,15 +541,17 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     const [boolSecondShape, setBoolSecondShape] = useState(null);
     const applyBoolean = useCallback((operation) => {
         var _a;
-        if (!selId || !boolSecondShape)
+        if (!selId || !boolSecondShape) {
             return;
+        }
         const shapeA = shapes.find((s) => s.id === selId);
         const shapeB = shapes.find((s) => s.id === boolSecondShape);
-        if (!shapeA || !shapeB)
+        if (!shapeA || !shapeB) {
             return;
+        }
         const result = booleanOperation(shapeA, shapeB, operation);
         if (!result) {
-            alert("Boolean operation resulted in empty shape");
+            console.warn('[VectorEditor] Boolean operation resulted in empty shape');
             return;
         }
         // Remove original shapes, add result(s)
@@ -450,13 +568,14 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         setShapes(next);
         setBoolSecondShape(null);
     }, [selId, boolSecondShape, shapes, snap]);
-    const unionShapes = useCallback(() => applyBoolean("union"), [applyBoolean]);
-    const subtractShapes = useCallback(() => applyBoolean("difference"), [applyBoolean]);
-    const intersectShapes = useCallback(() => applyBoolean("intersection"), [applyBoolean]);
-    const excludeShapes = useCallback(() => applyBoolean("exclusion"), [applyBoolean]);
+    const unionShapes = useCallback(() => applyBoolean('union'), [applyBoolean]);
+    const subtractShapes = useCallback(() => applyBoolean('difference'), [applyBoolean]);
+    const intersectShapes = useCallback(() => applyBoolean('intersection'), [applyBoolean]);
+    const excludeShapes = useCallback(() => applyBoolean('exclusion'), [applyBoolean]);
     const outlineStroke = useCallback(() => {
-        if (!selId || !selShape)
+        if (!selId || !selShape) {
             return;
+        }
         const result = flattenToOutline(selShape);
         const next = shapes.map((s) => (s.id === selId ? result : s));
         snap(next);
@@ -468,7 +587,7 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
         try {
             const imported = parseSVGToShapes(raw);
             if (imported.length === 0) {
-                alert("No supported shapes found in SVG.");
+                console.warn('[VectorEditor] No supported shapes found in SVG.');
                 return;
             }
             const next = [...shapes, ...imported];
@@ -477,10 +596,12 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
             setDlgSvg(false);
         }
         catch (e) {
-            alert(e instanceof Error ? e.message : "Failed to parse SVG.");
+            console.warn('[VectorEditor] SVG parse error:', e instanceof Error ? e.message : 'Failed to parse SVG.');
         }
     }, [shapes, snap]);
-    const openFile = useCallback(async (file) => { importSVGString(await file.text()); }, [importSVGString]);
+    const openFile = useCallback(async (file) => {
+        importSVGString(await file.text());
+    }, [importSVGString]);
     /* ── new / reset ── */
     const newCanvas = useCallback(() => {
         snap([]);
@@ -492,17 +613,19 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     }, [snap]);
     /* ── save to library ── */
     const saveToLibrary = useCallback(() => {
-        if (!onSaveToLibrary)
+        if (!onSaveToLibrary) {
             return;
+        }
         const svg = buildSVGString(shapes, artW, artH);
-        const blob = new Blob([svg], { type: "image/svg+xml" });
+        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())
+            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");
+            }
+            onSaveToLibrary(reader.result, name.trim(), 'image/svg+xml');
         };
         reader.readAsDataURL(blob);
     }, [shapes, artW, artH, onSaveToLibrary]);
@@ -514,7 +637,7 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     const exportBMP = useCallback(() => exportBMPFile(shapes, artW, artH), [shapes, artW, artH]);
     /* ── tool switch helper (finishes pen) ── */
     const switchTool = useCallback((newTool) => {
-        if (tool === "pen" && newTool !== "pen" && pendingShape.current) {
+        if (tool === 'pen' && newTool !== 'pen' && pendingShape.current) {
             snap(shapes);
             pendingShape.current = null;
             penPts.current = [];
@@ -525,34 +648,35 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
     useEffect(() => {
         const h = (e) => {
             const t = e.target;
-            if (t.tagName === "INPUT" || t.tagName === "TEXTAREA")
+            if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA') {
                 return;
-            if (e.ctrlKey && e.key === "z") {
+            }
+            if (e.ctrlKey && e.key === 'z') {
                 e.preventDefault();
                 undo();
                 return;
             }
-            if (e.ctrlKey && (e.key === "y" || (e.shiftKey && e.key === "Z"))) {
+            if (e.ctrlKey && (e.key === 'y' || (e.shiftKey && e.key === 'Z'))) {
                 e.preventDefault();
                 redo();
                 return;
             }
-            if (e.ctrlKey && e.key === "c") {
+            if (e.ctrlKey && e.key === 'c') {
                 e.preventDefault();
                 copyShape();
                 return;
             }
-            if (e.ctrlKey && e.key === "v") {
+            if (e.ctrlKey && e.key === 'v') {
                 e.preventDefault();
                 pasteShape();
                 return;
             }
-            if (e.ctrlKey && e.key === "d") {
+            if (e.ctrlKey && e.key === 'd') {
                 e.preventDefault();
                 duplicateShape();
                 return;
             }
-            if (e.key === "Escape") {
+            if (e.key === 'Escape') {
                 if (pendingShape.current) {
                     setShapes((prev) => prev.filter((s) => s.id !== pendingShape.current.id));
                     pendingShape.current = null;
@@ -565,45 +689,111 @@ function useVectorEditor({ artW, artH, onSaveToLibrary }) {
                 return;
             }
             const km = {
-                v: "pointer", r: "rect", u: "roundrect", c: "ellipse", l: "line",
-                a: "arrow", g: "polygon", s: "star", p: "pen", t: "text",
+                v: 'pointer',
+                r: 'rect',
+                u: 'roundrect',
+                c: 'ellipse',
+                l: 'line',
+                a: 'arrow',
+                g: 'polygon',
+                s: 'star',
+                p: 'pen',
+                t: 'text',
             };
             if (km[e.key.toLowerCase()] && !e.ctrlKey && !e.altKey) {
                 setTool(km[e.key.toLowerCase()]);
                 return;
             }
-            if (e.key === "Delete" || e.key === "Backspace")
+            if (e.key === 'Delete' || e.key === 'Backspace') {
                 deleteShape();
+            }
         };
-        window.addEventListener("keydown", h);
-        return () => window.removeEventListener("keydown", h);
+        window.addEventListener('keydown', h);
+        return () => window.removeEventListener('keydown', h);
     }, [undo, redo, deleteShape, copyShape, pasteShape, duplicateShape]);
     /* ── return ── */
     return {
         // state
-        shapes, selId, tool, fillCol, strokeCol, strokeW, fontSize, fontFamily,
-        shapeOpacity, cornerRadius, polygonSides, starPoints2, starInnerRatio,
-        zoom, px, py, dlgSvg, svgText, snapGrid, gridSize, hasClipboard,
+        shapes,
+        selId,
+        tool,
+        fillCol,
+        strokeCol,
+        strokeW,
+        fontSize,
+        fontFamily,
+        shapeOpacity,
+        cornerRadius,
+        polygonSides,
+        starPoints2,
+        starInnerRatio,
+        zoom,
+        px,
+        py,
+        dlgSvg,
+        svgText,
+        snapGrid,
+        gridSize,
+        hasClipboard,
         boolSecondShape,
         // derived
         selShape,
         // setters
-        setTool, setFillCol, setStrokeCol, setStrokeW, setFontSize, setFontFamily,
-        setShapeOpacity, setCornerRadius, setPolygonSides, setStarPoints2, setStarInnerRatio,
-        setZoom, setDlgSvg, setSvgText, setSnapGrid, setGridSize, setSelId,
+        setTool,
+        setFillCol,
+        setStrokeCol,
+        setStrokeW,
+        setFontSize,
+        setFontFamily,
+        setShapeOpacity,
+        setCornerRadius,
+        setPolygonSides,
+        setStarPoints2,
+        setStarInnerRatio,
+        setZoom,
+        setDlgSvg,
+        setSvgText,
+        setSnapGrid,
+        setGridSize,
+        setSelId,
         setBoolSecondShape,
         // refs
-        boxRef, fInp,
+        boxRef,
+        fInp,
         // mouse handlers
-        onDown, onMove, onUp, onWheel, onDblClick,
+        onDown,
+        onMove,
+        onUp,
+        onWheel,
+        onDblClick,
         // actions
-        undo, redo, deleteShape, bringToFront, sendToBack, updateSel,
-        copyShape, pasteShape, duplicateShape,
-        flipH, flipV, alignShapes,
-        unionShapes, subtractShapes, intersectShapes, excludeShapes, outlineStroke,
-        importSVGString, openFile, newCanvas,
-        exportSVG, exportPNG, exportJPG, exportWebP, exportBMP,
-        switchTool, saveToLibrary,
+        undo,
+        redo,
+        deleteShape,
+        bringToFront,
+        sendToBack,
+        updateSel,
+        copyShape,
+        pasteShape,
+        duplicateShape,
+        flipH,
+        flipV,
+        alignShapes,
+        unionShapes,
+        subtractShapes,
+        intersectShapes,
+        excludeShapes,
+        outlineStroke,
+        importSVGString,
+        openFile,
+        newCanvas,
+        exportSVG,
+        exportPNG,
+        exportJPG,
+        exportWebP,
+        exportBMP,
+        switchTool,
+        saveToLibrary,
     };
 }