@cueplusplus/ui 0.13.0

package/dist/instruments/_ledger.js

@@ -0,0 +1,5 @@
+//#region src/instruments/_ledger.ts
+/** `headingLevel` as a tag name, so the outline is real elements, not roles. */
+const headingTag = (level) => level === 2 ? "h2" : level === 3 ? "h3" : "h4";
+//#endregion
+export { headingTag };

package/dist/instruments/_motion.js

@@ -0,0 +1,56 @@
+"use client";
+import * as React from "react";
+//#region src/instruments/_motion.ts
+/**
+* The JS half of the reduced-motion contract.
+*
+* Almost everything in this system stills itself in CSS with
+* `motion-reduce:*`, which is both cheaper and impossible to forget on a
+* re-render. This hook exists only for the cases CSS cannot reach: an animation
+* driven by a timer, where honouring the preference means *not scheduling the
+* work at all* rather than painting it without a transition.
+*
+* @internal Not part of the public API.
+*/
+const QUERY = "(prefers-reduced-motion: reduce)";
+/**
+* Whether the user has asked for reduced motion, tracked live.
+*
+* Starts `false` on the server and on the first client render so hydration
+* matches, then corrects itself in a layout effect before paint.
+*/
+function usePrefersReducedMotion() {
+	const [reduced, setReduced] = React.useState(false);
+	React.useEffect(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia(QUERY);
+		setReduced(query.matches);
+		const onChange = (event) => setReduced(event.matches);
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, []);
+	return reduced;
+}
+/**
+* mulberry32 — 32 bits of state, uniform enough for jitter and fast enough to
+* call per keystroke.
+*
+* Seeded rather than `Math.random()` so a simulated terminal plays the same way
+* on every render, in every screenshot and in every test (the Phase 1 rule
+* against unseeded randomness).
+*
+* @param seed - Any integer. The same seed always yields the same sequence.
+* @returns A generator of numbers in `[0, 1)`.
+*/
+function mulberry32(seed) {
+	let state = seed >>> 0;
+	return () => {
+		state = state + 1831565813 >>> 0;
+		let t = state;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+//#endregion
+export { mulberry32, usePrefersReducedMotion };

package/dist/instruments/_rem.js

@@ -0,0 +1,21 @@
+//#region src/instruments/_rem.ts
+/**
+* Instruments are the one group that takes raw pixel numbers as props — a
+* meter is 4px tall, a sparkline is 72×14, a progress track is 5px — because
+* those are the numbers a data designer thinks in, and there is no density
+* token for "the height of a bar".
+*
+* They are still emitted as `rem` so the instrument scales with browser zoom
+* and the user's root font size like everything else in the system. This is the
+* same conversion `StatusDot` does for its diameter.
+*
+* @internal Not part of the public API.
+*/
+/** The reference root font size the px props are quoted against. */
+const ROOT_PX = 16;
+/** Convert a px number quoted at the 16px root into a `rem` length. */
+function toRem(px) {
+	return `${px / ROOT_PX}rem`;
+}
+//#endregion
+export { toRem };

package/dist/instruments/app-window-frame.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+//#region src/instruments/app-window-frame.d.ts
+interface AppWindowFrameProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
+  /** The document name, centred in the title bar. */
+  title?: React.ReactNode;
+  /** Draw the three window lights. Defaults to `true`. */
+  traffic?: boolean;
+  /** Contents of the toolbar row under the title bar. Omit for no toolbar. */
+  toolbar?: React.ReactNode;
+  /** Contents of the status bar along the bottom. Omit for no status bar. */
+  statusBar?: React.ReactNode;
+  /**
+   * Float the frame off the page with a drop shadow. Defaults to `true`.
+   *
+   * This is the one flat-design exception in the kit, and it is not really an
+   * exception: the component *depicts a floating window*, which is exactly the
+   * case the overlay shadow rule already carves out. Set it `false` when the
+   * frame is inlined into a page that is already a window.
+   */
+  elevated?: boolean;
+  /** What is inside the window. */
+  children?: React.ReactNode;
+}
+/**
+ * A screenshot of your own app, built out of your own components.
+ *
+ * The marketing device: title bar, optional toolbar, canvas, status bar — the
+ * shape of a desktop window, wrapped around real markup. Because the contents
+ * are components rather than a PNG, the hero image re-themes with the site, is
+ * legible at any zoom, and cannot go stale the week after a redesign.
+ *
+ * Built from the real `TitleBar` and `StatusBar`, so the depiction and the
+ * product share one set of geometry tokens and can never drift apart.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <AppWindowFrame
+ *   title="main-stage.cue"
+ *   toolbar={<><Chip>File</Chip><Chip tone="ok">Live</Chip></>}
+ *   statusBar={<><StatusBar.Item tone="ok">LIVE</StatusBar.Item><StatusBar.Item>30 pps</StatusBar.Item></>}
+ * >
+ *   <SeamGrid columns={3}>{cells}</SeamGrid>
+ * </AppWindowFrame>
+ */
+declare const AppWindowFrame: React.ForwardRefExoticComponent<AppWindowFrameProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AppWindowFrame, AppWindowFrameProps };

