@webview-native-ui/engine 1.0.1 → 1.0.2

package/dist/controls/components/ion-fab.js

@@ -0,0 +1,164 @@
+import { childElements, excluded, isDark, text } from '../shared/dom.js';
+import { iconSource } from '../shared/icons.js';
+export const tag = 'ion-fab';
+export const shadowSelector = 'ion-fab-button, ion-fab-list';
+const hasHostMotion = (style) => style.animationName !== 'none' || style.transitionDuration.split(',').some((value) => parseFloat(value) > 0);
+// FAB owns the batch; only its buttons draw glass. Closed lists keep their IDs
+// and resolved artwork, without inventing layout for display:none descendants.
+export const read = (fab, id) => {
+    if (fab.slot !== 'fixed' || !fab.parentElement?.matches('ion-content') || fab.contains(fab.ownerDocument.activeElement))
+        return;
+    const children = childElements(fab);
+    const main = children.filter((child) => child.matches('ion-fab-button'));
+    const lists = children.filter((child) => child.matches('ion-fab-list'));
+    if (main.length !== 1 || main.length + lists.length !== children.length)
+        return;
+    if (lists.some((list) => list.closest(excluded) || childElements(list).some((child) => !child.matches('ion-fab-button'))))
+        return;
+    const buttons = [main[0], ...lists.flatMap((list) => childElements(list))];
+    const style = getComputedStyle(fab);
+    if (hasHostMotion(style))
+        return;
+    const transform = new DOMMatrixReadOnly(style.transform);
+    if (!transform.is2D || transform.a !== 1 || transform.d !== 1 || transform.b || transform.c)
+        return;
+    const candidate = {
+        element: fab,
+        control: {
+            id: id(fab),
+            kind: 'floating-action-button',
+            x: 0,
+            y: 0,
+            width: innerWidth,
+            height: innerHeight,
+            dark: isDark(style),
+            rtl: style.direction === 'rtl',
+            items: [],
+        },
+        actions: new Map(),
+        icons: [],
+    };
+    for (const button of buttons) {
+        if (!button.classList.contains('ios') || button.closest(excluded) || button.color || button.type !== 'button' || button.href)
+            return;
+        if (button.querySelector('input, button, a, img, canvas, video, ion-spinner, ion-avatar, ion-badge'))
+            return;
+        const native = button.shadowRoot?.querySelector('[part=native]');
+        if (!native)
+            return;
+        const s = getComputedStyle(button), n = getComputedStyle(native);
+        // An opaque custom host/background or custom shape cannot be discarded.
+        const alpha = n.backgroundColor.startsWith('rgba(') ? Number(n.backgroundColor.slice(5, -1).split(',')[3]) : 1;
+        if (s.backgroundColor !== 'rgba(0, 0, 0, 0)' ||
+            s.backgroundImage !== 'none' ||
+            n.backgroundImage.includes('url(') ||
+            !n.backdropFilter.includes('blur') ||
+            !(alpha > 0 && alpha < 1))
+            return;
+        const width = parseFloat(s.width), height = parseFloat(s.height);
+        if (!(width > 0 && height > 0) || Math.abs(width - height) > 0.5 || !n.borderRadius.includes('50%'))
+            return;
+        const list = button.parentElement?.matches('ion-fab-list') ? button.parentElement : undefined;
+        const listStyle = list && getComputedStyle(list);
+        const laidOut = s.display !== 'none' && (!listStyle || listStyle.display !== 'none');
+        const visible = laidOut &&
+            (!list || (list.activated && button.show && listStyle.visibility === 'visible' && Number(listStyle.opacity) > 0)) &&
+            s.visibility === 'visible' &&
+            Number(s.opacity) > 0;
+        // Standard scale is centered: even scale(0) retains its actual layout center.
+        // Static list translation is already included in the DOM rect (including RTL).
+        const matrix = new DOMMatrixReadOnly(s.transform);
+        if (!matrix.is2D || matrix.b || matrix.c || matrix.e || matrix.f || matrix.a !== matrix.d || matrix.a < 0)
+            return;
+        // Only Ionic's hidden list child may use scale(0). Custom static scaling
+        // changes the actual glass/hit area and must retain its Web rendering.
+        // Stencil updates show before rendering its host class. Judge the rendered
+        // scale against that class so this normal one-frame gap keeps its cover.
+        if (matrix.a !== 1 && (matrix.a !== 0 || !list || button.classList.contains('fab-button-show')))
+            return;
+        if (laidOut && !matrix.isIdentity) {
+            const origin = s.transformOrigin.split(' ').map(parseFloat);
+            if (Math.abs(origin[0] - width / 2) > 0.5 || Math.abs(origin[1] - height / 2) > 0.5)
+                return;
+        }
+        // Ionic's list appearance is staggered show changes, without a host CSS
+        // transition. Custom host animations keep their complete Web rendering.
+        if (hasHostMotion(s))
+            return;
+        if (listStyle) {
+            if (hasHostMotion(listStyle))
+                return;
+            const transform = new DOMMatrixReadOnly(listStyle.transform);
+            if (!transform.is2D || transform.a !== 1 || transform.d !== 1 || transform.b || transform.c)
+                return;
+        }
+        const rect = button.getBoundingClientRect();
+        const x = laidOut ? rect.x + rect.width / 2 - width / 2 : 0;
+        const y = laidOut ? rect.y + rect.height / 2 - height / 2 : 0;
+        if (visible && (x < -1 || y < -1 || x + width > innerWidth + 1 || y + height > innerHeight + 1))
+            return;
+        const label = text(button);
+        const item = {
+            id: id(button),
+            x,
+            y,
+            width,
+            height,
+            label,
+            accessibilityLabel: button.getAttribute('aria-label') ?? native.getAttribute('aria-label') ?? label,
+            disabled: button.disabled || s.pointerEvents === 'none',
+            selected: button.activated,
+            visible,
+            fontSize: parseFloat(s.fontSize),
+            fontWeight: parseInt(s.fontWeight, 10) || 400,
+            color: n.color,
+        };
+        const normal = Array.from(button.querySelectorAll('ion-icon, svg'));
+        if (normal.length > 1)
+            return;
+        const close = button.shadowRoot?.querySelector('ion-icon[part=close-icon]');
+        for (const [index, icon] of [normal[0], close].entries()) {
+            if (!icon) {
+                if (index === 1 || !label)
+                    return;
+                else
+                    continue;
+            }
+            const svg = icon.matches('svg') ? icon : icon.shadowRoot?.querySelector('svg');
+            if (!svg)
+                return;
+            const iconStyle = getComputedStyle(icon);
+            const inner = icon.shadowRoot?.querySelector('.icon-inner');
+            if (index === 0 && inner && !new DOMMatrixReadOnly(iconStyle.transform).isIdentity)
+                return;
+            const transform = new DOMMatrixReadOnly(inner ? getComputedStyle(inner).transform : iconStyle.transform);
+            const mirrored = transform.is2D && transform.a === -1 && transform.d === 1 && !transform.b && !transform.c && !transform.e && !transform.f;
+            if (index === 0 && !transform.isIdentity && !mirrored)
+                return;
+            const source = iconSource(svg, index === 0 && mirrored);
+            const iconWidth = parseFloat(iconStyle.width), iconHeight = parseFloat(iconStyle.height);
+            // The internal close-icon fills the button vertically; its glyph uses font-size.
+            const size = index === 1 ? parseFloat(iconStyle.fontSize) : iconWidth;
+            const h = index === 1 ? size : iconHeight;
+            if (!source || !(size > 0 && h > 0))
+                return;
+            if (index === 0) {
+                item.iconWidth = size;
+                item.iconHeight = h;
+            }
+            else {
+                item.closeIconWidth = size;
+                item.closeIconHeight = h;
+                item.iconTransition =
+                    parseFloat(iconStyle.transitionDuration) * (iconStyle.transitionDuration.split(',')[0].trim().endsWith('ms') ? 0.001 : 1);
+            }
+            candidate.icons.push({ item, source, ...(index === 1 ? { field: 'closeIcon' } : {}) });
+        }
+        if (!visible && !list)
+            return;
+        candidate.control.items.push(item);
+        if (visible)
+            candidate.actions.set(item.id, button);
+    }
+    return candidate;
+};

