@triniwiz/nativescript-masonkit 1.0.0-beta.7 → 1.0.0-beta.71

package/common.js

@@ -1,1027 +1,297 @@
-var _a, _b, _c;
+var _a, _b, _c, _d;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { CssProperty, CustomLayoutView, Length as NSLength, ShorthandProperty, Style, View as NSView, getViewById, unsetValue, Property, widthProperty, heightProperty, CoreTypes, Trace, Length as CoreLength, PercentLength as CorePercentLength, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, verticalAlignmentProperty, backgroundColorProperty, textShadowProperty, } from '@nativescript/core';
-import { flexDirectionProperty, flexGrowProperty, flexWrapProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+import { CustomLayoutView, View as NSView, getViewById, Property, widthProperty, heightProperty, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, backgroundColorProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, paddingBottomProperty, zIndexProperty, PseudoClassHandler } from '@nativescript/core';
+import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
 import { _forceStyleUpdate } from './utils';
-export const native_ = Symbol('[[native]]');
-export const style_ = Symbol('[[style]]');
-export const isTextChild_ = Symbol('[[isTextChild]]');
-export const isText_ = Symbol('[[isText]]');
-export const isMasonView_ = Symbol('[[isMasonView]]');
-export const text_ = Symbol('[[text]]');
-export const isPlaceholder_ = Symbol('[[isPlaceholder]]');
+import { Style } from './style';
+import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderLeftProperty, borderTopProperty, borderRightProperty, borderBottomProperty, 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, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, } from './properties';
+import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_ } from './symbols';
+import { Tree } from './tree';
+import { TextNode } from './text-node';
+import { compile } from './pseudo';
 function getViewStyle(view) {
     const ret = (__ANDROID__ ? view.get() : view.deref());
     return ret._styleHelper;
 }
