veo-sdk 0.3.16 → 0.4.0

package/dist/{chunk-YHUPUTWH.mjs → chunk-ICKEQ7VC.mjs}

@@ -162,6 +162,112 @@ var WALKTHROUGH_STATE_KEY_PREFIX = "veo:walkthrough_state:";
 var WALKTHROUGH_ABANDONMENT_TIMEOUT_MS = 30 * 60 * 1e3;
 var WALKTHROUGH_STEP_SELECTOR_TIMEOUT_MS = 5e3;
 
+// src/plugins/guides/rich-text.ts
+var ALLOWED_TAGS = {
+  P: "p",
+  BR: "br",
+  STRONG: "strong",
+  B: "strong",
+  EM: "em",
+  I: "em",
+  U: "u",
+  S: "s",
+  UL: "ul",
+  OL: "ol",
+  LI: "li",
+  A: "a"
+};
+var DROP_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "TEMPLATE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "NOSCRIPT",
+  "TITLE",
+  "TEXTAREA",
+  "SELECT",
+  "SVG",
+  "MATH"
+]);
+var MAX_INPUT_LEN = 16 * 1024;
+var MAX_DEPTH = 20;
+var MAX_NODES = 1e3;
+function renderRichText(html, doc) {
+  const fragment = doc.createDocumentFragment();
+  if (typeof html !== "string" || html.length === 0) return fragment;
+  let parsed;
+  try {
+    parsed = new DOMParser().parseFromString(
+      html.length > MAX_INPUT_LEN ? html.slice(0, MAX_INPUT_LEN) : html,
+      "text/html"
+    );
+  } catch {
+    fragment.appendChild(doc.createTextNode(html));
+    return fragment;
+  }
+  const budget = { nodes: 0, exceeded: false };
+  for (const child of Array.from(parsed.body.childNodes)) {
+    const rebuilt = rebuildNode(child, doc, 0, budget);
+    if (rebuilt) fragment.appendChild(rebuilt);
+  }
+  if (budget.exceeded) {
+    const plain = doc.createDocumentFragment();
+    plain.appendChild(doc.createTextNode(parsed.body.textContent ?? ""));
+    return plain;
+  }
+  return fragment;
+}
+function rebuildNode(node, doc, depth, budget) {
+  if (budget.exceeded) return null;
+  if (++budget.nodes > MAX_NODES || depth > MAX_DEPTH) {
+    budget.exceeded = true;
+    return null;
+  }
+  if (node.nodeType === Node.TEXT_NODE) {
+    return doc.createTextNode(node.textContent ?? "");
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+  const el = node;
+  if (DROP_TAGS.has(el.tagName)) return null;
+  const mapped = ALLOWED_TAGS[el.tagName];
+  if (!mapped) {
+    const frag = doc.createDocumentFragment();
+    for (const child of Array.from(el.childNodes)) {
+      const rebuilt2 = rebuildNode(child, doc, depth + 1, budget);
+      if (rebuilt2) frag.appendChild(rebuilt2);
+    }
+    return frag;
+  }
+  if (mapped === "a") {
+    const href = el.getAttribute("href") ?? "";
+    if (!isSafeUrl(href)) {
+      const frag = doc.createDocumentFragment();
+      for (const child of Array.from(el.childNodes)) {
+        const rebuilt2 = rebuildNode(child, doc, depth + 1, budget);
+        if (rebuilt2) frag.appendChild(rebuilt2);
+      }
+      return frag;
+    }
+    const a = doc.createElement("a");
+    a.setAttribute("href", href);
+    a.setAttribute("target", "_blank");
+    a.setAttribute("rel", "noopener noreferrer nofollow");
+    for (const child of Array.from(el.childNodes)) {
+      const rebuilt2 = rebuildNode(child, doc, depth + 1, budget);
+      if (rebuilt2) a.appendChild(rebuilt2);
+    }
+    return a;
+  }
+  const rebuilt = doc.createElement(mapped);
+  for (const child of Array.from(el.childNodes)) {
+    const childNode = rebuildNode(child, doc, depth + 1, budget);
+    if (childNode) rebuilt.appendChild(childNode);
+  }
+  return rebuilt;
+}
+
 // src/plugins/guides/block-builder.ts
 function buildStepContent(step, doc, callbacks) {
   const container = doc.createElement("div");
@@ -256,9 +362,13 @@ function buildContentBlock(block, doc) {
       return el;
     }
     case "text": {
-      const el = doc.createElement("p");
+      const el = doc.createElement("div");
       el.className = "veo-guide-text";
-      el.textContent = typeof block.text === "string" ? block.text : "";
+      if (typeof block.html === "string" && block.html) {
+        el.appendChild(renderRichText(block.html, doc));
+      } else {
+        el.textContent = typeof block.text === "string" ? block.text : "";
+      }
       applyBlockStyle(el, block.style, "text");
       return el;
     }
@@ -284,7 +394,11 @@ function buildButtonBlock(block, doc, callbacks) {
   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);
+    const meta = {
+      ...typeof block.id === "string" && block.id ? { buttonId: block.id } : {},
+      ...typeof block.text === "string" && block.text ? { buttonText: block.text } : {}
+    };
+    callbacks.onCtaClick(action, url, Object.keys(meta).length ? meta : void 0);
   });
   return btn;
 }
