veo-sdk 0.5.4 → 0.5.6

package/dist/index.cjs

@@ -654,7 +654,8 @@ function buildButtonBlock(block, doc, callbacks) {
   btn.textContent = typeof block.text === "string" && block.text ? block.text : "OK";
   applyBlockStyle(btn, block.style, "button");
   btn.addEventListener("click", () => {
-    const action = block.action ?? "dismiss";
+    const raw = block.action ?? "dismiss";
+    const action = raw === "next" || raw === "url" || raw === "guide" ? raw : "dismiss";
     const target = action === "url" && typeof block.url === "string" && isSafeUrl(block.url) ? block.url : action === "guide" && typeof block.targetGuideId === "string" && block.targetGuideId ? block.targetGuideId : void 0;
     const meta = {
       ...typeof block.id === "string" && block.id ? { buttonId: block.id } : {},
@@ -1075,6 +1076,35 @@ var init_styles = __esm({
   animation: veo-fade-in 160ms ease-out;
 }
 
+/* \u2500\u2500 Modelo unificado (composite) \u2500\u2500 */
+.veo-composite-overlay {
+  position: fixed; inset: 0;
+  z-index: ${GUIDE_Z_INDEX};
+  pointer-events: none;
+}
+/* Backdrop atenuado (solo centro con backdrop activo). */
+.veo-composite-overlay--dim {
+  background: rgba(0, 0, 0, 0.5);
+  pointer-events: auto;
+}
+.veo-composite-anchored {
+  position: fixed;
+  z-index: ${GUIDE_Z_INDEX};
+}
+/* Card gen\xE9rica del modelo unificado. El dise\xF1o (bg/borde/padding/\u2026) lo aplica
+   el renderer como estilos inline desde step.design; ac\xE1 van los defaults. */
+.veo-card {
+  pointer-events: auto;
+  background: var(--veo-bg, #ffffff);
+  color: var(--veo-text, #1f2937);
+  border-radius: var(--veo-radius, 12px);
+  padding: 20px;
+  max-width: 90vw;
+  box-shadow: var(--veo-shadow, 0 12px 40px rgba(0, 0, 0, 0.18));
+  animation: veo-fade-in 160ms ease-out;
+}
+.veo-composite-anchored .veo-card, .veo-composite-overlay .veo-card { position: relative; }
+
 .veo-guide-content {
   position: relative;
   display: flex; flex-direction: column;
@@ -1920,6 +1950,191 @@ var init_banner_renderer = __esm({
     };
   }
 });
+function inlinePosOf(p) {
+  return p === "before" || p === "prepend" || p === "append" ? p : "after";
+}
+function applyViewportPosition(card, position) {
+  const s = card.style;
+  s.position = "fixed";
+  const M = "16px";
+  const v = position.includes("top") ? "top" : position.includes("bottom") ? "bottom" : "middle";
+  const h = position.includes("left") ? "left" : position.includes("right") ? "right" : "middle";
+  if (position === "center") {
+    s.top = "50%";
+    s.left = "50%";
+    s.transform = "translate(-50%, -50%)";
+    return;
+  }
+  if (v === "top") s.top = M;
+  else if (v === "bottom") s.bottom = M;
+  else {
+    s.top = "50%";
+    s.transform = "translateY(-50%)";
+  }
+  if (h === "left") s.left = M;
+  else if (h === "right") s.right = M;
+  else {
+    s.left = "50%";
+    s.transform = `${s.transform} translateX(-50%)`.trim();
+  }
+}
+async function anchorPosition(anchor, wrapper) {
+  const update = async () => {
+    const { x, y } = await dom.computePosition(anchor, wrapper, {
+      placement: "bottom",
+      strategy: "fixed",
+      middleware: [dom.offset(8), dom.flip(), dom.shift({ padding: 8 })]
+    });
+    wrapper.style.left = `${x}px`;
+    wrapper.style.top = `${y}px`;
+  };
+  await update();
+  const reposition = () => void update();
+  window.addEventListener("scroll", reposition, true);
+  window.addEventListener("resize", reposition);
+  return () => {
+    window.removeEventListener("scroll", reposition, true);
+    window.removeEventListener("resize", reposition);
+  };
+}
+function applyCompositeDesign(card, design) {
+  const s = card.style;
+  const px = (v) => typeof v === "number" && Number.isFinite(v) ? `${v}px` : null;
+  const strv = (v) => typeof v === "string" && v ? v : null;
+  if (strv(design.background)) s.background = design.background;
+  if (strv(design.textColor)) s.color = design.textColor;
+  if (px(design.fontSize)) s.fontSize = px(design.fontSize);
+  if (strv(design.fontWeight)) s.fontWeight = design.fontWeight;
+  if (strv(design.align)) s.textAlign = design.align;
+  if (typeof design.lineHeight === "number") s.lineHeight = `${design.lineHeight}%`;
+  if (px(design.radius)) s.borderRadius = px(design.radius);
+  if (px(design.width)) s.width = px(design.width);
+  const bw = px(design.borderWidth);
+  if (bw) s.border = `${bw} solid ${strv(design.borderColor) ?? "#e5e5e5"}`;
+  for (const side of ["Top", "Right", "Bottom", "Left"]) {
+    const p = px(design[`padding${side}`]);
+    if (p) s.setProperty(`padding-${side.toLowerCase()}`, p);
+    const m = px(design[`margin${side}`]);
+    if (m) s.setProperty(`margin-${side.toLowerCase()}`, m);
+  }
+}
+var CompositeRenderer;
+var init_composite_renderer = __esm({
+  "src/plugins/guides/renderers/composite-renderer.ts"() {
+    init_block_builder();
+    init_inline_host();
+    init_wait_for_element();
+    init_base_renderer();
+    CompositeRenderer = class extends BaseRenderer {
+      async render(context) {
+        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;
+        let anchor = null;
+        if (anchorSelector) {
+          anchor = await waitForElement(anchorSelector);
+          if (!anchor) return;
+        }
+        const { host, root } = this.createHost();
+        const doc = root.ownerDocument ?? document;
+        const card = doc.createElement("div");
+        card.className = "veo-card";
+        applyCompositeDesign(card, step.design ?? {});
+        const dismiss = (action, meta) => {
+          context.onInteraction({
+            guideId: context.guide.guideId,
+            stepIndex: idx,
+            action,
+            ...meta?.id ? { metadata: { buttonId: meta.id } } : {}
+          });
+        };
+        const synthetic = { blocks: step.blocks ?? [] };
+        for (const node of buildContentNodes(synthetic, doc)) card.appendChild(node);
+        const buttons = (step.blocks ?? []).filter((b) => b.type === "button");
+        if (buttons.length) {
+          const row = doc.createElement("div");
+          row.className = "veo-guide-actions";
+          for (const b of buttons) row.appendChild(this.buildButton(b, doc, context, dismiss));
+          card.appendChild(row);
+        }
+        card.appendChild(
+          createCloseButton(doc, () => {
+            dismiss("dismissed");
+            this.closeOrSkip(context);
+          })
+        );
+        if (step.presentation === "inline" && anchor) {
+          host.style.display = "block";
+          const pos = inlinePosOf(step.inlinePosition);
+          root.appendChild(card);
+          insertHost(anchor, host, pos);
+          this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+        } else if (step.position === "relative-to-element" && anchor) {
+          const wrapper = doc.createElement("div");
+          wrapper.className = "veo-composite-anchored";
+          wrapper.appendChild(card);
+          root.appendChild(wrapper);
+          this.registerCleanup(await anchorPosition(anchor, wrapper));
+        } else {
+          const overlay = doc.createElement("div");
+          overlay.className = "veo-composite-overlay";
+          if (step.position === "center" && step.design?.backdrop !== false) {
+            overlay.classList.add("veo-composite-overlay--dim");
+            overlay.addEventListener("click", (e) => {
+              if (e.target === overlay) {
+                dismiss("dismissed");
+                this.closeOrSkip(context);
+              }
+            });
+          }
+          applyViewportPosition(card, step.position);
+          overlay.appendChild(card);
+          root.appendChild(overlay);
+        }
+        context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action: "shown" });
+      }
+      /** Botón con enrutado de acción (navegación / cierre / url / guía). */
+      buildButton(block, doc, context, emit) {
+        const btn = doc.createElement("button");
+        btn.type = "button";
+        btn.className = "veo-guide-cta";
+        btn.textContent = block.text?.trim() || "OK";
+        btn.addEventListener("click", () => {
+          emit("cta_clicked", block);
+          const nav = context.nav?.callbacks;
+          switch (block.action) {
+            case "next":
+            case "submit-forms":
+            case "submit-forms-advance":
+              if (nav) nav.onNext();
+              else context.onClose();
+              break;
+            case "prev":
+              nav?.onBack();
+              break;
+            case "url":
+              if (typeof block.url === "string" && isSafeUrl(block.url)) {
+                window.open(block.url, "_blank", "noopener,noreferrer");
+              }
+              break;
+            case "guide":
+              if (block.targetGuideId) context.onOpenGuide?.(block.targetGuideId);
+              this.closeOrSkip(context);
+              break;
+            default:
+              this.closeOrSkip(context);
+          }
+        });
+        return btn;
+      }
+      closeOrSkip(context) {
+        if (context.nav?.callbacks) context.nav.callbacks.onSkip();
+        else context.onClose();
+      }
+    };
+  }
+});
 
 // src/plugins/guides/renderers/custom-frame.ts
 function mountCustomFrame(doc, step, context, opts) {
@@ -2880,8 +3095,12 @@ function createSingleStepRenderer(type) {
       return new InlineFormRenderer();
     case "badge":
       return new BadgeRenderer();
+    case "composite":
+      return new CompositeRenderer();
     case "walkthrough":
       return null;
+    default:
+      return null;
   }
 }
 function safeDestroy(renderer) {
@@ -2897,6 +3116,7 @@ var init_guide_preview = __esm({
     init_badge_renderer();
     init_banner_renderer();
     init_base_renderer();
+    init_composite_renderer();
     init_custom_renderer();
     init_form_renderer();
     init_inline_custom_renderer();
@@ -2930,6 +3150,13 @@ var init_guide_preview = __esm({
         this.input = input;
         const guide = normalize(input);
         const start = typeof input.startStepIndex === "number" ? input.startStepIndex : 0;
+        if (guide.guideType === "composite") {
+          const s = Math.min(Math.max(0, start), guide.guideSteps.length - 1);
+          const active2 = guide.guideSteps[s];
+          if (active2) guide.guideSteps = [active2];
+          const ready2 = this.renderSingleStep(guide);
+          return { close: () => this.close(), ready: ready2, host: () => this.activeHost() };
+        }
         const ready = guide.guideType === "walkthrough" ? this.startWalkthrough(guide, start) : this.renderSingleStep(guide);
         return { close: () => this.close(), ready, host: () => this.activeHost() };
       }
@@ -3093,7 +3320,8 @@ function attachBlockDropTarget(options) {
     const types = event.dataTransfer?.types;
     return !!types && Array.from(types).includes(VEO_BLOCK_MIME);
   };
-  const locate = (event) => {
+  const NEAR_PX = 48;
+  const locate = (clientY) => {
     const container = contentEl();
     if (!container) return null;
     const rect = container.getBoundingClientRect();
@@ -3102,7 +3330,7 @@ function attachBlockDropTarget(options) {
     let y = kids.length === 0 ? rect.top + rect.height / 2 : 0;
     for (const kid of kids) {
       const r = kid.getBoundingClientRect();
-      if (event.clientY < r.top + r.height / 2) {
+      if (clientY < r.top + r.height / 2) {
         const idx = Number(kid.dataset.veoIdx);
         beforeIndex = Number.isFinite(idx) ? idx : null;
         y = r.top;
@@ -3112,9 +3340,26 @@ function attachBlockDropTarget(options) {
     }
     return { beforeIndex, y, rect };
   };
+  const overContent = (x, y, rect) => x >= rect.left - NEAR_PX && x <= rect.right + NEAR_PX && y >= rect.top - NEAR_PX && y <= rect.bottom + NEAR_PX;
+  const hoverAt = (x, y) => {
+    const at = locate(y);
+    if (!at || !overContent(x, y, at.rect)) {
+      hideLine();
+      return false;
+    }
+    spot = at;
+    showLine(at);
+    return true;
+  };
+  const dropAt = (x, y) => {
+    const at = locate(y);
+    hideLine();
+    if (!at || !overContent(x, y, at.rect)) return null;
+    return { beforeIndex: at.beforeIndex };
+  };
   const onDragOver = (event) => {
     if (!isBlockDrag(event)) return;
-    const at = locate(event);
+    const at = locate(event.clientY);
     if (!at) return;
     event.preventDefault();
     if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
@@ -3125,7 +3370,7 @@ function attachBlockDropTarget(options) {
     if (!isBlockDrag(event)) return;
     event.preventDefault();
     const blockType = event.dataTransfer?.getData(VEO_BLOCK_MIME) ?? "";
-    const at = spot ?? locate(event);
+    const at = spot ?? locate(event.clientY);
     hideLine();
     if (!blockType || !at) return;
     onDrop({ stepIndex, blockType, beforeIndex: at.beforeIndex });
@@ -3139,6 +3384,9 @@ function attachBlockDropTarget(options) {
   host.addEventListener("drop", onDropEvent);
   host.addEventListener("dragleave", onDragLeave);
   return {
+    hoverAt,
+    dropAt,
+    cancelHover: hideLine,
     detach() {
       host.removeEventListener("dragover", onDragOver);
       host.removeEventListener("drop", onDropEvent);
@@ -3166,7 +3414,7 @@ var init_bridge_protocol = __esm({
 // src/plugins/builder/builder-panel.ts
 function injectBuilderPanel(opts) {
   if (!hasWindow() || !hasDocument()) {
-    return { target: () => null, teardown: () => {
+    return { target: () => null, frameRect: () => null, teardown: () => {
     } };
   }
   const panelUrl = buildPanelUrl(opts);
@@ -3283,6 +3531,7 @@ function injectBuilderPanel(opts) {
   });
   return {
     target: () => popped && !popped.closed ? popped : iframe.contentWindow,
+    frameRect: () => popped && !popped.closed ? null : iframe.getBoundingClientRect(),
     teardown: () => {
       stopPoll();
       if (popped && !popped.closed) popped.close();
@@ -3805,6 +4054,8 @@ function initBuilderMode() {
   let staticTarget = null;
   let manipulator = null;
   let dropTarget = null;
+  let dragGhost = null;
+  let previewStepIndex = 0;
   let pendingPreview = null;
   const getTarget = () => panel ? panel.target() : staticTarget;
   const post = (event) => {
@@ -3815,6 +4066,7 @@ function initBuilderMode() {
     manipulator = null;
     dropTarget?.detach();
     dropTarget = null;
+    previewStepIndex = cmd.guide.startStepIndex ?? 0;
     const handle = previewGuide(cmd.guide);
     if (!cmd.editable) return;
     void handle.ready.then((result) => {
@@ -3840,6 +4092,47 @@ function initBuilderMode() {
       });
     });
   };
+  const hideDragGhost = () => {
+    dragGhost?.remove();
+    dragGhost = null;
+  };
+  const moveDragGhost = (x, y, label) => {
+    if (!dragGhost) {
+      dragGhost = document.createElement("div");
+      dragGhost.style.cssText = "position:fixed;padding:4px 10px;border-radius:999px;background:#1c1917;color:#fff;font:12px/1.4 system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.25);pointer-events:none;z-index:2147483647;";
+      document.body.appendChild(dragGhost);
+    }
+    dragGhost.textContent = label;
+    dragGhost.style.left = `${x + 14}px`;
+    dragGhost.style.top = `${y + 12}px`;
+  };
+  const handleBlockDrag = (cmd) => {
+    const rect = panel?.frameRect();
+    if (!rect || !dropTarget) {
+      if (cmd.phase !== "move") hideDragGhost();
+      dropTarget?.cancelHover();
+      return;
+    }
+    const x = rect.left + cmd.x;
+    const y = rect.top + cmd.y;
+    if (cmd.phase === "move") {
+      moveDragGhost(x, y, cmd.label || cmd.blockType);
+      dropTarget.hoverAt(x, y);
+      return;
+    }
+    hideDragGhost();
+    if (cmd.phase === "cancel") {
+      dropTarget.cancelHover();
+      return;
+    }
+    const spotAt = dropTarget.dropAt(x, y);
+    if (spotAt) {
+      post({
+        type: "block-dropped",
+        payload: { stepIndex: previewStepIndex, blockType: cmd.blockType, ...spotAt }
+      });
+    }
+  };
   const handleCommand = (cmd) => {
     switch (cmd.type) {
       case "panel-ready":
@@ -3869,11 +4162,15 @@ function initBuilderMode() {
         if (manipulator?.isDragging()) pendingPreview = cmd;
         else applyPreview(cmd);
         break;
+      case "block-drag":
+        handleBlockDrag(cmd);
+        break;
       case "close-preview":
         manipulator?.detach();
         manipulator = null;
         dropTarget?.detach();
         dropTarget = null;
+        hideDragGhost();
         pendingPreview = null;
         closeGuidePreview();
         break;
@@ -3898,6 +4195,7 @@ function initBuilderMode() {
     manipulator = null;
     dropTarget?.detach();
     dropTarget = null;
+    hideDragGhost();
     pendingPreview = null;
     closeGuidePreview();
     post({ type: "closed" });
@@ -5363,6 +5661,7 @@ var GuideTrackerQueue = class {
 // src/plugins/guides/guides-controller.ts
 init_badge_renderer();
 init_banner_renderer();
+init_composite_renderer();
 init_custom_renderer();
 init_form_renderer();
 init_inline_custom_renderer();
@@ -6037,8 +6336,12 @@ ${pageUrl}`;
         return new InlineFormRenderer();
       case "badge":
         return new BadgeRenderer();
+      case "composite":
+        return new CompositeRenderer();
       case "walkthrough":
         return null;
+      default:
+        return null;
     }
   }
   /**