create-ailk 0.21.0 → 0.23.0

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

@@ -0,0 +1,352 @@
+// oss: false
+/**
+ * magnet-page.tsx — the standard magnet page pair (#8840 D8).
+ *
+ * Every multi-step magnet is two pages, the canon's #5053 split moved to the
+ * magnet's own path: an indexable LANDING (`/<magnet>`, inside the site's
+ * chrome — a centred hero of the flow record's `landing` copy, a CTA to
+ * `/<magnet>/start`, and the `Assessment` page type's single-layer
+ * `WebApplication` JSON-LD) and a `noindex, follow` WALK (`/<magnet>/start`,
+ * chrome-free by `lib/magnet-routes.ts`, the back arrow alone above step 1).
+ * This module is the only code that renders either half: `/flows/<slug>`,
+ * the careers apply pages and every pair `create-ailk add-route magnet`
+ * writes are callers of the factories below.
+ *
+ * The read: one `flows.get(slug)` shared per server instance for 15 seconds
+ * per slug (the /contact idiom, #8731), so a page's metadata, its body and a
+ * burst of views make one hub read. A slug the schema refuses is `absent`
+ * with no read and no cache entry, each insert first drops the stale
+ * entries, and the map holds at most 256 slugs, so random URLs cannot grow
+ * it (SEC-8840-G). A refused
+ * connection or a 5xx is `unavailable`: both pages then show the site's
+ * contact email instead of a 500, are `noindex`, and retry nothing. A site
+ * with no hub to ask — the read answers 503 `flows_not_configured`, or a
+ * failed read with no API origin configured — is `not-configured` (#9219);
+ * a pair renders it as `unavailable`, and `/reports/<slug>` uses it to 404
+ * an unknown slug where a hub outage shows the contact email. A walk
+ * that exists apart from its flow (`/careers/apply`) passes a `title`: its
+ * fallback then carries that page heading, and an absent flow renders the
+ * same fallback rather than a 404 (#9219).
+ *
+ * A flow whose served config carries a `deliverable` (#8848 D7) has one
+ * route, `/reports/<slug>`: both halves redirect there (307) before
+ * rendering anything, so `/flows/<slug>` and every `add-route magnet` pair
+ * hand it over and an ungated deliverable never gets a form here. The
+ * deliverable's own walk calls `renderMagnetStart` with `asDeliverable`.
+ */
+import { flows } from "@working-theory/api-client";
+import { JsonLd } from "@working-theory/jsonld";
+import { flowRouteMetadata } from "@working-theory/metadata";
+import { buildJsonLd } from "@working-theory/schema";
+import { ContactFallback, Container, Heading, localeHref } from "@working-theory/ui";
+import { NavBackLink } from "@working-theory/ui/chrome";
+import { SectionRenderer } from "@working-theory/ui/sections";
+import type { FlowConfig, PageSection } from "@working-theory/validation";
+import { flowSlugSchema, resolveLocalizedString } from "@working-theory/validation";
+import type { Metadata } from "next";
+import { notFound, redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { readSiteContactEmail } from "../../contact/site-contact-email";
+
+import { FlowStepperClient } from "./FlowStepperClient";
+
+/** The marker every standard magnet page carries in its header comment (D13). */
+export const MAGNET_PAGE_MARKER = "Standard magnet page (#8840)";
+
+/** How long one slug's read is shared across requests (/contact's #8731 value). */
+const MAGNET_READ_TTL_MS = 15_000;
+
+/** At most this many slugs are held at once; past it a read is not shared. */
+const MAGNET_READ_MAX_ENTRIES = 256;
+
+export type MagnetRead =
+  | { kind: "ok"; config: FlowConfig }
+  | { kind: "absent" }
+  | { kind: "unavailable" }
+  | { kind: "not-configured" };
+
+const magnetReads = new Map<string, { at: number; read: Promise<MagnetRead> }>();
+
+/**
+ * Whether an API origin is configured: the three names `getApiBase()` in
+ * packages/api-client/src/http.ts reads, in step with it (as `/pricing`
+ * checks them). Without one that function answers `localhost:3001`.
+ */
+function apiOriginConfigured(): boolean {
+  return Boolean(
+    process.env.AILK_API_URL ||
+    process.env.NEXT_PUBLIC_AILK_API_URL ||
+    process.env.NEXT_PUBLIC_API_URL,
+  );
+}
+
+/** The flows route's own answer when its hub has no database (apps/api `flows_not_configured`). */
+function isFlowsNotConfigured(body: unknown): boolean {
+  const error = (body as { error?: { code?: unknown } } | null)?.error;
+  return error?.code === "flows_not_configured";
+}
+
+/** A read that failed: `not-configured` when there is no hub to ask, else `unavailable`. */
+function failedRead(): MagnetRead {
+  return apiOriginConfigured() ? { kind: "unavailable" } : { kind: "not-configured" };
+}
+
+async function fetchMagnet(slug: string): Promise<MagnetRead> {
+  try {
+    const res = await flows.get(slug);
+    if (res.ok) return { kind: "ok", config: res.body };
+    if (res.status === 503 && isFlowsNotConfigured(res.body)) return { kind: "not-configured" };
+    return res.status >= 500 ? failedRead() : { kind: "absent" };
+  } catch {
+    return failedRead();
+  }
+}
+
+/** The served flow config for `slug`, shared per instance for 15 seconds. */
+export function readMagnet(slug: string): Promise<MagnetRead> {
+  if (!flowSlugSchema.safeParse(slug).success) {
+    return Promise.resolve({ kind: "absent" });
+  }
+  const now = Date.now();
+  const hit = magnetReads.get(slug);
+  if (hit && now - hit.at < MAGNET_READ_TTL_MS) return hit.read;
+  for (const [key, entry] of magnetReads) {
+    if (now - entry.at >= MAGNET_READ_TTL_MS) magnetReads.delete(key);
+  }
+  const read = fetchMagnet(slug);
+  if (magnetReads.size < MAGNET_READ_MAX_ENTRIES) magnetReads.set(slug, { at: now, read });
+  return read;
+}
+
+/** The landing's title and line: the record's `landing` copy, else today's. */
+async function landingCopy(
+  config: FlowConfig,
+  locale: string,
+): Promise<{ title: string; description: string; meta?: string; cta: string }> {
+  const t = await getTranslations({ locale, namespace: "flow" });
+  const pick = (value: Record<string, string> | undefined): string | undefined =>
+    value === undefined ? undefined : resolveLocalizedString(value, locale, config.defaultLocale);
+  const { landing } = config;
+  const meta = pick(landing?.meta);
+  return {
+    title: pick(landing?.title) ?? pick(config.steps[0]!.copy.title)!,
+    description: pick(landing?.description) ?? t("landingIntro"),
+    ...(meta !== undefined ? { meta } : {}),
+    cta: pick(landing?.cta) ?? t("getStarted"),
+  };
+}
+
+/**
+ * The site's contact email in place of a magnet the hub cannot serve (D8).
+ * With a `title`, the page's own `<h1>` sits above it (#9219).
+ */
+export async function magnetUnavailable(locale: string, title?: string): Promise<ReactElement> {
+  const t = await getTranslations({ locale, namespace: "flow" });
+  return (
+    <Container className="py-section">
+      <div className="mx-auto max-w-container-sm">
+        {title !== undefined ? (
+          <Heading level={1} className="mb-block-tight">
+            {title}
+          </Heading>
+        ) : null}
+        <ContactFallback
+          email={readSiteContactEmail()}
+          text={{
+            heading: t("unavailableHeading"),
+            body: t("unavailableBody"),
+            noEmail: t("unavailableNoEmail"),
+          }}
+        />
+      </div>
+    </Container>
+  );
+}
+
+export interface MagnetLandingInput {
+  slug: string;
+  /** The landing's own path, e.g. `/diagnostic`; the CTA goes to `<path>/start`. */
+  path: string;
+  locale: string;
+}
+
+/** The indexable landing of a magnet pair (D8). */
+export async function renderMagnetLanding({
+  slug,
+  path,
+  locale,
+}: MagnetLandingInput): Promise<ReactElement> {
+  const read = await readMagnet(slug);
+  if (read.kind === "absent") notFound();
+  if (read.kind !== "ok") return magnetUnavailable(locale);
+  // #8848 D7 — a deliverable's one route.
+  if (read.config.deliverable !== undefined) redirect(localeHref(locale, `/reports/${slug}`));
+
+  const copy = await landingCopy(read.config, locale);
+  const sections: PageSection[] = [
+    {
+      id: "flow-landing-hero",
+      type: "hero",
+      data: {
+        variant: "centered",
+        headline: copy.title,
+        subheadline: copy.description,
+        ...(copy.meta !== undefined ? { body: copy.meta } : {}),
+        primaryCta: { label: copy.cta, href: localeHref(locale, `${path}/start`) },
+      },
+    },
+  ];
+
+  return (
+    <>
+      <JsonLd
+        schema={buildJsonLd({
+          type: "Assessment",
+          slug: read.config.slug,
+          title: copy.title,
+          description: copy.description,
+          locale,
+        })}
+      />
+      <main>
+        <SectionRenderer sections={sections} locale={locale} />
+      </main>
+    </>
+  );
+}
+
+/** The landing's metadata: indexable under the site's own rule; a fallback never is. */
+export async function renderMagnetLandingMetadata({
+  slug,
+  locale,
+}: Pick<MagnetLandingInput, "slug" | "locale">): Promise<Metadata> {
+  const read = await readMagnet(slug);
+  if (read.kind === "absent") return {};
+  if (read.kind !== "ok") return flowRouteMetadata();
+  const copy = await landingCopy(read.config, locale);
+  return { title: copy.title, description: copy.description };
+}
+
+export interface MagnetStartInput {
+  slug: string;
+  locale: string;
+  /** Where the back arrow goes, unlocalized (the landing, or the posting). */
+  backHref: string;
+  /** Page-supplied `hidden` field values (a posting's slug as `job`). */
+  hiddenValues?: Readonly<Record<string, string>>;
+  /** Replaces step 1's title at every locale it holds (a posting's title). */
+  firstStepTitle?: string;
+  /** #8848 D7 — the deliverable's own walk (`/reports/<slug>/start`): no redirect. */
+  asDeliverable?: boolean;
+  /**
+   * #9219 — a walk that exists apart from its flow (`/careers/apply`): the
+   * `<h1>` of its fallback, which an absent flow renders too, never a 404.
+   */
+  title?: string;
+}
+
+function withFirstStepTitle(config: FlowConfig, title: string): FlowConfig {
+  const [first, ...rest] = config.steps;
+  if (!first) return config;
+  const titled = Object.fromEntries(Object.keys(first.copy.title).map((key) => [key, title]));
+  return { ...config, steps: [{ ...first, copy: { ...first.copy, title: titled } }, ...rest] };
+}
+
+/** The chrome-free, noindex walk of a magnet pair (D8). */
+export async function renderMagnetStart({
+  slug,
+  locale,
+  backHref,
+  hiddenValues,
+  firstStepTitle,
+  asDeliverable = false,
+  title,
+}: MagnetStartInput): Promise<ReactElement> {
+  const read = await readMagnet(slug);
+  if (read.kind === "absent" && title === undefined) notFound();
+  if (read.kind === "ok" && read.config.deliverable !== undefined && !asDeliverable) {
+    redirect(localeHref(locale, `/reports/${slug}/start`));
+  }
+  const t = await getTranslations({ locale, namespace: "flow" });
+  const back = <NavBackLink href={localeHref(locale, backHref)} label={t("back")} />;
+  if (read.kind !== "ok") {
+    return (
+      <>
+        <div className="px-control-x pt-control-y">{back}</div>
+        {await magnetUnavailable(locale, title)}
+      </>
+    );
+  }
+
+  const config =
+    firstStepTitle !== undefined ? withFirstStepTitle(read.config, firstStepTitle) : read.config;
+  return (
+    <FlowStepperClient
+      config={config}
+      locale={locale}
+      slug={read.config.slug}
+      header={back}
+      {...(hiddenValues !== undefined ? { hiddenValues } : {})}
+    />
+  );
+}
+
+/** The walk's metadata: always `noindex, follow` (`flowRouteMetadata`). */
+export async function renderMagnetStartMetadata({
+  slug,
+  locale,
+  firstStepTitle,
+  title,
+}: Pick<MagnetStartInput, "slug" | "locale" | "firstStepTitle" | "title">): Promise<Metadata> {
+  const read = await readMagnet(slug);
+  if (read.kind !== "ok") return flowRouteMetadata(title !== undefined ? { title } : {});
+  const firstStep = read.config.steps[0];
+  if (!firstStep) return flowRouteMetadata();
+  return flowRouteMetadata({
+    title:
+      firstStepTitle ??
+      resolveLocalizedString(firstStep.copy.title, locale, read.config.defaultLocale),
+  });
+}
+
+// ─── Factories for a pair at a path (D8, D12) ──────────────────────────────
+
+/** A magnet pair: the flow it walks, and the landing's own path. */
+export interface MagnetRef {
+  slug: string;
+  path: string;
+}
+
+interface MagnetPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export function magnetLanding(ref: MagnetRef) {
+  return async function MagnetLandingPage({ params }: MagnetPageProps): Promise<ReactElement> {
+    const { locale } = await params;
+    return renderMagnetLanding({ slug: ref.slug, path: ref.path, locale });
+  };
+}
+
+export function magnetLandingMetadata(ref: MagnetRef) {
+  return async function generateMetadata({ params }: MagnetPageProps): Promise<Metadata> {
+    const { locale } = await params;
+    return renderMagnetLandingMetadata({ slug: ref.slug, locale });
+  };
+}
+
+export function magnetStart(ref: MagnetRef) {
+  return async function MagnetStartPage({ params }: MagnetPageProps): Promise<ReactElement> {
+    const { locale } = await params;
+    return renderMagnetStart({ slug: ref.slug, locale, backHref: ref.path });
+  };
+}
+
+export function magnetStartMetadata(ref: MagnetRef) {
+  return async function generateMetadata({ params }: MagnetPageProps): Promise<Metadata> {
+    const { locale } = await params;
+    return renderMagnetStartMetadata({ slug: ref.slug, locale });
+  };
+}

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

@@ -1,6 +1,8 @@
 // oss: false
 /**
- * /[locale]/flows/[slug] — the tool's LANDING route (#5053 D3/D5).
+ * /[locale]/flows/[slug] — the tool's LANDING route (#5053 D3/D5). Standard
+ * magnet page (#8840): rendered by `magnet-page.tsx`'s `renderMagnetLanding`
+ * with the pair's path `/flows/<slug>`.
  *
  * An interactive tool is TWO routes. This is the indexed half: the document
  * that describes the tool, carries its structured data, and links to the
@@ -18,92 +20,29 @@
  * resting on #5019, which names `assessment` and `calculator` among the
  * builders that keep that shape byte for byte).
  *
- * Copy: a served `FlowConfig` carries no tool-level name or description, so
- * the landing derives its name from the flow's own first-step title — the
- * same string this route already used as its page title before the split —
- * and takes its supporting line and CTA label from the site's `flow`
- * message namespace. No consuming site's wording ships here.
- *
- * Same `flows.get` fetch and same 404-on-`!res.ok` as the flow route: a flow
- * that is absent or unconfigured has no landing either. Dynamic rendering
- * for the same reason — the config is DB-backed live data.
+ * Copy (#8840 D8): the flow record's `landing` block — its title, line, meta
+ * line and button — else the flow's own first-step title and the site's
+ * `flow` messages. No consuming site's wording ships here. A flow that is
+ * absent has no landing either; a hub that cannot be reached shows the site's
+ * contact email. Dynamic rendering — the config is DB-backed live data.
  */
-import { flows } from "@working-theory/api-client";
-import { JsonLd } from "@working-theory/jsonld";
-import { buildJsonLd } from "@working-theory/schema";
-import { SectionRenderer } from "@working-theory/ui/sections";
-import type { FlowConfig, PageSection } from "@working-theory/validation";
-import { resolveLocalizedString } from "@working-theory/validation";
 import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
+import { renderMagnetLanding, renderMagnetLandingMetadata } from "./magnet-page";
+
 export const dynamic = "force-dynamic";
 
 interface Props {
   params: Promise<{ locale: string; slug: string }>;
 }
 
-/** The tool's name — the flow's own first-step title in the active locale. */
-function toolName(config: FlowConfig, locale: string): string {
-  return resolveLocalizedString(
-    config.steps[0]!.copy.title,
-    locale,
-    config.defaultLocale,
-  );
-}
-
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { locale, slug } = await params;
-  const res = await flows.get(slug);
-  if (!res.ok) return {};
-
-  const t = await getTranslations({ locale, namespace: "flow" });
-  return {
-    title: toolName(res.body, locale),
-    description: t("landingIntro"),
-  };
+  return renderMagnetLandingMetadata({ slug, locale });
 }
 
 export default async function Page({ params }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
-  const res = await flows.get(slug);
-  if (!res.ok) {
-    notFound();
-  }
-
-  const t = await getTranslations({ locale, namespace: "flow" });
-  const name = toolName(res.body, locale);
-  const intro = t("landingIntro");
-  const startHref = `/flows/${res.body.slug}/start`;
-
-  const sections: PageSection[] = [
-    {
-      id: "flow-landing-hero",
-      type: "hero",
-      data: {
-        headline: name,
-        subheadline: intro,
-        primaryCta: { label: t("getStarted"), href: startHref },
-      },
-    },
-  ];
-
-  return (
-    <>
-      <JsonLd
-        schema={buildJsonLd({
-          type: "Assessment",
-          slug: res.body.slug,
-          title: name,
-          description: intro,
-          locale,
-        })}
-      />
-      <main>
-        <SectionRenderer sections={sections} locale={locale} />
-      </main>
-    </>
-  );
+  return renderMagnetLanding({ slug, path: `/flows/${slug}`, locale });
 }

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

