veo-sdk 0.5.6 → 0.5.11

package/dist/index.cjs

@@ -696,6 +696,42 @@ function applyBlockStyle(el, style, kind) {
   if (typeof s.marginBottom === "number" && Number.isFinite(s.marginBottom)) {
     el.style.marginBottom = `${clampNum(s.marginBottom, 0, 64)}px`;
   }
+  if (kind !== "image") {
+    if (typeof s.fontSize === "number" && Number.isFinite(s.fontSize)) {
+      el.style.fontSize = `${clampNum(s.fontSize, 8, 96)}px`;
+    }
+    if (typeof s.fontFamily === "string" && s.fontFamily && s.fontFamily !== "inherit") {
+      el.style.fontFamily = s.fontFamily;
+    }
+    if (typeof s.fontWeight === "string" && s.fontWeight) el.style.fontWeight = s.fontWeight;
+    if (typeof s.textTransform === "string" && s.textTransform && s.textTransform !== "none") {
+      el.style.textTransform = s.textTransform;
+    }
+    if (typeof s.lineHeight === "number" && Number.isFinite(s.lineHeight)) {
+      el.style.lineHeight = `${clampNum(s.lineHeight, 50, 300)}%`;
+    }
+    if (typeof s.letterSpacing === "number" && Number.isFinite(s.letterSpacing)) {
+      el.style.letterSpacing = `${clampNum(s.letterSpacing, -5, 20)}px`;
+    }
+  }
+  if (typeof s.background === "string" && s.background) el.style.background = s.background;
+  if (typeof s.borderWidth === "number" && s.borderWidth > 0) {
+    const bc = typeof s.borderColor === "string" && s.borderColor ? s.borderColor : "#bbbbbb";
+    el.style.border = `${clampNum(s.borderWidth, 0, 20)}px solid ${bc}`;
+  }
+  if (kind !== "image" && typeof s.radius === "number" && Number.isFinite(s.radius)) {
+    el.style.borderRadius = `${clampNum(s.radius, 0, 64)}px`;
+  }
+  for (const side of ["Top", "Right", "Bottom", "Left"]) {
+    const p = s[`padding${side}`];
+    if (typeof p === "number" && Number.isFinite(p)) {
+      el.style.setProperty(`padding-${side.toLowerCase()}`, `${clampNum(p, 0, 128)}px`);
+    }
+    const m = s[`margin${side}`];
+    if (typeof m === "number" && Number.isFinite(m)) {
+      el.style.setProperty(`margin-${side.toLowerCase()}`, `${clampNum(m, 0, 128)}px`);
+    }
+  }
 }
 function createCloseButton(doc, onClose, className = "veo-guide-close") {
   const closeBtn = doc.createElement("button");
@@ -1950,191 +1986,6 @@ var init_banner_renderer = __esm({
     };
   }
 });
