veo-sdk 0.6.2 → 0.6.4

package/dist/index.cjs

@@ -251,7 +251,8 @@ var init_constants = __esm({
       throttleMs: 100,
       maxTextLength: 200,
       captureElementMetadata: true,
-      captureAncestors: 5
+      captureAncestors: 5,
+      captureClickQuality: true
     };
     MAX_ANCESTORS = 10;
     ALWAYS_BLOCK_SELECTORS = [
@@ -440,13 +441,14 @@ var init_activation_rules = __esm({
 });
 
 // src/plugins/guides/constants.ts
-var GUIDE_Z_INDEX, DEFAULT_ANCHOR_WAIT_MS, SAFE_URL_PROTOCOLS, GUIDE_HOST_ATTR, FREQUENCY_CACHE_KEY_PREFIX, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, WALKTHROUGH_STATE_KEY_PREFIX, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STEP_SELECTOR_TIMEOUT_MS;
+var GUIDE_Z_INDEX, DEFAULT_ANCHOR_WAIT_MS, SAFE_URL_PROTOCOLS, GUIDE_HOST_ATTR, BADGE_MARKER_HOST_ATTR, FREQUENCY_CACHE_KEY_PREFIX, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, WALKTHROUGH_STATE_KEY_PREFIX, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STEP_SELECTOR_TIMEOUT_MS;
 var init_constants2 = __esm({
   "src/plugins/guides/constants.ts"() {
     GUIDE_Z_INDEX = 2147483640;
     DEFAULT_ANCHOR_WAIT_MS = 5e3;
     SAFE_URL_PROTOCOLS = ["http:", "https:"];
     GUIDE_HOST_ATTR = "data-veo-guide";
+    BADGE_MARKER_HOST_ATTR = "data-veo-badge";
     FREQUENCY_CACHE_KEY_PREFIX = "veo:freq:";
     DEFAULT_TRACKER_FLUSH_INTERVAL_MS = 3e3;
     DEFAULT_TRACKER_BATCH_SIZE = 5;
@@ -2056,6 +2058,25 @@ var init_base_renderer = __esm({
         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
@@ -3592,6 +3613,18 @@ var init_snooze = __esm({
     };
   }
 });
+
+// src/plugins/guides/z-index.ts
+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 MAX_Z_INDEX;
+var init_z_index = __esm({
+  "src/plugins/guides/z-index.ts"() {
+    MAX_Z_INDEX = 2147483647;
+  }
+});
 function num(v, fallback) {
   return typeof v === "number" && Number.isFinite(v) ? v : fallback;
 }
@@ -3741,7 +3774,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) };
@@ -3816,6 +3849,7 @@ function attachMarker(anchor, host, marker) {
 var INFO_GLYPH, QUESTION_GLYPH, STAR_GLYPH, CIRCLE, TARGET_GLYPH, BADGE_ICONS, DEFAULT_MARKER_SIZE, DEFAULT_MARKER_Z, SIDE_GAP, NO_CHILDREN;
 var init_badge_marker = __esm({
   "src/plugins/guides/renderers/badge-marker.ts"() {
+    init_z_index();
     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";
     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";
     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";
@@ -3942,7 +3976,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;
@@ -4033,6 +4067,7 @@ var init_composite_renderer = __esm({
     init_scroll_lock();
     init_snooze();
     init_wait_for_element();
+    init_z_index();
     init_badge_marker();
     init_base_renderer();
     init_floating_arrow();
@@ -4080,7 +4115,9 @@ var init_composite_renderer = __esm({
         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);
@@ -4189,7 +4226,7 @@ var init_composite_renderer = __esm({
             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));
@@ -4211,7 +4248,7 @@ var init_composite_renderer = __esm({
               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) {
@@ -4532,6 +4569,7 @@ var init_composite_renderer = __esm({
       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");
@@ -4542,7 +4580,8 @@ var init_composite_renderer = __esm({
         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";
@@ -4557,13 +4596,13 @@ var init_composite_renderer = __esm({
         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;
@@ -5690,14 +5729,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(
@@ -5750,8 +5794,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;
@@ -5871,6 +5920,8 @@ var init_builder_chrome = __esm({
   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; }
@@ -6503,6 +6554,65 @@ var init_design_manipulator = __esm({
   }
 });
 
+// src/plugins/builder/interactive-elements.ts
+function isInteractiveElement(element) {
+  try {
+    return element.matches(INTERACTIVE_SELECTOR);
+  } catch {
+    return false;
+  }
+}
+function closestInteractive(element) {
+  try {
+    return element.closest(INTERACTIVE_SELECTOR);
+  } catch {
+    return null;
+  }
+}
+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);
+}
+var INTERACTIVE_ROLES, INTERACTIVE_SELECTOR, EMOJI_RE;
+var init_interactive_elements = __esm({
+  "src/plugins/builder/interactive-elements.ts"() {
+    INTERACTIVE_ROLES = [
+      "button",
+      "link",
+      "tab",
+      "menuitem",
+      "menuitemcheckbox",
+      "menuitemradio",
+      "checkbox",
+      "radio",
+      "switch",
+      "option",
+      "combobox",
+      "textbox",
+      "searchbox",
+      "slider",
+      "spinbutton"
+    ];
+    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(", ");
+    EMOJI_RE = /\p{Extended_Pictographic}|\p{Emoji_Modifier}|\u{FE0F}|\u{200D}|\u{20E3}/gu;
+  }
+});
+
 // src/plugins/builder/element-picker.ts
 function startElementPicker(options) {
   if (!hasDocument()) {
@@ -6521,6 +6631,7 @@ var init_element_picker = __esm({
   "src/plugins/builder/element-picker.ts"() {
     init_safe_env();
     init_selector_builder();
+    init_interactive_elements();
     PICKER_Z = 2147483646;
     PICKER_HOST_ATTR = "data-veo-picker";
     DEFAULT_MAX_ANCESTORS = 5;
@@ -6590,21 +6701,24 @@ var init_element_picker = __esm({
         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();
@@ -6631,6 +6745,7 @@ var init_element_picker = __esm({
       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");
@@ -6693,9 +6808,19 @@ var init_element_picker = __esm({
         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);
@@ -6732,7 +6857,7 @@ var init_element_picker = __esm({
           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),
@@ -7728,7 +7853,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":
@@ -7766,7 +7891,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;
       }
@@ -7775,6 +7901,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;
@@ -7859,10 +7994,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,
@@ -7990,10 +8269,12 @@ function previewProgressFetcher() {
     return data.items ?? [];
   };
 }
+var CONFIRMATION_STYLES;
 var init_builder_mode = __esm({
   "src/plugins/builder/builder-mode.ts"() {
     init_builder_token();
     init_safe_env();
+    init_selector_builder();
     init_activation_devices();
     init_activation_rules();
     init_block_builder();
@@ -8008,6 +8289,42 @@ var init_builder_mode = __esm({
     init_builder_panel();
     init_design_manipulator();
     init_element_picker();
+    init_interactive_elements();
+    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; }
+`;
   }
 });
 
@@ -8140,11 +8457,15 @@ var init_builder_session = __esm({
 // src/plugins/builder/index.ts
 var builder_exports = {};
 __export(builder_exports, {
+  INTERACTIVE_SELECTOR: () => INTERACTIVE_SELECTOR,
   VEO_BLOCK_MIME: () => VEO_BLOCK_MIME,
   attachBlockDropTarget: () => attachBlockDropTarget,
   attachDesignManipulator: () => attachDesignManipulator,
+  closestInteractive: () => closestInteractive,
   createBuilderSession: () => createBuilderSession,
+  elementLabelText: () => elementLabelText,
   initBuilderMode: () => initBuilderMode,
+  isInteractiveElement: () => isInteractiveElement,
   startElementPicker: () => startElementPicker,
   stopElementPicker: () => stopElementPicker
 });
@@ -8155,6 +8476,7 @@ var init_builder = __esm({
     init_builder_session();
     init_design_manipulator();
     init_element_picker();
+    init_interactive_elements();
   }
 });
 
@@ -8624,7 +8946,7 @@ var init_detect_theme = __esm({
 });
 
 // src/contract/v1.ts
-var SDK_VERSION = "0.0.1";
+var SDK_VERSION = "0.6.4";
 var DEFAULT_FLUSH_INTERVAL_MS = 5e3;
 var DEFAULT_FLUSH_BATCH_SIZE = 20;
 var DEFAULT_API_URL = "https://veo-backend-production-8c78.up.railway.app";
@@ -8694,6 +9016,298 @@ function definePlugin(plugin) {
 
 // src/plugins/autocapture/dom-listener.ts
 init_safe_env();
+
+// src/plugins/autocapture/click-quality.ts
+init_safe_env();
+init_selector_builder();
+var NO_DEAD_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "select", "option", "label"]);
+var MAX_ERROR_MESSAGE = 200;
+var HISTORY_MS = 3e3;
+var DEFAULTS = {
+  reactionWindowMs: 1e3,
+  errorWindowMs: 2e3,
+  rageClicks: 3,
+  rageWindowMs: 1e3,
+  rageClicksSlow: 5,
+  rageWindowSlowMs: 3e3,
+  maxPerElement: 50
+};
+function describeError(value) {
+  let text;
+  if (value instanceof Error) text = `${value.name}: ${value.message}`;
+  else if (typeof value === "string") text = value;
+  else {
+    try {
+      text = JSON.stringify(value) ?? String(value);
+    } catch {
+      text = String(value);
+    }
+  }
+  return text.slice(0, MAX_ERROR_MESSAGE);
+}
+var ClickQualityTracker = class {
+  constructor(emit, options = {}) {
+    this.emit = emit;
+    this.installed = false;
+    this.cleanups = [];
+    // Sensores globales (contadores: cada observación compara su foto inicial).
+    this.netCount = 0;
+    this.navCount = 0;
+    this.focusCount = 0;
+    this.unloading = false;
+    this.errors = [];
+    this.history = /* @__PURE__ */ new Map();
+    this.bursts = /* @__PURE__ */ new Map();
+    this.emitted = /* @__PURE__ */ new Map();
+    this.opts = { ...DEFAULTS, ...options };
+  }
+  install() {
+    if (this.installed || !hasWindow()) return;
+    this.installed = true;
+    const on = (type, handler, capture = true) => {
+      window.addEventListener(type, handler, capture);
+      this.cleanups.push(() => window.removeEventListener(type, handler, capture));
+    };
+    on("error", (e) => {
+      const err = e;
+      this.pushError("error", err.error ?? err.message ?? "error");
+    });
+    on("unhandledrejection", (e) => {
+      this.pushError("unhandledrejection", e.reason ?? "rejection");
+    });
+    on("popstate", () => this.navCount++);
+    on("hashchange", () => this.navCount++);
+    on("focusin", () => this.focusCount++);
+    on("pagehide", () => {
+      this.unloading = true;
+    });
+    on("beforeunload", () => {
+      this.unloading = true;
+    });
+    this.patchHistory();
+    this.patchConsole();
+    this.patchFetch();
+    this.patchXhr();
+  }
+  destroy() {
+    for (const c of this.cleanups) c();
+    this.cleanups = [];
+    for (const b of this.bursts.values()) window.clearTimeout(b.timer);
+    this.bursts.clear();
+    this.history.clear();
+    this.installed = false;
+  }
+  /** Llamar por cada clic real sobre un elemento interactivo, ANTES del throttle. */
+  onClick(element, event) {
+    if (!this.installed) return;
+    const now = Date.now();
+    const obs = { at: now, reacted: false };
+    this.remember(element, obs);
+    this.observeReaction(element, obs, event);
+    this.observeErrors(element, now);
+    this.trackRage(element, now);
+  }
+  // ---------------------------------------------------------------- dead ----
+  observeReaction(element, obs, event) {
+    const netAtClick = this.netCount;
+    const navAtClick = this.navCount;
+    const focusAtClick = this.focusCount;
+    const hrefAtClick = window.location.href;
+    const skipDead = this.isDeadExempt(element, event);
+    let observer = null;
+    if (typeof MutationObserver !== "undefined") {
+      observer = new MutationObserver(() => {
+        obs.reacted = true;
+        observer?.disconnect();
+        observer = null;
+      });
+      observer.observe(document.documentElement, {
+        childList: true,
+        attributes: true,
+        characterData: true,
+        subtree: true
+      });
+    }
+    window.setTimeout(() => {
+      observer?.disconnect();
+      const reacted = obs.reacted || this.unloading || this.netCount !== netAtClick || this.navCount !== navAtClick || this.focusCount !== focusAtClick || window.location.href !== hrefAtClick;
+      obs.reacted = reacted;
+      if (!reacted && !skipDead) this.report("$dead_click", element, {});
+    }, this.opts.reactionWindowMs);
+  }
+  isDeadExempt(element, event) {
+    if (event && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)) return true;
+    if (event && typeof event.button === "number" && event.button !== 0) return true;
+    const tag = element.tagName.toLowerCase();
+    if (NO_DEAD_TAGS.has(tag)) return true;
+    if (element.closest('[contenteditable=""],[contenteditable="true"]')) return true;
+    const anchor = element.closest("a");
+    if (anchor) {
+      if (anchor.target === "_blank" || anchor.hasAttribute("download")) return true;
+      const href = anchor.getAttribute("href") ?? "";
+      if (/^(mailto|tel|sms):/i.test(href)) return true;
+    }
+    return false;
+  }
+  // --------------------------------------------------------------- error ----
+  observeErrors(element, clickedAt) {
+    const deadline = clickedAt + this.opts.errorWindowMs;
+    const check = () => {
+      const err = this.errors.find((e) => e.at >= clickedAt && e.at <= deadline);
+      if (err) {
+        this.report("$click_error", element, {
+          $error_source: err.source,
+          $error_message: err.message
+        });
+        return;
+      }
+      if (Date.now() < deadline) window.setTimeout(check, 250);
+    };
+    window.setTimeout(check, 250);
+  }
+  pushError(source, value) {
+    const message = describeError(value);
+    if (message.startsWith("[veo]")) return;
+    this.errors.push({ at: Date.now(), source, message });
+    const cutoff = Date.now() - this.opts.errorWindowMs - 1e3;
+    while (this.errors.length > 0 && this.errors[0].at < cutoff) {
+      this.errors.shift();
+    }
+    if (this.errors.length > 50) this.errors.splice(0, this.errors.length - 50);
+  }
+  // ---------------------------------------------------------------- rage ----
+  remember(element, obs) {
+    const list = this.history.get(element) ?? [];
+    const cutoff = obs.at - HISTORY_MS;
+    const kept = list.filter((o) => o.at >= cutoff);
+    kept.push(obs);
+    this.history.set(element, kept);
+    if (this.history.size > 100) {
+      for (const [el2, obsList] of this.history) {
+        if (obsList.every((o) => o.at < cutoff)) this.history.delete(el2);
+      }
+    }
+  }
+  trackRage(element, now) {
+    const list = this.history.get(element) ?? [];
+    const fast = list.filter((o) => o.at >= now - this.opts.rageWindowMs).length;
+    const slow = list.filter((o) => o.at >= now - this.opts.rageWindowSlowMs).length;
+    const existing = this.bursts.get(element);
+    const isRage = fast >= this.opts.rageClicks || slow >= this.opts.rageClicksSlow;
+    if (!existing && !isRage) return;
+    const burst = existing ?? {
+      startedAt: (list.find((o) => o.at >= now - this.opts.rageWindowSlowMs) ?? { at: now }).at,
+      count: 0,
+      timer: 0
+    };
+    burst.count = list.filter((o) => o.at >= burst.startedAt).length;
+    window.clearTimeout(burst.timer);
+    burst.timer = window.setTimeout(() => {
+      this.bursts.delete(element);
+      const clicks = (this.history.get(element) ?? []).filter((o) => o.at >= burst.startedAt);
+      this.report("$rage_click", element, {
+        $click_count: Math.max(clicks.length, burst.count),
+        $reacted_clicks: clicks.filter((o) => o.reacted).length
+      });
+    }, this.opts.reactionWindowMs + 50);
+    this.bursts.set(element, burst);
+  }
+  // ---------------------------------------------------------------- emit ----
+  report(kind, element, extra) {
+    const key = buildSelectorPath(element, 5);
+    const counts = this.emitted.get(key) ?? { $dead_click: 0, $rage_click: 0, $click_error: 0 };
+    if (counts[kind] >= this.opts.maxPerElement) return;
+    counts[kind]++;
+    this.emitted.set(key, counts);
+    try {
+      this.emit(kind, element, extra);
+    } catch {
+    }
+  }
+  // ------------------------------------------------------------- patches ----
+  patchHistory() {
+    const h = window.history;
+    if (!h) return;
+    const origPush = h.pushState;
+    const origReplace = h.replaceState;
+    const self = this;
+    h.pushState = function(...args) {
+      self.navCount++;
+      return origPush.apply(this, args);
+    };
+    h.replaceState = function(...args) {
+      self.navCount++;
+      return origReplace.apply(this, args);
+    };
+    this.cleanups.push(() => {
+      h.pushState = origPush;
+      h.replaceState = origReplace;
+    });
+  }
+  patchConsole() {
+    const orig = console.error;
+    const self = this;
+    console.error = function(...args) {
+      try {
+        self.pushError("console", args.map(describeError).join(" "));
+      } catch {
+      }
+      return orig.apply(this, args);
+    };
+    this.cleanups.push(() => {
+      console.error = orig;
+    });
+  }
+  /**
+   * `fetch`: cuenta la petición (reacción) y registra respuestas ≥500 o
+   * rechazos como error. Se observa con `.then(ok, err)` sobre la promesa
+   * original: eso marca el rechazo como manejado para el navegador, así que
+   * un fetch fallido sin catch de la app no dispara `unhandledrejection` —
+   * lo registramos nosotros como error de red.
+   */
+  patchFetch() {
+    if (typeof window.fetch !== "function") return;
+    const orig = window.fetch;
+    const self = this;
+    window.fetch = function(...args) {
+      self.netCount++;
+      const p = orig.apply(this, args);
+      if (p && typeof p.then === "function") {
+        p.then(
+          (res) => {
+            if (res && res.status >= 500) self.pushError("fetch", `${res.status} ${res.url}`);
+          },
+          (err) => self.pushError("fetch", err)
+        );
+      }
+      return p;
+    };
+    this.cleanups.push(() => {
+      window.fetch = orig;
+    });
+  }
+  patchXhr() {
+    const proto = typeof XMLHttpRequest !== "undefined" ? XMLHttpRequest.prototype : null;
+    if (!proto) return;
+    const origSend = proto.send;
+    const self = this;
+    proto.send = function(...args) {
+      self.netCount++;
+      try {
+        this.addEventListener("loadend", () => {
+          if (this.status >= 500) self.pushError("xhr", `${this.status} ${this.responseURL}`);
+        });
+      } catch {
+      }
+      return origSend.apply(this, args);
+    };
+    this.cleanups.push(() => {
+      proto.send = origSend;
+    });
+  }
+};
+
+// src/plugins/autocapture/dom-listener.ts
 init_constants();
 
 // src/plugins/autocapture/element-serializer.ts
@@ -8804,6 +9418,7 @@ var DomListener = class {
   constructor(client, config) {
     this.client = client;
     this.cleanups = [];
+    this.quality = null;
     const d = DEFAULT_AUTOCAPTURE_CONFIG;
     this.config = {
       enabled: config.enabled ?? d.enabled,
@@ -8816,12 +9431,20 @@ var DomListener = class {
       throttleMs: config.throttleMs ?? d.throttleMs,
       maxTextLength: config.maxTextLength ?? d.maxTextLength,
       captureElementMetadata: config.captureElementMetadata ?? d.captureElementMetadata,
-      captureAncestors: Math.min(config.captureAncestors ?? d.captureAncestors, MAX_ANCESTORS)
+      captureAncestors: Math.min(config.captureAncestors ?? d.captureAncestors, MAX_ANCESTORS),
+      captureClickQuality: config.captureClickQuality ?? d.captureClickQuality
     };
     this.throttle = new ElementThrottle(this.config.throttleMs);
   }
   install() {
     if (!hasDocument() || !this.config.enabled) return;
+    if (this.config.captureClicks && this.config.captureClickQuality) {
+      this.quality = new ClickQualityTracker((kind, element, extra) => {
+        const payload = buildAutocapturePayload("click", element, this.config);
+        this.client.track(kind, { ...payload, ...extra });
+      });
+      this.quality.install();
+    }
     if (this.config.captureClicks) this.attach("click", (e) => this.handleClick(e));
     if (this.config.captureSubmits) this.attach("submit", (e) => this.handleSubmit(e), true);
     if (this.config.captureChanges) this.attach("change", (e) => this.handleChange(e), true);
@@ -8829,6 +9452,8 @@ var DomListener = class {
   destroy() {
     for (const cleanup of this.cleanups) cleanup();
     this.cleanups = [];
+    this.quality?.destroy();
+    this.quality = null;
   }
   attach(eventName, handler, useCapture = false) {
     const listener = (e) => {
@@ -8847,6 +9472,7 @@ var DomListener = class {
     const meaningful = this.findMeaningfulAncestor(target);
     if (!meaningful) return;
     if (isElementBlocked(meaningful, this.config.blockSelectors)) return;
+    this.quality?.onClick(meaningful, event);
     if (!this.throttle.shouldFire(meaningful)) return;
     this.emit("click", meaningful);
   }
@@ -9352,6 +9978,7 @@ function stableStringify(value) {
 var Client = class {
   constructor(config) {
     this.config = config;
+    this.version = SDK_VERSION;
     this.plugins = [];
     this.currentOrganizationId = null;
     this.listeners = {