@parallelworks/ui 0.84.2 → 0.86.0

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;
 }

package/dist/list/listView.js

@@ -11,6 +11,10 @@ var PRIORITY_SHOW_CLASS = {
 function stacks(col, i) {
 	return i > 0 && !col.priority && col.stack !== false;
 }
+/** Whether a column is always shown and kept out of the column picker. */
+function isLocked(col) {
+	return Boolean(col.alwaysVisible || col.locked);
+}
 function columnResponsiveClass(col, i) {
 	if (stacks(col, i)) return PRIORITY_SHOW_CLASS.medium;
 	return col.priority ? PRIORITY_SHOW_CLASS[col.priority] : "";
@@ -55,7 +59,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	]);
 	const defaultGroupByValue = defaultGroupBy ?? groupBys[0]?.value ?? "";
 	const defaultOrderByValue = isFavorite ? DEFAULT_ORDER : defaultOrderBy ?? orderBys[0]?.value ?? "";
-	const defaultHiddenKeys = useMemo(() => columns.filter((c) => c.defaultHidden && !c.alwaysVisible).map((c) => c.key), [columns]);
+	const defaultHiddenKeys = useMemo(() => columns.filter((c) => c.defaultHidden && !isLocked(c)).map((c) => c.key), [columns]);
 	const defaultPinnedKeys = useMemo(() => actions.filter((a) => a.defaultPinned).map((a) => a.key), [actions]);
 	const [hiddenKeys, setHiddenKeys] = usePersistedState(`${storageKey}:hiddenColumns`, defaultHiddenKeys);
 	const [pinnedKeys, setPinnedKeys] = usePersistedState(`${storageKey}:pinnedActions`, defaultPinnedKeys);
@@ -84,11 +88,13 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	const actionsWidth = effectiveShowActions ? actionsColumnWidth(pinnedCount) : 0;
 	const isVisible = useCallback((key) => {
 		const col = columns.find((c) => c.key === key);
-		return Boolean(col?.alwaysVisible) || !hiddenKeys.includes(key);
+		return col !== void 0 && isLocked(col) || !hiddenKeys.includes(key);
 	}, [columns, hiddenKeys]);
-	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (c.alwaysVisible || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
+	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 last = visibleColumns.at(-1);
+	const lastColumnLocked = visibleColumns.length > 1 && last !== void 0 && !last.alwaysVisible && isLocked(last);
 	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
 	const { add, update, remove } = filterState;
 	const setFacetValues = useCallback((key, values) => {
@@ -183,6 +189,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		visibleColumns,
 		columnClasses,
 		columnStacks,
+		lastColumnLocked,
 		isVisible,
 		pinnedCount,
 		actionsWidth,
@@ -230,4 +237,4 @@ function facetField(facet) {
 	};
 }
 //#endregion
-export { DEFAULT_ORDER, FAVORITE_ORDER, useListView };
+export { DEFAULT_ORDER, FAVORITE_ORDER, isLocked, useListView };