@octane-xplat/nativescript-mason-core 0.0.1 → 1.0.0-beta.1

package/properties.js

@@ -0,0 +1,2456 @@
+import { environmentStyleValue, cssEnvironmentShorthand } from './css-environment';
+import { CssProperty, CssAnimationProperty, InheritedCssProperty, backgroundColorProperty, Style, ShorthandProperty, Length as CoreLength, fontSizeProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, PercentLength as CorePercentLength, Trace, CoreTypes, unsetValue, verticalAlignmentProperty, textShadowProperty, Font, Property, makeParser, makeValidator, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty, lineHeightProperty, letterSpacingProperty, } from '@nativescript/core';
+import { isMasonView_, touchAction_ } from './symbols';
+/** Marks a Style whose size accessors already resolve Mason's units. */
+const MASON_SIZE_UNITS = Symbol('mason:size-units');
+import { beginStyleWrite, cssLengthToDip, endStyleWrite, isSizingKeyword, parseAspectRatio } from './style';
+import { isCssMathFunction } from './css-math';
+import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+import { parseCSSShadow } from '@nativescript/core/ui/styling/css-shadow';
+import { installKeyframes, interpolatePositionList, interpolateSizeList, registerKeyframeProperty } from './css-keyframes';
+import { borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
+import { BORDER_WIDTH_KEYWORDS, passThrough, splitBorder, splitBorderSide, splitBorderStyle, splitBorderStyleStartEnd, splitBorderWidthStartEnd, splitBorderColorStartEnd, splitInsetStartEnd, splitMarginStartEnd, splitPaddingStartEnd, splitBackground, splitMask, splitMaskBorder, splitWebkitMask, webkitMaskBox, webkitMaskComposite, splitBorderColor, splitBorderRadius, splitBorderWidth, splitFlex, splitFlexFlow, splitGap, splitMargin, splitOverflow, splitPadding } from './css-shorthands';
+import { cssLength, isCssLength, toCamelCase } from './css-shorthands';
+import { splitListStyle, splitPlace } from './css-shorthands';
+function getViewStyle(view) {
+    const ret = (__ANDROID__ ? view?.get() : view?.deref());
+    // Undefined for a plain NativeScript view (and for a cleared ref): only mason's
+    // own view classes define `_styleHelper`.
+    return ret?._styleHelper;
+}
+/** Mason views write these in setNative, which core runs after valueChanged; one write is enough. */
+function appliedInSetNative(target, property) {
+    const ref = target?.viewRef;
+    const view = ref ? (__ANDROID__ ? ref.get() : ref.deref()) : undefined;
+    return !!(view && view[isMasonView_] && view[property.setNative]);
+}
+// Mason parses CSS values itself, so for its own elements the raw declaration is
+// passed straight through; anything else has to go through core's parser first.
+//
+// This asks specifically whether the view *is* a mason element, not whether it
+// sits inside one. A plain NativeScript view parented into a mason tree has no
+// mason style buffer — its value still has to be converted for core, or core's
+// own setNative gets a string it can't use. See "Mixing with plain NativeScript
+// views" in MASON_CONTEXT.md.
+//
+// `isMasonView_` is a plain marker set in the mason view constructors. Don't
+// reach for `_styleHelper` here: its getter lazily builds the native view, and a
+// valueConverter can run long before that should happen.
+function isMasonView(style) {
+    if (style && style.viewRef) {
+        const view = __ANDROID__ ? style.viewRef.get() : style.viewRef.deref();
+        return !!(view && view[isMasonView_]);
+    }
+    return false;
+}
+const CSS_WIDE_KEYWORDS = new Set(['initial', 'inherit', 'unset', 'revert']);
+export function shorthandConverter({ cssName, longhands, split }) {
+    return (value) => {
+        const text = typeof value === 'number' ? String(value) : value;
+        if (typeof text !== 'string') {
+            // Core 9.1 probes with unsetValue to learn the longhands, which a var()
+            // declaration needs all of.
+            return longhands.map((property) => [property, value]);
+        }
+        const trimmed = text.trim();
+        if (!trimmed || CSS_WIDE_KEYWORDS.has(trimmed)) {
+            return longhands.map((property) => [property, trimmed]);
+        }
+        const parts = (['padding', 'margin', 'border-width'].includes(cssName) &&
+            cssEnvironmentShorthand(trimmed, split, longhands.length)) || split(trimmed);
+        return longhands.map((property, i) => [property, parts[i]]);
+    };
+}
+function masonShorthandProperty(entry, getter = () => undefined) {
+    return new ShorthandProperty({
+        name: toCamelCase(entry.cssName),
+        cssName: entry.cssName,
+        getter,
+        converter: shorthandConverter(entry),
+    });
+}
+export const textProperty = new Property({
+    name: 'text',
+});
+export const displayProperty = new CssProperty({
+    name: 'display',
+    cssName: 'display',
+    defaultValue: 'block',
+    valueChanged: (target, oldValue, newValue) => {
+        if (appliedInSetNative(target, displayProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view && newValue) {
+            view.display = newValue;
+        }
+    },
+    valueConverter: function (value) {
+        if (typeof value === 'number') {
+            switch (value) {
+                case 0:
+                    return 'none';
+                case 1:
+                    return 'flex';
+                case 2:
+                    return 'grid';
+                case 3:
+                    return 'block';
+                case 4:
+                    return 'inline';
+                case 5:
+                    return 'inline-block';
+                case 6:
+                    return 'inline-flex';
+                case 7:
+                    return 'inline-grid';
+            }
+        }
+        switch (value) {
+            case 'none':
+            case 'flex':
+            case 'grid':
+            case 'block':
+            case 'inline':
+            case 'inline-block':
+            case 'inline-flex':
+            case 'inline-grid':
+                return value;
+            // The legacy boxes `line-clamp` utilities ask for.
+            case '-webkit-box':
+                return 'block';
+            case '-webkit-inline-box':
+                return 'inline-block';
+            default:
+                return undefined;
+        }
+    },
+});
+export const filterProperty = new CssProperty({
+    name: 'filter',
+    cssName: 'filter',
+});
+export const borderColorProperty = new CssProperty({
+    name: 'borderColor',
+    cssName: 'border-color',
+});
+export const backgroundProperty = new CssProperty({
+    name: 'background',
+    cssName: 'background',
+});
+export const backgroundImageProperty = new CssProperty({
+    name: 'backgroundImage',
+    cssName: 'background-image',
+});
+export const backgroundRepeatProperty = new CssProperty({
+    name: 'backgroundRepeat',
+    cssName: 'background-repeat',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundRepeat = newValue;
+        }
+    },
+});
+export const backgroundPositionProperty = new CssProperty({
+    name: 'backgroundPosition',
+    cssName: 'background-position',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundPosition = newValue;
+        }
+    },
+});
+export const backgroundSizeProperty = new CssProperty({
+    name: 'backgroundSize',
+    cssName: 'background-size',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundSize = newValue;
+        }
+    },
+});
+export const backgroundClipProperty = new CssProperty({
+    name: 'backgroundClip',
+    cssName: 'background-clip',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundClip = newValue;
+        }
+    },
+});
+function overflowConverter(value) {
+    if (typeof value === 'number') {
+        switch (value) {
+            case 0:
+                return 'visible';
+            case 1:
+                return 'clip';
+            case 2:
+                return 'hidden';
+            case 3:
+                return 'scroll';
+        }
+    }
+    switch (value) {
+        case 'visible':
+        case 'hidden':
+        case 'clip':
+        case 'scroll':
+        case 'auto':
+            return value;
+        default:
+            return undefined;
+    }
+}
+export const overflowXProperty = new CssProperty({
+    name: 'overflowX',
+    cssName: 'overflow-x',
+    defaultValue: 'visible',
+    valueConverter: overflowConverter,
+    valueChanged: (target, oldValue, newValue) => {
+        if (newValue && appliedInSetNative(target, overflowXProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.overflowX = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                target.overflowX = oldValue;
+            }
+        }
+    },
+});
+export const overflowYProperty = new CssProperty({
+    name: 'overflowY',
+    cssName: 'overflow-y',
+    defaultValue: 'visible',
+    valueConverter: overflowConverter,
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, overflowYProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.overflowY = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                target.overflowY = oldValue;
+            }
+        }
+    },
+});
+const overflowShorthand = { cssName: 'overflow', longhands: [overflowXProperty, overflowYProperty], split: splitOverflow };
+export const overflowProperty = masonShorthandProperty(overflowShorthand, function () {
+    if (this.overflowX === this.overflowY) {
+        return this.overflowX;
+    }
+    return `${this.overflowX} ${this.overflowY}`;
+});
+export const paddingProperty = new CssProperty({
+    name: 'padding',
+    cssName: 'padding',
+});
+// These four style-buffer fields were consumed by the natives all along but had
+// no JS or CSS path to them: reserved StyleKeys nobody ever wrote. Same shape of
+// gap as `list-style-type`. (`text-indent` and `font-variant-numeric` are
+// deliberately left out — their offsets exist but nothing reads them yet, so
+// exposing them would write bytes into the void.)
+export const whiteSpaceProperty = new CssProperty({
+    name: 'whiteSpace',
+    cssName: 'white-space',
+    defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.whiteSpace = newValue;
+        }
+    },
+});
+/**
+ * CSS `touch-action` as the pan flags native scroll views read: 1 = pan-x,
+ * 2 = pan-y, 4 = pinch-zoom. A Mason scroll view only starts a drag along an
+ * axis every element from the touched one up to it allows, as browsers do.
+ */
+export function parseTouchAction(value) {
+    const v = String(value ?? 'auto')
+        .trim()
+        .toLowerCase();
+    if (v === 'auto' || v === '')
+        return 7;
+    if (v === 'none')
+        return 0;
+    if (v === 'manipulation')
+        return 7;
+    let flags = 0;
+    for (const part of v.split(/\s+/)) {
+        if (part === 'pan-x' || part === 'pan-left' || part === 'pan-right')
+            flags |= 1;
+        else if (part === 'pan-y' || part === 'pan-up' || part === 'pan-down')
+            flags |= 2;
+        else if (part === 'pinch-zoom')
+            flags |= 4;
+    }
+    return flags;
+}
+export const touchActionProperty = new CssProperty({
+    name: 'touchAction',
+    cssName: 'touch-action',
+    defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        const ref = target?.viewRef;
+        const view = ref ? (__ANDROID__ ? ref.get() : ref.deref()) : undefined;
+        if (view && view[isMasonView_]) {
+            view[touchAction_] = parseTouchAction(newValue);
+            view._applyTouchAction?.();
+        }
+    },
+});
+export const objectFitProperty = new CssProperty({
+    name: 'objectFit',
+    cssName: 'object-fit',
+    defaultValue: 'fill',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.objectFit = newValue;
+        }
+    },
+});
+export const textJustifyProperty = new CssProperty({
+    name: 'textJustify',
+    cssName: 'text-justify',
+    defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.textJustify = newValue;
+        }
+    },
+});
+export const backgroundPositionXProperty = new CssProperty({
+    name: 'backgroundPositionX',
+    cssName: 'background-position-x',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundPositionX = newValue;
+        }
+    },
+});
+export const backgroundPositionYProperty = new CssProperty({
+    name: 'backgroundPositionY',
+    cssName: 'background-position-y',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundPositionY = newValue;
+        }
+    },
+});
+export const backgroundOriginProperty = new CssProperty({
+    name: 'backgroundOrigin',
+    cssName: 'background-origin',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundOrigin = newValue;
+        }
+    },
+});
+export const backgroundAttachmentProperty = new CssProperty({
+    name: 'backgroundAttachment',
+    cssName: 'background-attachment',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundAttachment = newValue;
+        }
+    },
+});
+export const backgroundBlendModeProperty = new CssProperty({
+    name: 'backgroundBlendMode',
+    cssName: 'background-blend-mode',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundBlendMode = newValue;
+        }
+    },
+});
+export const textDecorationLineProperty = new CssProperty({
+    name: 'textDecorationLine',
+    cssName: 'text-decoration-line',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.textDecorationLine = newValue;
+        }
+    },
+});
+export const textDecorationStyleProperty = new CssProperty({
+    name: 'textDecorationStyle',
+    cssName: 'text-decoration-style',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.textDecorationStyle = newValue;
+        }
+    },
+});
+export const textDecorationColorProperty = new CssProperty({
+    name: 'textDecorationColor',
+    cssName: 'text-decoration-color',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.textDecorationColor = newValue;
+        }
+    },
+});
+export const textDecorationThicknessProperty = new CssProperty({
+    name: 'textDecorationThickness',
+    cssName: 'text-decoration-thickness',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.textDecorationThickness = newValue;
+        }
+    },
+});
+// `font-family` had no path at all: FONT_FAMILY_STATE exists with no value slot
+// (the natives keep the family on a FontFace, not in the buffer), and core's
+// fontInternalProperty.setNative hook in common.ts is Windows-only. So on both
+// mobile platforms this was unsettable from CSS *and* from TS.
+export const fontFamilyProperty = new CssProperty({
+    name: 'fontFamily',
+    cssName: 'font-family',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.fontFamily = newValue;
+        }
+    },
+});
+// ---------------------------------------------------------------------------
+// Registering alongside @nativescript/core
+// ---------------------------------------------------------------------------
+//
+// `CssProperty.register()` installs its accessors with Object.defineProperty, so
+// for a CSS name core already owns the last registration wins outright — and
+// masonkit registers after core. That silently shadowed core's handling of
+// `margin`, `padding`, `background`, `background-*`, `border-color`,
+// `border-radius`, `box-shadow`, `transform`, `vertical-align`, `text-overflow`,
+// `align-content`, `flex` and `flex-flow` for **every view in the app**, mason's
+// or not: a plain StackLayout with `margin: 10` in a stylesheet got nothing,
+// because mason's property only implements setNative on mason's own ViewBase.
+//
+// So instead of replacing core's accessor, keep both and pick at assignment
+// time: a mason view gets mason's, anything else keeps core's untouched.
+// Foreign-only grid shorthands invert the selection to preserve existing Mason
+// direct setters while foreign views use core's longhand priority machinery.
+function registerAlongsideCore(property, target = 'mason') {
+    const proto = Style.prototype;
+    const keys = [property.name, property.cssName, property.cssLocalName].filter((key) => typeof key === 'string' && key.length > 0);
+    const core = new Map();
+    for (const key of keys) {
+        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+        if (descriptor)
+            core.set(key, descriptor);
+    }
+    property.register(Style);
+    for (const [key, coreDescriptor] of core) {
+        const masonDescriptor = Object.getOwnPropertyDescriptor(proto, key);
+        if (!masonDescriptor)
+            continue;
+        Object.defineProperty(proto, key, {
+            enumerable: masonDescriptor.enumerable ?? true,
+            configurable: true,
+            get() {
+                const descriptor = isMasonView(this) === (target === 'mason') ? masonDescriptor : coreDescriptor;
+                return descriptor.get?.call(this);
+            },
+            set(value) {
+                const descriptor = isMasonView(this) === (target === 'mason') ? masonDescriptor : coreDescriptor;
+                descriptor.set?.call(this, value);
+            },
+        });
+    }
+}
+registerAlongsideCore(paddingProperty);
+export const marginProperty = new CssProperty({
+    name: 'margin',
+    cssName: 'margin',
+});
+export const scrollBarWidthProperty = new CssProperty({
+    name: 'scrollBarWidth',
+    cssName: 'scrollbar-width',
+    defaultValue: 0,
+    valueConverter: parseFloat,
+});
+// Core keeps these parsers private, so the fallbacks below have to restate them.
+// The value lists mirror @nativescript/core exactly — flexbox-layout-common's
+// FlexWrap and text-base-common's textAlignment/textTransform converters.
+const FlexWrapParse = makeParser(makeValidator('nowrap', 'wrap', 'wrap-reverse'));
+const FlexDirectionParse = makeParser(makeValidator('row', 'row-reverse', 'column', 'column-reverse'));
+const TextAlignmentParse = makeParser(makeValidator('left', 'center', 'right', 'justify'));
+const TextTransformParse = makeParser(makeValidator('none', 'capitalize', 'uppercase', 'lowercase'));
+/**
+ * Narrow one of @nativescript/core's own properties so mason views get mason's
+ * handling and every other view keeps core's, untouched. `overrideHandlers`
+ * replaces core's handlers outright, so the fallback to core's own handling
+ * has to be named explicitly.
+ */
+function overrideForMasonViews(property, options) {
+    const handlers = {
+        valueChanged(target, _oldValue, newValue) {
+            if (appliedInSetNative(target, property))
+                return;
+            const masonStyle = getViewStyle(target.viewRef);
+            // No mason style means a plain NativeScript view: core's setNative owns
+            // it, so leave the value exactly as core produced it.
+            if (!masonStyle) {
+                return;
+            }
+            options.apply(masonStyle, newValue);
+        },
+    };
+    if (options.coreConverter) {
+        handlers.valueConverter = function (value) {
+            // Mason parses CSS itself, so its own elements get the raw declaration.
+            return isMasonView(this) ? value : options.coreConverter(value);
+        };
+    }
+    property.overrideHandlers(handlers);
+}
+const rawDeclarations = new WeakMap();
+/** Plain views keep core's number; a mason view also records the raw declaration so its units survive. */
+function keepRawDeclarationForMasonViews(property, coreConverter) {
+    property.overrideHandlers({
+        valueConverter(value) {
+            const converted = coreConverter(value);
+            if (isMasonView(this)) {
+                let raw = rawDeclarations.get(this);
+                if (!raw) {
+                    raw = new Map();
+                    rawDeclarations.set(this, raw);
+                }
+                raw.set(property.name, { converted, raw: value });
+            }
+            return converted;
+        },
+    });
+}
+/** The declaration behind `value` if it came from this view's own CSS, else `value`. */
+export function masonRawDeclaration(style, propertyName, value) {
+    const raw = rawDeclarations.get(style)?.get(propertyName);
+    if (!raw) {
+        return value;
+    }
+    if (Object.is(raw.converted, value)) {
+        return raw.raw;
+    }
+    rawDeclarations.get(style).delete(propertyName);
+    return value;
+}
+keepRawDeclarationForMasonViews(lineHeightProperty, (v) => parseFloat(v));
+keepRawDeclarationForMasonViews(letterSpacingProperty, (v) => parseFloat(v));
+overrideForMasonViews(flexDirectionProperty, {
+    coreConverter: FlexDirectionParse,
+    apply: (style, value) => {
+        style.flexDirection = value;
+    },
+});
+overrideForMasonViews(flexWrapProperty, {
+    coreConverter: FlexWrapParse,
+    apply: (style, value) => {
+        style.flexWrap = value;
+    },
+});
+flexGrowProperty.overrideHandlers({
+    name: 'flexGrow',
+    cssName: 'flex-grow',
+    valueChanged(target, oldValue, newValue) {
+        if (typeof newValue === 'number' && !isNaN(newValue) && appliedInSetNative(target, flexGrowProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            // 0 is a valid flex-grow; don't treat it as falsy/invalid
+            if (typeof newValue === 'number' && !isNaN(newValue)) {
+                view.flexGrow = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.flexGrow = oldValue;
+            }
+        }
+    },
+});
+fontSizeProperty.overrideHandlers({
+    name: 'fontSize',
+    cssName: 'font-size',
+    valueConverter: function (value) {
+        if (isMasonView(this)) {
+            return value;
+        }
+        return parseFloat(value);
+    },
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, fontSizeProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                if (typeof newValue === 'string') {
+                    // @ts-ignore
+                    if (isCssMathFunction(newValue)) {
+                        // Mason's setter evaluates calc()/min()/max()/clamp() itself.
+                        view.fontSize = newValue;
+                        // @ts-ignore
+                    }
+                    else if (newValue.indexOf('%') !== -1) {
+                        view.fontSize = {
+                            value: parseFloat(newValue) / 100,
+                            unit: '%',
+                        };
+                        // @ts-ignore
+                    }
+                    else if (newValue.indexOf('dip') !== -1) {
+                        view.fontSize = parseFloat(newValue);
+                        // @ts-ignore
+                    }
+                    else if (newValue.indexOf('px') !== -1) {
+                        view.fontSize = {
+                            value: parseFloat(newValue),
+                            unit: 'px',
+                        };
+                    }
+                    else {
+                        view.fontSize = parseFloat(newValue);
+                    }
+                }
+                else {
+                    view.fontSize = newValue;
+                }
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.fontSize = oldValue;
+            }
+        }
+        else {
+            // fallback to core behavior
+            const currentFont = target.fontInternal || Font.default;
+            if (currentFont.fontSize !== newValue) {
+                const newFont = currentFont.withFontSize(newValue);
+                target.fontInternal = Font.equals(Font.default, newFont) ? unsetValue : newFont;
+            }
+        }
+    },
+});
+export const rowGapProperty = new CssProperty({
+    name: 'rowGap',
+    cssName: 'row-gap',
+    defaultValue: 0,
+    // @ts-ignore
+    valueConverter: masonGapConverter,
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, rowGapProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.rowGap = newValue;
+        }
+    },
+});
+export const columnGapProperty = new CssProperty({
+    name: 'columnGap',
+    cssName: 'column-gap',
+    defaultValue: 0,
+    // @ts-ignore
+    valueConverter: masonGapConverter,
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, columnGapProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.columnGap = newValue;
+        }
+    },
+});
+/** A gap longhand as CSS text: CSS text as is, a number in px, a core length as `<n><unit>`. */
+function gapText(value) {
+    if (typeof value === 'number') {
+        return `${value}px`;
+    }
+    if (value && typeof value === 'object') {
+        const { value: amount, unit } = value;
+        return unit === '%' ? `${Math.round((amount ?? 0) * 1e6) / 1e4}%` : `${amount ?? 0}${unit === 'dip' ? 'px' : (unit ?? 'px')}`;
+    }
+    return String(value ?? '');
+}
+function gapGetter() {
+    if (this.rowGap === this.columnGap) {
+        return this.rowGap;
+    }
+    const row = gapText(this.rowGap);
+    const column = gapText(this.columnGap);
+    // Two equal parses are different objects.
+    return row === column ? row : `${row} ${column}`;
+}
+const gapShorthand = { cssName: 'gap', longhands: [rowGapProperty, columnGapProperty], split: splitGap };
+const gridGapShorthand = { ...gapShorthand, cssName: 'grid-gap' };
+export const gridGapProperty = masonShorthandProperty(gridGapShorthand, gapGetter);
+export const gapProperty = masonShorthandProperty(gapShorthand, gapGetter);
+export const gridRowGapProperty = new ShorthandProperty({
+    name: 'gridRowGap',
+    cssName: 'grid-row-gap',
+    getter: function () {
+        return this.rowGap;
+    },
+    converter(value) {
+        return [[rowGapProperty, value]];
+    },
+});
+export const gridColumnGapProperty = new ShorthandProperty({
+    name: 'gridColumnGap',
+    cssName: 'grid-column-gap',
+    getter: function () {
+        return this.columnGap;
+    },
+    converter(value) {
+        return [[columnGapProperty, value]];
+    },
+});
+overrideForMasonViews(textAlignmentProperty, {
+    coreConverter: TextAlignmentParse,
+    apply: (style, value) => {
+        style.textAlignment = value;
+    },
+});
+overrideForMasonViews(textTransformProperty, {
+    coreConverter: TextTransformParse,
+    apply: (style, value) => {
+        style.textTransform = value;
+    },
+});
+function masonLengthParse(value) {
+    try {
+        return CoreLength.parse(value);
+    }
+    catch (e) {
+        return undefined;
+    }
+}
+function masonLengthPercentParse(value) {
+    try {
+        return CorePercentLength.parse(value);
+    }
+    catch (e) {
+        return undefined;
+    }
+}
+/** Lengths in units core's parsers read as bare numbers. */
+const UNITS_CORE_MISREADS = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?(r?em|pt|vw|vh|vmin|vmax|dppx)$/i;
+/** CSS text for a length in a unit core can't parse (rem, em, vw), else undefined. */
+function masonLengthText(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const t = value.trim();
+    // Core can't evaluate math functions either; Mason's setter does.
+    return UNITS_CORE_MISREADS.test(t) || isCssMathFunction(t) ? t : undefined;
+}
+/** `left`/`top`/`right`/`bottom`: Mason's units, else core's parse (`%`, `auto`). */
+function masonInsetConverter(value) {
+    return (masonLengthText(value) ?? masonLengthPercentParse(value));
+}
+/** `row-gap`/`column-gap`: as the insets, but anything unparsable is 0. */
+function masonGapConverter(value) {
+    const text = masonLengthText(value);
+    if (text !== undefined) {
+        return text;
+    }
+    const parsed = masonLengthPercentParse(value);
+    if (parsed === undefined || typeof parsed === 'string') {
+        return 0;
+    }
+    return parsed;
+}
+/** Compares CSS text as text: core's `PercentLength.equals` calls any two strings equal. */
+function masonLengthEquals(a, b) {
+    if (typeof a === 'string' || typeof b === 'string') {
+        return a === b;
+    }
+    return CorePercentLength.equals(a, b);
+}
+/** As `masonSizeConverter`, for Mason's own max-* properties (core has none). */
+function masonMaxSizeConverter(value) {
+    const resolved = masonSizeValue(value);
+    return (resolved ?? masonLengthPercentParse(value));
+}
+export const maxWidthProperty = new CssProperty({
+    name: 'maxWidth',
+    cssName: 'max-width',
+    defaultValue: 'auto',
+    // @ts-ignore
+    equalityComparer: CorePercentLength.equals,
+    // masonLengthParse has no '%' handling; match width/height's converter.
+    // @ts-ignore
+    valueConverter: masonMaxSizeConverter,
+    valueChanged: (target, oldValue, newValue) => {
+        if (appliedInSetNative(target, maxWidthProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maxWidth = newValue;
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+        }
+    },
+});
+export const maxHeightProperty = new CssProperty({
+    name: 'maxHeight',
+    cssName: 'max-height',
+    defaultValue: 'auto',
+    // @ts-ignore
+    equalityComparer: CorePercentLength.equals,
+    // @ts-ignore
+    valueConverter: masonMaxSizeConverter,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, maxHeightProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maxHeight = newValue;
+        }
+    },
+});
+// Core's minWidth/minHeight already route into this Style via setNative
+// (common.ts), so no new CssProperty is needed — just fix the '%' handling.
+// Core's min-width/min-height converter is Length.parse, which has no '%'
+// handling; mason needs percentages. Core's own valueChanged (which sets
+// effectiveMinWidth) is deliberately left in place for both kinds of view, so
+// only the converter is narrowed — a plain view must still get a plain Length,
+// or core's Length.toDevicePixels mis-reads a percentage.
+/**
+ * Resolve a size value with Mason's own length parser before core sees it.
+ *
+ * `width`/`height`/`min-*` reach core's `PercentLength.parse` first, which
+ * misreads `100vh`/`1rem` as a bare dip count and `px` as a device pixel
+ * rather than Mason's CSS pixel. Resolve every unit Mason understands here
+ * as the equivalent dip; percentages, `auto` and keywords fall through
+ * untouched.
+ */
+function masonSizeValue(value) {
+    const dip = cssLengthToDip(value);
+    return dip === undefined ? undefined : { value: dip, unit: 'dip' };
+}
+function masonMinSizeConverter(value) {
+    if (isMasonView(this)) {
+        const resolved = masonSizeValue(value);
+        if (resolved) {
+            return resolved;
+        }
+        return masonLengthPercentParse(value);
+    }
+    return CoreLength.parse(value);
+}
+minWidthProperty.overrideHandlers({
+    name: 'minWidth',
+    cssName: 'min-width',
+    // @ts-ignore
+    equalityComparer: CorePercentLength.equals,
+    // @ts-ignore
+    valueConverter: masonMinSizeConverter,
+});
+minHeightProperty.overrideHandlers({
+    name: 'minHeight',
+    cssName: 'min-height',
+    // @ts-ignore
+    equalityComparer: CorePercentLength.equals,
+    // @ts-ignore
+    valueConverter: masonMinSizeConverter,
+});
+/**
+ * Rewrite a size declaration for mason views before core parses it.
+ *
+ * `width`/`height` are `CssAnimationProperty`s with no `overrideHandlers`, so
+ * mason can't narrow their converter the way it does for `min-*`. Rewriting
+ * the declaration itself works instead: `100vh` becomes its resolved dip
+ * count, which core's parser then reads correctly (and, deliberately, so
+ * does a bare `px`, which core reads as a device pixel but mason as a CSS
+ * pixel).
+ */
+function masonLengthDeclaration(value) {
+    if (typeof value !== 'string') {
+        return value;
+    }
+    const keyword = sizingKeywordLength(value);
+    if (keyword) {
+        return keyword;
+    }
+    const dip = cssLengthToDip(value);
+    // A bare number is a dip to core and a CSS pixel to mason — the same size.
+    return dip === undefined ? value : String(dip);
+}
+/** Core throws on sizing keywords; a negative length reads as auto to core and carries the keyword as its unit. */
+function sizingKeywordLength(value) {
+    return isSizingKeyword(value) ? { unit: value.trim(), value: -2 } : undefined;
+}
+const MASON_SIZE_KEYS = [widthProperty, heightProperty, minWidthProperty, minHeightProperty, maxWidthProperty, maxHeightProperty].flatMap((property) => [property.name, property.cssName, property.cssLocalName]).filter((key) => typeof key === 'string' && key.length > 0);
+/**
+ * The stylesheet-facing accessor a `CssAnimationProperty` installs is
+ * non-configurable, so it can't be overridden on `Style.prototype`. Shadow it
+ * on a prototype between `Style.prototype` and each mason view's Style.
+ */
+const masonStyleProtos = new WeakMap();
+function masonStyleProto(proto) {
+    let masonProto = masonStyleProtos.get(proto);
+    if (masonProto) {
+        return masonProto;
+    }
+    masonProto = Object.create(proto);
+    for (const key of new Set(MASON_SIZE_KEYS)) {
+        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+        const set = descriptor?.set;
+        const get = descriptor?.get;
+        if (!set) {
+            continue;
+        }
+        Object.defineProperty(masonProto, key, {
+            enumerable: false,
+            configurable: true,
+            get,
+            set(value) {
+                beginStyleWrite(this, key, value);
+                try {
+                    set.call(this, masonLengthDeclaration(environmentStyleValue(this, key, value)));
+                }
+                finally {
+                    endStyleWrite();
+                }
+            },
+        });
+    }
+    Object.defineProperty(masonProto, MASON_SIZE_UNITS, { value: true, enumerable: false });
+    masonStyleProtos.set(proto, masonProto);
+    return masonProto;
+}
+export function installMasonSizeUnits(style) {
+    if (!style || style[MASON_SIZE_UNITS]) {
+        return;
+    }
+    Object.setPrototypeOf(style, masonStyleProto(Object.getPrototypeOf(style)));
+}
+export const insetProperty = new ShorthandProperty({
+    name: 'inset',
+    cssName: 'inset',
+    getter: function () {
+        if (this.top === this.right && this.top === this.bottom && this.top === this.left) {
+            if (typeof this.top === 'string') {
+                if (this.top === 'auto') {
+                    return this.top;
+                }
+                const value = CorePercentLength.parse(this.top);
+                if (Number.isNaN(value)) {
+                    return this.top;
+                }
+                else {
+                    return CorePercentLength.convertToString(value);
+                }
+            }
+        }
+        if (CorePercentLength.equals(this.top, this.right) && CorePercentLength.equals(this.top, this.bottom) && CorePercentLength.equals(this.top, this.left)) {
+            return this.top;
+        }
+        return `${CorePercentLength.convertToString(this.paddingTop)} ${CorePercentLength.convertToString(this.paddingRight)} ${CorePercentLength.convertToString(this.paddingBottom)} ${CorePercentLength.convertToString(this.paddingLeft)}`;
+    },
+    converter: convertToInsets,
+});
+function parseShorthandPositioning(value) {
+    const arr = value.split(/[ ,]+/);
+    let top;
+    let right;
+    let bottom;
+    let left;
+    if (arr.length === 1) {
+        top = arr[0];
+        right = arr[0];
+        bottom = arr[0];
+        left = arr[0];
+    }
+    else if (arr.length === 2) {
+        top = arr[0];
+        bottom = arr[0];
+        right = arr[1];
+        left = arr[1];
+    }
+    else if (arr.length === 3) {
+        top = arr[0];
+        right = arr[1];
+        left = arr[1];
+        bottom = arr[2];
+    }
+    else if (arr.length === 4) {
+        top = arr[0];
+        right = arr[1];
+        bottom = arr[2];
+        left = arr[3];
+    }
+    else {
+        throw new Error('Expected 1, 2, 3 or 4 parameters. Actual: ' + value);
+    }
+    return {
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left,
+    };
+}
+function convertToInsets(value) {
+    if (typeof value === 'string' && value !== 'auto') {
+        const thickness = parseShorthandPositioning(value);
+        return [
+            [topProperty, masonInsetConverter(thickness.top)],
+            [rightProperty, masonInsetConverter(thickness.right)],
+            [bottomProperty, masonInsetConverter(thickness.bottom)],
+            [leftProperty, masonInsetConverter(thickness.left)],
+        ];
+    }
+    else {
+        return [
+            [topProperty, value],
+            [rightProperty, value],
+            [bottomProperty, value],
+            [leftProperty, value],
+        ];
+    }
+}
+export const leftProperty = new CssProperty({
+    name: 'left',
+    cssName: 'left',
+    defaultValue: 'auto',
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
+    // @ts-ignore
+    valueConverter: masonInsetConverter,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, leftProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.left = newValue;
+        }
+    },
+});
+export const rightProperty = new CssProperty({
+    name: 'right',
+    cssName: 'right',
+    defaultValue: 'auto',
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
+    // @ts-ignore
+    valueConverter: masonInsetConverter,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, rightProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.right = newValue;
+        }
+    },
+});
+export const topProperty = new CssProperty({
+    name: 'top',
+    cssName: 'top',
+    defaultValue: 'auto',
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
+    // @ts-ignore
+    valueConverter: masonInsetConverter,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, topProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.top = newValue;
+        }
+    },
+});
+export const bottomProperty = new CssProperty({
+    name: 'bottom',
+    cssName: 'bottom',
+    defaultValue: 'auto',
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
+    // @ts-ignore
+    valueConverter: masonInsetConverter,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, bottomProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.bottom = newValue;
+        }
+    },
+});
+export const positionProperty = new CssProperty({
+    name: 'position',
+    cssName: 'position',
+    defaultValue: 'static',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, positionProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.position = newValue;
+        }
+    },
+});
+export const boxSizingProperty = new CssProperty({
+    name: 'boxSizing',
+    cssName: 'box-sizing',
+    defaultValue: 'border-box',
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, boxSizingProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.boxSizing = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                target.boxSizing = oldValue;
+            }
+        }
+    },
+    valueConverter(value) {
+        switch (value) {
+            case 'content-box':
+            case 'border-box':
+                return value;
+            default:
+                return undefined;
+        }
+    },
+});
+export const borderRadiusProperty = new CssProperty({
+    name: 'borderRadius',
+    cssName: 'border-radius',
+});
+// Core's alignItems/alignSelf validator rejects Box Alignment keywords
+// ("start"/"end") masonkit's own Style setter accepts fine; bypass it for
+// Mason views/children like alignContent/justifyContent already do below.
+export const AlignItemsIsValid = makeValidator('normal', 'start', 'end', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch');
+export const AlignItemsParse = makeParser(AlignItemsIsValid);
+export const AlignSelfIsValid = makeValidator('normal', 'start', 'end', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch');
+export const AlignSelfParse = makeParser(AlignSelfIsValid);
+alignItemsProperty.overrideHandlers({
+    name: 'alignItems',
+    cssName: 'align-items',
+    valueConverter: function (value) {
+        if (isMasonView(this)) {
+            return value;
+        }
+        return AlignItemsParse(value);
+    },
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, alignItemsProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.alignItems = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.alignItems = oldValue;
+            }
+        }
+    },
+});
+alignSelfProperty.overrideHandlers({
+    name: 'alignSelf',
+    cssName: 'align-self',
+    valueConverter: function (value) {
+        if (isMasonView(this)) {
+            return value;
+        }
+        return AlignSelfParse(value);
+    },
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, alignSelfProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.alignSelf = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.alignSelf = oldValue;
+            }
+        }
+    },
+});
+export const AlignContentIsValid = makeValidator('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'start', 'end');
+export const AlignContentParse = makeParser(AlignContentIsValid);
+export const alignContentProperty = new CssProperty({
+    name: 'alignContent',
+    cssName: 'align-content',
+    defaultValue: 'normal',
+    valueConverter: function (value) {
+        if (isMasonView(this)) {
+            return value;
+        }
+        return AlignContentParse(value);
+    },
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, alignContentProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.alignContent = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.alignContent = oldValue;
+            }
+        }
+    },
+});
+export const justifyItemsProperty = new CssProperty({
+    name: 'justifyItems',
+    cssName: 'justify-items',
+    defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, justifyItemsProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.justifyItems = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.justifyItems = oldValue;
+            }
+        }
+    },
+});
+export const justifySelfProperty = new CssProperty({
+    name: 'justifySelf',
+    cssName: 'justify-self',
+    defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, justifySelfProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.justifySelf = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.justifySelf = oldValue;
+            }
+        }
+    },
+});
+export const placeShorthands = [
+    { cssName: 'place-items', longhands: [alignItemsProperty, justifyItemsProperty], split: splitPlace },
+    { cssName: 'place-content', longhands: [alignContentProperty, justifyContentProperty], split: splitPlace },
+    { cssName: 'place-self', longhands: [alignSelfProperty, justifySelfProperty], split: splitPlace },
+];
+for (const entry of placeShorthands) {
+    masonShorthandProperty(entry).register(Style);
+}
+export const JustifyContentIsValid = makeValidator('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'start', 'end');
+export const JustifyContentParse = makeParser(JustifyContentIsValid);
+justifyContentProperty.overrideHandlers({
+    name: 'justifyContent',
+    cssName: 'justify-content',
+    valueConverter: function (value) {
+        if (isMasonView(this)) {
+            return value;
+        }
+        return JustifyContentParse(value);
+    },
+    valueChanged(target, oldValue, newValue) {
+        if (newValue && appliedInSetNative(target, justifyContentProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.justifyContent = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.justifyContent = oldValue;
+            }
+        }
+    },
+});
+export const flexBasisProperty = new CssProperty({
+    name: 'flexBasis',
+    cssName: 'flex-basis',
+    defaultValue: 'auto',
+    // @ts-ignore
+    equalityComparer: masonLengthEquals,
+    // @ts-ignore
+    valueConverter: (value) => (isSizingKeyword(value) ? value.trim() : masonInsetConverter(value)),
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, flexBasisProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.flexBasis = newValue;
+        }
+    },
+});
+export const aspectRatioProperty = new CssProperty({
+    name: 'aspectRatio',
+    cssName: 'aspect-ratio',
+    defaultValue: Number.NaN,
+    // Without this the raw declaration reached the buffer's setFloat32, where the
+    // `<ratio>` form (`2 / 3`) coerces to NaN — i.e. no ratio at all.
+    // @ts-ignore
+    valueConverter: parseAspectRatio,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, aspectRatioProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.aspectRatio = newValue;
+        }
+    },
+});
+export const gridAutoRowsProperty = new CssProperty({
+    name: 'gridAutoRows',
+    cssName: 'grid-auto-rows',
+    defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridAutoRowsProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridAutoRows = newValue;
+        }
+    },
+});
+export const gridAutoColumnsProperty = new CssProperty({
+    name: 'gridAutoColumns',
+    cssName: 'grid-auto-columns',
+    defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridAutoColumnsProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridAutoColumns = newValue;
+        }
+    },
+});
+export const gridAutoFlowProperty = new CssProperty({
+    name: 'gridAutoFlow',
+    cssName: 'grid-auto-flow',
+    defaultValue: 'row',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridAutoFlowProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridAutoFlow = newValue;
+        }
+    },
+});
+export const gridAreaProperty = new CssProperty({
+    name: 'gridArea',
+    cssName: 'grid-area',
+    defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridAreaProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridArea = newValue;
+        }
+    },
+});
+export const gridColumnStartProperty = new CssProperty({
+    name: 'gridColumnStart',
+    cssName: 'grid-column-start',
+    defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridColumnStartProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridColumnStart = newValue;
+        }
+    },
+});
+export const gridColumnEndProperty = new CssProperty({
+    name: 'gridColumnEnd',
+    cssName: 'grid-column-end',
+    defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridColumnEndProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridColumnEnd = newValue;
+        }
+    },
+});
+export const gridColumnProperty = new CssProperty({
+    name: 'gridColumn',
+    cssName: 'grid-column',
+    defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridColumnProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridColumn = newValue;
+        }
+    },
+});
+export const gridRowStartProperty = new CssProperty({
+    name: 'gridRowStart',
+    cssName: 'grid-row-start',
+    defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridRowStartProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridRowStart = newValue;
+        }
+    },
+});
+export const gridRowEndProperty = new CssProperty({
+    name: 'gridRowEnd',
+    cssName: 'grid-row-end',
+    defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridRowEndProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridRowEnd = newValue;
+        }
+    },
+});
+export const gridRowProperty = new CssProperty({
+    name: 'gridRow',
+    cssName: 'grid-row',
+    defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridRowProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridRow = newValue;
+        }
+    },
+});
+export const gridTemplateAreasProperty = new CssProperty({
+    name: 'gridTemplateAreas',
+    cssName: 'grid-template-areas',
+    defaultValue: null,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridTemplateAreasProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridTemplateAreas = newValue;
+        }
+    },
+});
+export const gridTemplateRowsProperty = new CssProperty({
+    name: 'gridTemplateRows',
+    cssName: 'grid-template-rows',
+    defaultValue: null,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridTemplateRowsProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridTemplateRows = newValue;
+        }
+    },
+});
+export const gridTemplateColumnsProperty = new CssProperty({
+    name: 'gridTemplateColumns',
+    cssName: 'grid-template-columns',
+    defaultValue: null,
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, gridTemplateColumnsProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridTemplateColumns = newValue;
+        }
+    },
+});
+// @ts-ignore
+export const textWrapProperty = new CssProperty({
+    name: 'textWrap',
+    cssName: 'text-wrap',
+    affectsLayout: true,
+    defaultValue: 'wrap',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, textWrapProperty))
+            return;
+        const view = target?.viewRef ? getViewStyle(target.viewRef) : target.view;
+        if (view) {
+            view.textWrap = newValue;
+        }
+    },
+});
+const flexFlowShorthand = { cssName: 'flex-flow', longhands: [flexDirectionProperty, flexWrapProperty], split: splitFlexFlow };
+const flexFlowProperty = masonShorthandProperty(flexFlowShorthand, function () {
+    return `${this.flexDirection} ${this.flexWrap}`;
+});
+const flexShorthand = { cssName: 'flex', longhands: [flexGrowProperty, flexShrinkProperty, flexBasisProperty], split: splitFlex };
+const flexProperty = masonShorthandProperty(flexShorthand, function () {
+    return `${this.flexGrow} ${this.flexShrink} ${this.flexBasis}`;
+});
+export const textOverFlowProperty = new CssProperty({
+    name: 'textOverflow',
+    cssName: 'text-overflow',
+    defaultValue: 'clip',
+    valueChanged(target, oldValue, newValue) {
+        if (appliedInSetNative(target, textOverFlowProperty))
+            return;
+        const view = target?.viewRef ? getViewStyle(target.viewRef) : target.view;
+        if (view) {
+            view.textOverflow = newValue;
+        }
+    },
+});
+export const verticalAlignProperty = new CssProperty({
+    name: 'verticalAlign',
+    cssName: 'vertical-align',
+    defaultValue: 'baseline',
+    valueChanged: (target, oldValue, newValue) => {
+        if (newValue && appliedInSetNative(target, verticalAlignProperty))
+            return;
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.verticalAlign = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                target.verticalAlign = oldValue;
+            }
+        }
+    },
+});
+verticalAlignmentProperty.overrideHandlers({
+    name: 'verticalAlignment',
+    cssName: 'vertical-align',
+    valueConverter: function (value) {
+        if (isMasonView(this)) {
+            return value;
+        }
+        return CoreTypes.VerticalAlignmentText.parse(value);
+    },
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                // @ts-ignore
+                view.verticalAlign = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                target.verticalAlign = oldValue;
+            }
+        }
+    },
+});
+overrideForMasonViews(textShadowProperty, {
+    coreConverter: parseCSSShadow,
+    apply: (style, value) => {
+        style.textShadow = value;
+    },
+});
+export const floatProperty = new CssProperty({
+    name: 'float',
+    cssName: 'float',
+    defaultValue: 'none',
+});
+export const clearProperty = new CssProperty({
+    name: 'clear',
+    cssName: 'clear',
+    defaultValue: 'none',
+});
+export const cornerShapeProperty = new CssProperty({
+    name: 'cornerShape',
+    cssName: 'corner-shape',
+});
+export const boxShadowProperty = new CssProperty({
+    name: 'boxShadow',
+    cssName: 'box-shadow',
+});
+export const transformProperty = new CssProperty({
+    name: 'transform',
+    cssName: 'transform',
+});
+export const cornerShapeTopLeftProperty = new CssProperty({
+    name: 'cornerShapeTopLeft',
+    cssName: 'corner-shape-top-left',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.cornerShapeTopLeft = newValue;
+        }
+    },
+});
+export const cornerShapeTopRightProperty = new CssProperty({
+    name: 'cornerShapeTopRight',
+    cssName: 'corner-shape-top-right',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.cornerShapeTopRight = newValue;
+        }
+    },
+});
+export const cornerShapeBottomRightProperty = new CssProperty({
+    name: 'cornerShapeBottomRight',
+    cssName: 'corner-shape-bottom-right',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.cornerShapeBottomRight = newValue;
+        }
+    },
+});
+export const cornerShapeBottomLeftProperty = new CssProperty({
+    name: 'cornerShapeBottomLeft',
+    cssName: 'corner-shape-bottom-left',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.cornerShapeBottomLeft = newValue;
+        }
+    },
+});
+registerAlongsideCore(cornerShapeProperty);
+registerAlongsideCore(boxShadowProperty);
+registerAlongsideCore(transformProperty);
+cornerShapeTopLeftProperty.register(Style);
+cornerShapeTopRightProperty.register(Style);
+cornerShapeBottomRightProperty.register(Style);
+cornerShapeBottomLeftProperty.register(Style);
+clearProperty.register(Style);
+floatProperty.register(Style);
+registerAlongsideCore(verticalAlignProperty);
+registerAlongsideCore(textOverFlowProperty);
+registerAlongsideCore(flexProperty);
+registerAlongsideCore(flexFlowProperty);
+textWrapProperty.register(Style);
+gridTemplateColumnsProperty.register(Style);
+gridTemplateRowsProperty.register(Style);
+registerAlongsideCore(alignContentProperty);
+justifySelfProperty.register(Style);
+justifyItemsProperty.register(Style);
+gridTemplateAreasProperty.register(Style);
+gridRowProperty.register(Style);
+gridRowStartProperty.register(Style);
+gridRowEndProperty.register(Style);
+gridColumnProperty.register(Style);
+gridColumnEndProperty.register(Style);
+gridColumnStartProperty.register(Style);
+gridAreaProperty.register(Style);
+// Foreign grid shorthands must share core's effective longhands: independent
+// scalar properties lose CSS/local priority (including an explicit `auto`).
+// Preserve Mason's direct accessors; core 9.1 stylesheet expansion uses these
+// same longhands for both kinds of view.
+/** A lone `<custom-ident>` placement, which an omitted end copies instead of `auto`. */
+function isGridIdent(part) {
+    return /^-?[A-Za-z_][\w-]*$/.test(part) && !/^(auto|span)$/i.test(part);
+}
+/** Splits `a / b / ...` into `count` longhands, filling omitted ones as CSS Grid does. */
+export function gridParts(value, count) {
+    const parts = String(value)
+        .split('/')
+        .map((part) => part.trim());
+    if (parts.length > count || parts.some((part) => !part))
+        throw new Error(`Invalid grid placement: ${value}`);
+    // Omitted ends copy their start (grid-area: row-start, column-start, row-end, column-end).
+    for (let i = parts.length; i < count; i++) {
+        const start = parts[i - (count === 4 ? 2 : 1)] ?? parts[0];
+        parts.push(isGridIdent(start) ? start : 'auto');
+    }
+    return parts;
+}
+const gridPlacementShorthands = [
+    { cssName: 'grid-row', longhands: [gridRowStartProperty, gridRowEndProperty], split: (value) => gridParts(value, 2) },
+    { cssName: 'grid-column', longhands: [gridColumnStartProperty, gridColumnEndProperty], split: (value) => gridParts(value, 2) },
+    { cssName: 'grid-area', longhands: [gridRowStartProperty, gridColumnStartProperty, gridRowEndProperty, gridColumnEndProperty], split: (value) => gridParts(value, 4) },
+];
+for (const entry of gridPlacementShorthands) {
+    const shorthand = masonShorthandProperty(entry, function () {
+        return entry.longhands.map((property) => this[property.name]).join(' / ');
+    });
+    registerAlongsideCore(shorthand, 'foreign');
+}
+gridAutoFlowProperty.register(Style);
+gridAutoRowsProperty.register(Style);
+gridAutoColumnsProperty.register(Style);
+aspectRatioProperty.register(Style);
+flexBasisProperty.register(Style);
+registerAlongsideCore(borderRadiusProperty);
+boxSizingProperty.register(Style);
+positionProperty.register(Style);
+insetProperty.register(Style);
+leftProperty.register(Style);
+rightProperty.register(Style);
+topProperty.register(Style);
+bottomProperty.register(Style);
+registerAlongsideCore(maxWidthProperty);
+registerAlongsideCore(maxHeightProperty);
+gridRowGapProperty.register(Style);
+gridColumnGapProperty.register(Style);
+gridGapProperty.register(Style);
+registerAlongsideCore(gapProperty);
+registerAlongsideCore(rowGapProperty);
+registerAlongsideCore(columnGapProperty);
+scrollBarWidthProperty.register(Style);
+registerAlongsideCore(marginProperty);
+overflowProperty.register(Style);
+overflowXProperty.register(Style);
+overflowYProperty.register(Style);
+registerAlongsideCore(backgroundProperty);
+registerAlongsideCore(backgroundRepeatProperty);
+registerAlongsideCore(backgroundPositionProperty);
+registerAlongsideCore(backgroundSizeProperty);
+backgroundClipProperty.register(Style);
+backgroundPositionXProperty.register(Style);
+backgroundPositionYProperty.register(Style);
+backgroundOriginProperty.register(Style);
+backgroundAttachmentProperty.register(Style);
+backgroundBlendModeProperty.register(Style);
+filterProperty.register(Style);
+registerAlongsideCore(borderColorProperty);
+// New CSS properties
+export const objectPositionProperty = new CssProperty({
+    name: 'objectPosition',
+    cssName: 'object-position',
+    defaultValue: '50% 50%',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.objectPosition = newValue;
+        }
+    },
+});
+// Per-side style longhands; `border-style`, `border` and `border-<side>` expand into them.
+export const borderTopStyleProperty = new CssProperty({
+    name: 'borderTopStyle',
+    cssName: 'border-top-style',
+    defaultValue: 'none',
+});
+export const borderRightStyleProperty = new CssProperty({
+    name: 'borderRightStyle',
+    cssName: 'border-right-style',
+    defaultValue: 'none',
+});
+export const borderBottomStyleProperty = new CssProperty({
+    name: 'borderBottomStyle',
+    cssName: 'border-bottom-style',
+    defaultValue: 'none',
+});
+export const borderLeftStyleProperty = new CssProperty({
+    name: 'borderLeftStyle',
+    cssName: 'border-left-style',
+    defaultValue: 'none',
+});
+export const borderImageProperty = new CssProperty({
+    name: 'borderImage',
+    cssName: 'border-image',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.borderImage = newValue;
+        }
+    },
+});
+export const fontStretchProperty = new CssProperty({
+    name: 'fontStretch',
+    cssName: 'font-stretch',
+    defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.fontStretch = newValue;
+        }
+    },
+});
+export const fontFeatureSettingsProperty = new CssProperty({
+    name: 'fontFeatureSettings',
+    cssName: 'font-feature-settings',
+    defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.fontFeatureSettings = newValue;
+        }
+    },
+});
+export const wordSpacingProperty = new CssProperty({
+    name: 'wordSpacing',
+    cssName: 'word-spacing',
+    defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.wordSpacing = newValue;
+        }
+    },
+});
+export const hyphensProperty = new CssProperty({
+    name: 'hyphens',
+    cssName: 'hyphens',
+    defaultValue: 'manual',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.hyphens = newValue;
+        }
+    },
+});
+export const textIndentProperty = new CssProperty({
+    name: 'textIndent',
+    cssName: 'text-indent',
+    defaultValue: '0px',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.textIndent = newValue;
+        }
+    },
+});
+function setLineClamp(target, value) {
+    const view = getViewStyle(target.viewRef);
+    if (view) {
+        view.lineClamp = (value ?? 'none');
+    }
+}
+export const lineClampProperty = new CssProperty({
+    name: 'lineClamp',
+    cssName: 'line-clamp',
+    defaultValue: 'none',
+    valueChanged: (target, oldValue, newValue) => setLineClamp(target, newValue),
+});
+// Tailwind's `line-clamp-*` pairs this with `display: -webkit-box`, read as block.
+export const webkitLineClampProperty = new CssProperty({
+    name: 'webkitLineClamp',
+    cssName: '-webkit-line-clamp',
+    defaultValue: 'none',
+    valueChanged: (target, oldValue, newValue) => setLineClamp(target, newValue),
+});
+export const transformOriginProperty = new CssProperty({
+    name: 'transformOrigin',
+    cssName: 'transform-origin',
+    defaultValue: '50% 50%',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.transformOrigin = newValue;
+        }
+    },
+});
+export const backdropFilterProperty = new CssProperty({
+    name: 'backdropFilter',
+    cssName: 'backdrop-filter',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backdropFilter = newValue;
+        }
+    },
+});
+// CSS masking. Android and iOS parse and draw these natively, the way they do backgrounds; the
+// `mask` shorthand is split into them here, like `background`.
+export const maskImageProperty = new CssProperty({
+    name: 'maskImage',
+    cssName: 'mask-image',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskImage = newValue;
+        }
+    },
+});
+export const maskSizeProperty = new CssAnimationProperty({
+    name: 'maskSize',
+    cssName: 'mask-size',
+    valueConverter: (value) => value,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskSize = newValue;
+        }
+    },
+});
+export const maskPositionProperty = new CssAnimationProperty({
+    name: 'maskPosition',
+    cssName: 'mask-position',
+    // Keyframes keep only declarations whose property has a converter; see css-keyframes.ts.
+    valueConverter: (value) => value,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskPosition = newValue;
+        }
+    },
+});
+export const maskRepeatProperty = new CssProperty({
+    name: 'maskRepeat',
+    cssName: 'mask-repeat',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskRepeat = newValue;
+        }
+    },
+});
+export const maskOriginProperty = new CssProperty({
+    name: 'maskOrigin',
+    cssName: 'mask-origin',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskOrigin = newValue;
+        }
+    },
+});
+export const maskClipProperty = new CssProperty({
+    name: 'maskClip',
+    cssName: 'mask-clip',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskClip = newValue;
+        }
+    },
+});
+export const maskModeProperty = new CssProperty({
+    name: 'maskMode',
+    cssName: 'mask-mode',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskMode = newValue;
+        }
+    },
+});
+export const maskCompositeProperty = new CssProperty({
+    name: 'maskComposite',
+    cssName: 'mask-composite',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskComposite = newValue;
+        }
+    },
+});
+export const clipPathProperty = new CssProperty({
+    name: 'clipPath',
+    cssName: 'clip-path',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.clipPath = newValue;
+        }
+    },
+});
+export const maskBorderSourceProperty = new CssProperty({
+    name: 'maskBorderSource',
+    cssName: 'mask-border-source',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskBorderSource = newValue;
+        }
+    },
+});
+export const maskBorderSliceProperty = new CssProperty({
+    name: 'maskBorderSlice',
+    cssName: 'mask-border-slice',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskBorderSlice = newValue;
+        }
+    },
+});
+export const maskBorderWidthProperty = new CssProperty({
+    name: 'maskBorderWidth',
+    cssName: 'mask-border-width',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskBorderWidth = newValue;
+        }
+    },
+});
+export const maskBorderOutsetProperty = new CssProperty({
+    name: 'maskBorderOutset',
+    cssName: 'mask-border-outset',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskBorderOutset = newValue;
+        }
+    },
+});
+export const maskBorderRepeatProperty = new CssProperty({
+    name: 'maskBorderRepeat',
+    cssName: 'mask-border-repeat',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskBorderRepeat = newValue;
+        }
+    },
+});
+export const maskBorderModeProperty = new CssProperty({
+    name: 'maskBorderMode',
+    cssName: 'mask-border-mode',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maskBorderMode = newValue;
+        }
+    },
+});
+// The -webkit- prefixed names older and autoprefixed CSS still uses, set on the same Style
+// properties. Composite operators and box keywords are translated to the standard ones.
+// Gradient-text CSS is usually written `-webkit-background-clip: text`.
+const webkitBackgroundClipProperty = new CssProperty({
+    name: 'webkitBackgroundClip',
+    cssName: '-webkit-background-clip',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.backgroundClip = newValue;
+        }
+    },
+});
+const webkitMaskImageProperty = new CssProperty({
+    name: 'webkitMaskImage',
+    cssName: '-webkit-mask-image',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            const value = newValue;
+            view.maskImage = (typeof value === 'string' ? value : value);
+        }
+    },
+});
+const webkitMaskSizeProperty = new CssProperty({
+    name: 'webkitMaskSize',
+    cssName: '-webkit-mask-size',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            const value = newValue;
+            view.maskSize = (typeof value === 'string' ? value : value);
+        }
+    },
+});
+const webkitMaskPositionProperty = new CssProperty({
+    name: 'webkitMaskPosition',
+    cssName: '-webkit-mask-position',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            const value = newValue;
+            view.maskPosition = (typeof value === 'string' ? value : value);
+        }
+    },
+});
+const webkitMaskRepeatProperty = new CssProperty({
+    name: 'webkitMaskRepeat',
+    cssName: '-webkit-mask-repeat',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            const value = newValue;
+            view.maskRepeat = (typeof value === 'string' ? value : value);
+        }
+    },
+});
+const webkitMaskOriginProperty = new CssProperty({
+    name: 'webkitMaskOrigin',
+    cssName: '-webkit-mask-origin',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            const value = newValue;
+            view.maskOrigin = (typeof value === 'string' ? webkitMaskBox(value) : value);
+        }
+    },
+});
+const webkitMaskClipProperty = new CssProperty({
+    name: 'webkitMaskClip',
+    cssName: '-webkit-mask-clip',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            const value = newValue;
+            view.maskClip = (typeof value === 'string' ? webkitMaskBox(value) : value);
+        }
+    },
+});
+const webkitMaskCompositeProperty = new CssProperty({
+    name: 'webkitMaskComposite',
+    cssName: '-webkit-mask-composite',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            const value = newValue;
+            view.maskComposite = (typeof value === 'string' ? webkitMaskComposite(value) : value);
+        }
+    },
+});
+const maskShorthand = {
+    cssName: 'mask',
+    longhands: [maskImageProperty, maskPositionProperty, maskSizeProperty, maskRepeatProperty, maskOriginProperty, maskClipProperty, maskCompositeProperty, maskModeProperty],
+    split: splitMask,
+};
+export const maskProperty = masonShorthandProperty(maskShorthand, function () {
+    return this.maskImage;
+});
+const webkitMaskShorthand = { cssName: '-webkit-mask', longhands: maskShorthand.longhands, split: splitWebkitMask };
+const webkitMaskProperty = masonShorthandProperty(webkitMaskShorthand, function () {
+    return this.maskImage;
+});
+const maskBorderShorthand = {
+    cssName: 'mask-border',
+    longhands: [maskBorderSourceProperty, maskBorderSliceProperty, maskBorderWidthProperty, maskBorderOutsetProperty, maskBorderRepeatProperty, maskBorderModeProperty],
+    split: splitMaskBorder,
+};
+export const maskBorderProperty = masonShorthandProperty(maskBorderShorthand, function () {
+    return this.maskBorderSource;
+});
+// WebKit's name for mask-border.
+const webkitMaskBoxImageShorthand = { cssName: '-webkit-mask-box-image', longhands: maskBorderShorthand.longhands, split: splitMaskBorder };
+const webkitMaskBoxImageProperty = masonShorthandProperty(webkitMaskBoxImageShorthand, function () {
+    return this.maskBorderSource;
+});
+export const writingModeProperty = new CssProperty({
+    name: 'writingMode',
+    cssName: 'writing-mode',
+    defaultValue: 'horizontal-tb',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.writingMode = newValue;
+        }
+    },
+});
+export const unicodeBidiProperty = new CssProperty({
+    name: 'unicodeBidi',
+    cssName: 'unicode-bidi',
+    defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.unicodeBidi = newValue;
+        }
+    },
+});
+export const caretColorProperty = new CssProperty({
+    name: 'caretColor',
+    cssName: 'caret-color',
+    defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.caretColor = newValue;
+        }
+    },
+});
+objectPositionProperty.register(Style);
+borderTopStyleProperty.register(Style);
+borderRightStyleProperty.register(Style);
+borderBottomStyleProperty.register(Style);
+borderLeftStyleProperty.register(Style);
+borderImageProperty.register(Style);
+fontStretchProperty.register(Style);
+fontFeatureSettingsProperty.register(Style);
+wordSpacingProperty.register(Style);
+hyphensProperty.register(Style);
+textIndentProperty.register(Style);
+lineClampProperty.register(Style);
+webkitLineClampProperty.register(Style);
+transformOriginProperty.register(Style);
+backdropFilterProperty.register(Style);
+maskImageProperty.register(Style);
+maskProperty.register(Style);
+// Keyframes can animate mask position and size; see css-keyframes.ts.
+registerKeyframeProperty(maskPositionProperty, interpolatePositionList, '0% 0%');
+registerKeyframeProperty(maskSizeProperty, interpolateSizeList, 'auto');
+installKeyframes();
+// Core has its own clip-path for plain views; MasonKit views draw theirs natively.
+registerAlongsideCore(clipPathProperty);
+maskBorderSourceProperty.register(Style);
+maskBorderSliceProperty.register(Style);
+maskBorderWidthProperty.register(Style);
+maskBorderOutsetProperty.register(Style);
+maskBorderRepeatProperty.register(Style);
+maskBorderModeProperty.register(Style);
+webkitBackgroundClipProperty.register(Style);
+webkitMaskImageProperty.register(Style);
+webkitMaskSizeProperty.register(Style);
+webkitMaskPositionProperty.register(Style);
+webkitMaskRepeatProperty.register(Style);
+webkitMaskOriginProperty.register(Style);
+webkitMaskClipProperty.register(Style);
+webkitMaskCompositeProperty.register(Style);
+webkitMaskProperty.register(Style);
+maskBorderProperty.register(Style);
+webkitMaskBoxImageProperty.register(Style);
+maskSizeProperty.register(Style);
+maskPositionProperty.register(Style);
+maskRepeatProperty.register(Style);
+maskOriginProperty.register(Style);
+maskClipProperty.register(Style);
+maskModeProperty.register(Style);
+maskCompositeProperty.register(Style);
+writingModeProperty.register(Style);
+unicodeBidiProperty.register(Style);
+caretColorProperty.register(Style);
+registerAlongsideCore(backgroundImageProperty);
+// Inherited, as in CSS, so a list's value reaches its items.
+export const listStyleTypeProperty = new InheritedCssProperty({
+    name: 'listStyleType',
+    cssName: 'list-style-type',
+});
+export const listStylePositionProperty = new InheritedCssProperty({
+    name: 'listStylePosition',
+    cssName: 'list-style-position',
+});
+listStyleTypeProperty.register(Style);
+listStylePositionProperty.register(Style);
+export const listStyleShorthand = { cssName: 'list-style', longhands: [listStyleTypeProperty, listStylePositionProperty], split: splitListStyle };
+export const listStyleProperty = masonShorthandProperty(listStyleShorthand, function () {
+    const style = this;
+    const parts = [style.listStyleType, style.listStylePosition].filter((part) => typeof part === 'string' && part);
+    return parts.join(' ');
+});
+listStyleProperty.register(Style);
+// core owns `white-space` too (its Label honours nowrap), so dispatch.
+registerAlongsideCore(whiteSpaceProperty);
+objectFitProperty.register(Style);
+touchActionProperty.register(Style);
+textJustifyProperty.register(Style);
+textDecorationThicknessProperty.register(Style);
+textDecorationLineProperty.register(Style);
+textDecorationStyleProperty.register(Style);
+textDecorationColorProperty.register(Style);
+// Core validates `text-decoration` down to none/underline/line-through, so
+// overline, the error lines, styles, colors and thicknesses never reached
+// mason. Its own elements get the raw declaration; core keeps its parser.
+const TextDecorationParse = makeParser(makeValidator('none', 'underline', 'line-through', 'underline line-through'));
+textDecorationProperty.overrideHandlers({
+    valueConverter: function (value) {
+        return isMasonView(this) ? value : TextDecorationParse(value);
+    },
+});
+// core owns `font-family` (through its Font shorthand), so this has to dispatch
+// rather than shadow it.
+// Windows keeps core's inherited font-family, whose fontInternal reaches common.ts and resolves app fonts.
+if (!false) {
+    registerAlongsideCore(fontFamilyProperty);
+}
+displayProperty.register(Style);
+/**
+ * A Mason view gets core's own parse with the CSS text attached (see
+ * CssLength), so core's valueChanged and layout code read a finite length
+ * while Mason's setNative parses the text. Core views keep core's converter.
+ */
+function keepCssOnMasonViews(longhands, core) {
+    for (const property of longhands) {
+        property.overrideHandlers({
+            name: property.name,
+            cssName: property.cssLocalName,
+            valueConverter(value) {
+                const css = core.keywords?.get(value.trim()) ?? value;
+                return isMasonView(this) ? cssLength(css, core.converter) : core.converter(css);
+            },
+            // Core's parse reads `10%` and `10rem` alike, so the CSS text decides.
+            equalityComparer: (a, b) => (isCssLength(a) || isCssLength(b) ? a?.css === b?.css : core.comparer(a, b)),
+        });
+    }
+}
+const radiusLonghands = [borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty];
+const marginLonghands = [marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty];
+const paddingLonghands = [paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty];
+const borderWidthLonghands = [borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty];
+const borderColorLonghands = [borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty];
+// Core reads `50%` as 50 and skips a parsed 0 as equal to its default, so
+// `border-radius: 0` never reached a button's native 4px radius.
+keepCssOnMasonViews(radiusLonghands, { converter: CoreLength.parse, comparer: CoreLength.equals });
+keepCssOnMasonViews(marginLonghands, { converter: CorePercentLength.parse, comparer: CorePercentLength.equals });
+keepCssOnMasonViews(paddingLonghands, { converter: CoreLength.parse, comparer: CoreLength.equals });
+keepCssOnMasonViews(borderWidthLonghands, { converter: CoreLength.parse, comparer: CoreLength.equals, keywords: BORDER_WIDTH_KEYWORDS });
+/** The shorthands core registers; MasonKit builds these only to own core 9.1's parse-time split. */
+const coreShorthands = [
+    { cssName: 'border-radius', longhands: radiusLonghands, split: splitBorderRadius },
+    { cssName: 'margin', longhands: marginLonghands, split: splitMargin },
+    { cssName: 'padding', longhands: paddingLonghands, split: splitPadding },
+    { cssName: 'border-width', longhands: borderWidthLonghands, split: splitBorderWidth },
+    { cssName: 'border-color', longhands: borderColorLonghands, split: splitBorderColor },
+    {
+        cssName: 'background',
+        longhands: [backgroundColorProperty, backgroundImageProperty, backgroundRepeatProperty, backgroundPositionProperty, backgroundSizeProperty, backgroundClipProperty, backgroundOriginProperty, backgroundAttachmentProperty],
+        split: splitBackground,
+    },
+];
+for (const entry of coreShorthands) {
+    masonShorthandProperty(entry);
+}
+// `border`, `border-<side>` and `border-style` expand into the width, style and
+// color longhands, so the cascade resolves each longhand on its own.
+const SIDES = ['top', 'right', 'bottom', 'left'];
+/** A longhand's value as CSS text, for the shorthand getters. */
+function cssText(value) {
+    if (value == null || value === unsetValue) {
+        return '';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return `${value}px`;
+    }
+    if (isCssLength(value)) {
+        return value.css;
+    }
+    const { hex, unit, value: amount } = value;
+    if (typeof hex === 'string') {
+        return hex;
+    }
+    if (typeof amount === 'number') {
+        return unit === '%' ? `${amount * 100}%` : `${amount}px`;
+    }
+    return String(value);
+}
+const borderStyleLonghands = [borderTopStyleProperty, borderRightStyleProperty, borderBottomStyleProperty, borderLeftStyleProperty];
+const borderStyleShorthand = { cssName: 'border-style', longhands: borderStyleLonghands, split: splitBorderStyle };
+const borderShorthand = { cssName: 'border', longhands: [...borderWidthLonghands, ...borderStyleLonghands, ...borderColorLonghands], split: splitBorder };
+const borderSideShorthands = [0, 1, 2, 3].map((i) => ({
+    cssName: `border-${SIDES[i]}`,
+    longhands: [borderWidthLonghands[i], borderStyleLonghands[i], borderColorLonghands[i]],
+    split: splitBorderSide,
+}));
+function sideValues(style, longhands) {
+    return longhands.map(({ name }) => cssText(style[name]));
+}
+/** The shared value when every side agrees, else undefined. */
+function uniformSides(values) {
+    return values.every((value) => value === values[0]) ? values[0] : undefined;
+}
+export const borderStyleProperty = masonShorthandProperty(borderStyleShorthand, function () {
+    const styles = sideValues(this, borderStyleLonghands);
+    return uniformSides(styles) ?? styles.join(' ');
+});
+export const borderProperty = masonShorthandProperty(borderShorthand, function () {
+    const width = uniformSides(sideValues(this, borderWidthLonghands));
+    const style = uniformSides(sideValues(this, borderStyleLonghands));
+    const color = uniformSides(sideValues(this, borderColorLonghands));
+    return width !== undefined && style !== undefined && color !== undefined ? [width, style, color].filter(Boolean).join(' ') : '';
+});
+function borderSideGetter(i) {
+    return function () {
+        return sideValues(this, [borderWidthLonghands[i], borderStyleLonghands[i], borderColorLonghands[i]]).filter(Boolean).join(' ');
+    };
+}
+export const borderTopProperty = masonShorthandProperty(borderSideShorthands[0], borderSideGetter(0));
+export const borderRightProperty = masonShorthandProperty(borderSideShorthands[1], borderSideGetter(1));
+export const borderBottomProperty = masonShorthandProperty(borderSideShorthands[2], borderSideGetter(2));
+export const borderLeftProperty = masonShorthandProperty(borderSideShorthands[3], borderSideGetter(3));
+borderStyleProperty.register(Style);
+borderProperty.register(Style);
+borderTopProperty.register(Style);
+borderRightProperty.register(Style);
+borderBottomProperty.register(Style);
+borderLeftProperty.register(Style);
+const LOGICAL_SIDES = [
+    ['block-start', 0],
+    ['inline-end', 1],
+    ['block-end', 2],
+    ['inline-start', 3],
+];
+/** `<prefix>-inline<suffix>`, `<prefix>-block<suffix>` and the four `-start`/`-end` sides. */
+function logicalSides(prefix, suffix, sides, splitAxis) {
+    const inline = { cssName: `${prefix}-inline${suffix}`, longhands: [sides[3], sides[1]], split: splitAxis };
+    const block = { cssName: `${prefix}-block${suffix}`, longhands: [sides[0], sides[2]], split: splitAxis };
+    const perSide = LOGICAL_SIDES.map(([side, i]) => ({ cssName: `${prefix}-${side}${suffix}`, longhands: [sides[i]], split: passThrough }));
+    return [inline, block, ...perSide];
+}
+const borderSideLonghands = (i) => [borderWidthLonghands[i], borderStyleLonghands[i], borderColorLonghands[i]];
+const logicalShorthands = [
+    ...logicalSides('margin', '', marginLonghands, splitMarginStartEnd),
+    ...logicalSides('padding', '', paddingLonghands, splitPaddingStartEnd),
+    ...logicalSides('inset', '', [topProperty, rightProperty, bottomProperty, leftProperty], splitInsetStartEnd),
+    ...logicalSides('border', '-width', borderWidthLonghands, splitBorderWidthStartEnd),
+    ...logicalSides('border', '-style', borderStyleLonghands, splitBorderStyleStartEnd),
+    ...logicalSides('border', '-color', borderColorLonghands, splitBorderColorStartEnd),
+    // `border-inline: 1px solid` gives both sides the same border.
+    { cssName: 'border-inline', longhands: [...borderSideLonghands(3), ...borderSideLonghands(1)], split: (value) => [...splitBorderSide(value), ...splitBorderSide(value)] },
+    { cssName: 'border-block', longhands: [...borderSideLonghands(0), ...borderSideLonghands(2)], split: (value) => [...splitBorderSide(value), ...splitBorderSide(value)] },
+    ...LOGICAL_SIDES.map(([side, i]) => ({ cssName: `border-${side}`, longhands: borderSideLonghands(i), split: splitBorderSide })),
+    // Corners are <block>-<inline>: start-start is top-left.
+    { cssName: 'border-start-start-radius', longhands: [borderTopLeftRadiusProperty], split: passThrough },
+    { cssName: 'border-start-end-radius', longhands: [borderTopRightRadiusProperty], split: passThrough },
+    { cssName: 'border-end-end-radius', longhands: [borderBottomRightRadiusProperty], split: passThrough },
+    { cssName: 'border-end-start-radius', longhands: [borderBottomLeftRadiusProperty], split: passThrough },
+    { cssName: 'inline-size', longhands: [widthProperty], split: passThrough },
+    { cssName: 'block-size', longhands: [heightProperty], split: passThrough },
+    { cssName: 'min-inline-size', longhands: [minWidthProperty], split: passThrough },
+    { cssName: 'min-block-size', longhands: [minHeightProperty], split: passThrough },
+    { cssName: 'max-inline-size', longhands: [maxWidthProperty], split: passThrough },
+    { cssName: 'max-block-size', longhands: [maxHeightProperty], split: passThrough },
+    { cssName: 'overflow-inline', longhands: [overflowXProperty], split: passThrough },
+    { cssName: 'overflow-block', longhands: [overflowYProperty], split: passThrough },
+];
+for (const entry of logicalShorthands) {
+    masonShorthandProperty(entry, function () {
+        const parts = entry.longhands.map((longhand) => cssText(this[longhand.name]));
+        // The axis shorthands read back as one value when both sides agree.
+        return entry.longhands.length === 2 && parts[0] === parts[1] ? parts[0] : parts.join(' ');
+    }).register(Style);
+}
+export const masonShorthands = [...coreShorthands, ...gridPlacementShorthands, borderStyleShorthand, borderShorthand, ...borderSideShorthands, ...logicalShorthands, overflowShorthand, maskShorthand, webkitMaskShorthand, maskBorderShorthand, webkitMaskBoxImageShorthand, gapShorthand, gridGapShorthand, flexFlowShorthand, flexShorthand];