create-ailk 0.13.0 → 0.15.0

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

@@ -7,6 +7,7 @@
 // Auth route group — the marketing chrome is dropped on the five (auth) paths (#5963)
 // Account area — the marketing chrome AND the consent Banner are dropped on /account paths (#7430)
 // Site-declared theme — `_site.mdx` `theme:` block → token overlay → CSS vars
+// Design web faces — generated `lib/site-fonts.ts` → beneath `brand.fonts` (#7720)
 //
 // Sits under app/[locale]/ and sets the <html lang> attribute to the
 // active locale. next-intl's NextIntlClientProvider is wired here so
@@ -26,7 +27,6 @@ import "../globals.css";
 
 import { Telemetry, VerificationMeta } from "@working-theory/analytics";
 import { MarketingShell } from "@working-theory/templates/shells";
-import { themeToCssVarsBothModes } from "@working-theory/theme";
 import { Link, isRtl, localeHref } from "@working-theory/ui";
 import { BRAND_PATHS, LocaleSwitcherNav } from "@working-theory/ui/blocks";
 import {
@@ -47,18 +47,19 @@ import { NextIntlClientProvider } from "next-intl";
 import { getMessages, getTranslations } from "next-intl/server";
 import type { ReactElement, ReactNode } from "react";
 
-import { auth } from "../../auth";
 import { GoogleAnalytics } from "../../components/google-analytics";
 import {
   SignedInNav,
   type SignedInNavProps,
 } from "../../components/signed-in-nav";
 import { isAccountPath, isAuthPath } from "../../lib/auth-routes";
+import { isClosingFooterPath } from "../../lib/closing-footer-path";
 import { assertEnabledLocale } from "../../lib/locale-guard";
 import { footerColumns, navItems } from "../../lib/nav-config";
 import { getOgImageUrl } from "../../lib/og";
-import { SITE_NAME } from "../../lib/site-brand";
-import { siteChrome } from "../../lib/site-chrome";
+import { backLinkHref } from "../../lib/profile-back-link";
+import { COPYRIGHT_HOLDER, SITE_NAME } from "../../lib/site-brand";
+import { siteChrome, type SiteChrome } from "../../lib/site-chrome";
 import { siteLogo } from "../../lib/site-logo";
 // Registers the `_site.mdx` identity with page-renderer at module load, so
 // every page rendered under this layout carries the sitewide JSON-LD (#6597).
@@ -67,9 +68,25 @@ import "../../lib/site-identity";
 // live listicle's landing page gets its shelves and each entry its page
 // (#7521). Inert without AILK_LISTING_PUBLIC_KEY or the paid package.
 import "../../lib/listings";
-import { loadSiteBrandTokens, loadSiteShapeCss } from "../../lib/site-theme";
+import { siteThemeHead } from "../../lib/site-theme-head";
+import { SIGN_IN_ENABLED, readSession } from "../../lib/topology.generated";
 import { resolveBaseUrl } from "../../src/lib/routes";
 
+import { readSiteContactLines } from "./contact/site-contact-lines";
+
+/**
+ * The generated `siteChrome`, read through a widened type (#7740 D8): a
+ * scaffold generated before `deckPresentation` existed has no such member,
+ * so this compiles against both shapes of the generated file, as the home
+ * page reads `deckGrounds`. `colorMode` and `chromeStyle` (#7742 D1) likewise.
+ */
+const chrome: SiteChrome & {
+  deckPresentation?: true;
+  colorMode?: "light";
+  chromeStyle?: "minimal";
+  closingFooterPaths?: readonly string[];
+} = siteChrome;
+
 // ── Constants ────────────────────────────────────────────────────────────────
 
 const DEFAULT_LOCALE = "en";
@@ -127,6 +144,15 @@ async function resolveThemeMode(): Promise<ThemeMode> {
   }
 }
 
