@thewhatmatters/wmds 0.4.8 → 0.4.27

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

@@ -0,0 +1,223 @@
+// @thewhatmatters/wmds@0.4.27 · 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.27 · 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.8 · Pattern — action details
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — capsules
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — card + status rows
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — controlled expand
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — custom leading / trailing
+// @thewhatmatters/wmds@0.4.27 · 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.
 

package/docs/patterns/components-taskrows--needs-you-table.tsx

@@ -0,0 +1,62 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — needs you
+// Storybook: Components/TaskRows → Pattern — needs you (?path=/story/components-taskrows--needs-you-table)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Card, TaskRows, cardLayoutBodyOccupantInsetXClasses, cardLayoutBodyOccupantPadYClasses, cardTitleClasses, type TaskRowsColumn } from "@thewhatmatters/wmds";
+
+const columns: TaskRowsColumn[] = [
+  { id: "title", header: "Campaign" },
+  { id: "waiting", header: "Waiting on you" },
+  { id: "metric", header: "Live posts", align: "end" },
+];
+
+const wellClasses = [
+  "flex flex-col",
+  cardLayoutBodyOccupantPadYClasses,
+  cardLayoutBodyOccupantInsetXClasses,
+].join(" ");
+
+export function CampaignsThatNeedYou() {
+  return (
+    <div className="grid w-full gap-6">
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Campaigns that need you</h2>} />
+        <Card.Body>
+          <div className={wellClasses}>
+            <TaskRows variant="table" columns={columns} empty="Nothing waiting">
+              <TaskRows.Row
+                title="Stir in strength"
+                href="/campaigns/stir"
+                status={{ tone: "success", label: "Active · day 41" }}
+                waiting={{ label: "22 creators", detail: "4 waiting over 5 days" }}
+                metric={{ value: "49", detail: "12 this week" }}
+              />
+              <TaskRows.Row
+                title="Healthier every day"
+                href="/campaigns/healthier"
+                status={{ tone: "warning", label: "Open · 2d" }}
+                waiting={{ label: "4 creators", detail: "all within 48h target" }}
+                metric={{ value: "10", detail: "2 this week" }}
+              />
+              <TaskRows.Row title="Outreach" source="unwired" note="Outreach is not connected" />
+              <TaskRows.Row title="Matching" source="loading" />
+              <TaskRows.Row title="Brand settings" source="error" note="Could not load this source" />
+            </TaskRows>
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Caught up</h2>} />
+        <Card.Body>
+          <div className={wellClasses}>
+            <TaskRows variant="table" columns={columns} empty="Nothing waiting" />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+    </div>
+  );
+}

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

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

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — tag chips
+// @thewhatmatters/wmds@0.4.27 · 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.
 

package/docs/patterns/components-textarea--save-status.tsx

