@parallelworks/ui 0.91.0 → 0.93.0

package/dist/app-frame/index.js

@@ -0,0 +1,369 @@
+import { cx } from "../cx.js";
+import { CloseIcon, SidebarCloseIcon, SidebarOpenIcon } from "../icons.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { AppLink, isPlainClick } from "../components/AppLink.js";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/app-frame/index.tsx
+var defaultLabels = {
+	navigation: "Main navigation",
+	skipToContent: "Skip to content",
+	openNavigation: "Open navigation",
+	closeNavigation: "Close navigation",
+	expandSidebar: "Expand sidebar",
+	collapseSidebar: "Collapse sidebar",
+	resizeSidebar: "Resize sidebar"
+};
+var Context = createContext(null);
+function useAppFrame() {
+	const context = useContext(Context);
+	if (!context) throw new Error("useAppFrame requires AppFrame");
+	return context;
+}
+function useFrameContext() {
+	const context = useContext(Context);
+	if (!context) throw new Error("App frame controls require AppFrame");
+	return context;
+}
+function useMobile(breakpoint) {
+	const media = useMemo(() => typeof window === "undefined" ? null : window.matchMedia(`(max-width: ${breakpoint - 1}px)`), [breakpoint]);
+	return useSyncExternalStore(useMemo(() => (changed) => {
+		media?.addEventListener("change", changed);
+		return () => media?.removeEventListener("change", changed);
+	}, [media]), () => media?.matches ?? false, () => false);
+}
+function slot(value, state) {
+	return typeof value === "function" ? value(state) : value;
+}
+/** An inset application surface beside a resizable icon rail or navigation column.
+* Router, identity, persistence and permissions belong to the host. Import app-frame.css. */
+function AppFrame({ children, brand, navigation, footer, header, banner, expanded: controlledExpanded, defaultExpanded = true, onExpandedChange, width: controlledWidth, defaultWidth = 240, onWidthChange, minWidth = 200, maxWidth = 400, railWidth = 64, resizable = true, mobileBreakpoint = 768, navigationKey, navigationResetKey = navigationKey, sidebarProps, fullBleed = false, labels: labelOverrides, mainId: suppliedMainId, mainClassName, className, style, ...props }) {
+	const id = useId();
+	const mainId = suppliedMainId ?? `${id}-main`;
+	const navigationId = `${id}-navigation`;
+	const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
+	const [ownWidth, setOwnWidth] = useState(defaultWidth);
+	const [dragWidth, setDragWidth] = useState(null);
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const [resizing, setResizing] = useState(false);
+	const desktopExpanded = controlledExpanded ?? ownExpanded;
+	const minimum = Math.max(railWidth, minWidth);
+	const maximum = Math.max(minimum, maxWidth);
+	const clamp = (n) => Math.min(maximum, Math.max(minimum, Number.isFinite(n) ? n : defaultWidth));
+	const width = clamp(dragWidth ?? controlledWidth ?? ownWidth);
+	const isMobile = useMobile(mobileBreakpoint);
+	const labels = {
+		...defaultLabels,
+		...labelOverrides
+	};
+	const navRef = useRef(null);
+	const scrollRef = useRef(null);
+	const savedScrollTop = useRef(0);
+	const restoreScroll = useCallback((node) => {
+		scrollRef.current = node;
+		if (node) node.scrollTop = savedScrollTop.current;
+	}, []);
+	const portalRef = useRef(null);
+	const drag = useRef(null);
+	useEffect(() => {
+		if (!isMobile && resizable) return;
+		drag.current = null;
+		setDragWidth(null);
+		setResizing(false);
+	}, [isMobile, resizable]);
+	const setExpanded = (next) => {
+		setOwnExpanded(next);
+		onExpandedChange?.(next);
+	};
+	const setWidth = (next) => {
+		const value = clamp(next);
+		setOwnWidth(value);
+		onWidthChange?.(value);
+	};
+	const closeNavigation = () => setMobileOpen(false);
+	const state = {
+		expanded: isMobile || desktopExpanded,
+		isMobile,
+		mobileOpen,
+		toggle: () => isMobile ? setMobileOpen(!mobileOpen) : setExpanded(!desktopExpanded),
+		closeNavigation,
+		labels,
+		navigationId
+	};
+	const previousLocation = useRef({
+		navigationKey,
+		navigationResetKey,
+		isMobile
+	});
+	useEffect(() => {
+		if (previousLocation.current.navigationKey === navigationKey && previousLocation.current.navigationResetKey === navigationResetKey && previousLocation.current.isMobile === isMobile) return;
+		if (previousLocation.current.navigationKey !== navigationKey || previousLocation.current.isMobile !== isMobile) setMobileOpen(false);
+		if (previousLocation.current.navigationResetKey !== navigationResetKey || previousLocation.current.isMobile !== isMobile) {
+			savedScrollTop.current = 0;
+			scrollRef.current?.scrollTo({ top: 0 });
+		}
+		previousLocation.current = {
+			navigationKey,
+			navigationResetKey,
+			isMobile
+		};
+	}, [
+		navigationKey,
+		navigationResetKey,
+		isMobile
+	]);
+	const navContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		brand && /* @__PURE__ */ jsx("div", {
+			className: "pw-frame-brand",
+			children: slot(brand, state)
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "pw-frame-links",
+			ref: restoreScroll,
+			onScroll: (event) => {
+				savedScrollTop.current = event.currentTarget.scrollTop;
+			},
+			children: slot(navigation, state)
+		}),
+		footer && /* @__PURE__ */ jsx("div", {
+			className: "pw-frame-footer",
+			children: slot(footer, state)
+		})
+	] });
+	const resize = (clientX, pointerId) => {
+		const current = drag.current;
+		if (!current || current.pointerId !== pointerId) return;
+		const next = (clientX - current.origin) * current.direction;
+		if (desktopExpanded && next < minimum - 80) setExpanded(false);
+		else if (!desktopExpanded && next >= minimum - 50) {
+			setExpanded(true);
+			current.width = clamp(next);
+			setDragWidth(current.width);
+		} else if (desktopExpanded) {
+			current.width = clamp(next);
+			setDragWidth(current.width);
+		}
+	};
+	const endResize = (event) => {
+		const ended = drag.current;
+		if (!ended || ended.pointerId !== event.pointerId) return;
+		drag.current = null;
+		setResizing(false);
+		setDragWidth(null);
+		if (desktopExpanded && ended.width !== ended.startWidth) setWidth(ended.width);
+	};
+	return /* @__PURE__ */ jsx(Context, {
+		value: state,
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			className: cx("pw-app-frame", className),
+			"data-mobile": isMobile || void 0,
+			"data-full-bleed": fullBleed || void 0,
+			style,
+			children: [
+				/* @__PURE__ */ jsx("a", {
+					className: "pw-frame-skip",
+					href: `#${mainId}`,
+					onClick: (event) => {
+						event.preventDefault();
+						document.getElementById(mainId)?.focus();
+					},
+					children: labels.skipToContent
+				}),
+				banner && /* @__PURE__ */ jsx("div", {
+					className: "pw-frame-banner",
+					children: banner
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "pw-frame-body",
+					children: [
+						!isMobile && /* @__PURE__ */ jsxs("aside", {
+							...sidebarProps,
+							ref: navRef,
+							id: navigationId,
+							className: cx("pw-frame-sidebar", sidebarProps?.className),
+							"data-sidebar-mode": desktopExpanded ? "expanded" : "rail",
+							"data-resizing": resizing || void 0,
+							style: {
+								...sidebarProps?.style,
+								width: desktopExpanded ? width : railWidth
+							},
+							children: [navContent, resizable && /* @__PURE__ */ jsx("div", {
+								role: "separator",
+								tabIndex: 0,
+								"aria-orientation": "vertical",
+								"aria-label": labels.resizeSidebar,
+								"aria-controls": navigationId,
+								"aria-valuemin": railWidth,
+								"aria-valuemax": maximum,
+								"aria-valuenow": Math.round(desktopExpanded ? width : railWidth),
+								className: "pw-frame-resize",
+								onPointerDown: (event) => {
+									if (event.button !== 0 || event.isPrimary === false || drag.current) return;
+									event.preventDefault();
+									const rect = navRef.current?.getBoundingClientRect();
+									if (!rect) return;
+									const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+									drag.current = {
+										origin: rtl ? rect.right : rect.left,
+										direction: rtl ? -1 : 1,
+										pointerId: event.pointerId,
+										startWidth: width,
+										width
+									};
+									event.currentTarget.setPointerCapture(event.pointerId);
+									setResizing(true);
+								},
+								onPointerMove: (event) => resize(event.clientX, event.pointerId),
+								onPointerUp: endResize,
+								onPointerCancel: endResize,
+								onLostPointerCapture: endResize,
+								onDoubleClick: () => {
+									setExpanded(true);
+									setWidth(defaultWidth);
+								},
+								onKeyDown: (event) => {
+									const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+									const smaller = rtl ? "ArrowRight" : "ArrowLeft";
+									if (![
+										smaller,
+										rtl ? "ArrowLeft" : "ArrowRight",
+										"Home",
+										"End"
+									].includes(event.key)) return;
+									event.preventDefault();
+									if (event.key === "Home") {
+										setExpanded(true);
+										setWidth(minimum);
+									} else if (event.key === "End") {
+										setExpanded(true);
+										setWidth(maximum);
+									} else if (event.key === smaller) {
+										if (width <= minimum) setExpanded(false);
+										else if (desktopExpanded) setWidth(width - 16);
+									} else if (!desktopExpanded) setExpanded(true);
+									else setWidth(width + 16);
+								}
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "pw-frame-surface-wrap",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "pw-frame-surface",
+								children: [header && /* @__PURE__ */ jsx("div", {
+									className: "pw-frame-header",
+									children: header
+								}), /* @__PURE__ */ jsx("main", {
+									id: mainId,
+									tabIndex: -1,
+									className: cx("pw-frame-main", mainClassName),
+									children
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx("div", { ref: portalRef })
+					]
+				}),
+				isMobile && /* @__PURE__ */ jsx(Dialog.Root, {
+					open: mobileOpen,
+					onOpenChange: setMobileOpen,
+					children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+						container: portalRef,
+						children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "pw-frame-backdrop" }), /* @__PURE__ */ jsxs(Dialog.Popup, {
+							...sidebarProps,
+							id: navigationId,
+							className: cx("pw-frame-drawer", sidebarProps?.className),
+							"aria-label": labels.navigation,
+							"aria-modal": "true",
+							"data-sidebar-mode": "drawer",
+							style: {
+								...sidebarProps?.style,
+								width
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "pw-frame-mobile-close",
+								children: /* @__PURE__ */ jsx(Dialog.Close, {
+									className: "pw-frame-toggle",
+									"aria-label": labels.closeNavigation,
+									children: /* @__PURE__ */ jsx(CloseIcon, {})
+								})
+							}), navContent]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+/** Put in the page header on mobile, and the sidebar footer on desktop. */
+function AppFrameToggle({ className, ...props }) {
+	const { expanded, isMobile, mobileOpen, toggle, labels, navigationId } = useFrameContext();
+	const label = isMobile ? mobileOpen ? labels.closeNavigation : labels.openNavigation : expanded ? labels.collapseSidebar : labels.expandSidebar;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		side: isMobile ? "bottom" : "right",
+		children: /* @__PURE__ */ jsx("button", {
+			...props,
+			type: "button",
+			className: cx("pw-frame-toggle", className),
+			"aria-label": label,
+			"aria-expanded": isMobile ? mobileOpen : expanded,
+			"aria-controls": navigationId,
+			onClick: (event) => {
+				props.onClick?.(event);
+				if (!event.defaultPrevented) toggle();
+			},
+			children: expanded && !isMobile ? /* @__PURE__ */ jsx(SidebarCloseIcon, {}) : /* @__PURE__ */ jsx(SidebarOpenIcon, {})
+		})
+	});
+}
+/** Router-aware navigation that keeps icon-only rail items named and discoverable. */
+function AppFrameNavItem({ label, icon, selected, badge, disabled, onClick, className, ...target }) {
+	const { expanded, closeNavigation } = useFrameContext();
+	const props = {
+		className: cx("pw-frame-nav-item", className),
+		"aria-current": selected ? "page" : void 0,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+			if (!event.defaultPrevented && isPlainClick(event)) closeNavigation();
+		},
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "pw-frame-nav-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: expanded ? "pw-frame-nav-label" : "sr-only",
+				children: label
+			}),
+			expanded && badge != null && /* @__PURE__ */ jsx("span", {
+				className: "pw-frame-nav-badge",
+				"aria-hidden": "true",
+				children: badge
+			})
+		] })
+	};
+	const item = target.href ? /* @__PURE__ */ jsx(AppLink, {
+		...target,
+		...props,
+		disabled
+	}) : /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		disabled
+	});
+	return expanded ? item : /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		side: "right",
+		delay: 0,
+		children: item
+	});
+}
+//#endregion
+export { AppFrame, AppFrameNavItem, AppFrameToggle, useAppFrame };

