dsh-focus-overlay 0.11.2 → 0.11.3

package/lib/client.js

@@ -1036,13 +1036,27 @@ window.__ModuleLoader__.load({
 		function InputBar(props) {
 			const { t, width, value, queueCount, occCount, errorLine, textareaRef, onFocusChange, onChange, onSend } = props;
 			const composingRef = (0, react.useRef)(false);
+			const echoingRef = (0, react.useRef)(false);
 			const [pending, setPending] = (0, react.useState)(null);
 			const shown = pending ?? value;
 			const empty = shown.trim() === "";
-			const flush = (v) => {
-				if (v === null) return;
+			const echo = (el, next) => {
+				const start = el.selectionStart;
+				const end = el.selectionEnd;
+				echoingRef.current = true;
+				try {
+					onChange(next);
+				} finally {
+					echoingRef.current = false;
+				}
+				if (document.activeElement !== el) {
+					el.focus();
+					el.setSelectionRange(start, end);
+				}
+			};
+			const flush = (el) => {
 				setPending(null);
-				onChange(v);
+				echo(el, el.value);
 			};
 			const onCompositionStart = () => {
 				composingRef.current = true;
@@ -1050,8 +1064,7 @@ window.__ModuleLoader__.load({
 			};
 			const onCompositionEnd = (e) => {
 				composingRef.current = false;
-				flush(e.currentTarget.value);
-				refocusAfterEcho(e.currentTarget);
+				flush(e.currentTarget);
 			};
 			const onKeyDown = (e) => {
 				if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.nativeEvent.keyCode !== 229) {
@@ -1063,12 +1076,6 @@ window.__ModuleLoader__.load({
 				el.style.height = "auto";
 				el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
 			};
-			const refocusAfterEcho = (el) => {
-				if (document.activeElement === el) return;
-				el.focus();
-				const end = el.value.length;
-				el.setSelectionRange(end, end);
-			};
 			(0, react.useEffect)(() => {
 				if (textareaRef.current) autoGrow(textareaRef.current);
 			}, [shown, textareaRef]);
@@ -1077,10 +1084,9 @@ window.__ModuleLoader__.load({
 				if (composingRef.current) setPending(el.value);
 				else {
 					setPending(null);
-					onChange(el.value);
+					echo(el, el.value);
 				}
 				autoGrow(el);
-				refocusAfterEcho(el);
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "fm-bar",
@@ -1109,10 +1115,14 @@ window.__ModuleLoader__.load({
 								onKeyDown,
 								onFocus: () => onFocusChange(true),
 								onBlur: () => {
+									if (echoingRef.current) return;
 									if (composingRef.current) {
 										composingRef.current = false;
-										flush(shown);
-										if (textareaRef.current) refocusAfterEcho(textareaRef.current);
+										const el = textareaRef.current;
+										if (el) {
+											flush(el);
+											if (document.activeElement === el) return;
+										}
 									}
 									onFocusChange(false);
 								}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-focus-overlay",
-  "version": "0.11.2",
+  "version": "0.11.3",
   "description": "Focus Mode for the dsh web GUI: a full-screen reading overlay that hides chrome and folds the AI tool-call flow into summaries, reusing the official Markdown / image primitives.",
   "type": "module",
   "main": "lib/index.mjs",
@@ -54,6 +54,7 @@
     "bundle"
   ],
   "devDependencies": {
+    "playwright-core": "^1.63.0",
     "tsdown": "0.22.2",
     "vitest": "^4.1.10"
   },