@designtools/docs 0.0.0-stage → 0.2.0

package/dist/workbench.js

@@ -0,0 +1,274 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Live } from "./lib/live.js";
+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, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { AxeReport, useAxe } from "./a11y-panel.js";
+import { CodeView } from "./code-view.js";
+import { Boundary } from "./lib/boundary.js";
+import { cx } from "./lib/cx.js";
+import { toJSX } from "./lib/jsx.js";
+import { coerce, Missing, useLookup } from "./lib/lookup.js";
+import { importOf } from "./lib/manifest.js";
+import { componentMarkdown } from "./lib/markdown.js";
+import { Measure } from "./lib/measure.js";
+import { installPseudoStates } from "./lib/pseudo.js";
+import { IconButton, IconLink, Toolbar, ToolbarDivider, ToolbarMenu } from "./lib/ui.js";
+import { filterFor, VISIONS, VisionFilters } from "./lib/vision.js";
+import { AxisControl, FlagControl, JsonControl, Label, NumberControl, StringControl, TextControl, visible } from "./playground.js";
+import { PropsTable } from "./props-table.js";
+const 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: "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, p) => /=>|^\(|Function|Handler/.test(p.type) || /^on[A-Z]/.test(name);
+const isJson = (p) => /\[\]|^\{|Array<|Record<|\bobject\b/.test(p.type);
+/** An event or value, in a line someone can read: `click on <button>`, `"ines"`, `{ value: 3 }`. */
+function describe(args) {
+    return args
+        .map((a) => {
+        if (a && typeof a === "object" && "nativeEvent" in a && "type" in a) {
+            const t = a.target;
+            return `${String(a.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, }) {
+    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({});
+    const [values, setValues] = useState({});
+    const [text, setText] = useState(initialText);
+    const [state, setState] = useState("rest");
+    const [view, setView] = useState(VIEW);
+    const [log, setLog] = useState([]);
+    const [tab, setTab] = useState("code");
+    const [full, setFull] = useState(false);
+    const [shared, setShared] = useState(false);
+    const set = (key, value) => 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 = {};
+        const p = {};
+        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"));
+        setView((cur) => ({
+            ...cur,
+            theme: q.get("theme") ?? undefined,
+            bg: q.get("bg") ?? cur.bg,
+            viewport: q.get("vp") ?? cur.viewport,
+            zoom: Number(q.get("zoom")) || cur.zoom,
+            rtl: q.get("dir") === "rtl",
+            vision: q.get("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(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, args) => {
+        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) => 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(null);
+    const target = useRef(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 _jsx(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 = (_jsx(Live, { children: _jsx(Component, { ...base, ...logged, ...chosen, children: content ?? (text || undefined) }) }));
+    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) => 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 (_jsxs("div", { "data-slot": "workbench", className: "overflow-hidden rounded-2xl border border-border bg-surface text-surface-foreground shadow-xs", children: [_jsx("style", { children: `[data-wb-outline] * { outline: 1px solid color-mix(in oklch, var(--ring) 55%, transparent); outline-offset: -1px; }` }), _jsx(VisionFilters, { id: filterId }), _jsxs("div", { ref: root, className: cx("flex flex-col bg-surface", full && "h-dvh"), children: [_jsxs(Toolbar, { className: "flex-nowrap overflow-x-auto", children: [_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(ToolbarMenu, { icon: Monitor, label: "Viewport", value: view.viewport, fallback: "fill", options: VIEWPORTS, onChange: (v) => set("viewport", v) }), _jsx(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})`) }), _jsxs("span", { className: "flex items-center rounded-md", role: "group", "aria-label": "Zoom", children: [_jsx(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" }), _jsxs("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", children: [view.zoom, "%"] }), _jsx(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" })] }), _jsx(ToolbarDivider, {}), _jsxs("button", { type: "button", "aria-pressed": view.outline, title: "Outline every box", onClick: () => set("outline", !view.outline), className: toggle(view.outline), children: [_jsx(SquareDashed, { "aria-hidden": true, className: "size-(--dt-size-xs)" }), _jsx("span", { className: "sr-only", children: "Outline every box" })] }), _jsxs("button", { type: "button", "aria-pressed": view.measure, title: "Measure: point at an element", onClick: () => set("measure", !view.measure), className: toggle(view.measure), children: [_jsx(Ruler, { "aria-hidden": true, className: "size-(--dt-size-xs)" }), _jsx("span", { className: "sr-only", children: "Measure" })] }), _jsx(ToolbarMenu, { icon: Eye, label: "Colour vision", value: view.vision, fallback: "typical", options: VISIONS, onChange: (v) => set("vision", v) }), _jsx("button", { type: "button", "aria-pressed": view.rtl, title: "Right to left", onClick: () => set("rtl", !view.rtl), className: toggle(view.rtl), children: _jsx("span", { className: "font-mono text-[0.6875rem] tracking-wide", children: "RTL" }) }), _jsx(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") })] }), _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(IconButton, { icon: shared ? Check : Link2, label: shared ? "Link copied" : "Copy a link to this configuration", onClick: share }), _jsx(IconButton, { icon: full ? Minimize2 : Maximize2, label: full ? "Leave full screen" : "Full screen", onClick: toggleFull }), previewHref && _jsx(IconLink, { icon: ExternalLink, label: "Open on its own", href: previewHref, target: "_blank", rel: "noreferrer" })] })] }), _jsxs("div", { className: cx("grid min-h-0 flex-1 lg:grid-cols-[minmax(0,1fr)_20rem]", full && "overflow-hidden"), children: [_jsxs("div", { ref: area, "data-slot": "workbench-stage", className: cx("relative min-w-0 overflow-auto", full ? "h-full" : "min-h-96"), children: [_jsx("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, children: _jsx("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),
+                                            }, children: _jsx("div", { ref: target, "data-slot": "workbench-target", className: "flex max-w-full items-center justify-center", children: _jsx(Boundary, { label: entry.name, children: wrap && isValidElement(wrap) ? cloneElement(wrap, undefined, node) : node }) }) }) }), view.measure && _jsx(Measure, { area: area, target: target })] }), _jsxs("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"), children: [_jsxs("div", { className: "-mt-1.5 -mb-2 flex min-h-9 items-center justify-between", children: [_jsx("p", { className: "text-sm font-medium", children: "Properties" }), _jsx(IconButton, { icon: RotateCcw, label: "Reset everything", onClick: reset, disabled: !changed, className: "disabled:pointer-events-none disabled:opacity-40" })] }), _jsx(StateControl, { value: state, onChange: setState, canDisable: canDisable }), axes.length > 0 && (_jsx(Section, { title: "Variants", children: axes.map((axis) => (_jsx(AxisControl, { axis: axis, value: variants[axis.name] ?? axis.default ?? "", onChange: (v) => setVariants((s) => ({ ...s, [axis.name]: v })) }, axis.name))) })), settable.length > 0 && (_jsx(Section, { title: "Props", children: settable.map(([name, p]) => {
+                                            const current = name in values ? values[name] : base[name];
+                                            const put = (v) => setValues((s) => ({ ...s, [name]: v }));
+                                            const info = _jsx(PropInfo, { prop: p });
+                                            if (p.type === "boolean")
+                                                return _jsx(FlagControl, { name: name, checked: !!current, onChange: put }, name);
+                                            if (p.values?.length) {
+                                                const axis = { name, options: p.values.map((v) => ({ name: v })), default: p.default?.replace(/^["']|["']$/g, "") };
+                                                return _jsx(AxisControl, { axis: axis, value: String(current ?? axis.default ?? ""), onChange: put }, name);
+                                            }
+                                            if (p.type === "number")
+                                                return _jsx(NumberControl, { name: name, value: current, onChange: put, info: info }, name);
+                                            if (isJson(p))
+                                                return _jsx(JsonControl, { name: name, value: current, onChange: put, info: info }, name);
+                                            return _jsx(StringControl, { name: name, value: String(current ?? ""), onChange: put, info: info }, name);
+                                        }) })), !content && initialText !== "" && (_jsx(Section, { title: "Content", children: _jsx(TextControl, { value: text, onChange: setText }) })), handlers.length > 0 && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [handlers.join(", "), " ", handlers.length === 1 ? "is" : "are", " logged in", " ", _jsx("button", { type: "button", onClick: () => setTab("actions"), className: "cursor-pointer underline underline-offset-2", children: "Actions" }), "."] }))] })] })] }), _jsxs(Tabs.Root, { value: tab, onValueChange: (v) => setTab(String(v)), className: "border-t border-border", children: [_jsxs(Tabs.List, { "aria-label": `About this ${entry.name}`, className: "relative flex gap-6 overflow-x-auto border-b border-border px-5", children: [_jsxs(Tabs.Tab, { value: "code", className: tabClass, children: [_jsx(Code, { "aria-hidden": true, className: "size-4" }), " Code"] }), _jsxs(Tabs.Tab, { value: "props", className: tabClass, children: [_jsx(Braces, { "aria-hidden": true, className: "size-4" }), " Props", _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: Object.keys(entry.props).length })] }), _jsxs(Tabs.Tab, { value: "actions", className: tabClass, children: [_jsx(Zap, { "aria-hidden": true, className: "size-4" }), " Actions", log.length > 0 && _jsx("span", { className: "rounded-full bg-primary-subdued px-1.5 font-mono text-xs leading-5 text-primary-subdued-foreground", children: log.length })] }), _jsxs(Tabs.Tab, { value: "agent", className: tabClass, children: [_jsx(Bot, { "aria-hidden": true, className: "size-4" }), " For agents"] }), _jsxs(Tabs.Tab, { value: "a11y", className: tabClass, children: [_jsx(PersonStanding, { "aria-hidden": true, className: "size-4" }), " Accessibility", issues !== undefined && (_jsxs("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"), children: [issues ? issues : "ok", _jsx("span", { className: "sr-only", children: issues ? ` ${issues === 1 ? "violation" : "violations"}` : ", no violations" })] }))] }), _jsx(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)" })] }), _jsx(Tabs.Panel, { value: "code", className: "outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", children: _jsx(CodeView, { code: code, label: `${entry.name}.tsx`, bare: true }) }), _jsx(Tabs.Panel, { value: "props", className: "p-5 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", children: _jsx(PropsTable, { entry: entry }) }), _jsx(Tabs.Panel, { value: "actions", className: "outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", children: _jsx(ActionLog, { log: log, onClear: () => setLog([]) }) }), _jsxs(Tabs.Panel, { value: "agent", className: "outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", children: [_jsxs("p", { className: "border-b border-border px-5 py-3 text-sm text-muted-foreground", children: ["What an agent reads at this page's address with ", _jsx("code", { className: "font-mono text-xs", children: ".md" }), ": generated from the manifest, never written twice."] }), _jsx(CodeView, { code: markdown, lang: "markdown", label: `${entry.name}.md`, bare: true, wrap: true })] }), _jsx(Tabs.Panel, { value: "a11y", className: "p-5 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", children: _jsx(AxeReport, { ...axe, entry: entry, scope: scope }) })] })] }));
+}
+function Section({ title, children }) {
+    return (_jsxs("section", { className: "flex flex-col gap-5", children: [_jsx("h4", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: title }), children] }));
+}
+function PropInfo({ prop }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-muted-foreground", children: prop.type }), prop.description && _jsx("span", { className: "text-muted-foreground", children: prop.description }), prop.default !== undefined && _jsxs("span", { className: "text-muted-foreground", children: ["Default: ", prop.default] })] }));
+}
+/** Rest, hover, focus, pressed and disabled, pinned: hover and focus without a pointer or a keyboard. */
+function StateControl({ value, onChange, canDisable }) {
+    const states = [
+        { value: "rest", label: "Rest" },
+        { value: "hover", label: "Hover" },
+        { value: "focus", label: "Focus" },
+        { value: "active", label: "Press" },
+        ...(canDisable ? [{ value: "disabled", label: "Off" }] : []),
+    ];
+    const id = useId();
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { id: id, name: "state", info: _jsx("span", { className: "text-muted-foreground", children: "Pins a state on the preview without a pointer or keyboard. Off is the disabled prop." }) }), _jsx(ToggleGroup, { "aria-labelledby": id, value: [value], onValueChange: (next) => next[0] && onChange(next[0]), className: "grid grid-flow-col auto-cols-fr gap-0.5 rounded-lg bg-muted p-1", children: states.map((s) => (_jsx(Toggle, { 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", children: s.label }, s.value))) })] }));
+}
+/** Every handler call, newest first: which handler, when, and with what. */
+function ActionLog({ log, onClear }) {
+    if (log.length === 0) {
+        return (_jsxs("p", { className: "flex items-center gap-3 px-5 py-8 text-sm text-muted-foreground", children: [_jsx(Zap, { "aria-hidden": true, className: "size-4" }), "Use the component on the stage: every handler it calls appears here, with what it was called with."] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-5 py-2", children: [_jsxs("span", { className: "text-xs text-muted-foreground", "aria-live": "polite", children: [log.length, " ", log.length === 1 ? "call" : "calls"] }), _jsxs("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", children: [_jsx(Trash2, { "aria-hidden": true, className: "size-3.5" }), " Clear"] })] }), _jsx("ol", { className: "max-h-80 divide-y divide-border overflow-y-auto font-mono text-xs", children: log.map((e) => (_jsxs("li", { className: "grid grid-cols-[5rem_8rem_minmax(0,1fr)] items-baseline gap-4 px-5 py-2.5", children: [_jsx("span", { className: "text-muted-foreground tabular-nums", children: e.time }), _jsx("span", { className: "font-medium text-primary-subdued-foreground", children: e.name }), _jsx("span", { className: "truncate text-muted-foreground", title: e.detail, children: e.detail })] }, e.id))) })] }));
+}

package/package.json

@@ -1,6 +1,110 @@
 {
   "name": "@designtools/docs",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "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",
+  "author": "Made by Many",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/madebymany/designtools.git",
+    "directory": "packages/docs"
+  },
+  "homepage": "https://github.com/madebymany/designtools/tree/main/packages/docs#readme",
+  "bugs": {
+    "url": "https://github.com/madebymany/designtools/issues"
+  },
+  "bin": {
+    "designtools-docs": "dist/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "default": "./dist/next/index.js"
+    },
+    "./next/proxy": {
+      "types": "./dist/next/proxy.d.ts",
+      "default": "./dist/next/proxy.js"
+    },
+    "./registry": {
+      "types": "./dist/lib/registry.d.ts",
+      "default": "./dist/lib/registry.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "keywords": [
+    "design-system",
+    "documentation",
+    "docs",
+    "react",
+    "nextjs",
+    "base-ui",
+    "storybook-alternative",
+    "playground",
+    "tokens",
+    "agents"
+  ],
+  "peerDependencies": {
+    "@base-ui/react": "^1.6.0",
+    "lucide-react": "^1.23.0",
+    "next": ">=16",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "axe-core": "^4.14.0"
+  },
+  "peerDependenciesMeta": {
+    "axe-core": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "fuzzysort": "4.0.2",
+    "shiki": "4.5.0"
+  },
+  "devDependencies": {
+    "@base-ui/react": "1.6.0",
+    "@tailwindcss/postcss": "4.3.3",
+    "@types/node": "^24.19.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "axe-core": "^4.14.0",
+    "lucide-react": "1.23.0",
+    "next": "16.3.0",
+    "postcss": "8.5.29",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tailwindcss": "4.3.3",
+    "tsup": "^8.5.1",
+    "tsx": "^4.23.15",
+    "typescript": "~6.0.3",
+    "vitest": "^4.1.11"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup cli/cli.ts --format esm --out-dir dist && tsc -p tsconfig.build.json && node scripts/fix-extensions.mjs && node scripts/build-css.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "cli": "tsx cli/cli.ts"
+  }
 }