veo-sdk 0.5.34 → 0.6.1

package/dist/{chunk-W4R4XCWL.mjs → chunk-NGP7IJVE.mjs}

@@ -329,6 +329,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");
@@ -453,8 +572,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 el = doc.createElement("h2");
       el.className = "veo-guide-title";
@@ -478,7 +601,7 @@ function buildContentBlock(block, doc) {
       const el = doc.createElement("img");
       el.className = "veo-guide-image";
       el.src = block.url;
-      el.alt = "";
+      el.alt = typeof block.alt === "string" ? block.alt : "";
       applyBlockStyle(el, block.style, "image");
       return el;
     }
@@ -486,6 +609,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";
@@ -512,6 +661,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(el, style, kind) {
   if (!style || typeof style !== "object") return;
   const s = style;
@@ -521,14 +676,34 @@ function applyBlockStyle(el, style, kind) {
   }
   const align = typeof s.align === "string" ? s.align : null;
   if (align && (align === "left" || align === "center" || align === "right")) {
-    if (kind === "text") el.style.textAlign = align;
-    else if (kind === "image") el.style.alignSelf = BLOCK_ALIGN_SELF[align];
+    if (kind === "text") {
+      el.style.textAlign = align;
+      el.style.alignSelf = BLOCK_ALIGN_SELF[align];
+    } else if (kind === "image") el.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) {
+      el.style.fontSize = `${preset.size}px`;
+      el.style.fontWeight = String(preset.weight);
+      el.style.lineHeight = String(preset.lineHeight);
+    }
+  }
+  if (kind !== "image" && s.colorMode === "dark") {
+    el.style.background = "#1f1d1b";
+    el.style.color = "#f5f0eb";
+    el.style.borderRadius = el.style.borderRadius || "8px";
   }
   if (kind !== "image" && typeof s.color === "string") el.style.color = s.color;
   if (kind === "text" && typeof s.fontSize === "number" && Number.isFinite(s.fontSize)) {
     el.style.fontSize = `${clampNum(s.fontSize, 8, 72)}px`;
   }