-function inlinePosOf(p) {
-  return p === "before" || p === "prepend" || p === "append" ? p : "after";
-}
-function applyViewportPosition(card, position) {
-  const s = card.style;
-  s.position = "fixed";
-  const M = "16px";
-  const v = position.includes("top") ? "top" : position.includes("bottom") ? "bottom" : "middle";
-  const h = position.includes("left") ? "left" : position.includes("right") ? "right" : "middle";
-  if (position === "center") {
-    s.top = "50%";
-    s.left = "50%";
-    s.transform = "translate(-50%, -50%)";
-    return;
-  }
-  if (v === "top") s.top = M;
-  else if (v === "bottom") s.bottom = M;
-  else {
-    s.top = "50%";
-    s.transform = "translateY(-50%)";
-  }
-  if (h === "left") s.left = M;
-  else if (h === "right") s.right = M;
-  else {
-    s.left = "50%";
-    s.transform = `${s.transform} translateX(-50%)`.trim();
-  }
-}
-async function anchorPosition(anchor, wrapper) {
-  const update = async () => {
-    const { x, y } = await dom.computePosition(anchor, wrapper, {
-      placement: "bottom",
-      strategy: "fixed",
-      middleware: [dom.offset(8), dom.flip(), dom.shift({ padding: 8 })]
-    });
-    wrapper.style.left = `${x}px`;
-    wrapper.style.top = `${y}px`;
-  };
-  await update();
-  const reposition = () => void update();
-  window.addEventListener("scroll", reposition, true);
-  window.addEventListener("resize", reposition);
-  return () => {
-    window.removeEventListener("scroll", reposition, true);
-    window.removeEventListener("resize", reposition);
-  };
-}
-function applyCompositeDesign(card, design) {
-  const s = card.style;
-  const px = (v) => typeof v === "number" && Number.isFinite(v) ? `${v}px` : null;
-  const strv = (v) => typeof v === "string" && v ? v : null;
-  if (strv(design.background)) s.background = design.background;
-  if (strv(design.textColor)) s.color = design.textColor;
-  if (px(design.fontSize)) s.fontSize = px(design.fontSize);
-  if (strv(design.fontWeight)) s.fontWeight = design.fontWeight;
-  if (strv(design.align)) s.textAlign = design.align;
-  if (typeof design.lineHeight === "number") s.lineHeight = `${design.lineHeight}%`;
-  if (px(design.radius)) s.borderRadius = px(design.radius);
-  if (px(design.width)) s.width = px(design.width);
-  const bw = px(design.borderWidth);
-  if (bw) s.border = `${bw} solid ${strv(design.borderColor) ?? "#e5e5e5"}`;
-  for (const side of ["Top", "Right", "Bottom", "Left"]) {
-    const p = px(design[`padding${side}`]);
-    if (p) s.setProperty(`padding-${side.toLowerCase()}`, p);
-    const m = px(design[`margin${side}`]);
-    if (m) s.setProperty(`margin-${side.toLowerCase()}`, m);
-  }
-}
-var CompositeRenderer;
-var init_composite_renderer = __esm({
-  "src/plugins/guides/renderers/composite-renderer.ts"() {
-    init_block_builder();
-    init_inline_host();
-    init_wait_for_element();
-    init_base_renderer();
-    CompositeRenderer = class extends BaseRenderer {
-      async render(context) {
-        const idx = context.nav?.stepIndex ?? 0;
-        const step = context.guide.guideSteps[idx];
-        if (!step) return;
-        const anchorSelector = step.position === "relative-to-element" || step.presentation === "inline" ? step.anchorSelector?.trim() || void 0 : void 0;
-        let anchor = null;
-        if (anchorSelector) {
-          anchor = await waitForElement(anchorSelector);
-          if (!anchor) return;
-        }
-        const { host, root } = this.createHost();
-        const doc = root.ownerDocument ?? document;
-        const card = doc.createElement("div");
-        card.className = "veo-card";
-        applyCompositeDesign(card, step.design ?? {});
-        const dismiss = (action, meta) => {
-          context.onInteraction({
-            guideId: context.guide.guideId,
-            stepIndex: idx,
-            action,
-            ...meta?.id ? { metadata: { buttonId: meta.id } } : {}
-          });
-        };
-        const synthetic = { blocks: step.blocks ?? [] };
-        for (const node of buildContentNodes(synthetic, doc)) card.appendChild(node);
-        const buttons = (step.blocks ?? []).filter((b) => b.type === "button");
-        if (buttons.length) {
-          const row = doc.createElement("div");
-          row.className = "veo-guide-actions";
-          for (const b of buttons) row.appendChild(this.buildButton(b, doc, context, dismiss));
-          card.appendChild(row);
-        }
-        card.appendChild(
-          createCloseButton(doc, () => {
-            dismiss("dismissed");
-            this.closeOrSkip(context);
-          })
-        );
-        if (step.presentation === "inline" && anchor) {
-          host.style.display = "block";
-          const pos = inlinePosOf(step.inlinePosition);
-          root.appendChild(card);
-          insertHost(anchor, host, pos);
-          this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
-        } else if (step.position === "relative-to-element" && anchor) {
-          const wrapper = doc.createElement("div");
-          wrapper.className = "veo-composite-anchored";
-          wrapper.appendChild(card);
-          root.appendChild(wrapper);
-          this.registerCleanup(await anchorPosition(anchor, wrapper));
-        } else {
-          const overlay = doc.createElement("div");
-          overlay.className = "veo-composite-overlay";
-          if (step.position === "center" && step.design?.backdrop !== false) {
-            overlay.classList.add("veo-composite-overlay--dim");
-            overlay.addEventListener("click", (e) => {
-              if (e.target === overlay) {
-                dismiss("dismissed");
-                this.closeOrSkip(context);
-              }
-            });
-          }
-          applyViewportPosition(card, step.position);
-          overlay.appendChild(card);
-          root.appendChild(overlay);
-        }
-        context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
-      }
-      /** Botón con enrutado de acción (navegación / cierre / url / guía). */
-      buildButton(block, doc, context, emit) {
-        const btn = doc.createElement("button");
-        btn.type = "button";
-        btn.className = "veo-guide-cta";
-        btn.textContent = block.text?.trim() || "OK";
-        btn.addEventListener("click", () => {
-          emit("cta_clicked", block);
-          const nav = context.nav?.callbacks;
-          switch (block.action) {
-            case "next":
-            case "submit-forms":
-            case "submit-forms-advance":
-              if (nav) nav.onNext();
-              else context.onClose();
-              break;
-            case "prev":
-              nav?.onBack();
-              break;
-            case "url":
-              if (typeof block.url === "string" && isSafeUrl(block.url)) {
-                window.open(block.url, "_blank", "noopener,noreferrer");
-              }
-              break;
-            case "guide":
-              if (block.targetGuideId) context.onOpenGuide?.(block.targetGuideId);
-              this.closeOrSkip(context);
-              break;
-            default:
-              this.closeOrSkip(context);
-          }
-        });
-        return btn;
-      }
-      closeOrSkip(context) {
-        if (context.nav?.callbacks) context.nav.callbacks.onSkip();
-        else context.onClose();
-      }
-    };
-  }
-});
 
 // src/plugins/guides/renderers/custom-frame.ts
 function mountCustomFrame(doc, step, context, opts) {
@@ -2273,91 +2124,58 @@ var init_custom_frame = __esm({
     MAX_HOST_CSS = 800 * 1024;
   }
 });
