@easybits.cloud/html-tailwind-generator 0.2.30 → 0.2.32

package/dist/chunk-T3EHQBDS.js

@@ -0,0 +1,150 @@
+import {
+  dataUrlToImagePart,
+  streamGenerate
+} from "./chunk-PNEUKC6I.js";
+
+// src/generateDocument.ts
+var DOCUMENT_SYSTEM_PROMPT = `You are a professional document designer who creates stunning letter-sized (8.5" \xD7 11") document pages using HTML + Tailwind CSS.
+
+RULES:
+- Each page is a <section> element sized for letter paper
+- Page structure: <section class="w-[8.5in] min-h-[11in] relative overflow-hidden">
+- The section itself has NO padding \u2014 backgrounds, gradients, and decorative elements go edge-to-edge
+- For text content, use an inner wrapper: <div class="px-[0.75in] py-[0.5in]">...content...</div>
+- Cover pages and decorative sections can use full-bleed backgrounds (bg-primary, gradients, images that fill the entire page)
+- Content MUST NOT overflow page boundaries \u2014 be conservative with spacing
+- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import)
+- NO JavaScript, only HTML+Tailwind
+- All text content in Spanish unless the prompt specifies otherwise
+- Use real content from the source material, not Lorem ipsum
+- NOT responsive \u2014 fixed letter size, no breakpoints needed
+- Sections can have ANY background \u2014 full-bleed color, gradients, or white. Not limited to white paper.
+
+STRICT PROHIBITIONS:
+1. **NO EMOJI** \u2014 Never use emoji characters (\u{1F680}\u274C\u2705\u{1F4CA} 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.
+2. **NO Chart.js / NO JavaScript** \u2014 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>.
+3. **NO buttons or CTAs** \u2014 This is a print document, not a web page. No "Contactar", "Ver m\xE1s", "Comprar" buttons. Use text with contact info instead.
+4. **CONTRAST IS MANDATORY** \u2014 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.
+5. **Max 2 font weights per page** \u2014 Pick 2 (e.g. font-semibold + font-normal, or font-bold + font-light). Don't mix 4-5 weights.
+6. **Generous whitespace** \u2014 Don't fill every centimeter. Leave breathing room. Use py-8, py-12, gap-6, gap-8 liberally. Less content per page = more professional.
+
+DESIGN:
+- Clean, sophisticated layouts \u2014 think McKinsey reports, annual reports, premium proposals
+- Typography: strong hierarchy with just 2 weights, clear headings vs body
+- Tables: alternating row colors (bg-surface-alt), clean borders, generous cell padding (px-4 py-3)
+- Decorative elements: colored sidebars, header bands, geometric accent shapes (pure CSS divs with bg-primary)
+- First page MUST be a cover/title page with impactful design
+- For numerical data: CSS progress bars, styled tables with colored cells, large stat numbers \u2014 NEVER canvas/charts
+- Icons: use simple inline SVG (12-20px) for visual accents. Keep SVGs minimal (single path, no complex illustrations)
+
+CSS PROGRESS BARS \u2014 use this pattern for data visualization:
+<div class="w-full bg-gray-200 rounded-full h-3"><div class="bg-primary h-3 rounded-full" style="width: 75%"></div></div>
+
+COLOR SYSTEM \u2014 use semantic 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
+- Cover pages should use bold full-bleed backgrounds (bg-primary, gradients from-primary to-primary-dark)
+- CONTRAST: bg-primary/bg-primary-dark/bg-secondary \u2192 text-white or text-on-primary. White/bg-surface \u2192 text-gray-900 or text-on-surface
+
+IMAGES:
+- EVERY image MUST use: <img data-image-query="english search query" alt="description" class="w-full h-auto object-cover rounded-xl"/>
+- NEVER include a src attribute \u2014 the system auto-replaces data-image-query with a real image
+- For avatar-like elements, use colored divs with initials instead of img tags
+
+TAILWIND v3 NOTES:
+- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)
+- Borders: border + border-gray-200 for visible borders
+
+EXAMPLE \u2014 Cover page:
+<section class="w-[8.5in] min-h-[11in] relative overflow-hidden bg-white">
+  <div class="absolute left-0 top-0 w-[2.5in] h-full bg-primary"></div>
+  <div class="relative z-10 flex h-[11in]">
+    <div class="w-[2.5in] flex flex-col justify-end px-8 py-12">
+      <div class="text-white text-sm font-normal opacity-80">Marzo 2026</div>
+      <div class="text-white text-sm font-normal opacity-80 mt-1">Versi\xF3n 1.0</div>
+    </div>
+    <div class="flex-1 flex flex-col justify-center px-12">
+      <h1 class="text-5xl font-bold text-gray-900 leading-tight">Reporte<br/>Trimestral</h1>
+      <div class="w-16 h-1 bg-primary mt-6 mb-4"></div>
+      <p class="text-lg font-normal text-gray-500">Resultados y an\xE1lisis del primer trimestre</p>
+    </div>
+  </div>
+</section>
+
+EXAMPLE \u2014 Content page with table + progress bars:
+<section class="w-[8.5in] min-h-[11in] relative overflow-hidden bg-white">
+  <div class="h-1.5 bg-primary w-full"></div>
+  <div class="px-[0.75in] py-[0.5in]">
+    <h2 class="text-2xl font-bold text-gray-900 mb-1">M\xE9tricas de Rendimiento</h2>
+    <p class="text-sm font-normal text-gray-500 mb-8">Indicadores clave del periodo enero\u2014marzo</p>
+    <table class="w-full text-sm mb-10">
+      <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>
+      <tbody>
+        <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>
+        <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>
+        <tr class="bg-surface-alt"><td class="px-4 py-3 text-gray-900">Retenci\xF3n</td><td class="px-4 py-3 text-gray-900">92%</td><td class="px-4 py-3 text-gray-900">90%</td></tr>
+      </tbody>
+    </table>
+    <h3 class="text-lg font-bold text-gray-900 mb-4">Progreso por \xC1rea</h3>
+    <div class="space-y-4">
+      <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>
+      <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>
+      <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>
+    </div>
+  </div>
+</section>`;
+var DOCUMENT_PROMPT_SUFFIX = `
+
+OUTPUT FORMAT: NDJSON \u2014 one JSON object per line, NO wrapper array, NO markdown fences.
+Each line: {"label": "Page Title", "html": "<section class='w-[8.5in] min-h-[11in] relative overflow-hidden'>...</section>"}
+
+Generate 3-8 pages depending on content length. First page = cover/title page.
+Each page must fit within letter size (8.5" \xD7 11"). Be conservative with spacing.
+Make each page visually distinct \u2014 different layouts, different accent placements.`;
+async function generateDocument(options) {
+  const {
+    prompt,
+    logoUrl,
+    referenceImage,
+    extraInstructions,
+    ...rest
+  } = options;
+  const extra = extraInstructions ? `
+Additional instructions: ${extraInstructions}` : "";
+  const safePrompt = prompt.length > 15e3 ? prompt.substring(0, 15e3) + "\n[...content truncated...]" : prompt;
+  const logoInstruction = logoUrl ? `
+LOGO: Include this logo on the cover page and as a small header on other pages:
+<img src="${logoUrl}" alt="Logo" class="h-12 object-contain" />
+Use this exact <img> tag \u2014 do NOT invent a different logo.` : "";
+  const content = [];
+  if (referenceImage) {
+    const converted = dataUrlToImagePart(referenceImage);
+    if (converted) {
+      content.push({ type: "image", ...converted });
+    } else {
+      content.push({ type: "image", image: referenceImage });
+    }
+    content.push({
+      type: "text",
+      text: `Create a professional document inspired by this reference image for: ${safePrompt}${logoInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`
+    });
+  } else {
+    content.push({
+      type: "text",
+      text: `Create a professional document for: ${safePrompt}${logoInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`
+    });
+  }
+  return streamGenerate({
+    ...rest,
+    systemPrompt: DOCUMENT_SYSTEM_PROMPT,
+    userContent: content
+  });
+}
+
+export {
+  DOCUMENT_SYSTEM_PROMPT,
+  DOCUMENT_PROMPT_SUFFIX,
+  generateDocument
+};
+//# sourceMappingURL=chunk-T3EHQBDS.js.map

