@babylonjs/inspector 9.0.0 → 9.1.0

package/lib/{index-DuVF9zYN.js → index-BCbXjPTn.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, cloneElement, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, 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 { 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, 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';
@@ -123,15 +123,15 @@ 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';
@@ -1845,9 +1845,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 +2189,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 +2257,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 +2671,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 +2819,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 +2943,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 +3156,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 +3173,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 +3183,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 +3195,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 +3392,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 +3612,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 +3768,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 +3877,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,6 +4057,96 @@ function useSceneExplorerDragDrop(options) {
     };
 }
 
+/**
+ * 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 = new WeakMap();
 function GetEntityId(entity) {
     if ("uniqueId" in entity && typeof entity.uniqueId === "number") {
@@ -7234,6 +7230,11 @@ const ToolsServiceDefinition = {
     },
 };
 
+/**
+ * The unique identity symbol for the react context service.
+ */
+const ReactContextServiceIdentity = Symbol("ReactContextService");
+
 const useStyles$J = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
@@ -7434,8 +7435,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 +7466,7 @@ const WatcherServiceDefinition = {
             }
         });
         applySettings();
-        return {
+        const watcherService = {
             watchProperty(target, propertyKey, onChanged) {
                 if (refreshObservable) {
                     let previousValue = target[propertyKey];
@@ -7490,6 +7491,7 @@ const WatcherServiceDefinition = {
                 refreshObservable?.notifyObservers();
             },
             dispose: () => {
+                contextHandle.dispose();
                 if (pollingHandle !== null) {
                     clearInterval(pollingHandle);
                     pollingHandle = null;
@@ -7499,6 +7501,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 +7849,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,
-    },
-};
-/**
- * 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'),
-    },
-]);
-
+const InstalledExtensionsKey = "Extensions/InstalledExtensions";
+const ExtensionInstalledKeyPrefix = "Extensions/IsExtensionInstalled";
+function GetExtensionInstalledKey(name) {
+    return `${ExtensionInstalledKeyPrefix}/${name}`;
+}
+function GetExtensionIdentity(feed, name) {
+    return `${feed}/${name}`;
+}
 /**
- * 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) {
@@ -8489,7 +8269,12 @@ class ServiceContainer {
     }
 }
 
-const useStyles$G = makeStyles({
+const ExtensionManagerContext = createContext(undefined);
+function useExtensionManager() {
+    return useContext(ExtensionManagerContext)?.extensionManager;
+}
+
+const useStyles$H = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -8508,7 +8293,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 +8310,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$F = makeStyles({
+const useStyles$G = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8551,6 +8336,9 @@ 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.
@@ -8565,12 +8353,22 @@ 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 () => {
@@ -8581,22 +8379,36 @@ function MakeModularTool(options) {
                     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 +8420,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-BmiNjZiw.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8675,16 +8487,13 @@ 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.
@@ -8706,6 +8515,226 @@ function MakeModularTool(options) {
     };
 }
 
+// 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-BoqrJqoM.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-CFTva2GG.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$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 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>');
 const MaterialIcon = createFluentIcon("Material", "1em", '<g transform="scale(1.25)"><path d="M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z"/></g>');
@@ -13453,7 +13482,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 +13716,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 +14442,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 } });
 }
@@ -15626,9 +15651,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 +15668,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 +15803,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) {
@@ -18132,263 +18163,47 @@ const SpritePropertiesServiceDefinition = {
                 },
                 {
                     section: "Cells",
-                    component: ({ context }) => jsx(SpriteManagerCellProperties, { spriteManager: context }),
-                },
-                {
-                    section: "Other",
-                    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) }));
+                    component: ({ context }) => jsx(SpriteManagerCellProperties, { spriteManager: context }),
+                },
+                {
+                    section: "Other",
+                    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();
+            },
+        };
+    },
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -19992,6 +19807,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/guiEditor.js');
+                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";
@@ -20520,7 +20551,7 @@ const GuiExplorerServiceDefinition = {
                     icon: () => jsx(EditRegular, {}),
                     // eslint-disable-next-line @typescript-eslint/naming-convention
                     execute: async () => {
-                        const { GUIEditor } = await import('@babylonjs/gui-editor');
+                        const { GUIEditor } = await import('@babylonjs/gui-editor/guiEditor.js');
                         await GUIEditor.Show({ liveGuiTexture: texture });
                     },
                 };
@@ -22152,6 +22183,8 @@ function ShowInspector(scene, options = {}) {
             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.
@@ -23021,5 +23054,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, Vector2PropertyLine 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, SettingsStoreIdentity as aA, ShowInspector as aB, SidePaneContainer as aC, SkeletonSelector as aD, Slider as aE, SpinButton as aF, StatsServiceIdentity as aG, StringDropdown as aH, StringDropdownPropertyLine as aI, StringifiedPropertyLine as aJ, Switch as aK, SwitchPropertyLine as aL, SyncedSliderInput as aM, SyncedSliderPropertyLine as aN, TeachingMoment as aO, TextAreaPropertyLine as aP, TextInput as aQ, TextPropertyLine as aR, Textarea as aS, TextureSelector as aT, TextureUpload as aU, Theme as aV, ThemeServiceIdentity as aW, ToastProvider as aX, ToggleButton as aY, Tooltip as aZ, UploadButton as a_, 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, useInterceptObservable as b, Vector4PropertyLine as b0, WatcherServiceIdentity as b1, useAngleConverters as b2, useAsyncResource as b3, useColor3Property as b4, useColor4Property as b5, useEventListener as b6, useEventfulState as b7, useKeyListener as b8, useKeyState as b9, useObservableCollection as ba, useOrderedObservableCollection as bb, usePollingObservable as bc, usePropertyChangedNotifier as bd, useQuaternionProperty as be, useResource as bf, useSetting as bg, useTheme as bh, useThemeMode as bi, useVector3Property as bj, 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-BCbXjPTn.js.map