@thewhatmatters/wmds 0.2.0

package/docs/patterns/components-footerreveal--marketing-page-pattern.tsx

@@ -0,0 +1,76 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — marketing page
+// Storybook: Components/FooterReveal → Pattern — marketing page (?path=/story/components-footerreveal--marketing-page-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, FooterReveal, SiteNav, footerRevealFieldClasses } from "@thewhatmatters/wmds";
+import { Sparkles } from "lucide-react";
+
+const socialLinks = [
+  { label: "Contra", href: "#contra-TODO" },
+  { label: "Instagram", href: "https://www.instagram.com/thewhatmatters" },
+  { label: "LinkedIn", href: "https://www.linkedin.com/in/randymdaniel" },
+  { label: "X", href: "#x-TODO" },
+] as const;
+
+// Opens the multi-step project form. There is no /start route.
+function openProjectModal() {}
+
+export function MarketingPage() {
+  return (
+    <FooterReveal>
+      <FooterReveal.Content>
+        <SiteNav
+          start={<SiteNav.Brand href="/" aria-label="WhatMatters" icon={<Sparkles strokeWidth={2} />} />}
+          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" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+            </>
+          }
+          mobile={
+            <>
+              <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+            </>
+          }
+        />
+        <main className="grid-page">
+          <div className="band pt-10">
+            <div className="col-span-full flex flex-col gap-4 lg:col-span-8 lg:col-start-3">
+              <p className="type-supporting font-medium uppercase tracking-wider text-muted">WhatMatters</p>
+              <h1 className="type-display-2 text-fg">Plan the week around what matters.</h1>
+              <p className="type-body max-w-prose text-muted">
+                WhatMatters turns a noisy backlog into one calm list. Set priorities once and let the week reshuffle itself.
+              </p>
+            </div>
+          </div>
+          <div className="band py-16">
+            <div className="col-span-full flex flex-col gap-3 lg:col-span-8 lg:col-start-3">
+              <h2 className="type-heading-2 text-fg">Scroll to the end of the cover</h2>
+              <p className="type-body max-w-prose text-muted">
+                The footer sits underneath. It starts soft and blurred, then sharpens across its own height.
+              </p>
+            </div>
+          </div>
+        </main>
+      </FooterReveal.Content>
+      <FooterReveal.Footer className={footerRevealFieldClasses}>
+        <FooterReveal.Brand
+          headline="We Build WhatMatters"
+          ctaLabel="Start a project"
+          onCtaClick={openProjectModal}
+          wordmark="WHATMATTERS"
+          socialLinks={socialLinks}
+        />
+      </FooterReveal.Footer>
+    </FooterReveal>
+  );
+}

package/docs/patterns/components-footerreveal--ruled-grid-footer-pattern.tsx

@@ -0,0 +1,42 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — ruled grid footer
+// Storybook: Components/FooterReveal → Pattern — ruled grid footer (?path=/story/components-footerreveal--ruled-grid-footer-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { FooterReveal, TextLink, footerRevealRuledFieldClasses } from "@thewhatmatters/wmds";
+
+export function RuledGridFooter() {
+  return (
+    <div className={footerRevealRuledFieldClasses}>
+      <FooterReveal.Ruled
+        wordmark="WhatMatters"
+        mark="WM"
+        copyright="WhatMatters © 2026"
+        links={[
+          { label: "Services", href: "/services" },
+          { label: "Resources", href: "/resources" },
+          { label: "About", href: "/about" },
+        ]}
+        email="randy@whatmatters.so"
+        credit="Created by WhatMatters 2024–2026"
+      />
+    </div>
+  );
+}
+
+export function FooterRevealRuledNav() {
+  return (
+    <nav aria-label="Footer">
+      <ul className="m-0 flex list-none flex-col items-center gap-3 whitespace-nowrap p-0 font-sans text-[length:var(--font-size-4xl)] leading-none sm:text-[4rem]">
+        <li>
+          <TextLink href="/services" className="!text-brand">Services</TextLink>
+        </li>
+        <li>
+          <TextLink href="/resources" className="!text-brand">Resources</TextLink>
+        </li>
+        <li>
+          <TextLink href="/about" className="!text-brand">About</TextLink>
+        </li>
+      </ul>
+    </nav>
+  );
+}

