@triniwiz/nativescript-masonkit 1.0.0-beta.86 → 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);
 };
@@ -575,6 +665,85 @@ function parseBorderRadiusShorthand(value) {
             return { tl: vals[0], tr: vals[1], br: vals[2], bl: vals[3] };
     }
 }
+// Split on top-level whitespace, keeping parenthesised groups (e.g. `rgba(0,0,0,.5)`) intact.
+function splitTopLevelSpaces(value) {
+    const out = [];
+    let depth = 0;
+    let cur = '';
+    for (let i = 0; i < value.length; i++) {
+        const ch = value[i];
+        if (ch === '(')
+            depth++;
+        else if (ch === ')')
+            depth = Math.max(0, depth - 1);
+        if (depth === 0 && /\s/.test(ch)) {
+            if (cur.length) {
+                out.push(cur);
+                cur = '';
+            }
+        }
+        else {
+            cur += ch;
+        }
+    }
+    if (cur.length)
+        out.push(cur);
+    return out;
+}
+// Parse a `border` / `border-<side>` shorthand (`<width> <style> <color>`, any order) into px width,
+// border-style enum and argb color; each is null when absent.
+function parseBorderShorthand(value) {
+    let width = null;
+    let style = null;
+    let color = null;
+    for (const tok of splitTopLevelSpaces(String(value ?? '').trim())) {
+        const s = borderStyleToEnum(tok);
+        if (s !== -1) {
+            style = s;
+            continue;
+        }
+        const lower = tok.toLowerCase();
+        if (lower === 'thin') {
+            width = 1;
+            continue;
+        }
+        if (lower === 'medium') {
+            width = 3;
+            continue;
+        }
+        if (lower === 'thick') {
+            width = 5;
+            continue;
+        }
+        if (/^-?\d*\.?\d+(px|dip|dp|rem|em|pt)?$/i.test(tok)) {
+            const n = parseFloat(tok);
+            if (!isNaN(n)) {
+                width = n;
+                continue;
+            }
+        }
+        const c = normalizeColorValue(tok);
+        if (c != null)
+            color = c;
+    }
+    return { width, style, color };
+}
+// Parse a 1-4 token `border-color` shorthand into per-side argb (CSS order top/right/bottom/left).
+function parseSidesColorShorthand(value) {
+    const cols = splitTopLevelSpaces(String(value ?? '').trim()).map((t) => normalizeColorValue(t));
+    switch (cols.length) {
+        case 0:
+            return { t: null, r: null, b: null, l: null };
+        case 1:
+            return { t: cols[0], r: cols[0], b: cols[0], l: cols[0] };
+        case 2:
+            return { t: cols[0], r: cols[1], b: cols[0], l: cols[1] };
+        case 3:
+            return { t: cols[0], r: cols[1], b: cols[2], l: cols[1] };
+        default:
+            return { t: cols[0], r: cols[1], b: cols[2], l: cols[3] };
+    }
+}
 const i8Buffer = new Int8Array(4);
 const f32Buffer = new Uint8Array(Float32Array.BYTES_PER_ELEMENT * 4);
 const f32View = new Float32Array(f32Buffer.buffer);
@@ -611,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('%'))
@@ -666,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 {
@@ -914,25 +1085,79 @@ export class Style {
             setUint8(this.style_view, StyleKeys.BORDER_RADIUS_BOTTOM_LEFT_X_TYPE, 0);
             setUint8(this.style_view, StyleKeys.BORDER_RADIUS_BOTTOM_LEFT_Y_TYPE, 0);
             this.commitState(StateKeys.BORDER_RADIUS);
+            return;
+        }
+        if (name === 'border' || name === 'border-top' || name === 'border-right' || name === 'border-bottom' || name === 'border-left') {
+            const p = parseBorderShorthand(value);
+            let style = p.style;
+            if (style == null && (p.width != null || p.color != null))
+                style = 4; // solid
+            const sides = name === 'border' ? ['left', 'right', 'top', 'bottom'] : name === 'border-left' ? ['left'] : name === 'border-right' ? ['right'] : name === 'border-top' ? ['top'] : ['bottom'];
+            for (const s of sides)
+                this.writeBorderSide(s, p.width, style, p.color);
+            this.commitState(StateKeys.BORDER);
+            this.commitState(StateKeys.BORDER_STYLE);
+            this.commitState(StateKeys.BORDER_COLOR);
+            return;
+        }
+        if (name === 'border-color') {
+            const c = parseSidesColorShorthand(value);
+            this.writeBorderSide('top', null, null, c.t);
+            this.writeBorderSide('right', null, null, c.r);
+            this.writeBorderSide('bottom', null, null, c.b);
+            this.writeBorderSide('left', null, null, c.l);
+            this.commitState(StateKeys.BORDER_COLOR);
+            return;
         }
     }
