dsh-focus-overlay 0.11.1 → 0.11.3

package/lib/client.js

@@ -1035,7 +1035,37 @@ window.__ModuleLoader__.load({
 		}
 		function InputBar(props) {
 			const { t, width, value, queueCount, occCount, errorLine, textareaRef, onFocusChange, onChange, onSend } = props;
-			const empty = value.trim() === "";
+			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 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);
+				echo(el, el.value);
+			};
+			const onCompositionStart = () => {
+				composingRef.current = true;
+				setPending(value);
+			};
+			const onCompositionEnd = (e) => {
+				composingRef.current = false;
+				flush(e.currentTarget);
+			};
 			const onKeyDown = (e) => {
 				if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.nativeEvent.keyCode !== 229) {
 					e.preventDefault();
@@ -1046,15 +1076,18 @@ 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);
-			}, [value, textareaRef]);
+			}, [shown, textareaRef]);
+			const handleInput = (e) => {
+				const el = e.target;
+				if (composingRef.current) setPending(el.value);
+				else {
+					setPending(null);
+					echo(el, el.value);
+				}
+				autoGrow(el);
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "fm-bar",
 				style: { maxWidth: Math.min(width, 680) },
@@ -1074,16 +1107,25 @@ window.__ModuleLoader__.load({
 								ref: textareaRef,
 								className: "fm-bar-text",
 								rows: 1,
-								value,
+								value: shown,
 								placeholder: t("composer.placeholder"),
-								onChange: (e) => {
-									onChange(e.target.value);
-									autoGrow(e.target);
-									refocusAfterEcho(e.target);
-								},
+								onChange: handleInput,
+								onCompositionStart,
+								onCompositionEnd,
 								onKeyDown,
 								onFocus: () => onFocusChange(true),
-								onBlur: () => onFocusChange(false)
+								onBlur: () => {
+									if (echoingRef.current) return;
+									if (composingRef.current) {
+										composingRef.current = false;
+										const el = textareaRef.current;
+										if (el) {
+											flush(el);
+											if (document.activeElement === el) return;
+										}
+									}
+									onFocusChange(false);
+								}
 							}),
 							queueCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "fm-bar-queue",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-focus-overlay",
-  "version": "0.11.1",
+  "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"
   },