veo-sdk 0.3.14 → 0.3.16

package/dist/index.cjs

@@ -944,6 +944,24 @@ var init_styles = __esm({
   cursor: pointer; color: #9ca3af; padding: 0;
 }
 .veo-guide-close:hover { color: var(--veo-text); }
+/*
+ * Si el PRIMER bloque es una imagen, la \u2715 quedar\xEDa sobre la esquina de la foto
+ * (invisible seg\xFAn el color). En ese caso pasa a ser una pastilla flotante con
+ * fondo propio, legible sobre cualquier imagen. (Sin soporte de :has() queda el
+ * estilo base \u2014 mismo comportamiento de antes, sin regresi\xF3n.)
+ */
+.veo-guide-content:has(> .veo-guide-image:first-child) > .veo-guide-close {
+  top: 2px; right: 2px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 16px; color: #374151;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+}
+.veo-guide-content:has(> .veo-guide-image:first-child) > .veo-guide-close:hover {
+  color: #111827;
+}
 
 .veo-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
 .veo-form-field { display: flex; flex-direction: column; gap: 6px; }
@@ -1096,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
@@ -1186,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}`;
+        }
+      }
     };
   }
 });
@@ -1508,7 +1569,7 @@ function mountFormContent(card, context, doc) {
       const empty = value === void 0 || value === null || value === "";
       if (empty) {
         if (field.required) {
-          error.textContent = `Complet\xE1 "${field.label}"`;
+          error.textContent = `Completa "${field.label}"`;
           error.style.display = "block";
           return;
         }
@@ -1517,7 +1578,7 @@ function mountFormContent(card, context, doc) {
       answers[field.key] = value;
     }
     if (Object.keys(answers).length === 0) {
-      error.textContent = "Respond\xE9 al menos un campo";
+      error.textContent = "Responde al menos un campo";
       error.style.display = "block";
       return;
     }
@@ -1526,7 +1587,7 @@ function mountFormContent(card, context, doc) {
     void submitFn(answers).then((ok) => {
       if (!ok) {
         submit.disabled = false;
-        error.textContent = "No se pudo enviar. Prob\xE1 de nuevo.";
+        error.textContent = "No se pudo enviar. Prueba de nuevo.";
         error.style.display = "block";
         return;
       }
@@ -1585,7 +1646,7 @@ function buildField(field, doc) {
       select.className = "veo-form-input";
       const blank = doc.createElement("option");
       blank.value = "";
-      blank.textContent = field.placeholder || "Eleg\xED una opci\xF3n\u2026";
+      blank.textContent = field.placeholder || "Elige una opci\xF3n\u2026";
       select.appendChild(blank);
       for (const opt of field.options ?? []) {
         const option = doc.createElement("option");
@@ -1900,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)}`;
+      }
     };
   }
 });
@@ -1947,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();
         });
@@ -1992,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;
@@ -2000,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;
@@ -2028,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`;
@@ -2039,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?.();
+      }
     };
   }
 });
@@ -2196,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);
@@ -2646,7 +2752,7 @@ var init_element_picker = __esm({
         this.label.style.display = "none";
         const hint = document.createElement("div");
         hint.className = "veo-pick-hint";
-        hint.textContent = options.hint ?? "Seleccion\xE1 un elemento \xB7 Esc para cancelar";
+        hint.textContent = options.hint ?? "Selecciona un elemento \xB7 Esc para cancelar";
         shadow.append(style, this.box, this.label, hint);
         document.body.appendChild(host);
         this.host = host;
@@ -4021,7 +4127,7 @@ var GuideResolverClient = class {
    * matchea, pero el walkthrough activo debe poder consultarla igual.
    *
    * El endpoint backend (`GET /v1/guides/:guideId`) devuelve `GuideResponse`,
-   * un superset de `ResolvedGuide` con campos de audit. Acá descartamos los
+   * un superset de `ResolvedGuide` con campos de audit. Aquí descartamos los
    * extra y nos quedamos con el shape que el resto del SDK ya consume.
    *
    * Devuelve `null` en cualquier error (404, red, parse) — el caller debe