@stll/ui 0.44.0 → 0.45.0

package/dist/components/accordion.d.ts

@@ -2,7 +2,11 @@ import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 //#region src/components/accordion.d.ts
 declare const Accordion: <Value = unknown>(props: Accordion$1.Root.Props<Value>) => import("react").JSX.Element;
 declare const AccordionItem: ({ className, ...props }: Accordion$1.Item.Props) => import("react").JSX.Element;
-declare const AccordionTrigger: ({ className, children, ...props }: Accordion$1.Trigger.Props) => import("react").JSX.Element;
-declare const AccordionPanel: ({ className, children, ...props }: Accordion$1.Panel.Props) => import("react").JSX.Element;
+declare const AccordionTrigger: ({ className, children, size, ...props }: Accordion$1.Trigger.Props & {
+  size?: "default" | "compact";
+}) => import("react").JSX.Element;
+declare const AccordionPanel: ({ className, children, size, ...props }: Accordion$1.Panel.Props & {
+  size?: "default" | "compact";
+}) => import("react").JSX.Element;
 //#endregion
 export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/accordion.js

@@ -13,10 +13,10 @@ const AccordionItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Accordion
 	"data-slot": "accordion-item",
 	...props
 });
-const AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
+const AccordionTrigger = ({ className, children, size = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
-		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-start text-sm font-medium outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", className),
+		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md text-start font-medium outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", size === "compact" ? "py-2 text-xs" : "py-4 text-sm", className),
 		"data-slot": "accordion-trigger",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
@@ -25,12 +25,12 @@ const AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */
 		})]
 	})
 });
-const AccordionPanel = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
+const AccordionPanel = ({ className, children, size = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
 	className: "text-muted-foreground h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0",
 	"data-slot": "accordion-panel",
 	...props,
 	children: /* @__PURE__ */ jsx("div", {
-		className: cn("pt-0 pb-4", className),
+		className: cn("pt-0", size === "compact" ? "pb-3" : "pb-4", className),
 		children
 	})
 });

package/dist/components/button.d.ts

