@babylonjs/inspector 9.0.0 → 9.2.0

package/lib/{index-DuVF9zYN.js → index-FWuITINA.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, cloneElement, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, mergeClasses, useId, useToastController, Toast, ToastTitle, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Switch as Switch$1, createDOMRenderer, RendererProvider, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, useMergedRefs, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider as Slider$1, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, 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, 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 { 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 { 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';
@@ -45,6 +45,7 @@ import { Light } from '@babylonjs/core/Lights/light.js';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
 import { Node as Node$1 } from '@babylonjs/core/node.js';
 import { createRoot } from 'react-dom/client';
+import { CreateScreenshotUsingRenderTargetAsync } from '@babylonjs/core/Misc/screenshotTools.js';
 import { SelectionOutlineLayer } from '@babylonjs/core/Layers/selectionOutlineLayer.js';
 import { GaussianSplattingMesh } from '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
 import { AnimationGroup, TargetedAnimation } from '@babylonjs/core/Animations/animationGroup.js';
@@ -123,22 +124,21 @@ import { Skeleton } from '@babylonjs/core/Bones/skeleton.js';
 import { Sprite } from '@babylonjs/core/Sprites/sprite.js';
 import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager.js';
 import { GetTextureDataAsync, WhenTextureReadyAsync } from '@babylonjs/core/Misc/textureTools.js';
-import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture.js';
-import { MultiRenderTarget } from '@babylonjs/core/Materials/Textures/multiRenderTarget.js';
-import { RenderTargetTexture } from '@babylonjs/core/Materials/Textures/renderTargetTexture.js';
-import { ThinTexture } from '@babylonjs/core/Materials/Textures/thinTexture.js';
 import { KeyboardEventTypes } from '@babylonjs/core/Events/keyboardEvents.js';
 import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
 import { HtmlElementTexture } from '@babylonjs/core/Materials/Textures/htmlElementTexture.js';
 import { ShaderMaterial } from '@babylonjs/core/Materials/shaderMaterial.js';
 import { CreatePlane } from '@babylonjs/core/Meshes/Builders/planeBuilder.js';
+import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture.js';
+import { MultiRenderTarget } from '@babylonjs/core/Materials/Textures/multiRenderTarget.js';
+import { RenderTargetTexture } from '@babylonjs/core/Materials/Textures/renderTargetTexture.js';
+import { ThinTexture } from '@babylonjs/core/Materials/Textures/thinTexture.js';
 import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
 import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js';
 import { captureEquirectangularFromScene } from '@babylonjs/core/Misc/equirectangularCapture.js';
 import { SceneRecorder } from '@babylonjs/core/Misc/sceneRecorder.js';
-import { CreateScreenshotUsingRenderTargetAsync } from '@babylonjs/core/Misc/screenshotTools.js';
 import { VideoRecorder } from '@babylonjs/core/Misc/videoRecorder.js';
 import { SceneSerializer } from '@babylonjs/core/Misc/sceneSerializer.js';
 import { EnvironmentTextureTools } from '@babylonjs/core/Misc/environmentTextureTools.js';
@@ -1743,13 +1743,18 @@ const InfoLabel = (props) => {
 };
 
 const ToastContext = createContext({ showToast: () => { } });
-const ToastProvider = ({ children }) => {
+/**
+ * Provides toast notification functionality to child components via context and an optional imperative ref.
+ * @returns The toast provider component tree.
+ */
+const ToastProvider = ({ children, imperativeRef }) => {
     const toasterId = useId("toaster");
     const { dispatchToast } = useToastController(toasterId);
     const { targetDocument } = useFluent();
-    const showToast = useCallback((message) => {
-        dispatchToast(jsx(Toast, { children: jsx(ToastTitle, { children: message }) }), { intent: "info", timeout: 2000 });
+    const showToast = useCallback((message, options) => {
+        dispatchToast(jsx(Toast, { children: jsx(ToastTitle, { children: message }) }), { intent: options?.intent ?? "info", timeout: 2000 });
     }, [dispatchToast]);
+    useImperativeHandle(imperativeRef, () => ({ showToast }), [showToast]);
     return (jsxs(ToastContext.Provider, { value: { showToast }, children: [children, jsx(FluentProvider, { applyStylesToPortals: true, targetDocument: targetDocument, children: jsx(Toaster, { toasterId: toasterId, position: "bottom" }) })] }));
 };
 /**
@@ -1845,9 +1850,7 @@ const PropertyLine = forwardRef((props, ref) => {
             defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state
         })
         : children;
-    return (jsxs(LineContainer, { ref: ref, uniqueId: uniqueId ?? label, label: label, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel, { className: classes.infoLabel, htmlFor: "property", info: description, label: label, flexLabel: true, onContextMenu: onCopy ? handleContextMenu : undefined }), jsxs("div", { className: classes.rightContent, id: "property", children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
-                            // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox used to toggle null ('checked' means 'non null')
-                            jsx(Tooltip, { content: props.value == null ? "Enable property" : "Disable property (set to null)", children: jsx(Checkbox$1, { className: classes.checkbox, indicator: { className: classes.checkboxIndicator }, checked: !(props.value == null), onChange: (_, data) => {
+    return (jsxs(LineContainer, { ref: ref, uniqueId: uniqueId ?? label, label: label, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel, { className: classes.infoLabel, htmlFor: "property", info: description, label: label, flexLabel: true, onContextMenu: onCopy ? handleContextMenu : undefined }), jsxs("div", { className: classes.rightContent, id: "property", children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (jsx(Tooltip, { content: props.value == null ? "Enable property" : "Disable property (set to null)", children: jsx(Checkbox$1, { className: classes.checkbox, indicator: { className: classes.checkboxIndicator }, checked: !(props.value == null), onChange: (_, data) => {
                                         if (data.checked) {
                                             // if checked this means we are returning to non-null, use cached value if exists. If no cached value, use default value
                                             cachedVal.current != null ? props.onChange(cachedVal.current) : props.onChange(props.defaultValue);
@@ -2191,6 +2194,39 @@ const SidePaneContainer = forwardRef((props, ref) => {
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
+/**
+ * The unique identity symbol for the settings store service.
+ */
+const SettingsStoreIdentity = Symbol("SettingsStore");
+function GetKey(namespace, settingKey) {
+    return `Babylon/${namespace}/${settingKey}`;
+}
+/**
+ * Default implementation of {@link ISettingsStore} that persists settings using browser local storage.
+ */
+class SettingsStore {
+    /**
+     * Creates a new settings store.
+     * @param _namespace A namespace used to scope the settings keys to avoid collisions with other stores.
+     */
+    constructor(_namespace) {
+        this._namespace = _namespace;
+        this._onChanged = new Observable();
+    }
+    get onChanged() {
+        return this._onChanged;
+    }
+    readSetting(descriptor) {
+        const key = GetKey(this._namespace, descriptor.key);
+        return DataStorage.ReadJson(key, descriptor.defaultValue);
+    }
+    writeSetting(descriptor, value) {
+        const key = GetKey(this._namespace, descriptor.key);
+        DataStorage.WriteJson(key, value);
+        this._onChanged.notifyObservers(descriptor.key);
+    }
+}
+
 // Generated from https://react.fluentui.dev/?path=/docs/theme-theme-designer--docs
 // Key color: #3A94FC
 /* eslint-disable @typescript-eslint/naming-convention */
@@ -2226,39 +2262,6 @@ const DarkTheme = {
     colorNeutralForeground1: BaseDarkTheme.colorNeutralForeground2,
 };
 
-/**
- * The unique identity symbol for the settings store service.
- */
-const SettingsStoreIdentity = Symbol("SettingsStore");
-function GetKey(namespace, settingKey) {
-    return `Babylon/${namespace}/${settingKey}`;
-}
-/**
- * Default implementation of {@link ISettingsStore} that persists settings using browser local storage.
- */
-class SettingsStore {
-    /**
-     * Creates a new settings store.
-     * @param _namespace A namespace used to scope the settings keys to avoid collisions with other stores.
-     */
-    constructor(_namespace) {
-        this._namespace = _namespace;
-        this._onChanged = new Observable();
-    }
-    get onChanged() {
-        return this._onChanged;
-    }
-    readSetting(descriptor) {
-        const key = GetKey(this._namespace, descriptor.key);
-        return DataStorage.ReadJson(key, descriptor.defaultValue);
-    }
-    writeSetting(descriptor, value) {
-        const key = GetKey(this._namespace, descriptor.key);
-        DataStorage.WriteJson(key, value);
-        this._onChanged.notifyObservers(descriptor.key);
-    }
-}
-
 /**
  * The setting descriptor for persisting the theme mode preference.
  */
@@ -2673,83 +2676,6 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-/**
- * A hook that provides a transient state value and a "pulse" function to set it.
- * The transient value is meant to be consumed immediately after being set, and will be cleared on the next render.
- * @typeParam T The type of the transient value.
- * @returns A tuple containing the transient value and a function to "pulse" the state.
- */
-function useImpulse() {
-    const impulseRef = useRef(undefined);
-    const [, setVersion] = useState(0);
-    const pulse = useCallback((value) => {
-        impulseRef.current = value;
-        setVersion((v) => v + 1);
-    }, []);
-    // Consume the impulse value and clear it
-    const value = impulseRef.current;
-    impulseRef.current = undefined;
-    return [value, pulse];
-}
-
-const useStyles$S = makeStyles({
-    placeholderDiv: {
-        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
-    },
-});
-const PropertiesPane = (props) => {
-    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." }) }));
-};
-
-const useSwitchStyles = makeStyles({
-    switch: {
-        marginLeft: "auto",
-    },
-    switchSmall: {
-        transform: `scale(.85)`, // workaround since we cannot resize fluent switch
-        transformOrigin: "right",
-    },
-    indicator: {
-        margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.
-    },
-});
-/**
- * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools
- * @param props
- * @returns Switch component
- */
-const Switch = (props) => {
-    Switch.displayName = "Switch";
-    const { size } = useContext(ToolContext);
-    const classes = useSwitchStyles();
-    const [checked, setChecked] = useState(() => props.value ?? false);
-    useEffect(() => {
-        if (props.value != undefined) {
-            setChecked(props.value); // Update local state when props.checked changes
-        }
-    }, [props.value]);
-    const onChange = (event, _) => {
-        props.onChange && props.onChange(event.target.checked);
-        setChecked(event.target.checked);
-    };
-    return (jsx(Switch$1, { className: mergeClasses(classes.switch, size === "small" && classes.switchSmall), indicator: { className: classes.indicator }, checked: checked, disabled: props.disabled, onChange: onChange }));
-};
-
-/**
- * Wraps a switch in a property line
- * @param props - The properties for the switch and property line
- * @returns A React element representing the property line with a switch
- */
-const SwitchPropertyLine = (props) => {
-    SwitchPropertyLine.displayName = "SwitchPropertyLine";
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { label, ...switchProps } = props;
-    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch
-    return (jsx(PropertyLine, { ...props, children: jsx(Switch, { ...switchProps }) }));
-};
-
 /**
  * The unique identity symbol for the scene context service.
  */
@@ -2898,9 +2824,7 @@ const ChildWindow = (props) => {
         return null;
     }
     const { mountNode, renderer } = windowState;
-    return (
-    // Portal targets the body of the child window.
-    jsx(Portal, { mountNode: mountNode, children: jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: jsx(FluentProvider, { style: {
+    return (jsx(Portal, { mountNode: mountNode, children: jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: jsx(FluentProvider, { style: {
                     display: "flex",
                     flexGrow: 1,
                     flexDirection: "column",
@@ -3024,7 +2948,7 @@ const RootComponentServiceIdentity = Symbol("RootComponent");
  * The unique identity symbol for the shell service.
  */
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$R = makeStyles({
+const useStyles$S = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -3237,14 +3161,14 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$R();
+    const classes = useStyles$S();
     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$R();
+    const classes = useStyles$S();
     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);
@@ -3254,7 +3178,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$R();
+    const classes = useStyles$S();
     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))) })] })) }));
@@ -3264,7 +3188,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$R();
+    const classes = useStyles$S();
     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);
@@ -3276,7 +3200,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$R();
+    const classes = useStyles$S();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -3473,7 +3397,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$R();
+                const classes = useStyles$S();
                 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.
@@ -3693,6 +3617,53 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
     };
 }
 
+const useSwitchStyles = makeStyles({
+    switch: {
+        marginLeft: "auto",
+    },
+    switchSmall: {
+        transform: `scale(.85)`, // workaround since we cannot resize fluent switch
+        transformOrigin: "right",
+    },
+    indicator: {
+        margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.
+    },
+});
+/**
+ * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools
+ * @param props
+ * @returns Switch component
+ */
+const Switch = (props) => {
+    Switch.displayName = "Switch";
+    const { size } = useContext(ToolContext);
+    const classes = useSwitchStyles();
+    const [checked, setChecked] = useState(() => props.value ?? false);
+    useEffect(() => {
+        if (props.value != undefined) {
+            setChecked(props.value); // Update local state when props.checked changes
+        }
+    }, [props.value]);
+    const onChange = (event, _) => {
+        props.onChange && props.onChange(event.target.checked);
+        setChecked(event.target.checked);
+    };
+    return (jsx(Switch$1, { className: mergeClasses(classes.switch, size === "small" && classes.switchSmall), indicator: { className: classes.indicator }, checked: checked, disabled: props.disabled, onChange: onChange }));
+};
+
+/**
+ * Wraps a switch in a property line
+ * @param props - The properties for the switch and property line
+ * @returns A React element representing the property line with a switch
+ */
+const SwitchPropertyLine = (props) => {
+    SwitchPropertyLine.displayName = "SwitchPropertyLine";
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { label, ...switchProps } = props;
+    // Ensure the label gets passed to the PropertyLine component and not to the underlying switch
+    return (jsx(PropertyLine, { ...props, children: jsx(Switch, { ...switchProps }) }));
+};
+
 /**
  * The unique identity symbol for the settings service.
  */
@@ -3802,6 +3773,36 @@ const SelectionServiceDefinition = {
     },
 };
 
+/**
+ * A hook that provides a transient state value and a "pulse" function to set it.
+ * The transient value is meant to be consumed immediately after being set, and will be cleared on the next render.
+ * @typeParam T The type of the transient value.
+ * @returns A tuple containing the transient value and a function to "pulse" the state.
+ */
+function useImpulse() {
+    const impulseRef = useRef(undefined);
+    const [, setVersion] = useState(0);
+    const pulse = useCallback((value) => {
+        impulseRef.current = value;
+        setVersion((v) => v + 1);
+    }, []);
+    // Consume the impulse value and clear it
+    const value = impulseRef.current;
+    impulseRef.current = undefined;
+    return [value, pulse];
+}
+
+const useStyles$R = makeStyles({
+    placeholderDiv: {
+        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+    },
+});
+const PropertiesPane = (props) => {
+    const classes = useStyles$R();
+    const entity = props.context;
+    return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
+};
+
 /**
  * The unique identity symbol for the properties service.
  */
@@ -3881,106 +3882,16 @@ const PropertiesServiceDefinition = {
     },
 };
 
-/**
- * Performs a topological sort on a graph.
- * @param graph The set of nodes that make up the graph.
- * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
- * @param onSortedNode A function that is called for each node in the sorted order.
- * @remarks
- * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.
- */
-function SortGraph(graph, getAdjacentNodes, onSortedNode) {
-    const sorter = new GraphUtils();
-    sorter.sort(graph, getAdjacentNodes, onSortedNode);
-}
-/**
- * Traverses a graph.
- * @param graph The set of nodes that make up the graph.
- * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
- * @param onBeforeTraverse A function that is called before traversing each node.
- * @param onAfterTraverse A function that is called after traversing each node.
- * @remarks
- * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.
- */
-function TraverseGraph(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
-    const traverser = new GraphUtils();
-    traverser.traverse(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
-}
-/**
- * A utility class for performing graph operations.
- * @remarks
- * The class allocates new objects, but each operation (e.g. sort, traverse) is allocation free. This is useful when used in the hot path.
- */
-class GraphUtils {
-    constructor() {
-        // Tracks three states:
-        // 1. No entry for the node - this means the node has not been encountered yet during any traversal
-        // 2. Entry with value false - this means the node is currently being traversed (needed to detect cycles)
-        // 3. Entry with value true - this means the node has already been fully traversed (and cycles were not detected)
-        this._traversalState = new Map();
-        this._isTraversing = false;
-    }
-    /**
-     * Performs a topological sort on a graph.
-     * @param graph The set of nodes that make up the graph.
-     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
-     * @param onSortedNode A function that is called for each node in the sorted order.
-     */
-    sort(graph, getAdjacentNodes, onSortedNode) {
-        this.traverse(graph, getAdjacentNodes, undefined, onSortedNode);
-    }
-    /**
-     * Traverses a graph.
-     * @param graph The set of nodes that make up the graph.
-     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
-     * @param onBeforeTraverse A function that is called before traversing each node.
-     * @param onAfterTraverse A function that is called after traversing each node.
-     */
-    traverse(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
-        // Since the traversal state is re-used, disallow re-entrancy through the getAdjacentNodes or onBeforeTraverse or onAfterTraverse callbacks.
-        if (this._isTraversing) {
-            throw new Error("This TopologicalSorter instance is already traversing.");
-        }
-        this._isTraversing = true;
-        try {
-            for (const node of graph) {
-                this._traverseCore(node, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
-            }
-        }
-        finally {
-            this._isTraversing = false;
-            this._traversalState.clear();
-        }
-    }
-    _traverseCore(node, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
-        if (this._traversalState.get(node) !== true) {
-            if (this._traversalState.get(node) === false) {
-                throw new Error("Graph has cycle.");
-            }
-            this._traversalState.set(node, false);
-            onBeforeTraverse?.(node);
-            const adjacentNodes = getAdjacentNodes(node);
-            if (adjacentNodes) {
-                for (const adjacentNode of adjacentNodes) {
-                    this._traverseCore(adjacentNode, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
-                }
-            }
-            this._traversalState.set(node, true);
-            onAfterTraverse?.(node);
-        }
-    }
-}
-
-const NoOpSectionDropProps = {
-    onDragOver: () => { },
-    onDragLeave: () => { },
-    onDrop: () => { },
-};
-const NoOpDragProps = Object.assign({
-    draggable: false,
-    onDragStart: () => { },
-    onDragEnd: () => { },
-}, NoOpSectionDropProps);
+const NoOpSectionDropProps = {
+    onDragOver: () => { },
+    onDragLeave: () => { },
+    onDrop: () => { },
+};
+const NoOpDragProps = Object.assign({
+    draggable: false,
+    onDragStart: () => { },
+    onDragEnd: () => { },
+}, NoOpSectionDropProps);
 /**
  * Hook that provides drag-drop functionality for the scene explorer.
  * Uses vanilla HTML5 drag and drop APIs.
@@ -4151,14 +4062,104 @@ function useSceneExplorerDragDrop(options) {
     };
 }
 
-const SyntheticUniqueIds = new WeakMap();
-function GetEntityId(entity) {
+/**
+ * Performs a topological sort on a graph.
+ * @param graph The set of nodes that make up the graph.
+ * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+ * @param onSortedNode A function that is called for each node in the sorted order.
+ * @remarks
+ * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.
+ */
+function SortGraph(graph, getAdjacentNodes, onSortedNode) {
+    const sorter = new GraphUtils();
+    sorter.sort(graph, getAdjacentNodes, onSortedNode);
+}
+/**
+ * Traverses a graph.
+ * @param graph The set of nodes that make up the graph.
+ * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+ * @param onBeforeTraverse A function that is called before traversing each node.
+ * @param onAfterTraverse A function that is called after traversing each node.
+ * @remarks
+ * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils.
+ */
+function TraverseGraph(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
+    const traverser = new GraphUtils();
+    traverser.traverse(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
+}
+/**
+ * A utility class for performing graph operations.
+ * @remarks
+ * The class allocates new objects, but each operation (e.g. sort, traverse) is allocation free. This is useful when used in the hot path.
+ */
+class GraphUtils {
+    constructor() {
+        // Tracks three states:
+        // 1. No entry for the node - this means the node has not been encountered yet during any traversal
+        // 2. Entry with value false - this means the node is currently being traversed (needed to detect cycles)
+        // 3. Entry with value true - this means the node has already been fully traversed (and cycles were not detected)
+        this._traversalState = new Map();
+        this._isTraversing = false;
+    }
+    /**
+     * Performs a topological sort on a graph.
+     * @param graph The set of nodes that make up the graph.
+     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+     * @param onSortedNode A function that is called for each node in the sorted order.
+     */
+    sort(graph, getAdjacentNodes, onSortedNode) {
+        this.traverse(graph, getAdjacentNodes, undefined, onSortedNode);
+    }
+    /**
+     * Traverses a graph.
+     * @param graph The set of nodes that make up the graph.
+     * @param getAdjacentNodes A function that returns the adjacent nodes for a given node.
+     * @param onBeforeTraverse A function that is called before traversing each node.
+     * @param onAfterTraverse A function that is called after traversing each node.
+     */
+    traverse(graph, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
+        // Since the traversal state is re-used, disallow re-entrancy through the getAdjacentNodes or onBeforeTraverse or onAfterTraverse callbacks.
+        if (this._isTraversing) {
+            throw new Error("This TopologicalSorter instance is already traversing.");
+        }
+        this._isTraversing = true;
+        try {
+            for (const node of graph) {
+                this._traverseCore(node, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
+            }
+        }
+        finally {
+            this._isTraversing = false;
+            this._traversalState.clear();
+        }
+    }
+    _traverseCore(node, getAdjacentNodes, onBeforeTraverse, onAfterTraverse) {
+        if (this._traversalState.get(node) !== true) {
+            if (this._traversalState.get(node) === false) {
+                throw new Error("Graph has cycle.");
+            }
+            this._traversalState.set(node, false);
+            onBeforeTraverse?.(node);
+            const adjacentNodes = getAdjacentNodes(node);
+            if (adjacentNodes) {
+                for (const adjacentNode of adjacentNodes) {
+                    this._traverseCore(adjacentNode, getAdjacentNodes, onBeforeTraverse, onAfterTraverse);
+                }
+            }
+            this._traversalState.set(node, true);
+            onAfterTraverse?.(node);
+        }
+    }
+}
+
+const SyntheticUniqueIds$1 = new WeakMap();
+function GetEntityId$1(entity) {
     if ("uniqueId" in entity && typeof entity.uniqueId === "number") {
         return entity.uniqueId;
     }
-    let id = SyntheticUniqueIds.get(entity);
+    let id = SyntheticUniqueIds$1.get(entity);
     if (!id) {
-        SyntheticUniqueIds.set(entity, (id = UniqueIdGenerator.UniqueId));
+        SyntheticUniqueIds$1.set(entity, (id = UniqueIdGenerator.UniqueId));
     }
     return id;
 }
@@ -4178,7 +4179,7 @@ function GetEntitySection(entityItem) {
 }
 function ExpandOrCollapseAll(treeItem, open, openItems) {
     const addOrRemove = open ? openItems.add.bind(openItems) : openItems.delete.bind(openItems);
-    TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? GetEntityId(treeItem.entity) : treeItem.sectionName));
+    TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? GetEntityId$1(treeItem.entity) : treeItem.sectionName));
 }
 function GetCommandHotKeyDescription(command) {
     if (!command.hotKey) {
@@ -4474,16 +4475,16 @@ 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(entityItem.entity), 
+    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(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: 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,
                         }, main: {
                             // Prevent the "main" content (the Body1 below) from growing too large and pushing the actions/aside out of view.
                             className: classes.treeItemLayoutMain,
-                        }, children: jsx(Tooltip$1, { content: name, relationship: "description", children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }) }, GetEntityId(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] }) })] }));
+                        }, 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();
@@ -4506,7 +4507,7 @@ const SceneExplorer = (props) => {
             if (targetEntity) {
                 setOpenItems((prev) => {
                     const next = new Set(prev);
-                    next.add(GetEntityId(targetEntity));
+                    next.add(GetEntityId$1(targetEntity));
                     return next;
                 });
             }
@@ -4523,7 +4524,7 @@ const SceneExplorer = (props) => {
         };
         const onSceneItemRemoved = (item) => {
             setSceneVersion((version) => version + 1);
-            if (openItems.delete(GetEntityId(item))) {
+            if (openItems.delete(GetEntityId$1(item))) {
                 setOpenItems(new Set(openItems));
             }
             if (item === selectedEntity) {
@@ -4579,7 +4580,7 @@ const SceneExplorer = (props) => {
                     parent.children = [];
                 }
                 parent.children.push(treeItemData);
-                allTreeItems.set(GetEntityId(entity), treeItemData);
+                allTreeItems.set(GetEntityId$1(entity), treeItemData);
                 return treeItemData;
             };
             const rootEntityTreeItems = rootEntities.map((entity) => createEntityTreeItemData(entity, sectionTreeItem));
@@ -4627,7 +4628,7 @@ const SceneExplorer = (props) => {
                 TraverseGraph(children, 
                 // Get children
                 (treeItem) => {
-                    if (filter || openItems.has(GetEntityId(treeItem.entity))) {
+                    if (filter || openItems.has(GetEntityId$1(treeItem.entity))) {
                         if (!treeItem.children) {
                             return null;
                         }
@@ -4675,8 +4676,8 @@ const SceneExplorer = (props) => {
     }, [sceneTreeItem, sectionTreeItems, allTreeItems, openItems, itemsFilter, isSorted]);
     const getParentStack = useCallback((entity) => {
         const parentStack = [];
-        for (let treeItem = allTreeItems.get(GetEntityId(entity)); treeItem; treeItem = treeItem?.type === "entity" ? treeItem.parent : undefined) {
-            parentStack.push(treeItem.type === "entity" ? GetEntityId(treeItem.entity) : treeItem.sectionName);
+        for (let treeItem = allTreeItems.get(GetEntityId$1(entity)); treeItem; treeItem = treeItem?.type === "entity" ? treeItem.parent : undefined) {
+            parentStack.push(treeItem.type === "entity" ? GetEntityId$1(treeItem.entity) : treeItem.sectionName);
         }
         // The first item will be the entity itself, so just remove it.
         parentStack.shift();
@@ -4684,7 +4685,7 @@ const SceneExplorer = (props) => {
     }, [allTreeItems]);
     const selectEntity = useCallback((selectedEntity) => {
         const entity = selectedEntity;
-        if (entity && GetEntityId(entity) != undefined) {
+        if (entity && GetEntityId$1(entity) != undefined) {
             const parentStack = getParentStack(entity);
             if (parentStack.length > 0) {
                 const newOpenItems = new Set(openItems);
@@ -4756,7 +4757,7 @@ const SceneExplorer = (props) => {
                                 return name;
                             };
                             const dragProps = createDragProps(item.entity, getName, section.dragDropConfig);
-                            return (jsx(EntityTreeItem, { scene: scene, entityItem: item, isSelected: selectedEntity === item.entity, select: () => setSelectedEntity?.(item.entity), isFiltering: !!itemsFilter, commandProviders: entityCommandProviders, expandAll: () => expandAll(item), collapseAll: () => collapseAll(item), isDragging: draggedEntity === item.entity, isDropTarget: dropTarget === item.entity, ...dragProps }, GetEntityId(item.entity)));
+                            return (jsx(EntityTreeItem, { scene: scene, entityItem: item, isSelected: selectedEntity === item.entity, select: () => setSelectedEntity?.(item.entity), isFiltering: !!itemsFilter, commandProviders: entityCommandProviders, expandAll: () => expandAll(item), collapseAll: () => collapseAll(item), isDragging: draggedEntity === item.entity, isDropTarget: dropTarget === item.entity, ...dragProps }, GetEntityId$1(item.entity)));
                         }
                     } }) })] }));
 };
@@ -6347,7 +6348,10 @@ const SpinButton = forwardRef((props, ref) => {
             // Update edit text to reflect the new value so the user sees the change
             setEditText(formatValue(newValue));
         }
-        HandleKeyDown(event);
+        // Ignore modifier keys so the useKeyState calls above can still observe them.
+        if (event.key !== "Alt" && event.key !== "Shift") {
+            HandleKeyDown(event);
+        }
     }, [value, step, constrainValue, tryCommitValue, commitEditText, formatValue]);
     const id = useId("spin-button2");
     // Real-time validation: when editing, validate the expression; otherwise validate the committed value.
@@ -6908,35 +6912,18 @@ const PerformanceViewer = (props) => {
     return (jsxs("div", { className: classes.container, children: [jsx(Button, { className: classes.returnButton, onClick: onReturnToPlayheadClick, label: "Return", title: "Return to Playhead" }), jsx("div", { className: classes.sidebar, children: jsx(PerformanceSidebar, { collector: performanceCollector, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable }) }), jsx("div", { className: classes.graph, children: jsx(CanvasGraph, { returnToPlayheadObservable: returnToLiveObservable, layoutObservable: layoutObservable, scene: scene, collector: performanceCollector, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable, initialGraphSize: initialGraphSize }) })] }));
 };
 
-function AddStrategies(perfCollector) {
-    perfCollector.addCollectionStrategies(...DefaultStrategiesList);
-    if (PressureObserverWrapper.IsAvailable) {
-        // Do not enable for now as the Pressure API does not
-        // report factors at the moment.
-        // perfCollector.addCollectionStrategies({
-        //     strategyCallback: PerfCollectionStrategy.ThermalStrategy(),
-        //     category: IPerfMetadataCategory.FrameSteps,
-        //     hidden: true,
-        // });
-        // perfCollector.addCollectionStrategies({
-        //     strategyCallback: PerfCollectionStrategy.PowerSupplyStrategy(),
-        //     category: IPerfMetadataCategory.FrameSteps,
-        //     hidden: true,
-        // });
-        perfCollector.addCollectionStrategies({
-            strategyCallback: PerfCollectionStrategy.PressureStrategy(),
-            category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */,
-            hidden: true,
-        });
-    }
-}
+/**
+ * Performance metadata categories for grouping strategies.
+ */
 var PerfMetadataCategory;
 (function (PerfMetadataCategory) {
     PerfMetadataCategory["Count"] = "Count";
     PerfMetadataCategory["FrameSteps"] = "Frame Steps Duration";
 })(PerfMetadataCategory || (PerfMetadataCategory = {}));
-// list of strategies to add to perf graph automatically.
-const DefaultStrategiesList = [
+/**
+ * Default list of performance collection strategies used by the performance viewer and CLI perf trace.
+ */
+const DefaultPerfStrategies = [
     { strategyCallback: PerfCollectionStrategy.FpsStrategy() },
     { strategyCallback: PerfCollectionStrategy.TotalMeshesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
     { strategyCallback: PerfCollectionStrategy.ActiveMeshesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
@@ -6960,6 +6947,21 @@ const DefaultStrategiesList = [
     { strategyCallback: PerfCollectionStrategy.InterFrameStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
     { strategyCallback: PerfCollectionStrategy.GpuFrameTimeStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
 ];
+
+/**
+ * Adds default and platform-specific performance collection strategies to the collector.
+ * @param perfCollector - The performance viewer collector to add strategies to.
+ */
+function AddStrategies(perfCollector) {
+    perfCollector.addCollectionStrategies(...DefaultPerfStrategies);
+    if (PressureObserverWrapper.IsAvailable) {
+        perfCollector.addCollectionStrategies({
+            strategyCallback: PerfCollectionStrategy.PressureStrategy(),
+            category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */,
+            hidden: true,
+        });
+    }
+}
 // arbitrary window size
 const InitialWindowSize = { width: 1024, height: 512 };
 const InitialGraphSize = new Vector2(724, 512);
@@ -7234,6 +7236,11 @@ const ToolsServiceDefinition = {
     },
 };
 
+/**
+ * The unique identity symbol for the react context service.
+ */
+const ReactContextServiceIdentity = Symbol("ReactContextService");
+
 const useStyles$J = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
@@ -7434,8 +7441,8 @@ const WatcherServiceIdentity = Symbol("WatcherService");
 const WatcherServiceDefinition = {
     friendlyName: "Watcher Service",
     produces: [WatcherServiceIdentity],
-    consumes: [SettingsStoreIdentity],
-    factory: (settingsStore) => {
+    consumes: [SettingsStoreIdentity, ReactContextServiceIdentity],
+    factory: (settingsStore, reactContextService) => {
         let refreshObservable = null;
         let pollingHandle = null;
         const applySettings = () => {
@@ -7465,7 +7472,7 @@ const WatcherServiceDefinition = {
             }
         });
         applySettings();
-        return {
+        const watcherService = {
             watchProperty(target, propertyKey, onChanged) {
                 if (refreshObservable) {
                     let previousValue = target[propertyKey];
@@ -7490,6 +7497,7 @@ const WatcherServiceDefinition = {
                 refreshObservable?.notifyObservers();
             },
             dispose: () => {
+                contextHandle.dispose();
                 if (pollingHandle !== null) {
                     clearInterval(pollingHandle);
                     pollingHandle = null;
@@ -7499,6 +7507,9 @@ const WatcherServiceDefinition = {
                 settingsStoreObserver.remove();
             },
         };
+        // Register the WatcherContext provider so React components can access the watcher service.
+        const contextHandle = reactContextService.addContext(WatcherContext.Provider, watcherService);
+        return watcherService;
     },
 };
 const WatchModes = [
@@ -7844,241 +7855,16 @@ const GizmoServiceDefinition = {
     },
 };
 
-// Created by running the following command from the packages/dev/inspector-v2 directory:
-// npm run makeAvatar https://raw.githubusercontent.com/BabylonJS/Brand-Toolkit/master/babylon_logo/fullColor/babylon_logo_color.png 0.8
-const BabylonLogoBase64 = "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsSAAALEgHS3X78AAAFXElEQVR4nO2WbWwTdRzHu+EbYmLgpeILwcQXvvCFLwwGxthG1/Z6d33Ag22FDXAE98wixsCbSiS+4IUhxoQYoyiSGKcogsjaa9c9dw9sbdfrbevW611nYTDYliCRsbv7mrt2sPiGUTZf8Uua9P7/u9/383v4//MzGJ5bjgaDIQ8Ms66FYdYZ/m+D250PgyF/GUy+trb2wshEnfmPvKnG3fukJoZ+vI912vqapRsGg+481cy8I9RSbTONNkw32pXJatMvCcvmN7Q9t5ad1QSBJuzOpHvmo7JXkrX01zfq6Yd3mhxIHrHIQuUOee5EJR4MtN0D8Bnm5jbo37nd+c/UH1jmINXcvF6scxxL1VJ3Zo86kKol5UTVTlmsIXH3p68g35uXASgAoCqyCKBKy4Lup0UL4Bn6Q2piaKmWjM0etSNdTyvCoV2LwsES9daXbixMCZomoKpQFFkFsKg9aUtzv//QM7ln6zYdIlu6lUVuyLw8e7zsLbGGunqrXq8zhMMmOVFZqKQ/+QD3w8GMsB6xAmi/rN0PB+X0qQZ5psGGG/W0LNXT5/9x731tRSDubKquWJlN3H7H7N1GO1K1hDy5v1BJNe/BvPcilIUHj4TVxUWosqJnYMlmfz0H4X0jhANF8l915OJ8oxORCnv0vHHfi0+EcGcBBpwVW9hSaqGdIBSu0qrOXvgCyvzsUsgZ4WVR6zDKYxD59g3cPvspwuVmpZ2g4DPR0khNzcYVA3QwzGY/QT/wFpnBMuVqShKwsCSQDVZVVaQ9LG519z7qgyXAhwCmxnh4TJTSZiThM1NioKpqw4oBWKdzi89CLbDFZrSVudRIfzti0UFMpyXIioJ5fhSDH36Ma9uL0LrTiPDJU/hbSkFWZMxMpyGK4xjv64KPsCmBUit8ZlrqqqjYmBvAXpcaG+pFbGQA0egAOF8rfCZSF/dZaC06/Ll1B9qZciT5CIQED0mawMRg7+oBcEM9OgA/FsbQby1gjQS8JgreUiu8pSQ8Riv8tt2YHO6HKMbXEiCE0KWf4Skh0ElT4A+Q4CpJBAgrWGo3JkMDawzADyPcehlhFwnx0C5IdRRSdSSE/TsRqi5HIhqCmBxfA4DBbh0gFulHjLuO8bZLSJyqh3jIiGS1CeKZE0gNd0FMxiFOaj0Qx8RAT+4AHQyzmTUvAVSo2gngR0PgQkEdguND4LghxC9+A9F7EWI6iaQ0qYsnJ2JITUtIhAe1JtUB2Kc9hl3Oii1+M7XgNRIKW2pVe44fx0iXD6MTI/pxjA0HwUX6wcejSE4JEBM8knFOr3/qpoR4dzt6m4/BW2JW/CYSfgstjVQ8xUV0hWE2BQjb3SBh0zpe9hQUKz7Kif4zn4MbDoKfiIAL92E00p8RFsYwdVOCwIVw/fRp/WheKyjR4OVB0ok2whb17FvBVbz8hU6GeZMl6MudFhu6CJsWjezZXqwEXJUYuvA9eH4IY+MRSGlBb7zId+cQeK8MrduKFO8ui9xttaPDQi+yhO3bPlf1q8t9P5X5bU7Cb6EjQasdAQuteIpMi55Co9pZ14ARz1XwrX+g8/ARtBYUq57iUrmDsKk9hF2re0e7nXk3Z2FoA4khM5D0NjPrfVZ7k99E3Q6SDu0mVDwFJTJrpuE1EmgtKJHbzJTSp+2ZSYGlHS4Aejm1oWaptDlZiz6SZU+Hy/UyS9jOBsz0Qo/VDi3VPiMh95IO+M3UPdbqONnnanhpKYBVm5RhMOS5CwtfcGdH8Q7Hnre9FortJvQ6K6yF+tG/t/J1bU+LVofOJe1PMs3p8kHTRzvKtB7JPuatmfB/TU8vHgutarpz7Y/nZsjR/gUhEcwHmuaM9wAAAABJRU5ErkJggg==";
-const BabylonWebResources = {
-    homepage: "https://www.babylonjs.com",
-    repository: "https://github.com/BabylonJS/Babylon.js",
-    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
-    author: {
-        name: "Babylon.js",
-        avatar: BabylonLogoBase64,
-    },
-};
+const InstalledExtensionsKey = "Extensions/InstalledExtensions";
+const ExtensionInstalledKeyPrefix = "Extensions/IsExtensionInstalled";
+function GetExtensionInstalledKey(name) {
+    return `${ExtensionInstalledKeyPrefix}/${name}`;
+}
+function GetExtensionIdentity(feed, name) {
+    return `${feed}/${name}`;
+}
 /**
- * Well-known default built in extensions for the Inspector.
- */
-const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
-    {
-        name: "Quick Creation Tools (Preview)",
-        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-BtsSLeMY.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-Bzs-Ykos.js'),
-    },
-]);
-
-/**
- * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
- * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
- * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
- * @returns Component wrapping a colorPicker component with a property line
- */
-const ColorPropertyLine = forwardRef((props, ref) => {
-    ColorPropertyLine.displayName = "ColorPropertyLine";
-    const [color, setColor] = useState(props.value);
-    useEffect(() => {
-        setColor(props.value);
-    }, [props.value]);
-    const onSliderChange = (value, key) => {
-        let newColor;
-        if (key === "a") {
-            newColor = Color4.FromColor3(color, value);
-        }
-        else {
-            newColor = color.clone();
-            newColor[key] = value / 255;
-        }
-        setColor(newColor); // Create a new object to trigger re-render
-        props.onChange(newColor);
-    };
-    const onColorPickerChange = (newColor) => {
-        setColor(newColor);
-        props.onChange(newColor);
-    };
-    return (jsx(PropertyLine, { ref: ref, ...props, expandedContent: color ? jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }) : undefined, children: jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
-});
-const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }));
-const Color3PropertyLine = ColorPropertyLine;
-const Color4PropertyLine = ColorPropertyLine;
-
-const useStyles$H = makeStyles({
-    uniformWidth: {
-        ...UniformWidthStyling,
-    },
-});
-/**
- * Wraps a text input in a property line
- * @param props - PropertyLineProps and InputProps
- * @returns property-line wrapped input component
- */
-const TextInputPropertyLine = (props) => {
-    TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    const classes = useStyles$H();
-    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
-};
-/**
- * Wraps a number input in a property line
- * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)
- * @param props - PropertyLineProps and InputProps
- * @returns property-line wrapped input component
- */
-const NumberInputPropertyLine = (props) => {
-    NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    const classes = useStyles$H();
-    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
-};
-
-const HasZ = (vector) => !(vector instanceof Vector2);
-const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaternion;
-/**
- * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
- * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
- * @param props
- * @returns
- */
-const TensorPropertyLine = (props) => {
-    TensorPropertyLine.displayName = "TensorPropertyLine";
-    const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
-    const formatted = (val) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);
-    const [vector, setVector] = useState(props.value);
-    const { min, max } = props;
-    const onChange = (val, key) => {
-        const value = props.valueConverter ? props.valueConverter.to(val) : val;
-        const newVector = vector.clone();
-        newVector[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe
-        setVector(newVector);
-        props.onChange(newVector);
-    };
-    useEffect(() => {
-        setVector(props.value);
-    }, [props.value, props.expandedContent]);
-    return (jsx(PropertyLine, { ...props, expandedContent: jsxs(Fragment, { children: [props.expandedContent, vector ? (jsx(VectorSliders, { vector: vector, min: min, max: max, unit: props.unit, step: props.step, precision: props.precision, converted: converted, onChange: onChange })) : undefined] }), children: jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
-};
-const VectorSliders = ({ vector, min, max, unit, step, precision, converted, onChange }) => (jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: unit, step: step, precision: precision }), jsx(NumberInputPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: unit, step: step, precision: precision }), HasZ(vector) && (jsx(NumberInputPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: unit, step: step, precision: precision })), HasW(vector) && (jsx(NumberInputPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: unit, step: step, precision: precision }))] }));
-const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
-const RotationVectorPropertyLine = (props) => {
-    RotationVectorPropertyLine.displayName = "RotationVectorPropertyLine";
-    const step = props.useDegrees ? 1 : 0.01;
-    const precision = props.useDegrees ? 1 : 2;
-    return (jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "°" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, step: step, precision: precision }));
-};
-const QuaternionPropertyLineInternal = TensorPropertyLine;
-const QuaternionPropertyLine = (props) => {
-    QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
-    const step = props.useDegrees ? 1 : 0.01;
-    const precision = props.useDegrees ? 1 : 2;
-    const [quat, setQuat] = useState(props.value);
-    useEffect(() => {
-        setQuat(props.value);
-    }, [props.value]);
-    // Extract only the properties that exist on QuaternionPropertyLineProps
-    const { useEuler, ...restProps } = props;
-    const onQuatChange = (val) => {
-        setQuat(val);
-        props.onChange(val);
-    };
-    const onEulerChange = (val) => {
-        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
-        onQuatChange(quat);
-    };
-    return useEuler ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, onChange: onEulerChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision, expandedContent: jsx(TextPropertyLine, { label: "Quaternion", value: `[${quat.x.toFixed(4)}, ${quat.y.toFixed(4)}, ${quat.z.toFixed(4)}, ${quat.w.toFixed(4)}]` }) })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, onChange: onQuatChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision }));
-};
-const Vector2PropertyLine = TensorPropertyLine;
-const Vector3PropertyLine = TensorPropertyLine;
-const Vector4PropertyLine = TensorPropertyLine;
-
-function IsInspectableObject(entity) {
-    return !!entity.inspectableCustomProperties;
-}
-const LegacyInspectableObjectPropertiesServiceDefinition = {
-    friendlyName: "Additional Nodes",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => {
-        const propertiesSectionRegistration = propertiesService.addSection({
-            identity: "Custom",
-            order: Number.MAX_SAFE_INTEGER,
-        });
-        const propertiesContentRegistration = propertiesService.addSectionContent({
-            key: "Additional Nodes Properties",
-            predicate: (entity) => IsInspectableObject(entity),
-            content: [
-                {
-                    section: "Custom",
-                    component: ({ context }) => {
-                        return (jsx(Fragment, { children: (context.inspectableCustomProperties ?? []).map((prop) => {
-                                const commonProps = {
-                                    target: context,
-                                    propertyKey: prop.propertyName,
-                                    label: prop.label,
-                                    ignoreNullable: true,
-                                    defaultValue: undefined,
-                                };
-                                switch (prop.type) {
-                                    case 0 /* InspectableType.Checkbox */:
-                                        return jsx(BoundProperty, { ...commonProps, component: SwitchPropertyLine }, prop.propertyName);
-                                    case 1 /* InspectableType.Slider */:
-                                        return (jsx(BoundProperty, { ...commonProps, min: prop.min, max: prop.max, step: prop.step, component: SyncedSliderPropertyLine }, prop.propertyName));
-                                    case 2 /* InspectableType.Vector3 */:
-                                        return jsx(BoundProperty, { ...commonProps, component: Vector3PropertyLine }, prop.propertyName);
-                                    case 3 /* InspectableType.Quaternion */:
-                                        return jsx(BoundProperty, { ...commonProps, component: QuaternionPropertyLine }, prop.propertyName);
-                                    case 4 /* InspectableType.Color3 */:
-                                        return jsx(BoundProperty, { ...commonProps, component: Color3PropertyLine }, prop.propertyName);
-                                    case 5 /* InspectableType.String */:
-                                        return jsx(BoundProperty, { ...commonProps, component: TextInputPropertyLine }, prop.propertyName);
-                                    case 6 /* InspectableType.Button */:
-                                        return jsx(ButtonLine, { label: prop.label, onClick: () => prop.callback?.() }, prop.propertyName);
-                                    case 7 /* InspectableType.Options */:
-                                        return jsx(BoundProperty, { ...commonProps, component: DropdownPropertyLine, options: prop.options ?? [] }, prop.propertyName);
-                                    case 8 /* InspectableType.Tab */:
-                                        return jsx(BoundProperty, { ...commonProps, component: TextPropertyLine }, prop.propertyName);
-                                    case 9 /* InspectableType.FileButton */:
-                                        return (jsx(FileUploadLine, { label: prop.label, accept: prop.accept ?? "", onClick: (files) => {
-                                                if (files.length > 0 && prop.fileCallback) {
-                                                    prop.fileCallback(files[0]);
-                                                }
-                                            } }, prop.propertyName));
-                                    case 10 /* InspectableType.Vector2 */:
-                                        return jsx(BoundProperty, { ...commonProps, component: Vector2PropertyLine }, prop.propertyName);
-                                }
-                            }) }));
-                    },
-                },
-            ],
-        });
-        return {
-            dispose: () => {
-                propertiesSectionRegistration.dispose();
-                propertiesContentRegistration.dispose();
-            },
-        };
-    },
-};
-
-const ExtensionManagerContext = createContext(undefined);
-function useExtensionManager() {
-    return useContext(ExtensionManagerContext)?.extensionManager;
-}
-
-const InstalledExtensionsKey = "Extensions/InstalledExtensions";
-const ExtensionInstalledKeyPrefix = "Extensions/IsExtensionInstalled";
-function GetExtensionInstalledKey(name) {
-    return `${ExtensionInstalledKeyPrefix}/${name}`;
-}
-function GetExtensionIdentity(feed, name) {
-    return `${feed}/${name}`;
-}
-/**
- * Manages the installation, uninstallation, enabling, and disabling of extensions.
+ * Manages the installation, uninstallation, enabling, and disabling of extensions.
  */
 class ExtensionManager {
     constructor(_namespace, _serviceContainer, _feeds, _onInstallFailed) {
@@ -8363,12 +8149,20 @@ function SortServiceDefinitions(serviceDefinitions) {
  * passing dependencies through to services, and disposing of services when the container is disposed.
  */
 class ServiceContainer {
-    constructor(_friendlyName) {
+    /**
+     * Creates a new ServiceContainer.
+     * @param _friendlyName A human-readable name for debugging.
+     * @param _parent An optional parent container. Dependencies not found locally will be resolved from the parent.
+     */
+    constructor(_friendlyName, _parent) {
         this._friendlyName = _friendlyName;
+        this._parent = _parent;
         this._isDisposed = false;
         this._serviceDefinitions = new Map();
         this._serviceDependents = new Map();
         this._serviceInstances = new Map();
+        this._children = new Set();
+        _parent?._children.add(this);
     }
     /**
      * Adds a set of service definitions in the service container.
@@ -8429,30 +8223,61 @@ class ServiceContainer {
         service.produces?.forEach((contract) => {
             this._serviceDefinitions.set(contract, service);
         });
-        const dependencies = service.consumes?.map((dependency) => {
-            const dependencyDefinition = this._serviceDefinitions.get(dependency);
-            if (!dependencyDefinition) {
-                throw new Error(`Service '${dependency.toString()}' has not been registered in the '${this._friendlyName}' container.`);
-            }
-            let dependentDefinitions = this._serviceDependents.get(dependencyDefinition);
+        const dependencies = service.consumes?.map((contract) => this._resolveDependency(contract, service)) ?? [];
+        this._serviceInstances.set(service, await service.factory(...dependencies, abortSignal));
+    }
+    /**
+     * Resolves a dependency by contract identity for a consuming service.
+     * Checks local services first, then walks up the parent chain.
+     * Registers the consumer as a dependent in whichever container owns the dependency.
+     * @param contract The contract identity to resolve.
+     * @param consumer The service definition that consumes this dependency.
+     * @returns The resolved service instance.
+     */
+    _resolveDependency(contract, consumer) {
+        const definition = this._serviceDefinitions.get(contract);
+        if (definition) {
+            let dependentDefinitions = this._serviceDependents.get(definition);
             if (!dependentDefinitions) {
-                this._serviceDependents.set(dependencyDefinition, (dependentDefinitions = new Set()));
+                this._serviceDependents.set(definition, (dependentDefinitions = new Set()));
             }
-            dependentDefinitions.add(service);
-            const dependencyInstance = this._serviceInstances.get(dependencyDefinition);
-            if (!dependencyInstance) {
-                throw new Error(`Service '${dependency.toString()}' has not been instantiated in the '${this._friendlyName}' container.`);
+            dependentDefinitions.add(consumer);
+            const instance = this._serviceInstances.get(definition);
+            if (!instance) {
+                throw new Error(`Service '${contract.toString()}' has not been instantiated in the '${this._friendlyName}' container.`);
             }
-            return dependencyInstance;
-        }) ?? [];
-        this._serviceInstances.set(service, await service.factory(...dependencies, abortSignal));
+            return instance;
+        }
+        if (this._parent) {
+            return this._parent._resolveDependency(contract, consumer);
+        }
+        throw new Error(`Service '${contract.toString()}' has not been registered in the '${this._friendlyName}' container.`);
+    }
+    /**
+     * Removes a consumer from the dependent set for a given contract, checking locally first then the parent chain.
+     * @param contract The contract identity.
+     * @param consumer The service definition to remove as a dependent.
+     */
+    _removeDependentFromChain(contract, consumer) {
+        const definition = this._serviceDefinitions.get(contract);
+        if (definition) {
+            const dependentDefinitions = this._serviceDependents.get(definition);
+            if (dependentDefinitions) {
+                dependentDefinitions.delete(consumer);
+                if (dependentDefinitions.size === 0) {
+                    this._serviceDependents.delete(definition);
+                }
+            }
+            return;
+        }
+        this._parent?._removeDependentFromChain(contract, consumer);
     }
     _removeService(service) {
         if (this._isDisposed) {
             throw new Error(`'${this._friendlyName}' container is disposed.`);
         }
         const serviceDependents = this._serviceDependents.get(service);
-        if (serviceDependents) {
+        if (serviceDependents && serviceDependents.size > 0) {
             throw new Error(`Service '${service.friendlyName}' has dependents: ${Array.from(serviceDependents)
                 .map((dependent) => dependent.friendlyName)
                 .join(", ")}`);
@@ -8464,32 +8289,34 @@ class ServiceContainer {
         service.produces?.forEach((contract) => {
             this._serviceDefinitions.delete(contract);
         });
-        service.consumes?.forEach((dependency) => {
-            const dependencyDefinition = this._serviceDefinitions.get(dependency);
-            if (dependencyDefinition) {
-                const dependentDefinitions = this._serviceDependents.get(dependencyDefinition);
-                if (dependentDefinitions) {
-                    dependentDefinitions.delete(service);
-                    if (dependentDefinitions.size === 0) {
-                        this._serviceDependents.delete(dependencyDefinition);
-                    }
-                }
-            }
+        // Remove this service as a dependent from each of its consumed dependencies (local or in parent chain).
+        service.consumes?.forEach((contract) => {
+            this._removeDependentFromChain(contract, service);
         });
     }
     /**
      * Disposes the service container and all contained services.
+     * Throws if this container is still a parent of any live child containers.
      */
     dispose() {
+        if (this._children.size > 0) {
+            throw new Error(`'${this._friendlyName}' container cannot be disposed because it has ${this._children.size} active child container(s).`);
+        }
         Array.from(this._serviceInstances.keys()).reverse().forEach(this._removeService.bind(this));
         this._serviceInstances.clear();
         this._serviceDependents.clear();
         this._serviceDefinitions.clear();
+        this._parent?._children.delete(this);
         this._isDisposed = true;
     }
 }
 
-const useStyles$G = makeStyles({
+const ExtensionManagerContext = createContext(undefined);
+function useExtensionManager() {
+    return useContext(ExtensionManagerContext)?.extensionManager;
+}
+
+const useStyles$H = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -8508,7 +8335,7 @@ const ThemeSelectorServiceDefinition = {
             teachingMoment: false,
             order: -300,
             component: () => {
-                const classes = useStyles$G();
+                const classes = useStyles$H();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -8525,7 +8352,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$F = makeStyles({
+const useStyles$G = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8551,13 +8378,16 @@ const useStyles$F = makeStyles({
         color: tokens.colorPaletteRedForeground1,
     },
 });
+const ReactContextsWrapper = ({ contexts, children }) => {
+    return jsx(Fragment, { children: contexts.reduceRight((acc, entry) => createElement(entry.provider, { value: entry.value }, acc), children) });
+};
 /**
  * Creates a modular tool with a base set of common tool services, including the toolbar/side pane basic UI layout.
  * @param options The options for the tool.
  * @returns A token that can be used to dispose of the tool.
  */
 function MakeModularTool(options) {
-    const { namespace, containerElement, serviceDefinitions, themeMode, showThemeSelector = true, extensionFeeds = [] } = options;
+    const { namespace, containerElement, serviceDefinitions, themeMode, showThemeSelector = true, extensionFeeds = [], parentContainer } = options;
     // Create the settings store immediately as it will be exposed to services and through React context.
     const settingsStore = new SettingsStore(namespace);
     // If a theme mode is provided, just write the setting so it is the active theme.
@@ -8565,38 +8395,62 @@ function MakeModularTool(options) {
         settingsStore.writeSetting(ThemeModeSettingDescriptor, themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$F();
+        const classes = useStyles$G();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
         const [extensionInstallError, setExtensionInstallError] = useState();
-        const [bootstrapServices, setBootstrapServices] = useState();
+        const [rootComponentService, setRootComponentService] = useState();
+        const [contexts, updateContexts] = useReducer((state, action) => {
+            switch (action.type) {
+                case "add":
+                    return [...state, action.entry].sort((a, b) => a.order - b.order);
+                case "remove":
+                    return state.filter((e) => e.provider !== action.provider);
+                case "update":
+                    return state.map((e) => (e.provider === action.provider ? { ...e, value: action.value } : e));
+            }
+        }, []);
         // This is the main async initialization.
         useEffect(() => {
             const initializeExtensionManagerAsync = async () => {
-                const serviceContainer = new ServiceContainer("ModularToolContainer");
+                const serviceContainer = new ServiceContainer("ModularToolContainer", parentContainer);
                 // Expose the settings store as a service so other services can read/write settings.
                 await serviceContainer.addServiceAsync({
                     friendlyName: "Settings Store",
                     produces: [SettingsStoreIdentity],
                     factory: () => settingsStore,
                 });
-                // Register watcher service early since many other services will rely on it.
-                // TODO: Really this should be in the Inspector layer, but we would need a way
-                //       to setup the WatcherContext.Provider before the root component is rendered
-                //       for that to work, since components will use the WatcherContext.
-                await serviceContainer.addServiceAsync(WatcherServiceDefinition);
+                // Expose the react context service so other services can add React context providers.
+                await serviceContainer.addServiceAsync({
+                    friendlyName: "React Context Service",
+                    produces: [ReactContextServiceIdentity],
+                    factory: () => ({
+                        addContext(provider, initialValue, options) {
+                            const typedProvider = provider;
+                            updateContexts({ type: "add", entry: { provider: typedProvider, value: initialValue, order: options?.order ?? 0 } });
+                            return {
+                                updateValue: (newValue) => {
+                                    updateContexts({ type: "update", provider: typedProvider, value: newValue });
+                                },
+                                dispose: () => {
+                                    updateContexts({ type: "remove", provider: typedProvider });
+                                },
+                            };
+                        },
+                    }),
+                });
                 // 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.
                 await serviceContainer.addServiceAsync({
                     friendlyName: "Service Bootstrapper",
-                    consumes: [RootComponentServiceIdentity, WatcherServiceIdentity],
-                    factory: (rootComponentService, watcherService) => {
+                    consumes: [RootComponentServiceIdentity],
+                    factory: (rootComponent) => {
                         // Use function syntax for the state setter since the root component may be a function component.
-                        setBootstrapServices({ rootComponentService, watcherService });
+                        setRootComponentService(() => rootComponent);
                         return {
-                            dispose: () => setBootstrapServices(undefined),
+                            dispose: () => setRootComponentService(undefined),
                         };
                     },
                 });
@@ -8608,7 +8462,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-zYdKn8uM.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-eRZtqcfj.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8675,36 +8529,1203 @@ function MakeModularTool(options) {
             setExtensionInstallError(undefined);
         }, [setExtensionInstallError]);
         // Show a spinner until a main view has been set.
-        if (!bootstrapServices) {
-            return (jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(Theme, { className: classes.app, children: jsx(Spinner, { className: classes.spinner }) }) }));
+        if (!rootComponentService) {
+            return (jsx(ReactContextsWrapper, { contexts: contexts, children: jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(Theme, { className: classes.app, children: jsx(Spinner, { className: classes.spinner }) }) }) }));
         }
         else {
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            const Content = bootstrapServices.rootComponentService.rootComponent;
-            return (
-            // Expose the settings store as a React context so that UI components can read/write
-            // settings without the ISettingsService needing to be explicitly passed around.
-            jsx(SettingsStoreContext.Provider, { value: settingsStore, children: jsx(WatcherContext.Provider, { value: bootstrapServices.watcherService, 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, {}) })] }) }) }) }) }));
+            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, {}) })] }) }) }) }) }));
         }
     };
