@parallelworks/ui 0.77.0 → 0.79.0

package/dist/components/DatePicker.d.ts

@@ -1,3 +1,5 @@
+import { type DateRange } from '@daypicker/react';
+import { type ReactElement, type ReactNode } from 'react';
 import { type FieldBoxSize } from './fieldBox.js';
 export interface DatePickerProps {
     /** As a native date input holds it: `yyyy-MM-dd`, or with `withTime` the local
@@ -27,10 +29,38 @@ export interface DatePickerProps {
     size?: FieldBoxSize | undefined;
     /** On the row that holds the date and the time: its width or margin. */
     className?: string | undefined;
+    /** Renders the field as this button, such as a chip that says the date its own way. The
+     *  button shows the date itself; `placeholder` and `size` then go unused. */
+    trigger?: ReactElement | undefined;
+    /** A hint on the trigger button. */
+    triggerTooltip?: ReactNode;
+    /** The edge of the field the calendar lines up with. */
+    align?: 'start' | 'end' | undefined;
 }
 /**
  * A day from a calendar, and with `withTime` a time beside it. The value is a string as a native
  * date or datetime-local input holds it, so it reads the same in forms and URLs; months, weekdays
  * and the shown date follow the reader's locale.
  */
-export declare function DatePicker({ value, onValueChange, withTime, min, max, timeStep, required, disabled, placeholder, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, size, className, }: DatePickerProps): import("react").JSX.Element;
+export declare function DatePicker({ value, onValueChange, withTime, min, max, timeStep, required, disabled, placeholder, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, size, className, trigger, triggerTooltip, align, }: DatePickerProps): import("react").JSX.Element;
+export type CalendarProps = {
+    /** The earliest and latest days that can be chosen. */
+    min?: Date | undefined;
+    max?: Date | undefined;
+    /** The month it opens on, when it differs from the chosen day's. */
+    defaultMonth?: Date | undefined;
+    /** Moves focus to the chosen day, or today, as it appears. */
+    autoFocus?: boolean | undefined;
+} & ({
+    mode: 'single';
+    selected: Date | undefined;
+    onSelect: (day: Date | undefined) => void;
+} | {
+    /** Two days, both included; the second click ends the range. */
+    mode: 'range';
+    selected: DateRange | undefined;
+    onSelect: (range: DateRange | undefined) => void;
+});
+/** The month grid DatePicker opens, for a panel that holds a calendar in place, such as a
+ *  date filter's picker. Months, weekdays and labels follow the reader's locale. */
+export declare function Calendar({ min, max, defaultMonth, autoFocus, ...props }: CalendarProps): import("react").JSX.Element;

package/dist/components/DatePicker.js

@@ -2,12 +2,14 @@ import { cx } from "../cx.js";
 import { buttonClasses } from "./buttonClasses.js";
 import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
-import { useFullscreenContainer } from "./fullscreen.js";
-import { useStrings } from "./Provider.js";
+import { usePopupContainer } from "./popupContainer.js";
+import { Tooltip } from "./Tooltip.js";
+import { useLocale, useStrings } from "./Provider.js";
 import { fieldBox } from "./fieldBox.js";
 import { useFieldLabelledControl } from "./Field.js";
+import { formatNumericDate, parseTypedDate } from "./typedDate.js";
+import { useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Popover } from "@base-ui/react/popover";
 import { DayPicker } from "@daypicker/react";
 //#region src/components/DatePicker.tsx
@@ -23,23 +25,41 @@ function parseDay(value) {
 }
 var timeOf = (value) => value?.match(/T(\d{2}:\d{2}(?::\d{2})?)/)?.[1];
 /** The locale's first day of the week, where the browser reports it; Sunday otherwise. */
