veo-sdk 0.6.3 → 0.6.4

package/dist/{chunk-SZCIXA5X.mjs → chunk-CMPOHTUM.mjs}

@@ -213,6 +213,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 FREQUENCY_CACHE_KEY_PREFIX = "veo:freq:";
 var DEFAULT_TRACKER_FLUSH_INTERVAL_MS = 3e3;
 var DEFAULT_TRACKER_BATCH_SIZE = 5;
@@ -1776,6 +1777,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
@@ -3261,6 +3281,13 @@ function isSnoozed(guideId, now = Date.now()) {
     return false;
   }
 }
+
+// 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";
@@ -3445,7 +3472,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) };
@@ -3583,7 +3610,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);
@@ -3692,7 +3721,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));
@@ -3714,7 +3743,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) {
@@ -4035,6 +4064,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");
@@ -4045,7 +4075,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";
@@ -4060,13 +4091,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;
@@ -4196,7 +4227,7 @@ function liftTarget(anchor, zIndex) {
   const prevPosition = el.style.position;
   const prevZ = el.style.zIndex;
   if (getComputedStyle(el).position === "static") el.style.position = "relative";
-  el.style.zIndex = String(zIndex);
+  el.style.zIndex = String(clampZIndex(zIndex, 0));
   return () => {
     el.style.position = prevPosition;
     el.style.zIndex = prevZ;
@@ -5162,5 +5193,5 @@ function pageRuleMatches(rule, pageUrl) {
 }
 
 export { ALWAYS_BLOCK_SELECTORS, BadgeRenderer, BannerRenderer, CompositeRenderer, CustomRenderer, DEFAULT_AUTOCAPTURE_CONFIG, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_KEY_PREFIX, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, FormRenderer, GUIDE_STYLES, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, RAW_BLOCK_ATTR, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, activationDelayMs, applyBlockStyle, buildContentBlock, buildSelectorPath, clearBuilderToken, clearPreviewToken, closeGuidePreview, filterHumanClasses, getPreviewToken, groupLayout, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isAutomaticActivation, isBuilderMode, isDeviceAllowed, isSnoozed, previewGuide, resolveBuilderContext, resolveBuilderToken, stepMatchesPage, uuidv7 };
-//# sourceMappingURL=chunk-SZCIXA5X.mjs.map
-//# sourceMappingURL=chunk-SZCIXA5X.mjs.map
+//# sourceMappingURL=chunk-CMPOHTUM.mjs.map
+//# sourceMappingURL=chunk-CMPOHTUM.mjs.map