veo-sdk 0.3.8 → 0.3.9

package/dist/index.cjs

@@ -1044,21 +1044,6 @@ var init_styles = __esm({
   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 {
@@ -1231,7 +1216,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();
@@ -1282,25 +1268,39 @@ 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 "";
+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 "";
   }
@@ -1310,18 +1310,24 @@ 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 + "<style>html,body{margin:0!important;padding:0!important;background:transparent!important;}</style>" + tailwind + `<style>${escapeClosing(css, "style")}</style></head><body>${html}<script>${bridge}</script>` + (js ? `<script>${escapeClosing(js, "script")}</script>` : "") + "</body></html>"
+  );
 }
 function escapeClosing(code, tag) {
   const rx = tag === "script" ? /<\/script/gi : /<\/style/gi;
   return code.replace(rx, `<\\/${tag}`);
 }
+var MAX_HOST_CSS;
 var init_custom_frame = __esm({
   "src/plugins/guides/renderers/custom-frame.ts"() {
     init_uuid();
     init_block_builder();
+    MAX_HOST_CSS = 800 * 1024;
   }
 });
 function applyFloatingPosition(wrapper, placement) {
@@ -1350,7 +1356,6 @@ function applyFloatingPosition(wrapper, placement) {
 var DEFAULT_PLACEMENT, DEFAULT_OFFSET, DEFAULT_WIDTH, CustomRenderer;
 var init_custom_renderer = __esm({
   "src/plugins/guides/renderers/custom-renderer.ts"() {
-    init_block_builder();
     init_wait_for_element();
     init_base_renderer();
     init_custom_frame();
@@ -1379,20 +1384,6 @@ var init_custom_renderer = __esm({
         });
         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);
@@ -1773,7 +1764,6 @@ var init_inline_host = __esm({
 var InlineCustomRenderer;
 var init_inline_custom_renderer = __esm({
   "src/plugins/guides/renderers/inline-custom-renderer.ts"() {
-    init_block_builder();
     init_inline_host();
     init_wait_for_element();
     init_base_renderer();
@@ -1797,20 +1787,6 @@ var init_inline_custom_renderer = __esm({
         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" });
       }