-function firstWeekday() {
+function firstWeekday(tag) {
 	try {
-		const locale = new Intl.Locale(navigator.language);
+		const locale = new Intl.Locale(tag ?? navigator.language);
 		const firstDay = (locale.getWeekInfo?.() ?? locale.weekInfo)?.firstDay;
 		return firstDay === void 0 ? 0 : firstDay % 7;
 	} catch {
 		return 0;
 	}
 }
-var caption = new Intl.DateTimeFormat(void 0, {
-	month: "long",
-	year: "numeric"
-});
-var weekday = new Intl.DateTimeFormat(void 0, { weekday: "narrow" });
-var longDay = new Intl.DateTimeFormat(void 0, { dateStyle: "full" });
-var shownDay = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
-var longWeekday = new Intl.DateTimeFormat(void 0, { weekday: "long" });
+function dateFormats(locale) {
+	return {
+		caption: new Intl.DateTimeFormat(locale, {
+			month: "long",
+			year: "numeric"
+		}),
+		weekday: new Intl.DateTimeFormat(locale, { weekday: "narrow" }),
+		longDay: new Intl.DateTimeFormat(locale, { dateStyle: "full" }),
+		shownDay: new Intl.DateTimeFormat(locale, { dateStyle: "medium" }),
+		shownDayThisYear: new Intl.DateTimeFormat(locale, {
+			month: "short",
+			day: "numeric"
+		}),
+		longWeekday: new Intl.DateTimeFormat(locale, { weekday: "long" }),
+		weekStartsOn: firstWeekday(locale)
+	};
+}
+var formatsByLocale = /* @__PURE__ */ new Map();
+function formatsFor(locale) {
+	let formats = formatsByLocale.get(locale);
+	if (!formats) {
+		formats = dateFormats(locale);
+		formatsByLocale.set(locale, formats);
+	}
+	return formats;
+}
 var calendarClassNames = {
 	root: "relative p-3",
 	months: "flex flex-col",
@@ -74,14 +94,19 @@ var triggerClassName = (size) => cx(fieldBox({ size }), "flex flex-1 cursor-poin
 * date or datetime-local input holds it, so it reads the same in forms and URLs; months, weekdays
 * and the shown date follow the reader's locale.
 */
-function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md", className }) {
-	const fullscreen = useFullscreenContainer();
+function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md", className, trigger, triggerTooltip, align = "start" }) {
+	const portal = usePopupContainer();
 	const t = useStrings().datePicker;
 	const { common } = useStrings();
 	const field = useFieldLabelledControl();
 	const [open, setOpen] = useState(false);
-	const [weekStartsOn] = useState(firstWeekday);
+	const locale = useLocale();
+	const { caption, weekday, longDay, shownDay, shownDayThisYear, longWeekday, weekStartsOn } = formatsFor(locale);
 	const day = parseDay(value);
+	const uid = useId();
+	const [month, setMonth] = useState(void 0);
+	const [typed, setTyped] = useState("");
+	const typedBox = useRef(null);
 	const time = timeOf(value) ?? timeOf(min) ?? "00:00";
 	const earliest = parseDay(min);
 	const latest = parseDay(max);
@@ -98,37 +123,90 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 		emit(next);
 		setOpen(false);
 	};
+	const onOpenChange = (next) => {
+		if (next) {
+			setMonth(opensOn ?? /* @__PURE__ */ new Date());
+			setTyped(day ? formatNumericDate(day, locale) : "");
+		}
+		setOpen(next);
+	};
+	const inRange = (date) => (!earliest || date >= earliest) && (!latest || date <= latest);
+	const typedDay = typed.trim() ? parseTypedDate(typed, locale) : void 0;
+	const typedInvalid = typed.trim() !== "" && (!typedDay || !inRange(typedDay));
+	const shown = day ? (day.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? shownDayThisYear : shownDay).format(day) : void 0;
+	const triggerProps = {
+		id: id ?? field?.id,
+		disabled,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : field?.["aria-labelledby"]),
+		"aria-describedby": ariaDescribedBy ?? field?.["aria-describedby"],
+		"aria-invalid": ariaInvalid || field?.["aria-invalid"],
+		"aria-required": ariaRequired || field?.["aria-required"]
+	};
 	const sameDay = (bound) => day !== void 0 && parseDay(bound)?.getTime() === day.getTime();
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex w-full items-center", size === "sm" ? "gap-1.5" : "gap-2", className),
-		children: [/* @__PURE__ */ jsxs(Popover.Root, {
-			open,
-			onOpenChange: setOpen,
-			children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
-				id: id ?? field?.id,
-				disabled,
-				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : field?.["aria-labelledby"]),
-				"aria-describedby": ariaDescribedBy ?? field?.["aria-describedby"],
-				"aria-invalid": ariaInvalid || field?.["aria-invalid"],
-				"aria-required": ariaRequired || field?.["aria-required"],
+	const picker = /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: triggerTooltip,
+			children: trigger ? /* @__PURE__ */ jsx(Popover.Trigger, {
+				...triggerProps,
+				render: trigger
+			}) : /* @__PURE__ */ jsxs(Popover.Trigger, {
+				...triggerProps,
 				className: triggerClassName(size),
 				children: [/* @__PURE__ */ jsx(CalendarIcon, {
 					"aria-hidden": "true",
 					className: cx("shrink-0 text-(--theme-muted-text-color)", size === "sm" ? "size-3" : "size-3.5")
 				}), /* @__PURE__ */ jsx("span", {
 					className: cx("truncate", !day && "text-(--theme-placeholder)"),
-					children: day ? shownDay.format(day) : placeholder ?? t.pickDate
+					children: shown ?? placeholder ?? t.pickDate
 				})]
-			}), /* @__PURE__ */ jsx(Popover.Portal, {
-				container: fullscreen,
-				children: /* @__PURE__ */ jsx(Popover.Positioner, {
-					align: "start",
-					sideOffset: 4,
-					className: positionerClassName,
-					children: /* @__PURE__ */ jsxs(Popover.Popup, {
-						className: panelClassName,
-						children: [/* @__PURE__ */ jsx(DayPicker, {
+			})
+		}), /* @__PURE__ */ jsx(Popover.Portal, {
+			...portal,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				align,
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsxs(Popover.Popup, {
+					initialFocus: typedBox,
+					className: panelClassName,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "border-b border-(--theme-border) p-2",
+							children: [/* @__PURE__ */ jsx("input", {
+								type: "text",
+								inputMode: "numeric",
+								autoComplete: "off",
+								spellCheck: false,
+								"aria-label": t.typeDate,
+								"aria-invalid": typedInvalid || void 0,
+								"aria-describedby": typedInvalid ? `${uid}invalid` : void 0,
+								placeholder: formatNumericDate(/* @__PURE__ */ new Date(), locale),
+								value: typed,
+								ref: typedBox,
+								onChange: (event) => {
+									const next = event.target.value;
+									setTyped(next);
+									const parsed = parseTypedDate(next, locale);
+									if (parsed) setMonth(parsed);
+								},
+								onKeyDown: (event) => {
+									if (event.key === "Enter") {
+										event.preventDefault();
+										if (typedDay && inRange(typedDay)) pick(typedDay);
+									}
+								},
+								className: cx(fieldBox({ size: "sm" }), "tabular-nums")
+							}), typedInvalid && /* @__PURE__ */ jsx("div", {
+								id: `${uid}invalid`,
+								className: "mt-1 text-xs text-(--theme-error-text)",
+								"aria-live": "polite",
+								children: t.invalidDate
+							})]
+						}),
+						/* @__PURE__ */ jsx(DayPicker, {
 							...required ? {
 								mode: "single",
 								required: true,
@@ -139,12 +217,12 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 								selected: day,
 								onSelect: pick
 							},
-							...opensOn && { defaultMonth: opensOn },
+							...month && { month },
+							onMonthChange: setMonth,
 							...earliest && { startMonth: earliest },
 							...latest && { endMonth: latest },
 							disabled: outOfRange,
 							weekStartsOn,
-							autoFocus: true,
 							showOutsideDays: true,
 							fixedWeeks: true,
 							classNames: calendarClassNames,
@@ -160,7 +238,8 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 								labelWeekday: (date) => longWeekday.format(date)
 							},
 							components: { Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" }) }
-						}), !required && day && /* @__PURE__ */ jsx("div", {
+						}),
+						!required && day && /* @__PURE__ */ jsx("div", {
 							className: "flex justify-end border-t border-(--theme-border) px-3 py-2",
 							children: /* @__PURE__ */ jsx("button", {
 								type: "button",
@@ -174,11 +253,16 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 								},
 								children: common.clear
 							})
-						})]
-					})
+						})
+					]
 				})
-			})]
-		}), withTime && /* @__PURE__ */ jsx("input", {
+			})
+		})]
+	});
+	if (trigger && !withTime) return picker;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(trigger ? "inline-flex" : "flex w-full", "items-center", size === "sm" ? "gap-1.5" : "gap-2", className),
+		children: [picker, withTime && /* @__PURE__ */ jsx("input", {
 			type: "time",
 			"aria-label": t.time,
 			value: day ? time : "",
@@ -195,5 +279,52 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 		})]
 	});
 }
