@tuidom/elements 0.1.0

package/dist/panel/panelContainerElement.js

@@ -0,0 +1,219 @@
+import { BoxConstraints, Offset, Point, Rect, Size } from "@tuidom/core/common/geometryPromitives";
+import { StyleFlags } from "@tuidom/core/common/styleFlags";
+import { RenderContext, TUIElement } from "@tuidom/core/dom/tuiElement";
+/** One space of padding on each side of a tab title. */
+const TAB_PAD = 1;
+/** Indent of the tab strip from the left edge. */
+const TAB_INDENT = 1;
+/** Row the tab header sits on (below the top border strip). */
+const TAB_ROW = 1;
+/** First content row (below the top border strip + tab header). */
+const CONTENT_TOP = 2;
+/** Left indent of the content area / placeholder (aligns under the tab label). */
+const CONTENT_LEFT = 2;
+/**
+ * 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 class PanelContainerElement extends TUIElement {
+    /** Fired when a tab is clicked (after the active view has switched). */
+    onActivateView;
+    views = [];
+    activeId = null;
+    constructor() {
+        super();
+        this.style = { bg: "panel.background" };
+        this.addEventListener("mousedown", (event) => {
+            if (event.button !== "left")
+                return;
+            // Событие, всплывшее из дочернего контрола (селектор в шапке), не наше:
+            // без этой проверки клик по нему ещё и переключал бы вкладку.
+            if (event.target !== this)
+                return;
+            const localY = event.screenY - this.globalPosition.y;
+            if (localY !== TAB_ROW)
+                return; // only the tab header row switches tabs
+            const localX = event.screenX - this.globalPosition.x;
+            const segment = this.tabSegments().find((s) => localX >= s.start && localX < s.end);
+            if (segment === undefined)
+                return;
+            this.setActiveView(segment.id);
+            this.onActivateView?.(segment.id);
+        });
+    }
+    addView(view) {
+        this.views.push(view);
+        this.activeId ??= view.id;
+        this.syncChildren();
+        this.markDirty();
+    }
+    /** Replaces a registered view's title-row controls (null removes them). */
+    setViewActions(id, actions) {
+        const view = this.views.find((v) => v.id === id);
+        if (view === undefined)
+            return;
+        view.actions = actions;
+        this.syncChildren();
+        this.markDirty();
+    }
+    /** Replaces a registered view's content element (e.g. swapping a placeholder for the real view). */
+    setViewContent(id, content) {
+        const view = this.views.find((v) => v.id === id);
+        if (view === undefined)
+            return;
+        view.content = content;
+        this.syncChildren();
+        this.markDirty();
+    }
+    setActiveView(id) {
+        if (this.views.every((v) => v.id !== id) || this.activeId === id)
+            return;
+        this.activeId = id;
+        this.syncChildren();
+        this.markDirty();
+    }
+    /**
+     * Все вкладки живут в дереве постоянно; неактивные — hidden (root и стили
+     * доходят до них всегда). Раньше getChildren() отдавал только активную, и
+     * контент/actions, прицепленные до укоренения панели, оставались с
+     * протухшим root — модель бага #204 (селектор каналов Output молча не
+     * открывал выпадашку после restore сессии).
+     */
+    syncChildren() {
+        const children = [];
+        for (const view of this.views) {
+            const isActive = view.id === this.activeId;
+            if (view.actions != null) {
+                view.actions.hidden = !isActive;
+                children.push(view.actions);
+            }
+            if (view.content !== null) {
+                view.content.hidden = !isActive;
+                children.push(view.content);
+            }
+        }
+        this.setChildren(children);
+    }
+    getActiveViewId() {
+        return this.activeId;
+    }
+    getViewIds() {
+        return this.views.map((v) => v.id);
+    }
+    /**
+     * 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() {
+        const originX = this.globalPosition.x;
+        let x = TAB_INDENT;
+        const tabs = this.views.map((view) => {
+            const width = view.title.length + TAB_PAD * 2;
+            const start = x;
+            x += width;
+            return {
+                id: view.id,
+                title: view.title,
+                active: view.id === this.activeId,
+                x: originX + start,
+                width,
+                centerX: originX + start + Math.floor(width / 2),
+            };
+        });
+        return { activeId: this.activeId, tabRow: this.globalPosition.y + TAB_ROW, tabs };
+    }
+    /** Правая граница таб-строки — за неё контролы вкладки заезжать не должны. */
+    tabsEnd() {
+        return this.views.reduce((x, view) => x + view.title.length + TAB_PAD * 2, TAB_INDENT);
+    }
+    activeView() {
+        return this.views.find((v) => v.id === this.activeId);
+    }
+    /** Header tab layout: ` Title ` segments after the indent, with hit ranges. */
+    tabSegments() {
+        const segments = [];
+        let x = TAB_INDENT;
+        for (const view of this.views) {
+            const width = view.title.length + TAB_PAD * 2;
+            segments.push({ id: view.id, start: x, end: x + width });
+            x += width;
+        }
+        return segments;
+    }
+    performLayout(constraints) {
+        const containerSize = super.performLayout(constraints);
+        // Контролы вкладки прижаты вправо на строке табов — как в шапке Panel у
+        // VS Code. Ширину берём интринсиковую и не даём заехать на сами табы.
+        const actions = this.activeView()?.actions;
+        if (actions != null) {
+            const actionsWidth = Math.min(actions.getMaxIntrinsicWidth(1), containerSize.width);
+            const x = Math.max(this.tabsEnd(), containerSize.width - actionsWidth - TAB_INDENT);
+            this.layoutChild(actions, x, TAB_ROW, BoxConstraints.tight(new Size(Math.max(0, containerSize.width - x), 1)));
+        }
+        const content = this.activeView()?.content;
+        if (content != null) {
+            const contentWidth = Math.max(0, containerSize.width - CONTENT_LEFT);
+            const contentHeight = Math.max(0, containerSize.height - CONTENT_TOP);
+            this.layoutChild(content, CONTENT_LEFT, CONTENT_TOP, BoxConstraints.tight(new Size(contentWidth, contentHeight)));
+        }
+        return containerSize;
+    }
+    render(context) {
+        const { width, height } = this.layoutSize;
+        // Fill the panel with its background first.
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                context.setCell(x, y, { char: " ", bg: this.resolvedStyle.bg });
+            }
+        }
+        // Top border strip (row 0).
+        for (let x = 0; x < width; x++) {
+            context.setCell(x, 0, { char: "─", fg: this.styleVar("panel.border"), bg: this.resolvedStyle.bg });
+        }
+        // Tab header (dim). The active tab is underlined — but only under the title
+        // glyphs, leaving the surrounding padding un-underlined.
+        const segments = this.tabSegments();
+        for (let i = 0; i < this.views.length; i++) {
+            const view = this.views[i];
+            const segment = segments[i];
+            const isActive = view.id === this.activeId;
+            for (let x = segment.start; x < segment.end && x < width; x++) {
+                const textIndex = x - segment.start - TAB_PAD;
+                const isGlyph = textIndex >= 0 && textIndex < view.title.length;
+                const char = isGlyph ? view.title[textIndex] : " ";
+                const style = isActive && isGlyph ? StyleFlags.Underline : StyleFlags.None;
+                context.setCell(x, TAB_ROW, {
+                    char,
+                    fg: this.styleVar("panelTitle.inactiveForeground"),
+                    bg: this.resolvedStyle.bg,
+                    style,
+                });
+            }
+        }
+        // View-specific controls in the title row (drawn after the tabs so they win
+        // the shared row), then the active view's content below — renderChildren
+        // рисует только видимых детей, скрытые вкладки пропускаются базой.
+        this.renderChildren(context);
+        // Placeholder empty-state message, если у активной вкладки нет контента.
+        const active = this.activeView();
+        if (active?.content == null && active?.placeholder !== undefined && height > CONTENT_TOP) {
+            const message = active.placeholder;
+            for (let i = 0; i < message.length && i + CONTENT_LEFT < width; i++) {
+                context.setCell(i + CONTENT_LEFT, CONTENT_TOP, {
+                    char: message[i],
+                    fg: this.styleVar("panelTitle.inactiveForeground"),
+                    bg: this.resolvedStyle.bg,
+                });
+            }
+        }
+    }
+}

