@nice2dev/icons 1.1.7 → 1.1.10

package/dist/esm/NiceVectorEditor.js

@@ -1,673 +0,0 @@
-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