@triniwiz/nativescript-masonkit 1.0.0-beta.120 → 1.0.0-beta.121

package/style.js

@@ -1,19 +1,21 @@
 import { layout as coreLayout } from '@nativescript/core/utils';
 import { cssUnits } from './units';
+import { displayDensity, masonLayout } from './display-density';
 import { isMasonView_, style_ } from './symbols';
 import { pickFontFamily } from './fonts';
-import { masonEngine } from './windows-panel-helpers';
+import { masonEngine } from './panel-helpers';
 import { reportCssDiagnostic } from './diagnostics';
 import { expandColorStops, resolveStopPositions } from './gradient-stops';
 import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
 import { encodeCssFilter, parseCssFilter } from './css-filter';
 import { resolveCssColors } from './css-colors';
 import { evaluateCssMath, hasCssMathFunction, isCssMathFunction, substituteCssMath } from './css-math';
-import { encodeWindowsBackground, encodeWindowsBorderImage, encodeWindowsMask, WINDOWS_MASK_PROPERTIES } from './windows-mask';
+import { encodeWindowsBackground, encodeWindowsBackgroundLayers, encodeWindowsBorderImage, encodeWindowsColorClip, encodeWindowsGradientBackground, hasCustomBackgroundBoxes, needsWindowsBackgroundLayers, encodeWindowsMask, WINDOWS_MASK_PROPERTIES } from './mask';
+import { splitBackground } from './css-shorthands';
 import { Color, Length as CoreLength, PercentLength as CorePercentLength, Screen, knownFolders } from '@nativescript/core';
 // The Windows shell lays out in XAML DIPs, so its style buffer holds DIPs. Core's Windows density
 // is 1 until the window has a XamlRoot, so converting stored early styles unscaled and later ones scaled.
