strata-react 0.0.0-stage → 0.1.3

package/dist/index.js

@@ -0,0 +1,1116 @@
+import { a as fetchJson, i as describeHttpError, n as StrataQueryProvider, o as toLoad, r as createQueryClient, s as useLoad, t as HttpError } from "./query-DZVmYJSx.js";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ArrowUpDown, Check, CircleAlert, LoaderCircle, RotateCcw } from "lucide-react";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Link, NavLink, useSearchParams } from "react-router";
+// src/lib/utils.ts
+var typeSteps = [
+	"caption",
+	"label",
+	"body-sm",
+	"body",
+	"heading",
+	"title",
+	"figure",
+	"display"
+];
+var twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [{ type: [...typeSteps] }] } } });
+/** clsx + tailwind-merge, taught that `type-*` utilities are font sizes. */
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+// src/lib/format.ts
+var NBSP = "\xA0";
+/** Intl formatters for one locale: integers, decimals, percent, times, days, units with a non-breaking space, and counted nouns. */
+function createFormat(locale) {
+	const integer = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 });
+	const decimal = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 });
+	const percent = new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: 0
+	});
+	const clock = new Intl.DateTimeFormat(locale, {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+	const day = new Intl.DateTimeFormat(locale, {
+		weekday: "long",
+		day: "numeric",
+		month: "long"
+	});
+	const shortDay = new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+	const withUnit = (value, unit, fmt = integer) => `${fmt.format(value)} ${unit}`;
+	return {
+		locale,
+		integer,
+		decimal,
+		percent,
+		clock,
+		day,
+		shortDay,
+		withUnit,
+		celsius: (value) => withUnit(value, "°C"),
+		/** "1 piece", "6 pieces": the count and its noun, so copy never reads "1 pieces". */
+		count: (value, one, many = `${one}s`) => `${integer.format(value)} ${new Intl.PluralRules(locale).select(value) === "one" ? one : many}`
+	};
+}
+/** The en-GB formatters. */
+var format = createFormat("en-GB");
+// src/components/button.tsx
+var buttonVariants = cva("inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-control type-label transition-state press disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary-10",
+			outline: "border border-input bg-background text-foreground hover:bg-muted",
+			secondary: "bg-muted text-foreground hover:bg-neutral-4",
+			ghost: "text-foreground hover:bg-muted",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-danger",
+			link: "h-auto px-0 text-primary-11 underline underline-offset-4 hover:text-primary-12"
+		},
+		size: {
+			default: "h-(--control-h) px-4",
+			sm: "h-(--control-h-sm) px-3",
+			icon: "size-(--control-h)"
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		size: "default"
+	}
+});
+/** A button with shadcn's variant names. The default variant is `outline`; ask for the filled accent (`variant="default"`) once per view. `type` defaults to `button`. */
+function Button({ className, variant, size, asChild = false, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		type: asChild ? void 0 : type,
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+}
+/** An icon-only button. `label` is required and becomes the accessible name and tooltip. */
+function IconButton({ icon: Icon, label, variant = "ghost", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		size: "icon",
+		variant,
+		"aria-label": label,
+		title: label,
+		...props,
+		children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true })
+	});
+}
+// src/components/async-button.tsx
+/** One button through idle, pending, done and error, with the label changing in place and its width fixed by the longest label. The outcome is announced politely. */
+function AsyncButton({ phase, labels, disabled, ...props }) {
+	const errorLabel = labels.error ?? "Try again";
+	const current = {
+		idle: labels.idle,
+		pending: labels.pending,
+		done: labels.done,
+		error: errorLabel
+	}[phase];
+	const Icon = {
+		idle: null,
+		pending: LoaderCircle,
+		done: Check,
+		error: CircleAlert
+	}[phase];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+		...props,
+		disabled: disabled || phase === "pending",
+		"aria-disabled": phase === "pending" || void 0,
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			className: phase === "pending" ? "motion-safe:animate-spin" : void 0
+		}), /* @__PURE__ */ jsx("span", {
+			className: "grid",
+			children: [
+				labels.idle,
+				labels.pending,
+				labels.done,
+				errorLabel
+			].map((l) => /* @__PURE__ */ jsx("span", {
+				"aria-hidden": l !== current,
+				className: l === current ? "[grid-area:1/1]" : "invisible [grid-area:1/1]",
+				children: l
+			}, l))
+		})]
+	}), /* @__PURE__ */ jsx("span", {
+		role: "status",
+		className: "sr-only",
+		children: phase === "done" ? labels.done : phase === "error" ? errorLabel : ""
+	})] });
+}
+/** Runs an async action and reports its phase. `done` returns to `idle` after `settleMs`. */
+function useAsyncAction(action, settleMs = 2e3) {
+	const [phase, setPhase] = React.useState("idle");
+	const timer = React.useRef(void 0);
+	React.useEffect(() => () => window.clearTimeout(timer.current), []);
+	return [phase, React.useCallback(async (...args) => {
+		window.clearTimeout(timer.current);
+		setPhase("pending");
+		try {
+			await action(...args);
+			setPhase("done");
+			timer.current = window.setTimeout(() => setPhase("idle"), settleMs);
+		} catch {
+			setPhase("error");
+		}
+	}, [action, settleMs])];
+}
+// src/components/field.tsx
+var FieldContext = React.createContext(null);
+function useField(id) {
+	const field = React.useContext(FieldContext);
+	return {
+		id: field?.id ?? id,
+		"aria-describedby": field?.describedBy,
+		"aria-invalid": field?.invalid || void 0
+	};
+}
+/** A labelled form field: wires the label, hint, error, `aria-describedby` and `aria-invalid` into the one control it wraps. */
+function Field({ label, id: idProp, hint, error, children, className }) {
+	const generated = React.useId();
+	const id = idProp ?? generated;
+	const hintId = hint ? `${id}-hint` : void 0;
+	const errorId = error ? `${id}-error` : void 0;
+	const describedBy = [errorId, hintId].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: {
+			id,
+			describedBy,
+			invalid: Boolean(error)
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("grid min-w-0 content-start gap-1.5", className),
+			children: [
+				/* @__PURE__ */ jsx("label", {
+					htmlFor: id,
+					className: "type-label text-foreground",
+					children: label
+				}),
+				children,
+				error && /* @__PURE__ */ jsxs("p", {
+					id: errorId,
+					className: "flex items-start gap-1.5 type-body-sm text-danger",
+					children: [/* @__PURE__ */ jsx(CircleAlert, {
+						"aria-hidden": true,
+						className: "mt-0.5 size-4 shrink-0"
+					}), error]
+				}),
+				hint && /* @__PURE__ */ jsx("p", {
+					id: hintId,
+					className: "type-body-sm text-muted-foreground",
+					children: hint
+				})
+			]
+		})
+	});
+}
+var control = "w-full min-w-0 rounded-control border border-input bg-background px-3 type-body text-foreground transition-state placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-70 aria-invalid:border-danger";
+/** A text input that picks up its id and descriptions from the surrounding `Field`. */
+function Input({ className, id, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		...useField(id),
+		className: cn(control, "h-(--control-h)", className),
+		...props
+	});
+}
+/** A multi-line input that picks up its id and descriptions from the surrounding `Field`. */
+function Textarea({ className, id, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		...useField(id),
+		className: cn(control, "min-h-24 py-2", className),
+		...props
+	});
+}
+/** The platform select, styled. The default for short lists, especially on touch screens. */
+function NativeSelect({ className, id, ...props }) {
+	return /* @__PURE__ */ jsx("select", {
+		...useField(id),
+		className: cn(control, "h-(--control-h) pr-8", className),
+		...props
+	});
+}
+/** Radio choices in a fieldset with a legend; each whole row is the hit target. For 2 to 5 options that each need a sentence. */
+function ChoiceGroup({ legend, name, choices, value, onChange, error }) {
+	const errorId = React.useId();
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "grid gap-2",
+		"aria-describedby": error ? errorId : void 0,
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				className: "mb-1.5 type-label text-foreground",
+				children: legend
+			}),
+			choices.map((c) => /* @__PURE__ */ jsxs("label", {
+				className: "flex min-h-(--control-h-sm) cursor-pointer items-start gap-3 py-1",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "radio",
+					name,
+					value: c.value,
+					checked: value === c.value,
+					onChange: () => onChange(c.value),
+					className: "mt-1 size-4 shrink-0 accent-primary"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "grid",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "type-body",
+						children: c.label
+					}), c.detail && /* @__PURE__ */ jsx("span", {
+						className: "type-body-sm text-muted-foreground",
+						children: c.detail
+					})]
+				})]
+			}, c.value)),
+			error && /* @__PURE__ */ jsxs("p", {
+				id: errorId,
+				className: "flex items-start gap-1.5 type-body-sm text-danger",
+				children: [/* @__PURE__ */ jsx(CircleAlert, {
+					"aria-hidden": true,
+					className: "mt-0.5 size-4 shrink-0"
+				}), error]
+			})
+		]
+	});
+}
+// src/components/status.tsx
+var tones = {
+	neutral: "bg-muted text-muted-foreground",
+	info: "bg-info-subtle text-info",
+	success: "bg-success-subtle text-success",
+	warning: "bg-warning-subtle text-warning",
+	danger: "bg-danger-subtle text-danger"
+};
+/** A status as a word on a pale tint of its tone, with an optional icon. Never colour alone. */
+function Status({ tone, icon: Icon, children, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-pill py-0.5 pr-2.5 pl-2 type-caption font-medium", tones[tone], className),
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		}), children]
+	});
+}
+// src/components/metric.tsx
+/** Headline figures as one description list split by hairlines. Holds `Metric`s. */
+function MetricStrip({ label, children, className }) {
+	return /* @__PURE__ */ jsx("dl", {
+		"aria-label": label,
+		className: cn("grid grid-cols-1 border-y border-border sm:auto-cols-fr sm:grid-flow-col sm:divide-x sm:divide-border", className),
+		children
+	});
+}
+/** One figure: label over value, an optional muted unit and a note that states any change in words with its window. */
+function Metric({ label, value, unit, note }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid content-start gap-0.5 border-border py-3 not-first:border-t sm:px-5 sm:not-first:border-t-0 sm:first:pl-0",
+		children: [
+			/* @__PURE__ */ jsx("dt", {
+				className: "type-label text-muted-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("dd", {
+				className: "type-figure text-foreground",
+				children: [value, unit && /* @__PURE__ */ jsx("span", {
+					className: "type-body text-muted-foreground",
+					children: "\xA0" + unit
+				})]
+			}),
+			note && /* @__PURE__ */ jsx("dd", {
+				className: "type-body-sm text-muted-foreground",
+				children: note
+			})
+		]
+	});
+}
+// src/components/data-view.tsx
+/** Every view of remote data: renders `skeleton` while loading, an alert with Try again on error, `empty` when `isEmpty`, else `children(data)`. The skeleton and empty state are required. */
+function DataView({ state, isEmpty, skeleton, empty, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("min-w-0", className),
+		"aria-busy": state.status === "loading" || void 0,
+		children: [
+			state.status === "loading" && skeleton,
+			state.status === "error" && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "flex flex-wrap items-start gap-3 rounded-surface bg-danger-subtle p-4 text-danger",
+				children: [
+					/* @__PURE__ */ jsx(CircleAlert, {
+						"aria-hidden": true,
+						className: "mt-0.5 size-5 shrink-0"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "min-w-0 flex-1 type-body",
+						children: state.message
+					}),
+					/* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						onClick: state.retry,
+						children: [/* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": true }), "Try again"]
+					})
+				]
+			}),
+			state.status === "ready" && (isEmpty(state.data) ? empty : children(state.data))
+		]
+	});
+}
+/** An empty state that teaches the next action: a title, a sentence and an action. No illustration slot, on purpose. */
+function EmptyState({ title, children, action }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid justify-items-start gap-2 border-y border-border py-6",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "type-heading",
+				children: title
+			}),
+			children && /* @__PURE__ */ jsx("p", {
+				className: "max-w-prose type-body text-muted-foreground",
+				children
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "mt-2",
+				children: action
+			})
+		]
+	});
+}
+/** A placeholder block for a loading layout. Size it with layout classes so it mirrors the final content. */
+function Skeleton({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: cn("rounded-control bg-muted motion-safe:animate-pulse", className)
+	});
+}
+// src/components/data-table.tsx
+function useLocalSort(initial) {
+	const [sort, setSort] = React.useState(initial);
+	return [sort, setSort];
+}
+/** Reads a sort from its URL form (`pieces.desc`). */
+function parseSort(value) {
+	if (!value) return void 0;
+	const [key, dir] = value.split(".");
+	if (!key) return void 0;
+	return {
+		key,
+		dir: dir === "desc" ? "descending" : "ascending"
+	};
+}
+/** Writes a sort in its URL form (`pieces.desc`). */
+function serialiseSort(sort) {
+	return `${sort.key}.${sort.dir === "descending" ? "desc" : "asc"}`;
+}
+function useUrlSort(param, initial) {
+	const [params, setParams] = useSearchParams();
+	return [parseSort(params.get(param)) ?? initial, React.useCallback((next) => setParams((p) => {
+		const out = new URLSearchParams(p);
+		out.set(param, serialiseSort(next));
+		return out;
+	}, { replace: true }), [param, setParams])];
+}
+/** A table on TanStack Table: muted headers, row rules, right-aligned tabular numbers, sortable headers with `aria-sort`, virtualised from `virtualizeFrom` rows, sort optionally kept in the URL (`sortParam`). */
+function DataTable(props) {
+	return props.sortParam ? /* @__PURE__ */ jsx(UrlSortedTable, {
+		...props,
+		sortParam: props.sortParam
+	}) : /* @__PURE__ */ jsx(LocalSortedTable, { ...props });
+}
+function LocalSortedTable(props) {
+	return /* @__PURE__ */ jsx(Table, {
+		...props,
+		sortState: useLocalSort(props.initialSort)
+	});
+}
+function UrlSortedTable(props) {
+	return /* @__PURE__ */ jsx(Table, {
+		...props,
+		sortState: useUrlSort(props.sortParam, props.initialSort)
+	});
+}
+function Table({ caption, columns, rows, rowKey, sortState: [sort, setSort], virtualizeFrom = 100, maxHeight = 480, className }) {
+	const defs = React.useMemo(() => columns.map((c) => ({
+		id: c.key,
+		accessorFn: (row) => row,
+		header: c.header,
+		cell: (info) => c.cell(info.row.original),
+		enableSorting: Boolean(c.sort),
+		sortingFn: c.sort ? (a, b) => c.sort(a.original, b.original) : void 0,
+		meta: {
+			numeric: c.numeric,
+			truncate: c.truncate,
+			className: c.className
+		}
+	})), [columns]);
+	const sorting = sort && columns.some((c) => c.key === sort.key && c.sort) ? [{
+		id: sort.key,
+		desc: sort.dir === "descending"
+	}] : [];
+	const table = useReactTable({
+		data: rows,
+		columns: defs,
+		state: { sorting },
+		getRowId: (row) => rowKey(row),
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel()
+	});
+	const toggle = (key) => setSort({
+		key,
+		dir: sort?.key === key && sort.dir === "ascending" ? "descending" : "ascending"
+	});
+	const modelRows = table.getRowModel().rows;
+	const virtual = modelRows.length >= virtualizeFrom;
+	const scroller = React.useRef(null);
+	const virtualizer = useVirtualizer({
+		count: virtual ? modelRows.length : 0,
+		getScrollElement: () => scroller.current,
+		estimateSize: () => 41,
+		overscan: 8,
+		initialRect: {
+			width: 0,
+			height: maxHeight
+		}
+	});
+	const items = virtual ? virtualizer.getVirtualItems() : [];
+	const padTop = items.length ? items[0].start : 0;
+	const padBottom = items.length ? virtualizer.getTotalSize() - items[items.length - 1].end : 0;
+	const visible = virtual ? items.map((i) => modelRows[i.index]) : modelRows;
+	return /* @__PURE__ */ jsx("div", {
+		ref: scroller,
+		role: "region",
+		"aria-label": caption,
+		tabIndex: 0,
+		className: cn("min-w-0 overflow-x-auto", virtual && "overflow-y-auto", className),
+		style: virtual ? { maxHeight } : void 0,
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "w-full border-collapse type-body-sm",
+			"aria-rowcount": virtual ? modelRows.length + 1 : void 0,
+			children: [
+				/* @__PURE__ */ jsx("caption", {
+					className: "sr-only",
+					children: caption
+				}),
+				/* @__PURE__ */ jsx("thead", {
+					className: cn(virtual && "sticky top-0 z-10 bg-background"),
+					children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx("tr", { children: group.headers.map((header) => {
+						const meta = header.column.columnDef.meta;
+						const active = sort?.key === header.id && header.column.getCanSort() ? sort.dir : void 0;
+						const Icon = active === "ascending" ? ArrowUp : active === "descending" ? ArrowDown : ArrowUpDown;
+						const label = flexRender(header.column.columnDef.header, header.getContext());
+						return /* @__PURE__ */ jsx("th", {
+							scope: "col",
+							"aria-sort": active,
+							className: cn("py-2 pr-4 text-left align-bottom type-caption text-muted-foreground last:pr-0", meta?.numeric && "text-right"),
+							children: header.column.getCanSort() ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => toggle(header.id),
+								className: cn("-mx-1 inline-flex cursor-pointer items-center gap-1 rounded-control px-1 transition-state hover:text-foreground", meta?.numeric && "flex-row-reverse", active && "text-foreground"),
+								children: [label, /* @__PURE__ */ jsx(Icon, {
+									"aria-hidden": true,
+									className: cn("size-3.5", !active && "opacity-50")
+								})]
+							}) : label
+						}, header.id);
+					}) }, group.id))
+				}),
+				/* @__PURE__ */ jsxs("tbody", { children: [
+					padTop > 0 && /* @__PURE__ */ jsx("tr", {
+						"aria-hidden": true,
+						style: { height: padTop }
+					}),
+					visible.map((row, i) => /* @__PURE__ */ jsx("tr", {
+						className: "border-t border-border",
+						"aria-rowindex": virtual ? (items[i]?.index ?? 0) + 2 : void 0,
+						children: row.getVisibleCells().map((cell) => {
+							const meta = cell.column.columnDef.meta;
+							return /* @__PURE__ */ jsx("td", {
+								className: cn("py-2.5 pr-4 align-middle last:pr-0", meta?.numeric && "text-right tabular-nums", meta?.truncate && "max-w-48 truncate", meta?.className),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id);
+						})
+					}, row.id)),
+					padBottom > 0 && /* @__PURE__ */ jsx("tr", {
+						"aria-hidden": true,
+						style: { height: padBottom }
+					})
+				] })
+			]
+		})
+	});
+}
+/** The loading placeholder for a `DataTable`, shaped like its rows. */
+function TableSkeleton({ rows = 4, columns = 5 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: "grid gap-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex gap-4 py-2",
+			children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx("div", { className: "h-3 flex-1 rounded-control bg-muted" }, i))
+		}), Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsx("div", {
+			className: "flex gap-4 border-t border-border py-3.5",
+			children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx("div", { className: "h-4 flex-1 rounded-control bg-muted motion-safe:animate-pulse" }, i))
+		}, r))]
+	});
+}
+// src/components/virtual-list.tsx
+/** A list that renders only its visible rows (TanStack Virtual) from `virtualizeFrom` items, keeping list semantics for screen readers. */
+function VirtualList({ label, items, itemKey, children, estimateSize = 48, height = 480, virtualizeFrom = 100, className }) {
+	const scroller = React.useRef(null);
+	const virtual = items.length >= virtualizeFrom;
+	const virtualizer = useVirtualizer({
+		count: virtual ? items.length : 0,
+		getScrollElement: () => scroller.current,
+		estimateSize: () => estimateSize,
+		overscan: 6,
+		initialRect: {
+			width: 0,
+			height
+		}
+	});
+	if (!virtual) return /* @__PURE__ */ jsx("ul", {
+		"aria-label": label,
+		className: cn("grid min-w-0", className),
+		children: items.map((item, i) => /* @__PURE__ */ jsx("li", {
+			className: "border-t border-border first:border-t-0",
+			children: children(item, i)
+		}, itemKey(item)))
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: scroller,
+		role: "region",
+		"aria-label": label,
+		tabIndex: 0,
+		className: cn("min-w-0 overflow-y-auto", className),
+		style: { height },
+		children: /* @__PURE__ */ jsx("ul", {
+			"aria-label": label,
+			className: "relative w-full",
+			style: { height: virtualizer.getTotalSize() },
+			children: virtualizer.getVirtualItems().map((v) => {
+				const item = items[v.index];
+				return /* @__PURE__ */ jsx("li", {
+					ref: virtualizer.measureElement,
+					"data-index": v.index,
+					"aria-setsize": items.length,
+					"aria-posinset": v.index + 1,
+					className: cn("absolute inset-x-0 top-0", v.index > 0 && "border-t border-border"),
+					style: { translate: `0 ${v.start}px` },
+					children: children(item, v.index)
+				}, itemKey(item));
+			})
+		})
+	});
+}
+// src/components/line-chart.tsx
+function useWidth() {
+	const ref = React.useRef(null);
+	const [width, setWidth] = React.useState(0);
+	React.useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		setWidth(el.getBoundingClientRect().width);
+		const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	return [ref, width];
+}
+/** Four gridline steps of a size people write on a scale (1, 2, 2.5, 4 or 5 × 10ⁿ), ending above the max. */
+function niceMax(max) {
+	if (!(max > 0)) return 4;
+	const raw = max / 4;
+	const mag = 10 ** Math.floor(Math.log10(raw));
+	return ([
+		1,
+		2,
+		2.5,
+		4,
+		5,
+		10
+	].map((m) => m * mag).find((s) => s >= raw) ?? 10 * mag) * 4;
+}
+/** One measured series, drawn in real pixels, with the peak and current readings labelled on the chart and every reading in a screen-reader table. Optional plan, threshold band and `colourScale`. */
+function LineChart({ label, series, seriesLabel, planned, plannedLabel, band, formatX, formatY, xTicks, colour = "var(--chart-1)", colourScale, colourScaleLabel, height = 280, className }) {
+	const [ref, width] = useWidth();
+	const gradientId = `heat-${React.useId().replace(/[^\w-]/g, "")}`;
+	const all = [...series, ...planned ?? []];
+	const xMin = Math.min(...all.map((p) => p.x));
+	const xMax = Math.max(...all.map((p) => p.x));
+	const yMax = niceMax(Math.max(...all.map((p) => p.y)));
+	const yTicks = [
+		0,
+		.25,
+		.5,
+		.75,
+		1
+	].map((f) => f * yMax);
+	const pad = {
+		top: 16,
+		right: 16,
+		bottom: 28,
+		left: 56
+	};
+	const w = Math.max(0, width - pad.left - pad.right);
+	const h = height - pad.top - pad.bottom;
+	const sx = (x) => pad.left + (x - xMin) / (xMax - xMin || 1) * w;
+	const sy = (y) => pad.top + h - y / yMax * h;
+	const path = (pts) => pts.map((p, i) => `${i ? "L" : "M"}${sx(p.x).toFixed(1)},${sy(p.y).toFixed(1)}`).join("");
+	const last = series[series.length - 1];
+	const peak = series.reduce((a, b) => b.y > a.y ? b : a, series[0]);
+	const stops = colourScale ? [...colourScale].sort((a, b) => a.at - b.at) : [];
+	/** The colour a value lands on: the highest stop at or below it. Used for the labelled points. */
+	const colourAt = (y) => stops.length ? [...stops].reverse().find((s) => s.at <= y)?.colour ?? stops[0].colour : colour;
+	const stroke = stops.length ? `url(#${gradientId})` : colour;
+	return /* @__PURE__ */ jsxs("figure", {
+		className: cn("grid min-w-0 gap-2", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref,
+				className: "min-w-0",
+				children: width > 0 && /* @__PURE__ */ jsxs("svg", {
+					width,
+					height,
+					role: "img",
+					"aria-label": label,
+					className: "block overflow-visible",
+					children: [
+						stops.length > 0 && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("linearGradient", {
+							id: gradientId,
+							gradientUnits: "userSpaceOnUse",
+							x1: 0,
+							x2: 0,
+							y1: sy(0),
+							y2: sy(yMax),
+							children: stops.map((s) => /* @__PURE__ */ jsx("stop", {
+								offset: Math.min(1, Math.max(0, s.at / yMax)),
+								stopColor: s.colour
+							}, s.at))
+						}) }),
+						band && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+							x: pad.left,
+							y: sy(band.below),
+							width: w,
+							height: sy(0) - sy(band.below),
+							fill: "var(--success-subtle)"
+						}), /* @__PURE__ */ jsx("text", {
+							x: pad.left + 8,
+							y: sy(band.below) + 16,
+							className: "fill-success type-caption",
+							children: band.label
+						})] }),
+						yTicks.map((t) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+							x1: pad.left,
+							x2: pad.left + w,
+							y1: sy(t),
+							y2: sy(t),
+							stroke: "var(--border)",
+							strokeWidth: 1
+						}), /* @__PURE__ */ jsx("text", {
+							x: pad.left - 8,
+							y: sy(t),
+							dy: "0.32em",
+							textAnchor: "end",
+							className: "fill-muted-foreground type-caption tabular-nums",
+							children: formatY(t)
+						})] }, t)),
+						xTicks.map((t) => /* @__PURE__ */ jsx("text", {
+							x: sx(t),
+							y: height - 8,
+							textAnchor: "middle",
+							className: "fill-muted-foreground type-caption tabular-nums",
+							children: formatX(t)
+						}, t)),
+						planned && /* @__PURE__ */ jsx("path", {
+							d: path(planned),
+							fill: "none",
+							stroke: "var(--muted-foreground)",
+							strokeWidth: 1.5,
+							strokeDasharray: "4 4"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							d: path(series),
+							fill: "none",
+							stroke,
+							strokeWidth: stops.length ? 2.5 : 2,
+							strokeLinejoin: "round",
+							strokeLinecap: "round"
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							cx: sx(peak.x),
+							cy: sy(peak.y),
+							r: 3,
+							fill: colourAt(peak.y)
+						}),
+						/* @__PURE__ */ jsxs("text", {
+							x: sx(peak.x) + 8,
+							y: sy(peak.y) - 8,
+							className: "fill-foreground type-caption tabular-nums",
+							children: [formatY(peak.y), " peak"]
+						}),
+						/* @__PURE__ */ jsx("line", {
+							x1: sx(last.x),
+							x2: sx(last.x),
+							y1: pad.top,
+							y2: pad.top + h,
+							stroke: "var(--foreground)",
+							strokeWidth: 1
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							cx: sx(last.x),
+							cy: sy(last.y),
+							r: 3.5,
+							fill: colourAt(last.y)
+						}),
+						/* @__PURE__ */ jsxs("text", {
+							x: sx(last.x) - 8,
+							y: sy(last.y) - 10,
+							textAnchor: "end",
+							className: "fill-foreground type-label tabular-nums",
+							children: [formatY(last.y), " now"]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("figcaption", {
+				className: "flex flex-wrap gap-x-5 gap-y-1 type-caption text-muted-foreground",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-2",
+					children: [
+						stops.length ? /* @__PURE__ */ jsx("svg", {
+							width: stops.length * 8,
+							height: "3",
+							"aria-hidden": true,
+							children: stops.map((s, i) => /* @__PURE__ */ jsx("line", {
+								x1: i * 8,
+								x2: i * 8 + 8,
+								y1: "1.5",
+								y2: "1.5",
+								stroke: s.colour,
+								strokeWidth: 3
+							}, s.at))
+						}) : /* @__PURE__ */ jsx("svg", {
+							width: "16",
+							height: "2",
+							"aria-hidden": true,
+							children: /* @__PURE__ */ jsx("line", {
+								x1: "0",
+								x2: "16",
+								y1: "1",
+								y2: "1",
+								stroke: colour,
+								strokeWidth: 2
+							})
+						}),
+						seriesLabel,
+						stops.length > 0 && colourScaleLabel && /* @__PURE__ */ jsxs("span", { children: [
+							"(",
+							colourScaleLabel,
+							")"
+						] })
+					]
+				}), planned && plannedLabel && /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("svg", {
+						width: "16",
+						height: "2",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx("line", {
+							x1: "0",
+							x2: "16",
+							y1: "1",
+							y2: "1",
+							stroke: "var(--muted-foreground)",
+							strokeWidth: 1.5,
+							strokeDasharray: "4 4"
+						})
+					}), plannedLabel]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: "Time"
+					}), /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: seriesLabel
+					})] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: series.map((p) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", { children: formatX(p.x) }), /* @__PURE__ */ jsx("td", { children: formatY(p.y) })] }, p.x)) })
+				] })
+			})
+		]
+	});
+}
+// src/components/page-header.tsx
+/** The top of an Operate screen: a noun title, its scope, the main action, and the finding (the one fact in today's data that most needs attention). */
+function PageHeader({ title, scope, actions, finding, as: Heading = "h1" }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: "grid gap-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-end justify-between gap-x-6 gap-y-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 gap-0.5",
+				children: [/* @__PURE__ */ jsx(Heading, {
+					className: "type-title text-balance",
+					children: title
+				}), scope && /* @__PURE__ */ jsx("p", {
+					className: "type-body-sm text-muted-foreground",
+					children: scope
+				})]
+			}), actions && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-2",
+				children: actions
+			})]
+		}), finding && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-x-6 gap-y-3 border-y border-border py-3",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "max-w-prose min-w-0 type-body text-pretty",
+				children: finding.text
+			}), finding.action]
+		})]
+	});
+}
+// src/components/undo.tsx
+/** Schedules a reversible removal to commit after `windowMs` unless undone. A second removal, or unmounting, commits the pending one. */
+function useUndoable(windowMs = 8e3) {
+	const [pending, setPending] = React.useState(null);
+	const current = React.useRef(null);
+	const timer = React.useRef(void 0);
+	const set = React.useCallback((p) => {
+		current.current = p;
+		setPending(p);
+	}, []);
+	const schedule = React.useCallback((next) => {
+		window.clearTimeout(timer.current);
+		current.current?.commit();
+		set(next);
+		timer.current = window.setTimeout(() => {
+			current.current?.commit();
+			set(null);
+		}, windowMs);
+	}, [set, windowMs]);
+	const undo = React.useCallback(() => {
+		window.clearTimeout(timer.current);
+		set(null);
+	}, [set]);
+	React.useEffect(() => () => {
+		window.clearTimeout(timer.current);
+		current.current?.commit();
+		current.current = null;
+	}, []);
+	return {
+		pending,
+		schedule,
+		undo
+	};
+}
+/** The polite live region that shows a pending removal with an Undo button. */
+function UndoBar({ pending, onUndo, inline = false }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-live": "polite",
+		className: inline ? "flex" : "pointer-events-none fixed inset-x-0 bottom-4 z-50 flex justify-center px-4",
+		children: pending && /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-auto flex max-w-lg items-center gap-4 rounded-overlay bg-foreground py-2 pr-2 pl-4 text-background shadow-overlay",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "min-w-0 type-body-sm",
+				children: pending.message
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				className: "text-background hover:bg-neutral-11",
+				onClick: onUndo,
+				children: "Undo"
+			})]
+		})
+	});
+}
+// src/components/done.tsx
+/** The completion moment for a rare, earned finish: what happened (past tense, with its object), what happens next, and optionally a figure drawn from the person's own data. Focus moves to the heading. */
+function Done({ title, next, figure, actions, focusOnMount = true, className }) {
+	const heading = React.useRef(null);
+	const titleId = React.useId();
+	React.useEffect(() => {
+		if (focusOnMount) heading.current?.focus();
+	}, [focusOnMount]);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": titleId,
+		className: cn("grid gap-5", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid gap-2",
+				children: [/* @__PURE__ */ jsxs("h1", {
+					id: titleId,
+					ref: heading,
+					tabIndex: -1,
+					className: "flex items-start gap-2 type-title",
+					children: [/* @__PURE__ */ jsx(Check, {
+						"aria-hidden": true,
+						className: "mt-1 size-6 shrink-0 text-success"
+					}), title]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "max-w-prose type-body text-muted-foreground",
+					children: next
+				})]
+			}),
+			figure,
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: actions
+			})
+		]
+	});
+}
+// src/components/app-shell.tsx
+/** The app frame: product name, side nav on the page ground (a scrollable row on phones), optional top bar, and the main region. */
+function AppShell({ product, nav, navLabel = "Main", topBar, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("min-h-dvh md:grid md:grid-cols-[14rem_minmax(0,1fr)]", className),
+		children: [/* @__PURE__ */ jsx("aside", {
+			className: "border-b border-border md:border-r md:border-b-0",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4 px-4 py-3 md:block md:px-3 md:py-4",
+				children: [/* @__PURE__ */ jsx(Link, {
+					to: "/",
+					className: "shrink-0 rounded-control px-2 type-heading text-foreground no-underline",
+					children: product
+				}), /* @__PURE__ */ jsx(SideNav, {
+					items: nav,
+					label: navLabel,
+					className: "min-w-0 flex-1 md:mt-4"
+				})]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [topBar && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-3 border-b border-border px-4 py-2 md:px-8",
+				children: topBar
+			}), /* @__PURE__ */ jsx("main", {
+				className: "px-4 py-6 md:px-8 md:py-8",
+				children
+			})]
+		})]
+	});
+}
+/** Navigation links (React Router `NavLink`); the current route is a neutral pill with `aria-current`. */
+function SideNav({ items, label, className }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": label,
+		className: cn("min-w-0", className),
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "flex gap-1 overflow-x-auto md:grid md:overflow-visible",
+			children: items.map(({ to, label, icon: Icon, end }) => /* @__PURE__ */ jsx("li", {
+				className: "shrink-0",
+				children: /* @__PURE__ */ jsxs(NavLink, {
+					to,
+					end,
+					className: ({ isActive }) => cn("flex h-(--control-h-sm) items-center gap-2 rounded-control px-2 type-label whitespace-nowrap no-underline transition-state", isActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+					children: [Icon && /* @__PURE__ */ jsx(Icon, {
+						"aria-hidden": true,
+						className: "size-4 shrink-0"
+					}), label]
+				})
+			}, to))
+		})
+	});
+}
+/** Plain links separated by `/`; the last crumb is the current page. */
+function Breadcrumb({ items }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "flex flex-wrap items-center gap-x-2 type-body-sm text-muted-foreground",
+			children: items.map((item, i) => {
+				const last = i === items.length - 1;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-2",
+					children: [item.to && !last ? /* @__PURE__ */ jsx(Link, {
+						to: item.to,
+						className: "text-muted-foreground underline hover:text-foreground",
+						children: item.label
+					}) : /* @__PURE__ */ jsx("span", {
+						"aria-current": last ? "page" : void 0,
+						className: cn(last && "text-foreground"),
+						children: item.label
+					}), !last && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						children: "/"
+					})]
+				}, `${item.label}-${i}`);
+			})
+		})
+	});
+}
+// src/components/tabs.tsx
+/** Tabs whose selection lives in a URL search parameter (React Router), with the ARIA tabs keyboard model. */
+function Tabs({ param, items, label, children, className }) {
+	const [params, setParams] = useSearchParams();
+	const fallback = items[0]?.value ?? "";
+	const raw = params.get(param);
+	const value = items.some((i) => i.value === raw) ? raw : fallback;
+	const baseId = React.useId();
+	const refs = React.useRef([]);
+	const select = (next, focus = false) => {
+		setParams((p) => {
+			const out = new URLSearchParams(p);
+			if (next === fallback) out.delete(param);
+			else out.set(param, next);
+			return out;
+		}, { replace: true });
+		if (focus) refs.current[items.findIndex((i) => i.value === next)]?.focus();
+	};
+	const onKeyDown = (e, index) => {
+		const last = items.length - 1;
+		const to = e.key === "ArrowRight" ? index === last ? 0 : index + 1 : e.key === "ArrowLeft" ? index === 0 ? last : index - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : void 0;
+		if (to === void 0) return;
+		e.preventDefault();
+		select(items[to].value, true);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid gap-4", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			"aria-label": label,
+			className: "flex gap-4 overflow-x-auto border-b border-border",
+			children: items.map((item, i) => {
+				const selected = item.value === value;
+				return /* @__PURE__ */ jsx("button", {
+					ref: (el) => {
+						refs.current[i] = el;
+					},
+					type: "button",
+					role: "tab",
+					id: `${baseId}-tab-${item.value}`,
+					"aria-selected": selected,
+					"aria-controls": `${baseId}-panel`,
+					tabIndex: selected ? 0 : -1,
+					onClick: () => select(item.value),
+					onKeyDown: (e) => onKeyDown(e, i),
+					className: cn("-mb-px cursor-pointer border-b-2 py-2 type-label whitespace-nowrap transition-state", selected ? "border-foreground font-semibold text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"),
+					children: item.label
+				}, item.value);
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			role: "tabpanel",
+			id: `${baseId}-panel`,
+			"aria-labelledby": `${baseId}-tab-${value}`,
+			tabIndex: 0,
+			children: children(value)
+		})]
+	});
+}
+export { AppShell, AsyncButton, Breadcrumb, Button, ChoiceGroup, DataTable, DataView, Done, EmptyState, Field, HttpError, IconButton, Input, LineChart, Metric, MetricStrip, NBSP, NativeSelect, PageHeader, SideNav, Skeleton, Status, StrataQueryProvider, TableSkeleton, Tabs, Textarea, UndoBar, VirtualList, buttonVariants, cn, createFormat, createQueryClient, describeHttpError, fetchJson, format, parseSort, serialiseSort, toLoad, typeSteps, useAsyncAction, useLoad, useUndoable };
+
+//# sourceMappingURL=index.js.map