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

package/angular/types/triniwiz-nativescript-masonkit-angular.d.ts

@@ -0,0 +1,181 @@
+import { ViewClassMeta } from '@nativescript/angular';
+
+/** How a passthrough element can be identified. */
+type PassthroughMatcher = string | RegExp | ((elementName: string) => boolean);
+interface ComponentHostOptions {
+    /**
+     * Turn component-host mode off entirely while keeping element registration.
+     *
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Extra elements to keep as a transparent `ProxyViewContainer`. Strings are
+     * compared case-insensitively; regexes and predicates receive the raw element
+     * name.
+     *
+     * Routed components are handled automatically, so this is only needed for a
+     * component whose template root is a classic fill-parent view that this
+     * cannot see coming - another router outlet, a `Frame`, a `Page`.
+     */
+    passthrough?: PassthroughMatcher[];
+    /**
+     * Recognise page roots automatically: routed components at creation time, and
+     * any host that turns out to hold a `Frame`, `Page` or `ActionBar`.
+     *
+     * @default true
+     */
+    autoDetectPassthrough?: boolean;
+    /**
+     * Keep the Angular root component's host element a `ProxyViewContainer`.
+     *
+     * `AppHostView` only wraps the root in its full-screen root `GridLayout` when
+     * that root *is* a `ProxyViewContainer`, so the root element has to stay a
+     * passthrough for the tree below it to have a viewport-sized ancestor to
+     * resolve `height: 100%` against.
+     *
+     * Detected rather than hardcoded: Angular creates the root component's host
+     * element before anything in its template, so the first unregistered element
+     * this package is asked to create is the root.
+     *
+     * @default true
+     */
+    rootAsPassthrough?: boolean;
+}
+/**
+ * Turn every Angular component host element into a real MasonKit view.
+ *
+ * Stock `@nativescript/angular` creates a `ProxyViewContainer` for every element
+ * that is not `registerElement`'d - i.e. every Angular component selector. That
+ * container creates no native view, so anything placed on a component element
+ * (`backgroundColor`, `margin`, `class="..."`, host bindings) is set on an
+ * invisible logical wrapper with no visual effect, and the component is
+ * transparent to layout. Nesting components then produces layouts that do not
+ * match the template, because the boxes the template implies do not exist.
+ *
+ * This replaces that fallback with a {@link MasonComponentHost}, so a component
+ * host element is a real box, as on the web.
+ *
+ * Idempotent: repeated calls only update the configuration.
+ *
+ * Trade-off: an unknown element name (a typo, a component that was never
+ * declared) becomes a host instead of throwing "No known component for element
+ * X". Set `enabled: false` to keep the stock behaviour.
+ */
+declare function enableMasonComponentHosts(options?: ComponentHostOptions): void;
+
+interface RegisterElementsOptions {
+    /**
+     * Register MasonKit's own elements: `View`, `Text`, `Scroll`, `Img`, `Button`,
+     * `Input`, `TextArea`, `Br`, `Ul`, `Ol`, `Li`.
+     *
+     * @default true
+     */
+    mason?: boolean;
+    /**
+     * Register the HTML-shaped elements from `@triniwiz/nativescript-masonkit/web`
+     * (`div`, `section`, `p`, `span`, `h1`–`h6`, `blockquote`, `code`, `a`, ...).
+     *
+     * @default true
+     */
+    web?: boolean;
+}
+/**
+ * Register MasonKit's elements with `@nativescript/angular`, each with the child
+ * bookkeeping meta it needs (see {@link masonMeta}).
+ *
+ * Safe to call more than once - later calls skip names already registered here.
+ *
+ * ## Shadowing
+ *
+ * `registerElement` overwrites silently, and `@nativescript/angular` registers
+ * every element under its original, lowercase and kebab spellings. MasonKit's
+ * `Button`, `Img` and `/web`'s `Span` therefore *replace* core's `Button`,
+ * `img` (`Image`) and `Span` for Angular templates. That is the intent - these
+ * are the MasonKit-laid-out equivalents - but it is why `mason`/`web` can each
+ * be turned off if an app wants to keep the classic widgets.
+ */
+declare function registerMasonKitElements(options?: RegisterElementsOptions): void;
+
+interface InstallMasonKitOptions extends RegisterElementsOptions {
+    /**
+     * Component-host mode: make every Angular component host element a real
+     * MasonKit view instead of an invisible `ProxyViewContainer`.
+     *
+     * On by default - installing this is taken as the statement that MasonKit is
+     * how the app lays out. Pass `false`, or an options object with
+     * `enabled: false`, to opt out and keep stock `@nativescript/angular`
+     * behaviour while still getting the element registrations.
+     *
+     * @default true
+     */
+    componentHosts?: boolean | ComponentHostOptions;
+}
+/**
+ * Install MasonKit's Angular integration.
+ *
+ * Call this in `main.ts` **before** `runNativeScriptAngularApp()`:
+ *
+ * ```ts
+ * import { installMasonKit } from '@triniwiz/nativescript-masonkit/angular';
+ *
+ * installMasonKit();
+ *
+ * runNativeScriptAngularApp({
+ *   appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
+ * });
+ * ```
+ *
+ * It has to run before the bootstrap, not as part of it: the element map and
+ * the renderer patch must be in place before Angular creates the root
+ * component's host element, and an `NgModule` import or an `APP_INITIALIZER`
+ * would both be too late for some of that. A plain function call at the top of
+ * the entry file is unambiguous about when it happens.
+ *
+ * Idempotent - element registration is deduplicated and the component-host
+ * patches are installed once, then only reconfigured.
+ */
+declare function installMasonKit(options?: InstallMasonKitOptions): void;
+
+/**
+ * `ViewClassMeta` that routes Angular's visual-tree mutations through MasonKit's
+ * own child bookkeeping.
+ *
+ * ## Why every MasonKit element needs this
+ *
+ * MasonKit's `ViewBase` extends `CustomLayoutView`, **not** `LayoutBase`.
+ * `@nativescript/angular`'s `ViewUtil` branches on `view instanceof LayoutBase`,
+ * so without a meta a MasonKit container falls into the generic fallbacks:
+ *
+ * - `addToVisualTree` → `parent._addChildFromBuilder(name, child)`, which is a
+ *   plain `addChild()` append. The resolved `next` sibling is **discarded**, so
+ *   anything Angular inserts in the middle of a container (`*ngIf` toggling on,
+ *   `*ngFor` reordering, a router swap) lands at the end and the Taffy tree ends
+ *   up in a different order than the template.
+ * - `removeFromVisualTree` → core's `parent._removeView(child)`, which bypasses
+ *   MasonKit's `removeChild()` entirely. The native view detaches but the entry
+ *   stays in `_children`, and since `_children` is what drives native insertion
+ *   indices (`_nativeIndexFor`), every later insert into that container is
+ *   misplaced - the classic "nested components lay out wrong" symptom.
+ *
+ * Routing through `insertChild`/`addChild`/`removeChild` keeps the Taffy tree,
+ * the `_children` bookkeeping and the native view tree in step. This is the same
+ * contract `frameMeta`/`formattedStringMeta` use for their containers.
+ *
+ * ## Why `insertChild` must not throw
+ *
+ * `next` is whatever `ViewUtil.findNextVisual()` resolved to, which is not
+ * guaranteed to be a node MasonKit ever tracked. MasonKit's own `insertBefore()`
+ * throws `NotFoundError` for an unknown reference; thrown from here that would
+ * abort the component's change detection and blank it. An unknown reference
+ * simply degrades to an append, exactly as `insertToLayout` does for classic
+ * layouts.
+ *
+ * Invisible nodes (Angular's `CommentNode`/`TextNode`) are intentionally left to
+ * `ViewUtil`'s default handling: it assigns `parent.text`, which MasonKit's
+ * `textProperty.setNative` already reconciles into real native text nodes.
+ */
+declare const masonMeta: ViewClassMeta;
+
+export { enableMasonComponentHosts, installMasonKit, masonMeta, registerMasonKitElements };
+export type { ComponentHostOptions, InstallMasonKitOptions, PassthroughMatcher, RegisterElementsOptions };

