@tuidom/elements 0.1.0

package/dist/inputbox/inputState.js

@@ -0,0 +1,326 @@
+import { DisplayLine } from "@tuidom/core/common/displayLine";
+/**
+ * Pure state model for a single-line text input.
+ * Tracks the text and cursor position (as a grapheme-aware offset).
+ * No UI dependencies.
+ */
+export class InputState {
+    textValue = "";
+    cursorOffsetValue = 0;
+    anchorOffset = null;
+    undoStack = [];
+    redoStack = [];
+    lastEditKind = null;
+    get text() {
+        return this.textValue;
+    }
+    get cursorOffset() {
+        return this.cursorOffsetValue;
+    }
+    get value() {
+        return this.textValue;
+    }
+    set value(v) {
+        this.textValue = v;
+        this.cursorOffsetValue = v.length;
+        this.anchorOffset = null;
+        // Programmatic content replacement is a fresh baseline — drop edit history.
+        this.undoStack = [];
+        this.redoStack = [];
+        this.lastEditKind = null;
+    }
+    // ─── Undo / Redo ─────────────────────────────────────────
+    get canUndo() {
+        return this.undoStack.length > 0;
+    }
+    get canRedo() {
+        return this.redoStack.length > 0;
+    }
+    undo() {
+        const prev = this.undoStack.pop();
+        if (prev === undefined)
+            return;
+        this.redoStack.push(this.snapshot());
+        this.restore(prev);
+        this.lastEditKind = null;
+    }
+    redo() {
+        const next = this.redoStack.pop();
+        if (next === undefined)
+            return;
+        this.undoStack.push(this.snapshot());
+        this.restore(next);
+        this.lastEditKind = null;
+    }
+    snapshot() {
+        return { text: this.textValue, cursorOffset: this.cursorOffsetValue, anchorOffset: this.anchorOffset };
+    }
+    restore(s) {
+        this.textValue = s.text;
+        this.cursorOffsetValue = s.cursorOffset;
+        this.anchorOffset = s.anchorOffset;
+    }
+    /** Push a snapshot of the current state and invalidate the redo stack. */
+    pushUndo() {
+        this.undoStack.push(this.snapshot());
+        this.redoStack = [];
+    }
+    /** Start a brand-new undo group: snapshot now, and don't coalesce the next edit into it. */
+    breakUndo() {
+        this.pushUndo();
+        this.lastEditKind = null;
+    }
+    /** Record an edit that may coalesce with the previous one when it is of the same kind. */
+    recordEdit(kind) {
+        if (this.lastEditKind !== kind) {
+            this.pushUndo();
+        }
+        this.lastEditKind = kind;
+    }
+    // ─── Selection ───────────────────────────────────────────
+    get hasSelection() {
+        return this.anchorOffset !== null && this.anchorOffset !== this.cursorOffsetValue;
+    }
+    get selectionStart() {
+        if (this.anchorOffset === null)
+            return this.cursorOffsetValue;
+        return Math.min(this.anchorOffset, this.cursorOffsetValue);
+    }
+    get selectionEnd() {
+        if (this.anchorOffset === null)
+            return this.cursorOffsetValue;
+        return Math.max(this.anchorOffset, this.cursorOffsetValue);
+    }
+    get selectedText() {
+        if (!this.hasSelection)
+            return "";
+        return this.textValue.slice(this.selectionStart, this.selectionEnd);
+    }
+    clearSelection() {
+        this.anchorOffset = null;
+        this.lastEditKind = null;
+    }
+    selectAll() {
+        this.anchorOffset = 0;
+        this.cursorOffsetValue = this.textValue.length;
+        this.lastEditKind = null;
+    }
+    selectLeft() {
+        this.anchorOffset ??= this.cursorOffsetValue;
+        this.moveCursorLeftRaw();
+        this.lastEditKind = null;
+    }
+    selectRight() {
+        this.anchorOffset ??= this.cursorOffsetValue;
+        this.moveCursorRightRaw();
+        this.lastEditKind = null;
+    }
+    selectToStart() {
+        this.anchorOffset ??= this.cursorOffsetValue;
+        this.cursorOffsetValue = 0;
+        this.lastEditKind = null;
+    }
+    selectToEnd() {
+        this.anchorOffset ??= this.cursorOffsetValue;
+        this.cursorOffsetValue = this.textValue.length;
+        this.lastEditKind = null;
+    }
+    selectWordLeft() {
+        this.anchorOffset ??= this.cursorOffsetValue;
+        this.cursorOffsetValue = this.wordBoundaryLeft(this.cursorOffsetValue);
+        this.lastEditKind = null;
+    }
+    selectWordRight() {
+        this.anchorOffset ??= this.cursorOffsetValue;
+        this.cursorOffsetValue = this.wordBoundaryRight(this.cursorOffsetValue);
+        this.lastEditKind = null;
+    }
+    deleteSelection() {
+        const start = this.selectionStart;
+        const end = this.selectionEnd;
+        this.textValue = this.textValue.slice(0, start) + this.textValue.slice(end);
+        this.cursorOffsetValue = start;
+        this.anchorOffset = null;
+    }
+    // ─── Editing ─────────────────────────────────────────────
+    /** Insert text at the current cursor position (replaces selection if any). */
+    insert(chars) {
+        // Single-char typing coalesces into one undo step; multi-char (paste) and
+        // typing-over-a-selection each form their own undo group.
+        if (chars.length === 1 && !this.hasSelection) {
+            this.recordEdit("insert");
+        }
+        else {
+            this.breakUndo();
+        }
+        if (this.hasSelection)
+            this.deleteSelection();
+        this.textValue =
+            this.textValue.slice(0, this.cursorOffsetValue) + chars + this.textValue.slice(this.cursorOffsetValue);
+        this.cursorOffsetValue += chars.length;
+    }
+    /** Delete the grapheme cluster immediately to the left of the cursor (Backspace). */
+    deleteLeft() {
+        if (this.hasSelection) {
+            this.breakUndo();
+            this.deleteSelection();
+            return;
+        }
+        if (this.cursorOffsetValue === 0)
+            return;
+        this.recordEdit("delete");
+        const dl = new DisplayLine(this.textValue);
+        for (const slot of dl.slots) {
+            if (slot.offset + slot.length === this.cursorOffsetValue) {
+                this.textValue = this.textValue.slice(0, slot.offset) + this.textValue.slice(this.cursorOffsetValue);
+                this.cursorOffsetValue = slot.offset;
+                return;
+            }
+        }
+        // Fallback: delete one code unit
+        this.textValue =
+            this.textValue.slice(0, this.cursorOffsetValue - 1) + this.textValue.slice(this.cursorOffsetValue);
+        this.cursorOffsetValue--;
+    }
+    /** Delete the grapheme cluster immediately to the right of the cursor (Delete key). */
+    deleteRight() {
+        if (this.hasSelection) {
+            this.breakUndo();
+            this.deleteSelection();
+            return;
+        }
+        if (this.cursorOffsetValue >= this.textValue.length)
+            return;
+        this.recordEdit("delete");
+        const dl = new DisplayLine(this.textValue);
+        for (const slot of dl.slots) {
+            if (slot.offset === this.cursorOffsetValue) {
+                this.textValue =
+                    this.textValue.slice(0, this.cursorOffsetValue) + this.textValue.slice(slot.offset + slot.length);
+                return;
+            }
+        }
+        // Fallback: delete one code unit
+        this.textValue =
+            this.textValue.slice(0, this.cursorOffsetValue) + this.textValue.slice(this.cursorOffsetValue + 1);
+    }
+    /** Move cursor one grapheme to the left (ArrowLeft). */
+    moveCursorLeft() {
+        this.lastEditKind = null;
+        if (this.hasSelection) {
+            this.cursorOffsetValue = this.selectionStart;
+            this.anchorOffset = null;
+            return;
+        }
+        this.anchorOffset = null;
+        this.moveCursorLeftRaw();
+    }
+    /** Move cursor one grapheme to the right (ArrowRight). */
+    moveCursorRight() {
+        this.lastEditKind = null;
+        if (this.hasSelection) {
+            this.cursorOffsetValue = this.selectionEnd;
+            this.anchorOffset = null;
+            return;
+        }
+        this.anchorOffset = null;
+        this.moveCursorRightRaw();
+    }
+    /** Move cursor to the beginning of the line (Home). */
+    moveCursorToStart() {
+        this.anchorOffset = null;
+        this.cursorOffsetValue = 0;
+        this.lastEditKind = null;
+    }
+    /** Move cursor to the end of the line (End). */
+    moveCursorToEnd() {
+        this.anchorOffset = null;
+        this.cursorOffsetValue = this.textValue.length;
+        this.lastEditKind = null;
+    }
+    /** Move cursor to the start of the previous word (Ctrl+ArrowLeft). */
+    moveCursorWordLeft() {
+        this.anchorOffset = null;
+        this.cursorOffsetValue = this.wordBoundaryLeft(this.cursorOffsetValue);
+        this.lastEditKind = null;
+    }
+    /** Move cursor to the end of the next word (Ctrl+ArrowRight). */
+    moveCursorWordRight() {
+        this.anchorOffset = null;
+        this.cursorOffsetValue = this.wordBoundaryRight(this.cursorOffsetValue);
+        this.lastEditKind = null;
+    }
+    /** Delete from cursor to the previous word boundary (Ctrl+Backspace). */
+    deleteWordLeft() {
+        if (this.hasSelection) {
+            this.breakUndo();
+            this.deleteSelection();
+            return;
+        }
+        const target = this.wordBoundaryLeft(this.cursorOffsetValue);
+        if (target === this.cursorOffsetValue)
+            return;
+        this.breakUndo();
+        this.textValue = this.textValue.slice(0, target) + this.textValue.slice(this.cursorOffsetValue);
+        this.cursorOffsetValue = target;
+    }
+    /** Delete from cursor to the next word boundary (Ctrl+Delete). */
+    deleteWordRight() {
+        if (this.hasSelection) {
+            this.breakUndo();
+            this.deleteSelection();
+            return;
+        }
+        const target = this.wordBoundaryRight(this.cursorOffsetValue);
+        if (target === this.cursorOffsetValue)
+            return;
+        this.breakUndo();
+        this.textValue = this.textValue.slice(0, this.cursorOffsetValue) + this.textValue.slice(target);
+    }
+    moveCursorLeftRaw() {
+        if (this.cursorOffsetValue === 0)
+            return;
+        const dl = new DisplayLine(this.textValue);
+        for (const slot of dl.slots) {
+            if (slot.offset + slot.length === this.cursorOffsetValue) {
+                this.cursorOffsetValue = slot.offset;
+                return;
+            }
+        }
+        this.cursorOffsetValue = Math.max(0, this.cursorOffsetValue - 1);
+    }
+    moveCursorRightRaw() {
+        if (this.cursorOffsetValue >= this.textValue.length)
+            return;
+        const dl = new DisplayLine(this.textValue);
+        for (const slot of dl.slots) {
+            if (slot.offset === this.cursorOffsetValue) {
+                this.cursorOffsetValue = slot.offset + slot.length;
+                return;
+            }
+        }
+        this.cursorOffsetValue = Math.min(this.textValue.length, this.cursorOffsetValue + 1);
+    }
+    wordBoundaryLeft(pos) {
+        // Skip non-word chars going left, then skip word chars going left
+        let p = pos;
+        while (p > 0 && !InputState.isWordChar(this.textValue[p - 1]))
+            p--;
+        while (p > 0 && InputState.isWordChar(this.textValue[p - 1]))
+            p--;
+        return p;
+    }
+    wordBoundaryRight(pos) {
+        // Skip non-word chars going right, then skip word chars going right
+        let p = pos;
+        const len = this.textValue.length;
+        while (p < len && !InputState.isWordChar(this.textValue[p]))
+            p++;
+        while (p < len && InputState.isWordChar(this.textValue[p]))
+            p++;
+        return p;
+    }
+    static isWordChar(ch) {
+        return /\w/.test(ch);
+    }
+}

