@babylonjs/inspector 8.29.0-preview → 8.29.1-preview

package/lib/{index-Bt4ndVv5.js → index-B29Ify1o.js}

@@ -1,15 +1,16 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createContext, useContext, isValidElement, cloneElement, Children, memo, createElement, Suspense, useReducer, lazy } from 'react';
+import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createContext, useContext, isValidElement, cloneElement, Children, useLayoutEffect, memo, createElement, Suspense, useReducer, lazy } from 'react';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { makeStyles, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, ToggleButton as ToggleButton$1, Button as Button$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle1, AccordionPanel, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Divider, TabList, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, SpinButton as SpinButton$1, Slider, Input, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { makeStyles, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, ToggleButton as ToggleButton$1, Button as Button$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle1, AccordionPanel, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, TabList, Divider, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, SpinButton as SpinButton$1, Slider, Input, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
 import { SubtractFilled, AddFilled, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, FilterRegular, MoviesAndTvRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowMoveRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, GlobeRegular, SaveRegular, ArrowUndoRegular, ClearFormattingRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, PaintBrushRegular, BoxRegular, BranchRegular, CameraRegular, LightbulbRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, Cone16Filled, Cone16Regular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, WeatherSunnyLowFilled, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1 } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
 import { Deferred } from '@babylonjs/core/Misc/deferred.js';
+import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
 import { VirtualizerScrollView } from '@fluentui-contrib/react-virtualizer';
 import { FontAsset } from '@babylonjs/addons/msdfText/fontAsset.js';
 import { TextRenderer } from '@babylonjs/addons/msdfText/textRenderer.js';
@@ -28,6 +29,7 @@ import '@babylonjs/core/Engines/AbstractEngine/abstractEngine.timeQuery.js';
 import '@babylonjs/core/Engines/Extensions/engine.query.js';
 import '@babylonjs/core/Engines/WebGPU/Extensions/engine.query.js';
 import { PerfCollectionStrategy } from '@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollectionStrategies.js';
+import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerSceneExtension.js';
 import { PressureObserverWrapper } from '@babylonjs/core/Misc/pressureObserverWrapper.js';
 import { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine.js';
 import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
@@ -1276,7 +1278,7 @@ const useStyles$9 = makeStyles({
         display: "flex",
         flexDirection: "row",
         flex: "0 0 auto",
-        backgroundColor: tokens.colorNeutralBackground1,
+        backgroundColor: tokens.colorNeutralBackground2,
     },
     bar: {
         display: "flex",
@@ -1284,6 +1286,14 @@ const useStyles$9 = makeStyles({
         height: "32px",
         overflow: "hidden",
         padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`,
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        backgroundColor: tokens.colorNeutralBackground1,
+    },
+    barTop: {
+        borderTopWidth: 0,
+    },
+    barBottom: {
+        borderBottomWidth: 0,
     },
     barLeft: {
         marginRight: "auto",
@@ -1297,16 +1307,13 @@ const useStyles$9 = makeStyles({
         flexDirection: "row-reverse",
         columnGap: tokens.spacingHorizontalSNudge,
     },
-    barDivider: {
-        flex: "0 0 auto",
-    },
     barItem: {
         display: "flex",
     },
     paneTabListDiv: {
+        backgroundColor: tokens.colorNeutralBackground2,
         flex: "0 0 auto",
         display: "flex",
-        columnGap: tokens.spacingHorizontalSNudge,
     },
     paneTabListDivLeft: {
         flexDirection: "row-reverse",
@@ -1389,7 +1396,7 @@ const Toolbar = ({ location, components }) => {
     const classes = useStyles$9();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
-    return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: classes.bar, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
+    return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
 };
 // This is a wrapper for a tab in a side pane that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const SidePaneTab = ({ alignment, id, 
@@ -1403,24 +1410,34 @@ icon: Icon, title, suppressTeachingMoment, }) => {
 // 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(alignment, defaultWidth, minWidth, paneComponents, toolbarMode, topBarComponents, bottomBarComponents) {
+function usePane(alignment, defaultWidth, minWidth, topPaneComponents, bottomPaneComponents, toolbarMode, topBarComponents, bottomBarComponents) {
     const classes = useStyles$9();
-    const [selectedTab, setSelectedTab] = useState();
+    const [topSelectedTab, setTopSelectedTab] = useState();
+    const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
     const onExpandCollapseClick = useCallback(() => {
         setCollapsed((collapsed) => !collapsed);
     }, [collapsed]);
     const widthStorageKey = `Babylon/Settings/${alignment}Pane/Width`;
+    const heightStorageKey = `Babylon/Settings/${alignment}Pane/HeightAdjust`;
     const [width, setWidth] = useState(Number.parseInt(localStorage.getItem(widthStorageKey) ?? "") || Math.max(defaultWidth, minWidth));
     const [resizing, setResizing] = useState(false);
     useEffect(() => {
-        if ((selectedTab && !paneComponents.includes(selectedTab)) || (!selectedTab && paneComponents.length > 0)) {
-            setSelectedTab(paneComponents[0]);
+        if ((topSelectedTab && !topPaneComponents.includes(topSelectedTab)) || (!topSelectedTab && topPaneComponents.length > 0)) {
+            setTopSelectedTab(topPaneComponents[0]);
         }
-        else if (selectedTab && paneComponents.length === 0) {
-            setSelectedTab(undefined);
+        else if (topSelectedTab && topPaneComponents.length === 0) {
+            setTopSelectedTab(undefined);
         }
-    }, [selectedTab, paneComponents]);
+    }, [topSelectedTab, topPaneComponents]);
+    useEffect(() => {
+        if ((bottomSelectedTab && !bottomPaneComponents.includes(bottomSelectedTab)) || (!bottomSelectedTab && bottomPaneComponents.length > 0)) {
+            setBottomSelectedTab(bottomPaneComponents[0]);
+        }
+        else if (bottomSelectedTab && bottomPaneComponents.length === 0) {
+            setBottomSelectedTab(undefined);
+        }
+    }, [bottomSelectedTab, bottomPaneComponents]);
     const expandCollapseIcon = useMemo(() => {
         if (alignment === "left") {
             return collapsed ? jsx(PanelLeftExpandRegular, {}) : jsx(PanelLeftContractRegular, {});
@@ -1429,6 +1446,7 @@ function usePane(alignment, defaultWidth, minWidth, paneComponents, toolbarMode,
             return collapsed ? jsx(PanelRightExpandRegular, {}) : jsx(PanelRightContractRegular, {});
         }
     }, [collapsed, alignment]);
+    // TODO: Replace this custom resizing logic with useResizeHandle.
     // This function handles resizing the side pane width.
     const onResizerPointerDown = useCallback((event) => {
         const currentTarget = event.currentTarget;
@@ -1457,44 +1475,86 @@ function usePane(alignment, defaultWidth, minWidth, paneComponents, toolbarMode,
             localStorage.setItem(widthStorageKey, finalWidth.toString());
         }, { once: true });
     }, [resizing]);
+    const createPaneTabList = useCallback((paneComponents, toolbarMode, selectedTab, setSelectedTab) => {
+        return (jsx(Fragment, { children: paneComponents.length > 0 && (jsxs("div", { className: `${classes.paneTabListDiv} ${alignment === "left" || toolbarMode === "compact" ? classes.paneTabListDivLeft : classes.paneTabListDivRight}`, children: [paneComponents.length > 1 && (jsx(Fragment, { children: jsx(TabList, { selectedValue: selectedTab?.key ?? "", onTabSelect: (event, data) => {
+                                const tab = paneComponents.find((entry) => entry.key === data.value);
+                                setSelectedTab(tab);
+                                setCollapsed(false);
+                            }, children: paneComponents.map((entry) => (jsx(SidePaneTab, { alignment: alignment, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true }), jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.paneCollapseButton, appearance: "subtle", icon: expandCollapseIcon, onClick: onExpandCollapseClick }) })] }))] })) }));
+    }, [alignment, collapsed]);
     // This memos the TabList to make it easy for the JSX to be inserted at the top of the pane (in "compact" mode) or returned to the caller to be used in the toolbar (in "full" mode).
-    const paneTabList = useMemo(() => {
-        return (jsx(Fragment, { children: paneComponents.length > 0 && (jsxs("div", { className: `${classes.paneTabListDiv} ${alignment === "left" || toolbarMode === "compact" ? classes.paneTabListDivLeft : classes.paneTabListDivRight}`, children: [paneComponents.length > 1 && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true }), jsx(TabList, { selectedValue: selectedTab?.key ?? "", onTabSelect: (event, data) => {
-                                    const tab = paneComponents.find((entry) => entry.key === data.value);
-                                    setSelectedTab(tab);
-                                    setCollapsed(false);
-                                }, children: paneComponents.map((entry) => (jsx(SidePaneTab, { alignment: alignment, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })), toolbarMode === "full" && (jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.paneCollapseButton, appearance: "subtle", icon: expandCollapseIcon, onClick: onExpandCollapseClick }) }))] })) }));
-    }, [paneComponents, selectedTab, collapsed]);
+    const topPaneTabList = useMemo(() => createPaneTabList(topPaneComponents, toolbarMode, topSelectedTab, setTopSelectedTab), [topPaneComponents, toolbarMode, topSelectedTab]);
+    const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPaneComponents, "compact", bottomSelectedTab, setBottomSelectedTab), [bottomPaneComponents, bottomSelectedTab]);
+    // This manages the CSS variable that controls the height of the bottom pane.
+    const paneHeightAdjustCSSVar = "--pane-height-adjust";
+    const { elementRef: paneVerticalResizeElementRef, handleRef: paneVerticalResizeHandleRef, setValue: setPaneHeightAdjust, } = useResizeHandle({
+        growDirection: "up",
+        relative: true,
+        variableName: paneHeightAdjustCSSVar,
+        variableTarget: "element",
+        onChange: (event, data) => {
+            // Whenever the height is adjusted, store the value.
+            localStorage.setItem(heightStorageKey, data.value.toString());
+        },
+    });
+    // This ensures that when the component is first rendered, the CSS variable is set from storage.
+    useLayoutEffect(() => {
+        const storedPaneHeightAdjust = localStorage.getItem(heightStorageKey);
+        if (storedPaneHeightAdjust) {
+            setPaneHeightAdjust(Number.parseInt(storedPaneHeightAdjust));
+        }
+    });
     // This memoizes the pane itself, which may or may not include the tab list, depending on the toolbar mode.
     const pane = useMemo(() => {
-        return (jsx(Fragment, { children: paneComponents.length > 0 && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { className: classes.paneContainer, children: [toolbarMode === "compact" && (paneComponents.length > 1 || topBarComponents.length > 0) && (jsxs(Fragment, { children: [jsxs("div", { className: classes.barDiv, children: [paneTabList, jsx(Toolbar, { location: "top", components: topBarComponents })] }), jsx(Divider, { className: classes.barDivider })] })), jsxs("div", { className: classes.paneContent, style: { width: `${width}px` }, children: [selectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: selectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, selectedTab?.content && jsx(selectedTab.content, {})] }), toolbarMode === "compact" && bottomBarComponents.length > 0 && (jsxs(Fragment, { children: [jsx(Divider, { className: classes.barDivider }), jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarComponents }) })] }))] }) }), jsx("div", { className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` }, onPointerDown: onResizerPointerDown })] })) }));
-    }, [paneComponents, selectedTab, collapsed, width, resizing]);
-    return [paneTabList, pane];
+        return (jsx(Fragment, { children: (topPaneComponents.length > 0 || bottomPaneComponents.length > 0) && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { className: classes.paneContainer, style: { width: `${width}px` }, children: [toolbarMode === "compact" && (topPaneComponents.length > 1 || topBarComponents.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarComponents })] }) })), jsxs("div", { className: classes.paneContent, children: [topSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: topSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, topSelectedTab?.content && jsx(topSelectedTab.content, {})] }), topPaneComponents.length > 0 && bottomPaneComponents.length > 0 && (jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.headerDivider, style: { margin: "0", minHeight: tokens.spacingVerticalM, cursor: "ns-resize" } })), bottomPaneComponents.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), jsxs("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px,calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: [bottomSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: bottomSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, bottomSelectedTab?.content && jsx(bottomSelectedTab.content, {})] }), toolbarMode === "compact" && bottomBarComponents.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarComponents }) }) }))] }) }), jsx("div", { className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` }, onPointerDown: onResizerPointerDown })] })) }));
+    }, [topPaneComponents, topSelectedTab, bottomPaneComponents, bottomSelectedTab, collapsed, width, resizing]);
+    return [topPaneTabList, pane];
 }