package/docs/patterns/components-footerreveal--sequenced-marketing-hero.tsx

@@ -0,0 +1,123 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — marketing hero with sequenced gallery
+// Storybook: Components/FooterReveal → Pattern — marketing hero with sequenced gallery (?path=/story/components-footerreveal--sequenced-marketing-hero)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+// npm install @rive-app/react-canvas gsap @gsap/react
+// Copy public/rive/interactive-icon-set.riv so the app serves /rive/interactive-icon-set.riv.
+// Hand art: CC BY 4.0, Silvia Sguotti and Gabriele Montinaro.
+
+import { Sparkles } from "lucide-react";
+import { Button, FooterReveal, GridOverlay, HeroIntro, HeroTileStack, RiveHand, ScrollHorizontal, SiteNav, TextSequence, footerRevealFieldClasses } from "@thewhatmatters/wmds";
+
+const socialLinks = [
+  { label: "Contra", href: "#contra-TODO" },
+  { label: "Instagram", href: "https://www.instagram.com/thewhatmatters" },
+  { label: "LinkedIn", href: "https://www.linkedin.com/in/randymdaniel" },
+  { label: "X", href: "#x-TODO" },
+] as const;
+
+const tiles = [
+  { src: "/hero-tiles/plan.svg", alt: "Weekly plan on a lime tile" },
+  { src: "/hero-tiles/focus.svg", alt: "Blue focus card" },
+  { src: "/hero-tiles/week.svg", alt: "Abstract shapes for the week" },
+  { src: "/hero-tiles/note.svg", alt: "A pale note about what matters" },
+];
+
+const projects = [
+  { id: "project-one", label: "Project One", color: "var(--color-brand)" },
+  { id: "project-two", label: "Project Two", color: "var(--color-brand-soft)" },
+  { id: "project-three", label: "Project Three", color: "var(--color-primary)" },
+  { id: "project-four", label: "Project Four", color: "var(--color-info-muted)" },
+  { id: "project-five", label: "Project Five", color: "var(--color-accent)" },
+];
+
+// Opens the multi-step project form. There is no /start route.
+function openProjectModal() {}
+
+export function SequencedMarketingHeroPage() {
+  return (
+    <FooterReveal>
+      <FooterReveal.Content>
+        <SiteNav
+          start={<SiteNav.Brand href="/" aria-label="WhatMatters" icon={<Sparkles strokeWidth={2} />} />}
+          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" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+            </>
+          }
+          mobile={
+            <>
+              <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+              <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+            </>
+          }
+        />
+        <section className="flex min-h-[calc(100svh-var(--site-nav-height))] w-full shrink-0 flex-col items-center justify-center-safe overflow-x-clip overflow-y-visible bg-body py-12 text-center">
+          <div className="flex w-full flex-col items-center gap-6">
+          <HeroIntro
+            step="display"
+            lead={
+              <TextSequence idle emphasis="none" stagger={0.07}>
+                {"An "}
+                <span className="whitespace-nowrap">
+                  Austin,&nbsp;TX{" "}
+                  <RiveHand hand="rock" inline idle entrance="none" aria-hidden />
+                  {" "}
+                </span>
+                {"studio specializing in brand and product design."}
+              </TextSequence>
+            }
+          />
+            <div className="w-full px-[var(--grid-margin)]">
+            <HeroTileStack tiles={tiles} />
+            </div>
+          </div>
+        </section>
+        <ScrollHorizontal
+          items={projects}
+          expandLast
+          intro={
+            <ScrollHorizontal.Intro
+              eyebrow="SELECTED WORK"
+              statement={
+                <>
+                  {"Every screen"}
+                  <TextSequence.Shape variant="asterisk" />
+                  {" is a first impression "}
+                  <RiveHand hand="point" inline idle entrance="none" aria-hidden />
+                  {" and we make yours"}
+                  <TextSequence.Shape variant="diamond" tone="accent" />
+                  {" the one they remember."}
+                </>
+              }
+              action={{ label: "Start a project", onClick: openProjectModal }}
+            />
+          }
+        />
+        <main className="grid-page bg-body !py-0">
+          <GridOverlay visible keyboardShortcut={false} />
+        </main>
+      </FooterReveal.Content>
+      <FooterReveal.Footer className={footerRevealFieldClasses}>
+        <FooterReveal.Brand
+          headline="We Build WhatMatters"
+          ctaLabel="Start a project"
+          onCtaClick={openProjectModal}
+          wordmark="WHATMATTERS"
+          socialLinks={socialLinks}
+        />
+      </FooterReveal.Footer>
+    </FooterReveal>
+  );
+}

