@thewhatmatters/wmds 0.2.0

package/docs/patterns/components-sitenav--marketing-header.tsx

@@ -0,0 +1,80 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — marketing header
+// Storybook: Components/SiteNav → Pattern — marketing header (?path=/story/components-sitenav--marketing-header)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, SiteNav } from "@thewhatmatters/wmds";
+import { BookOpen, FileText, History, Mic, Sparkles, Target, Video } from "lucide-react";
+
+export function MarketingHeader() {
+  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.Menu label="Resources">
+              <SiteNav.MenuSection label="Featured">
+                <SiteNav.Featured
+                  media={<SiteNav.MenuMedia variant="featured" label="Featured story imagery" />}
+                  title="WhatMatters named a Best Software Award winner"
+                  description="How teams cut meeting load without losing alignment — and what we shipped next."
+                  href="/featured"
+                />
+              </SiteNav.MenuSection>
+              <SiteNav.MenuSection label="Read">
+                <ul className="m-0 flex list-none flex-col p-0">
+                  <li className="-mx-6 border-b border-border px-6 pb-5">
+                    <SiteNav.ReadRow
+                      media={<SiteNav.MenuMedia label="Docs imagery" />}
+                      title="Docs"
+                      description="Patterns and APIs for building calm product surfaces."
+                      href="/docs"
+                    />
+                  </li>
+                  <li className="px-0 pt-5">
+                    <SiteNav.ReadRow
+                      media={<SiteNav.MenuMedia label="Opinion imagery" />}
+                      title="Opinion articles"
+                      description="Notes on focus, backlog shape, and shipping what matters."
+                      href="/opinion"
+                    />
+                  </li>
+                </ul>
+              </SiteNav.MenuSection>
+              <SiteNav.MenuSection label="Links">
+                <SiteNav.MenuLinkGrid>
+                  <SiteNav.MenuLink href="/podcast" icon={<Mic />}>Podcast</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="https://youtube.com" icon={<Video />} external>YouTube</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="/webinars" icon={<Target />}>Webinars</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="/changelog" icon={<History />}>Changelog</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="/blog" icon={<FileText />}>Blog</SiteNav.MenuLink>
+                  <SiteNav.MenuLink href="/docs" icon={<BookOpen />}>Docs</SiteNav.MenuLink>
+                </SiteNav.MenuLinkGrid>
+              </SiteNav.MenuSection>
+            </SiteNav.Menu>
+          </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>
+            <SiteNav.MobileLink href="/blog">Blog</SiteNav.MobileLink>
+          </>
+        }
+      />
+      <main className="grid-page">{/* page content — no pt-16; SiteNav is in flow */}</main>
+    </>
+  );
+}

package/docs/patterns/components-sitenav--mega-menu.tsx

@@ -0,0 +1,51 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — mega menu
+// Storybook: Components/SiteNav → Pattern — mega menu (?path=/story/components-sitenav--mega-menu)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { SiteNav } from "@thewhatmatters/wmds";
+import { BookOpen, FileText, History, Mic, Target, Video } from "lucide-react";
+
+export function ResourcesMenu() {
+  return (
+    <SiteNav.Menu label="Resources">
+      <SiteNav.MenuSection label="Featured">
+        <SiteNav.Featured
+          media={<SiteNav.MenuMedia variant="featured" label="Featured story imagery" />}
+          title="WhatMatters named a Best Software Award winner"
+          description="How teams cut meeting load without losing alignment — and what we shipped next."
+          href="/featured"
+        />
+      </SiteNav.MenuSection>
+      <SiteNav.MenuSection label="Read">
+        <ul className="m-0 flex list-none flex-col p-0">
+          <li className="-mx-6 border-b border-border px-6 pb-5">
+            <SiteNav.ReadRow
+              media={<SiteNav.MenuMedia label="Docs imagery" />}
+              title="Docs"
+              description="Patterns and APIs for building calm product surfaces."
+              href="/docs"
+            />
+          </li>
+          <li className="px-0 pt-5">
+            <SiteNav.ReadRow
+              media={<SiteNav.MenuMedia label="Opinion imagery" />}
+              title="Opinion articles"
+              description="Notes on focus, backlog shape, and shipping what matters."
+              href="/opinion"
+            />
+          </li>
+        </ul>
+      </SiteNav.MenuSection>
+      <SiteNav.MenuSection label="Links">
+        <SiteNav.MenuLinkGrid>
+          <SiteNav.MenuLink href="/podcast" icon={<Mic />}>Podcast</SiteNav.MenuLink>
+          <SiteNav.MenuLink href="https://youtube.com" icon={<Video />} external>YouTube</SiteNav.MenuLink>
+          <SiteNav.MenuLink href="/webinars" icon={<Target />}>Webinars</SiteNav.MenuLink>
+          <SiteNav.MenuLink href="/changelog" icon={<History />}>Changelog</SiteNav.MenuLink>
+          <SiteNav.MenuLink href="/blog" icon={<FileText />}>Blog</SiteNav.MenuLink>
+          <SiteNav.MenuLink href="/docs" icon={<BookOpen />}>Docs</SiteNav.MenuLink>
+        </SiteNav.MenuLinkGrid>
+      </SiteNav.MenuSection>
+    </SiteNav.Menu>
+  );
+}

