@tuidom/elements 0.1.0

package/dist/editorgroup/editorTabItemElement.js

@@ -0,0 +1,186 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { StyleFlags } from "@tuidom/core/common/styleFlags";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+const CLOSE_CHAR = "×";
+const MODIFIED_CHAR = "●";
+// Codicon-замок — тот же глиф, которым VS Code метит read-only вкладку.
+// Пишется escape'ом, а не литералом: глиф из Private Use Area не переживает
+// копирование через инструменты и тихо превращается в пустую строку.
+const READONLY_CHAR = "\uea75"; // nf-cod-lock
+export class EditorTabItemElement extends TUIElement {
+    label;
+    icon;
+    iconColor;
+    modified;
+    readOnly;
+    paddingLeft;
+    paddingRight;
+    hovered = false;
+    onActivate = null;
+    onClose = null;
+    constructor(label, icon, iconColor, options) {
+        super();
+        this.label = label;
+        this.icon = icon;
+        this.iconColor = iconColor;
+        this.modified = options?.modified ?? false;
+        this.readOnly = options?.readOnly ?? false;
+        this.paddingLeft = options?.paddingLeft ?? 1;
+        this.paddingRight = options?.paddingRight ?? 1;
+        this.addEventListener("click", (event) => {
+            const mouseEvent = event;
+            // Middle click closes the tab regardless of where it lands (VSCode behaviour).
+            if (mouseEvent.button === "middle") {
+                this.onClose?.();
+                return;
+            }
+            const closeStart = this.getCloseButtonStart();
+            if (mouseEvent.localX >= closeStart && mouseEvent.localX < closeStart + CLOSE_CHAR.length) {
+                this.onClose?.();
+            }
+            else {
+                this.onActivate?.();
+            }
+        });
+        this.addEventListener("mouseenter", () => {
+            if (this.hovered)
+                return;
+            this.hovered = true;
+            this.markDirty();
+        });
+        this.addEventListener("mouseleave", () => {
+            if (!this.hovered)
+                return;
+            this.hovered = false;
+            this.markDirty();
+        });
+    }
+    getLabel() {
+        return this.label;
+    }
+    setLabel(label) {
+        this.label = label;
+        this.markDirty();
+    }
+    getIcon() {
+        return this.icon;
+    }
+    setIcon(icon, color) {
+        this.icon = icon;
+        this.iconColor = color;
+        this.markDirty();
+    }
+    getModified() {
+        return this.modified;
+    }
+    setModified(modified) {
+        if (this.modified === modified)
+            return;
+        this.modified = modified;
+        this.markDirty();
+    }
+    getReadOnly() {
+        return this.readOnly;
+    }
+    /** Показывает/прячет метку-замок перед именем файла (VS Code read-only tab). */
+    setReadOnly(readOnly) {
+        if (this.readOnly === readOnly)
+            return;
+        this.readOnly = readOnly;
+        this.markDirty();
+    }
+    getPaddingLeft() {
+        return this.paddingLeft;
+    }
+    setPaddingLeft(value) {
+        this.paddingLeft = value;
+        this.markDirty();
+    }
+    getPaddingRight() {
+        return this.paddingRight;
+    }
+    setPaddingRight(value) {
+        this.paddingRight = value;
+        this.markDirty();
+    }
+    // ─── Content Layout ───
+    getContentWidth() {
+        // [paddingLeft][icon " "][lock " "][label][" ●/×"][paddingRight]
+        // The trailing slot shows the modified dot OR the close cross — never both —
+        // so the tab width stays stable regardless of modified/hover state. The lock
+        // is the one part that does change the width: read-only is a rare, sticky
+        // state, and squeezing it into an existing slot would hide the file icon.
+        const iconPart = this.icon.length > 0 ? this.icon.length + 1 : 0; // icon + space
+        const lockPart = this.readOnly ? READONLY_CHAR.length + 1 : 0; // lock + space
+        const trailingPart = 2; // " ●" or " ×"
+        return this.paddingLeft + iconPart + lockPart + this.label.length + trailingPart + this.paddingRight;
+    }
+    getCloseButtonStart() {
+        return this.getContentWidth() - this.paddingRight - CLOSE_CHAR.length;
+    }
+    // ─── Intrinsic Size ───
+    getMinIntrinsicWidth(_height) {
+        return this.getContentWidth();
+    }
+    getMaxIntrinsicWidth(_height) {
+        return this.getContentWidth();
+    }
+    getMinIntrinsicHeight(_width) {
+        return 1;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return 1;
+    }
+    performLayout(constraints) {
+        const natural = new Size(this.getMaxIntrinsicWidth(1), this.getMaxIntrinsicHeight(0));
+        return super.performLayout(BoxConstraints.tight(constraints.constrain(natural)));
+    }
+    // ─── Render ───
+    render(context) {
+        const width = this.layoutSize.width;
+        const resolved = this.resolvedStyle;
+        let x = 0;
+        // Fill background for the whole width first
+        for (let i = 0; i < width; i++) {
+            context.setCell(i, 0, { char: " ", fg: resolved.fg, bg: resolved.bg });
+        }
+        // Padding left (already filled with spaces)
+        x += this.paddingLeft;
+        // Icon
+        if (this.icon.length > 0 && x < width) {
+            context.setCell(x, 0, { char: this.icon, fg: this.iconColor, bg: resolved.bg });
+            x += this.icon.length;
+            if (x < width) {
+                context.setCell(x, 0, { char: " ", fg: resolved.fg, bg: resolved.bg });
+                x += 1;
+            }
+        }
+        // Read-only lock, between the file icon and the label.
+        if (this.readOnly && x < width) {
+            context.setCell(x, 0, { char: READONLY_CHAR, fg: resolved.fg, bg: resolved.bg });
+            x += READONLY_CHAR.length;
+            if (x < width) {
+                context.setCell(x, 0, { char: " ", fg: resolved.fg, bg: resolved.bg });
+                x += 1;
+            }
+        }
+        // Label
+        for (let i = 0; i < this.label.length && x < width; i++) {
+            context.setCell(x, 0, { char: this.label[i], fg: resolved.fg, bg: resolved.bg });
+            x += 1;
+        }
+        // Trailing indicator: the modified dot until the tab is hovered, then
+        // the close cross (VSCode behaviour). Clicking the slot always closes.
+        const trailingChar = this.modified && !this.hovered ? MODIFIED_CHAR : CLOSE_CHAR;
+        if (x + 1 < width) {
+            context.setCell(x, 0, { char: " ", fg: resolved.fg, bg: resolved.bg });
+            x += 1;
+            context.setCell(x, 0, {
+                char: trailingChar,
+                fg: resolved.fg,
+                bg: resolved.bg,
+                style: StyleFlags.None,
+            });
+        }
+    }
+}