package/docs/patterns/components-herointro--two-line-intro.tsx

@@ -0,0 +1,15 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — two-line intro
+// Storybook: Components/HeroIntro → Pattern — two-line intro (?path=/story/components-herointro--two-line-intro)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Badge, HeroIntro } from "@thewhatmatters/wmds";
+
+export function MarketingHeroIntro() {
+  return (
+    <HeroIntro lead="We're a design and product studio based in Austin, Texas.">
+      We help brands stand out{" "}
+      <Badge variant="info" size="md" emphasis="muted" className="align-middle" avatar={{ src: "/hero-badges/globe.svg", alt: "" }}>online</Badge>
+      {" "}with bold ideas, fresh approaches, and products people actually love to use.
+    </HeroIntro>
+  );
+}

package/docs/patterns/components-herotilestack--marketing-hero-pattern.tsx

@@ -0,0 +1,72 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — marketing hero
+// Storybook: Components/HeroTileStack → Pattern — marketing hero (?path=/story/components-herotilestack--marketing-hero-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+import { Sparkles } from "lucide-react";
+import { Badge, Button, HeroIntro, HeroTileStack, ScrollHorizontal, SiteNav } from "@thewhatmatters/wmds";
+
+const tiles = [
+  { src: "/hero-tiles/plan.svg", alt: "Weekly plan on a lime tile" },
+  { src: "/hero-tiles/focus.svg", alt: "Blue focus card" },
+  { src: "/hero-tiles/week.svg", alt: "Abstract shapes for the week" },
+  { src: "/hero-tiles/note.svg", alt: "A pale note about what matters" },
+];
+
+const projects = [
+  { id: "project-one", label: "Project One", color: "var(--color-brand)" },
+  { id: "project-two", label: "Project Two", color: "var(--color-brand-soft)" },
+  { id: "project-three", label: "Project Three", color: "var(--color-primary)" },
+  { id: "project-four", label: "Project Four", color: "var(--color-info-muted)" },
+  { id: "project-five", label: "Project Five", color: "var(--color-accent)" },
+];
+
+export function MarketingHero() {
+  return (
+    <>
+      <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" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+          </>
+        }
+        mobile={
+          <>
+            <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+          </>
+        }
+      />
+      <section className="flex min-h-[calc(100svh-var(--site-nav-height))] w-full shrink-0 flex-col items-center justify-center-safe overflow-x-clip overflow-y-visible bg-body py-16 text-center">
+        <div className="flex w-full flex-col items-center gap-6">
+          <HeroIntro lead="We're a design and product studio based in Austin, Texas.">
+            We help brands stand out{" "}
+            <Badge variant="info" size="md" emphasis="muted" className="align-middle" avatar={{ src: "/hero-badges/globe.svg", alt: "" }}>online</Badge>
+            {" "}with bold ideas, fresh approaches, and products people actually love to use.
+          </HeroIntro>
+            <div className="w-full px-[var(--grid-margin)]">
+            <HeroTileStack tiles={tiles} />
+            </div>
+        </div>
+      </section>
+      <ScrollHorizontal
+        items={projects}
+        heading={<h2 className="type-heading-2 text-fg">Selected work</h2>}
+        expandLast
+      />
+    </>
+  );
+}

