veo-sdk 0.3.14 → 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-4YBB3RSZ.mjs.map → builder-EQYOMQFY.mjs.map}

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

package/dist/builder.cjs

@@ -692,6 +692,24 @@ var GUIDE_STYLES = `
   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; }
@@ -836,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
@@ -918,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
@@ -1244,7 +1305,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;
         }
@@ -1253,7 +1314,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;
     }
@@ -1262,7 +1323,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;
       }
@@ -1321,7 +1382,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");
@@ -1595,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
@@ -1634,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();
     });
@@ -1667,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;
@@ -1675,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;
@@ -1703,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`;
@@ -1714,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) {
@@ -1790,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);
@@ -2351,7 +2457,7 @@ var ElementPicker = class {
     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;