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

package/README.md

@@ -29,7 +29,7 @@ pnpm pack --pack-destination /path/to/local-artifacts
 Install the resulting tarball in a NativeScript application:
 
 ```sh
-pnpm add /path/to/local-artifacts/octane-xplat-nativescript-mason-core-1.0.0-beta.0.tgz
+pnpm add /path/to/local-artifacts/octane-xplat-nativescript-mason-core-1.0.0-beta.1.tgz
 ```
 
 Use NativeScript controls inside a Mason container:
@@ -91,8 +91,8 @@ checkout for publishing.
 | Target | Evidence |
 | --- | --- |
 | iOS arm64 Simulator | Native regressions, compiled TSRX/hooks/styles, actual HID taps/swipes and cleanup pass |
-| iOS arm64 device | Framework clients link; unsigned NativeScript app builds with device metadata/resources; physical runtime unverified |
-| Android arm64-v8a | Native regressions and plain consumer pass on API 36 phone; compiled renderer and OS input pass on API 35 emulator |
+| iOS arm64 device | Framework clients link; signed development app and native UI-test runner build; physical runtime unqualified |
+| Android arm64-v8a | Native regressions, plain consumer, compiled TSRX/hooks/styles and real tap/swipe input pass on API 36 phone; API 35 emulator also passes |
 | Windows / web | Not provided by this package |
 
 NativeScript core 9.1.3 with Xplat's canonical patches is qualified through the
@@ -112,3 +112,88 @@ Source provenance and the byte-preserving module map live in
 `tools/mason-core/README.md` in the source checkout. The agreed design is
 `.agents/design/mason-core-extraction.md` in Octane Xplat. Upstream discussion:
 https://github.com/triniwiz/nativescript-mason/issues/160.
+
+## Safe-area CSS environment values
+
+Starting in `1.0.0-beta.1`, loaded Mason container roots automatically supply
+`env(safe-area-inset-top/right/bottom/left)` from their owning native window.
+Observation starts only when a subtree uses `env()`, is shared within each
+window, and ends when the root unloads. The styles below need no app binding.
+
+```css
+.safe-area-content {
+  padding-top: env(safe-area-inset-top, 0px);
+}
+```
+
+For a custom presentation viewport, install an explicit source before the root
+loads. It takes precedence over automatic observation. Call the returned
+function when that host is disposed.
+
+```ts
+import {
+  View, bindCssEnvironment,
+  type CssEnvironmentSource,
+} from '@octane-xplat/nativescript-mason-core';
+
+export function connectWindow(root: View, source: CssEnvironmentSource) {
+  root.className = 'safe-area-content';
+  return bindCssEnvironment(root, source);
+}
+```
+
+`source.read()` returns `{ top, right, bottom, left }` in device-independent
+pixels, or `null` while unavailable. `source.subscribe(changed)` returns an
+unsubscribe function. Environment values are scoped to that root's descendants;
+a nested boundary may represent another window. Core owns substitution and
+style re-evaluation; the host owns native observation, correct window selection
+and disposal. It does not read a process-global screen or add a platform plugin.
+
+```ts
+import { setCssEnvironment, type View, type CssSafeAreaInsets } from '@octane-xplat/nativescript-mason-core';
+
+export function publishWindowInsets(root: View, insets: CssSafeAreaInsets | null) {
+  setCssEnvironment(root, insets);
+}
+```
+
+A fallback applies when the requested value is unavailable. A real zero remains
+zero. Nested math, box shorthands (`padding`, `margin`, `border-width`) and
+NativeScript-expanded CSS variables retain their authored expressions when
+insets change. Local overrides and removed declarations stop the replaced
+expression from being replayed.
+
+```css
+.safe-area-content {
+  --content-top: env(safe-area-inset-top, 0px);
+  padding: calc(var(--content-top) + 8px) env(safe-area-inset-right, 0px)
+    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+}
+```
+
+Unknown names can use fallbacks; unsupported or unavailable values without a
+fallback go through the existing invalid-length/diagnostic path. This is not
+a general CSS invalid-at-computed-value or inheritance implementation. Loaded
+views re-evaluate after reparenting; hosts that replace native views without a
+load transition must explicitly refresh their subtree.
+
+```ts
+import { refreshCssEnvironment, type View } from '@octane-xplat/nativescript-mason-core';
+
+export function nativeViewRecreated(root: View) {
+  refreshCssEnvironment(root);
+}
+```
+
+The automatic iOS source observes the owning `UIWindow` through a transparent,
+non-interactive view. Android observes its native root before drawing, reads
+system-bar/cutout insets through the existing AndroidX dependency, and converts
+using that root's density. It excludes keyboard/IME insets and preserves other
+inset listeners. No process-global active window or activity selects values.
+
+Verification remains headless: parser, style-buffer transport, actual
+NativeScript cascade, platform-adapter substitutes and host lifecycle tests.
+Actual iOS/Android inset dispatch and layout remain unqualified. This resolver
+covers Mason style buffers; it does not add `env()` support to ordinary
+NativeScript controls or media queries. Xplat's qualification warning remains
+until native layout is verified.

package/artifact-inventory.json

@@ -5,7 +5,7 @@
   },
   {
     "name": "README.md",
-    "sha256": "0af0f3a50fefd5e824485839af5164d34d8c2290c8b6460076dfff22bd4b0e11"
+    "sha256": "6cdcecbb9cf0185819ea7c56dddbd534f8f05373744c057aad959ae2fa3314df"
   },
   {
     "name": "box-shadow.d.ts",
@@ -17,11 +17,11 @@
   },
   {
     "name": "common.d.ts",
-    "sha256": "34fb6dda40f485790f31c5bd9cf3f326210a0de554a524f094ccf482881f966f"
+    "sha256": "d13429fc04649ff489a432a62567f98712329fdcddbb2300f94ddcf0c4789fee"
   },
   {
     "name": "common.js",
-    "sha256": "cf8977b5fe06cc9d0261abb75e20b94aaa0ff7954d73af63a5b44b0b6eb8e653"
+    "sha256": "17aadb88a703020ee9c3d22d5d85eb7d34df749fa7c3e701324c791027c73c62"
   },
   {
     "name": "css-colors.d.ts",
@@ -31,6 +31,14 @@
     "name": "css-colors.js",
     "sha256": "982aa3d87904f10205666ee0527cbed585c2c14bcf9efe11885a5abd477ee7b2"
   },
