npm - create-ailk - Versions diffs - 0.1.0 - Mend

create-ailk 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (533) hide show

package/templates/apps/web/app/[locale]/layout.tsx ADDED Viewed

@@ -0,0 +1,241 @@
+// i18n S2 — Locale-aware root layout (#949)
+// i18n P2 S1 — hreflang Metadata API alternates.languages (#972)
+// Theme 1.9 — SSR theme + flash-prevention + CSS vars + meta + JSON-LD (#1322)
+// Chrome extract — Nav + Footer from @working-theory/ui (#1451)
+// Shell/Chrome composition — Nav + Footer wrap via @working-theory/templates MarketingShell (#2820)
+//
+// Sits under app/[locale]/ and sets the <html lang> attribute to the
+// active locale. next-intl's NextIntlClientProvider is wired here so
+// Client Components can call useTranslations() inside this subtree.
+//
+// The outer app/layout.tsx remains as a root shell that renders children;
+// this layout handles the locale-specific <html> / <body> tree.
+//
+// Spec: docs/internal/specs/i18n-phase1-s2-next-intl-foundation-spec.md §4
+// Spec: docs/internal/specs/i18n-phase2-s1-hreflang-metadata-spec.md
+// Spec: docs/internal/specs/theme-wiring-phase1-site-rendering-spec.md
+import { Telemetry, VerificationMeta } from "@working-theory/analytics";
+import { MarketingShell } from "@working-theory/templates/shells";
+import { themeToCssVars } from "@working-theory/theme";
+import { isRtl } from "@working-theory/ui";
+import { Footer, Nav } from "@working-theory/ui/chrome";
+import {
+  buildHreflangAlternates,
+  getStealthRobots,
+  readLocales,
+} from "@working-theory/web-i18n";
+import type { Metadata, Viewport } from "next";
+import { cookies, headers } from "next/headers";
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages, getTranslations } from "next-intl/server";
+import type { ReactElement, ReactNode } from "react";
+import { GoogleAnalytics } from "../../components/google-analytics";
+import { navItems } from "../../lib/nav-config";
+import { getOgImageUrl } from "../../lib/og";
+import { resolveBaseUrl } from "../../src/lib/routes";
+// ── Constants ────────────────────────────────────────────────────────────────
+const SITE_NAME = process.env.NEXT_PUBLIC_SITE_NAME ?? "AI Launch Kit";
+const DEFAULT_LOCALE = "en";
+const THEME_COOKIE_NAME =
+  process.env.NEXT_PUBLIC_THEME_COOKIE_NAME ?? "ailk-theme";
+type ThemeMode = "light" | "dark";
+// ── Theme helpers ────────────────────────────────────────────────────────────
+/**
+ * Server-side theme resolution.
+ *
+ * Cookie values: "light" | "dark" → pass through directly.
+ * Cookie value "system" or absent  → cannot resolve OS preference server-side,
+ * so we fall back to "light" for the initial HTML. The blocking inline script
+ * below immediately corrects this before first paint using matchMedia.
+ */
+async function resolveThemeMode(): Promise<ThemeMode> {
+  try {
+    const cookieStore = await cookies();
+    const value = cookieStore.get(THEME_COOKIE_NAME)?.value;
+    if (value === "dark") return "dark";
+    if (value === "light") return "light";
+    // "system" or absent — use light as SSR default; inline script corrects before paint
+    return "light";
+  } catch {
+    return "light";
+  }
+}
+/**
+ * Blocking inline script that runs synchronously before any styled element.
+ *
+ * Resolves the effective theme from the cookie:
+ *   - "light" or "dark" → apply directly.
+ *   - "system" or absent → resolve via prefers-color-scheme.
+ *
+ * This ensures data-theme is never the literal "system" and there is no
+ * flash of unstyled/wrong-theme content on page load.
+ */
+const FLASH_PREVENTION_SCRIPT = `(function(){
+  var c=document.cookie.match(/(?:^|;\\s*)${THEME_COOKIE_NAME}=([^;]+)/);
+  var v=c?c[1]:null;
+  var t=(v==='light'||v==='dark')?v:window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
+  document.documentElement.setAttribute('data-theme',t);
+})();`;
+// ── Metadata ─────────────────────────────────────────────────────────────────
+export async function generateMetadata(): Promise<Metadata> {
+  const ogImageUrl = getOgImageUrl({ title: SITE_NAME, schemaType: "WebSite" });
+  const headerStore = await headers();
+  const pathname = headerStore.get("x-pathname") ?? "/";
+  const locales = readLocales();
+  const baseUrl = resolveBaseUrl();
+  const languages = buildHreflangAlternates(
+    pathname,
+    locales,
+    DEFAULT_LOCALE,
+    baseUrl,
+  );
+  return {
+    title: "AI Launch Kit",
+    description: "AX-first OSS template — API + MCP as canonical surfaces.",
+    openGraph: {
+      title: "AI Launch Kit",
+      description: "AX-first OSS template — API + MCP as canonical surfaces.",
+      type: "website",
+      url: baseUrl,
+      images: [ogImageUrl],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: "AI Launch Kit",
+      description: "AX-first OSS template — API + MCP as canonical surfaces.",
+      images: [ogImageUrl],
+    },
+    ...getStealthRobots(),
+    alternates: {
+      canonical: baseUrl,
+      languages,
+    },
+  };
+}
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+// ── Layout ───────────────────────────────────────────────────────────────────
+interface Props {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}
+export default async function LocaleLayout({
+  children,
+  params,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const messages = await getMessages();
+  const themeMode = await resolveThemeMode();
+  // Resolve nav labels server-side so Nav + Footer components stay
+  // i18n-hook-free and are testable without a NextIntlClientProvider wrapper.
+  const tNav = await getTranslations({ locale, namespace: "nav" });
+  const navLabels = {
+    items: {
+      home: tNav("home"),
+      docs: tNav("docs"),
+      blog: tNav("blog"),
+    },
+    openMenu: tNav("openMenu"),
+    closeMenu: tNav("closeMenu"),
+  };
+  // Shared brand mark injected into both Nav and Footer chrome slots.
+  const siteLogo = (
+    <>
+      <img src="/logo-light.svg" alt={SITE_NAME} height={28} className="block dark:hidden" />
+      <img src="/logo-dark.svg" alt={SITE_NAME} height={28} className="hidden dark:block" />
+    </>
+  );
+  const cssVars = themeToCssVars({ mode: themeMode });
+  const inlineThemeStyle = `:root { ${cssVars} }`;
+  return (
+    <html lang={locale} dir={isRtl(locale) ? "rtl" : "ltr"} data-theme={themeMode}>
+      <head>
+        {/* Flash-prevention: runs synchronously before any styled element */}
+        <script
+          data-testid="theme-flash-prevention"
+          dangerouslySetInnerHTML={{ __html: FLASH_PREVENTION_SCRIPT }}
+        />
+        {/* Inline CSS-variable declarations for the active theme mode */}
+        <style
+          data-ailk="theme-vars"
+          dangerouslySetInnerHTML={{ __html: inlineThemeStyle }}
+        />
+        {/* Favicons — single brand mark (theme-independent), PNG fallbacks, ICO legacy */}
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <GoogleAnalytics />
+        <VerificationMeta />
+      </head>
+      <body>
+        <NextIntlClientProvider messages={messages}>
+          {/*
+           * Shell + Chrome compose at the layout layer (decision: #2820, #2862).
+           * MarketingShell is a slot-frame (geometry only); the layer injects the
+           * real Nav + Footer into its top-/bottom-chrome slots — the per-app
+           * navItems, labels, siteName, logo, and attribution live here, not in
+           * the shell. renderPage owns the <main>/<h1>/<p> document landmarks
+           * (ADR-0027), so contentOwnsMain keeps the shell's content slot a
+           * non-landmark <div> — exactly one <main> per page. Attribution is
+           * emitted unconditionally in OSS forks; paying customers install
+           * @working-theory/branding and gate it in their own layout.
+           */}
+          <MarketingShell
+            contentOwnsMain
+            nav={
+              <Nav
+                locale={locale}
+                labels={navLabels}
+                navItems={navItems}
+                siteName={SITE_NAME}
+                logo={siteLogo}
+              />
+            }
+            footer={
+              <Footer
+                locale={locale}
+                itemLabels={navLabels.items}
+                navItems={navItems}
+                siteName={SITE_NAME}
+                logo={siteLogo}
+                attribution={{
+                  label: "Built with AI Launch Kit",
+                  href: "https://ailaunchkit.ai",
+                }}
+              />
+            }
+          >
+            {children}
+          </MarketingShell>
+          <Telemetry />
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

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

@@ -0,0 +1,41 @@
+// i18n S2 — Home page under [locale] segment (#949)
+//
+// Migrated from app/page.tsx to app/[locale]/page.tsx.
+// Reads the HomePage MDX frontmatter, renders sections via SectionRenderer,
+// and emits a JSON-LD <script> for crawlers.
+import type {
+  getMdxSource as defaultGetMdxSource,
+  getPageSections as defaultGetPageSections} from "@working-theory/page-renderer";
+import {
+  renderPage
+} from "@working-theory/page-renderer";
+import type { ReactElement } from "react";
+interface Props {
+  params: Promise<{ locale: string }>;
+  /**
+   * Overrides for testing — inject stubs to avoid mocking internal modules.
+   * Production code leaves these undefined and uses the real implementations.
+   */
+  getMdxSource?: typeof defaultGetMdxSource;
+  getPageSections?: typeof defaultGetPageSections;
+}
+export default async function Page({
+  params,
+  getMdxSource,
+  getPageSections,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  return renderPage({
+    type: "HomePage",
+    slug: "home",
+    locale,
+    translationsNamespace: "home",
+    populatedDescriptionTestId: "home-description",
+    emptyStateTestId: "home-description",
+    ...(getMdxSource !== undefined && { getMdxSource }),
+    ...(getPageSections !== undefined && { getPageSections }),
+  });
+}

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

@@ -0,0 +1,44 @@
+// Partner detail page. Reads the Partner 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("Partner", 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("Partner", slug, locale);
+  if (!source) {
+    notFound();
+  }
+  return renderPage({
+    type: "Partner",
+    slug,
+    locale,
+    translationsNamespace: "partners",
+    bodyMode: "mdx-body",
+    getMdxSource: async () => source,
+  });
+}

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

@@ -0,0 +1,113 @@
+/**
+ * HTML snapshot regression tests for the partners 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 PartnersPage from "../page";
+import PartnerSlugPage from "../[slug]/page";
+// ── Shared stubs ───────────────────────────────────────────────────────────────
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+// ── partners/page (index) ─────────────────────────────────────────────────────
+describe("partners/page — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await PartnersPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Partners</h1><p data-testid="section-empty-state">Partners listing coming soon.</p></main>"`,
+    );
+  });
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "PartnersList",
+        slug: "partners",
+        title: "Partners",
+        description: "Organisations partnering with AI Launch Kit.",
+      },
+      body: "mdx-body-content",
+    });
+    const element = await PartnersPage({
+      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":"Partners","description":"Organisations partnering with AI Launch Kit.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Organization"}]}}</script><main><h1>Partners</h1><p data-testid="partners-description">Organisations partnering 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>"`,
+    );
+  });
+});
+// ── partners/[slug]/page (detail) ─────────────────────────────────────────────
+describe("partners/[slug]/page — snapshot regression", () => {
+  it("populated state renders deterministic HTML", async () => {
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue({
+      frontmatter: {
+        type: "Partner",
+        slug: "acme-corp",
+        title: "Acme Corp",
+        description: "Acme Corp is a strategic partner.",
+      },
+      body: "mdx-body-content",
+    });
+    const element = await PartnerSlugPage({
+      params: Promise.resolve({ locale: "en", slug: "acme-corp" }),
+      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":"Acme Corp","description":"Acme Corp is a strategic partner.","mainEntity":{"@context":"https://schema.org","@type":"Organization","name":"Acme Corp","description":"Acme Corp is a strategic partner."}},{"@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":"Partners","item":"http://localhost:3000/en/partners"},{"@type":"ListItem","position":3,"name":"Acme Corp","item":"http://localhost:3000/en/partners/acme-corp"}]}]}</script><main><h1>Acme Corp</h1><p data-testid="acme-corp-description">Acme Corp is a strategic partner.</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(
+      PartnerSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown" }),
+        getMdxSource: getMdxSourceEmpty,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(notFound).toHaveBeenCalled();
+  });
+});

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

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

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

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

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

@@ -0,0 +1,129 @@
+/**
+ * HTML snapshot regression tests for the products catalog routes
+ * apps/web → @working-theory/page-renderer migration (Spec 1.5.1).
+ *
+ * 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 (per spec §6):
+ *   Commit 1: this file added; snapshots captured against pre-migration routes.
+ *   Commit 2: routes migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Routes under test:
+ *   - products/page.tsx (index — empty-state + populated)
+ *   - products/[slug]/page.tsx (detail — populated + null→notFound)
+ *
+ * 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/navigation", () => ({
+  __esModule: true,
+  notFound: jest.fn(() => {
+    throw new Error("NEXT_NOT_FOUND");
+  }),
+}));
+import { notFound } from "next/navigation";
+import ProductsPage from "../page";
+import ProductSlugPage from "../[slug]/page";
+const mockNotFound = notFound as jest.MockedFunction<typeof notFound>;
+// ── Shared stub helpers ────────────────────────────────────────────────────────
+function makeProductsListSource() {
+  return {
+    frontmatter: {
+      type: "ProductsList" as const,
+      slug: "products",
+      title: "Products",
+      description: "All products.",
+    },
+    body: "# Products\n\nBody.",
+  };
+}
+function makeProductSource(slug: string) {
+  return {
+    frontmatter: {
+      type: "Product" as const,
+      slug,
+      title: "AI Launch Kit",
+      description: "The AX-first OSS template.",
+    },
+    body: "# AI Launch Kit\n\nBody.",
+  };
+}
+// ── products/page.tsx — index ──────────────────────────────────────────────────
+describe("ProductsPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+  it("empty state renders deterministic HTML", async () => {
+    const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+    const element = await ProductsPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main><h1>Products</h1><p data-testid="section-empty-state">Products listing coming soon.</p></main>"`,
+    );
+  });
+  it("populated state renders deterministic HTML", async () => {
+    const source = makeProductsListSource();
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const element = await ProductsPage({
+      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":"Products","description":"All products.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"SoftwareApplication"}]}}</script><main><h1>Products</h1><p data-testid="products-description">All 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-remote" data-source="# Products
+     Body."></div></article></div></div></main>"
+    `);
+  });
+});
+// ── products/[slug]/page.tsx — detail ─────────────────────────────────────────
+describe("ProductSlugPage — snapshot regression", () => {
+  beforeEach(() => {
+    mockNotFound.mockClear();
+  });
+  it("populated state renders deterministic HTML", async () => {
+    const slug = "launch-kit";
+    const source = makeProductSource(slug);
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+    const element = await ProductSlugPage({
+      params: Promise.resolve({ locale: "en", slug }),
+      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":"AI Launch Kit","description":"The AX-first OSS template.","mainEntity":{"@context":"https://schema.org","@type":"SoftwareApplication","name":"AI Launch Kit","description":"The AX-first OSS template."}},{"@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":"Products","item":"http://localhost:3000/en/products"},{"@type":"ListItem","position":3,"name":"AI Launch Kit","item":"http://localhost:3000/en/products/launch-kit"}]}]}</script><main><h1>AI Launch Kit</h1><p data-testid="product-description">The AX-first OSS template.</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="# AI Launch Kit
+     Body."></div></article></div></div></main>"
+    `);
+  });
+  it("null source calls notFound()", async () => {
+    const getMdxSourceNull = jest.fn().mockResolvedValue(null);
+    await expect(
+      ProductSlugPage({
+        params: Promise.resolve({ locale: "en", slug: "unknown-slug" }),
+        getMdxSource: getMdxSourceNull,
+      }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockNotFound).toHaveBeenCalled();
+  });
+});