package/docs/patterns/components-stat--insights-row.tsx

@@ -0,0 +1,28 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — insights row
+// Storybook: Components/Stat → Pattern — insights row (?path=/story/components-stat--insights-row)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, PageHeader, Stat } from "@thewhatmatters/wmds";
+import { Share2 } from "lucide-react";
+
+export function InsightsOverview() {
+  return (
+    <div className="flex flex-col gap-4">
+      <PageHeader
+        variant="page"
+        title="Insights"
+        end={
+          <Button role="secondary" size="sm" icon={<Share2 strokeWidth={2} />}>
+            Share
+          </Button>
+        }
+      />
+      <Stat.Group aria-label="Insights metrics" columns={4}>
+        <Stat label="Followers" value="12,480" trend={{ value: "+2.1%", direction: "up" }} />
+        <Stat label="ER" value="4.2%" />
+        <Stat label="Reach" value="256K" />
+        <Stat label="Saves" value="3,241" />
+      </Stat.Group>
+    </div>
+  );
+}

package/docs/patterns/components-stepprogress--step-progress-pattern.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — step progress
+// Storybook: Components/StepProgress → Pattern — step progress (?path=/story/components-stepprogress--step-progress-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { StepProgress } from "@thewhatmatters/wmds";
+
+export function IntakeStep() {
+  return <StepProgress step={2} steps={4} />;
+}

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

@@ -0,0 +1,17 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — default
+// Storybook: Components/Switch → Pattern — default (?path=/story/components-switch--default)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Switch } from "@thewhatmatters/wmds";
+
+export function NotificationsSwitch() {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Switch
+      label="Enable notifications"
+      checked={checked}
+      onChange={(event) => setChecked(event.target.checked)}
+    />
+  );
+}

package/docs/patterns/components-switch--settings-row.tsx

@@ -0,0 +1,19 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — settings row
+// Storybook: Components/Switch → Pattern — settings row (?path=/story/components-switch--settings-row)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Switch } from "@thewhatmatters/wmds";
+
+export function WeeklyDigestSwitch() {
+  const [checked, setChecked] = useState(true);
+  return (
+    <Switch
+      layout="settings"
+      label="Weekly digest"
+      description="A personalized summary sent every Monday morning."
+      checked={checked}
+      onChange={(event) => setChecked(event.target.checked)}
+    />
+  );
+}

package/docs/patterns/components-tab--settings-pages.tsx

@@ -0,0 +1,21 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — settings pages
+// Storybook: Components/Tab → Pattern — settings pages (?path=/story/components-tab--settings-pages)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Tab } from "@thewhatmatters/wmds";
+
+export function SettingsTabs() {
+  const [page, setPage] = useState("profile");
+
+  return (
+    <>
+      <Tab.Group aria-label="Settings pages" value={page} onValueChange={setPage}>
+        <Tab value="profile" panelId="settings-panel-profile">Profile</Tab>
+        <Tab value="notifications" panelId="settings-panel-notifications">Notifications</Tab>
+        <Tab value="security" panelId="settings-panel-security">Security</Tab>
+      </Tab.Group>
+      <section role="tabpanel">{/* active settings page */}</section>
+    </>
+  );
+}

