@tuidom/elements 0.1.0

package/dist/menu/menuBarElement.d.ts

@@ -0,0 +1,47 @@
+import { BoxConstraints, Size } from "@tuidom/core/common/geometryPromitives";
+import type { TUIEventBase } from "@tuidom/core/dom/events/tuiEventBase";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+import type { MenuEntry } from "./popupMenuElement.js";
+export interface MenuBarItem {
+    label: string;
+    mnemonic?: string;
+    entries: MenuEntry[];
+}
+export declare class MenuBarElement extends TUIElement {
+    readonly items: readonly MenuBarItem[];
+    activeIndex: number;
+    private activeMenu;
+    private activeMenuSession;
+    private itemElements;
+    private hflex;
+    private previousFocusedElement;
+    private readonly mnemonicHandler;
+    private mnemonicTarget;
+    private updateItemActiveStates;
+    constructor(items: MenuBarItem[]);
+    /**
+     * Мнемоники (Alt+F и т.п.) слушаются на КОРНЕ дерева: keydown без фокуса
+     * диспатчится прямо в корень и до промежуточных контейнеров не всплывает,
+     * а открывать меню он должен всё равно. Подписка живёт строго на
+     * подключённом дереве (Н4): в неукоренённом поддереве мнемоники не
+     * работают — раньше fallback вешал слушатель на промежуточного родителя,
+     * и тот никогда не переезжал на появившийся позже корень.
+     */
+    protected onDidConnect(root: TUIElement): void;
+    protected onDidDisconnect(): void;
+    get isMenuOpen(): boolean;
+    getMinIntrinsicWidth(height: number): number;
+    getMaxIntrinsicWidth(height: number): number;
+    getMinIntrinsicHeight(_width: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+    protected performLayout(constraints: BoxConstraints): Size;
+    protected performDefaultAction(event: TUIEventBase): void;
+    private handleKeydownDefault;
+    private openMenu;
+    private closePopup;
+    private deactivate;
+    private forwardToPopup;
+    private wrapIndex;
+    private findMnemonicMatch;
+    private getMenuGlobalPosition;
+}

package/dist/menu/menuBarElement.js

@@ -0,0 +1,285 @@
+import { BoxConstraints, Offset, Point, Size } from "@tuidom/core/common/geometryPromitives";
+import { TUIKeyboardEvent } from "@tuidom/core/dom/events/tuiKeyboardEvent";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+import { HFlexElement, hflexFill, hflexFit, hflexFixed } from "../layout/hFlexElement.js";
+import { MenuBarFillerElement, MenuBarItemElement } from "./menuBarItemElement.js";
+import { PopupMenuElement } from "./popupMenuElement.js";
+export class MenuBarElement extends TUIElement {
+    items;
+    activeIndex = -1;
+    activeMenu = null;
+    activeMenuSession = null;
+    itemElements = [];
+    hflex;
+    previousFocusedElement = null;
+    mnemonicHandler = (event) => {
+        const match = this.findMnemonicMatch(event);
+        if (match >= 0) {
+            this.focus();
+            this.openMenu(match);
+            event.preventDefault();
+        }
+    };
+    mnemonicTarget = null;
+    updateItemActiveStates() {
+        for (let i = 0; i < this.itemElements.length; i++) {
+            this.itemElements[i].active = i === this.activeIndex && this.isFocused;
+        }
+    }
+    constructor(items) {
+        super();
+        // Полоса красится токенами; пункты наследуют (активный — menubar.selection*).
+        this.style = { fg: "menuBar.foreground", bg: "menuBar.background" };
+        this.focusable = true;
+        this.items = items;
+        this.hflex = new HFlexElement();
+        this.hflex.addChild(new MenuBarFillerElement(), { width: hflexFixed(2), height: 1 });
+        this.itemElements = items.map((item, index) => {
+            const el = new MenuBarItemElement(item.label, item.mnemonic);
+            el.onActivate = () => {
+                if (this.activeMenu && this.activeIndex === index) {
+                    this.closePopup();
+                }
+                else {
+                    this.focus();
+                    this.openMenu(index);
+                }
+            };
+            // While a menu is open, hovering another top-level item switches to it (VS Code behavior).
+            el.onHover = () => {
+                if (this.activeMenu && this.activeIndex !== index) {
+                    this.openMenu(index);
+                }
+            };
+            this.hflex.addChild(el, { width: hflexFit(), height: 1 });
+            return el;
+        });
+        this.hflex.addChild(new MenuBarFillerElement(), { width: hflexFill(), height: 1 });
+        this.appendChild(this.hflex);
+    }
+    /**
+     * Мнемоники (Alt+F и т.п.) слушаются на КОРНЕ дерева: keydown без фокуса
+     * диспатчится прямо в корень и до промежуточных контейнеров не всплывает,
+     * а открывать меню он должен всё равно. Подписка живёт строго на
+     * подключённом дереве (Н4): в неукоренённом поддереве мнемоники не
+     * работают — раньше fallback вешал слушатель на промежуточного родителя,
+     * и тот никогда не переезжал на появившийся позже корень.
+     */
+    onDidConnect(root) {
+        this.mnemonicTarget = root;
+        root.addEventListener("keydown", this.mnemonicHandler);
+    }
+    onDidDisconnect() {
+        this.mnemonicTarget?.removeEventListener("keydown", this.mnemonicHandler);
+        this.mnemonicTarget = null;
+    }
+    get isMenuOpen() {
+        return this.activeMenu !== null;
+    }
+    getMinIntrinsicWidth(height) {
+        return this.hflex.getMinIntrinsicWidth(height);
+    }
+    getMaxIntrinsicWidth(height) {
+        return this.hflex.getMaxIntrinsicWidth(height);
+    }
+    getMinIntrinsicHeight(_width) {
+        return 1;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return 1;
+    }
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        this.layoutChild(this.hflex, 0, 0, BoxConstraints.tight(new Size(containerSize.width, 1)));
+        return containerSize;
+    }
+    performDefaultAction(event) {
+        if (event.type === "focus") {
+            this.previousFocusedElement = event.relatedTarget;
+            if (this.activeIndex < 0) {
+                this.activeIndex = 0;
+            }
+            this.updateItemActiveStates();
+            this.markDirty();
+        }
+        else if (event.type === "blur") {
+            this.deactivate();
+            this.previousFocusedElement = null;
+        }
+        else if (event.type === "keydown") {
+            this.handleKeydownDefault(event);
+        }
+    }
+    handleKeydownDefault(event) {
+        if (this.activeIndex < 0) {
+            return;
+        }
+        if (event.key === "Escape") {
+            if (this.activeMenu) {
+                this.closePopup();
+            }
+            else {
+                const prev = this.previousFocusedElement;
+                this.deactivate();
+                if (prev) {
+                    prev.focus();
+                }
+                else {
+                    this.blur();
+                }
+            }
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            const next = this.wrapIndex(this.activeIndex - 1);
+            if (this.activeMenu) {
+                this.openMenu(next);
+            }
+            else {
+                this.activeIndex = next;
+                this.updateItemActiveStates();
+                this.markDirty();
+            }
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            const next = this.wrapIndex(this.activeIndex + 1);
+            if (this.activeMenu) {
+                this.openMenu(next);
+            }
+            else {
+                this.activeIndex = next;
+                this.updateItemActiveStates();
+                this.markDirty();
+            }
+            return;
+        }
+        if (event.key === "ArrowDown" || event.key === "Enter") {
+            if (this.activeMenu) {
+                this.forwardToPopup(event);
+            }
+            else {
+                this.openMenu(this.activeIndex);
+            }
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            if (this.activeMenu) {
+                this.forwardToPopup(event);
+            }
+            return;
+        }
+        if (this.activeMenu) {
+            this.forwardToPopup(event);
+            return;
+        }
+    }
+    openMenu(index) {
+        if (index < 0 || index >= this.items.length) {
+            return;
+        }
+        this.closePopup();
+        const wrappedEntries = this.items[index].entries.map((entry) => {
+            if (entry.type === "separator" || entry.type === "submenu") {
+                return entry;
+            }
+            const originalOnSelect = entry.onSelect;
+            return {
+                ...entry,
+                onSelect: () => {
+                    originalOnSelect?.();
+                    this.deactivate();
+                    this.blur();
+                },
+            };
+        });
+        this.activeIndex = index;
+        this.updateItemActiveStates();
+        const menu = new PopupMenuElement(wrappedEntries);
+        this.activeMenu = menu;
+        const layer = this.getOverlayLayer();
+        /* v8 ignore start -- defensive: меню-бар всегда прикреплён к BodyElement со слоем */
+        if (!layer)
+            return;
+        /* v8 ignore stop */
+        const position = this.getMenuGlobalPosition(index);
+        let session = null;
+        session = layer.createSession(menu, position, {
+            visible: true,
+            // Меню-бар сам управляет закрытием дропдауна: клик снаружи уводит фокус →
+            // blur → deactivate, а повторный клик по тому же пункту тоглит его. Перехват
+            // в OverlayLayer (close-on-outside) гонялся бы с этим тоглом, поэтому passthrough.
+            pointerPolicy: "passthrough",
+            // ...но клавиатурой дропдаун владеет (стрелки/Enter/Escape/мнемоники), поэтому
+            // глобальные кейбинды при открытом меню гасим явным опт-ином.
+            capturesKeyboard: true,
+            disposeOnClose: true,
+            onClose: () => {
+                /* v8 ignore start -- guards against a stale onClose after the menu was switched; switching disposes the old session without firing onClose, so the mismatch (false) side is unreachable via the public API */
+                if (this.activeMenuSession === session) {
+                    this.activeMenuSession = null;
+                }
+                if (this.activeMenu === menu) {
+                    this.activeMenu = null;
+                }
+                /* v8 ignore stop */
+            },
+        });
+        menu.onClose = () => {
+            session.close();
+        };
+        this.activeMenuSession = session;
+        this.markDirty();
+    }
+    closePopup() {
+        this.activeMenuSession?.dispose();
+        this.activeMenuSession = null;
+        this.activeMenu = null;
+        this.markDirty();
+    }
+    deactivate() {
+        this.closePopup();
+        this.activeIndex = -1;
+        this.updateItemActiveStates();
+        this.markDirty();
+    }
+    forwardToPopup(event) {
+        this.activeMenu?.dispatchEvent(new TUIKeyboardEvent("keydown", {
+            key: event.key,
+            code: event.code,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+            raw: event.raw,
+            bubbles: false,
+        }));
+    }
+    wrapIndex(index) {
+        if (this.items.length === 0) {
+            return -1;
+        }
+        if (index < 0) {
+            return this.items.length - 1;
+        }
+        if (index >= this.items.length) {
+            return 0;
+        }
+        return index;
+    }
+    findMnemonicMatch(event) {
+        if (!event.altKey || event.ctrlKey || event.metaKey || event.key.length !== 1) {
+            return -1;
+        }
+        const normalizedKey = event.key.toLowerCase();
+        return this.items.findIndex((item) => {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            const mnemonic = (item.mnemonic ?? item.label[0] ?? "").toLowerCase();
+            return mnemonic === normalizedKey;
+        });
+    }
+    getMenuGlobalPosition(index) {
+        const el = this.itemElements[index];
+        return new Point(this.globalPosition.x + el.localPosition.dx, this.globalPosition.y + 1);
+    }
+}

