lite-questionnaire 1.0.0

package/modules/rating.ts

@@ -0,0 +1,105 @@
+/**
+ * 评分滑块问题模块
+ *
+ * 数字标尺 + 表情量表 + 下置光标，编辑态 ← → 调整，Enter 确认。
+ */
+
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { Core } from "../core";
+import type { ThemeLike } from "./shared";
+
+/** 5 级表情映射 */
+const EMOJI_MAP: Record<number, string> = {
+  1: "😡",
+  2: "😟",
+  3: "😐",
+  4: "😊",
+  5: "😍",
+};
+
+/**
+ * 根据评分值获取表情
+ */
+function getEmoji(value: number): string {
+  return EMOJI_MAP[value];
+}
+
+/**
+ * 渲染评分滑块问题
+ */
+export function renderRatingQuestion(
+  core: Core,
+  width: number,
+  theme: ThemeLike,
+): string[] {
+  const q = core.currentQuestion();
+  if (!q || q.type !== "rating") return [];
+
+  const lines: string[] = [];
+  const state = core.getUIState();
+  const current = state.ratingValue;
+
+  const indent = "    ";
+  const values = [1, 2, 3, 4, 5];
+  const currentIndex = current - 1;
+  const numberLabels = ["1", "2", "3", "4", "5"];
+  const emojiLabels = values.map((v) => getEmoji(v));
+  const maxCellWidth = Math.max(
+    1,
+    ...numberLabels.map((label) => visibleWidth(label)),
+    ...(q.showEmoji ? emojiLabels.map((label) => visibleWidth(label)) : []),
+  );
+  const slotWidth = Math.max(3, maxCellWidth + 1);
+  const padSlot = (text: string): string => {
+    const padding = Math.max(0, slotWidth - visibleWidth(text));
+    const left = Math.floor(padding / 2);
+    const right = padding - left;
+    return " ".repeat(left) + text + " ".repeat(right);
+  };
+  const buildSlotLine = (labels: string[]): string => {
+    let line = "";
+    labels.forEach((label, index) => {
+      const cell = padSlot(label);
+      line += index === currentIndex ? theme.fg("accent", cell) : cell;
+    });
+    return line;
+  };
+
+  // 数字标尺行
+  const numberLine = buildSlotLine(numberLabels);
+  lines.push(truncateToWidth(indent + numberLine, width));
+
+  // 表情行
+  if (q.showEmoji) {
+    lines.push(truncateToWidth(indent + buildSlotLine(emojiLabels), width));
+  }
+
+  // 下置光标行：与数字/表情共用同一 slot 布局
+  const cursorLine = buildSlotLine(values.map((_, index) => (index === currentIndex ? "▲" : "")));
+  lines.push(truncateToWidth(indent + cursorLine, width));
+
+  const barWidth = visibleWidth(numberLine);
+
+  // 文字注释行
+  if (q.annotations) {
+    const minAnnot = q.annotations["1"];
+    const maxAnnot = q.annotations["5"];
+    const currentAnnot = q.annotations[String(current)];
+    let annotLine = "";
+    if (minAnnot && maxAnnot) {
+      annotLine = `${indent}${theme.fg("dim", minAnnot)}${" ".repeat(Math.max(0, barWidth - visibleWidth(minAnnot) - visibleWidth(maxAnnot)))}${theme.fg("dim", maxAnnot)}`;
+    }
+    if (annotLine) {
+      lines.push(truncateToWidth(annotLine, width));
+    }
+    if (currentAnnot) {
+      lines.push(truncateToWidth(`  ${theme.fg("muted", "当前:")} ${theme.fg("accent", String(current))} - ${theme.fg("text", currentAnnot)}`, width));
+    } else {
+      lines.push(truncateToWidth(`  ${theme.fg("muted", "当前:")} ${theme.fg("accent", String(current))}`, width));
+    }
+  } else {
+    lines.push(truncateToWidth(`  ${theme.fg("muted", "当前:")} ${theme.fg("accent", String(current))}`, width));
+  }
+
+  return lines;
+}

