@gajae-code/tui 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+## [0.1.3] - 2026-05-28
+
+### Changed
+
+- Released the current dev branch fixes with refreshed 0.1.3 package metadata.
+
+## [0.1.2] - 2026-05-28
+
+### Changed
+
+- Updated package metadata for the Gajae Code npm publication.
+
 ## [15.3.2] - 2026-05-25
 
 ### Fixed

package/dist/types/components/editor.d.ts

@@ -16,6 +16,7 @@ export interface EditorTopBorder {
     /** Visible width of the content */
     width: number;
 }
+export type EditorBorderStyle = "round" | "sharp";
 interface HistoryEntry {
     prompt: string;
 }
@@ -49,7 +50,11 @@ export declare class Editor implements Component, Focusable {
      * Show or hide the editor border chrome.
      */
     setBorderVisible(borderVisible: boolean): void;
+    setBorderStyle(borderStyle: EditorBorderStyle): void;
+    setClosedBorderBox(closedBorderBox: boolean): void;
     setPromptGutter(promptGutter: string | undefined): void;
+    setInputPrefix(inputPrefix: string | undefined): void;
+    setPlaceholder(placeholder: string | undefined): void;
     /**
      * Get the available width for top border content given a total terminal width.
      * Accounts for the border characters and horizontal padding when visible.

package/package.json

@@ -1,10 +1,10 @@
 {
 	"type": "module",
 	"name": "@gajae-code/tui",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
-	"homepage": "https://gajae-code.dev",
-	"author": "Can Boluk",
+	"homepage": "https://gaebal-gajae.dev",
+	"author": "Yeachan-Heo",
 	"contributors": [
 		"Mario Zechner"
 	],
@@ -37,8 +37,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@gajae-code/natives": "0.1.1",
-		"@gajae-code/utils": "0.1.1",
+		"@gajae-code/natives": "0.1.3",
+		"@gajae-code/utils": "0.1.3",
 		"lru-cache": "11.3.6",
 		"marked": "^18.0.3"
 	},

package/src/components/editor.ts

@@ -309,6 +309,8 @@ export interface EditorTopBorder {
 	width: number;
 }
 
+export type EditorBorderStyle = "round" | "sharp";
+
 interface HistoryEntry {
 	prompt: string;
 }
@@ -338,6 +340,9 @@ export class Editor implements Component, Focusable {
 	/** Display width of the cursorOverride glyph (needed because override may contain ANSI escapes). */
 	cursorOverrideWidth: number | undefined;
 	#promptGutter: string | undefined;
+	#inputPrefix: string | undefined;
+	#inputPrefixWidth = 0;
+	#placeholder: string | undefined;
 
 	// Store last layout width for cursor navigation
 	#lastLayoutWidth: number = 80;
@@ -395,6 +400,8 @@ export class Editor implements Component, Focusable {
 	// Custom top border (for status line integration)
 	#topBorderContent?: EditorTopBorder;
 	#borderVisible = true;
+	#borderStyle: EditorBorderStyle = "round";
+	#closedBorderBox = false;
 
 	constructor(theme: EditorTheme) {
 		this.#theme = theme;
@@ -420,10 +427,28 @@ export class Editor implements Component, Focusable {
 		this.#borderVisible = borderVisible;
 	}
 
+	setBorderStyle(borderStyle: EditorBorderStyle): void {
+		this.#borderStyle = borderStyle;
+	}
+
+	setClosedBorderBox(closedBorderBox: boolean): void {
+		this.#closedBorderBox = closedBorderBox;
+	}
+
 	setPromptGutter(promptGutter: string | undefined): void {
 		this.#promptGutter = promptGutter;
 	}
 
+	setInputPrefix(inputPrefix: string | undefined): void {
+		this.#inputPrefix = inputPrefix;
+		this.#inputPrefixWidth = inputPrefix ? visibleWidth(inputPrefix) : 0;
+	}
+
+	setPlaceholder(placeholder: string | undefined): void {
+		const trimmed = placeholder?.trim();
+		this.#placeholder = trimmed ? trimmed : undefined;
+	}
+
 	/**
 	 * Get the available width for top border content given a total terminal width.
 	 * Accounts for the border characters and horizontal padding when visible.
@@ -690,11 +715,12 @@ export class Editor implements Component, Focusable {
 		const borderVisible = this.#borderVisible;
 		const promptGutter = this.#getPromptGutter(width, paddingX);
 		const contentAreaWidth = this.#getContentWidth(width, paddingX);
-		const layoutWidth = this.#getLayoutWidth(width, paddingX);
+		const inputPrefixWidth = this.#inputPrefixWidth;
+		const layoutWidth = Math.max(1, this.#getLayoutWidth(width, paddingX) - inputPrefixWidth);
 		this.#lastLayoutWidth = layoutWidth;
 
-		// Box-drawing characters for rounded corners
-		const box = this.#theme.symbols.boxRound;
+		// Box-drawing characters for the configured input box shape.
+		const box = this.#borderStyle === "sharp" ? this.#theme.symbols.boxSharp : this.#theme.symbols.boxRound;
 		const borderWidth = this.#getHorizontalChromeWidth(paddingX);
 		const topLeft = this.borderColor(`${box.topLeft}${box.horizontal.repeat(paddingX)}`);
 		const topRight = this.borderColor(`${box.horizontal.repeat(paddingX)}${box.topRight}`);
@@ -733,25 +759,35 @@ export class Editor implements Component, Focusable {
 		// Render each layout line
 		// Emit hardware cursor marker only when focused and not showing autocomplete
 		const emitCursorMarker = this.focused && !this.#autocompleteState;
-		const lineContentWidth = contentAreaWidth;
+		const lineContentWidth = Math.max(0, contentAreaWidth - inputPrefixWidth);
 
 		// Compute inline hint text (dim ghost text after cursor)
 		const inlineHint = this.#getInlineHint();
 		const hintStyle = this.#theme.hintStyle ?? ((t: string) => `\x1b[2m${t}\x1b[0m`);
+		const showPlaceholder = this.#isEditorEmpty() && !inlineHint && !!this.#placeholder;
 
 		for (let visibleIndex = 0; visibleIndex < visibleLayoutLines.length; visibleIndex++) {
 			const layoutLine = visibleLayoutLines[visibleIndex]!;
 			let displayText = layoutLine.text;
 			let displayWidth = visibleWidth(layoutLine.text);
 			let cursorInPadding = false;
+			const absoluteVisibleIndex = this.#scrollOffset + visibleIndex;
 			const showPromptGutter = promptGutter !== undefined && visibleIndex === 0;
 			const gutterText =
 				promptGutter === undefined ? "" : showPromptGutter ? promptGutter.firstLine : promptGutter.continuation;
+			const inputPrefix = absoluteVisibleIndex === 0 ? (this.#inputPrefix ?? "") : padding(inputPrefixWidth);
 
 			// Add cursor if this line has it
-			const hasCursor = layoutLine.hasCursor && layoutLine.cursorPos !== undefined;
+			let hasCursor = layoutLine.hasCursor && layoutLine.cursorPos !== undefined;
 			const marker = emitCursorMarker ? CURSOR_MARKER : "";
 
+			if (showPlaceholder) {
+				const hintText = hintStyle(truncateToWidth(this.#placeholder ?? "", lineContentWidth));
+				displayText = hintText;
+				displayWidth = Math.min(visibleWidth(this.#placeholder ?? ""), lineContentWidth);
+				hasCursor = false;
+			}
+
 			if (!borderVisible && displayWidth > lineContentWidth) {
 				displayText = sliceByColumn(displayText, 0, lineContentWidth, true);
 				displayWidth = visibleWidth(displayText);
@@ -800,10 +836,11 @@ export class Editor implements Component, Focusable {
 				if (marker) {
 					const before = displayText.slice(0, layoutLine.cursorPos);
 					const after = displayText.slice(layoutLine.cursorPos);
-					if (after.length === 0 && inlineHint) {
-						const hintText = hintStyle(truncateToWidth(inlineHint, Math.max(0, lineContentWidth - displayWidth)));
+					const ghostText = showPlaceholder ? this.#placeholder : inlineHint;
+					if (after.length === 0 && ghostText) {
+						const hintText = hintStyle(truncateToWidth(ghostText, Math.max(0, lineContentWidth - displayWidth)));
 						displayText = before + marker + hintText;
-						displayWidth += visibleWidth(inlineHint);
+						displayWidth += Math.min(visibleWidth(ghostText), Math.max(0, lineContentWidth - displayWidth));
 					} else if (after.length === 0 && !borderVisible && displayWidth >= lineContentWidth) {
 						displayText = this.#renderTerminalCursorMarker(before, marker, lineContentWidth);
 					} else {
@@ -826,6 +863,7 @@ export class Editor implements Component, Focusable {
 				} else if (this.cursorOverride) {
 					// Cursor override replaces the normal end-of-text cursor glyph
 					const overrideWidth = this.cursorOverrideWidth ?? 1;
+					const ghostText = showPlaceholder ? this.#placeholder : inlineHint;
 					if (!borderVisible && displayWidth + overrideWidth > lineContentWidth) {
 						// Borderless editors have no spare padding cell for an end-of-line cursor glyph.
 						// Preserve cursorOverride by replacing the tail of the line with it.
@@ -835,11 +873,11 @@ export class Editor implements Component, Focusable {
 						});
 						displayText = widthLimitedCursor.text;
 						displayWidth = widthLimitedCursor.width;
-					} else if (inlineHint) {
+					} else if (ghostText) {
 						const availWidth = Math.max(0, lineContentWidth - displayWidth - overrideWidth);
-						const hintText = hintStyle(truncateToWidth(inlineHint, availWidth));
+						const hintText = hintStyle(truncateToWidth(ghostText, availWidth));
 						displayText = before + marker + this.cursorOverride + hintText;
-						displayWidth += overrideWidth + Math.min(visibleWidth(inlineHint), availWidth);
+						displayWidth += overrideWidth + Math.min(visibleWidth(ghostText), availWidth);
 					} else {
 						displayText = before + marker + this.cursorOverride;
 						displayWidth += overrideWidth;
@@ -847,17 +885,18 @@ export class Editor implements Component, Focusable {
 				} else {
 					// Cursor is at the end - add thin cursor glyph
 					const { text: cursor, width: cursorWidth } = this.#getStyledInputCursor();
+					const ghostText = showPlaceholder ? this.#placeholder : inlineHint;
 					if (!borderVisible && displayWidth + cursorWidth > lineContentWidth) {
 						// Borderless editors have no spare padding cell for an end-of-line cursor glyph.
 						// Highlight the last grapheme so the cursor stays visible without consuming width.
 						const widthLimitedCursor = this.#renderEndOfLineCursorAtWidthLimit(before, marker, lineContentWidth);
 						displayText = widthLimitedCursor.text;
 						displayWidth = widthLimitedCursor.width;
-					} else if (inlineHint) {
+					} else if (ghostText) {
 						const availWidth = Math.max(0, lineContentWidth - displayWidth - cursorWidth);
-						const hintText = hintStyle(truncateToWidth(inlineHint, availWidth));
+						const hintText = hintStyle(truncateToWidth(ghostText, availWidth));
 						displayText = before + marker + cursor + hintText;
-						displayWidth += cursorWidth + Math.min(visibleWidth(inlineHint), availWidth);
+						displayWidth += cursorWidth + Math.min(visibleWidth(ghostText), availWidth);
 					} else {
 						displayText = before + marker + cursor;
 						displayWidth += cursorWidth;
@@ -868,29 +907,41 @@ export class Editor implements Component, Focusable {
 				}
 			}
 
+			const displayWithPrefix = inputPrefix + displayText;
 			const linePad = padding(Math.max(0, lineContentWidth - displayWidth));
 
 			if (!borderVisible) {
-				result.push(gutterText + displayText + linePad);
+				result.push(gutterText + displayWithPrefix + linePad);
 				continue;
 			}
 
-			// All lines have consistent borders based on padding
+			// All lines have consistent borders based on padding.
 			const isLastLine = visibleIndex === visibleLayoutLines.length - 1;
 			const rightPaddingWidth = Math.max(0, paddingX - (cursorInPadding ? 1 : 0));
-			if (isLastLine) {
+			if (this.#closedBorderBox) {
+				const leftBorder = this.borderColor(`${box.vertical}${padding(paddingX)}`);
+				const rightBorder = this.borderColor(`${padding(rightPaddingWidth)}${box.vertical}`);
+				result.push(leftBorder + displayWithPrefix + linePad + rightBorder);
+			} else if (isLastLine) {
 				const bottomRightPadding = Math.max(0, paddingX - 1 - (cursorInPadding ? 1 : 0));
 				const bottomRightAdjusted = this.borderColor(
 					`${padding(bottomRightPadding)}${box.horizontal}${box.bottomRight}`,
 				);
-				result.push(`${bottomLeft}${displayText}${linePad}${bottomRightAdjusted}`);
+				result.push(`${bottomLeft}${displayWithPrefix}${linePad}${bottomRightAdjusted}`);
 			} else {
 				const leftBorder = this.borderColor(`${box.vertical}${padding(paddingX)}`);
 				const rightBorder = this.borderColor(`${padding(rightPaddingWidth)}${box.vertical}`);
-				result.push(leftBorder + displayText + linePad + rightBorder);
+				result.push(leftBorder + displayWithPrefix + linePad + rightBorder);
 			}
 		}
 
+		if (borderVisible && this.#closedBorderBox) {
+			const bottomFillWidth = Math.max(0, width - borderWidth * 2);
+			const bottomLeftClosed = this.borderColor(`${box.bottomLeft}${box.horizontal.repeat(paddingX)}`);
+			const bottomRightClosed = this.borderColor(`${box.horizontal.repeat(paddingX)}${box.bottomRight}`);
+			result.push(bottomLeftClosed + horizontal.repeat(bottomFillWidth) + bottomRightClosed);
+		}
+
 		// Add autocomplete list if active
 		if (this.#autocompleteState && this.#autocompleteList) {
 			const autocompleteResult = this.#autocompleteList.render(width);