+/**
+ * The deck home's first slide (#7782): the element the consent bar waits on.
+ * The same section-slide selector `DeckSlideAdvance` walks (its `SLIDES`, minus
+ * the closing footer slide), so the first match is slide 1. The story that pins
+ * the geometry (`Shells/MarketingShell` → `Deck Consent Bar`) carries a copy.
+ */
+const DECK_FIRST_SLIDE_SELECTOR =
+  '.ailk-snap-deck .ailk-section-renderer > :not(.ailk-section-separator):not([data-section="separator"])';
+
 /**
  * Whether this visitor has already accepted or declined cookies (#5557).
  *
@@ -226,11 +252,19 @@ export default async function LocaleLayout({
   // message load or session read.
   assertEnabledLocale(locale);
   const messages = await getMessages();
-  const themeMode = await resolveThemeMode();
+  // #7742 D2 — `colorMode: "light"` pins the mode: a saved dark cookie is
+  // ignored, no flash script runs and no theme switch renders.
+  const pinLight = chrome.colorMode === "light";
+  const themeMode: ThemeMode = pinLight ? "light" : await resolveThemeMode();
+  // #7742 D3/D5 — the minimal chrome: the closing slide, the hairline consent
+  // bar and the cue offset.
+  const isMinimalChrome = chrome.chromeStyle === "minimal";
   const consentDecided = await hasConsentChoice();
   // Server-side session read (#4984) — the same `auth.api.getSession` idiom
-  // the `(authed)` segment guard uses. Null when signed out or auth is unset.
-  const session = await auth.api.getSession({ headers: await headers() });
+  // the `(authed)` segment guard uses, through the generated topology seam
+  // (#7426 D5): a spoke has no sign-in, so its render always answers null.
+  // Null when signed out or auth is unset.
+  const session = await readSession(await headers());
 
   // Resolve nav labels server-side so Nav + Footer components stay
   // i18n-hook-free and are testable without a NextIntlClientProvider wrapper.
@@ -325,6 +359,18 @@ export default async function LocaleLayout({
   // `kind: "flow"` so Nav hands their triggers back through
   // `renderFlowTrigger`, which `SignedInNav` owns (see NAV_CLIENT_ACTION_FLOW
   // above).
+  // The signed-out auth pair, shared by the header (every page but the deck
+  // home) and the deck home's closing footer slide (#7718 D4).
+  // A spoke (#7426 D11) has no sign-in, so it offers no auth pair anywhere:
+  // not in the header, the deck's closing footer or a bare page's footer.
+  const authActions: readonly Extract<NavAction, { path: string }>[] =
+    SIGN_IN_ENABLED
+      ? [
+          // NO_HAND_IMPLEMENT_OK: operator-directed live Free-template pass.
+          { labelKey: "signIn", path: "/sign-in", variant: "outline-strong" },
+          { labelKey: "signUp", path: "/sign-up", variant: "primary" },
+        ]
+      : [];
   const navActions: NavAction[] = session
     ? [
         { labelKey: "account", kind: "flow", flow: NAV_CLIENT_ACTION_FLOW },
@@ -335,11 +381,47 @@ export default async function LocaleLayout({
           variant: "outline-strong",
         },
       ]
-    : [
-        // NO_HAND_IMPLEMENT_OK: operator-directed live Free-template pass.
-        { labelKey: "signIn", path: "/sign-in", variant: "outline-strong" },
-        { labelKey: "signUp", path: "/sign-up", variant: "primary" },
-      ];
+    : [...authActions];
+
+  // The announcement bar is HOME-ONLY (#5469 D5): its route gate matches the
+  // pathname literally, and under next-intl's `as-needed` prefixing the home
+  // path is `/` for the default locale and `/<locale>` for every other one.
+  const homePath = locale === DEFAULT_LOCALE ? "/" : `/${locale}`;
+
+  // Deck home (#5612 D3): `siteChrome.home === "deck"` only ever applies
+  // `snap="mandatory"` + `deckHero` on the locale-root route — every other
+  // path renders byte-identically regardless of the knob. `x-pathname` is the
+  // same header `generateMetadata` above reads (forwarded by middleware.ts);
+  // Next.js's `headers()` is request-scoped and cheap to call again here.
+  const pathname = (await headers()).get("x-pathname") ?? homePath;
+  const isDeckHome = siteChrome.home === "deck" && pathname === homePath;
+  // Inner pages (#7721 D4): under `innerPages: "bare"` every page but the
+  // home wears the bare header (back arrow + the mark) and the one-bar
+  // footer. Fail-safe like the deck gate: a missing `x-pathname` resolves to
+  // the home path, so the full bar and its auth buttons render.
+  const isBareInner = siteChrome.innerPages === "bare" && pathname !== homePath;
+
+  // The deck home's header is bare (#7718 D1): no actions, signed in or out.
+  // Its auth links move to the footer, the deck's closing slide (D4) — the
+  // auth pair signed out, an Account link signed in (the route where Sign
+  // out lives; its label is the user's name, `navLabels.items.account`).
+  const headerActions: NavAction[] = isDeckHome || isBareInner ? [] : navActions;
+  const deckFooterActions = session
+    ? [{ labelKey: "account", path: "/account", variant: "outline-strong" as const }]
+    : [...authActions];
+  // A bare inner page's auth (#7721 D3/D4) rides the one-bar footer's link
+  // group: Sign in / Sign up signed out, Account signed in (where Sign out
+  // lives). Labels from the existing `nav` namespace.
+  const accountLinks = !isBareInner
+    ? []
+    : session
+      ? [{ label: tNav("account"), href: localeHref(locale, "/account") }]
+      : SIGN_IN_ENABLED
+        ? [
+            { label: tNav("signIn"), href: localeHref(locale, "/sign-in") },
+            { label: tNav("signUp"), href: localeHref(locale, "/sign-up") },
+          ]
+        : [];
 
   // A flow action needs `renderFlowTrigger`, a function — and this layout is a
   // Server Component. Nav forwards that function into NavMobileMenu ("use
@@ -352,7 +434,7 @@ export default async function LocaleLayout({
   // `renderFlowTrigger` and imports `navItems` (icon components are functions
   // too) on the client side. Without one, Nav stays a Server Component and
   // nothing callable crosses.
-  const hasFlowAction = navActions.some((action) => action.kind === "flow");
+  const hasFlowAction = headerActions.some((action) => action.kind === "flow");
 
   // Shared brand mark injected into both Nav and Footer chrome slots. The
   // mark comes from site-logo.tsx (the mark the /sign-in card also renders);
@@ -372,18 +454,17 @@ export default async function LocaleLayout({
   // middleware and hreflang alternates read (NEXT_PUBLIC_ENABLED_LOCALES).
   const enabledLocales = readLocales();
 
-  // The announcement bar is HOME-ONLY (#5469 D5): its route gate matches the
-  // pathname literally, and under next-intl's `as-needed` prefixing the home
-  // path is `/` for the default locale and `/<locale>` for every other one.
-  const homePath = locale === DEFAULT_LOCALE ? "/" : `/${locale}`;
-
-  // Deck home (#5612 D3): `siteChrome.home === "deck"` only ever applies
-  // `snap="mandatory"` + `deckHero` on the locale-root route — every other
-  // path renders byte-identically regardless of the knob. `x-pathname` is the
-  // same header `generateMetadata` above reads (forwarded by middleware.ts);
-  // Next.js's `headers()` is request-scoped and cheap to call again here.
-  const pathname = (await headers()).get("x-pathname") ?? homePath;
-  const isDeckHome = siteChrome.home === "deck" && pathname === homePath;
+  // #7797 — an inner page the site lists in `closingFooterPaths` ends on the
+  // closing footer: the wordmark, the contact lines and the legal line. The
+  // home is never an inner page, and an absent or empty list is false for
+  // every page, so a site that lists none renders exactly as before.
+  const isClosingInner =
+    pathname !== homePath &&
+    isClosingFooterPath({
+      pathname,
+      paths: chrome.closingFooterPaths,
+      locales: enabledLocales,
+    });
 
   // The (auth) route group's chrome branch (#5963).
   //
@@ -424,7 +505,13 @@ export default async function LocaleLayout({
     // `wordmark` (Nav.tsx:344), which are passed below. Scoped to the SAME
     // `isDeckHome` gate MarketingShell's snap/deckHero use, so a non-deck
     // route's render is byte-identical to before this branch existed.
-    ...(isDeckHome ? { sticky: true, deckMorph: true } : {}),
+    // #7718 D1 — and `bar: "bare"`: no rule, fill or actions, the logomark
+    // alone, centred.
+    // #7721 D4 (gap F) — `mark-only` means the mark alone: no wordmark beside
+    // it on any page. On the deck home `deckMorph` still governs the brand:
+    // Nav spreads its `full-logo` composition after `logoDisplay`'s.
+    ...(siteChrome.nav === "mark-only" ? { logoDisplay: "mark" as const } : {}),
+    ...(isDeckHome ? { sticky: true, deckMorph: true, bar: "bare" as const } : {}),
     siteName: SITE_NAME,
     frame: "contained",
     navAlignment: "right",
@@ -432,7 +519,7 @@ export default async function LocaleLayout({
     logo: brandLogo,
     wordmark: brandWordmark,
     overflowLabel: navOverflowLabel,
-    actions: navActions,
+    ...(headerActions.length > 0 ? { actions: headerActions } : {}),
   };
 
   // Placeholder social handles (#5469 D5): `{{COMPANY_HANDLE}}` is a
@@ -464,7 +551,8 @@ export default async function LocaleLayout({
 
   // The site's own name (#6942) — `SITE_NAME` resolves from `_site.mdx`'s
   // `siteName:`, so a customer's footer never carries the kit vendor's name.
-  const copyrightText = `© ${new Date().getFullYear()} ${SITE_NAME}. All rights reserved.`;
+  // The holder is `siteIdentity.legalName` when declared (#7796), else the name.
+  const copyrightText = `© ${new Date().getFullYear()} ${COPYRIGHT_HOLDER}. All rights reserved.`;
 
   // Footer legal links (#5612 D3). The centered variant folds in FAQ — the
   // roster's third always-scaffolded core route (`/faq`, alongside `/privacy`
@@ -483,40 +571,38 @@ export default async function LocaleLayout({
       : []),
   ];
 
-  // The site's own declared colours, read from `content/_site.mdx`'s `theme:`
-  // block and translated from that customer-facing vocabulary onto a token
-  // overlay (`siteThemeToBrandTokens`). `undefined` when the site declares no
-  // theme — which is the regression floor: no `brand` key is passed, the
-  // resolver takes its untouched fast path, and the emitted CSS is
-  // byte-for-byte what it was before this wiring existed.
-  const siteBrandTokens = loadSiteBrandTokens();
-
-  // Both theme modes, gated by [data-theme="dark"] (#1532 — sibling fix; the
-  // single-mode call inlined an unconditional :root block that never
-  // responded to a client-side data-theme toggle). themeMode still drives
-  // the initial data-theme attribute below for a no-flash first paint.
-  // Site shape settings (`theme.corners`, `theme.eyebrowCase`) appended after
-  // the token block so they win; "" for a site that sets neither.
-  const inlineThemeStyle =
-    themeToCssVarsBothModes(siteBrandTokens ? { brand: siteBrandTokens } : {}) +
-    loadSiteShapeCss();
+  // The site's own declared colours (`content/_site.mdx` `theme:` + `brand:`)
+  // as a token overlay, the design's web faces (#7720) beneath `brand.fonts`,
+  // both theme modes gated by [data-theme="dark"] (#1532) and the site's shape
+  // settings after them — one helper, shared with the minimal 404 (#7742 D6).
+  // A site that declares no theme gets byte-for-byte the CSS it got before
+  // this wiring existed; with no design faces <html> gets no class.
+  // themeMode still drives the initial data-theme attribute below.
+  const themeHead = siteThemeHead();
 
   return (
     <html
       lang={locale}
       dir={isRtl(locale) ? "rtl" : "ltr"}
       data-theme={themeMode}
+      className={themeHead.fontClassName}
+      // #7742 D5 — scopes the cue's consent-bar offset; absent otherwise.
+      {...(isMinimalChrome ? { "data-chrome-style": "minimal" } : {})}
     >
       <head>
-        {/* Flash-prevention: runs synchronously before any styled element */}
-        <script
-          data-testid="theme-flash-prevention"
-          dangerouslySetInnerHTML={{ __html: FLASH_PREVENTION_SCRIPT }}
-        />
+        {/* Flash-prevention: runs synchronously before any styled element.
+            Not under `colorMode: light` (#7742 D2) — the mode is pinned, and
+            the script would apply the OS dark preference. */}
+        {pinLight ? null : (
+          <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 }}
+          dangerouslySetInnerHTML={{ __html: themeHead.css }}
         />
         {/* Favicons — single brand mark (theme-independent), PNG fallbacks, ICO legacy */}
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -628,10 +714,41 @@ export default async function LocaleLayout({
                   }
                 : {})}
               {...(isDeckHome
-                ? { snap: "mandatory" as const, deckHero: true }
+                ? {
+                    snap: "mandatory" as const,
+                    deckHero: true,
+                    // #7740 D8 — the design's deck presentation dial.
+                    ...(chrome.deckPresentation === true ? { presentation: true } : {}),
+                    // The deck's slide-advance controls (#7732) — named from
+                    // the `nav` catalog, never the shell's English default.
+                    slideAdvanceLabels: {
+                      next: tNav("nextSlide"),
+                      top: tNav("backToTop"),
+                    },
+                  }
                 : {})}
               nav={
-                hasFlowAction ? (
+                // #7721 D4 — a bare inner page's header: the back arrow home
+                // and the mark. It carries no actions, so it is always the
+                // server Nav (nothing callable crosses the RSC boundary).
+                // #7744 D7 — on a deck home a team profile's arrow returns
+                // to the people slide (`/#slide-people`) instead.
+                isBareInner ? (
+                  <Nav
+                    {...navProps}
+                    navItems={[]}
+                    bar="bare"
+                    backLink={{
+                      href: backLinkHref({
+                        pathname,
+                        homePath,
+                        home: siteChrome.home,
+                        locales: enabledLocales,
+                      }),
+                      label: tNav("home"),
+                    }}
+                  />
+                ) : hasFlowAction ? (
                   <SignedInNav {...navProps} />
                 ) : (
                   <Nav
@@ -650,10 +767,40 @@ export default async function LocaleLayout({
                   logo={brandLogo}
                   wordmark={brandWordmark}
                   social={[...socialLinks]}
-                  {...(siteChrome.footer === "centered"
-                    ? { layout: "centered" as const }
+                  // #7742 D3 — under `chromeStyle: minimal` the deck home's
+                  // closing slide is the wordmark, the contact lines and the
+                  // legal line: no actions and no centred lockup, so Sign in /
+                  // Sign up are on no part of the home.
+                  // #7721 D4 — a bare inner page's footer is the one bar, its
+                  // link group carrying the account links the header drops.
+                  // #7797 — a listed inner page takes the same closing footer.
+                  // Under `innerPages: bare` the one-bar footer is where the
+                  // account links live (the header drops them), so the closing
+                  // footer carries the deck's auth actions in their place; on
+                  // any other inner page the header still holds them.
+                  {...(isDeckHome && isMinimalChrome
+                    ? { layout: "closing" as const, contactLines: readSiteContactLines() }
+                    : isClosingInner
+                      ? {
+                          layout: "closing" as const,
+                          contactLines: readSiteContactLines(),
+                          ...(isBareInner ? { actions: deckFooterActions } : {}),
+                        }
+                      : isBareInner
+                        ? { layout: "line" as const, accountLinks }
+                        : siteChrome.footer === "centered"
+                          ? { layout: "centered" as const }
+                          : {})}
+                  // #7718 D4 — the deck home's closing slide carries the
+                  // centred brand and the auth links its bare header drops.
+                  {...(isDeckHome && !isMinimalChrome
+                    ? { centeredBrand: true, actions: deckFooterActions }
                     : {})}
-                  showThemeToggle
+                  // #7823 — the minimal closing slide's actions are a button,
+                  // then a text link; Footer reads the style from this.
+                  {...(isMinimalChrome ? { chromeStyle: "minimal" as const } : {})}
+                  // #7742 D2 — no theme switch under `colorMode: light`.
+                  showThemeToggle={!pinLight}
                   bottomBarAlign="content"
                   copyrightText={copyrightText}
                   legalLinks={legalLinks}
@@ -713,6 +860,14 @@ export default async function LocaleLayout({
               secondaryAction={{ label: tConsent("rejectLabel") }}
               rejectLabel={tConsent("rejectLabel")}
               locale={locale}
+              // #7742 D5 — the minimal chrome's consent bar: the page ground,
+              // a hairline, no shadow.
+              {...(isMinimalChrome ? { consentAppearance: "hairline" as const } : {})}
+              // #7782 — on the minimal deck home the bar first shows once the
+              // first slide has left view; every other page shows it on load.
+              {...(isDeckHome && isMinimalChrome
+                ? { consentRevealAfter: DECK_FIRST_SLIDE_SELECTOR }
+                : {})}
             />
           )}
           <Telemetry />

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

@@ -11,6 +11,9 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 
 jest.mock("@working-theory/ui", () => ({
+  // #7789: renderPage's fallback page head renders inside the section Container.
+  Container: ({ children }: { children?: React.ReactNode }) =>
+    React.createElement("div", null, children),
   Heading: ({ children, level }: { children: React.ReactNode; level: number }) =>
     React.createElement(`h${level}`, null, children),
   SectionRenderer: ({

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

@@ -14,6 +14,19 @@ import {
 import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
+import { siteChrome, type SiteChrome } from "../../lib/site-chrome";
+import { siteLogomarkAsset, siteWordmarkAsset } from "../../lib/site-logo";
+
+/** The ground sequence `renderPage` cycles over a deck home's slides (#7719). */
+type DeckGrounds = NonNullable<Parameters<typeof renderPage>[0]["deckGrounds"]>;
+
+/**
+ * The generated `siteChrome`, read through a widened type: its interface
+ * carries `deckGrounds` only when the site's design sets one (#7719 D3), so
+ * this compiles against both shapes of the generated file.
+ */
+const chrome: SiteChrome & { deckGrounds?: DeckGrounds; deckPresentation?: true } = siteChrome;
+
 interface Props {
   params: Promise<{ locale: string }>;
   /**
@@ -22,6 +35,12 @@ interface Props {
    */
   getMdxSource?: typeof defaultGetMdxSource;
   getPageSections?: typeof defaultGetPageSections;
+  /** The site's `layout.home` knob; defaults to the generated `siteChrome`. */
+  home?: SiteChrome["home"];
+  /** The design's `layout.deckGrounds`; defaults to the generated `siteChrome`'s. */
+  deckGrounds?: DeckGrounds;
+  /** The design's `layout.deckPresentation` (#7740); defaults to the generated `siteChrome`'s. */
+  deckPresentation?: boolean;
 }
 
 export async function generateMetadata({
@@ -35,6 +54,9 @@ export default async function Page({
   params,
   getMdxSource,
   getPageSections,
+  home = chrome.home,
+  deckGrounds = chrome.deckGrounds,
+  deckPresentation = chrome.deckPresentation,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
   return renderPage({
@@ -46,5 +68,20 @@ export default async function Page({
     emptyStateTestId: "home-description",
     ...(getMdxSource !== undefined && { getMdxSource }),
     ...(getPageSections !== undefined && { getPageSections }),
+    // #7733 — the deck home's header is bare on slide 1 (#5697), so its
+    // landing carries the brand: a centred leading hero renders as bondcap's
+    // landing with the site's wordmark in the headline's place; any other
+    // leading hero keeps its composition and takes the logomark (#7711).
+    // Content that authors its own lockup keeps it.
+    ...(home === "deck" && {
+      deckLanding: { wordmark: siteWordmarkAsset(), logomark: siteLogomarkAsset() },
+    }),
+    // #7719 — a deck home cycles its design's ground sequence, slide by
+    // slide, onto every slide that authors no surface of its own.
+    ...(home === "deck" && deckGrounds !== undefined && { deckGrounds }),
+    // #7740 — a deck home under the presentation dial: every slide with an
+    // alignment field centred, card grids one column on phones, and slide
+    // anchors clear of the page's JSON-LD @id fragments.
+    ...(home === "deck" && deckPresentation === true && { deckPresentation: true }),
   });
 }

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

@@ -68,7 +68,7 @@ describe("partners/page — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Partners","description":"Organisations partnering with AI Launch Kit.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Organization"}]}}</script><main id="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) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered">mdx-body-content</div></article></div></div></main>"`,
+      `"<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 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">Partners</h1><p data-testid="partners-description" class="mt-block-tight text-lead">Organisations partnering with AI Launch Kit.</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 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-fg) 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">mdx-body-content</div></div></article></div></div></div></main>"`,
     );
   });
 });
@@ -93,7 +93,7 @@ describe("partners/[slug]/page — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"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 id="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) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-rendered">mdx-body-content</div></article></div></div></main>"`,
+      `"<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 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">Acme Corp</h1><p data-testid="acme-corp-description" class="mt-block-tight text-lead">Acme Corp is a strategic partner.</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 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-fg) 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">mdx-body-content</div></div></article></div></div></div></main>"`,
     );
   });
 

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

@@ -87,9 +87,8 @@ describe("ProductsPage — snapshot regression", () => {
     });
     const { container } = render(element);
     expect(container.innerHTML).toMatchInlineSnapshot(`
-     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Products","description":"All products.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"SoftwareApplication"}]}}</script><main id="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) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-remote" data-source="# Products
-
-     Body."></div></article></div></div></main>"
+     "<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 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">Products</h1><p data-testid="products-description" class="mt-block-tight text-lead">All products.</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 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-fg) 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-remote" data-source="
+     Body."></div></div></article></div></div></div></main>"
     `);
   });
 });
@@ -111,9 +110,8 @@ describe("ProductSlugPage — 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":"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 id="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) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-remote" data-source="# AI Launch Kit
-
-     Body."></div></article></div></div></main>"
+     "<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebPage","inLanguage":"en","name":"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 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">AI Launch Kit</h1><p data-testid="product-description" class="mt-block-tight text-lead">The AX-first OSS template.</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 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-fg) 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-remote" data-source="
+     Body."></div></div></article></div></div></div></main>"
     `);
   });