package/dist/instruments/app-window-frame.js

@@ -0,0 +1,76 @@
+import { cn } from "../lib/cn.js";
+import { StatusBar } from "../chrome/status-bar.js";
+import { TitleBar } from "../chrome/title-bar.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/app-window-frame.tsx
+/**
+* The three lights, in the shared status vocabulary rather than in macOS hexes.
+*
+* `#ff5f57 / #febc2e / #28c840` are the colours of *one* operating system's
+* chrome; on a themed page they read as three imported stickers. The status
+* tokens are the same three hues, they re-tint per theme, and they are already
+* the colours the rest of the console uses for stop / caution / go.
+*/
+const LIGHT_TONES = [
+	"bg-danger",
+	"bg-warn",
+	"bg-ok"
+];
+/**
+* A screenshot of your own app, built out of your own components.
+*
+* The marketing device: title bar, optional toolbar, canvas, status bar — the
+* shape of a desktop window, wrapped around real markup. Because the contents
+* are components rather than a PNG, the hero image re-themes with the site, is
+* legible at any zoom, and cannot go stale the week after a redesign.
+*
+* Built from the real `TitleBar` and `StatusBar`, so the depiction and the
+* product share one set of geometry tokens and can never drift apart.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <AppWindowFrame
+*   title="main-stage.cue"
+*   toolbar={<><Chip>File</Chip><Chip tone="ok">Live</Chip></>}
+*   statusBar={<><StatusBar.Item tone="ok">LIVE</StatusBar.Item><StatusBar.Item>30 pps</StatusBar.Item></>}
+* >
+*   <SeamGrid columns={3}>{cells}</SeamGrid>
+* </AppWindowFrame>
+*/
+const AppWindowFrame = React.forwardRef(function AppWindowFrame({ className, title, traffic = true, toolbar, statusBar, elevated = true, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "app-window-frame",
+		className: cn("flex min-w-0 flex-col overflow-hidden rounded-(--radius-surface) border border-border bg-bg", elevated ? "shadow-[0_40px_120px_-40px_rgba(0,0,0,0.9)]" : null, className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx(TitleBar, {
+				center: title,
+				children: traffic ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					"data-slot": "app-window-lights",
+					className: "flex items-center gap-(--cue-space-3)",
+					children: LIGHT_TONES.map((tone) => /* @__PURE__ */ jsx("span", {
+						"data-slot": "app-window-light",
+						className: cn("size-[0.5rem] rounded-full opacity-80", tone)
+					}, tone))
+				}) : null
+			}),
+			toolbar === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "app-window-toolbar",
+				className: "flex h-(--cue-chrome-toolbar) shrink-0 items-center gap-(--cue-space-2) border-b border-border bg-surface-1 px-(--cue-pad-row-x) font-mono text-(length:--cue-text-label) text-fg-muted",
+				children: toolbar
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "app-window-canvas",
+				className: "min-h-0 min-w-0 flex-1 p-(--cue-space-6)",
+				children
+			}),
+			statusBar === void 0 ? null : /* @__PURE__ */ jsx(StatusBar, { children: statusBar })
+		]
+	});
+});
+//#endregion
+export { AppWindowFrame };

