@babylonjs/inspector 8.52.1 → 8.53.1

package/lib/{index-BvYg0Psk.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 } 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",
@@ -1432,6 +1440,7 @@ const useStyles$T = makeStyles({
     },
     searchBox: {
         width: "100%",
+        maxWidth: "none",
     },
 });
 /**
@@ -1441,19 +1450,19 @@ 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;
     }
     const { state, dispatch, features } = accordionCtx;
     const { editMode } = state;
-    return (jsxs("div", { className: classes.menuBar, children: [jsx(AccordionSearchBox, {}), jsxs("div", { className: classes.menuBarControls, children: [features.hiding && editMode && (jsxs(Fragment, { children: [jsx(Button, { title: "Show all", icon: EyeFilled, appearance: "subtle", onClick: () => dispatch({ type: "SHOW_ALL" }) }), jsx(Button, { title: "Hide all", icon: EyeOffRegular, appearance: "subtle", onClick: () => {
+    return (jsxs("div", { className: classes.menuBar, children: [jsx(AccordionSearchBox, {}), jsxs("div", { className: classes.menuBarControls, children: [features.hiding && editMode && (jsxs(Fragment, { children: [jsx(Button, { title: "Show all", icon: EyeFilled, appearance: "transparent", onClick: () => dispatch({ type: "SHOW_ALL" }) }), jsx(Button, { title: "Hide all", icon: EyeOffRegular, appearance: "transparent", onClick: () => {
                                     // Hide all visible (non-hidden) items using the registered item IDs
                                     const { registeredItemIds, state: currentState } = accordionCtx;
                                     const visibleItemIds = Array.from(registeredItemIds.keys()).filter((id) => !currentState.hiddenIds.includes(id));
                                     dispatch({ type: "HIDE_ALL_VISIBLE", visibleItemIds });
-                                } })] })), (features.pinning || features.hiding) && (jsx(Button, { title: "Edit mode", icon: editMode ? CheckmarkFilled : EditRegular, appearance: editMode ? "primary" : "subtle", onClick: () => dispatch({ type: "SET_EDIT_MODE", enabled: !editMode }) }))] })] }));
+                                } })] })), (features.pinning || features.hiding) && (jsx(Button, { title: "Edit mode", icon: editMode ? CheckmarkFilled : EditRegular, appearance: editMode ? "primary" : "transparent", onClick: () => dispatch({ type: "SET_EDIT_MODE", enabled: !editMode }) }))] })] }));
 };
 /**
  * Wrapper component that must encapsulate the section headers and panels.
@@ -1484,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);
@@ -1524,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" }) }) }));
 };
@@ -1535,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;
@@ -1551,14 +1560,15 @@ 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;
 const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
-    const { children, highlightSections, ...rest } = props;
-    const classes = useStyles$T();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, highlightSections, uniqueId, enablePinnedItems, enableHiddenItems, enableSearchItems, ...rest } = props;
+    const classes = useStyles$U();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1655,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",
@@ -1673,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) => {
@@ -1935,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
@@ -2012,7 +2027,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$R = makeStyles({
+const useStyles$S = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2020,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 = [];
@@ -2146,7 +2167,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$Q = makeStyles({
+const useStyles$R = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2159,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 }));
 });
 
@@ -2198,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();
@@ -2221,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;
@@ -2262,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",
@@ -2377,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]));
@@ -2395,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({
@@ -2604,6 +2666,25 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
+/**
+ * A hook that provides a transient state value and a "pulse" function to set it.
+ * The transient value is meant to be consumed immediately after being set, and will be cleared on the next render.
+ * @typeParam T The type of the transient value.
+ * @returns A tuple containing the transient value and a function to "pulse" the state.
+ */
+function useImpulse() {
+    const impulseRef = useRef(undefined);
+    const [, setVersion] = useState(0);
+    const pulse = useCallback((value) => {
+        impulseRef.current = value;
+        setVersion((v) => v + 1);
+    }, []);
+    // Consume the impulse value and clear it
+    const value = impulseRef.current;
+    impulseRef.current = undefined;
+    return [value, pulse];
+}
+
 const useStyles$O = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
