@parallelworks/ui 0.84.1 → 0.85.0

package/dist/components/chart.js

@@ -1,36 +1,65 @@
 import { cx } from "../cx.js";
 import { useLocale, useStrings } from "./Provider.js";
-import { CATEGORY_CLASSES, categoryOf } from "./category.js";
-import { useCallback, useMemo, useState } from "react";
+import { CATEGORY_CLASSES } from "./category.js";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/chart.tsx
-var SLOTS = CATEGORY_CLASSES.length;
-/** A series' mark color for palette slot 1–8: the theme's category hue, between the slot's
-*  soft fill and its text and twice as saturated, so a bar or a line stands out from the page
-*  in light and dark alike and keeps the hue the slot has everywhere else. */
-function seriesSlotColor(slot) {
-	const n = ((slot - 1) % SLOTS + SLOTS) % SLOTS + 1;
+/** How many series a chart colors: a series past the eighth folds into "Other" (`foldSeries`)
+*  rather than taking a hue made up for it. */
+var SERIES_LIMIT = CATEGORY_CLASSES.length;
+/** The theme's category slots in the order series take them. Each run from the first — three,
+*  four or all eight — keeps neighbors apart in hue and lightness, for color-blind readers too,
+*  in light and dark, where the theme's own order steps through neighboring hues. */
+var SERIES_ORDER = [
+	5,
+	2,
+	8,
+	3,
+	6,
+	4,
+	7,
+	1
+];
+/** The key `foldSeries` gives the series that sums those past the limit. */
+var OTHER_SERIES_KEY = "__other__";
+/** The mark color of the "Other" series: a neutral gray, so it never reads as one more series. */
+var OTHER_SERIES_COLOR = "color-mix(in oklch, var(--theme-muted-text-color) 75%, var(--theme-panel-bg))";
+/** The color of a chart's nth series, 1–8: the theme's category hue, between the slot's soft
+*  fill and its text and twice as saturated, so a bar or a line stands out from the page in
+*  light and dark alike. Past the eighth it is the "Other" gray; a hue is never repeated. */
+function seriesSlotColor(position) {
+	const n = SERIES_ORDER[position - 1];
+	if (n === void 0) return OTHER_SERIES_COLOR;
 	return `oklch(from color-mix(in oklch, var(--theme-category-${n}), var(--theme-category-${n}-text)) l calc(c * 2) h)`;
 }
-/** A series' color by its key, any CSS color for a fill, a stroke or a style: the same key
-*  gets the same color on every chart, as `categoryOf` gives a name its avatar color. */
-function seriesColor(key) {
-	return seriesSlotColor(categoryOf(key));
-}
-/** Colors for a chart's series, each key its `seriesColor` unless another key took that slot
-*  first, when it moves to the next free one: up to eight series never share a color. */
+/** Colors for a chart's series by their place in `keys`: the first takes the first color, the
+*  second the next, so the first few are always the most distinct. Pass every key the chart can
+*  show, in an order that doesn't depend on the data shown, such as by name or as configured:
+*  a filter that hides a series then leaves the others their colors. `OTHER_SERIES_KEY`, and any
+*  key past the eighth, is the "Other" gray; fold them first with `foldSeries`. */
 function seriesColors(keys) {
-	const taken = /* @__PURE__ */ new Set();
 	const colors = {};
+	let position = 0;
 	for (const key of keys) {
 		if (key in colors) continue;
-		let slot = categoryOf(key);
-		if (taken.size < SLOTS) while (taken.has(slot)) slot = slot % SLOTS + 1;
-		taken.add(slot);
-		colors[key] = seriesSlotColor(slot);
+		colors[key] = key === "__other__" ? OTHER_SERIES_COLOR : seriesSlotColor(++position);
 	}
 	return colors;
 }
+/** Splits a chart's series at the limit: up to eight show as they are, and more keep the first
+*  seven and fold the rest into one "Other" series, `OTHER_SERIES_KEY`, whose value at a point
+*  is the sum of `folded`. Name it with the `chart.other` string. */
+function foldSeries(keys, limit = SERIES_LIMIT) {
+	const unique = [...new Set(keys)];
+	if (unique.length <= limit) return {
+		keys: unique,
+		folded: []
+	};
+	return {
+		keys: [...unique.slice(0, limit - 1), OTHER_SERIES_KEY],
+		folded: unique.slice(limit - 1)
+	};
+}
 /** A series' color as a mark, for a legend or a tooltip's row. Only seen: the series' name
 *  beside it says which it is. */
 function SeriesSwatch({ color, shape = "square", className }) {
@@ -107,7 +136,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-40 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) p-3 text-xs text-(--theme-app) shadow-(--theme-shadow-lg)", className),
+		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),
 		style,
 		children: [
 			label != null && label !== "" && /* @__PURE__ */ jsx("div", {
@@ -141,5 +170,71 @@ 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" }) {
+	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 shown = maxWidth ?? width;
+	return {
+		left: side === "right" ? x + gap : x - gap - shown,
+		side,
+		maxWidth
+	};
+}
+/** 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. */
+function ChartTooltipBeside({ x, top = 0, gap = 12, className, children }) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || x === null) return;
+		el.style.maxWidth = "";
+		el.style.removeProperty("--chart-tooltip-min");
+		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({
+			x,
+			width,
+			start,
+			end,
+			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`;
+		if (placement.maxWidth !== null) {
+			el.style.maxWidth = `${placement.maxWidth}px`;
+			el.style.setProperty("--chart-tooltip-min", "0px");
+		}
+	});
+	if (x === null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pointer-events-none absolute z-10 w-max", className),
+		style: { top },
+		children
+	});
+}
 //#endregion
-export { ChartLegendList, ChartTooltipContent, SeriesSwatch, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight };
+export { ChartLegendList, ChartTooltipBeside, ChartTooltipContent, OTHER_SERIES_COLOR, OTHER_SERIES_KEY, SERIES_LIMIT, SeriesSwatch, chartTooltipPlacement, foldSeries, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight };

package/dist/components/scrollFade.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties } from 'react';
+/** Which ends of a sideways scroller hide some of its content, kept up to date as it
+ *  scrolls or resizes. */
+export type HiddenEnds = {
+    start: boolean;
+    end: boolean;
+};
+export declare function useHiddenEnds(active: boolean): {
+    ref: import("react").RefObject<HTMLElement | null>;
+    ends: HiddenEnds;
+    onScroll: () => void;
+};
+export declare function fadeMask({ start, end }: HiddenEnds): CSSProperties | undefined;

package/dist/components/scrollFade.js

@@ -0,0 +1,51 @@
+import { useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/scrollFade.ts
+var NO_ENDS = {
+	start: false,
+	end: false
+};
+function useHiddenEnds(active) {
+	const ref = useRef(null);
+	const [ends, setEnds] = useState(NO_ENDS);
+	const measureNow = () => {
+		const el = ref.current;
+		if (!el || !active) {
+			setEnds(NO_ENDS);
+			return;
+		}
+		const scrolled = Math.abs(el.scrollLeft);
+		const start = scrolled > 1;
+		const end = scrolled + el.clientWidth < el.scrollWidth - 1;
+		setEnds((was) => was.start === start && was.end === end ? was : {
+			start,
+			end
+		});
+	};
+	const measure = useEffectEvent(measureNow);
+	useLayoutEffect(() => {
+		measure();
+	});
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || !active || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => measure());
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [active]);
+	return {
+		ref,
+		ends,
+		onScroll: measureNow
+	};
+}
+var FADE = "1.25rem";
+function fadeMask({ start, end }) {
+	if (!start && !end) return;
+	const image = `linear-gradient(to var(--fade-end, right), ${start ? `transparent, #000 ${FADE}` : "#000"}, ${end ? `#000 calc(100% - ${FADE}), transparent` : "#000"})`;
+	return {
+		maskImage: image,
+		WebkitMaskImage: image
+	};
+}
+//#endregion
+export { fadeMask, useHiddenEnds };

package/dist/file-explorer/FileExplorer.js

@@ -551,6 +551,14 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 	const triggerBrowserDownload = (url, filename) => {
 		const href = safeUrl(url);
 		if (!href) return;
+		if (new URL(href, window.location.href).origin !== window.location.origin) {
+			const frame = document.createElement("iframe");
+			frame.hidden = true;
+			frame.src = href;
+			document.body.appendChild(frame);
+			setTimeout(() => frame.remove(), 6e4);
+			return;
+		}
 		const a = document.createElement("a");
 		a.href = href;
 		a.download = filename;

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, ChartTooltipContent, type ChartTooltipItem, SeriesSwatch, type SeriesSwatchShape, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight, } from './components/chart.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 { 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, ChartTooltipContent, SeriesSwatch, seriesColor, seriesColors, seriesOpacity, seriesSlotColor, useSeriesHighlight } from "./components/chart.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 { 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, 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, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, 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, collapsePanelClassName, composite, contrastRatio, cx, deltaE, deriveTheme, errorPageKind, fieldBox, fitSeed, 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, seriesColor, 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, 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 };

package/dist/list/ListPage.d.ts

@@ -80,6 +80,33 @@ 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, detail, count, trailing, children, leading, colSpan, className, }: {
+    /** The group's name: text, or an icon, a name with its tooltip, badges. */
+    label?: ReactNode;
+    /** A secondary detail after the label, such as an ID, that gives way first: it shows only
+     *  where the list is at least 36rem wide, and truncates before the label does. */
+    detail?: 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,11 +4,11 @@ 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, 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";
-import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from "react";
+import { Children, cloneElement, createContext, isValidElement, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/ListPage.tsx
 /** Defaults mean rows outside a ListView fully show actions (no view = show everything). */
@@ -16,19 +16,22 @@ var RowActionsContext = createContext({
 	show: true,
 	always: false,
 	columnClasses: [],
-	columnStacks: []
+	columnStacks: [],
+	lastLocked: false
 });
 function useRowActions(view) {
 	return useMemo(() => ({
 		show: view?.showActions ?? true,
 		always: view?.alwaysShowActions ?? false,
 		columnClasses: view?.columnClasses ?? [],
-		columnStacks: view?.columnStacks ?? []
+		columnStacks: view?.columnStacks ?? [],
+		lastLocked: view?.lastColumnLocked ?? false
 	}), [
 		view?.showActions,
 		view?.alwaysShowActions,
 		view?.columnClasses,
-		view?.columnStacks
+		view?.columnStacks,
+		view?.lastColumnLocked
 	]);
 }
 function ListRowActionsProvider({ view, children }) {
@@ -86,10 +89,11 @@ 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 { show: showActions, always: alwaysShowActions, columnClasses, columnStacks, lastLocked } = useContext(RowActionsContext);
 	const cells = Children.toArray(children);
 	const stacked = cells.flatMap((child, i) => {
 		if (i === 0 || !columnStacks[i] || !isValidElement(child)) return [];
@@ -99,14 +103,18 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 		}
 		return [child];
 	});
-	const under = stacked.length > 0 ? stacked.map((child, j) => isValidElement(child) && child.type === "td" ? /* @__PURE__ */ jsx("div", {
-		className: "mt-1 flex min-w-0 items-center @[36rem]:hidden",
-		"data-stacked": true,
-		children: child.props.children
-	}, j) : /* @__PURE__ */ jsx(CellPlacementContext, {
-		value: STACKED,
-		children: child
-	}, j)) : void 0;
+	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);
 		const after = i === 0 ? under : void 0;
@@ -126,7 +134,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 			children: child
 		}, child.key);
 	});
-	const floating = !alwaysShowActions && !(pinnedActions && pinnedActions.length > 0);
+	const floating = !alwaysShowActions && !(pinnedActions && pinnedActions.length > 0) && !lastLocked;
 	const stretch = !!href && !selectionActive;
 	const handleRowClick = (e) => {
 		if (e.target.closest("a,button,input,label")) return;
@@ -151,9 +159,9 @@ 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"),
+					className: cx("absolute inset-y-0 right-0 flex items-center gap-0.5 pr-4", stacked.length > 0 && "@max-[36rem]:items-start @max-[36rem]:pt-2", 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", {
 						className: "hidden items-center gap-0.5 @[44rem]:flex",
 						children: pinnedActions.map((action) => /* @__PURE__ */ jsx(PinnedActionButton, {
@@ -171,6 +179,111 @@ 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, detail, count, trailing, children, leading = 0, colSpan, className }) {
+	const { show: showActions, columnClasses } = useContext(RowActionsContext);
+	const gutters = useRowGutters();
+	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
+		}),
+		detail !== void 0 && detail !== null && detail !== false && /* @__PURE__ */ jsx("span", {
+			className: "ml-2 hidden min-w-0 shrink-[100] truncate text-(--theme-muted-text-color) @[36rem]:block",
+			"data-group-detail": true,
+			children: detail
+		}),
+		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,
+		ref: gutters.ref,
+		style: gutters.style,
+		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 - var(--group-start, 1rem) - var(--group-end, 1rem))" },
+						children: content
+					})
+				})
+			}, i);
+		})
+	});
+}
+/** The padding at a row's ends, read from its first and last shown cells, as custom properties a
+*  group row's header subtracts from the list's width: so it lines up with the rows however the
+*  host pads its list. Until it has measured, 16px, as `listTableProps` pads. */
+function useRowGutters() {
+	const ref = useRef(null);
+	const [gutters, setGutters] = useState(null);
+	useLayoutEffect(() => {
+		const row = ref.current;
+		if (!row || typeof getComputedStyle === "undefined") return;
+		const measure = () => {
+			const cells = Array.from(row.cells).filter((cell) => cell.getClientRects().length > 0);
+			const first = cells[0];
+			const last = cells.at(-1);
+			if (!first || !last) return;
+			const start = getComputedStyle(first).paddingInlineStart;
+			const end = getComputedStyle(last).paddingInlineEnd;
+			setGutters((was) => was?.start === start && was.end === end ? was : {
+				start,
+				end
+			});
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(row);
+		return () => observer.disconnect();
+	}, []);
+	return {
+		ref,
+		style: gutters ? {
+			"--group-start": gutters.start,
+			"--group-end": gutters.end
+		} : void 0
+	};
+}
 function PinnedActionButton({ action, visible }) {
 	warnIfInert(action, "ListPage pinned action");
 	const runAction = useRunAction();
@@ -205,18 +318,57 @@ function columnSort(view, orderBy) {
 	if (view.orderBy !== orderBy) return "none";
 	return view.orderDir === "asc" ? "ascending" : "descending";
 }
+var SHARE_WIDTH = "w-(--share-narrow) @[36rem]:w-(--share-medium) @[52rem]:w-(--share-wide)";
+function percent(width) {
+	const match = typeof width === "string" ? /^(\d+(?:\.\d+)?)%$/.exec(width.trim()) : null;
+	return match ? Number(match[1]) : void 0;
+}
+/** Each column's width at each tier, for a column whose width is a share of the list. The
+*  shares of the columns a tier drops go to those left, each in proportion to its own: the
+*  name's, the rest of the list, among them. */
+function shareWidths(columns, stacks) {
+	const shares = columns.map((col) => percent(col.width));
+	const shows = (col, i, tier) => tier === "wide" || (tier === "medium" ? col.priority !== "low" : !col.priority && !stacks[i]);
+	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 left = 100 - (total - kept);
+		return left > 0 ? 100 / left : 1;
+	};
+	const factors = {
+		wide: 1,
+		medium: scale("medium"),
+		narrow: scale("narrow")
+	};
+	return shares.map((share) => share === void 0 ? void 0 : {
+		wide: share,
+		medium: share * factors.medium,
+		narrow: share * factors.narrow
+	});
+}
+function headerStyle(col, tiers) {
+	const style = {};
+	if (col.alwaysVisible) style["minWidth"] = 200;
+	if (tiers) {
+		style["--share-wide"] = `${tiers.wide}%`;
+		style["--share-medium"] = `${tiers.medium}%`;
+		style["--share-narrow"] = `${tiers.narrow}%`;
+	} else if (col.width !== void 0) style["width"] = col.width;
+	return Object.keys(style).length > 0 ? style : void 0;
+}
 /** 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
 *  cells still size the columns, but nobody sees or hears them, as with any
 *  other display option that is off. */
 function ListColumns({ view }) {
+	const widths = shareWidths(view.visibleColumns, view.columnStacks);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [view.visibleColumns.map((col, i) => {
 		const orderBy = view.orderBys.some((o) => o.value === col.orderBy) ? col.orderBy : void 0;
 		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,
+			className: cx(col.headerClassName, view.columnClasses[i], widths[i] && SHARE_WIDTH, !view.showColumnHeaders && "list-headers-off"),
+			style: headerStyle(col, widths[i]),
 			sort: orderBy === void 0 ? void 0 : columnSort(view, orderBy),
 			onSort: orderBy === void 0 ? void 0 : () => view.sortBy(orderBy),
 			children: col.label
@@ -229,4 +381,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, }: {
@@ -117,6 +113,7 @@ export declare function ListActionsHeader({ view, actionCount, className, }: {
         showActions: boolean;
         actionsWidth: number;
         alwaysShowActions?: boolean;
+        lastColumnLocked?: boolean | undefined;
     };
     actionCount?: number;
     className?: string;