@designtools/docs 0.0.0-stage → 0.1.0

package/dist/page-actions.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { Braces, Check, ChevronDown, Copy, FileText, Files } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+/**
+ * What a reader can take from a page, as one split button: copy the page as
+ * markdown, the same markdown any agent gets at `.md`, with a menu beside it to
+ * view that markdown, copy the whole system as one file, or open the manifest.
+ * Put it in a `DocsHeader`.
+ */
+export function PageActions({ basePath = "/design/system" }) {
+    const path = usePathname().replace(/\/$/, "");
+    const [done, setDone] = useState(null);
+    const copyFrom = async (url, what) => {
+        try {
+            const res = await fetch(url);
+            if (!res.ok)
+                throw new Error(String(res.status));
+            await navigator.clipboard.writeText(await res.text());
+            setDone(what);
+        }
+        catch {
+            setDone("Could not copy");
+        }
+        setTimeout(() => setDone(null), 1600);
+    };
+    const item = "flex min-h-(--docs-target,2.75rem) cursor-pointer items-center gap-3 rounded-md px-3 text-sm outline-none select-none data-highlighted:bg-muted";
+    const icon = "size-4 shrink-0 text-muted-foreground";
+    return (_jsxs("div", { "data-slot": "page-actions", className: "inline-flex items-stretch rounded-lg border border-border bg-canvas text-sm shadow-xs", children: [_jsxs("button", { type: "button", onClick: () => copyFrom(`${path}.md`, "Page copied"), className: "inline-flex min-h-9 cursor-pointer items-center gap-2 rounded-l-lg py-1.5 pr-3 pl-3 font-medium hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring", children: [done === "Page copied" ? _jsx(Check, { "aria-hidden": true, className: "size-4" }) : _jsx(Copy, { "aria-hidden": true, className: icon }), done === "Page copied" ? "Copied" : "Copy page"] }), _jsxs(Menu.Root, { children: [_jsx(Menu.Trigger, { "aria-label": "More ways to take this page", className: "inline-flex min-h-9 w-9 cursor-pointer items-center justify-center rounded-r-lg border-l border-border text-muted-foreground hover:bg-muted hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-ring data-popup-open:bg-muted", children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-4" }) }), _jsx(Menu.Portal, { children: _jsx(Menu.Positioner, { "data-designtools": "", align: "end", sideOffset: 6, className: "z-50", children: _jsxs(Menu.Popup, { className: "w-72 rounded-xl border border-border bg-overlay p-1.5 text-overlay-foreground shadow-lg transition-[opacity,scale] duration-(--dt-duration-fast) data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0", children: [_jsxs(Menu.Item, { className: item, onClick: () => copyFrom(`${path}.md`, "Page copied"), children: [_jsx(Copy, { "aria-hidden": true, className: icon }), _jsxs("span", { className: "flex flex-col", children: ["Copy page", _jsx("span", { className: "text-xs text-muted-foreground", children: "As markdown, for an assistant" })] })] }), _jsxs(Menu.LinkItem, { className: item, href: `${path}.md`, target: "_blank", rel: "noreferrer", children: [_jsx(FileText, { "aria-hidden": true, className: icon }), _jsxs("span", { className: "flex flex-col", children: ["View as markdown", _jsx("span", { className: "text-xs text-muted-foreground", children: "What an agent reads at this address" })] })] }), _jsx(Menu.Separator, { className: "my-1.5 h-px bg-border" }), _jsxs(Menu.Item, { className: item, onClick: () => copyFrom(`${basePath}/context.md`, "System copied"), children: [_jsx(Files, { "aria-hidden": true, className: icon }), _jsxs("span", { className: "flex flex-col", children: ["Copy the whole system", _jsx("span", { className: "text-xs text-muted-foreground", children: "Every page in one markdown file" })] })] }), _jsxs(Menu.LinkItem, { className: item, href: `${basePath}/manifest/components.json`, target: "_blank", rel: "noreferrer", children: [_jsx(Braces, { "aria-hidden": true, className: icon }), _jsxs("span", { className: "flex flex-col", children: ["Open the manifest", _jsx("span", { className: "text-xs text-muted-foreground", children: "Components, tokens and rules as JSON" })] })] })] }) }) })] }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: done ?? "" })] }));
+}

package/dist/pattern.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentsManifest, PatternEntry } from "./lib/manifest-types.js";
+/** A recurring screen composition: what it is made of, then each composition live in its frame, with its code. */
+export declare function Pattern({ pattern, manifest, basePath, }: {
+    pattern: PatternEntry;
+    /** To link the components it uses to their pages. */
+    manifest?: ComponentsManifest;
+    basePath?: string;
+}): import("react").JSX.Element;

package/dist/pattern.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRight } from "lucide-react";
+import Link from "next/link";
+import { ExampleFrame } from "./examples.js";
+import { Missing, renderExample, useLookup } from "./lib/lookup.js";
+import { slugOf } from "./lib/manifest.js";
+import { StatusBadge } from "./lib/status.js";
+/** A recurring screen composition: what it is made of, then each composition live in its frame, with its code. */
+export function Pattern({ pattern, manifest, basePath = "/design/system", }) {
+    const lookup = useLookup();
+    const module = lookup.compositionsFor(pattern);
+    const known = new Map((manifest?.components ?? []).map((c) => [c.name, c]));
+    return (_jsxs("div", { "data-slot": "pattern", className: "flex flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border bg-surface p-4 text-surface-foreground sm:flex-row sm:items-center sm:gap-6", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Status" }), _jsx(StatusBadge, { status: pattern.status })] }), pattern.components.length > 0 && (_jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Made of" }), pattern.components.map((name) => {
+                                const c = known.get(name);
+                                const chip = "inline-flex min-h-8 items-center gap-1 rounded-full border border-border px-3 text-xs font-medium";
+                                return c ? (_jsxs(Link, { href: `${basePath}/components/${slugOf(c)}`, className: `${chip} relative hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring after:absolute after:-inset-y-1.5 after:inset-x-0 after:content-['']`, children: [name, _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 text-muted-foreground" })] }, name)) : (_jsx("span", { className: chip, children: name }, name));
+                            })] }))] }), !module ? (_jsx(Missing, { name: pattern.name, what: "compositions" })) : (pattern.examples.map((ex, i) => (_jsx(ExampleFrame, { name: ex.name, kind: i === 0 ? "canonical" : "other", description: ex.description, code: ex.code, children: renderExample(module[ex.name], ex.name) }, ex.name))))] }));
+}

package/dist/playground.d.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import type { ComponentEntry, VariantAxis } from "./lib/manifest-types.js";
+/**
+ * The component, live, with controls generated from its variants and its own
+ * boolean props, and the JSX for exactly what is showing. Pass `props` for what
+ * it needs to render at all; the controls change everything else.
+ */
+export declare function Playground({ entry, props: base, children: initialText, }: {
+    entry: ComponentEntry;
+    props?: Record<string, unknown>;
+    /** Text content, editable in the playground. Pass "" for a component without children. */
+    children?: string;
+}): import("react").JSX.Element;
+/** Props passed only so the component renders (handlers, data) are left out of the snippet unless they are short. */
+export declare function visible(props: Record<string, unknown>): Record<string, unknown>;
+/** `variant` → `Variant`, `aria-label` → `Aria label`: a control reads as a setting, not a prop name. */
+export declare function title(name: string): string;
+/** A control's label, with the prop it sets and what its options mean behind an info button. */
+export declare function Label({ id, name, info, htmlFor }: {
+    id?: string;
+    name: string;
+    info?: ReactNode;
+    htmlFor?: string;
+}): import("react").JSX.Element;
+export declare function AxisControl({ axis, value, onChange }: {
+    axis: VariantAxis;
+    value: string;
+    onChange: (v: string) => void;
+}): import("react").JSX.Element;
+export declare function FlagControl({ name, checked, onChange }: {
+    name: string;
+    checked: boolean;
+    onChange: (v: boolean) => void;
+}): import("react").JSX.Element;
+export declare function TextControl({ value, onChange }: {
+    value: string;
+    onChange: (v: string) => void;
+}): import("react").JSX.Element;
+/** A number prop: a field with steppers. */
+export declare function NumberControl({ name, value, onChange, info }: {
+    name: string;
+    value: number | undefined;
+    onChange: (v: number | undefined) => void;
+    info?: ReactNode;
+}): import("react").JSX.Element;
+/** A string prop: a text field. */
+export declare function StringControl({ name, value, onChange, info }: {
+    name: string;
+    value: string;
+    onChange: (v: string) => void;
+    info?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * An array or object prop (a Select's options): JSON, applied while it parses,
+ * and said plainly when it does not, so a half-typed edit never breaks the preview.
+ */
+export declare function JsonControl({ name, value, onChange, info }: {
+    name: string;
+    value: unknown;
+    onChange: (v: unknown) => void;
+    info?: ReactNode;
+}): import("react").JSX.Element;

package/dist/playground.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+import { Switch } from "@base-ui/react/switch";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { Check, ChevronDown, Info, Moon, RotateCcw, SlidersHorizontal, Sun } from "lucide-react";
+import { useId, useState } from "react";
+import { CodeView } from "./code-view.js";
+import { Boundary } from "./lib/boundary.js";
+import { toJSX } from "./lib/jsx.js";
+import { coerce, Missing, useLookup } from "./lib/lookup.js";
+import { Frame, IconButton, Stage, Toolbar } from "./lib/ui.js";
+/**
+ * The component, live, with controls generated from its variants and its own
+ * boolean props, and the JSX for exactly what is showing. Pass `props` for what
+ * it needs to render at all; the controls change everything else.
+ */
+export function Playground({ entry, props: base = {}, children: initialText = entry.name, }) {
+    const lookup = useLookup();
+    const Component = lookup.componentFor(entry);
+    const axes = entry.variants?.axes ?? [];
+    const axisNames = new Set(axes.map((a) => a.name));
+    const flags = Object.entries(entry.props)
+        .filter(([name, p]) => !p.from && !axisNames.has(name) && p.type === "boolean" && p.deprecated === undefined)
+        .map(([name]) => name);
+    const [variants, setVariants] = useState({});
+    const [on, setOn] = useState({});
+    const [text, setText] = useState(initialText);
+    const [theme, setTheme] = useState();
+    if (!Component)
+        return _jsx(Missing, { name: entry.name });
+    const chosen = { ...coerce(variants), ...Object.fromEntries(Object.entries(on).filter(([, v]) => v)) };
+    const code = toJSX(entry.export, { ...visible(base), ...chosen }, text || undefined);
+    const changed = Object.keys(variants).length > 0 || Object.values(on).some(Boolean) || text !== initialText;
+    const reset = () => {
+        setVariants({});
+        setOn({});
+        setText(initialText);
+    };
+    return (_jsxs(Frame, { "data-slot": "playground", children: [_jsxs("div", { className: "grid lg:grid-cols-[minmax(0,1fr)_20rem]", children: [_jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsxs(Toolbar, { children: [_jsxs("span", { className: "flex items-center gap-2 pl-2 text-xs font-medium text-muted-foreground", children: [_jsx(SlidersHorizontal, { "aria-hidden": true, className: "size-(--dt-size-xs)" }), "Live"] }), _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(IconButton, { icon: theme === "dark" ? Sun : Moon, label: theme === "dark" ? "Show in light mode" : "Show in dark mode", pressed: theme !== undefined, onClick: () => setTheme(theme === "dark" ? "light" : "dark") }), _jsx(IconButton, { icon: RotateCcw, label: "Reset the controls", onClick: reset, disabled: !changed, className: "disabled:pointer-events-none disabled:opacity-40" })] })] }), _jsx(Stage, { theme: theme, "data-slot": "playground-preview", className: "min-h-72 flex-1", children: _jsx(Boundary, { label: entry.name, children: _jsx(Component, { ...base, ...chosen, children: text || undefined }) }) })] }), _jsxs("div", { "data-slot": "playground-controls", className: "flex flex-col gap-6 border-t border-border p-5 lg:border-t-0 lg:border-l", children: [axes.map((axis) => (_jsx(AxisControl, { axis: axis, value: variants[axis.name] ?? axis.default ?? "", onChange: (v) => setVariants((s) => ({ ...s, [axis.name]: v })) }, axis.name))), flags.map((name) => (_jsx(FlagControl, { name: name, checked: !!on[name], onChange: (v) => setOn((s) => ({ ...s, [name]: v })) }, name))), initialText !== "" && _jsx(TextControl, { value: text, onChange: setText }), axes.length === 0 && flags.length === 0 && initialText === "" && _jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to change: it has no variants or flags." })] })] }), _jsx("div", { className: "border-t border-border", children: _jsx(CodeView, { code: code, label: "JSX", bare: true }) })] }));
+}
+/** Props passed only so the component renders (handlers, data) are left out of the snippet unless they are short. */
+export function visible(props) {
+    return Object.fromEntries(Object.entries(props).filter(([, v]) => typeof v !== "function" && JSON.stringify(v ?? "").length <= 40));
+}
+/** `variant` → `Variant`, `aria-label` → `Aria label`: a control reads as a setting, not a prop name. */
+export function title(name) {
+    const words = name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]/g, " ").toLowerCase();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}
+/** Options fit one segmented row when there are few and their names are short; otherwise a menu. */
+const fitsSegments = (axis) => axis.options.length <= 4 && axis.options.reduce((n, o) => n + o.name.length, 0) <= 26;
+/** A control's label, with the prop it sets and what its options mean behind an info button. */
+export function Label({ id, name, info, htmlFor }) {
+    const text = (_jsx("span", { className: "text-sm font-medium", children: title(name) }));
+    return (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [htmlFor ? (_jsx("label", { id: id, htmlFor: htmlFor, children: text })) : (_jsx("span", { id: id, children: text })), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { "aria-label": `About ${title(name)}`, className: "relative inline-flex size-6 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-ring after:absolute after:-inset-2.5 after:content-['']", children: _jsx(Info, { "aria-hidden": true, className: "size-4" }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Positioner, { "data-designtools": "", side: "left", sideOffset: 8, className: "z-50", children: _jsxs(Tooltip.Popup, { className: "flex max-w-64 flex-col gap-1.5 rounded-lg border border-border bg-overlay px-3 py-2.5 text-xs text-overlay-foreground shadow-md transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0", children: [_jsx("code", { className: "font-mono font-medium", children: name }), info] }) }) })] })] }));
+}
+function AxisInfo({ axis }) {
+    const described = axis.options.filter((o) => o.description);
+    return (_jsxs(_Fragment, { children: [axis.default && _jsxs("span", { className: "text-muted-foreground", children: ["Default: ", axis.default] }), described.map((o) => (_jsxs("span", { children: [_jsx("span", { className: "font-medium", children: o.name }), ": ", _jsx("span", { className: "text-muted-foreground", children: o.description })] }, o.name)))] }));
+}
+export function AxisControl({ axis, value, onChange }) {
+    const id = useId();
+    if (fitsSegments(axis)) {
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { id: id, name: axis.name, info: _jsx(AxisInfo, { axis: axis }) }), _jsx(ToggleGroup, { "aria-labelledby": id, value: value ? [value] : [], onValueChange: (next) => next[0] && onChange(String(next[0])), className: "grid grid-flow-col auto-cols-fr gap-0.5 rounded-lg bg-muted p-1", children: axis.options.map((o) => (_jsx(Toggle, { value: o.name, className: "relative h-8 min-w-0 cursor-pointer truncate rounded-md px-2 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: title(o.name) }, o.name))) })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { id: id, name: axis.name, info: _jsx(AxisInfo, { axis: axis }) }), _jsxs(Select.Root, { value: value, onValueChange: (v) => typeof v === "string" && onChange(v), children: [_jsxs(Select.Trigger, { "aria-labelledby": id, className: "flex h-10 cursor-pointer items-center justify-between rounded-lg bg-muted px-3 text-sm font-medium hover:bg-muted/70 focus-visible:outline-2 focus-visible:outline-ring", children: [_jsx(Select.Value, { children: (v) => title(v) }), _jsx(Select.Icon, { "aria-hidden": true, children: _jsx(ChevronDown, { className: "size-4 text-muted-foreground" }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Positioner, { "data-designtools": "", sideOffset: 4, alignItemWithTrigger: false, className: "z-50", children: _jsx(Select.Popup, { className: "min-w-(--anchor-width) rounded-lg border border-border bg-overlay p-1 text-overlay-foreground shadow-md", children: _jsx(Select.List, { children: axis.options.map((o) => (_jsxs(Select.Item, { value: o.name, className: "grid min-h-(--docs-target,2.75rem) cursor-pointer grid-cols-[1fr_auto] items-center gap-3 rounded-md px-3 text-sm outline-none data-[highlighted]:bg-muted", children: [_jsx(Select.ItemText, { children: title(o.name) }), _jsx(Select.ItemIndicator, { children: _jsx(Check, { "aria-hidden": true, className: "size-4" }) })] }, o.name))) }) }) }) })] })] }));
+}
+export function FlagControl({ name, checked, onChange }) {
+    const id = useId();
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("label", { htmlFor: id, className: "text-sm font-medium", children: title(name) }), _jsx(Switch.Root, { id: id, checked: checked, onCheckedChange: onChange, 
+                // drawn small, pressed large: the hit area reaches the docs' target without the switch growing
+                className: "relative h-6 w-10 shrink-0 cursor-pointer rounded-full bg-input p-0.5 transition-colors duration-(--dt-duration-fast) after:absolute after:-inset-2.5 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[checked]:bg-primary", children: _jsx(Switch.Thumb, { className: "block size-5 rounded-full bg-primary-foreground shadow-xs transition-transform duration-(--dt-duration-fast) data-[checked]:translate-x-4" }) })] }));
+}
+export function TextControl({ value, onChange }) {
+    const id = useId();
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { name: "children", htmlFor: id, info: _jsx("span", { className: "text-muted-foreground", children: "The text inside it." }) }), _jsx("input", { id: id, value: value, onChange: (e) => onChange(e.target.value), className: "h-10 rounded-lg bg-muted px-3 text-sm focus-visible:outline-2 focus-visible:outline-ring" })] }));
+}
+/** A number prop: a field with steppers. */
+export function NumberControl({ name, value, onChange, info }) {
+    const id = useId();
+    const step = (d) => onChange((value ?? 0) + d);
+    const button = "relative flex w-9 cursor-pointer items-center justify-center text-muted-foreground hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-ring after:absolute after:-inset-y-1 after:inset-x-0 after:content-['']";
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { name: name, htmlFor: id, info: info }), _jsxs("div", { className: "flex h-10 items-stretch overflow-hidden rounded-lg bg-muted", children: [_jsx("button", { type: "button", "aria-label": `Less ${title(name)}`, onClick: () => step(-1), className: button, children: "\u2212" }), _jsx("input", { id: id, type: "number", inputMode: "decimal", value: value ?? "", onChange: (e) => onChange(e.target.value === "" ? undefined : Number(e.target.value)), className: "min-w-0 flex-1 bg-transparent text-center font-mono text-sm tabular-nums outline-none [appearance:textfield] focus-visible:outline-2 focus-visible:outline-ring [&::-webkit-inner-spin-button]:appearance-none" }), _jsx("button", { type: "button", "aria-label": `More ${title(name)}`, onClick: () => step(1), className: button, children: "+" })] })] }));
+}
+/** A string prop: a text field. */
+export function StringControl({ name, value, onChange, info }) {
+    const id = useId();
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { name: name, htmlFor: id, info: info }), _jsx("input", { id: id, value: value, onChange: (e) => onChange(e.target.value), className: "h-10 rounded-lg bg-muted px-3 text-sm focus-visible:outline-2 focus-visible:outline-ring" })] }));
+}
+/**
+ * An array or object prop (a Select's options): JSON, applied while it parses,
+ * and said plainly when it does not, so a half-typed edit never breaks the preview.
+ */
+export function JsonControl({ name, value, onChange, info }) {
+    const id = useId();
+    const [text, setText] = useState(() => JSON.stringify(value ?? null, null, 2));
+    const [error, setError] = useState(null);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { name: name, htmlFor: id, info: info }), _jsx("textarea", { id: id, value: text, rows: Math.min(10, text.split("\n").length), spellCheck: false, "aria-invalid": !!error, "aria-describedby": error ? `${id}-error` : undefined, onChange: (e) => {
+                    setText(e.target.value);
+                    try {
+                        onChange(JSON.parse(e.target.value));
+                        setError(null);
+                    }
+                    catch (err) {
+                        setError(err instanceof Error ? err.message : "Not valid JSON");
+                    }
+                }, className: "resize-y rounded-lg bg-muted px-3 py-2 font-mono text-xs leading-relaxed focus-visible:outline-2 focus-visible:outline-ring aria-invalid:outline-2 aria-invalid:outline-destructive" }), error && (_jsxs("p", { id: `${id}-error`, className: "text-xs text-destructive-subdued-foreground", children: ["Not applied: ", error] }))] }));
+}