package/docs/patterns/components-herotilestack--marketing-hero-text-sequence.tsx

@@ -0,0 +1,84 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — marketing hero text sequence
+// Storybook: Components/HeroTileStack → Pattern — marketing hero text sequence (?path=/story/components-herotilestack--marketing-hero-text-sequence)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+// npm install @rive-app/react-canvas gsap @gsap/react
+// Copy public/rive/interactive-icon-set.riv so the app serves /rive/interactive-icon-set.riv.
+// Hand art: CC BY 4.0, Silvia Sguotti and Gabriele Montinaro.
+
+import { Sparkles } from "lucide-react";
+import { Button, HeroIntro, HeroTileStack, RiveHand, ScrollHorizontal, SiteNav, TextSequence } from "@thewhatmatters/wmds";
+
+const tiles = [
+  { src: "/hero-tiles/plan.svg", alt: "Weekly plan on a lime tile" },
+  { src: "/hero-tiles/focus.svg", alt: "Blue focus card" },
+  { src: "/hero-tiles/week.svg", alt: "Abstract shapes for the week" },
+  { src: "/hero-tiles/note.svg", alt: "A pale note about what matters" },
+];
+
+const projects = [
+  { id: "project-one", label: "Project One", color: "var(--color-brand)" },
+  { id: "project-two", label: "Project Two", color: "var(--color-brand-soft)" },
+  { id: "project-three", label: "Project Three", color: "var(--color-primary)" },
+  { id: "project-four", label: "Project Four", color: "var(--color-info-muted)" },
+  { id: "project-five", label: "Project Five", color: "var(--color-accent)" },
+];
+export function MarketingHeroTextSequence() {
+  return (
+    <>
+      <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" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+          </>
+        }
+        mobile={
+          <>
+            <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+          </>
+        }
+      />
+      <section className="flex min-h-[calc(100svh-var(--site-nav-height))] w-full shrink-0 flex-col items-center justify-center-safe overflow-x-clip overflow-y-visible bg-body py-12 text-center">
+        <div className="flex w-full flex-col items-center gap-6">
+          <HeroIntro
+            step="display"
+            lead={
+              <TextSequence idle emphasis="none" stagger={0.07}>
+                {"An "}
+                <span className="whitespace-nowrap">
+                  Austin,&nbsp;TX{" "}
+                  <RiveHand hand="rock" inline idle entrance="none" aria-hidden />
+                  {" "}
+                </span>
+                {"studio specializing in brand and product design."}
+              </TextSequence>
+            }
+          />
+          <div className="w-full px-[var(--grid-margin)]">
+            <HeroTileStack tiles={tiles} />
+          </div>
+        </div>
+      </section>
+      <ScrollHorizontal
+        items={projects}
+        heading={<h2 className="type-heading-2 text-fg">Selected work</h2>}
+        expandLast
+      />
+    </>
+  );
+}

package/docs/patterns/components-herotilestack--marketing-hero-with-gallery-intro.tsx

