create-ailk 0.26.0 → 0.28.0

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

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

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

@@ -0,0 +1,203 @@
+/**
+ * Tests for /templates/[slug] (#10051 D7, AC-5) — the TemplatePage detail
+ * route. `renderPage`/`renderPageMetadata` are mocked at the
+ * `@working-theory/page-renderer` boundary (the /vs/[slug] shape) and each
+ * assertion inspects the sections the route hands `renderPage`; the unknown-
+ * slug case runs the real `renderPage` so its notFound() is observed. The
+ * JSON-LD is the real builder over the real `toContentPageInput`, the path
+ * `renderPage` takes.
+ */
+
+const mockRenderPage = jest.fn(
+  async (..._args: unknown[]): Promise<unknown> => "<rendered/>",
+);
+const mockRenderPageMetadata = jest.fn((..._args: unknown[]) => undefined);
+const mockNotFound = jest.fn(() => {
+  throw new Error("NEXT_NOT_FOUND");
+});
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: () => mockNotFound(),
+  redirect: jest.fn(),
+}));
+
+jest.mock("@working-theory/page-renderer", () => ({
+  ...jest.requireActual("@working-theory/page-renderer"),
+  renderPage: (...args: unknown[]) => mockRenderPage(...args),
+  renderPageMetadata: (...args: unknown[]) => mockRenderPageMetadata(...args),
+}));
+
+const MESSAGES: Record<string, string> = {
+  getIt: "Get it",
+  startFree: "Start free",
+  viewDemo: "View demo",
+  viewTemplate: "View template",
+  included: "What's included",
+  demoBadge: "Live demo",
+};
+
+jest.mock("next-intl/server", () => ({
+  __esModule: true,
+  getTranslations: () => Promise.resolve((key: string) => MESSAGES[key] ?? key),
+}));
+
+import { pageToJsonLd } from "@working-theory/page-renderer";
+
+import TemplateDetailPage, { generateMetadata } from "../page";
+
+const A = {
+  type: "TemplatePage",
+  slug: "a",
+  title: "Template A",
+  description: "Description A.",
+  summary: "Summary A.",
+  price: 0,
+  priceCurrency: "USD",
+  demoUrl: "https://a.salessmyth.com",
+  categories: ["accounting"],
+  thumbnail: "/img/a.png",
+  getItUrl: "/contact",
+  includes: [
+    { title: "Base site", description: "Pages and structured data." },
+    { title: "Marketing", description: "Landing pages." },
+  ],
+};
+
+const B = {
+  type: "TemplatePage",
+  slug: "b",
+  title: "Template B",
+  description: "Description B.",
+  getItUrl: "/contact",
+  includes: [{ title: "Base site", description: "Pages and structured data." }],
+};
+
+type Section = { type: string; id: string; data: Record<string, unknown> };
+
+async function sectionsFor(
+  frontmatter: Record<string, unknown>,
+  declared: Section[] = [],
+) {
+  await TemplateDetailPage({
+    params: Promise.resolve({ locale: "en", slug: String(frontmatter.slug) }),
+    getMdxSource: jest
+      .fn()
+      .mockResolvedValue({ frontmatter, body: "" }) as never,
+    getPageSections: jest.fn(async () => declared) as never,
+  });
+  const input = mockRenderPage.mock.calls[0]![0] as {
+    type: string;
+    translationsNamespace?: string;
+    getPageSections: (fm: unknown) => Promise<Section[]>;
+  };
+  return { input, sections: await input.getPageSections(frontmatter) };
+}
+
+beforeEach(() => jest.clearAllMocks());
+
+describe("TemplatePage detail — metadata", () => {
+  it("resolves metadata for the given slug", async () => {
+    await generateMetadata({
+      params: Promise.resolve({ locale: "en", slug: "a" }),
+    });
+    expect(mockRenderPageMetadata).toHaveBeenCalledWith({
+      type: "TemplatePage",
+      slug: "a",
+      locale: "en",
+    });
+  });
+});
+
+describe("TemplatePage detail — the generated sections (#10051 AC-5)", () => {
+  it("renders TemplatePage with no translations namespace", async () => {
+    const { input } = await sectionsFor(A);
+    expect(input.type).toBe("TemplatePage");
+    expect(input.translationsNamespace).toBeUndefined();
+  });
+
+  it("leads with a hero carrying the title, summary, thumbnail, Start free and View demo", async () => {
+    const { sections } = await sectionsFor(A);
+    expect(sections[0]).toMatchObject({
+      type: "hero",
+      data: {
+        headline: "Template A",
+        subheadline: "Summary A.",
+        image: { src: "/img/a.png", alt: "Template A" },
+        primaryCta: { label: "Start free", href: "/contact" },
+        secondaryCta: { label: "View demo", href: "https://a.salessmyth.com" },
+      },
+    });
+  });
+
+  it("renders What's included with one item per includes row", async () => {
+    const { sections } = await sectionsFor(A);
+    const included = sections.find((s) => s.id === "template-included");
+    expect(included?.data.headline).toBe("What's included");
+    expect(included?.data.items).toHaveLength(2);
+  });
+
+  it("renders Get it and no View demo for a priceless page without a demo", async () => {
+    const { sections } = await sectionsFor(B);
+    expect(sections[0]!.data.primaryCta).toEqual({
+      label: "Get it",
+      href: "/contact",
+    });
+    expect(sections[0]!.data).not.toHaveProperty("secondaryCta");
+  });
+
+  it("keeps an author's own leading hero and still renders What's included", async () => {
+    const own = {
+      type: "hero",
+      id: "own-hero",
+      data: { headline: "My own hero" },
+    };
+    const { sections } = await sectionsFor(A, [own]);
+    expect(sections.filter((s) => s.type === "hero").map((s) => s.id)).toEqual([
+      "own-hero",
+    ]);
+    // The author's hero leads (spec Clarification); What's included follows it.
+    expect(sections.map((s) => s.id)).toEqual([
+      "own-hero",
+      "template-included",
+    ]);
+  });
+
+  it("emits a Product main entity carrying an offers node", async () => {
+    const emitted = await pageToJsonLd(A as never, "en");
+    const graph = (emitted as { "@graph"?: unknown[] })["@graph"];
+    const blocks = (graph ??
+      (Array.isArray(emitted) ? emitted : [emitted])) as Array<
+      Record<string, unknown>
+    >;
+    const page = blocks.find((b) => b["@type"] === "WebPage") as {
+      mainEntity: Record<string, unknown>;
+    };
+    expect(page.mainEntity["@type"]).toBe("Product");
+    expect(page.mainEntity.offers).toMatchObject({
+      "@type": "Offer",
+      price: "0",
+    });
+    expect(String((page.mainEntity.offers as { url: string }).url)).toMatch(
+      /\/contact$/,
+    );
+  });
+});
+
+describe("TemplatePage detail — unknown slug", () => {
+  it("calls notFound through renderPage's detail branch", async () => {
+    const actual = jest.requireActual("@working-theory/page-renderer") as {
+      renderPage: (...args: unknown[]) => Promise<unknown>;
+    };
+    mockRenderPage.mockImplementationOnce((...args) =>
+      actual.renderPage(...args),
+    );
+    await expect(
+      TemplateDetailPage({
+        params: Promise.resolve({ locale: "en", slug: "no-such-template" }),
+        getMdxSource: jest.fn().mockResolvedValue(null) as never,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,81 @@
+// TemplatePage detail (#10051 D7) — one template at /templates/<slug>,
+// listed by the /templates hub. Reads the TemplatePage MDX for the given
+// slug and renders in sections mode: a generated hero (name, summary,
+// thumbnail, categories, Get it / Start free, View demo) and "What's
+// included", built from the frontmatter, then the page's own declared
+// sections. A page whose first declared section is a `hero` keeps its own
+// hero and drops the generated one. JSON-LD: a WebPage whose mainEntity is a
+// schema.org Product carrying an Offer. Unknown slugs 404 through
+// renderPage's detail branch.
+//
+// Gated off by default (surfaces.ts `templates` surface): no roster names
+// this route, so a fresh scaffold excludes it. `create-ailk add-route
+// templates` installs it.
+import type {
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections,
+} from "@working-theory/page-renderer";
+import {
+  getPageSections as loadPageSections,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import {
+  templateDetailSections,
+  templateLabels,
+} from "../../../../lib/template-listing";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+}
+
+type Section = Awaited<ReturnType<typeof defaultGetPageSections>>[number];
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "TemplatePage", slug, locale });
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+  getPageSections,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  const loadSections = getPageSections ?? loadPageSections;
+
+  /**
+   * The generated sections first, then the declared ones. Runs only when a
+   * source exists, so the translations read here never shadows renderPage's
+   * null-source 404 (no `translationsNamespace` is passed, #7537).
+   */
+  async function withTemplate(frontmatter: unknown): Promise<Section[]> {
+    const declared = await loadSections(frontmatter);
+    const t = await getTranslations({ namespace: "templates", locale });
+    const [hero, included] = templateDetailSections(
+      frontmatter,
+      templateLabels(t),
+    );
+    // An author's own leading hero takes the generated hero's place at the top.
+    const [first, ...rest] = declared;
+    return first?.type === "hero"
+      ? [first, included, ...rest]
+      : [hero, included, ...declared];
+  }
+
+  return renderPage({
+    type: "TemplatePage",
+    slug,
+    locale,
+    getPageSections: withTemplate,
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,236 @@
+/**
+ * Tests for /templates (#10051 D7, AC-4) — the TemplatesList hub.
+ *
+ * `renderPage`/`renderPageMetadata`/`getMdxSlugs` are mocked at the
+ * `@working-theory/page-renderer` boundary, the /reports test shape — each
+ * assertion inspects the sections the route hands `renderPage`. The JSON-LD
+ * is built from those same sections with the real `buildTemplatesList`, as
+ * `renderPage` does, so the card count and the ItemList are compared on one
+ * input.
+ */
+import { buildTemplatesList } from "@working-theory/schema";
+
+const mockRenderPage = jest.fn(async (..._args: unknown[]) => "<rendered/>");
+const mockRenderPageMetadata = jest.fn((..._args: unknown[]) => undefined);
+const mockGetMdxSlugs = jest.fn((..._args: unknown[]) =>
+  Promise.resolve<string[]>([]),
+);
+const mockNotFound = jest.fn(() => {
+  throw new Error("NEXT_NOT_FOUND");
+});
+
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: () => mockNotFound(),
+}));
+
+jest.mock("@working-theory/page-renderer", () => ({
+  __esModule: true,
+  getMdxSlugs: (...args: unknown[]) => mockGetMdxSlugs(...args),
+  renderPage: (...args: unknown[]) => mockRenderPage(...args),
+  renderPageMetadata: (...args: unknown[]) => mockRenderPageMetadata(...args),
+  // Never reached — every call in this suite passes both via DI props.
+  getMdxSource: jest.fn(),
+  getPageSections: jest.fn(),
+}));
+
+const MESSAGES: Record<string, string> = {
+  emptyState: "Templates coming soon.",
+  getIt: "Get it",
+  startFree: "Start free",
+  viewDemo: "View demo",
+  viewTemplate: "View template",
+  included: "What's included",
+  demoBadge: "Live demo",
+};
+
+jest.mock("next-intl/server", () => ({
+  __esModule: true,
+  getTranslations: () => Promise.resolve((key: string) => MESSAGES[key] ?? key),
+}));
+
+import TemplatesPage, { generateMetadata } from "../page";
+
+const HUB_SOURCE = {
+  frontmatter: {
+    type: "TemplatesList",
+    slug: "templates",
+    title: "Templates",
+    description: "Every template we sell.",
+  },
+  body: "",
+};
+
+const TEMPLATE_SOURCES: Record<
+  string,
+  { frontmatter: Record<string, unknown>; body: string }
+> = {
+  a: {
+    frontmatter: {
+      type: "TemplatePage",
+      slug: "a",
+      title: "Template A",
+      description: "Description A.",
+      summary: "Summary A.",
+      price: 0,
+      priceCurrency: "USD",
+      demoUrl: "https://a.salessmyth.com",
+      categories: ["accounting"],
+      thumbnail: "/img/a.png",
+      getItUrl: "/contact",
+      includes: [{ title: "Base site", description: "Pages." }],
+    },
+    body: "",
+  },
+  b: {
+    frontmatter: {
+      type: "TemplatePage",
+      slug: "b",
+      title: "Template B",
+      description: "Description B.",
+      getItUrl: "/contact",
+      includes: [{ title: "Base site", description: "Pages." }],
+    },
+    body: "",
+  },
+  c: {
+    frontmatter: {
+      type: "TemplatePage",
+      slug: "c",
+      title: "Template C",
+      description: "Description C.",
+      getItUrl: "/contact",
+      includes: [{ title: "Base site", description: "Pages." }],
+    },
+    body: "",
+  },
+};
+
+const CTA = { type: "cta", id: "closing", data: { headline: "Talk to us" } };
+
+function loaderFor(slugs: string[]) {
+  mockGetMdxSlugs.mockResolvedValue([...slugs].reverse());
+  return jest.fn(async (type: string, slug: string) => {
+    if (type === "TemplatesList") return HUB_SOURCE;
+    return slugs.includes(slug) ? (TEMPLATE_SOURCES[slug] ?? null) : null;
+  });
+}
+
+type Section = { type: string; id: string; data: Record<string, unknown> };
+
+async function renderedSections(slugs: string[], declared: Section[] = [CTA]) {
+  await TemplatesPage({
+    params: Promise.resolve({ locale: "en" }),
+    getMdxSource: loaderFor(slugs) as never,
+    getPageSections: jest.fn(async () => declared) as never,
+  });
+  const input = mockRenderPage.mock.calls[0]![0] as {
+    getPageSections: (fm: unknown) => Promise<Section[]>;
+  };
+  return input.getPageSections(HUB_SOURCE.frontmatter);
+}
+
+function cardsOf(sections: Section[]) {
+  const grid = sections.find((s) => s.id === "template-cards");
+  return (grid?.data.items ?? []) as Array<Record<string, unknown>>;
+}
+
+beforeEach(() => jest.clearAllMocks());
+
+describe("TemplatesPage — hub seed absent", () => {
+  it("calls notFound() and never reaches renderPage", async () => {
+    await expect(
+      TemplatesPage({
+        params: Promise.resolve({ locale: "en" }),
+        getMdxSource: jest.fn().mockResolvedValue(null),
+        getPageSections: jest.fn(),
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalledTimes(1);
+    expect(mockRenderPage).not.toHaveBeenCalled();
+  });
+});
+
+describe("TemplatesPage — metadata", () => {
+  it("resolves TemplatesList slug templates", async () => {
+    await generateMetadata({ params: Promise.resolve({ locale: "en" }) });
+    expect(mockRenderPageMetadata).toHaveBeenCalledWith({
+      type: "TemplatesList",
+      slug: "templates",
+      locale: "en",
+    });
+  });
+});
+
+describe("TemplatesPage — the generated card grid (#10051 AC-4)", () => {
+  it("renders TemplatesList with the templates namespace", async () => {
+    await renderedSections(["a", "b"]);
+    expect(mockRenderPage.mock.calls[0]![0]).toMatchObject({
+      type: "TemplatesList",
+      slug: "templates",
+      translationsNamespace: "templates",
+    });
+  });
+
+  it("renders two cards in slug order with every D2 field present", async () => {
+    const cards = cardsOf(await renderedSections(["a", "b"]));
+    expect(cards).toEqual([
+      {
+        title: "Template A",
+        description: "Summary A.",
+        image: { src: "/img/a.png", alt: "Template A" },
+        eyebrow: "Accounting",
+        badge: "Live demo",
+        link: { label: "View template", href: "/templates/a" },
+      },
+      {
+        title: "Template B",
+        description: "Description B.",
+        link: { label: "View template", href: "/templates/b" },
+      },
+    ]);
+  });
+
+  it("renders three cards when a third source is added, with no hub change", async () => {
+    expect(cardsOf(await renderedSections(["a", "b", "c"]))).toHaveLength(3);
+  });
+
+  it("places the generated section before the seed's trailing cta", async () => {
+    const hero = {
+      type: "hero",
+      id: "hub-hero",
+      data: { headline: "Templates" },
+    };
+    const sections = await renderedSections(["a"], [hero, CTA]);
+    expect(sections.map((s) => s.id)).toEqual([
+      "hub-hero",
+      "template-cards",
+      "closing",
+    ]);
+  });
+
+  it("renders the empty-state note and no card with zero sources", async () => {
+    const sections = await renderedSections([]);
+    expect(cardsOf(sections)).toHaveLength(0);
+    expect(sections.find((s) => s.id === "template-cards-empty")?.data).toEqual(
+      {
+        body: "Templates coming soon.",
+        align: "center",
+      },
+    );
+  });
+
+  it("emits an ItemList with as many elements as cards", async () => {
+    const sections = await renderedSections(["a", "b", "c"]);
+    const jsonLd = buildTemplatesList({
+      type: "TemplatesList",
+      slug: "templates",
+      title: "Templates",
+      description: "Every template we sell.",
+      sections,
+    } as never) as unknown as { mainEntity: { itemListElement: unknown[] } };
+    expect(jsonLd.mainEntity.itemListElement).toHaveLength(
+      cardsOf(sections).length,
+    );
+  });
+});

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

@@ -0,0 +1,108 @@
+// TemplatesList hub (#10051 D7) — the /templates page. Reads the
+// TemplatesList MDX via the content adapter, inserts one generated `items`
+// section carrying a card per TemplatePage (so the visible card grid and the
+// CollectionPage's ItemList JSON-LD — built from the same sections — always
+// agree, the /alternatives shape), and emits via the dispatcher.
+//
+// notFound() when the hub seed is absent (the /alternatives rule). With zero
+// TemplatePage files the generated section is a content-block carrying the
+// translated empty-state note (the /reports rule). Either sits before the
+// page's trailing closing CTA(s) (#7745 D4).
+//
+// Gated off by default (surfaces.ts `templates` surface): no roster names
+// this route, so a fresh scaffold excludes it. `create-ailk add-route
+// templates` installs it with one seed per AILK template.
+import type {
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections,
+} from "@working-theory/page-renderer";
+import {
+  getMdxSource as loadMdxSource,
+  getPageSections as loadPageSections,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import {
+  insertBeforeClosingCtas,
+  listDetailPages,
+} from "../../../lib/route-family";
+import { templateCard, templateLabels } from "../../../lib/template-listing";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+}
+
+type Section = Awaited<ReturnType<typeof defaultGetPageSections>>[number];
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale } = await params;
+  return renderPageMetadata({
+    type: "TemplatesList",
+    slug: "templates",
+    locale,
+  });
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+  getPageSections,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const load = getMdxSource ?? loadMdxSource;
+  const loadSections = getPageSections ?? loadPageSections;
+
+  const source = await load("TemplatesList", "templates", locale);
+  if (source === null) {
+    notFound();
+  }
+
+  const pages = await listDetailPages("TemplatePage", locale, load);
+  const t = await getTranslations({ namespace: "templates", locale });
+  const labels = templateLabels(t);
+
+  /**
+   * One generated section listing every TemplatePage — D4's "lists every
+   * template page automatically", and the ItemList JSON-LD agrees with it
+   * because `renderPage` builds both from these sections.
+   */
+  async function withTemplates(frontmatter: unknown): Promise<Section[]> {
+    const declared = await loadSections(frontmatter);
+    const generated: Section =
+      pages.length > 0
+        ? {
+            type: "items",
+            id: "template-cards",
+            // A tile is one click target per card (design review round 1, B1).
+            data: {
+              variant: "tile",
+              tileHover: "outline",
+              items: pages.map((page) => templateCard(page, labels)),
+            },
+          }
+        : {
+            type: "content-block",
+            id: "template-cards-empty",
+            data: { body: t("emptyState"), align: "center" },
+          };
+    return insertBeforeClosingCtas(declared, generated);
+  }
+
+  return renderPage({
+    type: "TemplatesList",
+    slug: "templates",
+    locale,
+    translationsNamespace: "templates",
+    getPageSections: withTemplates,
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}