@alchemy.run/sigil 0.0.0-alpha.6 → 0.0.0-alpha.8

package/dist/{session-aZr9O8h3.js → session-Cg6STjFV.js}

@@ -1,7 +1,7 @@
 import { G as pasteEnd, K as pasteStart, S as ansiEscapes } from "./sgr-BhwaWAJB.js";
-import { a as setPointerShape, c as setWorkingDirectory, i as setClipboard, l as tmuxPassthrough, n as notify, o as setTerminalProgress, s as setWindowTitle, u as cliCursor } from "./osc-CCH7xDoS.js";
-import { i as getCapabilities, t as colorState } from "./color-policy-SVj1pYTA.js";
-import { n as cellsEqual } from "./cell-_ZVhbfl0.js";
+import { a as setPointerShape, c as setWorkingDirectory, i as setClipboard, l as tmuxPassthrough, n as notify, o as setTerminalProgress, s as setWindowTitle, u as cliCursor } from "./osc-BFKKSqpg.js";
+import { i as getCapabilities, t as colorState } from "./color-policy-DlrZXC0f.js";
+import { n as cellsEqual, t as cellAttributes } from "./cell-_ZVhbfl0.js";
 import { n as serializeScreen, t as serializeLine } from "./serialize-BTkAZgw1.js";
 //#region src/cursor-position.ts
 const showCursorEscape = ansiEscapes.cursorShow;
