@vitavision/ui 0.6.0

package/dist/index.js

@@ -0,0 +1,1348 @@
+import { AlertTriangle, Check, CheckCircle2, ChevronDown, ChevronRight, HelpCircle, Info, Loader2, Minus, Moon, Sun, SunMoon, XCircle } from "lucide-react";
+import { createContext, isValidElement, use, useCallback, useId, useMemo, useState, useSyncExternalStore } from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import * as RadixSelect from "@radix-ui/react-select";
+import * as RadixSlider from "@radix-ui/react-slider";
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+import * as RadixSwitch from "@radix-ui/react-switch";
+//#region src/theme.ts
+/**
+* The `localStorage` key a consumer's theme choice is kept under.
+*
+* Every function here takes it as an optional last argument and defaults to this constant,
+* so a single app needs to pass nothing, while two apps sharing a browser profile -- or one
+* app that wants a namespaced key -- can each choose their own without stepping on the
+* other's stored preference.
+*/
+const DEFAULT_THEME_STORAGE_KEY = "vitavision-theme";
+const query = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+/**
+* The stored preference.
+*
+* @param storageKey - The `localStorage` key. Defaults to `DEFAULT_THEME_STORAGE_KEY`.
+* @returns The stored choice, or `system` when nothing valid is stored or storage cannot be
+*   read (private browsing, the server).
+*/
+function readThemeChoice(storageKey = DEFAULT_THEME_STORAGE_KEY) {
+	try {
+		const stored = window.localStorage.getItem(storageKey);
+		if (stored === "light" || stored === "dark" || stored === "system") return stored;
+	} catch {}
+	return "system";
+}
+/**
+* What `choice` actually resolves to right now.
+*
+* @param choice - The preference.
+* @returns `choice` itself for `light`/`dark`; for `system`, the OS palette (`light` where
+*   it cannot be queried).
+*/
+function resolveTheme(choice) {
+	if (choice !== "system") return choice;
+	return query()?.matches ? "dark" : "light";
+}
+function paint(choice) {
+	if (typeof document === "undefined") return;
+	document.documentElement.classList.toggle("dark", resolveTheme(choice) === "dark");
+}
+/**
+* Store a preference and paint it (the `dark` class on `<html>`).
+*
+* @param choice - The new preference.
+* @param storageKey - The `localStorage` key. Defaults to `DEFAULT_THEME_STORAGE_KEY`.
+*/
+function setThemeChoice(choice, storageKey = DEFAULT_THEME_STORAGE_KEY) {
+	try {
+		window.localStorage.setItem(storageKey, choice);
+	} catch {}
+	paint(choice);
+}
+/**
+* Paint the stored choice and keep following the OS while the choice is "system".
+*
+* @param storageKey - The `localStorage` key. Defaults to `DEFAULT_THEME_STORAGE_KEY`.
+* @returns An unsubscribe, so a test can tear the listener down; a long-lived app never does.
+*/
+function initTheme(storageKey = DEFAULT_THEME_STORAGE_KEY) {
+	paint(readThemeChoice(storageKey));
+	const media = query();
+	if (media === null) return () => {};
+	const onSystemChange = () => {
+		if (readThemeChoice(storageKey) === "system") paint("system");
+	};
+	media.addEventListener("change", onSystemChange);
+	return () => media.removeEventListener("change", onSystemChange);
+}
+//#endregion
+//#region src/tone.ts
+const TONE_VAR = {
+	signal: "var(--signal)",
+	normal: "var(--normal)",
+	defect: "var(--defect)",
+	warn: "var(--warn)",
+	muted: "var(--fg-subtle)"
+};
+/**
+* The CSS paint value for a tone — usable directly as a `stroke`, `fill` or `color`. It is a
+* `var(--token)` reference, so it follows the theme without a re-render.
+*
+* @param tone - The tone; `undefined` falls back.
+* @param fallback - The tone used when `tone` is `undefined`. Defaults to `signal`.
+* @returns A `var(--…)` CSS value.
+*/
+function toneColor(tone, fallback = "signal") {
+	return TONE_VAR[tone ?? fallback];
+}
+//#endregion
+//#region src/components/ui/cn.ts
+/**
+* Class composition, and the shared focus treatment.
+*
+* A naive primitive *appends* the caller's `className` to its own base string, so
+* `<Button className="px-6">` produces `px-3 … px-6` and wins or loses on source order
+* rather than on intent. `twMerge` resolves that by conflict group: the caller's `px-6`
+* replaces the base `px-3` and leaves everything else alone.
+*/
+/**
+* Compose class names: `clsx` for the conditionals, then `tailwind-merge` so a later class
+* replaces an earlier one of the same conflict group (the caller's `px-6` beats the base
+* `px-3`). Every primitive merges its caller's `className` through this.
+*
+* @param inputs - Class values: strings, arrays, and `{ class: condition }` records.
+* @returns One class string with conflicts resolved.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+/**
+* One focus treatment for every interactive element in the design system.
+*
+* `outline` rather than `ring` because an outline follows the element's own border-radius
+* and needs no offset *colour* -- a ring offset has to know which surface it sits on, and
+* these primitives are used on `ground`, `surface` and `raised` alike.
+*
+* `focus-visible` rather than `focus`, so a mouse click does not leave a ring behind.
+*/
+const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-signal";
+/**
+* The focus treatment for controls whose own box is the hit target, where an offset ring
+* would clip: the same outline as {@link focusRing}, drawn with no offset.
+*/
+const focusRingInset = "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-signal";
+//#endregion
+//#region src/components/ui/Tooltip.tsx
+/**
+* Shares one open delay (200 ms) across the tooltips below it. Mount it once near the root:
+* `Tooltip` and `InfoHint` need it above them.
+*/
+function TooltipProvider({ children }) {
+	return /* @__PURE__ */ jsx(RadixTooltip.Provider, {
+		delayDuration: 200,
+		children
+	});
+}
+/**
+* A short explanation on hover or focus of its child, for text that helps but is not needed
+* to operate the control (that belongs in a field's description).
+*
+* The child must be one focusable element that accepts a ref (Radix `asChild`). Radix
+* exposes `data-state` (`closed`/`delayed-open`/`instant-open`) on it.
+*/
+function Tooltip({ content, children }) {
+	return /* @__PURE__ */ jsxs(RadixTooltip.Root, { children: [/* @__PURE__ */ jsx(RadixTooltip.Trigger, {
+		asChild: true,
+		children
+	}), /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs(RadixTooltip.Content, {
+		sideOffset: 6,
+		collisionPadding: 8,
+		className: cn("z-50 max-w-xs rounded-control border border-line bg-overlay px-2.5 py-1.5", "text-xs leading-snug text-fg shadow-lg shadow-black/25"),
+		children: [content, /* @__PURE__ */ jsx(RadixTooltip.Arrow, { className: "fill-overlay" })]
+	}) })] });
+}
+/**
+* The standard affordance: a quiet mark that yields the explanation on hover or focus.
+*
+* `icon` exists because the mark answers two different questions. The default `?` offers
+* help with a control; `Info` offers *facts about the thing on screen* -- where a dataset
+* came from, which method produced a measurement -- which the tone demotes here rather
+* than spending a permanent line on. Reading them as the same affordance would be a small
+* lie.
+*/
+function InfoHint({ children, label = "More information", icon: Icon = HelpCircle }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: children,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label,
+			className: cn("rounded-full text-fg-subtle transition-colors hover:text-fg", focusRing),
+			children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
+		})
+	});
+}
+//#endregion
+//#region src/components/ThemeToggle.tsx
+const ORDER = [
+	"system",
+	"light",
+	"dark"
+];
+const ICON = {
+	system: SunMoon,
+	light: Sun,
+	dark: Moon
+};
+const LABEL = {
+	system: "Theme: following the system",
+	light: "Theme: light",
+	dark: "Theme: dark"
+};
+/** Another tab (or window) changing the stored choice re-renders the toggle. */
+function subscribe(onChange) {
+	window.addEventListener("storage", onChange);
+	return () => window.removeEventListener("storage", onChange);
+}
+/** What the server, and a hydrating client's first render, show: no stored choice read yet. */
+const serverChoice = () => "system";
+/**
+* The palette switch: one button cycling system → light → dark, stored in `localStorage`
+* under `storageKey` and painted as the `dark` class on `<html>`.
+*
+* Its `aria-label` (repeated in a tooltip) names the current state; it needs a
+* `TooltipProvider` above it. The stored choice is read as an external store, so the server
+* render and the hydrating first client render agree ("system") and the stored choice
+* follows without a mismatch. The state is exposed as `data-theme-choice`.
+*/
+function ThemeToggle({ storageKey = DEFAULT_THEME_STORAGE_KEY, className }) {
+	const stored = useSyncExternalStore(subscribe, () => readThemeChoice(storageKey), serverChoice);
+	const [chosen, setChosen] = useState(null);
+	const choice = chosen?.key === storageKey ? chosen.choice : stored;
+	const advance = () => {
+		const next = ORDER[(ORDER.indexOf(choice) + 1) % ORDER.length];
+		setChosen({
+			key: storageKey,
+			choice: next
+		});
+		setThemeChoice(next, storageKey);
+	};
+	const Icon = ICON[choice];
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: LABEL[choice],
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: advance,
+			"aria-label": LABEL[choice],
+			"data-theme-choice": choice,
+			className: cn("rounded-control p-1.5 text-fg-muted transition-colors hover:bg-raised hover:text-fg", focusRing, className),
+			children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+		})
+	});
+}
+//#endregion
+//#region src/components/ui/Badge.tsx
+const TONE_CLASSES = {
+	neutral: "bg-raised text-fg-muted ring-line",
+	normal: "bg-normal/12 text-normal ring-normal/25",
+	defect: "bg-defect/12 text-defect ring-defect/25",
+	unlabeled: "bg-raised text-fg-subtle ring-line",
+	warning: "bg-warn/12 text-warn ring-warn/25",
+	info: "bg-signal/12 text-signal ring-signal/25"
+};
+const DOT_CLASSES = {
+	neutral: "bg-fg-subtle",
+	normal: "bg-normal",
+	defect: "bg-defect",
+	unlabeled: "bg-line-strong",
+	warning: "bg-warn",
+	info: "bg-signal"
+};
+/**
+* A short label in a tone: a verdict, a status, a count.
+*
+* The tone is exposed as `data-tone`, so a stylesheet or a test can read it without parsing
+* class names.
+*/
+function Badge({ tone = "neutral", className, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-tone": tone,
+		className: cn("inline-flex items-center gap-1 rounded-control px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset", TONE_CLASSES[tone], className),
+		children
+	});
+}
+/**
+* A status as a dot and a word.
+*
+* The mapping from a domain status to a tone belongs to each caller -- only it knows
+* whether "running" is good news -- but the *rendering* of the answer does not.
+*/
+function StatusDot({ tone, className, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-tone": tone,
+		className: cn("inline-flex items-center gap-1.5 text-xs text-fg-muted", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("size-1.5 shrink-0 rounded-full", DOT_CLASSES[tone]),
+			"aria-hidden": true
+		}), children]
+	});
+}
+/** Counts as a compact `12 normal · 9 defect` run of badges, skipping the zeroes. */
+function CountRun({ counts, className }) {
+	const shown = counts.filter(([, value]) => value > 0);
+	if (shown.length === 0) return /* @__PURE__ */ jsx("span", {
+		className: cn("text-xs text-fg-subtle", className),
+		children: "empty"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex flex-wrap items-center gap-1.5", className),
+		children: shown.map(([name, value, tone]) => /* @__PURE__ */ jsxs(Badge, {
+			tone,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-mono",
+					children: value
+				}),
+				" ",
+				name
+			]
+		}, name))
+	});
+}
+//#endregion
+//#region src/components/ui/Density.tsx
+const DensityContext = createContext("comfortable");
+/**
+* The density in force here. Every primitive that has two spacings reads this.
+*
+* @returns The value of the nearest `DensityProvider`, or `comfortable` outside one.
+*/
+function useDensity() {
+	return use(DensityContext);
+}
+/**
+* Pick one of two values by the density in force — the primitives' own idiom.
+*
+* @param density - The density in force, from `useDensity()`.
+* @param comfortable - The value for `comfortable`.
+* @param compact - The value for `compact`.
+* @returns `compact` when the density is compact, else `comfortable`.
+*/
+function byDensity(density, comfortable, compact) {
+	return density === "compact" ? compact : comfortable;
+}
+/**
+* Sets the density for a region: every primitive below it reads the value through
+* `useDensity`. Nest providers to switch a sub-region back.
+*/
+function DensityProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(DensityContext, {
+		value,
+		children
+	});
+}
+//#endregion
+//#region src/components/ui/Button.tsx
+const VARIANT_CLASSES = {
+	primary: "bg-signal text-signal-fg hover:bg-signal-strong",
+	secondary: "bg-surface text-fg ring-1 ring-inset ring-line-strong hover:bg-raised",
+	ghost: "text-fg-muted hover:bg-raised hover:text-fg",
+	danger: "bg-defect/10 text-defect ring-1 ring-inset ring-defect/30 hover:bg-defect/15"
+};
+const SIZE_CLASSES = {
+	sm: "h-7 gap-1.5 px-2.5 text-xs",
+	md: "h-8 gap-2 px-3 text-sm"
+};
+/**
+* The classes that make a control look like a button, for the one element that has to be
+* something else. Prefer `Button` and `ButtonLink`; this exists so a third shape — a
+* `<label>` wrapping a file input, say — does not have to copy the variant table.
+*
+* @param options - The variant (default `secondary`), the size (default `md`) and the
+*   caller's own classes, merged last.
+* @returns The class string.
+*/
+function buttonClasses({ variant = "secondary", size = "md", className } = {}) {
+	return cn("inline-flex shrink-0 items-center justify-center rounded-control font-medium transition-colors", "disabled:cursor-not-allowed disabled:opacity-45", SIZE_CLASSES[size], VARIANT_CLASSES[variant], focusRing, className);
+}
+function ButtonIcon({ icon }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "shrink-0 [&>svg]:size-3.5",
+		"aria-hidden": true,
+		children: icon
+	});
+}
+/**
+* An action. `asChild` renders the button's look onto the single child element instead of a
+* `<button>` — how a router's link becomes a button-shaped navigation without this package
+* knowing about routers: `<Button asChild><Link to="/runs">Runs</Link></Button>`.
+* For a plain URL, `ButtonLink` is the shorter spelling.
+*
+* Takes every `<button>` prop, `ref` included. State is exposed as `data-variant` and, while
+* `loading`, `data-loading` (plus `aria-busy`).
+*/
+function Button({ variant = "secondary", size, type = "button", loading = false, icon, asChild = false, className, children, disabled, ...rest }) {
+	const density = useDensity();
+	const resolved = size ?? byDensity(density, "md", "sm");
+	if (asChild) return /* @__PURE__ */ jsxs(Slot, {
+		...rest,
+		"data-variant": variant,
+		className: buttonClasses({
+			variant,
+			size: resolved,
+			className
+		}),
+		children: [icon && /* @__PURE__ */ jsx(ButtonIcon, { icon }), /* @__PURE__ */ jsx(Slottable, { children })]
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		type,
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		"data-variant": variant,
+		"data-loading": loading ? "" : void 0,
+		...rest,
+		className: buttonClasses({
+			variant,
+			size: resolved,
+			className
+		}),
+		children: [loading ? /* @__PURE__ */ jsx(Loader2, {
+			className: "size-3.5 shrink-0 animate-spin",
+			"aria-hidden": true
+		}) : icon && /* @__PURE__ */ jsx(ButtonIcon, { icon }), children]
+	});
+}
+/**
+* A navigation that looks like a button: one `<a>`, styled by the same variants and density.
+*
+* The alternative every consumer reached for was `<Link><Button/></Link>` — a button inside
+* an anchor, which is invalid HTML, gives a keyboard two tab stops for one action, and makes
+* a screen reader announce a button that navigates. There is no `disabled` or `loading`:
+* a link that cannot be followed should not be rendered as one, and a navigation has no
+* pending state of its own.
+*
+* It renders a plain `<a href>`, and takes every `<a>` prop, `ref` included. For a router's
+* link, pass it as the only child with `asChild` —
+* `<ButtonLink asChild><Link to="/runs">Runs</Link></ButtonLink>` — so client-side
+* navigation keeps working and this package still never imports a router.
+*/
+function ButtonLink({ variant = "secondary", size, icon, asChild = false, className, children, ...rest }) {
+	const density = useDensity();
+	const resolved = size ?? byDensity(density, "md", "sm");
+	return /* @__PURE__ */ jsxs(asChild ? Slot : "a", {
+		...rest,
+		"data-variant": variant,
+		className: buttonClasses({
+			variant,
+			size: resolved,
+			className
+		}),
+		children: [icon && /* @__PURE__ */ jsx(ButtonIcon, { icon }), /* @__PURE__ */ jsx(Slottable, { children })]
+	});
+}
+//#endregion
+//#region src/components/ui/Dialog.tsx
+/**
+* Whether the body overflows its height cap, kept current as the dialog or its content
+* resizes. A scrolling body has to be reachable by keyboard (so it can be scrolled without
+* a pointer); a body that fits must not add a tab stop.
+*/
+function useOverflowing() {
+	const [overflowing, setOverflowing] = useState(false);
+	return [useCallback((node) => {
+		if (node === null) return void 0;
+		const measure = () => setOverflowing(node.scrollHeight > node.clientHeight + 1);
+		measure();
+		if (typeof ResizeObserver === "undefined") return void 0;
+		const observer = new ResizeObserver(measure);
+		observer.observe(node);
+		if (node.firstElementChild) observer.observe(node.firstElementChild);
+		return () => observer.disconnect();
+	}, []), overflowing];
+}
+/**
+* A modal: a title, a body the caller fills, and a footer it chooses.
+*
+* Controlled — the caller owns `open`. The body scrolls under a height cap so the footer
+* stays on screen; while it overflows it is a keyboard tab stop (with the focus ring) and
+* carries `data-overflowing`, so it can be scrolled without a pointer.
+*/
+function Dialog({ open, onOpenChange, title, description, footer, className, children }) {
+	const [bodyRef, overflowing] = useOverflowing();
+	return /* @__PURE__ */ jsx(RadixDialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [/* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-[1px]" }), /* @__PURE__ */ jsxs(RadixDialog.Content, {
+			className: cn("fixed top-1/2 left-1/2 z-50 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2", "flex max-h-[calc(100vh-4rem)] flex-col", "rounded-panel border border-line bg-overlay p-5 shadow-xl shadow-black/40", "focus:outline-none", className),
+			children: [
+				/* @__PURE__ */ jsx(RadixDialog.Title, {
+					className: "text-sm font-semibold tracking-tight text-fg",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(RadixDialog.Description, {
+					className: cn("mt-2 text-sm leading-relaxed text-fg-muted", description === void 0 && "sr-only"),
+					children: description ?? title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: bodyRef,
+					tabIndex: overflowing ? 0 : void 0,
+					"data-overflowing": overflowing ? "" : void 0,
+					className: cn("min-h-0 overflow-y-auto", focusRingInset),
+					children: /* @__PURE__ */ jsx("div", { children })
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					className: "mt-5 flex shrink-0 justify-end gap-2",
+					children: footer
+				})
+			]
+		})] })
+	});
+}
+/**
+* The destructive-action confirmation: a `Dialog` whose footer is Cancel and one confirm
+* button. Say in `description` what will actually happen.
+*/
+function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, onConfirm, loading = false, disabled = false, destructive = false, className }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		title,
+		description,
+		className,
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RadixDialog.Close, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				children: "Cancel"
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: destructive ? "danger" : "primary",
+			loading,
+			disabled,
+			onClick: onConfirm,
+			children: confirmLabel
+		})] })
+	});
+}
+/**
+* The dialog's own dismiss, for a footer the caller builds: wrap a button in it with
+* `asChild` — `<DialogClose asChild><Button>Done</Button></DialogClose>`.
+*/
+const DialogClose = RadixDialog.Close;
+//#endregion
+//#region src/components/ui/Disclosure.tsx
+/**
+* Content folded away behind a summary line, on a native `<details>`, with a caret that
+* rotates with the element's own `open` state (no JavaScript involved).
+*
+* Uncontrolled: `defaultOpen` sets the initial state and the element owns it after that.
+*/
+function Disclosure({ summary, count, defaultOpen = false, className, children }) {
+	return /* @__PURE__ */ jsxs("details", {
+		open: defaultOpen,
+		className: cn("group", className),
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: cn("flex cursor-pointer items-center gap-1.5 rounded-control py-1 text-xs font-medium text-fg-muted", "transition-colors hover:text-fg", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-signal"),
+			children: [
+				/* @__PURE__ */ jsx(ChevronRight, {
+					className: "size-3.5 shrink-0 transition-transform group-open:rotate-90",
+					"aria-hidden": true
+				}),
+				summary,
+				count !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "font-mono text-fg-subtle tabular-nums",
+					children: count
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "pt-3",
+			children
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/Feedback.tsx
+const CALLOUT = {
+	info: {
+		classes: "border-signal/30 bg-signal/8 text-fg",
+		Icon: Info
+	},
+	warning: {
+		classes: "border-warn/30 bg-warn/8 text-fg",
+		Icon: AlertTriangle
+	},
+	error: {
+		classes: "border-defect/30 bg-defect/8 text-fg",
+		Icon: XCircle
+	},
+	success: {
+		classes: "border-normal/30 bg-normal/8 text-fg",
+		Icon: CheckCircle2
+	}
+};
+const ICON_TONE = {
+	info: "text-signal",
+	warning: "text-warn",
+	error: "text-defect",
+	success: "text-normal"
+};
+/**
+* A boxed message with a tone icon, an optional title and optional actions.
+*
+* An `error` callout is a `role="alert"` (announced at once); the others are
+* `role="status"`. The tone is exposed as `data-tone`.
+*/
+function Callout({ tone = "info", title, actions, className, children }) {
+	const { classes, Icon } = CALLOUT[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		role: tone === "error" ? "alert" : "status",
+		"data-tone": tone,
+		className: cn("flex items-start gap-2.5 rounded-control border px-3 py-2.5 text-sm leading-snug", classes, className),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			className: cn("mt-0.5 size-4 shrink-0", ICON_TONE[tone]),
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-1",
+			children: [
+				title && /* @__PURE__ */ jsx("p", {
+					className: "font-medium",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 text-fg-muted",
+					children
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "mt-1 flex flex-wrap items-center gap-2",
+					children: actions
+				})
+			]
+		})]
+	});
+}
+/** The common error shape: an `error` `Callout` with only a message. */
+function ErrorBox({ className, children }) {
+	return /* @__PURE__ */ jsx(Callout, {
+		tone: "error",
+		className,
+		children
+	});
+}
+/** An empty state: a sentence saying why there is nothing here, and the action that fixes it. */
+function Empty({ action, className, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center gap-3 py-10 text-center", className),
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-sm text-fg-muted",
+			children
+		}), action]
+	});
+}
+/** One placeholder bar for content on its way (`aria-hidden`; size it with `className`). */
+function Skeleton({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: cn("animate-pulse rounded-control bg-line", className)
+	});
+}
+/** A stand-in for a panel's worth of content, so the layout does not jump when it lands. */
+function SkeletonRows({ rows = 3, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-label": "Loading",
+		className: cn("flex flex-col gap-2", className),
+		children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: cn("h-4", index === rows - 1 ? "w-2/3" : "w-full") }, index))
+	});
+}
+/**
+* A known fraction done, as a bar and (with `label`) a percentage line.
+*
+* A `role="progressbar"` with `aria-valuenow` in percent. Its accessible name is
+* `aria-label` if given, else `label`, else "Progress" — pass one that names the job when
+* a screen shows more than one bar.
+*/
+function ProgressBar({ fraction, label, "aria-label": ariaLabel, className }) {
+	const percent = Math.round(Math.min(Math.max(fraction, 0), 1) * 100);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "progressbar",
+			"aria-label": ariaLabel ?? label ?? "Progress",
+			"aria-valuenow": percent,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"data-complete": percent === 100 ? "" : void 0,
+			className: "h-1.5 overflow-hidden rounded-full bg-line",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full rounded-full bg-signal transition-[width] duration-300",
+				style: { width: `${percent}%` }
+			})
+		}), label && /* @__PURE__ */ jsxs("span", {
+			className: "font-mono text-xs text-fg-muted tabular-nums",
+			children: [
+				percent,
+				"% · ",
+				label
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/Field.tsx
+const FieldContext = createContext({
+	describedBy: void 0,
+	invalid: false
+});
+/**
+* The `aria-describedby` and `aria-invalid` a control inside a `Field` should carry, merged
+* with the control's own `aria-describedby`. Used by this package's controls; not exported
+* from the package.
+*/
+function useFieldDescription(own) {
+	const { describedBy, invalid } = use(FieldContext);
+	const ids = [own, describedBy].filter(Boolean).join(" ");
+	return {
+		"aria-describedby": ids === "" ? void 0 : ids,
+		"aria-invalid": invalid || void 0
+	};
+}
+/**
+* A label, the control, and optionally a description, an error and a compact annotation.
+*
+* The label text and the annotation name the control (the `<label>` wraps them and the
+* control); the description and the error are outside the label and wired into the
+* control's `aria-describedby` instead (the error also sets `aria-invalid`): directly for
+* this package's controls — `Input`, `NumberInput`, `Textarea`, `Select`, `Slider`,
+* `SegmentedControl`, `Checkbox` — and, with `as="group"`, on the group itself. A control of your own inside a `label` field does not
+* pick them up; give it `aria-describedby` yourself. State is exposed as `data-invalid` and
+* `data-required`.
+*/
+function Field({ label, description, error, required = false, annotation, as = "label", className, children }) {
+	const descriptionId = useId();
+	const errorId = useId();
+	const density = useDensity();
+	const hasError = error !== void 0 && error !== null && error !== false;
+	const describedBy = [description ? descriptionId : void 0, hasError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const control = useMemo(() => ({
+		describedBy: as === "label" ? describedBy : void 0,
+		invalid: hasError
+	}), [
+		as,
+		describedBy,
+		hasError
+	]);
+	const gap = byDensity(density, "gap-1.5", "gap-1");
+	const labelled = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "flex items-baseline gap-2",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cn("font-medium text-fg", byDensity(density, "text-xs", "text-[11px]")),
+			children: [label, required && /* @__PURE__ */ jsx("span", {
+				className: "ml-0.5 text-defect",
+				title: "Required",
+				children: "*"
+			})]
+		}), annotation && /* @__PURE__ */ jsx("span", {
+			className: "ml-auto font-mono text-[11px] text-fg-subtle",
+			children: annotation
+		})]
+	}), /* @__PURE__ */ jsx(FieldContext, {
+		value: control,
+		children
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col", gap, className),
+		"data-invalid": hasError ? "" : void 0,
+		"data-required": required ? "" : void 0,
+		...as === "group" ? {
+			role: "group",
+			"aria-label": label,
+			"aria-describedby": describedBy
+		} : {},
+		children: [
+			as === "label" ? /* @__PURE__ */ jsx("label", {
+				className: cn("flex min-w-0 flex-col", gap),
+				children: labelled
+			}) : labelled,
+			description && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: "text-xs leading-snug text-fg-muted",
+				children: description
+			}),
+			hasError && /* @__PURE__ */ jsx("span", {
+				id: errorId,
+				role: "alert",
+				className: "text-xs leading-snug text-defect",
+				children: error
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ui/Input.tsx
+/**
+* The shared look of a text-like control — border, palette, placeholder, hover, disabled and
+* focus — for a native control that is not one of `Input`, `NumberInput` or `Textarea`.
+* Add the height with `useControlHeight()`.
+*/
+const controlClasses = cn("w-full rounded-control border border-line-strong bg-raised px-2.5 text-sm text-fg", "placeholder:text-fg-subtle", "transition-colors hover:border-fg-subtle", "disabled:cursor-not-allowed disabled:opacity-50", focusRingInset);
+/**
+* The former name of `controlClasses`, kept as an alias for existing consumers.
+*
+* @deprecated Use `Input`, `NumberInput`, `Textarea` or `Select`, or `controlClasses`.
+*/
+const inputClasses = controlClasses;
+/**
+* The control height in force — exported so an app's own native control can match.
+*
+* @returns A Tailwind height class: `h-8` comfortable, `h-7` compact.
+*/
+function useControlHeight() {
+	return byDensity(useDensity(), "h-8", "h-7");
+}
+/**
+* A single-line text input. Takes every `<input>` prop, `ref` included; inside a `Field` it
+* is described by the field's description and error.
+*/
+function Input({ className, "aria-describedby": describedBy, ...rest }) {
+	return /* @__PURE__ */ jsx("input", {
+		...useFieldDescription(describedBy),
+		...rest,
+		className: cn(controlClasses, useControlHeight(), className)
+	});
+}
+/**
+* A number, with the schema's own bounds attached.
+*
+* `font-mono` because these are read as quantities and compared down a column. Takes every
+* `<input>` prop, `ref` included (`type` is always `number`).
+*/
+function NumberInput({ className, "aria-describedby": describedBy, ...rest }) {
+	return /* @__PURE__ */ jsx("input", {
+		...useFieldDescription(describedBy),
+		...rest,
+		type: "number",
+		inputMode: "decimal",
+		className: cn(controlClasses, useControlHeight(), "font-mono tabular-nums", className)
+	});
+}
+/**
+* Multi-line text — set in mono, for JSON and lists. Takes every `<textarea>` prop, `ref`
+* included.
+*/
+function Textarea({ className, "aria-describedby": describedBy, ...rest }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		...useFieldDescription(describedBy),
+		...rest,
+		className: cn(controlClasses, "py-1.5 font-mono", className)
+	});
+}
+//#endregion
+//#region src/components/ui/Panel.tsx
+/**
+* A bordered surface with an optional header (a title and actions) above a padded body.
+* The header and the padding follow the density in force.
+*/
+function Panel({ title, actions, className, bodyClassName, children }) {
+	const density = useDensity();
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("rounded-panel border border-line bg-surface", className),
+		children: [(title || actions) && /* @__PURE__ */ jsxs("header", {
+			className: cn("flex items-center justify-between gap-4 border-b border-line", byDensity(density, "min-h-11 px-4 py-2.5", "min-h-8 px-2.5 py-1")),
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: cn("truncate font-semibold text-fg", byDensity(density, "text-sm tracking-tight", "text-[11px] tracking-wider uppercase text-fg-muted")),
+				children: title
+			}), actions && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-1.5",
+				children: actions
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn(byDensity(density, "p-4", "p-2.5"), bodyClassName),
+			children
+		})]
+	});
+}
+/**
+* A numbered step inside a form.
+*
+* The number is not decoration: it marks a genuine ordering, where each choice narrows the
+* next. Do not reach for this where the parts are merely adjacent.
+*/
+function Section({ step, title, hint, actions, className, children }) {
+	const density = useDensity();
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("flex flex-col", byDensity(density, "gap-3", "gap-1.5"), className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-baseline", byDensity(density, "gap-2.5", "gap-2")),
+			children: [
+				step !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "font-mono text-xs text-fg-subtle tabular-nums",
+					"aria-hidden": true,
+					children: String(step).padStart(2, "0")
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold tracking-tight text-fg",
+					children: title
+				}),
+				hint && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-fg-muted",
+					children: hint
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "ml-auto flex items-center gap-2",
+					children: actions
+				})
+			]
+		}), children]
+	});
+}
+const BACK_CLASSES = "w-fit text-xs text-fg-muted transition-colors hover:text-signal";
+/**
+* The top of a screen: an optional back link, the `<h1>` title with actions beside it, and
+* a line of meta facts below. Links go through `back`, never a router import.
+*/
+function PageHeader({ title, meta, actions, back, className }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [
+			back && (isHrefLink(back) ? /* @__PURE__ */ jsxs("a", {
+				href: back.href,
+				className: BACK_CLASSES,
+				children: ["← ", back.label]
+			}) : /* @__PURE__ */ jsxs(Slot, {
+				className: BACK_CLASSES,
+				children: ["← ", /* @__PURE__ */ jsx(Slottable, { children: back })]
+			})),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-xl font-semibold tracking-tight text-fg",
+					children: title
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-2",
+					children: actions
+				})]
+			}),
+			meta && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-2 text-xs text-fg-muted",
+				children: meta
+			})
+		]
+	});
+}
+function isHrefLink(back) {
+	return !isValidElement(back);
+}
+const READOUT_LINK = "text-fg transition-colors hover:text-signal";
+/**
+* The instrument's display line: the facts about what is on screen, in one fixed slot.
+*
+* Stated in the same place on every screen, in mono, the way a piece of measuring equipment
+* has one readout rather than a label per panel. Rendered as a list because it is one.
+*/
+function ReadoutStrip({ items, className }) {
+	const shown = items.filter((item) => item.value !== null && item.value !== void 0);
+	if (shown.length === 0) return null;
+	return /* @__PURE__ */ jsx("ol", {
+		className: cn("flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-xs text-fg-muted", className),
+		children: shown.map((item, index) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-2",
+			children: [
+				index > 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-fg-subtle",
+					"aria-hidden": true,
+					children: "·"
+				}),
+				item.label && /* @__PURE__ */ jsx("span", {
+					className: "text-fg-subtle",
+					children: item.label
+				}),
+				item.link ? /* @__PURE__ */ jsxs(Slot, {
+					className: READOUT_LINK,
+					children: [/* @__PURE__ */ jsx(Slottable, { children: item.link }), item.value]
+				}) : item.href ? /* @__PURE__ */ jsx("a", {
+					href: item.href,
+					className: READOUT_LINK,
+					children: item.value
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "text-fg",
+					children: item.value
+				})
+			]
+		}, index))
+	});
+}
+//#endregion
+//#region src/components/ui/SegmentedControl.tsx
+/**
+* A choice among two or three, shown as a strip of segments (native radios in one group, so
+* arrow keys move between them).
+*
+* **`""` means unset.** The highlighted segment is always the *effective* value — `value`,
+* or `defaultValue` while `value` is `""` — and choosing the segment that matches
+* `defaultValue` reports `""`, so the default stays defined in one place. Each segment
+* carries `data-state="checked"` or `"unchecked"`; the group carries `data-disabled`.
+*/
+function SegmentedControl({ value, defaultValue, options, onValueChange, disabled = false, "aria-label": ariaLabel, className }) {
+	const nameId = useId();
+	const described = useFieldDescription();
+	const effective = value === "" ? defaultValue : value;
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		"aria-describedby": described["aria-describedby"],
+		"data-disabled": disabled ? "" : void 0,
+		className: cn("inline-flex w-fit max-w-full shrink-0 items-center gap-0.5 rounded-control border border-line-strong bg-raised p-0.5", disabled && "opacity-50", className),
+		children: options.map((option) => {
+			const checked = option.value === effective;
+			return /* @__PURE__ */ jsxs("label", {
+				"data-state": checked ? "checked" : "unchecked",
+				className: cn("relative cursor-pointer whitespace-nowrap rounded-[0.3rem] px-2.5 py-1 text-xs font-medium transition-colors", "has-focus-visible:outline-2 has-focus-visible:outline-offset-1 has-focus-visible:outline-signal", checked ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg", disabled && "cursor-not-allowed"),
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "radio",
+					name: nameId,
+					value: option.value,
+					checked,
+					disabled,
+					onChange: () => onValueChange(option.value === defaultValue ? "" : option.value),
+					className: "absolute inset-0 cursor-pointer opacity-0"
+				}), option.label]
+			}, option.value);
+		})
+	});
+}
+//#endregion
+//#region src/components/ui/Select.tsx
+const UNSET_SENTINEL = "__unset__";
+/**
+* A picker whose option list is styled with the app, with room for a quiet note per option.
+*
+* Controlled, and **`""` means unset**: the trigger then shows `placeholder`, and the
+* `unsetLabel` entry (when given) reports `""`. The trigger carries Radix's `data-state`
+* (`open`/`closed`), `data-placeholder` while unset and `data-disabled`; inside a `Field` it
+* is described by the field's description and error.
+*/
+function Select({ value, onValueChange, options, placeholder = "Choose…", unsetLabel, disabled = false, "aria-label": ariaLabel, "aria-describedby": ownDescribedBy, className }) {
+	const [open, setOpen] = useState(false);
+	const described = useFieldDescription(ownDescribedBy);
+	return /* @__PURE__ */ jsxs(RadixSelect.Root, {
+		value,
+		onValueChange: (next) => onValueChange(next === UNSET_SENTINEL ? "" : next),
+		open,
+		onOpenChange: setOpen,
+		disabled,
+		children: [/* @__PURE__ */ jsxs(RadixSelect.Trigger, {
+			"aria-label": ariaLabel,
+			...described,
+			tabIndex: open ? -1 : void 0,
+			className: cn("flex h-8 w-full items-center justify-between gap-2 rounded-control border border-line-strong bg-raised px-2.5 text-sm text-fg", "transition-colors hover:border-fg-subtle", "disabled:cursor-not-allowed disabled:opacity-50", "data-[placeholder]:text-fg-subtle", focusRingInset, className),
+			children: [/* @__PURE__ */ jsx(RadixSelect.Value, { placeholder }), /* @__PURE__ */ jsx(RadixSelect.Icon, {
+				className: "shrink-0 text-fg-subtle",
+				children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+			})]
+		}), /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsx(RadixSelect.Content, {
+			position: "popper",
+			sideOffset: 4,
+			className: cn("z-50 max-h-72 min-w-(--radix-select-trigger-width) overflow-hidden", "rounded-panel border border-line bg-overlay shadow-lg shadow-black/25"),
+			children: /* @__PURE__ */ jsxs(RadixSelect.Viewport, {
+				className: "p-1",
+				children: [unsetLabel !== void 0 && /* @__PURE__ */ jsx(SelectItem, {
+					value: UNSET_SENTINEL,
+					label: unsetLabel,
+					muted: true
+				}), options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+					value: option.value,
+					label: option.label,
+					note: option.note,
+					disabled: option.disabled
+				}, option.value))]
+			})
+		}) })]
+	});
+}
+function SelectItem({ value, label, note, disabled, muted = false }) {
+	return /* @__PURE__ */ jsxs(RadixSelect.Item, {
+		value,
+		disabled: disabled ?? false,
+		className: cn("relative flex cursor-default items-center gap-2 rounded-control py-1.5 pr-2 pl-7 text-sm outline-none select-none", "data-highlighted:bg-raised data-highlighted:text-fg", "data-disabled:pointer-events-none data-disabled:opacity-45", muted ? "text-fg-muted" : "text-fg"),
+		children: [
+			/* @__PURE__ */ jsx(RadixSelect.ItemIndicator, {
+				className: "absolute left-2 text-signal",
+				children: /* @__PURE__ */ jsx(Check, { className: "size-3.5" })
+			}),
+			/* @__PURE__ */ jsx(RadixSelect.ItemText, { children: label }),
+			note && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto font-mono text-xs text-fg-subtle",
+				children: note
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ui/Slider.tsx
+/**
+* A continuous value, with its number rendered beside the track.
+*
+* Controlled. The name (`aria-label`) and a surrounding `Field`'s description go on the
+* thumb — the element with `role="slider"` that a keyboard and a screen reader operate.
+* Radix exposes `data-disabled` and `data-orientation` on the parts.
+*/
+function Slider({ value, onValueChange, onValueCommit, min = 0, max = 1, step = .01, readout, disabled = false, "aria-label": ariaLabel, "aria-describedby": ownDescribedBy, className }) {
+	const described = useFieldDescription(ownDescribedBy);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-1 items-center gap-3", className),
+		children: [/* @__PURE__ */ jsxs(RadixSlider.Root, {
+			value: [value],
+			onValueChange: ([next]) => next !== void 0 && onValueChange(next),
+			onValueCommit: ([next]) => next !== void 0 && onValueCommit?.(next),
+			min,
+			max,
+			step,
+			disabled,
+			className: cn("relative flex h-5 min-w-0 flex-1 touch-none items-center select-none", "data-disabled:opacity-50"),
+			children: [/* @__PURE__ */ jsx(RadixSlider.Track, {
+				className: "relative h-1 grow overflow-hidden rounded-full bg-line",
+				children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: "absolute h-full bg-signal" })
+			}), /* @__PURE__ */ jsx(RadixSlider.Thumb, {
+				"aria-label": ariaLabel,
+				...described,
+				className: cn("block size-3.5 rounded-full border-2 border-signal bg-surface transition-shadow", "hover:shadow-[0_0_0_4px] hover:shadow-signal/20", "disabled:cursor-not-allowed", focusRing)
+			})]
+		}), readout && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0 font-mono text-xs text-fg tabular-nums",
+			children: readout
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/Table.tsx
+/**
+* A table of rows, with numeric columns set in mono and right-aligned.
+*
+* With `onRowClick` the rows are keyboard-reachable (Tab, then Enter or Space) while keeping
+* their table semantics. The active row carries `aria-current` and `data-state="active"`;
+* padding follows the density in force. With no rows it renders the `empty` message instead.
+*/
+function Table({ columns, rows, rowKey, empty = "Nothing here.", caption, className, onRowClick, isRowActive, onRowHover }) {
+	const density = useDensity();
+	if (rows.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: cn("text-center text-fg-muted", byDensity(density, "py-6 text-sm", "py-3 text-xs"), className),
+		children: empty
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full overflow-x-auto", className),
+		children: /* @__PURE__ */ jsxs("table", {
+			className: cn("w-full text-left", byDensity(density, "text-sm", "text-[11px]")),
+			children: [
+				caption && /* @__PURE__ */ jsx("caption", {
+					className: "sr-only",
+					children: caption
+				}),
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+					className: "border-b border-line",
+					children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						style: column.width ? { width: column.width } : void 0,
+						className: cn("font-medium text-fg-muted", byDensity(density, "pb-2 pr-3 text-xs", "pb-1 pr-2 text-[10px]"), column.numeric && "text-right"),
+						children: column.header
+					}, column.key))
+				}) }),
+				/* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx("tr", {
+					"data-state": isRowActive?.(row, index) ? "active" : void 0,
+					className: cn("border-b border-line/60 last:border-0", onRowClick && "cursor-pointer hover:bg-raised", isRowActive?.(row, index) && "bg-signal/10"),
+					tabIndex: onRowClick ? 0 : void 0,
+					"aria-current": isRowActive?.(row, index) ? true : void 0,
+					onClick: onRowClick ? (event) => onRowClick(row, index, event) : void 0,
+					onKeyDown: onRowClick ? (event) => {
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							onRowClick(row, index, event);
+						}
+					} : void 0,
+					onPointerEnter: onRowHover ? () => onRowHover(row, index) : void 0,
+					onPointerLeave: onRowHover ? () => onRowHover(null, null) : void 0,
+					children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+						className: cn("align-middle text-fg last:pr-0", byDensity(density, "py-2 pr-3", "py-0.5 pr-2"), column.numeric && "text-right font-mono tabular-nums"),
+						children: column.cell(row)
+					}, column.key))
+				}, rowKey(row, index))) })
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/ui/Toggle.tsx
+/**
+* A setting: changes how the thing behaves from now on, and reads as one ("show the mask").
+* Always labelled; the label and the description sit beside the switch.
+*
+* Controlled. Radix exposes `data-state` (`checked`/`unchecked`) and `data-disabled`.
+*/
+function Switch({ checked, onCheckedChange, label, description, disabled = false, className }) {
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("flex min-w-0 items-start gap-2.5", className),
+		children: [/* @__PURE__ */ jsx(RadixSwitch.Root, {
+			checked,
+			onCheckedChange,
+			disabled,
+			"aria-describedby": description ? descriptionId : void 0,
+			className: cn("mt-0.5 h-4 w-7 shrink-0 rounded-full border border-line-strong bg-raised transition-colors", "data-[state=checked]:border-signal data-[state=checked]:bg-signal", "disabled:cursor-not-allowed disabled:opacity-50", focusRing),
+			children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: cn("block size-3 rounded-full bg-fg-subtle transition-transform will-change-transform", "translate-x-0.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:bg-signal-fg") })
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm leading-tight text-fg",
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: "text-xs leading-snug text-fg-muted",
+				children: description
+			})]
+		})]
+	});
+}
+/**
+* A statement about a state you are about to commit ("keep this channel"). With a `label`
+* it renders its own row; without one it is a bare box (give it `aria-label`, e.g. in a
+* table cell).
+*
+* Controlled. Radix exposes `data-state` (`checked`/`unchecked`/`indeterminate`) and
+* `data-disabled`; inside a `Field` it is described by the field's description and error.
+*/
+function Checkbox({ checked, onCheckedChange, onClick, label, description, disabled = false, "aria-label": ariaLabel, className }) {
+	const descriptionId = useId();
+	const described = useFieldDescription(description ? descriptionId : void 0);
+	const box = /* @__PURE__ */ jsx(RadixCheckbox.Root, {
+		checked,
+		onCheckedChange: (next) => onCheckedChange(next === true),
+		onClick,
+		disabled,
+		"aria-label": ariaLabel,
+		...described,
+		className: cn("flex size-4 shrink-0 items-center justify-center rounded-[0.25rem] border border-line-strong bg-raised transition-colors", "data-[state=checked]:border-signal data-[state=checked]:bg-signal", "data-[state=indeterminate]:border-signal data-[state=indeterminate]:bg-signal", "disabled:cursor-not-allowed disabled:opacity-50", focusRing, label === void 0 && className),
+		children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, {
+			className: "text-signal-fg",
+			children: checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, {
+				className: "size-3",
+				strokeWidth: 3
+			}) : /* @__PURE__ */ jsx(Check, {
+				className: "size-3",
+				strokeWidth: 3
+			})
+		})
+	});
+	if (label === void 0) return box;
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("flex min-w-0 items-start gap-2.5", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "mt-0.5",
+			children: box
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm leading-tight text-fg",
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				id: descriptionId,
+				className: "text-xs leading-snug text-fg-muted",
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/ui/ToggleChip.tsx
+/**
+* A dense on/off chip for a layer drawn on screen, with an optional swatch in the layer's
+* colour: a toolbar-sized `Switch` (`role="switch"`, `aria-checked`).
+*
+* Controlled. State is exposed as `data-state` (`checked`/`unchecked`).
+*/
+function ToggleChip({ checked, onCheckedChange, children, swatch, disabled = false, title, className }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		"data-state": checked ? "checked" : "unchecked",
+		disabled,
+		title,
+		onClick: () => onCheckedChange(!checked),
+		className: cn("inline-flex items-center gap-1.5 rounded-control border px-2 py-1 text-xs whitespace-nowrap transition-colors", checked ? "border-line-strong bg-raised text-fg" : "border-line bg-transparent text-fg-muted hover:text-fg", "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-fg-muted", focusRing, className),
+		children: [swatch !== void 0 && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("size-2 shrink-0 rounded-full border transition-opacity", checked ? "opacity-100" : "opacity-30"),
+			style: {
+				backgroundColor: swatch,
+				borderColor: swatch
+			}
+		}), children]
+	});
+}
+//#endregion
+//#region src/components/Tabs.tsx
+const NEXT_KEYS = {
+	ArrowRight: (index, length) => (index + 1) % length,
+	ArrowLeft: (index, length) => (index - 1 + length) % length,
+	Home: () => 0,
+	End: (_, length) => length - 1
+};
+/**
+* A tab strip (`role="tablist"`): the caller renders the panel for the `active` tab.
+*
+* Keyboard: one tab stop for the whole strip (the active tab); ←/→ move to the previous or
+* next enabled tab and select it, Home/End to the first and last. Each tab carries
+* `data-state` (`active`/`inactive`). Pass `idPrefix` to wire the tabs to the panel: the tab
+* for `id` gets the element id `<idPrefix>-tab-<id>` and the active tab gets
+* `aria-controls="<idPrefix>-panel-<id>"`, so render the panel as a `role="tabpanel"` element
+* with the id `<idPrefix>-panel-<active>` and `aria-labelledby="<idPrefix>-tab-<active>"`.
+*/
+function Tabs({ items, active, onSelect, label, idPrefix, className }) {
+	const enabled = items.filter((item) => !item.disabled);
+	const focusable = enabled.some((item) => item.id === active) ? active : enabled[0]?.id;
+	const onKeyDown = (event) => {
+		const move = NEXT_KEYS[event.key];
+		const target = event.target;
+		const current = enabled.findIndex((item) => item.id === target.dataset["tabId"]);
+		if (move === void 0 || current === -1) return;
+		event.preventDefault();
+		const next = enabled[move(current, enabled.length)];
+		if (next === void 0) return;
+		const tabs = event.currentTarget.querySelectorAll("[role=\"tab\"]");
+		for (const tab of tabs) if (tab.dataset["tabId"] === next.id) tab.focus();
+		if (next.id !== active) onSelect(next.id);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		"aria-label": label,
+		"aria-orientation": "horizontal",
+		onKeyDown,
+		className: cn("inline-flex max-w-full flex-wrap items-center gap-0.5 rounded-control border border-line bg-raised p-0.5", className),
+		children: items.map((item) => {
+			const selected = item.id === active;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "tab",
+				id: idPrefix === void 0 ? void 0 : `${idPrefix}-tab-${item.id}`,
+				"aria-selected": selected,
+				"aria-controls": idPrefix !== void 0 && selected ? `${idPrefix}-panel-${item.id}` : void 0,
+				tabIndex: item.id === focusable ? 0 : -1,
+				"data-tab-id": item.id,
+				"data-state": selected ? "active" : "inactive",
+				disabled: item.disabled,
+				title: item.title,
+				onClick: () => onSelect(item.id),
+				className: cn("inline-flex items-center gap-1.5 rounded-[0.3rem] px-2.5 py-1 text-xs font-medium transition-colors", "disabled:cursor-not-allowed disabled:opacity-40", selected ? "bg-surface text-fg shadow-sm" : "text-fg-muted hover:text-fg", focusRing),
+				children: [item.label, item.count !== void 0 && item.count > 0 && /* @__PURE__ */ jsx("span", {
+					className: cn("rounded-full px-1.5 font-mono text-[10px] tabular-nums", selected ? "bg-signal/15 text-signal" : "bg-line text-fg-muted"),
+					children: item.count
+				})]
+			}, item.id);
+		})
+	});
+}
+//#endregion
+export { Badge, Button, ButtonLink, Callout, Checkbox, ConfirmDialog, CountRun, DEFAULT_THEME_STORAGE_KEY, DensityProvider, Dialog, DialogClose, Disclosure, Empty, ErrorBox, Field, InfoHint, Input, NumberInput, PageHeader, Panel, ProgressBar, ReadoutStrip, Section, SegmentedControl, Select, Skeleton, SkeletonRows, Slider, StatusDot, Switch, Table, Tabs, Textarea, ThemeToggle, ToggleChip, Tooltip, TooltipProvider, buttonClasses, byDensity, cn, controlClasses, focusRing, focusRingInset, initTheme, inputClasses, readThemeChoice, resolveTheme, setThemeChoice, toneColor, useControlHeight, useDensity };
+
+//# sourceMappingURL=index.js.map