@webview-native-ui/engine 0.0.0-stage → 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Masahiko Sakakibara
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,52 @@
-# Temporary Holding Version
+# WebView Native UI Engine
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Bring Web UI above the native layer.**
+
+_Visually, through seamless native-to-Web projection._
+
+![Conceptual view of a Web overlay above a native surface and WebView content](docs/assets/hero.png)
+
+_Conceptual view. Native appearance is projected into the Web layer during overlay presentation._
+
+Build WebView apps where native controls and Web content share the same scrolling screens, transitions and overlays.
+
+## Beyond the WebView boundary
+
+WebView apps combine the Web's flexible layouts with access to native platform capabilities. But native UI and the Web page live in separate rendering layers. A native control placed above the WebView does not automatically participate in DOM scrolling, clipping or stacking order. A Web modal cannot simply cover it with a higher `z-index`.
+
+Crossing that boundary takes more than a bridge call. It requires coordinating placement, appearance, input, rendering and restoration across two rendering systems on each platform. Rebuilding that coordination for every component makes otherwise useful designs expensive to deliver and maintain.
+
+WebView Native UI Engine makes that work reusable. It lets applications combine native UI with Web-driven screens and interactions, while sharing the machinery that moves presentation between the two layers. The goal is to expand what a WebView app can be built to do—and make that practical to ship.
+
+## What this makes possible
+
+- **Native UI within Web-designed screens.** Combine native toolbars, tab bars, player controls and eligible SDK views with the application's DOM layout and navigation.
+- **Web overlays that coexist with native content.** Present modals and other overlays over native surfaces, then return to the interactive native UI when they close.
+- **Scrolling and transitions that retain native appearance.** Carry the native surface's captured appearance through Web-layer movement, without recreating its styling in CSS.
+- **Shared infrastructure across components and platforms.** Reuse the same projection and restoration lifecycle on iOS and Android instead of implementing it independently in every integration.
+
+## The approach
+
+Use the live native view where it belongs, and a prepared visual projection in the DOM when the Web layer needs to own presentation. Restore the interactive native view when it can take over again. An existing DOM container gives the Web projection its place in the application's layout and layer structure.
+
+The Engine coordinates this handoff; the integrating renderer still creates and positions its views. A projected image preserves appearance, not live interaction or video. Capture availability and layout support determine when a projection can be used, with an explicit fallback when it cannot. See [projection behavior](docs/projection.md) for the detailed contract and limits.
+
+## Integration
+
+Applications gain these capabilities through plugins that integrate the Engine. Capacitor and Cordova plugin authors add it as a library dependency while retaining their existing native controls and public APIs. The same Engine supports iOS and Android. Ionic and Angular are not required; Ionic overlay coordination is optional.
+
+- [Capacitor plugin guide](docs/capacitor-plugin.md) — install dependencies and add registration, events and teardown to your existing plugin.
+- [Cordova plugin guide](docs/cordova-plugin.md) — integrate the same Engine with Cordova's lifecycle and resource handler, without a Capacitor dependency.
+
+Native registration starts the Web runtime; applications do not need a separate Engine initializer for the base integration. Keep your plugin's normal API and notifications.
+
+The current API is pre-1.0. Use matching, pinned Engine versions across npm and native dependencies. Android placement requires API 23+, with composited snapshots available from API 26+.
+
+## Further reading
+
+- [Projection behavior and advanced integration](docs/projection.md) — DOM requirements, lifecycle, fallback policies, optional Ionic support and lower-level APIs.
+- [Development and releases](docs/maintenance.md) — repository structure, validation and publishing.
+
+## License
+
+[MIT](LICENSE). Commercial use, modification and redistribution are permitted with the license's notice and attribution requirements. The Engine's license does not change the licenses of applications or plugins that depend on it.

package/WebViewNativeUIEngine.podspec

