@cel-tui/core 0.6.1 → 0.7.0

package/src/text-edit.ts

@@ -1,3 +1,5 @@
+import { layoutText } from "./text-layout.js";
+
 /**
  * Framework-managed editing state for TextInput.
  */
@@ -9,6 +11,7 @@ export interface EditState {
 }
 
 const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+const WHITESPACE_RE = /^\s+$/u;
 
 /**
  * Get the grapheme boundary before the given cursor position.
@@ -39,6 +42,46 @@ function nextGraphemeBoundary(value: string, cursor: number): number {
   return value.length;
 }
 
+function isWhitespaceGrapheme(segment: string): boolean {
+  return WHITESPACE_RE.test(segment);
+}
+
+function findWordBoundaryBackward(value: string, cursor: number): number {
+  let boundary = cursor;
+
+  while (boundary > 0) {
+    const prev = prevGraphemeBoundary(value, boundary);
+    if (!isWhitespaceGrapheme(value.slice(prev, boundary))) break;
+    boundary = prev;
+  }
+
+  while (boundary > 0) {
+    const prev = prevGraphemeBoundary(value, boundary);
+    if (isWhitespaceGrapheme(value.slice(prev, boundary))) break;
+    boundary = prev;
+  }
+
+  return boundary;
+}
+
+function findWordBoundaryForward(value: string, cursor: number): number {
+  let boundary = cursor;
+
+  while (boundary < value.length) {
+    const next = nextGraphemeBoundary(value, boundary);
+    if (!isWhitespaceGrapheme(value.slice(boundary, next))) break;
+    boundary = next;
+  }
+
+  while (boundary < value.length) {
+    const next = nextGraphemeBoundary(value, boundary);
+    if (isWhitespaceGrapheme(value.slice(boundary, next))) break;
+    boundary = next;
+  }
+
+  return boundary;
+}
+
 /**
  * Insert a character (or string) at the cursor position.
  */
@@ -78,6 +121,32 @@ export function deleteForward(state: EditState): EditState {
   };
 }
 