+var rangeClassNames = {
+	...calendarClassNames,
+	selected: "",
+	range_start: "[&>button]:bg-(--theme-accent) [&>button]:text-(--theme-accent-text) [&>button]:hover:bg-(--theme-accent)",
+	range_end: "[&>button]:bg-(--theme-accent) [&>button]:text-(--theme-accent-text) [&>button]:hover:bg-(--theme-accent)",
+	range_middle: "[&>button]:bg-(--theme-accent-subtle) [&>button]:rounded-none"
+};
+/** The month grid DatePicker opens, for a panel that holds a calendar in place, such as a
+*  date filter's picker. Months, weekdays and labels follow the reader's locale. */
+function Calendar({ min, max, defaultMonth, autoFocus = false, ...props }) {
+	const t = useStrings().datePicker;
+	const { caption, weekday, longDay, longWeekday, weekStartsOn } = formatsFor(useLocale());
+	const outOfRange = [...min ? [{ before: min }] : [], ...max ? [{ after: max }] : []];
+	const opensOn = defaultMonth ?? (props.mode === "single" ? props.selected : props.selected?.from) ?? min;
+	return /* @__PURE__ */ jsx(DayPicker, {
+		...props.mode === "single" ? {
+			mode: "single",
+			selected: props.selected,
+			onSelect: props.onSelect
+		} : {
+			mode: "range",
+			selected: props.selected,
+			onSelect: props.onSelect
+		},
+		...opensOn && { defaultMonth: opensOn },
+		...min && { startMonth: min },
+		...max && { endMonth: max },
+		disabled: outOfRange,
+		weekStartsOn,
+		autoFocus,
+		showOutsideDays: true,
+		fixedWeeks: true,
+		classNames: props.mode === "range" ? rangeClassNames : calendarClassNames,
+		formatters: {
+			formatCaption: (month) => caption.format(month),
+			formatWeekdayName: (date) => weekday.format(date)
+		},
+		labels: {
+			labelDayButton: (date) => longDay.format(date),
+			labelPrevious: () => t.previousMonth,
+			labelNext: () => t.nextMonth,
+			labelGrid: (month) => caption.format(month),
+			labelWeekday: (date) => longWeekday.format(date)
+		},
+		components: { Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" }) }
+	});
+}
 //#endregion
-export { DatePicker };
+export { Calendar, DatePicker };

package/dist/components/DescriptionList.d.ts

@@ -13,22 +13,28 @@ export interface DescriptionListProps extends Omit<ComponentPropsWithoutRef<'dl'
      *  list is too narrow for both side by side. In a DescriptionListGroup, the group's
      *  `stacked` decides. */
     stacked?: boolean | undefined;
+    /** `xs` sets smaller type, for a dense panel of details such as a job's;
+     *  in a DescriptionListGroup, the group's `size` decides. */
+    size?: DescriptionListSize | undefined;
     /** Styles the box around the list, such as its margins or width. */
     className?: string | undefined;
 }
