@zhushanwen/pi-ask-user 0.0.4 → 0.2.0

package/src/component.ts

@@ -1,8 +1,17 @@
 // src/component.ts
-import { type Component, matchesKey, truncateToWidth } from "@mariozechner/pi-tui";
+import { type Component, matchesKey, parseKey, truncateToWidth } from "@mariozechner/pi-tui";
 
+import {
+	deleteCharBeforeCursor,
+	handleEditorPaste,
+	insertAtCursor,
+	moveCursorEnd,
+	moveCursorHome,
+	moveCursorLeft,
+	moveCursorRight,
+} from "./editor-ops";
 import { allOptions, renderQuestionView } from "./question-view";
-import { buildResult, renderSubmitView } from "./submit-view";
+import { buildResult, renderButtonBar, renderSubmitView } from "./submit-view";
 import {
 	createQuestionState,
 	HEADER_MAX_CHARS,
@@ -32,7 +41,6 @@ export class AskUserComponent implements Component {
 
 	private states: QuestionState[];
 	private activeTab: number = 0;
-	private editorText: string = "";
 
 	/** Submit tab 上的左右焦点：默认 Submit；← / → 切换；Enter 触发当前项。
 	 *  问题 tab 上无意义（仅视觉占位），不参与输入路由。 */
@@ -75,6 +83,13 @@ export class AskUserComponent implements Component {
 		this.cachedLines = undefined;
 	}
 
+	/** 状态变更后的标准后续：失效缓存 + 请求重绘。
+	 *  消除散弹式修改——每个 mutation 方法末尾不再需要手写 invalidate + requestRender 两行。 */
+	private rerender(): void {
+		this.invalidate();
+		this.tui.requestRender();
+	}
+
 	// ── 渲染 ──
 	render(width: number): string[] {
 		if (this.cachedWidth === width && this.cachedLines) {
@@ -107,7 +122,7 @@ export class AskUserComponent implements Component {
 		} else {
 			const q = this.questions[this.activeTab]!;
 			const state = this.states[this.activeTab]!;
-			for (const line of renderQuestionView(q, state, t, innerWidth, this.isSingle, this.editorText)) {
+			for (const line of renderQuestionView({ question: q, state, theme: t, width: innerWidth, isSingle: this.isSingle })) {
 				add(line);
 			}
 		}
@@ -115,7 +130,7 @@ export class AskUserComponent implements Component {
 		// 多问题：底部按钮栏（Submit / Cancel）。Submit tab 上不重复渲染（renderSubmitView 内嵌 focus 高亮）
 		if (!this.isSingle && this.activeTab < this.questions.length) {
 			inner.push("");
-			this.renderButtonBar(innerWidth, add, null);
+			add(renderButtonBar(this.theme, this.allConfirmed(), null));
 		}
 
 		// 用 box 边框包裹：每行 pad 到 innerWidth 后加 │ 左右边框
@@ -162,28 +177,6 @@ export class AskUserComponent implements Component {
 		add(truncateToWidth(parts.join(""), innerWidth));
 	}
 
-	/**
-	 * 底部按钮栏：[ Submit ]   [ Cancel ]。
-	 * focus: null=纯展示（问题 tab），"submit"/"cancel"=高亮对应按钮（Submit tab）。
-	 */
-	private renderButtonBar(
-		innerWidth: number,
-		add: (s: string) => void,
-		focus: "submit" | "cancel" | null,
-	): void {
-		const t = this.theme;
-		const allDone = this.allConfirmed();
-		const isSubmit = focus === "submit";
-		const isCancel = focus === "cancel";
-		const submit = isSubmit
-			? (allDone ? t.fg("success", t.bold(" Submit ")) : t.fg("accent", t.bold(" Submit ")))
-			: (allDone ? t.fg("success", " Submit ") : t.fg("dim", " Submit "));
-		const cancel = isCancel
-			? t.fg("accent", t.bold(" Cancel "))
-			: t.fg("muted", " Cancel ");
-		add(`${t.fg("dim", "[")}${submit}${t.fg("dim", "]")}   ${t.fg("dim", "[")}${cancel}${t.fg("dim", "]")}`);
-	}
-
 	// ── 输入路由 ──
 	handleInput(data: string): void {
 		if (this._resolved) return;
@@ -194,8 +187,7 @@ export class AskUserComponent implements Component {
 				this.cancel();
 			} else {
 				this.pendingCancel = false;
-				this.invalidate();
-				this.tui.requestRender();
+				this.rerender();
 			}
 			return;
 		}
@@ -215,15 +207,22 @@ export class AskUserComponent implements Component {
 			return;
 		}
 
+		// options mode → delegate to handleOptionsInput
+		this.handleOptionsInput(data, state, q);
+	}
+
+	/**
+	 * options 模式的输入处理（从 handleInput 拆出）。
+	 * 含：Esc 回退/确认取消、←/→ 切 tab、↑/↓ 移光标、Enter 确认、Space toggle。
+	 */
+	private handleOptionsInput(data: string, state: QuestionState, q: Question): void {
 		// Esc → 回退到上一个问题；在首个问题时进入确认取消覆盖层
 		if (matchesKey(data, "escape")) {
 			this.escBackOrConfirm();
 			return;
 		}
 
-		// ← / → 切换问题 tab（多问题，options 模式）：末尾 → 进入 Submit tab，
-		// 首个 ← 停在首个问题（不环绕）。Tab/Shift+Tab 不在问题 tab 切 tab——
-		// 留给 Submit tab 上的 Submit/Cancel 焦点切换。
+		// ← / → 切换问题 tab（多问题，options 模式）
 		if (!this.isSingle && matchesKey(data, "right")) {
 			this.gotoTab(Math.min(this.activeTab + 1, this.questions.length));
 			return;
@@ -235,29 +234,26 @@ export class AskUserComponent implements Component {
 
 		if (matchesKey(data, "up")) {
 			state.cursorIndex = Math.max(0, state.cursorIndex - 1);
-			this.invalidate();
-			this.tui.requestRender();
+			this.rerender();
 			return;
 		}
 		if (matchesKey(data, "down")) {
 			const max = allOptions(q).length - 1;
 			state.cursorIndex = Math.min(max, state.cursorIndex + 1);
-			this.invalidate();
-			this.tui.requestRender();
+			this.rerender();
 			return;
 		}
 
 		const opts = allOptions(q);
 		const onOther = state.cursorIndex === opts.length - 1;
 
-		// Other row → Enter opens freeform editor（单选/多选统一入口）。
-		//   单选/多选普通选项的 Enter 各自有不同语义（确认/加入选中），与 Other 互斥：
-		//   onOther 时本分支先消费 Enter，下面多选/单选分支不再处理。
+		// Other row → Enter opens freeform editor
 		if (onOther && matchesKey(data, "enter")) {
+			state.savedOptionsCursorIndex = state.cursorIndex;
 			state.mode = "freeform";
-			this.editorText = state.freeTextValue ?? "";
-			this.invalidate();
-			this.tui.requestRender();
+			state.draftText = state.freeTextValue ?? state.freeDraft ?? "";
+			state.cursorIndex = state.draftText.length;
+			this.rerender();
 			return;
 		}
 
@@ -267,10 +263,6 @@ export class AskUserComponent implements Component {
 				return;
 			}
 			if (matchesKey(data, "enter")) {
-				// Enter 先把光标所在的普通选项加入选中再确认，与单选分支（Enter 时
-				// selectedIndex = cursorIndex）保持一致。即使 freeTextValue 已存在
-				// （Other 录入），也尊重「在此选项上按 Enter 想选中它」的意图，避免
-				// 静默用旧 Other 文本确认。add 幂等，不会误取消已选项。
 				state.selectedIndices.add(state.cursorIndex);
 				this.afterConfirm(state, q);
 				return;
@@ -306,15 +298,13 @@ export class AskUserComponent implements Component {
 		// Esc → 回退到最后一个问题
 		if (matchesKey(data, "escape")) {
 			this.activeTab = this.questions.length - 1;
-			this.invalidate();
-			this.tui.requestRender();
+			this.rerender();
 			return;
 		}
 		// Tab → Submit ↔ Cancel 循环切焦点（单键双向）
 		if (matchesKey(data, "tab")) {
 			this.submitTabFocus = this.submitTabFocus === "submit" ? "cancel" : "submit";
-			this.invalidate();
-			this.tui.requestRender();
+			this.rerender();
 			return;
 		}
 		// Enter → 触发当前 focus
@@ -330,81 +320,97 @@ export class AskUserComponent implements Component {
 	}
 
 	private handleEditorInput(data: string, state: QuestionState, q: Question): void {
+		// parseKey 白名单拦截 — 替代旧的 matchesKey 散调 + 兜底 printable 遍历
+		const keyId = parseKey(data);
+		if (keyId !== undefined) {
+			this.handleEditorKey(data, keyId, state, q);
+			return;
+		}
+		if (handleEditorPaste(state, data)) this.rerender();
+	}
+
+	/** parseKey 命中的键：escape/enter/backspace/光标移动/space/printable 各有语义，
+	 *  其他 special key（功能键/modifier 组合）no-op。 */
+	private handleEditorKey(data: string, keyId: string, state: QuestionState, q: Question): void {
 		if (matchesKey(data, "escape")) {
-			if (state.mode === "comment") {
-				// AC-17: Esc in comment = skip comment, advance (keep existing commentValue)
-				state.mode = "options";
-				this.editorText = "";
-				this.advance();
-				return;
-			}
-			// Esc in freeform editor = back to options (discard input)
-			state.mode = "options";
-			this.editorText = "";
-			this.invalidate();
-			this.tui.requestRender();
+			this.handleEditorEsc(state);
 			return;
 		}
 		if (matchesKey(data, "enter")) {
-			const text = this.editorText.trim();
-			if (state.mode === "freeform") {
-				if (text) {
-					state.freeTextValue = text;
-					state.selectedIndex = null;
-					state.mode = "options";
-					this.editorText = "";
-					// freeform 保存后走 afterConfirm（可能进 comment 模式）
-					this.afterConfirm(state, q);
-				} else {
-					// FR-6: 空 Enter 仅清除 freeTextValue、关闭编辑器回选项列表，不含确认语义（不置 confirmed）
-					state.freeTextValue = null;
-					state.mode = "options";
-					this.editorText = "";
-					// 对齐 toggleIndex 守卫：清空后若全无答案，重置 confirmed，维持 confirmed ⟹ 有答案 不变式
-					if ((q.multiSelect ? state.selectedIndices.size === 0 : state.selectedIndex === null) && state.freeTextValue === null) {
-						state.confirmed = false;
-					}
-					this.invalidate();
-					this.tui.requestRender();
-				}
-				return;
-			}
-			// comment mode：保存评论后直接前进（不再回头进 comment）
-			state.commentValue = text || null;
-			state.mode = "options";
-			this.editorText = "";
-			this.advance();
+			this.handleEditorEnter(state, q);
 			return;
 		}
 		if (matchesKey(data, "backspace")) {
-			this.editorText = this.editorText.slice(0, -1);
-			this.invalidate();
-			this.tui.requestRender();
+			if (deleteCharBeforeCursor(state)) this.rerender();
 			return;
 		}
-		// Printable char(s) — handle both single keystrokes and multi-char paste.
-		// Terminals deliver pasted text as a single data chunk; iterating each char
-		// ensures the full paste is captured instead of silently dropping everything
-		// after the first character.
-		// 先剥离 bracketed paste 标记序列：启用该模式的终端会把粘贴内容包裹在
-		// \x1b[200~ ... \x1b[201~ 中。下面的 `c >= " "` 守卫会滤掉 ESC(\x1b)，
-		// 但序列里的可见字符（[200~/[201~）会残留混进编辑器文本，必须显式剥离。
-		const cleaned = data.replace(/\x1b\[200~|\x1b\[201~/g, "");
-		// for...of 按 code point 迭代：代理对（如 😀 U+1F600）作为一个 c（length===2）出现，
-		// 因此不能用 `c.length === 1` 守卫——那会把所有 BMP 之外的字符（emoji、部分 CJK 扩展）全过滤。
-		// 只保留 `c >= " "`（code point 比较），过滤控制字符（< 空格 U+0020）。
-		let changed = false;
-		for (const c of cleaned) {
-			if (c >= " ") {
-				this.editorText += c;
-				changed = true;
-			}
+		// 光标移动（4 方向 + home/end）
+		if (matchesKey(data, "left")) { moveCursorLeft(state); this.rerender(); return; }
+		if (matchesKey(data, "right")) { moveCursorRight(state); this.rerender(); return; }
+		if (matchesKey(data, "home")) { moveCursorHome(state); this.rerender(); return; }
+		if (matchesKey(data, "end")) { moveCursorEnd(state); this.rerender(); return; }
+		// 空格特判：parseKey(" ") 返回 "space"（非单字符），需显式插入
+		if (matchesKey(data, "space")) {
+			insertAtCursor(state, " ");
+			this.rerender();
+			return;
+		}
+		// 单字符 printable：parseKey("a") 返回 "a"（code 32-126），在光标处插入
+		if (keyId.length === 1 && keyId >= " " && keyId <= "~") {
+			insertAtCursor(state, keyId);
+			this.rerender();
+			return;
+		}
+		// 其他 special key（功能键/modifier 组合）→ no-op（不泄漏）
+	}
+
+	/** Esc：comment 跳过评论并 advance；freeform 存 freeDraft 草稿后回 options。 */
+	private handleEditorEsc(state: QuestionState): void {
+		if (state.mode === "comment") {
+			// comment Esc: skip comment, advance (keep existing commentValue)
+			state.mode = "options";
+			state.draftText = "";
+			state.cursorIndex = state.savedOptionsCursorIndex;
+			this.advance();
+			return;
 		}
-		if (changed) {
-			this.invalidate();
-			this.tui.requestRender();
+		// freeform Esc: save draft to freeDraft (separate from submitted freeTextValue)
+		// so discarded drafts don't pollute the answer or trigger auto-confirm.
+		state.freeDraft = state.draftText || null;
+		state.mode = "options";
+		state.draftText = "";
+		state.cursorIndex = state.savedOptionsCursorIndex;
+		this.rerender();
+	}
+
+	/** Enter：freeform 有文本→提交，空文本→回退；comment→保存评论并 advance。 */
+	private handleEditorEnter(state: QuestionState, q: Question): void {
+		const text = state.draftText.trim();
+		if (state.mode === "freeform") {
+			state.cursorIndex = state.savedOptionsCursorIndex;
+			if (text) {
+				state.freeTextValue = text;
+				state.selectedIndex = null;
+				state.mode = "options";
+				state.draftText = "";
+				this.afterConfirm(state, q);
+			} else {
+				state.freeTextValue = null;
+				state.mode = "options";
+				state.draftText = "";
+				// freeTextValue 刚清空；confirmed 仅在无其他选择时置 false（允许重新作答）
+				if (q.multiSelect ? state.selectedIndices.size === 0 : state.selectedIndex === null) {
+					state.confirmed = false;
+				}
+				this.rerender();
+			}
 			return;
 		}
+		state.commentValue = text || null;
+		state.mode = "options";
+		state.draftText = "";
+		state.cursorIndex = state.savedOptionsCursorIndex;
+		this.advance();
 	}
 
 	private toggleIndex(state: QuestionState, index: number): void {
@@ -413,8 +419,7 @@ export class AskUserComponent implements Component {
 		if (state.selectedIndices.size === 0 && state.freeTextValue === null) {
 			state.confirmed = false;
 		}
-		this.invalidate();
-		this.tui.requestRender();
+		this.rerender();
 	}
 
 	private autoConfirmIfAnswered(): void {
@@ -431,33 +436,29 @@ export class AskUserComponent implements Component {
 	private gotoTab(target: number): void {
 		this.autoConfirmIfAnswered();
 		this.activeTab = target;
-		this.invalidate();
-		this.tui.requestRender();
+		this.rerender();
 	}
 
 	/** Esc 语义：有上一个 tab 则回退；已在首个（或单问题）则进入确认取消覆盖层。 */
 	private escBackOrConfirm(): void {
 		if (this.activeTab > 0) {
 			this.activeTab--;
-			this.invalidate();
-			this.tui.requestRender();
+			this.rerender();
 			return;
 		}
 		this.pendingCancel = true;
-		this.invalidate();
-		this.tui.requestRender();
+		this.rerender();
 	}
 
 	/** 选中确认后的处理：若 allowComment，进入评论模式（可重入编辑/清除已有评论）；否则前进。 */
 	private afterConfirm(state: QuestionState, q: Question): void {
 		state.confirmed = true;
 		if (q.allowComment && state.mode !== "comment") {
-			// 进入评论输入行。预填已有评论，空 Enter=清除、新文本=覆盖（FR-4 item6）。
-			// 允许回改时重新编辑/清除已输入评论，避免评论被错误附着到后改的答案。
+			state.savedOptionsCursorIndex = state.cursorIndex;
 			state.mode = "comment";
-			this.editorText = state.commentValue ?? "";
-			this.invalidate();
-			this.tui.requestRender();
+			state.draftText = state.commentValue ?? "";
+			state.cursorIndex = state.draftText.length;
+			this.rerender();
 			return;
 		}
 		this.advance();
@@ -473,8 +474,7 @@ export class AskUserComponent implements Component {
 		} else {
 			this.activeTab = this.questions.length;
 		}
-		this.invalidate();
-		this.tui.requestRender();
+		this.rerender();
 	}
 
 	private submit(): void {
@@ -482,8 +482,11 @@ export class AskUserComponent implements Component {
 		this.done(buildResult(this.questions, this.states));
 	}
 
-	/** 取消。public 供 signal abort 监听器复用 _resolved 守卫（FR-12 竞态） */
+	/** 取消。public 供 signal abort 监听器复用 _resolved 守卫（FR-12 竞态）。
+	 *  守卫在方法内：signal abort 可能在用户已 submit/cancel 后才触发，
+	 *  此时必须 no-op，避免二次调 done（FR-12）。 */
 	cancel(): void {
+		if (this._resolved) return;
 		this._resolved = true;
 		this.done(null);
 	}

package/src/editor-ops.ts

@@ -0,0 +1,75 @@
+// src/editor-ops.ts
+// 文本编辑器的纯操作函数——操作 QuestionState.draftText/cursorIndex。
+// 从 AskUserComponent 提取，使 component 聚焦于问卷交互（tab 导航/状态转换/渲染编排），
+// 不再理解终端转义序列解析和 surrogate pair 细节。
+//
+// 所有函数直接修改传入的 state（mutation 风格，与调用方 component 的命令式风格一致）。
+// 是否产生了变更由返回值表达，调用方据此决定是否 rerender。
+
+import { isHighSurrogate, SURROGATE_PAIR_LEN, type QuestionState } from "./types";
+
+// ── 编辑器纯操作 ──
+
+// ── 编辑器纯操作 ──
+
+/** 在光标处插入文本，光标前移 text.length。 */
+export function insertAtCursor(state: QuestionState, text: string): void {
+	state.draftText = state.draftText.slice(0, state.cursorIndex) + text + state.draftText.slice(state.cursorIndex);
+	state.cursorIndex += text.length;
+}
+
+/** 删除光标前一个 code point（surrogate pair 时删整个 code point）。
+ *  返回 true 表示有删除发生（调用方据此决定是否 invalidate）。 */
+export function deleteCharBeforeCursor(state: QuestionState): boolean {
+	if (state.cursorIndex <= 0) return false;
+	const deleteCount = state.cursorIndex >= SURROGATE_PAIR_LEN && isHighSurrogate(state.draftText, state.cursorIndex - SURROGATE_PAIR_LEN) ? SURROGATE_PAIR_LEN : 1;
+	state.draftText = state.draftText.slice(0, state.cursorIndex - deleteCount) + state.draftText.slice(state.cursorIndex);
+	state.cursorIndex -= deleteCount;
+	return true;
+}
+
+/** 光标左移一个 code point（surrogate pair 安全）。不超出 0。 */
+export function moveCursorLeft(state: QuestionState): void {
+	const newLeft = state.cursorIndex - 1;
+	state.cursorIndex = newLeft > 0 && isHighSurrogate(state.draftText, newLeft - 1)
+		? newLeft - 1
+		: Math.max(0, newLeft);
+}
+
+/** 光标右移一个 code point（surrogate pair 安全）。不超出 draftText.length。 */
+export function moveCursorRight(state: QuestionState): void {
+	state.cursorIndex = isHighSurrogate(state.draftText, state.cursorIndex)
+		? Math.min(state.draftText.length, state.cursorIndex + SURROGATE_PAIR_LEN)
+		: Math.min(state.draftText.length, state.cursorIndex + 1);
+}
+
+/** 光标移到行首。 */
+export function moveCursorHome(state: QuestionState): void {
+	state.cursorIndex = 0;
+}
+
+/** 光标移到行尾。 */
+export function moveCursorEnd(state: QuestionState): void {
+	state.cursorIndex = state.draftText.length;
+}
+
+/** 多字符粘贴 chunk → printable 提取。
+ *  排除 bracketed paste 标记，过滤未识别控制序列（OSC/DA/DCS/APC/unknown CSI）。
+ *  返回 true 表示有文本插入。
+ *  data 整体性由 StdinBuffer 序列拆分保证。 */
+export function handleEditorPaste(state: QuestionState, data: string): boolean {
+	if (data.startsWith("\x1b") && !data.includes("\x1b[200~") && !data.includes("\x1b[201~")) {
+		return false;
+	}
+	const cleaned = data.replace(/\x1b\[200~|\x1b\[201~/g, "");
+	let changed = false;
+	// 用 Array.from 正确拆分 emoji/surrogate pairs
+	for (const c of Array.from(cleaned)) {
+		if (c >= " ") {
+			state.draftText = state.draftText.slice(0, state.cursorIndex) + c + state.draftText.slice(state.cursorIndex);
+			state.cursorIndex += c.length;
+			changed = true;
+		}
+	}
+	return changed;
+}