@thewhatmatters/wmds 0.4.0 → 0.4.1

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Example — body slot (occupancy history)
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — headerless media
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — outlined layout
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — pinned height
+// @thewhatmatters/wmds@0.4.1 · 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-selectablecard--selectable-cards-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — selectable cards
+// @thewhatmatters/wmds@0.4.1 · 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-chart--audience-activity-heatmap.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — matrix heatmap
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — Cartesian no-data gaps
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — occupancy history in Card
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — occupancy KPI in Card
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — distribution strip
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — ranked audience breakdown
+// @thewhatmatters/wmds@0.4.1 · 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--unit-grid-composition.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — 100-unit composition
+// @thewhatmatters/wmds@0.4.1 · 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,10 +1,19 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — chat dock
+// @thewhatmatters/wmds@0.4.1 · 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.
 
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 import { ArrowRight, CalendarClock, DollarSign } from "lucide-react";
-import { Avatar, ChatDock, type ChatDockMessage, type ChatDockSuggestion } from "@thewhatmatters/wmds";
+import {
+  Avatar,
+  ChatDock,
+  ChatQa,
+  type ChatDockFeedback,
+  type ChatDockMessage,
+  type ChatDockMessageMeta,
+  type ChatDockSuggestion,
+  type ChatQaPair,
+} from "@thewhatmatters/wmds";
 
 const suggestions: ChatDockSuggestion[] = [
   {
@@ -22,30 +31,100 @@ const suggestions: ChatDockSuggestion[] = [
   { id: "start", label: "Start a project", icon: <ArrowRight /> },
 ];
 
+/** What the assistant knows when it opens Start a project — services and budget, or nothing yet. */
+export interface StartProjectRequest {
+  services?: string[];
+  budget?: string;
+}
+
+/**
+ * What `ask` resolves with: the reply, or the reply with its follow-ups, its score, the text Copy
+ * copies, and a Start a project request when the assistant opens the gate.
+ */
+export type AskWhatMattersResult =
+  | string
+  | {
+      reply: string;
+      followUps?: ChatDockSuggestion[];
+      meta?: ChatDockMessageMeta;
+      copyText?: string;
+      startProject?: StartProjectRequest;
+    };
+
+/** What the Start a project gate gets: the request, and how to close or complete it. */
+export interface StartProjectGateSlot {
+  request: StartProjectRequest;
+  close: () => void;
+  complete: (answers: ChatQaPair[], confirmation: string) => void;
+}
+
 export interface AskWhatMattersProps {
-  /** The app's assistant request. Resolves with the reply. */
-  ask: (prompt: string, history: ChatDockMessage[]) => Promise<string>;
-  /** Opens the Start a project intake. */
-  onStartProject: () => void;
+  /** The app's assistant request. Resolves with the reply, and with its follow-ups, score, copy text, or a Start a project request. */
+  ask: (prompt: string, history: ChatDockMessage[]) => Promise<AskWhatMattersResult>;
+  /** The visitor voted on a reply, or cleared their vote (`null`). */
+  onFeedback: (reply: ChatDockMessage, value: ChatDockFeedback) => void;
+  /** Start a project is open while this is set: what the assistant already knows, or `{}`. A site button can set it too. */
+  startProject: StartProjectRequest | null;
+  onStartProjectChange: (request: StartProjectRequest | null) => void;
+  /** The gate — return **Pattern — start a project gate** with the slot spread onto it. */
+  renderStartProject: (slot: StartProjectGateSlot) => ReactNode;
 }
 
-export function AskWhatMatters({ ask, onStartProject }: AskWhatMattersProps) {
+export function AskWhatMatters({
+  ask,
+  onFeedback,
+  startProject,
+  onStartProjectChange,
+  renderStartProject,
+}: AskWhatMattersProps) {
   const [messages, setMessages] = useState<ChatDockMessage[]>([]);
   const [thinking, setThinking] = useState(false);
+  const [followUps, setFollowUps] = useState<ChatDockSuggestion[]>([]);
 
   async function handleSend(prompt: string) {
     const question: ChatDockMessage = { id: crypto.randomUUID(), role: "user", content: prompt };
     const history = [...messages, question];
     setMessages(history);
+    setFollowUps([]);
     setThinking(true);
     try {
-      const reply = await ask(prompt, history);
-      setMessages((current) => [...current, { id: crypto.randomUUID(), role: "assistant", content: reply }]);
+      const result = await ask(prompt, history);
+      const answer: Exclude<AskWhatMattersResult, string> = typeof result === "string" ? { reply: result } : result;
+      setMessages((current) => [
+        ...current,
+        {
+          id: crypto.randomUUID(),
+          role: "assistant",
+          content: answer.reply,
+          copyText: answer.copyText ?? answer.reply,
+          meta: answer.meta,
+          feedback: null,
+        },
+      ]);
+      setFollowUps(answer.followUps ?? []);
+      if (answer.startProject != null) onStartProjectChange(answer.startProject);
     } finally {
       setThinking(false);
     }
   }
 
+  function handleFeedback(reply: ChatDockMessage, value: ChatDockFeedback) {
+    setMessages((current) =>
+      current.map((message) => (message.id === reply.id ? { ...message, feedback: value } : message)),
+    );
+    onFeedback(reply, value);
+  }
+
+  function completeStartProject(answers: ChatQaPair[], confirmation: string) {
+    setMessages((current) => [
+      ...current,
+      { id: crypto.randomUUID(), role: "assistant", content: <ChatQa pairs={answers} aria-label="Your project" /> },
+      { id: crypto.randomUUID(), role: "assistant", content: confirmation },
+    ]);
+    setFollowUps([]);
+    onStartProjectChange(null);
+  }
+
   return (
     <ChatDock
       title="WhatMatters"
@@ -55,12 +134,23 @@ export function AskWhatMatters({ ask, onStartProject }: AskWhatMattersProps) {
       messages={messages}
       thinking={thinking}
       suggestions={suggestions}
+      followUps={followUps}
       onSend={(prompt) => {
         void handleSend(prompt);
       }}
       onSuggestionSelect={(suggestion) => {
-        if (suggestion.id === "start") onStartProject();
+        if (suggestion.id === "start") onStartProjectChange({});
       }}
+      onMessageFeedback={handleFeedback}
+      gate={
+        startProject == null
+          ? undefined
+          : renderStartProject({
+              request: startProject,
+              close: () => onStartProjectChange(null),
+              complete: completeStartProject,
+            })
+      }
       placeholder="Ask anything about WhatMatters"
       disclaimer="Answers may be incomplete · AI assistant by WhatMatters"
     />

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

@@ -0,0 +1,180 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { useId, useRef, useState, type ReactNode } from "react";
+import {
+  CalEmbed,
+  ChatDock,
+  Checkbox,
+  IntakeForm,
+  Kbd,
+  Radio,
+  intakeAboutEmpty,
+  isIntakeAboutValid,
+  useConfetti,
+  useKbdChoiceKeys,
+  type ChatQaPair,
+  type IntakeAboutValues,
+} from "@thewhatmatters/wmds";
+
+const services = [
+  { value: "brand", label: "Brand identity" },
+  { value: "web", label: "Web experiences" },
+  { value: "mobile", label: "Mobile apps" },
+  { value: "social", label: "Social media" },
+  { value: "content", label: "Content and copy" },
+  { value: "ai", label: "AI assistants" },
+  { value: "growth", label: "Launch, growth, and care" },
+];
+
+const budgets = [
+  { value: "under-10", label: "Under $10k" },
+  { value: "10-25", label: "$10–25k" },
+  { value: "25-50", label: "$25–50k" },
+  { value: "50-plus", label: "$50k+" },
+  { value: "unsure", label: "Not sure yet" },
+];
+
+const steps = [
+  { title: "Name the work", subtitle: "What are we making? Choose all that apply." },
+  { title: "What's the budget?", subtitle: "A range is enough. We can tighten it after the first call." },
+  { title: "About you", subtitle: "A few sentences is enough. We'll reply to the email you leave here." },
+  { title: "Book a call", subtitle: "Pick a time, or skip this and we'll write to you instead." },
+];
+
+/** What the visitor told the gate — the app sends it. */
+export interface StartProjectIntake {
+  services: string[];
+  budget: string | null;
+  about: IntakeAboutValues;
+  followUp: "call" | "email";
+}
+
+export interface StartProjectGateProps {
+  /** What the assistant already picked up from the conversation, or `{}`. */
+  request: { services?: string[]; budget?: string };
+  /** Closes the gate — Cancel, Close, or Escape. */
+  close: () => void;
+  /** Ends the gate; the conversation shows the answers and the confirmation. */
+  complete: (answers: ChatQaPair[], confirmation: string) => void;
+  /** Sends the intake. */
+  onSubmit: (intake: StartProjectIntake) => void;
+  /** The booking calendar. Call `booked` once the visitor confirms a time. Leave it out to show the empty state. */
+  renderCalendar?: (booked: () => void) => ReactNode;
+}
+
+export function StartProjectGate({ request, close, complete, onSubmit, renderCalendar }: StartProjectGateProps) {
+  const gateRef = useRef<HTMLDivElement>(null);
+  const budgetName = useId();
+  const { fire } = useConfetti();
+  const [step, setStep] = useState(1);
+  const [chosen, setChosen] = useState<string[]>(request.services ?? []);
+  const [budget, setBudget] = useState<string | null>(request.budget ?? null);
+  const [about, setAbout] = useState<IntakeAboutValues>(intakeAboutEmpty);
+
+  function toggleService(value: string) {
+    setChosen((current) =>
+      current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
+    );
+  }
+
+  // Number keys pick the numbered options while focus is in the gate.
+  useKbdChoiceKeys({
+    enabled: step === 1,
+    scope: gateRef,
+    choices: Object.fromEntries(services.map((service, index) => [String(index + 1), () => toggleService(service.value)])),
+  });
+  useKbdChoiceKeys({
+    enabled: step === 2,
+    scope: gateRef,
+    choices: Object.fromEntries(budgets.map((option, index) => [String(index + 1), () => setBudget(option.value)])),
+  });
+
+  const canContinue =
+    step === 1 ? chosen.length > 0 : step === 2 ? budget != null : step === 3 ? isIntakeAboutValid(about) : true;
+
+  function finish(followUp: "call" | "email") {
+    onSubmit({ services: chosen, budget, about, followUp });
+    // The burst starts at the control the visitor used — the booking or the skip.
+    const used = document.activeElement;
+    fire(used instanceof HTMLElement ? { origin: used } : undefined);
+    const firstName = about.name.trim().split(" ")[0];
+    const email = about.email.trim();
+    complete(
+      [
+        {
+          question: "What are we making?",
+          answer: services
+            .filter((service) => chosen.includes(service.value))
+            .map((service) => service.label)
+            .join(", "),
+        },
+        { question: "What's the budget?", answer: budgets.find((option) => option.value === budget)?.label ?? "" },
+        { question: "About you", answer: [about.name.trim(), about.company.trim()].filter(Boolean).join(", ") },
+        { question: "How should we follow up?", answer: followUp === "call" ? "Booked a call" : "Email me" },
+      ],
+      followUp === "call"
+        ? "Thanks, " + firstName + ". Your call is booked; the invite is on its way to " + email + "."
+        : "Thanks, " + firstName + ". We'll write to " + email + " within a day.",
+    );
+  }
+
+  const copy = steps[step - 1];
+
+  return (
+    <ChatDock.Gate
+      ref={gateRef}
+      title={copy.title}
+      subtitle={copy.subtitle}
+      step={step}
+      stepCount={steps.length}
+      onPrevious={() => setStep((current) => Math.max(1, current - 1))}
+      onNext={step < steps.length ? () => setStep((current) => current + 1) : undefined}
+      canContinue={canContinue}
+      onClose={close}
+      footerStart={step === 4 ? <CalEmbed.Skip onSkip={() => finish("email")} /> : undefined}
+    >
+      {step === 1 ? (
+        <div className="flex w-full flex-col" role="group" aria-label="Services">
+          {services.map((service, index) => (
+            <div key={service.value} className="flex w-full items-center gap-3 border-b border-border py-3 last:border-b-0">
+              <Checkbox
+                className="min-w-0 flex-1"
+                size="md"
+                label={service.label}
+                checked={chosen.includes(service.value)}
+                onChange={() => toggleService(service.value)}
+              />
+              <Kbd className="shrink-0" aria-label={"Press " + (index + 1)}>
+                {index + 1}
+              </Kbd>
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {step === 2 ? (
+        <div className="flex w-full flex-col" role="radiogroup" aria-label="Budget">
+          {budgets.map((option, index) => (
+            <div key={option.value} className="flex w-full items-center gap-3 border-b border-border py-3 last:border-b-0">
+              <Radio
+                className="min-w-0 flex-1"
+                size="md"
+                name={budgetName}
+                value={option.value}
+                label={option.label}
+                checked={budget === option.value}
+                onChange={() => setBudget(option.value)}
+              />
+              <Kbd className="shrink-0" aria-label={"Press " + (index + 1)}>
+                {index + 1}
+              </Kbd>
+            </div>
+          ))}
+        </div>
+      ) : null}
+      {step === 3 ? <IntakeForm values={about} onChange={setAbout} /> : null}
+      {step === 4 ? <CalEmbed skip={false}>{renderCalendar?.(() => finish("call"))}</CalEmbed> : null}
+    </ChatDock.Gate>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — Q&A with reply
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — default
+// @thewhatmatters/wmds@0.4.1 · 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

@@ -0,0 +1,19 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { useState } from "react";
+import { Checkbox } from "@thewhatmatters/wmds";
+
+export function GuidesFilter() {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      label="Guides"
+      count={2}
+      countLabel="2 posts"
+      checked={checked}
+      onChange={(event) => setChecked(event.target.checked)}
+    />
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — with description
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — default
+// @thewhatmatters/wmds@0.4.1 · 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

@@ -0,0 +1,17 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { useState } from "react";
+import { CheckboxGroup } from "@thewhatmatters/wmds";
+
+export function TopicFilter() {
+  const [values, setValues] = useState<string[]>([]);
+  return (
+    <CheckboxGroup label="Topic" size="sm" values={values} onValuesChange={setValues}>
+      <CheckboxGroup.Item value="guides" label="Guides" count={2} countLabel="2 posts" />
+      <CheckboxGroup.Item value="notes" label="Notes" count={1} countLabel="1 post" />
+      <CheckboxGroup.Item value="news" label="News" count={1} countLabel="1 post" />
+    </CheckboxGroup>
+  );
+}

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

@@ -0,0 +1,21 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { DescriptionList } from "@thewhatmatters/wmds";
+
+export interface ProjectDetails {
+  client: string;
+  scope: string;
+  timeline: string;
+}
+
+export function ProjectFacts({ project }: { project: ProjectDetails }) {
+  return (
+    <DescriptionList>
+      <DescriptionList.Item name="Client">{project.client}</DescriptionList.Item>
+      <DescriptionList.Item name="Scope">{project.scope}</DescriptionList.Item>
+      <DescriptionList.Item name="Timeline">{project.timeline}</DescriptionList.Item>
+    </DescriptionList>
+  );
+}

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

@@ -0,0 +1,52 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { Badge, Button, DescriptionList } from "@thewhatmatters/wmds";
+
+export interface PostMetadataProps {
+  /** ISO date, for the time element. */
+  date: string;
+  dateLabel: string;
+  author: string;
+  readingTime: string;
+  categories: { label: string; href: string }[];
+  shareUrl: string;
+}
+
+export function PostMetadata({ date, dateLabel, author, readingTime, categories, shareUrl }: PostMetadataProps) {
+  const encodedUrl = encodeURIComponent(shareUrl);
+  return (
+    <DescriptionList variant="mono" rule="dotted">
+      <DescriptionList.Item name="Date">
+        <time dateTime={date}>{dateLabel}</time>
+      </DescriptionList.Item>
+      <DescriptionList.Item name="Author">
+        <Badge emphasis="outline" mono>
+          {author}
+        </Badge>
+      </DescriptionList.Item>
+      <DescriptionList.Item name="Reading time">{readingTime}</DescriptionList.Item>
+      <DescriptionList.Item name="Categories">
+        {categories.map((category) => (
+          <Badge key={category.href} emphasis="outline" mono render={<a href={category.href} />}>
+            {category.label}
+          </Badge>
+        ))}
+      </DescriptionList.Item>
+      <DescriptionList.Item name="Share" layout="stacked">
+        <Button role="secondary" size="sm" external render={<a href={"https://x.com/intent/post?url=" + encodedUrl} />}>
+          Twitter/X
+        </Button>
+        <Button
+          role="secondary"
+          size="sm"
+          external
+          render={<a href={"https://www.linkedin.com/sharing/share-offsite/?url=" + encodedUrl} />}
+        >
+          LinkedIn
+        </Button>
+      </DescriptionList.Item>
+    </DescriptionList>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — alert dialog (destructive)
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — dialog
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — form dialog
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — page display controls
+// @thewhatmatters/wmds@0.4.1 · 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-field--horizontal-input.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — horizontal input
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — horizontal textarea
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — multi-control
+// @thewhatmatters/wmds@0.4.1 · 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-footerreveal--marketing-hero-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — marketing hero
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — marketing hero ruled grid
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Marketing hero with gallery intro
+// @thewhatmatters/wmds@0.4.1 · 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.