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

package/dist/{Text-D5HUf3Fj.d.ts → Text-BobFKi74.d.ts}

@@ -100,7 +100,7 @@ type BoxGlyphs = {
 //#endregion
 //#region src/styles.d.ts
 type Styles = {
-  readonly textWrap?: "wrap" | "hard" | "truncate-end" | "truncate" | "truncate-middle" | "truncate-start";
+  readonly textWrap?: "wrap" | "hard" | "truncate-end" | "truncate" | "truncate-middle" | "truncate-start" | "none";
   /**
       Controls how the element is positioned.
   
@@ -439,7 +439,7 @@ 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"];
   readonly children?: ReactNode;

package/dist/{index-Bmc2tRPk.d.ts → index-DZ88EXJv.d.ts}

@@ -1,6 +1,6 @@
 import { a as StyledChar } from "./tokenize-Dx1y_l5H.js";
 import { i as Cell, t as ColorProfile } from "./color-profile-u0Nhe9Nv.js";
-import { n as Screen, t as Line } from "./screen-BReKIheE.js";
+import { n as Screen, t as Line } from "./screen-BOSLQ8fF.js";
 //#region src/screen/ansi.d.ts
 /** Converts the renderer's canonical ANSI state into backend-neutral cells. */
 declare function cellsFromAnsi(text: string): Cell[];

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { a as getTerminalQuery, i as applyTerminalQuery, n as TerminalQueryOptio
 import { i as OutputStream, n as capabilities, r as getCapabilities, t as CapabilitiesStore } from "./store-CgrG9K4y.js";
 import { s as CellStyle, t as ColorProfile } from "./color-profile-u0Nhe9Nv.js";
 import { s as Paint } from "./paint-C19minOS.js";
-import { n as Text, r as Styles, t as Props$8 } from "./Text-D5HUf3Fj.js";
+import { n as Text, r as Styles, t as Props$8 } from "./Text-BobFKi74.js";
 import { i as Node } from "./index-DDVME65c.js";
 import { t as CursorPosition } from "./cursor-position-D2LAkRG0.js";
 import { Writable } from "node:stream";

package/dist/index.js

@@ -2,17 +2,17 @@ import { C as bsu, S as ansiEscapes, V as esu, W as link, _ as CSI } from "./sgr
 import { h as tokenizeAnsi, p as graphemes } from "./tokenize-AjqbvtiT.js";
 import { t as stringWidth } from "./string-width-CijQwpIk.js";
 import { n as sliceAnsi, r as wrapAnsi } from "./truncate-D31fhU6i.js";
-import { _ as squashTextNodes, a as reconciler, c as kittyModifiers, d as FocusContext, f as Text, g as transformAnsiLine, h as emitLayoutListeners, i as useStdinContext, l as resolveFlags, m as createNode, n as useInput, o as detectKittySupport, p as addLayoutListener, r as useStdin, s as kittyFlags, t as useFocus, u as StdinContext, v as accessibilityContext } from "./use-focus-C2sciZOo.js";
+import { _ as squashTextNodes, a as reconciler, c as kittyModifiers, d as FocusContext, f as Text, g as transformAnsiLine, h as emitLayoutListeners, i as useStdinContext, l as resolveFlags, m as createNode, n as useInput, o as detectKittySupport, p as addLayoutListener, r as useStdin, s as kittyFlags, t as useFocus, u as StdinContext, v as accessibilityContext } from "./use-focus-BzqAJi0n.js";
 import { a as isTty, i as isSigilDev, o as isWindows, r as isScreenReader, t as isInCi } from "./env-YVw64yZS.js";
 import { a as detectTerminal, c as signalExit, i as detectHyperlinkSupport, n as detectCapabilities, o as detectUnicodeSupport, r as detectColorLevel, s as terminalSize, t as createSupportsColor } from "./detect-BuTXtY6e.js";
 import { u as cliCursor } from "./osc-CCH7xDoS.js";
 import { a as registerTerminalIntegration, c as ensureTerminalQuery, d as queryTerminal, f as refreshTerminalQuery, i as getCapabilities, l as getTerminalQuery, o as getRawModeStream, r as capabilities, s as applyTerminalQuery, u as getTerminalQueryPromise } from "./color-policy-SVj1pYTA.js";
-import { a as buildCursorSuffix, c as hideCursorEscape, i as buildCursorOnlySequence, o as buildReturnToBottomPrefix, s as cursorPositionChanged, t as TerminalSession } from "./session-BJmzX2NJ.js";
+import { a as buildCursorSuffix, c as hideCursorEscape, i as buildCursorOnlySequence, o as buildReturnToBottomPrefix, s as cursorPositionChanged, t as TerminalSession } from "./session-aZr9O8h3.js";
 import { t as Yoga } from "./yoga-5jKhYCJC.js";
 import { r as createCell, t as cellAttributes } from "./cell-_ZVhbfl0.js";
 import { i as semanticTextStyleToCellStyle, n as mergeSemanticTextStyles, t as emptySemanticTextStyle } from "./semantic-text-style-DIMzC7xt.js";
 import { a as samplePaint } from "./sample-Cqw1bjUL.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 { t as colorProfileFromLevel } from "./color-profile-DHhQHY55.js";
 import { n as serializeScreen, t as serializeLine } from "./serialize-BTkAZgw1.js";
 import { t as stripAnsi } from "./strip-BvU4toXG.js";
@@ -1115,6 +1115,7 @@ function structuredTextBaseStyle(node) {
 }
 /** Wraps or truncates semantic cells without converting them through ANSI. */
 function wrapStructuredText(input, maxWidth, wrap, baseStyle) {
+	if (wrap === "none") return input.map((line) => [...line]);
 	if (maxWidth < 1) return [[]];
 	return input.flatMap((line) => {
 		if (lineWidth(line) <= maxWidth) return [[...line]];
@@ -1301,7 +1302,9 @@ const paintTree = (node, output, options) => {
 				const firstChildYoga = node.childNodes[0]?.yogaNode;
 				const paddingX = firstChildYoga?.getComputedLeft() ?? 0;
 				const paddingY = firstChildYoga?.getComputedTop() ?? 0;
-				const lines = wrapStructuredText(structuredTextLines(node), maxWidth, node.style.textWrap ?? "wrap", structuredTextBaseStyle(node));
+				const textWrap = node.style.textWrap ?? "wrap";
+				const overflow = textWrap === "none";
+				const lines = wrapStructuredText(structuredTextLines(node), maxWidth, textWrap, structuredTextBaseStyle(node));
 				const paintBounds = {
 					x: x + paddingX,
 					y: y + paddingY,
@@ -1314,8 +1317,11 @@ const paintTree = (node, output, options) => {
 					output.writeAnsi(paintBounds.x, paintBounds.y, sampled.map((line) => serializeLine(line, {
 						colorProfile: output.paintContext.profile ?? "truecolor",
 						trimEnd: false
-					})).join("\n"), { transformers: textTransformers });
-				} else output.writeCells(paintBounds.x, paintBounds.y, sampled);
+					})).join("\n"), {
+						transformers: textTransformers,
+						overflow
+					});
+				} else output.writeCells(paintBounds.x, paintBounds.y, sampled, { overflow });
 			}
 			return;
 		}
@@ -1375,15 +1381,16 @@ var Canvas = class {
 		};
 		this.#screen = new Screen(this.width, this.height);
 	}