package/dist/preview-frame.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import type { ComponentEntry, PatternEntry } from "./lib/manifest-types.js";
+/**
+ * A preview route in an iframe, at set widths and in either mode, so a
+ * component is seen at a phone's width and its media queries actually fire.
+ */
+export declare function PreviewFrame({ src, title, widths, height, }: {
+    /** The preview route, e.g. `/design/system/preview/badge/canonical`. */
+    src: string;
+    title: string;
+    widths?: number[];
+    height?: number;
+}): import("react").JSX.Element;
+/**
+ * What the preview route renders around a state: the page's canvas in the
+ * requested mode, set on the document too, so popups in portals match.
+ */
+export declare function PreviewSurface({ theme, children }: {
+    theme?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** One example on its own, for the preview route to render inside a PreviewSurface. */
+export declare function PreviewExample({ entry, example }: {
+    entry: ComponentEntry;
+    example: string;
+}): import("react").JSX.Element;
+/** One pattern composition on its own. */
+export declare function PreviewComposition({ pattern, composition }: {
+    pattern: PatternEntry;
+    composition: string;
+}): import("react").JSX.Element;

package/dist/preview-frame.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink, Monitor, Moon, Smartphone, Sun, Tablet } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Boundary } from "./lib/boundary.js";
+import { cx } from "./lib/cx.js";
+import { Missing, renderExample, useLookup } from "./lib/lookup.js";
+import { Frame, IconButton, IconLink, Toolbar } from "./lib/ui.js";
+/**
+ * A preview route in an iframe, at set widths and in either mode, so a
+ * component is seen at a phone's width and its media queries actually fire.
+ */
+export function PreviewFrame({ src, title, widths = [375, 768, 1280], height = 360, }) {
+    const [width, setWidth] = useState(widths[0]);
+    const [theme, setTheme] = useState("light");
+    const url = `${src}${src.includes("?") ? "&" : "?"}theme=${theme}`;
+    const device = (w) => (w < 600 ? Smartphone : w < 1024 ? Tablet : Monitor);
+    return (_jsxs(Frame, { "data-slot": "preview-frame", children: [_jsxs(Toolbar, { children: [_jsx("div", { role: "group", "aria-label": "Preview width", className: "flex items-center gap-0.5 rounded-lg border border-border p-0.5", children: widths.map((w) => {
+                            const Icon = device(w);
+                            return (_jsxs("button", { type: "button", "aria-pressed": width === w, onClick: () => setWidth(w), className: cx("relative inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2.5 font-mono text-xs text-muted-foreground transition-colors duration-(--dt-duration-fast) hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-ring aria-pressed:bg-muted aria-pressed:text-canvas-foreground", "after:absolute after:inset-x-0 after:-inset-y-[calc((var(--docs-target,2.75rem)-1.75rem)/2)] after:content-['']"), children: [_jsx(Icon, { "aria-hidden": true, className: "size-(--dt-size-xs)" }), w] }, w));
+                        }) }), _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(IconButton, { icon: theme === "dark" ? Sun : Moon, label: theme === "dark" ? "Show in light mode" : "Show in dark mode", pressed: theme === "dark", onClick: () => setTheme(theme === "dark" ? "light" : "dark") }), _jsx(IconLink, { icon: ExternalLink, label: "Open in a new tab", href: url, target: "_blank", rel: "noreferrer" })] })] }), _jsx("div", { className: "overflow-x-auto bg-muted/50 bg-[radial-gradient(color-mix(in_oklch,var(--border)_85%,transparent)_1px,transparent_1px)] [background-size:14px_14px] p-6", tabIndex: 0, role: "region", "aria-label": "Preview", children: _jsxs("div", { className: "mx-auto flex flex-col overflow-hidden rounded-lg border border-border bg-canvas shadow-md", style: { width, maxWidth: "none" }, children: [_jsxs("div", { "aria-hidden": true, className: "flex items-center gap-3 border-b border-border bg-surface px-3 py-2", children: [_jsxs("span", { className: "flex gap-1.5", children: [_jsx("span", { className: "size-2.5 rounded-full bg-border" }), _jsx("span", { className: "size-2.5 rounded-full bg-border" }), _jsx("span", { className: "size-2.5 rounded-full bg-border" })] }), _jsxs("span", { className: "min-w-0 flex-1 truncate rounded-md bg-muted px-2 py-0.5 text-center font-mono text-xs text-muted-foreground", children: [title, " \u00B7 ", width, "px"] })] }), _jsx("iframe", { title: `${title}, ${width}px wide, ${theme} mode`, src: url, "data-slot": "preview-iframe", className: "block w-full resize-y bg-canvas", style: { height } })] }) })] }));
+}
+/**
+ * What the preview route renders around a state: the page's canvas in the
+ * requested mode, set on the document too, so popups in portals match.
+ */
+export function PreviewSurface({ theme, children }) {
+    const mode = theme === "dark" || theme === "light" ? theme : undefined;
+    useEffect(() => {
+        if (!mode)
+            return;
+        const root = document.documentElement;
+        const previous = root.dataset.theme;
+        root.dataset.theme = mode;
+        return () => {
+            if (previous === undefined)
+                delete root.dataset.theme;
+            else
+                root.dataset.theme = previous;
+        };
+    }, [mode]);
+    return (_jsx("div", { "data-designtools": "", "data-docs-stage": "", "data-slot": "preview-surface", "data-theme": mode, className: "min-h-dvh bg-canvas p-6 text-canvas-foreground", children: children }));
+}
+/** One example on its own, for the preview route to render inside a PreviewSurface. */
+export function PreviewExample({ entry, example }) {
+    const lookup = useLookup();
+    const module = lookup.examplesFor(entry);
+    if (!module)
+        return _jsx(Missing, { name: entry.name, what: "examples" });
+    if (!(example in module))
+        return _jsxs("p", { className: "text-sm", children: [entry.name, " has no example called ", example, "."] });
+    return _jsx(Boundary, { label: example, children: renderExample(module[example], example) });
+}
+/** One pattern composition on its own. */
+export function PreviewComposition({ pattern, composition }) {
+    const lookup = useLookup();
+    const module = lookup.compositionsFor(pattern);
+    if (!module)
+        return _jsx(Missing, { name: pattern.name, what: "compositions" });
+    if (!(composition in module))
+        return _jsxs("p", { className: "text-sm", children: [pattern.name, " has no composition called ", composition, "."] });
+    return _jsx(Boundary, { label: composition, children: renderExample(module[composition], composition) });
+}