-function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode: toolbarMode = "full", } = {}) {
+function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneMode = "both", } = {}) {
     return {
         friendlyName: "MainView",
         produces: [ShellServiceIdentity, RootComponentServiceIdentity],
         factory: () => {
             const topBarComponentCollection = new ObservableCollection();
             const bottomBarComponentCollection = new ObservableCollection();
-            const leftPaneComponentCollection = new ObservableCollection();
-            const rightPaneComponentCollection = new ObservableCollection();
+            const topLeftPaneComponentCollection = new ObservableCollection();
+            const topRightPaneComponentCollection = new ObservableCollection();
+            const bottomLeftPaneComponentCollection = new ObservableCollection();
+            const bottomRightPaneComponentCollection = new ObservableCollection();
             const contentComponentCollection = new ObservableCollection();
             const rootComponent = () => {
                 const classes = useStyles$9();
-                const topBarComponents = useOrderedObservableCollection(topBarComponentCollection);
-                const bottomBarComponents = useOrderedObservableCollection(bottomBarComponentCollection);
-                const topBarLeftComponents = useMemo(() => topBarComponents.filter((entry) => entry.horizontalLocation === "left"), [topBarComponents]);
-                const topBarRightComponents = useMemo(() => topBarComponents.filter((entry) => entry.horizontalLocation === "right"), [topBarComponents]);
-                const bottomBarLeftComponents = useMemo(() => bottomBarComponents.filter((entry) => entry.horizontalLocation === "left"), [bottomBarComponents]);
-                const bottomBarRightComponents = useMemo(() => bottomBarComponents.filter((entry) => entry.horizontalLocation === "right"), [bottomBarComponents]);
-                const leftPaneComponents = useOrderedObservableCollection(leftPaneComponentCollection);
-                const rightPaneComponents = useOrderedObservableCollection(rightPaneComponentCollection);
+                const topBarItems = useOrderedObservableCollection(topBarComponentCollection);
+                const bottomBarItems = useOrderedObservableCollection(bottomBarComponentCollection);
+                const topLeftPaneItems = useOrderedObservableCollection(topLeftPaneComponentCollection);
+                const topRightPaneItems = useOrderedObservableCollection(topRightPaneComponentCollection);
+                const bottomLeftPaneItems = useOrderedObservableCollection(bottomLeftPaneComponentCollection);
+                const bottomRightPaneItems = useOrderedObservableCollection(bottomRightPaneComponentCollection);
+                const hasLeftPaneItems = topLeftPaneItems.length > 0 || bottomLeftPaneItems.length > 0;
+                const hasRightPaneItems = topRightPaneItems.length > 0 || bottomRightPaneItems.length > 0;
+                // If we are in compact toolbar mode, we may need to move toolbar items from the left to the right or vice versa,
+                // depending on whether there are any side panes on that side.
+                const coerceToolBarItemHorizontalLocation = (item) => {
+                    let location = item.horizontalLocation;
+                    // Coercion is only needed in compact toolbar mode since there might not be a left or right pane.
+                    if (toolbarMode === "compact") {
+                        if (location === "left" && !hasLeftPaneItems) {
+                            location = "right";
+                        }
+                        if (location === "right" && !hasRightPaneItems) {
+                            location = "left";
+                        }
+                    }
+                    return location;
+                };
+                const topBarLeftComponents = useMemo(() => topBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [topBarItems]);
+                const topBarRightComponents = useMemo(() => topBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [topBarItems]);
+                const bottomBarLeftComponents = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomBarItems]);
+                const bottomBarRightComponents = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomBarItems]);
                 const contentComponents = useOrderedObservableCollection(contentComponentCollection);
