@lingfan-engine/ui 0.1.4 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingfan-engine/ui",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "type": "module",
   "description": "灵泛叙事引擎参考展示层：框架无关的可测纯逻辑（内联标记、打字机、音频差量规划）",
   "license": "Apache-2.0",
@@ -13,7 +13,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@lingfan-engine/core": "^0.1.4"
+    "@lingfan-engine/core": "^0.2.0"
   },
   "repository": {
     "type": "git",

package/src/dom/materialize.ts

@@ -2,7 +2,7 @@
  * 本目录是 `packages/ui` 内**唯一**允许出现 DOM 类型与 DOM 全局的目录。
  *
  * 与 `packages/ui/src/host/index.ts` 同一口气的规则：其余目录一律只产出 `RenderSpec`；
- * 需要碰 DOM 的地方经 `RenderPort` 收口到这里，别的平台（小程序）在同一位置换成自己的物化器。
+ * 需要碰 DOM 的地方经 `RenderPort` 完成到这里，别的平台（小程序）在同一位置换成自己的物化器。
  */
 import type {
   RenderEvent,

package/src/dom/overlay-surface.ts

@@ -229,6 +229,22 @@ export function createDomOverlaySurface(
         });
         form.append(field, submit);
         choices.append(label, form);
+        // 候选按钮排在输入表单之后：点一项直接以该项 value 走同一提交出口
+        if (view.input.candidates.length > 0) {
+          const row = doc().createElement("div");
+          row.className = "lf-choice-row";
+          for (const candidate of view.input.candidates) {
+            const button = clickable(doc().createElement("button"));
+            button.type = "button";
+            button.textContent = candidate.label;
+            button.setAttribute("aria-label", candidate.label);
+            button.addEventListener("click", () =>
+              surface.onSubmitInput?.(candidate.value),
+            );
+            row.appendChild(button);
+          }
+          choices.appendChild(row);
+        }
         return;
       }
 

package/src/element/render.ts

@@ -16,7 +16,7 @@ import type { RenderPort, RenderSpec } from "./spec";
  * 其余三个回调不传即「没有对应的宿主能力」（表现为元素不可点、表达式不求解、资源显示替代文本）。
  *
  * `port` 是宿主注入的渲染端口（Web 侧 `createDomRenderPort`）——渲染器只产出描述树，
- * 平台差异全部收口在端口实现里。
+ * 平台差异全部完成在端口实现里。
  */
 export interface ElementTreeRenderOptions {
   registry: ElementRegistry;

package/src/host/state-view.ts

@@ -62,6 +62,8 @@ export interface StateKeyTable {
   menuOptions: string;
   /** 菜单选项目标 */
   menuTargets: string;
+  /** 输入候选（可选：不订阅则输入等待只有输入框，行为同加候选之前） */
+  inputOptions?: string;
   /** 对话框显隐 */
   dialogVisible: string;
   /** 舞台元素表 */
@@ -140,6 +142,9 @@ export function createStateView(
     // 选项与目标两键分别写入：任一到达都做一次整体重建
     if (key === keys.menuOptions || key === keys.menuTargets)
       return { kind: "choices" };
+    // 输入候选与输入提示同属选择层：候选到达也重建（否则点了候选后旧候选会留在屏上）
+    if (keys.inputOptions !== undefined && key === keys.inputOptions)
+      return { kind: "choices" };
     if (key === keys.dialogVisible)
       return { kind: "dialog-visible", hidden: value === "hide" };
     if (key === keys.elements) {

package/src/overlay/choices-view.ts

@@ -15,6 +15,8 @@ export interface ChoicesRenderInput {
   menuPrompt: string;
   menuOptions: readonly { text: string; target: string }[];
   inputPrompt: string;
+  /** 输入候选（缺省空数组 = 只有输入框） */
+  inputCandidates?: readonly { text: string; value: string }[];
 }
 
 /** 选择层文案（宿主可覆盖；缺省实现即内建文案） */
@@ -50,11 +52,20 @@ export function choicesLayerView(
 ): ChoicesLayerView | null {
   if (input.waiting === "input") {
     const texts: ChoicesTexts = { ...DEFAULT_CHOICES_TEXTS, ...deps.texts };
+    // 候选与输入框并存：玩家可以点候选，也可以自己打字（两者走同一个提交出口）
+    const candidates = (input.inputCandidates ?? []).map((item) => ({
+      label: item.text,
+      value: item.value,
+    }));
     return {
       rootClass: "",
       promptHtml: "",
       options: [],
-      input: { prompt: input.inputPrompt, submitText: texts.inputSubmit },
+      input: {
+        prompt: input.inputPrompt,
+        submitText: texts.inputSubmit,
+        candidates,
+      },
     };
   }
   if (input.waiting !== "menu") return null;

package/src/overlay/create.ts

@@ -138,6 +138,7 @@ export function createNarrativeOverlay(
           menuPrompt: s.menuPrompt,
           menuOptions: s.menuOptions,
           inputPrompt: s.inputPrompt,
+          inputCandidates: s.inputCandidates,
         },
         choicesDeps,
       ),

package/src/overlay/projector.ts

@@ -43,6 +43,8 @@ export interface RenderState {
   menuPrompt: string;
   menuOptions: Array<{ text: string; target: string }>;
   inputPrompt: string;
+  /** 输入候选（显示文本与要填的值成对；空数组 = 只有输入框） */
+  inputCandidates: Array<{ text: string; value: string }>;
   nvlMode: string;
   nvlBuffer: string[];
   elementList: ElementInstance[];
@@ -103,6 +105,7 @@ export function createProjector(deps: {
     menuPrompt: "",
     menuOptions: [],
     inputPrompt: "",
+    inputCandidates: [],
     nvlMode: "none",
     nvlBuffer: [],
     elementList: [],
@@ -190,6 +193,10 @@ export function createProjector(deps: {
       state.inputPrompt = reader.inputPrompt();
       return { kind: "render", targets: ["choices"] };
     }
+    if (key === SYS.inputOptions) {
+      state.inputCandidates = reader.inputCandidates();
+      return { kind: "render", targets: ["choices"] };
+    }
     if (key === SYS.nvlMode) {
       const next = reader.nvlMode();
       state.nvlMode = next === "" ? "none" : next;
@@ -218,6 +225,7 @@ export function createProjector(deps: {
     state.menuPrompt = reader.menuPrompt();
     readMenuOptions();
     state.inputPrompt = reader.inputPrompt();
+    state.inputCandidates = reader.inputCandidates();
     const mode = reader.nvlMode();
     state.nvlMode = mode === "" ? "none" : mode;
     state.nvlBuffer = reader.nvlLines();

package/src/overlay/surface.ts

@@ -62,6 +62,19 @@ export interface ChoicesLayerInput {
   prompt: string;
   /** 提交按钮显示文本 */
   submitText: string;
+  /**
+   * 候选快捷值（缺省空数组 = 只有输入框）：点一项即把该项 `value` 当输入值提交，
+   * 输入框仍可用。`label` 是显示文本（可能已翻译），`value` 是要写进变量的原样值。
+   */
+  candidates: readonly ChoicesLayerCandidate[];
+}
+
+/** 输入候选（显示文本与要填的值成对；与菜单选项不同——它不跳列，只替玩家填值） */
+export interface ChoicesLayerCandidate {
+  /** 显示文本（已走翻译；也用作按钮的可访问名） */
+  label: string;
+  /** 要填进变量的原样值（不进翻译表） */
+  value: string;
 }
 
 /**