pi-ask-popup 0.1.0

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

@@ -0,0 +1,208 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { ROW_INTENT_META } from "../../state/row-intent.js";
+import type { QuestionData } from "../../tool/types.js";
+import type { StatefulView } from "../stateful-view.js";
+import { renderInlineInputRow } from "./inline-input.js";
+
+const ACTIVE_POINTER = "❯ ";
+const INACTIVE_POINTER = "  ";
+const CHECKED = "[✔]";
+const UNCHECKED = "[ ]";
+const NUMBER_SEPARATOR = ". ";
+const BOX_LABEL_GAP = " ";
+// CC parity: description continuation indents to col 2 (past the pointer slot), NOT to the
+// full prefix column. Wrap width still uses prefixVisibleWidth so naturalHeight matches render.
+const CONTINUATION_INDENT = "  ";
+
+export const MULTI_SUBMIT_LABEL = "Submit";
+
+export interface MultiSelectOtherRowProps {
+  /** The "Type something." row is the focused row (optionIndex === options.length). */
+  active: boolean;
+  /** `state.inputMode` — true once the row has focus and keystrokes append to the buffer. */
+  inputMode: boolean;
+  /** Live inline-input buffer (read from `runtime.inputBuffer` / `ctx.inputBuffer`). */
+  inputBuffer: string;
+  inputCursorOffset: number | undefined;
+}
+
+export interface MultiSelectViewProps {
+  rows: ReadonlyArray<{ checked: boolean; active: boolean }>;
+  other: MultiSelectOtherRowProps;
+  nextActive: boolean;
+  nextLabel: string;
+}
+
+/**
+ * Renders the multi-select option list (one row per option — pointer + checkbox + label —
+ * plus zero or more wrapped continuation lines per description).
+ *
+ * `naturalHeight(width)` is the rendered height for the current props. It grows when
+ * the custom-answer editor contains logical or visually wrapped lines, allowing the
+ * dialog to reserve exactly the space the active draft needs.
+ *
+ * One width-keyed layout supplies rendering, height, and focused-row measurement;
+ * `setProps` and `invalidate` discard that derived cache.
+ */
+interface MultiSelectLayout {
+  lines: string[];
+  focusedRange: [number, number];
+}
+
+/** Mutable row accumulator threaded through the append helpers during a layout miss. */
+interface MultiSelectBuild {
+  lines: string[];
+  focusedRange: [number, number];
+}
+
+export class MultiSelectView implements StatefulView<MultiSelectViewProps> {
+  private props: MultiSelectViewProps;
+  private cachedLayout: { width: number; value: MultiSelectLayout } | undefined;
+
+  constructor(
+    private readonly theme: Theme,
+    private readonly question: QuestionData,
+  ) {
+    this.props = {
+      rows: [],
+      other: { active: false, inputMode: false, inputBuffer: "", inputCursorOffset: undefined },
+      nextActive: false,
+      nextLabel: ROW_INTENT_META.next.label,
+    };
+  }
+
+  setProps(props: MultiSelectViewProps): void {
+    this.props = props;
+    this.cachedLayout = undefined;
+  }
+
+  handleInput(_data: string): void {}
+
+  invalidate(): void {
+    this.cachedLayout = undefined;
+  }
+
+  render(width: number): string[] {
+    return this.layout(width).lines;
+  }
+
+  focusedItemRowRange(width: number): [number, number] {
+    return this.layout(width).focusedRange;
+  }
+
+  naturalHeight(width: number): number {
+    return this.layout(width).lines.length;
+  }
+
+  private layout(width: number): MultiSelectLayout {
+    if (this.cachedLayout?.width === width) return this.cachedLayout.value;
+
+    const build: MultiSelectBuild = { lines: [], focusedRange: [0, 0] };
+    const contentWidth = Math.max(1, width - this.prefixVisibleWidth());
+    const numberWidth = String(Math.max(1, this.question.options.length + 1)).length;
+
+    this.appendOptionRows(build, width, contentWidth, numberWidth);
+
+    const otherStart = build.lines.length;
+    build.lines.push(...this.renderOtherRow(contentWidth, numberWidth));
+    if (this.props.other.active) build.focusedRange = [otherStart, build.lines.length];
+
+    this.appendNextRow(build, width);
+
+    const value = { lines: build.lines, focusedRange: build.focusedRange };
+    this.cachedLayout = { width, value };
+    return value;
+  }
+
+  private appendOptionRows(
+    build: MultiSelectBuild,
+    width: number,
+    contentWidth: number,
+    numberWidth: number,
+  ): void {
+    for (let i = 0; i < this.question.options.length; i++) {
+      const opt = this.question.options[i];
+      const row = this.props.rows[i];
+      if (!opt || !row) continue;
+      const start = build.lines.length;
+      const pointer = row.active ? this.theme.fg("accent", ACTIVE_POINTER) : INACTIVE_POINTER;
+      // Checked and active rows share the accent hue, matching the dialog's selection rhythm.
+      const box = row.checked
+        ? this.theme.fg("accent", CHECKED)
+        : this.theme.fg("muted", UNCHECKED);
+      const label = truncateToWidth(opt.label, contentWidth, "…");
+      const styledLabel = row.active ? this.theme.fg("accent", this.theme.bold(label)) : label;
+      const number = String(i + 1).padStart(numberWidth, " ");
+      build.lines.push(
+        truncateToWidth(
+          `${pointer}${number}${NUMBER_SEPARATOR}${box}${BOX_LABEL_GAP}${styledLabel}`,
+          width,
+          "",
+        ),
+      );
+      if (opt.description) {
+        for (const segment of wrapTextWithAnsi(opt.description, contentWidth)) {
+          build.lines.push(CONTINUATION_INDENT + this.theme.fg("muted", segment));
+        }
+      }
+      if (row.active) build.focusedRange = [start, build.lines.length];
+    }
+  }
+
+  private appendNextRow(build: MultiSelectBuild, width: number): void {
+    const nextStart = build.lines.length;
+    const nextPointer = this.props.nextActive
+      ? this.theme.fg("accent", ACTIVE_POINTER)
+      : INACTIVE_POINTER;
+    const nextLabel = this.props.nextActive
+      ? this.theme.fg("accent", this.theme.bold(this.props.nextLabel))
+      : this.props.nextLabel;
+    build.lines.push(truncateToWidth(`${nextPointer}${nextLabel}`, width, ""));
+    if (this.props.nextActive) build.focusedRange = [nextStart, build.lines.length];
+  }
+
+  private renderOtherRow(contentWidth: number, numberWidth: number): string[] {
+    const other = this.props.other;
+    const pointer = other.active ? this.theme.fg("accent", ACTIVE_POINTER) : INACTIVE_POINTER;
+    const box = this.theme.fg("muted", UNCHECKED);
+    const number = String(this.question.options.length + 1).padStart(numberWidth, " ");
+    const rowPrefix = `${pointer}${number}${NUMBER_SEPARATOR}${box}${BOX_LABEL_GAP}`;
+    const continuationPrefix = " ".repeat(visibleWidth(rowPrefix));
+    const selectedText = (text: string) => this.theme.fg("accent", this.theme.bold(text));
+
+    if (other.active && other.inputMode) {
+      return renderInlineInputRow({
+        buffer: other.inputBuffer,
+        cursorOffset: other.inputCursorOffset,
+        rowPrefix,
+        continuationPrefix,
+        contentWidth,
+        selectedText,
+      });
+    }
+
+    return wrapTextWithAnsi(other.inputBuffer || ROW_INTENT_META.other.label, contentWidth).map(
+      (segment, index) => {
+        const line = `${index === 0 ? rowPrefix : continuationPrefix}${segment}`;
+        return other.active ? selectedText(line) : line;
+      },
+    );
+  }
+
+  private prefixVisibleWidth(): number {
+    // Canonical prefix for OPTION rows: INACTIVE_POINTER + numberWidth digits + NUMBER_SEPARATOR
+    // + UNCHECKED + BOX_LABEL_GAP. State-independent because ACTIVE/INACTIVE pointer share
+    // visibleWidth, CHECKED/UNCHECKED share visibleWidth, and numberWidth is constant per question.
+    // The number column fits `options.length + 1` so the "Type something." row's N+1 number
+    // is never clipped. The Next sentinel uses a bare `pointer + "Next"` shape — its width
+    // never exceeds this prefix at any reasonable terminal width, so it's safe to leave it
+    // out of the canonical computation.
+    const numberWidth = String(Math.max(1, this.question.options.length + 1)).length;
+    return (
+      visibleWidth(INACTIVE_POINTER) +
+      numberWidth +
+      visibleWidth(`${NUMBER_SEPARATOR}${UNCHECKED}${BOX_LABEL_GAP}`)
+    );
+  }
+}

