@effect-tui/core 0.1.0 → 0.1.4

package/src/layout/axis-helpers.ts

@@ -0,0 +1,33 @@
+// axis-helpers.ts — Utility functions for axis-aware layout calculations
+// Reduces repeated `axis === "vertical" ? size.h : size.w` patterns
+
+import type { Axis, Size, Rect } from "../types.js"
+
+// Re-export for backwards compatibility
+export type { Axis, Size, Rect } from "../types.js"
+
+/** Get the main-axis size (height for vertical, width for horizontal) */
+export const mainSize = (axis: Axis, s: Size): number => (axis === "vertical" ? s.h : s.w)
+
+/** Get the cross-axis size (width for vertical, height for horizontal) */
+export const crossSize = (axis: Axis, s: Size): number => (axis === "vertical" ? s.w : s.h)
+
+/** Get the main-axis position (y for vertical, x for horizontal) */
+export const mainPos = (axis: Axis, r: Rect): number => (axis === "vertical" ? r.y : r.x)
+
+/** Get the cross-axis position (x for vertical, y for horizontal) */
+export const crossPos = (axis: Axis, r: Rect): number => (axis === "vertical" ? r.x : r.y)
+
+/** Get the main-axis dimension (height for vertical, width for horizontal) */
+export const mainDim = (axis: Axis, r: Rect): number => (axis === "vertical" ? r.h : r.w)
+
+/** Get the cross-axis dimension (width for vertical, height for horizontal) */
+export const crossDim = (axis: Axis, r: Rect): number => (axis === "vertical" ? r.w : r.h)
+
+/** Create a rect from main/cross coordinates and dimensions */
+export const makeRect = (axis: Axis, mainP: number, crossP: number, mainD: number, crossD: number): Rect =>
+	axis === "vertical" ? { x: crossP, y: mainP, w: crossD, h: mainD } : { x: mainP, y: crossP, w: mainD, h: crossD }
+
+/** Split max constraints into [maxMain, maxCross] */
+export const splitConstraints = (axis: Axis, maxW: number, maxH: number): [number, number] =>
+	axis === "vertical" ? [maxH, maxW] : [maxW, maxH]

package/src/output.ts

