@parallelworks/ui 0.44.0 → 0.46.0

package/dist/list/ListViewControls.js

@@ -1,93 +1,36 @@
-import { FaChevronDown } from "../icons/fa/FaChevronDown.js";
-import { FaChevronUp } from "../icons/fa/FaChevronUp.js";
-import { FaFilter } from "../icons/fa/FaFilter.js";
-import { LuSettings2 } from "../icons/lu/LuSettings2.js";
-import { panelClassName, portalContainer, positionerClassName } from "../components/floating.js";
+import { cx } from "../cx.js";
+import { ChevronDownIcon, ChevronUpIcon, DisplayIcon, FilterIcon } from "../icons.js";
 import { MenuCheckboxItem, MenuPopup, MenuSubmenuTrigger } from "../components/Menu.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useStrings } from "../components/Provider.js";
 import { useQueryMatch } from "../components/search.js";
-import { InfoTip } from "../components/InfoTip.js";
 import { Switch } from "../components/Switch.js";
+import { Popover } from "../components/Popover.js";
+import { InfoTip } from "../components/InfoTip.js";
+import { IconButton } from "../components/IconButton.js";
 import { Select } from "../components/Select.js";
-import { isTextEntryContext } from "./textEntry.js";
 import { Menu } from "@base-ui/react/menu";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { Toggle } from "@base-ui/react/toggle";
-import { Popover } from "@base-ui/react/popover";
 //#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 activeButtonClassName = "border-(--theme-link) text-(--theme-app)";
 /** A toggle pill, for the Display panel's column and pinned-action pickers. */
 var pillClassName = "whitespace-nowrap rounded-full border border-(--theme-border) px-2.5 py-1 text-[12px] text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) data-pressed:border-transparent data-pressed:bg-(--theme-muted-panel-bg) data-pressed:text-(--theme-app)";
 var SECTION_LABEL = "mb-2 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)";
