@triniwiz/nativescript-masonkit 1.0.0-alpha.9 → 1.0.0-beta.0

package/style.js

@@ -1,4 +1,5 @@
 import { layout } from '@nativescript/core/utils';
+import { Length as CoreLength } from '@nativescript/core';
 var StyleKeys;
 (function (StyleKeys) {
     StyleKeys[StyleKeys["DISPLAY"] = 0] = "DISPLAY";
@@ -81,20 +82,121 @@ var StyleKeys;
     StyleKeys[StyleKeys["BOX_SIZING"] = 308] = "BOX_SIZING";
     StyleKeys[StyleKeys["OVERFLOW"] = 312] = "OVERFLOW";
     StyleKeys[StyleKeys["ITEM_IS_TABLE"] = 316] = "ITEM_IS_TABLE";
+    StyleKeys[StyleKeys["ITEM_IS_REPLACED"] = 320] = "ITEM_IS_REPLACED";
+    StyleKeys[StyleKeys["DISPLAY_MODE"] = 324] = "DISPLAY_MODE";
+    StyleKeys[StyleKeys["FORCE_INLINE"] = 328] = "FORCE_INLINE";
+    StyleKeys[StyleKeys["MIN_CONTENT_WIDTH"] = 332] = "MIN_CONTENT_WIDTH";
+    StyleKeys[StyleKeys["MIN_CONTENT_HEIGHT"] = 336] = "MIN_CONTENT_HEIGHT";
+    StyleKeys[StyleKeys["MAX_CONTENT_WIDTH"] = 340] = "MAX_CONTENT_WIDTH";
+    StyleKeys[StyleKeys["MAX_CONTENT_HEIGHT"] = 344] = "MAX_CONTENT_HEIGHT";
+    // ----------------------------
+    // Border Style (per side)
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_LEFT_STYLE"] = 348] = "BORDER_LEFT_STYLE";
+    StyleKeys[StyleKeys["BORDER_RIGHT_STYLE"] = 352] = "BORDER_RIGHT_STYLE";
+    StyleKeys[StyleKeys["BORDER_TOP_STYLE"] = 356] = "BORDER_TOP_STYLE";
+    StyleKeys[StyleKeys["BORDER_BOTTOM_STYLE"] = 360] = "BORDER_BOTTOM_STYLE";
+    // ----------------------------
+    // Border Color (per side)
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_LEFT_COLOR"] = 364] = "BORDER_LEFT_COLOR";
+    StyleKeys[StyleKeys["BORDER_RIGHT_COLOR"] = 368] = "BORDER_RIGHT_COLOR";
+    StyleKeys[StyleKeys["BORDER_TOP_COLOR"] = 372] = "BORDER_TOP_COLOR";
+    StyleKeys[StyleKeys["BORDER_BOTTOM_COLOR"] = 376] = "BORDER_BOTTOM_COLOR";
+    // ============================================================
+    // Border Radius (elliptical + squircle exponent)
+    // Each corner = 20 bytes:
+    //   x_type (4), x_value (4), y_type (4), y_value (4), exponent (4)
+    // ============================================================
+    // ----------------------------
+    // Top-left corner (20 bytes)
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_X_TYPE"] = 380] = "BORDER_RADIUS_TOP_LEFT_X_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_X_VALUE"] = 384] = "BORDER_RADIUS_TOP_LEFT_X_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_Y_TYPE"] = 388] = "BORDER_RADIUS_TOP_LEFT_Y_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_Y_VALUE"] = 392] = "BORDER_RADIUS_TOP_LEFT_Y_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_LEFT_EXPONENT"] = 396] = "BORDER_RADIUS_TOP_LEFT_EXPONENT";
+    // ----------------------------
+    // Top-right corner
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_X_TYPE"] = 400] = "BORDER_RADIUS_TOP_RIGHT_X_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_X_VALUE"] = 404] = "BORDER_RADIUS_TOP_RIGHT_X_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_Y_TYPE"] = 408] = "BORDER_RADIUS_TOP_RIGHT_Y_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_Y_VALUE"] = 412] = "BORDER_RADIUS_TOP_RIGHT_Y_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_TOP_RIGHT_EXPONENT"] = 416] = "BORDER_RADIUS_TOP_RIGHT_EXPONENT";
+    // ----------------------------
+    // Bottom-right corner
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_X_TYPE"] = 420] = "BORDER_RADIUS_BOTTOM_RIGHT_X_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_X_VALUE"] = 424] = "BORDER_RADIUS_BOTTOM_RIGHT_X_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_Y_TYPE"] = 428] = "BORDER_RADIUS_BOTTOM_RIGHT_Y_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_Y_VALUE"] = 432] = "BORDER_RADIUS_BOTTOM_RIGHT_Y_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_RIGHT_EXPONENT"] = 436] = "BORDER_RADIUS_BOTTOM_RIGHT_EXPONENT";
+    // ----------------------------
+    // Bottom-left corner
+    // ----------------------------
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_X_TYPE"] = 440] = "BORDER_RADIUS_BOTTOM_LEFT_X_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_X_VALUE"] = 444] = "BORDER_RADIUS_BOTTOM_LEFT_X_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_Y_TYPE"] = 448] = "BORDER_RADIUS_BOTTOM_LEFT_Y_TYPE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_Y_VALUE"] = 452] = "BORDER_RADIUS_BOTTOM_LEFT_Y_VALUE";
+    StyleKeys[StyleKeys["BORDER_RADIUS_BOTTOM_LEFT_EXPONENT"] = 456] = "BORDER_RADIUS_BOTTOM_LEFT_EXPONENT";
+    // ----------------------------
+    // Float
+    // ----------------------------
+    StyleKeys[StyleKeys["FLOAT"] = 460] = "FLOAT";
+    StyleKeys[StyleKeys["CLEAR"] = 464] = "CLEAR";
+    StyleKeys[StyleKeys["OBJECT_FIT"] = 468] = "OBJECT_FIT";
+    StyleKeys[StyleKeys["FONT_METRICS_ASCENT_OFFSET"] = 472] = "FONT_METRICS_ASCENT_OFFSET";
+    StyleKeys[StyleKeys["FONT_METRICS_DESCENT_OFFSET"] = 476] = "FONT_METRICS_DESCENT_OFFSET";
+    StyleKeys[StyleKeys["FONT_METRICS_X_HEIGHT_OFFSET"] = 480] = "FONT_METRICS_X_HEIGHT_OFFSET";
+    StyleKeys[StyleKeys["FONT_METRICS_LEADING_OFFSET"] = 484] = "FONT_METRICS_LEADING_OFFSET";
+    StyleKeys[StyleKeys["FONT_METRICS_CAP_HEIGHT_OFFSET"] = 488] = "FONT_METRICS_CAP_HEIGHT_OFFSET";
+    StyleKeys[StyleKeys["VERTICAL_ALIGN_OFFSET_OFFSET"] = 492] = "VERTICAL_ALIGN_OFFSET_OFFSET";
+    StyleKeys[StyleKeys["VERTICAL_ALIGN_IS_PERCENT_OFFSET"] = 496] = "VERTICAL_ALIGN_IS_PERCENT_OFFSET";
+    StyleKeys[StyleKeys["VERTICAL_ALIGN_ENUM_OFFSET"] = 500] = "VERTICAL_ALIGN_ENUM_OFFSET";
+    StyleKeys[StyleKeys["FIRST_BASELINE_OFFSET"] = 504] = "FIRST_BASELINE_OFFSET";
 })(StyleKeys || (StyleKeys = {}));
 var TextStyleKeys;
 (function (TextStyleKeys) {
     TextStyleKeys[TextStyleKeys["COLOR"] = 0] = "COLOR";
-    TextStyleKeys[TextStyleKeys["DECORATION_LINE"] = 4] = "DECORATION_LINE";
-    TextStyleKeys[TextStyleKeys["DECORATION_COLOR"] = 8] = "DECORATION_COLOR";
-    TextStyleKeys[TextStyleKeys["TEXT_ALIGN"] = 12] = "TEXT_ALIGN";
-    TextStyleKeys[TextStyleKeys["TEXT_JUSTIFY"] = 16] = "TEXT_JUSTIFY";
-    TextStyleKeys[TextStyleKeys["BACKGROUND_COLOR"] = 20] = "BACKGROUND_COLOR";
-    TextStyleKeys[TextStyleKeys["SIZE"] = 24] = "SIZE";
-    TextStyleKeys[TextStyleKeys["TRANSFORM"] = 28] = "TRANSFORM";
-    TextStyleKeys[TextStyleKeys["FONT_STYLE_TYPE"] = 32] = "FONT_STYLE_TYPE";
-    TextStyleKeys[TextStyleKeys["FONT_STYLE_SLANT"] = 36] = "FONT_STYLE_SLANT";
-    TextStyleKeys[TextStyleKeys["TEXT_WRAP"] = 40] = "TEXT_WRAP";
+    TextStyleKeys[TextStyleKeys["COLOR_STATE"] = 4] = "COLOR_STATE";
+    TextStyleKeys[TextStyleKeys["SIZE"] = 8] = "SIZE";
+    TextStyleKeys[TextStyleKeys["SIZE_TYPE"] = 12] = "SIZE_TYPE";
+    TextStyleKeys[TextStyleKeys["SIZE_STATE"] = 13] = "SIZE_STATE";
+    TextStyleKeys[TextStyleKeys["FONT_WEIGHT"] = 16] = "FONT_WEIGHT";
+    TextStyleKeys[TextStyleKeys["FONT_WEIGHT_STATE"] = 20] = "FONT_WEIGHT_STATE";
+    TextStyleKeys[TextStyleKeys["FONT_STYLE_SLANT"] = 24] = "FONT_STYLE_SLANT";
+    TextStyleKeys[TextStyleKeys["FONT_STYLE_TYPE"] = 28] = "FONT_STYLE_TYPE";
+    TextStyleKeys[TextStyleKeys["FONT_STYLE_STATE"] = 29] = "FONT_STYLE_STATE";
+    TextStyleKeys[TextStyleKeys["FONT_FAMILY_STATE"] = 30] = "FONT_FAMILY_STATE";
+    TextStyleKeys[TextStyleKeys["FONT_RESOLVED_DIRTY"] = 31] = "FONT_RESOLVED_DIRTY";
+    TextStyleKeys[TextStyleKeys["BACKGROUND_COLOR"] = 32] = "BACKGROUND_COLOR";
+    TextStyleKeys[TextStyleKeys["BACKGROUND_COLOR_STATE"] = 36] = "BACKGROUND_COLOR_STATE";
+    TextStyleKeys[TextStyleKeys["DECORATION_LINE"] = 40] = "DECORATION_LINE";
+    TextStyleKeys[TextStyleKeys["DECORATION_LINE_STATE"] = 44] = "DECORATION_LINE_STATE";
+    TextStyleKeys[TextStyleKeys["DECORATION_COLOR"] = 48] = "DECORATION_COLOR";
+    TextStyleKeys[TextStyleKeys["DECORATION_COLOR_STATE"] = 52] = "DECORATION_COLOR_STATE";
+    TextStyleKeys[TextStyleKeys["DECORATION_STYLE"] = 56] = "DECORATION_STYLE";
+    TextStyleKeys[TextStyleKeys["DECORATION_STYLE_STATE"] = 60] = "DECORATION_STYLE_STATE";
+    TextStyleKeys[TextStyleKeys["LETTER_SPACING"] = 64] = "LETTER_SPACING";
+    TextStyleKeys[TextStyleKeys["LETTER_SPACING_STATE"] = 68] = "LETTER_SPACING_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_WRAP"] = 72] = "TEXT_WRAP";
+    TextStyleKeys[TextStyleKeys["TEXT_WRAP_STATE"] = 76] = "TEXT_WRAP_STATE";
+    TextStyleKeys[TextStyleKeys["WHITE_SPACE"] = 80] = "WHITE_SPACE";
+    TextStyleKeys[TextStyleKeys["WHITE_SPACE_STATE"] = 84] = "WHITE_SPACE_STATE";
+    TextStyleKeys[TextStyleKeys["TRANSFORM"] = 88] = "TRANSFORM";
+    TextStyleKeys[TextStyleKeys["TRANSFORM_STATE"] = 92] = "TRANSFORM_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_ALIGN"] = 96] = "TEXT_ALIGN";
+    TextStyleKeys[TextStyleKeys["TEXT_ALIGN_STATE"] = 100] = "TEXT_ALIGN_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_JUSTIFY"] = 104] = "TEXT_JUSTIFY";
+    TextStyleKeys[TextStyleKeys["TEXT_JUSTIFY_STATE"] = 108] = "TEXT_JUSTIFY_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_INDENT"] = 112] = "TEXT_INDENT";
+    TextStyleKeys[TextStyleKeys["TEXT_INDENT_STATE"] = 116] = "TEXT_INDENT_STATE";
+    TextStyleKeys[TextStyleKeys["TEXT_OVERFLOW"] = 120] = "TEXT_OVERFLOW";
+    TextStyleKeys[TextStyleKeys["TEXT_OVERFLOW_STATE"] = 124] = "TEXT_OVERFLOW_STATE";
+    TextStyleKeys[TextStyleKeys["LINE_HEIGHT"] = 128] = "LINE_HEIGHT";
+    TextStyleKeys[TextStyleKeys["LINE_HEIGHT_TYPE"] = 132] = "LINE_HEIGHT_TYPE";
+    TextStyleKeys[TextStyleKeys["LINE_HEIGHT_STATE"] = 133] = "LINE_HEIGHT_STATE";
 })(TextStyleKeys || (TextStyleKeys = {}));
 function parseLengthPercentageAuto(type, value) {
     switch (type) {
@@ -161,6 +263,16 @@ StateKeys.TEXT_ALIGN = new StateKeys(1n << 29n);
 StateKeys.BOX_SIZING = new StateKeys(1n << 30n);
 StateKeys.OVERFLOW = new StateKeys(1n << 31n);
 StateKeys.ITEM_IS_TABLE = new StateKeys(1n << 32n);
+StateKeys.ITEM_IS_REPLACED = new StateKeys(1n << 33n);
+StateKeys.DISPLAY_MODE = new StateKeys(1n << 34n);
+StateKeys.FORCE_INLINE = new StateKeys(1n << 35n);
+StateKeys.MIN_CONTENT_WIDTH = new StateKeys(1n << 36n);
+StateKeys.MIN_CONTENT_HEIGHT = new StateKeys(1n << 37n);
+StateKeys.MAX_CONTENT_WIDTH = new StateKeys(1n << 38n);
+StateKeys.MAX_CONTENT_HEIGHT = new StateKeys(1n << 39n);
+StateKeys.BORDER_STYLE = new StateKeys(1n << 40n);
+StateKeys.BORDER_RADIUS = new StateKeys(1n << 41n);
+StateKeys.BORDER_COLOR = new StateKeys(1n << 42n);
 class TextStateKeys {
     constructor(bits) {
         this.bits = bits;
@@ -175,17 +287,43 @@ class TextStateKeys {
         return (this.bits & flag.bits) !== 0n;
     }
 }
+TextStateKeys.ALL = new TextStateKeys(-1n);
+TextStateKeys.NONE = new TextStateKeys(0n);
 TextStateKeys.COLOR = new TextStateKeys(1n << 0n);
-TextStateKeys.DECORATION_LINE = new TextStateKeys(1n << 1n);
-TextStateKeys.DECORATION_COLOR = new TextStateKeys(1n << 2n);
-TextStateKeys.TEXT_ALIGN = new TextStateKeys(1n << 3n);
-TextStateKeys.TEXT_JUSTIFY = new TextStateKeys(1n << 4n);
-TextStateKeys.BACKGROUND_COLOR = new TextStateKeys(1n << 5n);
-TextStateKeys.SIZE = new TextStateKeys(1n << 6n);
-TextStateKeys.TRANSFORM = new TextStateKeys(1n << 7n);
-TextStateKeys.FONT_STYLE = new TextStateKeys(1n << 8n);
-TextStateKeys.FONT_STYLE_SLANT = new TextStateKeys(1n << 9n);
+TextStateKeys.SIZE = new TextStateKeys(1n << 1n);
+TextStateKeys.FONT_WEIGHT = new TextStateKeys(1n << 2n);
+TextStateKeys.FONT_STYLE = new TextStateKeys(1n << 3n);
+TextStateKeys.FONT_FAMILY = new TextStateKeys(1n << 4n);
+TextStateKeys.LETTER_SPACING = new TextStateKeys(1n << 5n);
+TextStateKeys.DECORATION_LINE = new TextStateKeys(1n << 6n);
+TextStateKeys.DECORATION_COLOR = new TextStateKeys(1n << 7n);
+TextStateKeys.DECORATION_STYLE = new TextStateKeys(1n << 8n);
+TextStateKeys.BACKGROUND_COLOR = new TextStateKeys(1n << 9n);
 TextStateKeys.TEXT_WRAP = new TextStateKeys(1n << 10n);
+TextStateKeys.WHITE_SPACE = new TextStateKeys(1n << 11n);
+TextStateKeys.TRANSFORM = new TextStateKeys(1n << 12n);
+TextStateKeys.TEXT_JUSTIFY = new TextStateKeys(1n << 13n);
+TextStateKeys.TEXT_OVERFLOW = new TextStateKeys(1n << 14n);
+TextStateKeys.LINE_HEIGHT = new TextStateKeys(1n << 15n);
+TextStateKeys.TEXT_ALIGN = new TextStateKeys(1n << 16n);
+const getInt8 = (view, offset) => {
+    return view.getInt8(offset);
+};
+const setInt8 = (view, offset, value) => {
+    view.setInt8(offset, value);
+};
+const getUint8 = (view, offset) => {
+    return view.getUint8(offset);
+};
+const setUint8 = (view, offset, value) => {
+    view.setUint8(offset, value);
+};
+const getInt16 = (view, offset) => {
+    return view.getInt16(offset, true);
+};
+const setInt16 = (view, offset, value) => {
+    view.setInt16(offset, value, true);
+};
 const getUint32 = (view, offset) => {
     return view.getUint32(offset, true);
 };
@@ -210,45 +348,36 @@ export class Style {
         this.isTextDirty = -1n;
         this.inBatch = false;
     }
-    static fromView(view, nativeView, isText = false) {
+    static fromView(view, nativeView) {
         //console.time('fromView');
         const ret = new Style();
         ret.view_ = view;
+        ret.nativeView = nativeView;
         if (__ANDROID__) {
-            const style = nativeView.getStyle();
-            if (!isText) {
-                const styleBuffer = style.getValues();
-                const buffer = ArrayBuffer.from(styleBuffer);
-                ret.style_view = new DataView(buffer);
-            }
-            else {
-                const styleBuffer = style.getValues();
-                const buffer = ArrayBuffer.from(styleBuffer);
-                ret.style_view = new DataView(buffer);
-                const textStyleBuffer = nativeView.getTextValues();
-                const textBuffer = ArrayBuffer.from(textStyleBuffer);
-                ret.text_style_view = new DataView(textBuffer);
+            let style = nativeView?.getStyle?.();
+            if (!style) {
+                // if a non mason view is passed
+                style = org.nativescript.mason.masonkit.Mason.getShared().styleForView(nativeView);
             }
+            const styleBuffer = style.getValues();
+            const buffer = ArrayBuffer.from(styleBuffer);
+            ret.style_view = new DataView(buffer);
+            const textStyleBuffer = style.getTextValues();
+            const textBuffer = ArrayBuffer.from(textStyleBuffer);
+            ret.text_style_view = new DataView(textBuffer);
         }
         else if (__APPLE__) {
-            const style = nativeView.style;
-            if (!isText) {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                const styleBuffer = style.valuesCompat;
-                const buffer = interop.bufferFromData(styleBuffer);
-                ret.style_view = new DataView(buffer);
-            }
-            else {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                const styleBuffer = style.valuesCompat;
-                const buffer = interop.bufferFromData(styleBuffer);
-                ret.style_view = new DataView(buffer);
-                const textStyleBuffer = nativeView.textValues;
-                const textBuffer = interop.bufferFromData(textStyleBuffer);
-                ret.text_style_view = new DataView(textBuffer);
+            let style = nativeView?.style;
+            if (!style) {
+                style = NSCMason.shared.styleForView(nativeView);
             }
+            const styleBuffer = style.values;
+            const buffer = interop.bufferFromData(styleBuffer);
+            ret.style_view = new DataView(buffer);
+            //@ts-ignore
+            const textStyleBuffer = style.textValues;
+            const textBuffer = interop.bufferFromData(textStyleBuffer);
+            ret.text_style_view = new DataView(textBuffer);
         }
         //console.timeEnd('fromView');
         return ret;
@@ -257,30 +386,17 @@ export class Style {
         this.isDirty = -1n;
         this.isTextDirty = -1n;
     }
-    syncStyle(isText = false) {
-        //  console.time('syncStyle');
+    syncStyle() {
         if (__ANDROID__) {
-            if (!isText) {
-                const view = this.view.android;
-                view.syncStyle(this.isDirty.toString());
-            }
-            else {
-                const view = this.view.android;
-                view.syncStyle(this.isDirty.toString(), this.isTextDirty.toString());
-            }
+            const view = this.view.android;
+            view.syncStyle(this.isDirty.toString(), this.isTextDirty.toString());
         }
         else if (__APPLE__) {
-            if (!isText) {
-                const view = this.view.ios;
-                view.syncStyle(this.isDirty.toString());
-            }
-            else {
-                const view = this.view.ios;
-                view.syncStyle(this.isDirty.toString(), this.isTextDirty.toString());
-            }
+            const view = this.view.ios;
+            // @ts-ignore
+            view.mason_syncStyle(this.isDirty.toString(), this.isTextDirty.toString());
         }
         this.resetState();
-        //   console.timeEnd('syncStyle');
     }
     setOrAppendState(value) {
         if (this.isDirty == -1n) {
@@ -290,7 +406,7 @@ export class Style {
             this.isDirty = this.isDirty | value.bits;
         }
         if (!this.inBatch) {
-            this.syncStyle(this.text_style_view != null);
+            this.syncStyle();
         }
     }
     setOrAppendTextState(value) {
@@ -301,18 +417,184 @@ export class Style {
             this.isTextDirty = this.isTextDirty | value.bits;
         }
         if (!this.inBatch) {
-            this.syncStyle(this.text_style_view != null);
+            this.syncStyle();
         }
     }
     batch(fn) {
         this.inBatch = true;
         fn(this);
         this.inBatch = false;
-        this.syncStyle(this.text_style_view != null);
+        this.syncStyle();
     }
     get view() {
         return this.view_;
     }
+    get boxSizing() {
+        switch (getUint32(this.style_view, StyleKeys.BOX_SIZING)) {
+            case 0:
+                return 'border-box';
+            case 1:
+                return 'content-box';
+        }
+    }
+    set boxSizing(value) {
+        let boxSizing = -1;
+        switch (value) {
+            case 'border-box':
+                boxSizing = 0;
+                break;
+            case 'content-box':
+                boxSizing = 1;
+                break;
+        }
+        if (boxSizing !== -1) {
+            setUint32(this.style_view, StyleKeys.BOX_SIZING, boxSizing);
+            this.setOrAppendState(StateKeys.BOX_SIZING);
+        }
+    }
+    get fontSize() {
+        if (!this.text_style_view) {
+            // BLACK ?
+            return 16;
+        }
+        const type = getUint8(this.text_style_view, TextStyleKeys.SIZE_TYPE);
+        const value = getInt32(this.text_style_view, TextStyleKeys.SIZE);
+        if (type === 1) {
+            return `${value / 100}%`;
+        }
+        return value;
+    }
+    set fontSize(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        switch (typeof value) {
+            case 'number':
+                setInt32(this.text_style_view, TextStyleKeys.SIZE, value);
+                setInt8(this.text_style_view, TextStyleKeys.SIZE_STATE, 1);
+                setInt8(this.text_style_view, TextStyleKeys.SIZE_TYPE, 0);
+                this.setOrAppendTextState(TextStateKeys.SIZE);
+                break;
+            case 'object':
+                switch (value.unit) {
+                    case 'dip':
+                        setInt32(this.text_style_view, TextStyleKeys.SIZE, value.value);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_STATE, 1);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_TYPE, 0);
+                        this.setOrAppendTextState(TextStateKeys.SIZE);
+                        break;
+                    case 'px':
+                        setInt32(this.text_style_view, TextStyleKeys.SIZE, layout.toDeviceIndependentPixels(value.value));
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_STATE, 1);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_TYPE, 0);
+                        this.setOrAppendTextState(TextStateKeys.SIZE);
+                        break;
+                    case '%':
+                        setInt32(this.text_style_view, TextStyleKeys.SIZE, value.value * 100);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_STATE, 1);
+                        setInt8(this.text_style_view, TextStyleKeys.SIZE_TYPE, 1);
+                        this.setOrAppendTextState(TextStateKeys.SIZE);
+                        break;
+                }
+                break;
+        }
+        if (value && typeof value === 'object') {
+        }
+        else {
+        }
+    }
+    get fontStyle() {
+        if (!this.text_style_view) {
+            // normal ?
+            return 'normal';
+        }
+        switch (getInt32(this.text_style_view, TextStyleKeys.FONT_STYLE_TYPE)) {
+            case 0:
+                return 'normal';
+            case 1:
+                return 'italic';
+            case 2:
+                return 'oblique';
+            default:
+                return 'normal';
+        }
+    }
+    set fontStyle(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        let style = -1;
+        switch (value) {
+            case 'normal':
+                style = 0;
+                break;
+            case 'italic':
+                style = 1;
+                break;
+            case 'oblique':
+                style = 2;
+                break;
+        }
+        if (style !== -1) {
+            setInt32(this.text_style_view, TextStyleKeys.FONT_STYLE_TYPE, style);
+            setInt8(this.text_style_view, TextStyleKeys.FONT_STYLE_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.FONT_STYLE);
+        }
+    }
+    get fontWeight() {
+        if (!this.text_style_view) {
+            // BLACK ?
+            return 400;
+        }
+        return getInt32(this.text_style_view, TextStyleKeys.FONT_WEIGHT);
+    }
+    set fontWeight(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        let weight = -1;
+        switch (value) {
+            case '100':
+                weight = 100;
+                break;
+            case '200':
+                weight = 200;
+                break;
+            case '300':
+                weight = 300;
+                break;
+            case 'normal':
+            case '400':
+                weight = 400;
+                break;
+            case '500':
+                weight = 500;
+                break;
+            case '600':
+                weight = 600;
+                break;
+            case '700':
+            case 'bold':
+                weight = 700;
+                break;
+            case '800':
+                weight = 800;
+                break;
+            case '900':
+                weight = 900;
+                break;
+            default:
+                if (typeof value === 'number' && value >= 100 && value <= 1000) {
+                    weight = value;
+                }
+                break;
+        }
+        if (weight !== -1) {
+            setInt32(this.text_style_view, TextStyleKeys.FONT_WEIGHT, weight);
+            setInt8(this.text_style_view, TextStyleKeys.FONT_WEIGHT_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.FONT_WEIGHT);
+        }
+    }
     get color() {
         if (!this.text_style_view) {
             // BLACK ?
@@ -325,6 +607,7 @@ export class Style {
             return;
         }
         setUint32(this.text_style_view, TextStyleKeys.COLOR, value);
+        setInt8(this.text_style_view, TextStyleKeys.COLOR_STATE, 1);
         this.setOrAppendTextState(TextStateKeys.COLOR);
     }
     get backgroundColor() {
@@ -339,6 +622,7 @@ export class Style {
             return;
         }
         setUint32(this.text_style_view, TextStyleKeys.BACKGROUND_COLOR, value);
+        setInt8(this.text_style_view, TextStyleKeys.BACKGROUND_COLOR_STATE, 1);
         this.setOrAppendTextState(TextStateKeys.BACKGROUND_COLOR);
     }
     get textWrap() {
@@ -346,32 +630,66 @@ export class Style {
             // BLACK ?
             return 0;
         }
-        return getInt32(this.text_style_view, TextStyleKeys.TEXT_ALIGN);
+        return getInt32(this.text_style_view, TextStyleKeys.TEXT_WRAP);
     }
     set textWrap(value) {
         if (!this.text_style_view) {
             return;
         }
-        setInt32(this.text_style_view, TextStyleKeys.TEXT_WRAP, value);
-        this.setOrAppendTextState(TextStateKeys.TEXT_WRAP);
+        let wrap = -1;
+        switch (value) {
+            case 'nowrap':
+                wrap = 0;
+                break;
+            case 'wrap':
+                wrap = 1;
+                break;
+            case 'balance':
+                wrap = 2;
+                break;
+        }
+        if (typeof value === 'number' && value >= 0 && value < 3) {
+            wrap = value;
+        }
+        if (wrap !== -1) {
+            setInt32(this.text_style_view, TextStyleKeys.TEXT_WRAP, wrap);
+            setInt8(this.text_style_view, TextStyleKeys.TEXT_WRAP_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.TEXT_WRAP);
+        }
     }
     get styleView() {
         return this.style_view;
     }
     get display() {
+        const mode = getInt32(this.style_view, StyleKeys.DISPLAY_MODE);
+        if (mode === 1 /* DisplayMode.Inline */) {
+            return 'inline';
+        }
         switch (getInt32(this.style_view, StyleKeys.DISPLAY)) {
             case 0:
                 return 'none';
             case 1:
+                if (mode === 2 /* DisplayMode.Box */) {
+                    return 'inline-flex';
+                }
                 return 'flex';
             case 2:
+                if (mode === 2 /* DisplayMode.Box */) {
+                    return 'inline-grid';
+                }
                 return 'grid';
             case 3:
+                if (mode === 2 /* DisplayMode.Box */) {
+                    return 'inline-block';
+                }
                 return 'block';
+            default:
+                return 'none';
         }
     }
     set display(value) {
         let display = -1;
+        let displayMode = 0;
         switch (value) {
             case 'none':
                 display = 0;
@@ -385,9 +703,28 @@ export class Style {
             case 'block':
                 display = 3;
                 break;
+            case 'inline':
+                // inline
+                display = 1;
+                displayMode = 1;
+                break;
+            case 'inline-block':
+                // inline-block
+                display = 3;
+                displayMode = 2;
+                break;
+            case 'inline-flex':
+                display = 1;
+                displayMode = 2;
+                break;
+            case 'inline-grid':
+                display = 2;
+                displayMode = 2;
+                break;
         }
         if (display != -1) {
             setInt32(this.style_view, StyleKeys.DISPLAY, display);
+            setInt32(this.style_view, StyleKeys.DISPLAY_MODE, displayMode);
             this.setOrAppendState(StateKeys.DISPLAY);
         }
     }
@@ -421,9 +758,9 @@ export class Style {
             case 1:
                 return 'row';
             case 2:
-                return 'column-reverse';
-            case 3:
                 return 'row-reverse';
+            case 3:
+                return 'column-reverse';
         }
     }
     set flexDirection(value) {
@@ -435,10 +772,10 @@ export class Style {
             case 'row':
                 flex = 1;
                 break;
-            case 'column-reverse':
+            case 'row-reverse':
                 flex = 2;
                 break;
-            case 'row-reverse':
+            case 'column-reverse':
                 flex = 3;
                 break;
         }
@@ -551,7 +888,6 @@ export class Style {
         return parseLengthPercentageAuto(type, value);
     }
     set width(value) {
-        console.log('set width', value);
         switch (typeof value) {
             case 'string':
                 setInt32(this.style_view, StyleKeys.WIDTH_TYPE, 0);
@@ -679,12 +1015,12 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.MAX_SIZE);
     }
-    get borderLeft() {
+    get borderLeftWidth() {
         const type = getInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.BORDER_LEFT_VALUE);
         return parseLengthPercentage(type, value);
     }
-    set borderLeft(value) {
+    set borderLeftWidth(value) {
         switch (typeof value) {
             case 'number':
                 setInt32(this.style_view, StyleKeys.BORDER_LEFT_TYPE, 0);
@@ -709,12 +1045,12 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.BORDER);
     }
-    get borderRight() {
+    get borderRightWidth() {
         const type = getInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.BORDER_RIGHT_VALUE);
         return parseLengthPercentage(type, value);
     }
-    set borderRight(value) {
+    set borderRightWidth(value) {
         switch (typeof value) {
             case 'number':
                 setInt32(this.style_view, StyleKeys.BORDER_RIGHT_TYPE, 0);
@@ -739,12 +1075,12 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.BORDER);
     }
-    get borderTop() {
+    get borderTopWidth() {
         const type = getInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.BORDER_TOP_VALUE);
         return parseLengthPercentage(type, value);
     }
-    set borderTop(value) {
+    set borderTopWidth(value) {
         switch (typeof value) {
             case 'number':
                 setInt32(this.style_view, StyleKeys.BORDER_TOP_TYPE, 0);
@@ -769,12 +1105,12 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.BORDER);
     }
-    get borderBottom() {
+    get borderBottomWidth() {
         const type = getInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.BORDER_BOTTOM_VALUE);
         return parseLengthPercentage(type, value);
     }
-    set borderBottom(value) {
+    set borderBottomWidth(value) {
         switch (typeof value) {
             case 'number':
                 setInt32(this.style_view, StyleKeys.BORDER_BOTTOM_TYPE, 0);
@@ -802,26 +1138,31 @@ export class Style {
     get left() {
         const type = getInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE);
-        return parseLengthPercentage(type, value);
+        return parseLengthPercentageAuto(type, value);
     }
     set left(value) {
+        if (value === 'auto') {
+            setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, 0);
+            return;
+        }
         switch (typeof value) {
             case 'number':
-                setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 0);
+                setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
                 setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, layout.toDevicePixels(value));
                 break;
             case 'object':
                 switch (value.unit) {
                     case 'dip':
-                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 0);
+                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
                         setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case 'px':
-                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 0);
+                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
                         setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, value.value);
                         break;
                     case '%':
-                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
+                        setInt32(this.style_view, StyleKeys.INSET_LEFT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, value.value);
                         break;
                 }
@@ -832,26 +1173,31 @@ export class Style {
     get right() {
         const type = getInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE);
-        return parseLengthPercentage(type, value);
+        return parseLengthPercentageAuto(type, value);
     }
     set right(value) {
+        if (value === 'auto') {
+            setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, 0);
+            return;
+        }
         switch (typeof value) {
             case 'number':
-                setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 0);
+                setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
                 setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, layout.toDevicePixels(value));
                 break;
             case 'object':
                 switch (value.unit) {
                     case 'dip':
-                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 0);
+                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
                         setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case 'px':
-                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 0);
+                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
                         setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, value.value);
                         break;
                     case '%':
-                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
+                        setInt32(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, value.value);
                         break;
                 }
@@ -862,26 +1208,31 @@ export class Style {
     get top() {
         const type = getInt32(this.style_view, StyleKeys.INSET_TOP_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE);
-        return parseLengthPercentage(type, value);
+        return parseLengthPercentageAuto(type, value);
     }
     set top(value) {
+        if (value === 'auto') {
+            setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, 0);
+            return;
+        }
         switch (typeof value) {
             case 'number':
-                setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 0);
+                setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
                 setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, layout.toDevicePixels(value));
                 break;
             case 'object':
                 switch (value.unit) {
                     case 'dip':
-                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 0);
+                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
                         setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case 'px':
-                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 0);
+                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
                         setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, value.value);
                         break;
                     case '%':
-                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
+                        setInt32(this.style_view, StyleKeys.INSET_TOP_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, value.value);
                         break;
                 }
@@ -892,26 +1243,31 @@ export class Style {
     get bottom() {
         const type = getInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE);
-        return parseLengthPercentage(type, value);
+        return parseLengthPercentageAuto(type, value);
     }
     set bottom(value) {
+        if (value === 'auto') {
+            setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 0);
+            setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, 0);
+            return;
+        }
         switch (typeof value) {
             case 'number':
-                setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 0);
+                setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
                 setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, layout.toDevicePixels(value));
                 break;
             case 'object':
                 switch (value.unit) {
                     case 'dip':
-                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 0);
+                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
                         setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, layout.toDevicePixels(value.value));
                         break;
                     case 'px':
