@parallelworks/ui 0.19.0 → 0.19.1

package/dist/list/ActionToolbar.js

@@ -0,0 +1,184 @@
+import { useLink, useStrings } from "../components/Provider.js";
+import { MenuIcon } from "../icons.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import cx from "classnames";
+import { Fragment, createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/list/ActionToolbar.tsx
+var OverflowMenuContext = createContext(false);
+/** Omits data-tooltip-content when absent — react-tooltip treats an explicit undefined as an empty tooltip anchor. */
+function tipProps(content, place) {
+	return {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-place": place,
+		...content !== void 0 && { "data-tooltip-content": content }
+	};
+}
+function ToolbarItemView({ item }) {
+	if ("element" in item) return /* @__PURE__ */ jsx(Fragment$1, { children: item.element });
+	return /* @__PURE__ */ jsx(ToolbarButton, { action: item });
+}
+function ToolbarButton({ action }) {
+	const inOverflowMenu = useContext(OverflowMenuContext);
+	const Link = useLink();
+	if (inOverflowMenu) return /* @__PURE__ */ jsx(OverflowRow, { item: action });
+	const className = cx("inline-flex items-center gap-x-0.5 h-9 px-2 rounded-md text-[13.5px] uppercase font-semibold transition-colors whitespace-nowrap", "bg-(--theme-element) text-(--theme-element-text)", action.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:bg-(--theme-element-hover)");
+	const tooltipProps = tipProps(action.disabled ? action.disabledTooltip : action.enabledTooltip, "bottom");
+	const Icon = action.icon;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "h-6 flex items-center",
+		children: /* @__PURE__ */ jsx(Icon, { className: cx("w-auto", action.iconClassName) })
+	}), action.label] });
+	if (action.href && !action.disabled) return /* @__PURE__ */ jsx(Link, {
+		to: action.href,
+		className,
+		...tooltipProps,
+		children: content
+	});
+	if (action.disabled) return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex",
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled: true,
+			className,
+			children: content
+		})
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: action.onClick,
+		className,
+		...tooltipProps,
+		children: content
+	});
+}
+/** A single overflowed item rendered as a full-width row inside the `…` menu. */
+function OverflowRow({ item }) {
+	const Link = useLink();
+	const Icon = item.icon;
+	const className = cx("flex w-full items-center gap-x-1 px-4 py-2 text-[13px] uppercase font-semibold link hover:theme-hover", item.disabled && "opacity-50 cursor-not-allowed");
+	const tooltipProps = tipProps(item.disabled ? item.disabledTooltip : item.enabledTooltip, "left");
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "w-5 h-6 flex items-center",
+		children: /* @__PURE__ */ jsx(Icon, { className: cx(item.iconClassName) })
+	}), item.label] });
+	if (item.href && !item.disabled) return /* @__PURE__ */ jsx(MenuItem, {
+		as: Link,
+		to: item.href,
+		className,
+		...tooltipProps,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(MenuItem, {
+		as: "button",
+		type: "button",
+		onClick: item.onClick,
+		disabled: item.disabled ?? false,
+		className,
+		...tooltipProps,
+		children: content
+	});
+}
+function OverflowMenu({ items }) {
+	const { list: t } = useStrings();
+	return /* @__PURE__ */ jsxs(Menu, {
+		as: "div",
+		className: "relative inline-block text-left",
+		children: [/* @__PURE__ */ jsx(MenuButton, {
+			"aria-label": t.moreActions,
+			className: "inline-flex items-center justify-center h-9 w-9 rounded-md border theme-border link hover:theme-hover transition-colors",
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": t.moreActions,
+			"data-testid": "action-toolbar-menu-button",
+			children: /* @__PURE__ */ jsx(MenuIcon, {})
+		}), /* @__PURE__ */ jsx(MenuItems, {
+			unmount: false,
+			anchor: {
+				to: "bottom end",
+				gap: 4
+			},
+			className: "z-50 min-w-56 rounded-md border theme-border bg-(--theme-app-bg) shadow-lg py-1 focus:outline-none",
+			children: /* @__PURE__ */ jsx(OverflowMenuContext.Provider, {
+				value: true,
+				children: items.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment, { children: item.element }, item.key) : /* @__PURE__ */ jsx(OverflowRow, { item }, item.key))
+			})
+		})]
+	});
+}
+var MENU_BUTTON_WIDTH = 44;
+var ITEM_GAP = 4;
+function fitCount(widths, available, gap, menuWidth) {
+	if (widths.length === 0) return 0;
+	if (widths.reduce((sum, w) => sum + w, 0) + gap * (widths.length - 1) <= available) return widths.length;
+	let used = menuWidth;
+	let count = 0;
+	for (const w of widths) {
+		if (used + gap + w > available) break;
+		used += gap + w;
+		count++;
+	}
+	return count;
+}
+/** Measures in a layout effect (before paint) so the inline/overflow split never flashes. */
+function CollapsibleRight({ items }) {
+	const wrapRef = useRef(null);
+	const itemRefs = useRef({});
+	const widthCache = useRef({});
+	const [available, setAvailable] = useState(Number.POSITIVE_INFINITY);
+	const [count, setCount] = useState(items.length);
+	useLayoutEffect(() => {
+		const el = wrapRef.current;
+		if (!el) return;
+		const update = () => setAvailable(el.clientWidth);
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		for (const key in itemRefs.current) {
+			const el = itemRefs.current[key];
+			if (el) widthCache.current[key] = el.offsetWidth;
+		}
+		const next = fitCount(items.map((item) => widthCache.current[item.key] ?? 0), available, ITEM_GAP, MENU_BUTTON_WIDTH);
+		setCount((prev) => prev === next ? prev : next);
+	});
+	const visible = items.slice(0, count);
+	const overflow = items.slice(count);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapRef,
+		className: "flex-1 min-w-0 flex items-center justify-end gap-1",
+		children: [visible.map((item) => /* @__PURE__ */ jsx("span", {
+			ref: (el) => {
+				itemRefs.current[item.key] = el;
+			},
+			className: "inline-flex shrink-0",
+			children: /* @__PURE__ */ jsx(ToolbarItemView, { item })
+		}, item.key)), overflow.length > 0 && /* @__PURE__ */ jsx(OverflowMenu, { items: overflow })]
+	});
+}
+/** Pins a detail-page toolbar just below the sticky breadcrumb strip (top-10 matches the strip's 40px height). */
+var stickyToolbarClasses = "sticky top-10 z-10 bg-(--theme-app-bg)";
+/** Pins a detail-page tabs row under the pinned toolbar (top-22 = 40px strip + 48px toolbar block). */
+var stickyTabsClasses = "sticky top-22 z-10 bg-(--theme-app-bg)";
+/** Pins a detail-page tabs row directly under the breadcrumb strip when the page has no pinned toolbar (top-10 = the strip's height). */
+var stickyTabsUnderHeaderClasses = "sticky top-10 z-10 bg-(--theme-app-bg)";
+/** Action groups left, secondary actions right (collapsing into a `…` menu). */
+function ActionToolbar({ groups, right = [], sticky = false }) {
+	const visibleGroups = groups.map((group) => group.filter((a) => !a.hidden)).filter((group) => group.length > 0);
+	const visibleRight = right.filter((a) => !a.hidden);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex items-center gap-2.5", sticky && cx("sticky top-10 z-10 bg-(--theme-app-bg)", "py-1.5")),
+		children: [visibleGroups.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2.5 shrink-0",
+			children: visibleGroups.map((group, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-(--theme-border)" }), /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1",
+				children: group.map((item) => /* @__PURE__ */ jsx(ToolbarItemView, { item }, item.key))
+			})] }, group[0]?.key ?? i))
+		}), visibleRight.length > 0 && /* @__PURE__ */ jsx(CollapsibleRight, { items: visibleRight })]
+	});
+}
+//#endregion
+export { ActionToolbar, ToolbarButton, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses };

