create-ailk 0.6.1 → 0.7.0

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

@@ -50,7 +50,7 @@ describe("careers/page — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<main><h1 class="text-heading-1 font-display font-normal tracking-tighter text-fg hero-type-display">Careers</h1><p data-testid="section-empty-state">Career listings coming soon.</p></main>"`,
+      `"<main id="main"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Careers</h1><p data-testid="section-empty-state">Career listings coming soon.</p></main>"`,
     );
   });
 
@@ -71,7 +71,7 @@ describe("careers/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":"Careers at AILK","description":"Join the team building the AX-first platform.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"JobPosting"}]}}</script><main><h1>Careers at AILK</h1><p data-testid="careers-description">Join the team building the AX-first platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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">mdx-body-content</div></article></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Careers at AILK","description":"Join the team building the AX-first platform.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"JobPosting"}]}}</script><main id="main"><h1>Careers at AILK</h1><p data-testid="careers-description">Join the team building the AX-first platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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">mdx-body-content</div></article></div></div></main>"`,
     );
   });
 });
@@ -96,7 +96,7 @@ describe("careers/[slug]/page — 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":"Senior Engineer","description":"Build the AILK platform.","mainEntity":{"@context":"https://schema.org","@type":"JobPosting","title":"Senior Engineer","description":"Build the AILK platform."}},{"@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":"Careers","item":"http://localhost:3000/en/careers"},{"@type":"ListItem","position":3,"name":"Senior Engineer","item":"http://localhost:3000/en/careers/senior-engineer"}]}]}</script><main><h1>Senior Engineer</h1><p data-testid="senior-engineer-description">Build the AILK platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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">mdx-body-content</div></article></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"Senior Engineer","description":"Build the AILK platform.","mainEntity":{"@context":"https://schema.org","@type":"JobPosting","title":"Senior Engineer","description":"Build the AILK platform."}},{"@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":"Careers","item":"http://localhost:3000/en/careers"},{"@type":"ListItem","position":3,"name":"Senior Engineer","item":"http://localhost:3000/en/careers/senior-engineer"}]}]}</script><main id="main"><h1>Senior Engineer</h1><p data-testid="senior-engineer-description">Build the AILK platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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">mdx-body-content</div></article></div></div></main>"`,
     );
   });
 

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

@@ -46,7 +46,7 @@ describe("case-studies/page — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<main><h1 class="text-heading-1 font-display font-normal tracking-tighter text-fg hero-type-display">Case Studies</h1><p data-testid="section-empty-state">Case studies listing coming soon.</p></main>"`,
+      `"<main id="main"><h1 class="text-heading-1 lg:text-display-sm font-display text-fg hero-type-display">Case Studies</h1><p data-testid="section-empty-state">Case studies listing coming soon.</p></main>"`,
     );
   });
 
@@ -67,7 +67,7 @@ describe("case-studies/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":"Case Studies","description":"Real-world accounts of teams using AI Launch Kit.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Article"}]}}</script><main><h1>Case Studies</h1><p data-testid="case-studies-description">Real-world accounts of teams using AI Launch Kit.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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">mdx-body-content</div></article></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Case Studies","description":"Real-world accounts of teams using AI Launch Kit.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Article"}]}}</script><main id="main"><h1>Case Studies</h1><p data-testid="case-studies-description">Real-world accounts of teams using AI Launch Kit.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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">mdx-body-content</div></article></div></div></main>"`,
     );
   });
 });
@@ -92,7 +92,7 @@ describe("case-studies/[slug]/page — 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":"AILK AEO Rollout","description":"How a team shipped AEO with AI Launch Kit.","mainEntity":{"@context":"https://schema.org","@type":"Article","headline":"AILK AEO Rollout","description":"How a team shipped AEO with AI Launch Kit."}},{"@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":"Case Studies","item":"http://localhost:3000/en/case-studies"},{"@type":"ListItem","position":3,"name":"AILK AEO Rollout","item":"http://localhost:3000/en/case-studies/ailk-aeo-rollout"}]}]}</script><main><h1>AILK AEO Rollout</h1><p data-testid="ailk-aeo-rollout-description">How a team shipped AEO with AI Launch Kit.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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">mdx-body-content</div></article></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"AILK AEO Rollout","description":"How a team shipped AEO with AI Launch Kit.","mainEntity":{"@context":"https://schema.org","@type":"Article","headline":"AILK AEO Rollout","description":"How a team shipped AEO with AI Launch Kit."}},{"@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":"Case Studies","item":"http://localhost:3000/en/case-studies"},{"@type":"ListItem","position":3,"name":"AILK AEO Rollout","item":"http://localhost:3000/en/case-studies/ailk-aeo-rollout"}]}]}</script><main id="main"><h1>AILK AEO Rollout</h1><p data-testid="ailk-aeo-rollout-description">How a team shipped AEO with AI Launch Kit.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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">mdx-body-content</div></article></div></div></main>"`,
     );
   });
 

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

