take4-console 0.15.0

package/src/Screen/controls/Spinner.mts

@@ -0,0 +1,102 @@
+import type { SpinnerProperties, WindowProperties, StyleId } from '../types.mjs';
+import { BUILTIN_TEXT } from '../types.mjs';
+import { Window } from '../Window.mjs';
+import { Size } from '../Size.mjs';
+import { getRegistry } from '../RegistryHolder.mjs';
+
+/** Animation style name → frame sequence. */
+const SPINNER_FRAMES: Record<'braille' | 'dots' | 'line' | 'circle' | 'arrow', string[]> = {
+	braille: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
+	dots:    ['.  ', '.. ', '...', ' ..', '  .', '   '],
+	line:    ['|', '/', '-', '\\'],
+	circle:  ['◐', '◓', '◑', '◒'],
+	arrow:   ['←', '↖', '↑', '↗', '→', '↘', '↓', '↙'],
+};
+
+/** A read-only animated loader indicator. Holds an animation frame index that
+ *  advances manually via step() — typically driven by setInterval() in the
+ *  demo, but any external clock source will do. The glyph is rendered to the
+ *  left of an optional text label. */
+export class Spinner extends Window {
+	private styleName: keyof typeof SPINNER_FRAMES;
+	private frames:    string[];
+	private frame:     number;
+	private running:   boolean;
+	private glyphStyleId: StyleId;
+	private labelStyleId: StyleId;
+
+	/** Creates a Spinner from window properties and optional control-specific properties.
+	 *  When wp.size is omitted, width is auto-computed as max(frameWidth) + (label ? 1 + label.length : 0).
+	 *  Uses the global StyleRegistry set by the Screen constructor. */
+	public constructor(wp: WindowProperties, cp?: SpinnerProperties) {
+		const reg       = getRegistry();
+		const styleName = cp?.style ?? 'braille';
+		const frames    = SPINNER_FRAMES[styleName];
+		const label     = wp.label ?? '';
+		const glyphW    = Math.max(...frames.map(f => [...f].length));
+		const width     = glyphW + (label.length > 0 ? 1 + label.length : 0);
+		const size      = wp.size ?? new Size(Math.max(1, width), 1);
+
+		super({ ...wp, size });
+
+		this.styleName = styleName;
+		this.frames    = frames;
+		this.frame     = ((cp?.frame ?? 0) % frames.length + frames.length) % frames.length;
+		this.running   = cp?.running ?? true;
+
+		this.glyphStyleId = reg.register({ foreground: cp?.color ?? 75, bold: true });
+		this.labelStyleId = reg.getNamed(BUILTIN_TEXT)!;
+	}
+
+	/** Advances the animation by one frame. No-op when running is false. */
+	public step(): void {
+		if (!this.running || this.frames.length === 0) return;
+		this.frame = (this.frame + 1) % this.frames.length;
+	}
+
+	/** Sets the current frame index directly. Wraps into the valid range. */
+	public setFrame(frame: number): void {
+		if (this.frames.length === 0) return;
+		this.frame = ((frame % this.frames.length) + this.frames.length) % this.frames.length;
+	}
+
+	/** Returns the current frame index. */
+	public getFrame(): number {
+		return this.frame;
+	}
+
+	/** Starts or resumes the animation. step() will advance frames again. */
+	public start(): void {
+		this.running = true;
+	}
+
+	/** Pauses the animation. step() becomes a no-op; the current frame stays visible. */
+	public stop(): void {
+		this.running = false;
+	}
+
+	/** Returns whether the spinner is currently animating. */
+	public isRunning(): boolean {
+		return this.running;
+	}
+
+	/** Returns the animation style name. */
+	public getStyleName(): keyof typeof SPINNER_FRAMES {
+		return this.styleName;
+	}
+
+	public override render(): void {
+		this.clear();
+
+		const glyph = this.frames[this.frame] ?? '';
+		this.writeText(glyph, { x: 0, y: 0, style: this.glyphStyleId });
+
+		if (this.label.length > 0) {
+			// Leave one space between glyph and label.
+			const glyphW = Math.max(...this.frames.map(f => [...f].length));
+			this.writeText(' ' + this.label, { x: glyphW, y: 0, style: this.labelStyleId });
+		}
+
+		super.render();
+	}
+}

package/src/Screen/controls/StatusLED.mts