package/dist/props-table.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentEntry } from "./lib/manifest-types.js";
+/**
+ * A component's props, as an API reference: name, type and default on one line,
+ * each row opening to its description. Its own props first, then those of the
+ * primitive it wraps, folded away. Deprecated props are struck through with the
+ * reason; what it inherits from an element or primitive is named underneath.
+ */
+export declare function PropsTable({ entry }: {
+    entry: ComponentEntry;
+}): import("react").JSX.Element;

package/dist/props-table.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cx } from "./lib/cx.js";
+import { inline } from "./lib/text.js";
+/**
+ * A component's props, as an API reference: name, type and default on one line,
+ * each row opening to its description. Its own props first, then those of the
+ * primitive it wraps, folded away. Deprecated props are struck through with the
+ * reason; what it inherits from an element or primitive is named underneath.
+ */
+export function PropsTable({ entry }) {
+    const rows = Object.entries(entry.props);
+    const own = rows.filter(([, p]) => !p.from);
+    const byPackage = new Map();
+    for (const row of rows.filter(([, p]) => p.from)) {
+        byPackage.set(row[1].from, [...(byPackage.get(row[1].from) ?? []), row]);
+    }
+    return (_jsxs("div", { "data-slot": "props-table", className: "flex flex-col gap-4", children: [own.length > 0 ? _jsx(Table, { rows: own }) : _jsx("p", { className: "text-sm text-muted-foreground", children: "No props of its own." }), [...byPackage.entries()].map(([pkg, inherited]) => (_jsxs("details", { "data-slot": "props-inherited", className: "group/inherited overflow-hidden rounded-xl border border-border bg-surface text-surface-foreground", children: [_jsxs("summary", { className: "flex min-h-(--docs-target,2.75rem) cursor-pointer list-none items-center justify-between gap-3 px-4 text-sm hover:bg-muted [&::-webkit-details-marker]:hidden", children: [_jsxs("span", { children: [inherited.length, " more from ", _jsx("code", { className: "font-mono text-xs", children: pkg })] }), _jsx(ChevronDown, { "aria-hidden": true, className: "size-(--dt-size-xs) text-muted-foreground transition-transform group-open/inherited:rotate-180" })] }), _jsx("div", { className: "border-t border-border", children: _jsx(Table, { rows: inherited, bare: true }) })] }, pkg))), entry.inherits && entry.inherits.length > 0 && (_jsxs("p", { "data-slot": "props-inherits", className: "text-sm text-muted-foreground", children: ["Also accepts every prop of", " ", entry.inherits.map((x, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("code", { className: "rounded-sm bg-muted px-1 py-0.5 font-mono text-xs text-canvas-foreground", children: /^[a-z][\w-]*$/.test(x) ? `<${x}>` : x })] }, x))), "."] }))] }));
+}
+const COLS = "grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 md:grid-cols-[minmax(9rem,0.9fr)_minmax(0,1.6fr)_minmax(5rem,0.6fr)_1.25rem] md:items-center";
+function Table({ rows, bare }) {
+    return (_jsxs("div", { className: cx("min-w-0 text-sm", !bare && "overflow-hidden rounded-xl border border-border bg-surface text-surface-foreground"), children: [_jsxs("div", { "aria-hidden": true, className: cx(COLS, "hidden border-b border-border bg-muted/50 px-4 py-2.5 text-xs font-medium text-muted-foreground md:grid"), children: [_jsx("span", { children: "Prop" }), _jsx("span", { children: "Type" }), _jsx("span", { children: "Default" }), _jsx("span", {})] }), _jsx("ul", { "aria-label": "Props", className: "divide-y divide-border", children: rows.map(([name, prop]) => (_jsx("li", { children: _jsx(Row, { name: name, prop: prop }) }, name))) })] }));
+}
+function Row({ name, prop }) {
+    const deprecated = prop.deprecated !== undefined;
+    const line = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [_jsx("code", { className: cx("truncate font-mono text-xs font-medium text-primary-subdued-foreground", deprecated && "line-through opacity-70"), children: name }), prop.required && (_jsxs("span", { "data-slot": "props-required", className: "font-mono text-xs text-destructive-subdued-foreground", title: "Required", children: ["*", _jsx("span", { className: "sr-only", children: " required" })] }))] }), _jsxs("span", { className: "col-span-2 min-w-0 md:col-span-1", children: [_jsx("span", { className: "sr-only", children: ", type " }), _jsx(Type, { prop: prop })] }), _jsx("span", { className: "hidden font-mono text-xs text-muted-foreground md:block", children: prop.default !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: ", default " }), prop.default] })) : (_jsx("span", { "aria-hidden": true, children: "\u2014" })) })] }));
+    const described = deprecated || !!prop.description;
+    if (!described)
+        return (_jsxs("div", { "data-slot": "props-row", className: cx(COLS, "px-4 py-3"), children: [line, _jsx("span", {})] }));
+    return (_jsxs("details", { "data-slot": "props-row", className: "group/row", children: [_jsxs("summary", { className: cx(COLS, "min-h-(--docs-target,2.75rem) cursor-pointer list-none px-4 py-3 hover:bg-muted/60 [&::-webkit-details-marker]:hidden"), children: [line, _jsx(ChevronDown, { "aria-hidden": true, className: "col-start-2 row-start-1 size-(--dt-size-xs) justify-self-end text-muted-foreground transition-transform group-open/row:rotate-180 md:col-start-4" })] }), _jsxs("div", { className: "flex flex-col gap-2 px-4 pb-4 text-sm text-muted-foreground", children: [prop.default !== undefined && (_jsxs("p", { className: "md:hidden", children: ["Default ", _jsx("code", { className: "font-mono text-xs text-canvas-foreground", children: prop.default })] })), deprecated && _jsxs("p", { className: "font-medium text-canvas-foreground", children: ["Deprecated", prop.deprecated ? _jsxs(_Fragment, { children: [": ", inline(prop.deprecated)] }) : "."] }), prop.description?.split("\n\n").map((p) => (_jsx("p", { className: "max-w-prose whitespace-pre-line", children: inline(p) }, p)))] })] }));
+}
+/** A type, coloured by kind: literals, primitives and functions read apart at a glance. */
+function Type({ prop }) {
+    const parts = prop.values ?? prop.type.split(/\s*\|\s*/);
+    return (_jsx("span", { className: "flex flex-wrap items-center gap-x-1 gap-y-1 font-mono text-xs", children: parts.map((t, i) => (_jsxs("span", { className: "inline-flex items-center gap-1", children: [i > 0 && _jsx("span", { className: "text-muted-foreground", children: "|" }), _jsx("span", { className: cx("break-all", tone(t, !!prop.values)), children: prop.values ? `"${t}"` : t })] }, `${t}-${i}`))) }));
+}
+function tone(t, literal) {
+    if (literal || /^["'].*["']$/.test(t))
+        return "text-success-subdued-foreground";
+    if (/^(boolean|number|string|true|false|null|undefined)$/.test(t))
+        return "text-primary-subdued-foreground";
+    if (/=>|^\(|Function|Handler|EventHandler/.test(t))
+        return "text-destructive-subdued-foreground";
+    return "text-canvas-foreground";
+}

package/dist/rule.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { RuleEntry } from "./lib/manifest-types.js";
+/**
+ * One rule, brand or interface, written for people: the statement set large, the
+ * line it draws, what it applies to and the check that proves it, then why. A
+ * switch shows the same rule as an agent reads it. Pass a demonstration as
+ * children where the rule needs persuading; it is shown on a stage.
+ */
+export declare function Rule({ rule, children }: {
+    rule: RuleEntry;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/rule.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Bot, Eye, Hash, ShieldCheck } from "lucide-react";
+import { CodeView } from "./code-view.js";
+import { cx } from "./lib/cx.js";
+import { ruleMarkdown } from "./lib/markdown.js";
+import { StatusBadge } from "./lib/status.js";
+import { inline, Prose } from "./lib/text.js";
+import { Eyebrow, Segmented, SegmentedList, SegmentedPanel, Stage } from "./lib/ui.js";
+const CHECK = { test: "Tested", lint: "Linted", audit: "Audited", manual: "Checked by a person" };
+/**
+ * One rule, brand or interface, written for people: the statement set large, the
+ * line it draws, what it applies to and the check that proves it, then why. A
+ * switch shows the same rule as an agent reads it. Pass a demonstration as
+ * children where the rule needs persuading; it is shown on a stage.
+ */
+export function Rule({ rule, children }) {
+    const chips = (items, mono = false) => (_jsx("span", { className: "flex flex-wrap gap-1.5", children: items.map((t) => (_jsx("span", { className: cx("inline-flex min-h-6 items-center rounded-sm bg-muted px-1.5 text-xs", mono && "font-mono"), children: t }, t))) }));
+    const facts = [];
+    if (rule.threshold)
+        facts.push(["Threshold", _jsx("span", { className: "font-medium", children: rule.threshold }, "t")]);
+    if (rule.appliesTo?.length)
+        facts.push(["Applies to", chips(rule.appliesTo)]);
+    if (rule.exceptions?.length)
+        facts.push(["Exceptions", _jsx("span", { children: rule.exceptions.join("; ") }, "e")]);
+    if (rule.tokens?.length)
+        facts.push(["Tokens", chips(rule.tokens, true)]);
+    return (_jsx("article", { id: rule.id, "data-slot": "rule", className: "scroll-mt-24 border-t border-border pt-8", children: _jsxs(Segmented, { defaultValue: "rendered", children: [_jsxs("header", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx(StatusBadge, { status: rule.status }), _jsx("span", { className: "text-xs font-medium text-muted-foreground", children: rule.kind === "brand" ? "Brand rule" : "Interface rule" })] }), _jsxs("h3", { className: "group flex items-center gap-2 text-3xl tracking-tight", children: [rule.title, _jsx("a", { href: `#${rule.id}`, "aria-label": `Link to ${rule.title}`, className: "relative inline-flex size-7 items-center justify-center rounded-md text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-muted focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-ring after:absolute after:-inset-2 after:content-['']", children: _jsx(Hash, { "aria-hidden": true, className: "size-4" }) })] })] }), _jsx(SegmentedList, { label: `${rule.title}, two ways`, items: [
+                                { value: "rendered", label: "For people", icon: Eye },
+                                { value: "agent", label: "For agents", icon: Bot },
+                            ] })] }), _jsxs(SegmentedPanel, { value: "rendered", className: "flex flex-col gap-6 pt-4", children: [_jsx("p", { "data-slot": "rule-statement", className: "max-w-3xl text-xl leading-snug tracking-tight", children: inline(rule.statement) }), children && (_jsx("div", { "data-slot": "rule-demonstration", className: "overflow-hidden rounded-xl border border-border", children: _jsx(Stage, { className: "min-h-40", children: children }) })), facts.length > 0 && (_jsx("dl", { className: "grid gap-x-10 gap-y-5 sm:grid-cols-2", children: facts.map(([term, detail]) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("dt", { className: "text-xs font-medium text-muted-foreground", children: term }), _jsx("dd", { className: "text-sm", children: detail })] }, term))) })), rule.check && (_jsxs("div", { className: "flex items-start gap-2.5 text-sm", children: [_jsx(ShieldCheck, { "aria-hidden": true, className: "mt-0.5 size-(--dt-size-xs) shrink-0 text-muted-foreground" }), _jsxs("p", { className: "flex flex-col gap-0.5", children: [_jsxs("span", { className: "font-medium", children: [CHECK[rule.check.kind] ?? rule.check.kind, rule.check.ref && (_jsxs(_Fragment, { children: [" ", "by ", _jsx("code", { className: "font-mono text-xs", children: rule.check.ref })] }))] }), rule.check.description && _jsx("span", { className: "text-muted-foreground", children: inline(rule.check.description) })] })] })), rule.rationale && (_jsxs("div", { className: "flex max-w-3xl flex-col gap-2", children: [_jsx(Eyebrow, { children: "Why" }), _jsx("div", { className: "flex flex-col gap-2 text-sm text-muted-foreground", children: _jsx(Prose, { text: rule.rationale }) })] }))] }), _jsx(SegmentedPanel, { value: "agent", className: "pt-4", children: _jsx(CodeView, { code: ruleMarkdown(rule), lang: "markdown", label: `${rule.id}.md`, wrap: true }) })] }) }));
+}

