@thewhatmatters/wmds 0.4.8 → 0.4.27

package/docs/patterns/components-appshell--portal-dashboard-pattern.tsx

@@ -0,0 +1,176 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — portal dashboard
+// Storybook: Components/AppShell → Pattern — portal dashboard (?path=/story/components-appshell--portal-dashboard-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+"use client";
+
+import { useState, useSyncExternalStore } from "react";
+import { ChartColumn, Download, FileText, FolderOpen, LayoutDashboard, Megaphone, Settings, Users } from "lucide-react";
+import {
+  AppShell,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  DescriptionList,
+  DisplayControls,
+  NavList,
+  Stat,
+  TaskRows,
+  commitDisplayTheme,
+  readDisplayTheme,
+  subscribeDisplayTheme,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardLayoutBodyOccupantPadYClasses,
+  cardTitleClasses,
+  type DisplayControlThemeMode,
+  type NavListSectionDef,
+  type TaskRowsColumn,
+} from "@thewhatmatters/wmds";
+
+const sections: NavListSectionDef[] = [
+  {
+    items: [
+      { id: "dashboard", label: "Dashboard", icon: <LayoutDashboard strokeWidth={1.75} /> },
+      { id: "campaigns", label: "Campaigns", icon: <Megaphone strokeWidth={1.75} />, count: 12 },
+      { id: "creators", label: "Creators", icon: <Users strokeWidth={1.75} /> },
+      { id: "reports", label: "Reports", icon: <ChartColumn strokeWidth={1.75} /> },
+    ],
+  },
+  {
+    label: "Workspace",
+    items: [
+      { id: "library", label: "Library", icon: <FolderOpen strokeWidth={1.75} /> },
+      { id: "invoices", label: "Invoices", icon: <FileText strokeWidth={1.75} /> },
+      { id: "settings", label: "Settings", icon: <Settings strokeWidth={1.75} /> },
+    ],
+  },
+];
+
+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(" ");
+
+function themeServerSnapshot(): DisplayControlThemeMode {
+  return "auto";
+}
+
+interface PortalDashboardProps {
+  defaultSidebarOpen?: boolean;
+  defaultAsideOpen?: boolean;
+}
+
+export function PortalDashboard({
+  defaultSidebarOpen = true,
+  defaultAsideOpen = false,
+}: PortalDashboardProps) {
+  const [activeId, setActiveId] = useState("dashboard");
+  const [asideOpen, setAsideOpen] = useState(defaultAsideOpen);
+  const theme = useSyncExternalStore(subscribeDisplayTheme, readDisplayTheme, themeServerSnapshot);
+
+  return (
+    <AppShell
+      title="Dashboard"
+      defaultSidebarOpen={defaultSidebarOpen}
+      asideOpen={asideOpen}
+      onAsideOpenChange={setAsideOpen}
+      asideTitle="Stir in strength"
+      asideDescription="Campaign details"
+      brand={
+        <>
+          <Avatar name="WhatMatters" size="sm" />
+          <span className="type-label text-fg">WhatMatters</span>
+        </>
+      }
+      sidebar={
+        <NavList
+          aria-label="Portal"
+          className="w-full"
+          sections={sections}
+          activeId={activeId}
+          onSelect={setActiveId}
+        />
+      }
+      sidebarFooter={
+        <div className="flex items-center justify-between gap-3">
+          <span className="type-label">Appearance</span>
+          <DisplayControls
+            controls="theme"
+            aria-label="Appearance"
+            theme={theme}
+            onThemeChange={commitDisplayTheme}
+          />
+        </div>
+      }
+      header={
+        <>
+          <Button role="secondary" size="sm" icon={<Download strokeWidth={2} />} className="max-sm:!hidden">
+            Export
+          </Button>
+          <Button role="primary" size="sm" onClick={() => setAsideOpen(true)}>
+            Details
+          </Button>
+        </>
+      }
+      aside={
+        <DescriptionList rule="dotted">
+          <DescriptionList.Item name="Status">
+            <Badge status="success" dot>Active · day 41</Badge>
+          </DescriptionList.Item>
+          <DescriptionList.Item name="Creators">22</DescriptionList.Item>
+          <DescriptionList.Item name="Waiting">4 over 5 days</DescriptionList.Item>
+          <DescriptionList.Item name="Live posts">49</DescriptionList.Item>
+        </DescriptionList>
+      }
+    >
+      <div className="grid gap-6">
+        <Stat.Group aria-label="Key figures" columns={4}>
+          <Stat label="Live posts" value="49" trend={{ value: "+12.5%", direction: "up" }} context="vs 43 last month" />
+          <Stat label="Creators" value="128" trend={{ value: "+4.1%", direction: "up" }} context="vs 123 last month" />
+          <Stat label="Reach" value="256K" trend={{ value: "-1.2%", direction: "down" }} context="vs 259K last month" />
+          <Stat label="Waiting on you" value="26" trend={{ value: "0%", direction: "neutral" }} context="across 3 campaigns" />
+        </Stat.Group>
+        <section aria-labelledby="needs-you-heading">
+          <Card>
+            <Card.Header start={<h2 id="needs-you-heading" 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="Summer launch"
+                    href="/campaigns/summer"
+                    status={{ tone: "destructive", label: "Paused · 9d" }}
+                    waiting={{ label: "9 creators", detail: "brief needs approval" }}
+                    metric={{ value: "3", detail: "none this week" }}
+                  />
+                </TaskRows>
+              </div>
+            </Card.Body>
+          </Card>
+        </section>
+      </div>
+    </AppShell>
+  );
+}

package/docs/patterns/components-avatar--dropdown-row.tsx

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

package/docs/patterns/components-badge--outline-tags.tsx

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

package/docs/patterns/components-badge--status-pill.tsx

@@ -0,0 +1,31 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — status pill
+// Storybook: Components/Badge → Pattern — status pill (?path=/story/components-badge--status-pill)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Badge } from "@thewhatmatters/wmds";
+import { Calendar, CircleCheck } from "lucide-react";
+
+export function RoutineStatus() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge status="active" dot>
+        Active
+      </Badge>
+      <Badge status="idle" icon={<Calendar strokeWidth={2} />}>
+        Every 2 days
+      </Badge>
+      <Badge status="idle" icon={<CircleCheck strokeWidth={2} />}>
+        Last checked 1d ago
+      </Badge>
+      <Badge status="success" dot>
+        Succeeded
+      </Badge>
+      <Badge status="failed" dot>
+        Failed
+      </Badge>
+      <Badge status="warning" dot>
+        Needs a look
+      </Badge>
+    </div>
+  );
+}