-/** Calls `onPress` on a single key, such as F to filter, unless the key goes to a text field. */
-function useShortcutKey(key, onPress) {
-	const press = useRef(onPress);
-	press.current = onPress;
-	useEffect(() => {
-		if (!key) return;
-		const onKey = (e) => {
-			if (e.metaKey || e.ctrlKey || e.altKey || e.key.toLowerCase() !== key.toLowerCase()) return;
-			if (isTextEntryContext(e.target)) return;
-			e.preventDefault();
-			press.current();
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [key]);
-}
-/** Marks a control whose panel has narrowed or changed the list. */
-function ActiveDot() {
-	return /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" });
-}
-/** A header-strip button that opens a panel under it. The panel is a
-*  non-modal dialog named by the button, not a menu: it holds switches,
-*  pills and text rather than menu items. */
-function AnchoredPopover({ icon, label, active, shortcut, panelClassName: panelClass, children }) {
-	const [open, setOpen] = useState(false);
-	useShortcutKey(shortcut, () => setOpen(true));
-	return /* @__PURE__ */ jsxs(Popover.Root, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(Tooltip, {
-			content: label,
-			shortcut: shortcut?.toUpperCase(),
-			disabled: open,
-			children: /* @__PURE__ */ jsxs(Popover.Trigger, {
-				"aria-label": label,
-				className: clsx(listControlButtonClasses, active && activeButtonClassName),
-				children: [icon, active && /* @__PURE__ */ jsx(ActiveDot, {})]
-			})
-		}), /* @__PURE__ */ jsx(Popover.Portal, {
-			container: portalContainer(),
-			children: /* @__PURE__ */ jsx(Popover.Positioner, {
-				side: "bottom",
-				align: "end",
-				sideOffset: 4,
-				className: positionerClassName,
-				children: /* @__PURE__ */ jsx(Popover.Popup, {
-					"aria-label": label,
-					className: clsx(panelClassName, panelClass),
-					children
-				})
-			})
-		})]
-	});
-}
 function ListDisplayMenu({ view, label }) {
-	const t = useStrings().list;
+	const { common, list: t } = useStrings();
 	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(LuSettings2, { className: "h-3.5 w-3.5" }),
-		label: label ?? t.displayOptions,
-		panelClassName: "w-72 p-3",
+	return /* @__PURE__ */ jsxs(Popover, {
+		"aria-label": label ?? t.displayOptions,
+		align: "end",
+		className: "w-72",
+		trigger: /* @__PURE__ */ jsx(IconButton, {
+			variant: "outline",
+			icon: /* @__PURE__ */ jsx(DisplayIcon, {}),
+			label: label ?? t.displayOptions
+		}),
 		children: [
 			hasGrouping && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between gap-3",
@@ -102,7 +45,7 @@ function ListDisplayMenu({ view, label }) {
 				})]
 			}),
 			view.orderBys.length > 0 && /* @__PURE__ */ jsxs("div", {
-				className: clsx("flex items-center justify-between gap-3", hasGrouping && "mt-2.5"),
+				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
@@ -115,7 +58,7 @@ function ListDisplayMenu({ view, label }) {
 							onClick: view.toggleOrderDir,
 							"aria-label": 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(FaChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FaChevronDown, { className: "h-3 w-3" })
+							children: view.orderDir === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" })
 						})
 					}), /* @__PURE__ */ jsx(OptionSelect, {
 						label: t.ordering,
@@ -126,7 +69,7 @@ function ListDisplayMenu({ view, label }) {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx("flex items-center justify-between gap-3", (hasGrouping || view.orderBys.length > 0) && "mt-2.5"),
+				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
@@ -179,7 +122,7 @@ function ListDisplayMenu({ view, label }) {
 			view.showActions && view.actions.length > 0 && /* @__PURE__ */ jsxs("div", {
 				className: "mt-3 border-t border-(--theme-border) pt-3",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: clsx(SECTION_LABEL, "flex items-center gap-1"),
+					className: cx(SECTION_LABEL, "flex items-center gap-1"),
 					children: [t.pinnedActions, /* @__PURE__ */ jsx(InfoTip, { text: t.pinnedActionsHelp })]
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-1.5",
@@ -197,7 +140,7 @@ function ListDisplayMenu({ view, label }) {
 					type: "button",
 					onClick: view.resetDisplay,
 					className: "link text-[12px]",
-					children: t.reset
+					children: common.reset
 				})
 			})
 		]
@@ -217,52 +160,41 @@ function OptionSelect({ label, options, value, onSelect }) {
 		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			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: [current?.label ?? t.none, /* @__PURE__ */ jsx(FaChevronDown, { 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" })]
 		})
 	});
 }
 /** The Filter button's menu: a submenu for each facet, whose options toggle
 *  without closing it. F opens it. */
 function ListFilterMenu({ view, label }) {
-	const t = useStrings().list;
-	const [open, setOpen] = useState(false);
-	const hasFacets = view.facets.length > 0;
-	useShortcutKey(hasFacets ? "f" : void 0, () => setOpen(true));
-	if (!hasFacets) return null;
-	const name = label ?? t.filter;
+	const { common } = useStrings();
+	if (view.facets.length === 0) return null;
 	const active = view.activeFilterCount > 0;
-	return /* @__PURE__ */ jsxs(Menu.Root, {
-		open,
-		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(Tooltip, {
-			content: name,
-			shortcut: "F",
-			disabled: open,
-			children: /* @__PURE__ */ jsxs(Menu.Trigger, {
-				"aria-label": name,
-				className: clsx(listControlButtonClasses, active && activeButtonClassName),
-				children: [/* @__PURE__ */ jsx(FaFilter, { className: "h-3.5 w-3.5" }), active && /* @__PURE__ */ jsx(ActiveDot, {})]
-			})
-		}), /* @__PURE__ */ jsxs(MenuPopup, {
-			align: "end",
-			className: "w-56",
-			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
-				}), active && /* @__PURE__ */ jsx(Menu.Item, {
-					closeOnClick: false,
-					onClick: view.clearFilters,
-					className: "cursor-pointer text-[12px] text-(--theme-muted-text-color) outline-none data-highlighted:text-(--theme-app)",
-					children: t.clear
-				})]
-			}), view.facets.map((facet) => /* @__PURE__ */ jsx(FacetSubmenu, {
-				view,
-				facet
-			}, facet.key))]
-		})]
-	});
+	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(Menu.Trigger, { render: /* @__PURE__ */ jsx(IconButton, {
+		variant: "outline",
+		icon: /* @__PURE__ */ jsx(FilterIcon, {}),
+		label: label ?? common.filter,
+		dot: active,
+		shortcut: "f"
+	}) }), /* @__PURE__ */ jsxs(MenuPopup, {
+		align: "end",
+		className: "w-56",
+		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: common.filter
+			}), active && /* @__PURE__ */ jsx(Menu.Item, {
+				closeOnClick: false,
+				onClick: view.clearFilters,
+				className: "cursor-pointer text-[12px] text-(--theme-muted-text-color) outline-none data-highlighted:text-(--theme-app)",
+				children: common.clear
+			})]
+		}), view.facets.map((facet) => /* @__PURE__ */ jsx(FacetSubmenu, {
+			view,
+			facet
+		}, facet.key))]
+	})] });
 }
 function FacetSubmenu({ view, facet }) {
 	const strings = useStrings();
@@ -305,4 +237,4 @@ function FacetSubmenu({ view, facet }) {
 	}) : submenu;
 }
 //#endregion
