@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/esm/vector/useVectorEditor.js

@@ -1,905 +1,866 @@
-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';
-import { cloneShapes, sid, snapToGrid } from './vectorEditorTypes.js';
-
-/**
- * useVectorEditor — extracted logic + state for VectorEditor.
- * Keeps every useState / useRef / useCallback / useEffect in a single hook
- * so the component file is pure layout.
- */
+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";
+import { cloneShapes, snapToGrid, sid } from "./vectorEditorTypes.js";
 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);
-    const [fontSize, setFontSize] = useState(24);
-    const [fontFamily, setFontFamily] = useState('sans-serif');
-    const [shapeOpacity, setShapeOpacity] = useState(1);
-    const [cornerRadius, setCornerRadius] = useState(12);
-    const [polygonSides, setPolygonSides] = useState(6);
-    const [starPoints2, setStarPoints2] = useState(5);
-    const [starInnerRatio, setStarInnerRatio] = useState(0.4);
-    const [zoom, setZoom] = useState(1);
-    const [px, setPx] = useState(0);
-    const [py, setPy] = useState(0);
-    const [dlgSvg, setDlgSvg] = useState(false);
-    const [svgText, setSvgText] = useState('');
-    const [snapGrid, setSnapGrid] = useState(false);
-    const [gridSize, setGridSize] = useState(16);
-    const [hasClipboard, setHasClipboard] = useState(false);
-    /* ── refs ── */
-    const boxRef = useRef(null);
-    const drawing = useRef(false);
-    /** Becomes true on first onMove after onDown that exceeds the drag-start threshold.
-     *  When false at onUp we treat the gesture as a click and apply default shape size,
-     *  rather than deleting a zero-sized "pending" shape (the disappearing-shape bug). */
-    const dragStarted = useRef(false);
-    const startPt = useRef({ x: 0, y: 0 });
-    const pendingShape = useRef(null);
-    const penPts = useRef([]);
-    const panning = useRef(false);
-    const panStart = useRef({ mx: 0, my: 0, px: 0, py: 0 });
-    const hist = useRef([]);
-    const hIdx = useRef(-1);
-    const fInp = useRef(null);
-    const clipboard = useRef(null);
-    const shapesRef = useRef([]);
-    shapesRef.current = shapes;
-    /* ── derived ── */
-    const selShape = useMemo(() => shapes.find((s) => s.id === selId) || null, [shapes, selId]);
-    /* ── history ── */
-    const snap = useCallback((s) => {
-        hist.current = hist.current.slice(0, hIdx.current + 1);
-        hist.current.push({ shapes: cloneShapes(s) });
-        if (hist.current.length > 50) {
-            hist.current.shift();
-            hIdx.current--;
-        }
-        hIdx.current = hist.current.length - 1;
-    }, []);
-    useEffect(() => {
-        if (hist.current.length === 0) {
-            snap([]);
-        }
-    }, [snap]);
-    const undo = useCallback(() => {
-        if (hIdx.current <= 0) {
-            return;
-        }
-        hIdx.current--;
-        setShapes(cloneShapes(hist.current[hIdx.current].shapes));
-    }, []);
-    const redo = useCallback(() => {
-        if (hIdx.current >= hist.current.length - 1) {
-            return;
-        }
-        hIdx.current++;
-        setShapes(cloneShapes(hist.current[hIdx.current].shapes));
-    }, []);
-    /* ── coordinate transform ── */
-    const scr2art = useCallback((cx, cy) => {
-        var _a;
-        const r = (_a = boxRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!r) {
-            return { x: 0, y: 0 };
-        }
-        // The <svg> fills the box and its viewBox fits the artboard into it (xMidYMid meet), so one
-        // art unit is `fit` screen px before the zoom. Dividing by the zoom alone put every shape
-        // closer to the centre than the pointer — off by half in the 900×520 showcase demo.
-        const fit = Math.min(r.width / artW, r.height / artH) || 1;
-        let x = (cx - r.left - r.width / 2 - px) / (zoom * fit) + artW / 2;
-        let y = (cy - r.top - r.height / 2 - py) / (zoom * fit) + artH / 2;
-        if (snapGrid) {
-            x = snapToGrid(x, gridSize);
-            y = snapToGrid(y, gridSize);
-        }
-        return { x, y };
-    }, [px, py, zoom, artW, artH, snapGrid, gridSize]);
-    /* ── mouse handlers ── */
-    const onDown = useCallback((e) => {
-        e.preventDefault();
-        if (e.button === 1) {
-            panning.current = true;
-            panStart.current = { mx: e.clientX, my: e.clientY, px, py };
-            return;
-        }
-        if (e.button !== 0) {
-            return;
-        }
-        dragStarted.current = false;
-        const p = scr2art(e.clientX, e.clientY);
-        const defaultBase = {
-            fill: fillCol,
-            stroke: strokeCol,
-            strokeWidth: strokeW,
-            opacity: shapeOpacity,
-            rotation: 0,
-        };
-        if (tool === 'pointer') {
-            let hit = null;
-            for (let i = shapes.length - 1; i >= 0; i--) {
-                const s = shapes[i];
-                if (s.locked || s.hidden) {
-                    continue;
-                }
-                if (p.x >= s.x && p.y >= s.y && p.x <= s.x + s.w && p.y <= s.y + s.h) {
-                    hit = s.id;
-                    break;
-                }
-            }
-            setSelId(hit);
-            if (hit) {
-                drawing.current = true;
-                startPt.current = p;
-            }
-            return;
-        }
-        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,
-                };
-                pendingShape.current = ns;
-                setShapes((prev) => [...prev, ns]);
-            }
-            else {
-                const pts = [...penPts.current];
-                const xs = pts.map((pp) => pp.x);
-                const ys = pts.map((pp) => pp.y);
-                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;
-                }));
-            }
-            return;
-        }
-        if (tool === 'text') {
-            // 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') {
-            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,
-            };
-            drawing.current = true;
-            startPt.current = p;
-            pendingShape.current = ns;
-            setShapes((prev) => [...prev, ns]);
-            return;
-        }
-        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,
-            };
-            drawing.current = true;
-            startPt.current = p;
-            pendingShape.current = ns;
-            setShapes((prev) => [...prev, ns]);
-            return;
-        }
-        // 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 ns = {
+  const { pendingAsk, ask } = useEditorAsk();
+  const [shapes, setShapes] = useState([]);
+  const [selId, setSelId] = useState(null);
+  const [tool, setTool] = useState("pointer");
+  const [fillCol, setFillCol] = useState("#5566cc");
+  const [strokeCol, setStrokeCol] = useState("#000000");
+  const [strokeW, setStrokeW] = useState(2);
+  const [fontSize, setFontSize] = useState(24);
+  const [fontFamily, setFontFamily] = useState("sans-serif");
+  const [shapeOpacity, setShapeOpacity] = useState(1);
+  const [cornerRadius, setCornerRadius] = useState(12);
+  const [polygonSides, setPolygonSides] = useState(6);
+  const [starPoints2, setStarPoints2] = useState(5);
+  const [starInnerRatio, setStarInnerRatio] = useState(0.4);
+  const [zoom, setZoom] = useState(1);
+  const [px, setPx] = useState(0);
+  const [py, setPy] = useState(0);
+  const [dlgSvg, setDlgSvg] = useState(false);
+  const [svgText, setSvgText] = useState("");
+  const [snapGrid, setSnapGrid] = useState(false);
+  const [gridSize, setGridSize] = useState(16);
+  const [hasClipboard, setHasClipboard] = useState(false);
+  const boxRef = useRef(null);
+  const drawing = useRef(false);
+  const dragStarted = useRef(false);
+  const startPt = useRef({ x: 0, y: 0 });
+  const pendingShape = useRef(null);
+  const penPts = useRef([]);
+  const panning = useRef(false);
+  const panStart = useRef({ mx: 0, my: 0, px: 0, py: 0 });
+  const hist = useRef([]);
+  const hIdx = useRef(-1);
+  const fInp = useRef(null);
+  const clipboard = useRef(null);
+  const shapesRef = useRef([]);
+  shapesRef.current = shapes;
+  const selShape = useMemo(() => shapes.find((s) => s.id === selId) || null, [shapes, selId]);
+  const snap = useCallback((s) => {
+    hist.current = hist.current.slice(0, hIdx.current + 1);
+    hist.current.push({ shapes: cloneShapes(s) });
+    if (hist.current.length > 50) {
+      hist.current.shift();
+      hIdx.current--;
+    }
+    hIdx.current = hist.current.length - 1;
+  }, []);
+  useEffect(() => {
+    if (hist.current.length === 0) {
+      snap([]);
+    }
+  }, [snap]);
+  const undo = useCallback(() => {
+    if (hIdx.current <= 0) {
+      return;
+    }
+    hIdx.current--;
+    setShapes(cloneShapes(hist.current[hIdx.current].shapes));
+  }, []);
+  const redo = useCallback(() => {
+    if (hIdx.current >= hist.current.length - 1) {
+      return;
+    }
+    hIdx.current++;
+    setShapes(cloneShapes(hist.current[hIdx.current].shapes));
+  }, []);
+  const scr2art = useCallback(
+    (cx, cy) => {
+      const r = boxRef.current?.getBoundingClientRect();
+      if (!r) {
+        return { x: 0, y: 0 };
+      }
+      const fit = Math.min(r.width / artW, r.height / artH) || 1;
+      let x = (cx - r.left - r.width / 2 - px) / (zoom * fit) + artW / 2;
+      let y = (cy - r.top - r.height / 2 - py) / (zoom * fit) + artH / 2;
+      if (snapGrid) {
+        x = snapToGrid(x, gridSize);
+        y = snapToGrid(y, gridSize);
+      }
+      return { x, y };
+    },
+    [px, py, zoom, artW, artH, snapGrid, gridSize]
+  );
+  const onDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (e.button === 1) {
+        panning.current = true;
+        panStart.current = { mx: e.clientX, my: e.clientY, px, py };
+        return;
+      }
+      if (e.button !== 0) {
+        return;
+      }
+      dragStarted.current = false;
+      const p = scr2art(e.clientX, e.clientY);
+      const defaultBase = {
+        fill: fillCol,
+        stroke: strokeCol,
+        strokeWidth: strokeW,
+        opacity: shapeOpacity,
+        rotation: 0
+      };
+      if (tool === "pointer") {
+        let hit = null;
+        for (let i = shapes.length - 1; i >= 0; i--) {
+          const s = shapes[i];
+          if (s.locked || s.hidden) {
+            continue;
+          }
+          if (p.x >= s.x && p.y >= s.y && p.x <= s.x + s.w && p.y <= s.y + s.h) {
+            hit = s.id;
+            break;
+          }
+        }
+        setSelId(hit);
+        if (hit) {
+          drawing.current = true;
+          startPt.current = p;
+        }
+        return;
+      }
+      if (tool === "pen") {
+        penPts.current.push(p);
+        if (penPts.current.length === 1) {
+          const ns2 = {
             id: sid(),
-            type: shapeType,
+            type: "polyline",
             x: p.x,
             y: p.y,
             w: 0,
             h: 0,
-            x2: p.x,
-            y2: p.y,
-            fill: isLineLike ? 'none' : fillCol,
+            points: [{ x: p.x, y: p.y }],
+            fill: "none",
             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,
-        ask,
-    ]);
-    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) {
-            return;
-        }
-        const p = scr2art(e.clientX, e.clientY);
-        // Treat the gesture as a drag only once movement exceeds the threshold —
-        // protects polygon/star/rect/ellipse from being shrunk to zero by the very
-        // first mousemove event after a click that landed on the same screen pixel.
-        if (!dragStarted.current) {
-            const dxs = p.x - startPt.current.x;
-            const dys = p.y - startPt.current.y;
-            if (Math.hypot(dxs, dys) < 2) {
-                return;
-            }
-            dragStarted.current = true;
-        }
-        if (tool === 'pointer' && selId) {
-            const dx = p.x - startPt.current.x;
-            const dy = p.y - startPt.current.y;
-            startPt.current = p;
-            setShapes((prev) => prev.map((s) => {
-                var _a;
-                return s.id === selId
-                    ? {
-                        ...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 })),
-                    }
-                    : s;
-            }));
-            return;
-        }
-        const pending = pendingShape.current;
-        if (!pending) {
-            return;
-        }
-        // The pending shape's ref follows the drag as well. onUp sizes the result from the ref,
-        // which kept the 0×0 shape of the press — so every dragged rectangle, ellipse, line and
-        // arrow counted as "tiny" and was deleted on release: nothing appeared on the canvas.
-        const resize = (patch) => {
-            pendingShape.current = { ...pending, ...patch };
-            setShapes((prev) => prev.map((s) => (s.id === pending.id ? { ...s, ...patch } : s)));
-        };
-        const t = pending.type;
-        if (t === 'polygon' || t === 'star') {
-            const cx = startPt.current.x;
-            const cy = startPt.current.y;
-            const dx = p.x - cx;
-            const dy = p.y - cy;
-            const r2 = Math.sqrt(dx * dx + dy * dy);
-            resize({ x: cx - r2, y: cy - r2, w: r2 * 2, h: r2 * 2 });
-            return;
-        }
-        if (t === 'rect' || t === 'roundrect' || t === 'ellipse') {
-            resize({
-                x: Math.min(startPt.current.x, p.x),
-                y: Math.min(startPt.current.y, p.y),
-                w: Math.abs(p.x - startPt.current.x),
-                h: Math.abs(p.y - startPt.current.y),
-            });
-        }
-        else if (t === 'line' || t === 'arrow') {
-            resize({ w: Math.abs(p.x - pending.x), h: Math.abs(p.y - pending.y), x2: p.x, y2: p.y });
-        }
-    }, [tool, scr2art, selId]);
-    const onUp = useCallback(() => {
-        var _a, _b;
-        if (panning.current) {
-            panning.current = false;
-            return;
-        }
-        if (drawing.current) {
-            drawing.current = false;
-            if (pendingShape.current) {
-                const ps = pendingShape.current;
-                // Click without drag → apply a sensible default size so the user actually
-                // sees the shape they just placed (the disappearing-shape fix).
-                if (!dragStarted.current && ps.type !== 'polyline' && ps.type !== 'text') {
-                    const cx = startPt.current.x;
-                    const cy = startPt.current.y;
-                    let patch;
-                    if (ps.type === 'line' || ps.type === 'arrow') {
-                        patch = { x: cx, y: cy, w: 80, h: 0, x2: cx + 80, y2: cy };
-                    }
-                    else if (ps.type === 'polygon' || ps.type === 'star') {
-                        const r = 40;
-                        patch = { x: cx - r, y: cy - r, w: r * 2, h: r * 2 };
-                    }
-                    else {
-                        // rect / roundrect / ellipse — 64×64 centered on click point
-                        const s = 64;
-                        patch = { x: cx - s / 2, y: cy - s / 2, w: s, h: s };
-                    }
-                    const psId = ps.id;
-                    setShapes((prev) => prev.map((s) => (s.id === psId ? { ...s, ...patch } : s)));
-                    snap(shapesRef.current.map((s) => (s.id === psId ? { ...s, ...patch } : s)));
-                    setSelId(psId);
-                    pendingShape.current = null;
-                    dragStarted.current = false;
-                    return;
-                }
-                // Real drag — still guard against zero-sized result (e.g. snap-to-grid collisions)
-                const minD = 3;
-                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) {
-                    setShapes((prev) => prev.filter((s) => s.id !== ps.id));
-                    pendingShape.current = null;
-                    dragStarted.current = false;
-                    return;
-                }
-                // the ref holds the final geometry even when the last move has not rendered yet
-                snap(shapesRef.current.map((s) => (s.id === ps.id ? ps : s)));
-                setSelId(ps.id);
-                pendingShape.current = null;
-                dragStarted.current = false;
-            }
-        }
-    }, [snap]);
-    const onWheel = useCallback((e) => {
-        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) {
-            snap(shapesRef.current);
-            setSelId(pendingShape.current.id);
-            pendingShape.current = null;
-            penPts.current = [];
-        }
-    }, [tool, snap]);
-    /* ── shape operations ── */
-    const deleteShape = useCallback(() => {
-        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) {
-            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) {
-            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) {
-            return;
-        }
-        setShapes((prev) => prev.map((s) => (s.id === selId ? { ...s, ...patch } : s)));
-    }, [selId]);
-    /* ── clipboard ── */
-    const copyShape = useCallback(() => {
-        if (!selShape) {
-            return;
-        }
-        clipboard.current = JSON.parse(JSON.stringify(selShape));
-        setHasClipboard(true);
-    }, [selShape]);
-    const pasteShape = useCallback(() => {
-        if (!clipboard.current) {
-            return;
-        }
-        const ns = {
-            ...JSON.parse(JSON.stringify(clipboard.current)),
+            rotation: 0
+          };
+          pendingShape.current = ns2;
+          setShapes((prev) => [...prev, ns2]);
+        } else {
+          const pts = [...penPts.current];
+          const xs = pts.map((pp) => pp.x);
+          const ys = pts.map((pp) => pp.y);
+          setShapes(
+            (prev) => prev.map(
+              (s) => s.id === pendingShape.current?.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
+            )
+          );
+        }
+        return;
+      }
+      if (tool === "text") {
+        void ask("prompt", "Enter text:", "Hello").then((txt) => {
+          if (!txt) {
+            return;
+          }
+          const ns2 = {
             id: sid(),
-            x: clipboard.current.x + 20,
-            y: clipboard.current.y + 20,
+            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, ns2];
+          snap(next);
+          setShapes(next);
+          setSelId(ns2.id);
+        });
+        return;
+      }
+      if (tool === "polygon") {
+        const r2 = 40;
+        const ns2 = {
+          id: sid(),
+          type: "polygon",
+          x: p.x - r2,
+          y: p.y - r2,
+          w: r2 * 2,
+          h: r2 * 2,
+          ...defaultBase,
+          sides: polygonSides
         };
-        const next = [...shapes, ns];
-        snap(next);
-        setShapes(next);
-        setSelId(ns.id);
-    }, [shapes, snap]);
-    const duplicateShape = useCallback(() => {
-        if (!selShape) {
-            return;
-        }
-        const ns = {
-            ...JSON.parse(JSON.stringify(selShape)),
-            id: sid(),
-            x: selShape.x + 20,
-            y: selShape.y + 20,
+        drawing.current = true;
+        startPt.current = p;
+        pendingShape.current = ns2;
+        setShapes((prev) => [...prev, ns2]);
+        return;
+      }
+      if (tool === "star") {
+        const r2 = 40;
+        const ns2 = {
+          id: sid(),
+          type: "star",
+          x: p.x - r2,
+          y: p.y - r2,
+          w: r2 * 2,
+          h: r2 * 2,
+          ...defaultBase,
+          sides: starPoints2,
+          innerRadius: starInnerRatio
         };
-        const next = [...shapes, ns];
-        snap(next);
-        setShapes(next);
-        setSelId(ns.id);
-    }, [selShape, shapes, snap]);
-    /* ── flip ── */
-    const flipH = useCallback(() => {
-        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;
-            });
-            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); });
-            snap(next);
-            setShapes(next);
-        }
-        else {
-            const newRot = selShape.rotation ? -selShape.rotation : 0;
-            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) {
-            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;
-            });
-            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); });
-            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));
-            snap(next);
-            setShapes(next);
-        }
-    }, [selId, selShape, shapes, snap]);
-    /* ── alignment ── */
-    const alignShapes = useCallback((mode) => {
-        if (!selId || !selShape) {
-            return;
-        }
-        let patch = {};
-        switch (mode) {
-            case 'left':
-                patch = { x: 0 };
-                break;
-            case 'right':
-                patch = { x: artW - selShape.w };
-                break;
-            case 'center':
-                patch = { x: (artW - selShape.w) / 2 };
-                break;
-            case 'top':
-                patch = { y: 0 };
-                break;
-            case 'bottom':
-                patch = { y: artH - selShape.h };
-                break;
-            case 'middle':
-                patch = { y: (artH - selShape.h) / 2 };
-                break;
-        }
-        const next = shapes.map((s) => (s.id === selId ? { ...s, ...patch } : s));
-        snap(next);
-        setShapes(next);
-    }, [selId, selShape, shapes, snap, artW, artH]);
-    /* ── animations (per shape id) ── */
-    const [animations, setAnimations] = useState({});
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [previewTime, setPreviewTime] = useState(0);
-    const setShapeAnimation = useCallback((shapeId, anim) => {
-        setAnimations((prev) => {
-            const next = { ...prev };
-            if (anim) {
-                next[shapeId] = anim;
-            }
-            else {
-                delete next[shapeId];
-            }
-            return next;
+        drawing.current = true;
+        startPt.current = p;
+        pendingShape.current = ns2;
+        setShapes((prev) => [...prev, ns2]);
+        return;
+      }
+      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 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 : void 0
+      };
+      pendingShape.current = ns;
+      setShapes((prev) => [...prev, ns]);
+    },
+    [
+      tool,
+      shapes,
+      scr2art,
+      px,
+      py,
+      fillCol,
+      strokeCol,
+      strokeW,
+      fontSize,
+      fontFamily,
+      snap,
+      shapeOpacity,
+      polygonSides,
+      starPoints2,
+      starInnerRatio,
+      cornerRadius,
+      ask
+    ]
+  );
+  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) {
+        return;
+      }
+      const p = scr2art(e.clientX, e.clientY);
+      if (!dragStarted.current) {
+        const dxs = p.x - startPt.current.x;
+        const dys = p.y - startPt.current.y;
+        if (Math.hypot(dxs, dys) < 2) {
+          return;
+        }
+        dragStarted.current = true;
+      }
+      if (tool === "pointer" && selId) {
+        const dx = p.x - startPt.current.x;
+        const dy = p.y - startPt.current.y;
+        startPt.current = p;
+        setShapes(
+          (prev) => prev.map(
+            (s) => s.id === selId ? {
+              ...s,
+              x: s.x + dx,
+              y: s.y + dy,
+              x2: s.x2 != null ? s.x2 + dx : void 0,
+              y2: s.y2 != null ? s.y2 + dy : void 0,
+              points: s.points?.map((pt) => ({ x: pt.x + dx, y: pt.y + dy }))
+            } : s
+          )
+        );
+        return;
+      }
+      const pending = pendingShape.current;
+      if (!pending) {
+        return;
+      }
+      const resize = (patch) => {
+        pendingShape.current = { ...pending, ...patch };
+        setShapes((prev) => prev.map((s) => s.id === pending.id ? { ...s, ...patch } : s));
+      };
+      const t = pending.type;
+      if (t === "polygon" || t === "star") {
+        const cx = startPt.current.x;
+        const cy = startPt.current.y;
+        const dx = p.x - cx;
+        const dy = p.y - cy;
+        const r2 = Math.sqrt(dx * dx + dy * dy);
+        resize({ x: cx - r2, y: cy - r2, w: r2 * 2, h: r2 * 2 });
+        return;
+      }
+      if (t === "rect" || t === "roundrect" || t === "ellipse") {
+        resize({
+          x: Math.min(startPt.current.x, p.x),
+          y: Math.min(startPt.current.y, p.y),
+          w: Math.abs(p.x - startPt.current.x),
+          h: Math.abs(p.y - startPt.current.y)
         });
-    }, []);
-    useEffect(() => {
-        if (!isPlaying) {
-            return;
-        }
-        let raf = 0;
-        const start = performance.now() - previewTime;
-        const tick = (now) => {
-            setPreviewTime(now - start);
-            raf = requestAnimationFrame(tick);
-        };
-        raf = requestAnimationFrame(tick);
-        return () => cancelAnimationFrame(raf);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isPlaying]);
-    /* ── boolean operations ── */
-    const [boolSecondShape, setBoolSecondShape] = useState(null);
-    const applyBoolean = useCallback((operation) => {
-        var _a;
-        if (!selId || !boolSecondShape) {
-            return;
-        }
-        const shapeA = shapes.find((s) => s.id === selId);
-        const shapeB = shapes.find((s) => s.id === boolSecondShape);
-        if (!shapeA || !shapeB) {
-            return;
-        }
-        const result = booleanOperation(shapeA, shapeB, operation);
-        if (!result) {
-            console.warn('[VectorEditor] Boolean operation resulted in empty shape');
-            return;
-        }
-        // Remove original shapes, add result(s)
-        let next = shapes.filter((s) => s.id !== selId && s.id !== boolSecondShape);
-        if (Array.isArray(result)) {
-            next = [...next, ...result];
-            setSelId(((_a = result[0]) === null || _a === void 0 ? void 0 : _a.id) || null);
-        }
-        else {
-            next = [...next, result];
-            setSelId(result.id);
-        }
-        snap(next);
-        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 outlineStroke = useCallback(() => {
-        if (!selId || !selShape) {
-            return;
-        }
-        const result = flattenToOutline(selShape);
-        const next = shapes.map((s) => (s.id === selId ? result : s));
+      } else if (t === "line" || t === "arrow") {
+        resize({ w: Math.abs(p.x - pending.x), h: Math.abs(p.y - pending.y), x2: p.x, y2: p.y });
+      }
+    },
+    [tool, scr2art, selId]
+  );
+  const onUp = useCallback(() => {
+    if (panning.current) {
+      panning.current = false;
+      return;
+    }
+    if (drawing.current) {
+      drawing.current = false;
+      if (pendingShape.current) {
+        const ps = pendingShape.current;
+        if (!dragStarted.current && ps.type !== "polyline" && ps.type !== "text") {
+          const cx = startPt.current.x;
+          const cy = startPt.current.y;
+          let patch;
+          if (ps.type === "line" || ps.type === "arrow") {
+            patch = { x: cx, y: cy, w: 80, h: 0, x2: cx + 80, y2: cy };
+          } else if (ps.type === "polygon" || ps.type === "star") {
+            const r = 40;
+            patch = { x: cx - r, y: cy - r, w: r * 2, h: r * 2 };
+          } else {
+            const s = 64;
+            patch = { x: cx - s / 2, y: cy - s / 2, w: s, h: s };
+          }
+          const psId = ps.id;
+          setShapes((prev) => prev.map((s) => s.id === psId ? { ...s, ...patch } : s));
+          snap(shapesRef.current.map((s) => s.id === psId ? { ...s, ...patch } : s));
+          setSelId(psId);
+          pendingShape.current = null;
+          dragStarted.current = false;
+          return;
+        }
+        const minD = 3;
+        const isTiny = ps.type === "line" || ps.type === "arrow" ? Math.abs((ps.x2 ?? ps.x) - ps.x) < minD && Math.abs((ps.y2 ?? ps.y) - ps.y) < minD : Math.abs(ps.w) < minD && Math.abs(ps.h) < minD;
+        if (isTiny) {
+          setShapes((prev) => prev.filter((s) => s.id !== ps.id));
+          pendingShape.current = null;
+          dragStarted.current = false;
+          return;
+        }
+        snap(shapesRef.current.map((s) => s.id === ps.id ? ps : s));
+        setSelId(ps.id);
+        pendingShape.current = null;
+        dragStarted.current = false;
+      }
+    }
+  }, [snap]);
+  const onWheel = useCallback((e) => {
+    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) {
+      snap(shapesRef.current);
+      setSelId(pendingShape.current.id);
+      pendingShape.current = null;
+      penPts.current = [];
+    }
+  }, [tool, snap]);
+  const deleteShape = useCallback(() => {
+    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) {
+      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) {
+      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) {
+        return;
+      }
+      setShapes((prev) => prev.map((s) => s.id === selId ? { ...s, ...patch } : s));
+    },
+    [selId]
+  );
+  const copyShape = useCallback(() => {
+    if (!selShape) {
+      return;
+    }
+    clipboard.current = JSON.parse(JSON.stringify(selShape));
+    setHasClipboard(true);
+  }, [selShape]);
+  const pasteShape = useCallback(() => {
+    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 next = [...shapes, ns];
+    snap(next);
+    setShapes(next);
+    setSelId(ns.id);
+  }, [shapes, snap]);
+  const duplicateShape = useCallback(() => {
+    if (!selShape) {
+      return;
+    }
+    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);
+    setSelId(ns.id);
+  }, [selShape, shapes, snap]);
+  const flipH = useCallback(() => {
+    if (!selId || !selShape) {
+      return;
+    }
+    if (selShape.points) {
+      const cx = selShape.x + selShape.w / 2;
+      const next = shapes.map(
+        (s) => s.id === selId ? { ...s, points: s.points?.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) => s.id === selId ? { ...s, x: s.x2 ?? 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);
+      snap(next);
+      setShapes(next);
+    }
+  }, [selId, selShape, shapes, snap]);
+  const flipV = useCallback(() => {
+    if (!selId || !selShape) {
+      return;
+    }
+    if (selShape.points) {
+      const cy = selShape.y + selShape.h / 2;
+      const next = shapes.map(
+        (s) => s.id === selId ? { ...s, points: s.points?.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) => s.id === selId ? { ...s, y: s.y2 ?? 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);
+      snap(next);
+      setShapes(next);
+    }
+  }, [selId, selShape, shapes, snap]);
+  const alignShapes = useCallback(
+    (mode) => {
+      if (!selId || !selShape) {
+        return;
+      }
+      let patch = {};
+      switch (mode) {
+        case "left":
+          patch = { x: 0 };
+          break;
+        case "right":
+          patch = { x: artW - selShape.w };
+          break;
+        case "center":
+          patch = { x: (artW - selShape.w) / 2 };
+          break;
+        case "top":
+          patch = { y: 0 };
+          break;
+        case "bottom":
+          patch = { y: artH - selShape.h };
+          break;
+        case "middle":
+          patch = { y: (artH - selShape.h) / 2 };
+          break;
+      }
+      const next = shapes.map((s) => s.id === selId ? { ...s, ...patch } : s);
+      snap(next);
+      setShapes(next);
+    },
+    [selId, selShape, shapes, snap, artW, artH]
+  );
+  const [animations, setAnimations] = useState({});
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [previewTime, setPreviewTime] = useState(0);
+  const setShapeAnimation = useCallback((shapeId, anim) => {
+    setAnimations((prev) => {
+      const next = { ...prev };
+      if (anim) {
+        next[shapeId] = anim;
+      } else {
+        delete next[shapeId];
+      }
+      return next;
+    });
+  }, []);
+  useEffect(() => {
+    if (!isPlaying) {
+      return;
+    }
+    let raf = 0;
+    const start = performance.now() - previewTime;
+    const tick = (now) => {
+      setPreviewTime(now - start);
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [isPlaying]);
+  const [boolSecondShape, setBoolSecondShape] = useState(null);
+  const applyBoolean = useCallback(
+    (operation) => {
+      if (!selId || !boolSecondShape) {
+        return;
+      }
+      const shapeA = shapes.find((s) => s.id === selId);
+      const shapeB = shapes.find((s) => s.id === boolSecondShape);
+      if (!shapeA || !shapeB) {
+        return;
+      }
+      const result = booleanOperation(shapeA, shapeB, operation);
+      if (!result) {
+        console.warn("[VectorEditor] Boolean operation resulted in empty shape");
+        return;
+      }
+      let next = shapes.filter((s) => s.id !== selId && s.id !== boolSecondShape);
+      if (Array.isArray(result)) {
+        next = [...next, ...result];
+        setSelId(result[0]?.id || null);
+      } else {
+        next = [...next, result];
+        setSelId(result.id);
+      }
+      snap(next);
+      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 outlineStroke = useCallback(() => {
+    if (!selId || !selShape) {
+      return;
+    }
+    const result = flattenToOutline(selShape);
+    const next = shapes.map((s) => s.id === selId ? result : s);
+    snap(next);
+    setShapes(next);
+    setSelId(result.id);
+  }, [selId, selShape, shapes, snap]);
+  const importSVGString = useCallback(
+    (raw) => {
+      try {
+        const imported = parseSVGToShapes(raw);
+        if (imported.length === 0) {
+          console.warn("[VectorEditor] No supported shapes found in SVG.");
+          return;
+        }
+        const next = [...shapes, ...imported];
         snap(next);
         setShapes(next);
-        setSelId(result.id);
-    }, [selId, selShape, shapes, snap]);
-    /* ── SVG import ── */
-    const importSVGString = useCallback((raw) => {
-        try {
-            const imported = parseSVGToShapes(raw);
-            if (imported.length === 0) {
-                console.warn('[VectorEditor] No supported shapes found in SVG.');
-                return;
-            }
-            const next = [...shapes, ...imported];
-            snap(next);
-            setShapes(next);
-            setDlgSvg(false);
-        }
-        catch (e) {
-            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]);
-    /* ── new / reset ── */
-    const newCanvas = useCallback(() => {
-        snap([]);
-        setShapes([]);
-        setSelId(null);
-        setZoom(1);
-        setPx(0);
-        setPy(0);
-    }, [snap]);
-    /* ── save to library ── */
-    const saveToLibrary = useCallback(() => {
-        if (!onSaveToLibrary) {
-            return;
-        }
-        const svg = buildSVGString(shapes, artW, artH);
-        const blob = new Blob([svg], { type: 'image/svg+xml' });
-        const reader = new FileReader();
-        reader.onload = () => {
-            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, 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]);
-    const exportJPG = useCallback(() => exportJPGFile(shapes, artW, artH), [shapes, artW, artH]);
-    const exportWebP = useCallback(() => exportWebPFile(shapes, artW, artH), [shapes, artW, artH]);
-    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) {
-            snap(shapes);
-            pendingShape.current = null;
-            penPts.current = [];
-        }
-        setTool(newTool);
-    }, [tool, shapes, snap]);
-    /* ── keyboard ── */
-    useEffect(() => {
-        const h = (e) => {
-            const t = e.target;
-            if (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA') {
-                return;
-            }
-            if (e.ctrlKey && e.key === 'z') {
-                e.preventDefault();
-                undo();
-                return;
-            }
-            if (e.ctrlKey && (e.key === 'y' || (e.shiftKey && e.key === 'Z'))) {
-                e.preventDefault();
-                redo();
-                return;
-            }
-            if (e.ctrlKey && e.key === 'c') {
-                e.preventDefault();
-                copyShape();
-                return;
-            }
-            if (e.ctrlKey && e.key === 'v') {
-                e.preventDefault();
-                pasteShape();
-                return;
-            }
-            if (e.ctrlKey && e.key === 'd') {
-                e.preventDefault();
-                duplicateShape();
-                return;
-            }
-            if (e.key === 'Escape') {
-                if (pendingShape.current) {
-                    setShapes((prev) => prev.filter((s) => s.id !== pendingShape.current.id));
-                    pendingShape.current = null;
-                    drawing.current = false;
-                    penPts.current = [];
-                }
-                else {
-                    setSelId(null);
-                }
-                return;
-            }
-            const km = {
-                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') {
-                deleteShape();
-            }
-        };
-        window.addEventListener('keydown', h);
-        return () => window.removeEventListener('keydown', h);
-    }, [undo, redo, deleteShape, copyShape, pasteShape, duplicateShape]);
-    /* ── return ── */
-    return {
-        // state
-        /** The question the editor waits on; render it with `EditorAskDialog`. */
-        pendingAsk,
-        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,
-        setBoolSecondShape,
-        setShapes,
-        snap,
-        // refs
-        boxRef,
-        fInp,
-        // mouse handlers
-        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,
-        // animations
-        animations,
-        isPlaying,
-        previewTime,
-        setShapeAnimation,
-        setIsPlaying,
-        setPreviewTime,
+        setDlgSvg(false);
+      } catch (e) {
+        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 newCanvas = useCallback(() => {
+    snap([]);
+    setShapes([]);
+    setSelId(null);
+    setZoom(1);
+    setPx(0);
+    setPy(0);
+  }, [snap]);
+  const saveToLibrary = useCallback(() => {
+    if (!onSaveToLibrary) {
+      return;
+    }
+    const svg = buildSVGString(shapes, artW, artH);
+    const blob = new Blob([svg], { type: "image/svg+xml" });
+    const reader = new FileReader();
+    reader.onload = () => {
+      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, ask]);
+  const exportSVG = useCallback(
+    () => exportSVGFile(shapes, artW, artH, animations),
+    [shapes, artW, artH, animations]
+  );
+  const exportPNG = useCallback(() => exportPNGFile(shapes, artW, artH), [shapes, artW, artH]);
+  const exportJPG = useCallback(() => exportJPGFile(shapes, artW, artH), [shapes, artW, artH]);
+  const exportWebP = useCallback(() => exportWebPFile(shapes, artW, artH), [shapes, artW, artH]);
+  const exportBMP = useCallback(() => exportBMPFile(shapes, artW, artH), [shapes, artW, artH]);
+  const switchTool = useCallback(
+    (newTool) => {
+      if (tool === "pen" && newTool !== "pen" && pendingShape.current) {
+        snap(shapes);
+        pendingShape.current = null;
+        penPts.current = [];
+      }
+      setTool(newTool);
+    },
+    [tool, shapes, snap]
+  );
+  useEffect(() => {
+    const h = (e) => {
+      const t = e.target;
+      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+        return;
+      }
+      if (e.ctrlKey && e.key === "z") {
+        e.preventDefault();
+        undo();
+        return;
+      }
+      if (e.ctrlKey && (e.key === "y" || e.shiftKey && e.key === "Z")) {
+        e.preventDefault();
+        redo();
+        return;
+      }
+      if (e.ctrlKey && e.key === "c") {
+        e.preventDefault();
+        copyShape();
+        return;
+      }
+      if (e.ctrlKey && e.key === "v") {
+        e.preventDefault();
+        pasteShape();
+        return;
+      }
+      if (e.ctrlKey && e.key === "d") {
+        e.preventDefault();
+        duplicateShape();
+        return;
+      }
+      if (e.key === "Escape") {
+        if (pendingShape.current) {
+          setShapes((prev) => prev.filter((s) => s.id !== pendingShape.current.id));
+          pendingShape.current = null;
+          drawing.current = false;
+          penPts.current = [];
+        } else {
+          setSelId(null);
+        }
+        return;
+      }
+      const km = {
+        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") {
+        deleteShape();
+      }
     };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [undo, redo, deleteShape, copyShape, pasteShape, duplicateShape]);
+  return {
+    // state
+    /** The question the editor waits on; render it with `EditorAskDialog`. */
+    pendingAsk,
+    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,
+    setBoolSecondShape,
+    setShapes,
+    snap,
+    // refs
+    boxRef,
+    fInp,
+    // mouse handlers
+    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,
+    // animations
+    animations,
+    isPlaying,
+    previewTime,
+    setShapeAnimation,
+    setIsPlaying,
+    setPreviewTime
+  };
 }
-
-export { useVectorEditor };
+export {
+  useVectorEditor
+};