@octane-xplat/nativescript-mason-core 0.0.1 → 1.0.0-beta.0

package/common.js

@@ -0,0 +1,2645 @@
+var _a, _b, _c, _d;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { CustomLayoutView, Utils, View as NSView, getViewById, widthProperty, heightProperty, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, textDecorationProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, backgroundColorProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, paddingBottomProperty, zIndexProperty, directionProperty, PseudoClassHandler, } from '@nativescript/core';
+import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+// The per-corner radius and per-side colour longhands core's `border-radius`
+// / `border-color` shorthands expand into. They live in the styling module
+// rather than core's root export, unlike the border *width* longhands above.
+import { backgroundInternalProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
+import { _forceStyleUpdate } from './utils';
+import { borderRadiusCorners, composeBorderRadius, isCssLength, parseCornerRadius, toCamelCase } from './css-shorthands';
+import { originXProperty, originYProperty } from '@nativescript/core/ui/core/view';
+import { animateTransforms } from './css-keyframes';
+import { adoptForeignLayout, invalidateOnLayoutRequest, releaseForeignLayout } from './foreign-layout';
+import { Style, nodeHelper, cssLengthToDip, resolveCssMathIn } from './style';
+import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
+import { parseCssTransform } from './css-transform';
+import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderTopStyleProperty, borderRightStyleProperty, borderBottomStyleProperty, borderLeftStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, installMasonSizeUnits, masonRawDeclaration, } from './properties';
+import { masonLayout } from './display-density';
+import { isMasonView_, isTextChild_, isText_, isPlaceholder_, native_, pseudoStyles_, borderRadiusCorners_, borderSideColors_, eventType_, touchAction_ } from './symbols';
+import { Tree } from './tree';
+import { masonEngine } from './panel-helpers';
+import { compile } from './pseudo';
+function getViewStyle(view) {
+    const ret = (__ANDROID__ ? view.get() : view.deref());
+    return ret._styleHelper;
+}
+function getWeakRefValue(value) {
+    if (!value)
+        return null;
+    const maybeWeakRef = value;
+    if (typeof maybeWeakRef.get === 'function')
+        return maybeWeakRef.get();
+    if (typeof maybeWeakRef.deref === 'function')
+        return maybeWeakRef.deref();
+    return value;
+}
+function nativeOwnerFor(nativeView) {
+    return getWeakRefValue(nativeView?.__masonOwner);
+}
+function nativeViewFor(owner) {
+    return owner?.nativeViewProtected ?? owner?.[native_];
+}
+function masonNativeEventName(eventName) {
+    switch (eventName) {
+        case 'tap':
+        case 'click':
+            return 'click';
+        case 'beforeinput':
+        case 'input':
+        case 'change':
+        case 'cancel':
+        case 'compositionstart':
+        case 'compositionupdate':
+        case 'compositionend':
+        case 'focus':
+        case 'blur':
+        case 'keydown':
+        case 'scroll':
+        case 'scrollend':
+            return eventName;
+        default:
+            return null;
+    }
+}
+const SCROLL_POSITIONS = { start: 0, center: 1, end: 2, nearest: 3 };
+// Scroll offsets and sizes are read from the native view on demand, in CSS pixels.
+function nativeScrollOffset(view, vertical) {
+    const native = view[native_];
+    if (!native)
+        return 0;
+    if (__ANDROID__) {
+        const scroll = org.nativescript.mason.masonkit.WebScroll;
+        return masonLayout.toDeviceIndependentPixels(vertical ? scroll.scrollTop(native) : scroll.scrollLeft(native));
+    }
+    if (__APPLE__) {
+        return (vertical ? native.mason_scrollTop : native.mason_scrollLeft) ?? 0;
+    }
+    if (false) {
+        return (vertical ? masonEngine().ScrollTop(native) : masonEngine().ScrollLeft(native)) ?? 0;
+    }
+    return 0;
+}
+function nativeScrollMetric(view, metric) {
+    const native = view[native_];
+    if (!native)
+        return 0;
+    let value = 0;
+    if (__ANDROID__) {
+        value = masonLayout.toDeviceIndependentPixels(org.nativescript.mason.masonkit.WebScroll[metric](native));
+    }
+    else if (__APPLE__) {
+        value = native[`mason_${metric}`];
+    }
+    else if (false) {
+        value = masonEngine()[metric.charAt(0).toUpperCase() + metric.slice(1)](native);
+    }
+    // Whole pixels, as on the web.
+    return Math.round(value || 0);
+}
+/** NaN keeps an axis. Before the native view exists, the request is kept for `initNativeView`. */
+function nativeScrollTo(view, left, top, smooth) {
+    const native = view[native_];
+    if (!native) {
+        const pending = (view._masonPendingScroll ?? (view._masonPendingScroll = { left: NaN, top: NaN, smooth }));
+        if (!isNaN(left))
+            pending.left = left;
+        if (!isNaN(top))
+            pending.top = top;
+        pending.smooth = smooth;
+        return;
+    }
+    if (__ANDROID__) {
+        org.nativescript.mason.masonkit.WebScroll.scrollTo(native, isNaN(left) ? NaN : masonLayout.toDevicePixels(left), isNaN(top) ? NaN : masonLayout.toDevicePixels(top), smooth);
+    }
+    else if (__APPLE__) {
+        native.mason_scrollTo(left, top, smooth);
+    }
+    else if (false) {
+        masonEngine().ScrollTo(native, left, top, smooth);
+    }
+}
+/** Non-finite scroll coordinates become 0, as on the web. */
+function scrollCoordinate(value) {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : 0;
+}
+function findOwnerForNativeView(owner, nativeView) {
+    if (!owner || !nativeView)
+        return null;
+    const ownNativeView = nativeViewFor(owner);
+    if (ownNativeView === nativeView || owner?.[native_] === nativeView)
+        return owner;
+    const children = owner._children ?? owner._viewChildren;
+    if (!children)
+        return null;
+    for (const child of children) {
+        const match = findOwnerForNativeView(child, nativeView);
+        if (match)
+            return match;
+    }
+    return null;
+}
+function masonLength(value) {
+    return isCssLength(value) ? value.css : value;
+}
+/** A core `Length` (number of dip, or `{ value, unit }`) as a CSS string. */
+function lengthToCssString(value) {
+    if (value == null) {
+        return '0';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return `${value}px`;
+    }
+    const unit = value.unit;
+    const amount = value.value ?? 0;
+    return unit === '%' ? `${amount * 100}%` : `${amount}px`;
+}
+/**
+ * A core colour value as a CSS string. Duck-typed rather than
+ * `instanceof Color` on purpose: a `Color` can arrive from a different
+ * `@nativescript/core` copy, where `instanceof` fails.
+ */
+function colorToCssString(value) {
+    if (value == null) {
+        return 'transparent';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    const hex = value.hex;
+    if (typeof hex === 'string') {
+        return hex;
+    }
+    return String(value);
+}
+function backgroundImageToCssString(value) {
+    const gradient = value;
+    if (value && typeof value === 'object' && typeof gradient.angle === 'number' && Array.isArray(gradient.colorStops)) {
+        const stops = gradient.colorStops.map((stop) => (stop.offset ? `${colorToCssString(stop.color)} ${stop.offset.value * 100}%` : colorToCssString(stop.color)));
+        return `linear-gradient(${gradient.angle}rad, ${stops.join(', ')})`;
+    }
+    return value == null ? 'none' : String(value);
+}
+// Windows raises no pressed state natively, so :active follows the pointer, as core's Button does.
+const WINDOWS_ACTIVE_STATES = ['active', 'highlighted'];
+function onWindowsActiveTouch(args) {
+    if (args.action === 'down') {
+        for (const state of WINDOWS_ACTIVE_STATES)
+            args.object._addVisualState(state);
+    }
+    else if (args.action === 'up' || args.action === 'cancel') {
+        clearWindowsActive(args.object);
+    }
+}
+// Core's touch gesture reports no cancel, and a release outside the view isn't delivered to it.
+function onWindowsActiveLeave(args) {
+    clearWindowsActive(args.object);
+}
+function clearWindowsActive(view) {
+    for (const state of WINDOWS_ACTIVE_STATES)
+        view._removeVisualState(state);
+}
+function onWindowsHoverEnter(args) {
+    args.object._addVisualState('hover');
+}
+function onWindowsHoverLeave(args) {
+    args.object._removeVisualState('hover');
+}
+function onWindowsFocus() {
+    this._addVisualState('focus');
+}
+function onWindowsBlur() {
+    this._removeVisualState('focus');
+}
+/**
+ * iOS: sets the frame of a Mason root, a Mason view whose parent is a core view. Core leaves
+ * the safe area to each view (`View._modifyNativeViewFrame`), so the root honours
+ * `iosOverflowSafeArea` the same way: when the frame grows past the safe area it lays out
+ * again at the new size. Like core views, it raises `layoutChanged` when the frame changes.
+ */
+/** Reports the device px size `mason_measure` returns, packed as width * 2^24 + height. */
+export function setMeasuredFromNative(view, packed) {
+    const width = Math.floor(packed / 16777216);
+    view.setMeasuredDimension(width, packed - width * 16777216);
+}
+export function setRootNativeViewFrame(view, nativeView, frame) {
+    // Place the view before adjusting, as core does: the safe-area math reads its
+    // position on screen, and a stale one applied the insets twice.
+    nativeView.frame = frame;
+    const adjusted = view.applySafeAreaInsets(frame) ?? frame;
+    if (!CGRectEqualToRect(adjusted, frame)) {
+        nativeView.frame = adjusted;
+    }
+    // A host can place a root beyond its measured safe-area size even when no
+    // inset adjustment was needed. Recompute at the final frame in either case.
+    const width = masonLayout.toDevicePixels(adjusted.size.width);
+    const height = masonLayout.toDevicePixels(adjusted.size.height);
+    const layout = view.ios.node.computedLayout;
+    if (Math.round(layout.width) !== Math.round(width) || Math.round(layout.height) !== Math.round(height)) {
+        view.ios.mason_computeWithSize(width, height);
+        view.ios.mason_markRootComputeAppliedWithSize(width, height);
+    }
+    const previous = view._masonRootFrame;
+    if (!previous || !CGRectEqualToRect(previous, adjusted)) {
+        view._masonRootFrame = adjusted;
+        view._raiseLayoutChangedEvent();
+    }
+}
+const TEARDOWN_SLICE_MS = 8;
+// Reading the clock costs more than a teardown on some devices.
+const TEARDOWNS_PER_CLOCK_READ = 16;
+// Mason roots whose requestLayout already climbed to the page in this turn.
+let climbedRoots = null;
+function markClimbed(root) {
+    if (!climbedRoots) {
+        climbedRoots = new Set();
+        queueMicrotask(() => (climbedRoots = null));
+    }
+    climbedRoots.add(root);
+}
+// A layout in between clears core's flag, so the next request climbs again.
+function climbedThisTurn(root) {
+    return !!climbedRoots?.has(root) && !!root.isLayoutRequested;
+}
+export class ViewBase extends CustomLayoutView {
+    _masonCheckChild(child) {
+        if (!(child instanceof NSView))
+            throw new TypeError('Mason core children must be NativeScript views.');
+        if (child.parent)
+            throw new Error('Remove the child from its parent before inserting it.');
+        for (let ancestor = this; ancestor; ancestor = ancestor.parent) {
+            if (ancestor === child)
+                throw new Error('A Mason core container cannot contain itself or an ancestor.');
+        }
+    }
+    addChild(child) {
+        this.insertChild(child, this._children.length);
+    }
+    insertBefore(child, reference) {
+        const index = reference == null ? this._children.length : this._children.indexOf(reference);
+        if (index < 0)
+            throw new Error('The reference view is not a child of this container.');
+        this.insertChild(child, index);
+    }
+    insertChild(child, atIndex) {
+        this._masonCheckChild(child);
+        if (!Number.isInteger(atIndex) || atIndex < 0 || atIndex > this._children.length) {
+            throw new RangeError('The child index is outside the container.');
+        }
+        this._masonSettleNativeAdds();
+        this._invalidateAttachCursor();
+        this._children.splice(atIndex, 0, child);
+        try {
+            this._addView(child, atIndex);
+        }
+        catch (error) {
+            this._children.splice(atIndex, 1);
+            throw error;
+        }
+    }
+    replaceChild(child, atIndex) {
+        const previous = this._children[atIndex];
+        if (!Number.isInteger(atIndex) || !previous)
+            throw new RangeError('The child index is outside the container.');
+        if (child === previous)
+            return;
+        this._masonCheckChild(child);
+        this.removeChild(previous);
+        this.insertChild(child, atIndex);
+    }
+    removeChild(child) {
+        const index = this._children.indexOf(child);
+        if (index < 0)
+            return;
+        this._masonSettleNativeAdds();
+        this._invalidateAttachCursor();
+        this._children.splice(index, 1);
+        this._removeView(child);
+    }
+    removeChildren() {
+        this._masonSettleNativeAdds();
+        this._invalidateAttachCursor();
+        while (this._children.length)
+            this._removeView(this._children.pop());
+        this.requestLayout();
+    }
+    _nativeIndexFor(atIndex) {
+        let count = 0;
+        for (let index = 0; index < Math.min(atIndex, this._children.length); index++) {
+            if (this._children[index]._isMasonChild)
+                count++;
+        }
+        return count;
+    }
+    _tearDownUI(force) {
+        if ((__ANDROID__ || __APPLE__ || false) && !force && !this.reusable && this._context && this.nativeViewProtected) {
+            // A keyed move tears down and re-adds within one patch. Detach only this
+            // element and defer the recursive teardown; _setupUI cancels it on re-attach.
+            if (this.parent) {
+                this.parent._removeViewFromNativeVisualTree(this);
+            }
+            this._masonPendingTeardown = true;
+            ViewBase._pendingTeardowns.push(this);
+            if (!ViewBase._teardownScheduled) {
+                ViewBase._teardownScheduled = true;
+                setTimeout(() => ViewBase._drainTeardowns(), 0);
+            }
+            return;
+        }
+        super._tearDownUI(force);
+    }
+    _setupUI(context, atIndex, parentIsLoaded) {
+        if ((__ANDROID__ || __APPLE__ || false) && this._masonPendingTeardown) {
+            this._masonPendingTeardown = false;
+            if (this._context === context) {
+                // core 9.1 renamed mIsRootView to the private _isRootView
+                const isRootView = this._isRootView ?? this.mIsRootView;
+                if (!isRootView && this.parent && !this._isAddedToNativeVisualTree) {
+                    const nativeIndex = this.parent._childIndexToNativeChildIndex(atIndex ?? -1);
+                    this._isAddedToNativeVisualTree = this.parent._addViewToNativeVisualTree(this, nativeIndex);
+                }
+                return;
+            }
+        }
+        super._setupUI(context, atIndex, parentIsLoaded);
+    }
+    // Core's CustomLayoutView finds the child with a WinRT call per sibling. Mason's containers remove
+    // their children natively themselves, so only core's bookkeeping is kept.
+    _removeViewFromNativeVisualTree(child) {
+        releaseForeignLayout(child);
+        if (false) {
+            child._isAddedToNativeVisualTree = false;
+            return;
+        }
+        super._removeViewFromNativeVisualTree(child);
+    }
+    /** Mirror a plain child's CSS layout into its Mason leaf; containers call this after the native insert. */
+    _masonAdoptForeign(child) {
+        adoptForeignLayout(child);
+    }
+    _masonFinishTeardown() {
+        if (!this._masonPendingTeardown) {
+            return;
+        }
+        this._masonPendingTeardown = false;
+        super._tearDownUI(true);
+    }
+    static _drainTeardowns() {
+        ViewBase._teardownScheduled = false;
+        const deadline = Date.now() + TEARDOWN_SLICE_MS;
+        let done = 0;
+        while (ViewBase._pendingTeardowns.length > 0) {
+            const view = ViewBase._pendingTeardowns.shift();
+            view._masonFinishTeardown();
+            if (++done % TEARDOWNS_PER_CLOCK_READ === 0 && Date.now() >= deadline) {
+                break;
+            }
+        }
+        if (ViewBase._pendingTeardowns.length > 0) {
+            ViewBase._teardownScheduled = true;
+            setTimeout(() => ViewBase._drainTeardowns(), 0);
+        }
+    }
+    /**
+     * Enable or disable CSS Preflight (web-normalised / Tailwind-like) defaults
+     * for the entire Mason tree.
+     *
+     * When `true` every element starts from a clean, browser-normalised slate:
+     *  - `box-sizing: border-box`
+     *  - `margin: 0`, `padding: 0`, `border-width: 0`
+     *  - `background: transparent`
+     *  - `list-style: none` on `<ul>` / `<ol>`
+     *  - `display: block` on `<img>` (replaced elements)
+     *
+     * This is a **tree-global** flag; it should ideally be set **before** views are
+     * created so that all new nodes inherit the preflight baseline.  Changing it
+     * after views have been created re-seeds the arena defaults but does not
+     * retroactively restyle individually modified nodes.
+     *
+     * @example
+     * ```ts
+     * import { ViewBase } from '@octane-xplat/nativescript-masonkit';
+     * ViewBase.preflight = true; // enable at app startup
+     * ```
+     */
+    static get preflight() {
+        return Tree.instance.preflight;
+    }
+    static set preflight(value) {
+        Tree.instance.preflight = value;
+    }
+    constructor() {
+        super();
+        this._children = [];
+        this[_a] = false;
+        this._masonPendingTeardown = false;
+        this[_b] = false;
+        this[_c] = false;
+        this[_d] = {};
+        this._pendingEventsRegistration = [];
+        /**
+         * iOS: the views in this subtree a root's layout pass must visit (non-Mason children, which core
+         * lays out, and Mason views listening to layoutChanged). The pass skips subtrees where it's 0.
+         */
+        this._masonLayoutWork = 0;
+        this._windowsActiveId = 0;
+        this._masonClimbTurn = null;
+        // `width`/`height` are core CssAnimationProperties whose stylesheet accessor
+        // is non-configurable, so units Mason understands but core does not (`vh`,
+        // `rem`, `pt`, …) have to be resolved on this view's own Style object.
+        installMasonSizeUnits(this.style);
+        if (__ANDROID__) {
+            this._isPaddingRelative = false;
+        }
+        // Core's ContainerView defaults this to true: the view extends under the
+        // status bar and home indicator, and core layouts pad their children by
+        // the insets. Mason lays children out from its own style, so a root kept
+        // that default drew its content under the bars. As on the web, content
+        // stays in the safe area; set it to true for a full-bleed root (like
+        // `viewport-fit=cover`) and pad it yourself.
+        this.iosOverflowSafeArea = false;
+    }
+    _rememberNativeOwner(nativeView = nativeViewFor(this)) {
+        if (!nativeView)
+            return;
+        try {
+            nativeView.__masonOwner = new WeakRef(this);
+        }
+        catch (_) {
+            // Some host objects do not accept expandos; fallback tree matching still works.
+        }
+    }
+    /**
+     * Returns the top-most Mason/NativeScript element at a point in this view's
+     * visible local coordinate space, similar to the browser's elementFromPoint().
+     * `x` and `y` are CSS pixels (dips) on every platform, the unit touch events report.
+     */
+    elementFromPoint(x, y) {
+        const nativeView = nativeViewFor(this) ?? this._view;
+        if (!nativeView)
+            return null;
+        this._rememberNativeOwner(nativeView);
+        let nativeHit = null;
+        if (__ANDROID__ && typeof nativeView.elementFromPoint === 'function') {
+            // Android views hit-test in device pixels.
+            nativeHit = nativeView.elementFromPoint(masonLayout.toDevicePixels(x), masonLayout.toDevicePixels(y));
+        }
+        else if (__APPLE__) {
+            const hitTest = nativeView.mason_elementFromPointY ?? nativeView.mason_elementFromPoint ?? nativeView.elementFromPoint;
+            if (typeof hitTest === 'function') {
+                nativeHit = hitTest.call(nativeView, x, y);
+            }
+        }
+        else if (false && typeof masonEngine().ElementFromPoint === 'function') {
+            nativeHit = masonEngine().ElementFromPoint(nativeView, x, y);
+        }
+        if (!nativeHit)
+            return null;
+        const known = nativeOwnerFor(nativeHit);
+        if (known)
+            return known;
+        // Owners are remembered on first hit rather than for every view at init.
+        const found = findOwnerForNativeView(this, nativeHit);
+        found?._rememberNativeOwner?.(nativeHit);
+        return found;
+    }
+    // Scrolling. Size reads run a pending layout first; "scroll"/"scrollend" are only raised for
+    // an element with a listener.
+    /** Vertical scroll offset; setting it scrolls, clamped to the scroll range. */
+    get scrollTop() {
+        return nativeScrollOffset(this, true);
+    }
+    set scrollTop(value) {
+        nativeScrollTo(this, NaN, scrollCoordinate(value), false);
+    }
+    /** Horizontal scroll offset; setting it scrolls, clamped to the scroll range. */
+    get scrollLeft() {
+        return nativeScrollOffset(this, false);
+    }
+    set scrollLeft(value) {
+        nativeScrollTo(this, scrollCoordinate(value), NaN, false);
+    }
+    /** Content width, at least `clientWidth`. */
+    get scrollWidth() {
+        return nativeScrollMetric(this, 'scrollWidth');
+    }
+    /** Content height, at least `clientHeight`. */
+    get scrollHeight() {
+        return nativeScrollMetric(this, 'scrollHeight');
+    }
+    /** Padding box width. */
+    get clientWidth() {
+        return nativeScrollMetric(this, 'clientWidth');
+    }
+    /** Padding box height. */
+    get clientHeight() {
+        return nativeScrollMetric(this, 'clientHeight');
+    }
+    scrollTo(xOrOptions, y) {
+        if (xOrOptions !== null && typeof xOrOptions === 'object') {
+            const { left, top, behavior } = xOrOptions;
+            nativeScrollTo(this, left === undefined ? NaN : scrollCoordinate(left), top === undefined ? NaN : scrollCoordinate(top), behavior === 'smooth');
+        }
+        else {
+            nativeScrollTo(this, scrollCoordinate(xOrOptions), scrollCoordinate(y), false);
+        }
+    }
+    scroll(xOrOptions, y) {
+        this.scrollTo(xOrOptions, y);
+    }
+    scrollBy(xOrOptions, y) {
+        let dx;
+        let dy;
+        let smooth = false;
+        if (xOrOptions !== null && typeof xOrOptions === 'object') {
+            dx = scrollCoordinate(xOrOptions.left);
+            dy = scrollCoordinate(xOrOptions.top);
+            smooth = xOrOptions.behavior === 'smooth';
+        }
+        else {
+            dx = scrollCoordinate(xOrOptions);
+            dy = scrollCoordinate(y);
+        }
+        // Relative to a request still waiting for the native view, if any.
+        const pending = this._masonPendingScroll;
+        const left = !dx ? NaN : (pending && !isNaN(pending.left) ? pending.left : this.scrollLeft) + dx;
+        const top = !dy ? NaN : (pending && !isNaN(pending.top) ? pending.top : this.scrollTop) + dy;
+        nativeScrollTo(this, left, top, smooth);
+    }
+    /** Scrolls the scroll containers above this element so it's visible. */
+    scrollIntoView(arg) {
+        const native = this[native_];
+        if (!native)
+            return;
+        const options = arg !== null && typeof arg === 'object' ? arg : { block: arg === false ? 'end' : 'start' };
+        const block = SCROLL_POSITIONS[options.block ?? 'start'] ?? 0;
+        const inline = SCROLL_POSITIONS[options.inline ?? 'nearest'] ?? 3;
+        const smooth = options.behavior === 'smooth';
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.WebScroll.scrollIntoView(native, block, inline, smooth);
+        }
+        else if (__APPLE__) {
+            native.mason_scrollIntoView(block, inline, smooth);
+        }
+        else if (false) {
+            masonEngine().ScrollIntoView(native, block, inline, smooth);
+        }
+    }
+    _registerNativeEvent(arg, callback, thisArg) {
+        if (!this[native_]) {
+            this._pendingEventsRegistration.push({ arg, callback, thisArg });
+            return;
+        }
+        //@ts-ignore
+        if (this._view) {
+            if (__ANDROID__) {
+                const ref = new WeakRef(this);
+                const cb = new kotlin.jvm.functions.Function1({
+                    invoke(event) {
+                        const owner = ref.get();
+                        if (owner) {
+                            const ret = wrapNativeEvent(arg);
+                            ret[native_] = event;
+                            ret._target = owner;
+                            callback.call(thisArg || owner, ret);
+                        }
+                    },
+                });
+                //@ts-ignore
+                const id = this._view.addEventListener(arg, cb);
+                callback['mason:event:id'] = id;
+            }
+            if (__APPLE__) {
+                //@ts-ignore
+                const id = this._view.mason_addEventListener(arg, (event) => {
+                    const ret = wrapNativeEvent(arg);
+                    ret[native_] = event;
+                    ret._target = this;
+                    callback.call(thisArg || this, ret);
+                });
+                callback['mason:event:id'] = id;
+            }
+            if (false) {
+                if (typeof masonEngine().AddEventListener === 'function') {
+                    const ref = new WeakRef(this);
+                    const listener = globalThis.NSWinRT.asDelegate('NativeScript.Mason.EventListener', (event) => {
+                        const owner = ref.deref();
+                        if (!owner)
+                            return;
+                        const ret = wrapNativeEvent(arg);
+                        ret[native_] = event;
+                        ret._target = owner;
+                        callback.call(thisArg || owner, ret);
+                    });
+                    callback['mason:event:id'] = masonEngine().AddEventListener(this._view, arg, listener);
+                    callback['mason:event:listener'] = listener;
+                }
+                else if (arg === 'click' || arg === 'tap') {
+                    try {
+                        const NSWinRT_ = globalThis.NSWinRT;
+                        const MUX = globalThis.Microsoft;
+                        const owner = this;
+                        const view = this._view;
+                        const delegate = NSWinRT_.asDelegate('Microsoft.UI.Xaml.Input.TappedEventHandler', (_sender, _e) => {
+                            const ret = {};
+                            ret[native_] = _e;
+                            ret._target = owner;
+                            callback.call(thisArg || owner, ret);
+                        });
+                        if (view.Background == null && MUX?.UI?.Xaml?.Media?.SolidColorBrush) {
+                            view.Background = new MUX.UI.Xaml.Media.SolidColorBrush(MUX.UI.Colors.Transparent);
+                        }
+                        const tappedEvent = MUX?.UI?.Xaml?.UIElement?.TappedEvent ?? view.TappedEvent;
+                        let attached = false;
+                        if (tappedEvent && typeof view.AddHandler === 'function') {
+                            try {
+                                view.AddHandler(tappedEvent, delegate, true);
+                                callback['mason:event:tapped'] = tappedEvent;
+                                attached = true;
+                            }
+                            catch (_e) { }
+                        }
+                        if (!attached) {
+                            view.Tapped = delegate;
+                        }
+                        callback['mason:event:id'] = delegate;
+                    }
+                    catch (_) { }
+                }
+                else if (typeof this._view.AddEventListener === 'function') {
+                    const ref = new WeakRef(this);
+                    const listener = globalThis.NSWinRT.asDelegate('NativeScript.Mason.EventListener', (event) => {
+                        const owner = ref.deref();
+                        if (!owner)
+                            return;
+                        const ret = wrapNativeEvent(arg);
+                        ret[native_] = event;
+                        ret._target = owner;
+                        callback.call(thisArg || owner, ret);
+                    });
+                    callback['mason:event:id'] = this._view.AddEventListener(arg, listener);
+                    // Held so the delegate isn't collected.
+                    callback['mason:event:listener'] = listener;
+                }
+            }
+        }
+    }
+    _unregisterNativeEvent(arg, callback, thisArg) {
+        const id = callback['mason:event:id'];
+        if (!this[native_]) {
+            this._pendingEventsRegistration = this._pendingEventsRegistration.filter((registration) => {
+                return !(registration.arg === arg && registration.callback === callback && registration.thisArg === thisArg);
+            });
+            return;
+        }
+        //@ts-ignore
+        if (this._view) {
+            if (__ANDROID__) {
+                if (id) {
+                    //@ts-ignore
+                    const removed = this._view.removeEventListener(arg, id);
+                    callback['mason:event:id'] = undefined;
+                }
+            }
+            if (__APPLE__) {
+                if (id) {
+                    //@ts-ignore
+                    const removed = this._view.mason_removeEventListenerId(arg, id);
+                    callback['mason:event:id'] = undefined;
+                }
+            }
+            if (false) {
+                if (id && callback['mason:event:listener'] && !callback['mason:event:tapped']) {
+                    masonEngine().RemoveEventListener(this._view, arg, id);
+                    callback['mason:event:id'] = undefined;
+                    callback['mason:event:listener'] = undefined;
+                }
+                else if (id && (arg === 'click' || arg === 'tap')) {
+                    try {
+                        const view = this._view;
+                        const tappedEvent = callback['mason:event:tapped'];
+                        if (tappedEvent && typeof view.RemoveHandler === 'function') {
+                            view.RemoveHandler(tappedEvent, id);
+                        }
+                        else if (view) {
+                            view.Tapped = null;
+                        }
+                    }
+                    catch (_) { }
+                    callback['mason:event:id'] = undefined;
+                    callback['mason:event:tapped'] = undefined;
+                }
+                else if (id && typeof this._view.RemoveEventListener === 'function') {
+                    this._view.RemoveEventListener(arg, id);
+                    callback['mason:event:id'] = undefined;
+                    callback['mason:event:listener'] = undefined;
+                }
+            }
+        }
+    }
+    /** Hands `touch-action` to the native node, where the scroll views read it. */
+    _applyTouchAction() {
+        const flags = this[touchAction_];
+        const native = this[native_];
+        if (flags === undefined || !native)
+            return;
+        const node = native.node ?? (__IOS__ ? this.ios?.node : undefined);
+        if (node)
+            node.touchAction = flags;
+    }
+    initNativeView() {
+        super.initNativeView();
+        this._applyTouchAction();
+        const scroll = this._masonPendingScroll;
+        if (scroll) {
+            this._masonPendingScroll = undefined;
+            nativeScrollTo(this, scroll.left, scroll.top, scroll.smooth);
+        }
+        if (this._pendingEventsRegistration.length > 0) {
+            const pending = this._pendingEventsRegistration.splice(0);
+            for (const registration of pending) {
+                this._registerNativeEvent(registration.arg, registration.callback, registration.thisArg);
+            }
+        }
+    }
+    _setNativeViewFrame(nativeView, frame) {
+        // nativeView.frame = frame;
+    }
+    _masonAddLayoutWork(delta) {
+        // Up to the root: a non-Mason parent is laid out by core and its Mason roots keep their own count.
+        let view = this;
+        while (view?.[isMasonView_]) {
+            view._masonLayoutWork += delta;
+            view = view.parent;
+        }
+    }
+    _masonListensToLayout() {
+        return this.hasListeners(NSView.layoutChangedEvent);
+    }
+    _addViewCore(view, atIndex) {
+        // Before setup: listeners the child gains while loading add themselves through `parent`.
+        if (__APPLE__) {
+            const work = view?.[isMasonView_] ? view._masonLayoutWork : 1;
+            if (work)
+                this._masonAddLayoutWork(work);
+        }
+        // @ts-ignore
+        super._addViewCore(view, atIndex);
+    }
+    _removeViewCore(view) {
+        // @ts-ignore
+        super._removeViewCore(view);
+        // After teardown: listeners removed while unloading already subtracted themselves.
+        if (__APPLE__) {
+            const work = view?.[isMasonView_] ? view._masonLayoutWork : 1;
+            if (work)
+                this._masonAddLayoutWork(-work);
+        }
+    }
+    addEventListener(arg, callback, thisArg) {
+        const listened = __APPLE__ && this._masonListensToLayout();
+        this._addEventListener(arg, callback, thisArg);
+        if (__APPLE__ && !listened && this._masonListensToLayout())
+            this._masonAddLayoutWork(1);
+    }
+    removeEventListener(arg, callback, thisArg) {
+        const listened = __APPLE__ && this._masonListensToLayout();
+        this._removeEventListener(arg, callback, thisArg);
+        if (__APPLE__ && listened && !this._masonListensToLayout())
+            this._masonAddLayoutWork(-1);
+    }
+    _addEventListener(arg, callback, thisArg) {
+        if (typeof thisArg === 'boolean') {
+            thisArg = {
+                capture: thisArg,
+            };
+        }
+        if (typeof arg !== 'string') {
+            super.addEventListener(arg, callback, thisArg);
+            return;
+        }
+        const nativeEventName = masonNativeEventName(arg);
+        if (nativeEventName) {
+            super.addEventListener(nativeEventName, callback, thisArg);
+            this._registerNativeEvent(nativeEventName, callback, thisArg);
+            return;
+        }
+        super.addEventListener(arg, callback, thisArg);
+    }
+    _removeEventListener(arg, callback, thisArg) {
+        if (typeof thisArg === 'boolean') {
+            thisArg = {
+                capture: thisArg,
+            };
+        }
+        if (typeof arg === 'string') {
+            const nativeEventName = masonNativeEventName(arg);
+            if (nativeEventName) {
+                super.removeEventListener(nativeEventName, callback, thisArg);
+                this._unregisterNativeEvent(nativeEventName, callback, thisArg);
+                return;
+            }
+        }
+        super.removeEventListener(arg, callback, thisArg);
+    }
+    _applyPseudoClassStyles(pseudoClass, view, styles) {
+        if (pseudoClass && styles && pseudoClass in styles) {
+            const current = styles[pseudoClass];
+            //@ts-ignore
+            const existing = this[pseudoStyles_]?.[pseudoClass];
+            const style = existing ?? Style.fromPseudo(pseudoClass, this, view);
+            if (style) {
+                for (const prop in current) {
+                    // ruleset props are kebab-case; Style only has camelCase accessors.
+                    style[toCamelCase(prop)] = current[prop];
+                }
+                this[pseudoStyles_][pseudoClass] = style;
+            }
+        }
+    }
+    _hoverHandler(subscribe) {
+        const styles = compile(this);
+        //@ts-ignore
+        this._applyPseudoClassStyles('hover', this._view, styles);
+        if (false) {
+            if (subscribe) {
+                this.on('mouseEnter', onWindowsHoverEnter);
+                this.on('mouseLeave', onWindowsHoverLeave);
+            }
+            else {
+                this.off('mouseEnter', onWindowsHoverEnter);
+                this.off('mouseLeave', onWindowsHoverLeave);
+                this._removeVisualState('hover');
+            }
+        }
+    }
+    _handler(subscribe) {
+        const styles = compile(this);
+        //@ts-ignore
+        this._applyPseudoClassStyles('active', this._view, styles);
+        if (false) {
+            if (subscribe) {
+                this.on('touch', onWindowsActiveTouch);
+                this.on('mouseLeave', onWindowsActiveLeave);
+            }
+            else {
+                this.off('touch', onWindowsActiveTouch);
+                this.off('mouseLeave', onWindowsActiveLeave);
+                clearWindowsActive(this);
+            }
+            this._windowsListenActive(subscribe);
+            // A button dims while held only when it has no :active style of its own.
+            // @ts-ignore
+            const view = this._view;
+            if (view?.IsButton)
+                view.DimsWhenPressed = !subscribe;
+        }
+    }
+    // Inline elements a Text draws get no pointer events of their own; the Text reports their presses.
+    _windowsListenActive(on) {
+        const view = this._view;
+        if (!view || typeof masonEngine().AddEventListener !== 'function')
+            return;
+        if (on && !this._windowsActiveId) {
+            const ref = new WeakRef(this);
+            this._windowsActiveListener = globalThis.NSWinRT.asDelegate('NativeScript.Mason.EventListener', (event) => {
+                const owner = ref.deref();
+                if (!owner)
+                    return;
+                if (event.Data === '1') {
+                    for (const state of WINDOWS_ACTIVE_STATES)
+                        owner._addVisualState(state);
+                }
+                else {
+                    clearWindowsActive(owner);
+                }
+            });
+            this._windowsActiveId = masonEngine().AddEventListener(view, 'mason:active', this._windowsActiveListener);
+        }
+        else if (!on && this._windowsActiveId) {
+            masonEngine().RemoveEventListener(view, 'mason:active', this._windowsActiveId);
+            this._windowsActiveId = 0;
+            this._windowsActiveListener = undefined;
+        }
+    }
+    _disableHandler(subscribe) {
+        const styles = compile(this);
+        //@ts-ignore
+        this._applyPseudoClassStyles('disabled', this._view, styles);
+    }
+    _focusHandler(subscribe) {
+        const styles = compile(this);
+        //@ts-ignore
+        this._applyPseudoClassStyles('focus', this._view, styles);
+        if (false) {
+            if (subscribe) {
+                this.on('focus', onWindowsFocus, this);
+                this.on('blur', onWindowsBlur, this);
+            }
+            else {
+                this.off('focus', onWindowsFocus, this);
+                this.off('blur', onWindowsBlur, this);
+                this._removeVisualState('focus');
+            }
+        }
+    }
+    _blurHandler(subscribe) {
+        const styles = compile(this);
+        //@ts-ignore
+        this._applyPseudoClassStyles('blur', this._view, styles);
+    }
+    forceStyleUpdate() {
+        _forceStyleUpdate(this);
+    }
+    get _viewChildren() {
+        return this._children.filter((child) => {
+            return !child[isPlaceholder_] && child instanceof NSView;
+        });
+    }
+    eachLayoutChild(callback) {
+        let lastChild = null;
+        this.eachChildView((cv) => {
+            cv._eachLayoutView((lv) => {
+                if (lastChild && !lastChild.isCollapsed) {
+                    callback(lastChild, false);
+                }
+                lastChild = lv;
+            });
+            return true;
+        });
+        if (lastChild && !lastChild.isCollapsed) {
+            callback(lastChild, true);
+        }
+    }
+    eachChild(callback) {
+        this._eachViewChild(callback);
+    }
+    // Live and allocation-free, like core's LayoutBase.eachChildView (walks run per view).
+    _eachViewChild(callback) {
+        const children = this._children;
+        for (let i = 0, length = children.length; i < length; i++) {
+            const child = children[i];
+            if (child && !child[isPlaceholder_] && child instanceof NSView) {
+                callback(child);
+            }
+        }
+    }
+    // Core's iOS requestLayout climbs to the Page and re-measures the whole tree in JS.
+    // A Mason root's native compute already places every Mason descendant, so it skips
+    // them and only runs core's layout for non-Mason views inside its subtree.
+    /** True for a Mason view whose frame the Mason tree sets natively (iOS). */
+    get _masonPlacedNatively() {
+        return __APPLE__ && !!this[isMasonView_] && !!this.parent?.[isMasonView_];
+    }
+    /** Size a non-Mason child with core's measure: its native view rarely implements sizeThatFits. */
+    _masonMeasureForeign(child) {
+        if (!__APPLE__ || child[isMasonView_] || !child.nativeViewProtected)
+            return;
+        // Text views (MasonText) have no `mason` of their own; their node does.
+        const native = this.nativeViewProtected;
+        const mason = native?.mason ?? native?.node?.mason;
+        if (typeof mason?.setMeasureForViewBlock !== 'function')
+            return;
+        invalidateOnLayoutRequest(child, mason);
+        const parentRef = new WeakRef(this);
+        const childRef = new WeakRef(child);
+        const spec = (known, available) => {
+            if (!isNaN(known))
+                return Utils.layout.makeMeasureSpec(known, Utils.layout.EXACTLY);
+            if (available > 0)
+                return Utils.layout.makeMeasureSpec(available, Utils.layout.AT_MOST);
+            return Utils.layout.makeMeasureSpec(0, Utils.layout.UNSPECIFIED);
+        };
+        mason.setMeasureForViewBlock(child.nativeViewProtected, (knownW, knownH, availW, availH) => {
+            const parent = parentRef.deref();
+            const view = childRef.deref();
+            if (!parent || !view)
+                return CGSizeMake(0, 0);
+            NSView.measureChild(parent, view, spec(knownW, availW), spec(knownH, availH));
+            return CGSizeMake(view.getMeasuredWidth(), view.getMeasuredHeight());
+        });
+    }
+    /**
+     * Sets a non-Mason child's percentage width/height (`null` clears it), resolved against the
+     * containing block. Windows core calls this for every percentage; on Android and iOS a view calls
+     * it when its native sizing can't express one. `false` when core should handle it.
+     */
+    _setChildPercentSize(child, horizontal, fraction) {
+        const nativeChild = child?.nativeViewProtected;
+        if (!nativeChild || child[isMasonView_])
+            return false;
+        const value = fraction ?? NaN;
+        if (false) {
+            if (horizontal)
+                masonEngine().SetPercentWidth(nativeChild, value);
+            else
+                masonEngine().SetPercentHeight(nativeChild, value);
+        }
+        else if (__ANDROID__) {
+            const mason = org.nativescript.mason.masonkit.Mason.getShared();
+            if (horizontal)
+                mason.setPercentWidth(nativeChild, value);
+            else
+                mason.setPercentHeight(nativeChild, value);
+        }
+        else if (__APPLE__) {
+            if (horizontal)
+                NSCMason.shared.setPercentWidth(nativeChild, value);
+            else
+                NSCMason.shared.setPercentHeight(nativeChild, value);
+        }
+        else {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * A native removal relays out natively but runs no core layout pass, so `layoutChanged`
+     * and non-Mason descendants miss it. Ask for one; a subtree being torn down is unloaded.
+     */
+    _masonRequestLayoutAfterRemoval() {
+        if (__APPLE__ && this.isLoaded)
+            this.requestLayout();
+    }
+    /** Lay out the non-Mason views in this root's subtree from the frames Mason set. */
+    _masonLayoutForeignDescendants() {
+        if (!__APPLE__)
+            return;
+        const visit = (view) => {
+            view.eachChildView((child) => {
+                if (child[isMasonView_]) {
+                    if (!(child._masonLayoutWork > 0))
+                        return true;
+                    // Keep `layoutChanged` working for the few views that listen to it.
+                    if (child.hasListeners?.(NSView.layoutChangedEvent)) {
+                        const b = child._getCurrentLayoutBounds();
+                        if (child._setCurrentLayoutBounds(b.left, b.top, b.right, b.bottom).boundsChanged) {
+                            child._raiseLayoutChangedEvent();
+                        }
+                    }
+                    visit(child);
+                }
+                else if (child.nativeViewProtected) {
+                    const b = child._getCurrentLayoutBounds();
+                    const w = Utils.layout.makeMeasureSpec(b.right - b.left, Utils.layout.EXACTLY);
+                    const h = Utils.layout.makeMeasureSpec(b.bottom - b.top, Utils.layout.EXACTLY);
+                    NSView.measureChild(view, child, w, h);
+                    child.layout(b.left, b.top, b.right, b.bottom);
+                }
+                return true;
+            });
+        };
+        visit(this);
+    }
+    requestLayout() {
+        // A natively placed view only needs its Mason root re-measured: skip the
+        // per-ancestor hops (each a JS call plus a native setNeedsLayout).
+        if (this._masonPlacedNatively) {
+            // CSS asks once per layout property; reuse this turn's root while it is still flagged.
+            if (climbedRoots && this._masonClimbTurn === climbedRoots && climbedThisTurn(this._masonClimbRoot))
+                return;
+            let root = this.parent;
+            while (root?.parent?.[isMasonView_])
+                root = root.parent;
+            if (root && !climbedThisTurn(root))
+                root.requestLayout();
+            this._masonClimbRoot = root;
+            this._masonClimbTurn = climbedRoots;
+            return;
+        }
+        // Core climbs on every call, once per changed property; once per turn is enough.
+        if (__APPLE__ && climbedThisTurn(this))
+            return;
+        super.requestLayout();
+        if (__APPLE__)
+            markClimbed(this);
+    }
+    _parentChanged(oldParent) {
+        climbedRoots?.delete(this);
+        this._masonClimbTurn = null;
+        super._parentChanged(oldParent);
+    }
+    getMeasuredWidth() {
+        if (this._masonPlacedNatively && this.nativeViewProtected) {
+            return Math.round(masonLayout.toDevicePixels(this.nativeViewProtected.frame.size.width));
+        }
+        return super.getMeasuredWidth();
+    }
+    getMeasuredHeight() {
+        if (this._masonPlacedNatively && this.nativeViewProtected) {
+            return Math.round(masonLayout.toDevicePixels(this.nativeViewProtected.frame.size.height));
+        }
+        return super.getMeasuredHeight();
+    }
+    eachChildView(callback) {
+        this._eachViewChild(callback);
+    }
+    _addChildFromBuilder(name, value) {
+        this.addChild(value);
+    }
+    getChildrenCount() {
+        let count = 0;
+        this._eachViewChild(() => count++);
+        return count;
+    }
+    get _childrenCount() {
+        return this.getChildrenCount();
+    }
+    getChildAt(index) {
+        let found;
+        let i = 0;
+        this._eachViewChild((child) => {
+            if (i++ === index)
+                found = child;
+        });
+        return found;
+    }
+    getChildIndex(child) {
+        let index = -1;
+        let i = 0;
+        this._eachViewChild((c) => {
+            if (c === child && index === -1)
+                index = i;
+            i++;
+        });
+        return index;
+    }
+    getChildById(id) {
+        return getViewById(this, id);
+    }
+    _nativeAttachIndex(child, atIndex) {
+        const cur = this._attachCursor;
+        let jsIndex;
+        let nativeIndex;
+        if (atIndex <= -1 && cur && this._children[cur.jsIndex] === cur.child && this._children[cur.jsIndex + 1] === child) {
+            jsIndex = cur.jsIndex + 1;
+            nativeIndex = cur.nativeIndex + 1;
+        }
+        else {
+            jsIndex = atIndex <= -1 ? this._children.indexOf(child) : atIndex;
+            nativeIndex = jsIndex <= -1 ? jsIndex : this._nativeIndexFor(jsIndex);
+        }
+        this._attachCursor = jsIndex >= 0 && nativeIndex >= 0 ? { child, jsIndex, nativeIndex } : undefined;
+        return { jsIndex, nativeIndex };
+    }
+    _invalidateAttachCursor() {
+        this._attachCursor = undefined;
+    }
+    /** Runs an iOS View's queued inserts before a native child edit. */
+    _masonSettleNativeAdds() {
+        if (this._masonPendingAdds)
+            this._masonFlushNativeAdds();
+    }
+    _childIndexToNativeChildIndex(index) {
+        if (false && typeof index === 'number' && index >= 0) {
+            return this._nativeIndexFor(index);
+        }
+        return super._childIndexToNativeChildIndex(index);
+    }
+    [(_a = isMasonView_, _b = isTextChild_, _c = isText_, _d = pseudoStyles_, zIndexProperty.setNative)](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.zIndex = value;
+        }
+    }
+    [directionProperty.setNative](value) {
+        // @ts-ignore
+        super[directionProperty.setNative]?.(value);
+        const style = this._styleHelper;
+        if (style)
+            style.direction = value === 'rtl' || value === 'ltr' ? value : 'inherit';
+    }
+    set verticalAlign(value) {
+        this.style.verticalAlign = value;
+    }
+    get verticalAlign() {
+        return this.style.verticalAlign;
+    }
+    [verticalAlignProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.verticalAlign = value;
+        }
+    }
+    // @ts-ignore
+    set flex(value) {
+        this.style.flex = value;
+    }
+    get flex() {
+        return this.style.flex;
+    }
+    set textWrap(value) {
+        this.style.textWrap = value;
+    }
+    get textWrap() {
+        return this.style.textWrap;
+    }
+    [textWrapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.textWrap = value;
+        }
+    }
+    set aspectRatio(value) {
+        this.style.aspectRatio = value;
+    }
+    get aspectRatio() {
+        return this.style.aspectRatio;
+    }
+    [aspectRatioProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.aspectRatio = value;
+        }
+    }
+    get filter() {
+        return this.style.filter;
+    }
+    set filter(value) {
+        this.style.filter = value;
+    }
+    [filterProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.filter = value;
+        }
+    }
+    // @ts-ignore
+    set borderRadius(value) {
+        this.style.borderRadius = value;
+    }
+    get borderRadius() {
+        return this.style.borderRadius;
+    }
+    [borderRadiusProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderRadius = value;
+            this[borderRadiusCorners_] = undefined;
+        }
+    }
+    [borderRadiusProperty.getDefault]() {
+        // @ts-ignore
+        return this._styleHelper?.borderRadius;
+    }
+    // `border-radius` / `border-color` arriving as core's longhands.
+    _nativeBorderRadiusCorners() {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if ((__ANDROID__ || __APPLE__) && style && !style.hasBorderRadius()) {
+            return borderRadiusCorners('0');
+        }
+        const native = String(style?.borderRadius ?? '').trim();
+        try {
+            return borderRadiusCorners(native || '0');
+        }
+        catch {
+            return borderRadiusCorners('0');
+        }
+    }
+    _borderRadiusCorner(corner, value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (!style) {
+            return;
+        }
+        if ((__ANDROID__ || __APPLE__) && !isCssLength(value) && style._writeCornerLength(corner, value)) {
+            this[borderRadiusCorners_] = undefined;
+            return;
+        }
+        let corners = this[borderRadiusCorners_];
+        if (!corners) {
+            corners = this[borderRadiusCorners_] = this._nativeBorderRadiusCorners();
+        }
+        // Resolve math functions first: the corner parser can't read them.
+        const text = lengthToCssString(masonLength(value));
+        const css = resolveCssMathIn(text, style.emBasisFor(text));
+        const radius = (corners[corner] = /\s/.test(css) ? parseCornerRadius(css) : [css, css]);
+        const shorthand = composeBorderRadius(corners);
+        if ((__ANDROID__ || __APPLE__) && style._writeCornerRadius(corner, radius, shorthand)) {
+            return;
+        }
+        // @ts-ignore
+        style.borderRadius = shorthand;
+    }
+    _nativeCornerRadius(corner) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if ((__ANDROID__ || __APPLE__) && style && style._cornerRadiusIsZero(corner)) {
+            return '0';
+        }
+        const [h, v] = this._nativeBorderRadiusCorners()[corner];
+        return h === v ? h : `${h} ${v}`;
+    }
+    [borderTopLeftRadiusProperty.getDefault]() {
+        return this._nativeCornerRadius(0);
+    }
+    [borderTopRightRadiusProperty.getDefault]() {
+        return this._nativeCornerRadius(1);
+    }
+    [borderBottomRightRadiusProperty.getDefault]() {
+        return this._nativeCornerRadius(2);
+    }
+    [borderBottomLeftRadiusProperty.getDefault]() {
+        return this._nativeCornerRadius(3);
+    }
+    [borderTopLeftRadiusProperty.setNative](value) {
+        this._borderRadiusCorner(0, value);
+    }
+    [borderTopRightRadiusProperty.setNative](value) {
+        this._borderRadiusCorner(1, value);
+    }
+    [borderBottomRightRadiusProperty.setNative](value) {
+        this._borderRadiusCorner(2, value);
+    }
+    [borderBottomLeftRadiusProperty.setNative](value) {
+        this._borderRadiusCorner(3, value);
+    }
+    _borderSideColor(side, value) {
+        if (__ANDROID__ || __APPLE__) {
+            const s = this._styleHelper;
+            if (s) {
+                s.setBorderSideColor(side === 't' ? 'top' : side === 'r' ? 'right' : side === 'b' ? 'bottom' : 'left', value);
+                return;
+            }
+        }
+        let sides = this[borderSideColors_];
+        if (!sides) {
+            sides = this[borderSideColors_] = { t: 'transparent', r: 'transparent', b: 'transparent', l: 'transparent' };
+        }
+        sides[side] = colorToCssString(value);
+        const shorthand = `${sides.t} ${sides.r} ${sides.b} ${sides.l}`;
+        if (__ANDROID__) {
+            // @ts-ignore
+            nodeHelper().setBorderColor(this.nativeView, shorthand);
+        }
+        else if (__APPLE__) {
+            // @ts-ignore
+            this.nativeView?.style?.setBorderColor(shorthand);
+        }
+        else if (false) {
+            // @ts-ignore
+            this._styleHelper?.setBorderColor(shorthand);
+        }
+    }
+    [borderTopColorProperty.setNative](value) {
+        this._borderSideColor('t', value);
+    }
+    [borderRightColorProperty.setNative](value) {
+        this._borderSideColor('r', value);
+    }
+    [borderBottomColorProperty.setNative](value) {
+        this._borderSideColor('b', value);
+    }
+    [borderLeftColorProperty.setNative](value) {
+        this._borderSideColor('l', value);
+    }
+    set border(value) {
+        this.style.border = value;
+    }
+    get border() {
+        return this.style.border;
+    }
+    // @ts-ignore
+    set background(value) {
+        this.style.background = value;
+    }
+    get background() {
+        return this.style.background;
+    }
+    [backgroundProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.background = value;
+        }
+    }
+    [backgroundColorProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // Pass the raw value straight through — the style setter's normalizeColorValue handles
+            // number / string / Color / {argb} via duck-typing, which is robust even when a `Color`
+            // instance comes from a different @nativescript/core copy (cross-copy `instanceof` fails).
+            // @ts-ignore
+            style.backgroundColor = value;
+            return;
+            // eslint-disable-next-line no-unreachable
+            switch (typeof value) {
+                case 'number':
+                    // @ts-ignore
+                    style.backgroundColor = value;
+                    return;
+                case 'object':
+                    if (value instanceof Color) {
+                        // @ts-ignore
+                        style.backgroundColor = value.argb;
+                        return;
+                    }
+                    break;
+                case 'string':
+                    try {
+                        const color = new Color(value);
+                        // @ts-ignore
+                        style.backgroundColor = color.argb;
+                    }
+                    catch (error) { }
+                    return;
+            }
+        }
+    }
+    [borderLeftWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderLeftWidth = masonLength(value);
+        }
+    }
+    [borderTopWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderTopWidth = masonLength(value);
+        }
+    }
+    [borderRightWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderRightWidth = masonLength(value);
+        }
+    }
+    [borderBottomWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderBottomWidth = masonLength(value);
+        }
+    }
+    [lineHeightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        // @ts-ignore
+        if (style)
+            style.lineHeight = masonRawDeclaration(this.style, 'lineHeight', value);
+    }
+    [letterSpacingProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        // @ts-ignore
+        if (style)
+            style.letterSpacing = masonRawDeclaration(this.style, 'letterSpacing', value);
+    }
+    [textAlignmentProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        // @ts-ignore
+        if (style)
+            style.textAlignment = value;
+    }
+    [textDecorationProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.textDecoration = String(value);
+            // The shorthand resets every longhand natively, but core tracks each as its own
+            // property and won't reapply one it already holds. Put the explicit ones back.
+            const cssStyle = this.style;
+            for (const name of ['textDecorationLine', 'textDecorationStyle', 'textDecorationColor', 'textDecorationThickness']) {
+                const longhand = cssStyle[name];
+                if (longhand !== undefined && longhand !== null && longhand !== '') {
+                    style[name] = longhand;
+                }
+            }
+        }
+    }
+    // @ts-ignore
+    [borderColorProperty.setNative](value) {
+        if (__ANDROID__) {
+            const s = this._styleHelper;
+            if (s)
+                s.setBorderColor(String(value));
+            // @ts-ignore
+            else
+                nodeHelper().setBorderColor(this.nativeView, String(value));
+        }
+        else if (__APPLE__) {
+            const s = this._styleHelper;
+            if (s)
+                s.setBorderColor(String(value));
+            // @ts-ignore
+            else
+                this.nativeView.style.setBorderColor(String(value));
+        }
+        else if (false) {
+            // @ts-ignore
+            const style = this._styleHelper;
+            // @ts-ignore
+            if (style)
+                style.setBorderColor(String(value));
+        }
+    }
+    // `border-style`, `border` and `border-<side>` are shorthands over these.
+    [borderTopStyleProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style)
+            style.borderTopStyle = String(value ?? 'none');
+    }
+    [borderRightStyleProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style)
+            style.borderRightStyle = String(value ?? 'none');
+    }
+    [borderBottomStyleProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style)
+            style.borderBottomStyle = String(value ?? 'none');
+    }
+    [borderLeftStyleProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style)
+            style.borderLeftStyle = String(value ?? 'none');
+    }
+    // @ts-ignore
+    [backgroundImageProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.backgroundImage = backgroundImageToCssString(value);
+        }
+    }
+    // @ts-ignore
+    [listStyleTypeProperty.setNative](value) {
+        if (__ANDROID__) {
+            // @ts-ignore
+            nodeHelper().setListStyleType(this.nativeView, String(value));
+        }
+        else if (__APPLE__) {
+            // @ts-ignore
+            this.nativeView.style.applyListStyleType(String(value));
+        }
+        else if (false) {
+            const style = this._styleHelper;
+            const type = String(value).trim().toLowerCase();
+            if (style && (type === 'none' || type === 'disc' || type === 'circle' || type === 'square' || type === 'decimal'))
+                style.listStyleType = type;
+        }
+    }
+    // @ts-ignore
+    [listStylePositionProperty.setNative](value) {
+        if (__ANDROID__) {
+            // @ts-ignore
+            nodeHelper().setListStylePosition(this.nativeView, String(value));
+        }
+        else if (__APPLE__) {
+            // @ts-ignore
+            this.nativeView.style.applyListStylePosition(String(value));
+        }
+        else if (false) {
+            const style = this._styleHelper;
+            const position = String(value).trim().toLowerCase();
+            if (style && (position === 'inside' || position === 'outside'))
+                style.listStylePosition = position;
+        }
+    }
+    get boxSizing() {
+        return this.style.boxSizing;
+    }
+    set boxSizing(value) {
+        this.style.boxSizing = value;
+    }
+    [boxSizingProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.boxSizing = value;
+        }
+    }
+    get display() {
+        return this.style.display;
+    }
+    set display(value) {
+        this.style.display = value;
+    }
+    [displayProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.display = value;
+        }
+    }
+    get overflow() {
+        return this.style.overflow;
+    }
+    set overflow(value) {
+        this.style.overflow = value;
+    }
+    get overflowX() {
+        return this.style.overflowX;
+    }
+    set overflowX(value) {
+        this.style.overflowX = value;
+    }
+    [overflowXProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.overflowX = value;
+        }
+    }
+    get overflowY() {
+        return this.style.overflowY;
+    }
+    set overflowY(value) {
+        this.style.overflowY = value;
+    }
+    [overflowYProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.overflowY = value;
+        }
+    }
+    get scrollBarWidth() {
+        return this.style.scrollBarWidth;
+    }
+    set scrollBarWidth(value) {
+        this.style.scrollBarWidth = value;
+    }
+    [scrollBarWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.scrollBarWidth = value;
+        }
+    }
+    get position() {
+        return this.style.position;
+    }
+    set position(value) {
+        this.style.position = value;
+    }
+    [positionProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.position = value;
+        }
+    }
+    // Font props only land in the style buffer, which the TextBlock-backed text doesn't read, so they
+    // must be forwarded to the native Text control to take visual effect. No-op off a Text container.
+    _applyTextRunProp(method, arg) {
+        if (!false)
+            return;
+        try {
+            const view = this._view;
+            if (view && typeof view[method] === 'function')
+                view[method](arg);
+        }
+        catch (_) { }
+    }
+    [colorProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // Duck-typed via normalizeColorValue (robust to cross-core Color instances).
+            // @ts-ignore
+            style.color = value;
+            if (false) {
+                // Push the resolved color to the Text container's TextBlock (the default for all runs).
+                // Imperative — not during layout.
+                try {
+                    const argb = style.color >>> 0 || 0;
+                    const view = this._view;
+                    if (view && argb && typeof view.SetColor === 'function')
+                        view.SetColor(argb);
+                }
+                catch (_) { }
+            }
+        }
+    }
+    [flexWrapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexWrap = value;
+        }
+    }
+    [flexDirectionProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexDirection = value;
+        }
+    }
+    [flexGrowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexGrow = value;
+        }
+    }
+    [flexShrinkProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexShrink = value;
+        }
+    }
+    [flexBasisProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexBasis = value;
+        }
+    }
+    [alignItemsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.alignItems = value;
+        }
+    }
+    [alignSelfProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.alignSelf = value;
+        }
+    }
+    get alignContent() {
+        return this.style.alignContent;
+    }
+    set alignContent(value) {
+        this.style.alignContent = value;
+    }
+    [alignContentProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.alignContent = value;
+        }
+    }
+    get justifyItems() {
+        return this.style.justifyItems;
+    }
+    set justifyItems(value) {
+        this.style.justifyItems = value;
+    }
+    [justifyItemsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.justifyItems = value;
+        }
+    }
+    get justifySelf() {
+        return this.style.justifySelf;
+    }
+    set justifySelf(value) {
+        this.style.justifySelf = value;
+    }
+    [justifySelfProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.justifySelf = value;
+        }
+    }
+    [justifyContentProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.justifyContent = value;
+        }
+    }
+    [leftProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.left = value;
+        }
+    }
+    get right() {
+        return this.style.right;
+    }
+    set right(value) {
+        this.style.right = value;
+    }
+    [rightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.right = value;
+        }
+    }
+    get bottom() {
+        return this.style.bottom;
+    }
+    set bottom(value) {
+        this.style.bottom = value;
+    }
+    [bottomProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.bottom = value;
+        }
+    }
+    [topProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.top = value;
+        }
+    }
+    [minWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.minWidth = value;
+        }
+    }
+    [minHeightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.minHeight = value;
+        }
+    }
+    [heightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.height = value;
+        }
+    }
+    [widthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.width = value;
+        }
+    }
+    // @ts-ignore core declares maxWidth as a field on View
+    set maxWidth(value) {
+        this.style.maxWidth = value;
+    }
+    // @ts-ignore
+    get maxWidth() {
+        return this.style.maxWidth;
+    }
+    // @ts-ignore core declares maxHeight as a field on View
+    set maxHeight(value) {
+        this.style.maxHeight = value;
+    }
+    // @ts-ignore
+    get maxHeight() {
+        return this.style.maxHeight;
+    }
+    [maxWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.maxWidth = value;
+        }
+    }
+    [maxHeightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.maxHeight = value;
+        }
+    }
+    _redrawNativeBackground(value) { }
+    [backgroundInternalProperty.getDefault]() {
+        if (__ANDROID__ || __APPLE__)
+            return null;
+        // @ts-ignore
+        return super[backgroundInternalProperty.getDefault]?.();
+    }
+    [marginProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginCss = value;
+        }
+    }
+    [marginLeftProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginLeft = masonLength(value);
+        }
+    }
+    [marginRightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginRight = masonLength(value);
+        }
+    }
+    [marginBottomProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginBottom = masonLength(value);
+        }
+    }
+    [marginTopProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginTop = masonLength(value);
+        }
+    }
+    get padding() {
+        return this.style.padding;
+    }
+    set padding(value) {
+        this.style.padding = value;
+    }
+    [paddingProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.paddingCss = value;
+        }
+    }
+    [paddingLeftProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.paddingLeft = masonLength(value);
+        }
+    }
+    [paddingRightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.paddingRight = masonLength(value);
+        }
+    }
+    [paddingTopProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.paddingTop = masonLength(value);
+        }
+    }
+    [paddingBottomProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.paddingBottom = masonLength(value);
+        }
+    }
+    set gap(value) {
+        this.style.gap = value;
+    }
+    get gap() {
+        return this.style.gap;
+    }
+    set gridGap(value) {
+        this.style.gridGap = value;
+    }
+    get gridGap() {
+        return this.style.gridGap;
+    }
+    set rowGap(value) {
+        this.style.rowGap = value;
+    }
+    get rowGap() {
+        return this.style.rowGap;
+    }
+    [rowGapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.rowGap = value;
+        }
+    }
+    set columnGap(value) {
+        this.style.columnGap = value;
+    }
+    get columnGap() {
+        return this.style.columnGap;
+    }
+    [columnGapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.columnGap = value;
+        }
+    }
+    set gridColumnStart(value) {
+        this.style.gridColumnStart = value;
+    }
+    get gridColumnStart() {
+        return this.style.gridColumnStart;
+    }
+    [gridColumnStartProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridColumnStart = value;
+        }
+    }
+    set gridColumnEnd(value) {
+        this.style.gridColumnEnd = value;
+    }
+    get gridColumnEnd() {
+        return this.style.gridColumnEnd;
+    }
+    [gridColumnEndProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridColumnEnd = value;
+        }
+    }
+    get gridColumn() {
+        return this.style.gridColumn;
+    }
+    set gridColumn(value) {
+        this.style.gridColumn = value;
+    }
+    [gridColumnProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridColumn = value;
+        }
+    }
+    set gridRowStart(value) {
+        this.style.gridRowStart = value;
+    }
+    get gridRowStart() {
+        return this.style.gridRowStart;
+    }
+    [gridRowStartProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridRowStart = value;
+        }
+    }
+    set gridRowEnd(value) {
+        this.style.gridRowEnd = value;
+    }
+    get gridRowEnd() {
+        return this.style.gridRowEnd;
+    }
+    [gridRowEndProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridRowEnd = value;
+        }
+    }
+    get gridRow() {
+        return this.style.gridRow;
+    }
+    set gridRow(value) {
+        this.style.gridRow = value;
+    }
+    [gridRowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridRow = value;
+        }
+    }
+    set gridTemplateRows(value) {
+        this.style.gridTemplateRows = value;
+    }
+    get gridTemplateRows() {
+        return this.style.gridTemplateRows;
+    }
+    [gridTemplateRowsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridTemplateRows = value;
+        }
+    }
+    set gridTemplateColumns(value) {
+        this.style.gridTemplateColumns = value;
+    }
+    get gridTemplateColumns() {
+        return this.style.gridTemplateColumns;
+    }
+    [gridTemplateColumnsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridTemplateColumns = value;
+        }
+    }
+    set gridAutoColumns(value) {
+        this.style.gridAutoColumns = value;
+    }
+    get gridAutoColumns() {
+        return this.style.gridAutoColumns;
+    }
+    [gridAutoColumnsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridAutoColumns = value;
+        }
+    }
+    set gridAutoRows(value) {
+        this.style.gridAutoRows = value;
+    }
+    get gridAutoRows() {
+        return this.style.gridAutoRows;
+    }
+    [gridAutoRowsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridAutoRows = value;
+        }
+    }
+    set gridAutoFlow(value) {
+        this.style.gridAutoFlow = value;
+    }
+    get gridAutoFlow() {
+        return this.style.gridAutoFlow;
+    }
+    [gridAutoFlowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridAutoFlow = value;
+        }
+    }
+    set gridArea(value) {
+        this.style.gridArea = value;
+    }
+    get gridArea() {
+        return this.style.gridArea;
+    }
+    [gridAreaProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridArea = value;
+        }
+    }
+    set gridTemplateAreas(value) {
+        this.style.gridTemplateAreas = value;
+    }
+    get gridTemplateAreas() {
+        return this.style.gridTemplateAreas;
+    }
+    [gridTemplateAreasProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.gridTemplateAreas = value;
+        }
+    }
+    [fontSizeProperty.setNative](value) {
+        // @ts-ignore
+        if (this._styleHelper) {
+            //@ts-ignore
+            this._styleHelper.fontSize = value;
+        }
+    }
+    [fontWeightProperty.setNative](value) {
+        // @ts-ignore
+        if (this._styleHelper) {
+            //@ts-ignore
+            this._styleHelper.fontWeight = value;
+        }
+    }
+    [fontStyleProperty.setNative](value) {
+        // @ts-ignore
+        if (this._styleHelper) {
+            //@ts-ignore
+            this._styleHelper.fontStyle = value;
+        }
+    }
+    set flexFlowProperty(value) {
+        this.style.flexFlow = value;
+    }
+    get flexFlowProperty() {
+        return this.style.flexFlow;
+    }
+    set inset(value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.insetCss = value;
+        }
+    }
+    get inset() {
+        return this.style.inset;
+    }
+    set textOverFlow(value) {
+        this.style.textOverflow = value;
+    }
+    get textOverFlow() {
+        return this.style.textOverflow;
+    }
+    [textOverFlowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.textOverflow = value;
+        }
+    }
+    [clearProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.clear = value;
+        }
+    }
+    [floatProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.float = value;
+        }
+    }
+    [cornerShapeProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.cornerShape = value;
+        }
+    }
+    [boxShadowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.boxShadow = value;
+            if (false) {
+                const nv = this.nativeViewProtected ?? this._view;
+                try {
+                    const shadows = parseBoxShadows(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasisFor(token)));
+                    const current = style.color >>> 0 || 0xff000000;
+                    const spec = encodeBoxShadows(shadows, (color) => {
+                        if (!color || color.toLowerCase() === 'currentcolor')
+                            return current;
+                        try {
+                            return new Color(color).argb >>> 0;
+                        }
+                        catch (_) {
+                            return current;
+                        }
+                    });
+                    NativeScript.Mason.Css.SetBoxShadow(nv, spec);
+                }
+                catch (_) { }
+            }
+        }
+    }
+    // Core's scale/rotate/translate on Windows. Core's own TransformGroup never renders on a Mason
+    // element, so View.rotate etc. did nothing; they're set natively as one matrix instead. CSS
+    // keyframes and animate() play them per frame (css-keyframes.ts).
+    updateNativeTransform() {
+        if (!false) {
+            // @ts-ignore
+            return super.updateNativeTransform?.();
+        }
+        const native = this.nativeViewProtected;
+        if (!native)
+            return;
+        const self = this;
+        const origin = this._windowsTransformOrigin(native);
+        NativeScript.Mason.Css.SetTransforms(native, typeof self.scaleX === 'number' ? self.scaleX : 1, typeof self.scaleY === 'number' ? self.scaleY : 1, self.rotate || 0, self.translateX || 0, self.translateY || 0, origin.x, origin.y);
+    }
+    // CSS transform-origin when set, else core's originX/originY. RenderTransformOrigin is shared
+    // by every part of the element's transform.
+    _windowsTransformOrigin(native) {
+        const self = this;
+        // @ts-ignore
+        const css = this._styleHelper?.transformOriginFraction?.(native?.ActualWidth ?? 0, native?.ActualHeight ?? 0);
+        return css ?? { x: self.originX ?? 0.5, y: self.originY ?? 0.5 };
+    }
+    _applyWindowsTransform(value = this._windowsTransformValue) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        const nv = this.nativeViewProtected ?? this._view;
+        this._windowsTransformValue = value;
+        if (!style || !nv)
+            return;
+        try {
+            const size = { width: nv.ActualWidth ?? 0, height: nv.ActualHeight ?? 0 };
+            const m = parseCssTransform(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasisFor(token)), size);
+            const origin = this._windowsTransformOrigin(nv);
+            if (!m)
+                NativeScript.Mason.Css.ClearTransform(nv);
+            else
+                NativeScript.Mason.Css.ApplyTransform(nv, m[0], m[1], m[2], m[3], m[4], m[5]);
+            NativeScript.Mason.Css.SetTransformOrigin(nv, origin.x, origin.y);
+        }
+        catch (_) { }
+    }
+    animate(options) {
+        if (!false || !options || !('rotate' in options || 'scale' in options || 'translate' in options)) {
+            return super.animate(options);
+        }
+        // Core's storyboards would animate a transform that doesn't show on a Mason view.
+        const { rotate, scale, translate, ...rest } = options;
+        const core = ['opacity', 'backgroundColor', 'width', 'height'].some((key) => key in rest) ? super.animate(rest) : null;
+        const transforms = animateTransforms(this, options);
+        const promise = Promise.all([core, transforms.done]).then(() => undefined);
+        promise.cancel = () => {
+            transforms.cancel();
+            core?.cancel?.();
+        };
+        return promise;
+    }
+    [originXProperty.setNative](value) {
+        if (!false) {
+            // @ts-ignore
+            return super[originXProperty.setNative]?.(value);
+        }
+        this.updateNativeTransform();
+    }
+    [originYProperty.setNative](value) {
+        if (!false) {
+            // @ts-ignore
+            return super[originYProperty.setNative]?.(value);
+        }
+        this.updateNativeTransform();
+    }
+    [transformProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.transform = value;
+            // Windows: transform isn't read from the buffer; it becomes the panel's RenderTransform.
+            if (false)
+                this._applyWindowsTransform(value);
+        }
+    }
+}
+ViewBase._pendingTeardowns = [];
+ViewBase._teardownScheduled = false;
+__decorate([
+    PseudoClassHandler('hover'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], ViewBase.prototype, "_hoverHandler", null);
+__decorate([
+    PseudoClassHandler('highlighted', 'pressed', 'active'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], ViewBase.prototype, "_handler", null);
+__decorate([
+    PseudoClassHandler('disabled'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], ViewBase.prototype, "_disableHandler", null);
+__decorate([
+    PseudoClassHandler('focus'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], ViewBase.prototype, "_focusHandler", null);
+__decorate([
+    PseudoClassHandler('blur'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], ViewBase.prototype, "_blurHandler", null);
+export class Event {
+    get bubbles() {
+        if (__ANDROID__) {
+            return this[native_]?.getBubbles();
+        }
+        if (__APPLE__) {
+            return this[native_]?.bubbles;
+        }
+        if (false) {
+            return this[native_]?.Bubbles ?? false;
+        }
+        return false;
+    }
+    get cancelable() {
+        if (__ANDROID__) {
+            return this[native_]?.getCancelable();
+        }
+        if (__APPLE__) {
+            return this[native_]?.cancelable;
+        }
+        if (false) {
+            return this[native_]?.Cancelable ?? false;
+        }
+        return false;
+    }
+    get isComposing() {
+        if (__ANDROID__) {
+            return this[native_]?.getIsComposing();
+        }
+        if (__APPLE__) {
+            return this[native_]?.isComposing;
+        }
+        if (false) {
+            return this[native_]?.IsComposing ?? false;
+        }
+        return false;
+    }
+    get timeStamp() {
+        if (__ANDROID__) {
+            return this[native_]?.getTimeStamp();
+        }
+        if (__APPLE__) {
+            return this[native_]?.timeStamp;
+        }
+        if (false) {
+            return this[native_]?.TimeStamp ?? 0;
+        }
+        return 0;
+    }
+    get defaultPrevented() {
+        if (__ANDROID__) {
+            return this[native_]?.getDefaultPrevented();
+        }
+        if (__APPLE__) {
+            return this[native_]?.defaultPrevented;
+        }
+        if (false) {
+            return this[native_]?.DefaultPrevented ?? false;
+        }
+        return false;
+    }
+    get propagationStopped() {
+        if (__ANDROID__) {
+            return this[native_]?.getPropagationStopped();
+        }
+        if (__APPLE__) {
+            return this[native_]?.propagationStopped;
+        }
+        if (false) {
+            return this[native_]?.PropagationStopped ?? false;
+        }
+        return false;
+    }
+    get immediatePropagationStopped() {
+        if (__ANDROID__) {
+            return this[native_]?.getImmediatePropagationStopped();
+        }
+        if (__APPLE__) {
+            return this[native_]?.immediatePropagationStopped;
+        }
+        if (false) {
+            return this[native_]?.ImmediatePropagationStopped ?? false;
+        }
+        return false;
+    }
+    get currentTarget() {
+        // DOM semantics: the element the listener is attached to, not the raw
+        // native view. `_target` is set to that same owner at every dispatch
+        // site (_registerNativeEvent), so reuse it here.
+        return this['_target'];
+    }
+    stopImmediatePropagation() {
+        if (__ANDROID__) {
+            return this[native_]?.stopImmediatePropagation();
+        }
+        if (__APPLE__) {
+            return this[native_]?.stopImmediatePropagation();
+        }
+        if (false) {
+            return this[native_]?.StopImmediatePropagation();
+        }
+    }
+    stopPropagation() {
+        if (__ANDROID__) {
+            return this[native_]?.stopPropagation();
+        }
+        if (__APPLE__) {
+            return this[native_]?.stopPropagation();
+        }
+        if (false) {
+            return this[native_]?.StopPropagation();
+        }
+    }
+    preventDefault() {
+        if (__ANDROID__) {
+            return this[native_]?.preventDefault();
+        }
+        if (__APPLE__) {
+            return this[native_]?.preventDefault();
+        }
+        if (false) {
+            return this[native_]?.PreventDefault();
+        }
+    }
+    // Writable on purpose, unlike the DOM's read-only `Event.type`. Aliases
+    // (e.g. 'tap') are folded onto the native name ('click') before the event
+    // reaches JS; a host framework's DOM shim relabels it back to the name the
+    // listener was registered under and re-dispatches, which needs a working
+    // setter or the relabel is silently dropped and the listener never fires.
+    get type() {
+        const override = this[eventType_];
+        if (override !== undefined) {
+            return override;
+        }
+        if (__ANDROID__) {
+            return this[native_]?.getType();
+        }
+        if (false) {
+            return this[native_]?.Type;
+        }
+        return this[native_]?.type;
+    }
+    set type(value) {
+        this[eventType_] = value;
+    }
+    // DOM MouseEvent.button: 0 = primary button. Mason's touch-originated
+    // click has no native concept of mouse buttons, but callers checking
+    // `e.button === 0` (e.g. a router's <Link> onClick guard) expect this.
+    get button() {
+        return 0;
+    }
+    set button(_) { }
+    get target() {
+        // The element the event started at, which differs from currentTarget once it bubbles.
+        const nativeEvent = this[native_];
+        const nativeTarget = __ANDROID__ ? nativeEvent?.getTarget?.() : __APPLE__ ? nativeEvent?.target : false ? nativeEvent?.Target : null;
+        const current = this['_target'];
+        if (nativeTarget && nativeTarget !== nativeViewFor(current)) {
+            const found = nativeOwnerFor(nativeTarget) ?? findOwnerForNativeView(current, nativeTarget);
+            if (found)
+                return found;
+        }
+        return current;
+    }
+    set target(_) { }
+    get object() {
+        return this['_target'];
+    }
+    get eventName() {
+        return this.type;
+    }
+    set currentTarget(_) { }
+    set bubbles(_) { }
+    set cancelable(_) { }
+    set timeStamp(_) { }
+    set defaultPrevented(_) { }
+}
+function wrapNativeEvent(_type) { return new Event(); }