+export type DescriptionListSize = 'sm' | 'xs';
 /** Names and their values, such as the details of a record in a drawer or a card. The
  *  label column is as wide as its longest label, up to two fifths of the list, so a
  *  long label wraps rather than squeezing the values; each label sits over its value
  *  when the list is narrow. Lists side by side in one panel share their label column
  *  inside a `DescriptionListGroup`. */
-export default function DescriptionList({ variant, title, headingLevel, stacked, className, children, ...props }: DescriptionListProps): import("react").JSX.Element;
+export default function DescriptionList({ variant, title, headingLevel, stacked, size: sizeProp, className, children, ...props }: DescriptionListProps): import("react").JSX.Element;
 /** Description lists in one panel, such as a record's Overview, Actor and Target, that
  *  share one label column: it fits the longest label across all of them, so their
  *  values start at one edge down the panel. Each list keeps its own title and variant;
  *  all of them stack together when the panel is narrow. */
-export declare function DescriptionListGroup({ stacked, className, children, }: {
+export declare function DescriptionListGroup({ stacked, size, className, children, }: {
     /** Puts each label over its value at any width. */
     stacked?: boolean | undefined;
+    /** Every list's type size, so the lists in one panel match. */
+    size?: DescriptionListSize | undefined;
     /** Styles the box around the group, such as its margins or width. */
     className?: string | undefined;
     /** `DescriptionList`s. */
@@ -46,7 +52,11 @@ export interface DescriptionListItemProps {
     /** Adds a button that copies the value: `true` copies its text as shown; a string
      *  copies that instead, such as a full ID behind a shortened one. */
     copy?: boolean | string | undefined;
+    /** Keeps the value to one line, cut off with an ellipsis, and shows it whole
+     *  on hover, for a long ID or a list of nodes in a dense panel. `copy` still
+     *  copies all of it. */
+    truncate?: boolean | undefined;
     className?: string | undefined;
 }
 /** A label and its value in a DescriptionList. */
-export declare function DescriptionListItem({ label, children, tooltip, mono, copy, className, }: DescriptionListItemProps): import("react").JSX.Element;
+export declare function DescriptionListItem({ label, children, tooltip, mono, copy, truncate, className, }: DescriptionListItemProps): import("react").JSX.Element;

package/dist/components/DescriptionList.js

@@ -1,11 +1,25 @@
 import { cx } from "../cx.js";
+import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { InfoTip } from "./InfoTip.js";
 import { CopyButton } from "./CopyButton.js";
 import { withPathBreaks } from "./pathBreaks.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DescriptionList.tsx
+var sizeText = {
+	sm: "text-sm",
+	xs: "text-xs"
+};
+var sizeLeading = {
+	sm: "leading-5",
+	xs: "leading-4"
+};
+var sizeMono = {
+	sm: "font-mono text-[0.8125rem]",
+	xs: "font-mono text-[0.75rem]"
+};
+var SizeContext = createContext(null);
 var variantClasses = {
 	plain: "*:py-1",
 	divided: "divide-y divide-(--theme-border) *:py-2",
@@ -19,14 +33,18 @@ var titleClassName = "col-span-full m-0 mb-1 text-sm font-semibold text-(--theme
 *  long label wraps rather than squeezing the values; each label sits over its value
 *  when the list is narrow. Lists side by side in one panel share their label column
 *  inside a `DescriptionListGroup`. */
-function DescriptionList({ variant = "plain", title, headingLevel = 3, stacked = false, className, children, ...props }) {
+function DescriptionList({ variant = "plain", title, headingLevel = 3, stacked = false, size: sizeProp, className, children, ...props }) {
 	const grouped = useContext(InGroup);
+	const size = useContext(SizeContext) ?? sizeProp ?? "sm";
 	const titleId = useId();
 	const Heading = `h${headingLevel}`;
 	const list = /* @__PURE__ */ jsx("dl", {
 		...props,
-		className: cx("m-0 text-sm", grouped ? "col-span-full grid grid-cols-subgrid" : columns(stacked), variantClasses[variant]),
-		children
+		className: cx("m-0", sizeText[size], grouped ? "col-span-full grid grid-cols-subgrid" : columns(stacked), variantClasses[variant]),
+		children: /* @__PURE__ */ jsx(SizeContext, {
+			value: size,
+			children
+		})
 	});
 	const named = title !== void 0 ? {
 		role: "group",
@@ -52,26 +70,31 @@ function DescriptionList({ variant = "plain", title, headingLevel = 3, stacked =
 *  share one label column: it fits the longest label across all of them, so their
 *  values start at one edge down the panel. Each list keeps its own title and variant;
 *  all of them stack together when the panel is narrow. */
-function DescriptionListGroup({ stacked = false, className, children }) {
+function DescriptionListGroup({ stacked = false, size, className, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cx("@container/dl min-w-0", className),
 		children: /* @__PURE__ */ jsx("div", {
 			className: cx(columns(stacked), "gap-y-6"),
 			children: /* @__PURE__ */ jsx(InGroup, {
 				value: true,
-				children
+				children: size ? /* @__PURE__ */ jsx(SizeContext, {
+					value: size,
+					children
+				}) : children
 			})
 		})
 	});
 }
 var isEmpty = (value) => value === null || value === void 0 || value === false || value === "";
 /** A label and its value in a DescriptionList. */
-function DescriptionListItem({ label, children, tooltip, mono = false, copy = false, className }) {
+function DescriptionListItem({ label, children, tooltip, mono = false, copy = false, truncate = false, className }) {
 	const labelId = useId();
+	const size = useContext(SizeContext) ?? "sm";
+	const leading = sizeLeading[size];
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("col-span-full grid grid-cols-subgrid gap-y-0.5", className),
 		children: [/* @__PURE__ */ jsxs("dt", {
-			className: "min-w-0 leading-5 wrap-break-word text-(--theme-muted-text-color)",
+			className: cx("min-w-0 wrap-break-word text-(--theme-muted-text-color)", leading),
 			children: [/* @__PURE__ */ jsx("span", {
 				id: labelId,
 				children: label
@@ -81,9 +104,17 @@ function DescriptionListItem({ label, children, tooltip, mono = false, copy = fa
 			})]
 		}), /* @__PURE__ */ jsx("dd", {
 			className: "m-0 flex min-w-0 items-start gap-1 text-(--theme-app)",
-			children: isEmpty(children) ? /* @__PURE__ */ jsx(EmptyValue, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			children: isEmpty(children) ? /* @__PURE__ */ jsx(EmptyValue, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [truncate ? /* @__PURE__ */ jsx(Tooltip, {
+				content: children,
+				overflowOnly: true,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-value": true,
+					className: cx("min-w-0 truncate", leading, mono && sizeMono[size]),
+					children
+				})
+			}) : /* @__PURE__ */ jsx("div", {
 				"data-value": true,
-				className: cx("min-w-0 leading-5 wrap-anywhere", mono && "font-mono text-[0.8125rem]"),
+				className: cx("min-w-0 wrap-anywhere", leading, mono && sizeMono[size]),
 				children: withPathBreaks(children)
 			}), copy !== false && /* @__PURE__ */ jsx(CopyValue, {
 				text: copy === true ? void 0 : copy,
@@ -96,8 +127,9 @@ function DescriptionListItem({ label, children, tooltip, mono = false, copy = fa
 var EMPTY_MARK = "—";
 function EmptyValue() {
 	const { common: t } = useStrings();
+	const size = useContext(SizeContext) ?? "sm";
 	return /* @__PURE__ */ jsxs("span", {
-		className: "leading-5 text-(--theme-muted-text-color)",
+		className: cx("text-(--theme-muted-text-color)", sizeLeading[size]),
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			children: EMPTY_MARK

package/dist/components/Disclosure.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 /** The height a collapsible panel animates as it opens and closes. It clips
  *  only while it moves, so focus rings and overflowing content show once open. */
 export declare const collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,opacity] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-starting-style:overflow-hidden data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:overflow-hidden data-ending-style:opacity-0";
@@ -17,12 +17,20 @@ export interface DisclosureProps {
     summaryClassName?: string | undefined;
     /** On the revealed detail: its indent and spacing. */
     panelClassName?: string | undefined;
+    /** False drops the chevron, for a row that reads as a toggle on its own, such as a whole
+     *  list row that opens its detail. */
+    chevron?: boolean | undefined;
+    /** Controls beside the summary, outside the toggle, so a row can hold buttons without
+     *  nesting them in it. */
+    actions?: ReactNode;
+    /** On the whole disclosure, summary and detail, such as a row's own menu. */
+    onContextMenu?: MouseEventHandler<HTMLDivElement> | undefined;
     children: ReactNode;
 }
 /** A line inside content that reveals more detail beneath it, such as a tool
  *  call's arguments or a model's reasoning. For a titled part of a page or
  *  form, which belongs in the page's outline, use Section. */
-export declare function Disclosure({ summary, open, onOpenChange, defaultOpen, disabled, keepMounted, className, summaryClassName, panelClassName, children, }: DisclosureProps): import("react").JSX.Element;
+export declare function Disclosure({ summary, open, onOpenChange, defaultOpen, disabled, keepMounted, className, summaryClassName, panelClassName, chevron, actions, onContextMenu, children, }: DisclosureProps): import("react").JSX.Element;
 /** The revealing panel alone, for a toggle that lives elsewhere, such as a
  *  tree row's chevron that names this panel with `aria-controls`. */
 export declare function DisclosurePanel({ open, id, keepMounted, className, children, }: {

package/dist/components/Disclosure.js

@@ -9,20 +9,31 @@ var collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,
 /** A line inside content that reveals more detail beneath it, such as a tool
 *  call's arguments or a model's reasoning. For a titled part of a page or
 *  form, which belongs in the page's outline, use Section. */
-function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled = false, keepMounted = false, className, summaryClassName, panelClassName, children }) {
+function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled = false, keepMounted = false, className, summaryClassName, panelClassName, chevron = true, actions, onContextMenu, children }) {
+	const toggle = /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		className: cx("group/disclosure flex min-w-0 items-start gap-2 rounded-sm text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", disabled ? "cursor-default" : "cursor-pointer", summaryClassName),
+		children: [summary, !disabled && chevron && /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"aria-hidden": "true",
+			className: "mt-1 h-3.5 w-3.5 shrink-0 opacity-70 transition-transform group-data-panel-open/disclosure:rotate-90 motion-reduce:transition-none"
+		})]
+	});
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		open,
 		onOpenChange: (next) => onOpenChange?.(next),
 		defaultOpen,
 		disabled,
 		className,
-		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
-			className: cx("group/disclosure flex min-w-0 items-start gap-2 rounded-sm text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", disabled ? "cursor-default" : "cursor-pointer", summaryClassName),
-			children: [summary, !disabled && /* @__PURE__ */ jsx(ChevronRightIcon, {
-				"aria-hidden": "true",
-				className: "mt-1 h-3.5 w-3.5 shrink-0 opacity-70 transition-transform group-data-panel-open/disclosure:rotate-90 motion-reduce:transition-none"
+		onContextMenu,
+		children: [actions ? /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1",
+				children: toggle
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: actions
 			})]
-		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+		}) : toggle, /* @__PURE__ */ jsx(Collapsible.Panel, {
 			keepMounted,
 			className: cx(collapsePanelClassName, panelClassName),
 			children

package/dist/components/Drawer.js

@@ -1,12 +1,12 @@
 import { cx } from "../cx.js";
 import { ArrowLeftIcon, CloseIcon } from "../icons.js";
-import { useFullscreenContainer } from "./fullscreen.js";
+import { usePopupContainer } from "./popupContainer.js";
 import { useStrings } from "./Provider.js";
 import { IconButton } from "./IconButton.js";
 import { closeHandler } from "./dismiss.js";
 import { useSplitter } from "./splitter.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react/drawer";
 //#region src/components/Drawer.tsx
 /** A panel that slides in from an edge over the page. A swipe toward that edge,
@@ -17,7 +17,7 @@ import { Drawer } from "@base-ui/react/drawer";
 *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
 *  on the document root. */
 function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
-	const fullscreen = useFullscreenContainer();
+	const portal = usePopupContainer();
 	const { common } = useStrings();
 	const container = useRef(null);
 	const viewport = useRef(null);
@@ -44,9 +44,9 @@ function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer
 			ref: container,
 			className: "contents"
 		}), /* @__PURE__ */ jsxs(Drawer.Portal, {
-			container: contained ? container : fullscreen,
+			container: contained ? container : portal.container,
 			keepMounted,
-			className: contained ? "contents" : void 0,
+			className: contained ? "contents" : portal.className,
 			children: [modal !== false && /* @__PURE__ */ jsx(Drawer.Backdrop, { className: cx(area, "z-(--layer-drawer) bg-black/40 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none") }), /* @__PURE__ */ jsx(Drawer.Viewport, {
 				ref: viewport,
 				className: cx(area, "pointer-events-none z-(--layer-drawer) flex", side === "right" ? "justify-end pl-[max(var(--app-inset-start,0px),2.5rem)]" : "justify-start pl-(--app-inset-start,0px) pr-10"),

package/dist/components/EmptyState.d.ts

@@ -1,16 +1,24 @@
 import type { ReactNode } from 'react';
+/** `panel` frames it in a card, standing in for a whole page or list; `plain`
+ *  gives it the same room with no frame, for a list or page body that holds
+ *  nothing; `dashed` draws a dashed frame, for a place to add or drop the
+ *  first item; `bare` is small, inside something that already frames it, such
+ *  as a sidebar, a menu or a dialog. */
+export type EmptyStateVariant = 'panel' | 'plain' | 'dashed' | 'bare';
 export interface EmptyStateProps {
     title: ReactNode;
     description?: ReactNode;
     /** What to do about it, such as a create button. */
     action?: ReactNode;
+    /** A glyph for what is missing, drawn bare and faded above the title. */
     icon?: ReactNode;
-    /** `panel` stands in for a whole page or list; `bare` sits inside something
-     *  that already frames it, such as a sidebar, a menu or a dialog. */
-    variant?: 'panel' | 'bare' | undefined;
+    variant?: EmptyStateVariant | undefined;
+    /** Makes the title a heading at this level, for an empty state that stands
+     *  in for a section's content; a paragraph otherwise. */
+    headingLevel?: 2 | 3 | 4 | undefined;
     className?: string | undefined;
     testId?: string | undefined;
 }
 /** What shows where there is nothing yet, or nothing matches: what's missing,
  *  and what to do about it. */
-export declare function EmptyState({ title, description, action, icon, variant, className, testId, }: EmptyStateProps): import("react").JSX.Element;
+export declare function EmptyState({ title, description, action, icon, variant, headingLevel, className, testId, }: EmptyStateProps): import("react").JSX.Element;