@valyrianjs/terminal 0.2.1 → 0.2.2

package/src/render.ts

@@ -1,9 +1,10 @@
 import { constrainFrame, createFrame, cropFrame, fitFrame, getFrameHeight, getFrameWidth, mergeHorizontal, mergeVertical, overlayFrame, shiftFrame } from "./layout.js";
 import { getSelectionRange, normalizeInputState } from "./events.js";
+import { markFullFrameSpan, markFullRowSpan } from "./frame-style.js";
 import { createEditorState } from "./editor-state.js";
 import { isFocusable, textContent } from "./tree.js";
 import { renderValyrianTerminal } from "./runtime.js";
-import { plainText } from "./text.js";
+import { cursorCellOffset, padEndTerminalCells, plainText, sliceTerminalCells, terminalCellToStringIndex, terminalCellWidth, terminalGraphemes } from "./text.js";
 import { resolveTerminalStyle } from "./theme.js";
 
 import type { InputInteractionState, TerminalElementNode, TerminalFocusNode, TerminalFrame, TerminalHitbox, TerminalNode, TerminalSpacing, TerminalSplitBreakpoint, TerminalSplitSize, TerminalStyleDefinition, TerminalStyleSpan, TerminalTheme, TerminalVisualState } from "./types.js";
@@ -173,7 +174,7 @@ function fullFrameSpans(kinds: string[], width: number, height: number): Termina
   const spans: TerminalStyleSpan[] = [];
   for (const kind of kinds) {
     for (let y = 1; y <= height; y += 1) {
-      spans.push({ kind, x1: 1, x2: width + 1, y });
+      spans.push(markFullFrameSpan({ kind, x1: 1, x2: width + 1, y }));
     }
   }
   return spans;
