@parallelworks/ui 0.18.0 → 0.19.0

package/dist/chunks/{list-qrojZZNv.js → list-CJm875m7.js}

@@ -1,14 +1,14 @@
-import { a as usePersistedState, n as useLink, r as useNavigation, u as useStrings } from "./Provider-Ghua9PkN.js";
-import { T as Avatar, _ as useRowMenuActive, c as PageHeader, f as rowContextMenuProps, u as MoreButton } from "./PageHeader-l49p1nM9.js";
+import { n as useLink, o as usePersistedState, r as useNavigation, u as useStrings } from "./Provider-CDYurraE.js";
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, DisplayIcon, ErrorIcon, FilterIcon, MenuIcon, SearchIcon, XIcon } from "../icons.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-Crxo_eU_.js";
-import { n as Table } from "./Table-4OHjdKdO.js";
+import { n as TOOLTIP_ID, r as TooltipInfo, s as positionKeys } from "./Tooltip-K5HJr4_p.js";
+import { _ as useRowMenuActive, c as PageHeader, f as rowContextMenuProps, u as MoreButton, w as Avatar } from "./PageHeader-0kG_iypP.js";
+import { n as Table } from "./Table-DU2MW8xz.js";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import cx from "classnames";
 import { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 //#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. */
@@ -185,6 +185,74 @@ function ActionToolbar({ groups, right = [], sticky = false }) {
 	});
 }
 //#endregion
+//#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
 //#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";
@@ -274,7 +342,7 @@ function ListSkeleton({ rows = 6 }) {
 		role: "status",
 		"aria-label": loading,
 		className: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
-		children: [Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+		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: [
@@ -285,7 +353,7 @@ function ListSkeleton({ rows = 6 }) {
 				}),
 				/* @__PURE__ */ jsx("div", { className: "ml-auto h-3 w-20 rounded bg-(--theme-muted-panel-bg)" })
 			]
-		}, i)), /* @__PURE__ */ jsx("span", {
+		}, key)), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: loading
 		})]