@@ -0,0 +1,65 @@
+import type { StatusLEDProperties, WindowProperties, StyleId } from '../types.mjs';
+import { Window } from '../Window.mjs';
+import { Size } from '../Size.mjs';
+import { getRegistry } from '../RegistryHolder.mjs';
+
+/** Width of the indicator dot and trailing space ('● '). */
+const DOT_WIDTH = 2;
+
+/** A read-only status indicator rendered as a coloured dot with an optional text label.
+ *  The control auto-sizes its width to fit the label when size is not provided. */
+export class StatusLED extends Window {
+	private state:  'ok' | 'warn' | 'error' | 'off';
+
+	private offStyleId:   StyleId;
+	private okStyleId:    StyleId;
+	private warnStyleId:  StyleId;
+	private errorStyleId: StyleId;
+	private textStyleId:  StyleId;
+
+	/** Creates a StatusLED from window properties and optional control-specific properties.
+	 *  When wp.size is omitted, width is auto-computed as 2 + label.length.
+	 *  Uses the global StyleRegistry set by the Screen constructor. */
+	public constructor(wp: WindowProperties, cp?: StatusLEDProperties) {
+		const reg   = getRegistry();
+		const label = wp.label ?? '';
+		const size  = wp.size ?? new Size(DOT_WIDTH + label.length, 1);
+
+		super({ ...wp, size });
+
+		this.state = cp?.state ?? 'off';
+
+		this.offStyleId   = reg.register({ foreground: 240 });
+		this.okStyleId    = reg.register({ foreground: 76  });
+		this.warnStyleId  = reg.register({ foreground: 226 });
+		this.errorStyleId = reg.register({ foreground: 196 });
+		this.textStyleId  = reg.register({ foreground: 252 });
+	}
+
+	/** Sets the current LED state. Call render() afterwards to update the display. */
+	public setState(state: 'ok' | 'warn' | 'error' | 'off'): void {
+		this.state = state;
+	}
+
+	/** Returns the current LED state. */
+	public getState(): 'ok' | 'warn' | 'error' | 'off' {
+		return this.state;
+	}
+
+	public override render(): void {
+		this.clear();
+
+		const dotStyle = this.state === 'ok'    ? this.okStyleId
+		               : this.state === 'warn'  ? this.warnStyleId
+		               : this.state === 'error' ? this.errorStyleId
+		               : this.offStyleId;
+
+		this.writeText('●', { x: 0, y: 0, style: dotStyle });
+
+		if (this.label.length > 0) {
+			this.writeText(' ' + this.label, { x: 1, y: 0, style: this.textStyleId });
+		}
+
+		super.render();
+	}
+}

package/src/Screen/controls/Tabs.mts

