@designtools/docs 0.0.0-stage → 0.1.0

package/src/a11y-panel.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+import { ArrowUpRight, ChevronDown, CircleAlert, CircleCheck, CircleHelp, Hand, LoaderCircle, RotateCcw } from "lucide-react";
+import { type ReactNode, type RefObject, useCallback, useEffect, useRef, useState } from "react";
+import { cx } from "./lib/cx";
+import type { ComponentEntry } from "./lib/manifest-types";
+
+interface Node {
+  target: string;
+  html: string;
+  summary?: string;
+}
+
+interface Finding {
+  id: string;
+  impact: string | null;
+  help: string;
+  description: string;
+  helpUrl: string;
+  nodes: Node[];
+}
+
+export interface AxeResult {
+  violations: Finding[];
+  incomplete: Finding[];
+  passes: Finding[];
+  version: string;
+}
+
+type Status = "idle" | "running" | "done" | "failed";
+
+/**
+ * Runs axe-core over an element and keeps the result: on demand, or again
+ * whenever `watch` changes, debounced. axe loads on the first run, so a page
+ * that never checks never ships it.
+ */
+export function useAxe(target: RefObject<HTMLElement | null>, { auto = false, watch }: { auto?: boolean; watch?: unknown } = {}) {
+  const [status, setStatus] = useState<Status>("idle");
+  const [result, setResult] = useState<AxeResult | null>(null);
+
+  const run = useCallback(async () => {
+    if (!target.current) return;
+    setStatus("running");
+    try {
+      const axe = (await import("axe-core")).default;
+      const r = await axe.run(target.current, { resultTypes: ["violations", "incomplete", "passes"] });
+      const map = (list: typeof r.violations): Finding[] =>
+        list.map((v) => ({
+          id: v.id,
+          impact: v.impact ?? null,
+          help: v.help,
+          description: v.description,
+          helpUrl: v.helpUrl,
+          nodes: v.nodes.map((n) => ({ target: n.target.join(" "), html: n.html, summary: n.failureSummary })),
+        }));
+      setResult({ violations: map(r.violations), incomplete: map(r.incomplete), passes: map(r.passes), version: axe.version });
+      setStatus("done");
+    } catch {
+      setStatus("failed");
+    }
+  }, [target]);
+
+  useEffect(() => {
+    if (!auto) return;
+    const timer = setTimeout(run, 400);
+    return () => clearTimeout(timer);
+  }, [auto, run, watch]);
+
+  return { status, result, run };
+}
+
+const SEVERE = new Set(["critical", "serious"]);
+
+/**
+ * The whole of an axe run, as a report: what failed, on which elements and how
+ * to fix it; what axe could not decide and a person must; what passed; and the
+ * checks no tool makes, from the component's own `@role`, `@keyboard` and `@aria`.
+ */
+export function AxeReport({
+  status,
+  result,
+  run,
+  entry,
+  scope,
+}: {
+  status: Status;
+  result: AxeResult | null;
+  run: () => void;
+  entry?: ComponentEntry;
+  /** What was checked, in a line: "Button, variant outline, in dark mode". */
+  scope?: string;
+}) {
+  return (
+    <div data-slot="a11y-report" className="flex flex-col gap-8">
+      <div className="flex flex-wrap items-end justify-between gap-6">
+        <dl className="flex flex-wrap gap-x-10 gap-y-4">
+          <Count label="Violations" value={result?.violations.length} tone={result?.violations.length ? "bad" : "good"} />
+          <Count label="Needs a person" value={result?.incomplete.length} />
+          <Count label="Passed" value={result?.passes.length} />
+        </dl>
+        <div className="flex items-center gap-3">
+          <span className="text-xs text-muted-foreground" aria-live="polite">
+            {status === "running" ? "Checking…" : status === "failed" ? "axe could not run. Is axe-core installed?" : result ? `axe-core ${result.version}` : ""}
+          </span>
+          <button
+            type="button"
+            onClick={run}
+            disabled={status === "running"}
+            className="inline-flex min-h-9 cursor-pointer items-center gap-2 rounded-lg border border-border px-3 text-sm font-medium hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring disabled:cursor-wait disabled:opacity-60"
+          >
+            {status === "running" ? <LoaderCircle aria-hidden className="size-4 animate-spin" /> : <RotateCcw aria-hidden className="size-4" />}
+            {result ? "Check again" : "Run axe"}
+          </button>
+        </div>
+      </div>
+      {scope && <p className="-mt-4 text-sm text-muted-foreground">Checked: {scope}.</p>}
+
+      {result && result.violations.length === 0 && (
+        <p className="flex items-center gap-2 text-sm text-success-subdued-foreground">
+          <CircleCheck aria-hidden className="size-4" />
+          No violations in what axe can measure. That is about a third of WCAG; the rest is below.
+        </p>
+      )}
+      {result && result.violations.length > 0 && (
+        <Group title="Violations" icon={CircleAlert}>
+          {result.violations.map((f) => (
+            <FindingRow key={f.id} finding={f} open />
+          ))}
+        </Group>
+      )}
+      {result && result.incomplete.length > 0 && (
+        <Group title="Needs a person" icon={CircleHelp} lead="axe found these but could not decide them: look at each.">
+          {result.incomplete.map((f) => (
+            <FindingRow key={f.id} finding={f} />
+          ))}
+        </Group>
+      )}
+
+      <Group title="Check by hand" icon={Hand} lead="What no tool measures. Try each with a keyboard and a screen reader.">
+        <ul className="flex flex-col divide-y divide-border border-y border-border text-sm">
+          <Manual>
+            Tab reaches it, and the focus ring is visible on every background it sits on.
+          </Manual>
+          {entry?.a11y?.keyboard?.length ? (
+            <Manual>
+              It answers{" "}
+              {entry.a11y.keyboard.map((k, i) => (
+                <span key={k}>
+                  {i > 0 && (i === entry.a11y!.keyboard!.length - 1 ? " and " : ", ")}
+                  <kbd className="rounded-sm border border-border px-1.5 font-mono text-xs">{k}</kbd>
+                </span>
+              ))}
+              .
+            </Manual>
+          ) : null}
+          <Manual>
+            A screen reader announces its name{entry?.a11y?.role ? (
+              <>
+                {" "}and its role, <code className="font-mono text-xs">{entry.a11y.role}</code>
+              </>
+            ) : (
+              " and its role"
+            )}
+            , and any change of state.
+          </Manual>
+          <Manual>It still works at 200% zoom, and at a phone&apos;s width.</Manual>
+          {entry?.aria && (
+            <Manual>
+              It follows its{" "}
+              <a href={entry.aria} className="inline-flex items-center gap-0.5 font-medium underline decoration-border underline-offset-4 hover:decoration-current">
+                ARIA pattern <ArrowUpRight aria-hidden className="size-3.5" />
+              </a>
+              .
+            </Manual>
+          )}
+        </ul>
+      </Group>
+
+      {result && result.passes.length > 0 && (
+        <details className="group">
+          <summary className="flex min-h-(--docs-target,2.75rem) w-fit cursor-pointer list-none items-center gap-2 text-sm font-medium [&::-webkit-details-marker]:hidden">
+            <CircleCheck aria-hidden className="size-4 text-muted-foreground" />
+            {result.passes.length} checks passed
+            <ChevronDown aria-hidden className="size-4 text-muted-foreground transition-transform group-open:rotate-180" />
+          </summary>
+          <ul className="mt-2 grid gap-x-8 gap-y-1.5 text-sm text-muted-foreground sm:grid-cols-2">
+            {result.passes.map((p) => (
+              <li key={p.id} className="flex items-baseline justify-between gap-3">
+                <span>{p.help}</span>
+                <span className="font-mono text-xs tabular-nums">×{p.nodes.length}</span>
+              </li>
+            ))}
+          </ul>
+        </details>
+      )}
+    </div>
+  );
+}
+
+function Count({ label, value, tone }: { label: string; value?: number; tone?: "good" | "bad" }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <dt className="text-xs text-muted-foreground">{label}</dt>
+      <dd
+        className={cx(
+          "text-4xl leading-none font-light tracking-tight tabular-nums",
+          tone === "bad" && "text-destructive-subdued-foreground",
+          value === undefined && "text-muted-foreground",
+        )}
+      >
+        {value ?? "–"}
+      </dd>
+    </div>
+  );
+}
+
+function Group({ title, icon: Icon, lead, children }: { title: string; icon: typeof Hand; lead?: string; children: ReactNode }) {
+  return (
+    <section className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1">
+        <h4 className="flex items-center gap-2 text-base font-medium">
+          <Icon aria-hidden className="size-4 text-muted-foreground" />
+          {title}
+        </h4>
+        {lead && <p className="text-sm text-muted-foreground">{lead}</p>}
+      </div>
+      <div className="flex flex-col gap-2">{children}</div>
+    </section>
+  );
+}
+
+function Manual({ children }: { children: ReactNode }) {
+  return (
+    <li className="flex items-start gap-3 py-3">
+      <span aria-hidden className="mt-1.5 size-1.5 shrink-0 rounded-full bg-muted-foreground" />
+      <span>{children}</span>
+    </li>
+  );
+}
+
+function FindingRow({ finding: f, open }: { finding: Finding; open?: boolean }) {
+  const severe = SEVERE.has(f.impact ?? "");
+  return (
+    <details open={open} className="group rounded-lg border border-border">
+      <summary className="flex min-h-(--docs-target,2.75rem) cursor-pointer list-none items-center gap-3 px-4 py-2 text-sm [&::-webkit-details-marker]:hidden">
+        <span
+          className={cx(
+            "rounded-full px-2 py-0.5 text-xs font-medium capitalize",
+            severe ? "bg-destructive-subdued text-destructive-subdued-foreground" : "bg-muted text-muted-foreground",
+          )}
+        >
+          {f.impact ?? "unrated"}
+        </span>
+        <span className="min-w-0 flex-1 font-medium">{f.help}</span>
+        <span className="font-mono text-xs text-muted-foreground">
+          {f.nodes.length} {f.nodes.length === 1 ? "element" : "elements"}
+        </span>
+        <ChevronDown aria-hidden className="size-4 text-muted-foreground transition-transform group-open:rotate-180" />
+      </summary>
+      <div className="flex flex-col gap-3 border-t border-border px-4 py-3 text-sm">
+        <p className="text-muted-foreground">
+          {f.description}{" "}
+          <a href={f.helpUrl} className="inline-flex items-center gap-0.5 font-medium text-canvas-foreground underline decoration-border underline-offset-4 hover:decoration-current">
+            How to fix <ArrowUpRight aria-hidden className="size-3.5" />
+          </a>
+        </p>
+        <ul className="flex flex-col gap-2">
+          {f.nodes.map((n, i) => (
+            <li key={`${n.target}-${i}`} className="flex flex-col gap-1.5 rounded-md bg-muted/60 p-3">
+              <code className="font-mono text-xs text-muted-foreground">{n.target}</code>
+              <code className="font-mono text-xs break-all">{n.html}</code>
+              {n.summary && <p className="text-xs whitespace-pre-line text-muted-foreground">{n.summary}</p>}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </details>
+  );
+}
+
+/**
+ * Runs axe-core over what it wraps, on demand, and shows the full report under
+ * it. A clean run is not a pass: axe catches roughly a third of WCAG problems,
+ * so the report lists the checks a person makes too.
+ */
+export function A11yPanel({ entry, children }: { entry?: ComponentEntry; children: ReactNode }) {
+  const box = useRef<HTMLDivElement>(null);
+  const axe = useAxe(box);
+  return (
+    <div data-slot="a11y-panel" className="flex flex-col gap-6">
+      <div ref={box} data-slot="a11y-target">
+        {children}
+      </div>
+      <AxeReport {...axe} entry={entry} />
+    </div>
+  );
+}

package/src/adherence-summary.tsx

@@ -0,0 +1,134 @@
+import type { AdherenceReport, Counts } from "./lib/adherence-types";
+import { ChevronDown } from "lucide-react";
+import { cx } from "./lib/cx";
+
+/**
+ * The latest adherence report: how much of what the system could render comes
+ * from it, the classes that bypass the tokens, and where a className fights a
+ * component's variants. It informs; it never blocks.
+ */
+export function AdherenceSummary({ report }: { report: AdherenceReport }) {
+  const s = report.summary;
+  const stats: [string, string][] = [
+    ["Components used", `${s.componentsUsed} of ${s.componentsUsed + s.componentsUnused.length}`],
+    ["Raw elements", String(s.rawElements)],
+    ["Off-system values", String(s.offSystemValues)],
+    ["Overrides", String(s.overrides)],
+  ];
+  const pct = s.share === null ? null : Math.round(s.share * 100);
+  return (
+    <div data-slot="adherence-summary" className="flex flex-col gap-6">
+      <div className="grid gap-x-12 gap-y-8 border-t border-border pt-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.6fr)]">
+        <div data-slot="adherence-share" className="flex flex-col gap-4">
+          <span className="text-sm font-medium text-muted-foreground">From the system</span>
+          <span className="flex flex-col gap-3">
+            <span className="text-7xl leading-none font-light tracking-tighter tabular-nums">{share(s.share)}</span>
+            {pct !== null && (
+              <span
+                role="meter"
+                aria-label="Share from the system"
+                aria-valuenow={pct}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                className="block h-2 overflow-hidden rounded-full bg-muted"
+              >
+                <span className="block h-full rounded-full bg-primary" style={{ width: `${pct}%` }} />
+              </span>
+            )}
+          </span>
+        </div>
+        <dl className="grid grid-cols-2 gap-x-8 gap-y-6 self-end">
+          {stats.map(([label, value]) => (
+            <div key={label} data-slot="adherence-stat" className="flex flex-col gap-1">
+              <dt className="text-xs text-muted-foreground">{label}</dt>
+              <dd className="text-4xl font-light tracking-tight tabular-nums">{value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+      {s.replaceable.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          No component declares <code className="font-mono text-xs">@replaces</code>, so raw elements are not counted and the share is
+          not yet meaningful.
+        </p>
+      )}
+      {report.routes.length > 0 && (
+        <div className="overflow-x-auto rounded-2xl border border-border bg-surface text-surface-foreground" tabIndex={0} role="region" aria-label="Adherence by route">
+          <table className="w-full min-w-[32rem] border-collapse text-left text-sm">
+            <caption className="sr-only">Adherence by route</caption>
+            <thead>
+              <tr className="border-b border-border bg-muted/50 text-xs text-muted-foreground">
+                {["Route", "From the system", "Raw", "Off-system", "Overrides"].map((h) => (
+                  <th key={h} scope="col" className="px-4 py-2.5 font-medium">
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {report.routes.map((r) => (
+                <Row key={r.route} name={r.route} counts={r.counts} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {report.files.some((f) => f.raw.length || f.offSystem.length || f.overrides.length) && (
+        <details data-slot="adherence-findings" className="group overflow-hidden rounded-2xl border border-border bg-surface text-surface-foreground">
+          <summary className="flex min-h-(--docs-target,2.75rem) cursor-pointer list-none items-center justify-between px-4 text-sm font-medium hover:bg-muted [&::-webkit-details-marker]:hidden">
+            Findings by file
+            <ChevronDown aria-hidden className="size-(--dt-size-xs) text-muted-foreground transition-transform group-open:rotate-180" />
+          </summary>
+          <ul className="flex flex-col divide-y divide-border border-t border-border text-sm">
+            {report.files
+              .filter((f) => f.raw.length || f.offSystem.length || f.overrides.length)
+              .map((f) => (
+                <li key={f.file} className="flex flex-col gap-1.5 px-4 py-3">
+                  <code className="font-mono text-xs">{f.file}</code>
+                  <ul className="flex flex-col gap-0.5 text-muted-foreground">
+                    {f.raw.map((r) => (
+                      <li key={`r${r.line}:${r.column}`}>
+                        line {r.line}: a raw <code className="font-mono text-xs">&lt;{r.element}&gt;</code> where {r.replacedBy.join(" or ")} would do
+                      </li>
+                    ))}
+                    {f.offSystem.map((o) => (
+                      <li key={`o${o.line}:${o.column}:${o.class}`}>
+                        line {o.line}: <code className="font-mono text-xs">{o.class}</code> is {o.kind === "status-text" ? "a status fill used as text; use its subdued foreground" : o.kind === "palette" ? "a palette step, not a semantic token" : "an arbitrary value"}
+                      </li>
+                    ))}
+                    {f.overrides.map((o) => (
+                      <li key={`v${o.line}:${o.column}`}>
+                        line {o.line}: <code className="font-mono text-xs">{o.classes.map((c) => c.class).join(" ")}</code> on {o.component} changes its{" "}
+                        {[...new Set(o.classes.map((c) => c.kind))].join(" and ")}: is a variant missing?
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+          </ul>
+        </details>
+      )}
+      <p className="text-xs text-muted-foreground">
+        A report, never a gate: {report.generator}, over {s.files} files. Lookalikes (a div styled like a Card) are not detected.
+      </p>
+    </div>
+  );
+}
+
+function Row({ name, counts }: { name: string; counts: Counts }) {
+  return (
+    <tr className="border-b border-border last:border-b-0">
+      <th scope="row" className="px-4 py-3 font-mono text-xs font-normal">
+        {name}
+      </th>
+      <td className={cx("px-4 py-3 tabular-nums", counts.share !== null && counts.share < 0.9 && "font-medium")}>{share(counts.share)}</td>
+      <td className="px-4 py-3 tabular-nums">{counts.rawElements}</td>
+      <td className="px-4 py-3 tabular-nums">{counts.offSystemValues}</td>
+      <td className="px-4 py-3 tabular-nums">{counts.overrides}</td>
+    </tr>
+  );
+}
+
+function share(value: number | null): string {
+  return value === null ? "n/a" : `${Math.round(value * 1000) / 10}%`;
+}

package/src/agent-view.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Bot, Eye } from "lucide-react";
+import type { ReactNode } from "react";
+import { CodeView } from "./code-view";
+import { componentMarkdown } from "./lib/markdown";
+import type { ComponentEntry } from "./lib/manifest-types";
+import { Segmented, SegmentedList, SegmentedPanel } from "./lib/ui";
+
+/**
+ * What an agent needs to know, as copyable markdown: a component's status,
+ * usage, canonical example, do and don't, props, variants and parts, or any
+ * other block's markdown form. Generated from the manifest; nothing in it is
+ * written twice and nothing is written by a model.
+ */
+export function AgentInstructions({ entry, markdown }: { entry?: ComponentEntry; markdown?: string }) {
+  const code = markdown ?? (entry ? componentMarkdown(entry) : "");
+  return (
+    <div data-slot="agent-instructions" className="flex flex-col gap-2">
+      <CodeView code={code} lang="markdown" label="For agents: paste into a prompt" wrap />
+    </div>
+  );
+}
+
+/** The same thing two ways, on a switch: as a person sees it, and as an agent reads it. Pass a component entry, or any block's markdown. */
+export function AgentView({
+  entry,
+  markdown,
+  label,
+  children,
+}: {
+  entry?: ComponentEntry;
+  markdown?: string;
+  label?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Segmented defaultValue="rendered" className="gap-4">
+      <div data-slot="agent-view" className="flex">
+        <SegmentedList
+          label={`${label ?? entry?.name ?? "This"}, two ways`}
+          items={[
+            { value: "rendered", label: "For people", icon: Eye },
+            { value: "agent", label: "For agents", icon: Bot },
+          ]}
+        />
+      </div>
+      <SegmentedPanel value="rendered">{children}</SegmentedPanel>
+      <SegmentedPanel value="agent">
+        <AgentInstructions entry={entry} markdown={markdown} />
+      </SegmentedPanel>
+    </Segmented>
+  );
+}

package/src/anatomy.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Layers } from "lucide-react";
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { cx, target } from "./lib/cx";
+import { renderExample, useLookup } from "./lib/lookup";
+import type { ComponentEntry } from "./lib/manifest-types";
+import { Frame, Stage, Toolbar } from "./lib/ui";
+
+/**
+ * A component's parts, by `data-slot`. Point at a part to outline every element
+ * carrying it in the example. A part that does not appear may render in a
+ * portal or only in some states.
+ */
+export function Anatomy({
+  entry,
+  children,
+}: {
+  entry: ComponentEntry;
+  /** The example to point into. Defaults to the canonical example, else the bare component. */
+  children?: ReactNode;
+}) {
+  const lookup = useLookup();
+  const id = useId();
+  const box = useRef<HTMLDivElement>(null);
+  const [active, setActive] = useState<string | null>(null);
+  const [counts, setCounts] = useState<Record<string, number>>({});
+
+  useEffect(() => {
+    const node = box.current;
+    if (!node) return;
+    const measure = () =>
+      setCounts(Object.fromEntries(entry.slots.map((s) => [s, node.querySelectorAll(`[data-slot="${CSS.escape(s)}"]`).length])));
+    measure();
+    const observer = new MutationObserver(measure);
+    observer.observe(node, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-slot"] });
+    return () => observer.disconnect();
+  }, [entry.slots]);
+
+  if (entry.slots.length === 0) {
+    return <p className="text-sm text-muted-foreground">{entry.name} renders no data-slot parts.</p>;
+  }
+
+  const Component = lookup.componentFor(entry);
+  const module = lookup.examplesFor(entry);
+  const first = entry.examples?.canonical?.name ?? entry.examples?.do[0]?.name ?? entry.examples?.other[0]?.name;
+  const example =
+    children ?? (module && first ? renderExample(module[first], first) : Component ? <Component>{entry.name}</Component> : null);
+
+  const shown = entry.slots.filter((slot) => counts[slot]).length;
+  return (
+    <Frame data-slot="anatomy">
+      {active && (
+        <style>{`[data-anatomy="${id}"] [data-slot="${active.replace(/"/g, '\\"')}"] { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); background-color: color-mix(in oklch, var(--ring) 10%, transparent); }`}</style>
+      )}
+      <div className="grid lg:grid-cols-[minmax(0,1fr)_17rem]">
+        <div className="flex min-w-0 flex-col">
+          <Toolbar>
+            <span className="flex items-center gap-2 pl-2 text-xs font-medium text-muted-foreground">
+              <Layers aria-hidden className="size-(--dt-size-xs)" />
+              {entry.slots.length} {entry.slots.length === 1 ? "part" : "parts"}
+              {shown < entry.slots.length && ` · ${shown} in this example`}
+            </span>
+          </Toolbar>
+          <Stage className="min-h-64 flex-1">
+            <div ref={box} data-anatomy={id} data-slot="anatomy-example" className="min-w-0">
+              {example}
+            </div>
+          </Stage>
+        </div>
+        <div className="flex flex-col gap-2 border-t border-border p-3 lg:border-t-0 lg:border-l">
+          <p className="px-2 pt-1 text-xs text-muted-foreground">Point at a part to find it.</p>
+          <ol data-slot="anatomy-parts" className="flex flex-col gap-0.5 text-sm" onMouseLeave={() => setActive(null)}>
+            {entry.slots.map((slot, i) => (
+              <li key={slot}>
+                {/* pointing, focusing or pressing a part shows it; leaving the list clears it */}
+                <button
+                  type="button"
+                  onMouseEnter={() => setActive(slot)}
+                  onFocus={() => setActive(slot)}
+                  onBlur={() => setActive(null)}
+                  onClick={() => setActive(slot)}
+                  className={cx(
+                    target,
+                    "group flex w-full items-center gap-3 rounded-lg px-2 text-left hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring",
+                    active === slot && "bg-muted",
+                    !counts[slot] && "text-muted-foreground",
+                  )}
+                >
+                  <span
+                    aria-hidden
+                    className={cx(
+                      "flex size-6 shrink-0 items-center justify-center rounded-full border border-border font-mono text-xs",
+                      active === slot && "border-transparent bg-primary text-primary-foreground",
+                    )}
+                  >
+                    {i + 1}
+                  </span>
+                  <code className="min-w-0 flex-1 truncate font-mono text-xs">{slot}</code>
+                  <span className="text-xs text-muted-foreground">{counts[slot] ? `×${counts[slot]}` : "not shown"}</span>
+                </button>
+              </li>
+            ))}
+          </ol>
+          {entry.variants?.parts && (
+            <p className="mt-auto px-2 pt-2 text-xs text-muted-foreground">
+              Styled in <code className="font-mono">{entry.variants.config}</code>: {entry.variants.parts.join(", ")}
+            </p>
+          )}
+        </div>
+      </div>
+    </Frame>
+  );
+}