veo-sdk 0.6.3 → 0.6.5

package/dist/index.cjs

@@ -441,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;
@@ -2057,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
@@ -3593,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;
 }
@@ -3742,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) };
@@ -3817,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";
@@ -3943,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;
@@ -4034,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();
@@ -4081,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);
@@ -4190,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));
@@ -4212,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) {
@@ -4533,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");
@@ -4543,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";
@@ -4558,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;
@@ -6526,10 +6564,22 @@ function isInteractiveElement(element) {
 }
 function closestInteractive(element) {
   try {
-    return element.closest(INTERACTIVE_SELECTOR);
+    const bySelector = element.closest(INTERACTIVE_SELECTOR);
+    if (bySelector) return bySelector;
   } catch {
     return null;
   }
+  let current = element;
+  for (let depth = 0; current && depth < 5; depth++, current = current.parentElement) {
+    if (current instanceof HTMLElement) {
+      try {
+        const win = current.ownerDocument.defaultView;
+        if (win?.getComputedStyle(current).cursor === "pointer") return current;
+      } catch {
+      }
+    }
+  }
+  return null;
 }
 function elementLabelText(element, max = 120) {
   const clean = (raw) => (raw ?? "").replace(EMOJI_RE, "").replace(/\s+/g, " ").trim();
@@ -6569,6 +6619,15 @@ var init_interactive_elements = __esm({
       '[contenteditable="true"]',
       "[onclick]",
       "[data-veo-tag]",
+      // Acordeones, menús desplegables, tabs y toggles de apps modernas (React/Radix):
+      // el handler no está en el HTML, pero estos atributos delatan el control.
+      "[aria-expanded]",
+      "[aria-haspopup]",
+      "[aria-controls]",
+      "[aria-pressed]",
+      "[aria-selected]",
+      "[data-state]",
+      '[tabindex]:not([tabindex="-1"])',
       ...INTERACTIVE_ROLES.map((r) => `[role="${r}"]`)
     ].join(", ");
     EMOJI_RE = /\p{Extended_Pictographic}|\p{Emoji_Modifier}|\u{FE0F}|\u{200D}|\u{20E3}/gu;
@@ -8908,7 +8967,7 @@ var init_detect_theme = __esm({
 });
 
 // src/contract/v1.ts
-var SDK_VERSION = "0.0.1";
+var SDK_VERSION = "0.6.5";
 var DEFAULT_FLUSH_INTERVAL_MS = 5e3;
 var DEFAULT_FLUSH_BATCH_SIZE = 20;
 var DEFAULT_API_URL = "https://veo-backend-production-8c78.up.railway.app";
@@ -9457,13 +9516,23 @@ var DomListener = class {
     if (!this.throttle.shouldFire(target)) return;
     this.emit("change", target);
   }
-  /** Busca hacia arriba un ancestro "interactivo". Devuelve null si no hay ninguno. */
+  /**
+   * Busca hacia arriba un ancestro "interactivo". Devuelve null si no hay ninguno.
+   *
+   * Además de los controles nativos, reconoce los patrones de las apps modernas
+   * (React/Vue/Radix), donde el handler NO está en el HTML: acordeones, menús
+   * desplegables y tabs marcados con `aria-expanded`/`aria-haspopup`/`aria-controls`/
+   * `aria-pressed`/`aria-selected`/`data-state`, elementos enfocables por
+   * `tabindex`, y cualquier elemento cuyo cursor COMPUTADO sea `pointer` (antes
+   * solo se miraba el inline, que casi nadie usa: el cursor viene por clase).
+   */
   findMeaningfulAncestor(element) {
     let current = element;
     let depth = 0;
     while (current && current !== document.documentElement && depth < 5) {
       const tag = current.tagName.toLowerCase();
-      const isInteractive2 = tag === "button" || tag === "a" || tag === "input" || tag === "select" || tag === "textarea" || current.hasAttribute("data-veo-tag") || current.hasAttribute("role") || current.hasAttribute("onclick") || current instanceof HTMLElement && current.style.cursor === "pointer";
+      const tabindex = current.getAttribute("tabindex");
+      const isInteractive2 = tag === "button" || tag === "a" || tag === "input" || tag === "select" || tag === "textarea" || tag === "summary" || tag === "label" || current.hasAttribute("data-veo-tag") || current.hasAttribute("role") || current.hasAttribute("onclick") || current.hasAttribute("aria-expanded") || current.hasAttribute("aria-haspopup") || current.hasAttribute("aria-controls") || current.hasAttribute("aria-pressed") || current.hasAttribute("aria-selected") || current.hasAttribute("data-state") || current.hasAttribute("contenteditable") || tabindex !== null && tabindex !== "-1" || hasPointerCursor(current);
       if (isInteractive2) return current;
       current = current.parentElement;
       depth++;
@@ -9475,6 +9544,16 @@ var DomListener = class {
     this.client.track("$autocapture", payload);
   }
 };
+function hasPointerCursor(element) {
+  if (!(element instanceof HTMLElement)) return false;
+  if (element.style.cursor === "pointer") return true;
+  try {
+    const win = element.ownerDocument.defaultView;
+    return win ? win.getComputedStyle(element).cursor === "pointer" : false;
+  } catch {
+    return false;
+  }
+}
 
 // src/plugins/autocapture/index.ts
 function autocapturePlugin(config = {}) {
@@ -9940,6 +10019,7 @@ function stableStringify(value) {
 var Client = class {
   constructor(config) {
     this.config = config;
+    this.version = SDK_VERSION;
     this.plugins = [];
     this.currentOrganizationId = null;
     this.listeners = {