package/docs/patterns/components-badge--with-avatar.tsx

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

package/docs/patterns/components-breadcrumb--editorial.tsx

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

package/docs/patterns/components-breadcrumb--long-path.tsx

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

package/docs/patterns/components-breadcrumb--path.tsx

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

package/docs/patterns/components-breadcrumb--router-links.tsx

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

package/docs/patterns/components-button-button--copy-button.tsx

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

package/docs/patterns/components-button-button--destructive-action.tsx

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

package/docs/patterns/components-button-button--external-link.tsx

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

package/docs/patterns/components-button-button--ghost-action.tsx

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

package/docs/patterns/components-button-button--inverse-action.tsx

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

package/docs/patterns/components-button-button--link-render.tsx

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

package/docs/patterns/components-button-button--multi-state-badge.tsx

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

package/docs/patterns/components-button-button--outline-mono.tsx

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

package/docs/patterns/components-button-button--primary-action.tsx

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

package/docs/patterns/components-button-button--row-hug.tsx

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

package/docs/patterns/components-button-button--row-layout.tsx

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

package/docs/patterns/components-button-button--secondary-action.tsx

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

package/docs/patterns/components-button-button--suggestion-pills.tsx

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

package/docs/patterns/components-button-button--with-count.tsx

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

package/docs/patterns/components-button-button--with-icon.tsx

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

package/docs/patterns/components-button-floatingactionbutton--vertical-actions.tsx

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

package/docs/patterns/components-calembed--pattern-skip-in-footer.tsx

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

package/docs/patterns/components-card-card--body-slot-occupancy-history.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Example — body slot (occupancy history)
+// @thewhatmatters/wmds@0.4.27 · Example — body slot (occupancy history)
 // Storybook: Components/Card/Card → Example — body slot (occupancy history) (?path=/story/components-card-card--body-slot-occupancy-history)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--headerless-media.tsx

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

package/docs/patterns/components-card-card--outlined-layout.tsx

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

package/docs/patterns/components-card-card--pinned-height.tsx

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

package/docs/patterns/components-card-card--terminal-frame.tsx

