dsh-sub2api-sync 0.2.4 → 0.2.5

package/lib/client.cjs

@@ -132,6 +132,8 @@ const zh = {
 	keysTitle: "Keys",
 	createKey: "创建 key",
 	keyGroupLabel: "所属分组",
+	keyGroupSearch: "搜索分组…",
+	keyGroupSearchEmpty: "没有匹配的分组",
 	keyNameLabel: "Key 名称",
 	keyNameHint: "默认与分组同名",
 	keyGroupPlaceholder: "选择分组",
@@ -246,6 +248,8 @@ const en = {
 	keysTitle: "Keys",
 	createKey: "Create key",
 	keyGroupLabel: "Group",
+	keyGroupSearch: "Search groups…",
+	keyGroupSearchEmpty: "No groups match",
 	keyNameLabel: "Key name",
 	keyNameHint: "Defaults to the group name",
 	keyGroupPlaceholder: "Pick a group",
@@ -725,30 +729,135 @@ const CSS = `
   flex: 1 1 220px;
 }
 
-/* Menu anchor wrapper: give the picker trigger the same field-column
-   footprint as the sibling Input rows. */
-.s2s-menuAnchor {
+/* Group picker (create-key dialog): the trigger takes the same field-column
+   footprint as the sibling Input rows, painted like an input rather than a
+   button so both rows read as one form. */
+.s2s-groupPicker {
   display: flex;
   flex: 1 1 220px;
   min-width: 0;
 }
 
-.s2s-menuAnchor > * {
-  width: 100%;
-}
-
-/* Select-style trigger (group picker): label left, chevron right. */
-.s2s-selectTrigger {
+.s2s-selectField {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   width: 100%;
+  min-height: 34px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.s2s-selectField:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.s2s-selectField:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+
+.s2s-selectPlaceholder {
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s2s-selectValue {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .s2s-selectChevron {
   flex: none;
   opacity: 0.55;
+  transition: transform var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+
+.s2s-selectChevronOpen {
+  transform: rotate(180deg);
+}
+
+/* The options panel: fixed-positioned from the trigger (escapes the modal
+   card's overflow clip), width-matched to it, search pinned on top, options
+   scrolling below. */
+.s2s-groupPanel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 10;
+  overflow: hidden;
+}
+
+.s2s-groupSearch {
+  flex: none;
+  padding: 8px 8px 6px;
+}
+
+.s2s-groupSearch > * {
+  width: 100%;
+}
+
+.s2s-groupList {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 8px 8px;
+}
+
+.s2s-groupEmpty {
+  margin: 0;
+  padding: 10px 4px;
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+}
+
+.s2s-groupOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.s2s-groupOption[data-active='true'] {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.s2s-groupOptionName {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s2s-groupOptionCheck {
+  flex: none;
+  color: var(--dsw-alias-state-business-primary);
 }
 
 /* The keys-card search input: fixed-width slot between the title and the
@@ -1178,6 +1287,164 @@ function protocolForPlatform(platform) {
 	}
 }
 
+//#endregion
+//#region src/client/section/GroupPicker.tsx
+/** Design cap for the panel; the viewport clamp never exceeds it. */
+const PANEL_MAX_HEIGHT = 280;
+/** Distance between the trigger's bottom edge and the panel. */
+const PANEL_GAP = 6;
+function GroupPicker({ groups, value, placeholder, searchPlaceholder, emptyLabel, disabled = false, onSelect }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [filter, setFilter] = (0, react.useState)("");
+	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const [triggerWidth, setTriggerWidth] = (0, react.useState)(0);
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	const listRef = (0, react.useRef)(null);
+	const selected = value === "" ? undefined : groups.find((group) => group.id === value);
+	const filtered = (0, react.useMemo)(() => {
+		const needle = filter.trim().toLowerCase();
+		if (needle === "") return groups;
+		return groups.filter((group) => group.name.toLowerCase().includes(needle));
+	}, [groups, filter]);
+	const position = (0, __deepseek_ai_dsh_client_ui_primitives.useAnchoredPosition)({
+		open,
+		anchorRef: triggerRef,
+		panelRef,
+		side: "bottom",
+		align: "start",
+		gap: PANEL_GAP,
+		margin: 24
+	});
+	const maxHeight = (0, __deepseek_ai_dsh_client_ui_primitives.useAnchoredMaxHeight)(panelRef, PANEL_MAX_HEIGHT, open ? filtered.length : 0);
+	(0, __deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(rootRef, open, setOpen, panelRef);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		setFilter("");
+		setActiveIndex(0);
+		setTriggerWidth(triggerRef.current?.getBoundingClientRect().width ?? 0);
+		const timer$1 = window.setTimeout(() => {
+			panelRef.current?.querySelector("input")?.focus();
+		}, 0);
+		return () => window.clearTimeout(timer$1);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const onResize = () => {
+			setTriggerWidth(triggerRef.current?.getBoundingClientRect().width ?? 0);
+		};
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		const list = listRef.current;
+		if (list === null) return;
+		list.querySelector("[data-active='true']")?.scrollIntoView({ block: "nearest" });
+	}, [activeIndex, filter]);
+	const close = () => {
+		setOpen(false);
+		triggerRef.current?.focus();
+	};
+	const pick = (group) => {
+		onSelect(group);
+		close();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			close();
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (filtered.length > 0) setActiveIndex((index) => Math.min(index + 1, filtered.length - 1));
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActiveIndex((index) => Math.max(index - 1, 0));
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			const group = filtered[activeIndex];
+			if (group !== undefined) pick(group);
+		}
+	};
+	return (0, react_jsx_runtime.jsxs)("div", {
+		className: "s2s-groupPicker",
+		ref: rootRef,
+		children: [(0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			ref: triggerRef,
+			className: "s2s-selectField",
+			disabled,
+			"aria-haspopup": "listbox",
+			"aria-expanded": open,
+			onClick: () => {
+				setOpen((next) => !next);
+			},
+			children: [(0, react_jsx_runtime.jsx)("span", {
+				className: selected === undefined ? "s2s-selectPlaceholder" : "s2s-selectValue",
+				children: selected === undefined ? placeholder : selected.name
+			}), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {
+				size: 14,
+				className: `s2s-selectChevron${open ? " s2s-selectChevronOpen" : ""}`
+			})]
+		}), open && (0, react_jsx_runtime.jsxs)(__deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
+			ref: panelRef,
+			className: "s2s-groupPanel",
+			role: "listbox",
+			style: position === null ? { visibility: "hidden" } : {
+				...position,
+				...triggerWidth > 0 ? { width: `${triggerWidth}px` } : {},
+				maxHeight: `${maxHeight}px`
+			},
+			onKeyDown,
+			children: [(0, react_jsx_runtime.jsx)("div", {
+				className: "s2s-groupSearch",
+				children: (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Input, {
+					type: "text",
+					value: filter,
+					placeholder: searchPlaceholder,
+					onChange: (event) => {
+						setFilter(event.target.value);
+						setActiveIndex(0);
+					}
+				})
+			}), (0, react_jsx_runtime.jsxs)("div", {
+				className: "s2s-groupList",
+				ref: listRef,
+				children: [filtered.length === 0 && (0, react_jsx_runtime.jsx)("p", {
+					className: "s2s-groupEmpty",
+					children: emptyLabel
+				}), filtered.map((group, index) => (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": group.id === value,
+					"data-active": index === activeIndex || undefined,
+					className: "s2s-groupOption",
+					onMouseEnter: () => {
+						setActiveIndex(index);
+					},
+					onClick: () => {
+						pick(group);
+					},
+					children: [(0, react_jsx_runtime.jsx)("span", {
+						className: "s2s-groupOptionName",
+						children: group.name
+					}), group.id === value && (0, react_jsx_runtime.jsx)("span", {
+						className: "s2s-groupOptionCheck",
+						"aria-hidden": "true",
+						children: "✓"
+					})]
+				}, group.id))]
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region src/client/section/KeysCard.tsx
 const PAGE_SIZE = 5;
@@ -1194,7 +1461,6 @@ function KeysCard({ api, config, groups, t }) {
 	const [loading, setLoading] = (0, react.useState)(false);
 	const [listError, setListError] = (0, react.useState)(undefined);
 	const [creating, setCreating] = (0, react.useState)(false);
-	const [groupMenuOpen, setGroupMenuOpen] = (0, react.useState)(false);
 	const [groupId, setGroupId] = (0, react.useState)("");
 	const [name$1, setName] = (0, react.useState)("");
 	const [nameTouched, setNameTouched] = (0, react.useState)(false);
@@ -1273,6 +1539,9 @@ else nextSet.delete(keyId);
 		setGroupId(gid);
 		if (!nameTouched) setName(groupNameOf(gid));
 	};
+	const selectGroup = (group) => {
+		pickGroup(group.id);
+	};
 	const closeCreate = () => {
 		setCreating(false);
 		setGroupId("");
@@ -1461,36 +1730,14 @@ else nextSet.delete(keyId);
 						children: [(0, react_jsx_runtime.jsx)("span", {
 							className: "s2s-fieldLabel",
 							children: t("keyGroupLabel")
-						}), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Menu, {
-							open: groupMenuOpen,
-							anchor: (0, react_jsx_runtime.jsx)("span", {
-								className: "s2s-menuAnchor",
-								children: (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Button, {
-									variant: "outline",
-									onClick: () => {
-										setGroupMenuOpen(true);
-									},
-									children: (0, react_jsx_runtime.jsxs)("span", {
-										className: "s2s-selectTrigger",
-										children: [(0, react_jsx_runtime.jsx)("span", { children: groupId === "" ? t("keyGroupPlaceholder") : groupNameOf(groupId) }), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {
-											size: 14,
-											className: "s2s-selectChevron"
-										})]
-									})
-								})
-							}),
-							items: groups.map((group) => ({
-								id: String(group.id),
-								label: group.name
-							})),
-							selectedId: groupId === "" ? undefined : String(groupId),
-							onSelect: (id) => {
-								pickGroup(Number(id));
-								setGroupMenuOpen(false);
-							},
-							onClose: () => {
-								setGroupMenuOpen(false);
-							}
+						}), (0, react_jsx_runtime.jsx)(GroupPicker, {
+							groups,
+							value: groupId,
+							placeholder: t("keyGroupPlaceholder"),
+							searchPlaceholder: t("keyGroupSearch"),
+							emptyLabel: t("keyGroupSearchEmpty"),
+							disabled: busy,
+							onSelect: selectGroup
 						})]
 					}), (0, react_jsx_runtime.jsxs)("div", {
 						className: "s2s-inline",

package/lib/client.js

@@ -138,6 +138,8 @@ const zh = {
 	keysTitle: "Keys",
 	createKey: "创建 key",
 	keyGroupLabel: "所属分组",
+	keyGroupSearch: "搜索分组…",
+	keyGroupSearchEmpty: "没有匹配的分组",
 	keyNameLabel: "Key 名称",
 	keyNameHint: "默认与分组同名",
 	keyGroupPlaceholder: "选择分组",
@@ -252,6 +254,8 @@ const en = {
 	keysTitle: "Keys",
 	createKey: "Create key",
 	keyGroupLabel: "Group",
+	keyGroupSearch: "Search groups…",
+	keyGroupSearchEmpty: "No groups match",
 	keyNameLabel: "Key name",
 	keyNameHint: "Defaults to the group name",
 	keyGroupPlaceholder: "Pick a group",
@@ -731,30 +735,135 @@ const CSS = `
   flex: 1 1 220px;
 }
 
-/* Menu anchor wrapper: give the picker trigger the same field-column
-   footprint as the sibling Input rows. */
-.s2s-menuAnchor {
+/* Group picker (create-key dialog): the trigger takes the same field-column
+   footprint as the sibling Input rows, painted like an input rather than a
+   button so both rows read as one form. */
+.s2s-groupPicker {
   display: flex;
   flex: 1 1 220px;
   min-width: 0;
 }
 
-.s2s-menuAnchor > * {
-  width: 100%;
-}
-
-/* Select-style trigger (group picker): label left, chevron right. */
-.s2s-selectTrigger {
+.s2s-selectField {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   width: 100%;
+  min-height: 34px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+}
+
+.s2s-selectField:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.s2s-selectField:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}
+
+.s2s-selectPlaceholder {
+  color: var(--dsw-alias-label-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s2s-selectValue {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .s2s-selectChevron {
   flex: none;
   opacity: 0.55;
+  transition: transform var(--ds-transition-duration) var(--ds-ease-in-out);
+}
+
+.s2s-selectChevronOpen {
+  transform: rotate(180deg);
+}
+
+/* The options panel: fixed-positioned from the trigger (escapes the modal
+   card's overflow clip), width-matched to it, search pinned on top, options
+   scrolling below. */
+.s2s-groupPanel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 10;
+  overflow: hidden;
+}
+
+.s2s-groupSearch {
+  flex: none;
+  padding: 8px 8px 6px;
+}
+
+.s2s-groupSearch > * {
+  width: 100%;
+}
+
+.s2s-groupList {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 8px 8px;
+}
+
+.s2s-groupEmpty {
+  margin: 0;
+  padding: 10px 4px;
+  color: var(--dsw-alias-label-tertiary);
+  text-align: center;
+}
+
+.s2s-groupOption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.s2s-groupOption[data-active='true'] {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.s2s-groupOptionName {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s2s-groupOptionCheck {
+  flex: none;
+  color: var(--dsw-alias-state-business-primary);
 }
 
 /* The keys-card search input: fixed-width slot between the title and the
@@ -1184,6 +1293,164 @@ function protocolForPlatform(platform) {
 	}
 }
 
+//#endregion
+//#region src/client/section/GroupPicker.tsx
+/** Design cap for the panel; the viewport clamp never exceeds it. */
+const PANEL_MAX_HEIGHT = 280;
+/** Distance between the trigger's bottom edge and the panel. */
+const PANEL_GAP = 6;
+function GroupPicker({ groups, value, placeholder, searchPlaceholder, emptyLabel, disabled = false, onSelect }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [filter, setFilter] = (0, react.useState)("");
+	const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+	const [triggerWidth, setTriggerWidth] = (0, react.useState)(0);
+	const rootRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	const listRef = (0, react.useRef)(null);
+	const selected = value === "" ? undefined : groups.find((group) => group.id === value);
+	const filtered = (0, react.useMemo)(() => {
+		const needle = filter.trim().toLowerCase();
+		if (needle === "") return groups;
+		return groups.filter((group) => group.name.toLowerCase().includes(needle));
+	}, [groups, filter]);
+	const position = (0, __deepseek_ai_dsh_client_ui_primitives.useAnchoredPosition)({
+		open,
+		anchorRef: triggerRef,
+		panelRef,
+		side: "bottom",
+		align: "start",
+		gap: PANEL_GAP,
+		margin: 24
+	});
+	const maxHeight = (0, __deepseek_ai_dsh_client_ui_primitives.useAnchoredMaxHeight)(panelRef, PANEL_MAX_HEIGHT, open ? filtered.length : 0);
+	(0, __deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(rootRef, open, setOpen, panelRef);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		setFilter("");
+		setActiveIndex(0);
+		setTriggerWidth(triggerRef.current?.getBoundingClientRect().width ?? 0);
+		const timer$1 = window.setTimeout(() => {
+			panelRef.current?.querySelector("input")?.focus();
+		}, 0);
+		return () => window.clearTimeout(timer$1);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const onResize = () => {
+			setTriggerWidth(triggerRef.current?.getBoundingClientRect().width ?? 0);
+		};
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		const list = listRef.current;
+		if (list === null) return;
+		list.querySelector("[data-active='true']")?.scrollIntoView({ block: "nearest" });
+	}, [activeIndex, filter]);
+	const close = () => {
+		setOpen(false);
+		triggerRef.current?.focus();
+	};
+	const pick = (group) => {
+		onSelect(group);
+		close();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			close();
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (filtered.length > 0) setActiveIndex((index) => Math.min(index + 1, filtered.length - 1));
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActiveIndex((index) => Math.max(index - 1, 0));
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			const group = filtered[activeIndex];
+			if (group !== undefined) pick(group);
+		}
+	};
+	return (0, react_jsx_runtime.jsxs)("div", {
+		className: "s2s-groupPicker",
+		ref: rootRef,
+		children: [(0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			ref: triggerRef,
+			className: "s2s-selectField",
+			disabled,
+			"aria-haspopup": "listbox",
+			"aria-expanded": open,
+			onClick: () => {
+				setOpen((next) => !next);
+			},
+			children: [(0, react_jsx_runtime.jsx)("span", {
+				className: selected === undefined ? "s2s-selectPlaceholder" : "s2s-selectValue",
+				children: selected === undefined ? placeholder : selected.name
+			}), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {
+				size: 14,
+				className: `s2s-selectChevron${open ? " s2s-selectChevronOpen" : ""}`
+			})]
+		}), open && (0, react_jsx_runtime.jsxs)(__deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
+			ref: panelRef,
+			className: "s2s-groupPanel",
+			role: "listbox",
+			style: position === null ? { visibility: "hidden" } : {
+				...position,
+				...triggerWidth > 0 ? { width: `${triggerWidth}px` } : {},
+				maxHeight: `${maxHeight}px`
+			},
+			onKeyDown,
+			children: [(0, react_jsx_runtime.jsx)("div", {
+				className: "s2s-groupSearch",
+				children: (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Input, {
+					type: "text",
+					value: filter,
+					placeholder: searchPlaceholder,
+					onChange: (event) => {
+						setFilter(event.target.value);
+						setActiveIndex(0);
+					}
+				})
+			}), (0, react_jsx_runtime.jsxs)("div", {
+				className: "s2s-groupList",
+				ref: listRef,
+				children: [filtered.length === 0 && (0, react_jsx_runtime.jsx)("p", {
+					className: "s2s-groupEmpty",
+					children: emptyLabel
+				}), filtered.map((group, index) => (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					role: "option",
+					"aria-selected": group.id === value,
+					"data-active": index === activeIndex || undefined,
+					className: "s2s-groupOption",
+					onMouseEnter: () => {
+						setActiveIndex(index);
+					},
+					onClick: () => {
+						pick(group);
+					},
+					children: [(0, react_jsx_runtime.jsx)("span", {
+						className: "s2s-groupOptionName",
+						children: group.name
+					}), group.id === value && (0, react_jsx_runtime.jsx)("span", {
+						className: "s2s-groupOptionCheck",
+						"aria-hidden": "true",
+						children: "✓"
+					})]
+				}, group.id))]
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region src/client/section/KeysCard.tsx
 const PAGE_SIZE = 5;
@@ -1200,7 +1467,6 @@ function KeysCard({ api, config, groups, t }) {
 	const [loading, setLoading] = (0, react.useState)(false);
 	const [listError, setListError] = (0, react.useState)(undefined);
 	const [creating, setCreating] = (0, react.useState)(false);
-	const [groupMenuOpen, setGroupMenuOpen] = (0, react.useState)(false);
 	const [groupId, setGroupId] = (0, react.useState)("");
 	const [name$1, setName] = (0, react.useState)("");
 	const [nameTouched, setNameTouched] = (0, react.useState)(false);
@@ -1279,6 +1545,9 @@ else nextSet.delete(keyId);
 		setGroupId(gid);
 		if (!nameTouched) setName(groupNameOf(gid));
 	};
+	const selectGroup = (group) => {
+		pickGroup(group.id);
+	};
 	const closeCreate = () => {
 		setCreating(false);
 		setGroupId("");
@@ -1467,36 +1736,14 @@ else nextSet.delete(keyId);
 						children: [(0, react_jsx_runtime.jsx)("span", {
 							className: "s2s-fieldLabel",
 							children: t("keyGroupLabel")
-						}), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Menu, {
-							open: groupMenuOpen,
-							anchor: (0, react_jsx_runtime.jsx)("span", {
-								className: "s2s-menuAnchor",
-								children: (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.Button, {
-									variant: "outline",
-									onClick: () => {
-										setGroupMenuOpen(true);
-									},
-									children: (0, react_jsx_runtime.jsxs)("span", {
-										className: "s2s-selectTrigger",
-										children: [(0, react_jsx_runtime.jsx)("span", { children: groupId === "" ? t("keyGroupPlaceholder") : groupNameOf(groupId) }), (0, react_jsx_runtime.jsx)(__deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {
-											size: 14,
-											className: "s2s-selectChevron"
-										})]
-									})
-								})
-							}),
-							items: groups.map((group) => ({
-								id: String(group.id),
-								label: group.name
-							})),
-							selectedId: groupId === "" ? undefined : String(groupId),
-							onSelect: (id) => {
-								pickGroup(Number(id));
-								setGroupMenuOpen(false);
-							},
-							onClose: () => {
-								setGroupMenuOpen(false);
-							}
+						}), (0, react_jsx_runtime.jsx)(GroupPicker, {
+							groups,
+							value: groupId,
+							placeholder: t("keyGroupPlaceholder"),
+							searchPlaceholder: t("keyGroupSearch"),
+							emptyLabel: t("keyGroupSearchEmpty"),
+							disabled: busy,
+							onSelect: selectGroup
 						})]
 					}), (0, react_jsx_runtime.jsxs)("div", {
 						className: "s2s-inline",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-sub2api-sync",
   "description": "Sync one sub2api instance's groups, keys, and models into dsh-llm-pi-ai provider routes: panel-driven login (password / OAuth), one relay key one provider.",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "license": "MIT",
   "author": "Shuai-S",
   "homepage": "https://github.com/Shuai-S/dsh-sub2api-sync#readme",