@easybits.cloud/html-tailwind-generator 0.2.125 → 0.2.127

package/dist/{ViewportToggle-DefLZWrz.d.ts → ViewportToggle-Dszv1gsL.d.ts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { S as Section3, I as IframeMessage } from './types-BIpbpCJr.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { C as CustomColors, a as LandingTheme } from './themes-DNTBHJUH.js';
@@ -11,10 +11,10 @@ interface CanvasProps {
     sections: Section3[];
     theme?: string;
     onMessage: (msg: IframeMessage) => void;
-    iframeRectRef: React.MutableRefObject<DOMRect | null>;
+    iframeRectRef: React__default.MutableRefObject<DOMRect | null>;
     onReady?: () => void;
 }
-declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<CanvasHandle>>;
+declare const Canvas: React__default.ForwardRefExoticComponent<CanvasProps & React__default.RefAttributes<CanvasHandle>>;
 
 interface SectionListProps {
     sections: Section3[];

package/dist/buildHtmlV4.d.ts

@@ -0,0 +1,14 @@
+import { S as Section3 } from './types-BIpbpCJr.js';
+
+/**
+ * Build deploy HTML for Landings v4 (GrapesJS).
+ * Includes Tailwind CDN + theme CSS variables + any GrapesJS-generated CSS.
+ */
+declare function buildDeployHtmlV4(sections: Section3[], opts?: {
+    showBranding?: boolean;
+    title?: string;
+    themeName?: string;
+    customColors?: Record<string, string>;
+}): string;
+
+export { buildDeployHtmlV4 };

package/dist/buildHtmlV4.js

@@ -0,0 +1,8 @@
+import {
+  buildDeployHtmlV4
+} from "./chunk-KXOAEC33.js";
+import "./chunk-VV5I53WR.js";
+export {
+  buildDeployHtmlV4
+};
+//# sourceMappingURL=buildHtmlV4.js.map

package/dist/buildHtmlV4.js.map

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

package/dist/chunk-7LKFTF32.js

@@ -0,0 +1,54 @@
+// src/grapesToSections.ts
+var idCounter = 0;
+function stableId() {
+  return `s4_${Date.now().toString(36)}_${(idCounter++).toString(36)}`;
+}
+function grapesToSections(html) {
+  if (!html || !html.trim()) return [];
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  const styleTags = [
+    ...Array.from(doc.head.querySelectorAll("style")),
+    ...Array.from(doc.body.querySelectorAll("style"))
+  ];
+  const cssContent = styleTags.map((s) => s.textContent || "").join("\n").trim();
+  doc.body.querySelectorAll("style").forEach((s) => s.remove());
+  const children = Array.from(doc.body.children);
+  const sections = [];
+  if (cssContent) {
+    sections.push({
+      id: "__grapes_css__",
+      order: -1,
+      html: `<style>${cssContent}</style>`,
+      label: "__css__"
+    });
+  }
+  if (children.length === 0 && doc.body.innerHTML.trim()) {
+    sections.push({
+      id: stableId(),
+      order: 0,
+      html: `<section>${doc.body.innerHTML.trim()}</section>`,
+      label: "Section 1"
+    });
+    return sections;
+  }
+  let order = 0;
+  for (const el of children) {
+    if (el.tagName !== "SECTION" && !el.getAttribute("data-section-id") && !el.textContent?.trim() && !el.querySelector("img, video, svg, canvas, iframe")) {
+      continue;
+    }
+    const id = el.getAttribute("data-section-id") || stableId();
+    sections.push({
+      id,
+      order: order++,
+      html: el.outerHTML,
+      label: el.getAttribute("data-label") || (el.tagName === "SECTION" ? `Section ${order}` : `Block ${order}`)
+    });
+  }
+  return sections;
+}
+
+export {
+  grapesToSections
+};
+//# sourceMappingURL=chunk-7LKFTF32.js.map

package/dist/chunk-7LKFTF32.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/grapesToSections.ts"],"sourcesContent":["import type { Section3 } from \"./types\";\n\n/** Simple counter-based ID to keep stable across saves within a session */\nlet idCounter = 0;\nfunction stableId() {\n  return `s4_${Date.now().toString(36)}_${(idCounter++).toString(36)}`;\n}\n\n/**\n * Extract Section3[] from GrapesJS editor HTML (which may include a <style> block).\n * The <style> block with GrapesJS CSS is stored as a special first section.\n * Each top-level <section> or element becomes one Section3 entry.\n *\n * NOTE: Browser-only — uses DOMParser.\n */\nexport function grapesToSections(html: string): Section3[] {\n  if (!html || !html.trim()) return [];\n\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(html, \"text/html\");\n\n  // Extract <style> tags (GrapesJS CSS) from head and body\n  const styleTags = [\n    ...Array.from(doc.head.querySelectorAll(\"style\")),\n    ...Array.from(doc.body.querySelectorAll(\"style\")),\n  ];\n  const cssContent = styleTags.map((s) => s.textContent || \"\").join(\"\\n\").trim();\n  // Remove style tags from body before processing elements\n  doc.body.querySelectorAll(\"style\").forEach((s) => s.remove());\n\n  const children = Array.from(doc.body.children);\n  const sections: Section3[] = [];\n\n  // Store CSS as a special section if present\n  if (cssContent) {\n    sections.push({\n      id: \"__grapes_css__\",\n      order: -1,\n      html: `<style>${cssContent}</style>`,\n      label: \"__css__\",\n    });\n  }\n\n  if (children.length === 0 && doc.body.innerHTML.trim()) {\n    sections.push({\n      id: stableId(),\n      order: 0,\n      html: `<section>${doc.body.innerHTML.trim()}</section>`,\n      label: \"Section 1\",\n    });\n    return sections;\n  }\n\n  let order = 0;\n  for (const el of children) {\n    // Skip empty non-section elements without data-section-id (GrapesJS ghost wrappers)\n    if (\n      el.tagName !== \"SECTION\" &&\n      !el.getAttribute(\"data-section-id\") &&\n      !el.textContent?.trim() &&\n      !el.querySelector(\"img, video, svg, canvas, iframe\")\n    ) {\n      continue;\n    }\n\n    const id =\n      el.getAttribute(\"data-section-id\") || stableId();\n\n    sections.push({\n      id,\n      order: order++,\n      html: el.outerHTML,\n      label:\n        el.getAttribute(\"data-label\") ||\n        (el.tagName === \"SECTION\" ? `Section ${order}` : `Block ${order}`),\n    });\n  }\n\n  return sections;\n}\n"],"mappings":";AAGA,IAAI,YAAY;AAChB,SAAS,WAAW;AAClB,SAAO,MAAM,KAAK,IAAI,EAAE,SAAS,EAAE,CAAC,KAAK,aAAa,SAAS,EAAE,CAAC;AACpE;AASO,SAAS,iBAAiB,MAA0B;AACzD,MAAI,CAAC,QAAQ,CAAC,KAAK,KAAK,EAAG,QAAO,CAAC;AAEnC,QAAM,SAAS,IAAI,UAAU;AAC7B,QAAM,MAAM,OAAO,gBAAgB,MAAM,WAAW;AAGpD,QAAM,YAAY;AAAA,IAChB,GAAG,MAAM,KAAK,IAAI,KAAK,iBAAiB,OAAO,CAAC;AAAA,IAChD,GAAG,MAAM,KAAK,IAAI,KAAK,iBAAiB,OAAO,CAAC;AAAA,EAClD;AACA,QAAM,aAAa,UAAU,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,EAAE,KAAK,IAAI,EAAE,KAAK;AAE7E,MAAI,KAAK,iBAAiB,OAAO,EAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;AAE5D,QAAM,WAAW,MAAM,KAAK,IAAI,KAAK,QAAQ;AAC7C,QAAM,WAAuB,CAAC;AAG9B,MAAI,YAAY;AACd,aAAS,KAAK;AAAA,MACZ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,MAAM,UAAU,UAAU;AAAA,MAC1B,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,MAAI,SAAS,WAAW,KAAK,IAAI,KAAK,UAAU,KAAK,GAAG;AACtD,aAAS,KAAK;AAAA,MACZ,IAAI,SAAS;AAAA,MACb,OAAO;AAAA,MACP,MAAM,YAAY,IAAI,KAAK,UAAU,KAAK,CAAC;AAAA,MAC3C,OAAO;AAAA,IACT,CAAC;AACD,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ;AACZ,aAAW,MAAM,UAAU;AAEzB,QACE,GAAG,YAAY,aACf,CAAC,GAAG,aAAa,iBAAiB,KAClC,CAAC,GAAG,aAAa,KAAK,KACtB,CAAC,GAAG,cAAc,iCAAiC,GACnD;AACA;AAAA,IACF;AAEA,UAAM,KACJ,GAAG,aAAa,iBAAiB,KAAK,SAAS;AAEjD,aAAS,KAAK;AAAA,MACZ;AAAA,MACA,OAAO;AAAA,MACP,MAAM,GAAG;AAAA,MACT,OACE,GAAG,aAAa,YAAY,MAC3B,GAAG,YAAY,YAAY,WAAW,KAAK,KAAK,SAAS,KAAK;AAAA,IACnE,CAAC;AAAA,EACH;AAEA,SAAO;AACT;","names":[]}