-export { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses };
+export { ListDisplayMenu, ListFilterMenu };

package/dist/list/UserHoverCard.js

@@ -1,13 +1,15 @@
-import { FiCopy } from "../icons/fi/FiCopy.js";
+import { cx } from "../cx.js";
+import { CopyIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { useLink, useNotify, useStrings } from "../components/Provider.js";
+import { useLink, useStrings } from "../components/Provider.js";
+import { useCopy } from "../components/useCopy.js";
 import { Avatar } from "../components/Avatar.js";
-import { clsx } from "clsx";
+import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/UserHoverCard.tsx
 function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent, loading = false, children }) {
-	const strings = useStrings();
-	const notify = useNotify();
+	const { common, list: t } = useStrings();
+	const { copy } = useCopy();
 	const SlotLink = useLink();
 	const Link = linkComponent ?? SlotLink;
 	const displayName = name || username;
@@ -33,9 +35,8 @@ function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent,
 			children: username
 		})]
 	})] });
-	const t = strings.list;
 	const copyLabel = EMAIL.test(username) ? t.labelEmail : t.labelUsername;
-	const onCopy = () => navigator.clipboard?.writeText(username).then(() => notify.success(t.copied(copyLabel)), () => notify.error(t.couldntCopy(copyLabel)));
+	const onCopy = () => void copy(username, { label: copyLabel });
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-64 p-3",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -48,33 +49,24 @@ function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent,
 				className: "flex min-w-0 flex-1 items-start gap-3",
 				children: header
 			}), username && /* @__PURE__ */ jsx(Tooltip, {
-				content: t.copy(copyLabel),
+				content: common.copyThing(copyLabel),
 				children: /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-label": t.copy(copyLabel),
+					"aria-label": common.copyThing(copyLabel),
 					onClick: onCopy,
-					className: clsx("shrink-0 cursor-pointer rounded p-0.5 text-(--theme-muted-text-color) opacity-0 transition hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) [&>svg]:h-3.5 [&>svg]:w-3.5", "hover:opacity-100 group-has-[[data-copy-value]:hover]/copy:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link) pointer-coarse:opacity-100"),
-					children: /* @__PURE__ */ jsx(FiCopy, { "aria-hidden": "true" })
+					className: cx("shrink-0 cursor-pointer rounded p-0.5 text-(--theme-muted-text-color) opacity-0 transition hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) [&>svg]:h-3.5 [&>svg]:w-3.5", "hover:opacity-100 group-has-[[data-copy-value]:hover]/copy:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-link) pointer-coarse:opacity-100"),
+					children: /* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" })
 				})
 			})]
-		}), loading ? /* @__PURE__ */ jsxs("div", {
-			role: "status",
-			"aria-label": strings.loading,
+		}), loading ? /* @__PURE__ */ jsxs(LoadingRegion, {
 			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(Skeleton, {
+				width: 96,
+				height: 12
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				width: 144,
+				height: 12
+			})]
 		}) : children ? /* @__PURE__ */ jsx("div", {
 			className: "mt-3 space-y-2 border-t border-(--theme-border) pt-3 text-[13px]",
 			children
@@ -88,10 +80,10 @@ var rowClasses = "flex gap-2 text-(--theme-muted-text-color)";
 function HoverCardRow({ icon, children, title, align = "center", truncate = false, onClick }) {
 	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: clsx("flex shrink-0 items-center [&>svg]:h-3.5 [&>svg]:w-3.5", align === "start" && "mt-0.5"),
+		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: clsx("min-w-0", truncate && "truncate"),
+		className: cx("min-w-0", truncate && "truncate"),
 		children
 	})] });
 	const alignClass = align === "start" ? "items-start" : "items-center";