@@ -0,0 +1,48 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — terminal frame
+// Storybook: Components/Card/Card → Pattern — terminal frame (?path=/story/components-card-card--terminal-frame)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Card,
+  cardTitleClasses,
+} from "@thewhatmatters/wmds";
+
+const terminalPreview =
+  '<!doctype html><html><body style="margin:0;background:#262626;color:#fafafa;font:14px ui-monospace,monospace;padding:16px">$ scan --target etheris<br>12 findings</body></html>';
+
+export function TerminalFrames() {
+  return (
+    <div className="grid w-full max-w-3xl gap-4">
+      <section>
+        <Card padding="none">
+        <Card.Header start={<h2 className={cardTitleClasses}>Session</h2>} />
+        <Card.Body
+          variant="terminal"
+          title="session.log"
+          srcDoc={terminalPreview}
+          height="sm"
+          readOnly
+        />
+      </Card>
+      </section>
+      <section>
+        <Card padding="none">
+        <Card.Header start={<h2 className={cardTitleClasses}>Loading</h2>} />
+        <Card.Body variant="terminal" title="session.log" height="sm" state="loading" />
+      </Card>
+      </section>
+      <section>
+        <Card padding="none">
+        <Card.Header start={<h2 className={cardTitleClasses}>Offline</h2>} />
+        <Card.Body
+          variant="terminal"
+          title="session.log"
+          height="sm"
+          state="disconnected"
+          message="Session disconnected"
+        />
+      </Card>
+      </section>
+    </div>
+  );
+}

package/docs/patterns/components-card-selectablecard--selectable-cards-pattern.tsx

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

package/docs/patterns/components-carousel--image-carousel.tsx

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

package/docs/patterns/components-chart--audience-activity-heatmap.tsx

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

package/docs/patterns/components-chart--cartesian-no-data-gaps.tsx

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

package/docs/patterns/components-chart--occupancy-history-in-card.tsx

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

package/docs/patterns/components-chart--occupancy-in-card.tsx

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

package/docs/patterns/components-chart--post-reach-distribution.tsx

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

package/docs/patterns/components-chart--ranked-audience-breakdown.tsx

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

package/docs/patterns/components-chart--revenue-by-line.tsx

@@ -0,0 +1,68 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — revenue by line
+// Storybook: Components/Chart → Pattern — revenue by line (?path=/story/components-chart--revenue-by-line)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import {
+  Card,
+  Chart,
+  Stat,
+  cardLayoutBodyOccupantInsetXClasses,
+  cardLayoutBodyOccupantPadYClasses,
+  cardLayoutBodyOccupantWellClasses,
+  cardTitleClasses,
+  chartSeriesConfigFromTone,
+  type ChartCartesianPoint,
+} from "@thewhatmatters/wmds";
+
+const config = chartSeriesConfigFromTone("revenue", "Revenue", "primary");
+
+const data: ChartCartesianPoint[] = [
+  { date: new Date(2026, 0, 1), revenue: 18420 },
+  { date: new Date(2026, 1, 1), revenue: 22100 },
+  { date: new Date(2026, 2, 1), revenue: 19840 },
+  { date: new Date(2026, 3, 1), revenue: 24610 },
+  { date: new Date(2026, 4, 1), revenue: 27330 },
+  { date: new Date(2026, 5, 1), revenue: 26150 },
+];
+
+export function RevenueByLine() {
+  return (
+    <div className="flex w-full max-w-5xl flex-col gap-6">
+      <section>
+        <Card>
+        <Card.Header start={<h2 className={cardTitleClasses}>Revenue by line</h2>} />
+        <Card.Body>
+          <div
+            className={`grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_16rem] ${cardLayoutBodyOccupantPadYClasses} ${cardLayoutBodyOccupantWellClasses} ${cardLayoutBodyOccupantInsetXClasses}`}
+          >
+            <Chart.Cartesian
+              data={data}
+              config={config}
+              seriesKeys={["revenue"]}
+              periodKind="month"
+              minHeight={220}
+              animate="none"
+              aria-label="Revenue by month"
+            />
+            <div className="grid grid-cols-2 gap-4 lg:grid-cols-1">
+              <Stat label="Subscriptions" value="$42,180" trend={{ value: "+12%", direction: "up" }} />
+              <Stat label="Services" value="$18,640" trend={{ value: "-3%", direction: "down" }} />
+              <Stat label="Licenses" value="$9,210" trend={{ value: "0%", direction: "neutral" }} />
+            </div>
+          </div>
+        </Card.Body>
+        </Card>
+      </section>
+      <section>
+        <Card>
+        <Card.Header start={<h2 className={cardTitleClasses}>Revenue by line</h2>} />
+        <Card.Body>
+          <p className="type-body text-muted px-4 py-6" role="status">
+            Revenue by line is not wired
+          </p>
+        </Card.Body>
+        </Card>
+      </section>
+    </div>
+  );
+}