package/dist/editorgroup/editorTabStripElement.d.ts

@@ -0,0 +1,33 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+import { EditorTabItemElement } from "./editorTabItemElement.js";
+export interface TabInfo {
+    label: string;
+    icon: string;
+    iconColor: number;
+    isModified: boolean;
+    /** Read-only буфер — вкладка получает метку-замок. */
+    isReadOnly: boolean;
+}
+export declare class EditorTabStripElement extends TUIElement {
+    private hflex;
+    private itemElements;
+    private filler;
+    private activeIndexValue;
+    onTabActivate: ((index: number) => void) | null;
+    onTabClose: ((index: number) => void) | null;
+    constructor();
+    get activeIndex(): number;
+    set activeIndex(value: number);
+    /** Observable state: tab labels with active/modified/readonly flags. */
+    inspectState(): Record<string, unknown>;
+    getItemElements(): readonly EditorTabItemElement[];
+    setTabs(tabs: TabInfo[]): void;
+    private rebuildHFlex;
+    private updateItemStyles;
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    getMinIntrinsicHeight(_width: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+}

package/dist/editorgroup/editorTabStripElement.js

@@ -0,0 +1,118 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+import { FillerElement } from "../layout/fillerElement.js";
+import { HFlexElement, hflexFill, hflexFit } from "../layout/hFlexElement.js";
+import { EditorTabItemElement } from "./editorTabItemElement.js";
+// ─── EditorTabStripElement ───
+export class EditorTabStripElement extends TUIElement {
+    hflex;
+    itemElements = [];
+    filler;
+    activeIndexValue = -1;
+    onTabActivate = null;
+    onTabClose = null;
+    constructor() {
+        super();
+        this.hflex = new HFlexElement();
+        this.filler = new FillerElement();
+        this.filler.style = { bg: "editorGroupHeader.tabsBackground" };
+        this.hflex.addChild(this.filler, { width: hflexFill(), height: 1 });
+        this.appendChild(this.hflex);
+    }
+    get activeIndex() {
+        return this.activeIndexValue;
+    }
+    set activeIndex(value) {
+        if (this.activeIndexValue === value)
+            return;
+        this.activeIndexValue = value;
+        this.updateItemStyles();
+        this.markDirty();
+    }
+    /** Observable state: tab labels with active/modified/readonly flags. */
+    inspectState() {
+        return {
+            activeIndex: this.activeIndexValue,
+            tabs: this.itemElements.map((item, i) => ({
+                label: item.getLabel(),
+                active: i === this.activeIndexValue,
+                modified: item.getModified(),
+                readOnly: item.getReadOnly(),
+            })),
+        };
+    }
+    getItemElements() {
+        return this.itemElements;
+    }
+    setTabs(tabs) {
+        const newItems = [];
+        for (let i = 0; i < tabs.length; i++) {
+            const tab = tabs[i];
+            let item;
+            if (i < this.itemElements.length) {
+                item = this.itemElements[i];
+                item.setLabel(tab.label);
+                item.setIcon(tab.icon, tab.iconColor);
+                item.setModified(tab.isModified);
+                item.setReadOnly(tab.isReadOnly);
+            }
+            else {
+                item = new EditorTabItemElement(tab.label, tab.icon, tab.iconColor, {
+                    modified: tab.isModified,
+                    readOnly: tab.isReadOnly,
+                    paddingLeft: 2,
+                    paddingRight: 2,
+                });
+                // Вкладка декларирует оба вида токенами; активность — состояние.
+                item.style = {
+                    fg: "tab.inactiveForeground",
+                    bg: "tab.inactiveBackground",
+                    when: [{ states: ["active"], fg: "tab.activeForeground", bg: "tab.activeBackground" }],
+                };
+                const index = i;
+                item.onActivate = () => this.onTabActivate?.(index);
+                item.onClose = () => this.onTabClose?.(index);
+            }
+            newItems.push(item);
+        }
+        this.itemElements = newItems;
+        this.rebuildHFlex();
+        this.updateItemStyles();
+        this.markDirty();
+    }
+    rebuildHFlex() {
+        const children = [];
+        for (const item of this.itemElements) {
+            item.layoutStyle = { width: hflexFit(), height: 1 };
+            children.push(item);
+        }
+        this.filler.layoutStyle = { width: hflexFill(), height: 1 };
+        children.push(this.filler);
+        this.hflex.replaceChildren(children);
+    }
+    updateItemStyles() {
+        for (let i = 0; i < this.itemElements.length; i++) {
+            this.itemElements[i].setStyleState("active", i === this.activeIndexValue);
+        }
+    }
+    // ─── Children ───
+    // ─── Intrinsic Size ───
+    getMinIntrinsicWidth(height) {
+        return this.hflex.getMinIntrinsicWidth(height);
+    }
+    getMaxIntrinsicWidth(height) {
+        return this.hflex.getMaxIntrinsicWidth(height);
+    }
+    getMinIntrinsicHeight(_width) {
+        return 1;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return 1;
+    }
+    // ─── Layout ───
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        this.layoutChild(this.hflex, 0, 0, BoxConstraints.tight(new Size(containerSize.width, 1)));
+        return containerSize;
+    }
+}