-                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 0);
+                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
                         setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, value.value);
                         break;
                     case '%':
-                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
+                        setInt32(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, value.value);
                         break;
                 }
@@ -950,7 +1306,7 @@ export class Style {
                 }
                 break;
         }
-        this.setOrAppendState(StateKeys.INSET);
+        this.setOrAppendState(StateKeys.MARGIN);
     }
     get marginRight() {
         const type = getInt32(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE);
@@ -1177,8 +1533,37 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.PADDING);
     }
+    get gridGap() {
+        return this.gap;
+    }
+    set gridGap(value) {
+        this.gap = value;
+    }
     get gap() {
-        return `${this.rowGap} ${this.columnGap}`;
+        if (CoreLength.equals(this.rowGap, this.columnGap)) {
+            return `${CoreLength.convertToString(this.rowGap)}`;
+        }
+        return `${CoreLength.convertToString(this.rowGap)} ${CoreLength.convertToString(this.columnGap)}`;
+    }
+    set gap(value) {
+        if (typeof value === 'string') {
+            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
+            const length = values.length;
+            if (length === 0) {
+                return;
+            }
+            if (length === 1) {
+                const row = values[0];
+                this.rowGap = CoreLength.parse(row);
+                this.columnGap = CoreLength.parse(row);
+            }
+            if (length > 1) {
+                const row = values[0];
+                const column = values[1];
+                this.rowGap = CoreLength.parse(row);
+                this.columnGap = CoreLength.parse(column);
+            }
+        }
     }
     get rowGap() {
         const type = getInt32(this.style_view, StyleKeys.GAP_ROW_TYPE);
@@ -1431,6 +1816,104 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.ALIGN_CONTENT);
     }