package/button/index.android.d.ts

@@ -1,7 +1,8 @@
 import { ViewBase } from '@nativescript/core';
-import { ButtonBase } from '../common';
+import { ButtonBase, textContentProperty } from '../common';
 import { style_ } from '../symbols';
 export declare class Button extends ButtonBase {
+    [textContentProperty.setNative]: (value: any) => void;
     [style_]: any;
     _inBatch: boolean;
     private __view;

package/button/index.ios.d.ts

@@ -1,8 +1,9 @@
 import { ViewBase } from '@nativescript/core';
-import { ButtonBase } from '../common';
+import { ButtonBase, textContentProperty } from '../common';
 import { Style } from '../style';
 import { style_ } from '../symbols';
 export declare class Button extends ButtonBase {
+    [textContentProperty.setNative]: (value: any) => void;
     [style_]: any;
     _inBatch: boolean;
     constructor();

package/button/index.windows.d.ts

@@ -1,7 +1,8 @@
-import { ButtonBase } from '../common';
+import { ButtonBase, textContentProperty } from '../common';
 import { Style } from '../style';
 import { style_ } from '../symbols';
 export declare class Button extends ButtonBase {
+    [textContentProperty.setNative]: (value: any) => void;
     [style_]: any;
     _inBatch: boolean;
     constructor();

package/common.d.ts

@@ -1,6 +1,9 @@
-import { AddChildFromBuilder, CustomLayoutView, View as NSView, ViewBase as NSViewBase, Property, CoreTypes } from '@nativescript/core';
+import { AddChildFromBuilder, CustomLayoutView, View as NSView, ViewBase as NSViewBase, Property, widthProperty, heightProperty, CoreTypes, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, textDecorationProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, backgroundColorProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, paddingBottomProperty, zIndexProperty } from '@nativescript/core';
 import { Display, Gap, GridAutoFlow, JustifyItems, JustifySelf, Length, LengthAuto, Overflow, Position, BoxSizing, VerticalAlign, FlexDirection, Float, Clear } from '.';
+import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+import { fontInternalProperty } from '@nativescript/core/ui/styling/style-properties';
 import { Style } from './style';
+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 } from './properties';
 import { isMasonView_, isTextChild_, isText_, native_, pseudoStyles_ } from './symbols';
 import { TextNode } from './text-node';
 export interface MasonChild extends ViewBase {
@@ -59,6 +62,95 @@ declare module '@nativescript/core/ui/styling/style' {
     }
 }
 export declare class ViewBase extends CustomLayoutView implements AddChildFromBuilder {
+    [zIndexProperty.setNative]: (value: number) => void;
+    [verticalAlignProperty.setNative]: (value: any) => void;
+    [textWrapProperty.setNative]: (value: any) => void;
+    [aspectRatioProperty.setNative]: (value: any) => void;
+    [textProperty.setNative]: (value: string) => void;
+    [filterProperty.setNative]: (value: any) => void;
+    [borderRadiusProperty.setNative]: (value: any) => void;
+    [borderProperty.setNative]: (value: any) => void;
+    [borderLeftProperty.setNative]: (value: any) => void;
+    [borderTopProperty.setNative]: (value: any) => void;
+    [borderRightProperty.setNative]: (value: any) => void;
+    [borderBottomProperty.setNative]: (value: any) => void;
+    [backgroundProperty.setNative]: (value: any) => void;
+    [backgroundColorProperty.setNative]: (value: any) => void;
+    [borderLeftWidthProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [borderTopWidthProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [borderRightWidthProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [borderBottomWidthProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [lineHeightProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [letterSpacingProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [textAlignmentProperty.setNative]: (value: any) => void;
+    [textDecorationProperty.setNative]: (value: any) => void;
+    [borderColorProperty.setNative]: (value: any) => void;
+    [borderStyleProperty.setNative]: (value: any) => void;
+    [backgroundImageProperty.setNative]: (value: any) => void;
+    [listStyleTypeProperty.setNative]: (value: any) => void;
+    [listStylePositionProperty.setNative]: (value: any) => void;
+    [boxSizingProperty.setNative]: (value: any) => void;
+    [displayProperty.setNative]: (value: any) => void;
+    [overflowXProperty.setNative]: (value: any) => void;
+    [overflowYProperty.setNative]: (value: any) => void;
+    [scrollBarWidthProperty.setNative]: (value: any) => void;
+    [positionProperty.setNative]: (value: any) => void;
+    [colorProperty.setNative]: (value: any) => void;
+    [flexWrapProperty.setNative]: (value: any) => void;
+    [flexDirectionProperty.setNative]: (value: any) => void;
+    [flexGrowProperty.setNative]: (value: any) => void;
+    [flexShrinkProperty.setNative]: (value: any) => void;
+    [flexBasisProperty.setNative]: (value: any) => void;
+    [alignItemsProperty.setNative]: (value: any) => void;
+    [alignSelfProperty.setNative]: (value: any) => void;
+    [alignContentProperty.setNative]: (value: any) => void;
+    [justifyItemsProperty.setNative]: (value: any) => void;
+    [justifySelfProperty.setNative]: (value: any) => void;
+    [justifyContentProperty.setNative]: (value: any) => void;
+    [leftProperty.setNative]: (value: any) => void;
+    [rightProperty.setNative]: (value: any) => void;
+    [bottomProperty.setNative]: (value: any) => void;
+    [topProperty.setNative]: (value: any) => void;
+    [minWidthProperty.setNative]: (value: any) => void;
+    [minHeightProperty.setNative]: (value: any) => void;
+    [heightProperty.setNative]: (value: any) => void;
+    [widthProperty.setNative]: (value: any) => void;
+    [maxWidthProperty.setNative]: (value: any) => void;
+    [maxHeightProperty.setNative]: (value: any) => void;
+    [marginProperty.setNative]: (value: any) => void;
+    [marginLeftProperty.setNative]: (value: any) => void;
+    [marginRightProperty.setNative]: (value: any) => void;
+    [marginBottomProperty.setNative]: (value: any) => void;
+    [marginTopProperty.setNative]: (value: any) => void;
+    [paddingProperty.setNative]: (value: any) => void;
+    [paddingLeftProperty.setNative]: (value: any) => void;
+    [paddingRightProperty.setNative]: (value: any) => void;
+    [paddingTopProperty.setNative]: (value: any) => void;
+    [paddingBottomProperty.setNative]: (value: any) => void;
+    [rowGapProperty.setNative]: (value: any) => void;
+    [columnGapProperty.setNative]: (value: any) => void;
+    [gridColumnStartProperty.setNative]: (value: any) => void;
+    [gridColumnEndProperty.setNative]: (value: any) => void;
+    [gridColumnProperty.setNative]: (value: any) => void;
+    [gridRowStartProperty.setNative]: (value: any) => void;
+    [gridRowEndProperty.setNative]: (value: any) => void;
+    [gridRowProperty.setNative]: (value: any) => void;
+    [gridTemplateRowsProperty.setNative]: (value: any) => void;
+    [gridTemplateColumnsProperty.setNative]: (value: any) => void;
+    [gridAutoColumnsProperty.setNative]: (value: any) => void;
+    [gridAutoRowsProperty.setNative]: (value: any) => void;
+    [gridAutoFlowProperty.setNative]: (value: any) => void;
+    [gridAreaProperty.setNative]: (value: any) => void;
+    [gridTemplateAreasProperty.setNative]: (value: any) => void;
+    [fontSizeProperty.setNative]: (value: Length) => void;
+    [fontWeightProperty.setNative]: (value: any) => void;
+    [fontStyleProperty.setNative]: (value: any) => void;
+    [textOverFlowProperty.setNative]: (value: any) => void;
+    [clearProperty.setNative]: (value: any) => void;
+    [floatProperty.setNative]: (value: any) => void;
+    [cornerShapeProperty.setNative]: (value: any) => void;
+    [boxShadowProperty.setNative]: (value: any) => void;
+    [transformProperty.setNative]: (value: any) => void;
     _children: (NSView | {
         text?: string;
     } | TextNode)[];
@@ -99,6 +191,12 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     constructor();
     get innerHTML(): string;
     set innerHTML(value: string);
+    private _rememberNativeOwner;
+    /**
+     * Returns the top-most Mason/NativeScript element at a point in this view's
+     * local coordinate space, similar to the browser's elementFromPoint().
+     */
+    elementFromPoint(x: number, y: number): ViewBase | NSViewBase | null;
     _pendingEventsRegistration: Array<{
         arg: string;
         callback: any;
@@ -160,6 +258,7 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     private _nativeAddChild;
     private _nativeReplaceChild;
     private _setOrPushChild;
+    private _spliceOrPushChild;
     private _updateTextNode;
     private _syncTextRunLayout;
     get filter(): string;
@@ -244,6 +343,8 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     get textOverFlow(): string;
 }
 export declare class TextBase extends ViewBase {
+    [fontInternalProperty.setNative]: (value: any) => void;
+    [textWrapProperty.setNative]: (value: any) => void;
     textContent: string;
 }
 export declare class ButtonBase extends TextBase {

package/common.js

@@ -6,7 +6,7 @@ import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowP
 import { fontInternalProperty } from '@nativescript/core/ui/styling/style-properties';
 import { _forceStyleUpdate } from './utils';
 import { Style } from './style';
-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, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, } from './properties';
+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, } from './properties';
 import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_ } from './symbols';
 import { Tree } from './tree';
 import { TextNode } from './text-node';
@@ -130,6 +130,43 @@ function getFrameworkElement(view) {
     _frameworkAccessorCache.set(view, false);
     return null;
 }
+function getWeakRefValue(value) {
+    if (!value)
+        return null;
+    const maybeWeakRef = value;
+    if (typeof maybeWeakRef.get === 'function')
+        return maybeWeakRef.get();
+    if (typeof maybeWeakRef.deref === 'function')
+        return maybeWeakRef.deref();
+    return value;
+}
+function nativeOwnerFor(nativeView) {
+    if (!nativeView)
+        return null;
+    const owner = getWeakRefValue(nativeView.__masonOwner);
+    if (owner)
+        return owner;
+    return getFrameworkElement(nativeView);
+}
+function nativeViewFor(owner) {
+    return owner?.nativeViewProtected ?? owner?.[native_];
+}
+function findOwnerForNativeView(owner, nativeView) {
+    if (!owner || !nativeView)
+        return null;
+    const ownNativeView = nativeViewFor(owner);
+    if (ownNativeView === nativeView)
+        return owner;
+    const children = owner._children ?? owner._viewChildren;
+    if (!children)
+        return null;
+    for (const child of children) {
+        const match = findOwnerForNativeView(child, nativeView);
+        if (match)
+            return match;
+    }
+    return null;
+}
 export const textContentProperty = new Property({
     name: 'textContent',
     affectsLayout: true,
@@ -202,6 +239,39 @@ export class ViewBase extends CustomLayoutView {
             }
         }
     }
+    _rememberNativeOwner(nativeView = nativeViewFor(this)) {
+        if (!nativeView)
+            return;
+        try {
+            nativeView.__masonOwner = new WeakRef(this);
+        }
+        catch (_) {
+            // Some host objects do not accept expandos; fallback tree matching still works.
+        }
+    }
+    /**
+     * Returns the top-most Mason/NativeScript element at a point in this view's
+     * local coordinate space, similar to the browser's elementFromPoint().
+     */
+    elementFromPoint(x, y) {
+        const nativeView = nativeViewFor(this) ?? this._view;
+        if (!nativeView)
+            return null;
+        this._rememberNativeOwner(nativeView);
+        let nativeHit = null;
+        if (__ANDROID__ && typeof nativeView.elementFromPoint === 'function') {
+            nativeHit = nativeView.elementFromPoint(x, y);
+        }
+        else if (__APPLE__) {
+            const hitTest = nativeView.mason_elementFromPointY ?? nativeView.mason_elementFromPoint ?? nativeView.elementFromPoint;
+            if (typeof hitTest === 'function') {
+                nativeHit = hitTest.call(nativeView, x, y);
+            }
+        }
+        if (!nativeHit)
+            return null;
+        return nativeOwnerFor(nativeHit) ?? findOwnerForNativeView(this, nativeHit);
+    }
     _registerNativeEvent(arg, callback, thisArg) {
         if (!this[native_]) {
             this._pendingEventsRegistration.push({ arg, callback, thisArg });
@@ -329,6 +399,7 @@ export class ViewBase extends CustomLayoutView {
     }
     initNativeView() {
         super.initNativeView();
+        this._rememberNativeOwner();
         if (this._pendingEventsRegistration.length > 0) {
             const pending = this._pendingEventsRegistration.splice(0);
             for (const registration of pending) {
@@ -901,6 +972,17 @@ export class ViewBase extends CustomLayoutView {
             this._children.push(entry);
         }
     }
+    // Splices a text-node entry in at `index`, shifting existing children right.
+    _spliceOrPushChild(index, entry) {
+        if (this._children.length > index) {
+            //@ts-ignore
+            this._children.splice(index, 0, entry);
+        }
+        else {
+            //@ts-ignore
+            this._children.push(entry);
+        }
+    }
     // -- Unified text node update (cross-platform) --
     _updateTextNode(node, operation = null) {
         const text = node.text ?? node.data ?? '';
@@ -923,7 +1005,7 @@ export class ViewBase extends CustomLayoutView {
                 break;
             case 'insert':
                 this._nativeAddChild(textNode, operation.index);
-                this._setOrPushChild(operation.index, entry);
+                this._spliceOrPushChild(operation.index, entry);
                 break;
         }
         this._syncTextRunLayout();
@@ -1228,6 +1310,15 @@ export class ViewBase extends CustomLayoutView {
         }
     }
     // @ts-ignore
+    [borderStyleProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderStyle = String(value ?? '');
+        }
+    }
+    // @ts-ignore
     [backgroundImageProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;