-    // Set the container element to be a flex container so that the tool can be displayed properly.
-    const originalContainerElementDisplay = containerElement.style.display;
-    containerElement.style.display = "flex";
-    // Create and render the react root component.
-    const reactRoot = createRoot(containerElement);
-    reactRoot.render(createElement(modularToolRootComponent));
-    let disposed = false;
-    return {
-        dispose: () => {
-            // Unmount and restore the original container element display.
-            if (!disposed) {
-                disposed = true;
-                reactRoot.unmount();
-                containerElement.style.display = originalContainerElementDisplay;
-            }
-        },
+    // Set the container element to be a flex container so that the tool can be displayed properly.
+    const originalContainerElementDisplay = containerElement.style.display;
+    containerElement.style.display = "flex";
+    // Create and render the react root component.
+    const reactRoot = createRoot(containerElement);
+    reactRoot.render(createElement(modularToolRootComponent));
+    let disposed = false;
+    return {
+        dispose: () => {
+            // Unmount and restore the original container element display.
+            if (!disposed) {
+                disposed = true;
+                reactRoot.unmount();
+                containerElement.style.display = originalContainerElementDisplay;
+            }
+        },
+    };
+}
+
+// Created by running the following command from the packages/dev/inspector-v2 directory:
+// npm run makeAvatar https://raw.githubusercontent.com/BabylonJS/Brand-Toolkit/master/babylon_logo/fullColor/babylon_logo_color.png 0.8
+const BabylonLogoBase64 = "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsSAAALEgHS3X78AAAFXElEQVR4nO2WbWwTdRzHu+EbYmLgpeILwcQXvvCFLwwGxthG1/Z6d33Ag22FDXAE98wixsCbSiS+4IUhxoQYoyiSGKcogsjaa9c9dw9sbdfrbevW611nYTDYliCRsbv7mrt2sPiGUTZf8Uua9P7/u9/383v4//MzGJ5bjgaDIQ8Ms66FYdYZ/m+D250PgyF/GUy+trb2wshEnfmPvKnG3fukJoZ+vI912vqapRsGg+481cy8I9RSbTONNkw32pXJatMvCcvmN7Q9t5ad1QSBJuzOpHvmo7JXkrX01zfq6Yd3mhxIHrHIQuUOee5EJR4MtN0D8Bnm5jbo37nd+c/UH1jmINXcvF6scxxL1VJ3Zo86kKol5UTVTlmsIXH3p68g35uXASgAoCqyCKBKy4Lup0UL4Bn6Q2piaKmWjM0etSNdTyvCoV2LwsES9daXbixMCZomoKpQFFkFsKg9aUtzv//QM7ln6zYdIlu6lUVuyLw8e7zsLbGGunqrXq8zhMMmOVFZqKQ/+QD3w8GMsB6xAmi/rN0PB+X0qQZ5psGGG/W0LNXT5/9x731tRSDubKquWJlN3H7H7N1GO1K1hDy5v1BJNe/BvPcilIUHj4TVxUWosqJnYMlmfz0H4X0jhANF8l915OJ8oxORCnv0vHHfi0+EcGcBBpwVW9hSaqGdIBSu0qrOXvgCyvzsUsgZ4WVR6zDKYxD59g3cPvspwuVmpZ2g4DPR0khNzcYVA3QwzGY/QT/wFpnBMuVqShKwsCSQDVZVVaQ9LG519z7qgyXAhwCmxnh4TJTSZiThM1NioKpqw4oBWKdzi89CLbDFZrSVudRIfzti0UFMpyXIioJ5fhSDH36Ma9uL0LrTiPDJU/hbSkFWZMxMpyGK4xjv64KPsCmBUit8ZlrqqqjYmBvAXpcaG+pFbGQA0egAOF8rfCZSF/dZaC06/Ll1B9qZciT5CIQED0mawMRg7+oBcEM9OgA/FsbQby1gjQS8JgreUiu8pSQ8Riv8tt2YHO6HKMbXEiCE0KWf4Skh0ElT4A+Q4CpJBAgrWGo3JkMDawzADyPcehlhFwnx0C5IdRRSdSSE/TsRqi5HIhqCmBxfA4DBbh0gFulHjLuO8bZLSJyqh3jIiGS1CeKZE0gNd0FMxiFOaj0Qx8RAT+4AHQyzmTUvAVSo2gngR0PgQkEdguND4LghxC9+A9F7EWI6iaQ0qYsnJ2JITUtIhAe1JtUB2Kc9hl3Oii1+M7XgNRIKW2pVe44fx0iXD6MTI/pxjA0HwUX6wcejSE4JEBM8knFOr3/qpoR4dzt6m4/BW2JW/CYSfgstjVQ8xUV0hWE2BQjb3SBh0zpe9hQUKz7Kif4zn4MbDoKfiIAL92E00p8RFsYwdVOCwIVw/fRp/WheKyjR4OVB0ok2whb17FvBVbz8hU6GeZMl6MudFhu6CJsWjezZXqwEXJUYuvA9eH4IY+MRSGlBb7zId+cQeK8MrduKFO8ui9xttaPDQi+yhO3bPlf1q8t9P5X5bU7Cb6EjQasdAQuteIpMi55Co9pZ14ARz1XwrX+g8/ARtBYUq57iUrmDsKk9hF2re0e7nXk3Z2FoA4khM5D0NjPrfVZ7k99E3Q6SDu0mVDwFJTJrpuE1EmgtKJHbzJTSp+2ZSYGlHS4Aejm1oWaptDlZiz6SZU+Hy/UyS9jOBsz0Qo/VDi3VPiMh95IO+M3UPdbqONnnanhpKYBVm5RhMOS5CwtfcGdH8Q7Hnre9FortJvQ6K6yF+tG/t/J1bU+LVofOJe1PMs3p8kHTRzvKtB7JPuatmfB/TU8vHgutarpz7Y/nZsjR/gUhEcwHmuaM9wAAAABJRU5ErkJggg==";
+const BabylonWebResources = {
+    homepage: "https://www.babylonjs.com",
+    repository: "https://github.com/BabylonJS/Babylon.js",
+    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
+    author: {
+        name: "Babylon.js",
+        avatar: BabylonLogoBase64,
+    },
+};
+/**
+ * Well-known default built in extensions for the Inspector.
+ */
+const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
+    {
+        name: "Quick Creation Tools (Preview)",
+        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'),
+    },
+    {
+        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'),
+    },
+]);
+
+/**
+ * The service identity for the inspectable command registry.
+ */
+const InspectableCommandRegistryIdentity = Symbol("InspectableCommandRegistry");
+
+const UniqueIdArg = {
+    name: "uniqueId",
+    description: "The uniqueId of the entity to query. Omit to list all entities of this type.",
+    required: false,
+};
+const SyntheticUniqueIds = new WeakMap();
+function GetEntityId(entity) {
+    if ("uniqueId" in entity && typeof entity.uniqueId === "number") {
+        return entity.uniqueId;
+    }
+    let id = SyntheticUniqueIds.get(entity);
+    if (!id) {
+        SyntheticUniqueIds.set(entity, (id = UniqueIdGenerator.UniqueId));
+    }
+    return id;
+}
+function NodeSummary(entity) {
+    return {
+        uniqueId: entity.uniqueId,
+        name: entity.name,
+        className: entity.getClassName(),
+        parentId: entity.parent?.uniqueId,
+    };
+}
+function NamedSummary(entity) {
+    return {
+        uniqueId: entity.uniqueId,
+        name: entity.name,
+        className: entity.getClassName(),
+    };
+}
+function MinimalSummary(entity) {
+    return {
+        uniqueId: entity.uniqueId,
+        name: entity.name,
+    };
+}
+function MakeQueryCommand(collection, sceneContext) {
+    return {
+        id: collection.id,
+        description: collection.description,
+        args: [UniqueIdArg],
+        executeAsync: async (args) => {
+            const scene = sceneContext.currentScene;
+            if (!scene) {
+                throw new Error("No active scene.");
+            }
+            const entities = collection.getEntities(scene);
+            if (!entities) {
+                return JSON.stringify([], null, 2);
+            }
+            if (!args.uniqueId) {
+                return JSON.stringify(entities.map((e) => collection.getSummary(e)), null, 2);
+            }
+            const id = parseInt(args.uniqueId, 10);
+            if (isNaN(id)) {
+                throw new Error("uniqueId must be a number.");
+            }
+            const entity = entities.find((e) => collection.getUniqueId(e) === id);
+            if (!entity) {
+                throw new Error(`No ${collection.id.replace("query-", "")} found with uniqueId ${id}.`);
+            }
+            return JSON.stringify(collection.serialize ? collection.serialize(entity) : collection.getSummary(entity), null, 2);
+        },
+    };
+}
+/**
+ * Service that registers CLI commands for querying scene entities by uniqueId.
+ * When uniqueId is omitted, returns a summary list of all entities of that type.
+ */
+const EntityQueryServiceDefinition = {
+    friendlyName: "Entity Query Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        const collections = [
+            {
+                id: "query-mesh",
+                description: "List meshes, or query a specific mesh by uniqueId.",
+                getEntities: (scene) => scene.meshes,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NodeSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-light",
+                description: "List lights, or query a specific light by uniqueId.",
+                getEntities: (scene) => scene.lights,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NodeSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-camera",
+                description: "List cameras, or query a specific camera by uniqueId.",
+                getEntities: (scene) => scene.cameras,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NodeSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-transformNode",
+                description: "List transform nodes, or query a specific transform node by uniqueId.",
+                getEntities: (scene) => scene.transformNodes,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NodeSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-material",
+                description: "List materials, or query a specific material by uniqueId.",
+                getEntities: (scene) => scene.materials,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-texture",
+                description: "List textures, or query a specific texture by uniqueId.",
+                getEntities: (scene) => scene.textures,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-skeleton",
+                description: "List skeletons, or query a specific skeleton by uniqueId.",
+                getEntities: (scene) => scene.skeletons,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-geometry",
+                description: "List geometries, or query a specific geometry by uniqueId.",
+                getEntities: (scene) => scene.geometries,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: MinimalSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-animation",
+                description: "List animations, or query a specific animation by uniqueId.",
+                getEntities: (scene) => scene.animations,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: MinimalSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-animationGroup",
+                description: "List animation groups, or query a specific animation group by uniqueId.",
+                getEntities: (scene) => scene.animationGroups,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-particleSystem",
+                description: "List particle systems, or query a specific particle system by uniqueId.",
+                getEntities: (scene) => scene.particleSystems,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(false),
+            },
+            {
+                id: "query-morphTargetManager",
+                description: "List morph target managers, or query a specific morph target manager by uniqueId.",
+                getEntities: (scene) => scene.morphTargetManagers,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: MinimalSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-multiMaterial",
+                description: "List multi-materials, or query a specific multi-material by uniqueId.",
+                getEntities: (scene) => scene.multiMaterials,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-postProcess",
+                description: "List post-processes, or query a specific post-process by uniqueId.",
+                getEntities: (scene) => scene.postProcesses,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-frameGraph",
+                description: "List frame graphs, or query a specific frame graph by uniqueId.",
+                getEntities: (scene) => scene.frameGraphs,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+            },
+            {
+                id: "query-effectLayer",
+                description: "List effect layers, or query a specific effect layer by uniqueId.",
+                getEntities: (scene) => scene.effectLayers,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+                serialize: (e) => e.serialize?.(),
+            },
+            {
+                id: "query-spriteManager",
+                description: "List sprite managers, or query a specific sprite manager by uniqueId.",
+                getEntities: (scene) => scene.spriteManagers,
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: MinimalSummary,
+                serialize: (e) => e.serialize(false),
+            },
+            {
+                id: "query-sound",
+                description: "List sounds in the main sound track, or query a specific sound by uniqueId.",
+                getEntities: (scene) => scene.mainSoundTrack?.soundCollection ?? [],
+                getUniqueId: (e) => GetEntityId(e),
+                getSummary: (e) => ({ uniqueId: GetEntityId(e), name: e.name, className: e.getClassName() }),
+                serialize: (e) => e.serialize(),
+            },
+            {
+                id: "query-renderingPipeline",
+                description: "List rendering pipelines, or query a specific rendering pipeline by uniqueId.",
+                getEntities: (scene) => scene.postProcessRenderPipelineManager?.supportedPipelines ?? [],
+                getUniqueId: (e) => e.uniqueId,
+                getSummary: NamedSummary,
+            },
+        ];
+        const registrations = collections.map((col) => commandRegistry.addCommand(MakeQueryCommand(col, sceneContext)));
+        return {
+            dispose: () => {
+                for (const reg of registrations) {
+                    reg.dispose();
+                }
+            },
+        };
+    },
+};
+
+/**
+ * The service identity for the CLI connection status.
+ */
+const CliConnectionStatusIdentity = Symbol("CliConnectionStatus");
+
+/**
+ * Creates the service definition for the InspectableBridgeService.
+ * @param options The options for connecting to the bridge.
+ * @returns A service definition that produces an IInspectableCommandRegistry.
+ */
+function MakeInspectableBridgeServiceDefinition(options) {
+    return {
+        friendlyName: "Inspectable Bridge Service",
+        produces: [InspectableCommandRegistryIdentity, CliConnectionStatusIdentity],
+        factory: () => {
+            const commands = new Map();
+            let ws = null;
+            let reconnectTimer = null;
+            let disposed = false;
+            let connected = false;
+            const onConnectionStatusChanged = new Observable();
+            function setConnected(value) {
+                if (connected !== value) {
+                    connected = value;
+                    onConnectionStatusChanged.notifyObservers(value);
+                }
+            }
+            function sendToBridge(message) {
+                ws?.send(JSON.stringify(message));
+            }
+            function connect() {
+                if (disposed) {
+                    return;
+                }
+                try {
+                    ws = new WebSocket(`ws://127.0.0.1:${options.port}`);
+                }
+                catch {
+                    scheduleReconnect();
+                    return;
+                }
+                ws.onopen = () => {
+                    setConnected(true);
+                    sendToBridge({ type: "register", name: options.name });
+                };
+                ws.onmessage = (event) => {
+                    try {
+                        const message = JSON.parse(event.data);
+                        void handleMessage(message);
+                    }
+                    catch {
+                        Logger.Warn("InspectableBridgeService: Failed to parse message from bridge.");
+                    }
+                };
+                ws.onclose = () => {
+                    ws = null;
+                    setConnected(false);
+                    scheduleReconnect();
+                };
+                ws.onerror = () => {
+                    // onclose will fire after onerror, which handles reconnection.
+                };
+            }
+            function scheduleReconnect() {
+                if (disposed || reconnectTimer !== null) {
+                    return;
+                }
+                reconnectTimer = setTimeout(() => {
+                    reconnectTimer = null;
+                    connect();
+                }, 3000);
+            }
+            async function handleMessage(message) {
+                switch (message.type) {
+                    case "listCommands": {
+                        const commandList = Array.from(commands.values()).map((cmd) => ({
+                            id: cmd.id,
+                            description: cmd.description,
+                            args: cmd.args,
+                        }));
+                        sendToBridge({
+                            type: "commandListResponse",
+                            requestId: message.requestId,
+                            commands: commandList,
+                        });
+                        break;
+                    }
+                    case "execCommand": {
+                        const command = commands.get(message.commandId);
+                        if (!command) {
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                error: `Unknown command: ${message.commandId}`,
+                            });
+                            break;
+                        }
+                        try {
+                            const result = await command.executeAsync(message.args);
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                result,
+                            });
+                        }
+                        catch (error) {
+                            sendToBridge({
+                                type: "commandResponse",
+                                requestId: message.requestId,
+                                error: String(error),
+                            });
+                        }
+                        break;
+                    }
+                }
+            }
+            // Initiate connection.
+            connect();
+            const registry = {
+                addCommand(descriptor) {
+                    if (commands.has(descriptor.id)) {
+                        throw new Error(`Command '${descriptor.id}' is already registered.`);
+                    }
+                    commands.set(descriptor.id, descriptor);
+                    return {
+                        dispose: () => {
+                            commands.delete(descriptor.id);
+                        },
+                    };
+                },
+                get isConnected() {
+                    return connected;
+                },
+                onConnectionStatusChanged,
+                dispose: () => {
+                    disposed = true;
+                    if (reconnectTimer !== null) {
+                        clearTimeout(reconnectTimer);
+                        reconnectTimer = null;
+                    }
+                    commands.clear();
+                    setConnected(false);
+                    onConnectionStatusChanged.clear();
+                    if (ws) {
+                        ws.onclose = null;
+                        ws.close();
+                        ws = null;
+                    }
+                },
+            };
+            return registry;
+        },
+    };
+}
+
+/**
+ * Service that registers CLI commands for performance tracing using the PerformanceViewerCollector.
+ * start-perf-trace begins collecting data, stop-perf-trace stops and returns the collected data as JSON.
+ */
+const PerfTraceCommandServiceDefinition = {
+    friendlyName: "Perf Trace Command Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        let perfCollector;
+        const startReg = commandRegistry.addCommand({
+            id: "start-perf-trace",
+            description: "Start collecting performance trace data.",
+            executeAsync: async () => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                if (perfCollector?.isStarted) {
+                    return "Performance trace is already running.";
+                }
+                perfCollector = scene.getPerfCollector();
+                perfCollector.stop();
+                perfCollector.clear(false);
+                perfCollector.addCollectionStrategies(...DefaultPerfStrategies);
+                perfCollector.start(true);
+                return "Performance trace started.";
+            },
+        });
+        const stopReg = commandRegistry.addCommand({
+            id: "stop-perf-trace",
+            description: "Stop collecting performance trace data and return the results as JSON.",
+            executeAsync: async () => {
+                if (!perfCollector || !perfCollector.isStarted) {
+                    throw new Error("Performance trace is not running. Run start-perf-trace first.");
+                }
+                perfCollector.stop();
+                const datasets = perfCollector.datasets;
+                const ids = datasets.ids;
+                const rawData = datasets.data.subarray(0, datasets.data.itemLength);
+                const sliceSize = ids.length + PerformanceViewerCollector.SliceDataOffset;
+                const samples = [];
+                for (let i = 0; i < rawData.length; i += sliceSize) {
+                    const timestamp = rawData[i];
+                    const sample = { timestamp };
+                    for (let j = 0; j < ids.length; j++) {
+                        sample[ids[j]] = rawData[i + PerformanceViewerCollector.SliceDataOffset + j];
+                    }
+                    samples.push(sample);
+                }
+                perfCollector.clear(false);
+                perfCollector = undefined;
+                return JSON.stringify({ strategies: ids, sampleCount: samples.length, samples }, null, 2);
+            },
+        });
+        return {
+            dispose: () => {
+                startReg.dispose();
+                stopReg.dispose();
+                if (perfCollector?.isStarted) {
+                    perfCollector.stop();
+                }
+                perfCollector = undefined;
+            },
+        };
+    },
+};
+
+/**
+ * Service that registers a CLI command for capturing a screenshot of the scene.
+ * Returns the image as a base64 data string, suitable for consumption by AI agents.
+ */
+const ScreenshotCommandServiceDefinition = {
+    friendlyName: "Screenshot Command Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        const registration = commandRegistry.addCommand({
+            id: "take-screenshot",
+            description: "Capture a screenshot of the scene. Returns base64-encoded PNG data.",
+            args: [
+                {
+                    name: "cameraUniqueId",
+                    description: "The uniqueId of the camera to use. Defaults to the active camera.",
+                    required: false,
+                },
+                {
+                    name: "width",
+                    description: "Screenshot width in pixels. When set, uses custom size mode.",
+                    required: false,
+                },
+                {
+                    name: "height",
+                    description: "Screenshot height in pixels. When set, uses custom size mode.",
+                    required: false,
+                },
+                {
+                    name: "precision",
+                    description: "Resolution multiplier (e.g. 2 for double resolution). Defaults to 1.",
+                    required: false,
+                },
+            ],
+            executeAsync: async (args) => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                const engine = scene.getEngine();
+                // Resolve camera: explicit uniqueId, or active/frame-graph camera.
+                let camera;
+                if (args.cameraUniqueId) {
+                    const cameraId = parseInt(args.cameraUniqueId, 10);
+                    if (isNaN(cameraId)) {
+                        throw new Error("cameraUniqueId must be a number.");
+                    }
+                    camera = scene.cameras.find((c) => c.uniqueId === cameraId);
+                    if (!camera) {
+                        throw new Error(`No camera found with uniqueId ${cameraId}.`);
+                    }
+                }
+                else {
+                    camera = scene.frameGraph ? FrameGraphUtils.FindMainCamera(scene.frameGraph) : scene.activeCamera;
+                }
+                if (!camera) {
+                    throw new Error("No camera available for screenshot.");
+                }
+                const precision = args.precision !== undefined ? Number(args.precision) : 1;
+                if (!Number.isFinite(precision) || precision <= 0) {
+                    throw new Error("precision must be a finite number greater than 0.");
+                }
+                let width;
+                if (args.width !== undefined) {
+                    width = Number(args.width);
+                    if (!Number.isFinite(width) || width <= 0 || !Number.isInteger(width)) {
+                        throw new Error("width must be a finite positive integer.");
+                    }
+                }
+                let height;
+                if (args.height !== undefined) {
+                    height = Number(args.height);
+                    if (!Number.isFinite(height) || height <= 0 || !Number.isInteger(height)) {
+                        throw new Error("height must be a finite positive integer.");
+                    }
+                }
+                const screenshotSize = width !== undefined && height !== undefined ? { width, height, precision } : { precision };
+                // Omit fileName to get data URL back without triggering a download.
+                const dataUrl = await CreateScreenshotUsingRenderTargetAsync(engine, camera, screenshotSize, "image/png");
+                // Strip the data URI prefix to return raw base64, which is what AI agent APIs expect.
+                const commaIndex = dataUrl.indexOf(",");
+                return commaIndex !== -1 ? dataUrl.substring(commaIndex + 1) : dataUrl;
+            },
+        });
+        return {
+            dispose: () => {
+                registration.dispose();
+            },
+        };
+    },
+};
+
+/**
+ * Service that registers a CLI command for retrieving compiled shader code from a material.
+ */
+const ShaderCommandServiceDefinition = {
+    friendlyName: "Shader Command Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        const registration = commandRegistry.addCommand({
+            id: "get-shader-code",
+            description: "Get the shader code for a material by uniqueId.",
+            args: [
+                {
+                    name: "uniqueId",
+                    description: "The uniqueId of the material.",
+                    required: true,
+                },
+                {
+                    name: "variant",
+                    description: "Which shader variant to return: compiled (default), raw, or beforeMigration.",
+                    required: false,
+                },
+            ],
+            executeAsync: async (args) => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                const id = parseInt(args.uniqueId, 10);
+                if (isNaN(id)) {
+                    throw new Error("uniqueId must be a number.");
+                }
+                const material = scene.materials.find((m) => m.uniqueId === id);
+                if (!material) {
+                    throw new Error(`No material found with uniqueId ${id}.`);
+                }
+                const effect = material.getEffect();
+                if (!effect) {
+                    throw new Error(`Material "${material.name}" has no effect. It may not have been rendered yet.`);
+                }
+                if (!effect.isReady()) {
+                    throw new Error(`Material "${material.name}" effect is not ready. Wait for it to be rendered.`);
+                }
+                const variant = args.variant ?? "compiled";
+                let vertexShader;
+                let fragmentShader;
+                switch (variant) {
+                    case "compiled":
+                        vertexShader = effect.vertexSourceCode;
+                        fragmentShader = effect.fragmentSourceCode;
+                        break;
+                    case "raw":
+                        vertexShader = effect.rawVertexSourceCode;
+                        fragmentShader = effect.rawFragmentSourceCode;
+                        break;
+                    case "beforeMigration":
+                        vertexShader = effect.vertexSourceCodeBeforeMigration;
+                        fragmentShader = effect.fragmentSourceCodeBeforeMigration;
+                        break;
+                    default:
+                        throw new Error(`Unknown variant "${variant}". Use: compiled, raw, or beforeMigration.`);
+                }
+                return JSON.stringify({ vertexShader, fragmentShader }, null, 2);
+            },
+        });
+        return {
+            dispose: () => {
+                registration.dispose();
+            },
+        };
+    },
+};
+
+/**
+ * Service that registers CLI commands for querying scene and engine statistics.
+ */
+const StatsCommandServiceDefinition = {
+    friendlyName: "Stats Command Service",
+    consumes: [InspectableCommandRegistryIdentity, SceneContextIdentity],
+    factory: (commandRegistry, sceneContext) => {
+        let sceneInstrumentation;
+        let engineInstrumentation;
+        function disposeInstrumentation() {
+            sceneInstrumentation?.dispose();
+            sceneInstrumentation = undefined;
+            engineInstrumentation?.dispose();
+            engineInstrumentation = undefined;
+        }
+        const startPerfReg = commandRegistry.addCommand({
+            id: "start-perf-instrumentation",
+            description: "Start scene and engine performance instrumentation for frame stats collection.",
+            executeAsync: async () => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                // Dispose any stale instrumentation (e.g. scene changed).
+                if (sceneInstrumentation && sceneInstrumentation.scene !== scene) {
+                    disposeInstrumentation();
+                }
+                if (sceneInstrumentation) {
+                    return "Performance instrumentation is already running.";
+                }
+                sceneInstrumentation = new SceneInstrumentation(scene);
+                sceneInstrumentation.captureActiveMeshesEvaluationTime = true;
+                sceneInstrumentation.captureRenderTargetsRenderTime = true;
+                sceneInstrumentation.captureFrameTime = true;
+                sceneInstrumentation.captureRenderTime = true;
+                sceneInstrumentation.captureInterFrameTime = true;
+                sceneInstrumentation.captureParticlesRenderTime = true;
+                sceneInstrumentation.captureSpritesRenderTime = true;
+                sceneInstrumentation.capturePhysicsTime = true;
+                sceneInstrumentation.captureAnimationsTime = true;
+                engineInstrumentation = new EngineInstrumentation(scene.getEngine());
+                engineInstrumentation.captureGPUFrameTime = true;
+                return "Performance instrumentation started.";
+            },
+        });
+        const stopPerfReg = commandRegistry.addCommand({
+            id: "stop-perf-instrumentation",
+            description: "Stop scene and engine performance instrumentation.",
+            executeAsync: async () => {
+                if (!sceneInstrumentation && !engineInstrumentation) {
+                    return "Performance instrumentation is not running.";
+                }
+                disposeInstrumentation();
+                return "Performance instrumentation stopped.";
+            },
+        });
+        const countStatsReg = commandRegistry.addCommand({
+            id: "get-count-stats",
+            description: "Get scene entity counts (meshes, lights, vertices, draw calls, etc.).",
+            executeAsync: async () => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                let activeMeshesCount = scene.getActiveMeshes().length;
+                for (const objectRenderer of scene.objectRenderers) {
+                    activeMeshesCount += objectRenderer.getActiveMeshes().length;
+                }
+                const activeIndices = scene.getActiveIndices();
+                return JSON.stringify({
+                    totalMeshes: scene.meshes.length,
+                    activeMeshes: activeMeshesCount,
+                    activeIndices,
+                    activeFaces: Math.floor(activeIndices / 3),
+                    activeBones: scene.getActiveBones(),
+                    activeParticles: scene.getActiveParticles(),
+                    drawCalls: scene.getEngine()._drawCalls.current,
+                    totalLights: scene.lights.length,
+                    totalVertices: scene.getTotalVertices(),
+                    totalMaterials: scene.materials.length,
+                    totalTextures: scene.textures.length,
+                }, null, 2);
+            },
+        });
+        const frameStatsReg = commandRegistry.addCommand({
+            id: "get-frame-stats",
+            description: "Get frame timing statistics. Requires start-perf-instrumentation to be run first.",
+            executeAsync: async () => {
+                if (!sceneInstrumentation || !engineInstrumentation) {
+                    throw new Error("Performance instrumentation is not running. Run start-perf-instrumentation first.");
+                }
+                const si = sceneInstrumentation;
+                const ei = engineInstrumentation;
+                const round = (v) => Math.round(v * 100) / 100;
+                return JSON.stringify({
+                    absoluteFPS: Math.floor(1000.0 / si.frameTimeCounter.lastSecAverage),
+                    meshesSelectionMs: round(si.activeMeshesEvaluationTimeCounter.lastSecAverage),
+                    renderTargetsMs: round(si.renderTargetsRenderTimeCounter.lastSecAverage),
+                    particlesMs: round(si.particlesRenderTimeCounter.lastSecAverage),
+                    spritesMs: round(si.spritesRenderTimeCounter.lastSecAverage),
+                    animationsMs: round(si.animationsTimeCounter.lastSecAverage),
+                    physicsMs: round(si.physicsTimeCounter.lastSecAverage),
+                    renderMs: round(si.renderTimeCounter.lastSecAverage),
+                    frameMs: round(si.frameTimeCounter.lastSecAverage),
+                    interFrameMs: round(si.interFrameTimeCounter.lastSecAverage),
+                    gpuFrameMs: round(ei.gpuFrameTimeCounter.lastSecAverage * 0.000001),
+                    gpuFrameAverageMs: round(ei.gpuFrameTimeCounter.average * 0.000001),
+                }, null, 2);
+            },
+        });
+        const systemStatsReg = commandRegistry.addCommand({
+            id: "get-system-stats",
+            description: "Get engine capabilities and system information.",
+            executeAsync: async () => {
+                const scene = sceneContext.currentScene;
+                if (!scene) {
+                    throw new Error("No active scene.");
+                }
+                const engine = scene.getEngine();
+                const caps = engine.getCaps();
+                return JSON.stringify({
+                    resolution: `${engine.getRenderWidth()} x ${engine.getRenderHeight()}`,
+                    hardwareScalingLevel: engine.getHardwareScalingLevel(),
+                    engine: engine.description,
+                    driver: engine.extractDriverInfo(),
+                    capabilities: {
+                        stdDerivatives: caps.standardDerivatives,
+                        compressedTextures: caps.s3tc !== undefined,
+                        hardwareInstances: caps.instancedArrays,
+                        textureFloat: caps.textureFloat,
+                        textureHalfFloat: caps.textureHalfFloat,
+                        renderToTextureFloat: caps.textureFloatRender,
+                        renderToTextureHalfFloat: caps.textureHalfFloatRender,
+                        indices32Bit: caps.uintIndices,
+                        fragmentDepth: caps.fragmentDepthSupported,
+                        highPrecisionShaders: caps.highPrecisionShaderSupported,
+                        drawBuffers: caps.drawBuffersExtension,
+                        vertexArrayObject: caps.vertexArrayObject,
+                        timerQuery: caps.timerQuery !== undefined,
+                        stencil: engine.isStencilEnable,
+                        parallelShaderCompilation: caps.parallelShaderCompile != null,
+                        maxTexturesUnits: caps.maxTexturesImageUnits,
+                        maxTexturesSize: caps.maxTextureSize,
+                        maxAnisotropy: caps.maxAnisotropy,
+                    },
+                }, null, 2);
+            },
+        });
+        return {
+            dispose: () => {
+                startPerfReg.dispose();
+                stopPerfReg.dispose();
+                countStatsReg.dispose();
+                frameStatsReg.dispose();
+                systemStatsReg.dispose();
+                disposeInstrumentation();
+            },
+        };
+    },
+};
+
+const DefaultPort = 4400;
+const InspectableStates = new Map();
+/**
+ * @internal
+ * Internal implementation that returns an {@link InternalInspectableToken} with access
+ * to the underlying ServiceContainer. Used by ShowInspector to set up a parent container relationship.
+ */
+function _StartInspectable(scene, options) {
+    let state = InspectableStates.get(scene);
+    if (!state) {
+        const port = options?.port ?? DefaultPort;
+        const name = options?.name ?? (typeof document !== "undefined" ? document.title : "Babylon.js Scene");
+        const serviceContainer = new ServiceContainer("InspectableContainer");
+        const fullyDispose = () => {
+            InspectableStates.delete(scene);
+            serviceContainer.dispose();
+            sceneDisposeObserver.remove();
+        };
+        // Initialize the service container asynchronously.
+        const sceneContextServiceDefinition = {
+            friendlyName: "Inspectable Scene Context",
+            produces: [SceneContextIdentity],
+            factory: () => ({
+                currentScene: scene,
+                currentSceneObservable: new Observable(),
+            }),
+        };
+        const readyPromise = (async () => {
+            await serviceContainer.addServicesAsync(sceneContextServiceDefinition, MakeInspectableBridgeServiceDefinition({
+                port,
+                name,
+            }), EntityQueryServiceDefinition, ScreenshotCommandServiceDefinition, ShaderCommandServiceDefinition, StatsCommandServiceDefinition, PerfTraceCommandServiceDefinition);
+        })();
+        state = {
+            refCount: 0,
+            serviceContainer,
+            sceneDisposeObserver: { remove: () => { } },
+            fullyDispose,
+            readyPromise,
+        };
+        const capturedState = state;
+        InspectableStates.set(scene, state);
+        // Auto-dispose when the scene is disposed.
+        const sceneDisposeObserver = scene.onDisposeObservable.addOnce(() => {
+            capturedState.refCount = 0;
+            capturedState.fullyDispose();
+        });
+        state.sceneDisposeObserver = sceneDisposeObserver;
+        // Handle initialization failure (guard against already-disposed state).
+        void (async () => {
+            try {
+                await readyPromise;
+            }
+            catch (error) {
+                if (InspectableStates.has(scene)) {
+                    Logger.Error(`Failed to initialize Inspectable: ${error}`);
+                    capturedState.refCount = 0;
+                    capturedState.fullyDispose();
+                }
+            }
+        })();
+    }
+    state.refCount++;
+    const { serviceContainer } = state;
+    const owningState = state;
+    // If additional service definitions were provided, add them in a separate call
+    // so they can be independently removed when this token is disposed.
+    let extraServicesDisposable;
+    const extraAbortController = new AbortController();
+    const extraServiceDefinitions = options?.serviceDefinitions;
+    if (extraServiceDefinitions && extraServiceDefinitions.length > 0) {
+        // Wait for the built-in services to be ready, then add the extra ones.
+        void (async () => {
+            try {
+                await owningState.readyPromise;
+                extraServicesDisposable = await serviceContainer.addServicesAsync(...extraServiceDefinitions, extraAbortController.signal);
+            }
+            catch (error) {
+                if (!extraAbortController.signal.aborted) {
+                    Logger.Error(`Failed to add extra inspectable services: ${error}`);
+                }
+            }
+        })();
+    }
+    let disposed = false;
+    const token = {
+        get isDisposed() {
+            return disposed;
+        },
+        get serviceContainer() {
+            return serviceContainer;
+        },
+        dispose() {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            // Abort any in-flight extra service initialization and remove already-added extra services.
+            extraAbortController.abort();
+            extraServicesDisposable?.dispose();
+            owningState.refCount--;
+            if (owningState.refCount <= 0) {
+                owningState.fullyDispose();
+            }
+        },
+    };
+    return token;
+}
+/**
+ * Makes a scene inspectable by connecting it to the Inspector CLI bridge.
+ * This creates a headless {@link ServiceContainer} (no UI) and registers the
+ * {@link InspectableBridgeService} which opens a WebSocket to the bridge and
+ * exposes a command registry for CLI-invocable commands.
+ *
+ * Multiple callers may call this for the same scene. Each returned token is
+ * ref-counted — the underlying connection is only torn down when all tokens
+ * have been disposed. Additional {@link InspectableOptions.serviceDefinitions}
+ * passed by each caller are added to the shared container and removed when
+ * that caller's token is disposed.
+ *
+ * @param scene The scene to make inspectable.
+ * @param options Optional configuration.
+ * @returns An {@link InspectableToken} that can be disposed to disconnect.
+ * @experimental
+ */
+function StartInspectable(scene, options) {
+    return _StartInspectable(scene, options);
+}
+
+/**
+ * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
+ * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
+ * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
+ * @returns Component wrapping a colorPicker component with a property line
+ */
+const ColorPropertyLine = forwardRef((props, ref) => {
+    ColorPropertyLine.displayName = "ColorPropertyLine";
+    const [color, setColor] = useState(props.value);
+    useEffect(() => {
+        setColor(props.value);
+    }, [props.value]);
+    const onSliderChange = (value, key) => {
+        let newColor;
+        if (key === "a") {
+            newColor = Color4.FromColor3(color, value);
+        }
+        else {
+            newColor = color.clone();
+            newColor[key] = value / 255;
+        }
+        setColor(newColor); // Create a new object to trigger re-render
+        props.onChange(newColor);
+    };
+    const onColorPickerChange = (newColor) => {
+        setColor(newColor);
+        props.onChange(newColor);
+    };
+    return (jsx(PropertyLine, { ref: ref, ...props, expandedContent: color ? jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }) : undefined, children: jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
+});
+const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }));
+const Color3PropertyLine = ColorPropertyLine;
+const Color4PropertyLine = ColorPropertyLine;
+
+const useStyles$F = makeStyles({
+    uniformWidth: {
+        ...UniformWidthStyling,
+    },
+});
+/**
+ * Wraps a text input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+const TextInputPropertyLine = (props) => {
+    TextInputPropertyLine.displayName = "TextInputPropertyLine";
+    const classes = useStyles$F();
+    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
+};
+/**
+ * Wraps a number input in a property line
+ * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+const NumberInputPropertyLine = (props) => {
+    NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
+    const classes = useStyles$F();
+    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
+};
+
+const HasZ = (vector) => !(vector instanceof Vector2);
+const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaternion;
+/**
+ * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
+ * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
+ * @param props
+ * @returns
+ */
+const TensorPropertyLine = (props) => {
+    TensorPropertyLine.displayName = "TensorPropertyLine";
+    const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
+    const formatted = (val) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);
+    const [vector, setVector] = useState(props.value);
+    const { min, max } = props;
+    const onChange = (val, key) => {
+        const value = props.valueConverter ? props.valueConverter.to(val) : val;
+        const newVector = vector.clone();
+        newVector[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe
+        setVector(newVector);
+        props.onChange(newVector);
+    };
+    useEffect(() => {
+        setVector(props.value);
+    }, [props.value, props.expandedContent]);
+    return (jsx(PropertyLine, { ...props, expandedContent: jsxs(Fragment, { children: [props.expandedContent, vector ? (jsx(VectorSliders, { vector: vector, min: min, max: max, unit: props.unit, step: props.step, precision: props.precision, converted: converted, onChange: onChange })) : undefined] }), children: jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
+};
+const VectorSliders = ({ vector, min, max, unit, step, precision, converted, onChange }) => (jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: unit, step: step, precision: precision }), jsx(NumberInputPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: unit, step: step, precision: precision }), HasZ(vector) && (jsx(NumberInputPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: unit, step: step, precision: precision })), HasW(vector) && (jsx(NumberInputPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: unit, step: step, precision: precision }))] }));
+const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
+const RotationVectorPropertyLine = (props) => {
+    RotationVectorPropertyLine.displayName = "RotationVectorPropertyLine";
+    const step = props.useDegrees ? 1 : 0.01;
+    const precision = props.useDegrees ? 1 : 2;
+    return (jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "°" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, step: step, precision: precision }));
+};
+const QuaternionPropertyLineInternal = TensorPropertyLine;
+const QuaternionPropertyLine = (props) => {
+    QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
+    const step = props.useDegrees ? 1 : 0.01;
+    const precision = props.useDegrees ? 1 : 2;
+    const [quat, setQuat] = useState(props.value);
+    useEffect(() => {
+        setQuat(props.value);
+    }, [props.value]);
+    // Extract only the properties that exist on QuaternionPropertyLineProps
+    const { useEuler, ...restProps } = props;
+    const onQuatChange = (val) => {
+        setQuat(val);
+        props.onChange(val);
+    };
+    const onEulerChange = (val) => {
+        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
+        onQuatChange(quat);
     };
+    return useEuler ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, onChange: onEulerChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision, expandedContent: jsx(TextPropertyLine, { label: "Quaternion", value: `[${quat.x.toFixed(4)}, ${quat.y.toFixed(4)}, ${quat.z.toFixed(4)}, ${quat.w.toFixed(4)}]` }) })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, onChange: onQuatChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision }));
+};
+const Vector2PropertyLine = TensorPropertyLine;
+const Vector3PropertyLine = TensorPropertyLine;
+const Vector4PropertyLine = TensorPropertyLine;
+
+function IsInspectableObject(entity) {
+    return !!entity.inspectableCustomProperties;
 }
