veo-sdk 0.3.6 → 0.3.7

package/dist/{guide-preview-CO5ShtNf.d.cts → guide-preview-DewCTa-B.d.cts}

@@ -47,6 +47,25 @@ interface ActivationRules {
     eventName?: string;
     delayMs?: number;
 }
+/** Tipo de un bloque de contenido (para pasos con varios títulos/textos/botones). */
+type StepBlockType = 'title' | 'text' | 'button' | 'image';
+/**
+ * Un bloque de contenido dentro de un paso. Permite componer un paso con VARIOS
+ * títulos/textos/botones/imágenes en orden (no solo un título + un texto + un
+ * CTA). Si `step.blocks` está presente, el renderer lo usa; si no, cae a los
+ * campos escalares (`title`/`content`/`ctaText`/`imageUrl`) — retrocompatible.
+ */
+interface StepBlock {
+    type: StepBlockType;
+    /** title/text/button: el texto. */
+    text?: string | null;
+    /** image: la URL; button con acción `url`: el destino. */
+    url?: string | null;
+    /** button: qué hace al hacer click. */
+    action?: CtaAction | null;
+    /** Estilo por-bloque (align/color/fontSize/margin…). Se aplica inline. */
+    style?: Record<string, unknown> | null;
+}
 interface GuideStep {
     title: string;
     content: string;
@@ -57,9 +76,15 @@ interface GuideStep {
     /**
      * Free-form JSONB. Convención: si `ctaAction === 'url'`, la URL destino
      * se lee de `style.ctaUrl`. Otras keys que puede traer: `position`
-     * (`top` | `bottom` para banners), `theme`.
+     * (`top` | `bottom` para banners), `theme`, y `render` (tipo de presentación
+     * del paso dentro de un walkthrough heterogéneo: modal/banner/tooltip).
      */
     style?: Record<string, unknown> | null;
+    /**
+     * Bloques de contenido ordenados (varios títulos/textos/botones/imágenes).
+     * Si está presente y no vacío, tiene prioridad sobre los campos escalares.
+     */
+    blocks?: StepBlock[] | null;
     /** Solo guías `custom`: código a renderizar en un iframe sandbox + ubicación. */
     html?: string | null;
     css?: string | null;

package/dist/{guide-preview-CO5ShtNf.d.ts → guide-preview-DewCTa-B.d.ts}

@@ -47,6 +47,25 @@ interface ActivationRules {
     eventName?: string;
     delayMs?: number;
 }
+/** Tipo de un bloque de contenido (para pasos con varios títulos/textos/botones). */
+type StepBlockType = 'title' | 'text' | 'button' | 'image';
+/**
+ * Un bloque de contenido dentro de un paso. Permite componer un paso con VARIOS
+ * títulos/textos/botones/imágenes en orden (no solo un título + un texto + un
+ * CTA). Si `step.blocks` está presente, el renderer lo usa; si no, cae a los
+ * campos escalares (`title`/`content`/`ctaText`/`imageUrl`) — retrocompatible.
+ */
+interface StepBlock {
+    type: StepBlockType;
+    /** title/text/button: el texto. */
+    text?: string | null;
+    /** image: la URL; button con acción `url`: el destino. */
+    url?: string | null;
+    /** button: qué hace al hacer click. */
+    action?: CtaAction | null;
+    /** Estilo por-bloque (align/color/fontSize/margin…). Se aplica inline. */
+    style?: Record<string, unknown> | null;
+}
 interface GuideStep {
     title: string;
     content: string;
@@ -57,9 +76,15 @@ interface GuideStep {
     /**
      * Free-form JSONB. Convención: si `ctaAction === 'url'`, la URL destino
      * se lee de `style.ctaUrl`. Otras keys que puede traer: `position`
-     * (`top` | `bottom` para banners), `theme`.
+     * (`top` | `bottom` para banners), `theme`, y `render` (tipo de presentación
+     * del paso dentro de un walkthrough heterogéneo: modal/banner/tooltip).
      */
     style?: Record<string, unknown> | null;
+    /**
+     * Bloques de contenido ordenados (varios títulos/textos/botones/imágenes).
+     * Si está presente y no vacío, tiene prioridad sobre los campos escalares.
+     */
+    blocks?: StepBlock[] | null;
     /** Solo guías `custom`: código a renderizar en un iframe sandbox + ubicación. */
     html?: string | null;
     css?: string | null;

package/dist/index.cjs

@@ -378,6 +378,16 @@ var init_constants2 = __esm({
 function buildStepContent(step, doc, callbacks) {
   const container = doc.createElement("div");
   container.className = "veo-guide-content";
+  const blocks = normalizeBlocks(step);
+  if (blocks) {
+    renderBlocks(container, blocks, doc, callbacks);
+  } else {
+    renderLegacyStep(container, step, doc, callbacks);
+  }
+  container.appendChild(createCloseButton(doc, () => callbacks.onDismiss()));
+  return container;
+}
+function renderLegacyStep(container, step, doc, callbacks) {
   if (typeof step.imageUrl === "string" && step.imageUrl && isSafeUrl(step.imageUrl)) {
     const img = doc.createElement("img");
     img.className = "veo-guide-image";
@@ -412,8 +422,105 @@ function buildStepContent(step, doc, callbacks) {
     actions.appendChild(cta);
   }
   container.appendChild(actions);
-  container.appendChild(createCloseButton(doc, () => callbacks.onDismiss()));
-  return container;
+}
+function normalizeBlocks(step) {
+  if (!Array.isArray(step.blocks) || step.blocks.length === 0) return null;
+  const valid = step.blocks.filter((b) => {
+    if (!b || typeof b !== "object") return false;
+    if (b.type === "image") return typeof b.url === "string" && isSafeUrl(b.url);
+    return b.type === "title" || b.type === "text" || b.type === "button";
+  });
+  return valid.length > 0 ? valid : null;
+}
+function renderBlocks(container, blocks, doc, callbacks) {
+  let i = 0;
+  while (i < blocks.length) {
+    const block = blocks[i];
+    if (block?.type === "button") {
+      const actions = doc.createElement("div");
+      actions.className = "veo-guide-actions";
+      while (i < blocks.length && blocks[i]?.type === "button") {
+        const btnBlock = blocks[i];
+        actions.appendChild(buildButtonBlock(btnBlock, doc, callbacks));
+        i++;
+      }
+      container.appendChild(actions);
+      continue;
+    }
+    const node = buildContentBlock(block, doc);
+    if (node) container.appendChild(node);
+    i++;
+  }
+}
+function buildContentBlock(block, doc) {
+  switch (block.type) {
+    case "title": {
+      const el = doc.createElement("h2");
+      el.className = "veo-guide-title";
+      el.textContent = typeof block.text === "string" ? block.text : "";
+      applyBlockStyle(el, block.style, "text");
+      return el;
+    }
+    case "text": {
+      const el = doc.createElement("p");
+      el.className = "veo-guide-text";
+      el.textContent = typeof block.text === "string" ? block.text : "";
+      applyBlockStyle(el, block.style, "text");
+      return el;
+    }
+    case "image": {
+      if (typeof block.url !== "string" || !isSafeUrl(block.url)) return null;
+      const el = doc.createElement("img");
+      el.className = "veo-guide-image";
+      el.src = block.url;
+      el.alt = "";
+      applyBlockStyle(el, block.style, "image");
+      return el;
+    }
+    default:
+      return null;
+  }
+}
+function buildButtonBlock(block, doc, callbacks) {
+  const btn = doc.createElement("button");
+  btn.type = "button";
+  btn.className = "veo-guide-cta";
+  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 url = action === "url" && typeof block.url === "string" && isSafeUrl(block.url) ? block.url : void 0;
+    callbacks.onCtaClick(action, url);
+  });
+  return btn;
+}
+function clampNum(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+function applyBlockStyle(el, style, kind) {
+  if (!style || typeof style !== "object") return;
+  const s = style;
+  const align = typeof s.align === "string" ? s.align : null;
+  if (align && (align === "left" || align === "center" || align === "right")) {
+    if (kind === "text") el.style.textAlign = align;
+    else el.style.alignSelf = BLOCK_ALIGN_SELF[align];
+  }
+  if (kind !== "image" && typeof s.color === "string") el.style.color = s.color;
+  if (kind === "text" && typeof s.fontSize === "number" && Number.isFinite(s.fontSize)) {
+    el.style.fontSize = `${clampNum(s.fontSize, 8, 72)}px`;
+  }
+  if (kind === "image" && typeof s.width === "number" && Number.isFinite(s.width)) {
+    el.style.width = `${clampNum(s.width, 10, 100)}%`;
+  }
+  if (kind === "image" && typeof s.radius === "number" && Number.isFinite(s.radius)) {
+    el.style.borderRadius = `${clampNum(s.radius, 0, 48)}px`;
+  }
+  if (typeof s.marginTop === "number" && Number.isFinite(s.marginTop)) {
+    el.style.marginTop = `${clampNum(s.marginTop, 0, 64)}px`;
+  }
+  if (typeof s.marginBottom === "number" && Number.isFinite(s.marginBottom)) {
+    el.style.marginBottom = `${clampNum(s.marginBottom, 0, 64)}px`;
+  }
 }
 function createCloseButton(doc, onClose, className = "veo-guide-close") {
   const closeBtn = doc.createElement("button");
@@ -439,9 +546,92 @@ function readCtaUrl(step) {
   if (typeof candidate !== "string") return void 0;
   return isSafeUrl(candidate) ? candidate : void 0;
 }
+var BLOCK_ALIGN_SELF;
 var init_block_builder = __esm({
   "src/plugins/guides/block-builder.ts"() {
     init_constants2();
+    BLOCK_ALIGN_SELF = {
+      left: "flex-start",
+      center: "center",
+      right: "flex-end"
+    };
+  }
+});
+
+// src/plugins/guides/walkthrough-block-builder.ts
+function buildWalkthroughStepContent(step, stepIndex, totalSteps, doc, callbacks) {
+  const container = doc.createElement("div");
+  container.className = "veo-guide-content";
+  const counter = doc.createElement("div");
+  counter.className = "veo-walkthrough-counter";
+  counter.textContent = `Paso ${stepIndex + 1} de ${totalSteps}`;
+  container.appendChild(counter);
+  const progress = doc.createElement("div");
+  progress.className = "veo-walkthrough-progress";
+  for (let i = 0; i < totalSteps; i++) {
+    const dot = doc.createElement("span");
+    dot.className = "veo-walkthrough-progress-dot";
+    if (i < stepIndex) dot.classList.add("completed");
+    if (i === stepIndex) dot.classList.add("active");
+    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);
+  }
+  const actions = doc.createElement("div");
+  actions.className = "veo-walkthrough-actions";
+  const skipBtn = doc.createElement("button");
+  skipBtn.type = "button";
+  skipBtn.className = "veo-walkthrough-skip";
+  skipBtn.textContent = "Omitir";
+  skipBtn.addEventListener("click", () => callbacks.onSkip());
+  actions.appendChild(skipBtn);
+  const rightGroup = doc.createElement("div");
+  rightGroup.className = "veo-walkthrough-actions-right";
+  if (stepIndex > 0) {
+    const backBtn = doc.createElement("button");
+    backBtn.type = "button";
+    backBtn.className = "veo-walkthrough-btn-secondary";
+    backBtn.textContent = "Atr\xE1s";
+    backBtn.addEventListener("click", () => callbacks.onBack());
+    rightGroup.appendChild(backBtn);
+  }
+  const isLastStep = stepIndex === totalSteps - 1;
+  const primaryBtn = doc.createElement("button");
+  primaryBtn.type = "button";
+  primaryBtn.className = "veo-guide-cta";
+  const defaultLabel = isLastStep ? "Finalizar" : "Siguiente";
+  primaryBtn.textContent = typeof step.ctaText === "string" && step.ctaText ? step.ctaText : defaultLabel;
+  primaryBtn.addEventListener("click", () => {
+    if (isLastStep) callbacks.onComplete();
+    else callbacks.onNext();
+  });
+  rightGroup.appendChild(primaryBtn);
+  actions.appendChild(rightGroup);
+  container.appendChild(actions);
+  container.appendChild(createCloseButton(doc, () => callbacks.onSkip()));
+  return container;
+}
+var init_walkthrough_block_builder = __esm({
+  "src/plugins/guides/walkthrough-block-builder.ts"() {
+    init_block_builder();
   }
 });
 
@@ -455,6 +645,9 @@ function applyDesignVars(host, style) {
   if (typeof s.accentColor === "string" && COLOR_RE.test(s.accentColor.trim())) {
     host.style.setProperty("--veo-primary", s.accentColor.trim());
   }
+  if (typeof s.fontFamily === "string" && s.fontFamily.length <= 200 && !/[<>{}]/.test(s.fontFamily)) {
+    host.style.setProperty("--veo-font", s.fontFamily.trim());
+  }
   if (s.theme === "dark") {
     for (const [key, value] of Object.entries(DARK_THEME)) {
       host.style.setProperty(key, value);
@@ -596,7 +789,7 @@ var init_styles = __esm({
   --veo-actions-justify: flex-end;
   all: initial;
 }
-* { box-sizing: border-box; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
+* { box-sizing: border-box; font-family: var(--veo-font, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif); }
 
 .veo-modal-overlay {
   position: fixed; inset: 0;
@@ -939,10 +1132,12 @@ var BannerRenderer;
 var init_banner_renderer = __esm({
   "src/plugins/guides/renderers/banner-renderer.ts"() {
     init_block_builder();
+    init_walkthrough_block_builder();
     init_base_renderer();
     BannerRenderer = class extends BaseRenderer {
       render(context) {
-        const step = context.guide.guideSteps[0];
+        const idx = context.nav?.stepIndex ?? 0;
+        const step = context.guide.guideSteps[idx];
         if (!step) return;
         const { root } = this.createHost();
         this.applyDesign(step.style);
@@ -951,27 +1146,25 @@ var init_banner_renderer = __esm({
         const banner = ownerDocument.createElement("div");
         banner.className = `veo-banner veo-banner-${position}`;
         const dismiss = (action, ctaUrl) => {
-          context.onInteraction({
-            guideId: context.guide.guideId,
-            stepIndex: 0,
-            action
-          });
+          context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action });
           if (ctaUrl) window.open(ctaUrl, "_blank", "noopener,noreferrer");
           context.onClose();
         };
-        const content = buildStepContent(step, ownerDocument, {
-          onCtaClick: (action, url) => {
-            dismiss("cta_clicked", action === "url" ? url : void 0);
-          },
+        const content = context.nav ? buildWalkthroughStepContent(
+          step,
+          context.nav.stepIndex,
+          context.nav.totalSteps,
+          ownerDocument,
+          context.nav.callbacks
+        ) : buildStepContent(step, ownerDocument, {
+          onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
           onDismiss: () => dismiss("dismissed")
         });
         banner.appendChild(content);
         root.appendChild(banner);
-        context.onInteraction({
-          guideId: context.guide.guideId,
-          stepIndex: 0,
-          action: "shown"
-        });
+        if (!context.nav) {
+          context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
+        }
       }
     };
   }
@@ -1693,10 +1886,12 @@ var ModalRenderer;
 var init_modal_renderer = __esm({
   "src/plugins/guides/renderers/modal-renderer.ts"() {
     init_block_builder();
+    init_walkthrough_block_builder();
     init_base_renderer();
     ModalRenderer = class extends BaseRenderer {
       render(context) {
-        const step = context.guide.guideSteps[0];
+        const idx = context.nav?.stepIndex ?? 0;
+        const step = context.guide.guideSteps[idx];
         if (!step) return;
         const { root } = this.createHost();
         this.applyDesign(step.style);
@@ -1706,36 +1901,38 @@ var init_modal_renderer = __esm({
         const card = ownerDocument.createElement("div");
         card.className = "veo-modal-card";
         const dismiss = (action, ctaUrl) => {
-          context.onInteraction({
-            guideId: context.guide.guideId,
-            stepIndex: 0,
-            action
-          });
+          context.onInteraction({ guideId: context.guide.guideId, stepIndex: idx, action });
           if (ctaUrl) window.open(ctaUrl, "_blank", "noopener,noreferrer");
           context.onClose();
         };
-        const content = buildStepContent(step, ownerDocument, {
-          onCtaClick: (action, url) => {
-            dismiss("cta_clicked", action === "url" ? url : void 0);
-          },
+        const onBackdropOrEsc = () => {
+          if (context.nav) context.nav.callbacks.onSkip();
+          else dismiss("dismissed");
+        };
+        const content = context.nav ? buildWalkthroughStepContent(
+          step,
+          context.nav.stepIndex,
+          context.nav.totalSteps,
+          ownerDocument,
+          context.nav.callbacks
+        ) : buildStepContent(step, ownerDocument, {
+          onCtaClick: (action, url) => dismiss("cta_clicked", action === "url" ? url : void 0),
           onDismiss: () => dismiss("dismissed")
         });
         card.appendChild(content);
         overlay.appendChild(card);
         root.appendChild(overlay);
         overlay.addEventListener("click", (e) => {
-          if (e.target === overlay) dismiss("dismissed");
+          if (e.target === overlay) onBackdropOrEsc();
         });
         const onKey = (e) => {
-          if (e.key === "Escape") dismiss("dismissed");
+          if (e.key === "Escape") onBackdropOrEsc();
         };
         document.addEventListener("keydown", onKey);
         this.registerCleanup(() => document.removeEventListener("keydown", onKey));
-        context.onInteraction({
-          guideId: context.guide.guideId,
-          stepIndex: 0,
-          action: "shown"
-        });
+        if (!context.nav) {
+          context.onInteraction({ guideId: context.guide.guideId, stepIndex: 0, action: "shown" });
+        }
       }
     };
   }
@@ -1830,83 +2027,6 @@ var init_tooltip_renderer = __esm({
     };
   }
 });
-
-// src/plugins/guides/walkthrough-block-builder.ts
-function buildWalkthroughStepContent(step, stepIndex, totalSteps, doc, callbacks) {
-  const container = doc.createElement("div");
-  container.className = "veo-guide-content";
-  const counter = doc.createElement("div");
-  counter.className = "veo-walkthrough-counter";
-  counter.textContent = `Paso ${stepIndex + 1} de ${totalSteps}`;
-  container.appendChild(counter);
-  const progress = doc.createElement("div");
-  progress.className = "veo-walkthrough-progress";
-  for (let i = 0; i < totalSteps; i++) {
-    const dot = doc.createElement("span");
-    dot.className = "veo-walkthrough-progress-dot";
-    if (i < stepIndex) dot.classList.add("completed");
-    if (i === stepIndex) dot.classList.add("active");
-    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);
-  }
-  const actions = doc.createElement("div");
-  actions.className = "veo-walkthrough-actions";
-  const skipBtn = doc.createElement("button");
-  skipBtn.type = "button";
-  skipBtn.className = "veo-walkthrough-skip";
-  skipBtn.textContent = "Omitir";
-  skipBtn.addEventListener("click", () => callbacks.onSkip());
-  actions.appendChild(skipBtn);
-  const rightGroup = doc.createElement("div");
-  rightGroup.className = "veo-walkthrough-actions-right";
-  if (stepIndex > 0) {
-    const backBtn = doc.createElement("button");
-    backBtn.type = "button";
-    backBtn.className = "veo-walkthrough-btn-secondary";
-    backBtn.textContent = "Atr\xE1s";
-    backBtn.addEventListener("click", () => callbacks.onBack());
-    rightGroup.appendChild(backBtn);
-  }
-  const isLastStep = stepIndex === totalSteps - 1;
-  const primaryBtn = doc.createElement("button");
-  primaryBtn.type = "button";
-  primaryBtn.className = "veo-guide-cta";
-  const defaultLabel = isLastStep ? "Finalizar" : "Siguiente";
-  primaryBtn.textContent = typeof step.ctaText === "string" && step.ctaText ? step.ctaText : defaultLabel;
-  primaryBtn.addEventListener("click", () => {
-    if (isLastStep) callbacks.onComplete();
-    else callbacks.onNext();
-  });
-  rightGroup.appendChild(primaryBtn);
-  actions.appendChild(rightGroup);
-  container.appendChild(actions);
-  container.appendChild(createCloseButton(doc, () => callbacks.onSkip()));
-  return container;
-}
-var init_walkthrough_block_builder = __esm({
-  "src/plugins/guides/walkthrough-block-builder.ts"() {
-    init_block_builder();
-  }
-});
 var WalkthroughRenderer;
 var init_walkthrough_renderer = __esm({
   "src/plugins/guides/renderers/walkthrough-renderer.ts"() {
@@ -2039,6 +2159,7 @@ var init_guide_preview = __esm({
     GuidePreviewController = class {
       constructor() {
         this.singleStep = null;
+        /** Renderer del paso de walkthrough activo (walkthrough tooltip o modal/banner). */
         this.walkthrough = null;
         this.walkthroughGuide = null;
         this.walkthroughIndex = 0;
@@ -2111,7 +2232,6 @@ var init_guide_preview = __esm({
           safeDestroy(this.walkthrough);
           this.walkthrough = null;
         }
-        const renderer = new WalkthroughRenderer();
         const callbacks = {
           onNext: () => {
             const next = this.walkthroughIndex + 1;
@@ -2131,6 +2251,30 @@ var init_guide_preview = __esm({
           onSkip: () => this.close(),
           onComplete: () => this.close()
         };
+        const step = guide.guideSteps[index];
+        const render = step?.style?.render;
+        if (render === "modal" || render === "banner") {
+          const renderer2 = render === "modal" ? new ModalRenderer() : new BannerRenderer();
+          try {
+            renderer2.render({
+              guide,
+              onInteraction: () => {
+              },
+              onClose: () => this.close(),
+              nav: { stepIndex: index, totalSteps: guide.guideSteps.length, callbacks }
+            });
+          } catch {
+            safeDestroy(renderer2);
+            return false;
+          }
+          if (this.walkthroughGuide !== guide) {
+            safeDestroy(renderer2);
+            return false;
+          }
+          this.walkthrough = renderer2;
+          return true;
+        }
+        const renderer = new WalkthroughRenderer();
         let success = false;
         try {
           success = await renderer.render({ guide, currentStepIndex: index, callbacks });
@@ -4198,6 +4342,11 @@ var GuidesController = class {
      */
     this.activeByGuideId = /* @__PURE__ */ new Map();
     this.dispatched = /* @__PURE__ */ new Set();
+    /**
+     * Renderer del paso de walkthrough activo. Puede ser el `WalkthroughRenderer`
+     * (tooltip anclado) o un Modal/Banner con navegación (walkthrough heterogéneo);
+     * tipamos por `destroy()`, lo único que el controller necesita.
+     */
     this.activeWalkthroughRenderer = null;
     this.activeWalkthroughGuide = null;
     this.debug = config.debug === true;
@@ -4378,7 +4527,6 @@ var GuidesController = class {
       this.activeWalkthroughRenderer.destroy();
       this.activeWalkthroughRenderer = null;
     }
-    const renderer = new WalkthroughRenderer();
     this.activeWalkthroughGuide = guide;
     const callbacks = {
       onNext: () => this.handleWalkthroughNext(endUserId, sessionId, pageUrl),
@@ -4386,6 +4534,28 @@ var GuidesController = class {
       onSkip: () => this.handleWalkthroughSkip(endUserId, sessionId, pageUrl),
       onComplete: () => this.handleWalkthroughComplete(endUserId, sessionId, pageUrl)
     };
+    const step = guide.guideSteps[stepIndex];
+    const render = readStepRender(step);
+    if (render === "modal" || render === "banner") {
+      const renderer2 = render === "modal" ? new ModalRenderer() : new BannerRenderer();
+      try {
+        renderer2.render({
+          guide,
+          onInteraction: () => {
+          },
+          onClose: () => {
+          },
+          nav: { stepIndex, totalSteps: guide.guideSteps.length, callbacks }
+        });
+      } catch (err) {
+        if (this.debug) console.error("[veo] sequence renderer threw:", err);
+        this.tearDownWalkthrough();
+        return false;
+      }
+      this.activeWalkthroughRenderer = renderer2;
+      return true;
+    }
+    const renderer = new WalkthroughRenderer();
     let success = false;
     try {
       success = await renderer.render({ guide, currentStepIndex: stepIndex, callbacks });
@@ -4608,6 +4778,10 @@ function extractPath(url) {
     return "/";
   }
 }
+function readStepRender(step) {
+  const r = step?.style?.render;
+  return typeof r === "string" ? r : "walkthrough";
+}
 
 // src/plugins/guides/index.ts
 init_guide_preview();