@tuidom/elements 0.2.1 → 0.2.3

package/dist/inputbox/inputElement.d.ts

@@ -18,11 +18,33 @@ export declare class InputElement extends TUIElement {
     readonly inputState: InputState;
     placeholder: string | undefined;
     showBorder: boolean;
+    /**
+     * Маска поля пароля: каждый графемный кластер значения рисуется этой
+     * строкой, сам текст на экран не попадает и не отдаётся инспектору.
+     * `undefined` — обычное поле. Модель (`inputState`) хранит настоящий текст:
+     * маска — это только представление, редактирование и `onChange` работают
+     * по-прежнему с реальным значением.
+     */
+    maskChar: string | undefined;
     onChange: ((value: string) => void) | undefined;
     private scrollX;
     constructor(inputState?: InputState);
-    /** Наблюдаемость для инспектора/e2e: текст, курсор, выделение, плейсхолдер. */
+    /**
+     * Наблюдаемость для инспектора/e2e: текст, курсор, выделение, плейсхолдер.
+     * Под маской (`maskChar`) отдаётся ровно то, что на экране, — секрет наружу
+     * не уходит; `cursorOffset` при этом тоже смещение в маске.
+     */
     inspectState(): Record<string, unknown>;
+    /**
+     * Что рисуем и где в нарисованном стоят курсор и выделение.
+     *
+     * Без маски — сам текст и его же смещения. С маской — по одному
+     * {@link maskChar} на графемный кластер, а смещения пересчитаны в этот новый
+     * текст: курсор за N-й графемой стоит за N-й маской. Смещения считаем через
+     * длину самой маски, а не «одна графема = один символ», — маской может быть
+     * и многокодовый глиф.
+     */
+    private displayView;
     getMinIntrinsicWidth(_height: number): number;
     getMinIntrinsicHeight(_width: number): number;
     getMaxIntrinsicHeight(_width: number): number;

package/dist/inputbox/inputElement.js

@@ -19,6 +19,14 @@ export class InputElement extends TUIElement {
     inputState;
     placeholder = undefined;
     showBorder = false;
+    /**
+     * Маска поля пароля: каждый графемный кластер значения рисуется этой
+     * строкой, сам текст на экран не попадает и не отдаётся инспектору.
+     * `undefined` — обычное поле. Модель (`inputState`) хранит настоящий текст:
+     * маска — это только представление, редактирование и `onChange` работают
+     * по-прежнему с реальным значением.
+     */
+    maskChar = undefined;
     onChange = undefined;
     scrollX = 0;
     constructor(inputState) {
@@ -29,15 +37,49 @@ export class InputElement extends TUIElement {
         // ядро ставит focus-состояние и перерезолвит стиль (render дёргается).
         this.style = { fg: "input.foreground", bg: "input.background" };
     }
-    /** Наблюдаемость для инспектора/e2e: текст, курсор, выделение, плейсхолдер. */
+    /**
+     * Наблюдаемость для инспектора/e2e: текст, курсор, выделение, плейсхолдер.
+     * Под маской (`maskChar`) отдаётся ровно то, что на экране, — секрет наружу
+     * не уходит; `cursorOffset` при этом тоже смещение в маске.
+     */
     inspectState() {
+        const view = this.displayView();
         return {
-            value: this.inputState.value,
-            cursorOffset: this.inputState.cursorOffset,
+            value: view.text,
+            cursorOffset: view.cursorOffset,
             hasSelection: this.inputState.hasSelection,
             showsPlaceholder: this.inputState.value.length === 0 && this.placeholder !== undefined,
         };
     }
+    /**
+     * Что рисуем и где в нарисованном стоят курсор и выделение.
+     *
+     * Без маски — сам текст и его же смещения. С маской — по одному
+     * {@link maskChar} на графемный кластер, а смещения пересчитаны в этот новый
+     * текст: курсор за N-й графемой стоит за N-й маской. Смещения считаем через
+     * длину самой маски, а не «одна графема = один символ», — маской может быть
+     * и многокодовый глиф.
+     */
+    displayView() {
+        const state = this.inputState;
+        const mask = this.maskChar;
+        if (mask === undefined) {
+            return {
+                text: state.text,
+                cursorOffset: state.cursorOffset,
+                selectionStart: state.selectionStart,
+                selectionEnd: state.selectionEnd,
+            };
+        }
+        const slots = new DisplayLine(state.text).slots;
+        const toMask = (offset) => slots.filter((slot) => slot.offset < offset).length * mask.length;
+        return {
+            text: mask.repeat(slots.length),
+            cursorOffset: toMask(state.cursorOffset),
+            selectionStart: toMask(state.selectionStart),
+            selectionEnd: toMask(state.selectionEnd),
+        };
+    }
     // ─── Layout ─────────────────────────────────────────────────────────────
     getMinIntrinsicWidth(_height) {
         return this.showBorder ? 5 : 3;
@@ -57,8 +99,11 @@ export class InputElement extends TUIElement {
     render(context) {
         const w = this.layoutSize.width;
         const h = this.layoutSize.height;
-        const text = this.inputState.text;
-        const cursorOffset = this.inputState.cursorOffset;
+        // Рисуем ПРЕДСТАВЛЕНИЕ значения: без маски это сам текст, под маской —
+        // её символы со смещениями, пересчитанными в них.
+        const view = this.displayView();
+        const text = view.text;
+        const cursorOffset = view.cursorOffset;
         const focused = this.isFocused;
         const contentXStart = this.showBorder ? 1 : 0;
         const contentY = this.showBorder ? 1 : 0;
@@ -94,7 +139,7 @@ export class InputElement extends TUIElement {
             });
         }
         else if (this.inputState.hasSelection) {
-            this.renderTextWithSelection(textContext, dl, text, contentXStart, contentY);
+            this.renderTextWithSelection(textContext, dl, text, view, contentXStart, contentY);
         }
         else {
             textContext.drawText(contentXStart - this.scrollX, contentY, text, { fg, bg });
@@ -109,9 +154,11 @@ export class InputElement extends TUIElement {
             /* v8 ignore stop */
         }
     }
-    renderTextWithSelection(context, dl, text, contentXStart, contentY) {
-        const selStart = this.inputState.selectionStart;
-        const selEnd = this.inputState.selectionEnd;
+    renderTextWithSelection(context, dl, text, view, contentXStart, contentY) {
+        // Границы выделения берём из представления: под маской они смещения в
+        // ней, а `text`/`dl` — тоже она.
+        const selStart = view.selectionStart;
+        const selEnd = view.selectionEnd;
         const before = text.slice(0, selStart);
         const selected = text.slice(selStart, selEnd);
         const after = text.slice(selEnd);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tuidom/elements",
-    "version": "0.2.1",
+    "version": "0.2.3",
     "type": "module",
     "description": "Experimental terminal UI DOM — widgets: lists, trees, menus, inputs, quick pick. API is unstable.",
     "license": "MIT",
@@ -28,6 +28,6 @@
         "./*": "./dist/*.js"
     },
     "dependencies": {
-        "@tuidom/core": "0.2.1"
+        "@tuidom/core": "0.2.3"
     }
 }