@babylonjs/inspector 9.2.0 → 9.2.2

package/lib/{index-FWuITINA.js → index-DB_fpb1t.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, 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) => {
@@ -1936,25 +1936,6 @@ function useSettingsStore() {
     return useContext(SettingsStoreContext);
 }
 
-// These are all "global" settings that aren't produced/owned by a specific service,
-// so we just add them by default directly in the SettingsService.
-const CompactModeSettingDescriptor = {
-    key: "CompactMode",
-    defaultValue: !matchMedia("(pointer: coarse)").matches,
-};
-const UseDegreesSettingDescriptor = {
-    key: "UseDegrees",
-    defaultValue: true,
-};
-const UseEulerSettingDescriptor = {
-    key: "UseEuler",
-    defaultValue: true,
-};
-const DisableCopySettingDescriptor = {
-    key: "DisableCopy",
-    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.
@@ -1990,35 +1971,15 @@ function useSetting(descriptor) {
     }
     return [value, setValue, resetValue];
 }
-const RadiansToDegrees = 180 / Math.PI;
-function WrapAngle(angle) {
-    angle %= Math.PI * 2;
-    if (angle < 0) {
-        angle += Math.PI * 2;
-    }
-    return angle;
-}
-/**
- * Gets functions used to convert to/from display values for angles based on the current settings.
- * @returns A tuple containing the functions to convert to and from display values.
- */
-function useAngleConverters() {
-    const [useDegrees] = useSetting(UseDegreesSettingDescriptor);
-    const toDisplayValue = useCallback((angle, wrap = false) => {
-        if (wrap) {
-            angle = WrapAngle(angle);
-        }
-        return useDegrees ? angle * RadiansToDegrees : angle;
-    }, [useDegrees]);
-    const fromDisplayValue = useCallback((angle, wrap = false) => {
-        angle = useDegrees ? angle / RadiansToDegrees : angle;
-        if (wrap) {
-            angle = WrapAngle(angle);
-        }
-        return angle;
-    }, [useDegrees]);
-    return [toDisplayValue, fromDisplayValue, useDegrees];
-}
+
+const CompactModeSettingDescriptor = {
+    key: "CompactMode",
+    defaultValue: !matchMedia("(pointer: coarse)").matches,
+};
+const DisableCopySettingDescriptor = {
+    key: "DisableCopy",
+    defaultValue: false,
+};
 
 const UXContextProvider = (props) => {
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
@@ -2037,7 +1998,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$W = makeStyles({
+const useStyles$X = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2052,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 = [];
@@ -2177,7 +2138,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$V = makeStyles({
+const useStyles$W = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2190,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 }));
 });
 
@@ -2461,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}`,
     },
@@ -2477,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",
     },
@@ -2492,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 })] }) }));
 };
 
@@ -2540,6 +2501,47 @@ function usePollingObservable(delay) {
     return observable;
 }
 
+// These are all "global" settings that aren't produced/owned by a specific service,
+// so we just add them by default directly in the SettingsService.
+const UseDegreesSettingDescriptor = {
+    key: "UseDegrees",
+    defaultValue: true,
+};
+const UseEulerSettingDescriptor = {
+    key: "UseEuler",
+    defaultValue: true,
+};
+
+const RadiansToDegrees = 180 / Math.PI;
+function WrapAngle(angle) {
+    angle %= Math.PI * 2;
+    if (angle < 0) {
+        angle += Math.PI * 2;
+    }
+    return angle;
+}
+/**
+ * Gets functions used to convert to/from display values for angles based on the current settings.
+ * @returns A tuple containing the functions to convert to and from display values.
+ */
+function useAngleConverters() {
+    const [useDegrees] = useSetting(UseDegreesSettingDescriptor);
+    const toDisplayValue = useCallback((angle, wrap = false) => {
+        if (wrap) {
+            angle = WrapAngle(angle);
+        }
+        return useDegrees ? angle * RadiansToDegrees : angle;
+    }, [useDegrees]);
+    const fromDisplayValue = useCallback((angle, wrap = false) => {
+        angle = useDegrees ? angle / RadiansToDegrees : angle;
+        if (wrap) {
+            angle = WrapAngle(angle);
+        }
+        return angle;
+    }, [useDegrees]);
+    return [toDisplayValue, fromDisplayValue, useDegrees];
+}
+
 const SequencerLock = new AsyncLock();
 /**
  * Creates a hook for managing teaching moment state.
@@ -2676,11 +2678,6 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-/**
- * The unique identity symbol for the scene context service.
- */
-const SceneContextIdentity = Symbol("SceneContext");
-
 function ToFeaturesString(options) {
     const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;
     const features = [];
@@ -2948,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",
@@ -3161,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);
@@ -3178,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))) })] })) }));
@@ -3188,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);
@@ -3200,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);
@@ -3397,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.
@@ -3617,6 +3614,46 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
     };
 }
 
+/**
+ * The unique identity symbol for the settings service.
+ */
+const SettingsServiceIdentity = Symbol("SettingsService");
+const SettingsServiceDefinition = {
+    friendlyName: "Settings",
+    consumes: [ShellServiceIdentity],
+    produces: [SettingsServiceIdentity],
+    factory: (shellService) => {
+        const sectionsCollection = new ObservableCollection();
+        const sectionContentCollection = new ObservableCollection();
+        const registration = shellService.addSidePane({
+            key: "Settings",
+            title: "Settings",
+            icon: SettingsRegular,
+            horizontalLocation: "right",
+            verticalLocation: "top",
+            order: 500,
+            teachingMoment: false,
+            content: () => {
+                const sections = useOrderedObservableCollection(sectionsCollection);
+                const sectionContent = useObservableCollection(sectionContentCollection);
+                return jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: true });
+            },
+        });
+        return {
+            addSection: (section) => sectionsCollection.add(section),
+            addSectionContent: (content) => sectionContentCollection.add(content),
+            dispose: () => {
+                registration.dispose();
+            },
+        };
+    },
+};
+
+/**
+ * The unique identity symbol for the scene context service.
+ */
+const SceneContextIdentity = Symbol("SceneContext");
+
 const useSwitchStyles = makeStyles({
     switch: {
         marginLeft: "auto",
@@ -3664,54 +3701,6 @@ const SwitchPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Switch, { ...switchProps }) }));
 };
 
-/**
- * The unique identity symbol for the settings service.
- */
-const SettingsServiceIdentity = Symbol("SettingsService");
-const SettingsServiceDefinition = {
-    friendlyName: "Settings",
-    consumes: [ShellServiceIdentity, SceneContextIdentity],
-    produces: [SettingsServiceIdentity],
-    factory: (shellService, sceneContext) => {
-        const sectionsCollection = new ObservableCollection();
-        const sectionContentCollection = new ObservableCollection();
-        const registration = shellService.addSidePane({
-            key: "Settings",
-            title: "Settings",
-            icon: SettingsRegular,
-            horizontalLocation: "right",
-            verticalLocation: "top",
-            order: 500,
-            teachingMoment: false,
-            content: () => {
-                const sections = useOrderedObservableCollection(sectionsCollection);
-                const sectionContent = useObservableCollection(sectionContentCollection);
-                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                const [compactMode, setCompactMode] = useSetting(CompactModeSettingDescriptor);
-                const [useDegrees, setUseDegrees] = useSetting(UseDegreesSettingDescriptor);
-                const [useEuler, setUseEuler] = useSetting(UseEulerSettingDescriptor);
-                const [disableCopy, setDisableCopy] = useSetting(DisableCopySettingDescriptor);
-                return (jsx(Fragment, { children: scene && (jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: scene, children: jsxs(AccordionSection, { title: "UI", children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
-                                        setCompactMode(checked);
-                                    } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: useDegrees, onChange: (checked) => {
-                                        setUseDegrees(checked);
-                                    } }), jsx(SwitchPropertyLine, { label: "Only Show Euler Angles", description: "Only show Euler angles in rotation properties, rather than quaternions.", value: useEuler, onChange: (checked) => {
-                                        setUseEuler(checked);
-                                    } }), jsx(SwitchPropertyLine, { label: "Disable Copy Button", description: "Disables the copy to clipboard button on property lines. You can still Ctrl+Click on the label to copy.", value: disableCopy, onChange: (checked) => {
-                                        setDisableCopy(checked);
-                                    } })] }) })) }));
-            },
-        });
-        return {
-            addSection: (section) => sectionsCollection.add(section),
-            addSectionContent: (content) => sectionContentCollection.add(content),
-            dispose: () => {
-                registration.dispose();
-            },
-        };
-    },
-};
-
 /**
  * The unique identity symbol for the selection service.
  */
@@ -3792,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." }) }));
 };
@@ -4238,7 +4227,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$Q = makeStyles({
+const useStyles$R = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4347,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(() => {
@@ -4371,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(() => {
@@ -4477,7 +4466,7 @@ const EntityTreeItem = (props) => {
     }, [commands]);
     return (jsxs(Menu, { openOnContext: true, checkedValues: checkedContextMenuItems, onCheckedValueChange: onContextMenuCheckedValueChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { className: mergeClasses(classes.treeItem, isDragging && classes.treeItemDragging, isDropTarget && classes.treeItemDropTarget), value: GetEntityId$1(entityItem.entity), 
                     // Disable manual expand/collapse when a filter is active.
-                    itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : GetEntityId$1(entityItem.parent.entity), "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, onKeyDown: onKeyDown, style: { [treeItemLevelToken]: entityItem.depth }, ...dragProps, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, className: mergeClasses(hasChildren ? classes.treeItemLayoutBranch : classes.treeItemLayoutLeaf, compactMode ? classes.treeItemLayoutCompact : undefined, isDropTarget && classes.treeItemDropTarget), style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
+                    itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : GetEntityId$1(entityItem.parent.entity), "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, onKeyDown: onKeyDown, style: { [treeItemLevelToken]: entityItem.depth }, ...dragProps, children: jsx(TreeItemLayout, { iconBefore: displayInfo.validationError ? (jsx(Tooltip$1, { content: displayInfo.validationError, relationship: "description", children: jsx(WarningRegular, {}) })) : entityItem.icon ? (jsx(entityItem.icon, { entity: entityItem.entity })) : null, className: mergeClasses(hasChildren ? classes.treeItemLayoutBranch : classes.treeItemLayoutLeaf, compactMode ? classes.treeItemLayoutCompact : undefined, isDropTarget && classes.treeItemDropTarget), style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
                             // Match the gap and padding of the actions.
                             className: classes.treeItemLayoutAside,
                             children: aside,
@@ -4487,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);
@@ -5037,7 +5026,8 @@ const FrameStepsStats = ({ context: scene }) => {
  */
 const ButtonLine = (props) => {
     ButtonLine.displayName = "ButtonLine";
-    return (jsx(LineContainer, { uniqueId: props.uniqueId ?? props.label, children: jsx(Button, { ...props }) }));
+    const { uniqueId, ...buttonProps } = props;
+    return (jsx(LineContainer, { uniqueId: uniqueId ?? props.label, children: jsx(Button, { ...buttonProps }) }));
 };
 
 /**
@@ -6112,7 +6102,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$P = makeStyles({
+const useStyles$Q = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -6121,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) {
@@ -6198,7 +6188,7 @@ function EvaluateExpression(rawValue) {
         return NaN;
     }
 }
-const useStyles$O = makeStyles({
+const useStyles$P = makeStyles({
     icon: {
         "&:hover": {
             color: tokens.colorBrandForeground1,
@@ -6212,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;
@@ -6479,7 +6469,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$N = makeStyles({
+const useStyles$O = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -6494,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) => {
@@ -6738,7 +6728,7 @@ const InputAlphaField = (props) => {
         } }));
 };
 
-const useStyles$M = makeStyles({
+const useStyles$N = makeStyles({
     sidebar: {
         display: "flex",
         flexDirection: "column",
@@ -6802,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
@@ -6875,7 +6865,7 @@ const PerformanceSidebar = (props) => {
                     })] }, `category-${category || "version"}`))) }));
 };
 
-const useStyles$L = makeStyles({
+const useStyles$M = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -6904,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();
@@ -7071,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);
@@ -7241,7 +7231,7 @@ const ToolsServiceDefinition = {
  */
 const ReactContextServiceIdentity = Symbol("ReactContextService");
 
-const useStyles$J = makeStyles({
+const useStyles$K = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -7253,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 }) }));
 });
 /**
@@ -7411,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,
     },
@@ -7423,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) }) }));
 });
@@ -8311,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,
     },
@@ -8335,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());
@@ -8352,7 +8347,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$G = makeStyles({
+const useStyles$H = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8395,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) {
@@ -8440,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.
@@ -8462,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-eRZtqcfj.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-B_R2ChvJ.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8535,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.
@@ -8578,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-MzZbVrvr.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DaBqYmZw.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-DdPEZLjO.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-5IVRhqd-.js'),
     },
 ]);
 
@@ -8850,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;
                 }
@@ -8894,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(() => {
@@ -8947,8 +8983,9 @@ function MakeInspectableBridgeServiceDefinition(options) {
                     }
                 }
             }
-            // Initiate connection.
-            connect();
+            if (enabled) {
+                connect();
+            }
             const registry = {
                 addCommand(descriptor) {
                     if (commands.has(descriptor.id)) {
@@ -8961,24 +8998,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;
@@ -9408,6 +9452,7 @@ function _StartInspectable(scene, options) {
             await serviceContainer.addServicesAsync(sceneContextServiceDefinition, MakeInspectableBridgeServiceDefinition({
                 port,
                 name,
+                autoStart: options?.autoStart ?? false,
             }), EntityQueryServiceDefinition, ScreenshotCommandServiceDefinition, ShaderCommandServiceDefinition, StatsCommandServiceDefinition, PerfTraceCommandServiceDefinition);
         })();
         state = {
@@ -9540,7 +9585,7 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$F = makeStyles({
+const useStyles$G = makeStyles({
     uniformWidth: {
         ...UniformWidthStyling,
     },
@@ -9552,7 +9597,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) }) }));
 };
 /**
@@ -9563,7 +9608,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) }) }));
 };
 
@@ -9694,6 +9739,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],
@@ -9705,9 +9758,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;
@@ -9720,8 +9786,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;
+                        } }) }));
             },
         });
     },
@@ -17050,6 +17133,8 @@ const ParticleSystemEmitterProperties = (props) => {
     useProperty(emitterVector, "_y");
     useProperty(emitterVector, "_z");
     const particleEmitterType = useProperty(system, "particleEmitterType");
+    const meshEmitter = particleEmitterType instanceof MeshParticleEmitter ? particleEmitterType : undefined;
+    const useMeshNormalsForDirection = useProperty(meshEmitter, "useMeshNormalsForDirection");
     // Derive the current dropdown value from the current instance to stay in sync with external changes.
     const derivedEmitterTypeKey = (() => {
         if (particleEmitterType instanceof SphereParticleEmitter) {
@@ -17153,21 +17238,21 @@ const ParticleSystemEmitterProperties = (props) => {
                                     break;
                                 }
                             }
-                        } }), particleEmitterType instanceof MeshParticleEmitter && (jsx(Fragment, { children: scene && scene.meshes.length > 0 ? (jsx(Property, { component: StringDropdownPropertyLine, propertyPath: "source", label: "Source", value: particleEmitterType.mesh ? `mesh:${particleEmitterType.mesh.uniqueId}` : `mesh:${scene.meshes[0].uniqueId}`, options: scene.meshes.map((mesh) => {
-                                const uniqueId = mesh.uniqueId;
-                                const name = mesh.name ?? "(unnamed)";
-                                const label = `${name} (#${uniqueId})`;
-                                return {
-                                    label,
-                                    value: `mesh:${uniqueId}`,
-                                };
-                            }), onChange: (value) => {
-                                const next = String(value);
-                                const uniqueIdText = next.replace("mesh:", "");
-                                const uniqueId = Number(uniqueIdText);
-                                const mesh = scene.meshes.find((candidate) => candidate.uniqueId === uniqueId) ?? null;
-                                particleEmitterType.mesh = mesh;
-                            } })) : (jsx(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })) })), particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
+                        } }), particleEmitterType instanceof MeshParticleEmitter && (jsxs(Fragment, { children: [scene && scene.meshes.length > 0 ? (jsx(Property, { component: StringDropdownPropertyLine, propertyPath: "source", label: "Source", value: particleEmitterType.mesh ? `mesh:${particleEmitterType.mesh.uniqueId}` : `mesh:${scene.meshes[0].uniqueId}`, options: scene.meshes.map((mesh) => {
+                                    const uniqueId = mesh.uniqueId;
+                                    const name = mesh.name ?? "(unnamed)";
+                                    const label = `${name} (#${uniqueId})`;
+                                    return {
+                                        label,
+                                        value: `mesh:${uniqueId}`,
+                                    };
+                                }), onChange: (value) => {
+                                    const next = String(value);
+                                    const uniqueIdText = next.replace("mesh:", "");
+                                    const uniqueId = Number(uniqueIdText);
+                                    const mesh = scene.meshes.find((candidate) => candidate.uniqueId === uniqueId) ?? null;
+                                    particleEmitterType.mesh = mesh;
+                                } })) : (jsx(Property, { component: TextPropertyLine, propertyPath: "source", label: "Source", value: "No meshes in scene." })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use normals for direction", target: particleEmitterType, propertyKey: "useMeshNormalsForDirection" }), !useMeshNormalsForDirection && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), particleEmitterType instanceof BoxParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Min emit box", target: particleEmitterType, propertyKey: "minEmitBox" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Max emit box", target: particleEmitterType, propertyKey: "maxEmitBox" })] })), particleEmitterType instanceof ConeParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height range", target: particleEmitterType, propertyKey: "heightRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Emit from spawn point only", target: particleEmitterType, propertyKey: "emitFromSpawnPointOnly" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof SphereParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof CylinderParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Height", target: particleEmitterType, propertyKey: "height", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof HemisphericParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", target: particleEmitterType, propertyKey: "radius", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius range", target: particleEmitterType, propertyKey: "radiusRange", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Direction randomizer", target: particleEmitterType, propertyKey: "directionRandomizer", min: 0, max: 1, step: 0.01 })] })), particleEmitterType instanceof PointParticleEmitter && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction1", target: particleEmitterType, propertyKey: "direction1" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Direction2", target: particleEmitterType, propertyKey: "direction2" })] }))] })), !scene && jsx(TextPropertyLine, { label: "Emitter", value: "No scene available." })] }));
 };
 
 const useStyles$h = makeStyles({
@@ -18087,7 +18172,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 = {
@@ -18238,7 +18323,7 @@ const IblShadowsRenderPipelineScreenspaceProperties = (props) => {
 const IblShadowsRenderPipelineDebugProperties = (props) => {
     const { pipeline } = props;
     const allowDebugPasses = useProperty(pipeline, "allowDebugPasses");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Allow Debug Passes", target: pipeline, propertyKey: "allowDebugPasses" }), allowDebugPasses && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Voxel Debug Enabled", target: pipeline, propertyKey: "voxelDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "CDF Debug Enabled", target: pipeline, propertyKey: "cdfDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Voxel Tracing Debug Enabled", target: pipeline, propertyKey: "voxelTracingDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Spatial Blur Debug Enabled", target: pipeline, propertyKey: "spatialBlurPassDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Accumulation Pass Debug Enabled", target: pipeline, propertyKey: "accumulationPassDebugEnabled" })] }))] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Allow Debug Passes", target: pipeline, propertyKey: "allowDebugPasses" }), allowDebugPasses && (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "CDF Debug Enabled", target: pipeline, propertyKey: "cdfDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Voxel Tracing Debug Enabled", target: pipeline, propertyKey: "voxelTracingDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Spatial Blur Debug Enabled", target: pipeline, propertyKey: "spatialBlurPassDebugEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Accumulation Pass Debug Enabled", target: pipeline, propertyKey: "accumulationPassDebugEnabled" })] }))] }));
 };
 
 const RenderingPipelinePropertiesServiceDefinition = {
@@ -18771,12 +18856,42 @@ const SpriteManagerActionsProperties = (props) => {
  * @param faceOrLayer if the texture has multiple faces, the face index to use for the source. For 2D array textures, this is the layer index.
  * @param channels a filter for which of the RGBA channels to return in the result
  * @param lod if the texture has multiple LODs, the lod index to use for the source
+ * @param slice if the texture is 3D, the depth slice index to use for the source
  * @returns the 8-bit texture data
  */
-async function ApplyChannelsToTextureDataAsync(texture, width, height, faceOrLayer, channels, lod = 0) {
+async function ApplyChannelsToTextureDataAsync(texture, width, height, faceOrLayer, channels, lod = 0, slice = 0) {
+    const internalTexture = texture.getInternalTexture();
+    const is3DTexture = texture.is3D || !!internalTexture?.is3D;
+    const textureFormat = internalTexture?.format ?? texture.textureFormat;
     // For cube maps, force RTT path to ensure correct face orientation and gamma correction
     // For 2D array textures, face is reinterpreted as the layer index for direct pixel readback
-    const data = await GetTextureDataAsync(texture, width, height, faceOrLayer, lod, texture.isCube);
+    const data = await GetTextureDataAsync(texture, width, height, faceOrLayer, lod, texture.isCube || is3DTexture, slice);
+    const forceOpaqueAlpha = is3DTexture || _TextureFormatHasNoAlpha(textureFormat);
+    if (forceOpaqueAlpha) {
+        for (let i = 3; i < width * height * 4; i += 4) {
+            data[i] = 255;
+        }
+    }
+    else if (texture.getScene()?.getEngine().isWebGPU) {
+        let alphaAllZero = true;
+        let hasNonZeroColor = false;
+        for (let i = 0; i < width * height * 4; i += 4) {
+            if (data[i] !== 0 || data[i + 1] !== 0 || data[i + 2] !== 0) {
+                hasNonZeroColor = true;
+            }
+            if (data[i + 3] !== 0) {
+                alphaAllZero = false;
+                break;
+            }
+        }
+        // Some WebGPU RTT readback paths can return zeroed alpha for textures that
+        // are effectively opaque in source data. In that case, force opaque preview.
+        if (alphaAllZero && hasNonZeroColor) {
+            for (let i = 3; i < width * height * 4; i += 4) {
+                data[i] = 255;
+            }
+        }
+    }
     if (!channels.R || !channels.G || !channels.B || !channels.A) {
         for (let i = 0; i < width * height * 4; i += 4) {
             // If alpha is the only channel, just display alpha across all channels
@@ -18849,6 +18964,40 @@ async function ApplyChannelsToTextureDataAsync(texture, width, height, faceOrLay
     }
     return data;
 }
+function _TextureFormatHasNoAlpha(format) {
+    switch (format) {
+        case Constants.TEXTUREFORMAT_LUMINANCE:
+        case Constants.TEXTUREFORMAT_R:
+        case Constants.TEXTUREFORMAT_R16_UNORM:
+        case Constants.TEXTUREFORMAT_R16_SNORM:
+        case Constants.TEXTUREFORMAT_RG:
+        case Constants.TEXTUREFORMAT_RG16_UNORM:
+        case Constants.TEXTUREFORMAT_RG16_SNORM:
+        case Constants.TEXTUREFORMAT_RGB:
+        case Constants.TEXTUREFORMAT_RGB16_UNORM:
+        case Constants.TEXTUREFORMAT_RGB16_SNORM:
+        case Constants.TEXTUREFORMAT_DEPTH16:
+        case Constants.TEXTUREFORMAT_DEPTH24:
+        case Constants.TEXTUREFORMAT_DEPTH24_STENCIL8:
+        case Constants.TEXTUREFORMAT_DEPTH24UNORM_STENCIL8:
+        case Constants.TEXTUREFORMAT_DEPTH32_FLOAT:
+        case Constants.TEXTUREFORMAT_DEPTH32FLOAT_STENCIL8:
+        case Constants.TEXTUREFORMAT_STENCIL8:
+        case Constants.TEXTUREFORMAT_RED_INTEGER:
+        case Constants.TEXTUREFORMAT_RG_INTEGER:
+        case Constants.TEXTUREFORMAT_RGB_INTEGER:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB_S3TC_DXT1:
+        case Constants.TEXTUREFORMAT_COMPRESSED_SRGB_S3TC_DXT1_EXT:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB_ETC1_WEBGL:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB8_ETC2:
+        case Constants.TEXTUREFORMAT_COMPRESSED_SRGB8_ETC2:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT:
+        case Constants.TEXTUREFORMAT_COMPRESSED_RGB_BPTC_SIGNED_FLOAT:
+            return true;
+        default:
+            return false;
+    }
+}
 
 const useStyles$9 = makeStyles({
     root: {
@@ -18860,6 +19009,10 @@ const useStyles$9 = makeStyles({
         gap: tokens.spacingHorizontalXS,
         padding: 0,
     },
+    sliderContainer: {
+        marginTop: tokens.spacingVerticalXS,
+        marginBottom: tokens.spacingVerticalXS,
+    },
     controlButton: {
         minWidth: "auto",
         flex: "1 1 0", // Equal flex grow/shrink with 0 basis
@@ -18891,15 +19044,28 @@ const TextureChannelStates = {
     A: { R: false, G: false, B: false, A: true },
     ALL: { R: true, G: true, B: true, A: true },
 };
+/**
+ * Displays a 2D preview for a texture, including channels/cube face controls.
+ * @param props The component properties.
+ * @returns The rendered component.
+ */
 const TexturePreview = (props) => {
     const { texture, disableToolbar = false, maxWidth = "100%", maxHeight = "384px", offsetX = 0, offsetY = 0, width, height, imperativeRef } = props;
     const classes = useStyles$9();
     const canvasRef = useRef(null);
     const [channels, setChannels] = useState(TextureChannelStates.ALL);
     const [face, setFace] = useState(0);
+    const [slice, setSlice] = useState(0);
+    const [lod, setLod] = useState(0);
     const [layer, setLayer] = useState(0);
     const [canvasStyle, setCanvasStyle] = useState();
     const internalTexture = useProperty(texture, "_texture");
+    const is3DTexture = !!internalTexture?.is3D;
+    const baseDepth = Math.max(internalTexture?.depth ?? 1, 1);
+    const lodDepth = Math.max(1, Math.floor(baseDepth / Math.pow(2, lod)));
+    const maxSlice = lodDepth - 1;
+    const lodBaseSize = Math.max(1, Math.min(internalTexture?.width ?? 1, internalTexture?.height ?? 1, is3DTexture ? (internalTexture?.depth ?? 1) : Number.MAX_SAFE_INTEGER));
+    const maxLod = internalTexture?.generateMipMaps ? Math.max(0, Math.floor(Math.log2(lodBaseSize))) : 0;
     const showLayerDropdown = texture.is2DArray;
     const layerCount = texture.is2DArray && internalTexture ? internalTexture.depth : 0;
     useEffect(() => {
@@ -18916,7 +19082,14 @@ const TexturePreview = (props) => {
         }
         try {
             await WhenTextureReadyAsync(texture); // Ensure texture is loaded before grabbing size
-            const { width: textureWidth, height: textureHeight } = texture.getSize();
+            const size = texture.getSize();
+            let textureWidth = size.width || internalTexture?.width || 1;
+            let textureHeight = size.height || internalTexture?.height || textureWidth;
+            if (is3DTexture) {
+                const squareSize = Math.max(1, Math.min(textureWidth, textureHeight));
+                textureWidth = squareSize;
+                textureHeight = squareSize;
+            }
             // Calculate canvas dimensions
             const canvasWidth = width ?? textureWidth;
             const canvasHeight = height ?? textureHeight;
@@ -18926,7 +19099,7 @@ const TexturePreview = (props) => {
             const imageWidth = `min(${maxWidth}, calc(${maxHeight} * ${aspectRatio}))`;
             setCanvasStyle({ width: imageWidth });
             // Fetch texture data BEFORE clearing the canvas to avoid flicker
-            const data = await ApplyChannelsToTextureDataAsync(texture, textureWidth, textureHeight, texture.is2DArray ? layer : face, channels);
+            const data = await ApplyChannelsToTextureDataAsync(texture, textureWidth, textureHeight, texture.is2DArray ? layer : face, channels, lod, slice);
             // Now set canvas dimensions (this clears the canvas) and draw immediately
             canvas.width = canvasWidth;
             canvas.height = canvasHeight;
@@ -18941,7 +19114,19 @@ const TexturePreview = (props) => {
         catch {
             // If we fail, leave the canvas empty
         }
-    }, [texture, face, channels, offsetX, offsetY, width, height, internalTexture, layer]);
+    }, [texture, face, channels, lod, slice, offsetX, offsetY, width, height, internalTexture, layer]);
+    useEffect(() => {
+        if (!is3DTexture || slice <= maxSlice) {
+            return;
+        }
+        setSlice(maxSlice);
+    }, [is3DTexture, maxSlice, slice]);
+    useEffect(() => {
+        if (lod <= maxLod) {
+            return;
+        }
+        setLod(maxLod);
+    }, [lod, maxLod]);
     useImperativeHandle(imperativeRef, () => ({ refresh: updatePreviewAsync }), [updatePreviewAsync]);
     useEffect(() => {
         void updatePreviewAsync();
@@ -18950,7 +19135,7 @@ const TexturePreview = (props) => {
     useEffect(() => {
         void updatePreviewAsync();
     }, [isPinned]);
-    return (jsx(LineContainer, { uniqueId: "TexturePreview", children: jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), !disableToolbar && showLayerDropdown && layerCount > 0 && (jsx(SyncedSliderPropertyLine, { label: "Layer", value: layer, onChange: setLayer, min: 0, max: layerCount - 1, step: 1 })), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
+    return (jsx(LineContainer, { uniqueId: "TexturePreview", children: jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), is3DTexture && (jsxs("div", { className: classes.sliderContainer, children: [jsxs(Label, { children: ["Slice: ", slice, " / ", maxSlice] }), jsx(Slider$1, { min: 0, max: maxSlice, step: 1, value: slice, onChange: (_, data) => setSlice(data.value) })] })), maxLod > 0 && (jsxs("div", { className: classes.sliderContainer, children: [jsxs(Label, { children: ["LOD: ", lod] }), jsx(Slider$1, { min: 0, max: maxLod, step: 1, value: lod, onChange: (_, data) => setLod(data.value) })] })), jsx("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), !disableToolbar && showLayerDropdown && layerCount > 0 && (jsx(SyncedSliderPropertyLine, { label: "Layer", value: layer, onChange: setLayer, min: 0, max: layerCount - 1, step: 1 })), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
                         void updatePreviewAsync();
                     }, children: "Refresh" }))] }) }));
 };
@@ -21543,6 +21728,9 @@ const MaterialExplorerServiceDefinition = {
 function IsCameraFrameGraphTask(task) {
     return task.camera instanceof Camera;
 }
+function IsNodesSectionType(node) {
+    return node instanceof TransformNode || node instanceof Camera || node instanceof Light;
+}
 const NodeExplorerServiceDefinition = {
     friendlyName: "Node Explorer",
     consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, GizmoServiceIdentity, WatcherServiceIdentity],
@@ -21552,21 +21740,36 @@ const NodeExplorerServiceDefinition = {
             return undefined;
         }
         const nodeMovedObservable = new Observable();
+        // Set of all nodes known to be in the scene, rebuilt each time getRootEntities
+        // is called. Used by getEntityDisplayInfo to detect orphaned ancestor nodes.
+        const knownSceneNodes = new Set();
         const sectionRegistration = sceneExplorerService.addSection({
             displayName: "Nodes",
             order: 100 /* DefaultSectionsOrder.Nodes */,
             getRootEntities: () => {
-                const rootNodes = [...scene.rootNodes];
-                // If any non-root node has a parent and that parent is not one of the node types shown in the Nodes section,
-                // then we should treat it as a root node, otherwise it won't show up anywhere in scene explorer.
-                // An example of this is when a Mesh or a TransformNode is parented under a Bone.
+                const rootNodes = new Set(scene.rootNodes);
+                knownSceneNodes.clear();
+                // Ensure all nodes in the scene are reachable in the explorer, even if their
+                // parent was removed from the scene or is not a type shown in the Nodes section.
                 for (const node of [...scene.meshes, ...scene.transformNodes, ...scene.cameras, ...scene.lights]) {
-                    if (node.parent &&
-                        !(node.parent instanceof AbstractMesh) &&
-                        !(node.parent instanceof TransformNode) &&
-                        !(node.parent instanceof Camera) &&
-                        !(node.parent instanceof Light)) {
-                        rootNodes.push(node);
+                    knownSceneNodes.add(node);
+                    if (!node.parent) {
+                        continue;
+                    }
+                    if (!IsNodesSectionType(node.parent)) {
+                        // Parent is not a type shown in the Nodes section (e.g. a Bone).
+                        // Treat this node as a root so it still appears in the explorer.
+                        rootNodes.add(node);
+                    }
+                    else {
+                        // Walk up through Nodes-section-type parents to find the topmost ancestor.
+                        // If that ancestor was removed from the scene (not in rootNodes), add it
+                        // so the entire subtree remains visible in the explorer.
+                        let ancestor = node.parent;
+                        while (ancestor.parent && IsNodesSectionType(ancestor.parent)) {
+                            ancestor = ancestor.parent;
+                        }
+                        rootNodes.add(ancestor);
                     }
                 }
                 // Lights within a clustered light container are not included in Scene.lights or Scene.rootNodes.
@@ -21574,23 +21777,32 @@ const NodeExplorerServiceDefinition = {
                 for (const light of scene.lights) {
                     if (light instanceof ClusteredLightContainer) {
                         for (const childLight of light.lights) {
-                            if (!childLight.parent && !rootNodes.includes(childLight)) {
-                                rootNodes.push(childLight);
+                            knownSceneNodes.add(childLight);
+                            if (!childLight.parent) {
+                                rootNodes.add(childLight);
                             }
                         }
                     }
                 }
-                return rootNodes;
+                return [...rootNodes];
             },
             getEntityChildren: (node) => node.getChildren(),
             getEntityDisplayInfo: (node) => {
                 const onChangeObservable = new Observable();
                 const nameHookToken = watcherService.watchProperty(node, "name", () => onChangeObservable.notifyObservers());
                 const parentHookToken = watcherService.watchProperty(node, "parent", () => nodeMovedObservable.notifyObservers(node));
+                // A node is "not in the scene" if it is a Nodes-section type but is not
+                // a known scene node. This handles nodes that were removed from the scene
+                // but still appear because a descendant is in the scene. Nodes from the
+                // !IsNodesSectionType(parent) branch are unaffected because they always
+                // come from the scene's tracking lists. Clustered light children are also
+                // unaffected because they are added to knownSceneNodes explicitly.
+                const validationError = IsNodesSectionType(node) && !knownSceneNodes.has(node) ? "This entity is not in the scene but is shown because a descendant is still in the scene." : undefined;
                 return {
                     get name() {
                         return node.name || `Unnamed ${node.getClassName()}`;
                     },
+                    validationError,
                     onChange: onChangeObservable,
                     dispose: () => {
                         nameHookToken.dispose();
@@ -22608,23 +22820,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: "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: 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 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 = {};
@@ -22633,22 +22890,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({
@@ -22656,7 +22941,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 {
@@ -22861,6 +23146,37 @@ const ShellSettingsServiceDefinition = {
     },
 };
 
+const InspectorSettingsServiceDefinition = {
+    friendlyName: "Inspector Settings",
+    consumes: [SettingsServiceIdentity],
+    factory: (settingsService) => {
+        const settingRegistration = settingsService.addSectionContent({
+            key: "Inspector Settings",
+            section: "UI",
+            component: () => {
+                const [compactMode, setCompactMode] = useSetting(CompactModeSettingDescriptor);
+                const [useDegrees, setUseDegrees] = useSetting(UseDegreesSettingDescriptor);
+                const [useEuler, setUseEuler] = useSetting(UseEulerSettingDescriptor);
+                const [disableCopy, setDisableCopy] = useSetting(DisableCopySettingDescriptor);
+                return (jsxs(Fragment, { children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
+                                setCompactMode(checked);
+                            } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: useDegrees, onChange: (checked) => {
+                                setUseDegrees(checked);
+                            } }), jsx(SwitchPropertyLine, { label: "Only Show Euler Angles", description: "Only show Euler angles in rotation properties, rather than quaternions.", value: useEuler, onChange: (checked) => {
+                                setUseEuler(checked);
+                            } }), jsx(SwitchPropertyLine, { label: "Disable Copy Button", description: "Disables the copy to clipboard button on property lines. You can still Ctrl+Click on the label to copy.", value: disableCopy, onChange: (checked) => {
+                                setDisableCopy(checked);
+                            } })] }));
+            },
+        });
+        return {
+            dispose: () => {
+                settingRegistration.dispose();
+            },
+        };
+    },
+};
+
 const UserFeedbackServiceDefinition = {
     friendlyName: "User Feedback",
     consumes: [ShellServiceIdentity],
@@ -23065,7 +23381,7 @@ function ShowInspector(scene, options = {}) {
         // Tools pane tab and related services.
         ToolsServiceDefinition, ExportServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
         // Settings pane tab and related services.
-        SettingsServiceDefinition, WatcherSettingsServiceDefinition, ShellSettingsServiceDefinition, 
+        SettingsServiceDefinition, InspectorSettingsServiceDefinition, WatcherSettingsServiceDefinition, ShellSettingsServiceDefinition, 
         // Adds a button to refresh all properties manually (when watcher is in "manual" mode).
         WatcherRefreshToolbarServiceDefinition, 
         // Tracks entity selection state (e.g. which Mesh or Material or other entity is currently selected in scene explorer and bound to the properties pane, etc.).
@@ -23922,5 +24238,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 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, Tooltip 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, SettingsServiceIdentity as aA, SettingsStoreIdentity as aB, ShowInspector as aC, SidePaneContainer as aD, SkeletonSelector as aE, Slider as aF, SpinButton as aG, StartInspectable as aH, StatsServiceIdentity as aI, StringDropdown as aJ, StringDropdownPropertyLine as aK, StringifiedPropertyLine as aL, Switch as aM, SwitchPropertyLine as aN, SyncedSliderInput as aO, SyncedSliderPropertyLine as aP, TeachingMoment as aQ, TextAreaPropertyLine as aR, TextInput as aS, TextPropertyLine as aT, Textarea as aU, TextureSelector as aV, TextureUpload as aW, Theme as aX, ThemeServiceIdentity as aY, ToastProvider as aZ, ToggleButton as a_, LinkPropertyLine as aa, LinkToEntityPropertyLine as ab, List as ac, MakeDialogTeachingMoment as ad, MakeLazyComponent as ae, MakePopoverTeachingMoment as af, MakePropertyHook as ag, MakeTeachingMoment as ah, MaterialSelector as ai, NodeSelector as aj, NumberDropdown as ak, NumberDropdownPropertyLine as al, ObservableCollection as am, Pane as an, PlaceholderPropertyLine as ao, PositionedPopover as ap, PropertiesServiceIdentity as aq, Property as ar, PropertyContext as as, PropertyLine as at, QuaternionPropertyLine as au, RotationVectorPropertyLine as av, SceneExplorerServiceIdentity as aw, SearchBar as ax, SearchBox as ay, SelectionServiceDefinition as az, useInterceptObservable as b, UploadButton as b0, Vector2PropertyLine as b1, Vector4PropertyLine as b2, WatcherServiceIdentity as b3, useAngleConverters as b4, useAsyncResource as b5, useColor3Property as b6, useColor4Property as b7, useEventListener as b8, useEventfulState as b9, useKeyListener as ba, useKeyState as bb, useObservableCollection as bc, useOrderedObservableCollection as bd, usePollingObservable as be, usePropertyChangedNotifier as bf, useQuaternionProperty as bg, useResource as bh, useSetting as bi, useTheme as bj, useThemeMode as bk, useVector3Property as bl, 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-FWuITINA.js.map
+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-DB_fpb1t.js.map