@babylonjs/inspector 8.30.1-preview → 8.30.2-preview

package/lib/index.d.ts

@@ -406,9 +406,7 @@ declare function ExtensibleAccordion<ContextT = unknown>(props: PropsWithChildre
 /**
  * Used to apply common styles to panes.
  */
-declare const Pane$1: react.ForwardRefExoticComponent<{
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLDivElement>>;
+declare const SidePaneContainer: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Creates a hook for managing teaching moment state.
@@ -20352,7 +20350,9 @@ declare enum NodeParticleContextualSources {
     /** Initial Color */
     InitialColor = 19,
     /** Color Dead*/
-    ColorDead = 20
+    ColorDead = 20,
+    /** Initial Direction */
+    InitialDirection = 21
 }
 
 /**
@@ -20366,7 +20366,9 @@ declare enum NodeParticleSystemSources {
     /** Delta time */
     Delta = 2,
     /** Emitter */
-    Emitter = 3
+    Emitter = 3,
+    /** Camera position */
+    CameraPosition = 4
 }
 
 /**
@@ -20423,7 +20425,7 @@ declare class NodeParticleBuildState {
      * @param source Source of the contextual value
      * @returns the value associated with the source
      */
-    getContextualValue(source: NodeParticleContextualSources): number | Vector3 | Color4 | Vector2 | null;
+    getContextualValue(source: NodeParticleContextualSources): number | Color4 | Nullable<Vector3> | Vector2;
     /**
      * Gets a boolean indicating if the emitter is a transform node (or a simple vector3)
      */
@@ -68826,5 +68828,5 @@ declare const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vec
 declare const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3>>;
 declare const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4>>;
 
-export { Accordion, AccordionSection, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, CalculatePrecision, Checkbox, CheckboxPropertyLine, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, DebugServiceIdentity, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, HideInspector, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsInspectorVisible, IsPropertyReadonly, LineContainer, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, Pane$1 as PaneContainer, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useVector3Property };
+export { Accordion, AccordionSection, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, CalculatePrecision, Checkbox, CheckboxPropertyLine, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, DebugServiceIdentity, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, HideInspector, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsInspectorVisible, IsPropertyReadonly, LineContainer, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SidePaneContainer, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useVector3Property };
 export type { AcceptedDropdownValue, AccordionSectionProps, BasePrimitiveProps, BoundPropertyProps, BuiltInExtension, ButtonProps, CentralContent, ColorPickerProps, ColorPropertyLineProps, ComboBoxProps, DraggableLineProps, DropdownOption, DropdownProps, DynamicAccordionSection, DynamicAccordionSectionContent, EntityBase, EntityDisplayInfo, ExtensionMetadata, ExtensionModule, FunctionHooks, IDebugService, IExtensionFeed, IExtensionMetadataQuery, IPropertiesService, ISceneContext, ISceneExplorerService, ISelectionService, IService, ISettingsContext, ISettingsService, IShellService, IStatsService, IToolsService, ImmutablePrimitiveProps, InfoLabelParentProps, InfoLabelProps, InputHexProps, ListItem, PaneProps, PrimitiveProps, PropertyHooks, PropertyLineProps, SceneExplorerCommand, SceneExplorerCommandProvider, SceneExplorerSection, ServiceDefinition, ServiceFactory, SidePane, SpinButtonProps, SwitchProps, SyncedSliderProps, TensorPropertyLineProps, TextInputProps, TextareaProps, ToolbarItem };

package/lib/index.js

@@ -3,7 +3,7 @@ import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createCo
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Stronger, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Body1Strong, TabList, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, SpinButton as SpinButton$1, Slider, Input, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Dropdown as Dropdown$1, Option, Textarea as Textarea$1, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Stronger, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, mergeClasses, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Body1Strong, TabList, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Dropdown as Dropdown$1, Option, Textarea as Textarea$1, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
 export { Link } from '@fluentui/react-components';
 import { ChevronCircleRight20Regular, ChevronCircleDown20Regular, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, FilterRegular, MoviesAndTvRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowMoveRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, GlobeRegular, SaveRegular, ArrowUndoRegular, ClearFormattingRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, PaintBrushRegular, BoxRegular, BranchRegular, CameraRegular, LightbulbRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, Cone16Filled, Cone16Regular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1 } from '@fluentui/react-motion-components-preview';
@@ -793,7 +793,7 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$e = makeStyles({
+const useStyles$f = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
@@ -813,11 +813,11 @@ const useStyles$e = makeStyles({
     },
 });
 const AccordionSection = (props) => {
-    const classes = useStyles$e();
+    const classes = useStyles$f();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const Accordion = (props) => {
-    const classes = useStyles$e();
+    const classes = useStyles$f();
     const { children, ...rest } = props;
     const validChildren = useMemo(() => {
         return (Children.map(children, (child) => {
@@ -867,7 +867,7 @@ function AsReadonlyArray(array) {
     return array;
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$d = makeStyles({
+const useStyles$e = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -876,7 +876,7 @@ const useStyles$d = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$d();
+    const classes = useStyles$e();
     const { children, sections, sectionContent, context } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -964,21 +964,25 @@ function ExtensibleAccordion(props) {
                 })] })) }));
 }
 
-const useStyles$c = makeStyles({
+const useStyles$d = makeStyles({
     paneRootDiv: {
-        padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
+        display: "flex",
+        flex: 1,
+        flexDirection: "column",
+        padding: `0 ${tokens.spacingHorizontalM}`,
     },
 });
 /**
  * Used to apply common styles to panes.
  */
-const Pane$1 = forwardRef((props, ref) => {
-    const classes = useStyles$c();
-    return (jsx("div", { className: classes.paneRootDiv, ref: ref, children: props.children }));
+const SidePaneContainer = forwardRef((props, ref) => {
+    const { className, ...rest } = props;
+    const classes = useStyles$d();
+    return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$b = makeStyles({
+const useStyles$c = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -989,7 +993,7 @@ const useStyles$b = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$b();
+    const classes = useStyles$c();
     return (jsx(TeachingPopover, { appearance: "brand", open: shouldDisplay, positioning: { positioningRef }, onOpenChange: onOpenChange, children: jsxs(TeachingPopoverSurface, { className: classes.extensionTeachingPopover, children: [jsx(TeachingPopoverHeader, { children: title }), jsx(TeachingPopoverBody, { children: description })] }) }));
 };
 
@@ -1276,13 +1280,13 @@ function ConstructorFactory(constructor) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$a = makeStyles({
+const useStyles$b = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$a();
+    const classes = useStyles$b();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -1325,7 +1329,7 @@ const SelectionServiceDefinition = {
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$9 = makeStyles({
+const useStyles$a = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -1448,7 +1452,7 @@ const useStyles$9 = makeStyles({
 });
 // 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 = ({ location, alignment, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
-    const classes = useStyles$9();
+    const classes = useStyles$a();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${location}/${alignment}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: displayName ?? "Extension", description: `The "${displayName ?? id}" extension can be accessed here.` }), jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: jsx(Component, {}) })] }));
@@ -1456,7 +1460,7 @@ const ToolbarItem = ({ location, alignment, id, component: Component, displayNam
 // 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$9();
+    const classes = useStyles$a();
     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, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
@@ -1465,7 +1469,7 @@ const Toolbar = ({ location, components }) => {
 const SidePaneTab = ({ alignment, id, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 icon: Icon, title, suppressTeachingMoment, }) => {
-    const classes = useStyles$9();
+    const classes = useStyles$a();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${alignment}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: title ?? "Extension", description: `The "${title ?? id}" extension can be accessed here.` }), jsx(Tab, { ref: teachingMoment.targetRef, className: classes.tab, value: id, icon: jsx(Tooltip, { content: title ?? id, relationship: "description", children: jsx(Icon, {}) }) }, id)] }));
@@ -1473,8 +1477,8 @@ icon: Icon, title, suppressTeachingMoment, }) => {
 // This hook provides a side pane container and the tab list.
 // 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(alignment, defaultWidth, minWidth, topPaneComponents, bottomPaneComponents, toolbarMode, topBarComponents, bottomBarComponents) {
-    const classes = useStyles$9();
+function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolbarMode, topBarItems, bottomBarItems) {
+    const classes = useStyles$a();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
@@ -1486,21 +1490,21 @@ function usePane(alignment, defaultWidth, minWidth, topPaneComponents, bottomPan
     const [width, setWidth] = useState(Number.parseInt(localStorage.getItem(widthStorageKey) ?? "") || Math.max(defaultWidth, minWidth));
     const [resizing, setResizing] = useState(false);
     useEffect(() => {
-        if ((topSelectedTab && !topPaneComponents.includes(topSelectedTab)) || (!topSelectedTab && topPaneComponents.length > 0)) {
-            setTopSelectedTab(topPaneComponents[0]);
+        if ((topSelectedTab && !topPanes.includes(topSelectedTab)) || (!topSelectedTab && topPanes.length > 0)) {
+            setTopSelectedTab(topPanes[0]);
         }
-        else if (topSelectedTab && topPaneComponents.length === 0) {
+        else if (topSelectedTab && topPanes.length === 0) {
             setTopSelectedTab(undefined);
         }
-    }, [topSelectedTab, topPaneComponents]);
+    }, [topSelectedTab, topPanes]);
     useEffect(() => {
-        if ((bottomSelectedTab && !bottomPaneComponents.includes(bottomSelectedTab)) || (!bottomSelectedTab && bottomPaneComponents.length > 0)) {
-            setBottomSelectedTab(bottomPaneComponents[0]);
+        if ((bottomSelectedTab && !bottomPanes.includes(bottomSelectedTab)) || (!bottomSelectedTab && bottomPanes.length > 0)) {
+            setBottomSelectedTab(bottomPanes[0]);
         }
-        else if (bottomSelectedTab && bottomPaneComponents.length === 0) {
+        else if (bottomSelectedTab && bottomPanes.length === 0) {
             setBottomSelectedTab(undefined);
         }
-    }, [bottomSelectedTab, bottomPaneComponents]);
+    }, [bottomSelectedTab, bottomPanes]);
     const expandCollapseIcon = useMemo(() => {
         if (alignment === "left") {
             return collapsed ? jsx(PanelLeftExpandRegular, {}) : jsx(PanelLeftContractRegular, {});
@@ -1546,8 +1550,8 @@ function usePane(alignment, defaultWidth, minWidth, topPaneComponents, bottomPan
                             }, children: paneComponents.map((entry) => (jsx(SidePaneTab, { alignment: alignment, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true }), jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", relationship: "label", children: jsx(Button$1, { className: classes.paneCollapseButton, appearance: "subtle", icon: expandCollapseIcon, onClick: onExpandCollapseClick }) })] }))] })) }));
     }, [alignment, collapsed]);
     // This memos the TabList to make it easy for the JSX to be inserted at the top of the pane (in "compact" mode) or returned to the caller to be used in the toolbar (in "full" mode).
-    const topPaneTabList = useMemo(() => createPaneTabList(topPaneComponents, toolbarMode, topSelectedTab, setTopSelectedTab), [topPaneComponents, toolbarMode, topSelectedTab]);
-    const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPaneComponents, "compact", bottomSelectedTab, setBottomSelectedTab), [bottomPaneComponents, bottomSelectedTab]);
+    const topPaneTabList = useMemo(() => createPaneTabList(topPanes, toolbarMode, topSelectedTab, setTopSelectedTab), [topPanes, toolbarMode, topSelectedTab]);
+    const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPanes, "compact", bottomSelectedTab, setBottomSelectedTab), [bottomPanes, bottomSelectedTab]);
     // This manages the CSS variable that controls the height of the bottom pane.
     const paneHeightAdjustCSSVar = "--pane-height-adjust";
     const { elementRef: paneVerticalResizeElementRef, handleRef: paneVerticalResizeHandleRef, setValue: setPaneHeightAdjust, } = useResizeHandle({
@@ -1569,8 +1573,8 @@ function usePane(alignment, defaultWidth, minWidth, topPaneComponents, bottomPan
     });
     // This memoizes the pane itself, which may or may not include the tab list, depending on the toolbar mode.
     const pane = useMemo(() => {
-        return (jsx(Fragment, { children: (topPaneComponents.length > 0 || bottomPaneComponents.length > 0) && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { className: classes.paneContainer, style: { width: `${width}px` }, children: [toolbarMode === "compact" && (topPaneComponents.length > 1 || topBarComponents.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarComponents })] }) })), jsxs("div", { className: classes.paneContent, children: [topSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: topSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, topSelectedTab?.content && jsx(topSelectedTab.content, {})] }), topPaneComponents.length > 0 && bottomPaneComponents.length > 0 && (jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.headerDivider, style: { margin: "0", minHeight: tokens.spacingVerticalM, cursor: "ns-resize" } })), bottomPaneComponents.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPaneComponents.length > 0 && (jsxs("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px,calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: [bottomSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: bottomSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, bottomSelectedTab?.content && jsx(bottomSelectedTab.content, {})] })), toolbarMode === "compact" && bottomBarComponents.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarComponents }) }) }))] }) }), jsx("div", { className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` }, onPointerDown: onResizerPointerDown })] })) }));
-    }, [topPaneComponents, topSelectedTab, bottomPaneComponents, bottomSelectedTab, collapsed, width, resizing]);
+        return (jsx(Fragment, { children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { className: classes.paneContainer, style: { width: `${width}px` }, children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems })] }) })), jsxs("div", { className: classes.paneContent, children: [topSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: topSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, topSelectedTab?.content && jsx(topSelectedTab.content, {})] }), topPanes.length > 0 && bottomPanes.length > 0 && (jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.headerDivider, style: { margin: "0", minHeight: tokens.spacingVerticalM, cursor: "ns-resize" } })), bottomPanes.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (jsxs("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px,calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: [bottomSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: bottomSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, bottomSelectedTab?.content && jsx(bottomSelectedTab.content, {})] })), toolbarMode === "compact" && bottomBarItems.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }) }), jsx("div", { className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` }, onPointerDown: onResizerPointerDown })] })) }));
+    }, [topPanes, topSelectedTab, bottomPanes, bottomSelectedTab, topBarItems, bottomBarItems, collapsed, width, resizing]);
     return [topPaneTabList, pane];
 }
 function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneMode = "both", } = {}) {
@@ -1578,46 +1582,46 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
         friendlyName: "MainView",
         produces: [ShellServiceIdentity, RootComponentServiceIdentity],
         factory: () => {
-            const topBarComponentCollection = new ObservableCollection();
-            const bottomBarComponentCollection = new ObservableCollection();
-            const topLeftPaneComponentCollection = new ObservableCollection();
-            const topRightPaneComponentCollection = new ObservableCollection();
-            const bottomLeftPaneComponentCollection = new ObservableCollection();
-            const bottomRightPaneComponentCollection = new ObservableCollection();
-            const contentComponentCollection = new ObservableCollection();
+            const topBarItemCollection = new ObservableCollection();
+            const bottomBarItemCollection = new ObservableCollection();
+            const topLeftPaneCollection = new ObservableCollection();
+            const topRightPaneCollection = new ObservableCollection();
+            const bottomLeftPaneCollection = new ObservableCollection();
+            const bottomRightPaneCollection = new ObservableCollection();
+            const centralContentCollection = new ObservableCollection();
             const rootComponent = () => {
-                const classes = useStyles$9();
-                const topBarItems = useOrderedObservableCollection(topBarComponentCollection);
-                const bottomBarItems = useOrderedObservableCollection(bottomBarComponentCollection);
-                const topLeftPaneItems = useOrderedObservableCollection(topLeftPaneComponentCollection);
-                const topRightPaneItems = useOrderedObservableCollection(topRightPaneComponentCollection);
-                const bottomLeftPaneItems = useOrderedObservableCollection(bottomLeftPaneComponentCollection);
-                const bottomRightPaneItems = useOrderedObservableCollection(bottomRightPaneComponentCollection);
-                const hasLeftPaneItems = topLeftPaneItems.length > 0 || bottomLeftPaneItems.length > 0;
-                const hasRightPaneItems = topRightPaneItems.length > 0 || bottomRightPaneItems.length > 0;
+                const classes = useStyles$a();
+                const topBarItems = useOrderedObservableCollection(topBarItemCollection);
+                const bottomBarItems = useOrderedObservableCollection(bottomBarItemCollection);
+                const topLeftPanes = useOrderedObservableCollection(topLeftPaneCollection);
+                const topRightPanes = useOrderedObservableCollection(topRightPaneCollection);
+                const bottomLeftPanes = useOrderedObservableCollection(bottomLeftPaneCollection);
+                const bottomRightPanes = useOrderedObservableCollection(bottomRightPaneCollection);
+                const hasLeftPanes = topLeftPanes.length > 0 || bottomLeftPanes.length > 0;
+                const hasRightPanes = topRightPanes.length > 0 || bottomRightPanes.length > 0;
                 // If we are in compact toolbar mode, we may need to move toolbar items from the left to the right or vice versa,
                 // depending on whether there are any side panes on that side.
                 const coerceToolBarItemHorizontalLocation = (item) => {
                     let location = item.horizontalLocation;
                     // Coercion is only needed in compact toolbar mode since there might not be a left or right pane.
                     if (toolbarMode === "compact") {
-                        if (location === "left" && !hasLeftPaneItems) {
+                        if (location === "left" && !hasLeftPanes) {
                             location = "right";
                         }
-                        if (location === "right" && !hasRightPaneItems) {
+                        if (location === "right" && !hasRightPanes) {
                             location = "left";
                         }
                     }
                     return location;
                 };
-                const topBarLeftComponents = useMemo(() => topBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [topBarItems]);
-                const topBarRightComponents = useMemo(() => topBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [topBarItems]);
-                const bottomBarLeftComponents = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomBarItems]);
-                const bottomBarRightComponents = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomBarItems]);
-                const contentComponents = useOrderedObservableCollection(contentComponentCollection);
-                const [leftPaneTabList, leftPane] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, topLeftPaneItems, bottomLeftPaneItems, toolbarMode, topBarLeftComponents, bottomBarLeftComponents);
-                const [rightPaneTabList, rightPane] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, topRightPaneItems, bottomRightPaneItems, toolbarMode, topBarRightComponents, bottomBarRightComponents);
-                return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsx("div", { className: classes.centralContent, children: contentComponents.map((entry) => (jsx(entry.component, {}, entry.key))) }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }));
+                const topBarLeftItems = useMemo(() => topBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [topBarItems]);
+                const topBarRightItems = useMemo(() => topBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [topBarItems]);
+                const bottomBarLeftItems = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomBarItems]);
+                const bottomBarRightItems = useMemo(() => bottomBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomBarItems]);
+                const centralContents = useOrderedObservableCollection(centralContentCollection);
+                const [leftPaneTabList, leftPane] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, topLeftPanes, bottomLeftPanes, toolbarMode, topBarLeftItems, bottomBarLeftItems);
+                const [rightPaneTabList, rightPane] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, topRightPanes, bottomRightPanes, toolbarMode, topBarRightItems, bottomBarRightItems);
+                return (jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), rightPaneTabList] }) })), jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, jsx("div", { className: classes.centralContent, children: centralContents.map((entry) => (jsx(entry.component, {}, entry.key))) }), rightPane] }), toolbarMode === "full" && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }));
             };
             rootComponent.displayName = "Shell Service Root";
             return {
@@ -1626,10 +1630,10 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                         entry.component.displayName = `${entry.key} | ${entry.verticalLocation} ${entry.horizontalLocation} bar item`;
                     }
                     if (entry.verticalLocation === "top") {
-                        return topBarComponentCollection.add(entry);
+                        return topBarItemCollection.add(entry);
                     }
                     else {
-                        return bottomBarComponentCollection.add(entry);
+                        return bottomBarItemCollection.add(entry);
                     }
                 },
                 addSidePane: (entry) => {
@@ -1655,22 +1659,22 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                     const { horizontalLocation, verticalLocation } = coerceSidePaneLocation(entry);
                     if (horizontalLocation === "left") {
                         if (verticalLocation === "top") {
-                            return topLeftPaneComponentCollection.add(entry);
+                            return topLeftPaneCollection.add(entry);
                         }
                         else {
-                            return bottomLeftPaneComponentCollection.add(entry);
+                            return bottomLeftPaneCollection.add(entry);
                         }
                     }
                     else {
                         if (verticalLocation === "top") {
-                            return topRightPaneComponentCollection.add(entry);
+                            return topRightPaneCollection.add(entry);
                         }
                         else {
-                            return bottomRightPaneComponentCollection.add(entry);
+                            return bottomRightPaneCollection.add(entry);
                         }
                     }
                 },