package/dist/list/HoverCard.js

@@ -0,0 +1,73 @@
+import cx from "classnames";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/list/HoverCard.tsx
+function useHoverCard() {
+	const triggerRef = useRef(null);
+	const [coords, setCoords] = useState(null);
+	const openTimer = useRef(void 0);
+	const closeTimer = useRef(void 0);
+	useEffect(() => () => {
+		clearTimeout(openTimer.current);
+		clearTimeout(closeTimer.current);
+	}, []);
+	const scheduleOpen = () => {
+		clearTimeout(closeTimer.current);
+		openTimer.current = setTimeout(() => {
+			const rect = triggerRef.current?.getBoundingClientRect();
+			if (rect) setCoords({
+				x: rect.left,
+				y: rect.bottom
+			});
+		}, 350);
+	};
+	const scheduleClose = () => {
+		clearTimeout(openTimer.current);
+		closeTimer.current = setTimeout(() => setCoords(null), 150);
+	};
+	const keepOpen = () => clearTimeout(closeTimer.current);
+	return {
+		triggerRef,
+		coords,
+		scheduleOpen,
+		scheduleClose,
+		keepOpen
+	};
+}
+function HoverCardSurface({ x, y, widthClassName, padded = true, relayoutKey, onKeepOpen, onLeave, children }) {
+	const ref = useRef(null);
+	const [pos, setPos] = useState(null);
+	useLayoutEffect(() => {
+		if (!ref.current) return;
+		const { width, height } = ref.current.getBoundingClientRect();
+		const pad = 8;
+		const left = Math.max(pad, Math.min(x, window.innerWidth - width - pad));
+		const top = y + 8 + height + pad > window.innerHeight ? Math.max(pad, y - 8 - height) : y + 8;
+		setPos({
+			left,
+			top
+		});
+	}, [
+		x,
+		y,
+		relayoutKey
+	]);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref,
+		role: "none",
+		onMouseEnter: onKeepOpen,
+		onMouseLeave: onLeave,
+		onFocus: onKeepOpen,
+		onBlur: onLeave,
+		className: cx("fixed z-[9999] overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) shadow-xl backdrop-blur-xl", padded && "p-3", widthClassName),
+		style: {
+			left: pos?.left ?? x,
+			top: pos?.top ?? y + 8,
+			visibility: pos ? "visible" : "hidden"
+		},
+		children
+	}), document.querySelector(".ds-root") ?? document.body);
+}
+//#endregion
+export { HoverCardSurface, useHoverCard };

