@parallelworks/ui 0.87.1 → 0.88.1

package/dist/components/chart.d.ts

@@ -84,29 +84,44 @@ export declare function ChartTooltipContent({ label, items, formatValue, total,
 export interface ChartTooltipPlacement {
     /** The tooltip's left edge. */
     left: number;
-    side: 'left' | 'right';
-    /** A width to hold it to when neither side has room for all of it, its names truncating. */
+    /** The tooltip's top edge: `top` beside the crosshair, or above the plot when it goes there. */
+    top: number;
+    /** Beside the crosshair to its left or right, or above the plot when neither side has room. */
+    side: 'left' | 'right' | 'above';
+    /** A width to hold it to, its names truncating, when its side has room for less than all of
+     *  it. */
     maxWidth: number | null;
 }
-/** Where a chart's tooltip goes beside a crosshair at `x`, so it never covers the column under
- *  the pointer: `gap` to the `prefer` side, or the other when it doesn't fit between `x` and
- *  that edge, or held to the wider side when neither fits. `start` and `end` bound it, in the
- *  same coordinates as `x`, such as the chart's box or the viewport. A charting library's
- *  tooltip takes `left` as its position. */
-export declare function chartTooltipPlacement({ x, width, start, end, gap, prefer, }: {
+/** Where a chart's tooltip goes so it never covers the point being read: `gap` beside the
+ *  crosshair at `x`, on the side with more room, so it flips sides as the crosshair passes the
+ *  middle, and held narrower when that side is short, its names truncating.
+ *  Only when that side is narrower still does it go above the plot, clear of every point,
+ *  where the chart must leave it room. `start` and `end`
+ *  bound it in the same coordinates as `x`, such as the chart's own box, so it stays inside
+ *  the card, and `top` is the plot's top. A charting library's tooltip takes `left` and `top`
+ *  as its position. */
+export declare function chartTooltipPlacement({ x, width, height, start, end, top, gap, minWidth, prefer, }: {
     x: number;
     width: number;
+    /** The tooltip's height, for placing it above the plot. */
+    height?: number | undefined;
     start: number;
     end: number;
+    top?: number | undefined;
     gap?: number | undefined;
+    /** The narrowest it is held to beside the crosshair before it goes above instead. */
+    minWidth?: number | undefined;
+    /** The side it takes when both have the same room, such as the left in a right-to-left
+     *  layout. */
     prefer?: 'left' | 'right' | undefined;
 }): ChartTooltipPlacement;
 /** Holds a chart's tooltip beside its crosshair, inside a positioned box around the plot: `x`
- *  is the crosshair in that box, and the tooltip sits `top` from its top, to the crosshair's
- *  inline end, or its start where the box has no room. When neither side of the box has room,
- *  as on a phone, it may reach past the box to the viewport's edge, and is held narrower when
- *  even that is too small. It never covers the hovered column or the pointer on it. Nothing
- *  shows while `x` is null. */
+ *  is the crosshair in that box, and the tooltip sits `top` from its top on the side with more
+ *  room, flipping as the crosshair passes the middle, held narrower and tighter when that side
+ *  is short, and above the plot only when it is shorter still. It stays inside the box's width
+ *  and never covers the point being read or the pointer on it. Nothing shows while `x` is null.
+ *  On a narrow chart, such as on a phone, `ChartTooltipFrame` docks the reading in a readout
+ *  above the plot instead. */
 export declare function ChartTooltipBeside({ x, top, gap, className, children, }: {
     x: number | null;
     top?: number | undefined;
@@ -114,3 +129,36 @@ export declare function ChartTooltipBeside({ x, top, gap, className, children, }
     className?: string | undefined;
     children: ReactNode;
 }): import("react").JSX.Element | null;
+/** A point's reading: what a chart's tooltip or readout shows for it. */
+export interface ChartReading {
+    label?: ReactNode;
+    items: readonly ChartTooltipItem[];
+    /** Formats each value and the total; numbers in the host's locale by default. */
+    formatValue?: ((n: number) => string) | undefined;
+    /** Adds the total; on by default when there is more than one series. */
+    total?: boolean | undefined;
+    highlighted?: string | null | 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 & {
+    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
+ *  crosshair at `x` while a point is hovered, and under 28rem, as on a phone, a readout docked
+ *  above the plot that never covers it or its legend, showing `rest`, such as the latest point,
+ *  while none is. `children` is the plot, and `x` the crosshair in it, or null. The app positions
+ *  nothing: the frame measures itself through a container query. */
+export declare function ChartTooltipFrame({ x, reading, rest, top, gap, className, children, }: {
+    x: number | null;
+    /** The hovered point's reading, or null while none is. */
+    reading: ChartReading | null;
+    /** What the readout shows while no point is hovered, so it keeps its place. */
+    rest: ChartReading;
+    top?: number | undefined;
+    gap?: number | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/chart.js

@@ -1,4 +1,5 @@
 import { cx } from "../cx.js";
+import { surfaceClassName } from "./floating.js";
 import { useLocale, useStrings } from "./Provider.js";
 import { CATEGORY_CLASSES } from "./category.js";
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -136,7 +137,7 @@ function ChartTooltipContent({ label, items, formatValue, total, highlighted, hi
 	const sum = rows.reduce((acc, item) => acc + item.value, 0);
 	const showTotal = total ?? rows.length > 1;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("min-w-[var(--chart-tooltip-min,10rem)] rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) p-3 text-xs text-(--theme-app) shadow-(--theme-shadow-lg)", className),
+		className: cx("relative isolate z-10 min-w-[var(--chart-tooltip-min,10rem)] p-(--chart-tooltip-pad,0.75rem) text-xs", surfaceClassName, className),
 		style,
 		children: [
 			label != null && label !== "" && /* @__PURE__ */ jsx("div", {
@@ -170,37 +171,46 @@ function ChartTooltipContent({ label, items, formatValue, total, highlighted, hi
 		]
 	});
 }
-/** Where a chart's tooltip goes beside a crosshair at `x`, so it never covers the column under
-*  the pointer: `gap` to the `prefer` side, or the other when it doesn't fit between `x` and
-*  that edge, or held to the wider side when neither fits. `start` and `end` bound it, in the
-*  same coordinates as `x`, such as the chart's box or the viewport. A charting library's
-*  tooltip takes `left` as its position. */
-function chartTooltipPlacement({ x, width, start, end, gap = 12, prefer = "right" }) {
+/** Where a chart's tooltip goes so it never covers the point being read: `gap` beside the
+*  crosshair at `x`, on the side with more room, so it flips sides as the crosshair passes the
+*  middle, and held narrower when that side is short, its names truncating.
+*  Only when that side is narrower still does it go above the plot, clear of every point,
+*  where the chart must leave it room. `start` and `end`
+*  bound it in the same coordinates as `x`, such as the chart's own box, so it stays inside
+*  the card, and `top` is the plot's top. A charting library's tooltip takes `left` and `top`
+*  as its position. */
+function chartTooltipPlacement({ x, width, height = 0, start, end, top = 0, gap = 12, minWidth = 96, prefer = "right" }) {
 	const room = {
 		left: x - gap - start,
 		right: end - x - gap
 	};
-	let side = (prefer === "right" ? ["right", "left"] : ["left", "right"]).find((s) => width <= room[s]);
-	let maxWidth = null;
-	if (side === void 0) {
-		side = room.right >= room.left ? "right" : "left";
-		maxWidth = Math.max(0, room[side]);
+	const side = room.left === room.right ? prefer : room.right > room.left ? "right" : "left";
+	if (room[side] >= Math.min(width, minWidth)) {
+		const maxWidth = width <= room[side] ? null : room[side];
+		const shown = maxWidth ?? width;
+		return {
+			left: side === "right" ? x + gap : x - gap - shown,
+			top,
+			side,
+			maxWidth
+		};
 	}
-	const shown = maxWidth ?? width;
+	const span = Math.max(0, end - start);
+	const shown = Math.min(width, span);
 	return {
-		left: side === "right" ? x + gap : x - gap - shown,
-		side,
-		maxWidth
+		left: Math.min(Math.max(x - shown / 2, start), end - shown),
+		top: top - height - gap,
+		side: "above",
+		maxWidth: width > span ? span : null
 	};
 }
-/** Keeps a tooltip clear of the viewport's edge by this much. */
-var VIEWPORT_MARGIN = 8;
 /** Holds a chart's tooltip beside its crosshair, inside a positioned box around the plot: `x`
-*  is the crosshair in that box, and the tooltip sits `top` from its top, to the crosshair's
-*  inline end, or its start where the box has no room. When neither side of the box has room,
-*  as on a phone, it may reach past the box to the viewport's edge, and is held narrower when
-*  even that is too small. It never covers the hovered column or the pointer on it. Nothing
-*  shows while `x` is null. */
+*  is the crosshair in that box, and the tooltip sits `top` from its top on the side with more
+*  room, flipping as the crosshair passes the middle, held narrower and tighter when that side
+*  is short, and above the plot only when it is shorter still. It stays inside the box's width
+*  and never covers the point being read or the pointer on it. Nothing shows while `x` is null.
+*  On a narrow chart, such as on a phone, `ChartTooltipFrame` docks the reading in a readout
+*  above the plot instead. */
 function ChartTooltipBeside({ x, top = 0, gap = 12, className, children }) {
 	const ref = useRef(null);
 	useLayoutEffect(() => {
@@ -208,33 +218,132 @@ function ChartTooltipBeside({ x, top = 0, gap = 12, className, children }) {
 		if (!el || x === null) return;
 		el.style.maxWidth = "";
 		el.style.removeProperty("--chart-tooltip-min");
+		el.style.removeProperty("--chart-tooltip-pad");
 		const width = el.offsetWidth;
-		const box = el.offsetParent;
-		const origin = box ? box.getBoundingClientRect().left + box.clientLeft : 0;
-		const view = document.documentElement.clientWidth || window.innerWidth;
-		const place = (start, end) => chartTooltipPlacement({
+		const end = el.offsetParent?.clientWidth || document.documentElement.clientWidth || window.innerWidth;
+		const placement = chartTooltipPlacement({
 			x,
 			width,
-			start,
+			height: el.offsetHeight,
+			start: 0,
 			end,
+			top,
 			gap,
 			prefer: getComputedStyle(el).direction === "rtl" ? "left" : "right"
 		});
-		let placement = box ? place(0, box.clientWidth) : null;
-		if (placement === null || placement.maxWidth !== null) placement = place(VIEWPORT_MARGIN - origin, view - VIEWPORT_MARGIN - origin);
 		el.style.left = `${placement.left}px`;
+		el.style.top = `${placement.top}px`;
+		el.dataset["side"] = placement.side;
 		if (placement.maxWidth !== null) {
 			el.style.maxWidth = `${placement.maxWidth}px`;
 			el.style.setProperty("--chart-tooltip-min", "0px");
+			el.style.setProperty("--chart-tooltip-pad", "0.5rem");
 		}
 	});
 	if (x === null) return null;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: cx("pointer-events-none absolute z-10 w-max", className),
-		style: { top },
 		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";
+/** 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 }) {
+	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 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);
+		};
+		choose();
+		const observer = new ResizeObserver(choose);
+		observer.observe(ul);
+		return () => observer.disconnect();
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-chart-readout": "",
+		className: cx("rounded-lg border border-(--theme-border) bg-(--theme-muted-panel-bg)/50 px-2 py-1.5 text-xs text-(--theme-app)", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-1 flex items-baseline justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate font-semibold",
+				children: label
+			}), showTotal && /* @__PURE__ */ jsxs("span", {
+				className: "shrink-0 tabular-nums",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-(--theme-muted-text-color)",
+						children: t.total
+					}),
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: format(sum)
+					})
+				]
+			})]
+		}), /* @__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",
+			style: { gridTemplateColumns: columns === 2 ? TWO_COLUMNS : ONE_COLUMN },
+			children: items.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("span", {
+						className: "min-w-0 truncate",
+						children: item.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cx("text-end tabular-nums", columns === 2 && i % 2 === 0 && "me-2"),
+						children: format(item.value)
+					})
+				]
+			}, item.key))
+		})]
+	});
+}
+/** A chart's plot with its reading, placed for its width: on a wide chart a tooltip beside the
+*  crosshair at `x` while a point is hovered, and under 28rem, as on a phone, a readout docked
+*  above the plot that never covers it or its legend, showing `rest`, such as the latest point,
+*  while none is. `children` is the plot, and `x` the crosshair in it, or null. The app positions
+*  nothing: the frame measures itself through a container query. */
+function ChartTooltipFrame({ x, reading, rest, top = 0, gap = 12, className, children }) {
+	const shown = x !== null && reading ? reading : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("@container/chart", className),
+		children: [/* @__PURE__ */ jsx(ChartReadout, {
+			...shown ?? rest,
+			className: "mb-2 @min-[28rem]/chart:hidden"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [children, shown && /* @__PURE__ */ jsx(ChartTooltipBeside, {
+				x,
+				top,
+				gap,
+				className: "hidden @min-[28rem]/chart:block",
+				children: /* @__PURE__ */ jsx(ChartTooltipContent, { ...shown })
+			})]
+		})]
+	});
+}
 //#endregion
-export { ChartLegendList, ChartTooltipBeside, ChartTooltipContent, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, chartTooltipPlacement, foldSeries, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight };
+export { ChartLegendList, ChartReadout, ChartTooltipBeside, ChartTooltipContent, ChartTooltipFrame, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, chartTooltipPlacement, foldSeries, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight };

package/dist/components/floating.d.ts

@@ -1,7 +1,10 @@
 /** Above dialogs, toasts and sticky chrome; hidden while its anchor is scrolled out of view. */
 export declare const positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
+/** The opaque surface a popover stands on, and its shadow: what is under it never shows
+ *  through, such as a chart's marks under its tooltip. */
+export declare const surfaceClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-(--theme-shadow-lg)";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
-export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
+export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-(--theme-shadow-lg) text-sm outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
 /** A panel's rows inset by the same gutter on every side, so a highlighted first or last row
  *  keeps the margin it has at its sides rather than leaving a strip against the border. */
 export declare const panelListClassName = "p-1";

package/dist/components/floating.js

@@ -2,8 +2,11 @@
 /** Above dialogs, toasts and sticky chrome; hidden while its anchor is scrolled out of view. */
 var positionerClassName = "z-(--layer-popover) outline-none data-anchor-hidden:invisible";
 var enterExit = "origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100";
+/** The opaque surface a popover stands on, and its shadow: what is under it never shows
+*  through, such as a chart's marks under its tooltip. */
+var surfaceClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-(--theme-shadow-lg)";
 /** A panel of choices: a menu, a select's list, a combobox's list. */
-var panelClassName = `rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none ${enterExit}`;
+var panelClassName = `${surfaceClassName} text-sm outline-none ${enterExit}`;
 /** A row in a panel, inside its `panelListClassName` gutter; its text lines up with a field's. */
 var panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-app) data-disabled:cursor-not-allowed data-disabled:opacity-50";
 /** A tooltip's, infotip's or popover tip's surface: a small panel in the page's colors, so a
@@ -40,4 +43,4 @@ function toPositionerAnchor(at) {
 	};
 }
 //#endregion
-export { cardClassName, panelClassName, panelItemClassName, positionerClassName, tipClassName, toPositionerAnchor };
+export { cardClassName, panelClassName, panelItemClassName, positionerClassName, surfaceClassName, tipClassName, toPositionerAnchor };

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, ChartTooltipBeside, ChartTooltipContent, 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, 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/index.js

@@ -45,7 +45,7 @@ import { ConfirmModal, useConfirm } from "./components/ConfirmModal.js";
 import { Disclosure, DisclosurePanel, collapsePanelClassName } from "./components/Disclosure.js";
 import { Switch } from "./components/Switch.js";
 import { CreateModal, CreateModalSelect, CreateModalSwitch } from "./components/CreateModal.js";
-import { ChartLegendList, ChartTooltipBeside, ChartTooltipContent, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, chartTooltipPlacement, foldSeries, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight } from "./components/chart.js";
+import { ChartLegendList, ChartReadout, ChartTooltipBeside, ChartTooltipContent, ChartTooltipFrame, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, chartTooltipPlacement, foldSeries, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight } from "./components/chart.js";
 import { Calendar, DatePicker } from "./components/DatePicker.js";
 import DescriptionList, { DescriptionListGroup, DescriptionListItem } from "./components/DescriptionList.js";
 import { Drawer } from "./components/Drawer.js";
@@ -84,4 +84,4 @@ import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useClosingValue } from "./components/useClosingValue.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartTooltipBeside, ChartTooltipContent, Checkbox, CheckboxGroup, CodeBlock, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SERIES_LIMIT, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, chartTooltipPlacement, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, foldSeries, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, AvatarGroup, Breadcrumbs, Button, CODE_STYLES, Calendar, Callout, Card, CardHeader, ChartLegendList, ChartReadout, ChartTooltipBeside, ChartTooltipContent, ChartTooltipFrame, Checkbox, CheckboxGroup, CodeBlock, ColorInput, Combobox, ConfirmModal, ContextMenuProvider, CopyButton, CopyCodeBlock, CountBadge, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorPage, ErrorText, ExternalLink, Field, FieldOption, FieldValue, FileButton, HoverCard, IconButton, InfoTip, Input, JND, Kbd, LetterBadge, ListboxGroup, ListboxOption, ListboxPanel, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SERIES_LIMIT, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SelectionCopy, SeriesSwatch, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, StickyBar, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Tag, TagList, Textarea, ThemeEditor, ThemePreview, TitleInput, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, ariaKeyShortcuts, avatarInitials, buttonClasses, categoryClasses, categoryOf, chartTooltipPlacement, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, foldSeries, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatShortcut, formatTimeLeft, generateTheme, isApplePlatform, isDarkColor, isMenuDivider, isMenuGroup, isMenuSubmenu, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, normalizeTags, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, seriesColors, seriesOpacity, seriesSlotColor, shortcutText, statusTextClass, tagClasses, themeStylesheet, toHex, toP3, toast, useApplyTheme, useAvatarColoring, useClock, useCloseMenu, useClosePopover, useClosingValue, useColorMode, useConfirm, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useListboxNavigation, useLocale, useMenuOpenedBy, useNavigation, useOpenMenu, useOptionalWorkflowEngine, usePersistedState, useProblemText, useProvisionCorsRules, useRelativeTime, useRunFile, useSeriesHighlight, useShortcutFormat, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/list/ListPage.js

@@ -17,7 +17,7 @@ var RowActionsContext = createContext({
 	always: false,
 	columnClasses: [],
 	columnStacks: [],
-	lastLocked: false
+	reservesLane: false
 });
 function useRowActions(view) {
 	return useMemo(() => ({
@@ -25,13 +25,14 @@ function useRowActions(view) {
 		always: view?.alwaysShowActions ?? false,
 		columnClasses: view?.columnClasses ?? [],
 		columnStacks: view?.columnStacks ?? [],
-		lastLocked: view?.lastColumnLocked ?? false
+		reservesLane: view?.reservesActionLane ?? view?.lastColumnLocked ?? false
 	}), [
 		view?.showActions,
 		view?.alwaysShowActions,
 		view?.columnClasses,
 		view?.columnStacks,
-		view?.lastColumnLocked
+		view?.lastColumnLocked,
+		view?.reservesActionLane
 	]);
 }
 function ListRowActionsProvider({ view, children }) {
@@ -93,7 +94,7 @@ var STACKED_LINE = "mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 emp
 var isCellElement = (child) => child.type === Table.Item || child.type === "td";
 function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children }) {
 	const { active: menuActive, openMenu: openRowMenu } = useRowMenuActive(openMenu);
-	const { show: showActions, always: alwaysShowActions, columnClasses, columnStacks, lastLocked } = useContext(RowActionsContext);
+	const { show: showActions, always: alwaysShowActions, columnClasses, columnStacks, reservesLane } = useContext(RowActionsContext);
 	const cells = Children.toArray(children);
 	const stacked = cells.flatMap((child, i) => {
 		if (i === 0 || !columnStacks[i] || !isValidElement(child)) return [];
@@ -134,7 +135,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 			children: child
 		}, child.key);
 	});
-	const floating = !alwaysShowActions && !(pinnedActions && pinnedActions.length > 0) && !lastLocked;
+	const floating = !alwaysShowActions && !(pinnedActions && pinnedActions.length > 0) && !reservesLane;
 	const stretch = !!href && !selectionActive;
 	const handleRowClick = (e) => {
 		if (e.target.closest("a,button,input,label")) return;
@@ -348,7 +349,7 @@ function shareWidths(columns, stacks) {
 }
 function headerStyle(col, tiers) {
 	const style = {};
-	if (col.alwaysVisible) style["minWidth"] = 200;
+	if (col.alwaysVisible) style["minWidth"] = `min(200px, 50cqw)`;
 	if (tiers) {
 		style["--share-wide"] = `${tiers.wide}%`;
 		style["--share-medium"] = `${tiers.medium}%`;

package/dist/list/ListTable.d.ts

@@ -28,6 +28,12 @@ export declare const listTableFixedProps: {
 /** True inside a `ListRow` whose name link should take the whole row's
  *  clicks: it navigates, and no selection claims plain clicks. */
 export declare const StretchRowLinkContext: import("react").Context<boolean>;
+/** Makes a link cover its `ListRow` (the row's `<tr>` is its containing block),
+ *  so the whole row is the link: it opens in a new tab, shows its URL and
+ *  reads as a link, where a row click handler could do none of these. Its
+ *  focus ring follows, drawn around the row. A `NameCell` with an `href` does
+ *  this itself; a row whose link is elsewhere, such as a run's number before
+ *  its workflow's name, gives its own link this class and `data-row-link`. */
 export declare const STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)";
 /** The row a `STRETCHED_LINK` covers: its box, with the row's other controls
  *  raised above the link so they keep their own clicks. A checkbox is a
@@ -75,7 +81,8 @@ export declare function ListError({ noun, message, }: {
 export declare function ListSkeleton({ rows }: {
     rows?: number;
 }): import("react").JSX.Element;
-/** Prevents the name column from being crushed under table-auto layout during horizontal overflow. */
+/** Prevents the name column from being crushed under table-auto layout during horizontal
+ *  overflow. In a list under 400px wide, the floor is half the list instead. */
 export declare const NAME_MIN_WIDTH_PX = 200;
 /** Width the trailing actions column reserves for `count` always-visible
  * buttons plus the hover `⋯` trigger. */
@@ -114,6 +121,7 @@ export declare function ListActionsHeader({ view, actionCount, className, }: {
         actionsWidth: number;
         alwaysShowActions?: boolean;
         lastColumnLocked?: boolean | undefined;
+        reservesActionLane?: boolean | undefined;
     };
     actionCount?: number;
     className?: string;

package/dist/list/ListTable.js

@@ -37,6 +37,12 @@ var listTableFixedProps = {
 /** True inside a `ListRow` whose name link should take the whole row's
 *  clicks: it navigates, and no selection claims plain clicks. */
 var StretchRowLinkContext = createContext(false);
+/** Makes a link cover its `ListRow` (the row's `<tr>` is its containing block),
+*  so the whole row is the link: it opens in a new tab, shows its URL and
+*  reads as a link, where a row click handler could do none of these. Its
+*  focus ring follows, drawn around the row. A `NameCell` with an `href` does
+*  this itself; a row whose link is elsewhere, such as a run's number before
+*  its workflow's name, gives its own link this class and `data-row-link`. */
 var STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--theme-link)";
 /** The row a `STRETCHED_LINK` covers: its box, with the row's other controls
 *  raised above the link so they keep their own clicks. A checkbox is a
@@ -160,7 +166,8 @@ function ListSkeleton({ rows = 6 }) {
 		}, key))
 	});
 }
-/** Prevents the name column from being crushed under table-auto layout during horizontal overflow. */
+/** Prevents the name column from being crushed under table-auto layout during horizontal
+*  overflow. In a list under 400px wide, the floor is half the list instead. */
 var NAME_MIN_WIDTH_PX = 200;
 /** Trailing cell geometry: icon-button size + gap + padding, sized to fit exactly its pinned buttons. */
 var ACTION_BUTTON_PX = 24;
@@ -215,7 +222,7 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 	const { common } = useStrings();
 	if (view && !view.showActions) return null;
 	const width = view ? view.actionsWidth : actionsColumnWidth(actionCount);
-	const floating = !!view && !view.alwaysShowActions && !view.lastColumnLocked && view.actionsWidth === actionsColumnWidth(0);
+	const floating = !!view && !view.alwaysShowActions && !(view.reservesActionLane ?? view.lastColumnLocked) && view.actionsWidth === actionsColumnWidth(0);
 	return /* @__PURE__ */ jsx(Table.Header, {
 		caps: false,
 		style: {

package/dist/list/index.d.ts

@@ -2,7 +2,7 @@ export { ActionToolbar, type ToolbarAction, ToolbarButton, type ToolbarItem, } f
 export { type ActiveFilter, applyFilterList, DATE_PRESETS, type DatePreset, dateFilterRange, decodeFilters, encodeFilters, type FilterField, type FilterKind, type FilterOperator, type FilterOption, type FilterRowValue, filterParamKeys, matchFilter, sameFilters, withFilterParams, } from './filterModel.js';
 export { AddFilterMenu, type AddFilterMenuProps, FilterChip, ListFilterBar, type ListFilterBarProps, } from './ListFilterBar.js';
 export { GroupRow, ListColumns, ListPage, type ListPageEmpty, type ListPageProps, ListRow, ListRowActionsProvider, useListNavigate, } from './ListPage.js';
-export { actionsColumnWidth, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
+export { actionsColumnWidth, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, } from './ListTable.js';
 export { ListToolbar, type ListToolbarProps } from './ListToolbar.js';
 export { ListDisplayMenu, ListFilterMenu } from './ListViewControls.js';
 export { ListCount, type ListSearch, ListSearchControl, useListSearch, } from './listSearch.js';

package/dist/list/index.js

@@ -1,7 +1,7 @@
 import { ActionToolbar, ToolbarButton } from "./ActionToolbar.js";
 import { DATE_PRESETS, applyFilterList, dateFilterRange, decodeFilters, encodeFilters, filterParamKeys, matchFilter, sameFilters, withFilterParams } from "./filterModel.js";
 import { AddFilterMenu, FilterChip, ListFilterBar } from "./ListFilterBar.js";
-import { ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
+import { ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
 import { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive } from "./rowMenu.js";
 import { GroupRow, ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
 import { useListFilters } from "./useListFilters.js";
@@ -10,4 +10,4 @@ import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
 import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { ListToolbar } from "./ListToolbar.js";
 import { HoverCardRow, UserHoverCard } from "./UserHoverCard.js";
-export { ActionToolbar, AddFilterMenu, DATE_PRESETS, DEFAULT_ORDER, FAVORITE_ORDER, FilterChip, GroupRow, HoverCardRow, ListActionsHeader, ListCellText, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterBar, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSelectAllHeader, ListSkeleton, ListToolbar, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, applyFilterList, assembleRowMenu, dateFilterRange, decodeFilters, encodeFilters, filterParamKeys, listTableFixedProps, listTableProps, matchFilter, rowContextMenuProps, sameFilters, useCopySubmenu, useListFilters, useListNavigate, useListSearch, useListView, useRowMenuActive, withFilterParams };
+export { ActionToolbar, AddFilterMenu, DATE_PRESETS, DEFAULT_ORDER, FAVORITE_ORDER, FilterChip, GroupRow, HoverCardRow, ListActionsHeader, ListCellText, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterBar, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSelectAllHeader, ListSkeleton, ListToolbar, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, ToolbarButton, UserHoverCard, actionsColumnWidth, applyFilterList, assembleRowMenu, dateFilterRange, decodeFilters, encodeFilters, filterParamKeys, listTableFixedProps, listTableProps, matchFilter, rowContextMenuProps, sameFilters, useCopySubmenu, useListFilters, useListNavigate, useListSearch, useListView, useRowMenuActive, withFilterParams };

package/dist/list/listView.d.ts

@@ -131,6 +131,13 @@ export interface ListViewChrome {
      * row's `⋯` then keeps a lane of its own after it rather than floating over
      * it on hover. */
     lastColumnLocked?: boolean | undefined;
+    /** Whether the row's `⋯` keeps a lane of its own after the last column
+     * rather than floating over its end on hover: the last column is locked, or
+     * it is end-aligned, such as a runtime or a count, whose value sits right
+     * where the `⋯` would and would be hidden while the row is hovered. A text
+     * column's end is usually blank, so the `⋯` floats there and the list keeps
+     * its width. */
+    reservesActionLane?: boolean | undefined;
     /** The list's filters, which `ListPage` shows as a row of chips under its toolbar. */
     filterState?: ListFilters | undefined;
 }

package/dist/list/listView.js

@@ -95,6 +95,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	const columnStacks = useMemo(() => visibleColumns.map(stacks), [visibleColumns]);
 	const last = visibleColumns.at(-1);
 	const lastColumnLocked = visibleColumns.length > 1 && last !== void 0 && !last.alwaysVisible && isLocked(last);
+	const reservesActionLane = lastColumnLocked || visibleColumns.length > 1 && last?.align === "end";
 	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
 	const { add, update, remove } = filterState;
 	const setFacetValues = useCallback((key, values) => {
@@ -190,6 +191,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		columnClasses,
 		columnStacks,
 		lastColumnLocked,
+		reservesActionLane,
 		isVisible,
 		pinnedCount,
 		actionsWidth,