create-ailk 0.21.0 → 0.22.0

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

@@ -35,6 +35,15 @@
  * a `thankYou` block, so without this widening the callback would never be
  * supplied on a recommending flow at all.
  *
+ * Account link (#8771 D5): when the walk completes on an `invite` magnet (the
+ * step response's `next`), the client asks `accountInviteLinkAction` for the
+ * sign-in link with the email the visitor gave already filled in, then shows
+ * "Track this in your account" on `FlowStepper`'s own finished panel — or,
+ * for a flow with a `thankYou` block, hands the link to `/thanks/<slug>`
+ * through `sessionStorage` (`ailk:account-invite`). The email never enters a
+ * URL the walk navigates to (NFR1), and each link sits in a Session-Replay
+ * `data-sentry-block` element, since the scrub cannot reach a DOM `href`.
+ *
  * Locale validation before interpolation (AILK #4707, security review on
  * samhenry PR #163): the `[locale]` route segment is a Next.js dynamic
  * segment — the framework matches ANY string there, and next-intl's
@@ -49,6 +58,7 @@
  * bundle, the same reasoning `middleware.ts` already documents for the
  * Edge runtime) before it ever reaches the template literal.
  */
+import { Button, Link } from "@working-theory/ui";
 import {
   FlowStepper,
   type FlowStepperMessages,
@@ -60,6 +70,7 @@ import {
   deriveFlags,
   encodePermalink,
   flattenState,
+  flowStepNextSchema,
   hiddenAnswers,
   PERMALINK_VERSION,
   pruneHiddenState,
@@ -68,8 +79,9 @@ import {
 import { useRouter } from "next/navigation";
 import { useMessages, useTranslations } from "next-intl";
 import type { ReactElement } from "react";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
+import { accountInviteLinkAction } from "./account-invite.actions";
 import { submitFlowStepAction } from "./flow.actions";
 
 interface Props {
@@ -88,6 +100,28 @@ function resolveSafeLocale(candidate: string): string {
   return ENABLED_LOCALES.includes(candidate) ? candidate : DEFAULT_LOCALE;
 }
 
+/** The `/thanks` hand-off key (#8771 D5) — read once by `AccountInviteLink`. */
+const ACCOUNT_INVITE_STORAGE_KEY = "ailk:account-invite";
+
+/**
+ * #8771 D5 — the email the engine will land as the lead's: the first
+ * `mapsTo: "email"` field of the submitted `field` step that holds a
+ * non-empty string. Mirrors `extractMappedEmail` (a later step wins).
+ */
+function mappedEmailOf(
+  config: FlowConfig,
+  payload: FlowStepSubmitPayload,
+): string | undefined {
+  const step = config.steps.find((s) => s.key === payload.stepKey);
+  if (step?.type !== "field") return undefined;
+  for (const field of step.fields) {
+    if (field.mapsTo !== "email") continue;
+    const value = payload.values[field.name];
+    if (typeof value === "string" && value.trim() !== "") return value.trim();
+  }
+  return undefined;
+}
+
 /**
  * D7 (#4770) — every question `name` contributed by a `segmentation`-typed
  * step. This is the allowlist the encoded permalink is filtered to: a
@@ -130,6 +164,13 @@ export function FlowStepperClient({
   // recommending completion can hand the walk's session to the results page
   // via `sessionStorage` (never the URL — the permalink stays answers-only).
   const lastSessionIdRef = useRef<string | undefined>(undefined);
+  // #8771 D5 — the email the walk has landed, and the account link built from
+  // it at completion on an `invite` magnet. The ref carries the link to
+  // `handleCompleted`; the state draws it on the finished panel.
+  const emailRef = useRef<string | undefined>(undefined);
+  const inviteHrefRef = useRef<string | null>(null);
+  const [inviteHref, setInviteHref] = useState<string | null>(null);
+  const tContact = useTranslations("contact");
 
   async function handleSubmitStep(
     payload: FlowStepSubmitPayload,
@@ -141,12 +182,36 @@ export function FlowStepperClient({
         [payload.stepKey]: payload.values,
       };
       lastSessionIdRef.current = result.response.sessionId;
+      emailRef.current = mappedEmailOf(config, payload) ?? emailRef.current;
+      if (result.response.completed) {
+        await resolveInviteLink(result.response);
+      }
     } else if (result.kind === "step_conflict") {
       answersRef.current = {};
+      emailRef.current = undefined;
     }
     return result;
   }
 
+  // #8771 D5 — on an `invite` completion with a landed email, ask the server
+  // for the prefilled sign-in link. A rejected or null answer gives no link.
+  async function resolveInviteLink(response: unknown): Promise<void> {
+    inviteHrefRef.current = null;
+    setInviteHref(null);
+    const next = flowStepNextSchema.safeParse(
+      (response as { next?: unknown }).next,
+    );
+    const email = emailRef.current;
+    if (!next.success || email === undefined || isRecommending) return;
+    try {
+      const href = await accountInviteLinkAction(email);
+      inviteHrefRef.current = href;
+      setInviteHref(href);
+    } catch {
+      // No link — the walk still completes.
+    }
+  }
+
   // #4663 D11 — `aeoScore` passes through untouched: this repo's segment
   // redirect is unchanged; C2's results page (on samhenry) is the consumer
   // of the score.
@@ -209,6 +274,26 @@ export function FlowStepperClient({
 
     if (!thankYou) return;
     const thankYouSlug = resolveThankYouSlug(thankYou, result.segment);
+    // #8771 D5 — hand the link to /thanks through the per-tab sessionStorage,
+    // never the URL; with no link, clear an earlier walk's so it never shows
+    // on this page. A storage that throws gives no link.
+    if (typeof window !== "undefined") {
+      try {
+        if (inviteHrefRef.current !== null) {
+          window.sessionStorage.setItem(
+            ACCOUNT_INVITE_STORAGE_KEY,
+            JSON.stringify({
+              thanks: thankYouSlug,
+              href: inviteHrefRef.current,
+            }),
+          );
+        } else {
+          window.sessionStorage.removeItem(ACCOUNT_INVITE_STORAGE_KEY);
+        }
+      } catch {
+        // No hand-off.
+      }
+    }
     router.push(`/${resolveSafeLocale(locale)}/thanks/${thankYouSlug}`);
   }
 
@@ -252,6 +337,25 @@ export function FlowStepperClient({
     selectAllThatApply: t("selectAllThatApply"),
   };
 
+  // #8771 D5 — the link goes INSIDE FlowStepper's own finished card (a flow
+  // with a `thankYou` block navigates away instead, so it never shows there).
+  // Session Replay records the DOM, so the link (it carries the email) is
+  // blocked from it; `Link` does not forward an undeclared data-* attribute.
+  const completedAction =
+    inviteHref !== null && thankYou === undefined && !isRecommending ? (
+      <div data-sentry-block>
+        <Button asChild variant="outline" className="mt-4 min-h-11">
+          <Link
+            href={inviteHref}
+            variant="bare"
+            data-testid="flow-account-invite"
+          >
+            {tContact("trackInAccount")}
+          </Link>
+        </Button>
+      </div>
+    ) : undefined;
+
   return (
     <FlowStepper
       config={config}
@@ -261,6 +365,7 @@ export function FlowStepperClient({
       {...(thankYou !== undefined || isRecommending
         ? { onCompleted: handleCompleted }
         : {})}
+      {...(completedAction !== undefined ? { completedAction } : {})}
     />
   );
 }

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/FlowStepperClient.invite.test.tsx

@@ -0,0 +1,257 @@
+// oss: false
+/**
+ * #8771 AC-4 — the walk shows "Track this in your account" with the email the
+ * visitor gave already filled in, and keeps that email out of every URL it
+ * navigates to. FlowStepper is a stub that submits a configurable step and
+ * calls the real `onCompleted` it is given; the Server Actions are doubles.
+ */
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { FlowConfig } from "@working-theory/validation";
+import type { ReactElement } from "react";
+
+const mockPush = jest.fn();
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mockPush }),
+}));
+
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+  useMessages: () => ({}),
+}));
+
+// eslint-disable-next-line no-restricted-syntax -- the boundary under test is the client wiring, not the actions
+jest.mock("../flow.actions", () => ({ submitFlowStepAction: jest.fn() }));
+// eslint-disable-next-line no-restricted-syntax -- see above
+jest.mock("../account-invite.actions", () => ({ accountInviteLinkAction: jest.fn() }));
+
+type Step = { stepKey: string; values: Record<string, unknown> };
+let steps: Step[] = [];
+
+interface StubProps {
+  onSubmitStep: (payload: Step & { locale?: string }) => Promise<{
+    ok: boolean;
+    response?: { completed: boolean; segment?: string };
+  }>;
+  onCompleted?: (result: { segment?: string }) => void;
+  completedAction?: ReactElement;
+}
+
+jest.mock("@working-theory/ui-signal-collectors", () => ({
+  FlowStepper: (props: StubProps) => {
+    async function handleSubmit(): Promise<void> {
+      for (const step of steps) {
+        const result = await props.onSubmitStep({ ...step, locale: "en" });
+        if (result.ok && result.response?.completed) {
+          props.onCompleted?.(
+            result.response.segment !== undefined ? { segment: result.response.segment } : {},
+          );
+        }
+      }
+    }
+    // The real FlowStepper renders `completedAction` inside its finished card.
+    return require("react").createElement(
+      "div",
+      { "data-testid": "mock-completed-card" },
+      require("react").createElement(
+        "button",
+        { "data-testid": "mock-submit", onClick: handleSubmit },
+        "Submit",
+      ),
+      props.completedAction,
+    ) as ReactElement;
+  },
+}));
+
+import { accountInviteLinkAction } from "../account-invite.actions";
+import { submitFlowStepAction } from "../flow.actions";
+import { FlowStepperClient } from "../FlowStepperClient";
+
+const mockSubmit = submitFlowStepAction as jest.MockedFunction<typeof submitFlowStepAction>;
+const mockLink = accountInviteLinkAction as jest.MockedFunction<typeof accountInviteLinkAction>;
+
+const HREF = "/sign-in?next=%2Faccount&email=jane%40example.com";
+const EMAIL = "jane@example.com";
+
+function config(opts: { tagged: boolean; thankYou: boolean; secondEmail?: boolean }): FlowConfig {
+  return {
+    slug: "get-a-quote",
+    defaultLocale: "en",
+    steps: [
+      {
+        key: "contact",
+        type: "field",
+        copy: { title: { en: "Let's get started" } },
+        fields: [
+          {
+            name: "email",
+            inputType: "email",
+            required: true,
+            ...(opts.tagged ? { mapsTo: "email" } : {}),
+            copy: { label: { en: "Email" } },
+          },
+          ...(opts.secondEmail
+            ? [
+                {
+                  name: "backup",
+                  inputType: "email",
+                  ...(opts.tagged ? { mapsTo: "email" } : {}),
+                  copy: { label: { en: "Backup" } },
+                },
+              ]
+            : []),
+        ],
+      },
+    ],
+    ...(opts.thankYou
+      ? { thankYou: { default: "flow-thanks", bySegment: { qualified: "flow-thanks-qualified" } } }
+      : {}),
+  } as FlowConfig;
+}
+
+function ok(response: Record<string, unknown>) {
+  return {
+    ok: true as const,
+    response: {
+      sessionId: "s",
+      landed: "contact",
+      nextStepKey: null,
+      completed: true,
+      ...response,
+    },
+  } as never;
+}
+
+async function walk(cfg: FlowConfig): Promise<void> {
+  render(<FlowStepperClient config={cfg} locale="en" slug="get-a-quote" />);
+  await userEvent.click(screen.getByTestId("mock-submit"));
+}
+
+beforeEach(() => {
+  mockPush.mockClear();
+  mockSubmit.mockReset();
+  mockLink.mockReset();
+  mockLink.mockResolvedValue(HREF);
+  steps = [{ stepKey: "contact", values: { email: EMAIL } }];
+  window.sessionStorage.clear();
+});
+
+describe("the finished panel (no thankYou block)", () => {
+  it("shows the prefilled link inside a Replay-blocked element", async () => {
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+
+    await walk(config({ tagged: true, thankYou: false }));
+
+    const link = await screen.findByTestId("flow-account-invite");
+    expect(link).toHaveAttribute("href", HREF);
+    expect(link).toHaveTextContent("trackInAccount");
+    expect(link.closest("[data-sentry-block]")).not.toBeNull();
+    // Inside the finished card, not a sibling after the frame (#8771 design review).
+    expect(link.closest('[data-testid="mock-completed-card"]')).not.toBeNull();
+    expect(mockLink).toHaveBeenCalledTimes(1);
+    expect(mockLink).toHaveBeenCalledWith(EMAIL);
+  });
+
+  it("only an email-tagged field counts", async () => {
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+
+    await walk(config({ tagged: false, thankYou: false }));
+
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
+    expect(mockLink).not.toHaveBeenCalled();
+    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+  });
+
+  it("uses the step's first tagged email field", async () => {
+    steps = [{ stepKey: "contact", values: { email: "first@example.com", backup: "second@example.com" } }];
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+
+    await walk(config({ tagged: true, thankYou: false, secondEmail: true }));
+
+    await screen.findByTestId("flow-account-invite");
+    expect(mockLink).toHaveBeenCalledWith("first@example.com");
+  });
+
+  it.each([
+    ["no next", { }],
+    ["a step that does not complete", { completed: false, next: { completion: "invite" } }],
+  ])("%s: no action call and no link", async (_name, response) => {
+    mockSubmit.mockResolvedValue(ok(response));
+
+    await walk(config({ tagged: true, thankYou: false }));
+
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
+    expect(mockLink).not.toHaveBeenCalled();
+    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+  });
+
+  it("an action answer of null shows no link", async () => {
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+    mockLink.mockResolvedValue(null);
+
+    await walk(config({ tagged: true, thankYou: false }));
+
+    await waitFor(() => expect(mockLink).toHaveBeenCalled());
+    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+  });
+
+  it("a conflict forgets the email: a later completing step with no email field asks for no link", async () => {
+    mockSubmit
+      .mockResolvedValueOnce(ok({ completed: false }))
+      .mockResolvedValueOnce({ ok: false, kind: "step_conflict", message: "x" } as never)
+      .mockResolvedValueOnce(ok({ next: { completion: "invite" } }));
+    steps = [
+      { stepKey: "contact", values: { email: EMAIL } },
+      { stepKey: "contact", values: { email: EMAIL } },
+      { stepKey: "other", values: { note: "hi" } },
+    ];
+
+    await walk(config({ tagged: true, thankYou: false }));
+
+    await waitFor(() => expect(mockSubmit).toHaveBeenCalledTimes(3));
+    expect(mockLink).not.toHaveBeenCalled();
+  });
+});
+
+describe("the /thanks hand-off (a thankYou block)", () => {
+  it("writes one sessionStorage item and pushes a URL with no email in it", async () => {
+    mockSubmit.mockResolvedValue(ok({ segment: "qualified", next: { completion: "invite" } }));
+
+    await walk(config({ tagged: true, thankYou: true }));
+
+    await waitFor(() => expect(mockPush).toHaveBeenCalled());
+    expect(JSON.parse(window.sessionStorage.getItem("ailk:account-invite") ?? "null")).toEqual({
+      thanks: "flow-thanks-qualified",
+      href: HREF,
+    });
+    const url = mockPush.mock.calls[0]?.[0] as string;
+    expect(url).toBe("/en/thanks/flow-thanks-qualified");
+    expect(url).not.toContain("@");
+    expect(screen.queryByTestId("flow-account-invite")).toBeNull();
+  });
+
+  it("clears an earlier walk's hand-off when this completion has no link", async () => {
+    window.sessionStorage.setItem(
+      "ailk:account-invite",
+      JSON.stringify({ thanks: "flow-thanks", href: HREF }),
+    );
+    mockSubmit.mockResolvedValue(ok({}));
+
+    await walk(config({ tagged: true, thankYou: true }));
+
+    await waitFor(() => expect(mockPush).toHaveBeenCalled());
+    expect(window.sessionStorage.getItem("ailk:account-invite")).toBeNull();
+  });
+
+  it("a sessionStorage that throws still navigates", async () => {
+    mockSubmit.mockResolvedValue(ok({ next: { completion: "invite" } }));
+    const spy = jest.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+      throw new Error("denied");
+    });
+
+    await walk(config({ tagged: true, thankYou: true }));
+
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/en/thanks/flow-thanks"));
+    spy.mockRestore();
+  });
+});

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/account-invite.actions.test.ts