@@ -0,0 +1,175 @@
+/**
+ * Output helpers for rendering CellBuffer to ANSI strings.
+ * Provides diffing, row emission, and buffer-to-string conversion.
+ */
+
+import type { CellBuffer } from "./render/buffer.js"
+import type { Palette } from "./render/palette.js"
+
+/**
+ * Emit a row of cells as an ANSI string with run-length SGR encoding.
+ * Handles wide characters (cellWidth=0 continuations) and style changes.
+ *
+ * @param buffer - The cell buffer to read from
+ * @param palette - Palette for SGR code generation
+ * @param y - Row index
+ * @param width - Terminal width
+ * @param startX - Start column (default 0)
+ * @param endX - End column exclusive (default width)
+ * @returns ANSI string for the row (no cursor positioning, no trailing reset)
+ */
+export function emitRow(
+	buffer: CellBuffer,
+	palette: Palette,
+	y: number,
+	width: number,
+	startX = 0,
+	endX = width,
+): { output: string; lastStyle: number } {
+	const row = y * width
+	let output = ""
+	let visualCol = startX
+	let currentStyle = -1
+
+	for (let x = startX; x < endX && visualCol < width; x++) {
+		const idx = row + x
+		const glyph = buffer.g[idx]
+		const styleId = buffer.s[idx]
+		const cellWidth = buffer.cw[idx] || 1
+
+		// Skip continuation cells (wide char second half)
+		if (cellWidth === 0) continue
+
+		// Stop if this char would overflow
+		if (visualCol + cellWidth > width) break
+
+		// Emit SGR only when style changes (run-length encoding)
+		if (styleId !== currentStyle) {
+			output += palette.sgr(styleId)
+			currentStyle = styleId
+		}
+
+		output += glyph === 32 ? " " : String.fromCodePoint(glyph)
+		visualCol += cellWidth
+	}
+
+	return { output, lastStyle: currentStyle }
+}
+
+/**
+ * Emit a row and reset style if needed.
+ */
+export function emitRowWithReset(
+	buffer: CellBuffer,
+	palette: Palette,
+	y: number,
+	width: number,
+	startX = 0,
+	endX = width,
+): string {
+	const { output, lastStyle } = emitRow(buffer, palette, y, width, startX, endX)
+	return lastStyle !== 0 ? output + palette.sgr(0) : output
+}
+
+/**
+ * Check if a row changed between two buffers.
+ */
+export function rowChanged(prev: CellBuffer, next: CellBuffer, y: number, width: number): boolean {
+	const row = y * width
+	for (let x = 0; x < width; x++) {
+		const idx = row + x
+		if (next.g[idx] !== prev.g[idx] || next.s[idx] !== prev.s[idx] || next.cw[idx] !== prev.cw[idx]) {
+			return true
+		}
+	}
+	return false
+}
+
+/**
+ * Find the rightmost column with content (non-space or styled).
+ * Returns 0 if row is empty.
+ */
+export function rowContentWidth(buffer: CellBuffer, y: number, width: number): number {
+	const row = y * width
+	for (let x = width - 1; x >= 0; x--) {
+		const idx = row + x
+		// Skip continuation cells
+		if (buffer.cw[idx] === 0) continue
+		// Found content if non-space or has style
+		if (buffer.g[idx] !== 32 || buffer.s[idx] !== 0) {
+			return x + buffer.cw[idx] // account for wide char width
+		}
+	}
+	return 0
+}
+
+/**
+ * Find the change window between two buffers for a row.
+ * Returns the leftmost and rightmost changed columns, or null if no changes.
+ */
+export function findChangeWindow(
+	prev: CellBuffer,
+	next: CellBuffer,
+	y: number,
+	width: number,
+): { left: number; right: number } | null {
+	const row = y * width
+	let left = 0
+	let right = width - 1
+
+	// Find leftmost change
+	while (left <= right) {
+		const i = row + left
+		if (next.g[i] !== prev.g[i] || next.s[i] !== prev.s[i] || next.cw[i] !== prev.cw[i]) {
+			break
+		}
+		left++
+	}
+
+	// No changes found
+	if (left > right) return null
+
+	// Find rightmost change
+	while (right >= left) {
+		const i = row + right
+		if (next.g[i] !== prev.g[i] || next.s[i] !== prev.s[i] || next.cw[i] !== prev.cw[i]) {
+			break
+		}
+		right--
+	}
+
+	return { left, right }
+}
+
+/**
+ * Find the last row with content in a buffer.
+ */
+export function contentHeight(buffer: CellBuffer, width: number, height: number): number {
+	for (let y = height - 1; y >= 0; y--) {
+		const row = y * width
+		for (let x = 0; x < width; x++) {
+			const glyph = buffer.g[row + x]
+			const style = buffer.s[row + x]
+			if (glyph !== 32 || style !== 0) return y + 1
+		}
+	}
+	return 0
+}
+
+/**
+ * Convert a CellBuffer to a complete ANSI string (for static output).
+ * Each row is emitted with proper styling and joined with newlines.
+ *
+ * @param buffer - The cell buffer to convert
+ * @param palette - Palette for SGR code generation
+ * @param width - Buffer width
+ * @param height - Number of rows to emit
+ * @returns ANSI string with newlines between rows
+ */
+export function bufferToString(buffer: CellBuffer, palette: Palette, width: number, height: number): string {
+	const lines: string[] = []
+	for (let y = 0; y < height; y++) {
+		lines.push(emitRowWithReset(buffer, palette, y, width))
+	}
+	return lines.join("\n")
+}

package/src/render/buffer.ts

@@ -1,5 +1,7 @@
 /* buffer.ts — 2D cell buffer with drawing, clipping, and offsets */
 
+import { iterateGraphemeCells } from "./graphemes.js"
+
 export type Wcwidth = (cp: number) => 0 | 1 | 2
 
 // basic ASCII/Latin fallback; plug a real wcwidth for CJK/emoji later