@@ -13,7 +13,7 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "row" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
   variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {

package/dist/components/court-badge.d.ts

@@ -9,10 +9,16 @@
  * carries meaning on its own anyway: the court's name stands beside it.
  */
 export type CourtBadgeWeight = "solid" | "tinted" | "outline" | "dashed";
+/**
+ * `default` stands on its own beside a court's name; `inline` sits inside a
+ * line of small text (a list row's meta line) without making it taller.
+ */
+export type CourtBadgeSize = "default" | "inline";
 type CourtBadgeProps = {
   /** The court's own abbreviation, in the language its name is in. */
   abbreviation: string;
   weight: CourtBadgeWeight;
+  size?: CourtBadgeSize | undefined;
   className?: string;
 };
 /**
@@ -23,5 +29,5 @@ type CourtBadgeProps = {
  * abbreviation is actually known. There is no placeholder: a court nobody
  * abbreviates gets no chip.
  */
-export declare const CourtBadge: ({ abbreviation, className, weight }: CourtBadgeProps) => import("react").JSX.Element;
+export declare const CourtBadge: ({ abbreviation, className, size, weight }: CourtBadgeProps) => import("react").JSX.Element;
 //#endregion

package/dist/components/court-badge.js

@@ -1,7 +1,17 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/court-badge.tsx
-const COURT_BADGE_BASE_CLASS = "inline-flex shrink-0 items-center rounded-sm border px-1 py-0.5 font-mono text-xs leading-4 font-semibold tracking-wide whitespace-nowrap";
+const COURT_BADGE_BASE_CLASS = "inline-flex shrink-0 items-center rounded-sm border font-mono font-semibold tracking-wide whitespace-nowrap";
+/**
+* The line box runs a third taller than the type, because these capitals
+* carry diacritics (Ú, Ř, Š) whose ink rises above cap height; a tighter box
+* sets the acute against the pill's border. `inline` keeps that ratio at a
+* smaller size and drops the padding, so the chip fits a 16px text line.
+*/
+const SIZE_CLASS = {
+	default: "px-1 py-0.5 text-xs leading-4",
+	inline: "px-0.5 text-3xs leading-3.5"
+};
 /**
 * Every weight keeps a border, because `--muted` is a 4% tint: a borderless
 * tinted chip on a sidebar or a muted row is a pill whose edge nobody can
@@ -31,8 +41,8 @@ const WEIGHT_CLASS = {
 * abbreviation is actually known. There is no placeholder: a court nobody
 * abbreviates gets no chip.
 */
-const CourtBadge = ({ abbreviation, className, weight }) => /* @__PURE__ */ jsx("span", {
-	className: cn(COURT_BADGE_BASE_CLASS, WEIGHT_CLASS[weight], className),
+const CourtBadge = ({ abbreviation, className, size = "default", weight }) => /* @__PURE__ */ jsx("span", {
+	className: cn(COURT_BADGE_BASE_CLASS, SIZE_CLASS[size], WEIGHT_CLASS[weight], className),
 	"data-slot": "court-badge",
 	dir: "ltr",
 	children: abbreviation

package/dist/components/date-picker-popover.d.ts

@@ -41,6 +41,16 @@ type DatePickerPopoverProps = {
   placeholderLabel?: string;
   clearLabel?: string;
   defaultOpen?: boolean;
+  open?: boolean;
+  triggerRef?: React.Ref<HTMLButtonElement> | undefined;
+  /** Keep the trigger focused when opening a following range bound. */
+  focusTriggerOnOpen?: boolean;
+  /** Enables direct date entry, with host-localized validation. */
+  dateInputLabel?: string;
+  outOfRangeLabel?: string;
+  noFuture?: boolean;
+  /** Host-owned calendar date; defaults to the browser timezone. */
+  getToday?: () => string;
   onOpenChange?: (open: boolean) => void;
   /** Label for the "go to today" button. Auto-localized from the locale when omitted. */
   todayLabel?: string;
@@ -57,8 +67,8 @@ type DatePickerPopoverProps = {
   /** Label of the time input in `date-time` mode. */
   timeLabel?: string;
   /** Inclusive `YYYY-MM-DD` bounds; in `date-time` mode they bound the day. */
-  minDate?: string;
-  maxDate?: string;
+  minDate?: string | undefined;
+  maxDate?: string | undefined;
   isDateDisabled?: (date: string) => boolean;
   layer?: OverlayLayer;
 };

package/dist/components/date-picker-popover.js

@@ -3,6 +3,7 @@ import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
+import { Input } from "./input.js";
 import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
 import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
 import { DATE_PICKER_MODE, formatDateTimeValue, getHourOptions, getMinuteOptions, getTimeFieldNames, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate, splitPickerTime } from "./date-picker-popover.logic.js";
@@ -10,7 +11,7 @@ import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popov
 import { Select, SelectContent as SelectPopup, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { panic } from "better-result";
+import { Result, panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
 //#region src/components/date-picker-popover.tsx
 const toISODate = (date) => date.toString();
@@ -57,7 +58,7 @@ const subscribeToLocalDate = (onStoreChange) => {
 		if (localDateListeners.size === 0) stopLocalDateSubscription();
 	};
 };
-const useHydrationSafeToday = () => useSyncExternalStore(subscribeToLocalDate, getLocalToday, () => HYDRATION_DATE);
+const useHydrationSafeToday = (getToday) => useSyncExternalStore(subscribeToLocalDate, getToday, () => HYDRATION_DATE);
 const useHydrationSafeBrowserLocale = () => useSyncExternalStore(noopSubscribe, () => navigator.language || HYDRATION_LOCALE, () => HYDRATION_LOCALE);
 const getFirstDayOfWeek = (locale) => {
 	const info = getLocaleWeekInfo(locale);
@@ -252,7 +253,7 @@ const PICKER_SIZE_CLASS_NAMES = {
 	}
 };
 const DatePickerPopoverContent = (props) => {
-	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
+	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, open: controlledOpen, triggerRef, focusTriggerOnOpen = false, dateInputLabel, outOfRangeLabel, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
 	const selection = resolveSelection(mode, rawValue);
 	const value = selection.date;
 	const labels = resolvePopupLabels(props);
@@ -294,14 +295,19 @@ const DatePickerPopoverContent = (props) => {
 		maxDate,
 		isDateDisabled
 	]);
+	const dateDraft = useDatePickerDraft({
+		value,
+		isDayDisabled,
+		onChange
+	});
 	const displayLabel = formatSelection(locale, selection) ?? placeholderLabel ?? "—";
 	const selectDay = (date) => {
 		switch (selection.mode) {
 			case DATE_PICKER_MODE.date:
-				onChange(date);
+				dateDraft.apply(date);
 				return;
 			case DATE_PICKER_MODE.dateTime:
-				onChange(formatDateTimeValue({
+				dateDraft.apply(formatDateTimeValue({
 					date,
 					time: selection.time ?? "00:00"
 				}));
@@ -311,7 +317,7 @@ const DatePickerPopoverContent = (props) => {
 	};
 	const handleTimeChange = (clock) => {
 		if (value === "") return;
-		onChange(formatDateTimeValue({
+		dateDraft.apply(formatDateTimeValue({
 			date: value,
 			time: joinPickerTime(clock)
 		}));
@@ -443,6 +449,7 @@ const DatePickerPopoverContent = (props) => {
 	})();
 	return /* @__PURE__ */ jsxs(Popover, {
 		defaultOpen,
+		open: controlledOpen,
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 			disabled,
@@ -451,6 +458,7 @@ const DatePickerPopoverContent = (props) => {
 				"aria-labelledby": labelledBy ? `${labelledBy} ${displayValueId}` : void 0,
 				className: cn(TRIGGER_VARIANT_CLASS_NAMES[variant], triggerToneClassName, className),
 				id,
+				ref: triggerRef,
 				type: "button"
 			}),
 			children: [
@@ -466,7 +474,8 @@ const DatePickerPopoverContent = (props) => {
 				})
 			]
 		}), /* @__PURE__ */ jsx(PopoverPopup, {
-			initialFocus: () => gridRef.current?.querySelector(`[data-date="${value || today}"]`) ?? gridRef.current,
+			onBlur: dateDraft.handleBlur,
+			initialFocus: focusTriggerOnOpen ? false : () => gridRef.current?.querySelector(`[data-date="${value || today}"]`) ?? gridRef.current,
 			className: "data-starting-style:scale-100",
 			layer,
 			padding: "sm",
@@ -516,6 +525,7 @@ const DatePickerPopoverContent = (props) => {
 								onClick: () => {
 									if (!isUnavailable) selectDay(day.date);
 								},
+								onFocus: () => setFocusedDate(day.date),
 								role: "gridcell",
 								tabIndex: isFocused ? 0 : -1,
 								type: "button",
@@ -546,11 +556,21 @@ const DatePickerPopoverContent = (props) => {
 						onChange: handleTimeChange,
 						time: selection.time
 					}),
+					/* @__PURE__ */ jsx(TypedDateField, {
+						mode: selection.mode,
+						label: dateInputLabel,
+						value: dateDraft.value,
+						invalid: dateDraft.invalid,
+						errorLabel: outOfRangeLabel,
+						onDraftChange: dateDraft.edit,
+						onCommit: dateDraft.submit
+					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "mt-1 flex items-center gap-1 border-t pt-1",
 						children: [/* @__PURE__ */ jsx(Button, {
 							className: "flex-1",
 							onClick: () => {
+								dateDraft.discard();
 								const todayDate = Temporal.PlainDate.from(today);
 								setViewMonthOverride({
 									month: todayDate.month - 1,
@@ -563,7 +583,7 @@ const DatePickerPopoverContent = (props) => {
 							children: todayLabel
 						}), value && !hideClear && /* @__PURE__ */ jsx(Button, {
 							className: "flex-1",
-							onClick: () => onChange(null),
+							onClick: () => dateDraft.apply(null),
 							size: "xs",
 							variant: "ghost",
 							children: clearLabel
@@ -576,10 +596,12 @@ const DatePickerPopoverContent = (props) => {
 };
 const DatePickerPopover = (props) => {
 	const browserLocale = useHydrationSafeBrowserLocale();
-	const today = useHydrationSafeToday();
+	const today = useHydrationSafeToday(props.getToday ?? getLocalToday);
 	const locale = props.locale ?? browserLocale;
+	const maxDate = props.noFuture && (!props.maxDate || props.maxDate > today) ? today : props.maxDate;
 	return /* @__PURE__ */ jsx(DatePickerPopoverContent, {
 		...props,
+		maxDate,
 		locale,
 		today
 	});
@@ -738,5 +760,79 @@ const YearGrid = ({ decadeBase, currentYear, cellClassName, onSelect, today }) =
 		}, row[0]))
 	});
 };
+const useDatePickerDraft = ({ value, isDayDisabled, onChange }) => {
+	const [draft, setDraft] = useState(null);
+	const commitStatus = useRef("consumed");
+	const hasDraft = draft?.baseValue === value;
+	const inputValue = hasDraft ? draft.value : value;
+	const parsed = Result.try(() => Temporal.PlainDate.from(inputValue));
+	const invalid = hasDraft && inputValue !== "" && (parsed.isErr() || parsed.value.toString() !== inputValue || isDayDisabled(inputValue));
+	const discard = () => {
+		commitStatus.current = "consumed";
+		setDraft(null);
+	};
+	const apply = (next) => {
+		discard();
+		onChange(next);
+	};
+	const commit = () => {
+		if (commitStatus.current !== "pending" || invalid || inputValue === value) return;
+		apply(inputValue || null);
+	};
+	return {
+		value: inputValue,
+		invalid,
+		edit: (next) => {
+			commitStatus.current = "pending";
+			setDraft({
+				baseValue: value,
+				value: next
+			});
+		},
+		discard,
+		apply,
+		submit: () => {
+			if (!invalid) apply(inputValue || null);
+		},
+		handleBlur: (event) => {
+			if (event.currentTarget.contains(event.relatedTarget)) return;
+			commit();
+		}
+	};
+};
+const TypedDateField = ({ mode, label, value, invalid, errorLabel = "Choose a date within the allowed range.", onDraftChange, onCommit }) => {
+	const id = useId();
+	if (!label || mode !== DATE_PICKER_MODE.date) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 flex flex-col gap-1",
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: "text-xs",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id,
+				value,
+				placeholder: "YYYY-MM-DD",
+				dir: "ltr",
+				"aria-invalid": invalid,
+				"aria-describedby": invalid ? `${id}-error` : void 0,
+				onChange: (event) => onDraftChange(event.currentTarget.value),
+				onKeyDown: (event) => {
+					if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+					event.preventDefault();
+					onCommit();
+				}
+			}),
+			invalid && /* @__PURE__ */ jsx("p", {
+				id: `${id}-error`,
+				role: "alert",
+				className: "text-destructive text-xs",
+				children: errorLabel
+			})
+		]
+	});
+};
 //#endregion
 export { DatePickerPopover };

package/dist/components/date-range-filter.d.ts

@@ -0,0 +1,14 @@
+import { DatePickerPopoverProps } from "./date-picker-popover.js";
+//#region src/components/date-range-filter.d.ts
+type DateRangeFilterProps = Omit<DatePickerPopoverProps, "value" | "onChange" | "minDate" | "open" | "defaultOpen" | "onOpenChange" | "triggerRef" | "focusTriggerOnOpen" | "id" | "labelledBy" | "mode"> & {
+  from: string | null;
+  to: string | null;
+  onFromChange: (value: string | null) => void;
+  onToChange: (value: string | null) => void;
+  fromLabel: string;
+  toLabel: string;
+};
+/** Both calendar bounds and the focus handoff belong to the range. */
+declare const DateRangeFilter: ({ from, to, onFromChange, onToChange, fromLabel, toLabel, className, maxDate, ...pickerProps }: DateRangeFilterProps) => import("react").JSX.Element;
+//#endregion
+export { DateRangeFilter, type DateRangeFilterProps };

package/dist/components/date-range-filter.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DatePickerPopover } from "./date-picker-popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+//#region src/components/date-range-filter.tsx
+/** Both calendar bounds and the focus handoff belong to the range. */
+const DateRangeFilter = ({ from, to, onFromChange, onToChange, fromLabel, toLabel, className, maxDate, ...pickerProps }) => {
+	const id = useId();
+	const toRef = useRef(null);
+	const [picker, setPicker] = useState({ type: "closed" });
+	const fromMax = to && (!maxDate || to < maxDate) ? to : maxDate;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id}-from-label`,
+				className: "text-muted-foreground text-xs font-medium",
+				children: fromLabel
+			}), /* @__PURE__ */ jsx(DatePickerPopover, {
+				...pickerProps,
+				mode: "date",
+				id: `${id}-from`,
+				defaultOpen: false,
+				labelledBy: `${id}-from-label`,
+				dateInputLabel: fromLabel,
+				value: from,
+				maxDate: fromMax,
+				minDate: void 0,
+				triggerRef: void 0,
+				focusTriggerOnOpen: false,
+				open: picker.type === "from",
+				onOpenChange: (open) => setPicker(open ? { type: "from" } : { type: "closed" }),
+				onChange: (next) => {
+					onFromChange(next);
+					if (!next) return;
+					setPicker({
+						type: "to",
+						focus: "trigger"
+					});
+					toRef.current?.focus();
+				}
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id}-to-label`,
+				className: "text-muted-foreground text-xs font-medium",
+				children: toLabel
+			}), /* @__PURE__ */ jsx(DatePickerPopover, {
+				...pickerProps,
+				mode: "date",
+				id: `${id}-to`,
+				defaultOpen: false,
+				labelledBy: `${id}-to-label`,
+				dateInputLabel: toLabel,
+				value: to,
+				minDate: from ?? void 0,
+				maxDate,
+				open: picker.type === "to",
+				triggerRef: toRef,
+				focusTriggerOnOpen: picker.type === "to" && picker.focus === "trigger",
+				onOpenChange: (open) => setPicker(open ? {
+					type: "to",
+					focus: "calendar"
+				} : { type: "closed" }),
+				onChange: onToChange
+			})]
+		})]
+	});
+};
+//#endregion
+export { DateRangeFilter };

package/dist/components/document-identity-badge.d.ts

@@ -0,0 +1,12 @@
+import { CourtBadgeSize } from "./court-badge.js";
+import { DocumentIdentity } from "./document-identity-badge.logic.js";
+//#region src/components/document-identity-badge.d.ts
+export declare const DocumentIdentityBadge: ({ identity, size, title }: DocumentIdentityBadgeProps) => import("react").JSX.Element;
+type DocumentIdentityBadgeProps = {
+  identity: DocumentIdentity;
+  /** Decision chips can fit an inline metadata row. */
+  size?: CourtBadgeSize | undefined;
+  /** Omit when the enclosing tab already supplies the full-title tooltip. */
+  title?: string | undefined;
+};
+//#endregion

package/dist/components/document-identity-badge.js

@@ -0,0 +1,94 @@
+import { FileTextIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { CourtBadge } from "./court-badge.js";
+import { COURT_TIER_WEIGHT, statuteIdentityLabels } from "./document-identity-badge.logic.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { panic } from "better-result";
+//#region src/components/document-identity-badge.tsx
+const DocumentIdentityBadge = ({ identity, size, title }) => {
+	const content = documentIdentityMark(identity, size);
+	if (title === void 0) return content;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("span", { className: "inline-flex max-w-full min-w-0" }),
+		children: content
+	}), /* @__PURE__ */ jsx(TooltipPopup, { children: title })] });
+};
+function documentIdentityMark(identity, size) {
+	switch (identity.kind) {
+		case "statute": {
+			const labels = statuteIdentityLabels(identity);
+			if (labels === null) return unknownDocumentMark();
+			return /* @__PURE__ */ jsxs("span", {
+				className: cn("@container/document-identity inline-flex max-w-full shrink-0 items-center justify-center font-mono leading-4 font-semibold tabular-nums", labels.short.length > 7 ? "text-[9px]" : "text-[10px]"),
+				style: { width: `${labels.long.length + .25}ch` },
+				"data-slot": "document-identity-badge",
+				"data-kind": "statute",
+				dir: "ltr",
+				children: [/* @__PURE__ */ jsx("bdi", {
+					className: statuteLabelClasses(labels.long.length).short,
+					children: labels.short
+				}), /* @__PURE__ */ jsx("bdi", {
+					className: statuteLabelClasses(labels.long.length).long,
+					children: labels.long
+				})]
+			});
+		}
+		case "decision": {
+			const abbreviation = identity.courtAbbreviation?.trim();
+			if (!abbreviation) return unknownDocumentMark();
+			return /* @__PURE__ */ jsx("span", {
+				className: "inline-flex max-w-full min-w-0",
+				"data-slot": "document-identity-badge",
+				"data-kind": "decision",
+				children: /* @__PURE__ */ jsx(CourtBadge, {
+					abbreviation,
+					size,
+					weight: identity.courtTier === void 0 ? "outline" : COURT_TIER_WEIGHT[identity.courtTier],
+					className: cn("max-w-full overflow-hidden", abbreviation.length > 4 && "px-0.5 text-[9px] tracking-normal")
+				})
+			});
+		}
+		case "unknown": return unknownDocumentMark();
+		default: return panic("Unhandled document identity");
+	}
+}
+function unknownDocumentMark() {
+	return /* @__PURE__ */ jsx(FileTextIcon, {
+		"aria-hidden": "true",
+		className: "size-3.5 shrink-0",
+		"data-slot": "document-identity-badge",
+		"data-kind": "unknown"
+	});
+}
+const STATUTE_LABEL_CLASSES = {
+	6: {
+		short: "@[6ch]/document-identity:hidden",
+		long: "hidden @[6ch]/document-identity:inline"
+	},
+	7: {
+		short: "@[7ch]/document-identity:hidden",
+		long: "hidden @[7ch]/document-identity:inline"
+	},
+	8: {
+		short: "@[8ch]/document-identity:hidden",
+		long: "hidden @[8ch]/document-identity:inline"
+	},
+	9: {
+		short: "@[9ch]/document-identity:hidden",
+		long: "hidden @[9ch]/document-identity:inline"
+	},
+	10: {
+		short: "@[10ch]/document-identity:hidden",
+		long: "hidden @[10ch]/document-identity:inline"
+	}
+};
+function statuteLabelClasses(length) {
+	if (length <= 6) return STATUTE_LABEL_CLASSES[6];
+	if (length === 7) return STATUTE_LABEL_CLASSES[7];
+	if (length === 8) return STATUTE_LABEL_CLASSES[8];
+	if (length === 9) return STATUTE_LABEL_CLASSES[9];
+	return STATUTE_LABEL_CLASSES[10];
+}
+//#endregion
+export { DocumentIdentityBadge };

