@dungsil/dsh-plugin-ui-model-picker 0.2.0 → 0.2.1

package/THIRD-PARTY-LICENSES

@@ -1,4 +1,6 @@
 Chevron SVG artwork from @deepseek-ai/dsh-client-ui-primitives 0.2.1-rc.5
+Menu transition compatibility styles adapted from
+@deepseek-ai/dsh-client-ui-primitives 0.2.2-alpha.3 (MenuSurface.module.css)
 
 MIT License
 

package/dist/client.js

@@ -2,59 +2,53 @@ window.__ModuleLoader__.load({ id: "@dungsil/dsh-plugin-ui-model-picker", factor
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
 let react_dom = require("react-dom");
+let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 let react_jsx_runtime = require("react/jsx-runtime");
-// src/chevron.tsx
-const paths = {
-	down: "M4 6L7.29289 9.29289C7.68342 9.68342 8.31658 9.68342 8.70711 9.29289L12 6",
-	left: "M10 4L6.70711 7.29289C6.31658 7.68342 6.31658 8.31658 6.70711 8.70711L10 12",
-	right: "M6 12L9.29289 8.70711C9.68342 8.31658 9.68342 7.68342 9.29289 7.29289L6 4"
-};
-function Chevron({ direction }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		className: "dsh-codex-chevron",
-		width: "14",
-		height: "14",
-		viewBox: "0 0 16 16",
-		fill: "none",
-		strokeWidth: "1",
-		xmlns: "http://www.w3.org/2000/svg",
-		"aria-hidden": "true",
-		focusable: "false",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: paths[direction],
-			stroke: "currentColor"
-		})
-	});
-}
 // src/styles.ts
 const styles = `
-.dsh-codex-picker { display: flex; align-items: center; min-width: 0; border-radius: 16px; color: var(--dsw-alias-label-primary, #252525); font: 13px/20px system-ui, sans-serif; }
-.dsh-codex-picker button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; height: 28px; padding: 0 6px; border-radius: 14px; min-width: 0; }
-.dsh-codex-picker:hover { background: var(--dsw-alias-interactive-bg-hover, #8881); }
-.dsh-codex-picker .dsh-codex-trigger { display: flex; gap: 5px; align-items: center; }
-.dsh-codex-chevron { display: inline-block; flex: 0 0 14px; vertical-align: middle; }
-.dsh-codex-name { display: var(--dsh-composer-model-text-display, block); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(220px, 32vw); }
-.dsh-codex-effort { color: var(--dsw-alias-label-tertiary, #777); }
-.dsh-codex-popover { position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: 256px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l1, #e8e8e8); border-radius: 16px; background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #252525); box-shadow: 0 5px 12px #0000000d, 0 2px 4px #00000005; font: 13px/20px system-ui, sans-serif; }
-.dsh-codex-popover::backdrop { background: transparent; }
+.dsh-codex-picker { display: flex; align-items: center; min-width: 0; }
+.dsh-codex-trigger { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: min(360px, 45cqw); height: 28px; padding: 0 4px 0 8px; border: none; border-radius: var(--dsw-radius-sm); background: transparent; color: var(--dsw-alias-label-secondary); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 20px; cursor: pointer; 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:disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
+.dsh-codex-trigger-icon { display: var(--dsh-composer-model-icon-display, none); flex: none; }
+.dsh-codex-chevron { color: var(--dsw-alias-label-caption); flex: none; transition: transform .12s; }
+.dsh-codex-trigger[aria-expanded=true] .dsh-codex-chevron { transform: rotate(180deg); }
+.dsh-codex-name, .dsh-codex-effort { display: var(--dsh-composer-model-text-display, block); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dsh-codex-effort { color: var(--dsw-alias-label-caption); 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); }
+/* rc.5 has no MenuSurface phase API. Match the newer shared menu fades without
+   animating the container: container opacity would change its backdrop blur.
+   Old hosts forward phase to the div; newer hosts consume it for their own CSS. */
+.dsh-codex-popover[phase=enter] > * { animation: dsh-codex-menu-in 40ms ease-out; }
+.dsh-codex-popover[phase=dismiss] > * { animation: dsh-codex-menu-out 80ms ease-in both; }
+@keyframes dsh-codex-menu-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes dsh-codex-menu-out { from { opacity: 1; } to { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .dsh-codex-popover[data-picker-phase] > * { animation-duration: 0ms; }
+  .dsh-codex-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: 6px; }
+.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 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: #3983ff; font-size: 14px; line-height: 20px; font-weight: 600; }
+.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-reset { display: grid; place-items: center; width: 24px; height: 24px; color: var(--dsw-alias-label-tertiary, #999); }
 .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 { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 30px; padding: 5px 10px; border: 0; border-radius: 9px; color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
-.dsh-codex-option:hover, .dsh-codex-option[aria-checked=true] { background: var(--dsw-alias-interactive-bg-hover, #f4f4f4); }
+.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 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 { flex: 0 0 14px; }
+.dsh-codex-option .dsh-codex-check { display: grid; place-items: center; flex: 0 0 14px; }
 .dsh-codex-slider { padding: 10px 2px 3px; }
 .dsh-codex-rail { position: relative; height: 28px; }
-.dsh-codex-track { position: absolute; inset: 3px 0; border-radius: 20px; background: linear-gradient(to right, #3983ff var(--dsh-codex-progress), var(--dsw-alias-interactive-bg-hover, #e8e8e8) var(--dsh-codex-progress)); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
+.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; }
 .dsh-codex-track span[data-filled=true] { background: #ffffff80; }
 .dsh-codex-slider input { appearance: none; -webkit-appearance: none; position: relative; display: block; width: 100%; height: 28px; padding: 0; margin: 0; background: transparent; cursor: pointer; }
@@ -64,8 +58,8 @@ const styles = `
 .dsh-codex-slider input::-moz-range-thumb { width: 26px; height: 26px; border: 1px solid #0000000a; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; }
 .dsh-codex-notice { padding: 6px 10px; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
 .dsh-codex-popover [role=alert] { color: var(--dsw-alias-state-error-primary, #b54424); }
-.dsh-codex-picker button:focus-visible, .dsh-codex-popover :focus-visible { outline: 2px solid var(--dsw-focus-ring-color, #3186ce); outline-offset: 2px; }
-.dsh-codex-picker button:disabled, .dsh-codex-popover :disabled { opacity: .5; cursor: default; }
+.dsh-codex-popover :focus-visible { outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline-offset: -2px; }
+.dsh-codex-popover :disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
 `;
 // src/client.tsx
 const name = "dungsil-ui-model-picker";
@@ -127,6 +121,7 @@ function apply(ctx) {
 		const locale = (0, react.useSyncExternalStore)((fn) => ctx.locale.subscribe(fn), () => ctx.locale.getSnapshot().active);
 		const text = copy[locale.startsWith("ko") ? "ko" : locale.startsWith("zh") ? "zh" : "en"];
 		const [panel, setPanel] = (0, react.useState)(null);
+		const [exiting, setExiting] = (0, react.useState)(false);
 		const [draft, setDraft] = (0, react.useState)(0);
 		const [failed, setFailed] = (0, react.useState)(false);
 		const trigger = (0, react.useRef)(null);
@@ -155,14 +150,30 @@ function apply(ctx) {
 			};
 		}, [directory]);
 		const close = () => {
-			setPanel(null);
-			trigger.current?.focus();
+			setExiting(true);
+			if (trigger.current) (0, _deepseek_ai_dsh_client_ui_primitives.focusWithoutRing)(trigger.current);
 		};
-		(0, react.useEffect)(() => {
+		(0, _deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(anchor, panel !== null && !exiting, () => setExiting(true), popup);
+		(0, react.useLayoutEffect)(() => {
+			if (!exiting || !popup.current) return;
+			const element = popup.current;
+			element.inert = true;
+			let cancelled = false;
+			const animations = element.getAnimations({ subtree: true }).filter((animation) => {
+				const name = animation.animationName;
+				return name?.includes("dsh-context-menu-out") || name === "dsh-codex-menu-out";
+			});
+			Promise.all(animations.map((animation) => animation.finished.catch(() => {}))).then(() => {
+				if (!cancelled) setPanel(null);
+			});
+			return () => {
+				cancelled = true;
+				element.inert = false;
+			};
+		}, [exiting]);
+		(0, react.useLayoutEffect)(() => {
 			if (!panel || !popup.current || !anchor.current) return;
 			const element = popup.current;
-			element.setAttribute("popover", "auto");
-			element.showPopover();
 			const position = () => {
 				const box = anchor.current.getBoundingClientRect();
 				element.style.left = `${Math.max(8, Math.min(box.right - element.offsetWidth, window.innerWidth - element.offsetWidth - 8))}px`;
@@ -172,13 +183,9 @@ function apply(ctx) {
 			position();
 			const observer = new ResizeObserver(position);
 			observer.observe(element);
-			const toggle = (event) => {
-				if (event.newState === "closed") setPanel(null);
-			};
 			const scroll = (event) => {
 				if (!element.contains(event.target)) close();
 			};
-			element.addEventListener("toggle", toggle);
 			window.addEventListener("resize", close);
 			window.addEventListener("scroll", scroll, true);
 			const keydown = (event) => {
@@ -206,15 +213,13 @@ function apply(ctx) {
 				window.removeEventListener("resize", close);
 				window.removeEventListener("scroll", scroll, true);
 				element.removeEventListener("keydown", keydown);
-				element.removeEventListener("toggle", toggle);
-				element.hidePopover();
 			};
 		}, [panel]);
 		(0, react.useEffect)(() => {
-			if (locked) setPanel(null);
+			if (locked) setExiting(true);
 		}, [locked]);
 		(0, react.useEffect)(() => {
-			setPanel(null);
+			setExiting(true);
 		}, [
 			current?.provider,
 			current?.model,
@@ -237,9 +242,14 @@ function apply(ctx) {
 		};
 		const show = (button) => {
 			trigger.current = button;
+			if (panel && !exiting) {
+				close();
+				return;
+			}
+			setExiting(false);
 			setDraft(Math.max(0, effortIndex));
 			setFailed(false);
-			setPanel(panel ? null : "effort");
+			setPanel("effort");
 			directory.load().catch(() => {});
 		};
 		const selectEffort = (index) => {
@@ -260,22 +270,34 @@ function apply(ctx) {
 				className: "dsh-codex-trigger",
 				disabled,
 				"aria-label": `${text.choose}: ${model?.name ?? current?.model ?? text.model}${effortLabel ? `, ${effortLabel}` : ""}`,
+				title: `${model?.name ?? current?.model ?? text.model}${effortLabel ? ` ${effortLabel}` : ""}`,
 				"aria-haspopup": "dialog",
-				"aria-expanded": panel !== null,
-				"aria-controls": panel ? id : void 0,
+				"aria-expanded": panel !== null && !exiting,
+				"aria-controls": panel && !exiting ? id : void 0,
 				onClick: (event) => show(event.currentTarget),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "dsh-codex-name",
-					children: panel ? text.choose : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [model?.name ?? current?.model ?? text.model, effortLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDataOutlineRegular, {
+						className: "dsh-codex-trigger-icon",
+						size: 16
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-codex-name",
+						children: model?.name ?? current?.model ?? text.model
+					}),
+					effortLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "dsh-codex-effort",
 						children: effortLabel
-					})] })] })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, { direction: "down" })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: "dsh-codex-chevron" })
+				]
 			})
-		}), panel && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		}), panel && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
 			id,
 			ref: popup,
 			role: "dialog",
+			"aria-hidden": exiting || void 0,
+			"data-picker-phase": exiting ? "dismiss" : "enter",
+			phase: exiting ? "dismiss" : "enter",
 			"aria-label": panel === "model" ? text.model : text.effort,
 			className: "dsh-codex-popover",
 			children: [
@@ -284,7 +306,7 @@ function apply(ctx) {
 					className: "dsh-codex-back",
 					onClick: () => setPanel("effort"),
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, { direction: "left" }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronLeftOutlineRegular, { size: 14 }),
 						" ",
 						text.effort
 					]
@@ -299,7 +321,7 @@ function apply(ctx) {
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: efforts[draft]?.name ?? effortLabel ?? text.default }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
 							model?.name ?? current?.model ?? text.model,
 							" ",
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chevron, { direction: "right" })
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutlineRegular, { size: 14 })
 						] })]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
@@ -376,7 +398,7 @@ function apply(ctx) {
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [option.name, option.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: option.description })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-codex-check",
 									"aria-hidden": "true",
-									children: provider.id === current?.provider && option.id === current?.model ? "✓" : ""
+									children: provider.id === current?.provider && option.id === current?.model && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCheckOutlineRegular, { size: 14 })
 								})]
 							}, option.id))]
 						}, provider.id))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dungsil/dsh-plugin-ui-model-picker",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Model and reasoning effort picker for the DeepSeek Harness composer.",
   "license": "MIT",
   "repository": {
@@ -32,6 +32,7 @@
     "@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-primitives": "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",
@@ -43,6 +44,9 @@
     "react-dom": "18.3.1",
     "tsdown": "0.23.4"
   },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.1-rc.5"
+  },
   "engines": {
     "dsh": "^0.2.1-rc.5",
     "node": ">=24.9.0"