@nativescript/core 9.1.0-next.3 → 9.1.0-next.4

package/application/application-common.js

@@ -1,4 +1,3 @@
-import { CoreTypes } from '../core-types';
 import { CSSUtils } from '../css/system-classes';
 import { Device, Screen } from '../platform';
 import { profile } from '../profiling';
@@ -6,48 +5,76 @@ import { Trace } from '../trace';
 import { clearResolverCache, prepareAppForModuleResolver, _setResolver } from '../module-name-resolver/helpers';
 import { Builder } from '../ui/builder';
 import * as bindableResources from '../ui/core/bindable/bindable-resources';
-import { readyInitAccessibilityCssHelper, readyInitFontScale } from '../accessibility/accessibility-common';
-import { getAppMainEntry, isAppInBackground, setAppInBackground, setAppMainEntry } from './helpers-common';
+import { applyAccessibilityCssToRoot, readyInitAccessibilityCssHelper, readyInitFontScale } from '../accessibility/accessibility-common';
+import { getActiveWindow, getAppMainEntry, getAutoSystemAppearanceChanged, isAppInBackground, setActiveWindow, setAppInBackground, setAppMainEntry, setAutoSystemAppearanceChanged } from './helpers-common';
 import { getNativeScriptGlobals } from '../globals/global-utils';
 import { SDK_VERSION } from '../utils/constants';
-// prettier-ignore
-const ORIENTATION_CSS_CLASSES = [
-    `${CSSUtils.CLASS_PREFIX}${CoreTypes.DeviceOrientation.portrait}`,
-    `${CSSUtils.CLASS_PREFIX}${CoreTypes.DeviceOrientation.landscape}`,
-    `${CSSUtils.CLASS_PREFIX}${CoreTypes.DeviceOrientation.unknown}`,
-];
-// prettier-ignore
-const SYSTEM_APPEARANCE_CSS_CLASSES = [
-    `${CSSUtils.CLASS_PREFIX}${CoreTypes.SystemAppearance.light}`,
-    `${CSSUtils.CLASS_PREFIX}${CoreTypes.SystemAppearance.dark}`,
-];
-// prettier-ignore
-const LAYOUT_DIRECTION_CSS_CLASSES = [
-    `${CSSUtils.CLASS_PREFIX}${CoreTypes.LayoutDirection.ltr}`,
-    `${CSSUtils.CLASS_PREFIX}${CoreTypes.LayoutDirection.rtl}`,
-];
+import { NativeWindowEvents, WindowEvents } from '../native-window/native-window-interfaces';
+const ORIENTATION_CSS_CLASSES = CSSUtils.ORIENTATION_CSS_CLASSES;
+const SYSTEM_APPEARANCE_CSS_CLASSES = CSSUtils.SYSTEM_APPEARANCE_CSS_CLASSES;
+const LAYOUT_DIRECTION_CSS_CLASSES = CSSUtils.LAYOUT_DIRECTION_CSS_CLASSES;
 const globalEvents = getNativeScriptGlobals().events;
 // Scene lifecycle event names