package/dist/instruments/code-block.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+//#region src/instruments/code-block.d.ts
+interface CodeBlockProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The code. Printed verbatim, already dedented by whoever produced it; the copy button copies exactly this. */
+  code: string;
+  /** What the block is, in the caption strip: a filename, an example's title. Defaults to the language. */
+  label?: string;
+  /**
+   * The fence language, on the `<pre>` as `data-language`. Defaults to `"tsx"`.
+   * `"jsx"` turns on emphasis: tag names, attribute names and punctuation in
+   * three inks the theme already has. Every other value prints plain.
+   */
+  language?: string;
+}
+/**
+ * A block of code with a copy button and no syntax-highlighter palette.
+ *
+ * Every colour a token-driven site paints has to come from the token layer, and
+ * a highlighter theme is a second palette that would need porting to every
+ * preset before it could sit beside them — so there is none. What `language="jsx"`
+ * adds is emphasis in three inks the theme already has: tag names in `--cue-fg`,
+ * attribute names in `--cue-fg-muted`, punctuation in `--cue-fg-subtle`. Mono
+ * type, the sunken ground every input uses, and a copy button that works.
+ *
+ * No directive: the copy button is the only client code, and a server page can
+ * draw the rest.
+ *
+ * @example
+ * <CodeBlock label="install" code="pnpm add @cueplusplus/ui" language="sh" />
+ * @example
+ * <CodeBlock label="JSX" language="jsx" code={'<Button variant="primary">Take cue</Button>'} />
+ */
+declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CodeBlock, CodeBlockProps };

package/dist/instruments/code-block.js

