@tuidom/elements 0.1.0

package/dist/completionlist/completionListElement.js

@@ -0,0 +1,309 @@
+import { DisplayLine } from "@tuidom/core/common/displayLine";
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { truncateEnd } from "@tuidom/core/common/textTruncation";
+import { BORDER_THICKNESS } from "@tuidom/core/dom/borderStyle";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+import { kindIcon } from "./completionItemKindIcon.js";
+// ─── Styles ──────────────────────────────────────────────────────────────────
+// ─── Layout ───────────────────────────────────────────────────────────────────
+// [│(0)][pad(1)][icon(2)][gap(3,4)][label…][…][pad(w-2)][│(w-1)]
+const LABEL_X = 5;
+const RIGHT_PAD = 1;
+const MIN_WIDTH = 16;
+/** Сколько пунктов участвует в измерении ширины (ответы LSP — тысячи пунктов). */
+const WIDTH_SAMPLE_LIMIT = 200;
+/**
+ * Компактный дропдаун автодополнения в стиле NvChad: рамка (углы `╭╮╰╯` —
+ * единый стиль с остальными оверлеями), выбранный ряд подсвечивается фоном (без
+ * указателей), 1-ячейка паддинга от рамки, колонка codicon-иконки типа.
+ * Собственной строки ввода нет — фильтр внутренний (набор символов сужает
+ * список, не трогая буфер редактора).
+ *
+ * Как в VS Code suggest widget попап **не забирает фокус** (`focusable = false`):
+ * навигацией/принятием/скрытием управляет {@link import("../../../src/vs/workbench/contrib/suggest/browser/completionService.ts").CompletionService} через
+ * публичные методы (клавиши приходят командами по `suggestWidgetVisible`), а
+ * фильтрация идёт от префикса под кареткой редактора. Мышью: наведение
+ * подсвечивает ряд, клик принимает пункт.
+ */
+export class CompletionListElement extends TUIElement {
+    maxVisibleItems = 10;
+    preferredWidth = 40;
+    onAccept = null;
+    /**
+     * Сменился выбранный пункт (клавиатурой, мышью или пере-фильтрацией).
+     * По нему владелец догружает описание для панели — у LSP-источников оно
+     * приходит отдельным запросом на конкретный пункт.
+     */
+    onSelectionChanged = null;
+    allItems = [];
+    filteredItems = [];
+    filterValue = "";
+    selectedIndexValue = 0;
+    scrollOffset = 0;
+    /** Кэш {@link contentWidth}; сбрасывается сменой отфильтрованного списка. */
+    contentWidthCache = null;
+    constructor() {
+        super();
+        // Не фокусируемся: редактор сохраняет фокус и каретку (см. класс-док).
+        this.focusable = false;
+        this.addEventListener("mousemove", (event) => {
+            this.handleMouseMove(event);
+        });
+        this.addEventListener("click", (event) => {
+            this.handleClick(event);
+        });
+    }
+    // ─── Public API ──────────────────────────────────────────────────────────
+    /** Задаёт полный набор элементов; переприменяет текущий фильтр (fresh). */
+    setItems(items) {
+        this.allItems = items;
+        this.applyFilter(false);
+    }
+    /** Задаёт фильтр «начисто» (пустой результат сворачивает список). */
+    setFilter(value) {
+        this.filterValue = value;
+        this.applyFilter(false);
+    }
+    /**
+     * Инкрементальное сужение по мере набора: если новый префикс не совпал ни с
+     * чем — **оставляем последний непустой список** (как в VS Code), а не
+     * сворачиваем попап.
+     */
+    refineFilter(value) {
+        this.filterValue = value;
+        this.applyFilter(true);
+    }
+    /** Видимые (отфильтрованные) элементы. */
+    get items() {
+        return this.filteredItems;
+    }
+    get selectedIndex() {
+        return this.selectedIndexValue;
+    }
+    getSelectedItem() {
+        return this.filteredItems[this.selectedIndexValue] ?? null;
+    }
+    // ─── Filtering ───────────────────────────────────────────────────────────
+    applyFilter(keepLastNonEmpty) {
+        const needle = this.filterValue.toLowerCase();
+        const matched = needle === ""
+            ? [...this.allItems]
+            : this.allItems.filter((item) => matchText(item).toLowerCase().includes(needle));
+        // «Последний непустой»: при доборе не сворачиваем список до нуля.
+        if (keepLastNonEmpty && matched.length === 0 && this.filteredItems.length > 0)
+            return;
+        // Порядок: сначала совпадения с НАЧАЛА (их пользователь и набирает),
+        // потом совпадения внутри слова; внутри группы — по ключу источника
+        // (`sortText`). Сортировка стабильная, поэтому пункты без ключа
+        // сохраняют исходный порядок провайдера.
+        this.filteredItems = matched.sort((a, b) => {
+            const rank = matchRank(a, needle) - matchRank(b, needle);
+            if (rank !== 0)
+                return rank;
+            const aKey = a.sortText ?? "";
+            const bKey = b.sortText ?? "";
+            return aKey < bKey ? -1 : aKey > bKey ? 1 : 0;
+        });
+        this.contentWidthCache = null;
+        this.selectedIndexValue = 0;
+        this.scrollOffset = 0;
+        this.markDirty();
+        this.fireSelectionChanged();
+    }
+    // ─── Sizing ──────────────────────────────────────────────────────────────
+    get visibleItemCount() {
+        return Math.min(this.filteredItems.length, this.maxVisibleItems);
+    }
+    /**
+     * Ширина содержимого. Считается один раз на смену списка и кэшируется:
+     * layout зовут на каждый кадр, а список от language server'а — это сотни
+     * и тысячи пунктов. По той же причине меряем только первые
+     * {@link WIDTH_SAMPLE_LIMIT} — попап всё равно упирается в `preferredWidth`.
+     */
+    get contentWidth() {
+        if (this.contentWidthCache !== null)
+            return this.contentWidthCache;
+        let max = 0;
+        const sample = Math.min(this.filteredItems.length, WIDTH_SAMPLE_LIMIT);
+        for (let i = 0; i < sample; i++) {
+            const item = this.filteredItems[i];
+            const labelW = new DisplayLine(item.label).displayWidth;
+            const labelDetailW = item.labelDetail !== undefined && item.labelDetail !== ""
+                ? 1 + new DisplayLine(item.labelDetail).displayWidth
+                : 0;
+            const detailW = item.detail !== undefined && item.detail !== "" ? 2 + new DisplayLine(item.detail).displayWidth : 0;
+            max = Math.max(max, labelW + labelDetailW + detailW);
+        }
+        this.contentWidthCache = max;
+        return max;
+    }
+    get boxWidth() {
+        // Левая рамка сидит внутри LABEL_X (см. схему колонок выше).
+        const natural = LABEL_X + this.contentWidth + RIGHT_PAD + BORDER_THICKNESS;
+        return Math.max(MIN_WIDTH, Math.min(this.preferredWidth, natural));
+    }
+    get boxHeight() {
+        return this.visibleItemCount + BORDER_THICKNESS * 2; // рамка сверху/снизу
+    }
+    getMinIntrinsicWidth(_height) {
+        return this.boxWidth;
+    }
+    getMaxIntrinsicWidth(_height) {
+        return this.boxWidth;
+    }
+    getMinIntrinsicHeight(_width) {
+        return this.boxHeight;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return this.boxHeight;
+    }
+    performLayout(constraints) {
+        const size = constraints.constrain(new Size(this.boxWidth, this.boxHeight));
+        super.performLayout(BoxConstraints.tight(size));
+        return size;
+    }
+    // ─── Render ──────────────────────────────────────────────────────────────
+    render(context) {
+        const w = this.layoutSize.width;
+        const h = this.boxHeight;
+        // Фон + рамка (единый стиль углов с остальными оверлеями). Рамку рисуем
+        // только здесь; ряды заливают лишь внутреннюю область, чтобы фон
+        // выделения не залезал на боковые рамки.
+        context.drawBox(0, 0, w, h, {
+            fg: this.styleVar("editorSuggestWidget.border"),
+            bg: this.styleVar("editorSuggestWidget.background"),
+            fill: true,
+        });
+        // Ряды
+        for (let i = 0; i < this.visibleItemCount; i++) {
+            this.renderRow(context, w, BORDER_THICKNESS + i, this.scrollOffset + i);
+        }
+    }
+    renderRow(context, w, rowY, itemIndex) {
+        const item = this.filteredItems[itemIndex];
+        const isSelected = itemIndex === this.selectedIndexValue;
+        const rowBg = isSelected
+            ? this.styleVar("editorSuggestWidget.selectedBackground")
+            : this.styleVar("editorSuggestWidget.background");
+        const rowFg = isSelected
+            ? this.styleVar("editorSuggestWidget.selectedForeground")
+            : this.styleVar("editorSuggestWidget.foreground");
+        // Фон ряда только во внутренней области [1, w-1) — боковые рамки (их
+        // нарисовал drawBox) не трогаем, иначе фон выделения залезает на рамку.
+        for (let x = 1; x < w - 1; x++)
+            context.setCell(x, rowY, { char: " ", fg: rowFg, bg: rowBg });
+        // Иконка типа
+        const icon = kindIcon(item.kind);
+        context.drawText(2, rowY, icon, {
+            fg: isSelected ? rowFg : this.styleVar("editorSuggestWidget.iconForeground"),
+            bg: rowBg,
+        });
+        // Правый блок: detail (dim, right-aligned)
+        const contentRight = w - 1 - RIGHT_PAD; // exclusive
+        let rightWidth = 0;
+        if (item.detail !== undefined && item.detail !== "") {
+            const detailText = "  " + item.detail;
+            const detailW = new DisplayLine(detailText).displayWidth;
+            if (LABEL_X + 1 + detailW <= contentRight) {
+                context.drawText(contentRight - detailW, rowY, detailText, {
+                    fg: isSelected ? rowFg : this.styleVar("editorSuggestWidget.detailForeground"),
+                    bg: rowBg,
+                });
+                rightWidth = detailW;
+            }
+        }
+        // Label (приоритет, усечение по остатку)
+        const labelAvail = Math.max(0, contentRight - rightWidth - LABEL_X);
+        const labelNatural = new DisplayLine(item.label).displayWidth;
+        const labelText = labelNatural <= labelAvail ? item.label : truncateEnd(item.label, labelAvail);
+        context.drawText(LABEL_X, rowY, labelText, { fg: rowFg, bg: rowBg }, { maxWidth: labelAvail });
+        // Сигнатура вплотную за лейблом (labelDetails.detail у LSP) — приглушённо
+        // и только если влезает целиком: обрезанная сигнатура вводит в заблуждение.
+        if (item.labelDetail !== undefined && item.labelDetail !== "" && labelNatural <= labelAvail) {
+            const detailX = LABEL_X + labelNatural + 1;
+            const available = contentRight - rightWidth - detailX;
+            if (available > 0) {
+                context.drawText(detailX, rowY, item.labelDetail, {
+                    fg: isSelected ? rowFg : this.styleVar("editorSuggestWidget.detailForeground"),
+                    bg: rowBg,
+                }, { maxWidth: available });
+            }
+        }
+    }
+    // ─── Navigation (driven by CompletionService via commands) ─────────────
+    selectNext() {
+        this.moveSelection(1);
+    }
+    selectPrevious() {
+        this.moveSelection(-1);
+    }
+    selectNextPage() {
+        this.moveSelection(Math.max(1, this.visibleItemCount));
+    }
+    selectPreviousPage() {
+        this.moveSelection(-Math.max(1, this.visibleItemCount));
+    }
+    // ─── Mouse ────────────────────────────────────────────────────────────────
+    /**
+     * Индекс пункта под локальной Y, или `null`, если это рамка/за пределами
+     * видимых строк. `visibleItemCount` + `scrollOffset` гарантируют, что
+     * возвращённый индекс всегда в пределах `filteredItems`.
+     */
+    rowAt(localY) {
+        const row = localY - BORDER_THICKNESS; // строка 0 — верхняя рамка
+        if (row < 0 || row >= this.visibleItemCount)
+            return null;
+        return this.scrollOffset + row;
+    }
+    handleMouseMove(event) {
+        const index = this.rowAt(event.localY);
+        if (index === null || index === this.selectedIndexValue)
+            return;
+        this.selectedIndexValue = index;
+        this.markDirty();
+        this.fireSelectionChanged();
+    }
+    handleClick(event) {
+        const index = this.rowAt(event.localY);
+        if (index === null)
+            return;
+        this.selectedIndexValue = index;
+        this.markDirty();
+        this.onAccept?.(this.filteredItems[index]);
+    }
+    moveSelection(delta) {
+        if (this.filteredItems.length === 0)
+            return;
+        const next = Math.max(0, Math.min(this.filteredItems.length - 1, this.selectedIndexValue + delta));
+        if (next === this.selectedIndexValue)
+            return;
+        this.selectedIndexValue = next;
+        this.ensureVisible(next);
+        this.markDirty();
+        this.fireSelectionChanged();
+    }
+    fireSelectionChanged() {
+        this.onSelectionChanged?.(this.getSelectedItem());
+    }
+    ensureVisible(index) {
+        if (index < this.scrollOffset) {
+            this.scrollOffset = index;
+        }
+        else if (index >= this.scrollOffset + this.visibleItemCount) {
+            this.scrollOffset = index - this.visibleItemCount + 1;
+        }
+    }
+}
+/**
+ * Текст, по которому фильтруем: `filterText` источника, иначе label (правый
+ * `detail` в фильтрации не участвует).
+ */
+function matchText(item) {
+    return item.filterText ?? item.label;
+}
+/** 0 — совпадение с начала, 1 — где-то внутри (при пустом фильтре все равны). */
+function matchRank(item, needle) {
+    if (needle === "")
+        return 0;
+    return matchText(item).toLowerCase().startsWith(needle) ? 0 : 1;
+}

