@thewhatmatters/wmds 0.4.9 → 0.4.28

package/docs/patterns/components-dialog--alert-dialog-typed-confirmation.tsx

@@ -0,0 +1,54 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — alert dialog (typed confirmation delete)
+// Storybook: Components/Dialog → Pattern — alert dialog (typed confirmation delete) (?path=/story/components-dialog--alert-dialog-typed-confirmation)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { AlertDialog, Button, Input } from "@thewhatmatters/wmds";
+
+function normalizeHandle(value: string): string {
+  return value.trim().replace(/^@/, "").toLowerCase();
+}
+
+export function DeleteAccountAlert({ handle }: { handle: string }) {
+  const [open, setOpen] = useState(false);
+  const [typed, setTyped] = useState("");
+  const matches = typed.trim() !== "" && normalizeHandle(typed) === normalizeHandle(handle);
+
+  function handleOpenChange(next: boolean) {
+    setOpen(next);
+    if (!next) {
+      setTyped("");
+    }
+  }
+
+  return (
+    <>
+      <Button role="destructive" onClick={() => setOpen(true)}>
+        Delete account
+      </Button>
+      <AlertDialog
+        open={open}
+        onOpenChange={handleOpenChange}
+        title="Delete this account?"
+        description="This removes the account and everything it owns. You cannot undo this action."
+        cancelLabel="Keep account"
+        confirmLabel="Delete account"
+        confirmRole="destructive"
+        confirmDisabled={!matches}
+        onConfirm={() => handleOpenChange(false)}
+      >
+        <Input
+          label={
+            <>
+              Type <strong>{handle}</strong> to confirm
+            </>
+          }
+          value={typed}
+          onChange={(event) => setTyped(event.target.value)}
+          autoComplete="off"
+          spellCheck={false}
+        />
+      </AlertDialog>
+    </>
+  );
+}

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

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

package/docs/patterns/components-dialog--form-dialog.tsx

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

package/docs/patterns/components-displaycontrols--page-utilities.tsx

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

package/docs/patterns/components-displaycontrols--theme-switch.tsx

@@ -0,0 +1,35 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — theme switch
+// Storybook: Components/DisplayControls → Pattern — theme switch (?path=/story/components-displaycontrols--theme-switch)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useSyncExternalStore } from "react";
+import {
+  commitDisplayTheme,
+  DisplayControls,
+  displayThemeNoFlashScript,
+  readDisplayTheme,
+  subscribeDisplayTheme,
+  type DisplayControlThemeMode,
+} from "@thewhatmatters/wmds";
+
+export { displayThemeNoFlashScript };
+
+function themeServerSnapshot(): DisplayControlThemeMode {
+  return "auto";
+}
+
+export function ThemeSwitch() {
+  const theme = useSyncExternalStore(subscribeDisplayTheme, readDisplayTheme, themeServerSnapshot);
+
+  return (
+    <div className="flex w-full max-w-xs items-center justify-between gap-3 rounded-xl border border-border bg-surface p-3">
+      <span className="type-label">Appearance</span>
+      <DisplayControls
+        controls="theme"
+        aria-label="Appearance"
+        theme={theme}
+        onThemeChange={commitDisplayTheme}
+      />
+    </div>
+  );
+}

package/docs/patterns/components-field--horizontal-input.tsx

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

package/docs/patterns/components-field--horizontal-text-area.tsx

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

package/docs/patterns/components-field--multi-control.tsx

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

package/docs/patterns/components-filterpanel--panel.tsx

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

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

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

package/docs/patterns/components-footerreveal--marketing-hero-ruled-pattern.tsx

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

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Marketing hero with gallery intro
+// @thewhatmatters/wmds@0.4.28 · Marketing hero with gallery intro
 // Storybook: Components/FooterReveal → Marketing hero with gallery intro (?path=/story/components-footerreveal--marketing-hero-with-gallery-intro)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.9 · Marketing hero with gallery intro
+// @thewhatmatters/wmds@0.4.28 · 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.
 

package/docs/patterns/components-indexlist--post-index.tsx

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

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

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

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

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

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

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

package/docs/patterns/components-intakeform--short-form-pattern.tsx

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

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

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

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

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

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

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

package/docs/patterns/components-kbd--shortcut.tsx

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

