veo-sdk 0.3.5 → 0.3.7

package/dist/builder.cjs

@@ -19,6 +19,8 @@ var BUILDER_GUIDE_PARAM = "veoGuide";
 
 // src/core/builder-token.ts
 var CTX_KEY = "veo:builder_ctx";
+var LS_PREFIX = "veo:builder_ctx:";
+var PERSIST_TTL_MS = 12 * 60 * 60 * 1e3;
 function session() {
   try {
     return window.sessionStorage;
@@ -26,6 +28,59 @@ function session() {
     return null;
   }
 }
+function local() {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function lsKey(guide) {
+  return LS_PREFIX + (guide || "default");
+}
+function persist(ctx) {
+  try {
+    session()?.setItem(CTX_KEY, JSON.stringify(ctx));
+  } catch {
+  }
+  try {
+    const stored = { ...ctx, savedAt: Date.now() };
+    local()?.setItem(lsKey(ctx.guide), JSON.stringify(stored));
+  } catch {
+  }
+}
+function readFreshFromLocal() {
+  const store = local();
+  if (!store) return null;
+  let best = null;
+  try {
+    for (let i = 0; i < store.length; i++) {
+      const key = store.key(i);
+      if (!key?.startsWith(LS_PREFIX)) continue;
+      const raw = store.getItem(key);
+      if (!raw) continue;
+      let parsed = null;
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        continue;
+      }
+      if (typeof parsed?.savedAt !== "number" || Date.now() - parsed.savedAt > PERSIST_TTL_MS) {
+        try {
+          store.removeItem(key);
+        } catch {
+        }
+        continue;
+      }
+      if (!best || parsed.savedAt > best.savedAt) best = parsed;
+    }
+  } catch {
+    return null;
+  }
+  if (!best) return null;
+  const { savedAt: _savedAt, ...ctx } = best;
+  return ctx;
+}
 function urlParams() {
   try {
     return new URLSearchParams(window.location.search);
@@ -45,25 +100,39 @@ function resolveBuilderContext() {
       guide: params?.get(BUILDER_GUIDE_PARAM) ?? null,
       panelPath: params?.get(BUILDER_PANEL_PATH_PARAM) ?? null
     };
-    try {
-      session()?.setItem(CTX_KEY, JSON.stringify(ctx));
-    } catch {
-    }
+    persist(ctx);
     return ctx;
   }
   try {
     const raw = session()?.getItem(CTX_KEY);
-    return raw ? JSON.parse(raw) : null;
+    if (raw) return JSON.parse(raw);
   } catch {
-    return null;
   }
+  const fromLocal = readFreshFromLocal();
+  if (fromLocal) {
+    try {
+      session()?.setItem(CTX_KEY, JSON.stringify(fromLocal));
+    } catch {
+    }
+  }
+  return fromLocal;
 }
 function clearBuilderToken() {
   if (!hasWindow()) return;
+  let guide = null;
+  try {
+    const raw = session()?.getItem(CTX_KEY);
+    if (raw) guide = JSON.parse(raw).guide ?? null;
+  } catch {
+  }
   try {
     session()?.removeItem(CTX_KEY);
   } catch {
   }
+  try {
+    local()?.removeItem(lsKey(guide));
+  } catch {
+  }
 }
 
 // src/plugins/guides/constants.ts
@@ -77,6 +146,16 @@ var WALKTHROUGH_STEP_SELECTOR_TIMEOUT_MS = 5e3;
 function buildStepContent(step, doc, callbacks) {
   const container = doc.createElement("div");
   container.className = "veo-guide-content";
+  const blocks = normalizeBlocks(step);
+  if (blocks) {
+    renderBlocks(container, blocks, doc, callbacks);
+  } else {
+    renderLegacyStep(container, step, doc, callbacks);
+  }
+  container.appendChild(createCloseButton(doc, () => callbacks.onDismiss()));
+  return container;
+}
+function renderLegacyStep(container, step, doc, callbacks) {
   if (typeof step.imageUrl === "string" && step.imageUrl && isSafeUrl(step.imageUrl)) {
     const img = doc.createElement("img");
     img.className = "veo-guide-image";
@@ -111,14 +190,119 @@ function buildStepContent(step, doc, callbacks) {
     actions.appendChild(cta);
   }
   container.appendChild(actions);
+}
+function normalizeBlocks(step) {
+  if (!Array.isArray(step.blocks) || step.blocks.length === 0) return null;
+  const valid = step.blocks.filter((b) => {
+    if (!b || typeof b !== "object") return false;
+    if (b.type === "image") return typeof b.url === "string" && isSafeUrl(b.url);
+    return b.type === "title" || b.type === "text" || b.type === "button";
+  });
+  return valid.length > 0 ? valid : null;
+}
+function renderBlocks(container, blocks, doc, callbacks) {
+  let i = 0;
+  while (i < blocks.length) {
+    const block = blocks[i];
+    if (block?.type === "button") {
+      const actions = doc.createElement("div");
+      actions.className = "veo-guide-actions";
+      while (i < blocks.length && blocks[i]?.type === "button") {
+        const btnBlock = blocks[i];
+        actions.appendChild(buildButtonBlock(btnBlock, doc, callbacks));
+        i++;
+      }
+      container.appendChild(actions);
+      continue;
+    }
+    const node = buildContentBlock(block, doc);
+    if (node) container.appendChild(node);
+    i++;
+  }
+}
+function buildContentBlock(block, doc) {
+  switch (block.type) {
+    case "title": {
+      const el = doc.createElement("h2");
+      el.className = "veo-guide-title";
+      el.textContent = typeof block.text === "string" ? block.text : "";
+      applyBlockStyle(el, block.style, "text");
+      return el;
+    }
+    case "text": {
+      const el = doc.createElement("p");
+      el.className = "veo-guide-text";
+      el.textContent = typeof block.text === "string" ? block.text : "";
+      applyBlockStyle(el, block.style, "text");
+      return el;
+    }
+    case "image": {
+      if (typeof block.url !== "string" || !isSafeUrl(block.url)) return null;
+      const el = doc.createElement("img");
+      el.className = "veo-guide-image";
+      el.src = block.url;
+      el.alt = "";
+      applyBlockStyle(el, block.style, "image");
+      return el;
+    }
+    default:
+      return null;
+  }
+}
+function buildButtonBlock(block, doc, callbacks) {
+  const btn = doc.createElement("button");
+  btn.type = "button";
+  btn.className = "veo-guide-cta";
+  btn.textContent = typeof block.text === "string" && block.text ? block.text : "OK";
+  applyBlockStyle(btn, block.style, "button");
+  btn.addEventListener("click", () => {
+    const action = block.action ?? "dismiss";
+    const url = action === "url" && typeof block.url === "string" && isSafeUrl(block.url) ? block.url : void 0;
+    callbacks.onCtaClick(action, url);
+  });
+  return btn;
+}
+var BLOCK_ALIGN_SELF = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+function clampNum(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+function applyBlockStyle(el, style, kind) {
+  if (!style || typeof style !== "object") return;
+  const s = style;
+  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];
+  }
+  if (kind !== "image" && typeof s.color === "string") el.style.color = s.color;
+  if (kind === "text" && typeof s.fontSize === "number" && Number.isFinite(s.fontSize)) {
+    el.style.fontSize = `${clampNum(s.fontSize, 8, 72)}px`;
+  }
+  if (kind === "image" && typeof s.width === "number" && Number.isFinite(s.width)) {
+    el.style.width = `${clampNum(s.width, 10, 100)}%`;
+  }
+  if (kind === "image" && typeof s.radius === "number" && Number.isFinite(s.radius)) {
+    el.style.borderRadius = `${clampNum(s.radius, 0, 48)}px`;
+  }
+  if (typeof s.marginTop === "number" && Number.isFinite(s.marginTop)) {
+    el.style.marginTop = `${clampNum(s.marginTop, 0, 64)}px`;
+  }
+  if (typeof s.marginBottom === "number" && Number.isFinite(s.marginBottom)) {
+    el.style.marginBottom = `${clampNum(s.marginBottom, 0, 64)}px`;
+  }
+}
+function createCloseButton(doc, onClose, className = "veo-guide-close") {
   const closeBtn = doc.createElement("button");
   closeBtn.type = "button";
-  closeBtn.className = "veo-guide-close";
+  closeBtn.className = className;
   closeBtn.setAttribute("aria-label", "Cerrar");
   closeBtn.textContent = "\xD7";
-  closeBtn.addEventListener("click", () => callbacks.onDismiss());
-  container.appendChild(closeBtn);
-  return container;
+  closeBtn.addEventListener("click", onClose);
+  return closeBtn;
 }
 function isSafeUrl(url) {
   if (typeof url !== "string" || url.length === 0) return false;
@@ -136,6 +320,78 @@ function readCtaUrl(step) {
   return isSafeUrl(candidate) ? candidate : void 0;
 }
 
+// src/plugins/guides/walkthrough-block-builder.ts
+function buildWalkthroughStepContent(step, stepIndex, totalSteps, doc, callbacks) {
+  const container = doc.createElement("div");
+  container.className = "veo-guide-content";
+  const counter = doc.createElement("div");
+  counter.className = "veo-walkthrough-counter";
+  counter.textContent = `Paso ${stepIndex + 1} de ${totalSteps}`;
+  container.appendChild(counter);
+  const progress = doc.createElement("div");
+  progress.className = "veo-walkthrough-progress";
+  for (let i = 0; i < totalSteps; i++) {
+    const dot = doc.createElement("span");
+    dot.className = "veo-walkthrough-progress-dot";
+    if (i < stepIndex) dot.classList.add("completed");
+    if (i === stepIndex) dot.classList.add("active");
+    progress.appendChild(dot);
+  }
+  container.appendChild(progress);
+  if (typeof step.imageUrl === "string" && step.imageUrl && isSafeUrl(step.imageUrl)) {
+    const img = doc.createElement("img");
+    img.className = "veo-guide-image";
+    img.src = step.imageUrl;
+    img.alt = typeof step.title === "string" ? step.title : "";
+    container.appendChild(img);
+  }
+  if (typeof step.title === "string" && step.title) {
+    const heading = doc.createElement("h2");
+    heading.className = "veo-guide-title";
+    heading.textContent = step.title;
+    container.appendChild(heading);
+  }
+  if (typeof step.content === "string" && step.content) {
+    const paragraph = doc.createElement("p");
+    paragraph.className = "veo-guide-text";
+    paragraph.textContent = step.content;
+    container.appendChild(paragraph);
+  }
+  const actions = doc.createElement("div");
+  actions.className = "veo-walkthrough-actions";
+  const skipBtn = doc.createElement("button");
+  skipBtn.type = "button";
+  skipBtn.className = "veo-walkthrough-skip";
+  skipBtn.textContent = "Omitir";
+  skipBtn.addEventListener("click", () => callbacks.onSkip());
+  actions.appendChild(skipBtn);
+  const rightGroup = doc.createElement("div");
+  rightGroup.className = "veo-walkthrough-actions-right";
+  if (stepIndex > 0) {
+    const backBtn = doc.createElement("button");
+    backBtn.type = "button";
+    backBtn.className = "veo-walkthrough-btn-secondary";
+    backBtn.textContent = "Atr\xE1s";
+    backBtn.addEventListener("click", () => callbacks.onBack());
+    rightGroup.appendChild(backBtn);
+  }
+  const isLastStep = stepIndex === totalSteps - 1;
+  const primaryBtn = doc.createElement("button");
+  primaryBtn.type = "button";
+  primaryBtn.className = "veo-guide-cta";
+  const defaultLabel = isLastStep ? "Finalizar" : "Siguiente";
+  primaryBtn.textContent = typeof step.ctaText === "string" && step.ctaText ? step.ctaText : defaultLabel;
+  primaryBtn.addEventListener("click", () => {
+    if (isLastStep) callbacks.onComplete();
+    else callbacks.onNext();
+  });
+  rightGroup.appendChild(primaryBtn);
+  actions.appendChild(rightGroup);
+  container.appendChild(actions);
+  container.appendChild(createCloseButton(doc, () => callbacks.onSkip()));
+  return container;
+}
+
 // src/plugins/guides/guide-design.ts
 var DARK_THEME = {
   "--veo-bg": "#1f2937",
@@ -148,6 +404,16 @@ var ALIGN_JUSTIFY = {
   center: "center",
   right: "flex-end"
 };
+var ALIGN_SELF = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var ELEMENT_ALIGN_MODE = {
+  title: "text",
+  text: "text",
+  image: "self"
+};
 var SHADOW = {
   none: "none",
   soft: "0 4px 14px rgba(0, 0, 0, 0.10)",
@@ -175,6 +441,9 @@ function applyDesignVars(host, style) {
   if (typeof s.accentColor === "string" && COLOR_RE.test(s.accentColor.trim())) {
     host.style.setProperty("--veo-primary", s.accentColor.trim());
   }
+  if (typeof s.fontFamily === "string" && s.fontFamily.length <= 200 && !/[<>{}]/.test(s.fontFamily)) {
+    host.style.setProperty("--veo-font", s.fontFamily.trim());
+  }
   if (s.theme === "dark") {
     for (const [key, value] of Object.entries(DARK_THEME)) {
       host.style.setProperty(key, value);
@@ -216,6 +485,43 @@ function applyDesignVars(host, style) {
     host.style.setProperty("--veo-pos-x", `${px * 100}%`);
     host.style.setProperty("--veo-pos-y", `${py * 100}%`);
   }
+  if (s.elements && typeof s.elements === "object") {
+    const el = s.elements;
+    applyElementVars(host, "title", el.title);
+    applyElementVars(host, "text", el.text);
+    applyElementVars(host, "image", el.image);
+    const cta = el.cta;
+    if (cta && typeof cta.align === "string" && ALIGN_JUSTIFY[cta.align]) {
+      host.style.setProperty("--veo-actions-justify", ALIGN_JUSTIFY[cta.align]);
+    }
+  }
+}
+function applyElementVars(host, prefix, raw) {
+  if (!raw || typeof raw !== "object") return;
+  const el = raw;
+  if (typeof el.align === "string" && (el.align === "left" || el.align === "center" || el.align === "right")) {
+    const mode = ELEMENT_ALIGN_MODE[prefix] ?? "text";
+    const value = mode === "self" ? ALIGN_SELF[el.align] : el.align;
+    host.style.setProperty(`--veo-${prefix}-align`, value);
+  }
+  if (typeof el.color === "string" && COLOR_RE.test(el.color.trim())) {
+    host.style.setProperty(`--veo-${prefix}-color`, el.color.trim());
+  }
+  if (typeof el.fontSize === "number" && Number.isFinite(el.fontSize)) {
+    host.style.setProperty(`--veo-${prefix}-size`, `${clamp(el.fontSize, 8, 72)}px`);
+  }
+  if (typeof el.width === "number" && Number.isFinite(el.width)) {
+    host.style.setProperty(`--veo-${prefix}-width`, `${clamp(el.width, 10, 100)}%`);
+  }
+  if (typeof el.radius === "number" && Number.isFinite(el.radius)) {
+    host.style.setProperty(`--veo-${prefix}-radius`, `${clamp(el.radius, 0, 48)}px`);
+  }
+  if (typeof el.marginTop === "number" && Number.isFinite(el.marginTop)) {
+    host.style.setProperty(`--veo-${prefix}-mt`, `${clamp(el.marginTop, 0, 64)}px`);
+  }
+  if (typeof el.marginBottom === "number" && Number.isFinite(el.marginBottom)) {
+    host.style.setProperty(`--veo-${prefix}-mb`, `${clamp(el.marginBottom, 0, 64)}px`);
+  }
 }
 
 // src/plugins/guides/styles.ts
@@ -231,7 +537,7 @@ var GUIDE_STYLES = `
   --veo-actions-justify: flex-end;
   all: initial;
 }
-* { box-sizing: border-box; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
+* { box-sizing: border-box; font-family: var(--veo-font, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif); }
 
 .veo-modal-overlay {
   position: fixed; inset: 0;
@@ -282,6 +588,15 @@ var GUIDE_STYLES = `
   box-shadow: var(--veo-shadow, 0 8px 30px rgba(0, 0, 0, 0.18));
   animation: veo-fade-in 150ms ease-out;
 }
+.veo-tooltip-arrow {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: var(--veo-bg);
+  border: var(--veo-border-width, 0) solid var(--veo-border-color, transparent);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
 
 .veo-inline {
   background: var(--veo-bg);
@@ -300,17 +615,25 @@ var GUIDE_STYLES = `
   display: flex; flex-direction: column;
 }
 .veo-guide-image {
-  display: block; width: 100%; max-height: 180px;
-  object-fit: cover; border-radius: 8px;
-  margin-bottom: 12px;
+  display: block;
+  width: var(--veo-image-width, 100%);
+  max-height: 180px;
+  object-fit: cover;
+  align-self: var(--veo-image-align, stretch);
+  border-radius: var(--veo-image-radius, 8px);
+  margin: var(--veo-image-mt, 0) 0 var(--veo-image-mb, 12px);
 }
 .veo-guide-title {
-  font-size: 18px; font-weight: 600; line-height: 1.3;
-  margin: 0 0 6px; color: var(--veo-text);
+  font-size: var(--veo-title-size, 18px); font-weight: 600; line-height: 1.3;
+  text-align: var(--veo-title-align, left);
+  margin: var(--veo-title-mt, 0) 0 var(--veo-title-mb, 6px);
+  color: var(--veo-title-color, var(--veo-text));
 }
 .veo-guide-text {
-  font-size: 14px; line-height: 1.5;
-  margin: 0 0 16px; color: var(--veo-text-secondary);
+  font-size: var(--veo-text-size, 14px); line-height: 1.5;
+  text-align: var(--veo-text-align, left);
+  margin: var(--veo-text-mt, 0) 0 var(--veo-text-mb, 16px);
+  color: var(--veo-text-color, var(--veo-text-secondary));
 }
 .veo-guide-actions {
   display: flex; gap: 8px; justify-content: var(--veo-actions-justify);
@@ -447,6 +770,7 @@ var GUIDE_STYLES = `
 }
 .veo-custom-inline {
   display: block;
+  position: relative;
   margin: 12px 0;
 }
 .veo-custom-frame {
@@ -456,6 +780,21 @@ 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 {
@@ -529,7 +868,8 @@ var BaseRenderer = class {
 // src/plugins/guides/renderers/banner-renderer.ts
 var BannerRenderer = class extends BaseRenderer {
   render(context) {
-    const step = context.guide.guideSteps[0];
+    const idx = context.nav?.stepIndex ?? 0;
+    const step = context.guide.guideSteps[idx];
     if (!step) return;
     const { root } = this.createHost();
     this.applyDesign(step.style);
@@ -538,27 +878,25 @@ var BannerRenderer = class extends BaseRenderer {
     const banner = ownerDocument.createElement("div");
     banner.className = `veo-banner veo-banner-${position}`;
     const dismiss = (action, ctaUrl) => {
-      context.onInteraction({
-        guideId: context.guide.guideId,
-        stepIndex: 0,
-        action
-      });
+      context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action });
       if (ctaUrl) window.open(ctaUrl, "_blank", "noopener,noreferrer");
       context.onClose();
     };
-    const content = buildStepContent(step, ownerDocument, {
-      onCtaClick: (action, url) => {
-        dismiss("cta_clicked", action === "url" ? url : void 0);
-      },
+    const content = context.nav ? buildWalkthroughStepContent(
+      step,
+      context.nav.stepIndex,
+      context.nav.totalSteps,
+      ownerDocument,
+      context.nav.callbacks
+    ) : buildStepContent(step, ownerDocument, {
+      onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
       onDismiss: () => dismiss("dismissed")
     });
     banner.appendChild(content);
     root.appendChild(banner);
-    context.onInteraction({
-      guideId: context.guide.guideId,
-      stepIndex: 0,
-      action: "shown"
-    });
+    if (!context.nav) {
+      context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
+    }
   }
 };
 
@@ -628,7 +966,11 @@ function mountCustomFrame(doc, step, context, opts) {
   const hasFixedHeight = opts.fixedHeight !== void 0 && opts.fixedHeight !== null;
   if (hasFixedHeight) iframe.style.height = toCssSize(opts.fixedHeight);
   const token = uuidv7();
-  iframe.srcdoc = buildSrcdoc(step.html ?? "", step.css ?? "", step.js ?? "", token);
+  const wantsTailwind = step.style?.tailwind === true;
+  iframe.srcdoc = buildSrcdoc(step.html ?? "", step.css ?? "", step.js ?? "", token, {
+    tokens: collectHostTokens(),
+    tailwind: wantsTailwind
+  });
   const close = () => context.onClose();
   const onMessage = (event) => {
     if (event.source !== iframe.contentWindow) return;
@@ -677,12 +1019,37 @@ 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 "";
+  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}`);
+    }
+    const bodyFont = getComputedStyle(document.body).fontFamily;
+    if (bodyFont && bodyFont.length <= 200 && !/[<>{}]/.test(bodyFont)) {
+      decls.push(`--veo-host-font:${bodyFont}`);
+    }
+    return decls.length ? `:root{${decls.join(";")}}` : "";
+  } catch {
+    return "";
+  }
+}
 function isRecord(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-function buildSrcdoc(html, css, js, token) {
+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){}})();`;
-  return `<!DOCTYPE html><html><head><meta charset="utf-8"><style>html,body{margin:0;padding:0;background:transparent;}</style><style>${escapeClosing(css, "style")}</style></head><body>${html}<script>${bridge}</script>` + (js ? `<script>${escapeClosing(js, "script")}</script>` : "") + "</body></html>";
+  const tokensStyle = opts.tokens ? `<style>${escapeClosing(opts.tokens, "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>";
 }
 function escapeClosing(code, tag) {
   const rx = tag === "script" ? /<\/script/gi : /<\/style/gi;
@@ -715,6 +1082,20 @@ 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);
@@ -852,13 +1233,7 @@ function mountFormContent(card, context, doc) {
     });
   });
   content.appendChild(form);
-  const closeBtn = doc.createElement("button");
-  closeBtn.type = "button";
-  closeBtn.className = "veo-guide-close";
-  closeBtn.setAttribute("aria-label", "Cerrar");
-  closeBtn.textContent = "\xD7";
-  closeBtn.addEventListener("click", dismiss);
-  content.appendChild(closeBtn);
+  content.appendChild(createCloseButton(doc, dismiss));
   card.appendChild(content);
 }
 function showThanks(card, doc, note) {
@@ -1122,6 +1497,20 @@ 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" });
   }
@@ -1187,7 +1576,8 @@ var InlineRenderer = class extends BaseRenderer {
 // src/plugins/guides/renderers/modal-renderer.ts
 var ModalRenderer = class extends BaseRenderer {
   render(context) {
-    const step = context.guide.guideSteps[0];
+    const idx = context.nav?.stepIndex ?? 0;
+    const step = context.guide.guideSteps[idx];
     if (!step) return;
     const { root } = this.createHost();
     this.applyDesign(step.style);
@@ -1197,38 +1587,59 @@ var ModalRenderer = class extends BaseRenderer {
     const card = ownerDocument.createElement("div");
     card.className = "veo-modal-card";
     const dismiss = (action, ctaUrl) => {
-      context.onInteraction({
-        guideId: context.guide.guideId,
-        stepIndex: 0,
-        action
-      });
+      context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action });
       if (ctaUrl) window.open(ctaUrl, "_blank", "noopener,noreferrer");
       context.onClose();
     };
-    const content = buildStepContent(step, ownerDocument, {
-      onCtaClick: (action, url) => {
-        dismiss("cta_clicked", action === "url" ? url : void 0);
-      },
+    const onBackdropOrEsc = () => {
+      if (context.nav) context.nav.callbacks.onSkip();
+      else dismiss("dismissed");
+    };
+    const content = context.nav ? buildWalkthroughStepContent(
+      step,
+      context.nav.stepIndex,
+      context.nav.totalSteps,
+      ownerDocument,
+      context.nav.callbacks
+    ) : buildStepContent(step, ownerDocument, {
+      onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
       onDismiss: () => dismiss("dismissed")
     });
     card.appendChild(content);
     overlay.appendChild(card);
     root.appendChild(overlay);
     overlay.addEventListener("click", (e) => {
-      if (e.target === overlay) dismiss("dismissed");
+      if (e.target === overlay) onBackdropOrEsc();
     });
     const onKey = (e) => {
-      if (e.key === "Escape") dismiss("dismissed");
+      if (e.key === "Escape") onBackdropOrEsc();
     };
     document.addEventListener("keydown", onKey);
     this.registerCleanup(() => document.removeEventListener("keydown", onKey));
-    context.onInteraction({
-      guideId: context.guide.guideId,
-      stepIndex: 0,
-      action: "shown"
-    });
+    if (!context.nav) {
+      context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
+    }
   }
 };
+
+// src/plugins/guides/renderers/floating-arrow.ts
+var STATIC_SIDE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function positionArrow(arrowEl, placement, data) {
+  const side = STATIC_SIDE[placement.split("-")[0] ?? "bottom"] ?? "top";
+  for (const prop of ["top", "bottom", "left", "right"]) {
+    arrowEl.style.setProperty(prop, "");
+  }
+  if (data?.x != null) arrowEl.style.setProperty("left", `${data.x}px`);
+  if (data?.y != null) arrowEl.style.setProperty("top", `${data.y}px`);
+  arrowEl.style.setProperty(side, "-6px");
+}
+
+// src/plugins/guides/renderers/tooltip-renderer.ts
 var TooltipRenderer = class extends BaseRenderer {
   async render(context) {
     const step = context.guide.guideSteps[0];
@@ -1258,14 +1669,18 @@ var TooltipRenderer = class extends BaseRenderer {
       onDismiss: () => dismiss("dismissed")
     });
     tooltip.appendChild(content);
+    const arrowEl = ownerDocument.createElement("div");
+    arrowEl.className = "veo-tooltip-arrow";
+    tooltip.appendChild(arrowEl);
     root.appendChild(tooltip);
     const updatePosition = async () => {
-      const { x, y } = await dom.computePosition(anchor, tooltip, {
+      const { x, y, placement, middlewareData } = await dom.computePosition(anchor, tooltip, {
         placement: "bottom",
-        middleware: [dom.offset(8), dom.flip(), dom.shift({ padding: 8 })]
+        middleware: [dom.offset(10), dom.flip(), dom.shift({ padding: 8 }), dom.arrow({ element: arrowEl })]
       });
       tooltip.style.left = `${x}px`;
       tooltip.style.top = `${y}px`;
+      positionArrow(arrowEl, placement, middlewareData.arrow);
     };
     await updatePosition();
     const reposition = () => {
@@ -1284,79 +1699,6 @@ var TooltipRenderer = class extends BaseRenderer {
     });
   }
 };
-
-// src/plugins/guides/walkthrough-block-builder.ts
-function buildWalkthroughStepContent(step, stepIndex, totalSteps, doc, callbacks) {
-  const container = doc.createElement("div");
-  container.className = "veo-guide-content";
-  const counter = doc.createElement("div");
-  counter.className = "veo-walkthrough-counter";
-  counter.textContent = `Paso ${stepIndex + 1} de ${totalSteps}`;
-  container.appendChild(counter);
-  const progress = doc.createElement("div");
-  progress.className = "veo-walkthrough-progress";
-  for (let i = 0; i < totalSteps; i++) {
-    const dot = doc.createElement("span");
-    dot.className = "veo-walkthrough-progress-dot";
-    if (i < stepIndex) dot.classList.add("completed");
-    if (i === stepIndex) dot.classList.add("active");
-    progress.appendChild(dot);
-  }
-  container.appendChild(progress);
-  if (typeof step.imageUrl === "string" && step.imageUrl && isSafeUrl(step.imageUrl)) {
-    const img = doc.createElement("img");
-    img.className = "veo-guide-image";
-    img.src = step.imageUrl;
-    img.alt = typeof step.title === "string" ? step.title : "";
-    container.appendChild(img);
-  }
-  if (typeof step.title === "string" && step.title) {
-    const heading = doc.createElement("h2");
-    heading.className = "veo-guide-title";
-    heading.textContent = step.title;
-    container.appendChild(heading);
-  }
-  if (typeof step.content === "string" && step.content) {
-    const paragraph = doc.createElement("p");
-    paragraph.className = "veo-guide-text";
-    paragraph.textContent = step.content;
-    container.appendChild(paragraph);
-  }
-  const actions = doc.createElement("div");
-  actions.className = "veo-walkthrough-actions";
-  const skipBtn = doc.createElement("button");
-  skipBtn.type = "button";
-  skipBtn.className = "veo-walkthrough-skip";
-  skipBtn.textContent = "Omitir";
-  skipBtn.addEventListener("click", () => callbacks.onSkip());
-  actions.appendChild(skipBtn);
-  const rightGroup = doc.createElement("div");
-  rightGroup.className = "veo-walkthrough-actions-right";
-  if (stepIndex > 0) {
-    const backBtn = doc.createElement("button");
-    backBtn.type = "button";
-    backBtn.className = "veo-walkthrough-btn-secondary";
-    backBtn.textContent = "Atr\xE1s";
-    backBtn.addEventListener("click", () => callbacks.onBack());
-    rightGroup.appendChild(backBtn);
-  }
-  const isLastStep = stepIndex === totalSteps - 1;
-  const primaryBtn = doc.createElement("button");
-  primaryBtn.type = "button";
-  primaryBtn.className = "veo-guide-cta";
-  const defaultLabel = isLastStep ? "Finalizar" : "Siguiente";
-  primaryBtn.textContent = typeof step.ctaText === "string" && step.ctaText ? step.ctaText : defaultLabel;
-  primaryBtn.addEventListener("click", () => {
-    if (isLastStep) callbacks.onComplete();
-    else callbacks.onNext();
-  });
-  rightGroup.appendChild(primaryBtn);
-  actions.appendChild(rightGroup);
-  container.appendChild(actions);
-  return container;
-}
-
-// src/plugins/guides/renderers/walkthrough-renderer.ts
 var WalkthroughRenderer = class extends BaseRenderer {
   async render(context) {
     const step = context.guide.guideSteps[context.currentStepIndex];
@@ -1404,27 +1746,13 @@ var WalkthroughRenderer = class extends BaseRenderer {
     return true;
   }
 };
-var STATIC_SIDE = {
-  top: "bottom",
-  bottom: "top",
-  left: "right",
-  right: "left"
-};
-function positionArrow(arrowEl, placement, data) {
-  const side = STATIC_SIDE[placement.split("-")[0] ?? "bottom"] ?? "top";
-  for (const prop of ["top", "bottom", "left", "right"]) {
-    arrowEl.style.setProperty(prop, "");
-  }
-  if (data?.x != null) arrowEl.style.setProperty("left", `${data.x}px`);
-  if (data?.y != null) arrowEl.style.setProperty("top", `${data.y}px`);
-  arrowEl.style.setProperty(side, "-6px");
-}
 
 // src/plugins/guides/guide-preview.ts
 var PREVIEW_GUIDE_ID = "__veo_preview__";
 var GuidePreviewController = class {
   constructor() {
     this.singleStep = null;
+    /** Renderer del paso de walkthrough activo (walkthrough tooltip o modal/banner). */
     this.walkthrough = null;
     this.walkthroughGuide = null;
     this.walkthroughIndex = 0;
@@ -1497,7 +1825,6 @@ var GuidePreviewController = class {
       safeDestroy(this.walkthrough);
       this.walkthrough = null;
     }
-    const renderer = new WalkthroughRenderer();
     const callbacks = {
       onNext: () => {
         const next = this.walkthroughIndex + 1;
@@ -1517,6 +1844,30 @@ var GuidePreviewController = class {
       onSkip: () => this.close(),
       onComplete: () => this.close()
     };
+    const step = guide.guideSteps[index];
+    const render = step?.style?.render;
+    if (render === "modal" || render === "banner") {
+      const renderer2 = render === "modal" ? new ModalRenderer() : new BannerRenderer();
+      try {
+        renderer2.render({
+          guide,
+          onInteraction: () => {
+          },
+          onClose: () => this.close(),
+          nav: { stepIndex: index, totalSteps: guide.guideSteps.length, callbacks }
+        });
+      } catch {
+        safeDestroy(renderer2);
+        return false;
+      }
+      if (this.walkthroughGuide !== guide) {
+        safeDestroy(renderer2);
+        return false;
+      }
+      this.walkthrough = renderer2;
+      return true;
+    }
+    const renderer = new WalkthroughRenderer();
     let success = false;
     try {
       success = await renderer.render({ guide, currentStepIndex: index, callbacks });