@thewhatmatters/wmds 0.2.0

package/docs/patterns/sites-whatmatters-prompt-chat--landing-to-chat.tsx

@@ -0,0 +1,899 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — landing to chat
+// Storybook: Sites/WhatMatters/Prompt chat → Pattern — landing to chat (?path=/story/sites-whatmatters-prompt-chat--landing-to-chat)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type MouseEvent } from "react";
+import { Check, ChevronDown, ChevronLeft, ChevronRight, Copy, LoaderCircle, Sparkle, Sparkles, ThumbsDown, ThumbsUp, X } from "lucide-react";
+import { motion, useReducedMotion, type Transition } from "motion/react";
+import {
+  Button,
+  CalEmbed,
+  Card,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardLayoutBodyOccupantWellClasses,
+  cardSubtitleClasses,
+  cardTitleClasses,
+  ChatQa,
+  Checkbox,
+  ConfettiProvider,
+  IconButton,
+  IntakeConfirmation,
+  IntakeForm,
+  intakeAboutEmpty,
+  Kbd,
+  PillGroup,
+  PromptBar,
+  SiteNav,
+  TextLink,
+  motionBeatSeconds,
+  motionBlurReveal,
+  motionStaggerSeconds,
+  motionTransitionProp,
+  readMotionDurationSeconds,
+  useKbdChoiceKeys,
+  type ChatQaPair,
+  type IntakeAboutValues,
+  intakeDetailsMax,
+  isIntakeAboutValid,
+} from "@thewhatmatters/wmds";
+
+const pageClasses = "flex h-[100svh] min-h-0 w-full flex-col overflow-hidden bg-body";
+const columnClasses = "flex min-h-0 w-full flex-1 flex-col overflow-hidden [--grid-max:40rem]";
+const stageClasses = "grid-page min-h-0 w-full flex-1 overflow-y-auto !py-0";
+const landingClasses = "place-content-center";
+const headlineClasses =
+  "col-span-full type-display-2 !font-normal text-balance text-center text-brand";
+const threadClasses = "col-span-full flex w-full min-w-0 flex-col items-start gap-6 pt-6";
+const userClasses =
+  "ml-auto max-w-full rounded-full bg-fill-selected px-4 py-2 type-body text-fg";
+const replyClasses = "w-full type-body text-fg";
+const replyBlockClasses =
+  "group/reply w-full outline-none [&[data-actions=open]]:outline-none";
+const traceClasses = "flex w-full flex-col items-start gap-2";
+const traceBodyClasses =
+  "flex w-full flex-col items-start gap-2 border-l border-border-control py-0.5 pl-3";
+const traceLineClasses = "flex items-center gap-2 type-supporting text-muted";
+const thoughtLabelClasses = "type-supporting text-muted";
+const traceIconClasses = "size-4 shrink-0 text-muted";
+const traceSpinClasses = "size-4 shrink-0 animate-spin text-muted";
+const traceChevronClasses = "size-4 shrink-0 text-muted";
+const actionsClasses =
+  "flex items-center gap-1 opacity-0 pointer-events-none transition-opacity duration-fast ease-standard group-hover/reply:opacity-100 group-hover/reply:pointer-events-auto group-focus-within/reply:opacity-100 group-focus-within/reply:pointer-events-auto group-data-[actions=open]/reply:opacity-100 group-data-[actions=open]/reply:pointer-events-auto";
+const followUpsClasses = "flex w-full flex-col gap-2";
+const followUpClasses = "w-full";
+const barClasses = "grid-page w-full shrink-0 !pt-0 !pb-6";
+const composerClasses = "col-span-full";
+const startGateCardClasses = "h-[411px]";
+const startGateOccupantClasses = "flex min-h-full w-full flex-col gap-3 py-3";
+const startGateStepClasses = "type-supporting text-muted px-1 tabular-nums";
+const startGateOptionsClasses = "flex w-full flex-col";
+const startGateOptionClasses =
+  "flex w-full items-center gap-3 border-b border-border py-3 last:border-b-0";
+const startGateOptionNumberClasses = "shrink-0";
+const startOptions = [
+  { value: "brand", label: "Brand identity", description: "Name, mark, and a system you can actually use.", number: 1 },
+  { value: "website", label: "Website", description: "A site that explains the work and earns the next conversation.", number: 2 },
+  { value: "product", label: "Product design", description: "Flows, screens, and the details in between.", number: 3 },
+  { value: "system", label: "Design system", description: "Components, tokens, and the rules that keep them honest.", number: 4 },
+] as const;
+const startBudgets = [
+  { value: "under-10", label: "<$10k", emphasis: "solid" },
+  { value: "10-25", label: "$10–25k", emphasis: "solid" },
+  { value: "25-50", label: "$25–50k", emphasis: "solid" },
+  { value: "50-plus", label: "$50k+", emphasis: "solid" },
+  { value: "unsure", label: "Not sure yet", emphasis: "muted" },
+] as const;
+type IntakeStep = 1 | 2 | 3 | 4;
+type IntakePhase =
+  | { kind: "step"; step: IntakeStep }
+  | { kind: "done"; variant: "booked" | "emailed" };
+const startGateCopy: Record<IntakeStep, { title: string; subtitle: string }> = {
+  1: { title: "Name the work", subtitle: "What are we making?" },
+  2: { title: "What's the budget?", subtitle: "A range is enough. We can tighten it after the first conversation." },
+  3: { title: "About you", subtitle: "A few sentences is enough. We'll reply to the email you leave here." },
+  4: { title: "Book a call", subtitle: "Pick a time, or skip this and we'll write to you instead." },
+};
+
+function canContinueStart(
+  step: IntakeStep,
+  needs: readonly string[],
+  budget: string | null,
+  about: IntakeAboutValues,
+) {
+  if (step === 1) return needs.length > 0;
+  if (step === 2) return budget != null;
+  if (step === 3) return isIntakeAboutValid(about, intakeDetailsMax);
+  return false;
+}
+
+const headline = "What should we make?";
+const sampleReply =
+  "Brand, product, and the sites that explain them. The studio notes cover how a project starts.";
+type ReplyPart = { kind: "word"; text: string } | { kind: "source"; text: string; href: string };
+const replyParts: ReplyPart[] = [
+  { kind: "word", text: "Brand," },
+  { kind: "word", text: "product," },
+  { kind: "word", text: "and" },
+  { kind: "word", text: "the" },
+  { kind: "word", text: "sites" },
+  { kind: "word", text: "that" },
+  { kind: "word", text: "explain" },
+  { kind: "word", text: "them." },
+  { kind: "word", text: "The" },
+  { kind: "source", text: "studio notes", href: "/notes" },
+  { kind: "word", text: "cover" },
+  { kind: "word", text: "how" },
+  { kind: "word", text: "a" },
+  { kind: "word", text: "project" },
+  { kind: "word", text: "starts." },
+];
+const followUps = [
+  "What does a brand engagement include?",
+  "How do you start a product design?",
+];
+function thoughtForLabel(seconds: number) {
+  const n = Math.max(1, Math.floor(seconds));
+  return n === 1 ? "Thought for 1 second" : "Thought for " + n + " seconds";
+}
+// Trace choreography in --motion-beat units: a step every 3 beats, the spinner for 2, a 13-beat hold.
+const traceBeats = { step: 3, spin: 2, hold: 13 };
+const traceSteps = ["Read the brief", "Name the brand", "Check the product site", "Find the studio notes"];
+type Point = { top: number; left: number };
+
+function partDelay(index: number, reduce: boolean, settleSeconds: number, staggerSeconds: number) {
+  if (reduce || index <= 0) return 0;
+  let time = 0;
+  for (let i = 0; i < index; i += 1) {
+    const part = replyParts[i];
+    const next = replyParts[i + 1];
+    const hold = part?.kind === "source" || next?.kind === "source";
+    time += hold ? settleSeconds : staggerSeconds;
+  }
+  return time;
+}
+
+function intakeQaPairs(
+  needs: readonly string[],
+  budget: string | null,
+  about: IntakeAboutValues,
+  outcome: "booked" | "emailed",
+): ChatQaPair[] {
+  const needsAnswer = startOptions
+    .filter((option) => needs.includes(option.value))
+    .map((option) => option.label)
+    .join(", ");
+  const budgetAnswer = startBudgets.find((option) => option.value === budget)?.label ?? "";
+  const aboutAnswer = [about.name.trim(), about.company.trim()].filter((part) => part.length > 0).join(", ");
+  const followUpAnswer = outcome === "booked" ? "Booked a call" : "Email me";
+  return [
+    { question: "What are we making?", answer: needsAnswer },
+    { question: "What's the budget?", answer: budgetAnswer },
+    { question: "About you", answer: aboutAnswer },
+    { question: "How should we follow up?", answer: followUpAnswer },
+  ].filter((pair) => pair.answer.length > 0);
+}
+
+type Turn =
+  | { id: number; kind: "prompt"; prompt: string }
+  | { id: number; kind: "intake"; pairs: ChatQaPair[] };
+
+function IntakeExchange({
+  pairs,
+  latest,
+  reduce,
+  onFollowUp,
+  onReplyGrown,
+}: {
+  pairs: readonly ChatQaPair[];
+  latest: boolean;
+  reduce: boolean;
+  onFollowUp: (value: string) => void;
+  onReplyGrown: () => void;
+}) {
+  const fast = motionTransitionProp("fast");
+  const [mark, setMark] = useState<"up" | "down" | null>(null);
+  const [streamDone, setStreamDone] = useState(reduce);
+  const [actionsOpen, setActionsOpen] = useState(false);
+  const settleSeconds = readMotionDurationSeconds("fast");
+  const staggerSeconds = motionStaggerSeconds();
+
+  useEffect(() => {
+    if (!actionsOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      const block = (target as Element).closest?.("[data-reply-actions]");
+      if (block != null) return;
+      setActionsOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, [actionsOpen]);
+
+  useEffect(() => {
+    if (streamDone) return;
+    const last = replyParts.length - 1;
+    const wait = (partDelay(last, reduce, settleSeconds, staggerSeconds) + settleSeconds) * 1000;
+    const timer = window.setTimeout(() => setStreamDone(true), wait);
+    return () => window.clearTimeout(timer);
+  }, [reduce, streamDone, settleSeconds, staggerSeconds]);
+
+  useLayoutEffect(() => {
+    onReplyGrown();
+  }, [streamDone, onReplyGrown]);
+
+  function copyReply() {
+    if (typeof navigator === "undefined" || navigator.clipboard == null) return;
+    void navigator.clipboard.writeText(sampleReply).catch(() => undefined);
+  }
+
+  return (
+    <>
+      <ChatQa pairs={pairs} />
+      <div
+        className={replyBlockClasses}
+        data-reply-actions=""
+        data-actions={actionsOpen ? "open" : undefined}
+        onClick={() => {
+          if (typeof window === "undefined") return;
+          if (!window.matchMedia("(hover: none)").matches) return;
+          setActionsOpen(true);
+        }}
+      >
+        <p className={replyClasses} aria-busy={streamDone ? undefined : true}>
+          {replyParts.map((part, index) => (
+            <ReplyWord
+              key={part.kind + "-" + index}
+              part={part}
+              index={index}
+              reduce={reduce}
+              delay={partDelay(index, reduce, settleSeconds, staggerSeconds)}
+              settle={fast}
+              onDone={index === replyParts.length - 1 ? () => setStreamDone(true) : undefined}
+            />
+          ))}
+        </p>
+        {streamDone ? (
+          <div className={actionsClasses}>
+            <IconButton aria-label="Copy reply" size="sm" icon={<Copy />} onClick={copyReply} />
+            <IconButton
+              aria-label="Mark this reply helpful"
+              size="sm"
+              icon={<ThumbsUp />}
+              aria-pressed={mark === "up"}
+              onClick={() => setMark((current) => (current === "up" ? null : "up"))}
+            />
+            <IconButton
+              aria-label="Mark this reply not helpful"
+              size="sm"
+              icon={<ThumbsDown />}
+              aria-pressed={mark === "down"}
+              onClick={() => setMark((current) => (current === "down" ? null : "down"))}
+            />
+          </div>
+        ) : null}
+      </div>
+      {streamDone && latest ? (
+        <div className={followUpsClasses}>
+          {followUps.map((next) => (
+            <Button key={next} role="outline" emphasis="quiet" align="start" size="md" type="button" className={followUpClasses} onClick={() => onFollowUp(next)}>
+              {next}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function Exchange({
+  prompt,
+  arrived = false,
+  latest,
+  reduce,
+  onFollowUp,
+  onReplyGrown,
+}: {
+  prompt: string;
+  /** The prompt came with the page (`initialPrompt`): it is already there, so it does not fade in. */
+  arrived?: boolean;
+  latest: boolean;
+  reduce: boolean;
+  onFollowUp: (value: string) => void;
+  onReplyGrown: () => void;
+}) {
+  const fast = motionTransitionProp("fast");
+  const [mark, setMark] = useState<"up" | "down" | null>(null);
+  const [revealed, setRevealed] = useState(reduce ? traceSteps.length : 0);
+  const [resolved, setResolved] = useState(reduce ? traceSteps.length : 0);
+  const [traceOpen, setTraceOpen] = useState(false);
+  const [replyReady, setReplyReady] = useState(reduce);
+  const [streamDone, setStreamDone] = useState(reduce);
+  const [actionsOpen, setActionsOpen] = useState(false);
+  const [thoughtSeconds, setThoughtSeconds] = useState(1);
+
+  useEffect(() => {
+    if (reduce || replyReady) return;
+    const timer = window.setInterval(() => setThoughtSeconds((current) => current + 1), 1000);
+    return () => window.clearInterval(timer);
+  }, [reduce, replyReady]);
+
+  useEffect(() => {
+    if (reduce) return;
+    const beatMs = motionBeatSeconds(traceBeats.step) * 1000;
+    const spinMs = motionBeatSeconds(traceBeats.spin) * 1000;
+    const timers: number[] = [];
+    for (let index = 1; index <= traceSteps.length; index += 1) {
+      timers.push(window.setTimeout(() => setRevealed(index), index * beatMs));
+      timers.push(window.setTimeout(() => setResolved(index), index * beatMs + spinMs));
+    }
+    timers.push(window.setTimeout(() => {
+      setTraceOpen(false);
+      setReplyReady(true);
+    }, motionBeatSeconds(traceSteps.length * traceBeats.step + traceBeats.hold) * 1000));
+    return () => {
+      for (const timer of timers) window.clearTimeout(timer);
+    };
+  }, [reduce]);
+
+  const settleSeconds = readMotionDurationSeconds("fast");
+  const staggerSeconds = motionStaggerSeconds();
+
+  useEffect(() => {
+    if (!replyReady || streamDone) return;
+    const last = replyParts.length - 1;
+    const wait = (partDelay(last, reduce, settleSeconds, staggerSeconds) + settleSeconds) * 1000;
+    const timer = window.setTimeout(() => setStreamDone(true), wait);
+    return () => window.clearTimeout(timer);
+  }, [replyReady, reduce, streamDone, settleSeconds, staggerSeconds]);
+
+  useEffect(() => {
+    if (!actionsOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      const block = (target as Element).closest?.("[data-reply-actions]");
+      if (block != null) return;
+      setActionsOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, [actionsOpen]);
+
+  useLayoutEffect(() => {
+    if (!replyReady) return;
+    onReplyGrown();
+  }, [replyReady, streamDone, onReplyGrown]);
+
+  function copyReply() {
+    if (typeof navigator === "undefined" || navigator.clipboard == null) return;
+    void navigator.clipboard.writeText(sampleReply).catch(() => undefined);
+  }
+
+  return (
+    <>
+      <motion.p
+        className={userClasses}
+        initial={reduce || arrived ? false : { opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={reduce ? { duration: 0 } : fast}
+      >
+        {prompt}
+      </motion.p>
+      {replyReady ? null : (
+        <div className={traceClasses} aria-busy="true">
+          <Button layout="row" width="hug" role="ghost" type="button" aria-expanded={traceOpen} onClick={() => setTraceOpen((current) => !current)}>
+            <Sparkle className={traceIconClasses} strokeWidth={2} aria-hidden />
+            <span className={thoughtLabelClasses}>{thoughtForLabel(thoughtSeconds)}</span>
+            <ChevronDown className={traceChevronClasses + (traceOpen ? " rotate-180" : "")} strokeWidth={2} aria-hidden />
+          </Button>
+          {traceOpen ? (
+            <div className={traceBodyClasses}>
+              {traceSteps.slice(0, revealed).map((step, index) => (
+                <motion.div
+                  key={step}
+                  className={traceLineClasses}
+                  {...motionBlurReveal(reduce)}
+                  transition={reduce ? { duration: 0 } : fast}
+                >
+                  {index < resolved ? (
+                    <Check className={traceIconClasses} strokeWidth={2} aria-hidden />
+                  ) : (
+                    <LoaderCircle className={traceSpinClasses} strokeWidth={2} aria-hidden />
+                  )}
+                  {step}
+                </motion.div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      )}
+      {replyReady ? (
+        <>
+          <div
+            className={replyBlockClasses}
+            data-reply-actions=""
+            data-actions={actionsOpen ? "open" : undefined}
+            onClick={() => {
+              if (typeof window === "undefined") return;
+              if (!window.matchMedia("(hover: none)").matches) return;
+              setActionsOpen(true);
+            }}
+          >
+            <p className={replyClasses} aria-busy={streamDone ? undefined : true}>
+              {replyParts.map((part, index) => (
+                <ReplyWord
+                  key={part.kind + "-" + index}
+                  part={part}
+                  index={index}
+                  reduce={reduce}
+                  delay={partDelay(index, reduce, settleSeconds, staggerSeconds)}
+                  settle={fast}
+                  onDone={index === replyParts.length - 1 ? () => setStreamDone(true) : undefined}
+                />
+              ))}
+            </p>
+            {streamDone ? (
+              <div className={actionsClasses}>
+                <IconButton aria-label="Copy reply" size="sm" icon={<Copy />} onClick={copyReply} />
+                <IconButton
+                  aria-label="Mark this reply helpful"
+                  size="sm"
+                  icon={<ThumbsUp />}
+                  aria-pressed={mark === "up"}
+                  onClick={() => setMark((current) => (current === "up" ? null : "up"))}
+                />
+                <IconButton
+                  aria-label="Mark this reply not helpful"
+                  size="sm"
+                  icon={<ThumbsDown />}
+                  aria-pressed={mark === "down"}
+                  onClick={() => setMark((current) => (current === "down" ? null : "down"))}
+                />
+              </div>
+            ) : null}
+          </div>
+          {streamDone && latest ? (
+            <div className={followUpsClasses}>
+              {followUps.map((next) => (
+                <Button key={next} role="outline" emphasis="quiet" align="start" size="md" type="button" className={followUpClasses} onClick={() => onFollowUp(next)}>
+                  {next}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+}
+
+function StartGate({
+  phase,
+  needs,
+  onNeedsChange,
+  budget,
+  onBudgetChange,
+  about,
+  onAboutChange,
+  onCancel,
+  onBack,
+  onNext,
+  onBooked,
+  onEmailed,
+  onDone,
+}: {
+  phase: IntakePhase;
+  needs: readonly string[];
+  onNeedsChange: (values: string[]) => void;
+  budget: string | null;
+  onBudgetChange: (value: string) => void;
+  about: IntakeAboutValues;
+  onAboutChange: (values: IntakeAboutValues) => void;
+  onCancel: () => void;
+  onBack: () => void;
+  onNext: () => void;
+  onBooked: () => void;
+  onEmailed: () => void;
+  onDone: () => void;
+}) {
+  const step: IntakeStep = phase.kind === "step" ? phase.step : 4;
+  const copy = startGateCopy[step];
+  const atStart = phase.kind !== "step" || phase.step <= 1;
+  const hideContinue = phase.kind === "done" || (phase.kind === "step" && phase.step === 4);
+  const hideFooter = phase.kind === "done";
+  const continueDisabled =
+    phase.kind !== "step" || !canContinueStart(phase.step, needs, budget, about);
+  const stepOneOpen = phase.kind === "step" && phase.step === 1;
+
+  function toggleNeed(value: string, checked: boolean) {
+    if (checked) {
+      onNeedsChange([...needs, value]);
+      return;
+    }
+    onNeedsChange(needs.filter((item) => item !== value));
+  }
+
+  useKbdChoiceKeys({
+    enabled: stepOneOpen,
+    choices: Object.fromEntries(
+      startOptions.map((option) => [
+        String(option.number),
+        () => toggleNeed(option.value, !needs.includes(option.value)),
+      ]),
+    ),
+  });
+
+  return (
+    <Card shape="rounded" padding="none" variant="surface" aria-label={copy.title} className={startGateCardClasses}>
+      <Card.Header
+        start={
+          phase.kind === "done" ? (
+            <h2 className={cardTitleClasses}>Start a project</h2>
+          ) : (
+            <>
+              <h2 className={cardTitleClasses}>{copy.title}</h2>
+              <p className={cardSubtitleClasses}>{copy.subtitle}</p>
+            </>
+          )
+        }
+        end={
+          <>
+            {phase.kind === "step" ? (
+              <>
+                <IconButton aria-label="Previous step" size="sm" icon={<ChevronLeft />} disabled={atStart} onClick={onBack} />
+                <span className={startGateStepClasses}>{step} of 4</span>
+                <IconButton aria-label="Next step" size="sm" icon={<ChevronRight />} disabled={hideContinue || continueDisabled} onClick={onNext} />
+              </>
+            ) : null}
+            <IconButton aria-label="Close starter" size="sm" icon={<X />} onClick={onCancel} />
+          </>
+        }
+      />
+      <Card.Body>
+        <div className={cardLayoutBodyOccupantWellClasses + " " + cardLayoutBodyOccupantInsetXClasses + " " + startGateOccupantClasses}>
+          {phase.kind === "done" ? <IntakeConfirmation variant={phase.variant} onDone={onDone} /> : null}
+          {phase.kind === "step" && phase.step === 1 ? (
+            <div className={startGateOptionsClasses} role="group" aria-label={copy.subtitle}>
+              {startOptions.map((option) => (
+                <div key={option.value} className={startGateOptionClasses}>
+                  <Checkbox
+                    className="min-w-0 flex-1"
+                    size="md"
+                    label={option.label}
+                    description={option.description}
+                    checked={needs.includes(option.value)}
+                    onChange={(event) => toggleNeed(option.value, event.target.checked)}
+                  />
+                  <Kbd className={startGateOptionNumberClasses} aria-label={"Press " + option.number}>
+                    {option.number}
+                  </Kbd>
+                </div>
+              ))}
+            </div>
+          ) : null}
+          {phase.kind === "step" && phase.step === 2 ? (
+            <PillGroup aria-label="Budget" value={budget} onValueChange={onBudgetChange}>
+              {startBudgets.map((option) => (
+                <PillGroup.Item key={option.value} value={option.value} emphasis={option.emphasis}>
+                  {option.label}
+                </PillGroup.Item>
+              ))}
+            </PillGroup>
+          ) : null}
+          {phase.kind === "step" && phase.step === 3 ? (
+            <IntakeForm values={about} onChange={onAboutChange} />
+          ) : null}
+          {phase.kind === "step" && phase.step === 4 ? (
+            <CalEmbed skip={false}>
+              <Button role="primary" type="button" onClick={onBooked}>Confirm this time</Button>
+            </CalEmbed>
+          ) : null}
+        </div>
+      </Card.Body>
+      {hideFooter ? null : (
+        <Card.Footer>
+          {phase.kind === "step" && phase.step === 4 ? (
+            <CalEmbed.Skip onSkip={onEmailed} />
+          ) : null}
+          <div className="ml-auto flex items-center gap-2">
+            <Button role="secondary" size="md" type="button" onClick={onCancel}>Cancel</Button>
+            {hideContinue ? null : (
+              <Button role="primary" size="md" type="button" disabled={continueDisabled} onClick={onNext}>Next</Button>
+            )}
+          </div>
+        </Card.Footer>
+      )}
+    </Card>
+  );
+}
+
+/**
+ * `initialPrompt` hands off from the marketing composer: read it from the URL (`/ask?q=…`)
+ * and the page opens on that first exchange instead of the landing headline.
+ */
+export function AskWhatMatters({ initialPrompt }: { initialPrompt?: string } = {}) {
+  const reduce = useReducedMotion() === true;
+  const travel = motionTransitionProp("medium");
+  const fieldRef = useRef<HTMLTextAreaElement>(null);
+  const headlineRef = useRef<HTMLHeadingElement>(null);
+  const stageRef = useRef<HTMLElement>(null);
+  const threadRef = useRef<HTMLDivElement>(null);
+  const composerRef = useRef<HTMLDivElement>(null);
+  const stickToEnd = useRef(true);
+  const [startGateOpen, setStartGateOpen] = useState(false);
+  const [startPhase, setStartPhase] = useState<IntakePhase>({ kind: "step", step: 1 });
+  const [startNeeds, setStartNeeds] = useState<string[]>([]);
+  const [startBudget, setStartBudget] = useState<string | null>(null);
+  const [startAbout, setStartAbout] = useState<IntakeAboutValues>(intakeAboutEmpty);
+  const suppressScroll = useRef(false);
+  const nextId = useRef(1);
+  const [draft, setDraft] = useState("");
+  const [turns, setTurns] = useState<Turn[]>(() => {
+    const first = initialPrompt?.trim();
+    return first ? [{ id: 0, kind: "prompt", prompt: first }] : [];
+  });
+  const [headlineExit, setHeadlineExit] = useState<Point | null>(null);
+  const [composerSpace, setComposerSpace] = useState(0);
+  const chatting = turns.length > 0;
+
+  const scrollStageToEnd = useCallback(() => {
+    const stage = stageRef.current;
+    if (stage == null || !stickToEnd.current) return;
+    const before = stage.scrollTop;
+    suppressScroll.current = true;
+    stage.scrollTop = stage.scrollHeight;
+    if (stage.scrollTop === before) suppressScroll.current = false;
+  }, []);
+
+  useLayoutEffect(() => {
+    const composer = composerRef.current;
+    if (composer == null) return;
+    const apply = () => {
+      const stage = stageRef.current;
+      const height = composer.offsetHeight;
+      const composerBottom = composer.getBoundingClientRect().bottom;
+      const bottoms = [stage, stage?.parentElement]
+        .filter((node) => node instanceof HTMLElement)
+        .map((node) => node.getBoundingClientRect().bottom);
+      if (typeof window !== "undefined") bottoms.push(window.innerHeight);
+      const tail = bottoms.reduce((extra, bottom) => Math.max(extra, bottom - composerBottom), 0);
+      const next = Math.ceil(height + Math.max(0, tail));
+      setComposerSpace((current) => (current === next ? current : next));
+    };
+    apply();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(apply);
+    observer.observe(composer);
+    const stage = stageRef.current;
+    if (stage != null) observer.observe(stage);
+    if (stage?.parentElement != null) observer.observe(stage.parentElement);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (stage == null) return;
+    const onScroll = () => {
+      if (suppressScroll.current) {
+        suppressScroll.current = false;
+        return;
+      }
+      const distance = stage.scrollHeight - stage.clientHeight - stage.scrollTop;
+      stickToEnd.current = distance <= 4;
+    };
+    stage.addEventListener("scroll", onScroll, { passive: true });
+    return () => stage.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useEffect(() => {
+    const thread = threadRef.current;
+    if (thread == null || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      scrollStageToEnd();
+    });
+    observer.observe(thread);
+    return () => observer.disconnect();
+  }, [chatting, scrollStageToEnd]);
+
+  useLayoutEffect(() => {
+    scrollStageToEnd();
+  }, [turns.length, composerSpace, scrollStageToEnd]);
+
+  function closeStartGate() {
+    setStartGateOpen(false);
+    setStartPhase({ kind: "step", step: 1 });
+    setStartNeeds([]);
+    setStartBudget(null);
+    setStartAbout(intakeAboutEmpty);
+  }
+
+  function openStartGate() {
+    setStartPhase({ kind: "step", step: 1 });
+    setStartNeeds([]);
+    setStartBudget(null);
+    setStartAbout(intakeAboutEmpty);
+    setStartGateOpen(true);
+  }
+
+  function goHome() {
+    setTurns([]);
+    setDraft("");
+    setHeadlineExit(null);
+    closeStartGate();
+  }
+
+  function onBrandClick(event: MouseEvent<HTMLDivElement>) {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const home = target.closest("a[aria-label='WhatMatters']");
+    if (home == null) return;
+    event.preventDefault();
+    goHome();
+  }
+
+  function send(value: string) {
+    const text = value.trim();
+    if (text.length === 0) return;
+    stickToEnd.current = true;
+    const fromLanding = turns.length === 0;
+    const title = headlineRef.current?.getBoundingClientRect();
+    const id = nextId.current;
+    nextId.current += 1;
+    setDraft("");
+    setTurns((current) => [...current, { id, kind: "prompt", prompt: text }]);
+    if (reduce || !fromLanding || title == null) {
+      setHeadlineExit(null);
+      return;
+    }
+    setHeadlineExit({ top: title.top, left: title.left });
+  }
+
+  function finishStartGate() {
+    const outcome = startPhase.kind === "done" ? startPhase.variant : "emailed";
+    const pairs = intakeQaPairs(startNeeds, startBudget, startAbout, outcome);
+    stickToEnd.current = true;
+    const id = nextId.current;
+    nextId.current += 1;
+    setTurns((current) => [...current, { id, kind: "intake", pairs }]);
+    closeStartGate();
+  }
+
+  return (
+    <ConfettiProvider>
+      <div className={pageClasses}>
+        {chatting ? (
+          <div onClick={onBrandClick}>
+            <SiteNav
+              start={<SiteNav.Brand href="/" aria-label="WhatMatters" icon={<Sparkles />} />}
+              middle={
+                <SiteNav.Links>
+                  <SiteNav.Link href="/product" current>Product</SiteNav.Link>
+                  <SiteNav.Link href="/pricing">Pricing</SiteNav.Link>
+                  <SiteNav.Link href="/customers">Customers</SiteNav.Link>
+                </SiteNav.Links>
+              }
+              end={
+                <>
+                  <Button role="ghost" size="sm" render={<a href="/signin" />} className="whitespace-nowrap">Sign in</Button>
+                  <Button role="primary" size="sm" type="button" className="whitespace-nowrap" onClick={openStartGate}>Start Project</Button>
+                </>
+              }
+              mobile={
+                <>
+                  <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+                  <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+                  <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+                </>
+              }
+            />
+          </div>
+        ) : null}
+        <div className={columnClasses}>
+          <main ref={stageRef} className={chatting ? stageClasses : stageClasses + " " + landingClasses}>
+            {chatting ? (
+              <div ref={threadRef} className={threadClasses} style={{ paddingBottom: composerSpace }}>
+                {turns.map((turn, index) =>
+                  turn.kind === "intake" ? (
+                    <IntakeExchange
+                      key={turn.id}
+                      pairs={turn.pairs}
+                      latest={index === turns.length - 1}
+                      reduce={reduce}
+                      onFollowUp={send}
+                      onReplyGrown={scrollStageToEnd}
+                    />
+                  ) : (
+                    <Exchange
+                      key={turn.id}
+                      prompt={turn.prompt}
+                      arrived={turn.id === 0}
+                      latest={index === turns.length - 1}
+                      reduce={reduce}
+                      onFollowUp={send}
+                      onReplyGrown={scrollStageToEnd}
+                    />
+                  ),
+                )}
+              </div>
+            ) : (
+              <h1 ref={headlineRef} className={headlineClasses}>{headline}</h1>
+            )}
+          </main>
+          <div className={barClasses}>
+            <div ref={composerRef} className={composerClasses}>
+              {startGateOpen ? (
+                <StartGate
+                  phase={startPhase}
+                  needs={startNeeds}
+                  onNeedsChange={setStartNeeds}
+                  budget={startBudget}
+                  onBudgetChange={setStartBudget}
+                  about={startAbout}
+                  onAboutChange={setStartAbout}
+                  onCancel={closeStartGate}
+                  onBack={() => {
+                    if (startPhase.kind !== "step" || startPhase.step <= 1) return;
+                    setStartPhase({ kind: "step", step: (startPhase.step - 1) as IntakeStep });
+                  }}
+                  onNext={() => {
+                    if (startPhase.kind !== "step") return;
+                    if (!canContinueStart(startPhase.step, startNeeds, startBudget, startAbout)) return;
+                    if (startPhase.step >= 4) return;
+                    setStartPhase({ kind: "step", step: (startPhase.step + 1) as IntakeStep });
+                  }}
+                  onBooked={() => setStartPhase({ kind: "done", variant: "booked" })}
+                  onEmailed={() => setStartPhase({ kind: "done", variant: "emailed" })}
+                  onDone={finishStartGate}
+                />
+              ) : (
+                <PromptBar ref={fieldRef} value={draft} onValueChange={setDraft} onSend={send} />
+              )}
+            </div>
+          </div>
+        </div>
+        {headlineExit != null ? (
+          <motion.p
+            aria-hidden
+            className={headlineClasses + " pointer-events-none fixed z-10 m-0"}
+            style={{ top: headlineExit.top, left: headlineExit.left }}
+            initial={{ opacity: 1, y: 0 }}
+            animate={{ opacity: 0, y: -12 }}
+            transition={travel}
+            onAnimationComplete={() => setHeadlineExit(null)}
+          >
+            {headline}
+          </motion.p>
+        ) : null}
+      </div>
+    </ConfettiProvider>
+  );
+}
+
+function ReplyWord({
+  part,
+  index,
+  reduce,
+  delay,
+  settle,
+  onDone,
+}: {
+  part: ReplyPart;
+  index: number;
+  reduce: boolean;
+  delay: number;
+  settle: Transition;
+  onDone?: () => void;
+}) {
+  return (
+    <motion.span
+      className="inline"
+      {...motionBlurReveal(reduce)}
+      transition={reduce ? { duration: 0 } : { ...settle, delay }}
+      onAnimationComplete={onDone}
+    >
+      {index > 0 ? " " : null}
+      {part.kind === "source" ? <TextLink href={part.href}>{part.text}</TextLink> : part.text}
+    </motion.span>
+  );
+}