@zergai/ztc 0.5.0-beta.1 → 0.6.0-beta.1

package/dist/ui/widgets/select.js

@@ -5,6 +5,25 @@
  */
 import { displayWidth } from '../core/text_width.js';
 import { wrapText } from '../core/wrap_text.js';
+import { box, text } from '../core/index.js';
+import { TERMINAL_THEME } from '../views/theme.js';
+import { bottomBorder, framedLine, lineText, titleBorder } from './panel_frame.js';
+import { isControlKey } from '../core/input.js';
+import { ReasoningTrack } from './reasoning_track.js';
+/** What a required select shows when it is typed into or escaped. */
+export const REQUIRED_CHOICE_NUDGE = 'Choose one to continue';
+/** Text typed or pasted, as opposed to a key that moves, confirms or edits. */
+export function isTypedText(input, key) {
+    if (key.paste)
+        return input.length > 0;
+    return input.length > 0 && !/[\x00-\x1f\x7f]/.test(input)
+        && !(key.ctrl || key.meta || key.escape || key.return || key.tab || key.backspace || key.delete
+            || key.upArrow || key.downArrow || key.leftArrow || key.rightArrow || key.home || key.end || key.pageUp || key.pageDown);
+}
+/** The description a surface without per-row details shows, such as the ask_user fallback. */
+export function selectOptionSummary(option) {
+    return [option.description, ...(option.details ?? [])].filter(part => part).join(' · ');
+}
 export class SelectWidget {
     host;
     active = null;
@@ -12,10 +31,17 @@ export class SelectWidget {
     checked = new Set();
     otherMode = false;
     otherValue = '';
+    /** A required select was typed into or escaped, so its footer asks for a choice. */
+    nudged = false;
+    /** Text was typed into a required select since the last arrow; the next Enter ends it, not a choice. */
+    typing = false;
+    /** Set while a `layout: 'reasoning'` select is open; it draws and moves the effort track. */
+    track = null;
     /**
      * Columns the option gutter claims before the label: the `❯ `/`  ` pointer
-     * plus the state marker and its separator. Every body row (question, label,
-     * description, Other hint) is indented by this, so the card has one left edge.
+     * plus the state marker and its separator. Descriptions, details and the
+     * Other hint start on this column, under the labels; the question starts at
+     * the box padding, under the pointer, as the site's film draws the select.
      */
     static labelColumn(type) {
         const marker = type === 'multiselect' ? '[✓]' : '○';
@@ -47,6 +73,19 @@ export class SelectWidget {
         this.checked.clear();
         this.otherMode = false;
         this.otherValue = '';
+        this.nudged = false;
+        this.typing = false;
+        this.track = data.layout === 'reasoning'
+            ? new ReasoningTrack(data.options, typeof data.defaultValue === 'string' ? data.defaultValue : undefined, data.resumeValue, data.routing?.value)
+            : null;
+        const track = this.track;
+        const prices = data.routing?.prices;
+        if (track && prices) {
+            track.setPrices('loading');
+            void prices.then(value => track.setPrices(value), () => track.setPrices(null))
+                .then(() => { if (this.track === track)
+                this.host.render(); });
+        }
         // Default to first selectable item
         this.selectedIndex = 0;
         for (let i = 0; i < data.options.length; i++) {
@@ -75,6 +114,7 @@ export class SelectWidget {
     }
     cancel() {
         this.active = null;
+        this.track = null;
         this.selectedIndex = 0;
         this.checked.clear();
         this.otherMode = false;
@@ -83,19 +123,61 @@ export class SelectWidget {
     isActive() {
         return this.active !== null;
     }
+    /**
+     * Handle one key. False when the select did not take it: a required select
+     * leaves Ctrl+C to the host.
+     */
     handleInput(input, key) {
         if (!this.active)
-            return;
+            return false;
+        if (this.track) {
+            if (isControlKey(input, key, 'c') || key.escape)
+                this.dismiss();
+            else if (key.return) {
+                const routing = this.active.routing;
+                const route = this.track.routing();
+                if (routing && route !== undefined && route !== routing.value)
+                    void routing.onChoose(route);
+                this.choose(this.track.value());
+            }
+            else if (isTypedText(input, key)) {
+                // Typing means the person has moved on: keep the setting and leave the key to the composer.
+                this.dismiss();
+                return false;
+            }
+            else if (this.track.handleKey(key))
+                this.host.render();
+            return true;
+        }
+        if (this.active.required && !this.otherMode) {
+            if (isControlKey(input, key, 'c'))
+                return false;
+            // Typing, editing it and Escape never close the choice. j/k are letters here.
+            const typed = isTypedText(input, key) || key.backspace || key.delete;
+            if (typed || key.escape) {
+                this.nudged = true;
+                if (typed)
+                    this.typing = true;
+                this.host.render();
+                return true;
+            }
+            if (key.upArrow || key.downArrow)
+                this.typing = false;
+            if (key.return && this.typing) {
+                this.typing = false;
+                return true;
+            }
+        }
         if (key.paste) {
             if (!input)
-                return;
+                return true;
             if (this.otherMode || (this.active.allowOther && this.active.type === 'select')) {
                 this.otherMode = true;
                 this.selectedIndex = this.active.options.length;
                 this.otherValue += input;
                 this.host.render();
             }
-            return;
+            return true;
         }
         const options = this.active.options;
         const totalOptions = options.length + (this.active.allowOther ? 1 : 0);
@@ -106,7 +188,7 @@ export class SelectWidget {
                 this.otherMode = false;
                 this.otherValue = '';
                 this.host.render();
-                return;
+                return true;
             }
             // Enter to submit custom value
             if (key.return) {
@@ -119,30 +201,26 @@ export class SelectWidget {
                         this.host.addSystemMessage(`Error: ${err.message}`);
                     });
                 }
-                return;
+                return true;
             }
             // Backspace
             if (key.backspace || key.delete) {
                 this.otherValue = this.otherValue.slice(0, -1);
                 this.host.render();
-                return;
+                return true;
             }
             // Regular character input
             if (input && input.length === 1 && !key.ctrl && !key.meta) {
                 this.otherValue += input;
                 this.host.render();
-                return;
+                return true;
             }
-            return;
+            return true;
         }
         // Ctrl+C or Escape to cancel
-        if ((key.ctrl && input === 'c') || key.escape) {
-            this.host.addSystemMessage('Cancelled.');
-            const callback = this.active.callback;
-            this.cancel();
-            this.host.render();
-            void Promise.resolve(callback(null)).catch(() => { });
-            return;
+        if ((isControlKey(input, key, 'c')) || key.escape) {
+            this.dismiss();
+            return true;
         }
         // Navigate up — skip non-selectable items
         if (key.upArrow || input === 'k') {
@@ -152,7 +230,7 @@ export class SelectWidget {
             if (next >= 0)
                 this.selectedIndex = next;
             this.host.render();
-            return;
+            return true;
         }
         // Navigate down — skip non-selectable items
         if (key.downArrow || input === 'j') {
@@ -162,7 +240,7 @@ export class SelectWidget {
             if (next < totalOptions)
                 this.selectedIndex = next;
             this.host.render();
-            return;
+            return true;
         }
         // Secondary key actions (e.g. 'l' view logs, 'p' prompt viewer)
         if (this.active.secondaryActions && !key.ctrl && !key.meta && input && input.length === 1) {
@@ -173,7 +251,7 @@ export class SelectWidget {
                 if (opt && !opt.value.startsWith('_')) {
                     action.callback(idx, opt.value);
                 }
-                return;
+                return true;
             }
         }
         // Space to toggle (multiselect only)
@@ -188,13 +266,13 @@ export class SelectWidget {
                 }
                 this.host.render();
             }
-            return;
+            return true;
         }
         // Enter to confirm selection
         if (key.return) {
             // Non-selectable rows (separators, headers) cannot be activated
             if (!this.isSelectable(this.selectedIndex) && !(this.active.allowOther && this.selectedIndex === options.length)) {
-                return;
+                return true;
             }
             const callback = this.active.callback;
             const type = this.active.type;
@@ -203,16 +281,10 @@ export class SelectWidget {
             if (this.active.allowOther && idx === options.length) {
                 this.otherMode = true;
                 this.host.render();
-                return;
+                return true;
             }
             if (type === 'select') {
-                // Single select - return the value
-                const value = options[idx]?.value || '';
-                this.cancel();
-                this.host.render();
-                void Promise.resolve(callback(value)).catch((err) => {
-                    this.host.addSystemMessage(`Error: ${err.message}`);
-                });
+                this.choose(options[idx]?.value || '');
             }
             else {
                 // Multiselect - return array of checked values
@@ -225,7 +297,7 @@ export class SelectWidget {
                     this.host.addSystemMessage(`Error: ${err.message}`);
                 });
             }
-            return;
+            return true;
         }
         // Quick-start typing: if the widget allows an "Other..." value,
         // pressing any printable character auto-selects Other and drops the
@@ -263,135 +335,233 @@ export class SelectWidget {
             this.otherValue = input;
             this.selectedIndex = options.length;
             this.host.render();
-            return;
+            return true;
         }
+        return true;
+    }
+    /** Close with a choice and hand it to the caller. */
+    choose(value) {
+        const callback = this.active.callback;
+        this.cancel();
+        this.host.render();
+        void Promise.resolve(callback(value)).catch((err) => {
+            this.host.addSystemMessage(`Error: ${err.message}`);
+        });
     }
-    buildContent(cols) {
+    /** Close without a choice; the caller hears null. */
+    dismiss() {
+        if (!this.active.silentCancel)
+            this.host.addSystemMessage('Cancelled.');
+        const callback = this.active.callback;
+        this.cancel();
+        this.host.render();
+        void Promise.resolve(callback(null)).catch(() => { });
+    }
+    /** An open select its caller asked to draw compact (SelectData.compact). */
+    isCompact() {
+        return this.active?.compact === true;
+    }
+    /** An open select that must end in a choice (SelectData.required). */
+    isRequired() {
+        return this.active?.required === true;
+    }
+    /** The select as framed plain text, the rows the layout measures. See buildSurface. */
+    buildContent(cols, rows) {
+        return this.buildSurface(cols, rows).content;
+    }
+    /**
+     * The select as the renderer paints it, and as the plain text the layout
+     * measures. It reads as the site's First Contact film draws it: the title in
+     * the accent on the border, the question at the box padding, the highlighted
+     * option's pointer and radio in the accent with its label bright, the others
+     * muted, the description muted, details after teal squares, and the key hints
+     * muted right under the options. With `rows`, it fits in that many rows: the
+     * borders, the key hints and every option label stay, and the highlighted
+     * option's details are trimmed first (see fitEntries).
+     */
+    buildSurface(cols, rows) {
         if (!this.active)
-            return '';
+            return { content: '', view: box([], {}) };
+        if (this.track)
+            return surfaceOf(this.track.lines(cols, this.active.title, this.active.question, this.active.footer));
         const { title, question, type, options, allowOther } = this.active;
-        const lines = [];
         const width = Math.min(Math.max(cols - 4, 40), 72);
-        // `pad` sizes to the full interior by default. Rows that carry a leading
-        // gutter pass an explicit width so the indent does not eat into the text
-        // budget (which would clip a line that still had room).
-        const pad = (s, w = width - 4) => {
-            if (displayWidth(s) > w) {
-                // Slice on visible width, not code units: the gutter holds wide glyphs
-                // (❯, ○, [✓]) and a code-unit slice would cut them in half.
-                let clipped = '';
-                for (const ch of s) {
-                    if (displayWidth(clipped + ch) > w - 1)
-                        break;
-                    clipped += ch;
-                }
-                return clipped + '…';
-            }
-            return s + ' '.repeat(Math.max(0, w - displayWidth(s)));
-        };
-        // Top border with title
-        const titlePart = title ? ` ${title} ` : '';
-        // Body rows reserve 4 fixed cells ('│ ' + ' │'). The title border reserves
-        // only 3 ('╭─' + '╮'), so it was drawn one column short of every other row
-        // and the right edge did not line up. Fill to the same interior width.
-        const titleFill = Math.max(0, width - 3 - displayWidth(titlePart));
-        const topLine = '╭─' + titlePart + '─'.repeat(titleFill) + '╮';
-        lines.push(topLine);
+        const interior = width - 4;
+        const lines = [titleBorder(width, title)];
+        const framed = (segments) => framedLine(segments, width);
+        const blank = () => framed([]);
         // Keep explicit metadata rows and wrap long path tokens at visible cells.
-        const maxQWidth = width - 4;
-        const questionGutter = SelectWidget.labelColumn(type);
-        const innerQ = Math.max(1, maxQWidth - displayWidth(questionGutter));
-        for (const line of wrapText(question, innerQ)) {
-            lines.push('│ ' + pad(questionGutter + line, maxQWidth) + ' │');
-        }
-        lines.push('│' + ' '.repeat(width - 2) + '│');
+        for (const line of wrapText(question, interior))
+            lines.push(framed([{ text: line, style: STYLE.question }]));
         // If in "Other" text input mode
         if (this.otherMode) {
-            lines.push('│ ' + pad('Enter custom value:') + ' │');
-            const cursor = '█';
-            const fullInput = `  ${this.otherValue}${cursor}`;
+            lines.push(blank());
+            lines.push(framed([{ text: 'Enter custom value:', style: STYLE.question }]));
+            const fullInput = `  ${this.otherValue}█`;
             // Word-wrap the input text instead of truncating
             const maxInputWidth = width - 6; // borders + padding
-            if (fullInput.length <= maxInputWidth) {
-                lines.push('│ ' + pad(fullInput) + ' │');
-            }
-            else {
-                // Wrap at maxInputWidth boundaries
-                for (let pos = 0; pos < fullInput.length; pos += maxInputWidth) {
-                    const chunk = fullInput.slice(pos, pos + maxInputWidth);
-                    lines.push('│ ' + pad(chunk) + ' │');
-                }
+            for (let pos = 0; pos < fullInput.length; pos += maxInputWidth) {
+                lines.push(framed([{ text: fullInput.slice(pos, pos + maxInputWidth), style: STYLE.label }]));
             }
-            lines.push('│' + ' '.repeat(width - 2) + '│');
-            lines.push('├' + '─'.repeat(width - 2) + '┤');
-            lines.push('│ ' + pad('Enter: confirm • Esc: back') + ' │');
-            lines.push('╰' + '─'.repeat(width - 2) + '╯');
-            return lines.join('\n');
+            lines.push(blank());
+            lines.push(framed([{ text: 'Enter: confirm • Esc: back', style: STYLE.hints }]));
+            lines.push(bottomBorder(width));
+            return surfaceOf(lines);
         }
-        // Options
+        // One entry per option row (and header). Only the highlighted entry
+        // carries its description and details, as rows of their own.
+        const indent = SelectWidget.labelColumn(type);
+        const entries = [];
+        const describe = (description) => wrapText(description, Math.max(1, interior - displayWidth(indent)))
+            .map(line => [{ text: indent }, { text: line, style: STYLE.description }]);
         for (let i = 0; i < options.length; i++) {
             const opt = options[i];
-            const isNonSelectable = opt.value.startsWith('_');
             const isSelected = i === this.selectedIndex;
-            if (isNonSelectable) {
+            if (opt.value.startsWith('_')) {
                 // Separator / header row — render as plain text, no pointer or radio
-                lines.push('│ ' + pad(opt.label) + ' │');
+                entries.push({ label: [{ text: opt.label, style: STYLE.note }], description: [], details: [] });
                 continue;
             }
-            const pointer = isSelected ? '❯ ' : '  ';
-            if (type === 'select') {
-                const radio = isSelected ? '●' : '○';
-                const labelLine = `${pointer}${radio} ${opt.label}`;
-                lines.push('│ ' + pad(labelLine) + ' │');
-            }
-            else {
-                const checked = this.checked.has(i);
-                const checkbox = checked ? '[✓]' : '[ ]';
-                const labelLine = `${pointer}${checkbox} ${opt.label}`;
-                lines.push('│ ' + pad(labelLine) + ' │');
-            }
-            // Description (if selected and has description) - word-wrap instead of truncate
-            if (isSelected && opt.description) {
-                const indent = SelectWidget.labelColumn(type);
-                const maxDescWidth = width - 3 - displayWidth(indent); // borders + padding
-                const words = opt.description.split(' ');
-                let line = indent;
-                for (const word of words) {
-                    if ((line + word).length > maxDescWidth && line.trim().length > 0) {
-                        lines.push('│ ' + pad(line) + ' │');
-                        line = indent + word + ' ';
-                    }
-                    else {
-                        line += word + ' ';
-                    }
-                }
-                if (line.trim().length > 0) {
-                    lines.push('│ ' + pad(line) + ' │');
-                }
-            }
+            const chosen = type === 'select' ? isSelected : this.checked.has(i);
+            const marker = type === 'select' ? (isSelected ? '●' : '○') : (chosen ? '[✓]' : '[ ]');
+            const description = isSelected && opt.description ? describe(opt.description) : [];
+            // Details follow the description after a square. Wrap by display cells
+            // with a hanging indent so a long line never clips or breaks the frame.
+            const textWidth = Math.max(1, interior - displayWidth(indent) - displayWidth(DETAIL_MARK));
+            const details = isSelected && opt.details
+                ? opt.details.map(detail => wrapText(detail, textWidth).map((line, index) => index === 0
+                    ? [{ text: indent }, { text: DETAIL_MARK, style: STYLE.square }, { text: line, style: STYLE.detail }]
+                    : [{ text: indent + ' '.repeat(displayWidth(DETAIL_MARK)) }, { text: line, style: STYLE.detail }]))
+                : [];
+            entries.push({ label: optionRow(isSelected, marker, chosen, opt.label), description, details });
         }
         // "Other" option if allowed
         if (allowOther) {
             const isSelected = this.selectedIndex === options.length;
-            const pointer = isSelected ? '❯ ' : '  ';
-            const radio = isSelected ? '●' : '○';
-            const labelLine = `${pointer}${radio} Other...`;
-            lines.push('│ ' + pad(labelLine) + ' │');
-            if (isSelected) {
-                lines.push('│ ' + pad(SelectWidget.labelColumn(type) + 'Enter a custom value') + ' │');
-            }
+            entries.push({
+                label: optionRow(isSelected, isSelected ? '●' : '○', isSelected, 'Other...'),
+                description: isSelected ? describe('Enter a custom value') : [],
+                details: [],
+            });
         }
-        // Bottom separator and instructions
-        lines.push('│' + ' '.repeat(width - 2) + '│');
-        lines.push('├' + '─'.repeat(width - 2) + '┤');
         const secondaryHints = (type === 'select' && this.active.secondaryActions)
             ? this.active.secondaryActions.map(a => `${a.key.toUpperCase()} ${a.label}`).join(' • ')
             : '';
-        const inst = type === 'select'
-            ? `↑↓ navigate • Enter select${secondaryHints ? ' • ' + secondaryHints : ''} • Esc cancel`
-            : '↑↓ navigate • Space toggle • Enter confirm';
-        lines.push('│ ' + pad(inst) + ' │');
-        lines.push('╰' + '─'.repeat(width - 2) + '╯');
-        return lines.join('\n');
+        const inst = this.active.footer ?? (type === 'select'
+            ? `↑↓ navigate • Enter select${secondaryHints ? ' • ' + secondaryHints : ''}${this.active.required ? '' : ' • Esc cancel'}`
+            : '↑↓ navigate • Space toggle • Enter confirm');
+        const hints = this.nudged
+            ? [{ text: REQUIRED_CHOICE_NUDGE, style: STYLE.title }, { text: ` · ${inst}`, style: STYLE.hints }]
+            : [{ text: inst, style: STYLE.hints }];
+        const footer = [framed(hints), bottomBorder(width)];
+        const budget = rows === undefined ? undefined : rows - lines.length - footer.length;
+        const note = (text) => [{ text: indent + text, style: STYLE.note }];
+        lines.push(...fitEntries(entries, Math.min(this.selectedIndex, entries.length - 1), budget, note).map(framed));
+        lines.push(...footer);
+        return surfaceOf(lines);
+    }
+}
+/** The site film's palette on the terminal theme. */
+const STYLE = {
+    border: { color: TERMINAL_THEME.border },
+    title: { color: TERMINAL_THEME.accent },
+    question: { color: TERMINAL_THEME.text },
+    pointer: { color: TERMINAL_THEME.accent },
+    chosen: { color: TERMINAL_THEME.accent },
+    marker: { color: TERMINAL_THEME.muted },
+    label: { color: TERMINAL_THEME.text },
+    other: { color: TERMINAL_THEME.muted },
+    description: { color: TERMINAL_THEME.muted },
+    square: { color: TERMINAL_THEME.info },
+    detail: { color: TERMINAL_THEME.text },
+    note: { color: TERMINAL_THEME.muted },
+    hints: { color: TERMINAL_THEME.muted },
+};
+/** Each detail of the highlighted option follows a small square, as the site film lists benefits. */
+const DETAIL_MARK = '▪ ';
+/** An option: the pointer and its radio (or checkbox) in the accent when highlighted or chosen, the others muted. */
+function optionRow(highlighted, marker, chosen, label) {
+    return [
+        { text: highlighted ? '❯ ' : '  ', style: STYLE.pointer },
+        { text: marker, style: chosen ? STYLE.chosen : STYLE.marker },
+        { text: ' ' },
+        { text: label, style: highlighted ? STYLE.label : STYLE.other },
+    ];
+}
+function surfaceOf(lines) {
+    return {
+        content: lines.map(lineText).join('\n'),
+        view: box(lines.map(line => box(line.segments.map(segment => text(segment.text, segment.style)), { flexDirection: 'row', height: 1, flexShrink: 0 })), { flexDirection: 'column', height: lines.length, flexShrink: 0 }),
+    };
+}
+/**
+ * The rows between the question and the key hints, within `budget` rows when
+ * one is given. Short on rows, the blank row that ends the highlighted entry's
+ * listing goes first, then its details (the leading ones stay, with a "+N
+ * more" line), then its description. Every label
+ * stays unless the labels alone do not fit; then the list scrolls around the
+ * highlighted entry and says how many rows it hides above and below.
+ */
+function fitEntries(entries, selected, budget, note) {
+    const current = entries[selected];
+    const render = (description, details, hidden, spaced = false) => entries.flatMap((entry, index) => {
+        if (index !== selected)
+            return [entry.label];
+        const listing = [...description, ...details.flat(), ...(hidden > 0 ? [note(`+${hidden} more`)] : [])];
+        // With room, the listing ends on a blank row when another option follows,
+        // so each option reads as its own item.
+        const end = spaced && listing.length > 0 && index < entries.length - 1 ? [[]] : [];
+        return [entry.label, ...listing, ...end];
+    });
+    const spaced = render(current?.description ?? [], current?.details ?? [], 0, true);
+    if (budget === undefined || spaced.length <= budget)
+        return spaced;
+    const full = render(current?.description ?? [], current?.details ?? [], 0);
+    if (full.length <= budget)
+        return full;
+    // Rows the highlighted entry has left for its description and details.
+    const room = budget - entries.length;
+    const description = current?.description ?? [];
+    if (current && room >= description.length) {
+        const details = current.details;
+        const detailRoom = room - description.length;
+        let kept = 0;
+        let used = 0;
+        for (const detail of details) {
+            // Keep a row for the "+N more" line while later details remain.
+            const reserve = kept + 1 < details.length ? 1 : 0;
+            if (used + detail.length + reserve > detailRoom)
+                break;
+            kept += 1;
+            used += detail.length;
+        }
+        const hidden = details.length - kept;
+        return render(description, details.slice(0, kept), used < detailRoom ? hidden : 0);
+    }
+    if (current && room >= 0) {
+        const kept = description.slice(0, room).map(row => [...row]);
+        const last = kept.at(-1);
+        if (last && last.length)
+            last[last.length - 1] = { ...last[last.length - 1], text: last[last.length - 1].text.trimEnd() + '…' };
+        return render(kept, [], 0);
+    }
+    // The labels alone do not fit: show a window around the highlighted entry,
+    // with its description while one label and both markers still fit.
+    const total = entries.length;
+    const kept = description.slice(0, Math.max(0, budget - 3));
+    const labelRows = budget - kept.length;
+    const windowAt = (size) => Math.max(0, Math.min(selected - Math.floor((size - 1) / 2), total - size));
+    let visible = Math.max(1, Math.min(total, labelRows));
+    while (visible > 1) {
+        const start = windowAt(visible);
+        if (visible + (start > 0 ? 1 : 0) + (start + visible < total ? 1 : 0) <= labelRows)
+            break;
+        visible -= 1;
     }
+    const start = windowAt(visible);
+    return [
+        ...(start > 0 ? [note(`↑ ${start} more`)] : []),
+        ...entries.slice(start, start + visible).flatMap((entry, index) => (start + index === selected ? [entry.label, ...kept] : [entry.label])),
+        ...(start + visible < total ? [note(`↓ ${total - start - visible} more`)] : []),
+    ];
 }

package/dist/ui/widgets/settings_panel.d.ts

@@ -11,9 +11,17 @@ export interface SettingsPanelData {
     categories: SettingCategory[];
     layout?: 'page';
     notice?: string;
+    /** An error unless the notice reports a success. */
+    noticeTone?: 'error' | 'success';
     initialSetting?: string;
     initialCategory?: string;
     initialFilter?: string;
+    /** Up to two lines under the title, read on every paint, such as the price the rows' choices lead to. */
+    summary?: () => string;
+    /** Hands the owner a function that repaints the panel, for a summary or rows that change without a key press. */
+    connectRepaint?: (repaint: () => void) => void;
+    /** Typed text closes the panel and is left to the composer, as for a picker that opens on its own. */
+    typingCloses?: boolean;
     onSettingChange: (setting: string, value: string) => void | Promise<void>;
     /**
      * Notifies the owner when a keybinding row starts/stops capturing keys, so
@@ -88,7 +96,11 @@ export declare class SettingsPanelWidget {
      * from a pane that is no longer under the pointer.
      */
     private frameInset;
+    /** First table row painted, kept so the highlight moves through a long table instead of the table jumping. */
+    private tableScroll;
     constructor(host: WidgetHost);
+    /** The open select when it draws as a table. */
+    private openTable;
     private isPage;
     show(data: SettingsPanelData): void;
     cancel(): void;
@@ -136,7 +148,9 @@ export declare class SettingsPanelWidget {
     private stopCapture;
     private notifyCaptureState;
     private commitSettingValue;
-    handleInput(input: string, key: KeyEvent): void;
+    /** False only when the key is left to the composer: text typed on a page that typing closes. */
+    handleInput(input: string, key: KeyEvent): boolean;
+    private handlePanelInput;
     /**
      * A value that always reads the same for a given setting, so a row can show
      * it without consulting live state.
@@ -176,6 +190,12 @@ export declare class SettingsPanelWidget {
     /** One content column: a body row indented to where labels start. */
     private indented;
     private buildSettingRows;
+    /**
+     * The open table's body: its caption and heading, as many rows as fit
+     * around the highlighted option, a divider before each group, then its
+     * notes. Every row is a run of styled segments `width` cells wide.
+     */
+    private buildTableLines;
     private visibleSettingWindow;
     private categoryWindow;
     private footerHint;