package/dist/controls/components/ion-menu-button.d.ts

@@ -0,0 +1,7 @@
+import type { Candidate, Identify } from '../shared/candidate.js';
+import type { VerticalControlAreaOptions } from '../definitions.js';
+export declare const tag = "ion-menu-button";
+export declare const selector = "ion-menu-button";
+export declare const shadowSelector = "ion-menu-button";
+export declare const append: (candidate: Candidate, button: HTMLIonMenuButtonElement, id: Identify) => boolean;
+export declare const read: (group: HTMLElement, id: Identify, options?: VerticalControlAreaOptions) => Candidate | undefined;

package/dist/controls/components/ion-menu-button.js

@@ -0,0 +1,41 @@
+import { horizontalSelected, horizontalToolbarGroup, inVerticalToolbarLayout } from '../shared/toolbar-options.js';
+import { createCandidate, appendItem } from '../shared/candidate.js';
+import { childElements, inFixedToolbar, isVerticalBarsToolbarAction, isVerticalBarsToolbarGroup } from '../shared/dom.js';
+export const tag = 'ion-menu-button';
+// Horizontal menu buttons belong to ion-buttons; vertical actions can opt out of grouping.
+export const selector = tag;
+export const shadowSelector = tag;
+export const append = (candidate, button, id) => {
+    if (button.type !== 'button')
+        return false;
+    const content = !button.shadowRoot?.querySelector('slot')?.assignedNodes().length ? button.shadowRoot : button;
+    return !!content && !!appendItem(candidate, button, id, content);
+};
+export const read = (group, id, options = {}) => {
+    if (group.matches(tag)) {
+        if (!inFixedToolbar(group))
+            return;
+        if (inVerticalToolbarLayout(group)) {
+            if (!isVerticalBarsToolbarAction(group))
+                return;
+            if (group.parentElement && isVerticalBarsToolbarGroup(group.parentElement))
+                return;
+        }
+        else {
+            if (!horizontalSelected(group, options) || !group.parentElement?.matches('ion-buttons'))
+                return;
+            if (horizontalToolbarGroup(group.parentElement, options))
+                return;
+        }
+        const candidate = createCandidate(group, tag, id, options);
+        return append(candidate, group, id) ? candidate : undefined;
+    }
+    const children = group.matches('ion-buttons') ? childElements(group) : [];
+    if (!inFixedToolbar(group) || children.length !== 1)
+        return;
+    const button = children[0];
+    if (!button?.matches(`${tag}${group.closest('ion-app.ios-theme-vertical-bars') ? '' : '.ios'}`))
+        return;
+    const candidate = createCandidate(group, tag, id, options);
+    return append(candidate, button, id) ? candidate : undefined;
+};

