@tuidom/elements 0.1.0

package/dist/scrollbar/iScrollable.js

@@ -0,0 +1 @@
+export {};

package/dist/scrollbar/scrollBarRenderer.d.ts

@@ -0,0 +1,36 @@
+import type { RenderContext } from "@tuidom/core/dom/tuiElement";
+/**
+ * Resolved scrollbar colours. `background` fills the half of each cell the bar
+ * itself does not paint — the scrollbar lives on a dedicated row/column that the
+ * child never draws into, so without it those cells keep the terminal's default
+ * background and the bar looks like a hole punched through the widget.
+ */
+export interface ScrollBarColors {
+    readonly thumb: number;
+    readonly track: number;
+    readonly background: number;
+}
+export interface ScrollBarMetrics {
+    /** Thumb start position in half-cell units (0 = top of track). */
+    thumbStartHalves: number;
+    /** Thumb size in half-cell units (minimum 2 = 1 full cell). */
+    thumbSizeHalves: number;
+}
+export declare function computeScrollBarMetrics(trackHeight: number, contentHeight: number, scrollTop: number, viewportHeight: number): ScrollBarMetrics;
+/**
+ * For each cell row, determine the character to display.
+ *
+ * Each cell covers 2 halves: top half and bottom half.
+ * - Both halves inside thumb → "█"
+ * - Only top half inside thumb → "▀"
+ * - Only bottom half inside thumb → "▄"
+ * - Neither half inside thumb → " "
+ */
+export declare function getScrollBarCellChars(trackHeight: number, metrics: ScrollBarMetrics): string[];
+export declare function renderScrollBar(context: RenderContext, x: number, trackHeight: number, contentHeight: number, scrollTop: number, viewportHeight: number, colors: ScrollBarColors): void;
+/**
+ * Horizontal bar on its own row. Uses "▄" (LOWER half block) so the bar sits on
+ * the bottom edge of the row, hugging the widget's frame rather than floating a
+ * half-cell above it.
+ */
+export declare function renderHorizontalScrollBar(context: RenderContext, y: number, trackWidth: number, contentWidth: number, scrollLeft: number, viewportWidth: number, colors: ScrollBarColors): void;

package/dist/scrollbar/scrollBarRenderer.js

@@ -0,0 +1,76 @@
+export function computeScrollBarMetrics(trackHeight, contentHeight, scrollTop, viewportHeight) {
+    const trackHalves = trackHeight * 2;
+    if (contentHeight <= viewportHeight) {
+        return { thumbStartHalves: 0, thumbSizeHalves: trackHalves };
+    }
+    const thumbSizeHalves = Math.max(2, Math.round((viewportHeight / contentHeight) * trackHalves));
+    const maxScroll = contentHeight - viewportHeight;
+    const scrollFraction = Math.min(1, Math.max(0, scrollTop / maxScroll));
+    const thumbStartHalves = Math.round(scrollFraction * (trackHalves - thumbSizeHalves));
+    return { thumbStartHalves, thumbSizeHalves };
+}
+/**
+ * For each cell row, determine the character to display.
+ *
+ * Each cell covers 2 halves: top half and bottom half.
+ * - Both halves inside thumb → "█"
+ * - Only top half inside thumb → "▀"
+ * - Only bottom half inside thumb → "▄"
+ * - Neither half inside thumb → " "
+ */
+export function getScrollBarCellChars(trackHeight, metrics) {
+    const { thumbStartHalves, thumbSizeHalves } = metrics;
+    const thumbEndHalves = thumbStartHalves + thumbSizeHalves;
+    const result = [];
+    for (let row = 0; row < trackHeight; row++) {
+        const topHalf = row * 2;
+        const bottomHalf = topHalf + 1;
+        const topInThumb = topHalf >= thumbStartHalves && topHalf < thumbEndHalves;
+        const bottomInThumb = bottomHalf >= thumbStartHalves && bottomHalf < thumbEndHalves;
+        if (topInThumb && bottomInThumb) {
+            result.push("█");
+        }
+        else if (topInThumb) {
+            result.push("▀");
+        }
+        else if (bottomInThumb) {
+            result.push("▄");
+        }
+        else {
+            result.push("░");
+        }
+    }
+    return result;
+}
+export function renderScrollBar(context, x, trackHeight, contentHeight, scrollTop, viewportHeight, colors) {
+    const metrics = computeScrollBarMetrics(trackHeight, contentHeight, scrollTop, viewportHeight);
+    const chars = getScrollBarCellChars(trackHeight, metrics);
+    for (let row = 0; row < trackHeight; row++) {
+        const char = chars[row];
+        const fg = char === "░" ? colors.track : colors.thumb;
+        context.setCell(x, row, { char, fg, bg: colors.background });
+    }
+}
+/**
+ * Horizontal bar on its own row. Uses "▄" (LOWER half block) so the bar sits on
+ * the bottom edge of the row, hugging the widget's frame rather than floating a
+ * half-cell above it.
+ */
+export function renderHorizontalScrollBar(context, y, trackWidth, contentWidth, scrollLeft, viewportWidth, colors) {
+    if (contentWidth <= viewportWidth) {
+        // Content fits — only reachable under policy "always"; the thumb spans the track.
+        for (let col = 0; col < trackWidth; col++) {
+            context.setCell(col, y, { char: "▄", fg: colors.thumb, bg: colors.background });
+        }
+        return;
+    }
+    const thumbSize = Math.max(1, Math.round((viewportWidth / contentWidth) * trackWidth));
+    const maxScroll = contentWidth - viewportWidth;
+    const scrollFraction = Math.min(1, Math.max(0, scrollLeft / maxScroll));
+    const thumbStart = Math.round(scrollFraction * (trackWidth - thumbSize));
+    const thumbEnd = thumbStart + thumbSize;
+    for (let col = 0; col < trackWidth; col++) {
+        const inThumb = col >= thumbStart && col < thumbEnd;
+        context.setCell(col, y, { char: "▄", fg: inThumb ? colors.thumb : colors.track, bg: colors.background });
+    }
+}

