@babylonjs/inspector 9.3.0 → 9.3.1

package/lib/{index-BaFR1FRV.js → index-nEGqYbP2.js}

@@ -8034,7 +8034,7 @@ class ExtensionManager {
                 // Register the ServiceDefinitions.
                 let servicesRegistrationToken = null;
                 if (installedExtension.extensionModule.default.serviceDefinitions) {
-                    servicesRegistrationToken = await this._serviceContainer.addServicesAsync(...installedExtension.extensionModule.default.serviceDefinitions);
+                    servicesRegistrationToken = this._serviceContainer.addServices(...installedExtension.extensionModule.default.serviceDefinitions);
                 }
                 // Create a registration token to for dispose.
                 installedExtension.registrationToken = {
@@ -8155,17 +8155,15 @@ class ServiceContainer {
         _parent?._children.add(this);
     }
     /**
-     * Adds a set of service definitions in the service container.
+     * Adds a set of service definitions to the service container.
      * The services are sorted based on their dependencies.
-     * @param args The service definitions to register, and optionally an abort signal.
-     * @returns A disposable that will remove the service definition from the service container.
+     * @param serviceDefinitions The service definitions to register.
+     * @returns A disposable that will remove the service definitions from the service container.
      */
-    async addServicesAsync(...args) {
+    addServices(...serviceDefinitions) {
         if (this._isDisposed) {
             throw new Error("ServiceContainer is disposed.");
         }
-        const abortSignal = args[args.length - 1] instanceof AbortSignal ? args.pop() : undefined;
-        const serviceDefinitions = args;
         const sortedServiceDefinitions = SortServiceDefinitions(serviceDefinitions);
         const dispose = () => {
             for (const serviceDefinition of sortedServiceDefinitions.reverse()) {
@@ -8174,9 +8172,7 @@ class ServiceContainer {
         };
         try {
             for (const serviceDefinition of sortedServiceDefinitions) {
-                // We could possibly optimize this by allowing some parallel initialization of services, but this would be way more complex, so let's wait and see if it's needed.
-                // eslint-disable-next-line no-await-in-loop
-                await this._addServiceAsync(serviceDefinition, abortSignal);
+                this._addService(serviceDefinition);
             }
         }
         catch (error) {
@@ -8190,18 +8186,12 @@ class ServiceContainer {
     /**
      * Registers a service definition in the service container.
      * @param serviceDefinition The service definition to register.
-     * @param abortSignal An optional abort signal.
      * @returns A disposable that will remove the service definition from the service container.
      */
-    async addServiceAsync(serviceDefinition, abortSignal) {
-        if (abortSignal) {
-            return await this.addServicesAsync(serviceDefinition, abortSignal);
-        }
-        else {
-            return await this.addServicesAsync(serviceDefinition);
-        }
+    addService(serviceDefinition) {
+        return this.addServices(serviceDefinition);
     }
-    async _addServiceAsync(service, abortSignal) {
+    _addService(service) {
         if (this._isDisposed) {
             throw new Error(`'${this._friendlyName}' container is disposed.`);
         }
@@ -8214,7 +8204,7 @@ class ServiceContainer {
             this._serviceDefinitions.set(contract, service);
         });
         const dependencies = service.consumes?.map((contract) => this._resolveDependency(contract, service)) ?? [];
-        this._serviceInstances.set(service, await service.factory(...dependencies, abortSignal));
+        this._serviceInstances.set(service, service.factory(...dependencies));
     }
     /**
      * Resolves a dependency by contract identity for a consuming service.
@@ -8227,15 +8217,15 @@ class ServiceContainer {
     _resolveDependency(contract, consumer) {
         const definition = this._serviceDefinitions.get(contract);
         if (definition) {
+            const instance = this._serviceInstances.get(definition);
+            if (!instance) {
+                throw new Error(`Service '${contract.toString()}' has not been instantiated in the '${this._friendlyName}' container.`);
+            }
             let dependentDefinitions = this._serviceDependents.get(definition);
             if (!dependentDefinitions) {
                 this._serviceDependents.set(definition, (dependentDefinitions = new Set()));
             }
             dependentDefinitions.add(consumer);
-            const instance = this._serviceInstances.get(definition);
-            if (!instance) {
-                throw new Error(`Service '${contract.toString()}' has not been instantiated in the '${this._friendlyName}' container.`);
-            }
             return instance;
         }
         if (this._parent) {
@@ -8389,6 +8379,8 @@ function MakeModularTool(options) {
     if (themeMode) {
         settingsStore.writeSetting(ThemeModeSettingDescriptor, themeMode);
     }
+    // This deferred resolves once the React effect cleanup (which disposes the ServiceContainer) is complete.
+    const disposeDeferred = new Deferred();
     const modularToolRootComponent = () => {
         const classes = useStyles$H();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
@@ -8421,13 +8413,13 @@ function MakeModularTool(options) {
             const initializeExtensionManagerAsync = async () => {
                 const serviceContainer = new ServiceContainer("ModularToolContainer", parentContainer);
                 // Expose the settings store as a service so other services can read/write settings.
-                await serviceContainer.addServiceAsync({
+                serviceContainer.addService({
                     friendlyName: "Settings Store",
                     produces: [SettingsStoreIdentity],
                     factory: () => settingsStore,
                 });
                 // Expose the react context service so other services can add React context providers.
-                await serviceContainer.addServiceAsync({
+                serviceContainer.addService({
                     friendlyName: "React Context Service",
                     produces: [ReactContextServiceIdentity],
                     factory: () => ({
@@ -8446,7 +8438,7 @@ function MakeModularTool(options) {
                     }),
                 });
                 // Expose the toast service so non-React code (e.g. Observable callbacks) can show toasts.
-                await serviceContainer.addServiceAsync({
+                serviceContainer.addService({
                     friendlyName: "Toast Service",
                     produces: [ToastServiceIdentity],
                     factory: () => ({
@@ -8456,9 +8448,9 @@ function MakeModularTool(options) {
                     }),
                 });
                 // Register the shell service (top level toolbar/side pane UI layout).
-                await serviceContainer.addServiceAsync(MakeShellServiceDefinition(options));
+                serviceContainer.addService(MakeShellServiceDefinition(options));
                 // Register a service that simply consumes the services we need before first render.
-                await serviceContainer.addServiceAsync({
+                serviceContainer.addService({
                     friendlyName: "Service Bootstrapper",
                     consumes: [RootComponentServiceIdentity],
                     factory: (rootComponent) => {
@@ -8470,18 +8462,18 @@ function MakeModularTool(options) {
                     },
                 });
                 // Register the theme service (exposes the current theme to other services).
-                await serviceContainer.addServiceAsync(ThemeServiceDefinition);
+                serviceContainer.addService(ThemeServiceDefinition);
                 // Register the theme selector service (for selecting the theme) if theming is configured.
                 if (showThemeSelector) {
-                    await serviceContainer.addServiceAsync(ThemeSelectorServiceDefinition);
+                    serviceContainer.addService(ThemeSelectorServiceDefinition);
                 }
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DPHWDyzb.js');
-                    await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DA8_rCpk.js');
+                    serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
-                await serviceContainer.addServicesAsync(...serviceDefinitions);
+                serviceContainer.addServices(...serviceDefinitions);
                 // Create the extension manager, passing along the registry for runtime changes to the registered services.
                 const extensionManager = await ExtensionManager.CreateAsync(namespace, serviceContainer, extensionFeeds, setExtensionInstallError);
                 // Check query params for required extensions. This lets users share links with sets of extensions.
@@ -8529,7 +8521,8 @@ function MakeModularTool(options) {
                     // eslint-disable-next-line github/no-then
                     .catch((error) => {
                     Logger.Error(`Failed to dispose of the modular tool: ${error}`);
-                });
+                })
+                    .finally(() => disposeDeferred.resolve());
             };
         }, []);
         const onAcceptRequiredExtensions = useCallback(() => {
@@ -8561,6 +8554,7 @@ function MakeModularTool(options) {
     reactRoot.render(createElement(modularToolRootComponent));
     let disposed = false;
     return {
+        // eslint-disable-next-line @typescript-eslint/promise-function-async
         dispose: () => {
             // Unmount and restore the original container element display.
             if (!disposed) {
@@ -8568,6 +8562,9 @@ function MakeModularTool(options) {
                 reactRoot.unmount();
                 containerElement.style.display = originalContainerElementDisplay;
             }
+            // The promise resolves once the React effect cleanup
+            // (which disposes the ServiceContainer) has completed.
+            return disposeDeferred.promise;
         },
     };
 }
@@ -8593,21 +8590,270 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DJ1GVvH-.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-_L22btR5.js'),
     },
     {
         name: "Reflector",
         description: "Connects to the Reflector Bridge for real-time scene synchronization with the Babylon.js Sandbox.",
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./reflectorService-Cd41l6Tr.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-BMLxtZT7.js'),
     },
 ]);
 
 /**
- * The service identity for the inspectable command registry.
+ * The service identity for the CLI connection status.
+ * @experimental
+ * @internal
+ */
+const CliConnectionStatusIdentity = Symbol("CliConnectionStatus");
+
+/**
+ * The service identity for the bridge command registry.
+ * @experimental
+ * @internal
  */
-const InspectableCommandRegistryIdentity = Symbol("InspectableCommandRegistry");
+const BridgeCommandRegistryIdentity = Symbol("BridgeCommandRegistry");
+
+/**
+ * Creates the service definition for the CLI Bridge Service.
+ * @param options The options for connecting to the bridge.
+ * @returns A service definition that produces an IBridgeCommandRegistry and ICliConnectionStatus.
+ * @experimental
+ * @internal
+ */
+function MakeBridgeServiceDefinition(options) {
+    return {
+        friendlyName: "CLI Bridge Service",
+        produces: [BridgeCommandRegistryIdentity, CliConnectionStatusIdentity],
+        factory: () => {
+            const commands = new Map();
+            let ws = null;
+            let reconnectTimer = null;
+            let disposed = false;
+            let enabled = options.autoStart;
+            let connected = false;
+            const onConnectionStatusChanged = new Observable();
+            function notifyStatusChanged() {
+                onConnectionStatusChanged.notifyObservers();
+            }
+            function setConnected(value) {
+                if (connected !== value) {
+                    connected = value;
+                    notifyStatusChanged();
+                }
+            }
+            function sendToBridge(message) {
+                ws?.send(JSON.stringify(message));
+            }
+            function connect() {
+                if (disposed || !enabled) {
+                    return;
+                }
+                // Close any existing WebSocket to avoid orphaned connections that
+                // keep a stale session alive on the bridge.
+                if (ws) {
+                    const oldWs = ws;
+                    oldWs.onopen = null;
+                    oldWs.onclose = null;
+                    oldWs.onmessage = null;
+                    oldWs.onerror = null;
+                    oldWs.close();
+                    ws = null;
+                }
+                try {
+                    // NOTE: The browser unconditionally logs a console error for failed WebSocket
+                    // connections at the network level. This cannot be suppressed from JavaScript.
+                    ws = new WebSocket(`ws://127.0.0.1:${options.port}`);
+                }
+                catch {
+                    ws = null;
+                    setConnected(false);
+                    Logger.Warn(`CLIBridgeService: Failed to create WebSocket connection on port ${options.port}.`);
+                    scheduleReconnect();
+                    return;
+                }
+                ws.onopen = () => {
+                    setConnected(true);
+                    sendToBridge({ type: "register", name: options.name });
+                };
+                ws.onmessage = (event) => {
+                    try {
+                        const message = JSON.parse(event.data);
+                        void handleMessage(message);
+                    }
+                    catch {
+                        Logger.Warn("CLIBridgeService: Failed to parse message from bridge.");
+                    }
+                };
+                ws.onclose = () => {
+                    ws = null;
+                    setConnected(false);
+                    scheduleReconnect();
+                };
+                ws.onerror = () => {
+                    // onclose will fire after onerror, which handles reconnection.
+                };
+            }
+            function disconnect() {
+                if (reconnectTimer !== null) {
+                    clearTimeout(reconnectTimer);
+                    reconnectTimer = null;
+                }
+                if (ws) {
+                    ws.onclose = null;
+                    ws.close();
+                    ws = null;
+                }
+                setConnected(false);
+            }
+            function scheduleReconnect() {
+                if (disposed || !enabled || reconnectTimer !== null) {
+                    return;
+                }
+                reconnectTimer = setTimeout(() => {
+                    reconnectTimer = null;
+                    connect();
+                }, 3000);
+            }
+            async function handleMessage(message) {
+                switch (message.type) {
+                    case "listCommands": {
+                        const commandList = Array.from(commands.values()).map((cmd) => ({
+                            id: cmd.id,
+                            description: cmd.description,
+                            args: cmd.args,
+                        }));
+                        sendToBridge({
+                            type: "commandListResponse",
+                            requestId: message.requestId,
+                            commands: commandList,
+                        });
+                        break;
+                    }
+                    case "getInfo": {
+                        sendToBridge({
+                            type: "infoResponse",
+                            requestId: message.requestId,
+                            name: options.name,
+                        });
+                        break;
+                    }
+                    case "execCommand": {
+                        const command = commands.get(message.commandId);
+                        if (!command) {
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                error: `Unknown command: ${message.commandId}`,
+                            });
+                            break;
+                        }
+                        try {
+                            const result = await command.executeAsync(message.args);
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                result,
+                            });
+                        }
+                        catch (error) {
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                error: String(error),
+                            });
+                        }
+                        break;
+                    }
+                }
+            }
+            if (enabled) {
+                connect();
+            }
+            const registry = {
+                addCommand(descriptor) {
+                    if (commands.has(descriptor.id)) {
+                        throw new Error(`Command '${descriptor.id}' is already registered.`);
+                    }
+                    commands.set(descriptor.id, descriptor);
+                    return {
+                        dispose: () => {
+                            commands.delete(descriptor.id);
+                        },
+                    };
+                },
+                get isEnabled() {
+                    return enabled;
+                },
+                set isEnabled(value) {
+                    if (enabled !== value) {
+                        enabled = value;
+                        if (enabled) {
+                            connect();
+                        }
+                        else {
+                            disconnect();
+                        }
+                        notifyStatusChanged();
+                    }
+                },
+                get isConnected() {
+                    return connected;
+                },
+                onConnectionStatusChanged,
+                dispose: () => {
+                    disposed = true;
+                    enabled = false;
+                    disconnect();
+                    commands.clear();
+                    onConnectionStatusChanged.clear();
+                },
+            };
+            return registry;
+        },
+    };
+}
+
+const DefaultPort$1 = 4400;
+/**
+ * Creates a headless {@link ServiceContainer} that hosts a bridge service.
+ *
+ * The returned token owns the container. Dispose it to tear down the bridge.
+ *
+ * @param options Optional configuration for the bridge.
+ * @returns A {@link ModularBridgeToken} that owns the container.
+ * @experimental
+ * @internal
+ */
+function MakeModularBridge(options) {
+    const serviceContainer = new ServiceContainer("ModularBridgeContainer");
+    const bridgeDefinition = MakeBridgeServiceDefinition({
+        port: options?.port ?? DefaultPort$1,
+        get name() {
+            return options?.name ?? (typeof document !== "undefined" ? document.title : "Babylon.js Scene");
+        },
+        autoStart: options?.autoStart ?? false,
+    });
+    const allDefinitions = [bridgeDefinition];
+    if (options?.serviceDefinitions) {
+        allDefinitions.push(...options.serviceDefinitions);
+    }
+    serviceContainer.addServices(...allDefinitions);
+    let disposed = false;
+    return {
+        get serviceContainer() {
+            return serviceContainer;
+        },
+        get isDisposed() {
+            return disposed;
+        },
+        dispose() {
+            disposed = true;
+            serviceContainer.dispose();
+        },
+    };
+}
 
 const UniqueIdArg = {
     name: "uniqueId",
@@ -8681,7 +8927,7 @@ function MakeQueryCommand(collection, sceneContext) {
  */
 const EntityQueryServiceDefinition = {
     friendlyName: "Entity Query Service",
-    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    consumes: [BridgeCommandRegistryIdentity, SceneContextIdentity],
     factory: (commandRegistry, sceneContext) => {
         const collections = [
             {
@@ -8846,205 +9092,13 @@ const EntityQueryServiceDefinition = {
     },
 };
 
-/**
- * The service identity for the CLI connection status.
- */
-const CliConnectionStatusIdentity = Symbol("CliConnectionStatus");
-
-/**
- * Creates the service definition for the InspectableBridgeService.
- * @param options The options for connecting to the bridge.
- * @returns A service definition that produces an IInspectableCommandRegistry.
- */
-function MakeInspectableBridgeServiceDefinition(options) {
-    return {
-        friendlyName: "Inspectable Bridge Service",
-        produces: [InspectableCommandRegistryIdentity, CliConnectionStatusIdentity],
-        factory: () => {
-            const commands = new Map();
-            let ws = null;
-            let reconnectTimer = null;
-            let disposed = false;
-            let enabled = options.autoStart;
-            let connected = false;
-            const onConnectionStatusChanged = new Observable();
-            function notifyStatusChanged() {
-                onConnectionStatusChanged.notifyObservers();
-            }
-            function setConnected(value) {
-                if (connected !== value) {
-                    connected = value;
-                    notifyStatusChanged();
-                }
-            }
-            function sendToBridge(message) {
-                ws?.send(JSON.stringify(message));
-            }
-            function connect() {
-                if (disposed || !enabled) {
-                    return;
-                }
-                try {
-                    // NOTE: The browser unconditionally logs a console error for failed WebSocket
-                    // connections at the network level. This cannot be suppressed from JavaScript.
-                    ws = new WebSocket(`ws://127.0.0.1:${options.port}`);
-                }
-                catch {
-                    ws = null;
-                    setConnected(false);
-                    Logger.Warn(`InspectableBridgeService: Failed to create WebSocket connection on port ${options.port}.`);
-                    scheduleReconnect();
-                    return;
-                }
-                ws.onopen = () => {
-                    setConnected(true);
-                    sendToBridge({ type: "register", name: options.name });
-                };
-                ws.onmessage = (event) => {
-                    try {
-                        const message = JSON.parse(event.data);
-                        void handleMessage(message);
-                    }
-                    catch {
-                        Logger.Warn("InspectableBridgeService: Failed to parse message from bridge.");
-                    }
-                };
-                ws.onclose = () => {
-                    ws = null;
-                    setConnected(false);
-                    scheduleReconnect();
-                };
-                ws.onerror = () => {
-                    // onclose will fire after onerror, which handles reconnection.
-                };
-            }
-            function disconnect() {
-                if (reconnectTimer !== null) {
-                    clearTimeout(reconnectTimer);
-                    reconnectTimer = null;
-                }
-                if (ws) {
-                    ws.onclose = null;
-                    ws.close();
-                    ws = null;
-                }
-                setConnected(false);
-            }
-            function scheduleReconnect() {
-                if (disposed || !enabled || reconnectTimer !== null) {
-                    return;
-                }
-                reconnectTimer = setTimeout(() => {
-                    reconnectTimer = null;
-                    connect();
-                }, 3000);
-            }
-            async function handleMessage(message) {
-                switch (message.type) {
-                    case "listCommands": {
-                        const commandList = Array.from(commands.values()).map((cmd) => ({
-                            id: cmd.id,
-                            description: cmd.description,
-                            args: cmd.args,
-                        }));
-                        sendToBridge({
-                            type: "commandListResponse",
-                            requestId: message.requestId,
-                            commands: commandList,
-                        });
-                        break;
-                    }
-                    case "getInfo": {
-                        sendToBridge({
-                            type: "infoResponse",
-                            requestId: message.requestId,
-                            name: options.name,
-                        });
-                        break;
-                    }
-                    case "execCommand": {
-                        const command = commands.get(message.commandId);
-                        if (!command) {
-                            sendToBridge({
-                                type: "commandResponse",
-                                requestId: message.requestId,
-                                error: `Unknown command: ${message.commandId}`,
-                            });
-                            break;
-                        }
-                        try {
-                            const result = await command.executeAsync(message.args);
-                            sendToBridge({
-                                type: "commandResponse",
-                                requestId: message.requestId,
-                                result,
-                            });
-                        }
-                        catch (error) {
-                            sendToBridge({
-                                type: "commandResponse",
-                                requestId: message.requestId,
-                                error: String(error),
-                            });
-                        }
-                        break;
-                    }
-                }
-            }
-            if (enabled) {
-                connect();
-            }
-            const registry = {
-                addCommand(descriptor) {
-                    if (commands.has(descriptor.id)) {
-                        throw new Error(`Command '${descriptor.id}' is already registered.`);
-                    }
-                    commands.set(descriptor.id, descriptor);
-                    return {
-                        dispose: () => {
-                            commands.delete(descriptor.id);
-                        },
-                    };
-                },
-                get isEnabled() {
-                    return enabled;
-                },
-                set isEnabled(value) {
-                    if (enabled !== value) {
-                        enabled = value;
-                        if (enabled) {
-                            connect();
-                        }
-                        else {
-                            disconnect();
-                        }
-                        notifyStatusChanged();
-                    }
-                },
-                get isConnected() {
-                    return connected;
-                },
-                onConnectionStatusChanged,
-                dispose: () => {
-                    disposed = true;
-                    enabled = false;
-                    disconnect();
-                    commands.clear();
-                    onConnectionStatusChanged.clear();
-                },
-            };
-            return registry;
-        },
-    };
-}
-
 /**
  * Service that registers CLI commands for performance tracing using the PerformanceViewerCollector.
  * start-perf-trace begins collecting data, stop-perf-trace stops and returns the collected data as JSON.
  */
 const PerfTraceCommandServiceDefinition = {
     friendlyName: "Perf Trace Command Service",
-    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    consumes: [BridgeCommandRegistryIdentity, SceneContextIdentity],
     factory: (commandRegistry, sceneContext) => {
         let perfCollector;
         const startReg = commandRegistry.addCommand({
@@ -9111,7 +9165,7 @@ const PerfTraceCommandServiceDefinition = {
  */
 const ScreenshotCommandServiceDefinition = {
     friendlyName: "Screenshot Command Service",
-    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    consumes: [BridgeCommandRegistryIdentity, SceneContextIdentity],
     factory: (commandRegistry, sceneContext) => {
         const registration = commandRegistry.addCommand({
             id: "take-screenshot",
@@ -9201,7 +9255,7 @@ const ScreenshotCommandServiceDefinition = {
  */
 const ShaderCommandServiceDefinition = {
     friendlyName: "Shader Command Service",
-    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    consumes: [BridgeCommandRegistryIdentity, SceneContextIdentity],
     factory: (commandRegistry, sceneContext) => {
         const registration = commandRegistry.addCommand({
             id: "get-shader-code",
@@ -9273,7 +9327,7 @@ const ShaderCommandServiceDefinition = {
  */
 const StatsCommandServiceDefinition = {
     friendlyName: "Stats Command Service",
-    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    consumes: [BridgeCommandRegistryIdentity, SceneContextIdentity],
     factory: (commandRegistry, sceneContext) => {
         let sceneInstrumentation;
         let engineInstrumentation;
@@ -9439,15 +9493,32 @@ const InspectableStates = new Map();
 function _StartInspectable(scene, options) {
     let state = InspectableStates.get(scene);
     if (!state) {
-        const serviceContainer = new ServiceContainer("InspectableContainer");
+        const disposeActions = [];
+        // When a bridgeToken is provided, use its container as the parent and skip bridge creation.
+        // When not, create an internal bridge container via MakeModularBridge.
+        let bridgeToken;
+        if (options?.bridgeToken) {
+            bridgeToken = options.bridgeToken;
+        }
+        else {
+            bridgeToken = MakeModularBridge({
+                port: options?.port ?? DefaultPort,
+                name: options?.name,
+                autoStart: options?.autoStart,
+            });
+            disposeActions.push(() => bridgeToken.dispose());
+        }
+        const serviceContainer = new ServiceContainer("InspectableContainer", bridgeToken.serviceContainer);
+        disposeActions.push(() => serviceContainer.dispose());
         let fullyDisposed = false;
         const fullyDispose = () => {
             InspectableStates.delete(scene);
             fullyDisposed = true;
-            serviceContainer.dispose();
-            sceneDisposeObserver.remove();
+            for (const action of disposeActions.reverse()) {
+                action();
+            }
         };
-        // Initialize the service container asynchronously.
+        // Initialize the service container.
         const sceneContextServiceDefinition = {
             friendlyName: "Inspectable Scene Context",
             produces: [SceneContextIdentity],
@@ -9456,46 +9527,25 @@ function _StartInspectable(scene, options) {
                 currentSceneObservable: new Observable(),
             }),
         };
-        const readyPromise = (async () => {
-            await serviceContainer.addServicesAsync(sceneContextServiceDefinition, MakeInspectableBridgeServiceDefinition({
-                port: options?.port ?? DefaultPort,
-                get name() {
-                    return options?.name ?? (typeof document !== "undefined" ? document.title : "Babylon.js Scene");
-                },
-                autoStart: options?.autoStart ?? false,
-            }), EntityQueryServiceDefinition, ScreenshotCommandServiceDefinition, ShaderCommandServiceDefinition, StatsCommandServiceDefinition, PerfTraceCommandServiceDefinition);
-        })();
+        serviceContainer.addServices(sceneContextServiceDefinition, EntityQueryServiceDefinition, ScreenshotCommandServiceDefinition, ShaderCommandServiceDefinition, StatsCommandServiceDefinition, PerfTraceCommandServiceDefinition);
         state = {
             refCount: 0,
             get fullyDisposed() {
                 return fullyDisposed;
             },
             serviceContainer,
-            sceneDisposeObserver: { remove: () => { } },
             fullyDispose,
-            readyPromise,
         };
         const capturedState = state;
         InspectableStates.set(scene, state);
-        // Auto-dispose when the scene is disposed.
-        const sceneDisposeObserver = scene.onDisposeObservable.addOnce(() => {
+        // Auto-dispose when the scene is disposed. Use insertFirst so that
+        // callbacks registered later (e.g. ShowInspector) fire before this one,
+        // ensuring child containers are disposed before this parent container.
+        const sceneDisposeObserver = scene.onDisposeObservable.add(() => {
             capturedState.refCount = 0;
             capturedState.fullyDispose();
-        });
-        state.sceneDisposeObserver = sceneDisposeObserver;
-        // Handle initialization failure (guard against already-disposed state).
-        void (async () => {
-            try {
-                await readyPromise;
-            }
-            catch (error) {
-                if (InspectableStates.has(scene)) {
-                    Logger.Error(`Failed to initialize Inspectable: ${error}`);
-                    capturedState.refCount = 0;
-                    capturedState.fullyDispose();
-                }
-            }
-        })();
+        }, undefined, true, undefined, true);
+        disposeActions.push(() => sceneDisposeObserver.remove());
     }
     state.refCount++;
     const { serviceContainer } = state;
@@ -9503,21 +9553,9 @@ function _StartInspectable(scene, options) {
     // If additional service definitions were provided, add them in a separate call
     // so they can be independently removed when this token is disposed.
     let extraServicesDisposable;
-    const extraAbortController = new AbortController();
     const extraServiceDefinitions = options?.serviceDefinitions;
     if (extraServiceDefinitions && extraServiceDefinitions.length > 0) {
-        // Wait for the built-in services to be ready, then add the extra ones.
-        void (async () => {
-            try {
-                await owningState.readyPromise;
-                extraServicesDisposable = await serviceContainer.addServicesAsync(...extraServiceDefinitions, extraAbortController.signal);
-            }
-            catch (error) {
-                if (!extraAbortController.signal.aborted) {
-                    Logger.Error(`Failed to add extra inspectable services: ${error}`);
-                }
-            }
-        })();
+        extraServicesDisposable = serviceContainer.addServices(...extraServiceDefinitions);
     }
     let disposed = false;
     const token = {
@@ -9532,8 +9570,7 @@ function _StartInspectable(scene, options) {
                 return;
             }
             disposed = true;
-            // Abort any in-flight extra service initialization and remove already-added extra services.
-            extraAbortController.abort();
+            // Remove extra services that were added for this token.
             extraServicesDisposable?.dispose();
             owningState.refCount--;
             if (owningState.refCount <= 0) {
@@ -9545,9 +9582,12 @@ function _StartInspectable(scene, options) {
 }
 /**
  * Makes a scene inspectable by connecting it to the Inspector CLI bridge.
- * This creates a headless {@link ServiceContainer} (no UI) and registers the
- * {@link InspectableBridgeService} which opens a WebSocket to the bridge and
- * exposes a command registry for CLI-invocable commands.
+ * This creates a headless {@link ServiceContainer} (no UI) that registers
+ * scene-specific CLI command services (entity query, screenshot, shader, stats, etc.).
+ *
+ * When {@link InspectableOptions.bridgeToken} is provided, the inspectable container
+ * is created as a child of the CLI container, inheriting the bridge and command registry.
+ * When not provided, a bridge container is created internally via {@link MakeModularBridge}.
  *
  * Multiple callers may call this for the same scene. Each returned token is
  * ref-counted — the underlying connection is only torn down when all tokens
@@ -23225,7 +23265,7 @@ const InspectorLock = new AsyncLock();
  */
 function ShowInspector(scene, options = {}) {
     // Dispose of any existing inspector for this scene.
-    InspectorTokens.get(scene)?.dispose();
+    void InspectorTokens.get(scene)?.dispose();
     // Default the dispose logic to a no-op until we know that we are actually going
     // to show the Inspector and there will be cleanup work to do.
     let disposeAsync = async () => await Promise.resolve();
@@ -23234,9 +23274,9 @@ function ShowInspector(scene, options = {}) {
     let isDisposed = false;
     const onDisposed = new Observable();
     const inspectorToken = {
-        dispose() {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            InspectorLock.lockAsync(async () => {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        async dispose() {
+            await InspectorLock.lockAsync(async () => {
                 await disposeAsync();
                 isDisposed = true;
                 onDisposed.notifyObservers();
@@ -23258,9 +23298,9 @@ function ShowInspector(scene, options = {}) {
         layoutMode: "overlay",
         ...options,
     };
-    // Sequentialize showing the inspector (e.g. don't start showing until after a previous hide (for example) is finished).
+    // Sequentialize showing the inspector (e.g. don't start showing until after a previous hide is finished).
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    InspectorLock.lockAsync(async () => {
+    InspectorLock.lockAsync(() => {
         let parentElement = options.containerElement ?? null;
         // If a container element was not found, find an appropriate one above the engine's rendering canvas.
         if (!parentElement) {
@@ -23320,7 +23360,7 @@ function ShowInspector(scene, options = {}) {
         const serviceDefinitions = [];
         // Ensure the inspectable bridge is running for this scene. The inspector's
         // ServiceContainer will use the inspectable container as a parent, inheriting
-        // services like ISceneContext and IInspectableCommandRegistry.
+        // services like ISceneContext and IBridgeCommandRegistry.
         const inspectableToken = _StartInspectable(scene);
         disposeActions.push(() => inspectableToken.dispose());
         // Create a container element for the inspector UI.
@@ -23431,10 +23471,12 @@ function ShowInspector(scene, options = {}) {
             leftPaneDefaultCollapsed: options.leftPaneDefaultCollapsed,
             rightPaneDefaultCollapsed: options.rightPaneDefaultCollapsed,
         });
-        disposeActions.push(() => modularTool.dispose());
-        const sceneDisposedObserver = scene.onDisposeObservable.addOnce(() => {
-            inspectorToken.dispose();
-        });
+        disposeActions.push(async () => await modularTool.dispose());
+        // Use insertFirst so this fires before StartInspectable's scene-dispose
+        // callback, ensuring the UI child container is torn down first.
+        const sceneDisposedObserver = scene.onDisposeObservable.add(() => {
+            void inspectorToken.dispose();
+        }, undefined, true, undefined, true);
         disposeActions.push(() => sceneDisposedObserver.remove());
         disposeActions.push(() => {
             InspectorTokens.delete(scene);
@@ -23920,7 +23962,7 @@ class Inspector {
         this._CurrentInstance.disposeToken.onDisposed.addOnce(() => (this._CurrentInstance = null));
     }
     static Hide() {
-        this._CurrentInstance?.disposeToken.dispose();
+        void this._CurrentInstance?.disposeToken.dispose();
     }
     // @ts-expect-error TS6133: This is private, but used by debugLayer (same as Inspector v1).
     static _SetNewScene(scene) {
@@ -24251,5 +24293,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { GizmoServiceIdentity as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorPickerPopup as D, ColorStepGradientComponent as E, ComboBox as F, ComboBoxPropertyLine as G, ConstructorFactory as H, ConvertOptions as I, DebugServiceIdentity as J, DetachDebugLayer as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DraggableLine as O, Popover as P, Dropdown as Q, EntitySelector as R, ShellServiceIdentity as S, TextInputPropertyLine as T, ErrorBoundary as U, Vector3PropertyLine as V, ExtensibleAccordion as W, FactorGradientComponent as X, FactorGradientList as Y, FileUploadLine as Z, GetPropertyDescriptor as _, useToast as a, ToastProvider as a$, HexPropertyLine as a0, InfoLabel as a1, InputHexField as a2, InputHsvField as a3, InspectableCommandRegistryIdentity as a4, Inspector as a5, InterceptFunction as a6, InterceptProperty as a7, IsPropertyReadonly as a8, LineContainer as a9, SelectionServiceDefinition as aA, SettingsServiceIdentity as aB, SettingsStore as aC, SettingsStoreIdentity as aD, ShowInspector as aE, SidePaneContainer as aF, SkeletonSelector as aG, Slider as aH, SpinButton as aI, StartInspectable as aJ, StatsServiceIdentity as aK, StringDropdown as aL, StringDropdownPropertyLine as aM, StringifiedPropertyLine as aN, Switch as aO, SwitchPropertyLine as aP, SyncedSliderInput as aQ, SyncedSliderPropertyLine as aR, TeachingMoment as aS, TextAreaPropertyLine as aT, TextInput as aU, TextPropertyLine as aV, Textarea as aW, TextureSelector as aX, TextureUpload as aY, Theme as aZ, ThemeServiceIdentity as a_, LinkPropertyLine as aa, LinkToEntityPropertyLine as ab, List as ac, MakeDialogTeachingMoment as ad, MakeLazyComponent as ae, MakeModularTool as af, MakePopoverTeachingMoment as ag, MakePropertyHook as ah, MakeTeachingMoment as ai, MaterialSelector as aj, NodeSelector as ak, NumberDropdown as al, NumberDropdownPropertyLine as am, ObservableCollection as an, Pane as ao, PlaceholderPropertyLine as ap, PositionedPopover as aq, PropertiesServiceIdentity as ar, Property as as, PropertyContext as at, PropertyLine as au, QuaternionPropertyLine as av, RotationVectorPropertyLine as aw, SceneExplorerServiceIdentity as ax, SearchBar as ay, SearchBox as az, useInterceptObservable as b, ToggleButton as b0, Tooltip as b1, UploadButton as b2, Vector2PropertyLine as b3, Vector4PropertyLine as b4, WatcherServiceIdentity as b5, useAngleConverters as b6, useAsyncResource as b7, useColor3Property as b8, useColor4Property as b9, useEventListener as ba, useEventfulState as bb, useKeyListener as bc, useKeyState as bd, useObservableCollection as be, useOrderedObservableCollection as bf, usePollingObservable as bg, usePropertyChangedNotifier as bh, useQuaternionProperty as bi, useResource as bj, useTheme as bk, useThemeMode as bl, useVector3Property as bm, LinkToEntity as c, SpinButtonPropertyLine as d, useProperty as e, SceneContextIdentity as f, SelectionServiceIdentity as g, useObservableState as h, AccordionSection as i, ButtonLine as j, ToolsServiceIdentity as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BuiltInsExtensionFeed as p, Checkbox as q, ChildWindow as r, Collapse as s, Color3GradientComponent as t, useExtensionManager as u, Color3GradientList as v, Color3PropertyLine as w, Color4GradientComponent as x, Color4GradientList as y, Color4PropertyLine as z };
-//# sourceMappingURL=index-BaFR1FRV.js.map
+export { GetPropertyDescriptor as $, Accordion as A, Button as B, CheckboxPropertyLine as C, Color4PropertyLine as D, ColorPickerPopup as E, ColorStepGradientComponent as F, ComboBox as G, ComboBoxPropertyLine as H, ConstructorFactory as I, ConvertOptions as J, DebugServiceIdentity as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DetachDebugLayer as O, Popover as P, DraggableLine as Q, Dropdown as R, ShellServiceIdentity as S, TextInputPropertyLine as T, EntitySelector as U, Vector3PropertyLine as V, ErrorBoundary as W, ExtensibleAccordion as X, FactorGradientComponent as Y, FactorGradientList as Z, FileUploadLine as _, useToast as a, ThemeServiceIdentity as a$, GizmoServiceIdentity as a0, HexPropertyLine as a1, InfoLabel as a2, InputHexField as a3, InputHsvField as a4, Inspector as a5, InterceptFunction as a6, InterceptProperty as a7, IsPropertyReadonly as a8, LineContainer as a9, SearchBox as aA, SelectionServiceDefinition as aB, SettingsServiceIdentity as aC, SettingsStore as aD, SettingsStoreIdentity as aE, ShowInspector as aF, SidePaneContainer as aG, SkeletonSelector as aH, Slider as aI, SpinButton as aJ, StartInspectable as aK, StatsServiceIdentity as aL, StringDropdown as aM, StringDropdownPropertyLine as aN, StringifiedPropertyLine as aO, Switch as aP, SwitchPropertyLine as aQ, SyncedSliderInput as aR, SyncedSliderPropertyLine as aS, TeachingMoment as aT, TextAreaPropertyLine as aU, TextInput as aV, TextPropertyLine as aW, Textarea as aX, TextureSelector as aY, TextureUpload as aZ, Theme as a_, LinkPropertyLine as aa, LinkToEntityPropertyLine as ab, List as ac, MakeDialogTeachingMoment as ad, MakeLazyComponent as ae, MakeModularBridge as af, MakeModularTool as ag, MakePopoverTeachingMoment as ah, MakePropertyHook as ai, MakeTeachingMoment as aj, MaterialSelector as ak, NodeSelector as al, NumberDropdown as am, NumberDropdownPropertyLine as an, ObservableCollection as ao, Pane as ap, PlaceholderPropertyLine as aq, PositionedPopover as ar, PropertiesServiceIdentity as as, Property as at, PropertyContext as au, PropertyLine as av, QuaternionPropertyLine as aw, RotationVectorPropertyLine as ax, SceneExplorerServiceIdentity as ay, SearchBar as az, useInterceptObservable as b, ToastProvider as b0, ToggleButton as b1, Tooltip as b2, UploadButton as b3, Vector2PropertyLine as b4, Vector4PropertyLine as b5, WatcherServiceIdentity as b6, useAngleConverters as b7, useAsyncResource as b8, useColor3Property as b9, useColor4Property as ba, useEventListener as bb, useEventfulState as bc, useKeyListener as bd, useKeyState as be, useObservableCollection as bf, useOrderedObservableCollection as bg, usePollingObservable as bh, usePropertyChangedNotifier as bi, useQuaternionProperty as bj, useResource as bk, useTheme as bl, useThemeMode as bm, useVector3Property as bn, LinkToEntity as c, SpinButtonPropertyLine as d, useProperty as e, SceneContextIdentity as f, SelectionServiceIdentity as g, useObservableState as h, AccordionSection as i, ButtonLine as j, ToolsServiceIdentity as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BridgeCommandRegistryIdentity as p, BuiltInsExtensionFeed as q, Checkbox as r, ChildWindow as s, Collapse as t, useExtensionManager as u, Color3GradientComponent as v, Color3GradientList as w, Color3PropertyLine as x, Color4GradientComponent as y, Color4GradientList as z };
+//# sourceMappingURL=index-nEGqYbP2.js.map