@nice2dev/ui-graphics 1.1.0 → 1.1.1

package/dist/esm/icon/NiceIconEditor.js

@@ -5,30 +5,31 @@ import React from 'react';
 const DEFAULT_ICON_CONFIG = {
     viewBox: 24,
     strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none",
-    stroke: "currentColor",
-    variant: "outline",
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    fill: 'none',
+    stroke: 'currentColor',
+    variant: 'outline',
 };
 // ── Hook ────────────────────────────────────────────────────────
 function useIconEditor(initialSvg) {
     const [config, setConfig] = React.useState(DEFAULT_ICON_CONFIG);
     const [shapes, setShapes] = React.useState([]);
     const [selectedId, setSelectedId] = React.useState(null);
-    const [tool, setTool] = React.useState("select");
+    const [tool, setTool] = React.useState('select');
     const [snapToGrid, setSnapToGrid] = React.useState(true);
     const [historyIdx, setHistoryIdx] = React.useState(0);
     const historyRef = React.useRef([[]]);
     // Parse initial SVG
     React.useEffect(() => {
-        if (!initialSvg)
+        if (!initialSvg) {
             return;
+        }
         const pathMatches = initialSvg.matchAll(/<path[^>]*d="([^"]*)"[^>]*\/?>/g);
         const parsed = [];
         let id = 0;
         for (const match of pathMatches) {
-            parsed.push({ id: `shape-${id++}`, type: "path", d: match[1] });
+            parsed.push({ id: `shape-${id++}`, type: 'path', d: match[1] });
         }
         if (parsed.length > 0) {
             setShapes(parsed);
@@ -40,20 +41,23 @@ function useIconEditor(initialSvg) {
         const snap = JSON.parse(JSON.stringify(newShapes));
         historyRef.current = historyRef.current.slice(0, historyIdx + 1);
         historyRef.current.push(snap);
-        if (historyRef.current.length > 50)
+        if (historyRef.current.length > 50) {
             historyRef.current.shift();
+        }
         setHistoryIdx(historyRef.current.length - 1);
     }, [historyIdx]);
     const undo = React.useCallback(() => {
-        if (historyIdx <= 0)
+        if (historyIdx <= 0) {
             return;
+        }
         const newIdx = historyIdx - 1;
         setHistoryIdx(newIdx);
         setShapes(JSON.parse(JSON.stringify(historyRef.current[newIdx])));
     }, [historyIdx]);
     const redo = React.useCallback(() => {
-        if (historyIdx >= historyRef.current.length - 1)
+        if (historyIdx >= historyRef.current.length - 1) {
             return;
+        }
         const newIdx = historyIdx + 1;
         setHistoryIdx(newIdx);
         setShapes(JSON.parse(JSON.stringify(historyRef.current[newIdx])));
@@ -73,61 +77,73 @@ function useIconEditor(initialSvg) {
     const deleteShape = React.useCallback((id) => {
         const newShapes = shapes.filter((s) => s.id !== id);
         setShapes(newShapes);
-        if (selectedId === id)
+        if (selectedId === id) {
             setSelectedId(null);
+        }
         pushHistory(newShapes);
     }, [shapes, selectedId, pushHistory]);
     const toSvg = React.useCallback(() => {
         const vb = config.viewBox;
-        const children = shapes.map((s) => {
+        const children = shapes
+            .map((s) => {
             var _a, _b, _c;
             const fill = (_a = s.fill) !== null && _a !== void 0 ? _a : config.fill;
             const stroke = (_b = s.stroke) !== null && _b !== void 0 ? _b : config.stroke;
             const sw = (_c = s.strokeWidth) !== null && _c !== void 0 ? _c : config.strokeWidth;
             switch (s.type) {
-                case "path":
+                case 'path':
                     return `  <path d="${s.d}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linecap="${config.strokeLinecap}" stroke-linejoin="${config.strokeLinejoin}" />`;
-                case "circle":
+                case 'circle':
                     return `  <circle cx="${s.cx}" cy="${s.cy}" r="${s.r}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" />`;
-                case "rect":
+                case 'rect':
                     return `  <rect x="${s.x}" y="${s.y}" width="${s.width}" height="${s.height}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" rx="1" />`;
-                case "line":
+                case 'line':
                     return `  <line x1="${s.x1}" y1="${s.y1}" x2="${s.x2}" y2="${s.y2}" stroke="${stroke}" stroke-width="${sw}" stroke-linecap="${config.strokeLinecap}" />`;
                 default:
-                    return "";
+                    return '';
             }
-        }).join("\n");
+        })
+            .join('\n');
         return `<svg xmlns="http://www.w3.org/2000/svg" width="${vb}" height="${vb}" viewBox="0 0 ${vb} ${vb}" fill="${config.fill}" stroke="${config.stroke}" stroke-width="${config.strokeWidth}" stroke-linecap="${config.strokeLinecap}" stroke-linejoin="${config.strokeLinejoin}">\n${children}\n</svg>`;
     }, [shapes, config]);
     const toReactComponent = React.useCallback((name) => {
         const svg = toSvg();
         const inner = svg
-            .replace(/<svg[^>]*>/, "")
-            .replace(/<\/svg>/, "")
+            .replace(/<svg[^>]*>/, '')
+            .replace(/<\/svg>/, '')
             .trim()
-            .replace(/stroke-width/g, "strokeWidth")
-            .replace(/stroke-linecap/g, "strokeLinecap")
-            .replace(/stroke-linejoin/g, "strokeLinejoin")
-            .replace(/fill-rule/g, "fillRule")
-            .replace(/clip-rule/g, "clipRule");
+            .replace(/stroke-width/g, 'strokeWidth')
+            .replace(/stroke-linecap/g, 'strokeLinecap')
+            .replace(/stroke-linejoin/g, 'strokeLinejoin')
+            .replace(/fill-rule/g, 'fillRule')
+            .replace(/clip-rule/g, 'clipRule');
         return `import React from "react";\n\nexport const ${name}: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\n  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 ${config.viewBox} ${config.viewBox}" fill="${config.fill}" stroke="${config.stroke}" strokeWidth="${config.strokeWidth}" strokeLinecap="${config.strokeLinecap}" strokeLinejoin="${config.strokeLinejoin}" {...props}>\n    ${inner}\n  </svg>\n);\n`;
     }, [toSvg, config]);
     return {
-        config, setConfig,
-        shapes, setShapes,
-        selectedId, setSelectedId,
-        tool, setTool,
-        addShape, updateShape, deleteShape,
-        toSvg, toReactComponent,
-        undo, redo,
+        config,
+        setConfig,
+        shapes,
+        setShapes,
+        selectedId,
+        setSelectedId,
+        tool,
+        setTool,
+        addShape,
+        updateShape,
+        deleteShape,
+        toSvg,
+        toReactComponent,
+        undo,
+        redo,
         canUndo: historyIdx > 0,
         canRedo: historyIdx < historyRef.current.length - 1,
-        snapToGrid, setSnapToGrid,
+        snapToGrid,
+        setSnapToGrid,
     };
 }
 // ── Component ───────────────────────────────────────────────────
 /** SVG icon editor with grid, snap, drawing, and export capabilities. */
-const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className = "", }) => {
+const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className = '', }) => {
     const editor = useIconEditor(initialSvg);
     const svgRef = React.useRef(null);
     const drawing = React.useRef(false);
@@ -139,47 +155,56 @@ const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className
     // Keyboard shortcuts
     React.useEffect(() => {
         const handler = (e) => {
-            if (e.key === "Delete" && editor.selectedId) {
+            if (e.key === 'Delete' && editor.selectedId) {
                 editor.deleteShape(editor.selectedId);
                 return;
             }
-            if (e.ctrlKey && e.key === "z") {
+            if (e.ctrlKey && e.key === 'z') {
                 e.preventDefault();
                 editor.undo();
                 return;
             }
-            if (e.ctrlKey && e.key === "y") {
+            if (e.ctrlKey && e.key === 'y') {
                 e.preventDefault();
                 editor.redo();
                 return;
             }
-            if (e.key === "v" && !e.ctrlKey)
-                editor.setTool("select");
-            if (e.key === "c" && !e.ctrlKey)
-                editor.setTool("circle");
-            if (e.key === "r" && !e.ctrlKey)
-                editor.setTool("rect");
-            if (e.key === "l" && !e.ctrlKey)
-                editor.setTool("line");
-            if (e.key === "p" && !e.ctrlKey)
-                editor.setTool("path");
-            if (e.key === "g" && !e.ctrlKey)
-                editor.setSnapToGrid(s => !s);
-            if (e.key === "Escape")
+            if (e.key === 'v' && !e.ctrlKey) {
+                editor.setTool('select');
+            }
+            if (e.key === 'c' && !e.ctrlKey) {
+                editor.setTool('circle');
+            }
+            if (e.key === 'r' && !e.ctrlKey) {
+                editor.setTool('rect');
+            }
+            if (e.key === 'l' && !e.ctrlKey) {
+                editor.setTool('line');
+            }
+            if (e.key === 'p' && !e.ctrlKey) {
+                editor.setTool('path');
+            }
+            if (e.key === 'g' && !e.ctrlKey) {
+                editor.setSnapToGrid((s) => !s);
+            }
+            if (e.key === 'Escape') {
                 editor.setSelectedId(null);
+            }
         };
-        window.addEventListener("keydown", handler);
-        return () => window.removeEventListener("keydown", handler);
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
     }, [editor]);
     const snapCoord = (v) => {
-        if (!editor.snapToGrid)
+        if (!editor.snapToGrid) {
             return v;
+        }
         return Math.round(v * 2) / 2; // snap to 0.5 grid
     };
     const getSvgCoord = (e) => {
         const svg = svgRef.current;
-        if (!svg)
+        if (!svg) {
             return { x: 0, y: 0 };
+        }
         const rect = svg.getBoundingClientRect();
         return {
             x: snapCoord(((e.clientX - rect.left) / rect.width) * vb),
@@ -188,14 +213,19 @@ const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className
     };
     const handleMouseDown = (e) => {
         const { x, y } = getSvgCoord(e);
-        if (editor.tool === "select") {
+        if (editor.tool === 'select') {
             // Check if clicking on a shape for drag
-            const hit = editor.shapes.find(s => {
+            const hit = editor.shapes.find((s) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if (s.type === "rect")
-                    return x >= ((_a = s.x) !== null && _a !== void 0 ? _a : 0) && x <= ((_b = s.x) !== null && _b !== void 0 ? _b : 0) + ((_c = s.width) !== null && _c !== void 0 ? _c : 0) && y >= ((_d = s.y) !== null && _d !== void 0 ? _d : 0) && y <= ((_e = s.y) !== null && _e !== void 0 ? _e : 0) + ((_f = s.height) !== null && _f !== void 0 ? _f : 0);
-                if (s.type === "circle")
+                if (s.type === 'rect') {
+                    return (x >= ((_a = s.x) !== null && _a !== void 0 ? _a : 0) &&
+                        x <= ((_b = s.x) !== null && _b !== void 0 ? _b : 0) + ((_c = s.width) !== null && _c !== void 0 ? _c : 0) &&
+                        y >= ((_d = s.y) !== null && _d !== void 0 ? _d : 0) &&
+                        y <= ((_e = s.y) !== null && _e !== void 0 ? _e : 0) + ((_f = s.height) !== null && _f !== void 0 ? _f : 0));
+                }
+                if (s.type === 'circle') {
                     return Math.hypot(x - ((_g = s.cx) !== null && _g !== void 0 ? _g : 0), y - ((_h = s.cy) !== null && _h !== void 0 ? _h : 0)) <= ((_j = s.r) !== null && _j !== void 0 ? _j : 0);
+                }
                 return false;
             });
             if (hit) {
@@ -210,14 +240,14 @@ const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className
         }
         drawing.current = true;
         drawStart.current = { x, y };
-        if (editor.tool === "circle") {
-            setPendingShape({ id: "pending", type: "circle", cx: x, cy: y, r: 0 });
+        if (editor.tool === 'circle') {
+            setPendingShape({ id: 'pending', type: 'circle', cx: x, cy: y, r: 0 });
         }
-        else if (editor.tool === "rect") {
-            setPendingShape({ id: "pending", type: "rect", x, y, width: 0, height: 0 });
+        else if (editor.tool === 'rect') {
+            setPendingShape({ id: 'pending', type: 'rect', x, y, width: 0, height: 0 });
         }
-        else if (editor.tool === "line") {
-            setPendingShape({ id: "pending", type: "line", x1: x, y1: y, x2: x, y2: y });
+        else if (editor.tool === 'line') {
+            setPendingShape({ id: 'pending', type: 'line', x1: x, y1: y, x2: x, y2: y });
         }
     };
     const handleMouseMove = (e) => {
@@ -227,27 +257,43 @@ const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className
         if (draggingShape.current) {
             const dx = x - dragStart.current.x;
             const dy = y - dragStart.current.y;
-            const shape = editor.shapes.find(s => s.id === draggingShape.current);
+            const shape = editor.shapes.find((s) => s.id === draggingShape.current);
             if (shape) {
-                if (shape.type === "rect")
+                if (shape.type === 'rect') {
                     editor.updateShape(shape.id, { x: ((_a = shape.x) !== null && _a !== void 0 ? _a : 0) + dx, y: ((_b = shape.y) !== null && _b !== void 0 ? _b : 0) + dy });
-                if (shape.type === "circle")
+                }
+                if (shape.type === 'circle') {
                     editor.updateShape(shape.id, { cx: ((_c = shape.cx) !== null && _c !== void 0 ? _c : 0) + dx, cy: ((_d = shape.cy) !== null && _d !== void 0 ? _d : 0) + dy });
+                }
                 dragStart.current = { x, y };
             }
             return;
         }
-        if (!drawing.current)
+        if (!drawing.current) {
             return;
+        }
         const sx = drawStart.current.x, sy = drawStart.current.y;
-        if (editor.tool === "circle") {
-            setPendingShape({ id: "pending", type: "circle", cx: sx, cy: sy, r: Math.hypot(x - sx, y - sy) });
+        if (editor.tool === 'circle') {
+            setPendingShape({
+                id: 'pending',
+                type: 'circle',
+                cx: sx,
+                cy: sy,
+                r: Math.hypot(x - sx, y - sy),
+            });
         }
-        else if (editor.tool === "rect") {
-            setPendingShape({ id: "pending", type: "rect", x: Math.min(sx, x), y: Math.min(sy, y), width: Math.abs(x - sx), height: Math.abs(y - sy) });
+        else if (editor.tool === 'rect') {
+            setPendingShape({
+                id: 'pending',
+                type: 'rect',
+                x: Math.min(sx, x),
+                y: Math.min(sy, y),
+                width: Math.abs(x - sx),
+                height: Math.abs(y - sy),
+            });
         }
-        else if (editor.tool === "line") {
-            setPendingShape({ id: "pending", type: "line", x1: sx, y1: sy, x2: x, y2: y });
+        else if (editor.tool === 'line') {
+            setPendingShape({ id: 'pending', type: 'line', x1: sx, y1: sy, x2: x, y2: y });
         }
     };
     const handleMouseUp = () => {
@@ -260,17 +306,20 @@ const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className
         drawing.current = false;
         // Only add if shape has non-zero size
         const { id: _, ...shapeData } = pendingShape;
-        if (pendingShape.type === "circle" && ((_a = pendingShape.r) !== null && _a !== void 0 ? _a : 0) > 0.2) {
+        if (pendingShape.type === 'circle' && ((_a = pendingShape.r) !== null && _a !== void 0 ? _a : 0) > 0.2) {
             editor.addShape(shapeData);
         }
-        else if (pendingShape.type === "rect" && ((_b = pendingShape.width) !== null && _b !== void 0 ? _b : 0) > 0.2 && ((_c = pendingShape.height) !== null && _c !== void 0 ? _c : 0) > 0.2) {
+        else if (pendingShape.type === 'rect' &&
+            ((_b = pendingShape.width) !== null && _b !== void 0 ? _b : 0) > 0.2 &&
+            ((_c = pendingShape.height) !== null && _c !== void 0 ? _c : 0) > 0.2) {
             editor.addShape(shapeData);
         }
-        else if (pendingShape.type === "line") {
+        else if (pendingShape.type === 'line') {
             const dx = ((_d = pendingShape.x2) !== null && _d !== void 0 ? _d : 0) - ((_e = pendingShape.x1) !== null && _e !== void 0 ? _e : 0);
             const dy = ((_f = pendingShape.y2) !== null && _f !== void 0 ? _f : 0) - ((_g = pendingShape.y1) !== null && _g !== void 0 ? _g : 0);
-            if (Math.hypot(dx, dy) > 0.2)
+            if (Math.hypot(dx, dy) > 0.2) {
                 editor.addShape(shapeData);
+            }
         }
         setPendingShape(null);
     };
@@ -279,20 +328,28 @@ const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className
         const svg = editor.toSvg();
         const pngSizes = new Map();
         for (const size of sizes) {
-            const canvas = document.createElement("canvas");
+            const canvas = document.createElement('canvas');
             canvas.width = size;
             canvas.height = size;
-            const ctx = canvas.getContext("2d");
+            const ctx = canvas.getContext('2d');
             const img = new Image();
-            const blob = new Blob([svg], { type: "image/svg+xml" });
+            const blob = new Blob([svg], { type: 'image/svg+xml' });
             const url = URL.createObjectURL(blob);
             await new Promise((resolve) => {
-                img.onload = () => { ctx.drawImage(img, 0, 0, size, size); canvas.toBlob((b) => { if (b)
-                    pngSizes.set(size, b); URL.revokeObjectURL(url); resolve(); }, "image/png"); };
+                img.onload = () => {
+                    ctx.drawImage(img, 0, 0, size, size);
+                    canvas.toBlob((b) => {
+                        if (b) {
+                            pngSizes.set(size, b);
+                        }
+                        URL.revokeObjectURL(url);
+                        resolve();
+                    }, 'image/png');
+                };
                 img.src = url;
             });
         }
-        onExport === null || onExport === void 0 ? void 0 : onExport({ svg, reactComponent: editor.toReactComponent("MyIcon"), pngSizes });
+        onExport === null || onExport === void 0 ? void 0 : onExport({ svg, reactComponent: editor.toReactComponent('MyIcon'), pngSizes });
     };
     const renderShape = (s, isPending = false) => {
         var _a, _b, _c;
@@ -300,31 +357,197 @@ const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className
         const stroke = (_b = s.stroke) !== null && _b !== void 0 ? _b : editor.config.stroke;
         const sw = (_c = s.strokeWidth) !== null && _c !== void 0 ? _c : editor.config.strokeWidth;
         const isSelected = !isPending && s.id === editor.selectedId;
-        const selProps = isSelected ? { strokeDasharray: "0.5 0.3" } : {};
-        const evtProps = isPending ? {} : { onClick: (e) => { e.stopPropagation(); editor.setSelectedId(s.id); }, style: { cursor: "pointer" } };
+        const selProps = isSelected ? { strokeDasharray: '0.5 0.3' } : {};
+        const evtProps = isPending
+            ? {}
+            : {
+                onClick: (e) => {
+                    e.stopPropagation();
+                    editor.setSelectedId(s.id);
+                },
+                style: { cursor: 'pointer' },
+            };
         switch (s.type) {
-            case "path": return jsx("path", { d: s.d, fill: fill, stroke: isSelected ? "#339af0" : stroke, strokeWidth: sw * (vb / 400), strokeLinecap: editor.config.strokeLinecap, strokeLinejoin: editor.config.strokeLinejoin, ...evtProps }, s.id);
-            case "circle": return jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, fill: isPending ? "rgba(51,154,240,0.15)" : fill, stroke: isSelected ? "#339af0" : (isPending ? "#339af0" : stroke), strokeWidth: sw * (vb / 400), ...selProps, ...evtProps }, s.id);
-            case "rect": return jsx("rect", { x: s.x, y: s.y, width: s.width, height: s.height, fill: isPending ? "rgba(51,154,240,0.15)" : fill, stroke: isSelected ? "#339af0" : (isPending ? "#339af0" : stroke), strokeWidth: sw * (vb / 400), rx: 0.3, ...selProps, ...evtProps }, s.id);
-            case "line": return jsx("line", { x1: s.x1, y1: s.y1, x2: s.x2, y2: s.y2, stroke: isSelected ? "#339af0" : (isPending ? "#339af0" : stroke), strokeWidth: sw * (vb / 400), strokeLinecap: editor.config.strokeLinecap, ...selProps, ...evtProps }, s.id);
-            default: return null;
+            case 'path':
+                return (jsx("path", { d: s.d, fill: fill, stroke: isSelected ? '#339af0' : stroke, strokeWidth: sw * (vb / 400), strokeLinecap: editor.config.strokeLinecap, strokeLinejoin: editor.config.strokeLinejoin, ...evtProps }, s.id));
+            case 'circle':
+                return (jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, fill: isPending ? 'rgba(51,154,240,0.15)' : fill, stroke: isSelected ? '#339af0' : isPending ? '#339af0' : stroke, strokeWidth: sw * (vb / 400), ...selProps, ...evtProps }, s.id));
+            case 'rect':
+                return (jsx("rect", { x: s.x, y: s.y, width: s.width, height: s.height, fill: isPending ? 'rgba(51,154,240,0.15)' : fill, stroke: isSelected ? '#339af0' : isPending ? '#339af0' : stroke, strokeWidth: sw * (vb / 400), rx: 0.3, ...selProps, ...evtProps }, s.id));
+            case 'line':
+                return (jsx("line", { x1: s.x1, y1: s.y1, x2: s.x2, y2: s.y2, stroke: isSelected ? '#339af0' : isPending ? '#339af0' : stroke, strokeWidth: sw * (vb / 400), strokeLinecap: editor.config.strokeLinecap, ...selProps, ...evtProps }, s.id));
+            default:
+                return null;
         }
     };
     const toolBtnStyle = (active) => ({
-        padding: "4px 8px", borderRadius: 4, border: "none", cursor: "pointer",
-        background: active ? "#339af0" : "#2c2e33", color: active ? "#fff" : "#c1c2c5", fontSize: 11,
+        padding: '4px 8px',
+        borderRadius: 4,
+        border: 'none',
+        cursor: 'pointer',
+        background: active ? '#339af0' : '#2c2e33',
+        color: active ? '#fff' : '#c1c2c5',
+        fontSize: 11,
     });
-    return (jsxs("div", { className: `nice-icon-editor ${className}`, style: { display: "flex", flexDirection: "column", gap: 8, background: "#1a1b1e", color: "#c1c2c5", padding: 12, borderRadius: 8 }, children: [jsxs("div", { style: { display: "flex", gap: 4, fontSize: 12, alignItems: "center", flexWrap: "wrap" }, children: [["select", "path", "circle", "rect", "line"].map((t) => (jsxs("button", { onClick: () => editor.setTool(t), style: toolBtnStyle(editor.tool === t), children: [t, " (", t[0], ")"] }, t))), jsx("div", { style: { width: 1, height: 20, background: "#373a40" } }), jsx("button", { onClick: editor.undo, disabled: !editor.canUndo, style: toolBtnStyle(false), title: "Undo (Ctrl+Z)", children: "\u21A9" }), jsx("button", { onClick: editor.redo, disabled: !editor.canRedo, style: toolBtnStyle(false), title: "Redo (Ctrl+Y)", children: "\u21AA" }), jsx("div", { style: { width: 1, height: 20, background: "#373a40" } }), jsx("button", { onClick: () => editor.setSnapToGrid(s => !s), style: toolBtnStyle(editor.snapToGrid), title: "Snap to Grid (G)", children: "\u229E" }), editor.selectedId && jsx("button", { onClick: () => editor.deleteShape(editor.selectedId), style: { ...toolBtnStyle(false), color: "#ff6b6b" }, title: "Delete (Del)", children: "\u2715" }), jsx("div", { style: { flex: 1 } }), jsx("button", { onClick: handleSave, style: { padding: "4px 12px", borderRadius: 4, border: "none", cursor: "pointer", background: "#2f9e44", color: "#fff", fontSize: 11 }, children: "Save SVG" }), jsx("button", { onClick: () => handleExportPng(), style: { padding: "4px 12px", borderRadius: 4, border: "none", cursor: "pointer", background: "#228be6", color: "#fff", fontSize: 11 }, children: "Export PNG" })] }), jsxs("div", { style: { display: "flex", gap: 12 }, children: [jsx("div", { style: { width: 400, height: 400, background: "#141517", borderRadius: 6, position: "relative", overflow: "hidden" }, children: jsxs("svg", { ref: svgRef, width: 400, height: 400, viewBox: `0 0 ${vb} ${vb}`, style: { position: "absolute", inset: 0, cursor: editor.tool === "select" ? "default" : "crosshair" }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: [Array.from({ length: vb + 1 }, (_, i) => (jsxs(React.Fragment, { children: [jsx("line", { x1: i, y1: 0, x2: i, y2: vb, stroke: "rgba(255,255,255,0.08)", strokeWidth: 0.05 }), jsx("line", { x1: 0, y1: i, x2: vb, y2: i, stroke: "rgba(255,255,255,0.08)", strokeWidth: 0.05 })] }, `g${i}`))), jsx("line", { x1: vb / 2, y1: 0, x2: vb / 2, y2: vb, stroke: "rgba(255,255,255,0.15)", strokeWidth: 0.05 }), jsx("line", { x1: 0, y1: vb / 2, x2: vb, y2: vb / 2, stroke: "rgba(255,255,255,0.15)", strokeWidth: 0.05 }), editor.shapes.map(s => renderShape(s)), pendingShape && renderShape(pendingShape, true)] }) }), jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8, fontSize: 12 }, children: [jsxs("div", { children: [jsx("label", { children: "Grid Size: " }), jsxs("select", { value: editor.config.viewBox, onChange: e => editor.setConfig({ ...editor.config, viewBox: Number(e.target.value) }), style: { background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 3, padding: 2 }, children: [jsx("option", { value: 16, children: "16\u00D716" }), jsx("option", { value: 24, children: "24\u00D724" }), jsx("option", { value: 32, children: "32\u00D732" }), jsx("option", { value: 48, children: "48\u00D748" })] })] }), jsxs("div", { children: [jsx("label", { children: "Stroke Width: " }), jsx("input", { type: "range", min: 0.5, max: 4, step: 0.25, value: editor.config.strokeWidth, onChange: e => editor.setConfig({ ...editor.config, strokeWidth: Number(e.target.value) }), style: { width: 100 } }), jsxs("span", { children: [" ", editor.config.strokeWidth] })] }), jsxs("div", { children: [jsx("label", { children: "Variant: " }), ["outline", "filled", "duotone"].map(v => (jsx("button", { onClick: () => editor.setConfig({ ...editor.config, variant: v }), style: { padding: "2px 6px", marginLeft: 2, borderRadius: 3, border: "none", cursor: "pointer",
-                                            background: editor.config.variant === v ? "#339af0" : "#2c2e33",
-                                            color: editor.config.variant === v ? "#fff" : "#c1c2c5", fontSize: 11 }, children: v }, v)))] }), editor.selectedId && (() => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                                const sel = editor.shapes.find(s => s.id === editor.selectedId);
-                                if (!sel)
-                                    return null;
-                                return (jsxs("div", { style: { borderTop: "1px solid #373a40", paddingTop: 8 }, children: [jsxs("strong", { children: ["Selected: ", sel.type] }), sel.type === "rect" && (jsxs("div", { style: { display: "grid", gridTemplateColumns: "60px 1fr", gap: 2, marginTop: 4, fontSize: 11 }, children: [jsx("span", { children: "X:" }), jsx("input", { type: "number", value: (_a = sel.x) !== null && _a !== void 0 ? _a : 0, step: 0.5, onChange: e => editor.updateShape(sel.id, { x: Number(e.target.value) }), style: { background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 2, padding: 1, fontSize: 10 } }), jsx("span", { children: "Y:" }), jsx("input", { type: "number", value: (_b = sel.y) !== null && _b !== void 0 ? _b : 0, step: 0.5, onChange: e => editor.updateShape(sel.id, { y: Number(e.target.value) }), style: { background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 2, padding: 1, fontSize: 10 } }), jsx("span", { children: "Width:" }), jsx("input", { type: "number", value: (_c = sel.width) !== null && _c !== void 0 ? _c : 0, step: 0.5, onChange: e => editor.updateShape(sel.id, { width: Number(e.target.value) }), style: { background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 2, padding: 1, fontSize: 10 } }), jsx("span", { children: "Height:" }), jsx("input", { type: "number", value: (_d = sel.height) !== null && _d !== void 0 ? _d : 0, step: 0.5, onChange: e => editor.updateShape(sel.id, { height: Number(e.target.value) }), style: { background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 2, padding: 1, fontSize: 10 } })] })), sel.type === "circle" && (jsxs("div", { style: { display: "grid", gridTemplateColumns: "60px 1fr", gap: 2, marginTop: 4, fontSize: 11 }, children: [jsx("span", { children: "CX:" }), jsx("input", { type: "number", value: (_e = sel.cx) !== null && _e !== void 0 ? _e : 0, step: 0.5, onChange: e => editor.updateShape(sel.id, { cx: Number(e.target.value) }), style: { background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 2, padding: 1, fontSize: 10 } }), jsx("span", { children: "CY:" }), jsx("input", { type: "number", value: (_f = sel.cy) !== null && _f !== void 0 ? _f : 0, step: 0.5, onChange: e => editor.updateShape(sel.id, { cy: Number(e.target.value) }), style: { background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 2, padding: 1, fontSize: 10 } }), jsx("span", { children: "Radius:" }), jsx("input", { type: "number", value: (_g = sel.r) !== null && _g !== void 0 ? _g : 0, step: 0.5, onChange: e => editor.updateShape(sel.id, { r: Number(e.target.value) }), style: { background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 2, padding: 1, fontSize: 10 } })] })), sel.type === "path" && (jsxs("div", { style: { marginTop: 4 }, children: [jsx("label", { style: { fontSize: 10 }, children: "SVG Path:" }), jsx("textarea", { value: (_h = sel.d) !== null && _h !== void 0 ? _h : "", onChange: e => editor.updateShape(sel.id, { d: e.target.value }), rows: 3, style: { width: "100%", background: "#2c2e33", color: "#c1c2c5", border: "1px solid #373a40", borderRadius: 3, padding: 4, fontSize: 10, fontFamily: "monospace", resize: "vertical" } })] })), jsxs("div", { style: { marginTop: 4, display: "flex", gap: 4, alignItems: "center" }, children: [jsx("span", { style: { fontSize: 10 }, children: "Fill:" }), jsx("input", { type: "color", value: (_j = sel.fill) !== null && _j !== void 0 ? _j : "#000000", onChange: e => editor.updateShape(sel.id, { fill: e.target.value }), style: { width: 24, height: 18, border: "none", padding: 0, cursor: "pointer" } }), jsx("span", { style: { fontSize: 10 }, children: "Stroke:" }), jsx("input", { type: "color", value: (_k = sel.stroke) !== null && _k !== void 0 ? _k : "#000000", onChange: e => editor.updateShape(sel.id, { stroke: e.target.value }), style: { width: 24, height: 18, border: "none", padding: 0, cursor: "pointer" } })] })] }));
-                            })(), jsxs("div", { style: { borderTop: "1px solid #373a40", paddingTop: 8 }, children: [jsxs("strong", { children: ["Shapes (", editor.shapes.length, ")"] }), jsx("div", { style: { marginTop: 4, maxHeight: 120, overflowY: "auto" }, children: editor.shapes.map(s => (jsxs("div", { onClick: () => editor.setSelectedId(s.id), style: { padding: "2px 4px", cursor: "pointer", borderRadius: 2, fontSize: 11,
-                                                background: editor.selectedId === s.id ? "#339af0" : "transparent",
-                                                color: editor.selectedId === s.id ? "#fff" : "#c1c2c5" }, children: [s.type, " ", s.id.slice(-4)] }, s.id))) })] }), jsxs("div", { style: { borderTop: "1px solid #373a40", paddingTop: 8 }, children: [jsx("strong", { children: "Preview" }), jsx("div", { style: { display: "flex", gap: 8, marginTop: 8, alignItems: "end" }, children: [16, 24, 32, 48].map(size => (jsxs("div", { style: { textAlign: "center", fontSize: 10, color: "#868e96" }, children: [jsx("div", { style: { background: "#fff", display: "inline-block", padding: 4, borderRadius: 3 }, dangerouslySetInnerHTML: { __html: editor.toSvg().replace(/width="\d+"/, `width="${size}"`).replace(/height="\d+"/, `height="${size}"`) } }), jsxs("div", { children: [size, "px"] })] }, size))) })] })] })] })] }));
+    return (jsxs("div", { className: `nice-icon-editor ${className}`, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+            background: '#1a1b1e',
+            color: '#c1c2c5',
+            padding: 12,
+            borderRadius: 8,
+        }, children: [jsxs("div", { style: { display: 'flex', gap: 4, fontSize: 12, alignItems: 'center', flexWrap: 'wrap' }, children: [['select', 'path', 'circle', 'rect', 'line'].map((t) => (jsxs("button", { onClick: () => editor.setTool(t), style: toolBtnStyle(editor.tool === t), children: [t, " (", t[0], ")"] }, t))), jsx("div", { style: { width: 1, height: 20, background: '#373a40' } }), jsx("button", { onClick: editor.undo, disabled: !editor.canUndo, style: toolBtnStyle(false), title: "Undo (Ctrl+Z)", children: "\u21A9" }), jsx("button", { onClick: editor.redo, disabled: !editor.canRedo, style: toolBtnStyle(false), title: "Redo (Ctrl+Y)", children: "\u21AA" }), jsx("div", { style: { width: 1, height: 20, background: '#373a40' } }), jsx("button", { onClick: () => editor.setSnapToGrid((s) => !s), style: toolBtnStyle(editor.snapToGrid), title: "Snap to Grid (G)", children: "\u229E" }), editor.selectedId && (jsx("button", { onClick: () => editor.deleteShape(editor.selectedId), style: { ...toolBtnStyle(false), color: '#ff6b6b' }, title: "Delete (Del)", children: "\u2715" })), jsx("div", { style: { flex: 1 } }), jsx("button", { onClick: handleSave, style: {
+                            padding: '4px 12px',
+                            borderRadius: 4,
+                            border: 'none',
+                            cursor: 'pointer',
+                            background: '#2f9e44',
+                            color: '#fff',
+                            fontSize: 11,
+                        }, children: "Save SVG" }), jsx("button", { onClick: () => handleExportPng(), style: {
+                            padding: '4px 12px',
+                            borderRadius: 4,
+                            border: 'none',
+                            cursor: 'pointer',
+                            background: '#228be6',
+                            color: '#fff',
+                            fontSize: 11,
+                        }, children: "Export PNG" })] }), jsxs("div", { style: { display: 'flex', gap: 12 }, children: [jsx("div", { style: {
+                            width: 400,
+                            height: 400,
+                            background: '#141517',
+                            borderRadius: 6,
+                            position: 'relative',
+                            overflow: 'hidden',
+                        }, children: jsxs("svg", { ref: svgRef, width: 400, height: 400, viewBox: `0 0 ${vb} ${vb}`, style: {
+                                position: 'absolute',
+                                inset: 0,
+                                cursor: editor.tool === 'select' ? 'default' : 'crosshair',
+                            }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: [Array.from({ length: vb + 1 }, (_, i) => (jsxs(React.Fragment, { children: [jsx("line", { x1: i, y1: 0, x2: i, y2: vb, stroke: "rgba(255,255,255,0.08)", strokeWidth: 0.05 }), jsx("line", { x1: 0, y1: i, x2: vb, y2: i, stroke: "rgba(255,255,255,0.08)", strokeWidth: 0.05 })] }, `g${i}`))), jsx("line", { x1: vb / 2, y1: 0, x2: vb / 2, y2: vb, stroke: "rgba(255,255,255,0.15)", strokeWidth: 0.05 }), jsx("line", { x1: 0, y1: vb / 2, x2: vb, y2: vb / 2, stroke: "rgba(255,255,255,0.15)", strokeWidth: 0.05 }), editor.shapes.map((s) => renderShape(s)), pendingShape && renderShape(pendingShape, true)] }) }), jsxs("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 12 }, children: [jsxs("div", { children: [jsx("label", { children: "Grid Size: " }), jsxs("select", { value: editor.config.viewBox, onChange: (e) => editor.setConfig({ ...editor.config, viewBox: Number(e.target.value) }), style: {
+                                            background: '#2c2e33',
+                                            color: '#c1c2c5',
+                                            border: '1px solid #373a40',
+                                            borderRadius: 3,
+                                            padding: 2,
+                                        }, children: [jsx("option", { value: 16, children: "16\u00D716" }), jsx("option", { value: 24, children: "24\u00D724" }), jsx("option", { value: 32, children: "32\u00D732" }), jsx("option", { value: 48, children: "48\u00D748" })] })] }), jsxs("div", { children: [jsx("label", { children: "Stroke Width: " }), jsx("input", { type: "range", min: 0.5, max: 4, step: 0.25, value: editor.config.strokeWidth, onChange: (e) => editor.setConfig({ ...editor.config, strokeWidth: Number(e.target.value) }), style: { width: 100 } }), jsxs("span", { children: [" ", editor.config.strokeWidth] })] }), jsxs("div", { children: [jsx("label", { children: "Variant: " }), ['outline', 'filled', 'duotone'].map((v) => (jsx("button", { onClick: () => editor.setConfig({ ...editor.config, variant: v }), style: {
+                                            padding: '2px 6px',
+                                            marginLeft: 2,
+                                            borderRadius: 3,
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            background: editor.config.variant === v ? '#339af0' : '#2c2e33',
+                                            color: editor.config.variant === v ? '#fff' : '#c1c2c5',
+                                            fontSize: 11,
+                                        }, children: v }, v)))] }), editor.selectedId &&
+                                (() => {
+                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                                    const sel = editor.shapes.find((s) => s.id === editor.selectedId);
+                                    if (!sel) {
+                                        return null;
+                                    }
+                                    return (jsxs("div", { style: { borderTop: '1px solid #373a40', paddingTop: 8 }, children: [jsxs("strong", { children: ["Selected: ", sel.type] }), sel.type === 'rect' && (jsxs("div", { style: {
+                                                    display: 'grid',
+                                                    gridTemplateColumns: '60px 1fr',
+                                                    gap: 2,
+                                                    marginTop: 4,
+                                                    fontSize: 11,
+                                                }, children: [jsx("span", { children: "X:" }), jsx("input", { type: "number", value: (_a = sel.x) !== null && _a !== void 0 ? _a : 0, step: 0.5, onChange: (e) => editor.updateShape(sel.id, { x: Number(e.target.value) }), style: {
+                                                            background: '#2c2e33',
+                                                            color: '#c1c2c5',
+                                                            border: '1px solid #373a40',
+                                                            borderRadius: 2,
+                                                            padding: 1,
+                                                            fontSize: 10,
+                                                        } }), jsx("span", { children: "Y:" }), jsx("input", { type: "number", value: (_b = sel.y) !== null && _b !== void 0 ? _b : 0, step: 0.5, onChange: (e) => editor.updateShape(sel.id, { y: Number(e.target.value) }), style: {
+                                                            background: '#2c2e33',
+                                                            color: '#c1c2c5',
+                                                            border: '1px solid #373a40',
+                                                            borderRadius: 2,
+                                                            padding: 1,
+                                                            fontSize: 10,
+                                                        } }), jsx("span", { children: "Width:" }), jsx("input", { type: "number", value: (_c = sel.width) !== null && _c !== void 0 ? _c : 0, step: 0.5, onChange: (e) => editor.updateShape(sel.id, { width: Number(e.target.value) }), style: {
+                                                            background: '#2c2e33',
+                                                            color: '#c1c2c5',
+                                                            border: '1px solid #373a40',
+                                                            borderRadius: 2,
+                                                            padding: 1,
+                                                            fontSize: 10,
+                                                        } }), jsx("span", { children: "Height:" }), jsx("input", { type: "number", value: (_d = sel.height) !== null && _d !== void 0 ? _d : 0, step: 0.5, onChange: (e) => editor.updateShape(sel.id, { height: Number(e.target.value) }), style: {
+                                                            background: '#2c2e33',
+                                                            color: '#c1c2c5',
+                                                            border: '1px solid #373a40',
+                                                            borderRadius: 2,
+                                                            padding: 1,
+                                                            fontSize: 10,
+                                                        } })] })), sel.type === 'circle' && (jsxs("div", { style: {
+                                                    display: 'grid',
+                                                    gridTemplateColumns: '60px 1fr',
+                                                    gap: 2,
+                                                    marginTop: 4,
+                                                    fontSize: 11,
+                                                }, children: [jsx("span", { children: "CX:" }), jsx("input", { type: "number", value: (_e = sel.cx) !== null && _e !== void 0 ? _e : 0, step: 0.5, onChange: (e) => editor.updateShape(sel.id, { cx: Number(e.target.value) }), style: {
+                                                            background: '#2c2e33',
+                                                            color: '#c1c2c5',
+                                                            border: '1px solid #373a40',
+                                                            borderRadius: 2,
+                                                            padding: 1,
+                                                            fontSize: 10,
+                                                        } }), jsx("span", { children: "CY:" }), jsx("input", { type: "number", value: (_f = sel.cy) !== null && _f !== void 0 ? _f : 0, step: 0.5, onChange: (e) => editor.updateShape(sel.id, { cy: Number(e.target.value) }), style: {
+                                                            background: '#2c2e33',
+                                                            color: '#c1c2c5',
+                                                            border: '1px solid #373a40',
+                                                            borderRadius: 2,
+                                                            padding: 1,
+                                                            fontSize: 10,
+                                                        } }), jsx("span", { children: "Radius:" }), jsx("input", { type: "number", value: (_g = sel.r) !== null && _g !== void 0 ? _g : 0, step: 0.5, onChange: (e) => editor.updateShape(sel.id, { r: Number(e.target.value) }), style: {
+                                                            background: '#2c2e33',
+                                                            color: '#c1c2c5',
+                                                            border: '1px solid #373a40',
+                                                            borderRadius: 2,
+                                                            padding: 1,
+                                                            fontSize: 10,
+                                                        } })] })), sel.type === 'path' && (jsxs("div", { style: { marginTop: 4 }, children: [jsx("label", { style: { fontSize: 10 }, children: "SVG Path:" }), jsx("textarea", { value: (_h = sel.d) !== null && _h !== void 0 ? _h : '', onChange: (e) => editor.updateShape(sel.id, { d: e.target.value }), rows: 3, style: {
+                                                            width: '100%',
+                                                            background: '#2c2e33',
+                                                            color: '#c1c2c5',
+                                                            border: '1px solid #373a40',
+                                                            borderRadius: 3,
+                                                            padding: 4,
+                                                            fontSize: 10,
+                                                            fontFamily: 'monospace',
+                                                            resize: 'vertical',
+                                                        } })] })), jsxs("div", { style: { marginTop: 4, display: 'flex', gap: 4, alignItems: 'center' }, children: [jsx("span", { style: { fontSize: 10 }, children: "Fill:" }), jsx("input", { type: "color", value: (_j = sel.fill) !== null && _j !== void 0 ? _j : '#000000', onChange: (e) => editor.updateShape(sel.id, { fill: e.target.value }), style: {
+                                                            width: 24,
+                                                            height: 18,
+                                                            border: 'none',
+                                                            padding: 0,
+                                                            cursor: 'pointer',
+                                                        } }), jsx("span", { style: { fontSize: 10 }, children: "Stroke:" }), jsx("input", { type: "color", value: (_k = sel.stroke) !== null && _k !== void 0 ? _k : '#000000', onChange: (e) => editor.updateShape(sel.id, { stroke: e.target.value }), style: {
+                                                            width: 24,
+                                                            height: 18,
+                                                            border: 'none',
+                                                            padding: 0,
+                                                            cursor: 'pointer',
+                                                        } })] })] }));
+                                })(), jsxs("div", { style: { borderTop: '1px solid #373a40', paddingTop: 8 }, children: [jsxs("strong", { children: ["Shapes (", editor.shapes.length, ")"] }), jsx("div", { style: { marginTop: 4, maxHeight: 120, overflowY: 'auto' }, children: editor.shapes.map((s) => (jsxs("div", { onClick: () => editor.setSelectedId(s.id), style: {
+                                                padding: '2px 4px',
+                                                cursor: 'pointer',
+                                                borderRadius: 2,
+                                                fontSize: 11,
+                                                background: editor.selectedId === s.id ? '#339af0' : 'transparent',
+                                                color: editor.selectedId === s.id ? '#fff' : '#c1c2c5',
+                                            }, children: [s.type, " ", s.id.slice(-4)] }, s.id))) })] }), jsxs("div", { style: { borderTop: '1px solid #373a40', paddingTop: 8 }, children: [jsx("strong", { children: "Preview" }), jsx("div", { style: { display: 'flex', gap: 8, marginTop: 8, alignItems: 'end' }, children: [16, 24, 32, 48].map((size) => (jsxs("div", { style: { textAlign: 'center', fontSize: 10, color: '#868e96' }, children: [jsx("div", { style: {
+                                                        background: '#fff',
+                                                        display: 'inline-block',
+                                                        padding: 4,
+                                                        borderRadius: 3,
+                                                    }, dangerouslySetInnerHTML: {
+                                                        __html: editor
+                                                            .toSvg()
+                                                            .replace(/width="\d+"/, `width="${size}"`)
+                                                            .replace(/height="\d+"/, `height="${size}"`),
+                                                    } }), jsxs("div", { children: [size, "px"] })] }, size))) })] })] })] })] }));
 };
 
 export { NiceIconEditor, useIconEditor };