@thewhatmatters/wmds 0.4.9 → 0.4.28

package/docs/patterns/components-sheet--bottom-sheet.tsx

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

package/docs/patterns/components-sheet--end-sheet.tsx

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

package/docs/patterns/components-sheet--side-sheet-header-actions.tsx

@@ -0,0 +1,50 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — side sheet header actions
+// Storybook: Components/Sheet → Pattern — side sheet header actions (?path=/story/components-sheet--side-sheet-header-actions)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { Button, IconButton, Sheet } from "@thewhatmatters/wmds";
+
+export function StepThroughSheet() {
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+  const names = ["Maya Chen", "Field notes: Q4 studio update", "Dev Patel"];
+
+  return (
+    <>
+      <Button role="secondary" onClick={() => setOpen(true)}>
+        Review queue
+      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <Sheet.Content
+          side="end"
+          title={names[index]}
+          description={`${index + 1} of ${names.length}`}
+          headerActions={
+            <>
+              <IconButton
+                size="sm"
+                role="ghost"
+                icon={<ChevronUp strokeWidth={2} />}
+                aria-label="Previous"
+                disabled={index === 0}
+                onClick={() => setIndex(index - 1)}
+              />
+              <IconButton
+                size="sm"
+                role="ghost"
+                icon={<ChevronDown strokeWidth={2} />}
+                aria-label="Next"
+                disabled={index === names.length - 1}
+                onClick={() => setIndex(index + 1)}
+              />
+            </>
+          }
+        >
+          <p>Detail for {names[index]}.</p>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}

package/docs/patterns/components-sheet--side-sheet-url-deep-link.tsx

@@ -0,0 +1,51 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — side sheet URL deep link
+// Storybook: Components/Sheet → Pattern — side sheet URL deep link (?path=/story/components-sheet--side-sheet-url-deep-link)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { TextLink, Sheet, Button, useSheetParam, withSheetParam, dialogFooterActionsClasses } from "@thewhatmatters/wmds";
+
+interface ApprovalRow {
+  id: string;
+  name: string;
+}
+
+export function ApprovalList({ rows, initialUrl }: { rows: ApprovalRow[]; initialUrl?: string }) {
+  const { open, id, onOpenChange } = useSheetParam("approval", { initialUrl });
+  const row = rows.find((item) => item.id === id);
+
+  return (
+    <>
+      <ul className="flex flex-col gap-2">
+        {rows.map((item) => (
+          <li key={item.id}>
+            <TextLink
+              href={withSheetParam(initialUrl ?? "/approvals", item.id, "approval")}
+              onClick={(event) => {
+                event.preventDefault();
+                onOpenChange(true, item.id);
+              }}
+            >
+              {item.name}
+            </TextLink>
+          </li>
+        ))}
+      </ul>
+      <Sheet open={open && row != null} onOpenChange={(next) => onOpenChange(next)}>
+        <Sheet.Content
+          side="end"
+          title={row?.name}
+          description="Creator application"
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="primary" onClick={() => onOpenChange(false)}>
+                Done
+              </Button>
+            </div>
+          }
+        >
+          <p>Detail for {row?.name}.</p>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}

package/docs/patterns/components-sheet--side-sheet.tsx

@@ -0,0 +1,38 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — side sheet
+// Storybook: Components/Sheet → Pattern — side sheet (?path=/story/components-sheet--side-sheet)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Button, Sheet, dialogFooterActionsClasses } from "@thewhatmatters/wmds";
+
+export function ApprovalSheet() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button role="primary" onClick={() => setOpen(true)}>
+        Review Maya Chen
+      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <Sheet.Content
+          side="end"
+          size="md"
+          title="Maya Chen"
+          description="Creator application, waiting 3 days"
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="outline" onClick={() => setOpen(false)}>
+                Deny
+              </Button>
+              <Button size="sm" role="primary" onClick={() => setOpen(false)}>
+                Approve
+              </Button>
+            </div>
+          }
+        >
+          <p>Writes about independent studios. Two published samples attached.</p>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}

