@parallelworks/ui 0.19.0 → 0.19.1

package/dist/list/RowContextMenu.js

@@ -0,0 +1,350 @@
+import { useLink, useNotify, useStrings } from "../components/Provider.js";
+import { CheckIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
+import { keyedByContent } from "../components/keys.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import cx from "classnames";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#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,
+		tooltip: action.tooltip
+	};
+}
+/** 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",
+		tooltip: action.disabledTooltip
+	};
+}
+/** 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(zClassName = "z-50") {
+	const [menu, setMenu] = useState(null);
+	const onCloseRef = useRef(void 0);
+	const openMenu = useCallback((x, y, items, onClose) => {
+		if (items.length > 0) {
+			onCloseRef.current?.();
+			onCloseRef.current = onClose;
+			setMenu({
+				x,
+				y,
+				items
+			});
+		}
+	}, []);
+	const close = useCallback(() => {
+		onCloseRef.current?.();
+		onCloseRef.current = void 0;
+		setMenu(null);
+	}, []);
+	return {
+		openMenu,
+		contextMenu: /* @__PURE__ */ jsx(RowContextMenu, {
+			state: menu,
+			onClose: close,
+			zClassName
+		})
+	};
+}
+/** 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, zClassName }) {
+	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", {
+		role: "none",
+		className: cx("fixed inset-0", zClassName),
+		onClick: (e) => {
+			if (e.target === e.currentTarget) 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"
+			},
+			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 keyedByContent(items, (it) => it.kind === "divider" ? "divider" : it.label).map(({ key, item }) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: "my-1 h-px bg-(--theme-border)"
+	}, key) : /* @__PURE__ */ jsx(MenuRow, {
+		item,
+		onClose,
+		side
+	}, key));
+}
+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",
+			role: "none",
+			onMouseEnter: open,
+			onMouseLeave: close,
+			onFocus: open,
+			onBlur: close,
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": openSub,
+				"aria-haspopup": "menu",
+				onClick: open,
+				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") {
+		const className = cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)");
+		if (item.reloadDocument) return /* @__PURE__ */ jsxs("a", {
+			href: item.to,
+			onClick: onClose,
+			className,
+			children: [item.icon, item.label]
+		});
+		return /* @__PURE__ */ jsxs(Link, {
+			to: item.to,
+			onClick: onClose,
+			className,
+			children: [item.icon, item.label]
+		});
+	}
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled: item.disabled && !item.tooltip,
+		"aria-disabled": item.disabled,
+		...item.disabled && item.tooltip ? {
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": item.tooltip
+		} : {},
+		onClick: () => {
+			if (item.disabled) return;
+			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" })
+		]
+	});
+}
+/** Returns a builder for the Copy submenu, labeled from the provider's strings. */
+function useCopySubmenu() {
+	const { list: t } = useStrings();
+	return useCallback(({ name, nameLabel, email, username, uid, id, url, extra }) => {
+		const items = [
+			{
+				label: nameLabel ?? t.labelName,
+				value: name,
+				icon: /* @__PURE__ */ jsx(CopyIcon, {})
+			},
+			{
+				label: t.labelEmail,
+				value: email,
+				icon: /* @__PURE__ */ jsx(MailIcon, {})
+			},
+			{
+				label: t.labelUsername,
+				value: username,
+				icon: /* @__PURE__ */ jsx(UserIcon, {})
+			},
+			{
+				label: t.labelUid,
+				value: uid === null || uid === void 0 ? null : String(uid),
+				icon: /* @__PURE__ */ jsx(KeyIcon, {})
+			},
+			{
+				label: t.labelId,
+				value: id,
+				icon: /* @__PURE__ */ jsx(IdCardIcon, {})
+			},
+			{
+				label: t.labelUrl,
+				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.copy(f.label),
+			icon: f.icon,
+			copy: {
+				text: f.value,
+				label: f.label
+			}
+		}));
+		return {
+			kind: "submenu",
+			label: t.copyMenu,
+			icon: /* @__PURE__ */ jsx(ClipboardIcon, {}),
+			items
+		};
+	}, [t]);
+}
+/** 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
+export { MoreButton, assembleRowMenu, rowContextMenuProps, toRowMenuItem, toolbarActionToRowAction, useCopySubmenu, useRowMenu, useRowMenuActive };

package/dist/list/UserHoverCard.js

@@ -0,0 +1,117 @@
+import { useLink, useStrings } from "../components/Provider.js";
+import { Avatar } from "../components/Avatar.js";
+import { HoverCardSurface, useHoverCard } from "./HoverCard.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#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, { 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,
+		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, { 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
+	})] });
+	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 { HoverCardRow, HoverCardTrigger, UserHoverCard };

package/dist/list/index.js

@@ -1,3 +1,12 @@
-import { _ as useRowMenuActive, d as assembleRowMenu, f as rowContextMenuProps, g as useRowMenu, h as useCopySubmenu, m as toolbarActionToRowAction, p as toRowMenuItem, u as MoreButton } from "../chunks/PageHeader-0kG_iypP.js";
-import { A as listTableProps, C as ListError, D as RowSelectCheckbox, E as NameCell, F as stickyTabsClasses, I as stickyTabsUnderHeaderClasses, L as stickyToolbarClasses, M as useHoverCard, N as ActionToolbar, O as actionsColumnWidth, P as ToolbarButton, S as ListActionsHeader, T as NAME_MIN_WIDTH_PX, _ as ListPage, a as FAVORITE_ORDER, b as useListNavigate, c as ListSearchControl, d as ListPager, f as ListDisplayMenu, g as ListColumns, h as isTextEntryContext, i as DEFAULT_ORDER, j as HoverCardSurface, k as listTableFixedProps, l as useListSearch, m as listControlButtonClasses, n as HoverCardTrigger, o as useListView, p as ListFilterMenu, r as UserHoverCard, s as ListCount, t as HoverCardRow, u as LIST_PAGE_SIZES, v as ListRow, w as ListSkeleton, x as GroupRow, y as ListRowActionsProvider } from "../chunks/list-CJm875m7.js";
+import { MoreButton, assembleRowMenu, rowContextMenuProps, toRowMenuItem, toolbarActionToRowAction, useCopySubmenu, useRowMenu, useRowMenuActive } from "./RowContextMenu.js";
+import { ActionToolbar, ToolbarButton, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses } from "./ActionToolbar.js";
+import { HoverCardSurface, useHoverCard } from "./HoverCard.js";
+import { GroupRow, ListActionsHeader, ListError, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
+import { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
+import { isTextEntryContext } from "./textEntry.js";
+import { ListDisplayMenu, ListFilterMenu, listControlButtonClasses } from "./ListViewControls.js";
+import { LIST_PAGE_SIZES, ListPager } from "./ListPager.js";
+import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
+import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
+import { HoverCardRow, HoverCardTrigger, UserHoverCard } from "./UserHoverCard.js";
 export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, HoverCardSurface, HoverCardTrigger, LIST_PAGE_SIZES, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListPager, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, toRowMenuItem, toolbarActionToRowAction, useCopySubmenu, useHoverCard, useListNavigate, useListSearch, useListView, useRowMenu, useRowMenuActive };

package/dist/list/listSearch.js

@@ -0,0 +1,137 @@
+import { SearchIcon, XIcon } from "../icons.js";
+import { TOOLTIP_ID } from "../components/Tooltip.js";
+import { isTextEntryContext } from "./textEntry.js";
+import { listControlButtonClasses } from "./ListViewControls.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocalStorage } from "usehooks-ts";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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
+export { ListCount, ListSearchControl, useListSearch };