@@ -1,23 +1,19 @@
 // oss: false
 /**
  * /[locale]/flows/[slug]/start — the flow half of the two-route tool
- * (#5053 D3/D5). Moved here from `../page.tsx`, which is now the indexed
- * landing; the fetch, the 404-on-`!res.ok` and the dynamic rendering are
- * unchanged from #3957 D8.
+ * (#5053 D3/D5). Standard magnet page (#8840): rendered by
+ * `magnet-page.tsx`'s `renderMagnetStart`, chrome-free with the back arrow to
+ * `/flows/<slug>` (`lib/magnet-routes.ts`).
  *
- * `flowRouteMetadata` (`@working-theory/metadata`) supplies `noindex,
- * follow` — the whole point of D4 is that this route does NOT write the
- * robots value, it gets it from what it mounts. `follow`, not `nofollow`:
- * the links out of a flow still carry.
+ * `flowRouteMetadata` (`@working-theory/metadata`, mounted by the renderer)
+ * supplies `noindex, follow` — the whole point of D4 is that this route does
+ * NOT write the robots value, it gets it from what it mounts. `follow`, not
+ * `nofollow`: the links out of a flow still carry.
  */
-import { flows } from "@working-theory/api-client";
-import { flowRouteMetadata } from "@working-theory/metadata";
-import { resolveLocalizedString } from "@working-theory/validation";
 import type { Metadata } from "next";
