@haiyue/ui 0.1.2 → 0.2.2

package/dist/portable/tree.js

@@ -0,0 +1,96 @@
+import { hyKey } from '../core/validation.js';
+import { equalData } from '../core/data.js';
+export function flatten(root) {
+    const entries = new Map();
+    const walk = (node, path, parent, slot) => {
+        const nextPath = [...path, node.key], key = hyKey(...nextPath);
+        const { children, slots, ...shallow } = node;
+        entries.set(key, { node: Object.freeze({ ...shallow, key }), parent, ...(slot === undefined ? {} : { slot }) });
+        for (const child of children ?? [])
+            walk(child, nextPath, key);
+        for (const [name, list] of Object.entries(slots ?? {}))
+            for (const child of list)
+                walk(child, nextPath, key, name);
+    };
+    walk(root, [], null);
+    return entries;
+}
+function group(entry) { return JSON.stringify([entry.parent, entry.slot ?? null]); }
+function groups(tree) {
+    const result = new Map();
+    for (const [key, entry] of tree) {
+        const id = group(entry);
+        if (!result.has(id))
+            result.set(id, []);
+        result.get(id).push(key);
+    }
+    return result;
+}
+/** Returns a deterministic batch. Removing an ancestor releases descendants exactly once. */
+export function diff(previous, next) {
+    // Bound props preserve topology. Avoid building/serializing sibling groups
+    // for these updates; keep the general reconciler for insert/move/remove.
+    if (previous.size === next.size) {
+        const entries = previous.entries(), updates = [];
+        let sameStructure = true;
+        for (const [key, entry] of next) {
+            const [oldKey, old] = entries.next().value;
+            if (oldKey !== key || old.parent !== entry.parent || old.slot !== entry.slot || old.node.kind !== entry.node.kind) {
+                sameStructure = false;
+                break;
+            }
+            if (old !== entry && !equalData(old.node.props, entry.node.props))
+                updates.push(Object.freeze({ type: 'update', node: entry.node }));
+        }
+        if (sameStructure)
+            return Object.freeze(updates);
+    }
+    const mutations = [];
+    const removed = new Set();
+    for (const [key, old] of previous) {
+        if ((old.parent !== null && removed.has(old.parent)) || !next.has(key) || next.get(key).node.kind !== old.node.kind)
+            removed.add(key);
+    }
+    for (const [key, old] of previous)
+        if (removed.has(key) && (old.parent === null || !removed.has(old.parent)))
+            mutations.push({ type: 'remove', key });
+    const created = new Set();
+    for (const [key, entry] of next) {
+        const old = previous.get(key);
+        if (!old || removed.has(key)) {
+            created.add(key);
+            mutations.push({ type: 'create', node: entry.node });
+        }
+        else if (!equalData(old.node.props, entry.node.props))
+            mutations.push({ type: 'update', node: entry.node });
+    }
+    const oldGroups = groups(new Map([...previous].filter(([key]) => !removed.has(key))));
+    // Drop cross-slot entries from their old location before placing them in their new group.
+    for (const list of oldGroups.values())
+        for (let i = list.length - 1; i >= 0; i--) {
+            const key = list[i];
+            if (next.has(key) && group(previous.get(key)) !== group(next.get(key)))
+                list.splice(i, 1);
+        }
+    for (const [id, ordered] of groups(next)) {
+        const current = oldGroups.get(id) ?? [];
+        // The common props-only path never searches sibling positions.
+        if (current.length === ordered.length && current.every((key, index) => key === ordered[index]))
+            continue;
+        let before = null;
+        for (let i = ordered.length - 1; i >= 0; i--) {
+            const key = ordered[i], entry = next.get(key);
+            const at = current.indexOf(key), successor = at < 0 ? undefined : (current[at + 1] ?? null);
+            if (at < 0 || successor !== before) {
+                mutations.push({ type: created.has(key) ? 'insert' : 'move', key, parent: entry.parent, before,
+                    ...(entry.slot === undefined ? {} : { slot: entry.slot }) });
+                if (at >= 0)
+                    current.splice(at, 1);
+                current.splice(before === null ? current.length : current.indexOf(before), 0, key);
+            }
+            before = key;
+        }
+    }
+    return Object.freeze(mutations.map(mutation => Object.freeze(mutation)));
+}
+//# sourceMappingURL=tree.js.map

package/dist/qr-code.d.ts

