veo-sdk 0.5.32 → 0.5.34

package/dist/{chunk-X27GD7IT.mjs → chunk-W4R4XCWL.mjs}

@@ -1,5 +1,5 @@
 import { BUILDER_TOKEN_PARAM, BUILDER_PANEL_PATH_PARAM, BUILDER_GUIDE_PARAM, BUILDER_PANEL_PARAM, BUILDER_ORIGIN_PARAM } from './chunk-PTG3BTJE.mjs';
-import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom';
+import { computePosition, offset, flip, shift, arrow, autoUpdate } from '@floating-ui/dom';
 
 // src/utils/safe-env.ts
 function hasWindow() {
@@ -195,6 +195,19 @@ function clearBuilderToken() {
   }
 }
 
+// src/plugins/guides/activation-rules.ts
+function isAutomaticActivation(rules) {
+  const trigger = rules?.trigger ?? "immediate";
+  if (trigger === "immediate" || trigger === "delayed") return true;
+  if (trigger === "on_click" || trigger === "on_hover") return rules?.autoShow === true;
+  return false;
+}
+function activationDelayMs(rules) {
+  if (!isAutomaticActivation(rules)) return 0;
+  const ms = rules?.delayMs ?? 0;
+  return Number.isFinite(ms) && ms > 0 ? ms : 0;
+}
+
 // src/plugins/guides/constants.ts
 var GUIDE_Z_INDEX = 2147483640;
 var DEFAULT_ANCHOR_WAIT_MS = 5e3;
@@ -2256,6 +2269,188 @@ function buildScale(wrapper, doc, min, max, btnClass, symbol) {
   wrapper.appendChild(row);
   return { wrapper, read: () => selected };
 }