-import { notFound } from "next/navigation";
 import type { ReactElement } from "react";
 
-import { FlowStepperClient } from "../FlowStepperClient";
+import { renderMagnetStart, renderMagnetStartMetadata } from "../magnet-page";
 
 export const dynamic = "force-dynamic";
 
@@ -27,27 +23,10 @@ interface Props {
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { locale, slug } = await params;
-  const res = await flows.get(slug);
-  if (!res.ok) return flowRouteMetadata();
-
-  const firstStep = res.body.steps[0];
-  if (!firstStep) return flowRouteMetadata();
-
-  return flowRouteMetadata({
-    title: resolveLocalizedString(
-      firstStep.copy.title,
-      locale,
-      res.body.defaultLocale,
-    ),
-  });
+  return renderMagnetStartMetadata({ slug, locale });
 }
 
 export default async function Page({ params }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
-  const res = await flows.get(slug);
-  if (!res.ok) {
-    notFound();
-  }
-
-  return <FlowStepperClient config={res.body} locale={locale} slug={slug} />;
+  return renderMagnetStart({ slug, locale, backHref: `/flows/${slug}` });
 }

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

@@ -80,7 +80,7 @@ describe("ForPage — 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":"Use Cases","description":"How teams use our platform.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Article"}]}}</script><main id="main"><div><h1>Use Cases</h1><p data-testid="for-description" class="mt-block-tight text-lead">How teams use our platform.</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 data-testid="mdx-remote" data-source=""></div></article></div></div></div></main>"`,
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Use Cases","description":"How teams use our platform.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Article"}]}}</script><main id="main"><div><h1>Use Cases</h1><p data-testid="for-description" class="mt-block-tight text-lead">How teams use our platform.</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 data-testid="mdx-remote" data-source=""></div></article></div></div></div></main>"`,
     );
   });
 });

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

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