+/**
+ * @deprecated Use `NativeWindowEvents` from `@nativescript/core/native-window` instead.
+ */
 export const SceneEvents = {
+    /** @deprecated Use `NativeWindowEvents.sceneWillConnect` instead. */
     sceneWillConnect: 'sceneWillConnect',
+    /** @deprecated Use `NativeWindowEvents.sceneDidActivate` instead. */
     sceneDidActivate: 'sceneDidActivate',
+    /** @deprecated Use `NativeWindowEvents.sceneWillResignActive` instead. */
     sceneWillResignActive: 'sceneWillResignActive',
+    /** @deprecated Use `NativeWindowEvents.sceneWillEnterForeground` instead. */
     sceneWillEnterForeground: 'sceneWillEnterForeground',
+    /** @deprecated Use `NativeWindowEvents.sceneDidEnterBackground` instead. */
     sceneDidEnterBackground: 'sceneDidEnterBackground',
+    /** @deprecated Use `NativeWindowEvents.sceneDidDisconnect` instead. */
     sceneDidDisconnect: 'sceneDidDisconnect',
+    /** @deprecated Use the Application 'windowOpen' event and NativeWindow.setContent() instead. */
     sceneContentSetup: 'sceneContentSetup',
 };
 export class ApplicationCommon {
+    /**
+     * Boolean to enable/disable systemAppearanceChanged
+     */
+    get autoSystemAppearanceChanged() {
+        return getAutoSystemAppearanceChanged();
+    }
+    set autoSystemAppearanceChanged(value) {
+        setAutoSystemAppearanceChanged(value);
+    }
     /**
      * @internal - should not be constructed by the user.
      */
     constructor() {
+        /**
+         * @deprecated Use the 'ready' event for application initialization and Application.setWindowContentResolver() to provide window UI. 'launch' continues to fire before the first window's content is created, and its 'root' property is still honored, for backwards compatibility. It will not fire for additional windows or for background launches.
+         */
         this.launchEvent = 'launch';
+        /**
+         * Raised once per JS context, as soon as the context is initialized. It is never deferred,
+         * so it also fires on a background launch where no window is created.
+         *
+         * Guaranteed ordering: `ready` -> `windowOpen` -> raw connect/create events -> content
+         * resolution (the legacy `launch` bridge runs here, for the first window only) ->
+         * `contentLoaded` -> `activate`/`displayed`.
+         */
+        this.readyEvent = 'ready';
+        /**
+         * Reflects whole-app state: with multiple windows it is raised once the app itself is
+         * no longer in the foreground, not when an individual window backgrounds. Listen on a
+         * NativeWindow for per-window state.
+         */
         this.suspendEvent = 'suspend';
         this.displayedEvent = 'displayed';
         this.backgroundEvent = 'background';
         this.foregroundEvent = 'foreground';
         this.resumeEvent = 'resume';
+        /**
+         * On Android, raised when the last window closes; the process may stay alive.
+         * On iOS, raised when the process itself terminates.
+         */
         this.exitEvent = 'exit';
         this.lowMemoryEvent = 'lowMemory';
         this.uncaughtErrorEvent = 'uncaughtError';
@@ -60,6 +87,9 @@ export class ApplicationCommon {
         this.loadAppCssEvent = 'loadAppCss';
         this.cssChangedEvent = 'cssChanged';
         this.initRootViewEvent = 'initRootView';
+        this.windowOpenEvent = WindowEvents.windowOpen;
+        this.windowCloseEvent = WindowEvents.windowClose;
+        this.primaryWindowChangedEvent = WindowEvents.primaryWindowChanged;
         // Application events go through the global events.
         this.on = globalEvents.on.bind(globalEvents);
         this.once = globalEvents.once.bind(globalEvents);
@@ -69,11 +99,15 @@ export class ApplicationCommon {
         this._inBackground = false;
         this._suspended = false;
         this._cssFile = './app.css';
+        this._readyNotified = false;
+        this._appCssLoaded = false;
+        this._launchBridgeConsumed = false;
+        this._windowContentResolver = null;
         this.started = false;
-        /**
-         * Boolean to enable/disable systemAppearanceChanged
-         */
-        this.autoSystemAppearanceChanged = true;
+        // --- NativeWindow registry ---
+        this._windows = [];
+        // --- Primary window traits ---
+        this._traitsWindow = null;
         getNativeScriptGlobals().appInstanceReady = true;
         global.__onUncaughtError = (error) => {
             this.notify({
@@ -151,18 +185,37 @@ export class ApplicationCommon {
         CSSUtils.removeSystemCssClass(cssClass);
         rootView.cssClasses.delete(cssClass);
     }
+    /**
+     * Same as {@link applyCssClass}, minus the system class list: window-scoped classes
+     * must not leak into it, because it seeds every window's root view.
+     */
+    applyWindowScopedCssClass(rootView, cssClasses, newCssClass) {
+        if (rootView.cssClasses.has(newCssClass)) {
+            return;
+        }
+        cssClasses.forEach((cssClass) => rootView.cssClasses.delete(cssClass));
+        rootView.cssClasses.add(newCssClass);
+        this.increaseStyleScopeApplicationCssSelectorVersion(rootView);
+    }
+    /**
+     * The modal registry is process-wide, so only the modals presented over this root
+     * view may follow its window-scoped classes.
+     */
+    getOwnedModalViews(rootView) {
+        return rootView._getRootModalViews().filter((modalView) => modalView._getRootModalHost() === rootView);
+    }
     increaseStyleScopeApplicationCssSelectorVersion(rootView) {
         const styleScope = rootView._styleScope ?? rootView?.currentPage?._styleScope;
         if (styleScope) {
             styleScope._increaseApplicationCssSelectorVersion();
         }
     }
-    setRootViewCSSClasses(rootView) {
+    setRootViewCSSClasses(rootView, window) {
         const platform = Device.os.toLowerCase();
         const deviceType = Device.deviceType.toLowerCase();
-        const orientation = this.orientation();
-        const systemAppearance = this.systemAppearance();
-        const layoutDirection = this.layoutDirection();
+        const orientation = window ? window.orientation() : this.orientation();
+        const systemAppearance = window ? window.systemAppearance() : this.systemAppearance();
+        const layoutDirection = window ? window.layoutDirection() : this.layoutDirection();
         if (platform) {
             CSSUtils.pushToSystemCssClasses(`${CSSUtils.CLASS_PREFIX}${platform}`);
             // SDK Version CSS classes
@@ -174,18 +227,20 @@ export class ApplicationCommon {
         if (deviceType) {
             CSSUtils.pushToSystemCssClasses(`${CSSUtils.CLASS_PREFIX}${deviceType}`);
         }
+        rootView.cssClasses.add(CSSUtils.ROOT_VIEW_CSS_CLASS);
+        const rootViewCssClasses = CSSUtils.getSystemCssClasses();
+        rootViewCssClasses.forEach((c) => rootView.cssClasses.add(c));
+        // Two windows can disagree on these, so they never reach the process-wide
+        // system class list — see CSSUtils.WINDOW_SCOPED_CSS_CLASSES.
         if (orientation) {
-            CSSUtils.pushToSystemCssClasses(`${CSSUtils.CLASS_PREFIX}${orientation}`);
+            rootView.cssClasses.add(`${CSSUtils.CLASS_PREFIX}${orientation}`);
         }
         if (systemAppearance) {
-            CSSUtils.pushToSystemCssClasses(`${CSSUtils.CLASS_PREFIX}${systemAppearance}`);
+            rootView.cssClasses.add(`${CSSUtils.CLASS_PREFIX}${systemAppearance}`);
         }
         if (layoutDirection) {
-            CSSUtils.pushToSystemCssClasses(`${CSSUtils.CLASS_PREFIX}${layoutDirection}`);
+            rootView.cssClasses.add(`${CSSUtils.CLASS_PREFIX}${layoutDirection}`);
         }
-        rootView.cssClasses.add(CSSUtils.ROOT_VIEW_CSS_CLASS);
-        const rootViewCssClasses = CSSUtils.getSystemCssClasses();
-        rootViewCssClasses.forEach((c) => rootView.cssClasses.add(c));
         this.increaseStyleScopeApplicationCssSelectorVersion(rootView);
         rootView._onCssStateChange();
         if (Trace.isEnabled()) {
@@ -215,7 +270,286 @@ export class ApplicationCommon {
     getMainEntry() {
         return getAppMainEntry();
     }
+    /**
+     * Sets the callback that supplies the UI for windows that need content.
+     * Pass `null` to remove a previously set resolver.
+     */
+    setWindowContentResolver(resolver) {
+        this._windowContentResolver = resolver ?? null;
+    }
+    /**
+     * @returns The callback currently supplying window content, if any.
+     */
+    getWindowContentResolver() {
+        return this._windowContentResolver;
+    }
+    /**
+     * Get the primary NativeWindow.
+     */
+    get primaryWindow() {
+        return this._windows.find((nw) => nw.isPrimary);
+    }
+    /**
+     * Get the NativeWindow the user is currently interacting with - the one that activated most
+     * recently and is still attached. Falls back to the primary window while no window holds
+     * activation, which is the case before the first window activates and on a platform that
+     * never raises `activate`.
+     */
+    get activeWindow() {
+        const active = getActiveWindow();
+        if (active && active.state === 'attached' && this._windows.indexOf(active) !== -1) {
+            return active;
+        }
+        return this.primaryWindow;
+    }
+    getWindows(role) {
+        if (role === 'all') {
+            return [...this._windows];
+        }
+        const roles = role ? (Array.isArray(role) ? role : [role]) : ['application', 'embedded'];
+        return this._windows.filter((nw) => roles.indexOf(nw.role) !== -1);
+    }
+    /**
+     * Get a registered NativeWindow by its id.
+     */
+    getWindowById(id) {
+        return this._windows.find((nw) => nw.id === id);
+    }
+    /**
+     * Opens a new window.
+     *
+     * @param options Options for the new window, including data to hand to it.
+     */
+    openWindow(options) {
+        throw new Error('openWindow() is not supported on this platform.');
+    }
+    /**
+     * @internal - Get all registered NativeWindows, whatever their role.
+     */
+    _getWindows() {
+        return [...this._windows];
+    }
+    /**
+     * @internal - Register a NativeWindow created by the platform lifecycle.
+     */
+    _registerWindow(nativeWindow) {
+        this._windows.push(nativeWindow);
+        // A closing window drops its own listeners, so this is never explicitly removed.
+        nativeWindow.on(NativeWindowEvents.activate, this.onWindowActivated, this);
+        if (nativeWindow.isPrimary) {
+            this.trackPrimaryWindowTraits(nativeWindow);
+        }
+        this._onWindowRegistered(nativeWindow);
+        this.notify({
+            eventName: this.windowOpenEvent,
+            object: this,
+            window: nativeWindow,
+        });
+    }
+    /**
+     * @internal - Unregister a NativeWindow when its native surface is gone for good.
+     */
+    _unregisterWindow(nativeWindow) {
+        const idx = this._windows.indexOf(nativeWindow);
+        if (idx >= 0) {
+            this._windows.splice(idx, 1);
+        }
+        if (getActiveWindow() === nativeWindow) {
+            setActiveWindow(undefined);
+        }
+        this.notify({
+            eventName: this.windowCloseEvent,
+            object: this,
+            window: nativeWindow,
+        });
+        // If primary was removed, promote the next window that can actually host content
+        if (nativeWindow.isPrimary) {
+            nativeWindow._setIsPrimary(false);
+            const promoted = this.getWindows().find((nw) => nw.state === 'attached');
+            this.trackPrimaryWindowTraits(promoted);
+            if (promoted) {
+                promoted._setIsPrimary(true);
+                this._onPrimaryWindowPromoted(promoted);
+                this.notify({
+                    eventName: this.primaryWindowChangedEvent,
+                    object: this,
+                    window: promoted,
+                });
+            }
+        }
+        nativeWindow._destroy();
+    }
+    /**
+     * Hook for platform-specific bookkeeping right after a window joins the registry,
+     * before `windowOpen` is raised.
+     */
+    _onWindowRegistered(nativeWindow) {
+        // noop
+    }
+    /**
+     * Hook for platform-specific bookkeeping right after a window takes over the primary
+     * role, before `primaryWindowChanged` is raised.
+     */
+    _onPrimaryWindowPromoted(nativeWindow) {
+        // noop
+    }
+    /**
+     * Points the application-level orientation, appearance and layout direction at the
+     * primary window, which owns those values now that each window has its own.
+     */
+    trackPrimaryWindowTraits(nativeWindow) {
+        const target = nativeWindow ?? null;
+        if (this._traitsWindow === target) {
+            return;
+        }
+        const previous = this._traitsWindow;
+        if (previous) {
+            previous.off(NativeWindowEvents.orientationChanged, this.onWindowOrientationChanged, this);
+            previous.off(NativeWindowEvents.systemAppearanceChanged, this.onWindowSystemAppearanceChanged, this);
+            previous.off(NativeWindowEvents.layoutDirectionChanged, this.onWindowLayoutDirectionChanged, this);
+        }
+        this._traitsWindow = target;
+        if (!target) {
+            return;
+        }
+        target.on(NativeWindowEvents.orientationChanged, this.onWindowOrientationChanged, this);
+        target.on(NativeWindowEvents.systemAppearanceChanged, this.onWindowSystemAppearanceChanged, this);
+        target.on(NativeWindowEvents.layoutDirectionChanged, this.onWindowLayoutDirectionChanged, this);
+        this.syncTraitsFromWindow(target);
+    }
+    /**
+     * Adopts the window's values. The very first window seeds them quietly — there is no
+     * previous application state for it to differ from — while a later promotion raises
+     * the change events, because app code observed the outgoing window's values.
+     */
+    syncTraitsFromWindow(nativeWindow) {
+        const orientation = nativeWindow.orientation();
+        if (orientation) {
+            if (this._orientation === undefined) {
+                this._orientation = orientation;
+            }
+            else {
+                this.setOrientation(orientation);
+            }
+        }
+        const systemAppearance = nativeWindow.systemAppearance();
+        if (systemAppearance) {
+            if (this._systemAppearance === undefined) {
+                this._systemAppearance = systemAppearance;
+            }
+            else {
+                this.setSystemAppearance(systemAppearance);
+            }
+        }
+        const layoutDirection = nativeWindow.layoutDirection();
+        if (layoutDirection) {
+            if (this._layoutDirection === undefined) {
+                this._layoutDirection = layoutDirection;
+            }
+            else {
+                this.setLayoutDirection(layoutDirection);
+            }
+        }
+    }
+    onWindowActivated(data) {
+        setActiveWindow(data.window);
+    }
+    onWindowOrientationChanged(data) {
+        this.setOrientation(data.newValue);
+    }
+    onWindowSystemAppearanceChanged(data) {
+        this.setSystemAppearance(data.newValue);
+    }
+    onWindowLayoutDirectionChanged(data) {
+        this.setLayoutDirection(data.newValue);
+    }
+    /**
+     * @internal - raises `ready` at most once per JS context.
+     */
+    notifyReady() {
+        if (this._readyNotified) {
+            return;
+        }
+        this._readyNotified = true;
+        getNativeScriptGlobals().setLaunched();
+        this.notify({
+            eventName: this.readyEvent,
+            object: this,
+            ios: this.ios,
+            android: this.android,
+        });
+    }
+    /**
+     * @internal - produces the content for a window that has none.
+     *
+     * Resolution order: the window content resolver, then the legacy `launch` event
+     * (offered to the first window that asks for content and to no other), then the
+     * application main entry. A resolver or a `launch` handler returning `null` takes
+     * ownership of the content, so nothing else is tried. A missing main entry leaves
+     * the window empty instead of throwing, because content can still arrive later
+     * through `run()`/`resetRootView()`.
+     *
+     * @param options.install `false` returns the resolved view instead of applying it,
+     * for platform pipelines that install the root view on the native surface themselves.
+     * @param options.launchData platform payload merged into the legacy `launch` event args.
+     * @returns The resolved view, or `null` when no content was produced.
+     */
+    _resolveWindowContent(window, request, options) {
+        const content = this.resolveWindowContent(request, options?.launchData);
+        if (content == null) {
+            return null;
+        }
+        if (options?.install === false) {
+            return this.buildContentView(content);
+        }
+        window.setContent(content);
+        return window.rootView;
+    }
+    resolveWindowContent(request, launchData) {
+        const launchBridgeAvailable = !this._launchBridgeConsumed;
+        this._launchBridgeConsumed = true;
+        const resolver = this._windowContentResolver;
+        if (resolver) {
+            const resolved = resolver(request);
+            // `null` means the resolver supplies the content itself; only `undefined` falls through.
+            if (resolved !== undefined) {
+                this._ensureAppCssLoaded();
+                return resolved;
+            }
+        }
+        if (launchBridgeAvailable) {
+            const root = this.notifyLaunch(launchData);
+            if (root === null) {
+                return null;
+            }
+            if (root) {
+                return root;
+            }
+        }
+        this._ensureAppCssLoaded();
+        const mainEntry = getAppMainEntry();
+        return mainEntry ? Builder.createViewFromEntry(mainEntry) : undefined;
+    }
+    buildContentView(content) {
+        if (typeof content === 'string') {
+            return Builder.createViewFromEntry({ moduleName: content });
+        }
+        const entry = content;
+        return entry.moduleName || entry.create ? Builder.createViewFromEntry(entry) : content;
+    }
+    /**
+     * Loads the app CSS once per JS context. On the legacy `launch` path this has to run
+     * after the handlers, which are allowed to call `setCssFileName()`.
+     */
+    _ensureAppCssLoaded() {
+        if (this._appCssLoaded) {
+            return;
+        }
+        this._appCssLoaded = true;
+        this.loadAppCss();
+    }
     notifyLaunch(additionalLanchEventData) {
+        this._launchBridgeConsumed = true;
         const launchArgs = {
             eventName: this.launchEvent,
             object: this,
@@ -224,7 +558,7 @@ export class ApplicationCommon {
             ...additionalLanchEventData,
         };
         this.notify(launchArgs);
-        this.loadAppCss();
+        this._ensureAppCssLoaded();
         return launchArgs.root;
     }
     createRootView(view, fireLaunchEvent = false, additionalLanchEventData) {
@@ -254,10 +588,15 @@ export class ApplicationCommon {
         setAppMainEntry(typeof entry === 'string' ? { moduleName: entry } : entry);
         // rest of implementation is platform specific
     }
-    initRootView(rootView) {
-        this.setRootViewCSSClasses(rootView);
+    /**
+     * @param window the window the root view belongs to. Supplies the window-scoped CSS
+     * classes; without it they come from the primary window.
+     */
+    initRootView(rootView, window) {
+        this.setRootViewCSSClasses(rootView, window);
         readyInitAccessibilityCssHelper();
         readyInitFontScale();
+        applyAccessibilityCssToRoot(rootView);
         this.notify({ eventName: this.initRootViewEvent, rootView });
     }
     /**
@@ -348,18 +687,20 @@ export class ApplicationCommon {
             object: this,
         });
     }
+    /**
+     * @deprecated Use Application.primaryWindow?.orientation() - or the NativeWindow of the relevant view - instead. Continues to reflect the primary window.
+     */
     orientation() {
-        return (this._orientation ?? (this._orientation = this.getOrientation()));
+        return this.primaryWindow?.orientation() ?? (this._orientation ?? (this._orientation = this.getOrientation()));
     }
     orientationChanged(rootView, newOrientation) {
         if (!rootView) {
             return;
         }
         const newOrientationCssClass = `${CSSUtils.CLASS_PREFIX}${newOrientation}`;
-        this.applyCssClass(rootView, ORIENTATION_CSS_CLASSES, newOrientationCssClass, true);
-        const rootModalViews = rootView._getRootModalViews();
-        rootModalViews.forEach((rootModalView) => {
-            this.applyCssClass(rootModalView, ORIENTATION_CSS_CLASSES, newOrientationCssClass, true);
+        this.applyWindowScopedCssClass(rootView, ORIENTATION_CSS_CLASSES, newOrientationCssClass);
+        this.getOwnedModalViews(rootView).forEach((rootModalView) => {
+            this.applyWindowScopedCssClass(rootModalView, ORIENTATION_CSS_CLASSES, newOrientationCssClass);
             // Trigger state change for root modal view classes and media queries
             rootModalView._onCssStateChange();
         });
@@ -391,15 +732,17 @@ export class ApplicationCommon {
             object: this,
         });
     }
+    /**
+     * @deprecated Use Application.primaryWindow?.systemAppearance() - or the NativeWindow of the relevant view - instead. Continues to reflect the primary window.
+     */
     systemAppearance() {
-        // return cached value, or get it from the platform specific override
-        return (this._systemAppearance ?? (this._systemAppearance = this.getSystemAppearance()));
+        return this.primaryWindow?.systemAppearance() ?? (this._systemAppearance ?? (this._systemAppearance = this.getSystemAppearance()));
     }
     /**
      * enable/disable systemAppearanceChanged
      */
     setAutoSystemAppearanceChanged(value) {
-        this.autoSystemAppearanceChanged = value;
+        setAutoSystemAppearanceChanged(value);
     }
     /**
      * Updates root view classes including those of modals
@@ -411,10 +754,9 @@ export class ApplicationCommon {
             return;
         }
         const newSystemAppearanceCssClass = `${CSSUtils.CLASS_PREFIX}${newSystemAppearance}`;
-        this.applyCssClass(rootView, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass, true);
-        const rootModalViews = rootView._getRootModalViews();
-        rootModalViews.forEach((rootModalView) => {
-            this.applyCssClass(rootModalView, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass, true);
+        this.applyWindowScopedCssClass(rootView, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass);
+        this.getOwnedModalViews(rootView).forEach((rootModalView) => {
+            this.applyWindowScopedCssClass(rootModalView, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass);
             // Trigger state change for root modal view classes and media queries
             rootModalView._onCssStateChange();
         });
@@ -439,9 +781,11 @@ export class ApplicationCommon {
             object: this,
         });
     }
+    /**
+     * @deprecated Use Application.primaryWindow?.layoutDirection() - or the NativeWindow of the relevant view - instead. Continues to reflect the primary window.
+     */
     layoutDirection() {
-        // return cached value, or get it from the platform specific override
-        return (this._layoutDirection ?? (this._layoutDirection = this.getLayoutDirection()));
+        return this.primaryWindow?.layoutDirection() ?? (this._layoutDirection ?? (this._layoutDirection = this.getLayoutDirection()));
     }
     /**
      * Updates root view classes including those of modals
@@ -453,10 +797,9 @@ export class ApplicationCommon {
             return;
         }
         const newLayoutDirectionCssClass = `${CSSUtils.CLASS_PREFIX}${newLayoutDirection}`;
-        this.applyCssClass(rootView, LAYOUT_DIRECTION_CSS_CLASSES, newLayoutDirectionCssClass, true);
-        const rootModalViews = rootView._getRootModalViews();
-        rootModalViews.forEach((rootModalView) => {
-            this.applyCssClass(rootModalView, LAYOUT_DIRECTION_CSS_CLASSES, newLayoutDirectionCssClass, true);
+        this.applyWindowScopedCssClass(rootView, LAYOUT_DIRECTION_CSS_CLASSES, newLayoutDirectionCssClass);
+        this.getOwnedModalViews(rootView).forEach((rootModalView) => {
+            this.applyWindowScopedCssClass(rootModalView, LAYOUT_DIRECTION_CSS_CLASSES, newLayoutDirectionCssClass);
             // Trigger state change for root modal view classes and media queries
             rootModalView._onCssStateChange();
         });