package/dist/list/ListPage.js

@@ -0,0 +1,145 @@
+import { useNavigation } from "../components/Provider.js";
+import "../components/Tooltip.js";
+import { MoreButton, rowContextMenuProps, useRowMenuActive } from "./RowContextMenu.js";
+import { PageHeader } from "../components/PageHeader.js";
+import { Table } from "../components/Table.js";
+import { ListActionsHeader } from "./ListTable.js";
+import cx from "classnames";
+import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/list/ListPage.tsx
+/** Negative offsets (admin/org) cancel the shell's pt-4 so rows don't peek through the gap above the pinned header. */
+var SECTION_STICKY_TOP = {
+	main: "top-0",
+	kubernetes: "top-0",
+	admin: "-top-4",
+	org: "-top-4"
+};
+/** Whether the shell adds pt-4 padding that the edge-to-edge list must cancel with a negative margin. */
+var SECTION_SHELL_PADDED = {
+	main: false,
+	kubernetes: false,
+	admin: true,
+	org: true
+};
+/** Defaults mean rows outside a ListView fully show actions (no view = show everything). */
+var RowActionsContext = createContext({
+	show: true,
+	always: false,
+	columnClasses: []
+});
+function useRowActions(view) {
+	return useMemo(() => ({
+		show: view?.showActions ?? true,
+		always: view?.alwaysShowActions ?? false,
+		columnClasses: view?.columnClasses ?? []
+	}), [
+		view?.showActions,
+		view?.alwaysShowActions,
+		view?.columnClasses
+	]);
+}
+function ListRowActionsProvider({ view, children }) {
+	const rowActions = useRowActions(view);
+	return /* @__PURE__ */ jsx(RowActionsContext.Provider, {
+		value: rowActions,
+		children
+	});
+}
+function ListPage({ section = "main", shellPadded, embedded = false, breadcrumbs, title, titleAction, actions, toolbar, view, children }) {
+	const cancelShellPadding = shellPadded ?? SECTION_SHELL_PADDED[section];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex h-full min-h-0 flex-col", cancelShellPadding && "-m-4"),
+		children: [embedded ? toolbar && /* @__PURE__ */ jsx("div", {
+			className: "px-4 py-1.5",
+			children: toolbar
+		}) : /* @__PURE__ */ jsx(PageHeader, {
+			stickyTopClassName: SECTION_STICKY_TOP[section],
+			breadcrumbs,
+			title,
+			titleAction,
+			actions,
+			toolbar
+		}), /* @__PURE__ */ jsx("div", {
+			className: "relative @container min-h-0 flex-1 overflow-auto",
+			children: /* @__PURE__ */ jsx(ListRowActionsProvider, {
+				view,
+				children
+			})
+		})]
+	});
+}
+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 } = useContext(RowActionsContext);
+	const styledCells = Children.toArray(children).map((child, i) => {
+		const cls = columnClasses[i];
+		if (!cls || !isValidElement(child)) return child;
+		const el = child;
+		return cloneElement(el, { className: cx(el.props.className, cls) });
+	});
+	const handleRowClick = (e) => {
+		if (e.target.closest("a,button,input,label")) return;
+		if (selectionActive && onRowSelect) {
+			onRowSelect(e);
+			return;
+		}
+		if (href) goTo(href);
+		else onActivate?.();
+	};
+	const pinnedLabels = new Set((pinnedActions ?? []).map((a) => a.label));
+	const hasOverflowItems = items.some((item) => item.kind !== "divider" && (item.kind === "submenu" || !pinnedLabels.has(item.label)));
+	return /* @__PURE__ */ jsxs("tr", {
+		className: cx("group", selected ? "bg-blue-500/5" : menuActive ? "theme-hover" : "hover:theme-hover", (href || onActivate || selectionActive) && "cursor-pointer", className),
+		onClick: handleRowClick,
+		...rowContextMenuProps(openRowMenu, items),
+		children: [
+			leading,
+			styledCells,
+			showActions && /* @__PURE__ */ jsx(Table.Item, {
+				className: "relative py-2.5",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "absolute inset-y-0 right-0 flex items-center gap-0.5 pr-4",
+					children: [pinnedActions && pinnedActions.length > 0 && /* @__PURE__ */ jsx("span", {
+						className: "hidden items-center gap-0.5 @[44rem]:flex",
+						children: pinnedActions.map((action) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": action.label,
+							"data-tooltip-id": "global-tooltip",
+							"data-tooltip-content": action.disabled && action.tooltip ? action.tooltip : action.label,
+							"data-tooltip-place": "bottom",
+							"aria-disabled": action.disabled,
+							onClick: (e) => {
+								e.stopPropagation();
+								if (action.disabled) return;
+								action.onSelect();
+							},
+							className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) aria-disabled:cursor-not-allowed aria-disabled:opacity-20 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color) [&>svg]:h-4 [&>svg]:w-4", alwaysShowActions || menuActive ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"),
+							children: action.icon
+						}, action.key))
+					}), /* @__PURE__ */ jsx(MoreButton, {
+						active: menuActive || alwaysShowActions,
+						onOpen: (x, y) => openRowMenu(x, y, items),
+						className: hasOverflowItems ? void 0 : "@[44rem]:hidden"
+					})]
+				})
+			})
+		]
+	});
+}
+/** Name column min-width is by role, not position, so a leading checkbox doesn't shift it. */
+function ListColumns({ view }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
+		caps: false,
+		className: cx(col.headerClassName, view.columnClasses[i]),
+		style: col.alwaysVisible ? { minWidth: 200 } : void 0,
+		children: col.label
+	}, col.key)), /* @__PURE__ */ jsx(ListActionsHeader, { view })] });
+}
+ListColumns.isTableHeader = true;
+/** Stable `goTo` for whole-row navigation (`rowNavProps`, `ListRow`). */
+function useListNavigate() {
+	return useNavigation().goTo;
+}
+//#endregion
+export { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate };

