import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import React from 'react';

// ── Component Palette ───────────────────────────────────────────
const COMPONENT_DEFS = [
    { type: "Container", label: "Container", icon: "📦", defaultProps: {}, defaultStyle: { padding: 16, display: "flex", flexDirection: "column", gap: 8 }, allowChildren: true },
    { type: "Row", label: "Row", icon: "↔️", defaultProps: {}, defaultStyle: { display: "flex", flexDirection: "row", gap: 8, alignItems: "center" }, allowChildren: true },
    { type: "Column", label: "Column", icon: "↕️", defaultProps: {}, defaultStyle: { display: "flex", flexDirection: "column", gap: 8 }, allowChildren: true },
    { type: "Text", label: "Text", icon: "📝", defaultProps: { text: "Text content" }, defaultStyle: { fontSize: 14 }, allowChildren: false },
    { type: "Heading", label: "Heading", icon: "🔤", defaultProps: { text: "Heading", level: 2 }, defaultStyle: { fontSize: 24, fontWeight: "bold" }, allowChildren: false },
    { type: "Button", label: "Button", icon: "🔘", defaultProps: { text: "Click me", variant: "primary" }, defaultStyle: { padding: "8px 16px", borderRadius: 4, cursor: "pointer" }, allowChildren: false },
    { type: "TextInput", label: "Input", icon: "✏️", defaultProps: { placeholder: "Enter text..." }, defaultStyle: { padding: 8, border: "1px solid #ccc", borderRadius: 4 }, allowChildren: false },
    { type: "Image", label: "Image", icon: "🖼️", defaultProps: { src: "", alt: "Image" }, defaultStyle: { width: 200, height: 150, objectFit: "cover" }, allowChildren: false },
    { type: "Spacer", label: "Spacer", icon: "⬜", defaultProps: {}, defaultStyle: { height: 16 }, allowChildren: false },
    { type: "Divider", label: "Divider", icon: "➖", defaultProps: {}, defaultStyle: { height: 1, background: "#dee2e6", width: "100%" }, allowChildren: false },
    { type: "Card", label: "Card", icon: "🗂️", defaultProps: {}, defaultStyle: { padding: 16, border: "1px solid #dee2e6", borderRadius: 8, background: "#fff" }, allowChildren: true },
    { type: "List", label: "List", icon: "📋", defaultProps: { items: ["Item 1", "Item 2", "Item 3"] }, defaultStyle: { listStyleType: "disc", paddingLeft: 20 }, allowChildren: false },
];
// ── Code Generation ─────────────────────────────────────────────
function nodeToJsx(node, indent = 2) {
    var _a, _b, _c;
    const pad = " ".repeat(indent);
    const styleStr = Object.entries(node.style)
        .map(([k, v]) => `${k}: ${typeof v === "string" ? `"${v}"` : v}`)
        .join(", ");
    switch (node.type) {
        case "Text":
            return `${pad}<p style={{ ${styleStr} }}>${node.props.text}</p>`;
        case "Heading":
            return `${pad}<h${(_a = node.props.level) !== null && _a !== void 0 ? _a : 2} style={{ ${styleStr} }}>${node.props.text}</h${(_b = node.props.level) !== null && _b !== void 0 ? _b : 2}>`;
        case "Button":
            return `${pad}<button style={{ ${styleStr} }}>${node.props.text}</button>`;
        case "TextInput":
            return `${pad}<input placeholder="${node.props.placeholder}" style={{ ${styleStr} }} />`;
        case "Image":
            return `${pad}<img src="${node.props.src}" alt="${node.props.alt}" style={{ ${styleStr} }} />`;
        case "Spacer":
            return `${pad}<div style={{ ${styleStr} }} />`;
        case "Divider":
            return `${pad}<hr style={{ ${styleStr} }} />`;
        case "List":
            const items = (_c = node.props.items) !== null && _c !== void 0 ? _c : [];
            return `${pad}<ul style={{ ${styleStr} }}>\n${items.map((i) => `${pad}  <li>${i}</li>`).join("\n")}\n${pad}</ul>`;
        default: {
            const Tag = node.type === "Card" ? "div" : "div";
            if (node.children.length === 0) {
                return `${pad}<${Tag} style={{ ${styleStr} }} />`;
            }
            const kids = node.children.map((c) => nodeToJsx(c, indent + 2)).join("\n");
            return `${pad}<${Tag} style={{ ${styleStr} }}>\n${kids}\n${pad}</${Tag}>`;
        }
    }
}
function exportToReact(tree, componentName = "MyComponent") {
    const body = tree.map((n) => nodeToJsx(n, 4)).join("\n");
    return `import React from "react";\n\nexport const ${componentName}: React.FC = () => {\n  return (\n    <div>\n${body}\n    </div>\n  );\n};\n`;
}
// ── Hook ────────────────────────────────────────────────────────
function useUIDesigner() {
    const [tree, setTree] = React.useState([]);
    const [selectedId, setSelectedId] = React.useState(null);
    const historyRef = React.useRef([[]]);
    const [historyIdx, setHistoryIdx] = React.useState(0);
    const pushHistory = React.useCallback((newTree) => {
        const next = historyRef.current.slice(0, historyIdx + 1);
        next.push(JSON.parse(JSON.stringify(newTree)));
        if (next.length > 40)
            next.shift();
        historyRef.current = next;
        setHistoryIdx(next.length - 1);
    }, [historyIdx]);
    const undo = React.useCallback(() => {
        if (historyIdx <= 0)
            return;
        const newIdx = historyIdx - 1;
        setHistoryIdx(newIdx);
        setTree(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);
        setTree(JSON.parse(JSON.stringify(historyRef.current[newIdx])));
    }, [historyIdx]);
    const addNode = React.useCallback((type, parentId) => {
        const def = COMPONENT_DEFS.find((d) => d.type === type);
        if (!def)
            return;
        const node = {
            id: `node-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
            type,
            props: { ...def.defaultProps },
            children: [],
            style: { ...def.defaultStyle },
        };
        let newTree;
        if (parentId) {
            newTree = addToParent(tree, parentId, node);
        }
        else {
            newTree = [...tree, node];
        }
        setTree(newTree);
        pushHistory(newTree);
        setSelectedId(node.id);
    }, [tree, pushHistory]);
    const removeNode = React.useCallback((id) => {
        const newTree = removeFromTree(tree, id);
        setTree(newTree);
        pushHistory(newTree);
        if (selectedId === id)
            setSelectedId(null);
    }, [tree, selectedId, pushHistory]);
    const updateNode = React.useCallback((id, updates) => {
        const newTree = updateInTree(tree, id, updates);
        setTree(newTree);
        pushHistory(newTree);
    }, [tree, pushHistory]);
    const moveNode = React.useCallback((id, newParentId, index) => {
        // Find the node, remove it from current position, insert at new position
        const node = findInTree(tree, id);
        if (!node)
            return;
        let newTree = removeFromTree(tree, id);
        if (newParentId) {
            newTree = addToParent(newTree, newParentId, node, index);
        }
        else {
            if (index !== undefined) {
                newTree = [...newTree.slice(0, index), node, ...newTree.slice(index)];
            }
            else {
                newTree = [...newTree, node];
            }
        }
        setTree(newTree);
        pushHistory(newTree);
    }, [tree, pushHistory]);
    return {
        tree, setTree,
        selectedId, setSelectedId,
        addNode, removeNode, updateNode, moveNode,
        exportCode: () => exportToReact(tree),
        undo, redo,
        canUndo: historyIdx > 0,
        canRedo: historyIdx < historyRef.current.length - 1,
    };
}
function addToParent(nodes, parentId, child, index) {
    return nodes.map((n) => {
        if (n.id === parentId) {
            const kids = [...n.children];
            if (index !== undefined) {
                kids.splice(index, 0, child);
            }
            else {
                kids.push(child);
            }
            return { ...n, children: kids };
        }
        return { ...n, children: addToParent(n.children, parentId, child, index) };
    });
}
function removeFromTree(nodes, id) {
    return nodes
        .filter((n) => n.id !== id)
        .map((n) => ({ ...n, children: removeFromTree(n.children, id) }));
}
function findInTree(nodes, id) {
    for (const n of nodes) {
        if (n.id === id)
            return n;
        const found = findInTree(n.children, id);
        if (found)
            return found;
    }
    return null;
}
function updateInTree(nodes, id, updates) {
    return nodes.map((n) => {
        if (n.id === id) {
            return {
                ...n,
                props: updates.props ? { ...n.props, ...updates.props } : n.props,
                style: updates.style ? { ...n.style, ...updates.style } : n.style,
            };
        }
        return { ...n, children: updateInTree(n.children, id, updates) };
    });
}
// ── Component ───────────────────────────────────────────────────
/** Visual drag & drop UI builder that generates React code. */
const NiceUIDesigner = ({ onChange, onExport, className = "", }) => {
    var _a, _b, _c, _d, _e, _f;
    const designer = useUIDesigner();
    const [breakpoint, setBreakpoint] = React.useState("desktop");
    const [dragType, setDragType] = React.useState(null);
    const [showCode, setShowCode] = React.useState(false);
    React.useEffect(() => {
        onChange === null || onChange === void 0 ? void 0 : onChange(designer.tree);
    }, [designer.tree, onChange]);
    // Keyboard shortcuts
    React.useEffect(() => {
        const handler = (e) => {
            if (e.ctrlKey && e.key === "z") {
                e.preventDefault();
                designer.undo();
            }
            if (e.ctrlKey && e.key === "y") {
                e.preventDefault();
                designer.redo();
            }
            if (e.key === "Delete" && designer.selectedId) {
                designer.removeNode(designer.selectedId);
            }
        };
        window.addEventListener("keydown", handler);
        return () => window.removeEventListener("keydown", handler);
    }, [designer]);
    const canvasWidth = breakpoint === "mobile" ? 375 : breakpoint === "tablet" ? 768 : "100%";
    const selectedNode = designer.selectedId ? findInTree(designer.tree, designer.selectedId) : null;
    const btnStyle = (active) => ({
        padding: "4px 8px", border: "none", borderRadius: 3, cursor: "pointer", fontSize: 11,
        background: active ? "#339af0" : "#2c2e33", color: active ? "#fff" : "#c1c2c5",
    });
    const fieldStyle = {
        width: "100%", padding: "2px 4px", background: "#2c2e33", color: "#c1c2c5",
        border: "1px solid #373a40", borderRadius: 3, fontSize: 10,
    };
    const handleDrop = (e, parentId) => {
        e.preventDefault();
        e.stopPropagation();
        if (dragType) {
            designer.addNode(dragType, parentId);
            setDragType(null);
        }
    };
    const handleDragOver = (e) => {
        e.preventDefault();
        e.stopPropagation();
    };
    const renderNode = (node, depth = 0) => {
        var _a, _b, _c, _d;
        const isSelected = designer.selectedId === node.id;
        const def = COMPONENT_DEFS.find((d) => d.type === node.type);
        return (jsxs("div", { onClick: (e) => { e.stopPropagation(); designer.setSelectedId(node.id); }, onDrop: (e) => (def === null || def === void 0 ? void 0 : def.allowChildren) ? handleDrop(e, node.id) : undefined, onDragOver: (def === null || def === void 0 ? void 0 : def.allowChildren) ? handleDragOver : undefined, style: {
                ...node.style,
                outline: isSelected ? "2px solid #339af0" : "1px dashed rgba(0,0,0,0.1)",
                outlineOffset: 1,
                minHeight: 24,
                position: "relative",
                cursor: "pointer",
            }, children: [node.type === "Text" || node.type === "Heading"
                    ? String((_a = node.props.text) !== null && _a !== void 0 ? _a : "")
                    : node.type === "Button"
                        ? jsx("button", { style: { pointerEvents: "none" }, children: String((_b = node.props.text) !== null && _b !== void 0 ? _b : "Button") })
                        : node.type === "TextInput"
                            ? jsx("input", { placeholder: String((_c = node.props.placeholder) !== null && _c !== void 0 ? _c : ""), readOnly: true, style: { pointerEvents: "none", ...node.style } })
                            : node.type === "Image"
                                ? jsx("div", { style: { width: "100%", height: "100%", background: "#e9ecef", display: "flex", alignItems: "center", justifyContent: "center", color: "#868e96", fontSize: 11 }, children: "\uD83D\uDDBC\uFE0F Image" })
                                : node.type === "List"
                                    ? jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => jsx("li", { children: item }, i)) })
                                    : node.type === "Divider"
                                        ? jsx("hr", { style: { margin: 0, border: "none", borderTop: "1px solid #dee2e6", width: "100%" } })
                                        : node.children.map((c) => renderNode(c, depth + 1)), isSelected && jsx("div", { style: { position: "absolute", top: -12, left: 0, fontSize: 9, background: "#339af0", color: "#fff", padding: "0 4px", borderRadius: "2px 2px 0 0" }, children: node.type })] }, node.id));
    };
    const renderTreeItem = (node, depth = 0) => {
        const def = COMPONENT_DEFS.find((d) => d.type === node.type);
        return (jsxs(React.Fragment, { children: [jsxs("div", { onClick: () => designer.setSelectedId(node.id), style: {
                        padding: "2px 4px", paddingLeft: 4 + depth * 12, fontSize: 10,
                        cursor: "pointer", display: "flex", alignItems: "center", gap: 4,
                        background: designer.selectedId === node.id ? "rgba(51,154,240,0.2)" : "transparent",
                        borderRadius: 2,
                    }, children: [jsx("span", { children: def === null || def === void 0 ? void 0 : def.icon }), jsxs("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [node.type, node.props.text ? `: ${String(node.props.text).slice(0, 15)}` : ""] })] }), node.children.map((c) => renderTreeItem(c, depth + 1))] }, node.id));
    };
    return (jsxs("div", { className: `nice-ui-designer ${className}`, style: { display: "flex", gap: 8, height: "100%", background: "#1a1b1e", color: "#c1c2c5", padding: 8, borderRadius: 8 }, children: [jsxs("div", { style: { width: 160, display: "flex", flexDirection: "column", gap: 8, fontSize: 11 }, children: [jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: "block", marginBottom: 4 }, children: "Components" }), jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: COMPONENT_DEFS.map((def) => (jsxs("button", { draggable: true, onDragStart: () => setDragType(def.type), onDragEnd: () => setDragType(null), onClick: () => { var _a; return designer.addNode(def.type, (_a = designer.selectedId) !== null && _a !== void 0 ? _a : undefined); }, style: {
                                        display: "flex", alignItems: "center", gap: 4, padding: "4px 6px",
                                        background: "#2c2e33", border: "none", borderRadius: 3,
                                        color: "#c1c2c5", cursor: "grab", textAlign: "left", fontSize: 11,
                                    }, children: [def.icon, " ", def.label] }, def.type))) })] }), jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: "block", marginBottom: 4 }, children: "Tree" }), jsx("div", { style: { maxHeight: 200, overflowY: "auto" }, children: designer.tree.length === 0
                                    ? jsx("div", { style: { color: "#5c5f66", padding: 4 }, children: "Empty" })
                                    : designer.tree.map((n) => renderTreeItem(n)) })] })] }), jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 4 }, children: [jsxs("div", { style: { display: "flex", gap: 4, alignItems: "center", fontSize: 11 }, children: [jsx("button", { onClick: () => designer.undo(), disabled: !designer.canUndo, style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 }, title: "Undo (Ctrl+Z)", children: "\u21A9" }), jsx("button", { onClick: () => designer.redo(), disabled: !designer.canRedo, style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 }, title: "Redo (Ctrl+Y)", children: "\u21AA" }), jsx("div", { style: { width: 1, height: 16, background: "#373a40" } }), jsx("button", { onClick: () => setBreakpoint("desktop"), style: btnStyle(breakpoint === "desktop"), children: "\uD83D\uDDA5 Desktop" }), jsx("button", { onClick: () => setBreakpoint("tablet"), style: btnStyle(breakpoint === "tablet"), children: "\uD83D\uDCF1 Tablet" }), jsx("button", { onClick: () => setBreakpoint("mobile"), style: btnStyle(breakpoint === "mobile"), children: "\uD83D\uDCF2 Mobile" }), jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsx("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: "#ff6b6b" }, children: "\uD83D\uDDD1 Delete" })), jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ["</>", " Code"] }), jsx("button", { onClick: () => onExport === null || onExport === void 0 ? void 0 : onExport(designer.exportCode()), style: { padding: "4px 8px", background: "#228be6", color: "#fff", border: "none", borderRadius: 3, cursor: "pointer", fontSize: 11 }, children: "Export" })] }), showCode ? (jsx("pre", { style: { flex: 1, background: "#141517", borderRadius: 6, padding: 12, margin: 0, overflow: "auto", fontSize: 11, color: "#a6e3a1", fontFamily: "monospace" }, children: designer.exportCode() })) : (jsx("div", { style: {
                            flex: 1, background: "#fff", borderRadius: 6, padding: 16, overflow: "auto", color: "#212529",
                            maxWidth: canvasWidth, margin: breakpoint !== "desktop" ? "0 auto" : undefined,
                            border: breakpoint !== "desktop" ? "1px solid #373a40" : undefined,
                            transition: "max-width 0.2s",
                        }, onDrop: (e) => handleDrop(e), onDragOver: handleDragOver, children: designer.tree.length === 0
                            ? jsx("div", { style: { textAlign: "center", padding: 40, color: "#868e96" }, children: "Drag or click a component to add it" })
                            : designer.tree.map((n) => renderNode(n)) }))] }), jsxs("div", { style: { width: 200, fontSize: 11, display: "flex", flexDirection: "column", gap: 4, overflowY: "auto" }, children: [jsx("strong", { style: { fontSize: 12 }, children: "Properties" }), selectedNode ? (jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [jsxs("div", { style: { color: "#868e96" }, children: [(_a = COMPONENT_DEFS.find((d) => d.type === selectedNode.type)) === null || _a === void 0 ? void 0 : _a.icon, " ", selectedNode.type] }), selectedNode.props.text !== undefined && (jsxs("div", { children: [jsx("label", { children: "Text" }), jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxs("div", { children: [jsx("label", { children: "Placeholder" }), jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxs("div", { children: [jsx("label", { children: "Heading Level" }), jsx("select", { value: Number(selectedNode.props.level), onChange: (e) => designer.updateNode(selectedNode.id, { props: { level: Number(e.target.value) } }), style: fieldStyle, children: [1, 2, 3, 4, 5, 6].map((v) => jsxs("option", { value: v, children: ["H", v] }, v)) })] })), selectedNode.props.variant !== undefined && (jsxs("div", { children: [jsx("label", { children: "Variant" }), jsx("select", { value: String(selectedNode.props.variant), onChange: (e) => designer.updateNode(selectedNode.id, { props: { variant: e.target.value } }), style: fieldStyle, children: ["primary", "secondary", "outline", "ghost"].map((v) => jsx("option", { value: v, children: v }, v)) })] })), selectedNode.props.src !== undefined && (jsxs("div", { children: [jsx("label", { children: "Image URL" }), jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxs("div", { children: [jsx("label", { children: "Alt Text" }), jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsx("hr", { style: { border: "none", borderTop: "1px solid #373a40", margin: "4px 0" } }), jsx("strong", { style: { color: "#868e96" }, children: "Style" }), ["padding", "margin", "gap", "borderRadius"].map((prop) => (jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: prop }), jsx("input", { type: "number", value: typeof selectedNode.style[prop] === "number" ? selectedNode.style[prop] : 0, onChange: (e) => designer.updateNode(selectedNode.id, { style: { [prop]: Number(e.target.value) } }), style: { ...fieldStyle, width: 50 } })] }, prop))), jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: "fontSize" }), jsx("input", { type: "number", value: typeof selectedNode.style.fontSize === "number" ? selectedNode.style.fontSize : 14, onChange: (e) => designer.updateNode(selectedNode.id, { style: { fontSize: Number(e.target.value) } }), style: { ...fieldStyle, width: 50 } })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: "color" }), jsx("input", { type: "color", value: typeof selectedNode.style.color === "string" ? selectedNode.style.color : "#000000", onChange: (e) => designer.updateNode(selectedNode.id, { style: { color: e.target.value } }), style: { width: 24, height: 20, border: "none", cursor: "pointer" } })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: "bgColor" }), jsx("input", { type: "color", value: typeof selectedNode.style.background === "string" ? selectedNode.style.background : "#ffffff", onChange: (e) => designer.updateNode(selectedNode.id, { style: { background: e.target.value } }), style: { width: 24, height: 20, border: "none", cursor: "pointer" } })] }), selectedNode.style.display === "flex" && (jsxs(Fragment, { children: [jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: "direction" }), jsxs("select", { value: (_b = selectedNode.style.flexDirection) !== null && _b !== void 0 ? _b : "column", onChange: (e) => designer.updateNode(selectedNode.id, { style: { flexDirection: e.target.value } }), style: { ...fieldStyle, width: 80 }, children: [jsx("option", { value: "row", children: "row" }), jsx("option", { value: "column", children: "column" })] })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: "align" }), jsx("select", { value: (_c = selectedNode.style.alignItems) !== null && _c !== void 0 ? _c : "stretch", onChange: (e) => designer.updateNode(selectedNode.id, { style: { alignItems: e.target.value } }), style: { ...fieldStyle, width: 80 }, children: ["stretch", "center", "flex-start", "flex-end"].map((v) => jsx("option", { value: v, children: v }, v)) })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: "justify" }), jsx("select", { value: (_d = selectedNode.style.justifyContent) !== null && _d !== void 0 ? _d : "flex-start", onChange: (e) => designer.updateNode(selectedNode.id, { style: { justifyContent: e.target.value } }), style: { ...fieldStyle, width: 80 }, children: ["flex-start", "center", "flex-end", "space-between", "space-around"].map((v) => jsx("option", { value: v, children: v }, v)) })] })] })), jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: "width" }), jsx("input", { value: (_e = selectedNode.style.width) !== null && _e !== void 0 ? _e : "", placeholder: "auto", onChange: (e) => {
                                            const v = e.target.value;
                                            designer.updateNode(selectedNode.id, { style: { width: isNaN(Number(v)) ? v : Number(v) } });
                                        }, style: { ...fieldStyle, width: 60 } })] }), jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsx("label", { style: { minWidth: 60 }, children: "height" }), jsx("input", { value: (_f = selectedNode.style.height) !== null && _f !== void 0 ? _f : "", placeholder: "auto", onChange: (e) => {
                                            const v = e.target.value;
                                            designer.updateNode(selectedNode.id, { style: { height: isNaN(Number(v)) ? v : Number(v) } });
                                        }, style: { ...fieldStyle, width: 60 } })] })] })) : (jsx("div", { style: { color: "#5c5f66", padding: 8, textAlign: "center" }, children: "Select an element" }))] })] }));
};

export { NiceUIDesigner, exportToReact, useUIDesigner };
//# sourceMappingURL=NiceUIDesigner.js.map
