@parallelworks/ui 0.88.1 → 0.89.0

package/dist/ai/components/ChatInput.js

@@ -269,6 +269,8 @@ function ChatInput({ onSend, disabled = false, placeholder, conversationId, onEd
 										placeholder: effectivePlaceholder,
 										"aria-label": inputLabel ?? effectivePlaceholder,
 										disabled,
+										autoComplete: "off",
+										"data-1p-ignore": true,
 										rows: 1,
 										className: cx("theme-text block w-full resize-none overflow-hidden", "bg-transparent border-0 px-4", toolbar ? "pt-3.5 pb-1" : "pt-3 pb-1", "placeholder:text-(--theme-placeholder)", "focus:outline-none focus:ring-0", "disabled:opacity-50 disabled:cursor-not-allowed", "text-[1rem] leading-relaxed")
 									})

package/dist/components/Combobox.js

@@ -642,10 +642,14 @@ function VirtualList({ ref, statusGroups, query, tall, renderItem }) {
 		match
 	]);
 	const scroller = useRef(null);
+	const scrolledByHand = useRef(false);
+	useEffect(() => {
+		scrolledByHand.current = false;
+	}, [query]);
 	const virtualizer = useVirtualizer({
 		count: rows.length,
 		getScrollElement: () => scroller.current,
-		estimateSize: (i) => rows[i]?.kind === "group" ? 28 : 36,
+		estimateSize: (i) => rows[i]?.kind === "group" ? 28 : 32,
 		overscan: 10,
 		paddingStart: 4,
 		paddingEnd: 4,
@@ -655,6 +659,7 @@ function VirtualList({ ref, statusGroups, query, tall, renderItem }) {
 	useImperativeHandle(ref, () => ({ reveal(index, reason) {
 		const row = index === void 0 ? void 0 : rowOfItem[index];
 		if (row === void 0 || reason === "pointer") return;
+		if (reason !== "keyboard" && scrolledByHand.current) return;
 		queueMicrotask(() => virtualizer.scrollToIndex(row, { align: "auto" }));
 	} }), [rowOfItem, virtualizer]);
 	const scrollerRef = useCallback((element) => {
@@ -666,6 +671,15 @@ function VirtualList({ ref, statusGroups, query, tall, renderItem }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "presentation",
 		ref: scrollerRef,
+		onWheel: () => {
+			scrolledByHand.current = true;
+		},
+		onTouchMove: () => {
+			scrolledByHand.current = true;
+		},
+		onPointerDown: (e) => {
+			if (e.target === e.currentTarget) scrolledByHand.current = true;
+		},
 		className: cx("overflow-auto overscroll-contain px-1", tall ? "max-h-full" : "max-h-[min(15rem,var(--available-height))]"),
 		style: { height: total },
 		children: /* @__PURE__ */ jsx("div", {

package/dist/components/Provider.d.ts

@@ -676,8 +676,11 @@ export interface UIStrings {
         changeValue: (values: string) => string;
         /** Joins the values a chip lists. */
         list: (values: string[]) => string;
-        /** A relative date preset: `today`, `-7d`, `-30d`, `-90d` or `month`; any `-Nd`. */
+        /** A relative date preset: `today`, `month` (so far), `year` (so far), `all` (every date),
+         *  any `-Nd` (the last N days) or any `-Nh` (the last N hours). */
         datePreset: (preset: string) => string;
+        /** At phone width, the toggle that shows a quick filter's other options: "+3 more". */
+        quickMore: (count: number) => string;
         /** The date picker's entry that picks days on a calendar. */
         customDate: string;
         /** Two days a filter spans. */

package/dist/components/Provider.js

@@ -647,9 +647,17 @@ var DEFAULTS = {
 			changeValue: (values) => `Value: ${values}`,
 			list: (values) => values.join(", "),
 			datePreset: (preset) => {
+				const named = {
+					today: "Today",
+					month: "This month",
+					year: "This year",
+					all: "All time"
+				};
 				const days = preset.match(/^-(\d+)d$/)?.[1];
-				return preset === "today" ? "Today" : preset === "month" ? "This month" : days ? `Last ${days} days` : preset;
+				const hours = preset.match(/^-(\d+)h$/)?.[1];
+				return named[preset] ?? (days ? `Last ${days} days` : hours ? `Last ${hours} hours` : preset);
 			},
+			quickMore: (count) => `+${count} more`,
 			customDate: "Custom…",
 			between: (from, to) => `${from} – ${to}`,
 			formatDate: (date, locale) => dayFormat(locale)[date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "short" : "medium"].format(date),

package/dist/components/ToggleGroup.d.ts

@@ -7,6 +7,9 @@ export interface ToggleGroupOption<T extends string> {
     /** How many items the option matches, after the label. */
     count?: number | undefined;
     disabled?: boolean | undefined;
+    /** `warning`: an option asking to be looked at, such as "Needs attention", whose label takes
+     *  the warning tone while it is off. */
+    tone?: 'warning' | undefined;
     testId?: string;
 }
 export interface ToggleGroupProps<T extends string> {
@@ -33,6 +36,11 @@ export interface ToggleGroupProps<T extends string> {
      *  of what the filter lets through. */
     'aria-describedby'?: string | undefined;
     testId?: string;
+    className?: string | undefined;
+    /** Whether an option that's off dims its icon so the pressed ones lead (default true).
+     *  `false` keeps icons whose color means something, such as status lamps, at full strength;
+     *  the fill and check still say which are on. */
+    dimIcons?: boolean | undefined;
 }
 /** Options that narrow a list, such as run statuses or job states, as a row of
  *  toggle buttons that wraps on a narrow screen. Pressing one adds it to the
@@ -44,4 +52,4 @@ export interface ToggleGroupProps<T extends string> {
  *  value, such as a time range, what to group by, or which view of the same
  *  data to show. A filter that may be off, or takes several values, is a
  *  `ToggleGroup`. */
-export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;
+export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, className, dimIcons, }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/ToggleGroup.js

@@ -18,7 +18,7 @@ var ALL = "\0all";
 *  value, such as a time range, what to group by, or which view of the same
 *  data to show. A filter that may be off, or takes several values, is a
 *  `ToggleGroup`. */
-function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
+function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId, className, dimIcons = true }) {
 	const strings = useStrings();
 	const allCount = typeof all === "object" ? all.count : void 0;
 	const pressed = all && value.length === 0 ? [ALL] : value;
@@ -26,7 +26,7 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 		"aria-label": label,
 		"aria-describedby": describedBy,
 		"data-testid": testId,
-		className: "flex flex-wrap items-center gap-1",
+		className: cx("flex flex-wrap items-center gap-1", className),
 		multiple,
 		disabled,
 		value: pressed,
@@ -42,7 +42,8 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 				value: ALL,
 				label: allLabel ?? strings.common.all,
 				count: allCount,
-				size
+				size,
+				dimIcon: dimIcons
 			}),
 			all && options.length > 0 && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -50,12 +51,13 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 			}),
 			options.map((option) => /* @__PURE__ */ jsx(Chip, {
 				...option,
-				size
+				size,
+				dimIcon: dimIcons
 			}, option.value))
 		]
 	});
 }
-function Chip({ value, label, icon, count, disabled, testId, size }) {
+function Chip({ value, label, icon, count, disabled, tone, testId, size, dimIcon }) {
 	const locale = useLocale();
 	return /* @__PURE__ */ jsxs(Toggle, {
 		value,
@@ -64,10 +66,10 @@ function Chip({ value, label, icon, count, disabled, testId, size }) {
 		className: cx(buttonClasses({
 			variant: "outline",
 			size
-		}), "group focus-visible:-outline-offset-2 aria-pressed:bg-(--theme-accent-subtle)"),
+		}), "group focus-visible:-outline-offset-2 aria-pressed:bg-(--theme-accent-subtle)", tone === "warning" && "not-aria-pressed:text-(--theme-warning-text)"),
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
-				className: "inline-flex shrink-0 transition-opacity group-not-aria-pressed:opacity-55",
+				className: cx("inline-flex shrink-0 transition-opacity", dimIcon && "group-not-aria-pressed:opacity-55"),
 				children: icon
 			}),
 			label,

package/dist/components/chart.d.ts

@@ -58,13 +58,19 @@ export declare function ChartLegendList({ items, highlighted, onHighlight, shape
 export interface ChartTooltipItem {
     key: string;
     name: ReactNode;
+    /** Detail under the name and value, such as what a ratio was measured from, in muted text.
+     *  It wraps onto as many lines as it needs and is never cut. */
+    detail?: ReactNode;
     value: number;
     color: string;
 }
+/** How a reading lists its series: in the order given, which is the legend's, or largest
+ *  first. */
+export type ChartReadingOrder = 'series' | 'value';
 /** What a chart's tooltip shows for a point: its label, then each series' swatch, name and
- *  value, largest first, the series in focus in bold, and a total when there is more than one.
- *  A charting library's tooltip renders it as its content. */
-export declare function ChartTooltipContent({ label, items, formatValue, total, highlighted, hideZero, sort, className, style, }: {
+ *  value in the legend's order, zeros too, the series in focus in bold, and a total when there
+ *  is more than one. A charting library's tooltip renders it as its content. */
+export declare function ChartTooltipContent({ label, items, formatValue, total, highlighted, hideZero, order, sort, className, style, }: {
     label?: ReactNode;
     items: readonly ChartTooltipItem[];
     /** Formats each value and the total, such as a currency; numbers in the host's locale
@@ -73,9 +79,12 @@ export declare function ChartTooltipContent({ label, items, formatValue, total,
     /** Adds a total row; on by default when more than one series shows. */
     total?: boolean | undefined;
     highlighted?: string | null | undefined;
-    /** Leaves out series whose value is zero; on by default. */
+    /** Leaves out series whose value is zero; off by default, since a zero is a reading too. */
     hideZero?: boolean | undefined;
-    /** Lists the largest value first; on by default. */
+    /** `series` (the default) keeps the order of `items`, which is the legend's; `value` lists
+     *  the largest first. */
+    order?: ChartReadingOrder | undefined;
+    /** @deprecated Use `order="value"`. */
     sort?: boolean | undefined;
     className?: string | undefined;
     /** Places it; `ChartTooltipBeside` places it beside a crosshair. */
@@ -138,12 +147,18 @@ export interface ChartReading {
     /** Adds the total; on by default when there is more than one series. */
     total?: boolean | undefined;
     highlighted?: string | null | undefined;
+    /** `series` (the default) lists the series in the order of `items`, the legend's; `value`
+     *  lists the largest first. The tooltip and the readout both follow it. */
+    order?: ChartReadingOrder | undefined;
+    /** Leaves out series whose value is zero; off by default, since a zero is a reading too. */
+    hideZero?: boolean | undefined;
 }
 /** A point's reading docked above a chart's plot, for a chart too narrow for a tooltip beside
  *  its crosshair: the label and total on one line, then each series' swatch, name and value,
- *  in two columns as wide as their content when they fit, else one. Every series keeps its place and its row, zero or not, so the readout keeps
- *  its height and order as the reading changes. */
-export declare function ChartReadout({ label, items, formatValue, total, highlighted, className, }: ChartReading & {
+ *  in two columns as wide as their content when everything fits at full length, else one.
+ *  By default every series keeps its place and its row, zero or not, so the readout keeps its
+ *  height and order as the reading changes. */
+export declare function ChartReadout({ label, items, formatValue, total, highlighted, order, hideZero, className, }: ChartReading & {
     className?: string | undefined;
 }): import("react").JSX.Element;
 /** A chart's plot with its reading, placed for its width: on a wide chart a tooltip beside the

package/dist/components/chart.js

@@ -124,16 +124,30 @@ function ChartLegendList({ items, highlighted, onHighlight, shape, className })
 		})
 	});
 }
+var SWATCH_ON_LINE = "mt-[3px]";
+/** A series' detail, on the lines under its name and value, in muted text: it wraps onto as
+*  many lines as it needs and is never cut. */
+function SeriesDetail({ item, className }) {
+	if (item.detail == null || item.detail === "") return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("col-start-2 col-end-[-1] font-normal break-words text-(--theme-muted-text-color)", className),
+		children: item.detail
+	});
+}
+/** A reading's rows: zeros left out when asked, and largest first when asked. */
+function readingRows(items, order, hideZero) {
+	const rows = hideZero ? items.filter((item) => item.value !== 0) : [...items];
+	return order === "value" ? rows.sort((a, b) => b.value - a.value) : rows;
+}
 /** What a chart's tooltip shows for a point: its label, then each series' swatch, name and
-*  value, largest first, the series in focus in bold, and a total when there is more than one.
-*  A charting library's tooltip renders it as its content. */
-function ChartTooltipContent({ label, items, formatValue, total, highlighted, hideZero = true, sort = true, className, style }) {
+*  value in the legend's order, zeros too, the series in focus in bold, and a total when there
+*  is more than one. A charting library's tooltip renders it as its content. */
+function ChartTooltipContent({ label, items, formatValue, total, highlighted, hideZero = false, order, sort, className, style }) {
 	const { chart: t } = useStrings();
 	const locale = useLocale();
 	const number = useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
 	const format = formatValue ?? ((n) => number.format(n));
-	let rows = hideZero ? items.filter((item) => item.value !== 0) : [...items];
-	if (sort) rows = [...rows].sort((a, b) => b.value - a.value);
+	const rows = readingRows(items, order ?? (sort ? "value" : "series"), hideZero);
 	const sum = rows.reduce((acc, item) => acc + item.value, 0);
 	const showTotal = total ?? rows.length > 1;
 	return /* @__PURE__ */ jsxs("div", {
@@ -147,16 +161,23 @@ function ChartTooltipContent({ label, items, formatValue, total, highlighted, hi
 			/* @__PURE__ */ jsx("ul", {
 				className: "m-0 list-none space-y-1 p-0",
 				children: rows.map((item) => /* @__PURE__ */ jsxs("li", {
-					className: cx("flex items-center gap-2", highlighted === item.key ? "font-semibold" : highlighted != null && "text-(--theme-muted-text-color)"),
+					className: cx("grid grid-cols-[auto_minmax(0,1fr)_auto] items-start gap-x-2", highlighted === item.key ? "font-semibold" : highlighted != null && "text-(--theme-muted-text-color)"),
 					children: [
-						/* @__PURE__ */ jsx(SeriesSwatch, { color: item.color }),
+						/* @__PURE__ */ jsx(SeriesSwatch, {
+							color: item.color,
+							className: SWATCH_ON_LINE
+						}),
 						/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 flex-1 truncate",
+							className: "truncate",
 							children: item.name
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "ml-2 tabular-nums",
 							children: format(item.value)
+						}),
+						/* @__PURE__ */ jsx(SeriesDetail, {
+							item,
+							className: "max-w-64"
 						})
 					]
 				}, item.key))
@@ -248,35 +269,64 @@ function ChartTooltipBeside({ x, top = 0, gap = 12, className, children }) {
 	});
 }
 var TWO_COLUMNS = "repeat(2, auto minmax(0, max-content) auto)";
-var MEASURE_TWO = "repeat(2, max-content max-content max-content)";
-var ONE_COLUMN = "auto minmax(0, max-content) auto";
+/** The width an element's content needs, every line of it at full length: the widest of its
+*  own and its descendants' scroll widths, since a truncated line hides what overflows it. */
+function fullWidth(el) {
+	if (!el) return 0;
+	let widest = el.scrollWidth;
+	for (const child of el.querySelectorAll("*")) widest = Math.max(widest, child.scrollWidth);
+	return widest;
+}
+var COLUMN_SPACE = 8;
+var ONE_COLUMN = "auto minmax(0, max-content) auto 1fr";
 /** A point's reading docked above a chart's plot, for a chart too narrow for a tooltip beside
 *  its crosshair: the label and total on one line, then each series' swatch, name and value,
-*  in two columns as wide as their content when they fit, else one. Every series keeps its place and its row, zero or not, so the readout keeps
-*  its height and order as the reading changes. */
-function ChartReadout({ label, items, formatValue, total, highlighted, className }) {
+*  in two columns as wide as their content when everything fits at full length, else one.
+*  By default every series keeps its place and its row, zero or not, so the readout keeps its
+*  height and order as the reading changes. */
+function ChartReadout({ label, items, formatValue, total, highlighted, order = "series", hideZero = false, className }) {
 	const { chart: t } = useStrings();
 	const locale = useLocale();
 	const number = useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }), [locale]);
 	const format = formatValue ?? ((n) => number.format(n));
-	const sum = items.reduce((acc, item) => acc + item.value, 0);
-	const showTotal = total ?? items.length > 1;
+	const rows = readingRows(items, order, hideZero);
+	const sum = rows.reduce((acc, item) => acc + item.value, 0);
+	const showTotal = total ?? rows.length > 1;
 	const list = useRef(null);
 	const [columns, setColumns] = useState(2);
 	useLayoutEffect(() => {
 		const ul = list.current;
 		if (!ul) return;
 		const choose = () => {
-			const shown = ul.style.gridTemplateColumns;
-			ul.style.gridTemplateColumns = MEASURE_TWO;
-			const two = items.length > 1 && ul.scrollWidth <= ul.clientWidth;
-			ul.style.gridTemplateColumns = shown;
-			setColumns(two ? 2 : 1);
+			const cols = [0, 1].map(() => ({
+				swatch: 0,
+				name: 0,
+				value: 0
+			}));
+			[...ul.children].forEach((li, i) => {
+				const [swatch, name, value] = [...li.children];
+				const col = cols[i % 2];
+				col.swatch = Math.max(col.swatch, swatch?.offsetWidth ?? 0);
+				col.name = Math.max(col.name, fullWidth(name));
+				col.value = Math.max(col.value, fullWidth(value));
+			});
+			const gap = Number.parseFloat(getComputedStyle(ul).columnGap) || 0;
+			const need = cols.reduce((sum, c) => sum + c.swatch + c.name + c.value, 0) + 5 * gap + COLUMN_SPACE;
+			const detailed = rows.some((item) => item.detail != null && item.detail !== "");
+			setColumns(rows.length > 1 && !detailed && need <= ul.clientWidth ? 2 : 1);
 		};
 		choose();
+		let live = true;
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.ready.then(() => live && choose());
+		fonts?.addEventListener?.("loadingdone", choose);
 		const observer = new ResizeObserver(choose);
 		observer.observe(ul);
-		return () => observer.disconnect();
+		return () => {
+			live = false;
+			fonts?.removeEventListener?.("loadingdone", choose);
+			observer.disconnect();
+		};
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-chart-readout": "",
@@ -302,19 +352,26 @@ function ChartReadout({ label, items, formatValue, total, highlighted, className
 			})]
 		}), /* @__PURE__ */ jsx("ul", {
 			ref: list,
-			className: "m-0 grid list-none items-center justify-start gap-x-1.5 gap-y-0.5 p-0",
+			className: "m-0 grid list-none items-start justify-start gap-x-1.5 gap-y-0.5 p-0",
 			style: { gridTemplateColumns: columns === 2 ? TWO_COLUMNS : ONE_COLUMN },
-			children: items.map((item, i) => /* @__PURE__ */ jsxs("li", {
+			children: rows.map((item, i) => /* @__PURE__ */ jsxs("li", {
 				className: cx("contents", highlighted === item.key ? "font-semibold" : highlighted != null && "text-(--theme-muted-text-color)"),
 				children: [
-					/* @__PURE__ */ jsx(SeriesSwatch, { color: item.color }),
+					/* @__PURE__ */ jsx(SeriesSwatch, {
+						color: item.color,
+						className: cx(SWATCH_ON_LINE, columns === 1 && "col-start-1")
+					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 truncate",
+						className: "truncate",
 						children: item.name
 					}),
 					/* @__PURE__ */ jsx("span", {
 						className: cx("text-end tabular-nums", columns === 2 && i % 2 === 0 && "me-2"),
 						children: format(item.value)
+					}),
+					/* @__PURE__ */ jsx(SeriesDetail, {
+						item,
+						className: "[contain:inline-size]"
 					})
 				]
 			}, item.key))

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { ContextMenuProvider, type MenuCloseTrigger, type MenuOpener, type OpenM
 export { CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, } from './components/CopyButton.js';
 export { CreateModal, CreateModalSelect, CreateModalSwitch, } from './components/CreateModal.js';
 export { categoryClasses, categoryOf } from './components/category.js';
-export { type ChartLegendItem, ChartLegendList, type ChartReading, ChartReadout, ChartTooltipBeside, ChartTooltipContent, ChartTooltipFrame, type ChartTooltipItem, type ChartTooltipPlacement, chartTooltipPlacement, foldSeries, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, type SeriesSwatchShape, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight, } from './components/chart.js';
+export { type ChartLegendItem, ChartLegendList, type ChartReading, type ChartReadingOrder, ChartReadout, ChartTooltipBeside, ChartTooltipContent, ChartTooltipFrame, type ChartTooltipItem, type ChartTooltipPlacement, chartTooltipPlacement, foldSeries, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, type SeriesSwatchShape, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight, } from './components/chart.js';
 export { Calendar, type CalendarProps, DatePicker, type DatePickerProps, } from './components/DatePicker.js';
 export { DescriptionListGroup, DescriptionListItem, type DescriptionListItemProps, type DescriptionListProps, type DescriptionListSize, type DescriptionListVariant, default as DescriptionList, } from './components/DescriptionList.js';
 export { collapsePanelClassName, Disclosure, DisclosurePanel, type DisclosureProps, } from './components/Disclosure.js';

package/dist/list/ListFilterBar.d.ts

@@ -37,6 +37,10 @@ export interface ListFilterBarProps {
 /** The chips that say what narrows a list, under its toolbar: one per filter, each editable in
  *  place, then "+ Filter" and Clear (or Reset, where the page has default filters). It shows
  *  only while a filter is on or a field is required. At phone width it stops at two lines and
- *  a "+n filters" chip opens the rest in a sheet. */
-export declare function ListFilterBar({ filters, trailing, label, className }: ListFilterBarProps): import("react").JSX.Element | null;
+ *  a "+n filters" chip opens the rest in a sheet.
+ *
+ *  The list's quick filters show above the chips as toggles, always, setting the same filters
+ *  the chips edit. At phone width each keeps to one line, and "+n more" opens the rest in the
+ *  same sheet. */
+export declare function ListFilterBar({ filters, trailing, label, className }: ListFilterBarProps): false | import("react").JSX.Element | null;
 export {};