veo-sdk 0.3.16 → 0.4.1

package/dist/index.cjs

@@ -113,7 +113,11 @@ function readFreshFromLocal() {
 }
 function urlParams() {
   try {
-    return new URLSearchParams(window.location.search);
+    const search = new URLSearchParams(window.location.search);
+    if (search.get(BUILDER_TOKEN_PARAM)) return search;
+    const hash = window.location.hash.replace(/^#/, "");
+    if (hash.includes(`${BUILDER_TOKEN_PARAM}=`)) return new URLSearchParams(hash);
+    return search;
   } catch {
     return null;
   }
@@ -178,7 +182,7 @@ var init_builder_token = __esm({
     init_builder_constants();
     CTX_KEY = "veo:builder_ctx";
     LS_PREFIX = "veo:builder_ctx:";
-    PERSIST_TTL_MS = 12 * 60 * 60 * 1e3;
+    PERSIST_TTL_MS = 30 * 60 * 1e3;
   }
 });
 
@@ -374,6 +378,118 @@ var init_constants2 = __esm({
   }
 });
 
+// src/plugins/guides/rich-text.ts
+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;
+}
+var ALLOWED_TAGS, DROP_TAGS, MAX_INPUT_LEN, MAX_DEPTH, MAX_NODES;
+var init_rich_text = __esm({
+  "src/plugins/guides/rich-text.ts"() {
+    init_block_builder();
+    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"
+    };
+    DROP_TAGS = /* @__PURE__ */ new Set([
+      "SCRIPT",
+      "STYLE",
+      "TEMPLATE",
+      "IFRAME",
+      "OBJECT",
+      "EMBED",
+      "NOSCRIPT",
+      "TITLE",
+      "TEXTAREA",
+      "SELECT",
+      "SVG",
+      "MATH"
+    ]);
+    MAX_INPUT_LEN = 16 * 1024;
+    MAX_DEPTH = 20;
+    MAX_NODES = 1e3;
+  }
+});
+
 // src/plugins/guides/block-builder.ts
 function buildStepContent(step, doc, callbacks) {
   const container = doc.createElement("div");
@@ -468,9 +584,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;
     }
@@ -496,7 +616,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;
 }
@@ -506,6 +630,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;
@@ -556,6 +684,7 @@ var BLOCK_ALIGN_SELF;
 var init_block_builder = __esm({
   "src/plugins/guides/block-builder.ts"() {
     init_constants2();
+    init_rich_text();
     BLOCK_ALIGN_SELF = {
       left: "flex-start",
       center: "center",
@@ -564,83 +693,6 @@ var init_block_builder = __esm({
   }
 });
 
-// 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;
-}
-var init_walkthrough_block_builder = __esm({
-  "src/plugins/guides/walkthrough-block-builder.ts"() {
-    init_block_builder();
-  }
-});
-
 // src/plugins/guides/guide-design.ts
 function clamp(n, min, max) {
   return Math.min(max, Math.max(min, n));
@@ -674,6 +726,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]);
   }
@@ -803,6 +858,77 @@ var init_guide_design = __esm({
   }
 });
 
