@babylonjs/inspector 8.53.0 → 8.53.1

package/lib/{index-Ddfh2kw4.js → index-xzWdtYzo.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, cloneElement, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, mergeClasses, Body1Strong, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
+import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
 import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
@@ -37,7 +37,7 @@ import { PerformanceViewerCollector } from '@babylonjs/core/Misc/PerformanceView
 import { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine.js';
 import { Bone } from '@babylonjs/core/Bones/bone.js';
 import { Camera } from '@babylonjs/core/Cameras/camera.js';
-import { FrameGraphUtils, FindMainCamera, FindMainObjectRenderer } from '@babylonjs/core/FrameGraph/frameGraphUtils.js';
+import { FrameGraphUtils, FindMainObjectRenderer, FindMainCamera } from '@babylonjs/core/FrameGraph/frameGraphUtils.js';
 import { CameraGizmo } from '@babylonjs/core/Gizmos/cameraGizmo.js';
 import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager.js';
 import { LightGizmo } from '@babylonjs/core/Gizmos/lightGizmo.js';
@@ -79,7 +79,7 @@ import { Engine } from '@babylonjs/core/Engines/engine.js';
 import { ParticleSystem } from '@babylonjs/core/Particles/particleSystem.js';
 import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
 import { NodeMaterialBlockConnectionPointTypes } from '@babylonjs/core/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes.js';
-import { FactorGradient, Color3Gradient, ColorGradient } from '@babylonjs/core/Misc/gradients.js';
+import { Color3Gradient, ColorGradient, FactorGradient } from '@babylonjs/core/Misc/gradients.js';
 import { ReadFile } from '@babylonjs/core/Misc/fileTools.js';
 import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
 import { Mesh } from '@babylonjs/core/Meshes/mesh.js';
@@ -276,7 +276,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$U = makeStyles({
+const useStyles$V = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -357,11 +357,18 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$U();
+    const styles = useStyles$V();
     return (jsxs("div", { className: styles.root, children: [jsx(ErrorCircleRegular, { className: styles.icon }), jsx("div", { className: styles.title, children: "Something went wrong" }), jsx("div", { className: styles.message, children: "An error occurred in this component. You can try again or continue using other parts of the tool." }), jsx(Button, { label: "Try Again", appearance: "primary", onClick: onRetry }), error && jsx("div", { className: styles.details, children: error.message })] }));
 }
 
+/**
+ * React context for accessing the property change observable.
+ */
 const PropertyContext = createContext(undefined);
+/**
+ * Hook that returns a callback to notify the property context when a property has been changed.
+ * @returns A function that accepts (entity, propertyKey, oldValue, newValue) and notifies observers.
+ */
 function usePropertyChangedNotifier() {
     const propertyContext = useContext(PropertyContext);
     return useCallback((entity, propertyKey, oldValue, newValue) => {
@@ -1354,7 +1361,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$T = makeStyles({
+const useStyles$U = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -1399,6 +1406,7 @@ const useStyles$T = makeStyles({
     },
     menuBar: {
         display: "flex",
+        padding: `0 ${tokens.spacingHorizontalM}`,
     },
     menuBarControls: {
         display: "flex",
@@ -1442,7 +1450,7 @@ const useStyles$T = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -1485,7 +1493,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -1525,7 +1533,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const accordionCtx = useContext(AccordionContext);
     return (jsx("div", { ref: accordionCtx?.pinnedContainerRef, className: classes.pinnedContainer, children: jsx(MessageBar$1, { className: classes.pinnedContainerEmpty, children: jsx(MessageBarBody, { children: "No pinned items" }) }) }));
 };
@@ -1536,7 +1544,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -1552,7 +1560,7 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
@@ -1560,7 +1568,7 @@ const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { children, highlightSections, uniqueId, enablePinnedItems, enableHiddenItems, enableSearchItems, ...rest } = props;
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1657,7 +1665,7 @@ const Collapse = (props) => {
     return (jsx(Collapse$1, { visible: props.visible, orientation: props.orientation, unmountOnExit: true, children: jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
 };
 
-const useStyles$S = makeStyles({
+const useStyles$T = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1675,7 +1683,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -1937,6 +1945,11 @@ const DisableCopySettingDescriptor = {
     defaultValue: false,
 };
 
+/**
+ * Hook that reads and writes a setting from the settings store.
+ * @param descriptor The setting descriptor that identifies the setting and its default value.
+ * @returns A tuple of [currentValue, setValue, resetValue] similar to React's useState.
+ */
 function useSetting(descriptor) {
     const settingsStore = useSettingsStore();
     // Only watch for this specific setting to change. Otherwise, any time any setting changes we would
@@ -2014,7 +2027,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$R = makeStyles({
+const useStyles$S = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2022,8 +2035,14 @@ const useStyles$R = makeStyles({
         flexDirection: "column",
     },
 });
+/**
+ * An accordion component that supports dynamically adding sections and section content at runtime.
+ * Combines statically defined children sections with dynamically registered sections and content.
+ * @param props The accordion props including sections, section content, context, and an optional imperative ref.
+ * @returns The extensible accordion component.
+ */
 function ExtensibleAccordion(props) {
-    const classes = useStyles$R();
+    const classes = useStyles$S();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -2148,7 +2167,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$Q = makeStyles({
+const useStyles$R = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2161,7 +2180,7 @@ const useStyles$Q = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$Q();
+    const classes = useStyles$R();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -2200,11 +2219,21 @@ const DarkTheme = {
     colorNeutralForeground1: BaseDarkTheme.colorNeutralForeground2,
 };
 
+/**
+ * The unique identity symbol for the settings store service.
+ */
 const SettingsStoreIdentity = Symbol("SettingsStore");
 function GetKey(namespace, settingKey) {
     return `Babylon/${namespace}/${settingKey}`;
 }
+/**
+ * Default implementation of {@link ISettingsStore} that persists settings using browser local storage.
+ */
 class SettingsStore {
+    /**
+     * Creates a new settings store.
+     * @param _namespace A namespace used to scope the settings keys to avoid collisions with other stores.
+     */
     constructor(_namespace) {
         this._namespace = _namespace;
         this._onChanged = new Observable();
@@ -2223,10 +2252,17 @@ class SettingsStore {
     }
 }
 
+/**
+ * The setting descriptor for persisting the theme mode preference.
+ */
 const ThemeModeSettingDescriptor = {
     key: "ThemeMode",
     defaultValue: "system",
 };
+/**
+ * Resolves the current theme based on user preference and system settings.
+ * Listens for changes to both the persisted theme mode and the OS-level dark mode preference.
+ */
 class ThemeResolver {
     constructor(_settingsStore) {
         this._settingsStore = _settingsStore;
@@ -2264,6 +2300,9 @@ class ThemeResolver {
         this._settingsStoreObserver.remove();
     }
 }
+/**
+ * The unique identity symbol for the theme service.
+ */
 const ThemeServiceIdentity = Symbol("ThemeService");
 const ThemeServiceDefinition = {
     friendlyName: "Theme Service",
@@ -2379,6 +2418,10 @@ function DepsEqual(a, b) {
     return true;
 }
 
+/**
+ * Hook that provides the current theme mode state and controls for changing it.
+ * @returns An object with the current dark mode state, theme mode, and functions to set or toggle the theme.
+ */
 function useThemeMode() {
     const settingsStore = useSettingsStore();
     const themeResolver = useResource(useCallback(() => (settingsStore ? new ThemeResolver(settingsStore) : undefined), [settingsStore]));
@@ -2397,18 +2440,35 @@ function useThemeMode() {
     }
     return state;
 }
+/**
+ * Hook that returns the current Fluent UI theme based on the active theme mode.
+ * @param invert If true, inverts the theme (returns light theme in dark mode and vice versa). Defaults to false.
+ * @returns The current Fluent UI theme object.
+ */
 function useTheme(invert = false) {
     const { isDarkMode } = useThemeMode();
     return isDarkMode !== invert ? DarkTheme : LightTheme;
 }
 
+// Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
+const useStyles$Q = makeStyles({
+    root: {
+        scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
+    },
+});
+/**
+ * A themed Fluent UI provider that applies the current theme mode (light or dark).
+ * @param props Fluent provider props, plus an optional `invert` flag to swap the theme.
+ * @returns The themed Fluent UI provider component.
+ */
 const Theme = (props) => {
-    // NOTE: We do not want to applyStylesToPortals by default. If makes classes flow into portals
+    // NOTE: We do not want to applyStylesToPortals by default. It makes classes flow into portals
     // (like popovers), and if those styles do things like disable overflow, they can completely
     // break any UI within the portal. Therefore, default to false.
-    const { invert = false, applyStylesToPortals = false, ...rest } = props;
+    const { invert = false, applyStylesToPortals = false, className, ...rest } = props;
     const theme = useTheme(invert);
-    return (jsx(FluentProvider, { theme: theme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
+    const classes = useStyles$Q();
+    return (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
 const useStyles$P = makeStyles({
@@ -2683,7 +2743,10 @@ const SwitchPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Switch, { ...switchProps }) }));
 };
 
-const SceneContextIdentity = Symbol("SceneScontext");
+/**
+ * The unique identity symbol for the scene context service.
+ */
+const SceneContextIdentity = Symbol("SceneContext");
 
 function ToFeaturesString(options) {
     const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;
@@ -2911,27 +2974,48 @@ function useResizeHandle(params) {
     };
 }
 
+/**
+ * Setting descriptor for persisting side pane dock location overrides.
+ */
 const SidePaneDockOverridesSettingDescriptor = {
     key: "SidePaneDockOverrides",
     defaultValue: {},
 };
+/**
+ * Setting descriptor for persisting the left side pane width adjustment.
+ */
 const LeftSidePaneWidthAdjustSettingDescriptor = {
     key: "Shell/LeftPane/WidthAdjust",
     defaultValue: 0,
 };
+/**
+ * Setting descriptor for persisting the left side pane height adjustment.
+ */
 const LeftSidePaneHeightAdjustSettingDescriptor = {
     key: "Shell/LeftPane/HeightAdjust",
     defaultValue: 0,
 };
+/**
+ * Setting descriptor for persisting the right side pane width adjustment.
+ */
 const RightSidePaneWidthAdjustSettingDescriptor = {
     key: "Shell/RightPane/WidthAdjust",
     defaultValue: 0,
 };
+/**
+ * Setting descriptor for persisting the right side pane height adjustment.
+ */
 const RightSidePaneHeightAdjustSettingDescriptor = {
     key: "Shell/RightPane/HeightAdjust",
     defaultValue: 0,
 };
+/**
+ * The unique identity symbol for the root component service.
+ */
 const RootComponentServiceIdentity = Symbol("RootComponent");
+/**
+ * The unique identity symbol for the shell service.
+ */
 const ShellServiceIdentity = Symbol("ShellService");
 const useStyles$N = makeStyles({
     mainView: {
@@ -3047,8 +3131,18 @@ const useStyles$N = makeStyles({
     },
     paneHeaderText: {
         flex: 1,
+    },
+    paneHeaderTextNoIcon: {
         marginLeft: tokens.spacingHorizontalM,
     },
+    paneHeaderIcon: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        aspectRatio: "1",
+        fontSize: "20px",
+    },
     paneHeaderButton: {
         color: "inherit",
     },
@@ -3137,7 +3231,7 @@ const DockMenu = (props) => {
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
     const classes = useStyles$N();
-    return (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, {}) }) })] }));
+    return (jsxs("div", { className: classes.paneHeaderDiv, children: [props.icon && (jsx("div", { className: classes.paneHeaderIcon, children: jsx(props.icon, {}) })), jsx(Subtitle2Stronger, { className: mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon), 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 = (props) => {
@@ -3317,9 +3411,9 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
     }, [childWindow, isChildWindowOpen, topPanes, bottomPanes]);
     // This memoizes the pane itself, which may or may not include the tab list, depending on the toolbar mode.
     const corePane = useMemo(() => {
-        return (jsxs(Fragment, { children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [!isChildWindowOpen && location === "left" && expandCollapseButton, topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), !isChildWindowOpen && 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
+        return (jsxs(Fragment, { children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [!isChildWindowOpen && location === "left" && expandCollapseButton, topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), !isChildWindowOpen && location === "right" && expandCollapseButton] }) })), topPanes.length > 0 && (jsx("div", { className: classes.paneContent, children: topSelectedTab && (jsxs(Fragment, { children: [jsx(PaneHeader, { id: topSelectedTab.key, title: topSelectedTab.title, icon: topPanes.length > 1 ? undefined : topSelectedTab.icon, dockOptions: validTopDockOptions }), topPanes
                                 .filter((pane) => pane.key === topSelectedTab.key || pane.keepMounted)
-                                .map((pane) => (jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== topSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(ErrorBoundary, { name: pane.title, 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 !== topSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(ErrorBoundary, { name: pane.title, 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, icon: bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon, dockOptions: validBottomDockOptions }), bottomPanes
                                 .filter((pane) => pane.key === bottomSelectedTab.key || pane.keepMounted)
                                 .map((pane) => (jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== bottomSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(ErrorBoundary, { name: pane.title, 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 }) }) }))] }));
     }, [
@@ -3592,6 +3686,9 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
     };
 }
 
+/**
+ * The unique identity symbol for the settings service.
+ */
 const SettingsServiceIdentity = Symbol("SettingsService");
 const SettingsServiceDefinition = {
     friendlyName: "Settings",
@@ -3637,7 +3734,10 @@ const SettingsServiceDefinition = {
     },
 };
 
-const SelectionServiceIdentity = Symbol("PropertiesService");
+/**
+ * The unique identity symbol for the selection service.
+ */
+const SelectionServiceIdentity = Symbol("SelectionService");
 const ShowPropertiesOnSelectionSettingDescriptor = {
     key: "ShowPropertiesOnSelection",
     defaultValue: true,
@@ -3645,8 +3745,8 @@ const ShowPropertiesOnSelectionSettingDescriptor = {
 const SelectionServiceDefinition = {
     friendlyName: "Selection Service",
     produces: [SelectionServiceIdentity],
-    consumes: [ShellServiceIdentity, SettingsStoreIdentity, SettingsServiceIdentity],
-    factory: (shellService, settingsStore, settingsService) => {
+    consumes: [ShellServiceIdentity, SettingsStoreIdentity, SettingsServiceIdentity, SceneContextIdentity],
+    factory: (shellService, settingsStore, settingsService, sceneContext) => {
         settingsService.addSectionContent({
             key: "Selection Service Settings",
             section: "UI",
@@ -3680,6 +3780,8 @@ const SelectionServiceDefinition = {
                 }
             }
         };
+        // Set the scene as the default selected entity.
+        setSelectedItem(sceneContext.currentScene);
         return {
             get selectedEntity() {
                 return selectedEntityState;
@@ -3693,6 +3795,9 @@ const SelectionServiceDefinition = {
     },
 };
 
+/**
+ * The unique identity symbol for the properties service.
+ */
 const PropertiesServiceIdentity = Symbol("PropertiesService");
 /**
  * Provides a properties pane that enables displaying and editing properties of an entity such as a mesh or a texture.
@@ -4649,6 +4754,9 @@ const SceneExplorer = (props) => {
                     } }) })] }));
 };
 
+/**
+ * The unique identity symbol for the scene explorer service.
+ */
 const SceneExplorerServiceIdentity = Symbol("SceneExplorer");
 /**
  * Provides a scene explorer pane that enables browsing the scene graph and executing commands on entities.
@@ -4813,6 +4921,9 @@ const DebugPane = (props) => {
     return (jsxs(ExtensibleAccordion, { ...props, children: [jsxs(AccordionSection, { title: "Helpers", children: [jsx(SwitchPropertyLine, { label: "Grid", description: "Display a ground grid.", value: !!scene.reservedDataStore.gridMesh, onChange: () => SwitchGrid(scene) }), jsx(SwitchPropertyLine, { label: "Physics", description: "Display physic debug info.", value: !!scene.reservedDataStore.physicsViewer, onChange: () => SwitchPhysicsViewers(scene) }), jsx(SwitchPropertyLine, { label: "Names", description: "Display mesh names.", value: !!scene.reservedDataStore.textRenderersHook, onChange: () => void SwitchNameViewerAsync(scene) })] }), jsxs(AccordionSection, { title: "Texture Channels", children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Diffuse", target: StandardMaterial, propertyKey: "DiffuseTextureEnabled" }, "Diffuse"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Ambient", target: StandardMaterial, propertyKey: "AmbientTextureEnabled" }, "Ambient"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Specular", target: StandardMaterial, propertyKey: "SpecularTextureEnabled" }, "Specular"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emissive", target: StandardMaterial, propertyKey: "EmissiveTextureEnabled" }, "Emissive"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bump", target: StandardMaterial, propertyKey: "BumpTextureEnabled" }, "Bump"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Opacity", target: StandardMaterial, propertyKey: "OpacityTextureEnabled" }, "Opacity"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Reflection", target: StandardMaterial, propertyKey: "ReflectionTextureEnabled" }, "Reflection"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Refraction", target: StandardMaterial, propertyKey: "RefractionTextureEnabled" }, "Refraction"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Color Grading", target: StandardMaterial, propertyKey: "ColorGradingTextureEnabled" }, "ColorGrading"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lightmap", target: StandardMaterial, propertyKey: "LightmapTextureEnabled" }, "Lightmap"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Fresnel", target: StandardMaterial, propertyKey: "FresnelEnabled" }, "Fresnel"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Detail", target: MaterialFlags, propertyKey: "DetailTextureEnabled" }, "Detail"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Decal", target: MaterialFlags, propertyKey: "DecalMapEnabled" }, "Decal")] }), jsxs(AccordionSection, { title: "Features", children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Animations", target: scene, propertyKey: "animationsEnabled" }, "Animations"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Physics", target: scene, propertyKey: "physicsEnabled" }, "Physics"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Collisions", target: scene, propertyKey: "collisionsEnabled" }, "Collisions"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Fog", target: scene, propertyKey: "fogEnabled" }, "Fog"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lens Flares", target: scene, propertyKey: "lensFlaresEnabled" }, "Lens flares"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Lights", target: scene, propertyKey: "lightsEnabled" }, "Lights"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Particles", target: scene, propertyKey: "particlesEnabled" }, "Particles"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Post-processes", target: scene, propertyKey: "postProcessesEnabled" }, "Post-processes"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Probes", target: scene, propertyKey: "probesEnabled" }, "Probes"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Textures", target: scene, propertyKey: "texturesEnabled" }, "Textures"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Procedural Textures", target: scene, propertyKey: "proceduralTexturesEnabled" }, "Procedural textures"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render Targets", target: scene, propertyKey: "renderTargetsEnabled" }, "Render targets"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Shadows", target: scene, propertyKey: "shadowsEnabled" }, "Shadows"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Skeletons", target: scene, propertyKey: "skeletonsEnabled" }, "Skeletons"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Sprites", target: scene, propertyKey: "spritesEnabled" }, "Sprites")] })] }));
 };
 
+/**
+ * The unique identity symbol for the debug service.
+ */
 const DebugServiceIdentity = Symbol("DebugService");
 const DebugServiceDefinition = {
     friendlyName: "Debug",
@@ -6925,6 +7036,9 @@ const SystemStats = ({ context: scene }) => {
     return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Resolution", value: resolution }, "Resolution"), jsx(StringifiedPropertyLine, { label: "Hardware Scaling Level", value: hardwareScalingLevel }, "HardwareScalingLevel"), jsx(TextPropertyLine, { label: "Engine", value: engine.description }, "Engine"), jsx(BooleanBadgePropertyLine, { label: "StdDerivatives", value: caps.standardDerivatives }, "StdDerivatives"), jsx(BooleanBadgePropertyLine, { label: "Compressed Textures", value: caps.s3tc !== undefined }, "CompressedTextures"), jsx(BooleanBadgePropertyLine, { label: "Hardware Instances", value: caps.instancedArrays }, "HardwareInstances"), jsx(BooleanBadgePropertyLine, { label: "Texture Float", value: caps.textureFloat }, "TextureFloat"), jsx(BooleanBadgePropertyLine, { label: "Texture Half Float", value: caps.textureHalfFloat }, "TextureHalfFloat"), jsx(BooleanBadgePropertyLine, { label: "Render to Texture Float", value: caps.textureFloatRender }, "RenderToTextureFloat"), jsx(BooleanBadgePropertyLine, { label: "Render to Texture Half Float", value: caps.textureHalfFloatRender }, "RenderToTextureHalfFloat"), jsx(BooleanBadgePropertyLine, { label: "32bits Indices", value: caps.uintIndices }, "32bitsIndices"), jsx(BooleanBadgePropertyLine, { label: "Fragment Depth", value: caps.fragmentDepthSupported }, "FragmentDepth"), jsx(BooleanBadgePropertyLine, { label: "High Precision Shaders", value: caps.highPrecisionShaderSupported }, "HighPrecisionShaders"), jsx(BooleanBadgePropertyLine, { label: "Draw Buffers", value: caps.drawBuffersExtension }, "DrawBuffers"), jsx(BooleanBadgePropertyLine, { label: "Vertex Array Object", value: caps.vertexArrayObject }, "VertexArrayObject"), jsx(BooleanBadgePropertyLine, { label: "Timer Query", value: caps.timerQuery !== undefined }, "TimerQuery"), jsx(BooleanBadgePropertyLine, { label: "Stencil", value: engine.isStencilEnable }, "Stencil"), jsx(BooleanBadgePropertyLine, { label: "Parallel Shader Compilation", value: caps.parallelShaderCompile != null }, "ParallelShaderCompilation"), jsx(StringifiedPropertyLine, { label: "Max Textures Units", value: caps.maxTexturesImageUnits }, "MaxTexturesUnits"), jsx(StringifiedPropertyLine, { label: "Max Textures Size", value: caps.maxTextureSize }, "MaxTexturesSize"), jsx(StringifiedPropertyLine, { label: "Max Anisotropy", value: caps.maxAnisotropy }, "MaxAnisotropy"), jsx(TextPropertyLine, { label: "Driver", value: engine.extractDriverInfo() }, "Driver")] }));
 };
 
+/**
+ * The unique identity symbol for the stats service.
+ */
 const StatsServiceIdentity = Symbol("StatsService");
 /**
  * Provides a scene stats pane.
@@ -7005,6 +7119,9 @@ const ToolsPane = (props) => {
     return jsx(ExtensibleAccordion, { ...props });
 };
 
+/**
+ * The unique identity symbol for the tools service.
+ */
 const ToolsServiceIdentity = Symbol("ToolsService");
 /**
  * A collection of usually optional, dynamic extensions.
@@ -7230,6 +7347,9 @@ const WatcherSettingDescriptor = {
         mode: "intercept",
     },
 };
+/**
+ * The unique identity symbol for the watcher service.
+ */
 const WatcherServiceIdentity = Symbol("WatcherService");
 const WatcherServiceDefinition = {
     friendlyName: "Watcher Service",
@@ -7375,6 +7495,9 @@ const WatcherRefreshToolbarServiceDefinition = {
     },
 };
 
+/**
+ * The unique identity symbol for the gizmo service.
+ */
 const GizmoServiceIdentity = Symbol("GizmoService");
 const GizmoServiceDefinition = {
     friendlyName: "Gizmo Service",
@@ -7656,7 +7779,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DeZ7ZJOC.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-B8OEbZg5.js'),
     },
     {
         name: "Reflector",
@@ -7664,7 +7787,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-DE0Ic3N5.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-LPThzOok.js'),
     },
 ]);
 
@@ -8393,7 +8516,7 @@ function MakeModularTool(options) {
                 }
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-CAOSDkIg.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-J1zZuhYY.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8534,11 +8657,10 @@ const GizmoToolbar = (props) => {
     const onCameraGizmoChange = useCallback((e, data) => {
         const value = data.checkedItems[0];
         gizmoService.gizmoCamera = value === "-1" ? null : (cameras.find((camera) => camera.uniqueId.toString() === value) ?? null);
-    }, [gizmoService]);
+    }, [gizmoService, cameras]);
     return (jsxs(Fragment, { children: [jsx(ToggleButton, { title: "Translate", checkedIcon: TranslateIcon, value: gizmoMode === "translate", onChange: () => updateGizmoMode("translate") }), jsx(ToggleButton, { title: "Rotate", checkedIcon: ArrowRotateClockwiseRegular, value: gizmoMode === "rotate", onChange: () => updateGizmoMode("rotate") }), jsx(ToggleButton, { title: "Scale", checkedIcon: ArrowExpandRegular, value: gizmoMode === "scale", onChange: () => updateGizmoMode("scale") }), jsx(ToggleButton, { title: "Bounding Box", checkedIcon: SelectObjectRegular, value: gizmoMode === "boundingBox", onChange: () => updateGizmoMode("boundingBox") }), jsx(Collapse, { visible: !!gizmoMode, orientation: "horizontal", children: jsxs(Menu, { positioning: "below-end", checkedValues: { coordinatesMode: [coordinatesMode.toString()] }, onCheckedValueChange: onCoordinatesModeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip$1, { content: "Coordinates Mode", relationship: "label", children: jsx(SplitButton, { className: classes.coordinatesModeButton, menuButton: triggerProps, primaryActionButton: {
                                         onClick: toggleCoordinatesMode,
-                                    }, size: "small", appearance: "transparent", shape: "rounded", icon: coordinatesMode === 1 /* GizmoCoordinatesMode.Local */ ? jsx(CubeRegular, {}) : jsx(GlobeRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.coordinatesModeMenu, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "coordinatesMode", value: 1 /* GizmoCoordinatesMode.Local */.toString(), children: "Local" }), jsx(MenuItemRadio, { name: "coordinatesMode", value: 0 /* GizmoCoordinatesMode.World */.toString(), children: "World" })] }) })] }) }), jsx(Collapse, { visible: !!gizmoMode, orientation: "horizontal", children: jsxs(Menu, { positioning: "below-end", checkedValues: { cameraGizmo: [cameraGizmo?.uniqueId.toString() ?? "-1"] }, onCheckedValueChange: onCameraGizmoChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip$1, { content: "Camera Gizmo", relationship: "label", children: jsx(SplitButton, { className: classes.cameraGizmoButton, menuButton: triggerProps, size: "small", appearance: "transparent", shape: "rounded", icon: jsx(CameraRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.cameraGizmoMenu, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "cameraGizmo", value: "-1", children: "Automatic" }), sceneContext.currentScene &&
-                                        sceneContext.currentScene.activeCameras?.map((camera, index) => (jsx(MenuItemRadio, { name: "cameraGizmo", value: camera.uniqueId.toString(), children: camera.name }, camera.uniqueId)))] }) })] }) })] }));
+                                    }, size: "small", appearance: "transparent", shape: "rounded", icon: coordinatesMode === 1 /* GizmoCoordinatesMode.Local */ ? jsx(CubeRegular, {}) : jsx(GlobeRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.coordinatesModeMenu, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "coordinatesMode", value: 1 /* GizmoCoordinatesMode.Local */.toString(), children: "Local" }), jsx(MenuItemRadio, { name: "coordinatesMode", value: 0 /* GizmoCoordinatesMode.World */.toString(), children: "World" })] }) })] }) }), jsx(Collapse, { visible: !!gizmoMode && !!cameras && cameras.length > 1, orientation: "horizontal", children: jsxs(Menu, { positioning: "below-end", checkedValues: { cameraGizmo: [cameraGizmo?.uniqueId.toString() ?? "-1"] }, onCheckedValueChange: onCameraGizmoChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip$1, { content: "Camera Gizmo", relationship: "label", children: jsx(SplitButton, { className: classes.cameraGizmoButton, menuButton: triggerProps, size: "small", appearance: "transparent", shape: "rounded", icon: jsx(CameraRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.cameraGizmoMenu, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "cameraGizmo", value: "-1", children: "Automatic" }), cameras?.map((camera) => (jsx(MenuItemRadio, { name: "cameraGizmo", value: camera.uniqueId.toString(), children: camera.name }, camera.uniqueId)))] }) })] }) })] }));
 };
 
 const GizmoToolbarServiceDefinition = {
@@ -11967,7 +12089,7 @@ const RangeFrameBar = ({ width }) => {
         const x = frameToX(displayFrame);
         return jsx("line", { className: styles.activeFrameLine, x1: x, y1: 0, x2: x, y2: 40 });
     }, [displayFrame, frameToX, styles.activeFrameLine]);
-    const viewBox = `${ -10} 0 ${viewWidth + OFFSET_X * 4} 40`;
+    const viewBox = `${-OFFSET_X} 0 ${viewWidth + OFFSET_X * 4} 40`;
     return (jsx("div", { className: styles.root, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: jsxs("svg", { ref: svgRef, className: styles.svg, viewBox: viewBox, children: [frameTicks.map((frame, i) => {
                     const x = frameToX(frame);
                     return (jsxs("g", { children: [jsx("line", { className: styles.tickLine, x1: x, y1: 22, x2: x, y2: 40 }), jsx("text", { className: styles.tickLabel, x: x, y: 14, children: Math.round(frame) })] }, `tick-${frame}-${i}`));
@@ -14917,10 +15039,13 @@ function StringifyMetadata(metadata, format) {
         return metadata;
     }
     if (metadata) {
-        if (ObjectCanSafelyStringify(metadata)) {
-            return JSON.stringify(metadata, undefined, undefined);
+        // Try JSON.stringify even for objects with functions — it safely omits
+        // function-valued and undefined properties. Only fall back to String()
+        // for cases that actually throw (e.g. circular references).
+        try {
+            return JSON.stringify(metadata, undefined, format ? PrettyJSONIndent : undefined);
         }
-        else {
+        catch {
             return String(metadata);
         }
     }
@@ -14985,7 +15110,7 @@ const MetadataProperties = (props) => {
     const classes = useStyles$h();
     const { size } = useContext(ToolContext);
     const metadata = useProperty(entity, "metadata");
-    const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata) ?? "", [metadata]);
+    const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata, false) ?? "", [metadata]);
     const metadataType = useMemo(() => GetMetadataEntityType(metadata), [metadata]);
     const canPreventObjectCorruption = metadataType === "object";
     const [preventObjectCorruption, setPreventObjectCorruption] = useState(false);
@@ -15344,7 +15469,7 @@ const MeshMorphTargetsProperties = (props) => {
     if (morphTargets.length === 0) {
         return null;
     }
-    return (jsx(Fragment, { children: morphTargets.map((target, index) => (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: target.name || `Target ${index}`, description: `Influence of morph target "${target.name || `Target ${index}`}"`, target: target, propertyKey: "influence", min: 0, max: 1, step: 0.01 }, index))) }));
+    return (jsx(Fragment, { children: morphTargets.map((target, index) => (jsx(BoundProperty, { component: NumberInputPropertyLine, label: target.name || `Target ${index}`, description: `Influence of morph target "${target.name || `Target ${index}`}"`, target: target, propertyKey: "influence", step: 0.01 }, index))) }));
 };
 
 const NodeGeneralProperties = (props) => {
@@ -17227,7 +17352,8 @@ const SceneRenderingProperties = (props) => {
     const { scene, selectionService } = props;
     const envTexture = useProperty(scene, "environmentTexture");
     const fogMode = useProperty(scene, "fogMode");
-    return (jsxs(Fragment, { children: [jsx(NumberDropdownPropertyLine, { options: [
+    const useOIT = useProperty(scene, "useOrderIndependentTransparency");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "OIT", description: "Order Independent Transparency", target: scene, propertyKey: "useOrderIndependentTransparency" }), jsx(Collapse, { visible: useOIT, children: useOIT && scene.depthPeelingRenderer && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "passCount", description: "Render the number of transparent layers", target: scene.depthPeelingRenderer, propertyKey: "passCount", min: 2, max: 8, step: 1 })) }), jsx(NumberDropdownPropertyLine, { options: [
                     { label: "Point", value: 0 },
                     { label: "Wireframe", value: 1 },
                     { label: "Solid", value: 2 },
@@ -19861,7 +19987,7 @@ const AnimationGroupExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: ({ entity }) => (entity instanceof AnimationGroup ? jsx(StackRegular, {}) : jsx(FilmstripRegular, {})),
+            entityIcon: ({ entity }) => entity instanceof AnimationGroup ? jsx(StackRegular, { color: tokens.colorPaletteBlueForeground2 }) : jsx(FilmstripRegular, { color: tokens.colorPaletteBlueForeground2 }),
             getEntityAddedObservables: () => [scene.onNewAnimationGroupAddedObservable],
             getEntityRemovedObservables: () => [scene.onAnimationGroupRemovedObservable],
         });
@@ -19939,7 +20065,7 @@ const AtmosphereExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(WeatherSunnyLowFilled, {}),
+            entityIcon: () => jsx(WeatherSunnyLowFilled, { color: tokens.colorPaletteYellowForeground2 }),
             // TODO in order for inspector UX to display atmosphere created after inspector is created
             getEntityAddedObservables: () => [],
             getEntityRemovedObservables: () => [],
@@ -20010,7 +20136,7 @@ const EffectLayerExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(LayerRegular, {}),
+            entityIcon: () => jsx(LayerRegular, { color: tokens.colorPaletteRedForeground2 }),
             getEntityAddedObservables: () => [scene.onNewEffectLayerAddedObservable],
             getEntityRemovedObservables: () => [scene.onEffectLayerRemovedObservable],
         });
@@ -20048,7 +20174,7 @@ const FrameGraphExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(FrameRegular, {}),
+            entityIcon: () => jsx(FrameRegular, { color: tokens.colorPaletteGreenForeground2 }),
             getEntityAddedObservables: () => [scene.onNewFrameGraphAddedObservable],
             getEntityRemovedObservables: () => [scene.onFrameGraphRemovedObservable],
         });
@@ -20180,7 +20306,7 @@ const GuiExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: ({ entity }) => (IsAdvancedDynamicTexture(entity) ? jsx(AppGenericRegular, {}) : jsx(RectangleLandscapeRegular, {})),
+            entityIcon: ({ entity }) => IsAdvancedDynamicTexture(entity) ? (jsx(AppGenericRegular, { color: tokens.colorPaletteLilacForeground2 })) : (jsx(RectangleLandscapeRegular, { color: tokens.colorPaletteSeafoamForeground2 })),
             getEntityAddedObservables: () => [guiEntityAddedObservable],
             getEntityRemovedObservables: () => [guiEntityRemovedObservable],
         });
@@ -20285,7 +20411,7 @@ const MaterialExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(MaterialIcon, {}),
+            entityIcon: () => jsx(MaterialIcon, { color: tokens.colorPaletteMarigoldForeground2 }),
             getEntityAddedObservables: () => [scene.onNewMaterialAddedObservable],
             getEntityRemovedObservables: () => [scene.onMaterialRemovedObservable],
         });
@@ -20367,7 +20493,7 @@ const NodeExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: ({ entity: node }) => node instanceof AbstractMesh ? (jsx(MeshIcon, {})) : node instanceof TransformNode ? (jsx(MyLocationRegular, {})) : node instanceof Camera ? (jsx(CameraRegular, {})) : node instanceof Light ? (jsx(LightbulbRegular, {})) : (jsx(Fragment, {})),
+            entityIcon: ({ entity: node }) => node instanceof AbstractMesh ? (jsx(MeshIcon, { color: tokens.colorPaletteBlueForeground2 })) : node instanceof TransformNode ? (jsx(MyLocationRegular, { color: tokens.colorPaletteBlueForeground2 })) : node instanceof Camera ? (jsx(CameraRegular, { color: tokens.colorPaletteGreenForeground2 })) : node instanceof Light ? (jsx(LightbulbRegular, { color: tokens.colorPaletteYellowForeground2 })) : (jsx(Fragment, {})),
             getEntityAddedObservables: () => [
                 scene.onNewMeshAddedObservable,
                 scene.onNewTransformNodeAddedObservable,
@@ -20633,7 +20759,7 @@ const ParticleSystemExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(DropRegular, {}),
+            entityIcon: () => jsx(DropRegular, { color: tokens.colorPaletteCranberryForeground2 }),
             getEntityAddedObservables: () => [scene.onNewParticleSystemAddedObservable],
             getEntityRemovedObservables: () => [scene.onParticleSystemRemovedObservable],
         });
@@ -20685,7 +20811,7 @@ const PostProcessExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(BlurRegular, {}),
+            entityIcon: () => jsx(BlurRegular, { color: tokens.colorPaletteRedForeground2 }),
             getEntityAddedObservables: () => [scene.onNewPostProcessAddedObservable],
             getEntityRemovedObservables: () => [scene.onPostProcessRemovedObservable],
         });
@@ -20717,7 +20843,7 @@ const RenderingPipelineExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(PipelineRegular, {}),
+            entityIcon: () => jsx(PipelineRegular, { color: tokens.colorPaletteRedForeground2 }),
             getEntityAddedObservables: () => [scene.postProcessRenderPipelineManager.onNewPipelineAddedObservable],
             getEntityRemovedObservables: () => [scene.postProcessRenderPipelineManager.onPipelineRemovedObservable],
         });