+const LegacyInspectableObjectPropertiesServiceDefinition = {
+    friendlyName: "Additional Nodes",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => {
+        const propertiesSectionRegistration = propertiesService.addSection({
+            identity: "Custom",
+            order: Number.MAX_SAFE_INTEGER,
+        });
+        const propertiesContentRegistration = propertiesService.addSectionContent({
+            key: "Additional Nodes Properties",
+            predicate: (entity) => IsInspectableObject(entity),
+            content: [
+                {
+                    section: "Custom",
+                    component: ({ context }) => {
+                        return (jsx(Fragment, { children: (context.inspectableCustomProperties ?? []).map((prop) => {
+                                const commonProps = {
+                                    target: context,
+                                    propertyKey: prop.propertyName,
+                                    label: prop.label,
+                                    ignoreNullable: true,
+                                    defaultValue: undefined,
+                                };
+                                switch (prop.type) {
+                                    case 0 /* InspectableType.Checkbox */:
+                                        return jsx(BoundProperty, { ...commonProps, component: SwitchPropertyLine }, prop.propertyName);
+                                    case 1 /* InspectableType.Slider */:
+                                        return (jsx(BoundProperty, { ...commonProps, min: prop.min, max: prop.max, step: prop.step, component: SyncedSliderPropertyLine }, prop.propertyName));
+                                    case 2 /* InspectableType.Vector3 */:
+                                        return jsx(BoundProperty, { ...commonProps, component: Vector3PropertyLine }, prop.propertyName);
+                                    case 3 /* InspectableType.Quaternion */:
+                                        return jsx(BoundProperty, { ...commonProps, component: QuaternionPropertyLine }, prop.propertyName);
+                                    case 4 /* InspectableType.Color3 */:
+                                        return jsx(BoundProperty, { ...commonProps, component: Color3PropertyLine }, prop.propertyName);
+                                    case 5 /* InspectableType.String */:
+                                        return jsx(BoundProperty, { ...commonProps, component: TextInputPropertyLine }, prop.propertyName);
+                                    case 6 /* InspectableType.Button */:
+                                        return jsx(ButtonLine, { label: prop.label, onClick: () => prop.callback?.() }, prop.propertyName);
+                                    case 7 /* InspectableType.Options */:
+                                        return jsx(BoundProperty, { ...commonProps, component: DropdownPropertyLine, options: prop.options ?? [] }, prop.propertyName);
+                                    case 8 /* InspectableType.Tab */:
+                                        return jsx(BoundProperty, { ...commonProps, component: TextPropertyLine }, prop.propertyName);
+                                    case 9 /* InspectableType.FileButton */:
+                                        return (jsx(FileUploadLine, { label: prop.label, accept: prop.accept ?? "", onClick: (files) => {
+                                                if (files.length > 0 && prop.fileCallback) {
+                                                    prop.fileCallback(files[0]);
+                                                }
+                                            } }, prop.propertyName));
+                                    case 10 /* InspectableType.Vector2 */:
+                                        return jsx(BoundProperty, { ...commonProps, component: Vector2PropertyLine }, prop.propertyName);
+                                }
+                            }) }));
+                    },
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                propertiesSectionRegistration.dispose();
+                propertiesContentRegistration.dispose();
+            },
+        };
+    },
+};
+
+const CliConnectionStatusServiceDefinition = {
+    friendlyName: "CLI Connection Status",
+    consumes: [ShellServiceIdentity, CliConnectionStatusIdentity],
+    factory: (shellService, cliConnectionStatus) => {
+        shellService.addToolbarItem({
+            key: "CLI Connection Status",
+            verticalLocation: "bottom",
+            horizontalLocation: "right",
+            teachingMoment: false,
+            order: 0 /* DefaultToolbarItemOrder.CliStatus */,
+            component: () => {
+                const isConnected = useObservableState(() => cliConnectionStatus.isConnected, cliConnectionStatus.onConnectionStatusChanged);
+                const { showToast } = useToast();
+                const isFirstRender = useRef(true);
+                useEffect(() => {
+                    if (isFirstRender.current) {
+                        isFirstRender.current = false;
+                        return;
+                    }
+                    if (isConnected) {
+                        showToast("Inspector bridge connected.", { intent: "success" });
+                    }
+                    else {
+                        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") }) }));
+            },
+        });
+    },
+};
 
 const MeshIcon = createFluentIcon("Mesh", "1em", '<g transform="scale(1.25)"><path d="M14.03,3.54l-5.11-2.07c-.61-.25-1.27-.25-1.88,0L1.93,3.54c-.57.23-.94.78-.94,1.39v6.15c0,.61.37,1.16.94,1.39l5.11,2.07c.3.12.62.18.94.18s.64-.06.94-.18l5.12-2.07c.57-.23.94-.78.94-1.39v-6.15c0-.61-.37-1.16-.94-1.39ZM13.97,7.71l-2.11.86v-2.71l2.11-.86v2.71ZM1.99,5l2.11.86v2.71l-2.11-.86v-2.71ZM11.35,4.98l-2.04-.83,1.78-.72,2.04.83-1.78.72ZM10.02,5.52l-2.04.83-2.04-.83,2.04-.83,2.04.83ZM4.6,4.98l-1.78-.72,2.04-.83,1.78.72-2.04.83ZM5.1,6.26l2.38.96v2.71l-2.38-.96v-2.71ZM8.48,7.22l2.38-.96v2.71l-2.38.96v-2.71ZM7.41,2.39c.18-.07.37-.11.56-.11s.38.04.56.11l1.22.49-1.78.72-1.79-.72,1.22-.49ZM1.99,11.07v-2.29l2.11.86v2.62l-1.8-.73c-.19-.08-.31-.26-.31-.46ZM5.1,12.67v-2.62l2.38.96v2.61s-.04,0-.06-.01l-2.31-.94ZM8.54,13.61s-.04,0-.06.01v-2.61l2.38-.96v2.62l-2.31.94ZM13.66,11.54l-1.8.73v-2.62l2.11-.86v2.29c0,.2-.12.39-.31.46Z"/></g>');
 const TranslateIcon = createFluentIcon("Translate", "1em", '<g transform="scale(0.833)"><path d="M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z" /></g>');
@@ -13453,7 +14474,7 @@ const EffectLayerPropertiesServiceDefinition = {
 async function EditNodeRenderGraph(nodeRenderGraph) {
     // TODO: Figure out how to get all the various build steps to work with this.
     //       See the initial attempt here: https://github.com/BabylonJS/Babylon.js/pull/17646
-    // const { NodeRenderGraphEditor } = await import("node-render-graph-editor/nodeRenderGraphEditor");
+    // const { NodeRenderGraphEditor } = await import("@babylonjs/node-render-graph-editor");
     // NodeRenderGraphEditor.Show({ nodeRenderGraph: renderGraph, hostScene: frameGraph.scene });
     await nodeRenderGraph.edit({ nodeRenderGraphEditorConfig: { backgroundColor: nodeRenderGraph.getScene().clearColor, hostScene: nodeRenderGraph.getScene() } });
 }
@@ -13687,14 +14708,10 @@ function EntitySelector(props) {
     if (value && !isEditing) {
         // If there is a value and we are not editing, show the link view
         return (jsxs("div", { className: classes.linkDiv, children: [jsx(Tooltip$1, { content: getName(value), relationship: "label", children: jsx(Link, { className: classes.link, value: getName(value), onLink: () => onLink(value) }) }), onChange &&
-                    (defaultValue !== undefined ? (
-                    // If the defaultValue is specified, then allow resetting to the default
-                    jsx(Tooltip$1, { content: "Unlink", relationship: "label", children: jsx(Button, { icon: LinkDismissRegular, onClick: () => {
+                    (defaultValue !== undefined ? (jsx(Tooltip$1, { content: "Unlink", relationship: "label", children: jsx(Button, { icon: LinkDismissRegular, onClick: () => {
                                 pulseEnteringEditMode(true);
                                 onChange(defaultValue);
-                            } }) })) : (
-                    // Otherwise, just allow editing to a new value
-                    jsx(Tooltip$1, { content: "Edit Link", relationship: "label", children: jsx(Button, { icon: LinkEditRegular, onClick: () => {
+                            } }) })) : (jsx(Tooltip$1, { content: "Edit Link", relationship: "label", children: jsx(Button, { icon: LinkEditRegular, onClick: () => {
                                 pulseEnteringEditMode(true);
                                 setIsEditing(true);
                             } }) })))] }));
@@ -14417,7 +15434,7 @@ function GroupBy(items, getKey) {
 async function EditNodeMaterial(material) {
     // TODO: Figure out how to get all the various build steps to work with this.
     //       See the initial attempt here: https://github.com/BabylonJS/Babylon.js/pull/17646
-    // const { NodeEditor } = await import("node-editor/nodeEditor");
+    // const { NodeEditor } = await import("@babylonjs/node-editor");
     // NodeEditor.Show({ nodeMaterial: material });
     await material.edit({ nodeEditorConfig: { backgroundColor: material.getScene().clearColor } });
 }
@@ -14522,14 +15539,42 @@ const NormalMapProperties = (props) => {
     return (jsx(Fragment, { children: IsMaterialWithPublicNormalMaps(material) ? (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert X Axis", target: material, propertyKey: "invertNormalMapX" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert Y Axis", target: material, propertyKey: "invertNormalMapY" })] })) : (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert X Axis", target: material, propertyKey: "_invertNormalMapX" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert Y Axis", target: material, propertyKey: "_invertNormalMapY" })] })) }));
 };
 
-// TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
-const UpdateTexture = (file, material, textureSetter) => {
-    ReadFile(file, (data) => {
-        const blob = new Blob([data], { type: "octet/stream" });
-        const url = URL.createObjectURL(blob);
-        textureSetter(new Texture(url, material.getScene(), false, false));
-    }, undefined, true);
+const useCheckboxStyles = makeStyles({
+    indicator: {
+        margin: 0,
+    },
+});
+/**
+ * This is a primitive fluent checkbox that can both read and write checked state
+ * @param props
+ * @returns Checkbox component
+ */
+const Checkbox = (props) => {
+    Checkbox.displayName = "Checkbox";
+    const [checked, setChecked] = useState(() => props.value ?? false);
+    const classes = useCheckboxStyles();
+    useEffect(() => {
+        if (props.value != undefined) {
+            setChecked(props.value); // Update local state when props.checked changes
+        }
+    }, [props.value]);
+    const onChange = (ev, _) => {
+        props.onChange(ev.target.checked);
+        setChecked(ev.target.checked);
+    };
+    return jsx(Checkbox$1, { checked: checked, onChange: onChange, indicator: { className: classes.indicator } });
+};
+
+/**
+ * Wraps a checkbox in a property line
+ * @param props - PropertyLineProps and CheckboxProps
+ * @returns property-line wrapped checkbox
+ */
+const CheckboxPropertyLine = (props) => {
+    CheckboxPropertyLine.displayName = "CheckboxPropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(Checkbox, { ...props }) }));
 };
+
 /**
  * Displays the base layer properties of an OpenPBR material.
  * @param props - The required properties
@@ -14537,23 +15582,7 @@ const UpdateTexture = (file, material, textureSetter) => {
  */
 const OpenPBRMaterialBaseProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Base Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Metalness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseMetalnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Base Diffuse Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.baseDiffuseRoughnessTexture = texture));
-                    }
-                } })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong or visible the base aspect appears.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Base Color", target: material, propertyKey: "baseColor", isLinearMode: true, description: "Sets the primary surface color of the material.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Color", target: material, propertyKey: "baseColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalness", min: 0, max: 1, step: 0.01, description: "Controls whether the material behaves as metal or non-metal. The parameter supersedes transmission_weight and subsurface_weight.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Metalness", target: material, propertyKey: "baseMetalnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughness", min: 0, max: 1, step: 0.01, description: "Softens the surface's base appearance. Higher values create matte or porous looks. Lower values are smoother.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient Occlusion", target: material, propertyKey: "ambientOcclusionTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
 };
 /**
  * Displays the specular layer properties of an OpenPBR material.
@@ -14562,47 +15591,15 @@ const OpenPBRMaterialBaseProperties = (props) => {
  */
 const OpenPBRMaterialSpecularProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Specular Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Specular Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.specularRoughnessAnisotropyTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeight", min: 0, max: 1, step: 0.01, description: "Controls how strong the reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Weight", target: material, propertyKey: "specularWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Specular Color", target: material, propertyKey: "specularColor", isLinearMode: true, description: "Tints the color of reflections.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Color", target: material, propertyKey: "specularColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry reflections are.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness", target: material, propertyKey: "specularRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches reflections in one direction for brushed or streaked looks. Requires specular_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/microfacetmodel" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular Roughness Anisotropy", target: material, propertyKey: "specularRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity and refraction. The parameter has no effect on metals.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate" })] }));
 };
 const OpenPBRMaterialTransmissionProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepth", min: 0, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Depth", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionDepthTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Scatter", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionScatterTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Dispersion Scale", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.transmissionDispersionScaleTexture = texture));