@@ -0,0 +1,92 @@
+// @thewhatmatters/wmds@0.2.0 · Marketing hero with gallery intro
+// Storybook: Components/HeroTileStack → Marketing hero with gallery intro (?path=/story/components-herotilestack--marketing-hero-with-gallery-intro)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+// npm install @rive-app/react-canvas
+// Copy public/rive/interactive-icon-set.riv so the app serves /rive/interactive-icon-set.riv.
+// Hand art: CC BY 4.0, Silvia Sguotti and Gabriele Montinaro.
+
+import { Sparkles } from "lucide-react";
+import { Badge, Button, HeroIntro, HeroTileStack, RiveHand, ScrollHorizontal, SiteNav, TextSequence } from "@thewhatmatters/wmds";
+
+const tiles = [
+  { src: "/hero-tiles/plan.svg", alt: "Weekly plan on a lime tile" },
+  { src: "/hero-tiles/focus.svg", alt: "Blue focus card" },
+  { src: "/hero-tiles/week.svg", alt: "Abstract shapes for the week" },
+  { src: "/hero-tiles/note.svg", alt: "A pale note about what matters" },
+];
+
+const projects = [
+  { id: "project-one", label: "Project One", color: "var(--color-brand)" },
+  { id: "project-two", label: "Project Two", color: "var(--color-brand-soft)" },
+  { id: "project-three", label: "Project Three", color: "var(--color-primary)" },
+  { id: "project-four", label: "Project Four", color: "var(--color-info-muted)" },
+  { id: "project-five", label: "Project Five", color: "var(--color-accent)" },
+];
+
+export function MarketingHeroWithGalleryIntro() {
+  return (
+    <>
+      <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" render={<a href="/start" />} className="whitespace-nowrap">Get started</Button>
+          </>
+        }
+        mobile={
+          <>
+            <SiteNav.MobileLink href="/product" current>Product</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/pricing">Pricing</SiteNav.MobileLink>
+            <SiteNav.MobileLink href="/customers">Customers</SiteNav.MobileLink>
+          </>
+        }
+      />
+      <section className="flex min-h-[calc(100svh-var(--site-nav-height))] w-full shrink-0 flex-col items-center justify-center-safe overflow-x-clip overflow-y-visible bg-body py-16 text-center">
+        <div className="flex w-full flex-col items-center gap-6">
+          <HeroIntro lead="We're a design and product studio based in Austin, Texas.">
+            We help brands stand out{" "}
+            <Badge variant="info" size="md" emphasis="muted" className="align-middle" avatar={{ src: "/hero-badges/globe.svg", alt: "" }}>online</Badge>
+            {" "}with bold ideas, fresh approaches, and products people actually love to use.
+          </HeroIntro>
+            <div className="w-full px-[var(--grid-margin)]">
+            <HeroTileStack tiles={tiles} />
+            </div>
+        </div>
+      </section>
+      <ScrollHorizontal
+        items={projects}
+        expandLast
+        intro={
+          <ScrollHorizontal.Intro
+            eyebrow="SELECTED WORK"
+            statement={
+              <>
+                {"Every screen"}
+                <TextSequence.Shape variant="asterisk" />
+                {" is a first impression "}
+                <RiveHand hand="point" inline idle entrance="none" aria-hidden />
+                {" and we make yours"}
+                <TextSequence.Shape variant="diamond" tone="accent" />
+                {" the one they remember."}
+              </>
+            }
+            action={{ label: "Start a project" }}
+          />
+        }
+      />
+    </>
+  );
+}

package/docs/patterns/components-intakeconfirmation--booked-pattern.tsx

@@ -0,0 +1,20 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — booked
+// Storybook: Components/IntakeConfirmation → Pattern — booked (?path=/story/components-intakeconfirmation--booked-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { ConfettiProvider, IntakeConfirmation } from "@thewhatmatters/wmds";
+
+export function Booked() {
+  return (
+    <ConfettiProvider>
+      <IntakeConfirmation
+        variant="booked"
+        bookingTime="Thu, Oct 9 · 10:00–10:30am CT"
+        videoHref="https://meet.example.com/whatmatters"
+        googleCalendarHref="https://calendar.google.com/calendar/render?action=TEMPLATE"
+        icsHref="/calendar/whatmatters-intake.ics"
+        onDone={() => undefined}
+      />
+    </ConfettiProvider>
+  );
+}

package/docs/patterns/components-intakeconfirmation--emailed-pattern.tsx

@@ -0,0 +1,13 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — emailed
+// Storybook: Components/IntakeConfirmation → Pattern — emailed (?path=/story/components-intakeconfirmation--emailed-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { ConfettiProvider, IntakeConfirmation } from "@thewhatmatters/wmds";
+
+export function Emailed() {
+  return (
+    <ConfettiProvider>
+      <IntakeConfirmation variant="emailed" onDone={() => undefined} />
+    </ConfettiProvider>
+  );
+}