+    get justifyItems() {
+        switch (getInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS)) {
+            case -1 /* JustifyItems.Normal */:
+                return 'normal';
+            case 0 /* JustifyItems.Start */:
+                return 'start';
+            case 1 /* JustifyItems.End */:
+                return 'end';
+            case 2 /* JustifyItems.Center */:
+                return 'center';
+            case 3 /* JustifyItems.Baseline */:
+                return 'baseline';
+            case 4 /* JustifyItems.Stretch */:
+                return 'stretch';
+            case 5 /* JustifyItems.FlexStart */:
+                return 'flex-start';
+            case 6 /* JustifyItems.FlexEnd */:
+                return 'flex-end';
+        }
+    }
+    set justifyItems(value) {
+        switch (value) {
+            case 'normal':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, -1 /* JustifyItems.Normal */);
+                break;
+            case 'start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 0 /* JustifyItems.Start */);
+                break;
+            case 'end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 1 /* JustifyItems.End */);
+                break;
+            case 'center':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 2 /* JustifyItems.Center */);
+                break;
+            case 'baseline':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 3 /* JustifyItems.Baseline */);
+                break;
+            case 'stretch':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 4 /* JustifyItems.Stretch */);
+                break;
+            case 'flex-start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 5 /* JustifyItems.FlexStart */);
+                break;
+            case 'flex-end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_ITEMS, 6 /* JustifyItems.FlexEnd */);
+                break;
+        }
+        this.setOrAppendState(StateKeys.JUSTIFY_ITEMS);
+    }
+    get justifySelf() {
+        switch (getInt32(this.style_view, StyleKeys.JUSTIFY_SELF)) {
+            case -1 /* JustifySelf.Normal */:
+                return 'normal';
+            case 0 /* JustifySelf.Start */:
+                return 'start';
+            case 1 /* JustifySelf.End */:
+                return 'end';
+            case 2 /* JustifySelf.Center */:
+                return 'center';
+            case 3 /* JustifySelf.Baseline */:
+                return 'baseline';
+            case 4 /* JustifySelf.Stretch */:
+                return 'stretch';
+            case 5 /* JustifySelf.FlexStart */:
+                return 'flex-start';
+            case 6 /* JustifySelf.FlexEnd */:
+                return 'flex-end';
+        }
+    }
+    set justifySelf(value) {
+        switch (value) {
+            case 'normal':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, -1 /* JustifySelf.Normal */);
+                break;
+            case 'start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 0 /* JustifySelf.Start */);
+                break;
+            case 'end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 1 /* JustifySelf.End */);
+                break;
+            case 'center':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 2 /* JustifySelf.Center */);
+                break;
+            case 'baseline':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 3 /* JustifySelf.Baseline */);
+                break;
+            case 'stretch':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 4 /* JustifySelf.Stretch */);
+                break;
+            case 'flex-start':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 5 /* JustifySelf.FlexStart */);
+                break;
+            case 'flex-end':
+                setInt32(this.style_view, StyleKeys.JUSTIFY_SELF, 6 /* JustifySelf.FlexEnd */);
+                break;
+        }
+        this.setOrAppendState(StateKeys.JUSTIFY_SELF);
+    }
     get justifyContent() {
         switch (getInt32(this.style_view, StyleKeys.JUSTIFY_CONTENT)) {
             case -1 /* JustifyContent.Normal */:
@@ -1484,6 +1967,52 @@ export class Style {
         }
         this.setOrAppendState(StateKeys.JUSTIFY_CONTENT);
     }
+    get gridAutoRows() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridAutoRows(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridAutoRows;
+        }
+        return '';
+    }
+    set gridAutoRows(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridAutoRows(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridAutoRows = value;
+        }
+    }
+    get gridAutoColumns() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridAutoColumns(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridAutoColumns;
+        }
+        return '';
+    }
+    set gridAutoColumns(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridAutoColumns(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridAutoColumns = value;
+        }
+    }
     get gridAutoFlow() {
         switch (getInt32(this.style_view, StyleKeys.GRID_AUTO_FLOW)) {
             case 0:
@@ -1511,6 +2040,249 @@ export class Style {
                 setInt32(this.style_view, StyleKeys.GRID_AUTO_FLOW, 3);
                 break;
         }
+        this.setOrAppendState(StateKeys.GRID_AUTO_FLOW);
+    }
+    get gridRowGap() {
+        return this.rowGap;
+    }
+    set gridRowGap(value) {
+        this.rowGap = value;
+    }
+    get gridColumnGap() {
+        return this.columnGap;
+    }
+    set gridColumnGap(value) {
+        this.columnGap = value;
+    }
+    set gridColumn(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumn(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridColumn = value;
+        }
+    }
+    get gridColumn() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridColumn(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridColumn;
+        }
+        return '';
+    }
+    get gridColumnStart() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridColumnStart(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridColumnStart;
+        }
+        return '';
+    }
+    set gridColumnStart(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumnStart(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridColumnStart = value;
+        }
+    }
+    get gridColumnEnd() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridColumnEnd(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridColumnEnd;
+        }
+        return '';
+    }
+    set gridColumnEnd(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumnEnd(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridColumnEnd = value;
+        }
+    }
+    set gridRow(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRow(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridRow = value;
+        }
+    }
+    get gridRow() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridRow(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridRow;
+        }
+        return '';
+    }
+    get gridRowStart() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridRowStart(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridRowStart;
+        }
+        return '';
+    }
+    set gridRowStart(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRowStart(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridRowStart = value;
+        }
+    }
+    get gridRowEnd() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridRowEnd(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridRowEnd;
+        }
+        return '';
+    }
+    set gridRowEnd(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRowEnd(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridRowEnd = value;
+        }
+    }
+    set gridArea(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridArea(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridArea = value;
+        }
+    }
+    get gridArea() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridArea(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridArea;
+        }
+        return '';
+    }
+    set gridTemplateRows(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateRows(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridTemplateRows = value;
+        }
+    }
+    get gridTemplateRows() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridTemplateRows(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridTemplateRows;
+        }
+        return '';
+    }
+    get gridTemplateColumns() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridTemplateColumns(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridTemplateColumns;
+        }
+        return '';
+    }
+    set gridTemplateColumns(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateColumns(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridTemplateColumns = value;
+        }
+    }
+    get gridTemplateAreas() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getGridTemplateAreas(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.gridTemplateAreas;
+        }
+        return '';
+    }
+    set gridTemplateAreas(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateAreas(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.gridTemplateAreas = value;
+        }
     }
     get overflow() {
         const x = this.overflowX;
@@ -1547,6 +2319,12 @@ export class Style {
                         case 'scroll':
                             setInt32(this.style_view, StyleKeys.OVERFLOW_X, 2);
                             break;
+                        case 'clip':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_X, 3);
+                            break;
+                        case 'auto':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_X, 4);
+                            break;
                     }
                     switch (values[1]) {
                         case 'visible':
@@ -1558,10 +2336,17 @@ export class Style {
                         case 'scroll':
                             setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 2);
                             break;
+                        case 'clip':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 3);
+                            break;
+                        case 'auto':
+                            setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 4);
+                            break;
                     }
                 }
                 break;
         }
