create-ailk 0.7.0 → 0.9.0

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

@@ -1,8 +1,20 @@
-// Contact page. Renders sections via renderPage (sections mode) with the
-// plain ContactForm slotted into the split hero's right column (or appended
-// below when no split hero leads). The chat-style intake
-// (ConversationalIntakeWrapper, #4534) remains available to a site that
-// prefers it. JSON-LD and translations handled by renderPage.
+// Contact page (#6730 D8). Renders sections via renderPage (sections mode)
+// and places ONE contact surface, first match wins: into the page's first
+// `contact-form` section; else into a leading split hero's right column;
+// else after the page.
+//
+// That surface is the shared `LeadCaptureForm` block, bound to
+// `captureLeadAction` — unless the API says this deployment accepts no
+// contact message (production with neither a database nor an email key), in
+// which case it is `ContactFallback`: the site's contact email, never a form
+// that would report a message as sent when it reached nobody. An unreachable
+// API, an older API without the status route, or any other failed read is
+// treated as accepting: the form renders, and its submit reports honestly.
+//
+// The chat-style intake (ConversationalIntakeWrapper, #4534) remains
+// available to a site that prefers it. JSON-LD and translations handled by
+// renderPage.
+import { leads } from "@working-theory/api-client";
 import type {
   getMdxSource as defaultGetMdxSource,
   getPageSections as defaultGetPageSections,
@@ -13,10 +25,21 @@ import {
   renderPage,
   renderPageMetadata,
 } from "@working-theory/page-renderer";
+import {
+  ContactFallback,
+  type ContactFormField,
+  LeadCaptureForm,
+  localeHref,
+} from "@working-theory/ui";
 import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
-import { ContactForm } from "./ContactForm";
+import { contactFormText } from "./contact-form-text";
+import { captureLeadAction } from "./contact.actions";
+import { readSiteContactEmail } from "./site-contact-email";
+
+export const revalidate = 60;
 
 interface Props {
   params: Promise<{ locale: string }>;
@@ -24,6 +47,41 @@ interface Props {
   getPageSections?: typeof defaultGetPageSections;
 }
 
+type CaptureStatus = Extract<
+  Awaited<ReturnType<typeof leads.captureStatus>>,
+  { ok: true }
+>["body"]["data"];
+
+type Section = Awaited<ReturnType<typeof defaultGetPageSections>>[number];
+type ContactFormSection = Extract<Section, { type: "contact-form" }>;
+
+const FIELD_TYPES = ["text", "email", "tel", "textarea", "select"] as const;
+
+/** A `contact-form` section's declared fields, as the form block renders them. */
+function sectionFields(section: ContactFormSection): ContactFormField[] {
+  return section.data.fields.map((f) => ({
+    name: f.name,
+    label: f.label,
+    type: (FIELD_TYPES as readonly string[]).includes(f.type)
+      ? (f.type as (typeof FIELD_TYPES)[number])
+      : "text",
+    ...(f.required !== undefined ? { required: f.required } : {}),
+    ...(f.placeholder !== undefined ? { placeholder: f.placeholder } : {}),
+    ...(f.options !== undefined ? { options: f.options } : {}),
+    ...(f.colSpan !== undefined ? { colSpan: f.colSpan as 1 | 2 } : {}),
+  }));
+}
+
+/** The API's capture status, or `null` for any failed read (see header). */
+async function readCaptureStatus(): Promise<CaptureStatus | null> {
+  try {
+    const res = await leads.captureStatus();
+    return res.ok && res.body.ok === true ? res.body.data : null;
+  } catch {
+    return null;
+  }
+}
+
 export async function generateMetadata({
   params,
 }: Pick<Props, "params">): Promise<Metadata> {
@@ -37,17 +95,49 @@ export default async function Page({
   getPageSections,
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
-  // The contact form sits in the hero's right column when the page leads with
-  // a split hero (the two-column contact layout — operator ruling 2026-09-23:
-  // the Free template shows the plain form; the guided intake stays a Pro
-  // option); otherwise — no content, or a different lead section — it renders
-  // below the page, so the contact surface is never lost.
+  const [status, t] = await Promise.all([
+    readCaptureStatus(),
+    getTranslations({ locale, namespace: "contact" }),
+  ]);
+  const accepting = status?.contact ?? true;
+  const contactEmail = readSiteContactEmail();
+  const text = contactFormText(t);
+
   const source = await (getMdxSource ?? loadMdxSource)("ContactPage", "contact", locale);
   const sections = source ? await (getPageSections ?? loadPageSections)(source.frontmatter) : [];
+  const formSection = sections.find(
+    (s): s is ContactFormSection => s.type === "contact-form",
+  );
+  // The section's own published address stands in when _site.mdx has none.
+  const fallbackEmail = contactEmail ?? formSection?.data.contactInfo?.email;
   const lead = sections[0];
   const slotted =
-    lead?.type === "hero" && lead.data.variant === "split" ? lead.id : undefined;
-  const intake = <ContactForm />;
+    formSection?.id ??
+    (lead?.type === "hero" && lead.data.variant === "split" ? lead.id : undefined);
+
+  const surface = accepting ? (
+    <LeadCaptureForm
+      action={captureLeadAction}
+      text={text}
+      termsHref={localeHref(locale, "/terms")}
+      fallbackEmail={fallbackEmail}
+      {...(formSection && {
+        fields: sectionFields(formSection),
+        submitLabel: formSection.data.submitLabel,
+        successMessage: formSection.data.successMessage,
+      })}
+    />
+  ) : (
+    <ContactFallback
+      email={fallbackEmail}
+      text={{
+        heading: text.unavailableHeading,
+        body: text.unavailableBody,
+        noEmail: text.unavailableNoEmail,
+      }}
+    />
+  );
+
   const rendered = await renderPage({
     type: "ContactPage",
     slug: "contact",
@@ -55,12 +145,12 @@ export default async function Page({
     translationsNamespace: "contact",
     ...(getMdxSource !== undefined && { getMdxSource }),
     ...(getPageSections !== undefined && { getPageSections }),
-    ...(slotted !== undefined && { sectionSlots: { [slotted]: intake } }),
+    ...(slotted !== undefined && { sectionSlots: { [slotted]: surface } }),
   });
   return (
     <>
       {rendered}
-      {slotted === undefined ? intake : null}
+      {slotted === undefined ? surface : null}
     </>
   );
 }

package/templates/apps/web/app/[locale]/contact/site-contact-email.ts

@@ -0,0 +1,54 @@
+/**
+ * The site's published contact email (#6730 D10) — `_site.mdx`'s top-level
+ * `contactEmail`, else a `LocalBusiness` identity's `email`, else `undefined`.
+ *
+ * `/contact` shows it in place of the form when the site has nowhere to
+ * deliver a message, and hands it to the form's `unavailable` state.
+ *
+ * A local frontmatter read rather than `@working-theory/site-config/server`'s
+ * `loadSiteConfig`: `architecture.yaml` forbids `apps/web` from importing that
+ * subpath (it pulls `node:fs` into a tree that also carries edge routes,
+ * #1567) — the same reason `lib/site-theme.ts` and `lib/site-brand.tsx` read
+ * locally. The value is still validated against the canonical schema from
+ * the client-safe `/schema` entry. Any failure (no file, no frontmatter, an
+ * invalid address) is `undefined`: the fallback then says the site has
+ * published no contact details, which is true.
+ */
+
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import { SiteConfigSchema } from "@working-theory/site-config/schema";
+import { parse as parseYaml } from "yaml";
+
+import { resolveContentRoot } from "../../../lib/site-brand";
+
+const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---/;
+
+const EmailSchema = SiteConfigSchema.shape.contactEmail.unwrap();
+
+function validEmail(value: unknown): string | undefined {
+  const parsed = EmailSchema.safeParse(value);
+  return parsed.success ? parsed.data : undefined;
+}
+
+export function readSiteContactEmail(): string | undefined {
+  try {
+    const raw = readFileSync(join(resolveContentRoot(), "_site.mdx"), "utf8");
+    const match = FRONTMATTER_RE.exec(raw);
+    if (!match) return undefined;
+    const fm: unknown = parseYaml(match[1] ?? "");
+    if (!fm || typeof fm !== "object") return undefined;
+
+    const { contactEmail, siteIdentity } = fm as {
+      contactEmail?: unknown;
+      siteIdentity?: { kind?: unknown; email?: unknown };
+    };
+    return (
+      validEmail(contactEmail) ??
+      (siteIdentity?.kind === "LocalBusiness" ? validEmail(siteIdentity.email) : undefined)
+    );
+  } catch {
+    return undefined;
+  }
+}

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

@@ -0,0 +1,64 @@
+// Feature detail page (#6721) — one feature at /features/<slug>, listed by
+// the /features page. Reads the Feature MDX for the given slug, renders via
+// @working-theory/page-renderer, and emits a JSON-LD WebPage whose mainEntity
+// is the product's SoftwareApplication, named for the feature. Unknown slugs
+// 404. Composed `sections[]` render as sections; a prose page renders its
+// MDX body.
+import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
+import {
+  getMdxSource as loadMdxSource,
+  getMdxSlugs,
+  renderPage,
+  renderPageMetadata,
+} from "@working-theory/page-renderer";
+import type { Metadata } from "next";
+import type { ReactElement } from "react";
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale, slug } = await params;
+  return renderPageMetadata({ type: "Feature", slug, locale });
+}
+
+export async function generateStaticParams({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<{ slug: string }[]> {
+  const slugs = await getMdxSlugs("Feature", params.locale);
+  return slugs.map((slug) => ({ slug }));
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale, slug } = await params;
+  // A page that composes `sections[]` (the starter seeds, #6721) renders
+  // them; a prose page renders its MDX body — the same rule the /features hub
+  // applies. JSON-LD is built from the frontmatter either way.
+  const source = await (getMdxSource ?? loadMdxSource)("Feature", 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: "Feature",
+    slug,
+    locale,
+    ...(composed
+      ? {}
+      : {
+          bodyMode: "mdx-body" as const,
+          populatedDescriptionTestId: "feature-description",
+        }),
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

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

@@ -0,0 +1,52 @@
+// Features list page. Reads FeaturesList MDX via the content adapter and emits
+// a JSON-LD CollectionPage via the dispatcher. List-only — no detail route.
+import type {
+  getMdxSource as defaultGetMdxSource,
+} 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";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+  getMdxSource?: typeof defaultGetMdxSource;
+}
+
+export async function generateMetadata({
+  params,
+}: Pick<Props, "params">): Promise<Metadata> {
+  const { locale } = await params;
+  return renderPageMetadata({
+    type: "FeaturesList",
+    slug: "features",
+    locale,
+  });
+}
+
+export default async function Page({
+  params,
+  getMdxSource,
+}: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  // A FeaturesList page that composes `sections[]` (the Free template's
+  // /features, operator ruling 2026-09-23) renders them; a prose-only page
+  // keeps the MDX-body render. The CollectionPage JSON-LD is built from the
+  // sections either way (buildFeaturesList).
+  const source = await (getMdxSource ?? loadMdxSource)("FeaturesList", "features", 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: "FeaturesList",
+    slug: "features",
+    locale,
+    translationsNamespace: "features",
+    ...(composed ? {} : { bodyMode: "mdx-body" as const }),
+    ...(getMdxSource !== undefined && { getMdxSource }),
+  });
+}

package/templates/apps/web/app/[locale]/{use-cases → for}/[slug]/page.tsx

@@ -1,9 +1,12 @@
-// UseCase detail page (#6658 D4) — one use case at /use-cases/<slug>, listed by
-// the /use-cases page. Reads the UseCase MDX for the given slug, renders via
+// UseCase detail page (#6658 D4; route renamed to /for by #6878 D2) — one
+// customer page at /for/<slug>, listed by the /for hub. Reads the UseCase MDX
+// for the given slug, renders via
 // @working-theory/page-renderer, and emits a JSON-LD WebPage whose mainEntity
-// is an Article. Unknown slugs 404. Same shape as software/[slug]/page.tsx.
+// is an Article. Unknown slugs 404. Composed `sections[]` render as sections
+// (#6721); a prose page renders its MDX body.
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
 import {
+  getMdxSource as loadMdxSource,
   getMdxSlugs,
   renderPage,
   renderPageMetadata,
@@ -37,12 +40,25 @@ export default async function Page({
   getMdxSource,
 }: Props): Promise<ReactElement> {
   const { locale, slug } = await params;
+  // A page that composes `sections[]` (the starter seeds, #6721) renders
+  // them; a prose page renders its MDX body — the same rule the /for hub
+  // applies. JSON-LD is built from the frontmatter either way.
+  const source = await (getMdxSource ?? loadMdxSource)("UseCase", 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: "UseCase",
     slug,
     locale,
-    bodyMode: "mdx-body",
-    populatedDescriptionTestId: "use-case-description",
+    ...(composed
+      ? {}
+      : {
+          bodyMode: "mdx-body" as const,
+          populatedDescriptionTestId: "use-case-description",
+        }),
     ...(getMdxSource !== undefined && { getMdxSource }),
   });
 }

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

@@ -0,0 +1,73 @@
+/**
+ * HTML snapshot regression tests for for/page.tsx → @working-theory/page-renderer migration
+ * (route renamed from use-cases/ by #6878 D2).
+ *
+ * Two-commit strategy:
+ *   Commit 1: this file added; snapshots captured against pre-migration route (RED-passing).
+ *   Commit 2: route migrated; same snapshots verify diff=0 (GREEN).
+ *
+ * Two states tested:
+ *   - empty: getMdxSource returns null → empty-state branch
+ *   - populated: getMdxSource returns a minimal MdxPageSource → full render
+ *
+ * Failure = snapshot diff > 0 bytes. DO NOT regenerate snapshots to pass.
+ */
+import React from "react";
+import { render } from "@testing-library/react";
+
+// ── @working-theory/ui mock ─────────────────────────────────────────────────────────────
+jest.mock("@working-theory/ui", () => ({
+  // #4446/#4447: renderPage's own fallback/empty-state title now composes
+  // Heading (mobile type-budget classes, #4417) instead of a bare <h1>.
+  Heading: ({
+    children,
+    level,
+  }: {
+    children: React.ReactNode;
+    level: number;
+  }): React.ReactElement => React.createElement(`h${level}`, null, children),
+  SectionRenderer: ({ sections }: { sections: unknown[] }) =>
+    React.createElement("div", {
+      "data-testid": "section-renderer",
+      "data-section-count": String(sections.length),
+    }),
+}));
+
+import ForPage from "../page";
+
+const getMdxSourceEmpty = jest.fn().mockResolvedValue(null);
+
+describe("ForPage — snapshot regression", () => {
+  it("empty state renders deterministic HTML", async () => {
+    const element = await ForPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourceEmpty,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<main id="main"><h1>Customers</h1><p data-testid="section-empty-state">Customer pages coming soon.</p></main>"`,
+    );
+  });
+
+  it("populated state renders deterministic HTML", async () => {
+    const source = {
+      frontmatter: {
+        type: "UseCasesList" as const,
+        slug: "for",
+        title: "Use Cases",
+        description: "How teams use our platform.",
+      },
+      body: "",
+    };
+    const getMdxSourcePopulated = jest.fn().mockResolvedValue(source);
+
+    const element = await ForPage({
+      params: Promise.resolve({ locale: "en" }),
+      getMdxSource: getMdxSourcePopulated,
+    });
+    const { container } = render(element);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<script type="application/ld+json" data-testid="json-ld">{"@context":"https://schema.org","@type":"CollectionPage","inLanguage":"en","name":"Use Cases","description":"How teams use our platform.","mainEntity":{"@type":"ItemList","itemListElement":[{"@type":"Article"}]}}</script><main id="main"><h1>Use Cases</h1><p data-testid="for-description">How teams use our platform.</p><div data-testid="markdown-view-toggle" class="ailk-markdown-view-toggle"><div class="flex justify-end mb-3"><div role="radiogroup" aria-label="Page view" data-testid="markdown-view-toggle" class="inline-flex items-center gap-0.5 rounded-lg p-1 bg-(--color-surface-secondary)"><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) bg-(--color-bg) text-(--color-fg) shadow-sm" type="button" role="radio" aria-checked="true" aria-label="Rendered" tabindex="0" data-testid="markdown-view-toggle-rendered">Rendered</button><button class="inline-flex items-center justify-center gap-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>svg]:shrink-0 text-(--color-fg) hover:bg-(--color-surface-secondary) active:bg-gray-200 rounded-control px-control-x h-(--control-height-thin) text-caption leading-none rounded-md px-3 text-body-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--color-accent) focus-visible:ring-offset-1 min-w-(--control-height-thin) min-h-(--control-height-big) text-(--color-text-muted) hover:text-(--color-fg)" type="button" role="radio" aria-checked="false" aria-label="Markdown" tabindex="-1" data-testid="markdown-view-toggle-markdown">Markdown</button></div></div><div role="status" aria-live="polite" aria-atomic="true" class="sr-only" data-testid="markdown-view-toggle-status">Showing Rendered view</div><div data-testid="markdown-view-rendered"><article data-testid="mdx-body"><div data-testid="mdx-remote" data-source=""></div></article></div></div></main>"`,
+    );
+  });
+});

package/templates/apps/web/app/[locale]/{use-cases → for}/page.tsx

@@ -1,5 +1,6 @@
-// Use Cases list page. Reads UseCasesList MDX via the content adapter and emits
-// a JSON-LD CollectionPage via the dispatcher. List-only — no detail route.
+// Customers (/for) hub page (#6878 D2 — renamed from /use-cases). Reads
+// UseCasesList MDX via the content adapter and emits a JSON-LD CollectionPage
+// via the dispatcher. List-only — no detail route.
 import type {
   getMdxSource as defaultGetMdxSource,
 } from "@working-theory/page-renderer";
@@ -22,7 +23,7 @@ export async function generateMetadata({
   const { locale } = await params;
   return renderPageMetadata({
     type: "UseCasesList",
-    slug: "use-cases",
+    slug: "for",
     locale,
   });
 }
@@ -33,19 +34,19 @@ export default async function Page({
 }: Props): Promise<ReactElement> {
   const { locale } = await params;
   // A UseCasesList page that composes `sections[]` (the Free template's
-  // /use-cases, operator ruling 2026-09-23) renders them; a prose-only page
+  // /for hub, operator ruling 2026-09-23) renders them; a prose-only page
   // keeps the MDX-body render. The CollectionPage JSON-LD is built from the
   // sections either way (buildUseCasesList).
-  const source = await (getMdxSource ?? loadMdxSource)("UseCasesList", "use-cases", locale);
+  const source = await (getMdxSource ?? loadMdxSource)("UseCasesList", "for", 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: "UseCasesList",
-    slug: "use-cases",
+    slug: "for",
     locale,
-    translationsNamespace: "use-cases",
+    translationsNamespace: "for",
     ...(composed ? {} : { bodyMode: "mdx-body" as const }),
     ...(getMdxSource !== undefined && { getMdxSource }),
   });

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

@@ -2,7 +2,7 @@
 // `GlossaryList` MDX with slug `glossary` and emits a JSON-LD CollectionPage
 // whose mainEntity is a DefinedTermSet built from its `glossary-index`
 // sections. A module-less surface a template enables by naming it in its
-// roster; with no content the route 404s. Mirrors use-cases/page.tsx: a
+// roster; with no content the route 404s. Mirrors for/page.tsx: a
 // sections-composed page renders its sections, a prose-only page its MDX body.
 import type { getMdxSource as defaultGetMdxSource } from "@working-theory/page-renderer";
 import {