package/dist/completionlist/completionWidgetElement.d.ts

@@ -0,0 +1,41 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+import { CompletionDetailsElement } from "./completionDetailsElement.js";
+import { CompletionListElement } from "./completionListElement.js";
+/** С какой стороны от списка стоит панель описания. */
+export type CompletionDetailsSide = "right" | "left";
+/**
+ * Виджет автодополнения целиком: список пунктов и (опционально) панель описания
+ * рядом. Именно он живёт в overlay-сессии — оверлей клампит и переворачивает
+ * ОДИН элемент, поэтому список с панелью обязаны быть одним элементом, иначе у
+ * края экрана они разъезжались бы поодиночке.
+ *
+ * Панель по умолчанию скрыта (как в VS Code) и включается тумблером
+ * `toggleSuggestionDetails`; сторону выбирает владелец
+ * ({@link import("../../../src/vs/workbench/contrib/suggest/browser/suggestComponent.js").SuggestComponent})
+ * по свободному месту справа от каретки.
+ */
+export declare class CompletionWidgetElement extends TUIElement {
+    readonly list: CompletionListElement;
+    readonly details: CompletionDetailsElement;
+    private detailsVisibleValue;
+    private detailsSideValue;
+    constructor();
+    /** Включён ли показ панели описания (состояние тумблера). */
+    get detailsVisible(): boolean;
+    set detailsVisible(value: boolean);
+    get detailsSide(): CompletionDetailsSide;
+    set detailsSide(value: CompletionDetailsSide);
+    /** Панель реально показывается: тумблер включён И описание непустое. */
+    get showsDetails(): boolean;
+    private get listWidth();
+    private get listHeight();
+    private get detailsWidth();
+    private get widgetWidth();
+    private get widgetHeight();
+    getMinIntrinsicWidth(_height: number): number;
+    getMaxIntrinsicWidth(_height: number): number;
+    getMinIntrinsicHeight(_width: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+}

package/dist/completionlist/completionWidgetElement.js

@@ -0,0 +1,102 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+import { CompletionDetailsElement } from "./completionDetailsElement.js";
+import { CompletionListElement } from "./completionListElement.js";
+/**
+ * Виджет автодополнения целиком: список пунктов и (опционально) панель описания
+ * рядом. Именно он живёт в overlay-сессии — оверлей клампит и переворачивает
+ * ОДИН элемент, поэтому список с панелью обязаны быть одним элементом, иначе у
+ * края экрана они разъезжались бы поодиночке.
+ *
+ * Панель по умолчанию скрыта (как в VS Code) и включается тумблером
+ * `toggleSuggestionDetails`; сторону выбирает владелец
+ * ({@link import("../../../src/vs/workbench/contrib/suggest/browser/suggestComponent.ts").SuggestComponent})
+ * по свободному месту справа от каретки.
+ */
+export class CompletionWidgetElement extends TUIElement {
+    list;
+    details;
+    detailsVisibleValue = false;
+    detailsSideValue = "right";
+    constructor() {
+        super();
+        // Как и список: фокус остаётся у редактора (см. CompletionListElement).
+        this.focusable = false;
+        this.list = new CompletionListElement();
+        this.details = new CompletionDetailsElement();
+        this.appendChild(this.list);
+        this.appendChild(this.details);
+    }
+    /** Включён ли показ панели описания (состояние тумблера). */
+    get detailsVisible() {
+        return this.detailsVisibleValue;
+    }
+    set detailsVisible(value) {
+        if (this.detailsVisibleValue === value)
+            return;
+        this.detailsVisibleValue = value;
+        this.markDirty();
+    }
+    get detailsSide() {
+        return this.detailsSideValue;
+    }
+    set detailsSide(value) {
+        if (this.detailsSideValue === value)
+            return;
+        this.detailsSideValue = value;
+        this.markDirty();
+    }
+    /** Панель реально показывается: тумблер включён И описание непустое. */
+    get showsDetails() {
+        return this.detailsVisibleValue && !this.details.isEmpty;
+    }
+    // ─── Sizing ──────────────────────────────────────────────────────────────
+    get listWidth() {
+        return this.list.getMaxIntrinsicWidth(0);
+    }
+    get listHeight() {
+        return this.list.getMaxIntrinsicHeight(0);
+    }
+    get detailsWidth() {
+        if (!this.showsDetails)
+            return 0;
+        // Панель не выше списка: попап у каретки и так близко к краю экрана.
+        this.details.maxHeight = this.listHeight;
+        return this.details.getMaxIntrinsicWidth(0);
+    }
+    get widgetWidth() {
+        return this.listWidth + this.detailsWidth;
+    }
+    get widgetHeight() {
+        if (!this.showsDetails)
+            return this.listHeight;
+        this.details.maxHeight = this.listHeight;
+        return Math.max(this.listHeight, this.details.getMaxIntrinsicHeight(0));
+    }
+    getMinIntrinsicWidth(_height) {
+        return this.widgetWidth;
+    }
+    getMaxIntrinsicWidth(_height) {
+        return this.widgetWidth;
+    }
+    getMinIntrinsicHeight(_width) {
+        return this.widgetHeight;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return this.widgetHeight;
+    }
+    performLayout(constraints) {
+        const size = constraints.constrain(new Size(this.widgetWidth, this.widgetHeight));
+        super.performLayout(BoxConstraints.tight(size));
+        const listWidth = Math.min(this.listWidth, size.width);
+        const listHeight = Math.min(this.listHeight, size.height);
+        const detailsWidth = Math.max(0, Math.min(this.detailsWidth, size.width - listWidth));
+        const detailsHeight = detailsWidth === 0 ? 0 : Math.min(this.details.getMaxIntrinsicHeight(0), size.height);
+        const detailsFirst = this.detailsSideValue === "left" && detailsWidth > 0;
+        const listX = detailsFirst ? detailsWidth : 0;
+        const detailsX = detailsFirst ? 0 : listWidth;
+        this.layoutChild(this.list, listX, 0, BoxConstraints.tight(new Size(listWidth, listHeight)));
+        this.layoutChild(this.details, detailsX, 0, BoxConstraints.tight(new Size(detailsWidth, detailsHeight)));
+        return size;
+    }
+}

package/dist/contextview/contextMenuController.d.ts

@@ -0,0 +1,23 @@
+import type { OverlayAnchorPosition } from "@tuidom/core/dom/overlayLayer";
+import type { TUIElement } from "@tuidom/core/dom/tuiElement";
+import type { MenuEntry } from "../menu/popupMenuElement.js";
+export interface ContextMenuShowRequest {
+    /** Владелец меню — по нему ищется ближайший overlay-слой. */
+    owner: TUIElement;
+    anchor: OverlayAnchorPosition;
+    entries: MenuEntry[];
+    onHide?: () => void;
+}
+/**
+ * Механика показа контекстного меню: PopupMenuElement в overlay-сессии с
+ * каноническим поведением — флип у краёв экрана, Escape и клик мимо закрывают,
+ * фокус после закрытия возвращается прежнему владельцу, выбор пункта сперва
+ * закрывает меню. Владеет единственной активной сессией: показ нового меню
+ * закрывает предыдущее. Состав пунктов — не его дело (его собирает вызывающий).
+ */
+export declare class ContextMenuController {
+    private session;
+    show(request: ContextMenuShowRequest): void;
+    hide(): void;
+    isOpen(): boolean;
+}

package/dist/contextview/contextMenuController.js

@@ -0,0 +1,75 @@
+import { PopupMenuElement } from "../menu/popupMenuElement.js";
+/**
+ * Механика показа контекстного меню: PopupMenuElement в overlay-сессии с
+ * каноническим поведением — флип у краёв экрана, Escape и клик мимо закрывают,
+ * фокус после закрытия возвращается прежнему владельцу, выбор пункта сперва
+ * закрывает меню. Владеет единственной активной сессией: показ нового меню
+ * закрывает предыдущее. Состав пунктов — не его дело (его собирает вызывающий).
+ */
+export class ContextMenuController {
+    session = null;
+    show(request) {
+        this.hide();
+        const layer = request.owner.getOverlayLayer();
+        if (!layer || request.entries.length === 0)
+            return;
+        // Выбор пункта закрывает меню ДО действия: команда может открыть
+        // диалог/переставить фокус, и restoreFocus сессии не должен затирать
+        // фокус, выставленный командой. Подменю закрывают цепочку сами.
+        const entries = request.entries.map((entry) => {
+            if (entry.type === "separator" || entry.type === "submenu")
+                return entry;
+            const original = entry.onSelect;
+            return {
+                ...entry,
+                onSelect: () => {
+                    this.hide();
+                    original?.();
+                },
+            };
+        });
+        const menu = new PopupMenuElement(entries);
+        menu.focusable = true;
+        let session = null;
+        session = layer.openPopupSession(menu, request.anchor, {
+            visible: true,
+            restoreFocus: true,
+            focusOnOpen: true,
+            closeOnEscape: true,
+            pointerPolicy: "close-on-outside",
+            disposeOnClose: true,
+            // Клик по вложенному подменю (отдельный item слоя) — не «мимо».
+            ownsTarget: (target) => menu.ownsElement(target),
+            // Escape при открытом подменю закрывает уровень, а не всё меню, —
+            // роутинг делает само меню (performDefaultAction).
+            shouldCloseOnEscape: () => !menu.hasOpenSubmenu(),
+            onClose: () => {
+                // Сессия закрыта (Escape, клик мимо, hide) — каскадно закрываем
+                // открытые подменю: их сессии слой сам не увяжет.
+                menu.closeSubmenus();
+                // Через hide() поле занулено до close() — не трогаем: там может
+                // быть уже открыта следующая сессия.
+                if (this.session === session) {
+                    this.session = null;
+                }
+                request.onHide?.();
+            },
+        });
+        menu.onClose = () => {
+            session.close();
+        };
+        this.session = session;
+    }
+    hide() {
+        if (!this.session)
+            return;
+        const session = this.session;
+        this.session = null;
+        // Именно close(), не dispose(): close восстанавливает сохранённый фокус
+        // (restoreFocus), а disposeOnClose доводит teardown до конца.
+        session.close();
+    }
+    isOpen() {
+        return this.session !== null;
+    }
+}

package/dist/contextview/overlayHostElement.d.ts

@@ -0,0 +1,23 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { OverlayLayer } from "@tuidom/core/dom/overlayLayer";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * Контейнер «контент + локальный overlay-слой поверх»: оба ребёнка кладутся
+ * tight на весь размер хоста, слой — последним (z-порядок = порядок детей,
+ * значит хит-тест сначала видит оверлей).
+ *
+ * Слой хоста — только для адресно докнутых виджетов (find и т.п.), которые
+ * приходят к нему напрямую через {@link overlayLayer}. getOverlayLayer
+ * сознательно НЕ переопределён: попапы/контекстные меню из содержимого хоста
+ * должны жить в глобальном слое BodyElement (позиции слоя — в локальных
+ * координатах хоста, а слой вдобавок клипует к его границам).
+ */
+export declare class OverlayHostElement extends TUIElement {
+    readonly overlayLayer: OverlayLayer;
+    private content;
+    constructor();
+    getContent(): TUIElement | null;
+    setContent(element: TUIElement | null): void;
+    private syncChildren;
+    protected performLayout(constraints: BoxConstraints): Size;
+}

package/dist/contextview/overlayHostElement.js

@@ -0,0 +1,47 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { OverlayLayer } from "@tuidom/core/dom/overlayLayer";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * Контейнер «контент + локальный overlay-слой поверх»: оба ребёнка кладутся
+ * tight на весь размер хоста, слой — последним (z-порядок = порядок детей,
+ * значит хит-тест сначала видит оверлей).
+ *
+ * Слой хоста — только для адресно докнутых виджетов (find и т.п.), которые
+ * приходят к нему напрямую через {@link overlayLayer}. getOverlayLayer
+ * сознательно НЕ переопределён: попапы/контекстные меню из содержимого хоста
+ * должны жить в глобальном слое BodyElement (позиции слоя — в локальных
+ * координатах хоста, а слой вдобавок клипует к его границам).
+ */
+export class OverlayHostElement extends TUIElement {
+    overlayLayer;
+    content = null;
+    constructor() {
+        super();
+        this.overlayLayer = new OverlayLayer();
+        this.syncChildren();
+    }
+    getContent() {
+        return this.content;
+    }
+    setContent(element) {
+        this.content = element;
+        this.syncChildren();
+        this.markDirty();
+    }
+    syncChildren() {
+        const children = [];
+        if (this.content)
+            children.push(this.content);
+        children.push(this.overlayLayer);
+        this.setChildren(children);
+    }
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        if (this.content) {
+            this.layoutChild(this.content, 0, 0, BoxConstraints.tight(containerSize));
+        }
+        // Слой покрывает весь хост; позиции item'ов — относительно его top-left.
+        this.layoutChild(this.overlayLayer, 0, 0, BoxConstraints.tight(containerSize));
+        return containerSize;
+    }
+}

package/dist/editorgroup/editorTabItemElement.d.ts

@@ -0,0 +1,41 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export declare class EditorTabItemElement extends TUIElement {
+    private label;
+    private icon;
+    private iconColor;
+    private modified;
+    private readOnly;
+    private paddingLeft;
+    private paddingRight;
+    private hovered;
+    onActivate: (() => void) | null;
+    onClose: (() => void) | null;
+    constructor(label: string, icon: string, iconColor: number, options?: {
+        modified?: boolean;
+        readOnly?: boolean;
+        paddingLeft?: number;
+        paddingRight?: number;
+    });
+    getLabel(): string;
+    setLabel(label: string): void;
+    getIcon(): string;
+    setIcon(icon: string, color: number): void;
+    getModified(): boolean;
+    setModified(modified: boolean): void;
+    getReadOnly(): boolean;
+    /** Показывает/прячет метку-замок перед именем файла (VS Code read-only tab). */
+    setReadOnly(readOnly: boolean): void;
+    getPaddingLeft(): number;
+    setPaddingLeft(value: number): void;
+    getPaddingRight(): number;
+    setPaddingRight(value: number): void;
+    private getContentWidth;
+    private getCloseButtonStart;
+    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;
+}