@nice2dev/ui-graphics 1.1.0 → 1.1.1

package/dist/cjs/ui/NiceUIDesigner.js

@@ -5,56 +5,140 @@ var React = require('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 },
+    {
+        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 pad = ' '.repeat(indent);
     const styleStr = Object.entries(node.style)
-        .map(([k, v]) => `${k}: ${typeof v === "string" ? `"${v}"` : v}`)
-        .join(", ");
+        .map(([k, v]) => `${k}: ${typeof v === 'string' ? `"${v}"` : v}`)
+        .join(', ');
     switch (node.type) {
-        case "Text":
+        case 'Text':
             return `${pad}<p style={{ ${styleStr} }}>${node.props.text}</p>`;
-        case "Heading":
+        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":
+        case 'Button':
             return `${pad}<button style={{ ${styleStr} }}>${node.props.text}</button>`;
-        case "TextInput":
+        case 'TextInput':
             return `${pad}<input placeholder="${node.props.placeholder}" style={{ ${styleStr} }} />`;
-        case "Image":
+        case 'Image':
             return `${pad}<img src="${node.props.src}" alt="${node.props.alt}" style={{ ${styleStr} }} />`;
-        case "Spacer":
+        case 'Spacer':
             return `${pad}<div style={{ ${styleStr} }} />`;
-        case "Divider":
+        case 'Divider':
             return `${pad}<hr style={{ ${styleStr} }} />`;
-        case "List":
+        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>`;
+            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";
+            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");
+            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");
+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 ────────────────────────────────────────────────────────
@@ -66,29 +150,33 @@ function useUIDesigner() {
     const pushHistory = React.useCallback((newTree) => {
         const next = historyRef.current.slice(0, historyIdx + 1);
         next.push(JSON.parse(JSON.stringify(newTree)));
-        if (next.length > 40)
+        if (next.length > 40) {
             next.shift();
+        }
         historyRef.current = next;
         setHistoryIdx(next.length - 1);
     }, [historyIdx]);
     const undo = React.useCallback(() => {
-        if (historyIdx <= 0)
+        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)
+        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)
+        if (!def) {
             return;
+        }
         const node = {
             id: `node-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
             type,
@@ -111,8 +199,9 @@ function useUIDesigner() {
         const newTree = removeFromTree(tree, id);
         setTree(newTree);
         pushHistory(newTree);
-        if (selectedId === id)
+        if (selectedId === id) {
             setSelectedId(null);
+        }
     }, [tree, selectedId, pushHistory]);
     const updateNode = React.useCallback((id, updates) => {
         const newTree = updateInTree(tree, id, updates);
@@ -122,8 +211,9 @@ function useUIDesigner() {
     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)
+        if (!node) {
             return;
+        }
         let newTree = removeFromTree(tree, id);
         if (newParentId) {
             newTree = addToParent(newTree, newParentId, node, index);
@@ -140,11 +230,17 @@ function useUIDesigner() {
         pushHistory(newTree);
     }, [tree, pushHistory]);
     return {
-        tree, setTree,
-        selectedId, setSelectedId,
-        addNode, removeNode, updateNode, moveNode,
+        tree,
+        setTree,
+        selectedId,
+        setSelectedId,
+        addNode,
+        removeNode,
+        updateNode,
+        moveNode,
         exportCode: () => exportToReact(tree),
-        undo, redo,
+        undo,
+        redo,
         canUndo: historyIdx > 0,
         canRedo: historyIdx < historyRef.current.length - 1,
     };
@@ -171,11 +267,13 @@ function removeFromTree(nodes, id) {
 }
 function findInTree(nodes, id) {
     for (const n of nodes) {
-        if (n.id === id)
+        if (n.id === id) {
             return n;
+        }
         const found = findInTree(n.children, id);
-        if (found)
+        if (found) {
             return found;
+        }
     }
     return null;
 }
@@ -193,10 +291,10 @@ function updateInTree(nodes, id, updates) {
 }
 // ── Component ───────────────────────────────────────────────────
 /** Visual drag & drop UI builder that generates React code. */
-const NiceUIDesigner = ({ onChange, onExport, className = "", }) => {
+const NiceUIDesigner = ({ onChange, onExport, className = '', }) => {
     var _a, _b, _c, _d, _e, _f;
     const designer = useUIDesigner();
-    const [breakpoint, setBreakpoint] = React.useState("desktop");
+    const [breakpoint, setBreakpoint] = React.useState('desktop');
     const [dragType, setDragType] = React.useState(null);
     const [showCode, setShowCode] = React.useState(false);
     React.useEffect(() => {
@@ -205,30 +303,40 @@ const NiceUIDesigner = ({ onChange, onExport, className = "", }) => {
     // Keyboard shortcuts
     React.useEffect(() => {
         const handler = (e) => {
-            if (e.ctrlKey && e.key === "z") {
+            if (e.ctrlKey && e.key === 'z') {
                 e.preventDefault();
                 designer.undo();
             }
-            if (e.ctrlKey && e.key === "y") {
+            if (e.ctrlKey && e.key === 'y') {
                 e.preventDefault();
                 designer.redo();
             }
-            if (e.key === "Delete" && designer.selectedId) {
+            if (e.key === 'Delete' && designer.selectedId) {
                 designer.removeNode(designer.selectedId);
             }
         };
-        window.addEventListener("keydown", handler);
-        return () => window.removeEventListener("keydown", handler);
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
     }, [designer]);
-    const canvasWidth = breakpoint === "mobile" ? 375 : breakpoint === "tablet" ? 768 : "100%";
+    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",
+        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,
+        width: '100%',
+        padding: '2px 4px',
+        background: '#2c2e33',
+        color: '#c1c2c5',
+        border: '1px solid #373a40',
+        borderRadius: 3,
+        fontSize: 10,
     };
     const handleDrop = (e, parentId) => {
         e.preventDefault();
@@ -246,56 +354,137 @@ const NiceUIDesigner = ({ onChange, onExport, className = "", }) => {
         var _a, _b, _c, _d;
         const isSelected = designer.selectedId === node.id;
         const def = COMPONENT_DEFS.find((d) => d.type === node.type);
-        return (jsxRuntime.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: {
+        return (jsxRuntime.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)",
+                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"
-                        ? jsxRuntime.jsx("button", { style: { pointerEvents: "none" }, children: String((_b = node.props.text) !== null && _b !== void 0 ? _b : "Button") })
-                        : node.type === "TextInput"
-                            ? jsxRuntime.jsx("input", { placeholder: String((_c = node.props.placeholder) !== null && _c !== void 0 ? _c : ""), readOnly: true, style: { pointerEvents: "none", ...node.style } })
-                            : node.type === "Image"
-                                ? jsxRuntime.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"
-                                    ? jsxRuntime.jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => jsxRuntime.jsx("li", { children: item }, i)) })
-                                    : node.type === "Divider"
-                                        ? jsxRuntime.jsx("hr", { style: { margin: 0, border: "none", borderTop: "1px solid #dee2e6", width: "100%" } })
-                                        : node.children.map((c) => renderNode(c, depth + 1)), isSelected && jsxRuntime.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));
+                position: 'relative',
+                cursor: 'pointer',
+            }, children: [node.type === 'Text' || node.type === 'Heading' ? (String((_a = node.props.text) !== null && _a !== void 0 ? _a : '')) : node.type === 'Button' ? (jsxRuntime.jsx("button", { style: { pointerEvents: 'none' }, children: String((_b = node.props.text) !== null && _b !== void 0 ? _b : 'Button') })) : node.type === 'TextInput' ? (jsxRuntime.jsx("input", { placeholder: String((_c = node.props.placeholder) !== null && _c !== void 0 ? _c : ''), readOnly: true, style: { pointerEvents: 'none', ...node.style } })) : node.type === 'Image' ? (jsxRuntime.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' ? (jsxRuntime.jsx("ul", { style: { margin: 0, ...node.style }, children: ((_d = node.props.items) !== null && _d !== void 0 ? _d : []).map((item, i) => (jsxRuntime.jsx("li", { children: item }, i))) })) : node.type === 'Divider' ? (jsxRuntime.jsx("hr", { style: { margin: 0, border: 'none', borderTop: '1px solid #dee2e6', width: '100%' } })) : (node.children.map((c) => renderNode(c, depth + 1))), isSelected && (jsxRuntime.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 (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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",
+                        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: [jsxRuntime.jsx("span", { children: def === null || def === void 0 ? void 0 : def.icon }), jsxRuntime.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));
+                    }, children: [jsxRuntime.jsx("span", { children: def === null || def === void 0 ? void 0 : def.icon }), jsxRuntime.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 (jsxRuntime.jsxs("div", { className: `nice-ui-designer ${className}`, style: { display: "flex", gap: 8, height: "100%", background: "#1a1b1e", color: "#c1c2c5", padding: 8, borderRadius: 8 }, children: [jsxRuntime.jsxs("div", { style: { width: 160, display: "flex", flexDirection: "column", gap: 8, fontSize: 11 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: "block", marginBottom: 4 }, children: "Components" }), jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: COMPONENT_DEFS.map((def) => (jsxRuntime.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))) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: "block", marginBottom: 4 }, children: "Tree" }), jsxRuntime.jsx("div", { style: { maxHeight: 200, overflowY: "auto" }, children: designer.tree.length === 0
-                                    ? jsxRuntime.jsx("div", { style: { color: "#5c5f66", padding: 4 }, children: "Empty" })
-                                    : designer.tree.map((n) => renderTreeItem(n)) })] })] }), jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 4 }, children: [jsxRuntime.jsxs("div", { style: { display: "flex", gap: 4, alignItems: "center", fontSize: 11 }, children: [jsxRuntime.jsx("button", { onClick: () => designer.undo(), disabled: !designer.canUndo, style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 }, title: "Undo (Ctrl+Z)", children: "\u21A9" }), jsxRuntime.jsx("button", { onClick: () => designer.redo(), disabled: !designer.canRedo, style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 }, title: "Redo (Ctrl+Y)", children: "\u21AA" }), jsxRuntime.jsx("div", { style: { width: 1, height: 16, background: "#373a40" } }), jsxRuntime.jsx("button", { onClick: () => setBreakpoint("desktop"), style: btnStyle(breakpoint === "desktop"), children: "\uD83D\uDDA5 Desktop" }), jsxRuntime.jsx("button", { onClick: () => setBreakpoint("tablet"), style: btnStyle(breakpoint === "tablet"), children: "\uD83D\uDCF1 Tablet" }), jsxRuntime.jsx("button", { onClick: () => setBreakpoint("mobile"), style: btnStyle(breakpoint === "mobile"), children: "\uD83D\uDCF2 Mobile" }), jsxRuntime.jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxRuntime.jsx("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: "#ff6b6b" }, children: "\uD83D\uDDD1 Delete" })), jsxRuntime.jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ["</>", " Code"] }), jsxRuntime.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 ? (jsxRuntime.jsx("pre", { style: { flex: 1, background: "#141517", borderRadius: 6, padding: 12, margin: 0, overflow: "auto", fontSize: 11, color: "#a6e3a1", fontFamily: "monospace" }, children: designer.exportCode() })) : (jsxRuntime.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
-                            ? jsxRuntime.jsx("div", { style: { textAlign: "center", padding: 40, color: "#868e96" }, children: "Drag or click a component to add it" })
-                            : designer.tree.map((n) => renderNode(n)) }))] }), jsxRuntime.jsxs("div", { style: { width: 200, fontSize: 11, display: "flex", flexDirection: "column", gap: 4, overflowY: "auto" }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: "Properties" }), selectedNode ? (jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [jsxRuntime.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 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Text" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Placeholder" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Heading Level" }), jsxRuntime.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) => jsxRuntime.jsxs("option", { value: v, children: ["H", v] }, v)) })] })), selectedNode.props.variant !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Variant" }), jsxRuntime.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) => jsxRuntime.jsx("option", { value: v, children: v }, v)) })] })), selectedNode.props.src !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Image URL" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Alt Text" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsxRuntime.jsx("hr", { style: { border: "none", borderTop: "1px solid #373a40", margin: "4px 0" } }), jsxRuntime.jsx("strong", { style: { color: "#868e96" }, children: "Style" }), ["padding", "margin", "gap", "borderRadius"].map((prop) => (jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: prop }), jsxRuntime.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))), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "fontSize" }), jsxRuntime.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 } })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "color" }), jsxRuntime.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" } })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "bgColor" }), jsxRuntime.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" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "direction" }), jsxRuntime.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: [jsxRuntime.jsx("option", { value: "row", children: "row" }), jsxRuntime.jsx("option", { value: "column", children: "column" })] })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "align" }), jsxRuntime.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) => jsxRuntime.jsx("option", { value: v, children: v }, v)) })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "justify" }), jsxRuntime.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) => jsxRuntime.jsx("option", { value: v, children: v }, v)) })] })] })), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "width" }), jsxRuntime.jsx("input", { value: (_e = selectedNode.style.width) !== null && _e !== void 0 ? _e : "", placeholder: "auto", onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: `nice-ui-designer ${className}`, style: {
+            display: 'flex',
+            gap: 8,
+            height: '100%',
+            background: '#1a1b1e',
+            color: '#c1c2c5',
+            padding: 8,
+            borderRadius: 8,
+        }, children: [jsxRuntime.jsxs("div", { style: { width: 160, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 11 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: "Components" }), jsxRuntime.jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: COMPONENT_DEFS.map((def) => (jsxRuntime.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))) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: "Tree" }), jsxRuntime.jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: designer.tree.length === 0 ? (jsxRuntime.jsx("div", { style: { color: '#5c5f66', padding: 4 }, children: "Empty" })) : (designer.tree.map((n) => renderTreeItem(n))) })] })] }), jsxRuntime.jsxs("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntime.jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', fontSize: 11 }, children: [jsxRuntime.jsx("button", { onClick: () => designer.undo(), disabled: !designer.canUndo, style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 }, title: "Undo (Ctrl+Z)", children: "\u21A9" }), jsxRuntime.jsx("button", { onClick: () => designer.redo(), disabled: !designer.canRedo, style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 }, title: "Redo (Ctrl+Y)", children: "\u21AA" }), jsxRuntime.jsx("div", { style: { width: 1, height: 16, background: '#373a40' } }), jsxRuntime.jsx("button", { onClick: () => setBreakpoint('desktop'), style: btnStyle(breakpoint === 'desktop'), children: "\uD83D\uDDA5 Desktop" }), jsxRuntime.jsx("button", { onClick: () => setBreakpoint('tablet'), style: btnStyle(breakpoint === 'tablet'), children: "\uD83D\uDCF1 Tablet" }), jsxRuntime.jsx("button", { onClick: () => setBreakpoint('mobile'), style: btnStyle(breakpoint === 'mobile'), children: "\uD83D\uDCF2 Mobile" }), jsxRuntime.jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxRuntime.jsx("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: '#ff6b6b' }, children: "\uD83D\uDDD1 Delete" })), jsxRuntime.jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ['</>', " Code"] }), jsxRuntime.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 ? (jsxRuntime.jsx("pre", { style: {
+                            flex: 1,
+                            background: '#141517',
+                            borderRadius: 6,
+                            padding: 12,
+                            margin: 0,
+                            overflow: 'auto',
+                            fontSize: 11,
+                            color: '#a6e3a1',
+                            fontFamily: 'monospace',
+                        }, children: designer.exportCode() })) : (jsxRuntime.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 ? (jsxRuntime.jsx("div", { style: { textAlign: 'center', padding: 40, color: '#868e96' }, children: "Drag or click a component to add it" })) : (designer.tree.map((n) => renderNode(n))) }))] }), jsxRuntime.jsxs("div", { style: {
+                    width: 200,
+                    fontSize: 11,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                    overflowY: 'auto',
+                }, children: [jsxRuntime.jsx("strong", { style: { fontSize: 12 }, children: "Properties" }), selectedNode ? (jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxRuntime.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 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Text" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.text), onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }), style: fieldStyle })] })), selectedNode.props.placeholder !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Placeholder" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.placeholder), onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }), style: fieldStyle })] })), selectedNode.props.level !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Heading Level" }), jsxRuntime.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) => (jsxRuntime.jsxs("option", { value: v, children: ["H", v] }, v))) })] })), selectedNode.props.variant !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Variant" }), jsxRuntime.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) => (jsxRuntime.jsx("option", { value: v, children: v }, v))) })] })), selectedNode.props.src !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Image URL" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.src), onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }), style: fieldStyle })] })), selectedNode.props.alt !== undefined && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("label", { children: "Alt Text" }), jsxRuntime.jsx("input", { value: String(selectedNode.props.alt), onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }), style: fieldStyle })] })), jsxRuntime.jsx("hr", { style: { border: 'none', borderTop: '1px solid #373a40', margin: '4px 0' } }), jsxRuntime.jsx("strong", { style: { color: '#868e96' }, children: "Style" }), ['padding', 'margin', 'gap', 'borderRadius'].map((prop) => (jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: prop }), jsxRuntime.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))), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "fontSize" }), jsxRuntime.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 } })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "color" }), jsxRuntime.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' } })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "bgColor" }), jsxRuntime.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' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "direction" }), jsxRuntime.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: [jsxRuntime.jsx("option", { value: "row", children: "row" }), jsxRuntime.jsx("option", { value: "column", children: "column" })] })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "align" }), jsxRuntime.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) => (jsxRuntime.jsx("option", { value: v, children: v }, v))) })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "justify" }), jsxRuntime.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) => (jsxRuntime.jsx("option", { value: v, children: v }, v))) })] })] })), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "width" }), jsxRuntime.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 } })] }), jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "height" }), jsxRuntime.jsx("input", { value: (_f = selectedNode.style.height) !== null && _f !== void 0 ? _f : "", placeholder: "auto", onChange: (e) => {
+                                            designer.updateNode(selectedNode.id, {
+                                                style: { width: isNaN(Number(v)) ? v : Number(v) },
+                                            });
+                                        }, style: { ...fieldStyle, width: 60 } })] }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 4 }, children: [jsxRuntime.jsx("label", { style: { minWidth: 60 }, children: "height" }), jsxRuntime.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 } })] })] })) : (jsxRuntime.jsx("div", { style: { color: "#5c5f66", padding: 8, textAlign: "center" }, children: "Select an element" }))] })] }));
+                                            designer.updateNode(selectedNode.id, {
+                                                style: { height: isNaN(Number(v)) ? v : Number(v) },
+                                            });
+                                        }, style: { ...fieldStyle, width: 60 } })] })] })) : (jsxRuntime.jsx("div", { style: { color: '#5c5f66', padding: 8, textAlign: 'center' }, children: "Select an element" }))] })] }));
 };
 
 exports.NiceUIDesigner = NiceUIDesigner;