package/docs/patterns/components-intakeform--about-you-pattern.tsx

@@ -0,0 +1,12 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — about you
+// Storybook: Components/IntakeForm → Pattern — about you (?path=/story/components-intakeform--about-you-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { IntakeForm, intakeAboutEmpty } from "@thewhatmatters/wmds";
+
+export function AboutYou() {
+  const [values, setValues] = useState(intakeAboutEmpty);
+
+  return <IntakeForm values={values} onChange={setValues} />;
+}

package/docs/patterns/components-intakemodal--intake-modal-pattern.tsx

@@ -0,0 +1,32 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — intake modal
+// Storybook: Components/IntakeModal → Pattern — intake modal (?path=/story/components-intakemodal--intake-modal-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Button, IntakeModal } from "@thewhatmatters/wmds";
+
+export function StartAProjectShell() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button role="primary" type="button" onClick={() => setOpen(true)}>
+        Start a project
+      </Button>
+      <IntakeModal
+        open={open}
+        onOpenChange={setOpen}
+        step={1}
+        steps={4}
+        backDisabled
+        onBack={() => undefined}
+        onContinue={() => undefined}
+      >
+        <h2 className="type-heading-1 text-fg tracking-tight">What do you need?</h2>
+        <p className="type-body text-fg">
+          Pick everything that fits. We&apos;ll shape the work around it.
+        </p>
+      </IntakeModal>
+    </>
+  );
+}

package/docs/patterns/components-kbd--command-row.tsx

@@ -0,0 +1,13 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — command row
+// Storybook: Components/Kbd → Pattern — command row (?path=/story/components-kbd--command-row)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Kbd } from "@thewhatmatters/wmds";
+
+<div className="flex items-center justify-between gap-6">
+  <span>Open command menu</span>
+  <span className="inline-flex items-center gap-1">
+    <Kbd aria-label="Command">⌘</Kbd>
+    <Kbd>K</Kbd>
+  </span>
+</div>

package/docs/patterns/components-kbd--numbered-choices.tsx

@@ -0,0 +1,53 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — numbered choice keys
+// Storybook: Components/Kbd → Pattern — numbered choice keys (?path=/story/components-kbd--numbered-choices)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Checkbox, Kbd, useKbdChoiceKeys } from "@thewhatmatters/wmds";
+
+const choices = [
+  { value: "brand", label: "Brand identity", number: "1" },
+  { value: "website", label: "Website", number: "2" },
+  { value: "product", label: "Product design", number: "3" },
+  { value: "system", label: "Design system", number: "4" },
+];
+
+export function NumberedChoices() {
+  const [values, setValues] = useState<string[]>([]);
+
+  function toggle(value: string, checked: boolean) {
+    if (checked) {
+      setValues((current) => [...current, value]);
+      return;
+    }
+    setValues((current) => current.filter((item) => item !== value));
+  }
+
+  useKbdChoiceKeys({
+    choices: Object.fromEntries(
+      choices.map((option) => [
+        option.number,
+        () => toggle(option.value, !values.includes(option.value)),
+      ]),
+    ),
+  });
+
+  return (
+    <div className="flex w-full flex-col" role="group" aria-label="What are we making?">
+      {choices.map((option) => (
+        <div key={option.value} className="flex w-full items-center gap-3 border-b border-border py-3 last:border-b-0">
+          <Checkbox
+            className="min-w-0 flex-1"
+            size="md"
+            label={option.label}
+            checked={values.includes(option.value)}
+            onChange={(event) => toggle(option.value, event.target.checked)}
+          />
+          <Kbd className="shrink-0" aria-label={"Press " + option.number}>
+            {option.number}
+          </Kbd>
+        </div>
+      ))}
+    </div>
+  );
+}