create-ailk 0.27.0 → 0.28.1

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

@@ -8,42 +8,44 @@
 // HTML, so the card never flashes from the authored plan to the named one.
 //
 // The Offerings shown set (#8927, spec
-// docs/specs/8927-pricing-renders-the-shown-set-spec.md). Before rendering,
-// the page reads `GET /v1/content/shown-offerings` through the api-client,
-// shared per server instance for READ_TTL_MS, and renders one of three pages:
-//   - unconnected (or production with no API origin) — today's MDX page,
-//     exactly as above (D7);
-//   - a current shown set — the workspace's Stripe cards in place of the
-//     page's authored `pricing` sections, `?plan=` moving the recommendation
-//     only for a `{plan}`-grammar value (D4, contract §3.7);
-//   - anything else (expired, empty, a failed read) — the site's contact
-//     email in place of those sections, never an error (D5).
+// docs/specs/8927-pricing-renders-the-shown-set-spec.md). The page reads
+// `GET /v1/content/shown-offerings` through the api-client, shared per server
+// instance, and renders one of three pages — unconnected, a current shown
+// set, or the contact email — through `pricingSections` in
+// `lib/pricing-page.ts`, shared with every offering pricing page (#10044 D5).
+// The page's own `plans` frontmatter narrows its Stripe cards; `plans: []`
+// keeps its written sections and reads no Stripe data.
+//
+// The offering pricing pages (#10044 D6): every other `Pricing` file
+// (`content/<locale>/Pricing/<offering>.mdx`, served at /pricing/<offering>)
+// is listed after this page's own sections, before its closing CTA, as one
+// generated `items` section — no hand-maintained list. A site with no
+// offering page renders exactly as before.
+//
 // Stripe text reaches markup only as React text and JSON-LD only through
 // renderPage's serializer (T4); the metadata stays the MDX page's (T8).
-import { offerings } from "@working-theory/api-client";
 import {
+  getMdxSource as loadMdxSource,
   getPageSections as defaultGetPageSections,
   renderPage,
   renderPageMetadata,
 } from "@working-theory/page-renderer";
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import { ContactFallback } from "@working-theory/ui";
-import {
-  LOOKUP_KEY_PLAN_PATTERN,
-  type PageSection,
-} from "@working-theory/validation";
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
-import { browserApiOrigin } from "../../../lib/api-origin.generated";
 import {
-  offeringsPricing,
-  type OfferingsPricing,
-  type OfferingsPricingLabels,
-} from "../../../lib/offerings-pricing";
-import { contactFormText } from "../contact/contact-form-text";
-import { readSiteContactEmail } from "../contact/site-contact-email";
+  offeringPricingPages,
+  pagePlans,
+  pricingPageCard,
+  pricingSections,
+  pricingSectionSlots,
+} from "../../../lib/pricing-page";
+import {
+  insertBeforeClosingCtas,
+  listDetailPages,
+} from "../../../lib/route-family";
 
 // #8927 D2 — never prerendered; the Offerings read behind it is shared for READ_TTL_MS.
 export const dynamic = "force-dynamic";
@@ -53,275 +55,11 @@ interface Props {
   searchParams?: Promise<Record<string, string | string[] | undefined>>;
   getMdxSource?: typeof defaultGetMdxSource;
   getPageSections?: typeof defaultGetPageSections;
+  /** The offering pages' reader (#10044 D6); a test's DI seam. */
+  listPages?: typeof listDetailPages;
 }
 
