@thewhatmatters/wmds 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -7,6 +7,16 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.3.0
+
+Storybook no longer mirrors product sites. The **Sites/** section (WhatMatters and PitchKit pages) is removed, and so are its `sites-…` files in `docs/patterns/`. No component, prop, token, or export changed.
+
+### Consumer actions
+
+1. **Pasted Sites patterns are now the app's own code.** If the app pasted any **Sites/WhatMatters/…** or **Sites/PitchKit/…** pattern (for example the ask page, the Start a project intake, or RFP submitted), keep the file and delete its three header lines (`// @thewhatmatters/wmds@…`, `// Storybook: Sites/…`, `// Show code — …`). Until then, `npx wmds-check` reports `pattern-removed` for that file.
+2. **Skip the 0.2.0 steps that re-copy Sites patterns** if they are still open: the **Sites/** bullets under 0.2.0 step 9, and the re-copy in steps 11, 12, and 13. Make those changes in the app's own files instead: the Button props from step 11, starting the ask page from `q` (step 12), and the RFP `onSubmit` (step 13).
+3. **Components/PromptBar → Pattern — marketing composer:** its Show code comment no longer names a site component; the code is unchanged. Re-copy it, or update the version in its header line.
+
 ## 0.2.0
 
 First release on npm. Earlier builds were installed from git commits and all reported `0.1.0`.

package/CONSUMING.md

@@ -25,7 +25,7 @@ import "@thewhatmatters/wmds/styles.css";
 </span>
 ```
 
-Find a component A–Z under **Components/** (or by category on **Components → Overview**), read **Guides/** for cross-component choices, and use **Sites/** for approved pages and flows (**Sites/WhatMatters/…**, **Sites/PitchKit/…**) — copy the named **Pattern** story JSX and state wiring; do not re-style with utilities. Sites and Guides pages are not exported from the package.
+Find a component A–Z under **Components/** (or by category on **Components → Overview**), read **Guides/** for cross-component choices — copy the named **Pattern** story JSX and state wiring; do not re-style with utilities. Guides pages are not exported from the package. Product pages and flows are each app's own code; WMDS Storybook does not mirror them.
 
 **Show code is the product contract.** Pattern story **Show code** (`storyCopySource`) is the drop-in implementation for consuming apps. It must stay a literal mirror of the live canvas — same layout, chrome, spacing, and typography. Copy Show code; do not choose between the Storybook iframe and an older freeze, and do not reconstruct the page from Storybook-only example modules (`*Example.tsx`, `*Styles.ts`). When the canvas changes, Show code is updated to match; apps re-copy the new freeze.
 
@@ -264,7 +264,7 @@ import {
 | `Chip` | `size`, `value`, `selected`, `onRemove`, `icon`, `count`, `readOnly` | Components/Chip — use `ChipFilterGroup` for multi-select filters |
 | `Input` | `label`, `description`, `status`, `message`, `loading`, `endBadge`, `icon`, `size` | Components/Input — pill shell; Required via `endBadge={<Badge>…</Badge>}` |
 | `Search` | `size`, `placeholder`, `onSubmit` | Components/Search — inline input + button row |
-| `PromptBar` | `value`, `onValueChange`, `onSend`, `placeholder` (default Ask anything…) | Components/PromptBar — **Pattern — prompt bar**. Wide pill, inline field (one line empty, up to 3 lines, then scroll), inset **IconButton** send. Muted until there is text, then `--color-brand` (`#011272`). Enter sends. Page pattern: **Sites/WhatMatters/Prompt chat → Pattern — landing to chat** (motion into a thread that keeps growing on a narrowed page grid, `--grid-max: 40rem`: the page shell is `h-[100svh]` and the thread scrolls inside that column when it is taller than the viewport, and reserves the composer's measured height plus the space under the pill, including while a reply is still growing, so the reply and its follow-ups finish above the composer, follow-ups and **PromptBar** share that column and the bar stays pinned; a follow-up appends in the same thread; a collapsed Thought-for timer (expandable while thinking) as a fleeting supporting muted status that leaves when the reply starts, then a word stream with one **TextLink** and hover-revealed **IconButton** actions; chat reuses **SiteNav**; the brand mark returns home). Voice and attachments are not part of this version. |
+| `PromptBar` | `value`, `onValueChange`, `onSend`, `placeholder` (default Ask anything…) | Components/PromptBar — **Pattern — prompt bar**. Wide pill, inline field (one line empty, up to 3 lines, then scroll), inset **IconButton** send. Muted until there is text, then `--color-brand` (`#011272`). Enter sends. On the marketing homepage: **Pattern — marketing composer**, which hands off to the app's ask page (`/ask?q=…`). Voice and attachments are not part of this version. |
 | `Card` | `variant`, `shape`, `padding` | Components/Card/Card — `Card.Header` (`start` | `end`), **`Card.Body` slot** (no default fill), `Card.Footer` |
 | `Accordion` | `variant`, `Accordion.Item` `leading` / `label` / `trailing` / `open` | Components/Accordion — FAQ, settings sections |
 | `TaskRows` | `variant`, `status`, `meta`, `detailsLayout`, `TaskRows.Detail` | Components/TaskRows — **Pattern — status rows**, **capsules**, **action details** (`Detail variant="button"`), **tag chips** (`Chip readOnly size="sm"`), detail lines (`Detail` + `onPress` → `Button layout="row"`) |
@@ -276,9 +276,9 @@ import {
 | `HeroTileStack` | `tiles`, `tileSize`, `strength`, `velocityFactor`, `maxVertical`, `spring` | Components/HeroTileStack — **Pattern — marketing hero**. Square tiles, `--hero-tile-size`, max `tileSize` (400px), tighter pile below `md`. Scatter distances scale with the painted tile. Place **SiteNav** above the hero; the hero section is `min-h-[calc(100svh-var(--site-nav-height))]`, `shrink-0`, and `justify-center-safe`. It centers when the copy fits. When the copy is taller, the section grows and the content starts below the nav with the section's top padding. **HeroIntro** is the `h1` (`lead` + children) on centered `type-display-2` at normal weight and display-2 leading, the same size and line-height as the gallery statement. The first sentence wraps, including from `md`; the rest always starts on the next line. The sequenced hero h1 is only “An Austin, TX studio specializing in brand and product design.” (“Austin,” and “TX” stay together). A rock **RiveHand** sits `inline` immediately after “TX”, inside that nowrap phrase (drawn hand about 1.15em, centered, `aria-hidden`). That heading has no second sentence and no circle or pill. The gallery statement places the point hand after “is a first impression”. It sits on `grid-page` (same `--grid-max`, margin, gap, and column count as the guides): columns 4–9 from `lg` (`lg:col-start-4 lg:col-end-10`, 6 of 12 columns, centered), full width of that page grid below `lg`. The tile fan is the last element. Pointer over the fan springs tiles left and right away from it; a quick move adds a small vertical nudge that settles when the pointer slows; leave springs them back. Default `strength` (`120`) stays near the stack — raise it for a wider scatter. `velocityFactor` (`0.02`) and `maxVertical` (`24`) tune that nudge. Reduced motion stays on the resting fan. Coarse pointers get one gentle tap scatter, then a spring back. |
 | `ScrollHorizontal` | `items` (`id`, `label`, optional `color`), `heading` (`sr-only` while pinned, visible when motion is reduced; omitted when `intro` is set), `intro` (`ScrollHorizontal.Intro`: `eyebrow`, `statement`, optional `action` — `{ label, onClick }` for a modal button or `{ label, href }` for Button `render={<a href />}`), `expandLast` (default false), `expanded`, `className` (layout only, root) | Components/ScrollHorizontal — **Pattern — project gallery**. Also under the hero in **HeroTileStack** and **FooterReveal** **Pattern — marketing hero** (`expandLast`). Each card is a solid token-color placeholder; `label` is the accessible name (`sr-only`). `heading` names the section and stays `sr-only` on the pinned window. `intro` (**Pattern — gallery intro**, and the marketing-hero-with-gallery-intro stories) is the first panel: **Badge** label pill (neutral, the category pill), `type-display-2` statement through **TextSequence** (normal weight, once when the panel scrolls into view), **Button** `role="secondary"` labeled Start a project (no className, no icon). Pass `action={{ label: "Start a project", onClick }}` to open the project modal, or `href` when the action navigates. **FooterReveal → Pattern — marketing hero ruled grid** is the full page: sequenced hero, this intro, `expandLast`, and **FooterReveal.Ruled**. The statement is “Every screen is a first impression and we make yours the one they remember.” with an asterisk after screen, a point **RiveHand** after impression, and a diamond after yours. The eyebrow names the section. The `h2` keeps the plain sentence. At rest the panel's left edge is the page-grid content start; scroll carries it off with the tiles. Tiles follow to the right. Reduced motion stacks the intro above the row. `expandLast` still parks the last card on center before the grow. `300svh` track (`shrink-0` so a flex parent keeps that height), sticky `h-svh` window, translate from the first card centered to the last. `expandLast` uses a `400svh` track: same horizontal distance, then the last tile grows (`clip-path`) to fill the window edge to edge with radius 0 and scrolls away. `expanded` is the slot on that tile. 400×500 / `gap-8` from `sm`; 280×350 / `gap-4` below `sm`; `rounded-xl`. Reduced motion is a native horizontal scroller (`py-12`), including `MotionConfig` `reducedMotion="always"`; with `expandLast` the last tile follows as a static `h-svh` section. The section ends on that tile. **FooterReveal → Pattern — marketing hero** sets `!py-0` on the guide `grid-page` so the tile meets the footer with no page-background strip. |
 | `RiveHand` | `hand` (`point` \| `rock`), `size`, `active`, `idle` (default true), `entrance` (`slide-up` \| `grow` \| `none`, default `none`), `className`, `aria-hidden` | Components/HeroTileStack — **Pattern — marketing hero**. `point` is artboard `31_Cigarette` (cigarette removed). `rock` is `29_Rock`. `handFill` is `--color-surface` (fallback `--color-background-surface`; white in light mode). `outline` is `--color-brand` (`#011272` in both themes; hardcoded fallback `#011272`). `inline` sizes the canvas past the artboard padding so the drawn hand is about 1.15em, the drawn hand is centered on the line, and the line box does not grow. Inside a TextSequence the slot pops on the beat halfway between the words beside it, with the same scale, rotation, and `back.out(1.8)` ease as the circle and pill. Idle starts after that pop. The sequenced hero places the rock hand immediately after “TX”, inside the same nowrap phrase. The gallery statement places the point hand after “is a first impression”. `entrance="none"`. `idle` holds `Boolean 1` for 1.1s, then waits a random 1–2s before the next pulse, per hand, while the tab is visible and the sized hand box is in view. Reduced motion draws one static frame once that box has size, then pauses. The sequence pop and idle timers stay off. SSR and hydration render that resting pose; the entrance starts after mount only when motion is allowed. `npm install @rive-app/react-canvas`. Serve `public/rive/interactive-icon-set.riv` at `/rive/interactive-icon-set.riv` and `rive.wasm` at `/rive/rive.wasm`. The pattern file starts with `"use client"`. CC BY 4.0, Silvia Sguotti and Gabriele Montinaro. |
-| `ConfettiProvider` | `useConfettiOnMount()`, `useConfetti().fire()`, `origin`, `confettiDefaultColors` | Components/Confetti — playground. **Sites/WhatMatters/RFP submitted → Pattern — RFP submitted**. Fire on the confirmation surface after the async action resolves, not on the submit click. `fire()` does nothing under reduced motion. |
+| `ConfettiProvider` | `useConfettiOnMount()`, `useConfetti().fire()`, `origin`, `confettiDefaultColors` | Components/Confetti — playground. **IntakeConfirmation** is the reference composition. Fire on the confirmation surface after the async action resolves, not on the submit click. `fire()` does nothing under reduced motion. |
 
-Copy flow patterns from **Sites/** in Storybook when they ship. See **`src/package.manifest.ts`** for the export contract.
+See **`src/package.manifest.ts`** for the export contract.
 
 ### Cluster scale in detail rails
 

package/README.md

@@ -1,6 +1,6 @@
 # WMDS — WhatMatters Design System
 
-Tailwind v4 theme + **pattern-first** Storybook catalog. **Storybook is canonical** — prescribed components and Sites patterns, not utility-class soup.
+Tailwind v4 theme + **pattern-first** Storybook catalog. **Storybook is canonical** — prescribed components and their patterns, not utility-class soup.
 
 ## Stack
 
@@ -52,11 +52,11 @@ npm run validate:composition  # molecules/organisms must compose atoms (CI)
 
 The list is `src/package.manifest.ts`. `npm run build` fails when it and `src/index.ts` disagree.
 
-**Storybook-only:** **Sites/** (pages and flows per product — WhatMatters, PitchKit) and **Guides/** (cross-component guidance) — page-level compositions for copy-paste; not package exports.
+**Storybook-only:** **Guides/** (cross-component guidance) — page-level compositions for copy-paste; not package exports. Product pages live in each product's app.
 
 **Motion:** CSS tokens for simple transitions; [`motion/react`](https://motion.dev/docs/react) for gestures, layout, and enter/exit. Helpers in **`src/lib/motion.ts`** (reads Theme CSS vars).
 
-**Architecture:** Theme → lib → Atoms → Molecules → Organisms → Sites / Guides. **Pattern-first** for consumers ([ADR-0004](docs/adr/0004-pattern-first-not-utility-first.md)). **Mobile-first** on all tiers ([ADR-0003](docs/adr/0003-responsive-mobile-first.md)). See ADR-0001, ADR-0002.
+**Architecture:** Theme → lib → Atoms → Molecules → Organisms → Guides. **Pattern-first** for consumers ([ADR-0004](docs/adr/0004-pattern-first-not-utility-first.md)). **Mobile-first** on all tiers ([ADR-0003](docs/adr/0003-responsive-mobile-first.md)). See ADR-0001, ADR-0002.
 
 ## Paper