@tuidom/elements 0.2.1 → 0.3.0

package/dist/editorpart/editorPartElement.js

@@ -69,7 +69,7 @@ export class EditorPartElement extends TUIElement {
      */
     setViews(views, weights) {
         this.views = [...views];
-        const raw = weights !== undefined && weights.length === views.length ? [...weights] : [];
+        const raw = weights?.length === views.length ? [...weights] : [];
         this.weightsValue = this.normalizeWeights(raw);
         this.maximizedIndexValue = null;
         this.rebuildSashes();

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/dist/list/listViewElement.js

@@ -519,8 +519,9 @@ export class ListViewElement extends ScrollableElement {
         this.hasCollapsibleRows = hasCollapsible;
         // Курсор возвращается на прежнюю строку по id; если она пропала (скрыта,
         // свёрнута под родителя) — на ближайший оставшийся индекс, не прыгая наверх.
-        if (this.pendingCursorId !== null && this.visibleIndexById.has(this.pendingCursorId)) {
-            this.cursorIndex = this.visibleIndexById.get(this.pendingCursorId);
+        const pendingIndex = this.pendingCursorId !== null ? this.visibleIndexById.get(this.pendingCursorId) : undefined;
+        if (pendingIndex !== undefined) {
+            this.cursorIndex = pendingIndex;
         }
         else if (out.length === 0) {
             this.cursorIndex = 0;
@@ -584,8 +585,10 @@ export class ListViewElement extends ScrollableElement {
      * тогда новый последний ребёнок строки встаёт в самый хвост проекции.
      */
     isProjectionTail(id) {
-        // Вызывается при видимом родителе — проекция материализована и непуста.
-        let cursor = this.visibleRows[this.visibleRows.length - 1];
+        // Вызывается при видимом родителе — проекция материализована и непуста,
+        // так что ensureProjection здесь просто отдаёт готовый массив.
+        const rows = this.ensureProjection();
+        let cursor = rows[rows.length - 1];
         while (cursor) {
             if (cursor.id === id)
                 return true;
@@ -794,7 +797,7 @@ export class ListViewElement extends ScrollableElement {
         for (let i = 0; i < count; i++) {
             const idx = (start + i) % count;
             const label = rows[idx].label;
-            if (label !== undefined && label.toLowerCase().startsWith(prefix)) {
+            if (label?.toLowerCase().startsWith(prefix) === true) {
                 this.setSelectedIndex(idx);
                 return;
             }
@@ -802,7 +805,7 @@ export class ListViewElement extends ScrollableElement {
     }
     handleExpandOrMoveToChild() {
         const rows = this.ensureProjection();
-        const row = rows[this.cursorIndex];
+        const row = rows.at(this.cursorIndex);
         if (!row || !this.rowHasChildren(row.id))
             return;
         if (this.collapsedIds.has(row.id)) {
@@ -815,7 +818,7 @@ export class ListViewElement extends ScrollableElement {
     }
     handleCollapseOrMoveToParent() {
         const rows = this.ensureProjection();
-        const row = rows[this.cursorIndex];
+        const row = rows.at(this.cursorIndex);
         if (!row)
             return;
         if (this.rowHasChildren(row.id) && !this.collapsedIds.has(row.id)) {
@@ -832,14 +835,14 @@ export class ListViewElement extends ScrollableElement {
     }
     activateCursorRow() {
         const rows = this.ensureProjection();
-        const row = rows[this.cursorIndex];
+        const row = rows.at(this.cursorIndex);
         if (!row)
             return;
         this.onActivate?.(row.element);
     }
     toggleCursorRow() {
         const rows = this.ensureProjection();
-        const row = rows[this.cursorIndex];
+        const row = rows.at(this.cursorIndex);
         if (!row || !this.rowHasChildren(row.id))
             return;
         this.toggleCollapsed(row.id);

package/dist/menu/popupMenuElement.js

@@ -189,7 +189,7 @@ export class PopupMenuElement extends TUIElement {
                 return true;
             current = current.getParent();
         }
-        return this.child !== null && this.child.menu.ownsElement(target);
+        return this.child?.menu.ownsElement(target) === true;
     }
     /** Каскадно закрывает всю цепочку открытых подменю. */
     closeSubmenus() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@tuidom/elements",
-    "version": "0.2.1",
+    "version": "0.3.0",
     "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.3.0"
     }
 }