@triniwiz/nativescript-masonkit 1.0.0-beta.87 → 1.0.0-beta.89

package/style.js

@@ -256,7 +256,7 @@ function windowsSetGrid(nativeView, field, value) {
     }
     catch (_) { }
 }
-function parseLengthPercentageAuto(type, value) {
+function parseDimension(type, value) {
     switch (type) {
         case 0:
             return 'auto';
@@ -264,7 +264,78 @@ function parseLengthPercentageAuto(type, value) {
             return { value, unit: 'px' };
         case 2:
             return { value, unit: '%' };
+        case 3:
+            return 'min-content';
+        case 4:
+            return 'max-content';
+        case 5:
+            return 'fit-content';
+        case 6:
+            return `fit-content(${value}px)`;
+        case 7:
+            return `fit-content(${value}%)`;
+        case 8:
+            return 'stretch';
+        case 9:
+            return 'content';
+    }
+}
+function parseLengthPercentageAuto(type, value) {
+    return parseDimension(type, value);
+}
+function dimensionFromString(value) {
+    const t = value.trim();
+    if (t === '' || t === 'auto') {
+        return { type: 0, value: 0 };
+    }
+    switch (t) {
+        case 'min-content':
+            return { type: 3, value: 0 };
+        case 'max-content':
+            return { type: 4, value: 0 };
+        case 'fit-content':
+            return { type: 5, value: 0 };
+        case 'stretch':
+            return { type: 8, value: 0 };
+        case 'content':
+            return { type: 9, value: 0 };
+    }
+    if (t.startsWith('fit-content(') && t.endsWith(')')) {
+        const limit = t.slice('fit-content('.length, -1).trim();
+        if (limit.endsWith('%')) {
+            // taffy percentages are a [0.0, 1.0] fraction, not [0.0, 100.0]
+            return { type: 7, value: (parseFloat(limit) || 0) / 100 };
+        }
+        const n = parseFloat(limit) || 0;
+        return { type: 6, value: limit.endsWith('px') ? n : layout.toDevicePixels(n) };
+    }
+    if (t.endsWith('%')) {
+        // percentages are stored as a [0.0, 1.0] fraction, not percentage points
+        return { type: 2, value: (parseFloat(t) || 0) / 100 };
+    }
+    const n = parseFloat(t) || 0;
+    return { type: 1, value: t.endsWith('px') ? n : layout.toDevicePixels(n) };
+}
+// Shared parser for LengthPercentageAuto props (min/max width/height, margin, inset)
+function lengthPercentageAutoFromString(value) {
+    const t = value.trim();
+    if (t === '' || t === 'auto') {
+        return { type: 0, value: 0 };
     }
+    if (t.endsWith('%')) {
+        return { type: 2, value: (parseFloat(t) || 0) / 100 };
+    }
+    const n = parseFloat(t) || 0;
+    return { type: 1, value: t.endsWith('px') ? n : layout.toDevicePixels(n) };
+}
+// Same as lengthPercentageAutoFromString but for padding (no "auto", type 0/1 swapped)
+function lengthPercentageFromString(value) {
+    const t = value.trim();
+    if (t.endsWith('%')) {
+        return { type: 1, value: (parseFloat(t) || 0) / 100 };
+    }
+    const n = parseFloat(t) || 0;
+    return { type: 0, value: t.endsWith('px') ? n : layout.toDevicePixels(n) };
 }
 function parseLengthPercentage(type, value) {
     switch (type) {
@@ -403,6 +474,25 @@ const splitBigIntToInt64Parts = (value) => {
     }
     return [lowSigned.toString(), HIGH.toString()];
 };
+// Android-only fast path for syncStyle(): splits the 128-bit dirty mask into
+// four signed 32-bit words instead of two 64-bit decimal strings. Plain JS
+// `number` <-> Java `int` marshalling is a completely standard, unambiguous
+// {N} bridge path; encoding as decimal strings instead forced the receiving
+// side (Element.syncStyle(String,String)) through Long.parseUnsignedLong with
+// a BigInteger fallback on every single style write. Recombined bit-exactly
+// on the Kotlin side via (high32 << 32) | (low32 & 0xffffffff) - see
+// Element.syncStyleParts.
+const splitBigIntToInt32Parts = (value) => {
+    const MASK64 = (1n << 64n) - 1n;
+    const MASK32 = 0xffffffffn;
+    const LOW = value & MASK64;
+    const HIGH = (value >> 64n) & MASK64;
+    const lowLow32 = Number(BigInt.asIntN(32, LOW & MASK32));
+    const lowHigh32 = Number(BigInt.asIntN(32, (LOW >> 32n) & MASK32));
+    const highLow32 = Number(BigInt.asIntN(32, HIGH & MASK32));
+    const highHigh32 = Number(BigInt.asIntN(32, (HIGH >> 32n) & MASK32));
+    return [lowLow32, lowHigh32, highLow32, highHigh32];
+};
 const getInt16 = (view, offset) => {
     return view.getInt16(offset, true);
 };
@@ -690,19 +780,20 @@ function borderStyleToEnum(value) {
 function borderStyleFromEnum(value) {
     return BORDER_STYLE_VALUES[value] ?? 'none';
 }
+// hoisted so it's not rebuilt on every parseObjectPosition call
+const OBJECT_POSITION_KEYWORDS = {
+    left: { type: 1, val: 0 },
+    center: { type: 1, val: 50 },
+    right: { type: 1, val: 100 },
+    top: { type: 1, val: 0 },
+    bottom: { type: 1, val: 100 },
+};
 function parseObjectPosition(value) {
-    const keywords = {
-        left: { type: 1, val: 0 },
-        center: { type: 1, val: 50 },
-        right: { type: 1, val: 100 },
-        top: { type: 1, val: 0 },
-        bottom: { type: 1, val: 100 },
-    };
     const parts = value.trim().split(/\s+/);
     if (parts.length === 0)
         return null;
     function parseComponent(s) {
-        const kw = keywords[s];
+        const kw = OBJECT_POSITION_KEYWORDS[s];
         if (kw)
             return kw;
         if (s.endsWith('%'))
@@ -745,11 +836,12 @@ function fontStretchToValue(value) {
     }
     return -1;
 }
+// built once instead of scanning FONT_STRETCH_KEYWORDS on every getter read
+const FONT_STRETCH_REVERSE = new Map(Object.entries(FONT_STRETCH_KEYWORDS).map(([kw, val]) => [val, kw]));
 function fontStretchFromValue(v) {
-    for (const [kw, val] of Object.entries(FONT_STRETCH_KEYWORDS)) {
-        if (val === v)
-            return kw;
-    }
+    const kw = FONT_STRETCH_REVERSE.get(v);
+    if (kw !== undefined)
+        return kw;
     return `${v / 100}%`;
 }
 export class Style {
@@ -891,6 +983,15 @@ export class Style {
             this.setOrAppendState(value);
         }
     }
+    coerceCssStringValue(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
+        if (value == null) {
+            return '';
+        }
+        return String(value);
+    }
     setPseudoCssStringValue(name, value, applyAndroid, applyApple) {
         if (!this.nativeView) {
             return;
@@ -1050,19 +1151,22 @@ export class Style {
         this.isDirty = -1n;
     }
     syncStyle() {
-        const [low, high] = splitBigIntToInt64Parts(this.isDirty);
         if (__ANDROID__) {
+            const [lowLow, lowHigh, highLow, highHigh] = splitBigIntToInt32Parts(this.isDirty);
             //@ts-ignore
             const view = this.view?.android ?? this.view._view;
-            view.syncStyle(low, high);
+            // @ts-ignore - syncStyleParts is a newer native method; typings regenerate from the AAR separately.
+            view.syncStyleParts(lowLow, lowHigh, highLow, highHigh);
         }
         else if (__APPLE__) {
+            const [low, high] = splitBigIntToInt64Parts(this.isDirty);
             //@ts-ignore
             const view = this.view?.ios ?? this.view._view;
             // @ts-ignore
             view.mason_syncStyle(low, high);
         }
         else if (__WINDOWS__) {
+            const [low, high] = splitBigIntToInt64Parts(this.isDirty);
             // @ts-ignore
             const view = this.view?.windows ?? this.view._view;
             view.SyncStyle(low, high);
@@ -1470,7 +1574,8 @@ export class Style {
             else {
                 this.isDirty = this.isDirty | StateKeys.DISPLAY_MODE.bits;
             }
-            this.commitState(StateKeys.DISPLAY.and(StateKeys.DISPLAY_MODE));
+            // DISPLAY/DISPLAY_MODE are disjoint bits; use .or(), not .and()
+            this.commitState(StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE));
         }
     }
     get position() {
@@ -1539,6 +1644,10 @@ export class Style {
                 return 'wrap';
             case 2:
                 return 'wrap-reverse';
+            case 3:
+                return 'balance';
+            case 4:
+                return 'balance-reverse';
         }
     }
     set flexWrap(value) {
@@ -1553,6 +1662,12 @@ export class Style {
             case 'wrap-reverse':
                 wrap = 2;
                 break;
+            case 'balance':
+                wrap = 3;
+                break;
+            case 'balance-reverse':
+                wrap = 4;
+                break;
         }
         if (wrap != -1) {
             this.prepareMut();
@@ -1571,10 +1686,13 @@ export class Style {
     }
     set minWidth(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 0);
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.MIN_WIDTH_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 1);
@@ -1609,10 +1727,13 @@ export class Style {
     }
     set minHeight(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 0);
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 1);
@@ -1643,29 +1764,15 @@ export class Style {
     get width() {
         const type = getInt8(this.style_view, StyleKeys.WIDTH_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.WIDTH_VALUE);
-        return parseLengthPercentageAuto(type, value);
+        return parseDimension(type, value);
     }
     set width(value) {
         switch (typeof value) {
             case 'string': {
-                // Parse the string instead of forcing `auto`. Reactively-applied sizes arrive as strings
-                // ("48", "48px", "50%") — the old stub dropped them to auto (0), so dynamically-added boxes
-                // rendered 0x0. unitless/dip → device pixels; px → as-is; % → percent.
                 this.prepareMut();
-                const t = value.trim();
-                if (t === '' || t === 'auto') {
-                    setInt8(this.style_view, StyleKeys.WIDTH_TYPE, 0);
-                    setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, 0);
-                }
-                else if (t.endsWith('%')) {
-                    setInt8(this.style_view, StyleKeys.WIDTH_TYPE, 2);
-                    setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, parseFloat(t) || 0);
-                }
-                else {
-                    const n = parseFloat(t) || 0;
-                    setInt8(this.style_view, StyleKeys.WIDTH_TYPE, 1);
-                    setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, t.endsWith('px') ? n : layout.toDevicePixels(n));
-                }
+                const dim = dimensionFromString(value);
+                setInt8(this.style_view, StyleKeys.WIDTH_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, dim.value);
                 break;
             }
             case 'number':
@@ -1698,27 +1805,15 @@ export class Style {
     get height() {
         const type = getInt8(this.style_view, StyleKeys.HEIGHT_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.HEIGHT_VALUE);
-        return parseLengthPercentageAuto(type, value);
+        return parseDimension(type, value);
     }
     set height(value) {
         switch (typeof value) {
             case 'string': {
-                // Parse the string (see width setter) — the old stub forced auto/0, breaking string sizes.
                 this.prepareMut();
-                const t = value.trim();
-                if (t === '' || t === 'auto') {
-                    setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, 0);
-                    setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, 0);
-                }
-                else if (t.endsWith('%')) {
-                    setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, 2);
-                    setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, parseFloat(t) || 0);
-                }
-                else {
-                    const n = parseFloat(t) || 0;
-                    setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, 1);
-                    setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, t.endsWith('px') ? n : layout.toDevicePixels(n));
-                }
+                const dim = dimensionFromString(value);
+                setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, dim.value);
                 break;
             }
             case 'number':
@@ -1755,10 +1850,13 @@ export class Style {
     }
     set maxWidth(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 0);
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.MAX_WIDTH_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 1);
@@ -1793,10 +1891,13 @@ export class Style {
     }
     set maxHeight(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 0);
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 1);
@@ -1964,10 +2065,12 @@ export class Style {
         var type;
         var insetValue;
         switch (typeof value) {
-            case 'string':
-                type = 0;
-                insetValue = 0;
+            case 'string': {
+                const dim = lengthPercentageAutoFromString(value);
+                type = dim.type;
+                insetValue = dim.value;
                 break;
+            }
             case 'number':
                 type = 1;
                 insetValue = layout.toDevicePixels(value);
@@ -2004,13 +2107,14 @@ export class Style {
         return parseLengthPercentageAuto(type, value);
     }
     set left(value) {
-        if (value === 'auto') {
-            this.prepareMut();
-            setInt8(this.style_view, StyleKeys.INSET_LEFT_TYPE, 0);
-            setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, 0);
-            return;
-        }
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.INSET_LEFT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.INSET_LEFT_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.INSET_LEFT_TYPE, 1);
@@ -2044,13 +2148,14 @@ export class Style {
         return parseLengthPercentageAuto(type, value);
     }
     set right(value) {
-        if (value === 'auto') {
-            this.prepareMut();
-            setInt8(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 0);
-            setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, 0);
-            return;
-        }
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.INSET_RIGHT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.INSET_RIGHT_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.INSET_RIGHT_TYPE, 1);
@@ -2084,13 +2189,14 @@ export class Style {
         return parseLengthPercentageAuto(type, value);
     }
     set top(value) {
-        if (value === 'auto') {
-            this.prepareMut();
-            setInt8(this.style_view, StyleKeys.INSET_TOP_TYPE, 0);
-            setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, 0);
-            return;
-        }
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.INSET_TOP_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.INSET_TOP_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.INSET_TOP_TYPE, 1);
@@ -2124,13 +2230,14 @@ export class Style {
         return parseLengthPercentageAuto(type, value);
     }
     set bottom(value) {
-        if (value === 'auto') {
-            this.prepareMut();
-            setInt8(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 0);
-            setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, 0);
-            return;
-        }
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.INSET_BOTTOM_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.INSET_BOTTOM_TYPE, 1);
@@ -2162,10 +2269,12 @@ export class Style {
         var type;
         var marginValue;
         switch (typeof value) {
-            case 'string':
-                type = 0;
-                marginValue = 0;
+            case 'string': {
+                const dim = lengthPercentageAutoFromString(value);
+                type = dim.type;
+                marginValue = dim.value;
                 break;
+            }
             case 'number':
                 type = 1;
                 marginValue = layout.toDevicePixels(value);
@@ -2203,10 +2312,13 @@ export class Style {
     }
     set marginLeft(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, 0);
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.MARGIN_LEFT_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.MARGIN_LEFT_TYPE, 1);
@@ -2241,10 +2353,13 @@ export class Style {
     }
     set marginRight(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, 0);
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.MARGIN_RIGHT_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.MARGIN_RIGHT_TYPE, 1);
@@ -2279,10 +2394,13 @@ export class Style {
     }
     set marginTop(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.MARGIN_TOP_TYPE, 0);
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.MARGIN_TOP_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.MARGIN_TOP_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.MARGIN_TOP_TYPE, 1);
@@ -2317,10 +2435,13 @@ export class Style {
     }
     set marginBottom(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, 0);
