veo-sdk 0.5.27 → 0.5.29

package/dist/builder-HVJ6W5VT.mjs

@@ -0,0 +1,5 @@
+export { VEO_BLOCK_MIME, attachBlockDropTarget, attachDesignManipulator, createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker } from './chunk-47RJ4SV7.mjs';
+import './chunk-QQOV35FD.mjs';
+import './chunk-PTG3BTJE.mjs';
+//# sourceMappingURL=builder-HVJ6W5VT.mjs.map
+//# sourceMappingURL=builder-HVJ6W5VT.mjs.map

package/dist/{builder-5UDF6IHS.mjs.map → builder-HVJ6W5VT.mjs.map}

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

package/dist/builder.cjs

@@ -2304,7 +2304,8 @@ var CompositeRenderer = class extends BaseRenderer {
     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);
@@ -2341,8 +2342,13 @@ var CompositeRenderer = class extends BaseRenderer {
     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);
       });
@@ -2361,6 +2367,21 @@ var CompositeRenderer = class extends BaseRenderer {
       }
       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);
@@ -2550,6 +2571,89 @@ var CompositeRenderer = class extends BaseRenderer {
     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 placement = step.badge?.placement === "top" || step.badge?.placement === "left" || step.badge?.placement === "right" ? step.badge.placement : "bottom";
+    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, placement).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;
+  }
 };
 function inlinePosOf(p) {
   return p === "before" || p === "prepend" || p === "append" ? p : "after";
@@ -2611,10 +2715,10 @@ function liftTarget(anchor, zIndex) {
     el.style.zIndex = prevZ;
   };
 }
-async function anchorPosition(anchor, wrapper, caret) {
+async function anchorPosition(anchor, wrapper, caret, preferred = "bottom") {
   const update = async () => {
     const { x, y, placement, middlewareData } = await dom.computePosition(anchor, wrapper, {
-      placement: "bottom",
+      placement: preferred,
       strategy: "fixed",
       middleware: [
         dom.offset(caret ? 10 : 8),