@triniwiz/nativescript-masonkit 1.0.0-beta.108 → 1.0.0-beta.109

package/common.js

@@ -1,7 +1,7 @@
 var _a, _b, _c, _d;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { CustomLayoutView, Utils, View as NSView, getViewById, Property, widthProperty, heightProperty, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, textDecorationProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, backgroundColorProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, paddingBottomProperty, zIndexProperty, PseudoClassHandler } from '@nativescript/core';
+import { CustomLayoutView, Utils, View as NSView, getViewById, Property, widthProperty, heightProperty, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, textDecorationProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, backgroundColorProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, paddingBottomProperty, zIndexProperty, directionProperty, PseudoClassHandler, } from '@nativescript/core';
 import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
 // The per-corner radius and per-side colour longhands core's `border-radius`
 // / `border-color` shorthands expand into. They live in the styling module
@@ -9,11 +9,13 @@ import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowP
 import { fontInternalProperty, backgroundInternalProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
 import { _forceStyleUpdate } from './utils';
 import { borderRadiusCorners, composeBorderRadius, isCssLength, parseCornerRadius, toCamelCase } from './css-shorthands';
-import { Style, nodeHelper } from './style';
+import { Style, nodeHelper, cssLengthToDip } from './style';
+import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
+import { parseCssTransform } from './css-transform';
 import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderLeftProperty, borderTopProperty, borderRightProperty, borderBottomProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, installMasonSizeUnits, } from './properties';
-import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_, emptyTextNode_, breakRun_, anonymousText_, windowsFontSource_, hostsRuns_, needsAnonymousText_, borderRadiusCorners_, borderSideColors_, eventType_ } from './symbols';
+import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_, emptyTextNode_, breakRun_, anonymousText_, windowsFontSource_, hostsRuns_, needsAnonymousText_, borderRadiusCorners_, borderSideColors_, eventType_, runMember_, runsInline_, runsSettled_, blockified_ } from './symbols';
 import { Tree } from './tree';
-import { masonEngine } from './windows-panel-helpers';
+import { masonEngine, removeNativeChild } from './windows-panel-helpers';
 import { TextNode } from './text-node';
 import { compile } from './pseudo';
 import { frameworkRegistry } from './framework-registry';
@@ -22,72 +24,6 @@ function getViewStyle(view) {
     const ret = (__ANDROID__ ? view.get() : view.deref());
     return ret._styleHelper;
 }
