@designtools/docs 0.2.0 → 0.2.2

package/dist/swatches.js

@@ -1,15 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Square, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { contrastRatio, wcagGrade } from "./lib/contrast.js";
 import { cx } from "./lib/cx.js";
 import { ramps, semanticColours, valueIn } from "./lib/manifest.js";
 /**
- * Colour, painted from the tokens rather than restated. Each colour with a
- * subdued pair is a card: its fill, subdued, hover and press, in light and dark
- * side by side. Then the surfaces, then the utility colours. Every sample sits
- * inside its own `data-theme`, so dark is shown as the dark tokens resolve, and
- * every pair's contrast is measured on the colours the browser actually paints.
+ * Colour, painted from the tokens rather than restated. No panels and no cards around the samples:
+ * each sample is its own colour, with one hairline round it, set on the page in a light and a dark
+ * column. Each colour with a subdued pair shows its fill large, then subdued, hover and press; then
+ * the surfaces and the utility colours, one row each. Every sample sits inside its own `data-theme`,
+ * so dark is shown as the dark tokens resolve, and every pair's contrast is measured on the colours
+ * the browser actually paints.
  */
 export function SemanticSwatches({ tokens, modes = ["light", "dark"], }) {
     const colours = semanticColours(tokens);
@@ -22,13 +24,17 @@ export function SemanticSwatches({ tokens, modes = ["light", "dark"], }) {
         const token = byName.get(name)?.background;
         return token && pointsAt(valueIn(token, mode));
     };
-    // one level of framing: a panel per mode (the dark one has to be dark), chips inside it, and nothing around the family
-    const panel = (mode) => cx("flex flex-col gap-3 rounded-2xl bg-canvas p-4 text-canvas-foreground", mode === "light" && "ring-1 ring-border ring-inset");
-    const modeLabel = (mode) => _jsx("span", { className: "text-xs font-medium text-muted-foreground capitalize", children: mode });
-    const row = (title, meta, body, key) => (_jsxs("div", { "data-slot": "swatch-row", className: "grid gap-x-10 gap-y-5 border-t border-border pt-8 first:border-t-0 first:pt-0 lg:grid-cols-[11rem_minmax(0,1fr)]", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("h3", { className: "text-2xl leading-tight tracking-tight", children: title }), meta] }), body] }, key ?? title));
-    return (_jsxs("div", { "data-slot": "swatches", className: "flex flex-col gap-10", children: [families.map((f) => row((([first, ...rest]) => first.toUpperCase() + rest.join(""))(f.slice(2).replace(/-/g, " ")), _jsx("code", { className: "font-mono text-xs text-muted-foreground", children: f }), _jsx("div", { className: cx("grid gap-4", modes.length > 1 && "md:grid-cols-2"), children: modes.map((mode) => (_jsxs("div", { "data-theme": mode, "data-slot": "swatch-family", className: panel(mode), children: [modeLabel(mode), _jsx(Chip, { name: f, label: "fill", step: step(f, mode), size: "lg" }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsx(Chip, { name: `${f}-subdued`, label: "subdued", step: step(`${f}-subdued`, mode) }), byName.has(`${f}-hover`) && _jsx(Chip, { name: `${f}-hover`, foreground: `${f}-foreground`, label: "hover" }), byName.has(`${f}-active`) && _jsx(Chip, { name: `${f}-active`, foreground: `${f}-foreground`, label: "press" })] })] }, mode))) }), f)), surfaces.length > 0 &&
-                row("Surfaces", _jsx("p", { className: "text-sm text-muted-foreground", children: "The page, panels and popups, each with its text." }), _jsx("div", { className: cx("grid gap-4", modes.length > 1 && "md:grid-cols-2"), children: modes.map((mode) => (_jsxs("div", { "data-theme": mode, className: panel(mode), children: [modeLabel(mode), _jsx("div", { className: "grid grid-cols-2 gap-2 xl:grid-cols-3", children: surfaces.map((name) => (_jsx(Chip, { name: name, label: name.slice(2), step: step(name, mode), outlined: true }, name))) })] }, mode))) })), utility.length > 0 &&
-                row("Lines, focus and shadow", _jsx("p", { className: "text-sm text-muted-foreground", children: "Borders, input edges, the focus ring and the shadow colour." }), _jsx("div", { className: cx("grid gap-4", modes.length > 1 && "md:grid-cols-2"), children: modes.map((mode) => (_jsxs("div", { "data-theme": mode, className: panel(mode), children: [modeLabel(mode), _jsx("ul", { className: "grid grid-cols-2 gap-x-4 gap-y-3", children: utility.map((name) => (_jsxs("li", { "data-slot": "swatch", className: "flex items-center gap-3", children: [_jsx("span", { "aria-hidden": true, className: "size-9 shrink-0 rounded-lg border border-border", style: { background: `var(${name})` } }), _jsxs("span", { className: "flex min-w-0 flex-col font-mono text-xs", children: [_jsx("span", { className: "truncate font-medium", children: name.slice(2) }), _jsx("span", { className: "truncate text-muted-foreground", children: step(name, mode) })] })] }, name))) })] }, mode))) }))] }));
+    const columns = cx("grid gap-x-8 gap-y-6", modes.length > 1 && "md:grid-cols-2");
+    const modeLabel = (mode) => _jsx("p", { className: "text-xs font-medium text-muted-foreground capitalize", children: mode });
+    const title = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+    return (_jsxs("div", { "data-slot": "swatches", className: "flex flex-col gap-16", children: [_jsx("div", { className: "flex flex-col gap-14", children: families.map((f) => (_jsxs("section", { "data-slot": "swatch-family", className: "flex flex-col gap-5", children: [_jsxs("header", { className: "flex items-baseline gap-3", children: [_jsx("h3", { className: "text-2xl leading-tight tracking-tight", children: title(f.slice(2).replace(/-/g, " ")) }), _jsx("code", { className: "font-mono text-xs text-muted-foreground", children: f })] }), _jsx("div", { className: columns, children: modes.map((mode) => (_jsxs("div", { className: "flex flex-col gap-2.5", children: [modeLabel(mode), _jsxs("div", { "data-theme": mode, className: "flex flex-col gap-2.5", children: [_jsx(Chip, { name: f, label: "fill", step: step(f, mode), size: "lg" }), _jsxs("div", { className: "grid grid-cols-3 gap-2.5", children: [_jsx(Chip, { name: `${f}-subdued`, label: "subdued", step: step(`${f}-subdued`, mode) }), byName.has(`${f}-hover`) && _jsx(Chip, { name: `${f}-hover`, foreground: `${f}-foreground`, label: "hover" }), byName.has(`${f}-active`) && _jsx(Chip, { name: `${f}-active`, foreground: `${f}-foreground`, label: "press" })] })] })] }, mode))) })] }, f))) }), surfaces.length > 0 && (_jsx(Rows, { title: "Surfaces", lead: "The page, panels and popups, and the brand's own backgrounds, each with its text.", modes: modes, children: surfaces.map((name) => (_jsx(Row, { name: name.slice(2), modes: modes, children: (mode) => (_jsx("div", { "data-theme": mode, children: _jsx(Chip, { name: name, label: step(name, mode) ?? "", size: "wide" }) })) }, name))) })), utility.length > 0 && (_jsx(Rows, { title: "Lines, focus and shadow", lead: "Borders, input edges, the focus ring and the shadow colour.", modes: modes, children: utility.map((name) => (_jsx(Row, { name: name.slice(2), modes: modes, children: (mode) => (_jsxs("span", { className: "flex h-14 items-center gap-3", children: [_jsx("span", { "data-theme": mode, "aria-hidden": true, className: "size-10 shrink-0 rounded-lg ring-1 ring-(--canvas-foreground)/15 ring-inset", style: { background: `var(${name})` } }), _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: step(name, mode) })] })) }, name))) }))] }));
+}
+/** A titled list of rows, with the mode names once over the columns. */
+function Rows({ title, lead, modes, children }) {
+    return (_jsxs("section", { className: "flex flex-col gap-5", children: [_jsxs("header", { className: "flex flex-col gap-1.5", children: [_jsx("h3", { className: "text-2xl leading-tight tracking-tight", children: title }), _jsx("p", { className: "text-sm text-muted-foreground", children: lead })] }), _jsxs("div", { children: [_jsxs("div", { "aria-hidden": true, className: "hidden gap-x-8 pb-3 text-xs font-medium text-muted-foreground md:grid md:grid-cols-[9rem_repeat(var(--modes),minmax(0,1fr))]", style: { "--modes": modes.length }, children: [_jsx("span", {}), modes.map((m) => (_jsx("span", { className: "capitalize", children: m }, m)))] }), children] })] }));
+}
+function Row({ name, modes, children }) {
+    return (_jsxs("div", { className: "grid items-center gap-x-8 gap-y-2 border-t border-border py-3 md:grid-cols-[9rem_repeat(var(--modes),minmax(0,1fr))]", style: { "--modes": modes.length }, children: [_jsx("code", { className: "font-mono text-sm", children: name }), modes.map((mode) => (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-muted-foreground capitalize md:hidden", children: mode }), children(mode)] }, mode)))] }));
 }
 /** `var(--color-primary-500)` → `primary-500`: the step it points at, which is what a person compares. */
 function pointsAt(value) {
@@ -38,11 +44,11 @@ function pointsAt(value) {
     return value?.startsWith("oklch(") ? "generated" : value;
 }
 /**
- * One background with its foreground on it, labelled in that foreground, with the
- * contrast measured on what the browser paints. It reads its mode from the nearest
- * `data-theme` around it.
+ * One background with its foreground on it, labelled in that foreground, with the contrast measured on
+ * what the browser paints. It reads its mode from the nearest `data-theme` around it. One hairline round
+ * it, so a white sample shows on a white page, and nothing else.
  */
-function Chip({ name, foreground = `${name}-foreground`, label, step, size = "md", outlined, }) {
+function Chip({ name, foreground = `${name}-foreground`, label, step, size = "md", }) {
     const chip = useRef(null);
     const [ratio, setRatio] = useState(null);
     useEffect(() => {
@@ -55,20 +61,42 @@ function Chip({ name, foreground = `${name}-foreground`, label, step, size = "md
     const grade = ratio === null ? null : wcagGrade(ratio);
     const fails = grade === "Fail";
     const measured = grade && ratio !== null ? `${ratio.toFixed(1)}:1 ${grade}` : undefined;
-    return (_jsxs("div", { ref: chip, "data-slot": "swatch", title: `${name} with ${foreground}${step ? ` · ${step}` : ""}${measured ? ` · ${measured}` : ""}`, className: cx("flex min-w-0 flex-col justify-between gap-3 rounded-lg p-3", size === "lg" ? "min-h-28" : "min-h-20", outlined && "border border-border"), style: { background: `var(${name})`, color: `var(${foreground})` }, children: [size === "lg" ? (_jsxs("span", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { className: "text-3xl leading-none tracking-tight", children: "Aa" }), measured && (_jsx("span", { "data-slot": "swatch-contrast", className: cx("rounded-full px-2 py-0.5 font-mono text-xs whitespace-nowrap", fails ? "bg-destructive font-medium text-destructive-foreground" : "ring-1 ring-current/30"), children: measured }))] })) : (_jsx("span", { className: "text-base leading-none font-medium", children: "Aa" })), _jsxs("span", { className: "flex min-w-0 flex-col font-mono text-xs leading-snug", children: [_jsx("span", { className: "truncate font-medium", children: label }), size === "lg" ? (step && _jsx("span", { className: "truncate opacity-75", children: step })) : (measured && (_jsx("span", { "data-slot": "swatch-contrast", className: cx("truncate", fails ? "w-fit rounded-sm bg-destructive px-1 text-destructive-foreground" : "opacity-75"), children: measured })))] })] }));
+    const contrast = measured && (_jsx("span", { "data-slot": "swatch-contrast", className: cx("font-mono text-xs whitespace-nowrap", fails ? "rounded-sm bg-destructive px-1.5 py-0.5 font-medium text-destructive-foreground" : "opacity-80"), children: measured }));
+    const paint = { background: `var(${name})`, color: `var(${foreground})` };
+    // a hairline in the sample's own text colour: it shows a white sample on a white page and disappears into a strong fill
+    const base = "min-w-0 rounded-xl ring-1 ring-current/15 ring-inset";
+    const tip = `${name} with ${foreground}${step ? ` · ${step}` : ""}${measured ? ` · ${measured}` : ""}`;
+    if (size === "wide")
+        return (_jsxs("div", { ref: chip, "data-slot": "swatch", title: tip, className: cx(base, "flex h-14 items-center justify-between gap-4 px-4"), style: paint, children: [_jsxs("span", { className: "flex min-w-0 items-baseline gap-3", children: [_jsx("span", { className: "text-xl leading-none font-medium", children: "Aa" }), _jsx("span", { className: "font-mono text-xs opacity-80", children: label })] }), contrast] }));
+    if (size === "lg")
+        return (_jsxs("div", { ref: chip, "data-slot": "swatch", title: tip, className: cx(base, "flex min-h-36 flex-col justify-between gap-6 p-5"), style: paint, children: [_jsxs("span", { className: "flex items-start justify-between gap-3", children: [_jsx("span", { className: "text-5xl leading-none tracking-tight", children: "Aa" }), contrast] }), _jsxs("span", { className: "flex flex-col gap-0.5 text-sm leading-snug", children: [_jsx("span", { className: "font-medium", children: label }), step && _jsx("span", { className: "font-mono text-xs opacity-80", children: step })] })] }));
+    return (_jsxs("div", { ref: chip, "data-slot": "swatch", title: tip, className: cx(base, "flex min-h-28 flex-col justify-between gap-4 p-4"), style: paint, children: [_jsx("span", { className: "text-2xl leading-none font-medium", children: "Aa" }), _jsxs("span", { className: "flex flex-col gap-1 leading-snug", children: [_jsx("span", { className: "text-sm font-medium", children: label }), contrast] })] }));
 }
 /**
  * Each colour on each background, per mode: a label is measured on its own fill, and this is
  * everything else, red text on the page, a brand fill on a dark section. Backgrounds are the
  * canvas, surface and overlay and every named `--surface-<name>`; colours are each semantic fill
- * and muted text. T: fine as text (4.5:1); S: fine as a shape only (3:1); none: neither.
+ * and muted text. Text: fine as text (4.5:1); shape: fine as a shape only (3:1); none: neither.
  * Measured on what the browser paints, inside each mode's `data-theme`.
  */
 export function PageContrast({ tokens, modes = ["light", "dark"] }) {
     const names = new Set(semanticColours(tokens).map((c) => c.name));
     const colours = [...names].filter((n) => names.has(`${n}-subdued`)).concat(names.has("--muted") ? ["--muted-foreground"] : []);
     const grounds = ["--canvas", "--surface", "--overlay", ...[...names].filter((n) => n.startsWith("--surface-") && !n.endsWith("-foreground") && n !== "--surface-foreground")];
-    return (_jsx("div", { "data-slot": "page-contrast", className: "flex flex-col gap-12", children: modes.map((mode) => (_jsx(PageGrid, { mode: mode, colours: colours, grounds: grounds }, mode))) }));
+    return (_jsxs("div", { "data-slot": "page-contrast", className: "flex flex-col gap-14", children: [_jsx("p", { className: "flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground", children: [
+                    ["text", "fine as text, 4.5:1"],
+                    ["shape", "fine as a shape only, 3:1"],
+                    ["none", "neither"],
+                ].map(([mark, words]) => (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx(Verdict, { mark: mark }), words] }, mark))) }), modes.map((mode) => (_jsx(PageGrid, { mode: mode, colours: colours, grounds: grounds }, mode)))] }));
+}
+const VERDICT = {
+    text: { Icon: Check, className: "text-success-subdued-foreground", label: "text" },
+    shape: { Icon: Square, className: "text-muted-foreground", label: "shape" },
+    none: { Icon: X, className: "text-destructive-subdued-foreground", label: "none" },
+};
+function Verdict({ mark, ratio }) {
+    const { Icon, className, label } = VERDICT[mark];
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5 whitespace-nowrap", children: [_jsx(Icon, { "aria-hidden": true, className: cx("size-3.5 shrink-0", className), strokeWidth: 2.5 }), ratio != null && _jsx("span", { className: "font-mono text-xs text-canvas-foreground tabular-nums", children: ratio.toFixed(1) }), _jsx("span", { className: cx(ratio != null && "text-xs text-muted-foreground"), children: ratio != null ? label : null })] }));
 }
 function PageGrid({ mode, colours, grounds }) {
     const probe = useRef(null);
@@ -88,10 +116,10 @@ function PageGrid({ mode, colours, grounds }) {
                 out[`${c}|${g}`] = contrastRatio(painted[c], painted[g]);
         setRatios(out);
     }, [colours, grounds]);
-    return (_jsxs("div", { className: "-mx-1 overflow-x-auto px-1", tabIndex: 0, role: "region", "aria-label": `Colours on each background, ${mode} mode`, children: [_jsx("div", { ref: probe, "data-theme": mode, hidden: true }), _jsxs("table", { className: "w-full min-w-[40rem] border-collapse text-left text-sm", children: [_jsx("caption", { className: "pb-4 text-left text-lg font-medium capitalize", children: mode }), _jsx("thead", { children: _jsxs("tr", { className: "text-xs text-muted-foreground", children: [_jsx("th", { scope: "col", className: "pr-4 pb-3 font-medium", children: "Colour" }), grounds.map((g) => (_jsx("th", { scope: "col", className: "px-3 pb-3 font-mono font-normal", children: g.slice(2) }, g)))] }) }), _jsx("tbody", { children: colours.map((c) => (_jsxs("tr", { className: "border-t border-border", children: [_jsx("th", { scope: "row", className: "py-3.5 pr-4 font-mono text-xs font-medium", children: c.slice(2) }), grounds.map((g) => {
+    return (_jsxs("div", { className: "-mx-1 overflow-x-auto px-1 pb-2", tabIndex: 0, role: "region", "aria-label": `Colours on each background, ${mode} mode`, children: [_jsx("div", { ref: probe, "data-theme": mode, hidden: true }), _jsxs("table", { className: "w-full min-w-[46rem] table-fixed border-collapse text-left text-sm", children: [_jsx("caption", { className: "pb-5 text-left text-lg font-medium capitalize", children: mode }), _jsx("thead", { children: _jsxs("tr", { className: "text-xs text-muted-foreground", children: [_jsx("th", { scope: "col", className: "w-32 pr-4 pb-3 font-medium", children: "Colour" }), grounds.map((g) => (_jsx("th", { scope: "col", className: "px-2 pb-3 font-mono font-normal", children: g.slice(2) }, g)))] }) }), _jsx("tbody", { children: colours.map((c) => (_jsxs("tr", { className: "border-t border-border", children: [_jsx("th", { scope: "row", className: "py-4 pr-4 align-top font-mono text-xs font-medium break-words", children: c.slice(2) }), grounds.map((g) => {
                                     const r = ratios[`${c}|${g}`];
-                                    const mark = r == null ? "" : r >= 4.5 ? "text" : r >= 3 ? "shape" : "none";
-                                    return (_jsx("td", { className: "px-3 py-3.5", children: _jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx("span", { "data-theme": mode, className: "flex h-10 w-14 items-center justify-center rounded-lg border border-(--border) text-base font-bold", style: { background: `var(${g})`, color: `var(${c})` }, "aria-hidden": true, children: "Aa" }), r != null && (_jsxs("span", { className: cx("inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-mono text-xs", mark === "text" && "bg-success-subdued text-success-subdued-foreground", mark === "shape" && "bg-muted text-muted-foreground", mark === "none" && "bg-destructive-subdued text-destructive-subdued-foreground"), children: [r.toFixed(1), " ", mark] }))] }) }, g));
+                                    const mark = r == null ? undefined : r >= 4.5 ? "text" : r >= 3 ? "shape" : "none";
+                                    return (_jsx("td", { className: "px-2 py-4 align-top", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { "data-theme": mode, "aria-hidden": true, className: "flex h-12 items-center justify-center rounded-lg text-lg font-bold ring-1 ring-(--border) ring-inset", style: { background: `var(${g})`, color: `var(${c})` }, children: "Aa" }), mark && r != null && _jsx(Verdict, { mark: mark, ratio: r })] }) }, g));
                                 })] }, c))) })] })] }));
 }
 /** The primitive ramps, one row per colour family, each step painted from its own token. */

package/dist/workbench.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { handlerNames } from "./lib/handlers.js";
 import { Live } from "./lib/live.js";
 import { Tabs } from "@base-ui/react/tabs";
 import { Toggle } from "@base-ui/react/toggle";
@@ -75,7 +76,7 @@ export function Workbench({ entry, props: base = {}, children: initialText = ent
     const own = Object.entries(entry.props).filter(([name, p]) => !axisNames.has(name) && !PLUMBING.has(name) && p.deprecated === undefined);
     // disabled is a pinned state ("Off"), not a prop control
     const settable = own.filter(([name, p]) => !isFunction(name, p) && !p.from && name !== "disabled");
-    const handlers = own.filter(([name, p]) => isFunction(name, p)).map(([name]) => name);
+    const handlers = handlerNames(Object.fromEntries(own));
     const canDisable = "disabled" in entry.props;
     const [variants, setVariants] = useState({});
     const [values, setValues] = useState({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designtools/docs",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Design system docs as a package: pages, navigation, search, a workbench per component, rules, patterns, brand pages and markdown for agents, generated from the @designtools/manifest and themed by your tokens. One Next adapter serves them inside your app or as a standalone site.",
   "type": "module",
   "license": "MIT",

package/src/lib/handlers.ts

@@ -0,0 +1,14 @@
+import type { PropEntry } from "./manifest-types";
+
+const isFunction = (name: string, p: PropEntry) => /=>|^\(|Function|Handler/.test(p.type) || /^on[A-Z]/.test(name);
+
+/**
+ * The props the workbench logs to its Actions tab: event handlers only. A function prop that is not a
+ * handler (getAriaValueText, a formatter, a render function) is called while the component renders, and
+ * logging it re-renders the component, which calls it again, for ever.
+ */
+export function handlerNames(props: Record<string, PropEntry>): string[] {
+  return Object.entries(props)
+    .filter(([name, p]) => isFunction(name, p) && /^on[A-Z]/.test(name))
+    .map(([name]) => name);
+}

package/src/next/pages.tsx

@@ -1,7 +1,5 @@
 import { ArrowRight, ArrowUpRight } from "lucide-react";
 import Link from "next/link";
-import type { ReactNode } from "react";
-import { cx, display } from "../lib/cx";
 import { AdherenceSummary } from "../adherence-summary";
 import { Anatomy } from "../anatomy";
 import { Examples } from "../examples";
@@ -307,112 +305,57 @@ function Overview({ site }: { site: Site }) {
   const count = families.reduce((n, g) => n + g.families.length, 0);
   const brandPages = site.editorial.filter((p) => (p.section ?? "brand") === "brand");
   const brandFirst = brandPages[0];
-  const products = site.taxonomy.terms.filter((t) => t.kind === "product" && t.wrong?.length);
-  const example = products[0] ?? site.taxonomy.terms.find((t) => t.wrong?.length);
-  const fills = ["--primary", "--neutral", "--success", "--warning", "--destructive"].filter((n) =>
-    site.tokens.tokens.some((t) => t.name === n),
-  );
   const share = config.adherence?.summary.share;
 
-  // each section of the system, why it exists, how much is in it, and a glimpse of it, live from the manifest
-  const sections: { title: string; href: string; why: string; count: string; preview: ReactNode }[] = [];
+  // each section of the system, why it exists and how much is in it
+  const sections: { title: string; href: string; why: string; count: string }[] = [];
   if (brandFirst || site.shows("logo"))
     sections.push({
       title: "Brand",
       href: `${base}/${brandFirst?.slug ?? "brand/logo"}`,
       why: "What the brand believes, how it sounds and how it looks, so every screen and sentence comes from the same place.",
-      count: `${brandPages.length + (site.assets.assets.some((a) => a.kind === "logo") ? 1 : 0)} pages`,
-      preview: config.logo ? <span className="flex h-10 items-center [&_img]:h-8 [&_svg]:h-8">{config.logo}</span> : null,
+      count: `${brandPages.length + (site.assets.assets.some((a) => a.kind === "logo") ? 1 : 0)} pages`
     });
   sections.push({
     title: "Foundations",
     href: `${base}/colour`,
     why: "Colour, type and the scale, generated from the tokens and measured in both modes, so nothing is a guess.",
     count: `${site.tokens.tokens.length} tokens`,
-    preview: (
-      <span className="flex items-center gap-4">
-        <span className="flex -space-x-1.5">
-          {fills.map((n) => (
-            <span key={n} aria-hidden className="size-8 rounded-full ring-2 ring-canvas" style={{ background: `var(${n})` }} />
-          ))}
-        </span>
-        <span aria-hidden className={cx(display, "text-3xl leading-none tracking-tight")}>
-          Aa
-        </span>
-      </span>
-    ),
   });
   if (site.rules.rules.length)
     sections.push({
       title: "Rules",
       href: `${base}/rules`,
       why: "The lines the brand and the interface hold, each written for people, with the check that proves it.",
-      count: `${site.rules.rules.length} rules, ${site.rules.rules.filter((r) => r.status === "confirmed").length} confirmed`,
-      preview: (
-        <span className="flex flex-col gap-1.5 text-sm">
-          {site.rules.rules
-            .filter((r) => r.kind === "brand")
-            .slice(0, 2)
-            .map((r) => (
-              <span key={r.id} className="flex items-center gap-2">
-                <StatusBadge status={r.status} />
-                <span className="truncate">{r.title}</span>
-              </span>
-            ))}
-        </span>
-      ),
+      count: `${site.rules.rules.length} rules, ${site.rules.rules.filter((r) => r.status === "confirmed").length} confirmed`
     });
   if (site.shows("components") && count)
     sections.push({
       title: "Components",
       href: `${base}/components/${slugOf(families[0].families[0].head)}`,
       why: "The real components the product is built from, each with when to use it, a live workbench and an accessibility report.",
-      count: `${count} components`,
-      preview: (
-        <span className="flex flex-wrap gap-1.5">
-          {families.slice(0, 6).map((g) => (
-            <span key={g.category} className="inline-flex min-h-7 items-center rounded-md bg-muted px-2 text-xs">
-              {g.category} <span className="ml-1.5 text-muted-foreground tabular-nums">{g.families.length}</span>
-            </span>
-          ))}
-        </span>
-      ),
+      count: `${count} components`
     });
   if (site.patterns.patterns.length)
     sections.push({
       title: "Patterns",
       href: `${base}/patterns/${site.patterns.patterns[0].id}`,
       why: "The screens the product keeps making, composed of the components, so a recurring problem is solved once.",
-      count: `${site.patterns.patterns.length} patterns`,
-      preview: <span className="text-sm text-muted-foreground">{site.patterns.patterns.slice(0, 3).map((p) => p.name).join(" · ")}</span>,
+      count: `${site.patterns.patterns.length} patterns`
     });
   if (site.shows("standards") && (config.baselines || config.adherence))
     sections.push({
       title: "Standards",
       href: `${base}/standards`,
       why: "The bar the product is held to, and how closely it follows the system today, reported on every change.",
-      count: share == null ? "Baselines agreed" : `${Math.round(share * 100)}% of the product on the system`,
-      preview:
-        share == null ? null : (
-          <span className="flex w-full max-w-56 items-center gap-3">
-            <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
-              <span className="block h-full rounded-full bg-canvas-foreground" style={{ width: `${Math.round(share * 100)}%` }} />
-            </span>
-            <span className="text-sm tabular-nums">{Math.round(share * 100)}%</span>
-          </span>
-        ),
+      count: share == null ? "Baselines agreed" : `${Math.round(share * 100)}% of the product on the system`
     });
   if (site.shows("vocabulary") && site.taxonomy.terms.length)
     sections.push({
       title: "Vocabulary",
       href: `${base}/vocabulary`,
       why: "One name for each thing, and the names people reach for instead, so people and agents mean the same thing.",
-      count: `${site.taxonomy.terms.length} terms`,
-      preview: example ? (
-        <span className="text-sm">
-          Say <strong className="font-semibold">{example.name}</strong>, <span className="text-muted-foreground line-through decoration-current/40">{example.wrong?.[0]}</span>
-        </span>
-      ) : null,
+      count: `${site.taxonomy.terms.length} terms`
     });
 
   const loop = [
@@ -441,7 +384,6 @@ function Overview({ site }: { site: Site }) {
                   <span className="shrink-0 text-xs text-muted-foreground tabular-nums">{sec.count}</span>
                 </span>
                 <span className="max-w-md text-base leading-relaxed text-muted-foreground">{sec.why}</span>
-                {sec.preview && <span className="mt-auto flex min-h-10 items-center pt-2">{sec.preview}</span>}
               </Link>
             </li>
           ))}