@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.0.0

package/dist/compositions/date-range-picker/date-range-options.js

@@ -0,0 +1,61 @@
+import { toIsoDate } from "../../lib/iso-date.js";
+import { addDays, startOfMonth, startOfYear, subDays, subMonths } from "date-fns";
+//#region src/compositions/date-range-picker/date-range-options.ts
+/** The preset name of a range picked or adjusted on the calendar. */
+const CUSTOM_DATE_RANGE_PRESET = "custom";
+/** "Last N days": today-(N-1) through today. */
+function lastDays(days) {
+	return (today) => ({
+		from: toIsoDate(subDays(today, days - 1)),
+		to: toIsoDate(today)
+	});
+}
+const DEFAULT_DATE_RANGE_OPTIONS = [
+	{
+		label: "Last 7 Days",
+		value: "7d",
+		requiredDays: 7,
+		resolve: lastDays(7)
+	},
+	{
+		label: "Last 30 Days",
+		value: "30d",
+		requiredDays: 30,
+		resolve: lastDays(30)
+	},
+	{
+		label: "Last 90 Days",
+		value: "90d",
+		requiredDays: 90,
+		resolve: lastDays(90)
+	},
+	{
+		label: "This Month",
+		value: "month",
+		requiredDays: 31,
+		resolve: (today) => ({
+			from: toIsoDate(startOfMonth(today)),
+			to: toIsoDate(today)
+		})
+	},
+	{
+		label: "This Year",
+		value: "year",
+		requiredDays: 365,
+		resolve: (today) => ({
+			from: toIsoDate(startOfYear(today)),
+			to: toIsoDate(today)
+		})
+	},
+	{
+		label: "Last 12 Months",
+		value: "12m",
+		requiredDays: 365,
+		resolve: (today) => ({
+			from: toIsoDate(addDays(subMonths(today, 12), 1)),
+			to: toIsoDate(today)
+		})
+	}
+];
+//#endregion
+export { CUSTOM_DATE_RANGE_PRESET, DEFAULT_DATE_RANGE_OPTIONS };

package/dist/compositions/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,55 @@
+import { DateRangeOption, DateRangeValue } from "./date-range-options.js";
+import * as React from "react";
+//#region src/compositions/date-range-picker/date-range-picker.d.ts
+export interface DateRangePickerProps {
+  /** The committed range. */
+  value: DateRangeValue;
+  /**
+   * Called once per confirm with a resolved `{ preset, from, to }`: the
+   * preset's value when the range is untouched since that preset was chosen,
+   * "custom" otherwise.
+   */
+  onChange: (value: DateRangeValue) => void;
+  /**
+   * Preset rows, in order. Defaults to `DEFAULT_DATE_RANGE_OPTIONS`. Pass a
+   * stable array (a module constant or a memoized value): a new array on every
+   * render re-renders the open calendar with each parent render.
+   */
+  options?: ReadonlyArray<DateRangeOption>;
+  /**
+   * How many days back from today the picker reaches. Calendar days before
+   * today minus `maxRangeDays` are disabled, and so are presets whose
+   * `requiredDays` exceed it. Omitted or non-finite means no limit. Days after
+   * today are always disabled.
+   */
+  maxRangeDays?: number;
+  /** Called when a disabled preset is pressed, for example to explain the limit. */
+  onDisabledSelect?: (option: DateRangeOption) => void;
+  /**
+   * Id prefix: the popover gets `${id}-popover`. Defaults to a per-instance
+   * generated prefix, so pickers on one page never share an id.
+   */
+  id?: string;
+  /** Accessible name of the activator and the popover. */
+  label?: string;
+  /** Confirm button text. Only this button commits. */
+  applyLabel?: string;
+}
+/**
+ * One activator opening one 280 px popover: the preset rows on top, a
+ * divider, then a one-month range calendar with the draft summary and the
+ * confirm button beneath it. Presets and day clicks only edit a draft; the
+ * confirm button commits it and closes the popover.
+ *
+ * The draft survives closing the popover without confirming (Escape or an
+ * outside click), and resets only when the committed value changes. The
+ * calendar opens on, and resyncs to, the draft's end month. The popover caps
+ * its height to the viewport space it is given: the presets and calendar
+ * scroll, and the summary and confirm button stay in view.
+ *
+ * Deferred: a filter-field variant (the reference's DateRangeField, with an
+ * empty "Any dates" state for an unset filter). It is not ported; this picker
+ * always holds a range.
+ */
+export declare function DateRangePicker({ value, onChange, options, maxRangeDays, onDisabledSelect, id, label, applyLabel }: DateRangePickerProps): React.JSX.Element;
+//#endregion