+    // Write one side's border width/style/color into the style buffer; null components are skipped.
+    writeBorderSide(side, width, style, color) {
+        if (!this.style_view)
+            return;
+        const W = side === 'left' ? StyleKeys.BORDER_LEFT_VALUE : side === 'right' ? StyleKeys.BORDER_RIGHT_VALUE : side === 'top' ? StyleKeys.BORDER_TOP_VALUE : StyleKeys.BORDER_BOTTOM_VALUE;
+        const T = side === 'left' ? StyleKeys.BORDER_LEFT_TYPE : side === 'right' ? StyleKeys.BORDER_RIGHT_TYPE : side === 'top' ? StyleKeys.BORDER_TOP_TYPE : StyleKeys.BORDER_BOTTOM_TYPE;
+        const S = side === 'left' ? StyleKeys.BORDER_LEFT_STYLE : side === 'right' ? StyleKeys.BORDER_RIGHT_STYLE : side === 'top' ? StyleKeys.BORDER_TOP_STYLE : StyleKeys.BORDER_BOTTOM_STYLE;
+        const C = side === 'left' ? StyleKeys.BORDER_LEFT_COLOR : side === 'right' ? StyleKeys.BORDER_RIGHT_COLOR : side === 'top' ? StyleKeys.BORDER_TOP_COLOR : StyleKeys.BORDER_BOTTOM_COLOR;
+        this.prepareMut();
+        if (width != null) {
+            setInt8(this.style_view, T, 0);
+            setFloat32(this.style_view, W, width);
+        }
+        if (style != null)
+            setInt8(this.style_view, S, style);
+        if (color != null)
+            setUint32(this.style_view, C, color >>> 0);
+    }
+    setBorderColor(value) {
+        if (!__WINDOWS__ || !this.style_view)
+            return;
+        const c = parseSidesColorShorthand(String(value ?? ''));
+        this.writeBorderSide('top', null, null, c.t);
+        this.writeBorderSide('right', null, null, c.r);
+        this.writeBorderSide('bottom', null, null, c.b);
+        this.writeBorderSide('left', null, null, c.l);
+        this.commitState(StateKeys.BORDER_COLOR);
+    }
     resetState() {
         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);
@@ -1340,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() {
@@ -1409,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) {
@@ -1423,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();
@@ -1441,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);
@@ -1479,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);
@@ -1513,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':
@@ -1568,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':
@@ -1625,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);
@@ -1663,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);
@@ -1834,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);
@@ -1874,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);
@@ -1914,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);
@@ -1954,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);
@@ -1994,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);
@@ -2032,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);
@@ -2073,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);
@@ -2111,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);
@@ -2149,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);
@@ -2187,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);
@@ -2231,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);
@@ -2265,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);
@@ -2299,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);
@@ -2333,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);
@@ -2464,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);
@@ -2471,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);
@@ -2632,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) {
@@ -2661,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();
@@ -2827,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();
@@ -2850,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);
         }
@@ -2876,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);
         }
@@ -2922,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);
         }
@@ -2960,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);
         }
@@ -2986,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);
         }
@@ -3000,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);
         }
@@ -3038,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);
         }
@@ -3064,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);
         }
@@ -3078,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);
         }
@@ -3104,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);
         }
@@ -3145,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);
         }
@@ -3174,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);
         }
@@ -3265,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);
@@ -3273,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);
@@ -3637,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() {
@@ -3652,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() {
@@ -3667,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() {
@@ -3912,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);