@babylonjs/inspector 8.33.2-preview → 8.33.3-preview

package/lib/index.d.ts

@@ -5,7 +5,6 @@ import { IDisposable as IDisposable$1, Nullable as Nullable$1, IReadonlyObservab
 import { IReadonlyObservable as IReadonlyObservable$1 } from '@babylonjs/core/Misc/observable.js';
 import { Nullable as Nullable$2 } from '@babylonjs/core/types.js';
 import { PositioningImperativeRef, OnOpenChangeData, SpinnerProps } from '@fluentui/react-components';
-export { Link } from '@fluentui/react-components';
 import { Color3 as Color3$1, Color4 as Color4$1 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3 as Vector3$1, Quaternion as Quaternion$1 } from '@babylonjs/core/Maths/math.vector.js';
 import { IDisposable as IDisposable$2, Scene as Scene$2 } from '@babylonjs/core/scene.js';
@@ -76,6 +75,10 @@ type BasePrimitiveProps = {
      * Optional class name to apply custom styles to the component.
      */
     className?: string;
+    /**
+     * Optional style object to apply custom inline styles to the top-level HTML element.
+     */
+    style?: React.CSSProperties;
     /**
      * Optional title for the component, used for tooltips or accessibility.
      */
@@ -21357,6 +21360,10 @@ declare class ParticleSystem extends ThinParticleSystem {
      * The current active Sub-systems, this property is used by the root particle system only.
      */
     activeSubSystems: Array<ParticleSystem>;
+    /**
+     * Specifies if the particle system should be serialized
+     */
+    doNotSerialize: boolean;
     /**
      * Creates a Point Emitter for the particle system (emits directly from the emitter position)
      * @param direction1 Particles are emitted between the direction1 and direction2 from within the box
@@ -22058,6 +22065,10 @@ interface IParticleSystem {
      * Returns true if the particle system was generated by a node particle system set
      */
     isNodeGenerated: boolean;
+    /**
+     * Specifies if the particle system should be serialized
+     */
+    doNotSerialize?: boolean;
     /**
      * Gets the maximum number of particles active at the same time.
      * @returns The max number of active particles.
@@ -48137,6 +48148,19 @@ declare class KeyboardInfoPre extends KeyboardInfo {
     event: IKeyboardEvent);
 }
 
+/**
+ * Description of a custom block to be used in the node render graph editor
+ */
+interface INodeRenderGraphCustomBlockDescription {
+    /** Block name. It will be used as the block name in the left menu of the editor. Spaces must be replaced by underscores in the name. */
+    name: string;
+    /** Description (tooltip) of the block. */
+    description: string;
+    /** Category of the block. Spaces must be replaced by underscores in the category name. */
+    menu: string;
+    /** Factory function to create the block. */
+    factory: (frameGraph: FrameGraph, scene: Scene) => NodeRenderGraphBlock;
+}
 /**
  * Interface used to configure the node render graph editor
  */
@@ -48147,6 +48171,7 @@ interface INodeRenderGraphEditorOptions {
     nodeRenderGraphEditorConfig?: {
         backgroundColor?: Color4;
         hostScene?: Scene;
+        customBlockDescriptions?: INodeRenderGraphCustomBlockDescription[];
     };
 }
 /**
@@ -49365,6 +49390,8 @@ declare class NodeRenderGraph {
     static EditorURL: string;
     /** Define the Url to load snippets */
     static SnippetUrl: string;
+    /** Description of custom blocks to use in the node render graph editor */
+    static CustomBlockDescriptions: INodeRenderGraphCustomBlockDescription[];
     private BJSNODERENDERGRAPHEDITOR;
     /** @returns the inspector from bundle or global */
     private _getGlobalNodeRenderGraphEditor;
@@ -71410,6 +71437,22 @@ type LazyComponentProps = {
  */
 declare function MakeLazyComponent<ComponentT extends ComponentType<any>>(getComponentAsync: () => Promise<ComponentT>, defaultProps?: LazyComponentProps): react.ForwardRefExoticComponent<react.PropsWithoutRef<ComponentProps<ComponentT> & LazyComponentProps> & react.RefAttributes<ElementRef<ComponentT | _fluentui_react_utilities.ForwardRefComponent<SpinnerProps>>>>;
 
+type LinkProps = ImmutablePrimitiveProps<string> & {
+    /**
+     * Used if you want to handle the link click yourself
+     */
+    onLink?: () => void;
+    /**
+     * The URL the link points to
+     */
+    url?: string;
+    /**
+     * Defines whether to open the link in current tab or new tab. Default is new
+     */
+    target?: "current" | "new";
+};
+declare const Link: FunctionComponent<PropsWithChildren<LinkProps>>;
+
 /**
  * Represents an item in a list
  */
@@ -71627,10 +71670,6 @@ declare const NumberInputPropertyLine: FunctionComponent<NumberInputPropertyLine
  */
 declare const HexPropertyLine: FunctionComponent<NumberInputPropertyLineProps>;
 
-type LinkProps = ImmutablePrimitiveProps<string> & {
-    onLink?: () => void;
-    url?: string;
-};
 /**
  * Wraps a link in a property line
  * @param props - PropertyLineProps and LinkProps
@@ -71730,5 +71769,5 @@ declare const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vec
 declare const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3>>;
 declare const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4>>;
 
-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 };
-export type { AcceptedDropdownValue, AccordionSectionProps, BasePrimitiveProps, BoundPropertyProps, BuiltInExtension, ButtonProps, CentralContentDefinition, ColorPickerProps, ColorPropertyLineProps, ComboBoxProps, DraggableLineProps, DropdownOption, DropdownProps, DynamicAccordionSection, DynamicAccordionSectionContent, EntityBase, EntityDisplayInfo, ExtensionMetadata, ExtensionModule, FunctionHooks, IDebugService, IExtensionFeed, IExtensionMetadataQuery, IPropertiesService, ISceneContext, ISceneExplorerService, ISelectionService, IService, ISettingsContext, ISettingsService, IShellService, IStatsService, IToolsService, ImmutablePrimitiveProps, InfoLabelParentProps, InfoLabelProps, InputHexProps, ListItem, NumberInputPropertyLineProps, PaneProps, PrimitiveProps, PropertyHooks, PropertyLineProps, SceneExplorerCommand, SceneExplorerCommandProvider, SceneExplorerSection, ServiceDefinition, ServiceFactory, SidePaneDefinition, SpinButtonProps, SwitchProps, SyncedSliderProps, TensorPropertyLineProps, TextInputProps, TextareaProps, ToolbarItemDefinition };
+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, Link, 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 };
+export type { AcceptedDropdownValue, AccordionSectionProps, BasePrimitiveProps, BoundPropertyProps, BuiltInExtension, ButtonProps, CentralContentDefinition, ColorPickerProps, ColorPropertyLineProps, ComboBoxProps, DraggableLineProps, DropdownOption, DropdownProps, DynamicAccordionSection, DynamicAccordionSectionContent, EntityBase, EntityDisplayInfo, ExtensionMetadata, ExtensionModule, FunctionHooks, IDebugService, IExtensionFeed, IExtensionMetadataQuery, IPropertiesService, ISceneContext, ISceneExplorerService, ISelectionService, IService, ISettingsContext, ISettingsService, IShellService, IStatsService, IToolsService, ImmutablePrimitiveProps, InfoLabelParentProps, InfoLabelProps, InputHexProps, LinkProps, ListItem, NumberInputPropertyLineProps, PaneProps, PrimitiveProps, PropertyHooks, PropertyLineProps, SceneExplorerCommand, SceneExplorerCommandProvider, SceneExplorerSection, ServiceDefinition, ServiceFactory, SidePaneDefinition, SpinButtonProps, SwitchProps, SyncedSliderProps, TensorPropertyLineProps, TextInputProps, TextareaProps, ToolbarItemDefinition };

package/lib/index.js

@@ -3,10 +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, 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, 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 { makeStyles, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, Portal, RendererProvider, ToolbarRadioButton, createDOMRenderer, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, treeItemLevelToken, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, TabList, Tab, DialogContent, 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 { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, 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, Fade } 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';
@@ -638,6 +637,11 @@ function copyCommandToClipboard(strCommand) {
 
 const ToolContext = createContext({ useFluent: false, disableCopy: false, toolName: "", size: undefined });
 
+const Link = (props) => {
+    const { target, url, onLink, ...rest } = props;
+    return (jsxs(Link$1, { inline: true, target: target === "current" ? "_self" : "_blank", rel: "noopener noreferrer", href: url, onClick: onLink ?? undefined, ...rest, children: [props.children, jsx(Body1, { children: props.value })] }));
+};
+
 /**
  * Toggles between two states using a button with icons.
  * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change
@@ -793,7 +797,7 @@ const PropertyLine = forwardRef((props, ref) => {
     const { label, onCopy, expandedContent, children, nullable, ignoreNullable } = props;
     const [expanded, setExpanded] = useState("expandByDefault" in props ? props.expandByDefault : false);
     const cachedVal = useRef(nullable ? props.value : null);
-    const description = props.docLink ? jsx(Link, { href: props.docLink, children: props.description ?? "Docs" }) : props.description;
+    const description = props.docLink ? jsx(Link, { url: props.docLink, value: props.description ?? "Docs" }) : props.description;
     // Process children to handle nullable state -- creating component in disabled state with default value in lieu of null value
     const processedChildren = (nullable || ignoreNullable) && isValidElement(children)
         ? cloneElement(children, {
@@ -848,7 +852,7 @@ const PlaceholderPropertyLine = (props) => {
  */
 const LinkPropertyLine = (props) => {
     LinkPropertyLine.displayName = "LinkPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(Link, { inline: true, onClick: () => props.onLink?.(), href: props.url, title: props.title, children: jsx(Body1, { children: props.value }) }) }));
+    return (jsx(PropertyLine, { ...props, children: jsx(Link, { ...props }) }));
 };
 
 /**
@@ -1604,11 +1608,15 @@ const useStyles$d = makeStyles({
         flexDirection: "row",
     },
     paneCollapseButton: {
-        margin: `0 ${tokens.spacingHorizontalSNudge}`,
+        margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
+    },
+    collapseMenuPopover: {
+        minWidth: 0,
     },
     pane: {
         backgroundColor: tokens.colorNeutralBackground2,
         display: "flex",
+        flex: 1,
         alignItems: "stretch",
         overflow: "hidden",
     },
@@ -1630,6 +1638,9 @@ const useStyles$d = makeStyles({
         flexDirection: "column",
         overflow: "hidden",
     },
+    unselectedPane: {
+        display: "none",
+    },
     paneHeaderDiv: {
         display: "flex",
         flexDirection: "row",
@@ -1690,6 +1701,16 @@ const useStyles$d = makeStyles({
         display: "flex",
         overflow: "hidden",
     },
+    expandButtonContainer: {
+        position: "absolute",
+    },
+    expandButtonContainerLeft: {
+        left: 0,
+    },
+    expandButtonContainerRight: {
+        right: 0,
+    },
+    expandButton: {},
 });
 const DockMenu = (props) => {
     const { openOnContext, sidePaneId, dockOptions, children } = props;
@@ -1738,14 +1759,15 @@ const SidePaneTab = (props) => {
 // This hook provides a side pane container and the tab list.
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
-function usePane(location, defaultWidth, minWidth, sidePanes, topPaneContainerRef, bottomPaneContainerRef, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
+function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
     const classes = useStyles$d();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
+    const [undocked, setUndocked] = useState(false);
     const onExpandCollapseClick = useCallback(() => {
         setCollapsed((collapsed) => !collapsed);
-    }, [collapsed]);
+    }, []);
     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]);
@@ -1799,14 +1821,10 @@ function usePane(location, defaultWidth, minWidth, sidePanes, topPaneContainerRe
         });
         return () => observer.remove();
     }, [topPanes, bottomPanes, onSelectSidePane]);
-    const expandCollapseIcon = useMemo(() => {
-        if (location === "left") {
-            return collapsed ? jsx(PanelLeftExpandRegular, {}) : jsx(PanelLeftContractRegular, {});
-        }
-        else {
-            return collapsed ? jsx(PanelRightExpandRegular, {}) : jsx(PanelRightContractRegular, {});
-        }
-    }, [collapsed, location]);
+    const expandCollapseButton = useMemo(() => {
+        const expandCollapseIcon = location === "left" ? collapsed ? jsx(PanelLeftExpandRegular, {}) : jsx(PanelLeftContractRegular, {}) : collapsed ? jsx(PanelRightExpandRegular, {}) : jsx(PanelRightContractRegular, {});
+        return (jsxs(Menu, { positioning: "below-end", children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", relationship: "label", children: jsx(SplitButton, { className: classes.paneCollapseButton, menuButton: triggerProps, primaryActionButton: { onClick: onExpandCollapseClick }, size: "small", appearance: "transparent", icon: expandCollapseIcon }) })) }), jsx(MenuPopover, { className: classes.collapseMenuPopover, children: jsx(MenuList, { children: jsx(MenuItem, { icon: jsx(PictureInPictureEnterRegular, {}), onClick: () => setUndocked(true), children: "Undock" }) }) })] }));
+    }, [collapsed, onExpandCollapseClick, 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]);
@@ -1815,8 +1833,8 @@ function usePane(location, defaultWidth, minWidth, sidePanes, topPaneContainerRe
                             }, children: paneComponents.map((entry) => {
                                 const isSelected = selectedTab?.key === 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 }) })] }))] })) }));
-    }, [location, collapsed]);
+                            }) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [paneComponents.length > 1 && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true, style: { minHeight: 0 } }), " "] })), jsx(Collapse, { visible: !undocked, orientation: "horizontal", children: expandCollapseButton })] }))] })) }));
+    }, [location, collapsed, undocked, expandCollapseButton]);
     // 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, validTopDockOptions), [createPaneTabList, topPanes, toolbarMode, topSelectedTab]);
     const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPanes, "compact", bottomSelectedTab, setBottomSelectedTab, validBottomDockOptions), [createPaneTabList, bottomPanes, bottomSelectedTab]);
@@ -1852,9 +1870,78 @@ function usePane(location, defaultWidth, minWidth, sidePanes, topPaneContainerRe
             setPaneHeightAdjust(Number.parseInt(storedPaneHeightAdjust));
         }
     }, []);
+    const paneContainerRef = useRef(null);
+    const [windowState, setWindowState] = useState();
+    useEffect(() => {
+        const disposeActions = [];
+        if (undocked) {
+            const paneContainer = paneContainerRef.current;
+            if (!paneContainer) {
+                // It shouldn't be possible to get here and have this ref be null, but just in case,
+                // bail out of the undock operation.
+                setUndocked(false);
+            }
+            else {
+                // This is the extra buffer needed on top of minWidth to account for window chrome to avoid a horizontal scrollbar.
+                const widthBuffer = 4;
+                // This offsets the window's top position to account for window chrome/title bar.
+                const topOffset = 100;
+                // Create the child window with approximately the same location and size as the side pane.
+                const bounds = paneContainer.getBoundingClientRect();
+                const top = bounds.top + window.screenY + topOffset;
+                const left = bounds.left + window.screenX;
+                const width = Math.max(bounds.width, minWidth + widthBuffer);
+                const height = bounds.height - topOffset;
+                const childWindow = window.open("", "", `width=${width},height=${height},left=${left},top=${top},location=no`);
+                if (childWindow) {
+                    const body = childWindow.document.body;
+                    body.style.width = "100%";
+                    body.style.height = "100%";
+                    body.style.margin = "0";
+                    body.style.padding = "0";
+                    body.style.display = "flex";
+                    body.style.overflowY = "hidden";
+                    body.style.overflowX = "auto";
+                    childWindow.document.title = location === "left" ? "Left" : "Right";
+                    const applyWindowState = () => {
+                        // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
+                        setWindowState({ window: childWindow, mountNode: body, renderer: createDOMRenderer(childWindow.document) });
+                    };
+                    // Once the child window document is ready, setup the window state which will trigger another effect that renders into the child window.
+                    if (childWindow.document.readyState === "complete") {
+                        applyWindowState();
+                    }
+                    else {
+                        const onChildWindowLoad = () => {
+                            applyWindowState();
+                        };
+                        childWindow.addEventListener("load", onChildWindowLoad, { once: true });
+                        disposeActions.push(() => childWindow.removeEventListener("load", onChildWindowLoad));
+                    }
+                    // When the child window is closed for any reason, transition back to a docked state.
+                    childWindow.addEventListener("unload", () => {
+                        setWindowState(undefined);
+                        setUndocked(false);
+                    }, { once: true });
+                    // If the main window closes, close any undocked child windows as well (don't leave them orphaned).
+                    const onParentWindowUnload = () => childWindow.close();
+                    window.addEventListener("unload", onParentWindowUnload);
+                    disposeActions.push(() => window.removeEventListener("unload", onParentWindowUnload));
+                }
+                disposeActions.push(() => childWindow?.close());
+            }
+        }
+        return () => disposeActions.reverse().forEach((dispose) => dispose());
+    }, [undocked]);
+    // This effect closes the window if all panes have been removed.
+    useEffect(() => {
+        if (windowState && topPanes.length === 0 && bottomPanes.length === 0) {
+            windowState.window.close();
+        }
+    }, [windowState, topPanes, bottomPanes]);
     // 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} ${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"}` } })] })) }));
+    const corePane = useMemo(() => {
+        return (jsxs(Fragment, { children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [!undocked && location === "left" && expandCollapseButton, topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), !undocked && location === "right" && expandCollapseButton] }) })), topPanes.length > 0 && (jsx("div", { className: classes.paneContent, children: topSelectedTab && (jsxs(Fragment, { children: [jsx(PaneHeader, { id: topSelectedTab.key, title: topSelectedTab.title, dockOptions: validTopDockOptions }), topPanes.map((pane) => (jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== topSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(pane.content, {}) }, pane.key)))] })) })), 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 }), bottomPanes.map((pane) => (jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== bottomSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(pane.content, {}) }, pane.key)))] })) })), toolbarMode === "compact" && bottomBarItems.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }));
     }, [
         topPanes,
         topSelectedTab,
@@ -1866,9 +1953,23 @@ function usePane(location, defaultWidth, minWidth, sidePanes, topPaneContainerRe
         bottomBarItems,
         topPaneTabList,
         bottomPaneTabList,
-        collapsed,
+        undocked,
     ]);
-    return [topPaneTabList, pane, topSelectedTab, bottomSelectedTab];
+    // This deals with docked vs undocked state, where undocked is rendered into a separate window via a portal.
+    const pane = useMemo(() => {
+        if (!windowState) {
+            // If there is no window state, then we are docked, so render the resizable div and the collapse container.
+            return (jsx("div", { ref: paneContainerRef, className: classes.paneContainer, children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) }));
+        }
+        else {
+            // Otherwise we are undocked, so render into the portal that targets the body of the child window.
+            const { mountNode, renderer } = windowState;
+            return (
+            // Portal targets the body of the child window.
+            jsx(Portal, { mountNode: mountNode, children: jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: jsx(Theme, { className: classes.paneContent, style: { minWidth }, targetDocument: mountNode.ownerDocument, children: corePane }) }) }));
+        }
+    }, [collapsed, corePane, windowState]);
+    return [topPaneTabList, pane, collapsed, setCollapsed];
 }
 function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, } = {}) {
     return {
@@ -1898,37 +1999,29 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 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);
+                        let coercedSidePane = coercedSidePaneCache.current.get(sidePaneDefinition.key);
+                        if (!coercedSidePane) {
+                            coercedSidePane = { ...sidePaneDefinition };
+                            coercedSidePaneCache.current.set(sidePaneDefinition.key, coercedSidePane);
                         }
                         const override = sidePaneDockOverrides[sidePaneDefinition.key];
                         if (override) {
                             // Override (user manually re-docked) has the highest priority.
-                            sidePaneEntry.horizontalLocation = override.horizontalLocation;
-                            sidePaneEntry.verticalLocation = override.verticalLocation;
+                            coercedSidePane.horizontalLocation = override.horizontalLocation;
+                            coercedSidePane.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;
+                            coercedSidePane.horizontalLocation = horizontalLocation;
+                            coercedSidePane.verticalLocation = verticalLocation;
                         }
                         else {
                             // Otherwise use the default defined location.
-                            sidePaneEntry.horizontalLocation = sidePaneDefinition.horizontalLocation;
-                            sidePaneEntry.verticalLocation = sidePaneDefinition.verticalLocation;
+                            coercedSidePane.horizontalLocation = sidePaneDefinition.horizontalLocation;
+                            coercedSidePane.verticalLocation = sidePaneDefinition.verticalLocation;
                         }
-                        return sidePaneEntry;
+                        return coercedSidePane;
                     });
                     // 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"]) {
@@ -2005,31 +2098,9 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 const bottomBarLeftItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const bottomBarRightItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
                 const centralContents = useOrderedObservableCollection(centralContentCollection);
-                const [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));
-                        })] }));
+                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems);
+                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, 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: topToolBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsxs("div", { className: classes.centralContent, children: [centralContents.map((entry) => (jsx(entry.component, {}, entry.key))), toolbarMode === "compact" && (jsxs(Fragment, { children: [jsx(Fade, { visible: leftPaneCollapsed, delay: 50, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerLeft), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelLeftExpandRegular, {}), onClick: () => setLeftPaneCollapsed(false) }) }) }) }), jsx(Fade, { visible: rightPaneCollapsed, delay: 50, children: jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerRight), children: jsx(Tooltip, { content: "Show Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.expandButton, icon: jsx(PanelRightExpandRegular, {}), onClick: () => setRightPaneCollapsed(false) }) }) }) })] }))] }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) }))] }));
             };
             rootComponent.displayName = "Shell Service Root";
             return {
@@ -2594,26 +2665,37 @@ const SceneExplorer = (props) => {
         for (let treeItem = allTreeItems.get(entity.uniqueId); treeItem; treeItem = treeItem?.type === "entity" ? treeItem.parent : undefined) {
             parentStack.push(treeItem.type === "entity" ? treeItem.entity.uniqueId : treeItem.sectionName);
         }
+        // The first item will be the entity itself, so just remove it.
+        parentStack.shift();
         return parentStack;
     }, [allTreeItems]);
-    const [isScrollToPending, setIsScrollToPending] = useState(false);
-    useEffect(() => {
-        if (selectedEntity && selectedEntity !== previousSelectedEntity.current) {
-            const entity = selectedEntity;
-            if (entity.uniqueId != undefined) {
-                const parentStack = getParentStack(entity);
-                if (parentStack.length > 0) {
-                    const newOpenItems = new Set(openItems);
-                    for (const parent of parentStack) {
-                        newOpenItems.add(parent);
-                    }
-                    setOpenItems(newOpenItems);
-                    setIsScrollToPending(true);
+    const selectEntity = useCallback((selectedEntity) => {
+        const entity = selectedEntity;
+        if (entity && entity.uniqueId != undefined) {
+            const parentStack = getParentStack(entity);
+            if (parentStack.length > 0) {
+                const newOpenItems = new Set(openItems);
+                for (const parent of parentStack) {
+                    newOpenItems.add(parent);
                 }
+                setOpenItems(newOpenItems);
+                setIsScrollToPending(true);
             }
         }
         previousSelectedEntity.current = selectedEntity;
-    }, [selectedEntity]);
+    }, [getParentStack, openItems]);
+    const [isScrollToPending, setIsScrollToPending] = useState(false);
+    useEffect(() => {
+        if (selectedEntity && selectedEntity !== previousSelectedEntity.current) {
+            selectEntity(selectedEntity);
+        }
+    }, [selectedEntity, selectEntity]);
+    useEffect(() => {
+        // If there are no open items, then it should mean scene explorer has only just mounted, so we should select the already selected entity.
+        if (openItems.size === 0) {
+            selectEntity(selectedEntity);
+        }
+    }, [openItems, selectEntity, selectedEntity]);
     // We need to wait for a render to complete before we can scroll to the item, hence the isScrollToPending.
     useEffect(() => {
         if (isScrollToPending) {
@@ -3916,7 +3998,7 @@ const ExtensionListServiceDefinition = {
 
 const useStyles$9 = makeStyles({
     themeButton: {
-        margin: `${tokens.spacingVerticalXXS} 0`,
+        margin: 0,
     },
     themeMenuPopover: {
         minWidth: 0,
@@ -4192,7 +4274,7 @@ const MaterialIcon = createFluentIcon("Material", "16", '<path d="M14.74,6.3c-.0
 
 const useStyles$7 = makeStyles({
     coordinatesModeButton: {
-        margin: `0 ${tokens.spacingVerticalXS}`,
+        margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
     coordinatesModeMenu: {
         minWidth: 0,
@@ -4617,7 +4699,7 @@ const MessageBar = (props) => {
     MessageBar.displayName = "MessageBar";
     const { message, title: header, intent, docLink } = props;
     const classes = useClasses();
-    return (jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [jsx(MessageBarTitle, { children: header }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { href: docLink, target: "_blank", rel: "noopener noreferrer", children: "Learn More" })] }))] }) }) }));
+    return (jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [jsx(MessageBarTitle, { children: header }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }));
 };
 
 const AnimationsProperties = (props) => {
@@ -4917,7 +4999,7 @@ const InputHexField = (props) => {
                 info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled
                 jsx(Fragment, { children: " This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view " })) : (
                 // If representing a linear hex and we are in linearMode, give information about how to use these hex values
-                jsxs(Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), jsx("br", {}), "or", jsx("br", {}), jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), jsx("br", {}), jsx("br", {}), jsx(Link, { href: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", children: " Read more in our docs! " })] })),
+                jsxs(Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), jsx("br", {}), "or", jsx("br", {}), jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), jsx("br", {}), jsx("br", {}), jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
             }
             : undefined }));
 };
@@ -9659,5 +9741,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, useSidePaneDockOverrides, 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, Link, 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