veo-sdk 0.3.7 → 0.3.9

package/dist/index.cjs

@@ -439,11 +439,17 @@ function renderBlocks(container, blocks, doc, callbacks) {
     if (block?.type === "button") {
       const actions = doc.createElement("div");
       actions.className = "veo-guide-actions";
+      let rowAlign;
       while (i < blocks.length && blocks[i]?.type === "button") {
         const btnBlock = blocks[i];
+        if (!rowAlign) {
+          const a = btnBlock.style?.align;
+          if (a === "left" || a === "center" || a === "right") rowAlign = a;
+        }
         actions.appendChild(buildButtonBlock(btnBlock, doc, callbacks));
         i++;
       }
+      if (rowAlign) actions.style.justifyContent = BLOCK_ALIGN_SELF[rowAlign];
       container.appendChild(actions);
       continue;
     }
@@ -503,7 +509,7 @@ function applyBlockStyle(el, style, kind) {
   const align = typeof s.align === "string" ? s.align : null;
   if (align && (align === "left" || align === "center" || align === "right")) {
     if (kind === "text") el.style.textAlign = align;
-    else el.style.alignSelf = BLOCK_ALIGN_SELF[align];
+    else if (kind === "image") el.style.alignSelf = BLOCK_ALIGN_SELF[align];
   }
   if (kind !== "image" && typeof s.color === "string") el.style.color = s.color;
   if (kind === "text" && typeof s.fontSize === "number" && Number.isFinite(s.fontSize)) {
@@ -866,6 +872,12 @@ var init_styles = __esm({
   position: relative;
   display: flex; flex-direction: column;
 }
+/* Reserva espacio para la \u2715 (esquina sup. derecha) SOLO en el primer bloque:
+   as\xED el texto alineado a la derecha no queda tapado por el bot\xF3n de cerrar. */
+.veo-guide-content > .veo-guide-title:first-child,
+.veo-guide-content > .veo-guide-text:first-child {
+  padding-right: 20px;
+}
 .veo-guide-image {
   display: block;
   width: var(--veo-image-width, 100%);
@@ -1032,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 {
@@ -1219,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();
@@ -1270,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 "";
   }
@@ -1298,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) {
@@ -1338,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();
@@ -1367,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);
@@ -1761,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();
@@ -1785,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" });
       }
@@ -1974,6 +1962,8 @@ var init_tooltip_renderer = __esm({
         if (typeof selector !== "string" || selector.length === 0) return;
         const anchor = await waitForElement(selector);
         if (!anchor) return;
+        const rawSide = step.style?.tooltipPlacement;
+        const side = rawSide === "top" || rawSide === "left" || rawSide === "right" ? rawSide : "bottom";
         const { root } = this.createHost();
         this.applyDesign(step.style);
         const ownerDocument = root.ownerDocument ?? document;
@@ -2001,7 +1991,7 @@ var init_tooltip_renderer = __esm({
         root.appendChild(tooltip);
         const updatePosition = async () => {
           const { x, y, placement, middlewareData } = await dom.computePosition(anchor, tooltip, {
-            placement: "bottom",
+            placement: side,
             middleware: [dom.offset(10), dom.flip(), dom.shift({ padding: 8 }), dom.arrow({ element: arrowEl })]
           });
           tooltip.style.left = `${x}px`;
@@ -2043,6 +2033,8 @@ var init_walkthrough_renderer = __esm({
         if (typeof selector !== "string" || selector.length === 0) return false;
         const anchor = await waitForElement(selector, WALKTHROUGH_STEP_SELECTOR_TIMEOUT_MS);
         if (!anchor) return false;
+        const rawSide = step.style?.tooltipPlacement;
+        const side = rawSide === "top" || rawSide === "left" || rawSide === "right" ? rawSide : "bottom";
         const { root } = this.createHost();
         this.applyDesign(step.style);
         const ownerDocument = root.ownerDocument ?? document;
@@ -2062,7 +2054,7 @@ var init_walkthrough_renderer = __esm({
         root.appendChild(tooltip);
         const updatePosition = async () => {
           const { x, y, placement, middlewareData } = await dom.computePosition(anchor, tooltip, {
-            placement: "bottom",
+            placement: side,
             middleware: [dom.offset(10), dom.flip(), dom.shift({ padding: 8 }), dom.arrow({ element: arrowEl })]
           });
           tooltip.style.left = `${x}px`;