@needle-tools/engine 5.1.0-alpha.1 → 5.1.0-alpha.3

package/src/engine/api.ts

@@ -114,6 +114,9 @@ export * from "./engine_addressables.js";
 /** Animation playback and control utilities */
 export { AnimationUtils } from "./engine_animation.js";
 
+/** Standalone audio clip for playback control */
+export { AudioClip } from "./engine_audio.js";
+
 /** Application-level state and utilities */
 export { Application } from "./engine_application.js";
 
@@ -336,6 +339,9 @@ export { loadPMREM } from "./engine_pmrem.js";
 /** Scene lighting data and environment configuration */
 export * from "./engine_scenelighting.js";
 
+/** Typed scene data proxy — maps SceneData interface to live component instances */
+export { getSceneData, needle } from "./engine_scenedata.js";
+
 
 // ============================================================================
 // SERIALIZATION
@@ -436,4 +442,15 @@ export * from "./webcomponents/needle-engine.loading.js";
  * XR API: NeedleXRSession, NeedleXRController, XRRig.
  * @see {@link https://engine.needle.tools/docs/xr.html | XR Documentation}
  */
-export * from "./xr/api.js"
+export * from "./xr/api.js"
+
+/**
+ * HTML ↔ 3D component binding types, similar to Svelte's `PageData`.
+ * `SceneData` is a nested interface augmented per-project by the `needle:dts-generator`
+ * Vite plugin — it maps scene node names to their components and typed fields.
+ *
+ * @example
+ * import type { SceneData } from "@needle-tools/engine";
+ * type OrbitSettings = SceneData["Camera"]["OrbitControls"];
+ */
+export type { SceneData } from "needle-bindings";

package/src/engine/debug/debug_environment.ts

@@ -15,7 +15,7 @@ export function isDevEnvironment(): boolean {
     let res = isLocalNetwork();
     if (!res) {
         // is stackblitz?
-        res = window.location.hostname.endsWith(".local-credentialless.webcontainer.io");
+        res = typeof window !== "undefined" && window.location.hostname.endsWith(".local-credentialless.webcontainer.io");
     }
     _cachedDevEnvironment = res;
     return res;

package/src/engine/debug/debug_spatial_console.ts

@@ -12,13 +12,16 @@ import { onError } from "./debug_overlay.js";
 
 let _isActive = false;
 
-// enable the spatial console if we receive an error while in dev session and in XR
-onError((...args: any[]) => {
-    if (isDevEnvironment() && ContextRegistry.Current?.isInXR) {
-        enableSpatialConsole(true);
-        onLog("error", ...args);
-    }
-})
+/** @internal */
+export function initSpatialConsole() {
+    // enable the spatial console if we receive an error while in dev session and in XR
+    onError((...args: any[]) => {
+        if (isDevEnvironment() && ContextRegistry.Current?.isInXR) {
+            enableSpatialConsole(true);
+            onLog("error", ...args);
+        }
+    });
+}
 
 
 /** Enable a spatial debug console that follows the camera */

package/src/engine/engine_addressables.ts

@@ -567,7 +567,6 @@ class AddressableSerializer extends TypeSerializer {
     }
 
 }
-new AddressableSerializer();
 
 
 
@@ -703,7 +702,6 @@ export class ImageReferenceSerializer extends TypeSerializer {
         return undefined;
     }
 }
-new ImageReferenceSerializer();
 
 
 
@@ -772,4 +770,9 @@ export class FileReferenceSerializer extends TypeSerializer {
         return undefined;
     }
 }
-new FileReferenceSerializer();
+/** @internal */
+export function initAddressableSerializers() {
+    new AddressableSerializer();
+    new ImageReferenceSerializer();
+    new FileReferenceSerializer();
+}

package/src/engine/engine_application.ts

@@ -31,12 +31,14 @@ export function internalOnUserInputRegistered() {
     userInteractionCallbacks.length = 0;
     copy.forEach(cb => cb());
 }
