@parallelworks/ui 0.3.1 → 0.4.0

package/dist/chunks/list-D5f5Fq-O.js

@@ -0,0 +1,1259 @@
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, CopyIcon, DisplayIcon, ErrorIcon, FilterIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, SearchIcon, UserIcon, XIcon } from "../icons.js";
+import { c as useStrings, i as useNotify, n as useLink } from "./Provider-uUHgWOWc.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-WgbiC_nd.js";
+import { n as Table } from "./Table-C5z6qWjM.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useLocalStorage } from "usehooks-ts";
+//#region src/list/RowContextMenu.tsx
+/** Converts a single row action to a menu item: a `to` makes it a link, otherwise an action. */
+function toRowMenuItem(action) {
+	if (action.to) return {
+		kind: "link",
+		label: action.label,
+		icon: action.icon,
+		to: action.to,
+		destructive: action.destructive
+	};
+	return {
+		kind: "action",
+		label: action.label,
+		icon: action.icon,
+		onSelect: action.onSelect ?? (() => {}),
+		disabled: action.disabled,
+		destructive: action.destructive
+	};
+}
+/** Bridges a toolbar action (icon component, `onClick`/`href`) onto the shared
+* `RowAction` shape. Typed structurally so any toolbar action shape matching
+* these fields is assignable. */
+function toolbarActionToRowAction(action) {
+	const Icon = action.icon;
+	return {
+		key: action.key,
+		label: action.label,
+		icon: /* @__PURE__ */ jsx(Icon, {}),
+		onSelect: action.onClick,
+		to: action.href,
+		disabled: action.disabled,
+		destructive: action.key === "delete" || action.key === "destroy"
+	};
+}
+/** Assembles a row's context menu in the shared order: leading link(s) → middle
+* actions → extra items → Copy submenu → trailing (destructive) actions last. */
+function assembleRowMenu({ lead = [], actions, exclude, order, trailing = ["delete"], extra = [], copy }) {
+	const trailingSet = new Set(trailing);
+	const excludeSet = new Set(exclude);
+	let middle = actions.filter((a) => !trailingSet.has(a.key) && !excludeSet.has(a.key));
+	if (order) {
+		const byKey = new Map(middle.map((a) => [a.key, a]));
+		middle = order.map((key) => byKey.get(key)).filter((a) => a !== void 0);
+	}
+	const trailingItems = trailing.map((key) => actions.find((a) => a.key === key)).filter((a) => a !== void 0);
+	return [
+		...lead,
+		...middle.map(toRowMenuItem),
+		...extra,
+		...copy ? [copy] : [],
+		...trailingItems.map(toRowMenuItem)
+	];
+}
+function useRowMenu() {
+	const [menu, setMenu] = useState(null);
+	const onCloseRef = useRef(void 0);
+	return {
+		openMenu: useCallback((x, y, items, onClose) => {
+			if (items.length > 0) {
+				onCloseRef.current?.();
+				onCloseRef.current = onClose;
+				setMenu({
+					x,
+					y,
+					items
+				});
+			}
+		}, []),
+		contextMenu: /* @__PURE__ */ jsx(RowContextMenu, {
+			state: menu,
+			onClose: useCallback(() => {
+				onCloseRef.current?.();
+				onCloseRef.current = void 0;
+				setMenu(null);
+			}, [])
+		})
+	};
+}
+/** The full-screen menu overlay drops CSS :hover on the triggering row; wrap openMenu here to substitute a JS-driven `active` highlight. */
+function useRowMenuActive(openMenu) {
+	const [active, setActive] = useState(false);
+	return {
+		active,
+		openMenu: useCallback((x, y, items) => {
+			setActive(true);
+			openMenu(x, y, items, () => setActive(false));
+		}, [openMenu])
+	};
+}
+function rowContextMenuProps(openMenu, items) {
+	return { onContextMenu: (e) => {
+		e.preventDefault();
+		if (items.length > 0) e.stopPropagation();
+		openMenu(e.clientX, e.clientY, items);
+	} };
+}
+function RowContextMenu({ state, onClose }) {
+	const ref = useRef(null);
+	const [pos, setPos] = useState(null);
+	useLayoutEffect(() => {
+		if (!state || !ref.current) {
+			setPos(null);
+			return;
+		}
+		const { width, height } = ref.current.getBoundingClientRect();
+		const pad = 8;
+		const top = height > window.innerHeight - pad - state.y && state.y - height - pad >= 0 ? state.y - height : Math.min(state.y, window.innerHeight - height - pad);
+		setPos({
+			left: Math.max(pad, Math.min(state.x, window.innerWidth - width - pad)),
+			top: Math.max(pad, top)
+		});
+	}, [state]);
+	useEffect(() => {
+		if (!state) return;
+		const close = () => onClose();
+		const onKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		window.addEventListener("scroll", close, true);
+		window.addEventListener("resize", close);
+		window.addEventListener("keydown", onKey);
+		return () => {
+			window.removeEventListener("scroll", close, true);
+			window.removeEventListener("resize", close);
+			window.removeEventListener("keydown", onKey);
+		};
+	}, [state, onClose]);
+	if (!state) return null;
+	const side = (pos?.left ?? state.x) > window.innerWidth * .6 ? "left" : "right";
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50",
+		onClick: onClose,
+		onContextMenu: (e) => {
+			e.preventDefault();
+			if (ref.current?.contains(e.target)) {
+				onClose();
+				return;
+			}
+			const { clientX, clientY } = e;
+			const overlay = e.currentTarget;
+			overlay.style.pointerEvents = "none";
+			const under = document.elementFromPoint(clientX, clientY);
+			overlay.style.pointerEvents = "";
+			onClose();
+			under?.dispatchEvent(new MouseEvent("contextmenu", {
+				bubbles: true,
+				cancelable: true,
+				clientX,
+				clientY
+			}));
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "menu",
+			className: "absolute min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg backdrop-blur-xl",
+			style: {
+				left: pos?.left ?? state.x,
+				top: pos?.top ?? state.y,
+				visibility: pos ? "visible" : "hidden"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(MenuItemList, {
+				items: state.items,
+				onClose,
+				side
+			})
+		})
+	}), document.body);
+}
+var MENU_ITEM_CLASSES = "flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg) transition-colors cursor-pointer [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0";
+function MenuItemList({ items, onClose, side }) {
+	return items.map((item, i) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "my-1 h-px bg-(--theme-border)"
+	}, `divider-${i}`) : /* @__PURE__ */ jsx(MenuRow, {
+		item,
+		onClose,
+		side
+	}, `${item.label}-${i}`));
+}
+function MenuRow({ item, onClose, side }) {
+	const Link = useLink();
+	const notify = useNotify();
+	const { list: t } = useStrings();
+	const [openSub, setOpenSub] = useState(false);
+	const closeTimer = useRef(void 0);
+	if (item.kind === "submenu") {
+		const open = () => {
+			clearTimeout(closeTimer.current);
+			setOpenSub(true);
+		};
+		const close = () => {
+			closeTimer.current = setTimeout(() => setOpenSub(false), 160);
+		};
+		return /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			onMouseEnter: open,
+			onMouseLeave: close,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx(MENU_ITEM_CLASSES, "justify-between text-(--theme-app)"),
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2.5",
+					children: [item.icon, item.label]
+				}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 shrink-0 opacity-60" })]
+			}), openSub && /* @__PURE__ */ jsx("div", {
+				className: cx("absolute -top-1 z-10 min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg", side === "left" ? "right-full" : "left-full"),
+				children: /* @__PURE__ */ jsx(MenuItemList, {
+					items: item.items,
+					onClose,
+					side
+				})
+			})]
+		});
+	}
+	if (item.kind === "link") return /* @__PURE__ */ jsxs(Link, {
+		to: item.to,
+		onClick: onClose,
+		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)"),
+		children: [item.icon, item.label]
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled: item.disabled,
+		onClick: () => {
+			if (item.copy) {
+				const { text, label } = item.copy;
+				navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
+			}
+			item.onSelect?.();
+			onClose();
+		},
+		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)", item.disabled && "opacity-40 cursor-not-allowed hover:bg-transparent"),
+		children: [
+			item.icon,
+			item.label,
+			item.selected && /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-80" })
+		]
+	});
+}
+/** Builds the Copy submenu entries for whichever fields a row has, in stable
+* order. The menu itself performs the copy and notifies; `t` is an optional
+* host translator for the field labels (falls back to the provider defaults'
+* English). */
+function copySubmenu({ name, nameLabel, email, username, uid, id, url, extra, t }) {
+	const items = [
+		{
+			label: nameLabel ?? (t ? t("rowContextMenu.labelName") : "name"),
+			value: name,
+			icon: /* @__PURE__ */ jsx(CopyIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelEmail") : "email",
+			value: email,
+			icon: /* @__PURE__ */ jsx(MailIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelUsername") : "username",
+			value: username,
+			icon: /* @__PURE__ */ jsx(UserIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelUid") : "UID",
+			value: uid === null || uid === void 0 ? null : String(uid),
+			icon: /* @__PURE__ */ jsx(KeyIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelId") : "ID",
+			value: id,
+			icon: /* @__PURE__ */ jsx(IdCardIcon, {})
+		},
+		{
+			label: t ? t("rowContextMenu.labelUrl") : "URL",
+			value: url,
+			icon: /* @__PURE__ */ jsx(LinkIcon, {})
+		},
+		...(extra ?? []).map((e) => ({
+			label: e.label,
+			value: e.value,
+			icon: e.icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
+		}))
+	].filter((f) => f.value).map((f) => ({
+		kind: "action",
+		label: t ? t("rowContextMenu.copy", { label: f.label }) : `Copy ${f.label}`,
+		icon: f.icon,
+		copy: {
+			text: f.value,
+			label: f.label
+		}
+	}));
+	return {
+		kind: "submenu",
+		label: t ? t("common.copy") : "Copy",
+		icon: /* @__PURE__ */ jsx(ClipboardIcon, {}),
+		items
+	};
+}
+/** Stays visible while active (menu open) so it doesn't vanish behind the overlay. */
+function MoreButton({ onOpen, active, className }) {
+	const { list: t } = useStrings();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": t.moreActions,
+		onClick: (e) => {
+			e.stopPropagation();
+			const r = e.currentTarget.getBoundingClientRect();
+			onOpen(r.right, r.bottom);
+		},
+		className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:opacity-100", active ? "opacity-100" : "opacity-0 group-hover:opacity-100", className),
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "h-4 w-4" })
+	});
+}
+//#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";
+/** 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 }) {
+	const Link = useLink();
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: NAME_TEXT,
+			children: name
+		}), 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: "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 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
+		children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+			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)" })
+			]
+		}, i))
+	});
+}
+/** 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("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
+//#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] : "";
+}
+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] = useLocalStorage(`${storageKey}:hiddenColumns`, defaultHiddenKeys);
+	const [pinnedKeys, setPinnedKeys] = useLocalStorage(`${storageKey}:pinnedActions`, defaultPinnedKeys);
+	const [groupBy, setGroupBy] = useLocalStorage(`${storageKey}:groupBy`, defaultGroupByValue);
+	const [showColumnHeaders, setShowColumnHeaders] = useLocalStorage(`${storageKey}:showColumnHeaders`, defaultShowColumnHeaders);
+	const [showActions, setShowActions] = useLocalStorage(`${storageKey}:showActions`, defaultShowActions);
+	const [alwaysShowActions, setAlwaysShowActions] = useLocalStorage(`${storageKey}:alwaysShowActions`, false);
+	const [orderBy, setOrderBy] = useLocalStorage(`${storageKey}:orderBy`, defaultOrderByValue);
+	const [orderDir, setOrderDir] = useLocalStorage(`${storageKey}:orderDir`, "asc");
+	const [localFilters, setLocalFilters] = useLocalStorage(`${storageKey}:filters`, {});
+	const [sharedFilters, setSharedFilters] = useLocalStorage(`${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, window.innerWidth - r.right),
+			top: 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();
+		};
+		window.addEventListener("keydown", onKey);
+		window.addEventListener("scroll", onScroll, true);
+		window.addEventListener("resize", close);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+			window.removeEventListener("scroll", onScroll, true);
+			window.removeEventListener("resize", close);
+		};
+	}, [pos, close]);
+	useEffect(() => {
+		if (!shortcut) return;
+		const onKey = (e) => {
+			if (e.metaKey || e.ctrlKey || e.altKey) return;
+			if (e.key.toLowerCase() !== shortcut.toLowerCase()) return;
+			if (isTextEntryContext(e.target)) return;
+			e.preventDefault();
+			open();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [shortcut, open]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		ref: btnRef,
+		type: "button",
+		onClick: () => pos ? close() : open(),
+		"aria-label": label,
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": label,
+		"data-tooltip-shortcut": shortcut ? shortcut.toUpperCase() : void 0,
+		className: cx(listControlButtonClasses, active && "border-(--theme-link) text-(--theme-app)"),
+		children: [icon, active && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })]
+	}), pos && createPortal(/* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50",
+		onMouseDown: close,
+		onContextMenu: (e) => {
+			e.preventDefault();
+			close();
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref: panelRef,
+			role: "menu",
+			onMouseDown: (e) => e.stopPropagation(),
+			className: cx("absolute rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg", panelClassName),
+			style: {
+				right: pos.right,
+				top: pos.top
+			},
+			children
+		})
+	}), document.querySelector(".ds-root") ?? document.body)] });
+}
+/** Small on/off switch for the Display menu's boolean options. */
+function Switch({ checked, onChange, label }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		"aria-label": label,
+		onClick: onChange,
+		className: cx("relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors", checked ? "bg-(--theme-link)" : "bg-(--theme-border)"),
+		children: /* @__PURE__ */ jsx("span", { className: cx("inline-block h-3 w-3 rounded-full bg-white transition-transform", checked ? "translate-x-3.5" : "translate-x-0.5") })
+	});
+}
+function ListDisplayMenu({ view, label }) {
+	const t = useStrings().list;
+	const toggleable = view.columns.filter((c) => !c.alwaysVisible);
+	const hasGrouping = view.groupBys.length > 0;
+	const orderDirLabel = view.orderDir === "asc" ? t.ascending : t.descending;
+	return /* @__PURE__ */ jsxs(AnchoredPopover, {
+		icon: /* @__PURE__ */ jsx(DisplayIcon, { className: "h-3.5 w-3.5" }),
+		label: label ?? t.displayOptions,
+		panelClassName: "w-72 p-3",
+		children: [
+			hasGrouping && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-app)",
+					children: t.grouping
+				}), /* @__PURE__ */ jsx(GroupingDropdown, { view })]
+			}),
+			view.orderBys.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: cx("flex items-center justify-between gap-3", hasGrouping && "mt-2.5"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-app)",
+					children: t.ordering
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: view.toggleOrderDir,
+						"aria-label": orderDirLabel,
+						title: orderDirLabel,
+						className: "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)",
+						children: view.orderDir === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" })
+					}), /* @__PURE__ */ jsx(OrderingDropdown, { view })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("flex items-center justify-between gap-3", (hasGrouping || view.orderBys.length > 0) && "mt-2.5"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-app)",
+					children: t.columnHeaders
+				}), /* @__PURE__ */ jsx(Switch, {
+					checked: view.showColumnHeaders,
+					onChange: view.toggleColumnHeaders,
+					label: t.showColumnHeaders
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-2.5 flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-app)",
+					children: t.showActions
+				}), /* @__PURE__ */ jsx(Switch, {
+					checked: view.showActions,
+					onChange: view.toggleShowActions,
+					label: t.showRowActions
+				})]
+			}),
+			view.showActions && /* @__PURE__ */ jsxs("div", {
+				className: "mt-2.5 flex items-center justify-between gap-3 pl-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-muted-text-color)",
+					children: t.alwaysShowActions
+				}), /* @__PURE__ */ jsx(Switch, {
+					checked: view.alwaysShowActions,
+					onChange: view.toggleAlwaysShowActions,
+					label: t.alwaysShowRowActions
+				})]
+			}),
+			toggleable.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 border-t border-(--theme-border) pt-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: SECTION_LABEL,
+					children: t.displayProperties
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: toggleable.map((c) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => view.toggleColumn(c.key),
+						className: pillClass(view.isVisible(c.key)),
+						children: c.label
+					}, c.key))
+				})]
+			}),
+			view.showActions && view.actions.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 border-t border-(--theme-border) pt-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx(SECTION_LABEL, "flex items-center gap-1"),
+					children: [t.pinnedActions, /* @__PURE__ */ jsx(TooltipInfo, {
+						className: "inline-flex",
+						text: t.pinnedActionsHelp
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: view.actions.map((a) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => view.togglePinned(a.key),
+						className: pillClass(view.isPinned(a.key)),
+						children: a.label
+					}, a.key))
+				})]
+			}),
+			!view.isDisplayDefault && /* @__PURE__ */ jsx("div", {
+				className: "mt-3 border-t border-(--theme-border) pt-2",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: view.resetDisplay,
+					className: "link text-[12px]",
+					children: t.reset
+				})
+			})
+		]
+	});
+}
+/** Capture phase: the popover panel stops mousedown propagation, so a
+* bubble-phase listener never sees clicks inside it. */
+function useCloseOnOutsideClick(open, close) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const onDown = (e) => {
+			if (e.target instanceof Node && !ref.current?.contains(e.target)) close();
+		};
+		document.addEventListener("mousedown", onDown, true);
+		return () => document.removeEventListener("mousedown", onDown, true);
+	}, [open, close]);
+	return ref;
+}
+function GroupingDropdown({ view }) {
+	const t = useStrings().list;
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useCloseOnOutsideClick(open, useCallback(() => setOpen(false), [])),
+		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" })]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: cx("absolute right-0 top-full z-20 mt-1", FLYOUT),
+			children: view.groupBys.map((g) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					view.setGroupBy(g.value);
+					setOpen(false);
+				},
+				className: cx("flex w-full items-center justify-between gap-3 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg)", view.groupBy === g.value ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+				children: [g.label, view.groupBy === g.value && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" })]
+			}, g.value))
+		})]
+	});
+}
+function OrderingDropdown({ view }) {
+	const t = useStrings().list;
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useCloseOnOutsideClick(open, useCallback(() => setOpen(false), [])),
+		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" })]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: cx("absolute right-0 top-full z-20 mt-1", FLYOUT),
+			children: view.orderBys.map((o) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					view.setOrderBy(o.value);
+					setOpen(false);
+				},
+				className: cx("flex w-full items-center justify-between gap-3 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg)", view.orderBy === o.value ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+				children: [o.label, view.orderBy === o.value && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" })]
+			}, o.value))
+		})]
+	});
+}
+function ListFilterMenu({ view, label }) {
+	const t = useStrings().list;
+	if (view.facets.length === 0) return null;
+	return /* @__PURE__ */ jsx(AnchoredPopover, {
+		icon: /* @__PURE__ */ jsx(FilterIcon, { className: "h-3.5 w-3.5" }),
+		label: label ?? t.filter,
+		active: view.activeFilterCount > 0,
+		shortcut: "f",
+		panelClassName: "w-56 py-1",
+		children: /* @__PURE__ */ jsx(FilterMenuBody, { view })
+	});
+}
+/** Single-open submenu prevents overlapping; resets on panel remount so Filter opens clean. */
+function FilterMenuBody({ view }) {
+	const t = useStrings().list;
+	const [openKey, setOpenKey] = useState(null);
+	const closeTimer = useRef(void 0);
+	const openFacet = (key) => {
+		clearTimeout(closeTimer.current);
+		setOpenKey(key);
+	};
+	const scheduleClose = () => {
+		closeTimer.current = setTimeout(() => setOpenKey(null), 160);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { 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)",
+			children: t.filter
+		}), view.activeFilterCount > 0 && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: view.clearFilters,
+			className: "text-[12px] text-(--theme-muted-text-color) hover:text-(--theme-app)",
+			children: t.clear
+		})]
+	}), view.facets.map((facet) => /* @__PURE__ */ jsx(FilterFacetRow, {
+		view,
+		facet,
+		open: openKey === facet.key,
+		onEnter: () => openFacet(facet.key),
+		onLeave: scheduleClose
+	}, facet.key))] });
+}
+function FilterFacetRow({ view, facet, open, onEnter, onLeave }) {
+	const selected = view.filters[facet.key] ?? [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		onMouseEnter: onEnter,
+		onMouseLeave: onLeave,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex cursor-default items-center justify-between gap-3 px-3 py-1.5 text-[13px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+			children: [/* @__PURE__ */ jsx("span", { children: facet.label }), /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5",
+				children: [selected.length > 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-[11px] text-(--theme-muted-text-color)",
+					children: selected.length
+				}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 opacity-60" })]
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: cx("absolute right-full top-0 z-10 max-h-[70vh] overflow-y-auto", FLYOUT),
+			children: facet.options.map((option) => {
+				const checked = selected.includes(option.value);
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => view.setFacetValues(facet.key, checked ? selected.filter((v) => v !== option.value) : [...selected, option.value]),
+					className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "flex h-3.5 w-3.5 shrink-0 items-center justify-center text-(--theme-link)",
+							children: checked && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" })
+						}),
+						option.icon,
+						option.label
+					]
+				}, option.value);
+			})
+		})]
+	});
+}
+//#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). */
+function useListSearch(enabled = true, storageKey) {
+	const [filter, setFilter] = useState("");
+	const [searchOpen, setSearchOpen] = useState(false);
+	const [storedTerms, setStoredTerms] = useLocalStorage(`${storageKey ?? "list"}:searchTerms`, NO_TERMS);
+	const terms = storageKey ? storedTerms : NO_TERMS;
+	const inputRef = useRef(null);
+	useEffect(() => {
+		if (searchOpen) inputRef.current?.focus();
+	}, [searchOpen]);
+	useEffect(() => {
+		if (!enabled) return;
+		const onKey = (e) => {
+			if (e.key === "Escape" && searchOpen) {
+				setSearchOpen(false);
+				setFilter("");
+				return;
+			}
+			if (isTextEntryContext(e.target)) return;
+			if ((e.key === "f" || e.key === "F") && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+				setSearchOpen(true);
+			} else if (e.key === "/") {
+				e.preventDefault();
+				setSearchOpen(true);
+			}
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [searchOpen, enabled]);
+	const openSearch = useCallback(() => setSearchOpen(true), []);
+	const closeSearch = useCallback(() => {
+		setSearchOpen(false);
+		setFilter("");
+	}, []);
+	const addTerm = useCallback((term) => {
+		const trimmed = term.trim();
+		if (!storageKey || !trimmed) return;
+		setStoredTerms((prev) => prev.some((t) => t.toLowerCase() === trimmed.toLowerCase()) ? prev : [...prev, trimmed]);
+		setFilter("");
+	}, [storageKey, setStoredTerms]);
+	const removeTerm = useCallback((term) => setStoredTerms((prev) => prev.filter((t) => t !== term)), [setStoredTerms]);
+	const clearSearch = useCallback(() => {
+		if (storageKey) setStoredTerms(NO_TERMS);
+		setSearchOpen(false);
+		setFilter("");
+	}, [storageKey, setStoredTerms]);
+	const trimmedFilter = filter.trim();
+	return {
+		filter,
+		setFilter,
+		searchOpen,
+		openSearch,
+		closeSearch,
+		clearSearch,
+		terms,
+		addTerm,
+		removeTerm,
+		queries: trimmedFilter ? [...terms, trimmedFilter] : terms,
+		inputRef
+	};
+}
+function ListSearchControl({ search, placeholder, label = "Search" }) {
+	if (search.searchOpen || search.terms.length > 0) return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-7 w-72 max-w-[55vw] flex-wrap items-center gap-1.5 rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-0.5",
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, { className: "w-3.5 h-3.5 shrink-0 text-(--theme-muted-text-color)" }),
+			search.terms.map((term) => /* @__PURE__ */ jsxs("span", {
+				className: "flex max-w-40 items-center gap-1 rounded border border-(--theme-border) bg-(--theme-app-bg) px-1.5 py-px text-[12px] text-(--theme-app)",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: term
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => search.removeTerm(term),
+					"aria-label": `Remove filter ${term}`,
+					className: "shrink-0 rounded p-0.5 text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
+					children: /* @__PURE__ */ jsx(XIcon, { className: "w-2.5 h-2.5" })
+				})]
+			}, term)),
+			/* @__PURE__ */ jsx("input", {
+				ref: search.inputRef,
+				value: search.filter,
+				onChange: (e) => search.setFilter(e.target.value),
+				onFocus: search.openSearch,
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						search.addTerm(search.filter);
+					} else if (e.key === "Backspace" && !search.filter) {
+						const lastTerm = search.terms.at(-1);
+						if (lastTerm) search.removeTerm(lastTerm);
+					}
+				},
+				placeholder,
+				className: "min-w-24 flex-1 bg-transparent text-[13px] text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: search.clearSearch,
+				"aria-label": "Clear search",
+				className: "shrink-0 rounded p-0.5 text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
+				children: /* @__PURE__ */ jsx(XIcon, { className: "w-3 h-3" })
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: search.openSearch,
+		"aria-label": label,
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": label,
+		"data-tooltip-shortcut": "⌘+F",
+		className: listControlButtonClasses,
+		children: /* @__PURE__ */ jsx(SearchIcon, { className: "w-3.5 h-3.5" })
+	});
+}
+function ListCount({ total, matches, filterActive, noun, nounPlural }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center h-9",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-[13px] text-(--theme-muted-text-color)",
+			children: filterActive ? `${matches} of ${total} ${nounPlural}` : `${total} ${total === 1 ? noun : nounPlural}`
+		})
+	});
+}
+//#endregion
+//#region src/list/ListPager.tsx
+/** 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 }) {
+	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);
+	if (pageCount <= 1) 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__ */ jsx("span", {
+			className: "text-xs text-(--theme-muted-text-color)",
+			children: t.pager(start, end, total)
+		}), /* @__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: page >= pageCount - 1,
+				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
+	};
+}
+function HoverCardSurface({ x, y, widthClassName, 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
+		});
+	}, [
+		x,
+		y,
+		relayoutKey
+	]);
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		ref,
+		onMouseEnter: onKeepOpen,
+		onMouseLeave: onLeave,
+		className: cx("fixed z-[9999] rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) p-3 shadow-xl backdrop-blur-xl", widthClassName),
+		style: {
+			left: pos?.left ?? x,
+			top: pos?.top ?? y + 8,
+			visibility: pos ? "visible" : "hidden"
+		},
+		children
+	}), document.querySelector(".ds-root") ?? document.body);
+}
+//#endregion
+export { useRowMenu as A, listTableProps as C, rowContextMenuProps as D, copySubmenu as E, toRowMenuItem as O, listTableFixedProps as S, assembleRowMenu as T, ListSkeleton as _, ListSearchControl as a, RowSelectCheckbox as b, ListFilterMenu as c, DEFAULT_ORDER as d, FAVORITE_ORDER as f, ListError as g, ListActionsHeader as h, ListCount as i, useRowMenuActive as j, toolbarActionToRowAction as k, listControlButtonClasses as l, GroupRow as m, useHoverCard as n, useListSearch as o, useListView as p, ListPager as r, ListDisplayMenu as s, HoverCardSurface as t, isTextEntryContext as u, NAME_MIN_WIDTH_PX as v, MoreButton as w, actionsColumnWidth as x, NameCell as y };