@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/ui/NiceUIDesigner.js

@@ -1,554 +1,985 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceTutorialButton, resolveTutorial, NiceAppShell } from '@nice2dev/ui';
-import { NiceIcon, clickOnActivationKey } from '@nice2dev/ui-core';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-
-/** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceTutorialButton, resolveTutorial, NiceAppShell } from "@nice2dev/ui";
+import { NiceIcon, clickOnActivationKey } from "@nice2dev/ui-core";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
 const UI_DESIGNER_TOUR = [
-    {
-        target: '.nice-ui-designer',
-        titleKey: 'tutorial.uiDesigner.intro.title',
-        title: 'UI designer',
-        contentKey: 'tutorial.uiDesigner.intro.content',
-        content: 'Drag components from the palette onto the canvas, edit their props in the panel, preview responsive breakpoints, and export to React/TSX.',
-        placement: 'auto',
-    },
+  {
+    target: ".nice-ui-designer",
+    titleKey: "tutorial.uiDesigner.intro.title",
+    title: "UI designer",
+    contentKey: "tutorial.uiDesigner.intro.content",
+    content: "Drag components from the palette onto the canvas, edit their props in the panel, preview responsive breakpoints, and export to React/TSX.",
+    placement: "auto"
+  }
 ];
-// ── Component Palette ───────────────────────────────────────────
 const COMPONENT_DEFS = [
-    {
-        type: 'Container',
-        label: 'Container',
-        icon: 'box',
-        defaultProps: {},
-        defaultStyle: { padding: 16, display: 'flex', flexDirection: 'column', gap: 8 },
-        allowChildren: true,
-    },
-    {
-        type: 'Row',
-        label: 'Row',
-        icon: 'columns',
-        defaultProps: {},
-        defaultStyle: { display: 'flex', flexDirection: 'row', gap: 8, alignItems: 'center' },
-        allowChildren: true,
-    },
-    {
-        type: 'Column',
-        label: 'Column',
-        icon: 'list',
-        defaultProps: {},
-        defaultStyle: { display: 'flex', flexDirection: 'column', gap: 8 },
-        allowChildren: true,
-    },
-    {
-        type: 'Text',
-        label: 'Text',
-        icon: 'edit',
-        defaultProps: { text: 'Text content' },
-        defaultStyle: { fontSize: 14 },
-        allowChildren: false,
-    },
-    {
-        type: 'Heading',
-        label: 'Heading',
-        icon: 'heading',
-        defaultProps: { text: 'Heading', level: 2 },
-        defaultStyle: { fontSize: 24, fontWeight: 'bold' },
-        allowChildren: false,
-    },
-    {
-        type: 'Button',
-        label: 'Button',
-        icon: 'button',
-        defaultProps: { text: 'Click me', variant: 'primary' },
-        defaultStyle: { padding: '8px 16px', borderRadius: 4, cursor: 'pointer' },
-        allowChildren: false,
-    },
-    {
-        type: 'TextInput',
-        label: 'Input',
-        icon: 'input',
-        defaultProps: { placeholder: 'Enter text...' },
-        defaultStyle: { padding: 8, border: '1px solid var(--nice-border, #ccc)', borderRadius: 4 },
-        allowChildren: false,
-    },
-    {
-        type: 'Image',
-        label: 'Image',
-        icon: 'image',
-        defaultProps: { src: '', alt: 'Image' },
-        defaultStyle: { width: 200, height: 150, objectFit: 'cover' },
-        allowChildren: false,
-    },
-    {
-        type: 'Spacer',
-        label: 'Spacer',
-        icon: 'square',
-        defaultProps: {},
-        defaultStyle: { height: 16 },
-        allowChildren: false,
-    },
-    {
-        type: 'Divider',
-        label: 'Divider',
-        icon: 'line',
-        defaultProps: {},
-        defaultStyle: { height: 1, background: 'var(--nice-border, #dee2e6)', width: '100%' },
-        allowChildren: false,
-    },
-    {
-        type: 'Card',
-        label: 'Card',
-        icon: 'card',
-        defaultProps: {},
-        defaultStyle: {
-            padding: 16,
-            border: '1px solid var(--nice-border, #dee2e6)',
-            borderRadius: 8,
-            background: 'var(--nice-bg, #fff)',
-        },
-        allowChildren: true,
-    },
-    {
-        type: 'List',
-        label: 'List',
-        icon: 'list',
-        defaultProps: { items: ['Item 1', 'Item 2', 'Item 3'] },
-        defaultStyle: { listStyleType: 'disc', paddingLeft: 20 },
-        allowChildren: false,
+  {
+    type: "Container",
+    label: "Container",
+    icon: "box",
+    defaultProps: {},
+    defaultStyle: { padding: 16, display: "flex", flexDirection: "column", gap: 8 },
+    allowChildren: true
+  },
+  {
+    type: "Row",
+    label: "Row",
+    icon: "columns",
+    defaultProps: {},
+    defaultStyle: { display: "flex", flexDirection: "row", gap: 8, alignItems: "center" },
+    allowChildren: true
+  },
+  {
+    type: "Column",
+    label: "Column",
+    icon: "list",
+    defaultProps: {},
+    defaultStyle: { display: "flex", flexDirection: "column", gap: 8 },
+    allowChildren: true
+  },
+  {
+    type: "Text",
+    label: "Text",
+    icon: "edit",
+    defaultProps: { text: "Text content" },
+    defaultStyle: { fontSize: 14 },
+    allowChildren: false
+  },
+  {
+    type: "Heading",
+    label: "Heading",
+    icon: "heading",
+    defaultProps: { text: "Heading", level: 2 },
+    defaultStyle: { fontSize: 24, fontWeight: "bold" },
+    allowChildren: false
+  },
+  {
+    type: "Button",
+    label: "Button",
+    icon: "button",
+    defaultProps: { text: "Click me", variant: "primary" },
+    defaultStyle: { padding: "8px 16px", borderRadius: 4, cursor: "pointer" },
+    allowChildren: false
+  },
+  {
+    type: "TextInput",
+    label: "Input",
+    icon: "input",
+    defaultProps: { placeholder: "Enter text..." },
+    defaultStyle: { padding: 8, border: "1px solid var(--nice-border, #ccc)", borderRadius: 4 },
+    allowChildren: false
+  },
+  {
+    type: "Image",
+    label: "Image",
+    icon: "image",
+    defaultProps: { src: "", alt: "Image" },
+    defaultStyle: { width: 200, height: 150, objectFit: "cover" },
+    allowChildren: false
+  },
+  {
+    type: "Spacer",
+    label: "Spacer",
+    icon: "square",
+    defaultProps: {},
+    defaultStyle: { height: 16 },
+    allowChildren: false
+  },
+  {
+    type: "Divider",
+    label: "Divider",
+    icon: "line",
+    defaultProps: {},
+    defaultStyle: { height: 1, background: "var(--nice-border, #dee2e6)", width: "100%" },
+    allowChildren: false
+  },
+  {
+    type: "Card",
+    label: "Card",
+    icon: "card",
+    defaultProps: {},
+    defaultStyle: {
+      padding: 16,
+      border: "1px solid var(--nice-border, #dee2e6)",
+      borderRadius: 8,
+      background: "var(--nice-bg, #fff)"
     },
+    allowChildren: true
+  },
+  {
+    type: "List",
+    label: "List",
+    icon: "list",
+    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}>`;
-        }
+  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${node.props.level ?? 2} style={{ ${styleStr} }}>${node.props.text}</h${node.props.level ?? 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 = node.props.items ?? [];
+      return `${pad}<ul style={{ ${styleStr} }}>
+${items.map((i) => `${pad}  <li>${i}</li>`).join("\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} }}>
+${kids}
+${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`;
+function exportToReact(tree, componentName = "MyComponent") {
+  const body = tree.map((n) => nodeToJsx(n, 4)).join("\n");
+  return `import React from "react";
+
+export const ${componentName}: React.FC = () => {
+  return (
+    <div>
+${body}
+    </div>
+  );
+};
+`;
 }
-// ── 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];
-            }
+  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) => {
+      const node = findInTree(tree, id);
+      if (!node) {
+        return;
+      }
+      let newTree = removeFromTree(tree, id);
+      if (newParentId) {
+        newTree = addToParent(newTree, newParentId, node, index);
+      } else {
+        if (index !== void 0) {
+          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,
-    };
+      }
+      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) };
-    });
+  return nodes.map((n) => {
+    if (n.id === parentId) {
+      const kids = [...n.children];
+      if (index !== void 0) {
+        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) }));
+  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;
-        }
+  for (const n of nodes) {
+    if (n.id === id) {
+      return n;
+    }
+    const found = findInTree(n.children, id);
+    if (found) {
+      return found;
     }
-    return null;
+  }
+  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) };
-    });
+  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 = '', tutorial, }) => {
-    var _a, _b, _c, _d, _e;
-    const { t } = useNiceTranslation();
-    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();
+const NiceUIDesigner = ({
+  onChange,
+  onExport,
+  className = "",
+  tutorial
+}) => {
+  const { t } = useNiceTranslation();
+  const designer = useUIDesigner();
+  const [breakpoint, setBreakpoint] = React.useState("desktop");
+  const [dragType, setDragType] = React.useState(null);
+  const [showCode, setShowCode] = React.useState(false);
+  React.useEffect(() => {
+    onChange?.(designer.tree);
+  }, [designer.tree, onChange]);
+  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 ? "var(--nice-info, #339af0)" : "var(--nice-bg-secondary, #2c2e33)",
+    color: active ? "var(--nice-color-white, #fff)" : "var(--nice-text, #c1c2c5)"
+  });
+  const fieldStyle = {
+    width: "100%",
+    padding: "2px 4px",
+    background: "var(--nice-bg-secondary, #2c2e33)",
+    color: "var(--nice-text, #c1c2c5)",
+    border: "1px solid var(--nice-border, #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) => {
+    const isSelected = designer.selectedId === node.id;
+    const def = COMPONENT_DEFS.find((d) => d.type === node.type);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "presentation",
+        onClick: (e) => {
+          e.stopPropagation();
+          designer.setSelectedId(node.id);
+        },
+        onDrop: (e) => def?.allowChildren ? handleDrop(e, node.id) : void 0,
+        onDragOver: def?.allowChildren ? handleDragOver : void 0,
+        style: {
+          ...node.style,
+          outline: isSelected ? "2px solid var(--nice-info, #339af0)" : "1px dashed var(--nice-overlay-10, rgba(0, 0, 0, 0.1))",
+          outlineOffset: 1,
+          minHeight: 24,
+          position: "relative",
+          cursor: "pointer"
+        },
+        children: [
+          node.type === "Text" || node.type === "Heading" ? String(node.props.text ?? "") : node.type === "Button" ? /* @__PURE__ */ jsx("button", { style: { pointerEvents: "none" }, children: String(node.props.text ?? "Button") }) : node.type === "TextInput" ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              placeholder: String(node.props.placeholder ?? ""),
+              readOnly: true,
+              style: { pointerEvents: "none", ...node.style }
             }