@@ -0,0 +1,32 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — save status
+// Storybook: Components/TextArea → Pattern — save status (?path=/story/components-textarea--save-status)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+import { useEffect, useState } from "react";
+import { TextArea } from "@thewhatmatters/wmds";
+
+export function NotesField() {
+  const [value, setValue] = useState("");
+  const [saveState, setSaveState] = useState<"idle" | "saving" | "saved">("idle");
+
+  useEffect(() => {
+    if (saveState !== "saving") return;
+    const timer = setTimeout(() => setSaveState("saved"), 600);
+    return () => clearTimeout(timer);
+  }, [saveState, value]);
+
+  return (
+    <TextArea
+      label="Notes"
+      description="Saved automatically as you type."
+      value={value}
+      onChange={(event) => {
+        setValue(event.target.value);
+        setSaveState("saving");
+      }}
+      liveStatus={saveState === "saving" ? "Saving…" : saveState === "saved" ? "Saved" : ""}
+    />
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — external destination
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — inline prose link
+// @thewhatmatters/wmds@0.4.27 · 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.
 

package/docs/patterns/components-textlink--quiet-title.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — quiet title link
+// @thewhatmatters/wmds@0.4.27 · Pattern — quiet title link
 // Storybook: Components/TextLink → Pattern — quiet title link (?path=/story/components-textlink--quiet-title)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — supporting copy link
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Default
+// @thewhatmatters/wmds@0.4.27 · Default
 // Storybook: Components/TextSequence → Default (?path=/story/components-textsequence--default)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Reduced motion
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Shapes
+// @thewhatmatters/wmds@0.4.27 · Shapes
 // Storybook: Components/TextSequence → Shapes (?path=/story/components-textsequence--shapes)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-tilegrid--masonry.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — tile grid
+// @thewhatmatters/wmds@0.4.27 · Pattern — tile grid
 // Storybook: Components/TileGrid → Pattern — tile grid (?path=/story/components-tilegrid--masonry)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — stacked notifications
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — controlled state
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — disabled control
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — icon-only action
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — keyboard shortcut
+// @thewhatmatters/wmds@0.4.27 · 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.
 

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

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

package/docs/patterns/foundations-scroll-fade--horizontal-rail.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — horizontal rail
+// @thewhatmatters/wmds@0.4.27 · Pattern — horizontal rail
 // Storybook: Foundations/Scroll fade → Pattern — horizontal rail (?path=/story/foundations-scroll-fade--horizontal-rail)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/foundations-scroll-fade--overflowing-list.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — overflowing list
+// @thewhatmatters/wmds@0.4.27 · Pattern — overflowing list
 // Storybook: Foundations/Scroll fade → Pattern — overflowing list (?path=/story/foundations-scroll-fade--overflowing-list)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/guides-chart-explorations--comparison-gallery.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — chart comparison gallery
+// @thewhatmatters/wmds@0.4.27 · Pattern — chart comparison gallery
 // Storybook: Guides/Chart explorations → Pattern — chart comparison gallery (?path=/story/guides-chart-explorations--comparison-gallery)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/guides-filter-panel--filtered-grid.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — filtered grid
+// @thewhatmatters/wmds@0.4.27 · Pattern — filtered grid
 // Storybook: Guides/Filter panel → Pattern — filtered grid (?path=/story/guides-filter-panel--filtered-grid)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/guides-filter-panel--filtered-index.tsx

@@ -1,8 +1,8 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — filtered index
+// @thewhatmatters/wmds@0.4.27 · Pattern — filtered index
 // Storybook: Guides/Filter panel → Pattern — filtered index (?path=/story/guides-filter-panel--filtered-index)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 
-import { type ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import {
   FilterPanel,
   IndexList,
@@ -41,6 +41,8 @@ export interface FilteredIndexProps {
   selection?: FilterSelection;
   /** Every change: an option on or off, or Clear all. */
   onSelectionChange?: (selection: FilterSelection) => void;
+  /** The router's link for a post's title, in place of a plain anchor — (post) => <Link href={post.href} />. */
+  renderLink?: (post: FilteredPost) => ReactElement;
   /** Page-level layers inside the page grid — for example a GridOverlay. */
   overlay?: ReactNode;
 }
@@ -52,6 +54,7 @@ export function FilteredIndex({
   defaultSelection,
   selection: selectionProp,
   onSelectionChange,
+  renderLink,
   overlay,
 }: FilteredIndexProps) {
   const [selection, setSelection] = useFilterSelection({
@@ -93,7 +96,8 @@ export function FilteredIndex({
                 <IndexList.Item
                   key={post.slug}
                   title={post.title}
-                  href={post.href}
+                  href={renderLink != null ? undefined : post.href}
+                  render={renderLink?.(post)}
                   meta={<time dateTime={post.date}>{post.dateLabel}</time>}
                   preview={<p>{post.description}</p>}
                 />

package/docs/patterns/guides-overlay-flows--notification-preferences.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — notification preferences
+// @thewhatmatters/wmds@0.4.27 · Pattern — notification preferences
 // Storybook: Guides/Overlay flows → Pattern — notification preferences (?path=/story/guides-overlay-flows--notification-preferences)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.