veo-sdk 0.5.33 → 0.6.0

package/dist/builder.cjs

@@ -291,6 +291,19 @@ function isDeviceAllowed(devices, viewportWidth = typeof window === "undefined"
   return devices === "mobile" ? mobile : !mobile;
 }
 
+// src/plugins/guides/activation-rules.ts
+function isAutomaticActivation(rules) {
+  const trigger = rules?.trigger ?? "immediate";
+  if (trigger === "immediate" || trigger === "delayed") return true;
+  if (trigger === "on_click" || trigger === "on_hover") return rules?.autoShow === true;
+  return false;
+}
+function activationDelayMs(rules) {
+  if (!isAutomaticActivation(rules)) return 0;
+  const ms = rules?.delayMs ?? 0;
+  return Number.isFinite(ms) && ms > 0 ? ms : 0;
+}
+
 // src/plugins/guides/constants.ts
 var GUIDE_Z_INDEX = 2147483640;
 var DEFAULT_ANCHOR_WAIT_MS = 5e3;
@@ -404,6 +417,125 @@ function rebuildNode(node, doc, depth, budget) {
   return rebuilt;
 }
 
+// src/plugins/guides/video-block.ts
+function videoEmbedUrl(provider, url) {
+  let u;
+  try {
+    u = new URL(url);
+  } catch {
+    return null;
+  }
+  if (u.protocol !== "https:" && u.protocol !== "http:") return null;
+  const host = u.hostname.replace(/^www\./, "").replace(/^m\./, "");
+  const id = (re, from) => {
+    const m = from.match(re);
+    return m?.[1] ?? null;
+  };
+  switch (provider) {
+    case "youtube": {
+      let v = null;
+      if (host === "youtube.com" || host === "youtube-nocookie.com") {
+        v = u.searchParams.get("v") ?? id(/^\/(?:embed|shorts|live)\/([A-Za-z0-9_-]{6,})/, u.pathname);
+      } else if (host === "youtu.be") {
+        v = id(/^\/([A-Za-z0-9_-]{6,})/, u.pathname);
+      }
+      if (!v || !/^[A-Za-z0-9_-]{6,}$/.test(v)) return null;
+      return `https://www.youtube-nocookie.com/embed/${v}`;
+    }
+    case "vimeo": {
+      if (host !== "vimeo.com" && host !== "player.vimeo.com") return null;
+      const v = id(/(\d{6,})/, u.pathname);
+      return v ? `https://player.vimeo.com/video/${v}` : null;
+    }
+    case "loom": {
+      if (host !== "loom.com") return null;
+      const v = id(/^\/(?:share|embed)\/([A-Za-z0-9]{16,})/, u.pathname);
+      return v ? `https://www.loom.com/embed/${v}` : null;
+    }
+    case "wistia": {
+      if (!under(host, "wistia.com") && !under(host, "wistia.net")) return null;
+      const v = id(/\/(?:medias|embed\/iframe)\/([A-Za-z0-9]{6,})/, u.pathname);
+      return v ? `https://fast.wistia.net/embed/iframe/${v}` : null;
+    }
+    case "msstream": {
+      if (!under(host, "microsoftstream.com")) return null;
+      const v = id(/\/(?:embed\/)?video\/([0-9a-f-]{36})/i, u.pathname);
+      return v ? `https://web.microsoftstream.com/embed/video/${v}?autoplay=false&showinfo=true` : null;
+    }
+    case "vidyard": {
+      if (!under(host, "vidyard.com")) return null;
+      const v = id(/\/watch\/([A-Za-z0-9_-]{8,})/, u.pathname) ?? (host === "play.vidyard.com" ? id(/^\/([A-Za-z0-9_-]{8,})/, u.pathname) : null);
+      return v ? `https://play.vidyard.com/${v}` : null;
+    }
+    case "sharepoint":
+      return u.protocol === "https:" && under(host, "sharepoint.com") ? u.href : null;
+    case "brightcove":
+      return u.protocol === "https:" && host === "players.brightcove.net" && u.searchParams.get("videoId") ? u.href : null;
+    case "kaltura":
+      return u.protocol === "https:" && under(host, "kaltura.com") && u.pathname.startsWith("/p/") ? u.href : null;
+    default:
+      return null;
+  }
+}
+function under(host, domain) {
+  return host === domain || host.endsWith(`.${domain}`);
+}
+function fileVideoUrl(url) {
+  try {
+    const u = new URL(url);
+    if (u.protocol !== "https:" && u.protocol !== "http:") return null;
+    return /\.(mp4|webm|mov)$/i.test(u.pathname) ? u.href : null;
+  } catch {
+    return null;
+  }
+}
+function buildVideoBlock(block, doc, opts = {}) {
+  const isFile = block.provider === "file";
+  const src = typeof block.url === "string" ? isFile ? fileVideoUrl(block.url) : videoEmbedUrl(block.provider, block.url) : null;
+  if (!src) return null;
+  const s = block.style ?? {};
+  const wrap = doc.createElement("div");
+  wrap.className = "veo-guide-video";
+  const ratio = s.aspect === "4:3" ? "4 / 3" : "16 / 9";
+  wrap.style.aspectRatio = ratio;
+  if (s.widthMode === "fill") {
+    wrap.style.width = "100%";
+  } else {
+    const w = typeof s.width === "number" && Number.isFinite(s.width) ? s.width : 400;
+    wrap.style.width = `${Math.max(120, Math.min(1600, w))}px`;
+    wrap.style.maxWidth = "100%";
+  }
+  const align = s.align === "center" ? "center" : s.align === "right" ? "flex-end" : "flex-start";
+  wrap.style.alignSelf = align;
+  if (isFile) {
+    const video = doc.createElement("video");
+    video.src = src;
+    video.controls = true;
+    video.setAttribute("playsinline", "");
+    video.preload = "metadata";
+    video.setAttribute(
+      "aria-label",
+      typeof block.alt === "string" && block.alt.trim() ? block.alt.trim() : "Video"
+    );
+    if (opts.editing) video.style.pointerEvents = "none";
+    wrap.appendChild(video);
+    return wrap;
+  }
+  const frame = doc.createElement("iframe");
+  frame.src = src;
+  frame.title = typeof block.alt === "string" && block.alt.trim() ? block.alt.trim() : "Video";
+  frame.setAttribute("loading", "lazy");
+  frame.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
+  frame.setAttribute(
+    "allow",
+    `accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture${opts.editing ? "" : "; fullscreen"}`
+  );
+  if (!opts.editing) frame.setAttribute("allowfullscreen", "");
+  if (opts.editing) frame.style.pointerEvents = "none";
+  wrap.appendChild(frame);
+  return wrap;
+}
+
 // src/plugins/guides/block-builder.ts
 function buildStepContent(step, doc, callbacks) {
   const container = doc.createElement("div");
@@ -528,8 +660,12 @@ function renderBlocks(container, blocks, doc, callbacks) {
     i++;
   }
 }