-            if (e.ctrlKey && e.key === 'y') {
-                e.preventDefault();
-                designer.redo();
+          ) : node.type === "Image" ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "100%",
+                background: "var(--nice-border, #e9ecef)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "var(--nice-text-secondary, #868e96)",
+                fontSize: 11,
+                gap: 4
+              },
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: "image", size: 14 }),
+                " ",
+                t("uiDesigner.image", "Image")
+              ]
             }
-            if (e.key === 'Delete' && designer.selectedId) {
-                designer.removeNode(designer.selectedId);
+          ) : node.type === "List" ? /* @__PURE__ */ jsx("ul", { style: { margin: 0, ...node.style }, children: (node.props.items ?? []).map((item, i) => /* @__PURE__ */ jsx("li", { children: item }, i)) }) : node.type === "Divider" ? /* @__PURE__ */ jsx(
+            "hr",
+            {
+              style: {
+                margin: 0,
+                border: "none",
+                borderTop: "1px solid var(--nice-border, #dee2e6)",
+                width: "100%"
+              }
             }
-        };
-        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 ? 'var(--nice-info, #339af0)' : 'var(--nice-bg-secondary, #2c2e33)',
-        color: active ? 'var(--nice-color-white, #fff)' : 'var(--nice-text, #c1c2c5)',
-    });
-    const fieldStyle = {
-        width: '100%',
-        padding: '2px 4px',
-        background: 'var(--nice-bg-secondary, #2c2e33)',
-        color: 'var(--nice-text, #c1c2c5)',
-        border: '1px solid var(--nice-border, #373a40)',
-        borderRadius: 3,
-        fontSize: 10,
-    };
-    const handleDrop = (e, parentId) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (dragType) {
-            designer.addNode(dragType, parentId);
-            setDragType(null);
+          ) : node.children.map((c) => renderNode(c, depth + 1)),
+          isSelected && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: -12,
+                left: 0,
+                fontSize: 9,
+                background: "var(--nice-info, #339af0)",
+                color: "var(--nice-text-on-primary, #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 /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: clickOnActivationKey,
+          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 ? "color-mix(in srgb, var(--nice-color-primary, #339af0) 20%, transparent)" : "transparent",
+            borderRadius: 2
+          },
+          children: [
+            def?.icon && /* @__PURE__ */ jsx(NiceIcon, { name: def.icon, size: 12 }),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                children: [
+                  node.type,
+                  node.props.text ? `: ${String(node.props.text).slice(0, 15)}` : ""
+                ]
+              }
+            )
+          ]
         }
