@easybits.cloud/html-tailwind-generator 0.2.26 → 0.2.28

package/README.md

@@ -225,6 +225,7 @@ The generator uses a semantic color system with CSS custom properties:
 - [ ] **i18n** — Component labels are in Spanish. Add a `locale` prop or i18n system for English and other languages.
 - [ ] **Tests** — Unit tests for `extractJsonObjects`, `findImageSlots`, `buildDeployHtml`, `buildCustomTheme`.
 - [ ] **Storybook** — Visual stories for Canvas, SectionList, FloatingToolbar, CodeEditor.
+- [ ] **Upgrade OpenAI models** — Evaluate GPT-5 / GPT-5-mini as defaults for generation and refinement. Compare quality, latency, and cost vs current GPT-4o/4o-mini. Update `resolveModel()` defaults if better.
 
 ## Used in Production
 

package/dist/chunk-5Y3R63LZ.js

@@ -0,0 +1,104 @@
+import {
+  dataUrlToImagePart,
+  streamGenerate
+} from "./chunk-PNEUKC6I.js";
+
+// src/generateDocument.ts
+var DOCUMENT_SYSTEM_PROMPT = `You are a professional document designer who creates stunning letter-sized (8.5" \xD7 11") document pages using HTML + Tailwind CSS.
+
+RULES:
+- Each page is a <section> element sized for letter paper
+- Page structure: <section class="w-[8.5in] min-h-[11in] bg-white relative overflow-hidden p-[0.75in]">
+- Content MUST NOT overflow page boundaries \u2014 be conservative with spacing
+- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import)
+- NO JavaScript, only HTML+Tailwind
+- All text content in Spanish unless the prompt specifies otherwise
+- Use real content from the source material, not Lorem ipsum
+- NOT responsive \u2014 fixed letter size, no breakpoints needed
+- Background is always white paper; use colored accents for decoration
+
+DESIGN:
+- Professional, colorful designs: geometric decorations, gradients, accent colors
+- Typography: use font weights (font-light to font-black), good hierarchy
+- Tables: Tailwind table classes, alternating row colors, clean borders
+- Decorative elements: colored sidebars, header bands, icon accents, SVG shapes
+- First page MUST be a cover/title page with impactful design
+- Use page-appropriate content density \u2014 don't cram too much on one page
+- For numerical data: styled tables, colored bars, progress elements
+
+COLOR SYSTEM \u2014 use semantic classes for decorative elements:
+- 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
+- Page background is ALWAYS white (bg-white on the section itself)
+- Use semantic colors for headers, sidebars, decorative bars, table headers, accents
+- CONTRAST RULE: on bg-primary \u2192 text-on-primary. On white/bg-surface \u2192 text-on-surface or text-primary
+- Gradients: from-primary to-primary-dark
+
+IMAGES:
+- EVERY image MUST use: <img data-image-query="english search query" alt="description" class="w-full h-auto object-cover rounded-xl"/>
+- NEVER include a src attribute \u2014 the system auto-replaces data-image-query with a real image
+- For avatar-like elements, use colored divs with initials instead of img tags
+
+TAILWIND v3 NOTES:
+- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)
+- Borders: border + border-gray-200 for visible borders`;
+var DOCUMENT_PROMPT_SUFFIX = `
+
+OUTPUT FORMAT: NDJSON \u2014 one JSON object per line, NO wrapper array, NO markdown fences.
+Each line: {"label": "Page Title", "html": "<section class='w-[8.5in] min-h-[11in] bg-white relative overflow-hidden p-[0.75in]'>...</section>"}
+
+Generate 3-8 pages depending on content length. First page = cover/title page.
+Each page must fit within letter size (8.5" \xD7 11"). Be conservative with spacing.
+Make each page visually distinct \u2014 different layouts, different accent placements.`;
+async function generateDocument(options) {
+  const {
+    prompt,
+    logoUrl,
+    referenceImage,
+    extraInstructions,
+    ...rest
+  } = options;
+  const extra = extraInstructions ? `
+Additional instructions: ${extraInstructions}` : "";
+  const logoInstruction = logoUrl ? `
+LOGO: Include this logo on the cover page and as a small header on other pages:
+<img src="${logoUrl}" alt="Logo" class="h-12 object-contain" />
+Use this exact <img> tag \u2014 do NOT invent a different logo.` : "";
+  const content = [];
+  if (logoUrl?.startsWith("data:")) {
+    const converted = dataUrlToImagePart(logoUrl);
+    if (converted) {
+      content.push({ type: "image", ...converted });
+    }
+  }
+  if (referenceImage) {
+    const converted = dataUrlToImagePart(referenceImage);
+    if (converted) {
+      content.push({ type: "image", ...converted });
+    } else {
+      content.push({ type: "image", image: referenceImage });
+    }
+    content.push({
+      type: "text",
+      text: `Create a professional document inspired by this reference image for: ${prompt}${logoInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`
+    });
+  } else {
+    content.push({
+      type: "text",
+      text: `Create a professional document for: ${prompt}${logoInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`
+    });
+  }
+  return streamGenerate({
+    ...rest,
+    systemPrompt: DOCUMENT_SYSTEM_PROMPT,
+    userContent: content
+  });
+}
+
+export {
+  DOCUMENT_SYSTEM_PROMPT,
+  DOCUMENT_PROMPT_SUFFIX,
+  generateDocument
+};
+//# sourceMappingURL=chunk-5Y3R63LZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/generateDocument.ts"],"sourcesContent":["import { streamGenerate, dataUrlToImagePart } from \"./streamCore\";\nimport type { Section3 } from \"./types\";\n\nexport const DOCUMENT_SYSTEM_PROMPT = `You are a professional document designer who creates stunning letter-sized (8.5\" × 11\") document pages using HTML + Tailwind CSS.\n\nRULES:\n- Each page is a <section> element sized for letter paper\n- Page structure: <section class=\"w-[8.5in] min-h-[11in] bg-white relative overflow-hidden p-[0.75in]\">\n- Content MUST NOT overflow page boundaries — be conservative with spacing\n- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import)\n- NO JavaScript, only HTML+Tailwind\n- All text content in Spanish unless the prompt specifies otherwise\n- Use real content from the source material, not Lorem ipsum\n- NOT responsive — fixed letter size, no breakpoints needed\n- Background is always white paper; use colored accents for decoration\n\nDESIGN:\n- Professional, colorful designs: geometric decorations, gradients, accent colors\n- Typography: use font weights (font-light to font-black), good hierarchy\n- Tables: Tailwind table classes, alternating row colors, clean borders\n- Decorative elements: colored sidebars, header bands, icon accents, SVG shapes\n- First page MUST be a cover/title page with impactful design\n- Use page-appropriate content density — don't cram too much on one page\n- For numerical data: styled tables, colored bars, progress elements\n\nCOLOR SYSTEM — use semantic classes for decorative elements:\n- bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary\n- bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted\n- bg-secondary, text-secondary, bg-accent, text-accent\n- Page background is ALWAYS white (bg-white on the section itself)\n- Use semantic colors for headers, sidebars, decorative bars, table headers, accents\n- CONTRAST RULE: on bg-primary → text-on-primary. On white/bg-surface → text-on-surface or text-primary\n- Gradients: from-primary to-primary-dark\n\nIMAGES:\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 include a src attribute — the system auto-replaces data-image-query with a real image\n- For avatar-like elements, use colored divs with initials instead of img tags\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 DOCUMENT_PROMPT_SUFFIX = `\n\nOUTPUT FORMAT: NDJSON — one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Page Title\", \"html\": \"<section class='w-[8.5in] min-h-[11in] bg-white relative overflow-hidden p-[0.75in]'>...</section>\"}\n\nGenerate 3-8 pages depending on content length. First page = cover/title page.\nEach page must fit within letter size (8.5\" × 11\"). Be conservative with spacing.\nMake each page visually distinct — different layouts, different accent placements.`;\n\nexport interface GenerateDocumentOptions {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  logoUrl?: string;\n  referenceImage?: string;\n  extraInstructions?: string;\n  model?: string;\n  pexelsApiKey?: string;\n  persistImage?: (tempUrl: string, query: string) => Promise<string>;\n  onSection?: (section: Section3) => void;\n  onImageUpdate?: (sectionId: string, html: string) => void;\n  onDone?: (sections: Section3[]) => void;\n  onError?: (error: Error) => void;\n}\n\n/**\n * Generate a multi-page document with streaming AI + image enrichment.\n */\nexport async function generateDocument(options: GenerateDocumentOptions): Promise<Section3[]> {\n  const {\n    prompt,\n    logoUrl,\n    referenceImage,\n    extraInstructions,\n    ...rest\n  } = options;\n\n  const extra = extraInstructions ? `\\nAdditional instructions: ${extraInstructions}` : \"\";\n  const logoInstruction = logoUrl\n    ? `\\nLOGO: Include this logo on the cover page and as a small header on other pages:\\n<img src=\"${logoUrl}\" alt=\"Logo\" class=\"h-12 object-contain\" />\\nUse this exact <img> tag — do NOT invent a different logo.`\n    : \"\";\n\n  const content: any[] = [];\n\n  // If logo is a data URL, send it as vision input so AI can see it\n  if (logoUrl?.startsWith(\"data:\")) {\n    const converted = dataUrlToImagePart(logoUrl);\n    if (converted) {\n      content.push({ type: \"image\", ...converted });\n    }\n  }\n\n  if (referenceImage) {\n    const converted = dataUrlToImagePart(referenceImage);\n    if (converted) {\n      content.push({ type: \"image\", ...converted });\n    } else {\n      content.push({ type: \"image\", image: referenceImage });\n    }\n    content.push({\n      type: \"text\",\n      text: `Create a professional document inspired by this reference image for: ${prompt}${logoInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`,\n    });\n  } else {\n    content.push({\n      type: \"text\",\n      text: `Create a professional document for: ${prompt}${logoInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`,\n    });\n  }\n\n  return streamGenerate({\n    ...rest,\n    systemPrompt: DOCUMENT_SYSTEM_PROMPT,\n    userContent: content,\n  });\n}\n"],"mappings":";;;;;;AAGO,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwC/B,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BtC,eAAsB,iBAAiB,SAAuD;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAQ,oBAAoB;AAAA,2BAA8B,iBAAiB,KAAK;AACtF,QAAM,kBAAkB,UACpB;AAAA;AAAA,YAAgG,OAAO;AAAA,mEACvG;AAEJ,QAAM,UAAiB,CAAC;AAGxB,MAAI,SAAS,WAAW,OAAO,GAAG;AAChC,UAAM,YAAY,mBAAmB,OAAO;AAC5C,QAAI,WAAW;AACb,cAAQ,KAAK,EAAE,MAAM,SAAS,GAAG,UAAU,CAAC;AAAA,IAC9C;AAAA,EACF;AAEA,MAAI,gBAAgB;AAClB,UAAM,YAAY,mBAAmB,cAAc;AACnD,QAAI,WAAW;AACb,cAAQ,KAAK,EAAE,MAAM,SAAS,GAAG,UAAU,CAAC;AAAA,IAC9C,OAAO;AACL,cAAQ,KAAK,EAAE,MAAM,SAAS,OAAO,eAAe,CAAC;AAAA,IACvD;AACA,YAAQ,KAAK;AAAA,MACX,MAAM;AAAA,MACN,MAAM,wEAAwE,MAAM,GAAG,eAAe,GAAG,KAAK,GAAG,sBAAsB;AAAA,IACzI,CAAC;AAAA,EACH,OAAO;AACL,YAAQ,KAAK;AAAA,MACX,MAAM;AAAA,MACN,MAAM,uCAAuC,MAAM,GAAG,eAAe,GAAG,KAAK,GAAG,sBAAsB;AAAA,IACxG,CAAC;AAAA,EACH;AAEA,SAAO,eAAe;AAAA,IACpB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

