@babylonjs/inspector 8.56.2 → 9.1.0

package/lib/components/curveEditor/bottomBar/rangeSelector.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Range selector component - a draggable scrollbar for selecting frame range
+ * @returns The range selector component
+ */
+export declare const RangeSelector: FunctionComponent;

package/lib/components/curveEditor/bottomBar.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Bottom bar component with playback controls and frame navigation.
+ * @returns The BottomBar component.
+ */
+export declare const BottomBar: FunctionComponent;

package/lib/components/curveEditor/canvas/canvas.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Main canvas area containing the graph, playhead, and frame bars
+ * @returns The canvas component
+ */
+export declare const Canvas: FunctionComponent;

package/lib/components/curveEditor/canvas/curve.d.ts

@@ -0,0 +1,14 @@
+import { type FunctionComponent } from "react";
+import { type CurveData } from "./curveData";
+type CurveProps = {
+    curve: CurveData;
+    convertX: (frame: number) => number;
+    convertY: (value: number) => number;
+};
+/**
+ * Curve component that renders an animation curve path
+ * @param props - The curve props
+ * @returns The rendered curve SVG element
+ */
+export declare const Curve: FunctionComponent<CurveProps>;
+export {};

package/lib/components/curveEditor/canvas/curveData.d.ts

@@ -0,0 +1,40 @@
+import { Animation } from "@babylonjs/core/Animations/animation.js";
+import { AnimationKeyInterpolation } from "@babylonjs/core/Animations/animationKey.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+export interface KeyEntry {
+    frame: number;
+    value: number;
+    inTangent?: number;
+    outTangent?: number;
+    lockedTangent: boolean;
+    interpolation?: AnimationKeyInterpolation;
+}
+export declare class CurveData {
+    static readonly SampleRate = 50;
+    keys: KeyEntry[];
+    animation: Animation;
+    color: string;
+    onDataUpdatedObservable: Observable<void>;
+    property?: string;
+    tangentBuilder?: () => any;
+    setDefaultInTangent?: (keyId: number) => any;
+    setDefaultOutTangent?: (keyId: number) => any;
+    siblings: CurveData[];
+    static readonly TangentLength = 50;
+    constructor(color: string, animation: Animation, property?: string, tangentBuilder?: () => any, setDefaultInTangent?: (keyId: number) => any, setDefaultOutTangent?: (keyId: number) => any);
+    getPathData(convertX: (x: number) => number, convertY: (y: number) => number): string;
+    updateLockedTangentMode(keyIndex: number, enabled: boolean): void;
+    updateInterpolationMode(keyIndex: number, interpolationMode: AnimationKeyInterpolation): void;
+    getInControlPoint(keyIndex: number): number | undefined;
+    getOutControlPoint(keyIndex: number): number | undefined;
+    hasDefinedOutTangent(keyIndex: number): boolean;
+    evaluateOutTangent(keyIndex: number): number;
+    hasDefinedInTangent(keyIndex: number): boolean;
+    evaluateInTangent(keyIndex: number): number;
+    storeDefaultInTangent(keyIndex: number): void;
+    storeDefaultOutTangent(keyIndex: number): void;
+    updateInTangentFromControlPoint(keyId: number, slope: number): void;
+    updateOutTangentFromControlPoint(keyId: number, slope: number): void;
+    updateKeyFrame(keyId: number, frame: number): void;
+    updateKeyValue(keyId: number, value: number): void;
+}

package/lib/components/curveEditor/canvas/frameBar.d.ts

@@ -0,0 +1,12 @@
+import { type FunctionComponent } from "react";
+type FrameBarProps = {
+    /** Width of the frame bar */
+    width: number;
+};
+/**
+ * Frame bar showing frame numbers along the top of the graph
+ * @param props - The component props
+ * @returns The frame bar component
+ */
+export declare const FrameBar: FunctionComponent<FrameBarProps>;
+export {};

package/lib/components/curveEditor/canvas/graph.d.ts

