@dungsil/dsh-plugin-ui-model-picker 0.2.4 → 0.2.6

package/README.md

@@ -2,22 +2,22 @@
 
 ![모델 선택 팝오버의 라이트 모드와 다크 모드를 꼭짓점 대각선으로 나눈 미리보기](./assets/light-dark-preview.webp)
 
-DSH Web 입력창에서 모델과 추론 강도를 선택합니다. 하나의 선택 버튼을 누르면 추론 강도 팝오버가 먼저 열리며, 팝오버 안의 모델명을 눌러 모델 목록으로 이동합니다. 모델을 고르면 실제 모델은 바로 바뀌지 않고 추론 강도 슬라이더가 이어서 표시되며, 강도를 설정할 때 모델이 함께 적용됩니다.
+DSH Web 입력창에서 모델과 추론 강도를 선택합니다. 하나의 선택 버튼을 누르면 추론 강도 팝오버가 먼저 열리며, 팝오버 안의 모델명을 눌러 모델 목록으로 이동합니다. 모델을 고르면 실제 모델은 바로 바뀌지 않고 추론 강도 슬라이더가 이어서 표시되며, 적용 버튼을 누르면 모델과 강도가 함께 적용됩니다.
 
 위 이미지는 플러그인 컴포넌트에 예시 모델 목록과 테마 색상을 제공한 검증 화면을 각각 캡처해 합성했습니다. 표시된 모델명과 추론 단계는 예시이며, 실제 목록은 연결한 제공자가 결정합니다.
 
 ## 사용 방법
 
 1. DSH 플러그인 설치 화면에서 `@dungsil/dsh-plugin-ui-model-picker`를 설치하고 활성화합니다.
-2. 입력창 오른쪽 선택 버튼을 눌러 추론 강도 슬라이더를 엽니다. 방향키와 Home/End 키도 사용할 수 있습니다.
-3. 모델을 바꾸려면 팝오버 상단의 모델명 부분을 누르고 제공자별 모델을 선택합니다. 추론 강도를 지원하는 모델을 고르면 슬라이더가 이어서 나타나며, 강도를 설정해야 모델이 적용됩니다. 오른쪽 위 재설정 아이콘은 기본 추론 강도를 복원합니다.
+2. 입력창 오른쪽 선택 버튼을 눌러 추론 강도 슬라이더를 엽니다. 방향키와 Home/End 키도 사용할 수 있습니다. 원하는 강도를 고른 뒤 적용 버튼을 누릅니다.
+3. 모델을 바꾸려면 팝오버 상단의 모델명 부분을 누르고 제공자별 모델을 선택합니다. 추론 강도를 지원하는 모델을 고르면 슬라이더가 이어서 나타나며, 적용 버튼을 눌러야 모델이 적용됩니다. 오른쪽 위 재설정 아이콘은 기본 추론 강도를 복원합니다.
 
 ## 동작과 호환성
 
 - DSH `0.2.1-rc.5` 이상 `0.3.0` 미만의 Web UI를 지원합니다. 기본 `ui-model-selection` 기능이 활성화되어 있어야 합니다.
 - 공용 모델 디렉터리와 선택 API를 그대로 사용하므로 `/model` 명령과 선택 상태를 공유합니다. 별도 모델 설정을 저장하거나 API 키를 다루지 않습니다.
 - 실제 제공자 목록과 모델별 추론 메타데이터만 사용합니다. 별도 모델 목록, Fast 모드, 고정 추론 단계는 추가하지 않습니다. 추론을 지원하지 않는 모델에는 슬라이더를 표시하지 않으며, 그런 모델은 목록에서 고르는 즉시 적용됩니다.
