veo-sdk 0.5.0 → 0.5.2

package/dist/builder-LSWVQYFZ.mjs

@@ -0,0 +1,5 @@
+export { attachDesignManipulator, createBuilderSession, initBuilderMode, startElementPicker, stopElementPicker } from './chunk-7Q7IBICO.mjs';
+import './chunk-5QI3UUE5.mjs';
+import './chunk-PTG3BTJE.mjs';
+//# sourceMappingURL=builder-LSWVQYFZ.mjs.map
+//# sourceMappingURL=builder-LSWVQYFZ.mjs.map

package/dist/{builder-AW37YKWO.mjs.map → builder-LSWVQYFZ.mjs.map}

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

package/dist/builder.cjs

@@ -265,6 +265,33 @@ function buildStepContent(step, doc, callbacks) {
   container.appendChild(createCloseButton(doc, () => callbacks.onDismiss()));
   return container;
 }
+function buildContentNodes(step, doc) {
+  const blocks = normalizeBlocks(step);
+  if (blocks) {
+    return blocks.filter((b) => b.type !== "button").map((b) => buildContentBlock(b, doc)).filter((n) => n !== null);
+  }
+  const nodes = [];
+  if (typeof step.imageUrl === "string" && step.imageUrl && isSafeUrl(step.imageUrl)) {
+    const img = doc.createElement("img");
+    img.className = "veo-guide-image";
+    img.src = step.imageUrl;
+    img.alt = typeof step.title === "string" ? step.title : "";
+    nodes.push(img);
+  }
+  if (typeof step.title === "string" && step.title) {
+    const heading = doc.createElement("h2");
+    heading.className = "veo-guide-title";
+    heading.textContent = step.title;
+    nodes.push(heading);
+  }
+  if (typeof step.content === "string" && step.content) {
+    const paragraph = doc.createElement("p");
+    paragraph.className = "veo-guide-text";
+    paragraph.textContent = step.content;
+    nodes.push(paragraph);
+  }
+  return nodes;
+}
 function renderLegacyStep(container, step, doc, callbacks) {
   if (typeof step.imageUrl === "string" && step.imageUrl && isSafeUrl(step.imageUrl)) {
     const img = doc.createElement("img");
@@ -830,6 +857,18 @@ var GUIDE_STYLES = `
 .veo-guide-text em { font-style: italic; }
 .veo-guide-text u { text-decoration: underline; }
 .veo-guide-text s { text-decoration: line-through; }
+/*
+ * El \xDALTIMO bloque de contenido no deja su margin-bottom colgando: ese margen
+ * existe para separar del bloque SIGUIENTE, y sin siguiente se suma al padding
+ * de la tarjeta y parece un "hueco fantasma" (p.ej. quitar el bot\xF3n de un
+ * tooltip dejaba el espacio como si siguiera ah\xED). El pen\xFAltimo hijo es el
+ * \xFAltimo bloque real (el \u2715 de cerrar siempre va \xFAltimo y es absoluto). La
+ * mayor especificidad le gana a las reglas por clase, pero NO a un margen
+ * inline elegido expl\xEDcitamente por el autor (block.style.marginBottom).
+ */
+.veo-guide-content > :nth-last-child(2) {
+  margin-bottom: 0;
+}
 .veo-guide-actions {
   display: flex; gap: 8px; justify-content: var(--veo-actions-justify);
 }
@@ -996,10 +1035,22 @@ var GUIDE_STYLES = `
   padding: 3px 9px;
   white-space: nowrap;
 }
+.veo-badge--text {
+  color: var(--veo-primary);
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: underline dotted;
+  text-underline-offset: 3px;
+}
 .veo-badge--image img { display: block; border-radius: 4px; object-fit: cover; }
 /* El tooltip del badge usa strategy fixed (el host vive dentro del flujo del
-   cliente; un absoluto se recortar\xEDa con overflow de ancestros). */
-.veo-badge-tooltip { position: fixed; }
+   cliente; un absoluto se recortar\xEDa con overflow de ancestros). Su ancho es
+   personalizable v\xEDa var dedicada (--veo-width no sirve: el :host la define
+   en 420px siempre y pisar\xEDa el default de 300px de los tooltips). */
+.veo-badge-tooltip {
+  position: fixed;
+  max-width: var(--veo-badge-tip-width, 300px);
+}
 @keyframes veo-badge-pulse {
   0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--veo-primary) 45%, transparent); }
   70% { box-shadow: 0 0 0 7px transparent; }
