veo-sdk 0.3.8 → 0.3.10

package/dist/builder-TIN4M7IH.mjs

@@ -0,0 +1,5 @@
+export { createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker } from './chunk-FC5IA6CO.mjs';
+import './chunk-OENKQRLR.mjs';
+import './chunk-PTG3BTJE.mjs';
+//# sourceMappingURL=builder-TIN4M7IH.mjs.map
+//# sourceMappingURL=builder-TIN4M7IH.mjs.map

package/dist/{builder-YYMD7MNK.mjs.map → builder-TIN4M7IH.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-YYMD7MNK.mjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-TIN4M7IH.mjs"}

package/dist/builder.cjs

@@ -792,21 +792,6 @@ var GUIDE_STYLES = `
   background: transparent;
   color-scheme: normal;
 }
-/*
- * X de cerrar de las gu\xEDas custom: el HTML del cliente vive en un iframe
- * sandbox, as\xED que el bot\xF3n lo pone el host POR ENCIMA del iframe. Con fondo
- * propio para ser visible sobre cualquier contenido.
- */
-.veo-custom-close {
-  position: absolute; top: 6px; right: 6px; z-index: 1;
-  width: 22px; height: 22px; padding: 0;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 16px; line-height: 1; color: #6b7280;
-  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); cursor: pointer;
-}
-.veo-custom-close:hover { color: #111827; }
 
 @keyframes veo-fade-in { from { opacity: 0; } to { opacity: 1; } }
 @keyframes veo-slide-up {
@@ -980,7 +965,8 @@ function mountCustomFrame(doc, step, context, opts) {
   const token = uuidv7();
   const wantsTailwind = step.style?.tailwind === true;
   iframe.srcdoc = buildSrcdoc(step.html ?? "", step.css ?? "", step.js ?? "", token, {
-    tokens: collectHostTokens(),
+    hostCss: collectHostStyles(),
+    htmlAttrs: hostHtmlAttrs(),
     tailwind: wantsTailwind
   });
   const close = () => context.onClose();
@@ -1031,25 +1017,40 @@ function mountCustomFrame(doc, step, context, opts) {
 function toCssSize(value) {
   return typeof value === "number" ? `${value}px` : value;
 }
-function collectHostTokens() {
-  if (typeof window === "undefined" || typeof document === "undefined") return "";
+var MAX_HOST_CSS = 800 * 1024;
+function collectHostStyles() {
+  if (typeof document === "undefined") return "";
+  let out = "";
   try {
-    const rootStyle = getComputedStyle(document.documentElement);
-    const decls = [];
-    const seen = /* @__PURE__ */ new Set();
-    for (let i = 0; i < rootStyle.length && decls.length < 400; i++) {
-      const name = rootStyle.item(i);
-      if (!name.startsWith("--") || seen.has(name)) continue;
-      seen.add(name);
-      const value = rootStyle.getPropertyValue(name).trim();
-      if (!value || value.length > 200 || /[<>{}]/.test(value)) continue;
-      decls.push(`${name}:${value}`);
+    for (const sheet of Array.from(document.styleSheets)) {
+      let rules = null;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        continue;
+      }
+      if (!rules) continue;
+      for (const rule of Array.from(rules)) {
+        out += `${rule.cssText}
+`;
+        if (out.length > MAX_HOST_CSS) return out;
+      }
     }
-    const bodyFont = getComputedStyle(document.body).fontFamily;
-    if (bodyFont && bodyFont.length <= 200 && !/[<>{}]/.test(bodyFont)) {
-      decls.push(`--veo-host-font:${bodyFont}`);
+  } catch {
+    return out;
+  }
+  return out;
+}
+function hostHtmlAttrs() {
+  if (typeof document === "undefined") return "";
+  try {
+    const el = document.documentElement;
+    const attrs = [];
+    for (const name of ["class", "style", "data-theme", "data-mode", "data-color-mode"]) {
+      const v = el.getAttribute(name);
+      if (v && v.length <= 1e3 && !/["<>]/.test(v)) attrs.push(`${name}="${v}"`);
     }
-    return decls.length ? `:root{${decls.join(";")}}` : "";
+    return attrs.join(" ");
   } catch {
     return "";
   }
@@ -1059,9 +1060,20 @@ function isRecord(value) {
 }
 function buildSrcdoc(html, css, js, token, opts) {
   const bridge = `(function(){var T=${JSON.stringify(token)};function P(m){m.__veo=T;parent.postMessage(m,'*');}window.veo={dismiss:function(){P({type:'dismiss'});},cta:function(u){P({type:'cta',url:u});},track:function(n,p){P({type:'track',name:n,props:p||{}});},navigate:function(u){P({type:'navigate',url:u});}};document.addEventListener('click',function(e){var a=e.target&&e.target.closest?e.target.closest('a[href]'):null;if(!a)return;var h=a.getAttribute('href');if(!h||h.charAt(0)==='#'||/^(javascript|mailto|tel):/i.test(h))return;e.preventDefault();if(a.target==='_blank'){P({type:'cta',url:a.href,close:false});}else{P({type:'navigate',url:h});}},true);function H(){P({type:'resize',height:Math.ceil(document.documentElement.scrollHeight)});}window.addEventListener('load',H);try{if(typeof ResizeObserver!=='undefined'){new ResizeObserver(H).observe(document.documentElement);}}catch(e){}})();`;
-  const tokensStyle = opts.tokens ? `<style>${escapeClosing(opts.tokens, "style")}</style>` : "";
+  const hostStyle = opts.hostCss ? `<style>${escapeClosing(opts.hostCss, "style")}</style>` : "";
   const tailwind = opts.tailwind ? '<script src="https://cdn.tailwindcss.com"></script>' : "";
-  return '<!DOCTYPE html><html><head><meta charset="utf-8"><style>html,body{margin:0;padding:0;background:transparent;font-family:var(--veo-host-font,system-ui,sans-serif);}</style>' + tokensStyle + tailwind + `<style>${escapeClosing(css, "style")}</style></head><body>${html}<script>${bridge}</script>` + (js ? `<script>${escapeClosing(js, "script")}</script>` : "") + "</body></html>";
+  return (
+    // Orden: base → CSS del host (utilidades+clases propias+:root) → reset
+    // flotante (fondo transparente, sin márgenes) → Tailwind → CSS del autor (gana).
+    `<!DOCTYPE html><html ${opts.htmlAttrs}><head><meta charset="utf-8"><style>html,body{margin:0;padding:0;}body{font-family:system-ui,-apple-system,sans-serif;}</style>` + hostStyle + // Reset flotante: el CSS de la app trae reglas de PÁGINA (body{min-height:100vh},
+    // html{height:100%}, fondo del layout…) que en un iframe embebido lo estirarían a
+    // toda la pantalla (caja negra) en vez de ajustarse al contenido. Neutralizamos
+    // tamaño/fondo/overflow (mantenemos color y fuente heredados de la app).
+    "<style>html,body{margin:0!important;padding:0!important;background:transparent!important;height:auto!important;min-height:0!important;max-height:none!important;width:auto!important;min-width:0!important;overflow:visible!important;}</style>" + tailwind + // Inline en <body>: gana incluso sobre reglas `!important` de la app (p. ej.
+    // `.dark body{background:#000!important}`) porque el estilo inline tiene la
+    // mayor especificidad dentro de la capa important-author.
+    `<style>${escapeClosing(css, "style")}</style></head><body style="margin:0!important;background:transparent!important;min-height:0!important;height:auto!important;">` + html + `<script>${bridge}</script>` + (js ? `<script>${escapeClosing(js, "script")}</script>` : "") + "</body></html>"
+  );
 }
 function escapeClosing(code, tag) {
   const rx = tag === "script" ? /<\/script/gi : /<\/style/gi;
@@ -1094,20 +1106,6 @@ var CustomRenderer = class extends BaseRenderer {
     });
     this.registerCleanup(cleanup);
     wrapper.appendChild(iframe);
-    wrapper.appendChild(
-      createCloseButton(
-        doc,
-        () => {
-          context.onInteraction({
-            guideId: context.guide.guideId,
-            stepIndex: 0,
-            action: "dismissed"
-          });
-          context.onClose();
-        },
-        "veo-custom-close"
-      )
-    );
     root.appendChild(wrapper);
     if (placement.mode === "floating") {
       applyFloatingPosition(wrapper, placement);
@@ -1509,20 +1507,6 @@ var InlineCustomRenderer = class extends BaseRenderer {
     const { iframe, cleanup } = mountCustomFrame(doc, step, context, { width: "100%" });
     this.registerCleanup(cleanup);
     wrapper.appendChild(iframe);
-    wrapper.appendChild(
-      createCloseButton(
-        doc,
-        () => {
-          context.onInteraction({
-            guideId: context.guide.guideId,
-            stepIndex: 0,
-            action: "dismissed"
-          });
-          context.onClose();
-        },
-        "veo-custom-close"
-      )
-    );
     root.appendChild(wrapper);
     context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
   }