+        this.setOrAppendState(StateKeys.OVERFLOW);
     }
     get overflowX() {
         switch (getInt32(this.style_view, StyleKeys.OVERFLOW_X)) {
@@ -1574,16 +2359,31 @@ export class Style {
         }
     }
     set overflowX(value) {
+        let dirty = false;
         switch (value) {
             case 'visible':
                 setInt32(this.style_view, StyleKeys.OVERFLOW_X, 0);
+                dirty = true;
                 break;
             case 'hidden':
                 setInt32(this.style_view, StyleKeys.OVERFLOW_X, 1);
+                dirty = true;
                 break;
             case 'scroll':
+                dirty = true;
                 setInt32(this.style_view, StyleKeys.OVERFLOW_X, 2);
                 break;
+            case 'clip':
+                dirty = true;
+                setInt32(this.style_view, StyleKeys.OVERFLOW_X, 3);
+                break;
+            case 'auto':
+                dirty = true;
+                setInt32(this.style_view, StyleKeys.OVERFLOW_X, 4);
+                break;
+        }
+        if (dirty) {
+            this.setOrAppendState(StateKeys.OVERFLOW_X);
         }
     }
     get overflowY() {
@@ -1594,32 +2394,53 @@ export class Style {
                 return 'hidden';
             case 2:
                 return 'scroll';
+            case 3:
+                return 'clip';
+            case 4:
+                return 'auto';
         }
     }
     set overflowY(value) {
+        let dirty = false;
         switch (value) {
             case 'visible':
                 setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 0);
+                dirty = true;
                 break;
             case 'hidden':
                 setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 1);
+                dirty = true;
                 break;
             case 'scroll':
                 setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 2);
