@parallelworks/ui 0.84.0 → 0.84.2

package/dist/components/Loader.d.ts

@@ -14,10 +14,12 @@ export interface LoaderProps {
      *  label: hidden from assistive technology, and in the text's color. */
     decorative?: boolean;
     /** Centers it in the room it stands for, so the page needs no box of its
-     *  own: `screen` the whole window, such as while the app starts; `page` the
-     *  page's scrolling region, such as while a route loads; `section` a pane
-     *  or a card with no height of its own. */
-    fill?: 'screen' | 'page' | 'section' | undefined;
+     *  own: `screen` the whole window, such as while the app starts; `content`
+     *  the app's content area beside its sidebar and under its top bar, however
+     *  the page around it is laid out; `page` the page's scrolling region, such
+     *  as while a route loads; `section` a pane or a card with no height of its
+     *  own. */
+    fill?: 'screen' | 'content' | 'page' | 'section' | undefined;
 }
 /** Something on the way that has no shape to sketch yet. When its shape is
  *  known, such as rows of a list, sketch it with `Skeleton` instead. */

package/dist/components/Loader.js

@@ -1,7 +1,9 @@
 import { cx } from "../cx.js";
 import { RunningIcon } from "../icons.js";
+import { pinnedAbove, scrollContainer } from "./stickyTop.js";
 import { useStrings } from "./Provider.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Loader.tsx
 var RIPPLE_STAGGER_S = .22;
 var LOGO_RINGS = [
@@ -19,6 +21,10 @@ var fillClasses = {
 *  known, such as rows of a list, sketch it with `Skeleton` instead. */
 function Loader({ fill, ...props }) {
 	if (!fill) return /* @__PURE__ */ jsx(LoaderMark, { ...props });
+	if (fill === "content") return /* @__PURE__ */ jsx(ContentArea, { children: /* @__PURE__ */ jsx(LoaderMark, {
+		...props,
+		size: props.size ?? 48
+	}) });
 	return /* @__PURE__ */ jsx("div", {
 		className: fillClasses[fill],
 		children: /* @__PURE__ */ jsx(LoaderMark, {
@@ -68,5 +74,51 @@ function LoaderMark({ size = 48, label, variant = "spinner", inline = false, col
 		})]
 	});
 }
+/** Centers its content in the box of the scrolling region it sits in, which in an app with a
+*  sidebar is its content area, below what that region pins at its top and held to what of it
+*  the window shows; the window, where the document itself scrolls. It lays nothing out around
+*  it and takes no pointer. */
+function ContentArea({ children }) {
+	const anchor = useRef(null);
+	const [box, setBox] = useState(null);
+	useLayoutEffect(() => {
+		const el = anchor.current;
+		if (!el) return;
+		const area = scrollContainer(el);
+		if (area === el.ownerDocument.documentElement) return;
+		const view = el.ownerDocument.defaultView ?? window;
+		const pinned = pinnedAbove(el);
+		const place = () => {
+			const rect = area.getBoundingClientRect();
+			const chrome = Math.max(0, ...pinned.chrome.map((c) => c.getBoundingClientRect().bottom));
+			const top = Math.max(rect.top, chrome, 0);
+			const bottom = Math.min(rect.bottom, view.innerHeight);
+			setBox({
+				top,
+				left: rect.left,
+				width: rect.width,
+				height: Math.max(bottom - top, 0)
+			});
+		};
+		place();
+		view.addEventListener("resize", place);
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(place);
+		observer?.observe(area);
+		for (const chrome of pinned.chrome) observer?.observe(chrome);
+		return () => {
+			view.removeEventListener("resize", place);
+			observer?.disconnect();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		ref: anchor,
+		hidden: true
+	}), /* @__PURE__ */ jsx("div", {
+		"data-loader-area": "",
+		className: "pointer-events-none fixed inset-0 flex items-center justify-center",
+		style: box ?? void 0,
+		children
+	})] });
+}
 //#endregion
 export { Loader };

package/dist/components/RefreshButton.d.ts

@@ -14,8 +14,9 @@ export interface RefreshButtonProps {
     /** A button's look, `ghost` by default; `inline` is text-sized muted text with no box, for
      *  a line of details such as a header's "Updated 2 minutes ago". */
     variant?: ButtonVariant | 'inline' | undefined;
-    /** Only the icon shows, with "Refresh" as its name and tooltip. */
-    iconOnly?: boolean | undefined;
+    /** Only the icon shows, with "Refresh" as its name and tooltip. `phone` shows the label on a
+     *  wider screen and only the icon on a phone, the label still its name for a screen reader. */
+    iconOnly?: boolean | 'phone' | undefined;
     className?: string | undefined;
 }
 /** Fetches again on demand, and says so while it does, out loud too. */

package/dist/components/RefreshButton.js

@@ -7,6 +7,12 @@ import { useRelativeTime } from "./relativeTime.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/RefreshButton.tsx
+var phoneSquares = {
+	xs: "max-sm:w-6 max-sm:px-0",
+	sm: "max-sm:w-7 max-sm:px-0",
+	md: "max-sm:w-8 max-sm:px-0",
+	lg: "max-sm:w-10 max-sm:px-0"
+};
 var inlineClasses = "inline-flex cursor-pointer items-center gap-1 rounded px-1 py-0.5 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus) [&_svg]:size-3";
 /** Fetches again on demand, and says so while it does, out loud too. */
 function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md", variant = "ghost", iconOnly = false, className }) {
@@ -14,6 +20,8 @@ function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md",
 	const [pending, setPending] = useState(false);
 	const busy = refreshing || pending;
 	const ago = useRelativeTime(updatedAt);
+	const phone = iconOnly === "phone";
+	const square = iconOnly === true;
 	const refresh = () => {
 		if (busy) return;
 		const result = onRefresh();
@@ -27,27 +35,30 @@ function RefreshButton({ onRefresh, refreshing = false, updatedAt, size = "md",
 		type: "button",
 		onClick: refresh,
 		"aria-busy": busy,
-		"aria-label": iconOnly ? t.refresh : void 0,
+		"aria-label": square ? t.refresh : void 0,
 		className: cx(variant === "inline" ? inlineClasses : buttonClasses({
 			variant,
 			size,
-			iconOnly
-		}), "group aria-busy:cursor-progress", className),
+			iconOnly: square
+		}), phone && variant !== "inline" && phoneSquares[size], "group aria-busy:cursor-progress", className),
 		children: [/* @__PURE__ */ jsx(RefreshIcon, {
 			"aria-hidden": "true",
 			className: cx("shrink-0 motion-reduce:animate-none motion-reduce:transition-none", busy ? "animate-spin" : "transition-transform duration-300 group-hover:rotate-180")
-		}), !iconOnly && (ago ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
-			className: "sr-only",
-			children: [t.refresh, ". "]
-		}), t.updated(ago)] }) : busy ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: t.refresh
-		}), /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			children: t.refreshing
-		})] }) : t.refresh)]
+		}), !square && /* @__PURE__ */ jsx("span", {
+			className: phone ? "max-sm:sr-only" : void 0,
+			children: ago ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [t.refresh, ". "]
+			}), t.updated(ago)] }) : busy ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t.refresh
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: t.refreshing
+			})] }) : t.refresh
+		})]
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [square ? /* @__PURE__ */ jsx(Tooltip, {
 		content: t.refresh,
 		children: button
 	}) : button, /* @__PURE__ */ jsx("span", {

package/dist/components/Table.d.ts

@@ -5,11 +5,24 @@ export type SortDirection = 'ascending' | 'descending' | 'none';
  *  height, such as a key and value list or a dashboard card's runs; `dense`
  *  sets small type in tight rows, for a panel of figures. */
 export type TableDensity = 'comfortable' | 'compact' | 'dense';
+/** What a list row asks of the cell in a place, through whatever component of the host's renders
+ *  it: its column's classes, content to show after its own, or that it shows stacked, under the
+ *  first cell's, as a line in place of a cell. */
+export interface CellPlacement {
+    className?: string | undefined;
+    after?: React.ReactNode;
+    stacked?: boolean | undefined;
+}
+/** A stacked column's value on the line under a row's name: it flows inline with the others and
+ *  wraps between them, never inside a value, which truncates if it is wider than the line. */
+export declare const STACKED_ITEM = "flex min-w-0 max-w-full items-center whitespace-nowrap [&>*]:min-w-0 [&>*]:truncate";
+/** Set by a list row around each of its cells; a `Table.Item` takes what it asks. */
+export declare const CellPlacementContext: React.Context<CellPlacement | null>;
 interface ItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     /** Lets the text wrap; by default a cell keeps to one line. */
     wrap?: boolean;
 }
-declare function Item({ wrap, children, className, ...tdProps }: ItemProps): React.JSX.Element;
+declare function Item({ wrap, children, className, ...tdProps }: ItemProps): React.JSX.Element | null;
 interface HeaderProps {
     children?: React.ReactNode;
     className?: string | undefined;

package/dist/components/Table.js

@@ -1,7 +1,7 @@
 import { cx } from "../cx.js";
 import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
-import { Loader } from "./Loader.js";
 import { useStickyTop } from "./stickyTop.js";
+import { Loader } from "./Loader.js";
 import React, { createContext, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Table.tsx
@@ -23,12 +23,26 @@ var headerY = {
 	dense: "py-1"
 };
 var cellX = "px-3";
+/** A stacked column's value on the line under a row's name: it flows inline with the others and
+*  wraps between them, never inside a value, which truncates if it is wider than the line. */
+var STACKED_ITEM = "flex min-w-0 max-w-full items-center whitespace-nowrap [&>*]:min-w-0 [&>*]:truncate";
+/** Set by a list row around each of its cells; a `Table.Item` takes what it asks. */
+var CellPlacementContext = createContext(null);
 function Item({ wrap = false, children, className, ...tdProps }) {
 	const density = useContext(DensityContext);
+	const placed = useContext(CellPlacementContext);
+	if (placed?.stacked) return React.Children.toArray(children).length > 0 ? /* @__PURE__ */ jsx("div", {
+		className: STACKED_ITEM,
+		"data-stacked": true,
+		children
+	}) : null;
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
-		className: cx(cellX, cellY[density], wrap ? wrapY[density] : "whitespace-nowrap", className),
-		children
+		className: cx(cellX, cellY[density], wrap ? wrapY[density] : "overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:4px]", className, placed?.className),
+		children: /* @__PURE__ */ jsxs(CellPlacementContext, {
+			value: null,
+			children: [children, placed?.after]
+		})
 	});
 }
 var sortIcons = {
@@ -107,4 +121,4 @@ function Table({ density = "comfortable", columns, caps = true, flush = false, c
 Table.Header = Header;
 Table.Item = Item;
 //#endregion
-export { Table };
+export { CellPlacementContext, STACKED_ITEM, Table };

package/dist/components/Tabs.js

@@ -1,8 +1,8 @@
 import { cx } from "../cx.js";
+import { useStickyTop } from "./stickyTop.js";
 import { Tooltip } from "./Tooltip.js";
 import { AppLink } from "./AppLink.js";
 import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
-import { useStickyTop } from "./stickyTop.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";

package/dist/components/stickyTop.d.ts

@@ -1,6 +1,15 @@
 /** Pins a bar to the top of its scroller, over what scrolls under it.
  *  `useStickyTop` moves it below whatever else is pinned there. */
 export declare const stickyClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
+/** The box a sticky element sticks to: its nearest ancestor that scrolls, or
+ *  the document's when none does. */
+export declare function scrollContainer(el: Element): Element;
+/** What a page pins at the top of `el`'s scroller over it, such as a page header and a toolbar:
+ *  those elements, and how far below the scroller's top their bottom edge sits. */
+export declare function pinnedAbove(el: Element): {
+    chrome: HTMLElement[];
+    bottom: number;
+};
 /**
  * Pins a `sticky` element just below whatever its scroller already pins at
  * the top, such as a page header, a toolbar and a tab row, rather than at

package/dist/components/stickyTop.js

@@ -47,6 +47,15 @@ function pinnedBottom(chrome) {
 	const height = chrome.getBoundingClientRect().height;
 	return height > 0 ? (Number.parseFloat(getComputedStyle(chrome).top) || 0) + height : 0;
 }
+/** What a page pins at the top of `el`'s scroller over it, such as a page header and a toolbar:
+*  those elements, and how far below the scroller's top their bottom edge sits. */
+function pinnedAbove(el) {
+	const { chrome } = chromeAbove(el, scrollContainer(el));
+	return {
+		chrome,
+		bottom: Math.max(0, ...chrome.map(pinnedBottom))
+	};
+}
 /**
 * Pins a `sticky` element just below whatever its scroller already pins at
 * the top, such as a page header, a toolbar and a tab row, rather than at
@@ -95,4 +104,4 @@ function useStickyTop(el, enabled) {
 	}, [el, enabled]);
 }
 //#endregion
-export { stickyClasses, useStickyTop };
+export { pinnedAbove, scrollContainer, stickyClasses, useStickyTop };

package/dist/graph/DependencyGraph.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon, CloseIcon, FileTextIcon, ZoomInIcon, ZoomOutIcon } from "../icons.js";
+import { useStickyTop } from "../components/stickyTop.js";
 import { Loader } from "../components/Loader.js";
 import { useLocale, useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
@@ -10,7 +11,6 @@ import { DisclosurePanel } from "../components/Disclosure.js";
 import { formatDateTime } from "../format.js";
 import { Elapsed } from "../components/relativeTime.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
-import { useStickyTop } from "../components/stickyTop.js";
 import { Tabs } from "../components/Tabs.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
 import { initializeValues } from "../form/lib.js";

package/dist/list/ActionToolbar.js

@@ -3,12 +3,12 @@ import { buttonClasses } from "../components/buttonClasses.js";
 import { MoreIcon } from "../icons.js";
 import { MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { isDev } from "../dev.js";
+import { useStickyTop } from "../components/stickyTop.js";
 import { Loader } from "../components/Loader.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { AppLink } from "../components/AppLink.js";
 import { MenuEntries, useRunAction, warnIfInert } from "../components/MenuEntries.js";
-import { useStickyTop } from "../components/stickyTop.js";
 import { Menu } from "@base-ui/react/menu";
 import { Fragment, cloneElement, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/list/ListPage.d.ts

@@ -80,6 +80,30 @@ export declare function ListRow({ href, onActivate, items, goTo, openMenu, pinne
     leading?: ReactNode;
     children: ReactNode;
 }): import("react").JSX.Element;
+/**
+ * A group's header row in a list: its label, such as a status or a cluster,
+ * and, against the row's far end, what sums it up, such as "2/3 running".
+ *
+ * Inside a `ListPage` with a view, it has one cell per column, each hiding
+ * with its column as the list narrows, so a group never holds a hidden
+ * column's width open; its content lays out across the row's visible width
+ * from the first cell. Elsewhere it is one cell spanning `colSpan` columns.
+ */
+export declare function GroupRow({ label, count, trailing, children, leading, colSpan, className, }: {
+    /** The group's name: text, or an icon, a name with its tooltip, badges. */
+    label?: ReactNode;
+    /** How many rows the group holds, shown after the label. */
+    count?: number | undefined;
+    /** Set against the row's far end, such as "2/3 running". */
+    trailing?: ReactNode;
+    /** The whole header, laid out in a row, in place of `label`, `count` and `trailing`. */
+    children?: ReactNode;
+    /** Cells the list's rows have before its columns, such as a selection checkbox. */
+    leading?: number | undefined;
+    /** Outside a list view, the columns the row spans. */
+    colSpan?: number | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
 /** Name column min-width is by role, not position, so a leading checkbox
  *  doesn't shift it. A column with an `orderBy` the view offers sorts by it.
  *  While the view's column headers are off, the header row collapses: its

package/dist/list/ListPage.js

@@ -4,7 +4,7 @@ import { Tooltip } from "../components/Tooltip.js";
 import { useNavigation } from "../components/Provider.js";
 import { AppLink, isPlainClick } from "../components/AppLink.js";
 import { isMenuDivider, isMenuGroup, isMenuSubmenu, useRunAction, warnIfInert } from "../components/MenuEntries.js";
-import { Table } from "../components/Table.js";
+import { CellPlacementContext, STACKED_ITEM, Table } from "../components/Table.js";
 import { ListFilterBar } from "./ListFilterBar.js";
 import { ListActionsHeader, ListError, ListSkeleton, StretchRowLinkContext } from "./ListTable.js";
 import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./rowMenu.js";
@@ -85,28 +85,51 @@ function ListPage({ bleed = false, toolbar, filterBar, view, loading = false, er
 		]
 	});
 }
+var STACKED = { stacked: true };
+var STACKED_LINE = "mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 empty:hidden @[36rem]:hidden";
+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 } = useContext(RowActionsContext);
 	const cells = Children.toArray(children);
 	const stacked = cells.flatMap((child, i) => {
 		if (i === 0 || !columnStacks[i] || !isValidElement(child)) return [];
-		const content = child.props.children;
-		return Children.toArray(content).length > 0 ? [content] : [];
+		if (isCellElement(child)) {
+			const content = child.props.children;
+			return Children.toArray(content).length > 0 ? [child] : [];
+		}
+		return [child];
 	});
+	const under = stacked.length > 0 ? /* @__PURE__ */ jsx("div", {
+		className: STACKED_LINE,
+		"data-stacked-line": true,
+		children: stacked.map((child, j) => isValidElement(child) && child.type === "td" ? /* @__PURE__ */ jsx("div", {
+			className: STACKED_ITEM,
+			"data-stacked": true,
+			children: child.props.children
+		}, j) : /* @__PURE__ */ jsx(CellPlacementContext, {
+			value: STACKED,
+			children: child
+		}, j))
+	}) : void 0;
 	const styledCells = cells.map((child, i) => {
 		const cls = cx(columnClasses[i], i > 0 && stacked.length > 0 && !columnStacks[i] && STAYS_BESIDE_STACK);
-		if (!isValidElement(child) || !cls && !(i === 0 && stacked.length > 0)) return child;
-		const el = child;
-		if (i === 0 && stacked.length > 0) return cloneElement(el, {
-			className: cx(el.props.className, cls),
-			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [el.props.children, stacked.map((content, j) => /* @__PURE__ */ jsx("div", {
-				className: "mt-1 flex min-w-0 items-center @[36rem]:hidden",
-				"data-stacked": true,
-				children: content
-			}, j))] })
-		});
-		return cloneElement(el, { className: cx(el.props.className, cls) });
+		const after = i === 0 ? under : void 0;
+		if (!isValidElement(child) || !cls && !after) return child;
+		if (child.type === "td") {
+			const el = child;
+			return cloneElement(el, {
+				className: cx(el.props.className, cls),
+				...after ? { children: /* @__PURE__ */ jsxs(Fragment$1, { children: [el.props.children, after] }) } : {}
+			});
+		}
+		return /* @__PURE__ */ jsx(CellPlacementContext, {
+			value: {
+				className: cls || void 0,
+				after
+			},
+			children: child
+		}, child.key);
 	});
 	const floating = !alwaysShowActions && !(pinnedActions && pinnedActions.length > 0);
 	const stretch = !!href && !selectionActive;
@@ -133,7 +156,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 				children: styledCells
 			}),
 			showActions && /* @__PURE__ */ jsx(Table.Item, {
-				className: cx("relative py-2.5", floating && "pointer-fine:w-0! pointer-fine:min-w-0! pointer-fine:pl-0! pointer-fine:pr-1!"),
+				className: cx("relative overflow-visible py-2.5", floating && "pointer-fine:w-0! pointer-fine:min-w-0! pointer-fine:pl-0! pointer-fine:pr-1!"),
 				children: /* @__PURE__ */ jsxs("div", {
 					className: cx("absolute inset-y-0 right-0 flex items-center gap-0.5 pr-4", floating && !menuActive && "pointer-fine:opacity-0 pointer-fine:group-hover:opacity-100 pointer-fine:focus-within:opacity-100", floating && "pointer-fine:bg-linear-to-l pointer-fine:from-(--theme-hover) pointer-fine:from-70% pointer-fine:to-transparent pointer-fine:pl-6"),
 					children: [pinnedActions && pinnedActions.length > 0 && /* @__PURE__ */ jsx("span", {
@@ -153,6 +176,68 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 		]
 	});
 }
+/**
+* A group's header row in a list: its label, such as a status or a cluster,
+* and, against the row's far end, what sums it up, such as "2/3 running".
+*
+* Inside a `ListPage` with a view, it has one cell per column, each hiding
+* with its column as the list narrows, so a group never holds a hidden
+* column's width open; its content lays out across the row's visible width
+* from the first cell. Elsewhere it is one cell spanning `colSpan` columns.
+*/
+function GroupRow({ label, count, trailing, children, leading = 0, colSpan, className }) {
+	const { show: showActions, columnClasses } = useContext(RowActionsContext);
+	const content = children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 items-center gap-2 text-(--theme-app)",
+			children: label
+		}),
+		count !== void 0 && /* @__PURE__ */ jsxs("span", {
+			className: "shrink-0 text-(--theme-muted-text-color)",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "mx-1.5 opacity-50",
+				"aria-hidden": "true",
+				children: "·"
+			}), count]
+		}),
+		trailing !== void 0 && trailing !== null && trailing !== false && /* @__PURE__ */ jsx("span", {
+			className: "ml-auto flex shrink-0 items-center gap-2 pl-3 text-(--theme-muted-text-color) tabular-nums",
+			children: trailing
+		})
+	] });
+	const line = "flex h-8 min-w-0 items-center text-xs font-medium whitespace-nowrap";
+	const row = cx("bg-(--theme-muted-panel-bg)", className);
+	if (columnClasses.length === 0) return /* @__PURE__ */ jsx("tr", {
+		className: row,
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan,
+			children: /* @__PURE__ */ jsx("div", {
+				className: line,
+				children: content
+			})
+		})
+	});
+	const cells = leading + columnClasses.length + (showActions ? 1 : 0);
+	return /* @__PURE__ */ jsx("tr", {
+		className: row,
+		"data-group-row": true,
+		children: Array.from({ length: cells }, (_, i) => {
+			const column = i - leading;
+			const cls = column >= 0 && column < columnClasses.length ? columnClasses[column] : void 0;
+			return /* @__PURE__ */ jsx("td", {
+				className: cx("p-0", cls),
+				children: i === 0 && /* @__PURE__ */ jsx("div", {
+					className: "w-0",
+					children: /* @__PURE__ */ jsx("div", {
+						className: line,
+						style: { width: "calc(100cqw - 2rem)" },
+						children: content
+					})
+				})
+			}, i);
+		})
+	});
+}
 function PinnedActionButton({ action, visible }) {
 	warnIfInert(action, "ListPage pinned action");
 	const runAction = useRunAction();
@@ -198,7 +283,10 @@ function ListColumns({ view }) {
 		return /* @__PURE__ */ jsx(Table.Header, {
 			caps: false,
 			className: cx(col.headerClassName, view.columnClasses[i], !view.showColumnHeaders && "list-headers-off"),
-			style: col.alwaysVisible ? { minWidth: 200 } : void 0,
+			style: col.alwaysVisible || col.width !== void 0 ? {
+				...col.alwaysVisible && { minWidth: 200 },
+				...col.width !== void 0 && { width: col.width }
+			} : void 0,
 			sort: orderBy === void 0 ? void 0 : columnSort(view, orderBy),
 			onSort: orderBy === void 0 ? void 0 : () => view.sortBy(orderBy),
 			children: col.label
@@ -211,4 +299,4 @@ function useListNavigate() {
 	return useNavigation().goTo;
 }
 //#endregion
-export { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate };
+export { GroupRow, ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate };

package/dist/list/ListTable.d.ts

@@ -54,17 +54,13 @@ export declare function NameCell({ icon, iconTile, name, subtitle, href, badge,
 }): import("react").JSX.Element;
 /** A row's column text: muted 13px, or monospace for an ID, a path or a
  *  hash. The style sits on the text rather than the cell, so it carries over
- *  when a narrow list stacks the column under the name. */
+ *  when a narrow list stacks the column under the name. Text wider than its
+ *  column is cut off with an ellipsis, and shows whole in a tooltip. */
 export declare function ListCellText({ mono, className, children, }: {
     mono?: boolean | undefined;
     className?: string | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function GroupRow({ label, count, colSpan, }: {
-    label: string;
-    count: number;
-    colSpan: number;
-}): import("react").JSX.Element;
 /** Says a list couldn't load. It never shows the error's own text, which is
  *  the server's words, in its language and not written for the reader. */
 export declare function ListError({ noun, message, }: {

package/dist/list/ListTable.js

@@ -1,11 +1,12 @@
 import { cx } from "../cx.js";
 import { ErrorIcon } from "../icons.js";
+import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { AppLink } from "../components/AppLink.js";
 import { positionKeys } from "../components/keys.js";
 import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Checkbox } from "../components/Checkbox.js";
-import { Table } from "../components/Table.js";
+import { CellPlacementContext, Table } from "../components/Table.js";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/ListTable.tsx
@@ -43,6 +44,8 @@ var STRETCHED_LINK = "after:absolute after:inset-0 after:content-[''] focus-visi
 var STRETCHED_LINK_ROW = "relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:relative [&_:is(a,button,input,label,[role=checkbox]):not([data-row-link])]:z-[1]";
 function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title, children }) {
 	const stretch = useContext(StretchRowLinkContext);
+	const placed = useContext(CellPlacementContext);
+	const under = placed?.after;
 	const hasIcon = icon !== null && icon !== void 0 && icon !== false;
 	const columns = hasIcon ? "col-span-2 grid grid-cols-subgrid items-center" : "flex items-center";
 	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasIcon && (iconTile && subtitle ? /* @__PURE__ */ jsx("span", {
@@ -65,7 +68,7 @@ function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title,
 			children: subtitle
 		})]
 	})] });
-	return /* @__PURE__ */ jsx(Table.Item, {
+	const cell = /* @__PURE__ */ jsx(Table.Item, {
 		className: "py-2.5",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: cx("grid min-w-0", hasIcon ? "grid-cols-[auto_minmax(0,1fr)] gap-x-2.5" : "grid-cols-[minmax(0,1fr)]"),
@@ -77,41 +80,34 @@ function NameCell({ icon, iconTile = false, name, subtitle, href, badge, title,
 			}) : /* @__PURE__ */ jsx("div", {
 				className: cx("min-w-0", columns),
 				children: inner
-			}), !!children && /* @__PURE__ */ jsx("div", {
+			}), (!!children || !!under) && /* @__PURE__ */ jsxs("div", {
 				className: hasIcon ? "col-start-2 min-w-0" : "min-w-0",
-				children
+				children: [children, under]
 			})]
 		})
 	});