-                    }
-                } })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the transparency effect. The parameter is superseded by base_metalness.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true, description: "Tints light passing through the material. Works with transmission_depth for realistic thickness-based coloring.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth (cm)", target: material, propertyKey: "transmissionDepth", min: 0, max: 5, step: 0.001, convertTo: (value) => value * 100, convertFrom: (value) => value / 100, description: "Controls how quickly light is absorbed with thickness. Distance is in scene units.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepthTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true, description: "Adds internal cloudiness to create materials like juice, honey, etc. Requires transmission_depth > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatterTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01, description: "Shifts scattering forward/backward for clearer or hazier appearance depending on viewing angle.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1, description: "Physical value for the rainbow color separation in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01, description: "Strength of rainbow color separation in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/translucentbase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScaleTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
+};
+const OpenPBRMaterialSubsurfaceProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Weight", target: material, propertyKey: "subsurfaceWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the subsurface effect. The parameter is superseded by base_metalness and transmission_weight.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Weight", target: material, propertyKey: "subsurfaceWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Subsurface Color", target: material, propertyKey: "subsurfaceColor", isLinearMode: true, description: "Colors the light that scatters under the surface.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Color", target: material, propertyKey: "subsurfaceColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Radius (cm)", target: material, propertyKey: "subsurfaceRadius", min: 0, max: 4, step: 0.001, convertTo: (value) => value * 100, convertFrom: (value) => value / 100, description: "Controls how soft and spread-out the subsurface look appears.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Subsurface Radius Scale", target: material, propertyKey: "subsurfaceRadiusScale", isLinearMode: true, description: "Tints thin areas with light shining through, like warm glow on ears or leaves.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Subsurface Radius Scale", target: material, propertyKey: "subsurfaceRadiusScaleTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Subsurface Scatter Anisotropy", target: material, propertyKey: "subsurfaceScatterAnisotropy", min: -1, max: 1, step: 0.01, description: "Shifts scattering forward/backward for a softer glow or a sharper one.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/basesubstrate/subsurface" })] }));
 };
 /**
  * Displays the coat layer properties of an OpenPBR material.
@@ -14611,27 +15608,7 @@ const OpenPBRMaterialTransmissionProperties = (props) => {
  */
 const OpenPBRMaterialCoatProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Coat Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Roughness Anisotropy", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatRoughnessAnisotropyTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Coat Darkening", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.coatDarkeningTexture = texture));