@@ -0,0 +1,11 @@
+import { type FunctionComponent } from "react";
+type GraphProps = {
+    width: number;
+    height: number;
+};
+/**
+ * Main graph area for displaying and editing animation curves
+ * @returns The graph component
+ */
+export declare const Graph: FunctionComponent<GraphProps>;
+export {};

package/lib/components/curveEditor/canvas/keyPoint.d.ts

@@ -0,0 +1,34 @@
+import { type Nullable } from "@babylonjs/core/types.js";
+import * as React from "react";
+import { type CurveData } from "./curveData";
+/** Selection state for key points */
+export declare enum SelectionState {
+    None = 0,
+    Selected = 1,
+    Siblings = 2
+}
+/** Props for the KeyPointComponent */
+interface IKeyPointComponentProps {
+    x: number;
+    y: number;
+    getPreviousX: () => Nullable<number>;
+    getNextX: () => Nullable<number>;
+    invertX: (x: number) => number;
+    invertY: (y: number) => number;
+    convertX: (x: number) => number;
+    convertY: (y: number) => number;
+    scale: number;
+    keyId: number;
+    curve: CurveData;
+    channel: string;
+    onFrameValueChanged: (value: number) => void;
+    onKeyValueChanged: (value: number) => void;
+}
+/**
+ * KeyPointComponent - Renders a single key point on the curve editor
+ * Handles selection, dragging, and tangent manipulation
+ * @param props - The component props
+ * @returns The rendered key point SVG element
+ */
+export declare const KeyPointComponent: React.FunctionComponent<IKeyPointComponentProps>;
+export default KeyPointComponent;

package/lib/components/curveEditor/canvas/playHead.d.ts

@@ -0,0 +1,12 @@
+import { type FunctionComponent } from "react";
+type PlayHeadProps = {
+    width: number;
+    height: number;
+};
+/**
+ * Playhead component showing current frame position
+ * Uses direct DOM manipulation (like v1) to avoid render cycle flashing during animation
+ * @returns The playhead component
+ */
+export declare const PlayHead: FunctionComponent<PlayHeadProps>;
+export {};

package/lib/components/curveEditor/canvas/rangeFrameBar.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent } from "react";
+type RangeFrameBarProps = {
+    width: number;
+};
+/**
+ * Range frame bar showing frame tick marks and keyframe indicators
+ * @returns The range frame bar component
+ */
+export declare const RangeFrameBar: FunctionComponent<RangeFrameBarProps>;
+export {};

package/lib/components/curveEditor/curveEditor.d.ts

@@ -0,0 +1,29 @@
+import { type FunctionComponent } from "react";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type Animation } from "@babylonjs/core/Animations/animation.js";
+import { type TargetedAnimation, type AnimationGroup } from "@babylonjs/core/Animations/animationGroup.js";
+import { type Scene } from "@babylonjs/core/scene.js";
+import { type IAnimatable } from "@babylonjs/core/Animations/animatable.interface.js";
+/**
+ * Props for the CurveEditor component
+ */
+export type CurveEditorProps = {
+    /** The scene */
+    scene: Scene;
+    /** Target animatable */
+    target: Nullable<IAnimatable>;
+    /** Animations to edit */
+    animations: Nullable<Animation[] | TargetedAnimation[]>;
+    /** Root animation group if any */
+    rootAnimationGroup?: Nullable<AnimationGroup>;
+    /** Editor title */
+    title?: string;
+    /** Whether using targeted animations */
+    useTargetAnimations?: boolean;
+};
+/**
+ * Animation Curve Editor component for editing animation keyframes and curves
+ * @param props - The component props
+ * @returns The curve editor component
+ */
+export declare const CurveEditor: FunctionComponent<CurveEditorProps>;

package/lib/components/curveEditor/curveEditorButton.d.ts

