@pi-archimedes/diff 1.4.1 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pi-archimedes/diff",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "type": "module",
   "keywords": [
     "pi-package"
@@ -16,7 +16,8 @@
   "dependencies": {
     "diff": "^8.0.0",
     "shiki": "^4.0.0",
-    "@shikijs/cli": "^4.0.2"
+    "@shikijs/cli": "^4.0.2",
+    "get-east-asian-width": "^1.6.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": ">=0.1.0",

package/src/ansi/manip.ts

@@ -2,6 +2,7 @@
 
 import { relative } from "node:path";
 import * as C from "./codes.js";
+import { tokenize } from "./width.js";
 
 // ---------------------------------------------------------------------------
 // ANSI manipulation
@@ -17,26 +18,27 @@ export function tabs(s: string): string {
 	return s.replace(/\t/g, "  ");
 }
 
-/** Pad/truncate `s` to exactly `w` visible chars. ANSI-aware. */
+/** Pad/truncate `s` to exactly `w` visible columns. ANSI + grapheme-aware. */
 export function fit(s: string, w: number): string {
 	if (w <= 0) return "";
-	const plain = strip(s);
-	if (plain.length <= w) return s + " ".repeat(w - plain.length);
+	const tokens = tokenize(s);
+	const total = tokens.reduce((sum, t) => sum + t.width, 0);
+	if (total <= w) return s + " ".repeat(w - total);
 	const showW = w > 2 ? w - 1 : w;
 	let vis = 0,
-		i = 0;
-	while (i < s.length && vis < showW) {
-		if (s[i] === "\x1b") {
-			const e = s.indexOf("m", i);
-			if (e !== -1) {
-				i = e + 1;
-				continue;
-			}
-		}
-		vis++;
-		i++;
+		out = "";
+	for (const tok of tokens) {
+		// A grapheme cluster is atomic — never split it mid-render. A cluster
+		// wider than the entire budget (only possible when showW is 1 and the
+		// grapheme is wide) is dropped rather than overflowing the target width.
+		if (tok.width > showW) continue;
+		if (vis + tok.width > showW) break;
+		out += tok.ansi + tok.text;
+		vis += tok.width;
 	}
-	return w > 2 ? `${s.slice(0, i)}${C.RST}${C.FG_DIM}›${C.RST}` : `${s.slice(0, i)}${C.RST}`;
+	return w > 2
+		? `${out}${C.RST}${" ".repeat(Math.max(0, showW - vis))}${C.FG_DIM}›${C.RST}`
+		: `${out}${C.RST}${" ".repeat(Math.max(0, w - vis))}`;
 }
 
 /** Extract last active fg + bg ANSI codes from a string. Used for wrapping continuations. */

package/src/ansi/width.ts

@@ -0,0 +1,107 @@
+/**
+ * ANSI + grapheme-aware width utilities.
+ *
+ * Mirrors pi-tui's own `visibleWidth()` semantics (east-asian-width + emoji
+ * heuristics) so diff rendering never emits rows that violate the TUI's
+ * "line must not exceed terminal width" invariant. Plain `.length` on a JS
+ * string undercounts wide/emoji graphemes (e.g. "✅" is 1 UTF-16 code unit
+ * but occupies 2 terminal columns), which silently produces over-wide lines.
+ */
+
+import { eastAsianWidth } from "get-east-asian-width";
+
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+const zeroWidthRegex = /^(?:\p{Default_Ignorable_Code_Point}|\p{Control}|\p{Mark}|\p{Surrogate})+$/u;
+const leadingNonPrintingRegex = /^[\p{Default_Ignorable_Code_Point}\p{Control}\p{Format}\p{Mark}\p{Surrogate}]+/u;
+// RGI_Emoji requires the `v` flag (set notation); fall back to a broad
+// Extended_Pictographic + presentation-selector heuristic under `u`, which
+// is good enough here since couldBeEmoji() already pre-filters candidates.
+const rgiEmojiRegex = /^[\p{Extended_Pictographic}\u{1F1E6}-\u{1F1FF}]/u;
+
+function couldBeEmoji(segment: string): boolean {
+	const cp = segment.codePointAt(0);
+	if (cp === undefined) return false;
+	return (
+		(cp >= 0x1f000 && cp <= 0x1fbff) ||
+		(cp >= 0x2300 && cp <= 0x23ff) ||
+		(cp >= 0x2600 && cp <= 0x27bf) ||
+		(cp >= 0x2b50 && cp <= 0x2b55) ||
+		segment.includes("\uFE0F") ||
+		segment.length > 2
+	);
+}
+
+/** Terminal column width of a single grapheme cluster. */
+export function graphemeWidth(segment: string): number {
+	// Tabs are normally expanded to 2 spaces upstream via Ansi.tabs(), but
+	// guard here too so these utilities are robust to raw tab input.
+	if (segment === "\t") return 2;
+	if (zeroWidthRegex.test(segment)) return 0;
+	if (couldBeEmoji(segment) && rgiEmojiRegex.test(segment)) return 2;
+	const base = segment.replace(leadingNonPrintingRegex, "");
+	const cp = base.codePointAt(0);
+	if (cp === undefined) return 0;
+	if (cp >= 0x1f1e6 && cp <= 0x1f1ff) return 2;
+	let width = eastAsianWidth(cp);
+	if (segment.length > 1) {
+		for (const char of segment.slice(1)) {
+			const c = char.codePointAt(0);
+			if (c === undefined) continue;
+			if (c >= 0xff00 && c <= 0xffef) width += eastAsianWidth(c);
+			else if (c === 0x0e33 || c === 0x0eb3) width += 1;
+		}
+	}
+	return width;
+}
+
+/** One grapheme cluster, plus any ANSI SGR codes immediately preceding it. */
+export interface WidthToken {
+	ansi: string;
+	text: string;
+	width: number;
+}
+
+/**
+ * Tokenize an ANSI-encoded string into (ansi-prefix, grapheme, width) triples.
+ * Only SGR (`ESC[...m`) sequences are recognized as ANSI — matches the rest
+ * of this package's ANSI handling, which never emits other CSI/OSC codes.
+ */
+export function tokenize(s: string): WidthToken[] {
+	const tokens: WidthToken[] = [];
+	let pendingAnsi = "";
+	let i = 0;
+	while (i < s.length) {
+		if (s[i] === "\x1b") {
+			const end = s.indexOf("m", i);
+			if (end !== -1) {
+				pendingAnsi += s.slice(i, end + 1);
+				i = end + 1;
+				continue;
+			}
+			// Bare ESC with no "m" terminator anywhere after it — not a valid
+			// SGR sequence. Treat it as a zero-width literal char so `i` always
+			// advances (otherwise this would loop forever).
+			tokens.push({ ansi: pendingAnsi, text: "", width: 0 });
+			pendingAnsi = "";
+			i++;
+			continue;
+		}
+		let end = i;
+		while (end < s.length && s[end] !== "\x1b") end++;
+		for (const { segment } of graphemeSegmenter.segment(s.slice(i, end))) {
+			tokens.push({ ansi: pendingAnsi, text: segment, width: graphemeWidth(segment) });
+			pendingAnsi = "";
+		}
+		i = end;
+	}
+	if (pendingAnsi) tokens.push({ ansi: pendingAnsi, text: "", width: 0 });
+	return tokens;
+}
+
+/** Visible terminal-column width of an ANSI-encoded string. */
+export function visibleWidth(s: string): number {
+	let total = 0;
+	for (const tok of tokenize(s)) total += tok.width;
+	return total;
+}

package/src/render/shared.ts

@@ -1,6 +1,7 @@
 /** Shared constants, config, and helpers for diff rendering. */
 
 import * as Ansi from "../ansi/index.js";
+import { tokenize } from "../ansi/width.js";
 import type { ParsedDiff } from "../core/diff.js";
 
 // ---------------------------------------------------------------------------
@@ -42,61 +43,55 @@ export function adaptiveWrapRows(w: number): number {
 	return MAX_WRAP_ROWS_NARROW;
 }
 
-/** Wrap ANSI-encoded string into rows of `w` visible chars. */
+/** Wrap ANSI-encoded string into rows of `w` visible columns. Grapheme + east-asian-width aware. */
 export function wrapAnsi(s: string, w: number, maxRows = adaptiveWrapRows(w), fillBg = "", rst = Ansi.RST): string[] {
 	if (w <= 0) return [""];
-	const plain = Ansi.strip(s);
-	if (plain.length <= w) {
-		const pad = w - plain.length;
+	const tokens = tokenize(s);
+	const total = tokens.reduce((sum, t) => sum + t.width, 0);
+	if (total <= w) {
+		const pad = w - total;
 		return pad > 0 ? [s + fillBg + " ".repeat(pad) + (fillBg ? rst : "")] : [s];
 	}
 
 	const rows: string[] = [];
-	let row = "", vis = 0, i = 0;
+	let row = "", vis = 0, ti = 0;
 	let onLastRow = false;
 	let effW = w;
 
-	while (i < s.length) {
+	while (ti < tokens.length) {
 		if (!onLastRow && rows.length >= maxRows - 1) {
 			onLastRow = true;
 			effW = w > 2 ? w - 1 : w;
 		}
-		if (s[i] === "\x1b") {
-			const end = s.indexOf("m", i);
-			if (end !== -1) {
-				row += s.slice(i, end + 1);
-				i = end + 1;
-				continue;
-			}
+		const tok = tokens[ti]!;
+		// A grapheme cluster is atomic — never split it mid-render. If it's wider
+		// than the row even on its own (only possible when effW < its width,
+		// e.g. a wide emoji in a 1-column row), drop it rather than overflow.
+		if (tok.width > effW) {
+			ti++;
+			continue;
 		}
-		if (vis >= effW) {
+		if (vis + tok.width > effW) {
 			if (onLastRow) {
-				let hasMore = false;
-				for (let j = i; j < s.length; j++) {
-					if (s[j] === "\x1b") {
-						const e2 = s.indexOf("m", j);
-						if (e2 !== -1) { j = e2; continue; }
-					}
-					hasMore = true;
-					break;
-				}
+				const hasMore = ti < tokens.length;
 				if (hasMore && w > 2) row += `${rst}${Ansi.FG_DIM}›${rst}`;
 				else row += fillBg + " ".repeat(Math.max(0, w - vis)) + rst;
 				rows.push(row);
 				return rows;
 			}
 			const state = Ansi.ansiState(row);
-			rows.push(row + rst);
+			rows.push(row + fillBg + " ".repeat(Math.max(0, w - vis)) + rst);
 			row = state + fillBg;
 			vis = 0;
 			if (rows.length >= maxRows - 1) {
 				onLastRow = true;
 				effW = w > 2 ? w - 1 : w;
 			}
+			continue;
 		}
-		row += s[i];
-		vis++;
-		i++;
+		row += tok.ansi + tok.text;
+		vis += tok.width;
+		ti++;
 	}
 	if (row.length > 0 || rows.length === 0) {
 		rows.push(row + fillBg + " ".repeat(Math.max(0, w - vis)) + rst);
@@ -112,7 +107,9 @@ export function shouldUseSplit(diff: ParsedDiff, tw: number, maxRows = MAX_PREVI
 	const nw = Math.max(2, String(Math.max(...diff.lines.map((l) => l.oldNum ?? l.newNum ?? 0), 0)).length);
 	const half = Math.floor((tw - 1) / 2);
 	const gw = nw + 5;
-	const cw = Math.max(12, half - gw);
+	// Keep in sync with renderSplitLines' cw formula so this heuristic agrees
+	// with what the renderer will actually use.
+	const cw = Math.max(1, half - gw);
 	if (cw < cfg.diffSplitMinCodeWidth) return false;
 
 	const vis = diff.lines.slice(0, maxRows);

package/src/render/split.ts

@@ -69,7 +69,9 @@ export async function renderSplitLines(
 	const half = Math.floor((width - 1) / 2);
 	const nw = Math.max(2, String(Math.max(...diff.lines.map((l) => l.oldNum ?? l.newNum ?? 0), 0)).length);
 	const gw = nw + 5;
-	const cw = Math.max(12, half - gw);
+	// Never let the content column exceed what's actually available — on very
+	// narrow terminals the gutter alone can approach `half`.
+	const cw = Math.max(1, half - gw);
 	const canHL = diff.chars <= MAX_HL_CHARS && vis.length * 2 <= MAX_RENDER_LINES * 2;
 
 	const leftSrc: string[] = [], rightSrc: string[] = [];

package/src/render/unified.ts

@@ -48,7 +48,9 @@ export async function renderUnifiedLines(
 	const vis = diff.lines.slice(0, max);
 	const nw = Math.max(2, String(Math.max(...vis.map((l) => l.oldNum ?? l.newNum ?? 0), 0)).length);
 	const gw = nw + 5;
-	const cw = Math.max(20, width - gw);
+	// Never let the content column exceed what's actually available — on very
+	// narrow terminals the gutter alone can approach `width`.
+	const cw = Math.max(1, width - gw);
 	const canHL = diff.chars <= MAX_HL_CHARS && vis.length <= MAX_RENDER_LINES;
 	const rst = dbg.rst;
 	const bgBase = dbg.bgBase;