package/docs/patterns/components-linktile--resource-tile.tsx

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

package/docs/patterns/components-linktile--router-link.tsx

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

package/docs/patterns/components-logview--detail-pane.tsx

@@ -0,0 +1,80 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — detail pane
+// Storybook: Components/LogView → Pattern — detail pane (?path=/story/components-logview--detail-pane)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Badge, IconButton, LogView, Stat } from "@thewhatmatters/wmds";
+
+const scans = [
+  {
+    title: "Scan 1842",
+    tags: ["API", "Nightly"],
+    lines: [
+      "09:14:02 connected to etheris",
+      "09:14:08 walking /api/orders",
+      "09:14:21 12 findings",
+      "09:14:22 coverage 76%",
+      "09:16:14 delta +8 vs last scan",
+      "09:18:02 session closed",
+    ],
+  },
+  {
+    title: "Scan 1841",
+    tags: ["API", "Nightly"],
+    lines: ["08:02:11 connected to etheris", "08:06:40 4 findings", "08:07:01 session closed"],
+  },
+];
+
+export function DetailPane() {
+  const [index, setIndex] = useState(0);
+  const [follow, setFollow] = useState(true);
+  const scan = scans[index] ?? scans[0];
+
+  return (
+    <section
+      data-theme="dark"
+      className="flex w-full max-w-3xl flex-col gap-4 bg-body p-4 text-fg"
+      aria-label="Scan detail"
+    >
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="type-heading-2">{scan.title}</h2>
+        <div className="flex gap-2">
+          <IconButton
+            aria-label="Previous scan"
+            icon={<ChevronLeft />}
+            size="sm"
+            disabled={index === 0}
+            onClick={() => setIndex(index - 1)}
+          />
+          <IconButton
+            aria-label="Next scan"
+            icon={<ChevronRight />}
+            size="sm"
+            disabled={index === scans.length - 1}
+            onClick={() => setIndex(index + 1)}
+          />
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {scan.tags.map((tag) => (
+          <Badge key={tag} size="sm" emphasis="outline" mono>
+            {tag}
+          </Badge>
+        ))}
+      </div>
+      <Stat.Group columns={2} aria-label="Scan metrics">
+        <Stat label="Findings" value="12" detail="3 new" />
+        <Stat label="Coverage" value="76%" detail="of 1,000 paths" />
+        <Stat label="Duration" value="4m 12s" detail="started 09:14" />
+        <Stat
+          label="Delta"
+          value="+8"
+          trend={{ value: "+8", direction: "up" }}
+          detail="vs last scan"
+        />
+      </Stat.Group>
+      <LogView label="Scan log" lines={scan.lines} follow={follow} onFollowChange={setFollow} />
+    </section>
+  );
+}

package/docs/patterns/components-logview--log-viewer.tsx

@@ -0,0 +1,20 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — log viewer
+// Storybook: Components/LogView → Pattern — log viewer (?path=/story/components-logview--log-viewer)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { LogView } from "@thewhatmatters/wmds";
+
+const lines = [
+  "09:14:02 connected to etheris",
+  "09:14:08 walking /api/orders",
+  "09:14:21 12 findings",
+  "09:14:22 coverage 76%",
+  "09:16:14 delta +8 vs last scan",
+  "09:18:02 session closed",
+];
+
+export function LogViewer() {
+  const [follow, setFollow] = useState(true);
+  return <LogView label="Scan log" lines={lines} follow={follow} onFollowChange={setFollow} />;
+}

package/docs/patterns/components-moremenu--action-menu.tsx

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

package/docs/patterns/components-moremenu--in-card-header.tsx

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

package/docs/patterns/components-navlist--app-sidebar.tsx