package/dist/{chunk-ZARS4VIK.js → chunk-CQXBVGVC.js}

@@ -1,10 +1,10 @@
-import {
-  buildThemePromptContext
-} from "./chunk-VV5I53WR.js";
 import {
   dataUrlToImagePart,
   streamGenerate
 } from "./chunk-YZHRLDQF.js";
+import {
+  buildThemePromptContext
+} from "./chunk-VV5I53WR.js";
 
 // src/generate.ts
 var SYSTEM_PROMPT = `You are a world-class web designer who creates AWARD-WINNING landing pages. Your designs win Awwwards, FWA, and CSS Design Awards. You think in terms of visual hierarchy, whitespace, and emotional impact.
@@ -196,4 +196,4 @@ export {
   PROMPT_SUFFIX,
   generateLanding
 };
-//# sourceMappingURL=chunk-ZARS4VIK.js.map
+//# sourceMappingURL=chunk-CQXBVGVC.js.map

package/dist/chunk-KXOAEC33.js

@@ -0,0 +1,67 @@
+import {
+  buildCustomTheme,
+  buildSingleThemeCss
+} from "./chunk-VV5I53WR.js";
+
+// src/buildHtmlV4.ts
+function buildDeployHtmlV4(sections, opts) {
+  const cssSection = sections.find((s) => s.id === "__grapes_css__");
+  const contentSections = sections.filter((s) => s.id !== "__grapes_css__").sort((a, b) => a.order - b.order);
+  let grapesCSS = "";
+  if (cssSection) {
+    const match = cssSection.html.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
+    grapesCSS = match?.[1] || "";
+  }
+  let themeCss = "";
+  if (opts?.customColors && Object.keys(opts.customColors).length) {
+    let colors = opts.customColors;
+    if (!colors["on-primary"] && colors.primary) {
+      const full = buildCustomTheme(colors);
+      colors = full.colors;
+    }
+    const vars = Object.entries(colors).map(([k, v]) => `  --color-${k}: ${v};`).join("\n");
+    themeCss = `:root {
+${vars}
+}`;
+  } else if (opts?.themeName && opts.themeName !== "custom") {
+    try {
+      themeCss = buildSingleThemeCss(opts.themeName).css || "";
+    } catch {
+    }
+  }
+  const body = contentSections.map((s) => {
+    return s.html.replace(/\s+contenteditable="[^"]*"/gi, "").replace(/\s+data-section-id="[^"]*"/gi, "").replace(/\s+data-label="[^"]*"/gi, "").replace(/\s+data-gjs[^=]*="[^"]*"/gi, "");
+  }).join("\n");
+  const branding = opts?.showBranding !== false ? `<div style="text-align:center;padding:12px;font-size:11px;opacity:.5;font-family:system-ui">
+        Built with <a href="https://easybits.cloud" target="_blank" style="color:inherit;text-decoration:underline">EasyBits</a>
+      </div>` : "";
+  return `<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>${opts?.title || "Landing Page"}</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+tailwind.config={theme:{extend:{colors:{primary:'var(--color-primary)','primary-light':'var(--color-primary-light)','primary-dark':'var(--color-primary-dark)',secondary:'var(--color-secondary)',accent:'var(--color-accent)',surface:'var(--color-surface)','surface-alt':'var(--color-surface-alt)','on-primary':'var(--color-on-primary)','on-secondary':'var(--color-on-secondary)','on-accent':'var(--color-on-accent)','on-surface':'var(--color-on-surface)','on-surface-muted':'var(--color-on-surface-muted)'}}}}
+</script>
+<style>
+${themeCss}
+*{margin:0;padding:0;box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{font-family:system-ui,-apple-system,sans-serif}
+img{max-width:100%;height:auto}
+${grapesCSS}
+</style>
+</head>
+<body>
+${body}
+${branding}
+</body>
+</html>`;
+}
+
+export {
+  buildDeployHtmlV4
+};
+//# sourceMappingURL=chunk-KXOAEC33.js.map

package/dist/chunk-KXOAEC33.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/buildHtmlV4.ts"],"sourcesContent":["import type { Section3 } from \"./types\";\nimport { buildSingleThemeCss, buildCustomTheme } from \"./themes\";\n\n/**\n * Build deploy HTML for Landings v4 (GrapesJS).\n * Includes Tailwind CDN + theme CSS variables + any GrapesJS-generated CSS.\n */\nexport function buildDeployHtmlV4(\n  sections: Section3[],\n  opts?: {\n    showBranding?: boolean;\n    title?: string;\n    themeName?: string;\n    customColors?: Record<string, string>;\n  }\n): string {\n  const cssSection = sections.find((s) => s.id === \"__grapes_css__\");\n  const contentSections = sections\n    .filter((s) => s.id !== \"__grapes_css__\")\n    .sort((a, b) => a.order - b.order);\n\n  // Extract raw CSS from the <style> wrapper\n  let grapesCSS = \"\";\n  if (cssSection) {\n    const match = cssSection.html.match(/<style[^>]*>([\\s\\S]*?)<\\/style>/i);\n    grapesCSS = match?.[1] || \"\";\n  }\n\n  // Build theme CSS variables\n  let themeCss = \"\";\n  if (opts?.customColors && Object.keys(opts.customColors).length) {\n    let colors = opts.customColors;\n    // Brand kit (only 4 colors) → derive full theme with on-* colors\n    if (!colors[\"on-primary\"] && colors.primary) {\n      const full = buildCustomTheme(colors as any);\n      colors = full.colors;\n    }\n    const vars = Object.entries(colors)\n      .map(([k, v]) => `  --color-${k}: ${v};`)\n      .join(\"\\n\");\n    themeCss = `:root {\\n${vars}\\n}`;\n  } else if (opts?.themeName && opts.themeName !== \"custom\") {\n    try {\n      themeCss = buildSingleThemeCss(opts.themeName).css || \"\";\n    } catch { /* fallback: no theme */ }\n  }\n\n  const body = contentSections\n    .map((s) => {\n      return s.html\n        .replace(/\\s+contenteditable=\"[^\"]*\"/gi, \"\")\n        .replace(/\\s+data-section-id=\"[^\"]*\"/gi, \"\")\n        .replace(/\\s+data-label=\"[^\"]*\"/gi, \"\")\n        .replace(/\\s+data-gjs[^=]*=\"[^\"]*\"/gi, \"\");\n    })\n    .join(\"\\n\");\n\n  const branding = opts?.showBranding !== false\n    ? `<div style=\"text-align:center;padding:12px;font-size:11px;opacity:.5;font-family:system-ui\">\n        Built with <a href=\"https://easybits.cloud\" target=\"_blank\" style=\"color:inherit;text-decoration:underline\">EasyBits</a>\n      </div>`\n    : \"\";\n\n  return `<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n<meta charset=\"UTF-8\"/>\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"/>\n<title>${opts?.title || \"Landing Page\"}</title>\n<script src=\"https://cdn.tailwindcss.com\"><\\/script>\n<script>\ntailwind.config={theme:{extend:{colors:{primary:'var(--color-primary)','primary-light':'var(--color-primary-light)','primary-dark':'var(--color-primary-dark)',secondary:'var(--color-secondary)',accent:'var(--color-accent)',surface:'var(--color-surface)','surface-alt':'var(--color-surface-alt)','on-primary':'var(--color-on-primary)','on-secondary':'var(--color-on-secondary)','on-accent':'var(--color-on-accent)','on-surface':'var(--color-on-surface)','on-surface-muted':'var(--color-on-surface-muted)'}}}}\n<\\/script>\n<style>\n${themeCss}\n*{margin:0;padding:0;box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{font-family:system-ui,-apple-system,sans-serif}\nimg{max-width:100%;height:auto}\n${grapesCSS}\n</style>\n</head>\n<body>\n${body}\n${branding}\n</body>\n</html>`;\n}\n"],"mappings":";;;;;;AAOO,SAAS,kBACd,UACA,MAMQ;AACR,QAAM,aAAa,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,gBAAgB;AACjE,QAAM,kBAAkB,SACrB,OAAO,CAAC,MAAM,EAAE,OAAO,gBAAgB,EACvC,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAGnC,MAAI,YAAY;AAChB,MAAI,YAAY;AACd,UAAM,QAAQ,WAAW,KAAK,MAAM,kCAAkC;AACtE,gBAAY,QAAQ,CAAC,KAAK;AAAA,EAC5B;AAGA,MAAI,WAAW;AACf,MAAI,MAAM,gBAAgB,OAAO,KAAK,KAAK,YAAY,EAAE,QAAQ;AAC/D,QAAI,SAAS,KAAK;AAElB,QAAI,CAAC,OAAO,YAAY,KAAK,OAAO,SAAS;AAC3C,YAAM,OAAO,iBAAiB,MAAa;AAC3C,eAAS,KAAK;AAAA,IAChB;AACA,UAAM,OAAO,OAAO,QAAQ,MAAM,EAC/B,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,aAAa,CAAC,KAAK,CAAC,GAAG,EACvC,KAAK,IAAI;AACZ,eAAW;AAAA,EAAY,IAAI;AAAA;AAAA,EAC7B,WAAW,MAAM,aAAa,KAAK,cAAc,UAAU;AACzD,QAAI;AACF,iBAAW,oBAAoB,KAAK,SAAS,EAAE,OAAO;AAAA,IACxD,QAAQ;AAAA,IAA2B;AAAA,EACrC;AAEA,QAAM,OAAO,gBACV,IAAI,CAAC,MAAM;AACV,WAAO,EAAE,KACN,QAAQ,gCAAgC,EAAE,EAC1C,QAAQ,gCAAgC,EAAE,EAC1C,QAAQ,2BAA2B,EAAE,EACrC,QAAQ,8BAA8B,EAAE;AAAA,EAC7C,CAAC,EACA,KAAK,IAAI;AAEZ,QAAM,WAAW,MAAM,iBAAiB,QACpC;AAAA;AAAA,gBAGA;AAEJ,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,SAKA,MAAM,SAAS,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpC,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR,SAAS;AAAA;AAAA;AAAA;AAAA,EAIT,IAAI;AAAA,EACJ,QAAQ;AAAA;AAAA;AAGV;","names":[]}

