@haiyue/ui 0.1.0 → 0.1.1

package/dist/virtual-list.js

@@ -0,0 +1,322 @@
+const DEFAULT_ITEM_HEIGHT = 40;
+const DEFAULT_HEIGHT = 320;
+const DEFAULT_OVERSCAN = 3;
+function finiteNumber(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+export function calculateVirtualListRange(itemCount, itemHeight, viewportHeight, scrollTop, overscan) {
+    const count = Math.max(0, Math.floor(finiteNumber(itemCount, 0)));
+    const rowHeight = Math.max(1, finiteNumber(itemHeight, DEFAULT_ITEM_HEIGHT));
+    const visibleHeight = Math.max(0, finiteNumber(viewportHeight, 0));
+    const offset = Math.max(0, finiteNumber(scrollTop, 0));
+    const buffer = Math.max(0, Math.floor(finiteNumber(overscan, DEFAULT_OVERSCAN)));
+    const visibleStartIndex = Math.min(count, Math.floor(offset / rowHeight));
+    const visibleEndIndex = Math.min(count, Math.ceil((offset + visibleHeight) / rowHeight));
+    return {
+        startIndex: Math.max(0, visibleStartIndex - buffer),
+        endIndex: Math.min(count, visibleEndIndex + buffer),
+        visibleStartIndex,
+        visibleEndIndex,
+    };
+}
+export class HYVirtualList extends HTMLElement {
+    _viewport = document.createElement('div');
+    _spacer = document.createElement('div');
+    _window = document.createElement('div');
+    _empty = document.createElement('div');
+    _items = [];
+    _renderItem = null;
+    _itemHeight = DEFAULT_ITEM_HEIGHT;
+    _height = DEFAULT_HEIGHT;
+    _overscan = DEFAULT_OVERSCAN;
+    _range = null;
+    _resizeObserver = null;
+    _connected = false;
+    _onScroll = () => this._renderWindow();
+    _onClick = (event) => this._handleClick(event);
+    static get observedAttributes() {
+        return ['item-height', 'height', 'overscan', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: block;
+        min-width: 0;
+        color: var(--hy-text-color, #eef3ff);
+        font: 13px/1.4 system-ui, sans-serif;
+      }
+      .viewport {
+        position: relative;
+        height: var(--hy-virtual-list-height, 320px);
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        border: 1px solid var(--hy-border-color, #3d4654);
+        border-radius: var(--hy-virtual-list-border-radius, 6px);
+        outline: none;
+        background: var(--hy-surface-color, #171d27);
+        scrollbar-color: var(--hy-border-strong-color, #596779) var(--hy-input-bg-color, #111722);
+        scrollbar-width: thin;
+      }
+      .viewport:focus-visible {
+        border-color: var(--hy-focus-border-color, #79a8ff);
+        box-shadow: 0 0 0 2px var(--hy-focus-ring-color, rgba(121, 168, 255, 0.22));
+      }
+      .viewport::-webkit-scrollbar { width: var(--hy-virtual-list-scrollbar-size, 10px); }
+      .viewport::-webkit-scrollbar-track { background: var(--hy-input-bg-color, #111722); }
+      .viewport::-webkit-scrollbar-thumb {
+        min-height: 28px;
+        border: 2px solid var(--hy-input-bg-color, #111722);
+        border-radius: 999px;
+        background: var(--hy-border-strong-color, #596779);
+      }
+      .viewport::-webkit-scrollbar-thumb:hover { background: var(--hy-accent-color, #79a8ff); }
+      .spacer { position: relative; width: 100%; }
+      .window { position: absolute; inset: 0 0 auto; will-change: transform; }
+      ::slotted(.hy-virtual-list-item) {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        overflow: hidden;
+        border-bottom: 1px solid var(--hy-border-subtle-color, var(--hy-border-color, #3d4654));
+        background: var(--hy-surface-color, #171d27);
+        box-sizing: border-box;
+      }
+      ::slotted(.hy-virtual-list-item:hover) { background: var(--hy-hover-bg-color, #273241); }
+      .empty {
+        display: grid;
+        height: 100%;
+        place-items: center;
+        padding: 24px;
+        color: var(--hy-secondary-text-color, #9aa8ba);
+        box-sizing: border-box;
+      }
+      .empty[hidden], .spacer[hidden] { display: none; }
+    `;
+        this._viewport.className = 'viewport';
+        this._viewport.tabIndex = 0;
+        this._viewport.setAttribute('role', 'list');
+        this._spacer.className = 'spacer';
+        this._window.className = 'window';
+        const itemSlot = document.createElement('slot');
+        itemSlot.name = 'items';
+        this._window.append(itemSlot);
+        this._spacer.append(this._window);
+        this._empty.className = 'empty';
+        this._empty.hidden = true;
+        const emptySlot = document.createElement('slot');
+        emptySlot.name = 'empty';
+        emptySlot.textContent = 'No data';
+        this._empty.append(emptySlot);
+        this._viewport.append(this._spacer, this._empty);
+        root.append(style, this._viewport);
+    }
+    connectedCallback() {
+        if (this._connected)
+            return;
+        this._connected = true;
+        this._syncAttributes();
+        this._viewport.addEventListener('scroll', this._onScroll, { passive: true });
+        this._window.addEventListener('click', this._onClick);
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this._renderWindow());
+            this._resizeObserver.observe(this._viewport);
+        }
+        this._renderWindow(true);
+    }
+    disconnectedCallback() {
+        if (!this._connected)
+            return;
+        this._connected = false;
+        this._viewport.removeEventListener('scroll', this._onScroll);
+        this._window.removeEventListener('click', this._onClick);
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        this._replaceRows([]);
+    }
+    attributeChangedCallback() {
+        this._syncAttributes();
+    }
+    get items() { return this._items; }
+    set items(value) {
+        this._items = Array.isArray(value) ? value : [];
+        this._clampScrollTop();
+        this.refresh();
+    }
+    get renderItem() { return this._renderItem; }
+    set renderItem(value) {
+        this._renderItem = typeof value === 'function' ? value : null;
+        this.refresh();
+    }
+    get itemHeight() { return this._itemHeight; }
+    set itemHeight(value) {
+        const next = Math.max(1, finiteNumber(Number(value), DEFAULT_ITEM_HEIGHT));
+        if (next === this._itemHeight && this.getAttribute('item-height') === String(next))
+            return;
+        this._itemHeight = next;
+        this._reflectNumber('item-height', next);
+        this.refresh();
+    }
+    get height() { return this._height; }
+    set height(value) {
+        const next = Math.max(1, finiteNumber(Number(value), DEFAULT_HEIGHT));
+        if (next === this._height && this.getAttribute('height') === String(next))
+            return;
+        this._height = next;
+        this._reflectNumber('height', next);
+        this._applyHeight();
+        this.refresh();
+    }
+    get overscan() { return this._overscan; }
+    set overscan(value) {
+        const next = Math.max(0, Math.floor(finiteNumber(Number(value), DEFAULT_OVERSCAN)));
+        if (next === this._overscan && this.getAttribute('overscan') === String(next))
+            return;
+        this._overscan = next;
+        this._reflectNumber('overscan', next);
+        this.refresh();
+    }
+    refresh() {
+        this._range = null;
+        this._renderWindow(true);
+    }
+    scrollToIndex(index, align = 'auto') {
+        if (this._items.length === 0)
+            return;
+        const targetIndex = Math.min(this._items.length - 1, Math.max(0, Math.floor(finiteNumber(index, 0))));
+        const viewportHeight = this._viewport.clientHeight || this._height;
+        const itemStart = targetIndex * this._itemHeight;
+        const itemEnd = itemStart + this._itemHeight;
+        const currentStart = this._viewport.scrollTop;
+        const currentEnd = currentStart + viewportHeight;
+        let nextScrollTop = currentStart;
+        if (align === 'start')
+            nextScrollTop = itemStart;
+        else if (align === 'center')
+            nextScrollTop = itemStart - (viewportHeight - this._itemHeight) / 2;
+        else if (align === 'end')
+            nextScrollTop = itemEnd - viewportHeight;
+        else if (itemStart < currentStart)
+            nextScrollTop = itemStart;
+        else if (itemEnd > currentEnd)
+            nextScrollTop = itemEnd - viewportHeight;
+        const maxScrollTop = Math.max(0, this._items.length * this._itemHeight - viewportHeight);
+        this._viewport.scrollTop = Math.min(maxScrollTop, Math.max(0, nextScrollTop));
+        this._renderWindow();
+    }
+    _syncAttributes() {
+        this._itemHeight = this._readPositiveAttribute('item-height', DEFAULT_ITEM_HEIGHT);
+        this._height = this._readPositiveAttribute('height', DEFAULT_HEIGHT);
+        this._overscan = this._readNonNegativeAttribute('overscan', DEFAULT_OVERSCAN);
+        const label = this.getAttribute('aria-label');
+        if (label)
+            this._viewport.setAttribute('aria-label', label);
+        else
+            this._viewport.removeAttribute('aria-label');
+        this._applyHeight();
+        this.refresh();
+    }
+    _applyHeight() {
+        if (this.hasAttribute('height'))
+            this._viewport.style.height = `${this._height}px`;
+        else
+            this._viewport.style.removeProperty('height');
+    }
+    _readPositiveAttribute(name, fallback) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = Number(this.getAttribute(name));
+        return Number.isFinite(value) && value > 0 ? value : fallback;
+    }
+    _readNonNegativeAttribute(name, fallback) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = Number(this.getAttribute(name));
+        return Number.isFinite(value) && value >= 0 ? Math.floor(value) : fallback;
+    }
+    _reflectNumber(name, value) {
+        const text = String(value);
+        if (this.getAttribute(name) !== text)
+            this.setAttribute(name, text);
+    }
+    _clampScrollTop() {
+        const viewportHeight = this._viewport.clientHeight || this._height;
+        const maxScrollTop = Math.max(0, this._items.length * this._itemHeight - viewportHeight);
+        if (this._viewport.scrollTop > maxScrollTop)
+            this._viewport.scrollTop = maxScrollTop;
+    }
+    _renderWindow(force = false) {
+        const count = this._items.length;
+        this._spacer.hidden = count === 0;
+        this._empty.hidden = count !== 0;
+        this._spacer.style.height = `${count * this._itemHeight}px`;
+        if (count === 0) {
+            this._replaceRows([]);
+            this._range = null;
+            return;
+        }
+        const range = calculateVirtualListRange(count, this._itemHeight, this._viewport.clientHeight || this._height, this._viewport.scrollTop, this._overscan);
+        if (!force && this._range
+            && range.startIndex === this._range.startIndex
+            && range.endIndex === this._range.endIndex)
+            return;
+        this._range = range;
+        this._window.style.transform = `translateY(${range.startIndex * this._itemHeight}px)`;
+        const rows = [];
+        for (let index = range.startIndex; index < range.endIndex; index += 1) {
+            const item = this._items[index];
+            const row = document.createElement('div');
+            row.className = 'hy-virtual-list-item';
+            row.slot = 'items';
+            row.dataset.hyVirtualListGenerated = '';
+            row.dataset.index = String(index);
+            row.style.height = `${this._itemHeight}px`;
+            row.setAttribute('role', 'listitem');
+            row.setAttribute('aria-posinset', String(index + 1));
+            row.setAttribute('aria-setsize', String(count));
+            const content = this._renderItem
+                ? this._renderItem(item, index)
+                : String(item ?? '');
+            if (content instanceof Node)
+                row.append(content);
+            else
+                row.textContent = String(content);
+            rows.push(row);
+        }
+        this._replaceRows(rows);
+        this.dispatchEvent(new CustomEvent('visible-range-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                ...range,
+                renderedCount: range.endIndex - range.startIndex,
+                total: count,
+            },
+        }));
+    }
+    _handleClick(event) {
+        const target = event.target instanceof Element ? event.target.closest('.hy-virtual-list-item') : null;
+        const index = Number(target?.dataset.index);
+        if (!target || !Number.isInteger(index) || index < 0 || index >= this._items.length)
+            return;
+        const item = this._items[index];
+        this.dispatchEvent(new CustomEvent('item-click', {
+            bubbles: true,
+            composed: true,
+            detail: { item, index },
+        }));
+    }
+    _replaceRows(rows) {
+        for (const row of this.querySelectorAll(':scope > [data-hy-virtual-list-generated]'))
+            row.remove();
+        this.append(...rows);
+    }
+}
+export function defineVirtualListComponents() {
+    if (!customElements.get('hy-virtual-list'))
+        customElements.define('hy-virtual-list', HYVirtualList);
+}
+//# sourceMappingURL=virtual-list.js.map

package/package.json

@@ -1,29 +1,102 @@
 {
   "name": "@haiyue/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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"
+    "url": "git+https://github.com/HaiyueStudio/UI.git"
   },
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "./themes/*.css"
+  ],
   "exports": {
     ".": {
-      "source": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
-  },
-  "engines": {
-    "node": ">=22"
+    },
+    "./border-beam": {
+      "types": "./dist/border-beam.d.ts",
+      "import": "./dist/border-beam.js"
+    },
+    "./button": {
+      "types": "./dist/button.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox.d.ts",
+      "import": "./dist/checkbox.js"
+    },
+    "./context-menu": {
+      "types": "./dist/context-menu.d.ts",
+      "import": "./dist/context-menu.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog.d.ts",
+      "import": "./dist/dialog.js"
+    },
+    "./drawer": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.js"
+    },
+    "./dropdown": {
+      "types": "./dist/dropdown.d.ts",
+      "import": "./dist/dropdown.js"
+    },
+    "./input": {
+      "types": "./dist/input.d.ts",
+      "import": "./dist/input.js"
+    },
+    "./notification": {
+      "types": "./dist/notification.d.ts",
+      "import": "./dist/notification.js"
+    },
+    "./history-controls": {
+      "types": "./dist/history-controls.d.ts",
+      "import": "./dist/history-controls.js"
+    },
+    "./virtual-list": {
+      "types": "./dist/virtual-list.d.ts",
+      "import": "./dist/virtual-list.js"
+    },
+    "./radio": {
+      "types": "./dist/radio.d.ts",
+      "import": "./dist/radio.js"
+    },
+    "./range": {
+      "types": "./dist/range.d.ts",
+      "import": "./dist/range.js"
+    },
+    "./select": {
+      "types": "./dist/select.d.ts",
+      "import": "./dist/select.js"
+    },
+    "./split": {
+      "types": "./dist/split.d.ts",
+      "import": "./dist/split.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs.d.ts",
+      "import": "./dist/tabs.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip.d.ts",
+      "import": "./dist/tooltip.js"
+    },
+    "./tree": {
+      "types": "./dist/tree.d.ts",
+      "import": "./dist/tree.js"
+    },
+    "./themes/light.css": "./themes/haiyue-light.css",
+    "./themes/dark.css": "./themes/haiyue-dark.css",
+    "./package.json": "./package.json"
   },
+  "engines": { "node": ">=22" },
   "publishConfig": {
     "access": "public",
     "tag": "latest"
@@ -33,12 +106,15 @@
     "LICENSE",
     "dist/**/*.js",
     "dist/**/*.d.ts",
-    "src/**/*"
+    "themes/*.css"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "examples": "npm run build && node scripts/serve-examples.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "npm run build && node --test \"test/**/*.test.mjs\""
+    "test": "npm run build && node --test \"test/**/*.test.mjs\"",
+    "prepack": "npm run typecheck && npm test",
+    "pack:candidate": "node scripts/pack-candidate.mjs"
   },
   "devDependencies": {
     "typescript": "^5.2.0"

package/themes/haiyue-dark.css

@@ -0,0 +1,46 @@
+/*
+ * Haiyue Nightfall — deep navy surfaces, blue-violet energy and gold detail.
+ * Apply with data-hy-theme="dark" on :root or on a component subtree.
+ */
+:root[data-hy-theme="dark"],
+[data-hy-theme="dark"] {
+  color-scheme: dark;
+  --hy-theme-name: "Haiyue Nightfall";
+  --hy-canvas-color: #080b21;
+  --hy-surface-color: #10132f;
+  --hy-surface-elevated-color: #181a40;
+  --hy-panel-bg-color: #121633;
+  --hy-input-bg-color: #0c1029;
+  --hy-menu-bg-color: #171a3e;
+  --hy-text-color: #eef0ff;
+  --hy-secondary-text-color: #a9add4;
+  --hy-muted-color: #747ba8;
+  --hy-disabled-text-color: #656b96;
+  --hy-border-color: #343765;
+  --hy-border-strong-color: #484b84;
+  --hy-hover-border-color: #6468aa;
+  --hy-hover-bg-color: #242752;
+  --hy-menu-item-hover-bg-color: #302d6b;
+  --hy-accent-color: #8177f2;
+  --hy-accent-strong-color: #554cc6;
+  --hy-selected-bg-color: #554cc6;
+  --hy-selected-text-color: #ffffff;
+  --hy-active-text-color: #f5f2ff;
+  --hy-focus-border-color: #9c8fff;
+  --hy-focus-ring-color: rgba(137, 121, 255, 0.28);
+  --hy-invalid-border-color: #dd6f91;
+  --hy-menu-shadow-color: rgba(1, 2, 15, 0.52);
+  --hy-dialog-shadow-color: rgba(1, 2, 18, 0.62);
+  --hy-dialog-backdrop-color: rgba(3, 4, 20, 0.72);
+  --hy-dialog-bg-color: #17193b;
+  --hy-dialog-body-color: #b8badb;
+  --hy-dialog-footer-bg-color: #11142f;
+  --hy-tooltip-bg-color: #090b20;
+  --hy-tooltip-text-color: #f4f2ff;
+  --hy-tooltip-border-color: rgba(150, 137, 255, 0.28);
+  --hy-tooltip-shadow-color: rgba(0, 0, 10, 0.5);
+  --hy-drop-indicator-color: #9287ff;
+  --hy-drop-target-bg-color: #29265b;
+  --hy-theme-glow-color: #5149b9;
+  --hy-theme-highlight-color: #e1b952;
+}

package/themes/haiyue-light.css

@@ -0,0 +1,46 @@
+/*
+ * Haiyue Moonlight — moon-white surfaces, pale ice blue and cyan highlights.
+ * Apply with data-hy-theme="light" on :root or on a component subtree.
+ */
+:root[data-hy-theme="light"],
+[data-hy-theme="light"] {
+  color-scheme: light;
+  --hy-theme-name: "Haiyue Moonlight";
+  --hy-canvas-color: #edf8ff;
+  --hy-surface-color: #f7fbff;
+  --hy-surface-elevated-color: #ffffff;
+  --hy-panel-bg-color: #f2f8fd;
+  --hy-input-bg-color: #ffffff;
+  --hy-menu-bg-color: #fbfdff;
+  --hy-text-color: #183247;
+  --hy-secondary-text-color: #5f7c92;
+  --hy-muted-color: #8aa3b6;
+  --hy-disabled-text-color: #9baebb;
+  --hy-border-color: #c7ddea;
+  --hy-border-strong-color: #a8cde0;
+  --hy-hover-border-color: #86bad3;
+  --hy-hover-bg-color: #e5f3fb;
+  --hy-menu-item-hover-bg-color: #dceff9;
+  --hy-accent-color: #55b4da;
+  --hy-accent-strong-color: #2c88b0;
+  --hy-selected-bg-color: #2f8cb5;
+  --hy-selected-text-color: #ffffff;
+  --hy-active-text-color: #153b54;
+  --hy-focus-border-color: #3aa6d1;
+  --hy-focus-ring-color: rgba(58, 166, 209, 0.24);
+  --hy-invalid-border-color: #d15f79;
+  --hy-menu-shadow-color: rgba(50, 91, 118, 0.18);
+  --hy-dialog-shadow-color: rgba(42, 82, 109, 0.22);
+  --hy-dialog-backdrop-color: rgba(55, 92, 116, 0.24);
+  --hy-dialog-bg-color: #ffffff;
+  --hy-dialog-body-color: #527187;
+  --hy-dialog-footer-bg-color: #f0f7fc;
+  --hy-tooltip-bg-color: #214d68;
+  --hy-tooltip-text-color: #f7fcff;
+  --hy-tooltip-border-color: rgba(255, 255, 255, 0.28);
+  --hy-tooltip-shadow-color: rgba(35, 75, 101, 0.2);
+  --hy-drop-indicator-color: #38a9d7;
+  --hy-drop-target-bg-color: #d9effa;
+  --hy-theme-glow-color: #b9e9fb;
+  --hy-theme-highlight-color: #a99bea;
+}