@babylonjs/inspector 8.44.0-preview → 8.44.1-preview

package/lib/{index-2Bq-qBwV.js → index-9CJtnfZ3.js}

@@ -82,7 +82,7 @@ import { RenderingManager } from '@babylonjs/core/Rendering/renderingManager.js'
 import '@babylonjs/core/Rendering/edgesRenderer.js';
 import '@babylonjs/core/Rendering/outlineRenderer.js';
 import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
-import { FactorGradient, ColorGradient, Color3Gradient } from '@babylonjs/core/Misc/gradients.js';
+import { FactorGradient, Color3Gradient, ColorGradient } from '@babylonjs/core/Misc/gradients.js';
 import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
 import { Attractor } from '@babylonjs/core/Particles/attractor.js';
 import { CreateSphere } from '@babylonjs/core/Meshes/Builders/sphereBuilder.js';
@@ -1073,7 +1073,6 @@ const CompactModeContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles$q = makeStyles({
     rootDiv: {
         flex: 1,
@@ -1229,10 +1228,10 @@ function SetThemeMode(mode) {
     localStorage.setItem(ThemeModeStorageKey, JSON.stringify(mode));
 }
 
-/* eslint-disable @typescript-eslint/naming-convention */
 // Generated from https://react.fluentui.dev/?path=/docs/theme-theme-designer--docs
 // Key color: #3A94FC
-const babylonRamp = {
+/* eslint-disable @typescript-eslint/naming-convention */
+const BabylonRamp = {
     10: "#020305",
     20: "#121721",
     30: "#1A263A",
@@ -1250,11 +1249,12 @@ const babylonRamp = {
     150: "#AFC9FF",
     160: "#C6D8FF",
 };
+/* eslint-enable @typescript-eslint/naming-convention */
 const LightTheme = {
-    ...createLightTheme(babylonRamp),
+    ...createLightTheme(BabylonRamp),
 };
 const DarkTheme = {
-    ...createDarkTheme(babylonRamp),
+    ...createDarkTheme(BabylonRamp),
 };
 
 const Theme = (props) => {
@@ -1266,7 +1266,6 @@ const Theme = (props) => {
     return (jsx(FluentProvider, { theme: isDarkMode !== invert ? DarkTheme : LightTheme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles$o = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
@@ -1533,7 +1532,6 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles$n = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
@@ -1792,18 +1790,19 @@ function useResizeHandle(params) {
 
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles$l = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
         flexDirection: "column",
         overflow: "hidden",
+        backgroundColor: tokens.colorTransparentBackground,
     },
     verticallyCentralContent: {
         flexGrow: 1,
         display: "flex",
         overflow: "hidden",
+        backgroundColor: tokens.colorTransparentBackground,
     },
     barDiv: {
         display: "flex",
@@ -1811,6 +1810,7 @@ const useStyles$l = makeStyles({
         flex: "0 0 auto",
         height: "36px",
         backgroundColor: tokens.colorNeutralBackground2,
+        pointerEvents: "auto",
     },
     bar: {
         display: "flex",
@@ -1878,16 +1878,7 @@ const useStyles$l = makeStyles({
         overflowX: "hidden",
         overflowY: "hidden",
         zIndex: 1,
-    },
-    paneContainerOverlay: {
-        position: "absolute",
-        height: "100%",
-    },
-    paneContainerOverlayLeft: {
-        left: 0,
-    },
-    paneContainerOverlayRight: {
-        right: 0,
+        pointerEvents: "auto",
     },
     paneContent: {
         display: "flex",
@@ -1957,6 +1948,10 @@ const useStyles$l = makeStyles({
         flexGrow: 1,
         display: "flex",
         overflow: "hidden",
+        backgroundColor: tokens.colorTransparentBackground,
+        "> *": {
+            pointerEvents: "auto",
+        },
     },
     expandButtonContainer: {
         position: "absolute",
@@ -2016,7 +2011,7 @@ const SidePaneTab = (props) => {
 // This hook provides a side pane container and the tab list.
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
-function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
+function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
     const classes = useStyles$l();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
@@ -2181,13 +2176,11 @@ function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSele
     ]);
     // This deals with docked vs undocked state, where undocked is rendered into a separate window via a portal.
     const pane = useMemo(() => {
-        return (jsxs(Fragment, { children: [!isChildWindowOpen && (jsx("div", { ref: paneContainerRef, className: mergeClasses(classes.paneContainer, layoutMode === "inline"
-                        ? undefined
-                        : mergeClasses(classes.paneContainerOverlay, location === "left" ? classes.paneContainerOverlayLeft : classes.paneContainerOverlayRight)), children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) })), jsx(ChildWindow, { imperativeRef: childWindow, onOpenChange: (isOpen) => setIsChildWindowOpen(isOpen), children: corePane })] }));
+        return (jsxs(Fragment, { children: [!isChildWindowOpen && (jsx("div", { ref: paneContainerRef, className: classes.paneContainer, children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) })), jsx(ChildWindow, { imperativeRef: childWindow, onOpenChange: (isOpen) => setIsChildWindowOpen(isOpen), children: corePane })] }));
     }, [collapsed, corePane]);
     return [topPaneTabList, pane, collapsed, setCollapsed, isChildWindowOpen, setUndocked];
 }
-function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, layoutMode = "inline", } = {}) {
+function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, } = {}) {
     return {
         friendlyName: "MainView",
         produces: [ShellServiceIdentity, RootComponentServiceIdentity],
@@ -2342,12 +2335,12 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 const bottomBarLeftItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const bottomBarRightItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const centralContents = useOrderedObservableCollection(centralContentCollection);
-                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed, leftPaneUndocked, setLeftPaneUndocked] = usePane("left", layoutMode, leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
+                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed, leftPaneUndocked, setLeftPaneUndocked] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
                 useEffect(() => {
                     // Propagate shorter lived React component state out to longer lived service state.
                     leftSidePaneContainerState.isDocked = !leftPaneUndocked;
                 }, [leftPaneUndocked]);
-                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed, rightPaneUndocked, setRightPaneUndocked] = usePane("right", layoutMode, rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems);
+                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed, rightPaneUndocked, setRightPaneUndocked] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems);
                 useEffect(() => {
                     // Propagate shorter lived React component state out to longer lived service state.
                     rightSidePaneContainerState.isDocked = !rightPaneUndocked;
@@ -2368,7 +2361,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                         rightSidePaneContainerState.isDocked = true;
                     };
                 }, [setLeftPaneUndocked, setRightPaneUndocked]);
-                return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topToolBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsxs("div", { className: classes.centralContent, children: [centralContents.map((entry) => (jsx(entry.component, {}, entry.key))), toolbarMode === "compact" && (jsxs(Fragment, { children: [jsx(Fade, { visible: leftPaneCollapsed, delay: 50, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerLeft), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelLeftExpandRegular, {}), onClick: () => setLeftPaneCollapsed(false) }) }) }) }), jsx(Fade, { visible: rightPaneCollapsed, delay: 50, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerRight), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelRightExpandRegular, {}), onClick: () => setRightPaneCollapsed(false) }) }) }) })] }))] }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) }))] }));
+                return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topToolBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsxs("div", { className: classes.centralContent, children: [centralContents.map((entry) => (jsx(entry.component, {}, entry.key))), toolbarMode === "compact" && (jsxs(Fragment, { children: [jsx(Fade, { visible: leftPaneCollapsed, delay: 50, duration: 100, unmountOnExit: true, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerLeft), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelLeftExpandRegular, {}), onClick: () => setLeftPaneCollapsed(false) }) }) }) }), jsx(Fade, { visible: rightPaneCollapsed, delay: 50, duration: 100, unmountOnExit: true, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerRight), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelRightExpandRegular, {}), onClick: () => setRightPaneCollapsed(false) }) }) }) })] }))] }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) }))] }));
             };
             rootComponent.displayName = "Shell Service Root";
             return {
@@ -2645,7 +2638,6 @@ function useCommandContextMenuState(commands) {
         checkmark: command.icon ? null : undefined, icon: command.icon ? jsx(command.icon, {}) : undefined, name: "toggleCommands", value: command.displayName, children: command.displayName }, command.displayName)));
     return [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems];
 }
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles$k = makeStyles({
     rootDiv: {
         flex: 1,
@@ -3811,7 +3803,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./exportService-D1VDR7BX.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-DCYVwNJE.js'),
     },
     {
         name: "Capture Tools",
@@ -3819,7 +3811,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-B8vCTKYD.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-Bo4xI_X9.js'),
     },
     {
         name: "Import Tools",
@@ -3827,7 +3819,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-BPzwIgjH.js'),
+        getExtensionModuleAsync: async () => await import('./importService--DIvq_s3.js'),
     },
     {
         name: "Quick Creation Tools (Preview)",
@@ -3835,7 +3827,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DEdXDqIl.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-BFr5_q0T.js'),
     },
 ]);
 