package/dist/components/document-identity-badge.logic.d.ts

@@ -0,0 +1,25 @@
+//#region src/components/document-identity-badge.logic.d.ts
+export declare const COURT_TIER_WEIGHT: {
+  readonly constitutional: "solid";
+  readonly supreme: "tinted";
+  readonly regional: "outline";
+  readonly other: "dashed";
+};
+export type DocumentIdentity = {
+  kind: "statute";
+  number: string | null;
+  year: string | null;
+} | {
+  kind: "decision";
+  courtAbbreviation: string | null | undefined;
+  courtTier?: keyof typeof COURT_TIER_WEIGHT | undefined;
+} | {
+  kind: "unknown";
+};
+export declare const statuteIdentityLabels: ({ number, year }: Extract<DocumentIdentity, {
+  kind: "statute";
+}>) => {
+  short: string;
+  long: string;
+} | null;
+//#endregion

package/dist/components/document-identity-badge.logic.js

@@ -0,0 +1,25 @@
+//#region src/components/document-identity-badge.logic.ts
+const COURT_TIER_WEIGHT = {
+	constitutional: "solid",
+	supreme: "tinted",
+	regional: "outline",
+	other: "dashed"
+};
+const statuteIdentityLabels = ({ number, year }) => {
+	const ordinal = number?.trim() || null;
+	const fullYear = year?.trim() || null;
+	if (ordinal === null) return fullYear === null ? null : {
+		short: fullYear,
+		long: fullYear
+	};
+	if (fullYear === null) return {
+		short: ordinal,
+		long: ordinal
+	};
+	return {
+		short: `${ordinal}/${fullYear.slice(-2)}`,
+		long: `${ordinal}/${fullYear}`
+	};
+};
+//#endregion
+export { COURT_TIER_WEIGHT, statuteIdentityLabels };

