@babylonjs/inspector 5.0.0-alpha.61 → 5.0.0-alpha.65

package/babylon.inspector.module.d.ts

@@ -74,6 +74,8 @@ declare module "@babylonjs/inspector/components/globalState" {
         enableLightGizmo(light: Light, enable?: boolean): void;
         cameraGizmos: Array<CameraGizmo>;
         enableCameraGizmo(camera: Camera, enable?: boolean): void;
+        onSceneExplorerClosedObservable: Observable<void>;
+        onActionTabsClosedObservable: Observable<void>;
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/paneComponent" {
@@ -222,12 +224,14 @@ declare module "@babylonjs/inspector/sharedUiComponents/lines/fileButtonLineComp
 }
 declare module "@babylonjs/inspector/components/graph/graphSupportingTypes" {
     import { IPerfDatasets } from "@babylonjs/core/Misc/interfaces/iPerfViewer";
+    import { Observable } from "@babylonjs/core/Misc/observable";
     /**
-     * Defines a structure to hold max and min.
+     * Defines a structure to hold max, min and a optional current.
      */
     export interface IPerfMinMax {
         min: number;
         max: number;
+        current?: number;
     }
     /**
      * Defines structure of the object which contains information related to panning.
@@ -277,11 +281,15 @@ declare module "@babylonjs/inspector/components/graph/graphSupportingTypes" {
         id: string;
         text: string;
     }
+    export interface IVisibleRangeChangedObservableProps {
+        valueMap: Map<string, IPerfMinMax>;
+    }
     /**
      * Defines what settings our canvas graphing service accepts
      */
     export interface ICanvasGraphServiceSettings {
         datasets: IPerfDatasets;
+        onVisibleRangeChangedObservable?: Observable<IVisibleRangeChangedObservableProps>;
     }
     /**
      * Defines the structure representing the preprocessable tooltip information.
@@ -306,6 +314,169 @@ declare module "@babylonjs/inspector/components/graph/graphSupportingTypes" {
         Hours = 3
     }
 }
+declare module "@babylonjs/inspector/sharedUiComponents/colorPicker/colorComponentEntry" {
+    import * as React from "react";
+    export interface IColorComponentEntryProps {
+        value: number;
+        label: string;
+        max?: number;
+        min?: number;
+        onChange: (value: number) => void;
+    }
+    export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+        constructor(props: IColorComponentEntryProps);
+        updateValue(valueString: string): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/inspector/sharedUiComponents/colorPicker/hexColor" {
+    import * as React from "react";
+    export interface IHexColorProps {
+        value: string;
+        expectedLength: number;
+        onChange: (value: string) => void;
+    }
+    export class HexColor extends React.Component<IHexColorProps, {
+        hex: string;
+    }> {
+        constructor(props: IHexColorProps);
+        shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
+            hex: string;
+        }): boolean;
+        updateHexValue(valueString: string): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/inspector/sharedUiComponents/colorPicker/colorPicker" {
+    import * as React from "react";
+    import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
+    /**
+     * Interface used to specify creation options for color picker
+     */
+    export interface IColorPickerProps {
+        color: Color3 | Color4;
+        linearhint?: boolean;
+        debugMode?: boolean;
+        onColorChanged?: (color: Color3 | Color4) => void;
+    }
+    /**
+     * Interface used to specify creation options for color picker
+     */
+    export interface IColorPickerState {
+        color: Color3;
+        alpha: number;
+    }
+    /**
+     * Class used to create a color picker
+     */
+    export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+        private _saturationRef;
+        private _hueRef;
+        private _isSaturationPointerDown;
+        private _isHuePointerDown;
+        constructor(props: IColorPickerProps);
+        shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
+        onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+        onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+        onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
+        onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
+        private _evaluateSaturation;
+        private _evaluateHue;
+        componentDidUpdate(): void;
+        raiseOnColorChanged(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/inspector/sharedUiComponents/lines/colorPickerComponent" {
+    import * as React from "react";
+    import { Color4, Color3 } from "@babylonjs/core/Maths/math.color";
+    export interface IColorPickerComponentProps {
+        value: Color4 | Color3;
+        linearHint?: boolean;
+        onColorChanged: (newOne: string) => void;
+        icon?: string;
+        iconLabel?: string;
+        shouldPopRight?: boolean;
+    }
+    interface IColorPickerComponentState {
+        pickerEnabled: boolean;
+        color: Color3 | Color4;
+        hex: string;
+    }
+    export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+        private _floatRef;
+        private _floatHostRef;
+        constructor(props: IColorPickerComponentProps);
+        syncPositions(): void;
+        shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
+        componentDidUpdate(): void;
+        componentDidMount(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/inspector/sharedUiComponents/propertyChangedEvent" {
+    export class PropertyChangedEvent {
+        object: any;
+        property: string;
+        value: any;
+        initialValue: any;
+        allowNullValue?: boolean;
+    }
+}
+declare module "@babylonjs/inspector/sharedUiComponents/lines/checkBoxLineComponent" {
+    import * as React from "react";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PropertyChangedEvent } from "@babylonjs/inspector/sharedUiComponents/propertyChangedEvent";
+    export interface ICheckBoxLineComponentProps {
+        label?: string;
+        target?: any;
+        propertyName?: string;
+        isSelected?: () => boolean;
+        onSelect?: (value: boolean) => void;
+        onValueChanged?: () => void;
+        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+        disabled?: boolean;
+        icon?: string;
+        iconLabel?: string;
+        faIcons?: {
+        };
+    }
+    export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
+        isSelected: boolean;
+        isDisabled?: boolean;
+    }> {
+        private static _UniqueIdSeed;
+        private _uniqueId;
+        private _localChange;
+        constructor(props: ICheckBoxLineComponentProps);
+        shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
+            isSelected: boolean;
+            isDisabled: boolean;
+        }): boolean;
+        onChange(): void;
+        render(): JSX.Element;
+    }
+}
+declare module "@babylonjs/inspector/components/actionTabs/tabs/performanceViewer/performanceViewerSidebarComponent" {
+    import { PerformanceViewerCollector } from "@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollector";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { IVisibleRangeChangedObservableProps } from "@babylonjs/inspector/components/graph/graphSupportingTypes";
+    interface IPerformanceViewerSidebarComponentProps {
+        collector: PerformanceViewerCollector;
+        onVisibleRangeChangedObservable?: Observable<IVisibleRangeChangedObservableProps>;
+    }
+    export const PerformanceViewerSidebarComponent: (props: IPerformanceViewerSidebarComponentProps) => JSX.Element;
+}
+declare module "@babylonjs/inspector/components/actionTabs/tabs/performanceViewer/performancePlayheadButtonComponent" {
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import * as React from "react";
+    interface IPerformancePlayheadButtonProps {
+        returnToPlayhead: Observable<void>;
+    }
+    export const PerformancePlayheadButtonComponent: React.FC<IPerformancePlayheadButtonProps>;
+}
 declare module "@babylonjs/inspector/components/graph/canvasGraphService" {
     import { ICanvasGraphServiceSettings, IPerfLayoutSize } from "@babylonjs/inspector/components/graph/graphSupportingTypes";
     import { IPerfDatasets, IPerfMetadata } from "@babylonjs/core/Misc/interfaces/iPerfViewer";
@@ -328,6 +499,7 @@ declare module "@babylonjs/inspector/components/graph/canvasGraphService" {
         private _tickerItems;
         private _preprocessedTooltipInfo;
         private _numberOfTickers;
+        private _onVisibleRangeChangedObservable?;
         private readonly _addonFontLineHeight;
         private readonly _defaultLineHeight;
         readonly datasets: IPerfDatasets;
@@ -536,174 +708,46 @@ declare module "@babylonjs/inspector/components/graph/canvasGraphService" {
     }
 }
 declare module "@babylonjs/inspector/components/graph/canvasGraphComponent" {
-    import { PerformanceViewerCollector } from '@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollector';
-    import { Observable } from '@babylonjs/core/Misc/observable';
-    import * as React from 'react';
-    import { IPerfLayoutSize } from "@babylonjs/inspector/components/graph/graphSupportingTypes";
-    import { Scene } from '@babylonjs/core/scene';
+    import { PerformanceViewerCollector } from "@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollector";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import * as React from "react";
+    import { IPerfLayoutSize, IVisibleRangeChangedObservableProps } from "@babylonjs/inspector/components/graph/graphSupportingTypes";
+    import { Scene } from "@babylonjs/core/scene";
     interface ICanvasGraphComponentProps {
         id: string;
         scene: Scene;
         collector: PerformanceViewerCollector;
         layoutObservable?: Observable<IPerfLayoutSize>;
         returnToPlayheadObservable?: Observable<void>;
+        onVisibleRangeChangedObservable?: Observable<IVisibleRangeChangedObservableProps>;
     }
     export const CanvasGraphComponent: React.FC<ICanvasGraphComponentProps>;
 }
-declare module "@babylonjs/inspector/components/popupComponent" {
-    import * as React from "react";
-    interface IPopupComponentProps {
-        id: string;
-        title: string;
-        size: {
-            width: number;
-            height: number;
-        };
-        onOpen?: (window: Window) => void;
-        onClose: (window: Window) => void;
-        onResize?: () => void;
-        onKeyUp?: (evt: KeyboardEvent) => void;
-        onKeyDown?: (evt: KeyboardEvent) => void;
-    }
-    export class PopupComponent extends React.Component<IPopupComponentProps, {
-        isComponentMounted: boolean;
-        blockedByBrowser: boolean;
-    }> {
-        private _container;
-        private _window;
-        private _host;
-        constructor(props: IPopupComponentProps);
-        componentDidMount(): void;
-        openPopup(): void;
-        componentWillUnmount(): void;
-        getWindow(): Window | null;
-        render(): React.ReactPortal | null;
-    }
-}
-declare module "@babylonjs/inspector/sharedUiComponents/colorPicker/colorComponentEntry" {
+declare module "@babylonjs/inspector/components/actionTabs/tabs/performanceViewer/performanceViewerPopupComponent" {
     import * as React from "react";
-    export interface IColorComponentEntryProps {
-        value: number;
-        label: string;
-        max?: number;
-        min?: number;
-        onChange: (value: number) => void;
-    }
-    export class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
-        constructor(props: IColorComponentEntryProps);
-        updateValue(valueString: string): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/inspector/sharedUiComponents/colorPicker/hexColor" {
-    import * as React from "react";
-    export interface IHexColorProps {
-        value: string;
-        expectedLength: number;
-        onChange: (value: string) => void;
-    }
-    export class HexColor extends React.Component<IHexColorProps, {
-        hex: string;
-    }> {
-        constructor(props: IHexColorProps);
-        shouldComponentUpdate(nextProps: IHexColorProps, nextState: {
-            hex: string;
-        }): boolean;
-        updateHexValue(valueString: string): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/inspector/sharedUiComponents/colorPicker/colorPicker" {
-    import * as React from "react";
-    import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
-    /**
-     * Interface used to specify creation options for color picker
-     */
-    export interface IColorPickerProps {
-        color: Color3 | Color4;
-        linearhint?: boolean;
-        debugMode?: boolean;
-        onColorChanged?: (color: Color3 | Color4) => void;
-    }
-    /**
-     * Interface used to specify creation options for color picker
-     */
-    export interface IColorPickerState {
-        color: Color3;
-        alpha: number;
-    }
-    /**
-     * Class used to create a color picker
-     */
-    export class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
-        private _saturationRef;
-        private _hueRef;
-        private _isSaturationPointerDown;
-        private _isHuePointerDown;
-        constructor(props: IColorPickerProps);
-        shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
-        onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
-        onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
-        onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
-        onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
-        onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
-        onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>): void;
-        private _evaluateSaturation;
-        private _evaluateHue;
-        componentDidUpdate(): void;
-        raiseOnColorChanged(): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/inspector/sharedUiComponents/lines/colorPickerComponent" {
-    import * as React from "react";
-    import { Color4, Color3 } from '@babylonjs/core/Maths/math.color';
-    export interface IColorPickerComponentProps {
-        value: Color4 | Color3;
-        linearHint?: boolean;
-        onColorChanged: (newOne: string) => void;
-        icon?: string;
-        iconLabel?: string;
-        shouldPopRight?: boolean;
-    }
-    interface IColorPickerComponentState {
-        pickerEnabled: boolean;
-        color: Color3 | Color4;
-        hex: string;
-    }
-    export class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
-        private _floatRef;
-        private _floatHostRef;
-        constructor(props: IColorPickerComponentProps);
-        syncPositions(): void;
-        shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
-        componentDidUpdate(): void;
-        componentDidMount(): void;
-        render(): JSX.Element;
-    }
-}
-declare module "@babylonjs/inspector/components/actionTabs/tabs/performanceViewer/performanceViewerSidebarComponent" {
-    import { PerformanceViewerCollector } from '@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollector';
-    interface IPerformanceViewerSidebarComponentProps {
-        collector: PerformanceViewerCollector;
-    }
-    export const PerformanceViewerSidebarComponent: (props: IPerformanceViewerSidebarComponentProps) => JSX.Element;
-}
-declare module "@babylonjs/inspector/components/actionTabs/tabs/performanceViewer/performancePlayheadButtonComponent" {
-    import { Observable } from '@babylonjs/core/Misc/observable';
-    import * as React from 'react';
-    interface IPerformancePlayheadButtonProps {
-        returnToPlayhead: Observable<void>;
+    import { Scene } from "@babylonjs/core/scene";
+    import { Observable } from "@babylonjs/core/Misc/observable";
+    import { PerformanceViewerCollector } from "@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollector";
+    import { IPerfLayoutSize } from "@babylonjs/inspector/components/graph/graphSupportingTypes";
+    interface IPerformanceViewerPopupComponentProps {
+        scene: Scene;
+        layoutObservable: Observable<IPerfLayoutSize>;
+        returnToLiveObservable: Observable<void>;
+        performanceCollector: PerformanceViewerCollector;
     }
-    export const PerformancePlayheadButtonComponent: React.FC<IPerformancePlayheadButtonProps>;
+    export const PerformanceViewerPopupComponent: React.FC<IPerformanceViewerPopupComponentProps>;
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/performanceViewer/performanceViewerComponent" {
     import { Scene } from "@babylonjs/core/scene";
     import * as React from "react";
-    import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerSceneExtension';
+    import "@babylonjs/core/Misc/PerformanceViewer/performanceViewerSceneExtension";
     interface IPerformanceViewerComponentProps {
         scene: Scene;
     }
+    export enum IPerfMetadataCategory {
+        Count = "Count",
+        FrameSteps = "Frame Steps Duration"
+    }
     export const PerformanceViewerComponent: React.FC<IPerformanceViewerComponentProps>;
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/statisticsTabComponent" {
@@ -717,47 +761,6 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/statisticsTabCom
         render(): JSX.Element | null;
     }
 }
-declare module "@babylonjs/inspector/sharedUiComponents/propertyChangedEvent" {
-    export class PropertyChangedEvent {
-        object: any;
-        property: string;
-        value: any;
-        initialValue: any;
-        allowNullValue?: boolean;
-    }
-}
-declare module "@babylonjs/inspector/sharedUiComponents/lines/checkBoxLineComponent" {
-    import * as React from "react";
-    import { Observable } from "@babylonjs/core/Misc/observable";
-    import { PropertyChangedEvent } from "@babylonjs/inspector/sharedUiComponents/propertyChangedEvent";
-    export interface ICheckBoxLineComponentProps {
-        label: string;
-        target?: any;
-        propertyName?: string;
-        isSelected?: () => boolean;
-        onSelect?: (value: boolean) => void;
-        onValueChanged?: () => void;
-        onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-        disabled?: boolean;
-        icon?: string;
-        iconLabel?: string;
-    }
-    export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, {
-        isSelected: boolean;
-        isDisabled?: boolean;
-    }> {
-        private static _UniqueIdSeed;
-        private _uniqueId;
-        private _localChange;
-        constructor(props: ICheckBoxLineComponentProps);
-        shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: {
-            isSelected: boolean;
-            isDisabled: boolean;
-        }): boolean;
-        onChange(): void;
-        render(): JSX.Element;
-    }
-}
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/renderGridPropertyGridComponent" {
     import * as React from "react";
     import { Scene } from "@babylonjs/core/scene";