-    };
-    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", { role: "presentation", 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 var(--nice-info, #339af0)'
-                    : '1px dashed var(--nice-overlay-10, 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' ? (jsxs("div", { style: {
-                        width: '100%',
-                        height: '100%',
-                        background: 'var(--nice-border, #e9ecef)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: 'var(--nice-text-secondary, #868e96)',
-                        fontSize: 11,
-                        gap: 4,
-                    }, children: [jsx(NiceIcon, { name: "image", size: 14 }), " ", t('uiDesigner.image', '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 var(--nice-border, #dee2e6)',
-                        width: '100%',
-                    } })) : (node.children.map((c) => renderNode(c, depth + 1))), isSelected && (jsx("div", { style: {
-                        position: 'absolute',
-                        top: -12,
-                        left: 0,
-                        fontSize: 9,
-                        background: 'var(--nice-info, #339af0)',
-                        color: 'var(--nice-text-on-primary, #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", { role: "button", tabIndex: 0, onKeyDown: clickOnActivationKey, 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
-                            ? 'color-mix(in srgb, var(--nice-color-primary, #339af0) 20%, transparent)'
-                            : 'transparent',
-                        borderRadius: 2,
-                    }, children: [(def === null || def === void 0 ? void 0 : def.icon) && jsx(NiceIcon, { name: def.icon, size: 12 }), 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));
-    };
-    const leftPanel = (jsxs("div", { style: {
-            width: 160,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-            fontSize: 11,
-            padding: 8,
-            height: '100%',
-            overflowY: 'auto',
-            boxSizing: 'border-box',
-        }, children: [jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: t('uiDesigner.components', '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: 'var(--nice-bg-secondary, #2c2e33)',
-                                border: 'none',
-                                borderRadius: 3,
-                                color: 'var(--nice-text, #c1c2c5)',
-                                cursor: 'grab',
-                                textAlign: 'left',
-                                fontSize: 11,
-                            }, children: [jsx(NiceIcon, { name: def.icon, size: 14 }), " ", def.label] }, def.type))) })] }), jsxs("div", { children: [jsx("strong", { style: { fontSize: 12, display: 'block', marginBottom: 4 }, children: t('uiDesigner.tree', 'Tree') }), jsx("div", { style: { maxHeight: 200, overflowY: 'auto' }, children: designer.tree.length === 0 ? (jsx("div", { style: { color: 'var(--nice-text-secondary, #5c5f66)', padding: 4 }, children: t('uiDesigner.empty', 'Empty') })) : (designer.tree.map((n) => renderTreeItem(n))) })] })] }));
-    const toolbarContent = (jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center', fontSize: 11, padding: '4px 8px' }, children: [jsx("button", { onClick: () => designer.undo(), disabled: !designer.canUndo, style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 }, title: t('uiDesigner.undoCtrlZ', 'Undo (Ctrl+Z)'), "aria-label": t('uiDesigner.undo', 'Undo'), children: jsx(NiceIcon, { name: "reply", size: 14 }) }), jsx("button", { onClick: () => designer.redo(), disabled: !designer.canRedo, style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 }, title: t('uiDesigner.redoCtrlY', 'Redo (Ctrl+Y)'), "aria-label": t('uiDesigner.redo', 'Redo'), children: jsx(NiceIcon, { name: "forward", size: 14 }) }), jsx("div", { style: { width: 1, height: 16, background: 'var(--nice-border, #373a40)' } }), jsxs("button", { onClick: () => setBreakpoint('desktop'), style: btnStyle(breakpoint === 'desktop'), children: [jsx(NiceIcon, { name: "monitor", size: 14 }), " ", t('uiDesigner.desktop', 'Desktop')] }), jsxs("button", { onClick: () => setBreakpoint('tablet'), style: btnStyle(breakpoint === 'tablet'), children: [jsx(NiceIcon, { name: "window", size: 14 }), " ", t('uiDesigner.tablet', 'Tablet')] }), jsxs("button", { onClick: () => setBreakpoint('mobile'), style: btnStyle(breakpoint === 'mobile'), children: [jsx(NiceIcon, { name: "phone", size: 14 }), " ", t('uiDesigner.mobile', 'Mobile')] }), jsx("div", { style: { flex: 1 } }), designer.selectedId && (jsxs("button", { onClick: () => designer.removeNode(designer.selectedId), style: { ...btnStyle(false), color: 'var(--nice-danger, #ff6b6b)' }, children: [jsx(NiceIcon, { name: "trash", size: 14 }), " ", t('uiDesigner.delete', 'Delete')] })), jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: ['</>', " ", t('uiDesigner.code', 'Code')] }), jsx("button", { onClick: () => onExport === null || onExport === void 0 ? void 0 : onExport(designer.exportCode()), style: {
-                    padding: '4px 8px',
-                    background: 'var(--nice-primary, #228be6)',
-                    color: 'var(--nice-text-on-primary, #fff)',
-                    border: 'none',
-                    borderRadius: 3,
-                    cursor: 'pointer',
-                    fontSize: 11,
-                }, children: t('uiDesigner.export', 'Export') })] }));
-    const mainContent = (jsx("div", { style: {
+      ),
+      node.children.map((c) => renderTreeItem(c, depth + 1))
+    ] }, node.id);
+  };
+  const leftPanel = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: 160,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        fontSize: 11,
+        padding: 8,
+        height: "100%",
+        overflowY: "auto",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("strong", { style: { fontSize: 12, display: "block", marginBottom: 4 }, children: t("uiDesigner.components", "Components") }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: COMPONENT_DEFS.map((def) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              draggable: true,
+              onDragStart: () => setDragType(def.type),
+              onDragEnd: () => setDragType(null),
+              onClick: () => designer.addNode(def.type, designer.selectedId ?? void 0),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                padding: "4px 6px",
+                background: "var(--nice-bg-secondary, #2c2e33)",
+                border: "none",
+                borderRadius: 3,
+                color: "var(--nice-text, #c1c2c5)",
+                cursor: "grab",
+                textAlign: "left",
+                fontSize: 11
+              },
+              children: [
+                /* @__PURE__ */ jsx(NiceIcon, { name: def.icon, size: 14 }),
+                " ",
+                def.label
+              ]
+            },
+            def.type
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("strong", { style: { fontSize: 12, display: "block", marginBottom: 4 }, children: t("uiDesigner.tree", "Tree") }),
+          /* @__PURE__ */ jsx("div", { style: { maxHeight: 200, overflowY: "auto" }, children: designer.tree.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: "var(--nice-text-secondary, #5c5f66)", padding: 4 }, children: t("uiDesigner.empty", "Empty") }) : designer.tree.map((n) => renderTreeItem(n)) })
+        ] })
+      ]
+    }
+  );
+  const toolbarContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { display: "flex", gap: 4, alignItems: "center", fontSize: 11, padding: "4px 8px" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => designer.undo(),
+            disabled: !designer.canUndo,
+            style: { ...btnStyle(false), opacity: designer.canUndo ? 1 : 0.4 },
+            title: t("uiDesigner.undoCtrlZ", "Undo (Ctrl+Z)"),
+            "aria-label": t("uiDesigner.undo", "Undo"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "reply", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => designer.redo(),
+            disabled: !designer.canRedo,
+            style: { ...btnStyle(false), opacity: designer.canRedo ? 1 : 0.4 },
+            title: t("uiDesigner.redoCtrlY", "Redo (Ctrl+Y)"),
+            "aria-label": t("uiDesigner.redo", "Redo"),
+            children: /* @__PURE__ */ jsx(NiceIcon, { name: "forward", size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { width: 1, height: 16, background: "var(--nice-border, #373a40)" } }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => setBreakpoint("desktop"), style: btnStyle(breakpoint === "desktop"), children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "monitor", size: 14 }),
+          " ",
+          t("uiDesigner.desktop", "Desktop")
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => setBreakpoint("tablet"), style: btnStyle(breakpoint === "tablet"), children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "window", size: 14 }),
+          " ",
+          t("uiDesigner.tablet", "Tablet")
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => setBreakpoint("mobile"), style: btnStyle(breakpoint === "mobile"), children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "phone", size: 14 }),
+          " ",
+          t("uiDesigner.mobile", "Mobile")
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        designer.selectedId && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => designer.removeNode(designer.selectedId),
+            style: { ...btnStyle(false), color: "var(--nice-danger, #ff6b6b)" },
+            children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "trash", size: 14 }),
+              " ",
+              t("uiDesigner.delete", "Delete")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("button", { onClick: () => setShowCode((v) => !v), style: btnStyle(showCode), children: [
+          "</>",
+          " ",
+          t("uiDesigner.code", "Code")
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onExport?.(designer.exportCode()),
+            style: {
+              padding: "4px 8px",
+              background: "var(--nice-primary, #228be6)",
+              color: "var(--nice-text-on-primary, #fff)",
+              border: "none",
+              borderRadius: 3,
+              cursor: "pointer",
+              fontSize: 11
+            },
+            children: t("uiDesigner.export", "Export")
+          }
+        )
+      ]
+    }
+  );
+  const mainContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        padding: 8,
+        boxSizing: "border-box"
+      },
+      children: showCode ? /* @__PURE__ */ jsx(
+        "pre",
+        {
+          style: {
             flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            padding: 8,
-            boxSizing: 'border-box',
-        }, children: showCode ? (jsx("pre", { style: {
-                flex: 1,
-                background: 'var(--nice-bg, #141517)',
-                borderRadius: 6,
-                padding: 12,
-                margin: 0,
-                overflow: 'auto',
-                fontSize: 11,
-                color: 'var(--nice-color-success, #a6e3a1)',
-                fontFamily: 'monospace',
-            }, children: designer.exportCode() })) : (jsx("div", { style: {
-                flex: 1,
-                background: 'var(--nice-bg, #fff)',
-                borderRadius: 6,
-                padding: 16,
-                overflow: 'auto',
-                color: 'var(--nice-text, #212529)',
-                maxWidth: canvasWidth,
-                margin: breakpoint !== 'desktop' ? '0 auto' : undefined,
-                border: breakpoint !== 'desktop' ? '1px solid var(--nice-border, #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: 'var(--nice-text-secondary, #868e96)',
-                }, children: t('uiDesigner.dragOrClickAComponent', 'Drag or click a component to add it') })) : (designer.tree.map((n) => renderNode(n))) })) }));
-    const rightPanel = (jsxs("div", { style: {
-            width: 200,
+            background: "var(--nice-bg, #141517)",
+            borderRadius: 6,
+            padding: 12,
+            margin: 0,
+            overflow: "auto",
             fontSize: 11,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 4,
-            height: '100%',
-            overflowY: 'auto',
-            padding: 8,
-            boxSizing: 'border-box',
-        }, children: [jsx("strong", { style: { fontSize: 12 }, children: t('uiDesigner.properties', 'Properties') }), selectedNode ? (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 6 }, children: [jsxs("div", { style: {
-                            color: 'var(--nice-text-secondary, #868e96)',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 4,
-                        }, children: [(() => {
-                                var _a;
-                                const di = (_a = COMPONENT_DEFS.find((d) => d.type === selectedNode.type)) === null || _a === void 0 ? void 0 : _a.icon;
-                                return di ? jsx(NiceIcon, { name: di, size: 14 }) : null;
-                            })(), ' ', selectedNode.type] }), selectedNode.props.text !== undefined && (jsxs("div", { children: [jsx("label", { children: t('uiDesigner.text', '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: t('uiDesigner.placeholder', '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: t('uiDesigner.headingLevel', '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: t('uiDesigner.variant', '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: t('uiDesigner.imageUrl', '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: t('uiDesigner.altText', '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 var(--nice-border, #373a40)',
-                            margin: '4px 0',
-                        } }), jsx("strong", { style: { color: 'var(--nice-text-secondary, #868e96)' }, children: t('uiDesigner.style', '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: (_a = selectedNode.style.flexDirection) !== null && _a !== void 0 ? _a : '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: (_b = selectedNode.style.alignItems) !== null && _b !== void 0 ? _b : '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: (_c = selectedNode.style.justifyContent) !== null && _c !== void 0 ? _c : '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: (_d = selectedNode.style.width) !== null && _d !== void 0 ? _d : '', 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: (_e = selectedNode.style.height) !== null && _e !== void 0 ? _e : '', 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: 'var(--nice-text-secondary, #5c5f66)',
-                    padding: 8,
-                    textAlign: 'center',
-                }, children: t('uiDesigner.selectAnElement', 'Select an element') }))] }));
-    return (jsxs("div", { className: `nice-ui-designer ${className}`, style: { position: 'relative', height: '100%' }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 20 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, UI_DESIGNER_TOUR) }) }), jsx(NiceAppShell, { flush: true, toolbar: toolbarContent, sidebar: leftPanel, rightSidebar: rightPanel, children: mainContent })] }));
+            color: "var(--nice-color-success, #a6e3a1)",
+            fontFamily: "monospace"
+          },
+          children: designer.exportCode()
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            flex: 1,
+            background: "var(--nice-bg, #fff)",
+            borderRadius: 6,
+            padding: 16,
+            overflow: "auto",
+            color: "var(--nice-text, #212529)",
+            maxWidth: canvasWidth,
+            margin: breakpoint !== "desktop" ? "0 auto" : void 0,
+            border: breakpoint !== "desktop" ? "1px solid var(--nice-border, #373a40)" : void 0,
+            transition: "max-width 0.2s"
+          },
+          onDrop: (e) => handleDrop(e),
+          onDragOver: handleDragOver,
+          children: designer.tree.length === 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                textAlign: "center",
+                padding: 40,
+                color: "var(--nice-text-secondary, #868e96)"
+              },
+              children: t("uiDesigner.dragOrClickAComponent", "Drag or click a component to add it")
+            }
+          ) : designer.tree.map((n) => renderNode(n))
+        }
+      )
+    }
+  );
+  const rightPanel = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: 200,
+        fontSize: 11,
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        height: "100%",
+        overflowY: "auto",
+        padding: 8,
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ jsx("strong", { style: { fontSize: 12 }, children: t("uiDesigner.properties", "Properties") }),
+        selectedNode ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                color: "var(--nice-text-secondary, #868e96)",
+                display: "flex",
+                alignItems: "center",
+                gap: 4
+              },
+              children: [
+                (() => {
+                  const di = COMPONENT_DEFS.find((d) => d.type === selectedNode.type)?.icon;
+                  return di ? /* @__PURE__ */ jsx(NiceIcon, { name: di, size: 14 }) : null;
+                })(),
+                " ",
+                selectedNode.type
+              ]
+            }
+          ),
+          selectedNode.props.text !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { children: t("uiDesigner.text", "Text") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: String(selectedNode.props.text),
+                onChange: (e) => designer.updateNode(selectedNode.id, { props: { text: e.target.value } }),
+                style: fieldStyle
+              }
+            )
+          ] }),
+          selectedNode.props.placeholder !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { children: t("uiDesigner.placeholder", "Placeholder") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: String(selectedNode.props.placeholder),
+                onChange: (e) => designer.updateNode(selectedNode.id, { props: { placeholder: e.target.value } }),
+                style: fieldStyle
+              }
+            )
+          ] }),
+          selectedNode.props.level !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { children: t("uiDesigner.headingLevel", "Heading Level") }),
+            /* @__PURE__ */ 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) => /* @__PURE__ */ jsxs("option", { value: v, children: [
+                  "H",
+                  v
+                ] }, v))
+              }
+            )
+          ] }),
+          selectedNode.props.variant !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { children: t("uiDesigner.variant", "Variant") }),
+            /* @__PURE__ */ 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) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v))
+              }
+            )
+          ] }),
+          selectedNode.props.src !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { children: t("uiDesigner.imageUrl", "Image URL") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: String(selectedNode.props.src),
+                onChange: (e) => designer.updateNode(selectedNode.id, { props: { src: e.target.value } }),
+                style: fieldStyle
+              }
+            )
+          ] }),
+          selectedNode.props.alt !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { children: t("uiDesigner.altText", "Alt Text") }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: String(selectedNode.props.alt),
+                onChange: (e) => designer.updateNode(selectedNode.id, { props: { alt: e.target.value } }),
+                style: fieldStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "hr",
+            {
+              style: {
+                border: "none",
+                borderTop: "1px solid var(--nice-border, #373a40)",
+                margin: "4px 0"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("strong", { style: { color: "var(--nice-text-secondary, #868e96)" }, children: t("uiDesigner.style", "Style") }),
+          ["padding", "margin", "gap", "borderRadius"].map((prop) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: prop }),
+            /* @__PURE__ */ 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)),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: "fontSize" }),
+            /* @__PURE__ */ 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 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: "color" }),
+            /* @__PURE__ */ 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" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: "bgColor" }),
+            /* @__PURE__ */ 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" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+              /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: "direction" }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: selectedNode.style.flexDirection ?? "column",
+                  onChange: (e) => designer.updateNode(selectedNode.id, {
+                    style: {
+                      flexDirection: e.target.value
+                    }
+                  }),
+                  style: { ...fieldStyle, width: 80 },
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "row", children: "row" }),
+                    /* @__PURE__ */ jsx("option", { value: "column", children: "column" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+              /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: "align" }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: selectedNode.style.alignItems ?? "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) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+              /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: "justify" }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: selectedNode.style.justifyContent ?? "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) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v)
+                  )
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: "width" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: selectedNode.style.width ?? "",
+                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 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+            /* @__PURE__ */ jsx("label", { style: { minWidth: 60 }, children: "height" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: selectedNode.style.height ?? "",
+                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 }
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              color: "var(--nice-text-secondary, #5c5f66)",
+              padding: 8,
+              textAlign: "center"
+            },
+            children: t("uiDesigner.selectAnElement", "Select an element")
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nice-ui-designer ${className}`,
+      style: { position: "relative", height: "100%" },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 20 }, children: /* @__PURE__ */ jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, UI_DESIGNER_TOUR) }) }),
+        /* @__PURE__ */ jsx(NiceAppShell, { flush: true, toolbar: toolbarContent, sidebar: leftPanel, rightSidebar: rightPanel, children: mainContent })
+      ]
+    }
+  );
+};
+export {
+  NiceUIDesigner,
+  exportToReact,
+  useUIDesigner
 };
-
-export { NiceUIDesigner, exportToReact, useUIDesigner };