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

package/dist/client.js

@@ -4,29 +4,79 @@ 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");
+// ../../tools/ui/src/client.ts
+function useLocaleSnapshot(locale) {
+	const subscribe = (0, react.useCallback)((listener) => locale.subscribe(listener), [locale]);
+	const getSnapshot = (0, react.useCallback)(() => locale.getSnapshot(), [locale]);
+	return (0, react.useSyncExternalStore)(subscribe, getSnapshot);
+}
+/** Each effect owns its sheet, even when another plugin installs the same defaults. */
+function installStyles(css) {
+	const style = document.createElement("style");
+	style.textContent = css;
+	document.head.append(style);
+	return () => style.remove();
+}
+// ../../tools/ui/src/icons/rotate-ccw.svg
+var rotate_ccw_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n  <path d=\"M5 7a9 9 0 1 1-1 9M5 3v4h4\"/>\n</svg>\n";
+// ../../tools/ui/src/icons.ts
+function IconResetOutlineRegular() {
+	return (0, react.createElement)("span", {
+		style: { display: "inline-flex" },
+		"aria-hidden": "true",
+		dangerouslySetInnerHTML: { __html: rotate_ccw_default }
+	});
+}
+// ../../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):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; }
+.dsh-plugin-composer-chevron, .dsh-plugin-composer-detail { color: var(--dsw-alias-label-caption); }
+.dsh-plugin-composer-trigger[aria-expanded=true] .dsh-plugin-composer-chevron { transform: rotate(180deg); }
+`;
+const ComposerTrigger = (0, react.forwardRef)(function ComposerTrigger({ className = "", icon, label, detail, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...props,
+		ref,
+		type: "button",
+		className: `dsh-plugin-composer-trigger ${className}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-plugin-composer-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-plugin-composer-label",
+				children: label
+			}),
+			detail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-plugin-composer-detail",
+				children: detail
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dsh-plugin-composer-chevron",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, {})
+			})
+		]
+	});
+});
 // src/styles.ts
-const styles = `
+const styles = `${composerStyles}
 .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 { 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: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-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); }
-/* 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-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; }
@@ -38,6 +88,7 @@ const styles = `
 .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-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; }
@@ -117,11 +168,12 @@ const copy = {
 };
 function apply(ctx) {
 	function Picker({ locked, directory }) {
-		const state = (0, react.useSyncExternalStore)(directory.store.subscribe, directory.store.getSnapshot);
-		const locale = (0, react.useSyncExternalStore)((fn) => ctx.locale.subscribe(fn), () => ctx.locale.getSnapshot().active);
+		const subscribe = (0, react.useCallback)((listener) => directory.store.subscribe(listener), [directory]);
+		const getSnapshot = (0, react.useCallback)(() => directory.store.getSnapshot(), [directory]);
+		const state = (0, react.useSyncExternalStore)(subscribe, getSnapshot);
+		const { active: locale } = useLocaleSnapshot(ctx.locale);
 		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);
@@ -150,27 +202,10 @@ function apply(ctx) {
 			};
 		}, [directory]);
 		const close = () => {
-			setExiting(true);
+			setPanel(null);
 			if (trigger.current) (0, _deepseek_ai_dsh_client_ui_primitives.focusWithoutRing)(trigger.current);
 		};
-		(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, _deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(anchor, panel !== null, () => setPanel(null), popup);
 		(0, react.useLayoutEffect)(() => {
 			if (!panel || !popup.current || !anchor.current) return;
 			const element = popup.current;
@@ -216,10 +251,10 @@ function apply(ctx) {
 			};
 		}, [panel]);
 		(0, react.useEffect)(() => {
-			if (locked) setExiting(true);
+			if (locked) setPanel(null);
 		}, [locked]);
 		(0, react.useEffect)(() => {
-			setExiting(true);
+			setPanel(null);
 		}, [
 			current?.provider,
 			current?.model,
@@ -242,11 +277,10 @@ function apply(ctx) {
 		};
 		const show = (button) => {
 			trigger.current = button;
-			if (panel && !exiting) {
+			if (panel) {
 				close();
 				return;
 			}
-			setExiting(false);
 			setDraft(Math.max(0, effortIndex));
 			setFailed(false);
 			setPanel("effort");
@@ -265,39 +299,23 @@ function apply(ctx) {
 			className: "dsh-codex-picker",
 			ref: anchor,
 			"aria-busy": busy,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				type: "button",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerTrigger, {
 				className: "dsh-codex-trigger",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDataOutlineRegular, { size: 16 }),
+				label: model?.name ?? current?.model ?? text.model,
+				detail: effortLabel,
 				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 && !exiting,
-				"aria-controls": panel && !exiting ? id : void 0,
-				onClick: (event) => show(event.currentTarget),
-				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)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: "dsh-codex-chevron" })
-				]
+				"aria-expanded": panel !== null,
+				"aria-controls": panel ? id : void 0,
+				onClick: (event) => show(event.currentTarget)
 			})
 		}), 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: [
@@ -335,16 +353,7 @@ function apply(ctx) {
 								model: current.model
 							});
 						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-							width: "16",
-							height: "16",
-							viewBox: "0 0 16 16",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "1.2",
-							"aria-hidden": "true",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 4a5.5 5.5 0 1 1-1 6M3 1v3h3" })
-						})
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconResetOutlineRegular, {})
 					})]
 				}),
 				state.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -462,12 +471,7 @@ function apply(ctx) {
 		locked: props.locked,
 		directory: ctx.modelDirectories.directoryFor(props.sessionId)
 	}, props.sessionId) : null));
-	ctx.effect(() => {
-		const style = document.createElement("style");
-		style.textContent = styles;
-		document.head.append(style);
-		return () => style.remove();
-	}, "ui-model-picker: styles");
+	ctx.effect(() => installStyles(styles), "ui-model-picker: styles");
 }
 exports.apply = apply;
 exports.inject = inject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dungsil/dsh-plugin-ui-model-picker",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Model and reasoning effort picker for the DeepSeek Harness composer.",
   "license": "MIT",
   "repository": {
@@ -32,14 +32,14 @@
     "@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",
     "@dungsil/dsh-tsconfig": "0.0.0",
+    "@dungsil/dsh-tsdown": "0.0.0",
+    "@dungsil/dsh-ui": "0.0.0",
     "@types/react": "18.3.31",
     "@types/react-dom": "18.3.7",
-    "happy-dom": "21.0.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tsdown": "0.23.4"
@@ -88,7 +88,6 @@
   },
   "scripts": {
     "build": "tsdown",
-    "typecheck": "tsc --noEmit",
-    "test": "node --test test/*.test.mjs"
+    "typecheck": "tsc --noEmit"
   }
 }