pi-ask-popup 0.1.1 → 0.2.0

package/src/view/components/wrapping-select.ts

@@ -38,12 +38,24 @@ export interface WrappingSelectOptions {
   totalItemsForNumbering?: number;
 }
 
+/** One width's worth of rendered rows, plus where each item sits in them. */
+interface RenderedRows {
+  lines: string[];
+  rangeByIndex: Map<number, [number, number]>;
+}
+
 export class WrappingSelect implements Component {
   private static readonly ACTIVE_POINTER = "❯ ";
   private static readonly INACTIVE_POINTER = "  ";
   private static readonly NUMBER_SEPARATOR = ". ";
   private static readonly CONFIRMED_MARK = " ✔";
   private static readonly MIN_CONTENT_WIDTH = 1;
+  /**
+   * Widths kept in the render memo before it is dropped wholesale. A frame asks
+   * for two or three (full pane, side-by-side left column, height probes); the
+   * rest of the entries are old terminal sizes from a resize drag.
+   */
+  private static readonly RENDER_CACHE_MAX_WIDTHS = 8;
 
   private readonly items: readonly WrappingSelectItem[];
   private readonly maxVisible: number;
@@ -68,6 +80,18 @@ export class WrappingSelect implements Component {
    * prior answer was custom text, we render that text instead (e.g. `4. Hello ✔`).
    */
   private confirmedLabelOverride: string | undefined = undefined;
+  /**
+   * Rendered rows and row boundaries per width, valid while
+   * `renderStateSignature()` holds.
+   *
+   * One frame calls `render` two or three times at different widths — the
+   * option list, the height probes in `PreviewPane`, the side-by-side left
+   * column — and every call re-wrapped every visible row. The signature covers
+   * all the mutable state a row can read, so the props write that happens each
+   * tick with unchanged values keeps the memo warm instead of dropping it.
+   */
+  private readonly renderCache = new Map<number, RenderedRows>();
+  private renderCacheSignature: string | undefined = undefined;
 
   constructor(
     items: readonly WrappingSelectItem[],
@@ -127,16 +151,78 @@ export class WrappingSelect implements Component {
   /** Intentionally empty — input is routed at the container level. */
   handleInput(_data: string): void {}
 
-  invalidate(): void {}
+  invalidate(): void {
+    this.renderCache.clear();
+  }
 
   render(width: number): string[] {
+    // A copy, because callers own what they get back: `PreviewPane` hands this
+    // array straight up to the dialog, which decorates rows in place.
+    return [...this.cachedRows(width).lines];
+  }
+
+  /**
+   * Row count at `width` without handing out the rows.
+   *
+   * Reads the same memo `render` fills, so `measureHeight(w) ===
+   * render(w).length` by construction — the height probes in `PreviewPane`
+   * relied on that parity while paying for an array copy to get it.
+   */
+  measureHeight(width: number): number {
+    return this.cachedRows(width).lines.length;
+  }
+
+  /** The memo. Returns the stored rows themselves — callers must not mutate them. */
+  private cachedRows(width: number): RenderedRows {
+    const signature = this.renderStateSignature();
+    if (signature !== this.renderCacheSignature) {
+      this.renderCache.clear();
+      this.renderCacheSignature = signature;
+    }
+    const cached = this.renderCache.get(width);
+    if (cached !== undefined) {
+      return cached;
+    }
+    const rendered = this.renderRows(width);
+    if (this.renderCache.size >= WrappingSelect.RENDER_CACHE_MAX_WIDTHS) {
+      this.renderCache.clear();
+    }
+    this.renderCache.set(width, rendered);
+    return rendered;
+  }
+
+  /**
+   * Every mutable input a rendered row reads. `items`, `maxVisible` and `theme`
+   * are constructor-fixed, so they stay out. A NUL separator keeps a buffer
+   * containing the separator from colliding with the next field.
+   */
+  private renderStateSignature(): string {
+    return [
+      this.selectedIndex,
+      this.focused,
+      this.confirmedIndex ?? -1,
+      this.confirmedLabelOverride ?? "",
+      this.inputCursorOffset ?? -1,
+      this.numberStartOffset,
+      this.totalItemsForNumbering,
+      this.inputBuffer,
+    ].join("\u0000");
+  }
+
+  /**
+   * The single pass. Rows and the row range each item occupies come out
+   * together, because they are the same walk: counting an item's rows any other
+   * way means rendering it a second time and throwing the strings away.
+   */
+  private renderRows(width: number): RenderedRows {
     if (this.items.length === 0) {
-      return [];
+      return { lines: [], rangeByIndex: new Map() };
     }
 
     const { startIndex, endIndex } = this.computeVisibleWindow();
     const numberWidth = String(Math.max(1, this.totalItemsForNumbering)).length;
     const lines: string[] = [];
+    const rangeByIndex = new Map<number, [number, number]>();
 
     for (let i = startIndex; i < endIndex; i++) {
       const item = this.items[i];
@@ -144,55 +230,32 @@ export class WrappingSelect implements Component {
         continue;
       }
       const isActive = i === this.selectedIndex && this.focused;
+      const start = lines.length;
       lines.push(...this.renderItem(item, i, isActive, width, numberWidth));
+      rangeByIndex.set(i, [start, lines.length]);
     }
 
     if (this.hasItemsOutsideWindow(startIndex, endIndex)) {
       lines.push(this.theme.scrollInfo(`  (${this.selectedIndex + 1}/${this.items.length})`));
     }
-    return lines;
+    return { lines, rangeByIndex };
   }
 
   /**
-   * Returns the [startRow, endRow) range of the focused (selected) item within
-   * the output of `render(width)`. Computed by iterating the visible window and
-   * summing per-item row counts — O(maxVisible) per call.
+   * The [startRow, endRow) range the focused item occupies in `render(width)`.
+   *
+   * Read out of the same memo the rows come from. It used to re-render every
+   * item in the window to count their rows and drop the strings, on every frame
+   * the dialog anchored its scroll window — which was every frame.
+   *
+   * `[0, 1]` when the selection is outside the visible window: there is no
+   * range to report, and the first row is the safe thing to anchor on.
    */
   focusedItemRowRange(width: number): [number, number] {
     if (this.items.length === 0) {
       return [0, 0];
     }
-    const { startIndex, endIndex } = this.computeVisibleWindow();
-    const numberWidth = String(Math.max(1, this.totalItemsForNumbering)).length;
-    let row = 0;
-    for (let i = startIndex; i < endIndex; i++) {
-      const item = this.items[i];
-      if (!item) {
-        continue;
-      }
-      const isActive = i === this.selectedIndex && this.focused;
-      const itemRowCount = this.computeItemRowCount(item, i, isActive, width, numberWidth);
-      if (i === this.selectedIndex) {
-        return [row, row + itemRowCount];
-      }
-      row += itemRowCount;
-    }
-    return [0, 1];
-  }
-
-  /**
-   * Per-item row count. Delegates to `renderItem().length` so `renderItem` remains
-   * the single source of truth for per-item row math — eliminates the prior shadow-copy
-   * that risked silent miscounts when new `kind` values branch in `renderItem` but not here.
-   */
-  private computeItemRowCount(
-    item: WrappingSelectItem,
-    index: number,
-    isActive: boolean,
-    width: number,
-    numberWidth: number,
-  ): number {
-    return this.renderItem(item, index, isActive, width, numberWidth).length;
+    return this.cachedRows(width).rangeByIndex.get(this.selectedIndex) ?? [0, 1];
   }
 
   private computeVisibleWindow(): { startIndex: number; endIndex: number } {

package/src/view/dialog-builder.ts

@@ -18,6 +18,13 @@ export const HINT_PART_NAV = "↑/↓ to navigate";
 export const HINT_PART_NEW_LINE = "Shift+Enter for newline";
 export const HINT_PART_CLEAR = "Ctrl+U to clear";
 export const HINT_PART_TOGGLE = "Space to toggle";
+/**
+ * Replaces ENTER while the typed row of a multi-select question has the
+ * keyboard. Enter there commits the question, the way the Next row does, rather
+ * than choosing a single answer — and Space belongs to the draft, so the resting
+ * "Space to toggle" is dropped alongside this.
+ */
+export const HINT_PART_ENTER_CONFIRM = "Enter to confirm";
 export const HINT_PART_NOTES = "n to add notes";
 /** Replaces the add form once the tab already has a note. See `buildHintText`. */
 export const HINT_PART_NOTES_EDIT = "n to edit notes";
@@ -162,7 +169,14 @@ export interface DialogConfig {
   /** Body height of the tab showing right now. The difference is absorbed outside the border. */
   getCurrentBodyHeight: (width: number) => number;
   /** Terminal height, read at render time — the mirror of the width getter. */
-  getTerminalRows: () => number;
+  /**
+   * Snapshot the terminal size for the frame about to be painted. Called first
+   * thing in `render`, before any child renders or is measured, so every
+   * component in the frame decides against the same terminal.
+   */
+  beginFrame: () => void;
+  /** The size `beginFrame` last snapshotted. */
+  getFrameTerminalRows: () => number;
   /**
    * Resolved collapse key (`"ctrl+]"`, `"alt+o"`, `"off"`). Construction-time
    * config, deliberately not canonical state: the runtime's copy must never
@@ -227,6 +241,10 @@ export class DialogView implements StatefulView<DialogProps> {
   invalidate(): void {}
 
   render(width: number): string[] {
+    // First, before any child renders or is measured: the whole frame decides
+    // against one terminal size.
+    this.config.beginFrame();
+
     const state = this.liveProps.state;
     const onSubmit = this.config.isMulti && state.currentTab === this.config.questions.length;
     const strategy = onSubmit && this.submitStrategy ? this.submitStrategy : this.questionStrategy;
@@ -266,7 +284,7 @@ export class DialogView implements StatefulView<DialogProps> {
         strategy.restingNoteRowCount(state),
     );
 
-    const termRows = this.config.getTerminalRows();
+    const termRows = this.config.getFrameTerminalRows();
 
     if (natural.length + spacerRows <= termRows) {
       return renderFitsTerminal(natural, spacerRows);

package/src/view/props-adapter.ts

@@ -102,6 +102,14 @@ export class QuestionnairePropsAdapter {
       binding.apply(state, ctx);
     }
 
+    // Collapsed, the overlay is one dim row and no tab is on screen. The
+    // per-tab writes would only clear caches for a frame nobody sees; expanding
+    // dispatches, which brings the whole loop back with current state.
+    if (state.collapsed) {
+      this.tui.requestRender();
+      return;
+    }
+
     for (let i = 0; i < this.tabsByIndex.length; i++) {
       const tab = this.tabsByIndex[i];
       if (!tab) {

package/src/view/tab-content-strategy.ts

@@ -23,6 +23,7 @@ import {
   HINT_PART_NOTES,
   HINT_PART_NOTES_EDIT,
   HINT_PART_TAB,
+  HINT_PART_ENTER_CONFIRM,
   HINT_PART_TOGGLE,
   INCOMPLETE_WARNING_PREFIX,
   KEY_PLACEHOLDER,
@@ -431,8 +432,15 @@ export function buildHintText(
   state: DialogState,
   collapseKey: string,
 ): string {
-  const parts: string[] = [HINT_PART_ENTER, HINT_PART_NAV];
-  if (question?.multiSelect === true) {
+  const typingOnMulti = question?.multiSelect === true && state.inputMode;
+  // Typing on the multi-select free-text row: Enter ticks that row rather than
+  // choosing an answer, and Space belongs to the draft, so neither resting part
+  // is true here.
+  const parts: string[] = [
+    typingOnMulti ? HINT_PART_ENTER_CONFIRM : HINT_PART_ENTER,
+    HINT_PART_NAV,
+  ];
+  if (question?.multiSelect === true && !typingOnMulti) {
     parts.push(HINT_PART_TOGGLE);
   }
   if (question && !state.notesVisible && !state.inputMode) {