@thewhatmatters/wmds 0.2.0 → 0.4.0

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

@@ -1,899 +0,0 @@
-// @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>
-  );
-}