@@ -99,12 +91,12 @@ function HoverCardRow({ icon, children, title, align = "center", truncate = fals
 		type: "button",
 		title,
 		onClick,
-		className: clsx(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)"),
+		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: clsx(rowClasses, alignClass),
+		className: cx(rowClasses, alignClass),
 		children: content
 	});
 }

package/dist/list/index.d.ts

@@ -1,10 +1,8 @@
-export { ActionToolbar, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
+export { ActionToolbar, stickyToolbarClasses, type ToolbarAction, ToolbarButton, type ToolbarItem, } from './ActionToolbar.js';
 export { ListColumns, ListPage, type ListPageProps, ListRow, ListRowActionsProvider, type ListSection, useListNavigate, } from './ListPage.js';
-export { LIST_PAGE_SIZES, ListPager } from './ListPager.js';
 export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
-export { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses, } from './ListViewControls.js';
+export { ListDisplayMenu, ListFilterMenu } from './ListViewControls.js';
 export { ListCount, type ListSearch, ListSearchControl, useListSearch, } from './listSearch.js';
 export { type ActionDef, type ColumnDef, DEFAULT_ORDER, FAVORITE_ORDER, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, useListView, } from './listView.js';
 export { assembleRowMenu, type CopyFields, type CopySubmenu, MoreButton, type RowAction, rowContextMenuProps, useCopySubmenu, useRowMenuActive, } from './rowMenu.js';
-export { isTextEntryContext } from './textEntry.js';
 export { HoverCardRow, UserHoverCard, type UserHoverCardProps, } from './UserHoverCard.js';

package/dist/list/index.js

@@ -1,11 +1,9 @@
-import { ActionToolbar, ToolbarButton, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses } from "./ActionToolbar.js";
+import { ActionToolbar, ToolbarButton, stickyToolbarClasses } from "./ActionToolbar.js";
 import { GroupRow, ListActionsHeader, ListError, ListSkeleton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, listTableFixedProps, listTableProps } from "./ListTable.js";
 import { MoreButton, assembleRowMenu, rowContextMenuProps, useCopySubmenu, useRowMenuActive } from "./rowMenu.js";
 import { ListColumns, ListPage, ListRow, ListRowActionsProvider, useListNavigate } from "./ListPage.js";
-import { isTextEntryContext } from "./textEntry.js";
-import { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses } from "./ListViewControls.js";
-import { LIST_PAGE_SIZES, ListPager } from "./ListPager.js";
+import { ListDisplayMenu, ListFilterMenu } from "./ListViewControls.js";
 import { ListCount, ListSearchControl, useListSearch } from "./listSearch.js";
 import { DEFAULT_ORDER, FAVORITE_ORDER, useListView } from "./listView.js";
 import { HoverCardRow, UserHoverCard } from "./UserHoverCard.js";
-export { ActionToolbar, AnchoredPopover, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, 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, useCopySubmenu, useListNavigate, useListSearch, useListView, useRowMenuActive };
+export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardRow, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, UserHoverCard, actionsColumnWidth, assembleRowMenu, listTableFixedProps, listTableProps, rowContextMenuProps, stickyToolbarClasses, useCopySubmenu, useListNavigate, useListSearch, useListView, useRowMenuActive };