@@ -24,8 +24,7 @@ jest.mock("@working-theory/ui", () => ({
   }: {
     children: React.ReactNode;
     level: number;
-  }): React.ReactElement =>
-    React.createElement(`h${level}`, null, children),
+  }): React.ReactElement => React.createElement(`h${level}`, null, children),
   SectionRenderer: ({ sections }: { sections: unknown[] }) =>
     React.createElement("div", {
       "data-testid": "section-renderer",
@@ -45,7 +44,7 @@ describe("ClientsPage — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<main><h1>Clients</h1><p data-testid="section-empty-state">Clients listing coming soon.</p></main>"`,
+      `"<main id="main"><h1>Clients</h1><p data-testid="section-empty-state">Clients listing coming soon.</p></main>"`,
     );
   });
 
@@ -67,7 +66,7 @@ describe("ClientsPage — 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":"Our Clients","description":"Companies that trust us.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Organization"}]}}</script><main><h1>Our Clients</h1><p data-testid="clients-description">Companies that trust us.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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-remote" data-source=""></div></article></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Our Clients","description":"Companies that trust us.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Organization"}]}}</script><main id="main"><h1>Our Clients</h1><p data-testid="clients-description">Companies that trust us.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><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-remote" data-source=""></div></article></div></div></main>"`,
     );
   });
 });

package/templates/apps/web/app/[locale]/contact/ContactForm.tsx

@@ -16,9 +16,36 @@
  * `ConversationalIntakeWrapper` carry over whatever the visitor already
  * typed into the conversation before Skip (or a failed auto-submit)
  * dropped them here, instead of asking them to retype it.
