Add Menu, MenuBar, MenuItem, and TagInput framework components

New components:
- Menu/MenuBar/MenuItem: popover-based menu system replacing Dropdown
  for action menus (used in ScoreLibrary)
- TagInput: inline tag rendering with text input and autocomplete
  (completions filtered by owner-supplied list)

Fixes:
- Input: default padding 3px so caret doesn't sit at the edge
- ScoreLibrary: use closure-captured data in menu handlers instead
  of shared instance state (fixed "Import Score" and new folder menus)
- Add Folder dialog: use placeholder instead of pre-filled content
- Menu: render popover container always (native popover API needs it
  in DOM), guard hidePopover for jsdom

Tests: 27 new unit tests (MenuItem, Menu, MenuBar, TagInput)
Signed-off-by: Mike Lischke <mike@lischke-online.de>

Author: mike-lischke

src/App.tsx

@@ -633,9 +633,10 @@ export class App extends UIComponent<{}, IAppState> {
                         {
                             type: ValueEditorEntryType.Value,
                             id: "folderName",
-                            content: "Name of the new folder",
+                            content: "",
+                            placeholder: "Name of the new folder",
                             displayWidth: 6,
-                        }],
+                        } as IValueEditorValueEntry],
                     );
 
                     if (result?.closure !== DialogResponseClosure.Accept) {

src/components/ui/framework/Button.tsx

@@ -53,6 +53,7 @@ export class Button extends UIComponent<IButtonProperties> {
             id, children, caption, style, orientation, round, imageOnly, disabled, isDefault, title, role,
             name, value, popoverTarget, onClick
         } = this.props;
+
         const className = this.generateFinalClassName([
             "btn",
             "du-btn",

src/components/ui/framework/Input.tsx

@@ -72,6 +72,7 @@ export class Input extends UIComponent<IInputProperties> {
         const className = this.generateFinalClassName(["input"]);
 
         const newStyle = {
+            padding: "3px",
             ...style,
             textAlign: textAlignment,
         };

src/components/ui/framework/Menu/Menu.css

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) Mike Lischke. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+.menuItem {
+    display: flex;
+    align-items: center;
+
+    padding: 6px 12px;
+    gap: 8px;
+
+    cursor: default;
+    user-select: none;
+
+    border: 1px solid transparent;
+    border-radius: 4px;
+
+    white-space: nowrap;
+}
+
+.menuItem .icon {
+    width: 16px;
+    height: 16px;
+}
+
+.menuItem:not(.disabled):hover {
+    background-color: var(--color-base-200);
+}
+
+.menuItem.disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+
+.menuItem.separator {
+    height: 1px;
+    margin: 4px 0;
+    padding: 0;
+
+    background-color: var(--color-base-300);
+    border: none;
+}
+
+.menuBar {
+    display: flex;
+    align-items: center;
+    gap: 0;
+}

src/components/ui/framework/Menu/Menu.tsx

@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) Mike Lischke. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import "./Menu.css";
+
+import { ComponentChild } from "preact";
+
+import { Button } from "../Button.js";
+import { Icon } from "../Icon.js";
+import { UIComponent, type ICommonUIProperties } from "../UIComponent.js";
+import { getNewId } from "../../../../core/utils.js";
+import { Codicon } from "../Codicon.js";
+import { type IMenuItem, MenuItem } from "./MenuItem.js";
+
+interface IMenuProperties extends ICommonUIProperties {
+    /** The menu items (including separators). */
+    items: IMenuItem[];
+
+    /** Shown as the trigger button caption when used standalone. */
+    caption?: string;
+
+    /** Shown as the trigger button icon when used standalone. */
+    icon?: Codicon;
+
+    /** Called when an item is clicked. The item id is passed. */
+    onItemClick?: (id: string) => void;
+}
+
+interface IMenuState {
+    open: boolean;
+}
+
+/**
+ * A vertical popup menu. Uses the native popover API for positioning.
+ *
+ * Can be used standalone (renders a trigger button) or embedded
+ * in a MenuBar (the MenuBar controls open/close via ref).
+ */
+export class Menu extends UIComponent<IMenuProperties, IMenuState> {
+    private popoverId = `menu-popover-${getNewId()}`;
+    private anchorName = `--menu-anchor-${getNewId()}`;
+
+    public constructor(props: IMenuProperties) {
+        super(props);
+
+        this.state = {
+            open: false,
+        };
+    }
+
+    public render(): ComponentChild {
+        const { id, caption, icon, items, style } = this.props;
+        const triggerShown = (caption ?? icon) !== undefined;
+        const className = this.generateFinalClassName(["menuHost"]);
+
+        return (
+            <div id={id} className={className} style={style}>
+                {triggerShown && (
+                    <div style={{ anchorName: this.anchorName }}>
+                        <Button
+                            className="du-btn-ghost"
+                            popoverTarget={this.popoverId}
+                            imageOnly={!caption && icon !== undefined}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
+                        >
+                            {icon && <Icon src={icon} />}
+                            {caption}
+                        </Button>
+                    </div>
+                )}
+
+                <div
+                    className="menu du-dropdown du-menu rounded-box bg-base-100 shadow-sm"
+                    id={this.popoverId}
+                    popover="auto"
+                    style={{ positionAnchor: this.anchorName }}
+                    onKeyDown={this.handleKeyDown}
+                    onToggle={this.handlePopoverToggle}
+                >
+                    {items.map((item) => {
+                        return (
+                            <div
+                                key={item.id}
+                                onClick={() => {
+                                    if (!item.disabled && item.label !== "-") {
+                                        this.props.onItemClick?.(item.id);
+                                        this.close();
+                                    }
+                                }}
+                            >
+                                <MenuItem item={item} />
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    public open(): void {
+        this.setState({ open: true });
+    }
+
+    public close(): void {
+        const popover = document.getElementById(this.popoverId);
+
+        if (popover && typeof (popover as HTMLElement & { hidePopover?: () => void; }).hidePopover === "function") {
+            (popover as HTMLElement & { hidePopover: () => void; }).hidePopover();
+        }
+
+        this.setState({ open: false });
+    }
+
+    private handleKeyDown = (e: KeyboardEvent): void => {
+        if (e.key === "Escape") {
+            this.close();
+        }
+    };
+
+    private handlePopoverToggle = (e: Event): void => {
+        const popover = e.target as HTMLElement;
+
+        this.setState({ open: popover.matches(":popover-open") });
+    };
+}

src/components/ui/framework/Menu/MenuBar.tsx

@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) Mike Lischke. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ComponentChild, createRef } from "preact";
+
+import { Button } from "../Button.js";
+import { Icon } from "../Icon.js";
+import { UIComponent, type ICommonUIProperties } from "../UIComponent.js";
+import { type IMenuItem } from "./MenuItem.js";
+import { Menu } from "./Menu.js";
+
+interface IMenuBarItem extends IMenuItem {
+    /** The nested menu items shown when this top-level item is clicked. */
+    children?: IMenuItem[];
+}
+
+interface IMenuBarProperties extends ICommonUIProperties {
+    items: IMenuBarItem[];
+
+    /** Called when a menu item is clicked (any level). */
+    onItemClick?: (id: string) => void;
+}
+
+interface IMenuBarState {
+    openMenuId: string;
+}
+
+/**
+ * A horizontal bar of top-level items that each open a dropdown Menu.
+ */
+export class MenuBar extends UIComponent<IMenuBarProperties, IMenuBarState> {
+    private menuRefs = new Map<string, preact.RefObject<Menu>>();
+
+    public constructor(props: IMenuBarProperties) {
+        super(props);
+
+        this.state = {
+            openMenuId: "",
+        };
+    }
+
+    public render(): ComponentChild {
+        const { id, items, style } = this.props;
+        const { openMenuId } = this.state;
+        const className = this.generateFinalClassName(["menuBar"]);
+
+        return (
+            <div
+                id={id}
+                className={className}
+                style={{ ...style, display: "flex", alignItems: "center" }}
+                onMouseLeave={() => {
+                    this.setState({ openMenuId: "" });
+                }}
+            >
+                {items.map((item) => {
+                    const refKey = item.id;
+                    let menuRef = this.menuRefs.get(refKey);
+
+                    if (!menuRef) {
+                        menuRef = createRef<Menu>();
+                        this.menuRefs.set(refKey, menuRef);
+                    }
+
+                    const isOpen = openMenuId === item.id;
+
+                    return (
+                        <div
+                            key={item.id}
+                            onMouseEnter={() => {
+                                if (openMenuId !== "") {
+                                    this.setState({ openMenuId: item.id });
+                                }
+                            }}
+                        >
+                            <Button
+                                imageOnly={!item.label && item.icon !== undefined}
+                                onClick={() => {
+                                    if (item.children) {
+                                        this.setState({
+                                            openMenuId: isOpen ? "" : item.id,
+                                        }, () => {
+                                            if (!isOpen) {
+                                                menuRef.current?.open();
+                                            }
+                                        });
+                                    }
+
+                                    this.props.onItemClick?.(item.id);
+                                }}
+                            >
+                                {item.icon && <Icon src={item.icon} />}
+                                {item.label}
+                            </Button>
+                            {item.children && (
+                                <Menu
+                                    ref={menuRef}
+                                    items={item.children}
+                                    onItemClick={(childId) => {
+                                        this.setState({ openMenuId: "" });
+                                        this.props.onItemClick?.(childId);
+                                    }}
+                                />
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+}

src/components/ui/framework/Menu/MenuItem.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) Mike Lischke. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ComponentChild } from "preact";
+
+import { Icon } from "../Icon.js";
+import { UIComponent, type ICommonUIProperties } from "../UIComponent.js";
+import { Codicon } from "../Codicon.js";
+
+export interface IMenuItem {
+    id: string;
+    label: string;
+    icon?: Codicon;
+
+    /** If true, shows a right-pointing arrow indicating a submenu. */
+    hasSubMenu?: boolean;
+
+    /** Use "-" as label for a separator line. */
+    disabled?: boolean;
+}
+
+interface IMenuItemViewProperties extends ICommonUIProperties {
+    item: IMenuItem;
+}
+
+/**
+ * Renders a single menu item: label, optional icon, optional submenu arrow.
+ * Set `item.label = "-"` and `item.disabled` for a separator.
+ */
+export class MenuItem extends UIComponent<IMenuItemViewProperties> {
+
+    public render(): ComponentChild {
+        const { id, item, style } = this.props;
+        const { label, icon, hasSubMenu, disabled } = item;
+        const isSeparator = label === "-";
+        const className = this.generateFinalClassName([
+            "menuItem",
+            this.classFromProperty(disabled ?? isSeparator, "disabled"),
+            this.classFromProperty(hasSubMenu ?? false, "submenu"),
+            isSeparator ? "separator" : "",
+        ]);
+
+        if (isSeparator) {
+            return (
+                <div id={id} className={className} style={style} />
+            );
+        }
+
+        return (
+            <div id={id} className={className} style={style}>
+                {icon && <Icon src={icon} />}
+                <span>{label}</span>
+                {hasSubMenu && (
+                    <Icon src={Codicon.ChevronRight} style={{ marginLeft: "auto", fontSize: "12px" }} />
+                )}
+            </div>
+        );
+    }
+}