create-ailk 0.1.0

package/templates/apps/web/app/[locale]/software/[slug]/page.tsx

@@ -0,0 +1,34 @@
+// SoftwareProduct detail page. Reads the SoftwareProduct MDX for the given slug,
+// renders via @working-theory/page-renderer, and emits a JSON-LD <script>. Unknown slugs 404.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import { getMdxSlugs, renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const slugs = await getMdxSlugs("SoftwareProduct", params.locale);
+  return slugs.map((slug) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  return renderPage({
+    type: "SoftwareProduct",
+    slug,
+    locale,
+    bodyMode: "mdx-body",
+    populatedDescriptionTestId: "software-description",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,81 @@
+/**
+ * HTML snapshot regression tests for software/[slug] — @working-theory/page-renderer migration.
+ *
+ * Node version: captured against Node 22.x (same as CI).
+ * MDX seed content: DI-injected stub — no fs reads, deterministic.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration routes.
+ *   Commit 2: routes migrated; same snapshots verify diff=0.
+ *
+ * Routes covered:
+ *   - software/[slug] (populated: populated state)
+ *   - software/[slug] (notFound: unknown slug triggers notFound())
+ *
+ * Note: software/page.tsx is a slug-listing route (not MDX-body); only the
+ * import path changes. No snapshot tests needed for software/page.
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ * A non-zero diff indicates a behavior regression in the migration. Escalate.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }): React.ReactElement =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+import SoftwareSlugPage from "../[slug]/page";
+import { notFound } from "next/navigation";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+describe("software/[slug] — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "SoftwareProduct" as const,
+        slug: "page-renderer",
+        title: "@working-theory/page-renderer",
+        description: "Single rendering primitive for MDX-wired routes.",
+      },
+      body: "## Overview\n\nBody content.",
+    });
+
+    const element = await SoftwareSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "page-renderer" }),
+      getMdxSource,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"@working-theory/page-renderer","description":"Single rendering primitive for MDX-wired routes.","mainEntity":{"@type":"SoftwareApplication","name":"@working-theory/page-renderer"}}</script><main><h1>@working-theory/page-renderer</h1><p data-testid="software-description">Single rendering primitive for MDX-wired routes.</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">## Overview
+
+     Body content.</div></article></div></div></main>"
+    `);
+  });
+
+  it("unknown slug triggers notFound()", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(null);
+
+    await expect(
+      SoftwareSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});

package/templates/apps/web/app/[locale]/software/page.tsx

@@ -0,0 +1,39 @@
+// Software list page. Enumerates SoftwareProduct slugs via the content adapter
+// and renders a directory listing. No dedicated list MDX type exists for SoftwareProduct.
+import { getMdxSlugs as defaultGetMdxSlugs } from "@working-theory/page-renderer";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSlugs?: typeof defaultGetMdxSlugs;
+}
+
+export default async function Page({
+  params,
+  getMdxSlugs = defaultGetMdxSlugs,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations("software");
+  const slugs = await getMdxSlugs("SoftwareProduct", locale);
+
+  return (
+    <main>
+      <h1>{t("heading")}</h1>
+      <p data-testid="software-description">
+        {t("description")}
+      </p>
+      {slugs.length === 0 ? (
+        <p data-testid="section-empty-state">{t("emptyState")}</p>
+      ) : (
+        <ul data-testid="software-list">
+          {slugs.map((slug) => (
+            <li key={slug}>
+              <a href={`/${locale}/software/${slug}`}>{slug}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}

package/templates/apps/web/app/[locale]/tech-articles/[slug]/page.tsx

@@ -0,0 +1,34 @@
+// TechArticle detail page. Reads the TechArticle MDX for the given slug, renders via
+// @working-theory/page-renderer, and emits a JSON-LD <script>. Unknown slugs trigger 404.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import { getMdxSlugs, renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const slugs = await getMdxSlugs("TechArticle", params.locale);
+  return slugs.map((slug) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  return renderPage({
+    type: "TechArticle",
+    slug,
+    locale,
+    bodyMode: "mdx-body",
+    populatedDescriptionTestId: "tech-article-description",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,82 @@
+/**
+ * HTML snapshot regression tests for tech-articles/[slug] — @working-theory/page-renderer migration.
+ *
+ * Node version: captured against Node 22.x (same as CI).
+ * MDX seed content: DI-injected stub — no fs reads, deterministic.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration routes.
+ *   Commit 2: routes migrated; same snapshots verify diff=0.
+ *
+ * Routes covered:
+ *   - tech-articles/[slug] (populated: populated state)
+ *   - tech-articles/[slug] (notFound: unknown slug triggers notFound())
+ *
+ * Note: tech-articles/page.tsx is a slug-listing route (not MDX-body); only the
+ * import path changes. No snapshot tests needed for tech-articles/page.
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ * A non-zero diff indicates a behavior regression in the migration. Escalate.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }): React.ReactElement =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+import TechArticleSlugPage from "../[slug]/page";
+import { notFound } from "next/navigation";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+describe("tech-articles/[slug] — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "TechArticle" as const,
+        slug: "aeo-layer1-scoring",
+        title: "AEO Layer 1 Scoring",
+        description:
+          "Deep dive into AEO Layer 1 scoring and AILK audit internals.",
+      },
+      body: "## AEO Layer 1\n\nBody content.",
+    });
+
+    const element = await TechArticleSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "aeo-layer1-scoring" }),
+      getMdxSource,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(`
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"AEO Layer 1 Scoring","description":"Deep dive into AEO Layer 1 scoring and AILK audit internals.","mainEntity":{"@type":"TechArticle","headline":"AEO Layer 1 Scoring"}},{"@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":"Tech Articles","item":"http://localhost:3000/en/tech-articles"},{"@type":"ListItem","position":3,"name":"AEO Layer 1 Scoring","item":"http://localhost:3000/en/tech-articles/aeo-layer1-scoring"}]}]}</script><main><h1>AEO Layer 1 Scoring</h1><p data-testid="tech-article-description">Deep dive into AEO Layer 1 scoring and AILK audit internals.</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">## AEO Layer 1
+
+     Body content.</div></article></div></div></main>"
+    `);
+  });
+
+  it("unknown slug triggers notFound()", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(null);
+
+    await expect(
+      TechArticleSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});

package/templates/apps/web/app/[locale]/tech-articles/page.tsx

@@ -0,0 +1,39 @@
+// Tech Articles list page. Enumerates TechArticle slugs via the content adapter
+// and renders a directory listing. No dedicated list MDX type exists for TechArticle.
+import { getMdxSlugs as defaultGetMdxSlugs } from "@working-theory/page-renderer";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSlugs?: typeof defaultGetMdxSlugs;
+}
+
+export default async function Page({
+  params,
+  getMdxSlugs = defaultGetMdxSlugs,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations("tech-articles");
+  const slugs = await getMdxSlugs("TechArticle", locale);
+
+  return (
+    <main>
+      <h1>{t("heading")}</h1>
+      <p data-testid="tech-articles-description">
+        {t("description")}
+      </p>
+      {slugs.length === 0 ? (
+        <p data-testid="section-empty-state">{t("emptyState")}</p>
+      ) : (
+        <ul data-testid="tech-articles-list">
+          {slugs.map((slug) => (
+            <li key={slug}>
+              <a href={`/${locale}/tech-articles/${slug}`}>{slug}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}

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

@@ -0,0 +1,63 @@
+/**
+ * HTML snapshot regression tests for testimonials/page.tsx → @working-theory/page-renderer migration.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration route (RED-passing).
+ *   Commit 2: route migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Two states tested:
+ *   - empty: getMdxSource returns null → empty-state branch
+ *   - populated: getMdxSource returns a minimal MdxPageSource → full render
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+// ── @working-theory/ui mock ─────────────────────────────────────────────────────────────
+jest.mock("@working-theory/ui", () => ({
+  SectionRenderer: ({ sections }: { sections: unknown[] }) =>
+    React.createElement("div", {
+      "data-testid": "section-renderer",
+      "data-section-count": String(sections.length),
+    }),
+}));
+
+import TestimonialsPage from "../page";
+
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+
+describe("TestimonialsPage — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await TestimonialsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Testimonials</h1><p data-testid="section-empty-state">Testimonials coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = {
+      frontmatter: {
+        type: "TestimonialsList" as const,
+        slug: "testimonials",
+        title: "Customer Testimonials",
+        description: "What our customers say.",
+      },
+      body: "",
+    };
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+
+    const element = await TestimonialsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    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":"Customer Testimonials","description":"What our customers say.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Review"}]},"aggregateRating":{"@context":"https://schema.org","@type":"AggregateRating","ratingValue":4.9,"reviewCount":0,"bestRating":5,"worstRating":1,"itemReviewed":{"@type":"SoftwareApplication"}}}</script><main><h1>Customer Testimonials</h1><p data-testid="testimonials-description">What our customers say.</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>"`,
+    );
+  });
+});

package/templates/apps/web/app/[locale]/testimonials/page.tsx

@@ -0,0 +1,27 @@
+// Testimonials list page. Reads TestimonialsList 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 type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  return renderPage({
+    type: "TestimonialsList",
+    slug: "testimonials",
+    locale,
+    translationsNamespace: "testimonials",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,63 @@
+/**
+ * HTML snapshot regression tests for use-cases/page.tsx → @working-theory/page-renderer migration.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration route (RED-passing).
+ *   Commit 2: route migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Two states tested:
+ *   - empty: getMdxSource returns null → empty-state branch
+ *   - populated: getMdxSource returns a minimal MdxPageSource → full render
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+// ── @working-theory/ui mock ─────────────────────────────────────────────────────────────
+jest.mock("@working-theory/ui", () => ({
+  SectionRenderer: ({ sections }: { sections: unknown[] }) =>
+    React.createElement("div", {
+      "data-testid": "section-renderer",
+      "data-section-count": String(sections.length),
+    }),
+}));
+
+import UseCasesPage from "../page";
+
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+
+describe("UseCasesPage — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await UseCasesPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Use Cases</h1><p data-testid="section-empty-state">Use cases listing coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = {
+      frontmatter: {
+        type: "UseCasesList" as const,
+        slug: "use-cases",
+        title: "Use Cases",
+        description: "How teams use our platform.",
+      },
+      body: "",
+    };
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+
+    const element = await UseCasesPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    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":"Use Cases","description":"How teams use our platform.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Article"}]}}</script><main><h1>Use Cases</h1><p data-testid="use-cases-description">How teams use our 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-remote" data-source=""></div></article></div></div></main>"`,
+    );
+  });
+});

package/templates/apps/web/app/[locale]/use-cases/page.tsx

@@ -0,0 +1,27 @@
+// Use Cases list page. Reads UseCasesList MDX via the content adapter and emits
+// a JSON-LD CollectionPage via the dispatcher. List-only — no detail route.
+import type {
+  getMdxSource as defaultGetMdxSource,
+} from "@working-theory/page-renderer";
+import { renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  return renderPage({
+    type: "UseCasesList",
+    slug: "use-cases",
+    locale,
+    translationsNamespace: "use-cases",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

package/templates/apps/web/app/[locale]/whitepapers/[slug]/page.tsx

@@ -0,0 +1,34 @@
+// Whitepaper detail page. Reads the Whitepaper MDX for the given slug, renders via
+// @working-theory/page-renderer, and emits a JSON-LD <script>. Unknown slugs trigger 404.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import { getMdxSlugs, renderPage } from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const slugs = await getMdxSlugs("Whitepaper", params.locale);
+  return slugs.map((slug) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  return renderPage({
+    type: "Whitepaper",
+    slug,
+    locale,
+    bodyMode: "mdx-body",
+    populatedDescriptionTestId: "whitepaper-description",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,82 @@
+/**
+ * HTML snapshot regression tests for whitepapers/[slug] — @working-theory/page-renderer migration.
+ *
+ * Node version: captured against Node 22.x (same as CI).
+ * MDX seed content: DI-injected stub — no fs reads, deterministic.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration routes.
+ *   Commit 2: routes migrated; same snapshots verify diff=0.
+ *
+ * Routes covered:
+ *   - whitepapers/[slug] (populated: populated state)
+ *   - whitepapers/[slug] (notFound: unknown slug triggers notFound())
+ *
+ * Note: whitepapers/page.tsx is a slug-listing route (not MDX-body); only the
+ * import path changes. No snapshot tests needed for whitepapers/page.
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ * A non-zero diff indicates a behavior regression in the migration. Escalate.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }): React.ReactElement =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+import WhitepaperSlugPage from "../[slug]/page";
+import { notFound } from "next/navigation";
+
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+
+describe("whitepapers/[slug] — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "Whitepaper" as const,
+        slug: "ailk-aeo-strategy-2026",
+        title: "AILK AEO Strategy 2026",
+        description:
+          "In-depth research on answer engine optimization for AILK products.",
+      },
+      body: "## Executive Summary\n\nBody content.",
+    });
+
+    const element = await WhitepaperSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "ailk-aeo-strategy-2026" }),
+      getMdxSource,
+    });
+    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 Strategy 2026","description":"In-depth research on answer engine optimization for AILK products.","mainEntity":{"@type":"Article","headline":"AILK AEO Strategy 2026"}},{"@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":"Whitepapers","item":"http://localhost:3000/en/whitepapers"},{"@type":"ListItem","position":3,"name":"AILK AEO Strategy 2026","item":"http://localhost:3000/en/whitepapers/ailk-aeo-strategy-2026"}]}]}</script><main><h1>AILK AEO Strategy 2026</h1><p data-testid="whitepaper-description">In-depth research on answer engine optimization for AILK products.</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">## Executive Summary
+
+     Body content.</div></article></div></div></main>"
+    `);
+  });
+
+  it("unknown slug triggers notFound()", async () => {
+    const getMdxSource = jest.fn().mockResolvedValue(null);
+
+    await expect(
+      WhitepaperSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});