package/dist/compositions/date-range-picker/date-range-picker.js

@@ -0,0 +1,409 @@
+import { Button } from "../../components/ui/button.js";
+import { Calendar } from "../../components/ui/calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import { clampIsoDate, formatDayWithYear, formatShortDay, parseIsoDate, toIsoDate } from "../../lib/iso-date.js";
+import { CUSTOM_DATE_RANGE_PRESET, DEFAULT_DATE_RANGE_OPTIONS } from "./date-range-options.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CalendarIcon, CheckIcon, LockIcon } from "lucide-react";
+import { getDefaultClassNames } from "react-day-picker";
+import { max, min, startOfMonth, subDays } from "date-fns";
+import { useBoolean, useMemoizedFn } from "ahooks";
+//#region src/compositions/date-range-picker/date-range-picker.tsx
+/**
+* The activator text: the preset's label, or "MMM d - MMM d" for a custom
+* range ("MMM d" alone for a one-day range).
+*/
+function activatorLabel(value, options) {
+	if (value.preset === "custom") {
+		if (!value.from || !value.to) return "Custom range";
+		return value.from === value.to ? formatShortDay(value.from) : `${formatShortDay(value.from)} - ${formatShortDay(value.to)}`;
+	}
+	return options.find((o) => o.value === value.preset)?.label ?? "Date range";
+}
+function basisOf(value) {
+	return `${value.preset}|${value.from}|${value.to}`;
+}
+/** The month a range opens on: its end month, the most recent side. */
+function monthOf(from, to, today) {
+	return startOfMonth(parseIsoDate(to) ?? parseIsoDate(from) ?? today);
+}
+/** A fresh draft for a committed value, clamped to today like every draft path. */
+function draftOf(value) {
+	const now = /* @__PURE__ */ new Date();
+	const today = toIsoDate(now);
+	const from = clampIsoDate(value.from, today);
+	const to = clampIsoDate(value.to, today);
+	return {
+		basis: basisOf(value),
+		pending: null,
+		from,
+		to,
+		month: monthOf(from, to, now)
+	};
+}
+/**
+* The calendar selection after a day click. A click with no start, or on a
+* complete range, starts a new range there; with a start picked, it completes
+* the range, swapping the ends when the click falls before the start.
+* Clicking the start again makes a one-day range.
+*/
+function nextSelection(draft, day) {
+	if (!draft.from || draft.to) return {
+		from: day,
+		to: ""
+	};
+	return day < draft.from ? {
+		from: day,
+		to: draft.from
+	} : {
+		from: draft.from,
+		to: day
+	};
+}
+/**
+* The preset a confirmed range commits as: the pending preset when the range
+* is still its range; with no preset pressed, the committed preset when the
+* range is still the committed one; "custom" otherwise.
+*/
+function committedPreset(draft, committed) {
+	const { pending, from, to } = draft;
+	if (pending) return from === pending.from && to === pending.to ? pending.preset : CUSTOM_DATE_RANGE_PRESET;
+	return from === committed.from && to === committed.to ? committed.preset : CUSTOM_DATE_RANGE_PRESET;
+}
+/**
+* One activator opening one 280 px popover: the preset rows on top, a
+* divider, then a one-month range calendar with the draft summary and the
+* confirm button beneath it. Presets and day clicks only edit a draft; the
+* confirm button commits it and closes the popover.
+*
+* The draft survives closing the popover without confirming (Escape or an
+* outside click), and resets only when the committed value changes. The
+* calendar opens on, and resyncs to, the draft's end month. The popover caps
+* its height to the viewport space it is given: the presets and calendar
+* scroll, and the summary and confirm button stay in view.
+*
+* Deferred: a filter-field variant (the reference's DateRangeField, with an
+* empty "Any dates" state for an unset filter). It is not ported; this picker
+* always holds a range.
+*/
+function DateRangePicker({ value, onChange, options = DEFAULT_DATE_RANGE_OPTIONS, maxRangeDays, onDisabledSelect, id, label = "Date range", applyLabel = "OK" }) {
+	const [open, { set: setOpen, setFalse: close }] = useBoolean(false);
+	const autoId = React.useId();
+	const popoverId = `${id ?? `date-range-${autoId}`}-popover`;
+	const triggerText = activatorLabel(value, options);
+	const [storedDraft, setDraft] = React.useState(() => draftOf(value));
+	let draft = storedDraft;
+	if (draft.basis !== basisOf(value)) {
+		draft = draftOf(value);
+		setDraft(draft);
+	}
+	const commit = useMemoizedFn((next) => {
+		setDraft(draftOf(value));
+		onChange(next);
+		close();
+	});
+	const reportDisabled = useMemoizedFn((option) => onDisabledSelect?.(option));
+	const popupRef = React.useRef(null);
+	const focusSelectedPreset = (openType) => openType === "keyboard" ? popupRef.current?.querySelector("[data-slot=\"date-range-picker-preset\"][aria-checked=\"true\"]") ?? true : popupRef.current ?? true;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => setOpen(next),
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+			"aria-label": `${label}: ${triggerText}`,
+			"data-slot": "date-range-picker-trigger",
+			children: [/* @__PURE__ */ jsx(CalendarIcon, {
+				"data-icon": "inline-start",
+				"aria-hidden": "true"
+			}), triggerText]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			ref: popupRef,
+			id: popoverId,
+			"aria-label": label,
+			align: "start",
+			collisionAvoidance: POPOVER_COLLISION_AVOIDANCE,
+			initialFocus: focusSelectedPreset,
+			onKeyDown: enterPresetsFromPopup,
+			className: "max-h-(--available-height) w-[280px] max-w-[calc(100vw-1rem)] gap-0 overflow-hidden p-0",
+			children: /* @__PURE__ */ jsx(DateRangePanel, {
+				draft,
+				setDraft,
+				preset: value.preset,
+				from: value.from,
+				to: value.to,
+				options,
+				maxRangeDays,
+				onDisabledSelect: reportDisabled,
+				applyLabel,
+				onCommit: commit
+			})
+		})]
+	});
+}
+const POPOVER_COLLISION_AVOIDANCE = {
+	side: "flip",
+	align: "flip",
+	fallbackAxisSide: "none"
+};
+/**
+* Whether the element is scrolled short of its end, hiding content below.
+* Re-measured on scroll and whenever the element or one of its children
+* resizes (the popover's height cap, a five- or six-week month).
+*/
+function useClippedBelow(ref) {
+	const [clipped, setClipped] = React.useState(false);
+	React.useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const measure = () => setClipped(element.scrollTop + element.clientHeight < element.scrollHeight - 1);
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		for (const child of Array.from(element.children)) observer.observe(child);
+		element.addEventListener("scroll", measure, { passive: true });
+		return () => {
+			observer.disconnect();
+			element.removeEventListener("scroll", measure);
+		};
+	}, [ref]);
+	return clipped;
+}
+/** The footer line: the draft range, with one date for a one-day range. */
+function draftSummary(from, to) {
+	if (!from) return "No date range selected";
+	if (!to) return `${formatDayWithYear(from)} - Select end date`;
+	return from === to ? formatDayWithYear(from) : `${formatDayWithYear(from)} - ${formatDayWithYear(to)}`;
+}
+function hasLimit(maxRangeDays) {
+	return maxRangeDays !== void 0 && Number.isFinite(maxRangeDays);
+}
+/**
+* The popover's content. The calendar is fed only by the draft, never by the
+* committed value, so a parent re-render cannot wipe a half-picked range or
+* snap the month back.
+*
+* Memoized on content: the vendored Calendar declares its day button inline,
+* so every Calendar render remounts each day button. Without the memo, a
+* parent that re-renders on its own (a polling query, a clock) would replace
+* the button under the pointer between mousedown and click, and the click
+* would be lost.
+*/
+const DateRangePanel = React.memo(function DateRangePanel({ draft, setDraft, preset, from, to, options, maxRangeDays, onDisabledSelect, applyLabel, onCommit }) {
+	const [now] = React.useState(() => /* @__PURE__ */ new Date());
+	const today = toIsoDate(now);
+	const limited = hasLimit(maxRangeDays);
+	const windowStart = limited ? subDays(now, Math.max(0, maxRangeDays)) : void 0;
+	const disabledDays = [{ after: now }];
+	if (windowStart) disabledDays.push({ before: windowStart });
+	const currentMonth = startOfMonth(now);
+	const navStart = windowStart ? startOfMonth(windowStart) : void 0;
+	const shownMonth = navStart ? max([min([draft.month, currentMonth]), navStart]) : min([draft.month, currentMonth]);
+	const navComponents = navButtonsFor(navStart !== void 0 && shownMonth.getTime() <= navStart.getTime(), shownMonth.getTime() >= currentMonth.getTime());
+	const isPresetDisabled = (option) => limited && option.requiredDays > maxRangeDays;
+	const selectedPreset = draft.pending?.preset ?? preset;
+	const pickPreset = (option) => {
+		if (isPresetDisabled(option)) {
+			onDisabledSelect(option);
+			return;
+		}
+		const range = option.resolve(now);
+		const nextFrom = clampIsoDate(range.from, today);
+		const nextTo = clampIsoDate(range.to, today);
+		setDraft((current) => ({
+			...current,
+			pending: {
+				preset: option.value,
+				...range
+			},
+			from: nextFrom,
+			to: nextTo,
+			month: monthOf(nextFrom, nextTo, now)
+		}));
+	};
+	const complete = Boolean(draft.from && draft.to);
+	const commit = () => {
+		if (!complete) return;
+		onCommit({
+			preset: committedPreset(draft, {
+				preset,
+				from,
+				to
+			}),
+			from: draft.from,
+			to: draft.to
+		});
+	};
+	const bodyRef = React.useRef(null);
+	const fromDate = parseIsoDate(draft.from);
+	const summary = draftSummary(draft.from, draft.to);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "date-range-picker",
+		className: "flex min-h-0 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: bodyRef,
+			"data-slot": "date-range-picker-body",
+			className: "flex min-h-0 flex-col overflow-y-auto overscroll-contain",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					role: "menu",
+					"aria-label": "Presets",
+					"data-slot": "date-range-picker-presets",
+					onKeyDown: moveRowFocus,
+					className: "flex flex-col px-1 pt-1",
+					children: options.map((option) => /* @__PURE__ */ jsx(PresetRow, {
+						label: option.label,
+						selected: selectedPreset === option.value,
+						disabled: isPresetDisabled(option),
+						onClick: () => pickPreset(option)
+					}, option.value))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "my-1 h-px shrink-0 bg-border"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 justify-center px-0.5 pt-1 pb-0.5",
+					children: /* @__PURE__ */ jsx(Calendar, {
+						mode: "range",
+						selected: fromDate ? {
+							from: fromDate,
+							to: parseIsoDate(draft.to)
+						} : void 0,
+						onSelect: (_range, day) => setDraft((current) => ({
+							...current,
+							...nextSelection(current, toIsoDate(day))
+						})),
+						month: shownMonth,
+						onMonthChange: (month) => setDraft((current) => ({
+							...current,
+							month
+						})),
+						disabled: disabledDays,
+						components: navComponents,
+						classNames: CALENDAR_CLASS_NAMES,
+						className: "[--cell-size:--spacing(8)]"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(DateRangeFooter, {
+			bodyRef,
+			summary,
+			complete,
+			applyLabel,
+			onConfirm: commit
+		})]
+	});
+});
+/** A month nav button at a bound: shown disabled, as react-day-picker draws one. */
+function BoundNavButton({ onClick: _onClick, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		"aria-disabled": true,
+		tabIndex: -1
+	});
+}
+const AT_BOTH_BOUNDS = {
+	PreviousMonthButton: BoundNavButton,
+	NextMonthButton: BoundNavButton
+};
+const AT_FIRST_MONTH = { PreviousMonthButton: BoundNavButton };
+const AT_LAST_MONTH = { NextMonthButton: BoundNavButton };
+/** Stable component overrides for the nav buttons, per bound reached. */
+function navButtonsFor(atFirst, atLast) {
+	if (atFirst && atLast) return AT_BOTH_BOUNDS;
+	if (atFirst) return AT_FIRST_MONTH;
+	if (atLast) return AT_LAST_MONTH;
+}
+/**
+* Day classes merged over the vendored Calendar's: a disabled day inside the
+* range (the part of a committed range beyond `maxRangeDays`) keeps the full
+* range fill, so the band reads as one piece up to the solid range end, and
+* only its number fades. The range the footer names stays visible.
+*/
+const CALENDAR_CLASS_NAMES = { disabled: cn("text-muted-foreground opacity-50 has-[>button[data-range-middle=true]]:opacity-100 [&>button[data-range-middle=true]]:text-muted-foreground/70 [&>button[data-range-middle=true]]:opacity-100", getDefaultClassNames().disabled) };
+const ROW_KEYS = {
+	ArrowDown: (index, count) => (index + 1) % count,
+	ArrowUp: (index, count) => (index - 1 + count) % count,
+	Home: () => 0,
+	End: (_index, count) => count - 1
+};
+/**
+* After a pointer open the popup itself holds focus; the first arrow, Home or
+* End key moves it onto the selected preset (or the first one).
+*/
+function enterPresetsFromPopup(event) {
+	if (event.target !== event.currentTarget || !ROW_KEYS[event.key]) return;
+	const target = event.currentTarget.querySelector("[data-slot=\"date-range-picker-preset\"][aria-checked=\"true\"]") ?? event.currentTarget.querySelector("[data-slot=\"date-range-picker-preset\"]");
+	if (!target) return;
+	event.preventDefault();
+	target.focus();
+}
+/** Arrow, Home and End keys move focus between the preset rows, wrapping. */
+function moveRowFocus(event) {
+	const move = ROW_KEYS[event.key];
+	if (!move) return;
+	const rows = Array.from(event.currentTarget.querySelectorAll("[data-slot=\"date-range-picker-preset\"]"));
+	const index = rows.indexOf(event.target);
+	if (index === -1 || rows.length === 0) return;
+	event.preventDefault();
+	rows[move(index, rows.length)]?.focus();
+}
+/**
+* The draft summary beside the confirm button. Its own component, so measuring
+* the body re-renders only the footer: a panel render remounts every day
+* button (see DateRangePanel).
+*/
+function DateRangeFooter({ bodyRef, summary, complete, applyLabel, onConfirm }) {
+	const clipped = useClippedBelow(bodyRef);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "date-range-picker-footer",
+		"data-clipped": clipped || void 0,
+		className: "flex shrink-0 items-center justify-between gap-3 border-t border-transparent px-3 pt-1.5 pb-3 data-clipped:border-border",
+		children: [/* @__PURE__ */ jsx("p", {
+			"aria-live": "polite",
+			"data-slot": "date-range-picker-summary",
+			className: "min-w-0 text-xs/snug text-muted-foreground",
+			children: summary
+		}), /* @__PURE__ */ jsx(Button, {
+			className: "shrink-0",
+			disabled: !complete,
+			onClick: onConfirm,
+			children: applyLabel
+		})]
+	});
+}
+/**
+* One preset row: a 20 px gutter holding the check when selected, then the
+* label. A disabled row shows a lock in the gutter, or after the label when
+* the gutter holds the check.
+*/
+function PresetRow({ label, selected, disabled, onClick }) {
+	const lock = /* @__PURE__ */ jsx(LockIcon, {
+		"aria-hidden": "true",
+		"data-slot": "date-range-picker-preset-lock",
+		className: "size-3.5 justify-self-center text-muted-foreground"
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "menuitemradio",
+		"aria-checked": selected,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "date-range-picker-preset",
+		onClick,
+		className: cn("grid w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-xs/snug outline-none", disabled && selected ? "grid-cols-[20px_minmax(0,1fr)_14px]" : "grid-cols-[20px_minmax(0,1fr)]", disabled ? "cursor-default focus-visible:bg-muted/60" : "cursor-pointer hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground", disabled && !selected ? "text-muted-foreground" : "text-foreground", selected && "font-semibold"),
+		children: [
+			selected ? /* @__PURE__ */ jsx(CheckIcon, {
+				"aria-hidden": "true",
+				className: "size-3.5 justify-self-center"
+			}) : disabled ? lock : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0",
+				children: label
+			}),
+			disabled && selected ? lock : null
+		]
+	});
+}
+//#endregion
+export { DateRangePicker };