@@ -0,0 +1,140 @@
+import type { TabsProperties, WindowProperties, StyleId } from '../types.mjs';
+import { Window } from '../Window.mjs';
+import { getRegistry } from '../RegistryHolder.mjs';
+
+/** A tabbed container. Renders a header row with tab titles and shows only the
+ *  children associated with the active tab index. Other children added via the
+ *  regular addChild() are treated as "pinned" and stay visible regardless of
+ *  which tab is active.
+ *
+ *  Keyboard: ← / → cycle tabs while focused. Tab / Shift-Tab remain reserved
+ *  for the WindowManager focus cycle, so they are never intercepted here. */
+export class Tabs extends Window {
+	private titles: string[];
+	private activeIndex: number;
+	private onChange?: (index: number, title: string) => void;
+	/** Maps each tagged child to its tab index. Untagged children are always visible. */
+	private childTab: Map<Window, number>;
+	private activeTextStyleId: StyleId;
+	private separatorStyleId: StyleId;
+
+	/** Creates a Tabs control from window properties and optional control-specific properties.
+	 *  Uses the global StyleRegistry set by the Screen constructor. */
+	public constructor(wp: WindowProperties, cp?: TabsProperties) {
+		super({
+			...wp,
+			defaultBorder: { top: true, right: true, bottom: true, left: true, style: 'single' },
+		});
+
+		this.titles      = cp?.titles ?? [];
+		this.activeIndex = Math.max(0, Math.min(this.titles.length - 1, cp?.activeIndex ?? 0));
+		this.onChange    = cp?.onChange;
+		this.childTab    = new Map();
+
+		// Active tab: inverse highlight; brighter when focused (uses Window.focusedStyleId).
+		const reg = getRegistry();
+		this.activeTextStyleId = reg.register({ background: 238, foreground: 255, bold: true });
+		this.separatorStyleId  = reg.register({ foreground: 240 });
+	}
+
+	/** Adds a child window and associates it with the given tab index. Children
+	 *  added this way are only rendered while their tab is active. */
+	public addChildToTab(tabIndex: number, child: Window): void {
+		this.addChild(child);
+		this.childTab.set(child, tabIndex);
+	}
+
+	/** Replaces the tab titles. Clamps activeIndex into the new range. */
+	public setTitles(titles: string[]): void {
+		this.titles      = titles;
+		this.activeIndex = Math.max(0, Math.min(titles.length - 1, this.activeIndex));
+	}
+
+	/** Returns the current tab titles. */
+	public getTitles(): string[] {
+		return this.titles;
+	}
+
+	/** Sets the active tab index. Clamped to the valid range. Fires onChange if it differs. */
+	public setActiveIndex(index: number): void {
+		if (this.titles.length === 0) {
+			this.activeIndex = 0;
+			return;
+		}
+		const clamped = Math.max(0, Math.min(this.titles.length - 1, index));
+		if (clamped !== this.activeIndex) {
+			this.activeIndex = clamped;
+			this.onChange?.(clamped, this.titles[clamped]);
+		}
+	}
+
+	/** Returns the currently active tab index. */
+	public getActiveIndex(): number {
+		return this.activeIndex;
+	}
+
+	/** Processes a key press; Left/Right arrows cycle through tabs (no wrap-around). */
+	public handleKey(key: string): void {
+		if (this.disabled || this.titles.length === 0) return;
+		if (key === '\x1b[D') { // Left arrow
+			this.setActiveIndex(this.activeIndex - 1);
+		} else if (key === '\x1b[C') { // Right arrow
+			this.setActiveIndex(this.activeIndex + 1);
+		}
+	}
+
+	/** Rebuilds the tabs: draws header row, composites only the active tab's children.
+	 *  Note: content is NOT cleared on each render, so user-written decorations (e.g. sparkline
+	 *  labels placed via writeText) survive across frames. The header row is fully overwritten. */
+	public override render(): void {
+
+		this.drawHeader();
+
+		// Temporarily restrict children to those visible in the active tab.
+		const original = this.children;
+		this.children = original.filter(c => {
+			const tab = this.childTab.get(c);
+			return tab === undefined || tab === this.activeIndex;
+		});
+		try {
+			super.render();
+		} finally {
+			this.children = original;
+		}
+	}
+
+	/** Writes the header row (tab titles + separators) into content at y=0. The full
+	 *  width of the row is overwritten so that title changes never leave stale glyphs. */
+	private drawHeader(): void {
+		const { width } = this.getInnerSize();
+		if (width < 1) return;
+
+		// Blank the full header row first so stale cells from previous renders disappear.
+		this.writeText(' '.repeat(width), { x: 0, y: 0 });
+
+		if (this.titles.length === 0) return;
+
+		let x = 1; // leading space so the first title does not touch the border
+		for (let i = 0; i < this.titles.length; i++) {
+			if (x >= width) break;
+
+			const title    = this.titles[i];
+			const padded   = ` ${title} `;
+			const isActive = i === this.activeIndex;
+			const style: StyleId = this.disabled
+				? this.disabledStyleId
+				: isActive
+					? (this.focused ? this.focusedStyleId : this.activeTextStyleId)
+					: this.normalStyleId;
+
+			const visible = padded.slice(0, width - x);
+			this.writeText(visible, { x, y: 0, style });
+			x += visible.length;
+
+			if (i < this.titles.length - 1 && x < width) {
+				this.writeText('│', { x, y: 0, style: this.separatorStyleId });
+				x++;
+			}
+		}
+	}
+}

package/src/Screen/controls/TextArea.mts

