veo-sdk 0.5.27 → 0.5.28

package/dist/index.cjs

@@ -2626,7 +2626,8 @@ var init_composite_renderer = __esm({
         const idx = context.nav?.stepIndex ?? 0;
         const step = context.guide.guideSteps[idx];
         if (!step) return;
-        const anchorSelector = step.position === "relative-to-element" || step.presentation === "inline" ? step.anchorSelector?.trim() || void 0 : void 0;
+        const badgeMode = step.badge?.enabled === true;
+        const anchorSelector = step.position === "relative-to-element" || step.presentation === "inline" || badgeMode ? step.anchorSelector?.trim() || void 0 : void 0;
         let anchor = null;
         if (anchorSelector) {
           anchor = await waitForElement(anchorSelector);
@@ -2663,8 +2664,13 @@ var init_composite_renderer = __esm({
         this.buildContent(card, step.blocks ?? [], doc, context, idx, readers, host);
         const lastBlock = card.lastElementChild;
         if (lastBlock && !lastBlock.style.marginBottom) lastBlock.style.marginBottom = "0";
+        let closeTooltip = null;
         if (design.closeButton !== false) {
           const closeBtn = createCloseButton(doc, () => {
+            if (closeTooltip) {
+              closeTooltip();
+              return;
+            }
             dismiss("dismissed");
             this.closeOrSkip(context);
           });
@@ -2683,6 +2689,21 @@ var init_composite_renderer = __esm({
           }
           card.appendChild(closeBtn);
         }
+        if (badgeMode && anchor) {
+          closeTooltip = this.renderBadgeMode(
+            step,
+            card,
+            anchor,
+            anchorSelector,
+            host,
+            root,
+            doc,
+            context,
+            idx,
+            design
+          );
+          return;
+        }
         if (step.presentation === "inline" && anchor) {
           host.style.display = "block";
           const pos = inlinePosOf(step.inlinePosition);
@@ -2872,6 +2893,88 @@ var init_composite_renderer = __esm({
         if (context.nav?.callbacks) context.nav.callbacks.onSkip();
         else context.onClose();
       }
+      /**
+       * Modo BADGE: inserta un MARCADOR permanente (compuesto con `step.badge.blocks`)
+       * junto al ancla, en el flujo del DOM. Al hover/click abre la `card` (los
+       * bloques del paso) como TOOLTIP anclado al marcador. Devuelve una función que
+       * cierra el tooltip (para el ✕). El marcador nunca se descarta.
+       */
+      renderBadgeMode(step, card, anchor, anchorSelector, host, root, doc, context, idx, design) {
+        const trigger = step.badge?.trigger === "click" ? "click" : "hover";
+        const badge = doc.createElement("div");
+        badge.className = "veo-composite-badge";
+        badge.setAttribute("role", "button");
+        badge.tabIndex = 0;
+        badge.style.cursor = "pointer";
+        badge.style.display = "inline-flex";
+        badge.style.alignItems = "center";
+        this.buildContent(badge, step.badge?.blocks ?? [], doc, context, idx, [], host);
+        root.appendChild(badge);
+        const wrapper = doc.createElement("div");
+        wrapper.className = "veo-composite-anchored";
+        wrapper.style.display = "none";
+        const caretEl = design.caret === false ? null : makeCaret(doc, design);
+        if (caretEl) wrapper.appendChild(caretEl);
+        wrapper.appendChild(card);
+        root.appendChild(wrapper);
+        host.style.display = "inline-block";
+        const pos = inlinePosOf(step.inlinePosition);
+        insertHost(anchor, host, pos);
+        this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+        let open = false;
+        let stopFloat = null;
+        let closeTimer = null;
+        let shownEmitted = false;
+        const openTip = () => {
+          if (open) return;
+          open = true;
+          wrapper.style.display = "block";
+          void anchorPosition(badge, wrapper, caretEl).then((stop) => {
+            if (open) stopFloat = stop;
+            else stop();
+          });
+          if (!shownEmitted) {
+            shownEmitted = true;
+            context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
+          }
+        };
+        const closeTip = () => {
+          open = false;
+          wrapper.style.display = "none";
+          stopFloat?.();
+          stopFloat = null;
+        };
+        if (trigger === "hover") {
+          const cancelClose = () => {
+            if (closeTimer !== null) {
+              clearTimeout(closeTimer);
+              closeTimer = null;
+            }
+          };
+          const scheduleClose = () => {
+            cancelClose();
+            closeTimer = window.setTimeout(closeTip, 150);
+          };
+          badge.addEventListener("mouseenter", () => {
+            cancelClose();
+            openTip();
+          });
+          badge.addEventListener("mouseleave", scheduleClose);
+          badge.addEventListener("focus", openTip);
+          wrapper.addEventListener("mouseenter", cancelClose);
+          wrapper.addEventListener("mouseleave", scheduleClose);
+        } else {
+          badge.addEventListener("click", () => {
+            if (open) closeTip();
+            else openTip();
+          });
+        }
+        this.registerCleanup(() => {
+          stopFloat?.();
+          if (closeTimer !== null) clearTimeout(closeTimer);
+        });
+        return closeTip;
+      }
     };
     CLOSE_INSET = "10px";
   }