-	writeCells(x, y, lines) {
+	writeCells(x, y, lines, options) {
 		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;
 			let currentX = x;
 			for (const cell of line) {
 				const endX = currentX + cell.width;
-				if (!(clip?.x1 !== void 0 && currentX < clip.x1 || clip?.x2 !== void 0 && endX > clip.x2)) this.#composeNativeCell(currentX, currentY, cell);
+				if (!(clip?.x1 !== void 0 && currentX < clip.x1 || clip?.x2 !== void 0 && endX > clip.x2)) this.#composeNativeCell(currentX, currentY, cell, overflow);
 				currentX = endX;
 			}
 		}
@@ -1392,6 +1399,7 @@ var Canvas = class {
 		if (!text) return;
 		let lines = text.split("\n");
 		const clip = this.#clips.at(-1);
+		const overflow = options.overflow === true;
 		if (clip?.y1 !== void 0 && y < clip.y1) {
 			lines = lines.slice(clip.y1 - y);
 			y = clip.y1;
@@ -1410,7 +1418,7 @@ var Canvas = class {
 			for (const character of transformAnsiLine(line, lineIndex, options.transformers)) {
 				const width = Math.max(1, stringWidth(character.value));
 				if (clip?.x2 !== void 0 && currentX + width > clip.x2) break;
-				this.#writeCompatibilityCell(currentX, currentY, character, width);
+				this.#writeCompatibilityCell(currentX, currentY, character, width, overflow);
 				currentX += width;
 			}
 		}
@@ -1427,8 +1435,8 @@ var Canvas = class {
 	#insideY(y, clip) {
 		return y >= 0 && y < this.#screen.height && (clip?.y1 === void 0 || y >= clip.y1) && (clip?.y2 === void 0 || y < clip.y2);
 	}
-	#composeNativeCell(x, y, cell) {
-		if (x >= this.#screen.width) return;
+	#composeNativeCell(x, y, cell, overflow = false) {
+		if (!overflow && x >= this.#screen.width) return;
 		this.#screen.composeCell(x, y, {
 			content: {
 				grapheme: cell.grapheme,
@@ -1440,10 +1448,10 @@ var Canvas = class {
 			underline: cell.style.underline,
 			attributes: cell.style.attributes,
 			hyperlink: cell.hyperlink ?? null
-		});
+		}, { overflow });
 	}
-	#writeCompatibilityCell(x, y, character, width) {
-		if (x >= this.#screen.width) return;
+	#writeCompatibilityCell(x, y, character, width, overflow = false) {
+		if (!overflow && x >= this.#screen.width) return;
 		const cell = cellFromStyledChar(character, width);
 		this.#screen.composeCell(x, y, {
 			content: {
@@ -1456,7 +1464,7 @@ var Canvas = class {
 			underline: cell.style.underline,
 			attributes: cell.style.attributes,
 			hyperlink: cell.hyperlink ?? null
-		});
+		}, { overflow });
 	}
 };
 //#endregion