-                    }
-                } })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the coat.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Weight", target: material, propertyKey: "coatWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Coat Color", target: material, propertyKey: "coatColor", isLinearMode: true, description: "Tints the coat, for tinted varnish or paint.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Color", target: material, propertyKey: "coatColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughness", min: 0, max: 1, step: 0.01, description: "Controls how sharp or blurry the coat reflections appear.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat/roughening" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Roughness", target: material, propertyKey: "coatRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropy", min: 0, max: 1, step: 0.01, description: "Stretches coat reflections in one direction for brushed or streaked looks. Requires coat_roughness > 0.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Roughness Anisotropy", target: material, propertyKey: "coatRoughnessAnisotropyTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat IOR", target: material, propertyKey: "coatIor", min: 1, max: 3, step: 0.01, description: "Index of refraction is a physical value controlling the reflective intensity of the coat.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkening", min: 0, max: 1, step: 0.01, description: "Darkens the base under the coat, similar to how real varnish deepens color.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/coat/darkening" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Coat Darkening", target: material, propertyKey: "coatDarkeningTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
 };
 /**
  * Displays the fuzz layer properties of an OpenPBR material.
@@ -14640,19 +15617,7 @@ const OpenPBRMaterialCoatProperties = (props) => {
  */
 const OpenPBRMaterialFuzzProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Fuzz Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Fuzz Roughness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.fuzzRoughnessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Number of Samples", target: material, propertyKey: "fuzzSampleNumber", min: 4, max: 64, step: 1 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Weight", target: material, propertyKey: "fuzzWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColor", isLinearMode: true, description: "Controls the color of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Color", target: material, propertyKey: "fuzzColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughness", min: 0, max: 1, step: 0.01, description: "Controls the roughness of the fuzz.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/fuzz" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Fuzz Roughness", target: material, propertyKey: "fuzzRoughnessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Number of Samples", target: material, propertyKey: "fuzzSampleNumber", min: 4, max: 64, step: 1 })] }));
 };
 /**
  * Displays the emission properties of an OpenPBR material.
@@ -14661,11 +15626,7 @@ const OpenPBRMaterialFuzzProperties = (props) => {
  */
 const OpenPBRMaterialEmissionProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Emission Color", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.emissionColorTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColor", isLinearMode: true, description: "Controls the color of the glow.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/emission" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emission Color", target: material, propertyKey: "emissionColorTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Emission Luminance", target: material, propertyKey: "emissionLuminance", min: 0, max: 10, step: 0.01, description: "Controls how bright the glow is.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/emission" })] }));
 };
 /**
  * Displays the thin film properties of an OpenPBR material.
@@ -14674,15 +15635,7 @@ const OpenPBRMaterialEmissionProperties = (props) => {
  */
 const OpenPBRMaterialThinFilmProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Weight", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.thinFilmWeightTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Thin Film Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.thinFilmThicknessTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeight", min: 0, max: 1, step: 0.01, description: "Controls the presence of the thin-film.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Thin Film Weight", target: material, propertyKey: "thinFilmWeightTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThickness", min: 0, max: 1, step: 0.01, description: "Changes the color pattern of the iridescence.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Thin Film Thickness", target: material, propertyKey: "thinFilmThicknessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Thin Film IOR", target: material, propertyKey: "thinFilmIor", min: 1, max: 3, step: 0.01, description: "Alters the strength and contrast of the color shift based in the index of refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-filmiridescence" })] }));
 };
 /**
  * Displays the geometry properties of an OpenPBR material.
@@ -14691,31 +15644,7 @@ const OpenPBRMaterialThinFilmProperties = (props) => {
  */
 const OpenPBRMaterialGeometryProperties = (props) => {
     const { material } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Opacity", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryOpacityTexture = texture));
-                    }
-                } }), jsx(FileUploadLine, { label: "Geometry Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryNormalTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryTangentTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01 }), jsx(FileUploadLine, { label: "Geometry Coat Normal", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatNormalTexture = texture));
-                    }
-                } }), jsx(FileUploadLine, { label: "Geometry Coat Tangent", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
-                    }
-                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.1 }), jsx(FileUploadLine, { label: "Geometry Thickness", accept: ".jpg, .png, .webp, .tga, .dds, .env, .exr", onClick: (files) => {
-                    if (files.length > 0) {
-                        UpdateTexture(files[0], material, (texture) => (material.geometryThicknessTexture = texture));
-                    }
-                } })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Opacity", target: material, propertyKey: "geometryOpacity", min: 0, max: 1, step: 0.01, description: "Controls material presence and transparency cutout.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/opacity/transparency" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Opacity", target: material, propertyKey: "geometryOpacityTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: CheckboxPropertyLine, label: "Thin-Walled", target: material, propertyKey: "geometryThinWalled", description: "When enabled, treats material as a thin shell (like leaves, paper sheets or windows). Disables ray bending in refraction.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thin-walledcase" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Normal", target: material, propertyKey: "geometryNormalTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tangent Angle", target: material, propertyKey: "geometryTangentAngle", min: 0, max: Math.PI, step: 0.01, description: "Tangent vector controlling anisotropic reflection direction for the base (metal and non-metal). Works with specular_roughness_anisotropy.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/geometry/tangent" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Tangent", target: material, propertyKey: "geometryTangentTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Coat Tangent Angle", target: material, propertyKey: "geometryCoatTangentAngle", min: 0, max: Math.PI, step: 0.01, description: "Tangent vector controlling anisotropic reflection direction for the coat. Works with coat_roughness_anisotropy.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/geometry/coat-tangent" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Coat Normal", target: material, propertyKey: "geometryCoatNormalTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Coat Tangent", target: material, propertyKey: "geometryCoatTangentTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.001, description: "Controls the thickness of the geometry for volume approximations.", docLink: "https://academysoftwarefoundation.github.io/OpenPBR/index.html#model/thickness" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThicknessTexture", scene: material.getScene(), defaultValue: null, onLink: (texture) => void 0 })] }));
 };
 
 const LightFalloffOptions = [
@@ -15076,6 +16005,10 @@ const MaterialPropertiesServiceDefinition = {
                     section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialTransmissionProperties, { material: context }),
                 },