package/dist/components/Table.d.ts

@@ -12,10 +12,17 @@ export interface CellPlacement {
     className?: string | undefined;
     after?: React.ReactNode;
     stacked?: boolean | undefined;
+    /** A stacked value joined to the one before it on its line, after a dot. */
+    joined?: 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";
+/** A joined stacked value's dot, part of the value so a value that renders nothing leaves none:
+ *  6px either side of it, where the line keeps 12px between values. */
+export declare const STACKED_JOINED = "-ml-1.5 before:pr-1.5 before:content-['\u00B7'] before:text-(--theme-muted-text-color)";
+/** Whether a cell's content shows anything: an empty string, like a missing value, doesn't. */
+export declare function hasContent(children: React.ReactNode): boolean;
 /** 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> {

package/dist/components/Table.js

@@ -26,13 +26,20 @@ 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";
+/** A joined stacked value's dot, part of the value so a value that renders nothing leaves none:
+*  6px either side of it, where the line keeps 12px between values. */
+var STACKED_JOINED = "-ml-1.5 before:pr-1.5 before:content-['·'] before:text-(--theme-muted-text-color)";
+/** Whether a cell's content shows anything: an empty string, like a missing value, doesn't. */
+function hasContent(children) {
+	return React.Children.toArray(children).some((child) => child !== "");
+}
 /** 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,
+	if (placed?.stacked) return hasContent(children) ? /* @__PURE__ */ jsx("div", {
+		className: cx(STACKED_ITEM, placed.joined && "-ml-1.5 before:pr-1.5 before:content-['·'] before:text-(--theme-muted-text-color)"),
 		"data-stacked": true,
 		children
 	}) : null;
@@ -121,4 +128,4 @@ function Table({ density = "comfortable", columns, caps = true, flush = false, c
 Table.Header = Header;
 Table.Item = Item;
 //#endregion
-export { CellPlacementContext, STACKED_ITEM, Table };
+export { CellPlacementContext, STACKED_ITEM, STACKED_JOINED, Table, hasContent };

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 { CellPlacementContext, STACKED_ITEM, Table } from "../components/Table.js";
+import { CellPlacementContext, STACKED_ITEM, Table, hasContent } from "../components/Table.js";
 import { ListCountText, ListFooterCountContext } from "./listSearch.js";
 import { ListFilterBar } from "./ListFilterBar.js";
 import { ListActionsHeader, ListError, ListSkeleton, StretchRowLinkContext } from "./ListTable.js";
@@ -19,20 +19,24 @@ var RowActionsContext = createContext({
 	always: false,
 	columnClasses: [],
 	columnStacks: [],
+	columnStackLines: [],
 	reservesLane: false
 });
+var NO_STACK_LINES = [];
 function useRowActions(view) {
 	return useMemo(() => ({
 		show: view?.showActions ?? true,
 		always: view?.alwaysShowActions ?? false,
 		columnClasses: view?.columnClasses ?? [],
 		columnStacks: view?.columnStacks ?? [],
+		columnStackLines: view?.columnStackLines ?? NO_STACK_LINES,
 		reservesLane: view?.reservesActionLane ?? view?.lastColumnLocked ?? false
 	}), [
 		view?.showActions,
 		view?.alwaysShowActions,
 		view?.columnClasses,
 		view?.columnStacks,
+		view?.columnStackLines,
 		view?.lastColumnLocked,
 		view?.reservesActionLane
 	]);
@@ -113,32 +117,67 @@ function ListFooter({ count, pager }) {
 	});
 }
 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 STACKED_JOINED_PLACEMENT = {
+	stacked: true,
+	joined: true
+};
+var STACKED_LINE = "mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs text-(--theme-muted-text-color) empty:hidden @[36rem]:hidden";
+var STACKED_LINES = "mt-1 flex min-w-0 flex-col gap-y-1 text-xs text-(--theme-muted-text-color) empty:hidden @[36rem]:hidden";
+var STACKED_LINES_LINE = "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1";
 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, reservesLane } = useContext(RowActionsContext);
+	const { show: showActions, always: alwaysShowActions, columnClasses, columnStacks, columnStackLines, reservesLane } = useContext(RowActionsContext);
 	const cells = Children.toArray(children);
 	const stacked = cells.flatMap((child, i) => {
 		if (i === 0 || !columnStacks[i] || !isValidElement(child)) return [];
+		const line = columnStackLines[i];
 		if (isCellElement(child)) {
 			const content = child.props.children;
-			return Children.toArray(content).length > 0 ? [child] : [];
+			return hasContent(content) ? [{
+				child,
+				line
+			}] : [];
 		}
-		return [child];
+		return [{
+			child,
+			line
+		}];
 	});
-	const under = stacked.length > 0 ? /* @__PURE__ */ jsx("div", {
+	const item = (child, j, joined = false) => isValidElement(child) && child.type === "td" ? /* @__PURE__ */ jsx("div", {
+		className: cx(STACKED_ITEM, joined && "-ml-1.5 before:pr-1.5 before:content-['·'] before:text-(--theme-muted-text-color)"),
+		"data-stacked": true,
+		children: child.props.children
+	}, j) : /* @__PURE__ */ jsx(CellPlacementContext, {
+		value: joined ? STACKED_JOINED_PLACEMENT : STACKED,
+		children: child
+	}, j);
+	let under;
+	if (stacked.length > 0 && stacked.every(({ line }) => line === void 0)) under = /* @__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;
+		children: stacked.map(({ child }, j) => item(child, j))
+	});
+	else if (stacked.length > 0) {
+		const lines = [];
+		stacked.forEach(({ child, line }, j) => {
+			const current = lines.at(-1);
+			if (!current || line === "own") {
+				lines.push([item(child, j)]);
+				return;
+			}
+			current.push(item(child, j, line === "join"));
+		});
+		under = /* @__PURE__ */ jsx("div", {
+			className: STACKED_LINES,
+			"data-stacked-lines": true,
+			children: lines.map((values, k) => /* @__PURE__ */ jsx("div", {
+				className: STACKED_LINES_LINE,
+				"data-stacked-line": true,
+				children: values
+			}, k))
+		});
+	}
 	const styledCells = cells.map((child, i) => {
 		const cls = cx(columnClasses[i], i > 0 && stacked.length > 0 && !columnStacks[i] && STAYS_BESIDE_STACK);
 		const after = i === 0 ? under : void 0;
@@ -356,6 +395,9 @@ function shareWidths(columns, stacks) {
 	const total = shares.reduce((sum, share) => sum + (share ?? 0), 0);
 	const scale = (tier) => {
 		const kept = columns.reduce((sum, col, i) => sum + (shows(col, i, tier) ? shares[i] ?? 0 : 0), 0);
+		const drops = columns.some((col, i) => !shows(col, i, tier));
+		const unshared = columns.some((col, i) => shows(col, i, tier) && shares[i] === void 0);
+		if (drops && !unshared && kept > 0) return 100 / kept;
 		const left = 100 - (total - kept);
 		return left > 0 ? 100 / left : 1;
 	};

package/dist/list/index.d.ts

@@ -6,7 +6,7 @@ export { actionsColumnWidth, ListActionsHeader, ListCellText, ListError, ListSel
 export { ListToolbar, type ListToolbarProps } from './ListToolbar.js';
 export { ListDisplayMenu, ListFilterMenu } from './ListViewControls.js';
 export { ListCount, type ListSearch, ListSearchControl, useListSearch, } from './listSearch.js';
-export { type ActionDef, type ColumnDef, DEFAULT_ORDER, FAVORITE_ORDER, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, useListView, } from './listView.js';
+export { type ActionDef, type ColumnDef, DEFAULT_ORDER, FAVORITE_ORDER, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, type StackLine, useListView, } from './listView.js';
 export { assembleRowMenu, type CopyFields, type CopySubmenu, MoreButton, type RowAction, rowContextMenuProps, useCopySubmenu, useRowMenuActive, } from './rowMenu.js';
 export { HoverCardRow, UserHoverCard, type UserHoverCardProps, } from './UserHoverCard.js';
 export { type FilterStore, type ListFilters, type ListFiltersConfig, useListFilters, } from './useListFilters.js';

package/dist/list/listView.d.ts

@@ -26,6 +26,11 @@ export interface ColumnDef {
      * column there: for something short that compares best lined up, like a
      * total. The first column never stacks; it is what the others stack under. */
     stack?: boolean;
+    /** Where a stacked column's value sits on the lines under the name. By default the stacked
+     *  values share a line, flowing and wrapping between them. `own` starts a line of its own, for
+     *  a value read first, such as a status; `join` stays on the line before it after a "·", for
+     *  one that belongs with that value, such as a job's nodes after its partition. */
+    stackLine?: StackLine | undefined;
     /** The `value` of the {@link OrderByOption} this column sorts by. Its header
      * then sorts the list: it shows, and sets, the same order as Display
      * options' Ordering. */
@@ -43,6 +48,9 @@ export interface ColumnDef {
 }
 /** Column responsive importance; `low` drops before `medium`. See {@link ColumnDef.priority}. */
 type ColumnPriority = 'low' | 'medium';
+/** How a stacked column's value lines up with the others under the name; see
+ *  {@link ColumnDef.stackLine}. */
+export type StackLine = 'own' | 'join';
 /** Whether a column is always shown and kept out of the column picker. */
 export declare function isLocked(col: ColumnDef): boolean;
 interface GroupByOption {
@@ -130,6 +138,8 @@ export interface ListViewChrome {
     /** Per visible column, whether it stacks under the first on a narrow
      * container ({@link ColumnDef.stack}); `ListRow` reads entry `i`. */
     columnStacks: boolean[];
+    /** Per visible column, the line its stacked value takes ({@link ColumnDef.stackLine}). */
+    columnStackLines?: (StackLine | undefined)[] | undefined;
     /** Whether the last column is a locked one, such as a delete button's: the
      * row's `⋯` then keeps a lane of its own after it rather than floating over
      * it on hover. */

package/dist/list/listView.js

@@ -94,6 +94,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (isLocked(c) || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
 	const columnClasses = useMemo(() => visibleColumns.map(columnClass), [visibleColumns]);
 	const columnStacks = useMemo(() => visibleColumns.map(stacks), [visibleColumns]);
+	const columnStackLines = useMemo(() => visibleColumns.map((c) => c.stackLine), [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";
@@ -191,6 +192,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		visibleColumns,
 		columnClasses,
 		columnStacks,
+		columnStackLines,
 		lastColumnLocked,
 		reservesActionLane,
 		isVisible,