package/dist/compositions/decision-queue/decision-queue.d.ts

@@ -0,0 +1,114 @@
+import * as React from "react";
+//#region src/compositions/decision-queue/decision-queue.d.ts
+export type DecisionQueueTone = "default" | "secondary" | "outline" | "ghost" | "destructive";
+export interface DecisionQueueItem {
+  id: string;
+  /** The item's headline. It is also the item's accessible name. */
+  primary: React.ReactNode;
+  /** A supporting line under the headline. */
+  secondary?: React.ReactNode;
+  /** Small trailing detail, such as a date or a count. */
+  meta?: React.ReactNode;
+}
+export interface DecisionQueueGroup {
+  id: string;
+  title: string;
+  description?: string;
+  /** Total item count when only part of the group is loaded. Invalid counts use items.length. */
+  count?: number;
+  /** Non-interactive header content. MUST NOT contain interactive elements: it sits inside a button. */
+  badges?: React.ReactNode;
+  /** Interactive header content, rendered outside the collapse toggle. */
+  headerAction?: React.ReactNode;
+  /** Offer group-level decisions when the queue enables bulk controls. Defaults to true. */
+  bulk?: boolean;
+  items: readonly DecisionQueueItem[];
+}
+export interface DecisionQueueConsequenceContext {
+  /** How many items the decision applies to. */
+  count: number;
+  /** The group the items belong to. */
+  group: DecisionQueueGroup;
+}
+export interface DecisionQueueDecision<TDecision extends string = string> {
+  /** The verdict passed to `onDecide`, and the value `keymap` maps keys to. */
+  key: TDecision;
+  label: string;
+  /** Offer this decision as a group-level control. Defaults to true; row controls and keys remain available. */
+  bulk?: boolean;
+  /**
+   * Button style. Defaults to `outline`; a destructive decision then gets
+   * destructive text, so the decision group stays one continuous outline.
+   */
+  tone?: DecisionQueueTone;
+  /** A destructive decision opens ConfirmAction before `onDecide` runs. */
+  destructive?: boolean;
+  /** Plain text naming what happens, shown in the confirmation. */
+  consequence?: (context: DecisionQueueConsequenceContext) => string;
+}
+export interface DecisionQueueDecisionError {
+  /** The items whose decision failed. */
+  itemIds: readonly string[];
+  /** Plain-text error, for example the server's message. */
+  message: string;
+}
+export interface DecisionQueueProps<TDecision extends string = string> {
+  groups: readonly DecisionQueueGroup[];
+  /** The allowed verdicts, in display order. */
+  decisions: readonly DecisionQueueDecision<TDecision>[];
+  /** Runs a decision. Destructive and bulk decisions run only after confirmation. */
+  onDecide: (itemIds: string[], decision: TDecision) => void;
+  /** Offer group-level decisions that apply to every item in a group. */
+  bulk?: boolean;
+  /**
+   * Groups that start collapsed (uncontrolled): `true` for every group, or the
+   * ids of the groups to collapse. Read once, on mount. A group that first
+   * appears later follows the same rule. By default every group starts
+   * expanded. A collapsed group still shows its title, item count and
+   * group-level decisions.
+   */
+  defaultCollapsed?: boolean | readonly string[];
+  /**
+   * Keyboard key (`KeyboardEvent.key`) to decision. A mapped key wins over the
+   * built-in `j`/`k` navigation letters; the arrow keys always navigate. While
+   * the confirmation is open, mapped keys pressed in it go no further than
+   * the queue, so window listeners never see them.
+   */
+  keymap?: Readonly<Record<string, TDecision>>;
+  /** Whether an item's mutation is in flight. Its controls are disabled meanwhile. */
+  isPending?: (itemId: string) => boolean;
+  /**
+   * The last failed decision (FAILED). It shows in the failed items' group,
+   * and on the items, until the owner dismisses it. The queue never retries.
+   */
+  decisionError?: DecisionQueueDecisionError | null;
+  /** The owner dismissed `decisionError` (FAILED to IDLE). Clear it here. */
+  onDismissDecisionError?: () => void;
+  /** The item the triage cursor is on (controlled). Group headers do not change it. */
+  focusedId?: string | null;
+  /** The item the triage cursor starts on (uncontrolled). */
+  defaultFocusedId?: string | null;
+  onFocusChange?: (itemId: string | null) => void;
+  /** Accessible name of the queue. */
+  label?: string;
+  /** Show placeholder rows while the first load is in flight. */
+  isLoading?: boolean;
+  /** Plain-text load error, shown above the groups. */
+  error?: string;
+  /** Text shown when there is nothing to decide. */
+  emptyLabel?: string;
+  className?: string;
+}
+/**
+ * Grouped items for per-item or bulk decisions, operable entirely from the
+ * keyboard: `j`/`k` or the arrow keys move the cursor across group headers and
+ * items, Enter on a group header expands or collapses it, and `keymap` keys
+ * decide. Keys are ignored while focus is in a text field. Destructive and
+ * bulk decisions go through ConfirmAction first. A failed decision shows its
+ * error in the queue until the owner dismisses it. In a queue narrower than
+ * 32rem (a phone) each item stacks, its decisions span its width at touch
+ * size, and the key hints are hidden; on a touch screen they are hidden at
+ * any width.
+ */
+export declare function DecisionQueue<TDecision extends string = string>(props: DecisionQueueProps<TDecision>): React.JSX.Element;
+//#endregion