package/dist/chunk-PNEUKC6I.js

@@ -0,0 +1,225 @@
+import {
+  findImageSlots,
+  generateImage,
+  searchImage
+} from "./chunk-FM4IJA64.js";
+
+// src/streamCore.ts
+import { streamText } from "ai";
+import { createAnthropic } from "@ai-sdk/anthropic";
+import { nanoid } from "nanoid";
+async function resolveModel(opts) {
+  const anthropicKey = opts.anthropicApiKey || process.env.ANTHROPIC_API_KEY;
+  if (anthropicKey) {
+    const anthropic = createAnthropic({ apiKey: anthropicKey });
+    return anthropic(opts.modelId || opts.defaultAnthropic);
+  }
+  const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;
+  if (openaiKey) {
+    const { createOpenAI } = await import("@ai-sdk/openai");
+    const openai = createOpenAI({ apiKey: openaiKey });
+    return openai(opts.modelId || opts.defaultOpenai);
+  }
+  return createAnthropic()(opts.modelId || opts.defaultAnthropic);
+}
+function dataUrlToImagePart(dataUrl) {
+  const match = dataUrl.match(/^data:([^;]+);base64,(.+)$/);
+  if (!match) return null;
+  return {
+    image: new Uint8Array(Buffer.from(match[2], "base64")),
+    mimeType: match[1]
+  };
+}
+function extractJsonObjects(text) {
+  const objects = [];
+  let remaining = text;
+  while (remaining.length > 0) {
+    remaining = remaining.trimStart();
+    if (!remaining.startsWith("{")) {
+      const nextBrace = remaining.indexOf("{");
+      if (nextBrace === -1) break;
+      remaining = remaining.slice(nextBrace);
+      continue;
+    }
+    let depth = 0;
+    let inString = false;
+    let escape = false;
+    let end = -1;
+    for (let i = 0; i < remaining.length; i++) {
+      const ch = remaining[i];
+      if (escape) {
+        escape = false;
+        continue;
+      }
+      if (ch === "\\") {
+        escape = true;
+        continue;
+      }
+      if (ch === '"') {
+        inString = !inString;
+        continue;
+      }
+      if (inString) continue;
+      if (ch === "{") depth++;
+      if (ch === "}") {
+        depth--;
+        if (depth === 0) {
+          end = i;
+          break;
+        }
+      }
+    }
+    if (end === -1) break;
+    const candidate = remaining.slice(0, end + 1);
+    remaining = remaining.slice(end + 1);
+    try {
+      objects.push(JSON.parse(candidate));
+    } catch {
+    }
+  }
+  return [objects, remaining];
+}
+var LOADING_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500"><defs><linearGradient id="sh" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="%23e5e7eb"/><stop offset="50%" stop-color="%23f9fafb"/><stop offset="100%" stop-color="%23e5e7eb"/></linearGradient></defs><rect fill="%23f3f4f6" width="800" height="500" rx="12"/><rect fill="url(%23sh)" width="800" height="500" rx="12"><animate attributeName="x" from="-800" to="800" dur="1.5s" repeatCount="indefinite"/></rect><circle cx="370" cy="230" r="8" fill="%239ca3af" opacity=".5"><animate attributeName="opacity" values=".3;1;.3" dur="1.5s" repeatCount="indefinite"/></circle><circle cx="400" cy="230" r="8" fill="%239ca3af" opacity=".5"><animate attributeName="opacity" values=".3;1;.3" dur="1.5s" begin=".2s" repeatCount="indefinite"/></circle><circle cx="430" cy="230" r="8" fill="%239ca3af" opacity=".5"><animate attributeName="opacity" values=".3;1;.3" dur="1.5s" begin=".4s" repeatCount="indefinite"/></circle><text x="400" y="270" text-anchor="middle" fill="%239ca3af" font-family="system-ui" font-size="14">Generando imagen...</text></svg>`)}`;
+function addLoadingPlaceholders(html) {
+  return html.replace(
+    /(<img\s[^>]*)data-image-query="([^"]+)"([^>]*?)(?:\s*\/?>)/gi,
+    (_match, before, query, after) => {
+      if (before.includes("src=") || after.includes("src=")) return _match;
+      return `${before}src="${LOADING_PLACEHOLDER}" data-image-query="${query}" alt="${query}"${after}>`;
+    }
+  );
+}
+async function streamGenerate(options) {
+  const {
+    anthropicApiKey,
+    openaiApiKey: _openaiApiKey,
+    model: modelId,
+    systemPrompt,
+    userContent,
+    pexelsApiKey,
+    persistImage,
+    onSection,
+    onImageUpdate,
+    onDone,
+    onError
+  } = options;
+  const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;
+  const model = await resolveModel({
+    openaiApiKey,
+    anthropicApiKey,
+    modelId,
+    defaultOpenai: "gpt-4o",
+    defaultAnthropic: "claude-sonnet-4-6"
+  });
+  const result = streamText({
+    model,
+    system: systemPrompt,
+    messages: [{ role: "user", content: userContent }]
+  });
+  const allSections = [];
+  const imagePromises = [];
+  let sectionOrder = 0;
+  let buffer = "";
+  function enrichSection(sectionRef) {
+    const slots = findImageSlots(sectionRef.html);
+    if (slots.length === 0) return;
+    const slotsSnapshot = slots.map((s) => ({ ...s }));
+    imagePromises.push(
+      (async () => {
+        const results = await Promise.allSettled(
+          slotsSnapshot.map(async (slot) => {
+            let url = null;
+            if (openaiApiKey) {
+              try {
+                const tempUrl = await generateImage(slot.query, openaiApiKey);
+                url = persistImage ? await persistImage(tempUrl, slot.query) : tempUrl;
+              } catch (e) {
+                console.warn(`[dalle] failed for "${slot.query}":`, e);
+              }
+            }
+            if (!url) {
+              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);
+        }
+      })()
+    );
+  }
+  function processObject(obj) {
+    if (!obj.html || !obj.label) return;
+    const section = {
+      id: nanoid(8),
+      order: sectionOrder++,
+      html: addLoadingPlaceholders(obj.html),
+      label: obj.label
+    };
+    allSections.push(section);
+    onSection?.(section);
+    enrichSection(section);
+  }
+  try {
+    for await (const chunk of result.textStream) {
+      buffer += chunk;
+      const [objects, remaining] = extractJsonObjects(buffer);
+      buffer = remaining;
+      for (const obj of objects) processObject(obj);
+    }
+    if (buffer.trim()) {
+      let cleaned = buffer.trim();
+      if (cleaned.startsWith("```")) {
+        cleaned = cleaned.replace(/^```(?:json)?\s*/, "").replace(/\s*```$/, "");
+      }
+      const [lastObjects] = extractJsonObjects(cleaned);
+      for (const obj of lastObjects) processObject(obj);
+    }
+    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) {
+    const error = err instanceof Error ? err : new Error(err?.message || "Generation failed");
+    onError?.(error);
+    throw error;
+  }
+}
+
+export {
+  dataUrlToImagePart,
+  extractJsonObjects,
+  streamGenerate
+};
+//# sourceMappingURL=chunk-PNEUKC6I.js.map

package/dist/chunk-PNEUKC6I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/streamCore.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\n/**\n * Resolve AI model from available keys.\n * Prefers Anthropic, falls back to OpenAI.\n */\nexport async function resolveModel(opts: {\n  openaiApiKey?: string;\n  anthropicApiKey?: string;\n  modelId?: string;\n  defaultOpenai: string;\n  defaultAnthropic: string;\n}) {\n  const anthropicKey = opts.anthropicApiKey || process.env.ANTHROPIC_API_KEY;\n  if (anthropicKey) {\n    const anthropic = createAnthropic({ apiKey: anthropicKey });\n    return anthropic(opts.modelId || opts.defaultAnthropic);\n  }\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  return createAnthropic()(opts.modelId || opts.defaultAnthropic);\n}\n\n/**\n * Convert data URL to Uint8Array for AI SDK vision.\n */\nexport function dataUrlToImagePart(dataUrl: string): { image: Uint8Array; mimeType: string } | null {\n  const match = dataUrl.match(/^data:([^;]+);base64,(.+)$/);\n  if (!match) return null;\n  return {\n    image: new Uint8Array(Buffer.from(match[2], \"base64\")),\n    mimeType: match[1],\n  };\n}\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\n/** Inline SVG placeholder for loading images */\nconst LOADING_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"500\" viewBox=\"0 0 800 500\"><defs><linearGradient id=\"sh\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0%\" stop-color=\"%23e5e7eb\"/><stop offset=\"50%\" stop-color=\"%23f9fafb\"/><stop offset=\"100%\" stop-color=\"%23e5e7eb\"/></linearGradient></defs><rect fill=\"%23f3f4f6\" width=\"800\" height=\"500\" rx=\"12\"/><rect fill=\"url(%23sh)\" width=\"800\" height=\"500\" rx=\"12\"><animate attributeName=\"x\" from=\"-800\" to=\"800\" dur=\"1.5s\" repeatCount=\"indefinite\"/></rect><circle cx=\"370\" cy=\"230\" r=\"8\" fill=\"%239ca3af\" opacity=\".5\"><animate attributeName=\"opacity\" values=\".3;1;.3\" dur=\"1.5s\" repeatCount=\"indefinite\"/></circle><circle cx=\"400\" cy=\"230\" r=\"8\" fill=\"%239ca3af\" opacity=\".5\"><animate attributeName=\"opacity\" values=\".3;1;.3\" dur=\"1.5s\" begin=\".2s\" repeatCount=\"indefinite\"/></circle><circle cx=\"430\" cy=\"230\" r=\"8\" fill=\"%239ca3af\" opacity=\".5\"><animate attributeName=\"opacity\" values=\".3;1;.3\" dur=\"1.5s\" begin=\".4s\" repeatCount=\"indefinite\"/></circle><text x=\"400\" y=\"270\" text-anchor=\"middle\" fill=\"%239ca3af\" font-family=\"system-ui\" font-size=\"14\">Generando imagen...</text></svg>`)}`;\n\n/** Replace data-image-query attrs with animated loading placeholders */\nexport function addLoadingPlaceholders(html: string): string {\n  return html.replace(\n    /(<img\\s[^>]*)data-image-query=\"([^\"]+)\"([^>]*?)(?:\\s*\\/?>)/gi,\n    (_match, before, query, after) => {\n      if (before.includes('src=') || after.includes('src=')) return _match;\n      return `${before}src=\"${LOADING_PLACEHOLDER}\" data-image-query=\"${query}\" alt=\"${query}\"${after}>`;\n    }\n  );\n}\n\nexport interface StreamGenerateOptions {\n  /** Anthropic API key */\n  anthropicApiKey?: string;\n  /** OpenAI API key */\n  openaiApiKey?: string;\n  /** Model ID override */\n  model?: string;\n  /** System prompt */\n  systemPrompt: string;\n  /** User message content (text or multimodal parts) */\n  userContent: any[];\n  /** Pexels API key for image enrichment */\n  pexelsApiKey?: string;\n  /** Persist DALL-E images to permanent storage */\n  persistImage?: (tempUrl: string, query: string) => Promise<string>;\n  /** Called when a new section is parsed */\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 * Core streaming generation: stream AI text → parse NDJSON → emit sections → enrich images.\n * Used by both generateLanding and generateDocument.\n */\nexport async function streamGenerate(options: StreamGenerateOptions): Promise<Section3[]> {\n  const {\n    anthropicApiKey,\n    openaiApiKey: _openaiApiKey,\n    model: modelId,\n    systemPrompt,\n    userContent,\n    pexelsApiKey,\n    persistImage,\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({\n    openaiApiKey,\n    anthropicApiKey,\n    modelId,\n    defaultOpenai: \"gpt-4o\",\n    defaultAnthropic: \"claude-sonnet-4-6\",\n  });\n\n  const result = streamText({\n    model,\n    system: systemPrompt,\n    messages: [{ role: \"user\", content: userContent }],\n  });\n\n  const allSections: Section3[] = [];\n  const imagePromises: Promise<void>[] = [];\n  let sectionOrder = 0;\n  let buffer = \"\";\n\n  function enrichSection(sectionRef: Section3) {\n    const slots = findImageSlots(sectionRef.html);\n    if (slots.length === 0) return;\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            if (openaiApiKey) {\n              try {\n                const tempUrl = await generateImage(slot.query, openaiApiKey);\n                url = persistImage ? await persistImage(tempUrl, slot.query) : tempUrl;\n              } catch (e) {\n                console.warn(`[dalle] failed for \"${slot.query}\":`, e);\n              }\n            }\n            if (!url) {\n              const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);\n              url = img?.url || null;\n            }\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  function processObject(obj: any) {\n    if (!obj.html || !obj.label) return;\n    const section: Section3 = {\n      id: nanoid(8),\n      order: sectionOrder++,\n      html: addLoadingPlaceholders(obj.html),\n      label: obj.label,\n    };\n    allSections.push(section);\n    onSection?.(section);\n    enrichSection(section);\n  }\n\n  try {\n    for await (const chunk of result.textStream) {\n      buffer += chunk;\n      const [objects, remaining] = extractJsonObjects(buffer);\n      buffer = remaining;\n      for (const obj of objects) processObject(obj);\n    }\n\n    // Parse remaining buffer\n    if (buffer.trim()) {\n      let cleaned = buffer.trim();\n      if (cleaned.startsWith(\"```\")) {\n        cleaned = cleaned.replace(/^```(?:json)?\\s*/, \"\").replace(/\\s*```$/, \"\");\n      }\n      const [lastObjects] = extractJsonObjects(cleaned);\n      for (const obj of lastObjects) processObject(obj);\n    }\n\n    // Wait for image enrichment\n    await Promise.allSettled(imagePromises);\n\n    // Final fallback for images without src\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      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-XUQ5UX5B.js

@@ -0,0 +1,131 @@
+import {
+  dataUrlToImagePart,
+  streamGenerate
+} from "./chunk-PNEUKC6I.js";
+
+// src/generate.ts
+var 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.
+
+RULES:
+- Each section is a complete <section> tag with Tailwind CSS classes
+- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import, no @tailwind directives)
+- NO JavaScript, only HTML+Tailwind
+- Each section must be independent and self-contained
+- Responsive: mobile-first with sm/md/lg/xl breakpoints
+- 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:
+- 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):
+- 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
+- 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.
+- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.
+- ALL backgrounds MUST use: bg-primary, bg-primary-dark, bg-surface, bg-surface-alt
+- ALL text MUST use: text-on-surface, text-on-surface-muted, text-on-primary, text-accent. Use text-primary ONLY on bg-surface/bg-surface-alt (it's the same hue as bg-primary \u2014 invisible on primary backgrounds).
+- CONTRAST RULE: on bg-primary or bg-primary-dark \u2192 use ONLY text-on-primary. On bg-surface or bg-surface-alt \u2192 use text-on-surface, text-on-surface-muted, or text-primary. NEVER use text-primary on bg-primary \u2014 they are the SAME COLOR. NEVER put text-on-surface on bg-primary or text-on-primary on bg-surface. text-accent is decorative \u2014 use sparingly on bg-surface/bg-surface-alt only.
+- ANTI-PATTERN: NEVER put bg-primary on BOTH the section AND elements inside it. If section is bg-primary, inner cards/elements should be bg-surface. If section is bg-surface, cards can use bg-surface-alt or bg-primary.
+- For gradients: from-primary to-primary-dark, from-surface to-surface-alt
+- For hover: hover:bg-primary-dark, hover:bg-primary-light
+
+DESIGN PHILOSOPHY \u2014 what separates good from GREAT:
+- WHITESPACE is your best friend. Generous padding (py-24, py-32, px-8). Let elements breathe.
+- CONTRAST: mix dark sections with light ones. Alternate bg-primary and bg-surface sections.
+- TYPOGRAPHY: use extreme size differences for hierarchy (text-7xl headline next to text-sm label)
+- DEPTH: overlapping elements, negative margins (-mt-12), z-index layering, shadows
+- ASYMMETRY: avoid centering everything. Use grid-cols-5 with col-span-3 + col-span-2. Offset elements.
+- TEXTURE: use subtle patterns, gradients, border treatments, rounded-3xl mixed with sharp edges
+- Each section should have a COMPLETELY DIFFERENT layout from the others
+
+SECTION LAYOUT \u2014 CRITICAL:
+- Each <section> must be full-width (bg goes edge-to-edge). NO max-w on the section itself.
+- Constrain content inside with a wrapper div: <section class="bg-primary py-24"><div class="max-w-7xl mx-auto px-4 md:px-8">...content...</div></section>
+- EVERY section follows this pattern. The <section> handles bg color + vertical padding. The inner <div> handles horizontal padding + max-width.
+
+TESTIMONIALS SECTION:
+- Cards MUST use bg-surface or bg-surface-alt with text-on-surface
+- If section bg is bg-primary or bg-primary-dark, cards MUST be bg-surface (light cards on dark bg)
+- Quote text: text-on-surface, italic
+- Avatar: colored div with initials (bg-accent text-on-primary or bg-primary-light text-on-primary)
+- Name: text-on-surface font-semibold. Role/company: text-on-surface-muted
+- NEVER use same dark bg for both section AND cards
+
+HERO SECTION \u2014 your masterpiece:
+- Use a 2-column grid (lg:grid-cols-2) that fills the full height, NOT content floating in empty space
+- Left column: headline + description + CTAs, vertically centered with flex flex-col justify-center
+- Right column: large hero image (data-image-query) filling the column, or a bento-grid of image + stat cards
+- Bold oversized headline (text-4xl md:text-6xl lg:text-7xl font-black leading-tight)
+- Tag/label above headline (uppercase, tracking-wider, text-xs text-accent)
+- Short description paragraph (text-lg text-on-surface-muted, max-w-lg)
+- 2 CTAs: primary (large, px-8 py-4, with \u2192 arrow) + secondary (ghost/outlined)
+- Optional: social proof bar below CTAs (avatar stack + "2,847+ users" text)
+- Min height: min-h-[90vh] with items-center on the grid so content is vertically centered
+- CRITICAL: the grid must stretch to fill the section height. Use min-h-[90vh] on the grid container itself, not just the section
+- NEVER leave large empty areas \u2014 if using min-h-[90vh], content must be centered/distributed within it
+
+TAILWIND v3 NOTES:
+- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)
+- Borders: border + border-gray-200 for visible borders`;
+var PROMPT_SUFFIX = `
+
+OUTPUT FORMAT: NDJSON \u2014 one JSON object per line, NO wrapper array, NO markdown fences.
+Each line: {"label": "Short Label", "html": "<section>...</section>"}
+
+Generate 7-9 sections. Always start with Hero and end with Footer.
+IMPORTANT: Make each section VISUALLY UNIQUE \u2014 different layouts, different background colors, different grid structures.
+Think like a premium design agency creating a $50K landing page.
+NO generic Bootstrap layouts. Use creative grids, bento layouts, overlapping elements, asymmetric columns.`;
+async function generateLanding(options) {
+  const {
+    prompt,
+    referenceImage,
+    extraInstructions,
+    systemPrompt = SYSTEM_PROMPT,
+    ...rest
+  } = options;
+  const extra = extraInstructions ? `
+Additional instructions: ${extraInstructions}` : "";
+  const content = [];
+  if (referenceImage) {
+    const converted = dataUrlToImagePart(referenceImage);
+    if (converted) {
+      content.push({ type: "image", ...converted });
+    } else {
+      content.push({ type: "image", image: referenceImage });
+    }
+    content.push({
+      type: "text",
+      text: `Generate a landing page inspired by this reference image for: ${prompt}${extra}${PROMPT_SUFFIX}`
+    });
+  } else {
+    content.push({
+      type: "text",
+      text: `Generate a landing page for: ${prompt}${extra}${PROMPT_SUFFIX}`
+    });
+  }
+  return streamGenerate({
+    ...rest,
+    systemPrompt,
+    userContent: content
+  });
+}
+
+export {
+  SYSTEM_PROMPT,
+  PROMPT_SUFFIX,
+  generateLanding
+};
+//# sourceMappingURL=chunk-XUQ5UX5B.js.map

package/dist/chunk-XUQ5UX5B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/generate.ts"],"sourcesContent":["import { streamGenerate, dataUrlToImagePart, extractJsonObjects } from \"./streamCore\";\nimport type { Section3 } from \"./types\";\n\nexport { extractJsonObjects };\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-accent. Use text-primary ONLY on bg-surface/bg-surface-alt (it's the same hue as bg-primary — invisible on primary backgrounds).\n- CONTRAST RULE: on bg-primary or bg-primary-dark → use ONLY text-on-primary. On bg-surface or bg-surface-alt → use text-on-surface, text-on-surface-muted, or text-primary. NEVER use text-primary on bg-primary — they are the SAME COLOR. NEVER put text-on-surface on bg-primary or text-on-primary on bg-surface. text-accent is decorative — use sparingly on bg-surface/bg-surface-alt only.\n- ANTI-PATTERN: NEVER put bg-primary on BOTH the section AND elements inside it. If section is bg-primary, inner cards/elements should be bg-surface. If section is bg-surface, cards can use bg-surface-alt or bg-primary.\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\nSECTION LAYOUT — CRITICAL:\n- Each <section> must be full-width (bg goes edge-to-edge). NO max-w on the section itself.\n- Constrain content inside with a wrapper div: <section class=\"bg-primary py-24\"><div class=\"max-w-7xl mx-auto px-4 md:px-8\">...content...</div></section>\n- EVERY section follows this pattern. The <section> handles bg color + vertical padding. The inner <div> handles horizontal padding + max-width.\n\nTESTIMONIALS SECTION:\n- Cards MUST use bg-surface or bg-surface-alt with text-on-surface\n- If section bg is bg-primary or bg-primary-dark, cards MUST be bg-surface (light cards on dark bg)\n- Quote text: text-on-surface, italic\n- Avatar: colored div with initials (bg-accent text-on-primary or bg-primary-light text-on-primary)\n- Name: text-on-surface font-semibold. Role/company: text-on-surface-muted\n- NEVER use same dark bg for both section AND cards\n\nHERO SECTION — your masterpiece:\n- Use a 2-column grid (lg:grid-cols-2) that fills the full height, NOT content floating in empty space\n- Left column: headline + description + CTAs, vertically centered with flex flex-col justify-center\n- Right column: large hero image (data-image-query) filling the column, or a bento-grid of image + stat cards\n- Bold oversized headline (text-4xl md:text-6xl lg:text-7xl font-black leading-tight)\n- Tag/label above headline (uppercase, tracking-wider, text-xs text-accent)\n- Short description paragraph (text-lg text-on-surface-muted, max-w-lg)\n- 2 CTAs: primary (large, px-8 py-4, with → arrow) + secondary (ghost/outlined)\n- Optional: social proof bar below CTAs (avatar stack + \"2,847+ users\" text)\n- Min height: min-h-[90vh] with items-center on the grid so content is vertically centered\n- CRITICAL: the grid must stretch to fill the section height. Use min-h-[90vh] on the grid container itself, not just the section\n- NEVER leave large empty areas — if using min-h-[90vh], content must be centered/distributed within it\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\nexport interface GenerateOptions {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  referenceImage?: string;\n  extraInstructions?: string;\n  systemPrompt?: string;\n  model?: string;\n  pexelsApiKey?: string;\n  persistImage?: (tempUrl: string, query: string) => Promise<string>;\n  onSection?: (section: Section3) => void;\n  onImageUpdate?: (sectionId: string, html: string) => void;\n  onDone?: (sections: Section3[]) => void;\n  onError?: (error: Error) => void;\n}\n\n/**\n * Generate a landing page with streaming AI + image enrichment.\n */\nexport async function generateLanding(options: GenerateOptions): Promise<Section3[]> {\n  const {\n    prompt,\n    referenceImage,\n    extraInstructions,\n    systemPrompt = SYSTEM_PROMPT,\n    ...rest\n  } = options;\n\n  const extra = extraInstructions ? `\\nAdditional instructions: ${extraInstructions}` : \"\";\n  const content: any[] = [];\n\n  if (referenceImage) {\n    const converted = dataUrlToImagePart(referenceImage);\n    if (converted) {\n      content.push({ type: \"image\", ...converted });\n    } else {\n      content.push({ type: \"image\", image: referenceImage });\n    }\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  return streamGenerate({\n    ...rest,\n    systemPrompt,\n    userContent: content,\n  });\n}\n"],"mappings":";;;;;;AAKO,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4EtB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B7B,eAAsB,gBAAgB,SAA+C;AACnF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAQ,oBAAoB;AAAA,2BAA8B,iBAAiB,KAAK;AACtF,QAAM,UAAiB,CAAC;AAExB,MAAI,gBAAgB;AAClB,UAAM,YAAY,mBAAmB,cAAc;AACnD,QAAI,WAAW;AACb,cAAQ,KAAK,EAAE,MAAM,SAAS,GAAG,UAAU,CAAC;AAAA,IAC9C,OAAO;AACL,cAAQ,KAAK,EAAE,MAAM,SAAS,OAAO,eAAe,CAAC;AAAA,IACvD;AACA,YAAQ,KAAK;AAAA,MACX,MAAM;AAAA,MACN,MAAM,iEAAiE,MAAM,GAAG,KAAK,GAAG,aAAa;AAAA,IACvG,CAAC;AAAA,EACH,OAAO;AACL,YAAQ,KAAK;AAAA,MACX,MAAM;AAAA,MACN,MAAM,gCAAgC,MAAM,GAAG,KAAK,GAAG,aAAa;AAAA,IACtE,CAAC;AAAA,EACH;AAEA,SAAO,eAAe;AAAA,IACpB,GAAG;AAAA,IACH;AAAA,IACA,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

package/dist/generate.d.ts

@@ -1,42 +1,29 @@
 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\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-accent. Use text-primary ONLY on bg-surface/bg-surface-alt (it's the same hue as bg-primary \u2014 invisible on primary backgrounds).\n- CONTRAST RULE: on bg-primary or bg-primary-dark \u2192 use ONLY text-on-primary. On bg-surface or bg-surface-alt \u2192 use text-on-surface, text-on-surface-muted, or text-primary. NEVER use text-primary on bg-primary \u2014 they are the SAME COLOR. NEVER put text-on-surface on bg-primary or text-on-primary on bg-surface. text-accent is decorative \u2014 use sparingly on bg-surface/bg-surface-alt only.\n- ANTI-PATTERN: NEVER put bg-primary on BOTH the section AND elements inside it. If section is bg-primary, inner cards/elements should be bg-surface. If section is bg-surface, cards can use bg-surface-alt or bg-primary.\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\nSECTION LAYOUT \u2014 CRITICAL:\n- Each <section> must be full-width (bg goes edge-to-edge). NO max-w on the section itself.\n- Constrain content inside with a wrapper div: <section class=\"bg-primary py-24\"><div class=\"max-w-7xl mx-auto px-4 md:px-8\">...content...</div></section>\n- EVERY section follows this pattern. The <section> handles bg color + vertical padding. The inner <div> handles horizontal padding + max-width.\n\nTESTIMONIALS SECTION:\n- Cards MUST use bg-surface or bg-surface-alt with text-on-surface\n- If section bg is bg-primary or bg-primary-dark, cards MUST be bg-surface (light cards on dark bg)\n- Quote text: text-on-surface, italic\n- Avatar: colored div with initials (bg-accent text-on-primary or bg-primary-light text-on-primary)\n- Name: text-on-surface font-semibold. Role/company: text-on-surface-muted\n- NEVER use same dark bg for both section AND cards\n\nHERO SECTION \u2014 your masterpiece:\n- Use a 2-column grid (lg:grid-cols-2) that fills the full height, NOT content floating in empty space\n- Left column: headline + description + CTAs, vertically centered with flex flex-col justify-center\n- Right column: large hero image (data-image-query) filling the column, or a bento-grid of image + stat cards\n- Bold oversized headline (text-4xl md:text-6xl lg:text-7xl font-black leading-tight)\n- Tag/label above headline (uppercase, tracking-wider, text-xs text-accent)\n- Short description paragraph (text-lg text-on-surface-muted, max-w-lg)\n- 2 CTAs: primary (large, px-8 py-4, with \u2192 arrow) + secondary (ghost/outlined)\n- Optional: social proof bar below CTAs (avatar stack + \"2,847+ users\" text)\n- Min height: min-h-[90vh] with items-center on the grid so content is vertically centered\n- CRITICAL: the grid must stretch to fill the section height. Use min-h-[90vh] on the grid container itself, not just the section\n- NEVER leave large empty areas \u2014 if using min-h-[90vh], content must be centered/distributed within it\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];
+
+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-accent. Use text-primary ONLY on bg-surface/bg-surface-alt (it's the same hue as bg-primary \u2014 invisible on primary backgrounds).\n- CONTRAST RULE: on bg-primary or bg-primary-dark \u2192 use ONLY text-on-primary. On bg-surface or bg-surface-alt \u2192 use text-on-surface, text-on-surface-muted, or text-primary. NEVER use text-primary on bg-primary \u2014 they are the SAME COLOR. NEVER put text-on-surface on bg-primary or text-on-primary on bg-surface. text-accent is decorative \u2014 use sparingly on bg-surface/bg-surface-alt only.\n- ANTI-PATTERN: NEVER put bg-primary on BOTH the section AND elements inside it. If section is bg-primary, inner cards/elements should be bg-surface. If section is bg-surface, cards can use bg-surface-alt or bg-primary.\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\nSECTION LAYOUT \u2014 CRITICAL:\n- Each <section> must be full-width (bg goes edge-to-edge). NO max-w on the section itself.\n- Constrain content inside with a wrapper div: <section class=\"bg-primary py-24\"><div class=\"max-w-7xl mx-auto px-4 md:px-8\">...content...</div></section>\n- EVERY section follows this pattern. The <section> handles bg color + vertical padding. The inner <div> handles horizontal padding + max-width.\n\nTESTIMONIALS SECTION:\n- Cards MUST use bg-surface or bg-surface-alt with text-on-surface\n- If section bg is bg-primary or bg-primary-dark, cards MUST be bg-surface (light cards on dark bg)\n- Quote text: text-on-surface, italic\n- Avatar: colored div with initials (bg-accent text-on-primary or bg-primary-light text-on-primary)\n- Name: text-on-surface font-semibold. Role/company: text-on-surface-muted\n- NEVER use same dark bg for both section AND cards\n\nHERO SECTION \u2014 your masterpiece:\n- Use a 2-column grid (lg:grid-cols-2) that fills the full height, NOT content floating in empty space\n- Left column: headline + description + CTAs, vertically centered with flex flex-col justify-center\n- Right column: large hero image (data-image-query) filling the column, or a bento-grid of image + stat cards\n- Bold oversized headline (text-4xl md:text-6xl lg:text-7xl font-black leading-tight)\n- Tag/label above headline (uppercase, tracking-wider, text-xs text-accent)\n- Short description paragraph (text-lg text-on-surface-muted, max-w-lg)\n- 2 CTAs: primary (large, px-8 py-4, with \u2192 arrow) + secondary (ghost/outlined)\n- Optional: social proof bar below CTAs (avatar stack + \"2,847+ users\" text)\n- Min height: min-h-[90vh] with items-center on the grid so content is vertically centered\n- CRITICAL: the grid must stretch to fill the section height. Use min-h-[90vh] on the grid container itself, not just the section\n- NEVER leave large empty areas \u2014 if using min-h-[90vh], content must be centered/distributed within it\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.";
 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 with temp DALL-E URL + query, returns permanent URL. Use to persist to S3/etc. */
     persistImage?: (tempUrl: string, query: string) => Promise<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[]>;
 

package/dist/generate.js

@@ -1,9 +1,11 @@
 import {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,
-  extractJsonObjects,
   generateLanding
-} from "./chunk-MZ57RXKT.js";
+} from "./chunk-XUQ5UX5B.js";
+import {
+  extractJsonObjects
+} from "./chunk-PNEUKC6I.js";
 import "./chunk-FM4IJA64.js";
 export {
   PROMPT_SUFFIX,

package/dist/generateDocument.d.ts

@@ -0,0 +1,25 @@
+import { S as Section3 } from './types-Flpl4wDs.js';
+
+declare const DOCUMENT_SYSTEM_PROMPT = "You are a professional document designer who creates stunning letter-sized (8.5\" \u00D7 11\") document pages using HTML + Tailwind CSS.\n\nRULES:\n- Each page is a <section> element sized for letter paper\n- Page structure: <section class=\"w-[8.5in] min-h-[11in] bg-white relative overflow-hidden p-[0.75in]\">\n- Content MUST NOT overflow page boundaries \u2014 be conservative with spacing\n- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import)\n- NO JavaScript, only HTML+Tailwind\n- All text content in Spanish unless the prompt specifies otherwise\n- Use real content from the source material, not Lorem ipsum\n- NOT responsive \u2014 fixed letter size, no breakpoints needed\n- Background is always white paper; use colored accents for decoration\n\nDESIGN:\n- Professional, colorful designs: geometric decorations, gradients, accent colors\n- Typography: use font weights (font-light to font-black), good hierarchy\n- Tables: Tailwind table classes, alternating row colors, clean borders\n- Decorative elements: colored sidebars, header bands, icon accents, SVG shapes\n- First page MUST be a cover/title page with impactful design\n- Use page-appropriate content density \u2014 don't cram too much on one page\n- For numerical data: styled tables, colored bars, progress elements\n\nCOLOR SYSTEM \u2014 use semantic classes for decorative elements:\n- bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary\n- bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted\n- bg-secondary, text-secondary, bg-accent, text-accent\n- Page background is ALWAYS white (bg-white on the section itself)\n- Use semantic colors for headers, sidebars, decorative bars, table headers, accents\n- CONTRAST RULE: on bg-primary \u2192 text-on-primary. On white/bg-surface \u2192 text-on-surface or text-primary\n- Gradients: from-primary to-primary-dark\n\nIMAGES:\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 include a src attribute \u2014 the system auto-replaces data-image-query with a real image\n- For avatar-like elements, use colored divs with initials instead of img tags\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 DOCUMENT_PROMPT_SUFFIX = "\n\nOUTPUT FORMAT: NDJSON \u2014 one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Page Title\", \"html\": \"<section class='w-[8.5in] min-h-[11in] bg-white relative overflow-hidden p-[0.75in]'>...</section>\"}\n\nGenerate 3-8 pages depending on content length. First page = cover/title page.\nEach page must fit within letter size (8.5\" \u00D7 11\"). Be conservative with spacing.\nMake each page visually distinct \u2014 different layouts, different accent placements.";
+interface GenerateDocumentOptions {
+    anthropicApiKey?: string;
+    openaiApiKey?: string;
+    prompt: string;
+    logoUrl?: string;
+    referenceImage?: string;
+    extraInstructions?: string;
+    model?: string;
+    pexelsApiKey?: string;
+    persistImage?: (tempUrl: string, query: string) => Promise<string>;
+    onSection?: (section: Section3) => void;
+    onImageUpdate?: (sectionId: string, html: string) => void;
+    onDone?: (sections: Section3[]) => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * Generate a multi-page document with streaming AI + image enrichment.
+ */
+declare function generateDocument(options: GenerateDocumentOptions): Promise<Section3[]>;
+
+export { DOCUMENT_PROMPT_SUFFIX, DOCUMENT_SYSTEM_PROMPT, type GenerateDocumentOptions, generateDocument };

package/dist/generateDocument.js

@@ -0,0 +1,13 @@
+import {
+  DOCUMENT_PROMPT_SUFFIX,
+  DOCUMENT_SYSTEM_PROMPT,
+  generateDocument
+} from "./chunk-5Y3R63LZ.js";
+import "./chunk-PNEUKC6I.js";
+import "./chunk-FM4IJA64.js";
+export {
+  DOCUMENT_PROMPT_SUFFIX,
+  DOCUMENT_SYSTEM_PROMPT,
+  generateDocument
+};
+//# sourceMappingURL=generateDocument.js.map

package/dist/generateDocument.js.map

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

package/dist/index.d.ts

@@ -3,6 +3,7 @@ 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 { DOCUMENT_PROMPT_SUFFIX, DOCUMENT_SYSTEM_PROMPT, GenerateDocumentOptions, generateDocument } from './generateDocument.js';
 export { REFINE_SYSTEM, RefineOptions, refineLanding } from './refine.js';
 export { DeployToEasyBitsOptions, DeployToS3Options, deployToEasyBits, deployToS3 } from './deploy.js';
 export { EnrichImagesOptions, PexelsResult, enrichImages, findImageSlots, generateImage, searchImage } from './images.js';

package/dist/index.js

@@ -9,9 +9,16 @@ import "./chunk-RTGCZUNJ.js";
 import {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,
-  extractJsonObjects,
   generateLanding
-} from "./chunk-MZ57RXKT.js";
+} from "./chunk-XUQ5UX5B.js";
+import {
+  DOCUMENT_PROMPT_SUFFIX,
+  DOCUMENT_SYSTEM_PROMPT,
+  generateDocument
+} from "./chunk-5Y3R63LZ.js";
+import {
+  extractJsonObjects
+} from "./chunk-PNEUKC6I.js";
 import {
   REFINE_SYSTEM,
   refineLanding
@@ -39,6 +46,8 @@ import {
 export {
   Canvas,
   CodeEditor,
+  DOCUMENT_PROMPT_SUFFIX,
+  DOCUMENT_SYSTEM_PROMPT,
   FloatingToolbar,
   LANDING_THEMES,
   PROMPT_SUFFIX,
@@ -57,6 +66,7 @@ export {
   enrichImages,
   extractJsonObjects,
   findImageSlots,
+  generateDocument,
   generateImage,
   generateLanding,
   getIframeScript,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.2.26",
+  "version": "0.2.28",
   "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",
@@ -23,6 +23,10 @@
       "types": "./dist/generate.d.ts",
       "import": "./dist/generate.js"
     },
+    "./generateDocument": {
+      "types": "./dist/generateDocument.d.ts",
+      "import": "./dist/generateDocument.js"
+    },
     "./refine": {
       "types": "./dist/refine.d.ts",
       "import": "./dist/refine.js"

package/dist/chunk-MZ57RXKT.js

@@ -1,353 +0,0 @@
-import {
-  findImageSlots,
-  generateImage,
-  searchImage
-} from "./chunk-FM4IJA64.js";
-
-// src/generate.ts
-import { streamText } from "ai";
-import { createAnthropic } from "@ai-sdk/anthropic";
-import { nanoid } from "nanoid";
-async function resolveModel(opts) {
-  const anthropicKey = opts.anthropicApiKey || process.env.ANTHROPIC_API_KEY;
-  if (anthropicKey) {
-    const anthropic = createAnthropic({ apiKey: anthropicKey });
-    return anthropic(opts.modelId || opts.defaultAnthropic);
-  }
-  const openaiKey = opts.openaiApiKey || process.env.OPENAI_API_KEY;
-  if (openaiKey) {
-    const { createOpenAI } = await import("@ai-sdk/openai");
-    const openai = createOpenAI({ apiKey: openaiKey });
-    return openai(opts.modelId || opts.defaultOpenai);
-  }
-  return createAnthropic()(opts.modelId || opts.defaultAnthropic);
-}
-var 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.
-
-RULES:
-- Each section is a complete <section> tag with Tailwind CSS classes
-- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import, no @tailwind directives)
-- NO JavaScript, only HTML+Tailwind
-- Each section must be independent and self-contained
-- Responsive: mobile-first with sm/md/lg/xl breakpoints
-- 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:
-- 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):
-- 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
-- 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.
-- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.
-- ALL backgrounds MUST use: bg-primary, bg-primary-dark, bg-surface, bg-surface-alt
-- ALL text MUST use: text-on-surface, text-on-surface-muted, text-on-primary, text-accent. Use text-primary ONLY on bg-surface/bg-surface-alt (it's the same hue as bg-primary \u2014 invisible on primary backgrounds).
-- CONTRAST RULE: on bg-primary or bg-primary-dark \u2192 use ONLY text-on-primary. On bg-surface or bg-surface-alt \u2192 use text-on-surface, text-on-surface-muted, or text-primary. NEVER use text-primary on bg-primary \u2014 they are the SAME COLOR. NEVER put text-on-surface on bg-primary or text-on-primary on bg-surface. text-accent is decorative \u2014 use sparingly on bg-surface/bg-surface-alt only.
-- ANTI-PATTERN: NEVER put bg-primary on BOTH the section AND elements inside it. If section is bg-primary, inner cards/elements should be bg-surface. If section is bg-surface, cards can use bg-surface-alt or bg-primary.
-- For gradients: from-primary to-primary-dark, from-surface to-surface-alt
-- For hover: hover:bg-primary-dark, hover:bg-primary-light
-
-DESIGN PHILOSOPHY \u2014 what separates good from GREAT:
-- WHITESPACE is your best friend. Generous padding (py-24, py-32, px-8). Let elements breathe.
-- CONTRAST: mix dark sections with light ones. Alternate bg-primary and bg-surface sections.
-- TYPOGRAPHY: use extreme size differences for hierarchy (text-7xl headline next to text-sm label)
-- DEPTH: overlapping elements, negative margins (-mt-12), z-index layering, shadows
-- ASYMMETRY: avoid centering everything. Use grid-cols-5 with col-span-3 + col-span-2. Offset elements.
-- TEXTURE: use subtle patterns, gradients, border treatments, rounded-3xl mixed with sharp edges
-- Each section should have a COMPLETELY DIFFERENT layout from the others
-
-SECTION LAYOUT \u2014 CRITICAL:
-- Each <section> must be full-width (bg goes edge-to-edge). NO max-w on the section itself.
-- Constrain content inside with a wrapper div: <section class="bg-primary py-24"><div class="max-w-7xl mx-auto px-4 md:px-8">...content...</div></section>
-- EVERY section follows this pattern. The <section> handles bg color + vertical padding. The inner <div> handles horizontal padding + max-width.
-
-TESTIMONIALS SECTION:
-- Cards MUST use bg-surface or bg-surface-alt with text-on-surface
-- If section bg is bg-primary or bg-primary-dark, cards MUST be bg-surface (light cards on dark bg)
-- Quote text: text-on-surface, italic
-- Avatar: colored div with initials (bg-accent text-on-primary or bg-primary-light text-on-primary)
-- Name: text-on-surface font-semibold. Role/company: text-on-surface-muted
-- NEVER use same dark bg for both section AND cards
-
-HERO SECTION \u2014 your masterpiece:
-- Use a 2-column grid (lg:grid-cols-2) that fills the full height, NOT content floating in empty space
-- Left column: headline + description + CTAs, vertically centered with flex flex-col justify-center
-- Right column: large hero image (data-image-query) filling the column, or a bento-grid of image + stat cards
-- Bold oversized headline (text-4xl md:text-6xl lg:text-7xl font-black leading-tight)
-- Tag/label above headline (uppercase, tracking-wider, text-xs text-accent)
-- Short description paragraph (text-lg text-on-surface-muted, max-w-lg)
-- 2 CTAs: primary (large, px-8 py-4, with \u2192 arrow) + secondary (ghost/outlined)
-- Optional: social proof bar below CTAs (avatar stack + "2,847+ users" text)
-- Min height: min-h-[90vh] with items-center on the grid so content is vertically centered
-- CRITICAL: the grid must stretch to fill the section height. Use min-h-[90vh] on the grid container itself, not just the section
-- NEVER leave large empty areas \u2014 if using min-h-[90vh], content must be centered/distributed within it
-
-TAILWIND v3 NOTES:
-- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)
-- Borders: border + border-gray-200 for visible borders`;
-var PROMPT_SUFFIX = `
-
-OUTPUT FORMAT: NDJSON \u2014 one JSON object per line, NO wrapper array, NO markdown fences.
-Each line: {"label": "Short Label", "html": "<section>...</section>"}
-
-Generate 7-9 sections. Always start with Hero and end with Footer.
-IMPORTANT: Make each section VISUALLY UNIQUE \u2014 different layouts, different background colors, different grid structures.
-Think like a premium design agency creating a $50K landing page.
-NO generic Bootstrap layouts. Use creative grids, bento layouts, overlapping elements, asymmetric columns.`;
-function extractJsonObjects(text) {
-  const objects = [];
-  let remaining = text;
-  while (remaining.length > 0) {
-    remaining = remaining.trimStart();
-    if (!remaining.startsWith("{")) {
-      const nextBrace = remaining.indexOf("{");
-      if (nextBrace === -1) break;
-      remaining = remaining.slice(nextBrace);
-      continue;
-    }
-    let depth = 0;
-    let inString = false;
-    let escape = false;
-    let end = -1;
-    for (let i = 0; i < remaining.length; i++) {
-      const ch = remaining[i];
-      if (escape) {
-        escape = false;
-        continue;
-      }
-      if (ch === "\\") {
-        escape = true;
-        continue;
-      }
-      if (ch === '"') {
-        inString = !inString;
-        continue;
-      }
-      if (inString) continue;
-      if (ch === "{") depth++;
-      if (ch === "}") {
-        depth--;
-        if (depth === 0) {
-          end = i;
-          break;
-        }
-      }
-    }
-    if (end === -1) break;
-    const candidate = remaining.slice(0, end + 1);
-    remaining = remaining.slice(end + 1);
-    try {
-      objects.push(JSON.parse(candidate));
-    } catch {
-    }
-  }
-  return [objects, remaining];
-}
-var LOADING_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500"><defs><linearGradient id="sh" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="%23e5e7eb"/><stop offset="50%" stop-color="%23f9fafb"/><stop offset="100%" stop-color="%23e5e7eb"/></linearGradient></defs><rect fill="%23f3f4f6" width="800" height="500" rx="12"/><rect fill="url(%23sh)" width="800" height="500" rx="12"><animate attributeName="x" from="-800" to="800" dur="1.5s" repeatCount="indefinite"/></rect><circle cx="370" cy="230" r="8" fill="%239ca3af" opacity=".5"><animate attributeName="opacity" values=".3;1;.3" dur="1.5s" repeatCount="indefinite"/></circle><circle cx="400" cy="230" r="8" fill="%239ca3af" opacity=".5"><animate attributeName="opacity" values=".3;1;.3" dur="1.5s" begin=".2s" repeatCount="indefinite"/></circle><circle cx="430" cy="230" r="8" fill="%239ca3af" opacity=".5"><animate attributeName="opacity" values=".3;1;.3" dur="1.5s" begin=".4s" repeatCount="indefinite"/></circle><text x="400" y="270" text-anchor="middle" fill="%239ca3af" font-family="system-ui" font-size="14">Generando imagen...</text></svg>`)}`;
-function addLoadingPlaceholders(html) {
-  return html.replace(
-    /(<img\s[^>]*)data-image-query="([^"]+)"([^>]*?)(?:\s*\/?>)/gi,
-    (_match, before, query, after) => {
-      if (before.includes("src=") || after.includes("src=")) return _match;
-      return `${before}src="${LOADING_PLACEHOLDER}" data-image-query="${query}" alt="${query}"${after}>`;
-    }
-  );
-}
-async function generateLanding(options) {
-  const {
-    anthropicApiKey,
-    openaiApiKey: _openaiApiKey,
-    prompt,
-    referenceImage,
-    extraInstructions,
-    systemPrompt = SYSTEM_PROMPT,
-    model: modelId,
-    pexelsApiKey,
-    persistImage,
-    onSection,
-    onImageUpdate,
-    onDone,
-    onError
-  } = options;
-  const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;
-  const model = await resolveModel({ openaiApiKey, anthropicApiKey, modelId, defaultOpenai: "gpt-4o", defaultAnthropic: "claude-sonnet-4-6" });
-  const extra = extraInstructions ? `
-Additional instructions: ${extraInstructions}` : "";
-  const content = [];
-  if (referenceImage) {
-    content.push({ type: "image", image: referenceImage });
-    content.push({
-      type: "text",
-      text: `Generate a landing page inspired by this reference image for: ${prompt}${extra}${PROMPT_SUFFIX}`
-    });
-  } else {
-    content.push({
-      type: "text",
-      text: `Generate a landing page for: ${prompt}${extra}${PROMPT_SUFFIX}`
-    });
-  }
-  const result = streamText({
-    model,
-    system: systemPrompt,
-    messages: [{ role: "user", content }]
-  });
-  const allSections = [];
-  const imagePromises = [];
-  let sectionOrder = 0;
-  let buffer = "";
-  try {
-    for await (const chunk of result.textStream) {
-      buffer += chunk;
-      const [objects, remaining] = extractJsonObjects(buffer);
-      buffer = remaining;
-      for (const obj of objects) {
-        if (!obj.html || !obj.label) continue;
-        const section = {
-          id: nanoid(8),
-          order: sectionOrder++,
-          html: obj.html,
-          label: obj.label
-        };
-        section.html = addLoadingPlaceholders(section.html);
-        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;
-                  if (openaiApiKey) {
-                    try {
-                      const tempUrl = await generateImage(slot.query, openaiApiKey);
-                      url = persistImage ? await persistImage(tempUrl, slot.query) : tempUrl;
-                    } catch (e) {
-                      console.warn(`[dalle] failed for "${slot.query}":`, e);
-                    }
-                  }
-                  if (!url) {
-                    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);
-              }
-            })()
-          );
-        }
-      }
-    }
-    if (buffer.trim()) {
-      let cleaned = buffer.trim();
-      if (cleaned.startsWith("```")) {
-        cleaned = cleaned.replace(/^```(?:json)?\s*/, "").replace(/\s*```$/, "");
-      }
-      const [lastObjects] = extractJsonObjects(cleaned);
-      for (const obj of lastObjects) {
-        if (!obj.html || !obj.label) continue;
-        const section = {
-          id: nanoid(8),
-          order: sectionOrder++,
-          html: obj.html,
-          label: obj.label
-        };
-        section.html = addLoadingPlaceholders(section.html);
-        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) {
-    const error = err instanceof Error ? err : new Error(err?.message || "Generation failed");
-    onError?.(error);
-    throw error;
-  }
-}
-
-export {
-  SYSTEM_PROMPT,
-  PROMPT_SUFFIX,
-  extractJsonObjects,
-  generateLanding
-};
-//# sourceMappingURL=chunk-MZ57RXKT.js.map