-document.addEventListener('mousedown', internalOnUserInputRegistered);
-document.addEventListener('pointerup', internalOnUserInputRegistered);
-document.addEventListener('click', internalOnUserInputRegistered);
-document.addEventListener('dragstart', internalOnUserInputRegistered);
-document.addEventListener('touchend', internalOnUserInputRegistered);
-document.addEventListener('keydown', internalOnUserInputRegistered);
+if (typeof document !== "undefined") {
+    document.addEventListener('mousedown', internalOnUserInputRegistered);
+    document.addEventListener('pointerup', internalOnUserInputRegistered);
+    document.addEventListener('click', internalOnUserInputRegistered);
+    document.addEventListener('dragstart', internalOnUserInputRegistered);
+    document.addEventListener('touchend', internalOnUserInputRegistered);
+    document.addEventListener('keydown', internalOnUserInputRegistered);
+}
 
 
 // User Activation should be available across browsers since November 2023 https://developer.mozilla.org/en-US/docs/Web/API/UserActivation

package/src/engine/engine_audio.ts

@@ -21,4 +21,188 @@ export function ensureAudioContextIsResumed() {
             }, 500);
         });
     });
+}
+
+
+/**
+ * Represents an audio clip that can be loaded and played independently.
+ * The AudioClip class encapsulates the URL of the audio resource and provides
+ * methods for playback control (play, pause, stop) and querying duration.
+ */
+export class AudioClip {
+
+    /**
+     * Creates a new AudioClip instance with the specified URL.
+     * @param url The URL of the audio resource to load. This can be a path to an audio file or a MediaStream URL.
+     */
+    constructor(public readonly url: string) {
+    }
+
+    /** Whether the clip is currently playing.
+     * @returns `true` if the clip is actively playing audio.
+     */
+    get isPlaying(): boolean {
+        return this._audioElement !== undefined
+            && !this._audioElement.paused
+            && !this._audioElement.ended;
+    }
+
+    /**
+     * The total duration of the audio clip in seconds.
+     * Loads the audio metadata if not already available.
+     * @returns A promise that resolves with the duration in seconds.
+     */
+    getDuration(): Promise<number> {
+        if (this._duration !== undefined) {
+            return Promise.resolve(this._duration);
+        }
+        return this.ensureAudioElement().then(audio => {
+            this._duration = audio.duration;
+            return audio.duration;
+        });
+    }
+
+    /**
+     * Plays the audio clip from the current position.
+     * @returns A promise that resolves when playback finishes, or rejects on error.
+     * If the clip is looping, the promise will never resolve on its own – call {@link stop} or {@link pause} to end playback.
+     */
+    // #region Play
+    play(): Promise<void> {
+        return this.ensureAudioElement().then(audio => {
+            return new Promise<void>((resolve, reject) => {
+                const onEnded = () => {
+                    cleanup();
+                    resolve();
+                };
+                const onError = () => {
+                    cleanup();
+                    reject(new Error(`Playback error for ${this.url}`));
+                };
+                const onPause = () => {
+                    // pause/stop also resolve the promise
+                    cleanup();
+                    resolve();
+                };
+                const cleanup = () => {
+                    audio.removeEventListener("ended", onEnded);
+                    audio.removeEventListener("error", onError);
+                    audio.removeEventListener("pause", onPause);
+                };
+                audio.addEventListener("ended", onEnded);
+                audio.addEventListener("error", onError);
+                audio.addEventListener("pause", onPause);
+                audio.play().catch(err => {
+                    cleanup();
+                    reject(err);
+                });
+            });
+        });
+    }
+
+    /**
+     * Pauses playback at the current position.
+     * Call {@link play} to resume.
+     */
+    // #region Pause/Stop
+    pause(): void {
+        this._audioElement?.pause();
+    }
+
+    /**
+     * Stops playback and resets the position to the beginning.
+     */
+    stop(): void {
+        if (this._audioElement) {
+            this._audioElement.pause();
+            this._audioElement.currentTime = 0;
+        }
+    }
+
+    /** Whether the clip should loop when reaching the end. */
+    get loop(): boolean { return this._loop; }
+    set loop(value: boolean) {
+        this._loop = value;
+        if (this._audioElement) this._audioElement.loop = value;
+    }
+
+    /** Playback volume from 0 (silent) to 1 (full). */
+    get volume(): number { return this._volume; }
+    set volume(value: number) {
+        this._volume = value;
+        if (this._audioElement) this._audioElement.volume = value;
+    }
+
+    /** Current playback position in seconds. */
+    get currentTime(): number { return this._audioElement?.currentTime ?? 0; }
+    set currentTime(value: number) {
+        if (this._audioElement) this._audioElement.currentTime = value;
+    }
+
+    /** Normalized playback progress from 0 to 1.
+     * @returns The current playback position as a value between 0 and 1, or 0 if the duration is unknown.
+     */
+    get progress(): number {
+        if (!this._audioElement || !this._duration) return 0;
+        return this._audioElement.currentTime / this._duration;
+    }
+
+    /**
+     * Seeks to a normalized position (0–1) in the clip.
+     * @param position A value between 0 (start) and 1 (end).
+     */
+    // #region Seek
+    seek(position: number): void {
+        if (this._audioElement && this._duration) {
+            this._audioElement.currentTime = Math.max(0, Math.min(1, position)) * this._duration;
+        }
+    }
+
+    /** The underlying HTMLAudioElement, or `undefined` if not yet created.
+     * Use this to connect the element to the Web Audio API via `createMediaElementSource()`.
+     * @returns The HTMLAudioElement if the clip has been loaded or played, otherwise `undefined`.
+     */
+    get audioElement(): HTMLAudioElement | undefined { return this._audioElement; }
+
+    private _audioElement?: HTMLAudioElement;
+    private _duration?: number;
+    private _loadPromise?: Promise<HTMLAudioElement>;
+    private _loop: boolean = false;
+    private _volume: number = 1;
+
+    /** Lazily creates and loads the shared HTMLAudioElement. */
+    private ensureAudioElement(): Promise<HTMLAudioElement> {
+        if (this._audioElement && this._loadPromise) {
+            return this._loadPromise;
+        }
+        const audio = this._audioElement ?? new Audio(this.url);
+        this._audioElement = audio;
+        audio.loop = this._loop;
+        audio.volume = this._volume;
+
+        if (audio.readyState >= HTMLMediaElement.HAVE_METADATA) {
+            this._duration = audio.duration;
+            this._loadPromise = Promise.resolve(audio);
+            return this._loadPromise;
+        }
+
+        this._loadPromise = new Promise<HTMLAudioElement>((resolve, reject) => {
+            const onLoaded = () => {
+                cleanup();
+                this._duration = audio.duration;
+                resolve(audio);
+            };
+            const onError = (e: Event) => {
+                cleanup();
+                reject(new Error(`Failed to load audio clip from ${this.url}: ${e}`));
+            };
+            const cleanup = () => {
+                audio.removeEventListener("loadedmetadata", onLoaded);
+                audio.removeEventListener("error", onError);
+            };
+            audio.addEventListener("loadedmetadata", onLoaded);
+            audio.addEventListener("error", onError);
+        });
+        return this._loadPromise;
+    }
 }