@@ -2662,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;
@@ -2890,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: {
@@ -3026,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",
     },
@@ -3116,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) => {
@@ -3296,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 }) }) }))] }));
     }, [
@@ -3571,6 +3686,9 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
     };
 }
 
+/**
+ * The unique identity symbol for the settings service.
+ */
 const SettingsServiceIdentity = Symbol("SettingsService");
 const SettingsServiceDefinition = {
     friendlyName: "Settings",
@@ -3616,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,
@@ -3624,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",
@@ -3659,6 +3780,8 @@ const SelectionServiceDefinition = {
                 }
             }
         };
+        // Set the scene as the default selected entity.
+        setSelectedItem(sceneContext.currentScene);
         return {
             get selectedEntity() {
                 return selectedEntityState;
@@ -3672,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.
@@ -3684,7 +3810,7 @@ const PropertiesServiceDefinition = {
         const sectionsCollection = new ObservableCollection();
         const sectionContentCollection = new ObservableCollection();
         const onPropertyChanged = new Observable();
-        const onHighlightSectionsRequested = new Observable();
+        const onHighlightSectionsRequested = new Observable(undefined, true);
         const registration = shellService.addSidePane({
             key: "Properties",
             title: "Properties",
@@ -3716,15 +3842,23 @@ const PropertiesServiceDefinition = {
                 // The selected entity may be set at the same time as a highlight is requested.
                 // To account for this, we need to wait for one React render to complete before
                 // requesting the section highlight.
-                const [pendingHighlight, setPendingHighlight] = useState();
+                const [pendingHighlight, pulsePendingHighlightSections] = useImpulse();
                 useEffect(() => {
-                    const observer = onHighlightSectionsRequested.add(setPendingHighlight);
-                    return () => observer.remove();
+                    const observer = onHighlightSectionsRequested.add((sectionIds) => {
+                        // Now this UI component is observing, so we don't need to cache pending requests anymore.
+                        onHighlightSectionsRequested.notifyIfTriggered = false;
+                        onHighlightSectionsRequested.cleanLastNotifiedState();
+                        pulsePendingHighlightSections(sectionIds);
+                    });
+                    return () => {
+                        observer.remove();
+                        // Now this UI component is no longer observing, so we need to cache pending requests again.
+                        onHighlightSectionsRequested.notifyIfTriggered = true;
+                    };
                 }, []);
                 useEffect(() => {
                     if (pendingHighlight && sectionsRef.current) {
                         sectionsRef.current.highlightSections(pendingHighlight);
-                        setPendingHighlight(undefined);
                     }
                 }, [pendingHighlight]);
                 return (jsx(PropertyContext.Provider, { value: { onPropertyChanged }, children: jsx(PropertiesPane, { uniqueId: "Properties", sections: sections, sectionContent: applicableContent, context: entity, sectionsRef: sectionsRef, enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true }) }));
@@ -4112,6 +4246,7 @@ const useStyles$M = makeStyles({
     searchBox: {
         flex: 1,
         padding: 0,
+        maxWidth: "none",
     },
     tree: {
         rowGap: 0,
@@ -4619,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.
@@ -4783,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",
@@ -4921,7 +5062,7 @@ const UploadButton = (props) => {
  */
 const FileUploadLine = ({ onClick, label, accept, ...buttonProps }) => {
     FileUploadLine.displayName = "FileUploadLine";
-    return (jsx(LineContainer, { uniqueId: label, children: jsx(UploadButton, { onUpload: onClick, accept: accept, label: label, ...buttonProps }) }));
+    return (jsx(LineContainer, { uniqueId: `${label}_upload`, label: label, children: jsx(UploadButton, { onUpload: onClick, accept: accept, label: label, ...buttonProps }) }));
 };
 
 /**
@@ -6895,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.
@@ -6975,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.
@@ -7200,6 +7347,9 @@ const WatcherSettingDescriptor = {
         mode: "intercept",
     },
 };
+/**
+ * The unique identity symbol for the watcher service.
+ */
 const WatcherServiceIdentity = Symbol("WatcherService");
 const WatcherServiceDefinition = {
     friendlyName: "Watcher Service",
@@ -7345,6 +7495,9 @@ const WatcherRefreshToolbarServiceDefinition = {
     },
 };
 
+/**
+ * The unique identity symbol for the gizmo service.
+ */
 const GizmoServiceIdentity = Symbol("GizmoService");
 const GizmoServiceDefinition = {
     friendlyName: "Gizmo Service",
@@ -7626,7 +7779,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DHfs_EZ6.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-B8OEbZg5.js'),
     },
     {
         name: "Reflector",
@@ -7634,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-DEPuGTAZ.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-LPThzOok.js'),
     },
 ]);
 
@@ -8363,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-Duej2zkq.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-J1zZuhYY.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8504,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 = {
@@ -11937,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}`));
@@ -13411,7 +13563,7 @@ const ShadowsSetupProperties = ({ context: shadowLight }) => {
 };
 
 const SpotLightSetupProperties = ({ context: spotLight }) => {
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: spotLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Specular", component: Color3PropertyLine, target: spotLight, propertyKey: "specular" }), jsx(BoundProperty, { label: "Direction", component: Vector3PropertyLine, target: spotLight, propertyKey: "direction" }), jsx(BoundProperty, { label: "Position", component: Vector3PropertyLine, target: spotLight, propertyKey: "position" }), jsx(BoundProperty, { label: "Angle", component: SyncedSliderPropertyLine, target: spotLight, propertyKey: "angle", convertTo: Tools.ToDegrees, convertFrom: Tools.ToRadians, min: 0, max: 90, step: 0.1 }), jsx(BoundProperty, { label: "InnerAngle", component: SyncedSliderPropertyLine, target: spotLight, propertyKey: "innerAngle", convertTo: Tools.ToDegrees, convertFrom: Tools.ToRadians, min: 0, max: 90, step: 0.1 }), jsx(BoundProperty, { label: "Exponent", component: NumberInputPropertyLine, target: spotLight, propertyKey: "exponent" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: spotLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Specular", component: Color3PropertyLine, target: spotLight, propertyKey: "specular" }), jsx(BoundProperty, { label: "Direction", component: Vector3PropertyLine, target: spotLight, propertyKey: "direction" }), jsx(BoundProperty, { label: "Position", component: Vector3PropertyLine, target: spotLight, propertyKey: "position" }), jsx(BoundProperty, { label: "Angle", component: SyncedSliderPropertyLine, target: spotLight, propertyKey: "angle", convertTo: Tools.ToDegrees, convertFrom: Tools.ToRadians, min: 0, max: 90, step: 0.1 }), jsx(BoundProperty, { label: "InnerAngle", component: SyncedSliderPropertyLine, target: spotLight, propertyKey: "innerAngle", convertTo: Tools.ToDegrees, convertFrom: Tools.ToRadians, min: 0, max: 90, step: 0.1 }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: spotLight, propertyKey: "intensity" }), jsx(BoundProperty, { label: "Exponent", component: NumberInputPropertyLine, target: spotLight, propertyKey: "exponent" })] }));
 };
 
 const LightPropertiesServiceDefinition = {
@@ -14170,25 +14322,6 @@ const ComboBox = forwardRef((props, ref) => {
     return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { ref: ref, defaultOpen: props.defaultOpen, size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
 });
 
-/**
- * A hook that provides a transient state value and a "pulse" function to set it.
- * The transient value is meant to be consumed immediately after being set, and will be cleared on the next render.
- * @typeParam T The type of the transient value.
- * @returns A tuple containing the transient value and a function to "pulse" the state.
- */
-function useImpulse() {
-    const impulseRef = useRef(undefined);
-    const [, setVersion] = useState(0);
-    const pulse = useCallback((value) => {
-        impulseRef.current = value;
-        setVersion((v) => v + 1);
-    }, []);
-    // Consume the impulse value and clear it
-    const value = impulseRef.current;
-    impulseRef.current = undefined;
-    return [value, pulse];
-}
-
 const useStyles$j = makeStyles({
     linkDiv: {
         display: "flex",
@@ -14735,35 +14868,35 @@ const MaterialPropertiesServiceDefinition = {
             predicate: (entity) => entity instanceof OpenPBRMaterial,
             content: [
                 {
-                    section: "Base",
+                    section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialBaseProperties, { material: context }),
                 },
                 {
-                    section: "Specular",
+                    section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialSpecularProperties, { material: context }),
                 },
                 {
-                    section: "Transmission",
+                    section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialTransmissionProperties, { material: context }),
                 },
                 {
-                    section: "Coat",
+                    section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialCoatProperties, { material: context }),
                 },
                 {
-                    section: "Fuzz",
+                    section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialFuzzProperties, { material: context }),
                 },
                 {
-                    section: "Emission",
+                    section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialEmissionProperties, { material: context }),
                 },
                 {
-                    section: "Thin Film",
+                    section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialThinFilmProperties, { material: context }),
                 },
                 {
-                    section: "Geometry",
+                    section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialGeometryProperties, { material: context }),
                 },
             ],
@@ -14906,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);
         }
     }
@@ -14974,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);
@@ -15333,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) => {
@@ -17216,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 },
@@ -19850,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],
         });
@@ -19928,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: () => [],
@@ -19999,7 +20136,7 @@ const EffectLayerExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(LayerRegular, {}),
+            entityIcon: () => jsx(LayerRegular, { color: tokens.colorPaletteRedForeground2 }),
             getEntityAddedObservables: () => [scene.onNewEffectLayerAddedObservable],
             getEntityRemovedObservables: () => [scene.onEffectLayerRemovedObservable],
         });
@@ -20037,7 +20174,7 @@ const FrameGraphExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(FrameRegular, {}),
+            entityIcon: () => jsx(FrameRegular, { color: tokens.colorPaletteGreenForeground2 }),
             getEntityAddedObservables: () => [scene.onNewFrameGraphAddedObservable],
             getEntityRemovedObservables: () => [scene.onFrameGraphRemovedObservable],
         });
@@ -20169,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],
         });
@@ -20274,7 +20411,7 @@ const MaterialExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(MaterialIcon, {}),
+            entityIcon: () => jsx(MaterialIcon, { color: tokens.colorPaletteMarigoldForeground2 }),
             getEntityAddedObservables: () => [scene.onNewMaterialAddedObservable],
             getEntityRemovedObservables: () => [scene.onMaterialRemovedObservable],
         });
@@ -20356,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,
@@ -20457,6 +20594,7 @@ const NodeExplorerServiceDefinition = {
                 };
             },
         });
+        const getActiveCamera = () => (scene.frameGraph ? FindMainCamera(scene.frameGraph) : scene.activeCamera);
         const activeCameraCommandRegistration = sceneExplorerService.addEntityCommand({
             predicate: (entity) => entity instanceof Camera,
             order: 700 /* DefaultCommandsOrder.CameraActive */,
@@ -20469,15 +20607,28 @@ const NodeExplorerServiceDefinition = {
                 return {
                     type: "toggle",
                     displayName: "Activate and Attach Controls",
-                    icon: () => (scene.activeCamera === camera ? jsx(VideoFilled, {}) : jsx(VideoRegular, {})),
+                    icon: () => {
+                        return getActiveCamera() === camera ? jsx(VideoFilled, {}) : jsx(VideoRegular, {});
+                    },
                     get isEnabled() {
-                        return scene.activeCamera === camera;
+                        return getActiveCamera() === camera;
                     },
                     set isEnabled(enabled) {
-                        if (enabled && scene.activeCamera !== camera) {
-                            scene.activeCamera?.detachControl();
-                            scene.activeCamera = camera;
-                            camera.attachControl(true);
+                        const activeCamera = getActiveCamera();
+                        if (enabled && activeCamera !== camera) {
+                            activeCamera?.detachControl();
+                            if (scene.frameGraph) {
+                                const objectRenderer = FindMainObjectRenderer(scene.frameGraph);
+                                if (objectRenderer) {
+                                    objectRenderer.camera = camera;
+                                    onChangeObservable.notifyObservers(); // manual trigger, because scene.onActiveCameraChanged won't be triggered by the line above
+                                    camera.attachControl(true);
+                                }
+                            }
+                            else {
+                                scene.activeCamera = camera;
+                                camera.attachControl(true);
+                            }
                         }
                     },
                     onChange: onChangeObservable,
@@ -20608,7 +20759,7 @@ const ParticleSystemExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(DropRegular, {}),
+            entityIcon: () => jsx(DropRegular, { color: tokens.colorPaletteCranberryForeground2 }),
             getEntityAddedObservables: () => [scene.onNewParticleSystemAddedObservable],
             getEntityRemovedObservables: () => [scene.onParticleSystemRemovedObservable],
         });
@@ -20660,7 +20811,7 @@ const PostProcessExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(BlurRegular, {}),
+            entityIcon: () => jsx(BlurRegular, { color: tokens.colorPaletteRedForeground2 }),
             getEntityAddedObservables: () => [scene.onNewPostProcessAddedObservable],
             getEntityRemovedObservables: () => [scene.onPostProcessRemovedObservable],
         });
@@ -20692,7 +20843,7 @@ const RenderingPipelineExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(PipelineRegular, {}),
+            entityIcon: () => jsx(PipelineRegular, { color: tokens.colorPaletteRedForeground2 }),
             getEntityAddedObservables: () => [scene.postProcessRenderPipelineManager.onNewPipelineAddedObservable],
             getEntityRemovedObservables: () => [scene.postProcessRenderPipelineManager.onPipelineRemovedObservable],
         });
@@ -20734,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],
@@ -20795,7 +20946,7 @@ const SoundExplorerServiceDefinition = {
                     },
                 };
             },
-            entityIcon: () => jsx(SoundWaveCircleRegular, {}),
+            entityIcon: () => jsx(SoundWaveCircleRegular, { color: tokens.colorPaletteForestForeground2 }),
             getEntityAddedObservables: () => [soundAddedObservable],
             getEntityRemovedObservables: () => [soundRemovedObservable],
         });
@@ -20839,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],
         });
@@ -20911,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],
         });
@@ -20939,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" });
@@ -21631,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();
@@ -22185,7 +22342,7 @@ class Inspector {
         this.MarkMultipleLineContainerTitlesForHighlighting([title]);
     }
     static MarkMultipleLineContainerTitlesForHighlighting(titles) {
-        this._SectionHighlighter?.(titles);
+        this._OnMarkLineContainerObservable.notifyObservers(titles);
     }
     static PopupEmbed() {
         this._PopupToggler?.("right");
@@ -22209,6 +22366,13 @@ class Inspector {
         if (!scene || scene.isDisposed) {
             return;
         }
+        // Inspector setup is async, so we need to cache pending selection requests.
+        // Additionally, we manually track this (rather than relying on the observable's notifyIfTriggered property)
+        // for behavior backward compatibility.
+        let pendingSelection = null;
+        const pendingSelectionObserver = this.OnSelectionChangeObservable.add((entity) => {
+            pendingSelection = entity;
+        });
         let options = ConvertOptions(userOptions);
         const serviceDefinitions = [];
         const popupServiceDefinition = {
@@ -22242,6 +22406,13 @@ class Inspector {
                 const legacyObserver = this.OnSelectionChangeObservable.add((entity) => {
                     selectionService.selectedEntity = entity;
                 });
+                // If a selection was requested before async setup completed, apply it now.
+                if (pendingSelection) {
+                    selectionService.selectedEntity = pendingSelection;
+                    pendingSelection = null;
+                }
+                // Now the service is alive so we don't need to track pending selection requests.
+                pendingSelectionObserver.remove();
                 return {
                     dispose: () => {
                         selectionServiceObserver.remove();
@@ -22275,12 +22446,17 @@ class Inspector {
             friendlyName: "Section Highlighter Service (Backward Compatibility)",
             consumes: [PropertiesServiceIdentity],
             factory: (propertiesService) => {
-                this._SectionHighlighter = (sectionIds) => {
-                    propertiesService.highlightSections(sectionIds.map((id) => LegacyPropertiesSectionMapping[id] ?? id));
-                };
+                const markLineContainerObserver = this._OnMarkLineContainerObservable.add((sections) => {
+                    propertiesService.highlightSections(sections.map((id) => LegacyPropertiesSectionMapping[id] ?? id));
+                });
+                // Now the service is alive so we don't need to track pending highlight requests.
+                this._OnMarkLineContainerObservable.notifyIfTriggered = false;
+                this._OnMarkLineContainerObservable.cleanLastNotifiedState();
                 return {
                     dispose: () => {
-                        this._SectionHighlighter = null;
+                        // Service is being torn down, so start caching pending highlight requests again.
+                        markLineContainerObserver.remove();
+                        this._OnMarkLineContainerObservable.notifyIfTriggered = true;
                     },
                 };
             },
@@ -22330,10 +22506,10 @@ class Inspector {
 }
 Inspector._CurrentInstance = null;
 Inspector._PopupToggler = null;
-Inspector._SectionHighlighter = null;
 Inspector._SidePaneOpenCounter = null;
 Inspector.OnSelectionChangeObservable = new Observable();
 Inspector.OnPropertyChangedObservable = new Observable();
+Inspector._OnMarkLineContainerObservable = new Observable(undefined, true);
 
 var inspector = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -22642,5 +22818,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { useObservableCollection 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, useColor4Property as W, useQuaternionProperty as X, MakePropertyHook as Y, useInterceptObservable as Z, useEventfulState as _, useProperty as a, Pane as a$, useOrderedObservableCollection as a0, usePollingObservable as a1, useResource as a2, useAsyncResource as a3, useSetting as a4, useAngleConverters as a5, MakeTeachingMoment as a6, MakeDialogTeachingMoment as a7, MakePopoverTeachingMoment as a8, useThemeMode as a9, Color3GradientComponent as aA, Color4GradientComponent as aB, ColorStepGradientComponent as aC, InfoLabel as aD, MakeLazyComponent as aE, List as aF, MaterialSelector as aG, NodeSelector as aH, PositionedPopover as aI, SearchBar as aJ, SearchBox as aK, SkeletonSelector as aL, SpinButton as aM, Switch as aN, SyncedSliderInput as aO, Textarea as aP, TextInput as aQ, TextureSelector as aR, ToastProvider as aS, ToggleButton as aT, Tooltip as aU, UploadButton as aV, ChildWindow as aW, FileUploadLine as aX, FactorGradientList as aY, Color3GradientList as aZ, Color4GradientList as a_, useTheme as aa, InterceptFunction as ab, GetPropertyDescriptor as ac, IsPropertyReadonly as ad, InterceptProperty as ae, ObservableCollection as af, ConstructorFactory as ag, SelectionServiceDefinition as ah, SettingsStore as ai, ShowInspector as aj, useKeyListener as ak, useKeyState as al, useEventListener as am, AccordionSectionItem as an, Checkbox as ao, Collapse as ap, ColorPickerPopup as aq, InputHexField as ar, InputHsvField as as, ComboBox as at, DraggableLine as au, Dropdown as av, NumberDropdown as aw, StringDropdown as ax, EntitySelector as ay, FactorGradientComponent as az, ShellServiceIdentity as b, TextureUpload as b0, BooleanBadgePropertyLine as b1, Color3PropertyLine as b2, Color4PropertyLine as b3, ComboBoxPropertyLine as b4, HexPropertyLine as b5, LinkPropertyLine as b6, PropertyLine as b7, LineContainer as b8, PlaceholderPropertyLine as b9, StringifiedPropertyLine as ba, SwitchPropertyLine as bb, SyncedSliderPropertyLine as bc, TextAreaPropertyLine as bd, TextPropertyLine as be, RotationVectorPropertyLine as bf, QuaternionPropertyLine as bg, Vector2PropertyLine as bh, Vector4PropertyLine as bi, 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-BvYg0Psk.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