package/dist/chunk-MZ57RXKT.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, type EnrichImagesOptions } 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  // Prefer Anthropic for text generation when both keys are available\n  const anthropicKey = opts.anthropicApiKey || process.env.ANTHROPIC_API_KEY;\n  if (anthropicKey) {\n    const anthropic = createAnthropic({ apiKey: anthropicKey });\n    return anthropic(opts.modelId || opts.defaultAnthropic);\n  }\n  // Fallback to OpenAI for text only if no Anthropic key\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  // Last resort: createAnthropic() without key (uses env var)\n  return createAnthropic()(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-accent. Use text-primary ONLY on bg-surface/bg-surface-alt (it's the same hue as bg-primary — invisible on primary backgrounds).\n- CONTRAST RULE: on bg-primary or bg-primary-dark → use ONLY text-on-primary. On bg-surface or bg-surface-alt → use text-on-surface, text-on-surface-muted, or text-primary. NEVER use text-primary on bg-primary — they are the SAME COLOR. NEVER put text-on-surface on bg-primary or text-on-primary on bg-surface. text-accent is decorative — use sparingly on bg-surface/bg-surface-alt only.\n- ANTI-PATTERN: NEVER put bg-primary on BOTH the section AND elements inside it. If section is bg-primary, inner cards/elements should be bg-surface. If section is bg-surface, cards can use bg-surface-alt or bg-primary.\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\nSECTION LAYOUT — CRITICAL:\n- Each <section> must be full-width (bg goes edge-to-edge). NO max-w on the section itself.\n- Constrain content inside with a wrapper div: <section class=\"bg-primary py-24\"><div class=\"max-w-7xl mx-auto px-4 md:px-8\">...content...</div></section>\n- EVERY section follows this pattern. The <section> handles bg color + vertical padding. The inner <div> handles horizontal padding + max-width.\n\nTESTIMONIALS SECTION:\n- Cards MUST use bg-surface or bg-surface-alt with text-on-surface\n- If section bg is bg-primary or bg-primary-dark, cards MUST be bg-surface (light cards on dark bg)\n- Quote text: text-on-surface, italic\n- Avatar: colored div with initials (bg-accent text-on-primary or bg-primary-light text-on-primary)\n- Name: text-on-surface font-semibold. Role/company: text-on-surface-muted\n- NEVER use same dark bg for both section AND cards\n\nHERO SECTION — your masterpiece:\n- Use a 2-column grid (lg:grid-cols-2) that fills the full height, NOT content floating in empty space\n- Left column: headline + description + CTAs, vertically centered with flex flex-col justify-center\n- Right column: large hero image (data-image-query) filling the column, or a bento-grid of image + stat cards\n- Bold oversized headline (text-4xl md:text-6xl lg:text-7xl font-black leading-tight)\n- Tag/label above headline (uppercase, tracking-wider, text-xs text-accent)\n- Short description paragraph (text-lg text-on-surface-muted, max-w-lg)\n- 2 CTAs: primary (large, px-8 py-4, with → arrow) + secondary (ghost/outlined)\n- Optional: social proof bar below CTAs (avatar stack + \"2,847+ users\" text)\n- Min height: min-h-[90vh] with items-center on the grid so content is vertically centered\n- CRITICAL: the grid must stretch to fill the section height. Use min-h-[90vh] on the grid container itself, not just the section\n- NEVER leave large empty areas — if using min-h-[90vh], content must be centered/distributed within it\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\n/** Inline SVG data URI: animated \"generating\" placeholder for images */\nconst LOADING_PLACEHOLDER = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"500\" viewBox=\"0 0 800 500\"><defs><linearGradient id=\"sh\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0%\" stop-color=\"%23e5e7eb\"/><stop offset=\"50%\" stop-color=\"%23f9fafb\"/><stop offset=\"100%\" stop-color=\"%23e5e7eb\"/></linearGradient></defs><rect fill=\"%23f3f4f6\" width=\"800\" height=\"500\" rx=\"12\"/><rect fill=\"url(%23sh)\" width=\"800\" height=\"500\" rx=\"12\"><animate attributeName=\"x\" from=\"-800\" to=\"800\" dur=\"1.5s\" repeatCount=\"indefinite\"/></rect><circle cx=\"370\" cy=\"230\" r=\"8\" fill=\"%239ca3af\" opacity=\".5\"><animate attributeName=\"opacity\" values=\".3;1;.3\" dur=\"1.5s\" repeatCount=\"indefinite\"/></circle><circle cx=\"400\" cy=\"230\" r=\"8\" fill=\"%239ca3af\" opacity=\".5\"><animate attributeName=\"opacity\" values=\".3;1;.3\" dur=\"1.5s\" begin=\".2s\" repeatCount=\"indefinite\"/></circle><circle cx=\"430\" cy=\"230\" r=\"8\" fill=\"%239ca3af\" opacity=\".5\"><animate attributeName=\"opacity\" values=\".3;1;.3\" dur=\"1.5s\" begin=\".4s\" repeatCount=\"indefinite\"/></circle><text x=\"400\" y=\"270\" text-anchor=\"middle\" fill=\"%239ca3af\" font-family=\"system-ui\" font-size=\"14\">Generando imagen...</text></svg>`)}`;\n\n/** Replace data-image-query attrs with animated loading placeholders */\nfunction addLoadingPlaceholders(html: string): string {\n  return html.replace(\n    /(<img\\s[^>]*)data-image-query=\"([^\"]+)\"([^>]*?)(?:\\s*\\/?>)/gi,\n    (_match, before, query, after) => {\n      // Don't add src if already has one\n      if (before.includes('src=') || after.includes('src=')) return _match;\n      return `${before}src=\"${LOADING_PLACEHOLDER}\" data-image-query=\"${query}\" alt=\"${query}\"${after}>`;\n    }\n  );\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 with temp DALL-E URL + query, returns permanent URL. Use to persist to S3/etc. */\n  persistImage?: (tempUrl: string, query: string) => Promise<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    persistImage,\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        // Add loading placeholders so images don't show as broken while DALL-E generates\n        section.html = addLoadingPlaceholders(section.html);\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                  // 1. DALL-E if openaiApiKey provided\n                  if (openaiApiKey) {\n                    try {\n                      const tempUrl = await generateImage(slot.query, openaiApiKey);\n                      url = persistImage ? await persistImage(tempUrl, slot.query) : tempUrl;\n                    } catch (e) {\n                      console.warn(`[dalle] failed for \"${slot.query}\":`, e);\n                    }\n                  }\n                  // 2. Pexels fallback\n                  if (!url) {\n                    const img = await searchImage(slot.query, pexelsApiKey).catch(() => null);\n                    url = img?.url || null;\n                  }\n                  // 3. Placeholder fallback\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        // Add loading placeholders so images don't show as broken while DALL-E generates\n        section.html = addLoadingPlaceholders(section.html);\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":[]}