@needle-tools/engine 5.1.0-canary.fbdfce3 → 5.1.0-experimental.03e8105

package/plugins/vite/dependencies.js

@@ -61,6 +61,35 @@ export function needleDependencies(command, config, userSettings) {
                 }
             },
         },
+        // Vite 8's optimizer rebases `new URL(specifier, import.meta.url)` paths
+        // inside pre-bundled dependencies (PR #21434), but only handles truly relative
+        // paths (./  ../).  Bare-specifier paths like `three-mesh-bvh/src/workers/...`
+        // are treated as relative to the *source file* that contained the `new URL()`
+        // call, producing a wrong URL such as:
+        //   /node_modules/@needle-tools/engine/.../three-mesh-bvh/src/workers/generateMeshBVH.worker.js
+        // This middleware rewrites those broken URLs so the dev server finds the file at
+        // its real location in node_modules.
+        {
+            name: 'needle:worker-url-rewrite',
+            configureServer(server) {
+                const rewritePackages = ['three-mesh-bvh'];
+                server.middlewares.use((req, _res, next) => {
+                    if (req.url) {
+                        for (const pkg of rewritePackages) {
+                            const marker = `/${pkg}/`;
+                            if (req.url.includes(marker) && !req.url.startsWith(`/node_modules/${pkg}/`) && !req.url.startsWith('/@fs/')) {
+                                const idx = req.url.indexOf(marker);
+                                const rewritten = '/node_modules' + req.url.slice(idx);
+                                needleLog('needle-dependencies', `Rewriting worker URL → ${rewritten}`);
+                                req.url = rewritten;
+                                break;
+                            }
+                        }
+                    }
+                    next();
+                });
+            },
+        },
     ]
 }
 
@@ -158,16 +187,6 @@ function handleOptimizeDeps(config) {
             config.optimizeDeps.exclude.push('@needle-tools/engine');
             needleLog("needle-dependencies", 'Detected local @needle-tools/engine package → will exclude it from optimization');
         }
-        // When engine is excluded from optimizeDeps, three-mesh-bvh must also be excluded.
-        // The BVH worker (generateMeshBVH.worker.js) uses bare imports like `import 'three'`
-        // which only resolve correctly when served through Vite's dev server module system.
-        // If three-mesh-bvh is pre-bundled, the worker URL points into the cache and bare
-        // imports fail at runtime → "Unknown error. Please check the server console."
-        if (!config.optimizeDeps.include?.includes('three-mesh-bvh') &&
-            !config.optimizeDeps.exclude.includes('three-mesh-bvh')) {
-            config.optimizeDeps.exclude.push('three-mesh-bvh');
-            needleLog("needle-dependencies", 'Detected local @needle-tools/engine package → will also exclude three-mesh-bvh from optimization');
-        }
     }
 }
 

package/plugins/vite/dependency-watcher.js

@@ -98,7 +98,7 @@ function watchPackageJson(server, projectDir, packageJsonPath, cachePath) {
 
     setTimeout(() => {
         requireInstall = testIfInstallIsRequired(projectDir, packageJson);
-    }, 1000);
+    }, 1000).unref();
 
     setInterval(() => {
         if (!packageJson || lastEditTime === undefined) return;
@@ -149,7 +149,7 @@ function watchPackageJson(server, projectDir, packageJsonPath, cachePath) {
                 restart(server, projectDir, cachePath);
             }
         }
-    }, 2000);
+    }, 2000).unref();
 }
 
 /** @param {string} projectDir @param {PackageJson | undefined} packageJson @returns {boolean} */

package/plugins/vite/editor-connection.js