@@ -0,0 +1,62 @@
+export type HYQRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+export type HYQRCodeStatus = 'empty' | 'ready' | 'error';
+export interface HYQRCodeRenderDetail {
+    readonly value: string;
+    readonly version: number;
+    readonly moduleCount: number;
+    readonly errorCorrectionLevel: HYQRCodeErrorCorrectionLevel;
+}
+export interface HYQRCodeErrorDetail {
+    readonly message: string;
+}
+export interface HYQRCodeIconErrorDetail {
+    readonly src: string;
+}
+/** Local SVG QR generation with a bounded decorative image or named icon slot. */
+export declare class HYQRCode extends HTMLElement {
+    private readonly _frame;
+    private readonly _svg;
+    private readonly _background;
+    private readonly _modules;
+    private readonly _iconFrame;
+    private readonly _image;
+    private readonly _slot;
+    private readonly _message;
+    private _code;
+    private _key;
+    private _pathKey;
+    private _lastIcon;
+    private _iconReady;
+    private _state;
+    private _error;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get value(): string;
+    set value(value: string);
+    get size(): number;
+    set size(value: number);
+    get color(): string;
+    set color(value: string);
+    get backgroundColor(): string;
+    set backgroundColor(value: string);
+    /** Quiet zone in modules. At least four modules are retained. */
+    get margin(): number;
+    set margin(value: number);
+    /** Defaults to H with an icon and M otherwise. An explicit level takes precedence. */
+    get errorCorrectionLevel(): HYQRCodeErrorCorrectionLevel;
+    set errorCorrectionLevel(value: HYQRCodeErrorCorrectionLevel);
+    get icon(): string;
+    set icon(value: string);
+    /** Requested image/slot size in CSS pixels. Actual coverage is bounded for readability. */
+    get iconSize(): number;
+    set iconSize(value: number);
+    get iconMargin(): number;
+    set iconMargin(value: number);
+    get status(): HYQRCodeStatus;
+    private _hasSlotIcon;
+    private _render;
+}
+export declare function defineQRCodeComponents(): void;

package/dist/qr-code.js