-function buildContentBlock(block, doc) {
+function buildContentBlock(block, doc, opts = {}) {
   switch (block.type) {
+    case "video":
+      return buildVideoBlock(block, doc, opts);
+    case "divider":
+      return buildDividerBlock(block, doc);
     case "title": {
       const el2 = doc.createElement("h2");
       el2.className = "veo-guide-title";
@@ -553,7 +689,7 @@ function buildContentBlock(block, doc) {
       const el2 = doc.createElement("img");
       el2.className = "veo-guide-image";
       el2.src = block.url;
-      el2.alt = "";
+      el2.alt = typeof block.alt === "string" ? block.alt : "";
       applyBlockStyle(el2, block.style, "image");
       return el2;
     }
@@ -561,6 +697,32 @@ function buildContentBlock(block, doc) {
       return null;
   }
 }
+var DIVIDER_LINE_STYLES = /* @__PURE__ */ new Set(["solid", "dotted", "dashed"]);
+function buildDividerBlock(block, doc) {
+  const s = block.style ?? {};
+  const wrap = doc.createElement("div");
+  wrap.className = "veo-guide-divider";
+  wrap.setAttribute("role", "separator");
+  const hr = doc.createElement("hr");
+  const custom = s.preset === "custom";
+  const color = custom && typeof s.color === "string" && s.color ? s.color : s.colorMode === "dark" ? "rgba(255, 255, 255, 0.35)" : "#e5e7eb";
+  const thickness = custom && typeof s.thickness === "number" && Number.isFinite(s.thickness) ? clampNum(Math.round(s.thickness), 1, 12) : 1;
+  const lineStyle = typeof s.lineStyle === "string" && DIVIDER_LINE_STYLES.has(s.lineStyle) ? s.lineStyle : "solid";
+  hr.style.borderTop = `${thickness}px ${lineStyle} ${color}`;
+  wrap.appendChild(hr);
+  for (const [k, prop] of [
+    ["marginTop", "marginTop"],
+    ["marginRight", "marginRight"],
+    ["marginBottom", "marginBottom"],
+    ["marginLeft", "marginLeft"]
+  ]) {
+    const v = s[k];
+    if (typeof v === "number" && Number.isFinite(v)) {
+      wrap.style[prop] = `${clampNum(v, 0, 64)}px`;
+    }
+  }
+  return wrap;
+}
 function buildButtonBlock(block, doc, callbacks) {
   const btn = doc.createElement("button");
   btn.type = "button";
@@ -587,6 +749,12 @@ var BLOCK_ALIGN_SELF = {
 function clampNum(n, min, max) {
   return Math.min(max, Math.max(min, n));
 }
+var TEXT_PRESETS = {
+  title: { size: 18, weight: 600, lineHeight: 1.3 },
+  subtitle: { size: 16, weight: 600, lineHeight: 1.35 },
+  paragraph: { size: 14, weight: 400, lineHeight: 1.5 },
+  small: { size: 12, weight: 400, lineHeight: 1.5 }
+};
 function applyBlockStyle(el2, style, kind) {
   if (!style || typeof style !== "object") return;
   const s = style;
@@ -596,14 +764,34 @@ function applyBlockStyle(el2, style, kind) {
   }
   const align = typeof s.align === "string" ? s.align : null;
   if (align && (align === "left" || align === "center" || align === "right")) {
-    if (kind === "text") el2.style.textAlign = align;
-    else if (kind === "image") el2.style.alignSelf = BLOCK_ALIGN_SELF[align];
+    if (kind === "text") {
+      el2.style.textAlign = align;
+      el2.style.alignSelf = BLOCK_ALIGN_SELF[align];
+    } else if (kind === "image") el2.style.alignSelf = BLOCK_ALIGN_SELF[align];
+  }
+  if (kind === "text" && typeof s.preset === "string" && s.preset in TEXT_PRESETS) {
+    const preset = TEXT_PRESETS[s.preset];
+    if (preset) {
+      el2.style.fontSize = `${preset.size}px`;
+      el2.style.fontWeight = String(preset.weight);
+      el2.style.lineHeight = String(preset.lineHeight);
+    }
+  }
+  if (kind !== "image" && s.colorMode === "dark") {
+    el2.style.background = "#1f1d1b";
+    el2.style.color = "#f5f0eb";
+    el2.style.borderRadius = el2.style.borderRadius || "8px";
   }
   if (kind !== "image" && typeof s.color === "string") el2.style.color = s.color;
   if (kind === "text" && typeof s.fontSize === "number" && Number.isFinite(s.fontSize)) {
     el2.style.fontSize = `${clampNum(s.fontSize, 8, 72)}px`;
   }
-  if (kind === "image" && typeof s.width === "number" && Number.isFinite(s.width)) {
+  if (kind === "image" && s.naturalSize === true) {
+    el2.style.width = "auto";
+    el2.style.maxWidth = "100%";
+    el2.style.maxHeight = "none";
+    el2.style.objectFit = "contain";
+  } else if (kind === "image" && typeof s.width === "number" && Number.isFinite(s.width)) {
     el2.style.width = `${clampNum(s.width, 10, 100)}%`;
   }
   if (kind === "image" && typeof s.radius === "number" && Number.isFinite(s.radius)) {
@@ -683,65 +871,324 @@ function readCtaUrl(step) {
   return isSafeUrl(candidate) ? candidate : void 0;
 }
 
-// src/plugins/guides/guide-design.ts
-var DARK_THEME = {
-  "--veo-bg": "#1f2937",
-  "--veo-text": "#f9fafb",
-  "--veo-text-secondary": "#d1d5db",
-  "--veo-shadow": "0 20px 60px rgba(0, 0, 0, 0.55)"
-};
-var ALIGN_JUSTIFY = {
-  left: "flex-start",
-  center: "center",
-  right: "flex-end"
-};
-var ALIGN_SELF = {
-  left: "flex-start",
-  center: "center",
-  right: "flex-end"
-};
-var ELEMENT_ALIGN_MODE = {
-  title: "text",
-  text: "text",
-  image: "self"
-};
-var SHADOW = {
-  none: "none",
-  soft: "0 4px 14px rgba(0, 0, 0, 0.10)",
-  medium: "0 8px 30px rgba(0, 0, 0, 0.18)",
-  strong: "0 24px 60px rgba(0, 0, 0, 0.32)"
-};
-var PRESET_POS = {
-  center: [0.5, 0.5],
-  top: [0.5, 0],
-  bottom: [0.5, 1],
-  left: [0, 0.5],
-  right: [1, 0.5],
-  "top-left": [0, 0],
-  "top-right": [1, 0],
-  "bottom-left": [0, 1],
-  "bottom-right": [1, 1]
-};
-var COLOR_RE = /^#[0-9a-f]{3,8}$|^(rgb|rgba|hsl|hsla)\([\d.,%/\sdeg]+\)$|^[a-z]{3,20}$/i;
-function clamp(n, min, max) {
-  return Math.min(max, Math.max(min, n));
+// src/utils/uuid.ts
+function uuidv7() {
+  const timestamp = Date.now();
+  const timeHex = timestamp.toString(16).padStart(12, "0");
+  const random = new Uint8Array(10);
+  if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
+    crypto.getRandomValues(random);
+  } else {
+    for (let i = 0; i < random.length; i++) {
+      random[i] = Math.floor(Math.random() * 256);
+    }
+  }
+  random[0] = (random[0] ?? 0) & 15 | 112;
+  random[2] = (random[2] ?? 0) & 63 | 128;
+  const hex = Array.from(random, (b) => b.toString(16).padStart(2, "0")).join("");
+  return [
+    timeHex.slice(0, 8),
+    timeHex.slice(8, 12),
+    hex.slice(0, 4),
+    hex.slice(4, 8),
+    hex.slice(8, 20)
+  ].join("-");
 }
-function applyDesignVars(host, style) {
-  if (!style || typeof style !== "object") return;
-  const s = style;
-  if (typeof s.accentColor === "string" && COLOR_RE.test(s.accentColor.trim())) {
-    host.style.setProperty("--veo-primary", s.accentColor.trim());
+
+// src/plugins/guides/renderers/custom-frame.ts
+function mountCustomFrame(doc, step, context, opts) {
+  const iframe = doc.createElement("iframe");
+  iframe.className = "veo-custom-frame";
+  iframe.setAttribute("sandbox", "allow-scripts");
+  iframe.setAttribute("title", context.guide.guideName || "OnUser");
+  iframe.style.width = opts.width;
+  const hasFixedHeight = opts.fixedHeight !== void 0 && opts.fixedHeight !== null;
+  if (hasFixedHeight) iframe.style.height = toCssSize(opts.fixedHeight);
+  const token = uuidv7();
+  const wantsTailwind = step.style?.tailwind === true;
+  iframe.srcdoc = buildSrcdoc(step.html ?? "", step.css ?? "", step.js ?? "", token, {
+    hostCss: collectHostStyles(),
+    htmlAttrs: hostHtmlAttrs(),
+    tailwind: wantsTailwind
+  });
+  const close = () => context.onClose();
+  const onMessage = (event) => {
+    if (event.source !== iframe.contentWindow) return;
+    const data = event.data;
+    if (!data || typeof data !== "object" || data.__veo !== token) return;
+    switch (data.type) {
+      case "dismiss":
+        context.onInteraction({
+          guideId: context.guide.guideId,
+          stepIndex: 0,
+          action: "dismissed"
+        });
+        close();
+        break;
+      case "cta":
+        context.onInteraction({
+          guideId: context.guide.guideId,
+          stepIndex: 0,
+          action: "cta_clicked"
+        });
+        if (typeof data.url === "string" && isSafeUrl(data.url)) {
+          window.open(data.url, "_blank", "noopener,noreferrer");
+        }
+        if (data.close !== false) close();
+        break;
+      case "navigate":
+        if (typeof data.url === "string" && isSafeUrl(data.url)) {
+          window.location.assign(data.url);
+        }
+        break;
+      case "track":
+        if (typeof data.name === "string" && context.onTrack) {
+          context.onTrack(data.name, isRecord(data.props) ? data.props : void 0);
+        }
+        break;
+      case "resize":
+        if (!hasFixedHeight && typeof data.height === "number" && data.height > 0) {
+          iframe.style.height = `${Math.ceil(data.height)}px`;
+        }
+        break;
+    }
+  };
+  window.addEventListener("message", onMessage);
+  return { iframe, cleanup: () => window.removeEventListener("message", onMessage) };
+}
+function toCssSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var MAX_HOST_CSS = 800 * 1024;
+function collectHostStyles() {
+  if (typeof document === "undefined") return "";
+  let out = "";
+  try {
+    for (const sheet of Array.from(document.styleSheets)) {
+      let rules = null;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        continue;
+      }
+      if (!rules) continue;
+      for (const rule of Array.from(rules)) {
+        out += `${rule.cssText}
+`;
+        if (out.length > MAX_HOST_CSS) return out;
+      }
+    }
+  } catch {
+    return out;
   }
-  if (typeof s.fontFamily === "string" && s.fontFamily.length <= 200 && !/[<>{}]/.test(s.fontFamily)) {
-    host.style.setProperty("--veo-font", s.fontFamily.trim());
+  return out;
+}
+function hostHtmlAttrs() {
+  if (typeof document === "undefined") return "";
+  try {
+    const el2 = document.documentElement;
+    const attrs = [];
+    for (const name of ["class", "style", "data-theme", "data-mode", "data-color-mode"]) {
+      const v = el2.getAttribute(name);
+      if (v && v.length <= 1e3 && !/["<>]/.test(v)) attrs.push(`${name}="${v}"`);
+    }
+    return attrs.join(" ");
+  } catch {
+    return "";
   }
-  if (s.theme === "dark") {
-    for (const [key, value] of Object.entries(DARK_THEME)) {
-      host.style.setProperty(key, value);
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function buildSrcdoc(html, css, js, token, opts) {
+  const bridge = `(function(){var T=${JSON.stringify(token)};function P(m){m.__veo=T;parent.postMessage(m,'*');}window.veo={dismiss:function(){P({type:'dismiss'});},cta:function(u){P({type:'cta',url:u});},track:function(n,p){P({type:'track',name:n,props:p||{}});},navigate:function(u){P({type:'navigate',url:u});}};document.addEventListener('click',function(e){var a=e.target&&e.target.closest?e.target.closest('a[href]'):null;if(!a)return;var h=a.getAttribute('href');if(!h||h.charAt(0)==='#'||/^(javascript|mailto|tel):/i.test(h))return;e.preventDefault();if(a.target==='_blank'){P({type:'cta',url:a.href,close:false});}else{P({type:'navigate',url:h});}},true);function H(){var r=document.getElementById('__veo_root');var h=r?r.getBoundingClientRect().height:document.documentElement.scrollHeight;P({type:'resize',height:Math.ceil(h)});}window.addEventListener('load',H);try{if(typeof ResizeObserver!=='undefined'){var _r=document.getElementById('__veo_root');new ResizeObserver(H).observe(_r||document.documentElement);}}catch(e){}})();`;
+  const hostStyle = opts.hostCss ? `<style>${escapeClosing(opts.hostCss, "style")}</style>` : "";
+  const tailwind = opts.tailwind ? '<script src="https://cdn.tailwindcss.com"></script>' : "";
+  return (
+    // Orden: base → CSS del host (utilidades+clases propias+:root) → reset
+    // flotante (fondo transparente, sin márgenes) → Tailwind → CSS del autor (gana).
+    `<!DOCTYPE html><html ${opts.htmlAttrs}><head><meta charset="utf-8"><style>html,body{margin:0;padding:0;}body{font-family:system-ui,-apple-system,sans-serif;}</style>` + hostStyle + // Reset flotante: el CSS de la app trae reglas de PÁGINA (body{min-height:100vh},
+    // html{height:100%}, fondo del layout…) que en un iframe embebido lo estirarían a
+    // toda la pantalla (caja negra) en vez de ajustarse al contenido. Neutralizamos
+    // tamaño/fondo/overflow (mantenemos color y fuente heredados de la app).
+    // `color-scheme:normal` es CLAVE para la transparencia: si el CSS de la app
+    // declara `:root{color-scheme:dark}` y no coincide con el del elemento iframe
+    // del host (normal), el navegador pinta el canvas OPACO (negro) en vez de
+    // transparente — igualamos ambos lados para conservar el fondo transparente.
+    "<style>html,body{margin:0!important;padding:0!important;background:transparent!important;height:auto!important;min-height:0!important;max-height:none!important;width:auto!important;min-width:0!important;overflow:visible!important;color-scheme:normal!important;}</style>" + tailwind + // Inline en <body>: gana incluso sobre reglas `!important` de la app (p. ej.
+    // `.dark body{background:#000!important}`) porque el estilo inline tiene la
+    // mayor especificidad dentro de la capa important-author.
+    `<style>${escapeClosing(css, "style")}</style></head><body style="margin:0!important;background:transparent!important;min-height:0!important;height:auto!important;"><div id="__veo_root">${html}</div><script>${bridge}</script>` + (js ? `<script>${escapeClosing(js, "script")}</script>` : "") + "</body></html>"
+  );
+}
+function escapeClosing(code, tag) {
+  const rx = tag === "script" ? /<\/script/gi : /<\/style/gi;
+  return code.replace(rx, `<\\/${tag}`);
+}
+
+// src/plugins/guides/code-block.ts
+var RAW_BLOCK_ATTR = "data-veo-raw-block";
+function insertRawNodes(anchor, nodes, pos) {
+  const parent = anchor.parentNode;
+  if (pos === "prepend") {
+    const first = anchor.firstChild;
+    for (const n of nodes) anchor.insertBefore(n, first);
+  } else if (pos === "append") {
+    for (const n of nodes) anchor.appendChild(n);
+  } else if (pos === "before") {
+    for (const n of nodes) parent?.insertBefore(n, anchor);
+  } else {
+    let ref = anchor;
+    for (const n of nodes) {
+      parent?.insertBefore(n, ref.nextSibling);
+      ref = n;
     }
   }
-  if (typeof s.background === "string" && COLOR_RE.test(s.background.trim())) {
-    host.style.setProperty("--veo-bg", s.background.trim());
+}
+var codeSlotSeq = 0;
+function mountCodeBlock(block, doc, context, host, rawInline) {
+  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()) {
+    const holder = doc.createElement("div");
+    holder.className = "veo-code-html";
+    holder.innerHTML = block.html;
+    for (const old of Array.from(holder.querySelectorAll("script"))) {
+      injected.push(runScript(old, hostDoc));
+      old.remove();
+    }
+    if (rawInline) {
+      const rawNodes = Array.from(holder.childNodes);
+      if (rawInline.tagBlockId) {
+        for (const n of rawNodes) {
+          if (n instanceof Element) n.setAttribute(RAW_BLOCK_ATTR, rawInline.tagBlockId);
+        }
+      }
+      insertRawNodes(rawInline.anchor, rawNodes, rawInline.pos);
+      injected.push(...rawNodes);
+    } else if (host) {
+      const slotName = `veo-code-${++codeSlotSeq}`;
+      holder.slot = slotName;
+      host.appendChild(holder);
+      injected.push(holder);
+      const slot = doc.createElement("slot");
+      slot.setAttribute("name", slotName);
+      const wrapper = doc.createElement("div");
+      wrapper.className = "veo-code-host";
+      wrapper.appendChild(slot);
+      node = wrapper;
+    } else {
+      node = holder;
+    }
+  }
+  let cancelled = false;
+  if (typeof block.js === "string" && block.js.trim()) {
+    const js = block.js;
+    const run = () => {
+      if (cancelled) return;
+      const s = hostDoc.createElement("script");
+      s.textContent = wrapUserScript(js);
+      hostDoc.body.appendChild(s);
+      injected.push(s);
+    };
+    if (host && !host.isConnected) queueMicrotask(run);
+    else run();
+  }
+  return {
+    node,
+    cleanup: () => {
+      cancelled = true;
+      for (const n of injected) n.parentNode?.removeChild(n);
+    }
+  };
+}
+function wrapUserScript(js) {
+  return `(function(){try{
+${js}
+}catch(e){console.error("[OnUser] Error en el bloque de c\xF3digo:",e)}})();`;
+}
+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;
+}
+
+// src/plugins/guides/guide-design.ts
+var DARK_THEME = {
+  "--veo-bg": "#1f2937",
+  "--veo-text": "#f9fafb",
+  "--veo-text-secondary": "#d1d5db",
+  "--veo-shadow": "0 20px 60px rgba(0, 0, 0, 0.55)"
+};
+var ALIGN_JUSTIFY = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var ALIGN_SELF = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var ELEMENT_ALIGN_MODE = {
+  title: "text",
+  text: "text",
+  image: "self"
+};
+var SHADOW = {
+  none: "none",
+  soft: "0 4px 14px rgba(0, 0, 0, 0.10)",
+  medium: "0 8px 30px rgba(0, 0, 0, 0.18)",
+  strong: "0 24px 60px rgba(0, 0, 0, 0.32)"
+};
+var PRESET_POS = {
+  center: [0.5, 0.5],
+  top: [0.5, 0],
+  bottom: [0.5, 1],
+  left: [0, 0.5],
+  right: [1, 0.5],
+  "top-left": [0, 0],
+  "top-right": [1, 0],
+  "bottom-left": [0, 1],
+  "bottom-right": [1, 1]
+};
+var COLOR_RE = /^#[0-9a-f]{3,8}$|^(rgb|rgba|hsl|hsla)\([\d.,%/\sdeg]+\)$|^[a-z]{3,20}$/i;
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+function applyDesignVars(host, style) {
+  if (!style || typeof style !== "object") return;
+  const s = style;
+  if (typeof s.accentColor === "string" && COLOR_RE.test(s.accentColor.trim())) {
+    host.style.setProperty("--veo-primary", s.accentColor.trim());
+  }
+  if (typeof s.fontFamily === "string" && s.fontFamily.length <= 200 && !/[<>{}]/.test(s.fontFamily)) {
+    host.style.setProperty("--veo-font", s.fontFamily.trim());
+  }
+  if (s.theme === "dark") {
+    for (const [key, value] of Object.entries(DARK_THEME)) {
+      host.style.setProperty(key, value);
+    }
+  }
+  if (typeof s.background === "string" && COLOR_RE.test(s.background.trim())) {
+    host.style.setProperty("--veo-bg", s.background.trim());
   }
   if (typeof s.textColor === "string" && COLOR_RE.test(s.textColor.trim())) {
     host.style.setProperty("--veo-text", s.textColor.trim());
@@ -1024,7 +1471,161 @@ var GUIDE_STYLES = `
 }
 /* Card gen\xE9rica del modelo unificado. El dise\xF1o (bg/borde/padding/\u2026) lo aplica
    el renderer como estilos inline desde step.design; ac\xE1 van los defaults. */
+/* Edici\xF3n (builder): sin animaci\xF3n de entrada al repintar la preview. */
+:host(.veo-no-anim) * { animation: none !important; }
+
+/* Bloque video: caja con relaci\xF3n de aspecto; el iframe la llena. */
+.veo-guide-video { position: relative; overflow: hidden; border-radius: 8px; background: #000; }
+.veo-guide-video iframe, .veo-guide-video video {
+  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
+}
+
+/* \u2500\u2500 Layout por filas/columnas (composite) \u2500\u2500
+   El espacio tiene UNA fuente por capa: el aire con el borde lo da el padding
+   de la card; la separaci\xF3n entre filas/bloques la da el margen inferior
+   (12px, ah\xED vive la l\xEDnea \xAB+\xBB del editor); los bloques NO llevan padding
+   propio (solo el que el autor les ponga inline). El \xFAltimo elemento no deja
+   margen colgando. */
+.veo-card > [data-veo-block], .veo-card > .veo-row, .veo-card > .veo-guide-actions,
+.veo-col > [data-veo-block], .veo-col > .veo-guide-actions { margin-bottom: 12px; }
+/* La card y cada columna son columnas flex: cada bloque mide SU contenido (como
+   el bot\xF3n) y se ubica con su alineaci\xF3n (align-self); filas, columnas, formularios
+   y filas de botones ocupan todo el ancho. */
+.veo-card:not(.veo-card--empty), .veo-col {
+  display: flex; flex-direction: column; align-items: flex-start;
+}
+.veo-card > [data-veo-block], .veo-col > [data-veo-block] { max-width: 100%; }
+/* L\xEDnea horizontal: ocupa todo el ancho; el padding del bloque es solo vertical
+   (zona clickeable en el editor) y la l\xEDnea es el borde superior del hr. */
+.veo-card > .veo-guide-divider, .veo-col > .veo-guide-divider { padding: 6px 0; align-self: stretch; }
+.veo-guide-divider { box-sizing: border-box; }
+/* Bloque de c\xF3digo (modo host): ocupa todo el ancho, como un formulario. */
+.veo-code-host { display: block; min-width: 0; }
+.veo-card > .veo-code-host, .veo-col > .veo-code-host { align-self: stretch; }
+.veo-guide-divider hr { margin: 0; border: 0; height: 0; }
+.veo-card > .veo-row, .veo-card > .veo-guide-actions, .veo-card > .veo-form,
+.veo-col > .veo-guide-actions, .veo-col > .veo-form { align-self: stretch; }
+.veo-row { display: flex; gap: 12px; align-items: flex-start; box-sizing: border-box; }
+.veo-col { flex: 1 1 0; min-width: 0; }
+.veo-col > :last-child { margin-bottom: 0; }
+/* Fila con alineaci\xF3n horizontal (editor de fila): las columnas miden su contenido. */
+.veo-row--aligned > .veo-col { flex: 0 1 auto; }
+
+/* \u2500\u2500 Editor in-app: bloque seleccionado + barra de acciones + placeholders \u2500\u2500 */
+.veo-block-placeholder {
+  border: 1px dashed #b0a9a5; border-radius: 6px; padding: 12px; margin-bottom: 12px;
+  color: #8a8582; font-size: 13px; text-align: center;
+}
+/* El bloque seleccionado no lleva contorno propio: lo rodea .veo-block-frame
+   (marco aparte, con aire y alto m\xEDnimo, que no altera el layout). */
+.veo-block--selected { position: relative; z-index: 1; }
+.veo-block-frame {
+  position: absolute; z-index: 4; pointer-events: none; box-sizing: border-box;
+  border: 2px solid #3b82f6; border-radius: 10px; background: rgba(59, 130, 246, 0.04);
+}
+/* Barra del bloque (mock): p\xEDldora blanca con sombra, solo \xEDconos; la papelera
+   en rojo, separada por una l\xEDnea. */
+.veo-block-toolbar {
+  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px;
+  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
+}
+.veo-block-toolbar button {
+  border: 0; background: transparent; color: #4b4642; cursor: pointer; padding: 6px; border-radius: 8px;
+  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
+}
+.veo-block-toolbar button:hover { background: #f5efeb; }
+.veo-block-toolbar button svg { width: 20px; height: 20px; }
+.veo-block-toolbar .veo-block-toolbar-remove { color: #e5484d; }
+/* Separadores: antes de la papelera y antes de las flechas de mover. */
+.veo-block-toolbar .veo-block-toolbar-remove, .veo-block-toolbar .veo-block-toolbar-move-left {
+  margin-left: 6px; position: relative;
+}
+.veo-block-toolbar .veo-block-toolbar-remove::before, .veo-block-toolbar .veo-block-toolbar-move-left::before {
+  content: ""; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 1px; background: #e7e2de;
+}
+.veo-block-toolbar button:disabled { opacity: 0.3; cursor: default; background: transparent; }
+/* Contenedor (hover): contorno azul de la tarjeta y dos pesta\xF1as centradas
+   sobre su borde superior: \xABEditar contenedor\xBB (outline) y \xABEditar filas\xBB. */
+.veo-card-frame {
+  position: absolute; z-index: 3; inset: 0; pointer-events: none; box-sizing: border-box;
+  border: 2px solid #3b82f6; border-radius: inherit;
+}
+.veo-card-toolbar {
+  position: absolute; z-index: 6; left: 50%; transform: translateX(-50%);
+  display: inline-flex; align-items: flex-end; gap: 8px; white-space: nowrap;
+}
+.veo-card-toolbar button {
+  cursor: pointer; padding: 8px 14px; border-radius: 8px; border: 2px solid #3b82f6;
+  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  background: #fff; color: #3b82f6;
+}
+.veo-card-toolbar button:hover { background: #eff6ff; }
+/* Con fondo = la vista que el panel muestra ahora (contenedor o estructura). */
+.veo-card-toolbar button.is-active { background: #3b82f6; color: #fff; }
+.veo-card-toolbar button.is-active:hover { background: #2563eb; border-color: #2563eb; }
+/* Editor de fila: marco al pasar el mouse por una fila (o la fila del bloque
+   seleccionado) y barra \xABEditar fila \xB7 duplicar\xBB bajo su esquina derecha. */
+.veo-row-frame {
+  position: absolute; z-index: 3; pointer-events: none; box-sizing: border-box;
+  border: 2px solid #3b82f6; border-radius: 10px;
+}
+.veo-row-toolbar {
+  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px;
+  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.16); white-space: nowrap;
+}
+.veo-row-toolbar button {
+  border: 0; background: transparent; color: #4b4642; cursor: pointer; padding: 6px 8px; border-radius: 8px;
+  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
+  font: 500 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+.veo-row-toolbar button:hover { background: #f5efeb; }
+.veo-row-toolbar button svg { width: 20px; height: 20px; }
+.veo-row-toolbar .veo-row-toolbar-duplicate { margin-left: 6px; position: relative; }
+.veo-row-toolbar .veo-row-toolbar-duplicate::before {
+  content: ""; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 1px; background: #e7e2de;
+}
+.veo-row-toolbar .veo-row-toolbar-remove { color: #e5484d; }
+/* Huecos \xAB+\xBB (mock): zona invisible entre elementos; al pasar el mouse aparece
+   la l\xEDnea azul (horizontal = fila / bloque apilado, vertical = columna) con
+   un \xAB+\xBB circular al centro. */
+.veo-gap { position: absolute; z-index: 4; }
+.veo-gap i { position: absolute; background: #3b82f6; opacity: 0; transition: opacity 100ms; pointer-events: none; }
+.veo-gap--h i { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
+.veo-gap--v i { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
+.veo-gap button {
+  position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -11px; box-sizing: border-box;
+  opacity: 0; transition: opacity 100ms; width: 22px; height: 22px; border-radius: 50%; padding: 0;
+  border: 2px solid #fff; background: #3b82f6; color: #fff; cursor: pointer;
+  font: 600 15px/18px system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+}
+.veo-gap:hover i, .veo-gap:hover button, .veo-gap:focus-within button { opacity: 1; }
+.veo-gap button:hover { background: #2563eb; }
+
+/* Tarjeta sin bloques (paso reci\xE9n creado). La tarjeta NO impone tama\xF1o ni
+   padding propios (as\xED el ancho/padding del dise\xF1o se ven tal cual); el tama\xF1o
+   m\xEDnimo lo pone la zona punteada azul de la preview. */
+.veo-card--empty { display: flex; align-items: stretch; }
+.veo-card-empty-zone {
+  flex: 1; min-width: 0; min-height: 160px; margin-top: 14px;
+  display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
+  border: 2px dashed #3b82f6; border-radius: 8px; background: #eff6ff;
+  color: #2563eb; font-size: 16px; font-weight: 500; user-select: none; pointer-events: none;
+  padding: 0 12px; box-sizing: border-box; overflow: hidden;
+}
+.veo-card-empty-zone b { font-weight: 600; font-size: 22px; line-height: 1; }
+/* Sin ancho configurado, la zona da un tama\xF1o c\xF3modo por defecto. */
+.veo-card--empty:not([style*="width"]) .veo-card-empty-zone { min-width: 360px; }
+/* Tarjeta angosta (la mide el renderer): solo el \xAB+\xBB, sin texto, y m\xE1s baja. */
+.veo-card--narrow .veo-card-empty-zone span { display: none; }
+.veo-card--narrow .veo-card-empty-zone { min-height: 120px; }
 .veo-card {
+  /* Contenedor posicionado SIEMPRE: el \u2715 (absolute) se ubica respecto a la
+     tarjeta tambi\xE9n en pasos embebidos (inline), no respecto a la app. Los
+     flotantes lo pisan con position:fixed inline. */
+  position: relative;
   pointer-events: auto;
   background: var(--veo-bg, #ffffff);
   color: var(--veo-text, #1f2937);
@@ -1117,6 +1718,13 @@ var GUIDE_STYLES = `
   transition: opacity 120ms ease;
 }
 .veo-guide-cta:hover { opacity: 0.9; }
+/* Presets del boton (editor): secundario = contorno; enlace = solo texto. */
+.veo-guide-cta--secondary {
+  background: transparent; color: var(--veo-primary);
+  border: 1px solid var(--veo-primary);
+}
+.veo-guide-cta--link { background: transparent; color: var(--veo-primary); padding: 0; }
+.veo-guide-cta--link:hover { opacity: 1; text-decoration: underline; }
 .veo-guide-cta:active { transform: translateY(1px); }
 .veo-guide-close {
   position: absolute; top: -6px; right: -6px;
@@ -1147,6 +1755,10 @@ var GUIDE_STYLES = `
 
 .veo-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
 .veo-form-field { display: flex; flex-direction: column; gap: 6px; }
+/* Pregunta de la encuesta (rich text del bloque form). */
+.veo-form-question { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--veo-text); }
+.veo-form-question p { margin: 0; }
+.veo-form > .veo-guide-actions { margin: 0; }
 .veo-form-label { font-size: 13px; font-weight: 500; color: var(--veo-text); }
 .veo-form-input {
   font-size: 14px; color: var(--veo-text);
@@ -1155,26 +1767,71 @@ var GUIDE_STYLES = `
   padding: 8px 10px; width: 100%;
 }
 .veo-form-input:focus { outline: 2px solid var(--veo-primary); outline-offset: -1px; border-color: transparent; }
-.veo-form-options { display: flex; flex-direction: column; gap: 6px; }
+/* Lista de tareas (mock): \xEDtems con anillo de progreso, texto + subt\xEDtulo,
+   y al pie \xABX de N completadas\xBB + porcentaje + barra. */
+.veo-checklist {
+  display: flex; flex-direction: column; gap: 22px; align-self: stretch; width: 100%;
+  min-width: 360px; box-sizing: border-box;
+}
+.veo-checklist-title { font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--veo-cl-title); }
+.veo-checklist-title p { margin: 0; }
+.veo-checklist-items { display: flex; flex-direction: column; gap: 22px; }
+.veo-checklist-item {
+  display: flex; align-items: center; gap: 18px; width: 100%; text-align: left;
+  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
+}
+.veo-checklist-item:hover .veo-checklist-label { text-decoration: underline; }
+.veo-checklist-ring { width: 44px; height: 44px; flex: 0 0 auto; }
+.veo-checklist-texts { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.veo-checklist-label {
+  font-size: calc(var(--veo-cl-font-size, 14px) + 4px); font-weight: var(--veo-cl-font-weight, 600);
+  line-height: 1.3; color: var(--veo-cl-title);
+}
+.veo-checklist-sub { font-size: calc(var(--veo-cl-font-size, 14px) + 1px); color: var(--veo-cl-subtitle); }
+.veo-checklist-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
+.veo-checklist-summary {
+  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
+  font-size: calc(var(--veo-cl-font-size, 14px) + 1px);
+}
+.veo-checklist-count { color: var(--veo-cl-subtitle); }
+.veo-checklist-percent { font-weight: 700; font-size: calc(var(--veo-cl-font-size, 14px) + 3px); color: var(--veo-cl-bar); }
+.veo-checklist-bar { height: var(--veo-cl-bar-h, 8px); background: #e7e2de; border-radius: 999px; overflow: hidden; }
+.veo-checklist--dark .veo-checklist-bar { background: #3c3734; }
+.veo-checklist-bar-fill { height: 100%; background: var(--veo-cl-bar); border-radius: 999px; transition: width 300ms ease; }
+.veo-checklist-empty { margin: 0; font-size: 13px; color: var(--veo-cl-subtitle); }
+/* Opci\xF3n m\xFAltiple (mock): c\xEDrculos/casillas grandes con su texto al lado. */
+.veo-form-options { display: flex; flex-direction: column; gap: 14px; }
 .veo-form-option {
-  display: flex; align-items: center; gap: 8px;
-  font-size: 14px; color: var(--veo-text); cursor: pointer;
-}
-.veo-form-option input { accent-color: var(--veo-primary); margin: 0; cursor: pointer; }
-.veo-form-scale { display: flex; gap: 4px; flex-wrap: wrap; }
+  display: flex; align-items: center; gap: 14px;
+  font-size: 16px; color: var(--veo-text); cursor: pointer;
+}
+.veo-form-option input {
+  accent-color: var(--veo-primary); margin: 0; cursor: pointer;
+  width: 26px; height: 26px; flex: 0 0 auto;
+}
+/* Escala num\xE9rica (mock): casillas cuadradas; con etiquetas, cada casilla
+   lleva la suya debajo (la primera cuelga a la izquierda, la \xFAltima a la derecha). */
+.veo-form-scale { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
+.veo-scale-item { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
+.veo-scale-item--first { align-items: flex-start; }
+.veo-scale-item--last { align-items: flex-end; }
+.veo-scale-label { font-size: 12px; line-height: 1.2; color: #8a8582; white-space: nowrap; }
 .veo-nps-btn {
-  min-width: 30px; height: 30px; padding: 0 4px;
-  font-size: 13px; font-weight: 500; color: var(--veo-text);
-  background: var(--veo-bg); border: 1px solid #d1d5db; border-radius: 6px;
+  min-width: var(--veo-scale-size, 44px); height: var(--veo-scale-size, 44px); padding: 0 6px;
+  font-size: 16px; font-weight: 600; color: var(--veo-text);
+  background: var(--veo-bg); border: 1px solid #d5cec9; border-radius: 8px;
   cursor: pointer; transition: all 100ms ease;
 }
-.veo-nps-btn:hover { border-color: var(--veo-primary); }
+.veo-nps-btn:hover { border-color: var(--veo-scale-color, var(--veo-primary)); }
 .veo-rating-btn {
   background: none; border: none; padding: 0 2px;
   font-size: 26px; line-height: 1; color: #d1d5db;
   cursor: pointer; transition: color 100ms ease;
 }
-.veo-scale-active.veo-nps-btn { background: var(--veo-primary); color: #fff; border-color: var(--veo-primary); }
+.veo-scale-active.veo-nps-btn {
+  background: var(--veo-scale-color, var(--veo-primary)); color: #fff;
+  border-color: var(--veo-scale-color, var(--veo-primary));
+}
 .veo-scale-active.veo-rating-btn { color: #f59e0b; }
 .veo-form-error { font-size: 13px; color: #dc2626; margin: 0; }
 .veo-form-thanks {
@@ -1676,408 +2333,375 @@ function buildBadgeElement(config, doc) {
       if (config.color) btn.style.color = config.color;
       break;
     }
-    case "image": {
-      if (config.imageUrl && isSafeUrl(config.imageUrl)) {
-        const img = doc.createElement("img");
-        img.src = config.imageUrl;
-        img.alt = "";
-        img.style.width = `${size}px`;
-        img.style.height = `${size}px`;
-        btn.appendChild(img);
-      } else {
-        btn.className = "veo-badge veo-badge--icon";
-        btn.textContent = "?";
-        btn.style.width = `${size}px`;
-        btn.style.height = `${size}px`;
-        btn.style.fontSize = `${clamp2(Math.round(size * 0.62), 8, 32)}px`;
-      }
-      break;
-    }
-    default: {
-      btn.textContent = (config.icon || "\u2139\uFE0F").slice(0, 4);
-      btn.style.width = `${size}px`;
-      btn.style.height = `${size}px`;
-      btn.style.fontSize = `${clamp2(Math.round(size * 0.62), 8, 32)}px`;
-      if (config.color) btn.style.color = config.color;
-      break;
-    }
-  }
-  return btn;
-}
-
-// src/plugins/guides/walkthrough-block-builder.ts
-function buildWalkthroughStepContent(step, stepIndex, totalSteps, doc, callbacks) {
-  const container = doc.createElement("div");
-  container.className = "veo-guide-content";
-  const counter = doc.createElement("div");
-  counter.className = "veo-walkthrough-counter";
-  counter.textContent = `Paso ${stepIndex + 1} de ${totalSteps}`;
-  container.appendChild(counter);
-  const progress = doc.createElement("div");
-  progress.className = "veo-walkthrough-progress";
-  for (let i = 0; i < totalSteps; i++) {
-    const dot = doc.createElement("span");
-    dot.className = "veo-walkthrough-progress-dot";
-    if (i < stepIndex) dot.classList.add("completed");
-    if (i === stepIndex) dot.classList.add("active");
-    progress.appendChild(dot);
-  }
-  container.appendChild(progress);
-  for (const node of buildContentNodes(step, doc)) {
-    container.appendChild(node);
-  }
-  const actions = doc.createElement("div");
-  actions.className = "veo-walkthrough-actions";
-  const skipBtn = doc.createElement("button");
-  skipBtn.type = "button";
-  skipBtn.className = "veo-walkthrough-skip";
-  skipBtn.textContent = "Omitir";
-  skipBtn.addEventListener("click", () => callbacks.onSkip());
-  actions.appendChild(skipBtn);
-  const rightGroup = doc.createElement("div");
-  rightGroup.className = "veo-walkthrough-actions-right";
-  if (stepIndex > 0) {
-    const backBtn = doc.createElement("button");
-    backBtn.type = "button";
-    backBtn.className = "veo-walkthrough-btn-secondary";
-    backBtn.textContent = "Atr\xE1s";
-    backBtn.addEventListener("click", () => callbacks.onBack());
-    rightGroup.appendChild(backBtn);
-  }
-  const isLastStep = stepIndex === totalSteps - 1;
-  const primaryBtn = doc.createElement("button");
-  primaryBtn.type = "button";
-  primaryBtn.className = "veo-guide-cta";
-  const defaultLabel = isLastStep ? "Finalizar" : "Siguiente";
-  primaryBtn.textContent = typeof step.ctaText === "string" && step.ctaText ? step.ctaText : defaultLabel;
-  primaryBtn.addEventListener("click", () => {
-    if (isLastStep) callbacks.onComplete();
-    else callbacks.onNext();
-  });
-  rightGroup.appendChild(primaryBtn);
-  actions.appendChild(rightGroup);
-  container.appendChild(actions);
-  container.appendChild(createCloseButton(doc, () => callbacks.onSkip()));
-  return container;
-}
-
-// src/plugins/guides/renderers/banner-renderer.ts
-var BannerRenderer = class extends BaseRenderer {
-  async render(context) {
-    const idx = context.nav?.stepIndex ?? 0;
-    const step = context.guide.guideSteps[idx];
-    if (!step) return;
-    const position = step.style?.position === "bottom" ? "bottom" : "top";
-    const selector = 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 banner = ownerDocument.createElement("div");
-    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();
-    };
-    const content = context.nav ? buildWalkthroughStepContent(
-      step,
-      context.nav.stepIndex,
-      context.nav.totalSteps,
-      ownerDocument,
-      context.nav.callbacks
-    ) : buildStepContent(step, ownerDocument, {
-      onCtaClick: (action, target, meta) => {
-        dismiss("cta_clicked", action === "url" ? target : void 0, meta);
-        if (action === "guide" && target) context.onOpenGuide?.(target);
-      },
-      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, target, meta) => {
-          dismiss("cta_clicked", action === "url" ? target : void 0, meta);
-          if (action === "guide" && target) context.onOpenGuide?.(target);
-        },
-        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";
-      const embedded = Boolean(step.selector?.trim());
-      this.liveContainer.className = bannerClassOf(position, embedded);
-    }
-  }
-};
-function bannerClassOf(position, embedded) {
-  return embedded ? "veo-banner veo-banner-embedded" : `veo-banner veo-banner-${position}`;
-}
-
-// src/utils/uuid.ts
-function uuidv7() {
-  const timestamp = Date.now();
-  const timeHex = timestamp.toString(16).padStart(12, "0");
-  const random = new Uint8Array(10);
-  if (typeof crypto !== "undefined" && typeof crypto.getRandomValues === "function") {
-    crypto.getRandomValues(random);
-  } else {
-    for (let i = 0; i < random.length; i++) {
-      random[i] = Math.floor(Math.random() * 256);
-    }
-  }
-  random[0] = (random[0] ?? 0) & 15 | 112;
-  random[2] = (random[2] ?? 0) & 63 | 128;
-  const hex = Array.from(random, (b) => b.toString(16).padStart(2, "0")).join("");
-  return [
-    timeHex.slice(0, 8),
-    timeHex.slice(8, 12),
-    hex.slice(0, 4),
-    hex.slice(4, 8),
-    hex.slice(8, 20)
-  ].join("-");
-}
-
-// src/plugins/guides/renderers/custom-frame.ts
-function mountCustomFrame(doc, step, context, opts) {
-  const iframe = doc.createElement("iframe");
-  iframe.className = "veo-custom-frame";
-  iframe.setAttribute("sandbox", "allow-scripts");
-  iframe.setAttribute("title", context.guide.guideName || "OnUser");
-  iframe.style.width = opts.width;
-  const hasFixedHeight = opts.fixedHeight !== void 0 && opts.fixedHeight !== null;
-  if (hasFixedHeight) iframe.style.height = toCssSize(opts.fixedHeight);
-  const token = uuidv7();
-  const wantsTailwind = step.style?.tailwind === true;
-  iframe.srcdoc = buildSrcdoc(step.html ?? "", step.css ?? "", step.js ?? "", token, {
-    hostCss: collectHostStyles(),
-    htmlAttrs: hostHtmlAttrs(),
-    tailwind: wantsTailwind
-  });
-  const close = () => context.onClose();
-  const onMessage = (event) => {
-    if (event.source !== iframe.contentWindow) return;
-    const data = event.data;
-    if (!data || typeof data !== "object" || data.__veo !== token) return;
-    switch (data.type) {
-      case "dismiss":
-        context.onInteraction({
-          guideId: context.guide.guideId,
-          stepIndex: 0,
-          action: "dismissed"
-        });
-        close();
-        break;
-      case "cta":
-        context.onInteraction({
-          guideId: context.guide.guideId,
-          stepIndex: 0,
-          action: "cta_clicked"
-        });
-        if (typeof data.url === "string" && isSafeUrl(data.url)) {
-          window.open(data.url, "_blank", "noopener,noreferrer");
-        }
-        if (data.close !== false) close();
-        break;
-      case "navigate":
-        if (typeof data.url === "string" && isSafeUrl(data.url)) {
-          window.location.assign(data.url);
-        }
-        break;
-      case "track":
-        if (typeof data.name === "string" && context.onTrack) {
-          context.onTrack(data.name, isRecord(data.props) ? data.props : void 0);
-        }
-        break;
-      case "resize":
-        if (!hasFixedHeight && typeof data.height === "number" && data.height > 0) {
-          iframe.style.height = `${Math.ceil(data.height)}px`;
-        }
-        break;
-    }
-  };
-  window.addEventListener("message", onMessage);
-  return { iframe, cleanup: () => window.removeEventListener("message", onMessage) };
-}
-function toCssSize(value) {
-  return typeof value === "number" ? `${value}px` : value;
-}
-var MAX_HOST_CSS = 800 * 1024;
-function collectHostStyles() {
-  if (typeof document === "undefined") return "";
-  let out = "";
-  try {
-    for (const sheet of Array.from(document.styleSheets)) {
-      let rules = null;
-      try {
-        rules = sheet.cssRules;
-      } catch {
-        continue;
-      }
-      if (!rules) continue;
-      for (const rule of Array.from(rules)) {
-        out += `${rule.cssText}
-`;
-        if (out.length > MAX_HOST_CSS) return out;
-      }
-    }
-  } catch {
-    return out;
-  }
-  return out;
-}
-function hostHtmlAttrs() {
-  if (typeof document === "undefined") return "";
-  try {
-    const el2 = document.documentElement;
-    const attrs = [];
-    for (const name of ["class", "style", "data-theme", "data-mode", "data-color-mode"]) {
-      const v = el2.getAttribute(name);
-      if (v && v.length <= 1e3 && !/["<>]/.test(v)) attrs.push(`${name}="${v}"`);
-    }
-    return attrs.join(" ");
-  } catch {
-    return "";
-  }
-}
-function isRecord(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function buildSrcdoc(html, css, js, token, opts) {
-  const bridge = `(function(){var T=${JSON.stringify(token)};function P(m){m.__veo=T;parent.postMessage(m,'*');}window.veo={dismiss:function(){P({type:'dismiss'});},cta:function(u){P({type:'cta',url:u});},track:function(n,p){P({type:'track',name:n,props:p||{}});},navigate:function(u){P({type:'navigate',url:u});}};document.addEventListener('click',function(e){var a=e.target&&e.target.closest?e.target.closest('a[href]'):null;if(!a)return;var h=a.getAttribute('href');if(!h||h.charAt(0)==='#'||/^(javascript|mailto|tel):/i.test(h))return;e.preventDefault();if(a.target==='_blank'){P({type:'cta',url:a.href,close:false});}else{P({type:'navigate',url:h});}},true);function H(){var r=document.getElementById('__veo_root');var h=r?r.getBoundingClientRect().height:document.documentElement.scrollHeight;P({type:'resize',height:Math.ceil(h)});}window.addEventListener('load',H);try{if(typeof ResizeObserver!=='undefined'){var _r=document.getElementById('__veo_root');new ResizeObserver(H).observe(_r||document.documentElement);}}catch(e){}})();`;
-  const hostStyle = opts.hostCss ? `<style>${escapeClosing(opts.hostCss, "style")}</style>` : "";
-  const tailwind = opts.tailwind ? '<script src="https://cdn.tailwindcss.com"></script>' : "";
-  return (
-    // Orden: base → CSS del host (utilidades+clases propias+:root) → reset
-    // flotante (fondo transparente, sin márgenes) → Tailwind → CSS del autor (gana).
-    `<!DOCTYPE html><html ${opts.htmlAttrs}><head><meta charset="utf-8"><style>html,body{margin:0;padding:0;}body{font-family:system-ui,-apple-system,sans-serif;}</style>` + hostStyle + // Reset flotante: el CSS de la app trae reglas de PÁGINA (body{min-height:100vh},
-    // html{height:100%}, fondo del layout…) que en un iframe embebido lo estirarían a
-    // toda la pantalla (caja negra) en vez de ajustarse al contenido. Neutralizamos
-    // tamaño/fondo/overflow (mantenemos color y fuente heredados de la app).
-    // `color-scheme:normal` es CLAVE para la transparencia: si el CSS de la app
-    // declara `:root{color-scheme:dark}` y no coincide con el del elemento iframe
-    // del host (normal), el navegador pinta el canvas OPACO (negro) en vez de
-    // transparente — igualamos ambos lados para conservar el fondo transparente.
-    "<style>html,body{margin:0!important;padding:0!important;background:transparent!important;height:auto!important;min-height:0!important;max-height:none!important;width:auto!important;min-width:0!important;overflow:visible!important;color-scheme:normal!important;}</style>" + tailwind + // Inline en <body>: gana incluso sobre reglas `!important` de la app (p. ej.
-    // `.dark body{background:#000!important}`) porque el estilo inline tiene la
-    // mayor especificidad dentro de la capa important-author.
-    `<style>${escapeClosing(css, "style")}</style></head><body style="margin:0!important;background:transparent!important;min-height:0!important;height:auto!important;"><div id="__veo_root">${html}</div><script>${bridge}</script>` + (js ? `<script>${escapeClosing(js, "script")}</script>` : "") + "</body></html>"
-  );
-}
-function escapeClosing(code, tag) {
-  const rx = tag === "script" ? /<\/script/gi : /<\/style/gi;
-  return code.replace(rx, `<\\/${tag}`);
-}
-
-// src/plugins/guides/code-block.ts
-function insertRawNodes(anchor, nodes, pos) {
-  const parent = anchor.parentNode;
-  if (pos === "prepend") {
-    const first = anchor.firstChild;
-    for (const n of nodes) anchor.insertBefore(n, first);
-  } else if (pos === "append") {
-    for (const n of nodes) anchor.appendChild(n);
-  } else if (pos === "before") {
-    for (const n of nodes) parent?.insertBefore(n, anchor);
-  } else {
-    let ref = anchor;
-    for (const n of nodes) {
-      parent?.insertBefore(n, ref.nextSibling);
-      ref = n;
-    }
+    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 codeSlotSeq = 0;
-function mountCodeBlock(block, doc, context, host, rawInline) {
-  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 };
+
+// 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);
   }
-  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);
+  container.appendChild(progress);
+  for (const node of buildContentNodes(step, doc)) {
+    container.appendChild(node);
   }
-  let node = null;
-  if (typeof block.html === "string" && block.html.trim()) {
-    const holder = doc.createElement("div");
-    holder.className = "veo-code-html";
-    holder.innerHTML = block.html;
-    for (const old of Array.from(holder.querySelectorAll("script"))) {
-      injected.push(runScript(old, hostDoc));
-      old.remove();
+  const actions = doc.createElement("div");
+  actions.className = "veo-walkthrough-actions";
+  const skipBtn = doc.createElement("button");
+  skipBtn.type = "button";
+  skipBtn.className = "veo-walkthrough-skip";
+  skipBtn.textContent = "Omitir";
+  skipBtn.addEventListener("click", () => callbacks.onSkip());
+  actions.appendChild(skipBtn);
+  const rightGroup = doc.createElement("div");
+  rightGroup.className = "veo-walkthrough-actions-right";
+  if (stepIndex > 0) {
+    const backBtn = doc.createElement("button");
+    backBtn.type = "button";
+    backBtn.className = "veo-walkthrough-btn-secondary";
+    backBtn.textContent = "Atr\xE1s";
+    backBtn.addEventListener("click", () => callbacks.onBack());
+    rightGroup.appendChild(backBtn);
+  }
+  const isLastStep = stepIndex === totalSteps - 1;
+  const primaryBtn = doc.createElement("button");
+  primaryBtn.type = "button";
+  primaryBtn.className = "veo-guide-cta";
+  const defaultLabel = isLastStep ? "Finalizar" : "Siguiente";
+  primaryBtn.textContent = typeof step.ctaText === "string" && step.ctaText ? step.ctaText : defaultLabel;
+  primaryBtn.addEventListener("click", () => {
+    if (isLastStep) callbacks.onComplete();
+    else callbacks.onNext();
+  });
+  rightGroup.appendChild(primaryBtn);
+  actions.appendChild(rightGroup);
+  container.appendChild(actions);
+  container.appendChild(createCloseButton(doc, () => callbacks.onSkip()));
+  return container;
+}
+
+// src/plugins/guides/renderers/banner-renderer.ts
+var BannerRenderer = class extends BaseRenderer {
+  async render(context) {
+    const idx = context.nav?.stepIndex ?? 0;
+    const step = context.guide.guideSteps[idx];
+    if (!step) return;
+    const position = step.style?.position === "bottom" ? "bottom" : "top";
+    const selector = step.selector?.trim() || null;
+    let anchor = null;
+    if (selector) {
+      anchor = await waitForElement(selector);
+      if (!anchor) return;
     }
-    if (rawInline) {
-      const rawNodes = Array.from(holder.childNodes);
-      insertRawNodes(rawInline.anchor, rawNodes, rawInline.pos);
-      injected.push(...rawNodes);
-    } else if (host) {
-      const slotName = `veo-code-${++codeSlotSeq}`;
-      holder.slot = slotName;
-      host.appendChild(holder);
-      injected.push(holder);
-      const slot = doc.createElement("slot");
-      slot.setAttribute("name", slotName);
-      node = slot;
-    } else {
-      node = holder;
+    const { host, root } = this.createHost();
+    this.applyDesign(step.style);
+    const ownerDocument = root.ownerDocument ?? document;
+    const banner = ownerDocument.createElement("div");
+    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();
+    };
+    const content = context.nav ? buildWalkthroughStepContent(
+      step,
+      context.nav.stepIndex,
+      context.nav.totalSteps,
+      ownerDocument,
+      context.nav.callbacks
+    ) : buildStepContent(step, ownerDocument, {
+      onCtaClick: (action, target, meta) => {
+        dismiss("cta_clicked", action === "url" ? target : void 0, meta);
+        if (action === "guide" && target) context.onOpenGuide?.(target);
+      },
+      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, target, meta) => {
+          dismiss("cta_clicked", action === "url" ? target : void 0, meta);
+          if (action === "guide" && target) context.onOpenGuide?.(target);
+        },
+        onDismiss: () => dismiss("dismissed")
+      });
+      this.liveKey = this.liveKeyOf(step);
+      context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
     }
   }
-  if (typeof block.js === "string" && block.js.trim()) {
-    const s = hostDoc.createElement("script");
-    s.textContent = block.js;
-    hostDoc.body.appendChild(s);
-    injected.push(s);
+  /** 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}`;
   }
-  return {
-    node,
-    cleanup: () => {
-      for (const n of injected) n.parentNode?.removeChild(n);
+  onLiveUpdate(step) {
+    if (this.liveContainer) {
+      const position = step.style?.position === "bottom" ? "bottom" : "top";
+      const embedded = Boolean(step.selector?.trim());
+      this.liveContainer.className = bannerClassOf(position, embedded);
     }
+  }
+};
+function bannerClassOf(position, embedded) {
+  return embedded ? "veo-banner veo-banner-embedded" : `veo-banner veo-banner-${position}`;
+}
+
+// src/plugins/guides/checklist-block.ts
+var CHECKLIST_DEFAULTS = {
+  iconEmptyColor: "#e7e2de",
+  iconFillColor: "#406a31",
+  barColor: "#406a31",
+  barHeight: 8,
+  fontSize: 14,
+  fontWeight: 600,
+  titleColor: "#2c2825",
+  subtitleColor: "#8a8582",
+  subtitleTemplate: "Completado <%= currentStep %> de <%= totalSteps %> pasos"
+};
+var WEIGHTS = { regular: 400, medium: 500, semibold: 600, bold: 700 };
+function checklistStyle(style) {
+  const s = style ?? {};
+  const str = (k, fb) => typeof s[k] === "string" && s[k].trim() ? s[k] : fb;
+  const num2 = (k, fb, min, max) => typeof s[k] === "number" && Number.isFinite(s[k]) ? Math.min(max, Math.max(min, s[k])) : fb;
+  const weightRaw = s.fontWeight;
+  const fontWeight = typeof weightRaw === "number" ? Math.min(900, Math.max(100, weightRaw)) : typeof weightRaw === "string" && WEIGHTS[weightRaw.toLowerCase()] ? WEIGHTS[weightRaw.toLowerCase()] : CHECKLIST_DEFAULTS.fontWeight;
+  const dark = s.colorMode === "dark";
+  return {
+    colorMode: dark ? "dark" : "light",
+    iconEmptyColor: str("iconEmptyColor", dark ? "#3c3734" : CHECKLIST_DEFAULTS.iconEmptyColor),
+    iconFillColor: str("iconFillColor", CHECKLIST_DEFAULTS.iconFillColor),
+    barColor: str("barColor", CHECKLIST_DEFAULTS.barColor),
+    barHeight: num2("barHeight", CHECKLIST_DEFAULTS.barHeight, 2, 40),
+    fontSize: num2("fontSize", CHECKLIST_DEFAULTS.fontSize, 10, 40),
+    fontWeight,
+    titleColor: str("titleColor", dark ? "#f5efeb" : CHECKLIST_DEFAULTS.titleColor),
+    subtitleColor: str("subtitleColor", dark ? "#b0a9a5" : CHECKLIST_DEFAULTS.subtitleColor),
+    subtitleTemplate: str("subtitleTemplate", CHECKLIST_DEFAULTS.subtitleTemplate)
   };
 }
-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;
+function renderSubtitle(template, p) {
+  return template.replace(/<%=\s*currentStep\s*%>/g, String(p.currentStep)).replace(/<%=\s*totalSteps\s*%>/g, String(p.totalSteps));
+}
+var RING_R = 10;
+var RING_C = 2 * Math.PI * RING_R;
+function buildRing(doc, fraction, completed, st) {
+  const ns = "http://www.w3.org/2000/svg";
+  const svg2 = doc.createElementNS(ns, "svg");
+  svg2.setAttribute("viewBox", "0 0 28 28");
+  svg2.setAttribute("class", "veo-checklist-ring");
+  svg2.setAttribute("aria-hidden", "true");
+  const track = doc.createElementNS(ns, "circle");
+  track.setAttribute("cx", "14");
+  track.setAttribute("cy", "14");
+  track.setAttribute("r", String(RING_R));
+  track.setAttribute("fill", completed ? st.iconFillColor : "none");
+  track.setAttribute("stroke", st.iconEmptyColor);
+  track.setAttribute("stroke-width", "4.5");
+  svg2.appendChild(track);
+  if (completed) {
+    const check = doc.createElementNS(ns, "path");
+    check.setAttribute("d", "M9 14.5l3.2 3.2L19 11");
+    check.setAttribute("fill", "none");
+    check.setAttribute("stroke", "#fff");
+    check.setAttribute("stroke-width", "2.4");
+    check.setAttribute("stroke-linecap", "round");
+    check.setAttribute("stroke-linejoin", "round");
+    svg2.appendChild(check);
+    return svg2;
+  }
+  const f = Math.max(0, Math.min(1, fraction));
+  if (f > 0) {
+    const arc = doc.createElementNS(ns, "circle");
+    arc.setAttribute("cx", "14");
+    arc.setAttribute("cy", "14");
+    arc.setAttribute("r", String(RING_R));
+    arc.setAttribute("fill", "none");
+    arc.setAttribute("stroke", st.iconFillColor);
+    arc.setAttribute("stroke-width", "4.5");
+    arc.setAttribute("stroke-linecap", "butt");
+    arc.setAttribute("stroke-dasharray", `${(RING_C * f).toFixed(2)} ${RING_C.toFixed(2)}`);
+    arc.setAttribute("transform", "rotate(-90 14 14)");
+    svg2.appendChild(arc);
+  }
+  return svg2;
+}
+function buildChecklistBlock(block, doc, context) {
+  const st = checklistStyle(block.style);
+  const items = (block.items ?? []).filter((i) => i && typeof i.guideId === "string" && i.guideId);
+  const root = doc.createElement("div");
+  root.className = `veo-checklist${st.colorMode === "dark" ? " veo-checklist--dark" : ""}`;
+  root.style.setProperty("--veo-cl-font-size", `${st.fontSize}px`);
+  root.style.setProperty("--veo-cl-font-weight", String(st.fontWeight));
+  root.style.setProperty("--veo-cl-title", st.titleColor);
+  root.style.setProperty("--veo-cl-subtitle", st.subtitleColor);
+  root.style.setProperty("--veo-cl-bar", st.barColor);
+  root.style.setProperty("--veo-cl-bar-h", `${st.barHeight}px`);
+  if (typeof block.html === "string" && block.html || typeof block.text === "string" && block.text) {
+    const title = doc.createElement("div");
+    title.className = "veo-checklist-title";
+    if (typeof block.html === "string" && block.html)
+      title.appendChild(renderRichText(block.html, doc));
+    else title.textContent = block.text;
+    root.appendChild(title);
+  }
+  const list = doc.createElement("div");
+  list.className = "veo-checklist-items";
+  list.setAttribute("role", "list");
+  root.appendChild(list);
+  const footer = doc.createElement("div");
+  footer.className = "veo-checklist-footer";
+  const summary = doc.createElement("div");
+  summary.className = "veo-checklist-summary";
+  const count = doc.createElement("span");
+  count.className = "veo-checklist-count";
+  const percent = doc.createElement("span");
+  percent.className = "veo-checklist-percent";
+  summary.append(count, percent);
+  const bar = doc.createElement("div");
+  bar.className = "veo-checklist-bar";
+  const fill = doc.createElement("div");
+  fill.className = "veo-checklist-bar-fill";
+  bar.appendChild(fill);
+  footer.append(summary, bar);
+  root.appendChild(footer);
+  const paint = (progress) => {
+    list.textContent = "";
+    const visible = progress ? items.filter((i) => progress.has(i.guideId)) : items;
+    let done = 0;
+    for (const item of visible) {
+      const p = progress?.get(item.guideId) ?? null;
+      if (p?.completed) done++;
+      const row = doc.createElement("button");
+      row.type = "button";
+      row.className = `veo-checklist-item${p?.completed ? " veo-checklist-item--done" : ""}`;
+      row.setAttribute("role", "listitem");
+      const fraction = p && p.totalSteps > 0 ? p.currentStep / p.totalSteps : 0;
+      row.appendChild(buildRing(doc, fraction, p?.completed === true, st));
+      const texts = doc.createElement("span");
+      texts.className = "veo-checklist-texts";
+      const label = doc.createElement("span");
+      label.className = "veo-checklist-label";
+      label.textContent = (item.text ?? "").trim() || p?.guideName || "Gu\xEDa";
+      if (p && p.published === false) row.title = "Gu\xEDa no publicada: los usuarios no la ver\xE1n";
+      texts.appendChild(label);
+      if (p) {
+        const sub = doc.createElement("span");
+        sub.className = "veo-checklist-sub";
+        sub.textContent = renderSubtitle(st.subtitleTemplate, p);
+        texts.appendChild(sub);
+      }
+      row.appendChild(texts);
+      row.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (context.isPreview) return;
+        const start = p && !p.completed ? Math.min(p.currentStep, p.totalSteps - 1) : 0;
+        if (context.onOpenGuideAt) context.onOpenGuideAt(item.guideId, start);
+        else context.onOpenGuide?.(item.guideId);
+      });
+      list.appendChild(row);
+    }
+    const total = visible.length;
+    const pct = total > 0 ? Math.round(done / total * 100) : 0;
+    count.textContent = `${done} de ${total} ${total === 1 ? "completada" : "completadas"}`;
+    percent.textContent = `${pct}%`;
+    fill.style.width = `${pct}%`;
+    footer.hidden = total === 0;
+  };
+  if (context.isPreview && items.length === 0) {
+    const sample = /* @__PURE__ */ new Map([
+      [
+        "__sample_1",
+        {
+          guideId: "__sample_1",
+          guideName: "Configura tu primer env\xEDo",
+          totalSteps: 2,
+          currentStep: 1,
+          completed: false
+        }
+      ],
+      [
+        "__sample_2",
+        {
+          guideId: "__sample_2",
+          guideName: "Conecta tu tienda",
+          totalSteps: 2,
+          currentStep: 2,
+          completed: true
+        }
+      ]
+    ]);
+    items.push(
+      { guideId: "__sample_1", text: "Configura tu primer env\xEDo" },
+      { guideId: "__sample_2", text: "Conecta tu tienda" }
+    );
+    paint(sample);
+    const hint = doc.createElement("p");
+    hint.className = "veo-checklist-empty";
+    hint.textContent = "Ejemplo: agrega gu\xEDas a la lista desde Opciones.";
+    root.appendChild(hint);
+    return root;
+  }
+  paint(null);
+  if (context.fetchProgress && items.length > 0) {
+    void context.fetchProgress(items.map((i) => i.guideId)).then((rows) => paint(new Map(rows.map((r) => [r.guideId, r])))).catch(() => {
+    });
+  }
+  return root;
 }
 
 // src/plugins/guides/form-content.ts
@@ -2306,8 +2930,14 @@ function buildField(field, doc) {
       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 "nps": {
+      const min = typeof field.min === "number" ? field.min : 0;
+      const max = typeof field.max === "number" && field.max > min ? field.max : 10;
+      return buildScale(wrapper, doc, min, max, "veo-nps-btn", void 0, {
+        labels: field.scaleLabels ?? [],
+        showLabels: field.showLabels !== false
+      });
+    }
     case "rating":
       return buildScale(wrapper, doc, 1, 5, "veo-rating-btn", "\u2605");
     default: {
@@ -2320,17 +2950,21 @@ function buildField(field, doc) {
     }
   }
 }
-function buildScale(wrapper, doc, min, max, btnClass, symbol) {
+function buildScale(wrapper, doc, min, max, btnClass, symbol, opts = { labels: [], showLabels: false }) {
   const row = doc.createElement("div");
   row.className = "veo-form-scale";
   let selected;
   const buttons = [];
+  const labelOf = (n) => opts.labels[n - min]?.trim() ?? "";
+  const anyLabel = opts.showLabels && Array.from({ length: max - min + 1 }, (_, i) => min + i).some((n) => labelOf(n));
   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));
+    const lbl = labelOf(n);
+    btn.setAttribute("aria-label", lbl ? `${n} \xB7 ${lbl}` : String(n));
+    if (lbl) btn.title = lbl;
     btn.addEventListener("click", () => {
       selected = n;
       buttons.forEach((b, i) => {
@@ -2339,11 +2973,113 @@ function buildScale(wrapper, doc, min, max, btnClass, symbol) {
       });
     });
     buttons.push(btn);
-    row.appendChild(btn);
+    if (!anyLabel) {
+      row.appendChild(btn);
+      continue;
+    }
+    const item = doc.createElement("div");
+    item.className = `veo-scale-item${n === min ? " veo-scale-item--first" : n === max ? " veo-scale-item--last" : ""}`;
+    const text = doc.createElement("span");
+    text.className = "veo-scale-label";
+    text.textContent = lbl;
+    item.append(btn, text);
+    row.appendChild(item);
   }
   wrapper.appendChild(row);
   return { wrapper, read: () => selected };
 }
+
+// src/plugins/guides/layout.ts
+function groupLayout(blocks) {
+  const rows = /* @__PURE__ */ new Map();
+  const order = [];
+  let lastRow = -1;
+  blocks.forEach((block, index) => {
+    if (!block) return;
+    let row;
+    if (typeof block.row === "number" && Number.isFinite(block.row)) {
+      row = block.row;
+      lastRow = row;
+    } else {
+      row = lastRow + 0.5;
+      lastRow = row;
+    }
+    const col = typeof block.col === "number" && Number.isFinite(block.col) ? block.col : 0;
+    let r = rows.get(row);
+    if (!r) {
+      r = { row, columns: [] };
+      rows.set(row, r);
+      order.push(row);
+    }
+    let c = r.columns.find((x) => x.col === col);
+    if (!c) {
+      c = { col, blocks: [] };
+      r.columns.push(c);
+    }
+    c.blocks.push({ block, index });
+  });
+  return order.sort((a, b) => a - b).map((k) => {
+    const r = rows.get(k);
+    r.columns.sort((a, b) => a.col - b.col);
+    return r;
+  });
+}
+
+// src/plugins/guides/scroll-lock.ts
+var states = /* @__PURE__ */ new WeakMap();
+function lockScroll(doc = document) {
+  const html = doc.documentElement;
+  const body = doc.body;
+  if (!html || !body) return () => {
+  };
+  let state = states.get(doc);
+  if (!state) {
+    state = {
+      count: 0,
+      html: { overflow: html.style.overflow, paddingRight: html.style.paddingRight },
+      body: { overflow: body.style.overflow, paddingRight: body.style.paddingRight }
+    };
+    states.set(doc, state);
+    const win = doc.defaultView;
+    const gap = win ? Math.max(0, win.innerWidth - html.clientWidth) : 0;
+    if (gap > 0) body.style.paddingRight = `${gap}px`;
+    html.style.overflow = "hidden";
+    body.style.overflow = "hidden";
+  }
+  state.count += 1;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    const s = states.get(doc);
+    if (!s) return;
+    s.count -= 1;
+    if (s.count > 0) return;
+    states.delete(doc);
+    html.style.overflow = s.html.overflow;
+    html.style.paddingRight = s.html.paddingRight;
+    body.style.overflow = s.body.overflow;
+    body.style.paddingRight = s.body.paddingRight;
+  };
+}
+
+// src/plugins/guides/snooze.ts
+var KEY = (guideId) => `veo:snooze:${guideId}`;
+var UNIT_MS = {
+  hour: 36e5,
+  day: 864e5,
+  week: 6048e5
+};
+function snoozeDurationMs(every, unit) {
+  const n = Number.isFinite(every) && every > 0 ? Math.floor(every) : 1;
+  return n * (UNIT_MS[unit] ?? UNIT_MS.day);
+}
+function snoozeGuide(guideId, every, unit, now = Date.now()) {
+  try {
+    localStorage.setItem(KEY(guideId), String(now + snoozeDurationMs(every, unit)));
+  } catch {
+  }
+}
 var INFO_GLYPH = "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021";
 var QUESTION_GLYPH = "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75";
 var STAR_GLYPH = "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z";
@@ -2533,6 +3269,32 @@ var ROW_ALIGN = {
   center: "center",
   right: "flex-end"
 };
+var ROW_JUSTIFY = { ...ROW_ALIGN, distribute: "space-between" };
+var ROW_VALIGN = {
+  top: "flex-start",
+  center: "center",
+  bottom: "flex-end"
+};
+function applyRowStyle(rowEl, style) {
+  const s = rowEl.style;
+  if (typeof style.background === "string" && style.background) s.background = style.background;
+  for (const side of ["Top", "Right", "Bottom", "Left"]) {
+    const p = style[`padding${side}`];
+    if (typeof p === "number" && Number.isFinite(p))
+      s.setProperty(`padding-${side.toLowerCase()}`, `${p}px`);
+    const m = style[`margin${side}`];
+    if (typeof m === "number" && Number.isFinite(m))
+      s.setProperty(`margin-${side.toLowerCase()}`, `${m}px`);
+  }
+  if (typeof style.minHeight === "number" && Number.isFinite(style.minHeight) && style.minHeight > 0) {
+    s.minHeight = `${style.minHeight}px`;
+  }
+  if (style.align && ROW_JUSTIFY[style.align]) {
+    s.justifyContent = ROW_JUSTIFY[style.align];
+    rowEl.classList.add("veo-row--aligned");
+  }
+  if (style.valign && ROW_VALIGN[style.valign]) s.alignItems = ROW_VALIGN[style.valign];
+}
 var CompositeRenderer = class extends BaseRenderer {
   async render(context) {
     const idx = context.nav?.stepIndex ?? 0;
@@ -2551,7 +3313,8 @@ var CompositeRenderer = class extends BaseRenderer {
       const rawDoc = anchor.ownerDocument ?? document;
       const { cleanup } = mountCodeBlock(soleCode, rawDoc, context, void 0, {
         anchor,
-        pos: inlinePosOf(step.inlinePosition)
+        pos: inlinePosOf(step.inlinePosition),
+        ...context.isPreview && soleCode.editorId ? { tagBlockId: soleCode.editorId } : {}
       });
       this.registerCleanup(cleanup);
       context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
@@ -2564,6 +3327,10 @@ var CompositeRenderer = class extends BaseRenderer {
     const card = doc.createElement("div");
     card.className = "veo-card";
     applyCompositeDesign(card, design);
+    if (typeof design.ariaLabel === "string" && design.ariaLabel.trim()) {
+      card.setAttribute("role", "dialog");
+      card.setAttribute("aria-label", design.ariaLabel.trim());
+    }
     const dismiss = (action, meta) => {
       context.onInteraction({
         guideId: context.guide.guideId,
@@ -2574,6 +3341,28 @@ var CompositeRenderer = class extends BaseRenderer {
     };
     const readers = [];
     this.buildContent(card, step.blocks ?? [], doc, context, idx, readers, host);
+    if (blocks.length === 0) {
+      card.classList.add("veo-card--empty");
+      if (context.isPreview) {
+        const zone = doc.createElement("div");
+        zone.className = "veo-card-empty-zone";
+        const plus = doc.createElement("b");
+        plus.textContent = "+";
+        const text = doc.createElement("span");
+        text.textContent = "Clic para agregar contenido";
+        zone.append(plus, text);
+        card.appendChild(zone);
+        const applyNarrow = () => {
+          card.classList.toggle("veo-card--narrow", card.clientWidth < NARROW_CARD_WIDTH);
+        };
+        if (typeof ResizeObserver !== "undefined") {
+          const ro = new ResizeObserver(applyNarrow);
+          ro.observe(card);
+          this.registerCleanup(() => ro.disconnect());
+        }
+        applyNarrow();
+      }
+    }
     const lastBlock = card.lastElementChild;
     if (lastBlock && !lastBlock.style.marginBottom) lastBlock.style.marginBottom = "0";
     let closeTooltip = null;
@@ -2591,6 +3380,14 @@ var CompositeRenderer = class extends BaseRenderer {
       if (closeColor) closeBtn.style.color = closeColor;
       const closePos = typeof design.closePosition === "string" ? design.closePosition : "top-right";
       applyClosePosition(closeBtn, closePos);
+      for (const side of ["Top", "Right", "Bottom", "Left"]) {
+        const p = design[`closePadding${side}`];
+        if (typeof p === "number")
+          closeBtn.style.setProperty(`padding-${side.toLowerCase()}`, `${p}px`);
+        const m = design[`closeMargin${side}`];
+        if (typeof m === "number")
+          closeBtn.style.setProperty(`margin-${side.toLowerCase()}`, `${m}px`);
+      }
       if (hoverColor) {
         closeBtn.addEventListener("mouseenter", () => {
           closeBtn.style.color = hoverColor;
@@ -2600,6 +3397,7 @@ var CompositeRenderer = class extends BaseRenderer {
         });
       }
       card.appendChild(closeBtn);
+      reserveCloseSpace(card, blocks, closePos, design);
     }
     if (badgeMode && anchor) {
       closeTooltip = this.renderBadgeMode(
@@ -2630,6 +3428,7 @@ var CompositeRenderer = class extends BaseRenderer {
         const bz = typeof design.backdropZIndex === "number" ? design.backdropZIndex : 2e5;
         bg.style.zIndex = String(bz);
         root.appendChild(bg);
+        this.registerCleanup(lockScroll(doc));
         if (design.targetAbove === true) this.registerCleanup(liftTarget(anchor, bz + 1));
       }
       const wrapper = doc.createElement("div");
@@ -2656,6 +3455,7 @@ var CompositeRenderer = class extends BaseRenderer {
             this.closeOrSkip(context);
           }
         });
+        this.registerCleanup(lockScroll(doc));
       }
       applyViewportPosition(card, step.position, design);
       overlay.appendChild(card);
@@ -2673,83 +3473,217 @@ var CompositeRenderer = class extends BaseRenderer {
         ...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";
-        let rowAlign;
-        while (i < blocks.length && blocks[i]?.type === "button") {
-          const bb = blocks[i];
-          if (!rowAlign) {
-            const a = bb.style?.align;
-            if (a === "left" || a === "center" || a === "right") rowAlign = a;
+    const tag = (node, block, index) => {
+      node.dataset.veoBlock = String(index);
+      if (block.editorId) node.dataset.veoBlockId = block.editorId;
+      return node;
+    };
+    const placeholder = (block, label) => {
+      if (!context.isPreview || !block.editorId) return null;
+      const el2 = doc.createElement("div");
+      el2.className = "veo-block-placeholder";
+      el2.textContent = label;
+      return el2;
+    };
+    const buildSequence = (container, cell) => {
+      let i = 0;
+      while (i < cell.length) {
+        const { block: b, index } = cell[i];
+        if (b.type === "button") {
+          const row = doc.createElement("div");
+          row.className = "veo-guide-actions";
+          let rowAlign;
+          while (i < cell.length && cell[i]?.block.type === "button") {
+            const { block: bb, index: bi } = cell[i];
+            if (!rowAlign) {
+              const a = bb.style?.align;
+              if (a === "left" || a === "center" || a === "right") rowAlign = a;
+            }
+            row.appendChild(tag(this.buildButton(bb, doc, context, idx, readers, emit), bb, bi));
+            i++;
           }
-          row.appendChild(this.buildButton(bb, doc, context, idx, readers, emit));
+          if (rowAlign) row.style.justifyContent = ROW_ALIGN[rowAlign] ?? "flex-end";
+          container.appendChild(row);
+          continue;
+        }
+        if (b.type === "code") {
+          const { node: node2, cleanup } = mountCodeBlock(b, doc, context, host);
+          const el2 = node2 ?? placeholder(b, "Bloque de c\xF3digo");
+          if (el2) container.appendChild(tag(el2, b, index));
+          this.registerCleanup(cleanup);
           i++;
+          continue;
         }
-        if (rowAlign) row.style.justifyContent = ROW_ALIGN[rowAlign] ?? "flex-end";
-        card.appendChild(row);
-        continue;
-      }
-      if (b.type === "code") {
-        const { node: node2, cleanup } = mountCodeBlock(b, doc, context, host);
-        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);
+        if (b.type === "form") {
+          container.appendChild(tag(this.buildForm(b, doc, context, idx, readers, emit), b, index));
+          i++;
+          continue;
+        }
+        if (b.type === "checklist") {
+          const el2 = buildChecklistBlock(b, doc, context);
+          applyBlockStyle(el2, b.style, "text");
+          el2.style.alignSelf = "stretch";
+          el2.style.width = "100%";
+          container.appendChild(tag(el2, b, index));
+          i++;
+          continue;
         }
-        card.appendChild(form);
+        const node = buildContentBlock(b, doc, { editing: context.isPreview === true }) ?? placeholder(
+          b,
+          b.type === "image" ? "Imagen (sin URL)" : b.type === "video" ? "Video (elige proveedor y pega la URL)" : "Bloque vac\xEDo"
+        );
+        if (node) container.appendChild(tag(node, b, index));
         i++;
+      }
+    };
+    const rowStyles = context.guide.guideSteps[idx]?.rows;
+    for (const row of groupLayout(blocks)) {
+      const rowStyle = Number.isInteger(row.row) ? rowStyles?.[String(row.row)] : void 0;
+      if (row.columns.length === 1 && !rowStyle) {
+        buildSequence(card, row.columns[0].blocks);
         continue;
       }
-      const node = buildContentBlock(b, doc);
-      if (node) card.appendChild(node);
-      i++;
+      const rowEl = doc.createElement("div");
+      rowEl.className = "veo-row";
+      if (Number.isInteger(row.row)) rowEl.dataset.veoRow = String(row.row);
+      for (const column of row.columns) {
+        const colEl = doc.createElement("div");
+        colEl.className = "veo-col";
+        buildSequence(colEl, column.blocks);
+        rowEl.appendChild(colEl);
+      }
+      if (rowStyle) applyRowStyle(rowEl, rowStyle);
+      card.appendChild(rowEl);
     }
   }
   /** Botón con enrutado de acción (navegación / cierre / url / guía / envío de forms). */
-  buildButton(block, doc, context, idx, readers, emit) {
+  /**
+   * Bloque `form` (encuesta): pregunta (rich text del bloque) + campos + botón
+   * de envío propio (`submit`). Con pregunta, el label del campo se omite (sería
+   * la misma pregunta dos veces) y pasa a `aria-label` del input. El estilo del
+   * bloque viste la pregunta (preset/alineación/color); los márgenes van al
+   * contenedor del bloque entero.
+   */
+  buildForm(b, doc, context, idx, readers, emit) {
+    const form = doc.createElement("div");
+    form.className = "veo-form";
+    const style = b.style ?? {};
+    const { marginTop, marginBottom, ...questionStyle } = style;
+    for (const [side, v] of [
+      ["marginTop", marginTop],
+      ["marginBottom", marginBottom]
+    ]) {
+      if (typeof v === "number" && Number.isFinite(v)) form.style[side] = `${v}px`;
+    }
+    let question = null;
+    if (typeof b.html === "string" && b.html || typeof b.text === "string" && b.text) {
+      question = doc.createElement("div");
+      question.className = "veo-form-question";
+      if (typeof b.html === "string" && b.html) question.appendChild(renderRichText(b.html, doc));
+      else question.textContent = b.text;
+      applyBlockStyle(question, questionStyle, "text");
+      form.appendChild(question);
+    }
+    const questionText = question?.textContent?.trim() ?? "";
+    const own = [];
+    for (const field of b.fields ?? []) {
+      const { wrapper, read } = buildField(field, doc);
+      const st = b.style ?? {};
+      if (typeof st.scaleColor === "string" && st.scaleColor) {
+        wrapper.style.setProperty("--veo-scale-color", st.scaleColor);
+      }
+      if (typeof st.scaleSize === "number" && st.scaleSize >= 24 && st.scaleSize <= 96) {
+        wrapper.style.setProperty("--veo-scale-size", `${st.scaleSize}px`);
+      }
+      if (question) {
+        wrapper.querySelector(".veo-form-label")?.remove();
+        if (questionText) {
+          for (const inp of wrapper.querySelectorAll("input, textarea, select")) {
+            inp.setAttribute("aria-label", questionText);
+          }
+        }
+      }
+      const reader = { field, read, blockId: b.id ?? null };
+      readers.push(reader);
+      own.push(reader);
+      form.appendChild(wrapper);
+    }
+    if (b.submit) {
+      const actions = doc.createElement("div");
+      actions.className = "veo-guide-actions";
+      const submit = { ...b.submit, type: "button" };
+      const sa = submit.style?.align;
+      if (sa === "left" || sa === "center" || sa === "right") {
+        actions.style.justifyContent = ROW_ALIGN[sa] ?? "flex-end";
+      }
+      actions.appendChild(this.buildButton(submit, doc, context, idx, readers, emit, own));
+      form.appendChild(actions);
+    }
+    return form;
+  }
+  buildButton(block, doc, context, idx, readers, emit, submitFirst) {
     const btn = doc.createElement("button");
     btn.type = "button";
     btn.className = "veo-guide-cta";
     btn.textContent = block.text?.trim() || "OK";
+    const st = block.style ?? {};
+    if (st.preset === "secondary" || st.preset === "link") {
+      btn.classList.add(`veo-guide-cta--${st.preset}`);
+    }
+    if (typeof st.ariaLabel === "string" && st.ariaLabel.trim()) {
+      btn.setAttribute("aria-label", st.ariaLabel.trim());
+    }
     applyBlockStyle(btn, block.style, "button");
     const nav = context.nav?.callbacks;
-    btn.addEventListener("click", () => {
-      switch (block.action) {
+    const runSimple = (spec) => {
+      switch (spec.action) {
         case "next":
-          emit(block);
           if (nav) nav.onNext();
           else context.onClose();
           break;
         case "prev":
-          emit(block);
           nav?.onBack();
           break;
+        case "goto":
+          if (nav?.onGoto && typeof spec.targetStep === "number") nav.onGoto(spec.targetStep);
+          else context.onClose();
+          break;
+        case "snooze":
+          snoozeGuide(
+            context.guide.guideId,
+            typeof spec.snoozeEvery === "number" ? spec.snoozeEvery : 1,
+            spec.snoozeUnit ?? "day"
+          );
+          context.onClose();
+          break;
         case "url":
-          emit(block);
-          if (typeof block.url === "string" && isSafeUrl(block.url)) {
-            window.open(block.url, "_blank", "noopener,noreferrer");
+          if (typeof spec.url === "string" && isSafeUrl(spec.url)) {
+            if (spec.newTab === false) window.location.assign(spec.url);
+            else window.open(spec.url, "_blank", "noopener,noreferrer");
           }
           break;
         case "guide":
-          emit(block);
-          if (block.targetGuideId) context.onOpenGuide?.(block.targetGuideId);
+          if (spec.targetGuideId) context.onOpenGuide?.(spec.targetGuideId);
+          this.closeOrSkip(context);
+          break;
+        default:
           this.closeOrSkip(context);
+      }
+    };
+    const runSecond = () => {
+      if (block.secondAction?.action) runSimple(block.secondAction);
+    };
+    const runActions = () => {
+      switch (block.action) {
+        case "next":
+        case "prev":
+        case "goto":
+        case "snooze":
+        case "url":
+        case "guide":
+          emit(block);
+          runSimple(block);
+          runSecond();
           break;
         case "submit-forms":
         case "submit-forms-advance":
@@ -2768,7 +3702,12 @@ var CompositeRenderer = class extends BaseRenderer {
         default:
           emit(block);
           this.closeOrSkip(context);
+          runSecond();
       }
+    };
+    btn.addEventListener("click", () => {
+      if (submitFirst) this.submitForms(submitFirst, context, idx, btn, runActions);
+      else runActions();
     });
     return btn;
   }
@@ -2787,17 +3726,27 @@ var CompositeRenderer = class extends BaseRenderer {
       }
       answers[field.key] = value;
     }
-    if (readers.length > 0 && Object.keys(answers).length === 0) return;
+    if (Object.keys(answers).length === 0) {
+      onDone();
+      return;
+    }
     btn.disabled = true;
     const submitFn = context.onFormSubmit ?? (() => Promise.resolve(true));
-    void submitFn(answers).then((ok) => {
+    const blockIds = new Set(
+      readers.filter((r) => answers[r.field.key] !== void 0).map((r) => r.blockId ?? "")
+    );
+    const pollId = blockIds.size === 1 ? [...blockIds][0] || void 0 : void 0;
+    void submitFn(answers, { ...pollId ? { pollId } : {}, stepIndex: idx }).then((ok) => {
       btn.disabled = false;
       if (!ok) return;
-      context.onInteraction({
-        guideId: context.guide.guideId,
-        stepIndex: idx,
-        action: "completed"
-      });
+      const lastStep = !context.nav || idx >= context.nav.totalSteps - 1;
+      if (lastStep) {
+        context.onInteraction({
+          guideId: context.guide.guideId,
+          stepIndex: idx,
+          action: "completed"
+        });
+      }
       onDone();
     });
   }
@@ -2911,21 +3860,38 @@ function inlinePosOf(p) {
 function applyViewportPosition(card, position, design) {
   const s = card.style;
   s.position = "fixed";
-  const M = "16px";
+  const BASE = 16;
+  const m = (k) => typeof design[k] === "number" && Number.isFinite(design[k]) ? design[k] : 0;
+  s.margin = "0";
   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;
+  if (v === "top") s.top = `${BASE + m("marginTop")}px`;
+  else if (v === "bottom") s.bottom = `${BASE + m("marginBottom")}px`;
   else s.top = "50%";
-  if (h === "left") s.left = M;
-  else if (h === "right") s.right = M;
+  if (h === "left") s.left = `${BASE + m("marginLeft")}px`;
+  else if (h === "right") s.right = `${BASE + m("marginRight")}px`;
   else s.left = "50%";
-  const tx = h === "middle" ? "-50%" : "0";
-  const ty = v === "middle" ? "-50%" : "0";
+  const dx = m("marginLeft") - m("marginRight");
+  const dy = m("marginTop") - m("marginBottom");
+  const tx = h === "middle" ? `calc(-50% + ${dx}px)` : "0";
+  const ty = v === "middle" ? `calc(-50% + ${dy}px)` : "0";
   s.transform = tx === "0" && ty === "0" ? "" : `translate(${tx}, ${ty})`;
 }
 var CLOSE_INSET = "10px";
+var CLOSE_RESERVE_PX = 42;
+var CARD_DEFAULT_PAD_PX = 20;
+function reserveCloseSpace(card, blocks, position, design) {
+  if (blocks.length === 0) return;
+  const side = position.includes("bottom") ? "Bottom" : "Top";
+  const edgeBlock = side === "Top" ? blocks[0] : blocks[blocks.length - 1];
+  if (edgeBlock?.type === "image") return;
+  const margin = design[`closeMargin${side}`];
+  const need = CLOSE_RESERVE_PX + (typeof margin === "number" ? margin : 0);
+  const current = design[`padding${side}`];
+  const have = typeof current === "number" ? current : CARD_DEFAULT_PAD_PX;
+  if (have < need) card.style.setProperty(`padding-${side.toLowerCase()}`, `${need}px`);
+}
 function applyClosePosition(btn, position) {
   const s = btn.style;
   s.top = "auto";
@@ -2990,10 +3956,17 @@ async function anchorPosition(anchor, wrapper, caret, preferred = "bottom") {
     window.removeEventListener("resize", reposition);
   };
 }
+var MIN_CARD_WIDTH = 120;
+var NARROW_CARD_WIDTH = 260;
 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 (design.colorMode === "dark") {
+    s.background = "#1f1d1b";
+    s.color = "#f5f0eb";
+    card.classList.add("veo-card--dark");
+  }
   if (strv(design.background)) s.background = design.background;
   const textColor = strv(design.color) ?? strv(design.textColor);
   if (textColor) s.color = textColor;
@@ -3015,13 +3988,14 @@ function applyCompositeDesign(card, design) {
     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)"}`;
   }
+  const width = typeof design.width === "number" && Number.isFinite(design.width) ? `${Math.max(MIN_CARD_WIDTH, design.width)}px` : null;
   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);
+    s.width = "100%";
+    if (width) s.maxWidth = width;
+  } else if (width) {
+    s.width = width;
   }
   for (const side of ["Top", "Right", "Bottom", "Left"]) {
     const p = px(design[`padding${side}`]);
@@ -3125,6 +4099,7 @@ var FormRenderer = class extends BaseRenderer {
     mountFormContent(card, context, doc);
     overlay.appendChild(card);
     root.appendChild(overlay);
+    this.registerCleanup(lockScroll(doc));
     const dismiss = () => {
       context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "dismissed" });
       context.onClose();
@@ -3252,6 +4227,18 @@ var ModalRenderer = class extends BaseRenderer {
   constructor() {
     super(...arguments);
     this.overlay = null;
+    /** Suelta el bloqueo de scroll del backdrop (null = sin backdrop). */
+    this.releaseScroll = null;
+  }
+  /** Con backdrop la app de atrás queda congelada; sin él, scrollea normal. */
+  syncScrollLock(step) {
+    const wantLock = step.style?.backdrop !== false;
+    if (wantLock && !this.releaseScroll) {
+      this.releaseScroll = lockScroll(this.host?.ownerDocument ?? document);
+    } else if (!wantLock && this.releaseScroll) {
+      this.releaseScroll();
+      this.releaseScroll = null;
+    }
   }
   render(context) {
     const idx = context.nav?.stepIndex ?? 0;
@@ -3263,6 +4250,7 @@ var ModalRenderer = class extends BaseRenderer {
     const overlay = ownerDocument.createElement("div");
     overlay.className = overlayClassOf(step);
     this.overlay = overlay;
+    this.syncScrollLock(step);
     const card = ownerDocument.createElement("div");
     card.className = "veo-modal-card";
     const dismiss = (action, ctaUrl, meta) => {
@@ -3320,9 +4308,12 @@ var ModalRenderer = class extends BaseRenderer {
   }
   onLiveUpdate(step) {
     if (this.overlay) this.overlay.className = overlayClassOf(step);
+    this.syncScrollLock(step);
   }
   destroy() {
     this.overlay = null;
+    this.releaseScroll?.();
+    this.releaseScroll = null;
     super.destroy();
   }
 };
@@ -3536,7 +4527,9 @@ var GuidePreviewController = class {
           if (event.action === "shown") shown = true;
         },
         onClose: () => this.close(true),
-        badgeOpen: this.input?.badgeOpen === true,
+        // Sin indicación explícita, el badge se abre solo si la guía arranca
+        // sola (como en el runtime); `manual` lo deja cerrado.
+        badgeOpen: this.input?.badgeOpen ?? isAutomaticActivation(this.input?.activationRules),
         onTrack: () => {
         },
         // Encadenado en preview: no-op — el editor no puede montar otra guía
@@ -3546,6 +4539,7 @@ var GuidePreviewController = class {
         // Preview de forms: por defecto simula el envío SIN escribir props;
         // el caller puede pasar `formSubmit` real (link de preview).
         onFormSubmit: this.input?.formSubmit ?? (() => Promise.resolve(true)),
+        ...this.input?.fetchProgress ? { fetchProgress: this.input.fetchProgress } : {},
         isPreview: true,
         ...this.input?.formSubmit && this.input.formSubmitNote !== void 0 ? { previewNote: this.input.formSubmitNote } : {}
       });
@@ -3723,9 +4717,35 @@ function matchesUrl(matcher, pageUrl) {
   }
 }
 function stepMatchesPage(loc, pageUrl) {
-  if (!loc || loc.scope === "sitewide" || !loc.pattern) return true;
+  if (!loc || loc.scope === "sitewide") return true;
+  if (loc.scope === "pages") {
+    const rules = loc.rules ?? [];
+    return rules.some((r) => pageRuleMatches(r, pageUrl));
+  }
+  if (!loc.pattern) return true;
   return matchesUrl({ type: loc.matchType ?? "prefix", pattern: loc.pattern }, pageUrl);
 }
+function pageRuleMatches(rule, pageUrl) {
+  const pattern = rule.pattern.toLowerCase();
+  const candidates = urlCandidates(pageUrl).map((c) => c.toLowerCase());
+  switch (rule.type) {
+    case "exact":
+      return candidates.some((c) => c === pattern);
+    case "prefix":
+      return candidates.some((c) => c.startsWith(pattern));
+    case "contains":
+      return candidates.some((c) => c.includes(pattern));
+    case "regex":
+      try {
+        const re = new RegExp(rule.pattern, "i");
+        return candidates.some((c) => re.test(c));
+      } catch {
+        return false;
+      }
+    default:
+      return false;
+  }
+}
 
 // src/plugins/builder/bridge-protocol.ts
 var VEO_BUILDER_SOURCE = "veo-builder";
@@ -3742,6 +4762,9 @@ var ICONS = {
   chevronDown: '<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>',
   chevronUp: '<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>',
   plus: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>',
+  pencil: '<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>',
+  copy: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"/>',
+  trash: '<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>',
   cursor: '<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59"/>',
   spinner: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"/>'
 };
@@ -3927,8 +4950,14 @@ function injectBuilderChrome(opts) {
     stepsList.append(activation);
     s.steps.forEach((st, i) => {
       const thumb = st.presentation === "inline" ? '<div class="veo-thumb veo-thumb-inline"><i></i><i></i><i></i></div>' : '<div class="veo-thumb"><i></i><i></i><b></b></div>';
-      const card = stepCard(thumb, st.label, s.section === "step" && s.activeStep === i);
-      card.addEventListener("click", () => act({ action: "select-step", index: i }));
+      const isStepView = s.section === "step" || s.section === "block" || s.section === "add-block" || s.section === "row" || s.section === "structure";
+      const card = stepCard(thumb, st.label, isStepView && s.activeStep === i, {
+        // Se pueden borrar TODOS los pasos (el panel vuelve a Activación).
+        canRemove: true,
+        onEdit: () => act({ action: "select-step", index: i }),
+        onDuplicate: () => act({ action: "duplicate-step", index: i }),
+        onRemove: () => act({ action: "remove-step", index: i })
+      });
       stepsList.append(card);
     });
     const add = el("button", "veo-step-add", `${svg("plus", 18)}<span>Agregar paso</span>`);
@@ -3957,16 +4986,40 @@ function injectBuilderChrome(opts) {
     }
   };
 }
-function stepCard(inner, label, active) {
-  const b = el(
-    "button",
-    `veo-step${active ? " is-active" : ""}`,
-    `<div class="veo-step-box">${inner}</div><span class="veo-step-label"></span>`
+function stepCard(inner, label, active, actions) {
+  const cls = `veo-step${active ? " is-active" : ""}`;
+  if (!actions) {
+    const b = el(
+      "button",
+      cls,
+      `<div class="veo-step-box">${inner}</div><span class="veo-step-label"></span>`
+    );
+    b.type = "button";
+    b.querySelector(".veo-step-label").textContent = label;
+    b.setAttribute("aria-pressed", active ? "true" : "false");
+    return b;
+  }
+  const card = el(
+    "div",
+    cls,
+    `<div class="veo-step-box">${inner}<div class="veo-step-hover"><div class="veo-step-hover-top"><button type="button" class="veo-step-icon veo-step-remove" title="Eliminar paso" aria-label="Eliminar paso">${svg("trash", 14)}</button><button type="button" class="veo-step-icon veo-step-duplicate" title="Duplicar paso" aria-label="Duplicar paso">${svg("copy", 14)}</button></div><div class="veo-step-hover-main"><button type="button" class="veo-step-edit">${svg("pencil", 14)}<span>Editar</span></button></div></div></div><span class="veo-step-label"></span>`
   );
-  b.type = "button";
-  b.querySelector(".veo-step-label").textContent = label;
-  b.setAttribute("aria-pressed", active ? "true" : "false");
-  return b;
+  card.querySelector(".veo-step-label").textContent = label;
+  card.setAttribute("aria-current", active ? "step" : "false");
+  const remove = card.querySelector(".veo-step-remove");
+  remove.disabled = !actions.canRemove;
+  if (!actions.canRemove) remove.title = "La gu\xEDa necesita al menos un paso";
+  const on = (sel, fn) => {
+    card.querySelector(sel)?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      fn();
+    });
+  };
+  on(".veo-step-edit", actions.onEdit);
+  on(".veo-step-duplicate", actions.onDuplicate);
+  on(".veo-step-remove", actions.onRemove);
+  card.addEventListener("click", actions.onEdit);
+  return card;
 }
 var CHROME_CSS = `
 :host { all: initial; }
@@ -4051,10 +5104,31 @@ var CHROME_CSS = `
 .veo-steps-list { display: flex; align-items: flex-start; gap: 20px; }
 .veo-step { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
 .veo-step-box {
+  position: relative; overflow: hidden;
   width: 116px; height: 64px; border-radius: 10px; background: #fff; border: 2px solid transparent;
   display: flex; align-items: center; justify-content: center; color: #2b2623;
   box-shadow: 0 1px 2px rgba(0,0,0,0.06);
 }
+/* Capa de acciones del paso: aparece al pasar el mouse o al enfocar un bot\xF3n. */
+.veo-step-hover {
+  position: absolute; inset: 0; background: #2b2623; border-radius: 8px;
+  display: flex; flex-direction: column; padding: 3px 4px 6px; box-sizing: border-box;
+  opacity: 0; transition: opacity 120ms ease-out;
+}
+.veo-step:hover .veo-step-hover, .veo-step:focus-within .veo-step-hover { opacity: 1; }
+.veo-step-hover-top { display: flex; justify-content: space-between; align-items: center; }
+.veo-step-hover-main { flex: 1; display: flex; align-items: center; justify-content: center; }
+.veo-step-icon {
+  border: 0; background: transparent; color: #fff; cursor: pointer; padding: 0;
+  width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
+}
+.veo-step-icon:hover { background: rgba(255,255,255,0.14); }
+.veo-step-icon:disabled { opacity: 0.35; cursor: default; background: transparent; }
+.veo-step-edit {
+  width: 100%; margin: 0 6px; border: 0; background: #dbeefc; color: #1d6fb8; font: inherit; font-size: 13px; font-weight: 600;
+  border-radius: 6px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+}
+.veo-step-edit:hover { background: #cbe4f9; }
 .veo-step.is-active .veo-step-box { border-color: #b74d00; }
 .veo-step-label { font-size: 13px; color: #6b635d; }
 .veo-step.is-active .veo-step-label { color: #2b2623; font-weight: 600; }
@@ -4097,6 +5171,8 @@ function injectBuilderPanel(opts) {
       },
       isVisible: () => false,
       setTopOffset: () => {
+      },
+      setSize: () => {
       }
     };
   }
@@ -4149,6 +5225,21 @@ function injectBuilderPanel(opts) {
     card.style.display = next && !(popped && !popped.closed) ? "" : "none";
   };
   minimize.addEventListener("click", () => setVisible(false));
+  let compactRestore = null;
+  const setSize = (size) => {
+    if (maximized || popped && !popped.closed) return;
+    if (size) {
+      if (!compactRestore) compactRestore = { w: card.offsetWidth, h: card.offsetHeight };
+      card.style.minHeight = "0";
+      card.style.width = `${clamp3(Math.round(size.width), MIN_W, window.innerWidth - MARGIN * 2)}px`;
+      card.style.height = `${clamp3(Math.round(size.height) + HEADER_H, HEADER_H + 80, window.innerHeight - top - MARGIN)}px`;
+    } else if (compactRestore) {
+      card.style.minHeight = "";
+      card.style.width = `${compactRestore.w}px`;
+      card.style.height = `${compactRestore.h}px`;
+      compactRestore = null;
+    }
+  };
   maximize.addEventListener("click", () => {
     maximized = !maximized;
     if (maximized) {
@@ -4248,6 +5339,7 @@ function injectBuilderPanel(opts) {
       title.textContent = t;
     },
     setVisible,
+    setSize,
     isVisible: () => visible,
     setTopOffset: (px) => {
       topOffset = px;
@@ -4894,6 +5986,9 @@ function initBuilderMode() {
   let staticTarget = null;
   let manipulator = null;
   let dropTarget = null;
+  let cardClick = null;
+  let rawBlock = null;
+  let selectedBlockId = null;
   let dragGhost = null;
   let previewStepIndex = 0;
   let pendingPreview = null;
@@ -4902,6 +5997,7 @@ function initBuilderMode() {
   let previewTrigger = null;
   let previewFired = false;
   let previewDelay = null;
+  let previewDismissed = false;
   let panelWasVisible = true;
   const getTarget = () => panel ? panel.target() : staticTarget;
   const post = (event) => {
@@ -4913,15 +6009,751 @@ function initBuilderMode() {
   };
   const previewMatchesPage = (cmd) => stepMatchesPage(previewStep(cmd)?.pageLocation, window.location.href);
   const postPreviewStatus = (payload) => post({ type: "preview-status", payload });
-  const withholdPreview = () => {
+  const detachPreviewTools = () => {
     manipulator?.detach();
     manipulator = null;
     dropTarget?.detach();
     dropTarget = null;
+    cardClick?.();
+    cardClick = null;
+    rowHover?.();
+    rowHover = null;
+    hoverRowId = null;
+    hoverCard = false;
+    rawBlock?.detach();
+    rawBlock = null;
+    shownPreview = null;
+  };
+  const withholdPreview = () => {
+    detachPreviewTools();
+    shownPreview = null;
     closeGuidePreview();
   };
+  const FRAME_PAD = 4;
+  const FRAME_MIN_H = 0;
+  const TOOLBAR_H = 30;
+  const ICON = {
+    pencil: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/></svg>',
+    copy: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"/></svg>',
+    trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>'
+  };
+  const ICON_MOVE = {
+    left: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 12h-15m0 0 6.75 6.75M4.5 12l6.75-6.75"/></svg>',
+    right: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12h15m0 0-6.75-6.75M19.5 12l-6.75 6.75"/></svg>'
+  };
+  const moveAbility = (blocks, blockId) => {
+    for (const row of groupLayout(blocks)) {
+      for (let c = 0; c < row.columns.length; c++) {
+        const col = row.columns[c];
+        if (!col.blocks.some((b) => b.block.editorId === blockId)) continue;
+        return { left: c > 0, right: c < row.columns.length - 1 };
+      }
+    }
+    return { left: false, right: false };
+  };
+  let previewBlocks = [];
+  let hoverRowId = null;
+  let selectedRowId = null;
+  let rowHover = null;
+  let hoverCard = false;
+  let panelSection = null;
+  let shownPreview = null;
+  const structureOf = (step) => {
+    if (!step) return "";
+    const { blocks, ...rest } = step;
+    return JSON.stringify({
+      rest,
+      blocks: (blocks ?? []).map((b) => {
+        const { text: _t, html: _h, style: _s, ...keep } = b;
+        return keep;
+      })
+    });
+  };
+  const tryPatchPreview = (cmd) => {
+    const prev = shownPreview;
+    if (!prev || cmd.guide.guideType !== "composite" || prev.guide.guideType !== "composite") {
+      return false;
+    }
+    const idx = cmd.guide.startStepIndex ?? 0;
+    if ((prev.guide.startStepIndex ?? 0) !== idx) return false;
+    const guideSig = (g) => JSON.stringify({ ...g, guideSteps: void 0 });
+    if (guideSig(prev.guide) !== guideSig(cmd.guide) || prev.editable !== cmd.editable)
+      return false;
+    const host = document.querySelector("[data-veo-guide]");
+    const card = host ? previewCard(host) : null;
+    if (!host || !card) return false;
+    const prevStep = prev.guide.guideSteps[idx];
+    const nextStep = cmd.guide.guideSteps[idx];
+    if (!prevStep || !nextStep) return false;
+    if (structureOf(prevStep) !== structureOf(nextStep)) return false;
+    const doc = card.ownerDocument;
+    const prevBlocks = prevStep.blocks ?? [];
+    const nextBlocks = nextStep.blocks ?? [];
+    for (let i = 0; i < nextBlocks.length; i++) {
+      const a = prevBlocks[i];
+      const b = nextBlocks[i];
+      if (a.text === b.text && a.html === b.html && JSON.stringify(a.style) === JSON.stringify(b.style)) {
+        continue;
+      }
+      if (!b.editorId) return false;
+      const node = card.querySelector(`[data-veo-block-id="${b.editorId}"]`);
+      if (!node) return false;
+      if (b.type === "button") {
+        node.textContent = b.text?.trim() || "OK";
+        node.removeAttribute("style");
+        node.classList.remove("veo-guide-cta--secondary", "veo-guide-cta--link");
+        const st = b.style ?? {};
+        if (st.preset === "secondary" || st.preset === "link") {
+          node.classList.add(`veo-guide-cta--${st.preset}`);
+        }
+        if (typeof st.ariaLabel === "string" && st.ariaLabel.trim()) {
+          node.setAttribute("aria-label", st.ariaLabel.trim());
+        } else node.removeAttribute("aria-label");
+        applyBlockStyle(node, b.style, "button");
+        continue;
+      }
+      if (b.type === "code" || b.type === "form") return false;
+      const fresh = buildContentBlock(b, doc, { editing: true }) ?? (() => {
+        const el2 = doc.createElement("div");
+        el2.className = "veo-block-placeholder";
+        el2.textContent = b.type === "image" ? "Imagen (sin URL)" : b.type === "video" ? "Video (elige proveedor y pega la URL)" : "Bloque vac\xEDo";
+        return el2;
+      })();
+      fresh.dataset.veoBlock = node.dataset.veoBlock ?? String(i);
+      fresh.dataset.veoBlockId = b.editorId;
+      node.replaceWith(fresh);
+    }
+    shownPreview = cmd;
+    previewBlocks = nextBlocks;
+    applyBlockHighlight(host, idx);
+    renderGapZones(host, idx, nextBlocks);
+    return true;
+  };
+  const previewCard = (host) => host.shadowRoot?.querySelector(".veo-card") ?? null;
+  const clearBlockHighlight = (host) => {
+    const card = previewCard(host);
+    if (!card) return;
+    for (const el2 of card.querySelectorAll(".veo-block--selected")) {
+      el2.classList.remove("veo-block--selected");
+    }
+    card.querySelector(".veo-block-toolbar")?.remove();
+    card.querySelector(".veo-block-frame")?.remove();
+  };
+  const applyBlockHighlight = (host, stepIndex) => {
+    clearBlockHighlight(host);
+    const card = previewCard(host);
+    if (!card) return;
+    const el2 = selectedBlockId ? card.querySelector(`[data-veo-block-id="${selectedBlockId}"]`) : null;
+    if (!el2 || !selectedBlockId) {
+      renderRowChrome(host, stepIndex);
+      return;
+    }
+    el2.classList.add("veo-block--selected");
+    const doc = card.ownerDocument;
+    const cs = getComputedStyle(card);
+    const padL = Number.parseFloat(cs.paddingLeft) || 0;
+    const padT = Number.parseFloat(cs.paddingTop) || 0;
+    const padR = Number.parseFloat(cs.paddingRight) || 0;
+    const padB = Number.parseFloat(cs.paddingBottom) || 0;
+    const parent = el2.parentElement;
+    const inCol = parent?.classList.contains("veo-col") ? parent : null;
+    const boxL = inCol ? inCol.offsetLeft : padL;
+    const boxR = inCol ? inCol.offsetLeft + inCol.offsetWidth : card.clientWidth - padR;
+    const boxT = padT;
+    const boxB = card.clientHeight - padB;
+    const fx = Math.max(boxL, el2.offsetLeft - FRAME_PAD);
+    const fr = Math.min(boxR, el2.offsetLeft + el2.offsetWidth + FRAME_PAD);
+    const fw = Math.max(0, fr - fx);
+    const fy = Math.max(boxT, el2.offsetTop - FRAME_PAD);
+    const fb = Math.min(boxB, el2.offsetTop + el2.offsetHeight + FRAME_PAD);
+    const fh = Math.max(FRAME_MIN_H, fb - fy);
+    const frame = doc.createElement("div");
+    frame.className = "veo-block-frame";
+    frame.setAttribute("data-veo-builder-chrome", "");
+    frame.style.left = `${fx}px`;
+    frame.style.top = `${fy}px`;
+    frame.style.width = `${fw}px`;
+    frame.style.height = `${fh}px`;
+    card.appendChild(frame);
+    const bar = doc.createElement("div");
+    bar.className = "veo-block-toolbar";
+    bar.setAttribute("data-veo-builder-chrome", "");
+    const blockId = selectedBlockId;
+    const mk = (action, label, icon, enabled = true) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.title = label;
+      b.setAttribute("aria-label", label);
+      b.className = `veo-block-toolbar-${action}`;
+      b.innerHTML = icon;
+      b.disabled = !enabled;
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "block-action", payload: { stepIndex, blockId, action } });
+      });
+      bar.appendChild(b);
+    };
+    const can = moveAbility(previewBlocks, blockId);
+    mk("edit", "Editar", ICON.pencil);
+    mk("duplicate", "Duplicar", ICON.copy);
+    mk("remove", "Eliminar", ICON.trash);
+    mk("move-left", "Mover a la izquierda", ICON_MOVE.left, can.left);
+    mk("move-right", "Mover a la derecha", ICON_MOVE.right, can.right);
+    bar.style.right = `${Math.max(0, card.clientWidth - fr)}px`;
+    card.appendChild(bar);
+    const barH = bar.offsetHeight || TOOLBAR_H;
+    bar.dataset.veoTopAbove = String(fy - barH - 6);
+    bar.dataset.veoTopBelow = String(fb + 6);
+    bar.style.top = bar.dataset.veoTopAbove;
+    renderRowChrome(host, stepIndex);
+  };
+  const chromeRect = (el2) => ({
+    left: el2.offsetLeft,
+    top: el2.offsetTop,
+    right: el2.offsetLeft + el2.offsetWidth,
+    bottom: el2.offsetTop + el2.offsetHeight
+  });
+  const intersects = (a, b) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+  const resolveToolbarOverlaps = (card) => {
+    const cardBar = card.querySelector(".veo-card-toolbar");
+    const blockBar = card.querySelector(".veo-block-toolbar");
+    const rowBar = card.querySelector(".veo-row-toolbar");
+    if (blockBar?.dataset.veoTopAbove) {
+      blockBar.style.top = `${blockBar.dataset.veoTopAbove}px`;
+      if (cardBar && intersects(chromeRect(blockBar), chromeRect(cardBar))) {
+        blockBar.style.top = `${blockBar.dataset.veoTopBelow}px`;
+      }
+    }
+    if (rowBar?.dataset.veoRight) {
+      rowBar.style.left = "";
+      rowBar.style.right = `${rowBar.dataset.veoRight}px`;
+      rowBar.style.top = `${rowBar.dataset.veoTopBelow}px`;
+      const others = [cardBar, blockBar].filter((b) => !!b);
+      const clashes = () => others.some((o) => intersects(chromeRect(rowBar), chromeRect(o)));
+      if (clashes()) {
+        rowBar.style.right = "";
+        rowBar.style.left = `${rowBar.dataset.veoLeft}px`;
+      }
+      if (clashes() && blockBar) {
+        rowBar.style.left = "";
+        rowBar.style.right = `${rowBar.dataset.veoRight}px`;
+        rowBar.style.top = `${chromeRect(blockBar).bottom + 6}px`;
+      }
+    }
+  };
+  const rectOf = (el2) => ({
+    left: el2.offsetLeft,
+    top: el2.offsetTop,
+    right: el2.offsetLeft + el2.offsetWidth,
+    bottom: el2.offsetTop + el2.offsetHeight
+  });
+  const union = (rs) => rs.length === 0 ? null : rs.reduce((acc, r) => ({
+    left: Math.min(acc.left, r.left),
+    top: Math.min(acc.top, r.top),
+    right: Math.max(acc.right, r.right),
+    bottom: Math.max(acc.bottom, r.bottom)
+  }));
+  const layoutRows = (card, blocks) => {
+    const elOf = (b) => b.editorId ? card.querySelector(`[data-veo-block-id="${b.editorId}"]`) : null;
+    const cs = getComputedStyle(card);
+    const padL = Number.parseFloat(cs.paddingLeft) || 0;
+    const padR = Number.parseFloat(cs.paddingRight) || 0;
+    const contentLeft = padL;
+    const contentRight = card.clientWidth - padR;
+    const rows = groupLayout(blocks).map((row) => {
+      const columns = row.columns.map((col) => {
+        const items = col.blocks.map(({ block }) => ({ block, el: elOf(block) })).filter(
+          (x) => !!x.el && !!x.block.editorId
+        );
+        const blocksRect2 = union(items.map((x) => rectOf(x.el)));
+        if (!blocksRect2) return null;
+        const colEl = items[0]?.el.parentElement;
+        const rect2 = colEl?.classList.contains("veo-col") ? rectOf(colEl) : blocksRect2;
+        return { items, rect: rect2 };
+      }).filter((c) => c !== null);
+      const blocksRect = union(columns.map((c) => c.rect));
+      if (!blocksRect) return null;
+      const rowEl = columns[0]?.items[0]?.el.parentElement?.parentElement;
+      const rect = rowEl?.classList.contains("veo-row") ? rectOf(rowEl) : { ...blocksRect, left: contentLeft, right: contentRight };
+      const id = columns[0]?.items[0]?.block.editorId;
+      return { id, row: row.row, columns, rect };
+    }).filter((r) => r !== null);
+    return { rows, content: { left: contentLeft, right: contentRight } };
+  };
+  const clearRowChrome = (card) => {
+    card.querySelector(".veo-row-frame")?.remove();
+    card.querySelector(".veo-row-toolbar")?.remove();
+  };
+  const renderRowChrome = (host, stepIndex) => {
+    const card = previewCard(host);
+    if (!card) return;
+    clearRowChrome(card);
+    resolveToolbarOverlaps(card);
+    const { rows } = layoutRows(card, previewBlocks);
+    const rowOfSelected = selectedBlockId ? rows.find(
+      (r) => r.columns.some((c) => c.items.some((i) => i.block.editorId === selectedBlockId))
+    ) : void 0;
+    const target = (selectedRowId ? rows.find((r) => r.id === selectedRowId) : void 0) ?? rowOfSelected ?? (hoverRowId ? rows.find((r) => r.id === hoverRowId) : void 0);
+    if (!target) return;
+    const doc = card.ownerDocument;
+    const cs = getComputedStyle(card);
+    const padT = Number.parseFloat(cs.paddingTop) || 0;
+    const padB = Number.parseFloat(cs.paddingBottom) || 0;
+    const PAD = 6;
+    const fx = Math.max(0, target.rect.left - PAD);
+    const fr = Math.min(card.clientWidth, target.rect.right + PAD);
+    const fy = Math.max(Math.min(padT, target.rect.top), target.rect.top - PAD);
+    const fb = Math.min(
+      Math.max(card.clientHeight - padB, target.rect.bottom),
+      target.rect.bottom + PAD
+    );
+    const frame = doc.createElement("div");
+    frame.className = "veo-row-frame";
+    frame.setAttribute("data-veo-builder-chrome", "");
+    frame.style.left = `${fx}px`;
+    frame.style.top = `${fy}px`;
+    frame.style.width = `${Math.max(0, fr - fx)}px`;
+    frame.style.height = `${Math.max(0, fb - fy)}px`;
+    card.appendChild(frame);
+    const bar = doc.createElement("div");
+    bar.className = "veo-row-toolbar";
+    bar.setAttribute("data-veo-builder-chrome", "");
+    const blockId = target.id;
+    const mk = (action, label, icon, text) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.title = label;
+      b.setAttribute("aria-label", label);
+      b.className = `veo-row-toolbar-${action}`;
+      b.innerHTML = icon;
+      if (text) b.append(text);
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "row-action", payload: { stepIndex, blockId, action } });
+      });
+      bar.appendChild(b);
+    };
+    mk("edit", "Editar fila", ICON.pencil, "Editar fila");
+    mk("duplicate", "Duplicar fila", ICON.copy);
+    mk("remove", "Eliminar fila", ICON.trash);
+    card.appendChild(bar);
+    bar.dataset.veoRight = String(Math.max(0, card.clientWidth - fr));
+    bar.dataset.veoLeft = String(fx);
+    bar.dataset.veoTopBelow = String(fb + 6);
+    resolveToolbarOverlaps(card);
+  };
+  const renderCardChrome = (host, stepIndex) => {
+    const card = previewCard(host);
+    if (!card) return;
+    card.querySelector(".veo-card-frame")?.remove();
+    card.querySelector(".veo-card-toolbar")?.remove();
+    if (!hoverCard) {
+      resolveToolbarOverlaps(card);
+      return;
+    }
+    const doc = card.ownerDocument;
+    const frame = doc.createElement("div");
+    frame.className = "veo-card-frame";
+    frame.setAttribute("data-veo-builder-chrome", "");
+    card.appendChild(frame);
+    const bar = doc.createElement("div");
+    bar.className = "veo-card-toolbar";
+    bar.setAttribute("data-veo-builder-chrome", "");
+    const mk = (action, label, active) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.className = `veo-card-toolbar-${action}${active ? " is-active" : ""}`;
+      b.setAttribute("aria-pressed", active ? "true" : "false");
+      b.textContent = label;
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "card-action", payload: { stepIndex, action } });
+      });
+      bar.appendChild(b);
+    };
+    mk("edit-container", "Editar contenedor", panelSection === "step");
+    mk("edit-rows", "Editar filas", panelSection === "structure");
+    card.appendChild(bar);
+    bar.style.top = `${-Math.round((bar.offsetHeight || 34) / 2)}px`;
+    resolveToolbarOverlaps(card);
+  };
+  const attachRowHover = (host, stepIndex) => {
+    const onMove = (e) => {
+      const card = previewCard(host);
+      if (!card) return;
+      const overCard = e.composedPath().some(
+        (n) => n instanceof Element && (n.classList.contains("veo-card") || n.classList.contains("veo-card-toolbar"))
+      );
+      if (overCard !== hoverCard) {
+        hoverCard = overCard;
+        renderCardChrome(host, stepIndex);
+      }
+      if (e.composedPath().some((n) => n instanceof Element && n.classList.contains("veo-row-toolbar"))) {
+        return;
+      }
+      const rect = card.getBoundingClientRect();
+      const x = e.clientX - rect.left - card.clientLeft;
+      const y = e.clientY - rect.top - card.clientTop;
+      const bar = card.querySelector(".veo-row-toolbar");
+      if (bar) {
+        const AIR = 10;
+        if (x >= bar.offsetLeft - AIR && x <= bar.offsetLeft + bar.offsetWidth + AIR && y >= bar.offsetTop - 14 && y <= bar.offsetTop + bar.offsetHeight + AIR) {
+          return;
+        }
+      }
+      const TOL = 6;
+      const hit = layoutRows(card, previewBlocks).rows.find(
+        (r) => x >= r.rect.left - TOL && x <= r.rect.right + TOL && y >= r.rect.top - TOL && y <= r.rect.bottom + TOL
+      );
+      const next = hit?.id ?? null;
+      if (next === hoverRowId) return;
+      hoverRowId = next;
+      renderRowChrome(host, stepIndex);
+    };
+    const onLeave = () => {
+      if (hoverCard) {
+        hoverCard = false;
+        renderCardChrome(host, stepIndex);
+      }
+      if (hoverRowId === null) return;
+      hoverRowId = null;
+      renderRowChrome(host, stepIndex);
+    };
+    host.addEventListener("mousemove", onMove);
+    host.addEventListener("mouseleave", onLeave);
+    return () => {
+      host.removeEventListener("mousemove", onMove);
+      host.removeEventListener("mouseleave", onLeave);
+    };
+  };
+  const renderGapZones = (host, stepIndex, blocks) => {
+    const card = previewCard(host);
+    if (!card) return;
+    for (const z of card.querySelectorAll(".veo-gap")) z.remove();
+    const doc = card.ownerDocument;
+    const GAP = 18;
+    const EDGE2 = 4;
+    const zone = (kind, x, y, w, h, label, blockId, action) => {
+      const z = doc.createElement("div");
+      z.className = `veo-gap veo-gap--${kind}`;
+      z.setAttribute("data-veo-builder-chrome", "");
+      z.dataset.veoGapAction = action;
+      z.style.left = `${x}px`;
+      z.style.top = `${y}px`;
+      z.style.width = `${Math.max(w, GAP)}px`;
+      z.style.height = `${Math.max(h, GAP)}px`;
+      const line = doc.createElement("i");
+      const btn = doc.createElement("button");
+      btn.type = "button";
+      btn.title = label;
+      btn.setAttribute("aria-label", label);
+      btn.textContent = "+";
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "block-layout", payload: { stepIndex, blockId, action } });
+      });
+      z.append(line, btn);
+      card.appendChild(z);
+    };
+    const { rows, content } = layoutRows(card, blocks);
+    if (rows.length === 0) return;
+    const cw = content.right - content.left;
+    rows.forEach((row, k) => {
+      const first = row.columns[0]?.items[0]?.block.editorId;
+      if (k === 0) {
+        zone(
+          "h",
+          content.left,
+          row.rect.top - EDGE2 - GAP,
+          cw,
+          GAP,
+          "Agregar fila",
+          first,
+          "row-before"
+        );
+      } else {
+        const prev = rows[k - 1];
+        const y = (prev.rect.bottom + row.rect.top) / 2 - GAP / 2;
+        zone("h", content.left, y, cw, GAP, "Agregar fila", first, "row-before");
+      }
+      if (k === rows.length - 1) {
+        zone(
+          "h",
+          content.left,
+          row.rect.bottom + EDGE2,
+          cw,
+          GAP,
+          "Agregar fila",
+          first,
+          "row-after"
+        );
+      }
+    });
+    for (const row of rows) {
+      const rh = row.rect.bottom - row.rect.top;
+      row.columns.forEach((col, j) => {
+        const id = col.items[0]?.block.editorId;
+        if (j === 0) {
+          zone(
+            "v",
+            row.rect.left - EDGE2 - GAP,
+            row.rect.top,
+            GAP,
+            rh,
+            "Agregar columna",
+            id,
+            "col-before"
+          );
+        } else {
+          const prev = row.columns[j - 1];
+          const x = (prev.rect.right + col.rect.left) / 2 - GAP / 2;
+          zone("v", x, row.rect.top, GAP, rh, "Agregar columna", id, "col-before");
+        }
+        if (j === row.columns.length - 1) {
+          zone(
+            "v",
+            row.rect.right + EDGE2,
+            row.rect.top,
+            GAP,
+            rh,
+            "Agregar columna",
+            id,
+            "col-after"
+          );
+        }
+      });
+    }
+    for (const row of rows) {
+      for (const col of row.columns) {
+        const w = col.rect.right - col.rect.left;
+        col.items.forEach((it, i) => {
+          const next = col.items[i + 1];
+          if (next) {
+            const a = rectOf(it.el);
+            const b = rectOf(next.el);
+            const y = (a.bottom + b.top) / 2 - GAP / 2;
+            zone(
+              "h",
+              col.rect.left,
+              y,
+              w,
+              GAP,
+              "Agregar bloque",
+              it.block.editorId,
+              "stack-after"
+            );
+          } else if (row.columns.length > 1 && col.rect.bottom < row.rect.bottom - GAP) {
+            zone(
+              "h",
+              col.rect.left,
+              col.rect.bottom + EDGE2,
+              w,
+              GAP,
+              "Agregar bloque",
+              it.block.editorId,
+              "stack-after"
+            );
+          }
+        });
+      }
+    }
+  };
+  const attachCardClick = (host, stepIndex) => {
+    let downAt = null;
+    const onDown = (e) => {
+      downAt = { x: e.clientX, y: e.clientY };
+    };
+    const onClick = (e) => {
+      const path = e.composedPath();
+      if (path.some(
+        (n) => n instanceof Element && (n.classList.contains("veo-block-toolbar") || n.classList.contains("veo-row-toolbar") || n.classList.contains("veo-card-toolbar") || n.classList.contains("veo-gap"))
+      )) {
+        return;
+      }
+      const inCard = path.some((n) => n instanceof Element && n.classList.contains("veo-card"));
+      if (!inCard) return;
+      if (downAt && Math.hypot(e.clientX - downAt.x, e.clientY - downAt.y) > 4) return;
+      const blockEl = path.find(
+        (n) => n instanceof HTMLElement && !!n.dataset.veoBlockId
+      );
+      if (blockEl) {
+        if (path.some((n) => n instanceof Element && n.matches("button, a"))) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        selectedBlockId = blockEl.dataset.veoBlockId ?? null;
+        applyBlockHighlight(host, stepIndex);
+        if (selectedBlockId) {
+          post({ type: "block-clicked", payload: { stepIndex, blockId: selectedBlockId } });
+        }
+        return;
+      }
+      const interactive = path.some(
+        (n) => n instanceof Element && n.matches("button, a, input, textarea, select, label, [contenteditable]")
+      );
+      if (interactive) return;
+      selectedBlockId = null;
+      clearBlockHighlight(host);
+      renderRowChrome(host, stepIndex);
+      post({ type: "card-clicked", payload: { stepIndex } });
+    };
+    host.addEventListener("mousedown", onDown, true);
+    host.addEventListener("click", onClick, true);
+    return () => {
+      host.removeEventListener("mousedown", onDown, true);
+      host.removeEventListener("click", onClick, true);
+    };
+  };
+  const attachRawBlock = (stepIndex, blockId) => {
+    const nodes = Array.from(
+      document.querySelectorAll(`[${RAW_BLOCK_ATTR}="${blockId}"]`)
+    );
+    if (nodes.length === 0) return null;
+    const doc = document;
+    const box = doc.createElement("div");
+    box.setAttribute("data-veo-builder-chrome", "");
+    box.style.cssText = "position:fixed;left:0;top:0;width:0;height:0;z-index:2147483646;";
+    box.style.display = "none";
+    const shadow = box.attachShadow({ mode: "open" });
+    const style = doc.createElement("style");
+    style.textContent = GUIDE_STYLES;
+    shadow.appendChild(style);
+    const frame = doc.createElement("div");
+    frame.className = "veo-block-frame";
+    frame.style.position = "fixed";
+    const bar = doc.createElement("div");
+    bar.className = "veo-block-toolbar";
+    bar.style.position = "fixed";
+    const mk = (action, label, icon, enabled = true) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.title = label;
+      b.setAttribute("aria-label", label);
+      b.className = `veo-block-toolbar-${action}`;
+      b.innerHTML = icon;
+      b.disabled = !enabled;
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "block-action", payload: { stepIndex, blockId, action } });
+      });
+      bar.appendChild(b);
+    };
+    mk("edit", "Editar", ICON.pencil);
+    mk("duplicate", "Duplicar", ICON.copy, false);
+    mk("remove", "Eliminar", ICON.trash);
+    mk("move-left", "Mover a la izquierda", ICON_MOVE.left, false);
+    mk("move-right", "Mover a la derecha", ICON_MOVE.right, false);
+    frame.style.display = "none";
+    bar.style.display = "none";
+    const GAP = 18;
+    const EDGE2 = 4;
+    const gap = (kind, label, action) => {
+      const z = doc.createElement("div");
+      z.className = `veo-gap veo-gap--${kind}`;
+      z.style.position = "fixed";
+      z.dataset.veoGapAction = action;
+      const line = doc.createElement("i");
+      const btn = doc.createElement("button");
+      btn.type = "button";
+      btn.title = label;
+      btn.setAttribute("aria-label", label);
+      btn.textContent = "+";
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "block-layout", payload: { stepIndex, blockId, action } });
+      });
+      z.append(line, btn);
+      return z;
+    };
+    const gaps = {
+      top: gap("h", "Agregar fila", "row-before"),
+      bottom: gap("h", "Agregar fila", "row-after"),
+      left: gap("v", "Agregar columna", "col-before"),
+      right: gap("v", "Agregar columna", "col-after")
+    };
+    shadow.append(frame, bar, gaps.top, gaps.bottom, gaps.left, gaps.right);
+    doc.body.appendChild(box);
+    box.style.display = "";
+    let visible = false;
+    const place = (el2, x, y, w, h) => {
+      el2.style.left = `${x}px`;
+      el2.style.top = `${y}px`;
+      el2.style.width = `${w}px`;
+      el2.style.height = `${h}px`;
+    };
+    const reposition = () => {
+      const live = nodes.filter((n) => n.isConnected);
+      if (live.length === 0) return;
+      let l = Number.POSITIVE_INFINITY;
+      let t = Number.POSITIVE_INFINITY;
+      let r = Number.NEGATIVE_INFINITY;
+      let b = Number.NEGATIVE_INFINITY;
+      for (const n of live) {
+        const rc = n.getBoundingClientRect();
+        if (rc.width === 0 && rc.height === 0) continue;
+        l = Math.min(l, rc.left);
+        t = Math.min(t, rc.top);
+        r = Math.max(r, rc.right);
+        b = Math.max(b, rc.bottom);
+      }
+      if (!Number.isFinite(l)) return;
+      place(gaps.top, l, t - EDGE2 - GAP, r - l, GAP);
+      place(gaps.bottom, l, b + EDGE2, r - l, GAP);
+      place(gaps.left, l - EDGE2 - GAP, t, GAP, b - t);
+      place(gaps.right, r + EDGE2, t, GAP, b - t);
+      if (!visible) return;
+      place(frame, l, t, r - l, b - t);
+      const bh = bar.offsetHeight || TOOLBAR_H;
+      const bw = bar.offsetWidth;
+      bar.style.left = `${Math.max(0, r - bw)}px`;
+      bar.style.top = `${Math.max(0, t - bh - 6)}px`;
+    };
+    const select = (id) => {
+      visible = id === blockId;
+      frame.style.display = visible ? "" : "none";
+      bar.style.display = visible ? "" : "none";
+      reposition();
+    };
+    reposition();
+    const onClick = (e) => {
+      const path = e.composedPath();
+      if (!nodes.some((n) => path.includes(n))) return;
+      if (path.some((n) => n instanceof Element && n.matches("button, a"))) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      selectedBlockId = blockId;
+      select(blockId);
+      post({ type: "block-clicked", payload: { stepIndex, blockId } });
+    };
+    doc.addEventListener("click", onClick, true);
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    return {
+      select,
+      detach: () => {
+        doc.removeEventListener("click", onClick, true);
+        window.removeEventListener("scroll", reposition, true);
+        window.removeEventListener("resize", reposition);
+        box.remove();
+      }
+    };
+  };
   const applyPreviewGated = (cmd) => {
-    lastPreview = cmd;
+    const showNow = !cmd.honorTrigger;
+    if (showNow) {
+      disarmPreviewTrigger();
+      cancelPreviewDelay();
+      previewFired = true;
+      previewDismissed = false;
+    }
+    lastPreview = showNow ? { ...cmd, honorTrigger: true } : cmd;
     if (!previewMatchesPage(cmd)) {
       cancelPreviewDelay();
       withholdPreview();
@@ -4932,13 +6764,13 @@ function initBuilderMode() {
       return;
     }
     const devices = cmd.guide.activationRules?.devices;
-    if (cmd.honorTrigger && !previewMode && devices && !isDeviceAllowed(devices)) {
+    if (!showNow && previewMode && devices && !isDeviceAllowed(devices)) {
       cancelPreviewDelay();
       withholdPreview();
       postPreviewStatus({ state: "device-mismatch", devices });
       return;
     }
-    applyPreview(cmd);
+    applyPreview(lastPreview);
   };
   const disarmPreviewTrigger = () => {
     previewTrigger?.();
@@ -4963,6 +6795,7 @@ function initBuilderMode() {
       }
       disarmPreviewTrigger();
       previewFired = true;
+      previewDismissed = false;
       if (lastPreview) applyPreviewGated(lastPreview);
     };
     document.addEventListener("click", onFire, true);
@@ -4983,22 +6816,24 @@ function initBuilderMode() {
     postPreviewStatus({ state: "waiting-delay", delayMs });
   };
   const applyPreview = (cmd) => {
-    manipulator?.detach();
-    manipulator = null;
-    dropTarget?.detach();
-    dropTarget = null;
+    if (cmd.editable && !previewMode && tryPatchPreview(cmd)) {
+      previewStepIndex = cmd.guide.startStepIndex ?? 0;
+      return;
+    }
+    detachPreviewTools();
     previewStepIndex = cmd.guide.startStepIndex ?? 0;
     const rules = cmd.guide.activationRules;
     const trig = rules?.trigger;
     const sel = rules?.selector?.trim();
-    const gate = cmd.honorTrigger && !previewFired && !previewMode;
-    if (gate && (trig === "on_click" || trig === "on_hover") && sel) {
+    const gate = cmd.honorTrigger && !previewFired && previewMode;
+    const waitsForTarget = (trig === "on_click" || trig === "on_hover") && (!isAutomaticActivation(rules) || previewDismissed);
+    if (gate && waitsForTarget && sel) {
       cancelPreviewDelay();
       closeGuidePreview();
       armPreviewTrigger(sel, trig);
       return;
     }
-    const delayMs = trig === "delayed" ? rules?.delayMs ?? 0 : 0;
+    const delayMs = activationDelayMs(rules);
     if (gate && delayMs > 0) {
       disarmPreviewTrigger();
       closeGuidePreview();
@@ -5007,15 +6842,21 @@ function initBuilderMode() {
     }
     disarmPreviewTrigger();
     cancelPreviewDelay();
+    const fetchProgress = previewProgressFetcher();
     const handle = previewGuide({
       ...cmd.guide,
+      ...fetchProgress ? { fetchProgress } : {},
       onClosed: () => {
-        manipulator?.detach();
-        manipulator = null;
-        dropTarget?.detach();
-        dropTarget = null;
+        detachPreviewTools();
+        shownPreview = null;
         previewFired = false;
-        if (lastPreview) applyPreviewGated(lastPreview);
+        previewDismissed = true;
+        if (previewMode) {
+          const r = lastPreview?.guide.activationRules;
+          const t = r?.trigger;
+          const selector = r?.selector?.trim();
+          if ((t === "on_click" || t === "on_hover") && selector) armPreviewTrigger(selector, t);
+        }
       }
     });
     if (cmd.honorTrigger) postPreviewStatus({ state: "shown" });
@@ -5023,7 +6864,23 @@ function initBuilderMode() {
     void handle.ready.then((result) => {
       if (!result.rendered) return;
       const host = handle.host();
-      if (!host) return;
+      if (!host) {
+        const idx = cmd.guide.startStepIndex ?? 0;
+        const only = cmd.guide.guideSteps[idx]?.blocks?.[0];
+        if (only?.type === "code" && only.editorId) {
+          rawBlock = attachRawBlock(idx, only.editorId);
+          rawBlock?.select(selectedBlockId);
+        }
+        return;
+      }
+      host.classList.add("veo-no-anim");
+      shownPreview = cmd;
+      cardClick = attachCardClick(host, cmd.guide.startStepIndex ?? 0);
+      const stepBlocks = cmd.guide.guideSteps[cmd.guide.startStepIndex ?? 0]?.blocks ?? [];
+      previewBlocks = stepBlocks;
+      applyBlockHighlight(host, cmd.guide.startStepIndex ?? 0);
+      renderGapZones(host, cmd.guide.startStepIndex ?? 0, stepBlocks);
+      rowHover = attachRowHover(host, cmd.guide.startStepIndex ?? 0);
       manipulator = attachDesignManipulator({
         host,
         guideType: cmd.guide.guideType,
@@ -5091,13 +6948,21 @@ function initBuilderMode() {
         break;
       case "editor-state":
         chrome?.setState(cmd.state);
+        if (panelSection !== cmd.state.section) {
+          panelSection = cmd.state.section;
+          const h = document.querySelector("[data-veo-guide]");
+          if (h && hoverCard && !previewMode) renderCardChrome(h, previewStepIndex);
+        }
         panel?.setTitle(
-          cmd.state.section === "activation" ? "Ajustes de activaci\xF3n" : cmd.state.section === "badge" ? "Ajustes de badge" : cmd.state.section === "target" ? "Ajustes del elemento objetivo" : cmd.state.steps[cmd.state.activeStep]?.label ?? "Paso"
+          cmd.state.section === "activation" ? "Ajustes de activaci\xF3n" : cmd.state.section === "badge" ? "Ajustes de badge" : cmd.state.section === "target" ? "Ajustes del elemento objetivo" : cmd.state.section === "row" ? "Editar fila" : cmd.state.blockLabel ? `Editor \xB7 ${cmd.state.blockLabel}` : cmd.state.steps[cmd.state.activeStep]?.label ?? "Paso"
         );
         break;
       case "panel-visibility":
         panel?.setVisible(cmd.visible);
         break;
+      case "panel-size":
+        panel?.setSize(cmd.size);
+        break;
       case "start-picker": {
         picker?.stop();
         const panelWasShown = panel?.isVisible() ?? false;
@@ -5105,10 +6970,7 @@ function initBuilderMode() {
         chrome?.setHidden(true);
         const previewToRestore = lastPreview;
         if (previewToRestore) {
-          manipulator?.detach();
-          manipulator = null;
-          dropTarget?.detach();
-          dropTarget = null;
+          detachPreviewTools();
           closeGuidePreview();
         }
         const restorePanel = () => {
@@ -5147,17 +7009,28 @@ function initBuilderMode() {
       case "block-drag":
         handleBlockDrag(cmd);
         break;
+      case "select-block": {
+        selectedBlockId = cmd.blockId;
+        const h = document.querySelector("[data-veo-guide]");
+        if (h && !previewMode) applyBlockHighlight(h, previewStepIndex);
+        if (!previewMode) rawBlock?.select(cmd.blockId);
+        break;
+      }
+      case "select-row": {
+        selectedRowId = cmd.blockId;
+        const h = document.querySelector("[data-veo-guide]");
+        if (h && !previewMode) renderRowChrome(h, previewStepIndex);
+        break;
+      }
       case "close-preview":
-        manipulator?.detach();
-        manipulator = null;
-        dropTarget?.detach();
-        dropTarget = null;
+        detachPreviewTools();
         hideDragGhost();
         pendingPreview = null;
         lastPreview = null;
         disarmPreviewTrigger();
         cancelPreviewDelay();
         previewFired = false;
+        previewDismissed = false;
         closeGuidePreview();
         break;
       case "teardown":
@@ -5203,10 +7076,7 @@ function initBuilderMode() {
     removeNavWatcher();
     picker?.stop();
     picker = null;
-    manipulator?.detach();
-    manipulator = null;
-    dropTarget?.detach();
-    dropTarget = null;
+    detachPreviewTools();
     hideDragGhost();
     pendingPreview = null;
     disarmPreviewTrigger();
@@ -5234,6 +7104,8 @@ function initBuilderMode() {
           case "preview":
             if (previewMode) return;
             previewMode = true;
+            previewFired = false;
+            previewDismissed = false;
             panelWasVisible = panel?.isVisible() ?? true;
             panel?.setVisible(false);
             chrome?.setPreview(true);
@@ -5242,6 +7114,8 @@ function initBuilderMode() {
           case "exit-preview":
             if (!previewMode) return;
             previewMode = false;
+            disarmPreviewTrigger();
+            cancelPreviewDelay();
             chrome?.setPreview(false);
             panel?.setVisible(panelWasVisible);
             if (lastPreview) applyPreviewGated(lastPreview);
@@ -5323,6 +7197,25 @@ function resolveDashboardOrigin(originHint) {
   }
   return null;
 }
+function previewProgressFetcher() {
+  const cfg = window.__veoBuilder;
+  if (!cfg?.apiKey || !cfg?.apiUrl) return void 0;
+  const apiUrl = cfg.apiUrl.replace(/\/+$/, "");
+  const apiKey = cfg.apiKey;
+  return async (guideIds) => {
+    const params = new URLSearchParams({
+      endUserId: "veo_preview",
+      guideIds: guideIds.join(","),
+      includeUnpublished: "1"
+    });
+    const res = await fetch(`${apiUrl}/v1/guides/progress?${params}`, {
+      headers: { "X-Api-Key": apiKey }
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.items ?? [];
+  };
+}
 
 // src/plugins/builder/builder-session.ts
 var DEFAULT_FEATURES = "popup,width=1280,height=860";