@@ -0,0 +1,173 @@
+import { cn } from "../lib/cn.js";
+import { Panel } from "../chrome/panel.js";
+import { CopyButton } from "./copy-button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/instruments/code-block.tsx
+/** The three inks, and nothing else: a highlighter theme would be a second palette. */
+const INK = {
+	tag: "text-fg",
+	attr: "text-fg-muted",
+	punct: "text-fg-subtle"
+};
+/**
+* The end of a `{…}` expression starting at `start`, braces balanced; the
+* code's end if unclosed.
+*
+* A JS string literal inside the expression (`"…"`, `'…'`, `` `…` ``,
+* backslash escapes honoured) is skipped whole rather than scanned for
+* braces: `{"a { b"}` has a real `{` and a stray one sitting inside a string,
+* and only the first is the expression's own. Treating the string as opaque
+* is also what keeps `{"<b>hi</b>"}` a single span for the caller that uses
+* this to find where a JSX child expression ends — the `<b>` inside never
+* gets a chance to look like a tag.
+*/
+function expressionEnd(code, start) {
+	let depth = 0;
+	let index = start;
+	while (index < code.length) {
+		const ch = code[index];
+		if (ch === "\"" || ch === "'" || ch === "`") {
+			const quote = ch;
+			index += 1;
+			while (index < code.length && code[index] !== quote) index += code[index] === "\\" ? 2 : 1;
+			index += 1;
+			continue;
+		}
+		if (ch === "{") depth += 1;
+		else if (ch === "}") {
+			depth -= 1;
+			if (depth === 0) return index + 1;
+		}
+		index += 1;
+	}
+	return code.length;
+}
+/**
+* JSX, cut into the four kinds this block paints.
+*
+* A tag opens at `<` or `</` followed by a letter — so `a < b` is text — and
+* runs to `>` or `/>`. Inside it, a name is an attribute, `=` is punctuation,
+* and a quoted string or a balanced `{…}` is text. Outside a tag everything is
+* text, comments included — and a `{…}` expression child (`{"<b>hi</b>"}`, the
+* shape `JSON.stringify` produces) stays opaque too, found with the same
+* brace-and-string-aware scan as an attribute's expression value, so a `<`
+* sitting inside its string can never be mistaken for a tag opening. The
+* pieces concatenate back to the input exactly, which the suite asserts and
+* the copy button depends on.
+*/
+function jsxTokens(code) {
+	const tokens = [];
+	const push = (kind, from, to) => {
+		if (to <= from) return;
+		const last = tokens.at(-1);
+		if (kind === "text" && last?.kind === "text") last.text += code.slice(from, to);
+		else tokens.push({
+			kind,
+			text: code.slice(from, to),
+			at: from
+		});
+	};
+	let index = 0;
+	while (index < code.length) {
+		const open = /^<\/?(?=[A-Za-z])/.exec(code.slice(index));
+		if (open === null) {
+			let cursor = code[index] === "{" ? expressionEnd(code, index) : index + 1;
+			while (cursor < code.length) {
+				const ch = code[cursor];
+				if (ch === "{") {
+					cursor = expressionEnd(code, cursor);
+					continue;
+				}
+				if (ch === "<") break;
+				cursor += 1;
+			}
+			push("text", index, cursor);
+			index = cursor;
+			continue;
+		}
+		push("punct", index, index + open[0].length);
+		index += open[0].length;
+		const name = /^[A-Za-z][\w.]*/.exec(code.slice(index))[0];
+		push("tag", index, index + name.length);
+		index += name.length;
+		while (index < code.length) {
+			const rest = code.slice(index);
+			const space = /^\s+/.exec(rest);
+			const close = /^\/?>/.exec(rest);
+			const attribute = /^[^\s=>/"{]+/.exec(rest);
+			if (space !== null) {
+				push("text", index, index + space[0].length);
+				index += space[0].length;
+			} else if (close !== null) {
+				push("punct", index, index + close[0].length);
+				index += close[0].length;
+				break;
+			} else if (rest.startsWith("=")) {
+				push("punct", index, index + 1);
+				index += 1;
+			} else if (rest.startsWith("\"")) {
+				const quote = code.indexOf("\"", index + 1);
+				const end = quote === -1 ? code.length : quote + 1;
+				push("text", index, end);
+				index = end;
+			} else if (rest.startsWith("{")) {
+				const end = expressionEnd(code, index);
+				push("text", index, end);
+				index = end;
+			} else if (attribute !== null) {
+				push("attr", index, index + attribute[0].length);
+				index += attribute[0].length;
+			} else {
+				push("text", index, index + 1);
+				index += 1;
+			}
+		}
+	}
+	return tokens;
+}
+/**
+* A block of code with a copy button and no syntax-highlighter palette.
+*
+* Every colour a token-driven site paints has to come from the token layer, and
+* a highlighter theme is a second palette that would need porting to every
+* preset before it could sit beside them — so there is none. What `language="jsx"`
+* adds is emphasis in three inks the theme already has: tag names in `--cue-fg`,
+* attribute names in `--cue-fg-muted`, punctuation in `--cue-fg-subtle`. Mono
+* type, the sunken ground every input uses, and a copy button that works.
+*
+* No directive: the copy button is the only client code, and a server page can
+* draw the rest.
+*
+* @example
+* <CodeBlock label="install" code="pnpm add @cueplusplus/ui" language="sh" />
+* @example
+* <CodeBlock label="JSX" language="jsx" code={'<Button variant="primary">Take cue</Button>'} />
+*/
+const CodeBlock = React.forwardRef(function CodeBlock({ code, label, language = "tsx", className, ...elementProps }, ref) {
+	const body = language === "jsx" ? jsxTokens(code).map((token) => token.kind === "text" ? token.text : /* @__PURE__ */ jsx("span", {
+		"data-token": token.kind,
+		className: INK[token.kind],
+		children: token.text
+	}, token.at)) : code;
+	return /* @__PURE__ */ jsxs(Panel, {
+		...elementProps,
+		ref,
+		"data-slot": "code-block",
+		className: cn("bg-sunken", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-(--cue-space-4) border-b border-border px-(--cue-pad-row-x) py-(--cue-pad-row-y)",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "code-block-label",
+				className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase",
+				children: label ?? language
+			}), /* @__PURE__ */ jsx(CopyButton, { value: code })]
+		}), /* @__PURE__ */ jsx("pre", {
+			"data-language": language,
+			className: "overflow-x-auto p-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg",
+			children: /* @__PURE__ */ jsx("code", { children: body })
+		})]
+	});
+});
+//#endregion
+export { CodeBlock };

package/dist/instruments/copy-button.d.ts

@@ -0,0 +1,41 @@
+import { ButtonProps } from "../primitives/button.js";
+import * as React from "react";
+//#region src/instruments/copy-button.d.ts
+interface CopyButtonProps extends Omit<ButtonProps, "icon" | "children" | "onCopy"> {
+  /** The text to put on the clipboard. */
+  value: string;
+  /** ms the confirmation stays up before reverting. Defaults to `1200`. */
+  timeout?: number;
+  /** The idle label. Defaults to `"Copy"`. */
+  children?: React.ReactNode;
+  /** The confirmation label. Defaults to `"Copied"`. */
+  copiedLabel?: React.ReactNode;
+  /**
+   * Called with `value` once it is actually on the clipboard. Replaces the
+   * native `onCopy` clipboard-event handler, which is meaningless on a button.
+   */
+  onCopy?: (value: string) => void;
+  /** Called with whatever the clipboard threw. Nothing is claimed on failure. */
+  onCopyError?: (error: unknown) => void;
+}
+/**
+ * Copy one string, and say so.
+ *
+ * The confirmation is a label swap rather than a colour change or a toast: at
+ * console density a toast for "copied an id" is heavier than the action, and
+ * colour alone would not be announced. The label lives in an `aria-live`
+ * region, so screen-reader users hear the state change too (WCAG 1.4.1).
+ *
+ * Failure is never dressed up as success — if both the async clipboard and the
+ * `execCommand` fallback fail, the label stays put and `onCopyError` fires.
+ *
+ * @example
+ * <CopyButton value={fixture.id} />
+ * @example
+ * <CopyButton value={dsn} variant="ghost" size="sm" copiedLabel="On the clipboard">
+ *   Copy DSN
+ * </CopyButton>
+ */
+declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { CopyButton, CopyButtonProps };