@@ -0,0 +1,17 @@
+require 'json'
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+Pod::Spec.new do |s|
+ s.name = 'WebViewNativeUIEngine'
+ s.version = package['version']
+ s.summary = 'Native UI infrastructure for Capacitor and Cordova plugin maintainers.'
+ s.homepage = 'https://github.com/webview-native-ui/engine'
+ s.license = { :type => 'MIT', :file => 'LICENSE' }
+ s.preserve_paths = 'LICENSE'
+ s.author = { 'rdlabo' => 'sakakibara@rdlabo.jp' }
+ s.source = { :git => 'https://github.com/webview-native-ui/engine.git', :tag => "v#{s.version}" }
+ s.resource_bundles = { 'WebViewNativeUIEngine' => ['ios/Sources/WebViewNativeUIEngine/Resources/*.js'] }
+ s.source_files = 'ios/Sources/WebViewNativeUIEngine/**/*.swift'
+ s.ios.deployment_target = '15.0'
+ s.swift_version = '5.9'
+ s.frameworks = 'UIKit', 'WebKit'
+end

package/dist/dom/geometry.d.ts

@@ -0,0 +1,2 @@
+export declare function projectionAncestors(element: HTMLElement): Generator<HTMLElement>;
+export declare const fitsClip: (element: HTMLElement) => boolean;

package/dist/dom/geometry.js

@@ -0,0 +1,25 @@
+export function* projectionAncestors(element) {
+    let current = element;
+    while (current) {
+        const root = current.getRootNode();
+        current = current.assignedSlot ?? current.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+        if (current)
+            yield current;
+    }
+}
+export const fitsClip = (element) => {
+    const rect = element.getBoundingClientRect();
+    for (const ancestor of projectionAncestors(element)) {
+        const style = getComputedStyle(ancestor);
+        if (style.transform !== 'none' && !new DOMMatrixReadOnly(style.transform).isIdentity)
+            return false;
+        const bounds = ancestor.getBoundingClientRect();
+        const left = bounds.left + ancestor.clientLeft;
+        const top = bounds.top + ancestor.clientTop;
+        if (/^(hidden|clip|scroll|auto)$/.test(style.overflowX) && (rect.left < left - 1 || rect.right > left + ancestor.clientWidth + 1))
+            return false;
+        if (/^(hidden|clip|scroll|auto)$/.test(style.overflowY) && (rect.top < top - 1 || rect.bottom > top + ancestor.clientHeight + 1))
+            return false;
+    }
+    return true;
+};

package/dist/dom/overlays.d.ts

@@ -0,0 +1,42 @@
+/** Shared by npm consumers and the runtime injected from the native library. */
+export type OverlayPhase = 'willPresent' | 'didPresent' | 'willDismiss' | 'didDismiss' | 'change';
+export interface OverlayChange {
+    element?: HTMLElement;
+    phase: OverlayPhase;
+    event?: Event;
+}
+export interface OverlayDefinition {
+    selector: string;
+    events: Partial<Record<OverlayPhase, string>>;
+}
+export interface OverlayOptions {
+    /** Additional overlay components; Ionic defaults remain enabled. */
+    additional?: readonly OverlayDefinition[];
+    exclude?: string;
+    /** Return undefined to use the normal DOM/backdrop relationship. */
+    covers?: (overlay: HTMLElement, target: HTMLElement) => boolean | undefined;
+}
+export interface OverlayElement extends HTMLElement {
+    presented?: boolean;
+    overlayIndex?: number;
+    showBackdrop?: boolean;
+    initialBreakpoint?: number;
+    backdropBreakpoint?: number;
+}
+/** Whether a Web overlay covers the underlying surface, independently of its renderer. */
+export declare const usesOverlayBackdrop: (element: HTMLElement, breakpoint?: number) => boolean;
+declare const createCoordinator: (doc: Document) => {
+    readonly active: ReadonlySet<HTMLElement>;
+    subscribe(listener: (change: OverlayChange) => void): () => void;
+    /** Renderer ownership is explicit because a child native window is outside the DOM stack. */
+    setNative(element: HTMLElement, value: boolean): void;
+    isExcluded(element: HTMLElement): boolean;
+    isNative(element: HTMLElement): boolean;
+    readonly stack: HTMLElement[];
+    isCovered(target: HTMLElement): boolean;
+    enable(defaults: readonly OverlayDefinition[], config?: OverlayOptions): void;
+};
+export type OverlayCoordinator = ReturnType<typeof createCoordinator>;
+/** Access is inert: only the explicit framework initializer installs DOM listeners. */
+export declare const getOverlayCoordinator: (doc: Document) => OverlayCoordinator;
+export {};