@@ -322,13 +322,29 @@ var ScreenPresenter = class {
 	willPresent(screen, cursor, fullscreen = false, forceRewrite = false) {
 		return forceRewrite || this.#screen === void 0 || !screensEqual(this.#screen, screen) || cursorPositionChanged(cursor, this.#cursor) || fullscreen !== this.#fullscreen;
 	}
-	clear() {
-		this.#write(buildReturnToBottomPrefix(this.#cursorWasShown, this.#lineCount, this.#cursor) + ansiEscapes.eraseLines(this.#lineCount));
+	/**
+	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 = {}) {
+		this.#write(buildReturnToBottomPrefix(this.#cursorWasShown, this.#lineCount, this.#cursor) + ansiEscapes.eraseLines(this.#physicalLineCount(options.columns)));
 		this.#lineCount = 0;
 		this.#cursor = void 0;
 		this.#cursorWasShown = false;
 		this.#fullscreen = false;
 	}
+	#physicalLineCount(columns) {
+		if (this.#screen === void 0 || this.#lineCount === 0 || columns === void 0 || 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() {
 		this.#screen = void 0;
 		this.#lineCount = 0;
@@ -353,6 +369,24 @@ var ScreenPresenter = class {
 		this.#fullscreen = fullscreen;
 	}
 };
+/**
+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) {
+	let width = 0;
+	let end = 0;
+	for (const cell of line) {
+		width += cell.width;
+		if (!isBlank(cell)) end = width;
+	}
+	return end;
+}
+function isBlank(cell) {
+	const { style } = cell;
+	return (cell.grapheme === " " || cell.width === 0) && style.foreground === void 0 && style.background === void 0 && style.underlineColor === void 0 && style.underline === "none" && style.attributes === cellAttributes.none && cell.hyperlink === void 0;
+}
 function findFirstChangedRow(previous, next) {
 	const height = Math.max(previous.height, next.height);
 	for (let y = 0; y < height; y++) if (!rowsEqual(previous, next, y)) return y;
@@ -437,8 +471,9 @@ var TerminalSession = class {
 	willPresent(screen, options = {}) {
 		return this.#presenter.willPresent(screen, this.cursor.position, options.fullscreen, options.forceRewrite);
 	}
-	clearFrame() {
-		this.#presenter.clear();
+	/** Erases the presented frame; pass the current `columns` after a resize so the erase covers rows the emulator rewrapped. */
+	clearFrame(options = {}) {
+		this.#presenter.clear(options);
 	}
 	resetFrame() {
 		this.#presenter.reset();

package/dist/{store-CgrG9K4y.d.ts → store-C1P5fOUi.d.ts}

@@ -1,4 +1,4 @@
-import { t as Capabilities } from "./detect-Bh4yGP6w.js";
+import { t as Capabilities } from "./detect-Db6GbKOm.js";
 //#region src/stream.d.ts
 type OutputStream = NodeJS.WritableStream & {
   isTTY?: boolean;

package/dist/terminal.d.ts

@@ -1,9 +1,9 @@
 import { a as CursorShape } from "./escapes-CB_6CWOE.js";
 import { n as TerminalProgressState, t as ClipboardSelection } from "./osc-Cn0fw77g.js";
-import { i as OutputStream, t as CapabilitiesStore } from "./store-CgrG9K4y.js";
-import { t as ColorProfile } from "./color-profile-u0Nhe9Nv.js";
-import { t as ColorPolicy } from "./color-policy-BMzMwV7Q.js";
-import { n as Screen } from "./screen-BOSLQ8fF.js";
+import { i as OutputStream, t as CapabilitiesStore } from "./store-C1P5fOUi.js";
+import { t as ColorProfile } from "./color-profile-CyeHnG1T.js";
+import { t as ColorPolicy } from "./color-policy-CCxuHIdD.js";
+import { n as Screen } from "./screen-CgC2WlVM.js";
 import { t as CursorPosition } from "./cursor-position-D2LAkRG0.js";
 //#region src/input-parser.d.ts
 type InputEvent = string | {
@@ -77,7 +77,10 @@ declare class TerminalSession {
     readonly fullscreen?: boolean;
     readonly forceRewrite?: boolean;
   }): boolean;
-  clearFrame(): void;
+  /** 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;
   resetFrame(): void;
   finishFrame(): void;
   setColorPolicy(policy: ColorPolicy): void;

package/dist/terminal.js

@@ -1,2 +1,2 @@
-import { n as TerminalInput, r as parseMouseEvent, t as TerminalSession } from "./session-aZr9O8h3.js";
+import { n as TerminalInput, r as parseMouseEvent, t as TerminalSession } from "./session-Cg6STjFV.js";
 export { TerminalInput, TerminalSession, parseMouseEvent };

package/dist/{use-focus-BzqAJi0n.js → use-focus-BNG0xsb7.js}

@@ -564,7 +564,7 @@ const detectKittySupport = (stdin, stdout, onSupported) => {
 //#endregion
 //#region package.json
 var name = "@alchemy.run/sigil";
-var version = "0.0.0-alpha.6";
+var version = "0.0.0-alpha.8";
 //#endregion
 //#region src/reconciler.ts
 if (isSigilDev) await import("./devtools-DbthxoD1.js").catch(() => {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alchemy.run/sigil",
-  "version": "0.0.0-alpha.6",
+  "version": "0.0.0-alpha.8",
   "description": "React for CLIs. A self-contained fork of Ink with an integrated TypeScript Yoga layout engine.",
   "keywords": [
     "cli",

package/src/capabilities/detect.ts

@@ -85,8 +85,21 @@ export type Capabilities = {
   /**
 	Current terminal dimensions in cells, plus pixel geometry once the
 	terminal has answered the query.
+
+	`source` tells where the cell dimensions come from. `"pty"` is the
+	stream's own `columns`/`rows`, updated by the OS on SIGWINCH — which says
+	nothing about whether the emulator has finished rewrapping its screen.
+	`"terminal"` is the emulator's in-band size report (mode 2048), which
+	arrives in the input stream after the rewrap and so describes the screen
+	exactly as later output will find it. While the terminal reports, its
+	size wins over the stream's.
 	*/
-  size: { columns: number; rows: number; pixels: PixelGeometry | undefined };
+  size: {
+    columns: number;
+    rows: number;
+    pixels: PixelGeometry | undefined;
+    source: "pty" | "terminal";
+  };
 
   platform: NodeJS.Platform;
 
@@ -580,6 +593,7 @@ export function detectCapabilities({ stdout = process.stdout }: DetectOptions =
         ? { columns: stdout.columns, rows: stdout.rows }
         : terminalSize()),
       pixels: undefined,
+      source: "pty",
     },
     focused: undefined,
     theme: {

package/src/capabilities/store.ts

@@ -128,11 +128,17 @@ const createStore = (stdin: StoreStdin, stdout: StoreStdout): CapabilitiesStore
   let resizeSubscribers = 0;
 
   let focused: boolean | undefined;
+  // The size from the terminal's latest in-band report (mode 2048). While
+  // set it is authoritative: the report is ordered in the input stream after
+  // the emulator rewrapped, whereas the stream's `columns`/`rows` only say
+  // what the OS told the PTY, before or after the emulator caught up.
+  let reportedSize: { columns: number; rows: number } | undefined;
   let snapshot: Capabilities | undefined;
   let snapshotQuery: TerminalQueryResult | undefined;
   let snapshotColumns: number | undefined;
   let snapshotRows: number | undefined;
   let snapshotFocused: boolean | undefined;
+  let snapshotReportedSize: typeof reportedSize;
 
   const current = (): Capabilities => {
     const query = getTerminalQuery(stdout);
@@ -142,15 +148,20 @@ const createStore = (stdin: StoreStdin, stdout: StoreStdout): CapabilitiesStore
       query !== snapshotQuery ||
       columns !== snapshotColumns ||
       rows !== snapshotRows ||
-      focused !== snapshotFocused
+      focused !== snapshotFocused ||
+      reportedSize !== snapshotReportedSize
     ) {
       const detected = detectCapabilities({ stdout });
       const applied = query ? applyTerminalQuery(detected, query) : detected;
-      snapshot = focused === undefined ? applied : { ...applied, focused };
+      const sized = reportedSize
+        ? { ...applied, size: { ...applied.size, ...reportedSize, source: "terminal" as const } }
+        : applied;
+      snapshot = focused === undefined ? sized : { ...sized, focused };
       snapshotQuery = query;
       snapshotColumns = columns;
       snapshotRows = rows;
       snapshotFocused = focused;
+      snapshotReportedSize = reportedSize;
     }
 
     return snapshot;
@@ -217,6 +228,9 @@ const createStore = (stdin: StoreStdin, stdout: StoreStdout): CapabilitiesStore
       integration?.setReportFeed?.(false);
       removeExitHandler?.();
       removeExitHandler = undefined;
+      // No further reports will arrive; the stream is the only size source
+      // again and the last report would go stale on the next resize.
+      reportedSize = undefined;
     }
   };
 
@@ -255,6 +269,7 @@ const createStore = (stdin: StoreStdin, stdout: StoreStdout): CapabilitiesStore
     if (resize) {
       const [, rows, columns, pixelHeight, pixelWidth] = resize.map(Number);
       if (columns && rows) {
+        reportedSize = { columns, rows };
         patchTerminalQuery(stdout, {
           textAreaPixels:
             pixelWidth && pixelHeight ? { width: pixelWidth, height: pixelHeight } : undefined,

package/src/components/App.tsx

@@ -109,6 +109,7 @@ export function App({
   internal_eventEmitter.current.setMaxListeners(Infinity);
   // Store the currently attached readable listener to avoid stale closure issues
   const readableListenerRef = useRef<(() => void) | undefined>(undefined);
+  const isMountedRef = useRef(true);
   const pendingInputFlushRef = useRef<NodeJS.Timeout | undefined>(undefined);
   // Small delay to let chunked escape sequences complete before flushing as literal input.
   const pendingInputFlushDelayMilliseconds = 20;
@@ -417,7 +418,12 @@ export function App({
           ? refreshTerminalQuery(stdin, stdout)
           : ensureTerminalQuery(stdin, stdout));
       } finally {
-        attachReadableListener();
+        // A slow terminal response may arrive after this renderer has been
+        // replaced. Do not leave its reader attached to consume input meant
+        // for a subsequent renderer.
+        if (isMountedRef.current) {
+          attachReadableListener();
+        }
         handleSetRawMode(false);
       }
     },
@@ -741,7 +747,10 @@ export function App({
 
   // Handle cursor visibility, raw mode, and bracketed paste mode cleanup on unmount
   useEffect(() => {
+    isMountedRef.current = true;
+
     return () => {
+      isMountedRef.current = false;
       const canWriteToStdout = !stdout.destroyed && !stdout.writableEnded;
 
       if (interactive && canWriteToStdout) {

package/src/hooks/use-window-size.ts

@@ -1,7 +1,6 @@
-import { useState, useEffect } from "react";
+import { useMemo } from "react";
 
-import { useStdout } from "#/hooks/use-stdout.ts";
-import { getWindowSize } from "#/utils.ts";
+import { useCapabilities } from "#/hooks/use-capabilities.ts";
 
 /**
 Dimensions of the terminal window.
@@ -20,22 +19,12 @@ export type WindowSize = {
 
 /**
 A React hook that returns the current terminal window dimensions and re-renders the component whenever the terminal is resized.
+
+Reads the capabilities store, so on terminals that send in-band size reports
+(mode 2048) the dimensions are the emulator's own, arriving after it has
+rewrapped its screen; elsewhere they are the stream's `columns`/`rows`.
 */
 export const useWindowSize = (): WindowSize => {
-  const { stdout } = useStdout();
-  const [size, setSize] = useState<WindowSize>(() => getWindowSize(stdout));
-
-  useEffect(() => {
-    const onResize = () => {
-      setSize(getWindowSize(stdout));
-    };
-
-    stdout.on("resize", onResize);
-
-    return () => {
-      stdout.off("resize", onResize);
-    };
-  }, [stdout]);
-
-  return size;
+  const { size } = useCapabilities();
+  return useMemo(() => ({ columns: size.columns, rows: size.rows }), [size.columns, size.rows]);
 };

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/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++) {

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 {

package/src/testing/terminal.ts

@@ -100,7 +100,13 @@ export type TerminalApp = {
 	*/
   type: (text: string) => void;
 
-  resize: (columns: number, rows: number) => void;
+  /**
+	Resizes the PTY and the emulator. Real terminal apps never do both at
+	once: `emulatorLag` (ms) delays the emulator's rewrap behind the PTY
+	resize, simulating an app that reports the new size to the process
+	before its screen has been rewrapped.
+	*/
+  resize: (columns: number, rows: number, options?: { readonly emulatorLag?: number }) => void;
 
   /**
 	Flips the emulated OS color scheme (Ghostty engine only) — the app
@@ -306,9 +312,15 @@ export const launchTerminal = async (
     type: (text) => {
       child.write(text);
     },
-    resize: (nextColumns, nextRows) => {
+    resize: (nextColumns, nextRows, options = {}) => {
       child.resize(nextColumns, nextRows);
-      emulator.resize(nextColumns, nextRows);
+      if (options.emulatorLag === undefined) {
+        emulator.resize(nextColumns, nextRows);
+        return;
+      }
+      setTimeout(() => {
+        if (!closed) emulator.resize(nextColumns, nextRows);
+      }, options.emulatorLag);
     },
     setColorScheme: (scheme) => {
       if (!emulator.setColorScheme) {