package/src/view/components/option-list-view.ts

@@ -0,0 +1,77 @@
+import type { StatefulView } from "../stateful-view.js";
+import {
+  WrappingSelect,
+  type WrappingSelectItem,
+  type WrappingSelectTheme,
+} from "./wrapping-select.js";
+
+/**
+ * Maximum number of option rows visible in the WrappingSelect window. Lifted here from
+ * `preview-pane.ts` so the cap travels with the option-list owner.
+ */
+export const MAX_VISIBLE_OPTIONS = 10;
+
+export interface OptionListViewConfig {
+  items: readonly WrappingSelectItem[];
+  theme: WrappingSelectTheme;
+}
+
+/**
+ * Per-tick projection of OptionListView state. After Phase 11b, `inputBuffer`
+ * is part of the props bag — the session-owned `inlineInput` (a headless
+ * `pi-tui` Editor instance) supplies its current `getText()` here per tick.
+ * `OptionListView` is purely props-driven; the imperative buffer surface and
+ * read-back getters are gone.
+ */
+export interface OptionListViewProps {
+  selectedIndex: number;
+  focused: boolean;
+  inputBuffer: string;
+  inputCursorOffset?: number;
+  /** Optional previously-confirmed indicator. Omit when no marker should be drawn. */
+  confirmed?: { index: number; labelOverride?: string };
+}
+
+/**
+ * Sole owner of the option list's interactive state. Wraps a single
+ * `WrappingSelect`. Implements `StatefulView<OptionListViewProps>`:
+ * `setProps` is the only mutator; render output reflects the last props
+ * received.
+ */
+export class OptionListView implements StatefulView<OptionListViewProps> {
+  private readonly select: WrappingSelect;
+
+  constructor(config: OptionListViewConfig) {
+    this.select = new WrappingSelect(
+      config.items,
+      Math.min(config.items.length, MAX_VISIBLE_OPTIONS),
+      config.theme,
+      {
+        numberStartOffset: 0,
+        totalItemsForNumbering: config.items.length,
+      },
+    );
+  }
+
+  setProps(props: OptionListViewProps): void {
+    this.select.setSelectedIndex(props.selectedIndex);
+    this.select.setFocused(props.focused);
+    this.select.setConfirmedIndex(props.confirmed?.index, props.confirmed?.labelOverride);
+    this.select.setInputBuffer(props.inputBuffer);
+    this.select.setInputCursorOffset(props.inputCursorOffset);
+  }
+
+  handleInput(_data: string): void {}
+
+  invalidate(): void {
+    this.select.invalidate();
+  }
+
+  render(width: number): string[] {
+    return this.select.render(width);
+  }
+
+  focusedItemRowRange(width: number): [number, number] {
+    return this.select.focusedItemRowRange(width);
+  }
+}