+                const dim = lengthPercentageAutoFromString(value);
+                setInt8(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.MARGIN_BOTTOM_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.MARGIN_BOTTOM_TYPE, 1);
@@ -2361,6 +2482,13 @@ export class Style {
     }
     set paddingLeft(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value);
+                setInt8(this.style_view, StyleKeys.PADDING_LEFT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.PADDING_LEFT_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.PADDING_LEFT_TYPE, 0);
@@ -2395,6 +2523,13 @@ export class Style {
     }
     set paddingRight(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value);
+                setInt8(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.PADDING_RIGHT_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.PADDING_RIGHT_TYPE, 0);
@@ -2429,6 +2564,13 @@ export class Style {
     }
     set paddingTop(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value);
+                setInt8(this.style_view, StyleKeys.PADDING_TOP_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.PADDING_TOP_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.PADDING_TOP_TYPE, 0);
@@ -2463,6 +2605,13 @@ export class Style {
     }
     set paddingBottom(value) {
         switch (typeof value) {
+            case 'string': {
+                this.prepareMut();
+                const dim = lengthPercentageFromString(value);
+                setInt8(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.PADDING_BOTTOM_VALUE, dim.value);
+                break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.PADDING_BOTTOM_TYPE, 0);
@@ -2594,6 +2743,8 @@ export class Style {
         return getFloat32(this.style_view, StyleKeys.ASPECT_RATIO);
     }
     set aspectRatio(value) {
+        if (getFloat32(this.style_view, StyleKeys.ASPECT_RATIO) === value)
+            return;
         this.prepareMut();
         setFloat32(this.style_view, StyleKeys.ASPECT_RATIO, value);
         this.commitState(StateKeys.ASPECT_RATIO);
@@ -2601,14 +2752,17 @@ export class Style {
     get flexBasis() {
         const type = getInt8(this.style_view, StyleKeys.FLEX_BASIS_TYPE);
         const value = getFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE);
-        return parseLengthPercentageAuto(type, value);
+        return parseDimension(type, value);
     }
     set flexBasis(value) {
         switch (typeof value) {
-            case 'string':
+            case 'string': {
                 this.prepareMut();
-                setInt8(this.style_view, StyleKeys.FLEX_BASIS_TYPE, 0);
+                const dim = dimensionFromString(value);
+                setInt8(this.style_view, StyleKeys.FLEX_BASIS_TYPE, dim.type);
+                setFloat32(this.style_view, StyleKeys.FLEX_BASIS_VALUE, dim.value);
                 break;
+            }
             case 'number':
                 this.prepareMut();
                 setInt8(this.style_view, StyleKeys.FLEX_BASIS_TYPE, 1);
@@ -2762,8 +2916,13 @@ export class Style {
                 return 'start';
             case 3 /* AlignContent.Stretch */:
                 return 'stretch';
+            case 7 /* AlignContent.FlexStart */:
+                return 'flex-start';
+            case 8 /* AlignContent.FlexEnd */:
+                return 'flex-end';
         }
     }
+    // 'flex-start'/'flex-end' were missing from this switch entirely
     set alignContent(value) {
         let align = -1;
         switch (value) {
@@ -2791,6 +2950,12 @@ export class Style {
             case 'stretch':
                 align = 3 /* AlignContent.Stretch */;
                 break;
+            case 'flex-start':
+                align = 7 /* AlignContent.FlexStart */;
+                break;
+            case 'flex-end':
+                align = 8 /* AlignContent.FlexEnd */;
+                break;
         }
         if (align !== -1) {
             this.prepareMut();
@@ -2957,6 +3122,12 @@ export class Style {
             case 'stretch':
                 v = 3 /* JustifyContent.Stretch */;
                 break;
+            case 'flex-start':
+                v = 7 /* JustifyContent.FlexStart */;
+                break;
+            case 'flex-end':
+                v = 8 /* JustifyContent.FlexEnd */;
+                break;
         }
         if (v !== -1) {
             this.prepareMut();
@@ -2980,6 +3151,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // A bare number can't marshal over JNI into the native String setter.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridAutoRows(this.nativeView, value);
         }
@@ -3006,6 +3179,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // See gridAutoRows above.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridAutoColumns(this.nativeView, value);
         }
@@ -3052,6 +3227,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // See gridAutoRows above.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumn(this.nativeView, value);
         }
@@ -3090,6 +3267,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // See gridAutoRows above.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumnStart(this.nativeView, value);
         }
@@ -3116,6 +3295,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // See gridAutoRows above.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridColumnEnd(this.nativeView, value);
         }
@@ -3130,6 +3311,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // See gridAutoRows above.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRow(this.nativeView, value);
         }
@@ -3168,6 +3351,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // See gridAutoRows above.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRowStart(this.nativeView, value);
         }
@@ -3194,6 +3379,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // See gridAutoRows above.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridRowEnd(this.nativeView, value);
         }