package/dist/instruments/copy-button.js

@@ -0,0 +1,112 @@
+"use client";
+import { Button } from "../primitives/button.js";
+import { CheckGlyph, CopyGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/instruments/copy-button.tsx
+/** How long the confirmation stays up, in ms. */
+const DEFAULT_TIMEOUT_MS = 1200;
+/**
+* The synchronous fallback for browsers (and insecure origins) with no async
+* clipboard: select a scratch textarea and let `execCommand` copy it.
+*
+* Returns `false` rather than throwing so the caller can re-raise whatever the
+* real failure was — the fallback failing is never the interesting error.
+*/
+function copyWithExecCommand(value) {
+	if (typeof document === "undefined" || typeof document.execCommand !== "function") return false;
+	const scratch = document.createElement("textarea");
+	scratch.value = value;
+	scratch.setAttribute("readonly", "");
+	scratch.setAttribute("aria-hidden", "true");
+	scratch.style.position = "fixed";
+	scratch.style.top = "0";
+	scratch.style.left = "-9999px";
+	document.body.appendChild(scratch);
+	const selection = document.getSelection();
+	const previous = selection !== null && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+	let copied = false;
+	try {
+		scratch.select();
+		copied = document.execCommand("copy");
+	} catch {
+		copied = false;
+	} finally {
+		scratch.remove();
+		if (previous !== null && selection !== null) {
+			selection.removeAllRanges();
+			selection.addRange(previous);
+		}
+	}
+	return copied;
+}
+/** Write to the clipboard, preferring the async API and never claiming success. */
+async function writeToClipboard(value) {
+	const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+	if (clipboard !== void 0 && typeof clipboard.writeText === "function") try {
+		await clipboard.writeText(value);
+		return;
+	} catch (error) {
+		if (copyWithExecCommand(value)) return;
+		throw error;
+	}
+	if (copyWithExecCommand(value)) return;
+	throw new Error("Clipboard unavailable");
+}
+/**
+* Copy one string, and say so.
+*
+* The confirmation is a label swap rather than a colour change or a toast: at
+* console density a toast for "copied an id" is heavier than the action, and
+* colour alone would not be announced. The label lives in an `aria-live`
+* region, so screen-reader users hear the state change too (WCAG 1.4.1).
+*
+* Failure is never dressed up as success — if both the async clipboard and the
+* `execCommand` fallback fail, the label stays put and `onCopyError` fires.
+*
+* @example
+* <CopyButton value={fixture.id} />
+* @example
+* <CopyButton value={dsn} variant="ghost" size="sm" copiedLabel="On the clipboard">
+*   Copy DSN
+* </CopyButton>
+*/
+const CopyButton = React.forwardRef(function CopyButton({ value, timeout = DEFAULT_TIMEOUT_MS, children = "Copy", copiedLabel = "Copied", onCopy, onCopyError, onClick, ...buttonProps }, ref) {
+	const [copied, setCopied] = React.useState(false);
+	const timerRef = React.useRef(void 0);
+	React.useEffect(() => () => {
+		if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+	}, []);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		(async () => {
+			try {
+				await writeToClipboard(value);
+			} catch (error) {
+				onCopyError?.(error);
+				return;
+			}
+			onCopy?.(value);
+			setCopied(true);
+			if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => {
+				timerRef.current = void 0;
+				setCopied(false);
+			}, timeout);
+		})();
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		icon: copied ? CheckGlyph : CopyGlyph,
+		"data-copied": copied ? "true" : void 0,
+		onClick: handleClick,
+		...buttonProps,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			children: copied ? copiedLabel : children
+		})
+	});
+});
+//#endregion
+export { CopyButton };