-                addCentralContent: (entry) => contentComponentCollection.add(entry),
+                addCentralContent: (entry) => centralContentCollection.add(entry),
                 rootComponent,
             };
         },
@@ -1820,7 +1824,7 @@ function ExpandOrCollapseAll(treeItem, open, openItems) {
     TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? treeItem.entity.uniqueId : treeItem.sectionName));
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$8 = makeStyles({
+const useStyles$9 = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1855,7 +1859,7 @@ const ToggleCommand = (props) => {
 };
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$8();
+    const classes = useStyles$9();
     return (jsx(FlatTreeItem, { value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(MoviesAndTvRegular, {}), className: classes.sceneTreeItemLayout, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
@@ -1916,7 +1920,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Body1, { wrap: false, truncate: true, children: name.substring(0, 100) }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !entityItem.children?.length, children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$8();
+    const classes = useStyles$9();
     const { sections, commandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -2655,11 +2659,18 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value }) }));
 };
 
+const useStyles$8 = makeStyles({
+    pinnedStatsPane: {
+        flex: "0 1 auto",
+        paddingBottom: tokens.spacingHorizontalM,
+    },
+});
 const StatsPane = (props) => {
+    const classes = useStyles$8();
     const scene = props.context;
     const engine = scene.getEngine();
     const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
-    return (jsxs(Fragment, { children: [jsxs(Pane$1, { children: [jsx(TextPropertyLine, { label: "Version", description: "The Babylon.js engine version.", value: AbstractEngine.Version }, "EngineVersion"), jsx(StringifiedPropertyLine, { label: "FPS:", description: "The current framerate", value: fps }, "FPS")] }), jsx(ExtensibleAccordion, { ...props })] }));
+    return (jsxs(Fragment, { children: [jsxs(SidePaneContainer, { className: classes.pinnedStatsPane, children: [jsx(TextPropertyLine, { label: "Version", description: "The Babylon.js engine version.", value: AbstractEngine.Version }, "EngineVersion"), jsx(StringifiedPropertyLine, { label: "FPS:", description: "The current framerate", value: fps }, "FPS")] }), jsx(ExtensibleAccordion, { ...props })] }));
 };
 
 /**
@@ -3832,6 +3843,41 @@ const InfoLabel = (props) => {
     return (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: props.info, children: jsx(Body1, { children: props.label }) }));
 };
 
+const TextInput = (props) => {
+    const classes = useInputStyles$1();
+    const [value, setValue] = useState(props.value);
+    const lastCommittedValue = useRef(props.value);
+    useEffect(() => {
+        if (props.value !== lastCommittedValue.current) {
+            setValue(props.value); // Update local state when props.value changes
+            lastCommittedValue.current = props.value;
+        }
+    }, [props.value]);
+    const validateValue = (val) => {
+        const failsValidator = props.validator && !props.validator(val);
+        return !failsValidator;
+    };
+    const tryCommitValue = (currVal) => {
+        // Only commit if valid and different from last committed value
+        if (validateValue(currVal) && currVal !== lastCommittedValue.current) {
+            lastCommittedValue.current = currVal;
+            props.onChange(currVal);
+        }
+    };
+    const handleChange = (event, data) => {
+        event.stopPropagation();
+        setValue(data.value);
+        tryCommitValue(data.value);
+    };
+    const handleKeyUp = (event) => {
+        event.stopPropagation();
+        setValue(event.currentTarget.value);
+        tryCommitValue(event.currentTarget.value);
+    };
+    const id = useId("input-button");
+    return (jsxs("div", { children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, id: id, size: "medium", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : classes.valid}` })] }));
+};
+
 const SpinButton = (props) => {
     const classes = useInputStyles$1();
     const { min, max } = props;
@@ -3921,6 +3967,22 @@ function PrecisionRound(value, precision) {
     return Math.round(value * exp) / exp;
 }
 
+/**
+ * Wraps a text input in a property line
+ * @param props - PropertyLineProps and InputProps
+ * @returns property-line wrapped input component
+ */
+const TextInputPropertyLine = (props) => (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props }) }));
+/**
+ * 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) => {
+    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
+};
+
 const useSyncedSliderStyles = makeStyles({
     container: { display: "flex" },
     syncedSlider: {
@@ -3993,57 +4055,6 @@ const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
 });
 
-const TextInput = (props) => {
-    const classes = useInputStyles$1();
-    const [value, setValue] = useState(props.value);
-    const lastCommittedValue = useRef(props.value);
-    useEffect(() => {
-        if (props.value !== lastCommittedValue.current) {
-            setValue(props.value); // Update local state when props.value changes
-            lastCommittedValue.current = props.value;
-        }
-    }, [props.value]);
-    const validateValue = (val) => {
-        const failsValidator = props.validator && !props.validator(val);
-        return !failsValidator;
-    };
-    const tryCommitValue = (currVal) => {
-        // Only commit if valid and different from last committed value
-        if (validateValue(currVal) && currVal !== lastCommittedValue.current) {
-            lastCommittedValue.current = currVal;
-            props.onChange(currVal);
-        }
-    };
-    const handleChange = (event, data) => {
-        event.stopPropagation();
-        setValue(data.value);
-        tryCommitValue(data.value);
-    };
-    const handleKeyUp = (event) => {
-        event.stopPropagation();
-        setValue(event.currentTarget.value);
-        tryCommitValue(event.currentTarget.value);
-    };
-    const id = useId("input-button");
-    return (jsxs("div", { children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, id: id, size: "medium", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : classes.valid}` })] }));
-};
-
-/**
- * Wraps a text input in a property line
- * @param props - PropertyLineProps and InputProps
- * @returns property-line wrapped input component
- */
-const TextInputPropertyLine = (props) => (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props }) }));
-/**
- * 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) => {
-    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
-};
-
 const AnimationGroupControlProperties = (props) => {
     const { animationGroup } = props;
     const targetedAnimations = animationGroup.targetedAnimations;
@@ -6707,18 +6718,18 @@ const SpriteGeneralProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(LinkToEntityPropertyLine, { label: "Parent", description: `Sprite Manager that owns this sprite.`, entity: sprite.manager, selectionService: selectionService }, "Parent"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Visible", description: "Whether the sprite is visible or not.", target: sprite, propertyKey: "isVisible" }, "IsVisible")] }));
 };
 
-const SpriteTransformProperties = (props) => {
-    const { sprite, settings } = props;
-    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: sprite, propertyKey: "position" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Angle", description: `Rotation angle of the sprite in ${useDegrees ? "degrees" : "radians"}`, min: 0, max: toDisplayAngle(Math.PI * 2), step: toDisplayAngle(0.01), target: sprite, propertyKey: "angle", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }, "Angle"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Width", description: "Width of the sprite (in world space units)", target: sprite, propertyKey: "width" }, "Width"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Height", description: "Height of the sprite (in world space units)", target: sprite, propertyKey: "height" }, "Height")] }));
-};
-
 const SpriteOtherProperties = (props) => {
     const { sprite } = props;
     const color = useColor4Property(sprite, "color");
     return (jsx(Fragment, { children: jsx(Color4PropertyLine, { label: "Color", description: "Color to tint the sprite.", value: color, onChange: (col) => (sprite.color = col) }, "Color") }));
 };
 
+const SpriteTransformProperties = (props) => {
+    const { sprite, settings } = props;
+    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: sprite, propertyKey: "position" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Angle", description: `Rotation angle of the sprite in ${useDegrees ? "degrees" : "radians"}`, min: 0, max: toDisplayAngle(Math.PI * 2), step: toDisplayAngle(0.01), target: sprite, propertyKey: "angle", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }, "Angle"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Width", description: "Width of the sprite (in world space units)", target: sprite, propertyKey: "width" }, "Width"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Height", description: "Height of the sprite (in world space units)", target: sprite, propertyKey: "height" }, "Height")] }));
+};
+
 const SpritePropertiesServiceDefinition = {
     friendlyName: "Sprite Properties",
     consumes: [PropertiesServiceIdentity, SelectionServiceIdentity, SettingsContextIdentity],
@@ -7003,7 +7014,7 @@ const ThinTextureGeneralProperties = (props) => {
 
 // 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";
+    return entity?.getClassName?.() === "AdvancedDynamicTexture";
 }
 const TexturePropertiesServiceDefinition = {
     friendlyName: "Texture Properties",
@@ -7392,7 +7403,7 @@ const FrameGraphExplorerServiceDefinition = {
 
 // 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(entity) {
-    return entity?.getClassName() === "AdvancedDynamicTexture";
+    return entity?.getClassName?.() === "AdvancedDynamicTexture";
 }
 const GuiExplorerServiceDefinition = {
     friendlyName: "GUI Explorer",
@@ -8506,5 +8517,5 @@ const TextAreaPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Textarea, { ...props }) }));
 };
 
-export { Accordion, AccordionSection, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, CalculatePrecision, Checkbox, CheckboxPropertyLine, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, DebugServiceIdentity, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, HideInspector, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsInspectorVisible, IsPropertyReadonly, LineContainer, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, Pane$1 as PaneContainer, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useVector3Property };
+export { Accordion, AccordionSection, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, CalculatePrecision, Checkbox, CheckboxPropertyLine, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, DebugServiceIdentity, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, HideInspector, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsInspectorVisible, IsPropertyReadonly, LineContainer, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SidePaneContainer, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useVector3Property };
 //# sourceMappingURL=index.js.map