veo-sdk 0.3.15 → 0.3.16

package/dist/builder-EQYOMQFY.mjs

@@ -0,0 +1,5 @@
+export { createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker } from './chunk-QCIT7CGE.mjs';
+import './chunk-YHUPUTWH.mjs';
+import './chunk-PTG3BTJE.mjs';
+//# sourceMappingURL=builder-EQYOMQFY.mjs.map
+//# sourceMappingURL=builder-EQYOMQFY.mjs.map

package/dist/{builder-BKLDSVN5.mjs.map → builder-EQYOMQFY.mjs.map}

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

package/dist/builder.cjs

@@ -854,6 +854,37 @@ var BaseRenderer = class {
     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
@@ -936,9 +967,21 @@ var BannerRenderer = class extends BaseRenderer {
     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}`;
+    }
+  }
 };
 
 // src/plugins/guides/wait-for-element.ts
@@ -1613,8 +1656,18 @@ var InlineRenderer = class extends BaseRenderer {
     });
     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)}`;
+  }
 };
 
 // src/plugins/guides/renderers/modal-renderer.ts
@@ -1652,6 +1705,14 @@ var ModalRenderer = class extends BaseRenderer {
     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();
     });
@@ -1685,6 +1746,12 @@ function positionArrow(arrowEl, placement, data) {
 
 // src/plugins/guides/renderers/tooltip-renderer.ts
 var 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;
@@ -1693,7 +1760,7 @@ var TooltipRenderer = class extends BaseRenderer {
     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;
@@ -1721,7 +1788,7 @@ var TooltipRenderer = class extends BaseRenderer {
     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`;
@@ -1732,18 +1799,34 @@ var TooltipRenderer = class extends BaseRenderer {
     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?.();
+  }
 };
 var WalkthroughRenderer = class extends BaseRenderer {
   async render(context) {
@@ -1808,6 +1891,11 @@ var GuidePreviewController = class {
     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);