@@ -0,0 +1,31 @@
+import { type FunctionComponent } from "react";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type Animation } from "@babylonjs/core/Animations/animation.js";
+import { type TargetedAnimation, type AnimationGroup } from "@babylonjs/core/Animations/animationGroup.js";
+import { type Scene } from "@babylonjs/core/scene.js";
+import { type IAnimatable } from "@babylonjs/core/Animations/animatable.interface.js";
+/**
+ * Props for the CurveEditorButton component
+ */
+export type CurveEditorButtonProps = {
+    /** The scene */
+    scene: Scene;
+    /** Target animatable */
+    target: Nullable<IAnimatable>;
+    /** Animations to edit */
+    animations: Nullable<Animation[] | TargetedAnimation[]>;
+    /** Root animation group if any */
+    rootAnimationGroup?: Nullable<AnimationGroup>;
+    /** Editor title */
+    title?: string;
+    /** Whether using targeted animations */
+    useTargetAnimations?: boolean;
+    /** Button label */
+    label?: string;
+};
+/**
+ * Button component that opens the Animation Curve Editor in a popup window
+ * @param props - The component props
+ * @returns The button component
+ */
+export declare const CurveEditorButton: FunctionComponent<CurveEditorButtonProps>;

package/lib/components/curveEditor/curveEditorColors.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Color constants for the curve editor
+ * These colors are used consistently across the curve editor UI for
+ * representing different animation channels and UI elements.
+ */
+/**
+ * Channel colors for multi-component animations (vectors, colors, quaternions)
+ */
+export declare const ChannelColors: {
+    /** Red channel / X component */
+    readonly X: "#DB3E3E";
+    /** Green channel / Y component */
+    readonly Y: "#51E22D";
+    /** Blue channel / Z component */
+    readonly Z: "#00A3FF";
+    /** W component (quaternions) */
+    readonly W: "#8700FF";
+    /** Alpha channel */
+    readonly ALPHA: "#FFFFFF";
+};
+/**
+ * Aliases for color channels (R, G, B map to X, Y, Z)
+ */
+export declare const ColorChannelColors: {
+    /** Red channel */
+    readonly R: "#DB3E3E";
+    /** Green channel */
+    readonly G: "#51E22D";
+    /** Blue channel */
+    readonly B: "#00A3FF";
+    /** Alpha channel */
+    readonly A: "#FFFFFF";
+};
+/**
+ * Default curve color for single-component (float) animations
+ */
+export declare const DefaultCurveColor = "#ffffff";
+/**
+ * Graph UI colors
+ */
+export declare const GraphColors: {
+    /** Zero line color */
+    readonly zeroLine: "#666666";
+    /** Selection rectangle stroke */
+    readonly selectionStroke: "#ffffff";
+    /** Value axis label color */
+    readonly valueAxisLabel: "#555555";
+    /** Value axis background */
+    readonly valueAxisBackground: "#111111";
+    /** Selected keypoint color (gold) */
+    readonly selectedKeypoint: "#FFD700";
+    /** Default keypoint stroke color */
+    readonly keypointStroke: "#ffffff";
+    /** Tangent handle color */
+    readonly tangentHandle: "#FFD700";
+};

package/lib/components/curveEditor/curveEditorContext.d.ts

