veo-sdk 0.5.34 → 0.6.0

package/dist/index.cjs

@@ -571,6 +571,129 @@ var init_rich_text = __esm({
   }
 });
 
+// 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;
+}
+var init_video_block = __esm({
+  "src/plugins/guides/video-block.ts"() {
+  }
+});
+
 // src/plugins/guides/block-builder.ts
 function buildStepContent(step, doc, callbacks) {
   const container = doc.createElement("div");
@@ -695,8 +818,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";
@@ -720,7 +847,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;
     }
@@ -728,6 +855,31 @@ function buildContentBlock(block, doc) {
       return null;
   }
 }
+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";
@@ -758,14 +910,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)) {
@@ -844,16 +1016,24 @@ function readCtaUrl(step) {
   if (typeof candidate !== "string") return void 0;
   return isSafeUrl(candidate) ? candidate : void 0;
 }
-var BLOCK_ALIGN_SELF;
+var DIVIDER_LINE_STYLES, BLOCK_ALIGN_SELF, TEXT_PRESETS;
 var init_block_builder = __esm({
   "src/plugins/guides/block-builder.ts"() {
     init_constants2();
     init_rich_text();
+    init_video_block();
+    DIVIDER_LINE_STYLES = /* @__PURE__ */ new Set(["solid", "dotted", "dashed"]);
     BLOCK_ALIGN_SELF = {
       left: "flex-start",
       center: "center",
       right: "flex-end"
     };
+    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 }
+    };
   }
 });
 
@@ -1216,7 +1396,161 @@ var init_styles = __esm({
 }
 /* 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);
@@ -1309,6 +1643,13 @@ var init_styles = __esm({
   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;
@@ -1339,6 +1680,10 @@ var init_styles = __esm({
 
 .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);
@@ -1347,26 +1692,71 @@ var init_styles = __esm({
   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 {
@@ -2074,6 +2464,217 @@ var init_banner_renderer = __esm({
   }
 });
 
+// src/plugins/guides/checklist-block.ts
+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));
+}
+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;
+}
+var CHECKLIST_DEFAULTS, WEIGHTS, RING_R, RING_C;
+var init_checklist_block = __esm({
+  "src/plugins/guides/checklist-block.ts"() {
+    init_rich_text();
+    CHECKLIST_DEFAULTS = {
+      colorMode: "light",
+      iconEmptyColor: "#e7e2de",
+      iconFillColor: "#406a31",
+      barColor: "#406a31",
+      barHeight: 8,
+      fontSize: 14,
+      fontWeight: 600,
+      titleColor: "#2c2825",
+      subtitleColor: "#8a8582",
+      subtitleTemplate: "Completado <%= currentStep %> de <%= totalSteps %> pasos"
+    };
+    WEIGHTS = { regular: 400, medium: 500, semibold: 600, bold: 700 };
+    RING_R = 10;
+    RING_C = 2 * Math.PI * RING_R;
+  }
+});
+
 // src/plugins/guides/renderers/custom-frame.ts
 function mountCustomFrame(doc, step, context, opts) {
   const iframe = doc.createElement("iframe");
@@ -2258,6 +2859,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) {
@@ -2267,24 +2873,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);
@@ -2292,10 +2914,11 @@ function runScript(old, hostDoc) {
   hostDoc.body.appendChild(s);
   return s;
 }
-var codeSlotSeq;
+var RAW_BLOCK_ATTR, codeSlotSeq;
 var init_code_block = __esm({
   "src/plugins/guides/code-block.ts"() {
     init_custom_frame();
+    RAW_BLOCK_ATTR = "data-veo-raw-block";
     codeSlotSeq = 0;
   }
 });
@@ -2526,8 +3149,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: {
@@ -2540,17 +3169,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) => {
@@ -2559,7 +3192,17 @@ 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 };
@@ -2569,6 +3212,126 @@ var init_form_content = __esm({
     init_block_builder();
   }
 });
+
+// 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;
+  });
+}
+var init_layout = __esm({
+  "src/plugins/guides/layout.ts"() {
+  }
+});
+
+// src/plugins/guides/scroll-lock.ts
+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;
+  };
+}
+var states;
+var init_scroll_lock = __esm({
+  "src/plugins/guides/scroll-lock.ts"() {
+    states = /* @__PURE__ */ new WeakMap();
+  }
+});
+
+// src/plugins/guides/snooze.ts
+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 KEY, UNIT_MS;
+var init_snooze = __esm({
+  "src/plugins/guides/snooze.ts"() {
+    KEY = (guideId) => `veo:snooze:${guideId}`;
+    UNIT_MS = {
+      hour: 36e5,
+      day: 864e5,
+      week: 6048e5
+    };
+  }
+});
 function num(v, fallback) {
   return typeof v === "number" && Number.isFinite(v) ? v : fallback;
 }