package/dist/menu/menuBarItemElement.d.ts

@@ -0,0 +1,20 @@
+import { CompositeElement } from "@tuidom/core/dom/compositeElement";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+export declare class MenuBarItemElement extends CompositeElement {
+    readonly label: string;
+    readonly mnemonic: string | undefined;
+    onActivate: (() => void) | null;
+    /** Fired when the mouse moves over this item — used to switch the open menu on hover. */
+    onHover: (() => void) | null;
+    constructor(label: string, mnemonic?: string);
+    get active(): boolean;
+    set active(value: boolean);
+    private getMnemonicIndex;
+}
+export declare class MenuBarFillerElement extends TUIElement {
+    constructor();
+    getMinIntrinsicWidth(_height: number): number;
+    getMaxIntrinsicWidth(_height: number): number;
+    getMinIntrinsicHeight(_width: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+}

package/dist/menu/menuBarItemElement.js

@@ -0,0 +1,68 @@
+import { StyleFlags } from "@tuidom/core/common/styleFlags";
+import { CompositeElement } from "@tuidom/core/dom/compositeElement";
+import { INHERITED_BG, INHERITED_FG } from "@tuidom/core/dom/styles/tuiStyle";
+import { TUIElement } from "@tuidom/core/dom/tuiElement";
+import { TextLabelElement } from "../text/textLabelElement.js";
+export class MenuBarItemElement extends CompositeElement {
+    label;
+    mnemonic;
+    onActivate = null;
+    /** Fired when the mouse moves over this item — used to switch the open menu on hover. */
+    onHover = null;
+    constructor(label, mnemonic) {
+        super();
+        this.label = label;
+        this.mnemonic = mnemonic;
+        this.addEventListener("click", (event) => {
+            if (event.defaultPrevented)
+                return;
+            this.onActivate?.();
+        });
+        this.addEventListener("mousemove", (event) => {
+            if (event.defaultPrevented)
+                return;
+            this.onHover?.();
+        });
+        // Обычное состояние наследует цвета полосы (их задаёт MenuBarElement
+        // токенами menuBar.*), активный пункт — токены menubar.selection*.
+        this.style = {
+            when: [{ states: ["active"], fg: "menubar.selectionForeground", bg: "menubar.selectionBackground" }],
+        };
+        const text = new TextLabelElement(` ${this.label} `);
+        const mnemonicIndex = this.getMnemonicIndex();
+        if (mnemonicIndex >= 0) {
+            text.setCharStyle(mnemonicIndex + 1, { style: StyleFlags.Underline });
+        }
+        this.setRootChild(text);
+    }
+    get active() {
+        return this.hasStyleState("active");
+    }
+    set active(value) {
+        this.setStyleState("active", value);
+    }
+    getMnemonicIndex() {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const mnemonic = (this.mnemonic ?? this.label[0] ?? "").toLowerCase();
+        return this.label.toLowerCase().indexOf(mnemonic);
+    }
+}
+export class MenuBarFillerElement extends TUIElement {
+    constructor() {
+        super();
+        // «Владею фоном, крашу унаследованным» — заливает база.
+        this.style = { fg: INHERITED_FG, bg: INHERITED_BG };
+    }
+    getMinIntrinsicWidth(_height) {
+        return 0;
+    }
+    getMaxIntrinsicWidth(_height) {
+        return 0;
+    }
+    getMinIntrinsicHeight(_width) {
+        return 1;
+    }
+    getMaxIntrinsicHeight(_width) {
+        return 1;
+    }
+}

package/dist/menu/popupMenuElement.d.ts

@@ -0,0 +1,81 @@
+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";
+export interface MenuItemEntry {
+    type?: "item";
+    label: string;
+    shortcut?: string;
+    icon?: string;
+    /**
+     * Стабильный ключ пункта (у нас — id команды). Попапу не нужен; его читают
+     * потребители, которые рисуют тот же пункт не строкой меню, а кнопкой
+     * (inline-действия в заголовке view).
+     */
+    id?: string;
+    onSelect?: () => void;
+}
+export interface MenuSeparatorEntry {
+    type: "separator";
+}
+/**
+ * Вложенное подменю: строка с индикатором `›`, открывающая дочерний попап.
+ * `entries` может быть ленивым — резолвится в момент открытия подменю.
+ */
+export interface MenuSubmenuEntry {
+    type: "submenu";
+    label: string;
+    icon?: string;
+    entries: MenuEntry[] | (() => MenuEntry[]);
+}
+export type MenuEntry = MenuItemEntry | MenuSeparatorEntry | MenuSubmenuEntry;
+export declare class PopupMenuElement extends TUIElement {
+    readonly entries: MenuEntry[];
+    selectedIndex: number;
+    onClose?: () => void;
+    private selectableIndices;
+    private vstack;
+    private itemElements;
+    private separatorElements;
+    /** Открытое дочернее подменю (сессия — в том же overlay-слое). */
+    private child;
+    private childEntryIndex;
+    /** Родитель в цепочке подменю; у корневого меню — null. */
+    private parentMenu;
+    constructor(entries: MenuEntry[]);
+    /** Раздаёт стили меню (свои + всем пунктам и сепараторам). */
+    /** Observable state: item labels (separators as null) and the selected index. */
+    inspectState(): Record<string, unknown>;
+    getMinIntrinsicWidth(_height: number): number;
+    getMaxIntrinsicWidth(_height: number): number;
+    getMinIntrinsicHeight(_width: number): number;
+    getMaxIntrinsicHeight(_width: number): number;
+    getIntrinsicSize(): Size;
+    protected performLayout(constraints: BoxConstraints): Size;
+    render(context: RenderContext): void;
+    private computeConfig;
+    protected performDefaultAction(event: TUIEventBase): void;
+    /**
+     * Клавиатура цепочки меню: фокус остаётся на корне, клавиши роутятся в
+     * глубочайшее открытое подменю. ArrowLeft/Escape закрывают один уровень
+     * (Escape без подменю — всё меню), ArrowRight/Enter открывают подменю.
+     */
+    private handleMenuKey;
+    /** Есть ли открытое подменю (на любом уровне достаточно первого). */
+    hasOpenSubmenu(): boolean;
+    /** target внутри цепочки подменю этого меню (для close-on-outside владельца). */
+    ownsElement(target: TUIElement): boolean;
+    /** Каскадно закрывает всю цепочку открытых подменю. */
+    closeSubmenus(): void;
+    private closeChild;
+    private openSubmenu;
+    /** Закрыть всю цепочку: вверх до корня; корень закрывает свою сессию. */
+    private closeAll;
+    private updateItemSelectedStates;
+    /**
+     * Moves the selection onto the item at the given entry index. Only called
+     * from item hover callbacks, so `index` is always a selectable entry.
+     */
+    private selectByEntryIndex;
+    private moveSelection;
+    private activateSelected;
+}