@@ -0,0 +1,267 @@
+import { type Dispatch, type FunctionComponent, type PropsWithChildren, type SetStateAction } from "react";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type Animation } from "@babylonjs/core/Animations/animation.js";
+import { type TargetedAnimation, type AnimationGroup } from "@babylonjs/core/Animations/animationGroup.js";
+import { type Scene } from "@babylonjs/core/scene.js";
+import { type IAnimatable } from "@babylonjs/core/Animations/animatable.interface.js";
+import { type AnimationKeyInterpolation } from "@babylonjs/core/Animations/animationKey.js";
+import { type CurveData } from "./canvas/curveData";
+/**
+ * Represents a key point on a curve
+ */
+export type KeyPoint = {
+    /** The curve data this key point belongs to */
+    curve: CurveData;
+    /** The key index in the animation */
+    keyId: number;
+};
+/** Payload sent when a main key point is designated for multi-point coordination */
+export type MainKeyPointInfo = {
+    x: number;
+    y: number;
+    curve: CurveData;
+    keyId: number;
+};
+/** Payload sent when the main key point moves during drag */
+export type MainKeyPointPosition = {
+    x: number;
+    y: number;
+};
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+/**
+ * Options for active animation changed event
+ */
+export type ActiveAnimationChangedOptions = {
+    /** Whether to evaluate keys */
+    evaluateKeys?: boolean;
+    /** Whether to update frame */
+    frame?: boolean;
+    /** Whether to update range */
+    range?: boolean;
+};
+/**
+ * State for the curve editor
+ */
+export type CurveEditorState = {
+    /** Editor title */
+    title: string;
+    /** All animations in the editor */
+    animations: Nullable<Animation[] | TargetedAnimation[]>;
+    /** The scene */
+    scene: Scene;
+    /** Target animatable */
+    target: Nullable<IAnimatable>;
+    /** Root animation group if any */
+    rootAnimationGroup: Nullable<AnimationGroup>;
+    /** Currently active/selected animations */
+    activeAnimations: Animation[];
+    /** Active color channels by animation ID */
+    activeChannels: {
+        [key: number]: string;
+    };
+    /** Currently selected key points */
+    activeKeyPoints: Nullable<KeyPoint[]>;
+    /** The main/primary selected key point */
+    mainKeyPoint: Nullable<KeyPoint>;
+    /** Snippet ID for sharing */
+    snippetId: string;
+    /** Whether using targeted animations */
+    useTargetAnimations: boolean;
+    /** Current playhead frame */
+    activeFrame: number;
+    /** Start of visible/play range */
+    fromKey: number;
+    /** End of visible/play range */
+    toKey: number;
+    /** Whether to use existing play range */
+    useExistingPlayRange: boolean;
+    /** Playback direction */
+    forwardAnimation: boolean;
+    /** Whether animation is playing */
+    isPlaying: boolean;
+    /** Total clip length in frames */
+    clipLength: number;
+    /** Minimum reference frame */
+    referenceMinFrame: number;
+    /** Maximum reference frame */
+    referenceMaxFrame: number;
+    /** Whether an input is focused */
+    focusedInput: boolean;
+    /** Lock last frame value */
+    lockLastFrameValue: boolean;
+    /** Lock last frame frame number */
+    lockLastFrameFrame: boolean;
+};
+/**
+ * Actions available in the curve editor
+ */
+export type CurveEditorActions = {
+    /** Set active animations */
+    setActiveAnimations: Dispatch<SetStateAction<Animation[]>>;
+    /** Set active frame */
+    setActiveFrame: Dispatch<SetStateAction<number>>;
+    /** Set from key */
+    setFromKey: Dispatch<SetStateAction<number>>;
+    /** Set to key */
+    setToKey: Dispatch<SetStateAction<number>>;
+    /** Set is playing */
+    setIsPlaying: Dispatch<SetStateAction<boolean>>;
+    /** Set clip length */
+    setClipLength: Dispatch<SetStateAction<number>>;
+    /** Set reference max frame */
+    setReferenceMaxFrame: Dispatch<SetStateAction<number>>;
+    /** Set focused input */
+    setFocusedInput: Dispatch<SetStateAction<boolean>>;
+    /** Set active key points */
+    setActiveKeyPoints: Dispatch<SetStateAction<Nullable<KeyPoint[]>>>;
+    /** Set main key point */
+    setMainKeyPoint: Dispatch<SetStateAction<Nullable<KeyPoint>>>;
+    /** Set active channels */
+    setActiveChannels: Dispatch<SetStateAction<{
+        [key: number]: string;
+    }>>;
+    /** Play animation */
+    play: (forward: boolean) => void;
+    /** Stop animation */
+    stop: () => void;
+    /** Move to specific frame */
+    moveToFrame: (frame: number) => void;
+    /** Refresh target state */
+    refreshTarget: () => void;
+    /** Clear key point selection */
+    clearSelection: () => void;
+    /** Enable a channel for an animation */
+    enableChannel: (animation: Animation, color: string) => void;
+    /** Disable a channel for an animation */
+    disableChannel: (animation: Animation) => void;
+    /** Check if channel is enabled */
+    isChannelEnabled: (animation: Animation, color: string) => boolean;
+    /** Get active channel color */
+    getActiveChannel: (animation: Animation) => string | undefined;
+    /** Reset all active channels */
+    resetAllActiveChannels: () => void;
+    /** Get previous key frame */
+    getPrevKey: () => Nullable<number>;
+    /** Get next key frame */
+    getNextKey: () => Nullable<number>;
+    /** Prepare the editor */
+    prepare: () => void;
+};
+/**
+ * Observables for curve editor events
+ */
+export type CurveEditorObservables = {
+    /** Fired when active animation changes */
+    onActiveAnimationChanged: Observable<ActiveAnimationChangedOptions>;
+    /** Fired when active key point changes */
+    onActiveKeyPointChanged: Observable<void>;
+    /** Fired when host window is resized */
+    onHostWindowResized: Observable<void>;
+    /** Fired to select all keys */
+    onSelectAllKeys: Observable<void>;
+    /** Fired when active key frame changes */
+    onActiveKeyFrameChanged: Observable<number>;
+    /** Fired when frame is set */
+    onFrameSet: Observable<number>;
+    /** Fired when frame is manually entered */
+    onFrameManuallyEntered: Observable<number>;
+    /** Fired when main key point is set for multi-point coordination */
+    onMainKeyPointSet: Observable<MainKeyPointInfo>;
+    /** Fired when main key point moves during drag */
+    onMainKeyPointMoved: Observable<MainKeyPointPosition>;
+    /** Fired when value is set */
+    onValueSet: Observable<number>;
+    /** Fired when value is manually entered */
+    onValueManuallyEntered: Observable<number>;
+    /** Fired when frame is required */
+    onFrameRequired: Observable<void>;
+    /** Fired when create or update key point is required */
+    onCreateOrUpdateKeyPointRequired: Observable<void>;
+    /** Fired when flatten tangent is required */
+    onFlattenTangentRequired: Observable<void>;
+    /** Fired when linear tangent is required */
+    onLinearTangentRequired: Observable<void>;
+    /** Fired when break tangent is required */
+    onBreakTangentRequired: Observable<void>;
+    /** Fired when unify tangent is required */
+    onUnifyTangentRequired: Observable<void>;
+    /** Fired when step tangent is required */
+    onStepTangentRequired: Observable<void>;
+    /** Fired when animation should be deleted */
+    onDeleteAnimation: Observable<Animation>;
+    /** Fired when graph is moved */
+    onGraphMoved: Observable<number>;
+    /** Fired when graph is scaled */
+    onGraphScaled: Observable<number>;
+    /** Fired when range is updated */
+    onRangeUpdated: Observable<void>;
+    /** Fired when move to frame is required */
+    onMoveToFrameRequired: Observable<number>;
+    /** Fired when animation state changes */
+    onAnimationStateChanged: Observable<void>;
+    /** Fired when delete active key points is required */
+    onDeleteKeyActiveKeyPoints: Observable<void>;
+    /** Fired when selection rectangle is moved */
+    onSelectionRectangleMoved: Observable<DOMRect>;
+    /** Fired when animations are loaded */
+    onAnimationsLoaded: Observable<void>;
+    /** Fired when clip length is increased */
+    onClipLengthIncreased: Observable<number>;
+    /** Fired when clip length is decreased */
+    onClipLengthDecreased: Observable<number>;
+    /** Fired when interpolation mode is set */
+    onInterpolationModeSet: Observable<{
+        keyId: number;
+        value: AnimationKeyInterpolation;
+    }>;
+    /** Fired when select to is activated */
+    onSelectToActivated: Observable<{
+        from: number;
+        to: number;
+    }>;
+    /** Fired when range frame bar is resized */
+    onRangeFrameBarResized: Observable<number>;
+    /** Fired when playhead is moved */
+    onPlayheadMoved: Observable<number>;
+    /** Fired when active key data changes */
+    onActiveKeyDataChanged: Observable<number>;
+};
+/**
+ * Combined context value
+ */
+export type CurveEditorContextValue = {
+    /** Editor state */
+    state: CurveEditorState;
+    /** Editor actions */
+    actions: CurveEditorActions;
+    /** Editor observables */
+    observables: CurveEditorObservables;
+};
+/**
+ * Props for the CurveEditorProvider
+ */
+export type CurveEditorProviderProps = {
+    /** The scene */
+    scene: Scene;
+    /** Target animatable */
+    target: Nullable<IAnimatable>;
+    /** Animations to edit */
+    animations: Nullable<Animation[] | TargetedAnimation[]>;
+    /** Root animation group if any */
+    rootAnimationGroup?: Nullable<AnimationGroup>;
+    /** Editor title */
+    title?: string;
+    /** Whether using targeted animations */
+    useTargetAnimations?: boolean;
+};
+/**
+ * Provider component for curve editor context
+ * @param props - Provider props including scene, target, and animations
+ * @returns The provider component with context
+ */
+export declare const CurveEditorProvider: FunctionComponent<PropsWithChildren<CurveEditorProviderProps>>;
+/**
+ * Hook to access the curve editor context
+ * @returns The curve editor context value
+ */
+export declare function useCurveEditor(): CurveEditorContextValue;

