veo-sdk 0.6.3 → 0.6.4

package/dist/{builder-PPLIAUCM.mjs → builder-5F2EFT4X.mjs}

@@ -1,5 +1,5 @@
-export { INTERACTIVE_SELECTOR, VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, closestInteractive, createBuilderSession, elementLabelText, initBuilderMode, isInteractiveElement, startElementPicker, stopElementPicker } from './chunk-DU6I4ZU2.mjs';
-import './chunk-SZCIXA5X.mjs';
+export { INTERACTIVE_SELECTOR, VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, closestInteractive, createBuilderSession, elementLabelText, initBuilderMode, isInteractiveElement, startElementPicker, stopElementPicker } from './chunk-YEKCBVNJ.mjs';
+import './chunk-CMPOHTUM.mjs';
 import './chunk-PTG3BTJE.mjs';
-//# sourceMappingURL=builder-PPLIAUCM.mjs.map
-//# sourceMappingURL=builder-PPLIAUCM.mjs.map
+//# sourceMappingURL=builder-5F2EFT4X.mjs.map
+//# sourceMappingURL=builder-5F2EFT4X.mjs.map

package/dist/{builder-PPLIAUCM.mjs.map → builder-5F2EFT4X.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-PPLIAUCM.mjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"builder-5F2EFT4X.mjs"}

package/dist/builder.cjs

@@ -395,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
@@ -2209,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
@@ -3421,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";
@@ -3605,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) };
@@ -3743,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);
@@ -3852,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));
@@ -3874,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) {
@@ -4195,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");
@@ -4205,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";
@@ -4220,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;
@@ -4356,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;