@@ -381,8 +449,9 @@ function ListRowActionsProvider({ view, 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", (shellPadded ?? SECTION_SHELL_PADDED[section]) && "-m-4"),
+		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
@@ -475,252 +544,46 @@ function useListNavigate() {
 	return useNavigation().goTo;
 }
 //#endregion
-//#region src/list/listView.tsx
-var PRIORITY_SHOW_CLASS = {
-	low: "hidden @[52rem]:table-cell",
-	medium: "hidden @[36rem]:table-cell"
-};
-function columnResponsiveClass(col) {
-	return col.priority ? PRIORITY_SHOW_CLASS[col.priority] : "";
+//#region src/list/textEntry.ts
+/** Guards list-page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
+function isTextEntryContext(target) {
+	const el = target;
+	if (!el) return false;
+	if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable) return true;
+	return Boolean(el.closest?.(".xterm, .monaco-editor, .cm-editor, [role=\"dialog\"]"));
 }
-var DEFAULT_ORDER = "__default";
-var FAVORITE_ORDER = "__favorite";
-/** Persisted grouping + column-visibility + field-filter state for a list page,
-* driving the shared Display/Filter menus. */
-function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], actions = [], actionCount, defaultShowColumnHeaders = false, defaultShowActions = true, isFavorite, isOn, createdAt }) {
-	const t = useStrings().list;
-	const tiebreak = orderBys[0]?.compare;
-	const effectiveOrderBys = useMemo(() => {
-		if (!isFavorite) return orderBys;
-		const favoriteRank = (row) => isFavorite(row) ? 0 : 1;
-		const onRank = (row) => isOn?.(row) ? 0 : 1;
-		const createdMs = (row) => {
-			const v = createdAt?.(row);
-			return v === null || v === void 0 || Number.isNaN(v) ? 0 : v;
+//#endregion
+//#region src/list/ListViewControls.tsx
+/** Shared chrome for the toolbar control buttons (Filter, Display, Search) so
+* they read as a consistent button cluster — matched by ListSearchControl. */
+var listControlButtonClasses = "relative flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
+var FLYOUT = "min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg";
+/** Toggle pill shared by the Display menu's column + pinned-action pickers. */
+function pillClass(on) {
+	return cx("whitespace-nowrap rounded-full border px-2.5 py-1 text-[12px] transition-colors", on ? "border-transparent bg-(--theme-muted-panel-bg) text-(--theme-app)" : "border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)");
+}
+var SECTION_LABEL = "mb-2 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)";
+/** Portals into .ds-root so the panel escapes the toolbar's overflow clipping. */
+function AnchoredPopover({ icon, label, active, shortcut, panelClassName, children }) {
+	const btnRef = useRef(null);
+	const panelRef = useRef(null);
+	const [pos, setPos] = useState(null);
+	const close = useCallback(() => setPos(null), []);
+	const open = useCallback(() => {
+		const r = btnRef.current?.getBoundingClientRect();
+		if (r) setPos({
+			right: Math.max(8, Math.round(window.innerWidth - r.right)),
+			top: Math.round(r.bottom) + 4
+		});
+	}, []);
+	useEffect(() => {
+		if (!pos) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") close();
 		};
-		const newestFirst = (a, b) => createdMs(b) - createdMs(a);
-		return [...[{
-			value: DEFAULT_ORDER,
-			label: t.orderDefault,
-			compare: (a, b) => onRank(a) - onRank(b) || favoriteRank(a) - favoriteRank(b) || newestFirst(a, b) || (tiebreak?.(a, b) ?? 0)
-		}, {
-			value: FAVORITE_ORDER,
-			label: t.orderFavorites,
-			compare: (a, b) => favoriteRank(a) - favoriteRank(b) || (tiebreak?.(a, b) ?? 0)
-		}], ...orderBys];
-	}, [
-		orderBys,
-		isFavorite,
-		isOn,
-		createdAt,
-		tiebreak,
-		t
-	]);
-	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 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);
-	const [groupBy, setGroupBy] = usePersistedState(`${storageKey}:groupBy`, defaultGroupByValue);
-	const [showColumnHeaders, setShowColumnHeaders] = usePersistedState(`${storageKey}:showColumnHeaders`, defaultShowColumnHeaders);
-	const [showActions, setShowActions] = usePersistedState(`${storageKey}:showActions`, defaultShowActions);
-	const [alwaysShowActions, setAlwaysShowActions] = usePersistedState(`${storageKey}:alwaysShowActions`, false);
-	const [orderBy, setOrderBy] = usePersistedState(`${storageKey}:orderBy`, defaultOrderByValue);
-	const [orderDir, setOrderDir] = usePersistedState(`${storageKey}:orderDir`, "asc");
-	const [localFilters, setLocalFilters] = usePersistedState(`${storageKey}:filters`, {});
-	const [sharedFilters, setSharedFilters] = usePersistedState(`${sharedFiltersKey ?? storageKey}:sharedFilters`, {});
-	const sharedKeys = useMemo(() => new Set(facets.filter((f) => f.shared).map((f) => f.key)), [facets]);
-	const filters = useMemo(() => {
-		if (sharedKeys.size === 0) return localFilters;
-		const merged = {};
-		for (const [key, values] of Object.entries(localFilters)) if (!sharedKeys.has(key)) merged[key] = values;
-		for (const key of sharedKeys) {
-			const values = sharedFilters[key];
-			if (values?.length) merged[key] = values;
-		}
-		return merged;
-	}, [
-		localFilters,
-		sharedFilters,
-		sharedKeys
-	]);
-	const pinnedCount = actionCount ?? pinnedKeys.filter((key) => actions.some((action) => action.key === key)).length;
-	const effectiveShowActions = showActions || alwaysShowActions;
-	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);
-	}, [columns, hiddenKeys]);
-	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (c.alwaysVisible || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
-	const columnClasses = useMemo(() => visibleColumns.map(columnResponsiveClass), [visibleColumns]);
-	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
-	const setFacetValues = useCallback((key, values) => {
-		const update = (prev) => {
-			const next = { ...prev };
-			if (values.length) next[key] = values;
-			else delete next[key];
-			return next;
-		};
-		if (sharedKeys.has(key)) setSharedFilters(update);
-		else setLocalFilters(update);
-	}, [
-		setLocalFilters,
-		setSharedFilters,
-		sharedKeys
-	]);
-	const clearFilters = useCallback(() => {
-		setLocalFilters({});
-		if (sharedKeys.size > 0) setSharedFilters((prev) => {
-			const next = { ...prev };
-			for (const key of sharedKeys) delete next[key];
-			return next;
-		});
-	}, [
-		setLocalFilters,
-		setSharedFilters,
-		sharedKeys
-	]);
-	const isPinned = useCallback((key) => pinnedKeys.includes(key), [pinnedKeys]);
-	const togglePinned = useCallback((key) => setPinnedKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setPinnedKeys]);
-	const toggleColumnHeaders = useCallback(() => setShowColumnHeaders((prev) => !prev), [setShowColumnHeaders]);
-	const toggleShowActions = useCallback(() => {
-		if (effectiveShowActions) {
-			setShowActions(false);
-			setAlwaysShowActions(false);
-		} else setShowActions(true);
-	}, [
-		effectiveShowActions,
-		setShowActions,
-		setAlwaysShowActions
-	]);
-	const toggleAlwaysShowActions = useCallback(() => {
-		const next = !alwaysShowActions;
-		setAlwaysShowActions(next);
-		if (next) setShowActions(true);
-	}, [
-		alwaysShowActions,
-		setAlwaysShowActions,
-		setShowActions
-	]);
-	const toggleOrderDir = useCallback(() => setOrderDir((d) => d === "asc" ? "desc" : "asc"), [setOrderDir]);
-	const applyOrder = useCallback((rows) => {
-		const opt = effectiveOrderBys.find((o) => o.value === orderBy);
-		if (!opt) return rows;
-		const sign = orderDir === "asc" ? 1 : -1;
-		return [...rows].sort((a, b) => opt.compare(a, b) * sign);
-	}, [
-		effectiveOrderBys,
-		orderBy,
-		orderDir
-	]);
-	const sameKeys = (a, b) => a.length === b.length && a.every((k) => b.includes(k));
-	const isDisplayDefault = groupBy === defaultGroupByValue && orderBy === defaultOrderByValue && orderDir === "asc" && showColumnHeaders === defaultShowColumnHeaders && showActions === defaultShowActions && alwaysShowActions === false && sameKeys(hiddenKeys, defaultHiddenKeys) && sameKeys(pinnedKeys, defaultPinnedKeys);
-	const resetDisplay = useCallback(() => {
-		setGroupBy(defaultGroupByValue);
-		setOrderBy(defaultOrderByValue);
-		setOrderDir("asc");
-		setShowColumnHeaders(defaultShowColumnHeaders);
-		setShowActions(defaultShowActions);
-		setAlwaysShowActions(false);
-		setHiddenKeys(defaultHiddenKeys);
-		setPinnedKeys(defaultPinnedKeys);
-	}, [
-		setGroupBy,
-		setOrderBy,
-		setOrderDir,
-		defaultOrderByValue,
-		setShowColumnHeaders,
-		setShowActions,
-		setAlwaysShowActions,
-		setHiddenKeys,
-		setPinnedKeys,
-		defaultGroupByValue,
-		defaultHiddenKeys,
-		defaultPinnedKeys,
-		defaultShowColumnHeaders,
-		defaultShowActions
-	]);
-	return {
-		columns,
-		visibleColumns,
-		columnClasses,
-		isVisible,
-		pinnedCount,
-		actionsWidth,
-		toggleColumn,
-		groupBys,
-		groupBy,
-		setGroupBy,
-		orderBys: effectiveOrderBys,
-		orderBy,
-		setOrderBy,
-		orderDir,
-		toggleOrderDir,
-		applyOrder,
-		facets,
-		filters,
-		setFacetValues,
-		clearFilters,
-		activeFilterCount: useMemo(() => Object.values(filters).filter((v) => v && v.length > 0).length, [filters]),
-		applyFilters: useCallback((rows) => rows.filter((row) => facets.every((f) => {
-			const selected = filters[f.key];
-			return !selected || selected.length === 0 ? true : f.matches(row, selected);
-		})), [facets, filters]),
-		actions,
-		isPinned,
-		togglePinned,
-		showColumnHeaders,
-		toggleColumnHeaders,
-		showActions: effectiveShowActions,
-		toggleShowActions,
-		alwaysShowActions,
-		toggleAlwaysShowActions,
-		isDisplayDefault,
-		resetDisplay
-	};
-}
-//#endregion
-//#region src/list/textEntry.ts
-/** Guards list-page shortcuts from firing inside inputs, terminals, editors, and dialogs. */
-function isTextEntryContext(target) {
-	const el = target;
-	if (!el) return false;
-	if (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.isContentEditable) return true;
-	return Boolean(el.closest?.(".xterm, .monaco-editor, .cm-editor, [role=\"dialog\"]"));
-}
-//#endregion
-//#region src/list/ListViewControls.tsx
-/** Shared chrome for the toolbar control buttons (Filter, Display, Search) so
-* they read as a consistent button cluster — matched by ListSearchControl. */
-var listControlButtonClasses = "relative flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
-var FLYOUT = "min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg";
-/** Toggle pill shared by the Display menu's column + pinned-action pickers. */
-function pillClass(on) {
-	return cx("whitespace-nowrap rounded-full border px-2.5 py-1 text-[12px] transition-colors", on ? "border-transparent bg-(--theme-muted-panel-bg) text-(--theme-app)" : "border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)");
-}
-var SECTION_LABEL = "mb-2 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)";
-/** Portals into .ds-root so the panel escapes the toolbar's overflow clipping. */
-function AnchoredPopover({ icon, label, active, shortcut, panelClassName, children }) {
-	const btnRef = useRef(null);
-	const panelRef = useRef(null);
-	const [pos, setPos] = useState(null);
-	const close = useCallback(() => setPos(null), []);
-	const open = useCallback(() => {
-		const r = btnRef.current?.getBoundingClientRect();
-		if (r) setPos({
-			right: Math.max(8, Math.round(window.innerWidth - r.right)),
-			top: Math.round(r.bottom) + 4
-		});
-	}, []);
-	useEffect(() => {
-		if (!pos) return;
-		const onKey = (e) => {
-			if (e.key === "Escape") close();
-		};
-		const onScroll = (e) => {
-			if (e.target instanceof Node && panelRef.current?.contains(e.target)) return;
-			close();
+		const onScroll = (e) => {
+			if (e.target instanceof Node && panelRef.current?.contains(e.target)) return;
+			close();
 		};
 		window.addEventListener("keydown", onKey);
 		window.addEventListener("scroll", onScroll, true);
@@ -915,14 +778,16 @@ function useCloseOnOutsideClick(open, close) {
 function GroupingDropdown({ view }) {
 	const t = useStrings().list;
 	const [open, setOpen] = useState(false);
+	const ref = useCloseOnOutsideClick(open, useCallback(() => setOpen(false), []));
+	const current = view.groupBys.find((g) => g.value === view.groupBy);
 	return /* @__PURE__ */ jsxs("div", {
-		ref: useCloseOnOutsideClick(open, useCallback(() => setOpen(false), [])),
+		ref,
 		className: "relative",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setOpen((o) => !o),
 			className: "flex items-center gap-1.5 rounded-md border border-(--theme-border) px-2 py-1 text-[12px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
-			children: [view.groupBys.find((g) => g.value === view.groupBy)?.label ?? t.none, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-2.5 w-2.5 opacity-60" })]
+			children: [current?.label ?? t.none, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-2.5 w-2.5 opacity-60" })]
 		}), open && /* @__PURE__ */ jsx("div", {
 			className: cx("absolute right-0 top-full z-20 mt-1", FLYOUT),
 			children: view.groupBys.map((g) => /* @__PURE__ */ jsxs("button", {
@@ -940,14 +805,16 @@ function GroupingDropdown({ view }) {
 function OrderingDropdown({ view }) {
 	const t = useStrings().list;
 	const [open, setOpen] = useState(false);
+	const ref = useCloseOnOutsideClick(open, useCallback(() => setOpen(false), []));
+	const current = view.orderBys.find((o) => o.value === view.orderBy);
 	return /* @__PURE__ */ jsxs("div", {
-		ref: useCloseOnOutsideClick(open, useCallback(() => setOpen(false), [])),
+		ref,
 		className: "relative",
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setOpen((o) => !o),
 			className: "flex items-center gap-1.5 rounded-md border border-(--theme-border) px-2 py-1 text-[12px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
-			children: [view.orderBys.find((o) => o.value === view.orderBy)?.label ?? t.none, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-2.5 w-2.5 opacity-60" })]
+			children: [current?.label ?? t.none, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-2.5 w-2.5 opacity-60" })]
 		}), open && /* @__PURE__ */ jsx("div", {
 			className: cx("absolute right-0 top-full z-20 mt-1", FLYOUT),
 			children: view.orderBys.map((o) => /* @__PURE__ */ jsxs("button", {
@@ -1049,6 +916,59 @@ function FilterFacetRow({ view, facet, open, onEnter, onLeave }) {
 	});
 }
 //#endregion
+//#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
 //#region src/list/listSearch.tsx
 var NO_TERMS = [];
 /** Pass `enabled: false` to suspend the global ⌘F/`/` hijack (e.g. when search isn't shown and browser Find should stay active). */
@@ -1178,123 +1098,210 @@ function ListCount({ total, matches, filterActive, noun, nounPlural }) {
 	});
 }
 //#endregion
-//#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
-//#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
-	};
+//#region src/list/listView.tsx
+var PRIORITY_SHOW_CLASS = {
+	low: "hidden @[52rem]:table-cell",
+	medium: "hidden @[36rem]:table-cell"
+};
+function columnResponsiveClass(col) {
+	return col.priority ? PRIORITY_SHOW_CLASS[col.priority] : "";
 }
-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;
-		setPos({
-			left: Math.max(pad, Math.min(x, window.innerWidth - width - pad)),
-			top: y + 8 + height + pad > window.innerHeight ? Math.max(pad, y - 8 - height) : y + 8
+var DEFAULT_ORDER = "__default";
+var FAVORITE_ORDER = "__favorite";
+/** Persisted grouping + column-visibility + field-filter state for a list page,
+* driving the shared Display/Filter menus. */
+function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], actions = [], actionCount, defaultShowColumnHeaders = false, defaultShowActions = true, isFavorite, isOn, createdAt }) {
+	const t = useStrings().list;
+	const tiebreak = orderBys[0]?.compare;
+	const effectiveOrderBys = useMemo(() => {
+		if (!isFavorite) return orderBys;
+		const favoriteRank = (row) => isFavorite(row) ? 0 : 1;
+		const onRank = (row) => isOn?.(row) ? 0 : 1;
+		const createdMs = (row) => {
+			const v = createdAt?.(row);
+			return v === null || v === void 0 || Number.isNaN(v) ? 0 : v;
+		};
+		const newestFirst = (a, b) => createdMs(b) - createdMs(a);
+		return [...[{
+			value: DEFAULT_ORDER,
+			label: t.orderDefault,
+			compare: (a, b) => onRank(a) - onRank(b) || favoriteRank(a) - favoriteRank(b) || newestFirst(a, b) || (tiebreak?.(a, b) ?? 0)
+		}, {
+			value: FAVORITE_ORDER,
+			label: t.orderFavorites,
+			compare: (a, b) => favoriteRank(a) - favoriteRank(b) || (tiebreak?.(a, b) ?? 0)
+		}], ...orderBys];
+	}, [
+		orderBys,
+		isFavorite,
+		isOn,
+		createdAt,
+		tiebreak,
+		t
+	]);
+	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 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);
+	const [groupBy, setGroupBy] = usePersistedState(`${storageKey}:groupBy`, defaultGroupByValue);
+	const [showColumnHeaders, setShowColumnHeaders] = usePersistedState(`${storageKey}:showColumnHeaders`, defaultShowColumnHeaders);
+	const [showActions, setShowActions] = usePersistedState(`${storageKey}:showActions`, defaultShowActions);
+	const [alwaysShowActions, setAlwaysShowActions] = usePersistedState(`${storageKey}:alwaysShowActions`, false);
+	const [orderBy, setOrderBy] = usePersistedState(`${storageKey}:orderBy`, defaultOrderByValue);
+	const [orderDir, setOrderDir] = usePersistedState(`${storageKey}:orderDir`, "asc");
+	const [localFilters, setLocalFilters] = usePersistedState(`${storageKey}:filters`, {});
+	const [sharedFilters, setSharedFilters] = usePersistedState(`${sharedFiltersKey ?? storageKey}:sharedFilters`, {});
+	const sharedKeys = useMemo(() => new Set(facets.filter((f) => f.shared).map((f) => f.key)), [facets]);
+	const filters = useMemo(() => {
+		if (sharedKeys.size === 0) return localFilters;
+		const merged = {};
+		for (const [key, values] of Object.entries(localFilters)) if (!sharedKeys.has(key)) merged[key] = values;
+		for (const key of sharedKeys) {
+			const values = sharedFilters[key];
+			if (values?.length) merged[key] = values;
+		}
+		return merged;
+	}, [
+		localFilters,
+		sharedFilters,
+		sharedKeys
+	]);
+	const pinnedCount = actionCount ?? pinnedKeys.filter((key) => actions.some((action) => action.key === key)).length;
+	const effectiveShowActions = showActions || alwaysShowActions;
+	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);
+	}, [columns, hiddenKeys]);
+	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (c.alwaysVisible || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
+	const columnClasses = useMemo(() => visibleColumns.map(columnResponsiveClass), [visibleColumns]);
+	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
+	const setFacetValues = useCallback((key, values) => {
+		const update = (prev) => {
+			const next = { ...prev };
+			if (values.length) next[key] = values;
+			else delete next[key];
+			return next;
+		};
+		if (sharedKeys.has(key)) setSharedFilters(update);
+		else setLocalFilters(update);
+	}, [
+		setLocalFilters,
+		setSharedFilters,
+		sharedKeys
+	]);
+	const clearFilters = useCallback(() => {
+		setLocalFilters({});
+		if (sharedKeys.size > 0) setSharedFilters((prev) => {
+			const next = { ...prev };
+			for (const key of sharedKeys) delete next[key];
+			return next;
 		});
 	}, [
-		x,
-		y,
-		relayoutKey
+		setLocalFilters,
+		setSharedFilters,
+		sharedKeys
 	]);
-	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);
+	const isPinned = useCallback((key) => pinnedKeys.includes(key), [pinnedKeys]);
+	const togglePinned = useCallback((key) => setPinnedKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setPinnedKeys]);
+	const toggleColumnHeaders = useCallback(() => setShowColumnHeaders((prev) => !prev), [setShowColumnHeaders]);
+	const toggleShowActions = useCallback(() => {
+		if (effectiveShowActions) {
+			setShowActions(false);
+			setAlwaysShowActions(false);
+		} else setShowActions(true);
+	}, [
+		effectiveShowActions,
+		setShowActions,
+		setAlwaysShowActions
+	]);
+	const toggleAlwaysShowActions = useCallback(() => {
+		const next = !alwaysShowActions;
+		setAlwaysShowActions(next);
+		if (next) setShowActions(true);
+	}, [
+		alwaysShowActions,
+		setAlwaysShowActions,
+		setShowActions
+	]);
+	const toggleOrderDir = useCallback(() => setOrderDir((d) => d === "asc" ? "desc" : "asc"), [setOrderDir]);
+	const applyOrder = useCallback((rows) => {
+		const opt = effectiveOrderBys.find((o) => o.value === orderBy);
+		if (!opt) return rows;
+		const sign = orderDir === "asc" ? 1 : -1;
+		return [...rows].sort((a, b) => opt.compare(a, b) * sign);
+	}, [
+		effectiveOrderBys,
+		orderBy,
+		orderDir
+	]);
+	const sameKeys = (a, b) => a.length === b.length && a.every((k) => b.includes(k));
+	const isDisplayDefault = groupBy === defaultGroupByValue && orderBy === defaultOrderByValue && orderDir === "asc" && showColumnHeaders === defaultShowColumnHeaders && showActions === defaultShowActions && alwaysShowActions === false && sameKeys(hiddenKeys, defaultHiddenKeys) && sameKeys(pinnedKeys, defaultPinnedKeys);
+	const resetDisplay = useCallback(() => {
+		setGroupBy(defaultGroupByValue);
+		setOrderBy(defaultOrderByValue);
+		setOrderDir("asc");
+		setShowColumnHeaders(defaultShowColumnHeaders);
+		setShowActions(defaultShowActions);
+		setAlwaysShowActions(false);
+		setHiddenKeys(defaultHiddenKeys);
+		setPinnedKeys(defaultPinnedKeys);
+	}, [
+		setGroupBy,
+		setOrderBy,
+		setOrderDir,
+		defaultOrderByValue,
+		setShowColumnHeaders,
+		setShowActions,
+		setAlwaysShowActions,
+		setHiddenKeys,
+		setPinnedKeys,
+		defaultGroupByValue,
+		defaultHiddenKeys,
+		defaultPinnedKeys,
+		defaultShowColumnHeaders,
+		defaultShowActions
+	]);
+	return {
+		columns,
+		visibleColumns,
+		columnClasses,
+		isVisible,
+		pinnedCount,
+		actionsWidth,
+		toggleColumn,
+		groupBys,
+		groupBy,
+		setGroupBy,
+		orderBys: effectiveOrderBys,
+		orderBy,
+		setOrderBy,
+		orderDir,
+		toggleOrderDir,
+		applyOrder,
+		facets,
+		filters,
+		setFacetValues,
+		clearFilters,
+		activeFilterCount: useMemo(() => Object.values(filters).filter((v) => v && v.length > 0).length, [filters]),
+		applyFilters: useCallback((rows) => rows.filter((row) => facets.every((f) => {
+			const selected = filters[f.key];
+			return !selected || selected.length === 0 ? true : f.matches(row, selected);
+		})), [facets, filters]),
+		actions,
+		isPinned,
+		togglePinned,
+		showColumnHeaders,
+		toggleColumnHeaders,
+		showActions: effectiveShowActions,
+		toggleShowActions,
+		alwaysShowActions,
+		toggleAlwaysShowActions,
+		isDisplayDefault,
+		resetDisplay
+	};
 }
 //#endregion
 //#region src/list/UserHoverCard.tsx
@@ -1408,4 +1415,4 @@ function HoverCardRow({ icon, children, title, align = "center", truncate = fals
 	});
 }
 //#endregion
-export { actionsColumnWidth as A, GroupRow as C, NAME_MIN_WIDTH_PX as D, ListSkeleton as E, stickyTabsClasses as F, stickyTabsUnderHeaderClasses as I, stickyToolbarClasses as L, listTableProps as M, ActionToolbar as N, NameCell as O, ToolbarButton as P, useListNavigate as S, ListError as T, useListView as _, useHoverCard as a, ListRow as b, ListCount as c, ListDisplayMenu as d, ListFilterMenu as f, FAVORITE_ORDER as g, DEFAULT_ORDER as h, HoverCardSurface as i, listTableFixedProps as j, RowSelectCheckbox as k, ListSearchControl as l, isTextEntryContext as m, HoverCardTrigger as n, LIST_PAGE_SIZES as o, listControlButtonClasses as p, UserHoverCard as r, ListPager as s, HoverCardRow as t, useListSearch as u, ListColumns as v, ListActionsHeader as w, ListRowActionsProvider as x, ListPage as y };
+export { listTableProps as A, ListError as C, RowSelectCheckbox as D, NameCell as E, stickyTabsClasses as F, stickyTabsUnderHeaderClasses as I, stickyToolbarClasses as L, useHoverCard as M, ActionToolbar as N, actionsColumnWidth as O, ToolbarButton as P, ListActionsHeader as S, NAME_MIN_WIDTH_PX as T, ListPage as _, FAVORITE_ORDER as a, useListNavigate as b, ListSearchControl as c, ListPager as d, ListDisplayMenu as f, ListColumns as g, isTextEntryContext as h, DEFAULT_ORDER as i, HoverCardSurface as j, listTableFixedProps as k, useListSearch as l, listControlButtonClasses as m, HoverCardTrigger as n, useListView as o, ListFilterMenu as p, UserHoverCard as r, ListCount as s, HoverCardRow as t, LIST_PAGE_SIZES as u, ListRow as v, ListSkeleton as w, GroupRow as x, ListRowActionsProvider as y };