@@ -819,6 +822,7 @@ declare module "@babylonjs/inspector/sharedUiComponents/lines/floatLineComponent
         onEnter?: (newValue: number) => void;
         icon?: string;
         iconLabel?: string;
+        defaultValue?: number;
     }
     export class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
         value: string;
@@ -952,6 +956,7 @@ declare module "@babylonjs/inspector/sharedUiComponents/lines/textInputLineCompo
         iconLabel?: string;
         noUnderline?: boolean;
         numbersOnly?: boolean;
+        delayInput?: boolean;
     }
     export class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
         value: string;
@@ -971,7 +976,7 @@ declare module "@babylonjs/inspector/sharedUiComponents/lines/color3LineComponen
     import * as React from "react";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/inspector/sharedUiComponents/propertyChangedEvent";
-    import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
+    import { Color3, Color4 } from "@babylonjs/core/Maths/math.color";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     export interface IColor3LineComponentProps {
         label: string;
@@ -1095,7 +1100,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/cu
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { IInspectable } from '@babylonjs/core/Misc/iInspectable';
+    import { IInspectable } from "@babylonjs/core/Misc/iInspectable";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ICustomPropertyGridComponentProps {
         globalState: GlobalState;
@@ -1111,6 +1116,36 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/cu
         render(): JSX.Element | null;
     }
 }