package/dist/instruments/data-row.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+//#region src/instruments/data-row.d.ts
+/** What an interactive row discloses, when it discloses something. */
+interface DataRowDisclosure {
+  /** Whether the surface this row opens is currently showing. */
+  expanded: boolean;
+  /**
+   * The `id` of the element the row opens, when that element is in the DOM.
+   *
+   * Omit it while the surface is closed and unrendered: `aria-controls`
+   * pointing at an id that does not exist is worse than no `aria-controls`.
+   */
+  controls?: string;
+}
+interface DataRowRootProps extends React.ComponentPropsWithoutRef<"div"> {
+  /**
+   * The row responds to a pointer and to the keyboard: hover wash, `cursor`,
+   * an inset focus ring and a tab stop. Defaults to `false`.
+   */
+  interactive?: boolean;
+  /**
+   * Draw the row as picked out of the list. Defaults to `false`.
+   *
+   * Sets `data-selected`, which is also what the hover-revealed action track and
+   * the accent tint key off — so a `<tr data-selected>` in the table idiom gets
+   * exactly the same treatment without going through this component.
+   */
+  selected?: boolean;
+  /** Grey the row out and stop it responding to anything. Defaults to `false`. */
+  disabled?: boolean;
+  /** What "open this row" means — a drawer, a detail pane, a route. */
+  onActivate?: () => void;
+  /**
+   * Expose the row as a disclosure: `data-expanded` always, `aria-expanded`
+   * when the row has a `role` that can carry it, and `aria-controls` when the
+   * disclosed element is on the page.
+   *
+   * **`aria-expanded` is gated on the role, because on a bare `<div>` it is
+   * worse than nothing.** A role-less div maps to `generic`, which supports
+   * only the global attributes — so the state is dropped outright by Blink,
+   * WebKit and Gecko alike (verified through Chromium's own accessibility
+   * tree), announces nothing, and adds a critical `aria-allowed-attr` finding
+   * to any axe run over the console that used it. `role` passes straight
+   * through as a div prop, so a row that genuinely is a disclosure says which
+   * kind it is — `role="button"` for a row that opens a drawer, `role="row"`
+   * inside a grid — and gets the attribute with it. Everything else gets
+   * `data-expanded`, which styles and tests exactly as well and promises
+   * nothing to a screen reader.
+   *
+   * The row is still not given a widget role on its own account: a
+   * `role="button"` row could not legally hold the buttons and links these rows
+   * exist to contain, and that judgement belongs to the caller who knows what
+   * their row does. Where the disclosure has to be bulletproof for assistive
+   * technology, reach for `DataTree` (real `treeitem` expansion) or a
+   * `Table.GroupRow` with a real toggle button in it.
+   */
+  disclosure?: DataRowDisclosure;
+}
+/** The native `<span>` surface every row slot shares, plus `className`. */
+type DataRowSlotProps = React.ComponentPropsWithoutRef<"span">;
+/**
+ * The dense interactive row, as one anatomy three surfaces share.
+ *
+ * `Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row
+ * model, and this is the model: a marker, a label, a description, tags, a
+ * figure, and a trailing action cluster that is only there when you are looking
+ * at the row. Composing them yourself — rather than passing a `columns` array —
+ * is what keeps the primitive domain-neutral: a corpus of skills and a rig of
+ * fixtures need the same six slots and completely different columns.
+ *
+ * The slots are thin: each is a `<span>` with a `data-slot`, the type and
+ * truncation rule for its column, and nothing else. They may be used inside a
+ * `DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same
+ * `group/data-row` name, so `DataRow.Actions` reveals in the table idiom
+ * without a second implementation.
+ *
+ * @example
+ * <DataRow.Root interactive onActivate={() => open(skill)}>
+ *   <DataRow.Marker><StatusDot tone="ok" /></DataRow.Marker>
+ *   <DataRow.Label>{skill.name}</DataRow.Label>
+ *   <DataRow.Meta>{skill.installs}</DataRow.Meta>
+ * </DataRow.Root>
+ */
+declare const DataRow: {
+  Root: React.ForwardRefExoticComponent<DataRowRootProps & React.RefAttributes<HTMLDivElement>>;
+  Marker: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Tags: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Meta: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+  Actions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps };