@babylonjs/inspector 8.47.0-preview → 8.47.1-preview

package/lib/{index-D89pOD_y.js → index-BDtiVo5p.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, isValidElement, cloneElement, Children, useLayoutEffect, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, useReducer, lazy } from 'react';
-import { tokens, makeStyles, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, Tooltip, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, treeItemLevelToken, MenuItemCheckbox, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, webDarkTheme, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ErrorCircleRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ArrowMinimizeRegular, LineHorizontal1Regular, ChevronDoubleLeftRegular, ChevronDoubleRightRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, ArrowDownloadRegular, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, EditRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, StopRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { tokens, makeStyles, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, Tooltip, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, treeItemLevelToken, MenuItemCheckbox, Switch as Switch$1, useId, SpinButton as SpinButton$1, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, webDarkTheme, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
+import { ErrorCircleRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ArrowMinimizeRegular, LineHorizontal1Regular, ChevronDoubleLeftRegular, ChevronDoubleRightRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, EditRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
@@ -32,6 +32,8 @@ import '@babylonjs/core/Engines/WebGPU/Extensions/engine.query.js';
 import { PerfCollectionStrategy } from '@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollectionStrategies.js';
 import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerSceneExtension.js';
 import { PressureObserverWrapper } from '@babylonjs/core/Misc/pressureObserverWrapper.js';
+import { Scalar } from '@babylonjs/core/Maths/math.scalar.js';
+import { PerformanceViewerCollector } from '@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollector.js';
 import { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine.js';
 import { createRoot } from 'react-dom/client';
 import { FrameGraphUtils } from '@babylonjs/core/FrameGraph/frameGraphUtils.js';
@@ -99,6 +101,8 @@ import { PointParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/poi
 import { SphereParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/sphereParticleEmitter.js';
 import { Attractor } from '@babylonjs/core/Particles/attractor.js';
 import { CreateSphere } from '@babylonjs/core/Meshes/Builders/sphereBuilder.js';
+import { ParticleInputBlock } from '@babylonjs/core/Particles/Node/Blocks/particleInputBlock.js';
+import { UpdateAttractorBlock } from '@babylonjs/core/Particles/Node/Blocks/Update/updateAttractorBlock.js';
 import { NodeParticleBlockConnectionPointTypes } from '@babylonjs/core/Particles/Node/Enums/nodeParticleBlockConnectionPointTypes.js';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import { PhysicsPrestepType } from '@babylonjs/core/Physics/v2/IPhysicsEnginePlugin.js';
@@ -130,6 +134,16 @@ import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
 import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js';
+import { captureEquirectangularFromScene } from '@babylonjs/core/Misc/equirectangularCapture.js';
+import { SceneRecorder } from '@babylonjs/core/Misc/sceneRecorder.js';
+import { CreateScreenshotUsingRenderTargetAsync } from '@babylonjs/core/Misc/screenshotTools.js';
+import { VideoRecorder } from '@babylonjs/core/Misc/videoRecorder.js';
+import { SceneSerializer } from '@babylonjs/core/Misc/sceneSerializer.js';
+import { EnvironmentTextureTools } from '@babylonjs/core/Misc/environmentTextureTools.js';
+import { ImportAnimationsAsync, SceneLoader } from '@babylonjs/core/Loading/sceneLoader.js';
+import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
+import { GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode, GLTFLoaderDefaultOptions } from '@babylonjs/loaders/glTF/glTFFileLoader.js';
+import { GLTFValidation } from '@babylonjs/loaders/glTF/glTFValidation.js';
 import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
 import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 import { DebugLayer } from '@babylonjs/core/Debug/debugLayer.js';
@@ -251,7 +265,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$R = makeStyles({
+const useStyles$T = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -332,7 +346,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$R();
+    const styles = useStyles$T();
     return (jsxs("div", { className: styles.root, children: [jsx(ErrorCircleRegular, { className: styles.icon }), jsx("div", { className: styles.title, children: "Something went wrong" }), jsx("div", { className: styles.message, children: "An error occurred in this component. You can try again or continue using other parts of the inspector." }), jsx(Button, { label: "Try Again", appearance: "primary", onClick: onRetry }), error && jsx("div", { className: styles.details, children: error.message })] }));
 }
 
@@ -1037,7 +1051,7 @@ const Link = forwardRef((props, ref) => {
 });
 Link.displayName = "Link";
 
-const useStyles$Q = makeStyles({
+const useStyles$S = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1055,7 +1069,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$Q();
+    const classes = useStyles$S();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prev) => {
@@ -1134,6 +1148,9 @@ const usePropertyLineStyles = makeStyles({
     expandedContentDiv: {
         overflow: "hidden",
     },
+    expandedContentDivIndented: {
+        paddingLeft: tokens.spacingHorizontalM,
+    },
     checkbox: {
         display: "flex",
         alignItems: "center",
@@ -1181,7 +1198,7 @@ const PropertyLine = forwardRef((props, ref) => {
                                             cachedVal.current = props.value;
                                             props.onChange(null);
                                         }
-                                    } }) })), jsx("div", { className: classes.childWrapper, children: processedChildren }), onCopy && !disableCopy && (jsx(Button, { className: classes.copy, title: "Copy to clipboard", appearance: "transparent", icon: size === "small" ? Copy16Regular : CopyRegular, onClick: () => copyCommandToClipboard(onCopy()) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: classes.expandedContentDiv, children: expandedContent }) }))] }));
+                                    } }) })), jsx("div", { className: classes.childWrapper, children: processedChildren }), onCopy && !disableCopy && (jsx(Button, { className: classes.copy, title: "Copy to clipboard", appearance: "transparent", icon: size === "small" ? Copy16Regular : CopyRegular, onClick: () => copyCommandToClipboard(onCopy()) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: mergeClasses(classes.expandedContentDiv, props.indentExpandedContent ? classes.expandedContentDivIndented : undefined), children: expandedContent }) }))] }));
 });
 const useLineStyles = makeStyles({
     container: {
@@ -1238,7 +1255,7 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$P = makeStyles({
+const useStyles$R = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
@@ -1282,13 +1299,13 @@ const useStyles$P = makeStyles({
 });
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$P();
+    const classes = useStyles$R();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
 const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
-    const classes = useStyles$P();
+    const classes = useStyles$R();
     const { size } = useContext(ToolContext);
     const { children, highlightSections, ...rest } = props;
     const validChildren = useMemo(() => {
@@ -1419,7 +1436,7 @@ const CompactModeContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$O = makeStyles({
+const useStyles$Q = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1428,7 +1445,7 @@ const useStyles$O = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$O();
+    const classes = useStyles$Q();
     const { children, sections, sectionContent, context, sectionsRef } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -1533,7 +1550,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$N = makeStyles({
+const useStyles$P = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -1546,7 +1563,7 @@ const useStyles$N = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$N();
+    const classes = useStyles$P();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -1612,7 +1629,7 @@ const Theme = (props) => {
     return (jsx(FluentProvider, { theme: isDarkMode !== invert ? DarkTheme : LightTheme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$M = makeStyles({
+const useStyles$O = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -1623,7 +1640,7 @@ const useStyles$M = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$M();
+    const classes = useStyles$O();
     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 })] }) }));
 };
 
@@ -1878,13 +1895,13 @@ function ConstructorFactory(constructor) {
     return (...args) => new constructor(...args);
 }
 
-const useStyles$L = makeStyles({
+const useStyles$N = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$L();
+    const classes = useStyles$N();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -1909,14 +1926,6 @@ function ToFeaturesString(options) {
     features.push({ key: "location", value: "no" });
     return features.map((feature) => `${feature.key}=${feature.value}`).join(",");
 }
-const useStyles$K = makeStyles({
-    container: {
-        display: "flex",
-        flexGrow: 1,
-        flexDirection: "column",
-        overflow: "hidden",
-    },
-});
 /**
  * Allows displaying a child window that can contain child components.
  * @param props Props for the child window.
@@ -1924,7 +1933,6 @@ const useStyles$K = makeStyles({
  */
 const ChildWindow = (props) => {
     const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;
-    const classes = useStyles$K();
     const [windowState, setWindowState] = useState();
     const [childWindow, setChildWindow] = useState();
     const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;
@@ -2058,7 +2066,12 @@ const ChildWindow = (props) => {
     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, { className: classes.container, applyStylesToPortals: false, targetDocument: mountNode.ownerDocument, children: children }) }) }));
+    jsx(Portal, { mountNode: mountNode, children: jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: jsx(FluentProvider, { style: {
+                    display: "flex",
+                    flexGrow: 1,
+                    flexDirection: "column",
+                    overflow: "hidden",
+                }, applyStylesToPortals: false, targetDocument: mountNode.ownerDocument, children: children }) }) }));
 };
 
 // NOTE: This is basically a super simplified version of https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-resize-handle/src/hooks
@@ -2136,7 +2149,7 @@ function useResizeHandle(params) {
 
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$J = makeStyles({
+const useStyles$M = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -2331,12 +2344,12 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$J();
+    const classes = useStyles$M();
     return (jsxs("div", { className: classes.paneHeaderDiv, children: [jsx(Subtitle2Stronger, { className: classes.paneHeaderText, 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 = ({ verticalLocation, horizontalLocation, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
-    const classes = useStyles$J();
+    const classes = useStyles$M();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${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, {}) })] }));
@@ -2344,7 +2357,7 @@ const ToolbarItem = ({ verticalLocation, horizontalLocation, id, component: Comp
 // 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$J();
+    const classes = useStyles$M();
     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 : null}`, 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, suppressTeachingMoment: entry.suppressTeachingMoment }, 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, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
@@ -2354,7 +2367,7 @@ const SidePaneTab = (props) => {
     const { location, id, isSelected, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, suppressTeachingMoment, } = props;
-    const classes = useStyles$J();
+    const classes = useStyles$M();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab);
@@ -2367,7 +2380,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) {
-    const classes = useStyles$J();
+    const classes = useStyles$M();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
@@ -2558,7 +2571,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 undock: () => onDockChanged.notifyObservers({ location: "right", dock: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$J();
+                const classes = useStyles$M();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSidePaneDockOverrides();
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -2993,7 +3006,7 @@ function useCommandContextMenuState(commands) {
         checkmark: command.icon ? null : undefined, icon: command.icon ? jsx(command.icon, {}) : undefined, name: "toggleCommands", value: command.displayName, children: command.displayName }, command.displayName)));
     return [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems];
 }
-const useStyles$I = makeStyles({
+const useStyles$L = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -3061,14 +3074,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$I();
+    const classes = useStyles$L();
     const [compactMode] = useCompactMode();
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     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(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, commandProviders, expandAll, collapseAll } = props;
-    const classes = useStyles$I();
+    const classes = useStyles$L();
     const [compactMode] = useCompactMode();
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -3085,7 +3098,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
-    const classes = useStyles$I();
+    const classes = useStyles$L();
     const [compactMode] = useCompactMode();
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -3178,7 +3191,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$I();
+    const classes = useStyles$L();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -3494,10 +3507,10 @@ const Switch = (props) => {
         }
     }, [props.value]);
     const onChange = (event, _) => {
-        props.onChange && props.onChange(props.invertedMode ? !event.target.checked : event.target.checked);
+        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: props.invertedMode ? !checked : checked, disabled: props.disabled, onChange: onChange }));
+    return (jsx(Switch$1, { className: mergeClasses(classes.switch, size === "small" && classes.switchSmall), indicator: { className: classes.indicator }, checked: checked, disabled: props.disabled, onChange: onChange }));
 };
 
 /**
@@ -3874,785 +3887,2084 @@ const FileUploadLine = ({ onClick, label, accept, ...buttonProps }) => {
     return (jsx(LineContainer, { children: jsx(UploadButton, { onUpload: onClick, accept: accept, label: label, ...buttonProps }) }));
 };
 
-var PerfMetadataCategory;
-(function (PerfMetadataCategory) {
-    PerfMetadataCategory["Count"] = "Count";
-    PerfMetadataCategory["FrameSteps"] = "Frame Steps Duration";
-})(PerfMetadataCategory || (PerfMetadataCategory = {}));
-// list of strategies to add to perf graph automatically.
-const DefaultStrategiesList = [
-    { strategyCallback: PerfCollectionStrategy.FpsStrategy() },
-    { strategyCallback: PerfCollectionStrategy.TotalMeshesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.ActiveMeshesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.ActiveIndicesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.ActiveBonesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.ActiveParticlesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.DrawCallsStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.TotalLightsStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.TotalVerticesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.TotalMaterialsStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.TotalTexturesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.AbsoluteFpsStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.MeshesSelectionStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.RenderTargetsStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.ParticlesStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.SpritesStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.AnimationsStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.PhysicsStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.RenderStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.FrameTotalStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.InterFrameStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-    { strategyCallback: PerfCollectionStrategy.GpuFrameTimeStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
-];
-const PerformanceStats = ({ context: scene }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [isLoadedFromCsv, setIsLoadedFromCsv] = useState(false);
-    const [performanceCollector, setPerformanceCollector] = useState();
-    useEffect(() => {
-        if (!isLoadedFromCsv) {
-            if (performanceCollector) {
-                performanceCollector.stop();
-                performanceCollector.clear(false);
-                addStrategies(performanceCollector);
-            }
+/**
+ * Defines the supported timestamp units.
+ */
+var TimestampUnit;
+(function (TimestampUnit) {
+    TimestampUnit[TimestampUnit["Milliseconds"] = 0] = "Milliseconds";
+    TimestampUnit[TimestampUnit["Seconds"] = 1] = "Seconds";
+    TimestampUnit[TimestampUnit["Minutes"] = 2] = "Minutes";
+    TimestampUnit[TimestampUnit["Hours"] = 3] = "Hours";
+})(TimestampUnit || (TimestampUnit = {}));
+
+const DefaultColor = "#000";
+const AxisColor = "#c0c4c8";
+const FutureBoxColor = "#dfe9ed";
+const DividerColor = "#0a3066";
+const PlayheadColor = "#b9dbef";
+const PositionIndicatorColor = "#4d5960";
+const TooltipBackgroundColor = "#566268";
+const TooltipForegroundColor = "#fbfbfb";
+const TopOfGraphY = 0;
+const DefaultAlpha = 1;
+const TooltipBackgroundAlpha = 0.8;
+const BackgroundLineAlpha = 0.2;
+const MaxDistanceForHover = 10;
+const TooltipHorizontalPadding = 10;
+const SpaceBetweenTextAndBox = 5;
+const TooltipPaddingFromBottom = 20;
+// height of indicator triangle
+const TriangleHeight = 10;
+// width of indicator triangle
+const TriangleWidth = 20;
+// padding to indicate how far below the axis line the triangle should be.
+const TrianglePaddingFromAxisLine = 3;
+const TickerHorizontalPadding = 10;
+// pixels to pad the top and bottom of data so that it doesn't get cut off by the margins.
+const DataPadding = 2;
+const PlayheadSize = 8;
+const DividerSize = 2;
+const AxisLineLength = 10;
+const AxisPadding = 10;
+// Currently the scale factor is a constant but when we add panning this may become formula based.
+const ScaleFactor = 0.8;
+// This controls the scale factor at which we stop drawing the playhead. Below this value there tends to be flickering of the playhead as data comes in.
+const StopDrawingPlayheadThreshold = 0.95;
+// Threshold for the ratio at which we go from panning mode to live mode.
+const ReturnToLiveThreshold = 0.998;
+// Font to use on the addons such as tooltips and tickers!
+const GraphAddonFont = "12px Arial";
+// A string containing the alphabet, used in line height calculation for the font.
+const Alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+// Arbitrary maximum used to make some GC optimizations.
+const MaximumDatasetsAllowed = 64;
+const MsInSecond = 1000;
+const MsInMinute = MsInSecond * 60;
+const MsInHour = MsInMinute * 60;
+// time in ms to wait between tooltip draws inside the mouse move.
+const TooltipDebounceTime = 32;
+// time in ms to wait between draws
+const DrawThrottleTime = 15;
+// What distance percentage in the x axis between two points makes us break the line and draw a "no data" box instead
+const MaxXDistancePercBetweenLinePoints = 0.1;
+// Color used to draw the rectangle that indicates no collection of data
+const NoDataRectangleColor = "#aaaaaa";
+const SmoothingFactor = 0.2; // factor to smooth the graph with
+const RangeMargin = 0.1; // extra margin to expand the min/max range on the graph
+/**
+ * This function will debounce calls to functions.
+ *
+ * @param callback callback to call.
+ * @param time time to wait between calls in ms.
+ * @returns a function that will call the callback after the time has passed.
+ */
+function Debounce(callback, time) {
+    let timerId;
+    return function (...args) {
+        clearTimeout(timerId);
+        timerId = setTimeout(() => callback(...args), time);
+    };
+}
+/**
+ * This function will throttle calls to functions.
+ *
+ * @param callback callback to call.
+ * @param time time to wait between calls in ms.
+ * @returns a function that will call the callback after the time has passed.
+ */
+function Throttle(callback, time) {
+    let lastCalledTime = 0;
+    return function (...args) {
+        const now = Date.now();
+        if (now - lastCalledTime < time) {
+            return;
         }
-    }, [isLoadedFromCsv]);
-    const onPerformanceButtonClick = () => {
-        setIsOpen(true);
-        performanceCollector?.start(true);
+        lastCalledTime = now;
+        callback(...args);
     };
-    const onLoadClick = (fileList) => {
-        Tools.ReadFile(fileList[0], (data) => {
-            // reopen window and load data!
-            setIsOpen(false);
-            setIsLoadedFromCsv(true);
-            performanceCollector?.stop();
-            const isValid = performanceCollector?.loadFromFileData(data);
-            if (!isValid) {
-                // if our data isnt valid we close the window.
-                setIsOpen(false);
-                performanceCollector?.start(true);
+}
+/**
+ * This class acts as the main API for graphing. Here is where you will find methods to let the service know new data needs to be drawn,
+ * let it know something has been resized, etc!
+ */
+class CanvasGraphService {
+    /**
+     * Creates an instance of CanvasGraphService.
+     *
+     * @param canvas a pointer to the canvas dom element we would like to write to.
+     * @param settings settings for our service.
+     */
+    constructor(canvas, settings) {
+        this._sizeOfWindow = 300;
+        /**
+         * This method lets the service know it should get ready to update what it is displaying.
+         */
+        this.update = Throttle(() => this._draw(), DrawThrottleTime);
+        this._prevPointById = new Map();
+        this._prevValueById = new Map();
+        /**
+         * Handles what to do when we are hovering over the canvas and not panning.
+         *
+         * @param event A reference to the event to be handled.
+         */
+        this._handleDataHover = (event) => {
+            if (this._panPosition) {
+                // we don't want to do anything if we are in the middle of panning
+                return;
             }
-        });
-    };
-    const onExportClick = () => {
-        performanceCollector?.exportDataToCsv();
-    };
-    const onToggleRecording = () => {
-        if (!performanceCollector?.isStarted) {
-            performanceCollector?.start(true);
+            this._hoverPosition = { xPos: event.clientX, yPos: event.clientY };
+            // process and draw the tooltip.
+            this._debouncedTooltip(this._hoverPosition, this._drawableArea);
+        };
+        /**
+         * Debounced processing and drawing of tooltip.
+         */
+        this._debouncedTooltip = Debounce((pos, drawableArea) => {
+            this._preprocessTooltip(pos, drawableArea);
+            this._drawTooltip(pos, drawableArea);
+        }, TooltipDebounceTime);
+        /**
+         * Handles what to do when we stop hovering over the canvas.
+         */
+        this._handleStopHover = () => {
+            this._hoverPosition = null;
+        };
+        /**
+         * The handler for when we want to zoom in and out of the graph.
+         *
+         * @param event a mouse wheel event.
+         */
+        this._handleZoom = (event) => {
+            event.preventDefault();
+            if (!event.deltaY) {
+                return;
+            }
+            const amount = ((event.deltaY * -0.01) | 0) * 100;
+            const minZoom = 60;
+            // The max zoom is the number of slices.
+            const maxZoom = this._getNumberOfSlices();
+            if (this._shouldBecomeRealtime()) {
+                this._position = null;
+            }
+            // Bind the zoom between [minZoom, maxZoom]
+            this._sizeOfWindow = Scalar.Clamp(this._sizeOfWindow - amount, minZoom, maxZoom);
+        };
+        /**
+         * Initializes the panning object and attaches appropriate listener.
+         *
+         * @param event the mouse event containing positional information.
+         */
+        this._handlePanStart = (event) => {
+            const { _ctx: ctx } = this;
+            if (!ctx || !ctx.canvas) {
+                return;
+            }
+            const canvas = ctx.canvas;
+            this._panPosition = {
+                xPos: event.clientX,
+                delta: 0,
+            };
+            this._hoverPosition = null;
+            canvas.addEventListener("mousemove", this._handlePan);
+        };
+        /**
+         * While panning this event will keep track of the delta and update the "positions".
+         *
+         * @param event The mouse event that contains positional information.
+         */
+        this._handlePan = (event) => {
+            if (!this._panPosition || this._getNumberOfSlices() === 0) {
+                return;
+            }
+            const pixelDelta = this._panPosition.delta + event.clientX - this._panPosition.xPos;
+            const pixelsPerItem = (this._drawableArea.right - this._drawableArea.left) / this._sizeOfWindow;
+            const itemsDelta = (pixelDelta / pixelsPerItem) | 0;
+            const pos = this._position ?? this._getNumberOfSlices() - 1;
+            // update our position without allowing the user to pan more than they need to (approximation)
+            this._position = Scalar.Clamp(pos - itemsDelta, Math.floor(this._sizeOfWindow * ScaleFactor), this._getNumberOfSlices() - Math.floor(this._sizeOfWindow * (1 - ScaleFactor)));
+            if (itemsDelta === 0) {
+                this._panPosition.delta += pixelDelta;
+            }
+            else {
+                this._panPosition.delta = 0;
+            }
+            this._panPosition.xPos = event.clientX;
+            this._prevPointById.clear();
+            this._prevValueById.clear();
+        };
+        /**
+         * Clears the panning object and removes the appropriate listener.
+         */
+        this._handlePanStop = () => {
+            const { _ctx: ctx } = this;
+            if (!ctx || !ctx.canvas) {
+                return;
+            }
+            // check if we should return to realtime.
+            if (this._shouldBecomeRealtime()) {
+                this._position = null;
+            }
+            const canvas = ctx.canvas;
+            canvas.removeEventListener("mousemove", this._handlePan);
+            this._panPosition = null;
+        };
+        this._ctx = canvas.getContext && canvas.getContext("2d");
+        this._width = canvas.width;
+        this._height = canvas.height;
+        this._ticks = [];
+        this._panPosition = null;
+        this._hoverPosition = null;
+        this._position = null;
+        this._datasetBounds = { start: 0, end: 0 };
+        this._globalTimeMinMax = { min: Infinity, max: 0 };
+        this._drawableArea = { top: 0, left: 0, right: 0, bottom: 0 };
+        this._tooltipTextCache = { text: "", width: 0 };
+        this._tickerTextCache = { text: "", width: 0 };
+        this._tooltipItems = [];
+        this._tickerItems = [];
+        this._preprocessedTooltipInfo = { focusedId: "", longestText: "", numberOfTooltipItems: 0, xForActualTimestamp: 0 };
+        this._numberOfTickers = 0;
+        this._onVisibleRangeChangedObservable = settings.onVisibleRangeChangedObservable;
+        for (let i = 0; i < MaximumDatasetsAllowed; i++) {
+            this._tooltipItems.push({ text: "", color: "" });
+            this._tickerItems.push({ text: "", id: "", max: 0, min: 0 });
+        }
+        if (!this._ctx) {
+            throw Error("No canvas context accessible");
+        }
+        const defaultMetrics = this._ctx.measureText(Alphabet);
+        this._defaultLineHeight = defaultMetrics.actualBoundingBoxAscent + defaultMetrics.actualBoundingBoxDescent;
+        this._axisHeight = AxisLineLength + AxisPadding + this._defaultLineHeight + AxisPadding;
+        this._ctx.save();
+        this._ctx.font = GraphAddonFont;
+        const fontMetrics = this._ctx.measureText(Alphabet);
+        this._addonFontLineHeight = fontMetrics.actualBoundingBoxAscent + fontMetrics.actualBoundingBoxDescent;
+        this._ctx.restore();
+        this.datasets = settings.datasets;
+        this.metadata = new Map();
+        this._attachEventListeners(canvas);
+    }
+    /**
+     * Update the canvas graph service with the new height and width of the canvas.
+     * @param size The new size of the canvas.
+     */
+    resize(size) {
+        const { _ctx: ctx } = this;
+        const { width, height } = size;
+        if (!ctx || !ctx.canvas) {
+            return;
         }
-        else {
-            performanceCollector?.stop();
+        this._width = width;
+        this._height = height;
+        ctx.canvas.width = width;
+        ctx.canvas.height = height;
+        this.update();
+    }
+    /**
+     * Force resets the position in the data, effectively returning to the most current data.
+     */
+    resetDataPosition() {
+        this._position = null;
+    }
+    /**
+     * This method draws the data and sets up the appropriate scales.
+     */
+    _draw() {
+        const { _ctx: ctx } = this;
+        if (!ctx) {
+            return;
         }
-    };
-    const addStrategies = (perfCollector) => {
-        perfCollector.addCollectionStrategies(...DefaultStrategiesList);
-        if (PressureObserverWrapper.IsAvailable) {
-            // Do not enable for now as the Pressure API does not
-            // report factors at the moment.
-            // perfCollector.addCollectionStrategies({
-            //     strategyCallback: PerfCollectionStrategy.ThermalStrategy(),
-            //     category: IPerfMetadataCategory.FrameSteps,
-            //     hidden: true,
-            // });
-            // perfCollector.addCollectionStrategies({
-            //     strategyCallback: PerfCollectionStrategy.PowerSupplyStrategy(),
-            //     category: IPerfMetadataCategory.FrameSteps,
-            //     hidden: true,
-            // });
-            perfCollector.addCollectionStrategies({
-                strategyCallback: PerfCollectionStrategy.PressureStrategy(),
-                category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */,
-                hidden: true,
+        const numSlices = this._getNumberOfSlices();
+        if (numSlices === 0) {
+            return;
+        }
+        // First we clear the canvas so we can draw our data!
+        this.clear();
+        // Get global min max of time axis (across all datasets).
+        this._globalTimeMinMax.min = Infinity;
+        this._globalTimeMinMax.max = 0;
+        // First we must get the end positions of our view port.
+        const pos = this._position ?? numSlices - 1;
+        let start = pos - Math.ceil(this._sizeOfWindow * ScaleFactor);
+        let startOverflow = 0;
+        // account for overflow from start.
+        if (start < 0) {
+            startOverflow = 0 - start;
+            start = 0;
+        }
+        let end = Math.ceil(pos + this._sizeOfWindow * (1 - ScaleFactor) + startOverflow);
+        // account for overflow from end.
+        if (end > numSlices) {
+            const endOverflow = end - numSlices;
+            end = numSlices;
+            start = Math.max(start - endOverflow, 0);
+        }
+        // update the bounds
+        this._datasetBounds.start = start;
+        this._datasetBounds.end = end;
+        // next we must find the min and max timestamp in bounds. (Timestamps are sorted)
+        this._globalTimeMinMax.min = this.datasets.data.at(this.datasets.startingIndices.at(this._datasetBounds.start));
+        this._globalTimeMinMax.max = this.datasets.data.at(this.datasets.startingIndices.at(this._datasetBounds.end - 1));
+        // set the buffer region maximum by rescaling the max timestamp in bounds.
+        const bufferMaximum = Math.ceil((this._globalTimeMinMax.max - this._globalTimeMinMax.min) / ScaleFactor + this._globalTimeMinMax.min);
+        // we then need to update the end position based on the maximum for the buffer region
+        // binary search to get closest point to the buffer maximum.
+        this._datasetBounds.end = this._getClosestPointToTimestamp(bufferMaximum) + 1;
+        // keep track of largest timestamp value in view!
+        this._globalTimeMinMax.max = Math.max(this.datasets.data.at(this.datasets.startingIndices.at(this._datasetBounds.end - 1)), this._globalTimeMinMax.max);
+        const updatedScaleFactor = Scalar.Clamp((this._globalTimeMinMax.max - this._globalTimeMinMax.min) / (bufferMaximum - this._globalTimeMinMax.min), ScaleFactor, 1);
+        // we will now set the global maximum to the maximum of the buffer.
+        this._globalTimeMinMax.max = bufferMaximum;
+        this._drawableArea.top = 0;
+        this._drawableArea.left = 0;
+        this._drawableArea.bottom = this._height;
+        this._drawableArea.right = this._width;
+        this._drawTickers(this._drawableArea, this._datasetBounds);
+        this._drawTimeAxis(this._globalTimeMinMax, this._drawableArea);
+        this._drawPlayheadRegion(this._drawableArea, updatedScaleFactor);
+        this._drawableArea.top += DataPadding;
+        this._drawableArea.bottom -= DataPadding;
+        // pre-process tooltip info so we can use it in determining opacity of lines.
+        this._preprocessTooltip(this._hoverPosition, this._drawableArea);
+        const { left, right, bottom, top } = this._drawableArea;
+        // process, and then draw our points
+        for (let idOffset = 0; idOffset < this.datasets.ids.length; idOffset++) {
+            const id = this.datasets.ids[idOffset];
+            let valueMinMax;
+            let prevPoint = this._prevPointById.get(id);
+            let prevValue = this._prevValueById.get(id);
+            let ticker = false;
+            for (let i = 0; i < this._numberOfTickers; i++) {
+                if (this._tickerItems[i].id === id) {
+                    ticker = true;
+                }
+            }
+            if (!ticker) {
+                continue;
+            }
+            ctx.beginPath();
+            ctx.strokeStyle = this.metadata.get(id)?.color ?? DefaultColor;
+            // if we are focused on a line and not in live mode handle the opacities appropriately.
+            if (this._preprocessedTooltipInfo.focusedId === id) {
+                ctx.globalAlpha = DefaultAlpha;
+            }
+            else if (this._preprocessedTooltipInfo.focusedId !== "") {
+                ctx.globalAlpha = BackgroundLineAlpha;
+            }
+            const values = new Array(this._datasetBounds.end - this._datasetBounds.start);
+            for (let pointIndex = this._datasetBounds.start; pointIndex < this._datasetBounds.end; pointIndex++) {
+                const numPoints = this.datasets.data.at(this.datasets.startingIndices.at(pointIndex) + PerformanceViewerCollector.NumberOfPointsOffset);
+                if (idOffset >= numPoints) {
+                    continue;
+                }
+                const valueIndex = this.datasets.startingIndices.at(pointIndex) + PerformanceViewerCollector.SliceDataOffset + idOffset;
+                const value = this.datasets.data.at(valueIndex);
+                if (prevValue === undefined) {
+                    prevValue = value;
+                    this._prevValueById.set(id, prevValue);
+                }
+                // perform smoothing
+                const smoothedValue = SmoothingFactor * value + (1 - SmoothingFactor) * prevValue;
+                values[pointIndex - this._datasetBounds.start] = smoothedValue;
+                if (!valueMinMax) {
+                    valueMinMax = {
+                        min: smoothedValue,
+                        max: smoothedValue,
+                    };
+                }
+                this._prevValueById.set(id, smoothedValue);
+                valueMinMax.min = Math.min(valueMinMax.min, smoothedValue);
+                valueMinMax.max = Math.max(valueMinMax.max, smoothedValue);
+            }
+            const delta = valueMinMax.max - valueMinMax.min;
+            valueMinMax.min -= RangeMargin * delta;
+            valueMinMax.max += RangeMargin * delta;
+            for (let pointIndex = this._datasetBounds.start; pointIndex < this._datasetBounds.end; pointIndex++) {
+                const timestamp = this.datasets.data.at(this.datasets.startingIndices.at(pointIndex));
+                const smoothedValue = values[pointIndex - this._datasetBounds.start];
+                const drawableTime = this._getPixelForNumber(timestamp, this._globalTimeMinMax, left, right - left, false);
+                const drawableValue = this._getPixelForNumber(smoothedValue, valueMinMax, top, bottom - top, true);
+                if (prevPoint === undefined) {
+                    prevPoint = [drawableTime, drawableValue];
+                    this._prevPointById.set(id, prevPoint);
+                }
+                const xDifference = drawableTime - prevPoint[0];
+                const skipLine = xDifference > MaxXDistancePercBetweenLinePoints * (right - left);
+                if (skipLine) {
+                    ctx.fillStyle = NoDataRectangleColor;
+                    ctx.fillRect(prevPoint[0], top, xDifference, bottom - top);
+                }
+                else {
+                    if (prevPoint[0] < drawableTime) {
+                        ctx.moveTo(prevPoint[0], prevPoint[1]);
+                        ctx.lineTo(drawableTime, drawableValue);
+                    }
+                }
+                prevPoint[0] = drawableTime;
+                prevPoint[1] = drawableValue;
+            }
+            ctx.stroke();
+        }
+        ctx.globalAlpha = DefaultAlpha;
+        // then draw the tooltip.
+        this._drawTooltip(this._hoverPosition, this._drawableArea);
+    }
+    _drawTickers(drawableArea, bounds) {
+        const { _ctx: ctx } = this;
+        if (!ctx) {
+            return;
+        }
+        // create the ticker objects for each of the non hidden items.
+        let longestText = "";
+        this._numberOfTickers = 0;
+        const valueMap = new Map();
+        for (let idOffset = 0; idOffset < this.datasets.ids.length; idOffset++) {
+            const id = this.datasets.ids[idOffset];
+            if (this.metadata.get(id)?.hidden) {
+                continue;
+            }
+            const valueMinMax = this._getMinMax(bounds, idOffset);
+            const latestValue = this.datasets.data.at(this.datasets.startingIndices.at(bounds.end - 1) + PerformanceViewerCollector.SliceDataOffset + idOffset);
+            const text = `${id}: ${latestValue.toFixed(2)} (max: ${valueMinMax.max.toFixed(2)}, min: ${valueMinMax.min.toFixed(2)})`;
+            valueMap.set(id, {
+                min: valueMinMax.min,
+                max: valueMinMax.max,
+                current: latestValue,
             });
+            if (text.length > longestText.length) {
+                longestText = text;
+            }
+            this._tickerItems[this._numberOfTickers].id = id;
+            this._tickerItems[this._numberOfTickers].max = valueMinMax.max;
+            this._tickerItems[this._numberOfTickers].min = valueMinMax.min;
+            this._tickerItems[this._numberOfTickers].text = text;
+            this._numberOfTickers++;
+        }
+        this._onVisibleRangeChangedObservable?.notifyObservers({ valueMap });
+        ctx.save();
+        ctx.font = GraphAddonFont;
+        ctx.textBaseline = "middle";
+        ctx.textAlign = "left";
+        let width;
+        // if the lengths are the same the estimate should be good enough given the padding.
+        if (this._tickerTextCache.text.length === longestText.length) {
+            width = this._tickerTextCache.width;
+        }
+        else {
+            width = ctx.measureText(longestText).width + 2 * TickerHorizontalPadding;
+            this._tickerTextCache.text = longestText;
+            this._tickerTextCache.width = width;
+        }
+        ctx.restore();
+    }
+    /**
+     * Returns the index of the closest time for the datasets.
+     * Uses a modified binary search to get value.
+     *
+     * @param targetTime the time we want to get close to.
+     * @returns index of the item with the closest time to the targetTime
+     */
+    _getClosestPointToTimestamp(targetTime) {
+        let low = 0;
+        let high = this._getNumberOfSlices() - 1;
+        let closestIndex = 0;
+        while (low <= high) {
+            const middle = Math.trunc((low + high) / 2);
+            const middleTimestamp = this.datasets.data.at(this.datasets.startingIndices.at(middle));
+            if (Math.abs(middleTimestamp - targetTime) < Math.abs(this.datasets.data.at(this.datasets.startingIndices.at(closestIndex)) - targetTime)) {
+                closestIndex = middle;
+            }
+            if (middleTimestamp < targetTime) {
+                low = middle + 1;
+            }
+            else if (middleTimestamp > targetTime) {
+                high = middle - 1;
+            }
+            else {
+                break;
+            }
+        }
+        return closestIndex;
+    }
+    /**
+     * This is a convenience method to get the number of collected slices.
+     * @returns the total number of collected slices.
+     */
+    _getNumberOfSlices() {
+        return this.datasets.startingIndices.itemLength;
+    }
+    /**
+     * Draws the time axis, adjusts the drawable area for the graph.
+     *
+     * @param timeMinMax the minimum and maximum for the time axis.
+     * @param drawableArea the current allocated drawable area.
+     */
+    _drawTimeAxis(timeMinMax, drawableArea) {
+        const { _ctx: ctx } = this;
+        if (!ctx) {
+            return;
+        }
+        const spaceAvailable = drawableArea.right - drawableArea.left;
+        this._generateTicks(timeMinMax, spaceAvailable);
+        // remove the height of the axis from the available drawable area.
+        drawableArea.bottom -= this._axisHeight;
+        // draw axis box.
+        ctx.save();
+        ctx.fillStyle = AxisColor;
+        ctx.fillRect(drawableArea.left, drawableArea.bottom, spaceAvailable, this._axisHeight);
+        // draw time axis line
+        ctx.beginPath();
+        ctx.strokeStyle = DefaultColor;
+        ctx.moveTo(drawableArea.left, drawableArea.bottom);
+        ctx.lineTo(drawableArea.right, drawableArea.bottom);
+        // draw ticks and text.
+        ctx.fillStyle = DefaultColor;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        const timestampUnit = this._getTimestampUnit(this._ticks[this._ticks.length - 1]);
+        for (const tick of this._ticks) {
+            let position = this._getPixelForNumber(tick, timeMinMax, drawableArea.left, spaceAvailable, false);
+            if (position > spaceAvailable) {
+                position = spaceAvailable;
+            }
+            ctx.moveTo(position, drawableArea.bottom);
+            ctx.lineTo(position, drawableArea.bottom + 10);
+            ctx.fillText(this._parseTimestamp(tick, timestampUnit), position, drawableArea.bottom + 20);
+        }
+        ctx.stroke();
+        ctx.restore();
+    }
+    /**
+     * Given a timestamp (should be the maximum timestamp in view), this function returns the maximum unit the timestamp contains.
+     * This information can be used for formatting purposes.
+     * @param timestamp the maximum timestamp to find the maximum timestamp unit for.
+     * @returns The maximum unit the timestamp has.
+     */
+    _getTimestampUnit(timestamp) {
+        if (timestamp / MsInHour > 1) {
+            return TimestampUnit.Hours;
+        }
+        else if (timestamp / MsInMinute > 1) {
+            return TimestampUnit.Minutes;
+        }
+        else if (timestamp / MsInSecond > 1) {
+            return TimestampUnit.Seconds;
+        }
+        else {
+            return TimestampUnit.Milliseconds;
+        }
+    }
+    /**
+     * Given a timestamp and the interval unit, this function will parse the timestamp to the appropriate format.
+     * @param timestamp The timestamp to parse
+     * @param intervalUnit The maximum unit of the maximum timestamp in an interval.
+     * @returns a string representing the parsed timestamp.
+     */
+    _parseTimestamp(timestamp, intervalUnit) {
+        let parsedTimestamp = "";
+        if (intervalUnit >= TimestampUnit.Hours) {
+            const numHours = Math.floor(timestamp / MsInHour);
+            timestamp -= numHours * MsInHour;
+            parsedTimestamp += `${numHours.toString().padStart(intervalUnit > TimestampUnit.Hours ? 2 : 1, "0")}:`;
+        }
+        if (intervalUnit >= TimestampUnit.Minutes) {
+            const numMinutes = Math.floor(timestamp / MsInMinute);
+            timestamp -= numMinutes * MsInMinute;
+            parsedTimestamp += `${numMinutes.toString().padStart(intervalUnit > TimestampUnit.Minutes ? 2 : 1, "0")}:`;
+        }
+        const numSeconds = Math.floor(timestamp / MsInSecond);
+        timestamp -= numSeconds * MsInSecond;
+        parsedTimestamp += numSeconds.toString().padStart(intervalUnit > TimestampUnit.Seconds ? 2 : 1, "0");
+        if (timestamp > 0) {
+            if (parsedTimestamp.length > 0) {
+                parsedTimestamp += ".";
+            }
+            parsedTimestamp += Math.round(timestamp).toString().padStart(3, "0");
+        }
+        return parsedTimestamp;
+    }
+    /**
+     * Generates a list of ticks given the min and max of the axis, and the space available in the axis.
+     *
+     * @param minMax the minimum and maximum values of the axis
+     * @param spaceAvailable the total amount of space we have allocated to our axis
+     */
+    _generateTicks(minMax, spaceAvailable) {
+        const { min, max } = minMax;
+        const minTickSpacing = 40;
+        this._ticks.length = 0;
+        const maxTickCount = Math.ceil(spaceAvailable / minTickSpacing);
+        const range = this._niceNumber(max - min, false);
+        const spacing = this._niceNumber(range / (maxTickCount - 1), true);
+        const niceMin = Math.floor(min / spacing) * spacing;
+        const niceMax = Math.floor(max / spacing) * spacing;
+        for (let i = niceMin; i <= niceMax + 0.5 * spacing; i += spacing) {
+            this._ticks.push(i);
+        }
+    }
+    /**
+     * Nice number algorithm based on psueudo code defined in "Graphics Gems" by Andrew S. Glassner.
+     * This will find a "nice" number approximately equal to num.
+     *
+     * @param num The number we want to get close to.
+     * @param shouldRound if true we will round the number, otherwise we will get the ceiling.
+     * @returns a "nice" number approximately equal to num.
+     */
+    _niceNumber(num, shouldRound) {
+        const exp = Math.floor(Math.log10(num));
+        const fraction = num / Math.pow(10, exp);
+        let niceFraction;
+        if (shouldRound) {
+            if (fraction < 1.5) {
+                niceFraction = 1;
+            }
+            else if (fraction < 3) {
+                niceFraction = 2;
+            }
+            else if (fraction < 7) {
+                niceFraction = 5;
+            }
+            else {
+                niceFraction = 10;
+            }
+        }
+        else {
+            if (fraction <= 1) {
+                niceFraction = 1;
+            }
+            else if (fraction <= 2) {
+                niceFraction = 2;
+            }
+            else if (fraction <= 5) {
+                niceFraction = 5;
+            }
+            else {
+                niceFraction = 10;
+            }
+        }
+        return niceFraction * Math.pow(10, exp);
+    }
+    /**
+     * Gets the min and max as a single object from an array of numbers.
+     * @param bounds
+     * @param offset
+     * @returns the min and max of the array.
+     */
+    _getMinMax(bounds, offset) {
+        let min = Infinity, max = 0;
+        for (let i = bounds.start; i < bounds.end; i++) {
+            const numPoints = this.datasets.data.at(this.datasets.startingIndices.at(i) + PerformanceViewerCollector.NumberOfPointsOffset);
+            if (offset >= numPoints) {
+                continue;
+            }
+            const itemIndex = this.datasets.startingIndices.at(i) + PerformanceViewerCollector.SliceDataOffset + offset;
+            const item = this.datasets.data.at(itemIndex);
+            if (item < min) {
+                min = item;
+            }
+            if (item > max) {
+                max = item;
+            }
         }
-    };
-    useEffect(() => {
-        const perfCollector = scene.getPerfCollector();
-        addStrategies(perfCollector);
-        setPerformanceCollector(perfCollector);
-    }, []);
-    return (jsxs(Fragment, { children: [!isOpen && jsx(ButtonLine, { label: "Open Realtime Perf Viewer", onClick: onPerformanceButtonClick }), !isOpen && jsx(FileUploadLine, { label: "Load Perf Viewer using CSV", accept: ".csv", onClick: onLoadClick }), jsx(ButtonLine, { label: "Export Perf to CSV", onClick: onExportClick }), !isOpen && jsx(ButtonLine, { label: performanceCollector?.isStarted ? "Stop Recording" : "Begin Recording", onClick: onToggleRecording })] }));
-};
-
-/**
- * Wraps text in a property line
- * @param props - PropertyLineProps and TextProps
- * @returns property-line wrapped text
- */
-const TextPropertyLine = (props) => {
-    TextPropertyLine.displayName = "TextPropertyLine";
-    const { value, title } = props;
-    return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value ?? "" }) }));
-};
-
-const useStyles$H = makeStyles({
-    pinnedStatsPane: {
-        flex: "0 1 auto",
-        paddingBottom: tokens.spacingHorizontalM,
-    },
-});
-const StatsPane = (props) => {
-    const classes = useStyles$H();
-    const scene = props.context;
-    const engine = scene.getEngine();
-    const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
-    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 })] }));
-};
-
-/**
- * Displays an icon indicating enabled (green check) or disabled (red cross) state
- * @param props - The properties for the PropertyLine, including the boolean value to display.
- * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.
- */
-const BooleanBadgePropertyLine = (props) => {
-    BooleanBadgePropertyLine.displayName = "BooleanBadgePropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
-};
-
-const SystemStats = ({ context: scene }) => {
-    const engine = scene.getEngine();
-    const caps = engine.getCaps();
-    const resolution = useObservableState(() => `${engine.getRenderWidth()} x ${engine.getRenderHeight()}`, engine.onResizeObservable);
-    const hardwareScalingLevel = useObservableState(() => engine.getHardwareScalingLevel(), engine.onResizeObservable);
-    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Resolution", value: resolution }, "Resolution"), jsx(StringifiedPropertyLine, { label: "Hardware Scaling Level", value: hardwareScalingLevel }, "HardwareScalingLevel"), jsx(TextPropertyLine, { label: "Engine", value: engine.description }, "Engine"), jsx(BooleanBadgePropertyLine, { label: "StdDerivatives", value: caps.standardDerivatives }, "StdDerivatives"), jsx(BooleanBadgePropertyLine, { label: "Compressed Textures", value: caps.s3tc !== undefined }, "CompressedTextures"), jsx(BooleanBadgePropertyLine, { label: "Hardware Instances", value: caps.instancedArrays }, "HardwareInstances"), jsx(BooleanBadgePropertyLine, { label: "Texture Float", value: caps.textureFloat }, "TextureFloat"), jsx(BooleanBadgePropertyLine, { label: "Texture Half Float", value: caps.textureHalfFloat }, "TextureHalfFloat"), jsx(BooleanBadgePropertyLine, { label: "Render to Texture Float", value: caps.textureFloatRender }, "RenderToTextureFloat"), jsx(BooleanBadgePropertyLine, { label: "Render to Texture Half Float", value: caps.textureHalfFloatRender }, "RenderToTextureHalfFloat"), jsx(BooleanBadgePropertyLine, { label: "32bits Indices", value: caps.uintIndices }, "32bitsIndices"), jsx(BooleanBadgePropertyLine, { label: "Fragment Depth", value: caps.fragmentDepthSupported }, "FragmentDepth"), jsx(BooleanBadgePropertyLine, { label: "High Precision Shaders", value: caps.highPrecisionShaderSupported }, "HighPrecisionShaders"), jsx(BooleanBadgePropertyLine, { label: "Draw Buffers", value: caps.drawBuffersExtension }, "DrawBuffers"), jsx(BooleanBadgePropertyLine, { label: "Vertex Array Object", value: caps.vertexArrayObject }, "VertexArrayObject"), jsx(BooleanBadgePropertyLine, { label: "Timer Query", value: caps.timerQuery !== undefined }, "TimerQuery"), jsx(BooleanBadgePropertyLine, { label: "Stencil", value: engine.isStencilEnable }, "Stencil"), jsx(BooleanBadgePropertyLine, { label: "Parallel Shader Compilation", value: caps.parallelShaderCompile != null }, "ParallelShaderCompilation"), jsx(StringifiedPropertyLine, { label: "Max Textures Units", value: caps.maxTexturesImageUnits }, "MaxTexturesUnits"), jsx(StringifiedPropertyLine, { label: "Max Textures Size", value: caps.maxTextureSize }, "MaxTexturesSize"), jsx(StringifiedPropertyLine, { label: "Max Anisotropy", value: caps.maxAnisotropy }, "MaxAnisotropy"), jsx(TextPropertyLine, { label: "Driver", value: engine.extractDriverInfo() }, "Driver")] }));
-};
-
-const StatsServiceIdentity = Symbol("StatsService");
-/**
- * Provides a scene stats pane.
- */
-const StatsServiceDefinition = {
-    friendlyName: "Stats",
-    produces: [StatsServiceIdentity],
-    consumes: [ShellServiceIdentity, SceneContextIdentity],
-    factory: (shellService, sceneContext) => {
-        const sectionsCollection = new ObservableCollection();
-        const sectionContentCollection = new ObservableCollection();
-        const registration = shellService.addSidePane({
-            key: "Statistics",
-            title: "Statistics",
-            icon: DataBarHorizontalRegular,
-            horizontalLocation: "right",
-            verticalLocation: "top",
-            order: 300,
-            suppressTeachingMoment: true,
-            content: () => {
-                const sections = useOrderedObservableCollection(sectionsCollection);
-                const sectionContent = useObservableCollection(sectionContentCollection);
-                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                return jsx(Fragment, { children: scene && jsx(StatsPane, { sections: sections, sectionContent: sectionContent, context: scene }) });
-            },
-        });
-        // Default/built-in sections.
-        sectionsCollection.add({
-            identity: "Performance",
-            order: 0,
-        });
-        sectionsCollection.add({
-            identity: "Count",
-            order: 1,
-        });
-        sectionsCollection.add({
-            identity: "Frame Steps Duration",
-            order: 2,
-        });
-        sectionsCollection.add({
-            identity: "System Info",
-            order: 3,
-        });
-        // Default/built-in content.
-        sectionContentCollection.add({
-            key: "DefaultPerfStats",
-            section: "Performance",
-            order: 0,
-            component: PerformanceStats,
-        });
-        sectionContentCollection.add({
-            key: "DefaultCountStats",
-            section: "Count",
-            order: 1,
-            component: CountStats,
-        });
-        sectionContentCollection.add({
-            key: "DefaultFrameStats",
-            section: "Frame Steps Duration",
-            order: 2,
-            component: FrameStepsStats,
-        });
-        sectionContentCollection.add({
-            key: "DefaultSystemStats",
-            section: "System Info",
-            order: 3,
-            component: SystemStats,
-        });
         return {
-            addSection: (section) => sectionsCollection.add(section),
-            addSectionContent: (content) => sectionContentCollection.add(content),
-            dispose: () => registration.dispose(),
+            min,
+            max,
         };
+    }
+    /**
+     * Converts a single number to a pixel coordinate in a single axis by normalizing the data to a [0, 1] scale using the minimum and maximum values.
+     *
+     * @param num the number we want to get the pixel coordinate for
+     * @param minMax the min and max of the dataset in the axis we want the pixel coordinate for.
+     * @param startingPixel the starting pixel coordinate (this means it takes account for any offset).
+     * @param spaceAvailable the total space available in this axis.
+     * @param shouldFlipValue if we should use a [1, 0] scale instead of a [0, 1] scale.
+     * @returns the pixel coordinate of the value in a single axis.
+     */
+    _getPixelForNumber(num, minMax, startingPixel, spaceAvailable, shouldFlipValue) {
+        const { min, max } = minMax;
+        // Perform a min-max normalization to rescale the value onto a [0, 1] scale given the min and max of the dataset.
+        let normalizedValue = Math.abs(max - min) > 0.001 ? (num - min) / (max - min) : 0.5;
+        // if we should make this a [1, 0] range instead (higher numbers = smaller pixel value)
+        if (shouldFlipValue) {
+            normalizedValue = 1 - normalizedValue;
+        }
+        return startingPixel + normalizedValue * spaceAvailable;
+    }
+    /**
+     * Add in any necessary event listeners.
+     *
+     * @param canvas The canvas we want to attach listeners to.
+     */
+    _attachEventListeners(canvas) {
+        canvas.addEventListener("wheel", this._handleZoom);
+        canvas.addEventListener("mousemove", this._handleDataHover);
+        canvas.addEventListener("mousedown", this._handlePanStart);
+        canvas.addEventListener("mouseleave", this._handleStopHover);
+        // The user may stop panning outside of the canvas size so we should add the event listener to the document.
+        canvas.ownerDocument.addEventListener("mouseup", this._handlePanStop);
+    }
+    /**
+     * We remove all event listeners we added.
+     *
+     * @param canvas The canvas we want to remove listeners from.
+     */
+    _removeEventListeners(canvas) {
+        canvas.removeEventListener("wheel", this._handleZoom);
+        canvas.removeEventListener("mousemove", this._handleDataHover);
+        canvas.removeEventListener("mousedown", this._handlePanStart);
+        canvas.removeEventListener("mouseleave", this._handleStopHover);
+        canvas.ownerDocument.removeEventListener("mouseup", this._handlePanStop);
+    }
+    /**
+     * Given a line defined by P1: (x1, y1) and P2: (x2, y2) get the distance of P0 (x0, y0) from the line.
+     * https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points
+     * @param x1 x position of point P1
+     * @param y1 y position of point P1
+     * @param x2 x position of point P2
+     * @param y2 y position of point P2
+     * @param x0 x position of point P0
+     * @param y0 y position of point P0
+     * @returns distance of P0 from the line defined by P1 and P2
+     */
+    _getDistanceFromLine(x1, y1, x2, y2, x0, y0) {
+        // if P1 and P2 are the same we just get the distance between P1 and P0
+        if (x1 === x2 && y1 === y2) {
+            return Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
+        }
+        // next we want to handle the case where our point is beyond the y position of our line
+        let topX = 0;
+        let topY = 0;
+        let bottomX = 0;
+        let bottomY = 0;
+        if (y1 >= y2) {
+            topX = x1;
+            topY = y1;
+            bottomX = x2;
+            bottomY = y2;
+        }
+        else {
+            topX = x2;
+            topY = y2;
+            bottomX = x1;
+            bottomY = y1;
+        }
+        if (y0 < bottomY) {
+            return Math.sqrt(Math.pow(bottomX - x0, 2) + Math.pow(bottomY - y0, 2));
+        }
+        if (y0 > topY) {
+            return Math.sqrt(Math.pow(topX - x0, 2) + Math.pow(topY - y0, 2));
+        }
+        // the general case!
+        const numerator = Math.abs((x2 - x1) * (y1 - y0) - (x1 - x0) * (y2 - y1));
+        const denominator = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+        return numerator / denominator;
+    }
+    /**
+     * This method does preprocessing calculations for the tooltip.
+     * @param pos the position of our mouse.
+     * @param drawableArea the remaining drawable area.
+     */
+    _preprocessTooltip(pos, drawableArea) {
+        const { _ctx: ctx } = this;
+        if (pos === null || !ctx || !ctx.canvas || this._getNumberOfSlices() === 0) {
+            return;
+        }
+        const { left, top } = ctx.canvas.getBoundingClientRect();
+        const adjustedYPos = pos.yPos - top;
+        let adjustedXPos = pos.xPos - left;
+        if (adjustedXPos > drawableArea.right) {
+            adjustedXPos = drawableArea.right;
+        }
+        // convert the mouse x position in pixels to a timestamp.
+        const inferredTimestamp = this._getNumberFromPixel(adjustedXPos, this._globalTimeMinMax, drawableArea.left, drawableArea.right, false);
+        let longestText = "";
+        let numberOfTooltipItems = 0;
+        // get the closest timestamps to the target timestamp, and store the appropriate meta object.
+        const closestIndex = this._getClosestPointToTimestamp(inferredTimestamp);
+        let actualTimestamp = 0;
+        let closestLineId = "";
+        let closestLineValueMinMax = { min: 0, max: 0 };
+        let closestLineDistance = Number.POSITIVE_INFINITY;
+        for (let idOffset = 0; idOffset < this.datasets.ids.length; idOffset++) {
+            const id = this.datasets.ids[idOffset];
+            if (this.metadata.get(id)?.hidden) {
+                continue;
+            }
+            const numPoints = this.datasets.data.at(this.datasets.startingIndices.at(closestIndex) + PerformanceViewerCollector.NumberOfPointsOffset);
+            if (idOffset >= numPoints) {
+                continue;
+            }
+            const valueAtClosestPointIndex = this.datasets.startingIndices.at(closestIndex) + PerformanceViewerCollector.SliceDataOffset + idOffset;
+            const valueAtClosestPoint = this.datasets.data.at(valueAtClosestPointIndex);
+            let valueMinMax;
+            // we would have already calculated  the min and max while getting the tickers, so use those, and get first one.
+            for (let i = 0; i < this._numberOfTickers; i++) {
+                if (this._tickerItems[i].id === id) {
+                    valueMinMax = this._tickerItems[i];
+                }
+            }
+            if (!valueMinMax) {
+                continue;
+            }
+            actualTimestamp = this.datasets.data.at(this.datasets.startingIndices.at(closestIndex));
+            const valueAtClosestPointYPos = this._getPixelForNumber(valueAtClosestPoint, valueMinMax, drawableArea.top, drawableArea.bottom - drawableArea.top, true);
+            const xForActualTimestamp = this._getPixelForNumber(actualTimestamp, this._globalTimeMinMax, drawableArea.left, drawableArea.right - drawableArea.left, false);
+            const text = `${id}: ${valueAtClosestPoint.toFixed(2)}`;
+            if (text.length > longestText.length) {
+                longestText = text;
+            }
+            this._tooltipItems[numberOfTooltipItems].text = text;
+            this._tooltipItems[numberOfTooltipItems].color = this.metadata.get(id)?.color ?? DefaultColor;
+            numberOfTooltipItems++;
+            // don't process rest if we aren't panned.
+            if (!this._position) {
+                continue;
+            }
+            // initially distance between closest data point and mouse point.
+            let distance = this._getDistanceFromLine(xForActualTimestamp, valueAtClosestPointYPos, xForActualTimestamp, valueAtClosestPointYPos, pos.xPos - left, adjustedYPos);
+            // get the shortest distance between the point and the line segment infront, and line segment behind, store the shorter distance (if shorter than distance between closest data point and mouse).
+            if (closestIndex + 1 < this.datasets.data.itemLength &&
+                this.datasets.data.at(this.datasets.startingIndices.at(closestIndex + 1) + PerformanceViewerCollector.NumberOfPointsOffset) > idOffset) {
+                const secondPointTimestamp = this.datasets.data.at(this.datasets.startingIndices.at(closestIndex + 1));
+                const secondPointX = this._getPixelForNumber(secondPointTimestamp, this._globalTimeMinMax, drawableArea.left, drawableArea.right - drawableArea.left, false);
+                const secondPointValue = this.datasets.data.at(this.datasets.startingIndices.at(closestIndex + 1) + PerformanceViewerCollector.SliceDataOffset + idOffset);
+                const secondPointY = this._getPixelForNumber(secondPointValue, valueMinMax, drawableArea.top, drawableArea.bottom - drawableArea.top, true);
+                distance = Math.min(this._getDistanceFromLine(xForActualTimestamp, valueAtClosestPointYPos, secondPointX, secondPointY, pos.xPos - left, adjustedYPos), distance);
+            }
+            if (closestIndex - 1 >= 0 && this.datasets.data.at(this.datasets.startingIndices.at(closestIndex + 1) + PerformanceViewerCollector.NumberOfPointsOffset) > idOffset) {
+                const secondPointTimestamp = this.datasets.data.at(this.datasets.startingIndices.at(closestIndex - 1));
+                const secondPointX = this._getPixelForNumber(secondPointTimestamp, this._globalTimeMinMax, drawableArea.left, drawableArea.right - drawableArea.left, false);
+                const secondPointValue = this.datasets.data.at(this.datasets.startingIndices.at(closestIndex - 1) + PerformanceViewerCollector.SliceDataOffset + idOffset);
+                const secondPointY = this._getPixelForNumber(secondPointValue, valueMinMax, drawableArea.top, drawableArea.bottom - drawableArea.top, true);
+                distance = Math.min(this._getDistanceFromLine(xForActualTimestamp, valueAtClosestPointYPos, secondPointX, secondPointY, pos.xPos - left, adjustedYPos), distance);
+            }
+            if (distance < closestLineDistance) {
+                closestLineId = id;
+                closestLineDistance = distance;
+                closestLineValueMinMax = valueMinMax;
+            }
+        }
+        const xForActualTimestamp = this._getPixelForNumber(actualTimestamp, this._globalTimeMinMax, drawableArea.left, drawableArea.right - drawableArea.left, false);
+        this._preprocessedTooltipInfo.xForActualTimestamp = xForActualTimestamp;
+        // check if hover is within a certain distance, if so it is our only item in our tooltip.
+        if (closestLineDistance <= MaxDistanceForHover && this._position) {
+            this._preprocessedTooltipInfo.focusedId = closestLineId;
+            const inferredValue = this._getNumberFromPixel(adjustedYPos, closestLineValueMinMax, drawableArea.top, drawableArea.bottom, true);
+            const closestLineText = `${closestLineId}: ${inferredValue.toFixed(2)}`;
+            this._preprocessedTooltipInfo.longestText = closestLineText;
+            this._preprocessedTooltipInfo.numberOfTooltipItems = 1;
+            this._tooltipItems[0].text = closestLineText;
+            this._tooltipItems[0].color = this.metadata.get(closestLineId)?.color ?? DefaultColor;
+        }
+        else {
+            this._preprocessedTooltipInfo.focusedId = "";
+            this._preprocessedTooltipInfo.longestText = longestText;
+            this._preprocessedTooltipInfo.numberOfTooltipItems = numberOfTooltipItems;
+        }
+    }
+    /**
+     * Draws the tooltip given the area it is allowed to draw in and the current pixel position.
+     *
+     * @param pos the position of the mouse cursor in pixels (x, y).
+     * @param drawableArea  the available area we can draw in.
+     */
+    _drawTooltip(pos, drawableArea) {
+        const { _ctx: ctx } = this;
+        if (pos === null || !ctx || !ctx.canvas || this._getNumberOfSlices() === 0) {
+            return;
+        }
+        const { left, top } = ctx.canvas.getBoundingClientRect();
+        const { numberOfTooltipItems, xForActualTimestamp, longestText } = this._preprocessedTooltipInfo;
+        ctx.save();
+        // draw pointer triangle
+        ctx.fillStyle = PositionIndicatorColor;
+        const yTriangle = drawableArea.bottom + TrianglePaddingFromAxisLine;
+        ctx.beginPath();
+        ctx.moveTo(xForActualTimestamp, yTriangle);
+        ctx.lineTo(xForActualTimestamp + TriangleWidth / 2, yTriangle + TriangleHeight);
+        ctx.lineTo(xForActualTimestamp - TriangleWidth / 2, yTriangle + TriangleHeight);
+        ctx.closePath();
+        ctx.fill();
+        ctx.strokeStyle = PositionIndicatorColor;
+        ctx.beginPath();
+        // draw vertical or horizontal line depending on if focused on a point on the line.
+        if (this._preprocessedTooltipInfo.focusedId === "") {
+            ctx.moveTo(xForActualTimestamp, drawableArea.bottom);
+            ctx.lineTo(xForActualTimestamp, TopOfGraphY);
+        }
+        else {
+            const lineY = pos.yPos - top;
+            ctx.moveTo(drawableArea.left, lineY);
+            ctx.lineTo(drawableArea.right, lineY);
+        }
+        ctx.stroke();
+        // draw the actual tooltip
+        ctx.font = GraphAddonFont;
+        ctx.textBaseline = "middle";
+        ctx.textAlign = "left";
+        const boxLength = this._addonFontLineHeight;
+        const textHeight = this._addonFontLineHeight + Math.floor(TooltipHorizontalPadding / 2);
+        // initialize width with cached value or measure width of longest text and update cache.
+        let width;
+        if (longestText === this._tooltipTextCache.text) {
+            width = this._tooltipTextCache.width;
+        }
+        else {
+            width = ctx.measureText(longestText).width + boxLength + 2 * TooltipHorizontalPadding + SpaceBetweenTextAndBox;
+            this._tooltipTextCache.text = longestText;
+            this._tooltipTextCache.width = width;
+        }
+        const tooltipHeight = textHeight * (numberOfTooltipItems + 1);
+        let x = pos.xPos - left;
+        let y = drawableArea.bottom - TooltipPaddingFromBottom - tooltipHeight;
+        // We want the tool tip to always be inside the canvas so we adjust which way it is drawn.
+        if (x + width > this._width) {
+            x -= width;
+        }
+        ctx.globalAlpha = TooltipBackgroundAlpha;
+        ctx.fillStyle = TooltipBackgroundColor;
+        ctx.fillRect(x, y, width, tooltipHeight);
+        ctx.globalAlpha = DefaultAlpha;
+        x += TooltipHorizontalPadding;
+        y += textHeight;
+        for (let i = 0; i < numberOfTooltipItems; i++) {
+            const tooltipItem = this._tooltipItems[i];
+            ctx.fillStyle = tooltipItem.color;
+            ctx.fillRect(x, y - Math.floor(boxLength / 2), boxLength, boxLength);
+            ctx.fillStyle = TooltipForegroundColor;
+            ctx.fillText(tooltipItem.text, x + boxLength + SpaceBetweenTextAndBox, y);
+            y += textHeight;
+        }
+        ctx.restore();
+    }
+    /**
+     * Gets the number from a pixel position given the minimum and maximum value in range, and the starting pixel and the ending pixel.
+     *
+     * @param pixel current pixel position we want to get the number for.
+     * @param minMax the minimum and maximum number in the range.
+     * @param startingPixel position of the starting pixel in range.
+     * @param endingPixel position of ending pixel in range.
+     * @param shouldFlip if we should use a [1, 0] scale instead of a [0, 1] scale.
+     * @returns number corresponding to pixel position
+     */
+    _getNumberFromPixel(pixel, minMax, startingPixel, endingPixel, shouldFlip) {
+        // normalize pixel to range [0, 1].
+        let normalizedPixelPosition = (pixel - startingPixel) / (endingPixel - startingPixel);
+        // we should use a [1, 0] scale instead.
+        if (shouldFlip) {
+            normalizedPixelPosition = 1 - normalizedPixelPosition;
+        }
+        return minMax.min + normalizedPixelPosition * (minMax.max - minMax.min);
+    }
+    /**
+     * Method which returns true if the data should become realtime, false otherwise.
+     *
+     * @returns if the data should become realtime or not.
+     */
+    _shouldBecomeRealtime() {
+        if (this._getNumberOfSlices() === 0) {
+            return false;
+        }
+        // we need to compare our current slice to the latest slice to see if we should return to realtime mode.
+        const pos = this._position;
+        const latestSlicePos = this._getNumberOfSlices() - 1;
+        if (pos === null) {
+            return false;
+        }
+        // account for overflow on the left side only as it will be the one determining if we have sufficiently caught up to the realtime data.
+        const overflow = Math.max(0 - (pos - Math.ceil(this._sizeOfWindow * ScaleFactor)), 0);
+        const rightmostPos = Math.min(overflow + pos + Math.ceil(this._sizeOfWindow * (1 - ScaleFactor)), latestSlicePos);
+        return (this.datasets.data.at(this.datasets.startingIndices.at(rightmostPos)) / this.datasets.data.at(this.datasets.startingIndices.at(latestSlicePos)) > ReturnToLiveThreshold);
+    }
+    /**
+     * Will generate a playhead with a futurebox that takes up (1-scalefactor)*100% of the canvas.
+     *
+     * @param drawableArea The remaining drawable area.
+     * @param scaleFactor The Percentage between 0.0 and 1.0 of the canvas the data gets drawn on.
+     */
+    _drawPlayheadRegion(drawableArea, scaleFactor) {
+        const { _ctx: ctx } = this;
+        if (!ctx || scaleFactor >= StopDrawingPlayheadThreshold) {
+            return;
+        }
+        const dividerXPos = Math.ceil(drawableArea.right * scaleFactor);
+        const playheadPos = dividerXPos - PlayheadSize;
+        const futureBoxPos = dividerXPos + DividerSize;
+        const rectangleHeight = drawableArea.bottom - drawableArea.top - 1;
+        ctx.save();
+        ctx.fillStyle = FutureBoxColor;
+        ctx.fillRect(futureBoxPos, drawableArea.top, drawableArea.right - futureBoxPos, rectangleHeight);
+        ctx.fillStyle = DividerColor;
+        ctx.fillRect(dividerXPos, drawableArea.top, DividerSize, rectangleHeight);
+        ctx.fillStyle = PlayheadColor;
+        ctx.fillRect(playheadPos, drawableArea.top, PlayheadSize, rectangleHeight);
+        ctx.restore();
+    }
+    /**
+     *  Method to do cleanup when the object is done being used.
+     *
+     */
+    destroy() {
+        if (!this._ctx || !this._ctx.canvas) {
+            return;
+        }
+        this._removeEventListeners(this._ctx.canvas);
+        this._ctx = null;
+    }
+    /**
+     * This method clears the canvas
+     */
+    clear() {
+        const { _ctx: ctx, _width, _height } = this;
+        // If we do not have a context we can't really do much here!
+        if (!ctx) {
+            return;
+        }
+        // save the transformation matrix, clear the canvas then restore.
+        ctx.save();
+        ctx.resetTransform();
+        ctx.clearRect(0, 0, _width, _height);
+        ctx.restore();
+    }
+}
+
+const useStyles$K = makeStyles({
+    canvas: {
+        flexGrow: 1,
+        width: "100%",
+        height: "100%",
     },
+});
+const CanvasGraph = (props) => {
+    const { collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize } = props;
+    const classes = useStyles$K();
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        if (!canvasRef.current) {
+            return;
+        }
+        if (initialGraphSize) {
+            canvasRef.current.width = initialGraphSize.x;
+            canvasRef.current.height = initialGraphSize.y;
+        }
+        let cs;
+        try {
+            cs = new CanvasGraphService(canvasRef.current, { datasets: collector.datasets, onVisibleRangeChangedObservable });
+        }
+        catch (error) {
+            Logger.Error(error);
+            return;
+        }
+        const layoutUpdated = (newSize) => {
+            if (!canvasRef.current) {
+                return;
+            }
+            const { left, top } = canvasRef.current.getBoundingClientRect();
+            newSize.width = newSize.width - left;
+            newSize.height = newSize.height - top;
+            cs?.resize(newSize);
+        };
+        const dataUpdated = () => {
+            cs?.update();
+        };
+        const metaUpdated = (meta) => {
+            if (!cs) {
+                return;
+            }
+            cs.metadata = meta;
+            cs.update();
+        };
+        const resetDataPosition = () => {
+            cs?.resetDataPosition();
+        };
+        scene.onAfterRenderObservable.add(dataUpdated);
+        collector.metadataObservable.add(metaUpdated);
+        layoutObservable?.add(layoutUpdated);
+        returnToPlayheadObservable?.add(resetDataPosition);
+        return () => {
+            cs?.destroy();
+            layoutObservable?.removeCallback(layoutUpdated);
+            scene.onAfterRenderObservable.removeCallback(dataUpdated);
+            collector.metadataObservable.removeCallback(metaUpdated);
+        };
+    }, [canvasRef, collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize]);
+    return jsx("canvas", { className: classes.canvas, ref: canvasRef });
 };
 
-const ToolsPane = (props) => {
-    return jsx(ExtensibleAccordion, { ...props });
+const SpinButton = (props) => {
+    SpinButton.displayName = "SpinButton";
+    const classes = useInputStyles$1();
+    const { size } = useContext(ToolContext);
+    const { min, max } = props;
+    const [value, setValue] = useState(props.value);
+    const lastCommittedValue = useRef(props.value);
+    // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin
+    const step = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;
+    const precision = Math.min(4, step !== undefined ? Math.max(0, CalculatePrecision(step)) : 2); // If no step, set precision to 2. Regardless, cap precision at 4 to avoid wild numbers
+    useEffect(() => {
+        if (props.value !== lastCommittedValue.current) {
+            lastCommittedValue.current = props.value;
+            setValue(props.value); // Update local state when props.value changes
+        }
+    }, [props.value]);
+    const validateValue = (numericValue) => {
+        const outOfBounds = (min !== undefined && numericValue < min) || (max !== undefined && numericValue > max);
+        const failsValidator = props.validator && !props.validator(numericValue);
+        const failsIntCheck = props.forceInt ? !Number.isInteger(numericValue) : false;
+        const invalid = !!outOfBounds || !!failsValidator || isNaN(numericValue) || !!failsIntCheck;
+        return !invalid;
+    };
+    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(); // Prevent event propagation
+        if (data.value != null && !Number.isNaN(data.value)) {
+            setValue(data.value);
+            tryCommitValue(data.value);
+        }
+    };
+    const handleKeyUp = (event) => {
+        event.stopPropagation(); // Prevent event propagation
+        if (event.key !== "Enter") {
+            const currVal = parseFloat(event.target.value); // Cannot use currentTarget.value as it won't have the most recently typed value
+            setValue(currVal);
+            tryCommitValue(currVal);
+        }
+    };
+    const id = useId("spin-button");
+    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
+    // Build input slot from inputClassName
+    const inputSlot = {
+        className: mergeClasses(classes.inputSlot, props.inputClassName),
+    };
+    const spinButton = (jsx(SpinButton$1, { ...props, appearance: "outline", input: inputSlot, step: step, id: id, size: size, precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName }));
+    return props.infoLabel ? (jsxs("div", { className: classes.container, children: [jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), spinButton] })) : (spinButton);
 };
 
-const ToolsServiceIdentity = Symbol("ToolsService");
-/**
- * A collection of usually optional, dynamic extensions.
- * Common examples includes importing/exporting, or other general creation tools.
- */
-const ToolsServiceDefinition = {
-    friendlyName: "Tools Editor",
-    produces: [ToolsServiceIdentity],
-    consumes: [ShellServiceIdentity, SceneContextIdentity],
-    factory: (shellService, sceneContext) => {
-        const sectionsCollection = new ObservableCollection();
-        const sectionContentCollection = new ObservableCollection();
-        // Only show the Tools pane if some tool content has been added.
-        let toolsPaneRegistration = null;
-        sectionContentCollection.observable.add(() => {
-            if (sectionContentCollection.items.length === 0) {
-                toolsPaneRegistration?.dispose();
-                toolsPaneRegistration = null;
-            }
-            else if (!toolsPaneRegistration) {
-                toolsPaneRegistration = shellService.addSidePane({
-                    key: "Tools",
-                    title: "Tools",
-                    icon: WrenchRegular,
-                    horizontalLocation: "right",
-                    verticalLocation: "top",
-                    order: 400,
-                    suppressTeachingMoment: true,
-                    content: () => {
-                        const sections = useOrderedObservableCollection(sectionsCollection);
-                        const sectionContent = useObservableCollection(sectionContentCollection);
-                        const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                        return scene && jsx(ToolsPane, { sections: sections, sectionContent: sectionContent, context: scene });
-                    },
-                });
-            }
-        });
-        /**
-         * Left TODO: Implement the following sections from toolsTabComponent.tsx
-         * - GLTF Validator (see glTFComponent.tsx) (consider putting in Import tools)
-         * - Reflector
-         * - GIF (consider putting in Capture Tools)
-         * - Replay (consider putting in Capture Tools)
-         */
-        return {
-            addSection: (section) => sectionsCollection.add(section),
-            addSectionContent: (content) => sectionContentCollection.add(content),
-            dispose: () => toolsPaneRegistration?.dispose(),
-        };
+const TextInput = (props) => {
+    TextInput.displayName = "TextInput";
+    const classes = useInputStyles$1();
+    const [value, setValue] = useState(props.value);
+    const lastCommittedValue = useRef(props.value);
+    const { size } = useContext(ToolContext);
+    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);
+        if (!props.validateOnlyOnBlur) {
+            tryCommitValue(data.value);
+        }
+    };
+    const handleKeyUp = (event) => {
+        event.stopPropagation();
+        if (!props.validateOnlyOnBlur) {
+            tryCommitValue(event.currentTarget.value);
+        }
+    };
+    const handleBlur = (event) => {
+        HandleOnBlur(event);
+        if (props.validateOnlyOnBlur) {
+            tryCommitValue(event.currentTarget.value);
+        }
+    };
+    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
+    const id = useId("input-button");
+    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: handleBlur, className: mergedClassName })] }));
+};
+
+const useDropdownStyles = makeStyles({
+    dropdown: {
+        minWidth: 0,
+        width: "100%",
+    },
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center", // align items vertically
     },
-};
-
-const BabylonWebResources = {
-    homepage: "https://www.babylonjs.com",
-    repository: "https://github.com/BabylonJS/Babylon.js",
-    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
-};
+    dropdownText: { textAlign: "end", textOverflow: "ellipsis", whiteSpace: "nowrap", overflowX: "hidden" },
+});
 /**
- * Well-known default built in extensions for the Inspector.
+ * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
+ * This component can handle both null and undefined values
+ * @param props
+ * @returns dropdown component
  */
-const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
-    // {
-    //     name: "Asset Creation",
-    //     description: "Adds new features to enable creating Babylon assets such as node materials, flow graphs, and more.",
-    //     keywords: ["creation"],
-    //     getExtensionModuleAsync: async () => await import("../services/creationToolsService"),
-    // },
-    {
-        name: "Export Tools",
-        description: "Adds new features to enable exporting Babylon assets such as .gltf, .glb, .babylon, and more.",
-        keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
-        ...BabylonWebResources,
-        author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./exportService-CB99mqRE.js'),
+const Dropdown = (props) => {
+    Dropdown.displayName = "Dropdown";
+    const classes = useDropdownStyles();
+    const { options, value } = props;
+    const [defaultVal, setDefaultVal] = useState(props.value);
+    const { size } = useContext(ToolContext);
+    useEffect(() => {
+        setDefaultVal(value);
+    }, [props.value]);
+    const id = useId("dropdown");
+    const mergedClassName = mergeClasses(classes.container, props.className);
+    const optionLabel = options.find((o) => o.value === defaultVal)?.label;
+    return (jsxs("div", { className: mergedClassName, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: size, className: classes.dropdown, button: jsx("span", { className: classes.dropdownText, children: optionLabel }), onOptionSelect: (evt, data) => {
+                    const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
+                    if (value !== undefined) {
+                        setDefaultVal(value);
+                        props.onChange(value);
+                    }
+                }, selectedOptions: [defaultVal.toString()], value: optionLabel, children: options.map((option) => (jsx(Option, { value: option.value.toString(), disabled: false, children: option.label }, option.label))) })] }));
+};
+const NumberDropdown = Dropdown;
+const StringDropdown = Dropdown;
+
+const useStyles$J = makeStyles({
+    surface: {
+        maxWidth: "400px",
     },
-    {
-        name: "Capture Tools",
-        description: "Adds new features to enable capturing screenshots, GIFs, videos, and more.",
-        keywords: ["capture", "screenshot", "gif", "video", "tools"],
-        ...BabylonWebResources,
-        author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-BvHqJq2V.js'),
+    content: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalM,
+        padding: tokens.spacingHorizontalL,
+        minWidth: "300px",
     },
-    {
-        name: "Import Tools",
-        description: "Adds new features related to importing Babylon assets.",
-        keywords: ["import", "tools"],
-        ...BabylonWebResources,
-        author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-BG3n3RAJ.js'),
+});
+const Popover = forwardRef((props, ref) => {
+    const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
+    const [internalOpen, setInternalOpen] = useState(false);
+    const classes = useStyles$J();
+    const isControlled = controlledOpen !== undefined;
+    const popoverOpen = isControlled ? controlledOpen : internalOpen;
+    const handleOpenChange = (_, data) => {
+        if (!isControlled) {
+            setInternalOpen(data.open);
+        }
+        onOpenChange?.(data.open);
+    };
+    return (jsxs(Popover$1, { open: popoverOpen, onOpenChange: handleOpenChange, positioning: positioning ?? {
+            align: "start",
+            overflowBoundary: document.body,
+            autoSize: true,
+        }, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: props.trigger ?? jsx(Button, { ref: ref, icon: props.icon, onClick: () => handleOpenChange(null, { open: true }) }) }), jsx(PopoverSurface, { className: surfaceClassName ?? classes.surface, children: jsx("div", { className: classes.content, children: children }) })] }));
+});
+Popover.displayName = "Popover";
+
+const useColorPickerStyles = makeStyles({
+    container: {
+        width: "350px",
+        display: "flex", // becomes a flexbox
+        flexDirection: "column", // with children in a column
+        alignItems: "center", // centers children horizontally
+        justifyContent: "center", // centers children vertically (if height is set)
+        gap: tokens.spacingVerticalM,
+        overflow: "visible",
     },
-    {
-        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,
-        author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-CBcmm2Zr.js'),
+    row: {
+        flex: 1, // is a row in the container's flex column
+        display: "flex", // becomes its own flexbox
+        flexDirection: "row", // with children in a row
+        gap: tokens.spacingHorizontalXL,
+        alignItems: "center", // align items vertically
+        width: "100%",
     },
-]);
-
-const SpinButton = (props) => {
-    SpinButton.displayName = "SpinButton";
-    const classes = useInputStyles$1();
+    colorPicker: {
+        flex: 1,
+        width: "350px",
+        height: "350px",
+    },
+    previewColor: {
+        width: "60px",
+        height: "60px",
+        borderRadius: tokens.borderRadiusMedium, // 4px?
+        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,
+        "@media (forced-colors: active)": {
+            forcedColorAdjust: "none", // ensures elmement maintains color in high constrast mode
+        },
+    },
+    inputRow: {
+        display: "flex",
+        flexDirection: "row",
+        flex: 1, // grow and fill available space
+        justifyContent: "center",
+        gap: "10px",
+        width: "100%",
+    },
+    inputField: {
+        flex: 1, // grow and fill available space
+        width: "auto",
+        minWidth: 0,
+        gap: tokens.spacingVerticalSNudge, // 6px
+    },
+    trigger: {
+        display: "flex",
+        alignItems: "center",
+    },
+});
+const ColorPickerPopup = forwardRef((props, ref) => {
+    ColorPickerPopup.displayName = "ColorPickerPopup";
+    const { value, onChange, isLinearMode, ...rest } = props;
+    const classes = useColorPickerStyles();
+    const [color, setColor] = useState(value);
+    const [isLinear, setIsLinear] = useState(isLinearMode ?? false);
+    const [isFloat, setFloat] = useState(false);
     const { size } = useContext(ToolContext);
-    const { min, max } = props;
-    const [value, setValue] = useState(props.value);
-    const lastCommittedValue = useRef(props.value);
-    // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin
-    const step = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;
-    const precision = Math.min(4, step !== undefined ? Math.max(0, CalculatePrecision(step)) : 2); // If no step, set precision to 2. Regardless, cap precision at 4 to avoid wild numbers
     useEffect(() => {
-        if (props.value !== lastCommittedValue.current) {
-            lastCommittedValue.current = props.value;
-            setValue(props.value); // Update local state when props.value changes
+        setColor(value); // Ensures the trigger color updates when props.value changes
+    }, [value]);
+    const handleColorPickerChange = (_, data) => {
+        let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
+        if (value instanceof Color4) {
+            color = Color4.FromColor3(color, data.color.a ?? 1);
         }
-    }, [props.value]);
-    const validateValue = (numericValue) => {
-        const outOfBounds = (min !== undefined && numericValue < min) || (max !== undefined && numericValue > max);
-        const failsValidator = props.validator && !props.validator(numericValue);
-        const failsIntCheck = props.forceInt ? !Number.isInteger(numericValue) : false;
-        const invalid = !!outOfBounds || !!failsValidator || isNaN(numericValue) || !!failsIntCheck;
-        return !invalid;
+        handleChange(color);
     };
-    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 = (newColor) => {
+        setColor(newColor);
+        onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
+    };
+    return (jsx(Popover, { trigger: jsx(ColorSwatch, { className: classes.trigger, ref: ref, ...rest, borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: color.toHexString(), value: color.toHexString().slice(1) }), children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                                label: "Color Space",
+                                info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
+                            }, options: [
+                                { label: "Gamma", value: 0 },
+                                { label: "Linear", value: 1 },
+                            ], disabled: true, value: isLinear ? 1 : 0, onChange: (val) => setIsLinear(val === 1) }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                                label: "Data Type",
+                                info: jsx(Body1, { children: "We will introduce this functionality soon!" }),
+                            }, options: [
+                                { label: "Int", value: 0 },
+                                { label: "Float", value: 1 },
+                            ], disabled: true, value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", linearHex: isLinear, isLinearMode: isLinear, value: color, onChange: handleChange }) })] }) }));
+});
+/**
+ * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
+ * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
+ *
+ * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space
+ * @param props - The properties for the InputHexField component.
+ * @returns
+ */
+const InputHexField = (props) => {
+    const classes = useColorPickerStyles();
+    const { title, value, onChange, linearHex, isLinearMode } = props;
+    return (jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: classes.inputField, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: ValidateColorHex, onChange: (val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val))), infoLabel: title
+            ? {
+                label: title,
+                // If not representing a linearHex, no info is needed.
+                info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled
+                jsx(Fragment, { children: " This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view " })) : (
+                // If representing a linear hex and we are in linearMode, give information about how to use these hex values
+                jsxs(Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), jsx("br", {}), "or", jsx("br", {}), jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), jsx("br", {}), jsx("br", {}), jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
+            }
+            : undefined }));
+};
+const InputRgbField = (props) => {
+    const { value, onChange, title, rgbKey } = props;
+    const classes = useColorPickerStyles();
+    const handleChange = useCallback((val) => {
+        const newColor = value.clone();
+        newColor[rgbKey] = val / 255.0; // Convert to 0-1 range
+        onChange(newColor);
+    }, [value, onChange, rgbKey]);
+    return (jsx(SpinButton, { title: title, infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: 255, value: Math.round(value[rgbKey] * 255), forceInt: true, onChange: handleChange }));
+};
+function rgbaToHsv(color) {
+    const c = new Color3(color.r, color.g, color.b);
+    const hsv = c.toHSV();
+    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };
+}
+/**
+ * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.
+ * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.
+ * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.
+ * @param props - The properties for the InputHsvField component.
+ */
+const InputHsvField = (props) => {
+    const { value, title, hsvKey, max, onChange, scale = 1 } = props;
+    const classes = useColorPickerStyles();
+    const handleChange = useCallback((val) => {
+        // Convert current color to HSV, update the new hsv value, then call onChange prop
+        const hsv = rgbaToHsv(value);
+        hsv[hsvKey] = val / scale;
+        let newColor = Color3.FromHSV(hsv.h, hsv.s, hsv.v);
+        if (value instanceof Color4) {
+            newColor = Color4.FromColor3(newColor, value.a ?? 1);
+        }
+        props.onChange(newColor);
+    }, [value, onChange, hsvKey, scale]);
+    return (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, title: title, className: classes.inputField, min: 0, max: max, value: Math.round(rgbaToHsv(value)[hsvKey] * scale), forceInt: true, onChange: handleChange }));
+};
+/**
+ * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).
+ * @param props
+ * @returns
+ */
+const InputAlphaField = (props) => {
+    const classes = useColorPickerStyles();
+    const { color, onChange } = props;
+    const handleChange = useCallback((value) => {
+        if (Number.isNaN(value) || value < 0 || value > 1) {
+            return;
         }
-    };
-    const handleChange = (event, data) => {
-        event.stopPropagation(); // Prevent event propagation
-        if (data.value != null && !Number.isNaN(data.value)) {
-            setValue(data.value);
-            tryCommitValue(data.value);
+        if (color instanceof Color4) {
+            const newColor = color.clone();
+            newColor.a = value;
+            return newColor;
         }
-    };
-    const handleKeyUp = (event) => {
-        event.stopPropagation(); // Prevent event propagation
-        if (event.key !== "Enter") {
-            const currVal = parseFloat(event.target.value); // Cannot use currentTarget.value as it won't have the most recently typed value
-            setValue(currVal);
-            tryCommitValue(currVal);
+        else {
+            return Color4.FromColor3(color, value);
         }
-    };
-    const id = useId("spin-button");
-    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
-    // Build input slot from inputClassName
-    const inputSlot = {
-        className: mergeClasses(classes.inputSlot, props.inputClassName),
-    };
-    const spinButton = (jsx(SpinButton$1, { ...props, appearance: "outline", input: inputSlot, step: step, id: id, size: size, precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName }));
-    return props.infoLabel ? (jsxs("div", { className: classes.container, children: [jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), spinButton] })) : (spinButton);
+    }, [onChange]);
+    return (jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.inputField, value: color instanceof Color3 ? 1 : color.a, step: 0.01, onChange: handleChange, infoLabel: {
+            label: "Alpha",
+            info: color instanceof Color3 ? (jsx(Fragment, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the entity's alpha property directly, either in code via entity.alpha OR via inspector's transparency section." })) : undefined,
+        } }));
 };
 
-const useSyncedSliderStyles = makeStyles({
-    container: { display: "flex", minWidth: 0 },
-    syncedSlider: {
-        flex: "1 1 0",
-        flexDirection: "row",
+const useStyles$I = makeStyles({
+    sidebar: {
         display: "flex",
+        flexDirection: "column",
+        width: "280px",
+        minWidth: "280px",
+        overflowY: "auto",
+        overflowX: "hidden",
+        borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+        backgroundColor: tokens.colorNeutralBackground1,
+    },
+    sidebarItem: {
+        display: "grid",
+        width: "100%",
+        minHeight: "30px",
+        padding: `${tokens.spacingVerticalXXS} 0`,
         alignItems: "center",
-        minWidth: 0,
     },
-    slider: {
-        flex: "1 1 auto",
-        minWidth: "75px",
-        maxWidth: "75px",
+    header: {
+        color: tokens.colorNeutralForeground1,
+        backgroundColor: tokens.colorBrandBackground,
+        gridTemplateColumns: "10px 9fr 1fr 8px",
     },
-    compactSlider: {
-        flex: "1 1 auto",
-        minWidth: "50px", // Allow shrinking for compact mode
-        maxWidth: "75px",
+    categoryHeader: {
+        backgroundColor: tokens.colorNeutralBackground4,
+        minHeight: "30px",
     },
-    growSlider: {
-        flex: "1 1 auto",
-        minWidth: "50px",
-        // No maxWidth - slider grows to fill available space
+    categoryColumn2: {
+        gridColumn: "2",
     },
-    compactSpinButton: {
-        width: "65px",
-        minWidth: "65px",
-        maxWidth: "65px",
+    categoryColumn3: {
+        gridColumn: "3",
+        display: "flex",
+        justifyContent: "end",
     },
-    compactSpinButtonInput: {
-        minWidth: "0",
+    measure: {
+        color: tokens.colorNeutralForeground1,
+        gridTemplateColumns: "4px 6fr 1fr 10px",
+    },
+    measureOdd: {
+        backgroundColor: tokens.colorNeutralBackground2,
+    },
+    measureEven: {
+        backgroundColor: tokens.colorNeutralBackground1,
+    },
+    measureCategory: {
+        display: "grid",
+        gridTemplateColumns: "auto 7px 18px 10px 1fr",
+        gridColumn: "2",
+        alignItems: "center",
+    },
+    measureColorPicker: {
+        gridColumn: "3",
+    },
+    measureLabel: {
+        gridColumn: "5",
+    },
+    measureValue: {
+        gridColumn: "3",
+        textAlign: "right",
     },
 });
-/**
- * Component which synchronizes a slider and an input field, allowing the user to change the value using either control
- * @param props
- * @returns SyncedSlider component
- */
-const SyncedSliderInput = (props) => {
-    SyncedSliderInput.displayName = "SyncedSliderInput";
-    const { infoLabel, ...passthroughProps } = props;
-    const classes = useSyncedSliderStyles();
-    const { size } = useContext(ToolContext);
-    const [value, setValue] = useState(props.value ?? 0);
-    const pendingValueRef = useRef(undefined);
-    const isDraggingRef = useRef(false);
-    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
-    // To avoid this, we scale the min/max based on the step so we can always make step undefined.
-    // The actual step size in the Fluent slider is 1 when it is ste to undefined.
-    const min = props.min ?? 0;
-    const max = props.max ?? 100;
-    const step = props.step ?? 1;
+const PerformanceSidebar = (props) => {
+    const { collector, onVisibleRangeChangedObservable } = props;
+    const classes = useStyles$I();
+    // Map from id to IPerfMetadata information
+    const [metadataMap, setMetadataMap] = useState();
+    // Map from category to all the ids belonging to that category
+    const [metadataCategoryId, setMetadataCategoryId] = useState();
+    // Count how many elements are checked for that category
+    const [metadataCategoryChecked, setMetadataCategoryChecked] = useState();
+    // List of ordered categories
+    const [metadataCategories, setMetadataCategories] = useState();
+    // Min/Max/Current values of the ids
+    const [valueMap, setValueMap] = useState();
     useEffect(() => {
-        !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging
-    }, [props.value]);
-    const handleSliderChange = (_, data) => {
-        const newValue = data.value * step;
-        setValue(newValue);
-        if (props.notifyOnlyOnRelease) {
-            // Store the value but don't notify parent yet
-            pendingValueRef.current = newValue;
-        }
-        else {
-            // Notify parent as slider changes
-            props.onChange(newValue);
-        }
-    };
-    const handleSliderPointerDown = () => {
-        isDraggingRef.current = true;
-    };
-    const handleSliderPointerUp = () => {
-        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
-            props.onChange(pendingValueRef.current);
-            pendingValueRef.current = undefined;
+        if (!onVisibleRangeChangedObservable) {
+            return;
         }
-        isDraggingRef.current = false;
-    };
-    const handleInputChange = (value) => {
-        setValue(value);
-        props.onChange(value); // Input always updates immediately
+        const observer = (observedProps) => {
+            setValueMap(observedProps.valueMap);
+        };
+        onVisibleRangeChangedObservable.add(observer);
+        return () => {
+            onVisibleRangeChangedObservable.removeCallback(observer);
+        };
+    }, [onVisibleRangeChangedObservable]);
+    useEffect(() => {
+        const onUpdateMetadata = (metadata) => {
+            const newCategoryIdMap = new Map();
+            const newCategoryCheckedMap = new Map();
+            metadata.forEach((value, id) => {
+                const currentCategory = value.category ?? "";
+                const currentIds = newCategoryIdMap.get(currentCategory) ?? [];
+                let currentChecked = newCategoryCheckedMap.get(currentCategory) ?? 0;
+                currentIds.push(id);
+                newCategoryIdMap.set(currentCategory, currentIds);
+                if (!value.hidden) {
+                    currentChecked += 1;
+                }
+                newCategoryCheckedMap.set(currentCategory, currentChecked);
+            });
+            const orderedCategories = Array.from(newCategoryIdMap.keys());
+            orderedCategories.sort();
+            setMetadataCategoryId(newCategoryIdMap);
+            setMetadataCategoryChecked(newCategoryCheckedMap);
+            setMetadataMap(metadata);
+            setMetadataCategories(orderedCategories);
+        };
+        collector.metadataObservable.add(onUpdateMetadata);
+        return () => {
+            collector.metadataObservable.removeCallback(onUpdateMetadata);
+        };
+    }, [collector]);
+    const onCheckChange = (id) => (selected) => {
+        collector.updateMetadata(id, "hidden", !selected);
     };
-    const hasSlider = props.min !== undefined && props.max !== undefined;
-    // Determine Slider className based on props
-    const getSliderClassName = () => {
-        if (props.growSlider) {
-            return classes.growSlider;
+    const onCheckAllChange = (category) => (selected) => {
+        const categoryIds = metadataCategoryId?.get(category);
+        if (!categoryIds) {
+            return;
         }
-        if (props.compact) {
-            return classes.compactSlider;
+        for (const id of categoryIds) {
+            collector.updateMetadata(id, "hidden", !selected);
         }
-        return classes.slider;
     };
-    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { ...passthroughProps, className: getSliderClassName(), size: size, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: hasSlider || props.compact ? classes.compactSpinButton : undefined, inputClassName: hasSlider || props.compact ? classes.compactSpinButtonInput : undefined, value: value, onChange: handleInputChange, step: props.step })] })] }));
+    const onColorChange = (id) => (color) => {
+        collector.updateMetadata(id, "color", color.toHexString());
+    };
+    return (jsx("div", { className: classes.sidebar, children: metadataCategories &&
+            metadataCategories.map((category) => (jsxs("div", { children: [category ? (jsxs("div", { className: mergeClasses(classes.sidebarItem, classes.header, classes.categoryHeader), children: [jsx(Subtitle2Stronger, { className: classes.categoryColumn2, children: category }), jsx("div", { className: classes.categoryColumn3, children: jsx(Switch, { value: metadataCategoryChecked?.get(category) === metadataCategoryId?.get(category)?.length, onChange: onCheckAllChange(category) }) })] }, `header-${category}`)) : null, metadataCategoryId?.get(category)?.map((id, index) => {
+                        const metadata = metadataMap?.get(id);
+                        const range = valueMap?.get(id);
+                        return (metadata && (jsxs("div", { className: mergeClasses(classes.sidebarItem, classes.measure, index % 2 === 0 ? classes.measureEven : classes.measureOdd), children: [jsxs("div", { className: classes.measureCategory, children: [jsx(Switch, { value: !metadata.hidden, onChange: onCheckChange(id) }), jsx("div", { className: classes.measureColorPicker, children: jsx(ColorPickerPopup, { value: Color3.FromHexString(metadata.color ?? "#000"), onChange: onColorChange(id) }) }), jsx(Body1, { className: classes.measureLabel, children: id })] }), range && jsxs("div", { className: classes.measureValue, children: [" ", ((range.min + range.max) / 2).toFixed(2), " "] })] }, `perf-sidebar-item-${id}`)));
+                    })] }, `category-${category || "version"}`))) }));
 };
 
-/**
- * Renders a simple wrapper around the SyncedSliderInput
- * @param props
- * @returns
- */
-const SyncedSliderPropertyLine = forwardRef((props, ref) => {
-    SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
-    const { label, description, ...sliderProps } = props;
-    return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
+const useStyles$H = makeStyles({
+    container: {
+        display: "flex",
+        flexDirection: "row",
+        height: "100%",
+        width: "100%",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        overflow: "hidden",
+    },
+    returnButton: {
+        position: "absolute",
+        top: "10px",
+        right: "10px",
+        zIndex: 10,
+    },
+    sidebar: {
+        flex: "0 0 auto",
+        overflowY: "auto",
+        overflowX: "hidden",
+    },
+    graph: {
+        flex: "1 1 auto",
+        position: "relative",
+        backgroundColor: tokens.colorNeutralBackground1,
+        overflow: "hidden",
+    },
 });
-
-const TextInput = (props) => {
-    TextInput.displayName = "TextInput";
-    const classes = useInputStyles$1();
-    const [value, setValue] = useState(props.value);
-    const lastCommittedValue = useRef(props.value);
-    const { size } = useContext(ToolContext);
-    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);
-        if (!props.validateOnlyOnBlur) {
-            tryCommitValue(data.value);
-        }
+const PerformanceViewer = (props) => {
+    const { scene, layoutObservable, returnToLiveObservable, performanceCollector, initialGraphSize } = props;
+    const classes = useStyles$H();
+    const [onVisibleRangeChangedObservable] = useState(() => new Observable());
+    const onReturnToPlayheadClick = () => {
+        returnToLiveObservable.notifyObservers();
     };
-    const handleKeyUp = (event) => {
-        event.stopPropagation();
-        if (!props.validateOnlyOnBlur) {
-            tryCommitValue(event.currentTarget.value);
+    return (jsxs("div", { className: classes.container, children: [jsx(Button, { className: classes.returnButton, onClick: onReturnToPlayheadClick, label: "Return", title: "Return to Playhead" }), jsx("div", { className: classes.sidebar, children: jsx(PerformanceSidebar, { collector: performanceCollector, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable }) }), jsx("div", { className: classes.graph, children: jsx(CanvasGraph, { returnToPlayheadObservable: returnToLiveObservable, layoutObservable: layoutObservable, scene: scene, collector: performanceCollector, onVisibleRangeChangedObservable: onVisibleRangeChangedObservable, initialGraphSize: initialGraphSize }) })] }));
+};
+
+function AddStrategies(perfCollector) {
+    perfCollector.addCollectionStrategies(...DefaultStrategiesList);
+    if (PressureObserverWrapper.IsAvailable) {
+        // Do not enable for now as the Pressure API does not
+        // report factors at the moment.
+        // perfCollector.addCollectionStrategies({
+        //     strategyCallback: PerfCollectionStrategy.ThermalStrategy(),
+        //     category: IPerfMetadataCategory.FrameSteps,
+        //     hidden: true,
+        // });
+        // perfCollector.addCollectionStrategies({
+        //     strategyCallback: PerfCollectionStrategy.PowerSupplyStrategy(),
+        //     category: IPerfMetadataCategory.FrameSteps,
+        //     hidden: true,
+        // });
+        perfCollector.addCollectionStrategies({
+            strategyCallback: PerfCollectionStrategy.PressureStrategy(),
+            category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */,
+            hidden: true,
+        });
+    }
+}
+var PerfMetadataCategory;
+(function (PerfMetadataCategory) {
+    PerfMetadataCategory["Count"] = "Count";
+    PerfMetadataCategory["FrameSteps"] = "Frame Steps Duration";
+})(PerfMetadataCategory || (PerfMetadataCategory = {}));
+// list of strategies to add to perf graph automatically.
+const DefaultStrategiesList = [
+    { strategyCallback: PerfCollectionStrategy.FpsStrategy() },
+    { strategyCallback: PerfCollectionStrategy.TotalMeshesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.ActiveMeshesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.ActiveIndicesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.ActiveBonesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.ActiveParticlesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.DrawCallsStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.TotalLightsStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.TotalVerticesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.TotalMaterialsStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.TotalTexturesStrategy(), category: "Count" /* PerfMetadataCategory.Count */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.AbsoluteFpsStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.MeshesSelectionStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.RenderTargetsStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.ParticlesStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.SpritesStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.AnimationsStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.PhysicsStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.RenderStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.FrameTotalStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.InterFrameStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+    { strategyCallback: PerfCollectionStrategy.GpuFrameTimeStrategy(), category: "Frame Steps Duration" /* PerfMetadataCategory.FrameSteps */, hidden: true },
+];
+// arbitrary window size
+const InitialWindowSize = { width: 1024, height: 512 };
+const InitialGraphSize = new Vector2(724, 512);
+const PerformanceStats = ({ context: scene }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isRecording, setIsRecording] = useState(false);
+    const [isLoadedFromCsv, setIsLoadedFromCsv] = useState(false);
+    const [performanceCollector, setPerformanceCollector] = useState();
+    const [layoutObservable] = useState(() => new Observable());
+    const [returnToLiveObservable] = useState(() => new Observable());
+    const childWindowRef = useRef(null);
+    useEffect(() => {
+        if (!isLoadedFromCsv) {
+            if (performanceCollector) {
+                setIsRecording(false);
+                performanceCollector.stop();
+                performanceCollector.clear(false);
+                AddStrategies(performanceCollector);
+            }
         }
+    }, [isLoadedFromCsv, performanceCollector]);
+    const onClosePerformanceViewer = useCallback(() => {
+        setIsLoadedFromCsv(false);
+        setIsOpen(false);
+    }, []);
+    const onResize = useCallback((childWindow) => {
+        const width = childWindow?.innerWidth ?? 0;
+        const height = childWindow?.innerHeight ?? 0;
+        layoutObservable.notifyObservers({ width, height });
+    }, [layoutObservable]);
+    const startPerformanceViewerPopup = useCallback(() => {
+        if (performanceCollector && childWindowRef.current) {
+            childWindowRef.current.open({
+                defaultWidth: InitialWindowSize.width,
+                defaultHeight: InitialWindowSize.height,
+                title: "Realtime Performance Viewer",
+            });
+        }
+    }, [performanceCollector]);
+    const onPerformanceButtonClick = () => {
+        setIsOpen(true);
+        setIsRecording(true);
+        performanceCollector?.start(true);
+        startPerformanceViewerPopup();
     };
-    const handleBlur = (event) => {
-        HandleOnBlur(event);
-        if (props.validateOnlyOnBlur) {
-            tryCommitValue(event.currentTarget.value);
+    const onLoadClick = (fileList) => {
+        Tools.ReadFile(fileList[0], (data) => {
+            // reopen window and load data!
+            setIsOpen(false);
+            setIsLoadedFromCsv(true);
+            setIsRecording(false);
+            performanceCollector?.stop();
+            const isValid = performanceCollector?.loadFromFileData(data);
+            if (!isValid) {
+                // if our data isn't valid we close the window.
+                setIsOpen(false);
+                setIsRecording(true);
+                performanceCollector?.start(true);
+            }
+            else {
+                startPerformanceViewerPopup();
+            }
+        });
+    };
+    const onExportClick = () => {
+        performanceCollector?.exportDataToCsv();
+    };
+    const onToggleRecording = () => {
+        if (performanceCollector) {
+            if (!performanceCollector.isStarted) {
+                setIsRecording(true);
+                performanceCollector.start(true);
+            }
+            else {
+                setIsRecording(false);
+                performanceCollector.stop();
+            }
         }
     };
-    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
-    const id = useId("input-button");
-    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: handleBlur, className: mergedClassName })] }));
+    useEffect(() => {
+        const perfCollector = scene.getPerfCollector();
+        AddStrategies(perfCollector);
+        setPerformanceCollector(perfCollector);
+    }, [scene]);
+    // Handle child window resize
+    useEffect(() => {
+        const handleResize = () => {
+            const win = window;
+            if (win) {
+                onResize(win);
+            }
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [onResize]);
+    return (jsxs(Fragment, { children: [!isOpen && jsx(ButtonLine, { label: "Open Realtime Perf Viewer", onClick: onPerformanceButtonClick }), !isOpen && jsx(FileUploadLine, { label: "Load Perf Viewer using CSV", accept: ".csv", onClick: onLoadClick }), jsx(ButtonLine, { label: "Export Perf to CSV", icon: ArrowDownloadRegular, onClick: onExportClick }), !isOpen && jsx(ButtonLine, { label: isRecording ? "Stop Recording" : "Begin Recording", icon: isRecording ? StopRegular : RecordRegular, onClick: onToggleRecording }), jsx(ChildWindow, { id: "performance-viewer", imperativeRef: childWindowRef, onOpenChange: (open) => !open && onClosePerformanceViewer(), children: performanceCollector && (jsx(PerformanceViewer, { scene: scene, layoutObservable: layoutObservable, returnToLiveObservable: returnToLiveObservable, performanceCollector: performanceCollector, initialGraphSize: InitialGraphSize })) })] }));
 };
 
-const useDropdownStyles = makeStyles({
-    dropdown: {
-        minWidth: 0,
-        width: "100%",
-    },
-    container: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center", // align items vertically
+/**
+ * Wraps text in a property line
+ * @param props - PropertyLineProps and TextProps
+ * @returns property-line wrapped text
+ */
+const TextPropertyLine = (props) => {
+    TextPropertyLine.displayName = "TextPropertyLine";
+    const { value, title } = props;
+    return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value ?? "" }) }));
+};
+
+const useStyles$G = makeStyles({
+    pinnedStatsPane: {
+        flex: "0 1 auto",
+        paddingBottom: tokens.spacingHorizontalM,
     },
-    dropdownText: { textAlign: "end", textOverflow: "ellipsis", whiteSpace: "nowrap", overflowX: "hidden" },
 });
+const StatsPane = (props) => {
+    const classes = useStyles$G();
+    const scene = props.context;
+    const engine = scene.getEngine();
+    const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
+    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 })] }));
+};
+
 /**
- * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
- * This component can handle both null and undefined values
- * @param props
- * @returns dropdown component
+ * Displays an icon indicating enabled (green check) or disabled (red cross) state
+ * @param props - The properties for the PropertyLine, including the boolean value to display.
+ * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.
  */
-const Dropdown = (props) => {
-    Dropdown.displayName = "Dropdown";
-    const classes = useDropdownStyles();
-    const { options, value } = props;
-    const [defaultVal, setDefaultVal] = useState(props.value);
-    const { size } = useContext(ToolContext);
-    useEffect(() => {
-        setDefaultVal(value);
-    }, [props.value]);
-    const id = useId("dropdown");
-    const mergedClassName = mergeClasses(classes.container, props.className);
-    const optionLabel = options.find((o) => o.value === defaultVal)?.label;
-    return (jsxs("div", { className: mergedClassName, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: size, className: classes.dropdown, button: jsx("span", { className: classes.dropdownText, children: optionLabel }), onOptionSelect: (evt, data) => {
-                    const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
-                    if (value !== undefined) {
-                        setDefaultVal(value);
-                        props.onChange(value);
-                    }
-                }, selectedOptions: [defaultVal.toString()], value: optionLabel, children: options.map((option) => (jsx(Option, { value: option.value.toString(), disabled: false, children: option.label }, option.label))) })] }));
+const BooleanBadgePropertyLine = (props) => {
+    BooleanBadgePropertyLine.displayName = "BooleanBadgePropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
 };
-const NumberDropdown = Dropdown;
-const StringDropdown = Dropdown;
 
-const useStyles$G = makeStyles({
-    surface: {
-        maxWidth: "400px",
+const SystemStats = ({ context: scene }) => {
+    const engine = scene.getEngine();
+    const caps = engine.getCaps();
+    const resolution = useObservableState(() => `${engine.getRenderWidth()} x ${engine.getRenderHeight()}`, engine.onResizeObservable);
+    const hardwareScalingLevel = useObservableState(() => engine.getHardwareScalingLevel(), engine.onResizeObservable);
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Resolution", value: resolution }, "Resolution"), jsx(StringifiedPropertyLine, { label: "Hardware Scaling Level", value: hardwareScalingLevel }, "HardwareScalingLevel"), jsx(TextPropertyLine, { label: "Engine", value: engine.description }, "Engine"), jsx(BooleanBadgePropertyLine, { label: "StdDerivatives", value: caps.standardDerivatives }, "StdDerivatives"), jsx(BooleanBadgePropertyLine, { label: "Compressed Textures", value: caps.s3tc !== undefined }, "CompressedTextures"), jsx(BooleanBadgePropertyLine, { label: "Hardware Instances", value: caps.instancedArrays }, "HardwareInstances"), jsx(BooleanBadgePropertyLine, { label: "Texture Float", value: caps.textureFloat }, "TextureFloat"), jsx(BooleanBadgePropertyLine, { label: "Texture Half Float", value: caps.textureHalfFloat }, "TextureHalfFloat"), jsx(BooleanBadgePropertyLine, { label: "Render to Texture Float", value: caps.textureFloatRender }, "RenderToTextureFloat"), jsx(BooleanBadgePropertyLine, { label: "Render to Texture Half Float", value: caps.textureHalfFloatRender }, "RenderToTextureHalfFloat"), jsx(BooleanBadgePropertyLine, { label: "32bits Indices", value: caps.uintIndices }, "32bitsIndices"), jsx(BooleanBadgePropertyLine, { label: "Fragment Depth", value: caps.fragmentDepthSupported }, "FragmentDepth"), jsx(BooleanBadgePropertyLine, { label: "High Precision Shaders", value: caps.highPrecisionShaderSupported }, "HighPrecisionShaders"), jsx(BooleanBadgePropertyLine, { label: "Draw Buffers", value: caps.drawBuffersExtension }, "DrawBuffers"), jsx(BooleanBadgePropertyLine, { label: "Vertex Array Object", value: caps.vertexArrayObject }, "VertexArrayObject"), jsx(BooleanBadgePropertyLine, { label: "Timer Query", value: caps.timerQuery !== undefined }, "TimerQuery"), jsx(BooleanBadgePropertyLine, { label: "Stencil", value: engine.isStencilEnable }, "Stencil"), jsx(BooleanBadgePropertyLine, { label: "Parallel Shader Compilation", value: caps.parallelShaderCompile != null }, "ParallelShaderCompilation"), jsx(StringifiedPropertyLine, { label: "Max Textures Units", value: caps.maxTexturesImageUnits }, "MaxTexturesUnits"), jsx(StringifiedPropertyLine, { label: "Max Textures Size", value: caps.maxTextureSize }, "MaxTexturesSize"), jsx(StringifiedPropertyLine, { label: "Max Anisotropy", value: caps.maxAnisotropy }, "MaxAnisotropy"), jsx(TextPropertyLine, { label: "Driver", value: engine.extractDriverInfo() }, "Driver")] }));
+};
+
+const StatsServiceIdentity = Symbol("StatsService");
+/**
+ * Provides a scene stats pane.
+ */
+const StatsServiceDefinition = {
+    friendlyName: "Stats",
+    produces: [StatsServiceIdentity],
+    consumes: [ShellServiceIdentity, SceneContextIdentity],
+    factory: (shellService, sceneContext) => {
+        const sectionsCollection = new ObservableCollection();
+        const sectionContentCollection = new ObservableCollection();
+        const registration = shellService.addSidePane({
+            key: "Statistics",
+            title: "Statistics",
+            icon: DataBarHorizontalRegular,
+            horizontalLocation: "right",
+            verticalLocation: "top",
+            order: 300,
+            suppressTeachingMoment: true,
+            content: () => {
+                const sections = useOrderedObservableCollection(sectionsCollection);
+                const sectionContent = useObservableCollection(sectionContentCollection);
+                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
+                return jsx(Fragment, { children: scene && jsx(StatsPane, { sections: sections, sectionContent: sectionContent, context: scene }) });
+            },
+        });
+        // Default/built-in sections.
+        sectionsCollection.add({
+            identity: "Performance",
+            order: 0,
+        });
+        sectionsCollection.add({
+            identity: "Count",
+            order: 1,
+        });
+        sectionsCollection.add({
+            identity: "Frame Steps Duration",
+            order: 2,
+        });
+        sectionsCollection.add({
+            identity: "System Info",
+            order: 3,
+        });
+        // Default/built-in content.
+        sectionContentCollection.add({
+            key: "DefaultPerfStats",
+            section: "Performance",
+            order: 0,
+            component: PerformanceStats,
+        });
+        sectionContentCollection.add({
+            key: "DefaultCountStats",
+            section: "Count",
+            order: 1,
+            component: CountStats,
+        });
+        sectionContentCollection.add({
+            key: "DefaultFrameStats",
+            section: "Frame Steps Duration",
+            order: 2,
+            component: FrameStepsStats,
+        });
+        sectionContentCollection.add({
+            key: "DefaultSystemStats",
+            section: "System Info",
+            order: 3,
+            component: SystemStats,
+        });
+        return {
+            addSection: (section) => sectionsCollection.add(section),
+            addSectionContent: (content) => sectionContentCollection.add(content),
+            dispose: () => registration.dispose(),
+        };
+    },
+};
+
+const ToolsPane = (props) => {
+    return jsx(ExtensibleAccordion, { ...props });
+};
+
+const ToolsServiceIdentity = Symbol("ToolsService");
+/**
+ * A collection of usually optional, dynamic extensions.
+ * Common examples includes importing/exporting, or other general creation tools.
+ */
+const ToolsServiceDefinition = {
+    friendlyName: "Tools Editor",
+    produces: [ToolsServiceIdentity],
+    consumes: [ShellServiceIdentity, SceneContextIdentity],
+    factory: (shellService, sceneContext) => {
+        const sectionsCollection = new ObservableCollection();
+        const sectionContentCollection = new ObservableCollection();
+        // Only show the Tools pane if some tool content has been added.
+        let toolsPaneRegistration = null;
+        sectionContentCollection.observable.add(() => {
+            if (sectionContentCollection.items.length === 0) {
+                toolsPaneRegistration?.dispose();
+                toolsPaneRegistration = null;
+            }
+            else if (!toolsPaneRegistration) {
+                toolsPaneRegistration = shellService.addSidePane({
+                    key: "Tools",
+                    title: "Tools",
+                    icon: WrenchRegular,
+                    horizontalLocation: "right",
+                    verticalLocation: "top",
+                    order: 400,
+                    suppressTeachingMoment: true,
+                    content: () => {
+                        const sections = useOrderedObservableCollection(sectionsCollection);
+                        const sectionContent = useObservableCollection(sectionContentCollection);
+                        const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
+                        return scene && jsx(ToolsPane, { sections: sections, sectionContent: sectionContent, context: scene });
+                    },
+                });
+            }
+        });
+        return {
+            addSection: (section) => sectionsCollection.add(section),
+            addSectionContent: (content) => sectionContentCollection.add(content),
+            dispose: () => toolsPaneRegistration?.dispose(),
+        };
+    },
+};
+
+const BabylonWebResources = {
+    homepage: "https://www.babylonjs.com",
+    repository: "https://github.com/BabylonJS/Babylon.js",
+    bugs: "https://github.com/BabylonJS/Babylon.js/issues",
+};
+/**
+ * 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,
+        author: { name: "Babylon.js", forumUserName: "" },
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-XuuTpQe7.js'),
     },
-    content: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacingVerticalM,
-        padding: tokens.spacingHorizontalL,
-        minWidth: "300px",
+    {
+        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,
+        author: { name: "Babylon.js", forumUserName: "" },
+        getExtensionModuleAsync: async () => await import('./reflectorService-ChA54PIt.js'),
     },
-});
-const Popover = forwardRef((props, ref) => {
-    const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
-    const [internalOpen, setInternalOpen] = useState(false);
-    const classes = useStyles$G();
-    const isControlled = controlledOpen !== undefined;
-    const popoverOpen = isControlled ? controlledOpen : internalOpen;
-    const handleOpenChange = (_, data) => {
-        if (!isControlled) {
-            setInternalOpen(data.open);
-        }
-        onOpenChange?.(data.open);
-    };
-    return (jsxs(Popover$1, { open: popoverOpen, onOpenChange: handleOpenChange, positioning: positioning ?? {
-            align: "start",
-            overflowBoundary: document.body,
-            autoSize: true,
-        }, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: props.trigger ?? jsx(Button, { ref: ref, icon: props.icon, onClick: () => handleOpenChange(null, { open: true }) }) }), jsx(PopoverSurface, { className: surfaceClassName ?? classes.surface, children: jsx("div", { className: classes.content, children: children }) })] }));
-});
-Popover.displayName = "Popover";
+]);
 
-const useColorPickerStyles = makeStyles({
-    container: {
-        width: "350px",
-        display: "flex", // becomes a flexbox
-        flexDirection: "column", // with children in a column
-        alignItems: "center", // centers children horizontally
-        justifyContent: "center", // centers children vertically (if height is set)
-        gap: tokens.spacingVerticalM,
-        overflow: "visible",
-    },
-    row: {
-        flex: 1, // is a row in the container's flex column
-        display: "flex", // becomes its own flexbox
-        flexDirection: "row", // with children in a row
-        gap: tokens.spacingHorizontalXL,
-        alignItems: "center", // align items vertically
-        width: "100%",
+const useSyncedSliderStyles = makeStyles({
+    container: { display: "flex", minWidth: 0 },
+    syncedSlider: {
+        flex: "1 1 0",
+        flexDirection: "row",
+        display: "flex",
+        alignItems: "center",
+        minWidth: 0,
     },
-    colorPicker: {
-        flex: 1,
-        width: "350px",
-        height: "350px",
+    slider: {
+        flex: "1 1 auto",
+        minWidth: "75px",
+        maxWidth: "75px",
     },
-    previewColor: {
-        width: "60px",
-        height: "60px",
-        borderRadius: tokens.borderRadiusMedium, // 4px?
-        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,
-        "@media (forced-colors: active)": {
-            forcedColorAdjust: "none", // ensures elmement maintains color in high constrast mode
-        },
+    compactSlider: {
+        flex: "1 1 auto",
+        minWidth: "50px", // Allow shrinking for compact mode
+        maxWidth: "75px",
     },
-    inputRow: {
-        display: "flex",
-        flexDirection: "row",
-        flex: 1, // grow and fill available space
-        justifyContent: "center",
-        gap: "10px",
-        width: "100%",
+    growSlider: {
+        flex: "1 1 auto",
+        minWidth: "50px",
+        // No maxWidth - slider grows to fill available space
     },
-    inputField: {
-        flex: 1, // grow and fill available space
-        width: "auto",
-        minWidth: 0,
-        gap: tokens.spacingVerticalSNudge, // 6px
+    compactSpinButton: {
+        width: "65px",
+        minWidth: "65px",
+        maxWidth: "65px",
     },
-    trigger: {
-        display: "flex",
-        alignItems: "center",
+    compactSpinButtonInput: {
+        minWidth: "0",
     },
 });
-const ColorPickerPopup = forwardRef((props, ref) => {
-    ColorPickerPopup.displayName = "ColorPickerPopup";
-    const { value, onChange, isLinearMode, ...rest } = props;
-    const classes = useColorPickerStyles();
-    const [color, setColor] = useState(value);
-    const [isLinear, setIsLinear] = useState(isLinearMode ?? false);
-    const [isFloat, setFloat] = useState(false);
+/**
+ * Component which synchronizes a slider and an input field, allowing the user to change the value using either control
+ * @param props
+ * @returns SyncedSlider component
+ */
+const SyncedSliderInput = (props) => {
+    SyncedSliderInput.displayName = "SyncedSliderInput";
+    const { infoLabel, ...passthroughProps } = props;
+    const classes = useSyncedSliderStyles();
     const { size } = useContext(ToolContext);
+    const [value, setValue] = useState(props.value ?? 0);
+    const pendingValueRef = useRef(undefined);
+    const isDraggingRef = useRef(false);
+    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
+    // To avoid this, we scale the min/max based on the step so we can always make step undefined.
+    // The actual step size in the Fluent slider is 1 when it is ste to undefined.
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const step = props.step ?? 1;
     useEffect(() => {
-        setColor(value); // Ensures the trigger color updates when props.value changes
-    }, [value]);
-    const handleColorPickerChange = (_, data) => {
-        let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
-        if (value instanceof Color4) {
-            color = Color4.FromColor3(color, data.color.a ?? 1);
+        !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging
+    }, [props.value]);
+    const handleSliderChange = (_, data) => {
+        const newValue = data.value * step;
+        setValue(newValue);
+        if (props.notifyOnlyOnRelease) {
+            // Store the value but don't notify parent yet
+            pendingValueRef.current = newValue;
+        }
+        else {
+            // Notify parent as slider changes
+            props.onChange(newValue);
         }
-        handleChange(color);
     };
-    const handleChange = (newColor) => {
-        setColor(newColor);
-        onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
+    const handleSliderPointerDown = () => {
+        isDraggingRef.current = true;
     };
-    return (jsx(Popover, { trigger: jsx(ColorSwatch, { className: classes.trigger, ref: ref, ...rest, borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: color.toHexString(), value: color.toHexString().slice(1) }), children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
-                                label: "Color Space",
-                                info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
-                            }, options: [
-                                { label: "Gamma", value: 0 },
-                                { label: "Linear", value: 1 },
-                            ], disabled: true, value: isLinear ? 1 : 0, onChange: (val) => setIsLinear(val === 1) }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
-                                label: "Data Type",
-                                info: jsx(Body1, { children: "We will introduce this functionality soon!" }),
-                            }, options: [
-                                { label: "Int", value: 0 },
-                                { label: "Float", value: 1 },
-                            ], disabled: true, value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", linearHex: isLinear, isLinearMode: isLinear, value: color, onChange: handleChange }) })] }) }));
-});
-/**
- * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
- * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
- *
- * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space
- * @param props - The properties for the InputHexField component.
- * @returns
- */
-const InputHexField = (props) => {
-    const classes = useColorPickerStyles();
-    const { title, value, onChange, linearHex, isLinearMode } = props;
-    return (jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: classes.inputField, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: ValidateColorHex, onChange: (val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val))), infoLabel: title
-            ? {
-                label: title,
-                // If not representing a linearHex, no info is needed.
-                info: !props.linearHex ? undefined : !isLinearMode ? ( // If representing a linear hex but we are in gammaMode, simple message explaining why linearHex is disabled
-                jsx(Fragment, { children: " This color picker is attached to an entity whose color is stored in gamma space, so we are showing linear hex in disabled view " })) : (
-                // If representing a linear hex and we are in linearMode, give information about how to use these hex values
-                jsxs(Fragment, { children: ["This color picker is attached to an entity whose color is stored in linear space (ex: PBR Material), and Babylon converts the color to gamma space before rendering on screen because the human eye is best at processing colors in gamma space. We thus also want to display the color picker in gamma space so that the color chosen here will match the color seen in your entity.", jsx("br", {}), "If you want to copy/paste the HEX into your code, you can either use", jsx(Body1Strong, { children: "Color3.FromHexString(LINEAR_HEX)" }), jsx("br", {}), "or", jsx("br", {}), jsx(Body1Strong, { children: "Color3.FromHexString(GAMMA_HEX).toLinearSpace()" }), jsx("br", {}), jsx("br", {}), jsx(Link, { url: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", value: "Read more in our docs!" })] })),
-            }
-            : undefined }));
-};
-const InputRgbField = (props) => {
-    const { value, onChange, title, rgbKey } = props;
-    const classes = useColorPickerStyles();
-    const handleChange = useCallback((val) => {
-        const newColor = value.clone();
-        newColor[rgbKey] = val / 255.0; // Convert to 0-1 range
-        onChange(newColor);
-    }, [value, onChange, rgbKey]);
-    return (jsx(SpinButton, { title: title, infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: 255, value: Math.round(value[rgbKey] * 255), forceInt: true, onChange: handleChange }));
-};
-function rgbaToHsv(color) {
-    const c = new Color3(color.r, color.g, color.b);
-    const hsv = c.toHSV();
-    return { h: hsv.r, s: hsv.g, v: hsv.b, a: color.a };
-}
-/**
- * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel.
- * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color.
- * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest.
- * @param props - The properties for the InputHsvField component.
- */
-const InputHsvField = (props) => {
-    const { value, title, hsvKey, max, onChange, scale = 1 } = props;
-    const classes = useColorPickerStyles();
-    const handleChange = useCallback((val) => {
-        // Convert current color to HSV, update the new hsv value, then call onChange prop
-        const hsv = rgbaToHsv(value);
-        hsv[hsvKey] = val / scale;
-        let newColor = Color3.FromHSV(hsv.h, hsv.s, hsv.v);
-        if (value instanceof Color4) {
-            newColor = Color4.FromColor3(newColor, value.a ?? 1);
-        }
-        props.onChange(newColor);
-    }, [value, onChange, hsvKey, scale]);
-    return (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, title: title, className: classes.inputField, min: 0, max: max, value: Math.round(rgbaToHsv(value)[hsvKey] * scale), forceInt: true, onChange: handleChange }));
-};
-/**
- * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).
- * @param props
- * @returns
- */
-const InputAlphaField = (props) => {
-    const classes = useColorPickerStyles();
-    const { color, onChange } = props;
-    const handleChange = useCallback((value) => {
-        if (Number.isNaN(value) || value < 0 || value > 1) {
-            return;
+    const handleSliderPointerUp = () => {
+        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
+            props.onChange(pendingValueRef.current);
+            pendingValueRef.current = undefined;
         }
-        if (color instanceof Color4) {
-            const newColor = color.clone();
-            newColor.a = value;
-            return newColor;
+        isDraggingRef.current = false;
+    };
+    const handleInputChange = (value) => {
+        setValue(value);
+        props.onChange(value); // Input always updates immediately
+    };
+    const hasSlider = props.min !== undefined && props.max !== undefined;
+    // Determine Slider className based on props
+    const getSliderClassName = () => {
+        if (props.growSlider) {
+            return classes.growSlider;
         }
-        else {
-            return Color4.FromColor3(color, value);
+        if (props.compact) {
+            return classes.compactSlider;
         }
-    }, [onChange]);
-    return (jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.inputField, value: color instanceof Color3 ? 1 : color.a, step: 0.01, onChange: handleChange, infoLabel: {
-            label: "Alpha",
-            info: color instanceof Color3 ? (jsx(Fragment, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the entity's alpha property directly, either in code via entity.alpha OR via inspector's transparency section." })) : undefined,
-        } }));
+        return classes.slider;
+    };
+    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { ...passthroughProps, className: getSliderClassName(), size: size, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: hasSlider || props.compact ? classes.compactSpinButton : undefined, inputClassName: hasSlider || props.compact ? classes.compactSpinButtonInput : undefined, value: value, onChange: handleInputChange, step: props.step })] })] }));
 };
 
+/**
+ * Renders a simple wrapper around the SyncedSliderInput
+ * @param props
+ * @returns
+ */
+const SyncedSliderPropertyLine = forwardRef((props, ref) => {
+    SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
+    const { label, description, ...sliderProps } = props;
+    return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
+});
+
 /**
  * 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
@@ -5373,7 +6685,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-Dsui74Id.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-Cze-L8Cg.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -9240,7 +10552,7 @@ const MessageBar = (props) => {
     MessageBar.displayName = "MessageBar";
     const { message, title: header, intent, docLink } = props;
     const classes = useClasses();
-    return (jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [jsx(MessageBarTitle, { children: header }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }));
+    return (jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [header && jsx(MessageBarTitle, { children: header }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }));
 };
 
 const AnimationsProperties = (props) => {
@@ -9759,7 +11071,7 @@ const FrameGraphTaskProperties = (props) => {
     const tasks = frameGraph.tasks;
     return (jsx(Fragment, { children: tasks.length > 0 &&
             tasks.map((task, i) => {
-                return (jsx(BoundProperty, { component: SwitchPropertyLine, label: i + 1 + ". " + task.name, target: frameGraph.tasks[i], propertyKey: "disabled", invertedMode: true }, "task" + i));
+                return (jsx(BoundProperty, { component: SwitchPropertyLine, label: i + 1 + ". " + task.name, target: frameGraph.tasks[i], propertyKey: "disabled", convertTo: (v) => !v, convertFrom: (v) => !v }, "task" + i));
             }) }));
 };
 const FrameGraphGeneralProperties = (props) => {
@@ -10194,7 +11506,7 @@ function List(props) {
     const { items, renderItem, onDelete, onAdd, addButtonLabel = "Add new item" } = props;
     const classes = useListStyles();
     const sortedItems = useMemo(() => [...items].sort((a, b) => a.sortBy - b.sortBy), [items]);
-    return (jsxs("div", { children: [jsx(ButtonLine, { label: addButtonLabel, icon: AddRegular, onClick: () => props.onAdd() }), jsx("div", { className: classes.list, children: sortedItems.map((item, index) => (jsxs("div", { className: classes.item, children: [jsxs(Body1Strong, { className: classes.itemId, children: ["#", index] }), jsx("div", { className: classes.itemContent, children: renderItem(item, items.indexOf(sortedItems[index])) }), jsxs("div", { className: classes.iconContainer, children: [jsx(CopyRegular, { onClick: () => onAdd(item) }), jsx(DeleteRegular, { onClick: () => onDelete(item, items.indexOf(sortedItems[index])) })] })] }, item.id))) })] }));
+    return (jsxs("div", { children: [onAdd && jsx(ButtonLine, { label: addButtonLabel, icon: AddRegular, onClick: () => onAdd() }), jsx("div", { className: classes.list, children: sortedItems.map((item, index) => (jsxs("div", { className: classes.item, children: [jsxs(Body1Strong, { className: classes.itemId, children: ["#", index] }), jsx("div", { className: classes.itemContent, children: renderItem(item, items.indexOf(sortedItems[index])) }), (onAdd || onDelete) && (jsxs("div", { className: classes.iconContainer, children: [onAdd && jsx(CopyRegular, { onClick: () => onAdd(item) }), onDelete && jsx(DeleteRegular, { onClick: () => onDelete(item, items.indexOf(sortedItems[index])) })] }))] }, item.id))) })] }));
 }
 
 const useGradientStyles = makeStyles({
@@ -10523,6 +11835,30 @@ const OpenPBRMaterialSpecularProperties = (props) => {
                     }
                 } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Specular IOR", target: material, propertyKey: "specularIor", min: 1, max: 3, step: 0.01 })] }));
 };
+const OpenPBRMaterialTransmissionProperties = (props) => {
+    const { material } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Weight", target: material, propertyKey: "transmissionWeight", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Weight", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionWeightTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Color", target: material, propertyKey: "transmissionColor", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Color", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionColorTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Depth", target: material, propertyKey: "transmissionDepth", min: 0, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Depth", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionDepthTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Transmission Scatter", target: material, propertyKey: "transmissionScatter", isLinearMode: true }), jsx(FileUploadLine, { label: "Transmission Scatter", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionScatterTexture = texture));
+                    }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Scatter Anisotropy", target: material, propertyKey: "transmissionScatterAnisotropy", min: -1, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Abbe Number", target: material, propertyKey: "transmissionDispersionAbbeNumber", min: 1, max: 100, step: 1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Transmission Dispersion Scale", target: material, propertyKey: "transmissionDispersionScale", min: 0, max: 1, step: 0.01 }), jsx(FileUploadLine, { label: "Transmission Dispersion Scale", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.transmissionDispersionScaleTexture = texture));
+                    }
+                } })] }));
+};
 /**
  * Displays the coat layer properties of an OpenPBR material.
  * @param props - The required properties
@@ -10630,6 +11966,10 @@ const OpenPBRMaterialGeometryProperties = (props) => {
                     if (files.length > 0) {
                         UpdateTexture(files[0], material, (texture) => (material.geometryCoatTangentTexture = texture));
                     }
+                } }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Geometry Thickness", target: material, propertyKey: "geometryThickness", min: 0, step: 0.1 }), jsx(FileUploadLine, { label: "Geometry Thickness", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+                    if (files.length > 0) {
+                        UpdateTexture(files[0], material, (texture) => (material.geometryThicknessTexture = texture));
+                    }
                 } })] }));
 };
 
@@ -10717,7 +12057,7 @@ function EntitySelector(props) {
         return getEntities()
             .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))
             .map((entity) => ({
-            label: getName(entity).toString(),
+            label: getName(entity)?.toString() || "",
             value: entity.uniqueId.toString(),
         }))
             .sort((a, b) => a.label.localeCompare(b.label));
@@ -10735,9 +12075,9 @@ function EntitySelector(props) {
         return (jsxs("div", { className: classes.linkDiv, children: [jsx(Tooltip, { 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(Button, { icon: LinkDismissRegular, onClick: () => onChange(defaultValue) })) : (
+                    jsx(Tooltip, { content: "Unlink", relationship: "label", children: jsx(Button, { icon: LinkDismissRegular, onClick: () => onChange(defaultValue) }) })) : (
                     // Otherwise, just allow editing to a new value
-                    jsx(Button, { icon: LinkEditRegular, onClick: () => setIsEditing(true) })))] }));
+                    jsx(Tooltip, { content: "Edit Link", relationship: "label", children: jsx(Button, { icon: LinkEditRegular, onClick: () => setIsEditing(true) }) })))] }));
     }
     else {
         // Otherwise, show the ComboBox for selection
@@ -11226,6 +12566,10 @@ const MaterialPropertiesServiceDefinition = {
                     section: "Specular",
                     component: ({ context }) => jsx(OpenPBRMaterialSpecularProperties, { material: context }),
                 },
+                {
+                    section: "Transmission",
+                    component: ({ context }) => jsx(OpenPBRMaterialTransmissionProperties, { material: context }),
+                },
                 {
                     section: "Coat",
                     component: ({ context }) => jsx(OpenPBRMaterialCoatProperties, { material: context }),
@@ -12696,11 +14040,16 @@ const useAttractorStyles = makeStyles({
         padding: `${tokens.spacingVerticalXS} 0px`,
         borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     },
+    strengthLabel: {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+    },
 });
-const CreateImpostor = (id, scene, attractor, initialScale, initialMaterial) => {
+const CreateImpostor = (id, scene, attractorData, initialScale, initialMaterial) => {
     const impostor = CreateSphere("Attractor impostor #" + id, { diameter: 1 }, scene);
     impostor.scaling.setAll(initialScale);
-    impostor.position.copyFrom(attractor.position);
+    impostor.position.copyFrom(attractorData.position);
     impostor.material = initialMaterial;
     impostor.reservedDataStore = { hidden: true };
     return impostor;
@@ -12721,16 +14070,24 @@ async function CreateTextRendererAsync(id, scene, impostor, color) {
  * @returns
  */
 const AttractorComponent = (props) => {
-    const { attractor, id, impostorScale, impostorMaterial, impostorColor, scene, onControl, isControlled } = props;
+    const { attractorData, id, impostorScale, impostorMaterial, impostorColor, scene, onControl, isControlled } = props;
     const classes = useAttractorStyles();
-    const [shown, setShown] = useState(true);
+    // For read-only attractors (Node particles), start hidden by default
+    const [shown, setShown] = useState(!attractorData.isReadOnly);
     // We only want to recreate the impostor mesh and associated if id, scene, or attractor/impostor changes
-    const impostor = useResource(useCallback(() => CreateImpostor(id, scene, attractor, impostorScale, impostorMaterial), [id, scene, attractor]));
+    const impostor = useResource(useCallback(() => CreateImpostor(id, scene, attractorData, impostorScale, impostorMaterial), [id, scene, attractorData]));
     const label = useAsyncResource(useCallback(async () => await CreateTextRendererAsync(id, scene, impostor, impostorColor), [id, scene, impostor]));
+    // Set initial visibility based on whether it should be shown
+    useEffect(() => {
+        impostor.visibility = shown ? 1 : 0;
+    }, [impostor, shown]);
     // If impostor, color, or label change, recreate the observer function so that it isnt hooked to old state
+    // For read-only attractors, don't sync position back (it can't be moved)
     useEffect(() => {
         const onAfterRender = scene.onAfterRenderObservable.add(() => {
-            attractor.position.copyFrom(impostor.position);
+            if (!attractorData.isReadOnly) {
+                attractorData.position.copyFrom(impostor.position);
+            }
             if (label) {
                 label.color = Color4.FromColor3(impostorColor);
                 label.render(scene.getViewMatrix(), scene.getProjectionMatrix());
@@ -12739,15 +14096,15 @@ const AttractorComponent = (props) => {
         return () => {
             onAfterRender.remove();
         };
-    }, [impostor, scene, label, impostorColor]);
+    }, [impostor, scene, label, impostorColor, attractorData]);
     // If impostor or impostorScale change, update impostor scaling
     useEffect(() => {
         impostor.scaling.setAll(impostorScale);
     }, [impostor, impostorScale]);
-    return (jsxs("div", { className: classes.container, children: [jsx(SyncedSliderInput, { value: attractor.strength, onChange: (value) => (attractor.strength = value), min: -10, max: 10, step: 0.1 }), jsx(ToggleButton, { title: "Show / hide particle attractor.", checkedIcon: EyeFilled, uncheckedIcon: EyeOffFilled, value: shown, onChange: (show) => {
-                    show ? (impostor.visibility = 1) : (impostor.visibility = 0);
+    return (jsxs("div", { className: classes.container, children: [attractorData.isReadOnly ? (jsxs(Body1, { className: classes.strengthLabel, children: ["Strength: ", attractorData.strength !== null ? attractorData.strength : "Dynamic"] })) : (jsx(SyncedSliderInput, { value: attractorData.strength, onChange: (value) => attractorData.setStrength(value), min: -10, max: 10, step: 0.1 })), jsx(ToggleButton, { title: "Show / hide particle attractor.", checkedIcon: EyeFilled, uncheckedIcon: EyeOffFilled, value: shown, onChange: (show) => {
+                    impostor.visibility = show ? 1 : 0;
                     setShown(show);
-                } }), jsx(ToggleButton, { title: "Add / remove position gizmo from particle attractor", checkedIcon: ArrowMoveFilled, value: isControlled(impostor), onChange: (control) => onControl(control ? impostor : undefined) })] }));
+                } }), !attractorData.isReadOnly && (jsx(ToggleButton, { title: "Add / remove position gizmo from particle attractor", checkedIcon: ArrowMoveFilled, value: isControlled(impostor), onChange: (control) => onControl(control ? impostor : undefined) }))] }));
 };
 
 const useStyles$b = makeStyles({
@@ -12755,15 +14112,15 @@ const useStyles$b = makeStyles({
         marginTop: tokens.spacingVerticalM,
     },
 });
-// For each Attractor, create a listItem consisting of the attractor and its debugging impostor mesh
+// For each IAttractorData, create a listItem
 function AttractorsToListItems(attractors) {
-    return (attractors?.map((attractor, index) => {
+    return attractors.map((attractor, index) => {
         return {
             id: index,
             data: attractor,
             sortBy: 0,
         };
-    }) ?? []);
+    });
 }
 const CreateGizmoManager = (scene) => {
     const gizmoManager = new GizmoManager(scene, 1, UtilityLayerRenderer._CreateDefaultUtilityLayerFromScene(scene), UtilityLayerRenderer._CreateDefaultKeepUtilityLayerFromScene(scene));
@@ -12777,8 +14134,14 @@ const CreateSharedMaterial = (scene, impostorColor) => {
     material.reservedDataStore = { hidden: true }; // Ensure scene explorer doesn't show the material
     return material;
 };
+/**
+ * Component that displays a list of attractors with debug visualization and editing controls.
+ * Supports both CPU particle systems (editable) and Node particle systems (read-only).
+ * @param props The component props containing the scene and attractor source.
+ * @returns The rendered AttractorList component.
+ */
 const AttractorList = (props) => {
-    const { scene, system } = props;
+    const { scene, attractorSource } = props;
     const [items, setItems] = useState([]);
     // All impostors share a scale and material/color (for now!)
     const [impostorScale, setImpostorScale] = useState(1);
@@ -12789,8 +14152,8 @@ const AttractorList = (props) => {
     const [controlledImpostor, setControlledImpostor] = useState(null);
     // If attractors change, recreate the items to re-render attractor components
     useEffect(() => {
-        setItems(AttractorsToListItems(props.attractors));
-    }, [props.attractors]);
+        setItems(AttractorsToListItems(attractorSource.attractors));
+    }, [attractorSource.attractors]);
     // If color changes, update shared material to ensure children reflect new color
     useEffect(() => {
         impostorMaterial.diffuseColor = impostorColor;
@@ -12802,24 +14165,113 @@ const AttractorList = (props) => {
         setControlledImpostor(attached);
     };
     const classes = useStyles$b();
-    return (jsxs(Fragment, { children: [items.length > 0 && (jsxs(Fragment, { children: [jsx(Color3PropertyLine, { label: "Attractor Debug Color", value: impostorColor, onChange: setImpostorColor }), jsx(SyncedSliderPropertyLine, { label: "Attractor Debug Size", value: impostorScale, onChange: setImpostorScale, min: 0, max: 10, step: 0.1 }), jsx(Subtitle2, { className: classes.subsection, children: "Attractors list" })] })), jsx(List, { addButtonLabel: `Add New Attractor`, items: items, onDelete: (item, _index) => system.removeAttractor(item.data), onAdd: (item) => system.addAttractor(item?.data ?? new Attractor()), renderItem: (item) => {
-                    return (jsx(AttractorComponent, { attractor: item.data, id: item.id, scene: scene, impostorColor: impostorColor, impostorScale: impostorScale, impostorMaterial: impostorMaterial, isControlled: (impostor) => impostor === controlledImpostor, onControl: onControlImpostor }));
+    return (jsxs(Fragment, { children: [items.length > 0 && (jsxs(Fragment, { children: [jsx(Color3PropertyLine, { label: "Attractor Debug Color", value: impostorColor, onChange: setImpostorColor }), jsx(SyncedSliderPropertyLine, { label: "Attractor Debug Size", value: impostorScale, onChange: setImpostorScale, min: 0, max: 10, step: 0.1 }), jsx(Subtitle2, { className: classes.subsection, children: "Attractors list" })] })), jsx(List, { addButtonLabel: `Add New Attractor`, items: items, onDelete: attractorSource.removeAttractor
+                    ? (item, _index) => {
+                        // Only CPU attractors (Attractor instances) can be removed
+                        if (item.data.source instanceof Attractor) {
+                            attractorSource.removeAttractor(item.data.source);
+                        }
+                    }
+                    : undefined, onAdd: attractorSource.addAttractor
+                    ? (item) => {
+                        // Only CPU attractors can be added
+                        if (!item || item.data.source instanceof Attractor) {
+                            attractorSource.addAttractor(item?.data.source instanceof Attractor ? item.data.source : new Attractor());
+                        }
+                    }
+                    : undefined, renderItem: (item) => {
+                    return (jsx(AttractorComponent, { attractorData: item.data, id: item.id, scene: scene, impostorColor: impostorColor, impostorScale: impostorScale, impostorMaterial: impostorMaterial, isControlled: (impostor) => impostor === controlledImpostor, onControl: onControlImpostor }));
                 } })] }));
 };
 
+/**
+ * Creates an IAttractorData adapter from a CPU particle system Attractor.
+ * @param attractor The CPU particle system attractor
+ * @returns The IAttractorData adapter
+ */
+function CreateCPUAttractorData(attractor) {
+    return {
+        position: attractor.position,
+        strength: attractor.strength,
+        setStrength: (value) => {
+            attractor.strength = value;
+        },
+        source: attractor,
+        isReadOnly: false,
+    };
+}
+/**
+ * Creates an IAttractorData adapter from a Node particle system UpdateAttractorBlock.
+ * @param block The UpdateAttractorBlock from a Node particle system
+ * @returns The IAttractorData adapter
+ */
+function CreateNodeAttractorData(block) {
+    // Get the connected blocks - only use values if they are InputBlocks (constant values)
+    // If the value is a dynamic calculation, fall back to the block's default values
+    const attractorConnected = block.attractor.connectedPoint?.ownerBlock;
+    const strengthConnected = block.strength.connectedPoint?.ownerBlock;
+    const attractorInput = attractorConnected instanceof ParticleInputBlock ? attractorConnected : undefined;
+    const strengthInput = strengthConnected instanceof ParticleInputBlock ? strengthConnected : undefined;
+    // Use InputBlock values if available, null if dynamic, otherwise use the block's default values
+    const position = attractorInput?.value ?? block.attractor.value;
+    const strength = strengthInput?.value ?? (strengthConnected ? null : block.strength.value);
+    return {
+        position: position,
+        strength: strength,
+        setStrength: (value) => {
+            if (strengthInput) {
+                strengthInput.value = value;
+            }
+        },
+        source: block,
+        isReadOnly: true,
+    };
+}
+/**
+ * Creates an IAttractorSource for a CPU particle system.
+ * @param system The CPU particle system
+ * @param attractors The current attractors array (from useObservableArray hook)
+ * @returns The IAttractorSource adapter
+ */
+function CreateCPUAttractorSource(system, attractors) {
+    return {
+        attractors: attractors.map(CreateCPUAttractorData),
+        addAttractor: (attractor) => system.addAttractor(attractor ?? new Attractor()),
+        removeAttractor: (attractor) => system.removeAttractor(attractor),
+    };
+}
+/**
+ * Creates an IAttractorSource for a Node particle system.
+ * @param nodeSet The NodeParticleSystemSet
+ * @returns The IAttractorSource adapter
+ */
+function CreateNodeAttractorSource(nodeSet) {
+    const attractorBlocks = nodeSet.attachedBlocks.filter((block) => block instanceof UpdateAttractorBlock);
+    return {
+        attractors: attractorBlocks.map(CreateNodeAttractorData),
+    };
+}
+
 /**
  * Display attractor-related properties for a particle system.
+ * Supports both CPU particle systems (editable) and Node particle systems (read-only).
  * @param props Component props.
  * @returns Render property lines.
  */
 const ParticleSystemAttractorProperties = (props) => {
     const { particleSystem: system } = props;
-    const attractorsGetter = useCallback(() => system.attractors ?? [], [system]);
-    const attractors = useObservableArray(system, attractorsGetter, "addAttractor", "removeAttractor");
     const scene = system.getScene();
-    return (jsx(Fragment, { children: scene ? (jsx(AttractorList, { attractors: attractors, scene: scene, system: system })) : (
-        // Handle missing scene defensively.
-        jsx(MessageBar, { intent: "info", title: "No Scene Available", message: "Cannot display attractors without a scene" })) }));
+    const isNodeGenerated = system.isNodeGenerated;
+    // For non-node systems - Hook is called but inactive for Node systems
+    const attractorsGetter = useCallback(() => system.attractors ?? [], [system]);
+    const attractors = useObservableArray(isNodeGenerated ? null : system, attractorsGetter, "addAttractor", "removeAttractor");
+    // Create appropriate source based on the particle system type
+    const attractorSource = isNodeGenerated ? CreateNodeAttractorSource(system.source) : CreateCPUAttractorSource(system, attractors);
+    // Show message for Node systems with no attractors
+    if (isNodeGenerated && attractorSource.attractors.length === 0) {
+        return jsx(MessageBar, { intent: "info", title: "No Attractors", message: "No attractor blocks found. Add them in the Node Particle Editor." });
+    }
+    return (jsx(Fragment, { children: scene ? (jsx(AttractorList, { attractorSource: attractorSource, scene: scene })) : (jsx(MessageBar, { intent: "info", title: "No Scene Available", message: "Cannot display attractors without a scene" })) }));
 };
 
 const useStyles$a = makeStyles({
@@ -12900,8 +14352,8 @@ function IsParticleSystem(entity) {
 function IsNodeParticleSystem(entity) {
     return entity instanceof ParticleSystem && entity.isNodeGenerated;
 }
-function IsNonNodeCPUParticleSystem(entity) {
-    return entity instanceof ParticleSystem && !entity.isNodeGenerated;
+function IsCPUParticleSystem(entity) {
+    return entity instanceof ParticleSystem;
 }
 function IsNonNodeParticleSystem(entity) {
     return (entity instanceof ParticleSystem && !entity.isNodeGenerated) || entity instanceof GPUParticleSystem;
@@ -12939,7 +14391,7 @@ const ParticleSystemPropertiesServiceDefinition = {
         // The Attractors section must not be visible at all (including the accordion entry) for CPU systems.
         const particleSystemAttractorsContent = propertiesService.addSectionContent({
             key: "Particle System Attractors Properties",
-            predicate: IsNonNodeCPUParticleSystem,
+            predicate: IsCPUParticleSystem,
             content: [
                 {
                     section: "Attractors",
@@ -12948,17 +14400,6 @@ const ParticleSystemPropertiesServiceDefinition = {
                 },
             ],
         });
-        const particleSystemNodeContent = propertiesService.addSectionContent({
-            key: "Particle System Node Properties",
-            predicate: IsNodeParticleSystem,
-            content: [
-                {
-                    section: "Inputs",
-                    order: 3,
-                    component: ({ context }) => jsx(ParticleSystemNodeEditorProperties, { particleSystem: context, selectionService: selectionService }),
-                },
-            ],
-        });
         const particleSystemEmitterContent = propertiesService.addSectionContent({
             key: "Particle System Emitter Properties",
             predicate: IsNonNodeParticleSystem,
@@ -13041,12 +14482,22 @@ const ParticleSystemPropertiesServiceDefinition = {
                 },
             ],
         });
+        const particleSystemNodeContent = propertiesService.addSectionContent({
+            key: "Node Particle System Inputs Properties",
+            predicate: IsNodeParticleSystem,
+            content: [
+                {
+                    section: "Inputs",
+                    order: 12,
+                    component: ({ context }) => jsx(ParticleSystemNodeEditorProperties, { particleSystem: context, selectionService: selectionService }),
+                },
+            ],
+        });
         return {
             dispose: () => {
                 particleSystemSystemContent.dispose();
                 particleSystemCommandsContent.dispose();
                 particleSystemAttractorsContent.dispose();
-                particleSystemNodeContent.dispose();
                 particleSystemEmitterContent.dispose();
                 particleSystemEmissionContent.dispose();
                 particleSystemSizeContent.dispose();
@@ -13054,6 +14505,7 @@ const ParticleSystemPropertiesServiceDefinition = {
                 particleSystemColorContent.dispose();
                 particleSystemRotationContent.dispose();
                 particleSystemSpritesheetContent.dispose();
+                particleSystemNodeContent.dispose();
             },
         };
     },
@@ -17082,6 +18534,529 @@ const TextureExplorerServiceDefinition = {
     },
 };
 
+const EquirectangularCaptureTool = ({ scene }) => {
+    const captureEquirectangularAsync = useCallback(async () => {
+        const currentActiveCamera = scene.activeCamera;
+        if (!currentActiveCamera && scene.frameGraph) {
+            scene.activeCamera = FrameGraphUtils.FindMainCamera(scene.frameGraph);
+        }
+        if (scene.activeCamera) {
+            await captureEquirectangularFromScene(scene, { size: 1024, filename: "equirectangular_capture.png" });
+        }
+        // eslint-disable-next-line require-atomic-updates
+        scene.activeCamera = currentActiveCamera;
+    }, [scene]);
+    return jsx(ButtonLine, { label: "Capture Equirectangular", icon: CameraRegular, onClick: captureEquirectangularAsync });
+};
+
+const GIFCaptureTool = MakeLazyComponent(async () => {
+    const gif = (await import('./gif-8Ty35Toc.js')).default;
+    // TODO: Figure out how to grab this from NPM package instead of CDN
+    const workerContent = await Tools.LoadFileAsync("https://cdn.jsdelivr.net/gh//terikon/gif.js.optimized@0.1.6/dist/gif.worker.js");
+    const workerBlob = new Blob([workerContent], { type: "application/javascript" });
+    const workerUrl = URL.createObjectURL(workerBlob);
+    return ({ scene }) => {
+        const [recordingSession, setRecordingSession] = useState({ state: "Idle" });
+        const [targetWidth, setTargetWidth] = useState(512);
+        const [frequency, setFrequency] = useState(200);
+        useEffect(() => {
+            return () => {
+                if (recordingSession.state === "Recording") {
+                    // Reset session resources if component is unmounted
+                    scene.onAfterRenderObservable.remove(recordingSession.captureObserver);
+                    scene.getEngine().setHardwareScalingLevel(recordingSession.previousHardwareScaling);
+                }
+            };
+        }, [recordingSession, scene]);
+        // Use functional setState to guard against multiple rapid clicks
+        const startRecording = useCallback(() => {
+            setRecordingSession((currentSession) => {
+                // If already recording/rendering, don't start a new session
+                if (currentSession.state !== "Idle") {
+                    return currentSession;
+                }
+                const engine = scene.getEngine();
+                const canvas = engine.getRenderingCanvas();
+                if (!canvas) {
+                    return currentSession;
+                }
+                const gifInstance = new gif({
+                    workers: 2,
+                    quality: 10,
+                    workerScript: workerUrl,
+                });
+                // Adjust hardware scaling to match desired width
+                const previousHardwareScaling = engine.getHardwareScalingLevel();
+                engine.setHardwareScalingLevel(engine.getRenderWidth() / (targetWidth * globalThis.devicePixelRatio) || 1);
+                // Capture frames after each render
+                let lastCaptureTime = 0;
+                const captureObserver = scene.onAfterRenderObservable.add(() => {
+                    const now = Date.now();
+                    if (now - lastCaptureTime >= frequency && gifInstance) {
+                        lastCaptureTime = now;
+                        gifInstance.addFrame(canvas, { delay: 1, copy: true });
+                    }
+                });
+                return {
+                    state: "Recording",
+                    gif: gifInstance,
+                    captureObserver: captureObserver,
+                    previousHardwareScaling: previousHardwareScaling,
+                };
+            });
+        }, [scene, targetWidth, frequency]);
+        const stopRecording = useCallback(() => {
+            setRecordingSession((currentSession) => {
+                if (currentSession.state !== "Recording") {
+                    return currentSession;
+                }
+                // Remove the frame capture observer
+                scene.onAfterRenderObservable.remove(currentSession.captureObserver);
+                // Restore previous hardware scaling
+                scene.getEngine().setHardwareScalingLevel(currentSession.previousHardwareScaling);
+                currentSession.gif.on("finished", (blob) => {
+                    // Download the rendered GIF
+                    Tools.Download(blob, "recording.gif");
+                    // Reset state
+                    setRecordingSession({ state: "Idle" });
+                });
+                // Start rendering the GIF
+                currentSession.gif.render();
+                return { state: "Rendering", gif: currentSession.gif };
+            });
+        }, [scene]);
+        return (jsxs(Fragment, { children: [recordingSession.state === "Idle" && jsx(ButtonLine, { label: "Record GIF", icon: RecordRegular, onClick: startRecording }), recordingSession.state === "Recording" && jsx(ButtonLine, { label: "Stop", icon: RecordStopRegular, onClick: stopRecording }), recordingSession.state === "Rendering" && jsx(Label, { children: "Creating the GIF file..." }), jsxs(Collapse, { visible: recordingSession.state === "Idle", children: [jsx(SyncedSliderPropertyLine, { label: "Resolution", description: "The pixel width of the output. The height will be adjusted accordingly to maintain the aspect ratio.", value: targetWidth, onChange: (value) => setTargetWidth(Math.floor(value)), min: 128, max: 2048, step: 128 }), jsx(SyncedSliderPropertyLine, { label: "Frequency (ms)", description: "The time interval in milliseconds between each capture of the scene.", value: frequency, onChange: (value) => setFrequency(Math.floor(value)), min: 50, max: 1000, step: 50 })] })] }));
+    };
+}, { spinnerSize: "extra-tiny", spinnerLabel: "Loading..." });
+
+const SceneReplayTool = ({ scene }) => {
+    const [isRecording, setIsRecording] = useState(false);
+    const sceneRecorder = useResource(() => new SceneRecorder());
+    const startRecording = useCallback(() => {
+        sceneRecorder.track(scene);
+        setIsRecording(true);
+    }, [scene]);
+    const exportReplay = useCallback(() => {
+        const content = JSON.stringify(sceneRecorder.getDelta());
+        const blob = new Blob([content], { type: "application/json" });
+        Tools.Download(blob, "replay_delta.json");
+        setIsRecording(false);
+    }, []);
+    const applyDelta = useCallback((files) => {
+        const file = files[0];
+        if (!file) {
+            return;
+        }
+        Tools.ReadFile(file, (data) => {
+            try {
+                const json = JSON.parse(data);
+                SceneRecorder.ApplyDelta(json, scene);
+            }
+            catch (error) {
+                Logger.Error("Failed to apply replay delta:" + error);
+            }
+        }, undefined, false);
+    }, [scene]);
+    return (jsxs(Fragment, { children: [!isRecording && jsx(ButtonLine, { label: "Start Recording", icon: RecordRegular, onClick: startRecording }), isRecording && (jsxs(Fragment, { children: [jsx(Label, { children: "Recording in progress..." }), jsx(ButtonLine, { label: "Generate Delta File", icon: SaveRegular, onClick: exportReplay })] })), jsx(FileUploadLine, { label: "Apply Delta File", icon: ArrowDownloadRegular, onClick: applyDelta, accept: ".json" })] }));
+};
+
+const ScreenshotTool = ({ scene }) => {
+    const [precision, setPrecision] = useState(1);
+    const [useCustomSize, setUseCustomSize] = useState(false);
+    const [width, setWidth] = useState(512);
+    const [height, setHeight] = useState(512);
+    const captureScreenshot = useCallback(async () => {
+        const engine = scene.getEngine();
+        const camera = scene.frameGraph ? FrameGraphUtils.FindMainCamera(scene.frameGraph) : scene.activeCamera;
+        const screenshotSize = useCustomSize ? { width, height, precision } : { precision };
+        if (camera) {
+            await CreateScreenshotUsingRenderTargetAsync(engine, camera, screenshotSize, "image/png", undefined, undefined, "screenshot.png");
+        }
+    }, [useCustomSize, precision, width, height, scene]);
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Capture Screenshot", icon: CameraRegular, onClick: captureScreenshot }), jsx(SyncedSliderPropertyLine, { label: "Precision", description: "A multiplier allowing capture at a higher or lower resolution.", value: precision, onChange: setPrecision, min: 0.1, max: 10, step: 0.1 }), jsx(SwitchPropertyLine, { label: "Use Custom Size", value: useCustomSize, onChange: setUseCustomSize }), jsxs(Collapse, { visible: useCustomSize, children: [jsx(SyncedSliderPropertyLine, { label: "Width", description: "The width of the screenshot in pixels. ", value: width, onChange: setWidth, min: 1, step: 1 }), jsx(SyncedSliderPropertyLine, { label: "Height", description: "The height of the screenshot in pixels.", value: height, onChange: setHeight, min: 1, step: 1 })] })] }));
+};
+
+const VideoCaptureTool = ({ scene }) => {
+    const [isRecording, setIsRecording] = useState(false);
+    const videoRecorder = useResource(useCallback(() => {
+        return new VideoRecorder(scene.getEngine());
+    }, [scene.getEngine()]));
+    const recordVideoAsync = useCallback(async () => {
+        if (videoRecorder && videoRecorder.isRecording) {
+            videoRecorder.stopRecording();
+            setIsRecording(false);
+            return;
+        }
+        void videoRecorder.startRecording(undefined, 0); // Use 0 to prevent automatic stop; let the user stop it
+        setIsRecording(true);
+    }, [scene]);
+    return (jsx(Fragment, { children: jsx(ButtonLine, { label: isRecording ? "Stop Recording" : "Record Video", icon: isRecording ? RecordStopRegular : RecordRegular, onClick: recordVideoAsync }) }));
+};
+
+const CaptureToolsDefinition = {
+    friendlyName: "Capture Tools",
+    consumes: [ToolsServiceIdentity],
+    factory: (toolsService) => {
+        const contentRegistrations = [];
+        // Screenshot
+        contentRegistrations.push(toolsService.addSectionContent({
+            key: "Screenshot",
+            section: "Screenshot",
+            order: 10,
+            component: ({ context }) => jsx(ScreenshotTool, { scene: context }),
+        }));
+        // Equirectangular capture
+        contentRegistrations.push(toolsService.addSectionContent({
+            key: "Equirectangular",
+            section: "Equirectangular",
+            order: 15,
+            component: ({ context }) => jsx(EquirectangularCaptureTool, { scene: context }),
+        }));
+        // Video recorder
+        contentRegistrations.push(toolsService.addSectionContent({
+            key: "Video",
+            section: "Video",
+            order: 20,
+            component: ({ context }) => jsx(VideoCaptureTool, { scene: context }),
+        }));
+        // GIF recorder
+        contentRegistrations.push(toolsService.addSectionContent({
+            key: "GIF",
+            section: "GIF",
+            order: 25,
+            component: ({ context }) => jsx(GIFCaptureTool, { scene: context }),
+        }));
+        // Scene replay
+        contentRegistrations.push(toolsService.addSectionContent({
+            key: "Scene Replay",
+            section: "Scene Replay",
+            order: 30,
+            component: ({ context }) => jsx(SceneReplayTool, { scene: context }),
+        }));
+        return {
+            dispose: () => {
+                contentRegistrations.forEach((registration) => registration.dispose());
+            },
+        };
+    },
+};
+
+const EnvExportImageTypes = [
+    { label: "PNG", value: 0, imageType: "image/png" },
+    { label: "WebP", value: 1, imageType: "image/webp" },
+];
+const ExportBabylonTools = ({ scene }) => {
+    const [babylonExportOptions, setBabylonExportOptions] = useState({
+        imageTypeIndex: 0,
+        imageQuality: 0.8,
+        iblDiffuse: false,
+    });
+    const exportBabylon = useCallback(async () => {
+        const strScene = JSON.stringify(SceneSerializer.Serialize(scene));
+        const blob = new Blob([strScene], { type: "octet/stream" });
+        Tools.Download(blob, "scene.babylon");
+    }, [scene]);
+    const createEnvTexture = useCallback(async () => {
+        if (!scene.environmentTexture) {
+            return;
+        }
+        try {
+            const buffer = await EnvironmentTextureTools.CreateEnvTextureAsync(scene.environmentTexture, {
+                imageType: EnvExportImageTypes[babylonExportOptions.imageTypeIndex].imageType,
+                imageQuality: babylonExportOptions.imageQuality,
+                disableIrradianceTexture: !babylonExportOptions.iblDiffuse,
+            });
+            const blob = new Blob([buffer], { type: "octet/stream" });
+            Tools.Download(blob, "environment.env");
+        }
+        catch (error) {
+            Logger.Error(error);
+            alert(error);
+        }
+    }, [scene, babylonExportOptions]);
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Export to Babylon", icon: ArrowDownloadRegular, onClick: exportBabylon }), !scene.getEngine().premultipliedAlpha && scene.environmentTexture && scene.environmentTexture._prefiltered && scene.activeCamera && (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Generate .env texture", icon: ArrowDownloadRegular, onClick: createEnvTexture }), scene.environmentTexture.irradianceTexture && (jsx(SwitchPropertyLine, { label: "Diffuse Texture", description: "Export diffuse texture for IBL", value: babylonExportOptions.iblDiffuse, onChange: (value) => {
+                            setBabylonExportOptions((prev) => ({ ...prev, iblDiffuse: value }));
+                        } }, "iblDiffuse")), jsx(NumberDropdownPropertyLine, { label: "Image type", options: EnvExportImageTypes, value: babylonExportOptions.imageTypeIndex, onChange: (val) => {
+                            setBabylonExportOptions((prev) => ({ ...prev, imageTypeIndex: val }));
+                        } }), jsx(Collapse, { visible: babylonExportOptions.imageTypeIndex > 0, children: jsx(SyncedSliderPropertyLine, { label: "Quality", value: babylonExportOptions.imageQuality, onChange: (value) => setBabylonExportOptions((prev) => ({ ...prev, imageQuality: value })), min: 0, max: 1 }) })] }))] }));
+};
+const ExportGltfTools = MakeLazyComponent(async () => {
+    // Defer importing anything from the serializers package until this component is actually mounted.
+    const { GLTF2Export } = await import('@babylonjs/serializers/glTF/2.0/glTFSerializer.js');
+    return (props) => {
+        const [isExportingGltf, setIsExportingGltf] = useState(false);
+        const [gltfExportOptions, setGltfExportOptions] = useState({
+            exportDisabledNodes: false,
+            exportSkyboxes: false,
+            exportCameras: false,
+            exportLights: false,
+            dracoCompression: false,
+        });
+        const exportGLTF = useCallback(async () => {
+            setIsExportingGltf(true);
+            const shouldExport = (node) => {
+                if (!gltfExportOptions.exportDisabledNodes) {
+                    if (!node.isEnabled()) {
+                        return false;
+                    }
+                }
+                if (!gltfExportOptions.exportSkyboxes) {
+                    if (node instanceof Mesh) {
+                        if (node.material) {
+                            const material = node.material;
+                            const reflectionTexture = material.reflectionTexture;
+                            if (reflectionTexture && reflectionTexture.coordinatesMode === Texture.SKYBOX_MODE) {
+                                return false;
+                            }
+                        }
+                    }
+                }
+                if (!gltfExportOptions.exportCameras) {
+                    if (node instanceof Camera) {
+                        return false;
+                    }
+                }
+                if (!gltfExportOptions.exportLights) {
+                    if (node instanceof Light) {
+                        return false;
+                    }
+                }
+                return true;
+            };
+            try {
+                const glb = await GLTF2Export.GLBAsync(props.scene, "scene", {
+                    meshCompressionMethod: gltfExportOptions.dracoCompression ? "Draco" : undefined,
+                    shouldExportNode: (node) => shouldExport(node),
+                });
+                glb.downloadFiles();
+            }
+            catch (reason) {
+                Logger.Error(`Failed to export GLB: ${reason}`);
+            }
+            finally {
+                setIsExportingGltf(false);
+            }
+        }, [gltfExportOptions, props.scene]);
+        return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Export to GLB", icon: ArrowDownloadRegular, onClick: exportGLTF, disabled: isExportingGltf }), jsx(SwitchPropertyLine, { label: "Export Disabled Nodes", description: "Whether to export nodes that are disabled in the scene.", value: gltfExportOptions.exportDisabledNodes, onChange: (checked) => setGltfExportOptions({ ...gltfExportOptions, exportDisabledNodes: checked }) }, "GLTFExportDisabledNodes"), jsx(SwitchPropertyLine, { label: "Export Skyboxes", description: "Whether to export skybox nodes in the scene.", value: gltfExportOptions.exportSkyboxes, onChange: (checked) => setGltfExportOptions({ ...gltfExportOptions, exportSkyboxes: checked }) }, "GLTFExportSkyboxes"), jsx(SwitchPropertyLine, { label: "Export Cameras", description: "Whether to export cameras in the scene.", value: gltfExportOptions.exportCameras, onChange: (checked) => setGltfExportOptions({ ...gltfExportOptions, exportCameras: checked }) }, "GLTFExportCameras"), jsx(SwitchPropertyLine, { label: "Export Lights", description: "Whether to export lights in the scene.", value: gltfExportOptions.exportLights, onChange: (checked) => setGltfExportOptions({ ...gltfExportOptions, exportLights: checked }) }, "GLTFExportLights"), jsx(SwitchPropertyLine, { label: "Draco Compression", description: "Whether to apply Draco compression to geometry.", value: gltfExportOptions.dracoCompression, onChange: (checked) => setGltfExportOptions({ ...gltfExportOptions, dracoCompression: checked }) }, "GLTFDracoCompression")] }));
+    };
+});
+
+const ExportServiceDefinition = {
+    friendlyName: "Export Tools",
+    consumes: [ToolsServiceIdentity],
+    factory: (toolsService) => {
+        const contentRegistrations = [];
+        // glTF export content
+        contentRegistrations.push(toolsService.addSectionContent({
+            key: "GLTF Export",
+            section: "GLTF Export",
+            component: ({ context }) => jsx(ExportGltfTools, { scene: context }),
+        }));
+        // Babylon export content
+        contentRegistrations.push(toolsService.addSectionContent({
+            key: "Babylon Export",
+            section: "Babylon Export",
+            component: ({ context }) => jsx(ExportBabylonTools, { scene: context }),
+        }));
+        return {
+            dispose: () => {
+                contentRegistrations.forEach((registration) => registration.dispose());
+            },
+        };
+    },
+};
+
+const AnimationGroupLoadingModes = [
+    { label: "Clean", value: 0 /* SceneLoaderAnimationGroupLoadingMode.Clean */ },
+    { label: "Stop", value: 1 /* SceneLoaderAnimationGroupLoadingMode.Stop */ },
+    { label: "Sync", value: 2 /* SceneLoaderAnimationGroupLoadingMode.Sync */ },
+    { label: "NoSync", value: 3 /* SceneLoaderAnimationGroupLoadingMode.NoSync */ },
+];
+const GLTFAnimationImportTool = ({ scene }) => {
+    const [importDefaults, setImportDefaults] = useState({
+        overwriteAnimations: true,
+        animationGroupLoadingMode: 0 /* SceneLoaderAnimationGroupLoadingMode.Clean */,
+    });
+    const importAnimations = (event) => {
+        const reloadAsync = async function (sceneFile) {
+            if (sceneFile) {
+                try {
+                    await ImportAnimationsAsync(sceneFile, scene, {
+                        overwriteAnimations: importDefaults.overwriteAnimations,
+                        animationGroupLoadingMode: importDefaults.animationGroupLoadingMode,
+                    });
+                    if (scene.animationGroups.length > 0) {
+                        const currentGroup = scene.animationGroups[0];
+                        currentGroup.play(true);
+                    }
+                }
+                catch (error) {
+                    Logger.Error(`Error importing animations: ${error}`);
+                }
+            }
+        };
+        const filesInputAnimation = new FilesInput(scene.getEngine(), scene, null, null, null, null, null, reloadAsync, null);
+        filesInputAnimation.loadFiles(event);
+        filesInputAnimation.dispose();
+    };
+    return (jsxs(Fragment, { children: [jsx(FileUploadLine, { label: "Import Animations", accept: "gltf", onClick: (evt) => importAnimations(evt) }), jsx(SwitchPropertyLine, { label: "Overwrite Animations", value: importDefaults.overwriteAnimations, onChange: (value) => {
+                    setImportDefaults({ ...importDefaults, overwriteAnimations: value });
+                } }), jsx(Collapse, { visible: !importDefaults.overwriteAnimations, children: jsx(NumberDropdownPropertyLine, { label: "Animation Merge Mode", options: AnimationGroupLoadingModes, value: importDefaults.animationGroupLoadingMode, onChange: (value) => {
+                        setImportDefaults({ ...importDefaults, animationGroupLoadingMode: value });
+                    } }) })] }));
+};
+
+const GLTFAnimationImportServiceDefinition = {
+    friendlyName: "GLTF Animation Import",
+    consumes: [ToolsServiceIdentity],
+    factory: (toolsService) => {
+        const contentRegistration = toolsService.addSectionContent({
+            key: "AnimationImport",
+            order: 40,
+            section: "GLTF Animation Import",
+            component: ({ context }) => jsx(GLTFAnimationImportTool, { scene: context }),
+        });
+        return {
+            dispose: () => {
+                contentRegistration.dispose();
+            },
+        };
+    },
+};
+
+const AnimationStartModeOptions = [
+    { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
+    { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
+    { label: "All", value: GLTFLoaderAnimationStartMode.ALL },
+];
+const CoordinateSystemModeOptions = [
+    { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
+    { label: "Right Handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED },
+];
+const GLTFLoaderOptionsTool = ({ loaderOptions }) => {
+    return (jsx(PropertyLine, { label: "Loader Options", expandByDefault: false, indentExpandedContent: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always compute bounding box", target: loaderOptions, propertyKey: "alwaysComputeBoundingBox" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always compute skeleton root node", target: loaderOptions, propertyKey: "alwaysComputeSkeletonRootNode" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Animation start mode", options: AnimationStartModeOptions, target: loaderOptions, propertyKey: "animationStartMode" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Capture performance counters", target: loaderOptions, propertyKey: "capturePerformanceCounters" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile materials", target: loaderOptions, propertyKey: "compileMaterials" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile shadow generators", target: loaderOptions, propertyKey: "compileShadowGenerators" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Coordinate system", options: CoordinateSystemModeOptions, target: loaderOptions, propertyKey: "coordinateSystemMode" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Create instances", target: loaderOptions, propertyKey: "createInstances" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable logging", target: loaderOptions, propertyKey: "loggingEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load all materials", target: loaderOptions, propertyKey: "loadAllMaterials" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Target FPS", target: loaderOptions, propertyKey: "targetFps", min: 1, max: 120, step: 1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Transparency as coverage", target: loaderOptions, propertyKey: "transparencyAsCoverage" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use clip plane", target: loaderOptions, propertyKey: "useClipPlane" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use sRGB buffers", target: loaderOptions, propertyKey: "useSRGBBuffers" })] }) }));
+};
+const GLTFExtensionOptionsTool = ({ extensionOptions }) => {
+    return (jsx(PropertyLine, { label: "Extension Options", expandByDefault: false, indentExpandedContent: true, expandedContent: jsx(Fragment, { children: Object.entries(extensionOptions).map(([extensionName, options]) => {
+                return (jsx(BoundProperty, { component: SwitchPropertyLine, label: extensionName, target: options, propertyKey: "enabled", expandedContent: (extensionName === "MSFT_lod" && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Maximum LODs", target: extensionOptions[extensionName], propertyKey: "maxLODsToLoad", min: 1, max: 10, step: 1 }, extensionName + "_maxLODsToLoad"))) ||
+                        undefined }, extensionName));
+            }) }) }));
+};
+
+// Options exposed in Inspector includes all the properties from the default loader options (GLTFLoaderDefaultOptions)
+// plus some options that only exist directly on the GLTFFileLoader class itself.
+const CurrentLoaderOptions = Object.assign({
+    capturePerformanceCounters: false,
+    loggingEnabled: false,
+}, GLTFLoaderDefaultOptions);
+const CurrentExtensionOptions = {
+    /* eslint-disable @typescript-eslint/naming-convention */
+    EXT_lights_image_based: { enabled: true },
+    EXT_mesh_gpu_instancing: { enabled: true },
+    EXT_texture_webp: { enabled: true },
+    EXT_texture_avif: { enabled: true },
+    KHR_draco_mesh_compression: { enabled: true },
+    KHR_materials_pbrSpecularGlossiness: { enabled: true },
+    KHR_materials_clearcoat: { enabled: true },
+    KHR_materials_iridescence: { enabled: true },
+    KHR_materials_anisotropy: { enabled: true },
+    KHR_materials_emissive_strength: { enabled: true },
+    KHR_materials_ior: { enabled: true },
+    KHR_materials_sheen: { enabled: true },
+    KHR_materials_specular: { enabled: true },
+    KHR_materials_unlit: { enabled: true },
+    KHR_materials_variants: { enabled: true },
+    KHR_materials_transmission: { enabled: true },
+    KHR_materials_diffuse_transmission: { enabled: true },
+    KHR_materials_volume: { enabled: true },
+    KHR_materials_dispersion: { enabled: true },
+    KHR_materials_diffuse_roughness: { enabled: true },
+    KHR_mesh_quantization: { enabled: true },
+    KHR_lights_punctual: { enabled: true },
+    EXT_lights_area: { enabled: true },
+    KHR_texture_basisu: { enabled: true },
+    KHR_texture_transform: { enabled: true },
+    KHR_xmp_json_ld: { enabled: true },
+    MSFT_lod: { enabled: true, maxLODsToLoad: 10 },
+    MSFT_minecraftMesh: { enabled: true },
+    MSFT_sRGBFactors: { enabled: true },
+    MSFT_audio_emitter: { enabled: true },
+};
+const GLTFLoaderOptionsServiceDefinition = {
+    friendlyName: "GLTF Loader Options",
+    consumes: [ToolsServiceIdentity],
+    factory: (toolsService) => {
+        // Subscribe to plugin activation
+        const pluginObserver = SceneLoader.OnPluginActivatedObservable.add((plugin) => {
+            if (plugin.name === "gltf") {
+                const loader = plugin;
+                // Apply loader settings
+                Object.assign(loader, CurrentLoaderOptions);
+                // Subscribe to extension loading
+                loader.onExtensionLoadedObservable.add((extension) => {
+                    const extensionOptions = CurrentExtensionOptions[extension.name];
+                    if (extensionOptions) {
+                        // Apply extension settings
+                        Object.assign(extension, extensionOptions);
+                    }
+                });
+            }
+        });
+        const loaderToolsRegistration = toolsService.addSectionContent({
+            key: "GLTFLoaderOptions",
+            section: "GLTF Loader",
+            order: 50,
+            component: () => {
+                return (jsxs(Fragment, { children: [jsx(MessageBar, { intent: "info", message: "Reload the file for changes to take effect" }), jsx(GLTFLoaderOptionsTool, { loaderOptions: CurrentLoaderOptions }), jsx(GLTFExtensionOptionsTool, { extensionOptions: CurrentExtensionOptions })] }));
+            },
+        });
+        return {
+            dispose: () => {
+                pluginObserver.remove();
+                loaderToolsRegistration.dispose();
+            },
+        };
+    },
+};
+
+const GLTFValidationTool = ({ validationResults }) => {
+    const childWindow = useRef(null);
+    const issues = validationResults.issues;
+    const hasErrors = issues.numErrors > 0;
+    return (jsxs(Fragment, { children: [jsx(MessageBar, { intent: hasErrors ? "error" : "success", message: hasErrors ? "Your file has validation issues" : "Your file is a valid glTF file" }), jsx(StringifiedPropertyLine, { label: "Errors", value: issues.numErrors }, "NumErrors"), jsx(StringifiedPropertyLine, { label: "Warnings", value: issues.numWarnings }, "NumWarnings"), jsx(StringifiedPropertyLine, { label: "Infos", value: issues.numInfos }, "NumInfos"), jsx(StringifiedPropertyLine, { label: "Hints", value: issues.numHints }, "NumHints"), jsx(ButtonLine, { label: "View Report Details", onClick: () => childWindow.current?.open() }), jsx(ChildWindow, { id: "gltfValidationResults", imperativeRef: childWindow, children: jsx("pre", { style: { margin: 0, overflow: "auto" }, children: jsx("code", { children: JSON.stringify(validationResults, null, 2) }) }) })] }));
+};
+
+const GLTFValidationServiceDefinition = {
+    friendlyName: "GLTF Validation",
+    consumes: [ToolsServiceIdentity],
+    factory: (toolsService) => {
+        const pluginObserver = SceneLoader.OnPluginActivatedObservable.add((plugin) => {
+            if (plugin.name === "gltf") {
+                const loader = plugin;
+                loader.validate = true;
+            }
+        });
+        const sectionRegistration = toolsService.addSectionContent({
+            key: "GLTFValidation",
+            section: "GLTF Validation",
+            order: 60,
+            component: () => {
+                const validationState = useProperty(GLTFValidation, "_LastResults");
+                if (!validationState) {
+                    return jsx(MessageBar, { intent: "info", message: "Reload the file to see validation results" });
+                }
+                return jsx(GLTFValidationTool, { validationResults: validationState });
+            },
+        });
+        return {
+            dispose: () => {
+                sectionRegistration.dispose();
+                pluginObserver.remove();
+            },
+        };
+    },
+};
+
 const PickingToolbar = (props) => {
     const { scene, selectEntity, gizmoService, ignoreBackfaces } = props;
     const meshDataCache = useMemo(() => new WeakMap(), [scene]);
@@ -17210,13 +19185,24 @@ function ShowInspector(scene, options = {}) {
     let disposeAsync = async () => await Promise.resolve();
     // Create an inspector dispose token. The dispose will use the same async lock to
     // make sure async dispose (hide) does not actually start until async show is finished.
+    let isDisposed = false;
+    const onDisposed = new Observable();
     const inspectorToken = {
-        dispose: () => {
+        dispose() {
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             InspectorLock.lockAsync(async () => {
                 await disposeAsync();
+                isDisposed = true;
+                onDisposed.notifyObservers();
+                onDisposed.clear();
             });
         },
+        get isDisposed() {
+            return isDisposed;
+        },
+        get onDisposed() {
+            return onDisposed;
+        },
     };
     // Track the inspector token for the scene.
     InspectorTokens.set(scene, inspectorToken);
@@ -17303,11 +19289,7 @@ function ShowInspector(scene, options = {}) {
             const canvasContainerDisplay = parentElement.style.display;
             const canvasContainerChildren = [...parentElement.childNodes];
             parentElement.replaceChildren();
-            disposeActions.push(async () => {
-                // When the ModularTool token is disposed, it unmounts the react element, which asynchronously
-                // removes all children from the parentElement. We need to wait for that to complete before
-                // re-adding the canvas children back to the parentElement.
-                await new Promise((resolve) => setTimeout(resolve));
+            disposeActions.push(() => {
                 parentElement.replaceChildren(...canvasContainerChildren);
             });
             // This service is responsible for injecting the passed in canvas as the "central content" of the shell UI (the main area between the side panes and toolbars).
@@ -17369,7 +19351,7 @@ function ShowInspector(scene, options = {}) {
         // Stats pane tab and related services.
         StatsServiceDefinition, 
         // Tools pane tab and related services.
-        ToolsServiceDefinition, 
+        ToolsServiceDefinition, ExportServiceDefinition, GLTFAnimationImportServiceDefinition, GLTFLoaderOptionsServiceDefinition, GLTFValidationServiceDefinition, CaptureToolsDefinition, 
         // Settings pane tab and related services.
         SettingsServiceDefinition, 
         // Tracks entity selection state (e.g. which Mesh or Material or other entity is currently selected in scene explorer and bound to the properties pane, etc.).
@@ -17878,10 +19860,10 @@ class Inspector {
             options,
             disposeToken: ShowInspector(scene, options),
         };
+        this._CurrentInstance.disposeToken.onDisposed.addOnce(() => (this._CurrentInstance = null));
     }
     static Hide() {
         this._CurrentInstance?.disposeToken.dispose();
-        this._CurrentInstance = null;
     }
     // @ts-expect-error TS6133: This is private, but used by debugLayer (same as Inspector v1).
     static _SetNewScene(scene) {
@@ -18202,5 +20184,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { useAsyncResource as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, Theme as G, BuiltInsExtensionFeed as H, Inspector as I, useVector3Property as J, useColor3Property as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, useColor4Property as O, Popover as P, useQuaternionProperty as Q, MakePropertyHook as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, useInterceptObservable as U, Vector3PropertyLine as V, useEventfulState as W, useObservableCollection as X, useOrderedObservableCollection as Y, usePollingObservable as Z, useResource as _, SyncedSliderPropertyLine as a, useCompactMode as a0, useSidePaneDockOverrides as a1, useAngleConverters as a2, MakeTeachingMoment as a3, MakeDialogTeachingMoment as a4, InterceptFunction as a5, GetPropertyDescriptor as a6, IsPropertyReadonly as a7, InterceptProperty as a8, ObservableCollection as a9, Textarea as aA, TextInput as aB, ToggleButton as aC, ChildWindow as aD, FactorGradientList as aE, Color3GradientList as aF, Color4GradientList as aG, Pane as aH, BooleanBadgePropertyLine as aI, Color3PropertyLine as aJ, Color4PropertyLine as aK, HexPropertyLine as aL, NumberInputPropertyLine as aM, LinkPropertyLine as aN, PropertyLine as aO, LineContainer as aP, PlaceholderPropertyLine as aQ, StringifiedPropertyLine as aR, TextAreaPropertyLine as aS, TextPropertyLine as aT, RotationVectorPropertyLine as aU, QuaternionPropertyLine as aV, Vector2PropertyLine as aW, Vector4PropertyLine as aX, ConstructorFactory as aa, SelectionServiceIdentity as ab, SelectionServiceDefinition as ac, SettingsContextIdentity as ad, ShowInspector as ae, Checkbox as af, ColorPickerPopup as ag, InputHexField as ah, InputHsvField as ai, ComboBox as aj, DraggableLine as ak, Dropdown as al, NumberDropdown as am, StringDropdown as an, FactorGradientComponent as ao, Color3GradientComponent as ap, Color4GradientComponent as aq, ColorStepGradientComponent as ar, InfoLabel as as, List as at, PositionedPopover as au, SearchBar as av, SearchBox as aw, SpinButton as ax, Switch as ay, SyncedSliderInput as az, Button as b, TextInputPropertyLine as c, SpinButtonPropertyLine as d, CheckboxPropertyLine as e, MessageBar as f, ShellServiceIdentity as g, SceneContextIdentity as h, useObservableState as i, AccordionSection as j, useExtensionManager as k, MakePopoverTeachingMoment as l, TeachingMoment as m, SidePaneContainer as n, PropertiesServiceIdentity as o, SceneExplorerServiceIdentity as p, SettingsServiceIdentity as q, StatsServiceIdentity as r, ConvertOptions as s, AttachDebugLayer as t, useProperty as u, DetachDebugLayer as v, StringDropdownPropertyLine as w, BoundProperty as x, Property as y, LinkToEntityPropertyLine as z };
-//# sourceMappingURL=index-D89pOD_y.js.map
+export { MakeTeachingMoment as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ExtensibleAccordion as E, useColor3Property as F, useColor4Property as G, useQuaternionProperty as H, Inspector as I, MakePropertyHook as J, useInterceptObservable as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, useEventfulState as O, Popover as P, useObservableCollection as Q, useOrderedObservableCollection as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, usePollingObservable as U, Vector3PropertyLine as V, useResource as W, useAsyncResource as X, useCompactMode as Y, useSidePaneDockOverrides as Z, useAngleConverters as _, ShellServiceIdentity as a, MakeDialogTeachingMoment as a0, InterceptFunction as a1, GetPropertyDescriptor as a2, IsPropertyReadonly as a3, InterceptProperty as a4, ObservableCollection as a5, ConstructorFactory as a6, SelectionServiceIdentity as a7, SelectionServiceDefinition as a8, SettingsContextIdentity as a9, ToggleButton as aA, ChildWindow as aB, FileUploadLine as aC, FactorGradientList as aD, Color3GradientList as aE, Color4GradientList as aF, Pane as aG, BooleanBadgePropertyLine as aH, Color3PropertyLine as aI, Color4PropertyLine as aJ, HexPropertyLine as aK, LinkPropertyLine as aL, PropertyLine as aM, LineContainer as aN, PlaceholderPropertyLine as aO, StringifiedPropertyLine as aP, SwitchPropertyLine as aQ, SyncedSliderPropertyLine as aR, TextAreaPropertyLine as aS, TextPropertyLine as aT, RotationVectorPropertyLine as aU, QuaternionPropertyLine as aV, Vector2PropertyLine as aW, Vector4PropertyLine as aX, ShowInspector as aa, Checkbox as ab, Collapse as ac, ColorPickerPopup as ad, InputHexField as ae, InputHsvField as af, ComboBox as ag, DraggableLine as ah, Dropdown as ai, NumberDropdown as aj, StringDropdown as ak, FactorGradientComponent as al, Color3GradientComponent as am, Color4GradientComponent as an, ColorStepGradientComponent as ao, InfoLabel as ap, MakeLazyComponent as aq, List as ar, PositionedPopover as as, SearchBar as at, SearchBox as au, SpinButton as av, Switch as aw, SyncedSliderInput as ax, Textarea as ay, TextInput as az, SceneContextIdentity as b, useObservableState as c, AccordionSection as d, ButtonLine as e, ToolsServiceIdentity as f, useExtensionManager as g, MakePopoverTeachingMoment as h, TeachingMoment as i, SidePaneContainer as j, PropertiesServiceIdentity as k, SceneExplorerServiceIdentity as l, SettingsServiceIdentity as m, StatsServiceIdentity as n, ConvertOptions as o, AttachDebugLayer as p, DetachDebugLayer as q, NumberDropdownPropertyLine as r, StringDropdownPropertyLine as s, BoundProperty as t, useProperty as u, Property as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useVector3Property as z };
+//# sourceMappingURL=index-BDtiVo5p.js.map