package/dist/layout/boxContainerElement.d.ts

@@ -0,0 +1,27 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import type { StyleColor } from "@tuidom/core/dom/styles/tuiStyle";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export declare class BoxContainerElement extends TUIElement {
+    private bg;
+    private borderFg;
+    private title;
+    private titleFg;
+    private hasSeparator;
+    private child;
+    constructor();
+    setBg(value: StyleColor): void;
+    setBorderFg(value: StyleColor): void;
+    setTitle(value: string | undefined): void;
+    setTitleFg(value: StyleColor): void;
+    setHasSeparator(value: boolean): void;
+    setChild(child: TUIElement | null): void;
+    private get headerRows();
+    /** Вклад рамки (+ строк заголовка) в размер: контент живёт внутри этих insets. */
+    private get contentInsets();
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    getMinIntrinsicHeight(width: number): number;
+    getMaxIntrinsicHeight(width: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+    render(context: RenderContext): void;
+}

package/dist/layout/boxContainerElement.js

@@ -0,0 +1,121 @@
+import { DEFAULT_COLOR } from "@tuidom/core/common/colorUtils";
+import { BoxConstraints, Offset, Point, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { BORDER_THICKNESS } from "@tuidom/core/dom/borderStyle";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export class BoxContainerElement extends TUIElement {
+    bg;
+    borderFg;
+    title;
+    titleFg;
+    hasSeparator;
+    child = null;
+    constructor() {
+        super();
+        this.bg = DEFAULT_COLOR;
+        this.borderFg = DEFAULT_COLOR;
+        this.titleFg = DEFAULT_COLOR;
+        this.hasSeparator = false;
+    }
+    setBg(value) {
+        this.bg = value;
+        this.markDirty();
+    }
+    setBorderFg(value) {
+        this.borderFg = value;
+        this.markDirty();
+    }
+    setTitle(value) {
+        this.title = value;
+        this.markDirty();
+    }
+    setTitleFg(value) {
+        this.titleFg = value;
+        this.markDirty();
+    }
+    setHasSeparator(value) {
+        this.hasSeparator = value;
+        this.markDirty();
+    }
+    setChild(child) {
+        if (this.child) {
+            this.removeChild(this.child);
+        }
+        this.child = child;
+        if (this.child) {
+            this.appendChild(this.child);
+        }
+        this.markDirty();
+    }
+    get headerRows() {
+        if (!this.title)
+            return 0;
+        return this.hasSeparator ? 2 : 1;
+    }
+    /** Вклад рамки (+ строк заголовка) в размер: контент живёт внутри этих insets. */
+    get contentInsets() {
+        return {
+            left: BORDER_THICKNESS,
+            top: BORDER_THICKNESS + this.headerRows,
+            right: BORDER_THICKNESS,
+            bottom: BORDER_THICKNESS,
+        };
+    }
+    getMinIntrinsicWidth(height) {
+        const insetsX = this.contentInsets.left + this.contentInsets.right;
+        if (!this.child)
+            return insetsX;
+        return this.child.getMinIntrinsicWidth(height) + insetsX;
+    }
+    getMaxIntrinsicWidth(height) {
+        const insetsX = this.contentInsets.left + this.contentInsets.right;
+        if (!this.child)
+            return insetsX;
+        return this.child.getMaxIntrinsicWidth(height) + insetsX;
+    }
+    getMinIntrinsicHeight(width) {
+        const insets = this.contentInsets;
+        const insetsY = insets.top + insets.bottom;
+        if (!this.child)
+            return insetsY;
+        return this.child.getMinIntrinsicHeight(Math.max(0, width - insets.left - insets.right)) + insetsY;
+    }
+    getMaxIntrinsicHeight(width) {
+        const insets = this.contentInsets;
+        const insetsY = insets.top + insets.bottom;
+        if (!this.child)
+            return insetsY;
+        return this.child.getMaxIntrinsicHeight(Math.max(0, width - insets.left - insets.right)) + insetsY;
+    }
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        if (this.child) {
+            const insets = this.contentInsets;
+            const childWidth = Math.max(0, containerSize.width - insets.left - insets.right);
+            const childHeight = Math.max(0, containerSize.height - insets.top - insets.bottom);
+            this.layoutChild(this.child, insets.left, insets.top, BoxConstraints.tight(new Size(childWidth, childHeight)));
+        }
+        return containerSize;
+    }
+    render(context) {
+        const w = this.layoutSize.width;
+        const h = this.layoutSize.height;
+        // Fill background + frame (separator row when title has one).
+        const separators = this.title && this.hasSeparator ? [2] : undefined;
+        context.drawBox(0, 0, w, h, {
+            fg: this.resolveColor(this.borderFg),
+            bg: this.resolveColor(this.bg),
+            fill: true,
+            separators,
+        });
+        // Title row (y=1)
+        if (this.title) {
+            const titleX = Math.floor((w - this.title.length) / 2);
+            context.drawText(titleX, 1, this.title, {
+                fg: this.resolveColor(this.titleFg),
+                bg: this.resolveColor(this.bg),
+            });
+        }
+        // Render child
+        this.renderChildren(context);
+    }
+}

package/dist/layout/boxElement.d.ts

@@ -0,0 +1,4 @@
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export declare class BoxElement extends TUIElement {
+    render(context: RenderContext): void;
+}

package/dist/layout/boxElement.js

@@ -0,0 +1,30 @@
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export class BoxElement extends TUIElement {
+    render(context) {
+        const w = this.layoutSize.width;
+        const h = this.layoutSize.height;
+        const resolved = this.resolvedStyle;
+        for (let y = 0; y < h; y++) {
+            for (let x = 0; x < w; x++) {
+                const isTop = y === 0;
+                const isBottom = y === h - 1;
+                const isLeft = x === 0;
+                const isRight = x === w - 1;
+                let char;
+                if ((isTop || isBottom) && (isLeft || isRight)) {
+                    char = "+";
+                }
+                else if (isTop || isBottom) {
+                    char = "-";
+                }
+                else if (isLeft || isRight) {
+                    char = "|";
+                }
+                else {
+                    char = " ";
+                }
+                context.setCell(x, y, { char, fg: resolved.fg, bg: resolved.bg });
+            }
+        }
+    }
+}

package/dist/layout/fillerElement.d.ts

@@ -0,0 +1,12 @@
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * «Красящий фон» кусок для flex-раскладок: разделители и паддинги статус-бара,
+ * хвост строки табов, пустая область группы редакторов. Собственного render
+ * нет: конструктор объявляет фон сентинелами INHERITED_* — «владею фоном,
+ * крашу его унаследованными цветами» — и заливку делает база
+ * (paintOwnBackground). Интринсики не переопределены: базовые нули — ровно то,
+ * что нужно филлеру (сам по себе места не просит, размер назначает контейнер).
+ */
+export declare class FillerElement extends TUIElement {
+    constructor();
+}

package/dist/layout/fillerElement.js

@@ -0,0 +1,16 @@
+import { INHERITED_BG, INHERITED_FG } from "@tuidom/core/dom/styles/tuiStyle";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * «Красящий фон» кусок для flex-раскладок: разделители и паддинги статус-бара,
+ * хвост строки табов, пустая область группы редакторов. Собственного render
+ * нет: конструктор объявляет фон сентинелами INHERITED_* — «владею фоном,
+ * крашу его унаследованными цветами» — и заливку делает база
+ * (paintOwnBackground). Интринсики не переопределены: базовые нули — ровно то,
+ * что нужно филлеру (сам по себе места не просит, размер назначает контейнер).
+ */
+export class FillerElement extends TUIElement {
+    constructor() {
+        super();
+        this.style = { fg: INHERITED_FG, bg: INHERITED_BG };
+    }
+}

package/dist/layout/fitContentElement.d.ts

@@ -0,0 +1,18 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * Контейнер «по содержимому»: занимает max-intrinsic размер единственного
+ * ребёнка (в пределах входящих constraints) вместо того, чтобы растягиваться.
+ * Типовой корень для диалогов/поповеров в overlay: слой даёт loose-constraints
+ * на весь экран, а окно должно остаться размером с контент.
+ */
+export declare class FitContentElement extends TUIElement {
+    private child;
+    setChild(child: TUIElement | null): void;
+    getChild(): TUIElement | null;
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    getMinIntrinsicHeight(width: number): number;
+    getMaxIntrinsicHeight(width: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+}

package/dist/layout/fitContentElement.js

@@ -0,0 +1,46 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * Контейнер «по содержимому»: занимает max-intrinsic размер единственного
+ * ребёнка (в пределах входящих constraints) вместо того, чтобы растягиваться.
+ * Типовой корень для диалогов/поповеров в overlay: слой даёт loose-constraints
+ * на весь экран, а окно должно остаться размером с контент.
+ */
+export class FitContentElement extends TUIElement {
+    child = null;
+    setChild(child) {
+        if (this.child) {
+            this.removeChild(this.child);
+        }
+        this.child = child;
+        if (this.child) {
+            this.appendChild(this.child);
+        }
+        this.markDirty();
+    }
+    getChild() {
+        return this.child;
+    }
+    getMinIntrinsicWidth(height) {
+        return this.child?.getMinIntrinsicWidth(height) ?? 0;
+    }
+    getMaxIntrinsicWidth(height) {
+        return this.child?.getMaxIntrinsicWidth(height) ?? 0;
+    }
+    getMinIntrinsicHeight(width) {
+        return this.child?.getMinIntrinsicHeight(width) ?? 0;
+    }
+    getMaxIntrinsicHeight(width) {
+        return this.child?.getMaxIntrinsicHeight(width) ?? 0;
+    }
+    performLayout(constraints) {
+        const w = this.getMaxIntrinsicWidth(0);
+        const h = this.getMaxIntrinsicHeight(w);
+        const resultSize = constraints.constrain(new Size(w, h));
+        super.performLayout(BoxConstraints.tight(resultSize));
+        if (this.child) {
+            this.layoutChild(this.child, 0, 0, BoxConstraints.tight(resultSize));
+        }
+        return resultSize;
+    }
+}

package/dist/layout/hFlexElement.d.ts

@@ -0,0 +1,26 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+export type HFlexChildSize = {
+    type: "fixed";
+    value: number;
+} | {
+    type: "fit";
+} | {
+    type: "fill";
+};
+export interface HFlexLayoutStyle {
+    width: HFlexChildSize;
+    height: number | "fill";
+}
+export declare function hflexFixed(value: number): HFlexChildSize;
+export declare function hflexFit(): HFlexChildSize;
+export declare function hflexFill(): HFlexChildSize;
+export declare class HFlexElement extends TUIElement {
+    addChild(child: TUIElement, style: HFlexLayoutStyle): void;
+    replaceChildren(newChildren: TUIElement[]): void;
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    getMinIntrinsicHeight(width: number): number;
+    getMaxIntrinsicHeight(width: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+}