package/dist/scrollbar/scrollContainerElement.d.ts

@@ -0,0 +1,39 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+import type { IScrollable } from "./iScrollable.js";
+export type ScrollBarPolicy = "auto" | "always" | "never";
+/**
+ * Draws scrollbars alongside a scrollable child.
+ *
+ * The child is rendered as-is — it must handle its own content rendering.
+ * For simple widgets that draw full content in local coordinates, wrap
+ * them in a ScrollViewport before passing to ScrollBarDecorator:
+ *
+ *   new ScrollBarDecorator(new ScrollViewport(textBlock))
+ *
+ * For self-scrolling widgets (e.g. EditorElement) that already manage
+ * their own scroll offset, pass them directly:
+ *
+ *   new ScrollBarDecorator(editorElement)
+ */
+export declare class ScrollBarDecorator extends TUIElement {
+    private child;
+    verticalScrollBar: ScrollBarPolicy;
+    horizontalScrollBar: ScrollBarPolicy;
+    constructor(child: TUIElement & IScrollable);
+    getChild(): TUIElement & IScrollable;
+    setChild(child: TUIElement & IScrollable): void;
+    /**
+     * Бегунок — хром декоратора, рисуемый по состоянию РЕБЁНКА (scrollTop /
+     * contentHeight) в колонке вне его rect'а. Damage ребёнка обязан повреждать
+     * и колонку скроллбара — атомарность даёт это автоматически ценой +1
+     * строки/колонки к области.
+     */
+    protected get paintsSubtreeAtomically(): boolean;
+    protected performLayout(constraints: BoxConstraints): Size;
+    render(context: RenderContext): void;
+    private resolveScrollBarVisibility;
+    private resolvePolicy;
+}
+/** @deprecated Use ScrollBarDecorator instead */
+export declare const ScrollContainerElement: typeof ScrollBarDecorator;

package/dist/scrollbar/scrollContainerElement.js