+                {
+                    section: "OpenPBR",
+                    component: ({ context }) => jsx(OpenPBRMaterialSubsurfaceProperties, { material: context }),
+                },
                 {
                     section: "OpenPBR",
                     component: ({ context }) => jsx(OpenPBRMaterialCoatProperties, { material: context }),
@@ -15626,9 +16559,15 @@ const AbstractMeshDebugProperties = (props) => {
                             } }), jsx(SyncedSliderPropertyLine, { label: "Target Bone", value: displayBoneIndex, min: 0, max: targetBoneOptions.length - 1, step: 1, onChange: (value) => onBoneDisplayIndexChangeHandler(value) })] }) }), skeleton && jsx(SwitchPropertyLine, { label: "Display Skeleton Map", value: displaySkeletonMap, onChange: () => displaySkeletonMapHandler() })] }));
 };
 
+const ShDegreeOptions = [
+    { label: "None (0)", value: 0 },
+    { label: "Degree 1 (3 params)", value: 1 },
+    { label: "Degree 2 (8 params)", value: 2 },
+    { label: "Degree 3 (15 params)", value: 3 },
+];
 const GaussianSplattingDisplayProperties = (props) => {
     const { mesh } = props;
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Splat Count", value: mesh.splatCount ?? 0 }), jsx(StringifiedPropertyLine, { label: "SH Parameter Count", value: (mesh.shDegree + 1) * (mesh.shDegree + 1) - 1 }), jsx(BooleanBadgePropertyLine, { label: "Has Compensation", value: mesh.compensation }), jsx(StringifiedPropertyLine, { label: "Kernel Size", value: mesh.kernelSize })] }));
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Splat Count", value: mesh.splatCount ?? 0 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "SH Degree", options: ShDegreeOptions, target: mesh, propertyKey: "shDegree" }), jsx(StringifiedPropertyLine, { label: "Max SH Degree", value: mesh.maxShDegree }), jsx(BooleanBadgePropertyLine, { label: "Has Compensation", value: mesh.compensation }), jsx(StringifiedPropertyLine, { label: "Kernel Size", value: mesh.kernelSize })] }));
 };
 
 function GetNodeGeometry(mesh) {
@@ -15637,7 +16576,7 @@ function GetNodeGeometry(mesh) {
 async function EditNodeGeometry(nodeGeometry, hostScene) {
     // TODO: Figure out how to get all the various build steps to work with this.
     //       See the initial attempt here: https://github.com/BabylonJS/Babylon.js/pull/17646
-    // const { NodeGeometryEditor } = await import("node-geometry-editor/nodeGeometryEditor");
+    // const { NodeGeometryEditor } = await import("@babylonjs/node-geometry-editor");
     // NodeGeometryEditor.Show({ nodeGeometry: nodeGeometry, hostScene: mesh.getScene() });
     await nodeGeometry.edit({ nodeGeometryEditorConfig: { hostScene } });
 }
@@ -15772,7 +16711,7 @@ const NodePropertiesServiceDefinition = {
 async function EditParticleSystem(particleSystem) {
     // TODO: Figure out how to get all the various build steps to work with this.
     //       See the initial attempt here: https://github.com/BabylonJS/Babylon.js/pull/17646
-    // const { NodeParticleEditor } = await import("node-particle-editor/nodeParticleEditor");
+    // const { NodeParticleEditor } = await import("@babylonjs/node-particle-editor");
     // NodeParticleEditor.Show({ nodeParticleSet: NodeParticleSystemSet });
     const scene = particleSystem.getScene();
     if (scene) {
@@ -17133,48 +18072,12 @@ const PhysicsPropertiesServiceDefinition = {
                 },
             ],
         });
-        return {
-            dispose: () => {
-                contentRegistration.dispose();
-            },
-        };
-    },
-};
-
-const useCheckboxStyles = makeStyles({
-    indicator: {
-        margin: 0,
-    },
-});
-/**
- * This is a primitive fluent checkbox that can both read and write checked state
- * @param props
- * @returns Checkbox component
- */
-const Checkbox = (props) => {
-    Checkbox.displayName = "Checkbox";
-    const [checked, setChecked] = useState(() => props.value ?? false);
-    const classes = useCheckboxStyles();
-    useEffect(() => {
-        if (props.value != undefined) {
-            setChecked(props.value); // Update local state when props.checked changes
-        }
-    }, [props.value]);
-    const onChange = (ev, _) => {
-        props.onChange(ev.target.checked);
-        setChecked(ev.target.checked);
-    };
-    return jsx(Checkbox$1, { checked: checked, onChange: onChange, indicator: { className: classes.indicator } });
-};
-
-/**
- * Wraps a checkbox in a property line
- * @param props - PropertyLineProps and CheckboxProps
- * @returns property-line wrapped checkbox
- */
-const CheckboxPropertyLine = (props) => {
-    CheckboxPropertyLine.displayName = "CheckboxPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(Checkbox, { ...props }) }));
+        return {
+            dispose: () => {
+                contentRegistration.dispose();
+            },
+        };
+    },
 };
 
 /**
@@ -18139,256 +19042,40 @@ const SpritePropertiesServiceDefinition = {
                     component: ({ context }) => jsx(SpriteManagerOtherProperties, { spriteManager: context }),
                 },
             ],
-        });
-        const spriteSectionContentRegistration = propertiesService.addSectionContent({
-            key: "Sprite Properties",
-            predicate: (entity) => entity instanceof Sprite,
-            content: [
-                {
-                    section: "General",
-                    component: ({ context }) => jsx(SpriteGeneralProperties, { sprite: context, selectionService: selectionService }),
-                },
-                {
-                    section: "Transform",
-                    component: ({ context }) => jsx(SpriteTransformProperties, { sprite: context }),
-                },
-                {
-                    section: "Cell",
-                    component: ({ context }) => jsx(SpriteCellProperties, { sprite: context }),
-                },
-                {
-                    section: "Animation",
-                    component: ({ context }) => jsx(SpriteAnimationProperties, { sprite: context }),
-                },
-                {
-                    section: "Other",
-                    component: ({ context }) => jsx(SpriteOtherProperties, { sprite: context }),
-                },
-            ],
-        });
-        return {
-            dispose: () => {
-                spriteManagerSectionContentRegistration.dispose();
-                spriteSectionContentRegistration.dispose();
-            },
-        };
-    },
-};
-
-/**
- * Creates a lazy component wrapper that only calls the async function to get the underlying component when the lazy component is actually mounted.
- * This allows deferring imports until they are needed. While the underlying component is being loaded, a spinner is displayed.
- * @param getComponentAsync A function that returns a promise resolving to the component.
- * @param defaultProps Options for the loading spinner.
- * @returns A React component that displays a spinner while loading the async component.
- */
-function MakeLazyComponent(getComponentAsync, defaultProps) {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const LazyComponent = lazy(async () => {
-        const component = await getComponentAsync();
-        return { default: component };
-    });
-    return forwardRef((props, ref) => {
-        const { spinnerSize = defaultProps?.spinnerSize, spinnerLabel = defaultProps?.spinnerLabel, ...rest } = props;
-        const componentProps = { ...rest, ref };
-        return (jsx(Suspense, { fallback: jsx(Spinner, { ref: ref, size: spinnerSize, label: spinnerLabel }), children: jsx(LazyComponent, { ...componentProps }) }));
-    });
-}
-
-const AdvancedDynamicTextureGeneralProperties = MakeLazyComponent(async () => {
-    // Defer importing anything from the gui package until this component is actually mounted.
-    const { AdvancedDynamicTextureInstrumentation } = await import('@babylonjs/gui/2D/adtInstrumentation.js');
-    return (props) => {
-        const { texture } = props;
-        const instrumentation = useResource(useCallback(() => {
-            const instrumentation = new AdvancedDynamicTextureInstrumentation(texture);
-            instrumentation.captureRenderTime = true;
-            instrumentation.captureLayoutTime = true;
-            return instrumentation;
-        }, [texture]));
-        const layoutTime = useObservableState(useCallback(() => instrumentation.layoutTimeCounter.current, [instrumentation.layoutTimeCounter]), usePollingObservable(1000));
-        const renderTime = useObservableState(useCallback(() => instrumentation.renderTimeCounter.current, [instrumentation.renderTimeCounter]), usePollingObservable(1000));
-        return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Last Layout Time", value: layoutTime, precision: 2, units: "ms" }), jsx(StringifiedPropertyLine, { label: "Last Render Time", value: renderTime, precision: 2, units: "ms" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Render Scale", target: texture, propertyKey: "renderScale", min: 0.1, max: 5, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Premultiply Alpha", target: texture, propertyKey: "premulAlpha" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Ideal Width", target: texture, propertyKey: "idealWidth" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Ideal Height", target: texture, propertyKey: "idealHeight" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Smallest Ideal", target: texture, propertyKey: "useSmallestIdeal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render at Ideal Size", target: texture, propertyKey: "renderAtIdealSize" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invalidate Rect Optimization", target: texture, propertyKey: "useInvalidateRectOptimization" })] }));
-    };
-}, { spinnerSize: "extra-tiny", spinnerLabel: "Loading..." });
-const AdvancedDynamicTexturePreviewProperties = (props) => {
-    const { texture } = props;
-    return (jsx(Fragment, { children: jsx(ButtonLine, { label: "Edit GUI", icon: EditRegular, onClick: async () => {
-                const { GUIEditor } = await import('@babylonjs/gui-editor');
-                await GUIEditor.Show({ liveGuiTexture: texture });
-            } }) }));
-};
-
-const TextureFormat = [
-    { label: "Alpha", normalizable: false, value: Constants.TEXTUREFORMAT_ALPHA },
-    { label: "Luminance", normalizable: false, value: Constants.TEXTUREFORMAT_LUMINANCE },
-    { label: "Luminance/Alpha", normalizable: false, value: Constants.TEXTUREFORMAT_LUMINANCE_ALPHA },
-    { label: "RGB", normalizable: true, value: Constants.TEXTUREFORMAT_RGB },
-    { label: "RGBA", normalizable: true, value: Constants.TEXTUREFORMAT_RGBA },
-    { label: "R (red)", normalizable: true, value: Constants.TEXTUREFORMAT_RED },
-    { label: "RG (red/green)", normalizable: true, value: Constants.TEXTUREFORMAT_RG },
-    { label: "R (red) integer", normalizable: false, value: Constants.TEXTUREFORMAT_RED_INTEGER },
-    { label: "RG (red/green) integer", normalizable: false, value: Constants.TEXTUREFORMAT_RG_INTEGER },
-    { label: "RGB integer", normalizable: false, value: Constants.TEXTUREFORMAT_RGB_INTEGER },
-    { label: "RGBA integer", normalizable: false, value: Constants.TEXTUREFORMAT_RGBA_INTEGER },
-    { label: "BGRA", normalizable: true, value: Constants.TEXTUREFORMAT_BGRA },
-    { label: "Depth24/Stencil8", normalizable: false, hideType: true, value: Constants.TEXTUREFORMAT_DEPTH24_STENCIL8 },
-    { label: "Depth32 float", normalizable: false, hideType: true, value: Constants.TEXTUREFORMAT_DEPTH32_FLOAT },
-    { label: "Depth16", normalizable: false, value: Constants.TEXTUREFORMAT_DEPTH16 },
-    { label: "Depth24", normalizable: false, value: Constants.TEXTUREFORMAT_DEPTH24 },
-    { label: "Depth24Unorm/Stencil8", normalizable: false, hideType: true, value: Constants.TEXTUREFORMAT_DEPTH24UNORM_STENCIL8 },
-    { label: "Depth32Float/Stencil8", normalizable: false, hideType: true, value: Constants.TEXTUREFORMAT_DEPTH32FLOAT_STENCIL8 },
-    { label: "RGBA BPTC UNorm", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_BPTC_UNORM },
-    { label: "RGB BPTC UFloat", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT },
-    { label: "RGB BPTC SFloat", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGB_BPTC_SIGNED_FLOAT },
-    { label: "RGBA S3TC DXT5", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT5 },
-    { label: "RGBA S3TC DXT3", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT3 },
-    { label: "RGBA S3TC DXT1", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT1 },
-    { label: "RGB S3TC DXT1", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGB_S3TC_DXT1 },
-    { label: "RGBA ASTC 4x4", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_ASTC_4x4 },
-];
-function FindTextureFormat(format) {
-    for (let i = 0; i < TextureFormat.length; ++i) {
-        if (TextureFormat[i].value === format) {
-            return TextureFormat[i];
-        }
-    }
-    return null;
-}
-const TextureType = [
-    { label: "unsigned byte", normalizable: true, value: Constants.TEXTURETYPE_UNSIGNED_BYTE },
-    { label: "32-bit float", normalizable: false, value: Constants.TEXTURETYPE_FLOAT },
-    { label: "16-bit float", normalizable: false, value: Constants.TEXTURETYPE_HALF_FLOAT },
-    { label: "signed byte", normalizable: true, value: Constants.TEXTURETYPE_BYTE },
-    { label: "signed short", normalizable: false, value: Constants.TEXTURETYPE_SHORT },
-    { label: "unsigned short", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_SHORT },
-    { label: "signed int", normalizable: false, value: Constants.TEXTURETYPE_INT },
-    { label: "unsigned int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INTEGER },
-    { label: "unsigned 4/4/4/4 short", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4 },
-    { label: "unsigned 5/5/5/1 short", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1 },
-    { label: "unsigned 5/6/5 short", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_SHORT_5_6_5 },
-    { label: "unsigned 2/10/10/10 int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV },
-    { label: "unsigned 24/8 int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INT_24_8 },
-    { label: "unsigned 10f/11f/11f int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV },
-    { label: "unsigned 5/9/9/9 int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV },
-    { label: "32-bits with only 8-bit used (stencil)", normalizable: false, value: Constants.TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV },
-];
-function FindTextureType(type) {
-    for (let i = 0; i < TextureType.length; ++i) {
-        if (TextureType[i].value === type) {
-            return TextureType[i];
-        }
-    }
-    return null;
-}
-
-const BaseTexturePreviewProperties = (props) => {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { texture, textureEditor: TextureEditor } = props;
-    const texturePreviewImperativeRef = useRef(null);
-    const childWindow = useRef(null);
-    return (jsxs(Fragment, { children: [jsx(TexturePreview, { imperativeRef: texturePreviewImperativeRef, texture: texture }), jsx(TextureUpload, { texture: texture }), jsx(ButtonLine, { label: "Edit Texture", onClick: () => childWindow.current?.open(), icon: EditRegular }), jsx(ChildWindow, { id: "Texture Editor", imperativeRef: childWindow, children: jsx(TextureEditor, { texture: texture, onUpdate: async () => await texturePreviewImperativeRef.current?.refresh() }) })] }));
-};
-const BaseTextureGeneralProperties = (props) => {
-    const { texture } = props;
-    const internalTexture = useProperty(texture, "_texture");
-    const internalUniqueId = useProperty(internalTexture, "uniqueId");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Display Name", target: texture, propertyKey: "displayName" }), internalUniqueId != null ? (jsx(StringifiedPropertyLine, { label: "Internal Unique ID", description: "The unique ID of the internal texture.", value: internalUniqueId })) : (jsx(BooleanBadgePropertyLine, { label: "Internal Unique ID", description: "This texture has no internal texture.", value: false }))] }));
-};
-const CoordinatesMode = [
-    { label: "Explicit", value: Texture.EXPLICIT_MODE },
-    { label: "Cubic", value: Texture.CUBIC_MODE },
-    { label: "Inverse cubic", value: Texture.INVCUBIC_MODE },
-    { label: "Equirectangular", value: Texture.EQUIRECTANGULAR_MODE },
-    { label: "Fixed equirectangular", value: Texture.FIXED_EQUIRECTANGULAR_MODE },
-    { label: "Fixed equirectangular mirrored", value: Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE },
-    { label: "Planar", value: Texture.PLANAR_MODE },
-    { label: "Projection", value: Texture.PROJECTION_MODE },
-    { label: "Skybox", value: Texture.SKYBOX_MODE },
-    { label: "Spherical", value: Texture.SPHERICAL_MODE },
-];
-const BaseTextureCharacteristicProperties = (props) => {
-    const { texture } = props;
-    const internalTexture = useProperty(texture, "_texture");
-    const format = useProperty(internalTexture, "format") ?? NaN;
-    const type = useProperty(internalTexture, "type") ?? NaN;
-    const depth = useProperty(internalTexture, "depth");
-    const useSRGBBuffer = useProperty(internalTexture, "_useSRGBBuffer");
-    const samples = useProperty(internalTexture, "samples") ?? "?";
-    const displayFormat = FindTextureFormat(format === -1 ? Constants.TEXTUREFORMAT_RGBA : format);
-    const displayType = FindTextureType(type === -1 ? Constants.TEXTURETYPE_UNSIGNED_BYTE : type);
-    const maxAnisotropy = texture.getScene()?.getEngine().getCaps().maxAnisotropy ?? 1;
-    return (jsxs(Fragment, { children: [texture.is2DArray && jsx(TextPropertyLine, { label: "Layers", value: depth?.toString() ?? "?" }), texture.is3D && jsx(TextPropertyLine, { label: "Depth", value: depth?.toString() ?? "?" }), jsx(TextPropertyLine, { label: "Format", value: displayFormat?.label ?? "unknown" }), !displayFormat?.hideType && !displayFormat?.compressed && jsx(TextPropertyLine, { label: "Type", value: displayType?.label ?? "unknown" }), !!displayFormat?.normalizable && !displayFormat?.compressed && displayType?.normalizable != undefined && (jsx(BooleanBadgePropertyLine, { label: "Normalized", value: displayType.normalizable })), jsx(BooleanBadgePropertyLine, { label: "Compressed", value: displayFormat?.compressed ?? false }), jsx(BooleanBadgePropertyLine, { label: "sRGB Buffers", value: useSRGBBuffer ?? false }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Gamma Space", target: texture, propertyKey: "gammaSpace" }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Has Alpha", target: texture, propertyKey: "hasAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Alpha from RGB", target: texture, propertyKey: "getAlphaFromRGB" }), jsx(BooleanBadgePropertyLine, { label: "3D", value: texture.is3D }), jsx(BooleanBadgePropertyLine, { label: "2D Array", value: texture.is2DArray }), jsx(BooleanBadgePropertyLine, { label: "Cube", value: texture.isCube }), jsx(BooleanBadgePropertyLine, { label: "Render Target", value: texture.isRenderTarget }), jsx(BooleanBadgePropertyLine, { label: "Mipmaps", value: !texture.noMipmap }), jsx(TextPropertyLine, { label: "Samples", value: samples.toString() }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "UV Set", target: texture, propertyKey: "coordinatesIndex", min: 0, max: 3, step: 1 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", target: texture, propertyKey: "coordinatesMode", options: CoordinatesMode }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Level", target: texture, propertyKey: "level", min: 0, max: 2, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Anisotropy", target: texture, propertyKey: "anisotropicFilteringLevel", min: 1, max: maxAnisotropy, step: 1 })] }));
-};
-const BaseTextureTransformProperties = (props) => {
-    const { texture } = props;
-    return (jsxs(Fragment, { children: [texture.canRescale && (jsx(ButtonLine, { label: "Scale Up", onClick: () => {
-                    texture.scale(2);
-                } })), texture.canRescale && (jsx(ButtonLine, { label: "Scale Down", onClick: () => {
-                    texture.scale(0.5);
-                } }))] }));
-};
-
-const CubeTextureTransformProperties = (props) => {
-    const { texture } = props;
-    const [toDisplayAngle, fromDisplayAngle] = useAngleConverters();
-    return (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rotation Y", target: texture, propertyKey: "rotationY", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.0001, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }));
-};
-
-const MultiRenderTargetGeneralProperties = (props) => {
-    const { texture } = props;
-    return (jsx(Fragment, { children: jsx(BoundProperty, { component: StringifiedPropertyLine, label: "Count", description: "The number of render target textures.", target: texture, propertyKey: "count" }) }));
-};
-
-const RenderTargetTextureGeneralProperties = (props) => {
-    const { texture } = props;
-    const depthStencilTexture = useProperty(texture.renderTarget, "_depthStencilTexture");
-    const depthStencilTextureDisplayFormat = depthStencilTexture ? FindTextureFormat(depthStencilTexture.format) : null;
-    return (jsx(Fragment, { children: depthStencilTextureDisplayFormat ? (jsx(TextPropertyLine, { label: "Depth/Stencil Format", value: depthStencilTextureDisplayFormat.label })) : (jsx(BooleanBadgePropertyLine, { label: "Depth/Stencil Texture", value: false })) }));
-};
-
-const TexturePreviewProperties = (props) => {
-    const { texture } = props;
-    const rawUrl = useProperty(texture, "url");
-    const displayUrl = !rawUrl || rawUrl.substring(0, 4) === "data" || rawUrl.substring(0, 4) === "blob" ? "" : rawUrl;
-    return (jsx(Fragment, { children: jsx(TextInputPropertyLine, { label: "URL", value: displayUrl, onChange: (value) => {
-                texture.updateURL(value);
-            } }) }));
-};
-const TextureGeneralProperties = (props) => {
-    const { texture } = props;
-    return (jsx(Fragment, { children: jsx(BooleanBadgePropertyLine, { label: "Invert Y", description: "If true, the texture is stored as inverted on Y", value: texture.invertY }) }));
-};
-const TextureTransformProperties = (props) => {
-    const { texture } = props;
-    const [toDisplayAngle, fromDisplayAngle] = useAngleConverters();
-    const wrapU = useProperty(texture, "wrapU");
-    const wrapV = useProperty(texture, "wrapV");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U offset", target: texture, propertyKey: "uOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V offset", target: texture, propertyKey: "vOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U scale", target: texture, propertyKey: "uScale", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V scale", target: texture, propertyKey: "vScale", step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "U angle", target: texture, propertyKey: "uAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "V angle", target: texture, propertyKey: "vAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "W angle", target: texture, propertyKey: "wAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(SwitchPropertyLine, { label: "Clamp U", value: wrapU === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapU = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) }), jsx(SwitchPropertyLine, { label: "Clamp V", value: wrapV === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapV = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) })] }));
-};
-
-const SamplingMode = [
-    { label: "Nearest", value: Texture.NEAREST_NEAREST }, // 1
-    { label: "Linear", value: Texture.LINEAR_LINEAR }, // 2
-    { label: "Linear & linear mip", value: Texture.LINEAR_LINEAR_MIPLINEAR }, // 3
-    { label: "Linear & nearest mip", value: Texture.LINEAR_LINEAR_MIPNEAREST }, // 11
-    { label: "Nearest & linear mip", value: Texture.NEAREST_NEAREST_MIPLINEAR }, // 8
-    { label: "Nearest & nearest mip", value: Texture.NEAREST_NEAREST_MIPNEAREST }, // 4
-    { label: "Nearest/Linear", value: Texture.NEAREST_LINEAR }, // 7
-    { label: "Nearest/Linear & linear mip", value: Texture.NEAREST_LINEAR_MIPLINEAR }, // 6
-    { label: "Nearest/Linear & nearest mip", value: Texture.NEAREST_LINEAR_MIPNEAREST }, // 5
-    { label: "Linear/Nearest", value: Texture.LINEAR_NEAREST }, // 12
-    { label: "Linear/Nearest & linear mip", value: Texture.LINEAR_NEAREST_MIPLINEAR }, // 10
-    { label: "Linear/Nearest & nearest mip", value: Texture.LINEAR_NEAREST_MIPNEAREST }, // 9
-];
-const ThinTextureGeneralProperties = (props) => {
-    const { texture } = props;
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Width", value: texture.getSize().width, units: "px" }), jsx(StringifiedPropertyLine, { label: "Height", value: texture.getSize().height, units: "px" })] }));
-};
-const ThinTextureSamplingProperties = (props) => {
-    const { texture } = props;
-    const samplingMode = useObservableState(useCallback(() => texture.samplingMode, [texture]), useInterceptObservable("function", texture, "updateSamplingMode"));
-    return (jsx(Property, { component: NumberDropdownPropertyLine, label: "Sampling", propertyPath: "samplingMode", value: samplingMode, options: SamplingMode, onChange: (value) => texture.updateSamplingMode(value) }));
+        });
+        const spriteSectionContentRegistration = propertiesService.addSectionContent({
+            key: "Sprite Properties",
+            predicate: (entity) => entity instanceof Sprite,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(SpriteGeneralProperties, { sprite: context, selectionService: selectionService }),
+                },
+                {
+                    section: "Transform",
+                    component: ({ context }) => jsx(SpriteTransformProperties, { sprite: context }),
+                },
+                {
+                    section: "Cell",
+                    component: ({ context }) => jsx(SpriteCellProperties, { sprite: context }),
+                },
+                {
+                    section: "Animation",
+                    component: ({ context }) => jsx(SpriteAnimationProperties, { sprite: context }),
+                },
+                {
+                    section: "Other",
+                    component: ({ context }) => jsx(SpriteOtherProperties, { sprite: context }),
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                spriteManagerSectionContentRegistration.dispose();
+                spriteSectionContentRegistration.dispose();
+            },
+        };
+    },
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -19992,6 +20679,222 @@ const TextureEditorServiceDefinition = {
     },
 };
 
+/**
+ * Creates a lazy component wrapper that only calls the async function to get the underlying component when the lazy component is actually mounted.
+ * This allows deferring imports until they are needed. While the underlying component is being loaded, a spinner is displayed.
+ * @param getComponentAsync A function that returns a promise resolving to the component.
+ * @param defaultProps Options for the loading spinner.
+ * @returns A React component that displays a spinner while loading the async component.
+ */
+function MakeLazyComponent(getComponentAsync, defaultProps) {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const LazyComponent = lazy(async () => {
+        const component = await getComponentAsync();
+        return { default: component };
+    });
+    return forwardRef((props, ref) => {
+        const { spinnerSize = defaultProps?.spinnerSize, spinnerLabel = defaultProps?.spinnerLabel, ...rest } = props;
+        const componentProps = { ...rest, ref };
+        return (jsx(Suspense, { fallback: jsx(Spinner, { ref: ref, size: spinnerSize, label: spinnerLabel }), children: jsx(LazyComponent, { ...componentProps }) }));
+    });
+}
+
+const AdvancedDynamicTextureGeneralProperties = MakeLazyComponent(async () => {
+    // Defer importing anything from the gui package until this component is actually mounted.
+    const { AdvancedDynamicTextureInstrumentation } = await import('@babylonjs/gui/2D/adtInstrumentation.js');
+    return (props) => {
+        const { texture } = props;
+        const instrumentation = useResource(useCallback(() => {
+            const instrumentation = new AdvancedDynamicTextureInstrumentation(texture);
+            instrumentation.captureRenderTime = true;
+            instrumentation.captureLayoutTime = true;
+            return instrumentation;
+        }, [texture]));
+        const layoutTime = useObservableState(useCallback(() => instrumentation.layoutTimeCounter.current, [instrumentation.layoutTimeCounter]), usePollingObservable(1000));
+        const renderTime = useObservableState(useCallback(() => instrumentation.renderTimeCounter.current, [instrumentation.renderTimeCounter]), usePollingObservable(1000));
+        return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Last Layout Time", value: layoutTime, precision: 2, units: "ms" }), jsx(StringifiedPropertyLine, { label: "Last Render Time", value: renderTime, precision: 2, units: "ms" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Render Scale", target: texture, propertyKey: "renderScale", min: 0.1, max: 5, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Premultiply Alpha", target: texture, propertyKey: "premulAlpha" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Ideal Width", target: texture, propertyKey: "idealWidth" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Ideal Height", target: texture, propertyKey: "idealHeight" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Smallest Ideal", target: texture, propertyKey: "useSmallestIdeal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render at Ideal Size", target: texture, propertyKey: "renderAtIdealSize" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invalidate Rect Optimization", target: texture, propertyKey: "useInvalidateRectOptimization" })] }));
+    };
+}, { spinnerSize: "extra-tiny", spinnerLabel: "Loading..." });
+const AdvancedDynamicTexturePreviewProperties = (props) => {
+    const { texture } = props;
+    return (jsx(Fragment, { children: jsx(ButtonLine, { label: "Edit GUI", icon: EditRegular, onClick: async () => {
+                const { GUIEditor } = await import('@babylonjs/gui-editor');
+                await GUIEditor.Show({ liveGuiTexture: texture });
+            } }) }));
+};
+
+const TextureFormat = [
+    { label: "Alpha", normalizable: false, value: Constants.TEXTUREFORMAT_ALPHA },
+    { label: "Luminance", normalizable: false, value: Constants.TEXTUREFORMAT_LUMINANCE },
+    { label: "Luminance/Alpha", normalizable: false, value: Constants.TEXTUREFORMAT_LUMINANCE_ALPHA },
+    { label: "RGB", normalizable: true, value: Constants.TEXTUREFORMAT_RGB },
+    { label: "RGBA", normalizable: true, value: Constants.TEXTUREFORMAT_RGBA },
+    { label: "R (red)", normalizable: true, value: Constants.TEXTUREFORMAT_RED },
+    { label: "RG (red/green)", normalizable: true, value: Constants.TEXTUREFORMAT_RG },
+    { label: "R (red) integer", normalizable: false, value: Constants.TEXTUREFORMAT_RED_INTEGER },
+    { label: "RG (red/green) integer", normalizable: false, value: Constants.TEXTUREFORMAT_RG_INTEGER },
+    { label: "RGB integer", normalizable: false, value: Constants.TEXTUREFORMAT_RGB_INTEGER },
+    { label: "RGBA integer", normalizable: false, value: Constants.TEXTUREFORMAT_RGBA_INTEGER },
+    { label: "BGRA", normalizable: true, value: Constants.TEXTUREFORMAT_BGRA },
+    { label: "Depth24/Stencil8", normalizable: false, hideType: true, value: Constants.TEXTUREFORMAT_DEPTH24_STENCIL8 },
+    { label: "Depth32 float", normalizable: false, hideType: true, value: Constants.TEXTUREFORMAT_DEPTH32_FLOAT },
+    { label: "Depth16", normalizable: false, value: Constants.TEXTUREFORMAT_DEPTH16 },
+    { label: "Depth24", normalizable: false, value: Constants.TEXTUREFORMAT_DEPTH24 },
+    { label: "Depth24Unorm/Stencil8", normalizable: false, hideType: true, value: Constants.TEXTUREFORMAT_DEPTH24UNORM_STENCIL8 },
+    { label: "Depth32Float/Stencil8", normalizable: false, hideType: true, value: Constants.TEXTUREFORMAT_DEPTH32FLOAT_STENCIL8 },
+    { label: "RGBA BPTC UNorm", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_BPTC_UNORM },
+    { label: "RGB BPTC UFloat", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT },
+    { label: "RGB BPTC SFloat", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGB_BPTC_SIGNED_FLOAT },
+    { label: "RGBA S3TC DXT5", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT5 },
+    { label: "RGBA S3TC DXT3", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT3 },
+    { label: "RGBA S3TC DXT1", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_S3TC_DXT1 },
+    { label: "RGB S3TC DXT1", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGB_S3TC_DXT1 },
+    { label: "RGBA ASTC 4x4", normalizable: false, compressed: true, value: Constants.TEXTUREFORMAT_COMPRESSED_RGBA_ASTC_4x4 },
+];
+function FindTextureFormat(format) {
+    for (let i = 0; i < TextureFormat.length; ++i) {
+        if (TextureFormat[i].value === format) {
+            return TextureFormat[i];
+        }
+    }
+    return null;
+}
+const TextureType = [
+    { label: "unsigned byte", normalizable: true, value: Constants.TEXTURETYPE_UNSIGNED_BYTE },
+    { label: "32-bit float", normalizable: false, value: Constants.TEXTURETYPE_FLOAT },
+    { label: "16-bit float", normalizable: false, value: Constants.TEXTURETYPE_HALF_FLOAT },
+    { label: "signed byte", normalizable: true, value: Constants.TEXTURETYPE_BYTE },
+    { label: "signed short", normalizable: false, value: Constants.TEXTURETYPE_SHORT },
+    { label: "unsigned short", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_SHORT },
+    { label: "signed int", normalizable: false, value: Constants.TEXTURETYPE_INT },
+    { label: "unsigned int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INTEGER },
+    { label: "unsigned 4/4/4/4 short", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4 },
+    { label: "unsigned 5/5/5/1 short", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1 },
+    { label: "unsigned 5/6/5 short", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_SHORT_5_6_5 },
+    { label: "unsigned 2/10/10/10 int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV },
+    { label: "unsigned 24/8 int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INT_24_8 },
+    { label: "unsigned 10f/11f/11f int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV },
+    { label: "unsigned 5/9/9/9 int", normalizable: false, value: Constants.TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV },
+    { label: "32-bits with only 8-bit used (stencil)", normalizable: false, value: Constants.TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV },
+];
+function FindTextureType(type) {
+    for (let i = 0; i < TextureType.length; ++i) {
+        if (TextureType[i].value === type) {
+            return TextureType[i];
+        }
+    }
+    return null;
+}
+
+const BaseTexturePreviewProperties = (props) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { texture, textureEditor: TextureEditor } = props;
+    const texturePreviewImperativeRef = useRef(null);
+    const childWindow = useRef(null);
+    return (jsxs(Fragment, { children: [jsx(TexturePreview, { imperativeRef: texturePreviewImperativeRef, texture: texture }), jsx(TextureUpload, { texture: texture }), jsx(ButtonLine, { label: "Edit Texture", onClick: () => childWindow.current?.open(), icon: EditRegular }), jsx(ChildWindow, { id: "Texture Editor", imperativeRef: childWindow, children: jsx(TextureEditor, { texture: texture, onUpdate: async () => await texturePreviewImperativeRef.current?.refresh() }) })] }));
+};
+const BaseTextureGeneralProperties = (props) => {
+    const { texture } = props;
+    const internalTexture = useProperty(texture, "_texture");
+    const internalUniqueId = useProperty(internalTexture, "uniqueId");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextInputPropertyLine, label: "Display Name", target: texture, propertyKey: "displayName" }), internalUniqueId != null ? (jsx(StringifiedPropertyLine, { label: "Internal Unique ID", description: "The unique ID of the internal texture.", value: internalUniqueId })) : (jsx(BooleanBadgePropertyLine, { label: "Internal Unique ID", description: "This texture has no internal texture.", value: false }))] }));
+};
+const CoordinatesMode = [
+    { label: "Explicit", value: Texture.EXPLICIT_MODE },
+    { label: "Cubic", value: Texture.CUBIC_MODE },
+    { label: "Inverse cubic", value: Texture.INVCUBIC_MODE },
+    { label: "Equirectangular", value: Texture.EQUIRECTANGULAR_MODE },
+    { label: "Fixed equirectangular", value: Texture.FIXED_EQUIRECTANGULAR_MODE },
+    { label: "Fixed equirectangular mirrored", value: Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE },
+    { label: "Planar", value: Texture.PLANAR_MODE },
+    { label: "Projection", value: Texture.PROJECTION_MODE },
+    { label: "Skybox", value: Texture.SKYBOX_MODE },
+    { label: "Spherical", value: Texture.SPHERICAL_MODE },
+];
+const BaseTextureCharacteristicProperties = (props) => {
+    const { texture } = props;
+    const internalTexture = useProperty(texture, "_texture");
+    const format = useProperty(internalTexture, "format") ?? NaN;
+    const type = useProperty(internalTexture, "type") ?? NaN;
+    const depth = useProperty(internalTexture, "depth");
+    const useSRGBBuffer = useProperty(internalTexture, "_useSRGBBuffer");
+    const samples = useProperty(internalTexture, "samples") ?? "?";
+    const displayFormat = FindTextureFormat(format === -1 ? Constants.TEXTUREFORMAT_RGBA : format);
+    const displayType = FindTextureType(type === -1 ? Constants.TEXTURETYPE_UNSIGNED_BYTE : type);
+    const maxAnisotropy = texture.getScene()?.getEngine().getCaps().maxAnisotropy ?? 1;
+    return (jsxs(Fragment, { children: [texture.is2DArray && jsx(TextPropertyLine, { label: "Layers", value: depth?.toString() ?? "?" }), texture.is3D && jsx(TextPropertyLine, { label: "Depth", value: depth?.toString() ?? "?" }), jsx(TextPropertyLine, { label: "Format", value: displayFormat?.label ?? "unknown" }), !displayFormat?.hideType && !displayFormat?.compressed && jsx(TextPropertyLine, { label: "Type", value: displayType?.label ?? "unknown" }), !!displayFormat?.normalizable && !displayFormat?.compressed && displayType?.normalizable != undefined && (jsx(BooleanBadgePropertyLine, { label: "Normalized", value: displayType.normalizable })), jsx(BooleanBadgePropertyLine, { label: "Compressed", value: displayFormat?.compressed ?? false }), jsx(BooleanBadgePropertyLine, { label: "sRGB Buffers", value: useSRGBBuffer ?? false }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Gamma Space", target: texture, propertyKey: "gammaSpace" }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Has Alpha", target: texture, propertyKey: "hasAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Alpha from RGB", target: texture, propertyKey: "getAlphaFromRGB" }), jsx(BooleanBadgePropertyLine, { label: "3D", value: texture.is3D }), jsx(BooleanBadgePropertyLine, { label: "2D Array", value: texture.is2DArray }), jsx(BooleanBadgePropertyLine, { label: "Cube", value: texture.isCube }), jsx(BooleanBadgePropertyLine, { label: "Render Target", value: texture.isRenderTarget }), jsx(BooleanBadgePropertyLine, { label: "Mipmaps", value: !texture.noMipmap }), jsx(TextPropertyLine, { label: "Samples", value: samples.toString() }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "UV Set", target: texture, propertyKey: "coordinatesIndex", min: 0, max: 3, step: 1 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", target: texture, propertyKey: "coordinatesMode", options: CoordinatesMode }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Level", target: texture, propertyKey: "level", min: 0, max: 2, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Anisotropy", target: texture, propertyKey: "anisotropicFilteringLevel", min: 1, max: maxAnisotropy, step: 1 })] }));
+};
+const BaseTextureTransformProperties = (props) => {
+    const { texture } = props;
+    return (jsxs(Fragment, { children: [texture.canRescale && (jsx(ButtonLine, { label: "Scale Up", onClick: () => {
+                    texture.scale(2);
+                } })), texture.canRescale && (jsx(ButtonLine, { label: "Scale Down", onClick: () => {
+                    texture.scale(0.5);
+                } }))] }));
+};
+
+const CubeTextureTransformProperties = (props) => {
+    const { texture } = props;
+    const [toDisplayAngle, fromDisplayAngle] = useAngleConverters();
+    return (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rotation Y", target: texture, propertyKey: "rotationY", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.0001, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }));
+};
+
+const MultiRenderTargetGeneralProperties = (props) => {
+    const { texture } = props;
+    return (jsx(Fragment, { children: jsx(BoundProperty, { component: StringifiedPropertyLine, label: "Count", description: "The number of render target textures.", target: texture, propertyKey: "count" }) }));
+};
+
+const RenderTargetTextureGeneralProperties = (props) => {
+    const { texture } = props;
+    const depthStencilTexture = useProperty(texture.renderTarget, "_depthStencilTexture");
+    const depthStencilTextureDisplayFormat = depthStencilTexture ? FindTextureFormat(depthStencilTexture.format) : null;
+    return (jsx(Fragment, { children: depthStencilTextureDisplayFormat ? (jsx(TextPropertyLine, { label: "Depth/Stencil Format", value: depthStencilTextureDisplayFormat.label })) : (jsx(BooleanBadgePropertyLine, { label: "Depth/Stencil Texture", value: false })) }));
+};
+
+const TexturePreviewProperties = (props) => {
+    const { texture } = props;
+    const rawUrl = useProperty(texture, "url");
+    const displayUrl = !rawUrl || rawUrl.substring(0, 4) === "data" || rawUrl.substring(0, 4) === "blob" ? "" : rawUrl;
+    return (jsx(Fragment, { children: jsx(TextInputPropertyLine, { label: "URL", value: displayUrl, onChange: (value) => {
+                texture.updateURL(value);
+            } }) }));
+};
+const TextureGeneralProperties = (props) => {
+    const { texture } = props;
+    return (jsx(Fragment, { children: jsx(BooleanBadgePropertyLine, { label: "Invert Y", description: "If true, the texture is stored as inverted on Y", value: texture.invertY }) }));
+};
+const TextureTransformProperties = (props) => {
+    const { texture } = props;
+    const [toDisplayAngle, fromDisplayAngle] = useAngleConverters();
+    const wrapU = useProperty(texture, "wrapU");
+    const wrapV = useProperty(texture, "wrapV");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U offset", target: texture, propertyKey: "uOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V offset", target: texture, propertyKey: "vOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U scale", target: texture, propertyKey: "uScale", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V scale", target: texture, propertyKey: "vScale", step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "U angle", target: texture, propertyKey: "uAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "V angle", target: texture, propertyKey: "vAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "W angle", target: texture, propertyKey: "wAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(SwitchPropertyLine, { label: "Clamp U", value: wrapU === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapU = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) }), jsx(SwitchPropertyLine, { label: "Clamp V", value: wrapV === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapV = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) })] }));
+};
+
+const SamplingMode = [
+    { label: "Nearest", value: Texture.NEAREST_NEAREST }, // 1
+    { label: "Linear", value: Texture.LINEAR_LINEAR }, // 2
+    { label: "Linear & linear mip", value: Texture.LINEAR_LINEAR_MIPLINEAR }, // 3
+    { label: "Linear & nearest mip", value: Texture.LINEAR_LINEAR_MIPNEAREST }, // 11
+    { label: "Nearest & linear mip", value: Texture.NEAREST_NEAREST_MIPLINEAR }, // 8
+    { label: "Nearest & nearest mip", value: Texture.NEAREST_NEAREST_MIPNEAREST }, // 4
+    { label: "Nearest/Linear", value: Texture.NEAREST_LINEAR }, // 7
+    { label: "Nearest/Linear & linear mip", value: Texture.NEAREST_LINEAR_MIPLINEAR }, // 6
+    { label: "Nearest/Linear & nearest mip", value: Texture.NEAREST_LINEAR_MIPNEAREST }, // 5
+    { label: "Linear/Nearest", value: Texture.LINEAR_NEAREST }, // 12
+    { label: "Linear/Nearest & linear mip", value: Texture.LINEAR_NEAREST_MIPLINEAR }, // 10
+    { label: "Linear/Nearest & nearest mip", value: Texture.LINEAR_NEAREST_MIPNEAREST }, // 9
+];
+const ThinTextureGeneralProperties = (props) => {
+    const { texture } = props;
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Width", value: texture.getSize().width, units: "px" }), jsx(StringifiedPropertyLine, { label: "Height", value: texture.getSize().height, units: "px" })] }));
+};
+const ThinTextureSamplingProperties = (props) => {
+    const { texture } = props;
+    const samplingMode = useObservableState(useCallback(() => texture.samplingMode, [texture]), useInterceptObservable("function", texture, "updateSamplingMode"));
+    return (jsx(Property, { component: NumberDropdownPropertyLine, label: "Sampling", propertyPath: "samplingMode", value: samplingMode, options: SamplingMode, onChange: (value) => texture.updateSamplingMode(value) }));
+};
+
 // Don't use instanceof in this case as we don't want to bring in the gui package just to check if the entity is an AdvancedDynamicTexture.
 function IsAdvancedDynamicTexture$1(entity) {
     return entity?.getClassName?.() === "AdvancedDynamicTexture";
@@ -22086,6 +22989,11 @@ function ShowInspector(scene, options = {}) {
         });
         // This array will contain all the default Inspector service definitions.
         const serviceDefinitions = [];
+        // Ensure the inspectable bridge is running for this scene. The inspector's
+        // ServiceContainer will use the inspectable container as a parent, inheriting
+        // services like ISceneContext and IInspectableCommandRegistry.
+        const inspectableToken = _StartInspectable(scene);
+        disposeActions.push(() => inspectableToken.dispose());
         // Create a container element for the inspector UI.
         // This element will become the root React node, so it must be a new empty node
         // since React will completely take over its contents.
@@ -22135,23 +23043,13 @@ function ShowInspector(scene, options = {}) {
         disposeActions.push(() => {
             parentElement.removeChild(containerElement);
         });
-        // This service exposes the scene that was passed into Inspector through ISceneContext, which is used by other services that may be used in other contexts outside of Inspector.
-        const sceneContextServiceDefinition = {
-            friendlyName: "Inspector Scene Context",
-            produces: [SceneContextIdentity],
-            factory: () => {
-                return {
-                    currentScene: scene,
-                    currentSceneObservable: new Observable(),
-                };
-            },
-        };
-        serviceDefinitions.push(sceneContextServiceDefinition);
         if (options.autoResizeEngine) {
             const observer = scene.onBeforeRenderObservable.add(() => scene.getEngine().resize());
             disposeActions.push(() => observer.remove());
         }
         serviceDefinitions.push(
+        // Watcher service for observing property changes.
+        WatcherServiceDefinition, 
         // Helps with managing gizmos and a shared utility layer.
         GizmoServiceDefinition, 
         // Scene explorer tab and related services.
@@ -22180,6 +23078,8 @@ function ShowInspector(scene, options = {}) {
         HighlightServiceDefinition, 
         // Adds entry points for user feedback on Inspector v2 (probably eventually will be removed).
         UserFeedbackServiceDefinition, 
+        // Shows CLI bridge connection status in the toolbar.
+        CliConnectionStatusServiceDefinition, 
         // Adds always present "mini stats" (like fps) to the toolbar, etc.
         MiniStatsServiceDefinition, 
         // Legacy service to support custom inspectable properties on objects.
@@ -22187,6 +23087,7 @@ function ShowInspector(scene, options = {}) {
         const modularTool = MakeModularTool({
             namespace: "Inspector",
             containerElement,
+            parentContainer: inspectableToken.serviceContainer,
             serviceDefinitions: [
                 // Default Inspector services.
                 ...serviceDefinitions,
@@ -23021,5 +23922,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, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, DraggableLine as O, Popover as P, Dropdown as Q, EntitySelector as R, SpinButtonPropertyLine 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 _, useInterceptObservable as a, UploadButton as a$, HexPropertyLine as a0, InfoLabel as a1, InputHexField as a2, InputHsvField as a3, Inspector as a4, InterceptFunction as a5, InterceptProperty as a6, IsPropertyReadonly as a7, LineContainer as a8, LinkPropertyLine as a9, SettingsStore as aA, SettingsStoreIdentity as aB, ShowInspector as aC, SidePaneContainer as aD, SkeletonSelector as aE, Slider as aF, SpinButton as aG, StatsServiceIdentity as aH, StringDropdown as aI, StringDropdownPropertyLine as aJ, StringifiedPropertyLine as aK, Switch as aL, SwitchPropertyLine as aM, SyncedSliderInput as aN, SyncedSliderPropertyLine as aO, TeachingMoment as aP, TextAreaPropertyLine as aQ, TextInput as aR, TextPropertyLine as aS, Textarea as aT, TextureSelector as aU, TextureUpload as aV, Theme as aW, ThemeServiceIdentity as aX, ToastProvider as aY, ToggleButton as aZ, Tooltip as a_, LinkToEntityPropertyLine as aa, List as ab, MakeDialogTeachingMoment as ac, MakeLazyComponent as ad, MakePopoverTeachingMoment as ae, MakePropertyHook as af, MakeTeachingMoment as ag, MaterialSelector as ah, NodeSelector as ai, NumberDropdown as aj, NumberDropdownPropertyLine as ak, ObservableCollection as al, Pane as am, PlaceholderPropertyLine as an, PositionedPopover as ao, PropertiesServiceIdentity as ap, Property as aq, PropertyContext as ar, PropertyLine as as, QuaternionPropertyLine as at, RotationVectorPropertyLine as au, SceneExplorerServiceIdentity as av, SearchBar as aw, SearchBox as ax, SelectionServiceDefinition as ay, SettingsServiceIdentity as az, useProperty as b, Vector2PropertyLine as b0, Vector4PropertyLine as b1, WatcherServiceIdentity as b2, useAngleConverters as b3, useAsyncResource as b4, useColor3Property as b5, useColor4Property as b6, useEventListener as b7, useEventfulState as b8, useKeyListener as b9, useKeyState as ba, useObservableCollection as bb, useOrderedObservableCollection as bc, usePollingObservable as bd, usePropertyChangedNotifier as be, useQuaternionProperty as bf, useResource as bg, useSetting as bh, useTheme as bi, useThemeMode as bj, useVector3Property as bk, ShellServiceIdentity as c, SceneContextIdentity as d, SelectionServiceIdentity as e, useObservableState as f, AccordionSection as g, ButtonLine as h, ToolsServiceIdentity as i, useExtensionManager as j, Link 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, useToast as u, Color3GradientList as v, Color3PropertyLine as w, Color4GradientComponent as x, Color4GradientList as y, Color4PropertyLine as z };
-//# sourceMappingURL=index-DuVF9zYN.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, 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