package/dist/chunk-LI4UDDMT.js

@@ -0,0 +1,117 @@
+// src/hooks/useThumbnailCapture.ts
+import { useState, useRef, useCallback, useEffect } from "react";
+function buildCaptureHtml(sectionHtml, themeCssData) {
+  return `<!DOCTYPE html><html><head>
+<meta charset="UTF-8">
+<script src="https://cdn.tailwindcss.com"></script>
+${themeCssData ? `<script>tailwind.config = ${themeCssData.tailwindConfig}</script>` : ""}
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Inter', sans-serif; width: 8.5in; height: 11in; overflow: hidden; }
+${themeCssData?.css || ""}
+</style>
+</head><body>${sectionHtml}</body></html>`;
+}
+var THUMB_W = 200;
+var THUMB_H = Math.round(THUMB_W * (11 / 8.5));
+function useThumbnailCapture(sections, themeCssData) {
+  const [thumbs, setThumbs] = useState({});
+  const iframeRef = useRef(null);
+  const queueRef = useRef([]);
+  const busyRef = useRef(false);
+  const lastHtmlRef = useRef({});
+  const debounceRef = useRef(void 0);
+  const processQueue = useCallback(() => {
+    if (busyRef.current || queueRef.current.length === 0) return;
+    busyRef.current = true;
+    const item = queueRef.current.shift();
+    if (!iframeRef.current) {
+      const iframe2 = document.createElement("iframe");
+      iframe2.style.cssText = "position:fixed;top:-9999px;left:-9999px;width:816px;height:1056px;opacity:0;pointer-events:none;border:none;";
+      document.body.appendChild(iframe2);
+      iframeRef.current = iframe2;
+    }
+    const iframe = iframeRef.current;
+    const html = buildCaptureHtml(item.html, themeCssData);
+    const onLoad = () => {
+      iframe.removeEventListener("load", onLoad);
+      setTimeout(() => {
+        try {
+          const doc = iframe.contentDocument;
+          if (!doc?.body) throw new Error("no doc");
+          const canvas = document.createElement("canvas");
+          canvas.width = THUMB_W * 2;
+          canvas.height = THUMB_H * 2;
+          const ctx = canvas.getContext("2d");
+          ctx.scale(2, 2);
+          const svgData = `<svg xmlns="http://www.w3.org/2000/svg" width="${THUMB_W}" height="${THUMB_H}">
+            <foreignObject width="816" height="1056" transform="scale(${THUMB_W / 816})">
+              ${new XMLSerializer().serializeToString(doc.documentElement)}
+            </foreignObject>
+          </svg>`;
+          const img = new Image();
+          img.onload = () => {
+            ctx.drawImage(img, 0, 0, THUMB_W, THUMB_H);
+            const dataUrl = canvas.toDataURL("image/png");
+            setThumbs((prev) => ({ ...prev, [item.id]: dataUrl }));
+            busyRef.current = false;
+            processQueue();
+          };
+          img.onerror = () => {
+            busyRef.current = false;
+            processQueue();
+          };
+          img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgData);
+        } catch {
+          busyRef.current = false;
+          processQueue();
+        }
+      }, 800);
+    };
+    iframe.addEventListener("load", onLoad);
+    iframe.srcdoc = html;
+  }, [themeCssData]);
+  useEffect(() => {
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      const content = sections.filter((s) => s.id !== "__grapes_css__" && s.label !== "__css__");
+      let changed = false;
+      for (const s of content) {
+        if (lastHtmlRef.current[s.id] !== s.html) {
+          lastHtmlRef.current[s.id] = s.html;
+          queueRef.current = queueRef.current.filter((q) => q.id !== s.id);
+          queueRef.current.push({ id: s.id, html: s.html });
+          changed = true;
+        }
+      }
+      const ids = new Set(content.map((s) => s.id));
+      for (const id of Object.keys(lastHtmlRef.current)) {
+        if (!ids.has(id)) delete lastHtmlRef.current[id];
+      }
+      if (changed) processQueue();
+    }, 500);
+    return () => clearTimeout(debounceRef.current);
+  }, [sections, processQueue]);
+  const prevThemeRef = useRef(themeCssData);
+  useEffect(() => {
+    if (prevThemeRef.current === themeCssData) return;
+    prevThemeRef.current = themeCssData;
+    lastHtmlRef.current = {};
+    setThumbs({});
+  }, [themeCssData]);
+  useEffect(() => {
+    return () => {
+      if (iframeRef.current) {
+        iframeRef.current.remove();
+        iframeRef.current = null;
+      }
+    };
+  }, []);
+  return thumbs;
+}
+
+export {
+  useThumbnailCapture
+};
+//# sourceMappingURL=chunk-LI4UDDMT.js.map

