@designtools/docs 0.1.0 → 0.2.1

package/dist/pattern.js

@@ -1,19 +1,22 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowUpRight } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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. */
+import { DocsSection } from "./shell.js";
+/**
+ * A recurring screen composition: each composition live in its frame, with its code, then the
+ * components it is made of, each linking to its page. Its status sits in the page header.
+ */
 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))))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "pattern", className: "flex flex-col gap-10", children: !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)))) }), pattern.components.length > 0 && (_jsx(DocsSection, { title: "Made of", lead: "The system's own components, so the pattern changes when they do.", children: _jsx("ul", { "data-slot": "pattern-parts", className: "grid gap-x-10 sm:grid-cols-2", children: pattern.components.map((name) => {
+                        const c = known.get(name);
+                        const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-lg tracking-tight underline-offset-4 group-hover:underline", children: name }), c && _jsx(StatusBadge, { status: c.status })] }), c?.description && _jsx("span", { className: "line-clamp-2 text-sm text-muted-foreground", children: c.description })] }));
+                        return (_jsx("li", { className: "border-t border-border", children: c ? (_jsx(Link, { href: `${basePath}/components/${slugOf(c)}`, className: "group flex flex-col gap-1.5 py-4 focus-visible:outline-2 focus-visible:outline-ring", children: body })) : (_jsx("span", { className: "flex flex-col gap-1.5 py-4", children: body })) }, name));
+                    }) }) }))] }));
 }

package/dist/playground.js

@@ -55,7 +55,7 @@ const fitsSegments = (axis) => axis.options.length <= 4 && axis.options.reduce((
 /** 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] }) }) })] })] }));
+    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, { delay: 0, closeDelay: 0, "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, { "data-slot": "docs-tooltip", className: "flex max-w-64 flex-col gap-1 rounded-md bg-canvas-foreground px-2.5 py-2 text-xs leading-snug text-canvas shadow-md transition-opacity duration-(--dt-duration-fast) data-ending-style:opacity-0 data-starting-style:opacity-0 [&_*]:text-canvas/80", children: [_jsx("code", { className: "font-mono font-medium text-canvas!", children: name }), info] }) }) })] })] }));
 }
 function AxisInfo({ axis }) {
     const described = axis.options.filter((o) => o.description);

package/dist/rule.d.ts

@@ -1,12 +1,16 @@
-import type { ReactNode } from "react";
+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.
+ * One rule, brand or interface, written for people. On a wide screen, its name, status and the check
+ * that proves it hold the left column while the right reads: the statement set large, the
+ * demonstration (pass it as children, for a rule that needs persuading), the facts, then why. A small
+ * switch shows the same rule as an agent reads it.
  */
 export declare function Rule({ rule, children }: {
     rule: RuleEntry;
     children?: ReactNode;
 }): import("react").JSX.Element;
+/** Every rule on one screen, a line each, linking to the rule: what it is, how settled, how it is checked. */
+export declare function RuleIndex({ rules }: {
+    rules: RuleEntry[];
+}): import("react").JSX.Element;

package/dist/rule.js

@@ -1,20 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Live } from "./lib/live.js";
 import { Bot, Eye, Hash, ShieldCheck } from "lucide-react";
+import { useState } from "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";
+import { Eyebrow } 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.
+ * One rule, brand or interface, written for people. On a wide screen, its name, status and the check
+ * that proves it hold the left column while the right reads: the statement set large, the
+ * demonstration (pass it as children, for a rule that needs persuading), the facts, then why. A small
+ * switch shows the same rule as an agent reads it.
  */
 export function Rule({ rule, children }) {
+    const [view, setView] = useState("people");
     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)
@@ -25,8 +28,10 @@ export function Rule({ rule, children }) {
         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 }) })] }) }));