@@ -20759,7 +20885,7 @@ const SkeletonExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: ({ entity: skeletonOrBone }) => (skeletonOrBone instanceof Skeleton ? jsx(PersonWalkingRegular, {}) : jsx(DataLineRegular, {})),
+            entityIcon: ({ entity: skeletonOrBone }) => skeletonOrBone instanceof Skeleton ? (jsx(PersonWalkingRegular, { color: tokens.colorPaletteAnchorForeground2 })) : (jsx(DataLineRegular, { color: tokens.colorPaletteBeigeForeground2 })),
             getEntityAddedObservables: () => [scene.onNewSkeletonAddedObservable],
             getEntityRemovedObservables: () => [scene.onSkeletonRemovedObservable],
             getEntityMovedObservables: () => [boneMovedObservable],
@@ -20820,7 +20946,7 @@ const SoundExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(SoundWaveCircleRegular, {}),
+            entityIcon: () => jsx(SoundWaveCircleRegular, { color: tokens.colorPaletteForestForeground2 }),
             getEntityAddedObservables: () => [soundAddedObservable],
             getEntityRemovedObservables: () => [soundRemovedObservable],
         });
@@ -20864,7 +20990,7 @@ const SpriteManagerExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: ({ entity: spriteEntity }) => (spriteEntity instanceof Sprite ? jsx(PersonSquareRegular, {}) : jsx(LayerDiagonalPersonRegular, {})),
+            entityIcon: ({ entity: spriteEntity }) => spriteEntity instanceof Sprite ? (jsx(PersonSquareRegular, { color: tokens.colorPalettePeachForeground2 })) : (jsx(LayerDiagonalPersonRegular, { color: tokens.colorPalettePeachForeground2 })),
             getEntityAddedObservables: () => [scene.onNewSpriteManagerAddedObservable],
             getEntityRemovedObservables: () => [scene.onSpriteManagerRemovedObservable],
         });
