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

package/dist/{screen-BReKIheE.d.ts → screen-CgC2WlVM.d.ts}

@@ -1,4 +1,4 @@
-import { i as Cell, o as CellPatch } from "./color-profile-u0Nhe9Nv.js";
+import { i as Cell, o as CellPatch } from "./color-profile-CyeHnG1T.js";
 import { n as Rect } from "./geometry-BxXOzJgo.js";
 //#region src/screen/screen.d.ts
 type Line = readonly Cell[];
@@ -16,17 +16,26 @@ declare class Screen {
   #private;
   constructor(width: number, height: number);
   get width(): number;
+  /**
+    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;
   get height(): number;
   bounds(): Rect;
   cellAt(x: number, y: number): Cell | undefined;
   /** Whether a drawable explicitly touched this position. */
   isPainted(x: number, y: number): boolean;
-  setCell(x: number, y: number, cell: Cell): void;
+  setCell(x: number, y: number, cell: Cell, options?: {
+    overflow?: boolean;
+  }): void;
   /**
     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;
   /** Composes a patch throughout a rectangle, clipped to this screen. */
   fill(bounds: Rect, patch: CellPatch | undefined): void;
   /** Resizes while preserving complete graphemes in the shared top-left area. */

package/dist/{screen-BOh__-65.js → screen-CiPytswf.js}

@@ -155,6 +155,13 @@ var Screen = class {
 	get width() {
 		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) {
+		return Math.max(this.#width, this.#rows[y]?.length ?? 0);
+	}
 	get height() {
 		return this.#height;
 	}
@@ -173,17 +180,20 @@ var Screen = class {
 	isPainted(x, y) {
 		return this.#painted[y]?.[x] ?? false;
 	}
-	setCell(x, y, cell) {
+	setCell(x, y, cell, options) {
 		const row = this.#rows[y];
-		if (!row || x < 0 || x >= this.width) return;
+		const overflow = options?.overflow === true;
+		if (!row || x < 0 || !overflow && x >= this.width) return;
 		if (!Number.isInteger(cell.width) || cell.width < 1) throw new Error("Only leading cells with a positive width may be written");
 		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++) row[column] = emptyCell;
-			this.#markDirty(y, x, this.width);
+			for (let column = x; column < capacity; column++) row[column] = emptyCell;
+			this.#markDirty(y, x, capacity);
 			return;
 		}
 		row[x] = cell;
@@ -203,10 +213,10 @@ var Screen = class {
 	Composes independent cell channels over the existing cell. An undefined
 	patch is transparent; an explicit space in `content` paints a blank.
 	*/
-	composeCell(x, y, patch) {
+	composeCell(x, y, patch, options) {
 		if (!patch) return;
 		const row = this.#rows[y];
-		if (!row || x < 0 || x >= this.width) return;
+		if (!row || x < 0 || options?.overflow !== true && x >= this.width) return;
 		let leadingColumn = x;
 		while (leadingColumn > 0 && row[leadingColumn]?.width === 0) leadingColumn--;
 		const destination = row[leadingColumn] ?? emptyCell;
@@ -220,7 +230,7 @@ var Screen = class {
 		};
 		const content = patch.content ?? destination;
 		const hyperlink = patch.hyperlink === void 0 ? destination.hyperlink : patch.hyperlink ?? void 0;
-		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. */
 	fill(bounds, patch) {
@@ -265,7 +275,7 @@ var Screen = class {
 		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));
 		}
 	}
 	toRows() {
@@ -282,6 +292,14 @@ var Screen = class {
 		this.#dirty.fill(void 0);
 		return spans;
 	}
+	/** Extends a row (and its paint mask) so overflow writes land past `width`. */
+	#growRow(row, y, length) {
+		const painted = this.#painted[y];
+		while (row.length < length) {
+			row.push(emptyCell);
+			painted.push(false);
+		}
+	}
 	#clearGraphemeAt(row, y, x) {
 		const existing = row[x];
 		if (!existing || existing === emptyCell) return;
@@ -289,7 +307,7 @@ var Screen = class {
 		while (leadingColumn > 0 && row[leadingColumn]?.width === 0) leadingColumn--;
 		const leadingCell = row[leadingColumn];
 		const width = Math.max(1, leadingCell?.width ?? 1);
-		for (let column = leadingColumn; column < Math.min(leadingColumn + width, this.width); column++) {
+		for (let column = leadingColumn; column < Math.min(leadingColumn + width, row.length); column++) {
 			row[column] = emptyCell;
 			this.#painted[y][column] = true;
 		}
@@ -306,7 +324,7 @@ var Screen = class {
 	#markDirty(y, start, end) {
 		if (y < 0 || y >= this.height || start >= end) return;
 		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),

package/dist/screen.d.ts

@@ -1,5 +1,5 @@
-import { _ as emptyCellStyle, a as CellContent, c as Color, d as RgbColor, f as UnderlineStyle, g as emptyCell, h as createCell, i as Cell, l as Hyperlink, m as cellsEqual, n as colorProfileFromLevel, o as CellPatch, p as cellAttributes, r as quantizeColor, s as CellStyle, t as ColorProfile, u as IndexedColor } from "./color-profile-u0Nhe9Nv.js";
+import { _ as emptyCellStyle, a as CellContent, c as Color, d as RgbColor, f as UnderlineStyle, g as emptyCell, h as createCell, i as Cell, l as Hyperlink, m as cellsEqual, n as colorProfileFromLevel, o as CellPatch, p as cellAttributes, r as quantizeColor, s as CellStyle, t as ColorProfile, u as IndexedColor } from "./color-profile-CyeHnG1T.js";
 import { n as Rect, t as Point } from "./geometry-BxXOzJgo.js";
-import { a as cellFromStyledChar, i as styledCharFromCell, n as serializeLine, o as cellsFromAnsi, r as serializeScreen, t as SerializeOptions } from "./index-Bmc2tRPk.js";
-import { n as Screen, t as Line } from "./screen-BReKIheE.js";
+import { a as cellFromStyledChar, i as styledCharFromCell, n as serializeLine, o as cellsFromAnsi, r as serializeScreen, t as SerializeOptions } from "./index-D48vQhhe.js";
+import { n as Screen, t as Line } from "./screen-CgC2WlVM.js";
 export { Cell, CellContent, CellPatch, CellStyle, Color, ColorProfile, Hyperlink, IndexedColor, type Line, Point, Rect, RgbColor, Screen, SerializeOptions, UnderlineStyle, cellAttributes, cellFromStyledChar, cellsEqual, cellsFromAnsi, colorProfileFromLevel, createCell, emptyCell, emptyCellStyle, quantizeColor, serializeLine, serializeScreen, styledCharFromCell };

package/dist/screen.js

@@ -1,5 +1,5 @@
 import { a as emptyCellStyle, i as emptyCell, n as cellsEqual, r as createCell, t as cellAttributes } from "./cell-_ZVhbfl0.js";
-import { n as cellFromStyledChar, r as cellsFromAnsi, t as Screen } from "./screen-BOh__-65.js";
+import { n as cellFromStyledChar, r as cellsFromAnsi, t as Screen } from "./screen-CiPytswf.js";
 import { n as quantizeColor, t as colorProfileFromLevel } from "./color-profile-DHhQHY55.js";
 import { n as serializeScreen, r as styledCharFromCell, t as serializeLine } from "./serialize-BTkAZgw1.js";
 export { Screen, cellAttributes, cellFromStyledChar, cellsEqual, cellsFromAnsi, colorProfileFromLevel, createCell, emptyCell, emptyCellStyle, quantizeColor, serializeLine, serializeScreen, styledCharFromCell };

package/dist/{session-BJmzX2NJ.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,17 +369,36 @@ 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;
 }
 function rowsEqual(left, right, y) {
-	for (let x = 0; x < left.width; x++) if (!cellsEqual(left.cellAt(x, y), right.cellAt(x, y))) return false;
+	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;
 }
 function screensEqual(left, right) {
 	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;
+	for (let y = 0; y < left.height; y++) if (!rowsEqual(left, right, y)) return false;
 	return true;
 }
 //#endregion
@@ -436,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-BReKIheE.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-BJmzX2NJ.js";
+import { n as TerminalInput, r as parseMouseEvent, t as TerminalSession } from "./session-Cg6STjFV.js";
 export { TerminalInput, TerminalSession, parseMouseEvent };

package/dist/{use-focus-C2sciZOo.js → use-focus-DSV01Ulb.js}

@@ -278,6 +278,7 @@ function transformAnsiLine(serializedSubtree, lineIndex, transformers) {
 //#region src/wrap-text.ts
 const wrapTextCache = new QuickLru({ maxSize: 4096 });
 const wrapText = (text, maxWidth, wrapType) => {
+	if (wrapType === "none") return text;
 	const cacheKey = text + String(maxWidth) + String(wrapType);
 	const cachedText = wrapTextCache.get(cacheKey);
 	if (cachedText !== void 0) return cachedText;
@@ -386,6 +387,7 @@ const measureTextNode = function(node, width) {
 	if (dimensions.width <= width) return dimensions;
 	if (dimensions.width >= 1 && width > 0 && width < 1) return dimensions;
 	const textWrap = node.style?.textWrap ?? "wrap";
+	if (textWrap === "none") return dimensions;
 	const wrappedText = wrapText(text, width, textWrap);
 	return measureText(wrappedText);
 };
@@ -562,7 +564,7 @@ const detectKittySupport = (stdin, stdout, onSupported) => {
 //#endregion
 //#region package.json
 var name = "@alchemy.run/sigil";
-var version = "0.0.0-alpha.5";
+var version = "0.0.0-alpha.7";
 //#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.5",
+  "version": "0.0.0-alpha.7",
   "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/Text.tsx

@@ -59,7 +59,7 @@ export type Props = {
   readonly inverse?: boolean;
 
   /**
-	This property tells Ink to wrap or truncate text if its width is larger than the container. If `wrap` is passed (the default), Ink will wrap text and split it into multiple lines. If `hard` is passed, Ink will fill each line to the full column width, breaking words as necessary. If `truncate-*` is passed, Ink will truncate text instead, resulting in one line of text with the rest cut off.
+	This property tells Ink to wrap or truncate text if its width is larger than the container. If `wrap` is passed (the default), Ink will wrap text and split it into multiple lines. If `hard` is passed, Ink will fill each line to the full column width, breaking words as necessary. If `truncate-*` is passed, Ink will truncate text instead, resulting in one line of text with the rest cut off. If `none` is passed, the text is neither wrapped nor truncated — it overflows the container (and the screen's nominal width), which is intended for log lines committed to scrollback (e.g. inside `<Static>`), not for live regions.
 	*/
   readonly wrap?: Styles["textWrap"];
 

package/src/dom.ts

@@ -243,6 +243,12 @@ const measureTextNode = function (node: DOMNode, width: number): { width: number
   }
 
   const textWrap = node.style?.textWrap ?? "wrap";
+
+  // `none` keeps the intrinsic dimensions and overflows the container.
+  if (textWrap === "none") {
+    return dimensions;
+  }
+
   const wrappedText = wrapText(text, width, textWrap);
 
   return measureText(wrappedText);

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]);
 };