package/src/view/components/preview/markdown-content-cache.ts

@@ -0,0 +1,76 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Markdown, type MarkdownTheme, visibleWidth } from "@earendil-works/pi-tui";
+import type { QuestionData } from "../../../tool/types.js";
+import { stripFenceMarkers } from "./preview-box-renderer.js";
+
+/** CC parity in side-by-side layout. */
+export const MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE = 20;
+/** Preserves narrow-terminal protection in stacked layout. */
+export const MAX_PREVIEW_HEIGHT_STACKED = 15;
+export const NO_PREVIEW_TEXT = "No preview available";
+/** 1 blank separator + 1 affordance text row reserved when `hasAnyPreview` (height stability of the affordance row's offset relative to the box). */
+export const NOTES_AFFORDANCE_OVERHEAD = 2;
+
+/**
+ * Per-question cache for rendered markdown previews. Width-keyed: switching the
+ * inner width invalidates every cached `Markdown`'s render output (pi-tui's
+ * `Markdown.render(width)` re-wraps when width changes).
+ *
+ * Replaces the inline `previewTexts`, `markdownCache`, `cachedWidth` triple from
+ * the previous monolithic `preview-pane.ts`. One Markdown per option, lazy on
+ * first request, never re-constructed — count semantics frozen by tests.
+ */
+export class MarkdownContentCache {
+  private readonly previewTexts: Map<number, string>;
+  private readonly markdownCache: Map<number, Markdown>;
+  private cachedWidth: number | undefined;
+  private readonly theme: Theme;
+  private readonly markdownTheme: MarkdownTheme;
+
+  constructor(question: QuestionData, theme: Theme, markdownTheme: MarkdownTheme) {
+    this.theme = theme;
+    this.markdownTheme = markdownTheme;
+    this.previewTexts = new Map();
+    for (let i = 0; i < question.options.length; i++) {
+      const raw = question.options[i]?.preview;
+      if (raw && raw.length > 0) this.previewTexts.set(i, raw);
+    }
+    this.markdownCache = new Map();
+  }
+
+  hasAnyPreview(): boolean {
+    return this.previewTexts.size > 0;
+  }
+
+  has(optionIndex: number): boolean {
+    return this.previewTexts.has(optionIndex);
+  }
+
+  /**
+   * Compute the body lines for a given option at a given inner width. Width changes
+   * invalidate the per-Markdown render cache.
+   */
+  bodyFor(optionIndex: number, innerWidth: number): string[] {
+    if (this.cachedWidth !== innerWidth) {
+      for (const md of this.markdownCache.values()) md.invalidate();
+      this.cachedWidth = innerWidth;
+    }
+    const text = this.previewTexts.get(optionIndex);
+    if (!text) {
+      const placeholder = this.theme.fg("dim", NO_PREVIEW_TEXT);
+      const pad = Math.max(0, innerWidth - visibleWidth(placeholder));
+      return [placeholder + " ".repeat(pad)];
+    }
+    let md = this.markdownCache.get(optionIndex);
+    if (!md) {
+      md = new Markdown(text, 0, 0, this.markdownTheme);
+      this.markdownCache.set(optionIndex, md);
+    }
+    return stripFenceMarkers(md.render(innerWidth));
+  }
+
+  invalidate(): void {
+    for (const md of this.markdownCache.values()) md.invalidate();
+    this.cachedWidth = undefined;
+  }
+}

