veo-sdk 0.6.1 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/builder-PPLIAUCM.mjs +5 -0
  2. package/dist/{builder-BKPMANUB.mjs.map → builder-PPLIAUCM.mjs.map} +1 -1
  3. package/dist/builder.cjs +641 -105
  4. package/dist/builder.cjs.map +1 -1
  5. package/dist/builder.d.cts +78 -8
  6. package/dist/builder.d.ts +78 -8
  7. package/dist/builder.mjs +4 -4
  8. package/dist/{chunk-GVPAJFNW.mjs → chunk-3JEAPZ6A.mjs} +3 -3
  9. package/dist/{chunk-GVPAJFNW.mjs.map → chunk-3JEAPZ6A.mjs.map} +1 -1
  10. package/dist/{chunk-VWF4UHUU.mjs → chunk-DU6I4ZU2.mjs} +284 -15
  11. package/dist/chunk-DU6I4ZU2.mjs.map +1 -0
  12. package/dist/{chunk-NGP7IJVE.mjs → chunk-SZCIXA5X.mjs} +357 -82
  13. package/dist/chunk-SZCIXA5X.mjs.map +1 -0
  14. package/dist/detect-theme-X4K3TLUL.mjs +446 -0
  15. package/dist/detect-theme-X4K3TLUL.mjs.map +1 -0
  16. package/dist/{guide-preview-DylsEhrg.d.cts → guide-preview-DEFhfA4o.d.cts} +115 -0
  17. package/dist/{guide-preview-DylsEhrg.d.ts → guide-preview-DEFhfA4o.d.ts} +115 -0
  18. package/dist/index.cjs +1515 -56
  19. package/dist/index.cjs.map +1 -1
  20. package/dist/index.d.cts +18 -1
  21. package/dist/index.d.ts +18 -1
  22. package/dist/index.mjs +442 -17
  23. package/dist/index.mjs.map +1 -1
  24. package/dist/veo-builder.js +132 -25
  25. package/dist/veo-builder.js.map +1 -1
  26. package/dist/veo-guides.js +84 -12
  27. package/dist/veo-guides.js.map +1 -1
  28. package/dist/veo-theme.js +2 -0
  29. package/dist/veo-theme.js.map +1 -0
  30. package/dist/veo.js +2 -2
  31. package/dist/veo.js.map +1 -1
  32. package/package.json +2 -2
  33. package/dist/builder-BKPMANUB.mjs +0 -5
  34. package/dist/chunk-NGP7IJVE.mjs.map +0 -1
  35. package/dist/chunk-VWF4UHUU.mjs.map +0 -1
@@ -668,6 +668,10 @@ var TEXT_PRESETS = {
668
668
  small: { size: 12, weight: 400, lineHeight: 1.5 }
669
669
  };
