@designtools/docs 0.0.0-stage → 0.2.0

package/src/workbench.tsx

@@ -0,0 +1,587 @@
+"use client";
+
+import { Live } from "./lib/live";
+import { Tabs } from "@base-ui/react/tabs";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import {
+  Bot,
+  Braces,
+  Check,
+  Code,
+  Eye,
+  ExternalLink,
+  Link2,
+  Maximize2,
+  Minimize2,
+  Minus,
+  Monitor,
+  Moon,
+  PaintBucket,
+  PersonStanding,
+  Plus,
+  RotateCcw,
+  Ruler,
+  SquareDashed,
+  Sun,
+  Trash2,
+  Zap,
+} from "lucide-react";
+import { cloneElement, isValidElement, type ReactElement, type ReactNode, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AxeReport, useAxe } from "./a11y-panel";
+import { CodeView } from "./code-view";
+import { Boundary } from "./lib/boundary";
+import { cx } from "./lib/cx";
+import { toJSX } from "./lib/jsx";
+import { coerce, Missing, useLookup } from "./lib/lookup";
+import { importOf } from "./lib/manifest";
+import type { ComponentEntry, PropEntry, VariantAxis } from "./lib/manifest-types";
+import { componentMarkdown } from "./lib/markdown";
+import { Measure } from "./lib/measure";
+import { installPseudoStates, type Pseudo } from "./lib/pseudo";
+import { IconButton, IconLink, Toolbar, ToolbarDivider, ToolbarMenu } from "./lib/ui";
+import { filterFor, type Vision, VISIONS, VisionFilters } from "./lib/vision";
+import { AxisControl, FlagControl, JsonControl, Label, NumberControl, StringControl, TextControl, visible } from "./playground";
+import { PropsTable } from "./props-table";
+
+type State = "rest" | Pseudo | "disabled";
+type Viewport = "fill" | "375" | "768" | "1280";
+type View = { theme?: "light" | "dark"; bg: string; viewport: Viewport; zoom: number; rtl: boolean; vision: Vision; outline: boolean; measure: boolean };
+
+const VIEW: View = { bg: "canvas", viewport: "fill", zoom: 100, rtl: false, vision: "typical", outline: false, measure: false };
+const ZOOMS = [50, 75, 100, 125, 150, 200];
+const VIEWPORTS: { value: Viewport; label: string; note?: string }[] = [
+  { value: "fill", label: "Fill", note: "The width of the stage" },
+  { value: "375", label: "Phone", note: "375 px" },
+  { value: "768", label: "Tablet", note: "768 px" },
+  { value: "1280", label: "Desktop", note: "1280 px" },
+];
+
+/** Props the panel never offers: they are the component's plumbing, not its settings. */
+const PLUMBING = new Set(["children", "className", "style", "render", "ref", "key", "id", "asChild"]);
+
+const isFunction = (name: string, p: PropEntry) => /=>|^\(|Function|Handler/.test(p.type) || /^on[A-Z]/.test(name);
+const isJson = (p: PropEntry) => /\[\]|^\{|Array<|Record<|\bobject\b/.test(p.type);
+
+interface LogEntry {
+  id: number;
+  name: string;
+  time: string;
+  detail: string;
+}
+
+/** An event or value, in a line someone can read: `click on <button>`, `"ines"`, `{ value: 3 }`. */
+function describe(args: unknown[]): string {
+  return args
+    .map((a) => {
+      if (a && typeof a === "object" && "nativeEvent" in a && "type" in a) {
+        const t = (a as { target?: Element }).target;
+        return `${String((a as { type: unknown }).type)} on <${t?.tagName?.toLowerCase() ?? "element"}>`;
+      }
+      if (a instanceof Event) return `${a.type} event`;
+      try {
+        const json = JSON.stringify(a);
+        return json === undefined ? String(a) : json.length > 80 ? `${json.slice(0, 77)}…` : json;
+      } catch {
+        return String(a);
+      }
+    })
+    .join(", ");
+}
+
+/**
+ * A component's one main area. On the stage: the component live, at any viewport
+ * and zoom, on any background, in either mode or direction, as people with
+ * different colour vision see it, with its boxes outlined or measured, and pinned
+ * at rest, hovered, focused, pressed or disabled. Beside it: a property for each
+ * variant and each prop, generated from their types. Under it: the code for
+ * exactly what is showing, the props, a log of every handler that fires, what an
+ * agent reads, and a full accessibility report that re-runs as anything changes.
+ * Every setting is in the URL, so a configuration can be shared as a link.
+ *
+ * Pass `props` for what it needs to render at all (its starting values), `content`
+ * for children richer than text (a Card's parts), and `wrap` for what it must sit
+ * inside to work (a provider, the root a part belongs to): an element, which the
+ * component is rendered into.
+ */
+export function Workbench({
+  entry,
+  props: base = {},
+  children: initialText = entry.name,
+  content,
+  wrap,
+  backgrounds = [],
+  previewHref,
+}: {
+  entry: ComponentEntry;
+  props?: Record<string, unknown>;
+  /** Text content, editable here. Pass "" for a component without children. */
+  children?: string;
+  /** Children richer than text; replaces the text control. */
+  content?: ReactNode;
+  /** An element to render the component inside: a provider, or the root a part needs. */
+  wrap?: ReactElement<{ children?: ReactNode }>;
+  /** Named backgrounds the brand has (`surface-stone`), offered on the stage beside canvas, surface and muted. */
+  backgrounds?: string[];
+  /** The preview route for its canonical example, opened from the toolbar. */
+  previewHref?: string;
+}) {
+  const lookup = useLookup();
+  const Component = lookup.componentFor(entry);
+  const axes = entry.variants?.axes ?? [];
+  const axisNames = new Set(axes.map((a) => a.name));
+  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 canDisable = "disabled" in entry.props;
+
+  const [variants, setVariants] = useState<Record<string, string>>({});
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  const [text, setText] = useState(initialText);
+  const [state, setState] = useState<State>("rest");
+  const [view, setView] = useState<View>(VIEW);
+  const [log, setLog] = useState<LogEntry[]>([]);
+  const [tab, setTab] = useState<string>("code");
+  const [full, setFull] = useState(false);
+  const [shared, setShared] = useState(false);
+  const set = <K extends keyof View>(key: K, value: View[K]) => setView((v) => ({ ...v, [key]: value }));
+
+  // read a shared configuration from the URL once, then keep the URL in step with every change;
+  // the ref keeps a second run (React's development double effect) from reading the URL back after it was rewritten
+  const read = useRef(false);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    if (read.current) return;
+    read.current = true;
+    const q = new URLSearchParams(window.location.search);
+    const v: Record<string, string> = {};
+    const p: Record<string, unknown> = {};
+    for (const [k, val] of q) {
+      if (k.startsWith("v.")) v[k.slice(2)] = val;
+      if (k.startsWith("p.")) {
+        try {
+          p[k.slice(2)] = JSON.parse(val);
+        } catch {
+          p[k.slice(2)] = val;
+        }
+      }
+    }
+    setVariants(v);
+    setValues(p);
+    if (q.has("text")) setText(q.get("text") ?? "");
+    if (q.has("state")) setState(q.get("state") as State);
+    setView((cur) => ({
+      ...cur,
+      theme: (q.get("theme") as View["theme"]) ?? undefined,
+      bg: q.get("bg") ?? cur.bg,
+      viewport: (q.get("vp") as Viewport) ?? cur.viewport,
+      zoom: Number(q.get("zoom")) || cur.zoom,
+      rtl: q.get("dir") === "rtl",
+      vision: (q.get("vision") as Vision) ?? cur.vision,
+    }));
+    setReady(true);
+  }, []);
+  useEffect(() => {
+    if (!ready) return;
+    const q = new URLSearchParams();
+    for (const [k, v] of Object.entries(variants)) q.set(`v.${k}`, v);
+    for (const [k, v] of Object.entries(values)) q.set(`p.${k}`, typeof v === "string" ? v : JSON.stringify(v));
+    if (text !== initialText) q.set("text", text);
+    if (state !== "rest") q.set("state", state);
+    if (view.theme) q.set("theme", view.theme);
+    if (view.bg !== VIEW.bg) q.set("bg", view.bg);
+    if (view.viewport !== VIEW.viewport) q.set("vp", view.viewport);
+    if (view.zoom !== VIEW.zoom) q.set("zoom", String(view.zoom));
+    if (view.rtl) q.set("dir", "rtl");
+    if (view.vision !== VIEW.vision) q.set("vision", view.vision);
+    const search = q.toString();
+    window.history.replaceState(null, "", `${window.location.pathname}${search ? `?${search}` : ""}${window.location.hash}`);
+  }, [ready, variants, values, text, state, view, initialText]);
+
+  useEffect(() => {
+    if (state === "hover" || state === "focus" || state === "active") installPseudoStates();
+  }, [state]);
+
+  const root = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const on = () => setFull(document.fullscreenElement === root.current);
+    document.addEventListener("fullscreenchange", on);
+    return () => document.removeEventListener("fullscreenchange", on);
+  }, []);
+  const toggleFull = () => (document.fullscreenElement ? document.exitFullscreen() : root.current?.requestFullscreen());
+
+  const record = useCallback((name: string, args: unknown[]) => {
+    const now = new Date();
+    setLog((l) => [{ id: now.getTime() + Math.random(), name, time: now.toLocaleTimeString(undefined, { hour12: false }), detail: describe(args) }, ...l].slice(0, 50));
+  }, []);
+  // every handler the component declares, and the DOM's own click and change, reported to the log
+  const logged = useMemo(
+    () => Object.fromEntries([...new Set([...handlers, "onClick", "onChange"])].map((name) => [name, (...args: unknown[]) => record(name, args)])),
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the handler names come from the manifest and do not change
+    [record],
+  );
+
+  const chosen = { ...coerce(variants), ...values, ...(state === "disabled" ? { disabled: true } : {}) };
+  const jsx = toJSX(entry.export, { ...visible(base), ...visible(values), ...coerce(variants), ...(state === "disabled" ? { disabled: true } : {}) }, content ? undefined : text || undefined);
+  const code = `import { ${entry.export} } from "${importOf(entry)}";\n\n${jsx}`;
+  const markdown = useMemo(() => componentMarkdown(entry), [entry]);
+
+  const area = useRef<HTMLDivElement>(null);
+  const target = useRef<HTMLDivElement>(null);
+  const axe = useAxe(target, { auto: true, watch: JSON.stringify([variants, values, text, state, view.theme, view.bg]) });
+  const issues = axe.result?.violations.length;
+  const filterId = useId().replace(/:/g, "");
+
+  if (!Component) return <Missing name={entry.name} />;
+
+  const changed = Object.keys(variants).length > 0 || Object.keys(values).length > 0 || text !== initialText || state !== "rest";
+  const reset = () => {
+    setVariants({});
+    setValues({});
+    setText(initialText);
+    setState("rest");
+    setView(VIEW);
+  };
+  const share = async () => {
+    try {
+      await navigator.clipboard.writeText(window.location.href);
+      setShared(true);
+      setTimeout(() => setShared(false), 1500);
+    } catch {
+      // clipboard refused: the URL bar still holds the link
+    }
+  };
+
+  const bgs = [
+    { value: "canvas", label: "Canvas", note: "The page" },
+    { value: "surface", label: "Surface", note: "Cards and panels" },
+    { value: "muted", label: "Muted", note: "Quiet panels" },
+    { value: "primary", label: "Primary", note: "On the brand colour" },
+    ...backgrounds.map((b) => ({ value: b, label: b.replace(/^surface-/, "").replace(/^./, (c) => c.toUpperCase()), note: `--${b}` })),
+    { value: "checker", label: "Transparent", note: "To see what it paints" },
+  ];
+  const paint =
+    view.bg === "checker"
+      ? { background: "repeating-conic-gradient(var(--muted) 0 25%, var(--canvas) 0 50%) 0 0 / 16px 16px", color: "var(--canvas-foreground)" }
+      : { background: `var(--${view.bg})`, color: `var(--${view.bg}-foreground, var(--canvas-foreground))` };
+  const dotted = view.bg === "canvas";
+
+  const node = (
+    <Live>
+      <Component {...base} {...logged} {...chosen}>
+        {content ?? (text || undefined)}
+      </Component>
+    </Live>
+  );
+  const scope = [
+    entry.name,
+    ...Object.entries(variants).map(([k, v]) => `${k} ${v}`),
+    state !== "rest" ? state : null,
+    view.theme ? `in ${view.theme} mode` : "in the page's mode",
+    view.bg !== "canvas" ? `on ${view.bg}` : null,
+  ]
+    .filter(Boolean)
+    .join(", ");
+
+  const tabClass =
+    "relative inline-flex h-11 shrink-0 cursor-pointer items-center gap-2 px-1 text-sm text-muted-foreground transition-colors duration-(--dt-duration-fast) hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-ring data-active:text-canvas-foreground";
+  const toggle = (on: boolean) =>
+    cx(
+      "relative inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 text-xs font-medium text-muted-foreground transition-colors duration-(--dt-duration-fast)",
+      "after:absolute after:inset-x-0 after:-inset-y-[calc((var(--docs-target,2.75rem)-2rem)/2)] after:content-['']",
+      "hover:bg-muted hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-ring",
+      on && "bg-muted text-canvas-foreground",
+    );
+
+  return (
+    <div data-slot="workbench" className="overflow-hidden rounded-2xl border border-border bg-surface text-surface-foreground shadow-xs">
+      <style>{`[data-wb-outline] * { outline: 1px solid color-mix(in oklch, var(--ring) 55%, transparent); outline-offset: -1px; }`}</style>
+      <VisionFilters id={filterId} />
+      <div ref={root} className={cx("flex flex-col bg-surface", full && "h-dvh")}>
+        <Toolbar className="flex-nowrap overflow-x-auto">
+          <span className="flex items-center gap-0.5">
+            <ToolbarMenu icon={Monitor} label="Viewport" value={view.viewport} fallback="fill" options={VIEWPORTS} onChange={(v) => set("viewport", v)} />
+            <ToolbarMenu
+              icon={PaintBucket}
+              label="Background"
+              value={view.bg}
+              fallback="canvas"
+              options={bgs}
+              onChange={(v) => set("bg", v)}
+              swatch={(v) => (v === "checker" ? "repeating-conic-gradient(var(--muted) 0 25%, var(--canvas) 0 50%) 0 0 / 6px 6px" : `var(--${v})`)}
+            />
+            <span className="flex items-center rounded-md" role="group" aria-label="Zoom">
+              <IconButton
+                icon={Minus}
+                label="Zoom out"
+                disabled={view.zoom <= ZOOMS[0]}
+                onClick={() => set("zoom", ZOOMS[Math.max(0, ZOOMS.indexOf(view.zoom) - 1)])}
+                className="disabled:opacity-40"
+              />
+              <button type="button" onClick={() => set("zoom", 100)} title="Reset zoom" className="h-8 w-11 cursor-pointer rounded-md font-mono text-xs tabular-nums hover:bg-muted">
+                {view.zoom}%
+              </button>
+              <IconButton
+                icon={Plus}
+                label="Zoom in"
+                disabled={view.zoom >= ZOOMS[ZOOMS.length - 1]}
+                onClick={() => set("zoom", ZOOMS[Math.min(ZOOMS.length - 1, ZOOMS.indexOf(view.zoom) + 1)])}
+                className="disabled:opacity-40"
+              />
+            </span>
+            <ToolbarDivider />
+            <button type="button" aria-pressed={view.outline} title="Outline every box" onClick={() => set("outline", !view.outline)} className={toggle(view.outline)}>
+              <SquareDashed aria-hidden className="size-(--dt-size-xs)" />
+              <span className="sr-only">Outline every box</span>
+            </button>
+            <button type="button" aria-pressed={view.measure} title="Measure: point at an element" onClick={() => set("measure", !view.measure)} className={toggle(view.measure)}>
+              <Ruler aria-hidden className="size-(--dt-size-xs)" />
+              <span className="sr-only">Measure</span>
+            </button>
+            <ToolbarMenu icon={Eye} label="Colour vision" value={view.vision} fallback="typical" options={VISIONS} onChange={(v) => set("vision", v)} />
+            <button type="button" aria-pressed={view.rtl} title="Right to left" onClick={() => set("rtl", !view.rtl)} className={toggle(view.rtl)}>
+              <span className="font-mono text-[0.6875rem] tracking-wide">RTL</span>
+            </button>
+            <IconButton
+              icon={view.theme === "dark" ? Sun : Moon}
+              label={view.theme === "dark" ? "Show in light mode" : "Show in dark mode"}
+              pressed={view.theme !== undefined}
+              onClick={() => set("theme", view.theme === "dark" ? "light" : "dark")}
+            />
+          </span>
+          <span className="flex items-center gap-0.5">
+            <IconButton icon={shared ? Check : Link2} label={shared ? "Link copied" : "Copy a link to this configuration"} onClick={share} />
+            <IconButton icon={full ? Minimize2 : Maximize2} label={full ? "Leave full screen" : "Full screen"} onClick={toggleFull} />
+            {previewHref && <IconLink icon={ExternalLink} label="Open on its own" href={previewHref} target="_blank" rel="noreferrer" />}
+          </span>
+        </Toolbar>
+
+        <div className={cx("grid min-h-0 flex-1 lg:grid-cols-[minmax(0,1fr)_20rem]", full && "overflow-hidden")}>
+          <div ref={area} data-slot="workbench-stage" className={cx("relative min-w-0 overflow-auto", full ? "h-full" : "min-h-96")}>
+            <div
+              data-docs-stage=""
+              data-theme={view.theme}
+              className={cx(
+                "flex min-h-full min-w-fit items-center justify-center p-10",
+                dotted && "bg-[radial-gradient(color-mix(in_oklch,var(--border)_85%,transparent)_1px,transparent_1px)] [background-size:14px_14px]",
+              )}
+              style={paint}
+            >
+              <div
+                dir={view.rtl ? "rtl" : undefined}
+                data-pseudo={state === "hover" || state === "focus" || state === "active" ? state : undefined}
+                data-wb-outline={view.outline || undefined}
+                className={cx("flex items-center justify-center", view.viewport !== "fill" && "rounded-lg border border-dashed border-current/25 p-4")}
+                style={{
+                  width: view.viewport === "fill" ? undefined : Number(view.viewport),
+                  zoom: view.zoom === 100 ? undefined : view.zoom / 100,
+                  filter: filterFor(view.vision, filterId),
+                }}
+              >
+                <div ref={target} data-slot="workbench-target" className="flex max-w-full items-center justify-center">
+                  <Boundary label={entry.name}>{wrap && isValidElement(wrap) ? cloneElement(wrap, undefined, node) : node}</Boundary>
+                </div>
+              </div>
+            </div>
+            {view.measure && <Measure area={area} target={target} />}
+          </div>
+
+          <div data-slot="workbench-controls" className={cx("flex flex-col gap-7 border-t border-border p-5 lg:border-t-0 lg:border-l", full ? "overflow-y-auto" : "lg:max-h-[44rem] lg:overflow-y-auto")}>
+            <div className="-mt-1.5 -mb-2 flex min-h-9 items-center justify-between">
+              <p className="text-sm font-medium">Properties</p>
+              <IconButton icon={RotateCcw} label="Reset everything" onClick={reset} disabled={!changed} className="disabled:pointer-events-none disabled:opacity-40" />
+            </div>
+
+            <StateControl value={state} onChange={setState} canDisable={canDisable} />
+
+            {axes.length > 0 && (
+              <Section title="Variants">
+                {axes.map((axis) => (
+                  <AxisControl key={axis.name} axis={axis} value={variants[axis.name] ?? axis.default ?? ""} onChange={(v) => setVariants((s) => ({ ...s, [axis.name]: v }))} />
+                ))}
+              </Section>
+            )}
+
+            {settable.length > 0 && (
+              <Section title="Props">
+                {settable.map(([name, p]) => {
+                  const current = name in values ? values[name] : base[name];
+                  const put = (v: unknown) => setValues((s) => ({ ...s, [name]: v }));
+                  const info = <PropInfo prop={p} />;
+                  if (p.type === "boolean") return <FlagControl key={name} name={name} checked={!!current} onChange={put} />;
+                  if (p.values?.length) {
+                    const axis: VariantAxis = { name, options: p.values.map((v) => ({ name: v })), default: p.default?.replace(/^["']|["']$/g, "") };
+                    return <AxisControl key={name} axis={axis} value={String(current ?? axis.default ?? "")} onChange={put} />;
+                  }
+                  if (p.type === "number") return <NumberControl key={name} name={name} value={current as number | undefined} onChange={put} info={info} />;
+                  if (isJson(p)) return <JsonControl key={name} name={name} value={current} onChange={put} info={info} />;
+                  return <StringControl key={name} name={name} value={String(current ?? "")} onChange={put} info={info} />;
+                })}
+              </Section>
+            )}
+
+            {!content && initialText !== "" && (
+              <Section title="Content">
+                <TextControl value={text} onChange={setText} />
+              </Section>
+            )}
+
+            {handlers.length > 0 && (
+              <p className="text-xs text-muted-foreground">
+                {handlers.join(", ")} {handlers.length === 1 ? "is" : "are"} logged in{" "}
+                <button type="button" onClick={() => setTab("actions")} className="cursor-pointer underline underline-offset-2">
+                  Actions
+                </button>
+                .
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Tabs.Root value={tab} onValueChange={(v) => setTab(String(v))} className="border-t border-border">
+        <Tabs.List aria-label={`About this ${entry.name}`} className="relative flex gap-6 overflow-x-auto border-b border-border px-5">
+          <Tabs.Tab value="code" className={tabClass}>
+            <Code aria-hidden className="size-4" /> Code
+          </Tabs.Tab>
+          <Tabs.Tab value="props" className={tabClass}>
+            <Braces aria-hidden className="size-4" /> Props
+            <span className="font-mono text-xs text-muted-foreground">{Object.keys(entry.props).length}</span>
+          </Tabs.Tab>
+          <Tabs.Tab value="actions" className={tabClass}>
+            <Zap aria-hidden className="size-4" /> Actions
+            {log.length > 0 && <span className="rounded-full bg-primary-subdued px-1.5 font-mono text-xs leading-5 text-primary-subdued-foreground">{log.length}</span>}
+          </Tabs.Tab>
+          <Tabs.Tab value="agent" className={tabClass}>
+            <Bot aria-hidden className="size-4" /> For agents
+          </Tabs.Tab>
+          <Tabs.Tab value="a11y" className={tabClass}>
+            <PersonStanding aria-hidden className="size-4" /> Accessibility
+            {issues !== undefined && (
+              <span
+                className={cx(
+                  "rounded-full px-1.5 font-mono text-xs leading-5",
+                  issues ? "bg-destructive-subdued text-destructive-subdued-foreground" : "bg-success-subdued text-success-subdued-foreground",
+                )}
+              >
+                {issues ? issues : "ok"}
+                <span className="sr-only">{issues ? ` ${issues === 1 ? "violation" : "violations"}` : ", no violations"}</span>
+              </span>
+            )}
+          </Tabs.Tab>
+          <Tabs.Indicator className="absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width) bg-[var(--docs-accent,var(--primary))] transition-[left,width] duration-(--dt-duration-base) ease-(--dt-ease-out)" />
+        </Tabs.List>
+        <Tabs.Panel value="code" className="outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring">
+          <CodeView code={code} label={`${entry.name}.tsx`} bare />
+        </Tabs.Panel>
+        <Tabs.Panel value="props" className="p-5 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring">
+          <PropsTable entry={entry} />
+        </Tabs.Panel>
+        <Tabs.Panel value="actions" className="outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring">
+          <ActionLog log={log} onClear={() => setLog([])} />
+        </Tabs.Panel>
+        <Tabs.Panel value="agent" className="outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring">
+          <p className="border-b border-border px-5 py-3 text-sm text-muted-foreground">
+            What an agent reads at this page&apos;s address with <code className="font-mono text-xs">.md</code>: generated from the manifest, never written twice.
+          </p>
+          <CodeView code={markdown} lang="markdown" label={`${entry.name}.md`} bare wrap />
+        </Tabs.Panel>
+        <Tabs.Panel value="a11y" className="p-5 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring">
+          <AxeReport {...axe} entry={entry} scope={scope} />
+        </Tabs.Panel>
+      </Tabs.Root>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="flex flex-col gap-5">
+      <h4 className="text-xs font-medium tracking-wide text-muted-foreground uppercase">{title}</h4>
+      {children}
+    </section>
+  );
+}
+
+function PropInfo({ prop }: { prop: PropEntry }) {
+  return (
+    <>
+      <span className="font-mono text-muted-foreground">{prop.type}</span>
+      {prop.description && <span className="text-muted-foreground">{prop.description}</span>}
+      {prop.default !== undefined && <span className="text-muted-foreground">Default: {prop.default}</span>}
+    </>
+  );
+}
+
+/** Rest, hover, focus, pressed and disabled, pinned: hover and focus without a pointer or a keyboard. */
+function StateControl({ value, onChange, canDisable }: { value: State; onChange: (s: State) => void; canDisable: boolean }) {
+  const states: { value: State; label: string }[] = [
+    { value: "rest", label: "Rest" },
+    { value: "hover", label: "Hover" },
+    { value: "focus", label: "Focus" },
+    { value: "active", label: "Press" },
+    ...(canDisable ? [{ value: "disabled" as State, label: "Off" }] : []),
+  ];
+  const id = useId();
+  return (
+    <div className="flex flex-col gap-2">
+      <Label
+        id={id}
+        name="state"
+        info={<span className="text-muted-foreground">Pins a state on the preview without a pointer or keyboard. Off is the disabled prop.</span>}
+      />
+      <ToggleGroup
+        aria-labelledby={id}
+        value={[value]}
+        onValueChange={(next) => next[0] && onChange(next[0] as State)}
+        className="grid grid-flow-col auto-cols-fr gap-0.5 rounded-lg bg-muted p-1"
+      >
+        {states.map((s) => (
+          <Toggle
+            key={s.value}
+            value={s.value}
+            className="relative h-8 min-w-0 cursor-pointer truncate rounded-md px-1 text-sm text-muted-foreground transition-colors duration-(--dt-duration-fast) after:absolute after:inset-x-0 after:-inset-y-1.5 after:content-[''] hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-ring data-[pressed]:bg-canvas data-[pressed]:font-medium data-[pressed]:text-canvas-foreground data-[pressed]:shadow-xs"
+          >
+            {s.label}
+          </Toggle>
+        ))}
+      </ToggleGroup>
+    </div>
+  );
+}
+
+/** Every handler call, newest first: which handler, when, and with what. */
+function ActionLog({ log, onClear }: { log: LogEntry[]; onClear: () => void }) {
+  if (log.length === 0) {
+    return (
+      <p className="flex items-center gap-3 px-5 py-8 text-sm text-muted-foreground">
+        <Zap aria-hidden className="size-4" />
+        Use the component on the stage: every handler it calls appears here, with what it was called with.
+      </p>
+    );
+  }
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center justify-between border-b border-border px-5 py-2">
+        <span className="text-xs text-muted-foreground" aria-live="polite">
+          {log.length} {log.length === 1 ? "call" : "calls"}
+        </span>
+        <button type="button" onClick={onClear} className="inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-md px-2 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-canvas-foreground">
+          <Trash2 aria-hidden className="size-3.5" /> Clear
+        </button>
+      </div>
+      <ol className="max-h-80 divide-y divide-border overflow-y-auto font-mono text-xs">
+        {log.map((e) => (
+          <li key={e.id} className="grid grid-cols-[5rem_8rem_minmax(0,1fr)] items-baseline gap-4 px-5 py-2.5">
+            <span className="text-muted-foreground tabular-nums">{e.time}</span>
+            <span className="font-medium text-primary-subdued-foreground">{e.name}</span>
+            <span className="truncate text-muted-foreground" title={e.detail}>
+              {e.detail}
+            </span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}