@code-yeongyu/senpi-tui 2026.10.11 → 2026.10.12

package/dist/components/editor-line-render.d.ts

@@ -4,10 +4,17 @@ export interface EditorLineCursor {
     readonly marker: string;
     readonly drawFakeCursor: boolean;
 }
+/** A keyword-run piece on one row; `runStart` may be negative when the run began on an earlier row. */
+export interface EditorKeywordRange extends MentionRange {
+    readonly runStart: number;
+    readonly runLength: number;
+}
 export interface EditorLineRenderInput {
     readonly text: string;
     readonly mentions: readonly MentionRange[];
     readonly mentionStyle: (text: string) => string;
+    readonly keywords?: readonly EditorKeywordRange[];
+    readonly keywordStyle?: (text: string, index: number, length: number) => string;
     readonly cursor: EditorLineCursor | undefined;
     readonly firstGrapheme: (text: string) => string;
 }
@@ -16,6 +23,8 @@ export interface EditorLineRenderResult {
     /** True when a fake cursor cell was appended past the text (adds one column). */
     readonly cursorAppended: boolean;
 }
+/** Splits runs found in `lines.join("\n")` into per-logical-line pieces keyed by line index. */
+export declare function keywordRangesByLine(lines: readonly string[], runs: readonly MentionRange[]): Map<number, EditorKeywordRange[]>;
 /**
  * Compose one visible editor row: mention ranges get `mentionStyle`, the
  * cursor grapheme gets reverse video, and every fragment is styled on its

package/dist/components/editor-line-render.js

@@ -4,6 +4,39 @@ function clampMentions(mentions, length) {
         .map((range) => ({ start: Math.max(0, range.start), end: Math.min(length, range.end) }))
         .filter((range) => range.start < range.end);
 }
+/** Splits runs found in `lines.join("\n")` into per-logical-line pieces keyed by line index. */
+export function keywordRangesByLine(lines, runs) {
+    const byLine = new Map();
+    let lineStart = 0;
+    for (let line = 0; line < lines.length; line++) {
+        const lineEnd = lineStart + (lines[line]?.length ?? 0);
+        for (const run of runs) {
+            const start = Math.max(run.start, lineStart);
+            const end = Math.min(run.end, lineEnd);
+            if (start >= end)
+                continue;
+            const pieces = byLine.get(line) ?? [];
+            pieces.push({
+                start: start - lineStart,
+                end: end - lineStart,
+                runStart: run.start - lineStart,
+                runLength: run.end - run.start,
+            });
+            byLine.set(line, pieces);
+        }
+        lineStart = lineEnd + 1;
+    }
+    return byLine;
+}
+function styleKeywordSegment(segment, from, range, style) {
+    let out = "";
+    let offset = from;
+    for (const char of segment) {
+        out += style(char, offset - range.runStart, range.runLength);
+        offset += char.length;
+    }
+    return out;
+}
 function cutPoints(length, mentions, cursorGlyph) {
     const cuts = new Set([0, length]);
     for (const range of mentions) {
@@ -24,11 +57,16 @@ function cutPoints(length, mentions, cursorGlyph) {
 export function renderEditorLine(input) {
     const { text, cursor } = input;
     const mentions = clampMentions(input.mentions, text.length);
+    const keywordStyle = input.keywordStyle;
+    const keywords = keywordStyle
+        ? (input.keywords ?? []).filter((range) => Math.max(0, range.start) < Math.min(text.length, range.end) &&
+            !mentions.some((mention) => range.start < mention.end && mention.start < range.end))
+        : [];
     const cursorInText = cursor !== undefined && cursor.pos < text.length;
     const cursorGlyph = cursorInText && cursor.drawFakeCursor
         ? { start: cursor.pos, end: cursor.pos + input.firstGrapheme(text.slice(cursor.pos)).length }
         : undefined;
-    const points = cutPoints(text.length, mentions, cursorGlyph);
+    const points = cutPoints(text.length, [...mentions, ...clampMentions(keywords, text.length)], cursorGlyph);
     let out = "";
     for (let index = 0; index < points.length - 1; index++) {
         const from = points[index] ?? 0;
@@ -42,6 +80,10 @@ export function renderEditorLine(input) {
         else if (mentions.some((range) => from >= range.start && to <= range.end)) {
             out += input.mentionStyle(segment);
         }
+        else if (keywordStyle) {
+            const keyword = keywords.find((range) => from >= range.start && to <= range.end);
+            out += keyword ? styleKeywordSegment(segment, from, keyword, keywordStyle) : segment;
+        }
         else {
             out += segment;
         }

package/dist/components/editor.d.ts

@@ -1,4 +1,4 @@
-import type { AutocompleteProvider } from "../autocomplete.ts";
+import type { AutocompleteProvider, MentionRange } from "../autocomplete.ts";
 import type { EditorSubmitDetails } from "../editor-component.ts";
 import { type EditorImageState } from "../image-markers.ts";
 import { type EditorPasteState } from "../paste-markers.ts";
@@ -27,10 +27,22 @@ export interface TextChunk {
  * @returns Array of chunks with text and position information
  */
 export declare function wordWrapLine(line: string, maxWidth: number, preSegmented?: Intl.SegmentData[]): TextChunk[];
+/**
+ * Per-character decoration for keyword runs found in the whole editor text
+ * (lines joined with "\n"). `style` receives one character plus its offset
+ * within the run and the run length, so a gradient stays continuous across
+ * wrapped rows and logical lines. Decoration only: it never changes widths.
+ */
+export interface EditorKeywordHighlight {
+    find: (text: string) => readonly MentionRange[];
+    style: (text: string, index: number, length: number) => string;
+}
 export interface EditorTheme {
     borderColor: (str: string) => string;
     /** Style for resolved mention tokens (for example a known `$skill`); omit to render them plain. */
     mention?: (str: string) => string;
+    /** Optional keyword-run decoration; a mention or the cursor grapheme takes precedence over it. */
+    keywordHighlight?: EditorKeywordHighlight;
     /**
      * Theme for the autocomplete/slash SelectList built by
      * createAutocompleteList(). May carry the optional `renderRow` seam (see
@@ -61,6 +73,7 @@ export declare class Editor implements Component, Focusable {
     private renderedVisibleLineCount;
     private renderedAutocompleteHeight;
     private scrollOffset;
+    private keywordRunsCache?;
     borderColor: (str: string) => string;
     private autocompleteProvider?;
     private autocompleteTriggerCharacters;
@@ -153,6 +166,7 @@ export declare class Editor implements Component, Focusable {
     private getWrappedLine;
     protected renderTopBorder(width: number, hiddenLineCount: number): string;
     protected renderBottomBorder(width: number, hiddenLineCount: number): string;
+    private keywordRangesByLine;
     render(width: number): string[];
     handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
     handleInput(data: string): void;

package/dist/components/editor.js

@@ -9,7 +9,7 @@ import { CURSOR_MARKER, } from "../tui.js";
 import { UndoStack } from "../undo-stack.js";
 import { autocompleteBoundaryRegex, autocompleteSeparatorRegex, cjkBreakRegex, getGraphemeSegmenter, getWordSegmenter, isWhitespaceChar, sliceByColumn, visibleWidth, } from "../utils.js";
 import { findWordBackward, findWordForward } from "../word-navigation.js";
-import { renderEditorLine } from "./editor-line-render.js";
+import { keywordRangesByLine, renderEditorLine } from "./editor-line-render.js";
 import { SelectList } from "./select-list.js";
 const graphemeSegmenter = getGraphemeSegmenter();
 const wordSegmenter = getWordSegmenter();
@@ -461,6 +461,13 @@ export class Editor {
         const border = hiddenLineCount > 0 ? createScrollBorder("↓", hiddenLineCount, width) : "─".repeat(width);
         return this.borderColor(border);
     }
+    keywordRangesByLine(highlight) {
+        const text = this.state.lines.join("\n");
+        if (this.keywordRunsCache?.text !== text) {
+            this.keywordRunsCache = { text, byLine: keywordRangesByLine(this.state.lines, highlight.find(text)) };
+        }
+        return this.keywordRunsCache.byLine;
+    }
     render(width) {
         const maxPadding = Math.max(0, Math.floor((width - 1) / 2));
         const paddingX = Math.min(this.paddingX, maxPadding);
@@ -518,6 +525,14 @@ export class Editor {
                 end: range.end - layoutLine.startIndex,
             }));
         };
+        const keywordHighlight = this.theme.keywordHighlight;
+        const keywordRangesByLine = keywordHighlight ? this.keywordRangesByLine(keywordHighlight) : undefined;
+        const keywordRangesFor = (layoutLine) => (keywordRangesByLine?.get(layoutLine.logicalLine) ?? []).map((range) => ({
+            start: range.start - layoutLine.startIndex,
+            end: range.end - layoutLine.startIndex,
+            runStart: range.runStart - layoutLine.startIndex,
+            runLength: range.runLength,
+        }));
         for (const layoutLine of visibleLines) {
             let lineVisibleWidth = visibleWidth(layoutLine.text);
             let cursorInPadding = false;
@@ -529,6 +544,8 @@ export class Editor {
                 text: layoutLine.text,
                 mentions: mentionRangesFor(layoutLine),
                 mentionStyle: mentionStyle ?? ((text) => text),
+                keywords: keywordRangesFor(layoutLine),
+                keywordStyle: keywordHighlight?.style,
                 cursor,
                 firstGrapheme: (text) => [...this.segment(text, "grapheme")][0]?.segment ?? "",
             });

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { type AutocompleteItem, type AutocompleteProvider, type AutocompleteSugg
 export { backgroundAnsi, type Color, type ColorMixSpace, colorToHex, colorToOkhsl, colorToOklch, colorToRgb, foregroundAnsi, type IndexedColor, indexedColor, mixColors, type OkhslChannels, type OklchChannels, type OklchColorValue, okhslColor, oklchColor, parseColor, type RgbColorValue, rgbColor, styleText, styleTextWithAnsi, type TerminalColorMode, type TextAttributes, type TextStyle, } from "./colors.ts";
 export { Box } from "./components/box.ts";
 export { CancellableLoader } from "./components/cancellable-loader.ts";
-export { Editor, type EditorOptions, type EditorTheme, } from "./components/editor.ts";
+export { Editor, type EditorKeywordHighlight, type EditorOptions, type EditorTheme, } from "./components/editor.ts";
 export { HStack } from "./components/h-stack.ts";
 export { Image, type ImageOptions, type ImageTheme } from "./components/image.ts";
 export { Input } from "./components/input.ts";

package/dist/tui.js

@@ -2829,7 +2829,7 @@ export class TuiBase extends Container {
         }
         buffer = this.finishFrame(buffer, cursorPos, newLines.length, finalCursorRow);
         if (process.env.PI_TUI_DEBUG === "1") {
-            const debugDir = "/tmp/tui";
+            const debugDir = path.join(os.tmpdir(), "tui");
             fs.mkdirSync(debugDir, { recursive: true });
             const debugPath = path.join(debugDir, `render-${Date.now()}-${Math.random().toString(36).slice(2)}.log`);
             const debugData = [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@code-yeongyu/senpi-tui",
-	"version": "2026.10.11",
+	"version": "2026.10.12",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"type": "module",
 	"main": "dist/index.js",
@@ -10,7 +10,7 @@
 		"build:native:darwin": "native/darwin/build.sh",
 		"build:native:linux": "native/linux/build.sh",
 		"build:native:win32": "node native/win32/build.mjs",
-		"test": "node --test --import tsx --import ./test/setup-multiplexer-env.mjs --test-reporter=dot --test-reporter-destination=stdout test/*.test.ts",
+		"test": "node ../../scripts/run-tests.mjs node --test --import tsx --import ./test/setup-multiplexer-env.mjs --test-reporter=dot --test-reporter-destination=stdout test/*.test.ts",
 		"prepublishOnly": "npm run clean && npm run build",
 		"bench:frame-cost": "tsx bench/frame-cost.ts"
 	},