create-ailk 0.1.0 → 0.2.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>Careers</h1><p data-testid="section-empty-state">Career listings coming soon.</p></main>"`,
+      `"<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>"`,
     );
   });
 
@@ -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) 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) 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><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) 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) 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><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]/careers/page.tsx

@@ -1,7 +1,8 @@
 // Careers list page. Reads CareersList MDX via the content adapter and emits
 // a JSON-LD CollectionPage. Links to JobPosting detail pages at /careers/<slug>.
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import { renderPage } from "@working-theory/page-renderer";
+import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
+import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
 interface Props {
@@ -9,6 +10,13 @@ interface Props {
   getMdxSource?: typeof defaultGetMdxSource;
 }
 
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale } = await params;
+  return renderPageMetadata({ type: "CareersList", slug: "careers", locale });
+}
+
 export default async function Page({
   params,
   getMdxSource,

package/templates/apps/web/app/[locale]/case-studies/[slug]/page.tsx

@@ -4,7 +4,9 @@ import {
   getMdxSource as defaultGetMdxSource,
   getMdxSlugs,
   renderPage,
+  renderPageMetadata,
 } from "@working-theory/page-renderer";
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import type { ReactElement } from "react";
 
@@ -13,6 +15,13 @@ interface Props {
   getMdxSource?: typeof defaultGetMdxSource;
 }
 
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "CaseStudy", slug, locale });
+}
+
 export async function generateStaticParams({
   params,
 }: {

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>Case Studies</h1><p data-testid="section-empty-state">Case studies listing coming soon.</p></main>"`,
+      `"<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>"`,
     );
   });
 
@@ -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) 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) 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><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":{"@type":"Article","headline":"AILK AEO Rollout"}},{"@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) 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) 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><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]/case-studies/page.tsx

