'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');

// ── Default Config ──────────────────────────────────────────────
const DEFAULT_ICON_CONFIG = {
    viewBox: 24,
    strokeWidth: 2,
    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 [snapToGrid, setSnapToGrid] = React.useState(true);
    const [historyIdx, setHistoryIdx] = React.useState(0);
    const historyRef = React.useRef([[]]);
    // Parse initial SVG
    React.useEffect(() => {
        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] });
        }
        if (parsed.length > 0) {
            setShapes(parsed);
            historyRef.current = [JSON.parse(JSON.stringify(parsed))];
            setHistoryIdx(0);
        }
    }, [initialSvg]);
    const pushHistory = React.useCallback((newShapes) => {
        const snap = JSON.parse(JSON.stringify(newShapes));
        historyRef.current = historyRef.current.slice(0, historyIdx + 1);
        historyRef.current.push(snap);
        if (historyRef.current.length > 50)
            historyRef.current.shift();
        setHistoryIdx(historyRef.current.length - 1);
    }, [historyIdx]);
    const undo = React.useCallback(() => {
        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)
            return;
        const newIdx = historyIdx + 1;
        setHistoryIdx(newIdx);
        setShapes(JSON.parse(JSON.stringify(historyRef.current[newIdx])));
    }, [historyIdx]);
    const addShape = React.useCallback((shape) => {
        const id = `shape-${Date.now()}`;
        const newShapes = [...shapes, { ...shape, id }];
        setShapes(newShapes);
        setSelectedId(id);
        pushHistory(newShapes);
    }, [shapes, pushHistory]);
    const updateShape = React.useCallback((id, updates) => {
        const newShapes = shapes.map((s) => (s.id === id ? { ...s, ...updates } : s));
        setShapes(newShapes);
        pushHistory(newShapes);
    }, [shapes, pushHistory]);
    const deleteShape = React.useCallback((id) => {
        const newShapes = shapes.filter((s) => s.id !== id);
        setShapes(newShapes);
        if (selectedId === id)
            setSelectedId(null);
        pushHistory(newShapes);
    }, [shapes, selectedId, pushHistory]);
    const toSvg = React.useCallback(() => {
        const vb = config.viewBox;
        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":
                    return `  <path d="${s.d}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linecap="${config.strokeLinecap}" stroke-linejoin="${config.strokeLinejoin}" />`;
                case "circle":
                    return `  <circle cx="${s.cx}" cy="${s.cy}" r="${s.r}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" />`;
                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":
                    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 "";
            }
        }).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>/, "")
            .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");
        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,
        canUndo: historyIdx > 0,
        canRedo: historyIdx < historyRef.current.length - 1,
        snapToGrid, setSnapToGrid,
    };
}
// ── Component ───────────────────────────────────────────────────
/** SVG icon editor with grid, snap, drawing, and export capabilities. */
const NiceIconEditor = ({ initialSvg, gridSize = 24, onSave, onExport, className = "", }) => {
    const editor = useIconEditor(initialSvg);
    const svgRef = React.useRef(null);
    const drawing = React.useRef(false);
    const drawStart = React.useRef({ x: 0, y: 0 });
    const dragStart = React.useRef({ x: 0, y: 0 });
    const draggingShape = React.useRef(null);
    const [pendingShape, setPendingShape] = React.useState(null);
    const vb = editor.config.viewBox;
    // Keyboard shortcuts
    React.useEffect(() => {
        const handler = (e) => {
            if (e.key === "Delete" && editor.selectedId) {
                editor.deleteShape(editor.selectedId);
                return;
            }
            if (e.ctrlKey && e.key === "z") {
                e.preventDefault();
                editor.undo();
                return;
            }
            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")
                editor.setSelectedId(null);
        };
        window.addEventListener("keydown", handler);
        return () => window.removeEventListener("keydown", handler);
    }, [editor]);
    const snapCoord = (v) => {
        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)
            return { x: 0, y: 0 };
        const rect = svg.getBoundingClientRect();
        return {
            x: snapCoord(((e.clientX - rect.left) / rect.width) * vb),
            y: snapCoord(((e.clientY - rect.top) / rect.height) * vb),
        };
    };
    const handleMouseDown = (e) => {
        const { x, y } = getSvgCoord(e);
        if (editor.tool === "select") {
            // Check if clicking on a shape for drag
            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")
                    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) {
                editor.setSelectedId(hit.id);
                draggingShape.current = hit.id;
                dragStart.current = { x, y };
            }
            else {
                editor.setSelectedId(null);
            }
            return;
        }
        drawing.current = true;
        drawStart.current = { x, y };
        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 === "line") {
            setPendingShape({ id: "pending", type: "line", x1: x, y1: y, x2: x, y2: y });
        }
    };
    const handleMouseMove = (e) => {
        var _a, _b, _c, _d;
        const { x, y } = getSvgCoord(e);
        // Dragging existing shape
        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);
            if (shape) {
                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")
                    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)
            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) });
        }
        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 });
        }
    };
    const handleMouseUp = () => {
        var _a, _b, _c, _d, _e, _f, _g;
        draggingShape.current = null;
        if (!drawing.current || !pendingShape) {
            drawing.current = false;
            return;
        }
        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) {
            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) {
            editor.addShape(shapeData);
        }
        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)
                editor.addShape(shapeData);
        }
        setPendingShape(null);
    };
    const handleSave = () => onSave === null || onSave === void 0 ? void 0 : onSave(editor.toSvg());
    const handleExportPng = async (sizes = [16, 24, 32, 48, 64, 128]) => {
        const svg = editor.toSvg();
        const pngSizes = new Map();
        for (const size of sizes) {
            const canvas = document.createElement("canvas");
            canvas.width = size;
            canvas.height = size;
            const ctx = canvas.getContext("2d");
            const img = new Image();
            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.src = url;
            });
        }
        onExport === null || onExport === void 0 ? void 0 : onExport({ svg, reactComponent: editor.toReactComponent("MyIcon"), pngSizes });
    };
    const renderShape = (s, isPending = false) => {
        var _a, _b, _c;
        const fill = (_a = s.fill) !== null && _a !== void 0 ? _a : editor.config.fill;
        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" } };
        switch (s.type) {
            case "path": return jsxRuntime.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 jsxRuntime.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 jsxRuntime.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 jsxRuntime.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,
    });
    return (jsxRuntime.jsxs("div", { className: `nice-icon-editor ${className}`, style: { display: "flex", flexDirection: "column", gap: 8, background: "#1a1b1e", color: "#c1c2c5", padding: 12, borderRadius: 8 }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", gap: 4, fontSize: 12, alignItems: "center", flexWrap: "wrap" }, children: [["select", "path", "circle", "rect", "line"].map((t) => (jsxRuntime.jsxs("button", { onClick: () => editor.setTool(t), style: toolBtnStyle(editor.tool === t), children: [t, " (", t[0], ")"] }, t))), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: "#373a40" } }), jsxRuntime.jsx("button", { onClick: editor.undo, disabled: !editor.canUndo, style: toolBtnStyle(false), title: "Undo (Ctrl+Z)", children: "\u21A9" }), jsxRuntime.jsx("button", { onClick: editor.redo, disabled: !editor.canRedo, style: toolBtnStyle(false), title: "Redo (Ctrl+Y)", children: "\u21AA" }), jsxRuntime.jsx("div", { style: { width: 1, height: 20, background: "#373a40" } }), jsxRuntime.jsx("button", { onClick: () => editor.setSnapToGrid(s => !s), style: toolBtnStyle(editor.snapToGrid), title: "Snap to Grid (G)", children: "\u229E" }), editor.selectedId && jsxRuntime.jsx("button", { onClick: () => editor.deleteShape(editor.selectedId), style: { ...toolBtnStyle(false), color: "#ff6b6b" }, title: "Delete (Del)", children: "\u2715" }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsx("button", { onClick: handleSave, style: { padding: "4px 12px", borderRadius: 4, border: "none", cursor: "pointer", background: "#2f9e44", color: "#fff", fontSize: 11 }, children: "Save SVG" }), jsxRuntime.jsx("button", { onClick: () => handleExportPng(), style: { padding: "4px 12px", borderRadius: 4, border: "none", cursor: "pointer", background: "#228be6", color: "#fff", fontSize: 11 }, children: "Export PNG" })] }), jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [jsxRuntime.jsx("div", { style: { width: 400, height: 400, background: "#141517", borderRadius: 6, position: "relative", overflow: "hidden" }, children: jsxRuntime.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) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("line", { x1: i, y1: 0, x2: i, y2: vb, stroke: "rgba(255,255,255,0.08)", strokeWidth: 0.05 }), jsxRuntime.jsx("line", { x1: 0, y1: i, x2: vb, y2: i, stroke: "rgba(255,255,255,0.08)", strokeWidth: 0.05 })] }, `g${i}`))), jsxRuntime.jsx("line", { x1: vb / 2, y1: 0, x2: vb / 2, y2: vb, stroke: "rgba(255,255,255,0.15)", strokeWidth: 0.05 }), jsxRuntime.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)] }) }), jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8, fontSize: 12 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Grid Size: " }), jsxRuntime.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: [jsxRuntime.jsx("option", { value: 16, children: "16\u00D716" }), jsxRuntime.jsx("option", { value: 24, children: "24\u00D724" }), jsxRuntime.jsx("option", { value: 32, children: "32\u00D732" }), jsxRuntime.jsx("option", { value: 48, children: "48\u00D748" })] })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Stroke Width: " }), jsxRuntime.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 } }), jsxRuntime.jsxs("span", { children: [" ", editor.config.strokeWidth] })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Variant: " }), ["outline", "filled", "duotone"].map(v => (jsxRuntime.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 (jsxRuntime.jsxs("div", { style: { borderTop: "1px solid #373a40", paddingTop: 8 }, children: [jsxRuntime.jsxs("strong", { children: ["Selected: ", sel.type] }), sel.type === "rect" && (jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "60px 1fr", gap: 2, marginTop: 4, fontSize: 11 }, children: [jsxRuntime.jsx("span", { children: "X:" }), jsxRuntime.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 } }), jsxRuntime.jsx("span", { children: "Y:" }), jsxRuntime.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 } }), jsxRuntime.jsx("span", { children: "Width:" }), jsxRuntime.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 } }), jsxRuntime.jsx("span", { children: "Height:" }), jsxRuntime.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" && (jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "60px 1fr", gap: 2, marginTop: 4, fontSize: 11 }, children: [jsxRuntime.jsx("span", { children: "CX:" }), jsxRuntime.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 } }), jsxRuntime.jsx("span", { children: "CY:" }), jsxRuntime.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 } }), jsxRuntime.jsx("span", { children: "Radius:" }), jsxRuntime.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" && (jsxRuntime.jsxs("div", { style: { marginTop: 4 }, children: [jsxRuntime.jsx("label", { style: { fontSize: 10 }, children: "SVG Path:" }), jsxRuntime.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" } })] })), jsxRuntime.jsxs("div", { style: { marginTop: 4, display: "flex", gap: 4, alignItems: "center" }, children: [jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: "Fill:" }), jsxRuntime.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" } }), jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: "Stroke:" }), jsxRuntime.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" } })] })] }));
                            })(), jsxRuntime.jsxs("div", { style: { borderTop: "1px solid #373a40", paddingTop: 8 }, children: [jsxRuntime.jsxs("strong", { children: ["Shapes (", editor.shapes.length, ")"] }), jsxRuntime.jsx("div", { style: { marginTop: 4, maxHeight: 120, overflowY: "auto" }, children: editor.shapes.map(s => (jsxRuntime.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))) })] }), jsxRuntime.jsxs("div", { style: { borderTop: "1px solid #373a40", paddingTop: 8 }, children: [jsxRuntime.jsx("strong", { children: "Preview" }), jsxRuntime.jsx("div", { style: { display: "flex", gap: 8, marginTop: 8, alignItems: "end" }, children: [16, 24, 32, 48].map(size => (jsxRuntime.jsxs("div", { style: { textAlign: "center", fontSize: 10, color: "#868e96" }, children: [jsxRuntime.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}"`) } }), jsxRuntime.jsxs("div", { children: [size, "px"] })] }, size))) })] })] })] })] }));
};

exports.NiceIconEditor = NiceIconEditor;
exports.useIconEditor = useIconEditor;
//# sourceMappingURL=NiceIconEditor.js.map