package/dist/list/ListPager.js

@@ -0,0 +1,59 @@
+import { useStrings } from "../components/Provider.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
+import { listControlButtonClasses } from "./ListViewControls.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/list/ListPager.tsx
+/** Page sizes offered by the pager's per-page select; first entry is the default. */
+var LIST_PAGE_SIZES = [
+	50,
+	100,
+	200
+];
+/** Footer pager bar for paginated new-nav lists: "{start}–{end} of {total}" with prev/next. Renders nothing for a single page. */
+function ListPager({ page, pageSize, total, onPageChange, pageSizes = LIST_PAGE_SIZES, onPageSizeChange, hasNext }) {
+	const t = useStrings().list;
+	const pageCount = Math.max(1, Math.ceil(total / pageSize));
+	const start = page * pageSize + 1;
+	const end = Math.min(total, (page + 1) * pageSize);
+	const smallest = Math.min(...pageSizes);
+	const showSizeSelect = !!onPageSizeChange && (total > smallest || pageSize > smallest);
+	if (pageCount <= 1 && !showSizeSelect) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between px-2.5 h-10 shrink-0 border-t theme-border",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 text-xs text-(--theme-muted-text-color)",
+			children: [/* @__PURE__ */ jsx("span", { children: t.pager(start, end, total) }), showSizeSelect && /* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-1",
+				children: [t.perPage, /* @__PURE__ */ jsx("select", {
+					value: pageSize,
+					onChange: (e) => onPageSizeChange(Number(e.target.value)),
+					className: "theme-input rounded px-1.5 py-0.5 text-xs",
+					children: pageSizes.map((size) => /* @__PURE__ */ jsx("option", {
+						value: size,
+						children: size
+					}, size))
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t.paginationPrevious,
+				disabled: page === 0,
+				onClick: () => onPageChange(page - 1),
+				className: cx(listControlButtonClasses, "disabled:opacity-40 disabled:pointer-events-none"),
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-3.5 h-3.5" })
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t.paginationNext,
+				disabled: hasNext === void 0 ? page >= pageCount - 1 : !hasNext,
+				onClick: () => onPageChange(page + 1),
+				className: cx(listControlButtonClasses, "disabled:opacity-40 disabled:pointer-events-none"),
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })
+			})]
+		})]
+	});
+}
+//#endregion
+export { LIST_PAGE_SIZES, ListPager };

