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

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,8 +264,79 @@ 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) {
         case 0:
@@ -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 {
@@ -1050,19 +1142,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 +1565,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 +1635,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 +1653,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 +1677,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 +1718,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 +1755,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 +1796,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 +1841,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 +1882,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 +2056,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 +2098,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 +2139,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 +2180,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 +2221,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 +2260,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 +2303,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 +2344,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 +2385,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 +2426,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 +2473,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 +2514,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 +2555,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 +2596,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 +2734,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 +2743,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 +2907,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 +2941,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 +3113,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 +3142,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 +3170,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 +3218,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 +3258,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 +3286,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 +3302,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 +3342,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 +3370,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 +3386,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 +3414,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 +3454,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 +3482,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 +3573,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 +3584,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);
@@ -3767,7 +3950,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 +3967,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,7 +3983,8 @@ 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() {
@@ -4042,6 +4229,8 @@ export class Style {
         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);