package/docs/patterns/components-taskrows--action-details.tsx

@@ -0,0 +1,40 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — action details
+// Storybook: Components/TaskRows → Pattern — action details (?path=/story/components-taskrows--action-details)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Apple, MapPin, Map as MapIcon } from "lucide-react";
+import { TaskRows } from "@thewhatmatters/wmds";
+
+export function SupplierDirections({
+  onOpenAppleMaps,
+  onOpenGoogleMaps,
+}: {
+  onOpenAppleMaps: () => void;
+  onOpenGoogleMaps: () => void;
+}) {
+  return (
+    <TaskRows variant="list">
+      <TaskRows.Item
+        label="Cone supplier"
+        meta="0.4 mi"
+        icon={<MapPin strokeWidth={2} />}
+        defaultOpen
+        detailsLabel="Open in"
+        detailsLayout="actions"
+      >
+        <TaskRows.Detail
+          variant="button"
+          label="Apple Maps"
+          icon={<Apple strokeWidth={2} />}
+          onPress={onOpenAppleMaps}
+        />
+        <TaskRows.Detail
+          variant="button"
+          label="Google Maps"
+          icon={<MapIcon strokeWidth={2} />}
+          onPress={onOpenGoogleMaps}
+        />
+      </TaskRows.Item>
+    </TaskRows>
+  );
+}

package/docs/patterns/components-taskrows--capsules.tsx

@@ -0,0 +1,14 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — capsules
+// Storybook: Components/TaskRows → Pattern — capsules (?path=/story/components-taskrows--capsules)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TaskRows } from "@thewhatmatters/wmds";
+
+<TaskRows variant="capsule">
+  <TaskRows.Item label="Export vendor CSV" meta="12 rows" status="done">
+    <TaskRows.Detail label="Generated file" meta="vendors.csv" />
+  </TaskRows.Item>
+  <TaskRows.Item label="Refresh POS data" meta="3 files" status="running" step={2} defaultOpen>
+    <TaskRows.Detail label="Reading export" meta="2/3" />
+  </TaskRows.Item>
+</TaskRows>

package/docs/patterns/components-taskrows--card-with-status-rows.tsx

@@ -0,0 +1,30 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — card + status rows
+// Storybook: Components/TaskRows → Pattern — card + status rows (?path=/story/components-taskrows--card-with-status-rows)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, Card, TaskRows } from "@thewhatmatters/wmds";
+
+<Card padding="none">
+  <Card.Header
+    start={<h2>Restock run</h2>}
+    end={<span>Step 2 of 4</span>}
+  />
+  <Card.Body>
+    <TaskRows variant="list" inset>
+      <TaskRows.Item label="Verified vendor records" meta="12 suppliers" status="done" defaultOpen>
+        <TaskRows.Detail label="Matched tax and contact IDs" meta="12/12" />
+        <TaskRows.Detail label="Flagged stale records" meta="0" />
+      </TaskRows.Item>
+      <TaskRows.Item label="Build reorder task list" meta="7 SKUs" status="running" step={2} defaultOpen>
+        <TaskRows.Detail label="Reading POS export" meta="3 files" />
+        <TaskRows.Detail label="Scoring stockout risk" meta="68%" />
+      </TaskRows.Item>
+    </TaskRows>
+  </Card.Body>
+  <Card.Footer>
+    <span>2 complete · 1 running</span>
+    <Button role="primary" size="sm">
+      Continue
+    </Button>
+  </Card.Footer>
+</Card>

package/docs/patterns/components-taskrows--controlled-expand.tsx