+ *
+ * Consent (#6466): a real checkbox named by a `ConsentStatement` whose
+ * "Terms" links to the locale-aware `/terms` route. It starts unticked and
+ * the submit button stays disabled until it is ticked — the form is
+ * `noValidate`, so `required` alone would gate nothing. The statement is
+ * wired by `aria-labelledby`, never a wrapping `<label>`, so clicking the
+ * link follows it instead of toggling the box (the ConsentGroup rule).
+ *
+ * Composition (#6514): every control and message is a `@working-theory/ui`
+ * primitive — `Label`/`Input`/`Textarea` for the fields, `Alert` for the
+ * success and form-level error, `InlineMessage` for the per-field messages
+ * (its `error` variant carries `role="alert"`), `Button` for submit. The honeypot hides behind
+ * the `hidden` attribute on its wrapper rather than an inline style object.
  */
 
-import { useTranslations } from "next-intl";
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Checkbox,
+  type CheckboxProps,
+  ConsentStatement,
+  InlineMessage,
+  Input,
+  Label,
+  localeHref,
+  Textarea,
+} from "@working-theory/ui";
+import { useLocale, useTranslations } from "next-intl";
+import { useCallback, useState } from "react";
 import { useFormState, useFormStatus } from "react-dom";
 
 import { captureLeadAction } from "./contact.actions";
@@ -29,29 +56,40 @@ export interface ContactFormInitialValues {
   message?: string;
 }
 
+type CheckedState = Parameters<NonNullable<CheckboxProps["onCheckedChange"]>>[0];
+
 interface ContactFormProps {
   initialValues?: ContactFormInitialValues;
 }
 
-function SubmitButton() {
+function SubmitButton({ disabled }: { disabled: boolean }) {
   const t = useTranslations("contact");
   const { pending } = useFormStatus();
   return (
-    <button type="submit" disabled={pending} data-testid="contact-submit">
+    <Button
+      type="submit"
+      disabled={pending || disabled}
+      data-testid="contact-submit"
+    >
       {pending ? t("sending") : t("sendMessage")}
-    </button>
+    </Button>
   );
 }
 
 export function ContactForm({ initialValues }: ContactFormProps = {}) {
   const t = useTranslations("contact");
+  const locale = useLocale();
   const [state, formAction] = useFormState(captureLeadAction, null);
+  const [consented, setConsented] = useState(false);
+  const handleConsentChange = useCallback((checked: CheckedState) => {
+    setConsented(checked === true);
+  }, []);
 
   if (state?.kind === "success") {
     return (
-      <p data-testid="contact-success">
-        {t("successMessage")}
-      </p>
+      <Alert variant="success" data-testid="contact-success">
+        <AlertDescription>{t("successMessage")}</AlertDescription>
+      </Alert>
     );
   }
 
@@ -62,49 +100,53 @@ export function ContactForm({ initialValues }: ContactFormProps = {}) {
   return (
     <form action={formAction} noValidate>
       {formError && (
-        <p role="alert" data-testid="contact-form-error">
-          {formError}
-        </p>
+        <Alert variant="error" data-testid="contact-form-error">
+          <AlertDescription>{formError}</AlertDescription>
+        </Alert>
       )}
 
       {/* Honeypot — hidden from users; bots fill it; API rejects non-empty */}
-      <input
-        type="text"
-        name="website"
-        tabIndex={-1}
-        aria-hidden="true"
-        style={{ display: "none" }}
-      />
+      <div hidden>
+        <Input
+          type="text"
+          name="website"
+          tabIndex={-1}
+          aria-hidden="true"
+          data-testid="contact-honeypot"
+        />
+      </div>
 
       <div>
-        <label htmlFor="contact-name">{t("nameLabel")}</label>
-        <input
+        <Label htmlFor="contact-name">{t("nameLabel")}</Label>
+        <Input
           id="contact-name"
           name="name"
           type="text"
           autoComplete="name"
+          data-testid="contact-name-input"
           required
           defaultValue={initialValues?.name}
           aria-describedby={fieldErrors.name ? "contact-name-error" : undefined}
         />
         {fieldErrors.name && (
-          <span
+          <InlineMessage
+            variant="error"
             id="contact-name-error"
-            role="alert"
             data-testid="contact-name-error"
           >
             {fieldErrors.name}
-          </span>
+          </InlineMessage>
         )}
       </div>
 
       <div>
-        <label htmlFor="contact-email">{t("emailLabel")}</label>
-        <input
+        <Label htmlFor="contact-email">{t("emailLabel")}</Label>
+        <Input
           id="contact-email"
           name="email"
           type="email"
           autoComplete="email"
+          data-testid="contact-email-input"
           required
           defaultValue={initialValues?.email}
           aria-describedby={
@@ -112,39 +154,58 @@ export function ContactForm({ initialValues }: ContactFormProps = {}) {
           }
         />
         {fieldErrors.email && (
-          <span
+          <InlineMessage
+            variant="error"
             id="contact-email-error"
-            role="alert"
             data-testid="contact-email-error"
           >
             {fieldErrors.email}
-          </span>
+          </InlineMessage>
         )}
       </div>
 
       <div>
-        <label htmlFor="contact-message">{t("messageLabel")}</label>
-        <textarea
+        <Label htmlFor="contact-message">{t("messageLabel")}</Label>
+        <Textarea
           id="contact-message"
           name="message"
           rows={5}
+          data-testid="contact-message-input"
           defaultValue={initialValues?.message}
           aria-describedby={
             fieldErrors.message ? "contact-message-error" : undefined
           }
         />
         {fieldErrors.message && (
-          <span
+          <InlineMessage
+            variant="error"
             id="contact-message-error"
-            role="alert"
             data-testid="contact-message-error"
           >
             {fieldErrors.message}
-          </span>
+          </InlineMessage>
         )}
       </div>
 
-      <SubmitButton />
+      <div className="flex items-start gap-3">
+        <Checkbox
+          id="contact-consent"
+          name="consent"
+          value="true"
+          checked={consented}
+          onCheckedChange={handleConsentChange}
+          aria-labelledby="contact-consent-statement"
+          className="mt-0.5"
+          data-testid="contact-consent"
+        />
+        <ConsentStatement
+          id="contact-consent-statement"
+          statement={t("consentStatement")}
+          policies={{ terms: localeHref(locale, "/terms") }}
+        />
+      </div>
+
+      <SubmitButton disabled={!consented} />
     </form>
   );
 }

package/templates/apps/web/app/[locale]/contact/ConversationalIntakeWrapper.tsx

@@ -39,7 +39,10 @@
  */
 
 import {
+  Container,
   ConversationalIntake,
+  type ConversationalIntakeProps,
+  InlineMessage,
   THINKING_DELAY_MAX_MS,
   THINKING_DELAY_MIN_MS,
 } from "@working-theory/ui";
@@ -63,6 +66,18 @@ function pickThinkingDelayMs(): number {
   return THINKING_DELAY_MIN_MS + Math.floor(Math.random() * (span + 1));
 }
 
+/**
+ * Fires `recordIntakeTurn` on a later microtask, swallowing any failure — a
+ * synchronous throw from the Server Action reference or a rejected promise
+ * alike — so analytics can never stall a turn, the Skip fallback, or the lead
+ * submit (#6465).
+ */
+function fireIntakeTurn(input: Parameters<typeof recordIntakeTurn>[0]): void {
+  Promise.resolve()
+    .then(() => recordIntakeTurn(input))
+    .catch(() => {});
+}
+
 /** Builds the FormData captureLeadAction expects from the engine's answers. */
 function answersToFormData(answers: Record<string, string>): FormData {
   const formData = new FormData();
@@ -76,7 +91,17 @@ function answersToFormData(answers: Record<string, string>): FormData {
 
 type Surface = "intake" | "form";
 
-export function ConversationalIntakeWrapper() {
+/** The terminal engine state `ConversationalIntake` hands `onComplete`/`onSkip`. */
+type IntakeState = Parameters<
+  NonNullable<ConversationalIntakeProps["onComplete"]>
+>[0];
+
+// NO_HAND_IMPLEMENT_OK: operator-directed live Free-template reference pass.
+// `inline` drops the page-level Container so the intake can sit inside the
+// hero's right column (the /contact two-column layout).
+export function ConversationalIntakeWrapper({
+  inline = false,
+}: { inline?: boolean } = {}) {
   const t = useTranslations("contact");
   const locale = useLocale();
   const script = useMemo(
@@ -105,7 +130,7 @@ export function ConversationalIntakeWrapper() {
 
   const getThinkingDelayMs = useCallback(() => {
     turnIndexRef.current += 1;
-    void recordIntakeTurn({
+    fireIntakeTurn({
       turnIndex: turnIndexRef.current,
       status: "in_progress",
       locale,
@@ -128,8 +153,8 @@ export function ConversationalIntakeWrapper() {
   }, []);
 
   const handleComplete = useCallback(
-    (answers: Record<string, string>) => {
-      void recordIntakeTurn({
+    ({ answers }: IntakeState) => {
+      fireIntakeTurn({
         turnIndex: turnIndexRef.current,
         status: "completed",
         locale,
@@ -146,8 +171,8 @@ export function ConversationalIntakeWrapper() {
   );
 
   const handleSkip = useCallback(
-    (answers: Record<string, string>) => {
-      void recordIntakeTurn({
+    ({ answers }: IntakeState) => {
+      fireIntakeTurn({
         turnIndex: turnIndexRef.current,
         status: "skipped",
         locale,
@@ -159,30 +184,35 @@ export function ConversationalIntakeWrapper() {
 
   if (surface === "form") {
     return (
-      <>
+      <Container className={inline ? "p-0" : "py-section"}>
         {submitError ? (
-          <p role="alert" data-testid="contact-intake-submit-error">
+          <InlineMessage
+            variant="error"
+            data-testid="contact-intake-submit-error"
+          >
             {submitError}
-          </p>
+          </InlineMessage>
         ) : null}
         <ContactForm initialValues={initialValues} />
-      </>
+      </Container>
     );
   }
 
   return (
-    <ConversationalIntake
-      script={script}
-      onComplete={(state) => handleComplete(state.answers)}
-      onSkip={(state) => handleSkip(state.answers)}
-      getThinkingDelayMs={getThinkingDelayMs}
-      labels={{
-        guidedBadge: t("intake.guidedBadge"),
-        skip: t("intake.skip"),
-        send: t("intake.send"),
-        freeTextPlaceholder: t("intake.freeTextPlaceholder"),
-      }}
-      data-testid="contact-conversational-intake"
-    />
+    <Container className={inline ? "p-0" : "py-section"}>
+      <ConversationalIntake
+        script={script}
+        onComplete={handleComplete}
+        onSkip={handleSkip}
+        getThinkingDelayMs={getThinkingDelayMs}
+        labels={{
+          guidedBadge: t("intake.guidedBadge"),
+          skip: t("intake.skip"),
+          send: t("intake.send"),
+          freeTextPlaceholder: t("intake.freeTextPlaceholder"),
+        }}
+        data-testid="contact-conversational-intake"
+      />
+    </Container>
   );
 }

package/templates/apps/web/app/[locale]/contact/__tests__/ContactForm.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * Tests for ContactForm's consent row (#6466, spec AC-2 / AC-3).
+ *
+ * ContactForm is the only form a /contact visitor can submit — the fallback
+ * `ConversationalIntakeWrapper` swaps in on Skip or a failed auto-submit. Its
+ * consent line must be a real control: a visible, unticked checkbox named by
+ * a statement whose "Terms" is a link, and a submit button that stays
+ * disabled until the box is ticked (the form is `noValidate`, so `required`
+ * alone would gate nothing).
+ *
+ * jsdom lacks `useFormState`/`useFormStatus` (see
+ * page-renderer-migration.test.tsx), so `react-dom` is extended with inert
+ * stand-ins; the outermost network boundary (`@working-theory/api-client`)
+ * is mocked so the real server action module loads without a network.
+ */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { localeHref } from "@working-theory/ui";
+
+const MESSAGES: Record<string, string> = {
+  consentStatement: "I accept the [Terms](terms).",
+};
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => MESSAGES[key] ?? key,
+  useLocale: () => "en",
+}));
+
+jest.mock("react-dom", () => ({
+  ...jest.requireActual("react-dom"),
+  useFormState: (_action: unknown, initial: unknown) => [initial, jest.fn()],
+  useFormStatus: () => ({ pending: false }),
+}));
+
+jest.mock("@working-theory/api-client", () => ({
+  leads: { submit: jest.fn() },
+}));
+
+import { ContactForm } from "../ContactForm.js";
+
+// jsdom does not implement ResizeObserver — the Radix Checkbox renders a
+// hidden form-bubble input that observes size. Polyfill with a no-op.
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+});
+
+describe("ContactForm consent row (#6466)", () => {
+  it("renders a visible, unticked checkbox (AC-2 i)", () => {
+    render(<ContactForm />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toBeVisible();
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("links 'Terms' to the locale-aware /terms route (AC-2 ii)", () => {
+    render(<ContactForm />);
+    const link = screen.getByRole("link", { name: "Terms" });
+    expect(link).toHaveAttribute("href", localeHref("en", "/terms"));
+  });
+
+  it("names the checkbox by the consent statement (AC-2 iii)", () => {
+    render(<ContactForm />);
+    // jsdom's accname pads the inline link with a space ("Terms .").
+    expect(screen.getByRole("checkbox")).toHaveAccessibleName(
+      /^I accept the Terms ?\.$/,
+    );
+  });
+
+  it("clicking the Terms link does not tick the box (AC-2 iv)", () => {
+    render(<ContactForm />);
+    const link = screen.getByRole("link", { name: "Terms" });
+    // A wrapping <label> is what would forward the click to the box.
+    expect(link.closest("label")).toBeNull();
+    link.addEventListener("click", (event) => event.preventDefault());
+    fireEvent.click(link);
+    expect(screen.getByRole("checkbox")).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+  });
+
+  it("keeps submit disabled until the box is ticked (AC-3)", () => {
+    render(<ContactForm />);
+    const submit = screen.getByTestId("contact-submit");
+    expect(submit).toBeDisabled();
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(screen.getByRole("checkbox")).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(submit).toBeEnabled();
+  });
+});