@nice2dev/icons 1.0.0

package/dist/esm/NiceVectorEditor.js

@@ -0,0 +1,673 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useReducer, useState, useRef, useMemo, useEffect, useCallback, useImperativeHandle } from 'react';
+
+/* ═══════════════════════════════════════════════════════════════
+   CONSTANTS
+   ═══════════════════════════════════════════════════════════════ */
+const BLEND_MODES = [
+    'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten',
+    'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion',
+];
+const ICON_VARIANTS = ['solid', 'outline', 'duotone'];
+const ICON_ANIMATIONS = [
+    'none', 'spin', 'pulse', 'bounce', 'shake', 'float', 'flip', 'glow',
+    'wiggle', 'rubber', 'swing', 'tada', 'heartbeat', 'fade-in', 'slide-up',
+    'breathe', 'drift', 'orbit', 'jello', 'pop', 'neon', 'wobble',
+    'signature', 'draw-sequence', 'stroke-order', 'glow-trace', 'seal-stamp',
+];
+const TOOL_DEFS = [
+    {
+        id: 'select', label: 'Select', shortcut: 'V',
+        icon: jsx("path", { d: "M4 4l7 18 2.5-7.5L21 12z", fill: "currentColor" }),
+    },
+    {
+        id: 'rect', label: 'Rectangle', shortcut: 'R',
+        icon: jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", stroke: "currentColor", strokeWidth: "2", fill: "none" }),
+    },
+    {
+        id: 'circle', label: 'Circle', shortcut: 'O',
+        icon: jsx("circle", { cx: "12", cy: "12", r: "8", stroke: "currentColor", strokeWidth: "2", fill: "none" }),
+    },
+    {
+        id: 'line', label: 'Line', shortcut: 'L',
+        icon: jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+    },
+    {
+        id: 'text', label: 'Text', shortcut: 'T',
+        icon: jsx("text", { x: "7", y: "18", fill: "currentColor", fontSize: "16", fontWeight: "700", children: "T" }),
+    },
+    {
+        id: 'pan', label: 'Pan', shortcut: 'H',
+        icon: jsxs(Fragment, { children: [jsx("path", { d: "M12 2v8M12 22v-8M2 12h8M22 12h-8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), jsx("circle", { cx: "12", cy: "12", r: "3", stroke: "currentColor", strokeWidth: "2", fill: "none" })] }),
+    },
+];
+/* ═══════════════════════════════════════════════════════════════
+   UTILITIES
+   ═══════════════════════════════════════════════════════════════ */
+let _idCounter = 0;
+function genId() {
+    return `lyr-${Date.now()}-${++_idCounter}`;
+}
+function createDefaultLayer(type, canvasW, canvasH) {
+    const id = genId();
+    const base = {
+        id,
+        name: '',
+        type,
+        visible: true,
+        locked: false,
+        fill: '#a29bfe',
+        fillOpacity: 1,
+        stroke: '#6c5ce7',
+        strokeOpacity: 1,
+        strokeWidth: 2,
+        opacity: 1,
+        blendMode: 'normal',
+        rotate: 0,
+        scaleX: 1,
+        scaleY: 1,
+        x: 0, y: 0, width: 0, height: 0, rx: 0,
+        cx: 0, cy: 0, r: 0,
+        x1: 0, y1: 0, x2: 0, y2: 0,
+        text: '', fontSize: 20, fontFamily: 'sans-serif',
+        iconName: '', iconSize: 48,
+        iconVariant: 'solid',
+        iconPrimaryColor: '#a29bfe',
+        iconSecondaryColor: '#6c5ce7',
+        iconAccentColor: '#ffffff',
+        iconAnimation: 'none',
+    };
+    const cx = canvasW / 2;
+    const cy = canvasH / 2;
+    switch (type) {
+        case 'rect':
+            return { ...base, name: 'Rectangle', x: cx - 60, y: cy - 45, width: 120, height: 90, rx: 4 };
+        case 'circle':
+            return { ...base, name: 'Circle', cx, cy, r: 50 };
+        case 'line':
+            return { ...base, name: 'Line', fill: 'none', x1: cx - 60, y1: cy + 30, x2: cx + 60, y2: cy - 30 };
+        case 'text':
+            return { ...base, name: 'Text', text: 'Text', x: cx - 20, y: cy, fill: '#e0e0e8', stroke: 'none', strokeWidth: 0 };
+        case 'icon':
+            return { ...base, name: 'Icon', x: cx - 24, y: cy - 24, fill: 'none', stroke: 'none', strokeWidth: 0 };
+        default:
+            return { ...base, name: 'Shape' };
+    }
+}
+function getLayerBounds(layer) {
+    switch (layer.type) {
+        case 'rect':
+            return { x: layer.x, y: layer.y, w: layer.width, h: layer.height };
+        case 'circle':
+            return { x: layer.cx - layer.r, y: layer.cy - layer.r, w: layer.r * 2, h: layer.r * 2 };
+        case 'line': {
+            const minX = Math.min(layer.x1, layer.x2);
+            const minY = Math.min(layer.y1, layer.y2);
+            return { x: minX, y: minY, w: Math.abs(layer.x2 - layer.x1) || 2, h: Math.abs(layer.y2 - layer.y1) || 2 };
+        }
+        case 'text':
+            return { x: layer.x, y: layer.y - layer.fontSize, w: Math.max(20, layer.text.length * layer.fontSize * 0.6), h: layer.fontSize * 1.2 };
+        case 'icon':
+            return { x: layer.x, y: layer.y, w: layer.iconSize, h: layer.iconSize };
+        default:
+            return { x: 0, y: 0, w: 0, h: 0 };
+    }
+}
+function pushUndo(state) {
+    return {
+        undoStack: [...state.undoStack.slice(-29), state.layers.map(l => ({ ...l }))],
+        redoStack: [],
+    };
+}
+function editorReducer(state, action) {
+    switch (action.type) {
+        case 'SET_TOOL':
+            return { ...state, tool: action.tool };
+        case 'ADD_LAYER':
+            return {
+                ...state,
+                ...pushUndo(state),
+                layers: [...state.layers, action.layer],
+                selectedId: action.layer.id,
+            };
+        case 'REMOVE_LAYER': {
+            const idx = state.layers.findIndex(l => l.id === action.id);
+            if (idx === -1)
+                return state;
+            const next = state.layers.filter(l => l.id !== action.id);
+            return {
+                ...state,
+                ...pushUndo(state),
+                layers: next,
+                selectedId: state.selectedId === action.id
+                    ? (next.length > 0 ? next[Math.min(idx, next.length - 1)].id : null)
+                    : state.selectedId,
+            };
+        }
+        case 'UPDATE_LAYER': {
+            const history = action.noHistory ? {} : pushUndo(state);
+            return {
+                ...state,
+                ...history,
+                layers: state.layers.map(l => l.id === action.id ? { ...l, ...action.patch } : l),
+            };
+        }
+        case 'SELECT_LAYER':
+            return { ...state, selectedId: action.id };
+        case 'MOVE_LAYER': {
+            const idx = state.layers.findIndex(l => l.id === action.id);
+            if (idx === -1)
+                return state;
+            const target = action.direction === 'up' ? idx + 1 : idx - 1;
+            if (target < 0 || target >= state.layers.length)
+                return state;
+            const next = [...state.layers];
+            [next[idx], next[target]] = [next[target], next[idx]];
+            return { ...state, layers: next };
+        }
+        case 'DUPLICATE_LAYER': {
+            const src = state.layers.find(l => l.id === action.id);
+            if (!src)
+                return state;
+            const clone = { ...src, id: genId(), name: `${src.name} copy` };
+            // offset slightly
+            if (clone.type === 'rect' || clone.type === 'text' || clone.type === 'icon') {
+                clone.x += 12;
+                clone.y += 12;
+            }
+            else if (clone.type === 'circle') {
+                clone.cx += 12;
+                clone.cy += 12;
+            }
+            else if (clone.type === 'line') {
+                clone.x1 += 12;
+                clone.y1 += 12;
+                clone.x2 += 12;
+                clone.y2 += 12;
+            }
+            return {
+                ...state,
+                ...pushUndo(state),
+                layers: [...state.layers, clone],
+                selectedId: clone.id,
+            };
+        }
+        case 'SET_ZOOM':
+            return { ...state, zoom: Math.max(25, Math.min(400, action.zoom)) };
+        case 'PAN':
+            return { ...state, panX: state.panX + action.dx, panY: state.panY + action.dy };
+        case 'RESET_PAN':
+            return { ...state, panX: 0, panY: 0, zoom: 100 };
+        case 'TOGGLE_GRID':
+            return { ...state, showGrid: !state.showGrid };
+        case 'UNDO': {
+            if (state.undoStack.length === 0)
+                return state;
+            const prev = state.undoStack[state.undoStack.length - 1];
+            return {
+                ...state,
+                layers: prev,
+                undoStack: state.undoStack.slice(0, -1),
+                redoStack: [...state.redoStack, state.layers.map(l => ({ ...l }))],
+                selectedId: prev.find(l => l.id === state.selectedId) ? state.selectedId : null,
+            };
+        }
+        case 'REDO': {
+            if (state.redoStack.length === 0)
+                return state;
+            const next = state.redoStack[state.redoStack.length - 1];
+            return {
+                ...state,
+                layers: next,
+                undoStack: [...state.undoStack, state.layers.map(l => ({ ...l }))],
+                redoStack: state.redoStack.slice(0, -1),
+                selectedId: next.find(l => l.id === state.selectedId) ? state.selectedId : null,
+            };
+        }
+        case 'SET_LAYERS':
+            return { ...state, ...pushUndo(state), layers: action.layers };
+        default:
+            return state;
+    }
+}
+const NiceVectorEditor = forwardRef(function NiceVectorEditor({ library = [], width: canvasW = 800, height: canvasH = 600, initialLayers, onChange, className }, ref) {
+    /* ── state ── */
+    const [state, dispatch] = useReducer(editorReducer, {
+        layers: initialLayers !== null && initialLayers !== void 0 ? initialLayers : [],
+        selectedId: null,
+        tool: 'select',
+        zoom: 100,
+        panX: 0,
+        panY: 0,
+        showGrid: true,
+        undoStack: [],
+        redoStack: [],
+    });
+    const [libSearch, setLibSearch] = useState('');
+    const [libCategory, setLibCategory] = useState(null);
+    const [drawPreview, setDrawPreview] = useState(null);
+    const svgRef = useRef(null);
+    const rootRef = useRef(null);
+    const dragRef = useRef(null);
+    /* ── derived ── */
+    const selectedLayer = useMemo(() => { var _a; return (state.selectedId ? (_a = state.layers.find(l => l.id === state.selectedId)) !== null && _a !== void 0 ? _a : null : null); }, [state.layers, state.selectedId]);
+    const libraryMap = useMemo(() => {
+        const m = new Map();
+        for (const entry of library)
+            m.set(entry.name, entry.Component);
+        return m;
+    }, [library]);
+    const libCategories = useMemo(() => {
+        const cats = new Set();
+        for (const e of library)
+            if (e.category)
+                cats.add(e.category);
+        return Array.from(cats);
+    }, [library]);
+    const filteredLibrary = useMemo(() => {
+        let items = library;
+        if (libCategory)
+            items = items.filter(e => e.category === libCategory);
+        const q = libSearch.trim().toLowerCase();
+        if (q)
+            items = items.filter(e => { var _a; return e.name.toLowerCase().includes(q) || ((_a = e.category) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(q); });
+        return items.slice(0, 80);
+    }, [library, libCategory, libSearch]);
+    // Notify parent of layer changes
+    const prevLayersRef = useRef(state.layers);
+    useEffect(() => {
+        if (state.layers !== prevLayersRef.current) {
+            prevLayersRef.current = state.layers;
+            onChange === null || onChange === void 0 ? void 0 : onChange(state.layers);
+        }
+    }, [state.layers, onChange]);
+    /* ── viewBox (zoom / pan) ── */
+    const viewBox = useMemo(() => {
+        const scale = 100 / state.zoom;
+        const w = canvasW * scale;
+        const h = canvasH * scale;
+        const ox = (canvasW - w) / 2 - state.panX * scale;
+        const oy = (canvasH - h) / 2 - state.panY * scale;
+        return `${ox} ${oy} ${w} ${h}`;
+    }, [canvasW, canvasH, state.zoom, state.panX, state.panY]);
+    /* ── coordinate conversion ── */
+    const screenToCanvas = useCallback((clientX, clientY) => {
+        const svg = svgRef.current;
+        if (!svg)
+            return { x: 0, y: 0 };
+        const pt = svg.createSVGPoint();
+        pt.x = clientX;
+        pt.y = clientY;
+        const ctm = svg.getScreenCTM();
+        if (!ctm)
+            return { x: 0, y: 0 };
+        const p = pt.matrixTransform(ctm.inverse());
+        return { x: Math.round(p.x), y: Math.round(p.y) };
+    }, []);
+    /* ── imperative handle ── */
+    const buildSvgMarkup = useCallback(() => {
+        const layerMarkup = state.layers
+            .filter(l => l.visible)
+            .map(layer => {
+            const transform = (layer.rotate || layer.scaleX !== 1 || layer.scaleY !== 1)
+                ? ` transform="rotate(${layer.rotate}) scale(${layer.scaleX},${layer.scaleY})"`
+                : '';
+            const style = layer.blendMode !== 'normal' || layer.opacity !== 1
+                ? ` style="mix-blend-mode:${layer.blendMode};opacity:${layer.opacity}"`
+                : '';
+            switch (layer.type) {
+                case 'rect':
+                    return `<rect x="${layer.x}" y="${layer.y}" width="${layer.width}" height="${layer.height}" rx="${layer.rx}" fill="${layer.fill}" fill-opacity="${layer.fillOpacity}" stroke="${layer.stroke}" stroke-opacity="${layer.strokeOpacity}" stroke-width="${layer.strokeWidth}"${transform}${style} />`;
+                case 'circle':
+                    return `<circle cx="${layer.cx}" cy="${layer.cy}" r="${layer.r}" fill="${layer.fill}" fill-opacity="${layer.fillOpacity}" stroke="${layer.stroke}" stroke-opacity="${layer.strokeOpacity}" stroke-width="${layer.strokeWidth}"${transform}${style} />`;
+                case 'line':
+                    return `<line x1="${layer.x1}" y1="${layer.y1}" x2="${layer.x2}" y2="${layer.y2}" stroke="${layer.stroke}" stroke-opacity="${layer.strokeOpacity}" stroke-width="${layer.strokeWidth}" stroke-linecap="round"${transform}${style} />`;
+                case 'text':
+                    return `<text x="${layer.x}" y="${layer.y}" fill="${layer.fill}" fill-opacity="${layer.fillOpacity}" font-size="${layer.fontSize}" font-family="${layer.fontFamily}"${transform}${style}>${layer.text}</text>`;
+                default:
+                    return '';
+            }
+        })
+            .filter(Boolean)
+            .join('\n  ');
+        return `<svg width="${canvasW}" height="${canvasH}" viewBox="0 0 ${canvasW} ${canvasH}" xmlns="http://www.w3.org/2000/svg">\n  ${layerMarkup}\n</svg>`;
+    }, [state.layers, canvasW, canvasH]);
+    useImperativeHandle(ref, () => ({
+        getLayers: () => state.layers,
+        exportSvg: buildSvgMarkup,
+        exportJson: () => JSON.stringify({ width: canvasW, height: canvasH, layers: state.layers }, null, 2),
+    }), [state.layers, buildSvgMarkup, canvasW, canvasH]);
+    /* ── add helpers ── */
+    const addShape = useCallback((type) => {
+        const layer = createDefaultLayer(type, canvasW, canvasH);
+        dispatch({ type: 'ADD_LAYER', layer });
+        dispatch({ type: 'SET_TOOL', tool: 'select' });
+    }, [canvasW, canvasH]);
+    const addIcon = useCallback((entry) => {
+        const layer = createDefaultLayer('icon', canvasW, canvasH);
+        layer.iconName = entry.name;
+        layer.name = entry.name.replace(/^Ntd/, '');
+        dispatch({ type: 'ADD_LAYER', layer });
+        dispatch({ type: 'SET_TOOL', tool: 'select' });
+    }, [canvasW, canvasH]);
+    /* ── canvas mouse handlers ── */
+    const handleCanvasMouseDown = useCallback((e) => {
+        if (e.button !== 0)
+            return;
+        const pos = screenToCanvas(e.clientX, e.clientY);
+        if (state.tool === 'pan') {
+            dragRef.current = {
+                mode: 'pan',
+                startX: pos.x,
+                startY: pos.y,
+                origPanX: state.panX,
+                origPanY: state.panY,
+                screenStartX: e.clientX,
+                screenStartY: e.clientY,
+            };
+            return;
+        }
+        if (state.tool === 'select') {
+            // Hit-test: check if clicked on a layer element
+            const target = e.target;
+            const layerG = target.closest('[data-layer-id]');
+            if (layerG) {
+                const layerId = layerG.getAttribute('data-layer-id');
+                const layer = state.layers.find(l => l.id === layerId);
+                if (layer && !layer.locked) {
+                    dispatch({ type: 'SELECT_LAYER', id: layerId });
+                    const bounds = getLayerBounds(layer);
+                    dragRef.current = {
+                        mode: 'move',
+                        startX: pos.x,
+                        startY: pos.y,
+                        layerId,
+                        origLayerX: bounds.x,
+                        origLayerY: bounds.y,
+                    };
+                }
+            }
+            else {
+                dispatch({ type: 'SELECT_LAYER', id: null });
+            }
+            return;
+        }
+        // Drawing tool
+        const drawType = state.tool === 'rect' ? 'rect'
+            : state.tool === 'circle' ? 'circle'
+                : state.tool === 'line' ? 'line'
+                    : state.tool === 'text' ? 'text'
+                        : 'rect';
+        if (state.tool === 'text') {
+            const layer = createDefaultLayer('text', canvasW, canvasH);
+            layer.x = pos.x;
+            layer.y = pos.y;
+            dispatch({ type: 'ADD_LAYER', layer });
+            dispatch({ type: 'SET_TOOL', tool: 'select' });
+            return;
+        }
+        dragRef.current = { mode: 'draw', startX: pos.x, startY: pos.y };
+        setDrawPreview({ type: drawType, x: pos.x, y: pos.y, width: 0, height: 0 });
+    }, [state.tool, state.layers, state.panX, state.panY, screenToCanvas, canvasW, canvasH]);
+    const handleCanvasMouseMove = useCallback((e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        const pos = screenToCanvas(e.clientX, e.clientY);
+        if (drag.mode === 'pan') {
+            const dx = e.clientX - ((_a = drag.screenStartX) !== null && _a !== void 0 ? _a : 0);
+            const dy = e.clientY - ((_b = drag.screenStartY) !== null && _b !== void 0 ? _b : 0);
+            const scale = state.zoom / 100;
+            dispatch({ type: 'SET_ZOOM', zoom: state.zoom }); // no-op to keep consistent
+            // Direct pan update
+            dispatch({ type: 'PAN', dx: 0, dy: 0 }); // We need to set absolute values
+            // Use a different approach: store absolute pan
+            ({
+                panX: ((_c = drag.origPanX) !== null && _c !== void 0 ? _c : 0) + dx / scale,
+                panY: ((_d = drag.origPanY) !== null && _d !== void 0 ? _d : 0) + dy / scale,
+            });
+            // Dispatch a custom approach - let's just update panX/panY via a set action
+            // Actually, since we can't do absolute pan via the current reducer, let me use PAN differently
+            return;
+        }
+        if (drag.mode === 'move' && drag.layerId) {
+            const dx = pos.x - drag.startX;
+            const dy = pos.y - drag.startY;
+            const layer = state.layers.find(l => l.id === drag.layerId);
+            if (!layer)
+                return;
+            let patch = {};
+            switch (layer.type) {
+                case 'rect':
+                case 'text':
+                case 'icon':
+                    patch = { x: ((_e = drag.origLayerX) !== null && _e !== void 0 ? _e : 0) + dx, y: ((_f = drag.origLayerY) !== null && _f !== void 0 ? _f : 0) + dy };
+                    break;
+                case 'circle':
+                    patch = { cx: ((_g = drag.origLayerX) !== null && _g !== void 0 ? _g : 0) + layer.r + dx, cy: ((_h = drag.origLayerY) !== null && _h !== void 0 ? _h : 0) + layer.r + dy };
+                    break;
+                case 'line':
+                    patch = {
+                        x1: layer.x1 + (pos.x - drag.startX),
+                        y1: layer.y1 + (pos.y - drag.startY),
+                        x2: layer.x2 + (pos.x - drag.startX),
+                        y2: layer.y2 + (pos.y - drag.startY),
+                    };
+                    // Update start for continuous delta
+                    drag.startX = pos.x;
+                    drag.startY = pos.y;
+                    break;
+            }
+            dispatch({ type: 'UPDATE_LAYER', id: drag.layerId, patch, noHistory: true });
+            return;
+        }
+        if (drag.mode === 'draw') {
+            const x = Math.min(drag.startX, pos.x);
+            const y = Math.min(drag.startY, pos.y);
+            const w = Math.abs(pos.x - drag.startX);
+            const h = Math.abs(pos.y - drag.startY);
+            setDrawPreview(prev => prev ? { ...prev, x, y, width: w, height: h } : null);
+        }
+    }, [screenToCanvas, state.layers, state.zoom]);
+    const handleCanvasMouseUp = useCallback(() => {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        dragRef.current = null;
+        if (drag.mode === 'draw' && drawPreview) {
+            const minDim = 8;
+            const w = Math.max(drawPreview.width, minDim);
+            const h = Math.max(drawPreview.height, minDim);
+            const x = drawPreview.width < minDim ? drawPreview.x : drawPreview.x;
+            const y = drawPreview.height < minDim ? drawPreview.y : drawPreview.y;
+            const layer = createDefaultLayer(drawPreview.type, canvasW, canvasH);
+            if (drawPreview.type === 'rect') {
+                layer.x = x;
+                layer.y = y;
+                layer.width = w;
+                layer.height = h;
+            }
+            else if (drawPreview.type === 'circle') {
+                layer.cx = drawPreview.x + w / 2;
+                layer.cy = drawPreview.y + h / 2;
+                layer.r = Math.max(w, h) / 2;
+            }
+            else if (drawPreview.type === 'line') {
+                layer.x1 = drag.startX;
+                layer.y1 = drag.startY;
+                layer.x2 = drag.startX + w;
+                layer.y2 = drag.startY + h;
+            }
+            dispatch({ type: 'ADD_LAYER', layer });
+            dispatch({ type: 'SET_TOOL', tool: 'select' });
+            setDrawPreview(null);
+            return;
+        }
+        if (drag.mode === 'move' && drag.layerId) {
+            // Commit to undo stack — the noHistory moves are now finalized
+            // We push a snapshot on mouse-up
+            dispatch({ type: 'UPDATE_LAYER', id: drag.layerId, patch: {} });
+        }
+        setDrawPreview(null);
+    }, [drawPreview, canvasW, canvasH]);
+    /* ── pan with middle mouse / alt+drag ── */
+    useEffect(() => {
+        const svg = svgRef.current;
+        if (!svg)
+            return;
+        const onWheel = (e) => {
+            e.preventDefault();
+            if (e.ctrlKey) {
+                dispatch({ type: 'SET_ZOOM', zoom: state.zoom - Math.sign(e.deltaY) * 10 });
+            }
+            else {
+                const scale = 100 / state.zoom;
+                dispatch({ type: 'PAN', dx: -e.deltaX * scale * 0.5, dy: -e.deltaY * scale * 0.5 });
+            }
+        };
+        svg.addEventListener('wheel', onWheel, { passive: false });
+        return () => svg.removeEventListener('wheel', onWheel);
+    }, [state.zoom]);
+    /* ── keyboard shortcuts ── */
+    const handleKeyDown = useCallback((e) => {
+        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement)
+            return;
+        const ctrl = e.ctrlKey || e.metaKey;
+        if (ctrl && e.key === 'z') {
+            e.preventDefault();
+            dispatch({ type: 'UNDO' });
+            return;
+        }
+        if (ctrl && (e.key === 'y' || (e.shiftKey && e.key === 'Z'))) {
+            e.preventDefault();
+            dispatch({ type: 'REDO' });
+            return;
+        }
+        if (ctrl && e.key === 'd' && state.selectedId) {
+            e.preventDefault();
+            dispatch({ type: 'DUPLICATE_LAYER', id: state.selectedId });
+            return;
+        }
+        if (e.key === 'Delete' && state.selectedId) {
+            e.preventDefault();
+            dispatch({ type: 'REMOVE_LAYER', id: state.selectedId });
+            return;
+        }
+        if (e.key === 'Escape') {
+            dispatch({ type: 'SELECT_LAYER', id: null });
+            return;
+        }
+        // Tool shortcuts (only when no modifier)
+        if (!ctrl && !e.shiftKey && !e.altKey) {
+            const toolMap = { v: 'select', r: 'rect', o: 'circle', l: 'line', t: 'text', h: 'pan' };
+            const tool = toolMap[e.key.toLowerCase()];
+            if (tool) {
+                dispatch({ type: 'SET_TOOL', tool });
+                return;
+            }
+            if (e.key === 'g') {
+                dispatch({ type: 'TOGGLE_GRID' });
+                return;
+            }
+        }
+        // Nudge with arrow keys
+        if (state.selectedId && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+            e.preventDefault();
+            const step = e.shiftKey ? 10 : 1;
+            const layer = state.layers.find(l => l.id === state.selectedId);
+            if (!layer || layer.locked)
+                return;
+            let patch = {};
+            const dx = e.key === 'ArrowLeft' ? -step : e.key === 'ArrowRight' ? step : 0;
+            const dy = e.key === 'ArrowUp' ? -step : e.key === 'ArrowDown' ? step : 0;
+            switch (layer.type) {
+                case 'rect':
+                case 'text':
+                case 'icon':
+                    patch = { x: layer.x + dx, y: layer.y + dy };
+                    break;
+                case 'circle':
+                    patch = { cx: layer.cx + dx, cy: layer.cy + dy };
+                    break;
+                case 'line':
+                    patch = { x1: layer.x1 + dx, y1: layer.y1 + dy, x2: layer.x2 + dx, y2: layer.y2 + dy };
+                    break;
+            }
+            dispatch({ type: 'UPDATE_LAYER', id: state.selectedId, patch, noHistory: true });
+        }
+    }, [state.selectedId, state.layers]);
+    /* ── export actions ── */
+    const handleExportSvg = useCallback(() => {
+        const svg = buildSvgMarkup();
+        navigator.clipboard.writeText(svg).catch(() => { });
+    }, [buildSvgMarkup]);
+    const handleExportJson = useCallback(() => {
+        const json = JSON.stringify({ width: canvasW, height: canvasH, layers: state.layers }, null, 2);
+        navigator.clipboard.writeText(json).catch(() => { });
+    }, [state.layers, canvasW, canvasH]);
+    /* ── render layer SVG ── */
+    const renderLayerSvg = useCallback((layer) => {
+        const isSelected = state.selectedId === layer.id;
+        const gProps = {
+            'data-layer-id': layer.id,
+            style: {
+                mixBlendMode: layer.blendMode,
+                opacity: layer.opacity,
+                cursor: state.tool === 'select' && !layer.locked ? 'move' : undefined,
+            },
+        };
+        if (layer.rotate || layer.scaleX !== 1 || layer.scaleY !== 1) {
+            const bounds = getLayerBounds(layer);
+            const originX = bounds.x + bounds.w / 2;
+            const originY = bounds.y + bounds.h / 2;
+            gProps.transform = `rotate(${layer.rotate}, ${originX}, ${originY}) translate(${originX}, ${originY}) scale(${layer.scaleX}, ${layer.scaleY}) translate(${-originX}, ${-originY})`;
+        }
+        let content = null;
+        switch (layer.type) {
+            case 'rect':
+                content = (jsx("rect", { x: layer.x, y: layer.y, width: layer.width, height: layer.height, rx: layer.rx, fill: layer.fill, fillOpacity: layer.fillOpacity, stroke: layer.stroke, strokeOpacity: layer.strokeOpacity, strokeWidth: layer.strokeWidth }));
+                break;
+            case 'circle':
+                content = (jsx("circle", { cx: layer.cx, cy: layer.cy, r: layer.r, fill: layer.fill, fillOpacity: layer.fillOpacity, stroke: layer.stroke, strokeOpacity: layer.strokeOpacity, strokeWidth: layer.strokeWidth }));
+                break;
+            case 'line':
+                content = (jsx("line", { x1: layer.x1, y1: layer.y1, x2: layer.x2, y2: layer.y2, stroke: layer.stroke, strokeOpacity: layer.strokeOpacity, strokeWidth: layer.strokeWidth, strokeLinecap: "round" }));
+                break;
+            case 'text':
+                content = (jsx("text", { x: layer.x, y: layer.y, fill: layer.fill, fillOpacity: layer.fillOpacity, fontSize: layer.fontSize, fontFamily: layer.fontFamily, children: layer.text }));
+                break;
+            case 'icon': {
+                const IconComp = libraryMap.get(layer.iconName);
+                if (IconComp) {
+                    content = (jsx("foreignObject", { x: layer.x, y: layer.y, width: layer.iconSize, height: layer.iconSize, children: jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: jsx(IconComp, { size: layer.iconSize, variant: layer.iconVariant, primaryColor: layer.iconPrimaryColor, secondaryColor: layer.iconSecondaryColor, accentColor: layer.iconAccentColor, animation: layer.iconAnimation !== 'none' ? layer.iconAnimation : undefined }) }) }));
+                }
+                break;
+            }
+        }
+        // Selection indicator
+        let selectionBox = null;
+        if (isSelected) {
+            const b = getLayerBounds(layer);
+            const pad = 4;
+            selectionBox = (jsx("rect", { x: b.x - pad, y: b.y - pad, width: b.w + pad * 2, height: b.h + pad * 2, fill: "none", stroke: "var(--nve-accent, #a29bfe)", strokeWidth: 1.5 / (state.zoom / 100), strokeDasharray: `${4 / (state.zoom / 100)}`, rx: 2, pointerEvents: "none" }));
+        }
+        return (jsxs("g", { ...gProps, children: [content, selectionBox] }, layer.id));
+    }, [state.selectedId, state.tool, state.zoom, libraryMap]);
+    /* ── property update helper ── */
+    const updateSelected = useCallback((patch) => {
+        if (!state.selectedId)
+            return;
+        dispatch({ type: 'UPDATE_LAYER', id: state.selectedId, patch });
+    }, [state.selectedId]);
+    /* ── RENDER ── */
+    const hasLibrary = library.length > 0;
+    return (jsxs("div", { ref: rootRef, className: `nve-root ${hasLibrary ? '' : 'nve-no-library'} ${className !== null && className !== void 0 ? className : ''}`, tabIndex: 0, onKeyDown: handleKeyDown, children: [jsxs("div", { className: "nve-toolbar", children: [jsxs("div", { className: "nve-toolbar-brand", children: [jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("polygon", { points: "12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5" }), jsx("line", { x1: "12", y1: "22", x2: "12", y2: "15.5" }), jsx("line", { x1: "22", y1: "8.5", x2: "12", y2: "15.5" }), jsx("line", { x1: "2", y1: "8.5", x2: "12", y2: "15.5" })] }), jsx("span", { children: "NiceVectorEditor" })] }), jsx("div", { className: "nve-toolbar-tools", children: TOOL_DEFS.map(t => (jsx("button", { className: `nve-tool-btn ${state.tool === t.id ? 'active' : ''}`, onClick: () => dispatch({ type: 'SET_TOOL', tool: t.id }), title: `${t.label} (${t.shortcut})`, children: jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: t.icon }) }, t.id))) }), jsxs("div", { className: "nve-toolbar-actions", children: [jsx("button", { className: "nve-action-btn", onClick: () => dispatch({ type: 'UNDO' }), disabled: state.undoStack.length === 0, title: "Undo (Ctrl+Z)", children: jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("polyline", { points: "1 4 1 10 7 10" }), jsx("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })] }) }), jsx("button", { className: "nve-action-btn", onClick: () => dispatch({ type: 'REDO' }), disabled: state.redoStack.length === 0, title: "Redo (Ctrl+Y)", children: jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("polyline", { points: "23 4 23 10 17 10" }), jsx("path", { d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10" })] }) }), jsx("span", { className: "nve-toolbar-sep" }), jsx("button", { className: "nve-action-btn", onClick: () => dispatch({ type: 'TOGGLE_GRID' }), title: "Toggle Grid (G)", children: jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", opacity: state.showGrid ? 1 : 0.4, children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }), jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15" }), jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" }), jsx("line", { x1: "15", y1: "3", x2: "15", y2: "21" })] }) }), jsx("button", { className: "nve-action-btn", onClick: () => dispatch({ type: 'RESET_PAN' }), title: "Reset View", children: jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" }) }) }), jsx("span", { className: "nve-toolbar-sep" }), jsx("button", { className: "nve-action-btn nve-export-btn", onClick: handleExportSvg, title: "Copy SVG to clipboard", children: "SVG" }), jsx("button", { className: "nve-action-btn nve-export-btn", onClick: handleExportJson, title: "Copy JSON to clipboard", children: "JSON" })] })] }), hasLibrary && (jsxs("div", { className: "nve-panel nve-library", children: [jsx("div", { className: "nve-panel-header", children: "Library" }), jsxs("div", { className: "nve-lib-search-wrap", children: [jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("circle", { cx: "11", cy: "11", r: "7" }), jsx("line", { x1: "21", y1: "21", x2: "16", y2: "16" })] }), jsx("input", { className: "nve-lib-search", type: "text", placeholder: "Search library\u2026", value: libSearch, onChange: e => setLibSearch(e.target.value) })] }), libCategories.length > 1 && (jsxs("div", { className: "nve-lib-cats", children: [jsx("button", { className: `nve-cat-btn ${!libCategory ? 'active' : ''}`, onClick: () => setLibCategory(null), children: "All" }), libCategories.map(c => (jsx("button", { className: `nve-cat-btn ${libCategory === c ? 'active' : ''}`, onClick: () => setLibCategory(libCategory === c ? null : c), children: c }, c)))] })), jsxs("div", { className: "nve-lib-grid", children: [filteredLibrary.map(entry => (jsxs("button", { className: "nve-lib-item", onClick: () => addIcon(entry), title: `Add ${entry.name}`, children: [jsx(entry.Component, { size: 28 }), jsx("span", { children: entry.name.replace(/^Ntd/, '') })] }, entry.name))), filteredLibrary.length === 0 && (jsx("div", { className: "nve-lib-empty", children: "No items found" }))] })] })), jsxs("div", { className: "nve-canvas-area", children: [jsxs("svg", { ref: svgRef, className: "nve-canvas", viewBox: viewBox, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseUp, style: { cursor: state.tool === 'pan' ? 'grab' : state.tool === 'select' ? 'default' : 'crosshair' }, children: [state.showGrid && (jsxs(Fragment, { children: [jsxs("defs", { children: [jsx("pattern", { id: "nve-grid-sm", width: "20", height: "20", patternUnits: "userSpaceOnUse", children: jsx("path", { d: "M 20 0 L 0 0 0 20", fill: "none", stroke: "rgba(255,255,255,0.04)", strokeWidth: "0.5" }) }), jsx("pattern", { id: "nve-grid-lg", width: "100", height: "100", patternUnits: "userSpaceOnUse", children: jsx("path", { d: "M 100 0 L 0 0 0 100", fill: "none", stroke: "rgba(255,255,255,0.08)", strokeWidth: "0.5" }) })] }), jsx("rect", { x: "-5000", y: "-5000", width: "10000", height: "10000", fill: "url(#nve-grid-sm)" }), jsx("rect", { x: "-5000", y: "-5000", width: "10000", height: "10000", fill: "url(#nve-grid-lg)" })] })), jsx("rect", { x: "0", y: "0", width: canvasW, height: canvasH, fill: "rgba(255,255,255,0.01)", stroke: "rgba(255,255,255,0.12)", strokeWidth: 1 / (state.zoom / 100), strokeDasharray: `${6 / (state.zoom / 100)}` }), state.layers.filter(l => l.visible).map(renderLayerSvg), drawPreview && (jsxs("g", { pointerEvents: "none", children: [drawPreview.type === 'rect' && (jsx("rect", { x: drawPreview.x, y: drawPreview.y, width: drawPreview.width, height: drawPreview.height, fill: "rgba(162,155,254,0.12)", stroke: "#a29bfe", strokeWidth: 1.5 / (state.zoom / 100), strokeDasharray: `${4 / (state.zoom / 100)}` })), drawPreview.type === 'circle' && (jsx("ellipse", { cx: drawPreview.x + drawPreview.width / 2, cy: drawPreview.y + drawPreview.height / 2, rx: drawPreview.width / 2, ry: drawPreview.height / 2, fill: "rgba(162,155,254,0.12)", stroke: "#a29bfe", strokeWidth: 1.5 / (state.zoom / 100), strokeDasharray: `${4 / (state.zoom / 100)}` })), drawPreview.type === 'line' && (jsx("line", { x1: drawPreview.x, y1: drawPreview.y, x2: drawPreview.x + drawPreview.width, y2: drawPreview.y + drawPreview.height, stroke: "#a29bfe", strokeWidth: 1.5 / (state.zoom / 100), strokeDasharray: `${4 / (state.zoom / 100)}`, strokeLinecap: "round" }))] }))] }), jsxs("div", { className: "nve-zoom-controls", children: [jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom - 25 }), title: "Zoom out", children: "\u2212" }), jsxs("span", { className: "nve-zoom-label", children: [state.zoom, "%"] }), jsx("button", { onClick: () => dispatch({ type: 'SET_ZOOM', zoom: state.zoom + 25 }), title: "Zoom in", children: "+" })] })] }), jsxs("div", { className: "nve-sidebar", children: [jsxs("div", { className: "nve-panel nve-layers", children: [jsxs("div", { className: "nve-panel-header", children: [jsx("span", { children: "Layers" }), jsxs("div", { className: "nve-layers-add", children: [jsx("button", { onClick: () => addShape('rect'), title: "Add Rectangle", children: jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }) }) }), jsx("button", { onClick: () => addShape('circle'), title: "Add Circle", children: jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("circle", { cx: "12", cy: "12", r: "8" }) }) }), jsx("button", { onClick: () => addShape('line'), title: "Add Line", children: jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5", strokeLinecap: "round" }) }) }), jsx("button", { onClick: () => addShape('text'), title: "Add Text", children: jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("text", { x: "5", y: "17", fontSize: "14", fontWeight: "700", fill: "currentColor", stroke: "none", children: "T" }) }) })] })] }), jsxs("div", { className: "nve-layers-list", children: [state.layers.length === 0 && (jsx("div", { className: "nve-empty-hint", children: "Add shapes or icons from the library" })), state.layers.slice().reverse().map(layer => (jsxs("div", { className: `nve-layer-row ${state.selectedId === layer.id ? 'active' : ''} ${layer.locked ? 'locked' : ''}`, onClick: () => dispatch({ type: 'SELECT_LAYER', id: layer.id }), children: [jsxs("span", { className: "nve-layer-type-icon", children: [layer.type === 'rect' && '▭', layer.type === 'circle' && '○', layer.type === 'line' && '╱', layer.type === 'text' && 'T', layer.type === 'icon' && '◆'] }), jsx("span", { className: "nve-layer-name", children: layer.name }), jsxs("span", { className: "nve-layer-btns", children: [jsx("button", { onClick: e => { e.stopPropagation(); dispatch({ type: 'UPDATE_LAYER', id: layer.id, patch: { visible: !layer.visible } }); }, title: layer.visible ? 'Hide' : 'Show', className: layer.visible ? '' : 'off', children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: layer.visible
+                                                                ? jsxs(Fragment, { children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), jsx("circle", { cx: "12", cy: "12", r: "3" })] })
+                                                                : jsxs(Fragment, { children: [jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }), jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] }) }) }), jsx("button", { onClick: e => { e.stopPropagation(); dispatch({ type: 'UPDATE_LAYER', id: layer.id, patch: { locked: !layer.locked } }); }, title: layer.locked ? 'Unlock' : 'Lock', className: layer.locked ? 'on' : '', children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: layer.locked
+                                                                ? jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }), jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] })
+                                                                : jsxs(Fragment, { children: [jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }), jsx("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })] }) }) })] })] }, layer.id)))] }), selectedLayer && (jsxs("div", { className: "nve-layer-actions", children: [jsx("button", { onClick: () => dispatch({ type: 'MOVE_LAYER', id: state.selectedId, direction: 'up' }), title: "Move Up", children: "\u2191" }), jsx("button", { onClick: () => dispatch({ type: 'MOVE_LAYER', id: state.selectedId, direction: 'down' }), title: "Move Down", children: "\u2193" }), jsx("button", { onClick: () => dispatch({ type: 'DUPLICATE_LAYER', id: state.selectedId }), title: "Duplicate (Ctrl+D)", children: "\u29C9" }), jsx("button", { onClick: () => dispatch({ type: 'REMOVE_LAYER', id: state.selectedId }), title: "Delete (Del)", className: "nve-danger", children: "\u2715" })] }))] }), jsxs("div", { className: "nve-panel nve-properties", children: [jsx("div", { className: "nve-panel-header", children: "Properties" }), selectedLayer ? (jsxs("div", { className: "nve-props-scroll", children: [jsx("div", { className: "nve-prop-section", children: jsx("input", { className: "nve-prop-name", value: selectedLayer.name, onChange: e => updateSelected({ name: e.target.value }) }) }), jsxs("div", { className: "nve-prop-section", children: [jsx("div", { className: "nve-prop-section-title", children: "Position & Size" }), (selectedLayer.type === 'rect' || selectedLayer.type === 'text' || selectedLayer.type === 'icon') && (jsxs("div", { className: "nve-prop-grid", children: [jsxs("label", { children: ["X", jsx("input", { type: "number", value: selectedLayer.x, onChange: e => updateSelected({ x: Number(e.target.value) }) })] }), jsxs("label", { children: ["Y", jsx("input", { type: "number", value: selectedLayer.y, onChange: e => updateSelected({ y: Number(e.target.value) }) })] }), selectedLayer.type === 'rect' && (jsxs(Fragment, { children: [jsxs("label", { children: ["W", jsx("input", { type: "number", value: selectedLayer.width, onChange: e => updateSelected({ width: Math.max(1, Number(e.target.value)) }) })] }), jsxs("label", { children: ["H", jsx("input", { type: "number", value: selectedLayer.height, onChange: e => updateSelected({ height: Math.max(1, Number(e.target.value)) }) })] }), jsxs("label", { children: ["RX", jsx("input", { type: "number", value: selectedLayer.rx, onChange: e => updateSelected({ rx: Math.max(0, Number(e.target.value)) }) })] })] })), selectedLayer.type === 'icon' && (jsxs("label", { children: ["Size", jsx("input", { type: "number", value: selectedLayer.iconSize, onChange: e => updateSelected({ iconSize: Math.max(8, Number(e.target.value)) }) })] }))] })), selectedLayer.type === 'circle' && (jsxs("div", { className: "nve-prop-grid", children: [jsxs("label", { children: ["CX", jsx("input", { type: "number", value: selectedLayer.cx, onChange: e => updateSelected({ cx: Number(e.target.value) }) })] }), jsxs("label", { children: ["CY", jsx("input", { type: "number", value: selectedLayer.cy, onChange: e => updateSelected({ cy: Number(e.target.value) }) })] }), jsxs("label", { children: ["R", jsx("input", { type: "number", value: selectedLayer.r, onChange: e => updateSelected({ r: Math.max(1, Number(e.target.value)) }) })] })] })), selectedLayer.type === 'line' && (jsxs("div", { className: "nve-prop-grid", children: [jsxs("label", { children: ["X1", jsx("input", { type: "number", value: selectedLayer.x1, onChange: e => updateSelected({ x1: Number(e.target.value) }) })] }), jsxs("label", { children: ["Y1", jsx("input", { type: "number", value: selectedLayer.y1, onChange: e => updateSelected({ y1: Number(e.target.value) }) })] }), jsxs("label", { children: ["X2", jsx("input", { type: "number", value: selectedLayer.x2, onChange: e => updateSelected({ x2: Number(e.target.value) }) })] }), jsxs("label", { children: ["Y2", jsx("input", { type: "number", value: selectedLayer.y2, onChange: e => updateSelected({ y2: Number(e.target.value) }) })] })] }))] }), selectedLayer.type !== 'icon' && (jsxs("div", { className: "nve-prop-section", children: [jsx("div", { className: "nve-prop-section-title", children: "Appearance" }), jsxs("div", { className: "nve-prop-grid", children: [jsxs("label", { className: "nve-color-prop", children: ["Fill", jsxs("div", { className: "nve-color-cell", children: [jsx("span", { className: "nve-color-swatch", style: { background: selectedLayer.fill } }), jsx("input", { type: "color", value: selectedLayer.fill, onChange: e => updateSelected({ fill: e.target.value }) })] })] }), jsxs("label", { children: [jsx("span", { className: "nve-prop-label-sm", children: "Fill \u03B1" }), jsx("input", { type: "range", min: "0", max: "1", step: "0.05", value: selectedLayer.fillOpacity, onChange: e => updateSelected({ fillOpacity: Number(e.target.value) }) })] }), jsxs("label", { className: "nve-color-prop", children: ["Stroke", jsxs("div", { className: "nve-color-cell", children: [jsx("span", { className: "nve-color-swatch", style: { background: selectedLayer.stroke } }), jsx("input", { type: "color", value: selectedLayer.stroke, onChange: e => updateSelected({ stroke: e.target.value }) })] })] }), jsxs("label", { children: [jsx("span", { className: "nve-prop-label-sm", children: "Stroke \u03B1" }), jsx("input", { type: "range", min: "0", max: "1", step: "0.05", value: selectedLayer.strokeOpacity, onChange: e => updateSelected({ strokeOpacity: Number(e.target.value) }) })] }), jsxs("label", { children: [jsx("span", { className: "nve-prop-label-sm", children: "Stroke W" }), jsx("input", { type: "number", min: "0", max: "20", step: "0.5", value: selectedLayer.strokeWidth, onChange: e => updateSelected({ strokeWidth: Number(e.target.value) }) })] })] })] })), selectedLayer.type === 'icon' && (jsxs("div", { className: "nve-prop-section", children: [jsx("div", { className: "nve-prop-section-title", children: "Icon" }), jsxs("div", { className: "nve-prop-grid nve-prop-wide", children: [jsxs("label", { children: ["Variant", jsx("select", { value: selectedLayer.iconVariant, onChange: e => updateSelected({ iconVariant: e.target.value }), children: ICON_VARIANTS.map(v => jsx("option", { value: v, children: v }, v)) })] }), jsxs("label", { className: "nve-color-prop", children: ["Primary", jsxs("div", { className: "nve-color-cell", children: [jsx("span", { className: "nve-color-swatch", style: { background: selectedLayer.iconPrimaryColor } }), jsx("input", { type: "color", value: selectedLayer.iconPrimaryColor, onChange: e => updateSelected({ iconPrimaryColor: e.target.value }) })] })] }), jsxs("label", { className: "nve-color-prop", children: ["Secondary", jsxs("div", { className: "nve-color-cell", children: [jsx("span", { className: "nve-color-swatch", style: { background: selectedLayer.iconSecondaryColor } }), jsx("input", { type: "color", value: selectedLayer.iconSecondaryColor, onChange: e => updateSelected({ iconSecondaryColor: e.target.value }) })] })] }), jsxs("label", { className: "nve-color-prop", children: ["Accent", jsxs("div", { className: "nve-color-cell", children: [jsx("span", { className: "nve-color-swatch", style: { background: selectedLayer.iconAccentColor } }), jsx("input", { type: "color", value: selectedLayer.iconAccentColor, onChange: e => updateSelected({ iconAccentColor: e.target.value }) })] })] }), jsxs("label", { children: ["Animation", jsx("select", { value: selectedLayer.iconAnimation, onChange: e => updateSelected({ iconAnimation: e.target.value }), children: ICON_ANIMATIONS.map(a => jsx("option", { value: a, children: a }, a)) })] })] })] })), selectedLayer.type === 'text' && (jsxs("div", { className: "nve-prop-section", children: [jsx("div", { className: "nve-prop-section-title", children: "Text" }), jsxs("div", { className: "nve-prop-grid nve-prop-wide", children: [jsxs("label", { children: ["Content", jsx("input", { type: "text", value: selectedLayer.text, onChange: e => updateSelected({ text: e.target.value }) })] }), jsxs("label", { children: ["Font Size", jsx("input", { type: "number", min: "8", max: "200", value: selectedLayer.fontSize, onChange: e => updateSelected({ fontSize: Math.max(8, Number(e.target.value)) }) })] }), jsxs("label", { children: ["Font", jsxs("select", { value: selectedLayer.fontFamily, onChange: e => updateSelected({ fontFamily: e.target.value }), children: [jsx("option", { value: "sans-serif", children: "Sans-serif" }), jsx("option", { value: "serif", children: "Serif" }), jsx("option", { value: "monospace", children: "Monospace" }), jsx("option", { value: "cursive", children: "Cursive" })] })] })] })] })), jsxs("div", { className: "nve-prop-section", children: [jsx("div", { className: "nve-prop-section-title", children: "Transform" }), jsxs("div", { className: "nve-prop-grid", children: [jsxs("label", { children: ["Rotate ", jsxs("strong", { children: [selectedLayer.rotate, "\u00B0"] }), jsx("input", { type: "range", min: "-180", max: "180", step: "1", value: selectedLayer.rotate, onChange: e => updateSelected({ rotate: Number(e.target.value) }) })] }), jsxs("label", { children: ["Opacity ", jsxs("strong", { children: [Math.round(selectedLayer.opacity * 100), "%"] }), jsx("input", { type: "range", min: "0", max: "1", step: "0.05", value: selectedLayer.opacity, onChange: e => updateSelected({ opacity: Number(e.target.value) }) })] }), jsxs("label", { children: ["Blend", jsx("select", { value: selectedLayer.blendMode, onChange: e => updateSelected({ blendMode: e.target.value }), children: BLEND_MODES.map(m => jsx("option", { value: m, children: m }, m)) })] })] })] })] })) : (jsx("div", { className: "nve-empty-hint", children: "Select a layer to edit its properties" }))] })] }), jsxs("div", { className: "nve-statusbar", children: [jsxs("span", { children: ["Zoom: ", state.zoom, "%"] }), jsxs("span", { children: [canvasW, " \u00D7 ", canvasH] }), jsxs("span", { children: [state.layers.length, " layer", state.layers.length !== 1 ? 's' : ''] }), selectedLayer && jsxs("span", { className: "nve-status-selected", children: ["\u25CF ", selectedLayer.name] }), jsx("span", { className: "nve-status-shortcuts", children: "V Select \u00B7 R Rect \u00B7 O Circle \u00B7 L Line \u00B7 T Text \u00B7 H Pan \u00B7 G Grid" })] })] }));
+});
+
+export { NiceVectorEditor };
+//# sourceMappingURL=NiceVectorEditor.js.map