package/dist/components/landing.d.ts

@@ -25,7 +25,7 @@ type LandingGreetingProps = {
 };
 export declare const LandingGreeting: ({ icon, children }: LandingGreetingProps) => import("react").JSX.Element;
 /** A column's heading: an icon and a sentence-case label, as a link or a trigger. */
-export declare const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-2";
+export declare const LANDING_SECTION_HEADING_CLASS = "text-foreground hover:bg-accent/50 focus-visible:ring-ring [&>svg]:text-muted-foreground flex items-center gap-2 rounded-md px-2 py-0.5 text-sm font-semibold outline-none focus-visible:ring-2";
 /** A row of a column, as a link or a button. Its text lines up with the
  *  heading's label; the icon slot under the heading icon stays empty unless
  *  the icon identifies the row (a matter's colour). */

package/dist/components/landing.js

@@ -40,7 +40,7 @@ const LandingGreeting = ({ icon, children }) => /* @__PURE__ */ jsxs("div", {
 	})]
 });
 /** A column's heading: an icon and a sentence-case label, as a link or a trigger. */
-const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-2 text-sm font-medium outline-none focus-visible:ring-2";
+const LANDING_SECTION_HEADING_CLASS = "text-foreground hover:bg-accent/50 focus-visible:ring-ring [&>svg]:text-muted-foreground flex items-center gap-2 rounded-md px-2 py-0.5 text-sm font-semibold outline-none focus-visible:ring-2";
 /** A row of a column, as a link or a button. Its text lines up with the
 *  heading's label; the icon slot under the heading icon stays empty unless
 *  the icon identifies the row (a matter's colour). */

package/dist/components/matter-icon.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/matter-icon.d.ts
+type MatterIconProps = {
+  className?: string | undefined;
+} & ({
+  matter: {
+    id: string;
+    color: string | null;
+  };
+} | {
+  variant: "none" | "all";
+});
+export declare const MatterIcon: (props: MatterIconProps) => import("react").JSX.Element;
+export declare const MattersNavIcon: ({ className }: {
+  className?: string | undefined;
+}) => import("react").JSX.Element;
+//#endregion