@@ -2756,26 +3519,61 @@ var init_badge_marker = __esm({
     SIDE_GAP = 8;
   }
 });
+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];
+}
 function inlinePosOf(p) {
   return p === "before" || p === "prepend" || p === "append" ? p : "after";
 }
 function applyViewportPosition(card, position, design) {
   const s = card.style;
   s.position = "fixed";
-  const M = "16px";
+  const 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})`;
 }
+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";
@@ -2844,6 +3642,11 @@ 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;
@@ -2865,13 +3668,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}`]);
@@ -2880,13 +3684,18 @@ function applyCompositeDesign(card, design) {
     if (m) s.setProperty(`margin-${side.toLowerCase()}`, m);
   }
 }
-var ROW_ALIGN, CompositeRenderer, CLOSE_INSET;
+var ROW_ALIGN, ROW_JUSTIFY, ROW_VALIGN, CompositeRenderer, CLOSE_INSET, CLOSE_RESERVE_PX, CARD_DEFAULT_PAD_PX, MIN_CARD_WIDTH, NARROW_CARD_WIDTH;
 var init_composite_renderer = __esm({
   "src/plugins/guides/renderers/composite-renderer.ts"() {
     init_block_builder();
+    init_checklist_block();
     init_code_block();
     init_form_content();
     init_inline_host();
+    init_layout();
+    init_rich_text();
+    init_scroll_lock();
+    init_snooze();
     init_wait_for_element();
     init_badge_marker();
     init_base_renderer();
@@ -2896,6 +3705,12 @@ var init_composite_renderer = __esm({
       center: "center",
       right: "flex-end"
     };
+    ROW_JUSTIFY = { ...ROW_ALIGN, distribute: "space-between" };
+    ROW_VALIGN = {
+      top: "flex-start",
+      center: "center",
+      bottom: "flex-end"
+    };
     CompositeRenderer = class extends BaseRenderer {
       async render(context) {
         const idx = context.nav?.stepIndex ?? 0;
@@ -2914,7 +3729,8 @@ var init_composite_renderer = __esm({
           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" });
@@ -2927,6 +3743,10 @@ var init_composite_renderer = __esm({
         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,
@@ -2937,6 +3757,28 @@ var init_composite_renderer = __esm({
         };
         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;
@@ -2954,6 +3796,14 @@ var init_composite_renderer = __esm({
           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;
@@ -2963,6 +3813,7 @@ var init_composite_renderer = __esm({
             });
           }
           card.appendChild(closeBtn);
+          reserveCloseSpace(card, blocks, closePos, design);
         }
         if (badgeMode && anchor) {
           closeTooltip = this.renderBadgeMode(
@@ -2993,6 +3844,7 @@ var init_composite_renderer = __esm({
             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");
@@ -3019,6 +3871,7 @@ var init_composite_renderer = __esm({
                 this.closeOrSkip(context);
               }
             });
+            this.registerCleanup(lockScroll(doc));
           }
           applyViewportPosition(card, step.position, design);
           overlay.appendChild(card);
@@ -3036,84 +3889,218 @@ var init_composite_renderer = __esm({
             ...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;
             }
-            card.appendChild(form);
+            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;
+            }
+            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":
@@ -3131,7 +4118,12 @@ var init_composite_renderer = __esm({
             default:
               emit(block);
               this.closeOrSkip(context);
+              runSecond();
           }
+        };
+        btn.addEventListener("click", () => {
+          if (submitFirst) this.submitForms(submitFirst, context, idx, btn, runActions);
+          else runActions();
         });
         return btn;
       }
@@ -3150,17 +4142,27 @@ var init_composite_renderer = __esm({
           }
           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();
         });
       }
@@ -3269,6 +4271,10 @@ var init_composite_renderer = __esm({
       }
     };
     CLOSE_INSET = "10px";
+    CLOSE_RESERVE_PX = 42;
+    CARD_DEFAULT_PAD_PX = 20;
+    MIN_CARD_WIDTH = 120;
+    NARROW_CARD_WIDTH = 260;
   }
 });
 function applyFloatingPosition(wrapper, placement) {
@@ -3364,6 +4370,7 @@ var FormRenderer;
 var init_form_renderer = __esm({
   "src/plugins/guides/renderers/form-renderer.ts"() {
     init_form_content();
+    init_scroll_lock();
     init_base_renderer();
     FormRenderer = class extends BaseRenderer {
       render(context) {
@@ -3379,6 +4386,7 @@ var init_form_renderer = __esm({
         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();
@@ -3535,12 +4543,25 @@ var ModalRenderer;
 var init_modal_renderer = __esm({
   "src/plugins/guides/renderers/modal-renderer.ts"() {
     init_block_builder();
+    init_scroll_lock();
     init_walkthrough_block_builder();
     init_base_renderer();
     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;
@@ -3552,6 +4573,7 @@ var init_modal_renderer = __esm({
         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) => {
@@ -3609,9 +4631,12 @@ var init_modal_renderer = __esm({
       }
       onLiveUpdate(step) {
         if (this.overlay) this.overlay.className = overlayClassOf(step);
+        this.syncScrollLock(step);
       }
       destroy() {
         this.overlay = null;
+        this.releaseScroll?.();
+        this.releaseScroll = null;
         super.destroy();
       }
     };
@@ -3802,9 +4827,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;
+  }
+}
 var init_url_match = __esm({
   "src/plugins/guides/url-match.ts"() {
   }
@@ -3973,6 +5024,7 @@ var init_guide_preview = __esm({
             // 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 } : {}
           });
@@ -4365,8 +5417,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>`);
@@ -4395,16 +5453,40 @@ function injectBuilderChrome(opts) {
     }
   };
 }
-function stepCard(inner, label, active2) {
-  const b = el(
-    "button",
-    `veo-step${active2 ? " is-active" : ""}`,
-    `<div class="veo-step-box">${inner}</div><span class="veo-step-label"></span>`
+function stepCard(inner, label, active2, actions) {
+  const cls = `veo-step${active2 ? " 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", active2 ? "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", active2 ? "true" : "false");
-  return b;
+  card.querySelector(".veo-step-label").textContent = label;
+  card.setAttribute("aria-current", active2 ? "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_TOPBAR_H, CHROME_STEPS_H, ICONS, CHROME_CSS;
 var init_builder_chrome = __esm({
@@ -4421,6 +5503,9 @@ var init_builder_chrome = __esm({
       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"/>'
     };
@@ -4507,10 +5592,31 @@ var init_builder_chrome = __esm({
 .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; }
@@ -4548,6 +5654,8 @@ function injectBuilderPanel(opts) {
       },
       isVisible: () => false,
       setTopOffset: () => {
+      },
+      setSize: () => {
       }
     };
   }
@@ -4600,6 +5708,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) {
@@ -4699,6 +5822,7 @@ function injectBuilderPanel(opts) {
       title.textContent = t;
     },
     setVisible,
+    setSize,
     isVisible: () => visible,
     setTopOffset: (px) => {
       topOffset = px;
@@ -5284,6 +6408,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;
@@ -5304,13 +6431,742 @@ 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, active2) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.className = `veo-card-toolbar-${action}${active2 ? " is-active" : ""}`;
+      b.setAttribute("aria-pressed", active2 ? "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) => {
     const showNow = !cmd.honorTrigger;
     if (showNow) {
@@ -5330,7 +7186,7 @@ function initBuilderMode() {
       return;
     }
     const devices = cmd.guide.activationRules?.devices;
-    if (!showNow && !previewMode && devices && !isDeviceAllowed(devices)) {
+    if (!showNow && previewMode && devices && !isDeviceAllowed(devices)) {
       cancelPreviewDelay();
       withholdPreview();
       postPreviewStatus({ state: "device-mismatch", devices });
@@ -5382,15 +7238,16 @@ 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;
+    const gate = cmd.honorTrigger && !previewFired && previewMode;
     const waitsForTarget = (trig === "on_click" || trig === "on_hover") && (!isAutomaticActivation(rules) || previewDismissed);
     if (gate && waitsForTarget && sel) {
       cancelPreviewDelay();
@@ -5407,13 +7264,13 @@ 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;
         previewDismissed = true;
         if (previewMode) {
@@ -5421,9 +7278,7 @@ function initBuilderMode() {
           const t = r?.trigger;
           const selector = r?.selector?.trim();
           if ((t === "on_click" || t === "on_hover") && selector) armPreviewTrigger(selector, t);
-          return;
         }
-        if (lastPreview) applyPreviewGated(lastPreview);
       }
     });
     if (cmd.honorTrigger) postPreviewStatus({ state: "shown" });
@@ -5431,7 +7286,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,
@@ -5499,13 +7370,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;
@@ -5513,10 +7392,7 @@ function initBuilderMode() {
         chrome?.setHidden(true);
         const previewToRestore = lastPreview;
         if (previewToRestore) {
-          manipulator?.detach();
-          manipulator = null;
-          dropTarget?.detach();
-          dropTarget = null;
+          detachPreviewTools();
           closeGuidePreview();
         }
         const restorePanel = () => {
@@ -5555,11 +7431,21 @@ 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;
@@ -5612,10 +7498,7 @@ function initBuilderMode() {
     removeNavWatcher();
     picker?.stop();
     picker = null;
-    manipulator?.detach();
-    manipulator = null;
-    dropTarget?.detach();
-    dropTarget = null;
+    detachPreviewTools();
     hideDragGhost();
     pendingPreview = null;
     disarmPreviewTrigger();
@@ -5643,6 +7526,8 @@ function initBuilderMode() {
           case "preview":
             if (previewMode) return;
             previewMode = true;
+            previewFired = false;
+            previewDismissed = false;
             panelWasVisible = panel?.isVisible() ?? true;
             panel?.setVisible(false);
             chrome?.setPreview(true);
@@ -5651,6 +7536,8 @@ function initBuilderMode() {
           case "exit-preview":
             if (!previewMode) return;
             previewMode = false;
+            disarmPreviewTrigger();
+            cancelPreviewDelay();
             chrome?.setPreview(false);
             panel?.setVisible(panelWasVisible);
             if (lastPreview) applyPreviewGated(lastPreview);
@@ -5732,13 +7619,36 @@ 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 ?? [];
+  };
+}
 var init_builder_mode = __esm({
   "src/plugins/builder/builder-mode.ts"() {
     init_builder_token();
     init_safe_env();
     init_activation_devices();
     init_activation_rules();
+    init_block_builder();
+    init_code_block();
     init_guide_preview();
+    init_layout();
+    init_styles();
     init_url_match();
     init_block_drop_target();
     init_bridge_protocol();
@@ -7137,6 +9047,7 @@ init_inline_renderer();
 init_modal_renderer();
 init_tooltip_renderer();
 init_walkthrough_renderer();
+init_snooze();
 init_url_match();
 
 // src/plugins/guides/walkthrough-state.ts
@@ -7329,6 +9240,12 @@ var GuidesController = class {
      * en cada `checkGuides` con {@link pruneComposite}.
      */
     this.activeComposite = /* @__PURE__ */ new Map();
+    /**
+     * Progreso de esta sesión, por guía: pasos vistos y completado, según las
+     * interacciones que ESTE SDK emitió (aunque el lote aún no haya viajado al
+     * backend). Se mezcla con la respuesta del backend en `fetchProgress`.
+     */
+    this.sessionProgress = /* @__PURE__ */ new Map();
     this.debug = config.debug === true;
     this.apiUrl = config.apiUrl;
     this.apiKey = config.apiKey;
@@ -7415,6 +9332,10 @@ var GuidesController = class {
       if (this.debug) console.log(`[veo] guides: filtered locally guideId=${guide.guideId}`);
       return;
     }
+    if (!opts.byUser && isSnoozed(guide.guideId)) {
+      if (this.debug) console.log(`[veo] guides: snoozed guideId=${guide.guideId}`);
+      return;
+    }
     if (!opts.byUser && this.isHeldByRepeat(guide)) {
       if (this.debug) console.log(`[veo] guides: held by repeat guideId=${guide.guideId}`);
       return;
@@ -7690,6 +9611,17 @@ ${pageUrl}`;
     const goToStep = (target) => {
       cleanup();
       if (target < 0 || target >= steps.length) return;
+      const endUserId = this.client.getEndUserId();
+      if (endUserId) {
+        this.enqueueInteraction(
+          guide.guideId,
+          endUserId,
+          sessionId,
+          pageUrl,
+          target > idx ? "step_advanced" : "step_back",
+          target
+        );
+      }
       const step = steps[target];
       if (step && stepMatchesPage(step.pageLocation, pageUrl)) {
         this.renderCompositeStep(guide, target, sessionId, pageUrl, badgeOpen);
@@ -7714,10 +9646,15 @@ ${pageUrl}`;
         onInteraction: (e) => this.handleInteraction(guide, sessionId, pageUrl, e),
         onClose: cleanup,
         onTrack: (name, props) => this.client.track(name, props),
-        onFormSubmit: (answers) => this.submitFormResponse(guide.guideId, answers),
+        onFormSubmit: (answers, meta) => this.submitFormResponse(guide.guideId, answers, meta),
         onOpenGuide: (targetGuideId) => {
           void this.openGuideById(targetGuideId, sessionId, pageUrl);
         },
+        // Lista de tareas: progreso del usuario y abrir una guía en su paso.
+        fetchProgress: (ids) => this.fetchProgress(ids),
+        onOpenGuideAt: (targetGuideId, stepIndex) => {
+          void this.openGuideById(targetGuideId, sessionId, pageUrl, stepIndex);
+        },
         // Badge: cuando el MOTOR muestra la guía (automático, elemento objetivo
         // o encadenada), el contenido se abre solo; el marcador queda para
         // volver a verla. Solo `manual` deja el tooltip cerrado.
@@ -7745,7 +9682,7 @@ ${pageUrl}`;
     const onTrack = (eventName, properties) => {
       this.client.track(eventName, properties);
     };
-    const onFormSubmit = (answers) => this.submitFormResponse(guide.guideId, answers);
+    const onFormSubmit = (answers, meta) => this.submitFormResponse(guide.guideId, answers, meta);
     const onOpenGuide = (targetGuideId) => {
       void this.openGuideById(targetGuideId, sessionId, pageUrl);
     };
@@ -7765,7 +9702,7 @@ ${pageUrl}`;
    * un botón); respeta el dedupe de guías activas y el flujo normal de
    * tracking. 404/red → no-op (la guía destino pudo borrarse).
    */
-  async openGuideById(guideId, sessionId, pageUrl) {
+  async openGuideById(guideId, sessionId, pageUrl, startStep) {
     if (this.activeByGuideId.has(guideId)) return;
     const guide = await this.resolver.fetchById(guideId);
     if (!guide) {
@@ -7773,6 +9710,15 @@ ${pageUrl}`;
       return;
     }
     const endUserId = this.client.getEndUserId() ?? this.client.getAnonymousId();
+    if (guide.guideType === "composite" && typeof startStep === "number") {
+      const total = guide.guideSteps.length;
+      const idx = Math.max(0, Math.min(total - 1, Math.floor(startStep)));
+      this.enqueueInteractionOnce(guide.guideId, endUserId, sessionId, pageUrl, "shown", 0);
+      if (idx > 0)
+        this.enqueueInteraction(guide.guideId, endUserId, sessionId, pageUrl, "step_advanced", idx);
+      this.renderCompositeStep(guide, idx, sessionId, pageUrl);
+      return;
+    }
     if (guide.guideType === "walkthrough" && guide.guideSteps.length > 1) {
       if (!this.walkthroughState.hasActive()) {
         await this.startWalkthrough(guide, endUserId, sessionId, pageUrl);
@@ -7983,6 +9929,7 @@ ${pageUrl}`;
         console.warn("[veo] guides: interaction without endUserId \u2014 skipping enqueue");
       return;
     }
+    this.noteProgress(guide.guideId, event.action, event.stepIndex);
     this.trackerQueue.enqueue({
       guideId: guide.guideId,
       payload: {
@@ -8002,6 +9949,7 @@ ${pageUrl}`;
    * una navegación distinta) y deduplicarlas perdería datos.
    */
   enqueueInteraction(guideId, endUserId, sessionId, pageUrl, action, stepIndex) {
+    this.noteProgress(guideId, action, stepIndex);
     this.trackerQueue.enqueue({
       guideId,
       payload: {
@@ -8014,6 +9962,45 @@ ${pageUrl}`;
       }
     });
   }
+  noteProgress(guideId, action, stepIndex) {
+    if (action !== "shown" && action !== "step_advanced" && action !== "step_back" && action !== "completed") {
+      return;
+    }
+    const cur = this.sessionProgress.get(guideId) ?? { maxStep: -1, completed: false };
+    this.sessionProgress.set(guideId, {
+      maxStep: Math.max(cur.maxStep, stepIndex),
+      completed: cur.completed || action === "completed"
+    });
+  }
+  /**
+   * Progreso del usuario en varias guías (bloque «Lista de tareas»): lo pide
+   * al backend y lo eleva con lo visto en esta sesión (nunca lo baja).
+   */
+  async fetchProgress(guideIds) {
+    const endUserId = this.client.getEndUserId() ?? this.client.getAnonymousId();
+    let rows = [];
+    try {
+      const params = new URLSearchParams({ endUserId, guideIds: guideIds.join(",") });
+      const res = await fetch(`${this.apiUrl}/v1/guides/progress?${params}`, {
+        headers: { "X-Api-Key": this.apiKey }
+      });
+      if (res.ok) rows = (await res.json()).items ?? [];
+      else if (this.debug) console.warn("[veo] guides/progress respondi\xF3", res.status);
+    } catch (err) {
+      if (this.debug) console.warn("[veo] guides/progress fall\xF3:", err);
+    }
+    return rows.map((r) => {
+      const local2 = this.sessionProgress.get(r.guideId);
+      if (!local2) return r;
+      const seen = Math.min(r.totalSteps, local2.maxStep + 1);
+      const completed = r.completed || local2.completed || seen >= r.totalSteps;
+      return {
+        ...r,
+        currentStep: completed ? r.totalSteps : Math.max(r.currentStep, seen),
+        completed
+      };
+    });
+  }
   /**
    * Encola con dedup por sesión del SDK. Para `shown` del primer step:
    * no queremos re-emitirlo si el usuario navega entre dos páginas que
@@ -8058,13 +10045,19 @@ ${pageUrl}`;
    * propiedades del usuario. Usa el endUserId actual (o el anónimo si aún no
    * hubo identify — el backend pre-crea la fila igual que identify).
    */
-  async submitFormResponse(guideId, answers) {
+  async submitFormResponse(guideId, answers, meta) {
     const endUserId = this.client.getEndUserId() ?? this.client.getAnonymousId();
     try {
       const res = await fetch(`${this.apiUrl}/v1/guides/${guideId}/form-response`, {
         method: "POST",
         headers: { "Content-Type": "application/json", "X-Api-Key": this.apiKey },
-        body: JSON.stringify({ endUserId, answers })
+        body: JSON.stringify({
+          endUserId,
+          answers,
+          sessionId: this.client.getSessionId(),
+          ...meta ? { stepPosition: meta.stepIndex } : {},
+          ...meta?.pollId ? { pollId: meta.pollId } : {}
+        })
       });
       if (!res.ok && this.debug) {
         console.warn("[veo] form-response respondi\xF3", res.status);
@@ -8117,7 +10110,7 @@ async function runPreviewMode(opts) {
   } catch (err) {
     if (opts.debug) console.warn("[veo] preview-resolve fall\xF3:", err);
   }
-  const submitToBackend = async (answers) => {
+  const submitToBackend = async (answers, meta) => {
     if (!guide) return false;
     const veo = window.veo;
     const endUserId = veo?.getEndUserId?.() ?? veo?.getAnonymousId?.() ?? null;
@@ -8126,7 +10119,12 @@ async function runPreviewMode(opts) {
       const res = await fetch(`${opts.apiUrl}/v1/guides/${guide.guideId}/form-response`, {
         method: "POST",
         headers: { "Content-Type": "application/json", "X-Api-Key": opts.apiKey },
-        body: JSON.stringify({ endUserId, answers })
+        body: JSON.stringify({
+          endUserId,
+          answers,
+          ...meta ? { stepPosition: meta.stepIndex } : {},
+          ...meta?.pollId ? { pollId: meta.pollId } : {}
+        })
       });
       return res.ok;
     } catch {