670
670
  function applyBlockStyle(el, style, kind) {
671
+ if (kind === "text") {
672
+ const explicit = style && typeof style === "object" ? style.preset : void 0;
673
+ el.dataset.veoPreset = typeof explicit === "string" ? explicit : el.classList.contains("veo-guide-title") ? "title" : "paragraph";
674
+ }
671
675
  if (!style || typeof style !== "object") return;
672
676
  const s = style;
673
677
  if (kind === "image" && s.bleed === true) {
@@ -684,8 +688,9 @@ function applyBlockStyle(el, style, kind) {
684
688
  if (kind === "text" && typeof s.preset === "string" && s.preset in TEXT_PRESETS) {
685
689
  const preset = TEXT_PRESETS[s.preset];
686
690
  if (preset) {
687
- el.style.fontSize = `${preset.size}px`;
688
- el.style.fontWeight = String(preset.weight);
691
+ const token = s.preset === "small" ? null : `--veo-t-${s.preset}`;
692
+ el.style.fontSize = token ? `var(${token}-size, ${preset.size}px)` : `${preset.size}px`;
693
+ el.style.fontWeight = token ? `var(${token}-weight, ${preset.weight})` : String(preset.weight);
689
694
  el.style.lineHeight = String(preset.lineHeight);
690
695
  }
691
696
  }
@@ -1363,20 +1368,92 @@ var GUIDE_STYLES = `
1363
1368
  .veo-guide-actions {
1364
1369
  display: flex; gap: 8px; justify-content: var(--veo-actions-justify);
1365
1370
  }
1371
+ /* Tema del workspace (design system): cada preset de texto toma sus tokens de
1372
+ las variables que publica \`applyThemeVars\` en la tarjeta. Las reglas solo
1373
+ existen bajo .veo-card--themed; los estilos inline del bloque las pisan. El
1374
+ \`*\` cubre el rich text (la regla global de fuente aplica a cada hijo). */
1375
+ .veo-card--themed [data-veo-preset="title"] {
1376
+ color: var(--veo-t-title-color); font-size: var(--veo-t-title-size);
1377
+ font-weight: var(--veo-t-title-weight); text-align: var(--veo-t-title-align);
1378
+ }
1379
+ .veo-card--themed [data-veo-preset="subtitle"] {
1380
+ color: var(--veo-t-subtitle-color); font-size: var(--veo-t-subtitle-size);
1381
+ font-weight: var(--veo-t-subtitle-weight); text-align: var(--veo-t-subtitle-align);
1382
+ }
1383
+ .veo-card--themed [data-veo-preset="paragraph"] {
1384
+ color: var(--veo-t-paragraph-color); font-size: var(--veo-t-paragraph-size);
1385
+ font-weight: var(--veo-t-paragraph-weight); text-align: var(--veo-t-paragraph-align);
1386
+ }
1387
+ .veo-card--themed [data-veo-preset="small"] { color: var(--veo-t-paragraph-color); }
1388
+ .veo-card--themed [data-veo-preset="title"], .veo-card--themed [data-veo-preset="title"] * {
1389
+ font-family: var(--veo-t-title-font, var(--veo-font));
1390
+ }
1391
+ .veo-card--themed [data-veo-preset="subtitle"], .veo-card--themed [data-veo-preset="subtitle"] * {
1392
+ font-family: var(--veo-t-subtitle-font, var(--veo-font));
1393
+ }
1394
+ .veo-card--themed [data-veo-preset="paragraph"], .veo-card--themed [data-veo-preset="paragraph"] *,
1395
+ .veo-card--themed [data-veo-preset="small"], .veo-card--themed [data-veo-preset="small"] * {
1396
+ font-family: var(--veo-t-paragraph-font, var(--veo-font));
1397
+ }
1398
+ /* Formulario del tema (pesta\xF1a Formulario). Dentro de un .veo-form los tokens
1399
+ de texto \`--veo-t-*\` se REDEFINEN con \xABTexto principal\xBB: la pregunta es un
1400
+ bloque con preset (su tama\xF1o va inline con esas variables), as\xED toma los del
1401
+ formulario y no los del modal. Etiquetas y opciones = \xABTexto secundario\xBB. */
1402
+ .veo-card--themed-form .veo-form {
1403
+ background: var(--veo-f-bg); padding: var(--veo-f-pad);
1404
+ border: var(--veo-f-border, none); border-radius: var(--veo-f-radius, 8px);
1405
+ box-shadow: var(--veo-f-shadow, none);
1406
+ --veo-t-title-color: var(--veo-f-primary-color); --veo-t-title-size: var(--veo-f-primary-size);
1407
+ --veo-t-title-weight: var(--veo-f-primary-weight); --veo-t-title-align: var(--veo-f-primary-align);
1408
+ --veo-t-title-font: var(--veo-f-primary-font);
1409
+ --veo-t-subtitle-color: var(--veo-f-primary-color); --veo-t-subtitle-size: var(--veo-f-primary-size);
1410
+ --veo-t-subtitle-weight: var(--veo-f-primary-weight); --veo-t-subtitle-align: var(--veo-f-primary-align);
1411
+ --veo-t-subtitle-font: var(--veo-f-primary-font);
1412
+ --veo-t-paragraph-color: var(--veo-f-primary-color); --veo-t-paragraph-size: var(--veo-f-primary-size);
1413
+ --veo-t-paragraph-weight: var(--veo-f-primary-weight); --veo-t-paragraph-align: var(--veo-f-primary-align);
1414
+ --veo-t-paragraph-font: var(--veo-f-primary-font);
1415
+ }
1416
+ .veo-card--themed-form .veo-form-label,
1417
+ .veo-card--themed-form .veo-form-option,
1418
+ .veo-card--themed-form .veo-scale-label {
1419
+ color: var(--veo-f-secondary-color); font-weight: var(--veo-f-secondary-weight);
1420
+ font-family: var(--veo-f-secondary-font, var(--veo-font));
1421
+ }
1422
+ .veo-card--themed-form .veo-form-label,
1423
+ .veo-card--themed-form .veo-form-option {
1424
+ font-size: var(--veo-f-secondary-size); text-align: var(--veo-f-secondary-align);
1425
+ }
1426
+ .veo-card--themed-form .veo-form-input:focus { outline-color: var(--veo-f-accent); }
1427
+ .veo-card--themed-form .veo-form-option input { accent-color: var(--veo-f-accent); }
1428
+ .veo-card--themed-form .veo-nps-btn:hover { border-color: var(--veo-scale-color, var(--veo-f-accent)); }
1429
+ .veo-card--themed-form .veo-scale-active.veo-nps-btn {
1430
+ background: var(--veo-scale-color, var(--veo-f-accent)); color: var(--veo-f-on-accent);
1431
+ border-color: var(--veo-scale-color, var(--veo-f-accent));
1432
+ }
1366
1433
  .veo-guide-cta {
1367
1434
  background: var(--veo-cta-bg, var(--veo-primary));
1368
- color: var(--veo-cta-color, #fff); border: none;
1369
- padding: 9px 18px; border-radius: var(--veo-cta-radius, 8px);
1370
- font-size: var(--veo-cta-size, 14px); font-weight: 500; cursor: pointer;
1435
+ color: var(--veo-cta-color, #fff); border: var(--veo-cta-border, none);
1436
+ padding: var(--veo-cta-pad, 9px 18px); border-radius: var(--veo-cta-radius, 8px);
1437
+ font-size: var(--veo-cta-size, 14px); font-weight: var(--veo-cta-weight, 500); cursor: pointer;
1371
1438
  transition: opacity 120ms ease;
1372
1439
  }
1373
1440
  .veo-guide-cta:hover { opacity: 0.9; }
1374
1441
  /* Presets del boton (editor): secundario = contorno; enlace = solo texto. */
1375
1442
  .veo-guide-cta--secondary {
1376
- background: transparent; color: var(--veo-primary);
1377
- border: 1px solid var(--veo-primary);
1443
+ background: var(--veo-cta2-bg, transparent); color: var(--veo-cta2-color, var(--veo-primary));
1444
+ border: var(--veo-cta2-border, 1px solid var(--veo-primary));
1445
+ padding: var(--veo-cta2-pad, var(--veo-cta-pad, 9px 18px));
1446
+ border-radius: var(--veo-cta2-radius, var(--veo-cta-radius, 8px));
1447
+ font-size: var(--veo-cta2-size, var(--veo-cta-size, 14px));
1448
+ font-weight: var(--veo-cta2-weight, var(--veo-cta-weight, 500));
1449
+ }
1450
+ .veo-guide-cta--link {
1451
+ background: transparent; color: var(--veo-cta3-color, var(--veo-primary));
1452
+ border: var(--veo-cta3-border, none); padding: var(--veo-cta3-pad, 0);
1453
+ border-radius: var(--veo-cta3-radius, 0);
1454
+ font-size: var(--veo-cta3-size, var(--veo-cta-size, 14px));
1455
+ font-weight: var(--veo-cta3-weight, var(--veo-cta-weight, 500));
1378
1456
  }
1379
- .veo-guide-cta--link { background: transparent; color: var(--veo-primary); padding: 0; }
1380
1457
  .veo-guide-cta--link:hover { opacity: 1; text-decoration: underline; }
1381
1458
  .veo-guide-cta:active { transform: translateY(1px); }
1382
1459
  .veo-guide-close {
@@ -1746,6 +1823,12 @@ var STATIC_SIDE = {
1746
1823
  left: "right",
1747
1824
  right: "left"
1748
1825
  };
1826
+ var OUTER_EDGES = {
1827
+ top: ["top", "left"],
1828
+ right: ["top", "right"],
1829
+ bottom: ["bottom", "right"],
1830
+ left: ["bottom", "left"]
1831
+ };
1749
1832
  function positionArrow(arrowEl, placement, data) {
1750
1833
  const side = STATIC_SIDE[placement.split("-")[0] ?? "bottom"] ?? "top";
1751
1834
  for (const prop of ["top", "bottom", "left", "right"]) {
@@ -1754,6 +1837,16 @@ function positionArrow(arrowEl, placement, data) {
1754
1837
  if (data?.x != null) arrowEl.style.setProperty("left", `${data.x}px`);
1755
1838
  if (data?.y != null) arrowEl.style.setProperty("top", `${data.y}px`);
1756
1839
  arrowEl.style.setProperty(side, "-6px");
1840
+ const width = arrowEl.dataset.veoBorder;
1841
+ if (width) {
1842
+ for (const edge of ["top", "right", "bottom", "left"]) {
1843
+ arrowEl.style.setProperty(
1844
+ `border-${edge}-width`,
1845
+ OUTER_EDGES[side].includes(edge) ? `${width}px` : "0"
1846
+ );
1847
+ }
1848
+ arrowEl.style.zIndex = "1";
1849
+ }
1757
1850
  }
1758
1851
 
1759
1852
  // src/plugins/guides/renderers/badge-renderer.ts
@@ -2901,6 +2994,168 @@ function buildScale(wrapper, doc, min, max, btnClass, symbol, opts = { labels: [
2901
2994
  return { wrapper, read: () => selected };
2902
2995
  }
2903
2996
 
2997
+ // src/plugins/guides/guide-theme.ts
2998
+ var WORKSPACE_THEME_ID = "workspace";
2999
+ var SHADOW_SPEC = {
3000
+ soft: { y: 4, blur: 14, alpha: 0.12 },
3001
+ medium: { y: 12, blur: 32, alpha: 0.22 },
3002
+ strong: { y: 24, blur: 64, alpha: 0.38 }
3003
+ };
3004
+ var JUSTIFY = {
3005
+ left: "flex-start",
3006
+ center: "center",
3007
+ right: "flex-end",
3008
+ distribute: "space-between"
3009
+ };
3010
+ function channels(hex) {
3011
+ const h = hex.replace("#", "");
3012
+ const full = h.length === 3 ? [...h].map((x) => x + x).join("") : h.slice(0, 6);
3013
+ const ch = (i) => Number.parseInt(full.slice(i, i + 2), 16) || 0;
3014
+ return [ch(0), ch(2), ch(4)];
3015
+ }
3016
+ function boxShadow(shadow, hex) {
3017
+ if (shadow === "none") return "none";
3018
+ const spec = SHADOW_SPEC[shadow];
3019
+ const [r, g, b] = channels(hex);
3020
+ return `0 ${spec.y}px ${spec.blur}px rgba(${r}, ${g}, ${b}, ${spec.alpha})`;
3021
+ }
3022
+ function readableOn(hex) {
3023
+ const [r, g, b] = channels(hex);
3024
+ return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.6 ? "#111827" : "#ffffff";
3025
+ }
3026
+ function themeModeFor(theme, design) {
3027
+ if (!theme || design.theme !== WORKSPACE_THEME_ID) return null;
3028
+ return (design.colorMode === "dark" ? theme.dark : theme.light) ?? null;
3029
+ }
3030
+ function themeRowJustify(mode, inline, preset) {
3031
+ const box = inline ? mode.embedded : mode.overlay;
3032
+ if (box.align === "distribute") return null;
3033
+ const button = preset === "secondary" ? mode.buttons?.secondary : preset === "link" ? mode.buttons?.tertiary : preset === void 0 || preset === null || preset === "primary" ? mode.buttons?.primary : void 0;
3034
+ return button ? JUSTIFY[button.align] ?? null : null;
3035
+ }
3036
+ function appFont(ref, doc) {
3037
+ const view = doc.defaultView;
3038
+ if (!view) return null;
3039
+ if (ref === "inherit") return view.getComputedStyle(doc.body).fontFamily || null;
3040
+ if (ref === "app-heading") {
3041
+ const heading = Array.from(doc.querySelectorAll("h1,h2,h3")).find(
3042
+ (el) => el.getClientRects().length > 0
3043
+ );
3044
+ return view.getComputedStyle(heading ?? doc.body).fontFamily || null;
3045
+ }
3046
+ return ref;
3047
+ }
3048
+ function themeContainerDesign(mode, inline, tooltip = false) {
3049
+ const box = inline ? mode.embedded : mode.overlay;
3050
+ const tip = tooltip ? mode.tooltip : void 0;
3051
+ const padding = tip?.padding ?? box.padding;
3052
+ const out = {
3053
+ // El embebido va en el flujo de la página: sin fondo propio.
3054
+ background: tip ? tip.background : inline ? "transparent" : box.background ?? mode.colors.background,
3055
+ color: mode.colors.text,
3056
+ paddingTop: padding.top,
3057
+ paddingRight: padding.right,
3058
+ paddingBottom: padding.bottom,
3059
+ paddingLeft: padding.left,
3060
+ borderColor: tip?.borderColor ?? box.borderColor,
3061
+ borderWidth: tip?.borderWidth ?? box.borderWidth,
3062
+ radius: tip?.borderRadius ?? box.borderRadius
3063
+ };
3064
+ const shadow = tip?.shadow ?? box.shadow;
3065
+ const shadowColor = tip?.shadowColor ?? box.shadowColor;
3066
+ if (shadow === "none") {
3067
+ Object.assign(out, { shadowColor: "transparent", shadowBlur: 0 });
3068
+ } else {
3069
+ const spec = SHADOW_SPEC[shadow];
3070
+ const [r, g, b] = channels(shadowColor);
3071
+ Object.assign(out, {
3072
+ shadowX: 0,
3073
+ shadowY: spec.y,
3074
+ shadowBlur: spec.blur,
3075
+ shadowSpread: 0,
3076
+ shadowColor: `rgba(${r}, ${g}, ${b}, ${spec.alpha})`
3077
+ });
3078
+ }
3079
+ return out;
3080
+ }
3081
+ function applyThemeVars(card, mode, inline, tooltip = false) {
3082
+ const doc = card.ownerDocument ?? document;
3083
+ const box = inline ? mode.embedded : mode.overlay;
3084
+ const set = (name, value) => {
3085
+ if (value) card.style.setProperty(name, value);
3086
+ };
3087
+ card.classList.add("veo-card--themed");
3088
+ set("--veo-primary", mode.colors.accent);
3089
+ set("--veo-cta-color", readableOn(mode.colors.accent));
3090
+ const primary = mode.buttons?.primary;
3091
+ const publish = (prefix, b) => {
3092
+ if (!b) return;
3093
+ const p = b.padding;
3094
+ set(`${prefix}-bg`, b.background);
3095
+ set(`${prefix}-color`, b.color);
3096
+ set(`${prefix}-pad`, `${p.top}px ${p.right}px ${p.bottom}px ${p.left}px`);
3097
+ set(`${prefix}-size`, `${b.fontSize}px`);
3098
+ set(`${prefix}-weight`, String(b.fontWeight));
3099
+ set(`${prefix}-radius`, `${b.borderRadius}px`);
3100
+ set(
3101
+ `${prefix}-border`,
3102
+ b.borderWidth > 0 ? `${b.borderWidth}px solid ${b.borderColor}` : "none"
3103
+ );
3104
+ };
3105
+ publish("--veo-cta", primary);
3106
+ publish("--veo-cta2", mode.buttons?.secondary);
3107
+ publish("--veo-cta3", mode.buttons?.tertiary);
3108
+ set("--veo-text", mode.colors.text);
3109
+ set("--veo-text-secondary", mode.colors.textMuted);
3110
+ set("--veo-font", appFont("inherit", doc));
3111
+ set(
3112
+ "--veo-actions-justify",
3113
+ box.align === "distribute" || !primary ? JUSTIFY[box.align] : JUSTIFY[primary.align]
3114
+ );
3115
+ const form = mode.form;
3116
+ if (form) {
3117
+ card.classList.add("veo-card--themed-form");
3118
+ const fp = form.padding;
3119
+ set("--veo-f-bg", form.background);
3120
+ set("--veo-f-accent", form.accent);
3121
+ set("--veo-f-on-accent", form.onAccent);
3122
+ set("--veo-f-pad", `${fp.top}px ${fp.right}px ${fp.bottom}px ${fp.left}px`);
3123
+ if (typeof form.borderWidth === "number" && form.borderColor) {
3124
+ set(
3125
+ "--veo-f-border",
3126
+ form.borderWidth > 0 ? `${form.borderWidth}px solid ${form.borderColor}` : "none"
3127
+ );
3128
+ }
3129
+ if (typeof form.borderRadius === "number") set("--veo-f-radius", `${form.borderRadius}px`);
3130
+ if (form.shadow && form.shadowColor) {
3131
+ set("--veo-f-shadow", boxShadow(form.shadow, form.shadowColor));
3132
+ }
3133
+ for (const [name, t] of [
3134
+ ["primary", form.text.primary],
3135
+ ["secondary", form.text.secondary]
3136
+ ]) {
3137
+ set(`--veo-f-${name}-color`, t.color);
3138
+ set(`--veo-f-${name}-size`, `${t.fontSize}px`);
3139
+ set(`--veo-f-${name}-weight`, String(t.fontWeight));
3140
+ set(`--veo-f-${name}-align`, t.align);
3141
+ set(`--veo-f-${name}-font`, appFont(t.fontFamily, doc));
3142
+ }
3143
+ }
3144
+ const tip = tooltip ? mode.tooltip?.text : void 0;
3145
+ const tokens = [
3146
+ ["title", tip?.primary ?? mode.text.title],
3147
+ ["subtitle", tip?.secondary ?? mode.text.subtitle],
3148
+ ["paragraph", tip?.secondary ?? mode.text.paragraph]
3149
+ ];
3150
+ for (const [name, t] of tokens) {
3151
+ set(`--veo-t-${name}-color`, t.color);
3152
+ set(`--veo-t-${name}-size`, `${t.fontSize}px`);
3153
+ set(`--veo-t-${name}-weight`, String(t.fontWeight));
3154
+ set(`--veo-t-${name}-align`, t.align);
3155
+ set(`--veo-t-${name}-font`, appFont(t.fontFamily, doc));
3156
+ }
3157
+ }
3158
+
2904
3159
  // src/plugins/guides/layout.ts
2905
3160
  function groupLayout(blocks) {
2906
3161
  const rows = /* @__PURE__ */ new Map();
@@ -3296,6 +3551,11 @@ function applyRowStyle(rowEl, style) {
3296
3551
  if (style.valign && ROW_VALIGN[style.valign]) s.alignItems = ROW_VALIGN[style.valign];
3297
3552
  }
3298
3553
  var CompositeRenderer = class extends BaseRenderer {
3554
+ constructor() {
3555
+ super(...arguments);
3556
+ /** Alineación de filas de botones según el tema del workspace (null = sin tema). */
3557
+ this.themeRowJustify = null;
3558
+ }
3299
3559
  async render(context) {
3300
3560
  const idx = context.nav?.stepIndex ?? 0;
3301
3561
  const step = context.guide.guideSteps[idx];
@@ -3326,7 +3586,13 @@ var CompositeRenderer = class extends BaseRenderer {
3326
3586
  if (typeof design.zIndex === "number") host.style.zIndex = String(design.zIndex);
3327
3587
  const card = doc.createElement("div");
3328
3588
  card.className = "veo-card";
3329
- applyCompositeDesign(card, design);
3589
+ const themeMode = themeModeFor(context.guide.theme, design);
3590
+ const inline = step.presentation === "inline";
3591
+ const tooltipLike = !inline && (badgeMode || step.position === "relative-to-element");
3592
+ if (themeMode) applyThemeVars(card, themeMode, inline, tooltipLike);
3593
+ this.themeRowJustify = themeMode ? (preset) => themeRowJustify(themeMode, inline, preset) : null;
3594
+ const cardDesign = themeMode ? { ...themeContainerDesign(themeMode, inline, tooltipLike), ...design } : design;
3595
+ applyCompositeDesign(card, cardDesign);
3330
3596
  if (typeof design.ariaLabel === "string" && design.ariaLabel.trim()) {
3331
3597
  card.setAttribute("role", "dialog");
3332
3598
  card.setAttribute("aria-label", design.ariaLabel.trim());
@@ -3397,7 +3663,7 @@ var CompositeRenderer = class extends BaseRenderer {
3397
3663
  });
3398
3664
  }
3399
3665
  card.appendChild(closeBtn);
3400
- reserveCloseSpace(card, blocks, closePos, design);
3666
+ reserveCloseSpace(card, blocks, closePos, cardDesign);
3401
3667
  }
3402
3668
  if (badgeMode && anchor) {
3403
3669
  closeTooltip = this.renderBadgeMode(
@@ -3410,7 +3676,8 @@ var CompositeRenderer = class extends BaseRenderer {
3410
3676
  doc,
3411
3677
  context,
3412
3678
  idx,
3413
- design
3679
+ // Con el tema ya fundido: la flecha del tooltip toma su fondo y borde.
3680
+ cardDesign
3414
3681
  );
3415
3682
  return;
3416
3683
  }
@@ -3433,7 +3700,7 @@ var CompositeRenderer = class extends BaseRenderer {
3433
3700
  }
3434
3701
  const wrapper = doc.createElement("div");
3435
3702
  wrapper.className = "veo-composite-anchored";
3436
- const caretEl = design.caret === false ? null : makeCaret(doc, design);
3703
+ const caretEl = design.caret === false ? null : makeCaret(doc, cardDesign);
3437
3704
  if (caretEl) wrapper.appendChild(caretEl);
3438
3705
  wrapper.appendChild(card);
3439
3706
  root.appendChild(wrapper);
@@ -3493,6 +3760,7 @@ var CompositeRenderer = class extends BaseRenderer {
3493
3760
  const row = doc.createElement("div");
3494
3761
  row.className = "veo-guide-actions";
3495
3762
  let rowAlign;
3763
+ const firstPreset = b.style?.preset;
3496
3764
  while (i < cell.length && cell[i]?.block.type === "button") {
3497
3765
  const { block: bb, index: bi } = cell[i];
3498
3766
  if (!rowAlign) {
@@ -3503,6 +3771,10 @@ var CompositeRenderer = class extends BaseRenderer {
3503
3771
  i++;
3504
3772
  }
3505
3773
  if (rowAlign) row.style.justifyContent = ROW_ALIGN[rowAlign] ?? "flex-end";
3774
+ else {
3775
+ const themed = this.themeRowJustify?.(firstPreset);
3776
+ if (themed) row.style.justifyContent = themed;
3777
+ }
3506
3778
  container.appendChild(row);
3507
3779
  continue;
3508
3780
  }
@@ -3915,6 +4187,7 @@ function makeCaret(doc, design) {
3915
4187
  if (typeof design.borderWidth === "number" && design.borderWidth > 0) {
3916
4188
  const bc = typeof design.borderColor === "string" ? design.borderColor : "#bbbbbb";
3917
4189
  s.border = `${design.borderWidth}px solid ${bc}`;
4190
+ caret.dataset.veoBorder = String(design.borderWidth);
3918
4191
  }
3919
4192
  return caret;
3920
4193
  }
@@ -4649,7 +4922,8 @@ function normalize(input) {
4649
4922
  guideSteps: input.guideSteps,
4650
4923
  activationRules,
4651
4924
  displayFrequency: "always",
4652
- displayPriority: 0
4925
+ displayPriority: 0,
4926
+ ...input.theme ? { theme: input.theme } : {}
4653
4927
  };
4654
4928
  }
4655
4929
  function createSingleStepRenderer(type) {
@@ -4687,72 +4961,6 @@ function safeDestroy(renderer) {
4687
4961
  }
4688
4962
  }
4689
4963
 
4690
- // src/plugins/guides/activation-devices.ts
4691
- var MOBILE_MAX_WIDTH = 767;
4692
- function isDeviceAllowed(devices, viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth) {
4693
- if (!devices || devices === "all") return true;
4694
- const mobile = viewportWidth <= MOBILE_MAX_WIDTH;
4695
- return devices === "mobile" ? mobile : !mobile;
4696
- }
4697
-
4698
- // src/plugins/guides/url-match.ts
4699
- function urlCandidates(pageUrl) {
4700
- const out = [pageUrl];
4701
- try {
4702
- const u = new URL(pageUrl);
4703
- out.push(`${u.pathname}${u.search}${u.hash}`);
4704
- if (u.hash.startsWith("#/")) out.push(u.hash.slice(1));
4705
- } catch {
4706
- }
4707
- return out;
4708
- }
4709
- function matchesUrl(matcher, pageUrl) {
4710
- const candidates = urlCandidates(pageUrl);
4711
- switch (matcher.type) {
4712
- case "exact":
4713
- return candidates.some((c) => c === matcher.pattern);
4714
- case "prefix":
4715
- return candidates.some((c) => c.startsWith(matcher.pattern));
4716
- case "regex":
4717
- try {
4718
- const re = new RegExp(matcher.pattern);
4719
- return candidates.some((c) => re.test(c));
4720
- } catch {
4721
- return false;
4722
- }
4723
- }
4724
- }
4725
- function stepMatchesPage(loc, pageUrl) {
4726
- if (!loc || loc.scope === "sitewide") return true;
4727
- if (loc.scope === "pages") {
4728
- const rules = loc.rules ?? [];
4729
- return rules.some((r) => pageRuleMatches(r, pageUrl));
4730
- }
4731
- if (!loc.pattern) return true;
4732
- return matchesUrl({ type: loc.matchType ?? "prefix", pattern: loc.pattern }, pageUrl);
4733
- }
4734
- function pageRuleMatches(rule, pageUrl) {
4735
- const pattern = rule.pattern.toLowerCase();
4736
- const candidates = urlCandidates(pageUrl).map((c) => c.toLowerCase());
4737
- switch (rule.type) {
4738
- case "exact":
4739
- return candidates.some((c) => c === pattern);
4740
- case "prefix":
4741
- return candidates.some((c) => c.startsWith(pattern));
4742
- case "contains":
4743
- return candidates.some((c) => c.includes(pattern));
4744
- case "regex":
4745
- try {
4746
- const re = new RegExp(rule.pattern, "i");
4747
- return candidates.some((c) => re.test(c));
4748
- } catch {
4749
- return false;
4750
- }
4751
- default:
4752
- return false;
4753
- }
4754
- }
4755
-
4756
4964
  // src/plugins/autocapture/constants.ts
4757
4965
  var DEFAULT_AUTOCAPTURE_CONFIG = {
4758
4966
  enabled: true,
@@ -4764,7 +4972,8 @@ var DEFAULT_AUTOCAPTURE_CONFIG = {
4764
4972
  throttleMs: 100,
4765
4973
  maxTextLength: 200,
4766
4974
  captureElementMetadata: true,
4767
- captureAncestors: 5
4975
+ captureAncestors: 5,
4976
+ captureClickQuality: true
4768
4977
  };
4769
4978
  var MAX_ANCESTORS = 10;
4770
4979
  var ALWAYS_BLOCK_SELECTORS = [
@@ -4886,6 +5095,72 @@ function buildSelectorPath(element, maxAncestors = 5) {
4886
5095
  return parts.join(" > ");
4887
5096
  }
4888
5097
 
5098
+ // src/plugins/guides/activation-devices.ts
5099
+ var MOBILE_MAX_WIDTH = 767;
5100
+ function isDeviceAllowed(devices, viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth) {
5101
+ if (!devices || devices === "all") return true;
5102
+ const mobile = viewportWidth <= MOBILE_MAX_WIDTH;
5103
+ return devices === "mobile" ? mobile : !mobile;
5104
+ }
5105
+
5106
+ // src/plugins/guides/url-match.ts
5107
+ function urlCandidates(pageUrl) {
5108
+ const out = [pageUrl];
5109
+ try {
5110
+ const u = new URL(pageUrl);
5111
+ out.push(`${u.pathname}${u.search}${u.hash}`);
5112
+ if (u.hash.startsWith("#/")) out.push(u.hash.slice(1));
5113
+ } catch {
5114
+ }
5115
+ return out;
5116
+ }
5117
+ function matchesUrl(matcher, pageUrl) {
5118
+ const candidates = urlCandidates(pageUrl);
5119
+ switch (matcher.type) {
5120
+ case "exact":
5121
+ return candidates.some((c) => c === matcher.pattern);
5122
+ case "prefix":
5123
+ return candidates.some((c) => c.startsWith(matcher.pattern));
5124
+ case "regex":
5125
+ try {
5126
+ const re = new RegExp(matcher.pattern);
5127
+ return candidates.some((c) => re.test(c));
5128
+ } catch {
5129
+ return false;
5130
+ }
5131
+ }
5132
+ }
5133
+ function stepMatchesPage(loc, pageUrl) {
5134
+ if (!loc || loc.scope === "sitewide") return true;
5135
+ if (loc.scope === "pages") {
5136
+ const rules = loc.rules ?? [];
5137
+ return rules.some((r) => pageRuleMatches(r, pageUrl));
5138
+ }
5139
+ if (!loc.pattern) return true;
5140
+ return matchesUrl({ type: loc.matchType ?? "prefix", pattern: loc.pattern }, pageUrl);
5141
+ }
5142
+ function pageRuleMatches(rule, pageUrl) {
5143
+ const pattern = rule.pattern.toLowerCase();
5144
+ const candidates = urlCandidates(pageUrl).map((c) => c.toLowerCase());
5145
+ switch (rule.type) {
5146
+ case "exact":
5147
+ return candidates.some((c) => c === pattern);
5148
+ case "prefix":
5149
+ return candidates.some((c) => c.startsWith(pattern));
5150
+ case "contains":
5151
+ return candidates.some((c) => c.includes(pattern));
5152
+ case "regex":
5153
+ try {
5154
+ const re = new RegExp(rule.pattern, "i");
5155
+ return candidates.some((c) => re.test(c));
5156
+ } catch {
5157
+ return false;
5158
+ }
5159
+ default:
5160
+ return false;
5161
+ }
5162
+ }
5163
+
4889
5164
  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, GUIDE_STYLES, InlineCustomRenderer, InlineFormRenderer, InlineRenderer, MAX_ANCESTORS, ModalRenderer, PRIORITY_ATTRIBUTES, RAW_BLOCK_ATTR, SENSITIVE_ATTRIBUTES, TooltipRenderer, WALKTHROUGH_ABANDONMENT_TIMEOUT_MS, WALKTHROUGH_STATE_KEY_PREFIX, WalkthroughRenderer, activationDelayMs, applyBlockStyle, buildContentBlock, buildSelectorPath, clearBuilderToken, clearPreviewToken, closeGuidePreview, filterHumanClasses, getPreviewToken, groupLayout, hasDocument, hasLocalStorage, hasNavigatorSendBeacon, hasWindow, isAutomaticActivation, isBuilderMode, isDeviceAllowed, isSnoozed, previewGuide, resolveBuilderContext, resolveBuilderToken, stepMatchesPage, uuidv7 };
4890
- //# sourceMappingURL=chunk-NGP7IJVE.mjs.map
4891
- //# sourceMappingURL=chunk-NGP7IJVE.mjs.map
5165
+ //# sourceMappingURL=chunk-SZCIXA5X.mjs.map
5166
+ //# sourceMappingURL=chunk-SZCIXA5X.mjs.map