@@ -1,7 +1,8 @@
 // Case Studies list page. Reads CaseStudiesList MDX via the content adapter and emits
 // a JSON-LD CollectionPage via the dispatcher.
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import { renderPage } from "@working-theory/page-renderer";
+import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
+import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
 interface Props {
@@ -9,6 +10,17 @@ interface Props {
   getMdxSource?: typeof defaultGetMdxSource;
 }
 
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale } = await params;
+  return renderPageMetadata({
+    type: "CaseStudiesList",
+    slug: "case-studies",
+    locale,
+  });
+}
+
 export default async function Page({
   params,
   getMdxSource,

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

@@ -16,6 +16,16 @@ import { render } from "@testing-library/react";
 
 // ── @working-theory/ui mock ─────────────────────────────────────────────────────────────
 jest.mock("@working-theory/ui", () => ({
+  // #4446/#4447: renderPage's own fallback/empty-state title now composes
+  // Heading (mobile type-budget classes, #4417) instead of a bare <h1>.
+  Heading: ({
+    children,
+    level,
+  }: {
+    children: React.ReactNode;
+    level: number;
+  }): React.ReactElement =>
+    React.createElement(`h${level}`, null, children),
   SectionRenderer: ({ sections }: { sections: unknown[] }) =>
     React.createElement("div", {
       "data-testid": "section-renderer",
@@ -57,7 +67,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) 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) 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><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]/clients/page.tsx

@@ -3,7 +3,8 @@
 import type {
   getMdxSource as defaultGetMdxSource,
 } from "@working-theory/page-renderer";
-import { renderPage } from "@working-theory/page-renderer";
+import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
+import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
 interface Props {
@@ -11,6 +12,13 @@ interface Props {
   getMdxSource?: typeof defaultGetMdxSource;
 }
 
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale } = await params;
+  return renderPageMetadata({ type: "ClientsList", slug: "clients", locale });
+}
+
 export default async function Page({
   params,
   getMdxSource,

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

@@ -9,6 +9,13 @@
  * Server errors show a generic fallback message.
  *
  * Honeypot + rate-limit enforcement lives in apps/api; no duplication here.
+ *
+ * `initialValues` (#4534, epic #4521's integration leg): optional prefill
+ * for name/email/message, set via `defaultValue` (the fields stay
+ * uncontrolled — unchanged for the no-prop call site). Lets
+ * `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.
  */
 
 import { useTranslations } from "next-intl";
@@ -16,6 +23,16 @@ import { useFormState, useFormStatus } from "react-dom";
 
 import { captureLeadAction } from "./contact.actions";
 
+export interface ContactFormInitialValues {
+  name?: string;
+  email?: string;
+  message?: string;
+}
+
+interface ContactFormProps {
+  initialValues?: ContactFormInitialValues;
+}
+
 function SubmitButton() {
   const t = useTranslations("contact");
   const { pending } = useFormStatus();
@@ -26,7 +43,7 @@ function SubmitButton() {
   );
 }
 
-export function ContactForm() {
+export function ContactForm({ initialValues }: ContactFormProps = {}) {
   const t = useTranslations("contact");
   const [state, formAction] = useFormState(captureLeadAction, null);
 
@@ -67,6 +84,7 @@ export function ContactForm() {
           type="text"
           autoComplete="name"
           required
+          defaultValue={initialValues?.name}
           aria-describedby={fieldErrors.name ? "contact-name-error" : undefined}
         />
         {fieldErrors.name && (
@@ -88,6 +106,7 @@ export function ContactForm() {
           type="email"
           autoComplete="email"
           required
+          defaultValue={initialValues?.email}
           aria-describedby={
             fieldErrors.email ? "contact-email-error" : undefined
           }
@@ -109,6 +128,7 @@ export function ContactForm() {
           id="contact-message"
           name="message"
           rows={5}
+          defaultValue={initialValues?.message}
           aria-describedby={
             fieldErrors.message ? "contact-message-error" : undefined
           }

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

@@ -0,0 +1,188 @@
+"use client"; // owns which surface is showing (conversation vs. fallback form) + submission/analytics wiring
+
+/**
+ * ConversationalIntakeWrapper — apps/web's host around
+ * `ConversationalIntake` (#4534, integration leg of epic #4521). Consumes
+ * the block (#4543) and its engine (#4532) as published from
+ * `@working-theory/ui`, unmodified — this file owns none of the
+ * conversation logic, only:
+ *
+ *   1. Submission — `onComplete` hands the finished answers to the SAME
+ *      `captureLeadAction` (`./contact.actions.ts`) the plain `<ContactForm/>`
+ *      already uses, built as a `FormData` (imperatively, not a real
+ *      `<form>` submit — React 19 Server Actions are plain async functions).
+ *      That action posts through the EXISTING `POST /v1/leads/submit` route
+ *      (`apps/api/src/routes/leads`, consumed via `@working-theory/api-client`,
+ *      never modified). Reusing this ONE action — rather than a second
+ *      `*Action`-suffixed export — is deliberate: a second export would trip
+ *      `apps/mcp/__tests__/parity.test.ts`'s Server-Action↔MCP-tool 1:1 count
+ *      for a capability (lead capture) that already has its MCP twin
+ *      (`ailkCaptureLead`); this is the SAME capability, invoked from a
+ *      second web surface, not a new one. `contact.actions.ts`'s own
+ *      doc-comment covers the additive `source` FormData field this file
+ *      sets to distinguish intake-originated leads.
+ *   2. Skip fallback — `onSkip` swaps to the EXISTING `<ContactForm/>`,
+ *      carrying over whatever answers were already captured as its
+ *      `initialValues` prefill. A failed auto-submit on `onComplete` falls
+ *      back the same way, so a lead is never silently lost.
+ *   3. Per-turn analytics — `getThinkingDelayMs` is `ConversationalIntake`'s
+ *      documented override seam (exported prop, used by the block's own
+ *      tests for deterministic timing). Wrapping it — incrementing a turn
+ *      counter and reporting it via `recordIntakeTurn`
+ *      (`./intake-analytics.ts`), then returning an unchanged random delay
+ *      from the exported `THINKING_DELAY_MIN_MS`/`THINKING_DELAY_MAX_MS`
+ *      bounds — taps the ONE seam the block exposes once per turn, without
+ *      touching its production pacing (behavior-contract item 5 stays
+ *      intact: replies are never instant) and without needing the block's
+ *      internal engine (not part of `@working-theory/ui`'s public surface —
+ *      see packages/ui/src/blocks/index.ts).
+ */
+
+import {
+  ConversationalIntake,
+  THINKING_DELAY_MAX_MS,
+  THINKING_DELAY_MIN_MS,
+} from "@working-theory/ui";
+import { useLocale, useTranslations } from "next-intl";
+import { useCallback, useMemo, useRef, useState } from "react";
+
+import { captureLeadAction } from "./contact.actions";
+import { ContactForm, type ContactFormInitialValues } from "./ContactForm";
+import { recordIntakeTurn } from "./intake-analytics";
+import { buildContactIntakeScript } from "./intake-script";
+
+/**
+ * Uniform-random pause in [THINKING_DELAY_MIN_MS, THINKING_DELAY_MAX_MS] —
+ * mirrors `ConversationalIntake`'s own default picker (not exported; only
+ * the bounds are). Reimplemented from those bounds rather than importing
+ * the block's internals, so wrapping `getThinkingDelayMs` for analytics
+ * changes nothing about production pacing.
+ */
+function pickThinkingDelayMs(): number {
+  const span = THINKING_DELAY_MAX_MS - THINKING_DELAY_MIN_MS;
+  return THINKING_DELAY_MIN_MS + Math.floor(Math.random() * (span + 1));
+}
+
+/** Builds the FormData captureLeadAction expects from the engine's answers. */
+function answersToFormData(answers: Record<string, string>): FormData {
+  const formData = new FormData();
+  if (answers["name"] !== undefined) formData.set("name", answers["name"]);
+  if (answers["email"] !== undefined) formData.set("email", answers["email"]);
+  if (answers["message"] !== undefined)
+    formData.set("message", answers["message"]);
+  formData.set("source", "conversational-intake");
+  return formData;
+}
+
+type Surface = "intake" | "form";
+
+export function ConversationalIntakeWrapper() {
+  const t = useTranslations("contact");
+  const locale = useLocale();
+  const script = useMemo(
+    () =>
+      buildContactIntakeScript({
+        nameAck: t("intake.nameAck"),
+        namePrompt: t("intake.namePrompt"),
+        messageAck: t("intake.messageAck"),
+        messagePrompt: t("intake.messagePrompt"),
+        emailAck: t("intake.emailAck"),
+        emailPrompt: t("intake.emailPrompt"),
+        skipMessage: t("intake.skipMessage"),
+        completionMessage: t("intake.completionMessage"),
+      }),
+    [t],
+  );
+
+  const [surface, setSurface] = useState<Surface>("intake");
+  const [initialValues, setInitialValues] = useState<ContactFormInitialValues>(
+    {},
+  );
+  const [submitError, setSubmitError] = useState<string | undefined>(
+    undefined,
+  );
+  const turnIndexRef = useRef(0);
+
+  const getThinkingDelayMs = useCallback(() => {
+    turnIndexRef.current += 1;
+    void recordIntakeTurn({
+      turnIndex: turnIndexRef.current,
+      status: "in_progress",
+      locale,
+    });
+    return pickThinkingDelayMs();
+  }, [locale]);
+
+  const fallBackToForm = useCallback((answers: Record<string, string>) => {
+    // exactOptionalPropertyTypes-safe (mirrors flow.actions.ts's own
+    // rationale): omit an absent answer's key entirely rather than setting
+    // it to an explicit `undefined`.
+    setInitialValues({
+      ...(answers["name"] !== undefined && { name: answers["name"] }),
+      ...(answers["email"] !== undefined && { email: answers["email"] }),
+      ...(answers["message"] !== undefined && {
+        message: answers["message"],
+      }),
+    });
+    setSurface("form");
+  }, []);
+
+  const handleComplete = useCallback(
+    (answers: Record<string, string>) => {
+      void recordIntakeTurn({
+        turnIndex: turnIndexRef.current,
+        status: "completed",
+        locale,
+      });
+      void (async () => {
+        const result = await captureLeadAction(null, answersToFormData(answers));
+        if (result?.kind !== "success") {
+          setSubmitError(t("intake.submitError"));
+          fallBackToForm(answers);
+        }
+      })();
+    },
+    [locale, t, fallBackToForm],
+  );
+
+  const handleSkip = useCallback(
+    (answers: Record<string, string>) => {
+      void recordIntakeTurn({
+        turnIndex: turnIndexRef.current,
+        status: "skipped",
+        locale,
+      });
+      fallBackToForm(answers);
+    },
+    [locale, fallBackToForm],
+  );
+
+  if (surface === "form") {
+    return (
+      <>
+        {submitError ? (
+          <p role="alert" data-testid="contact-intake-submit-error">
+            {submitError}
+          </p>
+        ) : null}
+        <ContactForm initialValues={initialValues} />
+      </>
+    );
+  }
+
+  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"
+    />
+  );
+}