@haiyue/ui 0.1.2 → 0.2.2

package/dist/adapters/web/renderer.js

@@ -0,0 +1,553 @@
+import { HY_COMPONENTS, HYUIError, hyValidateProps } from '../../core/validation.js';
+import { HYPlatformViewController } from '../../core/platform-view.js';
+import { equalData } from '../../core/data.js';
+import { hyThemeVariables } from '../../portable/theme.js';
+import { HYDialog } from '../../dialog.js';
+import { HYTabs } from '../../tabs.js';
+import { componentTags, createControl } from './controls.js';
+import { applyAccessibility, applyLayout, attribute, captureFocus, deepActive, flag, focusable } from './dom.js';
+import { componentCSS, rootCSS } from './styles.js';
+const tags = { Row: 'div', Column: 'div', Grid: 'div', Overlay: 'div', Scroll: 'div', Text: 'span', Image: 'img', Icon: 'img', TextArea: 'textarea', FormGroup: 'fieldset', PlatformView: 'div', ...componentTags };
+let rendererSequence = 0;
+/** Browser-only adapter. Explicit registration and an attached, same-realm mount point are required. */
+export class HYWebRenderer {
+    host;
+    options;
+    capabilities = Object.freeze({ contract: 1, backend: 'web', components: HY_COMPONENTS,
+        features: Object.freeze(['text.composition', 'text.selection', 'text.secure', 'accessibility', 'layout.rtl', 'motion.reduced']) });
+    #root;
+    #nodes = new Map();
+    #cleanup = new Set();
+    #identity = ++rendererSequence;
+    #emit;
+    #mounted = false;
+    #disposed = false;
+    #suspended = false;
+    #applying = false;
+    #revision = 0;
+    #failure;
+    #resize;
+    #frame;
+    #themeKeys = [];
+    #sequence = 0;
+    #counts = { commits: 0, created: 0, updated: 0, moved: 0, removed: 0, measurements: 0, activeListeners: 0 };
+    constructor(host, options = {}) {
+        this.host = host;
+        this.options = options;
+        if (host.ownerDocument.defaultView !== window)
+            throw new HYUIError('capability', 'Web renderer requires a mount point in the current browser realm');
+        this.#root = document.createElement('div');
+        this.#root.dataset.hyPortableRoot = '';
+        const style = document.createElement('style');
+        style.textContent = rootCSS;
+        this.#root.append(style);
+        this.setEnvironment(options.environment ?? {});
+    }
+    get diagnostics() { return Object.freeze({ ...this.#counts, activeNodes: this.#nodes.size, activeResources: [...this.#nodes.values()].filter(e => e.platformMounted).length }); }
+    mount(emit) {
+        if (this.#mounted || this.#disposed)
+            throw new HYUIError('lifecycle', 'Web renderer already mounted or disposed');
+        if (!this.host.isConnected)
+            throw new HYUIError('lifecycle', 'Web renderer mount point must be connected');
+        this.#mounted = true;
+        this.#emit = emit;
+        this.host.append(this.#root);
+        this.#resize = new ResizeObserver(() => this.#scheduleLayout());
+        this.#listen(this.#cleanup, window, 'resize', () => this.#scheduleLayout());
+        this.#listen(this.#cleanup, window, 'scroll', () => this.#scheduleLayout(), true);
+        if (window.visualViewport)
+            for (const type of ['resize', 'scroll'])
+                this.#listen(this.#cleanup, window.visualViewport, type, () => this.#scheduleLayout());
+        this.#listen(this.#cleanup, this.#root, 'keydown', event => this.#trapTab(event));
+    }
+    #assertReady() {
+        if (this.#failure)
+            throw this.#failure;
+        if (!this.#mounted || this.#disposed)
+            throw new HYUIError('lifecycle', 'Web renderer is not mounted');
+    }
+    commit(revision, mutations) {
+        this.#assertReady();
+        if (this.#applying || !Number.isSafeInteger(revision) || revision <= this.#revision)
+            throw new HYUIError('lifecycle', 'Non-monotonic or reentrant renderer commit', { revision });
+        const restore = captureFocus(document);
+        this.#applying = true;
+        let current;
+        try {
+            const local = mutations.every(m => m.type === 'update' && ['Text', 'Button', 'Toggle', 'Select', 'TextInput', 'TextArea', 'Slider', 'Image', 'Icon'].includes(m.node.kind));
+            // Leaf value/text updates preserve the relation tree and accessible label.
+            // Containers, structural edits and changed accessibility props still sync.
+            const relations = local ? mutations.filter(m => {
+                const node = m.node;
+                return !equalData(this.#get(node.key).node.props.a11y, node.props.a11y);
+            }).map(m => this.#get(m.node.key)) : undefined;
+            for (const mutation of mutations) {
+                current = mutation;
+                this.#mutate(mutation, revision);
+            }
+            current = undefined;
+            this.#syncRelations(relations ?? this.#nodes.values());
+            this.#syncResources();
+            restore();
+            this.#revision = revision;
+            this.#counts.commits++;
+        }
+        catch (cause) {
+            const key = current ? ('node' in current ? current.node.key : current.key) : '<page>';
+            const error = new HYUIError('renderer', 'Web mutation failed', { key, operation: current?.type ?? 'finalize', revision,
+                ...(cause instanceof HYUIError ? cause.context : {}) }, cause);
+            this.#failure = error;
+            throw error;
+        }
+        finally {
+            this.#applying = false;
+        }
+    }
+    #mutate(mutation, revision) {
+        if (mutation.type === 'create') {
+            if (this.#nodes.has(mutation.node.key))
+                throw new HYUIError('duplicate-key', 'Duplicate renderer key');
+            const entry = this.#create(mutation.node, revision);
+            this.#update(entry, mutation.node, revision);
+            this.#counts.created++;
+            return;
+        }
+        if (mutation.type === 'update') {
+            const entry = this.#get(mutation.node.key);
+            if (entry.node.kind !== mutation.node.kind)
+                throw new HYUIError('invalid-props', 'Changing kind requires remove/create');
+            this.#update(entry, mutation.node, revision);
+            this.#counts.updated++;
+            return;
+        }
+        const entry = this.#get(mutation.key);
+        if (mutation.type === 'remove') {
+            this.#remove(entry);
+            return;
+        }
+        if (mutation.type === 'insert' && entry.parent !== undefined)
+            throw new HYUIError('lifecycle', 'Node already inserted');
+        if (mutation.type === 'move' && entry.parent === undefined)
+            throw new HYUIError('lifecycle', 'Cannot move a detached node');
+        const parent = mutation.parent === null ? undefined : this.#get(mutation.parent);
+        const container = parent ? this.#container(parent, mutation.slot) : this.#root;
+        if (!parent && mutation.slot !== undefined)
+            throw new HYUIError('invalid-props', 'Root cannot have a named slot');
+        const before = mutation.before === null ? null : this.#get(mutation.before);
+        if (before && (before.parent !== mutation.parent || before.slot !== mutation.slot))
+            throw new HYUIError('invalid-props', 'Placement anchor belongs to a different slot');
+        let ancestor = parent;
+        while (ancestor) {
+            if (ancestor === entry)
+                throw new HYUIError('invalid-props', 'Cyclic renderer placement');
+            ancestor = ancestor.parent ? this.#nodes.get(ancestor.parent) : undefined;
+        }
+        entry.parent = mutation.parent;
+        entry.slot = mutation.slot;
+        attribute(entry.element, 'slot', parent && (parent.node.kind === 'Tabs' || parent.node.kind === 'Dialog') ? mutation.slot : undefined);
+        const movable = container;
+        if (mutation.type === 'move' && entry.element.isConnected && container.isConnected && movable.moveBefore)
+            movable.moveBefore(entry.element, before?.element ?? null);
+        else
+            container.insertBefore(entry.element, before?.element ?? null);
+        applyLayout(entry.element, entry.node.props.layout, parent?.node.kind === 'Overlay');
+        if (mutation.type === 'move')
+            this.#counts.moved++;
+    }
+    #get(key) { const entry = this.#nodes.get(key); if (!entry)
+        throw new HYUIError('invalid-props', 'Unknown renderer key', { key }); return entry; }
+    #create(node, revision) {
+        const tag = tags[node.kind];
+        if (!tag)
+            throw new HYUIError('capability', 'Unsupported Web component', { key: node.key });
+        if (tag.startsWith('hy-') && !customElements.get(tag))
+            throw new HYUIError('lifecycle', 'Call definePortableWebComponents() before mounting', { key: node.key });
+        const element = document.createElement(tag);
+        element.dataset.hyKey = node.key;
+        element.dataset.hyKind = node.kind;
+        const entry = { node, element, parent: undefined, slot: undefined, cleanup: new Set(), slots: new Map(), platformMounted: false, id: `hy-portable-${this.#identity}-${++this.#sequence}` };
+        // Register immediately so a failed initialization is still owned by dispose().
+        this.#nodes.set(node.key, entry);
+        if (element.shadowRoot) {
+            const style = document.createElement('style');
+            style.textContent = componentCSS;
+            element.shadowRoot.append(style);
+        }
+        const control = createControl(node, { host: element, emit: event => this.#event(entry, event), interactive: () => this.#interactive(entry),
+            listen: (target, type, listener, capture = false) => this.#listen(entry.cleanup, target, type, event => {
+                const owner = event.composedPath().find(item => item instanceof HTMLElement && item.hasAttribute('data-hy-key'));
+                const buttonContent = node.kind === 'Button' && event.type === 'click' && owner instanceof Node && element.contains(owner);
+                if (this.#interactive(entry) && (!owner || owner === element || buttonContent))
+                    listener(event);
+            }, capture) }, revision);
+        if (control)
+            entry.control = control;
+        if (node.kind !== 'TextInput' && node.kind !== 'TextArea') {
+            for (const type of ['focusin', 'focusout'])
+                this.#listen(entry.cleanup, element, type, event => {
+                    const owner = event.composedPath().find(item => item instanceof HTMLElement && item.hasAttribute('data-hy-key'));
+                    if (owner === element)
+                        this.#event(entry, { key: node.key, type: type === 'focusin' ? 'focus' : 'blur', reason: 'keyboard', transaction: 0 });
+                });
+        }
+        if (node.kind === 'FormGroup') {
+            entry.label = document.createElement('legend');
+            entry.help = document.createElement('span');
+            entry.help.dataset.hyHelp = '';
+            element.append(entry.help);
+            entry.error = document.createElement('span');
+            entry.error.dataset.hyError = '';
+            entry.label.id = `${entry.id}-label`;
+            entry.error.id = `${entry.id}-error`;
+            element.prepend(entry.label);
+            element.append(entry.error);
+        }
+        if (node.kind === 'PlatformView') {
+            const factory = this.options.platformViews?.[node.props.slot];
+            if (!factory)
+                throw new HYUIError('capability', `No PlatformView factory for ${node.props.slot}`, { key: node.key });
+            entry.platform = new HYPlatformViewController(() => factory(element, { key: node.key, slot: node.props.slot }), node.props.resourceId, node.props.visible !== false);
+        }
+        return entry;
+    }
+    #update(entry, node, revision) {
+        hyValidateProps(node.kind, node.props, { key: node.key, ...(node.source ? { source: node.source } : {}) }, this.capabilities);
+        const previous = entry.node;
+        if (node.kind === 'PlatformView' && previous.kind === 'PlatformView' && node.props.slot !== previous.props.slot)
+            throw new HYUIError('invalid-props', 'PlatformView factory slot is immutable; use a new key', { key: node.key });
+        entry.node = node;
+        const element = entry.element;
+        if (entry.parent === undefined || !equalData(previous.props.layout, node.props.layout))
+            applyLayout(element, node.props.layout, entry.parent ? this.#nodes.get(entry.parent)?.node.kind === 'Overlay' : false);
+        flag(element, 'hidden', node.props.visible === false);
+        entry.control?.update(node, revision);
+        if (node.kind === 'Text') {
+            attribute(element, 'data-hy-text-style', node.props.textStyle ?? 'body');
+            attribute(element, 'data-hy-tone', node.props.tone ?? 'default');
+            if (element.textContent !== node.props.text)
+                element.textContent = node.props.text;
+            element.style.whiteSpace = node.props.wrap === false ? 'pre' : 'pre-wrap';
+        }
+        if (node.kind === 'Scroll') {
+            element.style.overflowX = node.props.axis === 'horizontal' ? 'auto' : 'hidden';
+            element.style.overflowY = node.props.axis === 'vertical' ? 'auto' : 'hidden';
+            if (node.props.layout?.clip)
+                element.style.overflow = 'hidden';
+            element.tabIndex = 0;
+        }
+        if (node.kind === 'Image' || node.kind === 'Icon') {
+            const image = element;
+            if (!image.hasAttribute('src') || !('resource' in previous.props) || !equalData(node.props.resource, previous.props.resource)) {
+                const url = this.options.resolveResource?.(node.props.resource, { key: node.key, kind: node.kind });
+                if (typeof url !== 'string' || !url.trim())
+                    throw new HYUIError('capability', `Unresolved image resource ${node.props.resource.id}`, { key: node.key });
+                image.src = url;
+            }
+            image.alt = node.props.resource.alt;
+            image.style.objectFit = node.kind === 'Image' ? (node.props.fit ?? 'contain') : 'contain';
+        }
+        if (node.kind === 'FormGroup') {
+            entry.label.textContent = node.props.label;
+            entry.help.textContent = node.props.description ?? '';
+            entry.help.hidden = !node.props.description;
+            entry.error.textContent = node.props.error ?? '';
+            entry.error.hidden = !node.props.error;
+        }
+        if (node.kind === 'PlatformView')
+            entry.platform.update(node.props.resourceId);
+        if (node.kind === 'Tabs')
+            for (const child of this.#nodes.values())
+                if (child.parent === node.key)
+                    this.#container(entry, child.slot);
+    }
+    #container(parent, slot) {
+        if (parent.node.kind === 'Tabs') {
+            if (slot === undefined || !parent.node.props.options.some(option => option.value === slot))
+                throw new HYUIError('capability', 'Tabs children need an option-valued named slot', { key: parent.node.key });
+            return parent.element;
+        }
+        if (parent.node.kind === 'Dialog') {
+            if (slot !== undefined && slot !== 'footer')
+                throw new HYUIError('capability', 'Dialog supports only the footer named slot', { key: parent.node.key });
+            return parent.element;
+        }
+        if (!['Row', 'Column', 'Grid', 'Overlay', 'Scroll', 'FormGroup', 'Button'].includes(parent.node.kind))
+            throw new HYUIError('capability', 'This component cannot contain children', { key: parent.node.key });
+        if (slot === undefined)
+            return parent.element;
+        if (parent.node.kind === 'Button')
+            throw new HYUIError('capability', 'Button supports only default content', { key: parent.node.key });
+        let group = parent.slots.get(slot);
+        if (!group) {
+            group = document.createElement('div');
+            group.dataset.hySlotGroup = slot;
+            parent.element.append(group);
+            parent.slots.set(slot, group);
+        }
+        return group;
+    }
+    #shown(entry) {
+        let current = entry;
+        while (current) {
+            if (current.node.props.visible === false || (current.node.kind === 'Dialog' && !current.node.props.open))
+                return false;
+            const parent = current.parent ? this.#nodes.get(current.parent) : undefined;
+            if (parent?.node.kind === 'Tabs' && current.slot !== parent.node.props.value)
+                return false;
+            current = parent;
+        }
+        return true;
+    }
+    #interactive(entry) {
+        if (this.#disposed || this.#suspended || this.#applying || this.#failure || !this.#nodes.has(entry.node.key) || !this.#shown(entry))
+            return false;
+        let current = entry;
+        while (current) {
+            const props = current.node.props;
+            if (('disabled' in props && props.disabled) || ('busy' in props && props.busy))
+                return false;
+            current = current.parent ? this.#nodes.get(current.parent) : undefined;
+        }
+        return true;
+    }
+    #event(entry, event) { if (this.#interactive(entry))
+        this.#emit?.(event); }
+    #syncRelations(entries = this.#nodes.values()) {
+        for (const entry of entries) {
+            if (entry.element instanceof HYDialog)
+                entry.element.open = !this.#suspended && this.#shown(entry);
+            this.#a11y(entry);
+            for (const [name, container] of entry.slots)
+                if (!container.childElementCount) {
+                    container.remove();
+                    entry.slots.delete(name);
+                }
+        }
+    }
+    #a11y(entry) {
+        const { element, node } = entry;
+        let group = entry.parent ? this.#nodes.get(entry.parent) : undefined;
+        while (group && group.node.kind !== 'FormGroup')
+            group = group.parent ? this.#nodes.get(group.parent) : undefined;
+        const groupProps = group?.node.kind === 'FormGroup' ? group.node.props : undefined;
+        const label = node.props.a11y?.label ?? (entry.control || node.kind === 'TextArea' ? groupProps?.label : undefined);
+        const description = [node.props.a11y?.description, groupProps?.description, node.props.a11y?.error ?? groupProps?.error].filter(Boolean).join('. ');
+        const a11y = label === undefined ? undefined : { ...node.props.a11y, label, ...(groupProps?.error && !node.props.a11y?.error ? { error: groupProps.error } : {}) };
+        applyAccessibility(element, a11y);
+        const targets = element instanceof HYTabs ? [...element.shadowRoot.querySelectorAll('[role=tablist],button')]
+            : element.shadowRoot ? [element.shadowRoot.querySelector(node.kind === 'Slider' ? 'button.upper' : 'input:not([type=search]),select,button,dialog')].filter((el) => !!el) : [element];
+        for (const target of targets) {
+            // Tabs label belongs to the tablist; each tab keeps its option name.
+            if (!(element instanceof HYTabs) || target.getAttribute('role') === 'tablist')
+                applyAccessibility(target, a11y);
+            attribute(target, 'aria-description', description || undefined);
+            attribute(target, 'aria-invalid', (node.props.a11y?.error ?? groupProps?.error) ? 'true' : undefined);
+            if (description) {
+                const scope = target.getRootNode();
+                // References stay in the same tree scope, including inside legacy ShadowRoots.
+                if (scope instanceof ShadowRoot) {
+                    let info = scope.querySelector('[data-hy-a11y-description]');
+                    if (!info) {
+                        info = document.createElement('span');
+                        info.dataset.hyA11yDescription = '';
+                        info.id = `${entry.id}-description`;
+                        info.hidden = true;
+                        scope.append(info);
+                    }
+                    if (info.textContent !== description)
+                        info.textContent = description;
+                    attribute(target, 'aria-describedby', info.id);
+                }
+            }
+            else
+                attribute(target, 'aria-describedby', undefined);
+        }
+        if (!entry.control && node.kind !== 'TextArea') {
+            const role = node.props.a11y?.role;
+            attribute(element, 'role', role === 'text' ? undefined : role === 'image' ? 'img' : role);
+        }
+    }
+    #syncResources() {
+        for (const entry of this.#nodes.values())
+            if (entry.platform && entry.element.isConnected) {
+                try {
+                    entry.platform.visible(this.#shown(entry));
+                    if (!entry.platformMounted) {
+                        if (this.#suspended)
+                            entry.platform.suspend();
+                        entry.platform.mount();
+                        entry.platformMounted = true;
+                        this.#resize?.observe(entry.element);
+                    }
+                    if (this.#suspended)
+                        entry.platform.suspend();
+                    else {
+                        entry.platform.resume();
+                        const rect = entry.element.getBoundingClientRect();
+                        this.#counts.measurements++;
+                        entry.platform.layout({ x: rect.x, y: rect.y, width: rect.width, height: rect.height, scale: window.devicePixelRatio || 1 });
+                    }
+                }
+                catch (cause) {
+                    throw new HYUIError('renderer', 'PlatformView lifecycle failed', { key: entry.node.key, ...(entry.node.source ? { source: entry.node.source } : {}) }, cause);
+                }
+            }
+    }
+    #scheduleLayout() {
+        if (this.#frame !== undefined || this.#disposed || this.#suspended || this.#failure)
+            return;
+        this.#frame = requestAnimationFrame(() => {
+            this.#frame = undefined;
+            try {
+                this.#syncResources();
+            }
+            catch (cause) {
+                const error = new HYUIError('renderer', 'Web resource layout failed', { operation: 'layout', revision: this.#revision, ...(cause instanceof HYUIError ? cause.context : {}) }, cause);
+                this.#failure = error;
+                if (this.options.onError)
+                    this.options.onError(error);
+                else
+                    queueMicrotask(() => { throw error; });
+            }
+        });
+    }
+    #trapTab(event) {
+        if (event.key !== 'Tab' || event.defaultPrevented || this.#suspended)
+            return;
+        const dialog = [...this.#nodes.values()].filter(entry => entry.element instanceof HYDialog && entry.element.open).at(-1);
+        if (!dialog)
+            return;
+        const choices = focusable(dialog.element.shadowRoot), active = deepActive(document);
+        const index = choices.findIndex(choice => choice === active);
+        if (!choices.length) {
+            event.preventDefault();
+            dialog.control?.focus();
+            return;
+        }
+        if ((event.shiftKey && index <= 0) || (!event.shiftKey && (index === choices.length - 1 || index === -1))) {
+            event.preventDefault();
+            choices[event.shiftKey ? choices.length - 1 : 0].focus();
+        }
+    }
+    focus(key) {
+        this.#assertReady();
+        const entry = this.#get(key);
+        if (this.#suspended || !this.#shown(entry))
+            return;
+        if (entry.platform) {
+            entry.platform.focus();
+            return;
+        }
+        if (entry.control) {
+            entry.control.focus();
+            return;
+        }
+        if (entry.element.tabIndex < 0)
+            entry.element.tabIndex = -1;
+        entry.element.focus({ preventScroll: true });
+    }
+    setEnvironment(environment) {
+        if (this.#disposed)
+            throw new HYUIError('lifecycle', 'Web renderer disposed');
+        const { safeArea = [0, 0, 0, 0], fontScale = 1, direction = 'ltr' } = environment;
+        if (!Number.isFinite(fontScale) || fontScale <= 0 || !['ltr', 'rtl'].includes(direction)
+            || (safeArea !== 'environment' && (!Array.isArray(safeArea) || safeArea.length !== 4 || !safeArea.every(v => Number.isFinite(v) && v >= 0))))
+            throw new HYUIError('invalid-props', 'Invalid Web environment');
+        const theme = environment.theme ? hyThemeVariables(environment.theme, fontScale) : undefined;
+        for (const key of this.#themeKeys)
+            this.#root.style.removeProperty(key);
+        this.#themeKeys = [];
+        if (theme) {
+            for (const [key, value] of Object.entries(theme)) {
+                this.#root.style.setProperty(key, value);
+                this.#themeKeys.push(key);
+            }
+        }
+        else if (environment.fontScale !== undefined) {
+            const inherited = getComputedStyle(this.host);
+            for (const [key, fallback] of [['--hy-font-size', 14], ['--hy-line-height', 22]]) {
+                const base = parseFloat(inherited.getPropertyValue(key)) || fallback;
+                this.#root.style.setProperty(key, `${base * fontScale}px`);
+                this.#themeKeys.push(key);
+            }
+        }
+        this.#root.dir = direction;
+        flag(this.#root, 'data-hy-reduced-motion', !!environment.reducedMotion);
+        this.#root.style.padding = safeArea === 'environment' ? ['top', 'right', 'bottom', 'left'].map(side => `env(safe-area-inset-${side}, 0px)`).join(' ') : safeArea.map(value => `${value}px`).join(' ');
+        this.#scheduleLayout();
+    }
+    suspend() { this.#assertReady(); if (this.#suspended)
+        return; this.#suspended = true; this.#root.inert = true; this.#syncRelations(); for (const entry of this.#nodes.values())
+        entry.platform?.suspend(); }
+    resume() { this.#assertReady(); if (!this.#suspended)
+        return; this.#suspended = false; this.#root.inert = false; this.#applying = true; try {
+        this.#syncRelations();
+        this.#syncResources();
+    }
+    finally {
+        this.#applying = false;
+    } }
+    #listen(cleanup, target, type, listener, capture = false) {
+        target.addEventListener(type, listener, capture);
+        this.#counts.activeListeners++;
+        let live = true;
+        const off = () => { if (!live)
+            return; live = false; target.removeEventListener(type, listener, capture); cleanup.delete(off); this.#counts.activeListeners--; };
+        cleanup.add(off);
+        return off;
+    }
+    #remove(entry) {
+        const errors = [];
+        for (const child of [...this.#nodes.values()])
+            if (child.parent === entry.node.key)
+                try {
+                    this.#remove(child);
+                }
+                catch (cause) {
+                    errors.push(cause);
+                }
+        for (const off of entry.cleanup)
+            off();
+        this.#resize?.unobserve(entry.element);
+        try {
+            entry.control?.dispose();
+        }
+        catch (cause) {
+            errors.push(cause);
+        }
+        try {
+            entry.platform?.dispose();
+        }
+        catch (cause) {
+            errors.push(cause);
+        }
+        entry.element.remove();
+        this.#nodes.delete(entry.node.key);
+        this.#counts.removed++;
+        if (errors.length)
+            throw new AggregateError(errors, 'Web node cleanup failed');
+    }
+    dispose() {
+        if (this.#disposed)
+            return;
+        this.#disposed = true;
+        if (this.#frame !== undefined)
+            cancelAnimationFrame(this.#frame);
+        this.#resize?.disconnect();
+        const errors = [];
+        while (this.#nodes.size)
+            try {
+                this.#remove(this.#nodes.values().next().value);
+            }
+            catch (cause) {
+                errors.push(cause);
+            }
+        for (const off of this.#cleanup)
+            off();
+        this.#root.remove();
+        this.#emit = undefined;
+        if (errors.length)
+            throw new AggregateError(errors, 'Web renderer cleanup failed');
+    }
+}
+//# sourceMappingURL=renderer.js.map

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

@@ -0,0 +1,3 @@
+/** Only the renderer-owned wrapper and owned ShadowRoots receive these rules. */
+export declare const rootCSS = "\n[data-hy-portable-root] { box-sizing:border-box; min-width:0; min-height:0; width:100%; height:100%;\n color:var(--hy-text-color,#d8e2f2); background:var(--hy-surface-color,#171d28);\n font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; }\n[data-hy-portable-root] [data-hy-key] { box-sizing:border-box; min-width:0; min-height:0; }\n[data-hy-portable-root] [data-hy-key][hidden] { display:none !important; }\n[data-hy-portable-root] [data-hy-kind=Row] { display:flex; flex-direction:row; }\n[data-hy-portable-root] [data-hy-kind=RadioGroup] { display:flex; flex-wrap:wrap; gap:var(--hy-gap,8px); }\n[data-hy-portable-root] [data-hy-kind=RadioGroup] hy-radio { font:inherit; min-height:44px; }\n[data-hy-portable-root] [data-hy-kind=Column] { display:flex; flex-direction:column; }\n[data-hy-portable-root] [data-hy-kind=Grid], [data-hy-portable-root] [data-hy-kind=Overlay] { display:grid; }\n[data-hy-portable-root] [data-hy-kind=Text] { display:block; overflow-wrap:anywhere; white-space:pre-wrap; }\n[data-hy-portable-root] [data-hy-kind=Icon] { width:1.25em; height:1.25em; object-fit:contain; }\n[data-hy-portable-root] [data-hy-kind=FormGroup] { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--hy-gap,8px); }\n[data-hy-portable-root] [data-hy-kind=FormGroup] > legend { padding:0; }\n[data-hy-portable-root] [data-hy-help] { color:var(--hy-secondary-text-color); font-size:var(--hy-caption-font-size,12px); line-height:var(--hy-caption-line-height,18px); }\n[data-hy-portable-root] [data-hy-error] { color:var(--hy-invalid-border-color,#d65c7c); font-size:.9em; }\n[data-hy-portable-root] textarea { box-sizing:border-box; width:100%; min-height:5em; resize:vertical; padding:8px;\n color:var(--hy-text-color,#d8e2f2); background:var(--hy-input-bg-color,#121822); border:1px solid var(--hy-border-color,#303746);\n border-radius:var(--hy-radius,4px); font:inherit; }\n[data-hy-portable-root] textarea:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }\n[data-hy-portable-root] [data-hy-text-style=title] { font-size:var(--hy-title-font-size,22px); line-height:var(--hy-title-line-height,30px); font-weight:var(--hy-title-font-weight,700); }\n[data-hy-portable-root] [data-hy-text-style=caption] { font-size:var(--hy-caption-font-size,12px); line-height:var(--hy-caption-line-height,18px); font-weight:var(--hy-caption-font-weight,400); }\n[data-hy-portable-root] [data-hy-text-style=body] { font-size:var(--hy-body-font-size,var(--hy-font-size,14px)); line-height:var(--hy-body-line-height,var(--hy-line-height,22px)); font-weight:var(--hy-body-font-weight,400); }\n[data-hy-portable-root] [data-hy-tone=muted] { color:var(--hy-secondary-text-color); }\n[data-hy-portable-root] [data-hy-tone=danger] { color:var(--hy-invalid-border-color); }\n[data-hy-portable-root] [data-hy-kind=Button] [slot=icon] svg { display:block; width:20px; height:20px; }\n[data-hy-portable-root] [data-hy-slot-group] { display:contents; }\n[data-hy-portable-root][data-hy-reduced-motion] { --hy-portable-transition:none; }\n@media(prefers-reduced-motion:reduce) { [data-hy-portable-root] { --hy-portable-transition:none; } }\n";
+export declare const componentCSS = "\n:host { --hy-input-font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; --hy-input-radius:var(--hy-radius,8px); font:inherit;\n --hy-panel-bg-color:var(--hy-surface-color,#171d28);\n --hy-menu-bg-color:var(--hy-surface-color,#171d28); --hy-dialog-bg-color:var(--hy-surface-color,#171d28);\n --hy-dialog-body-color:var(--hy-text-color,#d8e2f2); --hy-dialog-footer-bg-color:var(--hy-surface-color,#171d28);\n --hy-accent-strong-color:var(--hy-accent-color,#8177f2);\n --hy-active-text-color:var(--hy-text-color,#d8e2f2); --hy-hover-bg-color:var(--hy-input-bg-color,#121822);\n --hy-focus-border-color:var(--hy-focus-ring-color,#8177f2); --hy-dialog-radius:var(--hy-radius,8px); }\nbutton, input, select { font:inherit; min-height:2em; border-radius:var(--hy-radius,4px); }\n/* The semantic host owns the touch target. Its actual interactive element\n   must fill it too; otherwise a 44px portable Button still paints at 28px. */\n:host(hy-button), :host(hy-input), :host(hy-select) { display:inline-flex; }\n:host(hy-button) button, :host(hy-input) input, :host(hy-select) select {\n box-sizing:border-box; width:100%; min-height:inherit; height:100%; padding-inline:12px;\n}\n:host(hy-select) .wrap, :host(hy-input) .control { width:100%; min-height:inherit; height:100%; box-sizing:border-box; }\n:host(hy-input) input { min-height:0; }\nselect { height:auto; padding-block:4px; }\n:host(hy-input) input { height:auto; align-self:stretch; padding-block:0; border-radius:0; outline:none; }\n.box, .box::after, .handle { transition:var(--hy-portable-transition,background .12s ease); }\n:host(hy-checkbox) { width:auto; }\n:host(hy-checkbox) label, :host(hy-checkbox) .label { white-space:normal; }\n:host(hy-checkbox) input { min-height:0; }\n:host(hy-tabs) { height:auto; grid-template-rows:auto minmax(0,1fr); }\n:host(hy-tabs) .tabs { align-items:stretch; }\n:host(hy-tabs) button { height:auto; white-space:normal; }\n:host(hy-range) .handle { min-height:0; }\n:host(hy-dialog) .header { padding:16px 20px; }\n:host(hy-dialog) h2 { font-size:calc(var(--hy-font-size,14px) + 6px); }\n:host(hy-dialog) .body { display:flex; flex-direction:column; gap:var(--hy-gap,8px); padding:20px; }\n:host(hy-dialog) .body > slot { display:contents; }\n:host(hy-dialog) .footer { box-sizing:border-box; min-height:0; padding:12px 20px; }\n\n/* Portable variants leave individual Web Component APIs unchanged. */\n:host(hy-button) button { border:1px solid var(--hy-border-color); background:var(--hy-surface-color); color:var(--hy-text-color); border-radius:var(--hy-radius,8px); transition:background .12s ease; }\n:host(hy-button[data-hy-variant=primary]) button { background:var(--hy-accent-color); border-color:transparent; color:var(--hy-on-accent-color,#fff); }\n:host(hy-button[data-hy-variant=danger]) button { background:var(--hy-invalid-border-color); border-color:transparent; color:var(--hy-on-accent-color,#fff); }\n:host(hy-button[data-hy-variant=quiet]) button { background:transparent; border-color:transparent; }\n:host(hy-button) button:hover:not(:disabled), :host(hy-button) button:active:not(:disabled) { background:var(--hy-pressed-bg-color,var(--hy-selected-bg-color)); }\n:host(hy-button) button:disabled { opacity:.45; }\n:host(hy-button[data-hy-size=compact]) button { padding-inline:8px; }\n:host(hy-button[icon-only]) button { padding:0; width:100%; }\n:host(hy-tabs) button { min-height:44px; padding:8px 14px; border:0; border-radius:0; background:transparent; color:var(--hy-secondary-text-color); border-bottom:2px solid transparent; }\n:host(hy-tabs) button[aria-selected=true] { color:var(--hy-text-color); border-bottom-color:var(--hy-accent-color); }\n:host(hy-tabs[data-hy-variant=segmented]) .tabs { padding:4px; gap:4px; border-radius:var(--hy-radius,8px); background:var(--hy-input-bg-color); }\n:host(hy-tabs[data-hy-variant=segmented]) button { border:0; border-radius:var(--hy-radius,8px); }\n:host(hy-tabs[data-hy-variant=segmented]) button[aria-selected=true] { background:var(--hy-selected-bg-color,var(--hy-accent-color)); }\nbutton:focus-visible, select:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }\n[aria-invalid=true] { border-color:var(--hy-invalid-border-color,#d65c7c); }\n";

package/dist/adapters/web/styles.js

@@ -0,0 +1,83 @@
+/** Only the renderer-owned wrapper and owned ShadowRoots receive these rules. */
+export const rootCSS = `
+[data-hy-portable-root] { box-sizing:border-box; min-width:0; min-height:0; width:100%; height:100%;
+ color:var(--hy-text-color,#d8e2f2); background:var(--hy-surface-color,#171d28);
+ font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; }
+[data-hy-portable-root] [data-hy-key] { box-sizing:border-box; min-width:0; min-height:0; }
+[data-hy-portable-root] [data-hy-key][hidden] { display:none !important; }
+[data-hy-portable-root] [data-hy-kind=Row] { display:flex; flex-direction:row; }
+[data-hy-portable-root] [data-hy-kind=RadioGroup] { display:flex; flex-wrap:wrap; gap:var(--hy-gap,8px); }
+[data-hy-portable-root] [data-hy-kind=RadioGroup] hy-radio { font:inherit; min-height:44px; }
+[data-hy-portable-root] [data-hy-kind=Column] { display:flex; flex-direction:column; }
+[data-hy-portable-root] [data-hy-kind=Grid], [data-hy-portable-root] [data-hy-kind=Overlay] { display:grid; }
+[data-hy-portable-root] [data-hy-kind=Text] { display:block; overflow-wrap:anywhere; white-space:pre-wrap; }
+[data-hy-portable-root] [data-hy-kind=Icon] { width:1.25em; height:1.25em; object-fit:contain; }
+[data-hy-portable-root] [data-hy-kind=FormGroup] { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--hy-gap,8px); }
+[data-hy-portable-root] [data-hy-kind=FormGroup] > legend { padding:0; }
+[data-hy-portable-root] [data-hy-help] { color:var(--hy-secondary-text-color); font-size:var(--hy-caption-font-size,12px); line-height:var(--hy-caption-line-height,18px); }
+[data-hy-portable-root] [data-hy-error] { color:var(--hy-invalid-border-color,#d65c7c); font-size:.9em; }
+[data-hy-portable-root] textarea { box-sizing:border-box; width:100%; min-height:5em; resize:vertical; padding:8px;
+ color:var(--hy-text-color,#d8e2f2); background:var(--hy-input-bg-color,#121822); border:1px solid var(--hy-border-color,#303746);
+ border-radius:var(--hy-radius,4px); font:inherit; }
+[data-hy-portable-root] textarea:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }
+[data-hy-portable-root] [data-hy-text-style=title] { font-size:var(--hy-title-font-size,22px); line-height:var(--hy-title-line-height,30px); font-weight:var(--hy-title-font-weight,700); }
+[data-hy-portable-root] [data-hy-text-style=caption] { font-size:var(--hy-caption-font-size,12px); line-height:var(--hy-caption-line-height,18px); font-weight:var(--hy-caption-font-weight,400); }
+[data-hy-portable-root] [data-hy-text-style=body] { font-size:var(--hy-body-font-size,var(--hy-font-size,14px)); line-height:var(--hy-body-line-height,var(--hy-line-height,22px)); font-weight:var(--hy-body-font-weight,400); }
+[data-hy-portable-root] [data-hy-tone=muted] { color:var(--hy-secondary-text-color); }
+[data-hy-portable-root] [data-hy-tone=danger] { color:var(--hy-invalid-border-color); }
+[data-hy-portable-root] [data-hy-kind=Button] [slot=icon] svg { display:block; width:20px; height:20px; }
+[data-hy-portable-root] [data-hy-slot-group] { display:contents; }
+[data-hy-portable-root][data-hy-reduced-motion] { --hy-portable-transition:none; }
+@media(prefers-reduced-motion:reduce) { [data-hy-portable-root] { --hy-portable-transition:none; } }
+`;
+export const componentCSS = `
+:host { --hy-input-font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; --hy-input-radius:var(--hy-radius,8px); font:inherit;
+ --hy-panel-bg-color:var(--hy-surface-color,#171d28);
+ --hy-menu-bg-color:var(--hy-surface-color,#171d28); --hy-dialog-bg-color:var(--hy-surface-color,#171d28);
+ --hy-dialog-body-color:var(--hy-text-color,#d8e2f2); --hy-dialog-footer-bg-color:var(--hy-surface-color,#171d28);
+ --hy-accent-strong-color:var(--hy-accent-color,#8177f2);
+ --hy-active-text-color:var(--hy-text-color,#d8e2f2); --hy-hover-bg-color:var(--hy-input-bg-color,#121822);
+ --hy-focus-border-color:var(--hy-focus-ring-color,#8177f2); --hy-dialog-radius:var(--hy-radius,8px); }
+button, input, select { font:inherit; min-height:2em; border-radius:var(--hy-radius,4px); }
+/* The semantic host owns the touch target. Its actual interactive element
+   must fill it too; otherwise a 44px portable Button still paints at 28px. */
+:host(hy-button), :host(hy-input), :host(hy-select) { display:inline-flex; }
+:host(hy-button) button, :host(hy-input) input, :host(hy-select) select {
+ box-sizing:border-box; width:100%; min-height:inherit; height:100%; padding-inline:12px;
+}
+:host(hy-select) .wrap, :host(hy-input) .control { width:100%; min-height:inherit; height:100%; box-sizing:border-box; }
+:host(hy-input) input { min-height:0; }
+select { height:auto; padding-block:4px; }
+:host(hy-input) input { height:auto; align-self:stretch; padding-block:0; border-radius:0; outline:none; }
+.box, .box::after, .handle { transition:var(--hy-portable-transition,background .12s ease); }
+:host(hy-checkbox) { width:auto; }
+:host(hy-checkbox) label, :host(hy-checkbox) .label { white-space:normal; }
+:host(hy-checkbox) input { min-height:0; }
+:host(hy-tabs) { height:auto; grid-template-rows:auto minmax(0,1fr); }
+:host(hy-tabs) .tabs { align-items:stretch; }
+:host(hy-tabs) button { height:auto; white-space:normal; }
+:host(hy-range) .handle { min-height:0; }
+:host(hy-dialog) .header { padding:16px 20px; }
+:host(hy-dialog) h2 { font-size:calc(var(--hy-font-size,14px) + 6px); }
+:host(hy-dialog) .body { display:flex; flex-direction:column; gap:var(--hy-gap,8px); padding:20px; }
+:host(hy-dialog) .body > slot { display:contents; }
+:host(hy-dialog) .footer { box-sizing:border-box; min-height:0; padding:12px 20px; }
+
+/* Portable variants leave individual Web Component APIs unchanged. */
+:host(hy-button) button { border:1px solid var(--hy-border-color); background:var(--hy-surface-color); color:var(--hy-text-color); border-radius:var(--hy-radius,8px); transition:background .12s ease; }
+:host(hy-button[data-hy-variant=primary]) button { background:var(--hy-accent-color); border-color:transparent; color:var(--hy-on-accent-color,#fff); }
+:host(hy-button[data-hy-variant=danger]) button { background:var(--hy-invalid-border-color); border-color:transparent; color:var(--hy-on-accent-color,#fff); }
+:host(hy-button[data-hy-variant=quiet]) button { background:transparent; border-color:transparent; }
+:host(hy-button) button:hover:not(:disabled), :host(hy-button) button:active:not(:disabled) { background:var(--hy-pressed-bg-color,var(--hy-selected-bg-color)); }
+:host(hy-button) button:disabled { opacity:.45; }
+:host(hy-button[data-hy-size=compact]) button { padding-inline:8px; }
+:host(hy-button[icon-only]) button { padding:0; width:100%; }
+:host(hy-tabs) button { min-height:44px; padding:8px 14px; border:0; border-radius:0; background:transparent; color:var(--hy-secondary-text-color); border-bottom:2px solid transparent; }
+:host(hy-tabs) button[aria-selected=true] { color:var(--hy-text-color); border-bottom-color:var(--hy-accent-color); }
+:host(hy-tabs[data-hy-variant=segmented]) .tabs { padding:4px; gap:4px; border-radius:var(--hy-radius,8px); background:var(--hy-input-bg-color); }
+:host(hy-tabs[data-hy-variant=segmented]) button { border:0; border-radius:var(--hy-radius,8px); }
+:host(hy-tabs[data-hy-variant=segmented]) button[aria-selected=true] { background:var(--hy-selected-bg-color,var(--hy-accent-color)); }
+button:focus-visible, select:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }
+[aria-invalid=true] { border-color:var(--hy-invalid-border-color,#d65c7c); }
+`;
+//# sourceMappingURL=styles.js.map