@babylonjs/inspector 8.32.3-preview → 8.33.0-preview

package/lib/index.js

@@ -3,9 +3,9 @@ import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createCo
 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, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Toolbar as Toolbar$1, Tooltip, ToolbarRadioButton, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, treeItemLevelToken, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, TabList, Tab, DialogContent, SplitButton, MenuItemRadio, DialogActions, List as List$1, ListItem, Badge, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Portal, Toolbar as Toolbar$1, Tooltip, ToolbarRadioButton, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, treeItemLevelToken, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, TabList, Tab, DialogContent, SplitButton, MenuItemRadio, DialogActions, List as List$1, ListItem, Badge, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
 export { Link } from '@fluentui/react-components';
-import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, DeleteFilled } from '@fluentui/react-icons';
+import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, 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';
@@ -68,6 +68,7 @@ import { MultiMaterial } from '@babylonjs/core/Materials/multiMaterial.js';
 import { PBRBaseMaterial } from '@babylonjs/core/Materials/PBR/pbrBaseMaterial.js';
 import { PBRBaseSimpleMaterial } from '@babylonjs/core/Materials/PBR/pbrBaseSimpleMaterial.js';
 import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js';
+import { OpenPBRMaterial } from '@babylonjs/core/Materials/PBR/openpbrMaterial.js';
 import { SkyMaterial } from '@babylonjs/materials/sky/skyMaterial.js';
 import { Constants } from '@babylonjs/core/Engines/constants.js';
 import { Engine } from '@babylonjs/core/Engines/engine.js';
@@ -943,6 +944,7 @@ const Accordion = (props) => {
 };
 
 const CompactModeStorageKey = "Babylon/Settings/IsCompactMode";