package/src/view/components/preview/preview-block-renderer.ts

@@ -0,0 +1,116 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { MarkdownTheme } from "@earendil-works/pi-tui";
+import type { QuestionData } from "../../../tool/types.js";
+import {
+  MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE,
+  MAX_PREVIEW_HEIGHT_STACKED,
+  MarkdownContentCache,
+  NOTES_AFFORDANCE_OVERHEAD,
+} from "./markdown-content-cache.js";
+import {
+  BORDER_HORIZONTAL_OVERHEAD,
+  BORDER_INNER_PADDING_HORIZONTAL,
+  BORDER_VERTICAL_OVERHEAD,
+  computeBoxDimensions,
+  renderBorderedBox,
+} from "./preview-box-renderer.js";
+import type { PreviewLayoutMode } from "./preview-layout-decider.js";
+
+/**
+ * Affordance text shown below the bordered preview when focused on a preview-bearing option.
+ * Re-exported by `preview-pane.ts` for the existing test surface.
+ */
+export const NOTES_AFFORDANCE_TEXT = "Notes: press n to add notes";
+
+/** Content row budget for a layout mode: preview cap minus border + affordance overhead. */
+function contentBudgetFor(mode: PreviewLayoutMode): number {
+  const cap =
+    mode === "side-by-side" ? MAX_PREVIEW_HEIGHT_SIDE_BY_SIDE : MAX_PREVIEW_HEIGHT_STACKED;
+  return Math.max(1, cap - BORDER_VERTICAL_OVERHEAD - NOTES_AFFORDANCE_OVERHEAD);
+}
+
+/** Inner (padding-aware) content width for a total block width. */
+function innerWidthFor(width: number): number {
+  return Math.max(1, width - BORDER_HORIZONTAL_OVERHEAD - 2 * BORDER_INNER_PADDING_HORIZONTAL);
+}
+
+export interface PreviewBlockRendererConfig {
+  question: QuestionData;
+  theme: Theme;
+  markdownTheme: MarkdownTheme;
+}
+
+/**
+ * Renders the bordered markdown preview block for a single question (one block per render call,
+ * for the option at `optionIndex`). Owns a per-question `MarkdownContentCache`.
+ *
+ * NOT a `Component` — pure render-and-measure helper consumed by `PreviewPane`. The layout mode
+ * is threaded as an explicit param (never re-derived from column width post-split).
+ *
+ * The affordance row is always emitted (visually empty when gated) so the preview block's row
+ * count is height-stable across affordance-state transitions.
+ */
+export class PreviewBlockRenderer {
+  private readonly theme: Theme;
+  private readonly cache: MarkdownContentCache;
+
+  constructor(config: PreviewBlockRendererConfig) {
+    this.theme = config.theme;
+    this.cache = new MarkdownContentCache(config.question, config.theme, config.markdownTheme);
+  }
+
+  hasAnyPreview(): boolean {
+    return this.cache.hasAnyPreview();
+  }
+
+  has(optionIndex: number): boolean {
+    return this.cache.has(optionIndex);
+  }
+
+  invalidate(): void {
+    this.cache.invalidate();
+  }
+
+  /**
+   * Height contribution of the preview block: `BORDER_VERTICAL_OVERHEAD + contentRows +
+   * NOTES_AFFORDANCE_OVERHEAD`. Always returns the same value as `renderBlock(...).length`
+   * — the affordance overhead is constant, not gated by `focused`/`notesVisible`.
+   */
+  blockHeight(width: number, optionIndex: number, mode: PreviewLayoutMode): number {
+    const contentBudget = contentBudgetFor(mode);
+    const innerWidth = innerWidthFor(width);
+    const rawRows = this.cache.bodyFor(optionIndex, innerWidth).length;
+    const contentRows = Math.min(rawRows, contentBudget);
+    return BORDER_VERTICAL_OVERHEAD + contentRows + NOTES_AFFORDANCE_OVERHEAD;
+  }
+
+  /**
+   * Render the full preview block at `width`: bordered box + blank separator + affordance row.
+   * `focused` and `notesVisible` together gate the affordance text (visible only when the
+   * focused option carries a preview AND notes mode is inactive). The affordance row is ALWAYS
+   * emitted (as an empty string when gated) so the row count is invariant.
+   */
+  renderBlock(
+    width: number,
+    optionIndex: number,
+    mode: PreviewLayoutMode,
+    focused: boolean,
+    notesVisible: boolean,
+  ): string[] {
+    const contentBudget = contentBudgetFor(mode);
+    const maxInnerWidth = innerWidthFor(width);
+
+    const raw = this.cache.bodyFor(optionIndex, maxInnerWidth);
+    const truncated = raw.length > contentBudget;
+    const hidden = truncated ? raw.length - contentBudget : 0;
+    const contentLines = truncated ? raw.slice(0, contentBudget) : raw;
+
+    const { boxWidth } = computeBoxDimensions(contentLines, maxInnerWidth);
+    const colorFn = (s: string) => this.theme.fg("accent", s);
+    const boxedLines = renderBorderedBox(contentLines, boxWidth, colorFn, hidden);
+
+    const showAffordance = focused && !notesVisible && this.cache.has(optionIndex);
+    const affordance = showAffordance ? this.theme.fg("muted", NOTES_AFFORDANCE_TEXT) : "";
+    return [...boxedLines, "", affordance];
+  }
+}