-- 다른 모델로 바꾸면 그 모델이 지원하는 추론 강도에서 슬라이더가 시작되고, 강도를 설정해야 모델 선택이 적용됩니다. 슬라이더를 건드리지 않고 팝오버를 닫으면 모델은 바뀌지 않습니다. 기본값 재설정은 별도 강도 지정을 해제합니다.
+- 다른 모델로 바꾸면 그 모델이 지원하는 추론 강도에서 슬라이더가 시작되고, 적용 버튼을 눌러야 모델 선택이 적용됩니다. 적용하지 않고 팝오버를 닫으면 모델은 바뀌지 않습니다. 기본값 재설정은 별도 강도 지정을 해제합니다.
 - Escape, 바깥 클릭, 스크롤, 창 크기 변경으로 메뉴를 닫습니다. 메뉴의 방향키와 Tab 탐색을 지원합니다. 한국어·영어·중국어(간체)와 DSH 테마 색상을 따릅니다.
 - 기본 모델 슬롯만 우선순위로 대체합니다. 제거하면 기본 선택 UI가 돌아오며 모델 선택은 유지됩니다. 같은 슬롯을 대체하는 다른 플러그인과는 함께 사용하지 마세요.
 

package/dist/client.js

@@ -29,7 +29,7 @@ function IconResetOutlineRegular() {
 }
 // ../../tools/ui/src/composer.tsx
 const composerStyles = `
-:where(.dsh-plugin-composer-trigger) { display: flex; align-items: center; gap: 4px; min-width: 0; height: 28px; padding: 0 4px 0 8px; border: 0; border-radius: var(--dsw-radius-sm); background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 13px; line-height: 20px; cursor: pointer; }
+:where(.dsh-plugin-composer-trigger) { display: flex; align-items: center; gap: 4px; min-width: 0; height: 28px; padding: 0 4px 0 8px; border: 0; border-radius: var(--dsw-radius-sm); background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 13px; line-height: 1.5385; cursor: pointer; }
 :where(.dsh-plugin-composer-trigger):disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
 .dsh-plugin-composer-icon, .dsh-plugin-composer-chevron { display: inline-flex; flex: none; }
 .dsh-plugin-composer-label, .dsh-plugin-composer-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -68,36 +68,39 @@ const ComposerTrigger = /* @__PURE__ */ (0, react.forwardRef)(function ComposerT
 const styles = `${composerStyles}
 .dsh-codex-picker { display: flex; align-items: center; min-width: 0; }
 .dsh-codex-trigger { max-width: min(360px, 45cqw); font-weight: 400; outline: none; }
-.dsh-codex-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
 .dsh-codex-trigger:focus-visible:not([data-dsh-automatic-focus]) { box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); }
 .dsh-codex-trigger .dsh-plugin-composer-icon { display: var(--dsh-composer-model-icon-display, none); }
 .dsh-codex-trigger .dsh-plugin-composer-chevron { transition: transform .12s; }
 .dsh-codex-trigger .dsh-plugin-composer-label, .dsh-codex-trigger .dsh-plugin-composer-detail { display: var(--dsh-composer-model-text-display, block); }
 .dsh-codex-trigger .dsh-plugin-composer-detail { flex-shrink: 1000; }
-.dsh-codex-popover { position: fixed; z-index: 1100; display: flex; flex-direction: column; inset: auto; margin: 0; box-sizing: border-box; width: 256px; max-width: calc(100vw - 32px); max-height: min(360px, calc(100dvh - 96px)); overflow: hidden; padding: 4px; border: 0; --dsw-elevation-stroke-color: var(--dsw-alias-border-l1); --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2); --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2); background: transparent; color: var(--dsw-alias-label-primary); box-shadow: var(--dsw-elevation-prominent); font: 13px/20px var(--dsw-font-family, system-ui); }
+.dsh-codex-popover { position: fixed; z-index: 1100; display: flex; flex-direction: column; inset: auto; margin: 0; box-sizing: border-box; width: 256px; max-width: calc(100vw - 32px); max-height: min(360px, calc(100dvh - 96px)); overflow: hidden; padding: 4px; border: 0; --dsw-elevation-stroke-color: var(--dsw-alias-border-l1); --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2); --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2); background: transparent; color: var(--dsw-alias-label-primary); box-shadow: var(--dsw-elevation-prominent); font: 13px/1.5385 var(--dsw-font-family, system-ui); }
 @media (prefers-reduced-motion: reduce) {
   .dsh-codex-trigger .dsh-plugin-composer-chevron { transition: none; }
 }