-function applyFloatingPosition(wrapper, placement) {
-  const position = placement.position ?? "bottom-right";
-  const ox = `${placement.offsetX ?? DEFAULT_OFFSET}px`;
-  const oy = `${placement.offsetY ?? DEFAULT_OFFSET}px`;
-  const s = wrapper.style;
-  if (position === "center") {
-    s.top = "50%";
-    s.left = "50%";
-    s.transform = "translate(-50%, -50%)";
-    return;
-  }
-  const [vertical, horizontal] = position.split("-");
-  if (vertical === "top") s.top = oy;
-  else s.bottom = oy;
-  if (horizontal === "left") {
-    s.left = ox;
-  } else if (horizontal === "right") {
-    s.right = ox;
-  } else {
-    s.left = "50%";
-    s.transform = "translateX(-50%)";
+
+// src/plugins/guides/code-block.ts
+function mountCodeBlock(block, doc, context) {
+  if (block.sandboxed) {
+    const step = { html: block.html ?? "", css: block.css, js: block.js };
+    const { iframe, cleanup } = mountCustomFrame(doc, step, context, { width: "100%" });
+    const wrapper = doc.createElement("div");
+    wrapper.className = "veo-code-sandbox";
+    wrapper.appendChild(iframe);
+    return { node: wrapper, cleanup };
+  }
+  const hostDoc = doc;
+  const injected = [];
+  if (typeof block.css === "string" && block.css.trim()) {
+    const style = hostDoc.createElement("style");
+    style.textContent = block.css;
+    hostDoc.head.appendChild(style);
+    injected.push(style);
+  }
+  let node = null;
+  if (typeof block.html === "string" && block.html.trim()) {
+    node = doc.createElement("div");
+    node.className = "veo-code-html";
+    node.innerHTML = block.html;
+    for (const old of Array.from(node.querySelectorAll("script"))) {
+      injected.push(runScript(old, hostDoc));
+      old.remove();
+    }
+  }
+  if (typeof block.js === "string" && block.js.trim()) {
+    const s = hostDoc.createElement("script");
+    s.textContent = block.js;
+    hostDoc.body.appendChild(s);
+    injected.push(s);
   }
+  return {
+    node,
+    cleanup: () => {
+      for (const n of injected) n.parentNode?.removeChild(n);
+    }
+  };
 }
-var DEFAULT_PLACEMENT, DEFAULT_OFFSET, DEFAULT_WIDTH, CustomRenderer;
-var init_custom_renderer = __esm({
-  "src/plugins/guides/renderers/custom-renderer.ts"() {
-    init_wait_for_element();
-    init_base_renderer();
+function runScript(old, hostDoc) {
+  const s = hostDoc.createElement("script");
+  for (const attr of Array.from(old.attributes)) s.setAttribute(attr.name, attr.value);
+  if (!old.src) s.textContent = old.textContent;
+  hostDoc.body.appendChild(s);
+  return s;
+}
+var init_code_block = __esm({
+  "src/plugins/guides/code-block.ts"() {
     init_custom_frame();
-    DEFAULT_PLACEMENT = { mode: "floating", position: "bottom-right" };
-    DEFAULT_OFFSET = 16;
-    DEFAULT_WIDTH = 360;
-    CustomRenderer = class extends BaseRenderer {
-      async render(context) {
-        const step = context.guide.guideSteps[0];
-        if (!step || typeof step.html !== "string" || step.html.length === 0) return;
-        const placement = step.placement ?? DEFAULT_PLACEMENT;
-        let anchor = null;
-        if (placement.mode === "anchored") {
-          const selector = placement.selector ?? step.selector ?? context.guide.activationRules.selector;
-          if (typeof selector !== "string" || selector.length === 0) return;
-          anchor = await waitForElement(selector);
-          if (!anchor) return;
-        }
-        const { root } = this.createHost();
-        const doc = root.ownerDocument ?? document;
-        const wrapper = doc.createElement("div");
-        wrapper.className = placement.mode === "anchored" ? "veo-custom-anchored" : "veo-custom-floating";
-        const { iframe, cleanup } = mountCustomFrame(doc, step, context, {
-          width: toCssSize(placement.width ?? DEFAULT_WIDTH),
-          fixedHeight: placement.height ?? null
-        });
-        this.registerCleanup(cleanup);
-        wrapper.appendChild(iframe);
-        root.appendChild(wrapper);
-        if (placement.mode === "floating") {
-          applyFloatingPosition(wrapper, placement);
-        } else if (anchor) {
-          this.registerCleanup(await this.setupAnchoredPosition(anchor, wrapper, placement));
-        }
-        context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
-      }
-      async setupAnchoredPosition(anchor, wrapper, placement) {
-        const side = placement.side ?? "bottom";
-        const update = async () => {
-          const { x, y } = await dom.computePosition(anchor, wrapper, {
-            placement: side,
-            strategy: "fixed",
-            middleware: [dom.offset(placement.offsetY ?? 8), dom.flip(), dom.shift({ padding: 8 })]
-          });
-          wrapper.style.left = `${x}px`;
-          wrapper.style.top = `${y}px`;
-        };
-        await update();
-        const reposition = () => {
-          void update();
-        };
-        window.addEventListener("scroll", reposition, true);
-        window.addEventListener("resize", reposition);
-        return () => {
-          window.removeEventListener("scroll", reposition, true);
-          window.removeEventListener("resize", reposition);
-        };
-      }
-    };
   }
 });
 
@@ -2541,93 +2359,568 @@ function buildField(field, doc) {
         optionLabel.appendChild(text);
         group.appendChild(optionLabel);
       }
-      wrapper.appendChild(group);
-      return {
-        wrapper,
-        read: () => {
-          const values = inputs.filter((i) => i.checked).map((i) => i.value);
-          return values.length > 0 ? values : void 0;
+      wrapper.appendChild(group);
+      return {
+        wrapper,
+        read: () => {
+          const values = inputs.filter((i) => i.checked).map((i) => i.value);
+          return values.length > 0 ? values : void 0;
+        }
+      };
+    }
+    case "checkbox": {
+      const optionLabel = doc.createElement("label");
+      optionLabel.className = "veo-form-option";
+      const checkbox = doc.createElement("input");
+      checkbox.type = "checkbox";
+      const text = doc.createElement("span");
+      text.textContent = field.placeholder || "S\xED";
+      optionLabel.appendChild(checkbox);
+      optionLabel.appendChild(text);
+      wrapper.appendChild(optionLabel);
+      return { wrapper, read: () => checkbox.checked ? true : field.required ? "" : false };
+    }
+    case "yesno": {
+      const group = doc.createElement("div");
+      group.className = "veo-form-options";
+      const name = `veo-${field.key}`;
+      const [yesLabel, noLabel] = field.options?.length === 2 ? field.options : ["S\xED", "No"];
+      const inputs = [];
+      for (const { label: optText, value } of [
+        { label: yesLabel, value: true },
+        { label: noLabel, value: false }
+      ]) {
+        const optionLabel = doc.createElement("label");
+        optionLabel.className = "veo-form-option";
+        const radio = doc.createElement("input");
+        radio.type = "radio";
+        radio.name = name;
+        inputs.push({ input: radio, value });
+        const text = doc.createElement("span");
+        text.textContent = optText;
+        optionLabel.appendChild(radio);
+        optionLabel.appendChild(text);
+        group.appendChild(optionLabel);
+      }
+      wrapper.appendChild(group);
+      return { wrapper, read: () => inputs.find((i) => i.input.checked)?.value };
+    }
+    case "nps":
+      return buildScale(wrapper, doc, 0, 10, "veo-nps-btn");
+    case "rating":
+      return buildScale(wrapper, doc, 1, 5, "veo-rating-btn", "\u2605");
+    default: {
+      const input = doc.createElement("input");
+      input.type = "text";
+      input.className = "veo-form-input";
+      if (field.placeholder) input.placeholder = field.placeholder;
+      wrapper.appendChild(input);
+      return { wrapper, read: () => input.value.trim() };
+    }
+  }
+}
+function buildScale(wrapper, doc, min, max, btnClass, symbol) {
+  const row = doc.createElement("div");
+  row.className = "veo-form-scale";
+  let selected;
+  const buttons = [];
+  for (let n = min; n <= max; n++) {
+    const btn = doc.createElement("button");
+    btn.type = "button";
+    btn.className = btnClass;
+    btn.textContent = symbol ?? String(n);
+    btn.setAttribute("aria-label", String(n));
+    btn.addEventListener("click", () => {
+      selected = n;
+      buttons.forEach((b, i) => {
+        const active2 = symbol ? i + min <= n : i + min === n;
+        b.classList.toggle("veo-scale-active", active2);
+      });
+    });
+    buttons.push(btn);
+    row.appendChild(btn);
+  }
+  wrapper.appendChild(row);
+  return { wrapper, read: () => selected };
+}
+var init_form_content = __esm({
+  "src/plugins/guides/form-content.ts"() {
+    init_block_builder();
+  }
+});
+function inlinePosOf(p) {
+  return p === "before" || p === "prepend" || p === "append" ? p : "after";
+}
+function applyViewportPosition(card, position, design) {
+  const s = card.style;
+  s.position = "fixed";
+  const M = "16px";
+  const hAlign = design.hAlign === "left" ? "left" : design.hAlign === "right" ? "right" : null;
+  const v = position.includes("top") ? "top" : position.includes("bottom") ? "bottom" : "middle";
+  const h = hAlign ?? (position.includes("left") ? "left" : position.includes("right") ? "right" : "middle");
+  if (v === "top") s.top = M;
+  else if (v === "bottom") s.bottom = M;
+  else s.top = "50%";
+  if (h === "left") s.left = M;
+  else if (h === "right") s.right = M;
+  else s.left = "50%";
+  const tx = h === "middle" ? "-50%" : "0";
+  const ty = v === "middle" ? "-50%" : "0";
+  s.transform = tx === "0" && ty === "0" ? "" : `translate(${tx}, ${ty})`;
+}
+function makeCaret(doc, design) {
+  const caret = doc.createElement("div");
+  caret.className = "veo-composite-caret";
+  const w = typeof design.caretWidth === "number" ? design.caretWidth : 12;
+  const h = typeof design.caretHeight === "number" ? design.caretHeight : 12;
+  const s = caret.style;
+  s.position = "absolute";
+  s.width = `${w}px`;
+  s.height = `${h}px`;
+  s.transform = "rotate(45deg)";
+  s.background = typeof design.background === "string" ? design.background : "#ffffff";
+  if (typeof design.borderWidth === "number" && design.borderWidth > 0) {
+    const bc = typeof design.borderColor === "string" ? design.borderColor : "#bbbbbb";
+    s.border = `${design.borderWidth}px solid ${bc}`;
+  }
+  return caret;
+}
+function liftTarget(anchor, zIndex) {
+  const el = anchor;
+  const prevPosition = el.style.position;
+  const prevZ = el.style.zIndex;
+  if (getComputedStyle(el).position === "static") el.style.position = "relative";
+  el.style.zIndex = String(zIndex);
+  return () => {
+    el.style.position = prevPosition;
+    el.style.zIndex = prevZ;
+  };
+}
+async function anchorPosition(anchor, wrapper, caret) {
+  const update = async () => {
+    const { x, y, placement, middlewareData } = await dom.computePosition(anchor, wrapper, {
+      placement: "bottom",
+      strategy: "fixed",
+      middleware: [
+        dom.offset(caret ? 10 : 8),
+        dom.flip(),
+        dom.shift({ padding: 8 }),
+        ...caret ? [dom.arrow({ element: caret })] : []
+      ]
+    });
+    wrapper.style.left = `${x}px`;
+    wrapper.style.top = `${y}px`;
+    if (caret) positionArrow(caret, placement, middlewareData.arrow);
+  };
+  await update();
+  const reposition = () => void update();
+  window.addEventListener("scroll", reposition, true);
+  window.addEventListener("resize", reposition);
+  return () => {
+    window.removeEventListener("scroll", reposition, true);
+    window.removeEventListener("resize", reposition);
+  };
+}
+function applyCompositeDesign(card, design) {
+  const s = card.style;
+  const px = (v) => typeof v === "number" && Number.isFinite(v) ? `${v}px` : null;
+  const strv = (v) => typeof v === "string" && v ? v : null;
+  if (strv(design.background)) s.background = design.background;
+  const textColor = strv(design.color) ?? strv(design.textColor);
+  if (textColor) s.color = textColor;
+  if (px(design.fontSize)) s.fontSize = px(design.fontSize);
+  if (strv(design.fontWeight)) s.fontWeight = design.fontWeight;
+  if (strv(design.fontFamily) && design.fontFamily !== "inherit") {
+    s.fontFamily = design.fontFamily;
+  }
+  if (strv(design.textTransform) && design.textTransform !== "none") {
+    s.textTransform = design.textTransform;
+  }
+  if (typeof design.letterSpacing === "number") s.letterSpacing = `${design.letterSpacing}px`;
+  if (strv(design.align)) s.textAlign = design.align;
+  if (typeof design.lineHeight === "number") s.lineHeight = `${design.lineHeight}%`;
+  if (px(design.radius)) s.borderRadius = px(design.radius);
+  const bw = px(design.borderWidth);
+  if (bw) s.border = `${bw} solid ${strv(design.borderColor) ?? "#e5e5e5"}`;
+  if (strv(design.shadowColor) || typeof design.shadowBlur === "number") {
+    const n = (k) => typeof design[k] === "number" ? design[k] : 0;
+    s.boxShadow = `${n("shadowX")}px ${n("shadowY")}px ${n("shadowBlur")}px ${n("shadowSpread")}px ${strv(design.shadowColor) ?? "rgba(0,0,0,0.2)"}`;
+  }
+  if (design.fullWidth === true) {
+    s.width = "100%";
+  } else if (design.widthType === "fluid") {
+    s.width = "auto";
+    if (px(design.width)) s.maxWidth = px(design.width);
+  } else if (px(design.width)) {
+    s.width = px(design.width);
+  }
+  for (const side of ["Top", "Right", "Bottom", "Left"]) {
+    const p = px(design[`padding${side}`]);
+    if (p) s.setProperty(`padding-${side.toLowerCase()}`, p);
+    const m = px(design[`margin${side}`]);
+    if (m) s.setProperty(`margin-${side.toLowerCase()}`, m);
+  }
+}
+var CompositeRenderer;
+var init_composite_renderer = __esm({
+  "src/plugins/guides/renderers/composite-renderer.ts"() {
+    init_block_builder();
+    init_code_block();
+    init_form_content();
+    init_inline_host();
+    init_wait_for_element();
+    init_badge_renderer();
+    init_base_renderer();
+    init_floating_arrow();
+    CompositeRenderer = class extends BaseRenderer {
+      constructor() {
+        super(...arguments);
+        /** Delegado para pasos `badge` (reusa el BadgeRenderer con un step sintético). */
+        this.badgeDelegate = null;
+      }
+      async render(context) {
+        const idx = context.nav?.stepIndex ?? 0;
+        const step = context.guide.guideSteps[idx];
+        if (!step) return;
+        if (step.presentation === "badge") {
+          const syntheticStep = {
+            title: "",
+            content: "",
+            selector: step.anchorSelector ?? void 0,
+            blocks: step.blocks ?? [],
+            style: {
+              ...step.design ?? {},
+              ...step.badge ? { badge: step.badge } : {},
+              ...step.badgeTrigger ? { badgeTrigger: step.badgeTrigger } : {}
+            }
+          };
+          const syntheticGuide = {
+            ...context.guide,
+            guideSteps: [syntheticStep]
+          };
+          const { nav: _nav, ...rest } = context;
+          this.badgeDelegate = new BadgeRenderer();
+          await this.badgeDelegate.render({ ...rest, guide: syntheticGuide });
+          return;
+        }
+        const anchorSelector = step.position === "relative-to-element" || step.presentation === "inline" ? step.anchorSelector?.trim() || void 0 : void 0;
+        let anchor = null;
+        if (anchorSelector) {
+          anchor = await waitForElement(anchorSelector);
+          if (!anchor) return;
+        }
+        const { host, root } = this.createHost();
+        const doc = root.ownerDocument ?? document;
+        const design = step.design ?? {};
+        if (typeof design.zIndex === "number") host.style.zIndex = String(design.zIndex);
+        const card = doc.createElement("div");
+        card.className = "veo-card";
+        applyCompositeDesign(card, design);
+        const dismiss = (action, meta) => {
+          context.onInteraction({
+            guideId: context.guide.guideId,
+            stepIndex: idx,
+            action,
+            ...{}
+          });
+        };
+        const readers = [];
+        this.buildContent(card, step.blocks ?? [], doc, context, idx, readers);
+        if (design.closeButton !== false) {
+          const closeBtn = createCloseButton(doc, () => {
+            dismiss("dismissed");
+            this.closeOrSkip(context);
+          });
+          const closeColor = typeof design.closeColor === "string" ? design.closeColor : null;
+          const hoverColor = typeof design.closeHoverColor === "string" ? design.closeHoverColor : null;
+          if (closeColor) closeBtn.style.color = closeColor;
+          if (hoverColor) {
+            closeBtn.addEventListener("mouseenter", () => {
+              closeBtn.style.color = hoverColor;
+            });
+            closeBtn.addEventListener("mouseleave", () => {
+              closeBtn.style.color = closeColor ?? "";
+            });
+          }
+          card.appendChild(closeBtn);
+        }
+        if (step.presentation === "inline" && anchor) {
+          host.style.display = "block";
+          const pos = inlinePosOf(step.inlinePosition);
+          root.appendChild(card);
+          insertHost(anchor, host, pos);
+          this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+        } else if (step.position === "relative-to-element" && anchor) {
+          if (design.backdrop === true) {
+            const bg = doc.createElement("div");
+            bg.className = "veo-composite-overlay veo-composite-overlay--dim";
+            if (typeof design.backdropColor === "string") bg.style.background = design.backdropColor;
+            const bz = typeof design.backdropZIndex === "number" ? design.backdropZIndex : 2e5;
+            bg.style.zIndex = String(bz);
+            root.appendChild(bg);
+            if (design.targetAbove === true) this.registerCleanup(liftTarget(anchor, bz + 1));
+          }
+          const wrapper = doc.createElement("div");
+          wrapper.className = "veo-composite-anchored";
+          const caretEl = design.caret === false ? null : makeCaret(doc, design);
+          if (caretEl) wrapper.appendChild(caretEl);
+          wrapper.appendChild(card);
+          root.appendChild(wrapper);
+          this.registerCleanup(await anchorPosition(anchor, wrapper, caretEl));
+        } else {
+          const overlay = doc.createElement("div");
+          overlay.className = "veo-composite-overlay";
+          if (step.position === "center" && design.backdrop !== false) {
+            overlay.classList.add("veo-composite-overlay--dim");
+            if (typeof design.backdropColor === "string") {
+              overlay.style.background = design.backdropColor;
+            }
+            if (typeof design.backdropZIndex === "number") {
+              overlay.style.zIndex = String(design.backdropZIndex);
+            }
+            overlay.addEventListener("click", (e) => {
+              if (e.target === overlay) {
+                dismiss("dismissed");
+                this.closeOrSkip(context);
+              }
+            });
+          }
+          applyViewportPosition(card, step.position, design);
+          overlay.appendChild(card);
+          root.appendChild(overlay);
+        }
+        context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
+      }
+      /** Recorre los bloques en orden y los pinta en la card. */
+      buildContent(card, blocks, doc, context, idx, readers) {
+        const emit = (block) => {
+          context.onInteraction({
+            guideId: context.guide.guideId,
+            stepIndex: idx,
+            action: "cta_clicked",
+            ...block.id ? { metadata: { buttonId: block.id } } : {}
+          });
+        };
+        let i = 0;
+        while (i < blocks.length) {
+          const b = blocks[i];
+          if (!b) {
+            i++;
+            continue;
+          }
+          if (b.type === "button") {
+            const row = doc.createElement("div");
+            row.className = "veo-guide-actions";
+            while (i < blocks.length && blocks[i]?.type === "button") {
+              row.appendChild(
+                this.buildButton(blocks[i], doc, context, idx, readers, emit)
+              );
+              i++;
+            }
+            card.appendChild(row);
+            continue;
+          }
+          if (b.type === "code") {
+            const { node: node2, cleanup } = mountCodeBlock(b, doc, context);
+            if (node2) card.appendChild(node2);
+            this.registerCleanup(cleanup);
+            i++;
+            continue;
+          }
+          if (b.type === "form") {
+            const form = doc.createElement("div");
+            form.className = "veo-form";
+            for (const field of b.fields ?? []) {
+              const { wrapper, read } = buildField(field, doc);
+              readers.push({ field, read });
+              form.appendChild(wrapper);
+            }
+            card.appendChild(form);
+            i++;
+            continue;
+          }
+          const node = buildContentBlock(b, doc);
+          if (node) card.appendChild(node);
+          i++;
+        }
+      }
+      /** Botón con enrutado de acción (navegación / cierre / url / guía / envío de forms). */
+      buildButton(block, doc, context, idx, readers, emit) {
+        const btn = doc.createElement("button");
+        btn.type = "button";
+        btn.className = "veo-guide-cta";
+        btn.textContent = block.text?.trim() || "OK";
+        const nav = context.nav?.callbacks;
+        btn.addEventListener("click", () => {
+          switch (block.action) {
+            case "next":
+              emit(block);
+              if (nav) nav.onNext();
+              else context.onClose();
+              break;
+            case "prev":
+              emit(block);
+              nav?.onBack();
+              break;
+            case "url":
+              emit(block);
+              if (typeof block.url === "string" && isSafeUrl(block.url)) {
+                window.open(block.url, "_blank", "noopener,noreferrer");
+              }
+              break;
+            case "guide":
+              emit(block);
+              if (block.targetGuideId) context.onOpenGuide?.(block.targetGuideId);
+              this.closeOrSkip(context);
+              break;
+            case "submit-forms":
+            case "submit-forms-advance":
+            case "submit-forms-goto":
+              this.submitForms(readers, context, idx, btn, () => {
+                emit(block);
+                if (block.action === "submit-forms" || !nav) {
+                  context.onClose();
+                } else if (block.action === "submit-forms-goto" && typeof block.targetStep === "number" && nav.onGoto) {
+                  nav.onGoto(block.targetStep);
+                } else {
+                  nav.onNext();
+                }
+              });
+              break;
+            default:
+              emit(block);
+              this.closeOrSkip(context);
+          }
+        });
+        return btn;
+      }
+      /** Recoge respuestas de todos los form-blocks del paso, valida y envía. */
+      submitForms(readers, context, idx, btn, onDone) {
+        const answers = {};
+        for (const { field, read } of readers) {
+          const value = read();
+          const empty = value === void 0 || value === null || value === "";
+          if (empty) {
+            if (field.required) {
+              btn.textContent = `Completa "${field.label}"`;
+              return;
+            }
+            continue;
+          }
+          answers[field.key] = value;
         }
-      };
-    }
-    case "checkbox": {
-      const optionLabel = doc.createElement("label");
-      optionLabel.className = "veo-form-option";
-      const checkbox = doc.createElement("input");
-      checkbox.type = "checkbox";
-      const text = doc.createElement("span");
-      text.textContent = field.placeholder || "S\xED";
-      optionLabel.appendChild(checkbox);
-      optionLabel.appendChild(text);
-      wrapper.appendChild(optionLabel);
-      return { wrapper, read: () => checkbox.checked ? true : field.required ? "" : false };
-    }
-    case "yesno": {
-      const group = doc.createElement("div");
-      group.className = "veo-form-options";
-      const name = `veo-${field.key}`;
-      const [yesLabel, noLabel] = field.options?.length === 2 ? field.options : ["S\xED", "No"];
-      const inputs = [];
-      for (const { label: optText, value } of [
-        { label: yesLabel, value: true },
-        { label: noLabel, value: false }
-      ]) {
-        const optionLabel = doc.createElement("label");
-        optionLabel.className = "veo-form-option";
-        const radio = doc.createElement("input");
-        radio.type = "radio";
-        radio.name = name;
-        inputs.push({ input: radio, value });
-        const text = doc.createElement("span");
-        text.textContent = optText;
-        optionLabel.appendChild(radio);
-        optionLabel.appendChild(text);
-        group.appendChild(optionLabel);
+        if (readers.length > 0 && Object.keys(answers).length === 0) return;
+        btn.disabled = true;
+        const submitFn = context.onFormSubmit ?? (() => Promise.resolve(true));
+        void submitFn(answers).then((ok) => {
+          btn.disabled = false;
+          if (!ok) return;
+          context.onInteraction({
+            guideId: context.guide.guideId,
+            stepIndex: idx,
+            action: "completed"
+          });
+          onDone();
+        });
       }
-      wrapper.appendChild(group);
-      return { wrapper, read: () => inputs.find((i) => i.input.checked)?.value };
-    }
-    case "nps":
-      return buildScale(wrapper, doc, 0, 10, "veo-nps-btn");
-    case "rating":
-      return buildScale(wrapper, doc, 1, 5, "veo-rating-btn", "\u2605");
-    default: {
-      const input = doc.createElement("input");
-      input.type = "text";
-      input.className = "veo-form-input";
-      if (field.placeholder) input.placeholder = field.placeholder;
-      wrapper.appendChild(input);
-      return { wrapper, read: () => input.value.trim() };
-    }
+      closeOrSkip(context) {
+        if (context.nav?.callbacks) context.nav.callbacks.onSkip();
+        else context.onClose();
+      }
+      /** Además del host propio, destruye el delegado de badge si lo hubo. */
+      destroy() {
+        this.badgeDelegate?.destroy();
+        this.badgeDelegate = null;
+        super.destroy();
+      }
+    };
   }
-}
-function buildScale(wrapper, doc, min, max, btnClass, symbol) {
-  const row = doc.createElement("div");
-  row.className = "veo-form-scale";
-  let selected;
-  const buttons = [];
-  for (let n = min; n <= max; n++) {
-    const btn = doc.createElement("button");
-    btn.type = "button";
-    btn.className = btnClass;
-    btn.textContent = symbol ?? String(n);
-    btn.setAttribute("aria-label", String(n));
-    btn.addEventListener("click", () => {
-      selected = n;
-      buttons.forEach((b, i) => {
-        const active2 = symbol ? i + min <= n : i + min === n;
-        b.classList.toggle("veo-scale-active", active2);
-      });
-    });
-    buttons.push(btn);
-    row.appendChild(btn);
+});
+function applyFloatingPosition(wrapper, placement) {
+  const position = placement.position ?? "bottom-right";
+  const ox = `${placement.offsetX ?? DEFAULT_OFFSET}px`;
+  const oy = `${placement.offsetY ?? DEFAULT_OFFSET}px`;
+  const s = wrapper.style;
+  if (position === "center") {
+    s.top = "50%";
+    s.left = "50%";
+    s.transform = "translate(-50%, -50%)";
+    return;
+  }
+  const [vertical, horizontal] = position.split("-");
+  if (vertical === "top") s.top = oy;
+  else s.bottom = oy;
+  if (horizontal === "left") {
+    s.left = ox;
+  } else if (horizontal === "right") {
+    s.right = ox;
+  } else {
+    s.left = "50%";
+    s.transform = "translateX(-50%)";
   }
-  wrapper.appendChild(row);
-  return { wrapper, read: () => selected };
 }
-var init_form_content = __esm({
-  "src/plugins/guides/form-content.ts"() {
-    init_block_builder();
+var DEFAULT_PLACEMENT, DEFAULT_OFFSET, DEFAULT_WIDTH, CustomRenderer;
+var init_custom_renderer = __esm({
+  "src/plugins/guides/renderers/custom-renderer.ts"() {
+    init_wait_for_element();
+    init_base_renderer();
+    init_custom_frame();
+    DEFAULT_PLACEMENT = { mode: "floating", position: "bottom-right" };
+    DEFAULT_OFFSET = 16;
+    DEFAULT_WIDTH = 360;
+    CustomRenderer = class extends BaseRenderer {
+      async render(context) {
+        const step = context.guide.guideSteps[0];
+        if (!step || typeof step.html !== "string" || step.html.length === 0) return;
+        const placement = step.placement ?? DEFAULT_PLACEMENT;
+        let anchor = null;
+        if (placement.mode === "anchored") {
+          const selector = placement.selector ?? step.selector ?? context.guide.activationRules.selector;
+          if (typeof selector !== "string" || selector.length === 0) return;
+          anchor = await waitForElement(selector);
+          if (!anchor) return;
+        }
+        const { root } = this.createHost();
+        const doc = root.ownerDocument ?? document;
+        const wrapper = doc.createElement("div");
+        wrapper.className = placement.mode === "anchored" ? "veo-custom-anchored" : "veo-custom-floating";
+        const { iframe, cleanup } = mountCustomFrame(doc, step, context, {
+          width: toCssSize(placement.width ?? DEFAULT_WIDTH),
+          fixedHeight: placement.height ?? null
+        });
+        this.registerCleanup(cleanup);
+        wrapper.appendChild(iframe);
+        root.appendChild(wrapper);
+        if (placement.mode === "floating") {
+          applyFloatingPosition(wrapper, placement);
+        } else if (anchor) {
+          this.registerCleanup(await this.setupAnchoredPosition(anchor, wrapper, placement));
+        }
+        context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
+      }
+      async setupAnchoredPosition(anchor, wrapper, placement) {
+        const side = placement.side ?? "bottom";
+        const update = async () => {
+          const { x, y } = await dom.computePosition(anchor, wrapper, {
+            placement: side,
+            strategy: "fixed",
+            middleware: [dom.offset(placement.offsetY ?? 8), dom.flip(), dom.shift({ padding: 8 })]
+          });
+          wrapper.style.left = `${x}px`;
+          wrapper.style.top = `${y}px`;
+        };
+        await update();
+        const reposition = () => {
+          void update();
+        };
+        window.addEventListener("scroll", reposition, true);
+        window.addEventListener("resize", reposition);
+        return () => {
+          window.removeEventListener("scroll", reposition, true);
+          window.removeEventListener("resize", reposition);
+        };
+      }
+    };
   }
 });
 
@@ -5671,6 +5964,26 @@ init_modal_renderer();
 init_tooltip_renderer();
 init_walkthrough_renderer();
 
+// src/plugins/guides/url-match.ts
+function matchesUrl(matcher, pageUrl) {
+  switch (matcher.type) {
+    case "exact":
+      return matcher.pattern === pageUrl;
+    case "prefix":
+      return pageUrl.startsWith(matcher.pattern);
+    case "regex":
+      try {
+        return new RegExp(matcher.pattern).test(pageUrl);
+      } catch {
+        return false;
+      }
+  }
+}
+function stepMatchesPage(loc, pageUrl) {
+  if (!loc || loc.scope === "sitewide" || !loc.pattern) return true;
+  return matchesUrl({ type: loc.matchType ?? "prefix", pattern: loc.pattern }, pageUrl);
+}
+
 // src/plugins/guides/walkthrough-state.ts
 init_constants2();
 var WalkthroughStateManager = class {
@@ -5825,6 +6138,12 @@ var GuidesController = class {
      * resolve fresco manda) y se limpian en `destroy()`.
      */
     this.armedTriggers = /* @__PURE__ */ new Map();
+    /**
+     * Tour composite ESPERANDO navegación: el usuario avanzó a un paso cuya
+     * `pageLocation` apunta a otra página. Se resume en `checkGuides` cuando llega
+     * a esa página (tours multi-página estilo Pendo).
+     */
+    this.pendingComposite = null;
     this.debug = config.debug === true;
     this.apiUrl = config.apiUrl;
     this.apiKey = config.apiKey;
@@ -5874,6 +6193,7 @@ var GuidesController = class {
     if (await this.tryResumeWalkthrough(endUserId, sessionId, pageUrl)) {
       return;
     }
+    this.tryResumeComposite(sessionId, pageUrl);
     let guides;
     try {
       guides = await this.resolveGuides(endUserId, pageUrl);
@@ -5915,6 +6235,10 @@ var GuidesController = class {
       await this.startWalkthrough(guide, endUserId, sessionId, pageUrl);
       return;
     }
+    if (guide.guideType === "composite") {
+      this.startComposite(guide, sessionId, pageUrl);
+      return;
+    }
     this.runSingleStepRender(guide, sessionId, pageUrl);
   }
   /**
@@ -6022,6 +6346,91 @@ ${pageUrl}`;
       delayMs
     );
   }
+  /**
+   * Camino del modelo unificado (`composite`). Elige el PRIMER paso cuya
+   * `pageLocation` matchea la URL actual (targeting por-paso) y lo pinta con el
+   * `CompositeRenderer`. Si ningún paso aplica a esta página, no muestra nada.
+   */
+  startComposite(guide, sessionId, pageUrl) {
+    if (this.pendingComposite?.guide.guideId === guide.guideId) return;
+    const steps = guide.guideSteps;
+    const start = steps.findIndex((s) => stepMatchesPage(s.pageLocation, pageUrl));
+    if (start === -1) return;
+    this.renderCompositeStep(guide, start, sessionId, pageUrl);
+  }
+  /**
+   * Resume un tour composite que quedó esperando navegación: si el paso
+   * pendiente aplica a la página actual, lo pinta. Devuelve `true` si resumió.
+   */
+  tryResumeComposite(sessionId, pageUrl) {
+    const pending = this.pendingComposite;
+    if (!pending) return false;
+    const steps = pending.guide.guideSteps;
+    const step = steps[pending.stepIndex];
+    if (!step) {
+      this.pendingComposite = null;
+      return false;
+    }
+    if (!stepMatchesPage(step.pageLocation, pageUrl)) return false;
+    this.pendingComposite = null;
+    this.renderCompositeStep(pending.guide, pending.stepIndex, sessionId, pageUrl);
+    return true;
+  }
+  /**
+   * Pinta UN paso composite. En guías multi-paso pasa `nav` al renderer para
+   * que los botones next/prev avancen (misma página); en single-step los
+   * botones cierran. Cada avance destruye el paso anterior y monta el siguiente.
+   */
+  renderCompositeStep(guide, idx, sessionId, pageUrl) {
+    const steps = guide.guideSteps;
+    const renderer = new CompositeRenderer();
+    this.activeRenderers.add(renderer);
+    this.activeByGuideId.set(guide.guideId, renderer);
+    const cleanup = () => {
+      renderer.destroy();
+      this.activeRenderers.delete(renderer);
+      if (this.activeByGuideId.get(guide.guideId) === renderer) {
+        this.activeByGuideId.delete(guide.guideId);
+      }
+    };
+    const goToStep = (target) => {
+      cleanup();
+      if (target < 0 || target >= steps.length) return;
+      const step = steps[target];
+      if (step && stepMatchesPage(step.pageLocation, pageUrl)) {
+        this.renderCompositeStep(guide, target, sessionId, pageUrl);
+      } else {
+        this.pendingComposite = { guide, stepIndex: target };
+      }
+    };
+    const nav = steps.length > 1 ? {
+      stepIndex: idx,
+      totalSteps: steps.length,
+      callbacks: {
+        onNext: () => goToStep(idx + 1),
+        onBack: () => goToStep(idx - 1),
+        onGoto: (target) => goToStep(target),
+        onSkip: cleanup,
+        onComplete: cleanup
+      }
+    } : void 0;
+    try {
+      void renderer.render({
+        guide,
+        onInteraction: (e) => this.handleInteraction(guide, sessionId, pageUrl, e),
+        onClose: cleanup,
+        onTrack: (name, props) => this.client.track(name, props),
+        onFormSubmit: (answers) => this.submitFormResponse(guide.guideId, answers),
+        onOpenGuide: (targetGuideId) => {
+          void this.openGuideById(targetGuideId, sessionId, pageUrl);
+        },
+        ...nav ? { nav } : {}
+      });
+    } catch (err) {
+      if (this.debug) console.error("[veo] composite renderer threw:", err);
+      cleanup();
+    }
+  }
   mountSingleStepRenderer(guide, renderer, sessionId, pageUrl) {
     this.activeRenderers.add(renderer);
     this.activeByGuideId.set(guide.guideId, renderer);