-var FrameWork;
-(function (FrameWork) {
-    FrameWork[FrameWork["Core"] = 0] = "Core";
-    FrameWork[FrameWork["Angular"] = 1] = "Angular";
-    FrameWork[FrameWork["Vue"] = 2] = "Vue";
-    FrameWork[FrameWork["React"] = 3] = "React";
-    FrameWork[FrameWork["Svelte"] = 4] = "Svelte";
-    FrameWork[FrameWork["Solid"] = 5] = "Solid";
-})(FrameWork || (FrameWork = {}));
-let frameWork = FrameWork.Core;
-try {
-    global.VUE3_ELEMENT_REF = require('nativescript-vue').ELEMENT_REF;
-    frameWork = FrameWork.Vue;
-}
-catch (e) { }
-if (global.__ngRegisteredViews || typeof Zone !== 'undefined') {
-    frameWork = FrameWork.Angular;
+/**
+ * Cached per-view accessor for the framework's virtual DOM element.
+ * The accessor is a function that retrieves the element cheaply on subsequent calls.
+ * We use `false` as a sentinel to indicate "no framework detected" (avoids re-scanning).
+ */
+const _frameworkAccessorCache = new WeakMap();
+function getFrameworkElement(view) {
+    const cached = _frameworkAccessorCache.get(view);
+    if (cached === false)
+        return null;
+    if (cached)
+        return cached(view);
+    // First call: detect framework and cache the accessor
+    const symbols = Object.getOwnPropertySymbols(view);
+    // Vue 3 (nativescript-vue): stores ELEMENT_REF symbol on native view
+    for (const sym of symbols) {
+        if (sym.description === 'elementRef' || sym.description === '') {
+            const el = view[sym];
+            if (el && Array.isArray(el.childNodes)) {
+                _frameworkAccessorCache.set(view, (v) => v[sym]);
+                return el;
+            }
+        }
+    }
+    // React (react-nativescript): stores __reactFiber$ symbol on node
+    for (const sym of symbols) {
+        if (sym.description?.startsWith('__reactFiber$')) {
+            if (Array.isArray(view.childNodes)) {
+                _frameworkAccessorCache.set(view, (v) => v);
+                return view;
+            }
+        }
+    }
+    // Svelte (svelte-native): stores __SvelteNativeElement__ on native view
+    if (view.__SvelteNativeElement__) {
+        const el = view.__SvelteNativeElement__;
+        if (Array.isArray(el.childNodes)) {
+            _frameworkAccessorCache.set(view, (v) => v.__SvelteNativeElement__);
+            return el;
+        }
+    }
+    // SolidJS (dominative): the element IS the native view, extended with DOM methods
+    if (view.__dominative_isNative) {
+        _frameworkAccessorCache.set(view, (v) => v);
+        return view;
+    }
+    // Angular (@nativescript/angular): uses firstChild/nextSibling linked list
+    if (view.firstChild !== undefined && view.meta?.skipAddToDom !== undefined) {
+        _frameworkAccessorCache.set(view, (v) => v);
+        return view;
+    }
+    _frameworkAccessorCache.set(view, false);
+    return null;
 }
-export const scrollBarWidthProperty = new CssProperty({
-    name: 'scrollBarWidth',
-    cssName: 'scrollbar-width',
-    defaultValue: 0,
-    valueConverter: parseFloat,
+export const textContentProperty = new Property({
+    name: 'textContent',
+    affectsLayout: true,
+    defaultValue: '',
 });
-function overflowConverter(value) {
-    if (typeof value === 'number') {
-        switch (value) {
-            case 0:
-                return 'visible';
-            case 1:
-                return 'clip';
-            case 2:
-                return 'hidden';
-            case 3:
-                return 'scroll';
-        }
-    }
-    switch (value) {
-        case 'visible':
-        case 'hidden':
-        case 'clip':
-        case 'scroll':
-            return value;
-        default:
-            return undefined;
-    }
-}
-function masonLengthParse(value) {
-    try {
-        return CoreLength.parse(value);
-    }
-    catch (e) {
-        return undefined;
-    }
-}
-function masonLengthPercentParse(value) {
-    try {
-        return CorePercentLength.parse(value);
+export class ViewBase extends CustomLayoutView {
+    /**
+     * 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 '@triniwiz/nativescript-masonkit';
+     * ViewBase.preflight = true; // enable at app startup
+     * ```
+     */
+    static get preflight() {
+        return Tree.instance.preflight;
+    }
+    static set preflight(value) {
+        Tree.instance.preflight = value;
     }
-    catch (e) {
-        return undefined;
+    constructor() {
+        super();
+        this._children = [];
+        this[_a] = false;
+        this[_b] = false;
+        this[_c] = false;
+        this[_d] = {};
+        this._pendingEventsRegistration = [];
     }
-}
-const filterProperty = new CssProperty({
-    name: 'filter',
-    cssName: 'filter',
-});
-filterProperty.register(Style);
-const borderProperty = new CssProperty({
-    name: 'border',
-    cssName: 'border',
-});
-borderProperty.register(Style);
-const backgroundProperty = new CssProperty({
-    name: 'background',
-    cssName: 'background',
-});
-backgroundProperty.register(Style);
-const overFlow = /^\s*(visible|hidden|clip|scroll|auto)(?:\s+(visible|hidden|clip|scroll|auto))?\s*$/;
-export const overflowProperty = new ShorthandProperty({
-    name: 'overflow',
-    cssName: 'overflow',
-    getter: function () {
-        if (this.overflowX === this.overflowY) {
-            return this.overflowX;
-        }
-        return `${this.overflowX} ${this.overflowY}`;
-    },
-    converter(value) {
-        const properties = [];
-        if (typeof value === 'string') {
-            const values = value.match(overFlow);
-            const length = values?.length ?? 0;
-            if (length === 0) {
-                return properties;
-            }
-            if (length === 1) {
-                const xy = values[0];
-                properties.push([overflowXProperty, xy]);
-                properties.push([overflowYProperty, xy]);
-            }
-            if (length > 1) {
-                const x = values[0];
-                const y = values[1];
-                properties.push([overflowXProperty, x]);
-                properties.push([overflowYProperty, y]);
-            }
-        }
-        return properties;
-    },
-});
-export const overflowXProperty = new CssProperty({
-    name: 'overflowX',
-    cssName: 'overflow-x',
-    defaultValue: 'visible',
-    valueConverter: overflowConverter,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.overflowX = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                view.view.style.overflowX = oldValue;
+    get innerHTML() {
+        //@ts-ignore
+        const nativeView = this._view;
+        if (__ANDROID__) {
+            if (nativeView && nativeView.getInnerHTML) {
+                return nativeView.getInnerHTML();
             }
         }
-    },
-});
-export const overflowYProperty = new CssProperty({
-    name: 'overflowY',
-    cssName: 'overflow-y',
-    defaultValue: 'visible',
-    valueConverter: overflowConverter,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.overflowY = newValue;
+        if (__APPLE__) {
+            if (nativeView && nativeView.mason_innerHTML) {
+                return nativeView.mason_innerHTML;
             }
-            else {
-                // Revert to old value if newValue is invalid
-                view.view.style.overflowY = oldValue;
-            }
-        }
-    },
-});
-const paddingProperty = new CssProperty({
-    name: 'padding',
-    cssName: 'padding',
-});
-paddingProperty.register(Style);
-const marginProperty = new CssProperty({
-    name: 'margin',
-    cssName: 'margin',
-});
-marginProperty.register(Style);
-export const paddingLeftProperty = new CssProperty({
-    name: 'paddingLeft',
-    cssName: 'padding-left',
-    defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
-    equalityComparer: CoreLength.equals,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.paddingLeft = CoreLength.toDevicePixels(newValue, 0);
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-    valueConverter: masonLengthParse,
-});
-export const paddingRightProperty = new CssProperty({
-    name: 'paddingRight',
-    cssName: 'padding-right',
-    defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
-    equalityComparer: CoreLength.equals,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.paddingRight = CoreLength.toDevicePixels(newValue, 0);
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-    valueConverter: masonLengthParse,
-});
-export const paddingTopProperty = new CssProperty({
-    name: 'paddingTop',
-    cssName: 'padding-top',
-    defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
-    equalityComparer: CoreLength.equals,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.paddingTop = CoreLength.toDevicePixels(newValue, 0);
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-    valueConverter: masonLengthParse,
-});
-export const paddingBottomProperty = new CssProperty({
-    name: 'paddingBottom',
-    cssName: 'padding-bottom',
-    defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
-    equalityComparer: CoreLength.equals,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.paddingBottom = CoreLength.toDevicePixels(newValue, 0);
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
-    },
-    valueConverter: masonLengthParse,
-});
-export const rowGapProperty = new CssProperty({
-    name: 'rowGap',
-    cssName: 'row-gap',
-    defaultValue: 0,
-    valueConverter(value) {
-        const parsed = CoreLength.parse(value);
-        if (typeof parsed === 'string') {
-            return 0;
-        }
-        return parsed;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.rowGap = newValue;
-        }
-    },
-});
-export const columnGapProperty = new CssProperty({
-    name: 'columnGap',
-    cssName: 'column-gap',
-    defaultValue: 0,
-    valueConverter(value) {
-        const parsed = CoreLength.parse(value);
-        if (typeof parsed === 'string') {
-            return 0;
-        }
-        return parsed;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.columnGap = newValue;
-        }
-    },
-});
-export const gridGapProperty = new ShorthandProperty({
-    name: 'gridGap',
-    cssName: 'grid-gap',
-    getter: function () {
-        if (this.rowGap === this.columnGap) {
-            return this.rowGap;
-        }
-        return `${this.rowGap} ${this.columnGap}`;
-    },
-    converter(gap) {
-        const properties = [];
-        let value = gap;
-        if (typeof value === 'number') {
-            value = `${value}`;
-        }
-        if (typeof value === 'string') {
-            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return properties;
-            }
-            if (length === 1) {
-                const row = values[0];
-                properties.push([rowGapProperty, row]);
-                properties.push([columnGapProperty, row]);
-            }
-            if (length > 1) {
-                const row = values[0];
-                const column = values[1];
-                properties.push([rowGapProperty, row]);
-                properties.push([columnGapProperty, column]);
+        return '';
+    }
+    set innerHTML(value) {
+        //@ts-ignore
+        const nativeView = this._view;
+        if (__ANDROID__) {
+            if (nativeView && nativeView.setInnerHTML) {
+                nativeView.setInnerHTML(value);
             }
         }
-        return properties;
-    },
-});
-export const gapProperty = new ShorthandProperty({
-    name: 'gap',
-    cssName: 'gap',
-    getter: function () {
-        if (this.rowGap === this.columnGap) {
-            return this.rowGap;
-        }
-        return `${this.rowGap} ${this.columnGap}`;
-    },
-    converter(gap) {
-        const properties = [];
-        let value = gap;
-        if (typeof value === 'number') {
-            value = `${value}`;
-        }
-        if (typeof value === 'string') {
-            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return properties;
+        if (__APPLE__) {
+            if (nativeView && nativeView.mason_innerHTML) {
+                nativeView.mason_innerHTML = value;
             }
-            if (length === 1) {
-                const row = values[0];
-                properties.push([rowGapProperty, row]);
-                properties.push([columnGapProperty, row]);
-            }
-            if (length > 1) {
-                const row = values[0];
-                const column = values[1];
-                properties.push([rowGapProperty, row]);
-                properties.push([columnGapProperty, column]);
-            }
-        }
-        return properties;
-    },
-});
-// export const flexGrowProperty = new CssProperty<Style, number>({
-//   name: 'flexGrow',
-//   cssName: 'flex-grow',
-//   defaultValue: 0,
-//   valueConverter: parseFloat,
-// });
-export const flexShrinkProperty = new CssProperty({
-    name: 'flexShrink',
-    cssName: 'flex-shrink',
-    defaultValue: 1,
-    valueConverter: parseFloat,
-});
-export const displayProperty = new CssProperty({
-    name: 'display',
-    cssName: 'display',
-    defaultValue: 'block',
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view && newValue) {
-            view.display = newValue;
         }
-        else {
-            // Revert to old value if newValue is invalid
-            view.view.style.display = oldValue;
+    }
+    _registerNativeEvent(arg, callback, thisArg) {
+        if (!this[native_]) {
+            this._pendingEventsRegistration.push({ arg, callback, thisArg });
+            return;
         }
-    },
-    valueConverter: function (value) {
-        if (typeof value === 'number') {
-            switch (value) {
-                case 0:
-                    return 'none';
-                case 1:
-                    return 'flex';
-                case 2:
-                    return 'grid';
-                case 3:
-                    return 'block';
-                case 4:
-                    return 'inline';
-                case 5:
-                    return 'inline-block';
-                case 6:
-                    return 'inline-flex';
-                case 7:
-                    return 'inline-grid';
+        //@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) {
+                            let ret;
+                            if (arg === 'input') {
+                                ret = new InputEvent();
+                            }
+                            else {
+                                ret = new Event();
+                            }
+                            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;
             }
-        }
-        switch (value) {
-            case 'none':
-            case 'flex':
-            case 'grid':
-            case 'block':
-            case 'inline':
-            case 'inline-block':
-            case 'inline-flex':
-            case 'inline-grid':
-                return value;
-            default:
-                return undefined;
-        }
-    },
-});
-export const maxWidthProperty = new CssProperty({
-    name: 'maxWidth',
-    cssName: 'max-width',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.maxWidth = newValue;
-        }
-        else {
-            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
-        }
-    },
-});
-export const maxHeightProperty = new CssProperty({
-    name: 'maxHeight',
-    cssName: 'max-height',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.maxHeight = newValue;
-        }
-    },
-});
-export const positionProperty = new CssProperty({
-    name: 'position',
-    cssName: 'position',
-    defaultValue: 'relative',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.position = newValue;
-        }
-    },
-});
-// export const flexDirectionProperty = new CssProperty<Style, FlexDirection>({
-//   name: 'flexDirection',
-//   cssName: 'flex-direction',
-// });
-// export const flexWrapProperty = new CssProperty<Style, FlexWrap>({
-//   name: 'flexWrap',
-//   cssName: 'flex-wrap',
-//   defaultValue: 'no-wrap',
-// });
-const insetProperty = new ShorthandProperty({
-    name: 'inset',
-    cssName: 'inset',
-    getter: function () {
-        if (this.top === this.right && this.top === this.bottom && this.top === this.left) {
-            if (typeof this.top === 'string') {
-                if (this.top === 'auto') {
-                    return this.top;
-                }
-                const value = CorePercentLength.parse(this.top);
-                if (Number.isNaN(value)) {
-                    return this.top;
-                }
-                else {
-                    return CorePercentLength.convertToString(value);
-                }
+            if (__APPLE__) {
+                //@ts-ignore
+                const id = this._view.mason_addEventListener(arg, (event) => {
+                    let ret;
+                    if (arg === 'input') {
+                        ret = new InputEvent();
+                    }
+                    else {
+                        ret = new Event();
+                    }
+                    ret[native_] = event;
+                    ret._target = this;
+                    callback.call(thisArg || this, ret);
+                });
+                callback['mason:event:id'] = id;
             }
         }
-        if (CorePercentLength.equals(this.top, this.right) && CorePercentLength.equals(this.top, this.bottom) && CorePercentLength.equals(this.top, this.left)) {
-            return this.top;
-        }
-        return `${CorePercentLength.convertToString(this.paddingTop)} ${CorePercentLength.convertToString(this.paddingRight)} ${CorePercentLength.convertToString(this.paddingBottom)} ${CorePercentLength.convertToString(this.paddingLeft)}`;
-    },
-    converter: convertToInsets,
-});
-function convertToInsets(value) {
-    if (typeof value === 'string' && value !== 'auto') {
-        const thickness = parseShorthandPositioning(value);
-        return [
-            [topProperty, masonLengthPercentParse(thickness.top)],
-            [rightProperty, masonLengthPercentParse(thickness.right)],
-            [bottomProperty, masonLengthPercentParse(thickness.bottom)],
-            [leftProperty, masonLengthPercentParse(thickness.left)],
-        ];
-    }
-    else {
-        return [
-            [topProperty, value],
-            [rightProperty, value],
-            [bottomProperty, value],
-            [leftProperty, value],
-        ];
     }
-}
-export const leftProperty = new CssProperty({
-    name: 'left',
-    cssName: 'left',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.left = newValue;
-        }
-    },
-});
-export const rightProperty = new CssProperty({
-    name: 'right',
-    cssName: 'right',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.right = newValue;
-        }
-    },
-});
-export const topProperty = new CssProperty({
-    name: 'top',
-    cssName: 'top',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.top = newValue;
-        }
-    },
-});
-export const bottomProperty = new CssProperty({
-    name: 'bottom',
-    cssName: 'bottom',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.bottom = newValue;
-        }
-    },
-});
-export const flexBasisProperty = new CssProperty({
-    name: 'flexBasis',
-    cssName: 'flex-basis',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.flexBasis = newValue;
-        }
-    },
-});
-export const gridRowGapProperty = new ShorthandProperty({
-    name: 'gridRowGap',
-    cssName: 'grid-row-gap',
-    getter: function () {
-        return this.rowGap;
-    },
-    converter(value) {
-        return [[rowGapProperty, value]];
-    },
-});
-export const gridColumnGapProperty = new ShorthandProperty({
-    name: 'gridColumnGap',
-    cssName: 'grid-column-gap',
-    getter: function () {
-        return this.columnGap;
-    },
-    converter(value) {
-        return [[columnGapProperty, value]];
-    },
-});
-export const aspectRatioProperty = new CssProperty({
-    name: 'aspectRatio',
-    cssName: 'aspect-ratio',
-    defaultValue: Number.NaN,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.aspectRatio = newValue;
-        }
-    },
-});
-export const alignItemsProperty = new CssProperty({
-    name: 'alignItems',
-    cssName: 'align-items',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.alignItems = newValue;
-        }
-    },
-});
-export const alignSelfProperty = new CssProperty({
-    name: 'alignSelf',
-    cssName: 'align-self',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.alignSelf = newValue;
-        }
-    },
-});
-export const alignContentProperty = new CssProperty({
-    name: 'alignContent',
-    cssName: 'align-content',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.alignContent = newValue;
-        }
-    },
-});
-export const justifyItemsProperty = new CssProperty({
-    name: 'justifyItems',
-    cssName: 'justify-items',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.justifyItems = newValue;
-        }
-    },
-});
-export const justifySelfProperty = new CssProperty({
-    name: 'justifySelf',
-    cssName: 'justify-self',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.justifySelf = newValue;
-        }
-    },
-});
-export const justifyContentProperty = new CssProperty({
-    name: 'justifyContent',
-    cssName: 'justify-content',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.justifyContent = newValue;
-        }
-    },
-});
-export const gridAutoRowsProperty = new CssProperty({
-    name: 'gridAutoRows',
-    cssName: 'grid-auto-rows',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridAutoRows = newValue;
-        }
-    },
-});
-export const gridAutoColumnsProperty = new CssProperty({
-    name: 'gridAutoColumns',
-    cssName: 'grid-auto-columns',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridAutoColumns = newValue;
-        }
-    },
-});
-export const gridAutoFlowProperty = new CssProperty({
-    name: 'gridAutoFlow',
-    cssName: 'grid-auto-flow',
-    defaultValue: 'row',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridAutoFlow = newValue;
-        }
-    },
-});
-export const gridAreaProperty = new CssProperty({
-    name: 'gridArea',
-    cssName: 'grid-area',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridArea = newValue;
-        }
-    },
-});
-export const gridColumnStartProperty = new CssProperty({
-    name: 'gridColumnStart',
-    cssName: 'grid-column-start',
-    defaultValue: 'auto',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridColumnStart = newValue;
-        }
-    },
-});
-export const gridColumnEndProperty = new CssProperty({
-    name: 'gridColumnEnd',
-    cssName: 'grid-column-end',
-    defaultValue: 'auto',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridColumnEnd = newValue;
-        }
-    },
-});
-export const gridColumnProperty = new CssProperty({
-    name: 'gridColumn',
-    cssName: 'grid-column',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridColumn = newValue;
-        }
-    },
-});
-export const gridRowStartProperty = new CssProperty({
-    name: 'gridRowStart',
-    cssName: 'grid-row-start',
-    defaultValue: 'auto',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridRowStart = newValue;
-        }
-    },
-});
-export const gridRowEndProperty = new CssProperty({
-    name: 'gridRowEnd',
-    cssName: 'grid-row-end',
-    defaultValue: 'auto',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridRowEnd = newValue;
-        }
-    },
-});
-export const gridRowProperty = new CssProperty({
-    name: 'gridRow',
-    cssName: 'grid-row',
-    defaultValue: '',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridRow = newValue;
-        }
-    },
-});
-export const gridTemplateAreasProperty = new CssProperty({
-    name: 'gridTemplateAreas',
-    cssName: 'grid-template-areas',
-    defaultValue: null,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridTemplateAreas = newValue;
-        }
-    },
-});
-export const gridTemplateRowsProperty = new CssProperty({
-    name: 'gridTemplateRows',
-    cssName: 'grid-template-rows',
-    defaultValue: null,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridTemplateRows = newValue;
-        }
-    },
-});
-export const gridTemplateColumnsProperty = new CssProperty({
-    name: 'gridTemplateColumns',
-    cssName: 'grid-template-columns',
-    defaultValue: null,
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.gridTemplateColumns = newValue;
-        }
-    },
-});
-// flex-flow: <flex-direction> || <flex-wrap>
-const flexFlowProperty = new ShorthandProperty({
-    name: 'flexFlow',
-    cssName: 'flex-flow',
-    getter: function () {
-        return `${this.flexDirection} ${this.flexWrap}`;
-    },
-    converter: function (value) {
-        const properties = [];
-        if (value === unsetValue) {
-            properties.push([flexDirectionProperty, value]);
-            properties.push([flexWrapProperty, value]);
+    _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;
         }
-        else {
-            const trimmed = value && value.trim();
-            if (trimmed) {
-                const values = trimmed.split(/\s+/);
-                if (values.length >= 1) {
-                    properties.push([flexDirectionProperty, values[0]]);
-                }
-                if (value.length >= 2) {
-                    properties.push([flexWrapProperty, values[1]]);
+        //@ts-ignore
+        if (this._view) {
+            if (__ANDROID__) {
+                if (!id) {
+                    //@ts-ignore
+                    const removed = this._view.removeEventListener(arg, id);
+                    callback['mason:event:id'] = undefined;
                 }
             }
-        }
-        return properties;
-    },
-});
-// flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
-const flexProperty = new ShorthandProperty({
-    name: 'flex',
-    cssName: 'flex',
-    getter: function () {
-        return `${this.flexGrow} ${this.flexShrink} ${this.flexBasis}`;
-    },
-    converter: function (value) {
-        const properties = [];
-        if (value === unsetValue) {
-            properties.push([flexGrowProperty, value]);
-            properties.push([flexShrinkProperty, value]);
-        }
-        else if (typeof value === 'number') {
-            properties.push([flexGrowProperty, value]);
-            properties.push([flexShrinkProperty, 1]);
-            properties.push([flexBasisProperty, 'auto']);
-        }
-        else {
-            const trimmed = value && value.trim();
-            if (trimmed) {
-                const values = trimmed.split(/\s+/);
-                if (values.length === 1) {
-                    switch (values[0]) {
-                        case 'inital':
-                            properties.push([flexGrowProperty, 0]);
-                            properties.push([flexShrinkProperty, 1]);
-                            properties.push([flexBasisProperty, 'auto']);
-                            break;
-                        case 'auto':
-                            properties.push([flexGrowProperty, 1]);
-                            properties.push([flexShrinkProperty, 1]);
-                            properties.push([flexBasisProperty, 'auto']);
-                            break;
-                        case 'none':
-                            properties.push([flexGrowProperty, 0]);
-                            properties.push([flexShrinkProperty, 0]);
-                            properties.push([flexBasisProperty, 'auto']);
-                            break;
-                        default:
-                            properties.push([flexGrowProperty, values[0]]);
-                            properties.push([flexShrinkProperty, 1]);
-                            properties.push([flexBasisProperty, 'auto']);
-                    }
-                }
-                if (values.length >= 2) {
-                    properties.push([flexGrowProperty, values[0]]);
-                    properties.push([flexShrinkProperty, values[1]]);
-                }
-                if (value.length >= 3) {
-                    properties.push({ property: flexBasisProperty, value: values[2] });
+            if (__APPLE__) {
+                if (!id) {
+                    //@ts-ignore
+                    const removed = this._view.mason_removeEventListenerId(arg, id);
+                    callback['mason:event:id'] = undefined;
                 }
             }
         }
-        return properties;
-    },
-});
-// @ts-ignore
-export const textWrapProperty = new CssProperty({
-    name: 'textWrap',
-    affectsLayout: true,
-    defaultValue: 'nowrap',
-    valueChanged(target, oldValue, newValue) {
-        const view = target?.viewRef ? getViewStyle(target.viewRef) : target.view;
-        if (view) {
-            view.textWrap = newValue;
-        }
-    },
-});
-// @ts-ignore
-export const textOverFlowProperty = new CssProperty({
-    name: 'textOverflow',
-    defaultValue: 'text-overflow',
-    valueChanged(target, oldValue, newValue) {
-        const view = target?.viewRef ? getViewStyle(target.viewRef) : target.view;
-        if (view) {
-            view.textOverflow = newValue;
-        }
-    },
-});
-export const textContentProperty = new Property({
-    name: 'textContent',
-    affectsLayout: true,
-    defaultValue: '',
-});
-export const boxSizingProperty = new CssProperty({
-    name: 'boxSizing',
-    cssName: 'box-sizing',
-    defaultValue: 'border-box',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.boxSizing = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                view.view.style.boxSizing = oldValue;
+    }
+    initNativeView() {
+        super.initNativeView();
+        if (this._pendingEventsRegistration.length > 0) {
+            const pending = this._pendingEventsRegistration.splice(0);
+            for (const registration of pending) {
+                this._registerNativeEvent(registration.arg, registration.callback, registration.thisArg);
             }
         }
-    },
-    valueConverter(value) {
-        switch (value) {
-            case 'content-box':
-            case 'border-box':
-                return value;
-            default:
-                return undefined;
+    }
+    _setNativeViewFrame(nativeView, frame) {
+        // nativeView.frame = frame;
+    }
+    addEventListener(arg, callback, thisArg) {
+        if (typeof thisArg === 'boolean') {
+            thisArg = {
+                capture: thisArg,
+            };
+        }
+        super.addEventListener(arg, callback, thisArg);
+        if (typeof arg !== 'string') {
+            return;
         }
-    },
-});
-const borderRadiusProperty = new CssProperty({
-    name: 'borderRadius',
-    cssName: 'border-radius',
-});
-borderRadiusProperty.register(Style);
-export const verticalAlignProperty = new CssProperty({
-    name: 'verticalAlign',
-    cssName: 'vertical-align',
-    defaultValue: 'baseline',
-    valueChanged: (target, oldValue, newValue) => {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.verticalAlign = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                view.view.style.verticalAlign = oldValue;
-            }
+        switch (arg) {
+            case 'input':
+            case 'change':
+            case 'click':
+                this._registerNativeEvent(arg, callback, thisArg);
+                break;
         }
-    },
-});
-verticalAlignProperty.register(Style);
-verticalAlignmentProperty.overrideHandlers({
-    name: 'verticalAlignment',
-    cssName: 'vertical-align',
-    valueConverter: function (value) {
-        return value;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                // @ts-ignore
-                view.verticalAlign = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.verticalAlign = oldValue;
-            }
+    }
+    removeEventListener(arg, callback, thisArg) {
+        if (typeof thisArg === 'boolean') {
+            thisArg = {
+                capture: thisArg,
+            };
         }
-    },
-});
-textShadowProperty.overrideHandlers({
-    name: 'textShadow',
-    cssName: 'text-shadow',
-    valueConverter: function (value) {
-        return value;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            view.textShadow = newValue;
+        super.removeEventListener(arg, callback, thisArg);
+        switch (arg) {
+            case 'input':
+            case 'change':
+            case 'click':
+                this._unregisterNativeEvent(arg, callback, thisArg);
+                break;
         }
-        else {
-            // Revert to old value if newValue is invalid
-            // @ts-ignore
-            view.view.style.verticalAlign = oldValue;
+    }
+    _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) {
+                    style[prop] = current[prop];
+                }
+                this[pseudoStyles_][pseudoClass] = style;
+            }
         }
-    },
-});
-export class ViewBase extends CustomLayoutView {
-    constructor() {
-        super();
-        this._children = [];
-        this[_a] = false;
-        this[_b] = false;
-        this[_c] = false;
+    }
+    _handler(subscribe) {
+        const styles = compile(this);
+        //@ts-ignore
+        this._applyPseudoClassStyles('active', this._view, styles);
+    }
+    _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);
+    }
+    _blurHandler(subscribe) {
+        const styles = compile(this);
+        //@ts-ignore
+        this._applyPseudoClassStyles('blur', this._view, styles);
     }
     forceStyleUpdate() {
         _forceStyleUpdate(this);
@@ -1082,7 +352,7 @@ export class ViewBase extends CustomLayoutView {
             }
             if (__APPLE__) {
                 //@ts-ignore
-                this._view.mason_appendWithNode(child._view);
+                this._view.mason_append(child._view);
             }
             if (this[isText_]) {
                 child[isTextChild_] = true;
@@ -1112,21 +382,81 @@ export class ViewBase extends CustomLayoutView {
                 }
                 this._children.push(child);
             }
+            else if (child instanceof TextNode) {
+                //@ts-ignore
+                if (this._view) {
+                    if (__ANDROID__) {
+                        //@ts-ignore
+                        this._view.addChildAt(child[native_], this._children.length);
+                    }
+                    if (__APPLE__) {
+                        //@ts-ignore
+                        this._view.mason_addChildAtNode(child[native_], this._children.length);
+                    }
+                }
+                this._children.push(child);
+            }
+        }
+    }
+    insertBefore(child, reference) {
+        if (reference === null || reference === undefined) {
+            if (child && child.nodeType === 3) {
+                this._updateTextNode(child, { type: 'add', index: -1, isBreak: child.nodeName === 'br' });
+                return;
+            }
+            this.addChild(child);
+            return;
+        }
+        let atIndex = this._children.indexOf(reference);
+        if (atIndex === -1) {
+            // reference may be a DOM text node; look it up via its native text-node back-link
+            const nativeTextNode = reference[textNode_];
+            if (nativeTextNode) {
+                atIndex = this._children.findIndex((c) => c && c[textNode_] === nativeTextNode);
+            }
+            if (atIndex === -1) {
+                throw new Error('NotFoundError');
+            }
+        }
+        if (child && child.nodeType === 3) {
+            this._updateTextNode(child, { type: 'insert', index: atIndex, isBreak: child.nodeName === 'br' });
+            return;
+        }
+        this.insertChild(child, atIndex);
+    }
+    // Native child index for an insertion at `atIndex`: counts only the
+    // preceding siblings that already exist in the native tree. Text nodes and
+    // placeholders attach natively right away, but NativeScript views attach
+    // lazily (on `loaded`), so a raw `_children` index can run ahead of the
+    // native children list and push the insert past the end.
+    _nativeIndexFor(atIndex) {
+        let index = 0;
+        const max = Math.min(atIndex, this._children.length);
+        for (let i = 0; i < max; i++) {
+            const c = this._children[i];
+            if (!c) {
+                continue;
+            }
+            if (c[textNode_] || c instanceof TextNode || text_ in c || (c[isPlaceholder_] && c[native_]) || c._isMasonChild) {
+                index++;
+            }
         }
+        return index;
     }
     insertChild(child, atIndex) {
         if (child && child[isPlaceholder_] && child._view) {
-            this._children[atIndex] = child;
+            const nativeIndex = this._nativeIndexFor(atIndex);
+            this._children.splice(atIndex, 0, child);
             if (this[isText_]) {
                 child[isTextChild_] = true;
             }
             if (__ANDROID__) {
                 //@ts-ignore
-                this._view.addChildAt(child._view, atIndex);
+                this._view.addChildAt(child._view, nativeIndex);
             }
             if (__APPLE__) {
                 //@ts-ignore
-                this._view.mason_addChildAtNode(child._view, atIndex);
+                this._view.mason_addChildAtElement(child._view, nativeIndex);
             }
         }
         else if (child instanceof NSView) {
@@ -1149,7 +479,7 @@ export class ViewBase extends CustomLayoutView {
             }
             if (__APPLE__) {
                 //@ts-ignore
-                this._view.mason_replaceChildAtNode(child._view, atIndex);
+                this._view.mason_replaceChildAtElement(child._view, atIndex);
             }
         }
         else if (child instanceof NSView) {
@@ -1182,12 +512,74 @@ export class ViewBase extends CustomLayoutView {
         }
     }
     removeChild(child) {
+        // Placeholder (e.g. Br): it was attached straight to the mason tree via the
+        // native element APIs (never `_addView`-ed), so `_removeView` would throw.
+        // Remove the native node directly instead.
+        if (child && child[isPlaceholder_] && child._view) {
+            const index = this._children.indexOf(child);
+            if (index > -1) {
+                this._children.splice(index, 1);
+                if (__ANDROID__) {
+                    //@ts-ignore
+                    this._view.removeChild(child._view.node);
+                }
+                if (__APPLE__) {
+                    //@ts-ignore
+                    this._view.mason_removeChildNode(child._view.node);
+                }
+                child[isTextChild_] = false;
+                this.requestLayout?.();
+            }
+            return;
+        }
+        // Framework text node: it isn't stored in `_children` directly — its native
+        // `MasonTextNode` is stamped on it as `child[textNode_]`. Use that to locate
+        // and remove the matching native node from the mason tree. NativeScript has
+        // no real text nodes (frameworks just set `.text`), so this is what lets a
+        // framework's `removeChild(textNode)` actually drop the mason node.
+        if (child && child[textNode_]) {
+            const native = child[textNode_];
+            const tnIndex = this._children.findIndex((c) => c && c[textNode_] === native);
+            if (tnIndex > -1) {
+                this._nativeRemoveChildNode(native, tnIndex);
+                this._children.splice(tnIndex, 1);
+                // Drop the proxy binding so a later re-adopt re-installs cleanly.
+                child[textNodeProxied_] = false;
+                child[textNode_] = undefined;
+                this.requestLayout?.();
+                return;
+            }
+        }
         const index = this._children.indexOf(child);
         if (index > -1) {
             this._children.splice(index, 1);
             this._removeView(child);
         }
     }
+    // Remove the native node directly when supported (no index drift), falling
+    // back to index-based removal on native builds that predate the by-node API.
+    _nativeRemoveChildNode(node, index) {
+        //@ts-ignore
+        const view = this._view;
+        if (!view)
+            return;
+        if (__ANDROID__) {
+            //@ts-ignore
+            if (typeof view.removeChild === 'function')
+                view.removeChild(node);
+            //@ts-ignore
+            else
+                view.removeChildAt(index);
+        }
+        if (__APPLE__) {
+            //@ts-ignore
+            if (view.mason_removeChildNode)
+                view.mason_removeChildNode(node);
+            //@ts-ignore
+            else
+                view.mason_removeChildAt?.(index);
+        }
+    }
     removeChildren() {
         if (this._viewChildren.length === 0) {
             return;
@@ -1201,58 +593,280 @@ export class ViewBase extends CustomLayoutView {
         }
         this._children.splice(0);
     }
-    set text(value) {
-        if (frameWork === FrameWork.Vue && global.VUE3_ELEMENT_REF) {
-            const view_ref = this[global.VUE3_ELEMENT_REF];
-            if (Array.isArray(view_ref.childNodes)) {
-                if (view_ref.childNodes.length === 0) {
-                    this.addChild({ [text_]: value });
-                    return;
-                }
-                if (view_ref.childNodes.length === 1) {
-                    const node = view_ref.childNodes[0];
-                    if (node && node.nodeType === 'text') {
-                        this.addChild({ [text_]: node.text });
-                    }
-                    return;
-                }
-                view_ref.childNodes.forEach((node, index) => {
-                    if (node.nodeType === 'text') {
-                        //  nativeView.replaceChildAt(node.text, index);
-                        this.replaceChild({ [text_]: node.text }, index);
-                    }
-                });
-            }
-            return;
-        }
-        if ('firstChild' in this) {
-            function getTextNodes(root) {
-                const result = [];
-                let node = root.firstChild;
-                while (node) {
-                    result.push(node);
-                    node = node.nextSibling;
-                }
-                return result;
-            }
-            const nodes = getTextNodes(this);
-            for (const [index, node] of nodes.entries()) {
-                if (node.nodeType === 'text' || node.nodeName === 'TextNode' || node.constructor.name === 'TextNode') {
-                    const existing = this._children[index];
-                    if (existing && Object.is(existing['node'], node)) {
-                        // todo direct set text
-                        this.replaceChild({ [text_]: node.text, node }, index);
-                        continue;
-                    }
-                    this.replaceChild({ [text_]: node.text, node }, index);
-                }
-                else if (node.nodeName === 'br') {
-                    this.replaceChild(node, index);
-                }
-            }
-        }
-    }
-    [(_a = isMasonView_, _b = isTextChild_, _c = isText_, filterProperty.setNative)](value) {
+    [(_a = isMasonView_, _b = isTextChild_, _c = isText_, _d = pseudoStyles_, zIndexProperty.setNative)](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.zIndex = value;
+        }
+    }
+    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;
+        }
+    }
+    // -- Platform bridge methods for native text node operations --
+    _createOrUpdateNativeTextNode(node, text) {
+        if (node[textNode_]) {
+            if (__ANDROID__) {
+                node[textNode_].setData(text);
+            }
+            if (__APPLE__) {
+                node[textNode_].data = text;
+            }
+            this._installTextNodeProxy(node);
+            return node[textNode_];
+        }
+        let textNode;
+        if (__ANDROID__) {
+            textNode = new org.nativescript.mason.masonkit.TextNode(Tree.instance.native, text);
+        }
+        if (__APPLE__) {
+            textNode = MasonTextNode.alloc().initWithMasonDataAttributes(Tree.instance.native, text, null);
+        }
+        node[textNode_] = textNode;
+        // Back-reference from the native node to the framework text node.
+        textNode['__raw__'] = node;
+        this._installTextNodeProxy(node);
+        return textNode;
+    }
+    /**
+     * Bind a framework text node directly to its backing native `MasonTextNode`.
+     *
+     * Once mason adopts a text node (any framework — dominative/undom, Vue, React,
+     * Angular) we redefine its `data` accessor so future in-place writes
+     * (`node.data = …`, `node.nodeValue = …`, `node.textContent = …`, all of which
+     * funnel through `data` on a CharacterData node) flow straight through to the
+     * native node and trigger a relayout. The original accessor is still invoked so
+     * the framework's own bookkeeping (undom's `__undom_data`, change callbacks)
+     * stays intact. This is the framework-agnostic counterpart to the structural
+     * reconcile in `textProperty.setNative` — structure is handled there, granular
+     * text edits are handled here, with no per-framework glue.
+     */
+    _installTextNodeProxy(node) {
+        if (!node || node[textNodeProxied_])
+            return;
+        // Locate the inherited `data` accessor (undom CharacterData and friends define
+        // it on a prototype). If the node isn't CharacterData-like there's nothing to
+        // proxy — the structural path already covers it.
+        let proto = Object.getPrototypeOf(node);
+        let dataDesc;
+        while (proto && !dataDesc) {
+            dataDesc = Object.getOwnPropertyDescriptor(proto, 'data');
+            proto = Object.getPrototypeOf(proto);
+        }
+        if (!dataDesc || !dataDesc.set)
+            return;
+        node[textNodeProxied_] = true;
+        const owner = this;
+        Object.defineProperty(node, 'data', {
+            configurable: true,
+            enumerable: false,
+            get() {
+                return dataDesc.get ? dataDesc.get.call(this) : this.__undom_data;
+            },
+            set(value) {
+                // Preserve the framework's own bookkeeping first.
+                dataDesc.set.call(this, value);
+                // Push through to the native node (read `textNode_` lazily so we always
+                // target the current backing node even if it was re-created).
+                const nativeTextNode = this[textNode_];
+                if (nativeTextNode) {
+                    const data = value == null ? '' : `${value}`;
+                    if (__ANDROID__)
+                        nativeTextNode.setData(data);
+                    if (__APPLE__)
+                        nativeTextNode.data = data;
+                    // Re-measure/layout so the new text is reflected on screen.
+                    owner.requestLayout?.();
+                }
+            },
+        });
+    }
+    _nativeAddChild(textNode, index) {
+        //@ts-ignore
+        if (__ANDROID__)
+            this._view.addChildAt(textNode, index);
+        //@ts-ignore
+        if (__APPLE__)
+            this._view.mason_addChildAtNode(textNode, index);
+    }
+    _nativeReplaceChild(textNode, index) {
+        //@ts-ignore
+        if (__ANDROID__)
+            this._view.replaceChildAt(textNode, index);
+        //@ts-ignore
+        if (__APPLE__)
+            this._view.mason_replaceChildAtNode(textNode, index);
+    }
+    _setOrPushChild(index, entry) {
+        if (this._children.length > index) {
+            //@ts-ignore
+            this._children[index] = entry;
+        }
+        else {
+            //@ts-ignore
+            this._children.push(entry);
+        }
+    }
+    // -- Unified text node update (cross-platform) --
+    _updateTextNode(node, operation = null) {
+        const text = node.text ?? node.data ?? '';
+        const textNode = this._createOrUpdateNativeTextNode(node, text);
+        if (!operation)
+            return;
+        const entry = { [text_]: text, [textNode_]: textNode, [textNodeIndex_]: operation.index ?? this._children.length };
+        switch (operation.type) {
+            case 'add':
+                this._nativeAddChild(textNode, this._children.length);
+                //@ts-ignore
+                this._children.push({ ...entry, [textNodeIndex_]: this._children.length });
+                break;
+            case 'replace':
+                this._nativeReplaceChild(textNode, operation.index);
+                this._setOrPushChild(operation.index, entry);
+                break;
+            case 'insert':
+                this._nativeAddChild(textNode, operation.index);
+                this._setOrPushChild(operation.index, entry);
+                break;
+        }
+    }
+    // -- Text setter with per-view framework detection --
+    [textProperty.setNative](value) {
+        const frameworkEl = getFrameworkElement(this);
+        if (frameworkEl) {
+            // Frameworks with childNodes array (Vue, React, Svelte, SolidJS)
+            if (Array.isArray(frameworkEl.childNodes)) {
+                const rawChildNodes = frameworkEl.childNodes;
+                if (rawChildNodes.length === 0) {
+                    this.replaceChild({ [text_]: value }, 0);
+                    return;
+                }
+                // Deduplicate nodes (some frameworks expose the same nodes via both
+                // `childNodes` array and linked `nextSibling` references). Preserve
+                // original order while skipping duplicate references.
+                const nodes = [];
+                const seen = new Set();
+                for (let n of rawChildNodes) {
+                    if (!seen.has(n)) {
+                        seen.add(n);
+                        nodes.push(n);
+                    }
+                }
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    const isTextNode = node.nodeType === 'text' || node.nodeType === 3;
+                    if (isTextNode) {
+                        let type = i === 0 && nodes.length === 1 && !this._children.length ? 'add' : 'replace';
+                        if (type === 'replace') {
+                            const toReplace = this._children[i];
+                            // Replace in place only if this slot already holds THIS framework
+                            // node (its native node back-references it via '__raw__'); otherwise
+                            // a different node lives here, so shift via insert instead of
+                            // overwriting it.
+                            if (!toReplace || toReplace[textNode_]?.['__raw__'] !== node) {
+                                type = 'insert';
+                            }
+                        }
+                        this._updateTextNode(node, { type, index: i, isBreak: node.nodeName === 'br' });
+                    }
+                }
+                return;
+            }
+            // Frameworks with linked-list traversal (Angular)
+            if ('firstChild' in frameworkEl) {
+                const nodes = [];
+                let child = frameworkEl.firstChild;
+                while (child) {
+                    nodes.push(child);
+                    child = child.nextSibling;
+                }
+                for (let i = 0; i < nodes.length; i++) {
+                    const node = nodes[i];
+                    const isTextNode = node.nodeType === 'text' || node.nodeType === 3 || node.nodeName === 'TextNode' || node.constructor?.name === 'TextNode';
+                    if (isTextNode || node.nodeName === 'br') {
+                        this._updateTextNode(node, { type: 'replace', index: i, isBreak: node.nodeName === 'br' });
+                    }
+                }
+                return;
+            }
+        }
+        // NativeScript Core: linked-list traversal on the view itself
+        if ('firstChild' in this) {
+            const nodes = [];
+            let child = this.firstChild;
+            while (child) {
+                nodes.push(child);
+                child = child.nextSibling;
+            }
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                const isTextNode = node.nodeType === 'text' || node.nodeName === 'TextNode' || node.constructor?.name === 'TextNode';
+                if (isTextNode || node.nodeName === 'br') {
+                    this._updateTextNode(node, { type: 'replace', index: i, isBreak: node.nodeName === 'br' });
+                }
+            }
+            return;
+        }
+        // Fallback: direct textContent
+        if ('textContent' in this) {
+            // @ts-ignore
+            this.textContent = 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) {
@@ -1260,6 +874,13 @@ export class ViewBase extends CustomLayoutView {
             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;
@@ -1268,6 +889,12 @@ export class ViewBase extends CustomLayoutView {
             style.borderRadius = value;
         }
     }
+    set border(value) {
+        this.style.border = value;
+    }
+    get border() {
+        return this.style.border;
+    }
     [borderProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1276,6 +903,45 @@ export class ViewBase extends CustomLayoutView {
             style.border = value;
         }
     }
+    [borderLeftProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderLeft = value;
+        }
+    }
+    [borderTopProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderTop = value;
+        }
+    }
+    [borderRightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderRight = value;
+        }
+    }
+    [borderBottomProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderBottom = value;
+        }
+    }
+    // @ts-ignore
+    set background(value) {
+        this.style.background = value;
+    }
+    get background() {
+        return this.style.background;
+    }
     [backgroundProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -1373,34 +1039,83 @@ export class ViewBase extends CustomLayoutView {
     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) {
@@ -1467,6 +1182,12 @@ export class ViewBase extends CustomLayoutView {
             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;
@@ -1474,6 +1195,12 @@ export class ViewBase extends CustomLayoutView {
             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;
@@ -1481,6 +1208,12 @@ export class ViewBase extends CustomLayoutView {
             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;
@@ -1502,6 +1235,12 @@ export class ViewBase extends CustomLayoutView {
             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;
@@ -1509,6 +1248,12 @@ export class ViewBase extends CustomLayoutView {
             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;
@@ -1563,19 +1308,26 @@ export class ViewBase extends CustomLayoutView {
     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) { }
     [marginProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
         if (style) {
-            if (value === 'auto') {
-                style.margin = 'auto';
-                return;
-            }
-            try {
-                style.margin = CorePercentLength.parse(value);
-            }
-            catch (error) { }
+            style.marginCss = value;
         }
     }
     [marginLeftProperty.setNative](value) {
@@ -1606,15 +1358,18 @@ export class ViewBase extends CustomLayoutView {
             style.marginTop = 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) {
-            try {
-                // @ts-ignore
-                style.padding = CoreLength.parse(value);
-            }
-            catch (error) { }
+            // @ts-ignore
+            style.paddingCss = value;
         }
     }
     [paddingLeftProperty.setNative](value) {
@@ -1645,67 +1400,228 @@ export class ViewBase extends CustomLayoutView {
             style.paddingBottom = 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;
     }
-    // @ts-ignore
+    [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) {
@@ -1727,12 +1643,125 @@ export class ViewBase extends CustomLayoutView {
             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) {
+            // @ts-ignore
+            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;
+        }
+    }
+    [transformProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.transform = value;
+        }
+    }
 }
+__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);
+textProperty.register(ViewBase);
 export class TextBase extends ViewBase {
+    [textWrapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            switch (value) {
+                case 'false':
+                case false:
+                case 'nowrap':
+                    style.textWrap = 1 /* MasonTextWrap.NoWrap */;
+                    break;
+                case true:
+                case 'true':
+                case 'wrap':
+                    style.textWrap = 0 /* MasonTextWrap.Wrap */;
+                    break;
+                case 'balance':
+                    style.textWrap = 2 /* MasonTextWrap.Balance */;
+                    break;
+            }
+        }
+    }
 }
-textContentProperty.register(TextBase);
-textWrapProperty.register(Style);
-textOverFlowProperty.register(Style);
+textContentProperty.register(ViewBase);
 export class ButtonBase extends TextBase {
 }
 // @ts-ignore
@@ -1743,351 +1772,166 @@ export const srcProperty = new Property({
 export class ImageBase extends ViewBase {
 }
 srcProperty.register(ImageBase);
-/**
- * Props are already defined in core flexbox layout,
- * overriding them breaks the core flexbox layout.
- */
-// flexDirectionProperty.register(Style);
-// flexWrapProperty.register(Style);
-// flexGrowProperty.register(Style);
-flexShrinkProperty.register(Style);
-// revert valueConverter if causing issues with core components
-fontSizeProperty.overrideHandlers({
-    name: 'fontSize',
-    cssName: 'font-size',
-    valueConverter: function (value) {
-        return value;
-    },
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                if (typeof newValue === 'string') {
-                    // @ts-ignore
-                    if (newValue.indexOf('%') !== -1) {
-                        view.fontSize = {
-                            value: parseFloat(newValue) / 100,
-                            unit: '%',
-                        };
-                        // @ts-ignore
-                    }
-                    else if (newValue.indexOf('dip') !== -1) {
-                        view.fontSize = parseFloat(newValue);
-                        // @ts-ignore
-                    }
-                    else if (newValue.indexOf('px') !== -1) {
-                        view.fontSize = {
-                            value: parseFloat(newValue),
-                            unit: 'px',
-                        };
-                    }
-                    else {
-                        view.fontSize = parseFloat(newValue);
-                    }
-                }
-                else {
-                    view.fontSize = newValue;
-                }
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.fontSize = oldValue;
-            }
+export class Event {
+    get bubbles() {
+        if (__ANDROID__) {
+            return this[native_]?.getBubbles();
         }
-    },
-});
-marginLeftProperty.overrideHandlers({
-    name: 'marginLeft',
-    cssName: 'margin-left',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.marginLeft = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.marginLeft = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.bubbles;
         }
-    },
-});
-marginTopProperty.overrideHandlers({
-    name: 'marginTop',
-    cssName: 'margin-top',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.marginTop = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.marginTop = oldValue;
-            }
+        return false;
+    }
+    get cancelable() {
+        if (__ANDROID__) {
+            return this[native_]?.getCancelable();
         }
-    },
-});
-marginRightProperty.overrideHandlers({
-    name: 'marginRight',
-    cssName: 'margin-right',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.marginRight = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.marginRight = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.cancelable;
         }
-    },
-});
-marginBottomProperty.overrideHandlers({
-    name: 'marginBottom',
-    cssName: 'margin-bottom',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.marginBottom = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.marginBottom = oldValue;
-            }
+        return false;
+    }
+    get isComposing() {
+        if (__ANDROID__) {
+            return this[native_]?.getIsComposing();
         }
-    },
-});
-paddingLeftProperty.overrideHandlers({
-    name: 'paddingLeft',
-    cssName: 'padding-left',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.paddingLeft = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.paddingLeft = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.isComposing;
         }
-    },
-});
-paddingTopProperty.overrideHandlers({
-    name: 'paddingTop',
-    cssName: 'padding-top',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.paddingTop = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.paddingTop = oldValue;
-            }
+        return false;
+    }
+    get timeStamp() {
+        if (__ANDROID__) {
+            return this[native_]?.getTimeStamp();
         }
-    },
-});
-paddingRightProperty.overrideHandlers({
-    name: 'paddingRight',
-    cssName: 'padding-right',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.paddingRight = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.paddingRight = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.timeStamp;
         }
-    },
-});
-paddingBottomProperty.overrideHandlers({
-    name: 'paddingBottom',
-    cssName: 'padding-bottom',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.paddingBottom = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.paddingBottom = oldValue;
-            }
+        return 0;
+    }
+    get defaultPrevented() {
+        if (__ANDROID__) {
+            return this[native_]?.getDefaultPrevented();
         }
-    },
-});
-flexDirectionProperty.overrideHandlers({
-    name: 'flexDirection',
-    cssName: 'flex-direction',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.flexDirection = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.flexDirection = oldValue;
-            }
+        if (__APPLE__) {
+            return this[native_]?.defaultPrevented;
         }
-    },
-});
-flexWrapProperty.overrideHandlers({
-    name: 'flexWrap',
-    cssName: 'flex-wrap',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.flexWrap = newValue;
-            }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.flexWrap = oldValue;
-            }
+        return false;
+    }
+    get propagationStopped() {
+        if (__ANDROID__) {
+            return this[native_]?.getPropagationStopped();
         }
-    },
-});
-flexGrowProperty.overrideHandlers({
-    name: 'flexGrow',
-    cssName: 'flex-grow',
-    valueChanged(target, oldValue, newValue) {
-        const view = getViewStyle(target.viewRef);
-        if (view) {
-            if (newValue) {
-                view.flexGrow = newValue;
+        if (__APPLE__) {
+            return this[native_]?.propagationStopped;
+        }
+        return false;
+    }
+    get immediatePropagationStopped() {
+        if (__ANDROID__) {
+            return this[native_]?.getImmediatePropagationStopped();
+        }
+        if (__APPLE__) {
+            return this[native_]?.immediatePropagationStopped;
+        }
+        return false;
+    }
+    get currentTarget() {
+        if (__ANDROID__) {
+            return this[native_]?.getCurrentTarget();
+        }
+        if (__APPLE__) {
+            return this[native_]?.currentTarget;
+        }
+        return false;
+    }
+    stopImmediatePropagation() {
+        if (__ANDROID__) {
+            return this[native_]?.stopImmediatePropagation();
+        }
+        if (__APPLE__) {
+            return this[native_]?.stopImmediatePropagation();
+        }
+    }
+    stopPropagation() {
+        if (__ANDROID__) {
+            return this[native_]?.stopPropagation();
+        }
+        if (__APPLE__) {
+            return this[native_]?.stopPropagation();
+        }
+    }
+    preventDefault() {
+        if (__ANDROID__) {
+            return this[native_]?.preventDefault();
+        }
+        if (__APPLE__) {
+            return this[native_]?.preventDefault();
+        }
+    }
+    get type() {
+        if (__ANDROID__) {
+            return this[native_]?.getType();
+        }
+        return this[native_]?.type;
+    }
+    // NS's nativeHandler wrapper assigns event.type; allow it without crashing.
+    set type(_) { }
+    get target() {
+        return this['_target'];
+    }
+    // undom-ng's dispatchEvent and runEventHandlers stamp these on the event object;
+    // allow the assignments without throwing in strict-mode ES modules.
+    set target(_) { }
+    set currentTarget(_) { }
+    set bubbles(_) { }
+    set cancelable(_) { }
+    set timeStamp(_) { }
+    set defaultPrevented(_) { }
+}
+export class InputEvent extends Event {
+    get data() {
+        if (__ANDROID__) {
+            if (this[native_] instanceof org.nativescript.mason.masonkit.events.FileInputEvent) {
+                const data = this[native_]?.getRawData();
+                if (!data) {
+                    return null;
+                }
+                const ret = [];
+                const size = data.size();
+                for (let i = 0; i < size; i++) {
+                    ret.push(data.get(i).toString());
+                }
+                return ret;
             }
-            else {
-                // Revert to old value if newValue is invalid
-                // @ts-ignore
-                view.view.style.flexGrow = oldValue;
+            return this[native_]?.getData();
+        }
+        if (__APPLE__) {
+            if (this[native_] instanceof MasonFileInputEvent) {
+                const data = this[native_]?.rawData;
+                if (!data) {
+                    return null;
+                }
+                const ret = [];
+                const size = data.count;
+                for (let i = 0; i < size; i++) {
+                    const item = data.objectAtIndex(i);
+                    ret.push(item.absoluteString);
+                }
+                return ret;
             }
+            return this[native_]?.data;
         }
-    },
-});
-insetProperty.register(Style);
-boxSizingProperty.register(Style);
-alignItemsProperty.register(Style);
-alignSelfProperty.register(Style);
-justifyContentProperty.register(Style);
-displayProperty.register(Style);
-maxWidthProperty.register(Style);
-maxHeightProperty.register(Style);
-positionProperty.register(Style);
-leftProperty.register(Style);
-rightProperty.register(Style);
-topProperty.register(Style);
-bottomProperty.register(Style);
-flexBasisProperty.register(Style);
-rowGapProperty.register(Style);
-columnGapProperty.register(Style);
-gridRowGapProperty.register(Style);
-gridColumnGapProperty.register(Style);
-gapProperty.register(Style);
-gridGapProperty.register(Style);
-aspectRatioProperty.register(Style);
-alignContentProperty.register(Style);
-justifyItemsProperty.register(Style);
-justifySelfProperty.register(Style);
-gridAutoRowsProperty.register(Style);
-gridAutoColumnsProperty.register(Style);
-gridAutoFlowProperty.register(Style);
-gridAreaProperty.register(Style);
-gridColumnProperty.register(Style);
-gridColumnStartProperty.register(Style);
-gridColumnEndProperty.register(Style);
-gridRowProperty.register(Style);
-gridRowStartProperty.register(Style);
-gridRowEndProperty.register(Style);
-gridTemplateRowsProperty.register(Style);
-gridTemplateColumnsProperty.register(Style);
-gridTemplateAreasProperty.register(Style);
-overflowProperty.register(Style);
-overflowXProperty.register(Style);
-overflowYProperty.register(Style);
-scrollBarWidthProperty.register(Style);
-flexFlowProperty.register(Style);
-flexProperty.register(Style);
-function parseShorthandPositioning(value) {
-    const arr = value.split(/[ ,]+/);
-    let top;
-    let right;
-    let bottom;
-    let left;
-    if (arr.length === 1) {
-        top = arr[0];
-        right = arr[0];
-        bottom = arr[0];
-        left = arr[0];
-    }
-    else if (arr.length === 2) {
-        top = arr[0];
-        bottom = arr[0];
-        right = arr[1];
-        left = arr[1];
-    }
-    else if (arr.length === 3) {
-        top = arr[0];
-        right = arr[1];
-        left = arr[1];
-        bottom = arr[2];
-    }
-    else if (arr.length === 4) {
-        top = arr[0];
-        right = arr[1];
-        bottom = arr[2];
-        left = arr[3];
-    }
-    else {
-        throw new Error('Expected 1, 2, 3 or 4 parameters. Actual: ' + value);
-    }
-    return {
-        top: top,
-        right: right,
-        bottom: bottom,
-        left: left,
-    };
-}
-function convertToPaddings(value) {
-    if (typeof value === 'string' && value !== 'auto') {
-        const thickness = parseShorthandPositioning(value);
-        return [
-            [paddingTopProperty, CoreLength.parse(thickness.top)],
-            [paddingRightProperty, CoreLength.parse(thickness.right)],
-            [paddingBottomProperty, CoreLength.parse(thickness.bottom)],
-            [paddingLeftProperty, CoreLength.parse(thickness.left)],
-        ];
-    }
-    else {
-        return [
-            [paddingTopProperty, value],
-            [paddingRightProperty, value],
-            [paddingBottomProperty, value],
-            [paddingLeftProperty, value],
-        ];
+        return false;
+    }
+    get inputType() {
+        if (__ANDROID__) {
+            return this[native_]?.getInputType();
+        }
+        if (__APPLE__) {
+            return this[native_]?.inputType;
+        }
+        return false;
     }
 }
-paddingLeftProperty.register(Style);
-paddingRightProperty.register(Style);
-paddingTopProperty.register(Style);
-paddingBottomProperty.register(Style);
 //# sourceMappingURL=common.js.map