@@ -4899,13 +4891,13 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 const useStyles$f = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
         display: "flex",
         flexDirection: "column",
+        backgroundColor: tokens.colorTransparentBackground,
     },
     spinner: {
         flexGrow: 1,
@@ -4962,7 +4954,7 @@ function MakeModularTool(options) {
                 });
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DS-uWdsz.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-BnPM7JOI.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -9653,9 +9645,7 @@ const ToolBar = (props) => {
         }
     }, [activeToolIndex, changeTool]);
     return (jsxs("div", { className: classes.toolbar, children: [jsx("div", { className: classes.colorSection, children: jsx(Tooltip, { relationship: "label", content: "Pick Tool Color", positioning: "after", children: jsx(ColorPickerPopup, { value: hasAlpha ? computeRGBAColor() : Color3.FromHexString(metadata.color), onChange: handleColorChange }) }) }), jsx(Divider, {}), jsx("div", { className: classes.toolsSection, children: tools.map((tool, index) => {
-                    // eslint-disable-next-line @typescript-eslint/naming-convention
-                    const IconComponent = tool.icon;
-                    return (jsx(Tooltip, { content: tool.name, relationship: "label", positioning: "after", children: jsx(ToggleButton$1, { className: classes.toolButton, appearance: "subtle", checked: index === activeToolIndex, onClick: () => handleToolClick(index), icon: jsx(IconComponent, {}) }) }, index));
+                    return (jsx(Tooltip, { content: tool.name, relationship: "label", positioning: "after", children: jsx(ToggleButton$1, { className: classes.toolButton, appearance: "subtle", checked: index === activeToolIndex, onClick: () => handleToolClick(index), icon: jsx(tool.icon, {}) }) }, index));
                 }) })] }));
 };
 