package/dist/controls/components/ion-segment.d.ts

@@ -0,0 +1,5 @@
+import type { Candidate, Identify } from '../shared/candidate.js';
+export declare const tag = "ion-segment";
+export declare const shadowSelector = "ion-segment-button";
+export declare const tracksMotion = true;
+export declare const read: (element: HTMLElement, id: Identify) => Candidate | undefined;

package/dist/controls/components/ion-segment.js

@@ -0,0 +1,24 @@
+import { createCandidate, appendItem } from '../shared/candidate.js';
+import { inFixedToolbar } from '../shared/dom.js';
+export const tag = 'ion-segment';
+export const shadowSelector = 'ion-segment-button';
+export const tracksMotion = true;
+export const read = (element, id) => {
+    const segment = element;
+    if (!inFixedToolbar(element) ||
+        segment.scrollable ||
+        element.classList.contains('segment-expand') ||
+        element.querySelector('ion-segment-button[content-id]'))
+        return;
+    const children = Array.from(element.querySelectorAll(':scope > ion-segment-button'));
+    if (!children.length)
+        return;
+    const candidate = createCandidate(element, tag, id);
+    for (const child of children) {
+        const item = appendItem(candidate, child, id);
+        if (!item || (item.label && item.iconWidth))
+            return;
+        item.selected = segment.value === child.value;
+    }
+    return candidate;
+};

package/dist/controls/components/ion-tab-bar.d.ts

