create-ailk 0.21.0 → 0.23.0

package/templates/apps/web/app/[locale]/courses/__tests__/page-renderer-migration.test.tsx

@@ -70,7 +70,7 @@ describe("courses/page — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(`
-     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Courses","description":"Structured learning paths for teams adopting AILK.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Course"}]}}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Courses</h1><p data-testid="courses-description" class="mt-block-tight text-lead">Structured learning paths for teams adopting AILK.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">## Courses
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Courses","description":"Structured learning paths for teams adopting AILK.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Course"}]}}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Courses</h1><p data-testid="courses-description" class="mt-block-tight text-lead">Structured learning paths for teams adopting AILK.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">## Courses
 
      Body content.</div></div></article></div></div></div></main>"
     `);
@@ -99,7 +99,7 @@ describe("courses/[slug] — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(`
-     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"AEO Fundamentals","description":"A practical course covering Layer 1 AEO rules.","mainEntity":{"@context":"https://schema.org","@type":"Course","name":"AEO Fundamentals","description":"A practical course covering Layer 1 AEO rules."}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Courses","item":"http://localhost:3000/en/courses"},{"@type":"ListItem","position":3,"name":"AEO Fundamentals","item":"http://localhost:3000/en/courses/aeo-fundamentals"}]}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">AEO Fundamentals</h1><p data-testid="course-description" class="mt-block-tight text-lead">A practical course covering Layer 1 AEO rules.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">## AEO Fundamentals
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"AEO Fundamentals","description":"A practical course covering Layer 1 AEO rules.","mainEntity":{"@context":"https://schema.org","@type":"Course","name":"AEO Fundamentals","description":"A practical course covering Layer 1 AEO rules."}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Courses","item":"http://localhost:3000/en/courses"},{"@type":"ListItem","position":3,"name":"AEO Fundamentals","item":"http://localhost:3000/en/courses/aeo-fundamentals"}]}]}</script><main id="main"><div class="mx-auto w-full max-w-container-xl px-4 md:px-6 lg:px-8 py-section"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">AEO Fundamentals</h1><p data-testid="course-description" class="mt-block-tight text-lead">A practical course covering Layer 1 AEO rules.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-rendered">## AEO Fundamentals
 
      Body content.</div></div></article></div></div></div></main>"
     `);

package/templates/apps/web/app/[locale]/events/__tests__/page-renderer-migration.test.tsx

@@ -100,7 +100,7 @@ describe("EventsPage — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(`
-     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Events","description":"Upcoming and past events.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Event"}]}}</script><main id="main"><div><h1>Events</h1><p data-testid="events-description" class="mt-block-tight text-lead">Upcoming and past events.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered">
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Events","description":"Upcoming and past events.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Event"}]}}</script><main id="main"><div><h1>Events</h1><p data-testid="events-description" class="mt-block-tight text-lead">Upcoming and past events.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered">
      Body.</div></article></div></div></div></main>"
     `);
   });
@@ -134,7 +134,7 @@ describe("EventSlugPage — snapshot regression", () => {
     // This replaces the pre-migration hardcoded "event-description" testid
     // with the slug-derived "annual-summit-description". Intentional per spec.
     expect(container.innerHTML).toMatchInlineSnapshot(`
-     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Annual Summit","description":"Our annual developer summit.","mainEntity":{"@context":"https://schema.org","@type":"Event","name":"Annual Summit","description":"Our annual developer summit."}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Events","item":"http://localhost:3000/en/events"},{"@type":"ListItem","position":3,"name":"Annual Summit","item":"http://localhost:3000/en/events/annual-summit"}]}]}</script><main id="main"><div><h1>Annual Summit</h1><p data-testid="annual-summit-description" class="mt-block-tight text-lead">Our annual developer summit.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered">
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Annual Summit","description":"Our annual developer summit.","mainEntity":{"@context":"https://schema.org","@type":"Event","name":"Annual Summit","description":"Our annual developer summit."}},{"@context":"https://schema.org","@type":"BreadcrumbList","inLanguage":"en","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http://localhost:3000/en/"},{"@type":"ListItem","position":2,"name":"Events","item":"http://localhost:3000/en/events"},{"@type":"ListItem","position":3,"name":"Annual Summit","item":"http://localhost:3000/en/events/annual-summit"}]}]}</script><main id="main"><div><h1>Annual Summit</h1><p data-testid="annual-summit-description" class="mt-block-tight text-lead">Our annual developer summit.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle mt-block-loose"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered">
      Body.</div></article></div></div></div></main>"
     `);
   });

package/templates/apps/web/app/[locale]/flows/[slug]/FlowStepperClient.tsx

@@ -35,6 +35,35 @@
  * a `thankYou` block, so without this widening the callback would never be
  * supplied on a recommending flow at all.
  *
+ * Account link (#8771 D5): when the walk completes on an `invite` magnet (the
+ * step response's `next`), the client asks `accountInviteLinkAction` for the
+ * sign-in link with the email the visitor gave already filled in, then shows
+ * "Track this in your account" on `FlowStepper`'s own finished panel — or,
+ * for a flow with a `thankYou` block, hands the link to `/thanks/<slug>`
+ * through `sessionStorage` (`ailk:account-invite`). The email never enters a
+ * URL the walk navigates to (NFR1), and each link sits in a Session-Replay
+ * `data-sentry-block` element, since the scrub cannot reach a DOM `href`.
+ *
+ * The standard magnet's parts (#8840 D9): the consent registry is the
+ * platform default with the locale's `/terms` and `/privacy` links
+ * (`consentPoliciesFor`, the map every agreement surface uses); a `message`
+ * step is shown but not counted in "Step N of M"; `hiddenValues` and `header`
+ * pass through from the page. When the config carries an `ending`, it is the
+ * one ending: `onCompleted` is not passed (so neither `thankYou` nor a
+ * recommending flow's permalink runs), and on the completing response the
+ * client picks the outcome from the answers it accumulated
+ * (`selectFlowEndingOutcome`) — a screen in the stepper's finished card,
+ * `{name}` filled from the walk, or a redirect to a site path. Every
+ * destination is re-checked against `flowSitePathSchema` before it renders or
+ * navigates (the served config is not re-parsed, SEC-8840-H).
+ *
+ * The deliverable (#8848 D8): a completing response's `deliverable` is drawn
+ * after the ending screen — the reader link for a file (its grant in `?g=`,
+ * inside a `data-sentry-block` element), an inline player for a video, a link
+ * for a page or an outside address — each target re-checked before it
+ * renders. A redirect ending never runs when the response carries one, and a
+ * gated file walk whose response has none says the link is in the email.
+ *
  * Locale validation before interpolation (AILK #4707, security review on
  * samhenry PR #163): the `[locale]` route segment is a Next.js dynamic
  * segment — the framework matches ANY string there, and next-intl's
@@ -49,33 +78,57 @@
  * bundle, the same reasoning `middleware.ts` already documents for the
  * Edge runtime) before it ever reaches the template literal.
  */
+import { Button, Heading, Link, localeHref, Text } from "@working-theory/ui";
+import { VideoEmbed } from "@working-theory/ui/blocks";
 import {
   FlowStepper,
   type FlowStepperMessages,
   type FlowStepSubmitPayload,
   type FlowStepSubmitResult,
 } from "@working-theory/ui-signal-collectors";
-import type { AeoScoreResult, FlowConfig, FlowState } from "@working-theory/validation";
+import type {
+  AeoScoreResult,
+  FlowConfig,
+  FlowEndingOutcome,
+  FlowState,
+  FlowStepDeliverable,
+} from "@working-theory/validation";
 import {
   deriveFlags,
   encodePermalink,
+  fillEndingName,
   flattenState,
+  flowHttpsUrlSchema,
+  flowSitePathSchema,
+  flowStepDeliverableSchema,
+  flowStepNextSchema,
   hiddenAnswers,
   PERMALINK_VERSION,
   pruneHiddenState,
+  resolveLocalizedString,
   resolveThankYouSlug,
+  selectFlowEndingOutcome,
+  SITE_CONSENT_CONFIG_DEFAULTS,
+  visitorNameOf,
 } from "@working-theory/validation";
 import { useRouter } from "next/navigation";
 import { useMessages, useTranslations } from "next-intl";
-import type { ReactElement } from "react";
-import { useRef } from "react";
+import type { ReactElement, ReactNode } from "react";
+import { useRef, useState } from "react";
+
+import { consentPoliciesFor } from "../../../../lib/consent-policies";
 
+import { accountInviteLinkAction } from "./account-invite.actions";
 import { submitFlowStepAction } from "./flow.actions";
 
 interface Props {
   config: FlowConfig;
   locale: string;
   slug: string;
+  /** #8840 D9 — page-supplied `hidden` field values (a posting's slug). */
+  hiddenValues?: Readonly<Record<string, string>>;
+  /** #8840 D9 — the walk's back arrow, above the step. */
+  header?: ReactNode;
 }
 
 const DEFAULT_LOCALE = "en";
@@ -88,6 +141,46 @@ function resolveSafeLocale(candidate: string): string {
   return ENABLED_LOCALES.includes(candidate) ? candidate : DEFAULT_LOCALE;
 }
 
+/** The `/thanks` hand-off key (#8771 D5) — read once by `AccountInviteLink`. */
+const ACCOUNT_INVITE_STORAGE_KEY = "ailk:account-invite";
+
+/**
+ * #8771 D5 — the email the engine will land as the lead's: the first
+ * `mapsTo: "email"` field of the submitted `field` step that holds a
+ * non-empty string. Mirrors `extractMappedEmail` (a later step wins).
+ */
+function mappedEmailOf(
+  config: FlowConfig,
+  payload: FlowStepSubmitPayload,
+): string | undefined {
+  const step = config.steps.find((s) => s.key === payload.stepKey);
+  if (step?.type !== "field") return undefined;
+  for (const field of step.fields) {
+    if (field.mapsTo !== "email") continue;
+    const value = payload.values[field.name];
+    if (typeof value === "string" && value.trim() !== "") return value.trim();
+  }
+  return undefined;
+}
+
+/**
+ * #8848 D8 — the completing response's `deliverable`, each target re-checked:
+ * a video whose `src` is refused is nothing, a refused `poster` is dropped;
+ * every other kind must parse whole.
+ */
+function safeDeliverable(raw: unknown): FlowStepDeliverable | undefined {
+  if (typeof raw !== "object" || raw === null) return undefined;
+  const video = raw as { kind?: unknown; src?: unknown; poster?: unknown };
+  if (video.kind === "video") {
+    const src = flowHttpsUrlSchema.safeParse(video.src);
+    if (!src.success) return undefined;
+    const poster = flowHttpsUrlSchema.safeParse(video.poster);
+    return { kind: "video", src: src.data, ...(poster.success ? { poster: poster.data } : {}) };
+  }
+  const parsed = flowStepDeliverableSchema.safeParse(raw);
+  return parsed.success ? parsed.data : undefined;
+}
+
 /**
  * D7 (#4770) — every question `name` contributed by a `segmentation`-typed
  * step. This is the allowlist the encoded permalink is filtered to: a
@@ -106,10 +199,23 @@ function segmentationQuestionNames(config: FlowConfig): Set<string> {
   return names;
 }
 
+/**
+ * #8840 D9 — the answers the ending is chosen from, assembled as the
+ * permalink path assembles them: the visible steps' answers flattened, then
+ * the hidden segmentation steps' `whenHidden` answers.
+ */
+function walkAnswers(config: FlowConfig, state: FlowState): Record<string, unknown> {
+  const flags = deriveFlags(config, state);
+  const flat = flattenState(pruneHiddenState(config, state, flags));
+  return Object.assign(flat, hiddenAnswers(config, state, flags));
+}
+
 export function FlowStepperClient({
   config,
   locale,
   slug,
+  hiddenValues,
+  header,
 }: Props): ReactElement {
   const t = useTranslations("flow");
   const router = useRouter();
@@ -130,6 +236,20 @@ export function FlowStepperClient({
   // recommending completion can hand the walk's session to the results page
   // via `sessionStorage` (never the URL — the permalink stays answers-only).
   const lastSessionIdRef = useRef<string | undefined>(undefined);
+  // #8771 D5 — the email the walk has landed, and the account link built from
+  // it at completion on an `invite` magnet. The ref carries the link to
+  // `handleCompleted`; the state draws it on the finished panel.
+  const emailRef = useRef<string | undefined>(undefined);
+  const inviteHrefRef = useRef<string | null>(null);
+  const [inviteHref, setInviteHref] = useState<string | null>(null);
+  const tContact = useTranslations("contact");
+  // #8840 D9 — a config with an `ending` ends on it, never on `thankYou` or
+  // the permalink; the chosen screen is drawn in the finished card.
+  const endingWins = config.ending !== undefined;
+  const [endingContent, setEndingContent] = useState<ReactNode | undefined>(undefined);
+  // #8848 D8 — the deliverable's action, drawn after the ending screen.
+  const tReports = useTranslations("reports");
+  const [deliverableContent, setDeliverableContent] = useState<ReactNode | undefined>(undefined);
 
   async function handleSubmitStep(
     payload: FlowStepSubmitPayload,
@@ -141,12 +261,165 @@ export function FlowStepperClient({
         [payload.stepKey]: payload.values,
       };
       lastSessionIdRef.current = result.response.sessionId;
+      emailRef.current = mappedEmailOf(config, payload) ?? emailRef.current;
+      if (result.response.completed) {
+        await resolveInviteLink(result.response);
+        const delivered = showDeliverable((result.response as { deliverable?: unknown }).deliverable);
+        if (endingWins) showEnding(delivered);
+      }
     } else if (result.kind === "step_conflict") {
       answersRef.current = {};
+      emailRef.current = undefined;
     }
     return result;
   }
 
+  // #8771 D5 — on an `invite` completion with a landed email, ask the server
+  // for the prefilled sign-in link. A rejected or null answer gives no link.
+  async function resolveInviteLink(response: unknown): Promise<void> {
+    inviteHrefRef.current = null;
+    setInviteHref(null);
+    const next = flowStepNextSchema.safeParse(
+      (response as { next?: unknown }).next,
+    );
+    const email = emailRef.current;
+    if (!next.success || email === undefined || isRecommending) return;
+    try {
+      const href = await accountInviteLinkAction(email);
+      inviteHrefRef.current = href;
+      setInviteHref(href);
+    } catch {
+      // No link — the walk still completes.
+    }
+  }
+
+  // #8848 D8 — draw the response's deliverable (true when there is one), or,
+  // for a gated file walk that minted no grant, the by-email line.
+  function showDeliverable(raw: unknown): boolean {
+    const deliverable = safeDeliverable(raw);
+    if (deliverable !== undefined) {
+      setDeliverableContent(deliverableAction(deliverable));
+      return true;
+    }
+    const block = config.deliverable;
+    setDeliverableContent(
+      raw === undefined && block?.kind === "file" && block.gated ? (
+        <Text className="mt-block-tight" data-testid="flow-deliverable-by-email">
+          {tReports("fileByEmail")}
+        </Text>
+      ) : undefined,
+    );
+    return false;
+  }
+
+  function deliverableAction(deliverable: FlowStepDeliverable): ReactNode {
+    const pick = (value: Record<string, string> | undefined): string | undefined =>
+      value === undefined ? undefined : resolveLocalizedString(value, locale, config.defaultLocale);
+    const label = pick(config.deliverable?.cta);
+    if (deliverable.kind === "video") {
+      return (
+        <div className="mt-block-loose" data-testid="flow-deliverable-video">
+          <VideoEmbed
+            sources={[{ src: deliverable.src }]}
+            {...(deliverable.poster !== undefined ? { poster: deliverable.poster } : {})}
+            label={pick(config.deliverable?.title) ?? tReports("openFile")}
+          />
+        </div>
+      );
+    }
+    const href =
+      deliverable.kind === "file"
+        ? localeHref(locale, `/reports/${slug}?g=${encodeURIComponent(deliverable.grantId)}`)
+        : deliverable.kind === "page"
+          ? localeHref(locale, deliverable.href)
+          : deliverable.href;
+    const fallback = deliverable.kind === "external" ? tReports("openExternal") : tReports("openFile");
+    const link = (
+      <Button asChild variant="default" className="min-h-11">
+        <Link
+          href={href}
+          variant="bare"
+          {...(deliverable.kind === "external" ? { external: true } : {})}
+          data-testid="flow-deliverable-action"
+        >
+          {label ?? fallback}
+        </Link>
+      </Button>
+    );
+    // Session Replay records `href`s; the file's carries a bearer grant.
+    return deliverable.kind === "file" ? (
+      <div data-sentry-block className="mt-block-loose flex justify-center">
+        {link}
+      </div>
+    ) : (
+      <div className="mt-block-loose flex justify-center">{link}</div>
+    );
+  }
+
+  // #8840 D9 — the ending for the walk's answers: a redirect to a site path,
+  // else a screen; a destination the schema refuses is never rendered or
+  // pushed (a refused redirect falls back to a screen `default`, else to the
+  // stepper's own finished panel). #8848 D8 — with a deliverable in hand a
+  // redirect never runs, so the deliverable is never lost to a navigation.
+  function showEnding(delivered = false): void {
+    const answers = walkAnswers(config, answersRef.current);
+    const segmentationNames = segmentationQuestionNames(config);
+    const choices: Record<string, string | string[]> = {};
+    for (const [name, value] of Object.entries(answers)) {
+      if (segmentationNames.has(name) && (typeof value === "string" || Array.isArray(value))) {
+        choices[name] = value as string | string[];
+      }
+    }
+    const outcome = selectFlowEndingOutcome(config, choices);
+    if (outcome === undefined) return;
+    if (outcome.kind === "redirect") {
+      if (!delivered && flowSitePathSchema.safeParse(outcome.href).success) {
+        setEndingContent(<></>);
+        router.push(`/${resolveSafeLocale(locale)}${outcome.href}`);
+        return;
+      }
+      const fallback = config.ending?.default;
+      if (fallback?.kind === "screen") setEndingContent(endingScreen(fallback, answers));
+      return;
+    }
+    setEndingContent(endingScreen(outcome, answers));
+  }
+
+  function endingScreen(
+    outcome: Extract<FlowEndingOutcome, { kind: "screen" }>,
+    answers: Record<string, unknown>,
+  ): ReactNode {
+    const name = visitorNameOf(config, answers);
+    const text = (value: Record<string, string>) =>
+      fillEndingName(resolveLocalizedString(value, locale, config.defaultLocale), name);
+    const ctas = (outcome.ctas ?? []).filter(
+      (cta) => flowSitePathSchema.safeParse(cta.href).success,
+    );
+    return (
+      <div data-testid="flow-ending">
+        <Heading level={2}>{text(outcome.headline)}</Heading>
+        {outcome.body !== undefined ? (
+          <Text className="mt-block-tight">{text(outcome.body)}</Text>
+        ) : null}
+        {ctas.length > 0 ? (
+          <div className="mt-block-loose flex flex-wrap justify-center gap-4">
+            {ctas.map((cta) => (
+              <Button key={cta.href} asChild variant="default" className="min-h-11">
+                <Link
+                  href={localeHref(locale, cta.href)}
+                  variant="bare"
+                  data-testid="flow-ending-cta"
+                >
+                  {text(cta.label)}
+                </Link>
+              </Button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
   // #4663 D11 — `aeoScore` passes through untouched: this repo's segment
   // redirect is unchanged; C2's results page (on samhenry) is the consumer
   // of the score.
@@ -209,6 +482,26 @@ export function FlowStepperClient({
 
     if (!thankYou) return;
     const thankYouSlug = resolveThankYouSlug(thankYou, result.segment);
+    // #8771 D5 — hand the link to /thanks through the per-tab sessionStorage,
+    // never the URL; with no link, clear an earlier walk's so it never shows
+    // on this page. A storage that throws gives no link.
+    if (typeof window !== "undefined") {
+      try {
+        if (inviteHrefRef.current !== null) {
+          window.sessionStorage.setItem(
+            ACCOUNT_INVITE_STORAGE_KEY,
+            JSON.stringify({
+              thanks: thankYouSlug,
+              href: inviteHrefRef.current,
+            }),
+          );
+        } else {
+          window.sessionStorage.removeItem(ACCOUNT_INVITE_STORAGE_KEY);
+        }
+      } catch {
+        // No hand-off.
+      }
+    }
     router.push(`/${resolveSafeLocale(locale)}/thanks/${thankYouSlug}`);
   }
 
@@ -252,15 +545,59 @@ export function FlowStepperClient({
     selectAllThatApply: t("selectAllThatApply"),
   };
 
+  // #8771 D5 — the link goes INSIDE FlowStepper's own finished card (a flow
+  // with a `thankYou` block navigates away instead, so it never shows there).
+  // Session Replay records the DOM, so the link (it carries the email) is
+  // blocked from it; `Link` does not forward an undeclared data-* attribute.
+  const completedAction =
+    inviteHref !== null && (endingWins || thankYou === undefined) && !isRecommending ? (
+      <div data-sentry-block>
+        <Button asChild variant="outline" className="mt-4 min-h-11">
+          <Link
+            href={inviteHref}
+            variant="bare"
+            data-testid="flow-account-invite"
+          >
+            {tContact("trackInAccount")}
+          </Link>
+        </Button>
+      </div>
+    ) : undefined;
+
+  // #8848 D8 — the ending screen, then the deliverable; with no ending the
+  // stepper's own finished copy heads the action.
+  const completedContent =
+    deliverableContent !== undefined ? (
+      <>
+        {endingContent ?? (
+          <>
+            <Heading level={2}>{t("completedTitle")}</Heading>
+            <Text className="mt-block-tight">{t("completedBody")}</Text>
+          </>
+        )}
+        {deliverableContent}
+      </>
+    ) : (
+      endingContent
+    );
+
   return (
     <FlowStepper
       config={config}
       locale={locale}
       messages={messages}
       onSubmitStep={handleSubmitStep}
-      {...(thankYou !== undefined || isRecommending
+      {...(!endingWins && (thankYou !== undefined || isRecommending)
         ? { onCompleted: handleCompleted }
         : {})}
+      {...(completedAction !== undefined ? { completedAction } : {})}
+      // #8840 D9 — the locale's policy links, the input-step count, and the
+      // page's hidden values, header and ending.
+      consentConfig={{ ...SITE_CONSENT_CONFIG_DEFAULTS, policies: consentPoliciesFor(locale) }}
+      uncountedStepKeys={config.steps.filter((step) => step.type === "message").map((step) => step.key)}
+      {...(hiddenValues !== undefined ? { hiddenValues } : {})}
+      {...(header !== undefined ? { header } : {})}
+      {...(completedContent !== undefined ? { completedContent } : {})}
     />
   );
 }

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/FlowStepperClient.count.test.tsx

@@ -0,0 +1,43 @@
+// oss: false
+/**
+ * #8840 D9, AC-3 — unmocked: with the real FlowStepper, a walk of three input
+ * steps and a closing message reads "Step 1 of 3" — the closing message is
+ * shown but not counted.
+ */
+import { render, screen } from "@testing-library/react";
+import type { FlowConfig } from "@working-theory/validation";
+
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ push: jest.fn() }),
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string, values?: Record<string, unknown>) =>
+    key === "progress" ? `Step ${String(values?.["current"])} of ${String(values?.["total"])}` : key,
+  useMessages: () => ({}),
+}));
+
+// eslint-disable-next-line no-restricted-syntax -- the boundary under test is the client wiring, not the actions
+jest.mock("../flow.actions", () => ({ submitFlowStepAction: jest.fn() }));
+// eslint-disable-next-line no-restricted-syntax -- see above
+jest.mock("../account-invite.actions", () => ({ accountInviteLinkAction: jest.fn() }));
+
+import { FlowStepperClient } from "../FlowStepperClient";
+
+const en = (s: string) => ({ en: s });
+const field = (key: string) => ({
+  key,
+  type: "field" as const,
+  copy: { title: en(key) },
+  fields: [{ name: key, inputType: "text" as const, copy: { label: en(key) } }],
+});
+
+it("counts the three input steps and not the closing message", () => {
+  const config = {
+    slug: "three",
+    defaultLocale: "en",
+    steps: [field("one"), field("two"), field("three"), { key: "bye", type: "message", copy: { title: en("Bye") } }],
+  } as FlowConfig;
+  render(<FlowStepperClient config={config} locale="en" slug="three" />);
+  expect(screen.getByTestId("flow-stepper-progress-label").textContent).toBe("Step 1 of 3");
+});