package/dist/quickpick/quickPickElement.d.ts

@@ -0,0 +1,161 @@
+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";
+import { InputElement } from "../inputbox/inputElement.js";
+export interface QuickPickItem {
+    /** Nerd font icon character (e.g. a file icon like "\uf15b"). */
+    icon?: string;
+    /** Main display text. */
+    label: string;
+    /** Right-side text: file path, category, etc. */
+    description?: string;
+    /** Keyboard shortcut shown right-aligned, e.g. "Ctrl+Shift+P". */
+    shortcut?: string;
+    /** Action hint shown after description, e.g. "Configure Binding". */
+    hint?: string;
+    /** Marker badge, e.g. "recently used". */
+    badge?: string;
+    /** Byte-offset ranges in `label` to highlight as fuzzy-match hits. */
+    labelMatchRanges?: readonly [number, number][];
+    /** Byte-offset ranges in `description` to highlight as fuzzy-match hits. */
+    descriptionMatchRanges?: readonly [number, number][];
+}
+/**
+ * Quick-open / command-palette style picker.
+ *
+ * Renders a bordered box with:
+ *   - top row: text input (query)
+ *   - optional separator + scrollable item list below
+ *
+ * The widget does NOT perform any filtering itself — pass pre-filtered
+ * `items` with `labelMatchRanges`/`descriptionMatchRanges` populated.
+ *
+ * Keyboard:
+ *   ArrowDown/Up   — move selection (no wrap)
+ *   Enter          — fire `onAccept(item, index)`
+ *   Escape         — fire `onCancel()`
+ *   All other keys — forwarded to the InputElement (typing)
+ *
+ * Usage:
+ *   const picker = new QuickPickElement();
+ *   picker.placeholder = "Go to file…";
+ *   picker.onQueryChange = query => { picker.items = search(query); };
+ *   picker.onAccept = (item) => openFile(item.description!);
+ */
+export type QuickPickAcceptMode = "item" | "value";
+export type ValidationSeverity = "error" | "warning" | "info";
+export declare class QuickPickElement extends TUIElement {
+    placeholder: string;
+    /** Maximum rows of the list to show at once (scrolls when exceeded). */
+    maxVisibleItems: number;
+    /** Optional title drawn centered into the top border (e.g. "Save As"). */
+    title: string | undefined;
+    /**
+     * Optional subtitle drawn on a dedicated row under the input (dim).
+     * Used by the InputBox flavor. Overridden by `validationMessage` when set.
+     */
+    prompt: string | undefined;
+    /** Validation/error text shown under the input; blocks Enter when severity is "error". */
+    validationMessage: string | null;
+    validationSeverity: ValidationSeverity;
+    /**
+     * How Enter is interpreted:
+     *   "item"  — fire onAccept(item, index), only when the list is non-empty (default; QuickOpen).
+     *   "value" — always fire onAcceptValue(getQuery()) — the InputBox flavor.
+     */
+    acceptMode: QuickPickAcceptMode;
+    /** Fired by Enter when acceptMode === "value". */
+    onAcceptValue: ((value: string) => void) | null;
+    /**
+     * Desired width of the picker in columns.
+     * When the element is laid out with loose constraints it will use this
+     * value (clamped to [minWidth, maxWidth]).
+     */
+    preferredWidth: number;
+    onQueryChange: ((query: string) => void) | null;
+    onAccept: ((item: QuickPickItem, index: number) => void) | null;
+    onCancel: (() => void) | null;
+    /**
+     * Fired when the highlighted (active) item changes via keyboard navigation —
+     * used for live preview (e.g. the color-theme picker applies the theme as you
+     * arrow through the list). NOT fired by `items =` / `refreshItems` /
+     * `setActiveIndex` (those are programmatic repositioning, not user intent).
+     */
+    onActiveItemChanged: ((item: QuickPickItem, index: number) => void) | null;
+    readonly inputElement: InputElement;
+    private itemsValue;
+    private selectedIndexValue;
+    private scrollOffset;
+    constructor();
+    protected performDefaultAction(event: TUIEventBase): void;
+    /** Follow the mouse: hovering a list row moves the selection onto it (VS Code behavior). */
+    private handleMouseMove;
+    /** Clicking a list row selects it and accepts it, mirroring Enter. */
+    private handleClick;
+    /**
+     * Maps a y offset local to this element onto an item index, or null when it
+     * falls outside the visible list rows (border, input, message, separator).
+     */
+    private itemIndexFromLocalY;
+    get items(): readonly QuickPickItem[];
+    /** Observable state: current query, item labels and the active index. */
+    inspectState(): Record<string, unknown>;
+    set items(value: readonly QuickPickItem[]);
+    /**
+     * Replace the items WITHOUT jumping the cursor back to the top.
+     *
+     * Use this when the list is refreshed for the *same* query (e.g. the file
+     * index grew in the background and produced more results) — resetting the
+     * selection there would yank the cursor away from the user mid-navigation.
+     *
+     * The previously selected item is re-located by identity (label +
+     * description, which uniquely identifies a file row). If it is gone, the
+     * previous index is clamped into the new bounds. The selected row is kept
+     * on-screen.
+     */
+    refreshItems(value: readonly QuickPickItem[]): void;
+    get selectedIndex(): number;
+    getQuery(): string;
+    setQuery(value: string): void;
+    /** Delegate focus to the inner InputElement. */
+    focus(): void;
+    private get visibleItemCount();
+    /**
+     * Сколько строк списка реально помещается в выделенную layout'ом высоту.
+     * Разрыв цикличности с {@link totalHeight}: natural-высота считается ДО
+     * layout (интринсики, visibleItemCount), фактическое окно — ПОСЛЕ, от
+     * layoutSize. На низком терминале (loose от overlay с маленьким остатком)
+     * окно меньше natural — рендер, хит-тест и скролл живут по нему.
+     */
+    private get effectiveVisibleRows();
+    /**
+     * Строка сепаратора/нижней рамки сразу под «шапкой» (верхняя рамка + input +
+     * [message]) — она же счётчик занятых шапкой строк.
+     */
+    private get bodyTop();
+    /**
+     * The message row shown under the input (InputBox flavor). A validation
+     * message wins over the plain prompt; returns null when neither is set.
+     */
+    private get messageRow();
+    private get totalHeight();
+    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;
+    /** Draws the title centered into the top border row as ┤ title ├. */
+    private renderTitle;
+    /** Draws the prompt / validation message row under the input. */
+    private renderMessageRow;
+    private renderItemRow;
+    private moveSelection;
+    /**
+     * Move the highlight to `index` programmatically (e.g. pre-select the current
+     * theme when the picker opens). Clamped into range; keeps the row on-screen.
+     * Does NOT fire {@link onActiveItemChanged} — this is not a user navigation.
+     */
+    setActiveIndex(index: number): void;
+    private ensureVisible;
+}