-const layout = __WINDOWS__ ? { ...coreLayout, getDisplayDensity: () => 1, toDevicePixels: (value) => value, toDeviceIndependentPixels: (value) => value } : coreLayout;
+const layout = __WINDOWS__ ? { ...coreLayout, getDisplayDensity: () => 1, toDevicePixels: (value) => value, toDeviceIndependentPixels: (value) => value } : { ...coreLayout, ...masonLayout };
 var StyleKeys;
 (function (StyleKeys) {
     // <style-keys:offsets> generated from tools/scripts/style-keys/style-keys.schema, run `npm run gen:style-keys`
@@ -352,6 +354,7 @@ function unitToCssPx(n, unit, emBasis) {
         case 'vh':
         case 'vmin':
         case 'vmax': {
+            noteViewportUnit();
             const { viewportWidth: w, viewportHeight: h } = cssUnits;
             if (w <= 0 || h <= 0) {
                 reportCssDiagnostic({ kind: 'unsupported-unit', name: 'length', value: `${n}${unit}`, detail: 'viewport size not known yet, resolved to 0' });
@@ -380,6 +383,19 @@ function evaluateLengthMath(value, emBasis) {
 export function resolveCssMathIn(value, emBasis) {
     return substituteCssMath(value, (n, unit) => unitToCssPx(n, unit, emBasis));
 }
+const GRID_RELATIVE_LENGTH = /(^|[\s(,\]])([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(rem|em|pt|vw|vh|vmin|vmax)(?=$|[\s),[])/gi;
+/** A grid track list with relative units and math functions resolved to `px`, which the native parser reads. */
+export function resolveGridTrackUnits(value, emBasis) {
+    if (!value) {
+        return value;
+    }
+    let out = hasCssMathFunction(value) ? resolveCssMathIn(value, emBasis) : value;
+    out = out.replace(GRID_RELATIVE_LENGTH, (_m, lead, n, unit) => `${lead}${finite(unitToCssPx(parseFloat(n), unit.toLowerCase(), emBasis) ?? 0)}px`);
+    if (hasCssMathFunction(out)) {
+        reportCssDiagnostic({ kind: 'not-implemented', name: 'grid track list', value, detail: 'a math function mixing % with a length, dropped by the track parser' });
+    }
+    return out;
+}
 /**
  * A math function in a `<length-percentage>` as the buffer's type/value pair,
  * or undefined when `t` isn't one or doesn't resolve.
@@ -430,6 +446,7 @@ function tokenToDevicePx(token, raw, emBasis) {
     if (t.endsWith('pt'))
         return layout.toDevicePixels(n * PX_PER_PT);
     if (t.endsWith('vmin') || t.endsWith('vmax') || t.endsWith('vw') || t.endsWith('vh')) {
+        noteViewportUnit();
         if (cssUnits.viewportWidth <= 0 || cssUnits.viewportHeight <= 0) {
             reportCssDiagnostic({ kind: 'unsupported-unit', name: 'length', value: t, detail: 'viewport size not known yet, resolved to 0' });
             return 0;
@@ -538,6 +555,14 @@ export function cssLengthToDip(value, emBasis) {
     }
     return layout.toDeviceIndependentPixels(tokenToDevicePx(t, n, emBasis));
 }
+const SIZING_KEYWORD = /^(min-content|max-content|fit-content|stretch|content|fit-content\(.+\))$/;
+export function isSizingKeyword(value) {
+    return typeof value === 'string' && SIZING_KEYWORD.test(value.trim());
+}
+/** The keyword carried as the unit of a core length object, if any. */
+function sizingKeywordOf(value) {
+    return isSizingKeyword(value?.unit) ? value.unit : undefined;
+}
 function dimensionFromString(value, emBasis) {
     const t = value.trim();
     if (t === '' || t === 'auto') {
@@ -870,22 +895,32 @@ export function parseLinearGradientCss(value) {
         corner = parseGradientCorner(head);
         start = 1;
     }
+    const { colors, positions, lengths } = parseGradientStops(parts.slice(start));
+    if (colors.length < 1)
+        return null;
+    return { angle, ...(corner && { corner }), offsets: resolveStopPositions(positions), colors, interpolation, positions, ...(lengths && { lengths }) };
+}
+// A length stop needs the gradient line's length, which only the painter knows.
+function parseGradientStops(stops) {
     const colors = [];
     const positions = [];
-    for (const stop of expandColorStops(parts.slice(start))) {
-        // A length position needs the gradient line's length, unknown here, so that stop is placed as
-        // if it had none rather than dropped.
-        const pos = /\s+(-?[\d.]+)(%|[a-z]+)\s*$/i.exec(stop);
+    const lengths = [];
+    let anyLength = false;
+    for (const stop of expandColorStops(stops)) {
+        const pos = /\s+(-?[\d.]+)(%|[a-z]+)?\s*$/i.exec(stop);
         const colorStr = pos ? stop.slice(0, pos.index).trim() : stop;
         const argb = normalizeColorValue(colorStr);
         if (argb == null)
             continue;
         colors.push(argb >>> 0);
-        positions.push(pos && pos[2] === '%' ? parseFloat(pos[1]) / 100 : null);
-    }
-    if (colors.length < 1)
-        return null;
-    return { angle, ...(corner && { corner }), offsets: resolveStopPositions(positions), colors, interpolation };
+        const percent = pos?.[2] === '%';
+        const length = pos && !percent ? cssLengthToDip(pos[1] + (pos[2] ?? 'px')) : undefined;
+        positions.push(percent ? parseFloat(pos[1]) / 100 : null);
+        lengths.push(length ?? null);
+        if (length != null)
+            anyLength = true;
+    }
+    return { colors, positions, ...(anyLength && { lengths }) };
 }
 const RADIAL_GRADIENT_ARGS = /radial-gradient\s*\(([\s\S]*)\)\s*$/i;
 function positionFraction(token, axis) {
@@ -955,23 +990,17 @@ export function parseRadialGradientCss(value) {
         if (sizeKeyword)
             size = sizeKeyword[1].toLowerCase();
     }
+    const shape = head.replace(/\bat\s+.+$/i, '');
+    const circleLength = /\bcircle\b/i.test(shape) || /^\s*-?[\d.]+[a-z]*\s*$/i.test(shape) ? /(-?[\d.]+(?:px|r?em|pt|vw|vh)?)(?=\s|$)/i.exec(shape) : null;
+    const circleRadius = circleLength ? cssLengthToDip(/[a-z]$/i.test(circleLength[1]) ? circleLength[1] : circleLength[1] + 'px') : undefined;
+    const circle = /\bcircle\b/i.test(shape) || circleRadius != null ? ['closest-side', 'farthest-side', 'closest-corner', 'farthest-corner'].indexOf(size) : undefined;
     const sideX = size.startsWith('closest') ? Math.min(cx, 1 - cx) : Math.max(cx, 1 - cx);
     const sideY = size.startsWith('closest') ? Math.min(cy, 1 - cy) : Math.max(cy, 1 - cy);
     const corner = size.endsWith('corner') ? Math.SQRT2 : 1;
-    const colors = [];
-    const positions = [];
-    for (const stop of expandColorStops(parts.slice(start))) {
-        const pos = /\s+(-?[\d.]+)(%|[a-z]+)\s*$/i.exec(stop);
-        const colorStr = pos ? stop.slice(0, pos.index).trim() : stop;
-        const argb = normalizeColorValue(colorStr);
-        if (argb == null)
-            continue;
-        colors.push(argb >>> 0);
-        positions.push(pos && pos[2] === '%' ? parseFloat(pos[1]) / 100 : null);
-    }
+    const { colors, positions, lengths } = parseGradientStops(parts.slice(start));
     if (colors.length < 1)
         return null;
-    return { cx, cy, rx: Math.max(sideX * corner, 0.001), ry: Math.max(sideY * corner, 0.001), offsets: resolveStopPositions(positions), colors, interpolation };
+    return { cx, cy, rx: Math.max(sideX * corner, 0.001), ry: Math.max(sideY * corner, 0.001), offsets: resolveStopPositions(positions), colors, interpolation, positions, ...(lengths && { lengths }), ...(circle != null && { circle }), ...(circleRadius != null && { circleRadius }) };
 }
 export function backgroundFit(size) {
     const t = (size ?? '').trim().toLowerCase();
@@ -1048,6 +1077,8 @@ function radiusCorners(t) {
 }
 let deviceScaleCache = 0;
 function deviceScale() {
+    if (__ANDROID__)
+        return displayDensity();
     return deviceScaleCache || (deviceScaleCache = Screen.mainScreen.scale);
 }
 function parseWindowsRadius(token, emBasis) {
@@ -1080,6 +1111,41 @@ export function parseBorderRadiusShorthand(value, emBasis) {
             return { tl: vals[0], tr: vals[1], br: vals[2], bl: vals[3] };
     }
 }
+const CORNER_SHAPE_KEYWORDS = { round: 1, squircle: 2, bevel: 0, scoop: -1, notch: -Infinity, square: Infinity };
+const SUPERELLIPSE = /^superellipse\(\s*(-?infinity|[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)\s*\)$/;
+/** corner-shape as each corner's superellipse parameter K (TL TR BR BL), or null if a token is invalid. An empty value resets to round. */
+export function parseCornerShape(value) {
+    const tokens = splitTopLevelSpaces(String(value ?? '')
+        .trim()
+        .toLowerCase());
+    if (!tokens.length || (tokens.length === 1 && /^(initial|unset|revert|none)$/.test(tokens[0])))
+        return [1, 1, 1, 1];
+    if (tokens.length > 4)
+        return null;
+    const e = [];
+    for (const token of tokens) {
+        if (token in CORNER_SHAPE_KEYWORDS) {
+            e.push(CORNER_SHAPE_KEYWORDS[token]);
+            continue;
+        }
+        const m = SUPERELLIPSE.exec(token);
+        if (!m)
+            return null;
+        e.push(m[1] === 'infinity' ? Infinity : m[1] === '-infinity' ? -Infinity : Number(m[1]));
+    }
+    switch (e.length) {
+        case 1:
+            return [e[0], e[0], e[0], e[0]];
+        case 2:
+            return [e[0], e[1], e[0], e[1]];
+        case 3:
+            return [e[0], e[1], e[2], e[1]];
+        default:
+            return [e[0], e[1], e[2], e[3]];
+    }
+}
+const CORNER_SHAPE_KEYS = [StyleKeys.BORDER_RADIUS_TOP_LEFT_EXPONENT, StyleKeys.BORDER_RADIUS_TOP_RIGHT_EXPONENT, StyleKeys.BORDER_RADIUS_BOTTOM_RIGHT_EXPONENT, StyleKeys.BORDER_RADIUS_BOTTOM_LEFT_EXPONENT];
+const CORNER_SHAPE_LONGHANDS = { 'corner-shape-top-left': 0, 'corner-shape-top-right': 1, 'corner-shape-bottom-right': 2, 'corner-shape-bottom-left': 3 };
 // Split on top-level whitespace, keeping parenthesised groups (e.g. `rgba(0,0,0,.5)`) intact.
 function splitTopLevelSpaces(value) {
     const out = [];
@@ -1458,6 +1524,56 @@ export function cssColorToRgba(color) {
     }
     return `rgba(${color_.r}, ${color_.g}, ${color_.b}, ${+(color_.a / 255).toFixed(4)})`;
 }
+// Style writes that resolved a viewport unit, kept so a viewport change can write them again, as
+// a browser re-resolves vw/vh when the window resizes. Each setter is wrapped once below.
+const viewportWrites = new WeakMap();
+const viewportStyles = new Set();
+const writeTargets = [];
+const writeNames = [];
+const writeValues = [];
+let writeDepth = 0;
+const VIEWPORT_UNIT_TEXT = /\d(?:vw|vh|vmin|vmax)\b/i;
+/** Marks a style write in progress, so a viewport unit it resolves is remembered against `target[name] = value`. */
+export function beginStyleWrite(target, name, value) {
+    viewportWrites.get(target)?.delete(name);
+    writeTargets[writeDepth] = target;
+    writeNames[writeDepth] = name;
+    writeValues[writeDepth] = value;
+    writeDepth++;
+    // Android and iOS parse some CSS text natively, so the text itself marks a viewport unit.
+    if (typeof value === 'string' && VIEWPORT_UNIT_TEXT.test(value))
+        noteViewportUnit();
+}
+export function endStyleWrite() {
+    writeDepth--;
+    writeTargets[writeDepth] = writeValues[writeDepth] = undefined;
+}
+function noteViewportUnit() {
+    if (!writeDepth)
+        return;
+    const target = writeTargets[writeDepth - 1];
+    let writes = viewportWrites.get(target);
+    if (!writes) {
+        writes = new Map();
+        viewportWrites.set(target, writes);
+        viewportStyles.add(new WeakRef(target));
+    }
+    writes.set(writeNames[writeDepth - 1], writeValues[writeDepth - 1]);
+}
+/** Writes every style property that used vw/vh/vmin/vmax again, against the current viewport. */
+export function refreshViewportUnits() {
+    for (const ref of viewportStyles) {
+        const style = ref.deref();
+        const writes = style && viewportWrites.get(style);
+        if (!style || !writes || !writes.size) {
+            viewportStyles.delete(ref);
+            continue;
+        }
+        const keys = Array.from(writes.keys());
+        for (let i = 0; i < keys.length; i++)
+            style[keys[i]] = writes.get(keys[i]);
+    }
+}
 export class Style {
     constructor() {
         this._bufferRequested = false;
@@ -1477,6 +1593,7 @@ export class Style {
         this._synced = false;
         this._windowsCss = new Map();
         this._windowsImageBackground = false;
+        this._windowsBackgroundShorthand = false;
         this._windowsMaskSpec = '';
     }
     static fromView(view, nativeView) {
@@ -1692,11 +1809,36 @@ export class Style {
         const layer = splitTopLevelCommas(v)[0]?.trim() ?? '';
         const stopsOf = (g) => g.offsets.map((o, i) => o + ':' + (g.colors[i] >>> 0)).join(',');
         try {
+            const longhands = this.windowsBackgroundLonghands(shorthand, v);
+            if (longhands && (needsWindowsBackgroundLayers(longhands) || (ANY_GRADIENT.test(v) && this.windowsScrolls()))) {
+                const spec = encodeWindowsBackgroundLayers(longhands, this.windowsMaskContext());
+                if (spec) {
+                    this._windowsImageBackground = true;
+                    NativeScript.Mason.Css.SetBackgroundLayers(this.nativeView, spec);
+                    if (longhands.color)
+                        this.backgroundColor = longhands.color;
+                    return;
+                }
+            }
             const url = /url\(\s*(['"]?)(.*?)\1\s*\)/i.exec(layer);
             if (!url && this._windowsImageBackground) {
                 this._windowsImageBackground = false;
                 NativeScript.Mason.Css.SetBackgroundLayers(this.nativeView, '');
             }
+            const boxes = this.windowsBackgroundBoxes(shorthand ? layer : '');
+            const setLayers = (spec) => {
+                if (!spec)
+                    return false;
+                this._windowsImageBackground = true;
+                NativeScript.Mason.Css.SetBackgroundLayers(this.nativeView, spec);
+                return true;
+            };
+            // Only the layer painter places a background in a box other than the CSS defaults.
+            if (ANY_GRADIENT.test(layer) && (hasCustomBackgroundBoxes(boxes) || /^(repeating-|conic-gradient)/i.test(layer) || this.windowsColorUnder() || /\d(px|r?em|pt|vw|vh)\b|\bcircle\b/i.test(layer))) {
+                const ctx = this.windowsMaskContext();
+                setLayers(encodeWindowsGradientBackground(layer, this._windowsBackgroundSize ?? '', this._windowsBackgroundPosition ?? '', this._windowsCss.get('background-repeat') ?? '', ctx, boxes));
+                return;
+            }
             if (/^radial-gradient/i.test(layer)) {
                 const g = parseRadialGradientCss(layer);
                 if (g)
@@ -1711,19 +1853,15 @@ export class Style {
             }
             if (url) {
                 const rest = layer.slice(url.index + url[0].length).trim();
-                const keywords = /\b(no-repeat|repeat-x|repeat-y|repeat|space|round|scroll|fixed|local|border-box|padding-box|content-box)\b/gi;
+                const keywords = /\b(no-repeat|repeat-x|repeat-y|repeat|space|round|scroll|fixed|local|border-box|padding-box|content-box|text)\b/gi;
                 const [positionPart, sizePart] = rest.split('/').map((p) => p.replace(keywords, '').trim());
                 const size = shorthand && sizePart ? sizePart.split(/\s+/).slice(0, 2).join(' ') : (this._windowsBackgroundSize ?? '');
                 const position = shorthand && positionPart ? positionPart : (this._windowsBackgroundPosition ?? '');
                 const repeatKeywords = shorthand ? (rest.match(/\b(no-repeat|repeat-x|repeat-y|repeat|space|round)\b/gi) ?? []).join(' ') : '';
                 const repeat = repeatKeywords || (this._windowsCss.get('background-repeat') ?? '');
                 // Painted natively over background-color (CssMask.h), which an ImageBrush would replace.
-                const spec = encodeWindowsBackground(url[2], size, position, repeat, this.windowsMaskContext());
-                if (spec) {
-                    this._windowsImageBackground = true;
-                    NativeScript.Mason.Css.SetBackgroundLayers(this.nativeView, spec);
+                if (setLayers(encodeWindowsBackground(url[2], size, position, repeat, this.windowsMaskContext(), boxes)))
                     return;
-                }
                 let source = url[2];
                 if (source.startsWith('~/'))
                     source = source.replace('~/', knownFolders.currentApp().path + '/');
@@ -1734,12 +1872,60 @@ export class Style {
             }
             if (!ANY_GRADIENT.test(layer)) {
                 NativeScript.Mason.Css.ClearBackground(this.nativeView);
-                if (shorthand && v.length && v.toLowerCase() !== 'none')
-                    this.backgroundColor = v;
+                const color = v.replace(/\b(border-box|padding-box|content-box|text)\b/gi, '').trim();
+                if (shorthand && color.length && color.toLowerCase() !== 'none')
+                    this.backgroundColor = color;
+                if (boxes.clip && hasCustomBackgroundBoxes({ clip: boxes.clip }))
+                    setLayers(encodeWindowsColorClip(boxes.clip, this.windowsMaskContext()));
             }
         }
         catch (_) { }
     }
+    windowsScrolls() {
+        if (!this.style_view)
+            return false;
+        const x = getInt8(this.style_view, StyleKeys.OVERFLOW_X);
+        const y = getInt8(this.style_view, StyleKeys.OVERFLOW_Y);
+        return x === 2 || x === 4 || y === 2 || y === 4;
+    }
+    windowsColorUnder() {
+        return !!this.style_view && getUint32(this.style_view, StyleKeys.BACKGROUND_COLOR) >>> 24 > 0;
+    }
+    windowsReapplyGradient() {
+        if (ANY_GRADIENT.test(this._windowsBackground ?? ''))
+            this.applyWindowsBackground(this._windowsBackgroundShorthand);
+    }
+    windowsBackgroundLonghands(shorthand, value) {
+        const css = this._windowsCss;
+        const blend = css.get('background-blend-mode');
+        if (!shorthand) {
+            return { image: value, size: this._windowsBackgroundSize, position: this._windowsBackgroundPosition, repeat: css.get('background-repeat'), origin: css.get('background-origin'), clip: css.get('background-clip'), attachment: css.get('background-attachment'), blend };
+        }
+        let parts;
+        try {
+            parts = splitBackground(value);
+        }
+        catch (_) {
+            return null;
+        }
+        const text = (part) => (typeof part === 'string' ? part : undefined);
+        const [color, image, repeat, position, size, clip, origin, attachment] = parts.map(text);
+        if (!image)
+            return null;
+        return { image, size, position, repeat, origin, clip, attachment, blend, color };
+    }
+    // background-origin and background-clip: the shorthand's box keywords (origin, then clip), else the longhands.
+    // `text` is a clip only; url() and gradient arguments are skipped so a file name can't match it.
+    windowsBackgroundBoxes(shorthandLayer) {
+        const bare = shorthandLayer.replace(/[\w-]+\((?:[^()]|\([^()]*\))*\)/g, ' ');
+        const keywords = bare.match(/\b(border-box|padding-box|content-box|text)\b/gi) ?? [];
+        if (keywords.length) {
+            const boxes = keywords.filter((k) => k.toLowerCase() !== 'text');
+            const text = boxes.length < keywords.length;
+            return { origin: boxes[0], clip: text ? 'text' : (boxes[1] ?? boxes[0]) };
+        }
+        return { origin: this._windowsCss.get('background-origin'), clip: this._windowsCss.get('background-clip') };
+    }
     windowsMaskContext() {
         return {
             length: (token) => cssLengthToDip(token, this.emBasisFor(token)),
@@ -1798,11 +1984,16 @@ export class Style {
         // it lets VisualApply repaint the color.
         if (name === 'background' || name === 'background-image') {
             this._windowsBackground = typeof value === 'string' ? value : String(value ?? '');
+            this._windowsBackgroundShorthand = name === 'background';
             this.applyWindowsBackground(name === 'background');
             return;
         }
-        if (name === 'background-repeat') {
-            if (/url\(/i.test(this._windowsBackground ?? ''))
+        if (name === 'background-clip' || name === 'background-origin') {
+            this.applyWindowsBackground(false);
+            return;
+        }
+        if (name === 'background-repeat' || name === 'background-attachment' || name === 'background-blend-mode') {
+            if (/url\(|gradient/i.test(this._windowsBackground ?? ''))
                 this.applyWindowsBackground(false);
             return;
         }
@@ -1811,7 +2002,7 @@ export class Style {
                 this._windowsBackgroundSize = String(value ?? '');
             else
                 this._windowsBackgroundPosition = String(value ?? '');
-            if (/url\(/i.test(this._windowsBackground ?? ''))
+            if (/url\(|gradient/i.test(this._windowsBackground ?? ''))
                 this.applyWindowsBackground(false);
             return;
         }
@@ -1873,6 +2064,20 @@ export class Style {
             this.commitState(StateKeys.BORDER_RADIUS);
             return;
         }
+        if (name === 'corner-shape' || name in CORNER_SHAPE_LONGHANDS) {
+            const text = typeof value === 'string' ? value : '';
+            const e = parseCornerShape(text);
+            if (!e || (name !== 'corner-shape' && splitTopLevelSpaces(text.trim()).length > 1))
+                return;
+            this.prepareMut();
+            if (name === 'corner-shape')
+                for (let i = 0; i < 4; i++)
+                    setFloat32(this.style_view, CORNER_SHAPE_KEYS[i], e[i]);
+            else
+                setFloat32(this.style_view, CORNER_SHAPE_KEYS[CORNER_SHAPE_LONGHANDS[name]], e[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, this.emBasisFor(value));
             let style = p.style;
@@ -2125,7 +2330,7 @@ export class Style {
         if (!this.style_view || getInt8(this.style_view, StyleKeys.FONT_SIZE_STATE) !== 1) {
             return this.parentEmBasis();
         }
-        const own = getInt32(this.style_view, StyleKeys.FONT_SIZE);
+        const own = getFloat32(this.style_view, StyleKeys.FONT_SIZE);
         if (own <= 0) {
             return this.parentEmBasis();
         }
@@ -2252,7 +2457,7 @@ export class Style {
             return 16;
         }
         const type = getUint8(this.style_view, StyleKeys.FONT_SIZE_TYPE);
-        const value = getInt32(this.style_view, StyleKeys.FONT_SIZE);
+        const value = getFloat32(this.style_view, StyleKeys.FONT_SIZE);
         if (type === 1) {
             return `${value / 100}%`;
         }
@@ -2298,7 +2503,7 @@ export class Style {
                 else if (isDevicePixelToken(t)) {
                     resolved = layout.toDeviceIndependentPixels(n);
                 }
-                setInt32(this.style_view, StyleKeys.FONT_SIZE, resolved);
+                setFloat32(this.style_view, StyleKeys.FONT_SIZE, resolved);
                 setInt8(this.style_view, StyleKeys.FONT_SIZE_STATE, 1);
                 setInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE, isPercent ? 1 : 0);
                 this.commitState(StateKeys.FONT_SIZE);
@@ -2306,7 +2511,7 @@ export class Style {
             }
             case 'number':
                 this.prepareMut();
-                setInt32(this.style_view, StyleKeys.FONT_SIZE, value);
+                setFloat32(this.style_view, StyleKeys.FONT_SIZE, value);
                 setInt8(this.style_view, StyleKeys.FONT_SIZE_STATE, 1);
                 setInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE, 0);
                 this.commitState(StateKeys.FONT_SIZE);
@@ -2315,21 +2520,21 @@ export class Style {
                 switch (value.unit) {
                     case 'dip':
                         this.prepareMut();
-                        setInt32(this.style_view, StyleKeys.FONT_SIZE, finite(value.value));
+                        setFloat32(this.style_view, StyleKeys.FONT_SIZE, finite(value.value));
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_STATE, 1);
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE, 0);
                         this.commitState(StateKeys.FONT_SIZE);
                         break;
                     case 'px':
                         this.prepareMut();
-                        setInt32(this.style_view, StyleKeys.FONT_SIZE, finite(value.value));
+                        setFloat32(this.style_view, StyleKeys.FONT_SIZE, finite(value.value));
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_STATE, 1);
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE, 0);
                         this.commitState(StateKeys.FONT_SIZE);
                         break;
                     case '%':
                         this.prepareMut();
-                        setInt32(this.style_view, StyleKeys.FONT_SIZE, value.value * 100);
+                        setFloat32(this.style_view, StyleKeys.FONT_SIZE, value.value * 100);
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_STATE, 1);
                         setInt8(this.style_view, StyleKeys.FONT_SIZE_TYPE, 1);
                         this.commitState(StateKeys.FONT_SIZE);
@@ -2492,6 +2697,8 @@ export class Style {
         setInt8(this.style_view, StyleKeys.BACKGROUND_COLOR_STATE, 1);
         setInt8(this.style_view, StyleKeys.BACKGROUND_COLOR_TYPE, 0);
         this.commitState(StateKeys.BACKGROUND_COLOR);
+        if (__WINDOWS__ && !this._windowsImageBackground && normalized >>> 24 > 0)
+            this.windowsReapplyGradient();
     }
     get textWrap() {
         if (!this.style_view) {
@@ -2510,6 +2717,8 @@ export class Style {
                 wrap = 1;
                 break;
             case 'wrap':
+            case 'pretty':
+            case 'stable':
                 wrap = 0;
                 break;
             case 'balance':
@@ -2683,7 +2892,7 @@ export class Style {
     get flexWrap() {
         switch (getInt8(this.style_view, StyleKeys.FLEX_WRAP)) {
             case 0:
-                return 'no-wrap';
+                return 'nowrap';
             case 1:
                 return 'wrap';
             case 2:
@@ -2697,6 +2906,7 @@ export class Style {
     set flexWrap(value) {
         let wrap = -1;
         switch (value) {
+            case 'nowrap':
             case 'no-wrap':
                 wrap = 0;
                 break;
@@ -2849,8 +3059,18 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.WIDTH_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, value.value);
                         break;
-                    default:
-                        return;
+                    default: {
+                        // A sizing keyword routed through core (see sizingKeywordLength in properties.ts).
+                        const keyword = sizingKeywordOf(value);
+                        if (!keyword) {
+                            return;
+                        }
+                        this.prepareMut();
+                        const dim = dimensionFromString(keyword);
+                        setInt8(this.style_view, StyleKeys.WIDTH_TYPE, dim.type);
+                        setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, dim.value);
+                        break;
+                    }
                 }
                 break;
             default:
@@ -2894,8 +3114,18 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, value.value);
                         break;
-                    default:
-                        return;
+                    default: {
+                        // A sizing keyword routed through core (see sizingKeywordLength in properties.ts).
+                        const keyword = sizingKeywordOf(value);
+                        if (!keyword) {
+                            return;
+                        }
+                        this.prepareMut();
+                        const dim = dimensionFromString(keyword);
+                        setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, dim.type);
+                        setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, dim.value);
+                        break;
+                    }
                 }
                 break;
             default:
@@ -4312,6 +4542,7 @@ export class Style {
         }
         // A bare number can't marshal over JNI into the native String setter.
         value = value == null ? '' : String(value);
+        value = resolveGridTrackUnits(value, this.emBasisFor(value));
         if (__ANDROID__) {
             nodeHelper().setGridAutoRows(this.nativeView, value);
         }
@@ -4340,6 +4571,7 @@ export class Style {
         }
         // See gridAutoRows above.
         value = value == null ? '' : String(value);
+        value = resolveGridTrackUnits(value, this.emBasisFor(value));
         if (__ANDROID__) {
             nodeHelper().setGridAutoColumns(this.nativeView, value);
         }
@@ -4363,7 +4595,7 @@ export class Style {
         }
     }
     set gridAutoFlow(value) {
-        const v = { row: 0, column: 1, 'row dense': 2, 'column dense': 3 }[value];
+        const v = gridAutoFlowFromString(value);
         if (v !== undefined) {
             this.prepareMut();
             setInt8(this.style_view, StyleKeys.GRID_AUTO_FLOW, v);
@@ -4584,6 +4816,7 @@ export class Style {
         }
         // null clears the template; also guards against a bare number (see gridAutoRows above).
         value = value == null ? '' : String(value);
+        value = resolveGridTrackUnits(value, this.emBasisFor(value));
         if (__ANDROID__) {
             nodeHelper().setGridTemplateRows(this.nativeView, value);
         }
@@ -4624,6 +4857,7 @@ export class Style {
         }
         // null clears the template; also guards against a bare number (see gridAutoRows above).
         value = value == null ? '' : String(value);
+        value = resolveGridTrackUnits(value, this.emBasisFor(value));
         if (__ANDROID__) {
             nodeHelper().setGridTemplateColumns(this.nativeView, value);
         }
@@ -4696,6 +4930,8 @@ export class Style {
             }
         }
         this.commitState(StateKeys.OVERFLOW);
+        if (__WINDOWS__)
+            this.windowsReapplyGradient();
     }
     get overflowX() {
         switch (getInt8(this.style_view, StyleKeys.OVERFLOW_X)) {
@@ -4713,6 +4949,8 @@ export class Style {
             this.prepareMut();
             setInt8(this.style_view, StyleKeys.OVERFLOW_X, v);
             this.commitState(StateKeys.OVERFLOW_X);
+            if (__WINDOWS__)
+                this.windowsReapplyGradient();
         }
     }
     get overflowY() {
@@ -4735,6 +4973,8 @@ export class Style {
             this.prepareMut();
             setInt8(this.style_view, StyleKeys.OVERFLOW_Y, v);
             this.commitState(StateKeys.OVERFLOW_Y);
+            if (__WINDOWS__)
+                this.windowsReapplyGradient();
         }
     }
     get flexGrow() {
@@ -4787,8 +5027,9 @@ export class Style {
     }
     set letterSpacing(value) {
         if (typeof value === 'string') {
+            const t = value.trim();
             this.prepareMut();
-            setFloat32(this.style_view, StyleKeys.LETTER_SPACING, tokenToDevicePx(value, parseFloat(value) || 0));
+            setFloat32(this.style_view, StyleKeys.LETTER_SPACING, t === 'normal' ? 0 : finite(tokenToDevicePx(t, parseFloat(t) || 0, this.emBasisFor(t))));
             setUint8(this.style_view, StyleKeys.LETTER_SPACING_STATE, 1);
             this.commitState(StateKeys.LETTER_SPACING);
         }
@@ -4821,12 +5062,18 @@ export class Style {
     set lineHeight(value) {
         if (typeof value === 'string') {
             const t = value.trim();
+            if (t === 'normal') {
+                this.prepareMut();
+                setUint8(this.style_view, StyleKeys.LINE_HEIGHT_STATE, 0);
+                this.commitState(StateKeys.LINE_HEIGHT);
+                return;
+            }
             // A unitless line-height is a multiplier (`line-height: 1.5`), not a
             // length — TYPE 0 means "multiply by the resolved font size".
             const unitless = /^-?[\d.]+$/.test(t);
             this.prepareMut();
             // An absolute line-height is stored in CSS px (iOS points, Android dip), as the number path.
-            setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, unitless ? finite(parseFloat(t) || 0) : layout.toDeviceIndependentPixels(tokenToDevicePx(t, parseFloat(t) || 0)));
+            setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, unitless ? finite(parseFloat(t) || 0) : finite(layout.toDeviceIndependentPixels(tokenToDevicePx(t, parseFloat(t) || 0, this.emBasisFor(t)))));
             setUint8(this.style_view, StyleKeys.LINE_HEIGHT_STATE, 1);
             setUint8(this.style_view, StyleKeys.LINE_HEIGHT_TYPE, unitless ? 0 : 1);
             this.commitState(StateKeys.LINE_HEIGHT);
@@ -4902,7 +5149,7 @@ export class Style {
             // clip ?
             return 'start';
         }
-        const type = getInt32(this.style_view, StyleKeys.TEXT_ALIGN);
+        const type = getInt8(this.style_view, StyleKeys.TEXT_ALIGN);
         switch (type) {
             case 0:
                 // auto
@@ -4952,7 +5199,7 @@ export class Style {
         }
         if (align !== -1) {
             this.prepareMut();
-            setInt32(this.style_view, StyleKeys.TEXT_ALIGN, align);
+            setInt8(this.style_view, StyleKeys.TEXT_ALIGN, align);
             setInt8(this.style_view, StyleKeys.TEXT_ALIGN_STATE, 1);
             this.commitState(StateKeys.TEXT_ALIGN);
         }
@@ -6303,6 +6550,21 @@ export class Style {
         setFloat32(this.style_view, StyleKeys.TRANSFORM_ORIGIN_Y_VALUE, parsed.y);
         setUint8(this.style_view, StyleKeys.TRANSFORM_ORIGIN_STATE, 1);
         this.commitState(StateKeys.TRANSFORM_ORIGIN);
+        // Windows applies the origin with the transform, natively it isn't read from the buffer.
+        if (__WINDOWS__)
+            this.view?._applyWindowsTransform?.();
+    }
+    /** transform-origin as fractions of a `width` x `height` box, or null when it isn't set. */
+    transformOriginFraction(width, height) {
+        if (!this.style_view || !getUint8(this.style_view, StyleKeys.TRANSFORM_ORIGIN_STATE))
+            return null;
+        const side = (typeKey, valueKey, size) => {
+            const value = getFloat32(this.style_view, valueKey);
+            if (getUint8(this.style_view, typeKey) === 1)
+                return value / 100;
+            return size > 0 ? layout.toDeviceIndependentPixels(value) / size : 0;
+        };
+        return { x: side(StyleKeys.TRANSFORM_ORIGIN_X_TYPE, StyleKeys.TRANSFORM_ORIGIN_X_VALUE, width), y: side(StyleKeys.TRANSFORM_ORIGIN_Y_TYPE, StyleKeys.TRANSFORM_ORIGIN_Y_VALUE, height) };
     }
     set 'transform-origin'(value) {
         this.transformOrigin = value;
@@ -6852,4 +7114,54 @@ export class Style {
         };
     }
 }
+{
+    const proto = Style.prototype;
+    const names = Object.getOwnPropertyNames(proto);
+    for (let i = 0; i < names.length; i++) {
+        const name = names[i];
+        const descriptor = Object.getOwnPropertyDescriptor(proto, name);
+        const set = descriptor?.set;
+        if (!set)
+            continue;
+        Object.defineProperty(proto, name, {
+            ...descriptor,
+            set(value) {
+                beginStyleWrite(this, name, value);
+                try {
+                    set.call(this, value);
+                }
+                finally {
+                    endStyleWrite();
+                }
+            },
+        });
+    }
+}
+/** `grid-auto-flow` as its buffer value: `row`/`column` and `dense`, in either order. */
+export function gridAutoFlowFromString(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const tokens = value.trim().toLowerCase().split(/\s+/);
+    if (tokens.length === 0 || tokens.length > 2 || new Set(tokens).size !== tokens.length) {
+        return undefined;
+    }
+    let column = false;
+    let dense = false;
+    for (const token of tokens) {
+        if (token === 'dense') {
+            dense = true;
+        }
+        else if (token === 'column') {
+            column = true;
+        }
+        else if (token !== 'row') {
+            return undefined;
+        }
+    }
+    if (tokens.length === 2 && !dense) {
+        return undefined;
+    }
+    return (column ? 1 : 0) + (dense ? 2 : 0);
+}
 //# sourceMappingURL=style.js.map