@babylonjs/inspector 8.29.1-preview → 8.29.2-preview

package/lib/{index-B29Ify1o.js → index-BTXdoz_s.js}

@@ -3,8 +3,8 @@ import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createCo
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { makeStyles, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, ToggleButton as ToggleButton$1, Button as Button$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle1, AccordionPanel, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, TabList, Divider, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, SpinButton as SpinButton$1, Slider, Input, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
-import { SubtractFilled, AddFilled, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, FilterRegular, MoviesAndTvRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowMoveRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, GlobeRegular, SaveRegular, ArrowUndoRegular, ClearFormattingRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, PaintBrushRegular, BoxRegular, BranchRegular, CameraRegular, LightbulbRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, Cone16Filled, Cone16Regular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, WeatherSunnyLowFilled, DeleteFilled } from '@fluentui/react-icons';
+import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Stronger, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Body1Strong, TabList, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, SpinButton as SpinButton$1, Slider, Input, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Dropdown as Dropdown$1, Option, Textarea as Textarea$1, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { ChevronCircleRight20Regular, ChevronCircleDown20Regular, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, FilterRegular, MoviesAndTvRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowMoveRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, GlobeRegular, SaveRegular, ArrowUndoRegular, ClearFormattingRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, PaintBrushRegular, BoxRegular, BranchRegular, CameraRegular, LightbulbRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, Cone16Filled, Cone16Regular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1 } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -46,6 +46,7 @@ import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh.js';
 import { Node } from '@babylonjs/core/node.js';
 import { AnimationGroup, TargetedAnimation } from '@babylonjs/core/Animations/animationGroup.js';
 import { AnimationPropertiesOverride } from '@babylonjs/core/Animations/animationPropertiesOverride.js';
+import { Atmosphere } from '@babylonjs/addons/atmosphere/atmosphere.js';
 import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
 import { FollowCamera } from '@babylonjs/core/Cameras/followCamera.js';
 import { FreeCamera } from '@babylonjs/core/Cameras/freeCamera.js';
@@ -99,7 +100,6 @@ import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineMa
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js';
 import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
-import { Atmosphere } from '@babylonjs/addons/atmosphere/atmosphere.js';
 
 const InterceptorHooksMaps$1 = new WeakMap();
 /**
@@ -631,15 +631,68 @@ function copyCommandToClipboard(strCommand) {
 
 const ToolContext = createContext({ useFluent: false, disableCopy: false, toolName: "" });
 
+/**
+ * Toggles between two states using a button with icons.
+ * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change
+ *
+ * @param props
+ * @returns
+ */
+const ToggleButton = (props) => {
+    const { value, onChange, title, appearance = "subtle" } = props;
+    const [checked, setChecked] = useState(value);
+    const toggle = useCallback(() => {
+        setChecked((prev) => {
+            const enabled = !prev;
+            onChange(enabled);
+            return enabled;
+        });
+    }, [setChecked]);
+    useEffect(() => {
+        setChecked(props.value);
+    }, [props.value]);
+    return (jsx(ToggleButton$1, { title: title, icon: checked ? jsx(props.checkedIcon, {}) : props.uncheckedIcon ? jsx(props.uncheckedIcon, {}) : jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }));
+};
+
+const Button = (props) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { icon: Icon, label, ...buttonProps } = props;
+    return (jsx(Button$1, { iconPosition: "after", ...buttonProps, icon: Icon && jsx(Icon, {}), children: label && props.label }));
+};
+
+const CustomTokens = {
+    inputWidth: "150px",
+    lineHeight: "36px",
+    labelMinWidth: "50px",
+    sliderMinWidth: "30px",
+    sliderMaxWidth: "80px",
+    rightAlignOffset: "-8px",
+};
+const UniformWidthStyling = { width: CustomTokens.inputWidth, textAlign: "right", boxSizing: "border-box" };
+const useInputStyles$1 = makeStyles({
+    invalid: { backgroundColor: tokens.colorPaletteRedBackground2, ...UniformWidthStyling },
+    valid: UniformWidthStyling,
+});
+function HandleOnBlur(event) {
+    event.stopPropagation();
+    event.preventDefault();
+}
+function HandleKeyDown(event) {
+    event.stopPropagation(); // Prevent event propagation
+    // Prevent Enter key from causing form submission or value reversion
+    if (event.key === "Enter") {
+        event.preventDefault();
+    }
+}
+
 const usePropertyLineStyles = makeStyles({
     container: {
         width: "100%",
         display: "flex",
         flexDirection: "column", // Stack line + expanded content
-        padding: `${tokens.spacingVerticalXS} 0px`,
-        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
     },
-    line: {
+    baseLine: {
+        height: CustomTokens.lineHeight,
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-start",
@@ -647,9 +700,8 @@ const usePropertyLineStyles = makeStyles({
     },
     label: {
         flex: "1 1 0", // grow=1, shrink =1, basis = 0 initial size before
-        minWidth: "50px",
+        minWidth: CustomTokens.labelMinWidth,
         textAlign: "left",
-        whiteSpace: "nowrap",
         overflow: "hidden",
         textOverflow: "ellipsis",
     },
@@ -661,31 +713,15 @@ const usePropertyLineStyles = makeStyles({
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-end",
-        gap: tokens.spacingHorizontalS,
-    },
-    button: {
-        marginLeft: tokens.spacingHorizontalXXS,
-        margin: 0,
-        padding: 0,
-        border: 0,
-        minWidth: 0,
-    },
-    fillRestOfRightContentWidth: {
-        flex: 1,
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-    },
-    expandButton: {
-        margin: 0,
-    },
-    expandedContent: {
-        paddingLeft: "20px",
+        minWidth: "50%",
     },
     infoPopup: {
         whiteSpace: "normal",
         wordBreak: "break-word",
     },
+    copy: {
+        marginRight: CustomTokens.rightAlignOffset, // Accounts for the padding baked into fluent button / ensures propertyLine looks visually aligned at the right
+    },
 });
 /**
  * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
@@ -710,7 +746,7 @@ const PropertyLine = forwardRef((props, ref) => {
             defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state
         })
         : children;
-    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.line, children: [jsx(InfoLabel$1, { className: classes.label, info: description ? jsx("div", { className: classes.infoPopup, children: description }) : undefined, title: label, children: jsx(Body1Strong, { className: classes.labelText, children: label }) }), jsxs("div", { className: classes.rightContent, children: [nullable && !ignoreNullable && (
+    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel$1, { className: classes.label, info: description ? jsx("div", { className: classes.infoPopup, children: description }) : undefined, title: label, children: jsx(Body1Stronger, { className: classes.labelText, children: label }) }), jsxs("div", { className: classes.rightContent, children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: ChevronCircleDown20Regular, uncheckedIcon: ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
                             // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox used to toggle null ('checked' means 'non null')
                             jsx(Checkbox$1, { checked: !(props.value == null), onChange: (_, data) => {
                                     if (data.checked) {
@@ -722,10 +758,7 @@ const PropertyLine = forwardRef((props, ref) => {
                                         cachedVal.current = props.value;
                                         props.onChange(null);
                                     }
-                                }, title: "Toggle null state" })), jsx("div", { className: classes.fillRestOfRightContentWidth, children: processedChildren }), expandedContent && (jsx(ToggleButton$1, { appearance: "transparent", icon: expanded ? jsx(SubtractFilled, {}) : jsx(AddFilled, {}), className: classes.button, checked: expanded, onClick: (e) => {
-                                    e.stopPropagation();
-                                    setExpanded((expanded) => !expanded);
-                                } })), onCopy && !disableCopy && (jsx(Button$1, { className: classes.button, id: "copyProperty", icon: jsx(CopyRegular, {}), onClick: () => copyCommandToClipboard(onCopy()), title: "Copy to clipboard" }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: classes.expandedContent, children: expandedContent }) }))] }));
+                                }, title: "Toggle null state" })), processedChildren, onCopy && !disableCopy && (jsx(Button, { className: classes.copy, title: "Copy to clipboard", appearance: "transparent", icon: CopyRegular, onClick: () => copyCommandToClipboard(onCopy()) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { children: expandedContent }) }))] }));
 });
 const LineContainer = forwardRef((props, ref) => {
     const classes = usePropertyLineStyles();
@@ -741,7 +774,7 @@ const PlaceholderPropertyLine = (props) => {
  * @returns property-line wrapped link
  */
 const LinkPropertyLine = (props) => {
-    return (jsx(PropertyLine, { ...props, children: jsx(Link, { inline: true, appearance: "subtle", onClick: () => props.onLink?.(), href: props.url, title: props.title, children: jsx(Body1, { children: props.value }) }) }));
+    return (jsx(PropertyLine, { ...props, children: jsx(Link, { inline: true, onClick: () => props.onLink?.(), href: props.url, title: props.title, children: jsx(Body1, { children: props.value }) }) }));
 };
 
 /**
@@ -763,12 +796,15 @@ const useStyles$e = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
-        paddingBottom: tokens.spacingVerticalM,
+        paddingTop: tokens.spacingVerticalM, // ensures the first section header has the same padding as the others (due to divider)
         display: "flex",
         flexDirection: "column",
-        rowGap: tokens.spacingVerticalM,
         height: "100%",
     },
+    divider: {
+        paddingTop: "10px",
+        paddingBottom: "10px",
+    },
     panelDiv: {
         display: "flex",
         flexDirection: "column",
@@ -822,7 +858,7 @@ const Accordion = (props) => {
         }
     }, []);
     return (jsx(Accordion$1, { className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...rest, children: validChildren.map((child) => {
-            return (jsxs(AccordionItem, { value: child.title, children: [jsx(AccordionHeader, { expandIconPosition: "end", children: jsx(Subtitle1, { children: child.title }) }), jsx(AccordionPanel, { children: jsx("div", { className: classes.panelDiv, children: child.content }) })] }, child.content.key));
+            return (jsxs(AccordionItem, { value: child.title, children: [jsx(AccordionHeader, { children: jsx(Subtitle2Stronger, { children: child.title }) }), jsx(AccordionPanel, { children: jsx("div", { className: classes.panelDiv, children: child.content }) }), jsx(Divider, { inset: true, className: classes.divider })] }, child.content.key));
         }) }));
 };
 
@@ -956,6 +992,32 @@ const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, de
     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 })] }) }));
 };
 
+/**
+ * A simple extension feed implementation that provides a fixed set of "built in" extensions.
+ * "Built in" in this context means extensions that are known at bundling time, and included
+ * in the bundle. Each extension can be dynamically imported so they are split into separate
+ * bundle chunks and downloaded only when first installed.
+ */
+class BuiltInsExtensionFeed {
+    constructor(name, extensions) {
+        this.name = name;
+        this._extensions = Array.from(extensions);
+    }
+    async queryExtensionsAsync(filter) {
+        const filteredExtensions = filter ? this._extensions.filter((extension) => extension.name.includes(filter)) : this._extensions;
+        return {
+            totalCount: filteredExtensions.length,
+            getExtensionMetadataAsync: async (index, count) => {
+                return filteredExtensions.slice(index, index + count);
+            },
+        };
+    }
+    async getExtensionModuleAsync(name) {
+        const extension = this._extensions.find((ext) => ext.name === name);
+        return extension ? await extension.getExtensionModuleAsync() : undefined;
+    }
+}
+
 /**
  * Creates a polling observable that notifies its observers at a specified interval.
  * @param delay The polling interval in milliseconds.
@@ -1506,7 +1568,7 @@ function usePane(alignment, defaultWidth, minWidth, topPaneComponents, bottomPan
     });
     // This memoizes the pane itself, which may or may not include the tab list, depending on the toolbar mode.
     const pane = useMemo(() => {
-        return (jsx(Fragment, { children: (topPaneComponents.length > 0 || bottomPaneComponents.length > 0) && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { className: classes.paneContainer, style: { width: `${width}px` }, children: [toolbarMode === "compact" && (topPaneComponents.length > 1 || topBarComponents.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarComponents })] }) })), jsxs("div", { className: classes.paneContent, children: [topSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: topSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, topSelectedTab?.content && jsx(topSelectedTab.content, {})] }), topPaneComponents.length > 0 && bottomPaneComponents.length > 0 && (jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.headerDivider, style: { margin: "0", minHeight: tokens.spacingVerticalM, cursor: "ns-resize" } })), bottomPaneComponents.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), jsxs("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px,calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: [bottomSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: bottomSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, bottomSelectedTab?.content && jsx(bottomSelectedTab.content, {})] }), toolbarMode === "compact" && bottomBarComponents.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarComponents }) }) }))] }) }), jsx("div", { className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` }, onPointerDown: onResizerPointerDown })] })) }));
+        return (jsx(Fragment, { children: (topPaneComponents.length > 0 || bottomPaneComponents.length > 0) && (jsxs("div", { className: `${classes.pane} ${alignment === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsxs("div", { className: classes.paneContainer, style: { width: `${width}px` }, children: [toolbarMode === "compact" && (topPaneComponents.length > 1 || topBarComponents.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [topPaneTabList, jsx(Toolbar, { location: "top", components: topBarComponents })] }) })), jsxs("div", { className: classes.paneContent, children: [topSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: topSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, topSelectedTab?.content && jsx(topSelectedTab.content, {})] }), topPaneComponents.length > 0 && bottomPaneComponents.length > 0 && (jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.headerDivider, style: { margin: "0", minHeight: tokens.spacingVerticalM, cursor: "ns-resize" } })), bottomPaneComponents.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPaneComponents.length > 0 && (jsxs("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px,calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: [bottomSelectedTab?.title ? (jsxs(Fragment, { children: [jsx(Title3, { className: classes.paneHeader, children: bottomSelectedTab.title }), jsx(Divider, { inset: true, className: classes.headerDivider, appearance: "brand" })] })) : null, bottomSelectedTab?.content && jsx(bottomSelectedTab.content, {})] })), toolbarMode === "compact" && bottomBarComponents.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarComponents }) }) }))] }) }), jsx("div", { className: `${classes.resizer} ${alignment === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` }, onPointerDown: onResizerPointerDown })] })) }));
     }, [topPaneComponents, topSelectedTab, bottomPaneComponents, bottomSelectedTab, collapsed, width, resizing]);
     return [topPaneTabList, pane];
 }
@@ -1662,29 +1724,6 @@ const PropertiesServiceDefinition = {
     },
 };
 
-/**
- * Toggles between two states using a button with icons.
- * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change
- *
- * @param props
- * @returns
- */
-const ToggleButton = (props) => {
-    const { value, onChange, title, appearance = "subtle" } = props;
-    const [checked, setChecked] = useState(value);
-    const toggle = useCallback(() => {
-        setChecked((prev) => {
-            const enabled = !prev;
-            onChange(enabled);
-            return enabled;
-        });
-    }, [setChecked]);
-    useEffect(() => {
-        setChecked(props.value);
-    }, [props.value]);
-    return (jsx(ToggleButton$1, { title: title, icon: checked ? jsx(props.enabledIcon, {}) : props.disabledIcon ? jsx(props.disabledIcon, {}) : jsx(props.enabledIcon, {}), appearance: appearance, checked: checked, onClick: toggle }));
-};
-
 /**
  * Performs a topological sort on a graph.
  * @param graph The set of nodes that make up the graph.
@@ -1811,7 +1850,7 @@ const ToggleCommand = (props) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const [displayName, Icon, isEnabled] = useObservableState(useCallback(() => [command.displayName, command.icon, command.isEnabled], [command]), command.onChange);
     // TODO-iv2: Consolidate icon prop passing approach for inspector and shared components
-    return jsx(ToggleButton, { appearance: "transparent", title: displayName, enabledIcon: Icon, value: isEnabled, onChange: (val) => (command.isEnabled = val) });
+    return jsx(ToggleButton, { appearance: "transparent", title: displayName, checkedIcon: Icon, value: isEnabled, onChange: (val) => (command.isEnabled = val) });
 };
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
@@ -2479,18 +2518,6 @@ const FrameStepsStats = ({ context: scene }) => {
     return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Absolute FPS", value: absoluteFPS }, "AbsoluteFPS"), jsx(StringifiedPropertyLine, { label: "Meshes Selection", value: meshesSelection, precision: 2, units: "ms" }, "MeshesSelection"), jsx(StringifiedPropertyLine, { label: "Render Targets", value: renderTargets, precision: 2, units: "ms" }, "RenderTargets"), jsx(StringifiedPropertyLine, { label: "Particles", value: particles, precision: 2, units: "ms" }, "Particles"), jsx(StringifiedPropertyLine, { label: "Sprites", value: sprites, precision: 2, units: "ms" }, "Sprites"), jsx(StringifiedPropertyLine, { label: "Animations", value: animations, precision: 2, units: "ms" }, "Animations"), jsx(StringifiedPropertyLine, { label: "Physics", value: physics, precision: 2, units: "ms" }, "Physics"), jsx(StringifiedPropertyLine, { label: "Inter-Frame Time", value: interFrameTime, precision: 2, units: "ms" }, "InterFrameTime"), jsx(StringifiedPropertyLine, { label: "GPU Frame Time", value: gpuFrameTime, precision: 2, units: "ms" }, "GPUFrameTime"), jsx(StringifiedPropertyLine, { label: "GPU Frame Time (Average)", value: gpuFrameTimeAverage, precision: 2, units: "ms" }, "GPUFrameTimeAverage")] }));
 };
 
-const useButtonLineStyles = makeStyles({
-    button: {
-        border: `1px solid ${tokens.colorBrandBackground}`,
-    },
-});
-const Button = (props) => {
-    const classes = useButtonLineStyles();
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { icon: Icon, ...buttonProps } = props;
-    return (jsx(Button$1, { iconPosition: "after", className: classes.button, ...buttonProps, icon: Icon && jsx(Icon, {}), children: jsx(Body1, { children: props.label }) }));
-};
-
 /**
  * Wraps a button with a label in a line container
  * @param props Button props plus a label
@@ -2781,59 +2808,35 @@ const ToolsServiceDefinition = {
     },
 };
 
-// This file contains "built in" extensions. They are optional and installed/uninstalled by the user, but they are
-// well-known at build time and the extension is "downloaded" by simply doing a dynamic import. This is different
-// from future extension types that are built and published apart from the inspector, and are downloaded as an isolated script.
-const CreationToolsExtensionMetadata = {
-    name: "Asset Creation"};
-const ExportToolsExtensionMetadata = {
-    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"],
-};
-const CaptureToolsExtensionMetadata = {
-    name: "Capture Tools",
-    description: "Adds new features to enable capturing screenshots, GIFs, videos, and more.",
-    keywords: ["capture", "screenshot", "gif", "video", "tools"],
-};
-const ImportToolsExtensionMetadata = {
-    name: "Import Tools",
-    description: "Adds new features related to importing Babylon assets.",
-    keywords: ["import", "tools"],
-};
-const Extensions = [/*CreationToolsExtensionMetadata, */ ExportToolsExtensionMetadata, CaptureToolsExtensionMetadata, ImportToolsExtensionMetadata];
 /**
- * @internal
+ * Well-known default built in extensions for the Inspector.
  */
-class BuiltInsExtensionFeed {
-    constructor() {
-        this.name = "Built-ins";
-    }
-    async queryExtensionsAsync(filter) {
-        const filteredExtensions = filter ? Extensions.filter((extension) => extension.name.includes(filter)) : Extensions;
-        return {
-            totalCount: filteredExtensions.length,
-            getExtensionMetadataAsync: async (index, count) => {
-                return filteredExtensions.slice(index, index + count);
-            },
-        };
-    }
-    async getExtensionModuleAsync(name) {
-        if (name === CreationToolsExtensionMetadata.name) {
-            return await import('./creationToolsService-CX79OLiq.js');
-        }
-        else if (name === ExportToolsExtensionMetadata.name) {
-            return await import('./exportService-CzzSbQnD.js');
-        }
-        else if (name === CaptureToolsExtensionMetadata.name) {
-            return await import('./captureService-4uUJw84S.js');
-        }
-        else if (name === ImportToolsExtensionMetadata.name) {
-            return await import('./importService-BJFsjp8c.js');
-        }
-        return undefined;
-    }
-}
+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"],
+        getExtensionModuleAsync: async () => await import('./exportService-DRm8glYV.js'),
+    },
+    {
+        name: "Capture Tools",
+        description: "Adds new features to enable capturing screenshots, GIFs, videos, and more.",
+        keywords: ["capture", "screenshot", "gif", "video", "tools"],
+        getExtensionModuleAsync: async () => await import('./captureService-BEferXko.js'),
+    },
+    {
+        name: "Import Tools",
+        description: "Adds new features related to importing Babylon assets.",
+        keywords: ["import", "tools"],
+        getExtensionModuleAsync: async () => await import('./importService-CUFQ5Mb2.js'),
+    },
+]);
 
 const ExtensionManagerContext = createContext(undefined);
 function useExtensionManager() {
@@ -3107,6 +3110,27 @@ class ExtensionManager {
     }
 }
 