package/dist/router.d.ts

@@ -1,4 +1,4 @@
-import { t as Props } from "./Text-D5HUf3Fj.js";
+import { t as Props } from "./Text-BobFKi74.js";
 import { ReactElement, ReactNode } from "react";
 //#region src/router/history.d.ts
 /**

package/dist/router.js

@@ -1,4 +1,4 @@
-import { f as Text, n as useInput, t as useFocus } from "./use-focus-C2sciZOo.js";
+import { f as Text, n as useInput, t as useFocus } from "./use-focus-BzqAJi0n.js";
 import { Children, Fragment, createContext, isValidElement, startTransition, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/router/history.ts

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

@@ -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 { 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-DZ88EXJv.js";
+import { n as Screen, t as Line } from "./screen-BOSLQ8fF.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-aZr9O8h3.js}

@@ -358,12 +358,13 @@ function findFirstChangedRow(previous, next) {
 	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

package/dist/terminal.d.ts

@@ -3,7 +3,7 @@ import { n as TerminalProgressState, t as ClipboardSelection } from "./osc-Cn0fw
 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 { n as Screen } from "./screen-BOSLQ8fF.js";
 import { t as CursorPosition } from "./cursor-position-D2LAkRG0.js";
 //#region src/input-parser.d.ts
 type InputEvent = string | {

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-aZr9O8h3.js";
 export { TerminalInput, TerminalSession, parseMouseEvent };

package/dist/{use-focus-C2sciZOo.js → use-focus-BzqAJi0n.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.6";
 //#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.6",
   "description": "React for CLIs. A self-contained fork of Ink with an integrated TypeScript Yoga layout engine.",
   "keywords": [
     "cli",

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/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

@@ -171,7 +171,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 +182,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/wrap-text.ts

@@ -6,6 +6,10 @@ import { type Styles } from "#/styles.ts";
 export const wrapTextCache = new QuickLRU<string, string>({ maxSize: 4096 });
 
 export const wrapText = (text: string, maxWidth: number, wrapType: Styles["textWrap"]): string => {
+  if (wrapType === "none") {
+    return text;
+  }
+
   const cacheKey = text + String(maxWidth) + String(wrapType);
   const cachedText = wrapTextCache.get(cacheKey);