@@ -20936,7 +21062,7 @@ const TextureExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: ({ entity: texture }) => (texture instanceof DynamicTexture ? jsx(ImageEditRegular, {}) : jsx(ImageRegular, {})),
+            entityIcon: ({ entity: texture }) => texture instanceof DynamicTexture ? jsx(ImageEditRegular, { color: tokens.colorPaletteGrapeForeground2 }) : jsx(ImageRegular, { color: tokens.colorPaletteGrapeForeground2 }),
             getEntityAddedObservables: () => [scene.onNewTextureAddedObservable],
             getEntityRemovedObservables: () => [scene.onTextureRemovedObservable],
         });
@@ -20964,7 +21090,7 @@ const EquirectangularCaptureTool = ({ scene }) => {
 };
 
 const GIFCaptureTool = MakeLazyComponent(async () => {
-    const gif = (await import('./gif-D_8cJm3S.js').then(function (n) { return n.g; })).default;
+    const gif = (await import('./gif-CdXfT-By.js').then(function (n) { return n.g; })).default;
     // TODO: Figure out how to grab this from NPM package instead of CDN
     const workerContent = await Tools.LoadFileAsync("https://cdn.jsdelivr.net/gh//terikon/gif.js.optimized@0.1.6/dist/gif.worker.js");
     const workerBlob = new Blob([workerContent], { type: "application/javascript" });
@@ -21656,6 +21782,12 @@ const InspectorTokens = new WeakMap();
 // This async lock is used to sequentialize all calls to ShowInspector and dispose of existing inspectors.
 // This is needed because each time Inspector is shown or hidden, it is potentially mutating the same DOM element.
 const InspectorLock = new AsyncLock();
+/**
+ * Shows the inspector for the specified scene.
+ * @param scene The scene to inspect.
+ * @param options Optional configuration for the inspector.
+ * @returns An {@link InspectorToken} that can be disposed to hide the inspector.
+ */
 function ShowInspector(scene, options = {}) {
     // Dispose of any existing inspector for this scene.
     InspectorTokens.get(scene)?.dispose();
@@ -22686,5 +22818,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { useEventfulState as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ErrorBoundary as E, ExtensibleAccordion as F, GizmoServiceIdentity as G, Theme as H, Inspector as I, TeachingMoment as J, PropertyContext as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, usePropertyChangedNotifier as O, Popover as P, BuiltInsExtensionFeed as Q, useVector3Property as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, useColor3Property as U, Vector3PropertyLine as V, WatcherServiceIdentity as W, useColor4Property as X, useQuaternionProperty as Y, MakePropertyHook as Z, useInterceptObservable as _, useProperty as a, Color3GradientList as a$, useObservableCollection as a0, useOrderedObservableCollection as a1, usePollingObservable as a2, useResource as a3, useAsyncResource as a4, useSetting as a5, useAngleConverters as a6, MakeTeachingMoment as a7, MakeDialogTeachingMoment as a8, MakePopoverTeachingMoment as a9, FactorGradientComponent as aA, Color3GradientComponent as aB, Color4GradientComponent as aC, ColorStepGradientComponent as aD, InfoLabel as aE, MakeLazyComponent as aF, List as aG, MaterialSelector as aH, NodeSelector as aI, PositionedPopover as aJ, SearchBar as aK, SearchBox as aL, SkeletonSelector as aM, Slider as aN, SpinButton as aO, Switch as aP, SyncedSliderInput as aQ, Textarea as aR, TextInput as aS, TextureSelector as aT, ToastProvider as aU, ToggleButton as aV, Tooltip as aW, UploadButton as aX, ChildWindow as aY, FileUploadLine as aZ, FactorGradientList as a_, useThemeMode as aa, useTheme as ab, InterceptFunction as ac, GetPropertyDescriptor as ad, IsPropertyReadonly as ae, InterceptProperty as af, ObservableCollection as ag, ConstructorFactory as ah, SelectionServiceDefinition as ai, SettingsStore as aj, ShowInspector as ak, useKeyListener as al, useKeyState as am, useEventListener as an, AccordionSectionItem as ao, Checkbox as ap, Collapse as aq, ColorPickerPopup as ar, InputHexField as as, InputHsvField as at, ComboBox as au, DraggableLine as av, Dropdown as aw, NumberDropdown as ax, StringDropdown as ay, EntitySelector as az, ShellServiceIdentity as b, Color4GradientList as b0, Pane as b1, TextureUpload as b2, BooleanBadgePropertyLine as b3, Color3PropertyLine as b4, Color4PropertyLine as b5, ComboBoxPropertyLine as b6, HexPropertyLine as b7, LinkPropertyLine as b8, PropertyLine as b9, LineContainer as ba, PlaceholderPropertyLine as bb, StringifiedPropertyLine as bc, SwitchPropertyLine as bd, SyncedSliderPropertyLine as be, TextAreaPropertyLine as bf, TextPropertyLine as bg, RotationVectorPropertyLine as bh, QuaternionPropertyLine as bi, Vector2PropertyLine as bj, Vector4PropertyLine as bk, SceneContextIdentity as c, SelectionServiceIdentity as d, useObservableState as e, AccordionSection as f, ButtonLine as g, ToolsServiceIdentity as h, useExtensionManager as i, Link as j, SidePaneContainer as k, PropertiesServiceIdentity as l, SceneExplorerServiceIdentity as m, SettingsServiceIdentity as n, StatsServiceIdentity as o, ThemeServiceIdentity as p, SettingsStoreIdentity as q, ConvertOptions as r, AttachDebugLayer as s, DetachDebugLayer as t, useToast as u, NumberDropdownPropertyLine as v, StringDropdownPropertyLine as w, BoundProperty as x, Property as y, LinkToEntityPropertyLine as z };
-//# sourceMappingURL=index-Ddfh2kw4.js.map
+export { HexPropertyLine as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorStepGradientComponent as D, ComboBox as E, ComboBoxPropertyLine as F, ConstructorFactory as G, ConvertOptions as H, DebugServiceIdentity as I, DetachDebugLayer as J, DraggableLine as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, Dropdown as O, Popover as P, EntitySelector as Q, ErrorBoundary as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, ExtensibleAccordion as U, Vector3PropertyLine as V, FactorGradientComponent as W, FactorGradientList as X, FileUploadLine as Y, GetPropertyDescriptor as Z, GizmoServiceIdentity as _, useProperty as a, Vector2PropertyLine as a$, InfoLabel as a0, InputHexField as a1, InputHsvField as a2, Inspector as a3, InterceptFunction as a4, InterceptProperty as a5, IsPropertyReadonly as a6, LineContainer as a7, LinkPropertyLine as a8, LinkToEntityPropertyLine as a9, SettingsStoreIdentity as aA, ShowInspector as aB, SidePaneContainer as aC, SkeletonSelector as aD, Slider as aE, SpinButton as aF, StatsServiceIdentity as aG, StringDropdown as aH, StringDropdownPropertyLine as aI, StringifiedPropertyLine as aJ, Switch as aK, SwitchPropertyLine as aL, SyncedSliderInput as aM, SyncedSliderPropertyLine as aN, TeachingMoment as aO, TextAreaPropertyLine as aP, TextInput as aQ, TextPropertyLine as aR, Textarea as aS, TextureSelector as aT, TextureUpload as aU, Theme as aV, ThemeServiceIdentity as aW, ToastProvider as aX, ToggleButton as aY, Tooltip as aZ, UploadButton as a_, List as aa, MakeDialogTeachingMoment as ab, MakeLazyComponent as ac, MakePopoverTeachingMoment as ad, MakePropertyHook as ae, MakeTeachingMoment as af, MaterialSelector as ag, NodeSelector as ah, NumberDropdown as ai, NumberDropdownPropertyLine as aj, ObservableCollection as ak, Pane as al, PlaceholderPropertyLine as am, PositionedPopover as an, PropertiesServiceIdentity as ao, Property as ap, PropertyContext as aq, PropertyLine as ar, QuaternionPropertyLine as as, RotationVectorPropertyLine as at, SceneExplorerServiceIdentity as au, SearchBar as av, SearchBox as aw, SelectionServiceDefinition as ax, SettingsServiceIdentity as ay, SettingsStore as az, ShellServiceIdentity as b, Vector4PropertyLine as b0, WatcherServiceIdentity as b1, useAngleConverters as b2, useAsyncResource as b3, useColor3Property as b4, useColor4Property as b5, useEventListener as b6, useEventfulState as b7, useInterceptObservable as b8, useKeyListener as b9, useKeyState as ba, useObservableCollection as bb, useOrderedObservableCollection as bc, usePollingObservable as bd, usePropertyChangedNotifier as be, useQuaternionProperty as bf, useResource as bg, useSetting as bh, useTheme as bi, useThemeMode as bj, useVector3Property as bk, SceneContextIdentity as c, SelectionServiceIdentity as d, useObservableState as e, AccordionSection as f, ButtonLine as g, ToolsServiceIdentity as h, useExtensionManager as i, Link as j, AccordionSectionItem as k, AttachDebugLayer as l, BooleanBadgePropertyLine as m, BoundProperty as n, BuiltInsExtensionFeed as o, Checkbox as p, ChildWindow as q, Collapse as r, Color3GradientComponent as s, Color3GradientList as t, useToast as u, Color3PropertyLine as v, Color4GradientComponent as w, Color4GradientList as x, Color4PropertyLine as y, ColorPickerPopup as z };
+//# sourceMappingURL=index-xzWdtYzo.js.map