@haiyue/ui 0.1.2 → 0.2.2

package/dist/collapse.js

@@ -0,0 +1,348 @@
+let collapseInstance = 0;
+function parseKeys(value) {
+    if (!value)
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? [...new Set(parsed.map(String))] : [String(parsed)];
+    }
+    catch {
+        return [...new Set(value.split(',').map(key => key.trim()).filter(Boolean))];
+    }
+}
+/** Accessible accordion and multi-panel disclosure group. */
+export class HYCollapse extends HTMLElement {
+    _container = document.createElement('div');
+    _uid = `hy-collapse-${++collapseInstance}`;
+    _items = [];
+    _itemsAssigned = false;
+    _activeKeys = [];
+    _panels = new Map();
+    _motion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    _resizeObserver = new ResizeObserver(() => {
+        for (const panel of this._panels.values()) {
+            if (panel.animation && panel.expanded && panel.targetHeight !== panel.body.offsetHeight) {
+                this._transition(panel, Number.parseFloat(getComputedStyle(panel.region).height), this._duration());
+            }
+        }
+    });
+    static get observedAttributes() {
+        return ['items', 'active-keys', 'default-active-keys', 'accordion', 'bordered', 'ghost', 'icon-position', 'collapsible', 'destroy-on-hidden', 'animated', 'animation-duration', '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: 12px/1.5 system-ui, sans-serif; }
+      .collapse { overflow: hidden; border: 1px solid var(--hy-border-color, #3d4654); border-radius: var(--hy-collapse-radius, 8px); background: var(--hy-surface-color, #111722); }
+      .panel + .panel { border-top: 1px solid var(--hy-border-color, #3d4654); }
+      .header { display: flex; min-height: var(--hy-collapse-header-height, 44px); align-items: center; background: var(--hy-collapse-header-bg, color-mix(in srgb, var(--hy-surface-elevated-color, #171d27) 82%, transparent)); }
+      .trigger { display: flex; min-width: 0; min-height: inherit; flex: 1 1 auto; align-items: center; gap: 10px; padding: 9px 14px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; text-align: start; }
+      .trigger:hover:not(:disabled) { background: var(--hy-hover-bg-color, #273241); }
+      .trigger:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: -2px; }
+      .trigger:disabled { color: var(--hy-muted-color, #788697); cursor: not-allowed; }
+      .arrow { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; color: var(--hy-muted-color, #788697); transition: transform var(--hy-collapse-animation-duration, 200ms) var(--hy-collapse-animation-easing, ease); }
+      .arrow::before { content: ''; width: 6px; height: 6px; border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); }
+      .panel.expanded .arrow { transform: rotate(90deg); }
+      .title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .extra { flex: 0 0 auto; padding-inline: var(--hy-collapse-extra-gap, 10px) 14px; color: var(--hy-muted-color, #788697); font-size: 10px; }
+      .region[hidden] { display: none; }
+      .body { padding: var(--hy-collapse-content-padding, 16px); border-top: 1px solid var(--hy-border-color, #3d4654); color: var(--hy-secondary-text-color, #aebbd0); background: var(--hy-collapse-content-bg, transparent); }
+      :host([icon-position="end"]) .arrow { order: 2; }
+      :host([bordered="false"]) .collapse { border: 0; border-radius: 0; }
+      :host([ghost]) .collapse { border: 0; background: transparent; }
+      :host([ghost]) .panel + .panel { border-top-color: transparent; }
+      :host([ghost]) .header, :host([ghost]) .body { border: 0; background: transparent; }
+      @media (prefers-reduced-motion: reduce) { .arrow { transition: none; } }
+    `;
+        this._container.className = 'collapse';
+        this._container.part.add('collapse');
+        this._container.setAttribute('role', 'group');
+        root.append(style, this._container);
+    }
+    connectedCallback() {
+        this._motion.addEventListener('change', this._onMotionChange);
+        if (!this._itemsAssigned && this.hasAttribute('items'))
+            this._readItemsAttribute();
+        this._activeKeys = this.hasAttribute('active-keys') ? parseKeys(this.getAttribute('active-keys')) : parseKeys(this.getAttribute('default-active-keys'));
+        this._normalizeActiveKeys();
+        this._syncItems();
+        this._syncLabel();
+    }
+    disconnectedCallback() {
+        this._motion.removeEventListener('change', this._onMotionChange);
+        this._resizeObserver.disconnect();
+        for (const panel of this._panels.values())
+            this._finishTransition(panel);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'items' && !this._itemsAssigned) {
+            this._readItemsAttribute();
+            this._syncItems();
+            return;
+        }
+        if (name === 'active-keys') {
+            this._activeKeys = parseKeys(newValue);
+            this._normalizeActiveKeys();
+            this._syncExpanded();
+            return;
+        }
+        if (name === 'default-active-keys' && !this.hasAttribute('active-keys')) {
+            this._activeKeys = parseKeys(newValue);
+            this._normalizeActiveKeys();
+            this._syncExpanded();
+            return;
+        }
+        if (name === 'aria-label') {
+            this._syncLabel();
+            return;
+        }
+        if (name === 'accordion') {
+            this._normalizeActiveKeys();
+            this._reflectActiveKeys();
+        }
+        this._syncExpanded();
+    }
+    get items() { return this._items; }
+    set items(value) {
+        this._itemsAssigned = true;
+        this._items = Array.isArray(value) ? value.flatMap(item => item && item.key != null && item.title != null ? [{ ...item, key: String(item.key), title: String(item.title) }] : []) : [];
+        this._normalizeActiveKeys();
+        this._syncItems();
+    }
+    get activeKeys() { return [...this._activeKeys]; }
+    set activeKeys(value) {
+        this._activeKeys = Array.isArray(value) ? [...new Set(value.map(String))] : [];
+        this._normalizeActiveKeys();
+        this._reflectActiveKeys();
+        this._syncExpanded();
+    }
+    get accordion() { return this.hasAttribute('accordion'); }
+    set accordion(value) { this.toggleAttribute('accordion', Boolean(value)); }
+    get bordered() { return this.getAttribute('bordered') !== 'false'; }
+    set bordered(value) { this.setAttribute('bordered', String(Boolean(value))); }
+    get ghost() { return this.hasAttribute('ghost'); }
+    set ghost(value) { this.toggleAttribute('ghost', Boolean(value)); }
+    get iconPosition() { return this.getAttribute('icon-position') === 'end' ? 'end' : 'start'; }
+    set iconPosition(value) { this.setAttribute('icon-position', value === 'end' ? 'end' : 'start'); }
+    get collapsible() {
+        const value = this.getAttribute('collapsible');
+        return value === 'icon' || value === 'disabled' ? value : 'header';
+    }
+    set collapsible(value) { this.setAttribute('collapsible', value === 'icon' || value === 'disabled' ? value : 'header'); }
+    get destroyOnHidden() { return this.hasAttribute('destroy-on-hidden'); }
+    set destroyOnHidden(value) { this.toggleAttribute('destroy-on-hidden', Boolean(value)); }
+    /** Opt-in height and arrow transitions. Initial rendering is always immediate. */
+    get animated() { return this.hasAttribute('animated') && this.getAttribute('animated') !== 'false'; }
+    set animated(value) { if (value)
+        this.setAttribute('animated', '');
+    else
+        this.removeAttribute('animated'); }
+    /** Milliseconds; zero disables animation. Defaults to 200 (or the inherited duration token). */
+    get animationDuration() {
+        const value = Number(this.getAttribute('animation-duration') ?? 200);
+        return Number.isFinite(value) ? Math.max(0, Math.min(10_000, value)) : 200;
+    }
+    set animationDuration(value) { this.setAttribute('animation-duration', String(Number.isFinite(value) ? Math.max(0, Math.min(10_000, value)) : 200)); }
+    toggle(key, expanded) {
+        const normalized = String(key);
+        const panel = this._panels.get(normalized);
+        if (!panel || panel.item.disabled || this.collapsible === 'disabled')
+            return;
+        const wasExpanded = this._activeKeys.includes(normalized);
+        const nextExpanded = expanded ?? !wasExpanded;
+        if (wasExpanded === nextExpanded)
+            return;
+        this._activeKeys = nextExpanded ? (this.accordion ? [normalized] : [...this._activeKeys, normalized]) : this._activeKeys.filter(activeKey => activeKey !== normalized);
+        this._reflectActiveKeys();
+        this._syncExpanded();
+        this.dispatchEvent(new CustomEvent('collapse-change', { bubbles: true, composed: true, detail: { activeKeys: [...this._activeKeys], changedKey: normalized, expanded: nextExpanded } }));
+    }
+    _readItemsAttribute() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('items') ?? '[]');
+            this._items = Array.isArray(parsed) ? parsed.flatMap(value => {
+                if (!value || typeof value !== 'object')
+                    return [];
+                const item = value;
+                if (item.key == null || item.title == null)
+                    return [];
+                return [{ key: String(item.key), title: String(item.title), ...(item.content != null ? { content: String(item.content) } : {}), ...(item.extra != null ? { extra: String(item.extra) } : {}), ...(typeof item.disabled === 'boolean' ? { disabled: item.disabled } : {}), ...(typeof item.showArrow === 'boolean' ? { showArrow: item.showArrow } : {}) }];
+            }) : [];
+        }
+        catch {
+            this._items = [];
+        }
+    }
+    _syncItems() {
+        if (!this.isConnected)
+            return;
+        this._resizeObserver.disconnect();
+        for (const panel of this._panels.values())
+            this._finishTransition(panel);
+        this._panels.clear();
+        const sections = [];
+        this._items.forEach((item, index) => {
+            const section = document.createElement('section');
+            const header = document.createElement('div');
+            const button = document.createElement('button');
+            const arrow = document.createElement('span');
+            const title = document.createElement('span');
+            const extra = document.createElement('span');
+            const region = document.createElement('div');
+            const body = document.createElement('div');
+            const buttonId = `${this._uid}-button-${index}`;
+            const regionId = `${this._uid}-panel-${index}`;
+            section.className = 'panel';
+            section.part.add('panel');
+            header.className = 'header';
+            header.part.add('header');
+            button.type = 'button';
+            button.className = 'trigger';
+            button.part.add('trigger');
+            button.id = buttonId;
+            button.setAttribute('aria-controls', regionId);
+            arrow.className = 'arrow';
+            arrow.part.add('arrow');
+            arrow.setAttribute('aria-hidden', 'true');
+            arrow.hidden = item.showArrow === false;
+            title.className = 'title';
+            title.part.add('title');
+            title.textContent = item.title;
+            button.append(arrow, title);
+            extra.className = 'extra';
+            extra.part.add('extra');
+            extra.textContent = item.extra ?? '';
+            extra.hidden = !item.extra;
+            header.append(button, extra);
+            region.className = 'region';
+            region.part.add('region');
+            region.id = regionId;
+            region.setAttribute('role', 'region');
+            region.setAttribute('aria-labelledby', buttonId);
+            body.className = 'body';
+            body.part.add('body');
+            region.append(body);
+            section.append(header, region);
+            const record = { item, section, button, arrow, region, body, rendered: false, expanded: null, animation: null, targetHeight: 0 };
+            this._panels.set(item.key, record);
+            sections.push(section);
+            this._resizeObserver.observe(body, { box: 'border-box' });
+            button.addEventListener('click', event => { if (this.collapsible === 'icon' && event.detail !== 0 && !event.composedPath()[0]?.closest?.('.arrow'))
+                return; this.toggle(item.key); });
+        });
+        this._container.replaceChildren(...sections);
+        this._syncExpanded();
+    }
+    _syncExpanded() {
+        if (!this.isConnected)
+            return;
+        const duration = this._duration();
+        for (const [key, panel] of this._panels) {
+            const expanded = this._activeKeys.includes(key);
+            const disabled = Boolean(panel.item.disabled) || this.collapsible === 'disabled';
+            panel.section.classList.toggle('expanded', expanded);
+            panel.section.toggleAttribute('data-disabled', disabled);
+            panel.button.disabled = disabled;
+            panel.button.setAttribute('aria-expanded', String(expanded));
+            panel.arrow.style.transitionDuration = `${duration}ms`;
+            if (!expanded && panel.region.matches(':focus-within'))
+                panel.button.focus({ preventScroll: true });
+            panel.region.inert = !expanded;
+            panel.region.setAttribute('aria-hidden', String(!expanded));
+            if (expanded && !panel.rendered)
+                this._renderContent(panel);
+            if (panel.expanded !== expanded) {
+                const from = panel.animation ? Number.parseFloat(getComputedStyle(panel.region).height) : expanded ? 0 : panel.region.offsetHeight;
+                const animate = panel.expanded !== null && duration > 0;
+                panel.expanded = expanded;
+                if (animate)
+                    this._transition(panel, from, duration);
+                else
+                    this._finishTransition(panel);
+            }
+            else if (!panel.animation || duration === 0)
+                this._finishTransition(panel);
+        }
+    }
+    _duration() {
+        if (!this.animated || this._motion.matches)
+            return 0;
+        if (this.hasAttribute('animation-duration'))
+            return this.animationDuration;
+        const token = getComputedStyle(this).getPropertyValue('--hy-collapse-animation-duration').trim();
+        if (!token)
+            return 200;
+        const value = Number.parseFloat(token) * (token.endsWith('ms') ? 1 : 1000);
+        return Number.isFinite(value) ? Math.max(0, Math.min(10_000, value)) : 200;
+    }
+    _transition(panel, from, duration) {
+        if (!Number.isFinite(from))
+            from = 0;
+        panel.animation?.cancel();
+        panel.animation = null;
+        panel.region.hidden = false;
+        const to = panel.expanded ? panel.body.offsetHeight : 0;
+        panel.targetHeight = to;
+        if (!duration || from === to) {
+            this._finishTransition(panel);
+            return;
+        }
+        panel.region.style.overflow = 'hidden';
+        const token = getComputedStyle(this).getPropertyValue('--hy-collapse-animation-easing').trim() || 'ease';
+        const easing = CSS.supports('transition-timing-function', token) ? token : 'ease';
+        const animation = panel.region.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration, easing, fill: 'both' });
+        panel.animation = animation;
+        void animation.finished.then(() => {
+            if (panel.animation === animation)
+                this._finishTransition(panel);
+        }, () => { });
+    }
+    _finishTransition(panel) {
+        panel.animation?.cancel();
+        panel.animation = null;
+        panel.region.style.removeProperty('overflow');
+        panel.region.hidden = !panel.expanded;
+        if (!panel.expanded && this.destroyOnHidden && panel.rendered) {
+            panel.body.replaceChildren();
+            panel.rendered = false;
+        }
+    }
+    _onMotionChange = () => { this._syncExpanded(); };
+    _renderContent(panel) {
+        const source = typeof panel.item.content === 'function' ? panel.item.content() : panel.item.content;
+        if (source instanceof Node)
+            panel.body.replaceChildren(source);
+        else
+            panel.body.textContent = source == null ? '' : String(source);
+        panel.rendered = true;
+    }
+    _normalizeActiveKeys() {
+        if (this._items.length) {
+            const valid = new Set(this._items.map(item => item.key));
+            this._activeKeys = this._activeKeys.filter(key => valid.has(key));
+        }
+        if (this.accordion)
+            this._activeKeys = this._activeKeys.slice(0, 1);
+    }
+    _reflectActiveKeys() {
+        const value = JSON.stringify(this._activeKeys);
+        if (this.getAttribute('active-keys') !== value)
+            this.setAttribute('active-keys', value);
+    }
+    _syncLabel() {
+        const label = this.getAttribute('aria-label');
+        if (label)
+            this._container.setAttribute('aria-label', label);
+        else
+            this._container.removeAttribute('aria-label');
+    }
+}
+export function defineCollapseComponents() {
+    if (!customElements.get('hy-collapse'))
+        customElements.define('hy-collapse', HYCollapse);
+}
+//# sourceMappingURL=collapse.js.map

package/dist/core/actions.d.ts

@@ -0,0 +1,32 @@
+import type { HYComponentProps, HYReason, HYUIEvent } from './types.js';
+export declare class HYButtonController {
+    #private;
+    readonly key: string;
+    private readonly emit;
+    constructor(key: string, props: HYComponentProps['Button'], emit: (event: HYUIEvent) => void);
+    update(props: HYComponentProps['Button']): void;
+    /** Adapters pass the same gesture id for overlapping tap/click/accessibility callbacks. */
+    activate(reason?: HYReason, gesture?: string | number): boolean;
+    dispose(): void;
+}
+export declare class HYToggleController {
+    #private;
+    readonly key: string;
+    private readonly emit;
+    constructor(key: string, props: HYComponentProps['Toggle'], emit: (event: HYUIEvent) => void);
+    update(props: HYComponentProps['Toggle']): void;
+    choose(checked: boolean, reason?: HYReason): boolean;
+    dispose(): void;
+}
+export declare class HYSliderController {
+    #private;
+    readonly key: string;
+    private readonly emit;
+    constructor(key: string, props: HYComponentProps['Slider'], emit: (event: HYUIEvent) => void);
+    get value(): number;
+    update(props: HYComponentProps['Slider']): void;
+    change(value: number, reason?: HYReason): boolean;
+    commit(reason?: HYReason): boolean;
+    cancel(reason?: HYReason): void;
+    dispose(): void;
+}

package/dist/core/actions.js

@@ -0,0 +1,145 @@
+import { snapshot } from './data.js';
+import { hyKey, hyValidateProps } from './validation.js';
+export class HYButtonController {
+    key;
+    emit;
+    #props;
+    #disposed = false;
+    #emitting = false;
+    #transaction = 0;
+    #gestures = new Set();
+    constructor(key, props, emit) {
+        this.key = key;
+        this.emit = emit;
+        hyKey(key);
+        this.update(props);
+    }
+    update(props) {
+        if (this.#disposed)
+            return;
+        hyValidateProps('Button', props, { key: this.key });
+        this.#props = snapshot(props);
+    }
+    /** Adapters pass the same gesture id for overlapping tap/click/accessibility callbacks. */
+    activate(reason = 'pointer', gesture) {
+        if (this.#disposed || this.#emitting || this.#props.disabled || this.#props.busy || this.#props.visible === false)
+            return false;
+        if (gesture !== undefined) {
+            if (this.#gestures.has(gesture))
+                return false;
+            this.#gestures.add(gesture);
+            if (this.#gestures.size > 64)
+                this.#gestures.delete(this.#gestures.values().next().value);
+        }
+        this.#emitting = true;
+        try {
+            this.emit({ key: this.key, type: 'activate', reason, transaction: ++this.#transaction });
+            return true;
+        }
+        finally {
+            this.#emitting = false;
+        }
+    }
+    dispose() { this.#disposed = true; this.#gestures.clear(); }
+}
+export class HYToggleController {
+    key;
+    emit;
+    #props;
+    #disposed = false;
+    #emitting = false;
+    #transaction = 0;
+    constructor(key, props, emit) {
+        this.key = key;
+        this.emit = emit;
+        hyKey(key);
+        this.update(props);
+    }
+    update(props) {
+        if (this.#disposed)
+            return;
+        hyValidateProps('Toggle', props, { key: this.key });
+        this.#props = snapshot(props);
+    }
+    choose(checked, reason = 'pointer') {
+        if (typeof checked !== 'boolean' || this.#disposed || this.#emitting || this.#props.disabled || this.#props.visible === false || checked === this.#props.checked)
+            return false;
+        this.#emitting = true;
+        const event = { key: this.key, value: checked, reason, transaction: ++this.#transaction };
+        try {
+            this.emit({ ...event, type: 'valueChange' });
+            if (this.#disposed)
+                return false;
+            this.emit({ ...event, type: 'commit' });
+            return true;
+        }
+        finally {
+            this.#emitting = false;
+        }
+    }
+    dispose() { this.#disposed = true; }
+}
+export class HYSliderController {
+    key;
+    emit;
+    #props;
+    #draft = 0;
+    #transaction = 0;
+    #active = 0;
+    #disposed = false;
+    constructor(key, props, emit) {
+        this.key = key;
+        this.emit = emit;
+        hyKey(key);
+        this.update(props);
+    }
+    get value() { return this.#draft; }
+    update(props) {
+        if (this.#disposed)
+            return;
+        hyValidateProps('Slider', props, { key: this.key });
+        if (!this.#props || props.value !== this.#props.value || props.min !== this.#props.min || props.max !== this.#props.max || props.step !== this.#props.step || props.disabled || props.visible === false) {
+            this.#draft = props.value;
+            this.#active = 0;
+        }
+        this.#props = snapshot(props);
+    }
+    change(value, reason = 'pointer') {
+        if (this.#disposed || this.#props.disabled || this.#props.visible === false || !Number.isFinite(value))
+            return false;
+        const { min, max, step } = this.#props;
+        const quantized = min + Math.round((Math.max(min, Math.min(max, value)) - min) / step) * step;
+        const next = Math.max(min, Math.min(max, Number(quantized.toPrecision(14))));
+        if (next === this.#draft)
+            return false;
+        this.#draft = next;
+        this.#active ||= ++this.#transaction;
+        this.emit({ key: this.key, type: 'valueChange', value: next, reason, transaction: this.#active });
+        return true;
+    }
+    commit(reason = 'pointer') {
+        if (this.#disposed || this.#props.disabled || !this.#active)
+            return false;
+        const transaction = this.#active;
+        this.#active = 0;
+        if (this.#draft === this.#props.value)
+            return false;
+        try {
+            this.emit({ key: this.key, type: 'commit', value: this.#draft, reason, transaction });
+            return true;
+        }
+        finally {
+            this.#draft = this.#props.value;
+        }
+    }
+    cancel(reason = 'pointer') {
+        if (this.#disposed || !this.#active)
+            return;
+        const transaction = this.#active;
+        this.#active = 0;
+        this.#draft = this.#props.value;
+        this.emit({ key: this.key, type: 'cancel', reason, transaction });
+    }
+    dispose() { this.#disposed = true; this.#active = 0; }
+}
+//# sourceMappingURL=actions.js.map

package/dist/core/data.d.ts

@@ -0,0 +1,4 @@
+/** Internal structural comparison for immutable protocol data; never serializes props. */
+export declare function equalData(a: unknown, b: unknown): boolean;
+export declare function isSnapshot(value: object): boolean;
+export declare function snapshot<T>(value: T): T;

package/dist/core/data.js

@@ -0,0 +1,27 @@
+/** Internal structural comparison for immutable protocol data; never serializes props. */
+export function equalData(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (!a || !b || typeof a !== 'object' || typeof b !== 'object')
+        return false;
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    const left = a, right = b;
+    const keys = Object.keys(left);
+    return keys.length === Object.keys(right).length
+        && keys.every(key => Object.hasOwn(right, key) && equalData(left[key], right[key]));
+}
+/** Called only after schema validation, so cycles and platform handles are impossible. */
+const snapshots = new WeakSet();
+export function isSnapshot(value) { return snapshots.has(value); }
+export function snapshot(value) {
+    if (!value || typeof value !== 'object')
+        return value;
+    if (snapshots.has(value))
+        return value;
+    const result = Array.isArray(value) ? Object.freeze(value.map(snapshot))
+        : Object.freeze(Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshot(item)])));
+    snapshots.add(result);
+    return result;
+}
+//# sourceMappingURL=data.js.map

package/dist/core/index.d.ts

@@ -0,0 +1,7 @@
+export type * from './types.js';
+export { HYUIError, HY_COMPONENTS, HY_FEATURES, hyValidateCapabilities, hyValidateProps, hyValidateNode, hySupports, hyKey, hyNode } from './validation.js';
+export { HYSelectionController } from './selection.js';
+export { HYButtonController, HYToggleController, HYSliderController } from './actions.js';
+export { HYTextController } from './text.js';
+export type { HYTextView, HYTextViewState } from './text.js';
+export { HYPlatformViewController } from './platform-view.js';

package/dist/core/index.js

@@ -0,0 +1,6 @@
+export { HYUIError, HY_COMPONENTS, HY_FEATURES, hyValidateCapabilities, hyValidateProps, hyValidateNode, hySupports, hyKey, hyNode } from './validation.js';
+export { HYSelectionController } from './selection.js';
+export { HYButtonController, HYToggleController, HYSliderController } from './actions.js';
+export { HYTextController } from './text.js';
+export { HYPlatformViewController } from './platform-view.js';
+//# sourceMappingURL=index.js.map

package/dist/core/platform-view.d.ts

@@ -0,0 +1,17 @@
+import type { HYBounds, HYPlatformView } from './types.js';
+/** Backend-owned resource lifetime. No GPU acquire/present or platform handles in page state. */
+export declare class HYPlatformViewController {
+    #private;
+    private readonly factory;
+    private resourceId;
+    private shown;
+    constructor(factory: () => HYPlatformView, resourceId: string, shown?: boolean);
+    mount(): void;
+    update(resourceId: string): void;
+    layout(bounds: HYBounds): void;
+    visible(value: boolean): void;
+    focus(): void;
+    suspend(): void;
+    resume(): void;
+    dispose(): void;
+}

package/dist/core/platform-view.js

@@ -0,0 +1,84 @@
+import { equalData, snapshot } from './data.js';
+import { HYUIError } from './validation.js';
+/** Backend-owned resource lifetime. No GPU acquire/present or platform handles in page state. */
+export class HYPlatformViewController {
+    factory;
+    resourceId;
+    shown;
+    #view;
+    #disposed = false;
+    #suspended = false;
+    #bounds;
+    constructor(factory, resourceId, shown = true) {
+        this.factory = factory;
+        this.resourceId = resourceId;
+        this.shown = shown;
+        this.#validateId(resourceId);
+    }
+    #validateId(id) { if (typeof id !== 'string' || !id.trim())
+        throw new HYUIError('invalid-props', 'PlatformView needs a resourceId'); }
+    mount() {
+        if (this.#disposed || this.#view)
+            throw new HYUIError('lifecycle', 'PlatformView disposed or already mounted');
+        this.#view = this.factory();
+        try {
+            this.#view.mount();
+            this.#view.update(this.resourceId);
+            if (this.#bounds)
+                this.#view.layout(this.#bounds);
+            this.#view.visible(this.shown && !this.#suspended);
+        }
+        catch (error) {
+            this.dispose();
+            throw error;
+        }
+    }
+    update(resourceId) {
+        if (this.#disposed)
+            return;
+        this.#validateId(resourceId);
+        if (resourceId === this.resourceId)
+            return;
+        this.resourceId = resourceId;
+        this.#view?.update(resourceId);
+    }
+    layout(bounds) {
+        if (this.#disposed)
+            return;
+        if (![bounds.x, bounds.y, bounds.width, bounds.height, bounds.scale].every(Number.isFinite)
+            || bounds.width < 0 || bounds.height < 0 || bounds.scale <= 0)
+            throw new HYUIError('invalid-props', 'Invalid PlatformView bounds');
+        if (equalData(bounds, this.#bounds))
+            return;
+        this.#bounds = snapshot(bounds);
+        this.#view?.layout(this.#bounds);
+    }
+    visible(value) {
+        if (this.#disposed || this.shown === value)
+            return;
+        this.shown = value;
+        if (!this.#suspended)
+            this.#view?.visible(value);
+    }
+    focus() { if (!this.#disposed && !this.#suspended && this.shown)
+        this.#view?.focus(); }
+    suspend() { if (!this.#disposed && !this.#suspended) {
+        this.#suspended = true;
+        if (this.shown)
+            this.#view?.visible(false);
+    } }
+    resume() { if (!this.#disposed && this.#suspended) {
+        this.#suspended = false;
+        if (this.shown)
+            this.#view?.visible(true);
+    } }
+    dispose() {
+        if (this.#disposed)
+            return;
+        this.#disposed = true;
+        const view = this.#view;
+        this.#view = undefined;
+        view?.dispose();
+    }
+}
+//# sourceMappingURL=platform-view.js.map