makersclaw 0.2.0 → 0.3.1

package/registry/blocks/chart/core.jsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Empty, Toggle, cx } from "../../ui";
+
+// What every chart in this block shares: the series colours as classes,
+// nice ticks, the width of the box it sits in, the reveal, the legend, the
+// tooltip box and the hidden data table a screen reader reads. The charts
+// themselves are in cartesian.jsx, pie.jsx and sparkline.jsx.
+
+// ---- colours ---------------------------------------------------------------
+// Written out whole so Tailwind finds every class. chart-1…5 are the series
+// colours (app/globals.css); the rest are the theme's own tones, for the
+// one series that means a status (churn in the destructive tone).
+const TONES = {
+  "chart-1": { fill: "fill-chart-1", stroke: "stroke-chart-1", bg: "bg-chart-1", text: "text-chart-1" },
+  "chart-2": { fill: "fill-chart-2", stroke: "stroke-chart-2", bg: "bg-chart-2", text: "text-chart-2" },
+  "chart-3": { fill: "fill-chart-3", stroke: "stroke-chart-3", bg: "bg-chart-3", text: "text-chart-3" },
+  "chart-4": { fill: "fill-chart-4", stroke: "stroke-chart-4", bg: "bg-chart-4", text: "text-chart-4" },
+  "chart-5": { fill: "fill-chart-5", stroke: "stroke-chart-5", bg: "bg-chart-5", text: "text-chart-5" },
+  primary: { fill: "fill-primary", stroke: "stroke-primary", bg: "bg-primary", text: "text-primary" },
+  info: { fill: "fill-info", stroke: "stroke-info", bg: "bg-info", text: "text-info" },
+  success: { fill: "fill-success", stroke: "stroke-success", bg: "bg-success", text: "text-success" },
+  warning: { fill: "fill-warning", stroke: "stroke-warning", bg: "bg-warning", text: "text-warning" },
+  danger: { fill: "fill-destructive", stroke: "stroke-destructive", bg: "bg-destructive", text: "text-destructive" },
+  muted: { fill: "fill-muted-foreground", stroke: "stroke-muted-foreground", bg: "bg-muted-foreground", text: "text-muted-foreground" },
+};
+
+/** The tone a series (or a slice) wears: its own `tone` (chart-1…5, 1…5,
+ *  or a theme tone), else the next chart colour in order. */
+export function toneOf(item, index) {
+  const t = typeof item?.tone === "number" ? `chart-${item.tone}` : item?.tone;
+  return TONES[t] ? t : `chart-${(index % 5) + 1}`;
+}
+
+export function tone(t, kind) {
+  return (TONES[t] ?? TONES["chart-1"])[kind];
+}
+
+// ---- numbers ---------------------------------------------------------------
+
+const COMPACT = new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 });
+const PLAIN = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });
+
+/** The default value formatter: 1,250 · 48.2K · 1.3M. */
+export function defaultFormat(v) {
+  if (v == null || Number.isNaN(v)) return "—";
+  return Math.abs(v) >= 10000 ? COMPACT.format(v) : PLAIN.format(v);
+}
+
+export function num(v) {
+  const n = typeof v === "number" ? v : Number(v);
+  return Number.isFinite(n) ? n : null;
+}
+
+/** Round numbers that cover [min, max] in about `count` steps. */
+export function niceTicks(min, max, count = 5) {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0, 1];
+  if (min === max) {
+    if (min === 0) return [0, 1];
+    min = Math.min(0, min);
+    max = Math.max(0, max);
+  }
+  const raw = (max - min) / Math.max(1, count);
+  const mag = 10 ** Math.floor(Math.log10(raw));
+  const err = raw / mag;
+  const step = (err >= 7.5 ? 10 : err >= 3.5 ? 5 : err >= 1.5 ? 2 : 1) * mag;
+  const lo = Math.floor(min / step) * step;
+  const hi = Math.ceil(max / step) * step;
+  const out = [];
+  for (let v = lo; v <= hi + step / 2; v += step) out.push(Number(v.toPrecision(12)));
+  return out;
+}
+
+export function humanize(key) {
+  const text = String(key ?? "").replace(/[_-]+/g, " ").trim();
+  return text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
+}
+
+/** About how wide a label is at text-2xs, for margins and thinning. The
+ *  axis text is small and the estimate generous, so nothing is clipped. */
+export function textWidth(s) {
+  return String(s ?? "").length * 6.4 + 4;
+}
+
+/** A safe id fragment for url(#…) from React's useId. */
+export function idFrom(uid) {
+  return `c${String(uid).replace(/[^a-zA-Z0-9-]/g, "")}`;
+}
+
+// ---- the box ---------------------------------------------------------------
+
+/** The width of the element, kept current by a ResizeObserver: a chart is
+ *  drawn for the width it has, never scaled. A callback ref, so a box that
+ *  comes back (after the empty state) is measured again. 0 until measured.
+ *
+ *    const [boxRef, width] = useWidth();  <div ref={boxRef}>…</div> */
+export function useWidth() {
+  const [el, setEl] = useState(null);
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    if (!el) return undefined;
+    setWidth(Math.floor(el.getBoundingClientRect().width));
+    if (typeof ResizeObserver === "undefined") return undefined;
+    const ro = new ResizeObserver(([entry]) => setWidth(Math.floor(entry.contentRect.width)));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [el]);
+  return [setEl, width];
+}
+
+/** false for the first frame once `ready`, then true: marks draw from
+ *  nothing to their place. The transitions are motion-safe: classes, so
+ *  with reduced motion they simply appear. */
+export function useReveal(ready) {
+  const [shown, setShown] = useState(false);
+  useEffect(() => {
+    if (!ready || shown) return undefined;
+    // A frame, so the start is painted; the timer, because a hidden tab
+    // runs no frames and the chart must never stay empty.
+    const done = () => setShown(true);
+    const frame = requestAnimationFrame(() => requestAnimationFrame(done));
+    const timer = setTimeout(done, 120);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+    };
+  }, [ready, shown]);
+  return shown;
+}
+
+// ---- the parts every chart draws ----------------------------------------------
+
+// A square of the series' colour; a dashed series gets a short dashed line.
+function Swatch({ t, dim, dashed }) {
+  if (dashed) {
+    return (
+      <svg aria-hidden="true" width="12" height="10" viewBox="0 0 12 10" className={cx("shrink-0", dim && "opacity-30")}>
+        <line x1="0" y1="5" x2="12" y2="5" strokeWidth="2" strokeDasharray="3 2" className={tone(t, "stroke")} />
+      </svg>
+    );
+  }
+  return <span aria-hidden="true" className={cx("size-2.5 shrink-0 rounded-sm", tone(t, "bg"), dim && "opacity-30")} />;
+}
+
+/**
+ * The key to a chart's colours. With `onToggle` each entry is a toggle
+ * (pressed = shown) that hides or shows its series; without it, a plain
+ * list. `items` [{ key, label, tone?, value?, dashed? }] — `value` is a
+ * muted note after the label (a slice's share); `dashed` draws the key as
+ * a dashed line (a comparison series).
+ */
+export function ChartLegend({ items, hidden, onToggle, className, label = "Legend" }) {
+  const list = (items ?? []).filter(Boolean);
+  if (!list.length) return null;
+  const off = hidden instanceof Set ? hidden : new Set(hidden ?? []);
+  if (!onToggle) {
+    return (
+      <ul aria-label={label} className={cx("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted-foreground", className)}>
+        {list.map((it, i) => (
+          <li key={it.key} className="flex items-center gap-1.5">
+            <Swatch t={toneOf(it, i)} dashed={it.dashed} />
+            <span className="text-foreground">{it.label ?? humanize(it.key)}</span>
+            {it.value != null ? <span data-nums>{it.value}</span> : null}
+          </li>
+        ))}
+      </ul>
+    );
+  }
+  return (
+    <div role="group" aria-label={label} className={cx("flex flex-wrap items-center justify-center gap-1", className)}>
+      {list.map((it, i) => {
+        const shown = !off.has(it.key);
+        return (
+          <Toggle
+            key={it.key}
+            size="sm"
+            variant="quiet"
+            pressed={shown}
+            onPressedChange={() => onToggle(it.key)}
+            className="gap-1.5 text-xs"
+          >
+            <Swatch t={toneOf(it, i)} dim={!shown} dashed={it.dashed} />
+            <span className={shown ? "text-foreground" : "line-through"}>{it.label ?? humanize(it.key)}</span>
+            {it.value != null ? <span data-nums className="text-muted-foreground">{it.value}</span> : null}
+          </Toggle>
+        );
+      })}
+    </div>
+  );
+}
+
+/** The floating box that says what is under the pointer (or the keyboard).
+ *  `at` { x, y, flip } in the chart's pixels; flip puts it on the left. */
+export function TooltipBox({ at, title, rows, footer }) {
+  if (!at) return null;
+  return (
+    <div
+      aria-hidden="true"
+      className="pointer-events-none absolute left-0 top-0 z-10 min-w-36 rounded-md border border-border bg-popover px-2.5 py-2 text-xs text-popover-foreground shadow-lg"
+      style={{
+        transform: `translate(${Math.round(at.x)}px, ${Math.round(at.y)}px) translate(${at.flip ? "calc(-100% - 12px)" : "12px"}, ${at.middle ? "-50%" : "0"})`,
+      }}
+    >
+      {title != null ? <p className="mb-1.5 font-medium">{title}</p> : null}
+      <div className="grid gap-1">
+        {rows.map((r) => (
+          <div key={r.key} className="flex items-center gap-2">
+            <Swatch t={r.tone} dashed={r.dashed} />
+            <span className="flex-1 text-muted-foreground">{r.label}</span>
+            <span data-nums className="font-medium">{r.value}</span>
+          </div>
+        ))}
+      </div>
+      {footer ? (
+        <div className="mt-1.5 flex items-center justify-between gap-2 border-t border-border pt-1.5">
+          <span className="text-muted-foreground">{footer.label}</span>
+          <span data-nums className="font-medium">{footer.value}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/** The numbers behind the picture, for a screen reader: a real table,
+ *  visually hidden. `head` the column names, `body` rows of strings. */
+export function DataTable({ caption, head, body }) {
+  return (
+    <table className="sr-only">
+      <caption>{caption}</caption>
+      <thead>
+        <tr>
+          {head.map((h, i) => (
+            <th key={i} scope="col">{h}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {body.map((cells, r) => (
+          <tr key={r}>
+            {cells.map((c, i) =>
+              i === 0 ? (
+                <th key={i} scope="row">{c}</th>
+              ) : (
+                <td key={i}>{c}</td>
+              ),
+            )}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+/** What a chart shows with nothing to draw, at the height it would have. */
+export function ChartEmpty({ height, title, body }) {
+  return (
+    <div style={{ minHeight: height }} className="grid">
+      <Empty icon="chart" title={title} body={body} className="h-full content-center" />
+    </div>
+  );
+}

package/registry/blocks/chart/demo.jsx

@@ -0,0 +1,357 @@
+"use client";
+
+// The charts with numbers in memory — the gallery's and the smoke test's
+// surface. Not installed into apps: `makersclaw add chart` lays index.js
+// and the chart files only.
+import { useState } from "react";
+import { Badge, Card, Stat, StatGroup, Toggle, ToggleGroup } from "../components/ui";
+import { AreaChart, BarChart, HeatmapChart, LineChart, PieChart, ScaleLegend, Sparkline } from "../components/blocks/chart";
+
+const REVENUE = [
+  { month: "Oct", newBiz: 18400, expansion: 6200, services: 3100 },
+  { month: "Nov", newBiz: 21300, expansion: 6900, services: 2800 },
+  { month: "Dec", newBiz: 17800, expansion: 7400, services: 2200 },
+  { month: "Jan", newBiz: 24600, expansion: 8100, services: 3900 },
+  { month: "Feb", newBiz: 26900, expansion: 8800, services: 4100 },
+  { month: "Mar", newBiz: 31200, expansion: 9600, services: 3600 },
+  { month: "Apr", newBiz: 29400, expansion: 11200, services: 4400 },
+  { month: "May", newBiz: 34800, expansion: 12100, services: 4800 },
+  { month: "Jun", newBiz: 38100, expansion: 13900, services: 5200 },
+  { month: "Jul", newBiz: 36500, expansion: 15400, services: 4700 },
+  { month: "Aug", newBiz: 42700, expansion: 16800, services: 5600 },
+  { month: "Sep", newBiz: 47900, expansion: 18300, services: 6100 },
+];
+const REVENUE_SERIES = [
+  { key: "newBiz", label: "New business" },
+  { key: "expansion", label: "Expansion" },
+  { key: "services", label: "Services" },
+];
+
+const STAGES = [
+  { stage: "Lead", thisQ: 142, lastQ: 118 },
+  { stage: "Qualified", thisQ: 86, lastQ: 74 },
+  { stage: "Demo", thisQ: 51, lastQ: 49 },
+  { stage: "Proposal", thisQ: 29, lastQ: 31 },
+  { stage: "Negotiation", thisQ: 17, lastQ: 12 },
+  { stage: "Won", thisQ: 11, lastQ: 8 },
+];
+
+const SOURCES = [
+  { source: "Outbound", amount: 412000 },
+  { source: "Inbound", amount: 286000 },
+  { source: "Referral", amount: 174000 },
+  { source: "Partners", amount: 98000 },
+  { source: "Events", amount: 61000 },
+];
+
+// A distribution: each status's share of the tickets, a value label at the
+// end of each bar and a track behind it.
+const STATUS_SHARE = [
+  { status: "Open", share: 42 },
+  { status: "In progress", share: 27 },
+  { status: "Waiting on customer", share: 13 },
+  { status: "Resolved", share: 10 },
+  { status: "Closed", share: 8 },
+];
+
+const REPLY = [
+  { week: "W27", email: 4.1, linkedin: 7.8 },
+  { week: "W28", email: 3.8, linkedin: 8.4 },
+  { week: "W29", email: 4.6, linkedin: 8.1 },
+  { week: "W30", email: 5.2, linkedin: 9.3 },
+  { week: "W31", email: 4.9, linkedin: 10.2 },
+  { week: "W32", email: 5.8, linkedin: 9.7 },
+  { week: "W33", email: 6.3, linkedin: 11.4 },
+  { week: "W34", email: 6.1, linkedin: 12.0 },
+  { week: "W35", email: 7.0, linkedin: 11.6 },
+  { week: "W36", email: 6.8, linkedin: 12.9 },
+];
+
+// A pivot: one row per time slot, one key per weekday.
+const DAYS = [
+  { key: "mon", label: "Mon" },
+  { key: "tue", label: "Tue" },
+  { key: "wed", label: "Wed" },
+  { key: "thu", label: "Thu" },
+  { key: "fri", label: "Fri" },
+  { key: "sat", label: "Sat" },
+  { key: "sun", label: "Sun" },
+];
+const TRAFFIC = [
+  { slot: "00–04", mon: 2, tue: 1, wed: 3, thu: 2, fri: 4, sat: 6, sun: 5 },
+  { slot: "04–08", mon: 8, tue: 9, wed: 7, thu: 10, fri: 8, sat: 3, sun: 2 },
+  { slot: "08–12", mon: 41, tue: 52, wed: 48, thu: 55, fri: 44, sat: 12, sun: 9 },
+  { slot: "12–16", mon: 38, tue: 61, wed: 65, thu: 58, fri: 36, sat: 18, sun: 14 },
+  { slot: "16–20", mon: 27, tue: 33, wed: 29, thu: 31, fri: 22, sat: 25, sun: 21 },
+  { slot: "20–24", mon: 11, tue: 14, wed: 12, thu: 9, fri: 16, sat: 19, sun: 17 },
+];
+
+// Commits per weekday over the last four weeks: a compact grid, no numbers.
+const WEEKS = ["w1", "w2", "w3", "w4"].map((key, i) => ({ key, label: `Wk ${i + 1}` }));
+const COMMITS = [
+  { day: "Mon", w1: 4, w2: 7, w3: 2, w4: 9 },
+  { day: "Tue", w1: 6, w2: 3, w3: 8, w4: 11 },
+  { day: "Wed", w1: 12, w2: 5, w3: 0, w4: 7 },
+  { day: "Thu", w1: 3, w2: 9, w3: 6, w4: 13 },
+  { day: "Fri", w1: 8, w2: 2, w3: 4, w4: 6 },
+  { day: "Sat", w1: 0, w2: 1, w3: 0, w4: 2 },
+  { day: "Sun", w1: 1, w2: 0, w3: 3, w4: null },
+];
+
+const KPIS = [
+  { label: "MRR", value: "$84.2k", change: "+6.1%", tone: "success", trend: [61.2, 62.8, 64.1, 66.9, 68.4, 70.2, 73.8, 75.1, 78.6, 79.4, 82.0, 84.2], line: "chart-1", unit: (v) => `$${v}k` },
+  { label: "New deals", value: "38", change: "+9", tone: "success", trend: [22, 25, 21, 27, 29, 26, 31, 30, 34, 33, 29, 38], line: "chart-2", unit: (v) => String(v) },
+  { label: "Win rate", value: "27%", change: "+2.4 pts", tone: "success", trend: [21.4, 22.0, 21.1, 23.5, 22.8, 24.1, 24.9, 23.7, 25.6, 26.0, 24.6, 27.0], line: "chart-3", unit: (v) => `${v}%` },
+  { label: "Logo churn", value: "1.8%", change: "−0.3 pts", tone: "success", trend: [2.9, 2.7, 3.1, 2.6, 2.4, 2.5, 2.2, 2.3, 2.0, 2.1, 2.1, 1.8], line: "chart-4", unit: (v) => `${v}%` },
+];
+
+// This period against the last: the comparison is muted and dashed.
+const SIGNUPS = [
+  { day: "Mon", thisWeek: 42, lastWeek: 35 },
+  { day: "Tue", thisWeek: 51, lastWeek: 39 },
+  { day: "Wed", thisWeek: 47, lastWeek: 44 },
+  { day: "Thu", thisWeek: 63, lastWeek: 41 },
+  { day: "Fri", thisWeek: 58, lastWeek: 46 },
+  { day: "Sat", thisWeek: 29, lastWeek: 24 },
+  { day: "Sun", thisWeek: 33, lastWeek: 27 },
+];
+const PAID = [
+  { month: "Apr", thisYear: 12400, lastYear: 8900 },
+  { month: "May", thisYear: 14100, lastYear: 9800 },
+  { month: "Jun", thisYear: 13600, lastYear: 11200 },
+  { month: "Jul", thisYear: 16900, lastYear: 11900 },
+  { month: "Aug", thisYear: 18800, lastYear: 12600 },
+  { month: "Sep", thisYear: 21300, lastYear: 13100 },
+];
+
+const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+const usdShort = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", notation: "compact", maximumFractionDigits: 1 });
+
+export default function ChartDemo() {
+  const [empty, setEmpty] = useState(false);
+  const [stacked, setStacked] = useState(true);
+  const [orientation, setOrientation] = useState("vertical");
+  const [barsStacked, setBarsStacked] = useState(false);
+  const [picked, setPicked] = useState(null);
+  const pick = (rows) => (empty ? [] : rows);
+
+  return (
+    <div className="grid gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <p className="text-sm text-muted-foreground">Sales dashboard · last 12 months</p>
+        <ToggleGroup
+          size="sm"
+          aria-label="Data"
+          value={empty ? "empty" : "data"}
+          onChange={(v) => setEmpty(v === "empty")}
+          items={[
+            { value: "data", label: "With data" },
+            { value: "empty", label: "Empty" },
+          ]}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        {KPIS.map((k) => (
+          <Card key={k.label} className="grid gap-2">
+            <p className="text-xs text-muted-foreground">{k.label}</p>
+            <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+              <span data-nums className="text-2xl font-semibold leading-none">
+                {empty ? "—" : k.value}
+              </span>
+              {empty ? null : <Badge tone={k.tone}>{k.change}</Badge>}
+            </div>
+            <Sparkline data={pick(k.trend)} tone={k.line} label={`${k.label}, last 12 months`} format={k.unit} />
+          </Card>
+        ))}
+      </div>
+
+      <Card
+        title="Revenue by month"
+        description={empty ? "No invoices yet" : `${usd.format(REVENUE.reduce((s, r) => s + r.newBiz + r.expansion + r.services, 0))} over 12 months`}
+        actions={
+          <Toggle size="sm" pressed={stacked} onPressedChange={setStacked}>
+            Stacked
+          </Toggle>
+        }
+      >
+        <AreaChart
+          data={pick(REVENUE)}
+          x="month"
+          series={REVENUE_SERIES}
+          stacked={stacked}
+          format={(v) => usd.format(v)}
+          formatAxis={(v) => usdShort.format(v)}
+          label="Revenue by month"
+          height={260}
+          emptyLabel="No revenue yet"
+          emptyBody="Paid invoices appear here by the month they were paid."
+        />
+      </Card>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card
+          title="Deals by stage"
+          description={picked ? `${picked.stage}: ${picked.thisQ} deals this quarter` : "This quarter against last. Click a stage."}
+          actions={
+            <Toggle size="sm" pressed={barsStacked} onPressedChange={setBarsStacked}>
+              Stacked
+            </Toggle>
+          }
+        >
+          <div className="mb-3">
+            <ToggleGroup
+              size="sm"
+              aria-label="Orientation"
+              value={orientation}
+              onChange={setOrientation}
+              items={[
+                { value: "vertical", label: "Columns" },
+                { value: "horizontal", label: "Bars" },
+              ]}
+            />
+          </div>
+          <BarChart
+            data={pick(STAGES)}
+            x="stage"
+            series={[
+              { key: "thisQ", label: "This quarter" },
+              { key: "lastQ", label: "Last quarter", tone: "chart-5" },
+            ]}
+            orientation={orientation}
+            stacked={barsStacked}
+            label="Deals by stage"
+            height={orientation === "horizontal" ? 280 : 240}
+            onSelect={(row) => setPicked(row)}
+            emptyLabel="No deals yet"
+            emptyBody="Deals show here by the stage they are in."
+          />
+        </Card>
+
+        <Card title="Pipeline by source" description="Open pipeline value, by where the deal came from">
+          <PieChart
+            data={pick(SOURCES)}
+            name="source"
+            value="amount"
+            donut
+            format={(v) => usdShort.format(v)}
+            totalLabel="Open pipeline"
+            label="Pipeline by source"
+            height={240}
+            emptyLabel="No open pipeline"
+          />
+        </Card>
+      </div>
+
+      <Card title="Tickets by status" description="Share of open tickets · value labels, a track, no grid or value axis">
+        <BarChart
+          data={pick(STATUS_SHARE)}
+          x="status"
+          series={[{ key: "share", label: "Share", tone: "muted" }]}
+          orientation="horizontal"
+          valueLabels
+          track
+          grid={false}
+          xAxis={false}
+          format={(v) => `${v}%`}
+          label="Tickets by status"
+          height={180}
+          emptyLabel="No tickets yet"
+        />
+      </Card>
+
+      <div className="grid gap-4 lg:grid-cols-[2fr_1fr]">
+        <Card
+          title="Weekly traffic"
+          description="Visits by time slot and weekday · hover or arrow through a cell"
+          actions={empty ? null : <ScaleLegend min={0} max={65} steps={5} tone="chart-2" />}
+        >
+          <HeatmapChart
+            data={pick(TRAFFIC)}
+            y="slot"
+            columns={DAYS}
+            tone="chart-2"
+            showValues
+            rowTotals
+            colTotals
+            legend={false}
+            formatTooltip={(v, row, col) => `${col.label} ${row.slot}: ${v ?? 0} visits`}
+            label="Visits by time slot and weekday"
+            yLabel="Time slot"
+            emptyLabel="No visits yet"
+          />
+        </Card>
+
+        <Card title="Contribution activity" description="Commits per day, last 4 weeks">
+          <HeatmapChart
+            data={pick(COMMITS)}
+            y="day"
+            columns={WEEKS}
+            cellShape="pill"
+            legendLabels={["Less", "More"]}
+            formatTooltip={(v, row, col) => (v == null ? `${row.day}, ${col.label}: no data` : `${row.day}, ${col.label}: ${v} commits`)}
+            label="Commits per weekday, last four weeks"
+            yLabel="Weekday"
+            emptyLabel="No commits yet"
+          />
+        </Card>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card title="Signups" description="This week against last · a muted, dashed comparison">
+          <LineChart
+            data={pick(SIGNUPS)}
+            x="day"
+            series={[
+              { key: "thisWeek", label: "This week" },
+              { key: "lastWeek", label: "Last week", muted: true, dashed: true },
+            ]}
+            label="Signups per day, this week against last"
+            height={220}
+          />
+        </Card>
+        <Card title="Paid invoices" description="This year against last · the comparison dashed, no fill">
+          <AreaChart
+            data={pick(PAID)}
+            x="month"
+            series={[
+              { key: "thisYear", label: "2026" },
+              { key: "lastYear", label: "2025", tone: "chart-3", dashed: true },
+            ]}
+            format={(v) => usd.format(v)}
+            formatAxis={(v) => usdShort.format(v)}
+            label="Paid invoices by month, this year against last"
+            height={220}
+          />
+        </Card>
+      </div>
+
+      <Card title="Sparklines in stat tiles" description="Kit Stat with a Sparkline under it, height 28">
+        <StatGroup variant="divided" label="Weekly numbers">
+          {KPIS.slice(0, 3).map((k) => (
+            <div key={k.label} className="grid gap-2">
+              <Stat size="sm" label={k.label} value={empty ? "—" : k.value} />
+              <Sparkline data={pick(k.trend)} tone={k.line} height={28} area={false} label={`${k.label}, last 12 months`} format={k.unit} />
+            </div>
+          ))}
+        </StatGroup>
+      </Card>
+
+      <Card title="Reply rate by channel" description="Share of first touches that got a reply, per week">
+        <LineChart
+          data={pick(REPLY)}
+          x="week"
+          series={[
+            { key: "email", label: "Email" },
+            { key: "linkedin", label: "LinkedIn" },
+          ]}
+          format={(v) => `${v.toFixed(1)}%`}
+          formatAxis={(v) => `${v}%`}
+          dots
+          label="Reply rate by channel"
+          height={220}
+        />
+      </Card>
+    </div>
+  );
+}