-  if (kind === "image" && typeof s.width === "number" && Number.isFinite(s.width)) {
+  if (kind === "image" && s.naturalSize === true) {
+    el.style.width = "auto";
+    el.style.maxWidth = "100%";
+    el.style.maxHeight = "none";
+    el.style.objectFit = "contain";
+  } else if (kind === "image" && typeof s.width === "number" && Number.isFinite(s.width)) {
     el.style.width = `${clampNum(s.width, 10, 100)}%`;
   }
   if (kind === "image" && typeof s.radius === "number" && Number.isFinite(s.radius)) {
@@ -949,7 +1124,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);
@@ -1042,6 +1371,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;
@@ -1072,6 +1408,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);
@@ -1080,26 +1420,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 {
@@ -1768,6 +2153,210 @@ 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 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 svg = doc.createElementNS(ns, "svg");
+  svg.setAttribute("viewBox", "0 0 28 28");
+  svg.setAttribute("class", "veo-checklist-ring");
+  svg.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");
+  svg.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");
+    svg.appendChild(check);
+    return svg;
+  }
+  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)");
+    svg.appendChild(arc);
+  }
+  return svg;
+}
+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/utils/uuid.ts
 function uuidv7() {
   const timestamp = Date.now();
@@ -1924,6 +2513,7 @@ function escapeClosing(code, 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") {
@@ -1970,6 +2560,11 @@ function mountCodeBlock(block, doc, context, host, rawInline) {
     }
     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) {
@@ -1979,24 +2574,40 @@ function mountCodeBlock(block, doc, context, host, rawInline) {
       injected.push(holder);
       const slot = doc.createElement("slot");
       slot.setAttribute("name", slotName);
-      node = slot;
+      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 s = hostDoc.createElement("script");
-    s.textContent = block.js;
-    hostDoc.body.appendChild(s);
-    injected.push(s);
+    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);
@@ -2231,8 +2842,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: {
@@ -2245,17 +2862,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) => {
@@ -2264,11 +2885,127 @@ 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 {
+  }
+}
+function isSnoozed(guideId, now = Date.now()) {
+  try {
+    const raw = localStorage.getItem(KEY(guideId));
+    if (raw === null) return false;
+    const until = Number(raw);
+    if (!Number.isFinite(until) || until <= now) {
+      localStorage.removeItem(KEY(guideId));
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
 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";
@@ -2427,13 +3164,83 @@ function markerOffset(anchor, marker, position, offset6) {
   }
   return { x: x + offset6.x, y: y + offset6.y };
 }
+var NO_CHILDREN = /* @__PURE__ */ new Set([
+  "img",
+  "input",
+  "textarea",
+  "select",
+  "iframe",
+  "video",
+  "audio",
+  "canvas",
+  "br",
+  "hr",
+  "svg",
+  "object",
+  "embed"
+]);
+function canNest(anchor) {
+  const win = anchor.ownerDocument.defaultView;
+  if (!win || !(anchor instanceof win.HTMLElement)) return false;
+  if (NO_CHILDREN.has(anchor.tagName.toLowerCase())) return false;
+  const cs = win.getComputedStyle(anchor);
+  if (cs.display === "contents") return false;
+  const tokens = `${cs.overflow} ${cs.overflowX} ${cs.overflowY}`.split(/\s+/).filter(Boolean);
+  return tokens.every((t) => t === "visible");
+}
 function attachMarker(anchor, host, marker) {
   host.style.position = "absolute";
   host.style.zIndex = String(num(marker.zIndex, DEFAULT_MARKER_Z));
   host.style.margin = "0";
+  const position = marker.position ?? "top-right";
+  const offset6 = { x: num(marker.offsetX, 0), y: num(marker.offsetY, 0) };
+  const markerSize = () => {
+    const m = host.getBoundingClientRect();
+    return { width: m.width, height: m.height };
+  };
+  if (canNest(anchor)) {
+    const win = anchor.ownerDocument.defaultView;
+    const prevPosition = anchor.style.position;
+    const computed = win.getComputedStyle(anchor).position;
+    if (!computed || computed === "static") anchor.style.position = "relative";
+    anchor.appendChild(host);
+    const swallowClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const swallow = (e) => e.stopPropagation();
+    host.addEventListener("click", swallowClick);
+    host.addEventListener("pointerdown", swallow);
+    host.addEventListener("mousedown", swallow);
+    const update2 = () => {
+      const { x, y } = markerOffset(
+        {
+          left: -anchor.clientLeft,
+          top: -anchor.clientTop,
+          width: anchor.offsetWidth,
+          height: anchor.offsetHeight
+        },
+        markerSize(),
+        position,
+        offset6
+      );
+      host.style.left = `${Math.round(x)}px`;
+      host.style.top = `${Math.round(y)}px`;
+    };
+    update2();
+    const stop2 = autoUpdate(anchor, host, update2, { ancestorScroll: false, layoutShift: false });
+    return () => {
+      stop2();
+      host.removeEventListener("click", swallowClick);
+      host.removeEventListener("pointerdown", swallow);
+      host.removeEventListener("mousedown", swallow);
+      host.remove();
+      anchor.style.position = prevPosition;
+    };
+  }
+  anchor.ownerDocument.body.appendChild(host);
   const update = () => {
     const a = anchor.getBoundingClientRect();
-    const m = host.getBoundingClientRect();
     const { x, y } = markerOffset(
       {
         left: a.left + window.scrollX,
@@ -2441,15 +3248,19 @@ function attachMarker(anchor, host, marker) {
         width: a.width,
         height: a.height
       },
-      { width: m.width, height: m.height },
-      marker.position ?? "top-right",
-      { x: num(marker.offsetX, 0), y: num(marker.offsetY, 0) }
+      markerSize(),
+      position,
+      offset6
     );
     host.style.left = `${Math.round(x)}px`;
     host.style.top = `${Math.round(y)}px`;
   };
   update();
-  return autoUpdate(anchor, host, update);
+  const stop = autoUpdate(anchor, host, update);
+  return () => {
+    stop();
+    host.remove();
+  };
 }
 
 // src/plugins/guides/renderers/composite-renderer.ts
@@ -2458,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;
@@ -2476,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" });
@@ -2489,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,
@@ -2499,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;
@@ -2516,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;
@@ -2525,6 +3397,7 @@ var CompositeRenderer = class extends BaseRenderer {
         });
       }
       card.appendChild(closeBtn);
+      reserveCloseSpace(card, blocks, closePos, design);
     }
     if (badgeMode && anchor) {
       closeTooltip = this.renderBadgeMode(
@@ -2555,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");
@@ -2581,6 +3455,7 @@ var CompositeRenderer = class extends BaseRenderer {
             this.closeOrSkip(context);
           }
         });
+        this.registerCleanup(lockScroll(doc));
       }
       applyViewportPosition(card, step.position, design);
       overlay.appendChild(card);
@@ -2598,84 +3473,218 @@ 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 el = doc.createElement("div");
+      el.className = "veo-block-placeholder";
+      el.textContent = label;
+      return el;
+    };
+    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 el = node2 ?? placeholder(b, "Bloque de c\xF3digo");
+          if (el) container.appendChild(tag(el, 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;
         }
-        card.appendChild(form);
+        if (b.type === "checklist") {
+          const el = buildChecklistBlock(b, doc, context);
+          applyBlockStyle(el, b.style, "text");
+          el.style.alignSelf = "stretch";
+          el.style.width = "100%";
+          container.appendChild(tag(el, b, index));
+          i++;
+          continue;
+        }
+        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":
         case "submit-forms-goto":
@@ -2693,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;
   }