+var INFO_GLYPH = "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021";
+var QUESTION_GLYPH = "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75";
+var STAR_GLYPH = "M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z";
+var CIRCLE = "M21 12a9 9 0 11-18 0 9 9 0 0118 0z";
+var TARGET_GLYPH = "M7.5 3.75H6A2.25 2.25 0 0 0 3.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0 1 20.25 6v1.5m0 9V18A2.25 2.25 0 0 1 18 20.25h-1.5m-9 0H6A2.25 2.25 0 0 1 3.75 18v-1.5M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z";
+var BADGE_ICONS = {
+  info: { paths: [CIRCLE, INFO_GLYPH], dots: [[12, 8.25]] },
+  exclamation: { paths: [CIRCLE, "M12 8v4.5"], dots: [[12, 15.75]] },
+  question: { paths: [CIRCLE, QUESTION_GLYPH], dots: [[12, 17.25]] },
+  star: { paths: [STAR_GLYPH] },
+  "info-solid": { paths: [INFO_GLYPH], dots: [[12, 8.25]], solid: true, scale: 0.8 },
+  "exclamation-solid": { paths: ["M12 8v4.5"], dots: [[12, 15.75]], solid: true, scale: 0.8 },
+  "question-solid": { paths: [QUESTION_GLYPH], dots: [[12, 17.25]], solid: true, scale: 0.8 },
+  "star-solid": { paths: [STAR_GLYPH], solid: true, scale: 0.55 },
+  "target-solid": { paths: [TARGET_GLYPH], solid: true, scale: 0.6 },
+  new: { paths: [], text: "New" }
+};
+var DEFAULT_MARKER_SIZE = 14;
+var DEFAULT_MARKER_Z = 19e3;
+var SIDE_GAP = 8;
+function num(v, fallback) {
+  return typeof v === "number" && Number.isFinite(v) ? v : fallback;
+}
+function iconNode(doc, name, size, color) {
+  const def = BADGE_ICONS[name] ?? BADGE_ICONS.info;
+  if (def.text) {
+    const t = doc.createElement("span");
+    t.textContent = def.text;
+    t.style.font = `700 ${Math.round(size * 0.85)}px/1 system-ui, -apple-system, sans-serif`;
+    t.style.color = color;
+    return t;
+  }
+  const ns = "http://www.w3.org/2000/svg";
+  const svg = doc.createElementNS(ns, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("aria-hidden", "true");
+  const glyphColor = def.solid ? "#ffffff" : color;
+  if (def.solid) {
+    const bg = doc.createElementNS(ns, "circle");
+    bg.setAttribute("cx", "12");
+    bg.setAttribute("cy", "12");
+    bg.setAttribute("r", "12");
+    bg.setAttribute("fill", color);
+    svg.appendChild(bg);
+  }
+  const g = doc.createElementNS(ns, "g");
+  g.setAttribute("stroke", glyphColor);
+  g.setAttribute("stroke-width", def.solid ? "2" : "1.8");
+  g.setAttribute("stroke-linecap", "round");
+  g.setAttribute("stroke-linejoin", "round");
+  if (def.scale && def.scale !== 1) {
+    const k = def.scale;
+    const t = 12 - 12 * k;
+    g.setAttribute("transform", `translate(${t} ${t}) scale(${k})`);
+  }
+  for (const d of def.paths) {
+    const path = doc.createElementNS(ns, "path");
+    path.setAttribute("d", d);
+    g.appendChild(path);
+  }
+  for (const [cx, cy] of def.dots ?? []) {
+    const dot = doc.createElementNS(ns, "circle");
+    dot.setAttribute("cx", String(cx));
+    dot.setAttribute("cy", String(cy));
+    dot.setAttribute("r", "0.9");
+    dot.setAttribute("fill", glyphColor);
+    dot.setAttribute("stroke", "none");
+    g.appendChild(dot);
+  }
+  svg.appendChild(g);
+  return svg;
+}
+function buildMarkerElement(doc, marker) {
+  const size = num(marker.size, DEFAULT_MARKER_SIZE);
+  const color = marker.color || "#000000";
+  const el = doc.createElement("span");
+  el.className = `veo-badge-marker veo-badge-marker-${marker.kind}`;
+  el.style.display = "inline-flex";
+  el.style.alignItems = "center";
+  el.style.justifyContent = "center";
+  el.style.boxSizing = "border-box";
+  el.style.lineHeight = "1";
+  if (marker.kind === "image") {
+    const img = doc.createElement("img");
+    img.alt = "";
+    img.src = marker.imageUrl || "";
+    img.style.width = `${size}px`;
+    img.style.height = `${size}px`;
+    img.style.objectFit = "contain";
+    img.style.display = "block";
+    el.appendChild(img);
+    return el;
+  }
+  if (marker.kind === "icon-text") {
+    el.style.gap = "6px";
+    el.style.color = color;
+    el.style.fontSize = `${size}px`;
+    el.style.fontFamily = "inherit";
+    el.style.fontWeight = "600";
+    el.style.whiteSpace = "nowrap";
+    el.style.background = marker.bgColor || "transparent";
+    const bw = num(marker.borderWidth, 0);
+    if (bw > 0) el.style.border = `${bw}px solid ${marker.borderColor || color}`;
+    el.style.padding = `${num(marker.paddingY, 6)}px ${num(marker.paddingX, 10)}px`;
+    el.style.borderRadius = `${num(marker.radius, 999)}px`;
+    if (marker.showIcon !== false)
+      el.appendChild(iconNode(doc, marker.icon || "star", size, color));
+    const text = doc.createElement("span");
+    text.textContent = marker.text || "";
+    el.appendChild(text);
+    return el;
+  }
+  el.style.width = `${size}px`;
+  el.style.height = `${size}px`;
+  el.appendChild(iconNode(doc, marker.icon || "info", size, color));
+  return el;
+}
+function markerOffset(anchor, marker, position, offset6) {
+  const right = anchor.left + anchor.width;
+  const bottom = anchor.top + anchor.height;
+  const midY = anchor.top + anchor.height / 2 - marker.height / 2;
+  const midX = anchor.left + anchor.width / 2 - marker.width / 2;
+  let x;
+  let y;
+  switch (position) {
+    case "top-left":
+      x = anchor.left - marker.width / 2;
+      y = anchor.top - marker.height / 2;
+      break;
+    case "bottom-left":
+      x = anchor.left - marker.width / 2;
+      y = bottom - marker.height / 2;
+      break;
+    case "bottom-right":
+      x = right - marker.width / 2;
+      y = bottom - marker.height / 2;
+      break;
+    case "left":
+      x = anchor.left - marker.width - SIDE_GAP;
+      y = midY;
+      break;
+    case "right":
+      x = right + SIDE_GAP;
+      y = midY;
+      break;
+    case "center":
+      x = midX;
+      y = midY;
+      break;
+    default:
+      x = right - marker.width / 2;
+      y = anchor.top - marker.height / 2;
+  }
+  return { x: x + offset6.x, y: y + offset6.y };
+}
+function attachMarker(anchor, host, marker) {
+  host.style.position = "absolute";
+  host.style.zIndex = String(num(marker.zIndex, DEFAULT_MARKER_Z));
+  host.style.margin = "0";
+  const update = () => {
+    const a = anchor.getBoundingClientRect();
+    const m = host.getBoundingClientRect();
+    const { x, y } = markerOffset(
+      {
+        left: a.left + window.scrollX,
+        top: a.top + window.scrollY,
+        width: a.width,
+        height: a.height
+      },
+      { width: m.width, height: m.height },
+      marker.position ?? "top-right",
+      { x: num(marker.offsetX, 0), y: num(marker.offsetY, 0) }
+    );
+    host.style.left = `${Math.round(x)}px`;
+    host.style.top = `${Math.round(y)}px`;
+  };
+  update();
+  return autoUpdate(anchor, host, update);
+}
 
 // src/plugins/guides/renderers/composite-renderer.ts
 var ROW_ALIGN = {
@@ -2551,7 +2746,9 @@ var CompositeRenderer = class extends BaseRenderer {
     badge.style.cursor = "pointer";
     badge.style.display = "inline-flex";
     badge.style.alignItems = "center";
-    this.buildContent(badge, step.badge?.blocks ?? [], doc, context, idx, [], host);
+    const marker = step.badge?.marker ?? null;
+    if (marker) badge.appendChild(buildMarkerElement(doc, marker));
+    else this.buildContent(badge, step.badge?.blocks ?? [], doc, context, idx, [], host);
     root.appendChild(badge);
     if (design.fullWidth === true) {
       card.style.width = "auto";
@@ -2566,10 +2763,17 @@ var CompositeRenderer = class extends BaseRenderer {
     if (caretEl) wrapper.appendChild(caretEl);
     wrapper.appendChild(card);
     root.appendChild(wrapper);
-    host.style.display = "inline-block";
-    const pos = inlinePosOf(step.inlinePosition);
-    insertHost(anchor, host, pos);
-    this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+    if (marker) {
+      host.style.display = "inline-block";
+      (anchor.ownerDocument ?? document).body.appendChild(host);
+      this.registerCleanup(attachMarker(anchor, host, marker));
+      this.registerCleanup(() => host.remove());
+    } else {
+      host.style.display = "inline-block";
+      const pos = inlinePosOf(step.inlinePosition);
+      insertHost(anchor, host, pos);
+      this.registerCleanup(keepHostAttached(host, anchorSelector, pos));
+    }
     let open = false;
     let stopFloat = null;
     let closeTimer = null;
@@ -2622,6 +2826,7 @@ var CompositeRenderer = class extends BaseRenderer {
       stopFloat?.();
       if (closeTimer !== null) clearTimeout(closeTimer);
     });
+    if (context.badgeOpen) openTip();
     return closeTip;
   }
 };
@@ -3198,7 +3403,8 @@ var GuidePreviewController = class {
   }
   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)) {
+    if (this.singleStep && this.input && input.guideType === this.input.guideType && input.guideType !== "walkthrough" && // Abrir/cerrar el tooltip del badge requiere remontar.
+    input.badgeOpen === true === (this.input.badgeOpen === true) && nextStep && this.singleStep.updateStep(nextStep)) {
       this.input = input;
       return {
         close: () => this.close(),
@@ -3228,7 +3434,8 @@ var GuidePreviewController = class {
     }
     return null;
   }
-  close() {
+  close(byUser = false) {
+    const onClosed = byUser ? this.input?.onClosed : void 0;
     if (this.singleStep) {
       safeDestroy(this.singleStep);
       this.singleStep = null;
@@ -3240,6 +3447,7 @@ var GuidePreviewController = class {
     this.walkthroughGuide = null;
     this.walkthroughIndex = 0;
     this.input = null;
+    onClosed?.();
   }
   async renderSingleStep(guide) {
     const renderer = createSingleStepRenderer(guide.guideType);
@@ -3252,7 +3460,10 @@ var GuidePreviewController = class {
         onInteraction: (event) => {
           if (event.action === "shown") shown = true;
         },
-        onClose: () => this.close(),
+        onClose: () => this.close(true),
+        // Sin indicación explícita, el badge se abre solo si la guía arranca
+        // sola (como en el runtime); `manual` lo deja cerrado.
+        badgeOpen: this.input?.badgeOpen ?? isAutomaticActivation(this.input?.activationRules),
         onTrack: () => {
         },
         // Encadenado en preview: no-op — el editor no puede montar otra guía
@@ -3318,7 +3529,7 @@ var GuidePreviewController = class {
           guide,
           onInteraction: () => {
           },
-          onClose: () => this.close(),
+          onClose: () => this.close(true),
           nav: { stepIndex: index, totalSteps: guide.guideSteps.length, callbacks }
         });
       } catch {
@@ -3411,16 +3622,36 @@ function safeDestroy(renderer) {
   }
 }
 
+// src/plugins/guides/activation-devices.ts
+var MOBILE_MAX_WIDTH = 767;
+function isDeviceAllowed(devices, viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth) {
+  if (!devices || devices === "all") return true;
+  const mobile = viewportWidth <= MOBILE_MAX_WIDTH;
+  return devices === "mobile" ? mobile : !mobile;
+}
+
 // src/plugins/guides/url-match.ts
+function urlCandidates(pageUrl) {
+  const out = [pageUrl];
+  try {
+    const u = new URL(pageUrl);
+    out.push(`${u.pathname}${u.search}${u.hash}`);
+    if (u.hash.startsWith("#/")) out.push(u.hash.slice(1));
+  } catch {
+  }
+  return out;
+}
 function matchesUrl(matcher, pageUrl) {
+  const candidates = urlCandidates(pageUrl);
   switch (matcher.type) {
     case "exact":
-      return matcher.pattern === pageUrl;
+      return candidates.some((c) => c === matcher.pattern);
     case "prefix":
-      return pageUrl.startsWith(matcher.pattern);
+      return candidates.some((c) => c.startsWith(matcher.pattern));
     case "regex":
       try {
-        return new RegExp(matcher.pattern).test(pageUrl);
+        const re = new RegExp(matcher.pattern);
+        return candidates.some((c) => re.test(c));
       } catch {
         return false;
       }
@@ -3564,6 +3795,6 @@ function buildSelectorPath(element, maxAncestors = 5) {
   return parts.join(" > ");
 }
 
-export { ALWAYS_BLOCK_SELECTORS, BadgeRenderer, BannerRenderer, CompositeRenderer, CustomRenderer, DEFAULT_AUTOCAPTURE_CONFIG, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_KEY_PREFIX, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, FormRenderer, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, buildSelectorPath, clearBuilderToken, clearPreviewToken, closeGuidePreview, filterHumanClasses, getPreviewToken, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isBuilderMode, previewGuide, resolveBuilderContext, resolveBuilderToken, stepMatchesPage, uuidv7 };
-//# sourceMappingURL=chunk-X27GD7IT.mjs.map
-//# sourceMappingURL=chunk-X27GD7IT.mjs.map
+export { ALWAYS_BLOCK_SELECTORS, BadgeRenderer, BannerRenderer, CompositeRenderer, CustomRenderer, DEFAULT_AUTOCAPTURE_CONFIG, DEFAULT_TRACKER_BATCH_SIZE, DEFAULT_TRACKER_FLUSH_INTERVAL_MS, DEFAULT_TRACKER_MAX_RETRIES, FREQUENCY_CACHE_KEY_PREFIX, FREQUENCY_CACHE_MAX_ENTRIES, FREQUENCY_CACHE_TTL_MS, FormRenderer, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, activationDelayMs, buildSelectorPath, clearBuilderToken, clearPreviewToken, closeGuidePreview, filterHumanClasses, getPreviewToken, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isAutomaticActivation, isBuilderMode, isDeviceAllowed, previewGuide, resolveBuilderContext, resolveBuilderToken, stepMatchesPage, uuidv7 };
+//# sourceMappingURL=chunk-W4R4XCWL.mjs.map
+//# sourceMappingURL=chunk-W4R4XCWL.mjs.map