+// 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);
+}
+var init_inline_host = __esm({
+  "src/plugins/guides/inline-host.ts"() {
+  }
+});
+
+// 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);
+  });
+}
+var init_wait_for_element = __esm({
+  "src/plugins/guides/wait-for-element.ts"() {
+    init_constants2();
+  }
+});
+
 // src/plugins/guides/styles.ts
 var GUIDE_STYLES;
 var init_styles = __esm({
@@ -828,6 +954,13 @@ var init_styles = __esm({
   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
@@ -844,6 +977,7 @@ var init_styles = __esm({
   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;
 }
@@ -859,6 +993,14 @@ var init_styles = __esm({
 }
 .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;
@@ -912,6 +1054,21 @@ var init_styles = __esm({
   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);
@@ -924,6 +1081,18 @@ var init_styles = __esm({
   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);
 }
@@ -1062,6 +1231,44 @@ var init_styles = __esm({
 }
 .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};
@@ -1180,6 +1387,14 @@ var init_base_renderer = __esm({
       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) {
@@ -1199,26 +1414,402 @@ var init_base_renderer = __esm({
   }
 });
 
+// src/plugins/guides/renderers/floating-arrow.ts
+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");
+}
+var STATIC_SIDE;
+var init_floating_arrow = __esm({
+  "src/plugins/guides/renderers/floating-arrow.ts"() {
+    STATIC_SIDE = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    };
+  }
+});
+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;
+}
+var HOVER_CLOSE_DELAY_MS, BadgeRenderer;
+var init_badge_renderer = __esm({
+  "src/plugins/guides/renderers/badge-renderer.ts"() {
+    init_block_builder();
+    init_guide_design();
+    init_inline_host();
+    init_wait_for_element();
+    init_base_renderer();
+    init_floating_arrow();
+    HOVER_CLOSE_DELAY_MS = 150;
+    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 dom.computePosition(badge, tooltip, {
+          strategy: "fixed",
+          placement: this.side,
+          middleware: [dom.offset(8), 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);
+      }
+    };
+  }
+});
+
+// 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;
+}
+var init_walkthrough_block_builder = __esm({
+  "src/plugins/guides/walkthrough-block-builder.ts"() {
+    init_block_builder();
+  }
+});
+
 // src/plugins/guides/renderers/banner-renderer.ts
+function bannerClassOf(position, embedded) {
+  return embedded ? "veo-banner veo-banner-embedded" : `veo-banner veo-banner-${position}`;
+}
 var BannerRenderer;
 var init_banner_renderer = __esm({
   "src/plugins/guides/renderers/banner-renderer.ts"() {
     init_block_builder();
+    init_inline_host();
+    init_wait_for_element();
     init_walkthrough_block_builder();
     init_base_renderer();
     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();
         };
@@ -1229,68 +1820,46 @@ var init_banner_renderer = __esm({
           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);
-  });
-}
-var init_wait_for_element = __esm({
-  "src/plugins/guides/wait-for-element.ts"() {
-    init_constants2();
-  }
-});
-
 // src/plugins/guides/renderers/custom-frame.ts
 function mountCustomFrame(doc, step, context, opts) {
   const iframe = doc.createElement("iframe");
@@ -1824,40 +2393,6 @@ var init_form_renderer = __esm({
   }
 });
 
-// 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);
-}
-var init_inline_host = __esm({
-  "src/plugins/guides/inline-host.ts"() {
-  }
-});
-
 // src/plugins/guides/renderers/inline-custom-renderer.ts
 var InlineCustomRenderer;
 var init_inline_custom_renderer = __esm({
@@ -1950,13 +2485,18 @@ var init_inline_renderer = __esm({
         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);
@@ -1965,7 +2505,7 @@ var init_inline_renderer = __esm({
         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" });
@@ -1978,6 +2518,9 @@ var init_inline_renderer = __esm({
 });
 
 // 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;
 var init_modal_renderer = __esm({
   "src/plugins/guides/renderers/modal-renderer.ts"() {
@@ -1985,6 +2528,10 @@ var init_modal_renderer = __esm({
     init_walkthrough_block_builder();
     init_base_renderer();
     ModalRenderer = class extends BaseRenderer {
+      constructor() {
+        super(...arguments);
+        this.overlay = null;
+      }
       render(context) {
         const idx = context.nav?.stepIndex ?? 0;
         const step = context.guide.guideSteps[idx];
@@ -1993,11 +2540,17 @@ var init_modal_renderer = __esm({
         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();
         };
@@ -2012,7 +2565,7 @@ var init_modal_renderer = __esm({
           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);
@@ -2022,7 +2575,7 @@ var init_modal_renderer = __esm({
           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")
           });
         }
@@ -2038,28 +2591,13 @@ var init_modal_renderer = __esm({
           context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
         }
       }
-    };
-  }
-});
-
-// src/plugins/guides/renderers/floating-arrow.ts
-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");
-}
-var STATIC_SIDE;
-var init_floating_arrow = __esm({
-  "src/plugins/guides/renderers/floating-arrow.ts"() {
-    STATIC_SIDE = {
-      top: "bottom",
-      bottom: "top",
-      left: "right",
-      right: "left"
+      onLiveUpdate(step) {
+        if (this.overlay) this.overlay.className = overlayClassOf(step);
+      }
+      destroy() {
+        this.overlay = null;
+        super.destroy();
+      }
     };
   }
 });
@@ -2091,18 +2629,19 @@ var init_tooltip_renderer = __esm({
         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")
         });
@@ -2135,7 +2674,7 @@ var init_tooltip_renderer = __esm({
         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({
@@ -2219,7 +2758,7 @@ var init_walkthrough_renderer = __esm({
 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);
@@ -2262,6 +2801,8 @@ function createSingleStepRenderer(type) {
       return new FormRenderer();
     case "inline-form":
       return new InlineFormRenderer();
+    case "badge":
+      return new BadgeRenderer();
     case "walkthrough":
       return null;
   }
@@ -2276,7 +2817,9 @@ var PREVIEW_GUIDE_ID, GuidePreviewController, activeController;
 var init_guide_preview = __esm({
   "src/plugins/guides/guide-preview.ts"() {
     init_safe_env();
+    init_badge_renderer();
     init_banner_renderer();
+    init_base_renderer();
     init_custom_renderer();
     init_form_renderer();
     init_inline_custom_renderer();
@@ -2300,14 +2843,26 @@ var init_guide_preview = __esm({
         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) {
@@ -2522,8 +3077,8 @@ function injectBuilderPanel(opts) {
     const ot = top;
     iframe.style.pointerEvents = "none";
     const move = (ev) => {
-      left = clamp2(ol + (ev.clientX - sx), 0, Math.max(0, window.innerWidth - card.offsetWidth));
-      top = clamp2(ot + (ev.clientY - sy), 0, Math.max(0, window.innerHeight - 40));
+      left = clamp3(ol + (ev.clientX - sx), 0, Math.max(0, window.innerWidth - card.offsetWidth));
+      top = clamp3(ot + (ev.clientY - sy), 0, Math.max(0, window.innerHeight - 40));
       card.style.left = `${left}px`;
       card.style.top = `${top}px`;
     };
@@ -2544,8 +3099,8 @@ function injectBuilderPanel(opts) {
     const sh = card.offsetHeight;
     iframe.style.pointerEvents = "none";
     const move = (ev) => {
-      card.style.width = `${clamp2(sw + (ev.clientX - sx), MIN_W, window.innerWidth)}px`;
-      card.style.height = `${clamp2(sh + (ev.clientY - sy), MIN_H, window.innerHeight)}px`;
+      card.style.width = `${clamp3(sw + (ev.clientX - sx), MIN_W, window.innerWidth)}px`;
+      card.style.height = `${clamp3(sh + (ev.clientY - sy), MIN_H, window.innerHeight)}px`;
     };
     const up = () => {
       window.removeEventListener("mousemove", move);
@@ -2564,7 +3119,7 @@ function injectBuilderPanel(opts) {
     }
   };
 }
-function clamp2(v, min, max) {
+function clamp3(v, min, max) {
   return Math.min(Math.max(v, min), max);
 }
 function buildPanelUrl(opts) {
@@ -2628,6 +3183,242 @@ var init_builder_panel = __esm({
   }
 });
 
+// src/plugins/builder/design-manipulator.ts
+function clamp4(v, min, max) {
+  return Math.min(Math.max(v, min), max);
+}
+function round3(v) {
+  return Math.round(v * 1e3) / 1e3;
+}
+function isInteractive(target) {
+  return Boolean(
+    target instanceof Element && target.closest("button, a, input, textarea, select, label")
+  );
+}
+function attachDesignManipulator(opts) {
+  const shadow = opts.host.shadowRoot;
+  if (!shadow) return null;
+  const card = shadow.querySelector(".veo-modal-card");
+  if (card) return attachModal(opts, shadow, card);
+  const banner = shadow.querySelector(".veo-banner");
+  if (banner && !banner.classList.contains("veo-banner-embedded")) {
+    return attachBanner(opts, shadow, banner);
+  }
+  return null;
+}
+function attachModal(opts, shadow, card) {
+  if (card.dataset.veoManipulated === "1") return null;
+  card.dataset.veoManipulated = "1";
+  card.classList.add("veo-mnp-card");
+  const doc = card.ownerDocument;
+  const style = doc.createElement("style");
+  style.textContent = MANIPULATOR_CSS;
+  shadow.appendChild(style);
+  const handles = [];
+  for (const dir of RESIZE_DIRS) {
+    const h = doc.createElement("div");
+    h.className = `veo-mnp-handle veo-mnp-${dir}`;
+    h.dataset.veoDir = dir;
+    card.appendChild(h);
+    handles.push(h);
+  }
+  let dragging = false;
+  let detached = false;
+  let patch = {};
+  const setVars = (v) => {
+    const host = opts.host;
+    if (v.px !== void 0) host.style.setProperty("--veo-pos-x", `${v.px * 100}%`);
+    if (v.py !== void 0) host.style.setProperty("--veo-pos-y", `${v.py * 100}%`);
+    if (v.w !== void 0) host.style.setProperty("--veo-width", `${v.w}px`);
+    if (v.h !== void 0) host.style.setProperty("--veo-min-h", `${v.h}px`);
+  };
+  const startGesture = (e, apply) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragging = true;
+    patch = {};
+    const start = card.getBoundingClientRect();
+    const sx = e.clientX;
+    const sy = e.clientY;
+    let raf = 0;
+    let lastEv = null;
+    const flush = () => {
+      raf = 0;
+      if (!lastEv) return;
+      const next = apply(lastEv.clientX - sx, lastEv.clientY - sy, start);
+      patch = { ...patch, ...next };
+      setVars({
+        ...next.posX !== void 0 ? { px: next.posX } : {},
+        ...next.posY !== void 0 ? { py: next.posY } : {},
+        ...next.width !== void 0 ? { w: next.width } : {},
+        ...next.height !== void 0 ? { h: next.height } : {}
+      });
+    };
+    const move = (ev) => {
+      lastEv = ev;
+      if (typeof window.requestAnimationFrame !== "function") flush();
+      else if (!raf) raf = window.requestAnimationFrame(flush);
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+      if (raf) window.cancelAnimationFrame(raf);
+      flush();
+      dragging = false;
+      if (Object.keys(patch).length > 0 && !detached) {
+        opts.onCommit({ stepIndex: opts.stepIndex, style: patch });
+      }
+      opts.onGestureEnd?.();
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  };
+  const posXFor = (left, w) => {
+    const span = window.innerWidth - w;
+    return span <= 0 ? 0.5 : round3(clamp4(left / span, 0, 1));
+  };
+  const posYFor = (top, h) => {
+    const span = window.innerHeight - h;
+    return span <= 0 ? 0.5 : round3(clamp4(top / span, 0, 1));
+  };
+  const onCardDown = (e) => {
+    if (isInteractive(e.target)) return;
+    if (e.target instanceof Element && e.target.closest(".veo-mnp-handle")) return;
+    startGesture(e, (dx, dy, start) => ({
+      posX: posXFor(start.left + dx, start.width),
+      posY: posYFor(start.top + dy, start.height)
+    }));
+  };
+  const onHandleDown = (e) => {
+    const dir = e.currentTarget.dataset.veoDir;
+    startGesture(e, (dx, dy, start) => {
+      const out = {};
+      if (dir.includes("e")) out.width = Math.round(clamp4(start.width + dx, MIN_W2, MAX_W));
+      if (dir.includes("w")) {
+        out.width = Math.round(clamp4(start.width - dx, MIN_W2, MAX_W));
+        out.posX = posXFor(start.right - out.width, out.width);
+      }
+      if (dir.includes("s")) out.height = Math.round(clamp4(start.height + dy, MIN_H2, MAX_H));
+      if (dir.includes("n")) {
+        out.height = Math.round(clamp4(start.height - dy, MIN_H2, MAX_H));
+        out.posY = posYFor(start.bottom - out.height, out.height);
+      }
+      return out;
+    });
+  };
+  card.addEventListener("mousedown", onCardDown);
+  for (const h of handles) h.addEventListener("mousedown", onHandleDown);
+  return {
+    isDragging: () => dragging,
+    detach: () => {
+      if (detached) return;
+      detached = true;
+      card.removeEventListener("mousedown", onCardDown);
+      for (const h of handles) h.remove();
+      style.remove();
+      card.classList.remove("veo-mnp-card");
+      delete card.dataset.veoManipulated;
+    }
+  };
+}
+function attachBanner(opts, shadow, banner) {
+  if (banner.dataset.veoManipulated === "1") return null;
+  banner.dataset.veoManipulated = "1";
+  banner.classList.add("veo-mnp-banner");
+  const doc = banner.ownerDocument;
+  const style = doc.createElement("style");
+  style.textContent = MANIPULATOR_CSS;
+  shadow.appendChild(style);
+  let dragging = false;
+  let detached = false;
+  const positionOf = () => banner.classList.contains("veo-banner-bottom") ? "bottom" : "top";
+  const onDown = (e) => {
+    if (isInteractive(e.target)) return;
+    e.preventDefault();
+    dragging = true;
+    const startPos = positionOf();
+    let current = startPos;
+    const move = (ev) => {
+      const next = ev.clientY < window.innerHeight / 2 ? "top" : "bottom";
+      if (next !== current) {
+        current = next;
+        banner.classList.remove("veo-banner-top", "veo-banner-bottom");
+        banner.classList.add(`veo-banner-${next}`);
+      }
+    };
+    const up = () => {
+      window.removeEventListener("mousemove", move);
+      window.removeEventListener("mouseup", up);
+      dragging = false;
+      if (current !== startPos && !detached) {
+        opts.onCommit({ stepIndex: opts.stepIndex, style: { position: current } });
+      }
+      opts.onGestureEnd?.();
+    };
+    window.addEventListener("mousemove", move);
+    window.addEventListener("mouseup", up);
+  };
+  banner.addEventListener("mousedown", onDown);
+  return {
+    isDragging: () => dragging,
+    detach: () => {
+      if (detached) return;
+      detached = true;
+      banner.removeEventListener("mousedown", onDown);
+      style.remove();
+      banner.classList.remove("veo-mnp-banner");
+      delete banner.dataset.veoManipulated;
+    }
+  };
+}
+var MIN_W2, MAX_W, MIN_H2, MAX_H, EDGE, RESIZE_DIRS, MANIPULATOR_CSS;
+var init_design_manipulator = __esm({
+  "src/plugins/builder/design-manipulator.ts"() {
+    MIN_W2 = 220;
+    MAX_W = 720;
+    MIN_H2 = 120;
+    MAX_H = 900;
+    EDGE = 8;
+    RESIZE_DIRS = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+    MANIPULATOR_CSS = `
+.veo-mnp-card {
+  outline: 1.5px dashed rgba(255, 91, 53, 0.75);
+  outline-offset: 2px;
+}
+.veo-mnp-card:hover { cursor: move; }
+.veo-mnp-handle {
+  position: absolute;
+  z-index: 10;
+  background: transparent;
+}
+.veo-mnp-handle::after {
+  content: '';
+  position: absolute;
+  width: 8px; height: 8px;
+  background: #fff;
+  border: 1.5px solid rgba(255, 91, 53, 0.9);
+  border-radius: 2px;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+.veo-mnp-card:hover .veo-mnp-handle::after,
+.veo-mnp-handle:hover::after { opacity: 1; }
+.veo-mnp-n  { top: -${EDGE / 2}px; left: ${EDGE}px; right: ${EDGE}px; height: ${EDGE}px; cursor: ns-resize; }
+.veo-mnp-s  { bottom: -${EDGE / 2}px; left: ${EDGE}px; right: ${EDGE}px; height: ${EDGE}px; cursor: ns-resize; }
+.veo-mnp-e  { right: -${EDGE / 2}px; top: ${EDGE}px; bottom: ${EDGE}px; width: ${EDGE}px; cursor: ew-resize; }
+.veo-mnp-w  { left: -${EDGE / 2}px; top: ${EDGE}px; bottom: ${EDGE}px; width: ${EDGE}px; cursor: ew-resize; }
+.veo-mnp-ne { top: -${EDGE / 2}px; right: -${EDGE / 2}px; width: ${EDGE * 1.5}px; height: ${EDGE * 1.5}px; cursor: nesw-resize; }
+.veo-mnp-nw { top: -${EDGE / 2}px; left: -${EDGE / 2}px; width: ${EDGE * 1.5}px; height: ${EDGE * 1.5}px; cursor: nwse-resize; }
+.veo-mnp-se { bottom: -${EDGE / 2}px; right: -${EDGE / 2}px; width: ${EDGE * 1.5}px; height: ${EDGE * 1.5}px; cursor: nwse-resize; }
+.veo-mnp-sw { bottom: -${EDGE / 2}px; left: -${EDGE / 2}px; width: ${EDGE * 1.5}px; height: ${EDGE * 1.5}px; cursor: nesw-resize; }
+.veo-mnp-banner { outline: 1.5px dashed rgba(255, 91, 53, 0.75); outline-offset: -2px; cursor: grab; }
+.veo-mnp-banner:active { cursor: grabbing; }
+`;
+  }
+});
+
 // src/plugins/builder/element-picker.ts
 function startElementPicker(options) {
   if (!hasDocument()) {
@@ -2841,10 +3632,35 @@ function initBuilderMode() {
   let picker = null;
   let panel = null;
   let staticTarget = null;
+  let manipulator = null;
+  let pendingPreview = null;
   const getTarget = () => panel ? panel.target() : staticTarget;
   const post = (event) => {
     getTarget()?.postMessage({ source: VEO_BUILDER_SOURCE, token, ...event }, dashboardOrigin);
   };
+  const applyPreview = (cmd) => {
+    manipulator?.detach();
+    manipulator = null;
+    const handle = previewGuide(cmd.guide);
+    if (!cmd.editable) return;
+    void handle.ready.then((result) => {
+      if (!result.rendered) return;
+      const host = handle.host();
+      if (!host) return;
+      manipulator = attachDesignManipulator({
+        host,
+        guideType: cmd.guide.guideType,
+        stepIndex: cmd.guide.startStepIndex ?? 0,
+        onCommit: (payload) => post({ type: "design-updated", payload }),
+        onGestureEnd: () => {
+          if (!pendingPreview) return;
+          const queued = pendingPreview;
+          pendingPreview = null;
+          applyPreview(queued);
+        }
+      });
+    });
+  };
   const handleCommand = (cmd) => {
     switch (cmd.type) {
       case "panel-ready":
@@ -2870,9 +3686,14 @@ function initBuilderMode() {
         picker = null;
         break;
       case "preview":
-        if (cmd.guide) void previewGuide(cmd.guide).ready;
+        if (!cmd.guide) break;
+        if (manipulator?.isDragging()) pendingPreview = cmd;
+        else applyPreview(cmd);
         break;
       case "close-preview":
+        manipulator?.detach();
+        manipulator = null;
+        pendingPreview = null;
         closeGuidePreview();
         break;
       case "teardown":
@@ -2892,6 +3713,9 @@ function initBuilderMode() {
     window.removeEventListener("pagehide", onPageHide);
     picker?.stop();
     picker = null;
+    manipulator?.detach();
+    manipulator = null;
+    pendingPreview = null;
     closeGuidePreview();
     post({ type: "closed" });
     panel?.teardown();
@@ -2971,6 +3795,7 @@ var init_builder_mode = __esm({
     init_guide_preview();
     init_bridge_protocol();
     init_builder_panel();
+    init_design_manipulator();
     init_element_picker();
   }
 });
@@ -3104,6 +3929,7 @@ var init_builder_session = __esm({
 // src/plugins/builder/index.ts
 var builder_exports = {};
 __export(builder_exports, {
+  attachDesignManipulator: () => attachDesignManipulator,
   createBuilderSession: () => createBuilderSession,
   initBuilderMode: () => initBuilderMode,
   startElementPicker: () => startElementPicker,
@@ -3113,6 +3939,7 @@ var init_builder = __esm({
   "src/plugins/builder/index.ts"() {
     init_builder_mode();
     init_builder_session();
+    init_design_manipulator();
     init_element_picker();
   }
 });
@@ -3379,8 +4206,8 @@ var DomListener = class {
     let depth = 0;
     while (current && current !== document.documentElement && depth < 5) {
       const tag = current.tagName.toLowerCase();
-      const isInteractive = tag === "button" || tag === "a" || tag === "input" || tag === "select" || tag === "textarea" || current.hasAttribute("data-veo-tag") || current.hasAttribute("role") || current.hasAttribute("onclick") || current instanceof HTMLElement && current.style.cursor === "pointer";
-      if (isInteractive) return current;
+      const isInteractive2 = tag === "button" || tag === "a" || tag === "input" || tag === "select" || tag === "textarea" || current.hasAttribute("data-veo-tag") || current.hasAttribute("role") || current.hasAttribute("onclick") || current instanceof HTMLElement && current.style.cursor === "pointer";
+      if (isInteractive2) return current;
       current = current.parentElement;
       depth++;
     }
@@ -3502,7 +4329,8 @@ var Queue = class {
       return;
     }
     this.retryCount++;
-    const delayMs = Math.min(1e3 * 2 ** (this.retryCount - 1), RETRY_MAX_DELAY_MS);
+    const base = Math.min(1e3 * 2 ** (this.retryCount - 1), RETRY_MAX_DELAY_MS);
+    const delayMs = base / 2 + Math.random() * (base / 2);
     if (this.retryTimer) clearTimeout(this.retryTimer);
     this.retryTimer = setTimeout(() => {
       void this.flush();
@@ -4181,6 +5009,7 @@ function toWire(payload) {
   if (typeof payload.stepIndex === "number") wire.stepPosition = payload.stepIndex;
   if (payload.pageUrl) wire.pageUrl = payload.pageUrl;
   if (payload.pagePath) wire.pagePath = payload.pagePath;
+  if (payload.metadata) wire.metadata = payload.metadata;
   return wire;
 }
 var GuideTrackerClient = class {
@@ -4228,6 +5057,8 @@ var GuideTrackerClient = class {
 };
 
 // src/plugins/guides/guide-tracker-queue.ts
+var RETRY_BASE_MS = 3e3;
+var RETRY_MAX_DELAY_MS2 = 3e4;
 var GuideTrackerQueue = class {
   constructor(config) {
     this.config = config;
@@ -4264,20 +5095,23 @@ var GuideTrackerQueue = class {
    */
   async flush() {
     if (this.flushing || this.buffer.length === 0) return;
+    const now = Date.now();
+    const due = this.buffer.filter((item) => (item.nextRetryAt ?? 0) <= now);
+    if (due.length === 0) return;
     this.flushing = true;
-    const batch = this.buffer.splice(0, this.buffer.length);
+    const dueSet = new Set(due);
+    this.buffer = this.buffer.filter((item) => !dueSet.has(item));
     const results = await Promise.allSettled(
-      batch.map(
-        (item) => this.config.client.send({ guideId: item.guideId, payload: item.payload })
-      )
+      due.map((item) => this.config.client.send({ guideId: item.guideId, payload: item.payload }))
     );
     for (let i = 0; i < results.length; i++) {
       const result = results[i];
-      const item = batch[i];
+      const item = due[i];
       if (!result || !item) continue;
       if (result.status === "fulfilled") continue;
       item.attempts += 1;
       if (item.attempts < this.config.maxRetries) {
+        item.nextRetryAt = Date.now() + this.retryDelayMs(item.attempts);
         this.buffer.push(item);
       } else {
         this.safeOnError(result.reason, item);
@@ -4285,6 +5119,15 @@ var GuideTrackerQueue = class {
     }
     this.flushing = false;
   }
+  /**
+   * Backoff exponencial (base = intervalo de flush) con equal-jitter: mitad
+   * fija + mitad aleatoria. Desincroniza los reintentos entre clientes ante
+   * una caída del backend.
+   */
+  retryDelayMs(attempts) {
+    const base = Math.min(RETRY_BASE_MS * 2 ** (attempts - 1), RETRY_MAX_DELAY_MS2);
+    return base / 2 + Math.random() * (base / 2);
+  }
   /**
    * Drena el buffer vía `sendBeacon`. Síncrono, sin retry. Para pagehide.
    */
@@ -4331,6 +5174,7 @@ var GuideTrackerQueue = class {
 };
 
 // src/plugins/guides/guides-controller.ts
+init_badge_renderer();
 init_banner_renderer();
 init_custom_renderer();
 init_form_renderer();
@@ -4458,6 +5302,7 @@ var WalkthroughStateManager = class {
 };
 
 // src/plugins/guides/guides-controller.ts
+var RESOLVE_CACHE_TTL_MS = 3e4;
 var STATUS_BY_ACTION = {
   shown: "shown",
   dismissed: "dismissed",
@@ -4484,6 +5329,10 @@ var GuidesController = class {
      */
     this.activeWalkthroughRenderer = null;
     this.activeWalkthroughGuide = null;
+    /** Última resolución cacheada (mismo `(endUserId, url)` → sin red). */
+    this.resolveCache = null;
+    /** Resolución idéntica en vuelo, para coalescer llamadas concurrentes. */
+    this.inflightResolve = null;
     this.debug = config.debug === true;
     this.apiUrl = config.apiUrl;
     this.apiKey = config.apiKey;
@@ -4535,7 +5384,7 @@ var GuidesController = class {
     }
     let guides;
     try {
-      guides = await this.resolver.resolve(endUserId, pageUrl);
+      guides = await this.resolveGuides(endUserId, pageUrl);
     } catch (err) {
       if (this.debug) console.error("[veo] guides resolver threw:", err);
       return;
@@ -4562,6 +5411,36 @@ var GuidesController = class {
       this.runSingleStepRender(guide, sessionId, pageUrl);
     }
   }
+  /**
+   * `resolve` con cache de corta duración + coalescing:
+   *   - Mismo `(endUserId, url)` resuelto hace < {@link RESOLVE_CACHE_TTL_MS} →
+   *     se reusa sin red. Colapsa el doble disparo identify+pageview y los
+   *     pageviews repetidos de una SPA hacia la misma URL.
+   *   - Si ya hay un resolve idéntico en vuelo, se espera ESE (no se abre otro).
+   * El re-render sigue siendo idempotente (dedupe por `activeByGuideId` +
+   * `frequencyCache`), así que reusar el resultado no duplica guías.
+   */
+  async resolveGuides(endUserId, pageUrl) {
+    const key = `${endUserId}
+${pageUrl}`;
+    const now = Date.now();
+    if (this.resolveCache?.key === key && now - this.resolveCache.at < RESOLVE_CACHE_TTL_MS) {
+      if (this.debug) console.log("[veo] guides: resolve cache hit");
+      return this.resolveCache.guides;
+    }
+    if (this.inflightResolve?.key === key) {
+      return this.inflightResolve.promise;
+    }
+    const promise = this.resolver.resolve(endUserId, pageUrl);
+    this.inflightResolve = { key, promise };
+    try {
+      const guides = await promise;
+      this.resolveCache = { key, at: Date.now(), guides };
+      return guides;
+    } finally {
+      if (this.inflightResolve?.key === key) this.inflightResolve = null;
+    }
+  }
   /** Cierra todas las guías activas, limpia cache de dispatch y para timers. */
   destroy() {
     for (const renderer of this.activeRenderers) {
@@ -4582,6 +5461,8 @@ var GuidesController = class {
       this.activeWalkthroughGuide = null;
     }
     this.dispatched.clear();
+    this.resolveCache = null;
+    this.inflightResolve = null;
     this.trackerQueue.destroy();
   }
   runSingleStepRender(guide, sessionId, pageUrl) {
@@ -4806,7 +5687,8 @@ var GuidesController = class {
    * por si el usuario se identificó después de que la guía apareció.
    */
   handleInteraction(guide, sessionId, pageUrl, event) {
-    const dedupKey = `${guide.guideId}:${event.action}`;
+    const buttonKey = event.metadata?.buttonId ? `:${event.metadata.buttonId}` : "";
+    const dedupKey = `${guide.guideId}:${event.action}${buttonKey}`;
     if (this.dispatched.has(dedupKey)) {
       if (this.debug) console.log(`[veo] guides: dedup hit ${dedupKey}`);
       return;
@@ -4828,7 +5710,8 @@ var GuidesController = class {
         action: event.action,
         stepIndex: event.stepIndex,
         pageUrl,
-        pagePath: extractPath(pageUrl)
+        pagePath: extractPath(pageUrl),
+        ...event.metadata ? { metadata: event.metadata } : {}
       }
     });
   }
@@ -4879,6 +5762,8 @@ var GuidesController = class {
         return new FormRenderer();
       case "inline-form":
         return new InlineFormRenderer();
+      case "badge":
+        return new BadgeRenderer();
       case "walkthrough":
         return null;
     }