package/dist/scale.d.ts

@@ -0,0 +1,9 @@
+import type { TokenTier, TokensManifest } from "./lib/manifest-types.js";
+/**
+ * Everything that is not colour or type: space, size, radius, elevation and
+ * motion, each tier drawn the way it is used. Pass `tiers` to show only some, in your order.
+ */
+export declare function Scale({ tokens, tiers, }: {
+    tokens: TokensManifest;
+    tiers?: TokenTier[];
+}): import("react").JSX.Element;

package/dist/scale.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { shortName, tokensOfTier, withGroupDescriptions } from "./lib/manifest.js";
+/** Steps drawn for a single `--spacing` multiplier, as Tailwind's p-1, p-2, … would use it. */
+const SPACING_STEPS = [1, 2, 3, 4, 6, 8, 12, 16, 24];
+const TITLE = {
+    spacing: ["Space", "The gap between things: padding, margin and gap."],
+    size: ["Size", "The extent of a thing: icons, avatars and control heights."],
+    radius: ["Radius", "Corners, scaled to the element: bigger box, bigger step."],
+    shadow: ["Elevation", "How far a thing lifts from the page."],
+    duration: ["Duration", "How long a change takes. Point at a row to play it."],
+    ease: ["Easing", "How a change moves. Point at a row to play it."],
+};
+/**
+ * Everything that is not colour or type: space, size, radius, elevation and
+ * motion, each tier drawn the way it is used. Pass `tiers` to show only some, in your order.
+ */
+export function Scale({ tokens, tiers = ["spacing", "size", "radius", "shadow", "duration", "ease"], }) {
+    return (_jsx("div", { "data-slot": "scale", className: "flex flex-col gap-14", children: tiers.map((tier) => {
+            const rows = tokensOfTier(tokens, tier);
+            if (rows.length === 0)
+                return null;
+            const [title, lead] = TITLE[tier] ?? [tier, ""];
+            return (_jsxs("section", { "data-slot": "scale-tier", className: "flex flex-col gap-4", children: [_jsxs("header", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-2xl tracking-tight capitalize", children: title }), lead && _jsx("p", { className: "text-sm text-muted-foreground", children: lead })] }), tier === "spacing" ? (_jsx(Spacing, { rows: rows })) : tier === "duration" || tier === "ease" ? (_jsx(MotionRows, { rows: rows, tier: tier })) : (_jsx(Tiles, { rows: rows, tier: tier }))] }, tier));
+        }) }));
+}
+const card = "rounded-2xl border border-border bg-surface text-surface-foreground";
+function Spacing({ rows }) {
+    const multiplier = rows.find((t) => t.name === "--spacing");
+    const named = rows.filter((t) => t !== multiplier);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [multiplier && (_jsxs("div", { className: `${card} flex flex-col gap-1 p-5`, children: [_jsxs("p", { className: "mb-3 text-xs text-muted-foreground", children: [multiplier.description ?? "One multiplier", " \u00B7 ", _jsxs("code", { className: "font-mono", children: ["--spacing: ", multiplier.values.default] })] }), _jsx("ul", { className: "flex flex-col gap-2", children: SPACING_STEPS.map((n) => (_jsxs("li", { className: "grid grid-cols-[3rem_4rem_1fr] items-center gap-3 font-mono text-xs", children: [_jsx("span", { className: "font-medium", children: n }), _jsxs("span", { className: "text-muted-foreground", children: [n * 4, "px"] }), _jsx("span", { "data-slot": "scale-bar", className: "h-5 rounded-sm border border-primary-subdued-foreground/40 bg-primary-subdued", style: { width: `calc(var(--spacing) * ${n})` } })] }, n))) })] })), named.length > 0 && _jsx(Tiles, { rows: named, tier: "spacing" })] }));
+}
+function Tiles({ rows, tier }) {
+    return (_jsx("ul", { className: tier === "shadow" ? "grid grid-cols-2 gap-4 lg:grid-cols-3" : "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: rows.map((t) => (_jsxs("li", { "data-slot": "scale-row", className: `${card} flex flex-col overflow-hidden`, children: [_jsx("div", { className: tier === "shadow"
+                        ? "flex h-36 items-center justify-center bg-canvas p-6"
+                        : "flex h-28 items-center justify-center bg-[radial-gradient(color-mix(in_oklch,var(--border)_85%,transparent)_1px,transparent_1px)] [background-size:14px_14px] p-4", children: sample(t, tier) }), _jsxs("div", { className: "flex flex-col gap-0.5 border-t border-border px-4 py-3 font-mono text-xs", children: [_jsx("span", { className: "font-medium", children: shortName(t, tier) }), tier !== "shadow" && (_jsx("span", { className: "truncate text-muted-foreground", title: t.values.default, children: t.values.default })), t.description && (_jsx("span", { className: "truncate font-sans text-muted-foreground", title: t.description, children: t.description }))] })] }, t.name))) }));
+}
+function MotionRows({ rows, tier }) {
+    return (_jsx("ul", { className: `${card} flex flex-col divide-y divide-border overflow-hidden`, children: withGroupDescriptions(rows).map((t) => (_jsxs("li", { "data-slot": "scale-row", tabIndex: 0, className: "group grid grid-cols-1 items-center gap-3 px-5 py-4 outline-none hover:bg-muted/50 focus-visible:bg-muted/50 md:grid-cols-[12rem_minmax(0,1fr)]", children: [_jsxs("span", { className: "flex min-w-0 flex-col font-mono text-xs", children: [_jsx("span", { className: "font-medium", children: shortName(t, tier) }), _jsx("span", { className: "truncate text-muted-foreground", title: t.values.default, children: t.values.default }), t.description && _jsx("span", { className: "truncate font-sans text-muted-foreground", children: t.description })] }), _jsx("span", { className: "min-w-0", children: tier === "duration" ? (_jsx(Motion, { duration: `var(${t.name})`, easing: "var(--dt-ease-out, ease-out)" })) : (_jsx(Motion, { duration: "var(--dt-duration-slow, 400ms)", easing: `var(${t.name})` })) })] }, t.name))) }));
+}
+function sample(t, tier) {
+    const v = `var(${t.name})`;
+    switch (tier) {
+        case "spacing":
+            return _jsx("span", { className: "block h-5 rounded-sm bg-primary-subdued", style: { width: v } });
+        case "size":
+            return _jsx("span", { className: "block rounded-md border border-primary-subdued-foreground/40 bg-primary-subdued", style: { width: v, height: v } });
+        case "radius":
+            return _jsx("span", { className: "block size-16 border-2 border-primary-subdued-foreground/60 bg-primary-subdued", style: { borderRadius: v } });
+        case "shadow":
+            return _jsx("span", { className: "block h-16 w-28 rounded-lg bg-surface", style: { boxShadow: v } });
+        default:
+            return _jsx("span", { className: "font-mono text-xs", children: t.values.default });
+    }
+}
+/** A dot that crosses its track when the row is pointed at or focused. Reduced motion jumps instead. */
+function Motion({ duration, easing }) {
+    return (_jsx("span", { "data-slot": "scale-motion", className: "relative block h-6 w-full rounded-full bg-muted", children: _jsx("span", { className: "absolute inset-y-1 right-5 left-1 block transition-transform group-hover:translate-x-full group-focus-visible:translate-x-full motion-reduce:transition-none", style: { transitionDuration: duration, transitionTimingFunction: easing }, children: _jsx("span", { className: "block size-4 rounded-full bg-primary shadow-sm" }) }) }));
+}

package/dist/search.d.ts

@@ -0,0 +1,16 @@
+import { type SearchItem } from "./lib/search.js";
+/**
+ * Find a component, a part, a rule, a pattern or a page by name, fuzzily, and go
+ * there. A wrong name finds the right thing ("Dropdown" finds Select, and says
+ * so). Opens with ⌘K or Ctrl+K anywhere, or / when you are not typing. Build the
+ * items with `searchIndex` from `lib/search`; the shell does, when you pass it the
+ * taxonomy. Navigation only: it does not search page text.
+ */
+export declare function DocsSearch({ items, shortcuts, variant, className, }: {
+    items: SearchItem[];
+    /** Listen for ⌘K, Ctrl+K and /. Give one search on a page the shortcuts. */
+    shortcuts?: boolean;
+    /** A field with its shortcut, or an icon on its own for a phone's top bar. */
+    variant?: "field" | "icon";
+    className?: string;
+}): import("react").JSX.Element;