@cel-tui/core 0.1.1 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cel-tui/core",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Core framework engine for cel-tui — primitives, layout, rendering, input",
   "type": "module",
   "module": "src/index.ts",
@@ -34,7 +34,7 @@
     "layout"
   ],
   "dependencies": {
-    "@cel-tui/types": "0.1.0",
+    "@cel-tui/types": "0.2.1",
     "get-east-asian-width": "^1.5.0"
   },
   "peerDependencies": {

package/src/cel.ts

@@ -1,6 +1,6 @@
-import type { Node } from "@cel-tui/types";
+import type { Node, Theme } from "@cel-tui/types";
 import { CellBuffer } from "./cell-buffer.js";
-import { emitBuffer, emitDiff } from "./emitter.js";
+import { emitBuffer, emitDiff, defaultTheme } from "./emitter.js";
 import {
   hitTest,
   findClickHandler,
@@ -16,6 +16,7 @@ import {
   setTextInputCursor,
   getTextInputScroll,
   setTextInputScroll,
+  getTextInputCursorScreenPos,
 } from "./paint.js";
 import {
   insertChar,
@@ -30,6 +31,7 @@ import { visibleWidth } from "./width.js";
 type RenderFn = () => Node | Node[];
 
 let terminal: Terminal | null = null;
+let activeTheme: Theme = defaultTheme;
 let renderFn: RenderFn | null = null;
 let renderScheduled = false;
 let prevBuffer: CellBuffer | null = null;
@@ -105,12 +107,75 @@ function doRender(): void {
 
   // Emit to terminal — differential when possible
   if (prevBuffer) {
-    const output = emitDiff(prevBuffer, currentBuffer);
+    const output = emitDiff(prevBuffer, currentBuffer, activeTheme);
     if (output.length > 0) terminal.write(output);
   } else {
-    const output = emitBuffer(currentBuffer);
+    const output = emitBuffer(currentBuffer, activeTheme);
     terminal.write(output);
   }
+
+  // Position the native terminal cursor at the focused TextInput's cursor.
+  // This gives us a blinking cursor for free (terminal-managed blink).
+  positionTerminalCursor();
+}
+
+/**
+ * After each render, show the native terminal cursor at the focused
+ * TextInput's cursor position (gives blinking for free). When no
+ * TextInput is focused, hide the cursor.
+ */
+function positionTerminalCursor(): void {
+  if (!terminal) return;
+
+  // Find focused TextInput in the layout tree (check stamped state during
+  // render — we need to check controlled focus in the current layouts)
+  const focusedTI = findFocusedTextInputLayout();
+  if (focusedTI) {
+    const props = focusedTI.node
+      .props as import("@cel-tui/types").TextInputProps;
+    const pos = getTextInputCursorScreenPos(props, focusedTI.rect);
+    if (pos) {
+      // CUP: move cursor to (row, col) — 1-indexed
+      terminal.write(`\x1b[${pos.y + 1};${pos.x + 1}H`);
+      terminal.showCursor();
+      return;
+    }
+  }
+  terminal.hideCursor();
+}
+
+/**
+ * Find the focused TextInput in the current layout tree.
+ * Checks controlled focus (props.focused) and uncontrolled
+ * (framework-tracked index). Returns the LayoutNode or null.
+ */
+function findFocusedTextInputLayout(): LayoutNode | null {
+  // Check controlled focus: scan all layers for TextInput with focused: true
+  for (let i = currentLayouts.length - 1; i >= 0; i--) {
+    const found = findFocusedTIInTree(currentLayouts[i]!);
+    if (found) return found;
+  }
+  // Check uncontrolled focus
+  if (frameworkFocusIndex >= 0) {
+    const topLayer = currentLayouts[currentLayouts.length - 1];
+    if (topLayer) {
+      const focusables = collectFocusable(topLayer);
+      if (frameworkFocusIndex < focusables.length) {
+        const target = focusables[frameworkFocusIndex]!;
+        if (target.node.type === "textinput") return target;
+      }
+    }
+  }
+  return null;
+}
+
+function findFocusedTIInTree(ln: LayoutNode): LayoutNode | null {
+  if (ln.node.type === "textinput" && ln.node.props.focused) return ln;
+  for (const child of ln.children) {
+    const found = findFocusedTIInTree(child);
+    if (found) return found;
+  }
+  return null;
 }
 
 // --- Input handling ---
@@ -804,9 +869,12 @@ export const cel = {
    * enters raw mode, and starts mouse tracking.
    *
    * @param term - Terminal to render to (ProcessTerminal or MockTerminal).
+   * @param options - Optional configuration.
+   * @param options.theme - Color theme mapping. Defaults to the ANSI 16 theme.
    */
-  init(term: Terminal): void {
+  init(term: Terminal, options?: { theme?: Theme }): void {
     terminal = term;
+    activeTheme = options?.theme ?? defaultTheme;
     terminal.start(handleInput, () => cel.render());
   },
 
@@ -852,6 +920,7 @@ export const cel = {
     stampedNode = null;
     uncontrolledScrollOffsets.clear();
     stampedScrollNodes = [];
+    activeTheme = defaultTheme;
   },
 
   /** @internal */

package/src/emitter.ts

@@ -1,56 +1,76 @@
-import type { Color } from "@cel-tui/types";
+import type { Color, Theme, ThemeValue } from "@cel-tui/types";
 import type { Cell } from "./cell-buffer.js";
 import { CellBuffer, EMPTY_CELL } from "./cell-buffer.js";
 
-// --- Color mapping ---
-
-const FG_CODES: Record<Color, number> = {
-  black: 30,
-  red: 31,
-  green: 32,
-  yellow: 33,
-  blue: 34,
-  magenta: 35,
-  cyan: 36,
-  white: 37,
-  brightBlack: 90,
-  brightRed: 91,
-  brightGreen: 92,
-  brightYellow: 93,
-  brightBlue: 94,
-  brightMagenta: 95,
-  brightCyan: 96,
-  brightWhite: 97,
-};
+// --- Default ANSI 16 theme ---
 
-const BG_CODES: Record<Color, number> = {
-  black: 40,
-  red: 41,
-  green: 42,
-  yellow: 43,
-  blue: 44,
-  magenta: 45,
-  cyan: 46,
-  white: 47,
-  brightBlack: 100,
-  brightRed: 101,
-  brightGreen: 102,
-  brightYellow: 103,
-  brightBlue: 104,
-  brightMagenta: 105,
-  brightCyan: 106,
-  brightWhite: 107,
+/**
+ * The default theme — maps each color slot to its matching ANSI palette
+ * index. With this theme, colors inherit the terminal's configured
+ * color scheme automatically.
+ */
+export const defaultTheme: Theme = {
+  color00: 0,
+  color01: 1,
+  color02: 2,
+  color03: 3,
+  color04: 4,
+  color05: 5,
+  color06: 6,
+  color07: 7,
+  color08: 8,
+  color09: 9,
+  color10: 10,
+  color11: 11,
+  color12: 12,
+  color13: 13,
+  color14: 14,
+  color15: 15,
 };
 
+// --- Color resolution ---
+
+/** Parse a hex color string "#rrggbb" into [r, g, b]. */
+function parseHex(hex: string): [number, number, number] {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return [r, g, b];
+}
+
+/** Resolve a color slot to an SGR code fragment for foreground. */
+function fgSgr(color: Color, theme: Theme): string {
+  const val: ThemeValue = theme[color];
+  if (typeof val === "number") {
+    // ANSI palette index 0-15
+    return String(val < 8 ? 30 + val : 82 + val);
+  }
+  // Hex true color
+  const [r, g, b] = parseHex(val);
+  return `38;2;${r};${g};${b}`;
+}
+
+/** Resolve a color slot to an SGR code fragment for background. */
+function bgSgr(color: Color, theme: Theme): string {
+  const val: ThemeValue = theme[color];
+  if (typeof val === "number") {
+    // ANSI palette index 0-15
+    return String(val < 8 ? 40 + val : 92 + val);
+  }
+  // Hex true color
+  const [r, g, b] = parseHex(val);
+  return `48;2;${r};${g};${b}`;
+}
+
 // --- SGR generation ---
 
-function sgrForCell(cell: Cell): string {
-  const codes: number[] = [];
-  if (cell.bold) codes.push(1);
-  if (cell.italic) codes.push(3);
-  if (cell.underline) codes.push(4);
-  if (cell.fgColor) codes.push(FG_CODES[cell.fgColor]);
-  if (cell.bgColor) codes.push(BG_CODES[cell.bgColor]);
+function sgrForCell(cell: Cell, theme: Theme): string {
+  const codes: string[] = [];
+  if (cell.bold) codes.push("1");
+  if (cell.italic) codes.push("3");
+  if (cell.underline) codes.push("4");
+  if (cell.fgColor) codes.push(fgSgr(cell.fgColor, theme));
+  if (cell.bgColor) codes.push(bgSgr(cell.bgColor, theme));
   if (codes.length === 0) return "";
   return `\x1b[${codes.join(";")}m`;
 }
@@ -93,9 +113,13 @@ const RESET = "\x1b[0m";
  * only emitting SGR codes when the style changes.
  *
  * @param buf - The cell buffer to render.
+ * @param theme - Color theme mapping. Defaults to the ANSI 16 theme.
  * @returns A complete ANSI string ready to write to the terminal.
  */
-export function emitBuffer(buf: CellBuffer): string {
+export function emitBuffer(
+  buf: CellBuffer,
+  theme: Theme = defaultTheme,
+): string {
   let out = SYNC_START + CURSOR_HOME;
 
   let lastStyle: Cell | null = null;
@@ -115,7 +139,7 @@ export function emitBuffer(buf: CellBuffer): string {
         if (lastStyle !== null && hasStyle(lastStyle)) {
           out += RESET;
         }
-        const sgr = sgrForCell(cell);
+        const sgr = sgrForCell(cell, theme);
         if (sgr) out += sgr;
         lastStyle = cell;
       }
@@ -142,9 +166,14 @@ export function emitBuffer(buf: CellBuffer): string {
  *
  * @param prev - The previous buffer.
  * @param next - The new buffer.
+ * @param theme - Color theme mapping. Defaults to the ANSI 16 theme.
  * @returns An ANSI string with only the changed cells.
  */
-export function emitDiff(prev: CellBuffer, next: CellBuffer): string {
+export function emitDiff(
+  prev: CellBuffer,
+  next: CellBuffer,
+  theme: Theme = defaultTheme,
+): string {
   let out = SYNC_START;
 
   const changes = prev.diff(next);
@@ -178,7 +207,7 @@ export function emitDiff(prev: CellBuffer, next: CellBuffer): string {
       if (lastStyle !== null && hasStyle(lastStyle)) {
         out += RESET;
       }
-      const sgr = sgrForCell(cell);
+      const sgr = sgrForCell(cell, theme);
       if (sgr) out += sgr;
       lastStyle = cell;
     }

package/src/index.ts

@@ -28,6 +28,8 @@
 
 export type {
   Color,
+  ThemeValue,
+  Theme,
   StyleProps,
   SizeValue,
   ContainerProps,
@@ -44,6 +46,6 @@ export { Text } from "./primitives/text.js";
 export { TextInput } from "./primitives/text-input.js";
 export { cel } from "./cel.js";
 export { CellBuffer, EMPTY_CELL, type Cell } from "./cell-buffer.js";
-export { emitBuffer } from "./emitter.js";
+export { emitBuffer, defaultTheme } from "./emitter.js";
 export { visibleWidth, extractAnsiCode } from "./width.js";
 export { type Terminal, ProcessTerminal, MockTerminal } from "./terminal.js";

package/src/layout.ts

@@ -200,6 +200,17 @@ function intrinsicMainSize(
         resolveSizeValue(cProps?.width, 0) ??
         intrinsicMainSize(child, false, innerCross);
     }
+    // Apply child's cross-axis constraints (e.g. maxHeight on a TextInput
+    // inside an HStack) so the container's intrinsic size respects them.
+    if (cProps) {
+      const minCross = isVertical
+        ? (cProps.minHeight ?? 0)
+        : (cProps.minWidth ?? 0);
+      const maxCross = isVertical
+        ? (cProps.maxHeight ?? Infinity)
+        : (cProps.maxWidth ?? Infinity);
+      childSize = clamp(childSize, minCross, maxCross);
+    }
     if (childSize > maxSize) maxSize = childSize;
   }
   return maxSize + padMain;
@@ -336,9 +347,13 @@ function layoutWrapHStack(
     baseWidths.push(baseW);
 
     // Always compute real cross size (explicit or intrinsic) for row height
-    const cross =
+    let cross =
       resolveSizeValue(cProps?.height, innerH) ??
       intrinsicMainSize(child, true, innerW);
+    // Apply cross-axis constraints (e.g. maxHeight)
+    if (cProps) {
+      cross = clamp(cross, cProps.minHeight ?? 0, cProps.maxHeight ?? Infinity);
+    }
     crossSizes.push(cross);
   }
 
@@ -566,6 +581,16 @@ function layoutNode(
           resolveSizeValue(cProps?.height, innerH) ??
           (useIntrinsicCross ? intrinsicMainSize(child, true, innerW) : innerH);
       }
+      // Apply cross-axis constraints
+      if (cProps) {
+        const minCross = isVertical
+          ? (cProps.minWidth ?? 0)
+          : (cProps.minHeight ?? 0);
+        const maxCross = isVertical
+          ? (cProps.maxWidth ?? Infinity)
+          : (cProps.maxHeight ?? Infinity);
+        cross = clamp(cross, minCross, maxCross);
+      }
       infos.push({ node: child, mainSize: 0, crossSize: cross, flex });
     } else {
       // Main-axis: explicit → percentage → intrinsic
@@ -589,7 +614,7 @@ function layoutNode(
           (useIntrinsicCross ? intrinsicMainSize(child, true, innerW) : innerH);
       }
 
-      // Apply constraints
+      // Apply main-axis constraints
       if (cProps) {
         const minMain = isVertical
           ? (cProps.minHeight ?? 0)
@@ -599,6 +624,16 @@ function layoutNode(
           : (cProps.maxWidth ?? Infinity);
         main = clamp(main, minMain, maxMain);
       }
+      // Apply cross-axis constraints
+      if (cProps) {
+        const minCross = isVertical
+          ? (cProps.minWidth ?? 0)
+          : (cProps.minHeight ?? 0);
+        const maxCross = isVertical
+          ? (cProps.maxWidth ?? Infinity)
+          : (cProps.maxHeight ?? Infinity);
+        cross = clamp(cross, minCross, maxCross);
+      }
 
       fixedMain += main;
       infos.push({ node: child, mainSize: main, crossSize: cross, flex });

package/src/paint.ts

@@ -287,7 +287,7 @@ function paintScrollbar(
       const isThumb = row >= thumbPos && row < thumbPos + thumbSize;
       buf.set(barX, absY, {
         char: isThumb ? "┃" : "│",
-        fgColor: isThumb ? "white" : "brightBlack",
+        fgColor: isThumb ? null : "color08",
         bgColor: null,
         bold: false,
         italic: false,
@@ -322,7 +322,7 @@ function paintScrollbar(
       const isThumb = col >= thumbPos && col < thumbPos + thumbSize;
       buf.set(absX, barY, {
         char: isThumb ? "━" : "─",
-        fgColor: isThumb ? "white" : "brightBlack",
+        fgColor: isThumb ? null : "color08",
         bgColor: null,
         bold: false,
         italic: false,
@@ -477,6 +477,13 @@ function paintTextInput(
   const ch = Math.max(0, h - padY * 2);
   if (cw <= 0 || ch <= 0) return;
 
+  // Fill the TextInput rect with background color (like containers do)
+  // so that cursor inversion and empty cells have correct colors.
+  const effectiveBg = props.bgColor ?? inherited.bgColor;
+  if (effectiveBg) {
+    fillBackground(rect, clipRect, effectiveBg, buf);
+  }
+
   const value = props.value;
   const showPlaceholder = value.length === 0 && props.placeholder;
 
@@ -538,22 +545,38 @@ function paintTextInput(
     paintLineGraphemes(line, cx, cy + row, cw, clipRect, props, buf);
   }
 
-  // Paint cursor if focused
+  // Paint cursor if focused — invert colors at cursor position so it's
+  // always visible regardless of terminal cursor configuration. The
+  // framework also positions the native terminal cursor here (in cel.ts)
+  // for blinking.
   if (props.focused) {
     const cursorOffset = getTextInputCursor(props);
     const pos = offsetToWrappedPos(value, cursorOffset, cw);
     const screenRow = pos.line - scrollOffset;
     if (screenRow >= 0 && screenRow < ch && pos.col < cw) {
-      const existing = buf.get(cx + pos.col, cy + screenRow);
-      // Invert colors for cursor visibility
-      buf.set(cx + pos.col, cy + screenRow, {
-        char: existing.char === " " && !existing.bgColor ? " " : existing.char,
-        fgColor: existing.bgColor ?? "black",
-        bgColor: existing.fgColor ?? "white",
-        bold: existing.bold,
-        italic: existing.italic,
-        underline: existing.underline,
-      });
+      const absX = cx + pos.col;
+      const absY = cy + screenRow;
+      if (
+        absX >= clipRect.x &&
+        absX < clipRect.x + clipRect.width &&
+        absY >= clipRect.y &&
+        absY < clipRect.y + clipRect.height
+      ) {
+        const existing = buf.get(absX, absY);
+        // Resolve null colors against inherited style so the inversion
+        // always produces visible contrast (e.g. on bg-filled empty cells
+        // where fgColor is null).
+        const resolvedFg = existing.fgColor ?? inherited.fgColor ?? "color07";
+        const resolvedBg = existing.bgColor ?? inherited.bgColor ?? "color00";
+        buf.set(absX, absY, {
+          char: existing.char,
+          fgColor: resolvedBg,
+          bgColor: resolvedFg,
+          bold: existing.bold,
+          italic: existing.italic,
+          underline: existing.underline,
+        });
+      }
     }
   }
 }
@@ -609,9 +632,44 @@ type OnChangeFn = (value: string) => void;
 const textInputCursors = new WeakMap<OnChangeFn, number>();
 const textInputScrolls = new WeakMap<OnChangeFn, number>();
 
+/**
+ * Compute the screen position of the cursor for a focused TextInput.
+ * Returns `{ x, y }` in 0-indexed screen coordinates, or `null` if
+ * the cursor is not visible (clipped or not focused).
+ */
+export function getTextInputCursorScreenPos(
+  props: TextInputProps,
+  rect: Rect,
+): { x: number; y: number } | null {
+  const { x, y, width: w, height: h } = rect;
+  if (w <= 0 || h <= 0) return null;
+
+  const padX = props.padding?.x ?? 0;
+  const padY = props.padding?.y ?? 0;
+  const cx = x + padX;
+  const cy = y + padY;
+  const cw = Math.max(0, w - padX * 2);
+  const ch = Math.max(0, h - padY * 2);
+  if (cw <= 0 || ch <= 0) return null;
+
+  const cursorOffset = getTextInputCursor(props);
+  const pos = offsetToWrappedPos(props.value, cursorOffset, cw);
+  const scrollOffset = getTextInputScroll(props);
+  const screenRow = pos.line - scrollOffset;
+
+  if (screenRow >= 0 && screenRow < ch && pos.col < cw) {
+    return { x: cx + pos.col, y: cy + screenRow };
+  }
+  return null;
+}
+
 /** Get the cursor offset for a TextInput (framework-managed). */
 export function getTextInputCursor(props: TextInputProps): number {
-  return textInputCursors.get(props.onChange) ?? props.value.length;
+  const stored = textInputCursors.get(props.onChange);
+  if (stored === undefined) return props.value.length;
+  // Clamp to value length — the app may have cleared or shortened the value
+  // externally (e.g. after submit) while the WeakMap still holds the old cursor.
+  return Math.min(stored, props.value.length);
 }
 
 /** Set the cursor offset for a TextInput. */

package/src/primitives/stacks.ts

@@ -34,7 +34,7 @@ export function VStack(props: ContainerProps, children: Node[]): ContainerNode {
  * HStack({ height: 1, gap: 1 }, [
  *   Text("Name", { bold: true }),
  *   VStack({ flex: 1 }, []),
- *   Text("value", { fgColor: "brightBlack" }),
+ *   Text("value", { fgColor: "color08" }),
  * ])
  */
 export function HStack(props: ContainerProps, children: Node[]): ContainerNode {

package/src/primitives/text-input.ts

@@ -34,7 +34,7 @@ import type { TextInputNode, TextInputProps } from "@cel-tui/types";
  *   onChange: handleChange,
  *   onSubmit: handleSend,
  *   submitKey: "ctrl+enter",
- *   placeholder: Text("type a message...", { fgColor: "brightBlack" }),
+ *   placeholder: Text("type a message...", { fgColor: "color08" }),
  * })
  */
 export function TextInput(props: TextInputProps): TextInputNode {

package/src/primitives/text.ts

@@ -16,7 +16,7 @@ import type { TextNode, TextProps } from "@cel-tui/types";
  *
  * @example
  * // Simple styled text
- * Text("Hello", { bold: true, fgColor: "cyan" })
+ * Text("Hello", { bold: true, fgColor: "color06" })
  *
  * // Horizontal divider
  * Text("─", { repeat: "fill" })

package/src/text-edit.ts

@@ -8,6 +8,37 @@ export interface EditState {
   cursor: number;
 }
 
+const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+/**
+ * Get the grapheme boundary before the given cursor position.
+ * Returns the start offset of the grapheme that contains or precedes
+ * the cursor, or 0 if at the beginning.
+ */
+function prevGraphemeBoundary(value: string, cursor: number): number {
+  if (cursor <= 0) return 0;
+  let lastStart = 0;
+  for (const { index, segment } of segmenter.segment(value)) {
+    const end = index + segment.length;
+    if (end >= cursor) return index;
+    lastStart = end;
+  }
+  return lastStart;
+}
+
+/**
+ * Get the grapheme boundary after the given cursor position.
+ * Returns the end offset of the grapheme that starts at or after
+ * the cursor, or value.length if at the end.
+ */
+function nextGraphemeBoundary(value: string, cursor: number): number {
+  for (const { index, segment } of segmenter.segment(value)) {
+    const end = index + segment.length;
+    if (index >= cursor) return end;
+  }
+  return value.length;
+}
+
 /**
  * Insert a character (or string) at the cursor position.
  */
@@ -20,31 +51,36 @@ export function insertChar(state: EditState, char: string): EditState {
 }
 
 /**
- * Delete the character before the cursor (Backspace).
+ * Delete the grapheme before the cursor (Backspace).
+ * Handles multi-codepoint characters (emoji, ZWJ sequences, combining marks).
  */
 export function deleteBackward(state: EditState): EditState {
   const { value, cursor } = state;
   if (cursor === 0) return state;
+  const boundary = prevGraphemeBoundary(value, cursor);
   return {
-    value: value.slice(0, cursor - 1) + value.slice(cursor),
-    cursor: cursor - 1,
+    value: value.slice(0, boundary) + value.slice(cursor),
+    cursor: boundary,
   };
 }
 
 /**
- * Delete the character after the cursor (Delete key).
+ * Delete the grapheme after the cursor (Delete key).
+ * Handles multi-codepoint characters (emoji, ZWJ sequences, combining marks).
  */
 export function deleteForward(state: EditState): EditState {
   const { value, cursor } = state;
   if (cursor >= value.length) return state;
+  const boundary = nextGraphemeBoundary(value, cursor);
   return {
-    value: value.slice(0, cursor) + value.slice(cursor + 1),
+    value: value.slice(0, cursor) + value.slice(boundary),
     cursor,
   };
 }
 
 /**
  * Move the cursor in the given direction.
+ * Left/right movement respects grapheme boundaries.
  *
  * @param state - Current edit state.
  * @param direction - Movement direction.
@@ -58,10 +94,16 @@ export function moveCursor(
   const { value, cursor } = state;
 
   switch (direction) {
-    case "left":
-      return { value, cursor: Math.max(0, cursor - 1) };
-    case "right":
-      return { value, cursor: Math.min(value.length, cursor + 1) };
+    case "left": {
+      if (cursor <= 0) return state;
+      const boundary = prevGraphemeBoundary(value, cursor);
+      return { value, cursor: boundary };
+    }
+    case "right": {
+      if (cursor >= value.length) return state;
+      const boundary = nextGraphemeBoundary(value, cursor);
+      return { value, cursor: boundary };
+    }
     case "home":
       return { value, cursor: 0 };
     case "end":
@@ -89,17 +131,6 @@ function moveVertical(
   let cursorLine = 0;
   let cursorCol = 0;
 
-  for (let i = 0; i < lines.length; i++) {
-    const lineLen = lines[i]!.length;
-    if (offset + lineLen >= cursor && cursorLine === 0 && offset <= cursor) {
-      cursorLine = i;
-      cursorCol = cursor - offset;
-    }
-    offset += lineLen + 1; // +1 for \n
-  }
-
-  // Re-scan to get correct line (the above loop has a bug for first line)
-  offset = 0;
   for (let i = 0; i < lines.length; i++) {
     const lineLen = lines[i]!.length;
     if (cursor >= offset && cursor <= offset + lineLen) {
@@ -107,7 +138,7 @@ function moveVertical(
       cursorCol = cursor - offset;
       break;
     }
-    offset += lineLen + 1;
+    offset += lineLen + 1; // +1 for \n
   }
 
   // Move line