-type PricingSection = Extract<PageSection, { type: "pricing" }>;
-type PricingData = PricingSection["data"];
-
-/**
- * Every `pricing` section with `recommended` set to `plan` (#8842). Each
- * section matches the key against its own plans, so a second plan group
- * keeps its own default unless it carries the same key.
- */
-function withRecommendedPlan(
-  sections: PageSection[],
-  plan: string,
-): PageSection[] {
-  return sections.map((section) =>
-    section.type === "pricing"
-      ? {
-          ...section,
-          // `recommended` is a render-time field the section reads, not an
-          // authored one, so it is not in the validated section schema.
-          data: { ...section.data, recommended: plan } as typeof section.data,
-        }
-      : section,
-  );
-}
-
-type OfferingsRead =
-  | { kind: "unconnected" }
-  | { kind: "shown"; shownSet: unknown }
-  | { kind: "contact" };
-
-const CONTACT: OfferingsRead = { kind: "contact" };
-
-/**
- * How long the Offerings read is shared across requests (D2): a view carries
- * no visitor headers, so every view would otherwise count against this
- * server's one per-IP limit at the API. A product switched off disappears
- * within it. The contact page's window (#8731).
- */
-const READ_TTL_MS = 15_000;
-
-const reads = new Map<string, { at: number; read: Promise<OfferingsRead> }>();
-
-/**
- * `read()`'s result, shared per instance for READ_TTL_MS. Concurrent calls
- * share one in-flight read, and a failed read is shared the same way, so a
- * burst against an unreachable API is one call.
- */
-function sharedRead(
-  key: string,
-  read: () => Promise<OfferingsRead>,
-): Promise<OfferingsRead> {
-  const now = Date.now();
-  const hit = reads.get(key);
-  if (hit && now - hit.at < READ_TTL_MS) return hit.read;
-  const fresh = read();
-  reads.set(key, { at: now, read: fresh });
-  return fresh;
-}
-
-/**
- * Whether an API origin is configured: the three names `getApiBase()` in
- * packages/api-client/src/http.ts reads, in step with it on a hub. Without one
- * that function answers `localhost:3001`. The browser-facing origin comes from
- * the topology seam (#7874 D12), which a spoke renders with no env read, so a
- * spoke passes its own `env:check` (#9480). A spoke diverges on purpose: the
- * browser-facing name set on one at runtime counts as no origin here.
- */
-function apiOriginConfigured(): boolean {
-  return Boolean(
-    process.env.AILK_API_URL ||
-    browserApiOrigin() ||
-    process.env.NEXT_PUBLIC_API_URL,
-  );
-}
-
-/**
- * The shown-offerings read (D2). A production deployment with no API has no
- * connection to read, so it is unconnected without a call. The body is
- * untrusted: anything but `unconnected` or `shown` — `empty`, an unknown
- * status, a non-object body, a non-2xx, a throw — is the contact email.
- */
-function readShownOfferings(): Promise<OfferingsRead> {
-  if (process.env.NODE_ENV === "production" && !apiOriginConfigured()) {
-    return Promise.resolve({ kind: "unconnected" });
-  }
-  return sharedRead("shown-offerings", async () => {
-    try {
-      const res = await offerings.shown();
-      if (!res.ok) return CONTACT;
-      const body: unknown = res.body;
-      if (body === null || typeof body !== "object") return CONTACT;
-      const { status, shownSet } = body as {
-        status?: unknown;
-        shownSet?: unknown;
-      };
-      if (status === "unconnected") return { kind: "unconnected" };
-      if (status === "shown") return { kind: "shown", shownSet };
-      return CONTACT;
-    } catch {
-      return CONTACT;
-    }
-  });
-}
-
-/** Keeps the `{amount}` placeholder for `period` to fill (D6). */
-const KEEP_AMOUNT_PLACEHOLDER = { amount: "{amount}" };
-
-/** The mapper's labels and the plans section's recommendation label (D6). */
-async function offeringsCopy(locale: string): Promise<{
-  labels: OfferingsPricingLabels;
-  recommendedLabel: string;
-  addonsHeadline: string;
-}> {
-  const t = await getTranslations({ locale, namespace: "pricingOfferings" });
-  const period = (key: "monthly" | "annual" | "oneTime") => {
-    const phrase = t(key, KEEP_AMOUNT_PLACEHOLDER);
-    return (amount: string) => phrase.replace("{amount}", () => amount);
-  };
-  return {
-    labels: {
-      cta: t("cta"),
-      recommended: t("recommended"),
-      monthly: period("monthly"),
-      annual: period("annual"),
-      oneTime: period("oneTime"),
-    },
-    recommendedLabel: t("recommendedForYou"),
-    addonsHeadline: t("addonsHeadline"),
-  };
-}
-
-/** The authored section copy a Stripe section keeps — never a plan or price fact. */
-const AUTHORED_COPY_FIELDS = [
-  "eyebrow",
-  "headline",
-  "description",
-  "header",
-  "headlineSize",
-  "toggleStyle",
-  "featureListStyle",
-  "gapAbove",
-  "separation",
-  "gap",
-  "surface",
-  "note",
-  "collapseFeaturesOnMobile",
-] as const satisfies readonly (keyof PricingData)[];
-
-function authoredCopy(
-  section: PricingSection | undefined,
-  extra: readonly (keyof PricingData)[] = [],
-): Partial<PricingData> {
-  const copy: Partial<Record<keyof PricingData, unknown>> = {};
-  if (!section) return copy as Partial<PricingData>;
-  for (const field of [...AUTHORED_COPY_FIELDS, ...extra]) {
-    if (section.data[field] !== undefined) copy[field] = section.data[field];
-  }
-  return copy as Partial<PricingData>;
-}
-
-function isPricing(section: PageSection): section is PricingSection {
-  return section.type === "pricing";
-}
-
-/** Where a section with no slot goes: after a leading hero, else first. */
-function insertionIndex(sections: PageSection[]): number {
-  return sections[0]?.type === "hero" ? 1 : 0;
-}
-
-/**
- * The page's sections with the Stripe fragments in place of its authored
- * `pricing` sections (D4). The first non-`addons` pricing section is the
- * plans slot and the first `addons` one the add-ons slot; every other pricing
- * section, and a slot whose fragment is `null`, is removed. A fragment with no
- * slot is inserted after a leading hero (the add-ons directly after the
- * plans). No other section moves.
- */
-function withOfferings(
-  sections: PageSection[],
-  pricing: OfferingsPricing,
-  plan: string | undefined,
-  recommendedLabel: string,
-  addonsHeadline: string,
-): PageSection[] {
-  const plansSlot = sections.find(
-    (s): s is PricingSection => isPricing(s) && s.data.variant !== "addons",
-  );
-  const addonsSlot = sections.find(
-    (s): s is PricingSection => isPricing(s) && s.data.variant === "addons",
-  );
-  const recommend =
-    plan !== undefined && LOOKUP_KEY_PLAN_PATTERN.test(plan) ? plan : undefined;
-  const plansSection: PricingSection | null = pricing.plans && {
-    id: plansSlot?.id ?? "offerings-plans",
-    type: "pricing",
-    data: {
-      ...authoredCopy(plansSlot),
-      ...pricing.plans,
-      // A `?plan=` recommendation moves the mapper's highlight onto the named
-      // plan and wears `recommendedLabel` (#8842); the mapper's own
-      // "Recommended" pill label would ride along as a second label, so it is
-      // dropped from every card when a recommendation is in play.
-      ...(recommend !== undefined &&
-      pricing.plans.plans.some(
-        (card) => card.key?.toLowerCase() === recommend.toLowerCase(),
-      )
-        ? {
-            plans: pricing.plans.plans.map(({ highlightLabel: _, ...card }) => card),
-          }
-        : {}),
-      // Render-time fields the section reads (#8842), not authored ones.
-      recommendedLabel,
-      ...(recommend !== undefined ? { recommended: recommend } : {}),
-    } as PricingData,
-  };
-  const addonsSection: PricingSection | null = pricing.addons && {
-    id: addonsSlot?.id ?? "offerings-addons",
-    type: "pricing",
-    data: {
-      // An inserted add-ons section (no authored slot) sits tight under the
-      // plans and carries its own headline, so a lone tile is never an
-      // unlabeled band (design review B2).
-      ...(addonsSlot ? {} : { headline: addonsHeadline, gapAbove: "tight" }),
-      ...authoredCopy(addonsSlot, ["addonLayout"]),
-      ...pricing.addons,
-    } as PricingData,
-  };
-
-  const placed: PageSection[] = [];
-  for (const section of sections) {
-    if (!isPricing(section)) placed.push(section);
-    else if (section === plansSlot && plansSection) placed.push(plansSection);
-    else if (section === addonsSlot && addonsSection)
-      placed.push(addonsSection);
-  }
-  if (plansSection && !plansSlot) {
-    placed.splice(insertionIndex(placed), 0, plansSection);
-  }
-  if (addonsSection && !addonsSlot) {
-    const plansAt = plansSection ? placed.indexOf(plansSection) : -1;
-    placed.splice(
-      plansAt >= 0 ? plansAt + 1 : insertionIndex(placed),
-      0,
-      addonsSection,
-    );
-  }
-  return placed;
-}
-
-/** The section the contact email is slotted into (D5). */
-const CONTACT_SECTION_ID = "offerings-contact";
-
-/**
- * The page's sections with every `pricing` section removed and one
- * `contact-form` section in the first one's place, else after a leading hero
- * (D5). It contributes no JSON-LD, so the page publishes no `Offer`.
- */
-function withContactFallback(sections: PageSection[]): PageSection[] {
-  const first = sections.findIndex(isPricing);
-  const kept: PageSection[] = sections.filter((s) => !isPricing(s));
-  const contact = {
-    id: CONTACT_SECTION_ID,
-    type: "contact-form",
-    data: { fields: [] },
-  } as PageSection;
-  kept.splice(first >= 0 ? first : insertionIndex(kept), 0, contact);
-  return kept;
-}
+type Section = Awaited<ReturnType<typeof defaultGetPageSections>>[number];
 
 export async function generateMetadata({
   params,
@@ -335,71 +73,48 @@ export default async function Page({
   searchParams,
   getMdxSource,
   getPageSections = defaultGetPageSections,
+  listPages = listDetailPages,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
   const search = (await searchParams) ?? {};
   const plan = Array.isArray(search.plan) ? search.plan[0] : search.plan;
-  const read = await readShownOfferings();
 
-  if (read.kind === "unconnected") {
-    return renderPage({
-      type: "Pricing",
-      slug: "pricing",
+  /**
+   * The page's sections in its Offerings state, then the offering pricing
+   * pages list. Runs only when the hub's source exists.
+   */
+  async function withPricing(frontmatter: unknown): Promise<Section[]> {
+    const sections = await pricingSections(await getPageSections(frontmatter), {
+      plans: pagePlans(frontmatter),
+      plan,
       locale,
-      translationsNamespace: "pricing",
-      ...(getMdxSource !== undefined && { getMdxSource }),
-      getPageSections: plan
-        ? async (frontmatter) =>
-            withRecommendedPlan(await getPageSections(frontmatter), plan)
-        : getPageSections,
+    });
+    const pages = offeringPricingPages(
+      await listPages("Pricing", locale, getMdxSource ?? loadMdxSource),
+    );
+    if (pages.length === 0) return sections;
+    const t = await getTranslations({ locale, namespace: "pricingPages" });
+    const labels = { viewPricing: t("viewPricing") };
+    return insertBeforeClosingCtas(sections, {
+      type: "items",
+      id: "pricing-pages",
+      data: {
+        headline: t("heading"),
+        // A tile is one click target per card (the /templates hub's rule).
+        variant: "tile",
+        tileHover: "outline",
+        items: pages.map((page) => pricingPageCard(page, labels)),
+      },
     });
   }
 
-  if (read.kind === "shown") {
-    const { labels, recommendedLabel, addonsHeadline } =
-      await offeringsCopy(locale);
-    const pricing = offeringsPricing(read.shownSet, { locale, labels });
-    if (pricing && (pricing.plans || pricing.addons)) {
-      return renderPage({
-        type: "Pricing",
-        slug: "pricing",
-        locale,
-        translationsNamespace: "pricing",
-        ...(getMdxSource !== undefined && { getMdxSource }),
-        getPageSections: async (frontmatter) =>
-          withOfferings(
-            await getPageSections(frontmatter),
-            pricing,
-            plan,
-            recommendedLabel,
-            addonsHeadline,
-          ),
-      });
-    }
-  }
-
-  const text = contactFormText(
-    await getTranslations({ locale, namespace: "contact" }),
-  );
   return renderPage({
     type: "Pricing",
     slug: "pricing",
     locale,
     translationsNamespace: "pricing",
     ...(getMdxSource !== undefined && { getMdxSource }),
-    getPageSections: async (frontmatter) =>
-      withContactFallback(await getPageSections(frontmatter)),
-    sectionSlots: {
-      [CONTACT_SECTION_ID]: (
-        <ContactFallback
-          email={readSiteContactEmail()}
-          text={{
-            heading: text.unavailableHeading,
-            body: text.unavailableBody,
-            noEmail: text.unavailableNoEmail,
-          }}
-        />
-      ),
-    },
+    getPageSections: withPricing,
+    sectionSlots: await pricingSectionSlots(locale),
   });
 }

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

@@ -1,7 +1,11 @@
 // 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 404 through renderPage.
+// @working-theory/page-renderer, and emits a JSON-LD <script>. Unknown slugs 404 through renderPage.
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
-import { renderPage, renderPageMetadata } from "@working-theory/page-renderer";
+import {
+  getMdxSource as loadMdxSource,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
 import type { Metadata } from "next";
 import type { ReactElement } from "react";
 
@@ -22,12 +26,25 @@ export default async function Page({
   getMdxSource,
 }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
+  // A page that composes `sections[]` renders them (JSON-LD is built from
+  // the same sections); a prose page renders its MDX body — the rule
+  // /vs/[slug] applies (#10122).
+  const source = await (getMdxSource ?? loadMdxSource)("Product", slug, locale);
+  const composed =
+    source !== null &&
+    Array.isArray((source.frontmatter as { sections?: unknown[] }).sections) &&
+    ((source.frontmatter as { sections?: unknown[] }).sections?.length ?? 0) >
+      0;
   return renderPage({
     type: "Product",
     slug,
     locale,
-    bodyMode: "mdx-body",
-    populatedDescriptionTestId: "product-description",
+    ...(composed
+      ? {}
+      : {
+          bodyMode: "mdx-body" as const,
+          populatedDescriptionTestId: "product-description",
+        }),
     ...(getMdxSource !== undefined && { getMdxSource }),
   });
 }

package/templates/apps/web/app/[locale]/products/__tests__/hub-children.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * Hub child cards (#10121) for /products. The shared cases live in
+ * `lib/__tests__/hub-children.fixtures.ts`; this file sits beside the route so
+ * a scaffold without /products drops it with the route (#10157).
+ */
+const mockRenderPage = jest.fn(async (..._args: unknown[]) => "<rendered/>");
+
+jest.mock("@working-theory/page-renderer", () => ({
+  __esModule: true,
+  renderPage: (...args: unknown[]) => mockRenderPage(...args),
+  renderPageMetadata: jest.fn(),
+  // Never reached — every call in this suite passes its loaders via DI.
+  getMdxSlugs: jest.fn(),
+  getMdxSource: jest.fn(),
+  getPageSections: jest.fn(),
+}));
+
+jest.mock("@working-theory/ui/sections", () => ({
+  __esModule: true,
+  SectionRenderer: () => null,
+}));
+
+import ProductsPage from "../page";
+import {
+  describeHub,
+  type HubPage,
+} from "../../../../lib/__tests__/hub-children.fixtures";
+
+describeHub(
+  ["products", ProductsPage as HubPage, "ProductsList", "Product", "mdx-body"],
+  mockRenderPage,
+);

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

@@ -70,6 +70,8 @@ describe("ProductsPage — snapshot regression", () => {
     const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
     const element = await ProductsPage({
       params: Promise.resolve({ locale: "en" }),
+      // No child pages: this snapshot pins the hub's own render (#10121).
+      getMdxSlugs: async () => [],
       getMdxSource: getMdxSourceEmpty,
     });
     const { container } = render(element);
@@ -83,11 +85,14 @@ describe("ProductsPage — snapshot regression", () => {
     const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
     const element = await ProductsPage({
       params: Promise.resolve({ locale: "en" }),
+      // No child pages: this snapshot pins the hub's own render (#10121).
+      getMdxSlugs: async () => [],
       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 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 motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-remote" data-source="
+     "<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"><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-remote" data-source="# Products
+
      Body."></div></div></article></div></div></div></main>"
     `);
   });
@@ -110,7 +115,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"><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 motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-remote" data-source="
+     "<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"><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium motion-safe:transition motion-safe:duration-(--button-hover-duration) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) not-disabled:hover:bg-(--button-hover-quiet-bg) not-disabled:hover:text-(--button-hover-quiet-fg) not-disabled:hover:opacity-(--button-hover-opacity) not-disabled:hover:transform-(--button-hover-transform) not-disabled:hover:shadow-(--button-hover-shadow) not-disabled:active:bg-gray-200 not-disabled:active:text-(--color-fg) rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div class="ailk-prose max-w-none text-(--color-text-muted) text-body-sm leading-relaxed [&amp;>*:first-child]:mt-0 [&amp;_h2]:mt-block-loose [&amp;_h2]:scroll-mt-24 [&amp;_h2]:text-heading-3 [&amp;_h2]:font-display [&amp;_h2]:text-(--color-fg) [&amp;_h3]:mt-block-loose [&amp;_h3]:scroll-mt-24 [&amp;_h3]:text-heading-4 [&amp;_h3]:font-display [&amp;_h3]:text-(--color-fg) [&amp;_h4]:mt-block-tight [&amp;_h4]:scroll-mt-24 [&amp;_h4]:text-heading-4 [&amp;_h4]:font-display [&amp;_h4]:text-(--color-fg) [&amp;_h5]:mt-block-tight [&amp;_h5]:scroll-mt-24 [&amp;_h5]:text-heading-4 [&amp;_h5]:font-display [&amp;_h5]:text-(--color-fg) [&amp;_h6]:mt-block-tight [&amp;_h6]:scroll-mt-24 [&amp;_h6]:text-heading-4 [&amp;_h6]:font-display [&amp;_h6]:text-(--color-fg) [&amp;_p]:mt-paragraph [&amp;_strong]:font-semibold [&amp;_strong]:text-(--color-fg) [&amp;_em]:italic [&amp;_ul]:mt-paragraph [&amp;_ul]:list-disc [&amp;_ul]:ps-6 [&amp;_ol]:mt-paragraph [&amp;_ol]:list-decimal [&amp;_ol]:ps-6 [&amp;_li]:mt-1 [&amp;_li]:ps-1 [&amp;_li]:marker:text-(--color-text-muted) [&amp;_li>ul]:mt-1 [&amp;_li>ol]:mt-1 [&amp;_blockquote]:mt-paragraph [&amp;_blockquote]:border-s-4 [&amp;_blockquote]:border-(--color-border-strong) [&amp;_blockquote]:ps-4 [&amp;_blockquote]:italic [&amp;_blockquote]:text-(--color-text-muted) [&amp;_hr]:my-block-loose [&amp;_hr]:border-(--color-border) [&amp;_a]:text-(--color-accent) [&amp;_a]:underline [&amp;_a]:underline-offset-4 [&amp;_:not(pre)>code]:rounded [&amp;_:not(pre)>code]:bg-(--color-surface-secondary) [&amp;_:not(pre)>code]:px-1.5 [&amp;_:not(pre)>code]:py-0.5 [&amp;_:not(pre)>code]:text-code [&amp;_:not(pre)>code]:font-mono [&amp;_:not(pre)>code]:text-(--color-fg) [&amp;_pre]:mt-paragraph [&amp;_pre]:overflow-auto [&amp;_pre]:rounded-md [&amp;_pre]:border-hairline [&amp;_pre]:border-(--color-border) [&amp;_pre]:bg-(--color-bg) [&amp;_pre]:p-4 [&amp;_pre]:font-mono [&amp;_pre]:text-body-sm [&amp;_img]:mt-paragraph [&amp;_img]:h-auto [&amp;_img]:max-w-full [&amp;_img]:rounded-lg [&amp;_table]:mt-paragraph [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_table]:text-body-sm [&amp;_th]:border-b [&amp;_th]:border-(--color-border) [&amp;_th]:bg-(--color-surface-secondary) [&amp;_th]:px-3 [&amp;_th]:py-2 [&amp;_th]:text-start [&amp;_th]:font-semibold [&amp;_th]:text-(--color-fg) [&amp;_td]:border-b [&amp;_td]:border-(--color-border) [&amp;_td]:px-3 [&amp;_td]:py-2 [&amp;_kbd]:rounded [&amp;_kbd]:border-hairline [&amp;_kbd]:border-(--color-border) [&amp;_kbd]:bg-(--color-surface-secondary) [&amp;_kbd]:px-1.5 [&amp;_kbd]:py-0.5 [&amp;_kbd]:text-caption [&amp;_kbd]:font-mono" data-testid="mdx-content"><div data-testid="mdx-remote" data-source="# AI Launch Kit
+
      Body."></div></div></article></div></div></div></main>"
     `);
   });