dsh-focus-overlay 0.11.0 → 0.11.2

package/lib/client.js

@@ -1035,7 +1035,24 @@ 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 [pending, setPending] = (0, react.useState)(null);
+			const shown = pending ?? value;
+			const empty = shown.trim() === "";
+			const flush = (v) => {
+				if (v === null) return;
+				setPending(null);
+				onChange(v);
+			};
+			const onCompositionStart = () => {
+				composingRef.current = true;
+				setPending(value);
+			};
+			const onCompositionEnd = (e) => {
+				composingRef.current = false;
+				flush(e.currentTarget.value);
+				refocusAfterEcho(e.currentTarget);
+			};
 			const onKeyDown = (e) => {
 				if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.nativeEvent.keyCode !== 229) {
 					e.preventDefault();
@@ -1046,9 +1063,25 @@ 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);
+					onChange(el.value);
+				}
+				autoGrow(el);
+				refocusAfterEcho(el);
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "fm-bar",
 				style: { maxWidth: Math.min(width, 680) },
@@ -1068,15 +1101,21 @@ 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);
-								},
+								onChange: handleInput,
+								onCompositionStart,
+								onCompositionEnd,
 								onKeyDown,
 								onFocus: () => onFocusChange(true),
-								onBlur: () => onFocusChange(false)
+								onBlur: () => {
+									if (composingRef.current) {
+										composingRef.current = false;
+										flush(shown);
+										if (textareaRef.current) refocusAfterEcho(textareaRef.current);
+									}
+									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.0",
+  "version": "0.11.2",
   "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",