create-ailk 0.1.0

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

@@ -0,0 +1,173 @@
+/**
+ * /blog catch-all route. With `content/blog/` empty, the index renders the
+ * BLOG_EMPTY_SENTINEL placeholder (testable contract).
+ *
+ * Q5 deferred post-MVP: no `/docs` companion ships in Phase 0 — only the
+ * `docsPageJsonLd` builder is exported from `@working-theory/fumadocs-schema`.
+ */
+import { blogListJsonLd, blogPostingJsonLd } from "@working-theory/fumadocs-schema";
+import { JsonLdScript } from "@working-theory/page-renderer";
+import { BlogList, BlogPost } from "@working-theory/ui";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import type { ComponentType, ReactElement } from "react";
+
+import { toBlogListData } from "../../../../lib/blog-list-data";
+import { toBlogPostData } from "../../../../lib/blog-post-data";
+import { getOgImageUrl } from "../../../../lib/og";
+import { blogSource as defaultBlogSource } from "../../../../lib/source";
+
+/**
+ * Sentinel string the empty-state placeholder must contain. Tests assert
+ * on this exact value to detect the empty-blog branch without coupling to
+ * copy. Exported so the integration test can import it directly.
+ */
+export const BLOG_EMPTY_SENTINEL = "ailk-blog-empty-placeholder";
+
+/**
+ * Frontmatter contract — must match `source.config.ts` `defineDocs.docs.schema`.
+ */
+interface BlogFrontmatter {
+  title: string;
+  description: string;
+  date?: string;
+  updated?: string;
+  image?: string;
+  author?: { name: string; avatar?: string };
+  tags?: string[];
+}
+
+/**
+ * Post `page.data`: frontmatter plus the Fumadocs-generated `body` (compiled
+ * MDX component) and `toc` (table of contents). The body renders through the
+ * `BlogPost` section's `children` slot (issue #2714).
+ */
+interface BlogPostPageData extends BlogFrontmatter {
+  body?: ComponentType;
+  toc?: Array<{ title: unknown; url: string; depth: number }>;
+}
+
+/**
+ * Minimal blog-source interface covering the subset consumed by this route.
+ * Tests inject a stub without mocking lib/source at the module level.
+ */
+interface BlogSource {
+  getPages: () => Array<{ url: string; data: unknown }>;
+  getPage: (slug: string[]) => { data: unknown } | undefined;
+}
+
+interface BlogRouteProps {
+  params: Promise<{ locale: string; slug?: string[] }>;
+  /**
+   * Blog source override for testing. Defaults to the real Fumadocs blogSource.
+   * Inject a stub to avoid mocking lib/source at the module level.
+   */
+  blogSource?: BlogSource;
+}
+
+export async function generateMetadata(
+  props: BlogRouteProps,
+): Promise<Metadata> {
+  const { slug } = await props.params;
+  const source = props.blogSource ?? defaultBlogSource;
+
+  if (slug && slug.length > 0) {
+    const page = source.getPage(slug);
+    if (page) {
+      const data = page.data as unknown as BlogFrontmatter;
+      const ogImageUrl = getOgImageUrl({
+        title: data.title,
+        schemaType: "BlogPosting",
+      });
+      return {
+        openGraph: { images: [ogImageUrl] },
+        twitter: { images: [ogImageUrl] },
+      };
+    }
+  }
+
+  const ogImageUrl = getOgImageUrl({ title: "Blog", schemaType: "BlogPosting" });
+  return {
+    openGraph: { images: [ogImageUrl] },
+    twitter: { images: [ogImageUrl] },
+  };
+}
+
+export default async function BlogRoute(
+  props: BlogRouteProps,
+): Promise<ReactElement> {
+  const { locale, slug } = await props.params;
+  const t = await getTranslations("blog");
+  const source = props.blogSource ?? defaultBlogSource;
+
+  if (slug && slug.length > 0) {
+    const page = source.getPage(slug);
+    if (!page) notFound();
+
+    // Fumadocs' `PageData` is opaque; the frontmatter contract is enforced
+    // by the `defineDocs` schema in source.config.ts at build time.
+    const data = page.data as unknown as BlogPostPageData;
+    const jsonLd = blogPostingJsonLd({
+      slug: slug.join("/"),
+      title: data.title,
+      description: data.description,
+      locale,
+      ...(data.date !== undefined && { publishedAt: data.date }),
+      ...(data.updated !== undefined && { updatedAt: data.updated }),
+      ...(data.image !== undefined && { image: data.image }),
+    });
+
+    // The compiled MDX body renders through the section's `children` slot so it
+    // keeps full formatting; the section maps the rest of the post (#2714).
+    const MDXBody = data.body;
+
+    return (
+      <>
+        <JsonLdScript data={jsonLd} />
+        <main>
+          <BlogPost sectionName="blog-post" data={toBlogPostData(data)}>
+            {MDXBody ? <MDXBody /> : null}
+          </BlogPost>
+        </main>
+      </>
+    );
+  }
+
+  const pages = source.getPages();
+
+  const indexJsonLd = blogListJsonLd({
+    slug: "blog",
+    title: "Blog",
+    description: "Writing on AEO and AX-first software.",
+    locale,
+  });
+
+  if (pages.length === 0) {
+    return (
+      <>
+        <JsonLdScript data={indexJsonLd} />
+        <main>
+          <h1>{t("heading")}</h1>
+          <p
+            data-testid="blog-empty-placeholder"
+            data-sentinel={BLOG_EMPTY_SENTINEL}
+          >
+            {t("emptyState")} <code>{"content/blog/"}</code>{" "}
+            {t("emptyStateTrailing")}
+          </p>
+        </main>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <JsonLdScript data={indexJsonLd} />
+      <main>
+        <h1>{t("heading")}</h1>
+        <BlogList sectionName="blog-list" data={toBlogListData(pages)} />
+      </main>
+    </>
+  );
+}

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

@@ -0,0 +1,45 @@
+// JobPosting detail page. Reads the JobPosting MDX for the given slug, renders via
+// next-mdx-remote/rsc, and emits a JSON-LD <script>. Unknown slugs trigger 404.
+// Careers list at /careers links here; each job posting lives at /careers/<slug>.
+import {
+  getMdxSource as defaultGetMdxSource,
+  getMdxSlugs,
+  renderPage,
+} from "@working-theory/page-renderer";
+import { notFound } from "next/navigation";
+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("JobPosting", params.locale);
+  return slugs.map((slug: string) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource = defaultGetMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  const source = await getMdxSource("JobPosting", slug, locale);
+
+  if (!source) {
+    notFound();
+  }
+
+  return renderPage({
+    type: "JobPosting",
+    slug,
+    locale,
+    translationsNamespace: "careers",
+    bodyMode: "mdx-body",
+    getMdxSource: async () => source,
+  });
+}

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

@@ -0,0 +1,117 @@
+/**
+ * HTML snapshot regression tests for the careers routes → @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 across environments.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration routes (RED-passing).
+ *   Commit 2: routes migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Each route is tested in two states:
+ *   - 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.
+ * A non-zero diff indicates a behavior regression in the migration. Escalate.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+// ── next/navigation mock ───────────────────────────────────────────────────────
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+// ── next-mdx-remote/rsc mock ───────────────────────────────────────────────────
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }) =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+// ── Import page components ─────────────────────────────────────────────────────
+import CareersPage from "../page";
+import CareersSlugPage from "../[slug]/page";
+
+// ── Shared stubs ───────────────────────────────────────────────────────────────
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+
+// ── careers/page (index) ───────────────────────────────────────────────────────
+
+describe("careers/page — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await CareersPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Careers</h1><p data-testid="section-empty-state">Career listings coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "CareersList",
+        slug: "careers",
+        title: "Careers at AILK",
+        description: "Join the team building the AX-first platform.",
+      },
+      body: "mdx-body-content",
+    });
+
+    const element = await CareersPage({
+      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":"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>"`,
+    );
+  });
+});
+
+// ── careers/[slug]/page (detail) ───────────────────────────────────────────────
+
+describe("careers/[slug]/page — snapshot regression", () => {
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "JobPosting",
+        slug: "senior-engineer",
+        title: "Senior Engineer",
+        description: "Build the AILK platform.",
+      },
+      body: "mdx-body-content",
+    });
+
+    const element = await CareersSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "senior-engineer" }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    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>"`,
+    );
+  });
+
+  it("null source triggers notFound()", async () => {
+    const { notFound } = jest.requireMock("next/navigation") as {
+      notFound: jest.MockedFunction<() => never>;
+    };
+    notFound.mockClear();
+
+    await expect(
+      CareersSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown" }),
+        getMdxSource: getMdxSourceEmpty,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(notFound).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,25 @@
+// 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 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: "CareersList",
+    slug: "careers",
+    locale,
+    translationsNamespace: "careers",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,44 @@
+// Case Study detail page. Reads the CaseStudy MDX for the given slug, renders via
+// next-mdx-remote/rsc, and emits a JSON-LD <script>. Unknown slugs trigger 404.
+import {
+  getMdxSource as defaultGetMdxSource,
+  getMdxSlugs,
+  renderPage,
+} from "@working-theory/page-renderer";
+import { notFound } from "next/navigation";
+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("CaseStudy", params.locale);
+  return slugs.map((slug: string) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource = defaultGetMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  const source = await getMdxSource("CaseStudy", slug, locale);
+
+  if (!source) {
+    notFound();
+  }
+
+  return renderPage({
+    type: "CaseStudy",
+    slug,
+    locale,
+    translationsNamespace: "case-studies",
+    bodyMode: "mdx-body",
+    getMdxSource: async () => source,
+  });
+}

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

@@ -0,0 +1,113 @@
+/**
+ * HTML snapshot regression tests for the case-studies routes → @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 across environments.
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration routes (RED-passing).
+ *   Commit 2: routes migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * 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";
+
+// ── next/navigation mock ───────────────────────────────────────────────────────
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+
+// ── next-mdx-remote/rsc mock ───────────────────────────────────────────────────
+jest.mock("next-mdx-remote/rsc", () => ({
+  __esModule: true,
+  MDXRemote: ({ source }: { source: string }) =>
+    React.createElement("div", { "data-testid": "mdx-rendered" }, source),
+}));
+
+// ── Import page components ─────────────────────────────────────────────────────
+import CaseStudiesPage from "../page";
+import CaseStudySlugPage from "../[slug]/page";
+
+// ── Shared stubs ───────────────────────────────────────────────────────────────
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+
+// ── case-studies/page (index) ─────────────────────────────────────────────────
+
+describe("case-studies/page — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await CaseStudiesPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    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>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "CaseStudiesList",
+        slug: "case-studies",
+        title: "Case Studies",
+        description: "Real-world accounts of teams using AI Launch Kit.",
+      },
+      body: "mdx-body-content",
+    });
+
+    const element = await CaseStudiesPage({
+      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":"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>"`,
+    );
+  });
+});
+
+// ── case-studies/[slug]/page (detail) ────────────────────────────────────────
+
+describe("case-studies/[slug]/page — snapshot regression", () => {
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "CaseStudy",
+        slug: "ailk-aeo-rollout",
+        title: "AILK AEO Rollout",
+        description: "How a team shipped AEO with AI Launch Kit.",
+      },
+      body: "mdx-body-content",
+    });
+
+    const element = await CaseStudySlugPage({
+      params: Promise.resolve({ locale: "en", slug: "ailk-aeo-rollout" }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    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>"`,
+    );
+  });
+
+  it("null source triggers notFound()", async () => {
+    const { notFound } = jest.requireMock("next/navigation") as {
+      notFound: jest.MockedFunction<() => never>;
+    };
+    notFound.mockClear();
+
+    await expect(
+      CaseStudySlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown" }),
+        getMdxSource: getMdxSourceEmpty,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(notFound).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,25 @@
+// 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 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: "CaseStudiesList",
+    slug: "case-studies",
+    locale,
+    translationsNamespace: "case-studies",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,63 @@
+/**
+ * HTML snapshot regression tests for clients/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 ClientsPage from "../page";
+
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+
+describe("ClientsPage — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await ClientsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Clients</h1><p data-testid="section-empty-state">Clients listing coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = {
+      frontmatter: {
+        type: "ClientsList" as const,
+        slug: "clients",
+        title: "Our Clients",
+        description: "Companies that trust us.",
+      },
+      body: "",
+    };
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+
+    const element = await ClientsPage({
+      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":"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>"`,
+    );
+  });
+});

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

@@ -0,0 +1,27 @@
+// Clients list page. Reads ClientsList 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: "ClientsList",
+    slug: "clients",
+    locale,
+    translationsNamespace: "clients",
+    bodyMode: "mdx-body",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}