package/dist/editorpart/editorPartElement.d.ts

@@ -0,0 +1,95 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+/** Ось полосы групп: колонки (сплиты слева-направо) или ряды (сверху-вниз). */
+export type EditorPartOrientation = "columns" | "rows";
+/** Минимальная ширина группы в колонках — узже таб-стрип и код нечитаемы. */
+export declare const MIN_GROUP_MAIN_COLS = 20;
+/** Минимальная высота группы в рядах — таб-стрип + пара строк кода. */
+export declare const MIN_GROUP_MAIN_ROWS = 5;
+/**
+ * Полоса групп редакторов по одной оси (аналог grid-вью `EditorPart` VS Code,
+ * сведённого к одному ряду/колонке): N вью групп + N−1 сашей между ними.
+ * Пропорции — нормированные веса, переживают ресайз терминала; политику весов
+ * при сплите/схлопывании задаёт владелец (`EditorPartComponent`) через
+ * {@link setViews}. Саши лежат ПОВЕРХ граничной ячейки (пуш последними —
+ * hit-test): в columns — поверх первой колонки следующей группы, в rows —
+ * поверх ПОСЛЕДНЕЙ строки предыдущей: первая строка нижней группы это её
+ * табы, и наложение отняло бы у них мышь, а нижняя строка редактора менее
+ * ценна. Каждый саш укладывается явно в каждом layout.
+ *
+ * Деградация «не влезаем»: контейнер уже, чем N×минимум, — display-only равное
+ * деление без мутации весов; при возврате размера пропорции восстанавливаются.
+ * Отказ в НОВОМ сплите при нехватке места — {@link canFit}, решает владелец.
+ */
+export declare class EditorPartElement extends TUIElement {
+    private views;
+    /** Нормированные доли групп; длина всегда равна `views.length`. */
+    private weightsValue;
+    private sashes;
+    private orientationValue;
+    private maximizedIndexValue;
+    /** Основные размеры групп из последнего layout — база для drag-математики. */
+    private lastSizes;
+    /**
+     * Смена весов действием пользователя (drag саша, nudge/even команды) — для
+     * персиста. Плейн-колбэк (TUIDom без DI); НЕ вызывается из performLayout.
+     */
+    onDidChangeWeights?: () => void;
+    /** Ось полосы. Смена сохраняет веса (US-19: тумблер не теряет пропорций). */
+    get orientation(): EditorPartOrientation;
+    set orientation(value: EditorPartOrientation);
+    /** Нормированные доли групп (копия). */
+    get weights(): readonly number[];
+    /** Индекс максимизированной группы, либо `null` (обычная полоса). */
+    get maximizedIndex(): number | null;
+    set maximizedIndex(value: number | null);
+    /**
+     * Задаёт состав полосы и доли. Политика долей — у владельца (сплит делит
+     * долю активной группы пополам, join отдаёт долю соседу и т.п.); элемент
+     * лишь нормирует. Пустые/невалидные веса → равные доли. Максимизация
+     * сбрасывается: состав сменился, старый индекс — про другую полосу.
+     */
+    setViews(views: TUIElement[], weights?: readonly number[]): void;
+    /** Выравнивает доли (Reset Editor Group Sizes). */
+    evenWeights(): void;
+    /**
+     * Задаёт доли программно (рестор персиста). Невалидные/чужой длины веса
+     * нормализуются в равные; событие не файрится — это не действие пользователя.
+     */
+    setWeights(weights: readonly number[]): void;
+    /**
+     * Меняет основной размер группы `index` на `deltaCells` ячеек за счёт соседа
+     * справа/снизу (последняя группа растёт за счёт соседа слева/сверху) —
+     * increase/decreaseEditorWidth/Height. Кламп по минимуму обеих.
+     */
+    nudgeWeight(index: number, deltaCells: number): void;
+    /** Влезет ли полоса из `count` групп в текущий основной размер. */
+    canFit(count: number): boolean;
+    inspectState(): Record<string, unknown>;
+    /** Основной размер полосы по текущей оси (из последнего layout). */
+    private mainAxisSize;
+    private minMainSize;
+    /** Текущие основные размеры групп; `null` до первого layout. */
+    private currentSizes;
+    /** Нормирует произвольные положительные величины в доли; пусто/мусор → равные. */
+    private normalizeWeights;
+    /** Пересоздаёт N−1 сашей под текущие состав и ось; вешает drag-обработчики. */
+    private rebuildSashes;
+    /** Дети: вью групп, затем саши (поверх границ — hit-test); максимизация прячет прочее. */
+    private syncChildren;
+    /**
+     * Drag саша `index` (граница групп index/index+1): абсолютная координата →
+     * новый размер левой/верхней группы, кламп по минимуму пары, веса — из
+     * фактических размеров. Веса остальных групп не трогаются.
+     */
+    private handleSashDrag;
+    /**
+     * Целочисленные основные размеры из долей: floor + остатки самым большим
+     * дробным частям (сумма всегда равна `mainSize`), затем min-клампы за счёт
+     * самых широких. Полоса уже N×минимума — display-only равное деление, веса
+     * не мутируются (US-25: пропорции восстановятся при возврате размера).
+     */
+    private computeSizes;
+    private distributeEvenly;
+    protected performLayout(constraints: BoxConstraints): Size;
+}