@norman-else/dsh-claude 0.1.10 → 0.1.11

package/lib/client.js

@@ -3,7 +3,7 @@ window.__ModuleLoader__.load({
 	factory: (require) => {
 		var module = { exports: {} };
 		module.exports;
-		var { useCallback, useEffect, useMemo, useState } = require("react");
+		var { useCallback, useEffect, useId, useMemo, useRef, useState } = require("react");
 		var { Fragment, jsx, jsxs } = require("react/jsx-runtime");
 		var { DisclosureRow, IconApiOutline14, IconThinkOutline14, StateDot } = require("@deepseek-ai/dsh-client-ui-primitives");
 		/** Claude's subagent dispatch tools; rendered as plugin-owned group cards
@@ -310,6 +310,91 @@ window.__ModuleLoader__.load({
 			fontWeight: 500,
 			overflowWrap: "anywhere"
 		};
+		const settingSelect = {
+			position: "relative",
+			minWidth: 0
+		};
+		const settingSelectTrigger = {
+			width: "100%",
+			minHeight: 38,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: 12,
+			padding: "7px 11px 7px 13px",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 10,
+			background: "var(--dsw-alias-bg-layer-2)",
+			color: "var(--dsw-alias-label-primary)",
+			boxShadow: "0 1px 2px color-mix(in srgb, var(--dsw-alias-label-primary) 5%, transparent)",
+			font: "inherit",
+			fontSize: 13,
+			lineHeight: "20px",
+			textAlign: "left",
+			cursor: "pointer",
+			transition: "border-color 120ms ease, box-shadow 120ms ease, background 120ms ease"
+		};
+		const settingSelectTriggerOpen = {
+			borderColor: "var(--dsw-static-blue-450)",
+			boxShadow: "0 0 0 3px color-mix(in srgb, var(--dsw-static-blue-450) 15%, transparent)"
+		};
+		const settingSelectValue = {
+			minWidth: 0,
+			flex: 1,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			fontWeight: 550
+		};
+		const settingSelectChevron = {
+			flex: "none",
+			color: "var(--dsw-alias-label-tertiary)",
+			fontSize: 16,
+			lineHeight: 1,
+			transform: "translateY(-1px)",
+			transition: "transform 120ms ease"
+		};
+		const settingSelectChevronOpen = { transform: "translateY(1px) rotate(180deg)" };
+		const settingSelectMenu = {
+			position: "absolute",
+			zIndex: 20,
+			top: "calc(100% + 6px)",
+			left: 0,
+			right: 0,
+			maxHeight: 240,
+			overflowY: "auto",
+			padding: 5,
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 11,
+			background: "var(--dsw-alias-bg-layer-1)",
+			boxShadow: "0 12px 32px color-mix(in srgb, var(--dsw-alias-label-primary) 16%, transparent), 0 2px 8px color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent)"
+		};
+		const settingSelectOption = {
+			width: "100%",
+			minHeight: 34,
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			padding: "6px 9px",
+			border: "none",
+			borderRadius: 7,
+			background: "transparent",
+			color: "var(--dsw-alias-label-primary)",
+			font: "inherit",
+			fontSize: 13,
+			lineHeight: "20px",
+			textAlign: "left",
+			cursor: "pointer"
+		};
+		const settingSelectOptionActive = { background: "var(--dsw-alias-bg-layer-2)" };
+		const settingSelectCheck = {
+			width: 14,
+			flex: "none",
+			color: "var(--dsw-static-blue-450)",
+			fontSize: 12,
+			fontWeight: 700,
+			textAlign: "center"
+		};
 		const settingsActions = {
 			display: "flex",
 			flexWrap: "wrap",
@@ -1033,6 +1118,120 @@ window.__ModuleLoader__.load({
 		function value(status, detail) {
 			return detail === void 0 ? status : `${status} · ${detail}`;
 		}
+		function GlobalSettingSelect({ setting, disabled, onChange }) {
+			const [open, setOpen] = useState(false);
+			const [activeIndex, setActiveIndex] = useState(0);
+			const rootRef = useRef(null);
+			const triggerRef = useRef(null);
+			const listboxId = useId();
+			const selectedIndex = Math.max(0, setting.options.findIndex((option) => option.value === setting.value));
+			const selectedOption = setting.options[selectedIndex];
+			useEffect(() => {
+				if (!open) return;
+				const closeOnOutsidePointer = (event) => {
+					if (!rootRef.current?.contains(event.target)) setOpen(false);
+				};
+				document.addEventListener("mousedown", closeOnOutsidePointer);
+				return () => document.removeEventListener("mousedown", closeOnOutsidePointer);
+			}, [open]);
+			const openMenu = (index = selectedIndex) => {
+				setActiveIndex(index);
+				setOpen(true);
+			};
+			const choose = (index) => {
+				const option = setting.options[index];
+				if (option === void 0) return;
+				setOpen(false);
+				triggerRef.current?.focus();
+				if (option.value !== setting.value) onChange(option.value);
+			};
+			const move = (offset) => {
+				const count = setting.options.length;
+				if (count === 0) return;
+				setActiveIndex((current) => (current + offset + count) % count);
+			};
+			return /* @__PURE__ */ jsxs("div", {
+				ref: rootRef,
+				style: settingSelect,
+				onBlur: (event) => {
+					if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsxs("button", {
+					ref: triggerRef,
+					type: "button",
+					"aria-haspopup": "listbox",
+					"aria-expanded": open,
+					"aria-controls": open ? listboxId : void 0,
+					"aria-activedescendant": open ? `${listboxId}-${activeIndex}` : void 0,
+					disabled: disabled || setting.options.length === 0,
+					style: {
+						...settingSelectTrigger,
+						...open ? settingSelectTriggerOpen : {}
+					},
+					onClick: () => {
+						if (open) setOpen(false);
+						else openMenu();
+					},
+					onKeyDown: (event) => {
+						if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+							event.preventDefault();
+							if (!open) openMenu(event.key === "ArrowDown" ? selectedIndex : Math.max(0, setting.options.length - 1));
+							else move(event.key === "ArrowDown" ? 1 : -1);
+						} else if (event.key === "Home" && open) {
+							event.preventDefault();
+							setActiveIndex(0);
+						} else if (event.key === "End" && open) {
+							event.preventDefault();
+							setActiveIndex(Math.max(0, setting.options.length - 1));
+						} else if ((event.key === "Enter" || event.key === " ") && open) {
+							event.preventDefault();
+							choose(activeIndex);
+						} else if (event.key === "Escape" && open) {
+							event.preventDefault();
+							setOpen(false);
+						}
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						style: settingSelectValue,
+						children: selectedOption?.label ?? setting.value
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							...settingSelectChevron,
+							...open ? settingSelectChevronOpen : {}
+						},
+						children: "⌄"
+					})]
+				}), open ? /* @__PURE__ */ jsx("div", {
+					id: listboxId,
+					role: "listbox",
+					"aria-activedescendant": `${listboxId}-${activeIndex}`,
+					style: settingSelectMenu,
+					children: setting.options.map((option, index) => {
+						const selected = option.value === setting.value;
+						const active = index === activeIndex;
+						return /* @__PURE__ */ jsxs("button", {
+							id: `${listboxId}-${index}`,
+							type: "button",
+							role: "option",
+							"aria-selected": selected,
+							style: {
+								...settingSelectOption,
+								...active ? settingSelectOptionActive : {}
+							},
+							onMouseEnter: () => setActiveIndex(index),
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => choose(index),
+							children: [/* @__PURE__ */ jsx("span", {
+								style: settingSelectCheck,
+								"aria-hidden": "true",
+								children: selected ? "✓" : ""
+							}), /* @__PURE__ */ jsx("span", { children: option.label })]
+						}, `${option.source}:${option.value}`);
+					})
+				}) : null]
+			});
+		}
 		function ClaudeCodeSettings({ t }) {
 			const [report, setReport] = useState();
 			const [error, setError] = useState();
@@ -1207,22 +1406,17 @@ window.__ModuleLoader__.load({
 							globalSettings === void 0 ? /* @__PURE__ */ jsx("p", {
 								style: notice,
 								children: t("globalSettingsLoading")
-							}) : globalSettings.settings.map((setting) => /* @__PURE__ */ jsxs("label", {
+							}) : globalSettings.settings.map((setting) => /* @__PURE__ */ jsxs("div", {
 								style: diagnosticGrid,
 								children: [/* @__PURE__ */ jsx("span", {
 									style: diagnosticLabel,
 									children: setting.key === "outputStyle" ? t("outputStyle") : setting.key
-								}), /* @__PURE__ */ jsx("select", {
-									value: setting.value,
+								}), /* @__PURE__ */ jsx(GlobalSettingSelect, {
+									setting,
 									disabled: globalSettingsBusy,
-									onChange: (event) => {
-										requestGlobalSettings({ [setting.key]: event.target.value });
-									},
-									style: diagnosticValue,
-									children: setting.options.map((option) => /* @__PURE__ */ jsx("option", {
-										value: option.value,
-										children: option.label
-									}, `${option.source}:${option.value}`))
+									onChange: (nextValue) => {
+										requestGlobalSettings({ [setting.key]: nextValue });
+									}
 								})]
 							}, setting.key)),
 							globalSettings?.settings.some((setting) => setting.effect === "new-session") === true ? /* @__PURE__ */ jsx("p", {