+const SidePaneDockOverridesStorageKey = "Babylon/Settings/SidePaneDockOverrides";
 function useSetting(storageKey, defaultValue) {
     const [value, setValue, resetValue] = useLocalStorage(storageKey, defaultValue);
     if (!localStorage.getItem(storageKey)) {
@@ -957,6 +959,13 @@ function useSetting(storageKey, defaultValue) {
 function useCompactMode() {
     return useSetting(CompactModeStorageKey, !matchMedia("(pointer: coarse)").matches);
 }
+/**
+ * Gets the side pane dock overrides configuration.
+ * @returns A record mapping side pane IDs to their dock locations.
+ */
+function useSidePaneDockOverrides() {
+    return useSetting(SidePaneDockOverridesStorageKey, {});
+}
 const RadiansToDegrees = 180 / Math.PI;
 function WrapAngle(angle) {
     angle %= Math.PI * 2;
@@ -1470,15 +1479,22 @@ const Theme = (props) => {
  */
 function useResizeHandle(params) {
     const { growDirection, variableName, onChange } = params;
-    // const [value, setValue] = useState(0);
+    const valueRef = useRef(0);
     const [elementRef, setElementRef] = useState(null);
     const [handleRef, setHandleRef] = useState(null);
-    const setValue = useCallback((value) => {
+    const updateElementStyle = useCallback((value) => {
         if (elementRef) {
             elementRef.style.setProperty(variableName, `${value}px`);
         }
+    }, [elementRef, variableName]);
+    const setValue = useCallback((value) => {
+        valueRef.current = value;
+        updateElementStyle(value);
         onChange?.(value);
-    }, [elementRef, variableName, onChange]);
+    }, [updateElementStyle, onChange]);
+    useEffect(() => {
+        updateElementStyle(valueRef.current);
+    }, [updateElementStyle]);
     useEffect(() => {
         if (handleRef) {
             let delta = 0;
@@ -1503,6 +1519,7 @@ function useResizeHandle(params) {
             };
             const onPointerDown = (event) => {
                 event.preventDefault();
+                delta = valueRef.current;
                 handleRef.setPointerCapture(event.pointerId);
                 handleRef.addEventListener("pointermove", onPointerMove);
             };
@@ -1510,12 +1527,12 @@ function useResizeHandle(params) {
                 event.preventDefault();
                 handleRef.releasePointerCapture(event.pointerId);
                 handleRef.removeEventListener("pointermove", onPointerMove);
-                delta = coerceDelta(delta);
+                valueRef.current = coerceDelta(valueRef.current);
             };
             handleRef.addEventListener("pointerdown", onPointerDown);
             handleRef.addEventListener("pointerup", onPointerUp);
         }
-    }, [handleRef]);
+    }, [handleRef, setValue]);
     return {
         elementRef: setElementRef,
         handleRef: setHandleRef,
@@ -1615,14 +1632,16 @@ const useStyles$d = makeStyles({
     },
     paneHeaderDiv: {
         display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        backgroundColor: tokens.colorNeutralBackgroundInverted,
+        flexDirection: "row",
+        alignItems: "center",
         height: "36px",
     },
     paneHeaderText: {
+        flex: 1,
         marginLeft: tokens.spacingHorizontalM,
-        color: tokens.colorNeutralForegroundInverted,
+    },
+    paneHeaderButton: {
+        color: "inherit",
     },
     paneDivider: {
         flex: "0 0 auto",
@@ -1672,17 +1691,25 @@ const useStyles$d = makeStyles({
         overflow: "hidden",
     },
 });
-const PaneHeader = ({ title }) => {
+const DockMenu = (props) => {
+    const { openOnContext, sidePaneId, dockOptions, children } = props;
+    const dockLeft = dockOptions.get("full-left");
+    const dockTopLeft = dockOptions.get("top-left");
+    const dockBottomLeft = dockOptions.get("bottom-left");
+    const dockRight = dockOptions.get("full-right");
+    const dockTopRight = dockOptions.get("top-right");
+    const dockBottomRight = dockOptions.get("bottom-right");
+    return (jsxs(Menu, { openOnContext: openOnContext, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: children }), jsx(Theme, { children: jsx(MenuPopover, { children: jsx(MenuList, { children: jsxs(MenuGroup, { children: [jsx(MenuGroupHeader, { children: "Dock" }), dockLeft && (jsx(MenuItem, { icon: jsx(LayoutColumnTwoFocusLeftFilled, {}), onClick: () => dockLeft(sidePaneId), children: "Left" })), dockTopLeft && (jsx(MenuItem, { icon: jsx(LayoutColumnTwoSplitLeftFocusTopLeftFilled, {}), onClick: () => dockTopLeft(sidePaneId), children: "Top Left" })), dockBottomLeft && (jsx(MenuItem, { icon: jsx(LayoutColumnTwoSplitLeftFocusBottomLeftFilled, {}), onClick: () => dockBottomLeft(sidePaneId), children: "Bottom Left" })), dockRight && (jsx(MenuItem, { icon: jsx(LayoutColumnTwoFocusRightFilled, {}), onClick: () => dockRight(sidePaneId), children: "Right" })), dockTopRight && (jsx(MenuItem, { icon: jsx(LayoutColumnTwoSplitRightFocusTopRightFilled, {}), onClick: () => dockTopRight(sidePaneId), children: "Top Right" })), dockBottomRight && (jsx(MenuItem, { icon: jsx(LayoutColumnTwoSplitRightFocusBottomRightFilled, {}), onClick: () => dockBottomRight(sidePaneId), children: "Bottom Right" }))] }) }) }) })] }));
+};
+const PaneHeader = (props) => {
+    const { id, title, dockOptions } = props;
     const classes = useStyles$d();
-    if (!title) {
-        return null;
-    }
-    return (jsx("div", { className: classes.paneHeaderDiv, children: jsx(Subtitle2Stronger, { className: classes.paneHeaderText, children: title }) }));
+    return (jsx(Theme, { invert: true, children: jsxs("div", { className: classes.paneHeaderDiv, children: [jsx(Subtitle2Stronger, { className: classes.paneHeaderText, children: title }), jsx(DockMenu, { sidePaneId: id, dockOptions: dockOptions, children: jsx(Button$1, { className: classes.paneHeaderButton, appearance: "transparent", icon: jsx(MoreHorizontalRegular, {}) }) })] }) }));
 };
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
-const ToolbarItem = ({ location, alignment, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
+const ToolbarItem = ({ verticalLocation, horizontalLocation, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
     const classes = useStyles$d();
-    const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${location}/${alignment}/${displayName ?? id}`), [displayName, id]);
+    const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: displayName ?? "Extension", description: `The "${displayName ?? id}" extension can be accessed here.` }), jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: jsx(Component, {}) })] }));
 };
@@ -1692,26 +1719,26 @@ const Toolbar = ({ location, components }) => {
     const classes = useStyles$d();
     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} ${location === "top" ? classes.barTop : null}`, 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 : null}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: 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, { verticalLocation: location, horizontalLocation: 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 = (props) => {
-    const { alignment, id, isSelected, 
+    const { location, id, isSelected, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, suppressTeachingMoment, } = props;
     const classes = useStyles$d();
-    const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${alignment}/${title ?? id}`), [title, id]);
+    const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     const tabClass = mergeClasses(classes.tab, isSelected ? undefined : classes.unselectedTab);
-    return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: title ?? "Extension", description: `The "${title ?? id}" extension can be accessed here.` }), jsx(Theme, { className: tabClass, invert: isSelected, children: jsx(ToolbarRadioButton, { ref: teachingMoment.targetRef, title: title ?? id, appearance: "transparent", className: classes.tabRadioButton, name: "selectedTab", value: id, icon: {
-                        className: isSelected ? classes.selectedTabIcon : undefined,
-                        children: jsx(Icon, {}),
-                    } }) })] }));
+    return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: title ?? "Extension", description: `The "${title ?? id}" extension can be accessed here.` }), jsx(Theme, { className: tabClass, invert: isSelected, children: jsx(DockMenu, { openOnContext: true, sidePaneId: id, dockOptions: dockOptions, children: jsx(ToolbarRadioButton, { ref: teachingMoment.targetRef, title: title ?? id, appearance: "transparent", className: classes.tabRadioButton, name: "selectedTab", value: id, icon: {
+                            className: isSelected ? classes.selectedTabIcon : undefined,
+                            children: jsx(Icon, {}),
+                        } }) }) })] }));
 };
 // 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, topPanes, bottomPanes, onSelectSidePane, toolbarMode, topBarItems, bottomBarItems) {
+function usePane(location, defaultWidth, minWidth, sidePanes, topPaneContainerRef, bottomPaneContainerRef, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
     const classes = useStyles$d();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
@@ -1719,8 +1746,25 @@ function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, onSel
     const onExpandCollapseClick = useCallback(() => {
         setCollapsed((collapsed) => !collapsed);
     }, [collapsed]);
-    const widthStorageKey = `Babylon/Settings/${alignment}Pane/WidthAdjust`;
-    const heightStorageKey = `Babylon/Settings/${alignment}Pane/HeightAdjust`;
+    const widthStorageKey = `Babylon/Settings/${location}Pane/WidthAdjust`;
+    const heightStorageKey = `Babylon/Settings/${location}Pane/HeightAdjust`;
+    const currentSidePanes = useMemo(() => sidePanes.filter((entry) => entry.horizontalLocation === location), [sidePanes, location]);
+    const topPanes = useMemo(() => currentSidePanes.filter((entry) => entry.verticalLocation === "top"), [currentSidePanes]);
+    const bottomPanes = useMemo(() => currentSidePanes.filter((entry) => entry.verticalLocation === "bottom"), [currentSidePanes]);
+    const getValidDockOperations = useCallback((verticalLocation) => {
+        const validDockOperations = new Map(dockOperations);
+        // Can't re-dock to the current location.
+        validDockOperations.delete(`${verticalLocation}-${location}`);
+        // Full would mean there are no bottom panes, so this is also re-docking to the current location.
+        validDockOperations.delete(`full-${location}`);
+        // If there is only one pane left, it can't be docked to the bottom (as this would leave no top panes).
+        if (currentSidePanes.length === 1) {
+            validDockOperations.delete(`bottom-${location}`);
+        }
+        return validDockOperations;
+    }, [location, dockOperations, currentSidePanes]);
+    const validTopDockOptions = useMemo(() => getValidDockOperations("top"), [getValidDockOperations]);
+    const validBottomDockOptions = useMemo(() => getValidDockOperations("bottom"), [getValidDockOperations]);
     // Selects a default top tab (during initialization or if the selected tab is removed).
     useEffect(() => {
         if ((topSelectedTab && !topPanes.includes(topSelectedTab)) || (!topSelectedTab && topPanes.length > 0)) {
@@ -1756,30 +1800,30 @@ function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, onSel
         return () => observer.remove();
     }, [topPanes, bottomPanes, onSelectSidePane]);
     const expandCollapseIcon = useMemo(() => {
-        if (alignment === "left") {
+        if (location === "left") {
             return collapsed ? jsx(PanelLeftExpandRegular, {}) : jsx(PanelLeftContractRegular, {});
         }
         else {
             return collapsed ? jsx(PanelRightExpandRegular, {}) : jsx(PanelRightContractRegular, {});
         }
-    }, [collapsed, alignment]);
-    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(Toolbar$1, { className: classes.tabToolbar, checkedValues: { selectedTab: [selectedTab?.key ?? ""] }, onCheckedValueChange: (event, data) => {
+    }, [collapsed, location]);
+    const createPaneTabList = useCallback((paneComponents, toolbarMode, selectedTab, setSelectedTab, dockOptions) => {
+        return (jsx(Fragment, { children: paneComponents.length > 0 && (jsxs("div", { className: `${classes.paneTabListDiv} ${location === "left" || toolbarMode === "compact" ? classes.paneTabListDivLeft : classes.paneTabListDivRight}`, children: [paneComponents.length > 1 && (jsx(Fragment, { children: jsx(Toolbar$1, { className: classes.tabToolbar, checkedValues: { selectedTab: [selectedTab?.key ?? ""] }, onCheckedValueChange: (event, data) => {
                                 const tab = paneComponents.find((entry) => entry.key === data.checkedItems[0]);
                                 setSelectedTab(tab);
                                 setCollapsed(false);
                             }, children: paneComponents.map((entry) => {
                                 const isSelected = selectedTab?.key === entry.key;
-                                return (jsx(SidePaneTab, { alignment: alignment, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment, isSelected: isSelected && !collapsed }, entry.key));
+                                return (jsx(SidePaneTab, { location: location, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment, isSelected: isSelected && !collapsed, dockOptions: dockOptions }, entry.key));
                             }) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [paneComponents.length > 1 && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true, style: { minHeight: 0 } }), " "] })), 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]);
+    }, [location, 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 topPaneTabList = useMemo(() => createPaneTabList(topPanes, toolbarMode, topSelectedTab, setTopSelectedTab), [createPaneTabList, topPanes, toolbarMode, topSelectedTab]);
-    const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPanes, "compact", bottomSelectedTab, setBottomSelectedTab), [createPaneTabList, bottomPanes, bottomSelectedTab]);
+    const topPaneTabList = useMemo(() => createPaneTabList(topPanes, toolbarMode, topSelectedTab, setTopSelectedTab, validTopDockOptions), [createPaneTabList, topPanes, toolbarMode, topSelectedTab]);
+    const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPanes, "compact", bottomSelectedTab, setBottomSelectedTab, validBottomDockOptions), [createPaneTabList, bottomPanes, bottomSelectedTab]);
     // This manages the CSS variable that controls the width of the side pane.
     const paneWidthAdjustCSSVar = "--pane-width-adjust";
     const { elementRef: paneHorizontalResizeElementRef, handleRef: paneHorizontalResizeHandleRef, setValue: setPaneWidthAdjust, } = useResizeHandle({
-        growDirection: alignment === "left" ? "end" : "start",
+        growDirection: location === "left" ? "end" : "start",
         variableName: paneWidthAdjustCSSVar,
         minValue: minWidth - defaultWidth,
         onChange: (value) => {
@@ -1810,56 +1854,182 @@ function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, onSel
     }, []);
     // 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: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems })] }) })), jsxs("div", { className: classes.paneContent, children: [jsx(PaneHeader, { title: topSelectedTab?.title }), topSelectedTab?.content && jsx(topSelectedTab.content, {})] }), topPanes.length > 0 && bottomPanes.length > 0 && jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.paneDivider }), bottomPanes.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (jsxs("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px, calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: [jsx(PaneHeader, { title: bottomSelectedTab?.title }), bottomSelectedTab?.content && jsx(bottomSelectedTab.content, {})] })), toolbarMode === "compact" && bottomBarItems.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) }));
-    }, [topPanes, topSelectedTab, bottomPanes, bottomSelectedTab, topBarItems, bottomBarItems, topPaneTabList, bottomPaneTabList, collapsed]);
-    return [topPaneTabList, pane];
+        return (jsx(Fragment, { 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: jsxs("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems })] }) })), topPanes.length > 0 && (jsx("div", { className: classes.paneContent, children: topSelectedTab && (jsxs(Fragment, { children: [jsx(PaneHeader, { id: topSelectedTab.key, title: topSelectedTab.title, dockOptions: validTopDockOptions }), jsx("div", { ref: topPaneContainerRef, className: classes.paneContent })] })) })), topPanes.length > 0 && bottomPanes.length > 0 && jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.paneDivider }), bottomPanes.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (jsx("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px, calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: bottomSelectedTab && (jsxs(Fragment, { children: [jsx(PaneHeader, { id: bottomSelectedTab.key, title: bottomSelectedTab.title, dockOptions: validBottomDockOptions }), jsx("div", { ref: bottomPaneContainerRef, className: classes.paneContent })] })) })), toolbarMode === "compact" && bottomBarItems.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) }));
+    }, [
+        topPanes,
+        topSelectedTab,
+        validTopDockOptions,
+        bottomPanes,
+        bottomSelectedTab,
+        validBottomDockOptions,
+        topBarItems,
+        bottomBarItems,
+        topPaneTabList,
+        bottomPaneTabList,
+        collapsed,
+    ]);
+    return [topPaneTabList, pane, topSelectedTab, bottomSelectedTab];
 }
-function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneMode = "both", } = {}) {
+function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, } = {}) {
     return {
         friendlyName: "MainView",
         produces: [ShellServiceIdentity, RootComponentServiceIdentity],
         factory: () => {
-            const topBarItemCollection = new ObservableCollection();
-            const bottomBarItemCollection = new ObservableCollection();
-            const topLeftPaneCollection = new ObservableCollection();
-            const topRightPaneCollection = new ObservableCollection();
-            const bottomLeftPaneCollection = new ObservableCollection();
-            const bottomRightPaneCollection = new ObservableCollection();
+            const toolbarItemCollection = new ObservableCollection();
+            const sidePaneCollection = new ObservableCollection();
             const centralContentCollection = new ObservableCollection();
-            const onSelectSidePane = new Observable();
+            const onSelectSidePane = new Observable(undefined, true);
             const rootComponent = () => {
                 const classes = useStyles$d();
-                const topBarItems = useOrderedObservableCollection(topBarItemCollection);
-                const bottomBarItems = useOrderedObservableCollection(bottomBarItemCollection);
-                const topLeftPanes = useOrderedObservableCollection(topLeftPaneCollection);
-                const topRightPanes = useOrderedObservableCollection(topRightPaneCollection);
-                const bottomLeftPanes = useOrderedObservableCollection(bottomLeftPaneCollection);
-                const bottomRightPanes = useOrderedObservableCollection(bottomRightPaneCollection);
-                const hasLeftPanes = topLeftPanes.length > 0 || bottomLeftPanes.length > 0;
-                const hasRightPanes = topRightPanes.length > 0 || bottomRightPanes.length > 0;
+                const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSidePaneDockOverrides();
+                // This function returns a promise that resolves after the dock change takes effect so that
+                // we can then select the re-docked pane.
+                const pendingPaneReselects = useRef([]);
+                const updateSidePaneDockOverride = useCallback((key, horizontalLocation, verticalLocation) => {
+                    setSidePaneDockOverrides((current) => ({
+                        ...current,
+                        [key]: { horizontalLocation, verticalLocation },
+                    }));
+                    pendingPaneReselects.current.push(key);
+                }, [setSidePaneDockOverrides]);
+                const toolbarItems = useOrderedObservableCollection(toolbarItemCollection);
+                const sidePanes = useOrderedObservableCollection(sidePaneCollection);
+                const coercedSidePaneCache = useRef(new Map());
+                const coercedSidePanes = useMemo(() => {
+                    // First pass - apply overrides and respect the side pane mode.
+                    const coercedSidePanes = sidePanes.map((sidePaneDefinition) => {
+                        let sidePaneEntry = coercedSidePaneCache.current.get(sidePaneDefinition.key);
+                        if (!sidePaneEntry) {
+                            // Manually create html element containers outside the React tree to prevent unmounting/mounting
+                            // when panes are re-docked or the selected tabs change. This preserves state within the side panes.
+                            // This is combined with the usage of React portals to make it all work.
+                            const sidePaneContainer = document.createElement("div");
+                            sidePaneContainer.style.display = "flex";
+                            sidePaneContainer.style.flex = "1";
+                            sidePaneContainer.style.flexDirection = "column";
+                            sidePaneContainer.style.overflow = "hidden";
+                            sidePaneEntry = { ...sidePaneDefinition, container: sidePaneContainer };
+                            coercedSidePaneCache.current.set(sidePaneDefinition.key, sidePaneEntry);
+                        }
+                        const override = sidePaneDockOverrides[sidePaneDefinition.key];
+                        if (override) {
+                            // Override (user manually re-docked) has the highest priority.
+                            sidePaneEntry.horizontalLocation = override.horizontalLocation;
+                            sidePaneEntry.verticalLocation = override.verticalLocation;
+                        }
+                        else if (sidePaneRemapper) {
+                            // A side pane remapper has the next highest priority.
+                            const { horizontalLocation, verticalLocation } = sidePaneRemapper(sidePaneDefinition);
+                            sidePaneEntry.horizontalLocation = horizontalLocation;
+                            sidePaneEntry.verticalLocation = verticalLocation;
+                        }
+                        else {
+                            // Otherwise use the default defined location.
+                            sidePaneEntry.horizontalLocation = sidePaneDefinition.horizontalLocation;
+                            sidePaneEntry.verticalLocation = sidePaneDefinition.verticalLocation;
+                        }
+                        return sidePaneEntry;
+                    });
+                    // Second pass - correct any invalid state, specifically if there are only bottom panes, force them to be top panes.
+                    for (const side of ["left", "right"]) {
+                        const topPanes = coercedSidePanes.filter((entry) => entry.horizontalLocation === side && entry.verticalLocation === "top");
+                        const bottomPanes = coercedSidePanes.filter((entry) => entry.horizontalLocation === side && entry.verticalLocation === "bottom");
+                        if (bottomPanes.length > 0 && topPanes.length === 0) {
+                            for (const pane of bottomPanes) {
+                                pane.verticalLocation = "top";
+                                updateSidePaneDockOverride(pane.key, side, "top");
+                            }
+                        }
+                    }
+                    // Cleanup any cached panes that are no longer present.
+                    for (const key of coercedSidePaneCache.current.keys()) {
+                        if (!coercedSidePanes.some((entry) => entry.key === key)) {
+                            coercedSidePaneCache.current.delete(key);
+                        }
+                    }
+                    return coercedSidePanes;
+                }, [sidePanes, sidePaneDockOverrides, updateSidePaneDockOverride, sidePaneRemapper]);
+                useEffect(() => {
+                    for (const paneKey of pendingPaneReselects.current.splice(0)) {
+                        onSelectSidePane.notifyObservers(paneKey);
+                    }
+                }, [coercedSidePanes]);
+                const sidePaneDockOperations = useMemo(() => {
+                    const sidePaneDockOperations = new Map();
+                    for (const side of ["left", "right"]) {
+                        const currentSidePanes = coercedSidePanes.filter((entry) => entry.horizontalLocation === side);
+                        const dockTop = (sidePaneKey) => {
+                            updateSidePaneDockOverride(sidePaneKey, side, "top");
+                        };
+                        const dockBottom = (sidePaneKey) => {
+                            updateSidePaneDockOverride(sidePaneKey, side, "bottom");
+                        };
+                        if (currentSidePanes.some((entry) => entry.verticalLocation === "bottom")) {
+                            // If there are bottom panes, there must also be top panes, and so top and bottom are valid locations.
+                            sidePaneDockOperations.set(`top-${side}`, dockTop);
+                            sidePaneDockOperations.set(`bottom-${side}`, dockBottom);
+                        }
+                        else if (currentSidePanes.length > 0) {
+                            // If there are only top panes, then full and bottom are valid locations.
+                            sidePaneDockOperations.set(`full-${side}`, dockTop);
+                            sidePaneDockOperations.set(`bottom-${side}`, dockBottom);
+                        }
+                        else {
+                            // If there are no panes, then only full is a valid location.
+                            sidePaneDockOperations.set(`full-${side}`, dockTop);
+                        }
+                    }
+                    return sidePaneDockOperations;
+                }, [coercedSidePanes]);
+                const hasLeftPanes = coercedSidePanes.some((entry) => entry.horizontalLocation === "left");
+                const hasRightPanes = coercedSidePanes.some((entry) => entry.horizontalLocation === "right");
                 // 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;
+                const coerceToolBarItemHorizontalLocation = useMemo(() => (item) => {
+                    let horizontalLocation = 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" && !hasLeftPanes) {
-                            location = "right";
+                        if (horizontalLocation === "left" && !hasLeftPanes) {
+                            horizontalLocation = "right";
                         }
-                        if (location === "right" && !hasRightPanes) {
-                            location = "left";
+                        if (horizontalLocation === "right" && !hasRightPanes) {
+                            horizontalLocation = "left";
                         }
                     }
-                    return location;
-                };
-                const topBarLeftItems = useMemo(() => topBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [topBarItems]);
-                const topBarRightItems = useMemo(() => topBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [topBarItems]);
-                const bottomBarLeftItems = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomBarItems]);
-                const bottomBarRightItems = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomBarItems]);
+                    return horizontalLocation;
+                }, [toolbarMode, hasLeftPanes, hasRightPanes]);
+                const topToolBarItems = useMemo(() => toolbarItems.filter((entry) => entry.verticalLocation === "top"), [toolbarItems]);
+                const bottomToolBarItems = useMemo(() => toolbarItems.filter((entry) => entry.verticalLocation === "bottom"), [toolbarItems]);
+                const topBarLeftItems = useMemo(() => topToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [topToolBarItems, coerceToolBarItemHorizontalLocation]);
+                const topBarRightItems = useMemo(() => topToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [topToolBarItems, coerceToolBarItemHorizontalLocation]);
+                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] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, topLeftPanes, bottomLeftPanes, onSelectSidePane, toolbarMode, topBarLeftItems, bottomBarLeftItems);
-                const [rightPaneTabList, rightPane] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, topRightPanes, bottomRightPanes, onSelectSidePane, toolbarMode, topBarRightItems, bottomBarRightItems);
-                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: centralContents.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 }) }) }))] }));
+                const [topLeftPaneContainer, setTopLeftPaneContainer] = useState(null);
+                const [bottomLeftPaneContainer, setBottomLeftPaneContainer] = useState(null);
+                const [topRightPaneContainer, setTopRightPaneContainer] = useState(null);
+                const [bottomRightPaneContainer, setBottomRightPaneContainer] = useState(null);
+                const [leftPaneTabList, leftPane, topLeftSelectedPane, bottomLeftSelectedPane] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, setTopLeftPaneContainer, setBottomLeftPaneContainer, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
+                const [rightPaneTabList, rightPane, topRightSelectedPane, bottomRightSelectedPane] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, setTopRightPaneContainer, setBottomRightPaneContainer, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems);
+                // Update the content of the top left pane container.
+                useEffect(() => {
+                    topLeftPaneContainer?.replaceChildren(...(topLeftSelectedPane ? [topLeftSelectedPane.container] : []));
+                }, [topLeftPaneContainer, topLeftSelectedPane]);
+                // Update the content of the bottom left pane container.
+                useEffect(() => {
+                    bottomLeftPaneContainer?.replaceChildren(...(bottomLeftSelectedPane ? [bottomLeftSelectedPane.container] : []));
+                }, [bottomLeftPaneContainer, bottomLeftSelectedPane]);
+                // Update the content of the top right pane container.
+                useEffect(() => {
+                    topRightPaneContainer?.replaceChildren(...(topRightSelectedPane ? [topRightSelectedPane.container] : []));
+                }, [topRightPaneContainer, topRightSelectedPane]);
+                // Update the content of the bottom right pane container.
+                useEffect(() => {
+                    bottomRightPaneContainer?.replaceChildren(...(bottomRightSelectedPane ? [bottomRightSelectedPane.container] : []));
+                }, [bottomRightPaneContainer, bottomRightSelectedPane]);
+                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, jsx("div", { className: classes.centralContent, children: centralContents.map((entry) => (jsx(entry.component, {}, entry.key))) }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) })), coercedSidePanes.map((sidePaneDefinition) => {
+                            return (jsx(Portal, { mountNode: sidePaneDefinition.container, children: jsx(sidePaneDefinition.content, {}) }, sidePaneDefinition.key));
+                        })] }));
             };
             rootComponent.displayName = "Shell Service Root";
             return {
@@ -1867,54 +2037,18 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                     if (!entry.component.displayName) {
                         entry.component.displayName = `${entry.key} | ${entry.verticalLocation} ${entry.horizontalLocation} bar item`;
                     }
-                    if (entry.verticalLocation === "top") {
-                        return topBarItemCollection.add(entry);
-                    }
-                    else {
-                        return bottomBarItemCollection.add(entry);
-                    }
+                    return toolbarItemCollection.add(entry);
                 },
                 addSidePane: (entry) => {
                     if (!entry.content.displayName) {
                         entry.content.displayName = `${entry.key} | ${entry.horizontalLocation} pane`;
                     }
-                    // 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 topLeftPaneCollection.add(entry);
-                        }
-                        else {
-                            return bottomLeftPaneCollection.add(entry);
-                        }
-                    }
-                    else {
-                        if (verticalLocation === "top") {
-                            return topRightPaneCollection.add(entry);
-                        }
-                        else {
-                            return bottomRightPaneCollection.add(entry);
-                        }
-                    }
+                    return sidePaneCollection.add(entry);
                 },
                 addCentralContent: (entry) => centralContentCollection.add(entry),
+                resetSidePaneLayout: () => localStorage.removeItem("Babylon/Settings/SidePaneDockOverrides"),
                 get sidePanes() {
-                    return [...topLeftPaneCollection.items, ...bottomLeftPaneCollection.items, ...topRightPaneCollection.items, ...bottomRightPaneCollection.items].map((sidePaneDefinition) => {
+                    return [...sidePaneCollection.items].map((sidePaneDefinition) => {
                         return {
                             key: sidePaneDefinition.key,
                             select: () => onSelectSidePane.notifyObservers(sidePaneDefinition.key),
@@ -2765,6 +2899,16 @@ const DebugServiceDefinition = {
     },
 };
 
+/**
+ * Wraps a button with a label in a line container
+ * @param props Button props plus a label
+ * @returns A button inside a line
+ */
+const ButtonLine = (props) => {
+    ButtonLine.displayName = "ButtonLine";
+    return (jsx(LineContainer, { children: jsx(Button, { ...props }) }));
+};
+
 const SettingsServiceIdentity = Symbol("SettingsService");
 const SettingsServiceDefinition = {
     friendlyName: "Settings",
@@ -2828,6 +2972,7 @@ const SettingsServiceDefinition = {
                 const sectionContent = useObservableCollection(sectionContentCollection);
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
                 const [compactMode, setCompactMode] = useCompactMode();
+                const [, , resetSidePaneLayout] = useSidePaneDockOverrides();
                 return (jsx(Fragment, { children: scene && (jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: scene, children: jsxs(AccordionSection, { title: "UI", children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
                                         setCompactMode(checked);
                                     } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: settings.useDegrees, onChange: (checked) => {
@@ -2836,7 +2981,7 @@ const SettingsServiceDefinition = {
                                         settings.ignoreBackfacesForPicking = checked;
                                     } }), jsx(SwitchPropertyLine, { label: "Show Properties on Selection", description: "Shows the Properties pane when an entity is selected.", value: settings.showPropertiesOnEntitySelection, onChange: (checked) => {
                                         settings.showPropertiesOnEntitySelection = checked;
-                                    } })] }) })) }));
+                                    } }), jsx(ButtonLine, { label: "Reset Layout", onClick: resetSidePaneLayout })] }) })) }));
             },
         });
         settings.dispose = () => registration.dispose();
@@ -2911,16 +3056,6 @@ const FrameStepsStats = ({ context: scene }) => {
     return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Absolute FPS", value: absoluteFPS }, "AbsoluteFPS"), jsx(StringifiedPropertyLine, { label: "Meshes Selection", value: meshesSelection, precision: 2, units: "ms" }, "MeshesSelection"), jsx(StringifiedPropertyLine, { label: "Render Targets", value: renderTargets, precision: 2, units: "ms" }, "RenderTargets"), jsx(StringifiedPropertyLine, { label: "Particles", value: particles, precision: 2, units: "ms" }, "Particles"), jsx(StringifiedPropertyLine, { label: "Sprites", value: sprites, precision: 2, units: "ms" }, "Sprites"), jsx(StringifiedPropertyLine, { label: "Animations", value: animations, precision: 2, units: "ms" }, "Animations"), jsx(StringifiedPropertyLine, { label: "Physics", value: physics, precision: 2, units: "ms" }, "Physics"), jsx(StringifiedPropertyLine, { label: "Inter-Frame Time", value: interFrameTime, precision: 2, units: "ms" }, "InterFrameTime"), jsx(StringifiedPropertyLine, { label: "GPU Frame Time", value: gpuFrameTime, precision: 2, units: "ms" }, "GPUFrameTime"), jsx(StringifiedPropertyLine, { label: "GPU Frame Time (Average)", value: gpuFrameTimeAverage, precision: 2, units: "ms" }, "GPUFrameTimeAverage")] }));
 };
 
-/**
- * Wraps a button with a label in a line container
- * @param props Button props plus a label
- * @returns A button inside a line
- */
-const ButtonLine = (props) => {
-    ButtonLine.displayName = "ButtonLine";
-    return (jsx(LineContainer, { children: jsx(Button, { ...props }) }));
-};
-
 const FileUploadLine = (props) => {
     FileUploadLine.displayName = "FileUploadLine";
     const inputRef = useRef(null);
@@ -3228,19 +3363,19 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         name: "Export Tools",
         description: "Adds new features to enable exporting Babylon assets such as .gltf, .glb, .babylon, and more.",
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
-        getExtensionModuleAsync: async () => await import('./exportService-DMqaQAx2.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-smbKfT4U.js'),
     },
     {
         name: "Capture Tools",
         description: "Adds new features to enable capturing screenshots, GIFs, videos, and more.",
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
-        getExtensionModuleAsync: async () => await import('./captureService-OpT4QhL3.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-ldJT1r7b.js'),
     },
     {
         name: "Import Tools",
         description: "Adds new features related to importing Babylon assets.",
         keywords: ["import", "tools"],
-        getExtensionModuleAsync: async () => await import('./importService-1dkQq3dn.js'),
+        getExtensionModuleAsync: async () => await import('./importService-Si8UwFwR.js'),
     },
 ]);
 
@@ -5610,7 +5745,7 @@ const NormalMapProperties = (props) => {
 };
 
 // TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
-const UpdateTexture = (file, material, textureSetter) => {
+const UpdateTexture$1 = (file, material, textureSetter) => {
     ReadFile(file, (data) => {
         const blob = new Blob([data], { type: "octet/stream" });
         const url = URL.createObjectURL(blob);
@@ -5624,19 +5759,19 @@ const PBRBaseMaterialClearCoatProperties = (props) => {
     const bumpTexture = useProperty(material.clearCoat, "bumpTexture");
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.clearCoat, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.clearCoat, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Roughness", target: material.clearCoat, propertyKey: "roughness", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "IOR", description: "Index of Refraction", target: material.clearCoat, propertyKey: "indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Remap F0", target: material.clearCoat, propertyKey: "remapF0OnInterfaceChange" }), jsx(FileUploadLine, { label: "Clear coat", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                             if (files.length > 0) {
-                                UpdateTexture(files[0], material, (texture) => (material.clearCoat.texture = texture));
+                                UpdateTexture$1(files[0], material, (texture) => (material.clearCoat.texture = texture));
                             }
                         } }), jsx(FileUploadLine, { label: "Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                             if (files.length > 0) {
-                                UpdateTexture(files[0], material, (texture) => (material.clearCoat.textureRoughness = texture));
+                                UpdateTexture$1(files[0], material, (texture) => (material.clearCoat.textureRoughness = texture));
                             }
                         } }), jsx(FileUploadLine, { label: "Bump", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                             if (files.length > 0) {
-                                UpdateTexture(files[0], material, (texture) => (material.clearCoat.bumpTexture = texture));
+                                UpdateTexture$1(files[0], material, (texture) => (material.clearCoat.bumpTexture = texture));
                             }
                         } }), jsx(Collapse, { visible: bumpTexture !== null, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bump Strength", target: bumpTexture, propertyKey: "level", min: 0, max: 2, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.clearCoat, propertyKey: "useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Tint", target: material.clearCoat, propertyKey: "isTintEnabled" }), jsxs(Collapse, { visible: isTintEnabled, children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Tint Color", target: material.clearCoat, propertyKey: "tintColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "At Distance", target: material.clearCoat, propertyKey: "tintColorAtDistance", min: 0, max: 20, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tint Thickness", target: material.clearCoat, propertyKey: "tintThickness", min: 0, max: 20, step: 0.1 }), jsx(FileUploadLine, { label: "Tint", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                                     if (files.length > 0) {
-                                        UpdateTexture(files[0], material, (texture) => (material.clearCoat.tintTexture = texture));
+                                        UpdateTexture$1(files[0], material, (texture) => (material.clearCoat.tintTexture = texture));
                                     }
                                 } })] })] })] }));
 };
@@ -5645,11 +5780,11 @@ const PBRBaseMaterialIridescenceProperties = (props) => {
     const isEnabled = useProperty(material.iridescence, "isEnabled");
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.iridescence, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.iridescence, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "IOR", description: "Index of Refraction", target: material.iridescence, propertyKey: "indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Minimum Thickness", target: material.iridescence, propertyKey: "minimumThickness", min: 0, max: 1000, step: 10 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Maxium Thickness", target: material.iridescence, propertyKey: "maximumThickness", min: 0, max: 1000, step: 10 }), jsx(FileUploadLine, { label: "Iridescence", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                             if (files.length > 0) {
-                                UpdateTexture(files[0], material, (texture) => (material.iridescence.texture = texture));
+                                UpdateTexture$1(files[0], material, (texture) => (material.iridescence.texture = texture));
                             }
                         } }), jsx(FileUploadLine, { label: "Thickness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                             if (files.length > 0) {
-                                UpdateTexture(files[0], material, (texture) => (material.iridescence.thicknessTexture = texture));
+                                UpdateTexture$1(files[0], material, (texture) => (material.iridescence.thicknessTexture = texture));
                             }
                         } })] })] }));
 };
@@ -5658,7 +5793,7 @@ const PBRBaseMaterialAnisotropicProperties = (props) => {
     const isEnabled = useProperty(material.anisotropy, "isEnabled");
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.anisotropy, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Legacy Mode", target: material.anisotropy, propertyKey: "legacy" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.anisotropy, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Vector2PropertyLine, label: "Direction", target: material.anisotropy, propertyKey: "direction" }), jsx(FileUploadLine, { label: "Anisotropic", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                             if (files.length > 0) {
-                                UpdateTexture(files[0], material, (texture) => (material.anisotropy.texture = texture));
+                                UpdateTexture$1(files[0], material, (texture) => (material.anisotropy.texture = texture));
                             }
                         } })] })] }));
 };
@@ -5668,11 +5803,11 @@ const PBRBaseMaterialSheenProperties = (props) => {
     const useRoughness = useProperty(material.sheen, "_useRoughness");
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.sheen, propertyKey: "isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Link to Albedo", target: material.sheen, propertyKey: "linkSheenWithAlbedo" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.sheen, propertyKey: "intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Color", target: material.sheen, propertyKey: "color", isLinearMode: true }), jsx(FileUploadLine, { label: "Sheen", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                             if (files.length > 0) {
-                                UpdateTexture(files[0], material, (texture) => (material.sheen.texture = texture));
+                                UpdateTexture$1(files[0], material, (texture) => (material.sheen.texture = texture));
                             }
                         } }), jsx(FileUploadLine, { label: "Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                             if (files.length > 0) {
-                                UpdateTexture(files[0], material, (texture) => (material.sheen.textureRoughness = texture));
+                                UpdateTexture$1(files[0], material, (texture) => (material.sheen.textureRoughness = texture));
                             }
                         } }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness", target: material.sheen, propertyKey: "_useRoughness" }), jsx(Collapse, { visible: useRoughness, children: jsx(BoundProperty, { nullable: true, component: SyncedSliderPropertyLine, label: "Roughness", target: material.sheen, propertyKey: "roughness", defaultValue: 0, min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.sheen, propertyKey: "useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Albedo Scaling", target: material.sheen, propertyKey: "albedoScaling" })] })] }));
 };
@@ -5687,6 +5822,174 @@ const PBRMaterialLightingAndColorProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Albedo", target: material, propertyKey: "albedoColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectivity", target: material, propertyKey: "reflectivityColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Micro-Surface", target: material, propertyKey: "microSurface", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Emissive", target: material, propertyKey: "emissiveColor", isLinearMode: true }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Ambient", target: material, propertyKey: "ambientColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Physical Light Falloff", target: material, propertyKey: "usePhysicalLightFalloff" })] }));
 };
 
+// TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
+const UpdateTexture = (file, material, textureSetter) => {
+    ReadFile(file, (data) => {
+        const blob = new Blob([data], { type: "octet/stream" });
+        const url = URL.createObjectURL(blob);
+        textureSetter(new Texture(url, material.getScene(), false, false));
+    }, undefined, true);
+};
+/**
+ * Displays the base layer properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the base layer properties.
+ */
+const OpenPBRMaterialBaseProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.baseWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Base Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.baseColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Metalness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.baseMetalnessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Diffuse Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.baseDiffuseRoughnessTexture = texture));
+                    }
+                } })] }));
+};
+/**
+ * Displays the specular layer properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the specular layer properties.
+ */
+const OpenPBRMaterialSpecularProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.specularWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Specular Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.specularColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.specularRoughnessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness Anisotropy", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.specularRoughnessAnisotropyTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01 })] }));
+};
+/**
+ * Displays the coat layer properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the coat layer properties.
+ */
+const OpenPBRMaterialCoatProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Coat Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness Anisotropy", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessAnisotropyTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Darkening", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.coatDarkeningTexture = texture));
+                    }
+                } })] }));
+};
+/**
+ * Displays the fuzz layer properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the fuzz layer properties.
+ */
+const OpenPBRMaterialFuzzProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.fuzzWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Fuzz Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.fuzzColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Roughness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.fuzzRoughnessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Number of Samples", target: material, propertyKey: "fuzzSampleNumber", min: 4, max: 64, step: 1 })] }));
+};
+/**
+ * Displays the emission properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the emission properties.
+ */
+const OpenPBRMaterialEmissionProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Emission Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.emissionColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01 })] }));
+};
+/**
+ * Displays the thin film properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the thin film properties.
+ */
+const OpenPBRMaterialThinFilmProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.thinFilmWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Thickness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.thinFilmThicknessTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01 })] }));
+};
+/**
+ * Displays the geometry properties of an OpenPBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the geometry properties.
+ */
+const OpenPBRMaterialGeometryProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Opacity", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryOpacityTexture = texture));
+                    }
+                } }), jsx(FileUploadLine, { label: "Geometry Normal", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryNormalTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Tangent", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryTangentTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Coat Normal", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatNormalTexture = texture));
+                    }
+                } }), jsx(FileUploadLine, { label: "Geometry Coat Tangent", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
+                    }
+                } })] }));
+};
+
 const SkyMaterialProperties = (props) => {
     const { material, settings } = props;
     const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
@@ -5809,6 +6112,40 @@ const MaterialPropertiesServiceDefinition = {
                 },
             ],
         });
+        const openPBRMaterialPropertiesRegistration = propertiesService.addSectionContent({
+            key: "OpenPBR Material Properties",
+            predicate: (entity) => entity instanceof OpenPBRMaterial,
+            content: [
+                {
+                    section: "Base",
+                    component: ({ context }) => jsx(OpenPBRMaterialBaseProperties, { material: context }),
+                },
+                {
+                    section: "Specular",
+                    component: ({ context }) => jsx(OpenPBRMaterialSpecularProperties, { material: context }),
+                },
+                {
+                    section: "Coat",
+                    component: ({ context }) => jsx(OpenPBRMaterialCoatProperties, { material: context }),
+                },
+                {
+                    section: "Fuzz",
+                    component: ({ context }) => jsx(OpenPBRMaterialFuzzProperties, { material: context }),
+                },
+                {
+                    section: "Emission",
+                    component: ({ context }) => jsx(OpenPBRMaterialEmissionProperties, { material: context }),
+                },
+                {
+                    section: "Thin Film",
+                    component: ({ context }) => jsx(OpenPBRMaterialThinFilmProperties, { material: context }),
+                },
+                {
+                    section: "Geometry",
+                    component: ({ context }) => jsx(OpenPBRMaterialGeometryProperties, { material: context }),
+                },
+            ],
+        });
         const skyMaterialRegistration = propertiesService.addSectionContent({
             key: "Sky Material Properties",
             predicate: (entity) => entity instanceof SkyMaterial,
@@ -5836,6 +6173,7 @@ const MaterialPropertiesServiceDefinition = {
                 pbrBaseMaterialPropertiesRegistration.dispose();
                 pbrMaterialPropertiesRegistration.dispose();
                 pbrMaterialNormalMapsContentRegistration.dispose();
+                openPBRMaterialPropertiesRegistration.dispose();
                 skyMaterialRegistration.dispose();
                 multiMaterialContentRegistration.dispose();
             },
@@ -9010,7 +9348,24 @@ function _ShowInspector(scene, options) {
         showThemeSelector: options.showThemeSelector,
         extensionFeeds: [DefaultInspectorExtensionFeed, ...(options.extensionFeeds ?? [])],
         toolbarMode: "compact",
-        sidePaneMode: options.embedMode ? "right" : "both",
+        sidePaneRemapper: options.embedMode
+            ? (sidePane) => {
+                if (sidePane.horizontalLocation === "right") {
+                    // All right panes go to right bottom.
+                    return {
+                        horizontalLocation: "right",
+                        verticalLocation: "bottom",
+                    };
+                }
+                else {
+                    // All left panes go to right top.
+                    return {
+                        horizontalLocation: "right",
+                        verticalLocation: "top",
+                    };
+                }
+            }
+            : undefined,
     });
     disposeActions.push(() => modularTool.dispose());
     let disposed = false;
@@ -9302,5 +9657,5 @@ const TextAreaPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Textarea, { ...props }) }));
 };
 
-export { Accordion, AccordionSection, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, Checkbox, CheckboxPropertyLine, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, DebugServiceIdentity, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, HideInspector, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsInspectorVisible, IsPropertyReadonly, LineContainer, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SidePaneContainer, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useCompactMode, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useVector3Property };
+export { Accordion, AccordionSection, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, Checkbox, CheckboxPropertyLine, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, DebugServiceIdentity, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, HideInspector, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsInspectorVisible, IsPropertyReadonly, LineContainer, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SidePaneContainer, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useCompactMode, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useSidePaneDockOverrides, useVector3Property };
 //# sourceMappingURL=index.js.map