@@ -0,0 +1,194 @@
+import type { TextAreaProperties, WindowProperties, StyleId } from '../types.mjs';
+import { BUILTIN_TEXT_PLACEHOLDER, BUILTIN_CURSOR } from '../types.mjs';
+import { Window } from '../Window.mjs';
+import { getRegistry } from '../RegistryHolder.mjs';
+
+/** A multi-line text-input widget with 2-D cursor, scrolling, and placeholder support.
+ *  Call handleKey() to feed raw terminal key strings from your input loop. */
+export class TextArea extends Window {
+	private lines: string[];
+	private cursor: { x: number; y: number };
+	private scrollX: number;
+	private scrollY: number;
+	private placeholder: string;
+	private placeholderStyleId: StyleId;
+	private cursorStyleId: StyleId;
+
+	/** Creates a TextArea from window properties and optional control-specific properties.
+	 *  Uses the global StyleRegistry set by the Screen constructor. */
+	public constructor(wp: WindowProperties, cp?: TextAreaProperties) {
+		super({
+			...wp,
+			defaultBorder: { top: true, right: true, bottom: true, left: true, style: 'single' },
+		});
+
+		this.lines       = (cp?.value ?? '').split('\n');
+		this.placeholder = cp?.placeholder ?? '';
+		this.scrollX     = 0;
+		this.scrollY     = 0;
+
+		const rawCursor = cp?.cursor ?? { x: 0, y: 0 };
+		this.cursor = {
+			y: Math.max(0, Math.min(rawCursor.y, this.lines.length - 1)),
+			x: 0,
+		};
+		this.cursor.x = Math.max(0, Math.min(rawCursor.x, this.lines[this.cursor.y].length));
+
+		const reg = getRegistry();
+		this.placeholderStyleId = reg.getNamed(BUILTIN_TEXT_PLACEHOLDER)!;
+		this.cursorStyleId      = reg.getNamed(BUILTIN_CURSOR)!;
+
+		this.clampScroll();
+	}
+
+	/** Replaces the current value; cursor and scroll are clamped to fit. */
+	public setValue(text: string): void {
+		this.lines  = text.split('\n');
+		this.cursor.y = Math.min(this.cursor.y, this.lines.length - 1);
+		this.cursor.x = Math.min(this.cursor.x, this.lines[this.cursor.y].length);
+		this.clampScroll();
+	}
+
+	/** Returns the current text value (lines joined with '\n'). */
+	public getValue(): string {
+		return this.lines.join('\n');
+	}
+
+	/** Sets the cursor to the given position (clamped to valid range). */
+	public setCursor(pos: { x: number; y: number }): void {
+		this.cursor.y = Math.max(0, Math.min(pos.y, this.lines.length - 1));
+		this.cursor.x = Math.max(0, Math.min(pos.x, this.lines[this.cursor.y].length));
+		this.clampScroll();
+	}
+
+	/** Returns a copy of the current cursor position. */
+	public getCursor(): { x: number; y: number } {
+		return { ...this.cursor };
+	}
+
+	/** Processes a key string from the terminal input loop and updates value/cursor.
+	 *  Supported special keys: backspace (\x7f), delete (\x1b[3~), arrow keys (\x1b[A/B/C/D),
+	 *  home (\x1b[H), end (\x1b[F), enter (\r or \n).
+	 *  Human-readable aliases: 'backspace', 'delete', 'left', 'right', 'up', 'down', 'home', 'end', 'enter'.
+	 *  Any single printable character is inserted at the cursor. */
+	public handleKey(key: string): void {
+		if (this.disabled) return;
+		const line = this.lines[this.cursor.y];
+		switch (key) {
+			case '\x7f': case '\b': case 'backspace':
+				if (this.cursor.x > 0) {
+					this.lines[this.cursor.y] = line.slice(0, this.cursor.x - 1) + line.slice(this.cursor.x);
+					this.cursor.x--;
+				} else if (this.cursor.y > 0) {
+					const prev = this.lines[this.cursor.y - 1];
+					this.cursor.x = prev.length;
+					this.lines[this.cursor.y - 1] = prev + line;
+					this.lines.splice(this.cursor.y, 1);
+					this.cursor.y--;
+				}
+				break;
+			case '\x1b[3~': case 'delete':
+				if (this.cursor.x < line.length) {
+					this.lines[this.cursor.y] = line.slice(0, this.cursor.x) + line.slice(this.cursor.x + 1);
+				} else if (this.cursor.y < this.lines.length - 1) {
+					this.lines[this.cursor.y] = line + this.lines[this.cursor.y + 1];
+					this.lines.splice(this.cursor.y + 1, 1);
+				}
+				break;
+			case '\r': case '\n': case 'enter':
+				this.lines.splice(this.cursor.y + 1, 0, line.slice(this.cursor.x));
+				this.lines[this.cursor.y] = line.slice(0, this.cursor.x);
+				this.cursor.y++;
+				this.cursor.x = 0;
+				break;
+			case '\x1b[D': case 'left':
+				if (this.cursor.x > 0) {
+					this.cursor.x--;
+				} else if (this.cursor.y > 0) {
+					this.cursor.y--;
+					this.cursor.x = this.lines[this.cursor.y].length;
+				}
+				break;
+			case '\x1b[C': case 'right':
+				if (this.cursor.x < line.length) {
+					this.cursor.x++;
+				} else if (this.cursor.y < this.lines.length - 1) {
+					this.cursor.y++;
+					this.cursor.x = 0;
+				}
+				break;
+			case '\x1b[A': case 'up':
+				if (this.cursor.y > 0) {
+					this.cursor.y--;
+					this.cursor.x = Math.min(this.cursor.x, this.lines[this.cursor.y].length);
+				}
+				break;
+			case '\x1b[B': case 'down':
+				if (this.cursor.y < this.lines.length - 1) {
+					this.cursor.y++;
+					this.cursor.x = Math.min(this.cursor.x, this.lines[this.cursor.y].length);
+				}
+				break;
+			case '\x1b[H': case 'home':
+				this.cursor.x = 0;
+				break;
+			case '\x1b[F': case 'end':
+				this.cursor.x = this.lines[this.cursor.y].length;
+				break;
+			default:
+				if (key.length === 1 && key >= ' ') {
+					this.lines[this.cursor.y] = line.slice(0, this.cursor.x) + key + line.slice(this.cursor.x);
+					this.cursor.x++;
+				}
+		}
+		this.clampScroll();
+	}
+
+	/** Rebuilds the TextArea: renders visible lines, draws cursor. */
+	public override render(): void {
+		this.clear();
+
+		const { width, height } = this.getInnerSize();
+		const isEmpty           = this.lines.length === 1 && this.lines[0] === '';
+		const phStyle           = this.disabled ? undefined : this.placeholderStyleId;
+
+		if (isEmpty && !this.focused && this.placeholder !== '') {
+			this.writeText(this.placeholder.slice(0, width), { style: phStyle });
+		} else {
+			for (let row = 0; row < height; row++) {
+				const lineIdx = row + this.scrollY;
+				if (lineIdx >= this.lines.length) break;
+				const visible = this.lines[lineIdx].slice(this.scrollX, this.scrollX + width);
+				this.writeText(visible, { x: 0, y: row, style: this.disabled ? undefined : this.normalStyleId });
+			}
+		}
+
+		// Draw cursor when focused.
+		if (this.focused && !this.disabled) {
+			const screenX = this.cursor.x - this.scrollX;
+			const screenY = this.cursor.y - this.scrollY;
+			if (screenX >= 0 && screenX < width && screenY >= 0 && screenY < height) {
+				const cursorChar  = this.lines[this.cursor.y][this.cursor.x] ?? ' ';
+				const cursorStyle = this.registry.merge(this.normalStyleId, this.cursorStyleId);
+				this.writeText(cursorChar, { x: screenX, y: screenY, style: cursorStyle });
+			}
+		}
+
+		super.render();
+	}
+
+	/** Adjusts scrollX/scrollY so the cursor remains within the visible area. */
+	private clampScroll(): void {
+		const { width, height } = this.getInnerSize();
+		if (this.cursor.y < this.scrollY) {
+			this.scrollY = this.cursor.y;
+		} else if (this.cursor.y >= this.scrollY + height) {
+			this.scrollY = this.cursor.y - height + 1;
+		}
+		if (this.cursor.x < this.scrollX) {
+			this.scrollX = this.cursor.x;
+		} else if (this.cursor.x >= this.scrollX + width) {
+			this.scrollX = this.cursor.x - width + 1;
+		}
+	}
+}

