@lingxia/elements 0.15.0 → 0.16.0

package/dist/inline-native/elements.js

@@ -0,0 +1,749 @@
+import { collectAuthorTreeFromElement, compileInlineNativeRoot, parseBooleanAttr, } from "./structure.js";
+import { nativeError } from "./errors.js";
+import { nextOpaqueKey } from "./identity.js";
+import { applyHostLeaseMessage, createRootRuntimeState, publishCompiledRoot, rootFallbackAllowed, } from "./runtime.js";
+import { isFallbackElement } from "./structure.js";
+import { applyIslandHostEvent } from "./events.js";
+import { effectiveOpacity } from "./style.js";
+import { observeNativeLayout } from "./layout.js";
+import { ensureComponentId } from "../component.js";
+import { registerNativeComponentHandler, sendNativeComponentMessage, } from "../nativecomponent.js";
+const ROOT_INVALID_EVENT = "error";
+const STRUCTURE_COMPILED_EVENT = "lxnativecompiled";
+function asRecord(el) {
+    return el;
+}
+function reflectBoolean(el, name, value) {
+    if (value === false || value === "false") {
+        el.setAttribute(name, "false");
+        return;
+    }
+    if (value === true || value === "" || value === "true") {
+        el.setAttribute(name, "");
+        return;
+    }
+    if (value == null) {
+        el.removeAttribute(name);
+        return;
+    }
+    el.setAttribute(name, String(value));
+}
+function reflectString(el, name, value) {
+    if (value == null || value === "") {
+        el.removeAttribute(name);
+        return;
+    }
+    el.setAttribute(name, String(value));
+}
+class LxNativeBaseElement extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            "id",
+            "automation-id",
+            "hidden",
+            "pointer-events",
+            "aria-label",
+            "aria-description",
+            "aria-hidden",
+        ];
+    }
+    /// Geometry is measured per element id, so every island node needs one —
+    /// without it the host would place this node at the root's rect.
+    connectedCallback() {
+        ensureComponentId(this, this.localName);
+    }
+    get automationId() {
+        return this.getAttribute("automation-id");
+    }
+    set automationId(value) {
+        reflectString(this, "automation-id", value);
+    }
+    get pointerEvents() {
+        return this.getAttribute("pointer-events");
+    }
+    set pointerEvents(value) {
+        reflectString(this, "pointer-events", value);
+    }
+}
+export class LxNativeRootElement extends LxNativeBaseElement {
+    constructor() {
+        super(...arguments);
+        this.pending = { frame: null, timer: null };
+        this.lastResult = null;
+        this.styleDiagnostics = new Set();
+        this.rootKey = nextOpaqueKey("root");
+        this.rootEpoch = 1;
+        this.runtime = createRootRuntimeState();
+        this.fallbackTimer = null;
+        this.onViewportGeometryChanged = () => this.scheduleCompile();
+    }
+    static get observedAttributes() {
+        return LxNativeBaseElement.observedAttributes;
+    }
+    lastCompileResult() {
+        return this.lastResult;
+    }
+    retry() {
+        this.compileNow();
+        return Promise.resolve();
+    }
+    connectedCallback() {
+        if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: "open" });
+            shadow.innerHTML = '<style>:host([data-lx-native-paint-hidden]:not([data-lx-native-measuring])) { opacity: 0 !important; }</style><slot></slot>';
+        }
+        this.style.display = this.style.display || "block";
+        this.style.position = this.style.position || "relative";
+        this.unregisterHost = registerNativeComponentHandler(this.rootKey, (message) => {
+            this.onHostMessage(message);
+        });
+        this.updateFallbackVisibility(true);
+        sendNativeComponentMessage({ id: this.rootKey, action: "component.ready" });
+        this.observer = new MutationObserver((records) => {
+            if (records.every(record => {
+                var _a;
+                return record.target === this &&
+                    ["data-lx-native-measuring", "data-lx-native-paint-hidden"].includes((_a = record.attributeName) !== null && _a !== void 0 ? _a : "");
+            }))
+                return;
+            this.syncResizeObservation();
+            this.scheduleCompile();
+        });
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+        this.documentObserver = new MutationObserver((records) => {
+            if (records.some((record) => Array.from(record.addedNodes).concat(Array.from(record.removedNodes)).some(containsNativeRoot))) {
+                this.scheduleCompile();
+            }
+        });
+        this.documentObserver.observe(document.documentElement, { childList: true, subtree: true });
+        if (typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver(() => this.scheduleCompile());
+            this.syncResizeObservation();
+        }
+        document.addEventListener("scroll", this.onViewportGeometryChanged, true);
+        window.addEventListener("resize", this.onViewportGeometryChanged);
+        this.stopLayoutObservation = observeNativeLayout(this, () => this.scheduleCompile());
+        this.scheduleCompile();
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const root = (_b = (_a = this.runtime.identified) === null || _a === void 0 ? void 0 : _a.rootRef) !== null && _b !== void 0 ? _b : this.rootRef();
+        sendNativeComponentMessage({ id: this.rootKey, action: "root.destroy", root });
+        this.runtime = createRootRuntimeState();
+        this.rootEpoch += 1;
+        (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
+        this.observer = undefined;
+        (_d = this.documentObserver) === null || _d === void 0 ? void 0 : _d.disconnect();
+        this.documentObserver = undefined;
+        (_e = this.unregisterHost) === null || _e === void 0 ? void 0 : _e.call(this);
+        this.unregisterHost = undefined;
+        (_f = this.resizeObserver) === null || _f === void 0 ? void 0 : _f.disconnect();
+        this.resizeObserver = undefined;
+        (_g = this.stopLayoutObservation) === null || _g === void 0 ? void 0 : _g.call(this);
+        this.stopLayoutObservation = undefined;
+        document.removeEventListener("scroll", this.onViewportGeometryChanged, true);
+        window.removeEventListener("resize", this.onViewportGeometryChanged);
+        if (this.pending.frame != null && typeof cancelAnimationFrame === "function") {
+            cancelAnimationFrame(this.pending.frame);
+            this.pending.frame = null;
+        }
+        if (this.pending.timer != null) {
+            clearTimeout(this.pending.timer);
+            this.pending.timer = null;
+        }
+        if (this.fallbackTimer != null) {
+            clearTimeout(this.fallbackTimer);
+            this.fallbackTimer = null;
+        }
+    }
+    scheduleCompile() {
+        if (typeof requestAnimationFrame !== "function") {
+            this.compileNow();
+            return;
+        }
+        // A hidden document never services animation frames — an occluded or
+        // backgrounded window would leave the host without a tree until it is
+        // revealed. Commit on a timer instead; the host owns what it paints.
+        if (typeof document !== "undefined" && document.hidden) {
+            if (this.pending.timer != null)
+                return;
+            this.pending.timer = setTimeout(() => {
+                this.pending.timer = null;
+                this.compileNow();
+            }, 0);
+            return;
+        }
+        if (this.pending.frame != null || this.pending.timer != null)
+            return;
+        this.pending.frame = requestAnimationFrame(() => {
+            this.pending.frame = null;
+            if (this.pending.timer != null) {
+                clearTimeout(this.pending.timer);
+                this.pending.timer = null;
+            }
+            this.compileNow();
+        });
+        // Browsers may defer animation frames while a window is occluded or while
+        // automation owns the frame clock. Geometry must still reach the native
+        // island or its visual and hit target remain at the pre-scroll position.
+        this.pending.timer = setTimeout(() => {
+            this.pending.timer = null;
+            if (this.pending.frame != null) {
+                cancelAnimationFrame(this.pending.frame);
+                this.pending.frame = null;
+            }
+            this.compileNow();
+        }, 50);
+    }
+    compileNow() {
+        // Measure author CSS synchronously, then suppress its duplicate paint before the browser frame.
+        const measuring = this.hasAttribute("data-lx-native-measuring");
+        this.setAttribute("data-lx-native-measuring", "");
+        try {
+            return this.compileMeasured();
+        }
+        finally {
+            if (!measuring)
+                this.removeAttribute("data-lx-native-measuring");
+        }
+    }
+    compileMeasured() {
+        const author = collectAuthorTreeFromElement(this);
+        const result = compileInlineNativeRoot(author, { rootRef: this.rootRef() });
+        this.lastResult = result;
+        const nextDiagnostics = new Set(result.diagnostics.map((diagnostic) => diagnostic.message));
+        const previousDiagnostics = this.styleDiagnostics;
+        this.styleDiagnostics = nextDiagnostics;
+        for (const diagnostic of result.diagnostics) {
+            if (previousDiagnostics.has(diagnostic.message))
+                continue;
+            console.warn(`[LingXia] ${diagnostic.code}: ${diagnostic.message}`);
+            this.dispatchEvent(new CustomEvent(ROOT_INVALID_EVENT, { detail: diagnostic }));
+        }
+        if (!result.ok) {
+            this.destroyPublishedRoot();
+            this.updateFallbackVisibility(true);
+            this.dispatchEvent(new CustomEvent(ROOT_INVALID_EVENT, {
+                detail: result.error,
+                bubbles: false,
+            }));
+        }
+        else {
+            const geometry = measureNativeNodeGeometry(this);
+            const published = publishCompiledRoot({
+                compiled: result.root,
+                rootRef: this.rootRef(),
+                state: this.runtime,
+                rootRect: elementContentRect(this),
+                rootVisible: elementIsVisible(this),
+                nodeRects: geometry.rects,
+                nodeVisibility: geometry.visibility,
+                nodeClipStacks: geometry.clipStacks,
+                rootOrder: nativeRootOrder(this),
+                viewportOffset: pageViewportOffset(),
+            });
+            // Adopt the published state only once the host has actually been told about
+            // it: a dropped first commit carries every mount operation, and the next
+            // compile would only produce a diff against a tree the host never saw.
+            if (published.messages.commit) {
+                if (!sendNativeComponentMessage({ id: this.rootKey, ...published.messages.commit })) {
+                    this.scheduleCompile();
+                    return result;
+                }
+            }
+            this.runtime = published.state;
+            sendNativeComponentMessage({ id: this.rootKey, ...published.messages.geometry });
+            this.dispatchEvent(new CustomEvent(STRUCTURE_COMPILED_EVENT, {
+                detail: result.root,
+                bubbles: false,
+            }));
+        }
+        return result;
+    }
+    onHostMessage(message) {
+        var _a, _b, _c;
+        const currentRoot = (_b = (_a = this.runtime.identified) === null || _a === void 0 ? void 0 : _a.rootRef) !== null && _b !== void 0 ? _b : this.rootRef();
+        if (message.root && !sameRootGeneration(message.root, currentRoot)) {
+            return;
+        }
+        if (applyIslandHostEvent(this, message)) {
+            return;
+        }
+        if (message.action === "root.resyncRequired") {
+            this.runtime = createRootRuntimeState();
+            this.updateFallbackVisibility(true);
+            this.scheduleCompile();
+            return;
+        }
+        if (message.action === "root.error") {
+            this.destroyPublishedRoot();
+            this.updateFallbackVisibility(true);
+            this.dispatchEvent(new CustomEvent(ROOT_INVALID_EVENT, {
+                detail: nativeError("NATIVE_ROOT_FAILED", (_c = message.message) !== null && _c !== void 0 ? _c : "native Root rejected"),
+            }));
+            return;
+        }
+        const wasReady = this.runtime.lease.phase === "active";
+        const applied = applyHostLeaseMessage(this.runtime, message, Date.now());
+        this.runtime = applied.state;
+        if (applied.leaseAccept) {
+            sendNativeComponentMessage(applied.leaseAccept);
+        }
+        if (applied.ready) {
+            if (this.fallbackTimer != null) {
+                clearTimeout(this.fallbackTimer);
+                this.fallbackTimer = null;
+            }
+            this.updateFallbackVisibility(false);
+            if (!wasReady)
+                this.dispatchEvent(new CustomEvent("ready", { detail: {} }));
+        }
+        else {
+            this.armFallbackDeadline();
+        }
+    }
+    armFallbackDeadline() {
+        if (this.fallbackTimer != null)
+            clearTimeout(this.fallbackTimer);
+        const deadline = this.runtime.lease.deadlineTickMs;
+        if (deadline === undefined)
+            return;
+        this.fallbackTimer = setTimeout(() => {
+            this.fallbackTimer = null;
+            if (rootFallbackAllowed(this.runtime, Date.now())) {
+                this.updateFallbackVisibility(true);
+            }
+        }, Math.max(0, deadline - Date.now()));
+    }
+    updateFallbackVisibility(show) {
+        if (this.hasAttribute("data-lx-native-paint-hidden") === show) {
+            this.toggleAttribute("data-lx-native-paint-hidden", !show);
+        }
+        for (const fallback of Array.from(this.querySelectorAll("[data-lx-native-fallback]"))) {
+            if (fallback instanceof HTMLElement && fallback.closest("lx-native-root") === this) {
+                if (fallback.hidden === show)
+                    fallback.hidden = !show;
+                if (show && fallback.hasAttribute("aria-hidden"))
+                    fallback.removeAttribute("aria-hidden");
+                else if (!show && fallback.getAttribute("aria-hidden") !== "true")
+                    fallback.setAttribute("aria-hidden", "true");
+            }
+        }
+    }
+    rootRef() {
+        return pageRootScope(this.rootKey, this.rootEpoch);
+    }
+    destroyPublishedRoot() {
+        var _a;
+        const root = (_a = this.runtime.identified) === null || _a === void 0 ? void 0 : _a.rootRef;
+        if (!root)
+            return;
+        sendNativeComponentMessage({ id: this.rootKey, action: "root.destroy", root });
+        this.runtime = createRootRuntimeState();
+        this.rootEpoch += 1;
+    }
+    syncResizeObservation() {
+        if (!this.resizeObserver)
+            return;
+        this.resizeObserver.disconnect();
+        this.resizeObserver.observe(this);
+        for (const element of nativeDescendants(this)) {
+            this.resizeObserver.observe(element);
+        }
+    }
+}
+export class LxNativeViewElement extends LxNativeBaseElement {
+    static get observedAttributes() {
+        return [...LxNativeBaseElement.observedAttributes, "role"];
+    }
+}
+export class LxNativeCoverElement extends LxNativeBaseElement {
+    static get observedAttributes() {
+        return [...LxNativeBaseElement.observedAttributes, "scrim", "scrim-opacity", "role"];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.style.position)
+            this.style.position = "absolute";
+        if (!this.style.inset && !this.style.top && !this.style.left) {
+            this.style.inset = "0";
+        }
+        if (!this.style.pointerEvents) {
+            this.style.pointerEvents = "none";
+        }
+    }
+    get scrim() {
+        var _a;
+        return (_a = this.getAttribute("scrim")) !== null && _a !== void 0 ? _a : "none";
+    }
+    set scrim(value) {
+        reflectString(this, "scrim", value);
+    }
+    get scrimOpacity() {
+        const raw = this.getAttribute("scrim-opacity");
+        const parsed = raw == null ? 0.6 : Number(raw);
+        return Number.isFinite(parsed) ? parsed : 0.6;
+    }
+    set scrimOpacity(value) {
+        if (value == null) {
+            this.removeAttribute("scrim-opacity");
+            return;
+        }
+        this.setAttribute("scrim-opacity", String(value));
+    }
+}
+export class LxNativeTextElement extends LxNativeBaseElement {
+    static get observedAttributes() {
+        return [
+            ...LxNativeBaseElement.observedAttributes,
+            "max-lines",
+            "dir",
+            "font-size",
+            "font-weight",
+            "line-height",
+            "text-align",
+            "color",
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: "open" });
+            this.typography = document.createElement("style");
+            shadow.append(this.typography, document.createElement("slot"));
+        }
+        this.syncTypography();
+        if (!this.style.pointerEvents) {
+            this.style.pointerEvents = "none";
+        }
+    }
+    attributeChangedCallback() {
+        this.syncTypography();
+    }
+    syncTypography() {
+        if (!this.typography)
+            return;
+        const style = document.createElement("span").style;
+        for (const name of ["font-size", "font-weight", "line-height", "text-align", "color"]) {
+            const value = this.getAttribute(name);
+            if (!value)
+                continue;
+            const cssValue = (name === "font-size" || name === "line-height") && /^\d+(\.\d+)?$/.test(value)
+                ? `${value}px` : value;
+            style.setProperty(name, cssValue);
+        }
+        // Keep DOM measurement and accessible text without painting a second native label.
+        this.typography.textContent = `:host { ${style.cssText} } slot { opacity: 0; }`;
+    }
+    get maxLines() {
+        const raw = this.getAttribute("max-lines");
+        if (raw == null)
+            return null;
+        const parsed = Number(raw);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    set maxLines(value) {
+        reflectString(this, "max-lines", value == null ? null : String(value));
+    }
+}
+export class LxNativeButtonElement extends LxNativeBaseElement {
+    constructor() {
+        super(...arguments);
+        this.onAccessibleClick = (event) => {
+            this.dispatchAccessiblePress(event.detail === 0 ? "keyboard" : "pointer");
+        };
+        this.onAccessibleKeyDown = (event) => {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            this.dispatchAccessiblePress("keyboard");
+        };
+    }
+    dispatchAccessiblePress(source) {
+        if (this.disabled || this.loading)
+            return;
+        this.dispatchEvent(new CustomEvent("press", {
+            bubbles: true,
+            detail: { source },
+        }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.shadowRoot) {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `
+        :host { display: inline-flex; box-sizing: border-box; align-items: center;
+          justify-content: center; gap: .4em; min-height: 32px; padding: 6px 12px; border-radius: 10px; }
+        :host([hidden]:not([hidden="false"])) { display: none; }
+        :host([size="compact"]) { min-height: 26px; padding: 4px 8px; }
+        :host([icon-position="end"]) { flex-direction: row-reverse; }
+        .icon { width: 1em; height: 1em; flex: none; }
+        span, slot { opacity: 0; }
+        [hidden] { display: none; }
+      `;
+            this.measuredLabel = document.createElement("span");
+            this.measuredIcon = document.createElement("span");
+            this.measuredIcon.className = "icon";
+            this.measuredIcon.setAttribute("aria-hidden", "true");
+            this.contentSlot = document.createElement("slot");
+            shadow.append(style, this.measuredIcon, this.measuredLabel, this.contentSlot);
+        }
+        this.syncMeasurement();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "button");
+        if (!this.hasAttribute("tabindex"))
+            this.tabIndex = 0;
+        this.syncAccessibility();
+        this.addEventListener("click", this.onAccessibleClick);
+        this.addEventListener("keydown", this.onAccessibleKeyDown);
+        this.registerEventBridge();
+    }
+    registerEventBridge() {
+        var _a;
+        const id = ensureComponentId(this, "lx-native-button");
+        if (this.registeredId === id)
+            return;
+        (_a = this.unregisterHost) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.registeredId = id;
+        this.unregisterHost = registerNativeComponentHandler(id, (message) => {
+            applyIslandHostEvent(this, message);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.removeEventListener("click", this.onAccessibleClick);
+        this.removeEventListener("keydown", this.onAccessibleKeyDown);
+        (_a = this.unregisterHost) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unregisterHost = undefined;
+        this.registeredId = undefined;
+    }
+    attributeChangedCallback(name) {
+        if (name === "id" && this.isConnected)
+            this.registerEventBridge();
+        this.syncMeasurement();
+        this.syncAccessibility();
+    }
+    syncMeasurement() {
+        var _a;
+        if (!this.measuredLabel || !this.measuredIcon || !this.contentSlot)
+            return;
+        this.measuredLabel.textContent = (_a = this.label) !== null && _a !== void 0 ? _a : "";
+        this.measuredLabel.hidden = !this.label;
+        this.contentSlot.hidden = Boolean(this.label);
+        this.measuredIcon.hidden = !this.icon;
+    }
+    syncAccessibility() {
+        this.setAttribute("aria-disabled", String(this.disabled || this.loading));
+        this.setAttribute("aria-pressed", String(this.pressed));
+        this.setAttribute("aria-expanded", String(this.expanded));
+    }
+    static get observedAttributes() {
+        return [
+            ...LxNativeBaseElement.observedAttributes,
+            "label",
+            "icon",
+            "icon-position",
+            "intent",
+            "emphasis",
+            "size",
+            "hit-slop",
+            "disabled",
+            "pressed",
+            "expanded",
+            "loading",
+        ];
+    }
+    get label() {
+        return this.getAttribute("label");
+    }
+    set label(value) {
+        reflectString(this, "label", value);
+    }
+    get icon() {
+        return this.getAttribute("icon");
+    }
+    set icon(value) {
+        // Invalid JS values remain visible to the compiler instead of disappearing.
+        reflectString(this, "icon", value);
+    }
+    get disabled() {
+        return parseBooleanAttr(this.getAttribute("disabled"), false);
+    }
+    set disabled(value) {
+        reflectBoolean(this, "disabled", value);
+    }
+    get pressed() {
+        return parseBooleanAttr(this.getAttribute("pressed"), false);
+    }
+    set pressed(value) {
+        reflectBoolean(this, "pressed", value);
+    }
+    get expanded() {
+        return parseBooleanAttr(this.getAttribute("expanded"), false);
+    }
+    set expanded(value) {
+        reflectBoolean(this, "expanded", value);
+    }
+    get loading() {
+        return parseBooleanAttr(this.getAttribute("loading"), false);
+    }
+    set loading(value) {
+        reflectBoolean(this, "loading", value);
+    }
+}
+function elementContentRect(el) {
+    if (typeof el.getBoundingClientRect !== "function") {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    const box = el.getBoundingClientRect();
+    const scrollX = typeof window !== "undefined" ? window.scrollX || 0 : 0;
+    const scrollY = typeof window !== "undefined" ? window.scrollY || 0 : 0;
+    return {
+        x: box.left + scrollX,
+        y: box.top + scrollY,
+        width: box.width,
+        height: box.height,
+    };
+}
+function pageViewportOffset() {
+    if (typeof window === "undefined")
+        return { x: 0, y: 0 };
+    return { x: window.scrollX || 0, y: window.scrollY || 0 };
+}
+function measureNativeNodeGeometry(root) {
+    const rects = {};
+    const visibility = {};
+    const clipStacks = {};
+    for (const child of nativeDescendants(root)) {
+        const tag = child.tagName.toLowerCase();
+        const id = ensureComponentId(child, tag);
+        const rect = elementContentRect(child);
+        const clips = overflowClipStack(child);
+        rects[id] = rect;
+        visibility[id] = elementIsVisible(child) && clips.every((clip) => rectsIntersect(rect, clip));
+        clipStacks[id] = clips;
+    }
+    return { rects, visibility, clipStacks };
+}
+function nativeDescendants(root) {
+    return Array.from(root.querySelectorAll("lx-native-view,lx-native-cover,lx-native-text,lx-native-button,lx-video"))
+        .filter((element) => !isFallbackElement(element) && element.closest("lx-native-root") === root);
+}
+function elementIsVisible(element) {
+    const html = element;
+    if (typeof getComputedStyle !== "function")
+        return true;
+    const style = getComputedStyle(html);
+    if (style.display === "none" || style.visibility === "hidden" || effectiveOpacity(element) === 0) {
+        return false;
+    }
+    const rect = html.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0 || html.getClientRects().length === 0) {
+        return false;
+    }
+    if (typeof window === "undefined")
+        return true;
+    return rect.right > 0 && rect.bottom > 0 && rect.left < window.innerWidth && rect.top < window.innerHeight;
+}
+function overflowClipStack(element) {
+    if (typeof getComputedStyle !== "function")
+        return [];
+    const clips = [];
+    for (let ancestor = element.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        const style = getComputedStyle(ancestor);
+        const clipsX = style.overflowX !== "visible";
+        const clipsY = style.overflowY !== "visible";
+        if (clipsX || clipsY) {
+            const box = elementContentRect(ancestor);
+            const own = elementContentRect(element);
+            const html = ancestor;
+            clips.push({
+                x: clipsX ? box.x + html.clientLeft : own.x,
+                y: clipsY ? box.y + html.clientTop : own.y,
+                width: clipsX ? html.clientWidth : own.width,
+                height: clipsY ? html.clientHeight : own.height,
+            });
+        }
+    }
+    return clips;
+}
+function rectsIntersect(a, b) {
+    return a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y;
+}
+function nativeRootOrder(root) {
+    if (typeof document === "undefined")
+        return 0;
+    const roots = Array.from(document.querySelectorAll("lx-native-root"));
+    const index = roots.indexOf(root);
+    return index < 0 ? 0 : index;
+}
+function containsNativeRoot(node) {
+    return node instanceof Element &&
+        (node.localName === "lx-native-root" || node.querySelector("lx-native-root") !== null);
+}
+function sameRootGeneration(a, b) {
+    return a.surfaceInstanceId === b.surfaceInstanceId &&
+        a.pageInstanceId === b.pageInstanceId &&
+        a.documentInstanceId === b.documentInstanceId &&
+        a.rootKey === b.rootKey &&
+        a.rootEpoch === b.rootEpoch;
+}
+function pageRootScope(rootKey, rootEpoch) {
+    let surfaceInstanceId = "surface";
+    let pageInstanceId = "page";
+    let documentInstanceId = "doc";
+    if (typeof window !== "undefined") {
+        const cfg = window.__LX_BRIDGE_CFG;
+        if (cfg === null || cfg === void 0 ? void 0 : cfg.surfaceInstanceId)
+            surfaceInstanceId = cfg.surfaceInstanceId;
+        if (cfg === null || cfg === void 0 ? void 0 : cfg.pageInstanceId)
+            pageInstanceId = cfg.pageInstanceId;
+        const w = window;
+        if (!w.__LX_DOCUMENT_INSTANCE_ID) {
+            w.__LX_DOCUMENT_INSTANCE_ID = nextOpaqueKey("doc");
+        }
+        documentInstanceId = w.__LX_DOCUMENT_INSTANCE_ID;
+    }
+    return { surfaceInstanceId, pageInstanceId, documentInstanceId, rootKey, rootEpoch };
+}
+function defineOnce(tag, ctor) {
+    if (typeof customElements === "undefined")
+        return;
+    if (customElements.get(tag))
+        return;
+    customElements.define(tag, ctor);
+}
+export function registerNativeRootComponent() {
+    defineOnce("lx-native-root", LxNativeRootElement);
+}
+export function registerNativeViewComponent() {
+    defineOnce("lx-native-view", LxNativeViewElement);
+}
+export function registerNativeCoverComponent() {
+    defineOnce("lx-native-cover", LxNativeCoverElement);
+}
+export function registerNativeTextComponent() {
+    defineOnce("lx-native-text", LxNativeTextElement);
+}
+export function registerNativeButtonComponent() {
+    defineOnce("lx-native-button", LxNativeButtonElement);
+}
+export function registerInlineNativeAuthorComponents() {
+    registerNativeRootComponent();
+    registerNativeViewComponent();
+    registerNativeCoverComponent();
+    registerNativeTextComponent();
+    registerNativeButtonComponent();
+}
+export function structureErrorFromUnknown(message) {
+    return nativeError("NATIVE_ROOT_INVALID_STRUCTURE", message);
+}