+	return placed?.after ? /* @__PURE__ */ jsx(CellPlacementContext, {
+		value: {
+			...placed,
+			after: void 0
+		},
+		children: cell
+	}) : cell;
 }
 /** A row's column text: muted 13px, or monospace for an ID, a path or a
 *  hash. The style sits on the text rather than the cell, so it carries over
-*  when a narrow list stacks the column under the name. */
+*  when a narrow list stacks the column under the name. Text wider than its
+*  column is cut off with an ellipsis, and shows whole in a tooltip. */
 function ListCellText({ mono = false, className, children }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cx("text-(--theme-muted-text-color)", mono ? "font-mono text-xs" : "text-[13px]", className),
+	const text = /* @__PURE__ */ jsx("span", {
+		className: cx("block min-w-0 truncate text-(--theme-muted-text-color)", mono ? "font-mono text-xs" : "text-[13px]", className),
 		children
 	});
-}
-function GroupRow({ label, count, colSpan }) {
-	return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
-		colSpan,
-		className: "bg-(--theme-muted-panel-bg) py-1.5 text-xs font-medium",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "text-(--theme-app)",
-				children: label
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "mx-1.5 opacity-50",
-				children: "·"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "text-(--theme-muted-text-color)",
-				children: count
-			})
-		]
-	}) });
+	return typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Tooltip, {
+		content: children,
+		overflowOnly: true,
+		children: text
+	}) : text;
 }
 /** Says a list couldn't load. It never shows the error's own text, which is
 *  the server's words, in its language and not written for the reader. */
@@ -235,4 +231,4 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 }
 ListActionsHeader.isTableHeader = true;
 //#endregion
-export { FLOATING_ACTIONS_LANE, GroupRow, HEADERS_OFF, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, STRETCHED_LINK_ROW, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };
+export { FLOATING_ACTIONS_LANE, HEADERS_OFF, ListActionsHeader, ListCellText, ListError, ListSelectAllHeader, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, STRETCHED_LINK, STRETCHED_LINK_ROW, StretchRowLinkContext, actionsColumnWidth, listTableFixedProps, listTableProps };