@@ -0,0 +1,31 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — controlled expand
+// Storybook: Components/TaskRows → Pattern — controlled expand (?path=/story/components-taskrows--controlled-expand)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Button, TaskRows } from "@thewhatmatters/wmds";
+
+export function ReorderPanel() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <TaskRows variant="list">
+        <TaskRows.Item
+          label="Reorder recommendations"
+          meta="7 SKUs"
+          status="running"
+          step={2}
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <TaskRows.Detail label="Reading POS export" meta="3 files" />
+          <TaskRows.Detail label="Scoring stockout risk" meta="68%" />
+        </TaskRows.Item>
+      </TaskRows>
+      <Button role="secondary" size="sm" onClick={() => setOpen((value) => !value)}>
+        {open ? "Collapse row" : "Expand row"}
+      </Button>
+    </>
+  );
+}

package/docs/patterns/components-taskrows--custom-slots.tsx

@@ -0,0 +1,21 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — custom leading / trailing
+// Storybook: Components/TaskRows → Pattern — custom leading / trailing (?path=/story/components-taskrows--custom-slots)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Badge, Status, TaskRows } from "@thewhatmatters/wmds";
+
+<TaskRows variant="list">
+  <TaskRows.Item
+    label="Live inventory sync"
+    leading={<Status variant="dot" tone="success" pulsing besideLabel label="Syncing" />}
+    trailing={
+      <Badge variant="info" emphasis="muted">
+        In progress
+      </Badge>
+    }
+    defaultOpen
+  >
+    <TaskRows.Detail label="POS webhook" meta="connected" />
+    <TaskRows.Detail label="Last push" meta="2s ago" />
+  </TaskRows.Item>
+</TaskRows>

package/docs/patterns/components-taskrows--status-list.tsx

@@ -0,0 +1,23 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — status rows
+// Storybook: Components/TaskRows → Pattern — status rows (?path=/story/components-taskrows--status-list)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TaskRows } from "@thewhatmatters/wmds";
+
+<TaskRows variant="list">
+  <TaskRows.Item label="Verified vendor records" meta="12 suppliers" status="done" defaultOpen>
+    <TaskRows.Detail label="Matched tax and contact IDs" meta="12/12" />
+    <TaskRows.Detail label="Flagged stale records" meta="0" />
+  </TaskRows.Item>
+  <TaskRows.Item label="Build reorder task list" meta="7 SKUs" status="running" step={2} defaultOpen>
+    <TaskRows.Detail label="Reading POS export" meta="3 files" />
+    <TaskRows.Detail label="Scoring stockout risk" meta="68%" />
+  </TaskRows.Item>
+  <TaskRows.Item label="Draft supplier emails" meta="2 messages" status="pending" step={3}>
+    <TaskRows.Detail label="Cone supplier follow-up" meta="draft" />
+    <TaskRows.Detail label="Pistachio reorder note" meta="draft" />
+  </TaskRows.Item>
+  <TaskRows.Item label="Sync opening hours" meta="1 source" status="failed">
+    <TaskRows.Detail label="External API timeout" meta="retry" />
+  </TaskRows.Item>
+</TaskRows>

package/docs/patterns/components-taskrows--tag-chips.tsx

@@ -0,0 +1,19 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — tag chips
+// Storybook: Components/TaskRows → Pattern — tag chips (?path=/story/components-taskrows--tag-chips)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Chip, TaskRows } from "@thewhatmatters/wmds";
+
+<TaskRows variant="list">
+  <TaskRows.Item label="Weekend market booth" meta="Sat–Sun" defaultOpen detailsLayout="chips">
+    <Chip readOnly size="sm">
+      Outdoor
+    </Chip>
+    <Chip readOnly size="sm">
+      Produce
+    </Chip>
+    <Chip readOnly size="sm">
+      Card accepted
+    </Chip>
+  </TaskRows.Item>
+</TaskRows>

package/docs/patterns/components-textlink--external-destination.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — external destination
+// Storybook: Components/TextLink → Pattern — external destination (?path=/story/components-textlink--external-destination)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TextLink } from "@thewhatmatters/wmds";
+
+<p className="type-body text-fg">
+  View the project on <TextLink href="https://github.com/" external>GitHub</TextLink>.
+</p>