@@ -209,7 +210,7 @@ function padFrameSides(frame: TerminalFrame, padding: SpacingSides) {
   const bottomLines = new Array<string>(padding.bottom).fill(" ".repeat(contentWidth));
   const lines = [
     ...topLines,
-    ...frame.lines.map((line) => `${" ".repeat(padding.left)}${line.padEnd(width, " ")}${" ".repeat(padding.right)}`),
+    ...frame.lines.map((line) => `${" ".repeat(padding.left)}${padEndTerminalCells(line, width)}${" ".repeat(padding.right)}`),
     ...bottomLines
   ];
   return shiftFrame(createFrame(lines, frame.hitboxes, frame.cursor, frame.spans), padding.left, padding.top);
@@ -227,7 +228,7 @@ function addBorder(frame: TerminalFrame, border: BorderSides) {
     lines.push(`${border.left ? chars.topLeft : chars.horizontal}${chars.horizontal.repeat(Math.max(0, width - left - right))}${border.right ? chars.topRight : chars.horizontal}`.slice(0, width));
   }
   for (const line of frame.lines) {
-    lines.push(`${border.left ? chars.vertical : ""}${line.padEnd(innerWidth, " ")}${border.right ? chars.vertical : ""}`);
+    lines.push(`${border.left ? chars.vertical : ""}${padEndTerminalCells(line, innerWidth)}${border.right ? chars.vertical : ""}`);
   }
   if (border.bottom) {
     lines.push(`${border.left ? chars.bottomLeft : chars.horizontal}${chars.horizontal.repeat(Math.max(0, width - left - right))}${border.right ? chars.bottomRight : chars.horizontal}`.slice(0, width));
@@ -252,7 +253,7 @@ function addFullFrameSpans(frame: TerminalFrame, kinds: ResolvedStyleSpan[]) {
   const spans = frame.spans.slice();
   for (const span of kinds) {
     for (let y = 1; y <= height; y += 1) {
-      spans.push({ ...span, x1: 1, x2: width + 1, y });
+      spans.push(markFullFrameSpan({ ...span, x1: 1, x2: width + 1, y }));
     }
   }
   return createFrame(frame.lines, frame.hitboxes, frame.cursor, spans);
@@ -325,15 +326,22 @@ function wrapPlainText(value: string, width: number) {
     }
 
     let remaining = sourceRow;
-    while (remaining.length > width) {
-      const slice = remaining.slice(0, width);
+    while (terminalCellWidth(remaining) > width) {
+      const slice = sliceTerminalCells(remaining, width);
+      if (slice.length === 0) {
+        const [firstGrapheme = ""] = terminalGraphemes(remaining);
+        rows.push(firstGrapheme);
+        remaining = remaining.slice(firstGrapheme.length);
+        continue;
+      }
+
       const breakAt = slice.lastIndexOf(" ");
       if (breakAt > 0 && breakAt >= Math.floor(width * 0.6)) {
         rows.push(remaining.slice(0, breakAt));
         remaining = remaining.slice(breakAt + 1);
       } else {
         rows.push(slice);
-        remaining = remaining.slice(width);
+        remaining = remaining.slice(slice.length);
       }
     }
     rows.push(remaining);
@@ -465,7 +473,8 @@ function decorateContainerFrame(frame: TerminalFrame, node: TerminalElementNode,
     if ((typeof width === "number" && width > 0) || (typeof height === "number" && height > 0)) {
       next = constrainFrame(next, {
         width: typeof width === "number" && width > 0 ? width : undefined,
-        height: typeof height === "number" && height > 0 ? height : undefined
+        height: typeof height === "number" && height > 0 ? height : undefined,
+        expandFullFrameSpans: true
       });
     }
   }
@@ -474,7 +483,8 @@ function decorateContainerFrame(frame: TerminalFrame, node: TerminalElementNode,
   if (options.constrain) {
     next = constrainFrame(next, {
       width: typeof options.width === "undefined" ? positiveDimension(node.props.width, "width") : options.width,
-      height: typeof options.height === "undefined" ? positiveDimension(node.props.height, "height") : options.height
+      height: typeof options.height === "undefined" ? positiveDimension(node.props.height, "height") : options.height,
+      expandFullFrameSpans: true
     });
   }
   next = addContainerStyleSpans(next, node, resolved);
@@ -538,6 +548,19 @@ function resolveContainerChildContext(node: TerminalElementNode, dimensions: { w
   };
 }
 
+function interactiveTextMetadata(value: string) {
+  const textLength = value.length;
+  const textCellToStringIndex = terminalCellToStringIndex(value);
+  const usesLinearIndexes = textCellToStringIndex.length === textLength + 1
+    && textCellToStringIndex.every((index, cellOffset) => index === cellOffset);
+
+  if (usesLinearIndexes) {
+    return { textLength };
+  }
+
+  return { textLength, textCellToStringIndex };
+}
+
 function renderInputLine(value: string, inputState: InputInteractionState, padding: SpacingSides = { top: 0, right: 0, bottom: 0, left: 0 }) {
   const state = normalizeInputState(inputState, value.length);
   const { start, end } = getSelectionRange(state);
@@ -546,12 +569,29 @@ function renderInputLine(value: string, inputState: InputInteractionState, paddi
   const textStart = padding.left + 1;
   return {
     line: paddedLine,
-    cursor: { x: textStart + state.cursor, y: 1 },
-    spans: start === end ? [] : [{ kind: "input.selection", x1: textStart + start, x2: textStart + end, y: 1 }]
+    cursor: { x: textStart + cursorCellOffset(value, state.cursor), y: 1 },
+    spans: start === end ? [] : [{ kind: "input.selection", x1: textStart + cursorCellOffset(value, start), x2: textStart + cursorCellOffset(value, end), y: 1 }]
+  };
+}
+
+function resolveEditorDimensions(node: TerminalElementNode, context?: TerminalRenderContext) {
+  const explicitWidth = positiveDimension(node.props.width, "width");
+  const explicitHeight = positiveDimension(node.props.height, "height");
+  return {
+    width: typeof explicitWidth !== "undefined"
+      ? explicitWidth
+      : node.props.fill === true
+        ? fillContextDimension(context, "width", "Editor")
+        : undefined,
+    height: typeof explicitHeight !== "undefined"
+      ? explicitHeight
+      : node.props.fill === true
+        ? fillContextDimension(context, "height", "Editor")
+        : undefined
   };
 }
 
-function renderEditorFrame(node: TerminalElementNode) {
+function renderEditorFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
   const value = typeof node.props.value !== "undefined" ? plainText(node.props.value) : "";
   const placeholder = typeof node.props.placeholder !== "undefined" ? plainText(node.props.placeholder) : "";
   const displayValue = value.length === 0 && !node.props.__focused && placeholder ? placeholder : value;
@@ -566,23 +606,28 @@ function renderEditorFrame(node: TerminalElementNode) {
 
     return `> ${line.slice(0, focusedColumn)}|${line.slice(focusedColumn)}`;
   });
-  const width = lines.reduce((max, line) => Math.max(max, line.length), 0);
-  const cursor = node.props.__focused ? { x: 3 + focusedColumn, y: focusedLine + 1 } : null;
-  const spans: TerminalStyleSpan[] = node.props.__focused ? [{ kind: "focus", x1: 1, x2: Math.max(2, lines[focusedLine].length + 1), y: focusedLine + 1 }] : [];
-  const height = typeof node.props.height === "undefined" ? undefined : positiveDimension(node.props.height, "height");
+  const width = lines.reduce((max, line) => Math.max(max, terminalCellWidth(line)), 0);
+  const cursor = node.props.__focused ? { x: 3 + cursorCellOffset(focusedState.lines[focusedLine], focusedColumn), y: focusedLine + 1 } : null;
+  const spans: TerminalStyleSpan[] = node.props.__focused ? [{ kind: "focus", x1: 1, x2: Math.max(2, terminalCellWidth(lines[focusedLine]) + 1), y: focusedLine + 1 }] : [];
+  const dimensions = resolveEditorDimensions(node, context);
   const frame = createFrame(lines, [], cursor, spans);
-  const scrollOffset = node.props.__focused && typeof height !== "undefined"
-    ? Math.min(Math.max(0, focusedLine - height + 1), Math.max(0, lines.length - height))
+  const scrollOffset = node.props.__focused && typeof dimensions.height !== "undefined"
+    ? Math.min(Math.max(0, focusedLine - dimensions.height + 1), Math.max(0, lines.length - dimensions.height))
     : 0;
-  const constrainedFrame = typeof height === "undefined"
+  const croppedFrame = typeof dimensions.height === "undefined"
     ? frame
-    : constrainFrame(scrollOffset > 0 ? cropFrame(frame, scrollOffset, height) : frame, { height });
+    : scrollOffset > 0
+      ? cropFrame(frame, scrollOffset, dimensions.height)
+      : frame;
+  const constrainedFrame = typeof dimensions.width === "undefined" && typeof dimensions.height === "undefined"
+    ? croppedFrame
+    : constrainFrame(croppedFrame, { ...dimensions, expandFullFrameSpans: true });
 
   if (!node.props.id) {
     return constrainedFrame;
   }
 
-  return createFrame(constrainedFrame.lines, [{ id: node.props.id, tag: node.tag, x1: 1, x2: Math.max(1, getFrameWidth(constrainedFrame), width), y1: 1, y2: getFrameHeight(constrainedFrame), textStartX: 3, textLength: value.length }], constrainedFrame.cursor, constrainedFrame.spans);
+  return createFrame(constrainedFrame.lines, [{ id: node.props.id, tag: node.tag, x1: 1, x2: Math.max(1, getFrameWidth(constrainedFrame)), y1: 1, y2: getFrameHeight(constrainedFrame), textStartX: 3, ...interactiveTextMetadata(value) }], constrainedFrame.cursor, constrainedFrame.spans);
 }
 
 function notifyLayoutContextProbe(node: TerminalElementNode, context?: TerminalRenderContext) {
@@ -618,13 +663,12 @@ function renderTableFrame(node: TerminalElementNode, context?: TerminalRenderCon
     const cells = new Array<TerminalFrame>(columnCount).fill(createFrame([""])).map((cell, index) => row[index] || cell);
     const rowHeight = cells.reduce((max, cell) => Math.max(max, getFrameHeight(cell)), 0);
     const normalized = cells.map((cell, index) => ({
-      frame: cell,
-      width: columnWidths[index],
-      lines: [...cell.lines.map((line) => line.padEnd(columnWidths[index], " ")), ...new Array<string>(Math.max(0, rowHeight - getFrameHeight(cell))).fill(" ".repeat(columnWidths[index]))]
+      frame: fitFrame(cell, columnWidths[index], rowHeight, { expandFullFrameSpans: true }),
+      width: columnWidths[index]
     }));
 
     for (let rowIndex = 0; rowIndex < rowHeight; rowIndex += 1) {
-      lines.push(normalized.map((cell) => cell.lines[rowIndex]).join(" | "));
+      lines.push(normalized.map((cell) => cell.frame.lines[rowIndex]).join(" | "));
     }
 
     let xOffset = 0;
@@ -775,7 +819,7 @@ function renderSplitFrame(node: TerminalElementNode, context?: TerminalRenderCon
     if (cellWidth <= 0 || cellHeight <= 0) {
       continue;
     }
-    frames.push(constrainFrame(renderSplitChildFrame(node.children[index], cellWidth, cellHeight, context), { width: cellWidth, height: cellHeight }));
+    frames.push(constrainFrame(renderSplitChildFrame(node.children[index], cellWidth, cellHeight, context), { width: cellWidth, height: cellHeight, expandFullFrameSpans: true }));
   }
 
   const frame = frames.length
@@ -816,7 +860,7 @@ function renderBodyFrame(children: TerminalNode[], props: TerminalElementNode["p
 }
 
 function renderFixedChildFrame(node: TerminalElementNode, width: number, height: number) {
-  return constrainFrame(renderBodyFrame(node.children, {}, { cols: width, rows: height }), { width, height });
+  return constrainFrame(renderBodyFrame(node.children, {}, { cols: width, rows: height }), { width, height, expandFullFrameSpans: true });
 }
 
 function renderFixedCompositionFrame(node: TerminalElementNode, width: number, height: number): TerminalFrame {
@@ -859,14 +903,14 @@ function renderFixedCompositionFrame(node: TerminalElementNode, width: number, h
     const leftFrames = fixedNodes.left.map((fixed) => renderFixedChildFrame(fixed, positiveInteger(fixed.props.size, "Fixed size"), middleHeight));
     const rightFrames = fixedNodes.right.map((fixed) => renderFixedChildFrame(fixed, positiveInteger(fixed.props.size, "Fixed size"), middleHeight));
     const bodyFrames = bodyWidth > 0
-      ? [constrainFrame(renderBodyFrame(bodyChildren, node.props, { cols: bodyWidth, rows: middleHeight }), { width: bodyWidth, height: middleHeight })]
+      ? [constrainFrame(renderBodyFrame(bodyChildren, node.props, { cols: bodyWidth, rows: middleHeight }), { width: bodyWidth, height: middleHeight, expandFullRowSpans: true })]
       : [];
 
-    middleFrames.push(constrainFrame(mergeHorizontal([...leftFrames, ...bodyFrames, ...rightFrames]), { width, height: middleHeight }));
+    middleFrames.push(constrainFrame(mergeHorizontal([...leftFrames, ...bodyFrames, ...rightFrames]), { width, height: middleHeight, expandFullRowSpans: true }));
   }
 
   const frame = mergeVertical([...topFrames, ...middleFrames, ...bottomFrames]);
-  return constrainFrame(frame, { width, height });
+  return constrainFrame(frame, { width, height, expandFullFrameSpans: true });
 }
 
 function renderStandaloneFixedFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
@@ -940,7 +984,7 @@ function overlayGeometry(node: TerminalElementNode, width: number, height: numbe
 
 function renderOverlayChildFrame(node: TerminalElementNode, width: number, height: number, context?: TerminalRenderContext) {
   const geometry = overlayGeometry(node, width, height);
-  let frame = constrainFrame(renderBodyFrame(node.children, {}, { cols: geometry.width, rows: geometry.height, theme: context?.theme }), { width: geometry.width, height: geometry.height });
+  let frame = constrainFrame(renderBodyFrame(node.children, {}, { cols: geometry.width, rows: geometry.height, theme: context?.theme }), { width: geometry.width, height: geometry.height, expandFullRowSpans: true });
   frame = addContainerStyleSpans(frame, node, resolveNodeStyle(node, context));
   if (node.props.id && isFocusable(node)) {
     frame = addFocusableHitbox(frame, node as TerminalFocusNode);
@@ -993,7 +1037,7 @@ function renderScreenFrame(node: TerminalElementNode, context?: TerminalRenderCo
     }
     base = mergeVertical(parts);
     if (context && overlays.length) {
-      base = constrainFrame(base, { width: context.cols, height: context.rows });
+      base = constrainFrame(base, { width: context.cols, height: context.rows, expandFullRowSpans: true });
     }
   }
 
@@ -1066,13 +1110,13 @@ function renderLogViewFrame(node: TerminalElementNode, context?: TerminalRenderC
       }
     }
     if (typeof innerWidth !== "undefined") {
-      frame = constrainFrame(frame, { width: innerWidth, height: innerHeight });
+      frame = constrainFrame(frame, { width: innerWidth, height: innerHeight, expandFullFrameSpans: true });
     }
   }
   frame = padFrameSides(frame, padding);
   frame = addBorder(frame, border);
   if (typeof dimensions.width !== "undefined") {
-    frame = constrainFrame(frame, { width: dimensions.width, height: dimensions.height });
+    frame = constrainFrame(frame, { width: dimensions.width, height: dimensions.height, expandFullFrameSpans: true });
   } else if (typeof dimensions.height !== "undefined") {
     frame = cropFrame(frame, 0, dimensions.height);
     while (typeof dimensions.height !== "undefined" && getFrameHeight(frame) < dimensions.height) {
@@ -1103,18 +1147,18 @@ function renderSeparatedRowFrame(frames: TerminalFrame[], separator = " | ") {
     const frame = frames[index];
     const width = widths[index];
     for (let row = 0; row < height; row += 1) {
-      lines[row] += (frame.lines[row] || "").padEnd(width, " ");
+      lines[row] += padEndTerminalCells(frame.lines[row] || "", width);
       if (index < frames.length - 1) {
         lines[row] += separator;
       }
     }
-    const shifted = shiftFrame(frame, xOffset, 0);
+    const shifted = shiftFrame(fitFrame(frame, width, height, { expandFullFrameSpans: true }), xOffset, 0);
     hitboxes.push(...shifted.hitboxes);
     spans.push(...shifted.spans);
     if (!cursor && frame.cursor) {
       cursor = { x: frame.cursor.x + xOffset, y: frame.cursor.y };
     }
-    xOffset += width + (index < frames.length - 1 ? separator.length : 0);
+    xOffset += width + (index < frames.length - 1 ? terminalCellWidth(separator) : 0);
   }
 
   return createFrame(lines, hitboxes, cursor, spans);
@@ -1150,7 +1194,7 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
       if (node.tag === "terminal-scroll") {
         const offset = numeric(node.props.__scrollOffset, 0);
         if (typeof dimensions.width !== "undefined") {
-          frame = constrainFrame(frame, { width: dimensions.width });
+          frame = constrainFrame(frame, { width: dimensions.width, expandFullFrameSpans: true });
         }
         const height = numeric(dimensions.height ?? node.props.height, getFrameHeight(frame));
         frame = cropFrame(frame, offset, height || getFrameHeight(frame));
@@ -1159,7 +1203,7 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
         const spans = frame.spans.slice();
         for (let index = 0; index < frame.lines.length; index += 1) {
           const row = index + 1;
-          const width = frame.lines[index].length + 1;
+          const width = terminalCellWidth(frame.lines[index]) + 1;
           if (highlightRows.includes(row)) {
             spans.push({ kind: "highlight", x1: 1, x2: width, y: row });
           }
@@ -1241,15 +1285,15 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
       for (let index = 0; index < frameLines.length; index += 1) {
         const sourceIndex = frameItemIndexes[index];
         const y = itemY + index;
-        spans.push({ kind: "list.base", x1: 1, x2: width + 1, y });
+        spans.push(markFullRowSpan({ kind: "list.base", x1: 1, x2: width + 1, y }));
         if (selectedIndex !== null && selectedIndex !== activeIndex && sourceIndex === selectedIndex) {
-          spans.push({ kind: "list.selected", x1: 1, x2: width + 1, y });
+          spans.push(markFullRowSpan({ kind: "list.selected", x1: 1, x2: width + 1, y }));
         }
         if (sourceIndex === activeIndex) {
-          spans.push({ kind: "list.current", x1: 1, x2: width + 1, y });
+          spans.push(markFullRowSpan({ kind: "list.current", x1: 1, x2: width + 1, y }));
         }
         if (sourceIndex === hoveredIndex) {
-          spans.push({ kind: "list.hover", x1: 1, x2: width + 1, y });
+          spans.push(markFullRowSpan({ kind: "list.hover", x1: 1, x2: width + 1, y }));
         }
       }
       const listHitboxes: TerminalHitbox[] = [];
@@ -1289,7 +1333,7 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
       }
       const frame = createFrame(decorated.lines, [...listHitboxes, ...itemHitboxes, ...decorated.hitboxes], decorated.cursor, spans);
       const styled = addFullFrameSpans(frame, resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
-      return typeof frameHeight === "number" ? constrainFrame(styled, { height: frameHeight }) : styled;
+      return typeof frameHeight === "number" ? constrainFrame(styled, { height: frameHeight, expandFullFrameSpans: true }) : styled;
     }
     case "terminal-table":
       return renderTableFrame(node, context);
@@ -1323,7 +1367,7 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
         const decorated = addBorder(createFrame([line]), inputBorder);
         const width = Math.max(1, getFrameWidth(decorated));
         const height = Math.max(1, getFrameHeight(decorated));
-        const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, textLength: stringValue.length }] : [];
+        const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, ...interactiveTextMetadata(stringValue) }] : [];
         const spans = fullFrameSpans(["input.base"], width, height);
         return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
       }
@@ -1332,12 +1376,12 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
       const decorated = addBorder(createFrame([rendered.line], [], rendered.cursor, rendered.spans), inputBorder);
       const width = Math.max(1, getFrameWidth(decorated));
       const height = Math.max(1, getFrameHeight(decorated));
-      const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, textLength: stringValue.length }] : [];
+      const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, ...interactiveTextMetadata(stringValue) }] : [];
       const spans = [...fullFrameSpans(["input.base", "input.focus"], width, height), ...decorated.spans];
       return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
     }
     case "terminal-editor":
-      return addFullFrameSpans(renderEditorFrame(node), resolveNodeStyle(node, context).spanKinds);
+      return addFullFrameSpans(renderEditorFrame(node, context), resolveNodeStyle(node, context).spanKinds);
     case "terminal-button": {
       const label = typeof node.props.label !== "undefined" ? plainText(node.props.label) : plainText(node.children.map(textContent).join(""));
       const layoutStyle = resolveLayoutStyle("button.base", node, context);

package/src/session.ts

@@ -58,6 +58,8 @@ const KNOWN_TERMINAL_KEY_SEQUENCES = [
   "\u001b[13;129u",
   "\u001b[27;2;13~",
   "\u001b[13;2~",
+  "\u001b[1;2A",
+  "\u001b[1;2B",
   "\u001b[1;2C",
   "\u001b[1;2D",
   "\u001b[1;3C",

package/src/text.ts

@@ -5,6 +5,20 @@ const C1_CSI_TERMINAL_CONTROL = /\u009b[0-?]*[ -/]*[@-~]/g;
 const ESC_TERMINAL_CONTROL = /\u001b[ -/]*[0-~]/g;
 const C1_TERMINAL_CONTROL = /[\u0080-\u009f]/g;
 const C0_TERMINAL_CONTROL = /[\u0000-\u0009\u000b-\u001f\u007f]/g;
+const COMBINING_MARK = /\p{Mark}/u;
+const EMOJI_PRESENTATION = /\p{Extended_Pictographic}/u;
+
+type GraphemeSegmenter = {
+  segment(value: string): Iterable<{ segment: string }>;
+};
+
+const Segmenter = (Intl as unknown as {
+  Segmenter?: new (locale?: string, options?: { granularity: "grapheme" }) => GraphemeSegmenter;
+}).Segmenter;
+
+const GRAPHEME_SEGMENTER = typeof Segmenter === "function"
+  ? new Segmenter(undefined, { granularity: "grapheme" })
+  : null;
 
 export function stripTerminalControls(value: unknown) {
   return String(value)
@@ -18,3 +32,137 @@ export function stripTerminalControls(value: unknown) {
 }
 
 export const plainText = stripTerminalControls;
+
+export function terminalGraphemes(value: string): string[] {
+  if (GRAPHEME_SEGMENTER !== null) {
+    return Array.from(GRAPHEME_SEGMENTER.segment(value), (part) => part.segment);
+  }
+
+  return Array.from(value);
+}
+
+function isWideCodePoint(codePoint: number) {
+  return (
+    codePoint >= 0x1100 && (
+      codePoint <= 0x115f
+      || codePoint === 0x2329
+      || codePoint === 0x232a
+      || (codePoint >= 0x2e80 && codePoint <= 0xa4cf && codePoint !== 0x303f)
+      || (codePoint >= 0xac00 && codePoint <= 0xd7a3)
+      || (codePoint >= 0xf900 && codePoint <= 0xfaff)
+      || (codePoint >= 0xfe10 && codePoint <= 0xfe19)
+      || (codePoint >= 0xfe30 && codePoint <= 0xfe6f)
+      || (codePoint >= 0xff00 && codePoint <= 0xff60)
+      || (codePoint >= 0xffe0 && codePoint <= 0xffe6)
+      || (codePoint >= 0x20000 && codePoint <= 0x3fffd)
+    )
+  );
+}
+
+function isZeroWidthCodePoint(codePoint: number, char: string) {
+  return codePoint === 0x200d
+    || (codePoint >= 0xfe00 && codePoint <= 0xfe0f)
+    || (codePoint >= 0xe0100 && codePoint <= 0xe01ef)
+    || COMBINING_MARK.test(char);
+}
+
+function graphemeCellWidth(grapheme: string) {
+  if (grapheme.length === 0) {
+    return 0;
+  }
+
+  if (grapheme.includes("\u200d") || EMOJI_PRESENTATION.test(grapheme)) {
+    return 2;
+  }
+
+  let width = 0;
+  for (const char of Array.from(grapheme)) {
+    const codePoint = char.codePointAt(0);
+    if (typeof codePoint !== "number") {
+      continue;
+    }
+    if (isZeroWidthCodePoint(codePoint, char)) {
+      continue;
+    }
+    width = Math.max(width, isWideCodePoint(codePoint) ? 2 : 1);
+  }
+
+  return width;
+}
+
+export function terminalCellWidth(value: unknown) {
+  const text = stripTerminalControls(value);
+  return terminalGraphemes(text).reduce((width, grapheme) => width + graphemeCellWidth(grapheme), 0);
+}
+
+export function sliceTerminalCells(value: string, maxCells: number) {
+  const limit = Math.max(0, Math.trunc(Number(maxCells) || 0));
+  let width = 0;
+  let output = "";
+
+  for (const grapheme of terminalGraphemes(value)) {
+    const graphemeWidth = graphemeCellWidth(grapheme);
+    if (graphemeWidth > 0 && width + graphemeWidth > limit) {
+      break;
+    }
+    output += grapheme;
+    width += graphemeWidth;
+  }
+
+  return output;
+}
+
+export function dropTerminalCells(value: string, cells: number) {
+  const limit = Math.max(0, Math.trunc(Number(cells) || 0));
+  let width = 0;
+  let output = "";
+  let dropping = true;
+
+  for (const grapheme of terminalGraphemes(value)) {
+    if (dropping) {
+      const graphemeWidth = graphemeCellWidth(grapheme);
+      if (width < limit || (graphemeWidth === 0 && width <= limit)) {
+        width += graphemeWidth;
+        continue;
+      }
+      dropping = false;
+    }
+    output += grapheme;
+  }
+
+  return output;
+}
+
+export function padEndTerminalCells(value: string, width: number) {
+  const size = Math.max(0, Math.trunc(Number(width) || 0));
+  const visibleWidth = terminalCellWidth(value);
+  return visibleWidth >= size ? value : `${value}${" ".repeat(size - visibleWidth)}`;
+}
+
+export function terminalCellToStringIndex(value: string) {
+  const indexes: number[] = [0];
+  let cellOffset = 0;
+  let stringIndex = 0;
+
+  for (const grapheme of terminalGraphemes(value)) {
+    const graphemeWidth = graphemeCellWidth(grapheme);
+    const nextStringIndex = stringIndex + grapheme.length;
+
+    if (graphemeWidth > 0) {
+      for (let cell = 1; cell < graphemeWidth; cell += 1) {
+        indexes[cellOffset + cell] = nextStringIndex;
+      }
+      cellOffset += graphemeWidth;
+      indexes[cellOffset] = nextStringIndex;
+    }
+
+    stringIndex = nextStringIndex;
+  }
+
+  indexes[cellOffset] = stringIndex;
+  return indexes;
+}
+
+export function cursorCellOffset(value: string, cursor: number) {
+  return terminalCellWidth(value.slice(0, Math.max(0, Math.trunc(Number(cursor) || 0))));
+}

package/src/types.ts

@@ -129,6 +129,7 @@ export interface TerminalHitbox {
   y2: number;
   textStartX?: number;
   textLength?: number;
+  textCellToStringIndex?: number[];
   itemOffset?: number;
   itemIndexes?: number[];
   contentY?: number;
@@ -387,7 +388,9 @@ export interface TerminalInputProps extends TerminalFocusableProps, TerminalStyl
 export interface TerminalEditorProps extends TerminalFocusableProps, TerminalStyleProps {
   value?: string;
   placeholder?: string;
+  width?: number;
   height?: number;
+  fill?: boolean;
   onchange?(event: TerminalEditorChangeEventPayload): void;
   oninput?(event: TerminalEditorChangeEventPayload): void;
   onsubmit?(event: TerminalEditorSubmitEventPayload): void;