@haiyue/ui 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@haiyue/ui",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Dependency-free Web Components for HaiyueStudio tools and products.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HaiyueStudio/UI.git",
+    "directory": "ui"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  },
+  "files": [
+    "README.md",
+    "LICENSE",
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "src/**/*"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "npm run build && node --test \"test/**/*.test.mjs\""
+  },
+  "devDependencies": {
+    "typescript": "^5.2.0"
+  }
+}

package/src/checkbox.ts

@@ -0,0 +1,215 @@
+export interface GECheckboxChangeDetail {
+  checked: boolean;
+  value: string;
+}
+
+export class GECheckbox extends HTMLElement {
+  private readonly _input = document.createElement('input');
+  private readonly _box = document.createElement('span');
+  private readonly _label = document.createElement('span');
+  private readonly _slot = document.createElement('slot');
+
+  static get observedAttributes(): string[] {
+    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(): void {
+    this._input.addEventListener('change', this._onChange);
+    this._sync();
+  }
+
+  disconnectedCallback(): void {
+    this._input.removeEventListener('change', this._onChange);
+  }
+
+  attributeChangedCallback(): void {
+    this._sync();
+  }
+
+  get checked(): boolean {
+    return this.hasAttribute('checked');
+  }
+
+  set checked(value: boolean) {
+    if (value) this.setAttribute('checked', '');
+    else this.removeAttribute('checked');
+  }
+
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(value: boolean) {
+    if (value) this.setAttribute('disabled', '');
+    else this.removeAttribute('disabled');
+  }
+
+  get indeterminate(): boolean {
+    return this.hasAttribute('indeterminate');
+  }
+
+  set indeterminate(value: boolean) {
+    if (value) this.setAttribute('indeterminate', '');
+    else this.removeAttribute('indeterminate');
+  }
+
+  get label(): string {
+    return this.getAttribute('label') ?? '';
+  }
+
+  set label(value: string) {
+    if (value) this.setAttribute('label', value);
+    else this.removeAttribute('label');
+  }
+
+  get value(): string {
+    return this.getAttribute('value') ?? 'on';
+  }
+
+  set value(value: string) {
+    this.setAttribute('value', value);
+  }
+
+  get name(): string {
+    return this.getAttribute('name') ?? '';
+  }
+
+  set name(value: string) {
+    if (value) this.setAttribute('name', value);
+    else this.removeAttribute('name');
+  }
+
+  private _sync(): void {
+    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');
+  }
+
+  private _onChange = (): void => {
+    if (this._input.checked) this.setAttribute('checked', '');
+    else this.removeAttribute('checked');
+    this.removeAttribute('indeterminate');
+    this.dispatchEvent(new CustomEvent<GECheckboxChangeDetail>('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(): void {
+  if (!customElements.get('ge-checkbox')) {
+    customElements.define('ge-checkbox', GECheckbox);
+  }
+}

package/src/context-menu.ts

@@ -0,0 +1,248 @@
+import { GE_MENU_ITEM_STYLES, createMenuItemButton, createMenuSeparator } from './menu-shared.js';
+
+export interface GEContextMenuItem {
+  label?: string;
+  value?: string;
+  disabled?: boolean;
+  separator?: boolean;
+}
+
+export interface GEContextMenuSelectDetail {
+  value: string;
+  item: GEContextMenuItem;
+}
+
+export class GEContextMenu extends HTMLElement {
+  private readonly _root: ShadowRoot;
+  private readonly _style = document.createElement('style');
+  private readonly _menu = document.createElement('div');
+  private _items: GEContextMenuItem[] = [];
+  private _documentListenerAbort: AbortController | null = null;
+  private _activeIndex = -1;
+
+  static get observedAttributes(): string[] {
+    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(): void {
+    this._readItemsAttribute();
+    this._render();
+    this._syncDocumentListeners();
+  }
+
+  disconnectedCallback(): void {
+    this._detachDocumentListeners();
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (name === 'items') {
+      this._readItemsAttribute();
+      this._render();
+    }
+    if (name === 'open') this._syncDocumentListeners();
+  }
+
+  get items(): GEContextMenuItem[] {
+    return this._items;
+  }
+
+  set items(value: GEContextMenuItem[]) {
+    this._items = Array.isArray(value) ? value : [];
+    this._render();
+  }
+
+  openAt(x: number, y: number): void {
+    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(): void {
+    this.removeAttribute('open');
+    this._setActiveIndex(-1, false);
+  }
+
+  private _syncDocumentListeners(): void {
+    if (this.hasAttribute('open') && this.isConnected) this._attachDocumentListeners();
+    else this._detachDocumentListeners();
+  }
+
+  private _attachDocumentListeners(): void {
+    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 });
+  }
+
+  private _detachDocumentListeners(): void {
+    this._documentListenerAbort?.abort();
+    this._documentListenerAbort = null;
+  }
+
+  private _readItemsAttribute(): void {
+    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);
+    }
+  }
+
+  private _render(): void {
+    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);
+    }
+  }
+
+  private _onDocumentPointerDown = (event: PointerEvent): void => {
+    if (!this.hasAttribute('open')) return;
+    const path = event.composedPath();
+    if (!path.includes(this)) this.close();
+  };
+
+  private _onDocumentKeyDown = (event: KeyboardEvent): void => {
+    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);
+    }
+  };
+
+  private _selectIndex(index: number): void {
+    const item = this._items[index];
+    if (!item || item.disabled || item.separator || !item.value) return;
+    this.dispatchEvent(new CustomEvent<GEContextMenuSelectDetail>('item-select', {
+      detail: { value: item.value, item },
+      bubbles: true,
+      composed: true,
+    }));
+    this.close();
+  }
+
+  private _setActiveIndex(index: number, focus: boolean): void {
+    this._activeIndex = index;
+    for (const button of this._menu.querySelectorAll<HTMLButtonElement>('button')) {
+      const active = Number(button.dataset.index) === index;
+      button.classList.toggle('active', active);
+      if (active && focus) button.focus();
+    }
+  }
+
+  private _nextEnabledIndex(direction: 1 | -1): number {
+    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;
+  }
+
+  private _firstEnabledIndex(): number {
+    return this._items.findIndex((_, index) => this._isEnabledItem(index));
+  }
+
+  private _lastEnabledIndex(): number {
+    for (let index = this._items.length - 1; index >= 0; index--) {
+      if (this._isEnabledItem(index)) return index;
+    }
+    return -1;
+  }
+
+  private _isEnabledItem(index: number): boolean {
+    const item = this._items[index];
+    return Boolean(item && !item.separator && !item.disabled && item.value);
+  }
+}
+
+function getVisualViewportRect(): { left: number; top: number; width: number; height: number } {
+  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(): void {
+  if (!customElements.get('ge-context-menu')) {
+    customElements.define('ge-context-menu', GEContextMenu);
+  }
+}

package/src/dialog.ts

@@ -0,0 +1,195 @@
+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 class GEDialog extends HTMLElement {
+  private readonly _dialog = document.createElement('dialog');
+  private readonly _title = document.createElement('h2');
+  private readonly _closeButton = document.createElement('button');
+  private _returnFocus: HTMLElement | null = null;
+  private _closeReason: GEDialogCloseDetail['reason'] = 'programmatic';
+
+  static get observedAttributes(): string[] {
+    return ['open', 'heading', 'dismissible'];
+  }
+
+  constructor() {
+    super();
+    const root = this.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        color: var(--ge-text-color, #e6edf7);
+        font: 13px system-ui, sans-serif;
+      }
+      dialog {
+        width: min(var(--ge-dialog-width, 460px), calc(100vw - 32px));
+        max-height: calc(100vh - 32px);
+        margin: auto;
+        padding: 0;
+        overflow: hidden;
+        border: 1px solid var(--ge-border-color, #303746);
+        border-radius: var(--ge-dialog-radius, 8px);
+        color: inherit;
+        background: var(--ge-dialog-bg-color, var(--ge-surface-elevated-color, #171e2a));
+        box-shadow: 0 22px 70px var(--ge-dialog-shadow-color, rgba(0, 0, 0, 0.52));
+      }
+      dialog::backdrop {
+        background: var(--ge-dialog-backdrop-color, rgba(3, 7, 12, 0.66));
+        backdrop-filter: blur(var(--ge-dialog-backdrop-blur, 2px));
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        min-height: 49px;
+        padding: 0 12px 0 16px;
+        border-bottom: 1px solid var(--ge-border-color, #303746);
+      }
+      h2 {
+        flex: 1;
+        min-width: 0;
+        margin: 0;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 650;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .close {
+        display: none;
+        width: 28px;
+        height: 28px;
+        border: 0;
+        border-radius: 5px;
+        color: var(--ge-secondary-text-color, #8b99ad);
+        background: transparent;
+        cursor: pointer;
+        font: 20px/1 system-ui, sans-serif;
+      }
+      :host([dismissible]) .close { display: grid; place-items: center; }
+      .close:hover { color: inherit; background: var(--ge-hover-bg-color, #242d3b); }
+      .body {
+        max-height: calc(100vh - 160px);
+        overflow: auto;
+        padding: var(--ge-dialog-body-padding, 16px);
+        color: var(--ge-dialog-body-color, var(--ge-secondary-text-color, #a8b4c5));
+        line-height: 1.55;
+      }
+      .footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        min-height: 54px;
+        padding: 10px 14px;
+        border-top: 1px solid var(--ge-border-color, #303746);
+        background: var(--ge-dialog-footer-bg-color, rgba(9, 13, 19, 0.22));
+      }
+      slot[name="footer"]::slotted(*) { margin: 0; }
+    `;
+    const header = document.createElement('header');
+    header.className = 'header';
+    this._title.id = 'title';
+    this._closeButton.className = 'close';
+    this._closeButton.type = 'button';
+    this._closeButton.setAttribute('aria-label', 'Close');
+    this._closeButton.textContent = '×';
+    header.append(this._title, this._closeButton);
+
+    const body = document.createElement('div');
+    body.className = 'body';
+    body.append(document.createElement('slot'));
+    const footer = document.createElement('footer');
+    footer.className = 'footer';
+    const footerSlot = document.createElement('slot');
+    footerSlot.name = 'footer';
+    footer.append(footerSlot);
+    this._dialog.setAttribute('aria-labelledby', this._title.id);
+    this._dialog.append(header, body, footer);
+    root.append(style, this._dialog);
+
+    this._closeButton.addEventListener('click', () => this.close('action'));
+    this._dialog.addEventListener('cancel', this._onCancel);
+    this._dialog.addEventListener('click', this._onDialogClick);
+    this._dialog.addEventListener('close', this._onNativeClose);
+  }
+
+  connectedCallback(): void {
+    this._syncHeading();
+    this._syncOpen();
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (name === 'heading') this._syncHeading();
+    if (name === 'open' && this.isConnected) this._syncOpen();
+  }
+
+  get open(): boolean { return this.hasAttribute('open'); }
+  set open(value: boolean) { this.toggleAttribute('open', value); }
+
+  get dismissible(): boolean { return this.hasAttribute('dismissible'); }
+  set dismissible(value: boolean) { this.toggleAttribute('dismissible', value); }
+
+  get heading(): string { return this.getAttribute('heading') ?? ''; }
+  set heading(value: string) { this.setAttribute('heading', value); }
+
+  showModal(): void {
+    if (this.open && this._dialog.open) return;
+    this._returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    this._closeReason = 'programmatic';
+    this.open = true;
+  }
+
+  close(reason: GEDialogCloseDetail['reason'] = 'programmatic'): void {
+    if (!this.open && !this._dialog.open) return;
+    this._closeReason = reason;
+    this.open = false;
+  }
+
+  private _syncHeading(): void {
+    this._title.textContent = this.heading || 'Dialog';
+  }
+
+  private _syncOpen(): void {
+    if (this.open && !this._dialog.open) {
+      this._returnFocus ??= document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      this._dialog.showModal();
+      return;
+    }
+    if (!this.open && this._dialog.open) this._dialog.close();
+  }
+
+  private _onCancel = (event: Event): void => {
+    event.preventDefault();
+    if (!this.dismissible) return;
+    const forwarded = new CustomEvent('dialog-cancel', { bubbles: true, composed: true, cancelable: true });
+    if (this.dispatchEvent(forwarded)) this.close('escape');
+  };
+
+  private _onDialogClick = (event: MouseEvent): void => {
+    if (!this.dismissible || event.target !== this._dialog) return;
+    const rect = this._dialog.getBoundingClientRect();
+    const inside = event.clientX >= rect.left && event.clientX <= rect.right
+      && event.clientY >= rect.top && event.clientY <= rect.bottom;
+    if (!inside) this.close('backdrop');
+  };
+
+  private _onNativeClose = (): void => {
+    this.removeAttribute('open');
+    const reason = this._closeReason;
+    this._closeReason = 'programmatic';
+    this.dispatchEvent(new CustomEvent<GEDialogCloseDetail>('dialog-close', {
+      detail: { reason },
+      bubbles: true,
+      composed: true,
+    }));
+    this._returnFocus?.focus();
+    this._returnFocus = null;
+  };
+}
+
+export function defineDialogComponents(): void {
+  if (!customElements.get('ge-dialog')) customElements.define('ge-dialog', GEDialog);
+}