@easybits.cloud/html-tailwind-generator 0.2.141 → 0.2.142

package/dist/chunk-QFT3PN3L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/generate.ts"],"sourcesContent":["import { streamGenerate, dataUrlToImagePart, extractJsonObjects } from \"./streamCore\";\nimport { buildThemePromptContext } from \"./themes\";\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\nICONS — use data-icon-query for professional icons:\n- <span data-icon-query=\"icon-name\" class=\"inline-block w-5 h-5 text-primary\"></span>\n- Use common Lucide icon names in English: star, check, arrow-right, heart, zap, shield, users, mail, phone, calendar, clock, map-pin, briefcase, trending-up, award, target, layers, globe, etc.\n- Use in: feature lists, stat cards, CTAs, list items, contact info, section headers\n- Sizes: w-4 h-4 (small), w-5 h-5 (default), w-8 h-8 (large). Color inherits from text-* class.\n- NEVER draw SVG paths manually — ALWAYS use data-icon-query instead\n- The system auto-replaces data-icon-query with real SVG icons from Iconify\n\nIMAGE OVERLAYS — CRITICAL:\n- When using images as backgrounds or behind text, ALWAYS add a gradient overlay for text readability\n- Pattern: <div class=\"relative\"><img data-image-query=\"...\" alt=\"...\" class=\"absolute inset-0 w-full h-full object-cover\"/><div class=\"absolute inset-0 bg-gradient-to-r from-primary/80 to-transparent\"></div><div class=\"relative z-10\">...text...</div></div>\n- NEVER place text directly on images without an overlay\n- For hero sections with background images: use bg-gradient-to-t from-primary-dark/90 via-primary-dark/50 to-transparent\n- For testimonial/quote backgrounds: use bg-surface/90 backdrop-blur-sm on the card\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, bg-surface-deep, text-on-surface, text-on-surface-muted, text-on-surface-deep, bg-secondary, text-secondary, bg-accent, text-accent\n- POLARITY of surface tokens (CRITICAL — agents confuse these):\n  • bg-surface = the page background (light on light themes, dark on dark themes)\n  • bg-surface-alt = a SLIGHT TINT of bg-surface (almost the same lightness — used for cards/alternating rows). NOT a dark surface. Pair with text-on-surface (NOT text-on-primary).\n  • bg-surface-deep = a HIGH-CONTRAST DARK SURFACE, brand-independent (use for dark cards/footers/sidebars on light themes). Pair with text-on-surface-deep (light text).\n  • bg-secondary = the BRAND'S SECONDARY color (from brandkit). Different from bg-surface-alt — use this when you want a \"second brand color\" feel, not just a tint.\n  Common mistake: agents reach for \"bg-surface-alt + text-on-primary\" thinking it's a dark card. That produces white text on near-white background. For dark cards, use bg-surface-deep, bg-primary, or bg-secondary instead.\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- NEVER use Tailwind JIT arbitrary value syntax for colors: bg-[#abc123], text-[#fff], from-[#hex], border-[#hex], ring-[#hex], shadow-[#hex] are STRICTLY FORBIDDEN. Tailwind accepts them but they bypass the theme/brandkit system and break when the user swaps colors. The semantic class IS the brand color — use bg-primary, not bg-[#userhex].\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\nCOLOR VARIETY — MANDATORY:\n- ALTERNATE section backgrounds: bg-surface → bg-primary → bg-surface-alt → bg-primary-dark → bg-surface\n- Use bg-accent for at least ONE section (CTA or highlight section)\n- Use bg-secondary for at least ONE section (features or stats)\n- Cards on dark sections (bg-primary, bg-primary-dark) MUST be bg-surface (light cards on dark bg = visual pop)\n- Cards on light sections (bg-surface) can use bg-surface-alt or bg-primary-light\n- Use text-accent for decorative elements: labels, badges, icons, highlights, underlines\n- Use text-secondary for secondary information, tags, category labels\n- Gradients: mix colors creatively — from-primary to-accent for CTAs, from-secondary to-primary for headers\n- Buttons: primary CTA = bg-accent text-on-accent, secondary CTA = bg-secondary text-on-secondary or border-primary\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\n/** @deprecated Use buildPromptSuffix(prompt) internally. Kept for backward compat. */\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\nfunction buildPromptSuffix(userPrompt: string): string {\n  // Extract section count from user prompt (e.g. \"3 secciones\", \"2 sections\", \"dame 4\")\n  const countMatch = userPrompt.match(/(\\d+)\\s*(?:secciones?|sections?|bloques?|blocks?|partes?|pages?)/i)\n    || userPrompt.match(/(?:genera|generar|crea|crear|haz|hazme|dame|quiero)\\s*(\\d+)/i);\n  const count = countMatch ? parseInt(countMatch[1] || countMatch[2] || \"0\") : 0;\n  const sectionInstruction = count > 0\n    ? `Generate EXACTLY ${count} sections (no more, no less). Always include Hero as first and Footer as last.`\n    : `Generate 7-9 sections. Always start with Hero and end with Footer.`;\n\n  return `\n\nOUTPUT FORMAT: NDJSON — one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Short Label\", \"html\": \"<section>...</section>\"}\n\n${sectionInstruction}\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\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  /**\n   * Called with the HTML of the section currently being streamed, BEFORE it's\n   * fully parsed. Fires roughly every ~3 chunks so consumers can show a live\n   * element-by-element preview of the section being built. `index` is the\n   * 0-based position of this section (= number of already-completed sections).\n   *\n   * The partial HTML may contain unclosed tags — the browser's innerHTML\n   * parser closes them automatically when you inject it into a DOM node.\n   */\n  onPartialSection?: (index: number, partialHtml: string) => void;\n  onDone?: (sections: Section3[]) => void;\n  onError?: (error: Error) => void;\n  /** Custom-theme palette (hex map: primary, secondary, accent, surface).\n   *  Required when themeName === \"custom\"; optional otherwise. Used both for\n   *  prompt context AND for theme-aware sanitization. */\n  themeColors?: Record<string, string>;\n  /** Theme name (e.g. \"minimal\", \"noche\", \"oceano\", \"custom\") — tells the AI the design mood */\n  themeName?: string;\n  /** Brand kit info for AI context */\n  brandKit?: {\n    fonts?: { heading?: string; body?: string };\n    mood?: string;\n    logoUrl?: string;\n  };\n}\n\n/**\n * Generate a landing page with streaming AI + image enrichment.\n */\nfunction buildVisualContext(\n  themeName?: string,\n  brandKit?: GenerateOptions[\"brandKit\"],\n  themeColors?: Record<string, string>\n): string {\n  if (!themeName && !brandKit) return \"\";\n\n  const lines: string[] = [\"\\n\\n## Visual Context — MANDATORY\"];\n\n  if (themeName) {\n    // Custom themes get their palette from themeColors; built-in themes look it up by name.\n    lines.push(buildThemePromptContext(themeName, themeColors));\n  }\n\n  if (brandKit?.fonts) {\n    const { heading, body } = brandKit.fonts;\n    if (heading) lines.push(`- Heading font: use font-family: '${heading}' via inline style on h1-h6`);\n    if (body) lines.push(`- Body font: use font-family: '${body}' via inline style on p, li, span`);\n  }\n\n  if (brandKit?.mood) {\n    lines.push(`- Design mood: ${brandKit.mood} — adapt spacing, imagery style, and visual weight to match this mood`);\n  }\n\n  if (brandKit?.logoUrl) {\n    lines.push(`- Brand logo: include <img src=\"${brandKit.logoUrl}\" alt=\"Logo\" class=\"h-8 w-auto\" /> in the navbar/hero area`);\n  }\n\n  return lines.join(\"\\n\");\n}\n\nexport async function generateLanding(options: GenerateOptions): Promise<Section3[]> {\n  const {\n    prompt,\n    referenceImage,\n    extraInstructions,\n    systemPrompt = SYSTEM_PROMPT,\n    themeColors,\n    themeName,\n    brandKit,\n    ...rest\n  } = options;\n\n  const visualContext = buildVisualContext(themeName, brandKit, themeColors);\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 for: ${prompt}${extra}\\n\\nIMPORTANT: Use the reference image as a DIRECT visual guide. Replicate its layout structure, grid arrangement, spacing, visual hierarchy, and section organization as closely as possible. Match the number of columns, element positioning, and overall composition. Adapt the content to the prompt but keep the visual DNA of the reference.${buildPromptSuffix(prompt)}`,\n    });\n  } else {\n    content.push({\n      type: \"text\",\n      text: `Generate a landing page for: ${prompt}${extra}${buildPromptSuffix(prompt)}`,\n    });\n  }\n\n  return streamGenerate({\n    ...rest,\n    systemPrompt: systemPrompt + visualContext,\n    userContent: content,\n    themeColors,\n  });\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-4I5FFYHG.js → chunk-SJJZEW5W.js}

@@ -1,6 +1,6 @@
 import {
   buildDeployHtml
-} from "./chunk-7XHJJBGN.js";
+} from "./chunk-7MGKYJTI.js";
 
 // src/deploy.ts
 async function deployToS3(options) {
@@ -39,4 +39,4 @@ export {
   deployToS3,
   deployToEasyBits
 };
-//# sourceMappingURL=chunk-4I5FFYHG.js.map
+//# sourceMappingURL=chunk-SJJZEW5W.js.map

package/dist/{chunk-QHKJJI4K.js → chunk-ULAQDD23.js}

@@ -1,7 +1,7 @@
 import {
   currentDateLine,
   resolveModel
-} from "./chunk-IDJWYC4U.js";
+} from "./chunk-H2YYYKUI.js";
 
 // src/directions.ts
 import { generateObject, streamText } from "ai";
@@ -222,4 +222,4 @@ export {
   generateDirections,
   generateHeroPreview
 };
