@parallelworks/ui 0.17.0 → 0.19.0

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

@@ -1,14 +1,14 @@
+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 { a as usePersistedState, n as useLink, r as useNavigation, u as useStrings } from "./Provider-DHmZ3v9i.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-n9w7Tkt1.js";
-import { _ as useRowMenuActive, c as PageHeader, p as rowContextMenuProps, u as MoreButton } from "./PageHeader-MxuOs9cH.js";
-import { n as Table } from "./Table-C6JdFFiJ.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Children, Fragment as Fragment$1, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+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. */
@@ -20,7 +20,7 @@ function tipProps(content, place) {
 	};
 }
 function ToolbarItemView({ item }) {
-	if ("element" in item) return /* @__PURE__ */ jsx(Fragment, { children: item.element });
+	if ("element" in item) return /* @__PURE__ */ jsx(Fragment$1, { children: item.element });
 	return /* @__PURE__ */ jsx(ToolbarButton, { action: item });
 }
 function ToolbarButton({ action }) {
@@ -30,7 +30,7 @@ function ToolbarButton({ 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, { children: [/* @__PURE__ */ jsx("div", {
+	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] });
@@ -64,7 +64,7 @@ function OverflowRow({ item }) {
 	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, { children: [/* @__PURE__ */ jsx("div", {
+	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] });
@@ -106,7 +106,7 @@ function OverflowMenu({ items }) {
 			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$1, { children: item.element }, item.key) : /* @__PURE__ */ jsx(OverflowRow, { item }, item.key))
+				children: items.map((item) => "element" in item ? /* @__PURE__ */ jsx(Fragment, { children: item.element }, item.key) : /* @__PURE__ */ jsx(OverflowRow, { item }, item.key))
 			})
 		})]
 	});
@@ -177,7 +177,7 @@ function ActionToolbar({ groups, right = [], sticky = false }) {
 		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$1, { children: [i > 0 && /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-(--theme-border)" }), /* @__PURE__ */ jsx("div", {
+			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))
@@ -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";
@@ -205,7 +273,7 @@ var listTableFixedProps = {
 };
 function NameCell({ icon, name, subtitle, href, badge, title }) {
 	const Link = useLink();
-	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
+	const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, /* @__PURE__ */ jsxs("div", {
 		className: "min-w-0",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-1.5",
@@ -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
 		})]
@@ -332,7 +400,7 @@ function ListActionsHeader({ view, actionCount = 0, className }) {
 			width,
 			minWidth: width
 		},
-		className: cx("py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
+		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"
@@ -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
@@ -462,7 +531,7 @@ function ListRow({ href, onActivate, items, goTo, openMenu, pinnedActions, selec
 }
 /** Name column min-width is by role, not position, so a leading checkbox doesn't shift it. */
 function ListColumns({ view }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [view.visibleColumns.map((col, i) => /* @__PURE__ */ jsx(Table.Header, {
+	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,
@@ -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);
@@ -743,7 +606,7 @@ function AnchoredPopover({ icon, label, active, shortcut, panelClassName, childr
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
 	}, [shortcut, open]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
 		ref: btnRef,
 		type: "button",
 		onClick: () => pos ? close() : open(),
@@ -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", {
@@ -986,7 +853,7 @@ function FilterMenuBody({ view }) {
 	const scheduleClose = () => {
 		closeTimer.current = setTimeout(() => setOpenKey(null), 160);
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center justify-between px-3 py-1",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)",
@@ -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,321 @@ 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" })
-			})]
-		})]
-	});
+//#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] : "";
 }
-//#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);
+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;
+		});
+	}, [
+		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 {
-		triggerRef,
-		coords,
-		scheduleOpen,
-		scheduleClose,
-		keepOpen
+		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
 	};
 }
