@haiyue/ui 0.1.2 → 0.2.1

package/dist/virtual-mouse.js

@@ -0,0 +1,358 @@
+const DEFAULT_DURATION = 320;
+const DEFAULT_EASING = 'cubic-bezier(0.22, 1, 0.36, 1)';
+const BUTTONS = ['left', 'middle', 'right'];
+const STATES = ['idle', 'left-down', 'middle-down', 'right-down'];
+function finiteNumber(value, fallback) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+}
+function normalizeButton(button) {
+    if (!BUTTONS.includes(button))
+        throw new RangeError(`Unsupported virtual mouse button: ${String(button)}`);
+    return button;
+}
+/** Fixed, non-interactive cursor visual for tutorials, playback, and remote-operation feedback. */
+export class HYVirtualMouse extends HTMLElement {
+    _cursor = document.createElement('span');
+    _shape = document.createElement('span');
+    _image = document.createElement('img');
+    _indicator = document.createElement('span');
+    _pressed = new Set();
+    _images = {};
+    _x = 0;
+    _y = 0;
+    _reflectingPosition = false;
+    _moveTimer = null;
+    _resolveMove = null;
+    _delays = new Map();
+    static get observedAttributes() {
+        return [
+            'x', 'y', 'animated', 'duration', 'easing',
+            'idle-image', 'left-down-image', 'middle-down-image', 'right-down-image',
+        ];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        position: fixed !important;
+        z-index: var(--hy-virtual-mouse-z-index, 2147483000);
+        inset: 0 auto auto 0;
+        display: block;
+        width: 0;
+        height: 0;
+        overflow: visible;
+        pointer-events: none !important;
+        transform: translate3d(var(--_hy-virtual-mouse-x, 0px), var(--_hy-virtual-mouse-y, 0px), 0);
+        transition-property: transform;
+        transition-duration: 0ms;
+        transition-timing-function: var(--_hy-virtual-mouse-easing, cubic-bezier(0.22, 1, 0.36, 1));
+        will-change: transform;
+        contain: layout style;
+      }
+      :host([hidden]) { display: none !important; }
+      .cursor {
+        position: absolute;
+        width: var(--hy-virtual-mouse-width, 24px);
+        height: var(--hy-virtual-mouse-height, 30px);
+        transform: translate(
+          calc(-1 * var(--hy-virtual-mouse-hotspot-x, 2px)),
+          calc(-1 * var(--hy-virtual-mouse-hotspot-y, 2px))
+        );
+        transform-origin: var(--hy-virtual-mouse-hotspot-x, 2px) var(--hy-virtual-mouse-hotspot-y, 2px);
+        transition: scale 90ms ease;
+      }
+      :host([data-state$="-down"]) .cursor { scale: var(--hy-virtual-mouse-pressed-scale, 0.9); }
+      .shape {
+        position: absolute;
+        inset: 0;
+        display: block;
+        box-sizing: border-box;
+        border: var(--hy-virtual-mouse-border-width, 1.5px) solid var(--hy-virtual-mouse-border-color, #f5fbff);
+        clip-path: polygon(5% 0, 88% 70%, 55% 74%, 72% 100%, 51% 100%, 36% 76%, 10% 96%);
+        background: var(--hy-virtual-mouse-idle-background, linear-gradient(145deg, #78d7ff, #5265e8));
+        filter: drop-shadow(var(--hy-virtual-mouse-shadow, 0 3px 5px rgba(4, 9, 28, 0.5)));
+      }
+      :host([data-state="left-down"]) .shape {
+        background: var(--hy-virtual-mouse-left-down-background, linear-gradient(145deg, #b5f1ff, #6d74ff));
+      }
+      :host([data-state="middle-down"]) .shape {
+        background: var(--hy-virtual-mouse-middle-down-background, linear-gradient(145deg, #d6c4ff, #7654e8));
+      }
+      :host([data-state="right-down"]) .shape {
+        background: var(--hy-virtual-mouse-right-down-background, linear-gradient(145deg, #f4c8ff, #9156dc));
+      }
+      .image {
+        position: absolute;
+        inset: 0;
+        display: none;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        object-position: left top;
+        filter: drop-shadow(var(--hy-virtual-mouse-shadow, 0 3px 5px rgba(4, 9, 28, 0.5)));
+        user-select: none;
+      }
+      .cursor[data-image-ready] .shape { display: none; }
+      .cursor[data-image-ready] .image { display: block; }
+      .indicator {
+        position: absolute;
+        top: var(--hy-virtual-mouse-hotspot-y, 2px);
+        left: var(--hy-virtual-mouse-hotspot-x, 2px);
+        width: var(--hy-virtual-mouse-click-size, 28px);
+        height: var(--hy-virtual-mouse-click-size, 28px);
+        border: 2px solid var(--hy-virtual-mouse-click-color, #83dcff);
+        border-radius: 50%;
+        opacity: 0;
+        translate: -50% -50%;
+      }
+      .indicator.pulse { animation: hy-virtual-mouse-click 360ms ease-out; }
+      @keyframes hy-virtual-mouse-click {
+        0% { opacity: 0.9; scale: 0.3; }
+        100% { opacity: 0; scale: 1.35; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host { transition-duration: 0ms !important; }
+        .cursor { transition-duration: 0ms; }
+        .indicator.pulse { animation-duration: 1ms; }
+      }
+    `;
+        this._cursor.className = 'cursor';
+        this._cursor.part.add('cursor');
+        this._shape.className = 'shape';
+        this._shape.part.add('shape');
+        this._image.className = 'image';
+        this._image.part.add('image');
+        this._image.alt = '';
+        this._image.draggable = false;
+        this._indicator.className = 'indicator';
+        this._indicator.part.add('indicator');
+        this._image.addEventListener('load', () => { this._cursor.dataset.imageReady = ''; });
+        this._image.addEventListener('error', () => { delete this._cursor.dataset.imageReady; });
+        this._indicator.addEventListener('animationend', () => this._indicator.classList.remove('pulse'));
+        this._cursor.append(this._shape, this._image, this._indicator);
+        root.append(style, this._cursor);
+    }
+    connectedCallback() {
+        this.setAttribute('aria-hidden', 'true');
+        this._x = finiteNumber(this.getAttribute('x'), this._x);
+        this._y = finiteNumber(this.getAttribute('y'), this._y);
+        this._applyPosition();
+        this._syncState();
+    }
+    disconnectedCallback() {
+        this._cancelMove();
+        for (const cancel of this._delays.values())
+            cancel();
+        this._delays.clear();
+        this._pressed.clear();
+    }
+    attributeChangedCallback(name) {
+        if ((name === 'x' || name === 'y') && !this._reflectingPosition) {
+            this._x = finiteNumber(this.getAttribute('x'), this._x);
+            this._y = finiteNumber(this.getAttribute('y'), this._y);
+            this._applyPosition();
+        }
+        else if (name.endsWith('-image')) {
+            this._syncImage();
+        }
+    }
+    get x() { return this._x; }
+    set x(value) { this._setPosition(finiteNumber(value, this._x), this._y); }
+    get y() { return this._y; }
+    set y(value) { this._setPosition(this._x, finiteNumber(value, this._y)); }
+    get animated() { return this.hasAttribute('animated'); }
+    set animated(value) { this.toggleAttribute('animated', Boolean(value)); }
+    get duration() {
+        return Math.min(60_000, Math.max(0, finiteNumber(this.getAttribute('duration'), DEFAULT_DURATION)));
+    }
+    set duration(value) {
+        this.setAttribute('duration', String(Math.min(60_000, Math.max(0, finiteNumber(value, DEFAULT_DURATION)))));
+    }
+    get easing() { return this.getAttribute('easing')?.trim() || DEFAULT_EASING; }
+    set easing(value) {
+        const normalized = String(value).trim();
+        if (normalized)
+            this.setAttribute('easing', normalized);
+        else
+            this.removeAttribute('easing');
+    }
+    get state() { return this._currentState(); }
+    get pressedButtons() { return BUTTONS.filter(button => this._pressed.has(button)); }
+    get images() { return { ...this._images }; }
+    set images(value) {
+        this._images = Object.fromEntries(STATES.flatMap(state => {
+            const source = value?.[state]?.trim();
+            return source ? [[state, source]] : [];
+        }));
+        this._syncImage();
+    }
+    setStateImage(state, source) {
+        if (!STATES.includes(state))
+            throw new RangeError(`Unsupported virtual mouse state: ${String(state)}`);
+        const normalized = source?.trim();
+        if (normalized)
+            this._images[state] = normalized;
+        else
+            delete this._images[state];
+        this._syncImage();
+    }
+    show() { this.hidden = false; }
+    hide() { this.hidden = true; }
+    moveBy(deltaX, deltaY, options = {}) {
+        return this.moveTo(this._x + finiteNumber(deltaX, 0), this._y + finiteNumber(deltaY, 0), options);
+    }
+    moveTo(x, y, options = {}) {
+        const from = { x: this._x, y: this._y };
+        const to = { x: finiteNumber(x, this._x), y: finiteNumber(y, this._y) };
+        const requestedDuration = Math.min(60_000, Math.max(0, finiteNumber(options.duration, this.duration)));
+        const reducedMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const animated = (options.animate ?? this.animated) && requestedDuration > 0 && !reducedMotion;
+        const duration = animated ? requestedDuration : 0;
+        const detail = { from, to, animated, duration };
+        this._cancelMove();
+        this.dispatchEvent(new CustomEvent('virtual-mouse-move-start', {
+            bubbles: true, composed: true, detail,
+        }));
+        this.style.transitionDuration = `${duration}ms`;
+        this.style.setProperty('--_hy-virtual-mouse-easing', options.easing?.trim() || this.easing);
+        this._setPosition(to.x, to.y);
+        this.dispatchEvent(new CustomEvent('virtual-mouse-move', {
+            bubbles: true, composed: true, detail,
+        }));
+        if (!animated) {
+            this.dispatchEvent(new CustomEvent('virtual-mouse-move-end', {
+                bubbles: true, composed: true, detail,
+            }));
+            return Promise.resolve();
+        }
+        return new Promise(resolve => {
+            this._resolveMove = resolve;
+            this._moveTimer = window.setTimeout(() => {
+                this._moveTimer = null;
+                this._resolveMove = null;
+                this.style.transitionDuration = '0ms';
+                resolve();
+                this.dispatchEvent(new CustomEvent('virtual-mouse-move-end', {
+                    bubbles: true, composed: true, detail,
+                }));
+            }, duration);
+        });
+    }
+    press(button = 'left') {
+        const normalized = normalizeButton(button);
+        if (this._pressed.has(normalized))
+            return;
+        this._pressed.add(normalized);
+        this._syncState();
+        this._dispatchButtonEvent('virtual-mouse-down', normalized);
+    }
+    release(button = 'left') {
+        const normalized = normalizeButton(button);
+        if (!this._pressed.delete(normalized))
+            return;
+        this._syncState();
+        this._dispatchButtonEvent('virtual-mouse-up', normalized);
+    }
+    releaseAll() {
+        for (const button of [...this.pressedButtons])
+            this.release(button);
+    }
+    async click(button = 'left', options = {}) {
+        const normalized = normalizeButton(button);
+        this.press(normalized);
+        await this._wait(Math.min(60_000, Math.max(0, finiteNumber(options.holdDuration, 90))));
+        this.release(normalized);
+        this._pulse();
+        this._dispatchButtonEvent('virtual-mouse-click', normalized);
+    }
+    leftClick(options = {}) { return this.click('left', options); }
+    middleClick(options = {}) { return this.click('middle', options); }
+    rightClick(options = {}) { return this.click('right', options); }
+    _setPosition(x, y) {
+        this._x = x;
+        this._y = y;
+        this._reflectingPosition = true;
+        this.setAttribute('x', String(x));
+        this.setAttribute('y', String(y));
+        this._reflectingPosition = false;
+        this._applyPosition();
+    }
+    _applyPosition() {
+        this.style.setProperty('--_hy-virtual-mouse-x', `${this._x}px`);
+        this.style.setProperty('--_hy-virtual-mouse-y', `${this._y}px`);
+    }
+    _currentState() {
+        if (this._pressed.has('right'))
+            return 'right-down';
+        if (this._pressed.has('middle'))
+            return 'middle-down';
+        if (this._pressed.has('left'))
+            return 'left-down';
+        return 'idle';
+    }
+    _syncState() {
+        this.dataset.state = this._currentState();
+        this._syncImage();
+    }
+    _syncImage() {
+        const state = this._currentState();
+        const source = this._images[state]
+            ?? this.getAttribute(`${state}-image`)?.trim()
+            ?? this._images.idle
+            ?? this.getAttribute('idle-image')?.trim()
+            ?? '';
+        delete this._cursor.dataset.imageReady;
+        if (source) {
+            if (this._image.getAttribute('src') !== source)
+                this._image.src = source;
+            else if (this._image.complete && this._image.naturalWidth > 0)
+                this._cursor.dataset.imageReady = '';
+        }
+        else {
+            this._image.removeAttribute('src');
+        }
+    }
+    _dispatchButtonEvent(name, button) {
+        this.dispatchEvent(new CustomEvent(name, {
+            bubbles: true,
+            composed: true,
+            detail: { button, buttons: this.pressedButtons, state: this.state, x: this._x, y: this._y },
+        }));
+    }
+    _pulse() {
+        this._indicator.classList.remove('pulse');
+        void this._indicator.offsetWidth;
+        this._indicator.classList.add('pulse');
+    }
+    _cancelMove() {
+        if (this._moveTimer !== null)
+            window.clearTimeout(this._moveTimer);
+        this._moveTimer = null;
+        const resolve = this._resolveMove;
+        this._resolveMove = null;
+        resolve?.();
+        this.style.transitionDuration = '0ms';
+    }
+    _wait(duration) {
+        if (duration === 0)
+            return Promise.resolve();
+        return new Promise(resolve => {
+            const timer = window.setTimeout(() => {
+                this._delays.delete(timer);
+                resolve();
+            }, duration);
+            this._delays.set(timer, () => {
+                window.clearTimeout(timer);
+                resolve();
+            });
+        });
+    }
+}
+export function defineVirtualMouseComponents() {
+    if (!customElements.get('hy-virtual-mouse'))
+        customElements.define('hy-virtual-mouse', HYVirtualMouse);
+}
+//# sourceMappingURL=virtual-mouse.js.map

package/dist/watermark.d.ts

@@ -0,0 +1,44 @@
+/** Repeating, non-interactive text or image watermark over slotted content. */
+export declare class HYWatermark extends HTMLElement {
+    private readonly _svg;
+    private readonly _pattern;
+    private readonly _patternId;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get content(): string;
+    set content(value: string | readonly string[]);
+    get image(): string;
+    set image(value: string);
+    get rotate(): number;
+    set rotate(value: number);
+    get gapX(): number;
+    set gapX(value: number);
+    get gapY(): number;
+    set gapY(value: number);
+    get offsetX(): number;
+    set offsetX(value: number);
+    get offsetY(): number;
+    set offsetY(value: number);
+    get markWidth(): number;
+    set markWidth(value: number);
+    get markHeight(): number;
+    set markHeight(value: number);
+    get fontSize(): number;
+    set fontSize(value: number);
+    get fontFamily(): string;
+    set fontFamily(value: string);
+    get fontWeight(): string;
+    set fontWeight(value: string | number);
+    get color(): string;
+    set color(value: string);
+    get opacity(): number;
+    set opacity(value: number);
+    get zIndex(): number;
+    set zIndex(value: number);
+    private _render;
+    private _renderImage;
+    private _renderText;
+}
+export declare function defineWatermarkComponents(): void;

package/dist/watermark.js

@@ -0,0 +1,148 @@
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+function finiteNumber(value, fallback, min, max) {
+    const number = Number(value);
+    return Number.isFinite(number) ? Math.min(max, Math.max(min, number)) : fallback;
+}
+function svgElement(name) {
+    return document.createElementNS(SVG_NAMESPACE, name);
+}
+/** Repeating, non-interactive text or image watermark over slotted content. */
+export class HYWatermark extends HTMLElement {
+    _svg = svgElement('svg');
+    _pattern = svgElement('pattern');
+    _patternId = `hy-watermark-${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
+    static get observedAttributes() {
+        return ['content', 'image', 'rotate', 'gap-x', 'gap-y', 'offset-x', 'offset-y', 'mark-width', 'mark-height', 'font-size', 'font-family', 'font-weight', 'color', 'opacity', 'z-index'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        const content = document.createElement('div');
+        const slot = document.createElement('slot');
+        style.textContent = `
+      :host { position: relative; display: block; min-width: 0; isolation: isolate; }
+      .content { position: relative; z-index: 0; min-width: 0; }
+      svg { position: absolute; z-index: var(--_hy-watermark-z-index, 9); inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; user-select: none; }
+      svg[hidden] { display: none; }
+      .mark-text { fill: var(--_hy-watermark-color, var(--hy-watermark-color, currentColor)); }
+    `;
+        content.className = 'content';
+        content.part.add('content');
+        content.append(slot);
+        this._svg.classList.add('overlay');
+        this._svg.part.add('overlay');
+        this._svg.setAttribute('aria-hidden', 'true');
+        this._svg.setAttribute('focusable', 'false');
+        const definitions = svgElement('defs');
+        this._pattern.id = this._patternId;
+        this._pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+        definitions.append(this._pattern);
+        const fill = svgElement('rect');
+        fill.setAttribute('width', '100%');
+        fill.setAttribute('height', '100%');
+        fill.setAttribute('fill', `url(#${this._patternId})`);
+        this._svg.append(definitions, fill);
+        root.append(style, content, this._svg);
+    }
+    connectedCallback() { this._render(); }
+    attributeChangedCallback() { this._render(); }
+    get content() { return this.getAttribute('content') ?? ''; }
+    set content(value) { this.setAttribute('content', Array.isArray(value) ? value.map(String).join('\n') : String(value)); }
+    get image() { return this.getAttribute('image') ?? ''; }
+    set image(value) { const normalized = String(value).trim(); if (normalized)
+        this.setAttribute('image', normalized);
+    else
+        this.removeAttribute('image'); }
+    get rotate() { return finiteNumber(this.getAttribute('rotate'), -22, -180, 180); }
+    set rotate(value) { this.setAttribute('rotate', String(finiteNumber(value, -22, -180, 180))); }
+    get gapX() { return finiteNumber(this.getAttribute('gap-x'), 100, 0, 1000); }
+    set gapX(value) { this.setAttribute('gap-x', String(finiteNumber(value, 100, 0, 1000))); }
+    get gapY() { return finiteNumber(this.getAttribute('gap-y'), 100, 0, 1000); }
+    set gapY(value) { this.setAttribute('gap-y', String(finiteNumber(value, 100, 0, 1000))); }
+    get offsetX() { return finiteNumber(this.getAttribute('offset-x'), 0, -2000, 2000); }
+    set offsetX(value) { this.setAttribute('offset-x', String(finiteNumber(value, 0, -2000, 2000))); }
+    get offsetY() { return finiteNumber(this.getAttribute('offset-y'), 0, -2000, 2000); }
+    set offsetY(value) { this.setAttribute('offset-y', String(finiteNumber(value, 0, -2000, 2000))); }
+    get markWidth() { return finiteNumber(this.getAttribute('mark-width'), 120, 16, 1000); }
+    set markWidth(value) { this.setAttribute('mark-width', String(finiteNumber(value, 120, 16, 1000))); }
+    get markHeight() { return finiteNumber(this.getAttribute('mark-height'), 64, 16, 1000); }
+    set markHeight(value) { this.setAttribute('mark-height', String(finiteNumber(value, 64, 16, 1000))); }
+    get fontSize() { return finiteNumber(this.getAttribute('font-size'), 14, 6, 96); }
+    set fontSize(value) { this.setAttribute('font-size', String(finiteNumber(value, 14, 6, 96))); }
+    get fontFamily() { return this.getAttribute('font-family') || 'system-ui, sans-serif'; }
+    set fontFamily(value) { this.setAttribute('font-family', String(value)); }
+    get fontWeight() { return this.getAttribute('font-weight') || '500'; }
+    set fontWeight(value) { this.setAttribute('font-weight', String(value)); }
+    get color() { return this.getAttribute('color') ?? ''; }
+    set color(value) { const normalized = String(value).trim(); if (normalized)
+        this.setAttribute('color', normalized);
+    else
+        this.removeAttribute('color'); }
+    get opacity() { return finiteNumber(this.getAttribute('opacity'), 0.16, 0, 1); }
+    set opacity(value) { this.setAttribute('opacity', String(finiteNumber(value, 0.16, 0, 1))); }
+    get zIndex() { return Math.round(finiteNumber(this.getAttribute('z-index'), 9, -1000, 100000)); }
+    set zIndex(value) { this.setAttribute('z-index', String(Math.round(finiteNumber(value, 9, -1000, 100000)))); }
+    _render() {
+        if (!this.isConnected)
+            return;
+        const hasMark = Boolean(this.image || this.content);
+        this._svg.toggleAttribute('hidden', !hasMark);
+        this._pattern.replaceChildren();
+        this.style.setProperty('--_hy-watermark-z-index', String(this.zIndex));
+        if (this.color)
+            this.style.setProperty('--_hy-watermark-color', this.color);
+        else
+            this.style.removeProperty('--_hy-watermark-color');
+        if (!hasMark)
+            return;
+        const tileWidth = this.markWidth + this.gapX;
+        const tileHeight = this.markHeight + this.gapY;
+        this._pattern.setAttribute('x', String(this.offsetX));
+        this._pattern.setAttribute('y', String(this.offsetY));
+        this._pattern.setAttribute('width', String(tileWidth));
+        this._pattern.setAttribute('height', String(tileHeight));
+        const group = svgElement('g');
+        group.setAttribute('opacity', String(this.opacity));
+        group.setAttribute('transform', `rotate(${this.rotate} ${this.markWidth / 2} ${this.markHeight / 2})`);
+        if (this.image)
+            this._renderImage(group);
+        else
+            this._renderText(group);
+        this._pattern.append(group);
+    }
+    _renderImage(group) {
+        const image = svgElement('image');
+        image.part.add('mark', 'image');
+        image.setAttribute('href', this.image);
+        image.setAttribute('x', '0');
+        image.setAttribute('y', '0');
+        image.setAttribute('width', String(this.markWidth));
+        image.setAttribute('height', String(this.markHeight));
+        image.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        group.append(image);
+    }
+    _renderText(group) {
+        const lines = this.content.split(/\r?\n/u);
+        const lineHeight = this.fontSize * 1.35;
+        const startY = this.markHeight / 2 - ((lines.length - 1) * lineHeight) / 2;
+        const text = svgElement('text');
+        text.classList.add('mark-text');
+        text.part.add('mark', 'text');
+        text.setAttribute('x', String(this.markWidth / 2));
+        text.setAttribute('y', String(startY));
+        text.setAttribute('text-anchor', 'middle');
+        text.setAttribute('dominant-baseline', 'middle');
+        text.setAttribute('font-size', String(this.fontSize));
+        text.setAttribute('font-family', this.fontFamily);
+        text.setAttribute('font-weight', this.fontWeight);
+        lines.forEach((line, index) => { const span = svgElement('tspan'); span.setAttribute('x', String(this.markWidth / 2)); if (index > 0)
+            span.setAttribute('dy', String(lineHeight)); span.textContent = line; text.append(span); });
+        group.append(text);
+    }
+}
+export function defineWatermarkComponents() {
+    if (!customElements.get('hy-watermark'))
+        customElements.define('hy-watermark', HYWatermark);
+}
+//# sourceMappingURL=watermark.js.map