@easybits.cloud/html-tailwind-generator 0.2.126 → 0.2.128

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/components.d.ts

@@ -1,4 +1,4 @@
-export { C as Canvas, a as CanvasHandle, b as CodeEditor, F as FloatingToolbar, S as SectionList, V as Viewport, c as ViewportToggle } from './ViewportToggle-DefLZWrz.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';
 import 'react';
 import './types-BIpbpCJr.js';
 import 'react/jsx-runtime';

package/dist/components4.d.ts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Editor } from 'grapesjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AiAction {
+    type: "refine-element";
+    componentId: string;
+    html: string;
+    sectionHtml?: string;
+    sectionComponentId?: string;
+    isSection?: boolean;
+}
+interface GrapesEditorHandle {
+    getEditor: () => Editor | null;
+    getHtml: () => string;
+    setHtml: (html: string) => void;
+    /** Replace a component's HTML by its GrapesJS ID */
+    replaceComponent: (componentId: string, newHtml: string) => void;
+    /** Toggle preview mode, returns new state */
+    togglePreview: () => boolean;
+    /** Toggle sw-visibility (component border guides), returns new state */
+    toggleSwVisibility: () => boolean;
+    /** Scroll the canvas iframe to a section by data-section-id */
+    scrollToSection: (sectionId: string) => void;
+    /** Set canvas zoom level (percentage, e.g. 50 = 50%) */
+    setZoom: (value: number) => void;
+    /** Get current canvas zoom level */
+    getZoom: () => number;
+}
+interface BrandKitItem {
+    id: string;
+    name: string;
+    colors: Record<string, string>;
+    fonts?: {
+        heading?: string;
+        body?: string;
+    } | null;
+    mood?: string | null;
+    logoUrl?: string | null;
+    isDefault?: boolean;
+}
+interface Props$1 {
+    initialHtml: string;
+    theme?: string;
+    customColors?: Record<string, string>;
+    brandKits?: BrandKitItem[];
+    onChange?: (html: string) => void;
+    onAiAction?: (action: AiAction) => void;
+    onThemeChange?: (themeId: string, customColors?: Record<string, string>, brandKitId?: string) => void;
+    onBrandKitChange?: (brandKit: BrandKitItem | null) => void;
+    /** Persisted brand kit ID — restored from metadata on load */
+    initialBrandKitId?: string;
+    /** Hide specific panel tabs (e.g. ["blocks"] for documents) */
+    hiddenTabs?: PanelId[];
+    /** Extra CSS injected into the canvas iframe (e.g. document page sizing) */
+    canvasStyles?: string;
+    /** Set to false to hide device switcher (always single viewport) */
+    devices?: false;
+    /** Which side to render the panel sidebar — default "left" */
+    panelSide?: "left" | "right";
+    /** Override default blocks (LANDING_BLOCKS). Pass custom blocks for different editors (e.g. presentations). */
+    blocks?: {
+        id: string;
+        label: string;
+        category: string;
+        content: string | object;
+        media?: string;
+    }[];
+    /** Called when the most visible section changes due to canvas scroll */
+    onVisibleSectionChange?: (sectionId: string) => void;
+}
+declare const PANEL_TABS: readonly [{
+    readonly id: "blocks";
+    readonly label: "Bloques";
+    readonly icon: "⊞";
+}, {
+    readonly id: "layers";
+    readonly label: "Capas";
+    readonly icon: "☰";
+}, {
+    readonly id: "styles";
+    readonly label: "Estilos";
+    readonly icon: "◑";
+}, {
+    readonly id: "themes";
+    readonly label: "Temas";
+    readonly icon: "◈";
+}];
+type PanelId = (typeof PANEL_TABS)[number]["id"];
+declare const GrapesEditor: React.ForwardRefExoticComponent<Props$1 & React.RefAttributes<GrapesEditorHandle>>;
+
+/**
+ * Predefined blocks for GrapesJS editor.
+ * All section blocks use semantic colors (bg-primary, text-on-surface, etc.)
+ */
+declare const LANDING_BLOCKS: ({
+    id: string;
+    label: string;
+    category: string;
+    content: string;
+    media: string;
+} | {
+    id: string;
+    label: string;
+    category: string;
+    content: {
+        type: string;
+    };
+    media: string;
+})[];
+
+interface Props {
+    editor: Editor | null;
+    /** Bumped when theme/customColors change — forces color preview re-resolve */
+    themeVersion?: number;
+    /** Resolved theme colors keyed by semantic name (e.g. "primary" → "#6366f1") */
+    themeColors?: Record<string, string>;
+}
+declare function TailwindClassEditor({ editor, themeVersion, themeColors }: Props): react_jsx_runtime.JSX.Element;
+
+export { type AiAction, GrapesEditor, type GrapesEditorHandle, LANDING_BLOCKS, type PanelId, TailwindClassEditor };