veo-sdk 0.6.2 → 0.6.4

package/dist/builder.cjs

@@ -283,6 +283,92 @@ function clearBuilderToken() {
   }
 }
 
+// src/plugins/autocapture/constants.ts
+var HASHED_CLASS_PATTERNS = [
+  /^css-[a-z0-9]{4,}$/i,
+  // emotion, styled-components nuevas
+  /^_[a-z0-9]+_[a-z0-9]{4,}_\d+$/,
+  // CSS Modules con hash
+  /^[a-z]{2,4}-[a-z0-9]{6,}$/i,
+  // Tailwind JIT (a veces)
+  /^[a-f0-9]{6,}$/i,
+  // hashes hex puros
+  /^sc-[a-z0-9]+$/i
+  // styled-components legacy
+];
+
+// src/plugins/autocapture/selector-builder.ts
+function isHashedClass(className) {
+  return HASHED_CLASS_PATTERNS.some((pattern) => pattern.test(className));
+}
+function filterHumanClasses(element) {
+  return Array.from(element.classList).filter((c) => !isHashedClass(c) && c.length < 64);
+}
+var STABLE_ATTRIBUTES = [
+  "data-testid",
+  "data-test",
+  "data-cy",
+  "name",
+  "aria-label",
+  "placeholder",
+  "alt",
+  "title",
+  // `href` identifica muy bien a los links (`<a>`), un target frecuente de
+  // autocapture; va después de los atributos semánticos pero antes de los
+  // genéricos. Valores largos (URLs absolutas con query) se descartan por
+  // MAX_ATTR_VALUE_LENGTH.
+  "href",
+  "role",
+  "type"
+];
+var MAX_ATTR_VALUE_LENGTH = 100;
+function cssEscape(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
+}
+function escapeAttrValue(value) {
+  return value.replace(/[\\"]/g, "\\$&");
+}
+function stableAttributeSelector(element, tag) {
+  for (const attr of STABLE_ATTRIBUTES) {
+    const value = element.getAttribute(attr);
+    if (value && value.length > 0 && value.length <= MAX_ATTR_VALUE_LENGTH) {
+      return `${tag}[${attr}="${escapeAttrValue(value)}"]`;
+    }
+  }
+  return null;
+}
+function buildElementSelector(element) {
+  const tag = element.tagName.toLowerCase();
+  const veoTag = element.getAttribute("data-veo-tag");
+  if (veoTag) {
+    return `${tag}[data-veo-tag="${escapeAttrValue(veoTag)}"]`;
+  }
+  if (element.id) {
+    const classes2 = filterHumanClasses(element);
+    const classPart2 = classes2.length > 0 ? `.${classes2.map(cssEscape).join(".")}` : "";
+    return `${tag}#${cssEscape(element.id)}${classPart2}`;
+  }
+  const attrSelector = stableAttributeSelector(element, tag);
+  if (attrSelector) return attrSelector;
+  const classes = filterHumanClasses(element);
+  const classPart = classes.length > 0 ? `.${classes.map(cssEscape).join(".")}` : "";
+  return `${tag}${classPart}`;
+}
+function buildSelectorPath(element, maxAncestors = 5) {
+  const parts = [];
+  let current = element;
+  let depth = 0;
+  while (current && current !== document.documentElement && depth <= maxAncestors) {
+    parts.unshift(buildElementSelector(current));
+    current = current.parentElement;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+
 // src/plugins/guides/activation-devices.ts
 var MOBILE_MAX_WIDTH = 767;
 function isDeviceAllowed(devices, viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth) {
@@ -309,6 +395,7 @@ var GUIDE_Z_INDEX = 2147483640;
 var DEFAULT_ANCHOR_WAIT_MS = 5e3;
 var SAFE_URL_PROTOCOLS = ["http:", "https:"];
 var GUIDE_HOST_ATTR = "data-veo-guide";
+var BADGE_MARKER_HOST_ATTR = "data-veo-badge";
 var WALKTHROUGH_STEP_SELECTOR_TIMEOUT_MS = 5e3;
 
 // src/plugins/guides/rich-text.ts
@@ -2123,6 +2210,25 @@ var BaseRenderer = class {
     this.shadow = shadow;
     return { host, shadow, root };
   }
+  /**
+   * Host SUELTO con los mismos estilos (shadow DOM), sin agregarlo al DOM ni
+   * registrarlo como `this.host`. Para piezas que deben vivir dentro de la app
+   * (el marcador de un badge, junto a su ancla) mientras la tarjeta se queda
+   * en `body`: si la tarjeta viajara dentro del ancla, un ancestro con
+   * `transform`/`overflow` la recortaría y su z-index quedaría atrapado.
+   */
+  createDetachedHost(attr = BADGE_MARKER_HOST_ATTR) {
+    const host = document.createElement("div");
+    host.setAttribute(attr, "");
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = GUIDE_STYLES;
+    shadow.appendChild(style);
+    const root = document.createElement("div");
+    shadow.appendChild(root);
+    this.registerCleanup(() => host.remove());
+    return { host, root };
+  }
   /**
    * Aplica la tematización por datos del step (`step.style`) como variables
    * CSS sobre el host. Llamar tras `createHost()`. No-op si no hay host o
@@ -3335,6 +3441,13 @@ function snoozeGuide(guideId, every, unit, now = Date.now()) {
   } catch {
   }
 }
+
+// src/plugins/guides/z-index.ts
+var MAX_Z_INDEX = 2147483647;
+function clampZIndex(value, fallback) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+  return Math.max(-MAX_Z_INDEX, Math.min(MAX_Z_INDEX, Math.round(value)));
+}
 var INFO_GLYPH = "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021";
 var QUESTION_GLYPH = "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75";
 var STAR_GLYPH = "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z";
@@ -3519,7 +3632,7 @@ function canNest(anchor) {
 }
 function attachMarker(anchor, host, marker) {
   host.style.position = "absolute";
-  host.style.zIndex = String(num(marker.zIndex, DEFAULT_MARKER_Z));
+  host.style.zIndex = String(clampZIndex(marker.zIndex, DEFAULT_MARKER_Z));
   host.style.margin = "0";
   const position = marker.position ?? "top-right";
   const offset6 = { x: num(marker.offsetX, 0), y: num(marker.offsetY, 0) };
@@ -3657,7 +3770,9 @@ var CompositeRenderer = class extends BaseRenderer {
     const { host, root } = this.createHost();
     const doc = root.ownerDocument ?? document;
     const design = step.design ?? {};
-    if (typeof design.zIndex === "number") host.style.zIndex = String(design.zIndex);
+    if (typeof design.zIndex === "number") {
+      host.style.zIndex = String(clampZIndex(design.zIndex, 0));
+    }
     const card = doc.createElement("div");
     card.className = "veo-card";
     const themeMode = themeModeFor(context.guide.theme, design);
@@ -3766,7 +3881,7 @@ var CompositeRenderer = class extends BaseRenderer {
         const bg = doc.createElement("div");
         bg.className = "veo-composite-overlay veo-composite-overlay--dim";
         if (typeof design.backdropColor === "string") bg.style.background = design.backdropColor;
-        const bz = typeof design.backdropZIndex === "number" ? design.backdropZIndex : 2e5;
+        const bz = clampZIndex(design.backdropZIndex, 2e5);
         bg.style.zIndex = String(bz);
         root.appendChild(bg);
         this.registerCleanup(lockScroll(doc));
@@ -3788,7 +3903,7 @@ var CompositeRenderer = class extends BaseRenderer {
           overlay.style.background = design.backdropColor;
         }
         if (typeof design.backdropZIndex === "number") {
-          overlay.style.zIndex = String(design.backdropZIndex);
+          overlay.style.zIndex = String(clampZIndex(design.backdropZIndex, 0));
         }
         overlay.addEventListener("click", (e) => {
           if (e.target === overlay) {
@@ -4109,6 +4224,7 @@ var CompositeRenderer = class extends BaseRenderer {
   renderBadgeMode(step, card, anchor, anchorSelector, host, root, doc, context, idx, design) {
     const trigger = step.badge?.trigger === "click" ? "click" : "hover";
     const placement = step.badge?.placement === "top" || step.badge?.placement === "left" || step.badge?.placement === "right" ? step.badge.placement : "bottom";
+    const { host: markerHost, root: markerRoot } = this.createDetachedHost();
     const badge = doc.createElement("div");
     badge.className = "veo-composite-badge";
     badge.setAttribute("role", "button");
@@ -4119,7 +4235,8 @@ var CompositeRenderer = class extends BaseRenderer {
     const marker = step.badge?.marker ?? null;
     if (marker) badge.appendChild(buildMarkerElement(doc, marker));
     else this.buildContent(badge, step.badge?.blocks ?? [], doc, context, idx, [], host);
-    root.appendChild(badge);
+    markerRoot.appendChild(badge);
+    host.style.display = "block";
     if (design.fullWidth === true) {
       card.style.width = "auto";
       card.style.maxWidth = "320px";
@@ -4134,13 +4251,13 @@ var CompositeRenderer = class extends BaseRenderer {
     wrapper.appendChild(card);
     root.appendChild(wrapper);
     if (marker) {
-      host.style.display = "inline-block";
-      this.registerCleanup(attachMarker(anchor, host, marker));
+      markerHost.style.display = "inline-block";
+      this.registerCleanup(attachMarker(anchor, markerHost, marker));
     } else {
-      host.style.display = "inline-block";
+      markerHost.style.display = "inline-block";
       const pos = inlinePosOf(step.inlinePosition);
-      insertHost(anchor, host, pos);
-      this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+      insertHost(anchor, markerHost, pos);
+      this.registerCleanup(keepHostAttached(markerHost, anchorSelector, pos));
     }
     let open = false;
     let stopFloat = null;
@@ -4270,7 +4387,7 @@ function liftTarget(anchor, zIndex) {
   const prevPosition = el2.style.position;
   const prevZ = el2.style.zIndex;
   if (getComputedStyle(el2).position === "static") el2.style.position = "relative";
-  el2.style.zIndex = String(zIndex);
+  el2.style.zIndex = String(clampZIndex(zIndex, 0));
   return () => {
     el2.style.position = prevPosition;
     el2.style.zIndex = prevZ;
@@ -5217,14 +5334,19 @@ function injectBuilderChrome(opts) {
   let previewOn = false;
   let hiddenOn = false;
   let heightCb = null;
-  const height = () => CHROME_TOPBAR_H + (collapsed ? 0 : CHROME_STEPS_H);
+  let tagging = false;
+  const height = () => CHROME_TOPBAR_H + (collapsed || tagging ? 0 : CHROME_STEPS_H);
   const applyHeight = () => {
     const h = previewOn || hiddenOn ? 0 : height();
     html.style.marginTop = dock === "top" ? `${h}px` : prevMarginTop;
     html.style.marginBottom = dock === "bottom" ? `${h}px` : prevMarginBottom;
     root.style.setProperty("--veo-chrome-h", `${height()}px`);
     root.classList.toggle("is-bottom", dock === "bottom");
-    stepsBar.hidden = collapsed;
+    stepsBar.hidden = collapsed || tagging;
+    togglePill.hidden = tagging;
+    preview.hidden = tagging;
+    saveGroup.hidden = tagging;
+    showPanel.title = tagging ? "Mostrar el panel" : "Mostrar el editor";
     const open = dock === "top" ? "chevronUp" : "chevronDown";
     const closedIcon = dock === "top" ? "chevronDown" : "chevronUp";
     togglePill.innerHTML = `<span>${collapsed ? "Mostrar pasos" : "Ocultar pasos"}</span>${svg(
@@ -5277,8 +5399,13 @@ function injectBuilderChrome(opts) {
   const render = () => {
     const s = current;
     if (!s) return;
+    const nextTagging = s.variant === "tagging";
+    if (nextTagging !== tagging) {
+      tagging = nextTagging;
+      applyHeight();
+    }
     const date = shortDate(s.createdAt);
-    nameEl.textContent = `${s.guideName.trim() || "Sin nombre"}${date ? ` \xB7 ${date}` : ""}`;
+    nameEl.textContent = tagging ? s.guideName.trim() || "Modo tagging" : `${s.guideName.trim() || "Sin nombre"}${date ? ` \xB7 ${date}` : ""}`;
     if (s.status) {
       statusEl.hidden = false;
       statusEl.textContent = s.status.label;
@@ -5377,6 +5504,8 @@ var CHROME_CSS = `
   font-size: 14px; color: #1c1917;
 }
 .veo-chrome[hidden] { display: none; }
+/* Modo tagging oculta controles por atributo: gana a los display de sus clases. */
+.veo-chrome [hidden], .veo-steps-toggle[hidden] { display: none !important; }
 .veo-chrome.is-bottom { top: auto; bottom: 0; flex-direction: column-reverse; }
 .veo-chrome.is-bottom .veo-tb-menu { top: auto; bottom: calc(100% + 8px); }
 .veo-chrome.is-bottom .veo-steps { border-bottom: 0; border-top: 1px solid #d6cfc8; }
@@ -5996,90 +6125,51 @@ function attachBanner(opts, shadow, banner) {
   };
 }
 
-// src/plugins/autocapture/constants.ts
-var HASHED_CLASS_PATTERNS = [
-  /^css-[a-z0-9]{4,}$/i,
-  // emotion, styled-components nuevas
-  /^_[a-z0-9]+_[a-z0-9]{4,}_\d+$/,
-  // CSS Modules con hash
-  /^[a-z]{2,4}-[a-z0-9]{6,}$/i,
-  // Tailwind JIT (a veces)
-  /^[a-f0-9]{6,}$/i,
-  // hashes hex puros
-  /^sc-[a-z0-9]+$/i
-  // styled-components legacy
-];
-
-// src/plugins/autocapture/selector-builder.ts
-function isHashedClass(className) {
-  return HASHED_CLASS_PATTERNS.some((pattern) => pattern.test(className));
-}
-function filterHumanClasses(element) {
-  return Array.from(element.classList).filter((c) => !isHashedClass(c) && c.length < 64);
-}
-var STABLE_ATTRIBUTES = [
-  "data-testid",
-  "data-test",
-  "data-cy",
-  "name",
-  "aria-label",
-  "placeholder",
-  "alt",
-  "title",
-  // `href` identifica muy bien a los links (`<a>`), un target frecuente de
-  // autocapture; va después de los atributos semánticos pero antes de los
-  // genéricos. Valores largos (URLs absolutas con query) se descartan por
-  // MAX_ATTR_VALUE_LENGTH.
-  "href",
-  "role",
-  "type"
+// src/plugins/builder/interactive-elements.ts
+var INTERACTIVE_ROLES = [
+  "button",
+  "link",
+  "tab",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "checkbox",
+  "radio",
+  "switch",
+  "option",
+  "combobox",
+  "textbox",
+  "searchbox",
+  "slider",
+  "spinbutton"
 ];
-var MAX_ATTR_VALUE_LENGTH = 100;
-function cssEscape(value) {
-  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
-    return CSS.escape(value);
-  }
-  return value.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-}
-function escapeAttrValue(value) {
-  return value.replace(/[\\"]/g, "\\$&");
-}
-function stableAttributeSelector(element, tag) {
-  for (const attr of STABLE_ATTRIBUTES) {
-    const value = element.getAttribute(attr);
-    if (value && value.length > 0 && value.length <= MAX_ATTR_VALUE_LENGTH) {
-      return `${tag}[${attr}="${escapeAttrValue(value)}"]`;
-    }
-  }
-  return null;
-}
-function buildElementSelector(element) {
-  const tag = element.tagName.toLowerCase();
-  const veoTag = element.getAttribute("data-veo-tag");
-  if (veoTag) {
-    return `${tag}[data-veo-tag="${escapeAttrValue(veoTag)}"]`;
-  }
-  if (element.id) {
-    const classes2 = filterHumanClasses(element);
-    const classPart2 = classes2.length > 0 ? `.${classes2.map(cssEscape).join(".")}` : "";
-    return `${tag}#${cssEscape(element.id)}${classPart2}`;
+var INTERACTIVE_SELECTOR = [
+  "button",
+  "a[href]",
+  'input:not([type="hidden"])',
+  "select",
+  "textarea",
+  "form",
+  "summary",
+  '[contenteditable="true"]',
+  "[onclick]",
+  "[data-veo-tag]",
+  ...INTERACTIVE_ROLES.map((r) => `[role="${r}"]`)
+].join(", ");
+function closestInteractive(element) {
+  try {
+    return element.closest(INTERACTIVE_SELECTOR);
+  } catch {
+    return null;
   }
-  const attrSelector = stableAttributeSelector(element, tag);
-  if (attrSelector) return attrSelector;
-  const classes = filterHumanClasses(element);
-  const classPart = classes.length > 0 ? `.${classes.map(cssEscape).join(".")}` : "";
-  return `${tag}${classPart}`;
 }
-function buildSelectorPath(element, maxAncestors = 5) {
-  const parts = [];
-  let current = element;
-  let depth = 0;
-  while (current && current !== document.documentElement && depth <= maxAncestors) {
-    parts.unshift(buildElementSelector(current));
-    current = current.parentElement;
-    depth++;
-  }
-  return parts.join(" > ");
+var EMOJI_RE = /\p{Extended_Pictographic}|\p{Emoji_Modifier}|\u{FE0F}|\u{200D}|\u{20E3}/gu;
+function elementLabelText(element, max = 120) {
+  const clean = (raw) => (raw ?? "").replace(EMOJI_RE, "").replace(/\s+/g, " ").trim();
+  const text = clean(element.textContent);
+  if (text) return text.slice(0, max);
+  const fallback = clean(element.getAttribute("aria-label")) || clean(element.getAttribute("title"));
+  return fallback.slice(0, max);
 }
 
 // src/plugins/builder/element-picker.ts
@@ -6152,21 +6242,24 @@ var ElementPicker = class {
     this.label = null;
     this.current = null;
     this.maxAncestors = DEFAULT_MAX_ANCESTORS;
+    this.only = null;
     this.onPick = null;
     this.onCancel = null;
     this.onMove = (event) => {
-      const target = event.target;
-      if (!(target instanceof Element) || this.isOwn(target)) return;
+      if (!(event.target instanceof Element) || this.isOwn(event.target)) return;
+      const target = this.resolveTarget(event.target);
       this.current = target;
-      this.draw(target);
+      if (target) this.draw(target);
+      else this.hideBox();
     };
     this.onClick = (event) => {
       if (event.altKey) return;
-      const target = this.current ?? (event.target instanceof Element ? event.target : null);
-      if (!target || this.isOwn(target)) return;
+      if (this.isOwn(event.target)) return;
       event.preventDefault();
       event.stopPropagation();
       event.stopImmediatePropagation();
+      const target = this.current ?? this.resolveTarget(event.target);
+      if (!target) return;
       const picked = this.describe(target);
       const cb = this.onPick;
       this.stop();
@@ -6193,6 +6286,7 @@ var ElementPicker = class {
   start(options) {
     this.stop();
     this.maxAncestors = options.maxAncestors ?? DEFAULT_MAX_ANCESTORS;
+    this.only = options.only ?? null;
     this.onPick = options.onPick;
     this.onCancel = options.onCancel ?? null;
     const host = document.createElement("div");
@@ -6255,9 +6349,19 @@ var ElementPicker = class {
     this.box = null;
     this.label = null;
     this.current = null;
+    this.only = null;
     this.onPick = null;
     this.onCancel = null;
   }
+  /** Elemento que se elegiría para el nodo bajo el cursor (o null si no hay). */
+  resolveTarget(target) {
+    if (!(target instanceof Element) || this.isOwn(target)) return null;
+    return this.only === "interactive" ? closestInteractive(target) : target;
+  }
+  hideBox() {
+    if (this.box) this.box.style.display = "none";
+    if (this.label) this.label.style.display = "none";
+  }
   /** ¿Es un nodo de nuestro propio overlay? (no debe ser seleccionable). */
   isOwn(target) {
     return target instanceof Node && this.host !== null && this.host.contains(target);
@@ -6294,7 +6398,7 @@ var ElementPicker = class {
       tag: element.tagName.toLowerCase(),
       id: element.id || null,
       classes: filterHumanClasses(element),
-      text: (element.textContent ?? "").trim().slice(0, 120),
+      text: elementLabelText(element),
       rect: {
         x: Math.round(rect.left),
         y: Math.round(rect.top),
@@ -6319,6 +6423,41 @@ function stopElementPicker() {
 }
 
 // src/plugins/builder/builder-mode.ts
+var CONFIRMATION_STYLES = `
+:host { all: initial; }
+.veo-confirm-backdrop {
+  position: fixed; inset: 0; z-index: 2147483645;
+  background: rgba(20, 16, 14, 0.45);
+}
+.veo-confirm {
+  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  z-index: 2147483646; box-sizing: border-box;
+  width: min(432px, calc(100vw - 32px)); padding: 28px 24px 24px;
+  border-radius: 16px; background: #fff; color: #1d1917;
+  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  text-align: center;
+}
+.veo-confirm-check {
+  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
+  background: #e6f6df; color: #2f9a4e; display: flex; align-items: center; justify-content: center;
+}
+.veo-confirm-check svg { width: 30px; height: 30px; }
+.veo-confirm-title { margin: 18px 0 0; font-size: 17px; font-weight: 600; }
+.veo-confirm-msg { margin: 8px 0 0; font-size: 13px; color: #6b6461; }
+.veo-confirm-rows {
+  margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: #f6f2ef; text-align: left;
+}
+.veo-confirm-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; padding: 4px 0; }
+.veo-confirm-row dt { color: #6b6461; margin: 0; }
+.veo-confirm-row dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.veo-confirm-btn {
+  display: block; width: 100%; margin-top: 18px; height: 44px; border: 0; border-radius: 10px;
+  background: #b74d00; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
+}
+.veo-confirm-btn:hover { background: #953c00; }
+.veo-confirm-btn:focus-visible { outline: 3px solid rgba(183,77,0,0.35); outline-offset: 2px; }
+`;
 function initBuilderMode() {
   if (!hasWindow() || !hasDocument()) return null;
   const ctx = resolveBuilderContext();
@@ -7300,7 +7439,7 @@ function initBuilderMode() {
           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.section === "row" ? "Editar fila" : cmd.state.blockLabel ? `Editor \xB7 ${cmd.state.blockLabel}` : cmd.state.steps[cmd.state.activeStep]?.label ?? "Paso"
+          cmd.state.panelTitle ?? (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":
@@ -7338,7 +7477,8 @@ function initBuilderMode() {
             post({ type: "pick-cancelled" });
           },
           ...cmd.maxAncestors !== void 0 ? { maxAncestors: cmd.maxAncestors } : {},
-          ...cmd.hint !== void 0 ? { hint: cmd.hint } : {}
+          ...cmd.hint !== void 0 ? { hint: cmd.hint } : {},
+          ...cmd.only !== void 0 ? { only: cmd.only } : {}
         });
         break;
       }
@@ -7347,6 +7487,15 @@ function initBuilderMode() {
         picker = null;
         chrome?.setHidden(false);
         break;
+      case "scan-page":
+        post({ type: "page-scan", payload: scanPage(cmd.selectors) });
+        break;
+      case "highlight":
+        setHighlight(cmd.selector);
+        break;
+      case "show-confirmation":
+        showConfirmation(cmd.payload);
+        break;
       case "preview":
         if (!cmd.guide) break;
         if (manipulator?.isDragging()) pendingPreview = cmd;
@@ -7431,10 +7580,154 @@ function initBuilderMode() {
     post({ type: "closed" });
     panel?.teardown();
     panel = null;
+    highlightBox?.remove();
+    highlightBox = null;
+    confirmation?.remove();
+    confirmation = null;
+    if (confirmationKey) document.removeEventListener("keydown", confirmationKey, true);
+    confirmationKey = null;
     chrome?.teardown();
     chrome = null;
     clearBuilderToken();
   };
+  const scanPage = (selectors) => {
+    const present = selectors.filter((sel) => {
+      try {
+        return document.querySelector(sel) !== null;
+      } catch {
+        return false;
+      }
+    });
+    const taggedEls = /* @__PURE__ */ new Set();
+    for (const sel of present) {
+      try {
+        for (const e of Array.from(document.querySelectorAll(sel))) taggedEls.add(e);
+      } catch {
+      }
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const candidates = [];
+    const nodes = document.querySelectorAll(INTERACTIVE_SELECTOR);
+    for (const element of Array.from(nodes)) {
+      if (candidates.length >= 200) break;
+      if (element.closest("[data-veo-builder-chrome],[data-veo-builder-panel],[data-veo-picker]")) {
+        continue;
+      }
+      if (element.getClientRects().length === 0) continue;
+      let tagged = false;
+      for (let n = element; n; n = n.parentElement) {
+        if (taggedEls.has(n)) {
+          tagged = true;
+          break;
+        }
+      }
+      if (tagged) continue;
+      const selector = buildSelectorPath(element, 5);
+      if (!selector || seen.has(selector)) continue;
+      seen.add(selector);
+      candidates.push({
+        selector,
+        shortSelector: buildSelectorPath(element, 0),
+        tag: element.tagName.toLowerCase(),
+        id: element.id || null,
+        classes: filterHumanClasses(element),
+        text: elementLabelText(element)
+      });
+    }
+    const { pathname, hash } = window.location;
+    const routePath = /^#\/./.test(hash) ? `${pathname}${hash}` : pathname;
+    return { pagePath: pathname, routePath, candidates, present };
+  };
+  let confirmation = null;
+  let confirmationKey = null;
+  const closeConfirmation = () => {
+    if (!confirmation) return;
+    confirmation.remove();
+    confirmation = null;
+    if (confirmationKey) document.removeEventListener("keydown", confirmationKey, true);
+    confirmationKey = null;
+    panel?.setVisible(true);
+    post({ type: "confirmation-closed" });
+  };
+  const showConfirmation = (card) => {
+    if (confirmation) {
+      confirmation.remove();
+      confirmation = null;
+    }
+    panel?.setVisible(false);
+    const host = document.createElement("div");
+    host.setAttribute("data-veo-builder-chrome", "");
+    host.setAttribute("data-veo-confirmation", "");
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = CONFIRMATION_STYLES;
+    const backdrop = document.createElement("div");
+    backdrop.className = "veo-confirm-backdrop";
+    const dialog = document.createElement("div");
+    dialog.className = "veo-confirm";
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-label", card.title);
+    const badge = document.createElement("div");
+    badge.className = "veo-confirm-check";
+    badge.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
+    const title = document.createElement("h2");
+    title.className = "veo-confirm-title";
+    title.textContent = card.title;
+    const message = document.createElement("p");
+    message.className = "veo-confirm-msg";
+    message.textContent = card.message;
+    const rows = document.createElement("dl");
+    rows.className = "veo-confirm-rows";
+    for (const r of card.rows) {
+      const row = document.createElement("div");
+      row.className = "veo-confirm-row";
+      const dt = document.createElement("dt");
+      dt.textContent = r.label;
+      const dd = document.createElement("dd");
+      dd.textContent = r.value;
+      row.append(dt, dd);
+      rows.appendChild(row);
+    }
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "veo-confirm-btn";
+    button.textContent = card.buttonLabel ?? "Listo";
+    button.addEventListener("click", closeConfirmation);
+    dialog.append(badge, title, message);
+    if (card.rows.length > 0) dialog.appendChild(rows);
+    dialog.appendChild(button);
+    shadow.append(style, backdrop, dialog);
+    document.body.appendChild(host);
+    confirmation = host;
+    confirmationKey = (e) => {
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      closeConfirmation();
+    };
+    document.addEventListener("keydown", confirmationKey, true);
+    button.focus();
+  };
+  let highlightBox = null;
+  const setHighlight = (selector) => {
+    highlightBox?.remove();
+    highlightBox = null;
+    if (!selector) return;
+    let target = null;
+    try {
+      target = document.querySelector(selector);
+    } catch {
+      return;
+    }
+    if (!target) return;
+    const r = target.getBoundingClientRect();
+    const box = document.createElement("div");
+    box.setAttribute("data-veo-builder-chrome", "");
+    box.style.cssText = `position:fixed;left:${r.left - 3}px;top:${r.top - 3}px;width:${r.width + 6}px;height:${r.height + 6}px;border:2px solid #FF5B35;border-radius:6px;background:rgba(255,91,53,0.10);pointer-events:none;z-index:2147483646;`;
+    document.body.appendChild(box);
+    highlightBox = box;
+  };
   if (ctx.panel) {
     chrome = injectBuilderChrome({
       appLabel: window.location.hostname,