-.dsh-codex-popover > :not([role=radiogroup]) { flex-shrink: 0; }
-.dsh-codex-popover [role=radiogroup] { min-height: 0; overflow-y: auto; }
-.dsh-codex-header { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: start; gap: 4px; }
-.dsh-codex-model, .dsh-codex-reset, .dsh-codex-back { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: var(--dsw-radius-md); }
+.dsh-codex-popover > :not(.dsh-codex-models) { flex-shrink: 0; }
+.dsh-codex-models { min-height: 0; overflow-y: auto; }
+.dsh-codex-header { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 4px; }
+.dsh-codex-model, .dsh-codex-reset, .dsh-codex-back, .dsh-codex-apply { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: var(--dsw-radius-md); }
 .dsh-codex-popover svg { flex: none; vertical-align: middle; }
-.dsh-codex-model { grid-column: 2; justify-self: center; min-width: 0; max-width: 100%; padding: 2px 10px 3px; text-align: center; }
-.dsh-codex-model strong { display: block; color: var(--dsw-alias-state-business-primary); font-size: 14px; line-height: 20px; font-weight: 600; }
-.dsh-codex-model > span { display: block; color: var(--dsw-alias-label-tertiary, #777); font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dsh-codex-model:hover, .dsh-codex-reset:hover, .dsh-codex-back:hover { background: var(--dsw-alias-interactive-bg-hover, #f2f2f2); }
+.dsh-codex-model { justify-self: center; min-width: 0; max-width: 100%; padding: 2px 2px 3px; text-align: center; }
+.dsh-codex-model strong { display: block; color: var(--dsw-alias-state-business-primary); font-size: 14px; line-height: 1.4286; font-weight: 600; }
+.dsh-codex-model > span { display: block; color: var(--dsw-alias-label-tertiary, #777); font-size: 12px; line-height: 1.4167; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dsh-codex-reset { display: grid; place-items: center; width: 24px; height: 24px; color: var(--dsw-alias-label-tertiary, #999); }
 .dsh-codex-reset svg { width: 16px; height: 16px; }
 .dsh-codex-back { padding: 4px 8px; color: var(--dsw-alias-label-tertiary, #777); }
 .dsh-codex-popover h2, .dsh-codex-provider { margin: 0; padding: 6px 10px; font-size: 12px; font-weight: 400; color: var(--dsw-alias-label-tertiary, #777); }
 .dsh-codex-provider { font-size: 11px; padding-top: 10px; }
 .dsh-codex-option { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 34px; padding: 5px 7px; border: 0; border-radius: var(--dsw-radius-md); color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
-.dsh-codex-option:hover:not(:disabled), .dsh-codex-option:focus-visible { background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-codex-option:focus-visible { background: var(--dsw-alias-interactive-bg-hover); }
+@media (hover: hover) {
+  .dsh-codex-trigger:hover:not(:disabled), .dsh-codex-option:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+  .dsh-codex-model:hover, .dsh-codex-reset:hover, .dsh-codex-back:hover, .dsh-codex-apply:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, #f2f2f2); }
+}
 .dsh-codex-option span:first-child { min-width: 0; overflow-wrap: anywhere; }
 .dsh-codex-option small { display: block; color: var(--dsw-alias-label-tertiary, #777); font-size: 11px; }
 .dsh-codex-option .dsh-codex-check { display: grid; place-items: center; flex: 0 0 14px; }
 .dsh-codex-slider { padding: 10px 2px 3px; }
+.dsh-codex-apply { padding: 3px 8px; color: var(--dsw-alias-label-tertiary, #777); font-size: 12px; line-height: 1.5; }
 .dsh-codex-rail { position: relative; height: 28px; }
 .dsh-codex-track { position: absolute; inset: 3px 0; border-radius: 20px; background: linear-gradient(to right, var(--dsw-alias-state-business-primary) var(--dsh-codex-progress), var(--dsw-alias-interactive-bg-hover) var(--dsh-codex-progress)); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
 .dsh-codex-track span { width: 4px; height: 4px; border-radius: 50%; background: #b8b8b8; }
@@ -135,7 +138,8 @@ const copy = {
 		missing: "현재 모델을 사용할 수 없습니다.",
 		error: "변경하지 못했습니다. 현재 선택을 확인한 뒤 다시 시도하세요.",
 		retry: "모델 목록 새로고침",
-		busy: "변경 중…"
+		busy: "변경 중…",
+		apply: "적용"
 	},
 	en: {
 		model: "Select model",
@@ -148,7 +152,8 @@ const copy = {
 		missing: "The current model is unavailable.",
 		error: "Could not change the selection. Check the current selection before retrying.",
 		retry: "Reload models",
-		busy: "Changing…"
+		busy: "Changing…",
+		apply: "Apply"
 	},
 	zh: {
 		model: "选择模型",
@@ -161,7 +166,8 @@ const copy = {
 		missing: "当前模型不可用。",
 		error: "更改失败。请确认当前选择后重试。",
 		retry: "刷新模型列表",
-		busy: "正在更改…"
+		busy: "正在更改…",
+		apply: "应用"
 	}
 };
 function apply(ctx) {
@@ -209,6 +215,11 @@ function apply(ctx) {
 			setStaged(null);
 			if (trigger.current) (0, _deepseek_ai_dsh_client_ui_primitives.focusWithoutRing)(trigger.current);
 		};
+		const restorePopupFocus = () => {
+			if (!popup.current?.contains(document.activeElement)) return;
+			const target = trigger.current?.disabled ? anchor.current?.parentElement?.querySelector("button:not(:disabled), input:not(:disabled), textarea:not(:disabled), [tabindex=\"0\"]") : trigger.current;
+			if (target) (0, _deepseek_ai_dsh_client_ui_primitives.focusWithoutRing)(target);
+		};
 		(0, _deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(anchor, panel !== null, () => {
 			sliderSelection.current = null;
 			setPanel(null);
@@ -250,7 +261,7 @@ function apply(ctx) {
 				buttons[event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === "ArrowUp" ? -1 : 1) + buttons.length) % buttons.length]?.focus();
 			};
 			element.addEventListener("keydown", keydown);
-			(element.querySelector("[aria-checked=true]") ?? element.querySelector("input:not(:disabled)") ?? element.querySelector("button:not(:disabled)"))?.focus();
+			(element.querySelector("[aria-current=true]") ?? element.querySelector("input:not(:disabled)") ?? element.querySelector("button:not(:disabled)"))?.focus();
 			return () => {
 				observer.disconnect();
 				window.removeEventListener("resize", close);
@@ -260,6 +271,7 @@ function apply(ctx) {
 		}, [panel]);
 		(0, react.useEffect)(() => {
 			if (locked) {
+				restorePopupFocus();
 				sliderSelection.current = null;
 				setPanel(null);
 				setStaged(null);
@@ -272,6 +284,7 @@ function apply(ctx) {
 				setStaged(null);
 				return;
 			}
+			restorePopupFocus();
 			setPanel(null);
 			setStaged(null);
 		}, [
@@ -389,36 +402,47 @@ function apply(ctx) {
 					]
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 					className: "dsh-codex-header",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "dsh-codex-model",
-						disabled: locked,
-						"aria-disabled": disabled,
-						"aria-label": `${text.model}: ${stagedName}`,
-						onClick: () => {
-							if (!disabled) setPanel("model");
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: stagedEfforts[draft]?.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-							stagedName,
-							" ",
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutlineRegular, { size: 14 })
-						] })]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "dsh-codex-reset",
-						disabled: locked || !(staged ?? current),
-						"aria-disabled": disabled || !(staged ?? current),
-						"aria-label": text.reset,
-						title: text.reset,
-						onClick: () => {
-							const target = staged ?? (current ? {
-								provider: current.provider,
-								model: current.model
-							} : null);
-							if (target) select(target);
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconResetOutlineRegular, {})
-					})]
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-codex-reset",
+							disabled: locked || !(staged ?? current),
+							"aria-disabled": disabled || !(staged ?? current),
+							"aria-label": text.reset,
+							title: text.reset,
+							onClick: () => {
+								const target = staged ?? (current ? {
+									provider: current.provider,
+									model: current.model
+								} : null);
+								if (target) select(target);
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconResetOutlineRegular, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "dsh-codex-model",
+							disabled: locked,
+							"aria-disabled": disabled,
+							title: stagedName,
+							onClick: () => {
+								if (!disabled) setPanel("model");
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: stagedEfforts[draft]?.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+								stagedName,
+								" ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutlineRegular, { size: 14 })
+							] })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-codex-apply",
+							disabled: locked,
+							"aria-disabled": disabled,
+							onClick: () => selectEffort(draft),
+							children: text.apply
+						})
+					]
 				}),
 				state.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "dsh-codex-notice",
@@ -447,7 +471,8 @@ function apply(ctx) {
 				}),
 				panel === "model" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						role: "radiogroup",
+						className: "dsh-codex-models",
+						role: "group",
 						"aria-label": text.model,
 						children: state.groups.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 							"aria-label": provider.name,
@@ -456,8 +481,7 @@ function apply(ctx) {
 								children: provider.name
 							}), provider.models.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
-								role: "radio",
-								"aria-checked": provider.id === current?.provider && option.id === current?.model,
+								"aria-current": provider.id === current?.provider && option.id === current?.model ? "true" : void 0,
 								className: "dsh-codex-option",
 								disabled,
 								onClick: () => stageModel(provider.id, option),
@@ -506,17 +530,6 @@ function apply(ctx) {
 							"aria-valuetext": stagedEfforts[draft]?.name,
 							onChange: (event) => {
 								if (!disabled) setDraft(Number(event.target.value));
-							},
-							onPointerUp: (event) => selectEffort(Number(event.currentTarget.value)),
-							onKeyUp: (event) => {
-								if ([
-									"ArrowLeft",
-									"ArrowRight",
-									"ArrowUp",
-									"ArrowDown",
-									"Home",
-									"End"
-								].includes(event.key)) selectEffort(Number(event.currentTarget.value));
 							}
 						})]
 					})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dungsil/dsh-plugin-ui-model-picker",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Model and reasoning effort picker for the DeepSeek Harness composer.",
   "license": "MIT",
   "repository": {
@@ -26,15 +26,15 @@
     "access": "public"
   },
   "devDependencies": {
-    "@deepseek-ai/cordis": "4.0.5",
-    "@deepseek-ai/dsh-api-session-controller": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-locale": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-store": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-conversation": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-model-selection": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-renderer": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-session": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-slots": "0.2.1-rc.5",
+    "@deepseek-ai/cordis": "4.1.0",
+    "@deepseek-ai/dsh-api-session-controller": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-locale": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-store": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-model-selection": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-session": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "0.2.2-rc.1",
     "@dungsil/dsh-tsconfig": "0.0.0",
     "@dungsil/dsh-tsdown": "0.0.0",
     "@dungsil/dsh-ui": "0.0.0",
@@ -46,10 +46,10 @@
     "tsdown": "0.23.4"
   },
   "peerDependencies": {
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.1-rc.5"
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.1-rc.5 || ^0.2.2-rc.1"
   },
   "engines": {
-    "dsh": "^0.2.1-rc.5",
+    "dsh": "^0.2.1-rc.5 || ^0.2.2-rc.1",
     "node": ">=24.9.0"
   },
   "dsh": {