@@ -27,7 +27,7 @@ export async function editorConnection(command, config, userSettings, pluginsArr
     if (typeof config.generator === "string" && !config.generator.includes("Unity")) return;
 
     if (!config) {
-        setTimeout(() => needleLog("needle-editor-sync", "Needle Editor Sync can not be installed automatically to vite: missing config", "warn"), 1000);
+        setTimeout(() => needleLog("needle-editor-sync", "Needle Editor Sync can not be installed automatically to vite: missing config", "warn"), 1000).unref();
         return createPlugin(false);
     }
 
@@ -42,14 +42,14 @@ export async function editorConnection(command, config, userSettings, pluginsArr
     //     }
     // }
     if (needleEditorSettings && needleEditorSettings.enabled === false) {
-        setTimeout(() => needleLog("needle-editor-sync", "Needle Editor Sync is not enabled. Add a 'Needle Editor Sync' component to your scene to enable", "warn"), 1000);
+        setTimeout(() => needleLog("needle-editor-sync", "Needle Editor Sync is not enabled. Add a 'Needle Editor Sync' component to your scene to enable", "warn"), 1000).unref();
         return createPlugin(false);
     }
 
     // Check if the editor package is installed
     let path = root + `/node_modules/${editorSyncPackageName}/plugins/index.js`;
     if (existsSync(path) === false) {
-        setTimeout(() => needleLog("needle-editor-sync", `${editorSyncPackageName} is not installed: Add the "Needle Editor Sync" component to your scene if you want to send changes directly from the Unity Editor to web app`, "warn"), 1000);
+        setTimeout(() => needleLog("needle-editor-sync", `${editorSyncPackageName} is not installed: Add the "Needle Editor Sync" component to your scene if you want to send changes directly from the Unity Editor to web app`, "warn"), 1000).unref();
         return createPlugin(false);
     }
 

package/plugins/vite/license.js

@@ -8,7 +8,9 @@ import { loadConfig } from './config.js';
  * @returns {import('vite').Plugin}
  */
 export function needleLicense(command, config, userSettings) {
-    let license = undefined;
+    /** @type {import('../common/license.js').LicenseResult | null | undefined} */
+    let licenseResult = undefined;
+    let appliedLicense = false;
 
     return {
         name: "needle:license",
@@ -23,7 +25,7 @@ export function needleLicense(command, config, userSettings) {
                 }
             }
 
-            license = await resolveLicense({
+            licenseResult = await resolveLicense({
                 team: team,
                 accessToken: userSettings?.license?.accessToken,
                 loglevel: userSettings?.debugLicense === true ? "verbose" : undefined
@@ -31,25 +33,62 @@ export function needleLicense(command, config, userSettings) {
 
         },
         async transform(src, id) {
-            const isNeedleEngineFile = id.includes("engine/engine_license") || id.includes("needle-tools_engine");
+            if (appliedLicense === true) {
+                return;
+            }
+
+            // Vite 4 and 8 handling:
+            const isNeedleEngineFile = id.includes("engine/engine_license")
+                || id.includes("needle-tools_engine")
+                || id.includes("@needle-tools")
+                || id.includes("needle-engine");
             // sometimes the actual license parameter is in a unnamed chunk file
             const isViteChunkFile = id.includes("chunk") && id.includes(".vite");
             if (isNeedleEngineFile || isViteChunkFile) {
 
-                if (!license) {
+                if (!licenseResult) {
                     return;
                 }
 
-                const index = src.indexOf("NEEDLE_ENGINE_LICENSE_TYPE");
+                let modified = false;
+
+                // Replace license type
+                const index = src.indexOf("_PQYikbj");
                 if (index >= 0) {
                     const end = src.indexOf(";", index);
                     if (end >= 0) {
                         const line = src.substring(index, end);
-                        const replaced = "NEEDLE_ENGINE_LICENSE_TYPE = \"" + license + "\"";
+                        const replaced = "_PQYikbj = \"" + licenseResult.type + "\"";
                         src = src.replace(line, replaced);
-                        return { code: src, map: null }
+                        modified = true;
+                    }
+                }
+
+                // Replace license JWT (same pattern)
+                if (licenseResult.jwt) {
+                    const jwtIndex = src.indexOf("_$QHon");
+                    if (jwtIndex >= 0) {
+                        const jwtEnd = src.indexOf(";", jwtIndex);
+                        if (jwtEnd >= 0) {
+                            const jwtLine = src.substring(jwtIndex, jwtEnd);
+                            const jwtReplaced = "_$QHon = \"" + licenseResult.jwt + "\"";
+                            src = src.replace(jwtLine, jwtReplaced);
+                        }
                     }
                 }
+
+                if (modified) {
+                    appliedLicense = true;
+                    return { code: src, map: null }
+                }
+                // @TODO: detect local needle engine dev setup and log error if not found
+            }
+        },
+        buildEnd() {
+            if (!appliedLicense) {
+                if (process.env.NEEDLE_TEST_ENV) {
+                    console.error("ERR: License was not applied!");
+                }
             }
         }
     }

package/plugins/vite/local-files-core.js

@@ -291,7 +291,7 @@ export function needleMakeFilesLocal(command, _config, userSettings) {
                     failedDownloads,
                     localizationStats,
                 }, activeHandlers);
-                src = fixRelativeNewURL(src);
+                src = fixRelativeNewURL(src, viteConfig?.base);
             }
             catch (err) {
                 needleLog("needle:local-files", "Error in transform: " + getErrMessage(err), "error");
@@ -303,7 +303,7 @@ export function needleMakeFilesLocal(command, _config, userSettings) {
         },
         renderChunk(code, chunk) {
             if (!chunk.fileName?.endsWith(".js")) return null;
-            const fixed = fixRelativeNewURL(code);
+            const fixed = fixRelativeNewURL(code, viteConfig?.base);
             if (fixed === code) return null;
             return {
                 code: fixed,
@@ -314,7 +314,7 @@ export function needleMakeFilesLocal(command, _config, userSettings) {
             for (const output of Object.values(bundle)) {
                 if (output.type !== "chunk") continue;
                 if (!output.fileName?.endsWith(".js")) continue;
-                const fixed = fixRelativeNewURL(output.code);
+                const fixed = fixRelativeNewURL(output.code, viteConfig?.base);
                 if (fixed !== output.code) output.code = fixed;
             }
         },

package/plugins/vite/local-files-utils.d.ts

@@ -24,9 +24,11 @@ export function normalizeWebPath(path: string): string;
 export function ensureTrailingSlash(path: string): string;
 /**
  * @param {string} src
+ * @param {string} [base] - Vite base path (e.g. "/" or "/app/"). When provided,
+ *   ext/ paths are made absolute so they resolve correctly under SPA routing.
  * @returns {string}
  */
-export function fixRelativeNewURL(src: string): string;
+export function fixRelativeNewURL(src: string, base?: string): string;
 /**
  * @param {string} src
  * @returns {string}

package/plugins/vite/local-files-utils.js

@@ -113,25 +113,49 @@ export function ensureTrailingSlash(path) {
 
 /**
  * @param {string} src
+ * @param {string} [base] - Vite base path (e.g. "/" or "/app/"). When provided,
+ *   ext/ paths are made absolute so they resolve correctly under SPA routing.
  * @returns {string}
  */
-export function fixRelativeNewURL(src) {
+export function fixRelativeNewURL(src, base) {
+    /** @param {string} path */
+    function makeAbsolute(path) {
+        // Strip any leading ./ ../ or / prefix to get the clean ext/... path
+        const clean = path.replace(/^(?:\.\.?\/)+/, '').replace(/^\//, '');
+        if (base) return base.replace(/\/+$/, '') + '/' + clean;
+        return clean;
+    }
+
     src = src.replace(
         /(?<==\s*)(["'])((?:(?:\.{1,2}\/)|\/)?ext\/[^"']*\/)\1/g,
         (/** @type {string} */ _match, /** @type {string} */ quote, /** @type {string} */ path) => {
-            const runtimePath = path.startsWith("/ext/") ? path.substring(1) : path;
-            return `new URL(${quote}${runtimePath}${quote}, self.location?.href || ${quote}${quote}).href`;
+            const resolved = makeAbsolute(path);
+            return `new URL(${quote}${resolved}${quote}, self.location?.href || ${quote}${quote}).href`;
         }
     );
 
     src = src.replace(
         /new\s+URL\s*\(\s*(["'`])((?:(?:\.{1,2}\/)|\/)?ext\/[^"'`]+)\1\s*\)/g,
         (/** @type {string} */ _match, /** @type {string} */ quote, /** @type {string} */ path) => {
-            const runtimePath = path.startsWith("/ext/") ? path.substring(1) : path;
-            return `new URL(${quote}${runtimePath}${quote}, self.location?.href)`;
+            const resolved = makeAbsolute(path);
+            return `new URL(${quote}${resolved}${quote}, self.location?.href)`;
         }
     );
 
+    // Make remaining ext/ string literals absolute (e.g. font paths passed as
+    // function arguments like addVariant("normal","normal","ext/fonts/...")).
+    // The regexes above already consumed paths inside new URL() calls and
+    // assignment-based patterns, so this only catches leftover bare strings.
+    if (base) {
+        src = src.replace(
+            /(["'`])((?:\.{1,2}\/)?ext\/[^"'`]+)\1/g,
+            (/** @type {string} */ _match, /** @type {string} */ quote, /** @type {string} */ path) => {
+                const resolved = makeAbsolute(path);
+                return `${quote}${resolved}${quote}`;
+            }
+        );
+    }
+
     return src;
 }
 

package/plugins/vite/reload.js

@@ -225,7 +225,7 @@ async function scheduleReload(server, level = 0) {
     if (existsSync(lockFile)) {
         if (level === 0)
             needleLog(pluginName, "Lock file exists, waiting for export to finish...");
-        setTimeout(() => scheduleReload(server, level += 1), 300);
+        setTimeout(() => scheduleReload(server, level += 1), 300).unref();
         return;
     }
 

package/plugins/vite/server.js

@@ -60,7 +60,8 @@ export function needleServer(command, config, userSettings) {
                             })
                             .catch((err) => console.error("ERR: [needle:server] 'open' package not found - please make sure to install 'open' in your package.json\n", err));
                     }
-                }, 100)
+                }, 100);
+                i.unref();
             }
         },
     }

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";
 
@@ -164,6 +167,9 @@ export * from "./engine_constants.js";
  */
 export * from "./engine_context.js";
 
+/** Typed event bus for decoupled component communication via {@link Context.events} */
+export * from "./engine_context_eventbus.js";
+
 /** Registry for managing multiple engine contexts */
 export * from "./engine_context_registry.js";
 
@@ -173,6 +179,10 @@ export * from "./engine_context_registry.js";
  */
 export * from "./engine_coroutine.js"
 
+/** DisposableStore for managing lifecycle-bound cleanup in components */
+export { DisposableStore, on, isDisposable } from "./engine_disposable.js";
+export type { DisposeFn, IDisposable } from "./engine_disposable.js";
+
 /** Factory functions for creating primitives and objects */
 export * from "./engine_create_objects.js";
 
@@ -220,7 +230,7 @@ export * from "./engine_input.js";
 export { InstancingUtil } from "./engine_instancing.js";
 
 /** License checking utilities */
-export { hasCommercialLicense, hasIndieLicense, hasProLicense } from "./engine_license.js";
+export { _BGpnKD, __tFkl, UFadk } from "./engine_license.js";
 
 
 // ============================================================================

package/src/engine/codegen/register_types.ts

@@ -7,11 +7,6 @@ import { Animation } from "../../engine-components/Animation.js";
 import { Animator } from "../../engine-components/Animator.js";
 import { AudioListener } from "../../engine-components/AudioListener.js";
 import { AudioSource } from "../../engine-components/AudioSource.js";
-import { Avatar_Brain_LookAt } from "../../engine-components/avatar/Avatar_Brain_LookAt.js";
-import { Avatar_MouthShapes } from "../../engine-components/avatar/Avatar_MouthShapes.js";
-import { Avatar_MustacheShake } from "../../engine-components/avatar/Avatar_MustacheShake.js";
-import { AvatarBlink_Simple } from "../../engine-components/avatar/AvatarBlink_Simple.js";
-import { AvatarEyeLook_Rotation } from "../../engine-components/avatar/AvatarEyeLook_Rotation.js";
 import { AxesHelper } from "../../engine-components/AxesHelper.js";
 import { BasicIKConstraint } from "../../engine-components/BasicIKConstraint.js";
 import { BoxHelperComponent } from "../../engine-components/BoxHelperComponent.js";
@@ -106,11 +101,12 @@ import { TestRunner } from "../../engine-components/TestRunner.js";
 import { TestSimulateUserData } from "../../engine-components/TestRunner.js";
 import { PlayableDirector } from "../../engine-components/timeline/PlayableDirector.js";
 import { SignalReceiver } from "../../engine-components/timeline/SignalAsset.js";
-import { AnimationTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
-import { AudioTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
-import { MarkerTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
+import { TimelineAnimationTrack } from "../../engine-components/timeline/TimelineTracks.js";
+import { TimelineAudioTrack } from "../../engine-components/timeline/TimelineTracks.js";
+import { TimelineMarkerTrack } from "../../engine-components/timeline/TimelineTracks.js";
 import { SignalTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
-import { ControlTrackHandler } from "../../engine-components/timeline/TimelineTracks.js";
+import { TimelineActivationTrack } from "../../engine-components/timeline/TimelineTracks.js";
+import { TimelineControlTrack } from "../../engine-components/timeline/TimelineTracks.js";
 import { TransformGizmo } from "../../engine-components/TransformGizmo.js";
 import { BaseUIComponent } from "../../engine-components/ui/BaseUIComponent.js";
 import { UIRootComponent } from "../../engine-components/ui/BaseUIComponent.js";
@@ -167,11 +163,6 @@ export function initBuiltinTypes() {
 	TypeStore.add("Animator", Animator);
 	TypeStore.add("AudioListener", AudioListener);
 	TypeStore.add("AudioSource", AudioSource);
-	TypeStore.add("Avatar_Brain_LookAt", Avatar_Brain_LookAt);
-	TypeStore.add("Avatar_MouthShapes", Avatar_MouthShapes);
-	TypeStore.add("Avatar_MustacheShake", Avatar_MustacheShake);
-	TypeStore.add("AvatarBlink_Simple", AvatarBlink_Simple);
-	TypeStore.add("AvatarEyeLook_Rotation", AvatarEyeLook_Rotation);
 	TypeStore.add("AxesHelper", AxesHelper);
 	TypeStore.add("BasicIKConstraint", BasicIKConstraint);
 	TypeStore.add("BoxHelperComponent", BoxHelperComponent);
@@ -266,11 +257,12 @@ export function initBuiltinTypes() {
 	TypeStore.add("TestSimulateUserData", TestSimulateUserData);
 	TypeStore.add("PlayableDirector", PlayableDirector);
 	TypeStore.add("SignalReceiver", SignalReceiver);
-	TypeStore.add("AnimationTrackHandler", AnimationTrackHandler);
-	TypeStore.add("AudioTrackHandler", AudioTrackHandler);
-	TypeStore.add("MarkerTrackHandler", MarkerTrackHandler);
+	TypeStore.add("TimelineAnimationTrack", TimelineAnimationTrack);
+	TypeStore.add("TimelineAudioTrack", TimelineAudioTrack);
+	TypeStore.add("TimelineMarkerTrack", TimelineMarkerTrack);
 	TypeStore.add("SignalTrackHandler", SignalTrackHandler);
-	TypeStore.add("ControlTrackHandler", ControlTrackHandler);
+	TypeStore.add("TimelineActivationTrack", TimelineActivationTrack);
+	TypeStore.add("TimelineControlTrack", TimelineControlTrack);
 	TypeStore.add("TransformGizmo", TransformGizmo);
 	TypeStore.add("BaseUIComponent", BaseUIComponent);
 	TypeStore.add("UIRootComponent", UIRootComponent);

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_camera.fit.ts

@@ -257,12 +257,23 @@ export function fitCamera(options?: FitCameraOptions): null | FitCameraReturnTyp
     else {
         direction.sub(camera.worldPosition);
     }
-    if (centerCamera === "y")
-        direction.y = 0;
+    if (centerCamera === "y") {
+        // Preserve the camera's current elevation angle when it's already above the center,
+        // but clamp to a minimum elevation to prevent the camera from ending up at or below
+        // the scene center (which causes a "looking up from below" effect).
+        // direction points FROM camera TO center, so negative Y = camera is above center.
+        const horizontalLen = Math.sqrt(direction.x * direction.x + direction.z * direction.z);
+        if (horizontalLen > 0.0001) {
+            const minY = -horizontalLen * verticalOffset * 4;
+            if (direction.y > minY) direction.y = minY;
+        }
+        else {
+            // Camera is directly above/below center — pick a default slight angle from +Z
+            direction.set(0, -verticalOffset * 4, 1);
+        }
+    }
     direction.normalize();
     direction.multiplyScalar(distance);
-    if (centerCamera === "y")
-        direction.y += -verticalOffset * 4 * distance;
 
     let cameraLocalPosition = center.clone().sub(direction);
     if (options.cameraOffset) {

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';