@@ -0,0 +1,91 @@
+import { BoxConstraints, Offset, Point, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+import { renderHorizontalScrollBar, renderScrollBar } from "./scrollBarRenderer.js";
+/**
+ * Draws scrollbars alongside a scrollable child.
+ *
+ * The child is rendered as-is — it must handle its own content rendering.
+ * For simple widgets that draw full content in local coordinates, wrap
+ * them in a ScrollViewport before passing to ScrollBarDecorator:
+ *
+ *   new ScrollBarDecorator(new ScrollViewport(textBlock))
+ *
+ * For self-scrolling widgets (e.g. EditorElement) that already manage
+ * their own scroll offset, pass them directly:
+ *
+ *   new ScrollBarDecorator(editorElement)
+ */
+export class ScrollBarDecorator extends TUIElement {
+    child;
+    verticalScrollBar = "auto";
+    horizontalScrollBar = "auto";
+    constructor(child) {
+        super();
+        this.child = child;
+        this.appendChild(this.child);
+    }
+    getChild() {
+        return this.child;
+    }
+    setChild(child) {
+        // setChildren, а не appendChild: старый ребёнок обязан отцепиться. До
+        // рефакторинга владения он молча оставался с parent=декоратор навсегда.
+        this.child = child;
+        this.setChildren([this.child]);
+        this.markDirty();
+    }
+    /**
+     * Бегунок — хром декоратора, рисуемый по состоянию РЕБЁНКА (scrollTop /
+     * contentHeight) в колонке вне его rect'а. Damage ребёнка обязан повреждать
+     * и колонку скроллбара — атомарность даёт это автоматически ценой +1
+     * строки/колонки к области.
+     */
+    get paintsSubtreeAtomically() {
+        return true;
+    }
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        const { showVertical, showHorizontal } = this.resolveScrollBarVisibility(containerSize);
+        const childWidth = containerSize.width - (showVertical ? 1 : 0);
+        const childHeight = containerSize.height - (showHorizontal ? 1 : 0);
+        this.layoutChild(this.child, 0, 0, BoxConstraints.tight(new Size(childWidth, childHeight)));
+        return containerSize;
+    }
+    render(context) {
+        const { showVertical, showHorizontal } = this.resolveScrollBarVisibility(this.layoutSize);
+        this.renderChildren(context);
+        const childWidth = this.child.layoutSize.width;
+        const childHeight = this.child.layoutSize.height;
+        // Токены темы + фон колонки от КАСКАДА: декоратор внутри панели/сайдбара
+        // наследует фон хозяина — бывшая параметризация getScrollBarStyles(theme,
+        // backgroundKey) стала свойством дерева.
+        const colors = {
+            thumb: this.styleVar("scrollbarSlider.background"),
+            track: this.styleVar("scrollbar.background"),
+            background: this.resolvedStyle.bg,
+        };
+        if (showVertical) {
+            renderScrollBar(context, this.layoutSize.width - 1, childHeight, this.child.contentHeight, this.child.scrollTop, childHeight, colors);
+        }
+        if (showHorizontal) {
+            renderHorizontalScrollBar(context, this.layoutSize.height - 1, childWidth, this.child.contentWidth, this.child.scrollLeft, childWidth, colors);
+        }
+    }
+    resolveScrollBarVisibility(containerSize) {
+        const showVertical = this.resolvePolicy(this.verticalScrollBar, this.child.contentHeight, containerSize.height);
+        const showHorizontal = this.resolvePolicy(this.horizontalScrollBar, this.child.contentWidth, containerSize.width - (showVertical ? 1 : 0));
+        return { showVertical, showHorizontal };
+    }
+    resolvePolicy(policy, contentSize, viewportSize) {
+        switch (policy) {
+            case "always":
+                return true;
+            case "never":
+                return false;
+            case "auto":
+                return contentSize > viewportSize;
+        }
+    }
+}
+/** @deprecated Use ScrollBarDecorator instead */
+export const ScrollContainerElement = ScrollBarDecorator;

package/dist/scrollbar/scrollViewport.d.ts