package/dist/list/ListTable.js

@@ -0,0 +1,163 @@
+import { useLink, useStrings } from "../components/Provider.js";
+import { ErrorIcon } from "../icons.js";
+import { positionKeys } from "../components/keys.js";
+import { Table } from "../components/Table.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/list/ListTable.tsx
+var NAME_TEXT = "font-medium text-[13px] leading-tight text-(--theme-app) truncate";
+var SUBTITLE_TEXT = "text-xs leading-tight text-(--theme-muted-text-color) truncate";
+/** table-auto + horizontal scroll; the name column has a min-width floor so it can't be crushed. */
+var listTableProps = {
+	borderless: true,
+	panel: false,
+	rounded: false,
+	theadClassName: "text-(--theme-muted-text-color)",
+	tbodyClassName: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
+	className: "table-auto w-full [&_td:first-child]:pl-4 [&_th:first-child]:pl-4 [&_td:last-child]:pr-4 [&_th:last-child]:pr-4"
+};
+/** Widths come only from the header row, so a windowed body cannot shift the
+*  columns as different content scrolls into view. */
+var listTableFixedProps = {
+	...listTableProps,
+	className: listTableProps.className.replace("table-auto", "table-fixed")
+};
+function NameCell({ icon, name, subtitle, href, badge, title }) {
+	const Link = useLink();
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(NAME_TEXT, href && "group-hover/namecell:text-(--theme-link)"),
+				title,
+				children: name
+			}), badge]
+		}), subtitle && /* @__PURE__ */ jsx("div", {
+			className: SUBTITLE_TEXT,
+			children: subtitle
+		})]
+	})] });
+	return /* @__PURE__ */ jsx(Table.Item, {
+		className: "py-2.5",
+		children: href ? /* @__PURE__ */ jsx(Link, {
+			to: href,
+			className: "group/namecell flex items-center gap-2.5 min-w-0 cursor-pointer",
+			children: inner
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2.5 min-w-0",
+			children: inner
+		})
+	});
+}
+function GroupRow({ label, count, colSpan }) {
+	return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+		colSpan,
+		className: "bg-(--theme-muted-panel-bg) py-1.5 text-xs font-medium",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-(--theme-app)",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mx-1.5 opacity-50",
+				children: "·"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-(--theme-muted-text-color)",
+				children: count
+			})
+		]
+	}) });
+}
+function ListError({ error, noun = "data" }) {
+	const { list: t } = useStrings();
+	const message = error && typeof error === "object" && "message" in error ? String(error.message) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center gap-3 py-20 text-center",
+		children: [/* @__PURE__ */ jsx(ErrorIcon, { className: "h-10 w-10 text-red-400 opacity-80" }), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium text-(--theme-app)",
+				children: t.couldNotLoad(noun)
+			}), message && /* @__PURE__ */ jsx("p", {
+				className: "max-w-md text-xs text-(--theme-muted-text-color)",
+				children: message
+			})]
+		})]
+	});
+}
+function ListSkeleton({ rows = 6 }) {
+	const { loading } = useStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": loading,
+		className: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
+		children: [positionKeys(rows, "skeleton").map((key) => /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			className: "flex items-center gap-3 px-4 py-2.5 animate-pulse",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "h-5 w-5 rounded bg-(--theme-muted-panel-bg)" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ jsx("div", { className: "h-3 w-40 rounded bg-(--theme-muted-panel-bg)" }), /* @__PURE__ */ jsx("div", { className: "h-2.5 w-24 rounded bg-(--theme-muted-panel-bg)" })]
+				}),
+				/* @__PURE__ */ jsx("div", { className: "ml-auto h-3 w-20 rounded bg-(--theme-muted-panel-bg)" })
+			]
+		}, key)), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: loading
+		})]
+	});
+}
+/** Prevents the name column from being crushed under table-auto layout during horizontal overflow. */
+var NAME_MIN_WIDTH_PX = 200;
+/** Trailing cell geometry: icon-button size + gap + padding, sized to fit exactly its pinned buttons. */
+var ACTION_BUTTON_PX = 24;
+var ACTION_GAP_PX = 2;
+var ACTIONS_CELL_PAD_PX = 28;
+/** Width the trailing actions column reserves for `count` always-visible
+* buttons plus the hover `⋯` trigger. */
+function actionsColumnWidth(count) {
+	const buttons = count + 1;
+	return buttons * ACTION_BUTTON_PX + (buttons - 1) * ACTION_GAP_PX + ACTIONS_CELL_PAD_PX;
+}
+/** Shared leading selection checkbox for multi-select rows: stops the row-click
+* and suppresses shift-click text selection. Wrap in <Table.Item> for `leading`. */
+function RowSelectCheckbox({ checked, label, onToggle }) {
+	return /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		"aria-label": label,
+		checked,
+		onChange: () => {},
+		onClick: (e) => {
+			e.stopPropagation();
+			onToggle(e);
+		},
+		onMouseDown: (e) => {
+			if (e.shiftKey) e.preventDefault();
+		},
+		className: "h-4 w-4 shrink-0 rounded border-(--theme-border) text-blue-500 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer"
+	});
+}
+/** Sizes to fit pinned buttons + ⋯; below ~44rem only ⋯ remains. Pass a view's
+* chrome (structurally: showActions + actionsWidth) or actionCount. */
+function ListActionsHeader({ view, actionCount = 0, className }) {
+	if (view && !view.showActions) return null;
+	const width = view ? view.actionsWidth : actionsColumnWidth(actionCount);
+	return /* @__PURE__ */ jsx(Table.Header, {
+		caps: false,
+		style: {
+			width,
+			minWidth: width
+		},
+		className: cx("relative py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Actions"
+		})
+	});
+}
+ListActionsHeader.isTableHeader = true;
+//#endregion
+export { GroupRow, ListActionsHeader, ListError, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps };