@tuidom/elements 0.1.0

package/dist/menu/popupMenuElement.js

@@ -0,0 +1,318 @@
+import { BoxConstraints, Offset, Point, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { BORDER_THICKNESS } from "@tuidom/core/dom/borderStyle";
+import { TUIKeyboardEvent } from "@tuidom/core/dom/events/tuiKeyboardEvent";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+import { VStackElement } from "../layout/vStackElement.js";
+import { PopupMenuItemElement, PopupMenuSeparatorElement } from "./popupMenuItemElement.js";
+function isSeparator(entry) {
+    return entry.type === "separator";
+}
+function isSubmenu(entry) {
+    return entry.type === "submenu";
+}
+/** Индикатор строки-подменю (рисуется в колонке шортката). */
+const SUBMENU_INDICATOR = "›";
+/**
+ * Дочерний попап подменю. Вынесено из класса не для красоты: самоссылка
+ * `new PopupMenuElement` в теле класса заставляет esbuild/tsx завести алиас
+ * `_PopupMenuElement`, и `constructor.name` в приложении получает `_`-префикс —
+ * локаторы инспектора (`waitForNode("PopupMenuElement")`) перестают матчить.
+ */
+function createSubmenuPopup(entries) {
+    return new PopupMenuElement(entries);
+}
+export class PopupMenuElement extends TUIElement {
+    entries;
+    selectedIndex;
+    onClose;
+    selectableIndices;
+    vstack;
+    itemElements = [];
+    separatorElements = [];
+    /** Открытое дочернее подменю (сессия — в том же overlay-слое). */
+    child = null;
+    childEntryIndex = -1;
+    /** Родитель в цепочке подменю; у корневого меню — null. */
+    parentMenu = null;
+    constructor(entries) {
+        super();
+        this.style = { fg: "menu.foreground", bg: "menu.background" };
+        this.entries = entries;
+        this.selectableIndices = entries.map((e, i) => (isSeparator(e) ? -1 : i)).filter((i) => i >= 0);
+        this.selectedIndex = this.selectableIndices.length > 0 ? this.selectableIndices[0] : -1;
+        const config = this.computeConfig();
+        this.vstack = new VStackElement();
+        for (let i = 0; i < entries.length; i++) {
+            const entry = entries[i];
+            const entryIndex = i;
+            if (isSeparator(entry)) {
+                const separator = new PopupMenuSeparatorElement();
+                this.separatorElements.push(separator);
+                this.vstack.addChild(separator, { width: "stretch", height: 1 });
+            }
+            else if (isSubmenu(entry)) {
+                const item = new PopupMenuItemElement(entry.label, config, SUBMENU_INDICATOR, entry.icon);
+                item.onSelect = () => {
+                    this.openSubmenu(entryIndex);
+                };
+                item.onHover = () => {
+                    this.selectByEntryIndex(entryIndex);
+                };
+                this.itemElements.push(item);
+                this.vstack.addChild(item, { width: "stretch", height: 1 });
+            }
+            else {
+                const item = new PopupMenuItemElement(entry.label, config, entry.shortcut, entry.icon);
+                item.onSelect = entry.onSelect;
+                item.onHover = () => {
+                    this.selectByEntryIndex(entryIndex);
+                };
+                this.itemElements.push(item);
+                this.vstack.addChild(item, { width: "stretch", height: 1 });
+            }
+        }
+        this.appendChild(this.vstack);
+        this.updateItemSelectedStates();
+    }
+    /** Раздаёт стили меню (свои + всем пунктам и сепараторам). */
+    /** Observable state: item labels (separators as null) and the selected index. */
+    inspectState() {
+        return {
+            selectedIndex: this.selectedIndex,
+            items: this.entries.map((e) => (isSeparator(e) ? null : e.label)),
+        };
+    }
+    getMinIntrinsicWidth(_height) {
+        return this.getIntrinsicSize().width;
+    }
+    getMaxIntrinsicWidth(_height) {
+        return this.getIntrinsicSize().width;
+    }
+    getMinIntrinsicHeight(_width) {
+        return this.getIntrinsicSize().height;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return this.getIntrinsicSize().height;
+    }
+    getIntrinsicSize() {
+        const innerWidth = this.vstack.getMaxIntrinsicWidth(this.entries.length);
+        const totalWidth = BORDER_THICKNESS * 2 + innerWidth; // borders left + right
+        const totalHeight = this.entries.length + BORDER_THICKNESS * 2; // border top + entries + border bottom
+        return new Size(totalWidth, totalHeight);
+    }
+    performLayout(constraints) {
+        const intrinsic = this.getIntrinsicSize();
+        const resultSize = constraints.constrain(intrinsic);
+        super.performLayout(BoxConstraints.tight(resultSize));
+        const innerSize = new Size(resultSize.width - BORDER_THICKNESS * 2, resultSize.height - BORDER_THICKNESS * 2);
+        this.layoutChild(this.vstack, BORDER_THICKNESS, BORDER_THICKNESS, BoxConstraints.tight(innerSize));
+        return resultSize;
+    }
+    render(context) {
+        const w = this.layoutSize.width;
+        const h = this.layoutSize.height;
+        this.paintOwnBackground(context);
+        const borderFg = this.styleVar("menu.border");
+        const bg = this.resolvedStyle.bg;
+        // Frame with T-connectors on separator rows (├───┤).
+        const children = this.vstack.getChildren();
+        const separators = [];
+        for (let i = 0; i < children.length; i++) {
+            if (children[i] instanceof PopupMenuSeparatorElement)
+                separators.push(1 + i);
+        }
+        context.drawBox(0, 0, w, h, { fg: borderFg, bg, separators });
+        // Render VStack content
+        this.renderChildren(context);
+    }
+    computeConfig() {
+        let hasIcon = false;
+        let hasShortcuts = false;
+        for (const entry of this.entries) {
+            if (isSeparator(entry))
+                continue;
+            if (entry.icon)
+                hasIcon = true;
+            // Индикатор подменю живёт в колонке шортката.
+            if (isSubmenu(entry) || entry.shortcut)
+                hasShortcuts = true;
+        }
+        return { hasIconColumn: hasIcon, hasShortcuts };
+    }
+    performDefaultAction(event) {
+        if (event.type === "keydown") {
+            this.handleMenuKey(event.key);
+        }
+    }
+    /**
+     * Клавиатура цепочки меню: фокус остаётся на корне, клавиши роутятся в
+     * глубочайшее открытое подменю. ArrowLeft/Escape закрывают один уровень
+     * (Escape без подменю — всё меню), ArrowRight/Enter открывают подменю.
+     */
+    handleMenuKey(key) {
+        if (this.child) {
+            // ArrowLeft закрывает ГЛУБОЧАЙШИЙ уровень — его родитель ближе всех.
+            if (key === "ArrowLeft" && !this.child.menu.hasOpenSubmenu()) {
+                this.closeChild();
+                return;
+            }
+            this.child.menu.handleMenuKey(key);
+            return;
+        }
+        if (key === "ArrowUp") {
+            this.moveSelection(-1);
+        }
+        else if (key === "ArrowDown") {
+            this.moveSelection(1);
+        }
+        else if (key === "Enter") {
+            this.activateSelected();
+        }
+        else if (key === "ArrowRight") {
+            if (this.selectedIndex >= 0 && isSubmenu(this.entries[this.selectedIndex])) {
+                this.openSubmenu(this.selectedIndex);
+            }
+        }
+        else if (key === "Escape") {
+            this.onClose?.();
+        }
+    }
+    /** Есть ли открытое подменю (на любом уровне достаточно первого). */
+    hasOpenSubmenu() {
+        return this.child !== null;
+    }
+    /** target внутри цепочки подменю этого меню (для close-on-outside владельца). */
+    ownsElement(target) {
+        let current = target;
+        while (current !== null) {
+            if (current === this)
+                return true;
+            current = current.getParent();
+        }
+        return this.child !== null && this.child.menu.ownsElement(target);
+    }
+    /** Каскадно закрывает всю цепочку открытых подменю. */
+    closeSubmenus() {
+        this.closeChild();
+    }
+    closeChild() {
+        // Поля нулит onClose сессии — единая точка и для внешнего закрытия.
+        this.child?.session.close();
+    }
+    openSubmenu(entryIndex) {
+        const entry = this.entries[entryIndex];
+        /* v8 ignore start -- defensive: вызывается только для submenu-строк */
+        if (!isSubmenu(entry))
+            return;
+        /* v8 ignore stop */
+        const layer = this.getOverlayLayer();
+        if (!layer)
+            return;
+        if (this.child !== null && this.childEntryIndex === entryIndex)
+            return; // уже открыто
+        this.closeChild();
+        const resolved = typeof entry.entries === "function" ? entry.entries() : entry.entries;
+        if (resolved.length === 0)
+            return;
+        // Выбор листа в подменю закрывает всю цепочку ДО действия (как у корня).
+        const wrapped = resolved.map((e) => {
+            if (e.type === "separator" || e.type === "submenu")
+                return e;
+            const original = e.onSelect;
+            return {
+                ...e,
+                onSelect: () => {
+                    this.closeAll();
+                    original?.();
+                },
+            };
+        });
+        const child = createSubmenuPopup(wrapped);
+        child.parentMenu = this;
+        child.onClose = () => {
+            this.closeChild();
+        };
+        // Якорь — строка-владелец: вплотную справа от родителя, первой строкой
+        // на уровне строки (preferBelow: false); флип у краёв — computeAnchorPosition.
+        const rowGlobalY = this.globalPosition.y + 1 + entryIndex;
+        const session = layer.openPopupSession(child, {
+            screenX: this.globalPosition.x,
+            screenY: rowGlobalY,
+            offsetX: this.layoutSize.width,
+            preferBelow: false,
+        }, {
+            visible: true,
+            focusOnOpen: false,
+            restoreFocus: false,
+            closeOnEscape: false,
+            pointerPolicy: "passthrough",
+            disposeOnClose: true,
+            onClose: () => {
+                child.closeSubmenus();
+                /* v8 ignore start -- защитный гард: к моменту onClose поле ещё указывает на закрываемое подменю (openSubmenu закрывает прежнее ДО назначения нового) */
+                if (this.child?.menu !== child)
+                    return;
+                /* v8 ignore stop */
+                this.child = null;
+                this.childEntryIndex = -1;
+            },
+        });
+        this.child = { menu: child, session };
+        this.childEntryIndex = entryIndex;
+    }
+    /** Закрыть всю цепочку: вверх до корня; корень закрывает свою сессию. */
+    closeAll() {
+        if (this.parentMenu) {
+            this.parentMenu.closeAll();
+            return;
+        }
+        this.closeChild();
+        this.onClose?.();
+    }
+    updateItemSelectedStates() {
+        let itemIndex = 0;
+        for (let i = 0; i < this.entries.length; i++) {
+            if (!isSeparator(this.entries[i])) {
+                this.itemElements[itemIndex].selected = i === this.selectedIndex;
+                itemIndex++;
+            }
+        }
+    }
+    /**
+     * Moves the selection onto the item at the given entry index. Only called
+     * from item hover callbacks, so `index` is always a selectable entry.
+     */
+    selectByEntryIndex(index) {
+        // Ховер по другой строке родителя закрывает открытое подменю.
+        if (this.child && index !== this.childEntryIndex) {
+            this.closeChild();
+        }
+        if (index === this.selectedIndex)
+            return;
+        this.selectedIndex = index;
+        this.updateItemSelectedStates();
+    }
+    moveSelection(direction) {
+        if (this.selectableIndices.length === 0)
+            return;
+        const currentPos = this.selectableIndices.indexOf(this.selectedIndex);
+        let nextPos = currentPos + direction;
+        if (nextPos < 0)
+            nextPos = this.selectableIndices.length - 1;
+        if (nextPos >= this.selectableIndices.length)
+            nextPos = 0;
+        this.selectedIndex = this.selectableIndices[nextPos];
+        this.updateItemSelectedStates();
+    }
+    activateSelected() {
+        if (this.selectedIndex < 0)
+            return;
+        const entry = this.entries[this.selectedIndex];
+        if (isSubmenu(entry)) {
+            this.openSubmenu(this.selectedIndex);
+        }
+        else if (!isSeparator(entry) && entry.onSelect) {
+            entry.onSelect();
+        }
+    }
+}

package/dist/menu/popupMenuItemElement.d.ts

@@ -0,0 +1,24 @@
+import { CompositeElement } from "@tuidom/core/dom/compositeElement";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+export interface PopupMenuItemConfig {
+    hasIconColumn: boolean;
+    hasShortcuts: boolean;
+}
+export declare class PopupMenuItemElement extends CompositeElement {
+    readonly label: string;
+    readonly shortcut: string | undefined;
+    readonly icon: string | undefined;
+    onSelect?: () => void;
+    /** Fired when the mouse moves over this item — used to follow the cursor with the selection. */
+    onHover?: () => void;
+    constructor(label: string, config: PopupMenuItemConfig, shortcut?: string, icon?: string);
+    get selected(): boolean;
+    set selected(value: boolean);
+}
+export declare class PopupMenuSeparatorElement extends TUIElement {
+    getMinIntrinsicWidth(_height: number): number;
+    getMaxIntrinsicWidth(_height: number): number;
+    getMinIntrinsicHeight(_width: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+    render(context: RenderContext): void;
+}

package/dist/menu/popupMenuItemElement.js

@@ -0,0 +1,89 @@
+import { CompositeElement } from "@tuidom/core/dom/compositeElement";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+import { HFlexElement, hflexFill, hflexFit, hflexFixed } from "../layout/hFlexElement.js";
+import { TextLabelElement } from "../text/textLabelElement.js";
+export class PopupMenuItemElement extends CompositeElement {
+    label;
+    shortcut;
+    icon;
+    onSelect;
+    /** Fired when the mouse moves over this item — used to follow the cursor with the selection. */
+    onHover;
+    constructor(label, config, shortcut, icon) {
+        super();
+        this.label = label;
+        this.shortcut = shortcut;
+        this.icon = icon;
+        this.addEventListener("click", (event) => {
+            if (event.defaultPrevented)
+                return;
+            this.onSelect?.();
+        });
+        // Follow the mouse: hovering an item moves the menu selection onto it (VS Code behavior).
+        this.addEventListener("mousemove", (event) => {
+            if (event.defaultPrevented)
+                return;
+            this.onHover?.();
+        });
+        // Обычное состояние НАСЛЕДУЕТ цвета — так селектбокс может переопределить
+        // фон раскрытого списка (dropdown.listBackground) одним style на корне
+        // попапа; выделение — when-вариант с токенами menu.selection*.
+        this.style = {
+            when: [{ states: ["selected"], fg: "menu.selectionForeground", bg: "menu.selectionBackground" }],
+        };
+        const row = new HFlexElement();
+        if (config.hasIconColumn) {
+            row.addChild(new TextLabelElement(this.icon ? this.icon + " " : "  "), {
+                width: hflexFixed(2),
+                height: "fill",
+            });
+        }
+        else {
+            row.addChild(new TextLabelElement(" "), { width: hflexFixed(1), height: "fill" });
+        }
+        row.addChild(new TextLabelElement(config.hasShortcuts ? this.label + " " : this.label), {
+            width: hflexFill(),
+            height: "fill",
+        });
+        if (config.hasShortcuts && this.shortcut) {
+            const shortcutLabel = new TextLabelElement("  " + this.shortcut);
+            shortcutLabel.style = {
+                fg: "menu.shortcutForeground",
+                when: [{ states: ["in:selected"], fg: "menu.selectionForeground" }],
+            };
+            row.addChild(shortcutLabel, { width: hflexFit(), height: "fill" });
+        }
+        row.addChild(new TextLabelElement(" "), { width: hflexFixed(1), height: "fill" });
+        this.setRootChild(row);
+    }
+    get selected() {
+        return this.hasStyleState("selected");
+    }
+    set selected(value) {
+        this.setStyleState("selected", value);
+    }
+}
+export class PopupMenuSeparatorElement extends TUIElement {
+    getMinIntrinsicWidth(_height) {
+        return 0;
+    }
+    getMaxIntrinsicWidth(_height) {
+        return 0;
+    }
+    getMinIntrinsicHeight(_width) {
+        return 1;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return 1;
+    }
+    render(context) {
+        const width = this.layoutSize.width;
+        for (let x = 0; x < width; x++) {
+            context.setCell(x, 0, {
+                char: "─",
+                fg: this.styleVar("menu.separatorBackground"),
+                bg: this.resolvedStyle.bg,
+            });
+        }
+    }
+}

package/dist/panel/panelContainerElement.d.ts

@@ -0,0 +1,64 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+/** A view hosted in the bottom Panel (e.g. Problems, Output). */
+export interface PanelView {
+    readonly id: string;
+    readonly title: string;
+    /** The view's content element; null renders {@link placeholder} instead. */
+    content: TUIElement | null;
+    /**
+     * View-specific controls pinned to the right of the tab row (VS Code's
+     * `MenuId.ViewTitle` area) — e.g. the Output channel selector.
+     */
+    actions?: TUIElement | null;
+    /** Empty-state message shown when `content` is null (à la VS Code view welcome). */
+    readonly placeholder?: string;
+}
+/**
+ * The bottom **Panel** part (VS Code `ViewContainerLocation.Panel`): a top border
+ * strip + a header row of view tabs (PROBLEMS, OUTPUT, …), a left border that
+ * separates it from the sidebar, and the active view's content below. Views are
+ * registered via {@link addView}; the active one is shown. A view with no content
+ * element renders its {@link PanelView.placeholder} empty-state message.
+ *
+ * Tab labels are drawn dim (`panelTitle.inactiveForeground`); the active tab is
+ * marked with an underline. Colours are pushed by the controller (`panel.*` /
+ * `panelTitle.*`), mirroring how `EditorElement` receives its theme colours.
+ */
+export declare class PanelContainerElement extends TUIElement {
+    /** Fired when a tab is clicked (after the active view has switched). */
+    onActivateView?: (id: string) => void;
+    private views;
+    private activeId;
+    constructor();
+    addView(view: PanelView): void;
+    /** Replaces a registered view's title-row controls (null removes them). */
+    setViewActions(id: string, actions: TUIElement | null): void;
+    /** Replaces a registered view's content element (e.g. swapping a placeholder for the real view). */
+    setViewContent(id: string, content: TUIElement | null): void;
+    setActiveView(id: string): void;
+    /**
+     * Все вкладки живут в дереве постоянно; неактивные — hidden (root и стили
+     * доходят до них всегда). Раньше getChildren() отдавал только активную, и
+     * контент/actions, прицепленные до укоренения панели, оставались с
+     * протухшим root — модель бага #204 (селектор каналов Output молча не
+     * открывал выпадашку после restore сессии).
+     */
+    private syncChildren;
+    getActiveViewId(): string | null;
+    getViewIds(): string[];
+    /**
+     * Observable panel state for the inspector: which tabs exist, which is
+     * active, and each tab's absolute hit geometry. Replaces the e2e helper that
+     * re-derived tab coordinates from TAB_INDENT/TAB_PAD by hand — a test clicks
+     * `tabs[i].centerX` on `tabRow` instead.
+     */
+    inspectState(): Record<string, unknown>;
+    /** Правая граница таб-строки — за неё контролы вкладки заезжать не должны. */
+    private tabsEnd;
+    private activeView;
+    /** Header tab layout: ` Title ` segments after the indent, with hit ranges. */
+    private tabSegments;
+    protected performLayout(constraints: BoxConstraints): Size;
+    render(context: RenderContext): void;
+}