-//# sourceMappingURL=chunk-QHKJJI4K.js.map
+//# sourceMappingURL=chunk-ULAQDD23.js.map

package/dist/components.d.ts

@@ -1,8 +1,8 @@
-export { C as Canvas, a as CanvasHandle, b as CodeEditor, F as FloatingToolbar, S as SectionList, V as Viewport, c as ViewportToggle } from './ViewportToggle-Dszv1gsL.js';
+export { C as Canvas, a as CanvasHandle, b as CodeEditor, F as FloatingToolbar, S as SectionList, V as Viewport, c as ViewportToggle } from './ViewportToggle-Gns9NOvf.js';
 import 'react';
 import './types-BIpbpCJr.js';
 import 'react/jsx-runtime';
-import './themes-DNTBHJUH.js';
+import './themes-df34nq2_.js';
 
 declare function useUndoStack<T>(): {
     pushUndo: (snapshot: T) => void;

package/dist/components.js

@@ -5,9 +5,9 @@ import {
   SectionList,
   ViewportToggle,
   useUndoStack
-} from "./chunk-3I6UJ7UH.js";
-import "./chunk-7XHJJBGN.js";
-import "./chunk-VV5I53WR.js";
+} from "./chunk-EP65R6DE.js";
+import "./chunk-7MGKYJTI.js";
+import "./chunk-DCAQAHSU.js";
 export {
   Canvas,
   CodeEditor,

package/dist/components4.js

@@ -2,7 +2,7 @@ import {
   LANDING_THEMES,
   buildCustomTheme,
   buildSingleThemeCss
-} from "./chunk-VV5I53WR.js";
+} from "./chunk-DCAQAHSU.js";
 
 // src/components4/GrapesEditor.tsx
 import { useEffect as useEffect3, useRef as useRef3, useState as useState3, forwardRef, useImperativeHandle } from "react";

package/dist/deploy.d.ts

@@ -1,5 +1,5 @@
 import { S as Section3 } from './types-BIpbpCJr.js';
