@babylonjs/inspector 9.2.1 → 9.3.0

package/lib/{index-DmfAhsIm.js → index-BaFR1FRV.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, useImperativeHandle, cloneElement, 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, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Switch as Switch$1, 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, useComboboxFilter, Combobox, Subtitle2, 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, WarningRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, PlugConnectedRegular, PlugDisconnectedRegular, 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, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+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, WarningRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, ArrowUploadRegular, ArrowBidirectionalUpDownFilled, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, PlugDisconnectedRegular, PlugConnectedRegular, PlugConnectedCheckmarkRegular, 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, BubbleMultipleRegular, 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';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
@@ -281,7 +281,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$Z = makeStyles({
+const useStyles$_ = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -362,7 +362,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$Z();
+    const styles = useStyles$_();
     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 })] }));
 }
 
@@ -1277,12 +1277,12 @@ function useAccordionSectionItemState(props) {
     // Debug: warn if itemId changes (should be stable)
     const prevItemIdRef = useRef(itemId);
     useEffect(() => {
-        if (prevItemIdRef.current !== itemId) {
+        if (accordionCtx && prevItemIdRef.current !== itemId) {
             Logger.Warn(`Accordion: The uniqueId "${itemId}" in section "${sectionCtx?.sectionId}" has changed from "${prevItemIdRef.current}". ` +
                 `Each item must have a unique, stable ID for pin/hide persistence to work correctly.`);
         }
         prevItemIdRef.current = itemId;
-    }, [itemId, sectionCtx?.sectionId]);
+    }, [accordionCtx, itemId, sectionCtx?.sectionId]);
     // Register item and detect duplicates (skip nested items, as children of other AccordionSectionItem should not participate in pin/hide/search).
     useEffect(() => {
         if (!accordionCtx || !itemUniqueId || isNested) {
@@ -1363,7 +1363,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$Y = makeStyles({
+const useStyles$Z = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -1455,7 +1455,7 @@ const useStyles$Y = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$Y();
+    const classes = useStyles$Z();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -1479,7 +1479,7 @@ const AccordionMenuBar = () => {
 const AccordionSectionBlock = (props) => {
     AccordionSectionBlock.displayName = "AccordionSectionBlock";
     const { children, sectionId } = props;
-    const classes = useStyles$Y();
+    const classes = useStyles$Z();
     const accordionCtx = useContext(AccordionContext);
     const { context: sectionContext, isEmpty } = useAccordionSectionBlockContext(props);
     if (accordionCtx) {
@@ -1499,7 +1499,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$Y();
+    const classes = useStyles$Z();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -1539,7 +1539,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$Y();
+    const classes = useStyles$Z();
     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" }) }) }));
 };
@@ -1550,7 +1550,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$Y();
+    const classes = useStyles$Z();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -1566,7 +1566,7 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$Y();
+    const classes = useStyles$Z();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
@@ -1574,7 +1574,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$Y();
+    const classes = useStyles$Z();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1671,7 +1671,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$X = makeStyles({
+const useStyles$Y = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1689,7 +1689,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$X();
+    const classes = useStyles$Y();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -1998,7 +1998,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$W = makeStyles({
+const useStyles$X = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2013,7 +2013,7 @@ const useStyles$W = makeStyles({
  * @returns The extensible accordion component.
  */
 function ExtensibleAccordion(props) {
-    const classes = useStyles$W();
+    const classes = useStyles$X();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -2138,7 +2138,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$V = makeStyles({
+const useStyles$W = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2151,7 +2151,7 @@ const useStyles$V = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$V();
+    const classes = useStyles$W();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -2422,7 +2422,7 @@ function useTheme(invert = false) {
 }
 
 // Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
-const useStyles$U = makeStyles({
+const useStyles$V = makeStyles({
     root: {
         scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
     },
@@ -2438,11 +2438,11 @@ const Theme = (props) => {
     // break any UI within the portal. Therefore, default to false.
     const { invert = false, applyStylesToPortals = false, className, ...rest } = props;
     const theme = useTheme(invert);
-    const classes = useStyles$U();
+    const classes = useStyles$V();
     return (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$T = makeStyles({
+const useStyles$U = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -2453,7 +2453,7 @@ const useStyles$T = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$T();
+    const classes = useStyles$U();
     return (jsx(TeachingPopover, { appearance: "brand", open: shouldDisplay, positioning: { positioningRef }, onOpenChange: onOpenChange, children: jsxs(TeachingPopoverSurface, { className: classes.extensionTeachingPopover, children: [jsx(TeachingPopoverHeader, { children: title }), jsx(TeachingPopoverBody, { children: description })] }) }));
 };
 
@@ -2945,7 +2945,7 @@ const RootComponentServiceIdentity = Symbol("RootComponent");
  * The unique identity symbol for the shell service.
  */
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$S = makeStyles({
+const useStyles$T = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -3158,14 +3158,14 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     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) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { verticalLocation, horizontalLocation, id, component: Component, displayName } = props;
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const title = typeof props.teachingMoment === "object" ? props.teachingMoment.title : (displayName ?? id);
@@ -3175,7 +3175,7 @@ const ToolbarItem = (props) => {
 // TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
 // This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
 const Toolbar = ({ location, components }) => {
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
     return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) })] })) }));
@@ -3185,7 +3185,7 @@ const SidePaneTab = (props) => {
     const { location, id, isSelected, isFirst, isLast, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, } = props;
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab, isFirst ? classes.firstTab : undefined, isLast ? classes.lastTab : undefined);
@@ -3197,7 +3197,7 @@ const SidePaneTab = (props) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems, initialCollapsed) {
-    const classes = useStyles$S();
+    const classes = useStyles$T();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -3394,7 +3394,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$S();
+                const classes = useStyles$T();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSetting(SidePaneDockOverridesSettingDescriptor);
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -3781,13 +3781,13 @@ function useImpulse() {
     return [value, pulse];
 }
 
-const useStyles$R = makeStyles({
+const useStyles$S = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$R();
+    const classes = useStyles$S();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -4227,7 +4227,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$Q = makeStyles({
+const useStyles$R = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4336,14 +4336,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$Q();
+    const classes = useStyles$R();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     return (jsx(FlatTreeItem, { className: classes.treeItem, value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, commandProviders, expandAll, collapseAll, isDropTarget, ...dropProps } = props;
-    const classes = useStyles$Q();
+    const classes = useStyles$R();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -4360,7 +4360,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll, isDragging, isDropTarget, ...dragProps } = props;
-    const classes = useStyles$Q();
+    const classes = useStyles$R();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -4476,7 +4476,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Tooltip$1, { content: name, relationship: "description", children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }) }, GetEntityId$1(entityItem.entity)) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$Q();
+    const classes = useStyles$R();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -6102,7 +6102,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$P = makeStyles({
+const useStyles$Q = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -6111,7 +6111,7 @@ const useStyles$P = makeStyles({
 });
 const CanvasGraph = (props) => {
     const { collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize } = props;
-    const classes = useStyles$P();
+    const classes = useStyles$Q();
     const canvasRef = useRef(null);
     useEffect(() => {
         if (!canvasRef.current) {
@@ -6188,7 +6188,7 @@ function EvaluateExpression(rawValue) {
         return NaN;
     }
 }
-const useStyles$O = makeStyles({
+const useStyles$P = makeStyles({
     icon: {
         "&:hover": {
             color: tokens.colorBrandForeground1,
@@ -6202,7 +6202,7 @@ const useStyles$O = makeStyles({
 const SpinButton = forwardRef((props, ref) => {
     SpinButton.displayName = "SpinButton2";
     const inputClasses = useInputStyles$1();
-    const classes = useStyles$O();
+    const classes = useStyles$P();
     const { size } = useContext(ToolContext);
     const { min, max } = props;
     const baseStep = props.step ?? 1;
@@ -6469,7 +6469,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$N = makeStyles({
+const useStyles$O = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -6484,7 +6484,7 @@ const useStyles$N = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
     const [internalOpen, setInternalOpen] = useState(false);
-    const classes = useStyles$N();
+    const classes = useStyles$O();
     const isControlled = controlledOpen !== undefined;
     const popoverOpen = isControlled ? controlledOpen : internalOpen;
     const handleOpenChange = (_, data) => {
@@ -6728,7 +6728,7 @@ const InputAlphaField = (props) => {
         } }));
 };
 
-const useStyles$M = makeStyles({
+const useStyles$N = makeStyles({
     sidebar: {
         display: "flex",
         flexDirection: "column",
@@ -6792,7 +6792,7 @@ const useStyles$M = makeStyles({
 });
 const PerformanceSidebar = (props) => {
     const { collector, onVisibleRangeChangedObservable } = props;
-    const classes = useStyles$M();
+    const classes = useStyles$N();
     // Map from id to IPerfMetadata information
     const [metadataMap, setMetadataMap] = useState();
     // Map from category to all the ids belonging to that category
@@ -6865,7 +6865,7 @@ const PerformanceSidebar = (props) => {
                     })] }, `category-${category || "version"}`))) }));
 };
 
-const useStyles$L = makeStyles({
+const useStyles$M = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -6894,7 +6894,7 @@ const useStyles$L = makeStyles({
 });
 const PerformanceViewer = (props) => {
     const { scene, layoutObservable, returnToLiveObservable, performanceCollector, initialGraphSize } = props;
-    const classes = useStyles$L();
+    const classes = useStyles$M();
     const [onVisibleRangeChangedObservable] = useState(() => new Observable());
     const onReturnToPlayheadClick = () => {
         returnToLiveObservable.notifyObservers();
@@ -7061,14 +7061,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value ?? "" }) }));
 };
 
-const useStyles$K = makeStyles({
+const useStyles$L = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$K();
+    const classes = useStyles$L();
     const scene = props.context;
     const engine = scene.getEngine();
     const pollingObservable = usePollingObservable(250);
@@ -7231,7 +7231,7 @@ const ToolsServiceDefinition = {
  */
 const ReactContextServiceIdentity = Symbol("ReactContextService");
 
-const useStyles$J = makeStyles({
+const useStyles$K = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -7243,7 +7243,7 @@ const useStyles$J = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$J();
+    const classes = useStyles$K();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -7401,7 +7401,7 @@ const SyncedSliderInput = (props) => {
     return (jsxs("div", { className: mergeClasses(classes.container, props.className), children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { className: getSliderClassName(), value: value, onChange: handleSliderChange, min: props.min, max: props.max, step: props.step, disabled: props.disabled, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: useCompactSizing ? classes.compactSpinButton : classes.spinButton, inputClassName: useCompactSizing ? classes.compactSpinButtonInput : classes.spinButtonInput, value: value, onChange: handleInputChange, step: props.step, disabled: props.disabled, disableDragButton: true })] })] }));
 };
 
-const useStyles$I = makeStyles({
+const useStyles$J = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -7413,7 +7413,7 @@ const useStyles$I = makeStyles({
  */
 const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const classes = useStyles$I();
+    const classes = useStyles$J();
     const { label, description, ...sliderProps } = props;
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 });
@@ -8301,12 +8301,17 @@ class ServiceContainer {
     }
 }
 
+/**
+ * The unique identity symbol for the toast service.
+ */
+const ToastServiceIdentity = Symbol("ToastService");
+
 const ExtensionManagerContext = createContext(undefined);
 function useExtensionManager() {
     return useContext(ExtensionManagerContext)?.extensionManager;
 }
 
-const useStyles$H = makeStyles({
+const useStyles$I = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -8325,7 +8330,7 @@ const ThemeSelectorServiceDefinition = {
             teachingMoment: false,
             order: -300,
             component: () => {
-                const classes = useStyles$H();
+                const classes = useStyles$I();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -8342,7 +8347,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$G = makeStyles({
+const useStyles$H = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8385,11 +8390,21 @@ function MakeModularTool(options) {
         settingsStore.writeSetting(ThemeModeSettingDescriptor, themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$G();
+        const classes = useStyles$H();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
         const [extensionInstallError, setExtensionInstallError] = useState();
+        const [toastHandle, setToastHandle] = useState(null);
+        const [toastQueue, setToastQueue] = useState([]);
+        useEffect(() => {
+            if (toastHandle && toastQueue.length > 0) {
+                for (const { message, options } of toastQueue) {
+                    toastHandle.showToast(message, options);
+                }
+                setToastQueue([]);
+            }
+        }, [toastHandle, toastQueue]);
         const [rootComponentService, setRootComponentService] = useState();
         const [contexts, updateContexts] = useReducer((state, action) => {
             switch (action.type) {
@@ -8430,6 +8445,16 @@ function MakeModularTool(options) {
                         },
                     }),
                 });
+                // Expose the toast service so non-React code (e.g. Observable callbacks) can show toasts.
+                await serviceContainer.addServiceAsync({
+                    friendlyName: "Toast Service",
+                    produces: [ToastServiceIdentity],
+                    factory: () => ({
+                        showToast: (message, options) => {
+                            setToastQueue((prev) => [...prev, { message, options }]);
+                        },
+                    }),
+                });
                 // Register the shell service (top level toolbar/side pane UI layout).
                 await serviceContainer.addServiceAsync(MakeShellServiceDefinition(options));
                 // Register a service that simply consumes the services we need before first render.
@@ -8452,7 +8477,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-CBQwBhYh.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DPHWDyzb.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8525,7 +8550,7 @@ function MakeModularTool(options) {
         else {
             // eslint-disable-next-line @typescript-eslint/naming-convention
             const Content = rootComponentService.rootComponent;
-            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(ToastProvider, { children: [jsx(Dialog, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => (jsx("li", { children: name }, name))) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }) }) }));
+            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(ExtensionManagerContext.Provider, { value: extensionManagerContext, children: jsx(Theme, { className: classes.app, children: jsxs(ToastProvider, { imperativeRef: setToastHandle, children: [jsx(Dialog, { open: !!requiredExtensions, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Required Extensions" }), jsxs(DialogContent, { children: ["Opening this URL requires the following extensions to be installed and enabled:", jsx("ul", { children: requiredExtensions?.map((name) => (jsx("li", { children: name }, name))) })] }), jsxs(DialogActions, { children: [jsx(Button$1, { appearance: "primary", onClick: onAcceptRequiredExtensions, children: "Install & Enable" }), jsx(Button$1, { appearance: "secondary", onClick: onRejectRequiredExtensions, children: "No Thanks" })] })] }) }) }), jsx(Dialog, { open: !!extensionInstallError, modalType: "alert", children: jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: jsxs("div", { className: classes.extensionErrorTitleDiv, children: ["Extension Install Error", jsx(ErrorCircleRegular, { className: classes.extensionErrorIcon })] }) }), jsx(DialogContent, { children: jsxs(List$1, { children: [jsx(ListItem, { children: jsx(Body1, { children: `Extension "${extensionInstallError?.extension.name}" failed to install and was removed.` }) }), jsx(ListItem, { children: jsx(Body1, { children: `${extensionInstallError?.error}` }) })] }) }), jsx(DialogActions, { children: jsx(Button$1, { appearance: "primary", onClick: onAcknowledgedExtensionInstallError, children: "Close" }) })] }) }) }), jsx(Suspense, { fallback: jsx(Spinner, { className: classes.spinner }), children: jsx(Content, {}) })] }) }) }) }) }));
         }
     };
     // Set the container element to be a flex container so that the tool can be displayed properly.
@@ -8568,14 +8593,14 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-C38aK2nP.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DJ1GVvH-.js'),
     },
     {
         name: "Reflector",
         description: "Connects to the Reflector Bridge for real-time scene synchronization with the Babylon.js Sandbox.",
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./reflectorService-Bs9E2OMh.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-Cd41l6Tr.js'),
     },
 ]);
 
@@ -8840,25 +8865,34 @@ function MakeInspectableBridgeServiceDefinition(options) {
             let ws = null;
             let reconnectTimer = null;
             let disposed = false;
+            let enabled = options.autoStart;
             let connected = false;
             const onConnectionStatusChanged = new Observable();
+            function notifyStatusChanged() {
+                onConnectionStatusChanged.notifyObservers();
+            }
             function setConnected(value) {
                 if (connected !== value) {
                     connected = value;
-                    onConnectionStatusChanged.notifyObservers(value);
+                    notifyStatusChanged();
                 }
             }
             function sendToBridge(message) {
                 ws?.send(JSON.stringify(message));
             }
             function connect() {
-                if (disposed) {
+                if (disposed || !enabled) {
                     return;
                 }
                 try {
+                    // NOTE: The browser unconditionally logs a console error for failed WebSocket
+                    // connections at the network level. This cannot be suppressed from JavaScript.
                     ws = new WebSocket(`ws://127.0.0.1:${options.port}`);
                 }
                 catch {
+                    ws = null;
+                    setConnected(false);
+                    Logger.Warn(`InspectableBridgeService: Failed to create WebSocket connection on port ${options.port}.`);
                     scheduleReconnect();
                     return;
                 }
@@ -8884,8 +8918,20 @@ function MakeInspectableBridgeServiceDefinition(options) {
                     // onclose will fire after onerror, which handles reconnection.
                 };
             }
+            function disconnect() {
+                if (reconnectTimer !== null) {
+                    clearTimeout(reconnectTimer);
+                    reconnectTimer = null;
+                }
+                if (ws) {
+                    ws.onclose = null;
+                    ws.close();
+                    ws = null;
+                }
+                setConnected(false);
+            }
             function scheduleReconnect() {
-                if (disposed || reconnectTimer !== null) {
+                if (disposed || !enabled || reconnectTimer !== null) {
                     return;
                 }
                 reconnectTimer = setTimeout(() => {
@@ -8908,6 +8954,14 @@ function MakeInspectableBridgeServiceDefinition(options) {
                         });
                         break;
                     }
+                    case "getInfo": {
+                        sendToBridge({
+                            type: "infoResponse",
+                            requestId: message.requestId,
+                            name: options.name,
+                        });
+                        break;
+                    }
                     case "execCommand": {
                         const command = commands.get(message.commandId);
                         if (!command) {
@@ -8937,8 +8991,9 @@ function MakeInspectableBridgeServiceDefinition(options) {
                     }
                 }
             }
-            // Initiate connection.
-            connect();
+            if (enabled) {
+                connect();
+            }
             const registry = {
                 addCommand(descriptor) {
                     if (commands.has(descriptor.id)) {
@@ -8951,24 +9006,31 @@ function MakeInspectableBridgeServiceDefinition(options) {
                         },
                     };
                 },
+                get isEnabled() {
+                    return enabled;
+                },
+                set isEnabled(value) {
+                    if (enabled !== value) {
+                        enabled = value;
+                        if (enabled) {
+                            connect();
+                        }
+                        else {
+                            disconnect();
+                        }
+                        notifyStatusChanged();
+                    }
+                },
                 get isConnected() {
                     return connected;
                 },
                 onConnectionStatusChanged,
                 dispose: () => {
                     disposed = true;
-                    if (reconnectTimer !== null) {
-                        clearTimeout(reconnectTimer);
-                        reconnectTimer = null;
-                    }
+                    enabled = false;
+                    disconnect();
                     commands.clear();
-                    setConnected(false);
                     onConnectionStatusChanged.clear();
-                    if (ws) {
-                        ws.onclose = null;
-                        ws.close();
-                        ws = null;
-                    }
                 },
             };
             return registry;
@@ -9377,11 +9439,11 @@ const InspectableStates = new Map();
 function _StartInspectable(scene, options) {
     let state = InspectableStates.get(scene);
     if (!state) {
-        const port = options?.port ?? DefaultPort;
-        const name = options?.name ?? (typeof document !== "undefined" ? document.title : "Babylon.js Scene");
         const serviceContainer = new ServiceContainer("InspectableContainer");
+        let fullyDisposed = false;
         const fullyDispose = () => {
             InspectableStates.delete(scene);
+            fullyDisposed = true;
             serviceContainer.dispose();
             sceneDisposeObserver.remove();
         };
@@ -9396,12 +9458,18 @@ function _StartInspectable(scene, options) {
         };
         const readyPromise = (async () => {
             await serviceContainer.addServicesAsync(sceneContextServiceDefinition, MakeInspectableBridgeServiceDefinition({
-                port,
-                name,
+                port: options?.port ?? DefaultPort,
+                get name() {
+                    return options?.name ?? (typeof document !== "undefined" ? document.title : "Babylon.js Scene");
+                },
+                autoStart: options?.autoStart ?? false,
             }), EntityQueryServiceDefinition, ScreenshotCommandServiceDefinition, ShaderCommandServiceDefinition, StatsCommandServiceDefinition, PerfTraceCommandServiceDefinition);
         })();
         state = {
             refCount: 0,
+            get fullyDisposed() {
+                return fullyDisposed;
+            },
             serviceContainer,
             sceneDisposeObserver: { remove: () => { } },
             fullyDispose,
@@ -9454,7 +9522,7 @@ function _StartInspectable(scene, options) {
     let disposed = false;
     const token = {
         get isDisposed() {
-            return disposed;
+            return disposed || owningState.fullyDisposed;
         },
         get serviceContainer() {
             return serviceContainer;
@@ -9530,7 +9598,7 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$F = makeStyles({
+const useStyles$G = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -9542,7 +9610,7 @@ const useStyles$F = makeStyles({
  */
 const TextInputPropertyLine = (props) => {
     TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    const classes = useStyles$F();
+    const classes = useStyles$G();
     return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 /**
@@ -9553,7 +9621,7 @@ const TextInputPropertyLine = (props) => {
  */
 const NumberInputPropertyLine = (props) => {
     NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    const classes = useStyles$F();
+    const classes = useStyles$G();
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
@@ -9684,6 +9752,14 @@ const LegacyInspectableObjectPropertiesServiceDefinition = {
     },
 };
 
+const DocUrl = "https://www.npmjs.com/package/@babylonjs/inspector#inspector-cli";
+const useStyles$F = makeStyles({
+    tooltipContent: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalXS,
+    },
+});
 const CliConnectionStatusServiceDefinition = {
     friendlyName: "CLI Connection Status",
     consumes: [ShellServiceIdentity, CliConnectionStatusIdentity],
@@ -9695,9 +9771,22 @@ const CliConnectionStatusServiceDefinition = {
             teachingMoment: false,
             order: 0 /* DefaultToolbarItemOrder.CliStatus */,
             component: () => {
+                const classes = useStyles$F();
+                const isEnabled = useObservableState(() => cliConnectionStatus.isEnabled, cliConnectionStatus.onConnectionStatusChanged);
                 const isConnected = useObservableState(() => cliConnectionStatus.isConnected, cliConnectionStatus.onConnectionStatusChanged);
                 const { showToast } = useToast();
                 const isFirstRender = useRef(true);
+                const [connectingIconToggle, setConnectingIconToggle] = useState(false);
+                const connecting = isEnabled && !isConnected;
+                useEffect(() => {
+                    if (!connecting) {
+                        return;
+                    }
+                    const interval = setInterval(() => {
+                        setConnectingIconToggle((prev) => !prev);
+                    }, 700);
+                    return () => clearInterval(interval);
+                }, [connecting]);
                 useEffect(() => {
                     if (isFirstRender.current) {
                         isFirstRender.current = false;
@@ -9710,8 +9799,25 @@ const CliConnectionStatusServiceDefinition = {
                         showToast("Inspector bridge disconnected.", { intent: "warning" });
                     }
                 }, [isConnected, showToast]);
-                // Using raw Fluent Button to pass color directly to the icon.
-                return (jsx(Tooltip, { content: isConnected ? "Connected to Inspector CLI Bridge" : "Disconnected from Inspector CLI Bridge", children: jsx(Button$1, { appearance: "subtle", icon: isConnected ? (jsx(PlugConnectedRegular, { color: tokens.colorPaletteGreenForeground2 })) : (jsx(PlugDisconnectedRegular, { color: tokens.colorPaletteRedForeground2 })), onClick: () => window.open("https://www.npmjs.com/package/@babylonjs/inspector", "_blank") }) }));
+                let icon;
+                let statusText;
+                if (!isEnabled) {
+                    icon = jsx(PlugDisconnectedRegular, { color: tokens.colorNeutralForeground4 });
+                    statusText = "Inspector CLI bridge disabled — click to connect";
+                }
+                else if (!isConnected) {
+                    icon = connectingIconToggle ? (jsx(PlugConnectedRegular, { color: tokens.colorPaletteYellowForeground2 })) : (jsx(PlugDisconnectedRegular, { color: tokens.colorPaletteYellowForeground2 }));
+                    statusText = "Connecting to Inspector CLI bridge — click to disconnect";
+                }
+                else {
+                    icon = jsx(PlugConnectedCheckmarkRegular, { color: tokens.colorPaletteGreenForeground2 });
+                    statusText = "Connected to Inspector CLI bridge — click to disconnect";
+                }
+                const tooltipContent = (jsxs("div", { className: classes.tooltipContent, children: [jsx(Body1, { children: statusText }), jsx(Link, { url: DocUrl, value: "Inspector CLI documentation" })] }));
+                // Using raw Fluent Button for custom icon coloring per connection state.
+                return (jsx(Tooltip, { content: tooltipContent, children: jsx(Button$1, { appearance: "subtle", "aria-label": statusText, icon: icon, onClick: () => {
+                            cliConnectionStatus.isEnabled = !cliConnectionStatus.isEnabled;
+                        } }) }));
             },
         });
     },
@@ -18079,7 +18185,7 @@ const PhysicsPropertiesServiceDefinition = {
  */
 const PostProcessProperties = (props) => {
     const { postProcess } = props;
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Width", description: "The width of the post process", value: postProcess.width, units: "px" }), jsx(StringifiedPropertyLine, { label: "Height", description: "The height of the post process", value: postProcess.height, units: "px" }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Auto Clear", target: postProcess, propertyKey: "autoClear" }), postProcess.clearColor && jsx(BoundProperty, { component: Color4PropertyLine, label: "Clear Color", target: postProcess, propertyKey: "clearColor" }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Pixel Perfect", target: postProcess, propertyKey: "enablePixelPerfectMode" }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Fullscreen Viewport", target: postProcess, propertyKey: "forceFullscreenViewport" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Samples", target: postProcess, propertyKey: "samples", min: 1, max: 8, step: 1 })] }));
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Width", description: "The width of the post process", value: postProcess.width, units: "px" }), jsx(StringifiedPropertyLine, { label: "Height", description: "The height of the post process", value: postProcess.height, units: "px" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto Clear", target: postProcess, propertyKey: "autoClear" }), postProcess.clearColor && jsx(BoundProperty, { component: Color4PropertyLine, label: "Clear Color", target: postProcess, propertyKey: "clearColor" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Pixel Perfect", target: postProcess, propertyKey: "enablePixelPerfectMode" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Fullscreen Viewport", target: postProcess, propertyKey: "forceFullscreenViewport" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Samples", target: postProcess, propertyKey: "samples", min: 1, max: 8, step: 1 })] }));
 };
 
 const PostProcessPropertiesServiceDefinition = {
@@ -22727,23 +22833,68 @@ const CoordinateSystemModeOptions = [
     { label: "Right Handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED },
 ];
 const GLTFLoaderOptionsTool = ({ loaderOptions }) => {
-    return (jsx(PropertyLine, { label: "Loader Options", expandByDefault: false, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always Compute Bounding Box", target: loaderOptions, propertyKey: "alwaysComputeBoundingBox", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeBoundingBox }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always Compute Skeleton Root Node", target: loaderOptions, propertyKey: "alwaysComputeSkeletonRootNode", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeSkeletonRootNode }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Animation Start Mode", options: AnimationStartModeOptions, target: loaderOptions, propertyKey: "animationStartMode", nullable: true, defaultValue: LoaderOptionDefaults.animationStartMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Capture Performance Counters", target: loaderOptions, propertyKey: "capturePerformanceCounters", nullable: true, defaultValue: LoaderOptionDefaults.capturePerformanceCounters }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile Materials", target: loaderOptions, propertyKey: "compileMaterials", nullable: true, defaultValue: LoaderOptionDefaults.compileMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile Shadow Generators", target: loaderOptions, propertyKey: "compileShadowGenerators", nullable: true, defaultValue: LoaderOptionDefaults.compileShadowGenerators }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Coordinate System", options: CoordinateSystemModeOptions, target: loaderOptions, propertyKey: "coordinateSystemMode", nullable: true, defaultValue: LoaderOptionDefaults.coordinateSystemMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Create Instances", target: loaderOptions, propertyKey: "createInstances", nullable: true, defaultValue: LoaderOptionDefaults.createInstances }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Don't Use Transmission Helper", target: loaderOptions, propertyKey: "dontUseTransmissionHelper", nullable: true, defaultValue: LoaderOptionDefaults.dontUseTransmissionHelper }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Logging", target: loaderOptions, propertyKey: "loggingEnabled", nullable: true, defaultValue: LoaderOptionDefaults.loggingEnabled }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load All Materials", target: loaderOptions, propertyKey: "loadAllMaterials", nullable: true, defaultValue: LoaderOptionDefaults.loadAllMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Morph Targets", target: loaderOptions, propertyKey: "loadMorphTargets", nullable: true, defaultValue: LoaderOptionDefaults.loadMorphTargets }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Node Animations", target: loaderOptions, propertyKey: "loadNodeAnimations", nullable: true, defaultValue: LoaderOptionDefaults.loadNodeAnimations }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Only Materials", target: loaderOptions, propertyKey: "loadOnlyMaterials", nullable: true, defaultValue: LoaderOptionDefaults.loadOnlyMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Skins", target: loaderOptions, propertyKey: "loadSkins", nullable: true, defaultValue: LoaderOptionDefaults.loadSkins }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Skip Materials", target: loaderOptions, propertyKey: "skipMaterials", nullable: true, defaultValue: LoaderOptionDefaults.skipMaterials }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Target FPS", target: loaderOptions, propertyKey: "targetFps", min: 1, max: 120, step: 1, nullable: true, defaultValue: LoaderOptionDefaults.targetFps }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Transparency As Coverage", target: loaderOptions, propertyKey: "transparencyAsCoverage", nullable: true, defaultValue: LoaderOptionDefaults.transparencyAsCoverage }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Clip Plane", target: loaderOptions, propertyKey: "useClipPlane", nullable: true, defaultValue: LoaderOptionDefaults.useClipPlane }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use glTF Texture Names", target: loaderOptions, propertyKey: "useGltfTextureNames", nullable: true, defaultValue: LoaderOptionDefaults.useGltfTextureNames }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use OpenPBR", target: loaderOptions, propertyKey: "useOpenPBR", nullable: true, defaultValue: LoaderOptionDefaults.useOpenPBR }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Range Requests", target: loaderOptions, propertyKey: "useRangeRequests", nullable: true, defaultValue: LoaderOptionDefaults.useRangeRequests }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use sRGB Buffers", target: loaderOptions, propertyKey: "useSRGBBuffers", nullable: true, defaultValue: LoaderOptionDefaults.useSRGBBuffers })] }) }));
+    const resetLoaderOptions = useCallback(() => {
+        for (const key of Object.keys(loaderOptions)) {
+            loaderOptions[key] = null;
+        }
+    }, [loaderOptions]);
+    return (jsx(PropertyLine, { label: "Loader Options", expandByDefault: false, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always Compute Bounding Box", target: loaderOptions, propertyKey: "alwaysComputeBoundingBox", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeBoundingBox }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always Compute Skeleton Root Node", target: loaderOptions, propertyKey: "alwaysComputeSkeletonRootNode", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeSkeletonRootNode }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Animation Start Mode", options: AnimationStartModeOptions, target: loaderOptions, propertyKey: "animationStartMode", nullable: true, defaultValue: LoaderOptionDefaults.animationStartMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Capture Performance Counters", target: loaderOptions, propertyKey: "capturePerformanceCounters", nullable: true, defaultValue: LoaderOptionDefaults.capturePerformanceCounters }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile Materials", target: loaderOptions, propertyKey: "compileMaterials", nullable: true, defaultValue: LoaderOptionDefaults.compileMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile Shadow Generators", target: loaderOptions, propertyKey: "compileShadowGenerators", nullable: true, defaultValue: LoaderOptionDefaults.compileShadowGenerators }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Coordinate System", options: CoordinateSystemModeOptions, target: loaderOptions, propertyKey: "coordinateSystemMode", nullable: true, defaultValue: LoaderOptionDefaults.coordinateSystemMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Create Instances", target: loaderOptions, propertyKey: "createInstances", nullable: true, defaultValue: LoaderOptionDefaults.createInstances }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Don't Use Transmission Helper", target: loaderOptions, propertyKey: "dontUseTransmissionHelper", nullable: true, defaultValue: LoaderOptionDefaults.dontUseTransmissionHelper }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable Logging", target: loaderOptions, propertyKey: "loggingEnabled", nullable: true, defaultValue: LoaderOptionDefaults.loggingEnabled }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load All Materials", target: loaderOptions, propertyKey: "loadAllMaterials", nullable: true, defaultValue: LoaderOptionDefaults.loadAllMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Morph Targets", target: loaderOptions, propertyKey: "loadMorphTargets", nullable: true, defaultValue: LoaderOptionDefaults.loadMorphTargets }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Node Animations", target: loaderOptions, propertyKey: "loadNodeAnimations", nullable: true, defaultValue: LoaderOptionDefaults.loadNodeAnimations }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Only Materials", target: loaderOptions, propertyKey: "loadOnlyMaterials", nullable: true, defaultValue: LoaderOptionDefaults.loadOnlyMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load Skins", target: loaderOptions, propertyKey: "loadSkins", nullable: true, defaultValue: LoaderOptionDefaults.loadSkins }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Skip Materials", target: loaderOptions, propertyKey: "skipMaterials", nullable: true, defaultValue: LoaderOptionDefaults.skipMaterials }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Target FPS", target: loaderOptions, propertyKey: "targetFps", min: 1, max: 120, step: 1, nullable: true, defaultValue: LoaderOptionDefaults.targetFps }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Transparency As Coverage", target: loaderOptions, propertyKey: "transparencyAsCoverage", nullable: true, defaultValue: LoaderOptionDefaults.transparencyAsCoverage }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Clip Plane", target: loaderOptions, propertyKey: "useClipPlane", nullable: true, defaultValue: LoaderOptionDefaults.useClipPlane }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use glTF Texture Names", target: loaderOptions, propertyKey: "useGltfTextureNames", nullable: true, defaultValue: LoaderOptionDefaults.useGltfTextureNames }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use OpenPBR", target: loaderOptions, propertyKey: "useOpenPBR", nullable: true, defaultValue: LoaderOptionDefaults.useOpenPBR }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Range Requests", target: loaderOptions, propertyKey: "useRangeRequests", nullable: true, defaultValue: LoaderOptionDefaults.useRangeRequests }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use sRGB Buffers", target: loaderOptions, propertyKey: "useSRGBBuffers", nullable: true, defaultValue: LoaderOptionDefaults.useSRGBBuffers }), jsx(ButtonLine, { label: "Reset to Defaults", icon: ArrowResetRegular, onClick: resetLoaderOptions })] }) }));
 };
 const GLTFExtensionOptionsTool = ({ extensionOptions }) => {
-    return (jsx(PropertyLine, { label: "Extension Options", expandByDefault: false, expandedContent: jsx(Fragment, { children: Object.entries(extensionOptions)
-                .sort(([a], [b]) => a.localeCompare(b))
-                .map(([extensionName, options]) => {
-                return (jsx(BoundProperty, { component: SwitchPropertyLine, label: extensionName, target: options, propertyKey: "enabled", nullable: true, defaultValue: true, expandedContent: (extensionName === "MSFT_lod" && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Maximum LODs", target: extensionOptions[extensionName], propertyKey: "maxLODsToLoad", min: 1, max: 10, step: 1, nullable: true, defaultValue: ExtensionOptionDefaults.MSFT_lod.maxLODsToLoad }, extensionName + "_maxLODsToLoad"))) ||
-                        undefined }, extensionName));
-            }) }) }));
+    const resetExtensionOptions = useCallback(() => {
+        for (const options of Object.values(extensionOptions)) {
+            for (const key of Object.keys(options)) {
+                options[key] = null;
+            }
+        }
+    }, [extensionOptions]);
+    return (jsx(PropertyLine, { label: "Extension Options", expandByDefault: false, expandedContent: jsxs(Fragment, { children: [Object.entries(extensionOptions)
+                    .sort(([a], [b]) => a.localeCompare(b))
+                    .map(([extensionName, options]) => {
+                    return (jsx(BoundProperty, { component: SwitchPropertyLine, label: extensionName, target: options, propertyKey: "enabled", nullable: true, defaultValue: true, expandedContent: (extensionName === "MSFT_lod" && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Maximum LODs", target: extensionOptions[extensionName], propertyKey: "maxLODsToLoad", min: 1, max: 10, step: 1, nullable: true, defaultValue: ExtensionOptionDefaults.MSFT_lod.maxLODsToLoad }, extensionName + "_maxLODsToLoad"))) ||
+                            undefined }, extensionName));
+                }), jsx(ButtonLine, { label: "Reset to Defaults", icon: ArrowResetRegular, onClick: resetExtensionOptions })] }) }));
 };
 
+const LoaderOptionsSetting = {
+    key: "glTFLoaderOptions",
+    defaultValue: {},
+};
+const ExtensionOptionsSetting = {
+    key: "glTFExtensionOptions",
+    defaultValue: {},
+};
+function CreatePersistingProxy(target, settingsStore, descriptor) {
+    return new Proxy(target, {
+        set(obj, prop, value) {
+            const result = Reflect.set(obj, prop, value);
+            settingsStore.writeSetting(descriptor, { ...obj });
+            return result;
+        },
+    });
+}
+function HasNonNullValues(obj) {
+    return Object.values(obj).some((v) => v !== null);
+}
+const OverridesWarning = (props) => {
+    const { loaderOptions, extensionOptions } = props;
+    useSetting(LoaderOptionsSetting);
+    useSetting(ExtensionOptionsSetting);
+    const hasLoaderOverrides = HasNonNullValues(loaderOptions);
+    const hasExtensionOverrides = Object.values(extensionOptions).some((opts) => HasNonNullValues(opts));
+    return (jsx(Collapse, { visible: hasLoaderOverrides || hasExtensionOverrides, children: jsx(MessageBar, { intent: "warning", message: "Loader option overrides are enabled and will persist across refreshes until disabled or reset." }) }));
+};
 const GLTFLoaderOptionsServiceDefinition = {
     friendlyName: "GLTF Loader Options",
-    consumes: [ToolsServiceIdentity],
-    factory: (toolsService) => {
+    consumes: [ToolsServiceIdentity, SettingsStoreIdentity, ToastServiceIdentity],
+    factory: (toolsService, settingsStore, toastService) => {
         // Current loader options with nullable properties (null means "don't override the options coming in with load calls")
-        const currentLoaderOptions = Object.fromEntries(Object.keys(LoaderOptionDefaults).map((key) => [key, null]));
+        let currentLoaderOptions = Object.fromEntries(Object.keys(LoaderOptionDefaults).map((key) => [key, null]));
+        // Hydrate loader options from persisted settings
+        const persistedLoaderOptions = settingsStore.readSetting(LoaderOptionsSetting);
+        Object.assign(currentLoaderOptions, persistedLoaderOptions);
+        // Wrap in a proxy so property writes from the UI are automatically persisted
+        currentLoaderOptions = CreatePersistingProxy(currentLoaderOptions, settingsStore, LoaderOptionsSetting);
         // Build extension options dynamically from the registered extensions.
         // Every extension gets an 'enabled' toggle; extensions in ExtensionOptionDefaults also get their extra properties.
         const currentExtensionOptions = {};
@@ -22752,22 +22903,50 @@ const GLTFLoaderOptionsServiceDefinition = {
             const extraNulls = defaults ? Object.fromEntries(Object.keys(defaults).map((key) => [key, null])) : {};
             currentExtensionOptions[extName] = { enabled: null, ...extraNulls };
         }
+        // Hydrate extension options from persisted settings, only for extensions that are still registered
+        const persistedExtensionOptions = settingsStore.readSetting(ExtensionOptionsSetting);
+        for (const [extName, persistedOptions] of Object.entries(persistedExtensionOptions)) {
+            if (currentExtensionOptions[extName] && persistedOptions) {
+                Object.assign(currentExtensionOptions[extName], persistedOptions);
+            }
+        }
+        // Wrap each extension's options object in a proxy that persists the full extension options map on write
+        for (const extName of Object.keys(currentExtensionOptions)) {
+            currentExtensionOptions[extName] = new Proxy(currentExtensionOptions[extName], {
+                set(obj, prop, value) {
+                    const result = Reflect.set(obj, prop, value);
+                    settingsStore.writeSetting(ExtensionOptionsSetting, { ...currentExtensionOptions });
+                    return result;
+                },
+            });
+        }
         // Subscribe to plugin activation
         const pluginObserver = SceneLoader.OnPluginActivatedObservable.add((plugin) => {
             if (plugin.name === "gltf") {
                 const loader = plugin;
                 // Apply loader settings (filter out null values to not override options coming in with load calls)
                 const nonNullLoaderOptions = Object.fromEntries(Object.entries(currentLoaderOptions).filter(([_, v]) => v !== null));
+                const hasLoaderOverrides = Object.keys(nonNullLoaderOptions).length > 0;
                 Object.assign(loader, nonNullLoaderOptions);
+                let hasExtensionOverrides = false;
                 // Subscribe to extension loading
                 loader.onExtensionLoadedObservable.add((extension) => {
                     const extensionOptions = currentExtensionOptions[extension.name];
                     if (extensionOptions) {
                         // Apply extension settings (filter out null values to not override options coming in with load calls)
                         const nonNullExtOptions = Object.fromEntries(Object.entries(extensionOptions).filter(([_, v]) => v !== null));
+                        if (Object.keys(nonNullExtOptions).length > 0) {
+                            hasExtensionOverrides = true;
+                        }
                         Object.assign(extension, nonNullExtOptions);
                     }
                 });
+                // Show a toast after all extensions have loaded if any overrides were applied
+                loader.onCompleteObservable.addOnce(() => {
+                    if (hasLoaderOverrides || hasExtensionOverrides) {
+                        toastService.showToast("Applied glTF loader option overrides");
+                    }
+                });
             }
         });
         const loaderToolsRegistration = toolsService.addSectionContent({
@@ -22775,7 +22954,7 @@ const GLTFLoaderOptionsServiceDefinition = {
             section: "GLTF Loader",
             order: 50,
             component: () => {
-                return (jsxs(Fragment, { children: [jsx(MessageBar, { intent: "info", message: "Reload the file for changes to take effect" }), jsx(GLTFLoaderOptionsTool, { loaderOptions: currentLoaderOptions }), jsx(GLTFExtensionOptionsTool, { extensionOptions: currentExtensionOptions })] }));
+                return (jsxs(Fragment, { children: [jsx(MessageBar, { intent: "info", message: "Reload the file for changes to take effect" }), jsx(OverridesWarning, { loaderOptions: currentLoaderOptions, extensionOptions: currentExtensionOptions }), jsx(GLTFLoaderOptionsTool, { loaderOptions: currentLoaderOptions }), jsx(GLTFExtensionOptionsTool, { extensionOptions: currentExtensionOptions })] }));
             },
         });
         return {
@@ -24073,4 +24252,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { GizmoServiceIdentity as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorPickerPopup as D, ColorStepGradientComponent as E, ComboBox as F, ComboBoxPropertyLine as G, ConstructorFactory as H, ConvertOptions as I, DebugServiceIdentity as J, DetachDebugLayer as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DraggableLine as O, Popover as P, Dropdown as Q, EntitySelector as R, ShellServiceIdentity as S, TextInputPropertyLine as T, ErrorBoundary as U, Vector3PropertyLine as V, ExtensibleAccordion as W, FactorGradientComponent as X, FactorGradientList as Y, FileUploadLine as Z, GetPropertyDescriptor as _, useToast as a, ToastProvider as a$, HexPropertyLine as a0, InfoLabel as a1, InputHexField as a2, InputHsvField as a3, InspectableCommandRegistryIdentity as a4, Inspector as a5, InterceptFunction as a6, InterceptProperty as a7, IsPropertyReadonly as a8, LineContainer as a9, SelectionServiceDefinition as aA, SettingsServiceIdentity as aB, SettingsStore as aC, SettingsStoreIdentity as aD, ShowInspector as aE, SidePaneContainer as aF, SkeletonSelector as aG, Slider as aH, SpinButton as aI, StartInspectable as aJ, StatsServiceIdentity as aK, StringDropdown as aL, StringDropdownPropertyLine as aM, StringifiedPropertyLine as aN, Switch as aO, SwitchPropertyLine as aP, SyncedSliderInput as aQ, SyncedSliderPropertyLine as aR, TeachingMoment as aS, TextAreaPropertyLine as aT, TextInput as aU, TextPropertyLine as aV, Textarea as aW, TextureSelector as aX, TextureUpload as aY, Theme as aZ, ThemeServiceIdentity as a_, LinkPropertyLine as aa, LinkToEntityPropertyLine as ab, List as ac, MakeDialogTeachingMoment as ad, MakeLazyComponent as ae, MakeModularTool as af, MakePopoverTeachingMoment as ag, MakePropertyHook as ah, MakeTeachingMoment as ai, MaterialSelector as aj, NodeSelector as ak, NumberDropdown as al, NumberDropdownPropertyLine as am, ObservableCollection as an, Pane as ao, PlaceholderPropertyLine as ap, PositionedPopover as aq, PropertiesServiceIdentity as ar, Property as as, PropertyContext as at, PropertyLine as au, QuaternionPropertyLine as av, RotationVectorPropertyLine as aw, SceneExplorerServiceIdentity as ax, SearchBar as ay, SearchBox as az, useInterceptObservable as b, ToggleButton as b0, Tooltip as b1, UploadButton as b2, Vector2PropertyLine as b3, Vector4PropertyLine as b4, WatcherServiceIdentity as b5, useAngleConverters as b6, useAsyncResource as b7, useColor3Property as b8, useColor4Property as b9, useEventListener as ba, useEventfulState as bb, useKeyListener as bc, useKeyState as bd, useObservableCollection as be, useOrderedObservableCollection as bf, usePollingObservable as bg, usePropertyChangedNotifier as bh, useQuaternionProperty as bi, useResource as bj, useTheme as bk, useThemeMode as bl, useVector3Property as bm, LinkToEntity as c, SpinButtonPropertyLine as d, useProperty as e, SceneContextIdentity as f, SelectionServiceIdentity as g, useObservableState as h, AccordionSection as i, ButtonLine as j, ToolsServiceIdentity as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BuiltInsExtensionFeed as p, Checkbox as q, ChildWindow as r, Collapse as s, Color3GradientComponent as t, useExtensionManager as u, Color3GradientList as v, Color3PropertyLine as w, Color4GradientComponent as x, Color4GradientList as y, Color4PropertyLine as z };
-//# sourceMappingURL=index-DmfAhsIm.js.map
+//# sourceMappingURL=index-BaFR1FRV.js.map