@@ -0,0 +1,118 @@
+// @thewhatmatters/wmds@0.4.28 · Pattern — app sidebar
+// Storybook: Components/NavList → Pattern — app sidebar (?path=/story/components-navlist--app-sidebar)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useState } from "react";
+import { Home, ListFilter, Menu, Package, Plane, Rocket, SunMoon, Utensils } from "lucide-react";
+import {
+  Button,
+  ButtonIcon,
+  IconButton,
+  NavList,
+  PageHeader,
+  Search,
+  Sheet,
+  Status,
+  type NavListSectionDef,
+} from "@thewhatmatters/wmds";
+
+const sections: NavListSectionDef[] = [
+  {
+    label: "Pinned",
+    labelAlign: "section",
+    action: (
+      <IconButton role="ghost" size="xs" aria-label="Filter pinned" icon={<ListFilter strokeWidth={2} />} />
+    ),
+    items: [
+      { id: "melbourne", label: "Weekend in Melbourne", href: "/tasks/melbourne", icon: <Plane strokeWidth={1.75} /> },
+      {
+        id: "apartment",
+        label: "Find a new apartment",
+        href: "/tasks/apartment",
+        icon: <Home strokeWidth={1.75} />,
+        trailing: <Status variant="dot" tone="warning" label="Unread" />,
+      },
+      { id: "dinner", label: "Plan team dinner", href: "/tasks/dinner", icon: <Utensils strokeWidth={1.75} /> },
+    ],
+  },
+  {
+    label: "Recent",
+    labelAlign: "section",
+    items: [
+      {
+        id: "ikea",
+        label: "Track my IKEA order",
+        href: "/tasks/ikea",
+        icon: <Package strokeWidth={1.75} />,
+        trailing: <Status variant="dot" tone="warning" label="Unread" pulsing />,
+      },
+    ],
+  },
+];
+
+function SidebarBody({
+  activeId,
+  onSelect,
+}: {
+  activeId: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="flex h-full min-h-0 w-52 flex-col bg-body">
+      <div className="flex items-center gap-2 px-4 py-4">
+        <span className="inline-flex size-7 items-center justify-center rounded-lg bg-brand-tint text-brand-outline">
+          <ButtonIcon size="xs"><Rocket strokeWidth={2} /></ButtonIcon>
+        </span>
+        <span className="type-label text-fg">Orbit</span>
+      </div>
+      <div className="px-3 pb-2">
+        <Search size="sm" actionLabel="Search" aria-label="Search tasks" placeholder="Search" />
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <NavList aria-label="Tasks" sections={sections} activeId={activeId} onSelect={onSelect} />
+      </div>
+      <div className="mt-auto px-2 py-2">
+        <Button role="ghost" size="sm" align="start" className="w-full" icon={<SunMoon strokeWidth={2} />}>
+          Appearance
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function AppSidebar() {
+  const [open, setOpen] = useState(false);
+  const [activeId, setActiveId] = useState("ikea");
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col bg-body lg:flex-row">
+      <div className="max-lg:hidden h-full lg:block">
+        <SidebarBody activeId={activeId} onSelect={setActiveId} />
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <PageHeader
+          variant="app"
+          className="lg:hidden"
+          title="Overview"
+          start={
+            <IconButton
+              role="ghost"
+              size="sm"
+              aria-label="Open menu"
+              icon={<Menu strokeWidth={2} />}
+              onClick={() => setOpen(true)}
+            />
+          }
+        />
+        <div className="max-lg:hidden px-4 py-6 lg:block">
+          <PageHeader variant="page" title="Overview" />
+        </div>
+      </div>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <Sheet.Content side="start" title="Menu">
+          <SidebarBody activeId={activeId} onSelect={setActiveId} />
+        </Sheet.Content>
+      </Sheet>
+    </div>
+  );
+}

package/docs/patterns/components-navlist--side-nav-settings.tsx

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

package/docs/patterns/components-pageheader--app-header-pattern.tsx

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

package/docs/patterns/components-pageheader--page-section-header.tsx

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

package/docs/patterns/components-pageheader--toolbar-header.tsx

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

package/docs/patterns/components-panel--end-detail-rail.tsx

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

package/docs/patterns/components-pillgroup--pill-group-pattern.tsx

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

package/docs/patterns/components-promptbar--pattern-prompt-bar.tsx

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

package/docs/patterns/components-prose--article-body.tsx

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

package/docs/patterns/components-radio-radiogroup--default.tsx

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

package/docs/patterns/components-scrollhorizontal--project-gallery-pattern.tsx

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

package/docs/patterns/components-scrollhorizontal--with-intro.tsx

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

package/docs/patterns/components-sectioncaption--column-caption.tsx

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

package/docs/patterns/components-sectioncaption--with-action.tsx

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