-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
-		});
-	}, [
+//#endregion
+//#region src/list/UserHoverCard.tsx
+/** Opens `card` after a short hover or on focus of `children`. */
+function HoverCardTrigger({ className, children, card }) {
+	const { triggerRef, coords, scheduleOpen, scheduleClose, keepOpen } = useHoverCard();
+	return /* @__PURE__ */ jsxs("span", {
+		ref: triggerRef,
+		role: "none",
+		className,
+		onMouseEnter: scheduleOpen,
+		onMouseLeave: scheduleClose,
+		onFocus: scheduleOpen,
+		onBlur: scheduleClose,
+		children: [children, coords && card({
+			x: coords.x,
+			y: coords.y,
+			onKeepOpen: keepOpen,
+			onLeave: scheduleClose
+		})]
+	});
+}
+function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, badge, href, linkComponent, loading = false, relayoutKey, children }) {
+	const strings = useStrings();
+	const SlotLink = useLink();
+	const Link = linkComponent ?? SlotLink;
+	const displayName = name || username;
+	const header = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Avatar, {
+		src: avatarSrc,
+		name: displayName,
+		size: "lg",
+		className: "shrink-0"
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate text-sm font-semibold text-(--theme-app)",
+				children: displayName
+			}), badge && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 rounded-full bg-(--theme-muted-panel-bg) px-1.5 py-0.5 text-[10px] font-medium leading-none text-(--theme-muted-text-color)",
+				children: badge
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "truncate text-xs text-(--theme-muted-text-color)",
+			children: username
+		})]
+	})] });
+	return /* @__PURE__ */ jsxs(HoverCardSurface, {
 		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"
-		},
+		widthClassName: "w-64",
+		relayoutKey,
+		onKeepOpen,
+		onLeave,
+		children: [href ? /* @__PURE__ */ jsx(Link, {
+			to: href,
+			className: "flex items-center gap-3 transition-opacity hover:opacity-80",
+			children: header
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-3",
+			children: header
+		}), loading ? /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			"aria-label": strings.loading,
+			className: "mt-3 space-y-2 border-t border-(--theme-border) pt-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "h-3 w-24 animate-pulse rounded theme-muted-panel"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: "h-3 w-36 animate-pulse rounded theme-muted-panel"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: strings.loading
+				})
+			]
+		}) : children ? /* @__PURE__ */ jsx("div", {
+			className: "mt-3 space-y-2 border-t border-(--theme-border) pt-3 text-[13px]",
+			children
+		}) : null]
+	});
+}
+var rowClasses = "flex gap-2 text-(--theme-muted-text-color)";
+/** One detail line of a hover card: a leading icon and its content. With
+* `onClick` the line is a button. */
+function HoverCardRow({ icon, children, title, align = "center", truncate = false, onClick }) {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("flex shrink-0 items-center [&>svg]:h-3.5 [&>svg]:w-3.5", align === "start" && "mt-0.5"),
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		className: cx("min-w-0", truncate && "truncate"),
 		children
-	}), document.querySelector(".ds-root") ?? document.body);
+	})] });
+	const alignClass = align === "start" ? "items-start" : "items-center";
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		onClick,
+		className: cx(rowClasses, alignClass, "-mx-1 max-w-full rounded px-1 py-0.5 text-left transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)"),
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		title,
+		className: cx(rowClasses, alignClass),
+		children: content
+	});
 }
 //#endregion
-export { ActionToolbar as A, ListSkeleton as C, actionsColumnWidth as D, RowSelectCheckbox as E, stickyTabsClasses as M, stickyTabsUnderHeaderClasses as N, listTableFixedProps as O, stickyToolbarClasses as P, ListError as S, NameCell as T, ListRow as _, ListCount as a, GroupRow as b, ListDisplayMenu as c, isTextEntryContext as d, DEFAULT_ORDER as f, ListPage as g, ListColumns as h, ListPager as i, ToolbarButton as j, listTableProps as k, ListFilterMenu as l, useListView as m, useHoverCard as n, ListSearchControl as o, FAVORITE_ORDER as p, LIST_PAGE_SIZES as r, useListSearch as s, HoverCardSurface as t, listControlButtonClasses as u, ListRowActionsProvider as v, NAME_MIN_WIDTH_PX as w, ListActionsHeader as x, useListNavigate 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 };