+declare module "@babylonjs/inspector/components/popupComponent" {
+    import * as React from "react";
+    export interface IPopupComponentProps {
+        id: string;
+        title: string;
+        size: {
+            width: number;
+            height: number;
+        };
+        onOpen?: (window: Window) => void;
+        onClose: (window: Window) => void;
+        onResize?: (window: Window) => void;
+        onKeyUp?: (evt: KeyboardEvent) => void;
+        onKeyDown?: (evt: KeyboardEvent) => void;
+    }
+    export class PopupComponent extends React.Component<IPopupComponentProps, {
+        isComponentMounted: boolean;
+        blockedByBrowser: boolean;
+    }> {
+        private _container;
+        private _window;
+        private _host;
+        constructor(props: IPopupComponentProps);
+        componentDidMount(): void;
+        openPopup(): void;
+        componentWillUnmount(): void;
+        getWindow(): Window | null;
+        render(): React.ReactPortal | null;
+    }
+}
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/animations/curveEditor/graph/curve" {
     import { Animation } from "@babylonjs/core/Animations/animation";
     import { AnimationKeyInterpolation } from "@babylonjs/core/Animations/animationKey";
@@ -1277,7 +1312,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/an
         onValueSet: Observable<number>;
         onValueManuallyEntered: Observable<number>;
         onFrameRequired: Observable<void>;
