veo-sdk 0.3.15 → 0.3.16

package/dist/index.cjs

@@ -1114,6 +1114,37 @@ var init_base_renderer = __esm({
         this.host = null;
         this.shadow = null;
         this.cleanups = [];
+        // ── Update in-place (preview en vivo del editor) ──
+        // La subclase setea estas piezas en render() para habilitarlo: el contenedor
+        // del contenido, el nodo de contenido actual y cómo reconstruirlo.
+        this.liveContainer = null;
+        this.liveContent = null;
+        this.liveBuild = null;
+        /** Clave de anclaje/estructura fijada en render(); si cambia → remontar. */
+        this.liveKey = "";
+      }
+      /** Clave de anclaje derivada del step (override por subclase). */
+      liveKeyOf(_step) {
+        return "";
+      }
+      /** Hook post-swap (reposicionar tooltip, actualizar clase del banner…). */
+      onLiveUpdate(_step) {
+      }
+      /**
+       * Actualiza el contenido del step SIN remontar el host — así el preview del
+       * editor no parpadea en cada tecla. Devuelve `false` cuando el renderer no
+       * lo soporta o el cambio requiere remontar (cambió el ancla/estructura);
+       * en ese caso el caller hace el re-render completo.
+       */
+      updateStep(step) {
+        if (!this.host || !this.liveContainer || !this.liveContent || !this.liveBuild) return false;
+        if (this.liveKeyOf(step) !== this.liveKey) return false;
+        const next = this.liveBuild(step);
+        this.liveContainer.replaceChild(next, this.liveContent);
+        this.liveContent = next;
+        this.applyDesign(step.style);
+        this.onLiveUpdate(step);
+        return true;
       }
       /**
        * Crea un `<div data-veo-guide>` adjunto a `document.body`, le adjunta
@@ -1204,9 +1235,21 @@ var init_banner_renderer = __esm({
         banner.appendChild(content);
         root.appendChild(banner);
         if (!context.nav) {
+          this.liveContainer = banner;
+          this.liveContent = content;
+          this.liveBuild = (s) => buildStepContent(s, ownerDocument, {
+            onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+            onDismiss: () => dismiss("dismissed")
+          });
           context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
         }
       }
+      onLiveUpdate(step) {
+        if (this.liveContainer) {
+          const position = step.style?.position === "bottom" ? "bottom" : "top";
+          this.liveContainer.className = `veo-banner veo-banner-${position}`;
+        }
+      }
     };
   }
 });
@@ -1918,8 +1961,18 @@ var init_inline_renderer = __esm({
         });
         card.appendChild(content);
         root.appendChild(card);
+        this.liveContainer = card;
+        this.liveContent = content;
+        this.liveKey = `${selector}|${position}`;
+        this.liveBuild = (s) => buildStepContent(s, ownerDocument, {
+          onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+          onDismiss: () => dismiss("dismissed")
+        });
         context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
       }
+      liveKeyOf(step) {
+        return `${step.selector ?? ""}|${readInlinePosition(step.style)}`;
+      }
     };
   }
 });
@@ -1965,6 +2018,14 @@ var init_modal_renderer = __esm({
         card.appendChild(content);
         overlay.appendChild(card);
         root.appendChild(overlay);
+        if (!context.nav) {
+          this.liveContainer = card;
+          this.liveContent = content;
+          this.liveBuild = (s) => buildStepContent(s, ownerDocument, {
+            onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+            onDismiss: () => dismiss("dismissed")
+          });
+        }
         overlay.addEventListener("click", (e) => {
           if (e.target === overlay) onBackdropOrEsc();
         });
@@ -2010,6 +2071,12 @@ var init_tooltip_renderer = __esm({
     init_base_renderer();
     init_floating_arrow();
     TooltipRenderer = class extends BaseRenderer {
+      constructor() {
+        super(...arguments);
+        /** Lado preferido (mutable: el update in-place puede cambiarlo). */
+        this.side = "bottom";
+        this.reposition = null;
+      }
       async render(context) {
         const step = context.guide.guideSteps[0];
         if (!step) return;
@@ -2018,7 +2085,7 @@ var init_tooltip_renderer = __esm({
         const anchor = await waitForElement(selector);
         if (!anchor) return;
         const rawSide = step.style?.tooltipPlacement;
-        const side = rawSide === "top" || rawSide === "left" || rawSide === "right" ? rawSide : "bottom";
+        this.side = rawSide === "top" || rawSide === "left" || rawSide === "right" ? rawSide : "bottom";
         const { root } = this.createHost();
         this.applyDesign(step.style);
         const ownerDocument = root.ownerDocument ?? document;
@@ -2046,7 +2113,7 @@ var init_tooltip_renderer = __esm({
         root.appendChild(tooltip);
         const updatePosition = async () => {
           const { x, y, placement, middlewareData } = await dom.computePosition(anchor, tooltip, {
-            placement: side,
+            placement: this.side,
             middleware: [dom.offset(10), dom.flip(), dom.shift({ padding: 8 }), dom.arrow({ element: arrowEl })]
           });
           tooltip.style.left = `${x}px`;
@@ -2057,18 +2124,34 @@ var init_tooltip_renderer = __esm({
         const reposition = () => {
           void updatePosition();
         };
+        this.reposition = reposition;
         window.addEventListener("scroll", reposition, true);
         window.addEventListener("resize", reposition);
         this.registerCleanup(() => {
           window.removeEventListener("scroll", reposition, true);
           window.removeEventListener("resize", reposition);
         });
+        this.liveContainer = tooltip;
+        this.liveContent = content;
+        this.liveKey = selector;
+        this.liveBuild = (s) => buildStepContent(s, ownerDocument, {
+          onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
+          onDismiss: () => dismiss("dismissed")
+        });
         context.onInteraction({
           guideId: context.guide.guideId,
           stepIndex: 0,
           action: "shown"
         });
       }
+      liveKeyOf(step) {
+        return step.selector ?? "";
+      }
+      onLiveUpdate(step) {
+        const raw = step.style?.tooltipPlacement;
+        this.side = raw === "top" || raw === "left" || raw === "right" ? raw : "bottom";
+        this.reposition?.();
+      }
     };
   }
 });
@@ -2214,6 +2297,11 @@ var init_guide_preview = __esm({
         this.input = null;
       }
       preview(input) {
+        const nextStep = input.guideSteps[0];
+        if (this.singleStep && this.input && input.guideType === this.input.guideType && input.guideType !== "walkthrough" && nextStep && this.singleStep.updateStep(nextStep)) {
+          this.input = input;
+          return { close: () => this.close(), ready: Promise.resolve({ rendered: true }) };
+        }
         this.close();
         this.input = input;
         const guide = normalize(input);