@easybits.cloud/html-tailwind-generator 0.1.6 → 0.2.1

package/dist/chunk-UGIQBLG5.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: \"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%}\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/{src/images/enrichImages.ts → dist/chunk-YPK3DAFK.js}

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

package/dist/chunk-YPK3DAFK.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`,\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":[]}

package/dist/components.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { S as Section3, I as IframeMessage } from './types-Flpl4wDs.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { C as CustomColors } from './themes-CWFZ6GB-.js';
+
+interface CanvasHandle {
+    scrollToSection: (id: string) => void;
+    postMessage: (msg: Record<string, unknown>) => void;
+}
+interface CanvasProps {
+    sections: Section3[];
+    theme?: string;
+    onMessage: (msg: IframeMessage) => void;
+    iframeRectRef: React.MutableRefObject<DOMRect | null>;
+}
+declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<CanvasHandle>>;
+
+interface SectionListProps {
+    sections: Section3[];
+    selectedSectionId: string | null;
+    theme: string;
+    customColors?: CustomColors;
+    onThemeChange: (themeId: string) => void;
+    onCustomColorChange?: (colors: Partial<CustomColors>) => void;
+    onSelect: (id: string) => void;
+    onOpenCode: (id: string) => void;
+    onReorder: (fromIndex: number, toIndex: number) => void;
+    onDelete: (id: string) => void;
+    onRename: (id: string, label: string) => void;
+    onAdd: () => void;
+}
+declare function SectionList({ sections, selectedSectionId, theme, customColors, onThemeChange, onCustomColorChange, onSelect, onOpenCode, onReorder, onDelete, onRename, onAdd, }: SectionListProps): react_jsx_runtime.JSX.Element;
+
+interface FloatingToolbarProps {
+    selection: IframeMessage | null;
+    iframeRect: DOMRect | null;
+    onRefine: (instruction: string, referenceImage?: string) => void;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDelete: () => void;
+    onClose: () => void;
+    onViewCode: () => void;
+    onUpdateAttribute?: (sectionId: string, elementPath: string, attr: string, value: string) => void;
+    isRefining: boolean;
+}
+declare function FloatingToolbar({ selection, iframeRect, onRefine, onMoveUp, onMoveDown, onDelete, onClose, onViewCode, onUpdateAttribute, isRefining, }: FloatingToolbarProps): react_jsx_runtime.JSX.Element | null;
+
+interface CodeEditorProps {
+    code: string;
+    label: string;
+    scrollToText?: string;
+    onSave: (code: string) => void;
+    onClose: () => void;
+}
+declare function CodeEditor({ code, label, scrollToText, onSave, onClose }: CodeEditorProps): react_jsx_runtime.JSX.Element;
+
+type Viewport = "desktop" | "tablet" | "mobile";
+declare function ViewportToggle({ value, onChange, activeClass, inactiveClass, }: {
+    value: Viewport;
+    onChange: (v: Viewport) => void;
+    activeClass?: string;
+    inactiveClass?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Canvas, type CanvasHandle, CodeEditor, FloatingToolbar, SectionList, type Viewport, ViewportToggle };

package/dist/components.js

@@ -0,0 +1,16 @@
+import {
+  Canvas,
+  CodeEditor,
+  FloatingToolbar,
+  SectionList,
+  ViewportToggle
+} from "./chunk-464CGCFJ.js";
+import "./chunk-UGIQBLG5.js";
+export {
+  Canvas,
+  CodeEditor,
+  FloatingToolbar,
+  SectionList,
+  ViewportToggle
+};
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/deploy.d.ts

@@ -0,0 +1,39 @@
+import { S as Section3 } from './types-Flpl4wDs.js';
+import { C as CustomColors } from './themes-CWFZ6GB-.js';
+
+interface DeployToS3Options {
+    /** The sections to deploy */
+    sections: Section3[];
+    /** Theme ID */
+    theme?: string;
+    /** Custom colors (when theme is "custom") */
+    customColors?: CustomColors;
+    /** S3-compatible upload function. Receives the HTML string, returns the URL */
+    upload: (html: string) => Promise<string>;
+}
+/**
+ * Deploy a landing page to any S3-compatible storage.
+ * The consumer provides their own upload function.
+ */
+declare function deployToS3(options: DeployToS3Options): Promise<string>;
+interface DeployToEasyBitsOptions {
+    /** EasyBits API key */
+    apiKey: string;
+    /** Website slug (e.g. "my-landing" → my-landing.easybits.cloud) */
+    slug: string;
+    /** The sections to deploy */
+    sections: Section3[];
+    /** Theme ID */
+    theme?: string;
+    /** Custom colors (when theme is "custom") */
+    customColors?: CustomColors;
+    /** EasyBits API base URL (default: https://easybits.cloud) */
+    baseUrl?: string;
+}
+/**
+ * Deploy a landing page to EasyBits hosting (slug.easybits.cloud).
+ * Uses the EasyBits API to create/update a website.
+ */
+declare function deployToEasyBits(options: DeployToEasyBitsOptions): Promise<string>;
+
+export { type DeployToEasyBitsOptions, type DeployToS3Options, deployToEasyBits, deployToS3 };

package/dist/deploy.js

@@ -0,0 +1,10 @@
+import {
+  deployToEasyBits,
+  deployToS3
+} from "./chunk-24P7DHB7.js";
+import "./chunk-UGIQBLG5.js";
+export {
+  deployToEasyBits,
+  deployToS3
+};
+//# sourceMappingURL=deploy.js.map

package/dist/deploy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/generate.d.ts

@@ -0,0 +1,41 @@
+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 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.
+ */
+declare function extractJsonObjects(text: string): [any[], string];
+interface GenerateOptions {
+    /** Anthropic API key. Falls back to ANTHROPIC_API_KEY env var */
+    anthropicApiKey?: string;
+    /** OpenAI API key. If provided, uses GPT-4o instead of Claude */
+    openaiApiKey?: string;
+    /** Landing page description prompt */
+    prompt: string;
+    /** Reference image (base64 data URI) for vision-based generation */
+    referenceImage?: string;
+    /** Extra instructions appended to the prompt */
+    extraInstructions?: string;
+    /** Custom system prompt (overrides default SYSTEM_PROMPT) */
+    systemPrompt?: string;
+    /** Model ID (default: gpt-4o for OpenAI, claude-sonnet-4-6 for Anthropic) */
+    model?: string;
+    /** Pexels API key for image enrichment. Falls back to PEXELS_API_KEY env var */
+    pexelsApiKey?: string;
+    /** Called when a new section is parsed from the stream */
+    onSection?: (section: Section3) => void;
+    /** Called when a section's images are enriched */
+    onImageUpdate?: (sectionId: string, html: string) => void;
+    /** Called when generation is complete */
+    onDone?: (sections: Section3[]) => void;
+    /** Called on error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Generate a landing page with streaming AI + image enrichment.
+ * Returns all generated sections when complete.
+ */
+declare function generateLanding(options: GenerateOptions): Promise<Section3[]>;
+
+export { type GenerateOptions, PROMPT_SUFFIX, SYSTEM_PROMPT, extractJsonObjects, generateLanding };

package/dist/generate.js

@@ -0,0 +1,14 @@
+import {
+  PROMPT_SUFFIX,
+  SYSTEM_PROMPT,
+  extractJsonObjects,
+  generateLanding
+} from "./chunk-S7YLW6ZU.js";
+import "./chunk-YPK3DAFK.js";
+export {
+  PROMPT_SUFFIX,
+  SYSTEM_PROMPT,
+  extractJsonObjects,
+  generateLanding
+};
+//# sourceMappingURL=generate.js.map

package/dist/generate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/images.d.ts

@@ -0,0 +1,30 @@
+interface PexelsResult {
+    url: string;
+    photographer: string;
+    alt: string;
+}
+declare function searchImage(query: string, apiKey?: string): Promise<PexelsResult | null>;
+
+interface ImageMatch {
+    query: string;
+    searchStr: string;
+    replaceStr: string;
+}
+/**
+ * Find all images in HTML that need Pexels enrichment.
+ * Two strategies:
+ * 1. data-image-query="..." — AI followed instructions
+ * 2. <img src="fake-url" — detect fake domains, use alt/class/nearby text as query
+ */
+declare function findImageSlots(html: string): ImageMatch[];
+/**
+ * Enrich all images in an HTML string with Pexels photos.
+ */
+declare function enrichImages(html: string, pexelsApiKey?: string, openaiApiKey?: string): Promise<string>;
+
+/**
+ * Generate an image using DALL-E 3 API.
+ */
+declare function generateImage(query: string, openaiApiKey: string): Promise<string>;
+
+export { type PexelsResult, enrichImages, findImageSlots, generateImage, searchImage };

package/dist/images.js

@@ -0,0 +1,15 @@
+import {
+  generateImage
+} from "./chunk-LPI2QUCL.js";
+import {
+  enrichImages,
+  findImageSlots,
+  searchImage
+} from "./chunk-YPK3DAFK.js";
+export {
+  enrichImages,
+  findImageSlots,
+  generateImage,
+  searchImage
+};
+//# sourceMappingURL=images.js.map

package/dist/images.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import { S as Section3 } from './types-Flpl4wDs.js';
+export { I as IframeMessage } from './types-Flpl4wDs.js';
+import { C as CustomColors } from './themes-CWFZ6GB-.js';
+export { L as LANDING_THEMES, a as LandingTheme, b as buildCustomTheme, c as buildCustomThemeCss, d as buildSingleThemeCss, e as buildThemeCss } from './themes-CWFZ6GB-.js';
+export { GenerateOptions, PROMPT_SUFFIX, SYSTEM_PROMPT, extractJsonObjects, generateLanding } from './generate.js';
+export { REFINE_SYSTEM, RefineOptions, refineLanding } from './refine.js';
+export { DeployToEasyBitsOptions, DeployToS3Options, deployToEasyBits, deployToS3 } from './deploy.js';
+export { PexelsResult, enrichImages, findImageSlots, generateImage, searchImage } from './images.js';
+export { Canvas, CanvasHandle, CodeEditor, FloatingToolbar, SectionList, Viewport, ViewportToggle } from './components.js';
+import 'react';
+import 'react/jsx-runtime';
+
+/**
+ * Build the full HTML for the iframe preview (with editing script).
+ */
+declare function buildPreviewHtml(sections: Section3[], theme?: string): string;
+/**
+ * Build the deploy HTML (no editing script, clean output).
+ */
+declare function buildDeployHtml(sections: Section3[], theme?: string, customColors?: CustomColors): string;
+
+/**
+ * JavaScript injected into the landing v3 iframe.
+ * Handles hover highlights, click selection, contentEditable text editing,
+ * postMessage communication with the parent editor,
+ * and incremental section injection from parent.
+ */
+declare function getIframeScript(): string;
+
+export { CustomColors, Section3, buildDeployHtml, buildPreviewHtml, getIframeScript };

package/dist/index.js

@@ -0,0 +1,67 @@
+import {
+  Canvas,
+  CodeEditor,
+  FloatingToolbar,
+  SectionList,
+  ViewportToggle
+} from "./chunk-464CGCFJ.js";
+import {
+  generateImage
+} from "./chunk-LPI2QUCL.js";
+import {
+  PROMPT_SUFFIX,
+  SYSTEM_PROMPT,
+  extractJsonObjects,
+  generateLanding
+} from "./chunk-S7YLW6ZU.js";
+import {
+  REFINE_SYSTEM,
+  refineLanding
+} from "./chunk-CB2LECVT.js";
+import {
+  enrichImages,
+  findImageSlots,
+  searchImage
+} from "./chunk-YPK3DAFK.js";
+import {
+  deployToEasyBits,
+  deployToS3
+} from "./chunk-24P7DHB7.js";
+import {
+  LANDING_THEMES,
+  buildCustomTheme,
+  buildCustomThemeCss,
+  buildDeployHtml,
+  buildPreviewHtml,
+  buildSingleThemeCss,
+  buildThemeCss,
+  getIframeScript
+} from "./chunk-UGIQBLG5.js";
+export {
+  Canvas,
+  CodeEditor,
+  FloatingToolbar,
+  LANDING_THEMES,
+  PROMPT_SUFFIX,
+  REFINE_SYSTEM,
+  SYSTEM_PROMPT,
+  SectionList,
+  ViewportToggle,
+  buildCustomTheme,
+  buildCustomThemeCss,
+  buildDeployHtml,
+  buildPreviewHtml,
+  buildSingleThemeCss,
+  buildThemeCss,
+  deployToEasyBits,
+  deployToS3,
+  enrichImages,
+  extractJsonObjects,
+  findImageSlots,
+  generateImage,
+  generateLanding,
+  getIframeScript,
+  refineLanding,
+  searchImage
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/refine.d.ts

@@ -0,0 +1,32 @@
+declare const REFINE_SYSTEM = "You are an expert HTML/Tailwind CSS developer. You receive the current HTML of a landing page section and a user instruction.\n\nRULES:\n- Return ONLY the modified HTML \u2014 no full page, no <html>/<head>/<body> tags\n- Use Tailwind CSS classes (CDN loaded)\n- You may use inline styles for specific adjustments\n- Images: use data-image-query=\"english search query\" for new images\n- Keep all text in its original language unless asked to translate\n- Be creative \u2014 don't just make minimal changes, improve the design\n- Return raw HTML only \u2014 no markdown fences, no explanations\n\nCOLOR SYSTEM \u2014 CRITICAL:\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 colors: NO bg-gray-*, bg-black, bg-white, text-gray-*, text-black, text-white, etc.\n- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.\n- CONTRAST RULE: on bg-primary/bg-primary-dark \u2192 text-on-primary. On bg-surface/bg-surface-alt \u2192 text-on-surface/text-on-surface-muted. Never mismatch.\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";
+interface RefineOptions {
+    /** Anthropic API key. Falls back to ANTHROPIC_API_KEY env var */
+    anthropicApiKey?: string;
+    /** OpenAI API key. If provided, uses GPT-4o-mini instead of Claude */
+    openaiApiKey?: string;
+    /** Current HTML of the section being refined */
+    currentHtml: string;
+    /** User instruction for refinement */
+    instruction: string;
+    /** Reference image (base64 data URI) for vision-based refinement */
+    referenceImage?: string;
+    /** Custom system prompt (overrides default REFINE_SYSTEM) */
+    systemPrompt?: string;
+    /** Model ID (default: gpt-4o-mini/gpt-4o for OpenAI, claude-haiku/claude-sonnet for Anthropic) */
+    model?: string;
+    /** Pexels API key for image enrichment. Falls back to PEXELS_API_KEY env var */
+    pexelsApiKey?: string;
+    /** Called with accumulated HTML as it streams */
+    onChunk?: (html: string) => void;
+    /** Called when refinement is complete with final enriched HTML */
+    onDone?: (html: string) => void;
+    /** Called on error */
+    onError?: (error: Error) => void;
+}
+/**
+ * Refine a landing page section with streaming AI.
+ * Returns the final enriched HTML.
+ */
+declare function refineLanding(options: RefineOptions): Promise<string>;
+
+export { REFINE_SYSTEM, type RefineOptions, refineLanding };