+  {
+    "name": "css-environment.d.ts",
+    "sha256": "b3df509fc9ccfe6e1142125b99c1d6fb7d4eb5e3a0e3bd7deab7396d0d28acbe"
+  },
+  {
+    "name": "css-environment.js",
+    "sha256": "209f221e056f3131bf9a22044f616d34f964fb036cf0bc798eefcc1df91f883d"
+  },
   {
     "name": "css-filter.d.ts",
     "sha256": "ab1e35ece101aa71b1daa97bdd22046192e5763738ed2c931a578b8dc2baf364"
@@ -101,7 +109,7 @@
   },
   {
     "name": "foreign-layout.js",
-    "sha256": "51ddcf90dcedd44e0969b3ab03105ab10b59d06da6fee9d73085133ca00b9a88"
+    "sha256": "da52a0a7c161d698447089fe35228a4c5f4b87d2033190a09ca809562eb87457"
   },
   {
     "name": "gradient-stops.d.ts",
@@ -113,23 +121,23 @@
   },
   {
     "name": "index.android.d.ts",
-    "sha256": "3f15c5a3256cf20fa6a978870b91190b36ac0665d5f492735f362189acd0aab7"
+    "sha256": "e00c4473dff497b63e543625ffd222bfbd0ae5b27e9c35878ec272e2511484ed"
   },
   {
     "name": "index.android.js",
-    "sha256": "19fb2e17271993c8763168848dae0ff07a141caced1f9e9dea438d23f6b6254a"
+    "sha256": "b8ad86a976604e6a243bdaef886a3babc537bdf95435a47c234366a386c64d4b"
   },
   {
     "name": "index.d.ts",
-    "sha256": "9a3a48d1ec30073b638c5a3c9d938f1057b165fec78718f19122ceae0303aa3c"
+    "sha256": "13312d150fd9c555cbf56b6beb10fdbb05d6da8526601c5733858578706580d3"
   },
   {
     "name": "index.ios.d.ts",
-    "sha256": "3f15c5a3256cf20fa6a978870b91190b36ac0665d5f492735f362189acd0aab7"
+    "sha256": "e00c4473dff497b63e543625ffd222bfbd0ae5b27e9c35878ec272e2511484ed"
   },
   {
     "name": "index.ios.js",
-    "sha256": "19fb2e17271993c8763168848dae0ff07a141caced1f9e9dea438d23f6b6254a"
+    "sha256": "b8ad86a976604e6a243bdaef886a3babc537bdf95435a47c234366a386c64d4b"
   },
   {
     "name": "ios-host-README.md",
@@ -147,13 +155,33 @@
     "name": "mask.js",
     "sha256": "162fda4410ccced5cd7d33a67bfc4d9d56aef276105e2b4d229d8111837a921b"
   },