-        onNewKeyPointRequired: Observable<void>;
+        onCreateOrUpdateKeyPointRequired: Observable<void>;
         onFlattenTangentRequired: Observable<void>;
         onLinearTangentRequired: Observable<void>;
         onBreakTangentRequired: Observable<void>;
@@ -1318,6 +1353,15 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/an
         getAnimationSortIndex(animation: Animation): number;
         getPrevKey(): Nullable<number>;
         getNextKey(): Nullable<number>;
+        /**
+         * If any current active animation has a key at the received frameNumber,
+         * return the index of the animation in the active animation array, and
+         * the index of the frame on the animation.
+         */
+        getKeyAtAnyFrameIndex(frameNumber: number): {
+            animationIndex: number;
+            keyIndex: number;
+        } | null;
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/animations/curveEditor/controls/textInputComponent" {
@@ -1447,7 +1491,6 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/an
         private _onClipLengthDecreasedObserver;
         constructor(props: IBottomBarComponentProps);
         private _changeClipLength;
-        private _getKeyAtFrame;
         componentWillUnmount(): void;
         render(): JSX.Element;
     }
@@ -2117,9 +2160,9 @@ declare module "@babylonjs/inspector/components/actionTabs/lines/textureLineComp
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/toolBar" {
-    import * as React from 'react';
+    import * as React from "react";
     import { IToolData, IToolType, IMetadata } from "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/textureEditorComponent";
-    import { Color4 } from '@babylonjs/core/Maths/math.color';
+    import { Color4 } from "@babylonjs/core/Maths/math.color";
     export interface ITool extends IToolData {
         instance: IToolType;
     }