+                dirty = true;
+                break;
+            case 'clip':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 3);
+                dirty = true;
+                break;
+            case 'auto':
+                setInt32(this.style_view, StyleKeys.OVERFLOW_Y, 4);
+                dirty = true;
                 break;
         }
+        if (dirty) {
+            this.setOrAppendState(StateKeys.OVERFLOW_Y);
+        }
     }
     get flexGrow() {
         return getFloat32(this.style_view, StyleKeys.FLEX_GROW);
     }
     set flexGrow(value) {
         setFloat32(this.style_view, StyleKeys.FLEX_GROW, value);
+        this.setOrAppendState(StateKeys.FLEX_GROW);
     }
     get flexShrink() {
         return getFloat32(this.style_view, StyleKeys.FLEX_SHRINK);
     }
     set flexShrink(value) {
         setFloat32(this.style_view, StyleKeys.FLEX_SHRINK, value);
+        this.setOrAppendState(StateKeys.FLEX_SHRINK);
     }
     get scrollBarWidth() {
         return getFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH);
@@ -1627,18 +2448,254 @@ export class Style {
     set scrollBarWidth(value) {
         if (typeof value === 'number') {
             setFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH, value);
+            this.setOrAppendState(StateKeys.SCROLLBAR_WIDTH);
         }
         else if (typeof value === 'object') {
             switch (value.unit) {
                 case 'dip':
                     setFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH, layout.toDevicePixels(value.value));
+                    this.setOrAppendState(StateKeys.SCROLLBAR_WIDTH);
                     break;
                 case 'px':
                     setFloat32(this.style_view, StyleKeys.SCROLLBAR_WIDTH, value.value);
+                    this.setOrAppendState(StateKeys.SCROLLBAR_WIDTH);
+                    break;
+            }
+        }
+    }
+    get letterSpacing() {
+        return getFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING);
+    }
+    set letterSpacing(value) {
+        if (typeof value === 'number') {
+            setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, value);
+            setUint8(this.text_style_view, TextStyleKeys.LETTER_SPACING_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+        }
+        else if (typeof value === 'object') {
+            switch (value.unit) {
+                case 'dip':
+                    setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, layout.toDevicePixels(value.value));
+                    setUint8(this.text_style_view, TextStyleKeys.LETTER_SPACING_STATE, 1);
+                    this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+                    break;
+                case 'px':
+                    setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, value.value);
+                    setUint8(this.text_style_view, TextStyleKeys.LETTER_SPACING_STATE, 1);
+                    this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+                    break;
+            }
+        }
+    }
+    get lineHeight() {
+        return getFloat32(this.text_style_view, TextStyleKeys.LINE_HEIGHT);
+    }
+    set lineHeight(value) {
+        if (typeof value === 'number') {
+            setFloat32(this.text_style_view, TextStyleKeys.LINE_HEIGHT, value);
+            setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_STATE, 1);
+            setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_TYPE, 0);
+            this.setOrAppendTextState(TextStateKeys.LINE_HEIGHT);
+        }
+        else if (typeof value === 'object') {
+            switch (value.unit) {
+                case 'dip':
+                    setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, layout.toDevicePixels(value.value));
+                    setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_STATE, 1);
+                    setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_TYPE, 1);
+                    this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
+                    break;
+                case 'px':
+                    setFloat32(this.text_style_view, TextStyleKeys.LETTER_SPACING, value.value);
+                    setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_STATE, 1);
+                    setUint8(this.text_style_view, TextStyleKeys.LINE_HEIGHT_TYPE, 1);
+                    this.setOrAppendTextState(TextStateKeys.LETTER_SPACING);
                     break;
             }
         }
     }