-                const [leftPaneTabList, leftPane] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, leftPaneComponents, toolbarMode, topBarLeftComponents, bottomBarLeftComponents);
-                const [rightPaneTabList, rightPane] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, rightPaneComponents, toolbarMode, topBarRightComponents, bottomBarRightComponents);
-                return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsxs(Fragment, { children: [jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topBarComponents }), rightPaneTabList] }), jsx(Divider, { className: classes.barDivider })] })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsx("div", { className: classes.centralContent, children: contentComponents.map((entry) => (jsx(entry.component, {}, entry.key))) }), rightPane] }), toolbarMode === "full" && (jsxs(Fragment, { children: [jsx(Divider, { className: classes.barDivider }), jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarComponents }) })] }))] }));
+                const [leftPaneTabList, leftPane] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, topLeftPaneItems, bottomLeftPaneItems, toolbarMode, topBarLeftComponents, bottomBarLeftComponents);
+                const [rightPaneTabList, rightPane] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, topRightPaneItems, bottomRightPaneItems, toolbarMode, topBarRightComponents, bottomBarRightComponents);
+                return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsx("div", { className: classes.centralContent, children: contentComponents.map((entry) => (jsx(entry.component, {}, entry.key))) }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }));
             };
             rootComponent.displayName = "Shell Service Root";
             return {
@@ -1513,11 +1573,38 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                     if (!entry.content.displayName) {
                         entry.content.displayName = `${entry.key} | ${entry.horizontalLocation} pane`;
                     }
-                    if (entry.horizontalLocation === "left") {
-                        return leftPaneComponentCollection.add(entry);
+                    // When we are in "right" side pane mode, we need to coerce all left panes to be right panes.
+                    const coerceSidePaneLocation = (sidePane) => {
+                        let { horizontalLocation, verticalLocation } = sidePane;
+                        if (sidePaneMode === "right") {
+                            // All right panes go to right bottom.
+                            if (horizontalLocation === "right") {
+                                verticalLocation = "bottom";
+                            }
+                            // All left panes go to right top.
+                            if (horizontalLocation === "left") {
+                                horizontalLocation = "right";
+                                verticalLocation = "top";
+                            }
+                        }
+                        return { horizontalLocation, verticalLocation };
+                    };
+                    const { horizontalLocation, verticalLocation } = coerceSidePaneLocation(entry);
+                    if (horizontalLocation === "left") {
+                        if (verticalLocation === "top") {
+                            return topLeftPaneComponentCollection.add(entry);
+                        }
+                        else {
+                            return bottomLeftPaneComponentCollection.add(entry);
+                        }
                     }
                     else {
-                        return rightPaneComponentCollection.add(entry);
+                        if (verticalLocation === "top") {
+                            return topRightPaneComponentCollection.add(entry);
+                        }
+                        else {
+                            return bottomRightPaneComponentCollection.add(entry);
+                        }
                     }
                 },
                 addCentralContent: (entry) => contentComponentCollection.add(entry),
@@ -1543,6 +1630,7 @@ const PropertiesServiceDefinition = {
             title: "Properties",
             icon: DocumentTextRegular,
             horizontalLocation: "right",
+            verticalLocation: "top",
             order: 100,
             suppressTeachingMoment: true,
             content: () => {
@@ -2046,6 +2134,7 @@ const SceneExplorerServiceDefinition = {
             title: "Scene Explorer",
             icon: CubeTreeRegular,
             horizontalLocation: "left",
+            verticalLocation: "top",
             suppressTeachingMoment: true,
             content: () => {
                 const sections = useOrderedObservableCollection(sectionsCollection);
@@ -2242,6 +2331,7 @@ const DebugServiceDefinition = {
             title: "Debug",
             icon: BugRegular,
             horizontalLocation: "right",
+            verticalLocation: "top",
             order: 200,
             suppressTeachingMoment: true,
             content: () => {
@@ -2304,6 +2394,7 @@ const SettingsServiceDefinition = {
             title: "Settings",
             icon: SettingsRegular,
             horizontalLocation: "right",
+            verticalLocation: "top",
             order: 500,
             suppressTeachingMoment: true,
             content: () => {
@@ -2574,6 +2665,7 @@ const StatsServiceDefinition = {
             title: "Statistics",
             icon: DataBarHorizontalRegular,
             horizontalLocation: "right",
+            verticalLocation: "top",
             order: 300,
             suppressTeachingMoment: true,
             content: () => {
@@ -2662,6 +2754,7 @@ const ToolsServiceDefinition = {
                     title: "Tools",
                     icon: WrenchRegular,
                     horizontalLocation: "right",
+                    verticalLocation: "top",
                     order: 400,
                     suppressTeachingMoment: true,
                     content: () => {
@@ -2727,16 +2820,16 @@ class BuiltInsExtensionFeed {
     }
     async getExtensionModuleAsync(name) {
         if (name === CreationToolsExtensionMetadata.name) {
-            return await import('./creationToolsService-CISLGWl-.js');
+            return await import('./creationToolsService-CX79OLiq.js');
         }
         else if (name === ExportToolsExtensionMetadata.name) {
-            return await import('./exportService-n5-mIhJj.js');
+            return await import('./exportService-CzzSbQnD.js');
         }
         else if (name === CaptureToolsExtensionMetadata.name) {
-            return await import('./captureService-wvKpBv07.js');
+            return await import('./captureService-4uUJw84S.js');
         }
         else if (name === ImportToolsExtensionMetadata.name) {
-            return await import('./importService-B-XgHjs9.js');
+            return await import('./importService-BJFsjp8c.js');
         }
         return undefined;
     }
@@ -8124,6 +8217,7 @@ function _ShowInspector(scene, options) {
         isThemeable: options.isThemeable ?? true,
         extensionFeeds: options.isExtensible ? [new BuiltInsExtensionFeed()] : [],
         toolbarMode: "compact",
+        sidePaneMode: options.embedMode ? "right" : "both",
     });
     disposeActions.push(() => modularTool.dispose());
     let disposed = false;
@@ -8401,4 +8495,4 @@ const Pane = (props) => {
 };
 
 export { Checkbox as $, MakePopoverTeachingMoment as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, GetPropertyDescriptor as G, IsPropertyReadonly as H, InterceptFunction as I, InterceptProperty as J, ConstructorFactory as K, LinkToEntityPropertyLine as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, SelectionServiceIdentity as O, Pane$1 as P, SelectionServiceDefinition as Q, SettingsContextIdentity as R, ShellServiceIdentity as S, ToolsServiceIdentity as T, IsInspectorVisible as U, ShowInspector as V, HideInspector as W, Inspector as X, AccordionSection as Y, Accordion as Z, Button as _, SceneContextIdentity as a, ColorPickerPopup as a0, InputHexField as a1, InputHsvField as a2, ComboBox as a3, DraggableLine as a4, Dropdown as a5, NumberDropdown as a6, StringDropdown as a7, FactorGradientComponent as a8, Color3GradientComponent as a9, Color4GradientComponent as aa, ColorStepGradientComponent as ab, InfoLabel as ac, List as ad, MessageBar as ae, PositionedPopover as af, SearchBar as ag, SearchBox as ah, SpinButton as ai, CalculatePrecision as aj, Switch as ak, SyncedSliderInput as al, Textarea as am, TextInput as an, ToggleButton as ao, FactorGradientList as ap, Color3GradientList as aq, Color4GradientList as ar, Pane as as, SwitchPropertyLine as b, SyncedSliderPropertyLine as c, PropertiesServiceIdentity as d, SceneExplorerServiceIdentity as e, SettingsServiceIdentity as f, StatsServiceIdentity as g, BoundProperty as h, TeachingMoment as i, useProperty as j, useVector3Property as k, useColor3Property as l, useColor4Property as m, useQuaternionProperty as n, MakePropertyHook as o, useInterceptObservable as p, useEventfulState as q, useObservableCollection as r, useOrderedObservableCollection as s, usePollingObservable as t, useObservableState as u, useResource as v, useAsyncResource as w, useAngleConverters as x, MakeTeachingMoment as y, MakeDialogTeachingMoment as z };
-//# sourceMappingURL=index-Bt4ndVv5.js.map
+//# sourceMappingURL=index-B29Ify1o.js.map