package/src/view/components/preview/preview-box-renderer.ts

@@ -0,0 +1,88 @@
+import { stripVTControlCharacters } from "node:util";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+const FENCE_MARKER_RE = /^`{3}/;
+
+/** Top + bottom border rows consumed by `renderBorderedBox`. */
+export const BORDER_VERTICAL_OVERHEAD = 2;
+/** Left + right vertical bar columns (`│ ... │`) consumed by `renderBorderedBox`. */
+export const BORDER_HORIZONTAL_OVERHEAD = 2;
+/** Inner horizontal padding (1 col) between each border bar and content area. */
+export const BORDER_INNER_PADDING_HORIZONTAL = 1;
+/** Floor for the preview box's inner content width — CC parity (`PreviewBox.minWidth`). */
+export const BOX_MIN_CONTENT_WIDTH = 40;
+
+/**
+ * Drops fenced-code-block marker lines (` ``` ` opener/closer) from rendered markdown.
+ * pi-tui's Markdown emits literal opening ` ```lang ` and closing ` ``` ` lines around
+ * code blocks; this strip leaves only the highlighted code body. Inline code
+ * (`codespan`) is unaffected — pi-tui already renders it without backticks.
+ *
+ * Escapes are stripped with the Node builtin rather than the two hand-rolled
+ * regexes this replaced. Those matched SGR colour codes and OSC-8 hyperlinks
+ * only, so any other escape a highlighter emitted would sit in front of the
+ * backticks and hide a fence marker from the test below. The builtin covers the
+ * whole VT vocabulary, including both OSC-8 terminators (BEL and ST).
+ */
+export function stripFenceMarkers(lines: readonly string[]): string[] {
+  return lines.filter((line) => !FENCE_MARKER_RE.test(stripVTControlCharacters(line)));
+}
+
+/**
+ * Wraps `lines` in a 4-sided ASCII border with 1 col of inner horizontal padding.
+ * Layout per content row: `│` + ` ` + content padded to `contentInner` + ` ` + `│`,
+ * where `contentInner = width - BORDER_HORIZONTAL_OVERHEAD - 2 * BORDER_INNER_PADDING_HORIZONTAL`.
+ * Top/bottom dash runs span corner-to-corner (`width - BORDER_HORIZONTAL_OVERHEAD`). When
+ * `hidden > 0`, the bottom-row dash run is replaced with ` ✂ ── N lines hidden ── ` (corners stay).
+ */
+export function renderBorderedBox(
+  lines: readonly string[],
+  width: number,
+  colorFn: (s: string) => string,
+  hidden = 0,
+): string[] {
+  const dashSpan = Math.max(1, width - BORDER_HORIZONTAL_OVERHEAD);
+  const contentInner = Math.max(1, dashSpan - 2 * BORDER_INNER_PADDING_HORIZONTAL);
+  const pad = " ".repeat(BORDER_INNER_PADDING_HORIZONTAL);
+  const top = colorFn(`┌${"─".repeat(dashSpan)}┐`);
+  const out: string[] = [top];
+  for (const line of lines) {
+    const padded = truncateToWidth(line, contentInner, "", true);
+    out.push(`${colorFn("│")}${pad}${padded}${pad}${colorFn("│")}`);
+  }
+  if (hidden > 0) {
+    const indicator = ` ✂ ── ${hidden} lines hidden ── `;
+    const space = dashSpan - indicator.length;
+    const leftFill = "─".repeat(Math.max(0, Math.floor(space / 2)));
+    const rightFill = "─".repeat(Math.max(0, dashSpan - leftFill.length - indicator.length));
+    out.push(colorFn(`└${leftFill}${indicator}${rightFill}┘`));
+  } else {
+    out.push(colorFn(`└${"─".repeat(dashSpan)}┘`));
+  }
+  return out;
+}
+
+/**
+ * Compute box dimensions from content lines. Pure of args.
+ *
+ * CC parity:
+ *   contentWidth = max(minWidth, widestRenderedLine)
+ *   boxWidth     = min(contentWidth + 4, effectiveMaxWidth)
+ *
+ * Trailing whitespace is stripped before measuring because pi-tui's
+ * `Markdown.render(width)` pads every line to `width`, which would otherwise force
+ * the box to fill the whole column allocation.
+ */
+export function computeBoxDimensions(
+  contentLines: readonly string[],
+  maxInnerWidth: number,
+): { innerWidth: number; boxWidth: number } {
+  let widest = Math.min(BOX_MIN_CONTENT_WIDTH, maxInnerWidth);
+  for (const line of contentLines) {
+    const w = visibleWidth(line.replace(/\s+$/, ""));
+    if (w > widest) widest = w;
+  }
+  const innerWidth = Math.min(widest, maxInnerWidth);
+  const boxWidth = innerWidth + BORDER_HORIZONTAL_OVERHEAD + 2 * BORDER_INNER_PADDING_HORIZONTAL;
+  return { innerWidth, boxWidth };
+}