veo-sdk 0.5.33 → 0.6.0

package/dist/{chunk-3ZOKCQ54.mjs → chunk-N4VFMZFA.mjs}

@@ -1,4 +1,4 @@
-import { hasDocument, hasWindow, resolveBuilderContext, closeGuidePreview, clearBuilderToken, buildSelectorPath, filterHumanClasses, isDeviceAllowed, stepMatchesPage, previewGuide } from './chunk-M6PB5UMW.mjs';
+import { hasDocument, hasWindow, resolveBuilderContext, closeGuidePreview, clearBuilderToken, buildSelectorPath, filterHumanClasses, groupLayout, stepMatchesPage, isAutomaticActivation, activationDelayMs, previewGuide, applyBlockStyle, buildContentBlock, RAW_BLOCK_ATTR, GUIDE_STYLES, isDeviceAllowed } from './chunk-O6USA4TU.mjs';
 import { BUILDER_TOKEN_PARAM, BUILDER_ORIGIN_PARAM } from './chunk-PTG3BTJE.mjs';
 
 // src/plugins/builder/block-drop-target.ts
@@ -122,6 +122,9 @@ var ICONS = {
   chevronDown: '<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>',
   chevronUp: '<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>',
   plus: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>',
+  pencil: '<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/>',
+  copy: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"/>',
+  trash: '<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>',
   cursor: '<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM12 2.25V4.5m5.834.166-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243-1.59-1.59"/>',
   spinner: '<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"/>'
 };
@@ -307,8 +310,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>`);
@@ -337,16 +346,40 @@ function injectBuilderChrome(opts) {
     }
   };
 }
-function stepCard(inner, label, active) {
-  const b = el(
-    "button",
-    `veo-step${active ? " is-active" : ""}`,
-    `<div class="veo-step-box">${inner}</div><span class="veo-step-label"></span>`
+function stepCard(inner, label, active, actions) {
+  const cls = `veo-step${active ? " is-active" : ""}`;
+  if (!actions) {
+    const b = el(
+      "button",
+      cls,
+      `<div class="veo-step-box">${inner}</div><span class="veo-step-label"></span>`
+    );
+    b.type = "button";
+    b.querySelector(".veo-step-label").textContent = label;
+    b.setAttribute("aria-pressed", active ? "true" : "false");
+    return b;
+  }
+  const card = el(
+    "div",
+    cls,
+    `<div class="veo-step-box">${inner}<div class="veo-step-hover"><div class="veo-step-hover-top"><button type="button" class="veo-step-icon veo-step-remove" title="Eliminar paso" aria-label="Eliminar paso">${svg("trash", 14)}</button><button type="button" class="veo-step-icon veo-step-duplicate" title="Duplicar paso" aria-label="Duplicar paso">${svg("copy", 14)}</button></div><div class="veo-step-hover-main"><button type="button" class="veo-step-edit">${svg("pencil", 14)}<span>Editar</span></button></div></div></div><span class="veo-step-label"></span>`
   );
-  b.type = "button";
-  b.querySelector(".veo-step-label").textContent = label;
-  b.setAttribute("aria-pressed", active ? "true" : "false");
-  return b;
+  card.querySelector(".veo-step-label").textContent = label;
+  card.setAttribute("aria-current", active ? "step" : "false");
+  const remove = card.querySelector(".veo-step-remove");
+  remove.disabled = !actions.canRemove;
+  if (!actions.canRemove) remove.title = "La gu\xEDa necesita al menos un paso";
+  const on = (sel, fn) => {
+    card.querySelector(sel)?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      fn();
+    });
+  };
+  on(".veo-step-edit", actions.onEdit);
+  on(".veo-step-duplicate", actions.onDuplicate);
+  on(".veo-step-remove", actions.onRemove);
+  card.addEventListener("click", actions.onEdit);
+  return card;
 }
 var CHROME_CSS = `
 :host { all: initial; }