package/dist/chunk-LI4UDDMT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useThumbnailCapture.ts"],"sourcesContent":["import { useState, useRef, useCallback, useEffect } from \"react\";\nimport type { Section3 } from \"../types\";\n\n/** Build HTML for the off-screen capture iframe */\nfunction buildCaptureHtml(sectionHtml: string, themeCssData?: { css: string; tailwindConfig: string }): string {\n  return `<!DOCTYPE html><html><head>\n<meta charset=\"UTF-8\">\n<script src=\"https://cdn.tailwindcss.com\"><\\/script>\n${themeCssData ? `<script>tailwind.config = ${themeCssData.tailwindConfig}<\\/script>` : \"\"}\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n* { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: 'Inter', sans-serif; width: 8.5in; height: 11in; overflow: hidden; }\n${themeCssData?.css || \"\"}\n</style>\n</head><body>${sectionHtml}</body></html>`;\n}\n\nconst THUMB_W = 200;\nconst THUMB_H = Math.round(THUMB_W * (11 / 8.5));\n\n/**\n * Captures static thumbnail images from sections using a single off-screen iframe.\n * Processes one section at a time via a queue to avoid N simultaneous Tailwind CDN loads.\n */\nexport function useThumbnailCapture(\n  sections: Section3[],\n  themeCssData?: { css: string; tailwindConfig: string }\n) {\n  const [thumbs, setThumbs] = useState<Record<string, string>>({});\n  const iframeRef = useRef<HTMLIFrameElement | null>(null);\n  const queueRef = useRef<{ id: string; html: string }[]>([]);\n  const busyRef = useRef(false);\n  const lastHtmlRef = useRef<Record<string, string>>({});\n  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n  const processQueue = useCallback(() => {\n    if (busyRef.current || queueRef.current.length === 0) return;\n    busyRef.current = true;\n\n    const item = queueRef.current.shift()!;\n\n    // Create iframe on demand\n    if (!iframeRef.current) {\n      const iframe = document.createElement(\"iframe\");\n      iframe.style.cssText = \"position:fixed;top:-9999px;left:-9999px;width:816px;height:1056px;opacity:0;pointer-events:none;border:none;\";\n      document.body.appendChild(iframe);\n      iframeRef.current = iframe;\n    }\n\n    const iframe = iframeRef.current;\n    const html = buildCaptureHtml(item.html, themeCssData);\n\n    const onLoad = () => {\n      iframe.removeEventListener(\"load\", onLoad);\n      // Wait for Tailwind CDN to process + images to load\n      setTimeout(() => {\n        try {\n          const doc = iframe.contentDocument;\n          if (!doc?.body) throw new Error(\"no doc\");\n          const canvas = document.createElement(\"canvas\");\n          canvas.width = THUMB_W * 2; // 2x for retina\n          canvas.height = THUMB_H * 2;\n          const ctx = canvas.getContext(\"2d\")!;\n          ctx.scale(2, 2);\n\n          // Use svg foreignObject to render HTML to canvas\n          const svgData = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${THUMB_W}\" height=\"${THUMB_H}\">\n            <foreignObject width=\"816\" height=\"1056\" transform=\"scale(${THUMB_W / 816})\">\n              ${new XMLSerializer().serializeToString(doc.documentElement)}\n            </foreignObject>\n          </svg>`;\n          const img = new Image();\n          img.onload = () => {\n            ctx.drawImage(img, 0, 0, THUMB_W, THUMB_H);\n            const dataUrl = canvas.toDataURL(\"image/png\");\n            setThumbs((prev) => ({ ...prev, [item.id]: dataUrl }));\n            busyRef.current = false;\n            processQueue();\n          };\n          img.onerror = () => {\n            busyRef.current = false;\n            processQueue();\n          };\n          img.src = \"data:image/svg+xml;charset=utf-8,\" + encodeURIComponent(svgData);\n        } catch {\n          busyRef.current = false;\n          processQueue();\n        }\n      }, 800);\n    };\n\n    iframe.addEventListener(\"load\", onLoad);\n    iframe.srcdoc = html;\n  }, [themeCssData]);\n\n  // Queue sections that changed\n  useEffect(() => {\n    clearTimeout(debounceRef.current);\n    debounceRef.current = setTimeout(() => {\n      const content = sections.filter((s) => s.id !== \"__grapes_css__\" && s.label !== \"__css__\");\n      let changed = false;\n      for (const s of content) {\n        if (lastHtmlRef.current[s.id] !== s.html) {\n          lastHtmlRef.current[s.id] = s.html;\n          queueRef.current = queueRef.current.filter((q) => q.id !== s.id);\n          queueRef.current.push({ id: s.id, html: s.html });\n          changed = true;\n        }\n      }\n      // Clean up removed sections\n      const ids = new Set(content.map((s) => s.id));\n      for (const id of Object.keys(lastHtmlRef.current)) {\n        if (!ids.has(id)) delete lastHtmlRef.current[id];\n      }\n      if (changed) processQueue();\n    }, 500);\n\n    return () => clearTimeout(debounceRef.current);\n  }, [sections, processQueue]);\n\n  // Re-capture all when theme changes\n  const prevThemeRef = useRef(themeCssData);\n  useEffect(() => {\n    if (prevThemeRef.current === themeCssData) return;\n    prevThemeRef.current = themeCssData;\n    lastHtmlRef.current = {};\n    setThumbs({});\n  }, [themeCssData]);\n\n  // Cleanup iframe on unmount\n  useEffect(() => {\n    return () => {\n      if (iframeRef.current) {\n        iframeRef.current.remove();\n        iframeRef.current = null;\n      }\n    };\n  }, []);\n\n  return thumbs;\n}\n"],"mappings":"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","names":["iframe"]}