@@ -0,0 +1,224 @@
+import { qrcodegen } from './internal/qrcodegen.js';
+const levels = { L: qrcodegen.QrCode.Ecc.LOW, M: qrcodegen.QrCode.Ecc.MEDIUM, Q: qrcodegen.QrCode.Ecc.QUARTILE, H: qrcodegen.QrCode.Ecc.HIGH };
+function integer(value, fallback, min, max) {
+    if (value == null || value === '')
+        return fallback;
+    const number = Number(value);
+    return Number.isFinite(number) ? Math.min(max, Math.max(min, Math.floor(number))) : fallback;
+}
+/** Local SVG QR generation with a bounded decorative image or named icon slot. */
+export class HYQRCode extends HTMLElement {
+    _frame = document.createElement('div');
+    _svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    _background = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    _modules = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    _iconFrame = document.createElement('div');
+    _image = document.createElement('img');
+    _slot = document.createElement('slot');
+    _message = document.createElement('span');
+    _code = null;
+    _key = '';
+    _pathKey = '';
+    _lastIcon = '';
+    _iconReady = false;
+    _state = 'empty';
+    _error = '';
+    static get observedAttributes() {
+        return ['value', 'size', 'color', 'background-color', 'margin', 'error-correction-level', 'icon', 'icon-size', 'icon-margin', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-block; max-width: 100%; vertical-align: middle; color: var(--hy-text-color, #eef0ff); font: 12px/1.5 system-ui, sans-serif; }
+      :host([hidden]), [hidden] { display: none !important; }
+      .frame { position: relative; box-sizing: border-box; max-width: 100%; aspect-ratio: 1; }
+      svg { display: block; width: 100%; height: 100%; }
+      .icon { position: absolute; box-sizing: border-box; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; background: var(--_qr-background); border-radius: var(--hy-qr-code-icon-radius, 4px); pointer-events: none; overflow: hidden; }
+      img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
+      slot { display: contents; }
+      ::slotted([slot="icon"]) { display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; overflow: hidden; }
+      .message { position: absolute; inset: 0; display: grid; place-items: center; box-sizing: border-box; padding: 12px; text-align: center; color: var(--hy-secondary-text-color, #a9add4); background: var(--hy-surface-color, #10132f); border: 1px solid var(--hy-border-color, #343765); border-radius: var(--hy-qr-code-radius, 8px); }
+    `;
+        this._frame.className = 'frame';
+        this._frame.part.add('frame');
+        this._svg.part.add('code');
+        this._svg.setAttribute('aria-hidden', 'true');
+        this._svg.setAttribute('shape-rendering', 'crispEdges');
+        this._background.part.add('background');
+        this._modules.part.add('modules');
+        this._svg.append(this._background, this._modules);
+        this._iconFrame.className = 'icon';
+        this._iconFrame.part.add('icon');
+        this._iconFrame.setAttribute('aria-hidden', 'true');
+        this._iconFrame.inert = true;
+        this._image.alt = '';
+        this._image.draggable = false;
+        this._image.part.add('icon-image');
+        this._slot.name = 'icon';
+        this._iconFrame.append(this._slot, this._image);
+        this._message.className = 'message';
+        this._message.part.add('message');
+        this._frame.append(this._svg, this._iconFrame, this._message);
+        root.append(style, this._frame);
+        this._image.addEventListener('load', () => {
+            if (!this.isConnected || !this._image.naturalWidth)
+                return;
+            this._iconReady = true;
+            this._render();
+        });
+        this._image.addEventListener('error', () => {
+            if (!this.isConnected || !this._lastIcon)
+                return;
+            this._iconReady = false;
+            this._render();
+            this.dispatchEvent(new CustomEvent('qr-icon-error', { detail: { src: this._lastIcon }, bubbles: true, composed: true }));
+        });
+    }
+    connectedCallback() { this._slot.addEventListener('slotchange', this._render); this._render(); }
+    disconnectedCallback() {
+        this._slot.removeEventListener('slotchange', this._render);
+        this._lastIcon = '';
+        this._iconReady = false;
+        this._image.removeAttribute('src');
+    }
+    attributeChangedCallback() { this._render(); }
+    get value() { return this.getAttribute('value') ?? ''; }
+    set value(value) { this.setAttribute('value', String(value ?? '')); }
+    get size() { return integer(this.getAttribute('size'), 200, 64, 2048); }
+    set size(value) { this.setAttribute('size', String(integer(value, 200, 64, 2048))); }
+    get color() { return this.getAttribute('color') ?? ''; }
+    set color(value) { this.setAttribute('color', value); }
+    get backgroundColor() { return this.getAttribute('background-color') ?? ''; }
+    set backgroundColor(value) { this.setAttribute('background-color', value); }
+    /** Quiet zone in modules. At least four modules are retained. */
+    get margin() { return integer(this.getAttribute('margin'), 4, 4, 16); }
+    set margin(value) { this.setAttribute('margin', String(integer(value, 4, 4, 16))); }
+    /** Defaults to H with an icon and M otherwise. An explicit level takes precedence. */
+    get errorCorrectionLevel() {
+        const value = this.getAttribute('error-correction-level')?.toUpperCase();
+        if (value === 'L' || value === 'M' || value === 'Q' || value === 'H')
+            return value;
+        return this.icon || this._hasSlotIcon() ? 'H' : 'M';
+    }
+    set errorCorrectionLevel(value) { this.setAttribute('error-correction-level', value); }
+    get icon() { return this.getAttribute('icon') ?? ''; }
+    set icon(value) { this.setAttribute('icon', value ?? ''); }
+    /** Requested image/slot size in CSS pixels. Actual coverage is bounded for readability. */
+    get iconSize() { return integer(this.getAttribute('icon-size'), 32, 4, 512); }
+    set iconSize(value) { this.setAttribute('icon-size', String(integer(value, 32, 4, 512))); }
+    get iconMargin() { return integer(this.getAttribute('icon-margin'), 2, 0, 64); }
+    set iconMargin(value) { this.setAttribute('icon-margin', String(integer(value, 2, 0, 64))); }
+    get status() { return this._state; }
+    _hasSlotIcon() {
+        return this._slot.assignedNodes().some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
+    }
+    _render = () => {
+        if (!this.isConnected)
+            return;
+        const value = this.value;
+        const level = this.errorCorrectionLevel;
+        const key = JSON.stringify([value, level]);
+        let generated = false;
+        let failed = false;
+        if (key !== this._key) {
+            this._key = key;
+            this._code = null;
+            this._error = '';
+            this._state = value ? 'ready' : 'empty';
+            if (value) {
+                try {
+                    const bytes = new TextEncoder().encode(value);
+                    if (bytes.length > 7089)
+                        throw new RangeError('Value too long');
+                    const segments = /^[\x00-\x7f]*$/.test(value) ? qrcodegen.QrSegment.makeSegments(value) : [qrcodegen.QrSegment.makeEci(26), qrcodegen.QrSegment.makeBytes([...bytes])];
+                    this._code = qrcodegen.QrCode.encodeSegments(segments, levels[level], 1, 40, -1, false);
+                    generated = true;
+                }
+                catch {
+                    this._state = 'error';
+                    this._error = 'This value is too long for the selected error correction level.';
+                    failed = true;
+                }
+            }
+        }
+        const background = CSS.supports('color', this.backgroundColor) ? this.backgroundColor : 'var(--hy-qr-code-background-color, #ffffff)';
+        const color = CSS.supports('color', this.color) ? this.color : 'var(--hy-qr-code-color, #111827)';
+        this._frame.style.width = `${this.size}px`;
+        this._frame.style.setProperty('--_qr-background', background);
+        this._frame.dataset.state = this._state;
+        this._svg.toggleAttribute('hidden', this._state !== 'ready');
+        this._message.hidden = this._state === 'ready';
+        this._message.textContent = this._state === 'error' ? this._error : 'Enter a value to generate a QR code.';
+        this._message.setAttribute('role', this._state === 'error' ? 'alert' : 'status');
+        if (this._state === 'ready') {
+            this._frame.setAttribute('role', 'img');
+            this._frame.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'QR code');
+        }
+        else {
+            this._frame.removeAttribute('role');
+            this._frame.removeAttribute('aria-label');
+        }
+        this._background.setAttribute('fill', background);
+        this._modules.setAttribute('fill', color);
+        const code = this._code;
+        const pathKey = `${key}:${this.margin}`;
+        if (!code) {
+            this._modules.removeAttribute('d');
+            this._pathKey = '';
+        }
+        else if (pathKey !== this._pathKey) {
+            this._pathKey = pathKey;
+            const extent = code.size + this.margin * 2;
+            this._svg.setAttribute('viewBox', `0 0 ${extent} ${extent}`);
+            this._background.setAttribute('width', String(extent));
+            this._background.setAttribute('height', String(extent));
+            const path = [];
+            for (let y = 0; y < code.size; y++) {
+                for (let x = 0; x < code.size;) {
+                    if (!code.getModule(x, y)) {
+                        x++;
+                        continue;
+                    }
+                    const start = x;
+                    while (x < code.size && code.getModule(x, y))
+                        x++;
+                    path.push(`M${start + this.margin},${y + this.margin}h${x - start}v1h-${x - start}z`);
+                }
+            }
+            this._modules.setAttribute('d', path.join(''));
+        }
+        const slotted = this._hasSlotIcon();
+        const src = slotted || !code ? '' : this.icon;
+        if (src !== this._lastIcon) {
+            this._lastIcon = src;
+            this._iconReady = false;
+            if (src)
+                this._image.src = src;
+            else
+                this._image.removeAttribute('src');
+        }
+        this._image.hidden = slotted || !src;
+        this._iconFrame.hidden = !code || (!slotted && !this._iconReady);
+        if (code) {
+            // Include the backing margin in the coverage limit; percentages also
+            // preserve that limit when max-width shrinks the rendered code.
+            const coverage = Math.min(this.iconSize + this.iconMargin * 2, this.size * code.size / (code.size + this.margin * 2) * .2);
+            const padding = Math.min(this.iconMargin, coverage / 4);
+            this._iconFrame.style.width = this._iconFrame.style.height = `${coverage / this.size * 100}%`;
+            this._iconFrame.style.padding = `${padding / this.size * 100}%`;
+        }
+        if (generated && code)
+            this.dispatchEvent(new CustomEvent('qr-render', {
+                detail: { value, version: code.version, moduleCount: code.size, errorCorrectionLevel: level }, bubbles: true, composed: true,
+            }));
+        if (failed)
+            this.dispatchEvent(new CustomEvent('qr-error', { detail: { message: this._error }, bubbles: true, composed: true }));
+    };
+}
+export function defineQRCodeComponents() {
+    if (!customElements.get('hy-qr-code'))
+        customElements.define('hy-qr-code', HYQRCode);
+}
+//# sourceMappingURL=qr-code.js.map

package/dist/range.d.ts

@@ -32,6 +32,9 @@ export declare class HYRange extends HTMLElement {
     set step(value: number);
     get value(): number;
     set value(value: number);
+    get controlled(): boolean;
+    set controlled(value: boolean);
+    private _acceptedValue;
     get range(): boolean;
     set range(value: boolean);
     get lowerValue(): number;

package/dist/range.js

@@ -17,7 +17,7 @@ export class HYRange extends HTMLElement {
     static get observedAttributes() {
         return [
             'min', 'max', 'step', 'value', 'range', 'lower-value', 'upper-value',
-            'disabled', 'show-value', 'aria-label',
+            'disabled', 'show-value', 'aria-label', 'controlled',
         ];
     }
     constructor() {
@@ -147,11 +147,11 @@ export class HYRange extends HTMLElement {
     set min(value) { this.setAttribute('min', String(finiteOr(value, DEFAULT_MIN))); }
     get max() {
         const value = Number(this.getAttribute('max'));
-        return Number.isFinite(value) && value > this.min ? value : Math.max(DEFAULT_MAX, this.min + DEFAULT_MAX);
+        return Number.isFinite(value) && (value > this.min || (this.controlled && value === this.min)) ? value : Math.max(DEFAULT_MAX, this.min + DEFAULT_MAX);
     }
     set max(value) {
         const next = finiteOr(value, DEFAULT_MAX);
-        this.setAttribute('max', String(next > this.min ? next : this.min + DEFAULT_MAX));
+        this.setAttribute('max', String(next > this.min || (this.controlled && next === this.min) ? next : this.min + DEFAULT_MAX));
     }
     get step() {
         const value = Number(this.getAttribute('step'));
@@ -161,8 +161,13 @@ export class HYRange extends HTMLElement {
         const next = finiteOr(value, DEFAULT_STEP);
         this.setAttribute('step', String(next > 0 ? next : DEFAULT_STEP));
     }
-    get value() { return this._normalize(Number(this.getAttribute('value') ?? this.min)); }
-    set value(value) { this.setAttribute('value', String(this._normalize(value))); }
+    get value() { return this._acceptedValue(Number(this.getAttribute('value') ?? this.min)); }
+    set value(value) { this.setAttribute('value', String(this._acceptedValue(value))); }
+    get controlled() { return this.hasAttribute('controlled'); }
+    set controlled(value) { this.toggleAttribute('controlled', value); }
+    _acceptedValue(value) {
+        return this.controlled ? Math.max(this.min, Math.min(this.max, finiteOr(value, this.min))) : this._normalize(value);
+    }
     get range() { return this.hasAttribute('range'); }
     set range(value) { this.toggleAttribute('range', Boolean(value)); }
     get lowerValue() {
@@ -262,6 +267,10 @@ export class HYRange extends HTMLElement {
         const changed = this._dragStartValue !== this._serializedValue();
         const handle = this._activeHandle;
         this._stopDrag();
+        if (this.controlled && event.type === 'pointercancel') {
+            this._dispatchValueEvent('value-cancel', handle);
+            return;
+        }
         if (changed)
             this._dispatchValueEvent('value-change', handle);
     };
@@ -359,6 +368,8 @@ export class HYRange extends HTMLElement {
         return this._normalize(Number(this.getAttribute('lower-value') ?? this.min));
     }
     _toPercent(value) {
+        if (this.max === this.min)
+            return 0;
         return (value - this.min) / (this.max - this.min) * 100;
     }
     _formatValue(value) {

package/dist/rate.d.ts

@@ -0,0 +1,46 @@
+export interface HYRateChangeDetail {
+    readonly value: number;
+}
+export interface HYRateHoverChangeDetail {
+    readonly value: number | null;
+}
+/** Accessible star rating with optional half-step pointer and keyboard selection. */
+export declare class HYRate extends HTMLElement {
+    private readonly _group;
+    private _value;
+    private _hoverValue;
+    private _tooltips;
+    private _reflecting;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get value(): number;
+    set value(value: number);
+    get count(): number;
+    set count(value: number);
+    get allowHalf(): boolean;
+    set allowHalf(value: boolean);
+    get allowClear(): boolean;
+    set allowClear(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readOnly(): boolean;
+    set readOnly(value: boolean);
+    get character(): string;
+    set character(value: string);
+    get tooltips(): readonly string[];
+    set tooltips(value: readonly string[]);
+    private _normalize;
+    private _reflectValue;
+    private _render;
+    private _updateVisuals;
+    private _pointerValue;
+    private _handlePointerMove;
+    private _handleClick;
+    private _handleKeydown;
+    private _setHover;
+    private _commit;
+    private _valueText;
+}
+export declare function defineRateComponents(): void;