@thewhatmatters/wmds 0.4.2 → 0.4.4

package/docs/component-contracts.md

@@ -34,9 +34,11 @@ The site assistant. At rest, a **PromptBar** pinned to the bottom of the page gr
 
 **Reply row.** Under each finished reply, a row of up to three parts, each shown on its own: **Copy** when the message has `copyText` (it writes that text to the clipboard, swaps its icon to a check and its name to `labels.copied` for two seconds, and announces it in a status region); thumbs up and down when `onMessageFeedback` is passed and the message carries `feedback` (**IconButton** `pressed` toggles named `labels.helpful` / `labels.notHelpful`, one vote at a time; `feedback` is `"up" | "down" | null` — `null` until the visitor votes — and pressing the active thumb calls `onMessageFeedback(message, null)`; leave `feedback` out on replies that take no vote, such as a form's summary); and the score when the message has `meta` (`label` as muted caption text, not a control; `description` follows it for screen readers). Visitor turns and the greeting never have a row. Where the pointer can hover, the row shows while the reply is hovered or holds focus (fast tier); on touch screens it is always shown. Either way it keeps its height, so the thread never moves. While `thinking` is on, the latest reply is still arriving: its row keeps its place but shows nothing. Buttons are **IconButton** `md` (44px) below `md` and `sm` (36px) from `md`, pulled out so the first glyph lines up with the reply text. **Pattern — chat dock** holds the votes: `ask` resolves with `string | { reply, followUps?, meta?, copyText?, startProject? }` (`copyText` defaults to the reply; replies start with `feedback: null`), and each vote goes to its required `onFeedback` prop. It also holds Start a project: `startProject` / `onStartProjectChange` (a site button sets it; the Start a project suggestion and an `ask` result with `startProject` open it) and `renderStartProject`, which returns the gate.
 
-**Gate.** `gate` puts a multi-step form in the composer's place — **ChatDock.Gate** (`ChatDockGate`), for Start a project. While it is set and the window is open, the composer, the suggestion rows, the follow-ups, and the disclaimer step aside; the conversation stays above it. Setting it opens the window (closed, or mid-conversation) and moves focus to the gate; clearing it brings the composer back and returns focus to it. The composer and the gate share one cell and crossfade (fast tier) while the area eases between their heights (medium tier); both stay mounted, so a gate keeps its progress when the visitor closes the window with it up, and it is there when the window reopens. The gate hugs each step up to a cap — the window less its header, 7rem of conversation, and the space under the gate, never below 12rem — so the last lines of the latest reply stay in view; past the cap its body scrolls. Escape belongs to the gate: **ChatDock.Gate** calls `onClose` on it, and ChatDock does not fold the window on Escape while a gate is up (a second Escape, at the composer, does). **ChatDock.Gate** is a **Card** (`as="section"`, `padding="none"`, `variant="surface"`): `title` (names the gate) and `subtitle`; at the end of the header **IconButton** previous (disabled on step 1), the progress (`labels.progress`, "2 of 4", announced politely), next (disabled without `onNext` or while `canContinue` is false), and close; the step in **Card.Body** on the inset well, sliding between steps (fast tier) while the body eases to the new height (medium tier); **Card.Footer** with `footerStart` (for example **CalEmbed.Skip**), Cancel, and the primary action (`continueLabel`, shown when `onNext` is passed). Controls are 44px below `md` and 36px from `md`. Number keys belong to the pattern through **useKbdChoiceKeys** with `scope` set to the gate, so digits act only while focus is in it. **Pattern — start a project gate** fills four steps — services as numbered **Checkbox** rows, budget as numbered **Radio** rows, **IntakeForm**, **CalEmbed** — and on booking or skipping calls `onSubmit`, fires confetti from the control used, and hands the conversation the answers (**ChatQa**) and a confirmation line.
+**Gate.** `gate` puts a multi-step form in the conversation — **ChatDock.Gate** (`ChatDockGate`), for Start a project. While it is set it is the last item in the conversation, under the latest message (or the thinking row), where a reply would go; it enters like a new turn and leaves at once. The window keeps its header and its one close; its subtitle becomes `gateSubtitle` (hidden when that is not passed). The composer stays in place but is off (`disabled`, placeholder `labels.gatePlaceholder`, "Finish or cancel the form to keep chatting"); the suggestion rows, the follow-ups, and the reply rows (Copy, thumbs, score) step aside; the disclaimer stays. The window stays non-modal: no scrim, and the page behind stays usable. From `md` the fixed window grows to fit the conversation and the gate — never below its usual height, never past the viewport less 7rem — and eases back when the gate goes; past that the conversation scrolls (the gate never scrolls on its own). On setting it, on opening the window onto it, and on each step, the conversation brings the gate into view: the whole form, with the conversation above it, when it fits; otherwise the top of the form. Setting it opens the window (closed, or mid-conversation) and moves focus to the gate; clearing it brings the composer back on, with focus, and the answers and confirmation the pattern adds take the gate's place at the end of the conversation. The gate stays mounted while the window is closed, so it keeps its progress and is there at the same step when the window reopens. The window's close and Escape fold the window; the gate's Cancel (`onClose`) leaves it. **ChatDock.Gate** is flat on the window surface, set off from the message above by a hairline: the step's `title` (an `h3` that names the gate) and `subtitle` with **IconButton** previous (disabled on step 1), the progress (`labels.progress`, "2 of 4", announced politely), and next (disabled without `onNext`, while `canContinue` is false, and on the last step) — no close; the step, sliding between steps (fast tier); a hairline; a status line with `labels.pending` ("Sending…") while `pending`, or an `error` line (`role="alert"`, `text-error`); and a footer with `footerStart` (for example **CalEmbed.Skip**), Cancel, and the primary action (`continueLabel`, shown when `onNext` is passed — on the last step an action such as "Send" or "Try again"). `pending` disables previous, next, Cancel, and the primary action and sets `aria-busy`. The gate's own changes are not announced as conversation turns (`aria-live="off"` on its place). Controls are 44px below `md` and 36px from `md`. On its own, outside **ChatDock**, Escape calls `onClose`. Number keys belong to the pattern through **useKbdChoiceKeys** with `scope` set to the gate, so digits act only while focus is in it. **Pattern — start a project gate** fills four steps — services as numbered **Checkbox** rows, budget as numbered **Radio** rows, **IntakeForm**, **CalEmbed** — and on booking or skipping awaits `onSubmit` (a promise) with `pending` on: when it resolves it fires confetti from the control used and hands the conversation the answers (**ChatQa**) and a confirmation line; when it rejects it keeps every answer, shows the error, and offers Try again.
 
-**Phones.** Below `md` the window fills the part of the screen a keyboard leaves visible (`visualViewport`), and the composer and a gate sit at its bottom edge.
+**Phones.** Below `md` the window fills the part of the screen a keyboard leaves visible (`visualViewport`), and the composer sits at its bottom edge. A gate keeps the conversation above it — it does not collapse to the latest message; the conversation scrolls, and each step is brought into view.
+
+**Hydration.** The server and the hydration render read reduced motion as off, so the closed window's inline style matches the server's; it switches right after, while the window is hidden.
 
 The app owns `messages`, `thinking`, `followUps`, the votes, the gate's open state, `onSend`, and `onSuggestionSelect`; ChatDock never fetches or parses Markdown (`content` is text or rendered Markdown). `placement="inline"` is for previews only. Copy **Components/ChatDock → Pattern — chat dock**. See **ADR-0039**.
 

package/docs/components.md

@@ -1,6 +1,6 @@
 # @thewhatmatters/wmds — component contracts
 
-Version 0.4.2. Generated from the WMDS repository's AGENTS.md (Storybook-first) by `scripts/generate-package-docs.mjs` — do not edit here.
+Version 0.4.4. Generated from the WMDS repository's AGENTS.md (Storybook-first) by `scripts/generate-package-docs.mjs` — do not edit here.
 
 Storybook paths such as **Components/Button/Button → Pattern — …** name a story; its Show code is in `patterns/` (see `patterns/index.json`). Longer contracts for FooterReveal, HeroTileStack, TextSequence, ScrollHorizontal, RiveHand, and PromptBar are in `component-contracts.md`. ADR numbers refer to decision records in the WMDS repository.
 
@@ -38,12 +38,12 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
 - **Accordion:** generic expand/collapse — **leading**, **label**, **trailing**, built-in chevron, `motion-collapse` panel. Variants: `list`, `capsule`, `plain`; **`flush`** (plain only) drops the inset so labels line up with surrounding text — filter side panels. A closed panel turns `visibility: hidden` once it folds, so Tab skips its controls. **TaskRows** is the task-status pattern on top.
 - **DescriptionList:** a list of facts — `dl` > **DescriptionList.Item** (`div` > `dt` `name` + `dd` value). `layout` `inline` (value beside the name, 2 : 3 tracks, default) or `stacked` (value under it — tags, actions), per list or per item. `rule` `solid` (default) / `dotted` (quieter — beside caption rules) / `none`. `variant` `sans` (caption name, body value) or `mono` (eyebrow name, mono caps value, tabular figures — post metadata). Values take text, `<time>`, **Badge** tags, or **Button** actions; several wrap in a row. Not form fields (**Field**), metrics (**Stat**), or status rows (**TaskRows**). Paste **Components/DescriptionList → Pattern — post metadata** or **Pattern — details**. See **ADR-0041**.
 - **SectionCaption:** the small uppercase mono caption over a page column ("/ Metadata", "/ Article", "/ Filters") — `type-eyebrow` on a `border-border-emphasized` rule; the "/" `marker` is `aria-hidden`. `as` `h2` (default — pair `id` with the region's `aria-labelledby`) or `p` (labels a column that has its own heading); `end` holds a **Button** `size="xs"` (Clear all) without growing the row; `rule` / `marker` can be turned off. Write `children` in sentence case. Copy **Components/SectionCaption → Pattern — column caption**. See **ADR-0041**.
-- **Prose:** long-form content set from plain HTML elements (rendered markdown) — headings, paragraphs, lists, quotes, inline code, code blocks, rules, images, figures, and tables, with the spacing between them. `size` `lg` (default — `type-reading`, headings a step up) or `md` (`type-body`, denser notes); `measure` `reading` (40rem, default) or `none`; `as` `div` / `article` / `section`. Wide tables scroll in their own box. Map markdown `#` to `h2` under a page `h1`, and links to **TextLink** (`external` for other sites). Never add classes to the elements inside. Paste **Components/Prose → Pattern — article body**; the full page is **Guides/Post page → Pattern — post page**. See **ADR-0041**.
-- **IndexList:** editorial index for list pages (blog, case studies) — **IndexList.Item** rows with `meta` (a `<time>`), a linked `title` (`href`; a quiet **TextLink** in an `h2` by default — `titleAs`), and an optional `preview` an **IconButton** disclosure expands under the title. Optional `captions={{ meta, title }}` in sentence case (`type-eyebrow`, the "/" marker and the **SectionCaption** rule, `aria-hidden`) share the rows' tracks. Two tracks (7.5rem meta, title) once the list is 32rem wide (container query); one column below, captions hidden. `size` `lg` (type-display-3, default) / `md` / `sm`. `empty` replaces the rows when there are none. `className` is layout only. Not tabular data — **Table** is planned. Paste **Components/IndexList → Pattern — post index**; with filters, **Guides/Filter panel → Pattern — filtered index**. See **ADR-0040**.
+- **Prose:** long-form content set from plain HTML elements (rendered markdown) — headings, paragraphs, lists, quotes, inline code, code blocks, rules, images, figures, and tables, with the spacing between them. `size` `lg` (default — `type-reading`, headings a step up) or `md` (`type-body`, denser notes); `measure` `reading` (40rem, default) or `none`; `as` `div` / `article` / `section`. Wide tables scroll in their own box. Map markdown `#` to `h2` under a page `h1`, and links to **TextLink** (`external` for other sites). Never add classes to the elements inside. Paste **Components/Prose → Pattern — article body**; the full page is **Guides/Post page → Pattern — post page** (`metadataSide` `start` / `end` and `metadataColumns` 4 / 3 place the panel — never edit its classes). See **ADR-0041**.
+- **IndexList:** editorial index for list pages (blog, case studies) — **IndexList.Item** rows with `meta` (a `<time>`), a linked `title` (`href`; a quiet **TextLink** in an `h2` by default — `titleAs`), and an optional `preview` an **IconButton** disclosure expands under the title. Optional `captions={{ meta, title }}` in sentence case (`type-eyebrow`, the "/" marker and the **SectionCaption** rule, `aria-hidden`) share the rows' tracks. Two tracks (7.5rem meta, title) once the list is 32rem wide (container query); one column below, captions hidden. `size` `lg` (type-display-3, default) / `md` / `sm`. `empty` replaces the rows when there are none. `className` is layout only. Not tabular data — **Table** is planned. Paste **Components/IndexList → Pattern — post index**; with filters, **Guides/Filter panel → Pattern — filtered index** (a post's `facets` take one option or several per group; `defaultSelection` opens the page filtered, `selection` + `onSelectionChange` hold it in the URL). See **ADR-0040**.
 - **Card:** `Card.Header`, `Card.Body`, `Card.Footer`. Layout cards (`padding="none"`): header/footer on the shell; **`Card.Header`** is two horizontal slots (`start` | `end`) at **16px** (`px-4`). **`end` is always trailing** (`ml-auto`) — overflow / **MoreMenu** stays on the right even when `start` is omitted. **`Card.Body` is a square composition slot** with a **2px** horizontal gutter — no inner pad, no radius, **no default fill**. The **occupant** dictates how the body region looks; use **`cardLayoutBodyOccupantInsetXClasses`** (`px-3.5` / 14px) + **`cardLayoutBodyOccupantPadYClasses`** (`py-[16px]` / literal 16px vertical) when body content should align with header/footer (2px + 14px = 16px horizontal). Shape config lives in **`src/theme/shape.css`**: shell **`--radius-card-shell: 16px`**, body occupant **`--radius-card-body: 14px`**. Radius-only media → **`cardLayoutBodyOccupantRadiusClasses`**; inset gray/chart wells → **`cardLayoutBodyOccupantWellClasses`** or **`cardLayoutBodyOccupantDotGridWellClasses`**. A headerless layout **Card.Body** densifies the shell top to 2px (`pt-[2px]`) — same density as footerless / `bodyTerminal` bottom; **`headerless`** is only an override for wrapped slot composition. A direct terminal **`Card.Body`** automatically fills stretched cards and gets the 2px bottom shell inset; **`bodyTerminal`** is only an override for wrapped slot composition. Pin a layout height on the root (`className`) with Header + Body + Footer — Header/Footer stay put; **Card.Body** scrolls (2px gutter unchanged; no new variant). See **Components/Card/Card → Pattern — pinned height**. `variant="surface"` is elevated; **`variant="outlined"`** uses **`shadow-soft-card`** with no stroke (same elevation as layout `surface`). Radius stays **`--radius-card-shell`**. Default **`shape="rounded"`**. **`shape="flush"`** only when a parent owns outer chrome. Simple cards: `padding="md"`.
 - **Input:** pill-only. Optional leading `icon`; trailing `endBadge` or status / `loading`. Hero search with inset button → **Search** molecule. See **ADR-0006**.
 - **PromptBar:** wide prompt pill — inline **TextArea** (one line when empty, grows through 3 lines, then scrolls) and an inset **IconButton** `sm` send control. Enter sends; Shift+Enter inserts a newline; send stays disabled until the draft has text. Optional `start` (brand mark — **Avatar** `size="md"`) and `end` (extra inset **IconButton** `sm`) slots. No new Button role. Copy **Components/PromptBar → Pattern — prompt bar**. The site assistant on the marketing pages is **ChatDock**, not a hand-pinned PromptBar. Do not restyle **SiteNav**. Full contract: **docs/component-contracts.md → PromptBar**.
-- **ChatDock:** the site assistant — a **PromptBar** pinned to the bottom of the page grid (`--grid-max: 40rem`, under **SiteNav**) with the brand `mark`; hovering shows `suggestions` that carry a `prompt` as **Button** `secondary` pills above it; focusing, clicking, or typing opens a non-modal chat window around the same composer (shared overlay header with `title` / `subtitle` / close, `greeting`, `messages` (visitor turns on `bg-brand-tint`, replies as plain text), `thinking` row, suggestion rows — **Button** `layout="row"` — until the first message (a row that sends hands focus to the composer as the rows leave), `disclaimer` under the composer). One **PromptBar** serves both states: the window grows up out of the bar and Escape or close folds it back; either reverses the other midway. Below `md` it fills the screen, rising from the bottom edge. Reduced motion crossfades. `followUps` (same items as `suggestions`; `icon` not shown — inline rows lead with **CornerDownRight**, composer pills are text only) show under the latest reply only — hidden while `thinking`, gone the moment the visitor sends; `followUpsPlacement` is `inline` (default, rows in the thread, 44px on phones) or `composer` (pills above the composer). Under each finished reply, a row: **Copy** (`copyText`), thumbs (`onMessageFeedback`, on replies that carry `feedback` — `null` until the visitor votes; **IconButton** `pressed`), and a muted score (`meta: { label, description? }`, e.g. "Match 99%") — each part on its own; shown on hover or focus where the pointer can hover, always on touch; it keeps its place so the thread never moves, and stays empty while the latest reply is still arriving. Never put actions inside `content`. `gate` puts a multi-step form — **ChatDock.Gate** (header with previous · "2 of 4" · next · close, scrolling step body, footer with Cancel · Next) — in the composer's place, conversation above: setting it opens the window and takes focus; composer, suggestion rows, follow-ups, and disclaimer step aside; capped so the latest reply stays in view; Escape is the gate's; the window's close keeps it and its progress. Phones keep the window inside the area a keyboard leaves visible. Start a project runs as a gate, not a dialog — paste **Pattern — start a project gate** and return it from **Pattern — chat dock**'s `renderStartProject`. Never put a form inside `content`. The app owns `messages`, `followUps`, votes, the gate's open state, and `onSend`; suggestions without a `prompt` (for example **Start a project**) only call `onSuggestionSelect`. No full-page chat, no header send/expand arrow, no voice. `placement="inline"` is for previews only. Copy **Components/ChatDock → Pattern — chat dock** (it holds the follow-up state, the votes, and Start a project). See **ADR-0039**. Full contract: **docs/component-contracts.md → ChatDock**.
+- **ChatDock:** the site assistant — a **PromptBar** pinned to the bottom of the page grid (`--grid-max: 40rem`, under **SiteNav**) with the brand `mark`; hovering shows `suggestions` that carry a `prompt` as **Button** `secondary` pills above it; focusing, clicking, or typing opens a non-modal chat window around the same composer (shared overlay header with `title` / `subtitle` / close, `greeting`, `messages` (visitor turns on `bg-brand-tint`, replies as plain text), `thinking` row, suggestion rows — **Button** `layout="row"` — until the first message (a row that sends hands focus to the composer as the rows leave), `disclaimer` under the composer). One **PromptBar** serves both states: the window grows up out of the bar and Escape or close folds it back; either reverses the other midway. Below `md` it fills the screen, rising from the bottom edge. Reduced motion crossfades. `followUps` (same items as `suggestions`; `icon` not shown — inline rows lead with **CornerDownRight**, composer pills are text only) show under the latest reply only — hidden while `thinking`, gone the moment the visitor sends; `followUpsPlacement` is `inline` (default, rows in the thread, 44px on phones) or `composer` (pills above the composer). Under each finished reply, a row: **Copy** (`copyText`), thumbs (`onMessageFeedback`, on replies that carry `feedback` — `null` until the visitor votes; **IconButton** `pressed`), and a muted score (`meta: { label, description? }`, e.g. "Match 99%") — each part on its own; shown on hover or focus where the pointer can hover, always on touch; it keeps its place so the thread never moves, and stays empty while the latest reply is still arriving. Never put actions inside `content`. `gate` puts a multi-step form in the conversation — **ChatDock.Gate**, under the latest message where a reply would go, flat under a hairline: step title, subtitle, previous · "2 of 4" · next (no close of its own), the step, `pending` ("Sending…") / `error` lines, and a footer (start slot, Cancel, Next). Setting it opens the window and takes focus; the window keeps its header (`gateSubtitle` replaces the subtitle) and its close; the composer stays in place but is off (`labels.gatePlaceholder`); suggestion rows, follow-ups, and reply rows step aside. The window grows to fit the step, up to the viewport less 7rem; past that the conversation scrolls, and each step is brought into view. The window stays non-modal. Its close and Escape fold it and keep the gate with its progress; Cancel leaves the gate and the composer comes back with focus. Phones keep the window inside the area a keyboard leaves visible. Start a project runs as a gate, not a dialog — paste **Pattern — start a project gate** (its `onSubmit` returns a promise; a rejection keeps the answers and offers Try again) and return it from **Pattern — chat dock**'s `renderStartProject`. Never put a form inside `content`. The app owns `messages`, `followUps`, votes, the gate's open state, and `onSend`; suggestions without a `prompt` (for example **Start a project**) only call `onSuggestionSelect`. No full-page chat, no header send/expand arrow, no voice. `placement="inline"` is for previews only. Copy **Components/ChatDock → Pattern — chat dock** (it holds the follow-up state, the votes, and Start a project). See **ADR-0039**. Full contract: **docs/component-contracts.md → ChatDock**.
 - **TextArea:** element-radius multiline — same optional `label`, `description`, `status`, `message`, and `loading` as **Input**; default `resize="vertical"`. See **ADR-0006**.
 - **Field:** label/layout wrapper — `orientation="vertical" | "horizontal"`; never required. Validation stays on **Input** / **TextArea**. See **ADR-0006**.
 - **Checkbox:** boolean toggle — label row + optional `description`, `indeterminate`, `status` / `message`, and `loading`. **`count`** puts a muted number at the row's end (filter results, styled like **NavList** counts); screen readers hear it after the label in parentheses — "Guides (2)", or "Guides (2 posts)" with `countLabel`. Never write the count into `label`. See **ADR-0006**.
@@ -54,7 +54,7 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
 - **Select:** pill trigger matched to **Input** shell + floating listbox (**Dropdown.Menu** / **Dropdown.Item**). **`size="sm"`** in Card headers beside **Chip sm**. Options support **`start`** / **`end`** slots for icons and shortcuts. See **Components/Select**, **Components/Dropdown**.
 - **Dropdown:** shared menu panel (`p-0.5` inset) + three-slot rows (`start` | label | `end`) — composed by **Select**; action menus via **MoreMenu**. **Dropdown.Item** `render={<a href />}` makes a row a link (a menu of links — **Breadcrumb**'s collapsed path).
 - **MoreMenu:** kebab **IconButton** + floating **Dropdown** action menu — **Card.Header** `end` (right) only; never left-align overflow. Menu right-aligns to trigger; expanded trigger retains the ghost hover surface; **`items`** + **`onAction`**. Sizes **`xs` | `sm` | `md` | `lg`** (**IconButton** scale). Not for single-select — **Select** / **SegmentedControl**.
-- **Toast:** temporary notification organism — mount one **`Toaster`** at the app root and call **`toast.add()`** / `update()` / `dismiss()`. Six `position` values (top/bottom × left/center/right), default five-item layered deck (newest interactive in front, older surfaces offset behind), semantic tones, optional action (**Button**) and dismiss (**IconButton**). Errors announce as `alert`; other tones as `status`. `duration: null` persists. Blocking decisions use **AlertDialog**. See **ADR-0025**.
+- **Toast:** temporary notification organism — mount one **`Toaster`** at the app root (it renders nothing on the server and mounts its list after hydration, so a layout can hold it) and call **`toast.add()`** / `update()` / `dismiss()`. Six `position` values (top/bottom × left/center/right), default five-item layered deck (newest interactive in front, older surfaces offset behind), semantic tones, optional action (**Button**) and dismiss (**IconButton**). Errors announce as `alert`; other tones as `status`. `duration: null` persists. Blocking decisions use **AlertDialog**. See **ADR-0025**.
 - **Confetti:** celebratory burst — mount one **`ConfettiProvider`**. After an async success, render the confirmation surface and call **`useConfettiOnMount(options?)`** there (once per mount; a ref skips StrictMode and re-renders). **`useConfetti().fire(options?)`** is the same burst when the moment is not a mount. `origin` is an element, a ref (center of the box), or a viewport `{ x, y }` point; default is the viewport center. Confirmation pages pass the top-center of the viewport and a wide `spread`. Overlapping bursts are kept. Removed `duration + 0.5s` after start. Reduced motion: `fire()` does nothing. Colors default to chart categorical 1–7 (`confettiDefaultColors`). There is no trigger component. **IntakeConfirmation** is the reference composition. See **ADR-0031**.
 - **Dialog:** modal overlay — portal scrim, focus trap, scroll lock, **medium** enter/exit; composes **Card** shell + **IconButton** close. **`Dialog.Content`** — `title`, `description`, `footer`, `size` (`sm` | `md` | `lg`); header/footer pinned, body scrolls; **no section hairlines** — brief/direct copy + `gap-4` section rhythm. **`AlertDialog`** — blocking confirm with cancel + confirm **Button** roles; `confirmRole="destructive"` for irreversible actions; scrim dismiss off by default.
 - **IntakeModal:** full-screen Start a project shell — typographic **WM** + **WhatMatters** wordmark (no separate logo asset), **IconButton** close (Lucide **X**, name **Close**), **StepProgress** (navy segments, pill label **Step N of 4**), pinned **Back** / **Continue** footer. Focus trap, Escape, scroll lock, `aria-modal`. **SelectableCard** is the multi-select grid (2 columns mobile, 3 from `lg`) with a `toggle` slot for hugged **SegmentedControl** and a **Badge** `iconOnly` check. **PillGroup** is the wrapping radio pills; **Not sure yet** uses existing **Badge** neutral `emphasis="muted"` — no new Badge emphasis. **IntakeForm** is **Field** + **Input** / **TextArea** (optional Link URL); required fields show `status` + `message` on blur; company and link stay optional; the details counter is the field description. **CalEmbed** is the calendar frame plus **TextLink** skip; with no embed mounted it shows a visitor-facing empty state (`emptyTitle`, `emptyDescription`), never developer notes. **CalEmbed.Skip** is that same skip; in a **Card** gate put it in **Card.Footer** and pass `skip={false}` so the in-body link is omitted. **IntakeConfirmation** (`booked` | `emailed`) calls **`useConfettiOnMount`** with `intakeConfettiColors` (includes `--color-brand`); optional `bookingTime` / `videoHref` / `googleCalendarHref` / `icsHref` reuse **TextLink** and **Button**. Copy **Components/IntakeModal → Pattern — intake modal** and compose the steps in the app. See **ADR-0038**.

package/docs/exports.json

@@ -1,6 +1,6 @@
 {
   "package": "@thewhatmatters/wmds",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "import": "import { Button } from \"@thewhatmatters/wmds\";",
   "styles": [
     "@thewhatmatters/wmds/styles.css",

package/docs/patterns/components-accordion--flush.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — flush
+// @thewhatmatters/wmds@0.4.4 · Pattern — flush
 // Storybook: Components/Accordion → Pattern — flush (?path=/story/components-accordion--flush)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-avatar--dropdown-row.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — dropdown row
+// @thewhatmatters/wmds@0.4.4 · Pattern — dropdown row
 // Storybook: Components/Avatar → Pattern — dropdown row (?path=/story/components-avatar--dropdown-row)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-badge--outline-tags.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — outline tags
+// @thewhatmatters/wmds@0.4.4 · Pattern — outline tags
 // Storybook: Components/Badge → Pattern — outline tags (?path=/story/components-badge--outline-tags)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-badge--with-avatar.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — with avatar
+// @thewhatmatters/wmds@0.4.4 · Pattern — with avatar
 // Storybook: Components/Badge → Pattern — with avatar (?path=/story/components-badge--with-avatar)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-breadcrumb--editorial.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — editorial
+// @thewhatmatters/wmds@0.4.4 · Pattern — editorial
 // Storybook: Components/Breadcrumb → Pattern — editorial (?path=/story/components-breadcrumb--editorial)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-breadcrumb--long-path.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — long path
+// @thewhatmatters/wmds@0.4.4 · Pattern — long path
 // Storybook: Components/Breadcrumb → Pattern — long path (?path=/story/components-breadcrumb--long-path)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-breadcrumb--path.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — path
+// @thewhatmatters/wmds@0.4.4 · Pattern — path
 // Storybook: Components/Breadcrumb → Pattern — path (?path=/story/components-breadcrumb--path)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-breadcrumb--router-links.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — router links
+// @thewhatmatters/wmds@0.4.4 · Pattern — router links
 // Storybook: Components/Breadcrumb → Pattern — router links (?path=/story/components-breadcrumb--router-links)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--copy-button.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — copy button
+// @thewhatmatters/wmds@0.4.4 · Pattern — copy button
 // Storybook: Components/Button/Button → Pattern — copy button (?path=/story/components-button-button--copy-button)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--destructive-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — destructive action
+// @thewhatmatters/wmds@0.4.4 · Pattern — destructive action
 // Storybook: Components/Button/Button → Pattern — destructive action (?path=/story/components-button-button--destructive-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--external-link.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — external link
+// @thewhatmatters/wmds@0.4.4 · Pattern — external link
 // Storybook: Components/Button/Button → Pattern — external link (?path=/story/components-button-button--external-link)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--ghost-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — ghost action
+// @thewhatmatters/wmds@0.4.4 · Pattern — ghost action
 // Storybook: Components/Button/Button → Pattern — ghost action (?path=/story/components-button-button--ghost-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--inverse-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — inverse action
+// @thewhatmatters/wmds@0.4.4 · Pattern — inverse action
 // Storybook: Components/Button/Button → Pattern — inverse action (?path=/story/components-button-button--inverse-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--link-render.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — link
+// @thewhatmatters/wmds@0.4.4 · Pattern — link
 // Storybook: Components/Button/Button → Pattern — link (?path=/story/components-button-button--link-render)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--multi-state-badge.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — submit / async
+// @thewhatmatters/wmds@0.4.4 · Pattern — submit / async
 // Storybook: Components/Button/Button → Pattern — submit / async (?path=/story/components-button-button--multi-state-badge)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--outline-mono.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — outline mono
+// @thewhatmatters/wmds@0.4.4 · Pattern — outline mono
 // Storybook: Components/Button/Button → Pattern — outline mono (?path=/story/components-button-button--outline-mono)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--primary-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — primary action
+// @thewhatmatters/wmds@0.4.4 · Pattern — primary action
 // Storybook: Components/Button/Button → Pattern — primary action (?path=/story/components-button-button--primary-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--row-hug.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — row (hug)
+// @thewhatmatters/wmds@0.4.4 · Pattern — row (hug)
 // Storybook: Components/Button/Button → Pattern — row (hug) (?path=/story/components-button-button--row-hug)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--row-layout.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — row
+// @thewhatmatters/wmds@0.4.4 · Pattern — row
 // Storybook: Components/Button/Button → Pattern — row (?path=/story/components-button-button--row-layout)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--secondary-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — secondary action
+// @thewhatmatters/wmds@0.4.4 · Pattern — secondary action
 // Storybook: Components/Button/Button → Pattern — secondary action (?path=/story/components-button-button--secondary-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--suggestion-pills.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — suggestion pills
+// @thewhatmatters/wmds@0.4.4 · Pattern — suggestion pills
 // Storybook: Components/Button/Button → Pattern — suggestion pills (?path=/story/components-button-button--suggestion-pills)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--with-count.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — with count
+// @thewhatmatters/wmds@0.4.4 · Pattern — with count
 // Storybook: Components/Button/Button → Pattern — with count (?path=/story/components-button-button--with-count)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--with-icon.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — with icon
+// @thewhatmatters/wmds@0.4.4 · Pattern — with icon
 // Storybook: Components/Button/Button → Pattern — with icon (?path=/story/components-button-button--with-icon)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-floatingactionbutton--vertical-actions.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — vertical actions
+// @thewhatmatters/wmds@0.4.4 · Pattern — vertical actions
 // Storybook: Components/Button/FloatingActionButton → Pattern — vertical actions (?path=/story/components-button-floatingactionbutton--vertical-actions)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-calembed--pattern-skip-in-footer.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — skip in footer
+// @thewhatmatters/wmds@0.4.4 · Pattern — skip in footer
 // Storybook: Components/CalEmbed → Pattern — skip in footer (?path=/story/components-calembed--pattern-skip-in-footer)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--body-slot-occupancy-history.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Example — body slot (occupancy history)
+// @thewhatmatters/wmds@0.4.4 · Example — body slot (occupancy history)
 // Storybook: Components/Card/Card → Example — body slot (occupancy history) (?path=/story/components-card-card--body-slot-occupancy-history)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--headerless-media.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — headerless media
+// @thewhatmatters/wmds@0.4.4 · Pattern — headerless media
 // Storybook: Components/Card/Card → Pattern — headerless media (?path=/story/components-card-card--headerless-media)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--outlined-layout.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — outlined layout
+// @thewhatmatters/wmds@0.4.4 · Pattern — outlined layout
 // Storybook: Components/Card/Card → Pattern — outlined layout (?path=/story/components-card-card--outlined-layout)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--pinned-height.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — pinned height
+// @thewhatmatters/wmds@0.4.4 · Pattern — pinned height
 // Storybook: Components/Card/Card → Pattern — pinned height (?path=/story/components-card-card--pinned-height)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-selectablecard--selectable-cards-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — selectable cards
+// @thewhatmatters/wmds@0.4.4 · Pattern — selectable cards
 // Storybook: Components/Card/SelectableCard → Pattern — selectable cards (?path=/story/components-card-selectablecard--selectable-cards-pattern)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--audience-activity-heatmap.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — matrix heatmap
+// @thewhatmatters/wmds@0.4.4 · Pattern — matrix heatmap
 // Storybook: Components/Chart → Pattern — matrix heatmap (?path=/story/components-chart--audience-activity-heatmap)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--cartesian-no-data-gaps.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — Cartesian no-data gaps
+// @thewhatmatters/wmds@0.4.4 · Pattern — Cartesian no-data gaps
 // Storybook: Components/Chart → Pattern — Cartesian no-data gaps (?path=/story/components-chart--cartesian-no-data-gaps)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--occupancy-history-in-card.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — occupancy history in Card
+// @thewhatmatters/wmds@0.4.4 · Pattern — occupancy history in Card
 // Storybook: Components/Chart → Pattern — occupancy history in Card (?path=/story/components-chart--occupancy-history-in-card)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--occupancy-in-card.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — occupancy KPI in Card
+// @thewhatmatters/wmds@0.4.4 · Pattern — occupancy KPI in Card
 // Storybook: Components/Chart → Pattern — occupancy KPI in Card (?path=/story/components-chart--occupancy-in-card)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--post-reach-distribution.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — distribution strip
+// @thewhatmatters/wmds@0.4.4 · Pattern — distribution strip
 // Storybook: Components/Chart → Pattern — distribution strip (?path=/story/components-chart--post-reach-distribution)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--ranked-audience-breakdown.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — ranked audience breakdown
+// @thewhatmatters/wmds@0.4.4 · Pattern — ranked audience breakdown
 // Storybook: Components/Chart → Pattern — ranked audience breakdown (?path=/story/components-chart--ranked-audience-breakdown)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--unit-grid-composition.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — 100-unit composition
+// @thewhatmatters/wmds@0.4.4 · Pattern — 100-unit composition
 // Storybook: Components/Chart → Pattern — 100-unit composition (?path=/story/components-chart--unit-grid-composition)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chatdock--pattern-chat-dock.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — chat dock
+// @thewhatmatters/wmds@0.4.4 · Pattern — chat dock
 // Storybook: Components/ChatDock → Pattern — chat dock (?path=/story/components-chatdock--pattern-chat-dock)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 
@@ -66,7 +66,7 @@ export interface AskWhatMattersProps {
   /** Start a project is open while this is set: what the assistant already knows, or `{}`. A site button can set it too. */
   startProject: StartProjectRequest | null;
   onStartProjectChange: (request: StartProjectRequest | null) => void;
-  /** The gate — return **Pattern — start a project gate** with the slot spread onto it. */
+  /** The gate — return **Pattern — start a project gate** with the slot spread onto it. It sits in the conversation, under the latest message. */
   renderStartProject: (slot: StartProjectGateSlot) => ReactNode;
 }
 
@@ -129,6 +129,7 @@ export function AskWhatMatters({
     <ChatDock
       title="WhatMatters"
       subtitle="Ask anything"
+      gateSubtitle="Start a project"
       mark={<Avatar name="WhatMatters" size="md" />}
       greeting="Hi, I'm the WhatMatters assistant. Ask about our work, our process, pricing, or how to start a project."
       messages={messages}

package/docs/patterns/components-chatdock--pattern-start-project-gate.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — start a project gate
+// @thewhatmatters/wmds@0.4.4 · Pattern — start a project gate
 // Storybook: Components/ChatDock → Pattern — start a project gate (?path=/story/components-chatdock--pattern-start-project-gate)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 
@@ -54,12 +54,12 @@ export interface StartProjectIntake {
 export interface StartProjectGateProps {
   /** What the assistant already picked up from the conversation, or `{}`. */
   request: { services?: string[]; budget?: string };
-  /** Closes the gate — Cancel, Close, or Escape. */
+  /** Leaves the gate — its Cancel. Closing the window (its close or Escape) keeps the gate, with its progress. */
   close: () => void;
   /** Ends the gate; the conversation shows the answers and the confirmation. */
   complete: (answers: ChatQaPair[], confirmation: string) => void;
-  /** Sends the intake. */
-  onSubmit: (intake: StartProjectIntake) => void;
+  /** Sends the intake. Resolve once it is sent; reject to keep the answers and offer Try again. */
+  onSubmit: (intake: StartProjectIntake) => Promise<void>;
   /** The booking calendar. Call `booked` once the visitor confirms a time. Leave it out to show the empty state. */
   renderCalendar?: (booked: () => void) => ReactNode;
 }
@@ -72,6 +72,9 @@ export function StartProjectGate({ request, close, complete, onSubmit, renderCal
   const [chosen, setChosen] = useState<string[]>(request.services ?? []);
   const [budget, setBudget] = useState<string | null>(request.budget ?? null);
   const [about, setAbout] = useState<IntakeAboutValues>(intakeAboutEmpty);
+  const [sending, setSending] = useState(false);
+  /** How the visitor chose to follow up when the send failed — Try again sends that again. */
+  const [failed, setFailed] = useState<"call" | "email" | null>(null);
 
   function toggleService(value: string) {
     setChosen((current) =>
@@ -94,10 +97,21 @@ export function StartProjectGate({ request, close, complete, onSubmit, renderCal
   const canContinue =
     step === 1 ? chosen.length > 0 : step === 2 ? budget != null : step === 3 ? isIntakeAboutValid(about) : true;
 
-  function finish(followUp: "call" | "email") {
-    onSubmit({ services: chosen, budget, about, followUp });
-    // The burst starts at the control the visitor used — the booking or the skip.
+  async function finish(followUp: "call" | "email") {
+    if (sending) return;
+    // The burst starts at the control the visitor used — the booking, the skip, or Try again.
     const used = document.activeElement;
+    setSending(true);
+    setFailed(null);
+    try {
+      await onSubmit({ services: chosen, budget, about, followUp });
+    } catch {
+      // Every answer stays; the gate shows the error and Try again.
+      setFailed(followUp);
+      return;
+    } finally {
+      setSending(false);
+    }
     fire(used instanceof HTMLElement ? { origin: used } : undefined);
     const firstName = about.name.trim().split(" ")[0];
     const email = about.email.trim();
@@ -121,6 +135,7 @@ export function StartProjectGate({ request, close, complete, onSubmit, renderCal
   }
 
   const copy = steps[step - 1];
+  const lastStep = step === steps.length;
 
   return (
     <ChatDock.Gate
@@ -129,11 +144,33 @@ export function StartProjectGate({ request, close, complete, onSubmit, renderCal
       subtitle={copy.subtitle}
       step={step}
       stepCount={steps.length}
-      onPrevious={() => setStep((current) => Math.max(1, current - 1))}
-      onNext={step < steps.length ? () => setStep((current) => current + 1) : undefined}
+      onPrevious={() => {
+        setFailed(null);
+        setStep((current) => Math.max(1, current - 1));
+      }}
+      onNext={
+        !lastStep
+          ? () => setStep((current) => current + 1)
+          : failed != null
+            ? () => {
+                void finish(failed);
+              }
+            : undefined
+      }
+      continueLabel={lastStep && failed != null ? "Try again" : undefined}
       canContinue={canContinue}
+      pending={sending}
+      error={lastStep && failed != null ? "We couldn't send your answers. Check your connection and try again." : undefined}
       onClose={close}
-      footerStart={step === 4 ? <CalEmbed.Skip onSkip={() => finish("email")} /> : undefined}
+      footerStart={
+        lastStep ? (
+          <CalEmbed.Skip
+            onSkip={() => {
+              void finish("email");
+            }}
+          />
+        ) : undefined
+      }
     >
       {step === 1 ? (
         <div className="flex w-full flex-col" role="group" aria-label="Services">
@@ -174,7 +211,13 @@ export function StartProjectGate({ request, close, complete, onSubmit, renderCal
         </div>
       ) : null}
       {step === 3 ? <IntakeForm values={about} onChange={setAbout} /> : null}
-      {step === 4 ? <CalEmbed skip={false}>{renderCalendar?.(() => finish("call"))}</CalEmbed> : null}
+      {lastStep ? (
+        <CalEmbed skip={false}>
+          {renderCalendar?.(() => {
+            void finish("call");
+          })}
+        </CalEmbed>
+      ) : null}
     </ChatDock.Gate>
   );
 }

package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — Q&A with reply
+// @thewhatmatters/wmds@0.4.4 · Pattern — Q&A with reply
 // Storybook: Components/ChatQa → Pattern — Q&A with reply (?path=/story/components-chatqa--pattern-qa-with-reply)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkbox--default.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — default
+// @thewhatmatters/wmds@0.4.4 · Pattern — default
 // Storybook: Components/Checkbox/Checkbox → Pattern — default (?path=/story/components-checkbox-checkbox--default)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkbox--with-count.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — with count
+// @thewhatmatters/wmds@0.4.4 · Pattern — with count
 // Storybook: Components/Checkbox/Checkbox → Pattern — with count (?path=/story/components-checkbox-checkbox--with-count)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkbox--with-description.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — with description
+// @thewhatmatters/wmds@0.4.4 · Pattern — with description
 // Storybook: Components/Checkbox/Checkbox → Pattern — with description (?path=/story/components-checkbox-checkbox--with-description)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkboxgroup--default.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — default
+// @thewhatmatters/wmds@0.4.4 · Pattern — default
 // Storybook: Components/Checkbox/CheckboxGroup → Pattern — default (?path=/story/components-checkbox-checkboxgroup--default)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkboxgroup--option-counts.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — option counts
+// @thewhatmatters/wmds@0.4.4 · Pattern — option counts
 // Storybook: Components/Checkbox/CheckboxGroup → Pattern — option counts (?path=/story/components-checkbox-checkboxgroup--option-counts)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-descriptionlist--details.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — details
+// @thewhatmatters/wmds@0.4.4 · Pattern — details
 // Storybook: Components/DescriptionList → Pattern — details (?path=/story/components-descriptionlist--details)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-descriptionlist--post-metadata.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.2 · Pattern — post metadata
+// @thewhatmatters/wmds@0.4.4 · Pattern — post metadata
 // Storybook: Components/DescriptionList → Pattern — post metadata (?path=/story/components-descriptionlist--post-metadata)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.