@easybits.cloud/html-tailwind-generator 0.2.2 → 0.2.4

package/dist/{chunk-CB2LECVT.js → chunk-2RCIJRYZ.js}

@@ -1,6 +1,6 @@
 import {
   enrichImages
-} from "./chunk-YPK3DAFK.js";
+} from "./chunk-4ACMDOL3.js";
 
 // src/refine.ts
 import { streamText } from "ai";
@@ -95,4 +95,4 @@ export {
   REFINE_SYSTEM,
   refineLanding
 };
-//# sourceMappingURL=chunk-CB2LECVT.js.map
+//# sourceMappingURL=chunk-2RCIJRYZ.js.map

package/dist/{chunk-YPK3DAFK.js → chunk-4ACMDOL3.js}

@@ -4,13 +4,19 @@ async function searchImage(query, apiKey) {
   if (!key) return null;
   try {
     const res = await fetch(
-      `https://api.pexels.com/v1/search?query=${encodeURIComponent(query)}&per_page=1&orientation=landscape`,
+      `https://api.pexels.com/v1/search?query=${encodeURIComponent(query)}&per_page=1&orientation=landscape&locale=en-US`,
       { headers: { Authorization: key } }
     );
-    if (!res.ok) return null;
+    if (!res.ok) {
+      console.warn(`[pexels] ${res.status} for "${query}"`);
+      return null;
+    }
     const data = await res.json();
     const photo = data.photos?.[0];
-    if (!photo) return null;
+    if (!photo) {
+      console.warn(`[pexels] 0 results for "${query}"`);
+      return null;
+    }
     return {
       url: photo.src.large,
       photographer: photo.photographer,
@@ -115,4 +121,4 @@ export {
   findImageSlots,
   enrichImages
 };
-//# sourceMappingURL=chunk-YPK3DAFK.js.map
+//# sourceMappingURL=chunk-4ACMDOL3.js.map

package/dist/chunk-4ACMDOL3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/images/pexels.ts","../src/images/enrichImages.ts"],"sourcesContent":["export interface PexelsResult {\n  url: string;\n  photographer: string;\n  alt: string;\n}\n\nexport async function searchImage(query: string, apiKey?: string): Promise<PexelsResult | null> {\n  const key = apiKey || process.env.PEXELS_API_KEY;\n  if (!key) return null;\n  try {\n    const res = await fetch(\n      `https://api.pexels.com/v1/search?query=${encodeURIComponent(query)}&per_page=1&orientation=landscape&locale=en-US`,\n      { headers: { Authorization: key } }\n    );\n    if (!res.ok) {\n      console.warn(`[pexels] ${res.status} for \"${query}\"`);\n      return null;\n    }\n    const data = await res.json();\n    const photo = data.photos?.[0];\n    if (!photo) {\n      console.warn(`[pexels] 0 results for \"${query}\"`);\n      return null;\n    }\n    return {\n      url: photo.src.large,\n      photographer: photo.photographer,\n      alt: photo.alt || query,\n    };\n  } catch {\n    return null;\n  }\n}\n","import { searchImage } from \"./pexels\";\nimport { generateImage } from \"./dalleImages\";\n\ninterface ImageMatch {\n  query: string;\n  searchStr: string;\n  replaceStr: string;\n}\n\nconst FAKE_DOMAINS = [\n  \"images.unsplash.com\",\n  \"unsplash.com\",\n  \"via.placeholder.com\",\n  \"placeholder.com\",\n  \"placehold.co\",\n  \"placehold.it\",\n  \"placekitten.com\",\n  \"picsum.photos\",\n  \"loremflickr.com\",\n  \"source.unsplash.com\",\n  \"dummyimage.com\",\n  \"fakeimg.pl\",\n  \"example.com\",\n  \"img.freepik.com\",\n  \"cdn.pixabay.com\",\n];\n\n/**\n * Find all images in HTML that need Pexels enrichment.\n * Two strategies:\n * 1. data-image-query=\"...\" — AI followed instructions\n * 2. <img src=\"fake-url\" — detect fake domains, use alt/class/nearby text as query\n */\nexport function findImageSlots(html: string): ImageMatch[] {\n  const matches: ImageMatch[] = [];\n  const seen = new Set<string>();\n\n  // 1. data-image-query=\"...\"\n  const diqRegex = /data-image-query=\"([^\"]+)\"/g;\n  let m: RegExpExecArray | null;\n  while ((m = diqRegex.exec(html)) !== null) {\n    const query = m[1];\n    if (seen.has(query)) continue;\n    seen.add(query);\n    matches.push({\n      query,\n      searchStr: `data-image-query=\"${query}\"`,\n      replaceStr: `src=\"{url}\" data-enriched=\"true\"`,\n    });\n  }\n\n  // 2. <img with fake/non-existent src URLs\n  const imgRegex = /<img\\s[^>]*src=\"(https?:\\/\\/[^\"]+)\"[^>]*>/gi;\n  while ((m = imgRegex.exec(html)) !== null) {\n    const fullTag = m[0];\n    const srcUrl = m[1];\n\n    if (fullTag.includes(\"data-enriched\")) continue;\n    if (srcUrl.includes(\"pexels.com\")) continue;\n    if (seen.has(srcUrl)) continue;\n\n    // Check if domain is fake\n    let isFake = false;\n    try {\n      const domain = new URL(srcUrl).hostname;\n      isFake = FAKE_DOMAINS.some((d) => domain.includes(d));\n    } catch {\n      isFake = true;\n    }\n    if (!isFake) continue;\n\n    // Extract query: try alt, then class context, then URL path words\n    const altMatch = fullTag.match(/alt=\"([^\"]*?)\"/);\n    let query = altMatch?.[1]?.trim() || \"\";\n\n    if (!query) {\n      // Try to extract meaningful words from the URL path\n      try {\n        const path = new URL(srcUrl).pathname;\n        const words = path\n          .replace(/[^a-zA-Z]/g, \" \")\n          .split(/\\s+/)\n          .filter((w) => w.length > 2)\n          .slice(0, 4)\n          .join(\" \");\n        if (words.length > 3) query = words;\n      } catch { /* ignore */ }\n    }\n\n    if (!query) query = \"professional website hero image\";\n\n    seen.add(srcUrl);\n    matches.push({\n      query,\n      searchStr: `src=\"${srcUrl}\"`,\n      replaceStr: `src=\"{url}\" data-enriched=\"true\"`,\n    });\n  }\n\n  return matches;\n}\n\n/**\n * Enrich all images in an HTML string with Pexels photos.\n */\nexport async function enrichImages(html: string, pexelsApiKey?: string, openaiApiKey?: string): Promise<string> {\n  const slots = findImageSlots(html);\n  if (slots.length === 0) return html;\n\n  let result = html;\n  const promises = slots.map(async (slot) => {\n    let url: string | null = null;\n    // Pexels first (permanent URLs), DALL-E disabled (temporary URLs expire ~2hrs)\n    const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);\n    url = img?.url || null;\n    url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;\n    const replacement = slot.replaceStr.replace(\"{url}\", url);\n    result = result.replaceAll(slot.searchStr, replacement);\n  });\n\n  await Promise.allSettled(promises);\n\n  // Catch any remaining <img> tags without src (AI didn't follow instructions)\n  result = result.replace(/<img\\s(?![^>]*\\bsrc=)([^>]*?)>/gi, (_match, attrs) => {\n    const altMatch = attrs.match(/alt=\"([^\"]*?)\"/);\n    const query = altMatch?.[1] || \"professional image\";\n    return `<img src=\"https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}\" ${attrs}>`;\n  });\n\n  return result;\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-CDSMYEXN.js → chunk-5EWGZ32G.js}

@@ -2,17 +2,17 @@
 var LANDING_THEMES = [
   {
     id: "default",
-    label: "Neutral",
+    label: "Modern Blue",
     colors: {
-      primary: "#18181b",
-      "primary-light": "#3f3f46",
-      "primary-dark": "#09090b",
-      secondary: "#a1a1aa",
-      accent: "#18181b",
+      primary: "#3b82f6",
+      "primary-light": "#60a5fa",
+      "primary-dark": "#2563eb",
+      secondary: "#64748b",
+      accent: "#3b82f6",
       surface: "#ffffff",
-      "surface-alt": "#fafafa",
-      "on-surface": "#18181b",
-      "on-surface-muted": "#71717a",
+      "surface-alt": "#f8fafc",
+      "on-surface": "#0f172a",
+      "on-surface-muted": "#64748b",
       "on-primary": "#ffffff"
     }
   },
@@ -33,18 +33,18 @@ var LANDING_THEMES = [
     }
   },
   {
-    id: "slate",
-    label: "Slate",
+    id: "monochrome",
+    label: "Monochrome",
     colors: {
-      primary: "#3b82f6",
-      "primary-light": "#60a5fa",
-      "primary-dark": "#2563eb",
-      secondary: "#64748b",
-      accent: "#3b82f6",
+      primary: "#18181b",
+      "primary-light": "#3f3f46",
+      "primary-dark": "#09090b",
+      secondary: "#a1a1aa",
+      accent: "#18181b",
       surface: "#ffffff",
-      "surface-alt": "#f8fafc",
-      "on-surface": "#0f172a",
-      "on-surface-muted": "#64748b",
+      "surface-alt": "#fafafa",
+      "on-surface": "#18181b",
+      "on-surface-muted": "#71717a",
       "on-primary": "#ffffff"
     }
   },
@@ -509,4 +509,4 @@ export {
   buildPreviewHtml,
   buildDeployHtml
 };
-//# sourceMappingURL=chunk-CDSMYEXN.js.map
+//# sourceMappingURL=chunk-5EWGZ32G.js.map

package/dist/chunk-5EWGZ32G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/themes.ts","../src/iframeScript.ts","../src/buildHtml.ts"],"sourcesContent":["export interface LandingTheme {\n  id: string;\n  label: string;\n  colors: {\n    primary: string;\n    \"primary-light\": string;\n    \"primary-dark\": string;\n    secondary: string;\n    accent: string;\n    surface: string;\n    \"surface-alt\": string;\n    \"on-surface\": string;\n    \"on-surface-muted\": string;\n    \"on-primary\": string;\n  };\n}\n\nexport const LANDING_THEMES: LandingTheme[] = [\n  {\n    id: \"default\",\n    label: \"Modern Blue\",\n    colors: {\n      primary: \"#3b82f6\",\n      \"primary-light\": \"#60a5fa\",\n      \"primary-dark\": \"#2563eb\",\n      secondary: \"#64748b\",\n      accent: \"#3b82f6\",\n      surface: \"#ffffff\",\n      \"surface-alt\": \"#f8fafc\",\n      \"on-surface\": \"#0f172a\",\n      \"on-surface-muted\": \"#64748b\",\n      \"on-primary\": \"#ffffff\",\n    },\n  },\n  {\n    id: \"dark\",\n    label: \"Dark\",\n    colors: {\n      primary: \"#e4e4e7\",\n      \"primary-light\": \"#f4f4f5\",\n      \"primary-dark\": \"#a1a1aa\",\n      secondary: \"#71717a\",\n      accent: \"#a78bfa\",\n      surface: \"#09090b\",\n      \"surface-alt\": \"#18181b\",\n      \"on-surface\": \"#fafafa\",\n      \"on-surface-muted\": \"#a1a1aa\",\n      \"on-primary\": \"#09090b\",\n    },\n  },\n  {\n    id: \"monochrome\",\n    label: \"Monochrome\",\n    colors: {\n      primary: \"#18181b\",\n      \"primary-light\": \"#3f3f46\",\n      \"primary-dark\": \"#09090b\",\n      secondary: \"#a1a1aa\",\n      accent: \"#18181b\",\n      surface: \"#ffffff\",\n      \"surface-alt\": \"#fafafa\",\n      \"on-surface\": \"#18181b\",\n      \"on-surface-muted\": \"#71717a\",\n      \"on-primary\": \"#ffffff\",\n    },\n  },\n  {\n    id: \"midnight\",\n    label: \"Midnight\",\n    colors: {\n      primary: \"#6366f1\",\n      \"primary-light\": \"#818cf8\",\n      \"primary-dark\": \"#4f46e5\",\n      secondary: \"#94a3b8\",\n      accent: \"#a78bfa\",\n      surface: \"#0f172a\",\n      \"surface-alt\": \"#1e293b\",\n      \"on-surface\": \"#e2e8f0\",\n      \"on-surface-muted\": \"#94a3b8\",\n      \"on-primary\": \"#ffffff\",\n    },\n  },\n  {\n    id: \"warm\",\n    label: \"Warm\",\n    colors: {\n      primary: \"#b45309\",\n      \"primary-light\": \"#d97706\",\n      \"primary-dark\": \"#92400e\",\n      secondary: \"#78716c\",\n      accent: \"#b45309\",\n      surface: \"#fafaf9\",\n      \"surface-alt\": \"#f5f5f4\",\n      \"on-surface\": \"#1c1917\",\n      \"on-surface-muted\": \"#78716c\",\n      \"on-primary\": \"#ffffff\",\n    },\n  },\n];\n\nexport interface CustomColors {\n  primary: string;\n  secondary?: string;\n  accent?: string;\n  surface?: string;\n}\n\nfunction parseHex(hex: string) {\n  return {\n    r: parseInt(hex.slice(1, 3), 16),\n    g: parseInt(hex.slice(3, 5), 16),\n    b: parseInt(hex.slice(5, 7), 16),\n  };\n}\n\nfunction toHex(r: number, g: number, b: number) {\n  return `#${[r, g, b].map((c) => Math.max(0, Math.min(255, c)).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\nfunction luminance(hex: string) {\n  const { r, g, b } = parseHex(hex);\n  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n}\n\nfunction lighten(hex: string, amount = 40) {\n  const { r, g, b } = parseHex(hex);\n  return toHex(r + amount, g + amount, b + amount);\n}\n\nfunction darken(hex: string, amount = 40) {\n  const { r, g, b } = parseHex(hex);\n  return toHex(r - amount, g - amount, b - amount);\n}\n\nexport function buildCustomTheme(colors: CustomColors): LandingTheme {\n  const { primary, secondary = \"#f59e0b\", accent = \"#06b6d4\", surface = \"#ffffff\" } = colors;\n\n  const onPrimary = luminance(primary) > 0.5 ? \"#111827\" : \"#ffffff\";\n  const surfaceLum = luminance(surface);\n  const isDarkSurface = surfaceLum < 0.5;\n\n  return {\n    id: \"custom\",\n    label: \"Custom\",\n    colors: {\n      primary,\n      \"primary-light\": lighten(primary),\n      \"primary-dark\": darken(primary),\n      secondary,\n      accent,\n      surface,\n      \"surface-alt\": isDarkSurface ? lighten(surface, 20) : darken(surface, 5),\n      \"on-surface\": isDarkSurface ? \"#f1f5f9\" : \"#111827\",\n      \"on-surface-muted\": isDarkSurface ? \"#94a3b8\" : \"#6b7280\",\n      \"on-primary\": onPrimary,\n    },\n  };\n}\n\nexport function buildCustomThemeCss(colors: CustomColors): string {\n  const theme = buildCustomTheme(colors);\n  return `[data-theme=\"custom\"] {\\n${buildCssVars(theme.colors)}\\n}`;\n}\n\n/** CSS custom properties for a theme */\nfunction buildCssVars(colors: LandingTheme[\"colors\"]): string {\n  return Object.entries(colors)\n    .map(([k, v]) => `  --color-${k}: ${v};`)\n    .join(\"\\n\");\n}\n\n/** Build the tailwind.config JS object string for TW v3 CDN */\nfunction buildTailwindConfig(): string {\n  const colorEntries = Object.keys(LANDING_THEMES[0].colors)\n    .map((k) => `          '${k}': 'var(--color-${k})'`)\n    .join(\",\\n\");\n\n  return `{\n    theme: {\n      extend: {\n        colors: {\n${colorEntries}\n        }\n      }\n    }\n  }`;\n}\n\nexport function buildThemeCss(): { css: string; tailwindConfig: string } {\n  const defaultTheme = LANDING_THEMES[0];\n\n  const overrides = LANDING_THEMES.slice(1)\n    .map((t) => `[data-theme=\"${t.id}\"] {\\n${buildCssVars(t.colors)}\\n}`)\n    .join(\"\\n\\n\");\n\n  const css = `:root {\\n${buildCssVars(defaultTheme.colors)}\\n}\\n\\n${overrides}`;\n  return { css, tailwindConfig: buildTailwindConfig() };\n}\n\nexport function buildSingleThemeCss(themeId: string): { css: string; tailwindConfig: string } {\n  const theme = LANDING_THEMES.find((t) => t.id === themeId) || LANDING_THEMES[0];\n  const css = `:root {\\n${buildCssVars(theme.colors)}\\n}`;\n  return { css, tailwindConfig: buildTailwindConfig() };\n}\n","/**\n * JavaScript injected into the landing v3 iframe.\n * Handles hover highlights, click selection, contentEditable text editing,\n * postMessage communication with the parent editor,\n * and incremental section injection from parent.\n */\nexport function getIframeScript(): string {\n  return `\n(function() {\n  let hoveredEl = null;\n  let selectedEl = null;\n  const OUTLINE_HOVER = '2px solid #3B82F6';\n  const OUTLINE_SELECTED = '2px solid #8B5CF6';\n\n  function getSectionId(el) {\n    let node = el;\n    while (node && node !== document.body) {\n      if (node.dataset && node.dataset.sectionId) {\n        return node.dataset.sectionId;\n      }\n      node = node.parentElement;\n    }\n    return null;\n  }\n\n  function getSectionElement(sectionId) {\n    return document.querySelector('[data-section-id=\"' + sectionId + '\"]');\n  }\n\n  function getElementPath(el) {\n    const parts = [];\n    let node = el;\n    while (node && node !== document.body) {\n      let tag = node.tagName.toLowerCase();\n      if (node.id) { tag += '#' + node.id; }\n      const siblings = node.parentElement ? Array.from(node.parentElement.children).filter(function(c) { return c.tagName === node.tagName; }) : [];\n      if (siblings.length > 1) { tag += ':nth(' + siblings.indexOf(node) + ')'; }\n      parts.unshift(tag);\n      node = node.parentElement;\n    }\n    return parts.join(' > ');\n  }\n\n  function isTextElement(el) {\n    var textTags = ['H1','H2','H3','H4','H5','H6','P','SPAN','LI','A','BLOCKQUOTE','LABEL','TD','TH','FIGCAPTION','BUTTON'];\n    return textTags.indexOf(el.tagName) !== -1;\n  }\n\n  // Hover\n  document.addEventListener('mouseover', function(e) {\n    var el = e.target;\n    if (el === document.body || el === document.documentElement) return;\n    if (el === selectedEl) return;\n    if (hoveredEl && hoveredEl !== selectedEl) {\n      hoveredEl.style.outline = '';\n      hoveredEl.style.outlineOffset = '';\n    }\n    hoveredEl = el;\n    if (el !== selectedEl) {\n      el.style.outline = OUTLINE_HOVER;\n      el.style.outlineOffset = '-2px';\n    }\n  });\n\n  document.addEventListener('mouseout', function(e) {\n    if (hoveredEl && hoveredEl !== selectedEl) {\n      hoveredEl.style.outline = '';\n      hoveredEl.style.outlineOffset = '';\n    }\n    hoveredEl = null;\n  });\n\n  // Click — select element\n  document.addEventListener('click', function(e) {\n    e.preventDefault();\n    e.stopPropagation();\n    var el = e.target;\n\n    // Deselect previous\n    if (selectedEl) {\n      selectedEl.style.outline = '';\n      selectedEl.style.outlineOffset = '';\n    }\n\n    if (selectedEl === el) {\n      selectedEl = null;\n      window.parent.postMessage({ type: 'element-deselected' }, '*');\n      return;\n    }\n\n    selectedEl = el;\n\n    // Clear hover styles BEFORE capturing openTag (so it matches source HTML)\n    el.style.outline = '';\n    el.style.outlineOffset = '';\n    var openTag = el.outerHTML.substring(0, el.outerHTML.indexOf('>') + 1).substring(0, 120);\n\n    el.style.outline = OUTLINE_SELECTED;\n    el.style.outlineOffset = '-2px';\n\n    var rect = el.getBoundingClientRect();\n    var attrs = {};\n    if (el.tagName === 'IMG') {\n      attrs = { src: el.getAttribute('src') || '', alt: el.getAttribute('alt') || '' };\n    }\n    if (el.tagName === 'A') {\n      attrs = { href: el.getAttribute('href') || '', target: el.getAttribute('target') || '' };\n    }\n\n    window.parent.postMessage({\n      type: 'element-selected',\n      sectionId: getSectionId(el),\n      tagName: el.tagName,\n      rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n      text: (el.textContent || '').substring(0, 200),\n      openTag: openTag,\n      elementPath: getElementPath(el),\n      isSectionRoot: el.dataset && el.dataset.sectionId ? true : false,\n      attrs: attrs,\n    }, '*');\n  }, true);\n\n  // Double-click — contentEditable for text\n  document.addEventListener('dblclick', function(e) {\n    e.preventDefault();\n    e.stopPropagation();\n    var el = e.target;\n    if (!isTextElement(el)) return;\n\n    el.contentEditable = 'true';\n    el.focus();\n    el.style.outline = '2px dashed #F59E0B';\n    el.style.outlineOffset = '-2px';\n\n    function onBlur() {\n      el.contentEditable = 'false';\n      el.style.outline = '';\n      el.style.outlineOffset = '';\n      el.removeEventListener('blur', onBlur);\n      el.removeEventListener('keydown', onKeydown);\n\n      var sid = getSectionId(el);\n      var sectionEl = sid ? getSectionElement(sid) : null;\n      window.parent.postMessage({\n        type: 'text-edited',\n        sectionId: sid,\n        elementPath: getElementPath(el),\n        newText: el.innerHTML,\n        sectionHtml: sectionEl ? sectionEl.innerHTML : null,\n      }, '*');\n\n      selectedEl = null;\n    }\n\n    function onKeydown(ev) {\n      if (ev.key === 'Escape') {\n        el.blur();\n      }\n    }\n\n    el.addEventListener('blur', onBlur);\n    el.addEventListener('keydown', onKeydown);\n  }, true);\n\n  // Listen for messages FROM parent (incremental section injection)\n  window.addEventListener('message', function(e) {\n    var msg = e.data;\n    if (!msg || !msg.action) return;\n\n    if (msg.action === 'add-section') {\n      var wrapper = document.createElement('div');\n      wrapper.setAttribute('data-section-id', msg.id);\n      wrapper.innerHTML = msg.html;\n      wrapper.style.animation = 'fadeInUp 0.4s ease-out';\n      document.body.appendChild(wrapper);\n      wrapper.scrollIntoView({ behavior: 'smooth', block: 'end' });\n    }\n\n    if (msg.action === 'update-section') {\n      var el = getSectionElement(msg.id);\n      if (el && typeof window.morphdom === 'function') {\n        var tmp = document.createElement('div');\n        tmp.innerHTML = msg.html;\n        window.morphdom(el, tmp, {\n          childrenOnly: true,\n          onBeforeElUpdated: function(fromEl, toEl) {\n            if (fromEl.isEqualNode(toEl)) return false;\n            return true;\n          }\n        });\n      } else if (el) {\n        el.innerHTML = msg.html;\n      }\n    }\n\n    if (msg.action === 'remove-section') {\n      var el = getSectionElement(msg.id);\n      if (el) { el.remove(); }\n    }\n\n    if (msg.action === 'reorder-sections') {\n      // msg.order = [id1, id2, id3, ...]\n      var order = msg.order;\n      for (var i = 0; i < order.length; i++) {\n        var el = getSectionElement(order[i]);\n        if (el) { document.body.appendChild(el); }\n      }\n    }\n\n    if (msg.action === 'update-attribute') {\n      var sectionEl = getSectionElement(msg.sectionId);\n      if (sectionEl) {\n        var target = null;\n        if (msg.elementPath) {\n          // Find element by matching path\n          var allEls = sectionEl.querySelectorAll(msg.tagName || '*');\n          for (var i = 0; i < allEls.length; i++) {\n            if (getElementPath(allEls[i]) === msg.elementPath) {\n              target = allEls[i];\n              break;\n            }\n          }\n        }\n        if (target) {\n          target.setAttribute(msg.attr, msg.value);\n          window.parent.postMessage({\n            type: 'section-html-updated',\n            sectionId: msg.sectionId,\n            sectionHtml: sectionEl.innerHTML,\n          }, '*');\n        }\n      }\n    }\n\n    if (msg.action === 'set-theme') {\n      if (msg.theme && msg.theme !== 'default') {\n        document.documentElement.setAttribute('data-theme', msg.theme);\n      } else {\n        document.documentElement.removeAttribute('data-theme');\n      }\n    }\n\n    if (msg.action === 'set-custom-css') {\n      var customStyle = document.getElementById('custom-theme-css');\n      if (!customStyle) {\n        customStyle = document.createElement('style');\n        customStyle.id = 'custom-theme-css';\n        document.head.appendChild(customStyle);\n      }\n      customStyle.textContent = msg.css || '';\n    }\n\n    if (msg.action === 'scroll-to-section') {\n      var el = getSectionElement(msg.id);\n      if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }\n    }\n\n    if (msg.action === 'full-rewrite') {\n      // Fallback: rewrite everything\n      document.body.innerHTML = msg.html;\n    }\n  });\n\n  // Inject animation keyframe\n  var style = document.createElement('style');\n  style.textContent = '@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }';\n  document.head.appendChild(style);\n\n  // Notify parent we're ready\n  window.parent.postMessage({ type: 'ready' }, '*');\n})();\n`;\n}\n","import type { Section3 } from \"./types\";\nimport { getIframeScript } from \"./iframeScript\";\nimport { buildThemeCss, buildSingleThemeCss, buildCustomTheme, type CustomColors } from \"./themes\";\n\n/**\n * Build the full HTML for the iframe preview (with editing script).\n */\nexport function buildPreviewHtml(sections: Section3[], theme?: string): string {\n  const sorted = [...sections].sort((a, b) => a.order - b.order);\n  const body = sorted\n    .map((s) => `<div data-section-id=\"${s.id}\">${s.html}</div>`)\n    .join(\"\\n\");\n\n  const dataTheme = theme && theme !== \"default\" ? ` data-theme=\"${theme}\"` : \"\";\n  const { css, tailwindConfig } = buildThemeCss();\n\n  return `<!DOCTYPE html>\n<html lang=\"es\"${dataTheme}>\n<head>\n<meta charset=\"UTF-8\"/>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"/>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<script src=\"https://unpkg.com/morphdom@2.7.4/dist/morphdom-umd.min.js\"></script>\n<script>tailwind.config = ${tailwindConfig}</script>\n<style>\n${css}\n*{margin:0;padding:0;box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{font-family:system-ui,-apple-system,sans-serif;background-color:var(--color-surface);color:var(--color-on-surface)}\nimg{max-width:100%}\nsection{max-width:80rem;margin-left:auto;margin-right:auto}\n[contenteditable=\"true\"]{cursor:text}\n</style>\n</head>\n<body class=\"bg-surface text-on-surface\">\n${body}\n<script>${getIframeScript()}</script>\n</body>\n</html>`;\n}\n\n/**\n * Build the deploy HTML (no editing script, clean output).\n */\nexport function buildDeployHtml(sections: Section3[], theme?: string, customColors?: CustomColors): string {\n  const sorted = [...sections].sort((a, b) => a.order - b.order);\n  const body = sorted.map((s) => s.html).join(\"\\n\");\n\n  const isCustom = theme === \"custom\" && customColors;\n  const dataTheme = theme && theme !== \"default\" && !isCustom ? ` data-theme=\"${theme}\"` : \"\";\n\n  // For custom theme, build CSS from the custom colors directly (no data-theme needed, inject as :root)\n  const { css: baseCss, tailwindConfig } = isCustom\n    ? (() => {\n        const ct = buildCustomTheme(customColors);\n        const vars = Object.entries(ct.colors).map(([k, v]) => `  --color-${k}: ${v};`).join(\"\\n\");\n        return { css: `:root {\\n${vars}\\n}`, tailwindConfig: buildSingleThemeCss(\"default\").tailwindConfig };\n      })()\n    : buildSingleThemeCss(theme || \"default\");\n\n  return `<!DOCTYPE html>\n<html lang=\"es\"${dataTheme}>\n<head>\n<meta charset=\"UTF-8\"/>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"/>\n<title>Landing Page</title>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<script>tailwind.config = ${tailwindConfig}</script>\n<style>\n${baseCss}\n*{margin:0;padding:0;box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{font-family:system-ui,-apple-system,sans-serif;background-color:var(--color-surface);color:var(--color-on-surface)}\nsection{max-width:80rem;margin-left:auto;margin-right:auto}\n</style>\n</head>\n<body class=\"bg-surface text-on-surface\">\n${body}\n</body>\n</html>`;\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-S7YLW6ZU.js → chunk-EFY57D7X.js}

@@ -1,7 +1,7 @@
 import {
   findImageSlots,
   searchImage
-} from "./chunk-YPK3DAFK.js";
+} from "./chunk-4ACMDOL3.js";
 
 // src/generate.ts
 import { streamText } from "ai";
@@ -28,9 +28,19 @@ RULES:
 - All text content in Spanish unless the prompt specifies otherwise
 - Use real-looking content (not Lorem ipsum) \u2014 make it specific to the prompt
 
+RESPONSIVE \u2014 MANDATORY:
+- EVERY grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 (NEVER grid-cols-3 alone)
+- EVERY flex row: flex flex-col md:flex-row (NEVER flex flex-row alone)
+- Text sizes: text-3xl md:text-5xl lg:text-7xl (NEVER text-7xl alone)
+- Images: w-full h-auto object-cover max-w-full
+- Padding: px-4 md:px-8 lg:px-16 (NEVER px-16 alone)
+- Hide decorative on mobile if breaks layout: hidden md:block
+
 IMAGES \u2014 CRITICAL:
-- Use <img data-image-query="english search query" alt="description" class="..."/>
+- EVERY image MUST use: <img data-image-query="english search query" alt="description" class="w-full h-auto object-cover rounded-xl"/>
+- NEVER use <img> without data-image-query
 - NEVER include a src attribute \u2014 the system auto-replaces data-image-query with a real image URL
+- Queries must be generic stock-photo friendly (e.g. "modern office" not "Juan's cybercafe")
 - For avatar-like elements, use colored divs with initials instead of img tags (e.g. <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold">JD</div>)
 
 COLOR SYSTEM \u2014 CRITICAL (READ CAREFULLY):
@@ -227,9 +237,59 @@ Additional instructions: ${extraInstructions}` : "";
         };
         allSections.push(section);
         onSection?.(section);
+        const slots = findImageSlots(section.html);
+        if (slots.length > 0) {
+          const sectionRef = section;
+          const slotsSnapshot = slots.map((s) => ({ ...s }));
+          imagePromises.push(
+            (async () => {
+              const results = await Promise.allSettled(
+                slotsSnapshot.map(async (slot) => {
+                  let url = null;
+                  const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);
+                  url = img?.url || null;
+                  url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;
+                  return { slot, url };
+                })
+              );
+              let html = sectionRef.html;
+              for (const r of results) {
+                if (r.status === "fulfilled" && r.value) {
+                  const { slot, url } = r.value;
+                  const replacement = slot.replaceStr.replace("{url}", url);
+                  html = html.replaceAll(slot.searchStr, replacement);
+                }
+              }
+              if (html !== sectionRef.html) {
+                sectionRef.html = html;
+                onImageUpdate?.(sectionRef.id, html);
+              }
+            })()
+          );
+        }
       }
     }
     await Promise.allSettled(imagePromises);
+    for (const section of allSections) {
+      const before = section.html;
+      section.html = section.html.replace(
+        /<img\s(?![^>]*\bsrc=)([^>]*?)>/gi,
+        (_match, attrs) => {
+          const altMatch = attrs.match(/alt="([^"]*?)"/);
+          const query = altMatch?.[1] || "image";
+          return `<img src="https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}" ${attrs}>`;
+        }
+      );
+      section.html = section.html.replace(
+        /data-image-query="([^"]+)"/g,
+        (_match, query) => {
+          return `src="https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}" data-enriched="placeholder"`;
+        }
+      );
+      if (section.html !== before) {
+        onImageUpdate?.(section.id, section.html);
+      }
+    }
     onDone?.(allSections);
     return allSections;
   } catch (err) {
@@ -245,4 +305,4 @@ export {
   extractJsonObjects,
   generateLanding
 };
-//# sourceMappingURL=chunk-S7YLW6ZU.js.map
+//# sourceMappingURL=chunk-EFY57D7X.js.map

package/dist/chunk-EFY57D7X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/generate.ts"],"sourcesContent":["import { streamText } from \"ai\";\nimport { createAnthropic } from \"@ai-sdk/anthropic\";\nimport { nanoid } from \"nanoid\";\nimport { findImageSlots } from \"./images/enrichImages\";\nimport { searchImage } from \"./images/pexels\";\nimport { generateImage } from \"./images/dalleImages\";\nimport type { Section3 } from \"./types\";\n\nasync function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {\n  const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;\n  if (openaiKey) {\n    const { createOpenAI } = await import(\"@ai-sdk/openai\");\n    const openai = createOpenAI({ apiKey: openaiKey });\n    return openai(opts.modelId || opts.defaultOpenai);\n  }\n  const anthropic = opts.anthropicApiKey\n    ? createAnthropic({ apiKey: opts.anthropicApiKey })\n    : createAnthropic();\n  return anthropic(opts.modelId || opts.defaultAnthropic);\n}\n\nexport const SYSTEM_PROMPT = `You are a world-class web designer who creates AWARD-WINNING landing pages. Your designs win Awwwards, FWA, and CSS Design Awards. You think in terms of visual hierarchy, whitespace, and emotional impact.\n\nRULES:\n- Each section is a complete <section> tag with Tailwind CSS classes\n- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import, no @tailwind directives)\n- NO JavaScript, only HTML+Tailwind\n- Each section must be independent and self-contained\n- Responsive: mobile-first with sm/md/lg/xl breakpoints\n- All text content in Spanish unless the prompt specifies otherwise\n- Use real-looking content (not Lorem ipsum) — make it specific to the prompt\n\nRESPONSIVE — MANDATORY:\n- EVERY grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 (NEVER grid-cols-3 alone)\n- EVERY flex row: flex flex-col md:flex-row (NEVER flex flex-row alone)\n- Text sizes: text-3xl md:text-5xl lg:text-7xl (NEVER text-7xl alone)\n- Images: w-full h-auto object-cover max-w-full\n- Padding: px-4 md:px-8 lg:px-16 (NEVER px-16 alone)\n- Hide decorative on mobile if breaks layout: hidden md:block\n\nIMAGES — CRITICAL:\n- EVERY image MUST use: <img data-image-query=\"english search query\" alt=\"description\" class=\"w-full h-auto object-cover rounded-xl\"/>\n- NEVER use <img> without data-image-query\n- NEVER include a src attribute — the system auto-replaces data-image-query with a real image URL\n- Queries must be generic stock-photo friendly (e.g. \"modern office\" not \"Juan's cybercafe\")\n- For avatar-like elements, use colored divs with initials instead of img tags (e.g. <div class=\"w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold\">JD</div>)\n\nCOLOR SYSTEM — CRITICAL (READ CAREFULLY):\n- Use semantic color classes: bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary, bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted, bg-secondary, text-secondary, bg-accent, text-accent\n- NEVER use hardcoded Tailwind color classes: NO bg-gray-*, bg-black, bg-white, bg-indigo-*, bg-blue-*, bg-purple-*, text-gray-*, text-black, text-white, etc.\n- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.\n- ALL backgrounds MUST use: bg-primary, bg-primary-dark, bg-surface, bg-surface-alt\n- ALL text MUST use: text-on-surface, text-on-surface-muted, text-on-primary, text-primary, text-accent\n- CONTRAST RULE: on bg-primary or bg-primary-dark → use text-on-primary. On bg-surface or bg-surface-alt → use text-on-surface or text-on-surface-muted. NEVER put text-on-surface on bg-primary or vice versa. text-accent is decorative — use sparingly on bg-surface/bg-surface-alt only.\n- For gradients: from-primary to-primary-dark, from-surface to-surface-alt\n- For hover: hover:bg-primary-dark, hover:bg-primary-light\n\nDESIGN PHILOSOPHY — what separates good from GREAT:\n- WHITESPACE is your best friend. Generous padding (py-24, py-32, px-8). Let elements breathe.\n- CONTRAST: mix dark sections with light ones. Alternate bg-primary and bg-surface sections.\n- TYPOGRAPHY: use extreme size differences for hierarchy (text-7xl headline next to text-sm label)\n- DEPTH: overlapping elements, negative margins (-mt-12), z-index layering, shadows\n- ASYMMETRY: avoid centering everything. Use grid-cols-5 with col-span-3 + col-span-2. Offset elements.\n- TEXTURE: use subtle patterns, gradients, border treatments, rounded-3xl mixed with sharp edges\n- Each section should have a COMPLETELY DIFFERENT layout from the others\n\nHERO SECTION — your masterpiece:\n- Bento-grid or asymmetric layout, NOT a generic centered hero\n- Large headline block + smaller stat/metric cards in a grid\n- Real social proof: \"2,847+ users\", avatar stack (colored divs with initials), star ratings\n- Bold oversized headline (text-6xl/7xl font-black leading-none)\n- Tag/label above headline (uppercase, tracking-wider, text-xs)\n- 2 CTAs: primary (large, with → arrow) + secondary (ghost/outlined)\n- Real image via data-image-query\n- Min height: min-h-[90vh] with generous padding\n\nTAILWIND v3 NOTES:\n- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)\n- Borders: border + border-gray-200 for visible borders`;\n\nexport const PROMPT_SUFFIX = `\n\nOUTPUT FORMAT: NDJSON — one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Short Label\", \"html\": \"<section>...</section>\"}\n\nGenerate 7-9 sections. Always start with Hero and end with Footer.\nIMPORTANT: Make each section VISUALLY UNIQUE — different layouts, different background colors, different grid structures.\nThink like a premium design agency creating a $50K landing page.\nNO generic Bootstrap layouts. Use creative grids, bento layouts, overlapping elements, asymmetric columns.`;\n\n/**\n * Extract complete JSON objects from accumulated text using brace-depth tracking.\n */\nexport function extractJsonObjects(text: string): [any[], string] {\n  const objects: any[] = [];\n  let remaining = text;\n\n  while (remaining.length > 0) {\n    remaining = remaining.trimStart();\n    if (!remaining.startsWith(\"{\")) {\n      const nextBrace = remaining.indexOf(\"{\");\n      if (nextBrace === -1) break;\n      remaining = remaining.slice(nextBrace);\n      continue;\n    }\n\n    let depth = 0;\n    let inString = false;\n    let escape = false;\n    let end = -1;\n\n    for (let i = 0; i < remaining.length; i++) {\n      const ch = remaining[i];\n      if (escape) { escape = false; continue; }\n      if (ch === \"\\\\\") { escape = true; continue; }\n      if (ch === '\"') { inString = !inString; continue; }\n      if (inString) continue;\n      if (ch === \"{\") depth++;\n      if (ch === \"}\") { depth--; if (depth === 0) { end = i; break; } }\n    }\n\n    if (end === -1) break;\n\n    const candidate = remaining.slice(0, end + 1);\n    remaining = remaining.slice(end + 1);\n\n    try {\n      objects.push(JSON.parse(candidate));\n    } catch {\n      // malformed, skip\n    }\n  }\n\n  return [objects, remaining];\n}\n\nexport interface GenerateOptions {\n  /** Anthropic API key. Falls back to ANTHROPIC_API_KEY env var */\n  anthropicApiKey?: string;\n  /** OpenAI API key. If provided, uses GPT-4o instead of Claude */\n  openaiApiKey?: string;\n  /** Landing page description prompt */\n  prompt: string;\n  /** Reference image (base64 data URI) for vision-based generation */\n  referenceImage?: string;\n  /** Extra instructions appended to the prompt */\n  extraInstructions?: string;\n  /** Custom system prompt (overrides default SYSTEM_PROMPT) */\n  systemPrompt?: string;\n  /** Model ID (default: gpt-4o for OpenAI, claude-sonnet-4-6 for Anthropic) */\n  model?: string;\n  /** Pexels API key for image enrichment. Falls back to PEXELS_API_KEY env var */\n  pexelsApiKey?: string;\n  /** Called when a new section is parsed from the stream */\n  onSection?: (section: Section3) => void;\n  /** Called when a section's images are enriched */\n  onImageUpdate?: (sectionId: string, html: string) => void;\n  /** Called when generation is complete */\n  onDone?: (sections: Section3[]) => void;\n  /** Called on error */\n  onError?: (error: Error) => void;\n}\n\n/**\n * Generate a landing page with streaming AI + image enrichment.\n * Returns all generated sections when complete.\n */\nexport async function generateLanding(options: GenerateOptions): Promise<Section3[]> {\n  const {\n    anthropicApiKey,\n    openaiApiKey: _openaiApiKey,\n    prompt,\n    referenceImage,\n    extraInstructions,\n    systemPrompt = SYSTEM_PROMPT,\n    model: modelId,\n    pexelsApiKey,\n    onSection,\n    onImageUpdate,\n    onDone,\n    onError,\n  } = options;\n\n  const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;\n  const model = await resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai: \"gpt-4o\", defaultAnthropic: \"claude-sonnet-4-6\" });\n\n  // Build prompt content (supports multimodal with reference image)\n  const extra = extraInstructions ? `\\nAdditional instructions: ${extraInstructions}` : \"\";\n  const content: any[] = [];\n  if (referenceImage) {\n    content.push({ type: \"image\", image: referenceImage });\n    content.push({\n      type: \"text\",\n      text: `Generate a landing page inspired by this reference image for: ${prompt}${extra}${PROMPT_SUFFIX}`,\n    });\n  } else {\n    content.push({\n      type: \"text\",\n      text: `Generate a landing page for: ${prompt}${extra}${PROMPT_SUFFIX}`,\n    });\n  }\n\n  const result = streamText({\n    model,\n    system: systemPrompt,\n    messages: [{ role: \"user\", content }],\n  });\n\n  const allSections: Section3[] = [];\n  const imagePromises: Promise<void>[] = [];\n  let sectionOrder = 0;\n  let buffer = \"\";\n\n  try {\n    for await (const chunk of result.textStream) {\n      buffer += chunk;\n\n      const [objects, remaining] = extractJsonObjects(buffer);\n      buffer = remaining;\n\n      for (const obj of objects) {\n        if (!obj.html || !obj.label) continue;\n\n        const section: Section3 = {\n          id: nanoid(8),\n          order: sectionOrder++,\n          html: obj.html,\n          label: obj.label,\n        };\n\n        allSections.push(section);\n        onSection?.(section);\n\n        // Enrich images (DALL-E if openaiApiKey, otherwise Pexels)\n        const slots = findImageSlots(section.html);\n        if (slots.length > 0) {\n          const sectionRef = section;\n          const slotsSnapshot = slots.map((s) => ({ ...s }));\n          imagePromises.push(\n            (async () => {\n              const results = await Promise.allSettled(\n                slotsSnapshot.map(async (slot) => {\n                  let url: string | null = null;\n                  // Pexels first (permanent URLs), DALL-E disabled (temporary URLs expire ~2hrs)\n                  const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);\n                  url = img?.url || null;\n                  url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;\n                  return { slot, url };\n                })\n              );\n              let html = sectionRef.html;\n              for (const r of results) {\n                if (r.status === \"fulfilled\" && r.value) {\n                  const { slot, url } = r.value;\n                  const replacement = slot.replaceStr.replace(\"{url}\", url);\n                  html = html.replaceAll(slot.searchStr, replacement);\n                }\n              }\n              if (html !== sectionRef.html) {\n                sectionRef.html = html;\n                onImageUpdate?.(sectionRef.id, html);\n              }\n            })()\n          );\n        }\n      }\n    }\n\n    // Parse remaining buffer\n    if (buffer.trim()) {\n      let cleaned = buffer.trim();\n      if (cleaned.startsWith(\"```\")) {\n        cleaned = cleaned\n          .replace(/^```(?:json)?\\s*/, \"\")\n          .replace(/\\s*```$/, \"\");\n      }\n      const [lastObjects] = extractJsonObjects(cleaned);\n      for (const obj of lastObjects) {\n        if (!obj.html || !obj.label) continue;\n        const section: Section3 = {\n          id: nanoid(8),\n          order: sectionOrder++,\n          html: obj.html,\n          label: obj.label,\n        };\n        allSections.push(section);\n        onSection?.(section);\n\n        // Enrich images for remaining-buffer sections too\n        const slots = findImageSlots(section.html);\n        if (slots.length > 0) {\n          const sectionRef = section;\n          const slotsSnapshot = slots.map((s) => ({ ...s }));\n          imagePromises.push(\n            (async () => {\n              const results = await Promise.allSettled(\n                slotsSnapshot.map(async (slot) => {\n                  let url: string | null = null;\n                  const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);\n                  url = img?.url || null;\n                  url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;\n                  return { slot, url };\n                })\n              );\n              let html = sectionRef.html;\n              for (const r of results) {\n                if (r.status === \"fulfilled\" && r.value) {\n                  const { slot, url } = r.value;\n                  const replacement = slot.replaceStr.replace(\"{url}\", url);\n                  html = html.replaceAll(slot.searchStr, replacement);\n                }\n              }\n              if (html !== sectionRef.html) {\n                sectionRef.html = html;\n                onImageUpdate?.(sectionRef.id, html);\n              }\n            })()\n          );\n        }\n      }\n    }\n\n    // Wait for image enrichment\n    await Promise.allSettled(imagePromises);\n\n    // Final fallback: any <img> still without src gets a placeholder\n    for (const section of allSections) {\n      const before = section.html;\n      section.html = section.html.replace(\n        /<img\\s(?![^>]*\\bsrc=)([^>]*?)>/gi,\n        (_match, attrs) => {\n          const altMatch = attrs.match(/alt=\"([^\"]*?)\"/);\n          const query = altMatch?.[1] || \"image\";\n          return `<img src=\"https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}\" ${attrs}>`;\n        }\n      );\n      // Also replace any remaining data-image-query that wasn't enriched\n      section.html = section.html.replace(\n        /data-image-query=\"([^\"]+)\"/g,\n        (_match, query) => {\n          return `src=\"https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}\" data-enriched=\"placeholder\"`;\n        }\n      );\n      if (section.html !== before) {\n        onImageUpdate?.(section.id, section.html);\n      }\n    }\n\n    onDone?.(allSections);\n    return allSections;\n  } catch (err: any) {\n    const error = err instanceof Error ? err : new Error(err?.message || \"Generation failed\");\n    onError?.(error);\n    throw error;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-WMQETMD6.js → chunk-SD4ISSXS.js}

@@ -1,7 +1,7 @@
 import {
   LANDING_THEMES,
   buildPreviewHtml
-} from "./chunk-CDSMYEXN.js";
+} from "./chunk-5EWGZ32G.js";
 
 // src/components/Canvas.tsx
 import { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from "react";
@@ -240,7 +240,7 @@ function SectionList({
               children: section.label
             }
           ),
-          /* @__PURE__ */ jsxs2("div", { className: "opacity-0 group-hover:opacity-100 flex gap-0.5", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "hidden group-hover:flex gap-0.5 shrink-0", children: [
             /* @__PURE__ */ jsx2(
               "button",
               {
@@ -909,4 +909,4 @@ export {
   CodeEditor,
   ViewportToggle
 };
-//# sourceMappingURL=chunk-WMQETMD6.js.map
+//# sourceMappingURL=chunk-SD4ISSXS.js.map

package/dist/chunk-SD4ISSXS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Canvas.tsx","../src/components/SectionList.tsx","../src/components/FloatingToolbar.tsx","../src/components/CodeEditor.tsx","../src/components/ViewportToggle.tsx"],"sourcesContent":["import React, { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from \"react\";\nimport type { Section3, IframeMessage } from \"../types\";\nimport { buildPreviewHtml } from \"../buildHtml\";\n\nexport interface CanvasHandle {\n  scrollToSection: (id: string) => void;\n  postMessage: (msg: Record<string, unknown>) => void;\n}\n\ninterface CanvasProps {\n  sections: Section3[];\n  theme?: string;\n  onMessage: (msg: IframeMessage) => void;\n  iframeRectRef: React.MutableRefObject<DOMRect | null>;\n}\n\nexport const Canvas = forwardRef<CanvasHandle, CanvasProps>(function Canvas({ sections, theme, onMessage, iframeRectRef }, ref) {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const [ready, setReady] = useState(false);\n  // Track what the iframe currently has so we can diff\n  const knownSectionsRef = useRef<Map<string, string>>(new Map());\n  const initializedRef = useRef(false);\n\n  // Post a message to the iframe\n  const postToIframe = useCallback((msg: Record<string, unknown>) => {\n    iframeRef.current?.contentWindow?.postMessage(msg, \"*\");\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    scrollToSection(id: string) {\n      postToIframe({ action: \"scroll-to-section\", id });\n    },\n    postMessage(msg: Record<string, unknown>) {\n      postToIframe(msg);\n    },\n  }), [postToIframe]);\n\n  // Initial write: set up the iframe shell (empty body + script + tailwind)\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (!iframe || initializedRef.current) return;\n    initializedRef.current = true;\n\n    const html = buildPreviewHtml([]);\n    const doc = iframe.contentDocument;\n    if (!doc) return;\n    doc.open();\n    doc.write(html);\n    doc.close();\n  }, []);\n\n  // Handle \"ready\" from iframe — then inject current sections\n  const handleReady = useCallback(() => {\n    setReady(true);\n    // Inject all current sections\n    const sorted = [...sections].sort((a, b) => a.order - b.order);\n    for (const s of sorted) {\n      postToIframe({ action: \"add-section\", id: s.id, html: s.html });\n      knownSectionsRef.current.set(s.id, s.html);\n    }\n  }, [sections, postToIframe]);\n\n  // Incremental diff: detect added/updated/removed sections\n  useEffect(() => {\n    if (!ready) return;\n\n    const known = knownSectionsRef.current;\n    const currentIds = new Set(sections.map((s) => s.id));\n    const sorted = [...sections].sort((a, b) => a.order - b.order);\n\n    // Add new sections\n    for (const s of sorted) {\n      if (!known.has(s.id)) {\n        postToIframe({ action: \"add-section\", id: s.id, html: s.html });\n        known.set(s.id, s.html);\n      } else if (known.get(s.id) !== s.html) {\n        // Update changed sections\n        postToIframe({ action: \"update-section\", id: s.id, html: s.html });\n        known.set(s.id, s.html);\n      }\n    }\n\n    // Remove deleted sections\n    for (const id of known.keys()) {\n      if (!currentIds.has(id)) {\n        postToIframe({ action: \"remove-section\", id });\n        known.delete(id);\n      }\n    }\n\n    // Reorder if needed\n    const knownOrder = [...known.keys()];\n    const desiredOrder = sorted.map((s) => s.id);\n    if (JSON.stringify(knownOrder) !== JSON.stringify(desiredOrder)) {\n      postToIframe({ action: \"reorder-sections\", order: desiredOrder });\n    }\n  }, [sections, ready, postToIframe]);\n\n  // Send theme changes to iframe\n  useEffect(() => {\n    if (!ready) return;\n    postToIframe({ action: \"set-theme\", theme: theme || \"default\" });\n  }, [theme, ready, postToIframe]);\n\n  // Update iframe rect on resize/scroll\n  const updateRect = useCallback(() => {\n    if (iframeRef.current) {\n      iframeRectRef.current = iframeRef.current.getBoundingClientRect();\n    }\n  }, [iframeRectRef]);\n\n  useEffect(() => {\n    updateRect();\n    window.addEventListener(\"resize\", updateRect);\n    window.addEventListener(\"scroll\", updateRect, true);\n    return () => {\n      window.removeEventListener(\"resize\", updateRect);\n      window.removeEventListener(\"scroll\", updateRect, true);\n    };\n  }, [updateRect]);\n\n  // Listen for postMessage from iframe\n  useEffect(() => {\n    function handleMessage(e: MessageEvent) {\n      const data = e.data;\n      if (!data || typeof data.type !== \"string\") return;\n\n      if (data.type === \"ready\") {\n        handleReady();\n        return;\n      }\n\n      if (\n        [\"element-selected\", \"text-edited\", \"element-deselected\", \"section-html-updated\"].includes(\n          data.type\n        )\n      ) {\n        updateRect();\n        onMessage(data as IframeMessage);\n      }\n    }\n    window.addEventListener(\"message\", handleMessage);\n    return () => window.removeEventListener(\"message\", handleMessage);\n  }, [onMessage, updateRect, handleReady]);\n\n  return (\n    <div className=\"flex-1 bg-gray-100 rounded-xl overflow-hidden border-2 border-gray-200 relative\">\n      <iframe\n        ref={iframeRef}\n        title=\"Landing preview\"\n        className=\"w-full h-full border-0\"\n        sandbox=\"allow-scripts allow-same-origin\"\n        style={{ minHeight: \"calc(100vh - 120px)\" }}\n      />\n      {!ready && sections.length > 0 && (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-white/80\">\n          <span className=\"w-6 h-6 border-2 border-gray-400 border-t-gray-800 rounded-full animate-spin\" />\n        </div>\n      )}\n    </div>\n  );\n});\n","import React, { useRef, useState } from \"react\";\nimport type { Section3 } from \"../types\";\nimport { LANDING_THEMES, type CustomColors } from \"../themes\";\n\ninterface SectionListProps {\n  sections: Section3[];\n  selectedSectionId: string | null;\n  theme: string;\n  customColors?: CustomColors;\n  onThemeChange: (themeId: string) => void;\n  onCustomColorChange?: (colors: Partial<CustomColors>) => void;\n  onSelect: (id: string) => void;\n  onOpenCode: (id: string) => void;\n  onReorder: (fromIndex: number, toIndex: number) => void;\n  onDelete: (id: string) => void;\n  onRename: (id: string, label: string) => void;\n  onAdd: () => void;\n}\n\nexport function SectionList({\n  sections,\n  selectedSectionId,\n  theme,\n  customColors,\n  onThemeChange,\n  onCustomColorChange,\n  onSelect,\n  onOpenCode,\n  onReorder,\n  onDelete,\n  onRename,\n  onAdd,\n}: SectionListProps) {\n  const sorted = [...sections].sort((a, b) => a.order - b.order);\n  const colorInputRef = useRef<HTMLInputElement>(null);\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [editingLabel, setEditingLabel] = useState(\"\");\n\n  return (\n    <div className=\"w-56 shrink-0 flex flex-col bg-white border-r-2 border-gray-200 overflow-y-auto\">\n      <div className=\"p-3 border-b border-gray-200\">\n        <h3 className=\"text-xs font-black uppercase tracking-wider text-gray-500 mb-2\">\n          Tema\n        </h3>\n        <div className=\"flex gap-1.5 flex-wrap\">\n          {LANDING_THEMES.map((t) => (\n            <button\n              key={t.id}\n              onClick={() => onThemeChange(t.id)}\n              title={t.label}\n              className={`w-6 h-6 rounded-full border-2 transition-all ${\n                theme === t.id\n                  ? \"border-black scale-110 shadow-sm\"\n                  : \"border-gray-300 hover:border-gray-400\"\n              }`}\n              style={{ backgroundColor: t.colors.primary }}\n            />\n          ))}\n          {/* Custom color picker */}\n          <button\n            onClick={() => colorInputRef.current?.click()}\n            title=\"Color personalizado\"\n            className={`w-6 h-6 rounded-full border-2 transition-all relative overflow-hidden ${\n              theme === \"custom\"\n                ? \"border-black scale-110 shadow-sm\"\n                : \"border-gray-300 hover:border-gray-400\"\n            }`}\n            style={theme === \"custom\" && customColors?.primary ? { backgroundColor: customColors.primary } : undefined}\n          >\n            {theme !== \"custom\" && (\n              <span className=\"absolute inset-0 rounded-full\"\n                style={{ background: \"conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444)\" }}\n              />\n            )}\n          </button>\n          <input\n            ref={colorInputRef}\n            type=\"color\"\n            value={customColors?.primary || \"#6366f1\"}\n            onChange={(e) => onCustomColorChange?.({ primary: e.target.value })}\n            className=\"sr-only\"\n          />\n        </div>\n        {/* Multi-color pickers when custom theme is active */}\n        {theme === \"custom\" && (\n          <div className=\"flex items-center gap-2 mt-2\">\n            {([\n              { key: \"primary\" as const, label: \"Pri\", fallback: \"#6366f1\" },\n              { key: \"secondary\" as const, label: \"Sec\", fallback: \"#f59e0b\" },\n              { key: \"accent\" as const, label: \"Acc\", fallback: \"#06b6d4\" },\n              { key: \"surface\" as const, label: \"Sur\", fallback: \"#ffffff\" },\n            ]).map((c) => (\n              <label key={c.key} className=\"flex flex-col items-center gap-0.5 cursor-pointer\">\n                <input\n                  type=\"color\"\n                  value={customColors?.[c.key] || c.fallback}\n                  onChange={(e) => onCustomColorChange?.({ [c.key]: e.target.value })}\n                  className=\"w-5 h-5 rounded border border-gray-300 cursor-pointer p-0 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded\"\n                />\n                <span className=\"text-[9px] font-bold text-gray-400 uppercase\">{c.label}</span>\n              </label>\n            ))}\n          </div>\n        )}\n      </div>\n      <div className=\"p-3 border-b border-gray-200\">\n        <h3 className=\"text-xs font-black uppercase tracking-wider text-gray-500\">\n          Secciones\n        </h3>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto py-1\">\n        {sorted.map((section, i) => (\n          <div\n            key={section.id}\n            onClick={() => onSelect(section.id)}\n            className={`group flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors ${\n              selectedSectionId === section.id\n                ? \"bg-blue-50 border-l-2 border-blue-500\"\n                : \"hover:bg-gray-50 border-l-2 border-transparent\"\n            }`}\n          >\n            <span className=\"text-[10px] font-mono text-gray-400 w-4 text-right\">\n              {i + 1}\n            </span>\n            {editingId === section.id ? (\n              <input\n                type=\"text\"\n                value={editingLabel}\n                onChange={(e) => setEditingLabel(e.target.value)}\n                onBlur={() => {\n                  if (editingLabel.trim()) onRename(section.id, editingLabel.trim());\n                  setEditingId(null);\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") {\n                    if (editingLabel.trim()) onRename(section.id, editingLabel.trim());\n                    setEditingId(null);\n                  } else if (e.key === \"Escape\") {\n                    setEditingId(null);\n                  }\n                }}\n                className=\"text-sm font-bold flex-1 min-w-0 bg-transparent border-b border-blue-500 outline-none px-0 py-0\"\n                autoFocus\n                onClick={(e) => e.stopPropagation()}\n              />\n            ) : (\n              <span\n                className=\"text-sm font-bold truncate flex-1\"\n                onDoubleClick={(e) => {\n                  e.stopPropagation();\n                  setEditingId(section.id);\n                  setEditingLabel(section.label);\n                }}\n              >\n                {section.label}\n              </span>\n            )}\n            <div className=\"hidden group-hover:flex gap-0.5 shrink-0\">\n              <button\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onOpenCode(section.id);\n                }}\n                className=\"w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200\"\n                title=\"Editar HTML\"\n              >\n                <svg className=\"w-3 h-3\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z\"/></svg>\n              </button>\n              {i > 0 && (\n                <button\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onReorder(i, i - 1);\n                  }}\n                  className=\"w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 text-[10px]\"\n                >\n                  ↑\n                </button>\n              )}\n              {i < sorted.length - 1 && (\n                <button\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onReorder(i, i + 1);\n                  }}\n                  className=\"w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 text-[10px]\"\n                >\n                  ↓\n                </button>\n              )}\n              <button\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onDelete(section.id);\n                }}\n                className=\"w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-red-600 hover:bg-red-50 text-[10px]\"\n                title=\"Eliminar seccion\"\n              >\n                ✕\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"p-3 border-t border-gray-200\">\n        <button\n          onClick={onAdd}\n          className=\"w-full text-center py-2 text-sm font-bold text-blue-600 hover:bg-blue-50 rounded-lg transition-colors\"\n        >\n          + Agregar seccion\n        </button>\n      </div>\n    </div>\n  );\n}\n","import React, { useState, useRef, useEffect } from \"react\";\nimport { HiSparkles } from \"react-icons/hi2\";\nimport type { IframeMessage } from \"../types\";\n\nconst STYLE_PRESETS = [\n  { label: \"Minimal\", icon: \"○\", instruction: \"Redisena esta seccion con estetica minimal: mucho espacio en blanco, tipografia limpia, sin bordes ni sombras innecesarias. Manten el mismo contenido.\" },\n  { label: \"Cards\", icon: \"▦\", instruction: \"Redisena esta seccion usando layout de cards en grid: cada item en su propia card con padding, sombra sutil y bordes redondeados. Manten el mismo contenido.\" },\n  { label: \"Bold\", icon: \"■\", instruction: \"Redisena esta seccion con estilo bold/brutalist: tipografia grande y gruesa, colores de alto contraste, bordes solidos, sin gradientes. Manten el mismo contenido.\" },\n  { label: \"Glass\", icon: \"◇\", instruction: \"Redisena esta seccion con glassmorphism: fondos translucidos con backdrop-blur, bordes sutiles blancos, sombras suaves. Usa un fondo oscuro o con gradiente detras. Manten el mismo contenido.\" },\n  { label: \"Dark\", icon: \"●\", instruction: \"Redisena esta seccion con fondo oscuro (#111 o similar), texto claro, acentos de color vibrantes. Manten el mismo contenido.\" },\n];\n\ninterface FloatingToolbarProps {\n  selection: IframeMessage | null;\n  iframeRect: DOMRect | null;\n  onRefine: (instruction: string, referenceImage?: string) => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n  onDelete: () => void;\n  onClose: () => void;\n  onViewCode: () => void;\n  onUpdateAttribute?: (sectionId: string, elementPath: string, attr: string, value: string) => void;\n  isRefining: boolean;\n}\n\nexport function FloatingToolbar({\n  selection,\n  iframeRect,\n  onRefine,\n  onMoveUp,\n  onMoveDown,\n  onDelete,\n  onClose,\n  onViewCode,\n  onUpdateAttribute,\n  isRefining,\n}: FloatingToolbarProps) {\n  const [prompt, setPrompt] = useState(\"\");\n  const [showCode, setShowCode] = useState(false);\n  const [refImage, setRefImage] = useState<string | null>(null);\n  const [refImageName, setRefImageName] = useState<string | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const toolbarRef = useRef<HTMLDivElement>(null);\n\n  // Local attr editing state\n  const [imgSrc, setImgSrc] = useState(\"\");\n  const [imgAlt, setImgAlt] = useState(\"\");\n  const [linkHref, setLinkHref] = useState(\"\");\n\n  useEffect(() => {\n    setPrompt(\"\");\n    setShowCode(false);\n    setRefImage(null);\n    setRefImageName(null);\n  }, [selection?.sectionId]);\n\n  // Sync attr inputs when selection changes\n  useEffect(() => {\n    if (selection?.attrs) {\n      setImgSrc(selection.attrs.src || \"\");\n      setImgAlt(selection.attrs.alt || \"\");\n      setLinkHref(selection.attrs.href || \"\");\n    }\n  }, [selection?.attrs, selection?.elementPath]);\n\n  // ESC closes toolbar\n  useEffect(() => {\n    function handleKey(e: KeyboardEvent) {\n      if (e.key === \"Escape\") onClose();\n    }\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [onClose]);\n\n  if (!selection || !selection.rect || !iframeRect) return null;\n\n  const toolbarWidth = toolbarRef.current?.offsetWidth || 480;\n  const toolbarHeight = toolbarRef.current?.offsetHeight || 60;\n  const top = iframeRect.top + selection.rect.top + selection.rect.height + 8;\n  const left = iframeRect.left + selection.rect.left;\n  const clampedLeft = Math.max(8, Math.min(left, window.innerWidth - toolbarWidth - 8));\n  const showAbove = top + toolbarHeight + 8 > window.innerHeight;\n  const finalTop = Math.max(8, showAbove\n    ? iframeRect.top + selection.rect.top - toolbarHeight - 8\n    : top);\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    if (!prompt.trim() || isRefining) return;\n    onRefine(prompt.trim(), refImage || undefined);\n    setPrompt(\"\");\n    setRefImage(null);\n    setRefImageName(null);\n  }\n\n  function handleFileSelect(e: React.ChangeEvent<HTMLInputElement>) {\n    const file = e.target.files?.[0];\n    if (!file) return;\n    setRefImageName(file.name);\n    const reader = new FileReader();\n    reader.onload = () => {\n      setRefImage(reader.result as string);\n    };\n    reader.readAsDataURL(file);\n    e.target.value = \"\";\n  }\n\n  function handleSetAttr(attr: string, value: string) {\n    if (!selection?.sectionId || !selection?.elementPath || !onUpdateAttribute) return;\n    onUpdateAttribute(selection.sectionId, selection.elementPath, attr, value);\n  }\n\n  const isImg = selection.tagName === \"IMG\";\n  const isLink = selection.tagName === \"A\";\n  const hasAttrEditing = (isImg || isLink) && onUpdateAttribute;\n\n  return (\n    <div\n      ref={toolbarRef}\n      className=\"fixed z-50 flex flex-col gap-1.5 bg-gray-900 text-white rounded-xl shadow-2xl px-2 py-1.5 border border-gray-700\"\n      style={{ top: finalTop, left: clampedLeft, maxWidth: \"min(480px, calc(100vw - 16px))\" }}\n    >\n      {/* Main row */}\n      <div className=\"flex items-center gap-1.5\">\n        {/* Tag badge */}\n        {selection.tagName && (\n          <span className=\"px-2 py-0.5 rounded-md bg-blue-600 text-[10px] font-mono font-bold uppercase tracking-wider shrink-0\">\n            {selection.tagName.toLowerCase()}\n          </span>\n        )}\n\n        {/* AI prompt input */}\n        <form onSubmit={handleSubmit} className=\"flex items-center gap-1 flex-1\">\n          <input\n            ref={inputRef}\n            type=\"text\"\n            value={prompt}\n            onChange={(e) => setPrompt(e.target.value)}\n            placeholder={refImage ? \"Instruccion + imagen...\" : \"Editar con AI...\"}\n            disabled={isRefining}\n            className=\"bg-transparent text-sm text-white placeholder:text-gray-500 outline-none w-40 md:w-56 px-2 py-1\"\n          />\n          {/* Image attach button */}\n          <button\n            type=\"button\"\n            onClick={() => fileInputRef.current?.click()}\n            disabled={isRefining}\n            className={`w-7 h-7 flex items-center justify-center rounded-lg transition-colors shrink-0 ${\n              refImage\n                ? \"bg-blue-600 text-white\"\n                : \"hover:bg-gray-800 text-gray-400 hover:text-white\"\n            }`}\n            title={refImage ? `Imagen: ${refImageName}` : \"Adjuntar imagen de referencia\"}\n          >\n            <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fillRule=\"evenodd\" d=\"M1 5.25A2.25 2.25 0 013.25 3h13.5A2.25 2.25 0 0119 5.25v9.5A2.25 2.25 0 0116.75 17H3.25A2.25 2.25 0 011 14.75v-9.5zm1.5 5.81V14.75c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75v-2.06l-2.22-2.22a.75.75 0 00-1.06 0L8.56 16.1l-3.28-3.28a.75.75 0 00-1.06 0l-1.72 1.72zm12-4.06a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z\" clipRule=\"evenodd\"/>\n            </svg>\n          </button>\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            accept=\"image/*\"\n            onChange={handleFileSelect}\n            className=\"hidden\"\n          />\n          <button\n            type=\"submit\"\n            disabled={!prompt.trim() || isRefining}\n            className=\"w-7 h-7 flex items-center justify-center rounded-lg bg-blue-500 hover:bg-blue-600 disabled:opacity-30 transition-colors\"\n          >\n            {isRefining ? (\n              <span className=\"w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin\" />\n            ) : (\n              <HiSparkles className=\"w-3.5 h-3.5\" />\n            )}\n          </button>\n        </form>\n\n        {/* Variante button */}\n        <div className=\"w-px h-5 bg-gray-700\" />\n        <button\n          onClick={() => {\n            const tag = selection.tagName?.toLowerCase();\n            const text = selection.text?.substring(0, 80);\n            const prompt = selection.isSectionRoot\n              ? \"Genera una variante completamente diferente de esta seccion. Manten el mismo contenido/informacion pero cambia radicalmente el layout, la estructura visual, y el estilo. Sorprendeme con un diseno creativo e inesperado.\"\n              : `Modifica SOLO el elemento <${tag}> que contiene \"${text}\". Genera una variante visual diferente de ESE elemento (diferente estilo, layout, tipografia). NO modifiques ningun otro elemento de la seccion.`;\n            onRefine(prompt, refImage || undefined);\n          }}\n          disabled={isRefining}\n          className=\"px-2.5 py-1 text-[11px] font-bold rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-30 transition-colors whitespace-nowrap shrink-0\"\n          title=\"Generar variante\"\n        >\n          ✦ Variante\n        </button>\n\n        {/* Section-level actions (move/delete) */}\n        {selection.isSectionRoot && (\n          <>\n            <div className=\"w-px h-5 bg-gray-700\" />\n            <button\n              onClick={onMoveUp}\n              className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs\"\n              title=\"Mover arriba\"\n            >\n              ↑\n            </button>\n            <button\n              onClick={onMoveDown}\n              className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs\"\n              title=\"Mover abajo\"\n            >\n              ↓\n            </button>\n          </>\n        )}\n\n        {/* View code */}\n        <button\n          onClick={onViewCode}\n          className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs font-mono text-gray-400 hover:text-white\"\n          title=\"Ver codigo\"\n        >\n          &lt;/&gt;\n        </button>\n\n        {selection.isSectionRoot && (\n          <>\n            <div className=\"w-px h-5 bg-gray-700\" />\n            <button\n              onClick={onDelete}\n              className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-900/50 text-red-400 transition-colors\"\n              title=\"Eliminar seccion\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\" />\n                <path d=\"M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2\" />\n              </svg>\n            </button>\n          </>\n        )}\n\n        {/* Close button */}\n        <div className=\"w-px h-5 bg-gray-700\" />\n        <button\n          onClick={onClose}\n          className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 text-gray-400 hover:text-white transition-colors\"\n          title=\"Cerrar (ESC)\"\n        >\n          ✕\n        </button>\n      </div>\n\n      {/* Reference image preview */}\n      {refImage && (\n        <div className=\"flex items-center gap-2 pt-0.5 pb-0.5 border-t border-gray-700/50\">\n          <img src={refImage} alt=\"Referencia\" className=\"w-10 h-10 rounded object-cover border border-gray-600\" />\n          <span className=\"text-[10px] text-gray-400 truncate flex-1\">{refImageName}</span>\n          <button\n            onClick={() => { setRefImage(null); setRefImageName(null); }}\n            className=\"text-[10px] text-gray-500 hover:text-white px-1\"\n          >\n            ✕\n          </button>\n        </div>\n      )}\n\n      {/* Style presets row — only for section roots */}\n      {selection.isSectionRoot && (\n        <div className=\"flex items-center gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50\">\n          <span className=\"text-[10px] text-gray-500 uppercase tracking-wider mr-1 shrink-0\">Estilo</span>\n          {STYLE_PRESETS.map((preset) => (\n            <button\n              key={preset.label}\n              onClick={() => onRefine(preset.instruction)}\n              disabled={isRefining}\n              className=\"px-2 py-0.5 text-[11px] font-medium rounded-md bg-gray-800 hover:bg-gray-700 disabled:opacity-30 transition-colors whitespace-nowrap\"\n              title={preset.label}\n            >\n              <span className=\"mr-1\">{preset.icon}</span>\n              {preset.label}\n            </button>\n          ))}\n        </div>\n      )}\n\n      {/* Image attr editing */}\n      {isImg && hasAttrEditing && (\n        <div className=\"flex flex-col gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50\">\n          <div className=\"flex items-center gap-1\">\n            <span className=\"text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0\">src</span>\n            <input\n              type=\"text\"\n              value={imgSrc}\n              onChange={(e) => setImgSrc(e.target.value)}\n              onKeyDown={(e) => { if (e.key === \"Enter\") handleSetAttr(\"src\", imgSrc); }}\n              className=\"flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0\"\n              placeholder=\"URL de imagen...\"\n            />\n            <button\n              onClick={() => handleSetAttr(\"src\", imgSrc)}\n              className=\"px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0\"\n            >\n              Set\n            </button>\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <span className=\"text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0\">alt</span>\n            <input\n              type=\"text\"\n              value={imgAlt}\n              onChange={(e) => setImgAlt(e.target.value)}\n              onKeyDown={(e) => { if (e.key === \"Enter\") handleSetAttr(\"alt\", imgAlt); }}\n              className=\"flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0\"\n              placeholder=\"Alt text...\"\n            />\n            <button\n              onClick={() => handleSetAttr(\"alt\", imgAlt)}\n              className=\"px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0\"\n            >\n              Set\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Link attr editing */}\n      {isLink && hasAttrEditing && (\n        <div className=\"flex items-center gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50\">\n          <span className=\"text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0\">href</span>\n          <input\n            type=\"text\"\n            value={linkHref}\n            onChange={(e) => setLinkHref(e.target.value)}\n            onKeyDown={(e) => { if (e.key === \"Enter\") handleSetAttr(\"href\", linkHref); }}\n            className=\"flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0\"\n            placeholder=\"URL del enlace...\"\n          />\n          <button\n            onClick={() => handleSetAttr(\"href\", linkHref)}\n            className=\"px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0\"\n          >\n            Set\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n","import React, { useEffect, useRef, useCallback, useState } from \"react\";\nimport { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, Decoration, type DecorationSet } from \"@codemirror/view\";\nimport { EditorState, StateField, StateEffect } from \"@codemirror/state\";\nimport { html } from \"@codemirror/lang-html\";\nimport { oneDark } from \"@codemirror/theme-one-dark\";\nimport { defaultKeymap, indentWithTab, history, historyKeymap } from \"@codemirror/commands\";\nimport { searchKeymap, highlightSelectionMatches } from \"@codemirror/search\";\nimport { bracketMatching, foldGutter, foldKeymap } from \"@codemirror/language\";\nimport { closeBrackets, closeBracketsKeymap } from \"@codemirror/autocomplete\";\n\ninterface CodeEditorProps {\n  code: string;\n  label: string;\n  scrollToText?: string;\n  onSave: (code: string) => void;\n  onClose: () => void;\n}\n\nfunction formatHtml(html: string): string {\n  let result = html.replace(/>\\s*</g, \">\\n<\");\n  const lines = result.split(\"\\n\");\n  const output: string[] = [];\n  let indent = 0;\n  for (const raw of lines) {\n    const line = raw.trim();\n    if (!line) continue;\n    const isClosing = /^<\\//.test(line);\n    const isSelfClosing =\n      /\\/>$/.test(line) ||\n      /^<(img|br|hr|input|meta|link|col|area|base|embed|source|track|wbr)\\b/i.test(line);\n    const hasInlineClose = /^<[^/][^>]*>.*<\\//.test(line);\n    if (isClosing) indent = Math.max(0, indent - 1);\n    output.push(\"  \".repeat(indent) + line);\n    if (!isClosing && !isSelfClosing && !hasInlineClose && /^<[a-zA-Z]/.test(line)) {\n      indent++;\n    }\n  }\n  return output.join(\"\\n\");\n}\n\n// Flash highlight effect for scroll-to-code\nconst flashLineEffect = StateEffect.define<{ from: number; to: number }>();\nconst clearFlashEffect = StateEffect.define<null>();\n\nconst flashLineDeco = Decoration.line({ class: \"cm-flash-line\" });\n\nconst flashLineField = StateField.define<DecorationSet>({\n  create: () => Decoration.none,\n  update(decos, tr) {\n    for (const e of tr.effects) {\n      if (e.is(flashLineEffect)) {\n        return Decoration.set([flashLineDeco.range(e.value.from)]);\n      }\n      if (e.is(clearFlashEffect)) {\n        return Decoration.none;\n      }\n    }\n    return decos;\n  },\n  provide: (f) => EditorView.decorations.from(f),\n});\n\n\nfunction scrollToTarget(view: EditorView, target?: string) {\n  if (!target) return;\n  const docText = view.state.doc.toString();\n  const normalized = target.replace(/\"/g, \"'\");\n  let idx = docText.indexOf(normalized);\n  if (idx === -1) idx = docText.indexOf(target);\n\n  // If exact match fails, extract tag+class and search line by line\n  if (idx === -1) {\n    const tagMatch = target.match(/^<(\\w+)/);\n    const classMatch = target.match(/class=[\"']([^\"']*?)[\"']/);\n    if (tagMatch) {\n      const searchTag = tagMatch[0];\n      const searchClass = classMatch ? classMatch[1].split(\" \")[0] : null;\n      for (let i = 1; i <= view.state.doc.lines; i++) {\n        const line = view.state.doc.line(i);\n        if (line.text.includes(searchTag) && (!searchClass || line.text.includes(searchClass))) {\n          idx = line.from;\n          break;\n        }\n      }\n    }\n  }\n\n  if (idx !== -1) {\n    const line = view.state.doc.lineAt(idx);\n    view.dispatch({\n      selection: { anchor: line.from },\n      effects: [\n        EditorView.scrollIntoView(line.from, { y: \"center\" }),\n        flashLineEffect.of({ from: line.from, to: line.to }),\n      ],\n    });\n    // Clear flash after 2s\n    setTimeout(() => {\n      view.dispatch({ effects: clearFlashEffect.of(null) });\n    }, 2000);\n  }\n}\n\nexport function CodeEditor({ code, label, scrollToText, onSave, onClose }: CodeEditorProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const viewRef = useRef<EditorView | null>(null);\n  const [stats, setStats] = useState({ lines: 0, kb: \"0.0\" });\n\n  const onSaveRef = useRef(onSave);\n  const onCloseRef = useRef(onClose);\n  onSaveRef.current = onSave;\n  onCloseRef.current = onClose;\n\n  const updateStats = useCallback((doc: { length: number; lines: number }) => {\n    setStats({ lines: doc.lines, kb: (doc.length / 1024).toFixed(1) });\n  }, []);\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const initialDoc = code.includes(\"\\n\") ? code : formatHtml(code);\n\n    const state = EditorState.create({\n      doc: initialDoc,\n      extensions: [\n        lineNumbers(),\n        highlightActiveLine(),\n        highlightActiveLineGutter(),\n        bracketMatching(),\n        closeBrackets(),\n        foldGutter(),\n        highlightSelectionMatches(),\n        html(),\n        oneDark,\n        history(),\n        EditorView.lineWrapping,\n        keymap.of([\n          { key: \"Mod-s\", run: (v) => { onSaveRef.current(v.state.doc.toString()); return true; } },\n          { key: \"Escape\", run: () => { onCloseRef.current(); return true; } },\n          indentWithTab,\n          ...closeBracketsKeymap,\n          ...searchKeymap,\n          ...foldKeymap,\n          ...historyKeymap,\n          ...defaultKeymap,\n        ]),\n        EditorView.updateListener.of((update) => {\n          if (update.docChanged) {\n            updateStats(update.state.doc);\n          }\n        }),\n        flashLineField,\n        EditorView.theme({\n          \"&\": { height: \"100%\", fontSize: \"13px\" },\n          \".cm-scroller\": { overflow: \"auto\", fontFamily: \"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace\" },\n          \".cm-content\": { padding: \"8px 0\" },\n          \".cm-gutters\": { borderRight: \"1px solid #21262d\" },\n          \".cm-flash-line\": { backgroundColor: \"rgba(250, 204, 21, 0.25)\", transition: \"background-color 2s ease-out\" },\n        }),\n      ],\n    });\n\n    const view = new EditorView({ state, parent: containerRef.current });\n    viewRef.current = view;\n\n    updateStats(view.state.doc);\n    scrollToTarget(view, scrollToText);\n    view.focus();\n\n    return () => { view.destroy(); };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Re-scroll when scrollToText changes while editor is already open\n  useEffect(() => {\n    const view = viewRef.current;\n    if (!view || !scrollToText) return;\n    scrollToTarget(view, scrollToText);\n  }, [scrollToText]);\n\n  function handleFormat() {\n    const view = viewRef.current;\n    if (!view) return;\n    const formatted = formatHtml(view.state.doc.toString());\n    view.dispatch({\n      changes: { from: 0, to: view.state.doc.length, insert: formatted },\n    });\n  }\n\n  function handleSave() {\n    const view = viewRef.current;\n    if (!view) return;\n    onSave(view.state.doc.toString());\n  }\n\n  return (\n    <div className=\"flex flex-col h-full bg-[#0d1117]\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between px-4 py-3 border-b border-gray-800 shrink-0\">\n        <div className=\"flex items-center gap-3\">\n          <span className=\"px-2 py-0.5 rounded bg-orange-600/20 text-orange-400 text-[10px] font-mono font-bold uppercase tracking-wider\">\n            HTML\n          </span>\n          <span className=\"text-sm font-bold text-gray-300\">{label}</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            onClick={handleFormat}\n            className=\"px-3 py-1.5 text-xs font-bold rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors\"\n          >\n            Formatear\n          </button>\n          <button\n            onClick={handleSave}\n            className=\"px-4 py-1.5 text-xs font-bold rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors\"\n          >\n            Guardar\n          </button>\n          <button\n            onClick={onClose}\n            className=\"px-3 py-1.5 text-xs font-bold rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors\"\n          >\n            Cerrar\n          </button>\n        </div>\n      </div>\n\n      {/* Editor */}\n      <div ref={containerRef} className=\"flex-1 overflow-hidden\" />\n\n      {/* Footer */}\n      <div className=\"flex items-center justify-between px-4 py-1.5 border-t border-gray-800 text-[10px] text-gray-500 font-mono shrink-0\">\n        <span>{stats.lines} lineas</span>\n        <span>Tab = indentar &middot; Cmd+S = guardar &middot; Esc = cerrar</span>\n        <span>{stats.kb} KB</span>\n      </div>\n    </div>\n  );\n}\n","import React from \"react\";\n\nexport type Viewport = \"desktop\" | \"tablet\" | \"mobile\";\n\nconst VIEWPORTS: { id: Viewport; label: string; icon: React.ReactElement }[] = [\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n    icon: (\n      <svg className=\"w-4 h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M2 4.25A2.25 2.25 0 014.25 2h11.5A2.25 2.25 0 0118 4.25v8.5A2.25 2.25 0 0115.75 15h-3.105a3.501 3.501 0 001.1 1.677A.75.75 0 0113.26 18H6.74a.75.75 0 01-.484-1.323A3.501 3.501 0 007.355 15H4.25A2.25 2.25 0 012 12.75v-8.5zm1.5 0a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v8.5a.75.75 0 01-.75.75H4.25a.75.75 0 01-.75-.75v-8.5z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n    ),\n  },\n  {\n    id: \"tablet\",\n    label: \"Tablet\",\n    icon: (\n      <svg className=\"w-4 h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M5 1a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V3a2 2 0 00-2-2H5zm0 1.5h10a.5.5 0 01.5.5v14a.5.5 0 01-.5.5H5a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5zm4 14a1 1 0 112 0 1 1 0 01-2 0z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n    ),\n  },\n  {\n    id: \"mobile\",\n    label: \"Mobile\",\n    icon: (\n      <svg className=\"w-4 h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm0 1.5h8a.5.5 0 01.5.5v12a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V4a.5.5 0 01.5-.5zm3 13a1 1 0 112 0 1 1 0 01-2 0z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n    ),\n  },\n];\n\nexport function ViewportToggle({\n  value,\n  onChange,\n  activeClass = \"bg-blue-100 text-blue-700\",\n  inactiveClass = \"text-gray-400 hover:text-gray-600 hover:bg-gray-100\",\n}: {\n  value: Viewport;\n  onChange: (v: Viewport) => void;\n  activeClass?: string;\n  inactiveClass?: string;\n}) {\n  return (\n    <div className=\"flex items-center justify-center gap-1 py-2 shrink-0 bg-gray-50 border-b border-gray-200\">\n      {VIEWPORTS.map((v) => (\n        <button\n          key={v.id}\n          type=\"button\"\n          onClick={() => onChange(v.id)}\n          title={v.label}\n          className={`p-1.5 rounded-lg transition-colors ${\n            value === v.id ? activeClass : inactiveClass\n          }`}\n        >\n          {v.icon}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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","names":["Canvas","html","useRef","useState","jsx","jsxs","useRef","useState","useState","useRef","useEffect","jsx","jsxs","prompt","useEffect","useRef","useCallback","useState","jsx","jsxs","html","jsx"]}

package/dist/{chunk-GS3CIBGZ.js → chunk-XROFEC53.js}

@@ -1,6 +1,6 @@
 import {
   buildDeployHtml
-} from "./chunk-CDSMYEXN.js";
+} from "./chunk-5EWGZ32G.js";
 
 // src/deploy.ts
 async function deployToS3(options) {
@@ -38,4 +38,4 @@ export {
   deployToS3,
   deployToEasyBits
 };
-//# sourceMappingURL=chunk-GS3CIBGZ.js.map
+//# sourceMappingURL=chunk-XROFEC53.js.map

package/dist/components.js

@@ -4,8 +4,8 @@ import {
   FloatingToolbar,
   SectionList,
   ViewportToggle
-} from "./chunk-WMQETMD6.js";
-import "./chunk-CDSMYEXN.js";
+} from "./chunk-SD4ISSXS.js";
+import "./chunk-5EWGZ32G.js";
 export {
   Canvas,
   CodeEditor,

package/dist/deploy.js

@@ -1,8 +1,8 @@
 import {
   deployToEasyBits,
   deployToS3
-} from "./chunk-GS3CIBGZ.js";
-import "./chunk-CDSMYEXN.js";
+} from "./chunk-XROFEC53.js";
+import "./chunk-5EWGZ32G.js";
 export {
   deployToEasyBits,
   deployToS3

package/dist/generate.d.ts

@@ -1,6 +1,6 @@
 import { S as Section3 } from './types-Flpl4wDs.js';
 
-declare const SYSTEM_PROMPT = "You are a world-class web designer who creates AWARD-WINNING landing pages. Your designs win Awwwards, FWA, and CSS Design Awards. You think in terms of visual hierarchy, whitespace, and emotional impact.\n\nRULES:\n- Each section is a complete <section> tag with Tailwind CSS classes\n- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import, no @tailwind directives)\n- NO JavaScript, only HTML+Tailwind\n- Each section must be independent and self-contained\n- Responsive: mobile-first with sm/md/lg/xl breakpoints\n- All text content in Spanish unless the prompt specifies otherwise\n- Use real-looking content (not Lorem ipsum) \u2014 make it specific to the prompt\n\nIMAGES \u2014 CRITICAL:\n- Use <img data-image-query=\"english search query\" alt=\"description\" class=\"...\"/>\n- NEVER include a src attribute \u2014 the system auto-replaces data-image-query with a real image URL\n- For avatar-like elements, use colored divs with initials instead of img tags (e.g. <div class=\"w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold\">JD</div>)\n\nCOLOR SYSTEM \u2014 CRITICAL (READ CAREFULLY):\n- Use semantic color classes: bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary, bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted, bg-secondary, text-secondary, bg-accent, text-accent\n- NEVER use hardcoded Tailwind color classes: NO bg-gray-*, bg-black, bg-white, bg-indigo-*, bg-blue-*, bg-purple-*, text-gray-*, text-black, text-white, etc.\n- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.\n- ALL backgrounds MUST use: bg-primary, bg-primary-dark, bg-surface, bg-surface-alt\n- ALL text MUST use: text-on-surface, text-on-surface-muted, text-on-primary, text-primary, text-accent\n- CONTRAST RULE: on bg-primary or bg-primary-dark \u2192 use text-on-primary. On bg-surface or bg-surface-alt \u2192 use text-on-surface or text-on-surface-muted. NEVER put text-on-surface on bg-primary or vice versa. text-accent is decorative \u2014 use sparingly on bg-surface/bg-surface-alt only.\n- For gradients: from-primary to-primary-dark, from-surface to-surface-alt\n- For hover: hover:bg-primary-dark, hover:bg-primary-light\n\nDESIGN PHILOSOPHY \u2014 what separates good from GREAT:\n- WHITESPACE is your best friend. Generous padding (py-24, py-32, px-8). Let elements breathe.\n- CONTRAST: mix dark sections with light ones. Alternate bg-primary and bg-surface sections.\n- TYPOGRAPHY: use extreme size differences for hierarchy (text-7xl headline next to text-sm label)\n- DEPTH: overlapping elements, negative margins (-mt-12), z-index layering, shadows\n- ASYMMETRY: avoid centering everything. Use grid-cols-5 with col-span-3 + col-span-2. Offset elements.\n- TEXTURE: use subtle patterns, gradients, border treatments, rounded-3xl mixed with sharp edges\n- Each section should have a COMPLETELY DIFFERENT layout from the others\n\nHERO SECTION \u2014 your masterpiece:\n- Bento-grid or asymmetric layout, NOT a generic centered hero\n- Large headline block + smaller stat/metric cards in a grid\n- Real social proof: \"2,847+ users\", avatar stack (colored divs with initials), star ratings\n- Bold oversized headline (text-6xl/7xl font-black leading-none)\n- Tag/label above headline (uppercase, tracking-wider, text-xs)\n- 2 CTAs: primary (large, with \u2192 arrow) + secondary (ghost/outlined)\n- Real image via data-image-query\n- Min height: min-h-[90vh] with generous padding\n\nTAILWIND v3 NOTES:\n- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)\n- Borders: border + border-gray-200 for visible borders";
+declare const SYSTEM_PROMPT = "You are a world-class web designer who creates AWARD-WINNING landing pages. Your designs win Awwwards, FWA, and CSS Design Awards. You think in terms of visual hierarchy, whitespace, and emotional impact.\n\nRULES:\n- Each section is a complete <section> tag with Tailwind CSS classes\n- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import, no @tailwind directives)\n- NO JavaScript, only HTML+Tailwind\n- Each section must be independent and self-contained\n- Responsive: mobile-first with sm/md/lg/xl breakpoints\n- All text content in Spanish unless the prompt specifies otherwise\n- Use real-looking content (not Lorem ipsum) \u2014 make it specific to the prompt\n\nRESPONSIVE \u2014 MANDATORY:\n- EVERY grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 (NEVER grid-cols-3 alone)\n- EVERY flex row: flex flex-col md:flex-row (NEVER flex flex-row alone)\n- Text sizes: text-3xl md:text-5xl lg:text-7xl (NEVER text-7xl alone)\n- Images: w-full h-auto object-cover max-w-full\n- Padding: px-4 md:px-8 lg:px-16 (NEVER px-16 alone)\n- Hide decorative on mobile if breaks layout: hidden md:block\n\nIMAGES \u2014 CRITICAL:\n- EVERY image MUST use: <img data-image-query=\"english search query\" alt=\"description\" class=\"w-full h-auto object-cover rounded-xl\"/>\n- NEVER use <img> without data-image-query\n- NEVER include a src attribute \u2014 the system auto-replaces data-image-query with a real image URL\n- Queries must be generic stock-photo friendly (e.g. \"modern office\" not \"Juan's cybercafe\")\n- For avatar-like elements, use colored divs with initials instead of img tags (e.g. <div class=\"w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold\">JD</div>)\n\nCOLOR SYSTEM \u2014 CRITICAL (READ CAREFULLY):\n- Use semantic color classes: bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary, bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted, bg-secondary, text-secondary, bg-accent, text-accent\n- NEVER use hardcoded Tailwind color classes: NO bg-gray-*, bg-black, bg-white, bg-indigo-*, bg-blue-*, bg-purple-*, text-gray-*, text-black, text-white, etc.\n- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.\n- ALL backgrounds MUST use: bg-primary, bg-primary-dark, bg-surface, bg-surface-alt\n- ALL text MUST use: text-on-surface, text-on-surface-muted, text-on-primary, text-primary, text-accent\n- CONTRAST RULE: on bg-primary or bg-primary-dark \u2192 use text-on-primary. On bg-surface or bg-surface-alt \u2192 use text-on-surface or text-on-surface-muted. NEVER put text-on-surface on bg-primary or vice versa. text-accent is decorative \u2014 use sparingly on bg-surface/bg-surface-alt only.\n- For gradients: from-primary to-primary-dark, from-surface to-surface-alt\n- For hover: hover:bg-primary-dark, hover:bg-primary-light\n\nDESIGN PHILOSOPHY \u2014 what separates good from GREAT:\n- WHITESPACE is your best friend. Generous padding (py-24, py-32, px-8). Let elements breathe.\n- CONTRAST: mix dark sections with light ones. Alternate bg-primary and bg-surface sections.\n- TYPOGRAPHY: use extreme size differences for hierarchy (text-7xl headline next to text-sm label)\n- DEPTH: overlapping elements, negative margins (-mt-12), z-index layering, shadows\n- ASYMMETRY: avoid centering everything. Use grid-cols-5 with col-span-3 + col-span-2. Offset elements.\n- TEXTURE: use subtle patterns, gradients, border treatments, rounded-3xl mixed with sharp edges\n- Each section should have a COMPLETELY DIFFERENT layout from the others\n\nHERO SECTION \u2014 your masterpiece:\n- Bento-grid or asymmetric layout, NOT a generic centered hero\n- Large headline block + smaller stat/metric cards in a grid\n- Real social proof: \"2,847+ users\", avatar stack (colored divs with initials), star ratings\n- Bold oversized headline (text-6xl/7xl font-black leading-none)\n- Tag/label above headline (uppercase, tracking-wider, text-xs)\n- 2 CTAs: primary (large, with \u2192 arrow) + secondary (ghost/outlined)\n- Real image via data-image-query\n- Min height: min-h-[90vh] with generous padding\n\nTAILWIND v3 NOTES:\n- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)\n- Borders: border + border-gray-200 for visible borders";
 declare const PROMPT_SUFFIX = "\n\nOUTPUT FORMAT: NDJSON \u2014 one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Short Label\", \"html\": \"<section>...</section>\"}\n\nGenerate 7-9 sections. Always start with Hero and end with Footer.\nIMPORTANT: Make each section VISUALLY UNIQUE \u2014 different layouts, different background colors, different grid structures.\nThink like a premium design agency creating a $50K landing page.\nNO generic Bootstrap layouts. Use creative grids, bento layouts, overlapping elements, asymmetric columns.";
 /**
  * Extract complete JSON objects from accumulated text using brace-depth tracking.

package/dist/generate.js

@@ -3,8 +3,8 @@ import {
   SYSTEM_PROMPT,
   extractJsonObjects,
   generateLanding
-} from "./chunk-S7YLW6ZU.js";
-import "./chunk-YPK3DAFK.js";
+} from "./chunk-EFY57D7X.js";
+import "./chunk-4ACMDOL3.js";
 export {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,

package/dist/images.js

@@ -5,7 +5,7 @@ import {
   enrichImages,
   findImageSlots,
   searchImage
-} from "./chunk-YPK3DAFK.js";
+} from "./chunk-4ACMDOL3.js";
 export {
   enrichImages,
   findImageSlots,

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   FloatingToolbar,
   SectionList,
   ViewportToggle
-} from "./chunk-WMQETMD6.js";
+} from "./chunk-SD4ISSXS.js";
 import {
   generateImage
 } from "./chunk-LPI2QUCL.js";
@@ -13,20 +13,20 @@ import {
   SYSTEM_PROMPT,
   extractJsonObjects,
   generateLanding
-} from "./chunk-S7YLW6ZU.js";
+} from "./chunk-EFY57D7X.js";
 import {
   REFINE_SYSTEM,
   refineLanding
-} from "./chunk-CB2LECVT.js";
+} from "./chunk-2RCIJRYZ.js";
 import {
   enrichImages,
   findImageSlots,
   searchImage
-} from "./chunk-YPK3DAFK.js";
+} from "./chunk-4ACMDOL3.js";
 import {
   deployToEasyBits,
   deployToS3
-} from "./chunk-GS3CIBGZ.js";
+} from "./chunk-XROFEC53.js";
 import {
   LANDING_THEMES,
   buildCustomTheme,
@@ -36,7 +36,7 @@ import {
   buildSingleThemeCss,
   buildThemeCss,
   getIframeScript
-} from "./chunk-CDSMYEXN.js";
+} from "./chunk-5EWGZ32G.js";
 export {
   Canvas,
   CodeEditor,

package/dist/refine.js

@@ -1,8 +1,8 @@
 import {
   REFINE_SYSTEM,
   refineLanding
-} from "./chunk-CB2LECVT.js";
-import "./chunk-YPK3DAFK.js";
+} from "./chunk-2RCIJRYZ.js";
+import "./chunk-4ACMDOL3.js";
 export {
   REFINE_SYSTEM,
   refineLanding

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "AI-powered landing page generator with Tailwind CSS — canvas editor, streaming generation, and one-click deploy",
   "license": "PolyForm-Noncommercial-1.0.0",
   "type": "module",
@@ -56,17 +56,39 @@
     "react-icons": ">=5"
   },
   "peerDependenciesMeta": {
-    "@codemirror/lang-html": { "optional": true },
-    "@codemirror/state": { "optional": true },
-    "@codemirror/theme-one-dark": { "optional": true },
-    "@codemirror/view": { "optional": true },
-    "@codemirror/commands": { "optional": true },
-    "@codemirror/search": { "optional": true },
-    "@codemirror/language": { "optional": true },
-    "@codemirror/autocomplete": { "optional": true },
-    "react-icons": { "optional": true },
-    "@ai-sdk/openai": { "optional": true },
-    "react-dom": { "optional": true }
+    "@codemirror/lang-html": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/theme-one-dark": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/search": {
+      "optional": true
+    },
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/autocomplete": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    },
+    "@ai-sdk/openai": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "dependencies": {
     "nanoid": "^5.1.5"

package/dist/chunk-CDSMYEXN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/themes.ts","../src/iframeScript.ts","../src/buildHtml.ts"],"sourcesContent":["export interface LandingTheme {\n  id: string;\n  label: string;\n  colors: {\n    primary: string;\n    \"primary-light\": string;\n    \"primary-dark\": string;\n    secondary: string;\n    accent: string;\n    surface: string;\n    \"surface-alt\": string;\n    \"on-surface\": string;\n    \"on-surface-muted\": string;\n    \"on-primary\": string;\n  };\n}\n\nexport const LANDING_THEMES: LandingTheme[] = [\n  {\n    id: \"default\",\n    label: \"Neutral\",\n    colors: {\n      primary: \"#18181b\",\n      \"primary-light\": \"#3f3f46\",\n      \"primary-dark\": \"#09090b\",\n      secondary: \"#a1a1aa\",\n      accent: \"#18181b\",\n      surface: \"#ffffff\",\n      \"surface-alt\": \"#fafafa\",\n      \"on-surface\": \"#18181b\",\n      \"on-surface-muted\": \"#71717a\",\n      \"on-primary\": \"#ffffff\",\n    },\n  },\n  {\n    id: \"dark\",\n    label: \"Dark\",\n    colors: {\n      primary: \"#e4e4e7\",\n      \"primary-light\": \"#f4f4f5\",\n      \"primary-dark\": \"#a1a1aa\",\n      secondary: \"#71717a\",\n      accent: \"#a78bfa\",\n      surface: \"#09090b\",\n      \"surface-alt\": \"#18181b\",\n      \"on-surface\": \"#fafafa\",\n      \"on-surface-muted\": \"#a1a1aa\",\n      \"on-primary\": \"#09090b\",\n    },\n  },\n  {\n    id: \"slate\",\n    label: \"Slate\",\n    colors: {\n      primary: \"#3b82f6\",\n      \"primary-light\": \"#60a5fa\",\n      \"primary-dark\": \"#2563eb\",\n      secondary: \"#64748b\",\n      accent: \"#3b82f6\",\n      surface: \"#ffffff\",\n      \"surface-alt\": \"#f8fafc\",\n      \"on-surface\": \"#0f172a\",\n      \"on-surface-muted\": \"#64748b\",\n      \"on-primary\": \"#ffffff\",\n    },\n  },\n  {\n    id: \"midnight\",\n    label: \"Midnight\",\n    colors: {\n      primary: \"#6366f1\",\n      \"primary-light\": \"#818cf8\",\n      \"primary-dark\": \"#4f46e5\",\n      secondary: \"#94a3b8\",\n      accent: \"#a78bfa\",\n      surface: \"#0f172a\",\n      \"surface-alt\": \"#1e293b\",\n      \"on-surface\": \"#e2e8f0\",\n      \"on-surface-muted\": \"#94a3b8\",\n      \"on-primary\": \"#ffffff\",\n    },\n  },\n  {\n    id: \"warm\",\n    label: \"Warm\",\n    colors: {\n      primary: \"#b45309\",\n      \"primary-light\": \"#d97706\",\n      \"primary-dark\": \"#92400e\",\n      secondary: \"#78716c\",\n      accent: \"#b45309\",\n      surface: \"#fafaf9\",\n      \"surface-alt\": \"#f5f5f4\",\n      \"on-surface\": \"#1c1917\",\n      \"on-surface-muted\": \"#78716c\",\n      \"on-primary\": \"#ffffff\",\n    },\n  },\n];\n\nexport interface CustomColors {\n  primary: string;\n  secondary?: string;\n  accent?: string;\n  surface?: string;\n}\n\nfunction parseHex(hex: string) {\n  return {\n    r: parseInt(hex.slice(1, 3), 16),\n    g: parseInt(hex.slice(3, 5), 16),\n    b: parseInt(hex.slice(5, 7), 16),\n  };\n}\n\nfunction toHex(r: number, g: number, b: number) {\n  return `#${[r, g, b].map((c) => Math.max(0, Math.min(255, c)).toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\nfunction luminance(hex: string) {\n  const { r, g, b } = parseHex(hex);\n  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n}\n\nfunction lighten(hex: string, amount = 40) {\n  const { r, g, b } = parseHex(hex);\n  return toHex(r + amount, g + amount, b + amount);\n}\n\nfunction darken(hex: string, amount = 40) {\n  const { r, g, b } = parseHex(hex);\n  return toHex(r - amount, g - amount, b - amount);\n}\n\nexport function buildCustomTheme(colors: CustomColors): LandingTheme {\n  const { primary, secondary = \"#f59e0b\", accent = \"#06b6d4\", surface = \"#ffffff\" } = colors;\n\n  const onPrimary = luminance(primary) > 0.5 ? \"#111827\" : \"#ffffff\";\n  const surfaceLum = luminance(surface);\n  const isDarkSurface = surfaceLum < 0.5;\n\n  return {\n    id: \"custom\",\n    label: \"Custom\",\n    colors: {\n      primary,\n      \"primary-light\": lighten(primary),\n      \"primary-dark\": darken(primary),\n      secondary,\n      accent,\n      surface,\n      \"surface-alt\": isDarkSurface ? lighten(surface, 20) : darken(surface, 5),\n      \"on-surface\": isDarkSurface ? \"#f1f5f9\" : \"#111827\",\n      \"on-surface-muted\": isDarkSurface ? \"#94a3b8\" : \"#6b7280\",\n      \"on-primary\": onPrimary,\n    },\n  };\n}\n\nexport function buildCustomThemeCss(colors: CustomColors): string {\n  const theme = buildCustomTheme(colors);\n  return `[data-theme=\"custom\"] {\\n${buildCssVars(theme.colors)}\\n}`;\n}\n\n/** CSS custom properties for a theme */\nfunction buildCssVars(colors: LandingTheme[\"colors\"]): string {\n  return Object.entries(colors)\n    .map(([k, v]) => `  --color-${k}: ${v};`)\n    .join(\"\\n\");\n}\n\n/** Build the tailwind.config JS object string for TW v3 CDN */\nfunction buildTailwindConfig(): string {\n  const colorEntries = Object.keys(LANDING_THEMES[0].colors)\n    .map((k) => `          '${k}': 'var(--color-${k})'`)\n    .join(\",\\n\");\n\n  return `{\n    theme: {\n      extend: {\n        colors: {\n${colorEntries}\n        }\n      }\n    }\n  }`;\n}\n\nexport function buildThemeCss(): { css: string; tailwindConfig: string } {\n  const defaultTheme = LANDING_THEMES[0];\n\n  const overrides = LANDING_THEMES.slice(1)\n    .map((t) => `[data-theme=\"${t.id}\"] {\\n${buildCssVars(t.colors)}\\n}`)\n    .join(\"\\n\\n\");\n\n  const css = `:root {\\n${buildCssVars(defaultTheme.colors)}\\n}\\n\\n${overrides}`;\n  return { css, tailwindConfig: buildTailwindConfig() };\n}\n\nexport function buildSingleThemeCss(themeId: string): { css: string; tailwindConfig: string } {\n  const theme = LANDING_THEMES.find((t) => t.id === themeId) || LANDING_THEMES[0];\n  const css = `:root {\\n${buildCssVars(theme.colors)}\\n}`;\n  return { css, tailwindConfig: buildTailwindConfig() };\n}\n","/**\n * JavaScript injected into the landing v3 iframe.\n * Handles hover highlights, click selection, contentEditable text editing,\n * postMessage communication with the parent editor,\n * and incremental section injection from parent.\n */\nexport function getIframeScript(): string {\n  return `\n(function() {\n  let hoveredEl = null;\n  let selectedEl = null;\n  const OUTLINE_HOVER = '2px solid #3B82F6';\n  const OUTLINE_SELECTED = '2px solid #8B5CF6';\n\n  function getSectionId(el) {\n    let node = el;\n    while (node && node !== document.body) {\n      if (node.dataset && node.dataset.sectionId) {\n        return node.dataset.sectionId;\n      }\n      node = node.parentElement;\n    }\n    return null;\n  }\n\n  function getSectionElement(sectionId) {\n    return document.querySelector('[data-section-id=\"' + sectionId + '\"]');\n  }\n\n  function getElementPath(el) {\n    const parts = [];\n    let node = el;\n    while (node && node !== document.body) {\n      let tag = node.tagName.toLowerCase();\n      if (node.id) { tag += '#' + node.id; }\n      const siblings = node.parentElement ? Array.from(node.parentElement.children).filter(function(c) { return c.tagName === node.tagName; }) : [];\n      if (siblings.length > 1) { tag += ':nth(' + siblings.indexOf(node) + ')'; }\n      parts.unshift(tag);\n      node = node.parentElement;\n    }\n    return parts.join(' > ');\n  }\n\n  function isTextElement(el) {\n    var textTags = ['H1','H2','H3','H4','H5','H6','P','SPAN','LI','A','BLOCKQUOTE','LABEL','TD','TH','FIGCAPTION','BUTTON'];\n    return textTags.indexOf(el.tagName) !== -1;\n  }\n\n  // Hover\n  document.addEventListener('mouseover', function(e) {\n    var el = e.target;\n    if (el === document.body || el === document.documentElement) return;\n    if (el === selectedEl) return;\n    if (hoveredEl && hoveredEl !== selectedEl) {\n      hoveredEl.style.outline = '';\n      hoveredEl.style.outlineOffset = '';\n    }\n    hoveredEl = el;\n    if (el !== selectedEl) {\n      el.style.outline = OUTLINE_HOVER;\n      el.style.outlineOffset = '-2px';\n    }\n  });\n\n  document.addEventListener('mouseout', function(e) {\n    if (hoveredEl && hoveredEl !== selectedEl) {\n      hoveredEl.style.outline = '';\n      hoveredEl.style.outlineOffset = '';\n    }\n    hoveredEl = null;\n  });\n\n  // Click — select element\n  document.addEventListener('click', function(e) {\n    e.preventDefault();\n    e.stopPropagation();\n    var el = e.target;\n\n    // Deselect previous\n    if (selectedEl) {\n      selectedEl.style.outline = '';\n      selectedEl.style.outlineOffset = '';\n    }\n\n    if (selectedEl === el) {\n      selectedEl = null;\n      window.parent.postMessage({ type: 'element-deselected' }, '*');\n      return;\n    }\n\n    selectedEl = el;\n\n    // Clear hover styles BEFORE capturing openTag (so it matches source HTML)\n    el.style.outline = '';\n    el.style.outlineOffset = '';\n    var openTag = el.outerHTML.substring(0, el.outerHTML.indexOf('>') + 1).substring(0, 120);\n\n    el.style.outline = OUTLINE_SELECTED;\n    el.style.outlineOffset = '-2px';\n\n    var rect = el.getBoundingClientRect();\n    var attrs = {};\n    if (el.tagName === 'IMG') {\n      attrs = { src: el.getAttribute('src') || '', alt: el.getAttribute('alt') || '' };\n    }\n    if (el.tagName === 'A') {\n      attrs = { href: el.getAttribute('href') || '', target: el.getAttribute('target') || '' };\n    }\n\n    window.parent.postMessage({\n      type: 'element-selected',\n      sectionId: getSectionId(el),\n      tagName: el.tagName,\n      rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n      text: (el.textContent || '').substring(0, 200),\n      openTag: openTag,\n      elementPath: getElementPath(el),\n      isSectionRoot: el.dataset && el.dataset.sectionId ? true : false,\n      attrs: attrs,\n    }, '*');\n  }, true);\n\n  // Double-click — contentEditable for text\n  document.addEventListener('dblclick', function(e) {\n    e.preventDefault();\n    e.stopPropagation();\n    var el = e.target;\n    if (!isTextElement(el)) return;\n\n    el.contentEditable = 'true';\n    el.focus();\n    el.style.outline = '2px dashed #F59E0B';\n    el.style.outlineOffset = '-2px';\n\n    function onBlur() {\n      el.contentEditable = 'false';\n      el.style.outline = '';\n      el.style.outlineOffset = '';\n      el.removeEventListener('blur', onBlur);\n      el.removeEventListener('keydown', onKeydown);\n\n      var sid = getSectionId(el);\n      var sectionEl = sid ? getSectionElement(sid) : null;\n      window.parent.postMessage({\n        type: 'text-edited',\n        sectionId: sid,\n        elementPath: getElementPath(el),\n        newText: el.innerHTML,\n        sectionHtml: sectionEl ? sectionEl.innerHTML : null,\n      }, '*');\n\n      selectedEl = null;\n    }\n\n    function onKeydown(ev) {\n      if (ev.key === 'Escape') {\n        el.blur();\n      }\n    }\n\n    el.addEventListener('blur', onBlur);\n    el.addEventListener('keydown', onKeydown);\n  }, true);\n\n  // Listen for messages FROM parent (incremental section injection)\n  window.addEventListener('message', function(e) {\n    var msg = e.data;\n    if (!msg || !msg.action) return;\n\n    if (msg.action === 'add-section') {\n      var wrapper = document.createElement('div');\n      wrapper.setAttribute('data-section-id', msg.id);\n      wrapper.innerHTML = msg.html;\n      wrapper.style.animation = 'fadeInUp 0.4s ease-out';\n      document.body.appendChild(wrapper);\n      wrapper.scrollIntoView({ behavior: 'smooth', block: 'end' });\n    }\n\n    if (msg.action === 'update-section') {\n      var el = getSectionElement(msg.id);\n      if (el && typeof window.morphdom === 'function') {\n        var tmp = document.createElement('div');\n        tmp.innerHTML = msg.html;\n        window.morphdom(el, tmp, {\n          childrenOnly: true,\n          onBeforeElUpdated: function(fromEl, toEl) {\n            if (fromEl.isEqualNode(toEl)) return false;\n            return true;\n          }\n        });\n      } else if (el) {\n        el.innerHTML = msg.html;\n      }\n    }\n\n    if (msg.action === 'remove-section') {\n      var el = getSectionElement(msg.id);\n      if (el) { el.remove(); }\n    }\n\n    if (msg.action === 'reorder-sections') {\n      // msg.order = [id1, id2, id3, ...]\n      var order = msg.order;\n      for (var i = 0; i < order.length; i++) {\n        var el = getSectionElement(order[i]);\n        if (el) { document.body.appendChild(el); }\n      }\n    }\n\n    if (msg.action === 'update-attribute') {\n      var sectionEl = getSectionElement(msg.sectionId);\n      if (sectionEl) {\n        var target = null;\n        if (msg.elementPath) {\n          // Find element by matching path\n          var allEls = sectionEl.querySelectorAll(msg.tagName || '*');\n          for (var i = 0; i < allEls.length; i++) {\n            if (getElementPath(allEls[i]) === msg.elementPath) {\n              target = allEls[i];\n              break;\n            }\n          }\n        }\n        if (target) {\n          target.setAttribute(msg.attr, msg.value);\n          window.parent.postMessage({\n            type: 'section-html-updated',\n            sectionId: msg.sectionId,\n            sectionHtml: sectionEl.innerHTML,\n          }, '*');\n        }\n      }\n    }\n\n    if (msg.action === 'set-theme') {\n      if (msg.theme && msg.theme !== 'default') {\n        document.documentElement.setAttribute('data-theme', msg.theme);\n      } else {\n        document.documentElement.removeAttribute('data-theme');\n      }\n    }\n\n    if (msg.action === 'set-custom-css') {\n      var customStyle = document.getElementById('custom-theme-css');\n      if (!customStyle) {\n        customStyle = document.createElement('style');\n        customStyle.id = 'custom-theme-css';\n        document.head.appendChild(customStyle);\n      }\n      customStyle.textContent = msg.css || '';\n    }\n\n    if (msg.action === 'scroll-to-section') {\n      var el = getSectionElement(msg.id);\n      if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }\n    }\n\n    if (msg.action === 'full-rewrite') {\n      // Fallback: rewrite everything\n      document.body.innerHTML = msg.html;\n    }\n  });\n\n  // Inject animation keyframe\n  var style = document.createElement('style');\n  style.textContent = '@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }';\n  document.head.appendChild(style);\n\n  // Notify parent we're ready\n  window.parent.postMessage({ type: 'ready' }, '*');\n})();\n`;\n}\n","import type { Section3 } from \"./types\";\nimport { getIframeScript } from \"./iframeScript\";\nimport { buildThemeCss, buildSingleThemeCss, buildCustomTheme, type CustomColors } from \"./themes\";\n\n/**\n * Build the full HTML for the iframe preview (with editing script).\n */\nexport function buildPreviewHtml(sections: Section3[], theme?: string): string {\n  const sorted = [...sections].sort((a, b) => a.order - b.order);\n  const body = sorted\n    .map((s) => `<div data-section-id=\"${s.id}\">${s.html}</div>`)\n    .join(\"\\n\");\n\n  const dataTheme = theme && theme !== \"default\" ? ` data-theme=\"${theme}\"` : \"\";\n  const { css, tailwindConfig } = buildThemeCss();\n\n  return `<!DOCTYPE html>\n<html lang=\"es\"${dataTheme}>\n<head>\n<meta charset=\"UTF-8\"/>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"/>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<script src=\"https://unpkg.com/morphdom@2.7.4/dist/morphdom-umd.min.js\"></script>\n<script>tailwind.config = ${tailwindConfig}</script>\n<style>\n${css}\n*{margin:0;padding:0;box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{font-family:system-ui,-apple-system,sans-serif;background-color:var(--color-surface);color:var(--color-on-surface)}\nimg{max-width:100%}\nsection{max-width:80rem;margin-left:auto;margin-right:auto}\n[contenteditable=\"true\"]{cursor:text}\n</style>\n</head>\n<body class=\"bg-surface text-on-surface\">\n${body}\n<script>${getIframeScript()}</script>\n</body>\n</html>`;\n}\n\n/**\n * Build the deploy HTML (no editing script, clean output).\n */\nexport function buildDeployHtml(sections: Section3[], theme?: string, customColors?: CustomColors): string {\n  const sorted = [...sections].sort((a, b) => a.order - b.order);\n  const body = sorted.map((s) => s.html).join(\"\\n\");\n\n  const isCustom = theme === \"custom\" && customColors;\n  const dataTheme = theme && theme !== \"default\" && !isCustom ? ` data-theme=\"${theme}\"` : \"\";\n\n  // For custom theme, build CSS from the custom colors directly (no data-theme needed, inject as :root)\n  const { css: baseCss, tailwindConfig } = isCustom\n    ? (() => {\n        const ct = buildCustomTheme(customColors);\n        const vars = Object.entries(ct.colors).map(([k, v]) => `  --color-${k}: ${v};`).join(\"\\n\");\n        return { css: `:root {\\n${vars}\\n}`, tailwindConfig: buildSingleThemeCss(\"default\").tailwindConfig };\n      })()\n    : buildSingleThemeCss(theme || \"default\");\n\n  return `<!DOCTYPE html>\n<html lang=\"es\"${dataTheme}>\n<head>\n<meta charset=\"UTF-8\"/>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"/>\n<title>Landing Page</title>\n<script src=\"https://cdn.tailwindcss.com\"></script>\n<script>tailwind.config = ${tailwindConfig}</script>\n<style>\n${baseCss}\n*{margin:0;padding:0;box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{font-family:system-ui,-apple-system,sans-serif;background-color:var(--color-surface);color:var(--color-on-surface)}\nsection{max-width:80rem;margin-left:auto;margin-right:auto}\n</style>\n</head>\n<body class=\"bg-surface text-on-surface\">\n${body}\n</body>\n</html>`;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-S7YLW6ZU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/generate.ts"],"sourcesContent":["import { streamText } from \"ai\";\nimport { createAnthropic } from \"@ai-sdk/anthropic\";\nimport { nanoid } from \"nanoid\";\nimport { findImageSlots } from \"./images/enrichImages\";\nimport { searchImage } from \"./images/pexels\";\nimport { generateImage } from \"./images/dalleImages\";\nimport type { Section3 } from \"./types\";\n\nasync function resolveModel(opts: { openaiApiKey?: string; anthropicApiKey?: string; modelId?: string; defaultOpenai: string; defaultAnthropic: string }) {\n  const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;\n  if (openaiKey) {\n    const { createOpenAI } = await import(\"@ai-sdk/openai\");\n    const openai = createOpenAI({ apiKey: openaiKey });\n    return openai(opts.modelId || opts.defaultOpenai);\n  }\n  const anthropic = opts.anthropicApiKey\n    ? createAnthropic({ apiKey: opts.anthropicApiKey })\n    : createAnthropic();\n  return anthropic(opts.modelId || opts.defaultAnthropic);\n}\n\nexport const SYSTEM_PROMPT = `You are a world-class web designer who creates AWARD-WINNING landing pages. Your designs win Awwwards, FWA, and CSS Design Awards. You think in terms of visual hierarchy, whitespace, and emotional impact.\n\nRULES:\n- Each section is a complete <section> tag with Tailwind CSS classes\n- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import, no @tailwind directives)\n- NO JavaScript, only HTML+Tailwind\n- Each section must be independent and self-contained\n- Responsive: mobile-first with sm/md/lg/xl breakpoints\n- All text content in Spanish unless the prompt specifies otherwise\n- Use real-looking content (not Lorem ipsum) — make it specific to the prompt\n\nIMAGES — CRITICAL:\n- Use <img data-image-query=\"english search query\" alt=\"description\" class=\"...\"/>\n- NEVER include a src attribute — the system auto-replaces data-image-query with a real image URL\n- For avatar-like elements, use colored divs with initials instead of img tags (e.g. <div class=\"w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold\">JD</div>)\n\nCOLOR SYSTEM — CRITICAL (READ CAREFULLY):\n- Use semantic color classes: bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary, bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted, bg-secondary, text-secondary, bg-accent, text-accent\n- NEVER use hardcoded Tailwind color classes: NO bg-gray-*, bg-black, bg-white, bg-indigo-*, bg-blue-*, bg-purple-*, text-gray-*, text-black, text-white, etc.\n- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.\n- ALL backgrounds MUST use: bg-primary, bg-primary-dark, bg-surface, bg-surface-alt\n- ALL text MUST use: text-on-surface, text-on-surface-muted, text-on-primary, text-primary, text-accent\n- CONTRAST RULE: on bg-primary or bg-primary-dark → use text-on-primary. On bg-surface or bg-surface-alt → use text-on-surface or text-on-surface-muted. NEVER put text-on-surface on bg-primary or vice versa. text-accent is decorative — use sparingly on bg-surface/bg-surface-alt only.\n- For gradients: from-primary to-primary-dark, from-surface to-surface-alt\n- For hover: hover:bg-primary-dark, hover:bg-primary-light\n\nDESIGN PHILOSOPHY — what separates good from GREAT:\n- WHITESPACE is your best friend. Generous padding (py-24, py-32, px-8). Let elements breathe.\n- CONTRAST: mix dark sections with light ones. Alternate bg-primary and bg-surface sections.\n- TYPOGRAPHY: use extreme size differences for hierarchy (text-7xl headline next to text-sm label)\n- DEPTH: overlapping elements, negative margins (-mt-12), z-index layering, shadows\n- ASYMMETRY: avoid centering everything. Use grid-cols-5 with col-span-3 + col-span-2. Offset elements.\n- TEXTURE: use subtle patterns, gradients, border treatments, rounded-3xl mixed with sharp edges\n- Each section should have a COMPLETELY DIFFERENT layout from the others\n\nHERO SECTION — your masterpiece:\n- Bento-grid or asymmetric layout, NOT a generic centered hero\n- Large headline block + smaller stat/metric cards in a grid\n- Real social proof: \"2,847+ users\", avatar stack (colored divs with initials), star ratings\n- Bold oversized headline (text-6xl/7xl font-black leading-none)\n- Tag/label above headline (uppercase, tracking-wider, text-xs)\n- 2 CTAs: primary (large, with → arrow) + secondary (ghost/outlined)\n- Real image via data-image-query\n- Min height: min-h-[90vh] with generous padding\n\nTAILWIND v3 NOTES:\n- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)\n- Borders: border + border-gray-200 for visible borders`;\n\nexport const PROMPT_SUFFIX = `\n\nOUTPUT FORMAT: NDJSON — one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Short Label\", \"html\": \"<section>...</section>\"}\n\nGenerate 7-9 sections. Always start with Hero and end with Footer.\nIMPORTANT: Make each section VISUALLY UNIQUE — different layouts, different background colors, different grid structures.\nThink like a premium design agency creating a $50K landing page.\nNO generic Bootstrap layouts. Use creative grids, bento layouts, overlapping elements, asymmetric columns.`;\n\n/**\n * Extract complete JSON objects from accumulated text using brace-depth tracking.\n */\nexport function extractJsonObjects(text: string): [any[], string] {\n  const objects: any[] = [];\n  let remaining = text;\n\n  while (remaining.length > 0) {\n    remaining = remaining.trimStart();\n    if (!remaining.startsWith(\"{\")) {\n      const nextBrace = remaining.indexOf(\"{\");\n      if (nextBrace === -1) break;\n      remaining = remaining.slice(nextBrace);\n      continue;\n    }\n\n    let depth = 0;\n    let inString = false;\n    let escape = false;\n    let end = -1;\n\n    for (let i = 0; i < remaining.length; i++) {\n      const ch = remaining[i];\n      if (escape) { escape = false; continue; }\n      if (ch === \"\\\\\") { escape = true; continue; }\n      if (ch === '\"') { inString = !inString; continue; }\n      if (inString) continue;\n      if (ch === \"{\") depth++;\n      if (ch === \"}\") { depth--; if (depth === 0) { end = i; break; } }\n    }\n\n    if (end === -1) break;\n\n    const candidate = remaining.slice(0, end + 1);\n    remaining = remaining.slice(end + 1);\n\n    try {\n      objects.push(JSON.parse(candidate));\n    } catch {\n      // malformed, skip\n    }\n  }\n\n  return [objects, remaining];\n}\n\nexport interface GenerateOptions {\n  /** Anthropic API key. Falls back to ANTHROPIC_API_KEY env var */\n  anthropicApiKey?: string;\n  /** OpenAI API key. If provided, uses GPT-4o instead of Claude */\n  openaiApiKey?: string;\n  /** Landing page description prompt */\n  prompt: string;\n  /** Reference image (base64 data URI) for vision-based generation */\n  referenceImage?: string;\n  /** Extra instructions appended to the prompt */\n  extraInstructions?: string;\n  /** Custom system prompt (overrides default SYSTEM_PROMPT) */\n  systemPrompt?: string;\n  /** Model ID (default: gpt-4o for OpenAI, claude-sonnet-4-6 for Anthropic) */\n  model?: string;\n  /** Pexels API key for image enrichment. Falls back to PEXELS_API_KEY env var */\n  pexelsApiKey?: string;\n  /** Called when a new section is parsed from the stream */\n  onSection?: (section: Section3) => void;\n  /** Called when a section's images are enriched */\n  onImageUpdate?: (sectionId: string, html: string) => void;\n  /** Called when generation is complete */\n  onDone?: (sections: Section3[]) => void;\n  /** Called on error */\n  onError?: (error: Error) => void;\n}\n\n/**\n * Generate a landing page with streaming AI + image enrichment.\n * Returns all generated sections when complete.\n */\nexport async function generateLanding(options: GenerateOptions): Promise<Section3[]> {\n  const {\n    anthropicApiKey,\n    openaiApiKey: _openaiApiKey,\n    prompt,\n    referenceImage,\n    extraInstructions,\n    systemPrompt = SYSTEM_PROMPT,\n    model: modelId,\n    pexelsApiKey,\n    onSection,\n    onImageUpdate,\n    onDone,\n    onError,\n  } = options;\n\n  const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;\n  const model = await resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai: \"gpt-4o\", defaultAnthropic: \"claude-sonnet-4-6\" });\n\n  // Build prompt content (supports multimodal with reference image)\n  const extra = extraInstructions ? `\\nAdditional instructions: ${extraInstructions}` : \"\";\n  const content: any[] = [];\n  if (referenceImage) {\n    content.push({ type: \"image\", image: referenceImage });\n    content.push({\n      type: \"text\",\n      text: `Generate a landing page inspired by this reference image for: ${prompt}${extra}${PROMPT_SUFFIX}`,\n    });\n  } else {\n    content.push({\n      type: \"text\",\n      text: `Generate a landing page for: ${prompt}${extra}${PROMPT_SUFFIX}`,\n    });\n  }\n\n  const result = streamText({\n    model,\n    system: systemPrompt,\n    messages: [{ role: \"user\", content }],\n  });\n\n  const allSections: Section3[] = [];\n  const imagePromises: Promise<void>[] = [];\n  let sectionOrder = 0;\n  let buffer = \"\";\n\n  try {\n    for await (const chunk of result.textStream) {\n      buffer += chunk;\n\n      const [objects, remaining] = extractJsonObjects(buffer);\n      buffer = remaining;\n\n      for (const obj of objects) {\n        if (!obj.html || !obj.label) continue;\n\n        const section: Section3 = {\n          id: nanoid(8),\n          order: sectionOrder++,\n          html: obj.html,\n          label: obj.label,\n        };\n\n        allSections.push(section);\n        onSection?.(section);\n\n        // Enrich images (DALL-E if openaiApiKey, otherwise Pexels)\n        const slots = findImageSlots(section.html);\n        if (slots.length > 0) {\n          const sectionRef = section;\n          const slotsSnapshot = slots.map((s) => ({ ...s }));\n          imagePromises.push(\n            (async () => {\n              const results = await Promise.allSettled(\n                slotsSnapshot.map(async (slot) => {\n                  let url: string | null = null;\n                  // Pexels first (permanent URLs), DALL-E disabled (temporary URLs expire ~2hrs)\n                  const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);\n                  url = img?.url || null;\n                  url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;\n                  return { slot, url };\n                })\n              );\n              let html = sectionRef.html;\n              for (const r of results) {\n                if (r.status === \"fulfilled\" && r.value) {\n                  const { slot, url } = r.value;\n                  const replacement = slot.replaceStr.replace(\"{url}\", url);\n                  html = html.replaceAll(slot.searchStr, replacement);\n                }\n              }\n              if (html !== sectionRef.html) {\n                sectionRef.html = html;\n                onImageUpdate?.(sectionRef.id, html);\n              }\n            })()\n          );\n        }\n      }\n    }\n\n    // Parse remaining buffer\n    if (buffer.trim()) {\n      let cleaned = buffer.trim();\n      if (cleaned.startsWith(\"```\")) {\n        cleaned = cleaned\n          .replace(/^```(?:json)?\\s*/, \"\")\n          .replace(/\\s*```$/, \"\");\n      }\n      const [lastObjects] = extractJsonObjects(cleaned);\n      for (const obj of lastObjects) {\n        if (!obj.html || !obj.label) continue;\n        const section: Section3 = {\n          id: nanoid(8),\n          order: sectionOrder++,\n          html: obj.html,\n          label: obj.label,\n        };\n        allSections.push(section);\n        onSection?.(section);\n      }\n    }\n\n    // Wait for image enrichment\n    await Promise.allSettled(imagePromises);\n\n    onDone?.(allSections);\n    return allSections;\n  } catch (err: any) {\n    const error = err instanceof Error ? err : new Error(err?.message || \"Generation failed\");\n    onError?.(error);\n    throw error;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-WMQETMD6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Canvas.tsx","../src/components/SectionList.tsx","../src/components/FloatingToolbar.tsx","../src/components/CodeEditor.tsx","../src/components/ViewportToggle.tsx"],"sourcesContent":["import React, { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from \"react\";\nimport type { Section3, IframeMessage } from \"../types\";\nimport { buildPreviewHtml } from \"../buildHtml\";\n\nexport interface CanvasHandle {\n  scrollToSection: (id: string) => void;\n  postMessage: (msg: Record<string, unknown>) => void;\n}\n\ninterface CanvasProps {\n  sections: Section3[];\n  theme?: string;\n  onMessage: (msg: IframeMessage) => void;\n  iframeRectRef: React.MutableRefObject<DOMRect | null>;\n}\n\nexport const Canvas = forwardRef<CanvasHandle, CanvasProps>(function Canvas({ sections, theme, onMessage, iframeRectRef }, ref) {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const [ready, setReady] = useState(false);\n  // Track what the iframe currently has so we can diff\n  const knownSectionsRef = useRef<Map<string, string>>(new Map());\n  const initializedRef = useRef(false);\n\n  // Post a message to the iframe\n  const postToIframe = useCallback((msg: Record<string, unknown>) => {\n    iframeRef.current?.contentWindow?.postMessage(msg, \"*\");\n  }, []);\n\n  useImperativeHandle(ref, () => ({\n    scrollToSection(id: string) {\n      postToIframe({ action: \"scroll-to-section\", id });\n    },\n    postMessage(msg: Record<string, unknown>) {\n      postToIframe(msg);\n    },\n  }), [postToIframe]);\n\n  // Initial write: set up the iframe shell (empty body + script + tailwind)\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (!iframe || initializedRef.current) return;\n    initializedRef.current = true;\n\n    const html = buildPreviewHtml([]);\n    const doc = iframe.contentDocument;\n    if (!doc) return;\n    doc.open();\n    doc.write(html);\n    doc.close();\n  }, []);\n\n  // Handle \"ready\" from iframe — then inject current sections\n  const handleReady = useCallback(() => {\n    setReady(true);\n    // Inject all current sections\n    const sorted = [...sections].sort((a, b) => a.order - b.order);\n    for (const s of sorted) {\n      postToIframe({ action: \"add-section\", id: s.id, html: s.html });\n      knownSectionsRef.current.set(s.id, s.html);\n    }\n  }, [sections, postToIframe]);\n\n  // Incremental diff: detect added/updated/removed sections\n  useEffect(() => {\n    if (!ready) return;\n\n    const known = knownSectionsRef.current;\n    const currentIds = new Set(sections.map((s) => s.id));\n    const sorted = [...sections].sort((a, b) => a.order - b.order);\n\n    // Add new sections\n    for (const s of sorted) {\n      if (!known.has(s.id)) {\n        postToIframe({ action: \"add-section\", id: s.id, html: s.html });\n        known.set(s.id, s.html);\n      } else if (known.get(s.id) !== s.html) {\n        // Update changed sections\n        postToIframe({ action: \"update-section\", id: s.id, html: s.html });\n        known.set(s.id, s.html);\n      }\n    }\n\n    // Remove deleted sections\n    for (const id of known.keys()) {\n      if (!currentIds.has(id)) {\n        postToIframe({ action: \"remove-section\", id });\n        known.delete(id);\n      }\n    }\n\n    // Reorder if needed\n    const knownOrder = [...known.keys()];\n    const desiredOrder = sorted.map((s) => s.id);\n    if (JSON.stringify(knownOrder) !== JSON.stringify(desiredOrder)) {\n      postToIframe({ action: \"reorder-sections\", order: desiredOrder });\n    }\n  }, [sections, ready, postToIframe]);\n\n  // Send theme changes to iframe\n  useEffect(() => {\n    if (!ready) return;\n    postToIframe({ action: \"set-theme\", theme: theme || \"default\" });\n  }, [theme, ready, postToIframe]);\n\n  // Update iframe rect on resize/scroll\n  const updateRect = useCallback(() => {\n    if (iframeRef.current) {\n      iframeRectRef.current = iframeRef.current.getBoundingClientRect();\n    }\n  }, [iframeRectRef]);\n\n  useEffect(() => {\n    updateRect();\n    window.addEventListener(\"resize\", updateRect);\n    window.addEventListener(\"scroll\", updateRect, true);\n    return () => {\n      window.removeEventListener(\"resize\", updateRect);\n      window.removeEventListener(\"scroll\", updateRect, true);\n    };\n  }, [updateRect]);\n\n  // Listen for postMessage from iframe\n  useEffect(() => {\n    function handleMessage(e: MessageEvent) {\n      const data = e.data;\n      if (!data || typeof data.type !== \"string\") return;\n\n      if (data.type === \"ready\") {\n        handleReady();\n        return;\n      }\n\n      if (\n        [\"element-selected\", \"text-edited\", \"element-deselected\", \"section-html-updated\"].includes(\n          data.type\n        )\n      ) {\n        updateRect();\n        onMessage(data as IframeMessage);\n      }\n    }\n    window.addEventListener(\"message\", handleMessage);\n    return () => window.removeEventListener(\"message\", handleMessage);\n  }, [onMessage, updateRect, handleReady]);\n\n  return (\n    <div className=\"flex-1 bg-gray-100 rounded-xl overflow-hidden border-2 border-gray-200 relative\">\n      <iframe\n        ref={iframeRef}\n        title=\"Landing preview\"\n        className=\"w-full h-full border-0\"\n        sandbox=\"allow-scripts allow-same-origin\"\n        style={{ minHeight: \"calc(100vh - 120px)\" }}\n      />\n      {!ready && sections.length > 0 && (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-white/80\">\n          <span className=\"w-6 h-6 border-2 border-gray-400 border-t-gray-800 rounded-full animate-spin\" />\n        </div>\n      )}\n    </div>\n  );\n});\n","import React, { useRef, useState } from \"react\";\nimport type { Section3 } from \"../types\";\nimport { LANDING_THEMES, type CustomColors } from \"../themes\";\n\ninterface SectionListProps {\n  sections: Section3[];\n  selectedSectionId: string | null;\n  theme: string;\n  customColors?: CustomColors;\n  onThemeChange: (themeId: string) => void;\n  onCustomColorChange?: (colors: Partial<CustomColors>) => void;\n  onSelect: (id: string) => void;\n  onOpenCode: (id: string) => void;\n  onReorder: (fromIndex: number, toIndex: number) => void;\n  onDelete: (id: string) => void;\n  onRename: (id: string, label: string) => void;\n  onAdd: () => void;\n}\n\nexport function SectionList({\n  sections,\n  selectedSectionId,\n  theme,\n  customColors,\n  onThemeChange,\n  onCustomColorChange,\n  onSelect,\n  onOpenCode,\n  onReorder,\n  onDelete,\n  onRename,\n  onAdd,\n}: SectionListProps) {\n  const sorted = [...sections].sort((a, b) => a.order - b.order);\n  const colorInputRef = useRef<HTMLInputElement>(null);\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [editingLabel, setEditingLabel] = useState(\"\");\n\n  return (\n    <div className=\"w-56 shrink-0 flex flex-col bg-white border-r-2 border-gray-200 overflow-y-auto\">\n      <div className=\"p-3 border-b border-gray-200\">\n        <h3 className=\"text-xs font-black uppercase tracking-wider text-gray-500 mb-2\">\n          Tema\n        </h3>\n        <div className=\"flex gap-1.5 flex-wrap\">\n          {LANDING_THEMES.map((t) => (\n            <button\n              key={t.id}\n              onClick={() => onThemeChange(t.id)}\n              title={t.label}\n              className={`w-6 h-6 rounded-full border-2 transition-all ${\n                theme === t.id\n                  ? \"border-black scale-110 shadow-sm\"\n                  : \"border-gray-300 hover:border-gray-400\"\n              }`}\n              style={{ backgroundColor: t.colors.primary }}\n            />\n          ))}\n          {/* Custom color picker */}\n          <button\n            onClick={() => colorInputRef.current?.click()}\n            title=\"Color personalizado\"\n            className={`w-6 h-6 rounded-full border-2 transition-all relative overflow-hidden ${\n              theme === \"custom\"\n                ? \"border-black scale-110 shadow-sm\"\n                : \"border-gray-300 hover:border-gray-400\"\n            }`}\n            style={theme === \"custom\" && customColors?.primary ? { backgroundColor: customColors.primary } : undefined}\n          >\n            {theme !== \"custom\" && (\n              <span className=\"absolute inset-0 rounded-full\"\n                style={{ background: \"conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444)\" }}\n              />\n            )}\n          </button>\n          <input\n            ref={colorInputRef}\n            type=\"color\"\n            value={customColors?.primary || \"#6366f1\"}\n            onChange={(e) => onCustomColorChange?.({ primary: e.target.value })}\n            className=\"sr-only\"\n          />\n        </div>\n        {/* Multi-color pickers when custom theme is active */}\n        {theme === \"custom\" && (\n          <div className=\"flex items-center gap-2 mt-2\">\n            {([\n              { key: \"primary\" as const, label: \"Pri\", fallback: \"#6366f1\" },\n              { key: \"secondary\" as const, label: \"Sec\", fallback: \"#f59e0b\" },\n              { key: \"accent\" as const, label: \"Acc\", fallback: \"#06b6d4\" },\n              { key: \"surface\" as const, label: \"Sur\", fallback: \"#ffffff\" },\n            ]).map((c) => (\n              <label key={c.key} className=\"flex flex-col items-center gap-0.5 cursor-pointer\">\n                <input\n                  type=\"color\"\n                  value={customColors?.[c.key] || c.fallback}\n                  onChange={(e) => onCustomColorChange?.({ [c.key]: e.target.value })}\n                  className=\"w-5 h-5 rounded border border-gray-300 cursor-pointer p-0 [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded\"\n                />\n                <span className=\"text-[9px] font-bold text-gray-400 uppercase\">{c.label}</span>\n              </label>\n            ))}\n          </div>\n        )}\n      </div>\n      <div className=\"p-3 border-b border-gray-200\">\n        <h3 className=\"text-xs font-black uppercase tracking-wider text-gray-500\">\n          Secciones\n        </h3>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto py-1\">\n        {sorted.map((section, i) => (\n          <div\n            key={section.id}\n            onClick={() => onSelect(section.id)}\n            className={`group flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors ${\n              selectedSectionId === section.id\n                ? \"bg-blue-50 border-l-2 border-blue-500\"\n                : \"hover:bg-gray-50 border-l-2 border-transparent\"\n            }`}\n          >\n            <span className=\"text-[10px] font-mono text-gray-400 w-4 text-right\">\n              {i + 1}\n            </span>\n            {editingId === section.id ? (\n              <input\n                type=\"text\"\n                value={editingLabel}\n                onChange={(e) => setEditingLabel(e.target.value)}\n                onBlur={() => {\n                  if (editingLabel.trim()) onRename(section.id, editingLabel.trim());\n                  setEditingId(null);\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") {\n                    if (editingLabel.trim()) onRename(section.id, editingLabel.trim());\n                    setEditingId(null);\n                  } else if (e.key === \"Escape\") {\n                    setEditingId(null);\n                  }\n                }}\n                className=\"text-sm font-bold flex-1 min-w-0 bg-transparent border-b border-blue-500 outline-none px-0 py-0\"\n                autoFocus\n                onClick={(e) => e.stopPropagation()}\n              />\n            ) : (\n              <span\n                className=\"text-sm font-bold truncate flex-1\"\n                onDoubleClick={(e) => {\n                  e.stopPropagation();\n                  setEditingId(section.id);\n                  setEditingLabel(section.label);\n                }}\n              >\n                {section.label}\n              </span>\n            )}\n            <div className=\"opacity-0 group-hover:opacity-100 flex gap-0.5\">\n              <button\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onOpenCode(section.id);\n                }}\n                className=\"w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200\"\n                title=\"Editar HTML\"\n              >\n                <svg className=\"w-3 h-3\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z\"/></svg>\n              </button>\n              {i > 0 && (\n                <button\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onReorder(i, i - 1);\n                  }}\n                  className=\"w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 text-[10px]\"\n                >\n                  ↑\n                </button>\n              )}\n              {i < sorted.length - 1 && (\n                <button\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onReorder(i, i + 1);\n                  }}\n                  className=\"w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-gray-700 hover:bg-gray-200 text-[10px]\"\n                >\n                  ↓\n                </button>\n              )}\n              <button\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onDelete(section.id);\n                }}\n                className=\"w-5 h-5 flex items-center justify-center rounded text-gray-400 hover:text-red-600 hover:bg-red-50 text-[10px]\"\n                title=\"Eliminar seccion\"\n              >\n                ✕\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"p-3 border-t border-gray-200\">\n        <button\n          onClick={onAdd}\n          className=\"w-full text-center py-2 text-sm font-bold text-blue-600 hover:bg-blue-50 rounded-lg transition-colors\"\n        >\n          + Agregar seccion\n        </button>\n      </div>\n    </div>\n  );\n}\n","import React, { useState, useRef, useEffect } from \"react\";\nimport { HiSparkles } from \"react-icons/hi2\";\nimport type { IframeMessage } from \"../types\";\n\nconst STYLE_PRESETS = [\n  { label: \"Minimal\", icon: \"○\", instruction: \"Redisena esta seccion con estetica minimal: mucho espacio en blanco, tipografia limpia, sin bordes ni sombras innecesarias. Manten el mismo contenido.\" },\n  { label: \"Cards\", icon: \"▦\", instruction: \"Redisena esta seccion usando layout de cards en grid: cada item en su propia card con padding, sombra sutil y bordes redondeados. Manten el mismo contenido.\" },\n  { label: \"Bold\", icon: \"■\", instruction: \"Redisena esta seccion con estilo bold/brutalist: tipografia grande y gruesa, colores de alto contraste, bordes solidos, sin gradientes. Manten el mismo contenido.\" },\n  { label: \"Glass\", icon: \"◇\", instruction: \"Redisena esta seccion con glassmorphism: fondos translucidos con backdrop-blur, bordes sutiles blancos, sombras suaves. Usa un fondo oscuro o con gradiente detras. Manten el mismo contenido.\" },\n  { label: \"Dark\", icon: \"●\", instruction: \"Redisena esta seccion con fondo oscuro (#111 o similar), texto claro, acentos de color vibrantes. Manten el mismo contenido.\" },\n];\n\ninterface FloatingToolbarProps {\n  selection: IframeMessage | null;\n  iframeRect: DOMRect | null;\n  onRefine: (instruction: string, referenceImage?: string) => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n  onDelete: () => void;\n  onClose: () => void;\n  onViewCode: () => void;\n  onUpdateAttribute?: (sectionId: string, elementPath: string, attr: string, value: string) => void;\n  isRefining: boolean;\n}\n\nexport function FloatingToolbar({\n  selection,\n  iframeRect,\n  onRefine,\n  onMoveUp,\n  onMoveDown,\n  onDelete,\n  onClose,\n  onViewCode,\n  onUpdateAttribute,\n  isRefining,\n}: FloatingToolbarProps) {\n  const [prompt, setPrompt] = useState(\"\");\n  const [showCode, setShowCode] = useState(false);\n  const [refImage, setRefImage] = useState<string | null>(null);\n  const [refImageName, setRefImageName] = useState<string | null>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const toolbarRef = useRef<HTMLDivElement>(null);\n\n  // Local attr editing state\n  const [imgSrc, setImgSrc] = useState(\"\");\n  const [imgAlt, setImgAlt] = useState(\"\");\n  const [linkHref, setLinkHref] = useState(\"\");\n\n  useEffect(() => {\n    setPrompt(\"\");\n    setShowCode(false);\n    setRefImage(null);\n    setRefImageName(null);\n  }, [selection?.sectionId]);\n\n  // Sync attr inputs when selection changes\n  useEffect(() => {\n    if (selection?.attrs) {\n      setImgSrc(selection.attrs.src || \"\");\n      setImgAlt(selection.attrs.alt || \"\");\n      setLinkHref(selection.attrs.href || \"\");\n    }\n  }, [selection?.attrs, selection?.elementPath]);\n\n  // ESC closes toolbar\n  useEffect(() => {\n    function handleKey(e: KeyboardEvent) {\n      if (e.key === \"Escape\") onClose();\n    }\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [onClose]);\n\n  if (!selection || !selection.rect || !iframeRect) return null;\n\n  const toolbarWidth = toolbarRef.current?.offsetWidth || 480;\n  const toolbarHeight = toolbarRef.current?.offsetHeight || 60;\n  const top = iframeRect.top + selection.rect.top + selection.rect.height + 8;\n  const left = iframeRect.left + selection.rect.left;\n  const clampedLeft = Math.max(8, Math.min(left, window.innerWidth - toolbarWidth - 8));\n  const showAbove = top + toolbarHeight + 8 > window.innerHeight;\n  const finalTop = Math.max(8, showAbove\n    ? iframeRect.top + selection.rect.top - toolbarHeight - 8\n    : top);\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault();\n    if (!prompt.trim() || isRefining) return;\n    onRefine(prompt.trim(), refImage || undefined);\n    setPrompt(\"\");\n    setRefImage(null);\n    setRefImageName(null);\n  }\n\n  function handleFileSelect(e: React.ChangeEvent<HTMLInputElement>) {\n    const file = e.target.files?.[0];\n    if (!file) return;\n    setRefImageName(file.name);\n    const reader = new FileReader();\n    reader.onload = () => {\n      setRefImage(reader.result as string);\n    };\n    reader.readAsDataURL(file);\n    e.target.value = \"\";\n  }\n\n  function handleSetAttr(attr: string, value: string) {\n    if (!selection?.sectionId || !selection?.elementPath || !onUpdateAttribute) return;\n    onUpdateAttribute(selection.sectionId, selection.elementPath, attr, value);\n  }\n\n  const isImg = selection.tagName === \"IMG\";\n  const isLink = selection.tagName === \"A\";\n  const hasAttrEditing = (isImg || isLink) && onUpdateAttribute;\n\n  return (\n    <div\n      ref={toolbarRef}\n      className=\"fixed z-50 flex flex-col gap-1.5 bg-gray-900 text-white rounded-xl shadow-2xl px-2 py-1.5 border border-gray-700\"\n      style={{ top: finalTop, left: clampedLeft, maxWidth: \"min(480px, calc(100vw - 16px))\" }}\n    >\n      {/* Main row */}\n      <div className=\"flex items-center gap-1.5\">\n        {/* Tag badge */}\n        {selection.tagName && (\n          <span className=\"px-2 py-0.5 rounded-md bg-blue-600 text-[10px] font-mono font-bold uppercase tracking-wider shrink-0\">\n            {selection.tagName.toLowerCase()}\n          </span>\n        )}\n\n        {/* AI prompt input */}\n        <form onSubmit={handleSubmit} className=\"flex items-center gap-1 flex-1\">\n          <input\n            ref={inputRef}\n            type=\"text\"\n            value={prompt}\n            onChange={(e) => setPrompt(e.target.value)}\n            placeholder={refImage ? \"Instruccion + imagen...\" : \"Editar con AI...\"}\n            disabled={isRefining}\n            className=\"bg-transparent text-sm text-white placeholder:text-gray-500 outline-none w-40 md:w-56 px-2 py-1\"\n          />\n          {/* Image attach button */}\n          <button\n            type=\"button\"\n            onClick={() => fileInputRef.current?.click()}\n            disabled={isRefining}\n            className={`w-7 h-7 flex items-center justify-center rounded-lg transition-colors shrink-0 ${\n              refImage\n                ? \"bg-blue-600 text-white\"\n                : \"hover:bg-gray-800 text-gray-400 hover:text-white\"\n            }`}\n            title={refImage ? `Imagen: ${refImageName}` : \"Adjuntar imagen de referencia\"}\n          >\n            <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path fillRule=\"evenodd\" d=\"M1 5.25A2.25 2.25 0 013.25 3h13.5A2.25 2.25 0 0119 5.25v9.5A2.25 2.25 0 0116.75 17H3.25A2.25 2.25 0 011 14.75v-9.5zm1.5 5.81V14.75c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75v-2.06l-2.22-2.22a.75.75 0 00-1.06 0L8.56 16.1l-3.28-3.28a.75.75 0 00-1.06 0l-1.72 1.72zm12-4.06a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z\" clipRule=\"evenodd\"/>\n            </svg>\n          </button>\n          <input\n            ref={fileInputRef}\n            type=\"file\"\n            accept=\"image/*\"\n            onChange={handleFileSelect}\n            className=\"hidden\"\n          />\n          <button\n            type=\"submit\"\n            disabled={!prompt.trim() || isRefining}\n            className=\"w-7 h-7 flex items-center justify-center rounded-lg bg-blue-500 hover:bg-blue-600 disabled:opacity-30 transition-colors\"\n          >\n            {isRefining ? (\n              <span className=\"w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin\" />\n            ) : (\n              <HiSparkles className=\"w-3.5 h-3.5\" />\n            )}\n          </button>\n        </form>\n\n        {/* Variante button */}\n        <div className=\"w-px h-5 bg-gray-700\" />\n        <button\n          onClick={() => {\n            const tag = selection.tagName?.toLowerCase();\n            const text = selection.text?.substring(0, 80);\n            const prompt = selection.isSectionRoot\n              ? \"Genera una variante completamente diferente de esta seccion. Manten el mismo contenido/informacion pero cambia radicalmente el layout, la estructura visual, y el estilo. Sorprendeme con un diseno creativo e inesperado.\"\n              : `Modifica SOLO el elemento <${tag}> que contiene \"${text}\". Genera una variante visual diferente de ESE elemento (diferente estilo, layout, tipografia). NO modifiques ningun otro elemento de la seccion.`;\n            onRefine(prompt, refImage || undefined);\n          }}\n          disabled={isRefining}\n          className=\"px-2.5 py-1 text-[11px] font-bold rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-30 transition-colors whitespace-nowrap shrink-0\"\n          title=\"Generar variante\"\n        >\n          ✦ Variante\n        </button>\n\n        {/* Section-level actions (move/delete) */}\n        {selection.isSectionRoot && (\n          <>\n            <div className=\"w-px h-5 bg-gray-700\" />\n            <button\n              onClick={onMoveUp}\n              className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs\"\n              title=\"Mover arriba\"\n            >\n              ↑\n            </button>\n            <button\n              onClick={onMoveDown}\n              className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs\"\n              title=\"Mover abajo\"\n            >\n              ↓\n            </button>\n          </>\n        )}\n\n        {/* View code */}\n        <button\n          onClick={onViewCode}\n          className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 transition-colors text-xs font-mono text-gray-400 hover:text-white\"\n          title=\"Ver codigo\"\n        >\n          &lt;/&gt;\n        </button>\n\n        {selection.isSectionRoot && (\n          <>\n            <div className=\"w-px h-5 bg-gray-700\" />\n            <button\n              onClick={onDelete}\n              className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-red-900/50 text-red-400 transition-colors\"\n              title=\"Eliminar seccion\"\n            >\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <polyline points=\"3 6 5 6 21 6\" />\n                <path d=\"M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2\" />\n              </svg>\n            </button>\n          </>\n        )}\n\n        {/* Close button */}\n        <div className=\"w-px h-5 bg-gray-700\" />\n        <button\n          onClick={onClose}\n          className=\"w-7 h-7 flex items-center justify-center rounded-lg hover:bg-gray-800 text-gray-400 hover:text-white transition-colors\"\n          title=\"Cerrar (ESC)\"\n        >\n          ✕\n        </button>\n      </div>\n\n      {/* Reference image preview */}\n      {refImage && (\n        <div className=\"flex items-center gap-2 pt-0.5 pb-0.5 border-t border-gray-700/50\">\n          <img src={refImage} alt=\"Referencia\" className=\"w-10 h-10 rounded object-cover border border-gray-600\" />\n          <span className=\"text-[10px] text-gray-400 truncate flex-1\">{refImageName}</span>\n          <button\n            onClick={() => { setRefImage(null); setRefImageName(null); }}\n            className=\"text-[10px] text-gray-500 hover:text-white px-1\"\n          >\n            ✕\n          </button>\n        </div>\n      )}\n\n      {/* Style presets row — only for section roots */}\n      {selection.isSectionRoot && (\n        <div className=\"flex items-center gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50\">\n          <span className=\"text-[10px] text-gray-500 uppercase tracking-wider mr-1 shrink-0\">Estilo</span>\n          {STYLE_PRESETS.map((preset) => (\n            <button\n              key={preset.label}\n              onClick={() => onRefine(preset.instruction)}\n              disabled={isRefining}\n              className=\"px-2 py-0.5 text-[11px] font-medium rounded-md bg-gray-800 hover:bg-gray-700 disabled:opacity-30 transition-colors whitespace-nowrap\"\n              title={preset.label}\n            >\n              <span className=\"mr-1\">{preset.icon}</span>\n              {preset.label}\n            </button>\n          ))}\n        </div>\n      )}\n\n      {/* Image attr editing */}\n      {isImg && hasAttrEditing && (\n        <div className=\"flex flex-col gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50\">\n          <div className=\"flex items-center gap-1\">\n            <span className=\"text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0\">src</span>\n            <input\n              type=\"text\"\n              value={imgSrc}\n              onChange={(e) => setImgSrc(e.target.value)}\n              onKeyDown={(e) => { if (e.key === \"Enter\") handleSetAttr(\"src\", imgSrc); }}\n              className=\"flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0\"\n              placeholder=\"URL de imagen...\"\n            />\n            <button\n              onClick={() => handleSetAttr(\"src\", imgSrc)}\n              className=\"px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0\"\n            >\n              Set\n            </button>\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <span className=\"text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0\">alt</span>\n            <input\n              type=\"text\"\n              value={imgAlt}\n              onChange={(e) => setImgAlt(e.target.value)}\n              onKeyDown={(e) => { if (e.key === \"Enter\") handleSetAttr(\"alt\", imgAlt); }}\n              className=\"flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0\"\n              placeholder=\"Alt text...\"\n            />\n            <button\n              onClick={() => handleSetAttr(\"alt\", imgAlt)}\n              className=\"px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0\"\n            >\n              Set\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Link attr editing */}\n      {isLink && hasAttrEditing && (\n        <div className=\"flex items-center gap-1 pt-0.5 pb-0.5 border-t border-gray-700/50\">\n          <span className=\"text-[10px] text-gray-500 uppercase tracking-wider w-8 shrink-0\">href</span>\n          <input\n            type=\"text\"\n            value={linkHref}\n            onChange={(e) => setLinkHref(e.target.value)}\n            onKeyDown={(e) => { if (e.key === \"Enter\") handleSetAttr(\"href\", linkHref); }}\n            className=\"flex-1 bg-gray-800 text-xs text-white rounded px-2 py-1 outline-none min-w-0\"\n            placeholder=\"URL del enlace...\"\n          />\n          <button\n            onClick={() => handleSetAttr(\"href\", linkHref)}\n            className=\"px-2 py-1 text-[10px] font-bold rounded bg-blue-500 hover:bg-blue-600 transition-colors shrink-0\"\n          >\n            Set\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n","import React, { useEffect, useRef, useCallback, useState } from \"react\";\nimport { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, Decoration, type DecorationSet } from \"@codemirror/view\";\nimport { EditorState, StateField, StateEffect } from \"@codemirror/state\";\nimport { html } from \"@codemirror/lang-html\";\nimport { oneDark } from \"@codemirror/theme-one-dark\";\nimport { defaultKeymap, indentWithTab, history, historyKeymap } from \"@codemirror/commands\";\nimport { searchKeymap, highlightSelectionMatches } from \"@codemirror/search\";\nimport { bracketMatching, foldGutter, foldKeymap } from \"@codemirror/language\";\nimport { closeBrackets, closeBracketsKeymap } from \"@codemirror/autocomplete\";\n\ninterface CodeEditorProps {\n  code: string;\n  label: string;\n  scrollToText?: string;\n  onSave: (code: string) => void;\n  onClose: () => void;\n}\n\nfunction formatHtml(html: string): string {\n  let result = html.replace(/>\\s*</g, \">\\n<\");\n  const lines = result.split(\"\\n\");\n  const output: string[] = [];\n  let indent = 0;\n  for (const raw of lines) {\n    const line = raw.trim();\n    if (!line) continue;\n    const isClosing = /^<\\//.test(line);\n    const isSelfClosing =\n      /\\/>$/.test(line) ||\n      /^<(img|br|hr|input|meta|link|col|area|base|embed|source|track|wbr)\\b/i.test(line);\n    const hasInlineClose = /^<[^/][^>]*>.*<\\//.test(line);\n    if (isClosing) indent = Math.max(0, indent - 1);\n    output.push(\"  \".repeat(indent) + line);\n    if (!isClosing && !isSelfClosing && !hasInlineClose && /^<[a-zA-Z]/.test(line)) {\n      indent++;\n    }\n  }\n  return output.join(\"\\n\");\n}\n\n// Flash highlight effect for scroll-to-code\nconst flashLineEffect = StateEffect.define<{ from: number; to: number }>();\nconst clearFlashEffect = StateEffect.define<null>();\n\nconst flashLineDeco = Decoration.line({ class: \"cm-flash-line\" });\n\nconst flashLineField = StateField.define<DecorationSet>({\n  create: () => Decoration.none,\n  update(decos, tr) {\n    for (const e of tr.effects) {\n      if (e.is(flashLineEffect)) {\n        return Decoration.set([flashLineDeco.range(e.value.from)]);\n      }\n      if (e.is(clearFlashEffect)) {\n        return Decoration.none;\n      }\n    }\n    return decos;\n  },\n  provide: (f) => EditorView.decorations.from(f),\n});\n\n\nfunction scrollToTarget(view: EditorView, target?: string) {\n  if (!target) return;\n  const docText = view.state.doc.toString();\n  const normalized = target.replace(/\"/g, \"'\");\n  let idx = docText.indexOf(normalized);\n  if (idx === -1) idx = docText.indexOf(target);\n\n  // If exact match fails, extract tag+class and search line by line\n  if (idx === -1) {\n    const tagMatch = target.match(/^<(\\w+)/);\n    const classMatch = target.match(/class=[\"']([^\"']*?)[\"']/);\n    if (tagMatch) {\n      const searchTag = tagMatch[0];\n      const searchClass = classMatch ? classMatch[1].split(\" \")[0] : null;\n      for (let i = 1; i <= view.state.doc.lines; i++) {\n        const line = view.state.doc.line(i);\n        if (line.text.includes(searchTag) && (!searchClass || line.text.includes(searchClass))) {\n          idx = line.from;\n          break;\n        }\n      }\n    }\n  }\n\n  if (idx !== -1) {\n    const line = view.state.doc.lineAt(idx);\n    view.dispatch({\n      selection: { anchor: line.from },\n      effects: [\n        EditorView.scrollIntoView(line.from, { y: \"center\" }),\n        flashLineEffect.of({ from: line.from, to: line.to }),\n      ],\n    });\n    // Clear flash after 2s\n    setTimeout(() => {\n      view.dispatch({ effects: clearFlashEffect.of(null) });\n    }, 2000);\n  }\n}\n\nexport function CodeEditor({ code, label, scrollToText, onSave, onClose }: CodeEditorProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const viewRef = useRef<EditorView | null>(null);\n  const [stats, setStats] = useState({ lines: 0, kb: \"0.0\" });\n\n  const onSaveRef = useRef(onSave);\n  const onCloseRef = useRef(onClose);\n  onSaveRef.current = onSave;\n  onCloseRef.current = onClose;\n\n  const updateStats = useCallback((doc: { length: number; lines: number }) => {\n    setStats({ lines: doc.lines, kb: (doc.length / 1024).toFixed(1) });\n  }, []);\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const initialDoc = code.includes(\"\\n\") ? code : formatHtml(code);\n\n    const state = EditorState.create({\n      doc: initialDoc,\n      extensions: [\n        lineNumbers(),\n        highlightActiveLine(),\n        highlightActiveLineGutter(),\n        bracketMatching(),\n        closeBrackets(),\n        foldGutter(),\n        highlightSelectionMatches(),\n        html(),\n        oneDark,\n        history(),\n        EditorView.lineWrapping,\n        keymap.of([\n          { key: \"Mod-s\", run: (v) => { onSaveRef.current(v.state.doc.toString()); return true; } },\n          { key: \"Escape\", run: () => { onCloseRef.current(); return true; } },\n          indentWithTab,\n          ...closeBracketsKeymap,\n          ...searchKeymap,\n          ...foldKeymap,\n          ...historyKeymap,\n          ...defaultKeymap,\n        ]),\n        EditorView.updateListener.of((update) => {\n          if (update.docChanged) {\n            updateStats(update.state.doc);\n          }\n        }),\n        flashLineField,\n        EditorView.theme({\n          \"&\": { height: \"100%\", fontSize: \"13px\" },\n          \".cm-scroller\": { overflow: \"auto\", fontFamily: \"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace\" },\n          \".cm-content\": { padding: \"8px 0\" },\n          \".cm-gutters\": { borderRight: \"1px solid #21262d\" },\n          \".cm-flash-line\": { backgroundColor: \"rgba(250, 204, 21, 0.25)\", transition: \"background-color 2s ease-out\" },\n        }),\n      ],\n    });\n\n    const view = new EditorView({ state, parent: containerRef.current });\n    viewRef.current = view;\n\n    updateStats(view.state.doc);\n    scrollToTarget(view, scrollToText);\n    view.focus();\n\n    return () => { view.destroy(); };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Re-scroll when scrollToText changes while editor is already open\n  useEffect(() => {\n    const view = viewRef.current;\n    if (!view || !scrollToText) return;\n    scrollToTarget(view, scrollToText);\n  }, [scrollToText]);\n\n  function handleFormat() {\n    const view = viewRef.current;\n    if (!view) return;\n    const formatted = formatHtml(view.state.doc.toString());\n    view.dispatch({\n      changes: { from: 0, to: view.state.doc.length, insert: formatted },\n    });\n  }\n\n  function handleSave() {\n    const view = viewRef.current;\n    if (!view) return;\n    onSave(view.state.doc.toString());\n  }\n\n  return (\n    <div className=\"flex flex-col h-full bg-[#0d1117]\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between px-4 py-3 border-b border-gray-800 shrink-0\">\n        <div className=\"flex items-center gap-3\">\n          <span className=\"px-2 py-0.5 rounded bg-orange-600/20 text-orange-400 text-[10px] font-mono font-bold uppercase tracking-wider\">\n            HTML\n          </span>\n          <span className=\"text-sm font-bold text-gray-300\">{label}</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <button\n            onClick={handleFormat}\n            className=\"px-3 py-1.5 text-xs font-bold rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors\"\n          >\n            Formatear\n          </button>\n          <button\n            onClick={handleSave}\n            className=\"px-4 py-1.5 text-xs font-bold rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors\"\n          >\n            Guardar\n          </button>\n          <button\n            onClick={onClose}\n            className=\"px-3 py-1.5 text-xs font-bold rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors\"\n          >\n            Cerrar\n          </button>\n        </div>\n      </div>\n\n      {/* Editor */}\n      <div ref={containerRef} className=\"flex-1 overflow-hidden\" />\n\n      {/* Footer */}\n      <div className=\"flex items-center justify-between px-4 py-1.5 border-t border-gray-800 text-[10px] text-gray-500 font-mono shrink-0\">\n        <span>{stats.lines} lineas</span>\n        <span>Tab = indentar &middot; Cmd+S = guardar &middot; Esc = cerrar</span>\n        <span>{stats.kb} KB</span>\n      </div>\n    </div>\n  );\n}\n","import React from \"react\";\n\nexport type Viewport = \"desktop\" | \"tablet\" | \"mobile\";\n\nconst VIEWPORTS: { id: Viewport; label: string; icon: React.ReactElement }[] = [\n  {\n    id: \"desktop\",\n    label: \"Desktop\",\n    icon: (\n      <svg className=\"w-4 h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M2 4.25A2.25 2.25 0 014.25 2h11.5A2.25 2.25 0 0118 4.25v8.5A2.25 2.25 0 0115.75 15h-3.105a3.501 3.501 0 001.1 1.677A.75.75 0 0113.26 18H6.74a.75.75 0 01-.484-1.323A3.501 3.501 0 007.355 15H4.25A2.25 2.25 0 012 12.75v-8.5zm1.5 0a.75.75 0 01.75-.75h11.5a.75.75 0 01.75.75v8.5a.75.75 0 01-.75.75H4.25a.75.75 0 01-.75-.75v-8.5z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n    ),\n  },\n  {\n    id: \"tablet\",\n    label: \"Tablet\",\n    icon: (\n      <svg className=\"w-4 h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M5 1a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V3a2 2 0 00-2-2H5zm0 1.5h10a.5.5 0 01.5.5v14a.5.5 0 01-.5.5H5a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5zm4 14a1 1 0 112 0 1 1 0 01-2 0z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n    ),\n  },\n  {\n    id: \"mobile\",\n    label: \"Mobile\",\n    icon: (\n      <svg className=\"w-4 h-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fillRule=\"evenodd\"\n          d=\"M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm0 1.5h8a.5.5 0 01.5.5v12a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V4a.5.5 0 01.5-.5zm3 13a1 1 0 112 0 1 1 0 01-2 0z\"\n          clipRule=\"evenodd\"\n        />\n      </svg>\n    ),\n  },\n];\n\nexport function ViewportToggle({\n  value,\n  onChange,\n  activeClass = \"bg-blue-100 text-blue-700\",\n  inactiveClass = \"text-gray-400 hover:text-gray-600 hover:bg-gray-100\",\n}: {\n  value: Viewport;\n  onChange: (v: Viewport) => void;\n  activeClass?: string;\n  inactiveClass?: string;\n}) {\n  return (\n    <div className=\"flex items-center justify-center gap-1 py-2 shrink-0 bg-gray-50 border-b border-gray-200\">\n      {VIEWPORTS.map((v) => (\n        <button\n          key={v.id}\n          type=\"button\"\n          onClick={() => onChange(v.id)}\n          title={v.label}\n          className={`p-1.5 rounded-lg transition-colors ${\n            value === v.id ? activeClass : inactiveClass\n          }`}\n        >\n          {v.icon}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAgB,QAAQ,WAAW,aAAa,UAAU,YAAY,2BAA2B;AAkJ7F,SACE,KADF;AAlIG,IAAM,SAAS,WAAsC,SAASA,QAAO,EAAE,UAAU,OAAO,WAAW,cAAc,GAAG,KAAK;AAC9H,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AAExC,QAAM,mBAAmB,OAA4B,oBAAI,IAAI,CAAC;AAC9D,QAAM,iBAAiB,OAAO,KAAK;AAGnC,QAAM,eAAe,YAAY,CAAC,QAAiC;AACjE,cAAU,SAAS,eAAe,YAAY,KAAK,GAAG;AAAA,EACxD,GAAG,CAAC,CAAC;AAEL,sBAAoB,KAAK,OAAO;AAAA,IAC9B,gBAAgB,IAAY;AAC1B,mBAAa,EAAE,QAAQ,qBAAqB,GAAG,CAAC;AAAA,IAClD;AAAA,IACA,YAAY,KAA8B;AACxC,mBAAa,GAAG;AAAA,IAClB;AAAA,EACF,IAAI,CAAC,YAAY,CAAC;AAGlB,YAAU,MAAM;AACd,UAAM,SAAS,UAAU;AACzB,QAAI,CAAC,UAAU,eAAe,QAAS;AACvC,mBAAe,UAAU;AAEzB,UAAMC,QAAO,iBAAiB,CAAC,CAAC;AAChC,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,IAAK;AACV,QAAI,KAAK;AACT,QAAI,MAAMA,KAAI;AACd,QAAI,MAAM;AAAA,EACZ,GAAG,CAAC,CAAC;AAGL,QAAM,cAAc,YAAY,MAAM;AACpC,aAAS,IAAI;AAEb,UAAM,SAAS,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAC7D,eAAW,KAAK,QAAQ;AACtB,mBAAa,EAAE,QAAQ,eAAe,IAAI,EAAE,IAAI,MAAM,EAAE,KAAK,CAAC;AAC9D,uBAAiB,QAAQ,IAAI,EAAE,IAAI,EAAE,IAAI;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,UAAU,YAAY,CAAC;AAG3B,YAAU,MAAM;AACd,QAAI,CAAC,MAAO;AAEZ,UAAM,QAAQ,iBAAiB;AAC/B,UAAM,aAAa,IAAI,IAAI,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AACpD,UAAM,SAAS,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAG7D,eAAW,KAAK,QAAQ;AACtB,UAAI,CAAC,MAAM,IAAI,EAAE,EAAE,GAAG;AACpB,qBAAa,EAAE,QAAQ,eAAe,IAAI,EAAE,IAAI,MAAM,EAAE,KAAK,CAAC;AAC9D,cAAM,IAAI,EAAE,IAAI,EAAE,IAAI;AAAA,MACxB,WAAW,MAAM,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM;AAErC,qBAAa,EAAE,QAAQ,kBAAkB,IAAI,EAAE,IAAI,MAAM,EAAE,KAAK,CAAC;AACjE,cAAM,IAAI,EAAE,IAAI,EAAE,IAAI;AAAA,MACxB;AAAA,IACF;AAGA,eAAW,MAAM,MAAM,KAAK,GAAG;AAC7B,UAAI,CAAC,WAAW,IAAI,EAAE,GAAG;AACvB,qBAAa,EAAE,QAAQ,kBAAkB,GAAG,CAAC;AAC7C,cAAM,OAAO,EAAE;AAAA,MACjB;AAAA,IACF;AAGA,UAAM,aAAa,CAAC,GAAG,MAAM,KAAK,CAAC;AACnC,UAAM,eAAe,OAAO,IAAI,CAAC,MAAM,EAAE,EAAE;AAC3C,QAAI,KAAK,UAAU,UAAU,MAAM,KAAK,UAAU,YAAY,GAAG;AAC/D,mBAAa,EAAE,QAAQ,oBAAoB,OAAO,aAAa,CAAC;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,UAAU,OAAO,YAAY,CAAC;AAGlC,YAAU,MAAM;AACd,QAAI,CAAC,MAAO;AACZ,iBAAa,EAAE,QAAQ,aAAa,OAAO,SAAS,UAAU,CAAC;AAAA,EACjE,GAAG,CAAC,OAAO,OAAO,YAAY,CAAC;AAG/B,QAAM,aAAa,YAAY,MAAM;AACnC,QAAI,UAAU,SAAS;AACrB,oBAAc,UAAU,UAAU,QAAQ,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAElB,YAAU,MAAM;AACd,eAAW;AACX,WAAO,iBAAiB,UAAU,UAAU;AAC5C,WAAO,iBAAiB,UAAU,YAAY,IAAI;AAClD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,UAAU;AAC/C,aAAO,oBAAoB,UAAU,YAAY,IAAI;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAGf,YAAU,MAAM;AACd,aAAS,cAAc,GAAiB;AACtC,YAAM,OAAO,EAAE;AACf,UAAI,CAAC,QAAQ,OAAO,KAAK,SAAS,SAAU;AAE5C,UAAI,KAAK,SAAS,SAAS;AACzB,oBAAY;AACZ;AAAA,MACF;AAEA,UACE,CAAC,oBAAoB,eAAe,sBAAsB,sBAAsB,EAAE;AAAA,QAChF,KAAK;AAAA,MACP,GACA;AACA,mBAAW;AACX,kBAAU,IAAqB;AAAA,MACjC;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,WAAW,YAAY,WAAW,CAAC;AAEvC,SACE,qBAAC,SAAI,WAAU,mFACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,OAAO,EAAE,WAAW,sBAAsB;AAAA;AAAA,IAC5C;AAAA,IACC,CAAC,SAAS,SAAS,SAAS,KAC3B,oBAAC,SAAI,WAAU,iEACb,8BAAC,UAAK,WAAU,gFAA+E,GACjG;AAAA,KAEJ;AAEJ,CAAC;;;ACjKD,SAAgB,UAAAC,SAAQ,YAAAC,iBAAgB;AAyChC,gBAAAC,MAGA,QAAAC,aAHA;AAtBD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,SAAS,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAC7D,QAAM,gBAAgBC,QAAyB,IAAI;AACnD,QAAM,CAAC,WAAW,YAAY,IAAIC,UAAwB,IAAI;AAC9D,QAAM,CAAC,cAAc,eAAe,IAAIA,UAAS,EAAE;AAEnD,SACE,gBAAAF,MAAC,SAAI,WAAU,mFACb;AAAA,oBAAAA,MAAC,SAAI,WAAU,gCACb;AAAA,sBAAAD,KAAC,QAAG,WAAU,kEAAiE,kBAE/E;AAAA,MACA,gBAAAC,MAAC,SAAI,WAAU,0BACZ;AAAA,uBAAe,IAAI,CAAC,MACnB,gBAAAD;AAAA,UAAC;AAAA;AAAA,YAEC,SAAS,MAAM,cAAc,EAAE,EAAE;AAAA,YACjC,OAAO,EAAE;AAAA,YACT,WAAW,gDACT,UAAU,EAAE,KACR,qCACA,uCACN;AAAA,YACA,OAAO,EAAE,iBAAiB,EAAE,OAAO,QAAQ;AAAA;AAAA,UARtC,EAAE;AAAA,QAST,CACD;AAAA,QAED,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,MAAM,cAAc,SAAS,MAAM;AAAA,YAC5C,OAAM;AAAA,YACN,WAAW,yEACT,UAAU,WACN,qCACA,uCACN;AAAA,YACA,OAAO,UAAU,YAAY,cAAc,UAAU,EAAE,iBAAiB,aAAa,QAAQ,IAAI;AAAA,YAEhG,oBAAU,YACT,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBAAK,WAAU;AAAA,gBACd,OAAO,EAAE,YAAY,uEAAuE;AAAA;AAAA,YAC9F;AAAA;AAAA,QAEJ;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,OAAO,cAAc,WAAW;AAAA,YAChC,UAAU,CAAC,MAAM,sBAAsB,EAAE,SAAS,EAAE,OAAO,MAAM,CAAC;AAAA,YAClE,WAAU;AAAA;AAAA,QACZ;AAAA,SACF;AAAA,MAEC,UAAU,YACT,gBAAAA,KAAC,SAAI,WAAU,gCACX;AAAA,QACA,EAAE,KAAK,WAAoB,OAAO,OAAO,UAAU,UAAU;AAAA,QAC7D,EAAE,KAAK,aAAsB,OAAO,OAAO,UAAU,UAAU;AAAA,QAC/D,EAAE,KAAK,UAAmB,OAAO,OAAO,UAAU,UAAU;AAAA,QAC5D,EAAE,KAAK,WAAoB,OAAO,OAAO,UAAU,UAAU;AAAA,MAC/D,EAAG,IAAI,CAAC,MACN,gBAAAC,MAAC,WAAkB,WAAU,qDAC3B;AAAA,wBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,eAAe,EAAE,GAAG,KAAK,EAAE;AAAA,YAClC,UAAU,CAAC,MAAM,sBAAsB,EAAE,CAAC,EAAE,GAAG,GAAG,EAAE,OAAO,MAAM,CAAC;AAAA,YAClE,WAAU;AAAA;AAAA,QACZ;AAAA,QACA,gBAAAA,KAAC,UAAK,WAAU,gDAAgD,YAAE,OAAM;AAAA,WAP9D,EAAE,GAQd,CACD,GACH;AAAA,OAEJ;AAAA,IACA,gBAAAA,KAAC,SAAI,WAAU,gCACb,0BAAAA,KAAC,QAAG,WAAU,6DAA4D,uBAE1E,GACF;AAAA,IAEA,gBAAAA,KAAC,SAAI,WAAU,+BACZ,iBAAO,IAAI,CAAC,SAAS,MACpB,gBAAAC;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,MAAM,SAAS,QAAQ,EAAE;AAAA,QAClC,WAAW,4EACT,sBAAsB,QAAQ,KAC1B,0CACA,gDACN;AAAA,QAEA;AAAA,0BAAAD,KAAC,UAAK,WAAU,sDACb,cAAI,GACP;AAAA,UACC,cAAc,QAAQ,KACrB,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,gBAAgB,EAAE,OAAO,KAAK;AAAA,cAC/C,QAAQ,MAAM;AACZ,oBAAI,aAAa,KAAK,EAAG,UAAS,QAAQ,IAAI,aAAa,KAAK,CAAC;AACjE,6BAAa,IAAI;AAAA,cACnB;AAAA,cACA,WAAW,CAAC,MAAM;AAChB,oBAAI,EAAE,QAAQ,SAAS;AACrB,sBAAI,aAAa,KAAK,EAAG,UAAS,QAAQ,IAAI,aAAa,KAAK,CAAC;AACjE,+BAAa,IAAI;AAAA,gBACnB,WAAW,EAAE,QAAQ,UAAU;AAC7B,+BAAa,IAAI;AAAA,gBACnB;AAAA,cACF;AAAA,cACA,WAAU;AAAA,cACV,WAAS;AAAA,cACT,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA;AAAA,UACpC,IAEA,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAe,CAAC,MAAM;AACpB,kBAAE,gBAAgB;AAClB,6BAAa,QAAQ,EAAE;AACvB,gCAAgB,QAAQ,KAAK;AAAA,cAC/B;AAAA,cAEC,kBAAQ;AAAA;AAAA,UACX;AAAA,UAEF,gBAAAC,MAAC,SAAI,WAAU,kDACb;AAAA,4BAAAD;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAgB;AAClB,6BAAW,QAAQ,EAAE;AAAA,gBACvB;AAAA,gBACA,WAAU;AAAA,gBACV,OAAM;AAAA,gBAEN,0BAAAA,KAAC,SAAI,WAAU,WAAU,SAAQ,aAAY,MAAK,gBAAe,0BAAAA,KAAC,UAAK,GAAE,8NAA4N,GAAE;AAAA;AAAA,YACzS;AAAA,YACC,IAAI,KACH,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAgB;AAClB,4BAAU,GAAG,IAAI,CAAC;AAAA,gBACpB;AAAA,gBACA,WAAU;AAAA,gBACX;AAAA;AAAA,YAED;AAAA,YAED,IAAI,OAAO,SAAS,KACnB,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAgB;AAClB,4BAAU,GAAG,IAAI,CAAC;AAAA,gBACpB;AAAA,gBACA,WAAU;AAAA,gBACX;AAAA;AAAA,YAED;AAAA,YAEF,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAgB;AAClB,2BAAS,QAAQ,EAAE;AAAA,gBACrB;AAAA,gBACA,WAAU;AAAA,gBACV,OAAM;AAAA,gBACP;AAAA;AAAA,YAED;AAAA,aACF;AAAA;AAAA;AAAA,MAvFK,QAAQ;AAAA,IAwFf,CACD,GACH;AAAA,IAEA,gBAAAA,KAAC,SAAI,WAAU,gCACb,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAU;AAAA,QACX;AAAA;AAAA,IAED,GACF;AAAA,KACF;AAEJ;;;ACxNA,SAAgB,YAAAI,WAAU,UAAAC,SAAQ,aAAAC,kBAAiB;AACnD,SAAS,kBAAkB;AA8HjB,SAwEA,UAxEA,OAAAC,MAMF,QAAAC,aANE;AA3HV,IAAM,gBAAgB;AAAA,EACpB,EAAE,OAAO,WAAW,MAAM,UAAK,aAAa,yJAAyJ;AAAA,EACrM,EAAE,OAAO,SAAS,MAAM,UAAK,aAAa,+JAA+J;AAAA,EACzM,EAAE,OAAO,QAAQ,MAAM,UAAK,aAAa,qKAAqK;AAAA,EAC9M,EAAE,OAAO,SAAS,MAAM,UAAK,aAAa,iMAAiM;AAAA,EAC3O,EAAE,OAAO,QAAQ,MAAM,UAAK,aAAa,+HAA+H;AAC1K;AAeO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,CAAC,QAAQ,SAAS,IAAIJ,UAAS,EAAE;AACvC,QAAM,CAAC,UAAU,WAAW,IAAIA,UAAS,KAAK;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAIA,UAAwB,IAAI;AAC5D,QAAM,CAAC,cAAc,eAAe,IAAIA,UAAwB,IAAI;AACpE,QAAM,WAAWC,QAAyB,IAAI;AAC9C,QAAM,eAAeA,QAAyB,IAAI;AAClD,QAAM,aAAaA,QAAuB,IAAI;AAG9C,QAAM,CAAC,QAAQ,SAAS,IAAID,UAAS,EAAE;AACvC,QAAM,CAAC,QAAQ,SAAS,IAAIA,UAAS,EAAE;AACvC,QAAM,CAAC,UAAU,WAAW,IAAIA,UAAS,EAAE;AAE3C,EAAAE,WAAU,MAAM;AACd,cAAU,EAAE;AACZ,gBAAY,KAAK;AACjB,gBAAY,IAAI;AAChB,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,WAAW,SAAS,CAAC;AAGzB,EAAAA,WAAU,MAAM;AACd,QAAI,WAAW,OAAO;AACpB,gBAAU,UAAU,MAAM,OAAO,EAAE;AACnC,gBAAU,UAAU,MAAM,OAAO,EAAE;AACnC,kBAAY,UAAU,MAAM,QAAQ,EAAE;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,WAAW,OAAO,WAAW,WAAW,CAAC;AAG7C,EAAAA,WAAU,MAAM;AACd,aAAS,UAAU,GAAkB;AACnC,UAAI,EAAE,QAAQ,SAAU,SAAQ;AAAA,IAClC;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,CAAC,aAAa,CAAC,UAAU,QAAQ,CAAC,WAAY,QAAO;AAEzD,QAAM,eAAe,WAAW,SAAS,eAAe;AACxD,QAAM,gBAAgB,WAAW,SAAS,gBAAgB;AAC1D,QAAM,MAAM,WAAW,MAAM,UAAU,KAAK,MAAM,UAAU,KAAK,SAAS;AAC1E,QAAM,OAAO,WAAW,OAAO,UAAU,KAAK;AAC9C,QAAM,cAAc,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,OAAO,aAAa,eAAe,CAAC,CAAC;AACpF,QAAM,YAAY,MAAM,gBAAgB,IAAI,OAAO;AACnD,QAAM,WAAW,KAAK,IAAI,GAAG,YACzB,WAAW,MAAM,UAAU,KAAK,MAAM,gBAAgB,IACtD,GAAG;AAEP,WAAS,aAAa,GAAoB;AACxC,MAAE,eAAe;AACjB,QAAI,CAAC,OAAO,KAAK,KAAK,WAAY;AAClC,aAAS,OAAO,KAAK,GAAG,YAAY,MAAS;AAC7C,cAAU,EAAE;AACZ,gBAAY,IAAI;AAChB,oBAAgB,IAAI;AAAA,EACtB;AAEA,WAAS,iBAAiB,GAAwC;AAChE,UAAM,OAAO,EAAE,OAAO,QAAQ,CAAC;AAC/B,QAAI,CAAC,KAAM;AACX,oBAAgB,KAAK,IAAI;AACzB,UAAM,SAAS,IAAI,WAAW;AAC9B,WAAO,SAAS,MAAM;AACpB,kBAAY,OAAO,MAAgB;AAAA,IACrC;AACA,WAAO,cAAc,IAAI;AACzB,MAAE,OAAO,QAAQ;AAAA,EACnB;AAEA,WAAS,cAAc,MAAc,OAAe;AAClD,QAAI,CAAC,WAAW,aAAa,CAAC,WAAW,eAAe,CAAC,kBAAmB;AAC5E,sBAAkB,UAAU,WAAW,UAAU,aAAa,MAAM,KAAK;AAAA,EAC3E;AAEA,QAAM,QAAQ,UAAU,YAAY;AACpC,QAAM,SAAS,UAAU,YAAY;AACrC,QAAM,kBAAkB,SAAS,WAAW;AAE5C,SACE,gBAAAE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO,EAAE,KAAK,UAAU,MAAM,aAAa,UAAU,iCAAiC;AAAA,MAGtF;AAAA,wBAAAA,MAAC,SAAI,WAAU,6BAEZ;AAAA,oBAAU,WACT,gBAAAD,KAAC,UAAK,WAAU,wGACb,oBAAU,QAAQ,YAAY,GACjC;AAAA,UAIF,gBAAAC,MAAC,UAAK,UAAU,cAAc,WAAU,kCACtC;AAAA,4BAAAD;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,gBACzC,aAAa,WAAW,4BAA4B;AAAA,gBACpD,UAAU;AAAA,gBACV,WAAU;AAAA;AAAA,YACZ;AAAA,YAEA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,aAAa,SAAS,MAAM;AAAA,gBAC3C,UAAU;AAAA,gBACV,WAAW,kFACT,WACI,2BACA,kDACN;AAAA,gBACA,OAAO,WAAW,WAAW,YAAY,KAAK;AAAA,gBAE9C,0BAAAA,KAAC,SAAI,WAAU,eAAc,SAAQ,aAAY,MAAK,gBACpD,0BAAAA,KAAC,UAAK,UAAS,WAAU,GAAE,oTAAmT,UAAS,WAAS,GAClW;AAAA;AAAA,YACF;AAAA,YACA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,UAAU;AAAA,gBACV,WAAU;AAAA;AAAA,YACZ;AAAA,YACA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAU,CAAC,OAAO,KAAK,KAAK;AAAA,gBAC5B,WAAU;AAAA,gBAET,uBACC,gBAAAA,KAAC,UAAK,WAAU,iFAAgF,IAEhG,gBAAAA,KAAC,cAAW,WAAU,eAAc;AAAA;AAAA,YAExC;AAAA,aACF;AAAA,UAGA,gBAAAA,KAAC,SAAI,WAAU,wBAAuB;AAAA,UACtC,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM;AACb,sBAAM,MAAM,UAAU,SAAS,YAAY;AAC3C,sBAAM,OAAO,UAAU,MAAM,UAAU,GAAG,EAAE;AAC5C,sBAAME,UAAS,UAAU,gBACrB,+NACA,8BAA8B,GAAG,mBAAmB,IAAI;AAC5D,yBAASA,SAAQ,YAAY,MAAS;AAAA,cACxC;AAAA,cACA,UAAU;AAAA,cACV,WAAU;AAAA,cACV,OAAM;AAAA,cACP;AAAA;AAAA,UAED;AAAA,UAGC,UAAU,iBACT,gBAAAD,MAAA,YACE;AAAA,4BAAAD,KAAC,SAAI,WAAU,wBAAuB;AAAA,YACtC,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAM;AAAA,gBACP;AAAA;AAAA,YAED;AAAA,YACA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAM;AAAA,gBACP;AAAA;AAAA,YAED;AAAA,aACF;AAAA,UAIF,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cACV,OAAM;AAAA,cACP;AAAA;AAAA,UAED;AAAA,UAEC,UAAU,iBACT,gBAAAC,MAAA,YACE;AAAA,4BAAAD,KAAC,SAAI,WAAU,wBAAuB;AAAA,YACtC,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAM;AAAA,gBAEN,0BAAAC,MAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SACrI;AAAA,kCAAAD,KAAC,cAAS,QAAO,gBAAe;AAAA,kBAChC,gBAAAA,KAAC,UAAK,GAAE,4EAA2E;AAAA,mBACrF;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAIF,gBAAAA,KAAC,SAAI,WAAU,wBAAuB;AAAA,UACtC,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cACV,OAAM;AAAA,cACP;AAAA;AAAA,UAED;AAAA,WACF;AAAA,QAGC,YACC,gBAAAC,MAAC,SAAI,WAAU,qEACb;AAAA,0BAAAD,KAAC,SAAI,KAAK,UAAU,KAAI,cAAa,WAAU,yDAAwD;AAAA,UACvG,gBAAAA,KAAC,UAAK,WAAU,6CAA6C,wBAAa;AAAA,UAC1E,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM;AAAE,4BAAY,IAAI;AAAG,gCAAgB,IAAI;AAAA,cAAG;AAAA,cAC3D,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA,WACF;AAAA,QAID,UAAU,iBACT,gBAAAC,MAAC,SAAI,WAAU,qEACb;AAAA,0BAAAD,KAAC,UAAK,WAAU,oEAAmE,oBAAM;AAAA,UACxF,cAAc,IAAI,CAAC,WAClB,gBAAAC;AAAA,YAAC;AAAA;AAAA,cAEC,SAAS,MAAM,SAAS,OAAO,WAAW;AAAA,cAC1C,UAAU;AAAA,cACV,WAAU;AAAA,cACV,OAAO,OAAO;AAAA,cAEd;AAAA,gCAAAD,KAAC,UAAK,WAAU,QAAQ,iBAAO,MAAK;AAAA,gBACnC,OAAO;AAAA;AAAA;AAAA,YAPH,OAAO;AAAA,UAQd,CACD;AAAA,WACH;AAAA,QAID,SAAS,kBACR,gBAAAC,MAAC,SAAI,WAAU,iEACb;AAAA,0BAAAA,MAAC,SAAI,WAAU,2BACb;AAAA,4BAAAD,KAAC,UAAK,WAAU,mEAAkE,iBAAG;AAAA,YACrF,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,gBACzC,WAAW,CAAC,MAAM;AAAE,sBAAI,EAAE,QAAQ,QAAS,eAAc,OAAO,MAAM;AAAA,gBAAG;AAAA,gBACzE,WAAU;AAAA,gBACV,aAAY;AAAA;AAAA,YACd;AAAA,YACA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,MAAM,cAAc,OAAO,MAAM;AAAA,gBAC1C,WAAU;AAAA,gBACX;AAAA;AAAA,YAED;AAAA,aACF;AAAA,UACA,gBAAAC,MAAC,SAAI,WAAU,2BACb;AAAA,4BAAAD,KAAC,UAAK,WAAU,mEAAkE,iBAAG;AAAA,YACrF,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,gBACzC,WAAW,CAAC,MAAM;AAAE,sBAAI,EAAE,QAAQ,QAAS,eAAc,OAAO,MAAM;AAAA,gBAAG;AAAA,gBACzE,WAAU;AAAA,gBACV,aAAY;AAAA;AAAA,YACd;AAAA,YACA,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,MAAM,cAAc,OAAO,MAAM;AAAA,gBAC1C,WAAU;AAAA,gBACX;AAAA;AAAA,YAED;AAAA,aACF;AAAA,WACF;AAAA,QAID,UAAU,kBACT,gBAAAC,MAAC,SAAI,WAAU,qEACb;AAAA,0BAAAD,KAAC,UAAK,WAAU,mEAAkE,kBAAI;AAAA,UACtF,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,KAAK;AAAA,cAC3C,WAAW,CAAC,MAAM;AAAE,oBAAI,EAAE,QAAQ,QAAS,eAAc,QAAQ,QAAQ;AAAA,cAAG;AAAA,cAC5E,WAAU;AAAA,cACV,aAAY;AAAA;AAAA,UACd;AAAA,UACA,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,cAAc,QAAQ,QAAQ;AAAA,cAC7C,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;;;AC7VA,SAAgB,aAAAG,YAAW,UAAAC,SAAQ,eAAAC,cAAa,YAAAC,iBAAgB;AAChE,SAAS,YAAY,QAAQ,aAAa,qBAAqB,2BAA2B,kBAAsC;AAChI,SAAS,aAAa,YAAY,mBAAmB;AACrD,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,eAAe,eAAe,SAAS,qBAAqB;AACrE,SAAS,cAAc,iCAAiC;AACxD,SAAS,iBAAiB,YAAY,kBAAkB;AACxD,SAAS,eAAe,2BAA2B;AA+L3C,SACE,OAAAC,MADF,QAAAC,aAAA;AArLR,SAAS,WAAWC,OAAsB;AACxC,MAAI,SAASA,MAAK,QAAQ,UAAU,MAAM;AAC1C,QAAM,QAAQ,OAAO,MAAM,IAAI;AAC/B,QAAM,SAAmB,CAAC;AAC1B,MAAI,SAAS;AACb,aAAW,OAAO,OAAO;AACvB,UAAM,OAAO,IAAI,KAAK;AACtB,QAAI,CAAC,KAAM;AACX,UAAM,YAAY,OAAO,KAAK,IAAI;AAClC,UAAM,gBACJ,OAAO,KAAK,IAAI,KAChB,wEAAwE,KAAK,IAAI;AACnF,UAAM,iBAAiB,oBAAoB,KAAK,IAAI;AACpD,QAAI,UAAW,UAAS,KAAK,IAAI,GAAG,SAAS,CAAC;AAC9C,WAAO,KAAK,KAAK,OAAO,MAAM,IAAI,IAAI;AACtC,QAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,kBAAkB,aAAa,KAAK,IAAI,GAAG;AAC9E;AAAA,IACF;AAAA,EACF;AACA,SAAO,OAAO,KAAK,IAAI;AACzB;AAGA,IAAM,kBAAkB,YAAY,OAAqC;AACzE,IAAM,mBAAmB,YAAY,OAAa;AAElD,IAAM,gBAAgB,WAAW,KAAK,EAAE,OAAO,gBAAgB,CAAC;AAEhE,IAAM,iBAAiB,WAAW,OAAsB;AAAA,EACtD,QAAQ,MAAM,WAAW;AAAA,EACzB,OAAO,OAAO,IAAI;AAChB,eAAW,KAAK,GAAG,SAAS;AAC1B,UAAI,EAAE,GAAG,eAAe,GAAG;AACzB,eAAO,WAAW,IAAI,CAAC,cAAc,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;AAAA,MAC3D;AACA,UAAI,EAAE,GAAG,gBAAgB,GAAG;AAC1B,eAAO,WAAW;AAAA,MACpB;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC,MAAM,WAAW,YAAY,KAAK,CAAC;AAC/C,CAAC;AAGD,SAAS,eAAe,MAAkB,QAAiB;AACzD,MAAI,CAAC,OAAQ;AACb,QAAM,UAAU,KAAK,MAAM,IAAI,SAAS;AACxC,QAAM,aAAa,OAAO,QAAQ,MAAM,GAAG;AAC3C,MAAI,MAAM,QAAQ,QAAQ,UAAU;AACpC,MAAI,QAAQ,GAAI,OAAM,QAAQ,QAAQ,MAAM;AAG5C,MAAI,QAAQ,IAAI;AACd,UAAM,WAAW,OAAO,MAAM,SAAS;AACvC,UAAM,aAAa,OAAO,MAAM,yBAAyB;AACzD,QAAI,UAAU;AACZ,YAAM,YAAY,SAAS,CAAC;AAC5B,YAAM,cAAc,aAAa,WAAW,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,IAAI;AAC/D,eAAS,IAAI,GAAG,KAAK,KAAK,MAAM,IAAI,OAAO,KAAK;AAC9C,cAAM,OAAO,KAAK,MAAM,IAAI,KAAK,CAAC;AAClC,YAAI,KAAK,KAAK,SAAS,SAAS,MAAM,CAAC,eAAe,KAAK,KAAK,SAAS,WAAW,IAAI;AACtF,gBAAM,KAAK;AACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,MAAI,QAAQ,IAAI;AACd,UAAM,OAAO,KAAK,MAAM,IAAI,OAAO,GAAG;AACtC,SAAK,SAAS;AAAA,MACZ,WAAW,EAAE,QAAQ,KAAK,KAAK;AAAA,MAC/B,SAAS;AAAA,QACP,WAAW,eAAe,KAAK,MAAM,EAAE,GAAG,SAAS,CAAC;AAAA,QACpD,gBAAgB,GAAG,EAAE,MAAM,KAAK,MAAM,IAAI,KAAK,GAAG,CAAC;AAAA,MACrD;AAAA,IACF,CAAC;AAED,eAAW,MAAM;AACf,WAAK,SAAS,EAAE,SAAS,iBAAiB,GAAG,IAAI,EAAE,CAAC;AAAA,IACtD,GAAG,GAAI;AAAA,EACT;AACF;AAEO,SAAS,WAAW,EAAE,MAAM,OAAO,cAAc,QAAQ,QAAQ,GAAoB;AAC1F,QAAM,eAAeL,QAAuB,IAAI;AAChD,QAAM,UAAUA,QAA0B,IAAI;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAIE,UAAS,EAAE,OAAO,GAAG,IAAI,MAAM,CAAC;AAE1D,QAAM,YAAYF,QAAO,MAAM;AAC/B,QAAM,aAAaA,QAAO,OAAO;AACjC,YAAU,UAAU;AACpB,aAAW,UAAU;AAErB,QAAM,cAAcC,aAAY,CAAC,QAA2C;AAC1E,aAAS,EAAE,OAAO,IAAI,OAAO,KAAK,IAAI,SAAS,MAAM,QAAQ,CAAC,EAAE,CAAC;AAAA,EACnE,GAAG,CAAC,CAAC;AAEL,EAAAF,WAAU,MAAM;AACd,QAAI,CAAC,aAAa,QAAS;AAE3B,UAAM,aAAa,KAAK,SAAS,IAAI,IAAI,OAAO,WAAW,IAAI;AAE/D,UAAM,QAAQ,YAAY,OAAO;AAAA,MAC/B,KAAK;AAAA,MACL,YAAY;AAAA,QACV,YAAY;AAAA,QACZ,oBAAoB;AAAA,QACpB,0BAA0B;AAAA,QAC1B,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,WAAW;AAAA,QACX,0BAA0B;AAAA,QAC1B,KAAK;AAAA,QACL;AAAA,QACA,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,OAAO,GAAG;AAAA,UACR,EAAE,KAAK,SAAS,KAAK,CAAC,MAAM;AAAE,sBAAU,QAAQ,EAAE,MAAM,IAAI,SAAS,CAAC;AAAG,mBAAO;AAAA,UAAM,EAAE;AAAA,UACxF,EAAE,KAAK,UAAU,KAAK,MAAM;AAAE,uBAAW,QAAQ;AAAG,mBAAO;AAAA,UAAM,EAAE;AAAA,UACnE;AAAA,UACA,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QACL,CAAC;AAAA,QACD,WAAW,eAAe,GAAG,CAAC,WAAW;AACvC,cAAI,OAAO,YAAY;AACrB,wBAAY,OAAO,MAAM,GAAG;AAAA,UAC9B;AAAA,QACF,CAAC;AAAA,QACD;AAAA,QACA,WAAW,MAAM;AAAA,UACf,KAAK,EAAE,QAAQ,QAAQ,UAAU,OAAO;AAAA,UACxC,gBAAgB,EAAE,UAAU,QAAQ,YAAY,sEAAsE;AAAA,UACtH,eAAe,EAAE,SAAS,QAAQ;AAAA,UAClC,eAAe,EAAE,aAAa,oBAAoB;AAAA,UAClD,kBAAkB,EAAE,iBAAiB,4BAA4B,YAAY,+BAA+B;AAAA,QAC9G,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAED,UAAM,OAAO,IAAI,WAAW,EAAE,OAAO,QAAQ,aAAa,QAAQ,CAAC;AACnE,YAAQ,UAAU;AAElB,gBAAY,KAAK,MAAM,GAAG;AAC1B,mBAAe,MAAM,YAAY;AACjC,SAAK,MAAM;AAEX,WAAO,MAAM;AAAE,WAAK,QAAQ;AAAA,IAAG;AAAA,EAEjC,GAAG,CAAC,CAAC;AAGL,EAAAA,WAAU,MAAM;AACd,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,QAAQ,CAAC,aAAc;AAC5B,mBAAe,MAAM,YAAY;AAAA,EACnC,GAAG,CAAC,YAAY,CAAC;AAEjB,WAAS,eAAe;AACtB,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,UAAM,YAAY,WAAW,KAAK,MAAM,IAAI,SAAS,CAAC;AACtD,SAAK,SAAS;AAAA,MACZ,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,IAAI,QAAQ,QAAQ,UAAU;AAAA,IACnE,CAAC;AAAA,EACH;AAEA,WAAS,aAAa;AACpB,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,KAAM;AACX,WAAO,KAAK,MAAM,IAAI,SAAS,CAAC;AAAA,EAClC;AAEA,SACE,gBAAAK,MAAC,SAAI,WAAU,qCAEb;AAAA,oBAAAA,MAAC,SAAI,WAAU,iFACb;AAAA,sBAAAA,MAAC,SAAI,WAAU,2BACb;AAAA,wBAAAD,KAAC,UAAK,WAAU,iHAAgH,kBAEhI;AAAA,QACA,gBAAAA,KAAC,UAAK,WAAU,mCAAmC,iBAAM;AAAA,SAC3D;AAAA,MACA,gBAAAC,MAAC,SAAI,WAAU,2BACb;AAAA,wBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,SACF;AAAA,OACF;AAAA,IAGA,gBAAAA,KAAC,SAAI,KAAK,cAAc,WAAU,0BAAyB;AAAA,IAG3D,gBAAAC,MAAC,SAAI,WAAU,uHACb;AAAA,sBAAAA,MAAC,UAAM;AAAA,cAAM;AAAA,QAAM;AAAA,SAAO;AAAA,MAC1B,gBAAAD,KAAC,UAAK,mEAA6D;AAAA,MACnE,gBAAAC,MAAC,UAAM;AAAA,cAAM;AAAA,QAAG;AAAA,SAAG;AAAA,OACrB;AAAA,KACF;AAEJ;;;ACpOQ,gBAAAE,YAAA;AANR,IAAM,YAAyE;AAAA,EAC7E;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,MACE,gBAAAA,KAAC,SAAI,WAAU,WAAU,SAAQ,aAAY,MAAK,gBAChD,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,GAAE;AAAA,QACF,UAAS;AAAA;AAAA,IACX,GACF;AAAA,EAEJ;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,MACE,gBAAAA,KAAC,SAAI,WAAU,WAAU,SAAQ,aAAY,MAAK,gBAChD,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,GAAE;AAAA,QACF,UAAS;AAAA;AAAA,IACX,GACF;AAAA,EAEJ;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,MACE,gBAAAA,KAAC,SAAI,WAAU,WAAU,SAAQ,aAAY,MAAK,gBAChD,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,GAAE;AAAA,QACF,UAAS;AAAA;AAAA,IACX,GACF;AAAA,EAEJ;AACF;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,gBAAgB;AAClB,GAKG;AACD,SACE,gBAAAA,KAAC,SAAI,WAAU,4FACZ,oBAAU,IAAI,CAAC,MACd,gBAAAA;AAAA,IAAC;AAAA;AAAA,MAEC,MAAK;AAAA,MACL,SAAS,MAAM,SAAS,EAAE,EAAE;AAAA,MAC5B,OAAO,EAAE;AAAA,MACT,WAAW,sCACT,UAAU,EAAE,KAAK,cAAc,aACjC;AAAA,MAEC,YAAE;AAAA;AAAA,IARE,EAAE;AAAA,EAST,CACD,GACH;AAEJ;","names":["Canvas","html","useRef","useState","jsx","jsxs","useRef","useState","useState","useRef","useEffect","jsx","jsxs","prompt","useEffect","useRef","useCallback","useState","jsx","jsxs","html","jsx"]}

package/dist/chunk-YPK3DAFK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/images/pexels.ts","../src/images/enrichImages.ts"],"sourcesContent":["export interface PexelsResult {\n  url: string;\n  photographer: string;\n  alt: string;\n}\n\nexport async function searchImage(query: string, apiKey?: string): Promise<PexelsResult | null> {\n  const key = apiKey || process.env.PEXELS_API_KEY;\n  if (!key) return null;\n  try {\n    const res = await fetch(\n      `https://api.pexels.com/v1/search?query=${encodeURIComponent(query)}&per_page=1&orientation=landscape`,\n      { headers: { Authorization: key } }\n    );\n    if (!res.ok) return null;\n    const data = await res.json();\n    const photo = data.photos?.[0];\n    if (!photo) return null;\n    return {\n      url: photo.src.large,\n      photographer: photo.photographer,\n      alt: photo.alt || query,\n    };\n  } catch {\n    return null;\n  }\n}\n","import { searchImage } from \"./pexels\";\nimport { generateImage } from \"./dalleImages\";\n\ninterface ImageMatch {\n  query: string;\n  searchStr: string;\n  replaceStr: string;\n}\n\nconst FAKE_DOMAINS = [\n  \"images.unsplash.com\",\n  \"unsplash.com\",\n  \"via.placeholder.com\",\n  \"placeholder.com\",\n  \"placehold.co\",\n  \"placehold.it\",\n  \"placekitten.com\",\n  \"picsum.photos\",\n  \"loremflickr.com\",\n  \"source.unsplash.com\",\n  \"dummyimage.com\",\n  \"fakeimg.pl\",\n  \"example.com\",\n  \"img.freepik.com\",\n  \"cdn.pixabay.com\",\n];\n\n/**\n * Find all images in HTML that need Pexels enrichment.\n * Two strategies:\n * 1. data-image-query=\"...\" — AI followed instructions\n * 2. <img src=\"fake-url\" — detect fake domains, use alt/class/nearby text as query\n */\nexport function findImageSlots(html: string): ImageMatch[] {\n  const matches: ImageMatch[] = [];\n  const seen = new Set<string>();\n\n  // 1. data-image-query=\"...\"\n  const diqRegex = /data-image-query=\"([^\"]+)\"/g;\n  let m: RegExpExecArray | null;\n  while ((m = diqRegex.exec(html)) !== null) {\n    const query = m[1];\n    if (seen.has(query)) continue;\n    seen.add(query);\n    matches.push({\n      query,\n      searchStr: `data-image-query=\"${query}\"`,\n      replaceStr: `src=\"{url}\" data-enriched=\"true\"`,\n    });\n  }\n\n  // 2. <img with fake/non-existent src URLs\n  const imgRegex = /<img\\s[^>]*src=\"(https?:\\/\\/[^\"]+)\"[^>]*>/gi;\n  while ((m = imgRegex.exec(html)) !== null) {\n    const fullTag = m[0];\n    const srcUrl = m[1];\n\n    if (fullTag.includes(\"data-enriched\")) continue;\n    if (srcUrl.includes(\"pexels.com\")) continue;\n    if (seen.has(srcUrl)) continue;\n\n    // Check if domain is fake\n    let isFake = false;\n    try {\n      const domain = new URL(srcUrl).hostname;\n      isFake = FAKE_DOMAINS.some((d) => domain.includes(d));\n    } catch {\n      isFake = true;\n    }\n    if (!isFake) continue;\n\n    // Extract query: try alt, then class context, then URL path words\n    const altMatch = fullTag.match(/alt=\"([^\"]*?)\"/);\n    let query = altMatch?.[1]?.trim() || \"\";\n\n    if (!query) {\n      // Try to extract meaningful words from the URL path\n      try {\n        const path = new URL(srcUrl).pathname;\n        const words = path\n          .replace(/[^a-zA-Z]/g, \" \")\n          .split(/\\s+/)\n          .filter((w) => w.length > 2)\n          .slice(0, 4)\n          .join(\" \");\n        if (words.length > 3) query = words;\n      } catch { /* ignore */ }\n    }\n\n    if (!query) query = \"professional website hero image\";\n\n    seen.add(srcUrl);\n    matches.push({\n      query,\n      searchStr: `src=\"${srcUrl}\"`,\n      replaceStr: `src=\"{url}\" data-enriched=\"true\"`,\n    });\n  }\n\n  return matches;\n}\n\n/**\n * Enrich all images in an HTML string with Pexels photos.\n */\nexport async function enrichImages(html: string, pexelsApiKey?: string, openaiApiKey?: string): Promise<string> {\n  const slots = findImageSlots(html);\n  if (slots.length === 0) return html;\n\n  let result = html;\n  const promises = slots.map(async (slot) => {\n    let url: string | null = null;\n    // Pexels first (permanent URLs), DALL-E disabled (temporary URLs expire ~2hrs)\n    const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);\n    url = img?.url || null;\n    url ??= `https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(slot.query.slice(0, 30))}`;\n    const replacement = slot.replaceStr.replace(\"{url}\", url);\n    result = result.replaceAll(slot.searchStr, replacement);\n  });\n\n  await Promise.allSettled(promises);\n\n  // Catch any remaining <img> tags without src (AI didn't follow instructions)\n  result = result.replace(/<img\\s(?![^>]*\\bsrc=)([^>]*?)>/gi, (_match, attrs) => {\n    const altMatch = attrs.match(/alt=\"([^\"]*?)\"/);\n    const query = altMatch?.[1] || \"professional image\";\n    return `<img src=\"https://placehold.co/800x500/1f2937/9ca3af?text=${encodeURIComponent(query.slice(0, 30))}\" ${attrs}>`;\n  });\n\n  return result;\n}\n"],"mappings":"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","names":[]}