-// move to cpp
-function parseCssTransformToMatrix(s) {
-    if (!s || s === 'none')
-        return null;
-    let tx = 0, ty = 0, rad = 0, sx = 1, sy = 1;
-    let found = false;
-    const re = /(\w+)\(([^)]*)\)/g;
-    let m;
-    while ((m = re.exec(s))) {
-        found = true;
-        const args = m[2].split(',').map((a) => parseFloat(a.trim()));
-        switch (m[1]) {
-            case 'translate':
-                tx += args[0] || 0;
-                ty += args[1] || 0;
-                break;
-            case 'translateX':
-                tx += args[0] || 0;
-                break;
-            case 'translateY':
-                ty += args[0] || 0;
-                break;
-            case 'rotate':
-            case 'rotateZ':
-                rad += ((args[0] || 0) * Math.PI) / 180;
-                break;
-            case 'scale':
-                sx *= args[0] != null ? args[0] : 1;
-                sy *= args[1] != null ? args[1] : args[0] != null ? args[0] : 1;
-                break;
-            case 'scaleX':
-                sx *= args[0] != null ? args[0] : 1;
-                break;
-            case 'scaleY':
-                sy *= args[0] != null ? args[0] : 1;
-                break;
-        }
-    }
-    if (!found)
-        return null;
-    const cos = Math.cos(rad), sin = Math.sin(rad);
-    // CSS matrix(a,b,c,d,e,f) of rotate*scale → WinUI Matrix(M11,M12,M21,M22,OffsetX,OffsetY).
-    return { m11: sx * cos, m12: sx * sin, m21: -sy * sin, m22: sy * cos, tx, ty };
-}
-// move to cpp
-function parseBoxShadow(s) {
-    if (!s || s === 'none')
-        return null;
-    let color = 'rgba(0,0,0,0.2)';
-    let rest = s;
-    const m = s.match(/rgba?\([^)]*\)|#[0-9a-fA-F]{3,8}/);
-    if (m) {
-        color = m[0];
-        rest = s.replace(m[0], ' ');
-    }
-    const nums = (rest.match(/-?\d*\.?\d+/g) || []).map((n) => parseFloat(n));
-    const ox = nums[0] || 0, oy = nums[1] || 0, blur = nums[2] || 0;
-    let argb = 0x33000000;
-    try {
-        argb = new Color(color).argb >>> 0;
-    }
-    catch (_) {
-        /* keep default */
-    }
-    return { ox, oy, blur, argb };
-}
 function getWeakRefValue(value) {
     if (!value)
         return null;
@@ -117,6 +53,10 @@ function masonNativeEventName(eventName) {
         case 'beforeinput':
         case 'input':
         case 'change':
+        case 'cancel':
+        case 'compositionstart':
+        case 'compositionupdate':
+        case 'compositionend':
         case 'focus':
         case 'blur':
         case 'keydown':
@@ -129,7 +69,7 @@ function findOwnerForNativeView(owner, nativeView) {
     if (!owner || !nativeView)
         return null;
     const ownNativeView = nativeViewFor(owner);
-    if (ownNativeView === nativeView)
+    if (ownNativeView === nativeView || owner?.[native_] === nativeView)
         return owner;
     const children = owner._children ?? owner._viewChildren;
     if (!children)
@@ -209,6 +149,44 @@ function clearWindowsActive(view) {
     for (const state of WINDOWS_ACTIVE_STATES)
         view._removeVisualState(state);
 }
+function onWindowsHoverEnter(args) {
+    args.object._addVisualState('hover');
+}
+function onWindowsHoverLeave(args) {
+    args.object._removeVisualState('hover');
+}
+function onWindowsFocus() {
+    this._addVisualState('focus');
+}
+function onWindowsBlur() {
+    this._removeVisualState('focus');
+}
+const windowsRunCounts = new WeakMap();
+function windowsNativeOf(child) {
+    return child?.nativeViewProtected ?? child?._view;
+}
+function windowsBreakRun(child) {
+    let run = child[breakRun_];
+    if (!run) {
+        run = new NativeScript.Mason.TextNode();
+        run.SetBreak(true);
+        child[breakRun_] = run;
+    }
+    return run;
+}
+export function windowsMemberKind(child) {
+    if (child[textNode_])
+        return 'run';
+    if (child[isPlaceholder_])
+        return 'break';
+    if (child[isText_] && !(child instanceof ButtonBase)) {
+        const style = child._styleHelper;
+        const display = style?.display;
+        if ((display === 'inline' || display === 'none') && !style.hasBoxStyle)
+            return 'text';
+    }
+    return 'box';
+}
 const TEARDOWN_SLICE_MS = 8;
 // Reading the clock costs more than a teardown on some devices.
 const TEARDOWNS_PER_CLOCK_READ = 16;
@@ -225,6 +203,10 @@ function markClimbed(root) {
 function climbedThisTurn(root) {
     return !!climbedRoots?.has(root) && !!root.isLayoutRequested;
 }
+let windowsInnerHTML;
+export function setWindowsInnerHTML(build) {
+    windowsInnerHTML = build;
+}
 export class ViewBase extends CustomLayoutView {
     _tearDownUI(force) {
         if ((__ANDROID__ || __APPLE__ || __WINDOWS__) && !force && !this.reusable && this._context && this.nativeViewProtected) {
@@ -332,6 +314,7 @@ export class ViewBase extends CustomLayoutView {
          * lays out, and Mason views listening to layoutChanged). The pass skips subtrees where it's 0.
          */
         this._masonLayoutWork = 0;
+        this._windowsActiveId = 0;
         this._masonClimbTurn = null;
         // `width`/`height` are core CssAnimationProperties whose stylesheet accessor
         // is non-configurable, so units Mason understands but core does not (`vh`,
@@ -342,6 +325,8 @@ export class ViewBase extends CustomLayoutView {
         }
     }
     get innerHTML() {
+        if (__WINDOWS__)
+            return this._windowsInnerHTML ?? '';
         //@ts-ignore
         const nativeView = this._view;
         if (__ANDROID__) {
@@ -357,6 +342,11 @@ export class ViewBase extends CustomLayoutView {
         return '';
     }
     set innerHTML(value) {
+        if (__WINDOWS__) {
+            this._windowsInnerHTML = value ?? '';
+            windowsInnerHTML?.(this, value ?? '');
+            return;
+        }
         //@ts-ignore
         const nativeView = this._view;
         if (__ANDROID__) {
@@ -399,6 +389,9 @@ export class ViewBase extends CustomLayoutView {
                 nativeHit = hitTest.call(nativeView, x, y);
             }
         }
+        else if (__WINDOWS__ && typeof masonEngine().ElementFromPoint === 'function') {
+            nativeHit = masonEngine().ElementFromPoint(nativeView, x, y);
+        }
         if (!nativeHit)
             return null;
         const known = nativeOwnerFor(nativeHit);
@@ -444,7 +437,21 @@ export class ViewBase extends CustomLayoutView {
                 callback['mason:event:id'] = id;
             }
             if (__WINDOWS__) {
-                if (arg === 'click' || arg === 'tap') {
+                if (typeof masonEngine().AddEventListener === 'function') {
+                    const ref = new WeakRef(this);
+                    const listener = globalThis.NSWinRT.asDelegate('NativeScript.Mason.EventListener', (event) => {
+                        const owner = ref.deref();
+                        if (!owner)
+                            return;
+                        const ret = wrapNativeEvent(arg);
+                        ret[native_] = event;
+                        ret._target = owner;
+                        callback.call(thisArg || owner, ret);
+                    });
+                    callback['mason:event:id'] = masonEngine().AddEventListener(this._view, arg, listener);
+                    callback['mason:event:listener'] = listener;
+                }
+                else if (arg === 'click' || arg === 'tap') {
                     try {
                         const NSWinRT_ = globalThis.NSWinRT;
                         const MUX = globalThis.Microsoft;
@@ -519,7 +526,12 @@ export class ViewBase extends CustomLayoutView {
                 }
             }
             if (__WINDOWS__) {
-                if (id && (arg === 'click' || arg === 'tap')) {
+                if (id && callback['mason:event:listener'] && !callback['mason:event:tapped']) {
+                    masonEngine().RemoveEventListener(this._view, arg, id);
+                    callback['mason:event:id'] = undefined;
+                    callback['mason:event:listener'] = undefined;
+                }
+                else if (id && (arg === 'click' || arg === 'tap')) {
                     try {
                         const view = this._view;
                         const tappedEvent = callback['mason:event:tapped'];
@@ -650,6 +662,17 @@ export class ViewBase extends CustomLayoutView {
         const styles = compile(this);
         //@ts-ignore
         this._applyPseudoClassStyles('hover', this._view, styles);
+        if (__WINDOWS__) {
+            if (subscribe) {
+                this.on('mouseEnter', onWindowsHoverEnter);
+                this.on('mouseLeave', onWindowsHoverLeave);
+            }
+            else {
+                this.off('mouseEnter', onWindowsHoverEnter);
+                this.off('mouseLeave', onWindowsHoverLeave);
+                this._removeVisualState('hover');
+            }
+        }
     }
     _handler(subscribe) {
         const styles = compile(this);
@@ -665,6 +688,7 @@ export class ViewBase extends CustomLayoutView {
                 this.off('mouseLeave', onWindowsActiveLeave);
                 clearWindowsActive(this);
             }
+            this._windowsListenActive(subscribe);
             // A button dims while held only when it has no :active style of its own.
             // @ts-ignore
             const view = this._view;
@@ -672,6 +696,33 @@ export class ViewBase extends CustomLayoutView {
                 view.DimsWhenPressed = !subscribe;
         }
     }
+    // Inline elements a Text draws get no pointer events of their own; the Text reports their presses.
+    _windowsListenActive(on) {
+        const view = this._view;
+        if (!view || typeof masonEngine().AddEventListener !== 'function')
+            return;
+        if (on && !this._windowsActiveId) {
+            const ref = new WeakRef(this);
+            this._windowsActiveListener = globalThis.NSWinRT.asDelegate('NativeScript.Mason.EventListener', (event) => {
+                const owner = ref.deref();
+                if (!owner)
+                    return;
+                if (event.Data === '1') {
+                    for (const state of WINDOWS_ACTIVE_STATES)
+                        owner._addVisualState(state);
+                }
+                else {
+                    clearWindowsActive(owner);
+                }
+            });
+            this._windowsActiveId = masonEngine().AddEventListener(view, 'mason:active', this._windowsActiveListener);
+        }
+        else if (!on && this._windowsActiveId) {
+            masonEngine().RemoveEventListener(view, 'mason:active', this._windowsActiveId);
+            this._windowsActiveId = 0;
+            this._windowsActiveListener = undefined;
+        }
+    }
     _disableHandler(subscribe) {
         const styles = compile(this);
         //@ts-ignore
@@ -681,6 +732,17 @@ export class ViewBase extends CustomLayoutView {
         const styles = compile(this);
         //@ts-ignore
         this._applyPseudoClassStyles('focus', this._view, styles);
+        if (__WINDOWS__) {
+            if (subscribe) {
+                this.on('focus', onWindowsFocus, this);
+                this.on('blur', onWindowsBlur, this);
+            }
+            else {
+                this.off('focus', onWindowsFocus, this);
+                this.off('blur', onWindowsBlur, this);
+                this._removeVisualState('focus');
+            }
+        }
     }
     _blurHandler(subscribe) {
         const styles = compile(this);
@@ -913,13 +975,13 @@ export class ViewBase extends CustomLayoutView {
                 //@ts-ignore
                 this._view.mason_append(child._view);
             }
-            if (__WINDOWS__) {
-                this._windowsAttachPlaceholder(child, -1);
-            }
             if (this[isText_]) {
                 child[isTextChild_] = true;
             }
             this._children.push(child);
+            if (__WINDOWS__) {
+                this._windowsAttachPlaceholder(child, -1);
+            }
             return;
         }
         if (child instanceof NSView) {
@@ -1007,9 +1069,9 @@ export class ViewBase extends CustomLayoutView {
                 group = anonymous;
                 continue;
             }
-            group = undefined;
             if (c[textNode_] || c instanceof TextNode || text_ in c || (c[isPlaceholder_] && c[native_]) || c._isMasonChild) {
                 index++;
+                group = undefined;
             }
         }
         return index;
@@ -1048,9 +1110,6 @@ export class ViewBase extends CustomLayoutView {
     }
     insertChild(child, atIndex) {
         this._invalidateAttachCursor();
-        if (__WINDOWS__) {
-            this._windowsSplitAnonymousText(atIndex);
-        }
         if (child && child[isPlaceholder_] && child._view) {
             const nativeIndex = this._nativeIndexFor(atIndex);
             this._children.splice(atIndex, 0, child);
@@ -1144,6 +1203,7 @@ export class ViewBase extends CustomLayoutView {
                 }
                 if (__WINDOWS__) {
                     this._windowsDetachPlaceholder(child);
+                    this._windowsMergeAt(index);
                 }
                 child[isTextChild_] = false;
                 this.requestLayout?.();
@@ -1164,7 +1224,6 @@ export class ViewBase extends CustomLayoutView {
                 // Drop the proxy binding so a later re-adopt re-installs cleanly.
                 child[textNodeProxied_] = false;
                 child[textNode_] = undefined;
-                this._syncTextRunLayout();
                 this.requestLayout?.();
                 return;
             }
@@ -1173,6 +1232,9 @@ export class ViewBase extends CustomLayoutView {
         if (index > -1) {
             this._children.splice(index, 1);
             this._removeView(child);
+            if (__WINDOWS__) {
+                this._windowsMergeAt(index);
+            }
         }
     }
     // Remove the native node directly when supported (no index drift), falling
@@ -1203,33 +1265,31 @@ export class ViewBase extends CustomLayoutView {
             if (typeof view.RemoveRun === 'function')
                 view.RemoveRun(node);
             else
-                this._windowsRemoveAnonymousRun(index);
+                this._windowsRemoveMember(this._children[index]);
         }
     }
-    // Windows text lays out TextNode runs, not child panels, so a placeholder inside one
-    // becomes a break run; any other parent hosts its native panel.
+    // Windows text lays out TextNode runs, not child panels, so a placeholder inside one, or inside a
+    // block's inline run, becomes a break run; any other parent hosts its native panel.
     _windowsAttachPlaceholder(child, index) {
         const view = this._view;
         if (!view)
             return;
         if (this._windowsHostsRuns()) {
-            let run = child[breakRun_];
-            if (!run) {
-                run = new NativeScript.Mason.TextNode();
-                run.SetBreak(true);
-                child[breakRun_] = run;
-            }
-            view.SetRun(run, index);
+            view.SetRun(windowsBreakRun(child), index);
         }
-        else {
-            masonEngine().ReparentChild(view, child._view, index);
+        else if (!this._windowsAttach(child)) {
+            const slot = this._children.indexOf(child);
+            masonEngine().ReparentChild(view, child._view, slot > -1 ? this._nativeIndexFor(slot) : index);
         }
     }
     _windowsDetachPlaceholder(child) {
         const view = this._view;
         if (!view)
             return;
-        if (child[breakRun_] && typeof view.RemoveRun === 'function') {
+        if (child[anonymousText_]) {
+            this._windowsRemoveMember(child);
+        }
+        else if (child[breakRun_] && typeof view.RemoveRun === 'function') {
             view.RemoveRun(child[breakRun_]);
         }
         else {
@@ -1249,6 +1309,12 @@ export class ViewBase extends CustomLayoutView {
         }
         if (__WINDOWS__) {
             this._forEachAnonymousText((anonymous) => masonEngine().RemoveChild(this._view, anonymous));
+            for (const c of this._children) {
+                if (!c)
+                    continue;
+                c[anonymousText_] = undefined;
+                c[runMember_] = undefined;
+            }
         }
         this._children.splice(0);
         this._invalidateAttachCursor();
@@ -1261,6 +1327,13 @@ export class ViewBase extends CustomLayoutView {
             style.zIndex = value;
         }
     }
+    [directionProperty.setNative](value) {
+        // @ts-ignore
+        super[directionProperty.setNative]?.(value);
+        const style = this._styleHelper;
+        if (style)
+            style.direction = value === 'rtl' || value === 'ltr' ? value : 'inherit';
+    }
     set verticalAlign(value) {
         this.style.verticalAlign = value;
     }
@@ -1471,17 +1544,22 @@ export class ViewBase extends CustomLayoutView {
         const anonymous = this._windowsNeedsAnonymousText();
         switch (operation.type) {
             case 'add':
-                if (anonymous)
-                    entry[anonymousText_] = this._windowsAddAnonymousRun(textNode, this._children.length, false);
-                else
-                    this._nativeAddChild(textNode, this._children.length);
+                if (anonymous) {
+                    //@ts-ignore
+                    this._children.push({ ...entry, [textNodeIndex_]: this._children.length });
+                    this._windowsInsertMember(this._children.length - 1, this._windowsRunsInline());
+                    break;
+                }
+                this._nativeAddChild(textNode, this._children.length);
                 //@ts-ignore
                 this._children.push({ ...entry, [textNodeIndex_]: this._children.length });
                 break;
             case 'replace':
-                if (anonymous)
-                    entry[anonymousText_] = this._windowsAddAnonymousRun(textNode, operation.index, true);
-                else if (!__WINDOWS__ || this._children[operation.index]?.[textNode_] !== textNode)
+                if (anonymous) {
+                    this._windowsReplaceRun(operation.index, entry);
+                    break;
+                }
+                if (!__WINDOWS__ || this._children[operation.index]?.[textNode_] !== textNode)
                     this._nativeReplaceChild(textNode, operation.index);
                 this._setOrPushChild(operation.index, entry);
                 break;
@@ -1490,15 +1568,16 @@ export class ViewBase extends CustomLayoutView {
                 // lag behind it (elements attach lazily on `loaded`), so map it the
                 // same way `insertChild` does or the run lands past the end.
                 const index = Math.max(0, Math.min(operation.index ?? this._children.length, this._children.length));
-                if (anonymous)
-                    entry[anonymousText_] = this._windowsAddAnonymousRun(textNode, index, false);
-                else
-                    this._nativeAddChild(textNode, this._nativeIndexFor(index));
+                if (anonymous) {
+                    this._spliceOrPushChild(index, entry);
+                    this._windowsInsertMember(index, this._windowsRunsInline());
+                    break;
+                }
+                this._nativeAddChild(textNode, this._nativeIndexFor(index));
                 this._spliceOrPushChild(index, entry);
                 break;
             }
         }
-        this._syncTextRunLayout();
     }
     // Only Text lays out runs on Windows, so any other container puts consecutive runs in one
     // anonymous Text, as Android's getOrCreateAnonymousTextContainer does.
@@ -1525,71 +1604,399 @@ export class ViewBase extends CustomLayoutView {
         }
         return hosts;
     }
-    _windowsAddAnonymousRun(textNode, slot, replace) {
+    // A block container's consecutive inline-level children share one anonymous Text, CSS's anonymous
+    // block box; a flex or grid container groups only consecutive text.
+    _windowsRunsInline() {
+        if (this[runsSettled_] !== true)
+            return false;
+        const display = this._styleHelper?.display;
+        return display === 'block' || display === 'inline-block';
+    }
+    // A container's display arrives with its CSS, after its children attach, so runs are grouped once the turn ends.
+    _windowsScheduleSettle() {
+        if (this[runsSettled_] !== undefined)
+            return;
+        this[runsSettled_] = false;
+        queueMicrotask(() => this._windowsSettleRuns());
+    }
+    _windowsSettleRuns() {
+        this[runsSettled_] = true;
+        const inline = this._windowsRunsInline();
         const children = this._children;
-        const old = replace ? children[slot] : undefined;
-        const current = old?.[anonymousText_];
-        if (current) {
-            if (old[textNode_] !== textNode) {
-                const at = this._windowsRunsBefore(slot, current);
-                current.RemoveRun(old[textNode_]);
-                current.SetRun(textNode, at);
-            }
-            return current;
-        }
-        const prev = children[slot - 1]?.[anonymousText_];
-        if (prev) {
-            prev.SetRun(textNode, this._windowsRunsBefore(slot, prev));
-            return prev;
-        }
-        const next = children[replace ? slot + 1 : slot]?.[anonymousText_];
-        if (next) {
-            next.SetRun(textNode, 0);
-            return next;
-        }
-        const anonymous = this._windowsCreateAnonymousText(this._nativeIndexFor(slot));
-        anonymous.SetRun(textNode, 0);
-        return anonymous;
+        for (const c of children)
+            if (c?._isMasonChild)
+                this._windowsBlockify(c, inline);
+        const regroup = children.some((c, i) => c && !c[textNode_] && (c[anonymousText_] || c[runMember_] === 'solo' || ((c._isMasonChild || c[isPlaceholder_]) && this._windowsJoinsAt(i, inline))));
+        if (regroup)
+            this._windowsReflow(0, true);
+        this[runsInline_] = inline;
+    }
+    // Undefined for display: none, which stays in an open run.
+    _windowsJoins(c, inline) {
+        if (!c)
+            return false;
+        if (c[textNode_])
+            return true;
+        if (!inline)
+            return false;
+        if (c[isPlaceholder_])
+            return true;
+        if (!c[isMasonView_])
+            return false;
+        const style = c._styleHelper;
+        if (!style)
+            return false;
+        const display = style.display;
+        if (display === 'none')
+            return undefined;
+        if (display !== 'inline' && display !== 'inline-block' && display !== 'inline-flex' && display !== 'inline-grid')
+            return false;
+        const position = style.position;
+        if (position === 'absolute' || position === 'fixed')
+            return false;
+        return style.float === 'none';
     }
-    _windowsRunsBefore(slot, anonymous) {
-        let n = 0;
-        for (let i = slot - 1; i >= 0 && this._children[i]?.[anonymousText_] === anonymous; i--)
-            n++;
-        return n;
+    _windowsJoinsAt(slot, inline) {
+        const joins = this._windowsJoins(this._children[slot], inline);
+        return joins === undefined ? slot > 0 && this._windowsJoinsAt(slot - 1, inline) : joins;
     }
-    _windowsCreateAnonymousText(nativeIndex) {
+    // The anonymous Text or lone element holding the run on each side of `slot`, and whether either is lone.
+    _windowsRunsAround(slot, inline) {
+        const children = this._children;
+        let left;
+        let right;
+        let solo = false;
+        for (let i = slot - 1; i >= 0; i--) {
+            const c = children[i];
+            left = c?.[anonymousText_] ?? (c?.[runMember_] === 'solo' ? c : undefined);
+            if (left) {
+                solo = left === c && !c[anonymousText_];
+                break;
+            }
+            if (!this._windowsJoinsAt(i, inline))
+                break;
+        }
+        for (let i = slot + 1; i < children.length; i++) {
+            const c = children[i];
+            right = c?.[anonymousText_] ?? (c?.[runMember_] === 'solo' ? c : undefined);
+            if (right) {
+                solo = solo || (right === c && !c[anonymousText_]);
+                break;
+            }
+            if (!this._windowsJoinsAt(i, inline))
+                break;
+        }
+        return [left, right, solo];
+    }
+    _windowsAttach(child) {
+        if (!__WINDOWS__ || !this._windowsNeedsAnonymousText())
+            return false;
+        const slot = this._children.indexOf(child);
+        if (slot < 0)
+            return false;
+        const settled = this[runsSettled_] === true;
+        if (!settled)
+            this._windowsScheduleSettle();
+        const inline = this._windowsRunsInline();
+        if (settled)
+            this._windowsBlockify(child, inline);
+        if (this._windowsJoinsAt(slot, inline)) {
+            this._windowsInsertMember(slot, inline, child);
+            if (!child[anonymousText_])
+                return false;
+            child._isMasonChild = true;
+            return true;
+        }
+        const [left, right] = this._windowsRunsAround(slot, inline);
+        if (left && left === right)
+            this._windowsReflow(slot);
+        return false;
+    }
+    // A run of one element needs no anonymous Text: the element is laid out as it is.
+    _windowsInsertMember(slot, inline, attaching) {
+        this._windowsScheduleSettle();
+        const children = this._children;
+        const c = children[slot];
+        const [left, right, solo] = this._windowsRunsAround(slot, inline);
+        if (solo || (left && right && left !== right)) {
+            this._windowsReflow(slot, false, attaching);
+            return;
+        }
+        let anonymous = left ?? right;
+        if (!anonymous) {
+            if (c[isMasonView_] && !c[isPlaceholder_]) {
+                c[runMember_] = 'solo';
+                return;
+            }
+            anonymous = this._windowsCreateAnonymousText();
+            this._windowsPlaceAnonymous(anonymous, slot);
+        }
+        const index = right ? this._windowsMemberIndex(slot, anonymous, inline) : (windowsRunCounts.get(anonymous) ?? 0);
+        this._windowsAddMember(anonymous, c, index);
+    }
+    _windowsMemberIndex(slot, anonymous, inline) {
+        const children = this._children;
+        let index = 0;
+        for (let i = slot - 1; i >= 0; i--) {
+            const owner = children[i]?.[anonymousText_];
+            if (owner === anonymous)
+                index++;
+            else if (owner || !this._windowsJoinsAt(i, inline))
+                break;
+        }
+        return index;
+    }
+    _windowsAddMember(anonymous, c, index) {
+        const kind = windowsMemberKind(c);
+        switch (kind) {
+            case 'run':
+                anonymous.SetRun(c[textNode_], index);
+                break;
+            case 'break':
+                anonymous.SetRun(windowsBreakRun(c), index);
+                break;
+            case 'text':
+                if (c._isMasonChild)
+                    masonEngine().RemoveChild(this._view, c._view);
+                anonymous.SetInlineText(c._view, index);
+                break;
+            default:
+                if (c._isMasonChild)
+                    masonEngine().RemoveChild(this._view, windowsNativeOf(c));
+                anonymous.SetInlineBox(windowsNativeOf(c), index);
+                break;
+        }
+        c[anonymousText_] = anonymous;
+        c[runMember_] = kind;
+        windowsRunCounts.set(anonymous, (windowsRunCounts.get(anonymous) ?? 0) + 1);
+    }
+    _windowsRemoveMember(c) {
+        const anonymous = c?.[anonymousText_];
+        if (!anonymous)
+            return;
+        switch (c[runMember_]) {
+            case 'run':
+                anonymous.RemoveRun(c[textNode_]);
+                break;
+            case 'break':
+                anonymous.RemoveRun(c[breakRun_]);
+                break;
+            case 'text':
+                anonymous.RemoveInlineText(c._view);
+                break;
+            default:
+                anonymous.RemoveInlineBox(windowsNativeOf(c));
+                break;
+        }
+        c[anonymousText_] = undefined;
+        c[runMember_] = undefined;
+        const count = (windowsRunCounts.get(anonymous) ?? 1) - 1;
+        windowsRunCounts.set(anonymous, count);
+        if (count <= 0)
+            masonEngine().RemoveChild(this._view, anonymous);
+    }
+    _windowsReplaceRun(slot, entry) {
+        const old = this._children[slot];
+        const anonymous = old?.[anonymousText_];
+        if (anonymous && old[runMember_] === 'run') {
+            if (old[textNode_] !== entry[textNode_]) {
+                const index = this._windowsMemberIndex(slot, anonymous, this._windowsRunsInline());
+                anonymous.RemoveRun(old[textNode_]);
+                anonymous.SetRun(entry[textNode_], index);
+            }
+            entry[anonymousText_] = anonymous;
+            entry[runMember_] = 'run';
+            this._setOrPushChild(slot, entry);
+            return;
+        }
+        if (old)
+            this._windowsRemoveMember(old);
+        this._setOrPushChild(slot, entry);
+        this._windowsInsertMember(Math.min(slot, this._children.length - 1), this._windowsRunsInline());
+    }
+    _windowsCreateAnonymousText() {
         const anonymous = new NativeScript.Mason.Text();
+        anonymous.IsAnonymous = true;
         // @ts-ignore
-        this._styleHelper?.copyTextStyleTo(anonymous);
+        this._styleHelper?.copyTextStyleTo(anonymous, -1, -1, -1, -1, true);
         const font = this[windowsFontSource_];
         if (font)
             anonymous.SetFontFamily(font);
-        masonEngine().ReparentChild(this._view, anonymous, nativeIndex);
         return anonymous;
     }
-    _windowsRemoveAnonymousRun(index) {
+    _windowsPlaceAnonymous(anonymous, slot) {
+        masonEngine().ReparentChild(this._view, anonymous, this._nativeIndexFor(slot));
+    }
+    // `attaching` counts as attached; the caller adds it to the panel if it stays a direct child.
+    _windowsReflow(slot, all = false, attaching) {
         const children = this._children;
-        const anonymous = children[index]?.[anonymousText_];
-        if (!anonymous)
+        const view = this._view;
+        if (!view || children.length === 0)
             return;
-        anonymous.RemoveRun(children[index][textNode_]);
-        if (children[index - 1]?.[anonymousText_] !== anonymous && children[index + 1]?.[anonymousText_] !== anonymous) {
-            masonEngine().RemoveChild(this._view, anonymous);
+        const inline = this._windowsRunsInline();
+        let a = Math.max(0, Math.min(slot, children.length - 1));
+        let b = a;
+        if (all) {
+            a = 0;
+            b = children.length - 1;
+            for (const c of children)
+                if (c?._isMasonChild)
+                    this._windowsBlockify(c, inline);
+        }
+        else {
+            const inRegion = (i) => !!children[i]?.[anonymousText_] || this._windowsJoinsAt(i, inline);
+            while (a > 0 && inRegion(a - 1))
+                a--;
+            while (b < children.length - 1 && inRegion(b + 1))
+                b++;
+        }
+        // Every member of an anonymous Text being regrouped is regrouped with it.
+        const pool = [];
+        for (let grew = true; grew;) {
+            grew = false;
+            for (let i = a; i <= b; i++) {
+                const anonymous = children[i]?.[anonymousText_];
+                if (anonymous && pool.indexOf(anonymous) < 0)
+                    pool.push(anonymous);
+            }
+            for (let i = 0; i < children.length; i++) {
+                if ((i < a || i > b) && pool.indexOf(children[i]?.[anonymousText_]) > -1) {
+                    a = Math.min(a, i);
+                    b = Math.max(b, i);
+                    grew = true;
+                }
+            }
         }
+        const members = new Set();
+        for (let i = a; i <= b; i++)
+            if (children[i]?.[anonymousText_])
+                members.add(children[i]);
+        for (const anonymous of pool) {
+            anonymous.ClearRuns();
+            windowsRunCounts.set(anonymous, 0);
+        }
+        for (let i = a; i <= b; i++) {
+            const c = children[i];
+            if (!c)
+                continue;
+            c[anonymousText_] = undefined;
+            c[runMember_] = undefined;
+        }
+        const isElement = (c) => !!c[isMasonView_] && !c[isPlaceholder_];
+        const groups = [];
+        let run = null;
+        for (let i = a; i <= b; i++) {
+            const c = children[i];
+            if (!c)
+                continue;
+            if (this._windowsJoinsAt(i, inline)) {
+                if (isElement(c) && c !== attaching && !c._isMasonChild)
+                    continue;
+                if (!run)
+                    groups.push((run = []));
+                run.push(i);
+            }
+            else {
+                run = null;
+                groups.push([-1 - i]);
+            }
+        }
+        for (const group of groups) {
+            const first = group[0] < 0 ? -1 - group[0] : group[0];
+            const c = children[first];
+            if (group[0] < 0 || (group.length === 1 && isElement(c))) {
+                if (group[0] >= 0)
+                    c[runMember_] = 'solo';
+                if (c === attaching || !members.has(c))
+                    continue;
+                if (isElement(c) && c._isMasonChild)
+                    masonEngine().ReparentChild(view, windowsNativeOf(c), this._nativeIndexFor(first));
+                else if (c[isPlaceholder_] && c._view)
+                    masonEngine().ReparentChild(view, c._view, this._nativeIndexFor(first));
+                continue;
+            }
+            const anonymous = pool.shift() ?? this._windowsCreateAnonymousText();
+            this._windowsPlaceAnonymous(anonymous, first);
+            group.forEach((i, k) => this._windowsAddMember(anonymous, children[i], k));
+        }
+        for (const anonymous of pool)
+            masonEngine().RemoveChild(view, anonymous);
+        this[runsInline_] = inline;
     }
-    // An element landing between two runs of one anonymous Text splits it, so the runs after it
-    // render after it.
-    _windowsSplitAnonymousText(slot) {
-        const children = this._children;
-        const anonymous = children[slot - 1]?.[anonymousText_];
-        if (!anonymous || children[slot]?.[anonymousText_] !== anonymous)
+    _windowsMergeAt(slot) {
+        if (!this._windowsNeedsAnonymousText() || this._children.length === 0)
             return;
-        const tail = this._windowsCreateAnonymousText(this._nativeIndexFor(slot));
-        for (let i = slot, k = 0; children[i]?.[anonymousText_] === anonymous; i++, k++) {
-            anonymous.RemoveRun(children[i][textNode_]);
-            tail.SetRun(children[i][textNode_], k);
-            children[i][anonymousText_] = tail;
+        const inline = this._windowsRunsInline();
+        const [left] = this._windowsRunsAround(slot, inline);
+        const [, right] = this._windowsRunsAround(slot - 1, inline);
+        if (left && right && left !== right)
+            this._windowsReflow(Math.max(0, slot - 1));
+    }
+    _windowsFlowTypeChanged() {
+        if (this[runsSettled_] === true && this._windowsNeedsAnonymousText() && this._windowsRunsInline() !== this[runsInline_]) {
+            this._windowsSettleRuns();
         }
+        this.parent?._windowsChildFlowChanged?.(this);
+    }
+    _windowsChildFlowChanged(child) {
+        if (!child?._isMasonChild)
+            return;
+        if (!this._windowsHostsRuns() && this[runsSettled_] !== true)
+            return;
+        if (this._windowsHostsRuns()) {
+            if (child[runMember_] && child[runMember_] !== windowsMemberKind(child))
+                this._windowsRehost?.(child);
+            return;
+        }
+        if (!this._windowsNeedsAnonymousText())
+            return;
+        const inline = this._windowsRunsInline();
+        if (child[blockified_] && child._styleHelper?.display !== 'block')
+            child[blockified_] = false;
+        this._windowsBlockify(child, inline);
+        const member = child[runMember_];
+        let joins = this._windowsJoins(child, inline);
+        let slot = -1;
+        if (joins === undefined) {
+            slot = this._children.indexOf(child);
+            joins = slot > 0 && this._windowsJoinsAt(slot - 1, inline);
+        }
+        if (member === 'solo') {
+            if (!joins)
+                child[runMember_] = undefined;
+            return;
+        }
+        if (joins === !!member && (!member || member === windowsMemberKind(child)))
+            return;
+        if (slot < 0)
+            slot = this._children.indexOf(child);
+        if (slot > -1)
+            this._windowsReflow(slot);
+    }
+    // CSS blockifies flex and grid items.
+    _windowsBlockify(child, inline) {
+        if (!child?.[isText_] || child instanceof ButtonBase)
+            return;
+        const style = child._styleHelper;
+        if (!style)
+            return;
+        if (!inline && !child[blockified_] && style.display === 'inline') {
+            child[blockified_] = true;
+            style.display = 'block';
+        }
+        else if (inline && child[blockified_]) {
+            child[blockified_] = false;
+            if (style.display === 'block')
+                style.display = 'inline';
+        }
+    }
+    _windowsDetachChild(child) {
+        if (child?.[anonymousText_])
+            this._windowsRemoveMember(child);
+        else
+            removeNativeChild(this._view, child);
+        if (child)
+            child[runMember_] = undefined;
     }
     _forEachAnonymousText(fn) {
         let last;
@@ -1600,11 +2007,11 @@ export class ViewBase extends CustomLayoutView {
             last = anonymous;
         }
     }
-    _windowsSyncAnonymousText() {
+    _windowsSyncAnonymousText(d0, d1, d2, d3) {
         // @ts-ignore
         const style = this._styleHelper;
         if (style)
-            this._forEachAnonymousText((anonymous) => style.copyTextStyleTo(anonymous));
+            this._forEachAnonymousText((anonymous) => style.copyTextStyleTo(anonymous, d0, d1, d2, d3));
     }
     [fontInternalProperty.setNative](value) {
         if (!__WINDOWS__)
@@ -1613,20 +2020,6 @@ export class ViewBase extends CustomLayoutView {
         this[windowsFontSource_] = source;
         this._forEachAnonymousText((anonymous) => anonymous.SetFontFamily(source));
     }
-    _syncTextRunLayout() {
-        if (!__WINDOWS__ || !this._windowsHostsRuns())
-            return;
-        // @ts-ignore
-        const sh = this._styleHelper;
-        if (!sh || sh.display === 'block')
-            return;
-        try {
-            sh.display = 'block';
-        }
-        catch (_) {
-            // empty
-        }
-    }
     // -- Text setter: framework adapter driven --
     [textProperty.setNative](value) {
         const adapter = frameworkRegistry.find(this);
@@ -2016,6 +2409,12 @@ export class ViewBase extends CustomLayoutView {
             // @ts-ignore
             this.nativeView.style.applyListStyleType(String(value));
         }
+        else if (__WINDOWS__) {
+            const style = this._styleHelper;
+            const type = String(value).trim().toLowerCase();
+            if (style && (type === 'none' || type === 'disc' || type === 'circle' || type === 'square' || type === 'decimal'))
+                style.listStyleType = type;
+        }
     }
     // @ts-ignore
     [listStylePositionProperty.setNative](value) {
@@ -2027,6 +2426,12 @@ export class ViewBase extends CustomLayoutView {
             // @ts-ignore
             this.nativeView.style.applyListStylePosition(String(value));
         }
+        else if (__WINDOWS__) {
+            const style = this._styleHelper;
+            const position = String(value).trim().toLowerCase();
+            if (style && (position === 'inside' || position === 'outside'))
+                style.listStylePosition = position;
+        }
     }
     get boxSizing() {
         return this.style.boxSizing;
@@ -2729,15 +3134,21 @@ export class ViewBase extends CustomLayoutView {
             // @ts-ignore
             style.boxShadow = value;
             if (__WINDOWS__) {
-                // box-shadow isn't a Mason buffer prop — render it as a Composition DropShadow on the element
-                // (masked to its rounded-rect shape, re-applied on resize). The corner radius is read natively.
                 const nv = this.nativeViewProtected ?? this._view;
                 try {
-                    const sh = parseBoxShadow(typeof value === 'string' ? value : '');
-                    if (!sh)
-                        NativeScript.Mason.Css.ClearShadow(nv);
-                    else
-                        NativeScript.Mason.Css.ApplyShadow(nv, sh.ox, sh.oy, sh.blur, sh.argb, 0);
+                    const shadows = parseBoxShadows(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasis()));
+                    const current = style.color >>> 0 || 0xff000000;
+                    const spec = encodeBoxShadows(shadows, (color) => {
+                        if (!color || color.toLowerCase() === 'currentcolor')
+                            return current;
+                        try {
+                            return new Color(color).argb >>> 0;
+                        }
+                        catch (_) {
+                            return current;
+                        }
+                    });
+                    NativeScript.Mason.Css.SetBoxShadow(nv, spec);
                 }
                 catch (_) { }
             }
@@ -2755,11 +3166,14 @@ export class ViewBase extends CustomLayoutView {
                 // doesn't drive transforms on). Parse the CSS string to a matrix and set RenderTransform.
                 const nv = this.nativeViewProtected ?? this._view;
                 try {
-                    const mtx = parseCssTransformToMatrix(typeof value === 'string' ? value : '');
-                    if (!mtx)
+                    const size = { width: nv?.ActualWidth ?? 0, height: nv?.ActualHeight ?? 0 };
+                    const m = parseCssTransform(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasis()), size);
+                    if (!m)
                         NativeScript.Mason.Css.ClearTransform(nv);
-                    else
-                        NativeScript.Mason.Css.ApplyTransform(nv, mtx.m11, mtx.m12, mtx.m21, mtx.m22, mtx.tx, mtx.ty);
+                    else {
+                        NativeScript.Mason.Css.ApplyTransform(nv, m[0], m[1], m[2], m[3], m[4], m[5]);
+                        nv.RenderTransformOrigin = { X: this.originX ?? 0.5, Y: this.originY ?? 0.5 };
+                    }
                 }
                 catch (_) { }
             }
@@ -2801,7 +3215,7 @@ __decorate([
 textProperty.register(ViewBase);
 // Core's Windows Font resolves app/fonts files to an ms-appx URI (and generics to system fonts);
 // the bare family name only finds installed fonts.
-function windowsFontSource(font) {
+export function windowsFontSource(font) {
     try {
         const source = font?.getWindowsFontDescriptor?.()?.fontFamilyNative?.Source;
         if (source)
@@ -3009,7 +3423,16 @@ export class Event {
     }
     set button(_) { }
     get target() {
-        return this['_target'];
+        // The element the event started at, which differs from currentTarget once it bubbles.
+        const nativeEvent = this[native_];
+        const nativeTarget = __ANDROID__ ? nativeEvent?.getTarget?.() : __APPLE__ ? nativeEvent?.target : __WINDOWS__ ? nativeEvent?.Target : null;
+        const current = this['_target'];
+        if (nativeTarget && nativeTarget !== nativeViewFor(current)) {
+            const found = nativeOwnerFor(nativeTarget) ?? findOwnerForNativeView(current, nativeTarget);
+            if (found)
+                return found;
+        }
+        return current;
     }
     set target(_) { }
     get object() {
@@ -3058,6 +3481,15 @@ export class InputEvent extends Event {
             return this[native_]?.data;
         }
         if (__WINDOWS__) {
+            const files = this[native_]?.Files;
+            if (files) {
+                const ret = [];
+                const size = files.Size;
+                for (let i = 0; i < size; i++) {
+                    ret.push(files.GetAt(i));
+                }
+                return ret;
+            }
             return this[native_]?.Data ?? null;
         }
         return false;
@@ -3075,6 +3507,11 @@ export class InputEvent extends Event {
         return false;
     }
 }
+export class CompositionEvent extends Event {
+    get data() {
+        return this[native_]?.Data ?? '';
+    }
+}
 /** DOM KeyboardEvent: dispatched on Windows. */
 export class KeyboardEvent extends Event {
     get key() {
@@ -3103,6 +3540,10 @@ function wrapNativeEvent(type) {
             return new InputEvent();
         case 'keydown':
             return new KeyboardEvent();
+        case 'compositionstart':
+        case 'compositionupdate':
+        case 'compositionend':
+            return new CompositionEvent();
         default:
             return new Event();
     }