+  {
+    "name": "native-environment.android.d.ts",
+    "sha256": "a3564bb48bfc7233b72b5196299cf2cab8c04b0e419da56ae675125cb70f1206"
+  },
+  {
+    "name": "native-environment.android.js",
+    "sha256": "6031ffeb4082146b9a4ac04664f60cfb29779a56447440938240d0009c641c40"
+  },
+  {
+    "name": "native-environment.d.ts",
+    "sha256": "a3564bb48bfc7233b72b5196299cf2cab8c04b0e419da56ae675125cb70f1206"
+  },
+  {
+    "name": "native-environment.ios.d.ts",
+    "sha256": "a3564bb48bfc7233b72b5196299cf2cab8c04b0e419da56ae675125cb70f1206"
+  },
+  {
+    "name": "native-environment.ios.js",
+    "sha256": "65168574ef387a69d1e3751cb2b796fe7e28934f88d1e237ffa16bc20a43163a"
+  },
   {
     "name": "native-types-README.md",
     "sha256": "314a146fe99695ea1e18efa631b015bb8f470975bafd4ab14306a05c5370d654"
   },
   {
     "name": "package.json",
-    "sha256": "96c4689365ad71a501be27e4a6fec670010ab20ad1f17a89f278074bc9f7ce1d"
+    "sha256": "0df647806eca042e2841873f6b2f30573b9c124742788ff519394d75a4d5a69f"
   },
   {
     "name": "panel-helpers.d.ts",
@@ -597,15 +625,15 @@
   },
   {
     "name": "plugin-README.md",
-    "sha256": "2e4d4b880a783edd188d34bf9fe2080f5ac2b5be8eaa3816b951f4300ef813f0"
+    "sha256": "c9037f017498a60bc1309791d5ff2ba59bb21ef6f580c1268936b0f5f68a2753"
   },
   {
     "name": "properties.d.ts",
-    "sha256": "b116664afb558fe507bdaf713d9c63fdc313fc26098ae3f9007e72dbb5d4e3a5"
+    "sha256": "62ac264bbb130baf45d6daabaa7f89740690556c62173531752339922e2f3a5c"
   },
   {
     "name": "properties.js",
-    "sha256": "cece51c25bff12a46cdb8639a3ae94573a0cbbb592de491a212cf1f23da85fd0"
+    "sha256": "01f0493980a53d789923eaab4f46909642d494b42344016aceeb5e039050353e"
   },
   {
     "name": "pseudo.d.ts",
@@ -641,7 +669,7 @@
   },
   {
     "name": "style.js",
-    "sha256": "2fed5e19e29a6dee0c81c8f22728acdd56950d9f8865b9974d234733c5c38167"
+    "sha256": "26b28c9f98c0047e970827f10c44875ef0b3a8efa18a0da4b64fcbae52d767c1"
   },
   {
     "name": "symbols.d.ts",

package/common.d.ts

@@ -359,6 +359,9 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     get textWrap(): "nowrap" | "wrap" | "balance";
     set aspectRatio(value: number);
     get aspectRatio(): number;
+    private _cssEnvironmentStop?;
+    onLoaded(): void;
+    onUnloaded(): void;
     get filter(): string;
     set filter(value: string);
     set borderRadius(value: string | number | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit);

package/common.js

@@ -1,4 +1,7 @@
 var _a, _b, _c, _d;
+import { isCssEnvironmentShorthand } from './css-environment';
+import { registerAutomaticCssEnvironment } from './css-environment';
+import { nativeCssEnvironmentSource } from './native-environment';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { CustomLayoutView, Utils, View as NSView, getViewById, 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';
@@ -142,7 +145,7 @@ function findOwnerForNativeView(owner, nativeView) {
     return null;
 }
 function masonLength(value) {
-    return isCssLength(value) ? value.css : value;
+    return isCssLength(value) && !isCssEnvironmentShorthand(value) ? value.css : value;
 }
 /** A core `Length` (number of dip, or `{ value, unit }`) as a CSS string. */
 function lengthToCssString(value) {
@@ -1265,6 +1268,17 @@ export class ViewBase extends CustomLayoutView {
             style.aspectRatio = value;
         }
     }
+    onLoaded() {
+        super.onLoaded();
+        if (!this.parent?.[isMasonView_]) {
+            this._cssEnvironmentStop ?? (this._cssEnvironmentStop = registerAutomaticCssEnvironment(this, () => nativeCssEnvironmentSource(this)));
+        }
+    }
+    onUnloaded() {
+        super.onUnloaded();
+        this._cssEnvironmentStop?.();
+        this._cssEnvironmentStop = undefined;
+    }
     get filter() {
         return this.style.filter;
     }

package/css-environment.d.ts

@@ -0,0 +1,49 @@
+/** Native hosts supply logical (device-independent) pixels, scoped to one view subtree. */
+export interface CssSafeAreaInsets {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export interface CssEnvironmentHost {
+    readonly parent?: CssEnvironmentHost | null;
+    on?(event: string, callback: () => void): void;
+    off?(event: string, callback: () => void): void;
+}
+/** The host owns window selection, native observation and subscription teardown. */
+export interface CssEnvironmentSource {
+    read(): CssSafeAreaInsets | null;
+    subscribe(changed: () => void): () => void;
+}
+/** Core host lifecycle adapter: observe lazily, only when a subtree actually uses env(). */
+export declare function registerAutomaticCssEnvironment(host: CssEnvironmentHost, create: () => CssEnvironmentSource): () => void;
+declare const shorthand: unique symbol;
+interface EnvironmentShorthand {
+    value: number;
+    unit: 'dip';
+    css: string;
+    [shorthand]: {
+        split: (value: string) => unknown[];
+        index: number;
+    };
+}
+/** Keep parse-time box shorthands pending until the effective longhand has a host context. */
+export declare function cssEnvironmentShorthand(value: string, split: (value: string) => unknown[], count: number): unknown[] | undefined;
+/** Direct Style box setters need the same deferred split as stylesheet shorthands. */
+export declare function cssEnvironmentSides(value: string): unknown[] | undefined;
+export declare function isCssEnvironmentShorthand(value: unknown): value is EnvironmentShorthand;
+/** Publish a host's current safe area. Missing values are unavailable; zero is a real inset. */
+export declare function setCssEnvironment(host: CssEnvironmentHost, insets: CssSafeAreaInsets | null): void;
+/** Remove the host boundary and re-evaluate styles against their next ancestor context. */
+export declare function clearCssEnvironment(host: CssEnvironmentHost): void;
+/** Bind a host-owned native observer. Call the returned function when that host is disposed. */
+export declare function bindCssEnvironment(host: CssEnvironmentHost, source: CssEnvironmentSource): () => void;
+/** Substitute env() before the existing CSS math/unit parser; undefined means invalid/unavailable. */
+export declare function resolveCssEnvironment(value: string, insets?: CssSafeAreaInsets): string | undefined;
+/** Replay after reparenting/native recreation; publish changes through setCssEnvironment instead. */
+export declare function refreshCssEnvironment(host: CssEnvironmentHost): void;
+/** Core build adapter only: called at a leaf style setter, after cascade/var()/shorthand expansion. */
+export declare function environmentStyleValue(target: object, name: string, value: unknown): unknown;
+/** Stop replaying a released native style helper, including its lifecycle listeners. */
+export declare function releaseCssEnvironmentStyle(target: object): void;
+export {};

package/css-environment.js

@@ -0,0 +1,309 @@
+import { splitMargin } from './css-shorthands';
+import { reportCssDiagnostic } from './diagnostics';
+const environments = new WeakMap();
+const bindings = new WeakMap();
+const automaticSources = new WeakMap();
+/** Core host lifecycle adapter: observe lazily, only when a subtree actually uses env(). */
+export function registerAutomaticCssEnvironment(host, create) {
+    const entry = { create, starting: false };
+    automaticSources.set(host, entry);
+    refreshCssEnvironment(host);
+    return () => {
+        if (automaticSources.get(host) !== entry)
+            return;
+        automaticSources.delete(host);
+        entry.stop?.();
+    };
+}
+function ensureAutomaticEnvironment(owner) {
+    for (let host = owner; host; host = host.parent ?? undefined) {
+        const entry = automaticSources.get(host);
+        if (entry) {
+            if (!entry.stop && !entry.starting && !bindings.has(host) && !environments.has(host)) {
+                entry.starting = true;
+                try {
+                    entry.stop = bindCssEnvironment(host, entry.create());
+                }
+                finally {
+                    entry.starting = false;
+                }
+            }
+            return;
+        }
+        if (environments.has(host))
+            return;
+    }
+}
+const sides = ['top', 'right', 'bottom', 'left'];
+const ENV = /\benv\(/i;
+const shorthand = Symbol('mason:environment-shorthand');
+/** Keep parse-time box shorthands pending until the effective longhand has a host context. */
+export function cssEnvironmentShorthand(value, split, count) {
+    if (!ENV.test(value))
+        return undefined;
+    return Array.from({ length: count }, (_, index) => ({
+        value: 0, unit: 'dip', css: value, [shorthand]: { split, index },
+    }));
+}
+/** Direct Style box setters need the same deferred split as stylesheet shorthands. */
+export function cssEnvironmentSides(value) {
+    return cssEnvironmentShorthand(value, splitMargin, 4);
+}
+export function isCssEnvironmentShorthand(value) {
+    return !!value && typeof value === 'object' && shorthand in value;
+}
+function snapshot(insets) {
+    const result = {};
+    for (const side of sides) {
+        const value = insets?.[side];
+        if (value !== undefined) {
+            if (!Number.isFinite(value) || value < 0)
+                throw new RangeError(`Invalid safe-area ${side} inset.`);
+            result[side] = value;
+        }
+    }
+    return result;
+}
+/** Publish a host's current safe area. Missing values are unavailable; zero is a real inset. */
+export function setCssEnvironment(host, insets) {
+    const next = snapshot(insets);
+    const previous = environments.get(host);
+    if (previous && sides.every((side) => previous[side] === next[side]))
+        return;
+    // An empty environment still establishes a window boundary: don't inherit another window's insets.
+    environments.set(host, next);
+    refreshCssEnvironment(host);
+}
+/** Remove the host boundary and re-evaluate styles against their next ancestor context. */
+export function clearCssEnvironment(host) {
+    if (environments.delete(host))
+        refreshCssEnvironment(host);
+}
+/** Bind a host-owned native observer. Call the returned function when that host is disposed. */
+export function bindCssEnvironment(host, source) {
+    if (bindings.has(host))
+        throw new Error('This host already has a CSS environment binding.');
+    const token = {};
+    bindings.set(host, token);
+    const update = () => {
+        if (bindings.get(host) === token)
+            setCssEnvironment(host, source.read());
+    };
+    let unsubscribe;
+    try {
+        update();
+        unsubscribe = source.subscribe(update);
+        update(); // Catch a change between the first read and subscription.
+    }
+    catch (error) {
+        bindings.delete(host);
+        try {
+            unsubscribe?.();
+        }
+        finally {
+            clearCssEnvironment(host);
+        }
+        throw error;
+    }
+    return () => {
+        if (bindings.get(host) !== token)
+            return;
+        bindings.delete(host);
+        try {
+            unsubscribe?.();
+        }
+        finally {
+            clearCssEnvironment(host);
+        }
+    };
+}
+function context(view) {
+    for (let current = view; current; current = current.parent ?? undefined) {
+        const value = environments.get(current);
+        if (value)
+            return value;
+    }
+    return undefined;
+}
+// Scan balanced CSS functions, preserving strings, comments and URL payloads.
+function close(value, start) {
+    let depth = 1;
+    for (let i = start; i < value.length; i++) {
+        if (value[i] === '\\') {
+            i++;
+            continue;
+        }
+        if (value[i] === '"' || value[i] === "'") {
+            const quote = value[i++];
+            while (i < value.length && value[i] !== quote) {
+                if (value[i] === '\\')
+                    i++;
+                i++;
+            }
+        }
+        else if (value[i] === '/' && value[i + 1] === '*') {
+            const end = value.indexOf('*/', i + 2);
+            if (end < 0)
+                return -1;
+            i = end + 1;
+        }
+        else if (value[i] === '(')
+            depth++;
+        else if (value[i] === ')' && --depth === 0)
+            return i;
+    }
+    return -1;
+}
+/** Substitute env() before the existing CSS math/unit parser; undefined means invalid/unavailable. */
+export function resolveCssEnvironment(value, insets = {}) {
+    let result = '';
+    for (let i = 0; i < value.length;) {
+        if (value[i] === '\\') {
+            result += value.slice(i, i + 2);
+            i += 2;
+            continue;
+        }
+        if (value[i] === '"' || value[i] === "'") {
+            const start = i;
+            const quote = value[i++];
+            while (i < value.length && value[i] !== quote) {
+                if (value[i] === '\\')
+                    i++;
+                i++;
+            }
+            result += value.slice(start, ++i);
+            continue;
+        }
+        if (value[i] === '/' && value[i + 1] === '*') {
+            const end = value.indexOf('*/', i + 2);
+            if (end < 0)
+                return undefined;
+            result += value.slice(i, end + 2);
+            i = end + 2;
+            continue;
+        }
+        const fn = /^([a-z_-][\w-]*)\(/i.exec(value.slice(i));
+        if (!fn) {
+            result += value[i++];
+            continue;
+        }
+        const start = i + fn[0].length;
+        const end = close(value, start);
+        if (end < 0)
+            return undefined;
+        const name = fn[1].toLowerCase();
+        const body = value.slice(start, end);
+        let replacement;
+        if (name === 'url')
+            replacement = value.slice(i, end + 1);
+        else if (name === 'env') {
+            // The first comma separates the environment name from an arbitrary fallback token sequence.
+            const comma = body.indexOf(',');
+            const identifier = (comma < 0 ? body : body.slice(0, comma)).replace(/\/\*[\s\S]*?\*\//g, ' ').trim();
+            const args = /^(-?[_a-zA-Z][_a-zA-Z0-9-]*)(?:\s+\+?\d+)*$/.exec(identifier);
+            if (!args)
+                return undefined;
+            const side = /^safe-area-inset-(top|right|bottom|left)$/.exec(identifier)?.[1];
+            const inset = side && insets[side];
+            if (typeof inset === 'number' && Number.isFinite(inset) && inset >= 0)
+                replacement = `${inset}px`;
+            else if (comma >= 0)
+                replacement = resolveCssEnvironment(body.slice(comma + 1).trim(), insets);
+        }
+        else {
+            const inner = resolveCssEnvironment(body, insets);
+            if (inner !== undefined)
+                replacement = `${fn[1]}(${inner})`;
+        }
+        if (replacement === undefined)
+            return undefined;
+        result += replacement;
+        i = end + 1;
+    }
+    return result;
+}
+const writesByTarget = new WeakMap();
+const targets = new Set();
+function replay(writes) {
+    const target = writes.target.deref();
+    if (target && writes.active) {
+        for (const [name, value] of Array.from(writes.values))
+            target[name] = value;
+    }
+}
+/** Replay after reparenting/native recreation; publish changes through setCssEnvironment instead. */
+export function refreshCssEnvironment(host) {
+    for (const ref of targets) {
+        const writes = ref.deref();
+        if (!writes?.target.deref()) {
+            if (writes)
+                stopWrites(writes);
+            targets.delete(ref);
+            continue;
+        }
+        for (let view = writes.owner?.deref(); view; view = view.parent ?? undefined) {
+            if (view === host) {
+                replay(writes);
+                break;
+            }
+        }
+    }
+}
+/** Core build adapter only: called at a leaf style setter, after cascade/var()/shorthand expansion. */
+export function environmentStyleValue(target, name, value) {
+    const style = target;
+    const owner = style.viewRef?.get?.() ?? style.viewRef?.deref?.() ?? style.view;
+    const text = typeof value === 'string' ? value : value?.css;
+    let writes = writesByTarget.get(target);
+    if (typeof text !== 'string' || !ENV.test(text)) {
+        writes?.values.delete(name);
+        if (writes && !writes.values.size)
+            releaseCssEnvironmentStyle(target);
+        return value;
+    }
+    ensureAutomaticEnvironment(owner);
+    if (!writes) {
+        writes = {
+            target: new WeakRef(target), owner: owner && new WeakRef(owner), values: new Map(), active: true,
+            loaded() { writes.active = true; replay(writes); },
+            unloaded() { writes.active = false; },
+        };
+        writesByTarget.set(target, writes);
+        targets.add(new WeakRef(writes));
+        owner?.on?.('loaded', writes.loaded);
+        owner?.on?.('unloaded', writes.unloaded);
+    }
+    writes.values.set(name, value);
+    let resolved = resolveCssEnvironment(text, context(owner));
+    if (resolved !== undefined && isCssEnvironmentShorthand(value)) {
+        try {
+            const pending = value[shorthand];
+            const part = pending.split(resolved)[pending.index];
+            resolved = typeof part === 'string' ? part : undefined;
+        }
+        catch {
+            resolved = undefined;
+        }
+    }
+    if (resolved === undefined) {
+        reportCssDiagnostic({ kind: 'not-implemented', name, value: text,
+            detail: 'env() is unavailable or invalid and has no usable fallback; the host must publish its window safe area' });
+        return text;
+    }
+    return resolved;
+}
+/** Stop replaying a released native style helper, including its lifecycle listeners. */
+export function releaseCssEnvironmentStyle(target) {
+    const writes = writesByTarget.get(target);
+    if (!writes)
+        return;
+    stopWrites(writes);
+    writesByTarget.delete(target);
+}
+function stopWrites(writes) {
+    const owner = writes.owner?.deref();
+    owner?.off?.('loaded', writes.loaded);
+    owner?.off?.('unloaded', writes.unloaded);
+    writes.values.clear();
+    writes.active = false;
+}

package/foreign-layout.js

@@ -1,3 +1,4 @@
+import { releaseCssEnvironmentStyle } from './css-environment';
 import { masonLayout as layout } from './display-density';
 import { widthProperty, heightProperty, minWidthProperty, minHeightProperty, maxWidthProperty, maxHeightProperty, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty } from '@nativescript/core/ui/styling/style-properties';
 import { alignSelfProperty, flexGrowProperty, flexShrinkProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
@@ -141,6 +142,7 @@ export function releaseForeignLayout(view) {
     }
     if (!view?.[foreignStyle_])
         return;
+    releaseCssEnvironmentStyle(view[foreignStyle_]);
     view[foreignStyle_].resetState();
     view[foreignStyle_] = undefined;
     const style = view.style;

package/index.android.d.ts

@@ -3,6 +3,8 @@ export { Scroll } from './scroll';
 export { ViewBase, Event } from './common';
 export type { ScrollBehavior, ScrollLogicalPosition, ScrollToOptions, ScrollIntoViewOptions } from './common';
 export { Style } from './style';
+export { setCssEnvironment, clearCssEnvironment, bindCssEnvironment, refreshCssEnvironment } from './css-environment';
+export type { CssSafeAreaInsets, CssEnvironmentHost, CssEnvironmentSource } from './css-environment';
 export { setCssDiagnostics, getCssDiagnostics, clearCssDiagnostics, formatCssDiagnostics, cssDiagnosticsEnabled } from './diagnostics';
 export { setCssUnitContext, cssUnits } from './units';
 export { registerAppFontsDirectory } from './fonts';

package/index.android.js

@@ -3,6 +3,7 @@ export { View } from './view';
 export { Scroll } from './scroll';
 export { ViewBase, Event } from './common';
 export { Style } from './style';
+export { setCssEnvironment, clearCssEnvironment, bindCssEnvironment, refreshCssEnvironment } from './css-environment';
 export { setCssDiagnostics, getCssDiagnostics, clearCssDiagnostics, formatCssDiagnostics, cssDiagnosticsEnabled } from './diagnostics';
 export { setCssUnitContext, cssUnits } from './units';
 export { registerAppFontsDirectory } from './fonts';

package/index.d.ts

@@ -4,6 +4,8 @@ export { Scroll } from './scroll';
 export { ViewBase, Event } from './common';
 export type { ScrollBehavior, ScrollLogicalPosition, ScrollToOptions, ScrollIntoViewOptions } from './common';
 export { Style } from './style';
+export { setCssEnvironment, clearCssEnvironment, bindCssEnvironment, refreshCssEnvironment } from './css-environment';
+export type { CssSafeAreaInsets, CssEnvironmentHost, CssEnvironmentSource } from './css-environment';
 export { setCssDiagnostics, getCssDiagnostics, clearCssDiagnostics, formatCssDiagnostics, cssDiagnosticsEnabled } from './diagnostics';
 export { setCssUnitContext, cssUnits } from './units';
 export { registerAppFontsDirectory } from './fonts';

package/index.ios.d.ts

@@ -3,6 +3,8 @@ export { Scroll } from './scroll';
 export { ViewBase, Event } from './common';
 export type { ScrollBehavior, ScrollLogicalPosition, ScrollToOptions, ScrollIntoViewOptions } from './common';
 export { Style } from './style';
+export { setCssEnvironment, clearCssEnvironment, bindCssEnvironment, refreshCssEnvironment } from './css-environment';
+export type { CssSafeAreaInsets, CssEnvironmentHost, CssEnvironmentSource } from './css-environment';
 export { setCssDiagnostics, getCssDiagnostics, clearCssDiagnostics, formatCssDiagnostics, cssDiagnosticsEnabled } from './diagnostics';
 export { setCssUnitContext, cssUnits } from './units';
 export { registerAppFontsDirectory } from './fonts';

package/index.ios.js

@@ -3,6 +3,7 @@ export { View } from './view';
 export { Scroll } from './scroll';
 export { ViewBase, Event } from './common';
 export { Style } from './style';
+export { setCssEnvironment, clearCssEnvironment, bindCssEnvironment, refreshCssEnvironment } from './css-environment';
 export { setCssDiagnostics, getCssDiagnostics, clearCssDiagnostics, formatCssDiagnostics, cssDiagnosticsEnabled } from './diagnostics';
 export { setCssUnitContext, cssUnits } from './units';
 export { registerAppFontsDirectory } from './fonts';

package/native-environment.android.d.ts

@@ -0,0 +1,3 @@
+import type { View } from '@nativescript/core';
+import type { CssEnvironmentSource } from './css-environment';
+export declare function nativeCssEnvironmentSource(view: View): CssEnvironmentSource;

package/native-environment.android.js

@@ -0,0 +1,69 @@
+const roots = new WeakMap();
+function readInsets(root) {
+    const native = root?.getRootWindowInsets();
+    if (!native)
+        return null;
+    // AndroidX is already a native core dependency. Its systemBars type excludes IME,
+    // including on API 23-29 where raw systemWindowInsetBottom can contain the keyboard.
+    const compat = androidx.core.view.WindowInsetsCompat.toWindowInsetsCompat(native, root);
+    const types = androidx.core.view.WindowInsetsCompat.Type;
+    const insets = compat.getInsets(types.systemBars() | types.displayCutout());
+    const density = root.getResources().getDisplayMetrics().density;
+    return { top: insets.top / density, right: insets.right / density, bottom: insets.bottom / density, left: insets.left / density };
+}
+function observeRoot(root, changed) {
+    let observation = roots.get(root);
+    if (!observation) {
+        const callbacks = new Set();
+        let previous = JSON.stringify(readInsets(root));
+        const listener = new android.view.ViewTreeObserver.OnPreDrawListener({
+            onPreDraw() {
+                const next = JSON.stringify(readInsets(root));
+                if (next !== previous) {
+                    previous = next;
+                    for (const callback of Array.from(callbacks))
+                        callback();
+                }
+                return true;
+            },
+        });
+        const observer = root.getViewTreeObserver();
+        observation = { callbacks, observer, listener };
+        roots.set(root, observation);
+        observer.addOnPreDrawListener(listener);
+        // Observe without replacing anyone's OnApplyWindowInsetsListener or consuming insets.
+        root.requestApplyInsets();
+    }
+    observation.callbacks.add(changed);
+    const current = observation;
+    return () => {
+        current.callbacks.delete(changed);
+        if (!current.callbacks.size) {
+            const observer = current.observer.isAlive() ? current.observer : root.getViewTreeObserver();
+            observer.removeOnPreDrawListener(current.listener);
+            roots.delete(root);
+        }
+    };
+}
+export function nativeCssEnvironmentSource(view) {
+    const rootOfView = () => view.nativeViewProtected?.getRootView();
+    return {
+        read: () => readInsets(rootOfView()),
+        subscribe(changed) {
+            let root;
+            let stop;
+            const select = () => {
+                const next = rootOfView();
+                if (next !== root) {
+                    stop?.();
+                    root = next;
+                    stop = next ? observeRoot(next, changed) : undefined;
+                }
+                changed();
+            };
+            view.on('layoutChanged', select);
+            select();
+            return () => { view.off('layoutChanged', select); stop?.(); };
+        },
+    };
+}

package/native-environment.d.ts

@@ -0,0 +1,3 @@
+import type { View } from '@nativescript/core';
+import type { CssEnvironmentSource } from './css-environment';
+export declare function nativeCssEnvironmentSource(view: View): CssEnvironmentSource;

package/native-environment.ios.d.ts

@@ -0,0 +1,3 @@
+import type { View } from '@nativescript/core';
+import type { CssEnvironmentSource } from './css-environment';
+export declare function nativeCssEnvironmentSource(view: View): CssEnvironmentSource;

package/native-environment.ios.js

@@ -0,0 +1,65 @@
+const windows = new WeakMap();
+let ObserverClass;
+function observeWindow(window, changed) {
+    let observation = windows.get(window);
+    if (!observation) {
+        if (!ObserverClass) {
+            var SafeAreaObserver = (function (_super) {
+                __extends(SafeAreaObserver, _super);
+                function SafeAreaObserver() {
+                    return _super !== null && _super.apply(this, arguments) || this;
+                }
+                SafeAreaObserver.prototype.safeAreaInsetsDidChange = function () { var _a; _super.prototype.safeAreaInsetsDidChange.call(this); (_a = this.changed) === null || _a === void 0 ? void 0 : _a.call(this); };
+                SafeAreaObserver.prototype.layoutSubviews = function () { var _a; _super.prototype.layoutSubviews.call(this); (_a = this.changed) === null || _a === void 0 ? void 0 : _a.call(this); };
+                return SafeAreaObserver;
+            }(UIView));
+            ObserverClass = SafeAreaObserver;
+        }
+        const observer = ObserverClass.new();
+        const callbacks = new Set();
+        observation = { callbacks, observer };
+        windows.set(window, observation);
+        observer.frame = window.bounds;
+        observer.autoresizingMask = 2 /* UIViewAutoresizing.FlexibleWidth */ | 16 /* UIViewAutoresizing.FlexibleHeight */;
+        observer.userInteractionEnabled = false;
+        observer.isAccessibilityElement = false;
+        observer.changed = () => { for (const callback of Array.from(callbacks))
+            callback(); };
+        window.addSubview(observer);
+    }
+    observation.callbacks.add(changed);
+    const current = observation;
+    return () => {
+        current.callbacks.delete(changed);
+        if (!current.callbacks.size) {
+            current.observer.changed = undefined;
+            current.observer.removeFromSuperview();
+            windows.delete(window);
+        }
+    };
+}
+export function nativeCssEnvironmentSource(view) {
+    const windowOfView = () => view.nativeViewProtected?.window;
+    return {
+        read() {
+            const insets = windowOfView()?.safeAreaInsets;
+            return insets ? { top: insets.top, right: insets.right, bottom: insets.bottom, left: insets.left } : null;
+        },
+        subscribe(changed) {
+            let window;
+            let stop;
+            const select = () => {
+                const next = windowOfView();
+                if (next !== window) {
+                    stop?.();
+                    window = next;
+                    stop = next ? observeWindow(next, changed) : undefined;
+                }
+                changed();
+            };
+            view.on('layoutChanged', select);
+            select();
+            return () => { view.off('layoutChanged', select); stop?.(); };
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/nativescript-mason-core",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "Independent NativeScript Mason layout, scrolling and foreign-view hosting",
   "license": "Apache-2.0",
   "main": "index",
@@ -29,6 +29,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "masonCoreCapabilities": {
+    "safeAreaEnvironment": "owning-window-v1"
+  },
   "masonCorePrototype": {
     "nativeHosts": true,
     "ios": {

package/plugin-README.md

@@ -179,7 +179,35 @@ and separately for simulators, emulators and physical devices.
 
 OS-input checks pass on arm64 iOS 27 Simulator and the API 35 Android emulator.
 Native row movement matches the reported scroll offset (137.3 points on iOS,
-94.9 logical pixels on Android). Physical-device OS input is not yet qualified.
+94.9 logical pixels on Android). The actual-Vite consumer also passes on the
+API 36 physical Android phone
+with registry core `1.0.0-beta.0` and current Xplat patches: a real inspector
+WebSocket responds, an OS tap changes the hook-driven label width from about
+90 to 130, and an OS swipe moves its native row by the reported 99.38 logical
+pixels before cleanup. Run the prepared fixture with:
+
+```sh
+MASON_CORE_ANDROID_SERIAL=DEVICE_SERIAL pnpm exec nx run \
+  nativescript-mason-core:test.consumer.android.input.device --inspector
+```
+
+Replace `DEVICE_SERIAL` with the authorized physical phone's adb serial.
+The published beta also passes the actual-Vite fixture on arm64 iOS 27
+Simulator: native HID tap changes width from 90 to 130 points, swipe produces
+matching native row movement and scroll offset (169.29 points), and cleanup
+runs once. With the dedicated simulator shut down and its resource reservation
+held, run:
+
+```sh
+pnpm exec nx run nativescript-mason-core:build.consumer.ios
+pnpm exec nx run nativescript-mason-core:test.consumer.ios.input
+```
+
+iOS physical runtime and input remain unqualified. The signed development app
+and a native UI-test runner build successfully. A temporary device test
+passes its tap/count checks, but fails its final post-drag assertion; it has
+not produced a passing consumer result. This does not resolve the separate
+intermittent Android emulator cold-start failures.
 
 ## Build an unsigned iOS device app
 
@@ -195,3 +223,12 @@ disabled. It checks that the app selects the device framework, embeds the
 device privacy bundle and generates the core bridge classes without optional
 HTML/text/widget declarations. This is build/metadata evidence only; no iOS
 physical-device runtime or distribution signing is qualified.
+
+
+## Safe-area environment resolver
+
+Core `1.0.0-beta.1` automatically binds loaded Mason roots to their owning
+native window when a subtree first uses `env()`. See the package README for
+window ownership, explicit source overrides, fallback semantics and headless
+coverage. Actual native inset dispatch/layout remains unqualified; Xplat keeps
+a qualification warning for this beta.

package/properties.d.ts

@@ -8,7 +8,7 @@ export interface MasonShorthand {
     longhands: ShorthandLonghand[];
     split(value: string): LonghandValue[];
 }
-export declare function shorthandConverter({ longhands, split }: MasonShorthand): (value: unknown) => [ShorthandLonghand, unknown][];
+export declare function shorthandConverter({ cssName, longhands, split }: MasonShorthand): (value: unknown) => [ShorthandLonghand, unknown][];
 export declare const textProperty: Property<ViewBase, string>;
 export declare const displayProperty: CssProperty<Style, Display>;
 export declare const filterProperty: CssProperty<Style, string>;

package/properties.js

@@ -1,3 +1,4 @@
+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. */
@@ -43,7 +44,7 @@ function isMasonView(style) {
     return false;
 }
 const CSS_WIDE_KEYWORDS = new Set(['initial', 'inherit', 'unset', 'revert']);
-export function shorthandConverter({ longhands, split }) {
+export function shorthandConverter({ cssName, longhands, split }) {
     return (value) => {
         const text = typeof value === 'number' ? String(value) : value;
         if (typeof text !== 'string') {
@@ -55,7 +56,8 @@ export function shorthandConverter({ longhands, split }) {
         if (!trimmed || CSS_WIDE_KEYWORDS.has(trimmed)) {
             return longhands.map((property) => [property, trimmed]);
         }
-        const parts = split(trimmed);
+        const parts = (['padding', 'margin', 'border-width'].includes(cssName) &&
+            cssEnvironmentShorthand(trimmed, split, longhands.length)) || split(trimmed);
         return longhands.map((property, i) => [property, parts[i]]);
     };
 }
@@ -908,7 +910,7 @@ function masonLengthDeclaration(value) {
 function sizingKeywordLength(value) {
     return isSizingKeyword(value) ? { unit: value.trim(), value: -2 } : undefined;
 }
-const MASON_SIZE_KEYS = [widthProperty, heightProperty].flatMap((property) => [property.name, property.cssName, property.cssLocalName]).filter((key) => typeof key === 'string' && key.length > 0);
+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
@@ -935,7 +937,7 @@ function masonStyleProto(proto) {
             set(value) {
                 beginStyleWrite(this, key, value);
                 try {
-                    set.call(this, masonLengthDeclaration(value));
+                    set.call(this, masonLengthDeclaration(environmentStyleValue(this, key, value)));
                 }
                 finally {
                     endStyleWrite();

package/style.js

@@ -1,3 +1,4 @@
+import { environmentStyleValue, cssEnvironmentSides } from './css-environment';
 import { layout as coreLayout } from '@nativescript/core/utils';
 import { cssUnits } from './units';
 import { displayDensity, masonLayout } from './display-density';
@@ -3374,7 +3375,7 @@ export class Style {
     }
     set inset(value) {
         if (typeof value === 'string') {
-            const sides = expandSidesShorthand(value);
+            const sides = cssEnvironmentSides(value) || expandSidesShorthand(value);
             if (sides) {
                 const wasInBatch = this.inBatch;
                 this.inBatch = true;
@@ -3592,7 +3593,7 @@ export class Style {
     }
     set margin(value) {
         if (typeof value === 'string') {
-            const sides = expandSidesShorthand(value);
+            const sides = cssEnvironmentSides(value) || expandSidesShorthand(value);
             if (sides) {
                 const wasInBatch = this.inBatch;
                 this.inBatch = true;
@@ -3810,7 +3811,7 @@ export class Style {
     }
     set padding(value) {
         if (typeof value === 'string') {
-            const sides = expandSidesShorthand(value);
+            const sides = cssEnvironmentSides(value) || expandSidesShorthand(value);
             if (sides) {
                 const wasInBatch = this.inBatch;
                 this.inBatch = true;
@@ -5716,6 +5717,10 @@ export class Style {
         return false ? (this._windowsCss.get('padding') ?? '') : '';
     }
     set paddingCss(value) {
+        if (typeof value === 'string' && /\benv\(/i.test(value)) {
+            Reflect.set(this, 'padding', value);
+            return;
+        }
         // a bare number is dip, matching other numeric setters; Android's
         // native parser treats "px" as unscaled device pixels, "dip" as scaled
         const strValue = typeof value === 'number' ? `${value}dip` : value;
@@ -5733,6 +5738,10 @@ export class Style {
         return false ? (this._windowsCss.get('margin') ?? '') : '';
     }
     set marginCss(value) {
+        if (typeof value === 'string' && /\benv\(/i.test(value)) {
+            Reflect.set(this, 'margin', value);
+            return;
+        }
         // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
         const strValue = typeof value === 'number' ? `${value}dip` : value;
         this.setPseudoCssStringValue('margin', strValue, () => nodeHelper().setMarginCss(this.nativeView, strValue), () => (this.appleStyle.marginCss = strValue));
@@ -5749,6 +5758,10 @@ export class Style {
         return false ? (this._windowsCss.get('inset') ?? '') : '';
     }
     set insetCss(value) {
+        if (typeof value === 'string' && /\benv\(/i.test(value)) {
+            Reflect.set(this, 'inset', value);
+            return;
+        }
         // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
         const strValue = typeof value === 'number' ? `${value}dip` : value;
         this.setPseudoCssStringValue('inset', strValue, () => nodeHelper().setInsetCss(this.nativeView, strValue), () => (this.appleStyle.insetCss = strValue));
@@ -7100,6 +7113,7 @@ export class Style {
     }
 }
 {
+    const environmentDelegates = new Set(["paddingCss", "marginCss", "insetCss", "background-color", "inset", "margin", "padding", "gridGap", "gap", "gridRowGap", "gridColumnGap", "box-shadow", "object-position", "border-style", "border-image", "font-stretch", "font-feature-settings", "word-spacing", "text-indent", "line-clamp", "-webkit-line-clamp", "transform-origin", "backdrop-filter", "mask-image", "mask-size", "mask-position", "mask-repeat", "mask-origin", "mask-clip", "mask-mode", "mask-composite", "clip-path", "mask-border-source", "mask-border-slice", "mask-border-width", "mask-border-outset", "mask-border-repeat", "mask-border-mode", "writing-mode", "unicode-bidi", "caret-color"]);
     const proto = Style.prototype;
     const names = Object.getOwnPropertyNames(proto);
     for (let i = 0; i < names.length; i++) {
@@ -7113,7 +7127,9 @@ export class Style {
             set(value) {
                 beginStyleWrite(this, name, value);
                 try {
-                    set.call(this, value);
+                    const resolved = environmentDelegates.has(name) ? value :
+                        environmentStyleValue(this, name, value);
+                    set.call(this, resolved);
                 }
                 finally {
                     endStyleWrite();