package/lib/components/curveEditor/rangeSelector.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Range selector component - a draggable scrollbar for selecting frame range
+ * @returns The range selector component
+ */
+export declare const RangeSelector: FunctionComponent;

package/lib/components/curveEditor/sideBar/addAnimationPanel.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent } from "react";
+type AddAnimationPanelProps = {
+    onClose: () => void;
+};
+/**
+ * Panel for adding new animations
+ * @returns The add animation panel component
+ */
+export declare const AddAnimationPanel: FunctionComponent<AddAnimationPanelProps>;
+export {};

package/lib/components/curveEditor/sideBar/animationList.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Animation list component showing all animations
+ * @returns Animation list component
+ */
+export declare const AnimationList: FunctionComponent;

package/lib/components/curveEditor/sideBar/editAnimationPanel.d.ts

@@ -0,0 +1,12 @@
+import { type FunctionComponent } from "react";
+import { type Animation } from "@babylonjs/core/Animations/animation.js";
+type EditAnimationPanelProps = {
+    animation: Animation;
+    onClose: () => void;
+};
+/**
+ * Panel for editing animation properties
+ * @returns The edit animation panel component
+ */
+export declare const EditAnimationPanel: FunctionComponent<EditAnimationPanelProps>;
+export {};

package/lib/components/curveEditor/sideBar/loadAnimationPanel.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent } from "react";
+type LoadAnimationPanelProps = {
+    onClose: () => void;
+};
+/**
+ * Panel for loading animations from file or snippet server
+ * @returns The load animation panel component
+ */
+export declare const LoadAnimationPanel: FunctionComponent<LoadAnimationPanelProps>;
+export {};

package/lib/components/curveEditor/sideBar/saveAnimationPanel.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent } from "react";
+type SaveAnimationPanelProps = {
+    onClose: () => void;
+};
+/**
+ * Panel for saving animations to file or snippet server
+ * @returns The save animation panel component
+ */
+export declare const SaveAnimationPanel: FunctionComponent<SaveAnimationPanelProps>;
+export {};

package/lib/components/curveEditor/sideBar.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Sidebar component for the curve editor with animation list and controls
+ * @returns The sidebar component
+ */
+export declare const SideBar: FunctionComponent;

package/lib/components/curveEditor/topBar.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Top toolbar for the curve editor with frame/value inputs and action buttons
+ * @returns The top bar component
+ */
+export declare const TopBar: FunctionComponent;

package/lib/components/debug/debugPane.d.ts

@@ -0,0 +1,6 @@
+import { type Scene } from "@babylonjs/core/index.js";
+import { ExtensibleAccordion } from "../extensibleAccordion";
+export declare const HelpersDebugSectionIdentity: unique symbol;
+export declare const TextureChannelsDebugSectionIdentity: unique symbol;
+export declare const FeaturesDebugSectionIdentity: unique symbol;
+export declare const DebugPane: typeof ExtensibleAccordion<Scene>;