@@ -299,6 +413,10 @@ function clampNum(n, min, max) {
 function applyBlockStyle(el, style, kind) {
   if (!style || typeof style !== "object") return;
   const s = style;
+  if (kind === "image" && s.bleed === true) {
+    el.classList.add("veo-guide-image--bleed");
+    return;
+  }
   const align = typeof s.align === "string" ? s.align : null;
   if (align && (align === "left" || align === "center" || align === "right")) {
     if (kind === "text") el.style.textAlign = align;
@@ -346,78 +464,6 @@ 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",
@@ -490,6 +536,9 @@ function applyDesignVars(host, style) {
   if (typeof s.width === "number" && Number.isFinite(s.width)) {
     host.style.setProperty("--veo-width", `${clamp(s.width, 220, 720)}px`);
   }
+  if (typeof s.height === "number" && Number.isFinite(s.height)) {
+    host.style.setProperty("--veo-min-h", `${clamp(s.height, 120, 900)}px`);
+  }
   if (s.align === "left" || s.align === "center" || s.align === "right") {
     host.style.setProperty("--veo-actions-justify", ALIGN_JUSTIFY[s.align]);
   }
@@ -575,6 +624,68 @@ function applyElementVars(host, prefix, raw) {
   }
 }
 
+// src/plugins/guides/inline-host.ts
+function readInlinePosition(style) {
+  const p = style?.inlinePosition;
+  return p === "before" || p === "prepend" || p === "append" ? p : "after";
+}
+function insertHost(anchor, host, position) {
+  switch (position) {
+    case "before":
+      anchor.before(host);
+      break;
+    case "after":
+      anchor.after(host);
+      break;
+    case "prepend":
+      anchor.prepend(host);
+      break;
+    case "append":
+      anchor.append(host);
+      break;
+  }
+}
+function keepHostAttached(host, selector, position) {
+  const id = window.setInterval(() => {
+    if (host.isConnected) return;
+    const anchor = document.querySelector(selector);
+    if (anchor) insertHost(anchor, host, position);
+  }, 1e3);
+  return () => window.clearInterval(id);
+}
+
+// src/plugins/guides/wait-for-element.ts
+function waitForElement(selector, timeoutMs = DEFAULT_ANCHOR_WAIT_MS) {
+  return new Promise((resolve) => {
+    const safeQuery = () => {
+      try {
+        return document.querySelector(selector);
+      } catch {
+        return null;
+      }
+    };
+    const existing = safeQuery();
+    if (existing) {
+      resolve(existing);
+      return;
+    }
+    let resolved = false;
+    const finish = (el) => {
+      if (resolved) return;
+      resolved = true;
+      observer.disconnect();
+      clearTimeout(timer);
+      resolve(el);
+    };
+    const observer = new MutationObserver(() => {
+      const el = safeQuery();
+      if (el) finish(el);
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    const timer = setTimeout(() => finish(null), timeoutMs);
+  });
+}
+
 // src/plugins/guides/styles.ts
 var GUIDE_STYLES = `
 :host {
@@ -596,6 +707,13 @@ var GUIDE_STYLES = `
   z-index: ${GUIDE_Z_INDEX};
   animation: veo-fade-in 180ms ease-out;
 }
+/* Sin backdrop (style.backdrop === false): la app queda usable detr\xE1s; solo la
+   tarjeta captura el mouse. El click-en-backdrop deja de cerrar (no hay backdrop). */
+.veo-modal-overlay--none {
+  background: transparent;
+  pointer-events: none;
+}
+.veo-modal-overlay--none .veo-modal-card { pointer-events: auto; }
 /*
  * Posici\xF3n libre/preset: --veo-pos-x/y son porcentajes (default 50% = centro).
  * El truco translate(-pos) alinea la MISMA fracci\xF3n de la tarjeta con esa
@@ -612,6 +730,7 @@ var GUIDE_STYLES = `
   border: var(--veo-border-width, 0) solid var(--veo-border-color, transparent);
   padding: var(--veo-pad, 24px);
   max-width: var(--veo-width); width: 90%;
+  min-height: var(--veo-min-h, auto);
   box-shadow: var(--veo-shadow);
   animation: veo-fade-in 180ms ease-out;
 }
@@ -627,6 +746,14 @@ var GUIDE_STYLES = `
 }
 .veo-banner-top { top: 0; }
 .veo-banner-bottom { bottom: 0; }
+/* Banner EMBEBIDO en un contenedor (step.selector): fluye dentro del contenedor
+   y empuja su contenido, en vez de flotar fijo sobre la pantalla. */
+.veo-banner-embedded {
+  position: static;
+  left: auto; right: auto;
+  width: 100%;
+  border-radius: var(--veo-radius, 0);
+}
 
 .veo-tooltip {
   position: absolute;
@@ -680,6 +807,21 @@ var GUIDE_STYLES = `
   border-radius: var(--veo-image-radius, 8px);
   margin: var(--veo-image-mt, 0) 0 var(--veo-image-mb, 12px);
 }
+/* Imagen A SANGRE: rompe el padding de la tarjeta y ocupa el ancho completo
+   (hero estilo anuncio). Como primer bloque, hereda el redondeo superior. */
+.veo-guide-image--bleed {
+  width: calc(100% + var(--veo-pad, 24px) * 2);
+  max-width: none;
+  max-height: 280px;
+  align-self: auto;
+  border-radius: 0;
+  margin: 0 calc(var(--veo-pad, 24px) * -1) 12px;
+}
+.veo-guide-content > .veo-guide-image--bleed:first-child {
+  margin-top: calc(var(--veo-pad, 24px) * -1);
+  border-radius: calc(var(--veo-radius, 12px) - var(--veo-border-width, 0px))
+    calc(var(--veo-radius, 12px) - var(--veo-border-width, 0px)) 0 0;
+}
 .veo-guide-title {
   font-size: var(--veo-title-size, 18px); font-weight: 600; line-height: 1.3;
   text-align: var(--veo-title-align, left);
@@ -692,6 +834,18 @@ var GUIDE_STYLES = `
   margin: var(--veo-text-mt, 0) 0 var(--veo-text-mb, 16px);
   color: var(--veo-text-color, var(--veo-text-secondary));
 }
+/* Rich text dentro de un bloque de texto (p/listas/links/\xE9nfasis). */
+.veo-guide-text p { margin: 0 0 8px; }
+.veo-guide-text p:last-child { margin-bottom: 0; }
+.veo-guide-text ul, .veo-guide-text ol { margin: 0 0 8px; padding-left: 20px; }
+.veo-guide-text ul { list-style: disc; }
+.veo-guide-text ol { list-style: decimal; }
+.veo-guide-text li { margin: 2px 0; display: list-item; }
+.veo-guide-text a { color: var(--veo-primary); text-decoration: underline; cursor: pointer; }
+.veo-guide-text strong { font-weight: 600; }
+.veo-guide-text em { font-style: italic; }
+.veo-guide-text u { text-decoration: underline; }
+.veo-guide-text s { text-decoration: line-through; }
 .veo-guide-actions {
   display: flex; gap: 8px; justify-content: var(--veo-actions-justify);
 }
@@ -830,6 +984,44 @@ var GUIDE_STYLES = `
 }
 .veo-walkthrough-skip:hover { color: var(--veo-text); }
 
+/* \u2500\u2500 Badge (elemento inyectado junto al ancla que abre un tooltip) \u2500\u2500 */
+.veo-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  border: none; padding: 0; margin: 0 4px;
+  background: none; cursor: pointer;
+  line-height: 1; vertical-align: middle;
+  font-family: inherit;
+}
+.veo-badge:focus-visible { outline: 2px solid var(--veo-primary); outline-offset: 2px; }
+.veo-badge--icon {
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--veo-primary) 14%, transparent);
+  color: var(--veo-primary);
+  font-weight: 600;
+}
+.veo-badge--dot {
+  border-radius: 50%;
+  background: var(--veo-primary);
+  animation: veo-badge-pulse 2s ease-out infinite;
+}
+.veo-badge--pill {
+  border-radius: 999px;
+  background: var(--veo-primary);
+  color: #fff;
+  font-weight: 600;
+  padding: 3px 9px;
+  white-space: nowrap;
+}
+.veo-badge--image img { display: block; border-radius: 4px; object-fit: cover; }
+/* El tooltip del badge usa strategy fixed (el host vive dentro del flujo del
+   cliente; un absoluto se recortar\xEDa con overflow de ancestros). */
+.veo-badge-tooltip { position: fixed; }
+@keyframes veo-badge-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--veo-primary) 45%, transparent); }
+  70% { box-shadow: 0 0 0 7px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+
 .veo-custom-floating {
   position: fixed;
   z-index: ${GUIDE_Z_INDEX};
@@ -940,6 +1132,14 @@ var BaseRenderer = class {
   registerCleanup(fn) {
     this.cleanups.push(fn);
   }
+  /**
+   * Host de la guía montada (o `null` si aún no se montó / ya se destruyó).
+   * Lo usa el modo builder para adjuntar manipulación directa (drag/resize)
+   * sobre el shadow root abierto sin tocar los renderers.
+   */
+  hostElement() {
+    return this.host;
+  }
   /** Remueve el host del DOM y corre todas las funciones de cleanup. */
   destroy() {
     for (const fn of this.cleanups) {
@@ -957,20 +1157,372 @@ var BaseRenderer = class {
   }
 };
 
+// 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/badge-renderer.ts
+var HOVER_CLOSE_DELAY_MS = 150;
+var BadgeRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.tooltip = null;
+    this.arrowEl = null;
+    this.badgeBtn = null;
+    this.open = false;
+    this.shownEmitted = false;
+    this.trigger = "hover";
+    this.side = "top";
+    this.closeTimer = null;
+    this.stopFloat = null;
+  }
+  async render(context) {
+    const step = context.guide.guideSteps[0];
+    if (!step) return;
+    const selector = step.selector ?? context.guide.activationRules.selector;
+    if (typeof selector !== "string" || selector.length === 0) return;
+    const anchor = await waitForElement(selector);
+    if (!anchor) return;
+    const { host, root } = this.createHost();
+    const ownerDocument = root.ownerDocument ?? document;
+    this.applyDesign(step.style);
+    this.trigger = step.style?.badgeTrigger === "click" ? "click" : "hover";
+    const rawSide = step.style?.tooltipPlacement;
+    this.side = rawSide === "bottom" || rawSide === "left" || rawSide === "right" ? rawSide : "top";
+    const position = readInlinePosition(step.style);
+    host.style.display = "inline-flex";
+    host.style.verticalAlign = "middle";
+    const badge = buildBadgeElement(readBadgeConfig(step), ownerDocument);
+    root.appendChild(badge);
+    this.badgeBtn = badge;
+    insertHost(anchor, host, position);
+    this.registerCleanup(keepHostAttached(host, selector, position));
+    const tooltip = ownerDocument.createElement("div");
+    tooltip.className = "veo-tooltip veo-badge-tooltip";
+    tooltip.style.display = "none";
+    const emit = (action, meta) => {
+      context.onInteraction({
+        guideId: context.guide.guideId,
+        stepIndex: 0,
+        action,
+        ...meta ? { metadata: meta } : {}
+      });
+    };
+    const buildTooltipContent = (s) => buildStepContent(s, ownerDocument, {
+      onCtaClick: (action, url, meta) => {
+        emit("cta_clicked", meta);
+        if (action === "url" && url) window.open(url, "_blank", "noopener,noreferrer");
+        if (action === "dismiss") {
+          emit("dismissed");
+          context.onClose();
+          return;
+        }
+        this.closeTooltip();
+      },
+      onDismiss: () => {
+        emit("dismissed");
+        context.onClose();
+      }
+    });
+    const content = buildTooltipContent(step);
+    tooltip.appendChild(content);
+    const arrowEl = ownerDocument.createElement("div");
+    arrowEl.className = "veo-tooltip-arrow";
+    tooltip.appendChild(arrowEl);
+    root.appendChild(tooltip);
+    this.tooltip = tooltip;
+    this.arrowEl = arrowEl;
+    this.liveContainer = tooltip;
+    this.liveContent = content;
+    this.liveKey = this.liveKeyOf(step);
+    this.liveBuild = buildTooltipContent;
+    const openNow = () => {
+      this.cancelClose();
+      if (!this.open) {
+        this.openTooltip(badge);
+        if (!this.shownEmitted) {
+          this.shownEmitted = true;
+          emit("shown");
+        }
+      }
+    };
+    if (this.trigger === "hover") {
+      const scheduleClose = () => {
+        this.cancelClose();
+        this.closeTimer = window.setTimeout(() => this.closeTooltip(), HOVER_CLOSE_DELAY_MS);
+      };
+      badge.addEventListener("mouseenter", openNow);
+      badge.addEventListener("focus", openNow);
+      badge.addEventListener("mouseleave", scheduleClose);
+      badge.addEventListener("blur", scheduleClose);
+      tooltip.addEventListener("mouseenter", () => this.cancelClose());
+      tooltip.addEventListener("mouseleave", scheduleClose);
+    } else {
+      badge.addEventListener("click", () => {
+        if (this.open) this.closeTooltip();
+        else openNow();
+      });
+      const onDocClick = (e) => {
+        if (!this.open) return;
+        if (e.composedPath().includes(host)) return;
+        this.closeTooltip();
+      };
+      document.addEventListener("click", onDocClick, true);
+      this.registerCleanup(() => document.removeEventListener("click", onDocClick, true));
+    }
+    const onKey = (e) => {
+      if (e.key === "Escape" && this.open) this.closeTooltip();
+    };
+    document.addEventListener("keydown", onKey);
+    this.registerCleanup(() => document.removeEventListener("keydown", onKey));
+    if (context.isPreview) openNow();
+  }
+  /** Cambiar de ancla/posición/trigger requiere re-montar y re-cablear. */
+  liveKeyOf(step) {
+    const selector = step.selector ?? "";
+    const position = readInlinePosition(step.style);
+    const trigger = step.style?.badgeTrigger === "click" ? "click" : "hover";
+    return `${selector}|${position}|${trigger}`;
+  }
+  onLiveUpdate(step) {
+    if (this.badgeBtn) {
+      const doc = this.badgeBtn.ownerDocument;
+      const next = buildBadgeElement(readBadgeConfig(step), doc);
+      this.badgeBtn.className = next.className;
+      this.badgeBtn.setAttribute("style", next.getAttribute("style") ?? "");
+      this.badgeBtn.replaceChildren(...Array.from(next.childNodes));
+    }
+    const rawSide = step.style?.tooltipPlacement;
+    this.side = rawSide === "bottom" || rawSide === "left" || rawSide === "right" ? rawSide : "top";
+    if (this.open && this.badgeBtn) this.position(this.badgeBtn);
+  }
+  destroy() {
+    this.cancelClose();
+    this.stopFloat?.();
+    this.stopFloat = null;
+    this.tooltip = null;
+    this.arrowEl = null;
+    this.badgeBtn = null;
+    this.open = false;
+    super.destroy();
+  }
+  openTooltip(badge) {
+    if (!this.tooltip) return;
+    this.tooltip.style.display = "block";
+    this.open = true;
+    void this.position(badge);
+    const reposition = () => {
+      void this.position(badge);
+    };
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    this.stopFloat = () => {
+      window.removeEventListener("scroll", reposition, true);
+      window.removeEventListener("resize", reposition);
+    };
+  }
+  closeTooltip() {
+    this.cancelClose();
+    if (!this.tooltip || !this.open) return;
+    this.tooltip.style.display = "none";
+    this.open = false;
+    this.stopFloat?.();
+    this.stopFloat = null;
+  }
+  cancelClose() {
+    if (this.closeTimer !== null) {
+      window.clearTimeout(this.closeTimer);
+      this.closeTimer = null;
+    }
+  }
+  async position(badge) {
+    const tooltip = this.tooltip;
+    const arrowEl = this.arrowEl;
+    if (!tooltip || !arrowEl) return;
+    const { x, y, placement, middlewareData } = await computePosition(badge, tooltip, {
+      strategy: "fixed",
+      placement: this.side,
+      middleware: [offset(8), flip(), shift({ padding: 8 }), arrow({ element: arrowEl })]
+    });
+    tooltip.style.left = `${x}px`;
+    tooltip.style.top = `${y}px`;
+    positionArrow(arrowEl, placement, middlewareData.arrow);
+  }
+};
+function readBadgeConfig(step) {
+  const raw = step.style?.badge;
+  if (!raw || typeof raw !== "object") return { kind: "icon" };
+  const b = raw;
+  const kind = b.kind === "dot" || b.kind === "pill" || b.kind === "image" || b.kind === "icon" ? b.kind : "icon";
+  return {
+    kind,
+    icon: typeof b.icon === "string" ? b.icon : null,
+    text: typeof b.text === "string" ? b.text : null,
+    imageUrl: typeof b.imageUrl === "string" ? b.imageUrl : null,
+    color: typeof b.color === "string" && COLOR_RE.test(b.color.trim()) ? b.color.trim() : null,
+    size: typeof b.size === "number" && Number.isFinite(b.size) ? b.size : null
+  };
+}
+function clamp2(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+function buildBadgeElement(config, doc) {
+  const btn = doc.createElement("button");
+  btn.type = "button";
+  btn.className = `veo-badge veo-badge--${config.kind}`;
+  btn.setAttribute("aria-label", "M\xE1s informaci\xF3n");
+  const size = clamp2(config.size ?? 18, 8, 48);
+  switch (config.kind) {
+    case "dot":
+      btn.style.width = `${size}px`;
+      btn.style.height = `${size}px`;
+      if (config.color) btn.style.background = config.color;
+      break;
+    case "pill": {
+      btn.textContent = config.text?.slice(0, 24) || "Nuevo";
+      btn.style.fontSize = `${clamp2(Math.round(size * 0.62), 8, 24)}px`;
+      if (config.color) btn.style.background = config.color;
+      break;
+    }
+    case "image": {
+      if (config.imageUrl && isSafeUrl(config.imageUrl)) {
+        const img = doc.createElement("img");
+        img.src = config.imageUrl;
+        img.alt = "";
+        img.style.width = `${size}px`;
+        img.style.height = `${size}px`;
+        btn.appendChild(img);
+      } else {
+        btn.className = "veo-badge veo-badge--icon";
+        btn.textContent = "?";
+        btn.style.width = `${size}px`;
+        btn.style.height = `${size}px`;
+        btn.style.fontSize = `${clamp2(Math.round(size * 0.62), 8, 32)}px`;
+      }
+      break;
+    }
+    default: {
+      btn.textContent = (config.icon || "\u2139\uFE0F").slice(0, 4);
+      btn.style.width = `${size}px`;
+      btn.style.height = `${size}px`;
+      btn.style.fontSize = `${clamp2(Math.round(size * 0.62), 8, 32)}px`;
+      if (config.color) btn.style.color = config.color;
+      break;
+    }
+  }
+  return btn;
+}
+
+// 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/renderers/banner-renderer.ts
 var BannerRenderer = class extends BaseRenderer {
-  render(context) {
+  async render(context) {
     const idx = context.nav?.stepIndex ?? 0;
     const step = context.guide.guideSteps[idx];
     if (!step) return;
-    const { root } = this.createHost();
+    const position = step.style?.position === "bottom" ? "bottom" : "top";
+    const selector = context.nav ? null : step.selector?.trim() ?? null;
+    let anchor = null;
+    if (selector) {
+      anchor = await waitForElement(selector);
+      if (!anchor) return;
+    }
+    const { host, root } = this.createHost();
     this.applyDesign(step.style);
     const ownerDocument = root.ownerDocument ?? document;
-    const position = step.style?.position === "bottom" ? "bottom" : "top";
     const banner = ownerDocument.createElement("div");
-    banner.className = `veo-banner veo-banner-${position}`;
-    const dismiss = (action, ctaUrl) => {
-      context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action });
+    banner.className = bannerClassOf(position, Boolean(anchor));
+    const dismiss = (action, ctaUrl, meta) => {
+      context.onInteraction({
+        guideId: context.guide.guideId,
+        stepIndex: idx,
+        action,
+        ...meta ? { metadata: meta } : {}
+      });
       if (ctaUrl) window.open(ctaUrl, "_blank", "noopener,noreferrer");
       context.onClose();
     };
@@ -981,59 +1533,45 @@ var BannerRenderer = class extends BaseRenderer {
       ownerDocument,
       context.nav.callbacks
     ) : buildStepContent(step, ownerDocument, {
-      onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+      onCtaClick: (action, url, meta) => dismiss("cta_clicked", action === "url" ? url : void 0, meta),
       onDismiss: () => dismiss("dismissed")
     });
     banner.appendChild(content);
     root.appendChild(banner);
+    if (selector && anchor) {
+      host.style.display = "block";
+      const insertAt = position === "top" ? "prepend" : "append";
+      insertHost(anchor, host, insertAt);
+      this.registerCleanup(keepHostAttached(host, selector, insertAt));
+    }
     if (!context.nav) {
       this.liveContainer = banner;
       this.liveContent = content;
       this.liveBuild = (s) => buildStepContent(s, ownerDocument, {
-        onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+        onCtaClick: (action, url, meta) => dismiss("cta_clicked", action === "url" ? url : void 0, meta),
         onDismiss: () => dismiss("dismissed")
       });
+      this.liveKey = this.liveKeyOf(step);
       context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
     }
   }
+  /** Cambiar de contenedor o de top/bottom embebido requiere re-insertar → remontar. */
+  liveKeyOf(step) {
+    const selector = step.selector?.trim() ?? "";
+    if (!selector) return "";
+    const position = step.style?.position === "bottom" ? "bottom" : "top";
+    return `${selector}|${position}`;
+  }
   onLiveUpdate(step) {
     if (this.liveContainer) {
       const position = step.style?.position === "bottom" ? "bottom" : "top";
-      this.liveContainer.className = `veo-banner veo-banner-${position}`;
+      const embedded = Boolean(step.selector?.trim());
+      this.liveContainer.className = bannerClassOf(position, embedded);
     }
   }
 };
-
-// src/plugins/guides/wait-for-element.ts
-function waitForElement(selector, timeoutMs = DEFAULT_ANCHOR_WAIT_MS) {
-  return new Promise((resolve) => {
-    const safeQuery = () => {
-      try {
-        return document.querySelector(selector);
-      } catch {
-        return null;
-      }
-    };
-    const existing = safeQuery();
-    if (existing) {
-      resolve(existing);
-      return;
-    }
-    let resolved = false;
-    const finish = (el) => {
-      if (resolved) return;
-      resolved = true;
-      observer.disconnect();
-      clearTimeout(timer);
-      resolve(el);
-    };
-    const observer = new MutationObserver(() => {
-      const el = safeQuery();
-      if (el) finish(el);
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
-    const timer = setTimeout(() => finish(null), timeoutMs);
-  });
+function bannerClassOf(position, embedded) {
+  return embedded ? "veo-banner veo-banner-embedded" : `veo-banner veo-banner-${position}`;
 }
 
 // src/utils/uuid.ts
@@ -1568,36 +2106,6 @@ var FormRenderer = class extends BaseRenderer {
   }
 };
 
-// src/plugins/guides/inline-host.ts
-function readInlinePosition(style) {
-  const p = style?.inlinePosition;
-  return p === "before" || p === "prepend" || p === "append" ? p : "after";
-}
-function insertHost(anchor, host, position) {
-  switch (position) {
-    case "before":
-      anchor.before(host);
-      break;
-    case "after":
-      anchor.after(host);
-      break;
-    case "prepend":
-      anchor.prepend(host);
-      break;
-    case "append":
-      anchor.append(host);
-      break;
-  }
-}
-function keepHostAttached(host, selector, position) {
-  const id = window.setInterval(() => {
-    if (host.isConnected) return;
-    const anchor = document.querySelector(selector);
-    if (anchor) insertHost(anchor, host, position);
-  }, 1e3);
-  return () => window.clearInterval(id);
-}
-
 // src/plugins/guides/renderers/inline-custom-renderer.ts
 var InlineCustomRenderer = class extends BaseRenderer {
   async render(context) {
@@ -1665,13 +2173,18 @@ var InlineRenderer = class extends BaseRenderer {
     const ownerDocument = root.ownerDocument ?? document;
     const card = ownerDocument.createElement("div");
     card.className = "veo-inline";
-    const dismiss = (action, ctaUrl) => {
-      context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action });
+    const dismiss = (action, ctaUrl, meta) => {
+      context.onInteraction({
+        guideId: context.guide.guideId,
+        stepIndex: 0,
+        action,
+        ...meta ? { metadata: meta } : {}
+      });
       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),
+      onCtaClick: (action, url, meta) => dismiss("cta_clicked", action === "url" ? url : void 0, meta),
       onDismiss: () => dismiss("dismissed")
     });
     card.appendChild(content);
@@ -1680,7 +2193,7 @@ var InlineRenderer = class extends BaseRenderer {
     this.liveContent = content;
     this.liveKey = `${selector}|${position}`;
     this.liveBuild = (s) => buildStepContent(s, ownerDocument, {
-      onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+      onCtaClick: (action, url, meta) => dismiss("cta_clicked", action === "url" ? url : void 0, meta),
       onDismiss: () => dismiss("dismissed")
     });
     context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
@@ -1691,7 +2204,14 @@ var InlineRenderer = class extends BaseRenderer {
 };
 
 // src/plugins/guides/renderers/modal-renderer.ts
+function overlayClassOf(step) {
+  return step.style?.backdrop === false ? "veo-modal-overlay veo-modal-overlay--none" : "veo-modal-overlay";
+}
 var ModalRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.overlay = null;
+  }
   render(context) {
     const idx = context.nav?.stepIndex ?? 0;
     const step = context.guide.guideSteps[idx];
@@ -1700,11 +2220,17 @@ var ModalRenderer = class extends BaseRenderer {
     this.applyDesign(step.style);
     const ownerDocument = root.ownerDocument ?? document;
     const overlay = ownerDocument.createElement("div");
-    overlay.className = "veo-modal-overlay";
+    overlay.className = overlayClassOf(step);
+    this.overlay = overlay;
     const card = ownerDocument.createElement("div");
     card.className = "veo-modal-card";
-    const dismiss = (action, ctaUrl) => {
-      context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action });
+    const dismiss = (action, ctaUrl, meta) => {
+      context.onInteraction({
+        guideId: context.guide.guideId,
+        stepIndex: idx,
+        action,
+        ...meta ? { metadata: meta } : {}
+      });
       if (ctaUrl) window.open(ctaUrl, "_blank", "noopener,noreferrer");
       context.onClose();
     };
@@ -1719,7 +2245,7 @@ var ModalRenderer = class extends BaseRenderer {
       ownerDocument,
       context.nav.callbacks
     ) : buildStepContent(step, ownerDocument, {
-      onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+      onCtaClick: (action, url, meta) => dismiss("cta_clicked", action === "url" ? url : void 0, meta),
       onDismiss: () => dismiss("dismissed")
     });
     card.appendChild(content);
@@ -1729,7 +2255,7 @@ var ModalRenderer = class extends BaseRenderer {
       this.liveContainer = card;
       this.liveContent = content;
       this.liveBuild = (s) => buildStepContent(s, ownerDocument, {
-        onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+        onCtaClick: (action, url, meta) => dismiss("cta_clicked", action === "url" ? url : void 0, meta),
         onDismiss: () => dismiss("dismissed")
       });
     }
@@ -1745,26 +2271,14 @@ var ModalRenderer = class extends BaseRenderer {
       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, "");
+  onLiveUpdate(step) {
+    if (this.overlay) this.overlay.className = overlayClassOf(step);
   }
-  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
+  destroy() {
+    this.overlay = null;
+    super.destroy();
+  }
+};
 var TooltipRenderer = class extends BaseRenderer {
   constructor() {
     super(...arguments);
@@ -1786,18 +2300,19 @@ var TooltipRenderer = class extends BaseRenderer {
     const ownerDocument = root.ownerDocument ?? document;
     const tooltip = ownerDocument.createElement("div");
     tooltip.className = "veo-tooltip";
-    const dismiss = (action, ctaUrl) => {
+    const dismiss = (action, ctaUrl, meta) => {
       context.onInteraction({
         guideId: context.guide.guideId,
         stepIndex: 0,
-        action
+        action,
+        ...meta ? { metadata: meta } : {}
       });
       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);
+      onCtaClick: (action, url, meta) => {
+        dismiss("cta_clicked", action === "url" ? url : void 0, meta);
       },
       onDismiss: () => dismiss("dismissed")
     });
@@ -1830,7 +2345,7 @@ var TooltipRenderer = class extends BaseRenderer {
     this.liveContent = content;
     this.liveKey = selector;
     this.liveBuild = (s) => buildStepContent(s, ownerDocument, {
-      onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+      onCtaClick: (action, url, meta) => dismiss("cta_clicked", action === "url" ? url : void 0, meta),
       onDismiss: () => dismiss("dismissed")
     });
     context.onInteraction({
@@ -1914,14 +2429,26 @@ var GuidePreviewController = class {
     const nextStep = input.guideSteps[0];
     if (this.singleStep && this.input && input.guideType === this.input.guideType && input.guideType !== "walkthrough" && nextStep && this.singleStep.updateStep(nextStep)) {
       this.input = input;
-      return { close: () => this.close(), ready: Promise.resolve({ rendered: true }) };
+      return {
+        close: () => this.close(),
+        ready: Promise.resolve({ rendered: true }),
+        host: () => this.activeHost()
+      };
     }
     this.close();
     this.input = input;
     const guide = normalize(input);
     const start = typeof input.startStepIndex === "number" ? input.startStepIndex : 0;
     const ready = guide.guideType === "walkthrough" ? this.startWalkthrough(guide, start) : this.renderSingleStep(guide);
-    return { close: () => this.close(), ready };
+    return { close: () => this.close(), ready, host: () => this.activeHost() };
+  }
+  /** Host de la guía montada (single-step o paso de walkthrough activo). */
+  activeHost() {
+    if (this.singleStep) return this.singleStep.hostElement();
+    if (this.walkthrough instanceof BaseRenderer) {
+      return this.walkthrough.hostElement();
+    }
+    return null;
   }
   close() {
     if (this.singleStep) {
@@ -2042,7 +2569,7 @@ var activeController = null;
 function previewGuide(input) {
   if (!hasDocument()) {
     return { close: () => {
-    }, ready: Promise.resolve({ rendered: false }) };
+    }, ready: Promise.resolve({ rendered: false }), host: () => null };
   }
   if (!activeController) activeController = new GuidePreviewController();
   return activeController.preview(input);
@@ -2085,6 +2612,8 @@ function createSingleStepRenderer(type) {
       return new FormRenderer();
     case "inline-form":
       return new InlineFormRenderer();
+    case "badge":
+      return new BadgeRenderer();
     case "walkthrough":
       return null;
   }
@@ -2229,6 +2758,6 @@ function buildSelectorPath(element, maxAncestors = 5) {
   return parts.join(" > ");
 }
 
-export { ALWAYS_BLOCK_SELECTORS, BannerRenderer, CustomRenderer, DEFAULT_AUTOCAPTURE_CONFIG, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_KEY_PREFIX, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, FormRenderer, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, buildSelectorPath, clearBuilderToken, closeGuidePreview, filterHumanClasses, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isBuilderMode, previewGuide, resolveBuilderContext, resolveBuilderToken, uuidv7 };
-//# sourceMappingURL=chunk-YHUPUTWH.mjs.map
-//# sourceMappingURL=chunk-YHUPUTWH.mjs.map
+export { ALWAYS_BLOCK_SELECTORS, BadgeRenderer, BannerRenderer, CustomRenderer, DEFAULT_AUTOCAPTURE_CONFIG, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_KEY_PREFIX, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, FormRenderer, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, buildSelectorPath, clearBuilderToken, closeGuidePreview, filterHumanClasses, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isBuilderMode, previewGuide, resolveBuilderContext, resolveBuilderToken, uuidv7 };
+//# sourceMappingURL=chunk-ICKEQ7VC.mjs.map
+//# sourceMappingURL=chunk-ICKEQ7VC.mjs.map