package/docs/patterns/components-textlink--inline-prose.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — inline prose link
+// Storybook: Components/TextLink → Pattern — inline prose link (?path=/story/components-textlink--inline-prose)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TextLink } from "@thewhatmatters/wmds";
+
+<p className="type-body text-fg">
+  Read my <TextLink href="/writing">writing</TextLink>, or browse the projects I’ve built.
+</p>

package/docs/patterns/components-textlink--supporting-copy.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — supporting copy link
+// Storybook: Components/TextLink → Pattern — supporting copy link (?path=/story/components-textlink--supporting-copy)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TextLink } from "@thewhatmatters/wmds";
+
+<p className="type-supporting text-muted">
+  By continuing, you agree to the <TextLink href="/terms">terms of service</TextLink>.
+</p>

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

@@ -0,0 +1,16 @@
+// @thewhatmatters/wmds@0.2.0 · Default
+// Storybook: Components/TextSequence → Default (?path=/story/components-textsequence--default)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TextSequence } from "@thewhatmatters/wmds";
+
+export function HeroLine() {
+  return (
+    <p className="type-display-2 text-center text-fg">
+      <TextSequence stagger={0.07} trigger="mount" idle>
+        We design <TextSequence.Shape variant="asterisk" /> brands people{" "}
+        <TextSequence.Shape variant="pill" tone="brand-soft" /> cannot ignore
+      </TextSequence>
+    </p>
+  );
+}

package/docs/patterns/components-textsequence--reduced-motion.tsx

@@ -0,0 +1,16 @@
+// @thewhatmatters/wmds@0.2.0 · Reduced motion
+// Storybook: Components/TextSequence → Reduced motion (?path=/story/components-textsequence--reduced-motion)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TextSequence } from "@thewhatmatters/wmds";
+
+export function HeroLine() {
+  return (
+    <p className="type-display-2 text-center text-fg">
+      <TextSequence stagger={0.07} trigger="mount" idle>
+        We design <TextSequence.Shape variant="asterisk" /> brands people{" "}
+        <TextSequence.Shape variant="pill" tone="brand-soft" /> cannot ignore
+      </TextSequence>
+    </p>
+  );
+}

package/docs/patterns/components-textsequence--shapes.tsx

@@ -0,0 +1,40 @@
+// @thewhatmatters/wmds@0.2.0 · Shapes
+// Storybook: Components/TextSequence → Shapes (?path=/story/components-textsequence--shapes)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TextSequence } from "@thewhatmatters/wmds";
+
+export function ShapeGallery() {
+  return (
+    <div className="grid w-full grid-cols-1 items-start gap-10 sm:grid-cols-2">
+      <figure className="flex flex-col items-center gap-3">
+        <p className="type-display-3 text-center text-fg">
+          <TextSequence emphasis="none" idle stagger={0.05}>
+            <TextSequence.Shape variant="asterisk" /> asterisk{" "}
+            <TextSequence.Shape variant="pill" tone="brand-soft" /> pill{" "}
+            <TextSequence.Shape variant="diamond" tone="accent" /> diamond{" "}
+            <TextSequence.Shape variant="dots" /> dots{" "}
+            <TextSequence.Shape variant="double-pill" tone="info-muted" /> double-pill{" "}
+            <TextSequence.Shape variant="circle" tone="accent" /> circle{" "}
+            <TextSequence.Shape variant="smiley" /> smiley
+          </TextSequence>
+        </p>
+        <figcaption className="type-label text-muted">Display</figcaption>
+      </figure>
+      <figure className="flex flex-col items-center gap-3">
+        <p className="type-large text-center text-fg">
+          <TextSequence emphasis="none" idle stagger={0.05}>
+            <TextSequence.Shape variant="asterisk" /> asterisk{" "}
+            <TextSequence.Shape variant="pill" tone="brand-soft" /> pill{" "}
+            <TextSequence.Shape variant="diamond" tone="accent" /> diamond{" "}
+            <TextSequence.Shape variant="dots" /> dots{" "}
+            <TextSequence.Shape variant="double-pill" tone="info-muted" /> double-pill{" "}
+            <TextSequence.Shape variant="circle" tone="accent" /> circle{" "}
+            <TextSequence.Shape variant="smiley" /> smiley
+          </TextSequence>
+        </p>
+        <figcaption className="type-label text-muted">Subtext</figcaption>
+      </figure>
+    </div>
+  );
+}

