@haiyue/ui 0.1.2 → 0.2.2

package/dist/adapters/web/controls.d.ts

@@ -0,0 +1,19 @@
+import type { HYNode } from '../../core/types.js';
+import type { HYWebControl, HYWebControlContext } from './types.js';
+/** Registration is explicit and limited to the reused components. */
+export declare function definePortableWebComponents(): void;
+export declare const componentTags: Readonly<{
+    Checkbox: "hy-checkbox";
+    RadioGroup: "div";
+    Rate: "hy-rate";
+    Badge: "hy-badge";
+    Divider: "hy-divider";
+    Button: "hy-button";
+    Toggle: "hy-checkbox";
+    Select: "hy-select";
+    Tabs: "hy-tabs";
+    TextInput: "hy-input";
+    Slider: "hy-range";
+    Dialog: "hy-dialog";
+}>;
+export declare function createControl(node: HYNode, context: HYWebControlContext, revision: number): HYWebControl | undefined;

package/dist/adapters/web/controls.js

@@ -0,0 +1,307 @@
+import { hyIconSvg } from '../../portable/icons.js';
+import { HYButtonController, HYToggleController, HYSliderController } from '../../core/actions.js';
+import { HYSelectionController } from '../../core/selection.js';
+import { HYTextController } from '../../core/text.js';
+import { equalData } from '../../core/data.js';
+import { defineButtonComponents } from '../../button.js';
+import { defineCheckboxComponents } from '../../checkbox.js';
+import { HYSelect, defineSelectComponents } from '../../select.js';
+import { HYTabs, defineTabsComponents } from '../../tabs.js';
+import { HYInput, defineInputComponents } from '../../input.js';
+import { defineRangeComponents } from '../../range.js';
+import { defineDialogComponents } from '../../dialog.js';
+import { defineRadioComponents } from '../../radio.js';
+import { defineRateComponents } from '../../rate.js';
+import { defineBadgeComponents } from '../../badge.js';
+import { defineDividerComponents } from '../../divider.js';
+import { attribute, flag, focusable } from './dom.js';
+/** Registration is explicit and limited to the reused components. */
+export function definePortableWebComponents() {
+    defineButtonComponents();
+    defineCheckboxComponents();
+    defineSelectComponents();
+    defineTabsComponents();
+    defineRadioComponents();
+    defineRateComponents();
+    defineBadgeComponents();
+    defineDividerComponents();
+    defineInputComponents();
+    defineRangeComponents();
+    defineDialogComponents();
+}
+export const componentTags = Object.freeze({ Checkbox: 'hy-checkbox', RadioGroup: 'div', Rate: 'hy-rate', Badge: 'hy-badge', Divider: 'hy-divider', Button: 'hy-button', Toggle: 'hy-checkbox', Select: 'hy-select', Tabs: 'hy-tabs', TextInput: 'hy-input', Slider: 'hy-range', Dialog: 'hy-dialog' });
+const selectionProps = ({ value, options, disabled }) => ({ value, options, ...(disabled === undefined ? {} : { disabled }) });
+let radioGroupSequence = 0;
+function toggleProps(node) { const { checked, disabled, visible } = node.props; return { checked, ...(disabled === undefined ? {} : { disabled }), ...(visible === undefined ? {} : { visible }) }; }
+export function createControl(node, context, revision) {
+    const { host, listen, emit } = context;
+    let reason = 'accessibility', transaction = 0;
+    listen(host, 'pointerdown', () => { reason = 'pointer'; }, true);
+    listen(host, 'keydown', () => { reason = 'keyboard'; }, true);
+    if (node.kind === 'Badge' || node.kind === 'Divider')
+        return { update(next) { if (next.kind === 'Badge') {
+                flag(host, 'literal', true);
+                attribute(host, 'count', next.props.text);
+            } ; if (next.kind === 'Divider')
+                attribute(host, 'label', next.props.text); }, focus() { }, dispose() { } };
+    if (node.kind === 'RadioGroup') {
+        const controller = new HYSelectionController(node.key, selectionProps(node.props), emit);
+        let props = node.props;
+        const buttons = new Map(), groupName = `hy-portable-radio-${++radioGroupSequence}`;
+        host.setAttribute('role', 'radiogroup');
+        const render = () => { for (const [value, button] of buttons) {
+            flag(button, 'checked', props.value === value);
+            flag(button, 'disabled', !!props.disabled || !!props.options.find(o => o.value === value)?.disabled);
+        } };
+        listen(host, 'checked-change', event => { const detail = event.detail; if (detail.checked)
+            controller.choose(detail.value, reason); render(); });
+        return { update(next) {
+                if (next.kind !== 'RadioGroup')
+                    return;
+                props = next.props;
+                controller.update(selectionProps(props));
+                for (const [value, button] of buttons)
+                    if (!props.options.some(o => o.value === value)) {
+                        button.remove();
+                        buttons.delete(value);
+                    }
+                for (const option of props.options) {
+                    let button = buttons.get(option.value);
+                    if (!button) {
+                        button = document.createElement('hy-radio');
+                        buttons.set(option.value, button);
+                    }
+                    attribute(button, 'value', option.value);
+                    attribute(button, 'label', option.label);
+                    attribute(button, 'name', groupName);
+                    host.append(button);
+                }
+                render();
+            },
+            focus() { focusable(host)[0]?.focus(); }, dispose() { controller.dispose(); buttons.clear(); } };
+    }
+    if (node.kind === 'Rate') {
+        let props = node.props, disposed = false, choosing = false;
+        const restore = () => attribute(host, 'value', String(props.value));
+        listen(host, 'value-change', event => {
+            const value = event.detail.value;
+            if (disposed || choosing || props.disabled || props.readOnly || value === props.value)
+                return;
+            choosing = true;
+            const tx = ++transaction;
+            try {
+                emit({ key: node.key, type: 'valueChange', value, reason, transaction: tx });
+                if (!disposed)
+                    emit({ key: node.key, type: 'commit', value, reason, transaction: tx });
+            }
+            finally {
+                choosing = false;
+                if (!disposed)
+                    restore();
+            }
+        });
+        return { update(next) { if (next.kind !== 'Rate')
+                return; props = next.props; attribute(host, 'count', String(props.count)); flag(host, 'disabled', !!props.disabled); flag(host, 'readonly', !!props.readOnly); restore(); }, focus() { focusable(host)[0]?.focus(); }, dispose() { disposed = true; } };
+    }
+    if (node.kind === 'Button') {
+        const button = host;
+        const label = document.createElement('span');
+        label.dataset.hyButtonLabel = '';
+        button.append(label);
+        const icon = document.createElement('span');
+        icon.slot = 'icon';
+        icon.setAttribute('aria-hidden', 'true');
+        let lastIcon;
+        const controller = new HYButtonController(node.key, node.props, emit);
+        listen(button, 'click', () => controller.activate(reason));
+        return {
+            update(next) {
+                if (next.kind !== 'Button')
+                    return;
+                controller.update(next.props);
+                if (label.textContent !== next.props.text)
+                    label.textContent = next.props.text;
+                attribute(button, 'data-hy-variant', next.props.variant ?? 'secondary');
+                attribute(button, 'data-hy-size', next.props.size ?? 'regular');
+                if (lastIcon !== next.props.icon) {
+                    icon.innerHTML = next.props.icon ? hyIconSvg(next.props.icon) : '';
+                    lastIcon = next.props.icon;
+                }
+                if (next.props.icon) {
+                    if (!icon.parentNode)
+                        button.append(icon);
+                }
+                else
+                    icon.remove();
+                flag(button, 'icon-only', !!next.props.icon && !next.props.text);
+                flag(button, 'loading', !!next.props.busy);
+                flag(button, 'disabled', !!next.props.disabled || !!next.props.busy);
+                attribute(button, 'aria-busy', next.props.busy ? 'true' : undefined);
+            },
+            focus() { button.shadowRoot.querySelector('button').focus(); }, dispose() { controller.dispose(); },
+        };
+    }
+    if (node.kind === 'Toggle' || node.kind === 'Checkbox') {
+        const toggle = host;
+        const controller = new HYToggleController(node.key, toggleProps(node), emit);
+        listen(toggle, 'checked-change', event => {
+            controller.choose(event.detail.checked, reason);
+            // The app may reject a discrete change; restore its latest accepted value.
+            flag(toggle, 'checked', accepted);
+        });
+        let accepted = node.props.checked;
+        return { update(next) {
+                if (next.kind !== 'Toggle' && next.kind !== 'Checkbox')
+                    return;
+                accepted = next.props.checked;
+                controller.update(toggleProps(next));
+                flag(toggle, 'checked', accepted);
+                flag(toggle, 'disabled', !!next.props.disabled);
+                attribute(toggle, 'label', next.kind === 'Checkbox' ? next.props.text : next.props.a11y?.label);
+            }, focus() { toggle.shadowRoot.querySelector('input').focus(); }, dispose() { controller.dispose(); } };
+    }
+    if (node.kind === 'Select' || node.kind === 'Tabs') {
+        const select = host;
+        if (select instanceof HYTabs)
+            select.controlled = true;
+        const controller = new HYSelectionController(node.key, selectionProps(node.props), emit);
+        let previous;
+        controller.attach({
+            apply(props) {
+                if (!previous || !!props.disabled !== !!previous.disabled || !equalData(props.options, previous.options))
+                    select.options = props.options.map(option => ({ ...option, disabled: !!option.disabled || !!props.disabled }));
+                if (select.value !== props.value)
+                    select.value = props.value;
+                if (select instanceof HYSelect)
+                    flag(select, 'disabled', !!props.disabled);
+                attribute(select, 'aria-disabled', props.disabled ? 'true' : undefined);
+                previous = props;
+            },
+            listen(callback) { return listen(select, node.kind === 'Select' ? 'value-change' : 'tab-change', event => callback(event.detail.value, reason)); },
+        });
+        // Keep the existing component's LTR behavior; mirror horizontal navigation only
+        // for this adapter's RTL surface. Home/End retain their logical meanings.
+        if (select instanceof HYTabs)
+            listen(select, 'keydown', event => {
+                const key = event;
+                if (!['ArrowLeft', 'ArrowRight'].includes(key.key) || getComputedStyle(select).direction !== 'rtl')
+                    return;
+                const button = key.composedPath()[0];
+                if (!(button instanceof HTMLButtonElement) || button.getAttribute('role') !== 'tab')
+                    return;
+                const enabled = previous?.options.filter(option => !option.disabled) ?? [];
+                if (!enabled.length)
+                    return;
+                key.preventDefault();
+                key.stopImmediatePropagation();
+                const position = enabled.findIndex(option => option.value === button.dataset.value);
+                const next = enabled[(position + (key.key === 'ArrowLeft' ? 1 : -1) + enabled.length) % enabled.length];
+                controller.choose(next.value, 'keyboard');
+                const target = [...select.shadowRoot.querySelectorAll('button')].find(item => item.dataset.value === select.value);
+                target?.focus();
+            }, true);
+        return { update(next) { if (next.kind === 'Select' || next.kind === 'Tabs') {
+                if (next.kind === 'Tabs')
+                    attribute(host, 'data-hy-variant', next.props.variant ?? 'underline');
+                controller.update(selectionProps(next.props));
+            } },
+            focus() { if (select instanceof HYSelect)
+                select.shadowRoot.querySelector('select').focus();
+            else
+                (select.shadowRoot.querySelector('button[tabindex="0"]') ?? select).focus(); },
+            dispose() { controller.dispose(); } };
+    }
+    if (node.kind === 'TextInput' || node.kind === 'TextArea')
+        return textControl(node, context, revision);
+    if (node.kind === 'Slider') {
+        const range = host;
+        range.controlled = true;
+        const controller = new HYSliderController(node.key, node.props, emit);
+        listen(range, 'value-input', event => controller.change(event.detail.value, reason));
+        listen(range, 'value-change', event => { controller.change(event.detail.value, reason); controller.commit(reason); if (range.value !== controller.value)
+            range.value = controller.value; });
+        listen(range, 'value-cancel', () => { controller.cancel(reason); if (range.value !== controller.value)
+            range.value = controller.value; });
+        return { update(next) {
+                if (next.kind !== 'Slider')
+                    return;
+                controller.update(next.props);
+                for (const field of ['min', 'max', 'step'])
+                    attribute(range, field, String(next.props[field]));
+                flag(range, 'disabled', !!next.props.disabled);
+                if (range.value !== next.props.value)
+                    range.value = next.props.value;
+            }, focus() { range.focus(); }, dispose() { controller.dispose(); } };
+    }
+    if (node.kind === 'Dialog') {
+        const dialog = host;
+        dialog.controlled = true;
+        let dismissible = node.props.dismissible !== false;
+        listen(dialog, 'dialog-cancel', event => {
+            event.preventDefault();
+            const detail = event.detail;
+            if (!dismissible)
+                return;
+            emit({ key: node.key, type: 'cancel', reason: detail?.reason === 'escape' ? 'keyboard' : reason, transaction: ++transaction });
+        });
+        return { update(next) {
+                if (next.kind !== 'Dialog')
+                    return;
+                dismissible = next.props.dismissible !== false;
+                attribute(dialog, 'heading', next.props.title);
+                flag(dialog, 'dismissible', dismissible);
+                dialog.shadowRoot.querySelector('button').style.display = dismissible ? '' : 'none';
+            },
+            focus() { (focusable(dialog.shadowRoot)[0] ?? dialog.shadowRoot.querySelector('dialog')).focus(); }, dispose() { dialog.open = false; } };
+    }
+    return undefined;
+}
+function textControl(node, context, revision) {
+    const { host, listen, emit } = context;
+    const input = host instanceof HYInput ? host.shadowRoot.querySelector('input') : host;
+    const controller = new HYTextController(node.key, textProps(node), emit, node.kind === 'TextArea', revision);
+    let confirming = false, timer;
+    controller.attach({ apply(state) {
+            // Write the draft before attributes whose legacy sync method reads the value back.
+            if (host instanceof HYInput) {
+                // Avoid the legacy public setter's unconditional native value assignment:
+                // even assigning the same value can split the browser's undo typing group.
+                attribute(host, 'value', state.value);
+                if (input.value !== state.value)
+                    input.value = state.value;
+                attribute(host, 'type', state.props.secure ? 'password' : 'text');
+                flag(host, 'disabled', !!state.props.disabled);
+                flag(host, 'readonly', !!state.props.readOnly);
+                attribute(host, 'placeholder', state.props.placeholder);
+            }
+            else {
+                if (input.value !== state.value)
+                    input.value = state.value;
+                input.disabled = !!state.props.disabled;
+                input.readOnly = !!state.props.readOnly;
+                attribute(input, 'placeholder', state.props.placeholder);
+            }
+        } });
+    // Let HYInput synchronize its native draft before our controlled view reads it.
+    // A second attribute sync during the same native input breaks Chromium's undo grouping.
+    listen(host, 'input', () => controller.input(input.value));
+    listen(input, 'compositionstart', () => { if (timer)
+        clearTimeout(timer); confirming = false; controller.compositionStart(); });
+    listen(input, 'compositionend', () => { confirming = true; controller.compositionEnd(input.value); timer = setTimeout(() => { confirming = false; timer = undefined; }, 0); });
+    listen(input, 'keydown', event => { const key = event; if (key.key === 'Enter')
+        controller.enter(confirming || key.isComposing || key.keyCode === 229); });
+    // change is often dispatched before blur; both funnel through the controller's single active edit.
+    listen(input, 'change', () => controller.commit());
+    listen(input, 'focus', () => controller.focus());
+    listen(input, 'blur', () => controller.blur());
+    return { update(next, revision) { if (next.kind === 'TextInput' || next.kind === 'TextArea')
+            controller.update(textProps(next), revision); }, focus() { input.focus({ preventScroll: true }); },
+        dispose() { if (timer)
+            clearTimeout(timer); controller.dispose(); } };
+}
+function textProps(node) {
+    const { value, disabled, readOnly, placeholder } = node.props;
+    return { value, ...(disabled === undefined ? {} : { disabled }), ...(readOnly === undefined ? {} : { readOnly }), ...(placeholder === undefined ? {} : { placeholder }),
+        ...(node.kind === 'TextInput' && node.props.secure !== undefined ? { secure: node.props.secure } : {}) };
+}
+//# sourceMappingURL=controls.js.map