@@ -2712,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();
     });
   }
@@ -2765,9 +3789,7 @@ var CompositeRenderer = class extends BaseRenderer {
     root.appendChild(wrapper);
     if (marker) {
       host.style.display = "inline-block";
-      (anchor.ownerDocument ?? document).body.appendChild(host);
       this.registerCleanup(attachMarker(anchor, host, marker));
-      this.registerCleanup(() => host.remove());
     } else {
       host.style.display = "inline-block";
       const pos = inlinePosOf(step.inlinePosition);
@@ -2836,21 +3858,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";
@@ -2915,10 +3954,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;
@@ -2940,13 +3986,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}`]);
@@ -3050,6 +4097,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();
@@ -3177,6 +4225,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;
@@ -3188,6 +4248,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) => {
@@ -3245,9 +4306,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();
   }
 };
@@ -3473,6 +4537,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 } : {}
       });
@@ -3658,9 +4723,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/autocapture/constants.ts
 var DEFAULT_AUTOCAPTURE_CONFIG = {
@@ -3795,6 +4886,6 @@ function buildSelectorPath(element, maxAncestors = 5) {
   return parts.join(" > ");
 }
 
-export { ALWAYS_BLOCK_SELECTORS, BadgeRenderer, BannerRenderer, CompositeRenderer, CustomRenderer, DEFAULT_AUTOCAPTURE_CONFIG, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_KEY_PREFIX, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, FormRenderer, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, activationDelayMs, buildSelectorPath, clearBuilderToken, clearPreviewToken, closeGuidePreview, filterHumanClasses, getPreviewToken, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isAutomaticActivation, isBuilderMode, isDeviceAllowed, previewGuide, resolveBuilderContext, resolveBuilderToken, stepMatchesPage, uuidv7 };
-//# sourceMappingURL=chunk-W4R4XCWL.mjs.map
-//# sourceMappingURL=chunk-W4R4XCWL.mjs.map
+export { ALWAYS_BLOCK_SELECTORS, BadgeRenderer, BannerRenderer, CompositeRenderer, CustomRenderer, DEFAULT_AUTOCAPTURE_CONFIG, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_KEY_PREFIX, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, FormRenderer, GUIDE_STYLES, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, RAW_BLOCK_ATTR, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, activationDelayMs, applyBlockStyle, buildContentBlock, buildSelectorPath, clearBuilderToken, clearPreviewToken, closeGuidePreview, filterHumanClasses, getPreviewToken, groupLayout, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isAutomaticActivation, isBuilderMode, isDeviceAllowed, isSnoozed, previewGuide, resolveBuilderContext, resolveBuilderToken, stepMatchesPage, uuidv7 };
+//# sourceMappingURL=chunk-NGP7IJVE.mjs.map
+//# sourceMappingURL=chunk-NGP7IJVE.mjs.map