package/dist/dom/overlays.js

@@ -0,0 +1,181 @@
+/** Whether a Web overlay covers the underlying surface, independently of its renderer. */
+export const usesOverlayBackdrop = (element, breakpoint) => {
+    if (element.matches('ion-toast, ion-menu'))
+        return false;
+    const overlay = element;
+    if (overlay.showBackdrop === false)
+        return false;
+    if (!element.matches('ion-modal'))
+        return true;
+    const height = breakpoint ?? overlay.initialBreakpoint;
+    return height === undefined || height > (overlay.backdropBreakpoint ?? 0);
+};
+const key = Symbol.for('@webview-native-ui/engine/overlays/v1');
+const createCoordinator = (doc) => {
+    const active = new Set();
+    const native = new Set();
+    const listeners = new Set();
+    const breakpoints = new WeakMap();
+    const dismissed = new WeakSet();
+    const registrations = new Map();
+    let definitions = [];
+    let options = {};
+    let routes = new Map();
+    let observer;
+    const notify = (change) => {
+        for (const listener of [...listeners]) {
+            try {
+                listener(change);
+            }
+            catch (error) {
+                console.error('Native UI overlay listener failed', error);
+            }
+        }
+    };
+    const accept = (element, phase, event) => {
+        if (phase === 'willPresent' || phase === 'didPresent') {
+            dismissed.delete(element);
+            active.add(element);
+        }
+        else if (phase === 'didDismiss') {
+            dismissed.add(element);
+            active.delete(element);
+            native.delete(element);
+            breakpoints.delete(element);
+        }
+        const breakpoint = event?.detail?.breakpoint;
+        // Zero begins sheet dismissal; retain coverage until DidDismiss retires the surface.
+        if (typeof breakpoint === 'number' && breakpoint > 0)
+            breakpoints.set(element, breakpoint);
+        notify({ element, phase, event });
+    };
+    const refresh = (initial = false) => {
+        let changed = false;
+        for (const element of active)
+            if (!element.isConnected || element.ownerDocument !== doc || !definitions.some(({ selector }) => element.matches(selector))) {
+                active.delete(element);
+                native.delete(element);
+                changed = true;
+            }
+        for (const element of doc.querySelectorAll(definitions.map(({ selector }) => selector).join(','))) {
+            if (!active.has(element) &&
+                !dismissed.has(element) &&
+                (initial || !element.matches('ion-popover')) &&
+                (element.presented || element.classList.contains('show-menu'))) {
+                active.add(element);
+                changed = true;
+            }
+        }
+        if (changed)
+            notify({ phase: 'change' });
+    };
+    return {
+        get active() {
+            return active;
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        /** Renderer ownership is explicit because a child native window is outside the DOM stack. */
+        setNative(element, value) {
+            if (native.has(element) === value)
+                return;
+            if (value)
+                native.add(element);
+            else
+                native.delete(element);
+            notify({ element, phase: 'change' });
+        },
+        isExcluded(element) {
+            return !!options.exclude && element.matches(options.exclude);
+        },
+        isNative(element) {
+            return native.has(element);
+        },
+        get stack() {
+            const stack = [...active].filter((element) => element.isConnected && element.ownerDocument === doc);
+            const order = (element) => {
+                const z = Number.parseFloat(doc.defaultView.getComputedStyle(element).zIndex);
+                return Number.isFinite(z) ? z : (element.overlayIndex ?? 0);
+            };
+            stack.sort((a, b) => order(a) - order(b));
+            return stack;
+        },
+        isCovered(target) {
+            const stack = this.stack;
+            const owner = stack.reduce((last, element, index) => (element.contains(target) ? index : last), -1);
+            return stack.some((element, index) => {
+                if (native.has(element) || (options.exclude && element.matches(options.exclude)))
+                    return false;
+                const override = options.covers?.(element, target);
+                if (override !== undefined)
+                    return override;
+                return (index > owner &&
+                    !element.contains(target) &&
+                    (element.matches('ion-menu') || usesOverlayBackdrop(element, breakpoints.get(element))));
+            });
+        },
+        enable(defaults, config) {
+            const nextOptions = { ...options, ...config };
+            const nextDefinitions = [...defaults, ...(nextOptions.additional ?? [])];
+            if (nextOptions.exclude)
+                doc.querySelector(nextOptions.exclude);
+            const nextRoutes = new Map();
+            for (const definition of nextDefinitions) {
+                doc.querySelector(definition.selector);
+                for (const [phase, name] of Object.entries(definition.events)) {
+                    const existing = nextRoutes.get(name);
+                    if (existing && existing.phase !== phase)
+                        throw new TypeError(`Overlay event "${name}" has conflicting phases`);
+                    nextRoutes.set(name, {
+                        phase: phase,
+                        selector: existing ? `${existing.selector}, ${definition.selector}` : definition.selector,
+                    });
+                }
+            }
+            options = nextOptions;
+            definitions = nextDefinitions;
+            routes = nextRoutes;
+            for (const name of routes.keys()) {
+                if (registrations.has(name))
+                    continue;
+                const listener = (event) => {
+                    const route = routes.get(name);
+                    const element = event
+                        .composedPath()
+                        .find((node) => node instanceof doc.defaultView.HTMLElement && node.matches(route.selector));
+                    if (element)
+                        accept(element, route.phase, event);
+                };
+                doc.addEventListener(name, listener, true);
+                registrations.set(name, () => doc.removeEventListener(name, listener, true));
+            }
+            for (const [name, remove] of registrations)
+                if (!routes.has(name)) {
+                    remove();
+                    registrations.delete(name);
+                }
+            const initial = !observer;
+            if (!observer) {
+                observer = new MutationObserver(() => refresh());
+                observer.observe(doc.documentElement, { childList: true, subtree: true });
+                doc.addEventListener('nativeUIOverlayAdopted', (event) => {
+                    const element = event.detail;
+                    if (element?.ownerDocument === doc)
+                        accept(element, 'willPresent', event);
+                });
+            }
+            refresh(initial);
+            if (initial || config)
+                notify({ phase: 'change' });
+        },
+    };
+};
+/** Access is inert: only the explicit framework initializer installs DOM listeners. */
+export const getOverlayCoordinator = (doc) => {
+    const shared = doc;
+    return (shared[key] ??= createCoordinator(doc));
+};

package/dist/dom/scroll-bindings.d.ts

@@ -0,0 +1,11 @@
+import type { WebProjectionSource } from '../types.js';
+/** Coordinate ownership, independent of any plugin's update transport or rendering. */
+export declare const createScrollBindings: () => {
+    reuse: (candidate: WebProjectionSource, width: number) => boolean;
+    acknowledge(sources: WebProjectionSource[], width: number): void;
+    changed(owner: HTMLElement): void;
+    settled(owner: HTMLElement): void;
+    eligible(candidate: WebProjectionSource, width: number): boolean;
+    acquiring(sources: WebProjectionSource[], width: number): Map<HTMLElement, number>;
+    unconfirmed(sources: WebProjectionSource[], acquiring: Map<HTMLElement, number>): Set<HTMLElement>;
+};

package/dist/dom/scroll-bindings.js

@@ -0,0 +1,55 @@
+/** Coordinate ownership, independent of any plugin's update transport or rendering. */
+export const createScrollBindings = () => {
+    let acknowledged = [];
+    let viewportWidth = 0;
+    const motion = new WeakMap();
+    const reuse = (candidate, width) => {
+        const next = candidate.control.scroll;
+        if (!candidate.scrollElement || !next || viewportWidth !== width)
+            return false;
+        return acknowledged.some((previous) => {
+            const current = previous.control.scroll;
+            return (previous.scrollElement === candidate.scrollElement &&
+                current?.id === next.id &&
+                current.contentWidth === next.contentWidth &&
+                current.contentHeight === next.contentHeight &&
+                ['viewport', 'clip'].every((key) => ['x', 'y', 'width', 'height'].every((axis) => current[key][axis] === next[key][axis])));
+        });
+    };
+    return {
+        reuse,
+        acknowledge(sources, width) {
+            acknowledged = sources;
+            viewportWidth = width;
+        },
+        changed(owner) {
+            motion.set(owner, { version: (motion.get(owner)?.version ?? 0) + 1, moving: true });
+        },
+        settled(owner) {
+            const state = motion.get(owner);
+            if (state)
+                state.moving = false;
+        },
+        eligible(candidate, width) {
+            return !candidate.scrollElement || !motion.get(candidate.scrollElement)?.moving || reuse(candidate, width);
+        },
+        acquiring(sources, width) {
+            return new Map(sources.flatMap((source) => source.scrollElement && !reuse(source, width)
+                ? [[source.scrollElement, motion.get(source.scrollElement)?.version ?? 0]]
+                : []));
+        },
+        unconfirmed(sources, acquiring) {
+            return new Set(sources.flatMap((source) => {
+                const owner = source.scrollElement, sample = source.control.scroll;
+                return owner &&
+                    sample &&
+                    acquiring.has(owner) &&
+                    (acquiring.get(owner) !== (motion.get(owner)?.version ?? 0) ||
+                        owner.scrollLeft !== sample.offsetX ||
+                        owner.scrollTop !== sample.offsetY)
+                    ? [owner]
+                    : [];
+            }));
+        },
+    };
+};

package/dist/dom/scroll-placement.d.ts

@@ -0,0 +1,5 @@
+import type { ScrollPlacement as NativeUIScrollPlacement } from '../types.js';
+type Identify = (element: HTMLElement) => string;
+/** Layout-only measurement. Native owns subsequent scroll offsets. No private Ionic APIs. */
+export declare const readScrollPlacement: (element: HTMLElement, owner: HTMLElement, id: Identify) => NativeUIScrollPlacement | undefined;
+export {};

package/dist/dom/scroll-placement.js

@@ -0,0 +1,85 @@
+import { projectionAncestors } from './geometry.js';
+const frame = ({ x, y, width, height }) => ({ x, y, width, height });
+const viewportFrame = (element) => {
+    const bounds = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    const left = parseFloat(style.borderLeftWidth) || 0;
+    const top = parseFloat(style.borderTopWidth) || 0;
+    return {
+        x: bounds.left + left,
+        y: bounds.top + top,
+        width: bounds.width - left - (parseFloat(style.borderRightWidth) || 0),
+        height: bounds.height - top - (parseFloat(style.borderBottomWidth) || 0),
+    };
+};
+/** Layout-only measurement. Native owns subsequent scroll offsets. No private Ionic APIs. */
+export const readScrollPlacement = (element, owner, id) => {
+    const ancestors = [element, ...projectionAncestors(element)];
+    const index = ancestors.indexOf(owner);
+    if (index <= 0 || owner === element.ownerDocument.scrollingElement)
+        return;
+    const win = element.ownerDocument.defaultView;
+    if (win.visualViewport && (win.visualViewport.scale !== 1 || win.visualViewport.offsetLeft || win.visualViewport.offsetTop))
+        return;
+    let left = 0, top = 0, right = win.innerWidth, bottom = win.innerHeight;
+    for (const [i, ancestor] of ancestors.entries()) {
+        const style = getComputedStyle(ancestor);
+        if ((style.transform !== 'none' && !new DOMMatrixReadOnly(style.transform).isIdentity) ||
+            (style.zoom && style.zoom !== 'normal' && Number(style.zoom) !== 1) ||
+            [style.translate, style.rotate, style.scale, style.perspective].some((value) => value && value !== 'none') ||
+            (style.writingMode && style.writingMode !== 'horizontal-tb') ||
+            (i < index && /^(fixed|sticky)$/.test(style.position)))
+            return;
+        if (i === 0)
+            continue;
+        if (style.scrollbarGutter && style.scrollbarGutter !== 'auto')
+            return;
+        const clipsX = /^(auto|scroll|hidden|clip)$/.test(style.overflowX);
+        const clipsY = /^(auto|scroll|hidden|clip)$/.test(style.overflowY);
+        // Nested moving/clipping coordinates require a separate binding; do not guess.
+        if (i < index && (clipsX || clipsY))
+            return;
+        const documentScroll = ancestor === element.ownerDocument.scrollingElement;
+        if (i > index &&
+            (((clipsX || documentScroll) && ancestor.scrollWidth > ancestor.clientWidth) ||
+                ((clipsY || documentScroll) && ancestor.scrollHeight > ancestor.clientHeight)))
+            return;
+        if ((clipsX || clipsY) &&
+            [style.borderTopLeftRadius, style.borderTopRightRadius, style.borderBottomLeftRadius, style.borderBottomRightRadius].some((radius) => parseFloat(radius) > 0))
+            return;
+        if ((style.clipPath && style.clipPath !== 'none') || (style.maskImage && style.maskImage !== 'none'))
+            return;
+        if (i >= index) {
+            const rect = viewportFrame(ancestor);
+            if (clipsX) {
+                left = Math.max(left, rect.x);
+                right = Math.min(right, rect.x + rect.width);
+            }
+            if (clipsY) {
+                top = Math.max(top, rect.y);
+                bottom = Math.min(bottom, rect.y + rect.height);
+            }
+        }
+    }
+    const style = getComputedStyle(owner);
+    if (!/^(auto|scroll)$/.test(style.overflowX) && !/^(auto|scroll)$/.test(style.overflowY))
+        return;
+    const viewport = viewportFrame(owner);
+    if (right <= left || bottom <= top || !viewport.width || !viewport.height)
+        return;
+    const source = frame(element.getBoundingClientRect());
+    return {
+        id: id(owner),
+        offsetX: owner.scrollLeft,
+        offsetY: owner.scrollTop,
+        viewport,
+        clip: { x: left, y: top, width: right - left, height: bottom - top },
+        contentWidth: owner.scrollWidth,
+        contentHeight: owner.scrollHeight,
+        frame: {
+            ...source,
+            x: source.x - viewport.x + owner.scrollLeft,
+            y: source.y - viewport.y + owner.scrollTop,
+        },
+    };
+};

package/dist/dom/visibility.d.ts

@@ -0,0 +1,6 @@
+/** Current CSS visibility without the Engine's projection hiding rules.
+ * Use when an existing renderer decides whether its DOM source is authored hidden.
+ * Projection attributes are restored synchronously before returning; this performs
+ * a style read and may notify MutationObservers, so it is not a cached measurement.
+ */
+export declare const getUnprojectedVisibility: (element: HTMLElement) => string;

package/dist/dom/visibility.js

@@ -0,0 +1,29 @@
+import { projectionAncestors } from './geometry.js';
+/** Current CSS visibility without the Engine's projection hiding rules.
+ * Use when an existing renderer decides whether its DOM source is authored hidden.
+ * Projection attributes are restored synchronously before returning; this performs
+ * a style read and may notify MutationObservers, so it is not a cached measurement.
+ */
+export const getUnprojectedVisibility = (element) => {
+    const win = element.ownerDocument.defaultView;
+    if (!win)
+        return 'hidden';
+    const markers = [];
+    for (const node of [element, ...projectionAncestors(element)]) {
+        for (const attribute of Array.from(node.attributes)) {
+            if (attribute.name === 'data-native-ui-snapshot-source' ||
+                attribute.name === 'data-native-ui-snapshot-prepared' ||
+                attribute.name.startsWith('data-native-ui-session-'))
+                markers.push({ node, name: attribute.name, value: attribute.value });
+        }
+    }
+    try {
+        for (const { node, name } of markers)
+            node.removeAttribute(name);
+        return win.getComputedStyle(element).visibility;
+    }
+    finally {
+        for (const { node, name, value } of markers)
+            node.setAttribute(name, value);
+    }
+};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from './types.js';
+export * from './dom/geometry.js';
+export * from './dom/scroll-placement.js';
+export { createWebProjectionScope, type WebProjectionScope } from './projection/scope.js';
+export * from './projection/web.js';
+export * from './dom/scroll-bindings.js';
+export type { ProjectionEvents, ProjectionDestination } from './projection/events.js';
+export { getOverlayCoordinator, usesOverlayBackdrop, type OverlayChange, type OverlayOptions } from './dom/overlays.js';
+export { getUnprojectedVisibility } from './dom/visibility.js';
+export { bindProjectionPlacement, type ProjectionPlacementBinding } from './projection/placement.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+export * from './types.js';
+export * from './dom/geometry.js';
+export * from './dom/scroll-placement.js';
+export { createWebProjectionScope } from './projection/scope.js';
+export * from './projection/web.js';
+export * from './dom/scroll-bindings.js';
+export { getOverlayCoordinator, usesOverlayBackdrop } from './dom/overlays.js';
+export { getUnprojectedVisibility } from './dom/visibility.js';
+export { bindProjectionPlacement } from './projection/placement.js';

package/dist/ionic.d.ts

@@ -0,0 +1,16 @@
+import { type OverlayDefinition, type OverlayOptions } from './dom/overlays.js';
+export type { OverlayOptions as IonicOverlayOptions } from './dom/overlays.js';
+/** Call once at app startup. Repeated default calls share the existing configuration and monitor. */
+export declare const enableSupportIonicOverlays: (options?: OverlayOptions, doc?: Document | undefined) => {
+    readonly active: ReadonlySet<HTMLElement>;
+    subscribe(listener: (change: import("./dom/overlays.js").OverlayChange) => void): () => void;
+    setNative(element: HTMLElement, value: boolean): void;
+    isExcluded(element: HTMLElement): boolean;
+    isNative(element: HTMLElement): boolean;
+    readonly stack: HTMLElement[];
+    isCovered(target: HTMLElement): boolean;
+    enable(defaults: readonly OverlayDefinition[], config?: OverlayOptions): void;
+} | undefined;
+/** The background surface shares the same order used for registered DOM projections. */
+export declare const ionicModalStack: (doc: Document) => HTMLElement[];
+export declare const coveredIonicSurface: (overlay: HTMLElement) => HTMLElement | undefined;

package/dist/ionic.js

@@ -0,0 +1,31 @@
+import { getOverlayCoordinator } from './dom/overlays.js';
+const defaults = [
+    ...['Modal', 'Popover', 'Alert', 'ActionSheet', 'Loading', 'Picker', 'Toast'].map((name) => ({
+        selector: `ion-${name.replace(/[A-Z]/g, (letter, index) => (index ? '-' : '') + letter.toLowerCase())}`,
+        events: {
+            willPresent: `ion${name}WillPresent`,
+            didPresent: `ion${name}DidPresent`,
+            willDismiss: `ion${name}WillDismiss`,
+            didDismiss: `ion${name}DidDismiss`,
+        },
+    })),
+    { selector: 'ion-modal', events: { change: 'ionBreakpointDidChange' } },
+    {
+        selector: 'ion-menu',
+        events: { willPresent: 'ionWillOpen', didPresent: 'ionDidOpen', willDismiss: 'ionWillClose', didDismiss: 'ionDidClose' },
+    },
+];
+/** Call once at app startup. Repeated default calls share the existing configuration and monitor. */
+export const enableSupportIonicOverlays = (options, doc = globalThis.document) => {
+    if (!doc)
+        return;
+    const coordinator = getOverlayCoordinator(doc);
+    coordinator.enable(defaults, options);
+    return coordinator;
+};
+/** The background surface shares the same order used for registered DOM projections. */
+export const ionicModalStack = (doc) => getOverlayCoordinator(doc).stack.filter((element) => element.matches('ion-modal'));
+export const coveredIonicSurface = (overlay) => {
+    const stack = ionicModalStack(overlay.ownerDocument);
+    return overlay.matches('ion-modal') ? stack[stack.indexOf(overlay) - 1] : stack[stack.length - 1];
+};

package/dist/native/bootstrap.d.ts

@@ -0,0 +1,8 @@
+import { type NativeSessionConfiguration } from './session.js';
+/** Cordova plugins forward their existing notifications through NativeUIProjection.receive. */
+export declare const notify: (id: string, name: string, data: unknown) => void | undefined;
+export declare const receive: (id: string, key: string | null, value: any, error?: string) => void;
+export declare const show: (id: string) => void;
+export declare const hide: (id: string) => boolean;
+export declare const stop: (id: string) => Promise<void>;
+export declare const start: (config: NativeSessionConfiguration) => Promise<void>;