@designtools/docs 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @designtools/docs
 
+## 0.2.2
+
+### Patch Changes
+
+- c4b61fb: The workbench no longer freezes on a component with a function prop it calls while rendering (Base UI's Meter and Progress, through `getAriaValueText`): only event handlers (`on…`) are logged to Actions now, so logging can never re-render the component into calling it again. The overview's section list loses its glimpses (colour dots, the logo, sample rules): each part is its name, its count and why it exists.
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/lib/handlers.d.ts

@@ -0,0 +1,7 @@
+import type { PropEntry } from "./manifest-types.js";
+/**
+ * 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 declare function handlerNames(props: Record<string, PropEntry>): string[];

package/dist/lib/handlers.js

@@ -0,0 +1,11 @@
+const isFunction = (name, p) => /=>|^\(|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) {
+    return Object.entries(props)
+        .filter(([name, p]) => isFunction(name, p) && /^on[A-Z]/.test(name))
+        .map(([name]) => name);
+}

package/dist/next/pages.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowRight, ArrowUpRight } from "lucide-react";
 import Link from "next/link";
-import { cx, display } from "../lib/cx.js";
 import { AdherenceSummary } from "../adherence-summary.js";
 import { Anatomy } from "../anatomy.js";
 import { Examples } from "../examples.js";
 import { Glossary } from "../glossary.js";
 import { Imagery } from "../imagery.js";
 import { groupFamilies, slugOf } from "../lib/manifest.js";
-import { StatusBadge } from "../lib/status.js";
 import { LogoUsage } from "../logo-usage.js";
 import { PageActions } from "../page-actions.js";
 import { Pattern } from "../pattern.js";
@@ -112,69 +110,56 @@ function Overview({ 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
+    // each section of the system, why it exists and how much is in it
     const sections = [];
     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 ? _jsx("span", { className: "flex h-10 items-center [&_img]:h-8 [&_svg]:h-8", children: config.logo }) : 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: (_jsxs("span", { className: "flex items-center gap-4", children: [_jsx("span", { className: "flex -space-x-1.5", children: fills.map((n) => (_jsx("span", { "aria-hidden": true, className: "size-8 rounded-full ring-2 ring-canvas", style: { background: `var(${n})` } }, n))) }), _jsx("span", { "aria-hidden": true, className: cx(display, "text-3xl leading-none tracking-tight"), children: "Aa" })] })),
     });
     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: (_jsx("span", { className: "flex flex-col gap-1.5 text-sm", children: site.rules.rules
-                    .filter((r) => r.kind === "brand")
-                    .slice(0, 2)
-                    .map((r) => (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(StatusBadge, { status: r.status }), _jsx("span", { className: "truncate", children: r.title })] }, r.id))) })),
+            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: (_jsx("span", { className: "flex flex-wrap gap-1.5", children: families.slice(0, 6).map((g) => (_jsxs("span", { className: "inline-flex min-h-7 items-center rounded-md bg-muted px-2 text-xs", children: [g.category, " ", _jsx("span", { className: "ml-1.5 text-muted-foreground tabular-nums", children: g.families.length })] }, g.category))) })),
+            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: _jsx("span", { className: "text-sm text-muted-foreground", children: site.patterns.patterns.slice(0, 3).map((p) => p.name).join(" · ") }),
+            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 : (_jsxs("span", { className: "flex w-full max-w-56 items-center gap-3", children: [_jsx("span", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-muted", children: _jsx("span", { className: "block h-full rounded-full bg-canvas-foreground", style: { width: `${Math.round(share * 100)}%` } }) }), _jsxs("span", { className: "text-sm tabular-nums", children: [Math.round(share * 100), "%"] })] })),
+            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 ? (_jsxs("span", { className: "text-sm", children: ["Say ", _jsx("strong", { className: "font-semibold", children: example.name }), ", ", _jsx("span", { className: "text-muted-foreground line-through decoration-current/40", children: example.wrong?.[0] })] })) : null,
+            count: `${site.taxonomy.terms.length} terms`
         });
     const loop = [
         ["Written once", "The components, tokens and rules live in the product's own code. Nobody keeps a second copy in a slide deck or a wiki."],
@@ -183,6 +168,6 @@ function Overview({ site }) {
         ["Checked", "Each rule names the check that proves it. Stale docs stop a commit; everything else is reported."],
         ["Measured", "A report on every change shows how closely the product follows the system. It informs the conversation; it never blocks the work."],
     ];
-    return (_jsxs(_Fragment, { children: [!config.hero && (_jsx(DocsHeader, { title: site.title, lead: config.lead ?? "The brand and the design system in one place, for the people who make the product and the agents that build it with them.", children: _jsx(PageActions, { basePath: base }) })), _jsx(DocsSection, { title: "What's here, and why", lead: "Each part of the system has one job. Together they mean the product, its people and its agents work from the same source.", children: _jsx("ul", { "data-slot": "overview-sections", className: "grid gap-x-12 md:grid-cols-2", children: sections.map((sec) => (_jsx("li", { className: "border-t border-border", children: _jsxs(Link, { href: sec.href, className: "group flex h-full flex-col gap-4 py-7 focus-visible:outline-2 focus-visible:outline-ring", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-4", children: [_jsx("span", { className: "text-2xl leading-tight tracking-tight underline-offset-[6px] group-hover:underline", children: sec.title }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: sec.count })] }), _jsx("span", { className: "max-w-md text-base leading-relaxed text-muted-foreground", children: sec.why }), sec.preview && _jsx("span", { className: "mt-auto flex min-h-10 items-center pt-2", children: sec.preview })] }) }, sec.title))) }) }), config.overview?.agentic !== false && (_jsxs(DocsSection, { title: "Why this is agentic", lead: config.overview?.agenticLead ??
+    return (_jsxs(_Fragment, { children: [!config.hero && (_jsx(DocsHeader, { title: site.title, lead: config.lead ?? "The brand and the design system in one place, for the people who make the product and the agents that build it with them.", children: _jsx(PageActions, { basePath: base }) })), _jsx(DocsSection, { title: "What's here, and why", lead: "Each part of the system has one job. Together they mean the product, its people and its agents work from the same source.", children: _jsx("ul", { "data-slot": "overview-sections", className: "grid gap-x-12 md:grid-cols-2", children: sections.map((sec) => (_jsx("li", { className: "border-t border-border", children: _jsxs(Link, { href: sec.href, className: "group flex h-full flex-col gap-4 py-7 focus-visible:outline-2 focus-visible:outline-ring", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-4", children: [_jsx("span", { className: "text-2xl leading-tight tracking-tight underline-offset-[6px] group-hover:underline", children: sec.title }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: sec.count })] }), _jsx("span", { className: "max-w-md text-base leading-relaxed text-muted-foreground", children: sec.why })] }) }, sec.title))) }) }), config.overview?.agentic !== false && (_jsxs(DocsSection, { title: "Why this is agentic", lead: config.overview?.agenticLead ??
                     "A design system used to be a document people were asked to follow. This one is the source the product, its people and its AI agents all work from, and it checks itself.", children: [_jsx("ol", { "data-slot": "overview-loop", className: "grid gap-x-6 gap-y-8 sm:grid-cols-2 xl:grid-cols-5", children: loop.map(([title, body], i) => (_jsxs("li", { className: "relative flex flex-col gap-3 xl:pr-2", children: [_jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-full bg-canvas-foreground text-sm font-medium text-canvas tabular-nums", children: i + 1 }), i < loop.length - 1 && _jsx("span", { "aria-hidden": true, className: "hidden h-px flex-1 bg-border xl:block" })] }), _jsx("span", { className: "text-lg leading-snug tracking-tight", children: title }), _jsx("span", { className: "text-sm leading-relaxed text-muted-foreground", children: body })] }, title))) }), _jsxs("p", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground", children: ["See it the way an agent does:", _jsxs("a", { href: `${base}.md`, className: "inline-flex items-center gap-1 font-medium text-canvas-foreground underline underline-offset-4 hover:decoration-2", children: ["this page as markdown ", _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5" })] })] })] })), _jsx(DocsFooter, { provenance: config.provenance })] }));
 }

package/dist/styles.css

@@ -10,7 +10,6 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
@@ -630,10 +629,6 @@
     margin-left: .25rem;
   }
 
-  :where([data-designtools]) .ml-1\.5:not([data-docs-content] *), .ml-1\.5:where([data-designtools]):not([data-docs-content] *) {
-    margin-left: .375rem;
-  }
-
   :where([data-designtools]) .ml-3:not([data-docs-content] *), .ml-3:where([data-designtools]):not([data-docs-content] *) {
     margin-left: .75rem;
   }
@@ -783,10 +778,6 @@
     height: .125rem;
   }
 
-  :where([data-designtools]) .h-1\.5:not([data-docs-content] *), .h-1\.5:where([data-designtools]):not([data-docs-content] *) {
-    height: .375rem;
-  }
-
   :where([data-designtools]) .h-2:not([data-docs-content] *), .h-2:where([data-designtools]):not([data-docs-content] *) {
     height: .5rem;
   }
@@ -903,10 +894,6 @@
     min-height: 2.25rem;
   }
 
-  :where([data-designtools]) .min-h-10:not([data-docs-content] *), .min-h-10:where([data-designtools]):not([data-docs-content] *) {
-    min-height: 2.5rem;
-  }
-
   :where([data-designtools]) .min-h-11:not([data-docs-content] *), .min-h-11:where([data-designtools]):not([data-docs-content] *) {
     min-height: 2.75rem;
   }
@@ -1027,10 +1014,6 @@
     max-width: 7rem;
   }
 
-  :where([data-designtools]) .max-w-56:not([data-docs-content] *), .max-w-56:where([data-designtools]):not([data-docs-content] *) {
-    max-width: 14rem;
-  }
-
   :where([data-designtools]) .max-w-64:not([data-docs-content] *), .max-w-64:where([data-designtools]):not([data-docs-content] *) {
     max-width: 16rem;
   }
@@ -1345,12 +1328,6 @@
     column-gap: 3rem;
   }
 
-  :where([data-designtools]) :where(.-space-x-1\.5 > :not(:last-child)):not([data-docs-content] *), :where(.-space-x-1\.5 > :not(:last-child)):where([data-designtools]):not([data-docs-content] *) {
-    --tw-space-x-reverse: 0;
-    margin-inline-start: calc(calc(.25rem * -1.5) * var(--tw-space-x-reverse));
-    margin-inline-end: calc(calc(.25rem * -1.5) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   :where([data-designtools]) .gap-y-1:not([data-docs-content] *), .gap-y-1:where([data-designtools]):not([data-docs-content] *) {
     row-gap: .25rem;
   }
@@ -2423,11 +2400,6 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  :where([data-designtools]) .ring-2:not([data-docs-content] *), .ring-2:where([data-designtools]):not([data-docs-content] *) {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-
   :where([data-designtools]) .ring-\(--border\):not([data-docs-content] *), .ring-\(--border\):where([data-designtools]):not([data-docs-content] *) {
     --tw-ring-color: var(--border);
   }
@@ -2446,10 +2418,6 @@
     --tw-ring-color: var(--border, #e2e4e8);
   }
 
-  :where([data-designtools]) .ring-canvas:not([data-docs-content] *), .ring-canvas:where([data-designtools]):not([data-docs-content] *) {
-    --tw-ring-color: var(--canvas, #fff);
-  }
-
   :where([data-designtools]) .ring-current\/15:not([data-docs-content] *), .ring-current\/15:where([data-designtools]):not([data-docs-content] *) {
     --tw-ring-color: currentcolor;
   }
@@ -3312,10 +3280,6 @@
     font-size: .875em;
   }
 
-  :where([data-designtools]) .\[\&_img\]\:h-8 img:not([data-docs-content] *), .\[\&_img\]\:h-8 img:where([data-designtools]):not([data-docs-content] *) {
-    height: 2rem;
-  }
-
   :where([data-designtools]) .\[\&_pre\]\:break-words pre:not([data-docs-content] *), .\[\&_pre\]\:break-words pre:where([data-designtools]):not([data-docs-content] *) {
     overflow-wrap: break-word;
   }
@@ -3324,10 +3288,6 @@
     white-space: pre-wrap;
   }
 
-  :where([data-designtools]) .\[\&_svg\]\:h-8 svg:not([data-docs-content] *), .\[\&_svg\]\:h-8 svg:where([data-designtools]):not([data-docs-content] *) {
-    height: 2rem;
-  }
-
   :where([data-designtools]) .\[\&\:\:-webkit-details-marker\]\:hidden:not([data-docs-content] *)::-webkit-details-marker, .\[\&\:\:-webkit-details-marker\]\:hidden:where([data-designtools]):not([data-docs-content] *)::-webkit-details-marker {
     display: none;
   }
@@ -3380,12 +3340,6 @@
   inherits: false
 }
 
-@property --tw-space-x-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;

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.1",
+  "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>
           ))}

package/src/workbench.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { handlerNames } from "./lib/handlers";
 import { Live } from "./lib/live";
 import { Tabs } from "@base-ui/react/tabs";
 import { Toggle } from "@base-ui/react/toggle";
@@ -133,7 +134,7 @@ export function Workbench({
   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<Record<string, string>>({});