package/modules/select.ts

@@ -0,0 +1,118 @@
+/**
+ * 单选问题模块
+ *
+ * Space 标定一项 + Enter 提交。
+ * 也处理 ← → 切换问题、↑ ↓ 导航选项的数字键快捷跳转。
+ */
+
+import { matchesKey, Key, truncateToWidth } from "@earendil-works/pi-tui";
+import type { Editor } from "@earendil-works/pi-tui";
+import type { Core } from "../core";
+import { getOptionsWithCustom } from "../render";
+import type { ThemeLike } from "./shared";
+
+/**
+ * 渲染单选问题的选项列表
+ */
+export function renderSelectOptions(
+  core: Core,
+  width: number,
+  theme: ThemeLike,
+  inputMode: boolean,
+): string[] {
+  const q = core.currentQuestion();
+  if (!q || (q.type !== "select" && q.type !== "multiSelect")) return [];
+
+  const lines: string[] = [];
+  const state = core.getUIState();
+  const opts = getOptionsWithCustom(q);
+
+  for (let i = 0; i < opts.length; i++) {
+    const opt = opts[i];
+    const isCursor = i === state.optionIndex;
+    const hasCustomText = opt.isCustom && state.customText !== null;
+    const isSelected = state.selectedIndices.includes(i);
+
+    // 前缀
+    let prefix: string;
+    if (isCursor) {
+      prefix = theme.fg("accent", "> ");
+    } else if (isSelected) {
+      prefix = theme.fg("success", "• ");
+    } else {
+      prefix = "  ";
+    }
+
+    // 颜色
+    const color = isCursor ? "accent" : isSelected ? "success" : "text";
+
+    // 标签
+    let displayLabel = opt.label;
+    if (hasCustomText) {
+      displayLabel = `"${state.customText}"`;
+    }
+
+    // 编辑标记
+    let suffix = "";
+    if (opt.isCustom && inputMode && isCursor) {
+      suffix = theme.fg("accent", " ✎");
+    } else if (opt.isCustom && isSelected) {
+      suffix = theme.fg("success", " ✎");
+    }
+
+    const num = `${i + 1}`;
+    let line = prefix + theme.fg(color, `${num}. ${displayLabel}`) + suffix;
+
+    lines.push(truncateToWidth(" " + line, width));
+
+    if (opt.description) {
+      lines.push(truncateToWidth("     " + theme.fg("muted", opt.description), width));
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * 单选输入处理。
+ * 返回 true 表示输入被处理，false 表示需要上游继续处理。
+ */
+export function handleSelectInput(
+  core: Core,
+  data: string,
+  _editor: Editor,
+  _theme: ThemeLike,
+): boolean {
+  const q = core.currentQuestion();
+  if (!q) return false;
+  if (q.type !== "select") return false;
+
+  const state = core.getUIState();
+  const opts = getOptionsWithCustom(q);
+
+  // ↑ ↓ 导航
+  if (matchesKey(data, Key.up)) {
+    state.optionIndex = Math.max(0, state.optionIndex - 1);
+    core.saveUIState(state);
+    return true;
+  }
+  if (matchesKey(data, Key.down)) {
+    state.optionIndex = Math.min(opts.length - 1, state.optionIndex + 1);
+    core.saveUIState(state);
+    return true;
+  }
+
+  // 数字键 1-9 快捷跳转
+  const numMatch = /^[1-9]$/.exec(data);
+  if (numMatch) {
+    const target = parseInt(numMatch[0], 10) - 1;
+    if (target < opts.length) {
+      state.optionIndex = target;
+      core.saveUIState(state);
+      return true;
+    }
+    return true;
+  }
+
+  return false;
+}

package/modules/shared.ts

@@ -0,0 +1,10 @@
+/**
+ * 模块间共享类型
+ */
+
+/** 简化的主题接口，各模块渲染函数使用 */
+export interface ThemeLike {
+  fg: (color: string, text: string) => string;
+  bg: (color: string, text: string) => string;
+  bold: (text: string) => string;
+}

package/modules/text.ts

@@ -0,0 +1,71 @@
+/**
+ * 文本输入问题模块
+ *
+ * 默认显示只读摘要；按 Tab 进入内联编辑。
+ * 编辑态 Enter 提交并前进，Esc 退出编辑。
+ */
+
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { Editor } from "@earendil-works/pi-tui";
+import type { Core } from "../core";
+import type { ThemeLike } from "./shared";
+
+/**
+ * 渲染文本输入问题（内联编辑器）
+ */
+export function renderTextQuestion(
+  core: Core,
+  width: number,
+  theme: ThemeLike,
+  editor: Editor,
+): string[] {
+  const q = core.currentQuestion();
+  if (!q || q.type !== "text") return [];
+
+  const lines: string[] = [];
+  const placeholder = q.placeholder || "输入内容...";
+
+  lines.push(" " + theme.fg("muted", "你的回答："));
+  lines.push("");
+
+  if (!core.inputMode) {
+    const state = core.getUIState();
+    const existing = core.answers.get(q.id);
+    const text = existing && 'text' in existing ? existing.text : state.textDraft;
+    lines.push(" " + theme.fg("dim", text ? `> ${text}` : `> ${placeholder}`));
+    return lines;
+  }
+
+  // 编辑态渲染编辑器内容
+  const editorLines = editor.render(width - 2);
+  if (editorLines.length === 0) {
+    lines.push(" " + theme.fg("dim", `> ${placeholder}`));
+  } else {
+    for (const line of editorLines) {
+      lines.push(" " + line);
+    }
+  }
+
+  return lines;
+}
+
+/**
+ * 进入文本编辑模式 - 恢复草稿并激活编辑器
+ */
+export function enterTextEdit(core: Core, editor: Editor): void {
+  const state = core.getUIState();
+  const q = core.currentQuestion();
+  const existing = q ? core.answers.get(q.id) : undefined;
+  const existingText = existing && 'text' in existing ? existing.text : "";
+  editor.setText(state.textDraft || existingText || "");
+}
+
+/**
+ * 离开文本编辑模式 - 保存草稿
+ */
+export function saveTextDraft(core: Core, editor: Editor): void {
+  const text = editor.getText();
+  const state = core.getUIState();
+  state.textDraft = text;
+  core.saveUIState(state);
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "lite-questionnaire",
+  "version": "1.0.0",
+  "description": "轻量级交互式问卷工具 — 单选、多选、文本、确认、评分，带条件子问题和声明式校验",
+  "keywords": [
+    "pi-package",
+    "questionnaire",
+    "form",
+    "survey",
+    "interactive",
+    "tui"
+  ],
+  "license": "MIT",
+  "author": "pi",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yunwuhai/lite-questionnaire.git"
+  },
+  "pi": {
+    "extensions": ["./index.ts"]
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*",
+    "typebox": "*"
+  },
+  "files": [
+    "index.ts",
+    "core.ts",
+    "input.ts",
+    "render.ts",
+    "state.ts",
+    "types.ts",
+    "modules/",
+    "design/",
+    "skills/",
+    "README.md"
+  ]
+}

package/render.ts

@@ -0,0 +1,319 @@
+/**
+ * Questionnaire 通用渲染函数
+ *
+ * 面板框架、Tab 栏（含进度点）、提交汇总页、提示栏等。
+ */
+
+import type { EditorTheme } from "@earendil-works/pi-tui";
+import { Text, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { Editor } from "@earendil-works/pi-tui";
+import type { Core } from "./core";
+import type { Answer, FlatQuestion, ProgressColor } from "./types";
+
+// ─── Editor 工厂 ────────────────────────────────────────
+
+/** 创建编辑器实例 */
+export function createEditor(tui: unknown, editorTheme: EditorTheme): Editor {
+  // tui 参数类型为 any 以避免循环依赖
+  return new Editor(tui as Parameters<typeof Editor>[0], editorTheme);
+}
+
+// ─── 面板 ──────────────────────────────────────────────
+
+/** 面板顶部边框线 */
+export function panelTop(width: number, theme: { fg: (c: string, t: string) => string }): string {
+  return theme.fg("accent", "┌" + "─".repeat(width - 2) + "┐");
+}
+
+/** 面板底部边框线 */
+export function panelBottom(width: number, theme: { fg: (c: string, t: string) => string }): string {
+  return theme.fg("accent", "└" + "─".repeat(width - 2) + "┘");
+}
+
+/** 面板内边距行 */
+export function panelLine(text: string, width: number): string {
+  const innerWidth = Math.max(0, width - 4);
+  const clipped = truncateToWidth(text, innerWidth, "");
+  const padding = " ".repeat(Math.max(0, innerWidth - visibleWidth(clipped)));
+  return "│ " + clipped + padding + " │";
+}
+
+// ─── 进度点 ─────────────────────────────────────────────
+
+/** 将进度颜色映射为主题颜色 key + 显示字符 */
+function progressGlyph(color: ProgressColor): string {
+  switch (color) {
+    case "green":
+      return "●";
+    case "red":
+      return "●";
+    case "none":
+      return "○";
+  }
+}
+
+/** 获取进度点的显示文本（含颜色） */
+export function progressDot(
+  color: ProgressColor,
+  theme: { fg: (c: string, t: string) => string },
+): string {
+  const glyph = progressGlyph(color);
+  switch (color) {
+    case "green":
+      return theme.fg("success", glyph);
+    case "red":
+      return theme.fg("error", glyph);
+    case "none":
+      return theme.fg("dim", glyph);
+  }
+}
+
+// ─── Tab 栏 ─────────────────────────────────────────────
+
+/** 渲染 Tab 栏（含进度点），返回行数组 */
+export function renderTabBar(
+  core: Core,
+  width: number,
+  theme: { fg: (c: string, t: string) => string; bg: (c: string, t: string) => string },
+): string[] {
+  const lines: string[] = [];
+  const parts: string[] = ["◀"];
+
+  // 问题 Tab
+  for (let i = 0; i < core.questions.length; i++) {
+    const q = core.questions[i];
+    const isActive = i === core.currentIndex;
+    const color = core.getProgress(i);
+    const dot = progressDot(color, theme);
+    let text = ` ${dot} ${q.label} `;
+
+    if (isActive) {
+      if (color === "green") {
+        text = theme.fg("success", text);
+      } else if (color === "red") {
+        text = theme.fg("error", text);
+      } else {
+        text = theme.fg("text", text);
+      }
+      text = theme.bg("selectedBg", text);
+    } else if (color === "green") {
+      text = theme.fg("success", text);
+    } else if (color === "red") {
+      text = theme.fg("error", text);
+    }
+    parts.push(text);
+    parts.push("│");
+  }
+
+  // 提交 Tab
+  const isSubmit = core.isSubmitTab();
+  const allDone = core.allAnswered();
+  let submitText = " ✓ Submit ";
+  if (isSubmit) {
+    submitText = theme.bg("selectedBg", allDone ? theme.fg("success", submitText) : theme.fg("text", submitText));
+  } else if (allDone) {
+    submitText = theme.fg("success", submitText);
+  } else {
+    submitText = theme.fg("dim", submitText);
+  }
+  parts.push(submitText);
+  parts.push("▶");
+
+  lines.push(truncateToWidth(" " + parts.join(""), width));
+  return lines;
+}
+
+// ─── 问题标题 ───────────────────────────────────────────
+
+/** 渲染问题标题行 */
+export function renderPrompt(
+  q: FlatQuestion,
+  theme: { fg: (c: string, t: string) => string; bold: (t: string) => string },
+): string {
+  return ` ${q.prompt}`;
+}
+
+// ─── 提示栏 ─────────────────────────────────────────────
+
+/** 根据问题类型和状态生成底部提示文本 */
+export function renderHelpBar(
+  q: FlatQuestion | undefined,
+  isMultiQuestion: boolean,
+  inputMode: boolean,
+  theme: { fg: (c: string, t: string) => string },
+): string {
+  if (inputMode) {
+    return theme.fg("dim", " ← → 调整/移动 · Enter 保存 · Esc 退出编辑");
+  }
+
+  if (!q) {
+    // 提交页
+    return theme.fg("dim", " ← 回到问题 · Enter 提交 · Esc 取消");
+  }
+
+  switch (q.type) {
+    case "select":
+    case "multiSelect": {
+      const base = `Space ${q.type === "multiSelect" ? "切换" : "选择"} · Tab 编辑自定义 · ↑↓ 移动 · Enter 提交`;
+      const nav = isMultiQuestion ? " · ← → 切换问题" : "";
+      const extra = " · Esc 取消";
+      return theme.fg("dim", base + nav + extra);
+    }
+    case "text":
+      return theme.fg("dim", " Tab 编辑 · Enter 提交 · Esc 取消" + (isMultiQuestion ? " · ← → 切换问题" : ""));
+    case "confirm":
+      return theme.fg("dim", " Tab 选择 · Enter 确认 · Esc 取消" + (isMultiQuestion ? " · ← → 切换问题" : ""));
+    case "rating":
+      return theme.fg("dim", " Tab 调整 · Enter 确认 · Esc 取消" + (isMultiQuestion ? " · ← → 切换问题" : ""));
+    default:
+      return theme.fg("dim", "");
+  }
+}
+
+// ─── 提交汇总页 ─────────────────────────────────────────
+
+/** 渲染提交汇总页 */
+export function renderSubmitPage(
+  core: Core,
+  theme: {
+    fg: (c: string, t: string) => string;
+    bold: (t: string) => string;
+  },
+): string[] {
+  const lines: string[] = [];
+
+  lines.push(theme.fg("accent", theme.bold(" 确认你的选择：")));
+  lines.push("");
+
+  for (const q of core.questions) {
+    const answer = core.answers.get(q.id);
+    if (!answer) {
+      lines.push(` ⚠ ${theme.fg("error", q.label)}: ${theme.fg("dim", "(未回答)")}`);
+    } else if ('text' in answer) {
+      const display = answer.text.length > 0 ? answer.text : theme.fg("dim", "(未回答)");
+      lines.push(` ✓ ${theme.fg("success", q.label)}: ${display}`);
+    } else if ('confirmed' in answer) {
+      lines.push(` ✓ ${theme.fg("success", q.label)}: ${answer.label}`);
+    } else if ('value' in answer && typeof answer.value === 'number') {
+      const annot = answer.annotation ? ` (${answer.annotation})` : '';
+      lines.push(` ✓ ${theme.fg("success", q.label)}: ${answer.value}${annot}`);
+    } else if ('value' in answer && typeof answer.value === 'string') {
+      if (answer.value.length === 0) {
+        lines.push(` ⚠ ${theme.fg("error", q.label)}: ${theme.fg("dim", "(未回答)")}`);
+      } else if (answer.wasCustom) {
+        lines.push(` ✓ ${theme.fg("success", q.label)}: ${theme.fg("muted", "(自定义) ")}${answer.label}`);
+      } else {
+        lines.push(` ✓ ${theme.fg("success", q.label)}: ${answer.label}`);
+      }
+    } else if ('values' in answer) {
+      if (answer.values.length === 0) {
+        lines.push(` ⚠ ${theme.fg("error", q.label)}: ${theme.fg("dim", "(未回答)")}`);
+      } else {
+        const parts = answer.labels.join(', ');
+        if (answer.wasCustom) {
+          lines.push(` ✓ ${theme.fg("success", q.label)}: ${parts} ${theme.fg("muted", "· 自定义")}`);
+        } else {
+          lines.push(` ✓ ${theme.fg("success", q.label)}: ${parts}`);
+        }
+      }
+    }
+  }
+
+  lines.push("");
+
+  const incomplete = core.incompleteQuestions();
+  if (incomplete.length > 0) {
+    const missing = core.questions
+      .filter((q) => incomplete.includes(q.id))
+      .map((q) => q.label)
+      .join(", ");
+    lines.push(` ⚠ ${theme.fg("error", "未完成:")} ${theme.fg("dim", missing)} → ${theme.fg("error", "无法提交")}`);
+    lines.push(` ${theme.fg("dim", "← 回到问题修改")}`);
+  } else {
+    lines.push(` ${theme.fg("success", "全部完成，按 Enter 提交")}`);
+  }
+
+  return lines;
+}
+
+// ─── 帮助函数：获取当前问题的选项列表 ──────────────────
+
+/** 获取带"自定义"选项的完整选项列表 */
+export function getOptionsWithCustom(q: FlatQuestion): Array<{
+  value: string;
+  label: string;
+  description?: string;
+  isCustom: boolean;
+}> {
+  if (q.type !== "select" && q.type !== "multiSelect") return [];
+  const opts = q.options.map((o) => ({ ...o, isCustom: false }));
+  opts.push({ value: "__custom__", label: "自定义", description: undefined, isCustom: true });
+  return opts;
+}
+
+// ─── renderCall / renderResult 辅助 ────────────────────
+
+/** renderCall：显示问题数量和标签 */
+export function renderCallText(
+  args: { questions?: Array<{ label?: string; id: string }> },
+  theme: { fg: (c: string, t: string) => string; bold: (t: string) => string },
+): Text {
+  const qs = args.questions || [];
+  const count = qs.length;
+  const labels = qs.map((q) => q.label || q.id).join(", ");
+  let text = theme.fg("toolTitle", theme.bold("questionnaire "));
+  text += theme.fg("muted", `${count} question${count !== 1 ? "s" : ""}`);
+  if (labels) {
+    text += theme.fg("dim", ` (${truncateToWidth(labels, 40)})`);
+  }
+  return new Text(text, 0, 0);
+}
+
+/** renderResult：显示答案汇总 */
+export function renderResultText(
+  result: { content: Array<{ type: string; text: string }>; details: unknown },
+  theme: { fg: (c: string, t: string) => string },
+): Text {
+  const details = result.details as
+    | { cancelled?: boolean; message?: string; answers?: Record<string, Answer>; submittedAt?: string }
+    | undefined;
+
+  if (!details) {
+    const text = result.content[0];
+    return new Text(text?.type === "text" ? text.text : "", 0, 0);
+  }
+
+  if (details.cancelled) {
+    return new Text(theme.fg("warning", details.message || "Cancelled"), 0, 0);
+  }
+
+  const answerMap = details.answers || {};
+  const entries = Object.entries(answerMap);
+  const lines = entries.flatMap(([id, a]) => {
+    const prefix = `${theme.fg("success", "✓ ")}${theme.fg("accent", id)}: `;
+    if ('text' in a) {
+      return [prefix + a.text];
+    }
+    if ('confirmed' in a) {
+      return [prefix + a.label];
+    }
+    if ('value' in a && typeof a.value === 'number') {
+      const annot = a.annotation ? ` (${a.annotation})` : '';
+      return [prefix + `${a.value}${annot}`];
+    }
+    if ('value' in a && typeof a.value === 'string') {
+      if (a.value.length === 0) return [prefix + theme.fg("dim", "(none)")];
+      if (a.wasCustom) return [prefix + theme.fg("muted", "(wrote) ") + a.label];
+      return [prefix + a.label];
+    }
+    if ('values' in a) {
+      if (a.values.length === 0) return [prefix + theme.fg("dim", "(none)")];
+      const parts = a.labels.join(', ');
+      if (a.wasCustom) return [prefix + parts + ' ' + theme.fg("muted", "· (wrote)")];
+      return [prefix + parts];
+    }
+    return [prefix + theme.fg("dim", "(none)")];
+  });
+
+  return new Text(lines.join("\n"), 0, 0);
+}