@@ -11442,6 +11432,7 @@ function ShowInspector(scene, options = {}) {
     // Set default options.
     options = {
         autoResizeEngine: true,
+        layoutMode: "overlay",
         ...options,
     };
     // Sequentialize showing the inspector (e.g. don't start showing until after a previous hide (for example) is finished).
@@ -11450,14 +11441,27 @@ function ShowInspector(scene, options = {}) {
         let parentElement = options.containerElement ?? null;
         // If a container element was not found, find an appropriate one above the engine's rendering canvas.
         if (!parentElement) {
-            parentElement = scene.getEngine().getRenderingCanvas()?.parentElement ?? null;
+            const renderingCanvas = scene.getEngine().getRenderingCanvas();
+            parentElement = renderingCanvas;
             while (parentElement) {
                 const rootNode = parentElement.getRootNode();
                 // TODO: Right now we never parent the inspector within a ShadowRoot because we need to do more work to get FluentProvider to work correctly in this context.
-                if (!(rootNode instanceof ShadowRoot)) {
+                if (rootNode instanceof ShadowRoot) {
+                    // If we are in a ShadowRoot, continue up the tree.
+                    parentElement = rootNode.host.parentElement;
+                }
+                else {
+                    // Found the closest ancestor that is not in a ShadowRoot.
                     break;
                 }
-                parentElement = rootNode.host.parentElement;
+            }
+            if (renderingCanvas && parentElement === renderingCanvas) {
+                // If we were not in a ShadowRoot, then the direct parent of the rendering canvas is the container.
+                parentElement = renderingCanvas.parentElement;
+            }
+            if (!parentElement) {
+                // If we still haven't found a parent element, default to document.body.
+                parentElement = document.body;
             }
         }
         // If we couldn't find a parent element, we can't show the inspector.
@@ -11489,39 +11493,61 @@ function ShowInspector(scene, options = {}) {
                 scene.getEngine().resize();
             }
         });
-        // Remove all the existing children from the parent element.
-        const canvasContainerDisplay = parentElement.style.display;
-        const canvasContainerChildren = [...parentElement.childNodes];
-        parentElement.replaceChildren();
-        disposeActions.push(async () => {
-            // When the ModularTool token is disposed, it unmounts the react element, which asynchronously
-            // removes all children from the parentElement. We need to wait for that to complete before
-            // re-adding the canvas children back to the parentElement.
-            await new Promise((resolve) => setTimeout(resolve));
-            parentElement.replaceChildren(...canvasContainerChildren);
+        // This array will contain all the default Inspector service definitions.
+        const serviceDefinitions = [];
+        // Create a container element for the inspector UI.
+        // This element will become the root React node, so it must be a new empty node
+        // since React will completely take over its contents.
+        const containerElement = document.createElement("div");
+        containerElement.id = "babylon-inspector-container";
+        containerElement.style.position = "absolute";
+        containerElement.style.inset = "0";
+        containerElement.style.display = "flex";
+        // For "overlay" layout mode, we let pointer events pass through the inspector container.
+        // Pointer events are re-enabled specifically for toolbars, side panes, and central content elements.
+        containerElement.style.pointerEvents = "none";
+        // When the layoutMode is "inline", we will re-parent the child nodes of the parentElement under the containerElement.
+        if (options.layoutMode === "inline") {
+            // Remove all the existing children from the parent element.
+            const canvasContainerDisplay = parentElement.style.display;
+            const canvasContainerChildren = [...parentElement.childNodes];
+            parentElement.replaceChildren();
+            disposeActions.push(async () => {
+                // When the ModularTool token is disposed, it unmounts the react element, which asynchronously
+                // removes all children from the parentElement. We need to wait for that to complete before
+                // re-adding the canvas children back to the parentElement.
+                await new Promise((resolve) => setTimeout(resolve));
+                parentElement.replaceChildren(...canvasContainerChildren);
+            });
+            // This service is responsible for injecting the passed in canvas as the "central content" of the shell UI (the main area between the side panes and toolbars).
+            const canvasInjectorServiceDefinition = {
+                friendlyName: "Canvas Injector",
+                consumes: [ShellServiceIdentity],
+                factory: (shellService) => {
+                    const registration = shellService.addCentralContent({
+                        key: "Canvas Injector",
+                        component: () => {
+                            const canvasContainerRef = useRef(null);
+                            useEffect(() => {
+                                canvasContainerRef.current?.replaceChildren(...canvasContainerChildren);
+                            }, []);
+                            return jsx("div", { ref: canvasContainerRef, style: { display: canvasContainerDisplay, position: "absolute", inset: "0" } });
+                        },
+                    });
+                    return {
+                        dispose: () => {
+                            registration.dispose();
+                        },
+                    };
+                },
+            };
+            serviceDefinitions.push(canvasInjectorServiceDefinition);
+        }
+        // Now it is safe to append the container element to the parent.
+        parentElement.appendChild(containerElement);
+        disposeActions.push(() => {
+            parentElement.removeChild(containerElement);
         });
-        // This service is responsible for injecting the passed in canvas as the "central content" of the shell UI (the main area between the side panes and toolbars).
-        const canvasInjectorServiceDefinition = {
-            friendlyName: "Canvas Injector",
-            consumes: [ShellServiceIdentity],
-            factory: (shellService) => {
-                const registration = shellService.addCentralContent({
-                    key: "Canvas Injector",
-                    component: () => {
-                        const canvasContainerRef = useRef(null);
-                        useEffect(() => {
-                            canvasContainerRef.current?.replaceChildren(...canvasContainerChildren);
-                        }, []);
-                        return jsx("div", { ref: canvasContainerRef, style: { display: canvasContainerDisplay, width: "100%", height: "100%" } });
-                    },
-                });
-                return {
-                    dispose: () => {
-                        registration.dispose();
-                    },
-                };
-            },
-        };
         // This service exposes the scene that was passed into Inspector through ISceneContext, which is used by other services that may be used in other contexts outside of Inspector.
         const sceneContextServiceDefinition = {
             friendlyName: "Inspector Scene Context",
@@ -11533,85 +11559,51 @@ function ShowInspector(scene, options = {}) {
                 };
             },
         };
+        serviceDefinitions.push(sceneContextServiceDefinition);
         if (options.autoResizeEngine) {
             const observer = scene.onBeforeRenderObservable.add(() => scene.getEngine().resize());
             disposeActions.push(() => observer.remove());
         }
+        serviceDefinitions.push(
+        // Helps with managing gizmos and a shared utility layer.
+        GizmoServiceDefinition, 
+        // Scene explorer tab and related services.
+        SceneExplorerServiceDefinition, NodeExplorerServiceDefinition, SkeletonExplorerServiceDefinition, MaterialExplorerServiceDefinition, TextureExplorerServiceDefinition, PostProcessExplorerServiceDefinition, RenderingPipelineExplorerServiceDefinition, EffectLayerExplorerServiceDefinition, ParticleSystemExplorerServiceDefinition, SpriteManagerExplorerServiceDefinition, AnimationGroupExplorerServiceDefinition, GuiExplorerServiceDefinition, FrameGraphExplorerServiceDefinition, AtmosphereExplorerServiceDefinition, 
+        // Properties pane tab and related services.
+        ScenePropertiesServiceDefinition, PropertiesServiceDefinition, TexturePropertiesServiceDefinition, CommonPropertiesServiceDefinition, TransformPropertiesServiceDefinition, AnimationPropertiesServiceDefinition, NodePropertiesServiceDefinition, PhysicsPropertiesServiceDefinition, SkeletonPropertiesServiceDefinition, MaterialPropertiesServiceDefinition, LightPropertiesServiceDefinition, SpritePropertiesServiceDefinition, ParticleSystemPropertiesServiceDefinition, CameraPropertiesServiceDefinition, PostProcessPropertiesServiceDefinition, RenderingPipelinePropertiesServiceDefinition, EffectLayerPropertiesServiceDefinition, FrameGraphPropertiesServiceDefinition, AnimationGroupPropertiesServiceDefinition, MetadataPropertiesServiceDefinition, AtmospherePropertiesServiceDefinition, 
+        // Texture editor and related services.
+        TextureEditorServiceDefinition, 
+        // Debug pane tab and related services.
+        DebugServiceDefinition, 
+        // Stats pane tab and related services.
+        StatsServiceDefinition, 
+        // Tools pane tab and related services.
+        ToolsServiceDefinition, 
+        // Settings pane tab and related services.
+        SettingsServiceDefinition, 
+        // Tracks entity selection state (e.g. which Mesh or Material or other entity is currently selected in scene explorer and bound to the properties pane, etc.).
+        SelectionServiceDefinition, 
+        // Gizmos for manipulating objects in the scene.
+        GizmoToolbarServiceDefinition, 
+        // Allows picking objects from the scene to select them.
+        PickingServiceDefinition, 
+        // Adds entry points for user feedback on Inspector v2 (probably eventually will be removed).
+        UserFeedbackServiceDefinition, 
+        // Adds always present "mini stats" (like fps) to the toolbar, etc.
+        MiniStatsServiceDefinition, 
+        // Legacy service to support custom inspectable properties on objects.
+        LegacyInspectableObjectPropertiesServiceDefinition);
         const modularTool = MakeModularTool({
-            containerElement: parentElement,
+            containerElement,
             serviceDefinitions: [
-                // Injects the canvas the scene is rendering to into the central "content" area of the shell UI.
-                canvasInjectorServiceDefinition,
-                // Provides access to the scene in a generic way (other tools might provide a scene in a different way).
-                sceneContextServiceDefinition,
-                // Helps with managing gizmos and a shared utility layer.
-                GizmoServiceDefinition,
-                // Scene explorer tab and related services.
-                SceneExplorerServiceDefinition,
-                NodeExplorerServiceDefinition,
-                SkeletonExplorerServiceDefinition,
-                MaterialExplorerServiceDefinition,
-                TextureExplorerServiceDefinition,
-                PostProcessExplorerServiceDefinition,
-                RenderingPipelineExplorerServiceDefinition,
-                EffectLayerExplorerServiceDefinition,
-                ParticleSystemExplorerServiceDefinition,
-                SpriteManagerExplorerServiceDefinition,
-                AnimationGroupExplorerServiceDefinition,
-                GuiExplorerServiceDefinition,
-                FrameGraphExplorerServiceDefinition,
-                AtmosphereExplorerServiceDefinition,
-                // Properties pane tab and related services.
-                ScenePropertiesServiceDefinition,
-                PropertiesServiceDefinition,
-                TexturePropertiesServiceDefinition,
-                CommonPropertiesServiceDefinition,
-                TransformPropertiesServiceDefinition,
-                AnimationPropertiesServiceDefinition,
-                NodePropertiesServiceDefinition,
-                PhysicsPropertiesServiceDefinition,
-                SkeletonPropertiesServiceDefinition,
-                MaterialPropertiesServiceDefinition,
-                LightPropertiesServiceDefinition,
-                SpritePropertiesServiceDefinition,
-                ParticleSystemPropertiesServiceDefinition,
-                CameraPropertiesServiceDefinition,
-                PostProcessPropertiesServiceDefinition,
-                RenderingPipelinePropertiesServiceDefinition,
-                EffectLayerPropertiesServiceDefinition,
-                FrameGraphPropertiesServiceDefinition,
-                AnimationGroupPropertiesServiceDefinition,
-                MetadataPropertiesServiceDefinition,
-                AtmospherePropertiesServiceDefinition,
-                // Texture editor and related services.
-                TextureEditorServiceDefinition,
-                // Debug pane tab and related services.
-                DebugServiceDefinition,
-                // Stats pane tab and related services.
-                StatsServiceDefinition,
-                // Tools pane tab and related services.
-                ToolsServiceDefinition,
-                // Settings pane tab and related services.
-                SettingsServiceDefinition,
-                // Tracks entity selection state (e.g. which Mesh or Material or other entity is currently selected in scene explorer and bound to the properties pane, etc.).
-                SelectionServiceDefinition,
-                // Gizmos for manipulating objects in the scene.
-                GizmoToolbarServiceDefinition,
-                // Allows picking objects from the scene to select them.
-                PickingServiceDefinition,
-                // Adds entry points for user feedback on Inspector v2 (probably eventually will be removed).
-                UserFeedbackServiceDefinition,
-                // Adds always present "mini stats" (like fps) to the toolbar, etc.
-                MiniStatsServiceDefinition,
-                // Legacy service to support custom inspectable properties on objects.
-                LegacyInspectableObjectPropertiesServiceDefinition,
+                // Default Inspector services.
+                ...serviceDefinitions,
                 // Additional services passed in to the Inspector.
                 ...(options.serviceDefinitions ?? []),
             ],
             themeMode: options.themeMode,
             showThemeSelector: options.showThemeSelector,
             extensionFeeds: [DefaultInspectorExtensionFeed, ...(options.extensionFeeds ?? [])],
-            layoutMode: options.layoutMode,
             toolbarMode: "compact",
             sidePaneRemapper: options.sidePaneRemapper,
         });
@@ -12420,4 +12412,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { useSidePaneDockOverrides as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useVector3Property as G, useColor3Property as H, Inspector as I, useColor4Property as J, useQuaternionProperty as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, MakePropertyHook as O, Popover as P, useInterceptObservable as Q, useEventfulState as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, useObservableCollection as U, Vector3PropertyLine as V, useOrderedObservableCollection as W, usePollingObservable as X, useResource as Y, useAsyncResource as Z, useCompactMode as _, SyncedSliderPropertyLine as a, useAngleConverters as a0, MakeTeachingMoment as a1, MakeDialogTeachingMoment as a2, InterceptFunction as a3, GetPropertyDescriptor as a4, IsPropertyReadonly as a5, InterceptProperty as a6, ObservableCollection as a7, ConstructorFactory as a8, SelectionServiceIdentity as a9, TextInput as aA, ToggleButton as aB, ChildWindow as aC, FactorGradientList as aD, Color3GradientList as aE, Color4GradientList as aF, Pane as aG, BooleanBadgePropertyLine as aH, Color3PropertyLine as aI, Color4PropertyLine as aJ, HexPropertyLine as aK, NumberInputPropertyLine as aL, LinkPropertyLine as aM, PropertyLine as aN, LineContainer as aO, PlaceholderPropertyLine as aP, StringifiedPropertyLine as aQ, TextAreaPropertyLine as aR, TextPropertyLine as aS, RotationVectorPropertyLine as aT, QuaternionPropertyLine as aU, Vector2PropertyLine as aV, Vector4PropertyLine as aW, SelectionServiceDefinition as aa, SettingsContextIdentity as ab, ShowInspector as ac, Checkbox as ad, ColorPickerPopup as ae, InputHexField as af, InputHsvField as ag, ComboBox as ah, DraggableLine as ai, Dropdown as aj, NumberDropdown as ak, StringDropdown as al, FactorGradientComponent as am, Color3GradientComponent as an, Color4GradientComponent as ao, ColorStepGradientComponent as ap, InfoLabel as aq, List as ar, MessageBar as as, PositionedPopover as at, SearchBar as au, SearchBox as av, SpinButton as aw, Switch as ax, SyncedSliderInput as ay, Textarea as az, Button as b, TextInputPropertyLine as c, SpinButtonPropertyLine as d, CheckboxPropertyLine as e, ShellServiceIdentity as f, SceneContextIdentity as g, AccordionSection as h, useExtensionManager as i, MakePopoverTeachingMoment as j, TeachingMoment as k, SidePaneContainer as l, PropertiesServiceIdentity as m, SceneExplorerServiceIdentity as n, SettingsServiceIdentity as o, StatsServiceIdentity as p, ConvertOptions as q, AttachDebugLayer as r, DetachDebugLayer as s, StringDropdownPropertyLine as t, useObservableState as u, BoundProperty as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useProperty as z };
-//# sourceMappingURL=index-2Bq-qBwV.js.map
+//# sourceMappingURL=index-9CJtnfZ3.js.map