@@ -0,0 +1,5 @@
+import type { Candidate, Identify } from '../shared/candidate.js';
+export declare const tag = "ion-tab-bar";
+export declare const shadowSelector = "ion-tab-button";
+export declare const tracksMotion = true;
+export declare const read: (element: HTMLElement, id: Identify) => Candidate | undefined;

package/dist/controls/components/ion-tab-bar.js

@@ -0,0 +1,49 @@
+import { createCandidate, appendItem } from '../shared/candidate.js';
+export const tag = 'ion-tab-bar';
+export const shadowSelector = 'ion-tab-button';
+export const tracksMotion = true;
+export const read = (element, id) => {
+    if (element.closest('ion-content'))
+        return;
+    const children = Array.from(element.querySelectorAll(':scope > ion-tab-button:not(.ion-cloned-element)'));
+    if (!children.length)
+        return;
+    // Only equal items with Ionic's default layout map to UIKit's adaptive tabs.
+    const width = children[0].getBoundingClientRect().width;
+    if (children.some((child) => (child.layout ?? 'icon-top') !== 'icon-top' ||
+        Math.abs(child.getBoundingClientRect().width - width) > 1))
+        return undefined;
+    const candidate = createCandidate(element, tag, id);
+    const style = getComputedStyle(element);
+    // Palette contrast colors assume a colored Web background; keep native tint there.
+    const projectSelectionColor = !element.classList.contains('ion-color');
+    const rtl = style.direction === 'rtl';
+    const position = ['start', 'center', 'end'].find((value) => element.classList.contains(`tab-bar-position-${value}`));
+    candidate.control.tabBarAnchor = {
+        x: position === 'center' ? 0.5 : position ? ((position === 'start') !== rtl ? 0 : 1) : style.left !== 'auto' ? 0 : 1,
+        y: element.slot === 'bottom' ? 1 : 0,
+    };
+    for (const child of children) {
+        const item = appendItem(candidate, child, id);
+        if (!item)
+            return;
+        // Read Ionic's applied selection color, after CSS inheritance and theme
+        // resolution, rather than requiring a particular palette token or format.
+        if (projectSelectionColor && item.selected && /^rgba?\(/.test(item.color))
+            candidate.control.tabTint = item.color;
+        const svg = child.querySelector('svg') ?? child.querySelector('ion-icon')?.shadowRoot?.querySelector('svg');
+        if (svg) {
+            item.iconPosition = 'top';
+            const color = getComputedStyle(svg).color;
+            const shapes = Array.from(svg.querySelectorAll('path, rect, circle, ellipse, line, polygon, polyline'));
+            // Only text-colored SVGs follow UIKit selection tint; preserve explicit artwork colors.
+            item.iconTemplate =
+                shapes.length > 0 &&
+                    shapes.every((shape) => {
+                        const paint = getComputedStyle(shape);
+                        return [paint.fill, paint.stroke].every((value) => value === 'none' || value === color);
+                    });
+        }
+    }
+    return candidate;
+};

package/dist/controls/components/searchable-tabs.d.ts

@@ -0,0 +1,20 @@
+import type { NativeSearchBinding } from '../../integration/index.js';
+import type { Candidate } from '../shared/candidate.js';
+import type { NativeUISearchEvent } from '../definitions.js';
+export declare const createSearchSupport: (doc: Document, id: (element: Element) => string, schedule: () => void) => {
+    keyboard(visible: boolean): void;
+    prepare(scope?: ParentNode): void;
+    settle(transitioning: (element: HTMLElement) => boolean): void;
+    keepSearchTabsVisible(): void;
+    decorate(candidates: Candidate[], blocked: (element: HTMLElement) => boolean): Candidate[];
+    projected: (binding: NativeSearchBinding) => boolean;
+    hasActive(): boolean;
+    begin(binding: NativeSearchBinding, revision: number): void;
+    /** Enter / focus / leave. `focused` is ignored when leaving. */
+    setStatus(binding: NativeSearchBinding, active: boolean, focused?: boolean): void;
+    release(element: HTMLElement): void;
+    reject(ids: string[]): void;
+    event(event: NativeUISearchEvent): void;
+    retire(binding: NativeSearchBinding, unavailable?: boolean): void;
+    destroy(): void;
+};