+    const toggle = (value, label, Icon) => (_jsxs("button", { type: "button", "aria-pressed": view === value, onClick: () => setView(value), className: cx("inline-flex min-h-8 cursor-pointer items-center gap-1.5 rounded-md px-2 text-xs font-medium transition-colors duration-(--dt-duration-fast) focus-visible:outline-2 focus-visible:outline-ring", view === value ? "bg-muted text-canvas-foreground" : "text-muted-foreground hover:text-canvas-foreground"), children: [_jsx(Icon, { "aria-hidden": true, className: "size-3.5" }), label] }));
+    return (_jsxs("article", { id: rule.id, "data-slot": "rule", className: "grid scroll-mt-24 gap-x-12 gap-y-6 border-t border-border pt-10 xl:grid-cols-[15rem_minmax(0,1fr)]", children: [_jsxs("header", { "data-slot": "rule-header", className: "flex flex-col gap-4 xl:sticky xl:top-24 xl:self-start", children: [_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: rule.kind === "brand" ? "Brand rule" : "Interface rule" }), _jsxs("h3", { className: "group flex items-start gap-1 text-2xl leading-tight tracking-tight", children: [rule.title, _jsx("a", { href: `#${rule.id}`, "aria-label": `Link to ${rule.title}`, className: "relative mt-0.5 inline-flex size-7 shrink-0 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("span", { children: _jsx(StatusBadge, { status: rule.status }) })] }), rule.check && (_jsxs("p", { "data-slot": "rule-check", className: "flex items-start gap-2 text-sm", children: [_jsx(ShieldCheck, { "aria-hidden": true, className: "mt-0.5 size-(--dt-size-xs) shrink-0 text-muted-foreground" }), _jsxs("span", { 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) })] })] })), _jsxs("div", { role: "group", "aria-label": `Read ${rule.title}`, className: "-ml-2 flex gap-1", children: [toggle("people", "For people", Eye), toggle("agents", "For agents", Bot)] })] }), view === "people" ? (_jsxs("div", { "data-slot": "rule-body", className: "flex min-w-0 flex-col gap-8", children: [_jsx("p", { "data-slot": "rule-statement", className: "max-w-3xl text-2xl leading-snug tracking-tight", children: inline(rule.statement) }), children && (_jsx("div", { "data-slot": "rule-demonstration", "data-docs-stage": "", className: "flex min-h-40 items-center justify-center rounded-2xl bg-muted/60 p-8 sm:p-10", children: _jsx(Live, { children: children }) })), facts.length > 0 && (_jsx("dl", { className: "grid max-w-3xl gap-x-10 gap-y-4 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.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-base leading-relaxed text-muted-foreground", children: _jsx(Prose, { text: rule.rationale }) })] }))] })) : (_jsx("div", { className: "min-w-0", children: _jsx(CodeView, { code: ruleMarkdown(rule), lang: "markdown", label: `${rule.id}.md`, wrap: true }) }))] }));
+}
+/** Every rule on one screen, a line each, linking to the rule: what it is, how settled, how it is checked. */
+export function RuleIndex({ rules }) {
+    return (_jsx("div", { "data-slot": "rule-index", className: "-mx-1 overflow-x-auto px-1", children: _jsxs("table", { className: "w-full min-w-[34rem] border-collapse text-left text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-xs text-muted-foreground", children: [_jsx("th", { scope: "col", className: "pr-4 pb-3 font-medium", children: "Rule" }), _jsx("th", { scope: "col", className: "px-4 pb-3 font-medium", children: "Kind" }), _jsx("th", { scope: "col", className: "px-4 pb-3 font-medium", children: "Status" }), _jsx("th", { scope: "col", className: "pb-3 pl-4 font-medium", children: "Checked" })] }) }), _jsx("tbody", { children: rules.map((r) => (_jsxs("tr", { className: "border-t border-border", children: [_jsx("th", { scope: "row", className: "py-3 pr-4 font-normal", children: _jsx("a", { href: `#${r.id}`, className: "font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring", children: r.title }) }), _jsx("td", { className: "px-4 py-3 text-muted-foreground capitalize", children: r.kind }), _jsx("td", { className: "px-4 py-3", children: _jsx(StatusBadge, { status: r.status }) }), _jsx("td", { className: "py-3 pl-4 text-muted-foreground", children: r.check ? (CHECK[r.check.kind] ?? r.check.kind) : "Not yet" })] }, r.id))) })] }) }));
 }

package/dist/shell.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { type Status } from "./lib/status.js";
 import type { ComponentsManifest, PatternsManifest, RulesManifest, TaxonomyManifest } from "./lib/manifest-types.js";
 export interface DocsLink {
     label: string;
@@ -52,11 +53,13 @@ export declare function DocsShell({ manifest, rules, patterns, terms, search, th
  * lead, and the page's actions as children. Where the page comes from goes at the
  * foot, in `DocsFooter`.
  */
-export declare function DocsHeader({ title, lead, eyebrow, children, }: {
+export declare function DocsHeader({ title, lead, eyebrow, status, children, }: {
     title: string;
     lead?: string;
     /** Above the title. Defaults to the section the page sits in. */
     eyebrow?: string;
+    /** How settled the thing the page documents is, beside the eyebrow: a pattern's status. */
+    status?: Status;
     /** The page's actions, beside the title: `PageActions`. */
     children?: ReactNode;
 }): import("react").JSX.Element;

package/dist/shell.js

@@ -6,7 +6,9 @@ import { ArrowLeft, ArrowRight, BookOpen, ChevronRight, Component, Gauge, House,
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { Live } from "./lib/live.js";
 import { accent, cx, display, target } from "./lib/cx.js";
+import { StatusBadge } from "./lib/status.js";
 import { groupFamilies, slugOf } from "./lib/manifest.js";
 import { searchIndex } from "./lib/search.js";
 import { Prose } from "./lib/text.js";
@@ -85,12 +87,12 @@ export function DocsShell({ manifest, rules, patterns, terms, search = true, the
     useThemeScript();
     const [menu, setMenu] = useState(false);
     useEffect(() => setMenu(false), [current]);
-    const brandLink = (_jsxs(Link, { href: basePath, "data-slot": "docs-title", className: cx(target, "flex min-w-0 items-center gap-3 rounded-md focus-visible:outline-2 focus-visible:outline-ring"), children: [logo && (_jsx("span", { "data-slot": "docs-logo", className: "shrink-0", children: logo })), _jsx("span", { className: cx(logo ? "sr-only" : "truncate text-base font-semibold tracking-tight"), children: title })] }));
-    return (_jsx(DocsPage.Provider, { value: page, children: _jsxs("div", { "data-designtools": "", "data-slot": "docs-shell", className: "min-h-dvh bg-canvas text-canvas-foreground lg:grid lg:grid-cols-[19rem_minmax(0,1fr)]", children: [_jsx("aside", { "data-slot": "docs-sidebar", className: "sticky top-0 hidden h-dvh p-3 lg:block", children: _jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-xl border border-border bg-surface text-surface-foreground shadow-xs", children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 pb-3", children: [brandLink, search && _jsx(DocsSearch, { items: searchItems })] }), _jsx(Nav, { sections: sections, current: current, title: title }), themeSwitch && (_jsxs("div", { "data-slot": "docs-sidebar-foot", className: "flex items-center justify-between gap-3 border-t border-border px-4 py-3", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Appearance" }), _jsx(ThemeSwitch, {})] }))] }) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("header", { "data-slot": "docs-topbar", className: "sticky top-0 z-20 flex h-16 items-center gap-2 border-b border-border bg-canvas/85 px-3 backdrop-blur-md lg:hidden", children: [_jsxs(Dialog.Root, { open: menu, onOpenChange: setMenu, children: [_jsx(Dialog.Trigger, { "aria-label": "Open the navigation", className: iconButton, children: _jsx(Menu, { "aria-hidden": true, className: "size-(--dt-size-sm)" }) }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { "data-designtools": "", className: "fixed inset-0 z-40 bg-canvas-foreground/30 transition-opacity duration-(--dt-duration-base) data-ending-style:opacity-0 data-starting-style:opacity-0" }), _jsxs(Dialog.Popup, { "data-designtools": "", "data-slot": "docs-drawer", "aria-label": title, className: "fixed inset-y-0 left-0 z-50 flex w-[min(21rem,88vw)] flex-col bg-surface text-surface-foreground shadow-xl transition-transform duration-(--dt-duration-slow) ease-(--dt-ease-out) data-ending-style:-translate-x-full data-starting-style:-translate-x-full", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border p-3 pl-4", children: [brandLink, _jsx(Dialog.Close, { "aria-label": "Close the navigation", className: iconButton, children: _jsx(X, { "aria-hidden": true, className: "size-(--dt-size-sm)" }) })] }), _jsx(Nav, { sections: sections, current: current, title: title }), themeSwitch && (_jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-border px-4 py-3", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Appearance" }), _jsx(ThemeSwitch, {})] }))] })] })] }), _jsx("div", { className: "min-w-0 flex-1", children: brandLink }), search && _jsx(DocsSearch, { items: searchItems, shortcuts: false, variant: "icon" })] }), hero && current === basePath && (_jsx("div", { "data-slot": "docs-hero", className: "w-full", children: hero })), _jsxs("div", { className: "mx-auto flex w-full max-w-[90rem] gap-16 px-5 pt-12 pb-20 sm:px-8 lg:px-12 lg:pt-20 xl:px-20", children: [_jsxs("main", { "data-slot": "docs-main", className: "flex min-w-0 flex-1 flex-col gap-16 [counter-reset:docs-section] lg:gap-24", children: [children, _jsx(Pager, { prev: page.prev, next: page.next })] }), _jsx(OnThisPage, { current: current })] })] })] }) }));
+    const brandLink = (_jsxs(Link, { href: basePath, "data-slot": "docs-title", className: cx(target, "flex min-w-0 items-center gap-3 rounded-md focus-visible:outline-2 focus-visible:outline-ring"), children: [logo && (_jsx("span", { "data-slot": "docs-logo", className: "shrink-0", children: _jsx(Live, { children: logo }) })), _jsx("span", { className: cx(logo ? "sr-only" : "truncate text-base font-semibold tracking-tight"), children: title })] }));
+    return (_jsx(DocsPage.Provider, { value: page, children: _jsxs("div", { "data-designtools": "", "data-slot": "docs-shell", className: "min-h-dvh bg-canvas text-canvas-foreground lg:grid lg:grid-cols-[19rem_minmax(0,1fr)]", children: [_jsx("aside", { "data-slot": "docs-sidebar", className: "sticky top-0 hidden h-dvh p-3 lg:block", children: _jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-xl border border-border bg-surface text-surface-foreground shadow-xs", children: [_jsxs("div", { className: "flex flex-col gap-3 p-4 pb-3", children: [brandLink, search && _jsx(DocsSearch, { items: searchItems })] }), _jsx(Nav, { sections: sections, current: current, title: title }), themeSwitch && (_jsxs("div", { "data-slot": "docs-sidebar-foot", className: "flex items-center justify-between gap-3 border-t border-border px-4 py-3", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Appearance" }), _jsx(ThemeSwitch, {})] }))] }) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("header", { "data-slot": "docs-topbar", className: "sticky top-0 z-20 flex h-16 items-center gap-2 border-b border-border bg-canvas/85 px-3 backdrop-blur-md lg:hidden", children: [_jsxs(Dialog.Root, { open: menu, onOpenChange: setMenu, children: [_jsx(Dialog.Trigger, { "aria-label": "Open the navigation", className: iconButton, children: _jsx(Menu, { "aria-hidden": true, className: "size-(--dt-size-sm)" }) }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { "data-designtools": "", className: "fixed inset-0 z-40 bg-canvas-foreground/30 transition-opacity duration-(--dt-duration-base) data-ending-style:opacity-0 data-starting-style:opacity-0" }), _jsxs(Dialog.Popup, { "data-designtools": "", "data-slot": "docs-drawer", "aria-label": title, className: "fixed inset-y-0 left-0 z-50 flex w-[min(21rem,88vw)] flex-col bg-surface text-surface-foreground shadow-xl transition-transform duration-(--dt-duration-slow) ease-(--dt-ease-out) data-ending-style:-translate-x-full data-starting-style:-translate-x-full", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border p-3 pl-4", children: [brandLink, _jsx(Dialog.Close, { "aria-label": "Close the navigation", className: iconButton, children: _jsx(X, { "aria-hidden": true, className: "size-(--dt-size-sm)" }) })] }), _jsx(Nav, { sections: sections, current: current, title: title, className: "pt-4" }), themeSwitch && (_jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-border px-4 py-3", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Appearance" }), _jsx(ThemeSwitch, {})] }))] })] })] }), _jsx("div", { className: "min-w-0 flex-1", children: brandLink }), search && _jsx(DocsSearch, { items: searchItems, shortcuts: false, variant: "icon" })] }), hero && current === basePath && (_jsx("div", { "data-slot": "docs-hero", className: "w-full", children: _jsx(Live, { children: hero }) })), _jsxs("div", { className: "mx-auto flex w-full max-w-[90rem] gap-16 px-5 pt-12 pb-20 sm:px-8 lg:px-12 lg:pt-20 xl:px-20", children: [_jsxs("main", { "data-slot": "docs-main", className: "flex min-w-0 flex-1 flex-col gap-16 [counter-reset:docs-section] lg:gap-24", children: [children, _jsx(Pager, { prev: page.prev, next: page.next })] }), _jsx(OnThisPage, { current: current })] })] })] }) }));
 }
 const iconButton = "inline-flex size-(--docs-target,2.75rem) shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-ring";
 /** The sections, each a link or a fold that opens where the current page is. */
-function Nav({ sections, current, title }) {
+function Nav({ sections, current, title, className }) {
     const holds = (s) => s.groups.some((g) => g.links.some((l) => l.href === current || l.children?.some((c) => c.href === current)));
     const [open, setOpen] = useState(() => Object.fromEntries(sections.map((s) => [s.id, holds(s)])));
     // moving to a page opens its section; nothing closes on its own
@@ -100,7 +102,7 @@ function Nav({ sections, current, title }) {
             setOpen((o) => (o[here.id] ? o : { ...o, [here.id]: true }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [current, sections]);
-    return (_jsx("nav", { "aria-label": title, "data-slot": "docs-nav", className: "min-h-0 flex-1 overflow-y-auto px-3 pb-4 text-sm", children: _jsx("ul", { className: "flex flex-col gap-0.5", children: sections.map((s) => {
+    return (_jsx("nav", { "aria-label": title, "data-slot": "docs-nav", className: cx("min-h-0 flex-1 overflow-y-auto px-3 pb-4 text-sm", className), children: _jsx("ul", { className: "flex flex-col gap-0.5", children: sections.map((s) => {
                 const Icon = s.icon;
                 const row = cx(target, "group flex w-full items-center gap-3 rounded-md px-2.5 font-medium text-canvas-foreground hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring");
                 const icon = _jsx(Icon, { "aria-hidden": true, className: "size-(--dt-size-xs) shrink-0 text-muted-foreground group-hover:text-canvas-foreground" });
@@ -108,7 +110,7 @@ function Nav({ sections, current, title }) {
                     const active = current === s.href;
                     return (_jsx("li", { children: _jsxs(Link, { href: s.href, "aria-current": active ? "page" : undefined, "data-slot": "docs-nav-section", className: cx(row, active && "bg-muted"), children: [icon, s.label] }) }, s.id));
                 }
-                return (_jsx("li", { children: _jsxs(Collapsible.Root, { open: open[s.id] ?? false, onOpenChange: (next) => setOpen((o) => ({ ...o, [s.id]: next })), children: [_jsxs(Collapsible.Trigger, { "data-slot": "docs-nav-section", className: row, children: [icon, _jsx("span", { className: "flex-1 text-left", children: s.label }), _jsx(ChevronRight, { "aria-hidden": true, className: "size-(--dt-size-xs) text-muted-foreground transition-transform duration-(--dt-duration-fast) group-data-panel-open:rotate-90" })] }), _jsx(Collapsible.Panel, { "data-slot": "docs-nav-panel", className: "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-(--dt-duration-base) ease-(--dt-ease-out) data-ending-style:h-0 data-starting-style:h-0", children: _jsx("div", { className: "ml-[1.1875rem] flex flex-col gap-3 border-l border-border py-1 pl-3", children: s.groups.map((g, i) => (_jsxs("div", { className: "flex flex-col", children: [g.heading && (_jsx("p", { "data-slot": "docs-nav-heading", className: "px-2.5 pt-1 pb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: g.heading })), _jsx("ul", { className: "flex flex-col", children: g.links.map((link) => {
+                return (_jsx("li", { children: _jsxs(Collapsible.Root, { open: open[s.id] ?? false, onOpenChange: (next) => setOpen((o) => ({ ...o, [s.id]: next })), children: [_jsxs(Collapsible.Trigger, { "data-slot": "docs-nav-section", className: row, children: [icon, _jsx("span", { className: "flex-1 text-left", children: s.label }), _jsx(ChevronRight, { "aria-hidden": true, className: "size-(--dt-size-xs) text-muted-foreground transition-transform duration-(--dt-duration-fast) group-data-panel-open:rotate-90" })] }), _jsx(Collapsible.Panel, { "data-slot": "docs-nav-panel", className: "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-(--dt-duration-base) ease-(--dt-ease-out) data-ending-style:h-0 data-starting-style:h-0", children: _jsx("div", { className: "ml-[1.1875rem] flex flex-col gap-3 border-l border-border py-1 pl-3", children: s.groups.map((g, i) => (_jsxs("div", { className: "flex flex-col", children: [g.heading && (_jsx("p", { "data-slot": "docs-nav-heading", className: "px-2.5 pt-3 pb-1.5 text-[0.6875rem] font-semibold tracking-[0.08em] text-muted-foreground uppercase first:pt-1", children: g.heading })), _jsx("ul", { className: "flex flex-col", children: g.links.map((link) => {
                                                     const here = current === link.href || link.children?.some((c) => c.href === current);
                                                     return (_jsxs("li", { children: [_jsx(NavLink, { link: link, current: current }), here && link.children?.length ? (_jsx("ul", { "data-slot": "docs-nav-parts", "aria-label": `${link.label} parts`, className: "ml-3 flex flex-col border-l border-border pl-2", children: link.children.map((child) => (_jsx("li", { children: _jsx(NavLink, { link: child, current: current }) }, child.href))) })) : null] }, link.href));
                                                 }) })] }, g.heading ?? i))) }) })] }) }, s.id));
@@ -116,7 +118,7 @@ function Nav({ sections, current, title }) {
 }
 function NavLink({ link, current }) {
     const active = current === link.href;
-    return (_jsxs(Link, { href: link.href, "aria-current": active ? "page" : undefined, "data-slot": "docs-nav-link", className: cx(target, "relative flex items-center rounded-md px-2.5 text-muted-foreground hover:bg-muted hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", active && "bg-muted font-medium text-canvas-foreground"), children: [active && _jsx("span", { "aria-hidden": true, "data-slot": "docs-nav-marker", className: cx(accent, "absolute inset-y-2.5 -left-[0.8125rem] w-0.5 rounded-full") }), link.label] }));
+    return (_jsxs(Link, { href: link.href, "aria-current": active ? "page" : undefined, "data-slot": "docs-nav-link", className: cx(target, "relative flex items-center rounded-md px-2.5 text-canvas-foreground/80 hover:bg-muted hover:text-canvas-foreground focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring", active && "bg-muted font-medium text-canvas-foreground"), children: [active && _jsx("span", { "aria-hidden": true, "data-slot": "docs-nav-marker", className: cx(accent, "absolute inset-y-2.5 -left-[0.8125rem] w-0.5 rounded-full") }), link.label] }));
 }
 /** The page's sections, beside it on a wide screen, marking the one being read. */
 function OnThisPage({ current }) {
@@ -164,17 +166,17 @@ function Pager({ prev, next }) {
     if (!prev && !next)
         return null;
     const card = cx(target, "group flex flex-col gap-1 rounded-lg border border-border p-5 transition-colors duration-(--dt-duration-fast) hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring");
-    return (_jsxs("nav", { "aria-label": "Previous and next", "data-slot": "docs-pager", className: "grid gap-3 border-t border-border pt-10 sm:grid-cols-2", children: [prev ? (_jsxs(Link, { href: prev.href, className: card, children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(ArrowLeft, { "aria-hidden": true, className: "size-(--dt-size-xs) transition-transform group-hover:-translate-x-0.5" }), " Previous"] }), _jsx("span", { className: "text-base font-medium", children: prev.label })] })) : (_jsx("span", {})), next && (_jsxs(Link, { href: next.href, className: cx(card, "sm:items-end sm:text-right"), children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: ["Next ", _jsx(ArrowRight, { "aria-hidden": true, className: "size-(--dt-size-xs) transition-transform group-hover:translate-x-0.5" })] }), _jsx("span", { className: "text-base font-medium", children: next.label })] }))] }));
+    return (_jsxs("nav", { "aria-label": "Previous and next", "data-slot": "docs-pager", className: "-mt-4 grid gap-3 sm:grid-cols-2 lg:-mt-8", children: [prev ? (_jsxs(Link, { href: prev.href, className: card, children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(ArrowLeft, { "aria-hidden": true, className: "size-(--dt-size-xs) transition-transform group-hover:-translate-x-0.5" }), " Previous"] }), _jsx("span", { className: "text-base font-medium", children: prev.label })] })) : (_jsx("span", {})), next && (_jsxs(Link, { href: next.href, className: cx(card, "sm:items-end sm:text-right"), children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: ["Next ", _jsx(ArrowRight, { "aria-hidden": true, className: "size-(--dt-size-xs) transition-transform group-hover:translate-x-0.5" })] }), _jsx("span", { className: "text-base font-medium", children: next.label })] }))] }));
 }
 /**
  * A page's heading: the section it sits in (from the navigation), the title, the
  * lead, and the page's actions as children. Where the page comes from goes at the
  * foot, in `DocsFooter`.
  */
-export function DocsHeader({ title, lead, eyebrow, children, }) {
+export function DocsHeader({ title, lead, eyebrow, status, children, }) {
     const { section } = useContext(DocsPage);
     const over = eyebrow ?? (section && section !== title ? section : undefined);
-    return (_jsxs("header", { "data-slot": "docs-header", className: "flex flex-col gap-6 border-b border-border pb-12 lg:pb-16", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [over ? (_jsx("p", { "data-slot": "docs-eyebrow", className: "text-xs font-medium tracking-[var(--tracking-widest,0.16em)] text-muted-foreground uppercase", children: over })) : (_jsx("span", {})), children && (_jsx("div", { "data-slot": "docs-header-actions", className: "flex flex-wrap items-center gap-2", children: children }))] }), _jsx("h1", { className: cx(display, "text-5xl leading-[1.05] tracking-tight md:text-7xl"), children: title }), lead && (_jsx("div", { "data-slot": "docs-lead", className: "flex max-w-3xl flex-col gap-3 text-xl leading-snug font-light text-muted-foreground md:text-2xl md:leading-snug [&_code]:bg-transparent [&_code]:p-0", children: _jsx(Prose, { text: lead }) }))] }));
+    return (_jsxs("header", { "data-slot": "docs-header", className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [over || status ? (_jsxs("span", { className: "flex flex-wrap items-center gap-3", children: [over && (_jsx("p", { "data-slot": "docs-eyebrow", className: "text-xs font-medium tracking-[var(--tracking-widest,0.16em)] text-muted-foreground uppercase", children: over })), status && _jsx(StatusBadge, { status: status })] })) : (_jsx("span", {})), children && (_jsx("div", { "data-slot": "docs-header-actions", className: "flex flex-wrap items-center gap-2", children: children }))] }), _jsx("h1", { className: cx(display, "text-5xl leading-[1.05] tracking-tight md:text-7xl"), children: title }), lead && (_jsx("div", { "data-slot": "docs-lead", className: "flex max-w-3xl flex-col gap-3 text-xl leading-snug font-light text-muted-foreground md:text-2xl md:leading-snug [&_code]:bg-transparent [&_code]:p-0", children: _jsx(Prose, { text: lead }) }))] }));
 }
 /**
  * Where a page comes from, at its foot: a generated page names the version and
@@ -185,7 +187,7 @@ export function DocsHeader({ title, lead, eyebrow, children, }) {
 export function DocsFooter({ provenance, editorial, source, }) {
     if (!provenance && !editorial && !source)
         return null;
-    return (_jsxs("footer", { "data-slot": "docs-footer", className: "flex flex-wrap items-center gap-x-6 gap-y-2 text-xs text-muted-foreground", children: [(provenance || editorial) && (_jsxs("p", { "data-slot": "docs-provenance", className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: cx("size-1.5 shrink-0 rounded-full", editorial ? (editorial.status === "published" ? "bg-success" : "bg-warning") : "bg-primary") }), editorial
+    return (_jsxs("footer", { "data-slot": "docs-footer", className: "order-last -mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-border pt-6 text-xs text-muted-foreground lg:-mt-14", children: [(provenance || editorial) && (_jsxs("p", { "data-slot": "docs-provenance", className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: cx("size-1.5 shrink-0 rounded-full", editorial ? (editorial.status === "published" ? "bg-success" : "bg-warning") : "bg-primary") }), editorial
                         ? `Written by ${editorial.author} · ${editorial.reviewer ? `reviewed by ${editorial.reviewer}, ` : "last reviewed "}${editorial.reviewed} · ${editorial.status}`
                         : `${provenance} · generated from the code`] })), source && (_jsx("p", { "data-slot": "docs-source", className: "font-mono", children: source }))] }));
 }
@@ -195,5 +197,5 @@ export function DocsFooter({ provenance, editorial, source, }) {
  */
 export function DocsSection({ title, lead, children }) {
     const id = title.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-    return (_jsxs("section", { "data-slot": "docs-section", "aria-labelledby": id, className: "grid gap-x-10 gap-y-8 [counter-increment:docs-section] xl:grid-cols-[5rem_minmax(0,1fr)]", children: [_jsx("span", { "aria-hidden": true, className: "pt-2 font-mono text-xs tracking-[var(--tracking-widest,0.16em)] text-muted-foreground before:content-[counter(docs-section,decimal-leading-zero)]" }), _jsxs("div", { className: "flex min-w-0 flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h2", { id: id, "data-slot": "docs-section-title", className: cx(display, "scroll-mt-24 text-4xl leading-[1.1] tracking-tight md:text-5xl"), children: title }), lead && _jsx("p", { className: "max-w-2xl text-lg leading-relaxed text-muted-foreground", children: lead })] }), children] })] }));
+    return (_jsxs("section", { "data-slot": "docs-section", "aria-labelledby": id, className: "grid gap-x-10 gap-y-8 [counter-increment:docs-section] xl:grid-cols-[5rem_minmax(0,1fr)]", children: [_jsx("span", { "aria-hidden": true, className: "font-mono text-xs tracking-[var(--tracking-widest,0.16em)] text-muted-foreground [text-box:trim-both_cap_alphabetic] before:content-[counter(docs-section,decimal-leading-zero)]" }), _jsxs("div", { className: "flex min-w-0 flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h2", { id: id, "data-slot": "docs-section-title", className: cx(display, "scroll-mt-24 text-4xl leading-[1.1] tracking-tight [text-box:trim-both_cap_alphabetic] md:text-5xl"), children: title }), lead && _jsx("p", { className: "max-w-2xl text-lg leading-relaxed text-muted-foreground", children: lead })] }), children] })] }));
 }