@@ -2147,12 +2190,12 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/channelsBar" {
-    import * as React from 'react';
+    import * as React from "react";
     export interface IChannel {
         visible: boolean;
         editable: boolean;
         name: string;
-        id: 'R' | 'G' | 'B' | 'A';
+        id: "R" | "G" | "B" | "A";
         icon: any;
     }
     interface IChannelsBarProps {
@@ -2289,10 +2332,10 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/propertiesBar" {
-    import * as React from 'react';
-    import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture';
+    import * as React from "react";
+    import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture";
     import { IPixelData } from "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/textureCanvasManager";
-    import { ISize } from '@babylonjs/core/Maths/math.size';
+    import { ISize } from "@babylonjs/core/Maths/math.size";
     interface IPropertiesBarProps {
         texture: BaseTexture;
         size: ISize;
@@ -2327,8 +2370,8 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/bottomBar" {
-    import * as React from 'react';
-    import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture';
+    import * as React from "react";
+    import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture";
     interface IBottomBarProps {
         texture: BaseTexture;
         mipLevel: number;
@@ -2338,8 +2381,8 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/textureCanvasComponent" {
-    import * as React from 'react';
-    import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture';
+    import * as React from "react";
+    import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture";
     interface ITextureCanvasComponentProps {
         canvasUI: React.RefObject<HTMLCanvasElement>;
         canvas2D: React.RefObject<HTMLCanvasElement>;
@@ -2371,7 +2414,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
     export default _default;
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/toolSettings" {
-    import * as React from 'react';
+    import * as React from "react";
     import { ITool } from "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/toolBar";
     interface IToolSettingsProps {
         tool: ITool | undefined;
@@ -2381,15 +2424,15 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/textureEditorComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     import { IPixelData } from "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/textureCanvasManager";
     import { ITool } from "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/toolBar";
     import { IChannel } from "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/textures/channelsBar";
-    import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture';
-    import { Scene } from '@babylonjs/core/scene';
-    import { ISize } from '@babylonjs/core/Maths/math.size';
-    import { Vector2 } from '@babylonjs/core/Maths/math.vector';
-    import { PointerInfo } from '@babylonjs/core/Events/pointerEvents';
+    import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture";
+    import { Scene } from "@babylonjs/core/scene";
+    import { ISize } from "@babylonjs/core/Maths/math.size";
+    import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+    import { PointerInfo } from "@babylonjs/core/Events/pointerEvents";
     import { PopupComponent } from "@babylonjs/inspector/components/popupComponent";
     interface ITextureEditorComponentProps {
         texture: BaseTexture;
@@ -2504,6 +2547,19 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
         render(): JSX.Element;
     }
 }
+declare module "@babylonjs/inspector/components/sceneExplorer/entities/gui/guiTools" {
+    import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
+    /** Used to pass in the gui-editor package. */
+    export function InjectGUIEditor(guiEditorPackage: any): void;
+    /** Change the URL that the GUI editor loads from */
+    export function SetGUIEditorURL(guiEditorURL: string): void;
+    /**
+     * Opens an ADT in the GUI editor
+     * if you are in an ES6 environment, you must first call InjectGUIEditor to provide the gui-editor package
+     * If you are in a UMD environment, it will load the package from a URL
+    */
+    export function EditAdvancedDynamicTexture(adt: AdvancedDynamicTexture): Promise<void>;
+}
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/materials/texturePropertyGridComponent" {
     import * as React from "react";
     import { Nullable } from "@babylonjs/core/types";
@@ -3294,7 +3350,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/po
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { PostProcess } from '@babylonjs/core/PostProcesses/postProcess';
+    import { PostProcess } from "@babylonjs/core/PostProcesses/postProcess";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     interface ICommonPostProcessPropertyGridComponentProps {
         globalState: GlobalState;
@@ -3331,7 +3387,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/po
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { PostProcessRenderPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipeline';
+    import { PostProcessRenderPipeline } from "@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipeline";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     interface ICommonRenderingPipelinePropertyGridComponentProps {
         globalState: GlobalState;
@@ -3385,7 +3441,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/po
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { SSAORenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssaoRenderingPipeline';
+    import { SSAORenderingPipeline } from "@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssaoRenderingPipeline";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     interface ISSAORenderingPipelinePropertyGridComponentProps {
         globalState: GlobalState;
@@ -3403,7 +3459,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/po
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { SSAO2RenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssao2RenderingPipeline';
+    import { SSAO2RenderingPipeline } from "@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/ssao2RenderingPipeline";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     interface ISSAO2RenderingPipelinePropertyGridComponentProps {
         globalState: GlobalState;
@@ -3422,7 +3478,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/me
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { Skeleton } from '@babylonjs/core/Bones/skeleton';
+    import { Skeleton } from "@babylonjs/core/Bones/skeleton";
     interface ISkeletonPropertyGridComponentProps {
         globalState: GlobalState;
         skeleton: Skeleton;
@@ -3449,7 +3505,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/me
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { Bone } from '@babylonjs/core/Bones/bone';
+    import { Bone } from "@babylonjs/core/Bones/bone";
     interface IBonePropertyGridComponentProps {
         globalState: GlobalState;
         bone: Bone;
@@ -3558,9 +3614,9 @@ declare module "@babylonjs/inspector/sharedUiComponents/lines/vector4LineCompone
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/gradientStepComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock';
+    import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock";
     interface IGradientStepComponentProps {
         globalState: GlobalState;
         step: GradientBlockColorStep;
@@ -3590,7 +3646,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyComponen
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/gradientNodePropertyComponent" {
     import * as React from "react";
-    import { GradientBlockColorStep } from '@babylonjs/core/Materials/Node/Blocks/gradientBlock';
+    import { GradientBlockColorStep } from "@babylonjs/core/Materials/Node/Blocks/gradientBlock";
     import { IPropertyComponentProps } from "@babylonjs/inspector/components/actionTabs/tabs/propertyComponentProps";
     export class GradientPropertyTabComponent extends React.Component<IPropertyComponentProps> {
         private _gradientBlock;
@@ -3646,7 +3702,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { InputBlock } from '@babylonjs/core/Materials/Node/Blocks/Input/inputBlock';
+    import { InputBlock } from "@babylonjs/core/Materials/Node/Blocks/Input/inputBlock";
     interface INodeMaterialPropertyGridComponentProps {
         globalState: GlobalState;
         material: NodeMaterial;
@@ -3670,8 +3726,8 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ma
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { Material } from '@babylonjs/core/Materials/material';
-    import { MultiMaterial } from '@babylonjs/core/Materials/multiMaterial';
+    import { Material } from "@babylonjs/core/Materials/material";
+    import { MultiMaterial } from "@babylonjs/core/Materials/multiMaterial";
     interface IMultiMaterialPropertyGridComponentProps {
         globalState: GlobalState;
         material: MultiMaterial;
@@ -3691,7 +3747,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
-    import { BoxParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/boxParticleEmitter';
+    import { BoxParticleEmitter } from "@babylonjs/core/Particles/EmitterTypes/boxParticleEmitter";
     interface IBoxEmitterGridComponentProps {
         globalState: GlobalState;
         emitter: BoxParticleEmitter;
@@ -3707,7 +3763,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
-    import { ConeParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/coneParticleEmitter';
+    import { ConeParticleEmitter } from "@babylonjs/core/Particles/EmitterTypes/coneParticleEmitter";
     interface IConeEmitterGridComponentProps {
         globalState: GlobalState;
         emitter: ConeParticleEmitter;
@@ -3724,7 +3780,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
-    import { CylinderParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/cylinderParticleEmitter';
+    import { CylinderParticleEmitter } from "@babylonjs/core/Particles/EmitterTypes/cylinderParticleEmitter";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     interface ICylinderEmitterGridComponentProps {
         globalState: GlobalState;
@@ -3743,7 +3799,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { HemisphericParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/hemisphericParticleEmitter';
+    import { HemisphericParticleEmitter } from "@babylonjs/core/Particles/EmitterTypes/hemisphericParticleEmitter";
     interface IHemisphericEmitterGridComponentProps {
         globalState: GlobalState;
         emitter: HemisphericParticleEmitter;
@@ -3761,7 +3817,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { PointParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/pointParticleEmitter';
+    import { PointParticleEmitter } from "@babylonjs/core/Particles/EmitterTypes/pointParticleEmitter";
     interface IPointEmitterGridComponentProps {
         globalState: GlobalState;
         emitter: PointParticleEmitter;
@@ -3779,7 +3835,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { SphereParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/sphereParticleEmitter';
+    import { SphereParticleEmitter } from "@babylonjs/core/Particles/EmitterTypes/sphereParticleEmitter";
     interface ISphereEmitterGridComponentProps {
         globalState: GlobalState;
         emitter: SphereParticleEmitter;
@@ -3794,9 +3850,9 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
 declare module "@babylonjs/inspector/components/actionTabs/lines/meshPickerComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { Observable } from '@babylonjs/core/Misc/observable';
+    import { Observable } from "@babylonjs/core/Misc/observable";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
-    import { Scene } from '@babylonjs/core/scene';
+    import { Scene } from "@babylonjs/core/scene";
     interface IMeshPickerComponentProps {
         globalState: GlobalState;
         target: any;
@@ -3816,8 +3872,8 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { MeshParticleEmitter } from '@babylonjs/core/Particles/EmitterTypes/meshParticleEmitter';
-    import { Scene } from '@babylonjs/core/scene';
+    import { MeshParticleEmitter } from "@babylonjs/core/Particles/EmitterTypes/meshParticleEmitter";
+    import { Scene } from "@babylonjs/core/scene";
     interface IMeshEmitterGridComponentProps {
         globalState: GlobalState;
         emitter: MeshParticleEmitter;
@@ -3832,11 +3888,11 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/particleSystems/factorGradientStepGridComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { FactorGradient } from '@babylonjs/core/Misc/gradients';
+    import { FactorGradient } from "@babylonjs/core/Misc/gradients";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { IParticleSystem } from '@babylonjs/core/Particles/IParticleSystem';
+    import { IParticleSystem } from "@babylonjs/core/Particles/IParticleSystem";
     interface IFactorGradientStepGridComponent {
         globalState: GlobalState;
         gradient: FactorGradient;
@@ -3869,11 +3925,11 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     }
 }
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/particleSystems/colorGradientStepGridComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { ColorGradient, Color3Gradient } from '@babylonjs/core/Misc/gradients';
+    import { ColorGradient, Color3Gradient } from "@babylonjs/core/Misc/gradients";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { IParticleSystem } from '@babylonjs/core/Particles/IParticleSystem';
+    import { IParticleSystem } from "@babylonjs/core/Particles/IParticleSystem";
     interface IColorGradientStepGridComponent {
         globalState: GlobalState;
         gradient: ColorGradient | Color3Gradient;
@@ -3917,10 +3973,10 @@ declare module "@babylonjs/inspector/sharedUiComponents/lines/linkButtonComponen
 declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/particleSystems/valueGradientGridComponent" {
     import * as React from "react";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { IValueGradient } from '@babylonjs/core/Misc/gradients';
+    import { IValueGradient } from "@babylonjs/core/Misc/gradients";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
-    import { Nullable } from '@babylonjs/core/types';
-    import { IParticleSystem } from '@babylonjs/core/Particles/IParticleSystem';
+    import { Nullable } from "@babylonjs/core/types";
+    import { IParticleSystem } from "@babylonjs/core/Particles/IParticleSystem";
     export enum GradientGridMode {
         Factor = 0,
         Color3 = 1,
@@ -3952,7 +4008,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/pa
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { IParticleSystem } from '@babylonjs/core/Particles/IParticleSystem';
+    import { IParticleSystem } from "@babylonjs/core/Particles/IParticleSystem";
     interface IParticleSystemPropertyGridComponentProps {
         globalState: GlobalState;
         system: IParticleSystem;
@@ -3979,7 +4035,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/sp
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager';
+    import { SpriteManager } from "@babylonjs/core/Sprites/spriteManager";
     interface ISpriteManagerPropertyGridComponentProps {
         globalState: GlobalState;
         spriteManager: SpriteManager;
@@ -4005,7 +4061,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/sp
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { Sprite } from '@babylonjs/core/Sprites/sprite';
+    import { Sprite } from "@babylonjs/core/Sprites/sprite";
     interface ISpritePropertyGridComponentProps {
         globalState: GlobalState;
         sprite: Sprite;
@@ -4059,7 +4115,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/ca
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { FollowCamera } from '@babylonjs/core/Cameras/followCamera';
+    import { FollowCamera } from "@babylonjs/core/Cameras/followCamera";
     interface IFollowCameraPropertyGridComponentProps {
         globalState: GlobalState;
         camera: FollowCamera;
@@ -4077,8 +4133,8 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/so
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { Sound } from '@babylonjs/core/Audio/sound';
-    import { IExplorerExtensibilityGroup } from '@babylonjs/core/Debug/debugLayer';
+    import { Sound } from "@babylonjs/core/Audio/sound";
+    import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     interface ISoundPropertyGridComponentProps {
         globalState: GlobalState;
         sound: Sound;
@@ -4097,7 +4153,7 @@ declare module "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/la
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
     import { LockObject } from "@babylonjs/inspector/sharedUiComponents/tabs/propertyGrids/lockObject";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { IExplorerExtensibilityGroup } from '@babylonjs/core/Debug/debugLayer';
+    import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import { EffectLayer } from "@babylonjs/core/Layers/effectLayer";
     interface ILayerPropertyGridComponentProps {
         globalState: GlobalState;
@@ -4376,8 +4432,8 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/lightTree
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/materialTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import { Material } from "@babylonjs/core/Materials/material";
-    import * as React from 'react';
-    import { NodeMaterial } from '@babylonjs/core/Materials/Node/nodeMaterial';
+    import * as React from "react";
+    import { NodeMaterial } from "@babylonjs/core/Materials/Node/nodeMaterial";
     interface IMaterialTreeItemComponentProps {
         material: Material | NodeMaterial;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4391,7 +4447,7 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/materialT
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/textureTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import { Texture } from "@babylonjs/core/Materials/Textures/texture";
-    import * as React from 'react';
+    import * as React from "react";
     interface ITextureTreeItemComponentProps {
         texture: Texture;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4419,7 +4475,7 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/transform
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/gui/controlTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import { Control } from "@babylonjs/gui/2D/controls/control";
-    import * as React from 'react';
+    import * as React from "react";
     interface IControlTreeItemComponentProps {
         control: Control;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4438,8 +4494,8 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/gui/contr
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/gui/advancedDynamicTextureTreeItemComponent" {
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
-    import { AdvancedDynamicTexture } from '@babylonjs/gui/2D/advancedDynamicTexture';
-    import * as React from 'react';
+    import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
+    import * as React from "react";
     interface IAdvancedDynamicTextureTreeItemComponentProps {
         texture: AdvancedDynamicTexture;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4472,8 +4528,8 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/animation
 }
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/postProcessTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
-    import { PostProcess } from '@babylonjs/core/PostProcesses/postProcess';
-    import * as React from 'react';
+    import { PostProcess } from "@babylonjs/core/PostProcesses/postProcess";
+    import * as React from "react";
     interface IPostProcessItemComponentProps {
         postProcess: PostProcess;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4486,8 +4542,8 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/postProce
 }
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/renderingPipelineTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
-    import { PostProcessRenderPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipeline';
-    import * as React from 'react';
+    import { PostProcessRenderPipeline } from "@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipeline";
+    import * as React from "react";
     interface IRenderPipelineItemComponenttProps {
         renderPipeline: PostProcessRenderPipeline;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4501,7 +4557,7 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/rendering
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/skeletonTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import * as React from "react";
-    import { Skeleton } from '@babylonjs/core/Bones/skeleton';
+    import { Skeleton } from "@babylonjs/core/Bones/skeleton";
     interface ISkeletonTreeItemComponentProps {
         skeleton: Skeleton;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4515,7 +4571,7 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/skeletonT
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/boneTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import * as React from "react";
-    import { Bone } from '@babylonjs/core/Bones/bone';
+    import { Bone } from "@babylonjs/core/Bones/bone";
     interface IBoneTreeItemComponenttProps {
         bone: Bone;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4528,8 +4584,8 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/boneTreeI
 }
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/particleSystemTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
-    import * as React from 'react';
-    import { IParticleSystem } from '@babylonjs/core/Particles/IParticleSystem';
+    import * as React from "react";
+    import { IParticleSystem } from "@babylonjs/core/Particles/IParticleSystem";
     interface IParticleSystemTreeItemComponentProps {
         system: IParticleSystem;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4542,8 +4598,8 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/particleS
 }
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/spriteManagerTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
-    import * as React from 'react';
-    import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager';
+    import * as React from "react";
+    import { SpriteManager } from "@babylonjs/core/Sprites/spriteManager";
     interface ISpriteManagerTreeItemComponentProps {
         spriteManager: SpriteManager;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4556,8 +4612,8 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/spriteMan
 }
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/spriteTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
-    import * as React from 'react';
-    import { Sprite } from '@babylonjs/core/Sprites/sprite';
+    import * as React from "react";
+    import { Sprite } from "@babylonjs/core/Sprites/sprite";
     interface ISpriteTreeItemComponentProps {
         sprite: Sprite;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4585,7 +4641,7 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/targetedA
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/soundTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
     import * as React from "react";
-    import { Sound } from '@babylonjs/core/Audio/sound';
+    import { Sound } from "@babylonjs/core/Audio/sound";
     interface ISoundTreeItemComponentProps {
         sound: Sound;
         extensibilityGroups?: IExplorerExtensibilityGroup[];
@@ -4598,7 +4654,7 @@ declare module "@babylonjs/inspector/components/sceneExplorer/entities/soundTree
 }
 declare module "@babylonjs/inspector/components/sceneExplorer/entities/effectLayerPipelineTreeItemComponent" {
     import { IExplorerExtensibilityGroup } from "@babylonjs/core/Debug/debugLayer";
-    import * as React from 'react';
+    import * as React from "react";
     import { EffectLayer } from "@babylonjs/core/Layers/effectLayer";
     interface IEffectLayerItemComponenttProps {
         layer: EffectLayer;
@@ -4800,7 +4856,7 @@ declare module "@babylonjs/inspector/components/embedHost/embedHostComponent" {
     import * as React from "react";
     import { Scene } from "@babylonjs/core/scene";
     import { GlobalState } from "@babylonjs/inspector/components/globalState";
-    import { IExplorerExtensibilityGroup, DebugLayerTab } from '@babylonjs/core/Debug/debugLayer';
+    import { IExplorerExtensibilityGroup, DebugLayerTab } from "@babylonjs/core/Debug/debugLayer";
     interface IEmbedHostComponentProps {
         scene: Scene;
         globalState: GlobalState;
@@ -4824,21 +4880,32 @@ declare module "@babylonjs/inspector/components/embedHost/embedHostComponent" {
     }
 }
 declare module "@babylonjs/inspector/inspector" {
+    import * as React from "react";
     import { IInspectorOptions } from "@babylonjs/core/Debug/debugLayer";
     import { Observable } from "@babylonjs/core/Misc/observable";
     import { Scene } from "@babylonjs/core/scene";
     import { PropertyChangedEvent } from "@babylonjs/inspector/components/propertyChangedEvent";
+    import { IPopupComponentProps } from "@babylonjs/inspector/components/popupComponent";
+    export interface IPersistentPopupConfiguration {
+        props: IPopupComponentProps;
+        children: React.ReactNode;
+        closeWhenSceneExplorerCloses?: boolean;
+        closeWhenActionTabsCloses?: boolean;
+    }
     export class Inspector {
         private static _SceneExplorerHost;
         private static _ActionTabsHost;
         private static _EmbedHost;
         private static _NewCanvasContainer;
+        private static _PersistentPopupHost;
         private static _SceneExplorerWindow;
         private static _ActionTabsWindow;
         private static _EmbedHostWindow;
         private static _Scene;
         private static _OpenedPane;
         private static _OnBeforeRenderObserver;
+        private static _OnSceneExplorerClosedObserver;
+        private static _OnActionTabsClosedObserver;
         static OnSelectionChangeObservable: Observable<any>;
         static OnPropertyChangedObservable: Observable<PropertyChangedEvent>;
         private static _GlobalState;
@@ -4858,6 +4925,8 @@ declare module "@babylonjs/inspector/inspector" {
         private static _Cleanup;
         private static _RemoveElementFromDOM;
         static Hide(): void;
+        static _CreatePersistentPopup(config: IPersistentPopupConfiguration, hostElement: HTMLElement): void;
+        static _ClosePersistentPopup(): void;
     }
 }
 declare module "@babylonjs/inspector/index" {
@@ -4904,7 +4973,7 @@ declare module "@babylonjs/inspector/sharedUiComponents/lines/draggableLineCompo
     }
 }
 declare module "@babylonjs/inspector/sharedUiComponents/lines/iconButtonLineComponent" {
-    import * as React from 'react';
+    import * as React from "react";
     export interface IIconButtonLineComponentProps {
         icon: string;
         onClick: () => void;