veo-sdk 0.3.7 → 0.3.9

package/dist/builder-AGU5EM3C.mjs

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

package/dist/{builder-7MBMYL26.mjs.map → builder-AGU5EM3C.mjs.map}

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

package/dist/builder.cjs

@@ -207,11 +207,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;
     }
@@ -276,7 +282,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)) {
@@ -614,6 +620,12 @@ var GUIDE_STYLES = `
   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%);
@@ -780,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 {
@@ -968,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();
@@ -1019,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 "";
   }
@@ -1047,9 +1060,13 @@ 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;
@@ -1082,20 +1099,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);
@@ -1497,20 +1500,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" });
   }
@@ -1648,6 +1637,8 @@ var TooltipRenderer = class extends BaseRenderer {
     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;
@@ -1675,7 +1666,7 @@ var TooltipRenderer = class extends BaseRenderer {
     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`;
@@ -1707,6 +1698,8 @@ var WalkthroughRenderer = class extends BaseRenderer {
     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;
@@ -1726,7 +1719,7 @@ var WalkthroughRenderer = class extends BaseRenderer {
     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`;