-import { C as CustomColors } from './themes-DNTBHJUH.js';
+import { C as CustomColors } from './themes-df34nq2_.js';
 
 interface DeployToS3Options {
     /** The sections to deploy */

package/dist/deploy.js

@@ -1,9 +1,9 @@
 import {
   deployToEasyBits,
   deployToS3
-} from "./chunk-4I5FFYHG.js";
-import "./chunk-7XHJJBGN.js";
-import "./chunk-VV5I53WR.js";
+} from "./chunk-SJJZEW5W.js";
+import "./chunk-7MGKYJTI.js";
+import "./chunk-DCAQAHSU.js";
 export {
   deployToEasyBits,
   deployToS3

package/dist/directions.js

@@ -3,8 +3,8 @@ import {
   GAMMA_LAYOUTS,
   generateDirections,
   generateHeroPreview
-} from "./chunk-QHKJJI4K.js";
-import "./chunk-IDJWYC4U.js";
+} from "./chunk-ULAQDD23.js";
+import "./chunk-H2YYYKUI.js";
 export {
   DesignDirectionSchema,
   GAMMA_LAYOUTS,

package/dist/generate.d.ts

@@ -5,7 +5,7 @@ import { S as Section3 } from './types-BIpbpCJr.js';
  */
 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\nICONS \u2014 use data-icon-query for professional icons:\n- <span data-icon-query=\"icon-name\" class=\"inline-block w-5 h-5 text-primary\"></span>\n- Use common Lucide icon names in English: star, check, arrow-right, heart, zap, shield, users, mail, phone, calendar, clock, map-pin, briefcase, trending-up, award, target, layers, globe, etc.\n- Use in: feature lists, stat cards, CTAs, list items, contact info, section headers\n- Sizes: w-4 h-4 (small), w-5 h-5 (default), w-8 h-8 (large). Color inherits from text-* class.\n- NEVER draw SVG paths manually \u2014 ALWAYS use data-icon-query instead\n- The system auto-replaces data-icon-query with real SVG icons from Iconify\n\nIMAGE OVERLAYS \u2014 CRITICAL:\n- When using images as backgrounds or behind text, ALWAYS add a gradient overlay for text readability\n- Pattern: <div class=\"relative\"><img data-image-query=\"...\" alt=\"...\" class=\"absolute inset-0 w-full h-full object-cover\"/><div class=\"absolute inset-0 bg-gradient-to-r from-primary/80 to-transparent\"></div><div class=\"relative z-10\">...text...</div></div>\n- NEVER place text directly on images without an overlay\n- For hero sections with background images: use bg-gradient-to-t from-primary-dark/90 via-primary-dark/50 to-transparent\n- For testimonial/quote backgrounds: use bg-surface/90 backdrop-blur-sm on the card\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\nCOLOR VARIETY \u2014 MANDATORY:\n- ALTERNATE section backgrounds: bg-surface \u2192 bg-primary \u2192 bg-surface-alt \u2192 bg-primary-dark \u2192 bg-surface\n- Use bg-accent for at least ONE section (CTA or highlight section)\n- Use bg-secondary for at least ONE section (features or stats)\n- Cards on dark sections (bg-primary, bg-primary-dark) MUST be bg-surface (light cards on dark bg = visual pop)\n- Cards on light sections (bg-surface) can use bg-surface-alt or bg-primary-light\n- Use text-accent for decorative elements: labels, badges, icons, highlights, underlines\n- Use text-secondary for secondary information, tags, category labels\n- Gradients: mix colors creatively \u2014 from-primary to-accent for CTAs, from-secondary to-primary for headers\n- Buttons: primary CTA = bg-accent text-on-accent, secondary CTA = bg-secondary text-on-secondary or border-primary\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 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\nICONS \u2014 use data-icon-query for professional icons:\n- <span data-icon-query=\"icon-name\" class=\"inline-block w-5 h-5 text-primary\"></span>\n- Use common Lucide icon names in English: star, check, arrow-right, heart, zap, shield, users, mail, phone, calendar, clock, map-pin, briefcase, trending-up, award, target, layers, globe, etc.\n- Use in: feature lists, stat cards, CTAs, list items, contact info, section headers\n- Sizes: w-4 h-4 (small), w-5 h-5 (default), w-8 h-8 (large). Color inherits from text-* class.\n- NEVER draw SVG paths manually \u2014 ALWAYS use data-icon-query instead\n- The system auto-replaces data-icon-query with real SVG icons from Iconify\n\nIMAGE OVERLAYS \u2014 CRITICAL:\n- When using images as backgrounds or behind text, ALWAYS add a gradient overlay for text readability\n- Pattern: <div class=\"relative\"><img data-image-query=\"...\" alt=\"...\" class=\"absolute inset-0 w-full h-full object-cover\"/><div class=\"absolute inset-0 bg-gradient-to-r from-primary/80 to-transparent\"></div><div class=\"relative z-10\">...text...</div></div>\n- NEVER place text directly on images without an overlay\n- For hero sections with background images: use bg-gradient-to-t from-primary-dark/90 via-primary-dark/50 to-transparent\n- For testimonial/quote backgrounds: use bg-surface/90 backdrop-blur-sm on the card\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, bg-surface-deep, text-on-surface, text-on-surface-muted, text-on-surface-deep, bg-secondary, text-secondary, bg-accent, text-accent\n- POLARITY of surface tokens (CRITICAL \u2014 agents confuse these):\n  \u2022 bg-surface = the page background (light on light themes, dark on dark themes)\n  \u2022 bg-surface-alt = a SLIGHT TINT of bg-surface (almost the same lightness \u2014 used for cards/alternating rows). NOT a dark surface. Pair with text-on-surface (NOT text-on-primary).\n  \u2022 bg-surface-deep = a HIGH-CONTRAST DARK SURFACE, brand-independent (use for dark cards/footers/sidebars on light themes). Pair with text-on-surface-deep (light text).\n  \u2022 bg-secondary = the BRAND'S SECONDARY color (from brandkit). Different from bg-surface-alt \u2014 use this when you want a \"second brand color\" feel, not just a tint.\n  Common mistake: agents reach for \"bg-surface-alt + text-on-primary\" thinking it's a dark card. That produces white text on near-white background. For dark cards, use bg-surface-deep, bg-primary, or bg-secondary instead.\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- NEVER use Tailwind JIT arbitrary value syntax for colors: bg-[#abc123], text-[#fff], from-[#hex], border-[#hex], ring-[#hex], shadow-[#hex] are STRICTLY FORBIDDEN. Tailwind accepts them but they bypass the theme/brandkit system and break when the user swaps colors. The semantic class IS the brand color \u2014 use bg-primary, not bg-[#userhex].\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\nCOLOR VARIETY \u2014 MANDATORY:\n- ALTERNATE section backgrounds: bg-surface \u2192 bg-primary \u2192 bg-surface-alt \u2192 bg-primary-dark \u2192 bg-surface\n- Use bg-accent for at least ONE section (CTA or highlight section)\n- Use bg-secondary for at least ONE section (features or stats)\n- Cards on dark sections (bg-primary, bg-primary-dark) MUST be bg-surface (light cards on dark bg = visual pop)\n- Cards on light sections (bg-surface) can use bg-surface-alt or bg-primary-light\n- Use text-accent for decorative elements: labels, badges, icons, highlights, underlines\n- Use text-secondary for secondary information, tags, category labels\n- Gradients: mix colors creatively \u2014 from-primary to-accent for CTAs, from-secondary to-primary for headers\n- Buttons: primary CTA = bg-accent text-on-accent, secondary CTA = bg-secondary text-on-secondary or border-primary\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";
 /** @deprecated Use buildPromptSuffix(prompt) internally. Kept for backward compat. */
 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 {
@@ -32,9 +32,11 @@ interface GenerateOptions {
     onPartialSection?: (index: number, partialHtml: string) => void;
     onDone?: (sections: Section3[]) => void;
     onError?: (error: Error) => void;
-    /** Theme colors to inject into the AI prompt (deprecated — use themeName) */
+    /** Custom-theme palette (hex map: primary, secondary, accent, surface).
+     *  Required when themeName === "custom"; optional otherwise. Used both for
+     *  prompt context AND for theme-aware sanitization. */
     themeColors?: Record<string, string>;
-    /** Theme name (e.g. "minimal", "noche", "oceano") — tells the AI the design mood */
+    /** Theme name (e.g. "minimal", "noche", "oceano", "custom") — tells the AI the design mood */
     themeName?: string;
     /** Brand kit info for AI context */
     brandKit?: {

package/dist/generate.js

@@ -2,11 +2,11 @@ import {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,
   generateLanding
-} from "./chunk-6OJXDEL2.js";
+} from "./chunk-QFT3PN3L.js";
 import {
   extractJsonObjects
-} from "./chunk-IDJWYC4U.js";
-import "./chunk-VV5I53WR.js";
+} from "./chunk-H2YYYKUI.js";
+import "./chunk-DCAQAHSU.js";
 export {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,

package/dist/generateDocument.js

@@ -6,9 +6,9 @@ import {
   generateDocumentParallel,
   getDocumentPromptSuffix,
   getDocumentSystemPrompt
-} from "./chunk-CDEB4EHT.js";
-import "./chunk-QHKJJI4K.js";
-import "./chunk-IDJWYC4U.js";
+} from "./chunk-GL74S2H4.js";
+import "./chunk-ULAQDD23.js";
+import "./chunk-H2YYYKUI.js";
 export {
   DOCUMENT_PROMPT_SUFFIX,
   DOCUMENT_SYSTEM_PROMPT,

package/dist/images.js

@@ -7,7 +7,7 @@ import {
   generateImage,
   generateSvg,
   searchImage
-} from "./chunk-IDJWYC4U.js";
+} from "./chunk-H2YYYKUI.js";
 export {
   enrichImages,
   enrichSectionIcons,

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import { S as Section3 } from './types-BIpbpCJr.js';
 export { I as IframeMessage } from './types-BIpbpCJr.js';
-import { C as CustomColors } from './themes-DNTBHJUH.js';
-export { L as LANDING_THEMES, a as LandingTheme, b as buildCustomTheme, c as buildCustomThemeCss, d as buildSingleThemeCss, e as buildThemeCss } from './themes-DNTBHJUH.js';
+import { C as CustomColors } from './themes-df34nq2_.js';
+export { L as LANDING_THEMES, a as LandingTheme, b as buildCustomTheme, c as buildCustomThemeCss, d as buildSingleThemeCss, e as buildThemeCss } from './themes-df34nq2_.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 { E as EnrichImagesOptions, P as PexelsResult, e as enrichImages, f as findImageSlots, g as generateImage, a as generateSvg, s as searchImage } from './svgGenerator-CduZJvMf.js';
-export { C as Canvas, a as CanvasHandle, b as CodeEditor, F as FloatingToolbar, S as SectionList, V as Viewport, c as ViewportToggle } from './ViewportToggle-Dszv1gsL.js';
+export { C as Canvas, a as CanvasHandle, b as CodeEditor, F as FloatingToolbar, S as SectionList, V as Viewport, c as ViewportToggle } from './ViewportToggle-Gns9NOvf.js';
 export { buildDeployHtmlV4 } from './buildHtmlV4.js';
 export { grapesToSections } from './grapesToSections.js';
 export { useThumbnailCapture } from './hooks/useThumbnailCapture.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   buildDeployHtmlV4
-} from "./chunk-KXOAEC33.js";
+} from "./chunk-ETWQS7IQ.js";
 import {
   grapesToSections
 } from "./chunk-7LKFTF32.js";
@@ -13,23 +13,23 @@ import {
   FloatingToolbar,
   SectionList,
   ViewportToggle
-} from "./chunk-3I6UJ7UH.js";
+} from "./chunk-EP65R6DE.js";
 import "./chunk-DUHALQL7.js";
 import {
   PROMPT_SUFFIX,
   SYSTEM_PROMPT,
   generateLanding
-} from "./chunk-6OJXDEL2.js";
+} from "./chunk-QFT3PN3L.js";
 import {
   DOCUMENT_PROMPT_SUFFIX,
   DOCUMENT_SYSTEM_PROMPT,
   generateDocument
-} from "./chunk-CDEB4EHT.js";
-import "./chunk-QHKJJI4K.js";
+} from "./chunk-GL74S2H4.js";
+import "./chunk-ULAQDD23.js";
 import {
   REFINE_SYSTEM,
   refineLanding
-} from "./chunk-YKZSLVPV.js";
+} from "./chunk-EIZRTLU6.js";
 import {
   enrichImages,
   extractJsonObjects,
@@ -37,23 +37,23 @@ import {
   generateImage,
   generateSvg,
   searchImage
-} from "./chunk-IDJWYC4U.js";
+} from "./chunk-H2YYYKUI.js";
 import {
   deployToEasyBits,
   deployToS3
-} from "./chunk-4I5FFYHG.js";
+} from "./chunk-SJJZEW5W.js";
 import {
   buildDeployHtml,
   buildPreviewHtml,
   getIframeScript
-} from "./chunk-7XHJJBGN.js";
+} from "./chunk-7MGKYJTI.js";
 import {
   LANDING_THEMES,
   buildCustomTheme,
   buildCustomThemeCss,
   buildSingleThemeCss,
   buildThemeCss
-} from "./chunk-VV5I53WR.js";
+} from "./chunk-DCAQAHSU.js";
 export {
   Canvas,
   CodeEditor,

package/dist/refine.d.ts

@@ -1,4 +1,4 @@
-declare const REFINE_SYSTEM = "You are an expert HTML/Tailwind CSS developer. You receive the current HTML of a landing page section and a user instruction.\n\nRULES:\n- Return ONLY the modified HTML \u2014 no full page, no <html>/<head>/<body> tags\n- Use Tailwind CSS classes (CDN loaded)\n- You may use inline styles for specific adjustments\n- Images: use data-image-query=\"english search query\" for new images\n- Keep all text in its original language unless asked to translate\n- Be creative \u2014 don't just make minimal changes, improve the design\n- Return raw HTML only \u2014 no markdown fences, no explanations\n\nCOLOR SYSTEM \u2014 CRITICAL:\n- Use semantic color classes: bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary, bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted, bg-secondary, text-secondary, bg-accent, text-accent\n- NEVER use hardcoded colors: NO bg-gray-*, bg-black, bg-white, text-gray-*, text-black, text-white, etc.\n- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.\n- 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.\n- Use bg-accent, bg-secondary, text-accent, text-secondary for visual variety \u2014 not everything should be primary.\n\nIMAGE OVERLAYS:\n- When placing text over images, ALWAYS add a gradient overlay for readability\n- Pattern: <div class=\"relative\"><img .../><div class=\"absolute inset-0 bg-gradient-to-r from-primary/80 to-transparent\"></div><div class=\"relative z-10\">...text...</div></div>\n- NEVER place text directly on images without an overlay\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 REFINE_SYSTEM = "You are an expert HTML/Tailwind CSS developer. You receive the current HTML of a landing page section and a user instruction.\n\nRULES:\n- Return ONLY the modified HTML \u2014 no full page, no <html>/<head>/<body> tags\n- Use Tailwind CSS classes (CDN loaded)\n- You may use inline styles for specific adjustments\n- Images: use data-image-query=\"english search query\" for new images\n- Keep all text in its original language unless asked to translate\n- Be creative \u2014 don't just make minimal changes, improve the design\n- Return raw HTML only \u2014 no markdown fences, no explanations\n\nCOLOR SYSTEM \u2014 CRITICAL:\n- Use semantic color classes: bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary, bg-surface, bg-surface-alt, bg-surface-deep, text-on-surface, text-on-surface-muted, text-on-surface-deep, bg-secondary, text-secondary, bg-accent, text-accent\n- POLARITY (critical): bg-surface-alt = LIGHT TINT of surface (cards on light pages \u2014 pair with text-on-surface). bg-surface-deep = HIGH-CONTRAST DARK surface (dark cards/footers on light themes \u2014 pair with text-on-surface-deep). bg-secondary = the brand's secondary color. NEVER use bg-surface-alt + text-on-primary for \"dark cards\" \u2014 that produces invisible white-on-white. For dark cards use bg-surface-deep, bg-primary, or bg-secondary.\n- NEVER use hardcoded colors: NO bg-gray-*, bg-black, bg-white, text-gray-*, text-black, text-white, etc.\n- NEVER use Tailwind JIT arbitrary value syntax for colors: bg-[#abc123], text-[#fff], from-[#hex], border-[#hex], ring-[#hex], shadow-[#hex] are STRICTLY FORBIDDEN. Tailwind accepts them but they bypass the theme/brandkit system and break when the user swaps colors. The semantic class IS the brand color \u2014 use bg-primary, not bg-[#userhex].\n- The ONLY exception: border-gray-200 or border-gray-700 for subtle dividers.\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.\n- Use bg-accent, bg-secondary, text-accent, text-secondary for visual variety \u2014 not everything should be primary.\n\nIMAGE OVERLAYS:\n- When placing text over images, ALWAYS add a gradient overlay for readability\n- Pattern: <div class=\"relative\"><img .../><div class=\"absolute inset-0 bg-gradient-to-r from-primary/80 to-transparent\"></div><div class=\"relative z-10\">...text...</div></div>\n- NEVER place text directly on images without an overlay\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";
 /**
  * Extract a text description from HTML for variant generation.
  * Instead of sending full HTML to the model, we send a content summary
@@ -35,9 +35,12 @@ interface RefineOptions {
     onDone?: (html: string) => void;
     /** Called on error */
     onError?: (error: Error) => void;
-    /** Theme colors for AI context (deprecated — use themeName) */
+    /** Custom-theme palette (hex map: primary, secondary, accent, surface).
+     *  Required when themeName === "custom"; optional otherwise (built-in themes
+     *  resolve their hex values via LANDING_THEMES). Used both for prompt context
+     *  AND for theme-aware sanitization of arbitrary `bg-[#hex]` classes. */
     themeColors?: Record<string, string>;
-    /** Theme name (e.g. "minimal", "noche") — tells the AI the design mood */
+    /** Theme name (e.g. "minimal", "noche", "custom") — tells the AI the design mood */
     themeName?: string;
     /** Brand kit info for AI context */
     brandKit?: {

package/dist/refine.js

@@ -2,9 +2,9 @@ import {
   REFINE_SYSTEM,
   extractSectionDescription,
   refineLanding
-} from "./chunk-YKZSLVPV.js";
-import "./chunk-IDJWYC4U.js";
-import "./chunk-VV5I53WR.js";
+} from "./chunk-EIZRTLU6.js";
+import "./chunk-H2YYYKUI.js";
+import "./chunk-DCAQAHSU.js";
 export {
   REFINE_SYSTEM,
   extractSectionDescription,

package/dist/{themes-DNTBHJUH.d.ts → themes-df34nq2_.d.ts}

@@ -8,9 +8,15 @@ interface LandingTheme {
         secondary: string;
         accent: string;
         surface: string;
+        /** Slight tint of `surface` (almost-same lightness) — used for cards and
+         *  alternating row backgrounds on a light page. NOT a dark contrast surface. */
         "surface-alt": string;
+        /** A high-contrast dark surface that's INDEPENDENT of brand colors. Use
+         *  for dark cards/footers/sidebars on light themes. Pairs with text-on-surface-deep. */
+        "surface-deep": string;
         "on-surface": string;
         "on-surface-muted": string;
+        "on-surface-deep": string;
         "on-primary": string;
         "on-secondary": string;
         "on-accent": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.2.141",
+  "version": "0.2.142",
   "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",

package/dist/chunk-6OJXDEL2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/generate.ts"],"sourcesContent":["import { streamGenerate, dataUrlToImagePart, extractJsonObjects } from \"./streamCore\";\nimport { buildThemePromptContext } from \"./themes\";\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\nICONS — use data-icon-query for professional icons:\n- <span data-icon-query=\"icon-name\" class=\"inline-block w-5 h-5 text-primary\"></span>\n- Use common Lucide icon names in English: star, check, arrow-right, heart, zap, shield, users, mail, phone, calendar, clock, map-pin, briefcase, trending-up, award, target, layers, globe, etc.\n- Use in: feature lists, stat cards, CTAs, list items, contact info, section headers\n- Sizes: w-4 h-4 (small), w-5 h-5 (default), w-8 h-8 (large). Color inherits from text-* class.\n- NEVER draw SVG paths manually — ALWAYS use data-icon-query instead\n- The system auto-replaces data-icon-query with real SVG icons from Iconify\n\nIMAGE OVERLAYS — CRITICAL:\n- When using images as backgrounds or behind text, ALWAYS add a gradient overlay for text readability\n- Pattern: <div class=\"relative\"><img data-image-query=\"...\" alt=\"...\" class=\"absolute inset-0 w-full h-full object-cover\"/><div class=\"absolute inset-0 bg-gradient-to-r from-primary/80 to-transparent\"></div><div class=\"relative z-10\">...text...</div></div>\n- NEVER place text directly on images without an overlay\n- For hero sections with background images: use bg-gradient-to-t from-primary-dark/90 via-primary-dark/50 to-transparent\n- For testimonial/quote backgrounds: use bg-surface/90 backdrop-blur-sm on the card\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\nCOLOR VARIETY — MANDATORY:\n- ALTERNATE section backgrounds: bg-surface → bg-primary → bg-surface-alt → bg-primary-dark → bg-surface\n- Use bg-accent for at least ONE section (CTA or highlight section)\n- Use bg-secondary for at least ONE section (features or stats)\n- Cards on dark sections (bg-primary, bg-primary-dark) MUST be bg-surface (light cards on dark bg = visual pop)\n- Cards on light sections (bg-surface) can use bg-surface-alt or bg-primary-light\n- Use text-accent for decorative elements: labels, badges, icons, highlights, underlines\n- Use text-secondary for secondary information, tags, category labels\n- Gradients: mix colors creatively — from-primary to-accent for CTAs, from-secondary to-primary for headers\n- Buttons: primary CTA = bg-accent text-on-accent, secondary CTA = bg-secondary text-on-secondary or border-primary\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\n/** @deprecated Use buildPromptSuffix(prompt) internally. Kept for backward compat. */\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\nfunction buildPromptSuffix(userPrompt: string): string {\n  // Extract section count from user prompt (e.g. \"3 secciones\", \"2 sections\", \"dame 4\")\n  const countMatch = userPrompt.match(/(\\d+)\\s*(?:secciones?|sections?|bloques?|blocks?|partes?|pages?)/i)\n    || userPrompt.match(/(?:genera|generar|crea|crear|haz|hazme|dame|quiero)\\s*(\\d+)/i);\n  const count = countMatch ? parseInt(countMatch[1] || countMatch[2] || \"0\") : 0;\n  const sectionInstruction = count > 0\n    ? `Generate EXACTLY ${count} sections (no more, no less). Always include Hero as first and Footer as last.`\n    : `Generate 7-9 sections. Always start with Hero and end with Footer.`;\n\n  return `\n\nOUTPUT FORMAT: NDJSON — one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Short Label\", \"html\": \"<section>...</section>\"}\n\n${sectionInstruction}\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\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  /**\n   * Called with the HTML of the section currently being streamed, BEFORE it's\n   * fully parsed. Fires roughly every ~3 chunks so consumers can show a live\n   * element-by-element preview of the section being built. `index` is the\n   * 0-based position of this section (= number of already-completed sections).\n   *\n   * The partial HTML may contain unclosed tags — the browser's innerHTML\n   * parser closes them automatically when you inject it into a DOM node.\n   */\n  onPartialSection?: (index: number, partialHtml: string) => void;\n  onDone?: (sections: Section3[]) => void;\n  onError?: (error: Error) => void;\n  /** Theme colors to inject into the AI prompt (deprecated — use themeName) */\n  themeColors?: Record<string, string>;\n  /** Theme name (e.g. \"minimal\", \"noche\", \"oceano\") — tells the AI the design mood */\n  themeName?: string;\n  /** Brand kit info for AI context */\n  brandKit?: {\n    fonts?: { heading?: string; body?: string };\n    mood?: string;\n    logoUrl?: string;\n  };\n}\n\n/**\n * Generate a landing page with streaming AI + image enrichment.\n */\nfunction buildVisualContext(themeName?: string, brandKit?: GenerateOptions[\"brandKit\"]): string {\n  if (!themeName && !brandKit) return \"\";\n\n  const lines: string[] = [\"\\n\\n## Visual Context — MANDATORY\"];\n\n  if (themeName && themeName !== \"custom\") {\n    lines.push(buildThemePromptContext(themeName));\n  }\n\n  if (brandKit?.fonts) {\n    const { heading, body } = brandKit.fonts;\n    if (heading) lines.push(`- Heading font: use font-family: '${heading}' via inline style on h1-h6`);\n    if (body) lines.push(`- Body font: use font-family: '${body}' via inline style on p, li, span`);\n  }\n\n  if (brandKit?.mood) {\n    lines.push(`- Design mood: ${brandKit.mood} — adapt spacing, imagery style, and visual weight to match this mood`);\n  }\n\n  if (brandKit?.logoUrl) {\n    lines.push(`- Brand logo: include <img src=\"${brandKit.logoUrl}\" alt=\"Logo\" class=\"h-8 w-auto\" /> in the navbar/hero area`);\n  }\n\n  return lines.join(\"\\n\");\n}\n\nexport async function generateLanding(options: GenerateOptions): Promise<Section3[]> {\n  const {\n    prompt,\n    referenceImage,\n    extraInstructions,\n    systemPrompt = SYSTEM_PROMPT,\n    themeColors: _themeColors,\n    themeName,\n    brandKit,\n    ...rest\n  } = options;\n\n  const visualContext = buildVisualContext(themeName, brandKit);\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 for: ${prompt}${extra}\\n\\nIMPORTANT: Use the reference image as a DIRECT visual guide. Replicate its layout structure, grid arrangement, spacing, visual hierarchy, and section organization as closely as possible. Match the number of columns, element positioning, and overall composition. Adapt the content to the prompt but keep the visual DNA of the reference.${buildPromptSuffix(prompt)}`,\n    });\n  } else {\n    content.push({\n      type: \"text\",\n      text: `Generate a landing page for: ${prompt}${extra}${buildPromptSuffix(prompt)}`,\n    });\n  }\n\n  return streamGenerate({\n    ...rest,\n    systemPrompt: systemPrompt + visualContext,\n    userContent: content,\n  });\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-CDEB4EHT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/generateDocument.ts"],"sourcesContent":["import { generateObject, streamText } from \"ai\";\nimport { z } from \"zod\";\nimport { nanoid } from \"nanoid\";\nimport {\n  streamGenerate,\n  dataUrlToImagePart,\n  resolveModel,\n  currentDateLine,\n  extractJsonObjects,\n  addLoadingPlaceholders,\n  addSvgLoadingPlaceholders,\n  enrichSectionImages,\n  enrichSectionSvgCharts,\n  enrichSectionIconSlots,\n} from \"./streamCore\";\nimport { sanitizeSemanticColors } from \"./sanitizeColors\";\nimport type { Section3 } from \"./types\";\nimport type { DesignDirection } from \"./directions\";\nimport { GAMMA_LAYOUTS } from \"./directions\";\n\n/**\n * Append optional direction fields (audience, voice, density, presets, etc.)\n * to a base direction-instruction block. Keeps backward-compatible with old\n * callers that only set name/fonts/colors/mood/layoutHint.\n */\nfunction appendDirectionExtras(direction: DesignDirection): string {\n  const lines: string[] = [];\n  if (direction.audience) lines.push(`Audience: ${direction.audience}`);\n  if (direction.voice) lines.push(`Voice / tone: ${direction.voice}`);\n  if (direction.typographyScale) {\n    const s = direction.typographyScale;\n    const parts: string[] = [];\n    if (s.h1) parts.push(`h1=${s.h1}`);\n    if (s.h2) parts.push(`h2=${s.h2}`);\n    if (s.h3) parts.push(`h3=${s.h3}`);\n    if (s.body) parts.push(`body=${s.body}`);\n    if (s.label) parts.push(`label=${s.label}`);\n    if (s.caption) parts.push(`caption=${s.caption}`);\n    if (parts.length > 0) {\n      lines.push(`TYPOGRAPHY SCALE (mandatory — use these EXACT sizes via inline style=\"font-size: Xpx\", NO improvisation): ${parts.join(\", \")}`);\n    }\n  }\n  if (direction.density) lines.push(`Density: ${direction.density}`);\n  if (direction.borderRadius) lines.push(`Border radius: ${direction.borderRadius}`);\n  if (direction.shadows) lines.push(`Shadows: ${direction.shadows}`);\n  if (direction.imageryStyle) lines.push(`Imagery style: ${direction.imageryStyle}`);\n  if (direction.contentDiscipline) lines.push(`Content discipline: ${direction.contentDiscipline}`);\n  if (direction.referenceBrands && direction.referenceBrands.length > 0)\n    lines.push(`Reference brands (take design cues from): ${direction.referenceBrands.join(\", \")}`);\n  if (direction.layoutPreset && GAMMA_LAYOUTS[direction.layoutPreset])\n    lines.push(`Layout preset (FOLLOW THIS RECIPE EXACTLY): \"${direction.layoutPreset}\" — ${GAMMA_LAYOUTS[direction.layoutPreset]}`);\n  if (direction.customInstructions) lines.push(`Custom instructions: ${direction.customInstructions}`);\n  return lines.length > 0 ? \"\\n\" + lines.join(\"\\n\") : \"\";\n}\n\nexport type PageFormat = \"letter\" | \"web\";\n\nexport const PAGE_FORMAT_CONFIG = {\n  letter: {\n    container: \"w-[8.5in] h-[11in]\",\n    bodyText: \"text-sm or text-base (10-11px)\",\n    maxColumns: 2,\n    heightMode: \"fixed at 11in\",\n    description: 'letter-sized (8.5\" × 11\") document pages',\n  },\n  web: {\n    container: \"w-[1280px] min-h-[800px]\",\n    bodyText: \"text-base or text-lg (16-18px)\",\n    maxColumns: 1,\n    heightMode: \"flexible, no max height\",\n    description: \"web-optimized document sections\",\n  },\n} as const;\n\nexport function getDocumentSystemPrompt(format: PageFormat = \"letter\"): string {\n  const cfg = PAGE_FORMAT_CONFIG[format];\n  const isWeb = format === \"web\";\n\n  return `You are a professional document designer who creates stunning ${cfg.description} using HTML + Tailwind CSS.\n\nRULES:\n- Each page is a <section> element${isWeb ? \" optimized for web viewing\" : \" sized for letter paper\"}\n- Page structure: <section class=\"${cfg.container} relative overflow-hidden flex flex-col\">\n- ${isWeb ? \"Each section has flexible height — content determines the height. Use min-h-[800px] but allow natural growth.\" : \"The section is EXACTLY 11in tall — content MUST fit, never exceed. Use flex flex-col so children can use flex-1.\"}\n- The section itself has NO padding — backgrounds, gradients, and decorative elements go edge-to-edge\n- Use slot layout: shrink-0 for header/footer bands, flex-1 overflow-hidden for main content area\n- For text content, use an inner wrapper: <div class=\"flex-1 overflow-hidden px-[0.75in] py-[0.5in]\">...content...</div>\n- Footer elements (page numbers, decorative bars, contact info) MUST be direct children of <section> with shrink-0 and w-full — NEVER inside the padded content wrapper. This ensures footer backgrounds extend edge-to-edge\n- Cover pages and decorative sections can use full-bleed backgrounds (bg-primary, gradients, images that fill the entire page)\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 ${isWeb ? \"width\" : \"letter size\"}, no breakpoints needed\n- Sections can have ANY background — full-bleed color, gradients, or white. Not limited to white paper.\n\nSTRICT PROHIBITIONS:\n1. **NO EMOJI** — Never use emoji characters (🚀❌✅📊 etc.). Instead use inline SVG icons or colored divs. For bullet decorators use small colored circles (<span class=\"w-2 h-2 rounded-full bg-primary inline-block\"></span>) or simple SVG.\n2. **NO Chart.js / NO JavaScript** — Never reference Chart.js, canvas, or any JS library. For data visualization use pure CSS: progress bars (div with percentage width + bg-primary), horizontal bars, styled tables with colored cells. Never use <canvas> or <script>.\n3. **NO buttons or CTAs** — This is a ${isWeb ? \"document\" : \"print document\"}, not a ${isWeb ? \"landing page\" : \"web page\"}. No \"Contactar\", \"Ver más\", \"Comprar\" buttons. Use text with contact info instead.\n4. **CONTRAST IS MANDATORY** — Dark/colored backgrounds (bg-primary, bg-primary-dark, bg-secondary, dark gradients) MUST use text-white or text-on-primary. Light backgrounds (white, bg-surface, bg-surface-alt) MUST use text-gray-900 or text-on-surface. NEVER use dark text on dark backgrounds or light text on light backgrounds.\n5. **Max 2 font weights per page** — Pick 2 (e.g. font-semibold + font-normal, or font-bold + font-light). Don't mix 4-5 weights.\n6. **Generous whitespace** — Don't fill every centimeter. Leave breathing room. Use py-8, py-12, gap-6, gap-8 liberally. Less content per page = more professional.\n\nLAYOUT OVERFLOW PREVENTION — CRITICAL:\n- Max ${cfg.maxColumns} column${cfg.maxColumns === 1 ? \"\" : \"s\"} side by side${cfg.maxColumns === 2 ? \" — each with w-1/2\" : \"\"}. NEVER use ${cfg.maxColumns + 1}+ columns.\n- Decorative sidebars: max w-16 (4rem). NEVER use w-[2.5in] or wider sidebars — they steal too much space.\n- Stats/metric grids: max 3 items per row (grid-cols-3). Use gap-4 or gap-6.\n- Tables: max 4 columns, use text-xs or text-sm for cell text, px-3 py-2 cell padding.\n- Images: always w-full or max-w-[50%] — never fixed pixel widths.\n- Text: never use text-6xl or larger except for cover page title. Body text: ${cfg.bodyText}.\n- NEVER use absolute positioning that could overflow — prefer flex/grid layouts.\n- Decorative shapes with absolute positioning MUST stay fully inside the page. Use overflow-hidden on parent AND keep coordinates positive (no negative right/left values).\n- Large decorative text (text-[200px], text-[10rem] etc.) MUST have opacity-5 or lower AND overflow-hidden on its container. These giant texts frequently overflow — be extra careful.\n- NEVER place elements beyond the right edge — all content and decorations must fit within ${isWeb ? \"1280px\" : \"8.5in\"} width.\n\nDESIGN — ADAPT to the document type. Read the prompt carefully and match the visual style:\n\nGENERAL PRINCIPLES (apply to ALL documents):\n- First page is ALWAYS a stunning cover/title page with impactful design\n- Typography: strong hierarchy with just 2 weights, clear headings vs body\n- Each page visually distinct — different layouts, accent placements\n- Use the full page creatively — backgrounds, sidebars, geometric shapes\n- Professional and polished, never generic or template-looking\n- Icons: use simple inline SVG (12-20px) for visual accents. Keep SVGs minimal (single path, no complex illustrations)\n\nADAPT YOUR STYLE to what the user is creating:\n- Reports/Data: structured grids, tables with alternating rows (bg-surface-alt), progress bars, stat cards, clean data hierarchy\n- Brochures/Marketing: bold hero images, large headlines, feature grids, testimonial-style quotes, visual storytelling\n- Catalogs/Products: product cards with images, specs grids, price highlights, category headers with full-bleed color\n- Invitations/Events: centered dramatic typography, decorative borders, elegant spacing, date/location prominently styled\n- Proposals/Pitches: problem→solution flow, metric highlights, team/about sections, pricing tables\n- CVs/Resumes: clean sidebar layouts, skill bars, timeline for experience, contact info header\n- Creative/General: mix techniques — bento grids, full-bleed images, overlapping elements, bold color blocking\n\nVISUAL TECHNIQUES available to you:\n- Full-bleed colored pages (bg-primary, gradients)\n- Geometric accent shapes (CSS divs with clip-path or rotation)\n- Asymmetric layouts (grid with unequal columns)\n- Large stat numbers as visual anchors (text-5xl font-black)\n- Header/footer bands with contrasting color\n- Sidebar accents (thin, max w-16)\n- Image + text compositions\n- Bento-grid mixing content blocks of different sizes\n- Tables: alternating row colors, clean borders, generous cell padding (px-4 py-3)\n- For numerical data: CSS progress bars, styled tables with colored cells, large stat numbers — NEVER canvas/charts\n\nCSS PROGRESS BARS — use this pattern for data visualization:\n<div class=\"w-full bg-gray-200 rounded-full h-3\"><div class=\"bg-primary h-3 rounded-full\" style=\"width: 75%\"></div></div>\n\nCOLOR SYSTEM — use semantic classes:\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- Cover pages should use bold full-bleed backgrounds (bg-primary, gradients from-primary to-primary-dark)\n- CONTRAST: bg-primary/bg-primary-dark/bg-secondary → text-white or text-on-primary. White/bg-surface → text-gray-900 or text-on-surface\n\nIMAGES — USE GENEROUSLY:\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- Include at LEAST 3-5 images across the document — hero images, section illustrations, backgrounds, product photos\n- Each data-image-query should be a UNIQUE, specific search query in English (e.g. \"modern office workspace aerial view\", \"team brainstorming whiteboard\", \"abstract blue technology network\")\n- Use images to break up text-heavy pages and add visual interest\n\nICONS — use data-icon-query for professional icons:\n- <span data-icon-query=\"icon-name\" class=\"inline-block w-5 h-5 text-primary\"></span>\n- Use common Lucide icon names in English: star, check, arrow-right, heart, zap, shield, users, mail, phone, calendar, clock, map-pin, briefcase, trending-up, award, target, layers, globe, etc.\n- Use in: feature lists, stat cards, CTAs, list items, contact info, section headers\n- Sizes: w-4 h-4 (small), w-5 h-5 (default), w-8 h-8 (large). Color inherits from text-* class.\n- NEVER draw SVG paths manually — ALWAYS use data-icon-query instead\n- The system auto-replaces data-icon-query with real SVG icons from Iconify\n\nCHARTS & DATA VISUALIZATION (SVG):\n- For charts, diagrams, and decorative data graphics, use:\n  <div data-svg-chart=\"bar chart showing Q1 revenue: Jan $45K, Feb $52K, Mar $61K\" class=\"w-full\"></div>\n- The system generates professional SVG charts with a specialized tool — NEVER draw SVGs yourself\n- Use descriptive prompts with data points: type of chart + what it shows + actual values\n- Examples: \"donut chart: 40% Marketing, 30% Sales, 20% R&D, 10% Admin\", \"line chart showing growth: Q1 $100K, Q2 $150K, Q3 $220K, Q4 $310K\"\n- For simple metrics, still prefer CSS progress bars (they render faster)\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\nEXAMPLE — Cover page (simple, no wide sidebars):\n<section class=\"${cfg.container} relative overflow-hidden flex flex-col bg-white\">\n  <div class=\"absolute left-0 top-0 w-2 h-full bg-primary\"></div>\n  <div class=\"flex-1 overflow-hidden flex flex-col justify-center px-[1in]\">\n    <div class=\"text-sm font-normal text-primary mb-4\">Marzo 2026 · Versión 1.0</div>\n    <h1 class=\"text-5xl font-bold text-gray-900 leading-tight\">Reporte<br/>Trimestral</h1>\n    <div class=\"w-16 h-1 bg-primary mt-6 mb-4\"></div>\n    <p class=\"text-lg font-normal text-gray-500\">Resultados y análisis del primer trimestre</p>\n  </div>\n</section>\n\nEXAMPLE — Marketing/brochure page (bold, visual):\n<section class=\"${cfg.container} relative overflow-hidden flex flex-col bg-primary\">\n  <div class=\"flex flex-1 overflow-hidden\">\n    <div class=\"${isWeb ? \"flex-1\" : \"w-1/2\"} flex flex-col justify-center px-[0.75in]\">\n      <span class=\"text-sm font-normal text-on-primary opacity-70 uppercase tracking-widest mb-3\">Solución Premium</span>\n      <h2 class=\"text-4xl font-bold text-on-primary leading-tight mb-6\">Transforma tu negocio digital</h2>\n      <p class=\"text-base font-normal text-on-primary opacity-80 mb-8\">Herramientas inteligentes que simplifican la gestión de tus activos digitales.</p>\n      <div class=\"flex gap-6\">\n        <div><div class=\"text-3xl font-bold text-accent\">98%</div><div class=\"text-xs text-on-primary opacity-70\">Satisfacción</div></div>\n        <div><div class=\"text-3xl font-bold text-accent\">2.4K</div><div class=\"text-xs text-on-primary opacity-70\">Empresas</div></div>\n      </div>\n    </div>\n    <div class=\"${isWeb ? \"flex-1\" : \"w-1/2\"} relative\">\n      <img data-image-query=\"modern office team collaboration technology\" alt=\"Team working\" class=\"absolute inset-0 w-full h-full object-cover\" />\n    </div>\n  </div>\n</section>\n\nEXAMPLE — Catalog/product grid page:\n<section class=\"${cfg.container} relative overflow-hidden flex flex-col bg-surface\">\n  <div class=\"shrink-0 h-1 bg-primary w-full\"></div>\n  <div class=\"flex-1 overflow-hidden px-[0.75in] py-[0.5in]\">\n    <div class=\"flex justify-between items-baseline mb-6\">\n      <h2 class=\"text-2xl font-bold text-on-surface\">Colección Primavera</h2>\n      <span class=\"text-xs font-normal text-on-surface-muted uppercase tracking-wider\">Página 3 de 8</span>\n    </div>\n    <div class=\"grid grid-cols-2 gap-6\">\n      <div class=\"bg-surface-alt rounded-xl overflow-hidden\">\n        <img data-image-query=\"minimalist product on white background\" alt=\"Product\" class=\"w-full h-48 object-cover\" />\n        <div class=\"p-4\"><h3 class=\"font-bold text-on-surface text-sm\">Producto Alpha</h3><p class=\"text-xs text-on-surface-muted mt-1\">Diseño ergonómico premium</p><div class=\"text-lg font-bold text-primary mt-2\">$2,490</div></div>\n      </div>\n      <div class=\"bg-surface-alt rounded-xl overflow-hidden\">\n        <img data-image-query=\"elegant product photography studio\" alt=\"Product\" class=\"w-full h-48 object-cover\" />\n        <div class=\"p-4\"><h3 class=\"font-bold text-on-surface text-sm\">Producto Beta</h3><p class=\"text-xs text-on-surface-muted mt-1\">Tecnología de vanguardia</p><div class=\"text-lg font-bold text-primary mt-2\">$3,190</div></div>\n      </div>\n    </div>\n  </div>\n  <!-- Footer: direct child of section, shrink-0, full width -->\n  <div class=\"shrink-0 w-full bg-surface-alt px-[0.75in] py-3 flex justify-between items-center\">\n    <span class=\"text-xs text-on-surface-muted\">Colección Primavera 2026</span>\n    <span class=\"text-xs text-on-surface-muted\">Página 3 de 8</span>\n  </div>\n</section>\n\nEXAMPLE — Content page with table + progress bars:\n<section class=\"${cfg.container} relative overflow-hidden flex flex-col bg-white\">\n  <div class=\"shrink-0 h-1.5 bg-primary w-full\"></div>\n  <div class=\"flex-1 overflow-hidden px-[0.75in] py-[0.5in]\">\n    <h2 class=\"text-2xl font-bold text-gray-900 mb-1\">Métricas de Rendimiento</h2>\n    <p class=\"text-sm font-normal text-gray-500 mb-8\">Indicadores clave del periodo enero—marzo</p>\n    <table class=\"w-full text-sm mb-10\">\n      <thead><tr class=\"bg-primary text-white\"><th class=\"px-4 py-3 text-left font-semibold\">Indicador</th><th class=\"px-4 py-3 text-left font-semibold\">Valor</th><th class=\"px-4 py-3 text-left font-semibold\">Meta</th></tr></thead>\n      <tbody>\n        <tr class=\"bg-surface-alt\"><td class=\"px-4 py-3 text-gray-900\">Ingresos</td><td class=\"px-4 py-3 text-gray-900\">$1.2M</td><td class=\"px-4 py-3 text-gray-900\">$1.5M</td></tr>\n        <tr><td class=\"px-4 py-3 text-gray-900\">Clientes nuevos</td><td class=\"px-4 py-3 text-gray-900\">340</td><td class=\"px-4 py-3 text-gray-900\">300</td></tr>\n        <tr class=\"bg-surface-alt\"><td class=\"px-4 py-3 text-gray-900\">Retención</td><td class=\"px-4 py-3 text-gray-900\">92%</td><td class=\"px-4 py-3 text-gray-900\">${\"90%\"}</td></tr>\n      </tbody>\n    </table>\n    <h3 class=\"text-lg font-bold text-gray-900 mb-4\">Progreso por Área</h3>\n    <div class=\"space-y-4\">\n      <div><div class=\"flex justify-between text-sm mb-1\"><span class=\"text-gray-900 font-semibold\">Ventas</span><span class=\"text-gray-500\">80%</span></div><div class=\"w-full bg-gray-200 rounded-full h-3\"><div class=\"bg-primary h-3 rounded-full\" style=\"width: 80%\"></div></div></div>\n      <div><div class=\"flex justify-between text-sm mb-1\"><span class=\"text-gray-900 font-semibold\">Marketing</span><span class=\"text-gray-500\">65%</span></div><div class=\"w-full bg-gray-200 rounded-full h-3\"><div class=\"bg-secondary h-3 rounded-full\" style=\"width: 65%\"></div></div></div>\n      <div><div class=\"flex justify-between text-sm mb-1\"><span class=\"text-gray-900 font-semibold\">Producto</span><span class=\"text-gray-500\">95%</span></div><div class=\"w-full bg-gray-200 rounded-full h-3\"><div class=\"bg-accent h-3 rounded-full\" style=\"width: 95%\"></div></div></div>\n    </div>\n  </div>\n</section>`;\n}\n\nexport const DOCUMENT_SYSTEM_PROMPT = getDocumentSystemPrompt(\"letter\");\n\nexport function getDocumentPromptSuffix(format: PageFormat = \"letter\"): string {\n  const cfg = PAGE_FORMAT_CONFIG[format];\n  const isWeb = format === \"web\";\n  return `\n\nOUTPUT FORMAT: NDJSON — one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Page Title\", \"html\": \"<section class='${cfg.container} relative overflow-hidden flex flex-col'>...</section>\"}\n\nGenerate 3-8 pages depending on content length. First page = cover/title page.\n${isWeb ? \"Each section should have comfortable spacing for web reading.\" : \"Each page must fit within letter size (8.5\\\" × 11\\\"). Be conservative with spacing.\"}\nMake each page visually distinct — different layouts, different accent placements.\nIMPORTANT: Adapt your design style to match the type of document — not everything is a report. Brochures should feel bold and visual, catalogs should showcase products, invitations should feel elegant, etc.`;\n}\n\nexport const DOCUMENT_PROMPT_SUFFIX = getDocumentPromptSuffix(\"letter\");\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 | import(\"ai\").LanguageModel;\n  pexelsApiKey?: string;\n  /** Design direction — injects Google Fonts + hex colors into the prompt */\n  direction?: DesignDirection;\n  persistImage?: (tempUrl: string, query: string) => Promise<string>;\n  onSection?: (section: Section3) => void;\n  onImageUpdate?: (sectionId: string, html: string) => void;\n  onRawChunk?: (buffer: string, completedCount: number) => 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    direction,\n    ...rest\n  } = options;\n\n  const extra = extraInstructions ? `\\nAdditional instructions: ${extraInstructions}` : \"\";\n\n  // Build direction style instructions if provided\n  let directionInstruction = \"\";\n  if (direction) {\n    const fontsUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(direction.headingFont).replace(/%20/g, \"+\")}:wght@400;700;900&family=${encodeURIComponent(direction.bodyFont).replace(/%20/g, \"+\")}:wght@400;500;600&display=swap`;\n    directionInstruction = `\nDESIGN DIRECTION: \"${direction.name}\" — ${direction.tagline}\nTYPOGRAPHY: Use these Google Fonts via <link href=\"${fontsUrl}\" rel=\"stylesheet\"> on the first page.\n- Headings: font-family: '${direction.headingFont}', sans-serif (via inline style)\n- Body: font-family: '${direction.bodyFont}', sans-serif (via inline style)\nCOLORS — use ONLY semantic Tailwind classes (the editor injects CSS variables that resolve these):\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- NEVER use hardcoded hex colors like bg-[#xxx] or text-[#xxx] — always use semantic classes\n- The palette is: primary=${direction.colors.primary}, accent=${direction.colors.accent}, surface=${direction.colors.surface}\nMood: ${direction.mood}\nLayout approach: ${direction.layoutHint}${appendDirectionExtras(direction)}\nIMPORTANT: Apply inline style=\"font-family: '${direction.headingFont}'\" on ALL heading elements and style=\"font-family: '${direction.bodyFont}'\" on ALL body text elements. Include the Google Fonts <link> tag inside the FIRST <section> only.`;\n  }\n  // Truncate prompt to prevent token overflow (max ~15K chars ≈ 5K tokens)\n  const safePrompt = prompt.length > 15_000 ? prompt.substring(0, 15_000) + \"\\n[...content truncated...]\" : prompt;\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 with this exact src URL — do NOT invent a different URL or modify it.`\n    : \"\";\n\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: `Create a professional document inspired by this reference image for: ${safePrompt}${logoInstruction}${directionInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`,\n    });\n  } else {\n    content.push({\n      type: \"text\",\n      text: `Create a professional document for: ${safePrompt}${logoInstruction}${directionInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`,\n    });\n  }\n\n  return streamGenerate({\n    ...rest,\n    systemPrompt: DOCUMENT_SYSTEM_PROMPT,\n    userContent: content,\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Parallel Document Generation\n// ---------------------------------------------------------------------------\n\nconst DocumentOutlineSchema = z.object({\n  pages: z.array(z.object({\n    pageNumber: z.number(),\n    label: z.string().describe(\"Page title for sidebar\"),\n    type: z.enum([\"cover\", \"content\", \"data\", \"visual\", \"closing\"]),\n    layoutPreset: z.enum([\n      \"cover\",\n      \"section-divider\",\n      \"agenda\",\n      \"big-statement\",\n      \"one-big-stat\",\n      \"stat-grid\",\n      \"two-column\",\n      \"three-column\",\n      \"image-full-bleed\",\n      \"image-text-split\",\n      \"bento-grid\",\n      \"card-grid\",\n      \"comparison-table\",\n      \"timeline-vertical\",\n      \"process-steps\",\n      \"quote\",\n      \"closing-cta\",\n    ]).describe(\"Premium layout preset (Gamma-style recipe). Pick the BEST FIT for this page's content. The renderer will follow the recipe exactly.\"),\n    contentBrief: z.string().describe(\"2-4 sentences describing exactly what goes on this page\"),\n    keyElements: z.array(z.string()).describe(\"Specific elements: stats grid, table, hero image, timeline, etc.\"),\n    backgroundStyle: z.enum([\"white\", \"primary\", \"gradient\", \"surface-alt\", \"image\"]),\n    continuesFrom: z.string().optional().describe(\"How this page relates to the previous one\"),\n  })),\n});\n\nexport type DocumentOutline = z.infer<typeof DocumentOutlineSchema>;\n\nexport interface GenerateDocumentParallelOptions {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  logoUrl?: string;\n  referenceImage?: string;\n  /** Per-page reference images (e.g. rendered from PDF pages). Index matches page order. */\n  referencePages?: string[];\n  extraInstructions?: string;\n  /** Model for page generation (quality model) */\n  model?: string | import(\"ai\").LanguageModel;\n  /** Model for outline generation (fast model) */\n  outlineModel?: string | import(\"ai\").LanguageModel;\n  pexelsApiKey?: string;\n  direction?: DesignDirection;\n  persistImage?: (tempUrl: string, query: string) => Promise<string>;\n  pageCount?: number;\n  skipCover?: boolean;\n  pageFormat?: PageFormat;\n  onOutline?: (outline: DocumentOutline) => void;\n  onPageChunk?: (pageIndex: number, partialHtml: string) => void;\n  onPageComplete?: (pageIndex: number, section: Section3) => void;\n  onImageUpdate?: (sectionId: string, html: string) => void;\n  onDone?: (sections: Section3[]) => void;\n  onError?: (error: Error) => void;\n  /** Called with accumulated token usage from outline + all pages */\n  onUsage?: (usage: { inputTokens: number; outputTokens: number }) => void;\n}\n\nfunction buildDirectionInstruction(direction: DesignDirection): string {\n  const fontsUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(direction.headingFont).replace(/%20/g, \"+\")}:wght@400;700;900&family=${encodeURIComponent(direction.bodyFont).replace(/%20/g, \"+\")}:wght@400;500;600&display=swap`;\n  return `\nDESIGN DIRECTION: \"${direction.name}\" — ${direction.tagline}\nTYPOGRAPHY: Use these Google Fonts via <link href=\"${fontsUrl}\" rel=\"stylesheet\"> on the first page.\n- Headings: font-family: '${direction.headingFont}', sans-serif (via inline style)\n- Body: font-family: '${direction.bodyFont}', sans-serif (via inline style)\nCOLORS — use ONLY semantic Tailwind classes (the editor injects CSS variables that resolve these):\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- NEVER use hardcoded hex colors like bg-[#xxx] or text-[#xxx] — always use semantic classes\n- The palette is: primary=${direction.colors.primary}, accent=${direction.colors.accent}, surface=${direction.colors.surface}\nMood: ${direction.mood}\nLayout approach: ${direction.layoutHint}${appendDirectionExtras(direction)}\nIMPORTANT: Apply inline style=\"font-family: '${direction.headingFont}'\" on ALL heading elements and style=\"font-family: '${direction.bodyFont}'\" on ALL body text elements. Include the Google Fonts <link> tag inside the FIRST <section> only.`;\n}\n\n/** Extract partial HTML from a raw JSON buffer (same pattern as onRawChunk) */\nfunction extractPartialHtml(buffer: string): string | null {\n  const htmlMatch = buffer.match(/\"html\"\\s*:\\s*\"([\\s\\S]*)/);\n  if (!htmlMatch) return null;\n  let partial = htmlMatch[1]\n    .replace(/\\\\n/g, '\\n').replace(/\\\\\"/g, '\"').replace(/\\\\\\\\/g, '\\\\');\n  if (partial.endsWith('\\\\')) partial = partial.slice(0, -1);\n  const lastQuote = partial.lastIndexOf('\"');\n  if (lastQuote > 0) partial = partial.slice(0, lastQuote);\n  if (/<section/i.test(partial) && !/<\\/section>/i.test(partial)) {\n    partial += '</section>';\n  }\n  return partial.length > 20 ? partial : null;\n}\n\nexport async function generateDocumentParallel(options: GenerateDocumentParallelOptions): Promise<Section3[]> {\n  const {\n    anthropicApiKey,\n    openaiApiKey: _openaiApiKey,\n    prompt,\n    logoUrl,\n    referenceImage,\n    referencePages,\n    extraInstructions,\n    model: pageModelId,\n    outlineModel: outlineModelId,\n    pexelsApiKey,\n    direction,\n    persistImage,\n    pageCount,\n    skipCover,\n    pageFormat = \"letter\",\n    onOutline,\n    onPageChunk,\n    onPageComplete,\n    onImageUpdate,\n    onDone,\n    onError,\n    onUsage,\n  } = options;\n\n  const openaiApiKey = _openaiApiKey || process.env.OPENAI_API_KEY;\n\n  try {\n    // --- Phase 1: Generate outline ---\n    const outlineModel = await resolveModel({\n      openaiApiKey,\n      anthropicApiKey,\n      modelId: outlineModelId,\n      defaultOpenai: \"gpt-4.1-mini\",\n      defaultAnthropic: \"claude-haiku-4-5-20251001\",\n    });\n\n    const safePrompt = prompt.length > 15_000 ? prompt.substring(0, 15_000) + \"\\n[...content truncated...]\" : prompt;\n    const extra = extraInstructions ? `\\nAdditional instructions: ${extraInstructions}` : \"\";\n    const pageCountHint = skipCover\n      ? `Generate exactly ${Math.max(1, (pageCount || 5) - 1)} content pages (NO cover — it already exists).`\n      : pageCount\n        ? `Generate exactly ${pageCount} pages including a cover page.`\n        : \"Generate 3-8 pages including a cover page.\";\n\n    let totalInputTokens = 0;\n    let totalOutputTokens = 0;\n\n    const { object: rawOutline, usage: outlineUsage } = await generateObject({\n      model: outlineModel,\n      schema: DocumentOutlineSchema,\n      prompt: `You are planning a professional document. Create a detailed page-by-page outline.\n\nDOCUMENT BRIEF: ${safePrompt}${extra}\n\nRULES:\n- ${pageCountHint}\n${skipCover ? \"- CRITICAL: Do NOT include a cover/title page. The cover already exists. Start with page type 'content', 'data', or 'visual'. NEVER use type 'cover'.\" : \"- First page is ALWAYS a stunning cover/title page.\"}\n- Distribute content EVENLY — no page should be overloaded\n- Each page must use a DISTINCT layoutPreset (do not repeat the same preset back-to-back). Pick the BEST FIT per page from the enum: cover (only if skipCover=false), section-divider, agenda, big-statement, one-big-stat, stat-grid, two-column, three-column, image-full-bleed, image-text-split, bento-grid, card-grid, comparison-table, timeline-vertical, process-steps, quote, closing-cta\n- A premium document varies rhythm: at least one stat-heavy preset, one image-led preset, one quote/big-statement break, one closing-cta or section-divider\n- Narrative flows naturally: ${skipCover ? \"introduction → detail → data → closing\" : \"cover → introduction → detail → data → closing\"}\n- contentBrief must be detailed enough that a separate AI can generate the page independently\n- keyElements must list specific visual elements (not vague descriptions)\n- Vary backgroundStyle across pages — not all white\n- If source content is provided, assign specific portions to each page in the contentBrief\n${direction ? `- Design mood: ${direction.mood}, layout approach: ${direction.layoutHint}` : \"\"}`,\n    });\n\n    totalInputTokens += outlineUsage?.inputTokens || 0;\n    totalOutputTokens += outlineUsage?.outputTokens || 0;\n\n    // Filter out any cover pages if skipCover (AI sometimes ignores instructions)\n    const outline: DocumentOutline = skipCover\n      ? { pages: rawOutline.pages.filter(p => p.type !== \"cover\").map((p, i) => ({ ...p, pageNumber: i + 1 })) }\n      : rawOutline;\n\n    onOutline?.(outline);\n\n    // --- Phase 2: Generate pages in parallel ---\n    const directionInstruction = direction ? buildDirectionInstruction(direction) : \"\";\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 with this exact src URL.`\n      : \"\";\n\n    const outlineJson = JSON.stringify(outline.pages, null, 2);\n\n    const pageModel = await resolveModel({\n      openaiApiKey,\n      anthropicApiKey,\n      modelId: pageModelId,\n      defaultOpenai: \"gpt-4o\",\n      defaultAnthropic: \"claude-sonnet-4-6\",\n    });\n\n    async function generateSinglePage(\n      page: DocumentOutline[\"pages\"][number],\n      retryCount = 0\n    ): Promise<Section3> {\n      const pageIdx = page.pageNumber - 1;\n      const isCover = page.type === \"cover\";\n\n      const userContent: any[] = [];\n\n      // Per-page reference image from PDF (takes priority)\n      const pageRef = referencePages?.[pageIdx];\n      if (pageRef) {\n        const converted = dataUrlToImagePart(pageRef);\n        if (converted) {\n          userContent.push({ type: \"image\", ...converted });\n        } else {\n          userContent.push({ type: \"image\", image: pageRef });\n        }\n      } else if (referenceImage && (isCover || page.type === \"visual\")) {\n        // Fallback: single reference image for cover/visual pages\n        const converted = dataUrlToImagePart(referenceImage);\n        if (converted) {\n          userContent.push({ type: \"image\", ...converted });\n        } else {\n          userContent.push({ type: \"image\", image: referenceImage });\n        }\n      }\n\n      const hasRefImage = !!pageRef || !!(referenceImage && (isCover || page.type === \"visual\"));\n      userContent.push({\n        type: \"text\",\n        text: `You are generating PAGE ${page.pageNumber} of ${outline.pages.length} for a professional document.\n${hasRefImage ? \"\\nREFERENCE IMAGE: The attached image shows the design to replicate. Match its layout, typography style, and visual structure as closely as possible while using the semantic color system and content from the brief.\" : \"\"}\n\nFULL DOCUMENT OUTLINE (for context — you are generating ONLY page ${page.pageNumber}):\n${outlineJson}\n\nYOUR PAGE ASSIGNMENT:\n- Label: ${page.label}\n- Type: ${page.type}\n- Layout preset (FOLLOW THIS RECIPE EXACTLY): \"${page.layoutPreset}\" — ${GAMMA_LAYOUTS[page.layoutPreset]}\n- Background: ${page.backgroundStyle}\n- Content: ${page.contentBrief}\n- Key elements: ${page.keyElements.join(\", \")}\n${page.continuesFrom ? `- Continues from: ${page.continuesFrom}` : \"\"}\n${isCover ? logoInstruction : logoUrl ? `\\nSmall logo header: <img src=\"${logoUrl}\" alt=\"Logo\" class=\"h-8 object-contain\" />` : \"\"}\n${directionInstruction}\n\nOUTPUT: A single JSON object on ONE line, no markdown fences:\n{\"label\": \"${page.label}\", \"html\": \"<section class='${PAGE_FORMAT_CONFIG[pageFormat].container} relative overflow-hidden flex flex-col'>...</section>\"}`,\n      });\n\n      try {\n        const result = streamText({\n          model: pageModel,\n          system: getDocumentSystemPrompt(pageFormat || \"letter\") + currentDateLine(),\n          messages: [{ role: \"user\", content: userContent }],\n        });\n\n        let buffer = \"\";\n        let chunkCount = 0;\n        for await (const chunk of result.textStream) {\n          buffer += chunk;\n          chunkCount++;\n          if (chunkCount % 5 === 0) {\n            const partial = extractPartialHtml(buffer);\n            if (partial) onPageChunk?.(pageIdx, partial);\n          }\n        }\n\n        // Accumulate token usage\n        const pageUsage = await result.usage;\n        totalInputTokens += pageUsage?.inputTokens || 0;\n        totalOutputTokens += pageUsage?.outputTokens || 0;\n\n        // Final partial before parse\n        const finalPartial = extractPartialHtml(buffer);\n        if (finalPartial) onPageChunk?.(pageIdx, finalPartial);\n\n        // Parse the JSON object\n        let cleaned = buffer.trim();\n        if (cleaned.startsWith(\"```\")) {\n          cleaned = cleaned.replace(/^```(?:json)?\\s*/, \"\").replace(/\\s*```$/, \"\");\n        }\n        const [objects] = extractJsonObjects(cleaned);\n        const obj = objects[0];\n        if (!obj?.html) throw new Error(`No valid HTML output for page ${page.pageNumber}`);\n\n        const section: Section3 = {\n          id: nanoid(8),\n          order: pageIdx,\n          html: sanitizeSemanticColors(addSvgLoadingPlaceholders(addLoadingPlaceholders(obj.html))),\n          label: obj.label || page.label,\n        };\n\n        onPageComplete?.(pageIdx, section);\n        return section;\n      } catch (err) {\n        if (retryCount < 1) {\n          console.warn(`Page ${page.pageNumber} failed, retrying:`, (err as Error).message);\n          return generateSinglePage(page, retryCount + 1);\n        }\n        // Return error placeholder\n        const section: Section3 = {\n          id: nanoid(8),\n          order: pageIdx,\n          html: `<section class=\"w-[8.5in] h-[11in] relative overflow-hidden flex flex-col bg-gray-50 items-center justify-center\"><div class=\"text-center text-gray-400\"><p class=\"text-lg font-semibold\">Error generando página</p><p class=\"text-sm mt-2\">${(err as Error).message?.slice(0, 100) || \"Error desconocido\"}</p></div></section>`,\n          label: page.label,\n        };\n        onPageComplete?.(pageIdx, section);\n        return section;\n      }\n    }\n\n    const results = await Promise.allSettled(\n      outline.pages.map((page) => generateSinglePage(page))\n    );\n\n    const sections: Section3[] = results\n      .map((r) => r.status === \"fulfilled\" ? r.value : null)\n      .filter((s): s is Section3 => s !== null)\n      .sort((a, b) => a.order - b.order);\n\n    // --- Phase 3: Image enrichment (sequential to respect Pexels rate limits) ---\n    for (const section of sections) {\n      await enrichSectionImages(section, {\n        pexelsApiKey,\n        openaiApiKey,\n        persistImage,\n        onImageUpdate,\n      });\n      await enrichSectionSvgCharts(section, {\n        anthropicApiKey,\n        onImageUpdate,\n      });\n      await enrichSectionIconSlots(section, { onImageUpdate });\n    }\n\n    // Final fallback for images without src\n    for (const section of sections) {\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      if (section.html !== before) {\n        onImageUpdate?.(section.id, section.html);\n      }\n    }\n\n    onUsage?.({ inputTokens: totalInputTokens, outputTokens: totalOutputTokens });\n    onDone?.(sections);\n    return sections;\n  } catch (err: any) {\n    const error = err instanceof Error ? err : new Error(err?.message || \"Parallel generation failed\");\n    onError?.(error);\n    throw error;\n  }\n}\n"],"mappings":"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","names":[]}