package/src/engine/engine_components.ts

@@ -8,9 +8,9 @@ import { InstantiateIdProvider } from "./engine_networking_instantiate.js";
 import { Context, registerComponent } from "./engine_setup.js";
 import type { ComponentInit, Constructor, ConstructorConcrete, IComponent, IGameObject } from "./engine_types.js";
 import { $componentName } from "./engine_types.js";
+import { TypeStore } from "./engine_typestore.js";
 import { getParam } from "./engine_utils.js";
 import { apply } from "./js-extensions/index.js";
-import { TypeStore } from "./engine_typestore.js";
 
 const COMPONENT_GUID_NAMESPACE = 'eff8ba80-635d-11ec-90d6-0242ac120003';
 

package/src/engine/engine_constants.ts

@@ -1,6 +1,8 @@
 import { getParam } from "../engine/engine_utils.js";
 const debug = getParam("debugdefines");
 
+// #region global defines
+
 // We jump through hoops like this to support 3 cases:
 // 1) Vanilla js or angular js where global defines are not guaranteed to be made
 // 2) Vite where global defines are made, vite defines are also automatically set to globalThis
@@ -11,11 +13,6 @@ tryEval(`if(!globalThis["NEEDLE_ENGINE_GENERATOR"]) globalThis["NEEDLE_ENGINE_GE
 tryEval(`if(!globalThis["NEEDLE_PROJECT_BUILD_TIME"]) globalThis["NEEDLE_PROJECT_BUILD_TIME"] = "unknown";`);
 tryEval(`if(!globalThis["NEEDLE_PUBLIC_KEY"]) globalThis["NEEDLE_PUBLIC_KEY"] = "unknown";`);
 
-declare const NEEDLE_ENGINE_VERSION: string
-declare const NEEDLE_ENGINE_GENERATOR: string;
-declare const NEEDLE_PROJECT_BUILD_TIME: string;
-declare const NEEDLE_PUBLIC_KEY: string;
-
 // Make sure to wrap the new global this define in underscores to prevent the bundler from replacing it with the actual value
 tryEval(`globalThis["__NEEDLE_ENGINE_VERSION__"] = "` + NEEDLE_ENGINE_VERSION + `";`);
 tryEval(`globalThis["__NEEDLE_ENGINE_GENERATOR__"] = "` + NEEDLE_ENGINE_GENERATOR + `";`);
@@ -50,4 +47,12 @@ function tryEval(str: string) {
         if (debug)
             console.error(err);
     }
-}
+}
+
+
+
+// #region treeshake flags
+// globalThis fallbacks for vanilla JS environments (no bundler define)
+globalThis["NEEDLE_USE_RAPIER"] = globalThis["NEEDLE_USE_RAPIER"] !== undefined ? globalThis["NEEDLE_USE_RAPIER"] : true;
+globalThis["NEEDLE_USE_POSTPROCESSING"] = globalThis["NEEDLE_USE_POSTPROCESSING"] !== undefined ? globalThis["NEEDLE_USE_POSTPROCESSING"] : true;
+// #endregion treeshake flags

package/src/engine/engine_context.ts

@@ -1,5 +1,6 @@
 import 'three/examples/jsm/renderers/webgl-legacy/nodes/WebGLNodes.js';
 
+import type { SceneData } from 'needle-bindings';
 import type { EffectComposer } from "postprocessing";
 import {
 	BufferGeometry, Camera, Color, DepthTexture, Group,
@@ -36,6 +37,7 @@ import * as looputils from './engine_mainloop_utils.js';
 import { NetworkConnection } from './engine_networking.js';
 import { Physics } from './engine_physics.js';
 import { PlayerViewManager } from './engine_playerview.js';
+import { getSceneData } from './engine_scenedata.js';
 import { RendererData as SceneLighting } from './engine_scenelighting.js';
 import { getTempColor, logHierarchy } from './engine_three_utils.js';
 import { Time } from './engine_time.js';
@@ -475,6 +477,28 @@ export class Context implements IContext {
 	 * The main camera of the scene - this camera is used for rendering   
 	 * Use `setCurrentCamera` for updating the main camera.
 	 */
+	/**
+	 * Access your scene's full hierarchy, objects, and components directly by name — with full autocomplete.
+	 * Types are generated automatically from your GLB files when the dev server starts.
+	 *
+	 * You can store references to objects or components for later use.
+	 * Note that the scene hierarchy can change at runtime (e.g. when objects are added, removed, or re-parented),
+	 * in which case stored references may become stale.
+	 *
+	 * @experimental This API may change in future versions.
+	 *
+	 * @example
+	 * // Toggle auto-rotate on the orbit camera
+	 * ctx.sceneData.Camera.OrbitControls.autoRotate = true;
+	 *
+	 * @example
+	 * // Change the background color
+	 * ctx.sceneData.Camera.Camera.backgroundColor = new RGBAColor(1, 0, 0, 1);
+	 */
+	get sceneData(): SceneData {
+		return getSceneData(this);
+	}
+
 	get mainCamera(): Camera {
 		if (this._mainCamera) {
 			return this._mainCamera;
@@ -513,15 +537,32 @@ export class Context implements IContext {
 	connection: NetworkConnection;
 	/**  @deprecated AssetDatabase is deprecated */
 	assets: AssetDatabase;
-	/** The main light in the scene */
-	mainLight: ILight | null = null;
+
+	/** All registered lights in the scene, maintained by the Light component. 
+	 * @see mainLight for accessing the main directional light in the scene
+	 */
+	readonly lights = new Array<ILight>();
+
+	/** The brightest registered directional light, or null if none are registered
+	 * @see lights
+	 */
+	get mainLight(): ILight | null {
+		let best: ILight | null = null;
+		for (const light of this.lights) {
+			if (light.type !== "directional") continue;
+			if (!best || light.intensity > best.intensity) best = light;
+		}
+		return best;
+	}
+
 	/** @deprecated Use sceneLighting */
-	get rendererData() { return this.sceneLighting }
+	private get rendererData() { return this.sceneLighting }
+
 	/** Access the scene lighting manager to control lighting settings in the context */
-	sceneLighting: SceneLighting;
-	addressables: Addressables;
-	lightmaps: ILightDataRegistry;
-	players: PlayerViewManager;
+	readonly sceneLighting: SceneLighting;
+	readonly addressables: Addressables;
+	readonly lightmaps: ILightDataRegistry;
+	readonly players: PlayerViewManager;
 
 	/** Access the LODs manager to control LOD behavior in the context */
 	readonly lodsManager: LODsManager;
@@ -829,6 +870,8 @@ export class Context implements IContext {
 		this._onBeforeRenderListeners.clear();
 		this._onAfterRenderListeners.clear();
 
+		this.lights.length = 0;
+
 		if (!this.isManagedExternally) {
 			if (this.renderer) {
 				this.renderer.renderLists.dispose();

package/src/engine/engine_context_registry.ts

@@ -1,6 +1,6 @@
 import { type IComponent, type IContext, type LoadedModel } from "./engine_types.js";
 
-const debug = typeof window !== undefined ? window.location.search.includes("debugcontext") : false;
+const debug = typeof window !== "undefined" ? window.location.search.includes("debugcontext") : false;
 
 /** The various events that can be dispatched by a Needle Engine {@link IContext} instance
  */

package/src/engine/engine_gameobject.ts

@@ -212,8 +212,8 @@ function internalDestroy(instance: Object3D | Component, recursive: boolean = tr
         if (comp[$isDontDestroy]) return;
         destroyed_components.push(comp);
         const go = comp.gameObject;
-        comp.__internalDisable();
-        comp.__internalDestroy();
+        comp.__internalDisable?.();
+        comp.__internalDestroy?.();
         comp.gameObject = go;
         return;
     }

package/src/engine/engine_init.ts

@@ -1,18 +1,25 @@
 import { initAnimationAutoplay } from "../engine-components/AnimationUtilsAutoplay.js";
+import { initAnimatorControllerSerializer } from "../engine-components/AnimatorController.js";
 import { initCameraUtils } from "../engine-components/CameraUtils.js";
+import { initVolumeParameterSerializer } from "../engine-components/postprocessing/VolumeParameter.js";
 import { initSceneSwitcherAttributes } from "../engine-components/SceneSwitcher.js";
 import { initSkyboxAttributes } from "../engine-components/Skybox.js";
 import { initBuiltinTypes } from "./codegen/register_types.js";
+import { initSpatialConsole } from "./debug/debug_spatial_console.js";
+import { initAddressableSerializers } from "./engine_addressables.js";
 import { ensureAudioContextIsResumed } from "./engine_audio.js";
+import { initLicense } from "./engine_license.js";
 import { initNeedleLoader } from "./engine_loaders.js";
+import { initPhysics } from "./engine_physics_rapier.js";
+import { initBuiltinSerializers } from "./engine_serialization_builtin_serializer.js";
 import { initShims } from "./engine_shims.js";
+import { SSR } from "./engine_ssr.js";
 import { patchTonemapping } from "./engine_tonemapping.js";
 import { initCameraExtensions } from "./js-extensions/Camera.js";
 import { patchLayers } from "./js-extensions/Layers.js";
 import { initObject3DExtensions } from "./js-extensions/Object3D.js";
 import { initVectorExtensions } from "./js-extensions/Vector.js";
 import { initWebComponents } from "./webcomponents/init.js";
-import { initPhysics } from "./engine_physics_rapier.js";
 import { initXR } from "./xr/init.js";
 
 let initialized = false;
@@ -28,10 +35,15 @@ let initialized = false;
  */
 export function initEngine() {
     if (initialized) return;
+    if (SSR) return;
     initialized = true;
 
     initWebComponents();
     initShims();
+    initBuiltinSerializers();
+    initAddressableSerializers();
+    initAnimatorControllerSerializer();
+    initVolumeParameterSerializer();
     patchTonemapping();
     patchLayers();
     initCameraExtensions();
@@ -46,4 +58,6 @@ export function initEngine() {
     initSceneSwitcherAttributes();
     initPhysics();
     initXR();
+    initSpatialConsole();
+    initLicense();
 }

package/src/engine/engine_input.ts

@@ -2,6 +2,7 @@ import { Intersection, Matrix4, Object3D, Ray, Vector2, Vector3 } from 'three';
 
 import { showBalloonMessage, showBalloonWarning } from './debug/debug.js';
 import { Context } from './engine_setup.js';
+import { KeyboardEventBase,PointerEventBase } from './engine_ssr.js';
 import { getTempVector, getWorldQuaternion } from './engine_three_utils.js';
 import type { ButtonName, CursorTypeName, IGameObject, IInput, MouseButtonName, Vec2 } from './engine_types.js';
 import { DeviceUtilities, type EnumToPrimitiveUnion, getParam } from './engine_utils.js';
@@ -116,7 +117,7 @@ export declare type NEPointerEventIntersection = Intersection & { event?: NEPoin
  * @see {@link Input} for the input management system
  * @see {@link PointerType} for available pointer types
  */
-export class NEPointerEvent extends PointerEvent {
+export class NEPointerEvent extends PointerEventBase {
 
     /**
      * Spatial input data
@@ -242,7 +243,7 @@ export class NEPointerEvent extends PointerEvent {
         if (debug) console.warn("Stop propagation...", this.pointerId, this.pointerType)
     }
 }
-export class NEKeyboardEvent extends KeyboardEvent {
+export class NEKeyboardEvent extends KeyboardEventBase {
     source?: Event
     constructor(type: InputEvents, source: Event, init: KeyboardEventInit) {
         super(type, init)

package/src/engine/engine_license.ts

@@ -1,14 +1,11 @@
-import { dof } from "three/src/nodes/TSL.js";
-
-import { isDevEnvironment } from "./debug/index.js";
 import { BUILD_TIME, GENERATOR, PUBLIC_KEY, VERSION } from "./engine_constants.js";
 import { ContextEvent, ContextRegistry } from "./engine_context_registry.js";
 import { onInitialized } from "./engine_lifecycle_api.js";
 import { isLocalNetwork } from "./engine_networking_utils.js";
 import { Context } from "./engine_setup.js";
+import { SSR } from "./engine_ssr.js";
 import type { IContext } from "./engine_types.js";
 import { getParam } from "./engine_utils.js";
-import { InternalAttributeUtils } from "./engine_utils_attributes.js";
 
 const debug = getParam("debuglicense");
 
@@ -77,18 +74,22 @@ function invokeLicenseCheckResultChanged(result: boolean) {
 // #region Telemetry
 export namespace Telemetry {
 
-    window.addEventListener("error", (event: ErrorEvent) => {
-        sendError(Context.Current, "unhandled_error", event);
-    });
-    window.addEventListener("unhandledrejection", (event: PromiseRejectionEvent) => {
-        sendError(Context.Current, "unhandled_promise_rejection", {
-            message: event.reason?.message,
-            stack: event.reason?.stack,
-            timestamp: Date.now(),
+    if (typeof window !== "undefined") {
+        window.addEventListener("error", (event: ErrorEvent) => {
+            sendError(Context.Current, "unhandled_error", event);
         });
-    });
+        window.addEventListener("unhandledrejection", (event: PromiseRejectionEvent) => {
+            sendError(Context.Current, "unhandled_promise_rejection", {
+                message: event.reason?.message,
+                stack: event.reason?.stack,
+                timestamp: Date.now(),
+            });
+        });
+    }
 
-    onInitialized((ctx => sendPageViewEvent(ctx)), { once: true });
+    export function init() {
+        if(!SSR) onInitialized((ctx => sendPageViewEvent(ctx)), { once: true });
+    }
 
     function sendPageViewEvent(ctx: IContext): Promise<void> | void {
         if (!isAllowed(ctx)) {
@@ -241,11 +242,14 @@ export namespace Telemetry {
 }
 
 
-ContextRegistry.registerCallback(ContextEvent.ContextRegistered, evt => {
-    showLicenseInfo(evt.context);
-    handleForbidden(evt.context);
-    setTimeout(() => sendUsageMessageToAnalyticsBackend(evt.context), 2000);
-});
+export function initLicense() {
+    Telemetry.init();
+    ContextRegistry.registerCallback(ContextEvent.ContextRegistered, evt => {
+        showLicenseInfo(evt.context);
+        handleForbidden(evt.context);
+        setTimeout(() => sendUsageMessageToAnalyticsBackend(evt.context), 2000);
+    });
+}
 
 export let runtimeLicenseCheckPromise: Promise<void> | undefined = undefined;
 let applicationIsForbidden = false;

package/src/engine/engine_lifecycle_functions_internal.ts

@@ -1,5 +1,6 @@
 import { type Context, FrameEvent } from "./engine_context.js";
 import { ContextEvent } from "./engine_context_registry.js";
+import { SSR } from "./engine_ssr.js";
 
 export declare type Event = ContextEvent | FrameEvent;
 
@@ -38,6 +39,12 @@ let methodsWarningCounter = 0;
  * @param evt the event to call the function at
  */
 export function registerFrameEventCallback(cb: LifecycleMethod, evt: Event, opts?: LifecycleMethodOptions) {
+    
+    // Don't register the callback if we are in SSR, because it will never be called and might cause memory leaks
+    if(SSR) {
+        return;
+    }
+
     if (!newMethods.has(evt)) {
         newMethods.set(evt, new Array());
     }

package/src/engine/engine_mainloop_utils.ts

@@ -344,8 +344,11 @@ function updateIsActiveInHierarchyRecursiveRuntime(go: Object3D, activeInHierarc
         if (allowEventCall) {
             const components = go.userData?.components;
             if (components) {
-                for (let ci = components.length - 1, cl = -1; ci > cl; ci--) {
-                    const comp = components[ci];
+                // We need to iterate on components in the original order right now to work-around UI related initialization bugs where RectTransform must be initialized before e.g. Graphic components. https://linear.app/needle/issue/NE-6986
+                // In the future we can reverse iterate this once the UI system has been replaced (that being said it's probably expected that component enable in the order in which they're added to an object)
+                const componentsCopy = [...components];
+                for (let ci = 0; ci < componentsCopy.length; ci++) {
+                    const comp = componentsCopy[ci];
                     if (activeInHierarchy) {
                         if (comp?.enabled) {
                             try { comp.__internalAwake(); }