@@ -9,192 +11,167 @@ type ClipRect = { x: number; y: number; w: number; h: number }
 
 // Represents a single frame of cells (glyph + style + cell width)
 export class CellBuffer {
-  readonly w: number
-  readonly h: number
-
-  // cell data
-  readonly g: Uint32Array // glyph code points
-  readonly s: Uint32Array // style ids
-  readonly cw: Uint8Array // cell width: 0 (continuation), 1, 2
-
-  private wcwidth: Wcwidth
-  private clip: ClipRect
-  private clipStack: ClipRect[] = []
-  private offX = 0
-  private offY = 0
-  private offStack: { x: number; y: number }[] = []
-
-  constructor(width: number, height: number, wcwidth: Wcwidth = defaultWcwidth) {
-    this.w = Math.max(1, width | 0)
-    this.h = Math.max(1, height | 0)
-    const n = this.w * this.h
-    this.g = new Uint32Array(n)
-    this.s = new Uint32Array(n)
-    this.cw = new Uint8Array(n)
-    this.wcwidth = wcwidth
-    this.clip = { x: 0, y: 0, w: this.w, h: this.h }
-    this.clear(0)
-  }
-
-  /** Clear the buffer to spaces in the given style. */
-  clear(styleId = 0): void {
-    this.g.fill(32)
-    this.s.fill(styleId)
-    this.cw.fill(1)
-  }
-
-  /** Draw a single code point at (x,y). If width=2, marks following cell as continuation. */
-  drawCP(x: number, y: number, cp: number, styleId = 0): void {
-    const ax = x + this.offX
-    const ay = y + this.offY
-    if (ax < 0 || ay < 0 || ax >= this.w || ay >= this.h) return
-    if (ax < this.clip.x || ay < this.clip.y || ax >= this.clip.x + this.clip.w || ay >= this.clip.y + this.clip.h)
-      return
-    const idx = ay * this.w + ax
-    const w = this.wcwidth(cp)
-    this.g[idx] = cp
-    this.s[idx] = styleId
-    this.cw[idx] = w === 0 ? 1 : w // treat nonspacing as width 1 here
-
-    if (w === 2) {
-      // mark the continuation cell
-      if (x + 1 < this.w) {
-        const cidx = idx + 1
-        this.g[cidx] = 0 // not printed
-        this.s[cidx] = styleId
-        this.cw[cidx] = 0 // continuation slot
-      }
-    }
-  }
-
-  /** Draw plain text (no wrapping) clipped to width. Uses Intl.Segmenter if available. */
-  drawText(x: number, y: number, text: string, styleId = 0, maxWidth?: number): void {
-    const ax = x + this.offX
-    const ay = y + this.offY
-    if (ay < 0 || ay >= this.h) return
-    // vertical clip
-    if (ay < this.clip.y || ay >= this.clip.y + this.clip.h) return
-    const limit = Math.min(this.w - ax, maxWidth ?? this.w, this.clip.x + this.clip.w - ax)
-    if (limit <= 0) return
-
-    // iterate graphemes (so emoji / ZWJ don’t split). Fallback: naive code points.
-    // Use Intl.Segmenter if available without importing its types to satisfy TS in Node
-    type GraphemeSegmenter = {
-      segment(input: string): Iterable<{ segment: string }>
-    }
-    const SegCtor: { new (...args: any[]): GraphemeSegmenter } | undefined = (globalThis as any).Intl?.Segmenter
-    const seg: GraphemeSegmenter | null =
-      typeof SegCtor === "function"
-        ? (new (SegCtor as new (...args: any[]) => GraphemeSegmenter)(undefined, {
-            granularity: "grapheme",
-          }) as GraphemeSegmenter)
-        : null
+	readonly w: number
+	readonly h: number
+
+	// cell data
+	readonly g: Uint32Array // glyph code points
+	readonly s: Uint32Array // style ids
+	readonly cw: Uint8Array // cell width: 0 (continuation), 1, 2
+
+	private wcwidth: Wcwidth
+	private clip: ClipRect
+	private clipStack: ClipRect[] = []
+	private offX = 0
+	private offY = 0
+	private offStack: { x: number; y: number }[] = []
+
+	constructor(width: number, height: number, wcwidth: Wcwidth = defaultWcwidth) {
+		this.w = Math.max(1, width | 0)
+		this.h = Math.max(1, height | 0)
+		const n = this.w * this.h
+		this.g = new Uint32Array(n)
+		this.s = new Uint32Array(n)
+		this.cw = new Uint8Array(n)
+		this.wcwidth = wcwidth
+		this.clip = { x: 0, y: 0, w: this.w, h: this.h }
+		this.clear(0)
+	}
+
+	/** Clear the buffer to spaces in the given style. */
+	clear(styleId = 0): void {
+		this.g.fill(32)
+		this.s.fill(styleId)
+		this.cw.fill(1)
+	}
+
+	/** Draw a single code point at (x,y). If width=2, marks following cell as continuation. */
+	drawCP(x: number, y: number, cp: number, styleId = 0): void {
+		const ax = x + this.offX
+		const ay = y + this.offY
+		if (ax < 0 || ay < 0 || ax >= this.w || ay >= this.h) return
+		if (ax < this.clip.x || ay < this.clip.y || ax >= this.clip.x + this.clip.w || ay >= this.clip.y + this.clip.h)
+			return
+		const idx = ay * this.w + ax
+		const w = this.wcwidth(cp)
+		this.g[idx] = cp
+		this.s[idx] = styleId
+		this.cw[idx] = w === 0 ? 1 : w // treat nonspacing as width 1 here
+
+		if (w === 2) {
+			// mark the continuation cell
+			if (x + 1 < this.w) {
+				const cidx = idx + 1
+				this.g[cidx] = 0 // not printed
+				this.s[cidx] = styleId
+				this.cw[cidx] = 0 // continuation slot
+			}
+		}
+	}
+
+	/** Draw plain text (no wrapping) clipped to width. Uses Intl.Segmenter if available. */
+	drawText(x: number, y: number, text: string, styleId = 0, maxWidth?: number): void {
+		const ax = x + this.offX
+		const ay = y + this.offY
+		if (ay < 0 || ay >= this.h) return
+		// vertical clip
+		if (ay < this.clip.y || ay >= this.clip.y + this.clip.h) return
+		const limit = Math.min(this.w - ax, maxWidth ?? this.w, this.clip.x + this.clip.w - ax)
+		if (limit <= 0) return
 
     let col = 0
-    if (seg) {
-      for (const { segment } of seg.segment(text)) {
-        const cp = segment.codePointAt(0) ?? 32 // first code point of grapheme
-        const w = this.wcwidth(cp) || 1 // nonspacing combining: treat as 1 (simple path)
-        if (col + w > limit) break
-        this.drawCP(x + col, y, cp, styleId)
-        col += w
-      }
-    } else {
-      for (const ch of text) {
-        const cp = ch.codePointAt(0) ?? 32
-        const w = this.wcwidth(cp) || 1
-        if (col + w > limit) break
-        this.drawCP(x + col, y, cp, styleId)
-        col += w
-      }
+    for (const { cp, width } of iterateGraphemeCells(text, this.wcwidth)) {
+      if (col + width > limit) break
+      this.drawCP(x + col, y, cp, styleId)
+      col += width
     }
 
-    // pad remainder within the visible limit with spaces in the same style (erases leftovers)
-    for (; col < limit; col++) {
-      this.drawCP(x + col, y, 32, styleId)
-    }
-  }
-
-  /** Fill a rectangle with a code point + style. */
-  fillRect(x: number, y: number, w: number, h: number, cp = 32, styleId = 0): void {
-    const ax = x + this.offX
-    const ay = y + this.offY
-    let x0 = Math.max(0, ax | 0),
-      y0 = Math.max(0, ay | 0)
-    let x1 = Math.min(this.w, x0 + Math.max(0, w | 0))
-    let y1 = Math.min(this.h, y0 + Math.max(0, h | 0))
-    // intersect with current clip
-    x0 = Math.max(x0, this.clip.x)
-    y0 = Math.max(y0, this.clip.y)
-    x1 = Math.min(x1, this.clip.x + this.clip.w)
-    y1 = Math.min(y1, this.clip.y + this.clip.h)
-    const width = x1 - x0
-    if (width <= 0 || y1 <= y0) return
-    for (let yy = y0; yy < y1; yy++) {
-      const base = yy * this.w + x0
-      this.g.fill(cp, base, base + width)
-      this.s.fill(styleId, base, base + width)
-      this.cw.fill(1, base, base + width)
-    }
-  }
-
-  // Clipping API
-  pushClip(x: number, y: number, w: number, h: number): void {
-    const nx = Math.max(0, x | 0)
-    const ny = Math.max(0, y | 0)
-    const nw = Math.max(0, w | 0)
-    const nh = Math.max(0, h | 0)
-    const cur = this.clip
-    const ix = Math.max(cur.x, nx)
-    const iy = Math.max(cur.y, ny)
-    const ix2 = Math.min(cur.x + cur.w, nx + nw)
-    const iy2 = Math.min(cur.y + cur.h, ny + nh)
-    this.clipStack.push(cur)
-    this.clip = { x: ix, y: iy, w: Math.max(0, ix2 - ix), h: Math.max(0, iy2 - iy) }
-  }
-
-  popClip(): void {
-    if (this.clipStack.length > 0) {
-      const prev = this.clipStack.pop() as ClipRect
-      this.clip = prev
-    } else {
-      this.clip = { x: 0, y: 0, w: this.w, h: this.h }
-    }
-  }
-
-  withClip(x: number, y: number, w: number, h: number, fn: () => void): void {
-    this.pushClip(x, y, w, h)
-    try {
-      fn()
-    } finally {
-      this.popClip()
-    }
-  }
-
-  // Translation API
-  pushOffset(dx: number, dy: number): void {
-    this.offStack.push({ x: this.offX, y: this.offY })
-    this.offX += dx | 0
-    this.offY += dy | 0
-  }
-
-  popOffset(): void {
-    if (this.offStack.length > 0) {
-      const prev = this.offStack.pop() as { x: number; y: number }
-      this.offX = prev.x
-      this.offY = prev.y
-    } else {
-      this.offX = 0
-      this.offY = 0
-    }
-  }
-
-  withOffset(dx: number, dy: number, fn: () => void): void {
-    this.pushOffset(dx, dy)
-    try {
-      fn()
-    } finally {
-      this.popOffset()
-    }
-  }
+		// pad remainder within the visible limit with spaces in the same style (erases leftovers)
+		for (; col < limit; col++) {
+			this.drawCP(x + col, y, 32, styleId)
+		}
+	}
+
+	/** Fill a rectangle with a code point + style. */
+	fillRect(x: number, y: number, w: number, h: number, cp = 32, styleId = 0): void {
+		const ax = x + this.offX
+		const ay = y + this.offY
+		let x0 = Math.max(0, ax | 0),
+			y0 = Math.max(0, ay | 0)
+		let x1 = Math.min(this.w, x0 + Math.max(0, w | 0))
+		let y1 = Math.min(this.h, y0 + Math.max(0, h | 0))
+		// intersect with current clip
+		x0 = Math.max(x0, this.clip.x)
+		y0 = Math.max(y0, this.clip.y)
+		x1 = Math.min(x1, this.clip.x + this.clip.w)
+		y1 = Math.min(y1, this.clip.y + this.clip.h)
+		const width = x1 - x0
+		if (width <= 0 || y1 <= y0) return
+		for (let yy = y0; yy < y1; yy++) {
+			const base = yy * this.w + x0
+			this.g.fill(cp, base, base + width)
+			this.s.fill(styleId, base, base + width)
+			this.cw.fill(1, base, base + width)
+		}
+	}
+
+	// Clipping API
+	pushClip(x: number, y: number, w: number, h: number): void {
+		const nx = Math.max(0, x | 0)
+		const ny = Math.max(0, y | 0)
+		const nw = Math.max(0, w | 0)
+		const nh = Math.max(0, h | 0)
+		const cur = this.clip
+		const ix = Math.max(cur.x, nx)
+		const iy = Math.max(cur.y, ny)
+		const ix2 = Math.min(cur.x + cur.w, nx + nw)
+		const iy2 = Math.min(cur.y + cur.h, ny + nh)
+		this.clipStack.push(cur)
+		this.clip = { x: ix, y: iy, w: Math.max(0, ix2 - ix), h: Math.max(0, iy2 - iy) }
+	}
+
+	popClip(): void {
+		if (this.clipStack.length > 0) {
+			const prev = this.clipStack.pop() as ClipRect
+			this.clip = prev
+		} else {
+			this.clip = { x: 0, y: 0, w: this.w, h: this.h }
+		}
+	}
+
+	withClip(x: number, y: number, w: number, h: number, fn: () => void): void {
+		this.pushClip(x, y, w, h)
+		try {
+			fn()
+		} finally {
+			this.popClip()
+		}
+	}
+
+	// Translation API
+	pushOffset(dx: number, dy: number): void {
+		this.offStack.push({ x: this.offX, y: this.offY })
+		this.offX += dx | 0
+		this.offY += dy | 0
+	}
+
+	popOffset(): void {
+		if (this.offStack.length > 0) {
+			const prev = this.offStack.pop() as { x: number; y: number }
+			this.offX = prev.x
+			this.offY = prev.y
+		} else {
+			this.offX = 0
+			this.offY = 0
+		}
+	}
+
+	withOffset(dx: number, dy: number, fn: () => void): void {
+		this.pushOffset(dx, dy)
+		try {
+			fn()
+		} finally {
+			this.popOffset()
+		}
+	}
 }

package/src/render/graphemes.ts

@@ -0,0 +1,34 @@
+import { getGraphemeSegmenter } from "./segmenter.js"
+import type { Wcwidth } from "./buffer.js"
+
+/**
+ * Iterate grapheme clusters using Intl.Segmenter when available.
+ * Falls back to code point iteration when not supported.
+ */
+export function* iterateGraphemes(text: string): IterableIterator<string> {
+	const seg = getGraphemeSegmenter()
+	if (seg) {
+		for (const { segment } of seg.segment(text)) {
+			yield segment
+		}
+		return
+	}
+
+	for (const ch of text) {
+		yield ch
+	}
+}
+
+/**
+ * Iterate grapheme clusters and provide their first code point + display width.
+ */
+export function* iterateGraphemeCells(
+	text: string,
+	wcwidth: Wcwidth,
+): IterableIterator<{ segment: string; cp: number; width: number }> {
+	for (const segment of iterateGraphemes(text)) {
+		const cp = segment.codePointAt(0) ?? 32
+		const width = wcwidth(cp) || 1
+		yield { segment, cp, width }
+	}
+}

package/src/render/measure.ts

@@ -7,45 +7,21 @@
 
 import type { Wcwidth } from "./buffer.js"
 import { defaultWcwidth } from "./buffer.js"
+import { iterateGraphemes, iterateGraphemeCells } from "./graphemes.js"
 
-type GraphemeSegmenter = {
-  segment(input: string): Iterable<{ segment: string }>
-}
-
-function getGraphemeSegmenter(): GraphemeSegmenter | null {
-  const SegCtor: { new (...args: any[]): GraphemeSegmenter } | undefined = (globalThis as any).Intl?.Segmenter
-  if (typeof SegCtor === "function") {
-    try {
-      return new (SegCtor as new (...args: any[]) => GraphemeSegmenter)(undefined, {
-        granularity: "grapheme",
-      }) as GraphemeSegmenter
-    } catch {
-      // ignore and fall back
-    }
-  }
-  return null
-}
+// Re-export for backwards compatibility
+export { getGraphemeSegmenter, type GraphemeSegmenter } from "./segmenter.js"
 
 /** Split a string into grapheme clusters (ZWJ sequences kept together when supported). */
 export function graphemes(text: string): string[] {
-  const seg = getGraphemeSegmenter()
-  if (seg) {
-    const out: string[] = []
-    for (const { segment } of seg.segment(text)) out.push(segment)
-    return out
-  }
-  // Fallback: iterate code points (may split ZWJ sequences)
-  return Array.from(text)
+  return Array.from(iterateGraphemes(text))
 }
 
 /** Compute display width using wcwidth of the first code point of each grapheme. */
 export function displayWidth(text: string, wc: Wcwidth = defaultWcwidth): number {
   let w = 0
-  const gs = graphemes(text)
-  for (const g of gs) {
-    const cp = g.codePointAt(0) ?? 32
-    const ww = wc(cp) || 1
-    w += ww
+  for (const { width } of iterateGraphemeCells(text, wc)) {
+    w += width
   }
   return w
 }
@@ -60,15 +36,16 @@ export function sliceByWidth(
   wc: Wcwidth = defaultWcwidth,
 ): { text: string; width: number; complete: boolean } {
   if (maxWidth <= 0) return { text: "", width: 0, complete: text.length === 0 }
-  const gs = graphemes(text)
   const out: string[] = []
   let used = 0
-  for (const g of gs) {
-    const cp = g.codePointAt(0) ?? 32
-    const ww = wc(cp) || 1
-    if (used + ww > maxWidth) break
-    out.push(g)
-    used += ww
+  let complete = true
+  for (const { segment, width } of iterateGraphemeCells(text, wc)) {
+    if (used + width > maxWidth) {
+      complete = false
+      break
+    }
+    out.push(segment)
+    used += width
   }
-  return { text: out.join(""), width: used, complete: out.length === gs.length }
+  return { text: out.join(""), width: used, complete }
 }