veo-sdk 0.5.25 → 0.5.28

package/dist/builder-RSWK3RIB.mjs

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

package/dist/{builder-HDTWSDJR.mjs.map → builder-RSWK3RIB.mjs.map}

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

package/dist/builder.cjs

@@ -1947,7 +1947,25 @@ function escapeClosing(code, tag) {
 }
 
 // src/plugins/guides/code-block.ts
-function mountCodeBlock(block, doc, context) {
+function insertRawNodes(anchor, nodes, pos) {
+  const parent = anchor.parentNode;
+  if (pos === "prepend") {
+    const first = anchor.firstChild;
+    for (const n of nodes) anchor.insertBefore(n, first);
+  } else if (pos === "append") {
+    for (const n of nodes) anchor.appendChild(n);
+  } else if (pos === "before") {
+    for (const n of nodes) parent?.insertBefore(n, anchor);
+  } else {
+    let ref = anchor;
+    for (const n of nodes) {
+      parent?.insertBefore(n, ref.nextSibling);
+      ref = n;
+    }
+  }
+}
+var codeSlotSeq = 0;
+function mountCodeBlock(block, doc, context, host, rawInline) {
   if (block.sandboxed) {
     const step = { html: block.html ?? "", css: block.css, js: block.js };
     const { iframe, cleanup } = mountCustomFrame(doc, step, context, { width: "100%" });
@@ -1966,19 +1984,28 @@ function mountCodeBlock(block, doc, context) {
   }
   let node = null;
   if (typeof block.html === "string" && block.html.trim()) {
-    node = doc.createElement("div");
-    node.className = "veo-code-html";
-    const inner = node.attachShadow({ mode: "open" });
-    for (const sheet of Array.from(hostDoc.querySelectorAll('link[rel="stylesheet"], style'))) {
-      inner.appendChild(sheet.cloneNode(true));
-    }
     const holder = doc.createElement("div");
+    holder.className = "veo-code-html";
     holder.innerHTML = block.html;
     for (const old of Array.from(holder.querySelectorAll("script"))) {
       injected.push(runScript(old, hostDoc));
       old.remove();
     }
-    inner.appendChild(holder);
+    if (rawInline) {
+      const rawNodes = Array.from(holder.childNodes);
+      insertRawNodes(rawInline.anchor, rawNodes, rawInline.pos);
+      injected.push(...rawNodes);
+    } else if (host) {
+      const slotName = `veo-code-${++codeSlotSeq}`;
+      holder.slot = slotName;
+      host.appendChild(holder);
+      injected.push(holder);
+      const slot = doc.createElement("slot");
+      slot.setAttribute("name", slotName);
+      node = slot;
+    } else {
+      node = holder;
+    }
   }
   if (typeof block.js === "string" && block.js.trim()) {
     const s = hostDoc.createElement("script");
@@ -2277,12 +2304,25 @@ 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);
       if (!anchor) return;
     }
+    const blocks = step.blocks ?? [];
+    const soleCode = blocks.length === 1 && blocks[0]?.type === "code" ? blocks[0] : void 0;
+    if (step.presentation === "inline" && anchor && soleCode && !soleCode.sandboxed) {
+      const rawDoc = anchor.ownerDocument ?? document;
+      const { cleanup } = mountCodeBlock(soleCode, rawDoc, context, void 0, {
+        anchor,
+        pos: inlinePosOf(step.inlinePosition)
+      });
+      this.registerCleanup(cleanup);
+      context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
+      return;
+    }
     const { host, root } = this.createHost();
     const doc = root.ownerDocument ?? document;
     const design = step.design ?? {};
@@ -2299,11 +2339,16 @@ var CompositeRenderer = class extends BaseRenderer {
       });
     };
     const readers = [];
-    this.buildContent(card, step.blocks ?? [], doc, context, idx, readers);
+    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);
       });
@@ -2322,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);
@@ -2370,7 +2430,7 @@ var CompositeRenderer = class extends BaseRenderer {
     context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
   }
   /** Recorre los bloques en orden y los pinta en la card. */
-  buildContent(card, blocks, doc, context, idx, readers) {
+  buildContent(card, blocks, doc, context, idx, readers, host) {
     const emit = (block) => {
       context.onInteraction({
         guideId: context.guide.guideId,
@@ -2404,7 +2464,7 @@ var CompositeRenderer = class extends BaseRenderer {
         continue;
       }
       if (b.type === "code") {
-        const { node: node2, cleanup } = mountCodeBlock(b, doc, context);
+        const { node: node2, cleanup } = mountCodeBlock(b, doc, context, host);
         if (node2) card.appendChild(node2);
         this.registerCleanup(cleanup);
         i++;
@@ -2511,6 +2571,88 @@ 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 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;
+  }
 };
 function inlinePosOf(p) {
   return p === "before" || p === "prepend" || p === "append" ? p : "after";