+const ThemeModeStorageKey = `Babylon/Settings/ThemeMode`;
+/**
+ * Custom hook to manage the theme mode (light/dark/auto).
+ * @param modeOverride If specified, any previously stored theme mode will be replaced with this mode.
+ * @returns An object containing the theme mode state and helper functions.
+ */
+function useThemeMode(modeOverride) {
+    const { isDarkMode, ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode({
+        defaultValue: modeOverride,
+        initializeWithValue: !modeOverride,
+        localStorageKey: ThemeModeStorageKey,
+    });
+    // If a modeOverride is provided, replace any previously stored mode.
+    // Also make sure there is a stored value initially, even before changing the theme.
+    // This way, other usages of this hook will get the correct initial value.
+    if (modeOverride || !localStorage.getItem(ThemeModeStorageKey)) {
+        localStorage.setItem(ThemeModeStorageKey, JSON.stringify(ternaryDarkMode));
+    }
+    return { isDarkMode, themeMode: ternaryDarkMode, setThemeMode: setTernaryDarkMode };
+}
+
 // This sorts a set of service definitions based on their dependencies (e.g. a topological sort).
 function SortServiceDefinitions(serviceDefinitions) {
     const sortedServiceDefinitions = [];
@@ -3390,14 +3414,14 @@ const ThemeSelectorServiceDefinition = {
             order: -300,
             component: () => {
                 const classes = useStyles$6();
-                const { isDarkMode, ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode();
+                const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
-                    setTernaryDarkMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
+                    setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
                 }, []);
                 const toggleTheme = useCallback(() => {
-                    setTernaryDarkMode(isDarkMode ? "light" : "dark");
+                    setThemeMode(isDarkMode ? "light" : "dark");
                 }, [isDarkMode]);
-                return (jsxs(Menu, { positioning: "below-end", checkedValues: { theme: [ternaryDarkMode] }, onCheckedValueChange: onSelectedThemeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: "Select Theme", relationship: "label", children: jsx(SplitButton, { className: classes.themeButton, menuButton: triggerProps, primaryActionButton: { onClick: toggleTheme }, size: "small", appearance: "secondary", shape: "circular", icon: isDarkMode ? jsx(WeatherSunnyRegular, {}) : jsx(WeatherMoonRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.themeMenuPopover, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "theme", value: "system", children: "System" }), jsx(MenuItemRadio, { name: "theme", value: "light", children: "Light" }), jsx(MenuItemRadio, { name: "theme", value: "dark", children: "Dark" })] }) })] }));
+                return (jsxs(Menu, { positioning: "below-end", checkedValues: { theme: [themeMode] }, onCheckedValueChange: onSelectedThemeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: "Select Theme", relationship: "label", children: jsx(SplitButton, { className: classes.themeButton, menuButton: triggerProps, primaryActionButton: { onClick: toggleTheme }, size: "small", appearance: "secondary", shape: "circular", icon: isDarkMode ? jsx(WeatherSunnyRegular, {}) : jsx(WeatherMoonRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.themeMenuPopover, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "theme", value: "system", children: "System" }), jsx(MenuItemRadio, { name: "theme", value: "light", children: "Light" }), jsx(MenuItemRadio, { name: "theme", value: "dark", children: "Dark" })] }) })] }));
             },
         });
         return {
@@ -3466,11 +3490,11 @@ const useStyles$5 = makeStyles({
  * @returns A token that can be used to dispose of the tool.
  */
 function MakeModularTool(options) {
-    const { containerElement, serviceDefinitions, isThemeable = true, extensionFeeds = [] } = options;
+    const { containerElement, serviceDefinitions, themeMode, showThemeSelector = true, extensionFeeds = [] } = options;
     const modularToolRootComponent = () => {
         const classes = useStyles$5();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
-        const { isDarkMode } = useTernaryDarkMode();
+        const { isDarkMode } = useThemeMode(themeMode);
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
         const [extensionInstallError, setExtensionInstallError] = useState();
@@ -3498,7 +3522,7 @@ function MakeModularTool(options) {
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
-                if (isThemeable) {
+                if (showThemeSelector) {
                     await serviceContainer.addServiceAsync(ThemeSelectorServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -3770,7 +3794,7 @@ const GizmoToolbar = (props) => {
     const toggleCoordinatesMode = useCallback(() => {
         gizmoManager.coordinatesMode = coordinatesMode === 1 /* GizmoCoordinatesMode.Local */ ? 0 /* GizmoCoordinatesMode.World */ : 1 /* GizmoCoordinatesMode.Local */;
     }, [gizmoManager, coordinatesMode]);
-    return (jsxs(Fragment, { children: [jsx(ToggleButton, { title: "Translate", enabledIcon: ArrowMoveRegular, value: gizmoMode === "translate", onChange: () => updateGizmoMode("translate") }), jsx(ToggleButton, { title: "Rotate", enabledIcon: ArrowRotateClockwiseRegular, value: gizmoMode === "rotate", onChange: () => updateGizmoMode("rotate") }), jsx(ToggleButton, { title: "Scale", enabledIcon: ArrowExpandRegular, value: gizmoMode === "scale", onChange: () => updateGizmoMode("scale") }), jsx(ToggleButton, { title: "Bounding Box", enabledIcon: SelectObjectRegular, value: gizmoMode === "boundingBox", onChange: () => updateGizmoMode("boundingBox") }), jsx(Collapse, { visible: !!gizmoMode, orientation: "horizontal", children: jsxs(Menu, { positioning: "below-end", checkedValues: { coordinatesMode: [coordinatesMode.toString()] }, onCheckedValueChange: onCoordinatesModeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: "Coordinates Mode", relationship: "label", children: jsx(SplitButton, { className: classes.coordinatesModeButton, menuButton: triggerProps, primaryActionButton: {
+    return (jsxs(Fragment, { children: [jsx(ToggleButton, { title: "Translate", checkedIcon: ArrowMoveRegular, value: gizmoMode === "translate", onChange: () => updateGizmoMode("translate") }), jsx(ToggleButton, { title: "Rotate", checkedIcon: ArrowRotateClockwiseRegular, value: gizmoMode === "rotate", onChange: () => updateGizmoMode("rotate") }), jsx(ToggleButton, { title: "Scale", checkedIcon: ArrowExpandRegular, value: gizmoMode === "scale", onChange: () => updateGizmoMode("scale") }), jsx(ToggleButton, { title: "Bounding Box", checkedIcon: SelectObjectRegular, value: gizmoMode === "boundingBox", onChange: () => updateGizmoMode("boundingBox") }), jsx(Collapse, { visible: !!gizmoMode, orientation: "horizontal", children: jsxs(Menu, { positioning: "below-end", checkedValues: { coordinatesMode: [coordinatesMode.toString()] }, onCheckedValueChange: onCoordinatesModeChange, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: "Coordinates Mode", relationship: "label", children: jsx(SplitButton, { className: classes.coordinatesModeButton, menuButton: triggerProps, primaryActionButton: {
                                         onClick: toggleCoordinatesMode,
                                     }, size: "small", appearance: "secondary", shape: "rounded", icon: coordinatesMode === 1 /* GizmoCoordinatesMode.Local */ ? jsx(CubeRegular, {}) : jsx(GlobeRegular, {}) }) })) }), jsx(MenuPopover, { className: classes.coordinatesModeMenu, children: jsxs(MenuList, { children: [jsx(MenuItemRadio, { name: "coordinatesMode", value: 1 /* GizmoCoordinatesMode.Local */.toString(), children: "Local" }), jsx(MenuItemRadio, { name: "coordinatesMode", value: 0 /* GizmoCoordinatesMode.World */.toString(), children: "World" })] }) })] }) })] }));
 };
@@ -3804,31 +3828,11 @@ const TargetedAnimationGeneralProperties = (props) => {
  * @returns
  */
 const InfoLabel = (props) => {
-    return (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: props.info, children: props.label }));
+    return (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: props.info, children: jsx(Body1, { children: props.label }) }));
 };
 
-function HandleOnBlur(event) {
-    event.stopPropagation();
-    event.preventDefault();
-}
-function HandleKeyDown(event) {
-    event.stopPropagation(); // Prevent event propagation
-    // Prevent Enter key from causing form submission or value reversion
-    if (event.key === "Enter") {
-        event.preventDefault();
-    }
-}
-
-const useSpinStyles = makeStyles({
-    base: {
-        display: "flex",
-        flexDirection: "column",
-        minWidth: "55px",
-    },
-    invalid: { backgroundColor: tokens.colorPaletteRedBackground2 },
-});
 const SpinButton = (props) => {
-    const classes = useSpinStyles();
+    const classes = useInputStyles$1();
     const { min, max } = props;
     const [value, setValue] = useState(props.value);
     const lastCommittedValue = useRef(props.value);
@@ -3870,7 +3874,7 @@ const SpinButton = (props) => {
         }
     };
     const id = useId("spin-button");
-    return (jsxs("div", { className: classes.base, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(SpinButton$1, { ...props, step: step, id: id, size: "small", precision: CalculatePrecision(step ?? 1.01), displayValue: props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : ""}` })] }));
+    return (jsxs("div", { children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(SpinButton$1, { ...props, step: step, id: id, size: "medium", precision: CalculatePrecision(step ?? 1.01), displayValue: props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : classes.valid}` })] }));
 };
 /**
  * Fluent's CalculatePrecision function
@@ -3917,18 +3921,16 @@ function PrecisionRound(value, precision) {
 }
 
 const useSyncedSliderStyles = makeStyles({
+    container: { display: "flex" },
     syncedSlider: {
+        flex: "1 1 0",
+        flexDirection: "row",
         display: "flex",
         alignItems: "center",
-        gap: tokens.spacingHorizontalXXS, // 2px
-        width: "100%", // Only fill available space
     },
     slider: {
-        flexGrow: 1, // Let slider grow
-        minWidth: "40px", // Minimum width for slider to remain usable
-    },
-    spinButton: {
-        width: "60px",
+        minWidth: CustomTokens.sliderMinWidth, // Minimum width for slider to remain usable
+        maxWidth: CustomTokens.sliderMaxWidth,
     },
 });
 /**
@@ -3937,6 +3939,7 @@ const useSyncedSliderStyles = makeStyles({
  * @returns SyncedSlider component
  */
 const SyncedSliderInput = (props) => {
+    const { infoLabel, ...passthroughProps } = props;
     const classes = useSyncedSliderStyles();
     const [value, setValue] = useState(props.value);
     const pendingValueRef = useRef(undefined);
@@ -3976,7 +3979,7 @@ const SyncedSliderInput = (props) => {
         setValue(value);
         props.onChange(value); // Input always updates immediately
     };
-    return (jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (jsx(Slider, { ...props, size: "small", className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...props, className: classes.spinButton, value: Math.round(value / step) * step, onChange: handleInputChange, step: props.step })] }));
+    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (jsx(Slider, { ...passthroughProps, className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, value: Math.round(value / step) * step, onChange: handleInputChange, step: props.step })] })] }));
 };
 
 /**
@@ -3989,14 +3992,6 @@ const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
 });
 
-const useInputStyles$1 = makeStyles({
-    base: {
-        display: "flex",
-        flexDirection: "column",
-        width: "100px",
-    },
-    invalid: { backgroundColor: tokens.colorPaletteRedBackground2 },
-});
 const TextInput = (props) => {
     const classes = useInputStyles$1();
     const [value, setValue] = useState(props.value);
@@ -4029,7 +4024,7 @@ const TextInput = (props) => {
         tryCommitValue(event.currentTarget.value);
     };
     const id = useId("input-button");
-    return (jsxs("div", { className: classes.base, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, id: id, size: "small", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : ""}` })] }));
+    return (jsxs("div", { children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, id: id, size: "medium", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : classes.valid}` })] }));
 };
 
 /**
@@ -4241,7 +4236,7 @@ const TensorPropertyLine = (props) => {
         setVector(newVector);
         props.onChange(newVector);
     };
-    return (jsx(PropertyLine, { ...props, onCopy: () => `(${vector.x}, ${vector.y} ${HasZ(vector) ? `, ${vector.z}` : ""}${HasW(vector) ? `, ${vector.w}` : ""})`, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: props.unit, step: props.step }), jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: props.unit, step: props.step }), HasZ(vector) && (jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: props.unit, step: props.step })), HasW(vector) && (jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: props.unit, step: props.step }))] }), children: jsx(Body1, { children: `X: ${formatted(props.value.x)} | Y: ${formatted(props.value.y)}${HasZ(props.value) ? ` | Z: ${formatted(props.value.z)}` : ""}${HasW(props.value) ? ` | W: ${formatted(props.value.w)}` : ""}` }) }));
+    return (jsx(PropertyLine, { ...props, onCopy: () => `new ${props.value.constructor.name}(${vector.x},${vector.y} ${HasZ(vector) ? `,${vector.z}` : ""}${HasW(vector) ? `,${vector.w}` : ""})`, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: props.unit, step: props.step }), jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: props.unit, step: props.step }), HasZ(vector) && (jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: props.unit, step: props.step })), HasW(vector) && (jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: props.unit, step: props.step }))] }), children: jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
 };
 const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
 const RotationVectorPropertyLine = (props) => {
@@ -4270,72 +4265,318 @@ const QuaternionPropertyLine = (props) => {
 const Vector2PropertyLine = TensorPropertyLine;
 const Vector3PropertyLine = TensorPropertyLine;
 
-const ArcRotateCameraTransformProperties = (props) => {
-    const { camera, settings } = props;
-    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
-    const lowerAlphaLimit = useProperty(camera, "lowerAlphaLimit") ?? 0;
-    const upperAlphaLimit = useProperty(camera, "upperAlphaLimit") ?? Math.PI * 2;
-    const lowerBetaLimit = useProperty(camera, "lowerBetaLimit") ?? -Math.PI;
-    const upperBetaLimit = useProperty(camera, "upperBetaLimit") ?? Math.PI;
-    const lowerRadiusLimit = useProperty(camera, "lowerRadiusLimit");
-    const upperRadiusLimit = useProperty(camera, "upperRadiusLimit");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Alpha", description: `Horizontal angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "alpha", min: toDisplayAngle(lowerAlphaLimit), max: toDisplayAngle(upperAlphaLimit), step: toDisplayAngle(0.01), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Beta", description: `Vertical angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "beta", min: toDisplayAngle(lowerBetaLimit), max: toDisplayAngle(upperBetaLimit), step: toDisplayAngle(0.01), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), lowerRadiusLimit != null && upperRadiusLimit != null ? (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Radius", description: "Distance from the target point.", target: camera, propertyKey: "radius", min: lowerRadiusLimit, max: upperRadiusLimit, step: 0.01 })) : (jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", description: "Distance from the target point.", target: camera, propertyKey: "radius", min: 0, step: 0.01 }))] }));
-};
-const ArcRotateCameraControlProperties = (props) => {
-    const { camera } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angular Sensitivity X", target: camera, propertyKey: "angularSensibilityX" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angular Sensitivity Y", target: camera, propertyKey: "angularSensibilityY" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Panning Sensitivity", target: camera, propertyKey: "panningSensibility" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pinch Delta Percentage", target: camera, propertyKey: "pinchDeltaPercentage" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Wheel Delta Percentage", target: camera, propertyKey: "wheelDeltaPercentage" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Natural Pinch Zoom", target: camera, propertyKey: "useNaturalPinchZoom" })] }));
-};
-const ArcRotateCameraCollisionProperties = (props) => {
-    const { camera } = props;
-    const collisionRadius = useProperty(camera, "collisionRadius");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Check Collisions", target: camera, propertyKey: "checkCollisions" }), jsx(Vector3PropertyLine, { label: "Collision Radius", value: collisionRadius, onChange: (val) => (camera.collisionRadius = val) })] }));
-};
-const ArcRotateCameraLimitsProperties = (props) => {
-    const { camera } = props;
-    // TODO-Iv2: Update defaultValues
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Alpha Limit", target: camera, propertyKey: "lowerAlphaLimit", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Alpha Limit", target: camera, propertyKey: "upperAlphaLimit", nullable: true, defaultValue: Infinity }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Beta Limit", target: camera, propertyKey: "lowerBetaLimit", nullable: true, defaultValue: -Math.PI }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Beta Limit", target: camera, propertyKey: "upperBetaLimit", nullable: true, defaultValue: Math.PI }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Radius Limit", target: camera, propertyKey: "lowerRadiusLimit", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Radius Limit", target: camera, propertyKey: "upperRadiusLimit", nullable: true, defaultValue: 100 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Target Y Limit", target: camera, propertyKey: "lowerTargetYLimit" })] }));
-};
-const ArcRotateCameraBehaviorsProperties = (props) => {
-    const { camera } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto Rotation", target: camera, propertyKey: "useAutoRotationBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bouncing", target: camera, propertyKey: "useBouncingBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Framing", target: camera, propertyKey: "useFramingBehavior" })] }));
-};
-
-const useDropdownStyles = makeStyles({
-    dropdownOption: {
-        textAlign: "right",
-        minWidth: "40px",
+const useColorPickerStyles = makeStyles({
+    colorPickerContainer: {
+        width: "325px",
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalMNudge, // 10px
+        overflow: "visible",
+    },
+    previewColor: {
+        width: "50px",
+        height: "50px",
+        borderRadius: tokens.borderRadiusMedium,
+        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,
+        "@media (forced-colors: active)": {
+            forcedColorAdjust: "none", // ensures elmement maintains color in high constrast mode
+        },
+    },
+    row: {
+        display: "flex",
+        flexDirection: "row",
+        gap: tokens.spacingVerticalM, // 12px
+        alignItems: "center",
+    },
+    colorFieldWrapper: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalSNudge, // 6px
+    },
+    input: {
+        width: "80px",
+    },
+    spinButton: {
+        width: "50px",
+    },
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalL, // 16px
     },
-    optionsLine: {},
 });
-/**
- * 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 Dropdown = (props) => {
-    const classes = useDropdownStyles();
-    const { options, value } = props;
-    const [defaultVal, setDefaultVal] = useState(props.value);
+const ColorPickerPopup = (props) => {
+    const classes = useColorPickerStyles();
+    const [color, setColor] = useState(props.value);
+    const [popoverOpen, setPopoverOpen] = useState(false);
     useEffect(() => {
-        setDefaultVal(value);
+        setColor(props.value); // Ensures the trigger color updates when props.value changes
     }, [props.value]);
-    return (jsx(Dropdown$1, { disabled: props.disabled, size: "small", className: classes.dropdownOption, 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: options.find((o) => o.value === defaultVal)?.label, children: options.map((option) => (jsx(Option, { className: classes.optionsLine, value: option.value.toString(), disabled: false, children: option.label }, option.label))) }));
-};
-const NumberDropdown = Dropdown;
-const StringDropdown = Dropdown;
-
-/**
- * Wraps a dropdown in a property line
- * @param props - PropertyLineProps and DropdownProps
- * @returns property-line wrapped dropdown
- */
+    const handleColorPickerChange = (_, data) => {
+        let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
+        if (props.value instanceof Color4) {
+            color = Color4.FromColor3(color, data.color.a ?? 1);
+        }
+        handleChange(color);
+    };
+    const handleChange = (newColor) => {
+        setColor(newColor);
+        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
+    };
+    return (jsxs(Popover, { positioning: {
+            align: "start",
+            overflowBoundary: document.body,
+            autoSize: true,
+        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: classes.colorPickerContainer, children: [jsxs(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.container, children: [jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(InputHexField, { title: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), jsx(InputHexField, { title: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), jsxs("div", { className: classes.row, 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.row, 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 })] })] })] }) })] }));
+};
+const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
+/**
+ * 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 styles = useColorPickerStyles();
+    const { title, value, onChange, linearHex, isLinearMode } = props;
+    return (jsx("div", { className: styles.colorFieldWrapper, children: jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: styles.input, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: (val) => val != "" && HEX_REGEX.test(val), 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, { href: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", children: " 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("div", { className: classes.colorFieldWrapper, children: jsx(SpinButton, { title: title, infoLabel: title ? { label: title } : undefined, className: classes.spinButton, 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("div", { className: classes.colorFieldWrapper, children: jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, title: title, className: classes.spinButton, 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;
+        }
+        if (color instanceof Color4) {
+            const newColor = color.clone();
+            newColor.a = value;
+            return newColor;
+        }
+        else {
+            return Color4.FromColor3(color, value);
+        }
+    }, [onChange]);
+    return (jsx("div", { className: classes.colorFieldWrapper, children: jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.spinButton, 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,
+            } }) }));
+};
+
+/**
+ * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
+ * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
+ * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
+ * @returns Component wrapping a colorPicker component with a property line
+ */
+const ColorPropertyLine = forwardRef((props, ref) => {
+    const [color, setColor] = useState(props.value);
+    const onSliderChange = (value, key) => {
+        let newColor;
+        if (key === "a") {
+            newColor = Color4.FromColor3(color, value);
+        }
+        else {
+            newColor = color.clone();
+            newColor[key] = value / 255;
+        }
+        setColor(newColor); // Create a new object to trigger re-render
+        props.onChange(newColor);
+    };
+    const onColorPickerChange = (newColor) => {
+        setColor(newColor);
+        props.onChange(newColor);
+    };
+    return (jsx(PropertyLine, { ref: ref, ...props, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
+});
+const Color3PropertyLine = ColorPropertyLine;
+const Color4PropertyLine = ColorPropertyLine;
+
+const GeneralAtmosphereProperties = (props) => {
+    const { entity: atmosphere } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Planet Radius (km)", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "planetRadius", min: 1000.0, max: 10000.0, step: 1 }), jsx(BoundProperty, { label: "Atmosphere Thickness (km)", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "atmosphereThickness", min: 1.0, max: 200.0, step: 1 })] }));
+};
+const ScatteringAndAbsorptionProperties = (props) => {
+    const { entity: atmosphere } = props;
+    return (jsxs(Fragment, { children: [jsx(PropertyLine, { label: "Rayleigh Scattering", expandByDefault: true, description: "Rayleigh scattering is the scattering of light off of the molecules of the atmosphere. It is the main reason why the sky is blue. Increasing the Rayleigh scattering coefficient will result in a bluer sky.", expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Scale", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "rayleighScatteringScale", min: 0.0, max: 5.0, step: 0.01 }), jsx(BoundProperty, { label: "Coefficient", component: Vector3PropertyLine, target: atmosphere.physicalProperties, propertyKey: "peakRayleighScattering", convertTo: (value) => value.scale(1000), convertFrom: (value) => value.scale(0.001), min: 0, step: 0.01, unit: "Mm" })] }) }), jsx(PropertyLine, { label: "Mie Scattering", description: "Mie scattering is the scattering of light off of the larger particles in the atmosphere, such as dust and water droplets. It is responsible for the white appearance of clouds and the haziness of the sky. Increasing the Mie scattering coefficient will result in a whiter sky.", expandByDefault: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Scale", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "mieScatteringScale", min: 0.0, max: 5.0, step: 0.01 }), jsx(BoundProperty, { label: "Coefficient", component: Vector3PropertyLine, target: atmosphere.physicalProperties, propertyKey: "peakMieScattering", convertTo: (value) => value.scale(1000), convertFrom: (value) => value.scale(0.001), min: 0, step: 0.01, unit: "Mm" })] }) }), jsx(PropertyLine, { label: "Mie Absorption", description: "Mie absorption is the absorption of light by the larger particles in the atmosphere, such as dust and water droplets. It is responsible for the dimming of the sun during haze and fog. Increasing mie absorption coefficient will result in visually darker skies.", expandByDefault: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Scale", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "mieAbsorptionScale", min: 0.0, max: 5.0, step: 0.01 }), jsx(BoundProperty, { label: "Coefficient", component: Vector3PropertyLine, target: atmosphere.physicalProperties, propertyKey: "peakMieAbsorption", convertTo: (value) => value.scale(1000), convertFrom: (value) => value.scale(0.001), min: 0, step: 0.01, unit: "Mm" })] }) }), jsx(PropertyLine, { label: "Ozone Absorption", expandByDefault: true, description: "Ozone absorption is the absorption of light by ozone molecules in the atmosphere. Increasing ozone absorption coefficient will result in visually darker skies.", expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Scale", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "ozoneAbsorptionScale", min: 0.0, max: 5.0, step: 0.01 }), jsx(BoundProperty, { label: "Coefficient", component: Vector3PropertyLine, target: atmosphere.physicalProperties, propertyKey: "peakOzoneAbsorption", convertTo: (value) => value.scale(1000), convertFrom: (value) => value.scale(0.001), min: 0, step: 0.01 })] }) })] }));
+};
+const MultipleScatteringProperties = (props) => {
+    const { entity: atmosphere } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "multiScatteringIntensity", min: 0, max: 5.0, step: 0.1 }), jsx(BoundProperty, { label: "Minimum Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "minimumMultiScatteringIntensity", min: 0.0, max: 0.1, step: 0.0001 }), jsx(BoundProperty, { label: "Minimum Color", component: Color3PropertyLine, target: atmosphere, propertyKey: "minimumMultiScatteringColor" }), jsx(BoundProperty, { label: "Ground Albedo", component: Color3PropertyLine, target: atmosphere, propertyKey: "groundAlbedo" })] }));
+};
+const AerialPerspectiveProperties = (props) => {
+    const { entity: atmosphere } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "aerialPerspectiveIntensity", min: 0, max: 5.0, step: 0.1 }), jsx(BoundProperty, { label: "Transmittance Scale", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "aerialPerspectiveTransmittanceScale", min: 0, max: 2.0, step: 0.01 }), jsx(BoundProperty, { label: "Saturation", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "aerialPerspectiveSaturation", min: 0, max: 2.0, step: 0.01 })] }));
+};
+const DiffuseIrradianceProperties = (props) => {
+    const { entity: atmosphere } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "diffuseSkyIrradianceIntensity", min: 0, max: 5.0, step: 0.001 }), jsx(BoundProperty, { label: "Desaturation", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "diffuseSkyIrradianceDesaturationFactor", min: 0, max: 1.0, step: 0.01 }), jsx(BoundProperty, { label: "Additional Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "additionalDiffuseSkyIrradianceIntensity", min: 0, max: 100000.0, step: 1 }), jsx(BoundProperty, { label: "Additional Color", component: Color3PropertyLine, target: atmosphere, propertyKey: "additionalDiffuseSkyIrradianceColor" })] }));
+};
+const RenderingOptionsProperties = (props) => {
+    const { entity: atmosphere } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Linear Space Output", component: SwitchPropertyLine, target: atmosphere, propertyKey: "isLinearSpaceComposition" }), jsx(BoundProperty, { label: "Linear Space Light", component: SwitchPropertyLine, target: atmosphere, propertyKey: "isLinearSpaceLight" }), jsx(BoundProperty, { label: "Use LUT for Sky (Optimization)", component: SwitchPropertyLine, target: atmosphere, propertyKey: "isSkyViewLutEnabled" }), jsx(BoundProperty, { label: "Use LUT for Aerial Perspective (Optimization)", component: SwitchPropertyLine, target: atmosphere, propertyKey: "isAerialPerspectiveLutEnabled" })] }));
+};
+
+const AtmospherePropertiesServiceDefinition = {
+    friendlyName: "Atmosphere Properties",
+    consumes: [PropertiesServiceIdentity, SelectionServiceIdentity, SceneContextIdentity],
+    factory: (propertiesService, selectionService, sceneContext) => {
+        const scene = sceneContext.currentScene;
+        if (!scene) {
+            return undefined;
+        }
+        const atmosphereContentRegistration = propertiesService.addSectionContent({
+            key: "Atmosphere Properties",
+            predicate: (entity) => entity instanceof Atmosphere,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(GeneralAtmosphereProperties, { entity: context }),
+                },
+                {
+                    section: "Scattering and Absorption",
+                    component: ({ context }) => jsx(ScatteringAndAbsorptionProperties, { entity: context }),
+                },
+                {
+                    section: "Multiple Scattering",
+                    component: ({ context }) => jsx(MultipleScatteringProperties, { entity: context }),
+                },
+                {
+                    section: "Aerial Perspective",
+                    component: ({ context }) => jsx(AerialPerspectiveProperties, { entity: context }),
+                },
+                {
+                    section: "Diffuse Sky Irradiance",
+                    component: ({ context }) => jsx(DiffuseIrradianceProperties, { entity: context }),
+                },
+                {
+                    section: "Rendering Options",
+                    component: ({ context }) => jsx(RenderingOptionsProperties, { entity: context }),
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                atmosphereContentRegistration.dispose();
+            },
+        };
+    },
+};
+
+const ArcRotateCameraTransformProperties = (props) => {
+    const { camera, settings } = props;
+    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
+    const lowerAlphaLimit = useProperty(camera, "lowerAlphaLimit") ?? 0;
+    const upperAlphaLimit = useProperty(camera, "upperAlphaLimit") ?? Math.PI * 2;
+    const lowerBetaLimit = useProperty(camera, "lowerBetaLimit") ?? -Math.PI;
+    const upperBetaLimit = useProperty(camera, "upperBetaLimit") ?? Math.PI;
+    const lowerRadiusLimit = useProperty(camera, "lowerRadiusLimit");
+    const upperRadiusLimit = useProperty(camera, "upperRadiusLimit");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Alpha", description: `Horizontal angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "alpha", min: toDisplayAngle(lowerAlphaLimit), max: toDisplayAngle(upperAlphaLimit), step: toDisplayAngle(0.01), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Beta", description: `Vertical angle in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "beta", min: toDisplayAngle(lowerBetaLimit), max: toDisplayAngle(upperBetaLimit), step: toDisplayAngle(0.01), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), lowerRadiusLimit != null && upperRadiusLimit != null ? (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Radius", description: "Distance from the target point.", target: camera, propertyKey: "radius", min: lowerRadiusLimit, max: upperRadiusLimit, step: 0.01 })) : (jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Radius", description: "Distance from the target point.", target: camera, propertyKey: "radius", min: 0, step: 0.01 }))] }));
+};
+const ArcRotateCameraControlProperties = (props) => {
+    const { camera } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angular Sensitivity X", target: camera, propertyKey: "angularSensibilityX" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Angular Sensitivity Y", target: camera, propertyKey: "angularSensibilityY" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Panning Sensitivity", target: camera, propertyKey: "panningSensibility" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Pinch Delta Percentage", target: camera, propertyKey: "pinchDeltaPercentage" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Wheel Delta Percentage", target: camera, propertyKey: "wheelDeltaPercentage" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Natural Pinch Zoom", target: camera, propertyKey: "useNaturalPinchZoom" })] }));
+};
+const ArcRotateCameraCollisionProperties = (props) => {
+    const { camera } = props;
+    const collisionRadius = useProperty(camera, "collisionRadius");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Check Collisions", target: camera, propertyKey: "checkCollisions" }), jsx(Vector3PropertyLine, { label: "Collision Radius", value: collisionRadius, onChange: (val) => (camera.collisionRadius = val) })] }));
+};
+const ArcRotateCameraLimitsProperties = (props) => {
+    const { camera } = props;
+    // TODO-Iv2: Update defaultValues
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Alpha Limit", target: camera, propertyKey: "lowerAlphaLimit", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Alpha Limit", target: camera, propertyKey: "upperAlphaLimit", nullable: true, defaultValue: Infinity }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Beta Limit", target: camera, propertyKey: "lowerBetaLimit", nullable: true, defaultValue: -Math.PI }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Beta Limit", target: camera, propertyKey: "upperBetaLimit", nullable: true, defaultValue: Math.PI }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Radius Limit", target: camera, propertyKey: "lowerRadiusLimit", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Upper Radius Limit", target: camera, propertyKey: "upperRadiusLimit", nullable: true, defaultValue: 100 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Lower Target Y Limit", target: camera, propertyKey: "lowerTargetYLimit" })] }));
+};
+const ArcRotateCameraBehaviorsProperties = (props) => {
+    const { camera } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto Rotation", target: camera, propertyKey: "useAutoRotationBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bouncing", target: camera, propertyKey: "useBouncingBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Framing", target: camera, propertyKey: "useFramingBehavior" })] }));
+};
+
+const useDropdownStyles = makeStyles({
+    dropdown: { ...UniformWidthStyling, minWidth: CustomTokens.inputWidth },
+});
+/**
+ * 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 Dropdown = (props) => {
+    const classes = useDropdownStyles();
+    const { options, value } = props;
+    const [defaultVal, setDefaultVal] = useState(props.value);
+    useEffect(() => {
+        setDefaultVal(value);
+    }, [props.value]);
+    return (jsx(Dropdown$1, { disabled: props.disabled, size: "medium", className: classes.dropdown, 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: options.find((o) => o.value === defaultVal)?.label, children: options.map((option) => (jsx(Option, { className: classes.dropdown, value: option.value.toString(), disabled: false, children: option.label }, option.label))) }));
+};
+const NumberDropdown = Dropdown;
+const StringDropdown = Dropdown;
+
+/**
+ * Wraps a dropdown in a property line
+ * @param props - PropertyLineProps and DropdownProps
+ * @returns property-line wrapped dropdown
+ */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props }) }));
 });
@@ -4386,7 +4627,7 @@ const FreeCameraTransformProperties = (props) => {
     const position = useProperty(camera, "position");
     const rotation = useProperty(camera, "rotation");
     const quatRotation = useProperty(camera, "rotationQuaternion");
-    return (jsxs(Fragment, { children: [jsx(Vector3PropertyLine, { label: "Position", value: position, onChange: (value) => (camera.position = value) }), quatRotation ? (jsx(QuaternionPropertyLine, { label: "Rotation (Quaternion)", value: quatRotation, onChange: (val) => (camera.rotationQuaternion = val), useDegrees: useDegrees }, "QuaternionRotationTransform")) : (jsx(RotationVectorPropertyLine, { label: "Rotation", value: rotation, onChange: (val) => (camera.rotation = val), useDegrees: useDegrees }, "RotationTransform"))] }));
+    return (jsxs(Fragment, { children: [jsx(Vector3PropertyLine, { label: "Position", value: position, onChange: (value) => (camera.position = value) }), quatRotation ? (jsx(QuaternionPropertyLine, { label: "Rotation (Quat)", value: quatRotation, onChange: (val) => (camera.rotationQuaternion = val), useDegrees: useDegrees }, "QuaternionRotationTransform")) : (jsx(RotationVectorPropertyLine, { label: "Rotation", value: rotation, onChange: (val) => (camera.rotation = val), useDegrees: useDegrees }, "RotationTransform"))] }));
 };
 const FreeCameraControlProperties = (props) => {
     const { camera } = props;
@@ -4551,234 +4792,55 @@ const EffectLayerPropertiesServiceDefinition = {
     consumes: [PropertiesServiceIdentity],
     factory: (propertiesService) => {
         // TODO: Add content registrations for each section and for each type in the EffectLayer class hierarchy.
-        return {
-            dispose: () => {
-                // TODO: Dispose content registrations.
-            },
-        };
-    },
-};
-
-const FrameGraphTaskProperties = (props) => {
-    const { frameGraph } = props;
-    const tasks = frameGraph.tasks;
-    return (jsx(Fragment, { children: tasks.length > 0 &&
-            tasks.map((task, i) => {
-                return jsx(TextPropertyLine, { label: i + 1 + ". " + task.name, value: "" }, "task" + i);
-            }) }));
-};
-const FrameGraphGeneralProperties = (props) => {
-    const { frameGraph } = props;
-    const isSceneFrameGraph = useProperty(frameGraph.scene, "frameGraph");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Optimize Texture Allocation", description: "Whether to optimize texture allocation.", target: frameGraph, propertyKey: "optimizeTextureAllocation" }), isSceneFrameGraph !== frameGraph && jsx(ButtonLine, { onClick: () => (frameGraph.scene.frameGraph = frameGraph), label: "Set as scene's frame graph" }), jsx(ButtonLine, { label: "Edit Graph", onClick: () => {
-                    void frameGraph.getLinkedNodeRenderGraph().edit({ nodeRenderGraphEditorConfig: { hostScene: frameGraph.scene } });
-                } })] }));
-};
-
-const FrameGraphPropertiesServiceDefinition = {
-    friendlyName: "Frame Graph Properties",
-    consumes: [PropertiesServiceIdentity],
-    factory: (propertiesService) => {
-        const frameGraphContentRegistration = propertiesService.addSectionContent({
-            key: "Frame Graph General Properties",
-            predicate: (entity) => entity instanceof FrameGraph,
-            content: [
-                {
-                    section: "General",
-                    component: ({ context }) => jsx(FrameGraphGeneralProperties, { frameGraph: context }),
-                },
-                {
-                    section: "Tasks",
-                    component: ({ context }) => jsx(FrameGraphTaskProperties, { frameGraph: context }),
-                },
-            ],
-        });
-        return {
-            dispose: () => {
-                frameGraphContentRegistration.dispose();
-            },
-        };
-    },
-};
-
-const useColorPickerStyles = makeStyles({
-    colorPickerContainer: {
-        width: "325px",
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacingVerticalMNudge, // 10px
-        overflow: "visible",
-    },
-    previewColor: {
-        width: "50px",
-        height: "50px",
-        borderRadius: tokens.borderRadiusMedium,
-        border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,
-        "@media (forced-colors: active)": {
-            forcedColorAdjust: "none", // ensures elmement maintains color in high constrast mode
-        },
-    },
-    row: {
-        display: "flex",
-        flexDirection: "row",
-        gap: tokens.spacingVerticalM, // 12px
-        alignItems: "center",
-    },
-    colorFieldWrapper: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacingVerticalSNudge, // 6px
-    },
-    input: {
-        width: "80px",
-    },
-    spinButton: {
-        width: "50px",
-    },
-    container: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacingVerticalL, // 16px
-    },
-});
-const ColorPickerPopup = (props) => {
-    const classes = useColorPickerStyles();
-    const [color, setColor] = useState(props.value);
-    const [popoverOpen, setPopoverOpen] = useState(false);
-    useEffect(() => {
-        setColor(props.value); // Ensures the trigger color updates when props.value changes
-    }, [props.value]);
-    const handleColorPickerChange = (_, data) => {
-        let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
-        if (props.value instanceof Color4) {
-            color = Color4.FromColor3(color, data.color.a ?? 1);
-        }
-        handleChange(color);
-    };
-    const handleChange = (newColor) => {
-        setColor(newColor);
-        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
-    };
-    return (jsxs(Popover, { positioning: {
-            align: "start",
-            overflowBoundary: document.body,
-            autoSize: true,
-        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: classes.colorPickerContainer, children: [jsxs(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.container, children: [jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(InputHexField, { title: "Gamma Hex", value: color, isLinearMode: props.isLinearMode, onChange: handleChange }), jsx(InputHexField, { title: "Linear Hex", linearHex: true, isLinearMode: props.isLinearMode, value: color, onChange: handleChange })] }), jsxs("div", { className: classes.row, 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.row, 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 })] })] })] }) })] }));
-};
-const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
-/**
- * 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 styles = useColorPickerStyles();
-    const { title, value, onChange, linearHex, isLinearMode } = props;
-    return (jsx("div", { className: styles.colorFieldWrapper, children: jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: styles.input, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: (val) => val != "" && HEX_REGEX.test(val), 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, { href: "https://doc.babylonjs.com/preparingArtForBabylon/controllingColorSpace/", children: " 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("div", { className: classes.colorFieldWrapper, children: jsx(SpinButton, { title: title, infoLabel: title ? { label: title } : undefined, className: classes.spinButton, 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("div", { className: classes.colorFieldWrapper, children: jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, title: title, className: classes.spinButton, min: 0, max: max, value: Math.round(rgbaToHsv(value)[hsvKey] * scale), forceInt: true, onChange: handleChange }) }));
+        return {
+            dispose: () => {
+                // TODO: Dispose content registrations.
+            },
+        };
+    },
 };
-/**
- * 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;
-        }
-        if (color instanceof Color4) {
-            const newColor = color.clone();
-            newColor.a = value;
-            return newColor;
-        }
-        else {
-            return Color4.FromColor3(color, value);
-        }
-    }, [onChange]);
-    return (jsx("div", { className: classes.colorFieldWrapper, children: jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.spinButton, 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 FrameGraphTaskProperties = (props) => {
+    const { frameGraph } = props;
+    const tasks = frameGraph.tasks;
+    return (jsx(Fragment, { children: tasks.length > 0 &&
+            tasks.map((task, i) => {
+                return jsx(TextPropertyLine, { label: i + 1 + ". " + task.name, value: "" }, "task" + i);
+            }) }));
+};
+const FrameGraphGeneralProperties = (props) => {
+    const { frameGraph } = props;
+    const isSceneFrameGraph = useProperty(frameGraph.scene, "frameGraph");
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Optimize Texture Allocation", description: "Whether to optimize texture allocation.", target: frameGraph, propertyKey: "optimizeTextureAllocation" }), isSceneFrameGraph !== frameGraph && jsx(ButtonLine, { onClick: () => (frameGraph.scene.frameGraph = frameGraph), label: "Set as scene's frame graph" }), jsx(ButtonLine, { label: "Edit Graph", onClick: () => {
+                    void frameGraph.getLinkedNodeRenderGraph().edit({ nodeRenderGraphEditorConfig: { hostScene: frameGraph.scene } });
+                } })] }));
 };
 
-/**
- * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
- * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
- * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
- * @returns Component wrapping a colorPicker component with a property line
- */
-const ColorPropertyLine = forwardRef((props, ref) => {
-    const [color, setColor] = useState(props.value);
-    const onSliderChange = (value, key) => {
-        let newColor;
-        if (key === "a") {
-            newColor = Color4.FromColor3(color, value);
-        }
-        else {
-            newColor = color.clone();
-            newColor[key] = value / 255;
-        }
-        setColor(newColor); // Create a new object to trigger re-render
-        props.onChange(newColor);
-    };
-    const onColorPickerChange = (newColor) => {
-        setColor(newColor);
-        props.onChange(newColor);
-    };
-    return (jsx(PropertyLine, { ref: ref, ...props, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }), children: jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
-});
-const Color3PropertyLine = ColorPropertyLine;
-const Color4PropertyLine = ColorPropertyLine;
+const FrameGraphPropertiesServiceDefinition = {
+    friendlyName: "Frame Graph Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => {
+        const frameGraphContentRegistration = propertiesService.addSectionContent({
+            key: "Frame Graph General Properties",
+            predicate: (entity) => entity instanceof FrameGraph,
+            content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(FrameGraphGeneralProperties, { frameGraph: context }),
+                },
+                {
+                    section: "Tasks",
+                    component: ({ context }) => jsx(FrameGraphTaskProperties, { frameGraph: context }),
+                },
+            ],
+        });
+        return {
+            dispose: () => {
+                frameGraphContentRegistration.dispose();
+            },
+        };
+    },
+};
 
 const AreaLightSetupProperties = ({ context: areaLight }) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Diffuse", component: Color3PropertyLine, target: areaLight, propertyKey: "diffuse" }), jsx(BoundProperty, { label: "Specular", component: Color3PropertyLine, target: areaLight, propertyKey: "specular" }), jsx(BoundProperty, { label: "Position", component: Vector3PropertyLine, target: areaLight, propertyKey: "position" }), jsx(BoundProperty, { label: "Width", component: NumberInputPropertyLine, target: areaLight, propertyKey: "width" }), jsx(BoundProperty, { label: "Height", component: NumberInputPropertyLine, target: areaLight, propertyKey: "height" }), jsx(BoundProperty, { label: "Intensity", component: NumberInputPropertyLine, target: areaLight, propertyKey: "intensity" })] }));
@@ -6084,10 +6146,10 @@ const AttractorComponent = (props) => {
     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.", enabledIcon: EyeFilled, disabledIcon: EyeOffFilled, value: shown, onChange: (show) => {
+    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);
                     setShown(show);
-                } }), jsx(ToggleButton, { title: "Add / remove position gizmo from particle attractor", enabledIcon: ArrowMoveFilled, value: isControlled(impostor), onChange: (control) => onControl(control ? impostor : undefined) })] }));
+                } }), jsx(ToggleButton, { title: "Add / remove position gizmo from particle attractor", checkedIcon: ArrowMoveFilled, value: isControlled(impostor), onChange: (control) => onControl(control ? impostor : undefined) })] }));
 };
 
 // For each Attractor, create a listItem consisting of the attractor and its debugging impostor mesh
@@ -7066,7 +7128,7 @@ const TransformProperties = (props) => {
     const { transform, settings } = props;
     const quatRotation = useQuaternionProperty(transform, "rotationQuaternion");
     const useDegrees = useObservableState(() => settings.useDegrees, settings.settingsChangedObservable);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: transform, propertyKey: "position" }), quatRotation ? (jsx(QuaternionPropertyLine, { label: "Rotation (Quaternion)", value: quatRotation, onChange: (val) => (transform.rotationQuaternion = val), useDegrees: useDegrees }, "QuaternionRotationTransform")) : (jsx(BoundProperty, { component: RotationVectorPropertyLine, label: "Rotation", target: transform, propertyKey: "rotation", useDegrees: useDegrees })), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Scaling", target: transform, propertyKey: "scaling" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: transform, propertyKey: "position" }), quatRotation ? (jsx(QuaternionPropertyLine, { label: "Rotation (Quat)", value: quatRotation, onChange: (val) => (transform.rotationQuaternion = val), useDegrees: useDegrees }, "QuaternionRotationTransform")) : (jsx(BoundProperty, { component: RotationVectorPropertyLine, label: "Rotation", target: transform, propertyKey: "rotation", useDegrees: useDegrees })), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Scaling", target: transform, propertyKey: "scaling" })] }));
 };
 
 const TransformPropertiesServiceDefinition = {
@@ -7171,6 +7233,49 @@ const AnimationGroupExplorerServiceDefinition = {
     },
 };
 
+const AtmosphereExplorerServiceDefinition = {
+    friendlyName: "Atmosphere Explorer",
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
+    factory: (sceneExplorerService, sceneContext) => {
+        const scene = sceneContext.currentScene;
+        if (!scene) {
+            return undefined;
+        }
+        const sectionRegistration = sceneExplorerService.addSection({
+            displayName: "Atmosphere",
+            order: 1300 /* DefaultSectionsOrder.Atmosphere */,
+            getRootEntities: () => (scene.getExternalData("atmosphere") ? [scene.getExternalData("atmosphere")] : []),
+            getEntityDisplayInfo: (atmosphere) => {
+                const onChangeObservable = new Observable();
+                const nameHookToken = InterceptProperty(atmosphere, "name", {
+                    afterSet: () => {
+                        onChangeObservable.notifyObservers();
+                    },
+                });
+                return {
+                    get name() {
+                        return atmosphere.name;
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        nameHookToken.dispose();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+            entityIcon: () => jsx(WeatherSunnyLowFilled, {}),
+            // TODO in order for inspector UX to display atmosphere created after inspector is created
+            getEntityAddedObservables: () => [],
+            getEntityRemovedObservables: () => [],
+        });
+        return {
+            dispose: () => {
+                sectionRegistration.dispose();
+            },
+        };
+    },
+};
+
 const EffectLayerExplorerServiceDefinition = {
     friendlyName: "Effect Layer Explorer",
     consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
@@ -7913,7 +8018,7 @@ const PickingToolbar = (props) => {
             /* No-op */
         };
     }, [pickingEnabled, sceneElement, ignoreBackfaces]);
-    return (sceneElement && (jsx(ToggleButton, { title: `${pickingEnabled ? "Disable" : "Enable"} Picking`, enabledIcon: TargetRegular, value: pickingEnabled, onChange: () => setPickingEnabled((prev) => !prev) })));
+    return (sceneElement && jsx(ToggleButton, { title: `${pickingEnabled ? "Disable" : "Enable"} Picking`, checkedIcon: TargetRegular, value: pickingEnabled, onChange: setPickingEnabled }));
 };
 
 const PickingServiceDefinition = {
@@ -7935,120 +8040,6 @@ const PickingServiceDefinition = {
     },
 };
 
-const GeneralAtmosphereProperties = (props) => {
-    const { entity: atmosphere } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Planet Radius (km)", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "planetRadius", min: 1000.0, max: 10000.0, step: 1 }), jsx(BoundProperty, { label: "Atmosphere Thickness (km)", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "atmosphereThickness", min: 1.0, max: 200.0, step: 1 })] }));
-};
-const ScatteringAndAbsorptionProperties = (props) => {
-    const { entity: atmosphere } = props;
-    return (jsxs(Fragment, { children: [jsx(PropertyLine, { label: "Rayleigh Scattering", expandByDefault: true, description: "Rayleigh scattering is the scattering of light off of the molecules of the atmosphere. It is the main reason why the sky is blue. Increasing the Rayleigh scattering coefficient will result in a bluer sky.", expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Scale", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "rayleighScatteringScale", min: 0.0, max: 5.0, step: 0.01 }), jsx(BoundProperty, { label: "Coefficient", component: Vector3PropertyLine, target: atmosphere.physicalProperties, propertyKey: "peakRayleighScattering", convertTo: (value) => value.scale(1000), convertFrom: (value) => value.scale(0.001), min: 0, step: 0.01, unit: "Mm" })] }) }), jsx(PropertyLine, { label: "Mie Scattering", description: "Mie scattering is the scattering of light off of the larger particles in the atmosphere, such as dust and water droplets. It is responsible for the white appearance of clouds and the haziness of the sky. Increasing the Mie scattering coefficient will result in a whiter sky.", expandByDefault: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Scale", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "mieScatteringScale", min: 0.0, max: 5.0, step: 0.01 }), jsx(BoundProperty, { label: "Coefficient", component: Vector3PropertyLine, target: atmosphere.physicalProperties, propertyKey: "peakMieScattering", convertTo: (value) => value.scale(1000), convertFrom: (value) => value.scale(0.001), min: 0, step: 0.01, unit: "Mm" })] }) }), jsx(PropertyLine, { label: "Mie Absorption", description: "Mie absorption is the absorption of light by the larger particles in the atmosphere, such as dust and water droplets. It is responsible for the dimming of the sun during haze and fog. Increasing mie absorption coefficient will result in visually darker skies.", expandByDefault: true, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Scale", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "mieAbsorptionScale", min: 0.0, max: 5.0, step: 0.01 }), jsx(BoundProperty, { label: "Coefficient", component: Vector3PropertyLine, target: atmosphere.physicalProperties, propertyKey: "peakMieAbsorption", convertTo: (value) => value.scale(1000), convertFrom: (value) => value.scale(0.001), min: 0, step: 0.01, unit: "Mm" })] }) }), jsx(PropertyLine, { label: "Ozone Absorption", expandByDefault: true, description: "Ozone absorption is the absorption of light by ozone molecules in the atmosphere. Increasing ozone absorption coefficient will result in visually darker skies.", expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Scale", component: SyncedSliderPropertyLine, target: atmosphere.physicalProperties, propertyKey: "ozoneAbsorptionScale", min: 0.0, max: 5.0, step: 0.01 }), jsx(BoundProperty, { label: "Coefficient", component: Vector3PropertyLine, target: atmosphere.physicalProperties, propertyKey: "peakOzoneAbsorption", convertTo: (value) => value.scale(1000), convertFrom: (value) => value.scale(0.001), min: 0, step: 0.01 })] }) })] }));
-};
-const MultipleScatteringProperties = (props) => {
-    const { entity: atmosphere } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "multiScatteringIntensity", min: 0, max: 5.0, step: 0.1 }), jsx(BoundProperty, { label: "Minimum Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "minimumMultiScatteringIntensity", min: 0.0, max: 0.1, step: 0.0001 }), jsx(BoundProperty, { label: "Minimum Color", component: Color3PropertyLine, target: atmosphere, propertyKey: "minimumMultiScatteringColor" }), jsx(BoundProperty, { label: "Ground Albedo", component: Color3PropertyLine, target: atmosphere, propertyKey: "groundAlbedo" })] }));
-};
-const AerialPerspectiveProperties = (props) => {
-    const { entity: atmosphere } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "aerialPerspectiveIntensity", min: 0, max: 5.0, step: 0.1 }), jsx(BoundProperty, { label: "Transmittance Scale", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "aerialPerspectiveTransmittanceScale", min: 0, max: 2.0, step: 0.01 }), jsx(BoundProperty, { label: "Saturation", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "aerialPerspectiveSaturation", min: 0, max: 2.0, step: 0.01 })] }));
-};
-const DiffuseIrradianceProperties = (props) => {
-    const { entity: atmosphere } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "diffuseSkyIrradianceIntensity", min: 0, max: 5.0, step: 0.001 }), jsx(BoundProperty, { label: "Desaturation", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "diffuseSkyIrradianceDesaturationFactor", min: 0, max: 1.0, step: 0.01 }), jsx(BoundProperty, { label: "Additional Intensity", component: SyncedSliderPropertyLine, target: atmosphere, propertyKey: "additionalDiffuseSkyIrradianceIntensity", min: 0, max: 100000.0, step: 1 }), jsx(BoundProperty, { label: "Additional Color", component: Color3PropertyLine, target: atmosphere, propertyKey: "additionalDiffuseSkyIrradianceColor" })] }));
-};
-const RenderingOptionsProperties = (props) => {
-    const { entity: atmosphere } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { label: "Linear Space Output", component: SwitchPropertyLine, target: atmosphere, propertyKey: "isLinearSpaceComposition" }), jsx(BoundProperty, { label: "Linear Space Light", component: SwitchPropertyLine, target: atmosphere, propertyKey: "isLinearSpaceLight" }), jsx(BoundProperty, { label: "Use LUT for Sky (Optimization)", component: SwitchPropertyLine, target: atmosphere, propertyKey: "isSkyViewLutEnabled" }), jsx(BoundProperty, { label: "Use LUT for Aerial Perspective (Optimization)", component: SwitchPropertyLine, target: atmosphere, propertyKey: "isAerialPerspectiveLutEnabled" })] }));
-};
-
-const AtmospherePropertiesServiceDefinition = {
-    friendlyName: "Atmosphere Properties",
-    consumes: [PropertiesServiceIdentity, SelectionServiceIdentity, SceneContextIdentity],
-    factory: (propertiesService, selectionService, sceneContext) => {
-        const scene = sceneContext.currentScene;
-        if (!scene) {
-            return undefined;
-        }
-        const atmosphereContentRegistration = propertiesService.addSectionContent({
-            key: "Atmosphere Properties",
-            predicate: (entity) => entity instanceof Atmosphere,
-            content: [
-                {
-                    section: "General",
-                    component: ({ context }) => jsx(GeneralAtmosphereProperties, { entity: context }),
-                },
-                {
-                    section: "Scattering and Absorption",
-                    component: ({ context }) => jsx(ScatteringAndAbsorptionProperties, { entity: context }),
-                },
-                {
-                    section: "Multiple Scattering",
-                    component: ({ context }) => jsx(MultipleScatteringProperties, { entity: context }),
-                },
-                {
-                    section: "Aerial Perspective",
-                    component: ({ context }) => jsx(AerialPerspectiveProperties, { entity: context }),
-                },
-                {
-                    section: "Diffuse Sky Irradiance",
-                    component: ({ context }) => jsx(DiffuseIrradianceProperties, { entity: context }),
-                },
-                {
-                    section: "Rendering Options",
-                    component: ({ context }) => jsx(RenderingOptionsProperties, { entity: context }),
-                },
-            ],
-        });
-        return {
-            dispose: () => {
-                atmosphereContentRegistration.dispose();
-            },
-        };
-    },
-};
-
-const AtmosphereExplorerServiceDefinition = {
-    friendlyName: "Atmosphere Explorer",
-    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
-    factory: (sceneExplorerService, sceneContext) => {
-        const scene = sceneContext.currentScene;
-        if (!scene) {
-            return undefined;
-        }
-        const sectionRegistration = sceneExplorerService.addSection({
-            displayName: "Atmosphere",
-            order: 1300 /* DefaultSectionsOrder.Atmosphere */,
-            getRootEntities: () => (scene.getExternalData("atmosphere") ? [scene.getExternalData("atmosphere")] : []),
-            getEntityDisplayInfo: (atmosphere) => {
-                const onChangeObservable = new Observable();
-                const nameHookToken = InterceptProperty(atmosphere, "name", {
-                    afterSet: () => {
-                        onChangeObservable.notifyObservers();
-                    },
-                });
-                return {
-                    get name() {
-                        return atmosphere.name;
-                    },
-                    onChange: onChangeObservable,
-                    dispose: () => {
-                        nameHookToken.dispose();
-                        onChangeObservable.clear();
-                    },
-                };
-            },
-            entityIcon: () => jsx(WeatherSunnyLowFilled, {}),
-            // TODO in order for inspector UX to display atmosphere created after inspector is created
-            getEntityAddedObservables: () => [],
-            getEntityRemovedObservables: () => [],
-        });
-        return {
-            dispose: () => {
-                sectionRegistration.dispose();
-            },
-        };
-    },
-};
-
 let CurrentInspectorToken = null;
 function IsInspectorVisible() {
     return CurrentInspectorToken != null;
@@ -8066,8 +8057,6 @@ function _ShowInspector(scene, options) {
         enableClose: true,
         handleResize: true,
         enablePopup: true,
-        isExtensible: true,
-        isThemeable: true,
         ...options,
     };
     if (!scene) {
@@ -8214,8 +8203,9 @@ function _ShowInspector(scene, options) {
             // Additional services passed in to the Inspector.
             ...(options.serviceDefinitions ?? []),
         ],
-        isThemeable: options.isThemeable ?? true,
-        extensionFeeds: options.isExtensible ? [new BuiltInsExtensionFeed()] : [],
+        themeMode: options.themeMode,
+        showThemeSelector: options.showThemeSelector,
+        extensionFeeds: [DefaultInspectorExtensionFeed, ...(options.extensionFeeds ?? [])],
         toolbarMode: "compact",
         sidePaneMode: options.embedMode ? "right" : "both",
     });
@@ -8494,5 +8484,5 @@ const Pane = (props) => {
     return (jsxs("div", { className: classes.rootDiv, children: [jsxs("div", { className: classes.header, children: [props.icon ? (jsx(props.icon, { className: classes.icon })) : (jsx("img", { className: classes.icon, id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" })), jsx(Body1Strong, { id: "title", children: props.title })] }), props.children] }));
 };
 
-export { Checkbox as $, MakePopoverTeachingMoment as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, GetPropertyDescriptor as G, IsPropertyReadonly as H, InterceptFunction as I, InterceptProperty as J, ConstructorFactory as K, LinkToEntityPropertyLine as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, SelectionServiceIdentity as O, Pane$1 as P, SelectionServiceDefinition as Q, SettingsContextIdentity as R, ShellServiceIdentity as S, ToolsServiceIdentity as T, IsInspectorVisible as U, ShowInspector as V, HideInspector as W, Inspector as X, AccordionSection as Y, Accordion as Z, Button as _, SceneContextIdentity as a, ColorPickerPopup as a0, InputHexField as a1, InputHsvField as a2, ComboBox as a3, DraggableLine as a4, Dropdown as a5, NumberDropdown as a6, StringDropdown as a7, FactorGradientComponent as a8, Color3GradientComponent as a9, Color4GradientComponent as aa, ColorStepGradientComponent as ab, InfoLabel as ac, List as ad, MessageBar as ae, PositionedPopover as af, SearchBar as ag, SearchBox as ah, SpinButton as ai, CalculatePrecision as aj, Switch as ak, SyncedSliderInput as al, Textarea as am, TextInput as an, ToggleButton as ao, FactorGradientList as ap, Color3GradientList as aq, Color4GradientList as ar, Pane as as, SwitchPropertyLine as b, SyncedSliderPropertyLine as c, PropertiesServiceIdentity as d, SceneExplorerServiceIdentity as e, SettingsServiceIdentity as f, StatsServiceIdentity as g, BoundProperty as h, TeachingMoment as i, useProperty as j, useVector3Property as k, useColor3Property as l, useColor4Property as m, useQuaternionProperty as n, MakePropertyHook as o, useInterceptObservable as p, useEventfulState as q, useObservableCollection as r, useOrderedObservableCollection as s, usePollingObservable as t, useObservableState as u, useResource as v, useAsyncResource as w, useAngleConverters as x, MakeTeachingMoment as y, MakeDialogTeachingMoment as z };
-//# sourceMappingURL=index-B29Ify1o.js.map
+export { Button as $, MakePopoverTeachingMoment as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, GetPropertyDescriptor as G, IsPropertyReadonly as H, InterceptFunction as I, InterceptProperty as J, ConstructorFactory as K, LinkToEntityPropertyLine as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, SceneContextIdentity as O, Pane$1 as P, SelectionServiceIdentity as Q, SelectionServiceDefinition as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, SettingsContextIdentity as U, IsInspectorVisible as V, ShowInspector as W, HideInspector as X, Inspector as Y, AccordionSection as Z, Accordion as _, SyncedSliderPropertyLine as a, Checkbox as a0, ColorPickerPopup as a1, InputHexField as a2, InputHsvField as a3, ComboBox as a4, DraggableLine as a5, Dropdown as a6, NumberDropdown as a7, StringDropdown as a8, FactorGradientComponent as a9, Color3GradientComponent as aa, Color4GradientComponent as ab, ColorStepGradientComponent as ac, InfoLabel as ad, List as ae, MessageBar as af, PositionedPopover as ag, SearchBar as ah, SearchBox as ai, SpinButton as aj, CalculatePrecision as ak, Switch as al, SyncedSliderInput as am, Textarea as an, TextInput as ao, ToggleButton as ap, FactorGradientList as aq, Color3GradientList as ar, Color4GradientList as as, Pane as at, PropertiesServiceIdentity as b, SceneExplorerServiceIdentity as c, SettingsServiceIdentity as d, StatsServiceIdentity as e, ShellServiceIdentity as f, BoundProperty as g, TeachingMoment as h, BuiltInsExtensionFeed as i, useVector3Property as j, useColor3Property as k, useColor4Property as l, useQuaternionProperty as m, MakePropertyHook as n, useInterceptObservable as o, useEventfulState as p, useObservableState as q, useObservableCollection as r, useOrderedObservableCollection as s, usePollingObservable as t, useProperty as u, useResource as v, useAsyncResource as w, useAngleConverters as x, MakeTeachingMoment as y, MakeDialogTeachingMoment as z };
+//# sourceMappingURL=index-BTXdoz_s.js.map