+/**
+ * Delete the whitespace-delimited word before the cursor.
+ */
+export function deleteWordBackward(state: EditState): EditState {
+  const { value, cursor } = state;
+  const boundary = findWordBoundaryBackward(value, cursor);
+  if (boundary === cursor) return state;
+  return {
+    value: value.slice(0, boundary) + value.slice(cursor),
+    cursor: boundary,
+  };
+}
+
+/**
+ * Delete the whitespace-delimited word after the cursor.
+ */
+export function deleteWordForward(state: EditState): EditState {
+  const { value, cursor } = state;
+  const boundary = findWordBoundaryForward(value, cursor);
+  if (boundary === cursor) return state;
+  return {
+    value: value.slice(0, cursor) + value.slice(boundary),
+    cursor,
+  };
+}
+
 /**
  * Move the cursor in the given direction.
  * Left/right movement respects grapheme boundaries.
@@ -115,8 +184,24 @@ export function moveCursor(
 }
 
 /**
- * Vertical cursor movement — maps cursor offset to line/column,
- * moves up or down a line, then maps back to offset.
+ * Move the cursor by one whitespace-delimited word.
+ */
+export function moveCursorByWord(
+  state: EditState,
+  direction: "backward" | "forward",
+): EditState {
+  const { value, cursor } = state;
+  const nextCursor =
+    direction === "backward"
+      ? findWordBoundaryBackward(value, cursor)
+      : findWordBoundaryForward(value, cursor);
+
+  if (nextCursor === cursor) return state;
+  return { value, cursor: nextCursor };
+}
+
+/**
+ * Vertical cursor movement follows the visual wrapped lines used for painting.
  */
 function moveVertical(
   state: EditState,
@@ -124,49 +209,22 @@ function moveVertical(
   width: number,
 ): EditState {
   const { value, cursor } = state;
-  const lines = value.split("\n");
-
-  // Find which line and column the cursor is on
-  let offset = 0;
-  let cursorLine = 0;
-  let cursorCol = 0;
-
-  for (let i = 0; i < lines.length; i++) {
-    const lineLen = lines[i]!.length;
-    if (cursor >= offset && cursor <= offset + lineLen) {
-      cursorLine = i;
-      cursorCol = cursor - offset;
-      break;
-    }
-    offset += lineLen + 1; // +1 for \n
-  }
-
-  // Move line
-  let targetLine = cursorLine;
-  if (direction === "up") {
-    targetLine = Math.max(0, cursorLine - 1);
-  } else {
-    targetLine = Math.min(lines.length - 1, cursorLine + 1);
-  }
-
-  if (targetLine === cursorLine) {
-    // Can't move — go to start (up) or end (down)
+  const textLayout = layoutText(value, width, "word");
+  const pos = textLayout.offsetToPosition(cursor);
+  const targetLine =
+    direction === "up"
+      ? Math.max(0, pos.line - 1)
+      : Math.min(textLayout.lineCount - 1, pos.line + 1);
+
+  if (targetLine === pos.line) {
     return {
       value,
       cursor: direction === "up" ? 0 : value.length,
     };
   }
 
-  // Map column to new line, clamping to line length
-  const targetLineLen = lines[targetLine]!.length;
-  const targetCol = Math.min(cursorCol, targetLineLen);
-
-  // Compute new offset
-  let newOffset = 0;
-  for (let i = 0; i < targetLine; i++) {
-    newOffset += lines[i]!.length + 1;
-  }
-  newOffset += targetCol;
-
-  return { value, cursor: newOffset };
+  return {
+    value,
+    cursor: textLayout.positionToOffset(targetLine, pos.col),
+  };
 }

package/src/text-layout.ts

@@ -18,6 +18,7 @@ export interface TextLayoutResult {
   lines: VisualLine[];
   lineCount: number;
   offsetToPosition(offset: number): VisualPosition;
+  positionToOffset(line: number, col: number): number;
 }
 
 interface GraphemeInfo {
@@ -38,6 +39,18 @@ interface Range {
   end: number;
 }
 
+function requiredAt<T>(
+  items: readonly T[],
+  index: number,
+  description: string,
+): T {
+  const item = items[index];
+  if (item === undefined) {
+    throw new Error(`Missing ${description} at index ${index}`);
+  }
+  return item;
+}
+
 export function layoutText(
   value: string,
   width: number,
@@ -78,6 +91,9 @@ export function layoutText(
     offsetToPosition(offset: number): VisualPosition {
       return offsetToPosition(lines, clamp(offset, 0, value.length));
     },
+    positionToOffset(line: number, col: number): number {
+      return positionToOffset(lines, line, col);
+    },
   };
 }
 
@@ -129,7 +145,12 @@ function wrapGraphemes(
 
   const prefixWidths = [0];
   for (const grapheme of graphemes) {
-    prefixWidths.push(prefixWidths[prefixWidths.length - 1]! + grapheme.width);
+    const previousWidth = requiredAt(
+      prefixWidths,
+      prefixWidths.length - 1,
+      "prefix width",
+    );
+    prefixWidths.push(previousWidth + grapheme.width);
   }
 
   const ranges: Array<[number, number]> = [];
@@ -140,10 +161,12 @@ function wrapGraphemes(
     let lastBreak = -1;
 
     while (lineEnd < graphemes.length) {
-      const nextWidth = prefixWidths[lineEnd + 1]! - prefixWidths[lineStart]!;
+      const nextWidth =
+        requiredAt(prefixWidths, lineEnd + 1, "prefix width") -
+        requiredAt(prefixWidths, lineStart, "prefix width");
       if (nextWidth > width) break;
       lineEnd++;
-      if (graphemes[lineEnd - 1]!.isWhitespace) {
+      if (requiredAt(graphemes, lineEnd - 1, "grapheme").isWhitespace) {
         lastBreak = lineEnd;
       }
     }
@@ -203,8 +226,12 @@ function makeVisualLine(
   }
 
   const lineGraphemes = graphemes.slice(startIndex, endIndex);
-  const startOffset = lineGraphemes[0]!.startOffset;
-  const endOffset = lineGraphemes[lineGraphemes.length - 1]!.endOffset;
+  const startOffset = requiredAt(lineGraphemes, 0, "line grapheme").startOffset;
+  const endOffset = requiredAt(
+    lineGraphemes,
+    lineGraphemes.length - 1,
+    "line grapheme",
+  ).endOffset;
 
   return {
     line: {
@@ -222,13 +249,13 @@ function offsetToPosition(
   offset: number,
 ): VisualPosition {
   for (let i = 1; i < lines.length; i++) {
-    if (offset === lines[i]!.line.startOffset) {
+    if (offset === requiredAt(lines, i, "visual line").line.startOffset) {
       return { line: i, col: 0 };
     }
   }
 
   for (let i = 0; i < lines.length; i++) {
-    const entry = lines[i]!;
+    const entry = requiredAt(lines, i, "visual line");
     const { line, graphemes } = entry;
     if (offset < line.startOffset || offset > line.endOffset) continue;
 
@@ -241,10 +268,40 @@ function offsetToPosition(
     return { line: i, col };
   }
 
-  const last = lines[lines.length - 1]!;
+  const last = requiredAt(lines, lines.length - 1, "visual line");
   return { line: lines.length - 1, col: last.line.width };
 }
 
+function positionToOffset(
+  lines: VisualLineData[],
+  line: number,
+  col: number,
+): number {
+  const lineIndex = clamp(line, 0, lines.length - 1);
+  const entry = requiredAt(lines, lineIndex, "visual line");
+  const targetCol = Math.max(0, col);
+
+  if (targetCol === 0 || entry.graphemes.length === 0) {
+    return entry.line.startOffset;
+  }
+
+  let currentCol = 0;
+  for (const grapheme of entry.graphemes) {
+    const nextCol = currentCol + grapheme.width;
+    if (targetCol < nextCol) {
+      return targetCol - currentCol < nextCol - targetCol
+        ? grapheme.startOffset
+        : grapheme.endOffset;
+    }
+    if (targetCol === nextCol) {
+      return grapheme.endOffset;
+    }
+    currentCol = nextCol;
+  }
+
+  return entry.line.endOffset;
+}
+
 function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }

package/src/width.ts

@@ -20,7 +20,11 @@ export function extractAnsiCode(
   // CSI: ESC [ ... <terminal byte>
   if (next === "[") {
     let j = pos + 2;
-    while (j < str.length && !/[A-Za-z]/.test(str[j]!)) j++;
+    while (j < str.length) {
+      const char = str[j];
+      if (char === undefined || /[A-Za-z]/.test(char)) break;
+      j++;
+    }
     if (j < str.length)
       return { code: str.substring(pos, j + 1), length: j + 1 - pos };
     return null;
@@ -64,7 +68,8 @@ const leadingNonPrintingRegex =
 const rgiEmojiRegex = /^\p{RGI_Emoji}$/v;
 
 function couldBeEmoji(segment: string): boolean {
-  const cp = segment.codePointAt(0)!;
+  const cp = segment.codePointAt(0);
+  if (cp === undefined) return false;
   return (
     (cp >= 0x1f000 && cp <= 0x1fbff) ||
     (cp >= 0x2300 && cp <= 0x23ff) ||
@@ -94,8 +99,8 @@ function graphemeWidth(segment: string): number {
 
   if (segment.length > 1) {
     for (const char of segment.slice(1)) {
-      const c = char.codePointAt(0)!;
-      if (c >= 0xff00 && c <= 0xffef) {
+      const c = char.codePointAt(0);
+      if (c !== undefined && c >= 0xff00 && c <= 0xffef) {
         width += eastAsianWidth(c);
       }
     }