package/docs/patterns/components-toast--stacked-notifications.tsx

@@ -0,0 +1,31 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — stacked notifications
+// Storybook: Components/Toast → Pattern — stacked notifications (?path=/story/components-toast--stacked-notifications)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, Toaster, toast } from "@thewhatmatters/wmds";
+
+export function App() {
+  return (
+    <>
+      <Button
+        onClick={() => {
+          toast.add({
+            title: "Post hidden",
+            description: "The post was removed from your shareable kit.",
+            action: {
+              label: "Undo",
+              onClick: (id) => {
+                // Restore the hidden post in app state.
+                toast.dismiss(id);
+              },
+              dismiss: false,
+            },
+          });
+        }}
+      >
+        Hide post
+      </Button>
+      <Toaster position="bottom-right" maxVisible={5} />
+    </>
+  );
+}

package/docs/patterns/components-tooltip--controlled.tsx

@@ -0,0 +1,20 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — controlled state
+// Storybook: Components/Tooltip → Pattern — controlled state (?path=/story/components-tooltip--controlled)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { IconButton, Tooltip } from "@thewhatmatters/wmds";
+import { Info } from "lucide-react";
+
+export function ControlledTooltip() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Tooltip open={open} onOpenChange={setOpen}>
+      <Tooltip.Trigger
+        render={<IconButton icon={<Info />} aria-label="About scoring" title="" />}
+      />
+      <Tooltip.Content>How recommendation scoring works</Tooltip.Content>
+    </Tooltip>
+  );
+}

package/docs/patterns/components-tooltip--disabled-control.tsx

@@ -0,0 +1,20 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — disabled control
+// Storybook: Components/Tooltip → Pattern — disabled control (?path=/story/components-tooltip--disabled-control)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, Tooltip } from "@thewhatmatters/wmds";
+
+<Tooltip>
+  <Tooltip.Trigger
+    render={
+      <span
+        className="inline-flex"
+        tabIndex={0}
+        aria-label="Export unavailable"
+      >
+        <Button disabled>Export</Button>
+      </span>
+    }
+  />
+  <Tooltip.Content>Choose a date range before exporting</Tooltip.Content>
+</Tooltip>

package/docs/patterns/components-tooltip--icon-action.tsx

@@ -0,0 +1,21 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — icon-only action
+// Storybook: Components/Tooltip → Pattern — icon-only action (?path=/story/components-tooltip--icon-action)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { IconButton, Tooltip } from "@thewhatmatters/wmds";
+import { Settings } from "lucide-react";
+
+<Tooltip.Provider>
+  <Tooltip>
+    <Tooltip.Trigger
+      render={
+        <IconButton
+          icon={<Settings />}
+          aria-label="Workspace settings"
+          title=""
+        />
+      }
+    />
+    <Tooltip.Content>Workspace settings</Tooltip.Content>
+  </Tooltip>
+</Tooltip.Provider>

package/docs/patterns/components-tooltip--keyboard-shortcut.tsx

@@ -0,0 +1,17 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — keyboard shortcut
+// Storybook: Components/Tooltip → Pattern — keyboard shortcut (?path=/story/components-tooltip--keyboard-shortcut)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { IconButton, Kbd, Tooltip } from "@thewhatmatters/wmds";
+import { Info } from "lucide-react";
+
+<Tooltip>
+  <Tooltip.Trigger
+    render={<IconButton icon={<Info />} aria-label="Show details" title="" />}
+  />
+  <Tooltip.Content>
+    <span className="inline-flex items-center gap-2">
+      Show details <Kbd>D</Kbd>
+    </span>
+  </Tooltip.Content>
+</Tooltip>