package/docs/patterns/components-sitenav--brand-and-cta.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — brand + CTA
+// @thewhatmatters/wmds@0.4.28 · Pattern — brand + CTA
 // Storybook: Components/SiteNav → Pattern — brand + CTA (?path=/story/components-sitenav--brand-and-cta)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-sitenav--centered-links.tsx

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

package/docs/patterns/components-sitenav--compact.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — compact (scrolled)
+// @thewhatmatters/wmds@0.4.28 · Pattern — compact (scrolled)
 // Storybook: Components/SiteNav → Pattern — compact (scrolled) (?path=/story/components-sitenav--compact)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — marketing header
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — mega menu
+// @thewhatmatters/wmds@0.4.28 · 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.
 

package/docs/patterns/components-stat--hero-stat.tsx

@@ -0,0 +1,54 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — hero stat
+// Storybook: Components/Stat → Pattern — hero stat (?path=/story/components-stat--hero-stat)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, Stat } from "@thewhatmatters/wmds";
+import { BarChart3, Receipt, Unplug, Wallet } from "lucide-react";
+
+export function HeroStats() {
+  return (
+    <Stat.Group aria-label="Performance" columns={2}>
+      <Stat
+        size="lg"
+        icon={<Receipt strokeWidth={2} />}
+        label="Attributed revenue"
+        value="$18,420"
+        trend={{ value: "+24.1%", direction: "up" }}
+        context="vs $14,850"
+        action={
+          <Button role="secondary" size="sm">
+            View details
+          </Button>
+        }
+      />
+      <Stat
+        size="lg"
+        icon={<BarChart3 strokeWidth={2} />}
+        label="Return on spend"
+        value="2.7×"
+        trend={{ value: "−0.4", direction: "down" }}
+        context="vs 3.1×"
+      />
+      <Stat
+        size="lg"
+        icon={<Wallet strokeWidth={2} />}
+        label="Available to spend"
+        value="$14.00"
+        trend={{ value: "0.0%", direction: "flat" }}
+        context="of $1M goal"
+      />
+      <Stat
+        size="lg"
+        icon={<Unplug strokeWidth={2} />}
+        label="Content awaiting approval"
+        value=""
+        unavailable={{ reason: "Google Analytics is not linked" }}
+        action={
+          <Button role="secondary" size="sm">
+            Connect
+          </Button>
+        }
+      />
+    </Stat.Group>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — insights row
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — step progress
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — default
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — settings row
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — settings pages
+// @thewhatmatters/wmds@0.4.28 · 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.
 

package/docs/patterns/components-table--approvals-with-sheet.tsx

@@ -0,0 +1,81 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — approvals with sheet
+// Storybook: Components/Table → Pattern — approvals with sheet (?path=/story/components-table--approvals-with-sheet)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import {
+  Button,
+  Sheet,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TextLink,
+  dialogFooterActionsClasses,
+} from "@thewhatmatters/wmds";
+
+interface ApprovalRow {
+  id: string;
+  name: string;
+  kind: string;
+  waiting: string;
+}
+
+export function ApprovalsWithSheet({ rows }: { rows: ApprovalRow[] }) {
+  const [id, setId] = useState<string | null>(null);
+  const row = rows.find((item) => item.id === id);
+
+  return (
+    <>
+      <Table aria-label="Approvals waiting on you">
+        <TableCaption>{rows.length} waiting on you</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Kind</TableHead>
+            <TableHead align="end">Waiting</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((item) => (
+            <TableRow key={item.id} onClick={() => setId(item.id)}>
+              <TableCell>
+                <TextLink
+                  variant="quiet"
+                  href={`#${item.id}`}
+                  onClick={(event) => event.preventDefault()}
+                >
+                  {item.name}
+                </TextLink>
+              </TableCell>
+              <TableCell>{item.kind}</TableCell>
+              <TableCell align="end">{item.waiting}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <Sheet open={row != null} onOpenChange={(open) => setId(open ? id : null)}>
+        <Sheet.Content
+          side="end"
+          title={row?.name}
+          description={row?.kind}
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="outline" onClick={() => setId(null)}>
+                Deny
+              </Button>
+              <Button size="sm" role="primary" onClick={() => setId(null)}>
+                Approve
+              </Button>
+            </div>
+          }
+        >
+          <p>Waiting {row?.waiting}.</p>
+        </Sheet.Content>
+      </Sheet>
+    </>
+  );
+}

package/docs/patterns/components-table--approvals.tsx

@@ -0,0 +1,223 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — approvals queue
+// Storybook: Components/Table → Pattern — approvals queue (?path=/story/components-table--approvals)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+import { Check, X } from "lucide-react";
+import {
+  Badge,
+  Button,
+  Card,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@thewhatmatters/wmds";
+
+export type ApprovalDecision = "approved" | "denied";
+
+export interface ApprovalItem {
+  id: string;
+  name: string;
+  kind: string;
+  waiting: string;
+}
+
+export interface ApprovalsQueueProps {
+  items: ApprovalItem[];
+  onDecision?: (item: ApprovalItem, decision: ApprovalDecision) => void;
+}
+
+type ApprovalView = "table" | "card";
+
+/** The row's buttons. `table` sits them side by side; `card` gives each half the row. */
+function ActionGroup({
+  label,
+  view,
+  onEscape,
+  children,
+}: {
+  label: string;
+  view: ApprovalView;
+  onEscape?: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      role="group"
+      aria-label={label}
+      className={view === "card" ? "grid h-11 grid-cols-2 items-center gap-2" : "flex h-11 items-center gap-2"}
+      onKeyDown={(event) => {
+        if (event.key === "Escape") onEscape?.();
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ApprovalsQueue({ items, onDecision }: ApprovalsQueueProps) {
+  const [decisions, setDecisions] = useState<Record<string, ApprovalDecision>>({});
+  const [confirmingId, setConfirmingId] = useState<string | null>(null);
+  const [focusKey, setFocusKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!focusKey) return;
+    const targets = document.querySelectorAll<HTMLElement>(`[data-focus="${focusKey}"]`);
+    Array.from(targets)
+      .find((target) => target.getClientRects().length > 0)
+      ?.focus();
+  }, [focusKey]);
+
+  const waiting = items.filter((item) => !decisions[item.id]).length;
+
+  function decide(item: ApprovalItem, decision: ApprovalDecision) {
+    setDecisions((current) => ({ ...current, [item.id]: decision }));
+    setConfirmingId(null);
+    setFocusKey(`${item.id}-decision`);
+    onDecision?.(item, decision);
+  }
+
+  function cancel(item: ApprovalItem) {
+    setConfirmingId(null);
+    setFocusKey(`${item.id}-deny`);
+  }
+
+  function renderDecision(item: ApprovalItem, view: ApprovalView) {
+    const decision = decisions[item.id];
+    const full = view === "card" ? "w-full" : undefined;
+    if (decision) {
+      return (
+        <div className="flex h-11 items-center">
+          <span
+            data-focus={`${item.id}-decision`}
+            tabIndex={-1}
+            className="inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body"
+          >
+            <Badge status={decision === "approved" ? "success" : "failed"} dot>
+              {decision === "approved" ? "Approved" : "Denied"}
+            </Badge>
+          </span>
+        </div>
+      );
+    }
+    if (confirmingId === item.id) {
+      return (
+        <ActionGroup label={`Confirm denying ${item.name}`} view={view} onEscape={() => cancel(item)}>
+          <Button
+            data-focus={`${item.id}-confirm`}
+            role="primary"
+            icon={<X />}
+            className={full}
+            aria-label={`Confirm deny ${item.name}`}
+            onClick={() => decide(item, "denied")}
+          >
+            Confirm deny
+          </Button>
+          <Button role="ghost" className={full} aria-label={`Cancel deny ${item.name}`} onClick={() => cancel(item)}>
+            Cancel
+          </Button>
+        </ActionGroup>
+      );
+    }
+    return (
+      <ActionGroup label={`Actions for ${item.name}`} view={view}>
+        <Button
+          role="primary"
+          icon={<Check />}
+          className={full}
+          aria-label={`Approve ${item.name}`}
+          onClick={() => decide(item, "approved")}
+        >
+          Approve
+        </Button>
+        <Button
+          data-focus={`${item.id}-deny`}
+          role="outline"
+          icon={<X />}
+          className={full}
+          aria-label={`Deny ${item.name}`}
+          onClick={() => {
+            setConfirmingId(item.id);
+            setFocusKey(`${item.id}-confirm`);
+          }}
+        >
+          Deny
+        </Button>
+      </ActionGroup>
+    );
+  }
+
+  return (
+    <>
+      <div className="sm:hidden">
+        <p className="mb-3 text-muted">{waiting} waiting on you</p>
+        {items.length === 0 ? (
+          <Card variant="outlined" padding="md">
+            <p className="text-center">Nothing waiting on you</p>
+          </Card>
+        ) : (
+          <ul aria-label="Approvals waiting on you" className="flex flex-col gap-3">
+            {items.map((item) => (
+              <li key={item.id}>
+                <Card variant="outlined" padding="md">
+                  <div className="flex flex-col gap-3">
+                    <div>
+                      <p className="font-medium">{item.name}</p>
+                      <p className="text-muted">
+                        {item.kind} · Waiting {item.waiting}
+                      </p>
+                    </div>
+                    {renderDecision(item, "card")}
+                  </div>
+                </Card>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <div className="hidden sm:block">
+        <Table aria-label="Approvals waiting on you">
+          <TableCaption>{waiting} waiting on you</TableCaption>
+          <colgroup>
+            <col className="w-40" />
+            <col className="w-44" />
+            <col className="w-32" />
+            <col className="w-72" />
+          </colgroup>
+          <TableHeader>
+            <TableRow>
+              <TableHead sticky>Name</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead>Waiting</TableHead>
+              <TableHead>Decision</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {items.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={4} align="center">
+                  Nothing waiting on you
+                </TableCell>
+              </TableRow>
+            ) : (
+              items.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell sticky>{item.name}</TableCell>
+                  <TableCell>{item.kind}</TableCell>
+                  <TableCell>{item.waiting}</TableCell>
+                  <TableCell>{renderDecision(item, "table")}</TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </>
+  );
+}

package/docs/patterns/components-table--basic.tsx

@@ -0,0 +1,60 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — basic table
+// Storybook: Components/Table → Pattern — basic table (?path=/story/components-table--basic)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Badge,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@thewhatmatters/wmds";
+
+export interface PostRow {
+  id: string;
+  title: string;
+  author: string;
+  status: "success" | "warning" | "idle";
+  statusLabel: string;
+  words: string;
+}
+
+export function RecentPosts({ posts, total }: { posts: PostRow[]; total: string }) {
+  return (
+    <Table aria-label="Recent posts">
+      <TableCaption>Posts from the last 30 days</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Post</TableHead>
+          <TableHead>Author</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead align="end">Words</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {posts.map((post) => (
+          <TableRow key={post.id}>
+            <TableCell>{post.title}</TableCell>
+            <TableCell>{post.author}</TableCell>
+            <TableCell>
+              <Badge status={post.status} dot={post.status !== "idle"}>
+                {post.statusLabel}
+              </Badge>
+            </TableCell>
+            <TableCell align="end">{post.words}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell align="end">{total}</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — action details
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — capsules
+// @thewhatmatters/wmds@0.4.28 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Pattern — card + status rows
+// @thewhatmatters/wmds@0.4.28 · 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.