@haiyue/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HaiyueStudio Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# @haiyue/ui
+
+Dependency-free Web Components used by HaiyueStudio tools and products.
+
+```bash
+npm install @haiyue/ui
+```
+
+The package owns presentation and local interaction only. It does not depend on Engine, Editor, or AIStudio.

package/dist/checkbox.d.ts

@@ -0,0 +1,30 @@
+export interface GECheckboxChangeDetail {
+    checked: boolean;
+    value: string;
+}
+export declare class GECheckbox extends HTMLElement {
+    private readonly _input;
+    private readonly _box;
+    private readonly _label;
+    private readonly _slot;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get value(): string;
+    set value(value: string);
+    get name(): string;
+    set name(value: string);
+    private _sync;
+    private _onChange;
+}
+export declare function defineCheckboxComponents(): void;

package/dist/checkbox.js

@@ -0,0 +1,204 @@
+export class GECheckbox extends HTMLElement {
+    _input = document.createElement('input');
+    _box = document.createElement('span');
+    _label = document.createElement('span');
+    _slot = document.createElement('slot');
+    static get observedAttributes() {
+        return ['checked', 'disabled', 'indeterminate', 'label', 'value', 'name', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: inline-block;
+        width: max-content;
+        min-width: 0;
+        color: var(--ge-checkbox-text-color, var(--ge-text-color, #d8e2f2));
+        font: 12px system-ui, sans-serif;
+      }
+      :host([disabled]) {
+        opacity: 0.55;
+        cursor: default;
+      }
+      label {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+        cursor: pointer;
+        user-select: none;
+      }
+      :host([disabled]) label {
+        cursor: default;
+      }
+      input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+        border: 0;
+      }
+      .box {
+        box-sizing: border-box;
+        width: 14px;
+        height: 14px;
+        flex: 0 0 14px;
+        display: inline-grid;
+        place-items: center;
+        border: 1px solid var(--ge-checkbox-border-color, var(--ge-border-color, #303746));
+        border-radius: 3px;
+        background: var(--ge-checkbox-bg-color, var(--ge-input-bg-color, #121822));
+        color: var(--ge-checkbox-mark-color, var(--ge-selected-text-color, #ffffff));
+        transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+      }
+      input:focus-visible + .box {
+        border-color: var(--ge-focus-border-color, #3d6fa8);
+        box-shadow: 0 0 0 2px var(--ge-focus-ring-color, rgba(61, 111, 168, 0.28));
+      }
+      input:checked + .box,
+      input:indeterminate + .box {
+        border-color: var(--ge-checkbox-checked-border-color, var(--ge-accent-color, #3d6fa8));
+        background: var(--ge-checkbox-checked-bg-color, var(--ge-accent-strong-color, #255a91));
+      }
+      input:disabled + .box {
+        cursor: default;
+      }
+      .box::after {
+        content: "";
+        width: 7px;
+        height: 4px;
+        border: solid currentColor;
+        border-width: 0 0 2px 2px;
+        transform: rotate(-45deg) scale(0);
+        transform-origin: center;
+        transition: transform 0.12s ease;
+      }
+      input:checked + .box::after {
+        transform: rotate(-45deg) scale(1);
+      }
+      input:indeterminate + .box::after {
+        width: 7px;
+        height: 0;
+        border-width: 0 0 2px;
+        transform: rotate(0deg) scale(1);
+      }
+      .label {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `;
+        const label = document.createElement('label');
+        this._input.type = 'checkbox';
+        this._box.className = 'box';
+        this._box.setAttribute('aria-hidden', 'true');
+        this._label.className = 'label';
+        this._label.append(this._slot);
+        label.append(this._input, this._box, this._label);
+        root.append(style, label);
+    }
+    connectedCallback() {
+        this._input.addEventListener('change', this._onChange);
+        this._sync();
+    }
+    disconnectedCallback() {
+        this._input.removeEventListener('change', this._onChange);
+    }
+    attributeChangedCallback() {
+        this._sync();
+    }
+    get checked() {
+        return this.hasAttribute('checked');
+    }
+    set checked(value) {
+        if (value)
+            this.setAttribute('checked', '');
+        else
+            this.removeAttribute('checked');
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        if (value)
+            this.setAttribute('disabled', '');
+        else
+            this.removeAttribute('disabled');
+    }
+    get indeterminate() {
+        return this.hasAttribute('indeterminate');
+    }
+    set indeterminate(value) {
+        if (value)
+            this.setAttribute('indeterminate', '');
+        else
+            this.removeAttribute('indeterminate');
+    }
+    get label() {
+        return this.getAttribute('label') ?? '';
+    }
+    set label(value) {
+        if (value)
+            this.setAttribute('label', value);
+        else
+            this.removeAttribute('label');
+    }
+    get value() {
+        return this.getAttribute('value') ?? 'on';
+    }
+    set value(value) {
+        this.setAttribute('value', value);
+    }
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(value) {
+        if (value)
+            this.setAttribute('name', value);
+        else
+            this.removeAttribute('name');
+    }
+    _sync() {
+        this._input.checked = this.checked;
+        this._input.disabled = this.disabled;
+        this._input.indeterminate = this.indeterminate;
+        this._input.value = this.value;
+        this._input.name = this.name;
+        const label = this.getAttribute('label');
+        if (label !== null)
+            this._slot.textContent = label;
+        else if (this._slot.textContent !== '')
+            this._slot.textContent = '';
+        const ariaLabel = this.getAttribute('aria-label') ?? label ?? '';
+        if (ariaLabel)
+            this._input.setAttribute('aria-label', ariaLabel);
+        else
+            this._input.removeAttribute('aria-label');
+    }
+    _onChange = () => {
+        if (this._input.checked)
+            this.setAttribute('checked', '');
+        else
+            this.removeAttribute('checked');
+        this.removeAttribute('indeterminate');
+        this.dispatchEvent(new CustomEvent('checked-change', {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    };
+}
+export function defineCheckboxComponents() {
+    if (!customElements.get('ge-checkbox')) {
+        customElements.define('ge-checkbox', GECheckbox);
+    }
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/context-menu.d.ts

@@ -0,0 +1,41 @@
+export interface GEContextMenuItem {
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    separator?: boolean;
+}
+export interface GEContextMenuSelectDetail {
+    value: string;
+    item: GEContextMenuItem;
+}
+export declare class GEContextMenu extends HTMLElement {
+    private readonly _root;
+    private readonly _style;
+    private readonly _menu;
+    private _items;
+    private _documentListenerAbort;
+    private _activeIndex;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get items(): GEContextMenuItem[];
+    set items(value: GEContextMenuItem[]);
+    openAt(x: number, y: number): void;
+    close(): void;
+    private _syncDocumentListeners;
+    private _attachDocumentListeners;
+    private _detachDocumentListeners;
+    private _readItemsAttribute;
+    private _render;
+    private _onDocumentPointerDown;
+    private _onDocumentKeyDown;
+    private _selectIndex;
+    private _setActiveIndex;
+    private _nextEnabledIndex;
+    private _firstEnabledIndex;
+    private _lastEnabledIndex;
+    private _isEnabledItem;
+}
+export declare function defineContextMenuComponents(): void;

package/dist/context-menu.js

@@ -0,0 +1,225 @@
+import { GE_MENU_ITEM_STYLES, createMenuItemButton, createMenuSeparator } from './menu-shared.js';
+export class GEContextMenu extends HTMLElement {
+    _root;
+    _style = document.createElement('style');
+    _menu = document.createElement('div');
+    _items = [];
+    _documentListenerAbort = null;
+    _activeIndex = -1;
+    static get observedAttributes() {
+        return ['items', 'open'];
+    }
+    constructor() {
+        super();
+        this._root = this.attachShadow({ mode: 'open' });
+        this._style.textContent = `
+      :host {
+        position: fixed;
+        z-index: 10000;
+        display: none;
+        min-width: 132px;
+        color: var(--ge-text-color, #d8e2f2);
+        font: 12px system-ui, sans-serif;
+      }
+      :host([open]) {
+        display: block;
+      }
+      .menu {
+        box-sizing: border-box;
+        min-width: 132px;
+        padding: 4px;
+        border: 1px solid var(--ge-border-color, #303746);
+        border-radius: 4px;
+        background: var(--ge-menu-bg-color, var(--ge-surface-elevated-color, #1b2230));
+        box-shadow: 0 10px 26px var(--ge-menu-shadow-color, rgba(0, 0, 0, 0.36));
+      }
+${GE_MENU_ITEM_STYLES}
+    `;
+        this._menu.className = 'menu';
+        this._menu.setAttribute('role', 'menu');
+        this._root.append(this._style, this._menu);
+    }
+    connectedCallback() {
+        this._readItemsAttribute();
+        this._render();
+        this._syncDocumentListeners();
+    }
+    disconnectedCallback() {
+        this._detachDocumentListeners();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'items') {
+            this._readItemsAttribute();
+            this._render();
+        }
+        if (name === 'open')
+            this._syncDocumentListeners();
+    }
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = Array.isArray(value) ? value : [];
+        this._render();
+    }
+    openAt(x, y) {
+        this.setAttribute('open', '');
+        this.style.left = '0px';
+        this.style.top = '0px';
+        const rect = this._menu.getBoundingClientRect();
+        const viewport = getVisualViewportRect();
+        const left = Math.min(x, viewport.left + viewport.width - rect.width - 4);
+        const top = Math.min(y, viewport.top + viewport.height - rect.height - 4);
+        this.style.left = `${Math.max(viewport.left + 4, left)}px`;
+        this.style.top = `${Math.max(viewport.top + 4, top)}px`;
+        this._setActiveIndex(this._firstEnabledIndex(), false);
+    }
+    close() {
+        this.removeAttribute('open');
+        this._setActiveIndex(-1, false);
+    }
+    _syncDocumentListeners() {
+        if (this.hasAttribute('open') && this.isConnected)
+            this._attachDocumentListeners();
+        else
+            this._detachDocumentListeners();
+    }
+    _attachDocumentListeners() {
+        if (this._documentListenerAbort)
+            return;
+        this._documentListenerAbort = new AbortController();
+        const { signal } = this._documentListenerAbort;
+        document.addEventListener('pointerdown', this._onDocumentPointerDown, { capture: true, signal });
+        document.addEventListener('keydown', this._onDocumentKeyDown, { capture: true, signal });
+    }
+    _detachDocumentListeners() {
+        this._documentListenerAbort?.abort();
+        this._documentListenerAbort = null;
+    }
+    _readItemsAttribute() {
+        const raw = this.getAttribute('items');
+        if (!raw) {
+            this._items = [];
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            this._items = Array.isArray(parsed) ? parsed : [];
+        }
+        catch (error) {
+            console.warn('Invalid ge-context-menu items attribute.', error);
+        }
+    }
+    _render() {
+        this._menu.replaceChildren();
+        this._activeIndex = -1;
+        for (const [index, item] of this._items.entries()) {
+            if (item.separator) {
+                this._menu.append(createMenuSeparator());
+                continue;
+            }
+            const button = createMenuItemButton(item, { index, role: 'menuitem', tabIndex: -1 });
+            button.addEventListener('click', () => {
+                this._selectIndex(index);
+            });
+            this._menu.append(button);
+        }
+    }
+    _onDocumentPointerDown = (event) => {
+        if (!this.hasAttribute('open'))
+            return;
+        const path = event.composedPath();
+        if (!path.includes(this))
+            this.close();
+    };
+    _onDocumentKeyDown = (event) => {
+        if (!this.hasAttribute('open'))
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this._setActiveIndex(this._nextEnabledIndex(1), true);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this._setActiveIndex(this._nextEnabledIndex(-1), true);
+            return;
+        }
+        if (event.key === 'Home') {
+            event.preventDefault();
+            this._setActiveIndex(this._firstEnabledIndex(), true);
+            return;
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            this._setActiveIndex(this._lastEnabledIndex(), true);
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this._selectIndex(this._activeIndex);
+        }
+    };
+    _selectIndex(index) {
+        const item = this._items[index];
+        if (!item || item.disabled || item.separator || !item.value)
+            return;
+        this.dispatchEvent(new CustomEvent('item-select', {
+            detail: { value: item.value, item },
+            bubbles: true,
+            composed: true,
+        }));
+        this.close();
+    }
+    _setActiveIndex(index, focus) {
+        this._activeIndex = index;
+        for (const button of this._menu.querySelectorAll('button')) {
+            const active = Number(button.dataset.index) === index;
+            button.classList.toggle('active', active);
+            if (active && focus)
+                button.focus();
+        }
+    }
+    _nextEnabledIndex(direction) {
+        if (!this._items.length)
+            return -1;
+        const start = this._activeIndex >= 0 ? this._activeIndex : direction > 0 ? -1 : this._items.length;
+        for (let step = 1; step <= this._items.length; step++) {
+            const index = (start + direction * step + this._items.length) % this._items.length;
+            if (this._isEnabledItem(index))
+                return index;
+        }
+        return -1;
+    }
+    _firstEnabledIndex() {
+        return this._items.findIndex((_, index) => this._isEnabledItem(index));
+    }
+    _lastEnabledIndex() {
+        for (let index = this._items.length - 1; index >= 0; index--) {
+            if (this._isEnabledItem(index))
+                return index;
+        }
+        return -1;
+    }
+    _isEnabledItem(index) {
+        const item = this._items[index];
+        return Boolean(item && !item.separator && !item.disabled && item.value);
+    }
+}
+function getVisualViewportRect() {
+    const viewport = window.visualViewport;
+    return viewport
+        ? { left: viewport.offsetLeft, top: viewport.offsetTop, width: viewport.width, height: viewport.height }
+        : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
+}
+export function defineContextMenuComponents() {
+    if (!customElements.get('ge-context-menu')) {
+        customElements.define('ge-context-menu', GEContextMenu);
+    }
+}
+//# sourceMappingURL=context-menu.js.map

package/dist/dialog.d.ts

@@ -0,0 +1,30 @@
+export type GEDialogCloseReason = 'action' | 'backdrop' | 'escape' | 'programmatic';
+export interface GEDialogCloseDetail {
+    readonly reason: GEDialogCloseReason | string;
+}
+/** Accessible modal surface with slotted body/footer content and reflected open state. */
+export declare class GEDialog extends HTMLElement {
+    private readonly _dialog;
+    private readonly _title;
+    private readonly _closeButton;
+    private _returnFocus;
+    private _closeReason;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get open(): boolean;
+    set open(value: boolean);
+    get dismissible(): boolean;
+    set dismissible(value: boolean);
+    get heading(): string;
+    set heading(value: string);
+    showModal(): void;
+    close(reason?: GEDialogCloseDetail['reason']): void;
+    private _syncHeading;
+    private _syncOpen;
+    private _onCancel;
+    private _onDialogClick;
+    private _onNativeClose;
+}
+export declare function defineDialogComponents(): void;