@parallelworks/ui 0.84.2 → 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

@@ -89,9 +89,12 @@ export declare function ListRow({ href, onActivate, items, goTo, openMenu, pinne
  * 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, }: {
+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". */

package/dist/list/ListPage.js

@@ -8,7 +8,7 @@ import { CellPlacementContext, STACKED_ITEM, Table } from "../components/Table.j
 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 }) {
@@ -90,7 +93,7 @@ var STACKED_LINE = "mt-1 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 emp
 var isCellElement = (child) => child.type === Table.Item || child.type === "td";
 function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selected, selectionActive, onRowSelect, leading, className, children }) {
 	const { active: menuActive, openMenu: openRowMenu } = useRowMenuActive(openMenu);
-	const { show: showActions, always: alwaysShowActions, columnClasses, columnStacks } = 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 [];
@@ -131,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;
@@ -158,7 +161,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 			showActions && /* @__PURE__ */ jsx(Table.Item, {
 				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, {
@@ -185,13 +188,19 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 * 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 }) {
+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", {
@@ -221,6 +230,8 @@ function GroupRow({ label, count, trailing, children, leading = 0, colSpan, clas
 	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;
@@ -230,7 +241,7 @@ function GroupRow({ label, count, trailing, children, leading = 0, colSpan, clas
 					className: "w-0",
 					children: /* @__PURE__ */ jsx("div", {
 						className: line,
-						style: { width: "calc(100cqw - 2rem)" },
+						style: { width: "calc(100cqw - var(--group-start, 1rem) - var(--group-end, 1rem))" },
 						children: content
 					})
 				})
@@ -238,6 +249,41 @@ function GroupRow({ label, count, trailing, children, leading = 0, colSpan, clas
 		})
 	});
 }
+/** 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();
@@ -272,21 +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 || col.width !== void 0 ? {
-				...col.alwaysVisible && { minWidth: 200 },
-				...col.width !== void 0 && { width: col.width }
-			} : 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

package/dist/list/ListTable.d.ts

@@ -113,6 +113,7 @@ export declare function ListActionsHeader({ view, actionCount, className, }: {
         showActions: boolean;
         actionsWidth: number;
         alwaysShowActions?: boolean;
+        lastColumnLocked?: boolean | undefined;
     };
     actionCount?: number;
     className?: string;

package/dist/list/ListTable.js

@@ -215,7 +215,7 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 	const { common } = useStrings();
 	if (view && !view.showActions) return null;
 	const width = view ? view.actionsWidth : actionsColumnWidth(actionCount);
-	const floating = !!view && !view.alwaysShowActions && view.actionsWidth === actionsColumnWidth(0);
+	const floating = !!view && !view.alwaysShowActions && !view.lastColumnLocked && view.actionsWidth === actionsColumnWidth(0);
 	return /* @__PURE__ */ jsx(Table.Header, {
 		caps: false,
 		style: {

package/dist/list/ListViewControls.d.ts

@@ -1,4 +1,4 @@
-import type { ListView } from './listView.js';
+import { type ListView } from './listView.js';
 import type { ListFilters } from './useListFilters.js';
 export declare function ListDisplayMenu<T>({ view, label }: {
     view: ListView<T>;

package/dist/list/ListViewControls.js

@@ -10,6 +10,7 @@ import { InfoTip } from "../components/InfoTip.js";
 import { Switch } from "../components/Switch.js";
 import { Select } from "../components/Select.js";
 import { AddFilterMenu } from "./ListFilterBar.js";
+import { isLocked } from "./listView.js";
 import { Menu } from "@base-ui/react/menu";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -20,7 +21,7 @@ var pillClassName = "whitespace-nowrap rounded-full border border-(--theme-borde
 var SECTION_LABEL = "mb-2 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)";
 function ListDisplayMenu({ view, label }) {
 	const { common, list: t } = useStrings();
-	const toggleable = view.columns.filter((c) => !c.alwaysVisible);
+	const toggleable = view.columns.filter((c) => !isLocked(c));
 	const hasGrouping = view.groupBys.length > 0;
 	const orderDirLabel = view.orderDir === "asc" ? t.ascending : t.descending;
 	return /* @__PURE__ */ jsxs(Popover, {

package/dist/list/index.js

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

package/dist/list/listView.d.ts

@@ -7,8 +7,13 @@ export interface ColumnDef {
     key: string;
     label: string;
     headerClassName?: string;
-    /** Pinned on — never offered in the column picker (e.g. the Name column). */
+    /** Pinned on — never offered in the column picker — and the list's name
+     * column, which keeps a minimum width so it can't be crushed. */
     alwaysVisible?: boolean;
+    /** Always shown and never offered in the column picker, at its own width:
+     * for a column such as a delete button's, which `alwaysVisible` would widen
+     * to a name's minimum. */
+    locked?: boolean;
     /** Hidden until the user turns it on in the Display menu. */
     defaultHidden?: boolean;
     /** NOT a table column (no header) — appears in picker and isVisible, but excluded from visibleColumns. */
@@ -28,8 +33,9 @@ export interface ColumnDef {
     /** The column's width, such as `'12%'` or `128`, set on its header. In a
      * fixed-layout list (`listTableFixedProps`), where every column without one
      * takes an equal share, give the other columns a width each and leave the
-     * name without one, so it takes what they leave. A percentage is of the
-     * list's width, and a hidden column's no longer counts. */
+     * name without one, so it takes what they leave. A percentage is a share of
+     * the list: when narrower widths drop columns, the shares they held go to
+     * the columns left, each in proportion to its own, the name's among them. */
     width?: string | number;
     /** `end` sets the header and the cells against the column's far edge, for
      * figures, sizes and times that compare best lined up on their last digit. */
@@ -37,6 +43,8 @@ export interface ColumnDef {
 }
 /** Column responsive importance; `low` drops before `medium`. See {@link ColumnDef.priority}. */
 type ColumnPriority = 'low' | 'medium';
+/** Whether a column is always shown and kept out of the column picker. */
+export declare function isLocked(col: ColumnDef): boolean;
 interface GroupByOption {
     value: string;
     label: string;
@@ -119,6 +127,10 @@ 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[];
+    /** 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. */
+    lastColumnLocked?: boolean | undefined;
     /** The list's filters, which `ListPage` shows as a row of chips under its toolbar. */
     filterState?: ListFilters | undefined;
 }