aecode 0.2.0__py3-none-any.whl

aecode/ui_engine.py

@@ -0,0 +1,661 @@
+import re
+import json
+import webbrowser
+from pathlib import Path
+from lark import Lark, Transformer, v_args
+
+AEUI_GRAMMAR = r'''
+start: statement*
+
+?statement: page_stmt
+          | nav_stmt
+          | hero_stmt
+          | grid_stmt
+          | btn_stmt
+          | testimonials_stmt
+          | form_stmt
+          | canvas_stmt
+          | palette_stmt
+          | sizes_stmt
+          | tools_stmt
+          | footer_stmt
+          | state_stmt
+          | comment
+
+page_stmt: "PAGE" (PATH | IDENT)
+state_stmt: "STATE" /.+/
+nav_stmt: "NAV" "[" [nav_item ("," nav_item)*] "]"
+?nav_item: links_call | nav_text
+links_call: "Links(" [LINK_ITEM ("," LINK_ITEM)*] ")"
+nav_text: /[^,\]\r\n]+/
+
+hero_stmt: "HERO" ESCAPED_STRING [ALIGN]
+ALIGN: "center" | "left" | "right"
+
+grid_stmt: "GRID" INT (">" grid_target | block)
+grid_target: card_call | statement | block
+block: "{" statement* "}" | "[" statement* "]"
+card_call: "CARD" "(" [FIELD ("," FIELD)*] ")"
+
+btn_stmt: "BTN" ESCAPED_STRING
+testimonials_stmt: "TESTIMONIALS"
+form_stmt: "FORM" ESCAPED_STRING
+footer_stmt: "FOOTER"
+
+canvas_stmt: "CANVAS" DIMENSIONS
+palette_stmt: "PALETTE" "[" [COLOR ("," COLOR)*] "]"
+sizes_stmt: "SIZES" "[" [NUMBER ("," NUMBER)*] "]"
+tools_stmt: "TOOLS" "[" [TOOL ("," TOOL)*] "]"
+
+DIMENSIONS: /[0-9]+x[0-9]+/
+COLOR: /#[0-9a-fA-F]{3,8}/
+TOOL: /[a-zA-Z]+/
+FIELD: /[a-zA-Z0-9_]+/
+LINK_ITEM: /[^,\)\r\n]+/
+PATH: /\/[a-zA-Z0-9_\-\/]*/
+IDENT: /[a-zA-Z0-9_\-]+/
+
+comment: /\/\/.*/
+
+%import common.ESCAPED_STRING
+%import common.INT
+%import common.NUMBER
+%import common.WS
+%ignore WS
+'''
+
+_aeui_parser = None
+def get_parser():
+    global _aeui_parser
+    if _aeui_parser is None:
+        _aeui_parser = Lark(AEUI_GRAMMAR, parser='earley')
+    return _aeui_parser
+
+class AeUITransformer(Transformer):
+    def __init__(self):
+        super().__init__()
+        self.title = "AeUI Page"
+        self.has_canvas = False
+
+    def page_stmt(self, children):
+        val = str(children[0]).strip()
+        self.title = val
+        return ""
+
+    def state_stmt(self, children):
+        return ""
+
+    def comment(self, children):
+        return ""
+
+    def nav_stmt(self, children):
+        items = children
+        nav_html = '<nav class="bg-gray-900 text-white px-8 py-4 flex justify-between items-center shadow-md">\n'
+        for item in items:
+            if isinstance(item, dict) and item.get('type') == 'links':
+                nav_html += '  <div class="flex space-x-6">\n'
+                for link in item['links']:
+                    nav_html += f'    <a href="#" class="text-gray-300 hover:text-amber-400 transition">{link}</a>\n'
+                nav_html += '  </div>\n'
+            else:
+                text = str(item).strip()
+                if text:
+                    nav_html += f'  <div class="font-extrabold text-2xl text-amber-500">{text}</div>\n'
+        nav_html += '</nav>\n'
+        return nav_html
+
+    def links_call(self, children):
+        links = [str(c).strip() for c in children if str(c).strip()]
+        return {'type': 'links', 'links': links}
+
+    def nav_text(self, children):
+        return str(children[0]).strip()
+
+    def hero_stmt(self, children):
+        raw_text = children[0]
+        text = json.loads(raw_text) if raw_text.startswith('"') else str(raw_text)
+        align = "text-center"
+        if len(children) > 1 and children[1]:
+            align_val = str(children[1]).lower()
+            align = "text-center" if "center" in align_val else "text-left"
+        return f'''<header class="bg-gradient-to-b from-gray-900 via-gray-800 to-gray-900 text-white py-24 px-6 {align}">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="text-5xl md:text-6xl font-black tracking-tight mb-6">{text}</h1>
+  </div>
+</header>'''
+
+    def block(self, children):
+        # Flatten and filter out empty strings
+        items = [c for c in children if c and isinstance(c, str)]
+        return items
+
+    def card_call(self, children):
+        fields = [str(c).strip() for c in children]
+        return {'type': 'cards', 'fields': fields}
+
+    def grid_target(self, children):
+        return children[0]
+
+    def grid_stmt(self, children):
+        cols = int(children[0])
+        target = children[1] if len(children) > 1 else None
+
+        grid_html = f'<section class="max-w-6xl mx-auto px-6 py-16">\n  <div class="grid grid-cols-1 md:grid-cols-{cols} gap-8">\n'
+
+        if isinstance(target, dict) and target.get('type') == 'cards':
+            # Generate placeholder cards
+            for i in range(cols):
+                grid_html += f'''    <div class="bg-gray-900 rounded-2xl border border-gray-800 hover:border-amber-500/50 p-6 shadow-xl transition-all hover:-translate-y-2">
+      <div class="h-44 bg-gradient-to-tr from-amber-950/40 to-gray-800 rounded-xl mb-4"></div>
+      <h3 class="text-xl font-bold text-white mb-2">Card {i+1}</h3>
+      <p class="text-gray-400 mb-4">Descripcion</p>
+      <button class="px-4 py-2 bg-amber-600 hover:bg-amber-500 text-white font-semibold rounded-lg">Action</button>
+    </div>\n'''
+        elif isinstance(target, list):
+            # Nested statements inside block [ stmt1 stmt2 ] or { stmt1 stmt2 }
+            for item in target:
+                grid_html += f'    <div class="flex flex-col justify-center items-center w-full">{item}</div>\n'
+        elif isinstance(target, str) and target:
+            # Single statement nested
+            grid_html += f'    <div class="flex flex-col justify-center items-center w-full">{target}</div>\n'
+        else:
+            for i in range(cols):
+                grid_html += f'''    <div class="bg-gray-900 rounded-2xl border border-gray-800 p-6 shadow-xl">
+      <h3 class="text-xl font-bold text-white mb-2">Item {i+1}</h3>
+    </div>\n'''
+
+        grid_html += '  </div>\n</section>\n'
+        return grid_html
+
+    def btn_stmt(self, children):
+        raw = children[0]
+        label = json.loads(raw) if raw.startswith('"') else str(raw)
+        return f'''<div class="text-center py-8">
+  <button class="px-10 py-4 bg-gradient-to-r from-amber-500 to-orange-600 text-gray-950 font-black text-xl rounded-2xl shadow-2xl hover:scale-105 transition">{label}</button>
+</div>'''
+
+    def testimonials_stmt(self, children):
+        return '''<section class="max-w-6xl mx-auto px-6 py-12">
+  <h2 class="text-3xl font-bold text-center text-white mb-8">Lo que dicen nuestros usuarios</h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    <div class="bg-gray-900 border border-gray-800 p-6 rounded-2xl shadow-md">
+      <p class="text-gray-300 italic mb-4">"AeCode redujo nuestros costos de tokens de IA en más de 80%. Esencial para cualquier agente."</p>
+      <span class="font-bold text-amber-400">— Sarah C., AI Lead</span>
+    </div>
+    <div class="bg-gray-900 border border-gray-800 p-6 rounded-2xl shadow-md">
+      <p class="text-gray-300 italic mb-4">"Construir scrapers y dashboards en 3 líneas de código parece magia. 10/10."</p>
+      <span class="font-bold text-amber-400">— David R., Senior Engineer</span>
+    </div>
+  </div>
+</section>'''
+
+    def form_stmt(self, children):
+        raw = children[0]
+        form_title = json.loads(raw) if raw.startswith('"') else str(raw)
+        return f'''<section class="max-w-xl mx-auto px-6 py-10">
+  <div class="bg-gray-900 border border-gray-800 p-8 rounded-2xl shadow-xl text-center">
+    <h3 class="text-2xl font-bold text-white mb-4">{form_title}</h3>
+    <div class="flex flex-col sm:flex-row gap-3">
+      <input type="email" placeholder="tu@email.com" class="flex-1 bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-amber-500">
+      <button class="px-6 py-3 bg-amber-500 hover:bg-amber-400 text-gray-950 font-bold rounded-xl transition">Enviar</button>
+    </div>
+  </div>
+</section>'''
+
+    def canvas_stmt(self, children):
+        self.has_canvas = True
+        dims = str(children[0]).split('x')
+        w = dims[0] if len(dims) > 0 else "900"
+        h = dims[1] if len(dims) > 1 else "550"
+        return f'''<div class="max-w-6xl mx-auto px-4 pt-6 pb-2 flex justify-center">
+  <canvas id="paintCanvas" width="{w}" height="{h}" class="bg-white rounded-2xl shadow-2xl border-4 border-gray-800 cursor-crosshair touch-none max-w-full block"></canvas>
+</div>'''
+
+    def palette_stmt(self, children):
+        self.has_canvas = True
+        colors = [str(c).strip() for c in children]
+        swatches = []
+        for i, c in enumerate(colors):
+            active = "ring-4 ring-amber-400 scale-110" if i == 0 else ""
+            swatches.append(f'<button type="button" class="palette-swatch w-9 h-9 rounded-full border-2 border-gray-700 shadow-md transition-all duration-150 hover:scale-110 focus:outline-none {active}" data-color="{c}" style="background-color: {c};" title="{c}"></button>')
+        return f'''<div class="flex flex-wrap items-center justify-center gap-3 my-2 px-4">
+  <span class="text-xs uppercase font-extrabold tracking-wider text-gray-400">Color:</span>
+  <div class="flex flex-wrap items-center gap-2.5 bg-gray-900 border border-gray-800 p-2.5 rounded-2xl shadow-lg">
+    {''.join(swatches)}
+  </div>
+</div>'''
+
+    def sizes_stmt(self, children):
+        self.has_canvas = True
+        sizes = [str(c).strip() for c in children]
+        size_btns = []
+        for i, s in enumerate(sizes):
+            active = "bg-amber-500 text-gray-950 font-bold ring-2 ring-amber-400" if i == 1 or (len(sizes) == 1 and i == 0) else "bg-gray-800 text-gray-300 hover:bg-gray-700 font-semibold"
+            size_btns.append(f'<button type="button" class="size-btn px-4 py-2 rounded-xl text-sm transition-all duration-150 border border-gray-700 focus:outline-none {active}" data-size="{s}">{s}px</button>')
+        return f'''<div class="flex flex-wrap items-center justify-center gap-3 my-2 px-4">
+  <span class="text-xs uppercase font-extrabold tracking-wider text-gray-400">Grosor:</span>
+  <div class="flex flex-wrap items-center gap-2 bg-gray-900 border border-gray-800 p-2.5 rounded-2xl shadow-lg">
+    {''.join(size_btns)}
+  </div>
+</div>'''
+
+    def tools_stmt(self, children):
+        self.has_canvas = True
+        tools = [str(c).strip().lower() for c in children]
+        tool_icons = {
+            "brush": "✏️ Pincel",
+            "eraser": "🧹 Borrador",
+            "clear": "🗑️ Limpiar",
+            "download": "💾 Descargar"
+        }
+        tool_btns = []
+        for t in tools:
+            label = tool_icons.get(t, t.capitalize())
+            active = "bg-amber-500 text-gray-950 ring-2 ring-amber-400" if t == "brush" else "bg-gray-800 text-gray-200 hover:bg-gray-700"
+            tool_btns.append(f'<button type="button" class="tool-btn px-4 py-2 rounded-xl text-sm font-bold transition-all duration-150 border border-gray-700 focus:outline-none flex items-center gap-2 {active}" data-tool="{t}">{label}</button>')
+        return f'''<div class="flex flex-wrap items-center justify-center gap-3 my-2 px-4">
+  <span class="text-xs uppercase font-extrabold tracking-wider text-gray-400">Herramientas:</span>
+  <div class="flex flex-wrap items-center gap-2.5 bg-gray-900 border border-gray-800 p-2.5 rounded-2xl shadow-lg">
+    {''.join(tool_btns)}
+  </div>
+</div>'''
+
+    def footer_stmt(self, children):
+        return '''<footer class="bg-gray-900 text-white py-8 px-6 text-center border-t border-gray-800">
+  <p class="text-gray-400">Generado con AeCode</p>
+</footer>'''
+
+    def start(self, children):
+        # Collect all non-empty HTML parts
+        return [c for c in children if c and isinstance(c, str)]
+
+def _get_canvas_script():
+    return """<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const canvas = document.getElementById('paintCanvas');
+  if (!canvas) return;
+
+  const ctx = canvas.getContext('2d');
+  const backgroundColor = '#ffffff';
+
+  function fillBackground() {
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  fillBackground();
+
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let currentColor = '#000000';
+  let currentSize = 5;
+  let currentTool = 'brush';
+
+  function getCoords(e) {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    let clientX, clientY;
+    if (e.touches && e.touches.length > 0) {
+      clientX = e.touches[0].clientX;
+      clientY = e.touches[0].clientY;
+    } else {
+      clientX = e.clientX;
+      clientY = e.clientY;
+    }
+    return {
+      x: (clientX - rect.left) * scaleX,
+      y: (clientY - rect.top) * scaleY
+    };
+  }
+
+  function startDrawing(e) {
+    e.preventDefault();
+    isDrawing = true;
+    const pos = getCoords(e);
+    lastX = pos.x;
+    lastY = pos.y;
+    draw(e);
+  }
+
+  function draw(e) {
+    if (!isDrawing) return;
+    e.preventDefault();
+    const pos = getCoords(e);
+
+    ctx.beginPath();
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.lineWidth = currentSize;
+    ctx.strokeStyle = (currentTool === 'eraser') ? backgroundColor : currentColor;
+
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(pos.x, pos.y);
+    ctx.stroke();
+
+    lastX = pos.x;
+    lastY = pos.y;
+  }
+
+  function stopDrawing(e) {
+    if (!isDrawing) return;
+    isDrawing = false;
+  }
+
+  canvas.addEventListener('mousedown', startDrawing);
+  canvas.addEventListener('mousemove', draw);
+  canvas.addEventListener('mouseup', stopDrawing);
+  canvas.addEventListener('mouseleave', stopDrawing);
+
+  canvas.addEventListener('touchstart', startDrawing, { passive: false });
+  canvas.addEventListener('touchmove', draw, { passive: false });
+  canvas.addEventListener('touchend', stopDrawing, { passive: false });
+  canvas.addEventListener('touchcancel', stopDrawing, { passive: false });
+
+  // Swatches
+  const swatches = document.querySelectorAll('.palette-swatch');
+  swatches.forEach(swatch => {
+    swatch.addEventListener('click', () => {
+      currentColor = swatch.getAttribute('data-color');
+      if (currentTool === 'eraser') {
+        selectTool('brush');
+      }
+      swatches.forEach(s => s.classList.remove('ring-4', 'ring-amber-400', 'scale-110'));
+      swatch.classList.add('ring-4', 'ring-amber-400', 'scale-110');
+    });
+  });
+  if (swatches.length > 0) {
+    currentColor = swatches[0].getAttribute('data-color') || '#000000';
+  }
+
+  // Sizes
+  const sizeBtns = document.querySelectorAll('.size-btn');
+  sizeBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      currentSize = parseFloat(btn.getAttribute('data-size'));
+      sizeBtns.forEach(b => {
+        b.classList.remove('bg-amber-500', 'text-gray-950', 'ring-2', 'ring-amber-400');
+        b.classList.add('bg-gray-800', 'text-gray-300');
+      });
+      btn.classList.remove('bg-gray-800', 'text-gray-300');
+      btn.classList.add('bg-amber-500', 'text-gray-950', 'ring-2', 'ring-amber-400');
+    });
+  });
+  const initialActiveSize = document.querySelector('.size-btn.bg-amber-500');
+  if (initialActiveSize) {
+    currentSize = parseFloat(initialActiveSize.getAttribute('data-size')) || 5;
+  } else if (sizeBtns.length > 0) {
+    currentSize = parseFloat(sizeBtns[0].getAttribute('data-size')) || 5;
+  }
+
+  // Tools
+  const toolBtns = document.querySelectorAll('.tool-btn');
+  function selectTool(toolName) {
+    currentTool = toolName;
+    toolBtns.forEach(b => {
+      const t = b.getAttribute('data-tool');
+      if (t === 'clear' || t === 'download') return;
+      if (t === toolName) {
+        b.classList.remove('bg-gray-800', 'text-gray-200');
+        b.classList.add('bg-amber-500', 'text-gray-950', 'ring-2', 'ring-amber-400');
+      } else {
+        b.classList.remove('bg-amber-500', 'text-gray-950', 'ring-2', 'ring-amber-400');
+        b.classList.add('bg-gray-800', 'text-gray-200');
+      }
+    });
+  }
+
+  toolBtns.forEach(btn => {
+    const tool = btn.getAttribute('data-tool');
+    btn.addEventListener('click', () => {
+      if (tool === 'brush') {
+        selectTool('brush');
+      } else if (tool === 'eraser') {
+        selectTool('eraser');
+      } else if (tool === 'clear') {
+        fillBackground();
+      } else if (tool === 'download') {
+        const link = document.createElement('a');
+        link.download = 'aepaint.png';
+        link.href = canvas.toDataURL('image/png');
+        link.click();
+      }
+    });
+  });
+});
+</script>"""
+
+def build_ui(code):
+    try:
+        parser = get_parser()
+        tree = parser.parse(code)
+        transformer = AeUITransformer()
+        body_parts = transformer.transform(tree)
+        title = transformer.title
+        has_canvas = transformer.has_canvas
+    except Exception as e:
+        # Fallback to regex line-by-line if grammar encounters an untracked edge case
+        return _build_ui_fallback(code)
+
+    script_tag = _get_canvas_script() if has_canvas else ""
+    html = f"""<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{title}</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800;900&display=swap" rel="stylesheet">
+  <style>body {{ font-family: 'Plus Jakarta Sans', sans-serif; }}</style>
+</head>
+<body class="bg-gray-950 text-gray-100 min-h-screen pb-12">
+{''.join(body_parts)}
+{script_tag}
+</body>
+</html>"""
+    return html
+
+def _build_ui_fallback(code):
+    title = "AeUI Page"
+    body_parts = []
+    has_canvas = False
+    lines = [l.strip() for l in code.strip().split('\n') if l.strip() and not l.strip().startswith('//')]
+    
+    for line in lines:
+        if line.startswith('PAGE'):
+            parts = line.split()
+            if len(parts) > 1:
+                title = parts[1]
+        elif line.startswith('STATE'):
+            pass
+        elif line.startswith('NAV'):
+            content = extract_brackets(line)
+            items = split_items(content)
+            nav_html = '<nav class="bg-gray-900 text-white px-8 py-4 flex justify-between items-center shadow-md">\n'
+            for item in items:
+                if 'Links(' in item:
+                    links = extract_parens(item)
+                    link_items = split_items(links)
+                    nav_html += '  <div class="flex space-x-6">\n'
+                    for link in link_items:
+                        nav_html += f'    <a href="#" class="text-gray-300 hover:text-amber-400 transition">{link}</a>\n'
+                    nav_html += '  </div>\n'
+                else:
+                    nav_html += f'  <div class="font-extrabold text-2xl text-amber-500">{item}</div>\n'
+            nav_html += '</nav>\n'
+            body_parts.append(nav_html)
+        elif line.startswith('HERO'):
+            m = re.search(r'HERO\s+"([^"]+)"(?:\s+(.*))?', line)
+            if m:
+                text = m.group(1)
+                styles = m.group(2) or ""
+                align = "text-center" if "center" in styles else "text-left"
+                body_parts.append(f'''<header class="bg-gradient-to-b from-gray-900 via-gray-800 to-gray-900 text-white py-24 px-6 {align}">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="text-5xl md:text-6xl font-black tracking-tight mb-6">{text}</h1>
+  </div>
+</header>''')
+        elif line.startswith('GRID'):
+            m = re.search(r'GRID\s+(\d+)\s*>\s*(.*)', line)
+            if m:
+                cols = m.group(1)
+                grid_html = f'<section class="max-w-6xl mx-auto px-6 py-16">\n  <div class="grid grid-cols-1 md:grid-cols-{cols} gap-8">\n'
+                for i in range(int(cols)):
+                    grid_html += f'''    <div class="bg-gray-900 rounded-2xl border border-gray-800 hover:border-amber-500/50 p-6 shadow-xl transition-all hover:-translate-y-2">
+      <div class="h-44 bg-gradient-to-tr from-amber-950/40 to-gray-800 rounded-xl mb-4"></div>
+      <h3 class="text-xl font-bold text-white mb-2">Card {i+1}</h3>
+      <p class="text-gray-400 mb-4">Descripcion</p>
+      <button class="px-4 py-2 bg-amber-600 hover:bg-amber-500 text-white font-semibold rounded-lg">Action</button>
+    </div>\n'''
+                grid_html += '  </div>\n</section>\n'
+                body_parts.append(grid_html)
+        elif line.startswith('BTN'):
+            m = re.search(r'BTN\s+"([^"]+)"', line)
+            if m:
+                label = m.group(1)
+                body_parts.append(f'''<div class="text-center py-8">
+  <button class="px-10 py-4 bg-gradient-to-r from-amber-500 to-orange-600 text-gray-950 font-black text-xl rounded-2xl shadow-2xl hover:scale-105 transition">{label}</button>
+</div>''')
+        elif line.startswith('TESTIMONIALS'):
+            body_parts.append('''<section class="max-w-6xl mx-auto px-6 py-12">
+  <h2 class="text-3xl font-bold text-center text-white mb-8">Lo que dicen nuestros usuarios</h2>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    <div class="bg-gray-900 border border-gray-800 p-6 rounded-2xl shadow-md">
+      <p class="text-gray-300 italic mb-4">"AeCode redujo nuestros costos de tokens de IA en más de 80%. Esencial para cualquier agente."</p>
+      <span class="font-bold text-amber-400">— Sarah C., AI Lead</span>
+    </div>
+    <div class="bg-gray-900 border border-gray-800 p-6 rounded-2xl shadow-md">
+      <p class="text-gray-300 italic mb-4">"Construir scrapers y dashboards en 3 líneas de código parece magia. 10/10."</p>
+      <span class="font-bold text-amber-400">— David R., Senior Engineer</span>
+    </div>
+  </div>
+</section>''')
+        elif line.startswith('FORM'):
+            m = re.search(r'FORM\s+"([^"]+)"', line)
+            form_title = m.group(1) if m else "Suscríbete"
+            body_parts.append(f'''<section class="max-w-xl mx-auto px-6 py-10">
+  <div class="bg-gray-900 border border-gray-800 p-8 rounded-2xl shadow-xl text-center">
+    <h3 class="text-2xl font-bold text-white mb-4">{form_title}</h3>
+    <div class="flex flex-col sm:flex-row gap-3">
+      <input type="email" placeholder="tu@email.com" class="flex-1 bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-amber-500">
+      <button class="px-6 py-3 bg-amber-500 hover:bg-amber-400 text-gray-950 font-bold rounded-xl transition">Enviar</button>
+    </div>
+  </div>
+</section>''')
+        elif line.startswith('CANVAS'):
+            has_canvas = True
+            m = re.search(r'CANVAS\s+(\d+)x(\d+)', line)
+            w = m.group(1) if m else "900"
+            h = m.group(2) if m else "550"
+            body_parts.append(f'''<div class="max-w-6xl mx-auto px-4 pt-6 pb-2 flex justify-center">
+  <canvas id="paintCanvas" width="{w}" height="{h}" class="bg-white rounded-2xl shadow-2xl border-4 border-gray-800 cursor-crosshair touch-none max-w-full block"></canvas>
+</div>''')
+        elif line.startswith('PALETTE'):
+            has_canvas = True
+            content = extract_brackets(line)
+            colors = [c.strip() for c in split_items(content)]
+            swatches = []
+            for i, c in enumerate(colors):
+                active = "ring-4 ring-amber-400 scale-110" if i == 0 else ""
+                swatches.append(f'<button type="button" class="palette-swatch w-9 h-9 rounded-full border-2 border-gray-700 shadow-md transition-all duration-150 hover:scale-110 focus:outline-none {active}" data-color="{c}" style="background-color: {c};" title="{c}"></button>')
+            body_parts.append(f'''<div class="flex flex-wrap items-center justify-center gap-3 my-2 px-4">
+  <span class="text-xs uppercase font-extrabold tracking-wider text-gray-400">Color:</span>
+  <div class="flex flex-wrap items-center gap-2.5 bg-gray-900 border border-gray-800 p-2.5 rounded-2xl shadow-lg">
+    {''.join(swatches)}
+  </div>
+</div>''')
+        elif line.startswith('SIZES'):
+            has_canvas = True
+            content = extract_brackets(line)
+            sizes = [s.strip() for s in split_items(content)]
+            size_btns = []
+            for i, s in enumerate(sizes):
+                active = "bg-amber-500 text-gray-950 font-bold ring-2 ring-amber-400" if i == 1 or (len(sizes)==1 and i==0) else "bg-gray-800 text-gray-300 hover:bg-gray-700 font-semibold"
+                size_btns.append(f'<button type="button" class="size-btn px-4 py-2 rounded-xl text-sm transition-all duration-150 border border-gray-700 focus:outline-none {active}" data-size="{s}">{s}px</button>')
+            body_parts.append(f'''<div class="flex flex-wrap items-center justify-center gap-3 my-2 px-4">
+  <span class="text-xs uppercase font-extrabold tracking-wider text-gray-400">Grosor:</span>
+  <div class="flex flex-wrap items-center gap-2 bg-gray-900 border border-gray-800 p-2.5 rounded-2xl shadow-lg">
+    {''.join(size_btns)}
+  </div>
+</div>''')
+        elif line.startswith('TOOLS'):
+            has_canvas = True
+            content = extract_brackets(line)
+            tools = [t.strip().lower() for t in split_items(content)]
+            tool_icons = {
+                "brush": "✏️ Pincel",
+                "eraser": "🧹 Borrador",
+                "clear": "🗑️ Limpiar",
+                "download": "💾 Descargar"
+            }
+            tool_btns = []
+            for t in tools:
+                label = tool_icons.get(t, t.capitalize())
+                active = "bg-amber-500 text-gray-950 ring-2 ring-amber-400" if t == "brush" else "bg-gray-800 text-gray-200 hover:bg-gray-700"
+                tool_btns.append(f'<button type="button" class="tool-btn px-4 py-2 rounded-xl text-sm font-bold transition-all duration-150 border border-gray-700 focus:outline-none flex items-center gap-2 {active}" data-tool="{t}">{label}</button>')
+            body_parts.append(f'''<div class="flex flex-wrap items-center justify-center gap-3 my-2 px-4">
+  <span class="text-xs uppercase font-extrabold tracking-wider text-gray-400">Herramientas:</span>
+  <div class="flex flex-wrap items-center gap-2.5 bg-gray-900 border border-gray-800 p-2.5 rounded-2xl shadow-lg">
+    {''.join(tool_btns)}
+  </div>
+</div>''')
+        elif line.startswith('FOOTER'):
+            body_parts.append('''<footer class="bg-gray-900 text-white py-8 px-6 text-center border-t border-gray-800">
+  <p class="text-gray-400">Generado con AeCode</p>
+</footer>''')
+
+    script_tag = _get_canvas_script() if has_canvas else ""
+    html = f"""<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{title}</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800;900&display=swap" rel="stylesheet">
+  <style>body {{ font-family: 'Plus Jakarta Sans', sans-serif; }}</style>
+</head>
+<body class="bg-gray-950 text-gray-100 min-h-screen pb-12">
+{''.join(body_parts)}
+{script_tag}
+</body>
+</html>"""
+    return html
+
+def extract_brackets(text):
+    m = re.search(r'\[(.*?)\]', text)
+    return m.group(1) if m else ""
+
+def extract_parens(text):
+    m = re.search(r'\((.*?)\)', text)
+    return m.group(1) if m else ""
+
+def split_items(text):
+    items = []
+    current = []
+    depth = 0
+    for char in text:
+        if char == '(':
+            depth += 1
+            current.append(char)
+        elif char == ')':
+            depth -= 1
+            current.append(char)
+        elif char == ',' and depth == 0:
+            items.append(''.join(current).strip())
+            current = []
+        else:
+            current.append(char)
+    if current:
+        items.append(''.join(current).strip())
+    return [i for i in items if i]
+
+def build_and_open(code, output="output.html"):
+    html = build_ui(code)
+    Path(output).write_text(html, encoding='utf-8')
+    print(f"Generado: {output}")
+    try:
+        webbrowser.open(Path(output).as_uri())
+    except:
+        pass
+    return html