package/dist/chunk-T3EHQBDS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/generateDocument.ts"],"sourcesContent":["import { streamGenerate, dataUrlToImagePart } from \"./streamCore\";\nimport type { Section3 } from \"./types\";\n\nexport const DOCUMENT_SYSTEM_PROMPT = `You are a professional document designer who creates stunning letter-sized (8.5\" × 11\") document pages using HTML + Tailwind CSS.\n\nRULES:\n- Each page is a <section> element sized for letter paper\n- Page structure: <section class=\"w-[8.5in] min-h-[11in] relative overflow-hidden\">\n- The section itself has NO padding — backgrounds, gradients, and decorative elements go edge-to-edge\n- For text content, use an inner wrapper: <div class=\"px-[0.75in] py-[0.5in]\">...content...</div>\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 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 print document, not a 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\nDESIGN:\n- Clean, sophisticated layouts — think McKinsey reports, annual reports, premium proposals\n- Typography: strong hierarchy with just 2 weights, clear headings vs body\n- Tables: alternating row colors (bg-surface-alt), clean borders, generous cell padding (px-4 py-3)\n- Decorative elements: colored sidebars, header bands, geometric accent shapes (pure CSS divs with bg-primary)\n- First page MUST be a cover/title page with impactful design\n- For numerical data: CSS progress bars, styled tables with colored cells, large stat numbers — NEVER canvas/charts\n- Icons: use simple inline SVG (12-20px) for visual accents. Keep SVGs minimal (single path, no complex illustrations)\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:\n- EVERY image MUST use: <img data-image-query=\"english search query\" alt=\"description\" class=\"w-full h-auto object-cover rounded-xl\"/>\n- NEVER include a src attribute — the system auto-replaces data-image-query with a real image\n- For avatar-like elements, use colored divs with initials instead of img tags\n\nTAILWIND v3 NOTES:\n- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)\n- Borders: border + border-gray-200 for visible borders\n\nEXAMPLE — Cover page:\n<section class=\"w-[8.5in] min-h-[11in] relative overflow-hidden bg-white\">\n  <div class=\"absolute left-0 top-0 w-[2.5in] h-full bg-primary\"></div>\n  <div class=\"relative z-10 flex h-[11in]\">\n    <div class=\"w-[2.5in] flex flex-col justify-end px-8 py-12\">\n      <div class=\"text-white text-sm font-normal opacity-80\">Marzo 2026</div>\n      <div class=\"text-white text-sm font-normal opacity-80 mt-1\">Versión 1.0</div>\n    </div>\n    <div class=\"flex-1 flex flex-col justify-center px-12\">\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  </div>\n</section>\n\nEXAMPLE — Content page with table + progress bars:\n<section class=\"w-[8.5in] min-h-[11in] relative overflow-hidden bg-white\">\n  <div class=\"h-1.5 bg-primary w-full\"></div>\n  <div class=\"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\nexport const DOCUMENT_PROMPT_SUFFIX = `\n\nOUTPUT FORMAT: NDJSON — one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Page Title\", \"html\": \"<section class='w-[8.5in] min-h-[11in] relative overflow-hidden'>...</section>\"}\n\nGenerate 3-8 pages depending on content length. First page = cover/title page.\nEach page must fit within letter size (8.5\" × 11\"). Be conservative with spacing.\nMake each page visually distinct — different layouts, different accent placements.`;\n\nexport interface GenerateDocumentOptions {\n  anthropicApiKey?: string;\n  openaiApiKey?: string;\n  prompt: string;\n  logoUrl?: string;\n  referenceImage?: string;\n  extraInstructions?: string;\n  model?: string;\n  pexelsApiKey?: string;\n  persistImage?: (tempUrl: string, query: string) => Promise<string>;\n  onSection?: (section: Section3) => void;\n  onImageUpdate?: (sectionId: string, html: string) => void;\n  onDone?: (sections: Section3[]) => void;\n  onError?: (error: Error) => void;\n}\n\n/**\n * Generate a multi-page document with streaming AI + image enrichment.\n */\nexport async function generateDocument(options: GenerateDocumentOptions): Promise<Section3[]> {\n  const {\n    prompt,\n    logoUrl,\n    referenceImage,\n    extraInstructions,\n    ...rest\n  } = options;\n\n  const extra = extraInstructions ? `\\nAdditional instructions: ${extraInstructions}` : \"\";\n  // 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 — do NOT invent a different logo.`\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}${extra}${DOCUMENT_PROMPT_SUFFIX}`,\n    });\n  } else {\n    content.push({\n      type: \"text\",\n      text: `Create a professional document for: ${safePrompt}${logoInstruction}${extra}${DOCUMENT_PROMPT_SUFFIX}`,\n    });\n  }\n\n  return streamGenerate({\n    ...rest,\n    systemPrompt: DOCUMENT_SYSTEM_PROMPT,\n    userContent: content,\n  });\n}\n"],"mappings":";;;;;;AAGO,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2F/B,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BtC,eAAsB,iBAAiB,SAAuD;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAQ,oBAAoB;AAAA,2BAA8B,iBAAiB,KAAK;AAEtF,QAAM,aAAa,OAAO,SAAS,OAAS,OAAO,UAAU,GAAG,IAAM,IAAI,gCAAgC;AAC1G,QAAM,kBAAkB,UACpB;AAAA;AAAA,YAAgG,OAAO;AAAA,mEACvG;AAEJ,QAAM,UAAiB,CAAC;AAExB,MAAI,gBAAgB;AAClB,UAAM,YAAY,mBAAmB,cAAc;AACnD,QAAI,WAAW;AACb,cAAQ,KAAK,EAAE,MAAM,SAAS,GAAG,UAAU,CAAC;AAAA,IAC9C,OAAO;AACL,cAAQ,KAAK,EAAE,MAAM,SAAS,OAAO,eAAe,CAAC;AAAA,IACvD;AACA,YAAQ,KAAK;AAAA,MACX,MAAM;AAAA,MACN,MAAM,wEAAwE,UAAU,GAAG,eAAe,GAAG,KAAK,GAAG,sBAAsB;AAAA,IAC7I,CAAC;AAAA,EACH,OAAO;AACL,YAAQ,KAAK;AAAA,MACX,MAAM;AAAA,MACN,MAAM,uCAAuC,UAAU,GAAG,eAAe,GAAG,KAAK,GAAG,sBAAsB;AAAA,IAC5G,CAAC;AAAA,EACH;AAEA,SAAO,eAAe;AAAA,IACpB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}

