@alchemy.run/sigil 0.0.0-alpha.5 → 0.0.0-alpha.7

package/src/ink.tsx

@@ -33,7 +33,6 @@ import { createInlinePresenter } from "#/terminal/inline-presenter.ts";
 import { createRenderScheduler } from "#/terminal/render-scheduler.ts";
 import { TerminalSession } from "#/terminal/session.ts";
 import { type Throttled } from "#/throttle.ts";
-import { getWindowSize } from "#/utils.ts";
 import { Yoga } from "#/yoga/index.ts";
 
 const noop = () => {};
@@ -64,6 +63,11 @@ function bottomRows(screen: Screen, height: number): Screen {
   return cropped;
 }
 
+// How long the reported terminal size must hold still before a resize is
+// acted on. Window drags deliver an event per frame (~16 ms), and the
+// emulator needs a frame or so to agree with the PTY size either way.
+const RESIZE_SETTLE_MS = 50;
+
 const shouldClearTerminalForFrame = ({
   isTTY,
   viewportRows,
@@ -381,8 +385,20 @@ export const createInk = (options: Options): Ink => {
   let lastOutputToRender = "";
   let lastOutputHeight = 0;
   let lastScreen: Screen | undefined;
-  let lastTerminalWidth = getWindowSize(options.stdout).columns;
-  let lastTerminalHeight = getWindowSize(options.stdout).rows;
+  // The terminal size comes from the capabilities store: the stream's
+  // `columns`/`rows`, or — on terminals that send in-band size reports —
+  // the emulator's own figure, which is the one later output will meet.
+  const windowSize = () => capabilitiesStore.current.size;
+  let lastTerminalWidth = windowSize().columns;
+  let lastTerminalHeight = windowSize().rows;
+  // Resize events arrive in bursts (one per frame of a window drag), and the
+  // emulator's rewrap and the PTY size never update atomically — depending on
+  // the terminal app the PTY is resized before or after the screen is
+  // rewrapped. Anything written mid-burst lands on a screen whose width is
+  // not the reported one, and the rows that leaves behind can never be
+  // accounted for by a later erase. Events therefore only arm this settle
+  // timer; the frame is erased and repainted once the size has held still.
+  let resizeSettle: ReturnType<typeof setTimeout> | undefined;
 
   // This variable is used only in debug mode to store full static output
   // so that it's rerendered every time, not just new static parts, like in non-debug mode
@@ -431,11 +447,17 @@ export const createInk = (options: Options): Ink => {
   if (options.patchConsole) installConsolePatch();
 
   if (interactive) {
-    options.stdout.on("resize", resized);
-
-    unsubscribeResize = () => {
-      options.stdout.off("resize", resized);
-    };
+    // Follow the store rather than the stream's `resize` event: the store
+    // folds in the terminal's in-band size reports where available, and
+    // says which source a size came from.
+    let seenColumns = lastTerminalWidth;
+    let seenRows = lastTerminalHeight;
+    unsubscribeResize = capabilitiesStore.subscribe(({ size }) => {
+      if (size.columns === seenColumns && size.rows === seenRows) return;
+      seenColumns = size.columns;
+      seenRows = size.rows;
+      resized(size.source);
+    });
   }
 
   initKittyKeyboard();
@@ -450,9 +472,28 @@ export const createInk = (options: Options): Ink => {
 
   void exitPromise.catch(noop);
 
-  function resized(): void {
-    const currentWidth = getWindowSize(options.stdout).columns;
-    const currentHeight = getWindowSize(options.stdout).rows;
+  function resized(source: "pty" | "terminal"): void {
+    if (resizeSettle !== undefined) {
+      clearTimeout(resizeSettle);
+      resizeSettle = undefined;
+    }
+
+    // An in-band report is the emulator's own word, sent after it rewrapped
+    // and ordered with everything else in the stream, so there is nothing
+    // to wait for. A PTY size may run ahead of or behind the emulator.
+    if (source === "terminal") {
+      settleResize();
+      return;
+    }
+
+    resizeSettle = setTimeout(settleResize, RESIZE_SETTLE_MS);
+  }
+
+  function settleResize(): void {
+    resizeSettle = undefined;
+    if (isUnmounted || isUnmounting) return;
+
+    const { columns: currentWidth, rows: currentHeight } = windowSize();
 
     // A width decrease rewraps lines and any height change moves content
     // through scrollback, so the incremental render state no longer
@@ -460,11 +501,15 @@ export const createInk = (options: Options): Ink => {
     // render to be a full rewrite instead of an incremental diff that
     // would skip "unchanged" lines over stale screen content.
     if (currentWidth < lastTerminalWidth || currentHeight !== lastTerminalHeight) {
-      // Clearing erases the full previous frame line count from
-      // the cursor upward — after a height grow that also covers frame
-      // lines the emulator pulled back from scrollback, so no extra
-      // erase is needed for them.
-      clearLiveOutput();
+      // Clearing erases the full previous frame from the cursor upward —
+      // after a height grow that also covers frame lines the emulator
+      // pulled back from scrollback, so no extra erase is needed for them.
+      // The current width lets the presenter count the rows a reflowing
+      // emulator has already rewrapped after a width shrink; the logical
+      // line count alone under-erases and leaves the frame's top rows
+      // behind. Terminals that never rewrap keep the logical count, since
+      // the rewrap-aware one would erase rows above the frame there.
+      clearLiveOutput(rewrapsOnResize() ? currentWidth : undefined);
       resetLiveOutput();
       lastOutput = "";
       lastOutputToRender = "";
@@ -475,12 +520,20 @@ export const createInk = (options: Options): Ink => {
       lastOutputHeight = 0;
     }
 
+    lastTerminalWidth = currentWidth;
+    lastTerminalHeight = currentHeight;
+
     calculateLayout();
     dom.emitLayoutListeners(rootNode);
     onRender();
+  }
 
-    lastTerminalWidth = currentWidth;
-    lastTerminalHeight = currentHeight;
+  // Whether the terminal rewraps existing screen rows when its width
+  // changes. Nearly every modern emulator does (xterm.js, Ghostty, kitty,
+  // iTerm2, WezTerm, Alacritty, Windows Terminal, tmux); Apple's Terminal.app
+  // and the classic Windows console keep rows as they were written.
+  function rewrapsOnResize(): boolean {
+    return !isWindows && capabilitiesStore.current.terminal.name !== "apple-terminal";
   }
 
   function handleAppExit(errorOrResult?: unknown): void {
@@ -519,9 +572,9 @@ export const createInk = (options: Options): Ink => {
     }
   }
 
-  function clearLiveOutput(): void {
+  function clearLiveOutput(columns?: number): void {
     if (isScreenReaderEnabled) accessiblePresenter!.clear();
-    else terminal.clearFrame();
+    else terminal.clearFrame({ columns });
   }
 
   function finishLiveOutput(): void {
@@ -535,7 +588,7 @@ export const createInk = (options: Options): Ink => {
   }
 
   function calculateLayout(): void {
-    const terminalWidth = getWindowSize(options.stdout).columns;
+    const terminalWidth = windowSize().columns;
 
     rootNode.yogaNode!.setWidth(terminalWidth);
 
@@ -566,6 +619,18 @@ export const createInk = (options: Options): Ink => {
       return;
     }
 
+    // A resize burst is still settling: the emulator is rewrapping the screen
+    // under us, and the frame will be erased and repainted as a whole once it
+    // holds still. Writing now would leave rows no later erase can find.
+    if (resizeSettle !== undefined && !isUnmounting) {
+      if (nextRenderCommit) {
+        nextRenderCommit.resolve();
+        nextRenderCommit = undefined;
+      }
+
+      return;
+    }
+
     if (nextRenderCommit) {
       nextRenderCommit.resolve();
       nextRenderCommit = undefined;
@@ -642,7 +707,7 @@ export const createInk = (options: Options): Ink => {
         return;
       }
 
-      const terminalWidth = getWindowSize(options.stdout).columns;
+      const terminalWidth = windowSize().columns;
 
       const wrappedOutput = wrapAnsi(output, terminalWidth, {
         trim: false,
@@ -796,6 +861,11 @@ export const createInk = (options: Options): Ink => {
 
     isUnmounting = true;
 
+    if (resizeSettle !== undefined) {
+      clearTimeout(resizeSettle);
+      resizeSettle = undefined;
+    }
+
     unsubscribeBeforeExit?.();
     unsubscribeBeforeExit = undefined;
 
@@ -1163,7 +1233,7 @@ export const createInk = (options: Options): Ink => {
 
     // Detect fullscreen: output fills or exceeds terminal height.
     // Only apply when writing to a real TTY — piped output always gets trailing newlines.
-    const viewportRows = isTTY ? getWindowSize(options.stdout).rows : 24;
+    const viewportRows = isTTY ? windowSize().rows : 24;
 
     // Clamp the frame to the viewport, keeping its bottom rows. Rows above
     // the top margin cannot be updated or erased in place, and the

package/src/paint-tree.ts

@@ -117,10 +117,14 @@ export const paintTree = (
         const firstChildYoga = node.childNodes[0]?.yogaNode;
         const paddingX = firstChildYoga?.getComputedLeft() ?? 0;
         const paddingY = firstChildYoga?.getComputedTop() ?? 0;
+        const textWrap = node.style.textWrap ?? "wrap";
+        // `none` text may paint past the screen's nominal width; the screen
+        // grows the touched rows on demand. Clip rects still apply.
+        const overflow = textWrap === "none";
         const lines = wrapStructuredText(
           structuredTextLines(node),
           maxWidth,
-          node.style.textWrap ?? "wrap",
+          textWrap,
           structuredTextBaseStyle(node),
         );
         const paintBounds = {
@@ -147,10 +151,10 @@ export const paintTree = (
                 }),
               )
               .join("\n"),
-            { transformers: textTransformers },
+            { transformers: textTransformers, overflow },
           );
         } else {
-          output.writeCells(paintBounds.x, paintBounds.y, sampled);
+          output.writeCells(paintBounds.x, paintBounds.y, sampled, { overflow });
         }
       }
 

package/src/screen/canvas.ts

@@ -34,8 +34,14 @@ export class Canvas {
     this.#screen = new Screen(this.width, this.height);
   }
 
-  writeCells(x: number, y: number, lines: readonly (readonly Cell[])[]): void {
+  writeCells(
+    x: number,
+    y: number,
+    lines: readonly (readonly Cell[])[],
+    options?: { overflow?: boolean },
+  ): void {
     const clip = this.#clips.at(-1);
+    const overflow = options?.overflow === true;
     for (const [rowOffset, line] of lines.entries()) {
       const currentY = y + rowOffset;
       if (!this.#insideY(currentY, clip)) continue;
@@ -45,7 +51,7 @@ export class Canvas {
         const clipped =
           (clip?.x1 !== undefined && currentX < clip.x1) ||
           (clip?.x2 !== undefined && endX > clip.x2);
-        if (!clipped) this.#composeNativeCell(currentX, currentY, cell);
+        if (!clipped) this.#composeNativeCell(currentX, currentY, cell, overflow);
         currentX = endX;
       }
     }
@@ -55,11 +61,12 @@ export class Canvas {
     x: number,
     y: number,
     text: string,
-    options: { transformers: AnsiTransformer[] },
+    options: { transformers: AnsiTransformer[]; overflow?: boolean },
   ): void {
     if (!text) return;
     let lines = text.split("\n");
     const clip = this.#clips.at(-1);
+    const overflow = options.overflow === true;
     if (clip?.y1 !== undefined && y < clip.y1) {
       lines = lines.slice(clip.y1 - y);
       y = clip.y1;
@@ -78,7 +85,7 @@ export class Canvas {
       for (const character of transformAnsiLine(line, lineIndex, options.transformers)) {
         const width = Math.max(1, stringWidth(character.value));
         if (clip?.x2 !== undefined && currentX + width > clip.x2) break;
-        this.#writeCompatibilityCell(currentX, currentY, character, width);
+        this.#writeCompatibilityCell(currentX, currentY, character, width, overflow);
         currentX += width;
       }
     }
@@ -104,34 +111,50 @@ export class Canvas {
     );
   }
 
-  #composeNativeCell(x: number, y: number, cell: Cell): void {
-    if (x >= this.#screen.width) {
+  #composeNativeCell(x: number, y: number, cell: Cell, overflow = false): void {
+    if (!overflow && x >= this.#screen.width) {
       return;
     }
-    this.#screen.composeCell(x, y, {
-      content: { grapheme: cell.grapheme, width: cell.width },
-      foreground: cell.reset?.foreground ? null : (cell.style.foreground ?? null),
-      background: cell.reset?.background ? null : cell.style.background,
-      underlineColor: cell.style.underlineColor ?? null,
-      underline: cell.style.underline,
-      attributes: cell.style.attributes,
-      hyperlink: cell.hyperlink ?? null,
-    });
+    this.#screen.composeCell(
+      x,
+      y,
+      {
+        content: { grapheme: cell.grapheme, width: cell.width },
+        foreground: cell.reset?.foreground ? null : (cell.style.foreground ?? null),
+        background: cell.reset?.background ? null : cell.style.background,
+        underlineColor: cell.style.underlineColor ?? null,
+        underline: cell.style.underline,
+        attributes: cell.style.attributes,
+        hyperlink: cell.hyperlink ?? null,
+      },
+      { overflow },
+    );
   }
 
-  #writeCompatibilityCell(x: number, y: number, character: StyledChar, width: number): void {
-    if (x >= this.#screen.width) {
+  #writeCompatibilityCell(
+    x: number,
+    y: number,
+    character: StyledChar,
+    width: number,
+    overflow = false,
+  ): void {
+    if (!overflow && x >= this.#screen.width) {
       return;
     }
     const cell = cellFromStyledChar(character, width);
-    this.#screen.composeCell(x, y, {
-      content: { grapheme: cell.grapheme, width: cell.width },
-      foreground: cell.style.foreground ?? null,
-      background: cell.style.background,
-      underlineColor: cell.style.underlineColor ?? null,
-      underline: cell.style.underline,
-      attributes: cell.style.attributes,
-      hyperlink: cell.hyperlink ?? null,
-    });
+    this.#screen.composeCell(
+      x,
+      y,
+      {
+        content: { grapheme: cell.grapheme, width: cell.width },
+        foreground: cell.style.foreground ?? null,
+        background: cell.style.background,
+        underlineColor: cell.style.underlineColor ?? null,
+        underline: cell.style.underline,
+        attributes: cell.style.attributes,
+        hyperlink: cell.hyperlink ?? null,
+      },
+      { overflow },
+    );
   }
 }

package/src/screen/screen.ts

@@ -39,6 +39,14 @@ export class Screen {
     return this.#width;
   }
 
+  /**
+  The populated length of one row: the nominal width, or more when overflow
+  writes (`textWrap: "none"` content) extended it past the screen's width.
+  */
+  rowLength(y: number): number {
+    return Math.max(this.#width, this.#rows[y]?.length ?? 0);
+  }
+
   get height(): number {
     return this.#height;
   }
@@ -56,9 +64,10 @@ export class Screen {
     return this.#painted[y]?.[x] ?? false;
   }
 
-  setCell(x: number, y: number, cell: Cell): void {
+  setCell(x: number, y: number, cell: Cell, options?: { overflow?: boolean }): void {
     const row = this.#rows[y];
-    if (!row || x < 0 || x >= this.width) {
+    const overflow = options?.overflow === true;
+    if (!row || x < 0 || (!overflow && x >= this.width)) {
       return;
     }
 
@@ -67,18 +76,23 @@ export class Screen {
     }
 
     const finalColumn = x + cell.width;
-    const clipped = finalColumn > this.width;
-    const overwriteEnd = Math.min(finalColumn, this.width);
+    if (overflow && finalColumn > row.length) {
+      this.#growRow(row, y, finalColumn);
+    }
+
+    const capacity = overflow ? row.length : this.width;
+    const clipped = finalColumn > capacity;
+    const overwriteEnd = Math.min(finalColumn, capacity);
 
     for (let column = x; column < overwriteEnd; column++) {
       this.#clearGraphemeAt(row, y, column);
     }
 
     if (clipped) {
-      for (let column = x; column < this.width; column++) {
+      for (let column = x; column < capacity; column++) {
         row[column] = emptyCell;
       }
-      this.#markDirty(y, x, this.width);
+      this.#markDirty(y, x, capacity);
 
       return;
     }
@@ -102,13 +116,18 @@ export class Screen {
   Composes independent cell channels over the existing cell. An undefined
   patch is transparent; an explicit space in `content` paints a blank.
   */
-  composeCell(x: number, y: number, patch: CellPatch | undefined): void {
+  composeCell(
+    x: number,
+    y: number,
+    patch: CellPatch | undefined,
+    options?: { overflow?: boolean },
+  ): void {
     if (!patch) {
       return;
     }
 
     const row = this.#rows[y];
-    if (!row || x < 0 || x >= this.width) {
+    if (!row || x < 0 || (options?.overflow !== true && x >= this.width)) {
       return;
     }
 
@@ -130,7 +149,12 @@ export class Screen {
     const hyperlink =
       patch.hyperlink === undefined ? destination.hyperlink : (patch.hyperlink ?? undefined);
 
-    this.setCell(writeColumn, y, createCell(content.grapheme, content.width, style, hyperlink));
+    this.setCell(
+      writeColumn,
+      y,
+      createCell(content.grapheme, content.width, style, hyperlink),
+      options,
+    );
   }
 
   /** Composes a patch throughout a rectangle, clipped to this screen. */
@@ -191,7 +215,7 @@ export class Screen {
     for (const [y, row] of this.#rows.entries()) {
       row.fill(emptyCell);
       this.#painted[y]!.fill(true);
-      this.#markDirty(y, 0, this.width);
+      this.#markDirty(y, 0, this.rowLength(y));
     }
   }
 
@@ -209,6 +233,15 @@ export class Screen {
     return spans;
   }
 
+  /** Extends a row (and its paint mask) so overflow writes land past `width`. */
+  #growRow(row: Cell[], y: number, length: number): void {
+    const painted = this.#painted[y]!;
+    while (row.length < length) {
+      row.push(emptyCell);
+      painted.push(false);
+    }
+  }
+
   #clearGraphemeAt(row: Cell[], y: number, x: number): void {
     const existing = row[x];
     if (!existing || existing === emptyCell) {
@@ -224,7 +257,7 @@ export class Screen {
     const width = Math.max(1, leadingCell?.width ?? 1);
     for (
       let column = leadingColumn;
-      column < Math.min(leadingColumn + width, this.width);
+      column < Math.min(leadingColumn + width, row.length);
       column++
     ) {
       row[column] = emptyCell;
@@ -257,7 +290,7 @@ export class Screen {
     }
 
     const clippedStart = Math.max(0, start);
-    const clippedEnd = Math.min(this.width, end);
+    const clippedEnd = Math.min(this.rowLength(y), end);
     const current = this.#dirty[y];
     this.#dirty[y] = current
       ? { start: Math.min(current.start, clippedStart), end: Math.max(current.end, clippedEnd) }

package/src/structured-text.ts

@@ -81,6 +81,10 @@ export function wrapStructuredText(
   wrap: Styles["textWrap"],
   baseStyle?: CellStyle,
 ): readonly (readonly Cell[])[] {
+  if (wrap === "none") {
+    return input.map((line) => [...line]);
+  }
+
   if (maxWidth < 1) {
     return [[]];
   }

package/src/styles.ts

@@ -5,6 +5,11 @@ import { Yoga, type Node as YogaNode, type PositionType } from "#/yoga/index.ts"
 export type Styles = {
   /*
 	We keep this as a single enum so overflow is one complete choice and invalid combinations like wrap + truncate-middle are unrepresentable. In hindsight, `normal` would have been a clearer default value than `wrap`, since it describes the standard behavior instead of repeating the prop name.
+
+	`none` neither wraps nor truncates: the text overflows the container (and
+	the screen's nominal width). Meant for scrollback content (`<Static>`),
+	not live regions, where a physically soft-wrapped line breaks the
+	presenter's line accounting.
 	*/
   readonly textWrap?:
     | "wrap"
@@ -12,7 +17,8 @@ export type Styles = {
     | "truncate-end"
     | "truncate"
     | "truncate-middle"
-    | "truncate-start";
+    | "truncate-start"
+    | "none";
 
   /**
 	Controls how the element is positioned.

package/src/terminal/screen-presenter.ts

@@ -7,9 +7,9 @@ import {
   cursorPositionChanged,
   type CursorPosition,
 } from "#/cursor-position.ts";
-import { cellsEqual } from "#/screen/cell.ts";
+import { cellAttributes, cellsEqual, type Cell } from "#/screen/cell.ts";
 import type { ColorProfile } from "#/screen/color-profile.ts";
-import type { Screen } from "#/screen/screen.ts";
+import type { Line, Screen } from "#/screen/screen.ts";
 import { serializeLine, serializeScreen } from "#/screen/serialize.ts";
 
 type Write = (data: string) => boolean;
@@ -123,10 +123,20 @@ export class ScreenPresenter {
     );
   }
 
-  clear(): void {
+  /**
+  Erases the presented frame from the cursor upward.
+
+  `columns` is the terminal's current width. When it is narrower than the width
+  the frame was painted at, a reflowing emulator (xterm.js, Ghostty, kitty,
+  iTerm2, WezTerm, tmux, …) has already rewrapped every wider row onto several
+  physical rows before the resize event reaches us, so the erase has to cover
+  that physical footprint. Erasing only the logical row count leaves the frame's
+  top rows behind as ghosts, one more batch per resize event.
+  */
+  clear(options: { readonly columns?: number } = {}): void {
     this.#write(
       buildReturnToBottomPrefix(this.#cursorWasShown, this.#lineCount, this.#cursor) +
-        ansiEscapes.eraseLines(this.#lineCount),
+        ansiEscapes.eraseLines(this.#physicalLineCount(options.columns)),
     );
     this.#lineCount = 0;
     this.#cursor = undefined;
@@ -134,6 +144,22 @@ export class ScreenPresenter {
     this.#fullscreen = false;
   }
 
+  #physicalLineCount(columns: number | undefined): number {
+    if (
+      this.#screen === undefined ||
+      this.#lineCount === 0 ||
+      columns === undefined ||
+      columns < 1
+    ) {
+      return this.#lineCount;
+    }
+    let rows = 0;
+    for (const line of this.#screen.toRows()) {
+      rows += Math.max(1, Math.ceil(contentWidth(line) / columns));
+    }
+    return rows + (this.#fullscreen ? 0 : 1);
+  }
+
   reset(): void {
     this.#screen = undefined;
     this.#lineCount = 0;
@@ -162,6 +188,34 @@ export class ScreenPresenter {
   }
 }
 
+/**
+The columns a row occupies once written: everything up to its last visible
+cell. Trailing unstyled blanks are trimmed by the serializer and never reach
+the terminal, while styled blanks (a highlighted tab's padding) do.
+*/
+function contentWidth(line: Line): number {
+  let width = 0;
+  let end = 0;
+  for (const cell of line) {
+    width += cell.width;
+    if (!isBlank(cell)) end = width;
+  }
+  return end;
+}
+
+function isBlank(cell: Cell): boolean {
+  const { style } = cell;
+  return (
+    (cell.grapheme === " " || cell.width === 0) &&
+    style.foreground === undefined &&
+    style.background === undefined &&
+    style.underlineColor === undefined &&
+    style.underline === "none" &&
+    style.attributes === cellAttributes.none &&
+    cell.hyperlink === undefined
+  );
+}
+
 function findFirstChangedRow(previous: Screen, next: Screen): number | undefined {
   const height = Math.max(previous.height, next.height);
   for (let y = 0; y < height; y++) {
@@ -171,7 +225,9 @@ function findFirstChangedRow(previous: Screen, next: Screen): number | undefined
 }
 
 function rowsEqual(left: Screen, right: Screen, y: number): boolean {
-  for (let x = 0; x < left.width; x++) {
+  // Rows can extend past the nominal width when overflow content painted.
+  const length = Math.max(left.rowLength(y), right.rowLength(y));
+  for (let x = 0; x < length; x++) {
     if (!cellsEqual(left.cellAt(x, y), right.cellAt(x, y))) return false;
   }
   return true;
@@ -180,9 +236,7 @@ function rowsEqual(left: Screen, right: Screen, y: number): boolean {
 function screensEqual(left: Screen, right: Screen): boolean {
   if (left.width !== right.width || left.height !== right.height) return false;
   for (let y = 0; y < left.height; y++) {
-    for (let x = 0; x < left.width; x++) {
-      if (!cellsEqual(left.cellAt(x, y), right.cellAt(x, y))) return false;
-    }
+    if (!rowsEqual(left, right, y)) return false;
   }
   return true;
 }

package/src/terminal/session.ts

@@ -140,8 +140,9 @@ export class TerminalSession {
     );
   }
 
-  clearFrame(): void {
-    this.#presenter.clear();
+  /** Erases the presented frame; pass the current `columns` after a resize so the erase covers rows the emulator rewrapped. */
+  clearFrame(options: { readonly columns?: number } = {}): void {
+    this.#presenter.clear(options);
   }
 
   resetFrame(): void {