@thewhatmatters/wmds 0.4.8 → 0.4.27

package/docs/patterns/components-chart--segmented-ring-pattern.tsx

@@ -0,0 +1,144 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — segmented ring
+// Storybook: Components/Chart → Pattern — segmented ring (?path=/story/components-chart--segmented-ring-pattern)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Card, Chart, cardLayoutBodyOccupantInsetXClasses, cardLayoutBodyOccupantPadYClasses, cardTitleClasses, chartSeriesColor, type ChartSeriesConfig } from "@thewhatmatters/wmds";
+
+const channelLegend: ChartSeriesConfig = {
+  widget: {
+    label: "Chat widget",
+    color: chartSeriesColor(0),
+    value: "1,569",
+    percent: "46%",
+    delta: { label: "+8%", direction: "up" },
+  },
+  email: {
+    label: "Email",
+    color: chartSeriesColor(1),
+    value: "921",
+    percent: "27%",
+    delta: { label: "-3%", direction: "down" },
+  },
+  whatsapp: {
+    label: "WhatsApp",
+    color: chartSeriesColor(2),
+    value: "580",
+    percent: "17%",
+    delta: { label: "+21%", direction: "up" },
+  },
+  slack: {
+    label: "Slack Connect",
+    color: chartSeriesColor(3),
+    value: "342",
+    percent: "10%",
+    delta: { label: "+2%", direction: "up" },
+  },
+};
+
+const ringWellClasses = [
+  "flex w-full flex-col items-center gap-6",
+  cardLayoutBodyOccupantPadYClasses,
+  cardLayoutBodyOccupantInsetXClasses,
+].join(" ");
+
+export function SegmentedRingExamples() {
+  return (
+    <div className="grid w-full gap-6 lg:grid-cols-2">
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Channels</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={2842}
+              max={3412}
+              tone="primary"
+              size="lg"
+              centerValue="3,412"
+              centerLabel="conversations"
+              label="3,412 conversations"
+              animate="none"
+            />
+            <Chart.Legend variant="tabular" config={channelLegend} className="w-full" />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Weekly goals</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={38}
+              max={100}
+              tone="primary"
+              size="md"
+              centerValue="38%"
+              centerLabel="of weekly goals"
+              label="Weekly goals 38%"
+              animate="none"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Over capacity</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={128}
+              max={100}
+              tone="primary"
+              size="md"
+              centerValue="128%"
+              centerLabel="of goal"
+              label="Goal 128%"
+              animate="none"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Empty</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={0}
+              max={3412}
+              tone="primary"
+              size="md"
+              centerValue="0"
+              centerLabel="conversations"
+              label="0 conversations"
+              animate="none"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+      <section>
+        <Card shape="rounded">
+        <Card.Header start={<h2 className={cardTitleClasses}>Not connected</h2>} />
+        <Card.Body>
+          <div className={ringWellClasses}>
+            <Chart.SegmentedRing
+              value={0}
+              max={100}
+              tone="primary"
+              size="md"
+              unavailable={{ reason: "Source is not connected" }}
+              label="Conversations"
+              animate="none"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+      </section>
+    </div>
+  );
+}

package/docs/patterns/components-chart--unit-grid-composition.tsx

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

package/docs/patterns/components-chatdock--pattern-chat-dock.tsx

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

package/docs/patterns/components-chatdock--pattern-start-project-gate.tsx

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

package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — Q&A with reply
+// @thewhatmatters/wmds@0.4.27 · Pattern — Q&A with reply
 // Storybook: Components/ChatQa → Pattern — Q&A with reply (?path=/story/components-chatqa--pattern-qa-with-reply)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

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

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

package/docs/patterns/components-checkbox-checkbox--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/Checkbox/Checkbox → Pattern — with count (?path=/story/components-checkbox-checkbox--with-count)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkbox--with-description.tsx

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

package/docs/patterns/components-checkbox-checkboxgroup--default.tsx

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

package/docs/patterns/components-checkbox-checkboxgroup--option-counts.tsx

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

package/docs/patterns/components-copyfield--clipboard-blocked.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — clipboard blocked
+// Storybook: Components/CopyField → Pattern — clipboard blocked (?path=/story/components-copyfield--clipboard-blocked)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { CopyField } from "@thewhatmatters/wmds";
+
+export function UnlockKeyBlocked({ apiKey }: { apiKey: string }) {
+  return <CopyField label="API key" value={apiKey} state="fallback" />;
+}

package/docs/patterns/components-copyfield--copied.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — copied
+// Storybook: Components/CopyField → Pattern — copied (?path=/story/components-copyfield--copied)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { CopyField } from "@thewhatmatters/wmds";
+
+export function UnlockKeyCopied({ apiKey }: { apiKey: string }) {
+  return <CopyField label="API key" value={apiKey} state="copied" />;
+}

package/docs/patterns/components-copyfield--copy-key.tsx

@@ -0,0 +1,9 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — copy key
+// Storybook: Components/CopyField → Pattern — copy key (?path=/story/components-copyfield--copy-key)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { CopyField } from "@thewhatmatters/wmds";
+
+export function UnlockKey({ apiKey }: { apiKey: string }) {
+  return <CopyField label="API key" value={apiKey} />;
+}

package/docs/patterns/components-copyfield--on-navy.tsx

@@ -0,0 +1,29 @@
+// @thewhatmatters/wmds@0.4.27 · Pattern — on a navy field
+// Storybook: Components/CopyField → Pattern — on a navy field (?path=/story/components-copyfield--on-navy)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { Button, CopyField } from "@thewhatmatters/wmds";
+
+export function UnlockOnBrand({
+  apiKey,
+  onContinue,
+  onSecondary,
+}: {
+  apiKey: string;
+  onContinue: () => void;
+  onSecondary: () => void;
+}) {
+  return (
+    <section className="flex w-full flex-col gap-4 bg-brand px-6 py-8 text-on-brand">
+      <CopyField label="API key" value={apiKey} />
+      <div className="flex flex-wrap gap-2">
+        <Button role="inverse" type="button" onClick={onContinue}>
+          Continue
+        </Button>
+        <Button role="inverse-outline" type="button" onClick={onSecondary}>
+          Back
+        </Button>
+      </div>
+    </section>
+  );
+}

package/docs/patterns/components-descriptionlist--details.tsx

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

package/docs/patterns/components-descriptionlist--post-metadata.tsx

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

package/docs/patterns/components-dialog--alert-dialog-destructive.tsx

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

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.8 · Pattern — dialog
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — form dialog
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — page display controls
+// @thewhatmatters/wmds@0.4.27 · 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.27 · 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.8 · Pattern — horizontal input
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — horizontal textarea
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — multi-control
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — filter panel
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — marketing hero
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — marketing hero ruled grid
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Marketing hero with gallery intro
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — marketing page
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — ruled grid footer
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — marketing hero with sequenced gallery
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — two-line intro
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — marketing hero
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — marketing hero text sequence
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Marketing hero with gallery intro
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — post index
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — booked
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — emailed
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — about you
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — short form
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — intake modal
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — command row
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — numbered choice keys
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — keyboard shortcut
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — resource tile
+// @thewhatmatters/wmds@0.4.27 · 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.8 · Pattern — router link
+// @thewhatmatters/wmds@0.4.27 · 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.27 · 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>
+  );
+}