package/dist/{chunk-T4F6F3HD.js → chunk-RJQKHWIH.js}

@@ -1,12 +1,12 @@
-import {
-  buildThemePromptContext
-} from "./chunk-VV5I53WR.js";
 import {
   currentDateLine,
   enrichImages,
   resolveModel,
   sanitizeSemanticColors
 } from "./chunk-YZHRLDQF.js";
+import {
+  buildThemePromptContext
+} from "./chunk-VV5I53WR.js";
 
 // src/refine.ts
 import { streamText } from "ai";
@@ -161,4 +161,4 @@ export {
   extractSectionDescription,
   refineLanding
 };
-//# sourceMappingURL=chunk-T4F6F3HD.js.map
+//# sourceMappingURL=chunk-RJQKHWIH.js.map

package/dist/{chunk-6LK7JW6Q.js → chunk-X5MEN76P.js}

@@ -16,12 +16,31 @@ import {
 import { generateObject, streamText } from "ai";
 import { z } from "zod";
 import { nanoid } from "nanoid";
-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.
+var PAGE_FORMAT_CONFIG = {
+  letter: {
+    container: "w-[8.5in] h-[11in]",
+    bodyText: "text-sm or text-base (10-11px)",
+    maxColumns: 2,
+    heightMode: "fixed at 11in",
+    description: 'letter-sized (8.5" \xD7 11") document pages'
+  },
+  web: {
+    container: "w-[1280px] min-h-[800px]",
+    bodyText: "text-base or text-lg (16-18px)",
+    maxColumns: 1,
+    heightMode: "flexible, no max height",
+    description: "web-optimized document sections"
+  }
+};
+function getDocumentSystemPrompt(format = "letter") {
+  const cfg = PAGE_FORMAT_CONFIG[format];
+  const isWeb = format === "web";
+  return `You are a professional document designer who creates stunning ${cfg.description} using HTML + Tailwind CSS.
 
 RULES:
-- Each page is a <section> element sized for letter paper
-- Page structure: <section class="w-[8.5in] h-[11in] relative overflow-hidden flex flex-col">
-- The section is EXACTLY 11in tall \u2014 content MUST fit, never exceed. Use flex flex-col so children can use flex-1.
+- Each page is a <section> element${isWeb ? " optimized for web viewing" : " sized for letter paper"}
+- Page structure: <section class="${cfg.container} relative overflow-hidden flex flex-col">
+- ${isWeb ? "Each section has flexible height \u2014 content determines the height. Use min-h-[800px] but allow natural growth." : "The section is EXACTLY 11in tall \u2014 content MUST fit, never exceed. Use flex flex-col so children can use flex-1."}
 - The section itself has NO padding \u2014 backgrounds, gradients, and decorative elements go edge-to-edge
 - Use slot layout: shrink-0 for header/footer bands, flex-1 overflow-hidden for main content area
 - For text content, use an inner wrapper: <div class="flex-1 overflow-hidden px-[0.75in] py-[0.5in]">...content...</div>
@@ -32,28 +51,28 @@ RULES:
 - 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
+- NOT responsive \u2014 fixed ${isWeb ? "width" : "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.
+3. **NO buttons or CTAs** \u2014 This is a ${isWeb ? "document" : "print document"}, not a ${isWeb ? "landing page" : "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.
 
 LAYOUT OVERFLOW PREVENTION \u2014 CRITICAL:
-- Max 2 columns side by side \u2014 each with w-1/2. NEVER use 3+ columns.
+- Max ${cfg.maxColumns} column${cfg.maxColumns === 1 ? "" : "s"} side by side${cfg.maxColumns === 2 ? " \u2014 each with w-1/2" : ""}. NEVER use ${cfg.maxColumns + 1}+ columns.
 - Decorative sidebars: max w-16 (4rem). NEVER use w-[2.5in] or wider sidebars \u2014 they steal too much space.
 - Stats/metric grids: max 3 items per row (grid-cols-3). Use gap-4 or gap-6.
 - Tables: max 4 columns, use text-xs or text-sm for cell text, px-3 py-2 cell padding.
 - Images: always w-full or max-w-[50%] \u2014 never fixed pixel widths.
-- Text: never use text-6xl or larger except for cover page title. Body text: text-sm or text-base.
+- Text: never use text-6xl or larger except for cover page title. Body text: ${cfg.bodyText}.
 - NEVER use absolute positioning that could overflow \u2014 prefer flex/grid layouts.
 - 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).
 - 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 \u2014 be extra careful.
-- NEVER place elements beyond the right edge \u2014 all content and decorations must fit within 8.5in width.
+- NEVER place elements beyond the right edge \u2014 all content and decorations must fit within ${isWeb ? "1280px" : "8.5in"} width.
 
 DESIGN \u2014 ADAPT to the document type. Read the prompt carefully and match the visual style:
 
@@ -125,7 +144,7 @@ TAILWIND v3 NOTES:
 - Borders: border + border-gray-200 for visible borders
 
 EXAMPLE \u2014 Cover page (simple, no wide sidebars):
-<section class="w-[8.5in] h-[11in] relative overflow-hidden flex flex-col bg-white">
+<section class="${cfg.container} relative overflow-hidden flex flex-col bg-white">
   <div class="absolute left-0 top-0 w-2 h-full bg-primary"></div>
   <div class="flex-1 overflow-hidden flex flex-col justify-center px-[1in]">
     <div class="text-sm font-normal text-primary mb-4">Marzo 2026 \xB7 Versi\xF3n 1.0</div>
@@ -136,9 +155,9 @@ EXAMPLE \u2014 Cover page (simple, no wide sidebars):
 </section>
 
 EXAMPLE \u2014 Marketing/brochure page (bold, visual):
-<section class="w-[8.5in] h-[11in] relative overflow-hidden flex flex-col bg-primary">
+<section class="${cfg.container} relative overflow-hidden flex flex-col bg-primary">
   <div class="flex flex-1 overflow-hidden">
-    <div class="w-1/2 flex flex-col justify-center px-[0.75in]">
+    <div class="${isWeb ? "flex-1" : "w-1/2"} flex flex-col justify-center px-[0.75in]">
       <span class="text-sm font-normal text-on-primary opacity-70 uppercase tracking-widest mb-3">Soluci\xF3n Premium</span>
       <h2 class="text-4xl font-bold text-on-primary leading-tight mb-6">Transforma tu negocio digital</h2>
       <p class="text-base font-normal text-on-primary opacity-80 mb-8">Herramientas inteligentes que simplifican la gesti\xF3n de tus activos digitales.</p>
@@ -147,14 +166,14 @@ EXAMPLE \u2014 Marketing/brochure page (bold, visual):
         <div><div class="text-3xl font-bold text-accent">2.4K</div><div class="text-xs text-on-primary opacity-70">Empresas</div></div>
       </div>
     </div>
-    <div class="w-1/2 relative">
+    <div class="${isWeb ? "flex-1" : "w-1/2"} relative">
       <img data-image-query="modern office team collaboration technology" alt="Team working" class="absolute inset-0 w-full h-full object-cover" />
     </div>
   </div>
 </section>
 
 EXAMPLE \u2014 Catalog/product grid page:
-<section class="w-[8.5in] h-[11in] relative overflow-hidden flex flex-col bg-surface">
+<section class="${cfg.container} relative overflow-hidden flex flex-col bg-surface">
   <div class="shrink-0 h-1 bg-primary w-full"></div>
   <div class="flex-1 overflow-hidden px-[0.75in] py-[0.5in]">
     <div class="flex justify-between items-baseline mb-6">
@@ -180,7 +199,7 @@ EXAMPLE \u2014 Catalog/product grid page:
 </section>
 
 EXAMPLE \u2014 Content page with table + progress bars:
-<section class="w-[8.5in] h-[11in] relative overflow-hidden flex flex-col bg-white">
+<section class="${cfg.container} relative overflow-hidden flex flex-col bg-white">
   <div class="shrink-0 h-1.5 bg-primary w-full"></div>
   <div class="flex-1 overflow-hidden px-[0.75in] py-[0.5in]">
     <h2 class="text-2xl font-bold text-gray-900 mb-1">M\xE9tricas de Rendimiento</h2>
@@ -190,7 +209,7 @@ EXAMPLE \u2014 Content page with table + progress bars:
       <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>
+        <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>
@@ -201,15 +220,22 @@ EXAMPLE \u2014 Content page with table + progress bars:
     </div>
   </div>
 </section>`;
-var DOCUMENT_PROMPT_SUFFIX = `
+}
+var DOCUMENT_SYSTEM_PROMPT = getDocumentSystemPrompt("letter");
+function getDocumentPromptSuffix(format = "letter") {
+  const cfg = PAGE_FORMAT_CONFIG[format];
+  const isWeb = format === "web";
+  return `
 
 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] h-[11in] relative overflow-hidden flex flex-col'>...</section>"}
+Each line: {"label": "Page Title", "html": "<section class='${cfg.container} relative overflow-hidden flex flex-col'>...</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.
+${isWeb ? "Each section should have comfortable spacing for web reading." : '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.
 IMPORTANT: Adapt your design style to match the type of document \u2014 not everything is a report. Brochures should feel bold and visual, catalogs should showcase products, invitations should feel elegant, etc.`;
+}
+var DOCUMENT_PROMPT_SUFFIX = getDocumentPromptSuffix("letter");
 async function generateDocument(options) {
   const {
     prompt,
@@ -325,6 +351,7 @@ async function generateDocumentParallel(options) {
     persistImage,
     pageCount,
     skipCover,
+    pageFormat = "letter",
     onOutline,
     onPageChunk,
     onPageComplete,
@@ -426,12 +453,12 @@ Small logo header: <img src="${logoUrl}" alt="Logo" class="h-8 object-contain" /
 ${directionInstruction}
 
 OUTPUT: A single JSON object on ONE line, no markdown fences:
-{"label": "${page.label}", "html": "<section class='w-[8.5in] h-[11in] relative overflow-hidden flex flex-col'>...</section>"}`
+{"label": "${page.label}", "html": "<section class='${PAGE_FORMAT_CONFIG[pageFormat].container} relative overflow-hidden flex flex-col'>...</section>"}`
       });
       try {
         const result = streamText({
           model: pageModel,
-          system: DOCUMENT_SYSTEM_PROMPT + currentDateLine(),
+          system: getDocumentSystemPrompt(pageFormat || "letter") + currentDateLine(),
           messages: [{ role: "user", content: userContent }]
         });
         let buffer = "";
@@ -521,9 +548,12 @@ OUTPUT: A single JSON object on ONE line, no markdown fences:
 }
 
 export {
+  PAGE_FORMAT_CONFIG,
+  getDocumentSystemPrompt,
   DOCUMENT_SYSTEM_PROMPT,
+  getDocumentPromptSuffix,
   DOCUMENT_PROMPT_SUFFIX,
   generateDocument,
   generateDocumentParallel
 };
-//# sourceMappingURL=chunk-6LK7JW6Q.js.map
+//# sourceMappingURL=chunk-X5MEN76P.js.map