+    get textOverflow() {
+        if (!this.text_style_view) {
+            // clip ?
+            return 'clip';
+        }
+        const type = getInt32(this.text_style_view, TextStyleKeys.TEXT_OVERFLOW);
+        switch (type) {
+            case 0:
+                return 'clip';
+            case 1:
+                return 'ellipsis';
+            default:
+        }
+        if (__ANDROID__) {
+            // @ts-ignore
+            const overflow = this.view_._view.getTextOverflow();
+        }
+        if (__APPLE__) {
+            // @ts-ignore
+            const overflow = this.view_._view.textOverflow;
+        }
+        return 'clip';
+    }
+    set textOverflow(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        let flow = -1;
+        switch (value) {
+            case 'clip':
+                flow = 0;
+                break;
+            case 'ellipsis':
+                flow = 1;
+                break;
+            default:
+                {
+                    if (__ANDROID__) {
+                        // @ts-ignore
+                        const overflow = this.view_._view.getTextOverflow();
+                    }
+                    if (__APPLE__) {
+                        // @ts-ignore
+                        const overflow = this.view_._view.textOverflow;
+                    }
+                }
+                break;
+        }
+        if (flow !== -1) {
+            setInt32(this.text_style_view, TextStyleKeys.TEXT_OVERFLOW, flow);
+            setInt8(this.text_style_view, TextStyleKeys.TEXT_OVERFLOW_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.TEXT_OVERFLOW);
+        }
+    }
+    get textAlignment() {
+        if (!this.text_style_view) {
+            // clip ?
+            return 'start';
+        }
+        const type = getInt32(this.text_style_view, TextStyleKeys.TEXT_ALIGN);
+        switch (type) {
+            case 0:
+                // auto
+                return 'start';
+            case 1:
+                return 'left';
+            case 2:
+                return 'right';
+            case 3:
+                return 'center';
+            case 4:
+                return 'justify';
+            case 5:
+                return 'start';
+            case 6:
+                return 'end';
+            default:
+                return 'start';
+        }
+    }
+    set textAlignment(value) {
+        if (!this.text_style_view) {
+            return;
+        }
+        let align = -1;
+        switch (value) {
+            case 'left':
+                align = 1;
+                break;
+            case 'right':
+                align = 2;
+                break;
+            case 'center':
+                align = 3;
+                break;
+            case 'justify':
+                align = 4;
+                break;
+            case 'start':
+                align = 5;
+                break;
+            case 'end':
+                align = 6;
+                break;
+            default:
+                break;
+        }
+        if (align !== -1) {
+            setInt32(this.text_style_view, TextStyleKeys.TEXT_ALIGN, align);
+            setInt8(this.text_style_view, TextStyleKeys.TEXT_ALIGN_STATE, 1);
+            this.setOrAppendTextState(TextStateKeys.TEXT_ALIGN);
+        }
+    }
+    get background() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getBackground(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.background;
+        }
+        return '';
+    }
+    set background(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setBackground(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.background = value;
+        }
+    }
+    get border() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getBorder(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.border;
+        }
+        return '';
+    }
+    set border(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setBorder(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.border = value;
+        }
+    }
+    get filter() {
+        if (!this.nativeView) {
+            return '';
+        }
+        if (__ANDROID__) {
+            return org.nativescript.mason.masonkit.NodeHelper.getShared().getFilter(this.nativeView);
+        }
+        if (__APPLE__) {
+            return this.nativeView.style.filter;
+        }
+        return '';
+    }
+    set filter(value) {
+        if (!this.nativeView) {
+            return;
+        }
+        if (__ANDROID__) {
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setFilter(this.nativeView, value);
+        }
+        if (__APPLE__) {
+            this.nativeView.style.filter = value;
+        }
+    }
     toJSON() {
         return {
             display: this.display,
@@ -1674,12 +2731,21 @@ export class Style {
                 top: this.paddingTop,
                 bottom: this.paddingBottom,
             },
+            aspectRatio: this.aspectRatio,
+            flexBasis: this.flexBasis,
+            overflow: this.overflow,
+            flexShrink: this.flexShrink,
+            scrollBarWidth: this.scrollBarWidth,
             gap: this.gap,
+            gridArea: this.gridArea,
             gridAutoFlow: this.gridAutoFlow,
             gridAutoColumns: this.gridAutoColumns,
             gridAutoRows: this.gridAutoRows,
             gridColumn: this.gridColumn,
             gridRow: this.gridRow,
+            gridTemplateRows: this.gridTemplateRows,
+            gridTemplateColumns: this.gridTemplateColumns,
+            filter: this.filter,
         };
     }
 }