@@ -3208,6 +3395,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
+        // See gridAutoRows above.
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridArea(this.nativeView, value);
         }
@@ -3234,9 +3423,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
-        // Reset (e.g. a media query toggling grid-rows off) passes null; the native
-        // setters are non-null, so coerce to '' which clears the template.
-        value = value ?? '';
+        // null clears the template; also guards against a bare number (see gridAutoRows above).
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateRows(this.nativeView, value);
         }
@@ -3275,9 +3463,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
-        // Reset (e.g. a media query toggling grid-cols off) passes null; the native
-        // setters are non-null, so coerce to '' which clears the template.
-        value = value ?? '';
+        // null clears the template; also guards against a bare number (see gridAutoRows above).
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateColumns(this.nativeView, value);
         }
@@ -3304,8 +3491,8 @@ export class Style {
         if (!this.nativeView) {
             return;
         }
-        // Reset passes null; the native setters are non-null, coerce to '' (clears it).
-        value = value ?? '';
+        // null clears it; also guards against a bare number (see gridAutoRows above).
+        value = value == null ? '' : String(value);
         if (__ANDROID__) {
             org.nativescript.mason.masonkit.NodeHelper.getShared().setGridTemplateAreas(this.nativeView, value);
         }
@@ -3395,6 +3582,9 @@ export class Style {
         return getFloat32(this.style_view, StyleKeys.FLEX_GROW);
     }
     set flexGrow(value) {
+        // skip invalidation on a no-op re-apply of the same value
+        if (getFloat32(this.style_view, StyleKeys.FLEX_GROW) === value)
+            return;
         this.prepareMut();
         setFloat32(this.style_view, StyleKeys.FLEX_GROW, value);
         this.commitState(StateKeys.FLEX_GROW);
@@ -3403,6 +3593,8 @@ export class Style {
         return getFloat32(this.style_view, StyleKeys.FLEX_SHRINK);
     }
     set flexShrink(value) {
+        if (getFloat32(this.style_view, StyleKeys.FLEX_SHRINK) === value)
+            return;
         this.prepareMut();
         setFloat32(this.style_view, StyleKeys.FLEX_SHRINK, value);
         this.commitState(StateKeys.FLEX_SHRINK);
@@ -3645,6 +3837,7 @@ export class Style {
         return '';
     }
     set background(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('background', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBackground(this.nativeView, value), () => (this.nativeView.style.background = value));
     }
     get backgroundImage() {
@@ -3660,6 +3853,7 @@ export class Style {
         return '';
     }
     set backgroundImage(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('background-image', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBackgroundImage(this.nativeView, value), () => (this.nativeView.style.backgroundImage = value));
     }
     get backgroundRepeat() {
@@ -3675,6 +3869,7 @@ export class Style {
         return '';
     }
     set backgroundRepeat(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('background-repeat', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBackgroundRepeat(this.nativeView, value), () => (this.nativeView.style.backgroundRepeat = value));
     }
     get backgroundPosition() {
@@ -3690,6 +3885,7 @@ export class Style {
         return '';
     }
     set backgroundPosition(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('background-position', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBackgroundPosition(this.nativeView, value), () => (this.nativeView.style.backgroundPosition = value));
     }
     get backgroundSize() {
@@ -3705,6 +3901,7 @@ export class Style {
         return '';
     }
     set backgroundSize(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('background-size', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBackgroundSize(this.nativeView, value), () => (this.nativeView.style.backgroundSize = value));
     }
     get backgroundClip() {
@@ -3720,6 +3917,7 @@ export class Style {
         return '';
     }
     set backgroundClip(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('background-clip', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBackgroundClip(this.nativeView, value), () => (this.nativeView.style.backgroundClip = value));
     }
     get borderRadius() {
@@ -3735,9 +3933,11 @@ export class Style {
         return '';
     }
     set borderRadius(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('border-radius', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderRadius(this.nativeView, value), () => (this.nativeView.style.borderRadius = value));
     }
     set textDecoration(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('text-decoration', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setTextDecoration(this.nativeView, value), () => this.nativeView.style.setTextDecoration(value));
     }
     get border() {
@@ -3753,6 +3953,7 @@ export class Style {
         return '';
     }
     set border(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('border', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorder(this.nativeView, value), () => (this.nativeView.style.border = value));
     }
     get paddingCss() {
@@ -3767,7 +3968,9 @@ export class Style {
         return '';
     }
     set paddingCss(value) {
-        const strValue = typeof value === 'number' ? `${value}px` : value;
+        // a bare number is dip, matching other numeric setters; Android's
+        // native parser treats "px" as unscaled device pixels, "dip" as scaled
+        const strValue = typeof value === 'number' ? `${value}dip` : value;
         this.setPseudoCssStringValue('padding', strValue, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setPaddingCss(this.nativeView, strValue), () => (this.nativeView.style.paddingCss = strValue));
     }
     get marginCss() {
@@ -3782,7 +3985,8 @@ export class Style {
         return '';
     }
     set marginCss(value) {
-        const strValue = typeof value === 'number' ? `${value}px` : value;
+        // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
+        const strValue = typeof value === 'number' ? `${value}dip` : value;
         this.setPseudoCssStringValue('margin', strValue, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setMarginCss(this.nativeView, strValue), () => (this.nativeView.style.marginCss = strValue));
     }
     get insetCss() {
@@ -3797,31 +4001,36 @@ export class Style {
         return '';
     }
     set insetCss(value) {
-        const strValue = typeof value === 'number' ? `${value}px` : value;
+        // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
+        const strValue = typeof value === 'number' ? `${value}dip` : value;
         this.setPseudoCssStringValue('inset', strValue, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setInsetCss(this.nativeView, strValue), () => (this.nativeView.style.insetCss = strValue));
     }
     get borderLeft() {
         return '';
     }
     set borderLeft(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('border-left', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderLeft(this.nativeView, value), () => (this.nativeView.style.borderLeft = value));
     }
     get borderTop() {
         return '';
     }
     set borderTop(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('border-top', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderTop(this.nativeView, value), () => (this.nativeView.style.borderTop = value));
     }
     get borderRight() {
         return '';
     }
     set borderRight(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('border-right', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderRight(this.nativeView, value), () => (this.nativeView.style.borderRight = value));
     }
     get borderBottom() {
         return '';
     }
     set borderBottom(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('border-bottom', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderBottom(this.nativeView, value), () => (this.nativeView.style.borderBottom = value));
     }
     get filter() {
@@ -3837,6 +4046,7 @@ export class Style {
         return '';
     }
     set filter(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('filter', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setFilter(this.nativeView, value), () => (this.nativeView.style.filter = value));
     }
     get boxShadow() {
@@ -3858,6 +4068,7 @@ export class Style {
         return this.boxShadow;
     }
     set boxShadow(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('box-shadow', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBoxShadow(this.nativeView, value), () => (this.nativeView.style.boxShadow = value));
     }
     get transform() {
@@ -3873,6 +4084,7 @@ export class Style {
         return '';
     }
     set transform(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('transform', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setTransform(this.nativeView, value), () => (this.nativeView.style.transform = value));
     }
     get verticalAlign() {
@@ -4036,12 +4248,15 @@ export class Style {
         return '';
     }
     set textShadow(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('text-shadow', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setTextShadow(this.nativeView, value), () => (this.nativeView.style.textShadow = value));
     }
     get zIndex() {
         return getInt32(this.style_view, StyleKeys.Z_INDEX);
     }
     set zIndex(value) {
+        if (getInt32(this.style_view, StyleKeys.Z_INDEX) === value)
+            return;
         this.prepareMut();
         setInt32(this.style_view, StyleKeys.Z_INDEX, value);
         this.commitState(StateKeys.Z_INDEX);
@@ -4115,6 +4330,7 @@ export class Style {
         this.commitState(StateKeys.CLEAR);
     }
     set cornerShape(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('corner-shape', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setCornerShape(this.nativeView, value), () => (this.nativeView.style.cornerShape = value));
     }
     get cornerShape() {
@@ -4141,6 +4357,7 @@ export class Style {
         return '';
     }
     set cornerShapeTopLeft(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('corner-shape-top-left', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setCornerShapeTopLeft(this.nativeView, value), () => (this.nativeView.style.cornerShapeTopLeft = value));
     }
     get cornerShapeTopRight() {
@@ -4155,6 +4372,7 @@ export class Style {
         return '';
     }
     set cornerShapeTopRight(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('corner-shape-top-right', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setCornerShapeTopRight(this.nativeView, value), () => (this.nativeView.style.cornerShapeTopRight = value));
     }
     get cornerShapeBottomRight() {
@@ -4169,6 +4387,7 @@ export class Style {
         return '';
     }
     set cornerShapeBottomRight(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('corner-shape-bottom-right', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setCornerShapeBottomRight(this.nativeView, value), () => (this.nativeView.style.cornerShapeBottomRight = value));
     }
     get cornerShapeBottomLeft() {
@@ -4183,6 +4402,7 @@ export class Style {
         return '';
     }
     set cornerShapeBottomLeft(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('corner-shape-bottom-left', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setCornerShapeBottomLeft(this.nativeView, value), () => (this.nativeView.style.cornerShapeBottomLeft = value));
     }
     get objectPosition() {
@@ -4330,6 +4550,7 @@ export class Style {
         return '';
     }
     set borderImage(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('border-image', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderImage(this.nativeView, value), () => (this.nativeView.style.borderImage = value));
     }
     set 'border-image'(value) {
@@ -4376,6 +4597,7 @@ export class Style {
         return 'normal';
     }
     set fontFeatureSettings(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('font-feature-settings', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setFontFeatureSettings(this.nativeView, value), () => (this.nativeView.style.fontFeatureSettings = value));
     }
     set 'font-feature-settings'(value) {
@@ -4481,6 +4703,7 @@ export class Style {
         return '';
     }
     set backdropFilter(value) {
+        value = this.coerceCssStringValue(value);
         this.setPseudoCssStringValue('backdrop-filter', value, () => org.nativescript.mason.masonkit.NodeHelper.getShared().setBackdropFilter(this.nativeView, value), () => (this.nativeView.style.backdropFilter = value));
     }
     set 'backdrop-filter'(value) {