@@ -431,10 +464,31 @@ var CHROME_CSS = `
 .veo-steps-list { display: flex; align-items: flex-start; gap: 20px; }
 .veo-step { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
 .veo-step-box {
+  position: relative; overflow: hidden;
   width: 116px; height: 64px; border-radius: 10px; background: #fff; border: 2px solid transparent;
   display: flex; align-items: center; justify-content: center; color: #2b2623;
   box-shadow: 0 1px 2px rgba(0,0,0,0.06);
 }
+/* Capa de acciones del paso: aparece al pasar el mouse o al enfocar un bot\xF3n. */
+.veo-step-hover {
+  position: absolute; inset: 0; background: #2b2623; border-radius: 8px;
+  display: flex; flex-direction: column; padding: 3px 4px 6px; box-sizing: border-box;
+  opacity: 0; transition: opacity 120ms ease-out;
+}
+.veo-step:hover .veo-step-hover, .veo-step:focus-within .veo-step-hover { opacity: 1; }
+.veo-step-hover-top { display: flex; justify-content: space-between; align-items: center; }
+.veo-step-hover-main { flex: 1; display: flex; align-items: center; justify-content: center; }
+.veo-step-icon {
+  border: 0; background: transparent; color: #fff; cursor: pointer; padding: 0;
+  width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
+}
+.veo-step-icon:hover { background: rgba(255,255,255,0.14); }
+.veo-step-icon:disabled { opacity: 0.35; cursor: default; background: transparent; }
+.veo-step-edit {
+  width: 100%; margin: 0 6px; border: 0; background: #dbeefc; color: #1d6fb8; font: inherit; font-size: 13px; font-weight: 600;
+  border-radius: 6px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+}
+.veo-step-edit:hover { background: #cbe4f9; }
 .veo-step.is-active .veo-step-box { border-color: #b74d00; }
 .veo-step-label { font-size: 13px; color: #6b635d; }
 .veo-step.is-active .veo-step-label { color: #2b2623; font-weight: 600; }
@@ -477,6 +531,8 @@ function injectBuilderPanel(opts) {
       },
       isVisible: () => false,
       setTopOffset: () => {
+      },
+      setSize: () => {
       }
     };
   }
@@ -529,6 +585,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 = `${clamp(Math.round(size.width), MIN_W, window.innerWidth - MARGIN * 2)}px`;
+      card.style.height = `${clamp(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) {
@@ -628,6 +699,7 @@ function injectBuilderPanel(opts) {
       title.textContent = t;
     },
     setVisible,
+    setSize,
     isVisible: () => visible,
     setTopOffset: (px) => {
       topOffset = px;
@@ -1188,6 +1260,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;
@@ -1196,6 +1271,7 @@ function initBuilderMode() {
   let previewTrigger = null;
   let previewFired = false;
   let previewDelay = null;
+  let previewDismissed = false;
   let panelWasVisible = true;
   const getTarget = () => panel ? panel.target() : staticTarget;
   const post = (event) => {
@@ -1207,15 +1283,751 @@ function initBuilderMode() {
   };
   const previewMatchesPage = (cmd) => stepMatchesPage(previewStep(cmd)?.pageLocation, window.location.href);
   const postPreviewStatus = (payload) => post({ type: "preview-status", payload });
-  const withholdPreview = () => {
+  const detachPreviewTools = () => {
     manipulator?.detach();
     manipulator = null;
     dropTarget?.detach();
     dropTarget = null;
+    cardClick?.();
+    cardClick = null;
+    rowHover?.();
+    rowHover = null;
+    hoverRowId = null;
+    hoverCard = false;
+    rawBlock?.detach();
+    rawBlock = null;
+    shownPreview = null;
+  };
+  const withholdPreview = () => {
+    detachPreviewTools();
+    shownPreview = null;
     closeGuidePreview();
   };
+  const FRAME_PAD = 4;
+  const FRAME_MIN_H = 0;
+  const TOOLBAR_H = 30;
+  const ICON = {
+    pencil: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/></svg>',
+    copy: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16.5 8.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v8.25A2.25 2.25 0 0 0 6 16.5h2.25m8.25-8.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-7.5A2.25 2.25 0 0 1 8.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 0 0-2.25 2.25v6"/></svg>',
+    trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>'
+  };
+  const ICON_MOVE = {
+    left: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 12h-15m0 0 6.75 6.75M4.5 12l6.75-6.75"/></svg>',
+    right: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12h15m0 0-6.75-6.75M19.5 12l-6.75 6.75"/></svg>'
+  };
+  const moveAbility = (blocks, blockId) => {
+    for (const row of groupLayout(blocks)) {
+      for (let c = 0; c < row.columns.length; c++) {
+        const col = row.columns[c];
+        if (!col.blocks.some((b) => b.block.editorId === blockId)) continue;
+        return { left: c > 0, right: c < row.columns.length - 1 };
+      }
+    }
+    return { left: false, right: false };
+  };
+  let previewBlocks = [];
+  let hoverRowId = null;
+  let selectedRowId = null;
+  let rowHover = null;
+  let hoverCard = false;
+  let panelSection = null;
+  let shownPreview = null;
+  const structureOf = (step) => {
+    if (!step) return "";
+    const { blocks, ...rest } = step;
+    return JSON.stringify({
+      rest,
+      blocks: (blocks ?? []).map((b) => {
+        const { text: _t, html: _h, style: _s, ...keep } = b;
+        return keep;
+      })
+    });
+  };
+  const tryPatchPreview = (cmd) => {
+    const prev = shownPreview;
+    if (!prev || cmd.guide.guideType !== "composite" || prev.guide.guideType !== "composite") {
+      return false;
+    }
+    const idx = cmd.guide.startStepIndex ?? 0;
+    if ((prev.guide.startStepIndex ?? 0) !== idx) return false;
+    const guideSig = (g) => JSON.stringify({ ...g, guideSteps: void 0 });
+    if (guideSig(prev.guide) !== guideSig(cmd.guide) || prev.editable !== cmd.editable)
+      return false;
+    const host = document.querySelector("[data-veo-guide]");
+    const card = host ? previewCard(host) : null;
+    if (!host || !card) return false;
+    const prevStep = prev.guide.guideSteps[idx];
+    const nextStep = cmd.guide.guideSteps[idx];
+    if (!prevStep || !nextStep) return false;
+    if (structureOf(prevStep) !== structureOf(nextStep)) return false;
+    const doc = card.ownerDocument;
+    const prevBlocks = prevStep.blocks ?? [];
+    const nextBlocks = nextStep.blocks ?? [];
+    for (let i = 0; i < nextBlocks.length; i++) {
+      const a = prevBlocks[i];
+      const b = nextBlocks[i];
+      if (a.text === b.text && a.html === b.html && JSON.stringify(a.style) === JSON.stringify(b.style)) {
+        continue;
+      }
+      if (!b.editorId) return false;
+      const node = card.querySelector(`[data-veo-block-id="${b.editorId}"]`);
+      if (!node) return false;
+      if (b.type === "button") {
+        node.textContent = b.text?.trim() || "OK";
+        node.removeAttribute("style");
+        node.classList.remove("veo-guide-cta--secondary", "veo-guide-cta--link");
+        const st = b.style ?? {};
+        if (st.preset === "secondary" || st.preset === "link") {
+          node.classList.add(`veo-guide-cta--${st.preset}`);
+        }
+        if (typeof st.ariaLabel === "string" && st.ariaLabel.trim()) {
+          node.setAttribute("aria-label", st.ariaLabel.trim());
+        } else node.removeAttribute("aria-label");
+        applyBlockStyle(node, b.style, "button");
+        continue;
+      }
+      if (b.type === "code" || b.type === "form") return false;
+      const fresh = buildContentBlock(b, doc, { editing: true }) ?? (() => {
+        const el2 = doc.createElement("div");
+        el2.className = "veo-block-placeholder";
+        el2.textContent = b.type === "image" ? "Imagen (sin URL)" : b.type === "video" ? "Video (elige proveedor y pega la URL)" : "Bloque vac\xEDo";
+        return el2;
+      })();
+      fresh.dataset.veoBlock = node.dataset.veoBlock ?? String(i);
+      fresh.dataset.veoBlockId = b.editorId;
+      node.replaceWith(fresh);
+    }
+    shownPreview = cmd;
+    previewBlocks = nextBlocks;
+    applyBlockHighlight(host, idx);
+    renderGapZones(host, idx, nextBlocks);
+    return true;
+  };
+  const previewCard = (host) => host.shadowRoot?.querySelector(".veo-card") ?? null;
+  const clearBlockHighlight = (host) => {
+    const card = previewCard(host);
+    if (!card) return;
+    for (const el2 of card.querySelectorAll(".veo-block--selected")) {
+      el2.classList.remove("veo-block--selected");
+    }
+    card.querySelector(".veo-block-toolbar")?.remove();
+    card.querySelector(".veo-block-frame")?.remove();
+  };
+  const applyBlockHighlight = (host, stepIndex) => {
+    clearBlockHighlight(host);
+    const card = previewCard(host);
+    if (!card) return;
+    const el2 = selectedBlockId ? card.querySelector(`[data-veo-block-id="${selectedBlockId}"]`) : null;
+    if (!el2 || !selectedBlockId) {
+      renderRowChrome(host, stepIndex);
+      return;
+    }
+    el2.classList.add("veo-block--selected");
+    const doc = card.ownerDocument;
+    const cs = getComputedStyle(card);
+    const padL = Number.parseFloat(cs.paddingLeft) || 0;
+    const padT = Number.parseFloat(cs.paddingTop) || 0;
+    const padR = Number.parseFloat(cs.paddingRight) || 0;
+    const padB = Number.parseFloat(cs.paddingBottom) || 0;
+    const parent = el2.parentElement;
+    const inCol = parent?.classList.contains("veo-col") ? parent : null;
+    const boxL = inCol ? inCol.offsetLeft : padL;
+    const boxR = inCol ? inCol.offsetLeft + inCol.offsetWidth : card.clientWidth - padR;
+    const boxT = padT;
+    const boxB = card.clientHeight - padB;
+    const fx = Math.max(boxL, el2.offsetLeft - FRAME_PAD);
+    const fr = Math.min(boxR, el2.offsetLeft + el2.offsetWidth + FRAME_PAD);
+    const fw = Math.max(0, fr - fx);
+    const fy = Math.max(boxT, el2.offsetTop - FRAME_PAD);
+    const fb = Math.min(boxB, el2.offsetTop + el2.offsetHeight + FRAME_PAD);
+    const fh = Math.max(FRAME_MIN_H, fb - fy);
+    const frame = doc.createElement("div");
+    frame.className = "veo-block-frame";
+    frame.setAttribute("data-veo-builder-chrome", "");
+    frame.style.left = `${fx}px`;
+    frame.style.top = `${fy}px`;
+    frame.style.width = `${fw}px`;
+    frame.style.height = `${fh}px`;
+    card.appendChild(frame);
+    const bar = doc.createElement("div");
+    bar.className = "veo-block-toolbar";
+    bar.setAttribute("data-veo-builder-chrome", "");
+    const blockId = selectedBlockId;
+    const mk = (action, label, icon, enabled = true) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.title = label;
+      b.setAttribute("aria-label", label);
+      b.className = `veo-block-toolbar-${action}`;
+      b.innerHTML = icon;
+      b.disabled = !enabled;
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "block-action", payload: { stepIndex, blockId, action } });
+      });
+      bar.appendChild(b);
+    };
+    const can = moveAbility(previewBlocks, blockId);
+    mk("edit", "Editar", ICON.pencil);
+    mk("duplicate", "Duplicar", ICON.copy);
+    mk("remove", "Eliminar", ICON.trash);
+    mk("move-left", "Mover a la izquierda", ICON_MOVE.left, can.left);
+    mk("move-right", "Mover a la derecha", ICON_MOVE.right, can.right);
+    bar.style.right = `${Math.max(0, card.clientWidth - fr)}px`;
+    card.appendChild(bar);
+    const barH = bar.offsetHeight || TOOLBAR_H;
+    bar.dataset.veoTopAbove = String(fy - barH - 6);
+    bar.dataset.veoTopBelow = String(fb + 6);
+    bar.style.top = bar.dataset.veoTopAbove;
+    renderRowChrome(host, stepIndex);
+  };
+  const chromeRect = (el2) => ({
+    left: el2.offsetLeft,
+    top: el2.offsetTop,
+    right: el2.offsetLeft + el2.offsetWidth,
+    bottom: el2.offsetTop + el2.offsetHeight
+  });
+  const intersects = (a, b) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+  const resolveToolbarOverlaps = (card) => {
+    const cardBar = card.querySelector(".veo-card-toolbar");
+    const blockBar = card.querySelector(".veo-block-toolbar");
+    const rowBar = card.querySelector(".veo-row-toolbar");
+    if (blockBar?.dataset.veoTopAbove) {
+      blockBar.style.top = `${blockBar.dataset.veoTopAbove}px`;
+      if (cardBar && intersects(chromeRect(blockBar), chromeRect(cardBar))) {
+        blockBar.style.top = `${blockBar.dataset.veoTopBelow}px`;
+      }
+    }
+    if (rowBar?.dataset.veoRight) {
+      rowBar.style.left = "";
+      rowBar.style.right = `${rowBar.dataset.veoRight}px`;
+      rowBar.style.top = `${rowBar.dataset.veoTopBelow}px`;
+      const others = [cardBar, blockBar].filter((b) => !!b);
+      const clashes = () => others.some((o) => intersects(chromeRect(rowBar), chromeRect(o)));
+      if (clashes()) {
+        rowBar.style.right = "";
+        rowBar.style.left = `${rowBar.dataset.veoLeft}px`;
+      }
+      if (clashes() && blockBar) {
+        rowBar.style.left = "";
+        rowBar.style.right = `${rowBar.dataset.veoRight}px`;
+        rowBar.style.top = `${chromeRect(blockBar).bottom + 6}px`;
+      }
+    }
+  };
+  const rectOf = (el2) => ({
+    left: el2.offsetLeft,
+    top: el2.offsetTop,
+    right: el2.offsetLeft + el2.offsetWidth,
+    bottom: el2.offsetTop + el2.offsetHeight
+  });
+  const union = (rs) => rs.length === 0 ? null : rs.reduce((acc, r) => ({
+    left: Math.min(acc.left, r.left),
+    top: Math.min(acc.top, r.top),
+    right: Math.max(acc.right, r.right),
+    bottom: Math.max(acc.bottom, r.bottom)
+  }));
+  const layoutRows = (card, blocks) => {
+    const elOf = (b) => b.editorId ? card.querySelector(`[data-veo-block-id="${b.editorId}"]`) : null;
+    const cs = getComputedStyle(card);
+    const padL = Number.parseFloat(cs.paddingLeft) || 0;
+    const padR = Number.parseFloat(cs.paddingRight) || 0;
+    const contentLeft = padL;
+    const contentRight = card.clientWidth - padR;
+    const rows = groupLayout(blocks).map((row) => {
+      const columns = row.columns.map((col) => {
+        const items = col.blocks.map(({ block }) => ({ block, el: elOf(block) })).filter(
+          (x) => !!x.el && !!x.block.editorId
+        );
+        const blocksRect2 = union(items.map((x) => rectOf(x.el)));
+        if (!blocksRect2) return null;
+        const colEl = items[0]?.el.parentElement;
+        const rect2 = colEl?.classList.contains("veo-col") ? rectOf(colEl) : blocksRect2;
+        return { items, rect: rect2 };
+      }).filter((c) => c !== null);
+      const blocksRect = union(columns.map((c) => c.rect));
+      if (!blocksRect) return null;
+      const rowEl = columns[0]?.items[0]?.el.parentElement?.parentElement;
+      const rect = rowEl?.classList.contains("veo-row") ? rectOf(rowEl) : { ...blocksRect, left: contentLeft, right: contentRight };
+      const id = columns[0]?.items[0]?.block.editorId;
+      return { id, row: row.row, columns, rect };
+    }).filter((r) => r !== null);
+    return { rows, content: { left: contentLeft, right: contentRight } };
+  };
+  const clearRowChrome = (card) => {
+    card.querySelector(".veo-row-frame")?.remove();
+    card.querySelector(".veo-row-toolbar")?.remove();
+  };
+  const renderRowChrome = (host, stepIndex) => {
+    const card = previewCard(host);
+    if (!card) return;
+    clearRowChrome(card);
+    resolveToolbarOverlaps(card);
+    const { rows } = layoutRows(card, previewBlocks);
+    const rowOfSelected = selectedBlockId ? rows.find(
+      (r) => r.columns.some((c) => c.items.some((i) => i.block.editorId === selectedBlockId))
+    ) : void 0;
+    const target = (selectedRowId ? rows.find((r) => r.id === selectedRowId) : void 0) ?? rowOfSelected ?? (hoverRowId ? rows.find((r) => r.id === hoverRowId) : void 0);
+    if (!target) return;
+    const doc = card.ownerDocument;
+    const cs = getComputedStyle(card);
+    const padT = Number.parseFloat(cs.paddingTop) || 0;
+    const padB = Number.parseFloat(cs.paddingBottom) || 0;
+    const PAD = 6;
+    const fx = Math.max(0, target.rect.left - PAD);
+    const fr = Math.min(card.clientWidth, target.rect.right + PAD);
+    const fy = Math.max(Math.min(padT, target.rect.top), target.rect.top - PAD);
+    const fb = Math.min(
+      Math.max(card.clientHeight - padB, target.rect.bottom),
+      target.rect.bottom + PAD
+    );
+    const frame = doc.createElement("div");
+    frame.className = "veo-row-frame";
+    frame.setAttribute("data-veo-builder-chrome", "");
+    frame.style.left = `${fx}px`;
+    frame.style.top = `${fy}px`;
+    frame.style.width = `${Math.max(0, fr - fx)}px`;
+    frame.style.height = `${Math.max(0, fb - fy)}px`;
+    card.appendChild(frame);
+    const bar = doc.createElement("div");
+    bar.className = "veo-row-toolbar";
+    bar.setAttribute("data-veo-builder-chrome", "");
+    const blockId = target.id;
+    const mk = (action, label, icon, text) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.title = label;
+      b.setAttribute("aria-label", label);
+      b.className = `veo-row-toolbar-${action}`;
+      b.innerHTML = icon;
+      if (text) b.append(text);
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "row-action", payload: { stepIndex, blockId, action } });
+      });
+      bar.appendChild(b);
+    };
+    mk("edit", "Editar fila", ICON.pencil, "Editar fila");
+    mk("duplicate", "Duplicar fila", ICON.copy);
+    mk("remove", "Eliminar fila", ICON.trash);
+    card.appendChild(bar);
+    bar.dataset.veoRight = String(Math.max(0, card.clientWidth - fr));
+    bar.dataset.veoLeft = String(fx);
+    bar.dataset.veoTopBelow = String(fb + 6);
+    resolveToolbarOverlaps(card);
+  };
+  const renderCardChrome = (host, stepIndex) => {
+    const card = previewCard(host);
+    if (!card) return;
+    card.querySelector(".veo-card-frame")?.remove();
+    card.querySelector(".veo-card-toolbar")?.remove();
+    if (!hoverCard) {
+      resolveToolbarOverlaps(card);
+      return;
+    }
+    const doc = card.ownerDocument;
+    const frame = doc.createElement("div");
+    frame.className = "veo-card-frame";
+    frame.setAttribute("data-veo-builder-chrome", "");
+    card.appendChild(frame);
+    const bar = doc.createElement("div");
+    bar.className = "veo-card-toolbar";
+    bar.setAttribute("data-veo-builder-chrome", "");
+    const mk = (action, label, active) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.className = `veo-card-toolbar-${action}${active ? " is-active" : ""}`;
+      b.setAttribute("aria-pressed", active ? "true" : "false");
+      b.textContent = label;
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "card-action", payload: { stepIndex, action } });
+      });
+      bar.appendChild(b);
+    };
+    mk("edit-container", "Editar contenedor", panelSection === "step");
+    mk("edit-rows", "Editar filas", panelSection === "structure");
+    card.appendChild(bar);
+    bar.style.top = `${-Math.round((bar.offsetHeight || 34) / 2)}px`;
+    resolveToolbarOverlaps(card);
+  };
+  const attachRowHover = (host, stepIndex) => {
+    const onMove = (e) => {
+      const card = previewCard(host);
+      if (!card) return;
+      const overCard = e.composedPath().some(
+        (n) => n instanceof Element && (n.classList.contains("veo-card") || n.classList.contains("veo-card-toolbar"))
+      );
+      if (overCard !== hoverCard) {
+        hoverCard = overCard;
+        renderCardChrome(host, stepIndex);
+      }
+      if (e.composedPath().some((n) => n instanceof Element && n.classList.contains("veo-row-toolbar"))) {
+        return;
+      }
+      const rect = card.getBoundingClientRect();
+      const x = e.clientX - rect.left - card.clientLeft;
+      const y = e.clientY - rect.top - card.clientTop;
+      const bar = card.querySelector(".veo-row-toolbar");
+      if (bar) {
+        const AIR = 10;
+        if (x >= bar.offsetLeft - AIR && x <= bar.offsetLeft + bar.offsetWidth + AIR && y >= bar.offsetTop - 14 && y <= bar.offsetTop + bar.offsetHeight + AIR) {
+          return;
+        }
+      }
+      const TOL = 6;
+      const hit = layoutRows(card, previewBlocks).rows.find(
+        (r) => x >= r.rect.left - TOL && x <= r.rect.right + TOL && y >= r.rect.top - TOL && y <= r.rect.bottom + TOL
+      );
+      const next = hit?.id ?? null;
+      if (next === hoverRowId) return;
+      hoverRowId = next;
+      renderRowChrome(host, stepIndex);
+    };
+    const onLeave = () => {
+      if (hoverCard) {
+        hoverCard = false;
+        renderCardChrome(host, stepIndex);
+      }
+      if (hoverRowId === null) return;
+      hoverRowId = null;
+      renderRowChrome(host, stepIndex);
+    };
+    host.addEventListener("mousemove", onMove);
+    host.addEventListener("mouseleave", onLeave);
+    return () => {
+      host.removeEventListener("mousemove", onMove);
+      host.removeEventListener("mouseleave", onLeave);
+    };
+  };
+  const renderGapZones = (host, stepIndex, blocks) => {
+    const card = previewCard(host);
+    if (!card) return;
+    for (const z of card.querySelectorAll(".veo-gap")) z.remove();
+    const doc = card.ownerDocument;
+    const GAP = 18;
+    const EDGE2 = 4;
+    const zone = (kind, x, y, w, h, label, blockId, action) => {
+      const z = doc.createElement("div");
+      z.className = `veo-gap veo-gap--${kind}`;
+      z.setAttribute("data-veo-builder-chrome", "");
+      z.dataset.veoGapAction = action;
+      z.style.left = `${x}px`;
+      z.style.top = `${y}px`;
+      z.style.width = `${Math.max(w, GAP)}px`;
+      z.style.height = `${Math.max(h, GAP)}px`;
+      const line = doc.createElement("i");
+      const btn = doc.createElement("button");
+      btn.type = "button";
+      btn.title = label;
+      btn.setAttribute("aria-label", label);
+      btn.textContent = "+";
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "block-layout", payload: { stepIndex, blockId, action } });
+      });
+      z.append(line, btn);
+      card.appendChild(z);
+    };
+    const { rows, content } = layoutRows(card, blocks);
+    if (rows.length === 0) return;
+    const cw = content.right - content.left;
+    rows.forEach((row, k) => {
+      const first = row.columns[0]?.items[0]?.block.editorId;
+      if (k === 0) {
+        zone(
+          "h",
+          content.left,
+          row.rect.top - EDGE2 - GAP,
+          cw,
+          GAP,
+          "Agregar fila",
+          first,
+          "row-before"
+        );
+      } else {
+        const prev = rows[k - 1];
+        const y = (prev.rect.bottom + row.rect.top) / 2 - GAP / 2;
+        zone("h", content.left, y, cw, GAP, "Agregar fila", first, "row-before");
+      }
+      if (k === rows.length - 1) {
+        zone(
+          "h",
+          content.left,
+          row.rect.bottom + EDGE2,
+          cw,
+          GAP,
+          "Agregar fila",
+          first,
+          "row-after"
+        );
+      }
+    });
+    for (const row of rows) {
+      const rh = row.rect.bottom - row.rect.top;
+      row.columns.forEach((col, j) => {
+        const id = col.items[0]?.block.editorId;
+        if (j === 0) {
+          zone(
+            "v",
+            row.rect.left - EDGE2 - GAP,
+            row.rect.top,
+            GAP,
+            rh,
+            "Agregar columna",
+            id,
+            "col-before"
+          );
+        } else {
+          const prev = row.columns[j - 1];
+          const x = (prev.rect.right + col.rect.left) / 2 - GAP / 2;
+          zone("v", x, row.rect.top, GAP, rh, "Agregar columna", id, "col-before");
+        }
+        if (j === row.columns.length - 1) {
+          zone(
+            "v",
+            row.rect.right + EDGE2,
+            row.rect.top,
+            GAP,
+            rh,
+            "Agregar columna",
+            id,
+            "col-after"
+          );
+        }
+      });
+    }
+    for (const row of rows) {
+      for (const col of row.columns) {
+        const w = col.rect.right - col.rect.left;
+        col.items.forEach((it, i) => {
+          const next = col.items[i + 1];
+          if (next) {
+            const a = rectOf(it.el);
+            const b = rectOf(next.el);
+            const y = (a.bottom + b.top) / 2 - GAP / 2;
+            zone(
+              "h",
+              col.rect.left,
+              y,
+              w,
+              GAP,
+              "Agregar bloque",
+              it.block.editorId,
+              "stack-after"
+            );
+          } else if (row.columns.length > 1 && col.rect.bottom < row.rect.bottom - GAP) {
+            zone(
+              "h",
+              col.rect.left,
+              col.rect.bottom + EDGE2,
+              w,
+              GAP,
+              "Agregar bloque",
+              it.block.editorId,
+              "stack-after"
+            );
+          }
+        });
+      }
+    }
+  };
+  const attachCardClick = (host, stepIndex) => {
+    let downAt = null;
+    const onDown = (e) => {
+      downAt = { x: e.clientX, y: e.clientY };
+    };
+    const onClick = (e) => {
+      const path = e.composedPath();
+      if (path.some(
+        (n) => n instanceof Element && (n.classList.contains("veo-block-toolbar") || n.classList.contains("veo-row-toolbar") || n.classList.contains("veo-card-toolbar") || n.classList.contains("veo-gap"))
+      )) {
+        return;
+      }
+      const inCard = path.some((n) => n instanceof Element && n.classList.contains("veo-card"));
+      if (!inCard) return;
+      if (downAt && Math.hypot(e.clientX - downAt.x, e.clientY - downAt.y) > 4) return;
+      const blockEl = path.find(
+        (n) => n instanceof HTMLElement && !!n.dataset.veoBlockId
+      );
+      if (blockEl) {
+        if (path.some((n) => n instanceof Element && n.matches("button, a"))) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        selectedBlockId = blockEl.dataset.veoBlockId ?? null;
+        applyBlockHighlight(host, stepIndex);
+        if (selectedBlockId) {
+          post({ type: "block-clicked", payload: { stepIndex, blockId: selectedBlockId } });
+        }
+        return;
+      }
+      const interactive = path.some(
+        (n) => n instanceof Element && n.matches("button, a, input, textarea, select, label, [contenteditable]")
+      );
+      if (interactive) return;
+      selectedBlockId = null;
+      clearBlockHighlight(host);
+      renderRowChrome(host, stepIndex);
+      post({ type: "card-clicked", payload: { stepIndex } });
+    };
+    host.addEventListener("mousedown", onDown, true);
+    host.addEventListener("click", onClick, true);
+    return () => {
+      host.removeEventListener("mousedown", onDown, true);
+      host.removeEventListener("click", onClick, true);
+    };
+  };
+  const attachRawBlock = (stepIndex, blockId) => {
+    const nodes = Array.from(
+      document.querySelectorAll(`[${RAW_BLOCK_ATTR}="${blockId}"]`)
+    );
+    if (nodes.length === 0) return null;
+    const doc = document;
+    const box = doc.createElement("div");
+    box.setAttribute("data-veo-builder-chrome", "");
+    box.style.cssText = "position:fixed;left:0;top:0;width:0;height:0;z-index:2147483646;";
+    box.style.display = "none";
+    const shadow = box.attachShadow({ mode: "open" });
+    const style = doc.createElement("style");
+    style.textContent = GUIDE_STYLES;
+    shadow.appendChild(style);
+    const frame = doc.createElement("div");
+    frame.className = "veo-block-frame";
+    frame.style.position = "fixed";
+    const bar = doc.createElement("div");
+    bar.className = "veo-block-toolbar";
+    bar.style.position = "fixed";
+    const mk = (action, label, icon, enabled = true) => {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.title = label;
+      b.setAttribute("aria-label", label);
+      b.className = `veo-block-toolbar-${action}`;
+      b.innerHTML = icon;
+      b.disabled = !enabled;
+      b.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "block-action", payload: { stepIndex, blockId, action } });
+      });
+      bar.appendChild(b);
+    };
+    mk("edit", "Editar", ICON.pencil);
+    mk("duplicate", "Duplicar", ICON.copy, false);
+    mk("remove", "Eliminar", ICON.trash);
+    mk("move-left", "Mover a la izquierda", ICON_MOVE.left, false);
+    mk("move-right", "Mover a la derecha", ICON_MOVE.right, false);
+    frame.style.display = "none";
+    bar.style.display = "none";
+    const GAP = 18;
+    const EDGE2 = 4;
+    const gap = (kind, label, action) => {
+      const z = doc.createElement("div");
+      z.className = `veo-gap veo-gap--${kind}`;
+      z.style.position = "fixed";
+      z.dataset.veoGapAction = action;
+      const line = doc.createElement("i");
+      const btn = doc.createElement("button");
+      btn.type = "button";
+      btn.title = label;
+      btn.setAttribute("aria-label", label);
+      btn.textContent = "+";
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        post({ type: "block-layout", payload: { stepIndex, blockId, action } });
+      });
+      z.append(line, btn);
+      return z;
+    };
+    const gaps = {
+      top: gap("h", "Agregar fila", "row-before"),
+      bottom: gap("h", "Agregar fila", "row-after"),
+      left: gap("v", "Agregar columna", "col-before"),
+      right: gap("v", "Agregar columna", "col-after")
+    };
+    shadow.append(frame, bar, gaps.top, gaps.bottom, gaps.left, gaps.right);
+    doc.body.appendChild(box);
+    box.style.display = "";
+    let visible = false;
+    const place = (el2, x, y, w, h) => {
+      el2.style.left = `${x}px`;
+      el2.style.top = `${y}px`;
+      el2.style.width = `${w}px`;
+      el2.style.height = `${h}px`;
+    };
+    const reposition = () => {
+      const live = nodes.filter((n) => n.isConnected);
+      if (live.length === 0) return;
+      let l = Number.POSITIVE_INFINITY;
+      let t = Number.POSITIVE_INFINITY;
+      let r = Number.NEGATIVE_INFINITY;
+      let b = Number.NEGATIVE_INFINITY;
+      for (const n of live) {
+        const rc = n.getBoundingClientRect();
+        if (rc.width === 0 && rc.height === 0) continue;
+        l = Math.min(l, rc.left);
+        t = Math.min(t, rc.top);
+        r = Math.max(r, rc.right);
+        b = Math.max(b, rc.bottom);
+      }
+      if (!Number.isFinite(l)) return;
+      place(gaps.top, l, t - EDGE2 - GAP, r - l, GAP);
+      place(gaps.bottom, l, b + EDGE2, r - l, GAP);
+      place(gaps.left, l - EDGE2 - GAP, t, GAP, b - t);
+      place(gaps.right, r + EDGE2, t, GAP, b - t);
+      if (!visible) return;
+      place(frame, l, t, r - l, b - t);
+      const bh = bar.offsetHeight || TOOLBAR_H;
+      const bw = bar.offsetWidth;
+      bar.style.left = `${Math.max(0, r - bw)}px`;
+      bar.style.top = `${Math.max(0, t - bh - 6)}px`;
+    };
+    const select = (id) => {
+      visible = id === blockId;
+      frame.style.display = visible ? "" : "none";
+      bar.style.display = visible ? "" : "none";
+      reposition();
+    };
+    reposition();
+    const onClick = (e) => {
+      const path = e.composedPath();
+      if (!nodes.some((n) => path.includes(n))) return;
+      if (path.some((n) => n instanceof Element && n.matches("button, a"))) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      selectedBlockId = blockId;
+      select(blockId);
+      post({ type: "block-clicked", payload: { stepIndex, blockId } });
+    };
+    doc.addEventListener("click", onClick, true);
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    return {
+      select,
+      detach: () => {
+        doc.removeEventListener("click", onClick, true);
+        window.removeEventListener("scroll", reposition, true);
+        window.removeEventListener("resize", reposition);
+        box.remove();
+      }
+    };
+  };
   const applyPreviewGated = (cmd) => {
-    lastPreview = cmd;
+    const showNow = !cmd.honorTrigger;
+    if (showNow) {
+      disarmPreviewTrigger();
+      cancelPreviewDelay();
+      previewFired = true;
+      previewDismissed = false;
+    }
+    lastPreview = showNow ? { ...cmd, honorTrigger: true } : cmd;
     if (!previewMatchesPage(cmd)) {
       cancelPreviewDelay();
       withholdPreview();
@@ -1226,13 +2038,13 @@ function initBuilderMode() {
       return;
     }
     const devices = cmd.guide.activationRules?.devices;
-    if (cmd.honorTrigger && !previewMode && devices && !isDeviceAllowed(devices)) {
+    if (!showNow && previewMode && devices && !isDeviceAllowed(devices)) {
       cancelPreviewDelay();
       withholdPreview();
       postPreviewStatus({ state: "device-mismatch", devices });
       return;
     }
-    applyPreview(cmd);
+    applyPreview(lastPreview);
   };
   const disarmPreviewTrigger = () => {
     previewTrigger?.();
@@ -1257,6 +2069,7 @@ function initBuilderMode() {
       }
       disarmPreviewTrigger();
       previewFired = true;
+      previewDismissed = false;
       if (lastPreview) applyPreviewGated(lastPreview);
     };
     document.addEventListener("click", onFire, true);
@@ -1277,22 +2090,24 @@ function initBuilderMode() {
     postPreviewStatus({ state: "waiting-delay", delayMs });
   };
   const applyPreview = (cmd) => {
-    manipulator?.detach();
-    manipulator = null;
-    dropTarget?.detach();
-    dropTarget = null;
+    if (cmd.editable && !previewMode && tryPatchPreview(cmd)) {
+      previewStepIndex = cmd.guide.startStepIndex ?? 0;
+      return;
+    }
+    detachPreviewTools();
     previewStepIndex = cmd.guide.startStepIndex ?? 0;
     const rules = cmd.guide.activationRules;
     const trig = rules?.trigger;
     const sel = rules?.selector?.trim();
-    const gate = cmd.honorTrigger && !previewFired && !previewMode;
-    if (gate && (trig === "on_click" || trig === "on_hover") && sel) {
+    const gate = cmd.honorTrigger && !previewFired && previewMode;
+    const waitsForTarget = (trig === "on_click" || trig === "on_hover") && (!isAutomaticActivation(rules) || previewDismissed);
+    if (gate && waitsForTarget && sel) {
       cancelPreviewDelay();
       closeGuidePreview();
       armPreviewTrigger(sel, trig);
       return;
     }
-    const delayMs = trig === "delayed" ? rules?.delayMs ?? 0 : 0;
+    const delayMs = activationDelayMs(rules);
     if (gate && delayMs > 0) {
       disarmPreviewTrigger();
       closeGuidePreview();
@@ -1301,15 +2116,21 @@ function initBuilderMode() {
     }
     disarmPreviewTrigger();
     cancelPreviewDelay();
+    const fetchProgress = previewProgressFetcher();
     const handle = previewGuide({
       ...cmd.guide,
+      ...fetchProgress ? { fetchProgress } : {},
       onClosed: () => {
-        manipulator?.detach();
-        manipulator = null;
-        dropTarget?.detach();
-        dropTarget = null;
+        detachPreviewTools();
+        shownPreview = null;
         previewFired = false;
-        if (lastPreview) applyPreviewGated(lastPreview);
+        previewDismissed = true;
+        if (previewMode) {
+          const r = lastPreview?.guide.activationRules;
+          const t = r?.trigger;
+          const selector = r?.selector?.trim();
+          if ((t === "on_click" || t === "on_hover") && selector) armPreviewTrigger(selector, t);
+        }
       }
     });
     if (cmd.honorTrigger) postPreviewStatus({ state: "shown" });
@@ -1317,7 +2138,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,
@@ -1385,13 +2222,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;
@@ -1399,10 +2244,7 @@ function initBuilderMode() {
         chrome?.setHidden(true);
         const previewToRestore = lastPreview;
         if (previewToRestore) {
-          manipulator?.detach();
-          manipulator = null;
-          dropTarget?.detach();
-          dropTarget = null;
+          detachPreviewTools();
           closeGuidePreview();
         }
         const restorePanel = () => {
@@ -1441,17 +2283,28 @@ function initBuilderMode() {
       case "block-drag":
         handleBlockDrag(cmd);
         break;
+      case "select-block": {
+        selectedBlockId = cmd.blockId;
+        const h = document.querySelector("[data-veo-guide]");
+        if (h && !previewMode) applyBlockHighlight(h, previewStepIndex);
+        if (!previewMode) rawBlock?.select(cmd.blockId);
+        break;
+      }
+      case "select-row": {
+        selectedRowId = cmd.blockId;
+        const h = document.querySelector("[data-veo-guide]");
+        if (h && !previewMode) renderRowChrome(h, previewStepIndex);
+        break;
+      }
       case "close-preview":
-        manipulator?.detach();
-        manipulator = null;
-        dropTarget?.detach();
-        dropTarget = null;
+        detachPreviewTools();
         hideDragGhost();
         pendingPreview = null;
         lastPreview = null;
         disarmPreviewTrigger();
         cancelPreviewDelay();
         previewFired = false;
+        previewDismissed = false;
         closeGuidePreview();
         break;
       case "teardown":
@@ -1497,10 +2350,7 @@ function initBuilderMode() {
     removeNavWatcher();
     picker?.stop();
     picker = null;
-    manipulator?.detach();
-    manipulator = null;
-    dropTarget?.detach();
-    dropTarget = null;
+    detachPreviewTools();
     hideDragGhost();
     pendingPreview = null;
     disarmPreviewTrigger();
@@ -1528,6 +2378,8 @@ function initBuilderMode() {
           case "preview":
             if (previewMode) return;
             previewMode = true;
+            previewFired = false;
+            previewDismissed = false;
             panelWasVisible = panel?.isVisible() ?? true;
             panel?.setVisible(false);
             chrome?.setPreview(true);
@@ -1536,6 +2388,8 @@ function initBuilderMode() {
           case "exit-preview":
             if (!previewMode) return;
             previewMode = false;
+            disarmPreviewTrigger();
+            cancelPreviewDelay();
             chrome?.setPreview(false);
             panel?.setVisible(panelWasVisible);
             if (lastPreview) applyPreviewGated(lastPreview);
@@ -1617,6 +2471,25 @@ function resolveDashboardOrigin(originHint) {
   }
   return null;
 }
+function previewProgressFetcher() {
+  const cfg = window.__veoBuilder;
+  if (!cfg?.apiKey || !cfg?.apiUrl) return void 0;
+  const apiUrl = cfg.apiUrl.replace(/\/+$/, "");
+  const apiKey = cfg.apiKey;
+  return async (guideIds) => {
+    const params = new URLSearchParams({
+      endUserId: "veo_preview",
+      guideIds: guideIds.join(","),
+      includeUnpublished: "1"
+    });
+    const res = await fetch(`${apiUrl}/v1/guides/progress?${params}`, {
+      headers: { "X-Api-Key": apiKey }
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return data.items ?? [];
+  };
+}
 
 // src/plugins/builder/builder-session.ts
 var DEFAULT_FEATURES = "popup,width=1280,height=860";
@@ -1738,5 +2611,5 @@ function noopSession() {
 }
 
 export { VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker };
-//# sourceMappingURL=chunk-3ZOKCQ54.mjs.map
-//# sourceMappingURL=chunk-3ZOKCQ54.mjs.map
+//# sourceMappingURL=chunk-N4VFMZFA.mjs.map
+//# sourceMappingURL=chunk-N4VFMZFA.mjs.map