@@ -1183,6 +1234,13 @@ var BadgeRenderer = class extends BaseRenderer {
     const { host, root } = this.createHost();
     const ownerDocument = root.ownerDocument ?? document;
     this.applyDesign(step.style);
+    const tipWidth = step.style?.width;
+    if (typeof tipWidth === "number" && Number.isFinite(tipWidth)) {
+      host.style.setProperty(
+        "--veo-badge-tip-width",
+        `${Math.min(720, Math.max(220, tipWidth))}px`
+      );
+    }
     this.trigger = step.style?.badgeTrigger === "click" ? "click" : "hover";
     const rawSide = step.style?.tooltipPlacement;
     this.side = rawSide === "bottom" || rawSide === "left" || rawSide === "right" ? rawSide : "top";
@@ -1209,18 +1267,11 @@ var BadgeRenderer = class extends BaseRenderer {
       onCtaClick: (action, target, meta) => {
         emit("cta_clicked", meta);
         if (action === "url" && target) window.open(target, "_blank", "noopener,noreferrer");
-        if (action === "dismiss") {
-          emit("dismissed");
-          context.onClose();
-          return;
-        }
         this.closeTooltip();
         if (action === "guide" && target) context.onOpenGuide?.(target);
       },
-      onDismiss: () => {
-        emit("dismissed");
-        context.onClose();
-      }
+      // La ✕ también cierra solo el tooltip (nunca el badge, nunca dismissed).
+      onDismiss: () => this.closeTooltip()
     });
     const content = buildTooltipContent(step);
     tooltip.appendChild(content);
@@ -1351,7 +1402,7 @@ function readBadgeConfig(step) {
   const raw = step.style?.badge;
   if (!raw || typeof raw !== "object") return { kind: "icon" };
   const b = raw;
-  const kind = b.kind === "dot" || b.kind === "pill" || b.kind === "image" || b.kind === "icon" ? b.kind : "icon";
+  const kind = b.kind === "dot" || b.kind === "pill" || b.kind === "text" || b.kind === "image" || b.kind === "icon" ? b.kind : "icon";
   return {
     kind,
     icon: typeof b.icon === "string" ? b.icon : null,
@@ -1382,6 +1433,12 @@ function buildBadgeElement(config, doc) {
       if (config.color) btn.style.background = config.color;
       break;
     }
+    case "text": {
+      btn.textContent = config.text?.slice(0, 32) || "Nuevo";
+      btn.style.fontSize = `${clamp2(Math.round(size * 0.7), 9, 28)}px`;
+      if (config.color) btn.style.color = config.color;
+      break;
+    }
     case "image": {
       if (config.imageUrl && isSafeUrl(config.imageUrl)) {
         const img = doc.createElement("img");
@@ -1429,24 +1486,8 @@ function buildWalkthroughStepContent(step, stepIndex, totalSteps, doc, callbacks
     progress.appendChild(dot);
   }
   container.appendChild(progress);
-  if (typeof step.imageUrl === "string" && step.imageUrl && isSafeUrl(step.imageUrl)) {
-    const img = doc.createElement("img");
-    img.className = "veo-guide-image";
-    img.src = step.imageUrl;
-    img.alt = typeof step.title === "string" ? step.title : "";
-    container.appendChild(img);
-  }
-  if (typeof step.title === "string" && step.title) {
-    const heading = doc.createElement("h2");
-    heading.className = "veo-guide-title";
-    heading.textContent = step.title;
-    container.appendChild(heading);
-  }
-  if (typeof step.content === "string" && step.content) {
-    const paragraph = doc.createElement("p");
-    paragraph.className = "veo-guide-text";
-    paragraph.textContent = step.content;
-    container.appendChild(paragraph);
+  for (const node of buildContentNodes(step, doc)) {
+    container.appendChild(node);
   }
   const actions = doc.createElement("div");
   actions.className = "veo-walkthrough-actions";