package/dist/adapters/web/dom.d.ts

@@ -0,0 +1,10 @@
+import type { HYAccessibility, HYLayout } from '../../core/types.js';
+export declare function attribute(element: Element, name: string, value: string | undefined): void;
+export declare function flag(element: Element, name: string, value: boolean): void;
+export declare function deepActive(document: Document): Element | null;
+export declare function composedParent(element: Element): Element | null;
+export declare function visible(element: HTMLElement): boolean;
+export declare function focusable(root: Element | ShadowRoot): HTMLElement[];
+export declare function captureFocus(document: Document): () => void;
+export declare function applyLayout(element: HTMLElement, layout?: HYLayout, overlayChild?: boolean): void;
+export declare function applyAccessibility(element: HTMLElement, a11y: HYAccessibility | undefined): void;

package/dist/adapters/web/dom.js

@@ -0,0 +1,98 @@
+export function attribute(element, name, value) {
+    if (value === undefined) {
+        if (element.hasAttribute(name))
+            element.removeAttribute(name);
+    }
+    else if (element.getAttribute(name) !== value)
+        element.setAttribute(name, value);
+}
+export function flag(element, name, value) {
+    if (element.hasAttribute(name) !== value)
+        element.toggleAttribute(name, value);
+}
+export function deepActive(document) {
+    let active = document.activeElement;
+    while (active?.shadowRoot?.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+}
+export function composedParent(element) {
+    return element.assignedSlot ?? element.parentElement ?? (element.getRootNode() instanceof ShadowRoot ? element.getRootNode().host : null);
+}
+export function visible(element) {
+    if (!element.isConnected || !element.getClientRects().length)
+        return false;
+    let current = element;
+    while (current) {
+        if (current instanceof HTMLElement && (current.hidden || current.inert))
+            return false;
+        current = composedParent(current);
+    }
+    return getComputedStyle(element).visibility !== 'hidden';
+}
+export function focusable(root) {
+    const result = [];
+    const visit = (element) => {
+        if (element instanceof HTMLElement && element.tabIndex >= 0 && !element.matches(':disabled') && visible(element))
+            result.push(element);
+        if (element instanceof HTMLSlotElement) {
+            for (const child of element.assignedElements({ flatten: true }))
+                visit(child);
+        }
+        else {
+            const children = element.shadowRoot?.children ?? element.children;
+            for (const child of children)
+                visit(child);
+        }
+    };
+    for (const child of root.children)
+        visit(child);
+    return result;
+}
+export function captureFocus(document) {
+    const active = deepActive(document);
+    if (!(active instanceof HTMLElement))
+        return () => { };
+    const input = active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement ? active : null;
+    const start = input?.selectionStart ?? null, end = input?.selectionEnd ?? null, direction = input?.selectionDirection ?? undefined;
+    const value = input?.value;
+    return () => {
+        // Most props-only commits preserve the focused element. Testing visibility
+        // in that case forces a synchronous layout after unrelated DOM writes.
+        // Only a lost focus needs geometry checks before restoring it.
+        if (deepActive(document) !== active) {
+            if (!visible(active) || active.matches(':disabled'))
+                return;
+            active.focus({ preventScroll: true });
+        }
+        // A new accepted value intentionally owns its new selection.
+        if (input && input.value === value && start !== null && end !== null
+            && (input.selectionStart !== start || input.selectionEnd !== end || input.selectionDirection !== direction))
+            input.setSelectionRange(start, end, direction);
+    };
+}
+const logical = (value) => value === undefined ? '' : typeof value === 'number' ? `${value}px` : value;
+export function applyLayout(element, layout = {}, overlayChild = false) {
+    const style = element.style;
+    for (const name of ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight'])
+        style[name] = logical(layout[name]);
+    style.padding = layout.padding?.map(v => `${v}px`).join(' ') ?? '';
+    style.gap = logical(layout.gap);
+    style.flexGrow = layout.grow === undefined ? '' : String(layout.grow);
+    style.flexBasis = layout.grow ? '0px' : '';
+    style.alignItems = layout.align === undefined ? '' : { start: 'flex-start', center: 'center', end: 'flex-end', stretch: 'stretch' }[layout.align];
+    style.gridTemplateColumns = layout.columns?.map(track => typeof track === 'object' ? `minmax(0, ${track.grow}fr)` : logical(track)).join(' ') ?? '';
+    style.gridTemplateRows = layout.rows?.map(track => typeof track === 'object' ? `minmax(0, ${track.grow}fr)` : logical(track)).join(' ') ?? '';
+    style.gridRow = layout.row === undefined ? (overlayChild ? '1' : '') : String(layout.row + 1);
+    style.gridColumn = layout.column === undefined ? (overlayChild ? '1' : '') : String(layout.column + 1);
+    // Scroll owns its axis-specific overflow, including after insertion/reordering.
+    if (element.dataset.hyKind !== 'Scroll')
+        style.overflow = layout.clip === true ? 'hidden' : '';
+}
+export function applyAccessibility(element, a11y) {
+    attribute(element, 'aria-label', a11y?.label);
+    attribute(element, 'aria-description', a11y?.description);
+    attribute(element, 'aria-invalid', a11y?.error ? 'true' : undefined);
+    // Actual semantic roles of native controls are preserved. A requested extra role belongs on generic containers.
+}
+//# sourceMappingURL=dom.js.map

package/dist/adapters/web/index.d.ts

@@ -0,0 +1,3 @@
+export { HYWebRenderer } from './renderer.js';
+export { definePortableWebComponents } from './controls.js';
+export type { HYWebEnvironment, HYWebRendererOptions, HYWebPlatformContext, HYWebDiagnostics } from './types.js';

package/dist/adapters/web/index.js

@@ -0,0 +1,3 @@
+export { HYWebRenderer } from './renderer.js';
+export { definePortableWebComponents } from './controls.js';
+//# sourceMappingURL=index.js.map

package/dist/adapters/web/renderer.d.ts

@@ -0,0 +1,18 @@
+import type { HYCapabilities, HYMutation, HYRenderer, HYUIEvent } from '../../core/types.js';
+import type { HYWebDiagnostics, HYWebEnvironment, HYWebRendererOptions } from './types.js';
+/** Browser-only adapter. Explicit registration and an attached, same-realm mount point are required. */
+export declare class HYWebRenderer implements HYRenderer {
+    #private;
+    private readonly host;
+    private readonly options;
+    readonly capabilities: HYCapabilities;
+    constructor(host: HTMLElement, options?: HYWebRendererOptions);
+    get diagnostics(): HYWebDiagnostics;
+    mount(emit: (event: HYUIEvent) => void): void;
+    commit(revision: number, mutations: readonly HYMutation[]): void;
+    focus(key: string): void;
+    setEnvironment(environment: HYWebEnvironment): void;
+    suspend(): void;
+    resume(): void;
+    dispose(): void;
+}