@@ -0,0 +1,28 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+import type { IContentSized, IScrollable } from "./iScrollable.js";
+/**
+ * Scroll engine: wraps any content-sized child, owns the scroll state, and
+ * clips rendering to the viewport bounds. The child draws full content in
+ * local coordinates; ScrollViewport shifts by -scrollTop/-scrollLeft and
+ * clips so only the visible region produces cells on screen.
+ *
+ * The child only needs to report contentHeight/contentWidth (IContentSized).
+ * ScrollViewport itself implements IScrollable, so it can be nested inside
+ * ScrollBarDecorator or any other consumer of IScrollable.
+ */
+export declare class ScrollViewport extends TUIElement implements IScrollable {
+    private child;
+    scrollTop: number;
+    scrollLeft: number;
+    constructor(child: TUIElement & IContentSized);
+    get contentHeight(): number;
+    get contentWidth(): number;
+    getMaxIntrinsicWidth(_height: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+    scrollBy(dx: number, dy: number): void;
+    scrollTo(left: number, top: number): void;
+    getChild(): TUIElement & IContentSized;
+    protected performLayout(constraints: BoxConstraints): Size;
+    render(context: RenderContext): void;
+}

package/dist/scrollbar/scrollViewport.js

@@ -0,0 +1,65 @@
+import { BoxConstraints, Offset, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+/**
+ * Scroll engine: wraps any content-sized child, owns the scroll state, and
+ * clips rendering to the viewport bounds. The child draws full content in
+ * local coordinates; ScrollViewport shifts by -scrollTop/-scrollLeft and
+ * clips so only the visible region produces cells on screen.
+ *
+ * The child only needs to report contentHeight/contentWidth (IContentSized).
+ * ScrollViewport itself implements IScrollable, so it can be nested inside
+ * ScrollBarDecorator or any other consumer of IScrollable.
+ */
+export class ScrollViewport extends TUIElement {
+    child;
+    scrollTop = 0;
+    scrollLeft = 0;
+    constructor(child) {
+        super();
+        this.child = child;
+        this.appendChild(this.child);
+    }
+    get contentHeight() {
+        return this.child.contentHeight;
+    }
+    get contentWidth() {
+        return this.child.contentWidth;
+    }
+    getMaxIntrinsicWidth(_height) {
+        return this.child.contentWidth;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return this.child.contentHeight;
+    }
+    scrollBy(dx, dy) {
+        this.scrollTo(this.scrollLeft + dx, this.scrollTop + dy);
+    }
+    scrollTo(left, top) {
+        const maxScrollTop = Math.max(0, this.contentHeight - this.layoutSize.height);
+        const maxScrollLeft = Math.max(0, this.contentWidth - this.layoutSize.width);
+        const top2 = Math.max(0, Math.min(maxScrollTop, top));
+        const left2 = Math.max(0, Math.min(maxScrollLeft, left));
+        if (top2 === this.scrollTop && left2 === this.scrollLeft)
+            return;
+        this.scrollTop = top2;
+        this.scrollLeft = left2;
+        // Симметрия со ScrollableElement.scrollTo: смена скролла — dirty-кадр.
+        this.markDirty();
+    }
+    getChild() {
+        return this.child;
+    }
+    performLayout(constraints) {
+        const size = super.performLayout(constraints);
+        // Give child the full viewport size — it draws all content in local coords
+        this.layoutChild(this.child, 0, 0, BoxConstraints.tight(size));
+        return size;
+    }
+    render(context) {
+        // Клип — собственный rect вьюпорта: он не может опустеть — пустой
+        // контекст отсёк бы уже прунинг renderChildren родителя.
+        const scrollOffset = new Offset(-this.scrollLeft, -this.scrollTop);
+        const viewportClip = new Rect(this.globalPosition, this.layoutSize);
+        this.child.render(context.withOffset(scrollOffset).withClip(viewportClip));
+    }
+}

package/dist/scrollbar/scrollableElement.d.ts

@@ -0,0 +1,22 @@
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+import type { IScrollable } from "./iScrollable.js";
+export interface ScrollViewportInfo {
+    readonly scrollTop: number;
+    readonly scrollLeft: number;
+    readonly viewportWidth: number;
+    readonly viewportHeight: number;
+}
+export declare abstract class ScrollableElement extends TUIElement implements IScrollable {
+    scrollTop: number;
+    scrollLeft: number;
+    abstract get contentHeight(): number;
+    abstract get contentWidth(): number;
+    getMinIntrinsicWidth(_height: number): number;
+    getMaxIntrinsicWidth(_height: number): number;
+    getMinIntrinsicHeight(_width: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+    scrollBy(dx: number, dy: number): void;
+    scrollTo(left: number, top: number): void;
+    render(context: RenderContext): void;
+    protected abstract renderViewport(context: RenderContext, viewport: ScrollViewportInfo): void;
+}

package/dist/scrollbar/scrollableElement.js

@@ -0,0 +1,42 @@
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export class ScrollableElement extends TUIElement {
+    scrollTop = 0;
+    scrollLeft = 0;
+    getMinIntrinsicWidth(_height) {
+        return 0;
+    }
+    getMaxIntrinsicWidth(_height) {
+        return this.contentWidth;
+    }
+    getMinIntrinsicHeight(_width) {
+        return 0;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return this.contentHeight;
+    }
+    scrollBy(dx, dy) {
+        this.scrollTo(this.scrollLeft + dx, this.scrollTop + dy);
+    }
+    scrollTo(left, top) {
+        const maxScrollTop = Math.max(0, this.contentHeight - this.layoutSize.height);
+        const maxScrollLeft = Math.max(0, this.contentWidth - this.layoutSize.width);
+        const top2 = Math.max(0, Math.min(maxScrollTop, top));
+        const left2 = Math.max(0, Math.min(maxScrollLeft, left));
+        if (top2 === this.scrollTop && left2 === this.scrollLeft)
+            return;
+        this.scrollTop = top2;
+        this.scrollLeft = left2;
+        // Скролл меняет картинку — сам помечает кадр грязным, не полагаясь на
+        // markDirty у вызывающих (кадр ввода рендерится только по dirty-флагу).
+        this.markDirty();
+    }
+    render(context) {
+        const viewport = {
+            scrollTop: this.scrollTop,
+            scrollLeft: this.scrollLeft,
+            viewportWidth: this.layoutSize.width,
+            viewportHeight: this.layoutSize.height,
+        };
+        this.renderViewport(context, viewport);
+    }
+}

package/dist/selectbox/selectBoxElement.d.ts

@@ -0,0 +1,48 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import type { TUIEventBase } from "@tuidom/core/dom/events/tuiEventBase";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+/** Опция списка — форма зеркалит `ISelectOptionItem` из vscode. */
+export interface ISelectOptionItem {
+    readonly text: string;
+    /** Разделитель: не выбирается, в списке рисуется чертой. */
+    readonly isSeparator?: boolean;
+}
+/** Результат выбора — зеркалит `ISelectData` из vscode. */
+export interface ISelectData {
+    readonly selected: string;
+    readonly index: number;
+}
+/**
+ * Выпадающий список (аналог `SelectBox` из `base/browser/ui/selectBox/`).
+ * Закрытое состояние — одна строка `текст ⌄`; раскрытие строит
+ * {@link PopupMenuElement} и вешает его в overlay-слой корневой view — тем же
+ * путём, что контекст-меню Explorer'а, поэтому клик мимо и Escape закрывают
+ * список, а фокус возвращается сюда.
+ */
+export declare class SelectBoxElement extends TUIElement {
+    private options;
+    private selectedIndex;
+    private session;
+    /** Выбор пользователя. Программный {@link select} события не порождает. */
+    onDidSelect?: (data: ISelectData) => void;
+    constructor();
+    setOptions(options: readonly ISelectOptionItem[], selected?: number): void;
+    /** Программно выставить выбор — без `onDidSelect`, как `select()` в vscode. */
+    select(index: number): void;
+    getSelected(): number;
+    /** Observable state: option texts, selected index/text, and open/closed. */
+    inspectState(): Record<string, unknown>;
+    isOpen(): boolean;
+    /** Текст закрытого состояния: выбранная опция (или пусто, если выбора нет). */
+    private selectedText;
+    private contentWidth;
+    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;
+    protected performDefaultAction(event: TUIEventBase): void;
+    private toggleOpen;
+    private open;
+}

package/dist/selectbox/selectBoxElement.js

@@ -0,0 +1,161 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+import { PopupMenuElement } from "../menu/popupMenuElement.js";
+/** Шеврон закрытого состояния — тот же глиф, что у `<select>` в VS Code. */
+const CHEVRON = "⌄"; // ⌄ DOWN ARROWHEAD
+/** Отметка выбранного пункта в раскрытом списке (VS Code рисует галочку). */
+const CHECK = "✓"; // ✓
+/**
+ * Выпадающий список (аналог `SelectBox` из `base/browser/ui/selectBox/`).
+ * Закрытое состояние — одна строка `текст ⌄`; раскрытие строит
+ * {@link PopupMenuElement} и вешает его в overlay-слой корневой view — тем же
+ * путём, что контекст-меню Explorer'а, поэтому клик мимо и Escape закрывают
+ * список, а фокус возвращается сюда.
+ */
+export class SelectBoxElement extends TUIElement {
+    options = [];
+    selectedIndex = -1;
+    session = null;
+    /** Выбор пользователя. Программный {@link select} события не порождает. */
+    onDidSelect;
+    constructor() {
+        super();
+        this.style = { fg: "dropdown.foreground", bg: "dropdown.background" };
+        this.focusable = true;
+        this.addEventListener("mousedown", (event) => {
+            if (event.button !== "left")
+                return;
+            this.toggleOpen();
+        });
+    }
+    setOptions(options, selected) {
+        this.options = options;
+        if (selected !== undefined)
+            this.selectedIndex = selected;
+        // Выбранный индекс мог указывать за пределы нового списка (канал исчез).
+        if (this.selectedIndex >= options.length)
+            this.selectedIndex = options.length - 1;
+        this.markDirty();
+    }
+    /** Программно выставить выбор — без `onDidSelect`, как `select()` в vscode. */
+    select(index) {
+        if (index < 0 || index >= this.options.length)
+            return;
+        this.selectedIndex = index;
+        this.markDirty();
+    }
+    getSelected() {
+        return this.selectedIndex;
+    }
+    /** Observable state: option texts, selected index/text, and open/closed. */
+    inspectState() {
+        return {
+            open: this.isOpen(),
+            selectedIndex: this.selectedIndex,
+            selectedText: this.selectedText(),
+            options: this.options.map((o) => o.text),
+        };
+    }
+    isOpen() {
+        return this.session?.isOpen() ?? false;
+    }
+    /** Текст закрытого состояния: выбранная опция (или пусто, если выбора нет). */
+    selectedText() {
+        const option = this.selectedIndex >= 0 ? this.options[this.selectedIndex] : undefined;
+        return option?.text ?? "";
+    }
+    contentWidth() {
+        // Ширина не прыгает при смене выбора: держим её по самой длинной опции.
+        const longest = this.options.reduce((max, o) => Math.max(max, o.text.length), 0);
+        return Math.max(longest, this.selectedText().length) + CHEVRON.length + 1;
+    }
+    getMinIntrinsicWidth(_height) {
+        return this.contentWidth();
+    }
+    getMaxIntrinsicWidth(_height) {
+        return this.contentWidth();
+    }
+    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(context) {
+        const width = this.layoutSize.width;
+        const { fg, bg } = this.resolvedStyle;
+        const text = this.selectedText();
+        for (let x = 0; x < width; x++) {
+            context.setCell(x, 0, { char: " ", fg, bg });
+        }
+        for (let i = 0; i < text.length && i < width; i++) {
+            context.setCell(i, 0, { char: text[i], fg, bg });
+        }
+        // Шеврон прижат вправо — так же, как стрелка нативного `<select>`.
+        if (width > 0) {
+            context.setCell(width - 1, 0, { char: CHEVRON, fg: this.styleVar("dropdown.border"), bg });
+        }
+    }
+    performDefaultAction(event) {
+        if (event.type === "keydown") {
+            const key = event.key;
+            if (key === "Enter" || key === " " || key === "ArrowDown") {
+                this.toggleOpen();
+                return;
+            }
+        }
+        super.performDefaultAction(event);
+    }
+    toggleOpen() {
+        if (this.isOpen()) {
+            this.session?.close();
+            return;
+        }
+        this.open();
+    }
+    open() {
+        const layer = this.getOverlayLayer();
+        if (layer === null || this.options.length === 0)
+            return;
+        const entries = this.options.map((option, index) => {
+            if (option.isSeparator === true)
+                return { type: "separator" };
+            return {
+                label: option.text,
+                // Галочка у активного пункта — то же, что `toggled` в меню VS Code.
+                icon: index === this.selectedIndex ? CHECK : " ",
+                onSelect: () => {
+                    this.session?.close();
+                    this.selectedIndex = index;
+                    this.markDirty();
+                    this.onDidSelect?.({ selected: option.text, index });
+                },
+            };
+        });
+        const menu = new PopupMenuElement(entries);
+        // Фон раскрытого списка — dropdown.listBackground; пункты наследуют
+        // (их обычное состояние объявлено сентинелами, не своим bg).
+        menu.style = { fg: "menu.foreground", bg: "dropdown.listBackground" };
+        menu.focusable = true;
+        // Список раскрывается ПОД контролом и прижимается к его левому краю —
+        // как раскрывается `<select>`.
+        this.session = layer.openPopupSession(menu, { screenX: this.globalPosition.x, screenY: this.globalPosition.y }, {
+            visible: true,
+            restoreFocus: true,
+            focusOnOpen: true,
+            closeOnEscape: true,
+            pointerPolicy: "close-on-outside",
+            disposeOnClose: true,
+            onClose: () => {
+                this.session = null;
+            },
+        });
+        menu.onClose = () => {
+            this.session?.close();
+        };
+    }
+}

package/dist/terminal/encodeKeyForPty.d.ts

@@ -0,0 +1,3 @@
+import type { TUIKeyboardEvent } from "@tuidom/core/dom/events/tuiKeyboardEvent";
+/** Вернуть байты для PTY, либо "" если клавишу не транслируем. */
+export declare function encodeKeyForPty(event: TUIKeyboardEvent): string;