package/src/Screen/controls/TextBox.mts

@@ -0,0 +1,139 @@
+import type { TextBoxProperties, WindowProperties, StyleId } from '../types.mjs';
+import { BUILTIN_TEXT_PLACEHOLDER, BUILTIN_CURSOR } from '../types.mjs';
+import { Window } from '../Window.mjs';
+import { getRegistry } from '../RegistryHolder.mjs';
+
+/** A single-line text-input widget with scrolling, cursor display, and placeholder support.
+ *  Wraps content area inside a single-line border (total height 3 by default).
+ *  Call handleKey() to feed raw terminal key strings from your input loop. */
+export class TextBox extends Window {
+	private value: string;
+	private cursor: number;
+	private scrollOffset: number;
+	private placeholder: string;
+	private placeholderStyleId: StyleId;
+	private cursorStyleId: StyleId;
+
+	/** Creates a TextBox from window properties and optional control-specific properties.
+	 *  Uses the global StyleRegistry set by the Screen constructor. */
+	public constructor(wp: WindowProperties, cp?: TextBoxProperties) {
+		super({
+			...wp,
+			defaultBorder: { top: true, right: true, bottom: true, left: true, style: 'single' },
+		});
+
+		this.value       = cp?.value       ?? '';
+		this.placeholder = cp?.placeholder ?? '';
+		this.scrollOffset = 0;
+		this.cursor      = cp?.cursor !== undefined
+			? Math.max(0, Math.min(cp.cursor, this.value.length))
+			: this.value.length;
+
+		const reg = getRegistry();
+		this.placeholderStyleId = reg.getNamed(BUILTIN_TEXT_PLACEHOLDER)!;
+		this.cursorStyleId      = reg.getNamed(BUILTIN_CURSOR)!;
+
+		this.clampScroll();
+	}
+
+	/** Replaces the current value; clamps cursor and scroll to fit. */
+	public setValue(value: string): void {
+		this.value  = value;
+		this.cursor = Math.min(this.cursor, value.length);
+		this.clampScroll();
+	}
+
+	/** Returns the current text value. */
+	public getValue(): string {
+		return this.value;
+	}
+
+	/** Sets the cursor to the given character index (clamped to valid range). */
+	public setCursor(pos: number): void {
+		this.cursor = Math.max(0, Math.min(pos, this.value.length));
+		this.clampScroll();
+	}
+
+	/** Returns the current cursor character index. */
+	public getCursor(): number {
+		return this.cursor;
+	}
+
+	/** Processes a key string from the terminal input loop and updates value/cursor.
+	 *  Supported special keys: backspace (\x7f), delete (\x1b[3~), left (\x1b[D),
+	 *  right (\x1b[C), home (\x1b[H), end (\x1b[F).
+	 *  Human-readable aliases: 'backspace', 'delete', 'left', 'right', 'home', 'end'.
+	 *  Any single printable character is inserted at the cursor position. */
+	public handleKey(key: string): void {
+		if (this.disabled) return;
+		switch (key) {
+			case '\x7f': case '\b': case 'backspace':
+				if (this.cursor > 0) {
+					this.value = this.value.slice(0, this.cursor - 1) + this.value.slice(this.cursor);
+					this.cursor--;
+				}
+				break;
+			case '\x1b[3~': case 'delete':
+				if (this.cursor < this.value.length) {
+					this.value = this.value.slice(0, this.cursor) + this.value.slice(this.cursor + 1);
+				}
+				break;
+			case '\x1b[D': case 'left':
+				if (this.cursor > 0) this.cursor--;
+				break;
+			case '\x1b[C': case 'right':
+				if (this.cursor < this.value.length) this.cursor++;
+				break;
+			case '\x1b[H': case 'home':
+				this.cursor = 0;
+				break;
+			case '\x1b[F': case 'end':
+				this.cursor = this.value.length;
+				break;
+			default:
+				if (key.length === 1 && key >= ' ') {
+					this.value = this.value.slice(0, this.cursor) + key + this.value.slice(this.cursor);
+					this.cursor++;
+				}
+		}
+		this.clampScroll();
+	}
+
+	/** Rebuilds the TextBox: renders text or placeholder, draws cursor. */
+	public override render(): void {
+		this.clear();
+
+		const { width } = this.getInnerSize();
+		const isEmpty   = this.value === '';
+		const phStyle   = this.disabled ? undefined : this.placeholderStyleId;
+
+		if (isEmpty && !this.focused && this.placeholder !== '') {
+			this.writeText(this.placeholder.slice(0, width), { style: phStyle });
+		} else if (!isEmpty) {
+			const visible = this.value.slice(this.scrollOffset, this.scrollOffset + width);
+			this.writeText(visible, { style: this.disabled ? undefined : this.normalStyleId });
+		}
+
+		// Draw cursor when focused.
+		if (this.focused && !this.disabled) {
+			const cursorX = this.cursor - this.scrollOffset;
+			if (cursorX >= 0 && cursorX < width) {
+				const cursorChar  = this.value[this.cursor] ?? ' ';
+				const cursorStyle = this.registry.merge(this.normalStyleId, this.cursorStyleId);
+				this.writeText(cursorChar, { x: cursorX, y: 0, style: cursorStyle });
+			}
+		}
+
+		super.render();
+	}
+
+	/** Adjusts scrollOffset so the cursor stays within the visible window. */
+	private clampScroll(): void {
+		const { width } = this.getInnerSize();
+		if (this.cursor < this.scrollOffset) {
+			this.scrollOffset = this.cursor;
+		} else if (this.cursor >= this.scrollOffset + width) {
+			this.scrollOffset = this.cursor - width + 1;
+		}
+	}
+}