package/dist/list/listSearch.d.ts

@@ -13,7 +13,7 @@ export declare function useListSearch(enabled?: boolean, storageKey?: string): {
     inputRef: import("react").RefObject<HTMLInputElement | null>;
 };
 export type ListSearch = ReturnType<typeof useListSearch>;
-export declare function ListSearchControl({ search, placeholder, label, }: {
+export declare function ListSearchControl({ search, placeholder, label: labelProp, }: {
     search: ListSearch;
     placeholder: string;
     label?: string;

package/dist/list/listSearch.js

@@ -1,18 +1,17 @@
-import { FaSearch } from "../icons/fa/FaSearch.js";
-import { FiX } from "../icons/fi/FiX.js";
+import { CloseIcon, RemoveIcon, SearchIcon } from "../icons.js";
+import { buttonClasses } from "../components/buttonClasses.js";
 import { Tooltip } from "../components/Tooltip.js";
-import { isTextEntryContext } from "./textEntry.js";
-import { listControlButtonClasses } from "./ListViewControls.js";
+import { usePersistedState, useStrings } from "../components/Provider.js";
+import { isTextEntryContext } from "../components/shortcutKey.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useLocalStorage } from "usehooks-ts";
 //#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 [storedTerms, setStoredTerms] = usePersistedState(`${storageKey ?? "list"}:searchTerms`, NO_TERMS);
 	const terms = storageKey ? storedTerms : NO_TERMS;
 	const inputRef = useRef(null);
 	useEffect(() => {
@@ -70,11 +69,13 @@ function useListSearch(enabled = true, storageKey) {
 		inputRef
 	};
 }
-function ListSearchControl({ search, placeholder, label = "Search" }) {
+function ListSearchControl({ search, placeholder, label: labelProp }) {
+	const { common, list } = useStrings();
+	const label = labelProp ?? common.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(FaSearch, { className: "w-3.5 h-3.5 shrink-0 text-(--theme-muted-text-color)" }),
+			/* @__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", {
@@ -83,9 +84,9 @@ function ListSearchControl({ search, placeholder, label = "Search" }) {
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => search.removeTerm(term),
-					"aria-label": `Remove filter ${term}`,
+					"aria-label": list.removeSearchTerm(term),
 					className: "shrink-0 rounded p-0.5 text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
-					children: /* @__PURE__ */ jsx(FiX, { className: "w-2.5 h-2.5" })
+					children: /* @__PURE__ */ jsx(RemoveIcon, { className: "w-2.5 h-2.5" })
 				})]
 			}, term)),
 			/* @__PURE__ */ jsx("input", {
@@ -108,9 +109,9 @@ function ListSearchControl({ search, placeholder, label = "Search" }) {
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: search.clearSearch,
-				"aria-label": "Clear search",
+				"aria-label": common.clearSearch,
 				className: "shrink-0 rounded p-0.5 text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
-				children: /* @__PURE__ */ jsx(FiX, { className: "w-3 h-3" })
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "w-3 h-3" })
 			})
 		]
 	});
@@ -121,8 +122,12 @@ function ListSearchControl({ search, placeholder, label = "Search" }) {
 			type: "button",
 			onClick: search.openSearch,
 			"aria-label": label,
-			className: listControlButtonClasses,
-			children: /* @__PURE__ */ jsx(FaSearch, { className: "w-3.5 h-3.5" })
+			className: buttonClasses({
+				variant: "outline",
+				size: "sm",
+				iconOnly: true
+			}),
+			children: /* @__PURE__ */ jsx(SearchIcon, {})
 		})
 	});
 }

package/dist/list/rowMenu.js