package/dist/generateDocument.d.ts

@@ -1,6 +1,6 @@
 import { S as Section3 } from './types-Flpl4wDs.js';
 
-declare const DOCUMENT_SYSTEM_PROMPT = "You are a professional document designer who creates stunning letter-sized (8.5\" \u00D7 11\") document pages using HTML + Tailwind CSS.\n\nRULES:\n- Each page is a <section> element sized for letter paper\n- Page structure: <section class=\"w-[8.5in] min-h-[11in] relative overflow-hidden\">\n- The section itself has NO padding \u2014 backgrounds, gradients, and decorative elements go edge-to-edge\n- For text content, use an inner wrapper: <div class=\"px-[0.75in] py-[0.5in]\">...content...</div>\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 \u2014 be conservative with spacing\n- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import)\n- NO JavaScript, only HTML+Tailwind\n- All text content in Spanish unless the prompt specifies otherwise\n- Use real content from the source material, not Lorem ipsum\n- NOT responsive \u2014 fixed letter size, no breakpoints needed\n- Sections can have ANY background \u2014 full-bleed color, gradients, or white. Not limited to white paper.\n\nDESIGN:\n- Professional, colorful designs: geometric decorations, gradients, accent colors\n- Typography: use font weights (font-light to font-black), good hierarchy\n- Tables: Tailwind table classes, alternating row colors, clean borders\n- Decorative elements: colored sidebars, header bands, icon accents, SVG shapes\n- First page MUST be a cover/title page with impactful design\n- Use page-appropriate content density \u2014 don't cram too much on one page\n- For numerical data: styled tables, colored bars, progress elements\n\nCOLOR SYSTEM \u2014 use semantic classes for decorative elements:\n- bg-primary, text-primary, bg-primary-light, bg-primary-dark, text-on-primary\n- bg-surface, bg-surface-alt, text-on-surface, text-on-surface-muted\n- bg-secondary, text-secondary, bg-accent, text-accent\n- Use semantic colors freely for full-page backgrounds, headers, sidebars, decorative bars, table headers, accents\n- Cover pages should use bold full-bleed backgrounds (bg-primary, gradients)\n- CONTRAST RULE: on bg-primary \u2192 text-on-primary. On white/bg-surface \u2192 text-on-surface or text-primary\n- Gradients: from-primary to-primary-dark\n\nIMAGES:\n- EVERY image MUST use: <img data-image-query=\"english search query\" alt=\"description\" class=\"w-full h-auto object-cover rounded-xl\"/>\n- NEVER include a src attribute \u2014 the system auto-replaces data-image-query with a real image\n- For avatar-like elements, use colored divs with initials instead of img tags\n\nTAILWIND v3 NOTES:\n- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)\n- Borders: border + border-gray-200 for visible borders";
+declare const DOCUMENT_SYSTEM_PROMPT = "You are a professional document designer who creates stunning letter-sized (8.5\" \u00D7 11\") document pages using HTML + Tailwind CSS.\n\nRULES:\n- Each page is a <section> element sized for letter paper\n- Page structure: <section class=\"w-[8.5in] min-h-[11in] relative overflow-hidden\">\n- The section itself has NO padding \u2014 backgrounds, gradients, and decorative elements go edge-to-edge\n- For text content, use an inner wrapper: <div class=\"px-[0.75in] py-[0.5in]\">...content...</div>\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 \u2014 be conservative with spacing\n- Use Tailwind CDN classes ONLY (no custom CSS, no @apply, no @import)\n- NO JavaScript, only HTML+Tailwind\n- All text content in Spanish unless the prompt specifies otherwise\n- Use real content from the source material, not Lorem ipsum\n- NOT responsive \u2014 fixed letter size, no breakpoints needed\n- Sections can have ANY background \u2014 full-bleed color, gradients, or white. Not limited to white paper.\n\nSTRICT PROHIBITIONS:\n1. **NO EMOJI** \u2014 Never use emoji characters (\uD83D\uDE80\u274C\u2705\uD83D\uDCCA 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** \u2014 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** \u2014 This is a print document, not a web page. No \"Contactar\", \"Ver m\u00E1s\", \"Comprar\" buttons. Use text with contact info instead.\n4. **CONTRAST IS MANDATORY** \u2014 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** \u2014 Pick 2 (e.g. font-semibold + font-normal, or font-bold + font-light). Don't mix 4-5 weights.\n6. **Generous whitespace** \u2014 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\nDESIGN:\n- Clean, sophisticated layouts \u2014 think McKinsey reports, annual reports, premium proposals\n- Typography: strong hierarchy with just 2 weights, clear headings vs body\n- Tables: alternating row colors (bg-surface-alt), clean borders, generous cell padding (px-4 py-3)\n- Decorative elements: colored sidebars, header bands, geometric accent shapes (pure CSS divs with bg-primary)\n- First page MUST be a cover/title page with impactful design\n- For numerical data: CSS progress bars, styled tables with colored cells, large stat numbers \u2014 NEVER canvas/charts\n- Icons: use simple inline SVG (12-20px) for visual accents. Keep SVGs minimal (single path, no complex illustrations)\n\nCSS PROGRESS BARS \u2014 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 \u2014 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 \u2192 text-white or text-on-primary. White/bg-surface \u2192 text-gray-900 or text-on-surface\n\nIMAGES:\n- EVERY image MUST use: <img data-image-query=\"english search query\" alt=\"description\" class=\"w-full h-auto object-cover rounded-xl\"/>\n- NEVER include a src attribute \u2014 the system auto-replaces data-image-query with a real image\n- For avatar-like elements, use colored divs with initials instead of img tags\n\nTAILWIND v3 NOTES:\n- Standard Tailwind v3 classes (shadow-sm, shadow-md, rounded-md, etc.)\n- Borders: border + border-gray-200 for visible borders\n\nEXAMPLE \u2014 Cover page:\n<section class=\"w-[8.5in] min-h-[11in] relative overflow-hidden bg-white\">\n  <div class=\"absolute left-0 top-0 w-[2.5in] h-full bg-primary\"></div>\n  <div class=\"relative z-10 flex h-[11in]\">\n    <div class=\"w-[2.5in] flex flex-col justify-end px-8 py-12\">\n      <div class=\"text-white text-sm font-normal opacity-80\">Marzo 2026</div>\n      <div class=\"text-white text-sm font-normal opacity-80 mt-1\">Versi\u00F3n 1.0</div>\n    </div>\n    <div class=\"flex-1 flex flex-col justify-center px-12\">\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\u00E1lisis del primer trimestre</p>\n    </div>\n  </div>\n</section>\n\nEXAMPLE \u2014 Content page with table + progress bars:\n<section class=\"w-[8.5in] min-h-[11in] relative overflow-hidden bg-white\">\n  <div class=\"h-1.5 bg-primary w-full\"></div>\n  <div class=\"px-[0.75in] py-[0.5in]\">\n    <h2 class=\"text-2xl font-bold text-gray-900 mb-1\">M\u00E9tricas de Rendimiento</h2>\n    <p class=\"text-sm font-normal text-gray-500 mb-8\">Indicadores clave del periodo enero\u2014marzo</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\u00F3n</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 \u00C1rea</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>";
 declare const DOCUMENT_PROMPT_SUFFIX = "\n\nOUTPUT FORMAT: NDJSON \u2014 one JSON object per line, NO wrapper array, NO markdown fences.\nEach line: {\"label\": \"Page Title\", \"html\": \"<section class='w-[8.5in] min-h-[11in] relative overflow-hidden'>...</section>\"}\n\nGenerate 3-8 pages depending on content length. First page = cover/title page.\nEach page must fit within letter size (8.5\" \u00D7 11\"). Be conservative with spacing.\nMake each page visually distinct \u2014 different layouts, different accent placements.";
 interface GenerateDocumentOptions {
     anthropicApiKey?: string;

package/dist/generateDocument.js

@@ -2,7 +2,7 @@ import {
   DOCUMENT_PROMPT_SUFFIX,
   DOCUMENT_SYSTEM_PROMPT,
   generateDocument
-} from "./chunk-23X3KWDC.js";
+} from "./chunk-T3EHQBDS.js";
 import "./chunk-PNEUKC6I.js";
 import "./chunk-FM4IJA64.js";
 export {

package/dist/index.js

@@ -15,7 +15,7 @@ import {
   DOCUMENT_PROMPT_SUFFIX,
   DOCUMENT_SYSTEM_PROMPT,
   generateDocument
-} from "./chunk-23X3KWDC.js";
+} from "./chunk-T3EHQBDS.js";
 import {
   extractJsonObjects
 } from "./chunk-PNEUKC6I.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easybits.cloud/html-tailwind-generator",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "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-23X3KWDC.js

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

package/dist/chunk-23X3KWDC.js.map

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