@@ -0,0 +1,69 @@
+// oss: false
+/**
+ * #8771 AC-4 (the action) — accountInviteLinkAction builds #8757's link on the
+ * server and answers null when it cannot.
+ */
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+const mockGetLocale = jest.fn();
+jest.mock("next-intl/server", () => ({
+  getLocale: (...args: unknown[]) => mockGetLocale(...args),
+}));
+
+const mockInviteHref = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- accountInviteHref reads the generated topology (build output); this file asserts the action's own decision
+jest.mock("../../../../../lib/account-invite", () => ({
+  accountInviteHref: (...args: unknown[]) => mockInviteHref(...args),
+}));
+
+import { accountInviteLinkAction } from "../account-invite.actions";
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockGetLocale.mockResolvedValue("fr");
+  mockInviteHref.mockImplementation(
+    (locale: string, email: string) => `/${locale}/sign-in?email=${email}`,
+  );
+});
+
+describe("accountInviteLinkAction", () => {
+  it("returns what accountInviteHref returns for the request's locale", async () => {
+    await expect(accountInviteLinkAction("jane@example.com")).resolves.toBe(
+      "/fr/sign-in?email=jane@example.com",
+    );
+    expect(mockInviteHref).toHaveBeenCalledWith("fr", "jane@example.com");
+  });
+
+  it.each(["nope", "a\r\n@b.example", "a b@example.com"])(
+    "refuses %j",
+    async (email) => {
+      await expect(accountInviteLinkAction(email)).resolves.toBeNull();
+      expect(mockInviteHref).not.toHaveBeenCalled();
+    },
+  );
+
+  it("answers null when the locale cannot be read", async () => {
+    mockGetLocale.mockRejectedValue(new Error("no request scope"));
+    await expect(
+      accountInviteLinkAction("jane@example.com"),
+    ).resolves.toBeNull();
+  });
+
+  it("answers null for a site with no sign-in", async () => {
+    mockInviteHref.mockReturnValue(null);
+    await expect(
+      accountInviteLinkAction("jane@example.com"),
+    ).resolves.toBeNull();
+  });
+
+  it("makes no API call, and carries the oss marker on its first line", () => {
+    const source = readFileSync(
+      join(__dirname, "..", "account-invite.actions.ts"),
+      "utf8",
+    );
+    expect(source.split("\n")[0]).toBe("// oss: false");
+    expect(source).not.toMatch(/\bfetch\(/);
+    expect(source).not.toContain("@working-theory/api-client");
+  });
+});

package/templates/apps/web/app/[locale]/flows/[slug]/account-invite.actions.ts

@@ -0,0 +1,35 @@
+// oss: false
+"use server";
+
+/**
+ * accountInviteLinkAction — the walk's "Track this in your account" link
+ * (#8771 D5). The walk's client holds the email the visitor typed; this builds
+ * the sign-in link that starts with that email prefilled, using #8757's
+ * `accountInviteHref`. It is a Server Action, not client code, because
+ * `accountInviteHref` reads the generated topology module, which lazily
+ * imports `../auth` and must never reach a client bundle.
+ *
+ * It makes no API call and writes nothing — the invite email is sent by the
+ * API at completion. No MCP twin: it builds a link from the visitor's own
+ * email for a browser to follow (`WEB_ONLY_ACTIONS` in
+ * `apps/mcp/__tests__/parity.test.ts`).
+ *
+ * Answers `null` for an email the hint schema refuses, a locale that cannot be
+ * read, or a site with no sign-in — the walk then shows no link.
+ */
+import { accountEmailHintSchema } from "@working-theory/validation";
+import { getLocale } from "next-intl/server";
+
+import { accountInviteHref } from "../../../../lib/account-invite";
+
+export async function accountInviteLinkAction(
+  email: string,
+): Promise<string | null> {
+  const hint = accountEmailHintSchema.safeParse(email);
+  if (!hint.success) return null;
+  try {
+    return accountInviteHref(await getLocale(), hint.data);
+  } catch {
+    return null;
+  }
+}

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>"
     `);