@@ -1,13 +1,7 @@
-import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
-import { FaKey } from "../icons/fa/FaKey.js";
-import { FaLink } from "../icons/fa/FaLink.js";
-import { FaUser } from "../icons/fa/FaUser.js";
-import { FiCopy } from "../icons/fi/FiCopy.js";
-import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
-import { LuIdCard } from "../icons/lu/LuIdCard.js";
-import { LuMail } from "../icons/lu/LuMail.js";
+import { cx } from "../cx.js";
+import { CopyIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
 import { useStrings } from "../components/Provider.js";
-import { clsx } from "clsx";
+import { IconButton } from "../components/IconButton.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 //#region src/list/rowMenu.tsx
@@ -60,50 +54,50 @@ function rowContextMenuProps(openMenu, entries) {
 }
 /** Returns a builder for the Copy submenu, labeled from the provider's strings. */
 function useCopySubmenu() {
-	const { list: t } = useStrings();
+	const { common, list: t } = useStrings();
 	return useCallback(({ name, nameLabel, email, username, uid, id, url, extra }) => {
 		const fields = [
 			{
 				label: nameLabel ?? t.labelName,
 				value: name,
-				icon: /* @__PURE__ */ jsx(FiCopy, {})
+				icon: /* @__PURE__ */ jsx(CopyIcon, {})
 			},
 			{
 				label: t.labelEmail,
 				value: email,
-				icon: /* @__PURE__ */ jsx(LuMail, {})
+				icon: /* @__PURE__ */ jsx(MailIcon, {})
 			},
 			{
 				label: t.labelUsername,
 				value: username,
-				icon: /* @__PURE__ */ jsx(FaUser, {})
+				icon: /* @__PURE__ */ jsx(UserIcon, {})
 			},
 			{
 				label: t.labelUid,
 				value: uid === null || uid === void 0 ? null : String(uid),
-				icon: /* @__PURE__ */ jsx(FaKey, {})
+				icon: /* @__PURE__ */ jsx(KeyIcon, {})
 			},
 			{
 				label: t.labelId,
 				value: id,
-				icon: /* @__PURE__ */ jsx(LuIdCard, {})
+				icon: /* @__PURE__ */ jsx(IdCardIcon, {})
 			},
 			{
 				label: t.labelUrl,
 				value: url,
-				icon: /* @__PURE__ */ jsx(FaLink, {})
+				icon: /* @__PURE__ */ jsx(LinkIcon, {})
 			},
 			...(extra ?? []).map((e) => ({
 				label: e.label,
 				value: e.value,
-				icon: e.icon ?? /* @__PURE__ */ jsx(FiCopy, {})
+				icon: e.icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
 			}))
 		];
 		return {
-			label: t.copyMenu,
-			icon: /* @__PURE__ */ jsx(HiOutlineClipboardCopy, {}),
+			label: common.copy,
+			icon: /* @__PURE__ */ jsx(CopyIcon, {}),
 			items: fields.flatMap(({ label, value, icon }) => value ? [{
-				label: t.copy(label),
+				label: common.copyThing(label),
 				icon,
 				copy: {
 					text: value,
@@ -111,7 +105,7 @@ function useCopySubmenu() {
 				}
 			}] : [])
 		};
-	}, [t]);
+	}, [t, common]);
 }
 /** Opens a row's menu under itself. Shows on the row's hover or focus, and
 *  stays while its menu is `open`, though the pointer has left the row. A touch
@@ -119,17 +113,17 @@ function useCopySubmenu() {
 *  out of reach. */
 function MoreButton({ onOpen, open = false, visible = open, label, className }) {
 	const { list: t } = useStrings();
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": label ?? t.moreActions,
+	return /* @__PURE__ */ jsx(IconButton, {
+		label: label ?? t.moreActions,
+		icon: /* @__PURE__ */ jsx(MoreIcon, {}),
 		"aria-haspopup": "menu",
 		"aria-expanded": open,
+		"data-popup-open": open || void 0,
 		onClick: (e) => {
 			e.stopPropagation();
 			onOpen(e.currentTarget);
 		},
-		className: clsx("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", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 pointer-coarse:opacity-100", className),
-		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "h-4 w-4" })
+		className: cx("focus-visible:opacity-100", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 pointer-coarse:opacity-100", className)
 	});
 }
 //#endregion