@babylonjs/inspector 8.30.3-preview → 8.30.4-preview

package/lib/index.js

@@ -3,7 +3,7 @@ import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createCo
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Stronger, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, mergeClasses, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Body1Strong, TabList, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Dropdown as Dropdown$1, Option, Textarea as Textarea$1, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Stronger, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, mergeClasses, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Body1Strong, TabList, Tooltip, Title3, Tab, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, SplitButton, MenuItemRadio, createLightTheme, createDarkTheme, FluentProvider, DialogActions, List as List$1, ListItem, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, Toolbar as Toolbar$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
 export { Link } from '@fluentui/react-components';
 import { ChevronCircleRight20Regular, ChevronCircleDown20Regular, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, FilterRegular, MoviesAndTvRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowMoveRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, GlobeRegular, SaveRegular, ArrowUndoRegular, ClearFormattingRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, PaintBrushRegular, BoxRegular, BranchRegular, CameraRegular, LightbulbRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, Cone16Filled, Cone16Regular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1 } from '@fluentui/react-motion-components-preview';
@@ -97,6 +97,7 @@ import { BaseTexture } from '@babylonjs/core/Materials/Textures/baseTexture.js';
 import { MultiRenderTarget } from '@babylonjs/core/Materials/Textures/multiRenderTarget.js';
 import { RenderTargetTexture } from '@babylonjs/core/Materials/Textures/renderTargetTexture.js';
 import { ThinTexture } from '@babylonjs/core/Materials/Textures/thinTexture.js';
+import { WhenTextureReadyAsync, GetTextureDataAsync } from '@babylonjs/core/Misc/textureTools.js';
 import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js';
@@ -605,6 +606,7 @@ const useCollapseStyles = makeStyles({
  * @returns
  */
 const Collapse = (props) => {
+    Collapse.displayName = "Collapse";
     const classes = useCollapseStyles();
     return (jsx(Collapse$1, { visible: props.visible, orientation: props.orientation, children: jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
 };
@@ -640,6 +642,7 @@ const ToolContext = createContext({ useFluent: false, disableCopy: false, toolNa
  * @returns
  */
 const ToggleButton = (props) => {
+    ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
@@ -656,6 +659,7 @@ const ToggleButton = (props) => {
 };
 
 const Button = (props) => {
+    Button.displayName = "Button";
     // 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 }));
@@ -671,8 +675,15 @@ const CustomTokens = {
 };
 const UniformWidthStyling = { width: CustomTokens.inputWidth, textAlign: "right", boxSizing: "border-box" };
 const useInputStyles$1 = makeStyles({
-    invalid: { backgroundColor: tokens.colorPaletteRedBackground2, ...UniformWidthStyling },
-    valid: UniformWidthStyling,
+    input: UniformWidthStyling,
+    invalid: { backgroundColor: tokens.colorPaletteRedBackground2 },
+    container: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center", // align items vertically
+        gap: "4px",
+    },
 });
 function HandleOnBlur(event) {
     event.stopPropagation();
@@ -732,6 +743,7 @@ const usePropertyLineStyles = makeStyles({
  *
  */
 const PropertyLine = forwardRef((props, ref) => {
+    PropertyLine.displayName = "PropertyLine";
     const classes = usePropertyLineStyles();
     const { label, onCopy, expandedContent, children, nullable, ignoreNullable } = props;
     const [expanded, setExpanded] = useState("expandByDefault" in props ? props.expandByDefault : false);
@@ -775,6 +787,7 @@ const PlaceholderPropertyLine = (props) => {
  * @returns property-line wrapped link
  */
 const LinkPropertyLine = (props) => {
+    LinkPropertyLine.displayName = "LinkPropertyLine";
     return (jsx(PropertyLine, { ...props, children: jsx(Link, { inline: true, onClick: () => props.onLink?.(), href: props.url, title: props.title, children: jsx(Body1, { children: props.value }) }) }));
 };
 
@@ -793,7 +806,7 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$f = makeStyles({
+const useStyles$g = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
@@ -813,11 +826,13 @@ const useStyles$f = makeStyles({
     },
 });
 const AccordionSection = (props) => {
-    const classes = useStyles$f();
+    AccordionSection.displayName = "AccordionSection";
+    const classes = useStyles$g();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const Accordion = (props) => {
-    const classes = useStyles$f();
+    Accordion.displayName = "Accordion";
+    const classes = useStyles$g();
     const { children, ...rest } = props;
     const validChildren = useMemo(() => {
         return (Children.map(children, (child) => {
@@ -867,7 +882,7 @@ function AsReadonlyArray(array) {
     return array;
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$e = makeStyles({
+const useStyles$f = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -876,7 +891,7 @@ const useStyles$e = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$e();
+    const classes = useStyles$f();
     const { children, sections, sectionContent, context } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -964,7 +979,7 @@ function ExtensibleAccordion(props) {
                 })] })) }));
 }
 
-const useStyles$d = makeStyles({
+const useStyles$e = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -977,12 +992,12 @@ const useStyles$d = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$d();
+    const classes = useStyles$e();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$c = makeStyles({
+const useStyles$d = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -993,7 +1008,7 @@ const useStyles$c = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$c();
+    const classes = useStyles$d();
     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 })] }) }));
 };
 
@@ -1280,13 +1295,13 @@ function ConstructorFactory(constructor) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$b = makeStyles({
+const useStyles$c = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$b();
+    const classes = useStyles$c();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -1329,7 +1344,7 @@ const SelectionServiceDefinition = {
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$a = makeStyles({
+const useStyles$b = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -1452,7 +1467,7 @@ const useStyles$a = makeStyles({
 });
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const ToolbarItem = ({ location, alignment, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
-    const classes = useStyles$a();
+    const classes = useStyles$b();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${location}/${alignment}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: displayName ?? "Extension", description: `The "${displayName ?? id}" extension can be accessed here.` }), jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: jsx(Component, {}) })] }));
@@ -1460,7 +1475,7 @@ const ToolbarItem = ({ location, alignment, id, component: Component, displayNam
 // TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
 // This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
 const Toolbar = ({ location, components }) => {
-    const classes = useStyles$a();
+    const classes = useStyles$b();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
     return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
@@ -1469,7 +1484,7 @@ const Toolbar = ({ location, components }) => {
 const SidePaneTab = ({ alignment, id, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 icon: Icon, title, suppressTeachingMoment, }) => {
-    const classes = useStyles$a();
+    const classes = useStyles$b();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${alignment}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: title ?? "Extension", description: `The "${title ?? id}" extension can be accessed here.` }), jsx(Tab, { ref: teachingMoment.targetRef, className: classes.tab, value: id, icon: jsx(Tooltip, { content: title ?? id, relationship: "description", children: jsx(Icon, {}) }) }, id)] }));
@@ -1478,7 +1493,7 @@ icon: Icon, title, suppressTeachingMoment, }) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolbarMode, topBarItems, bottomBarItems) {
-    const classes = useStyles$a();
+    const classes = useStyles$b();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
@@ -1590,7 +1605,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
             const bottomRightPaneCollection = new ObservableCollection();
             const centralContentCollection = new ObservableCollection();
             const rootComponent = () => {
-                const classes = useStyles$a();
+                const classes = useStyles$b();
                 const topBarItems = useOrderedObservableCollection(topBarItemCollection);
                 const bottomBarItems = useOrderedObservableCollection(bottomBarItemCollection);
                 const topLeftPanes = useOrderedObservableCollection(topLeftPaneCollection);
@@ -1824,7 +1839,7 @@ function ExpandOrCollapseAll(treeItem, open, openItems) {
     TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? treeItem.entity.uniqueId : treeItem.sectionName));
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$9 = makeStyles({
+const useStyles$a = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1859,7 +1874,7 @@ const ToggleCommand = (props) => {
 };
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$9();
+    const classes = useStyles$a();
     return (jsx(FlatTreeItem, { value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(MoviesAndTvRegular, {}), className: classes.sceneTreeItemLayout, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
@@ -1920,7 +1935,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Body1, { wrap: false, truncate: true, children: name.substring(0, 100) }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !entityItem.children?.length, children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$9();
+    const classes = useStyles$a();
     const { sections, commandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -2210,6 +2225,7 @@ const useSwitchStyles = makeStyles({
  * @returns Switch component
  */
 const Switch = (props) => {
+    Switch.displayName = "Switch";
     const classes = useSwitchStyles();
     const [checked, setChecked] = useState(() => props.value ?? false);
     useEffect(() => {
@@ -2230,6 +2246,7 @@ const Switch = (props) => {
  * @returns A React element representing the property line with a switch
  */
 const SwitchPropertyLine = (props) => {
+    SwitchPropertyLine.displayName = "SwitchPropertyLine";
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { label, ...switchProps } = props;
     // Ensure the label gets passed to the PropertyLine component and not to the underlying switch
@@ -2464,6 +2481,7 @@ const SettingsServiceDefinition = {
  * @returns
  */
 const StringifiedPropertyLine = (props) => {
+    StringifiedPropertyLine.displayName = "StringifiedPropertyLine";
     const value = props.precision !== undefined ? props.value.toFixed(props.precision) : props.value.toLocaleString();
     const withUnits = props.units ? `${value} ${props.units}` : value;
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: props.title, children: withUnits }) }));
@@ -2529,10 +2547,12 @@ const FrameStepsStats = ({ context: scene }) => {
  * @returns A button inside a line
  */
 const ButtonLine = (props) => {
+    ButtonLine.displayName = "ButtonLine";
     return (jsx(LineContainer, { children: jsx(Button, { ...props }) }));
 };
 
 const FileUploadLine = (props) => {
+    FileUploadLine.displayName = "FileUploadLine";
     const inputRef = useRef(null);
     const handleButtonClick = () => {
         inputRef.current?.click();
@@ -2655,18 +2675,19 @@ const PerformanceStats = ({ context: scene }) => {
  * @returns property-line wrapped text
  */
 const TextPropertyLine = (props) => {
+    TextPropertyLine.displayName = "TextPropertyLine";
     const { value, title } = props;
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value }) }));
 };
 
-const useStyles$8 = makeStyles({
+const useStyles$9 = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$8();
+    const classes = useStyles$9();
     const scene = props.context;
     const engine = scene.getEngine();
     const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
@@ -2678,7 +2699,10 @@ const StatsPane = (props) => {
  * @param props - The properties for the PropertyLine, including the boolean value to display.
  * @returns A PropertyLine component with a PresenceBadge indicating the boolean state.
  */
-const BooleanBadgePropertyLine = (props) => (jsx(PropertyLine, { ...props, children: jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
+const BooleanBadgePropertyLine = (props) => {
+    BooleanBadgePropertyLine.displayName = "BooleanBadgePropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(PresenceBadge, { status: props.value ? "available" : "do-not-disturb", outOfOffice: true }) }));
+};
 
 const SystemStats = ({ context: scene }) => {
     const engine = scene.getEngine();
@@ -2834,19 +2858,19 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         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-DEj9QNTe.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-nwkeBa_W.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-BaLg4gki.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-Br4kaEaT.js'),
     },
     {
         name: "Import Tools",
         description: "Adds new features related to importing Babylon assets.",
         keywords: ["import", "tools"],
-        getExtensionModuleAsync: async () => await import('./importService-BoR1TPvc.js'),
+        getExtensionModuleAsync: async () => await import('./importService-DtPZclnY.js'),
     },
 ]);
 
@@ -3288,7 +3312,7 @@ class ServiceContainer {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$7 = makeStyles({
+const useStyles$8 = makeStyles({
     extensionButton: {},
     extensionsDialogSurface: {
         height: "auto",
@@ -3333,7 +3357,7 @@ const useStyles$7 = makeStyles({
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const useTeachingMoment = MakePopoverTeachingMoment("Extensions");
 const ExtensionDetails = memo((props) => {
-    const classes = useStyles$7();
+    const classes = useStyles$8();
     const [canInstall, setCanInstall] = useState(false);
     const [canUninstall, setCanUninstall] = useState(false);
     const [isStateChanging, setIsStateChanging] = useState(false);
@@ -3377,7 +3401,7 @@ const ExtensionListServiceDefinition = {
             suppressTeachingMoment: true,
             order: -200,
             component: () => {
-                const classes = useStyles$7();
+                const classes = useStyles$8();
                 const [selectedTab, setSelectedTab] = useState("available");
                 const extensionManager = useExtensionManager();
                 const [extensions, setExtensions] = useState([]);
@@ -3406,7 +3430,7 @@ const ExtensionListServiceDefinition = {
     },
 };
 
-const useStyles$6 = makeStyles({
+const useStyles$7 = makeStyles({
     themeButton: {
         margin: `${tokens.spacingVerticalXXS} 0`,
     },
@@ -3425,7 +3449,7 @@ const ThemeSelectorServiceDefinition = {
             suppressTeachingMoment: true,
             order: -300,
             component: () => {
-                const classes = useStyles$6();
+                const classes = useStyles$7();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -3471,7 +3495,7 @@ const DarkTheme = {
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$5 = makeStyles({
+const useStyles$6 = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -3504,7 +3528,7 @@ const useStyles$5 = makeStyles({
 function MakeModularTool(options) {
     const { containerElement, serviceDefinitions, themeMode, showThemeSelector = true, extensionFeeds = [] } = options;
     const modularToolRootComponent = () => {
-        const classes = useStyles$5();
+        const classes = useStyles$6();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const { isDarkMode } = useThemeMode(themeMode);
         const [requiredExtensions, setRequiredExtensions] = useState();
@@ -3704,7 +3728,7 @@ const GizmoServiceDefinition = {
     },
 };
 
-const useStyles$4 = makeStyles({
+const useStyles$5 = makeStyles({
     coordinatesModeButton: {
         margin: `0 ${tokens.spacingVerticalXS}`,
     },
@@ -3714,7 +3738,7 @@ const useStyles$4 = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { scene, entity, gizmoService } = props;
-    const classes = useStyles$4();
+    const classes = useStyles$5();
     const gizmoManager = useResource(useCallback(() => {
         const utilityLayerRef = gizmoService.getUtilityLayer(scene);
         const keepDepthUtilityLayerRef = gizmoService.getUtilityLayer(scene, "keepDepth");
@@ -3840,10 +3864,12 @@ const TargetedAnimationGeneralProperties = (props) => {
  * @returns
  */
 const InfoLabel = (props) => {
+    InfoLabel.displayName = "InfoLabel";
     return (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: props.info, children: jsx(Body1, { children: props.label }) }));
 };
 
 const TextInput = (props) => {
+    TextInput.displayName = "TextInput";
     const classes = useInputStyles$1();
     const [value, setValue] = useState(props.value);
     const lastCommittedValue = useRef(props.value);
@@ -3874,11 +3900,13 @@ const TextInput = (props) => {
         setValue(event.currentTarget.value);
         tryCommitValue(event.currentTarget.value);
     };
+    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
     const id = useId("input-button");
-    return (jsxs("div", { children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, id: id, size: "medium", value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: `${!validateValue(value) ? classes.invalid : classes.valid}` })] }));
+    return (jsxs("div", { className: classes.container, 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: mergedClassName })] }));
 };
 
 const SpinButton = (props) => {
+    SpinButton.displayName = "SpinButton";
     const classes = useInputStyles$1();
     const { min, max } = props;
     const [value, setValue] = useState(props.value);
@@ -3921,7 +3949,8 @@ const SpinButton = (props) => {
         }
     };
     const id = useId("spin-button");
-    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}` })] }));
+    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
+    return (jsxs("div", { className: classes.container, 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: mergedClassName })] }));
 };
 /**
  * Fluent's CalculatePrecision function
@@ -3972,7 +4001,10 @@ function PrecisionRound(value, precision) {
  * @param props - PropertyLineProps and InputProps
  * @returns property-line wrapped input component
  */
-const TextInputPropertyLine = (props) => (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props }) }));
+const TextInputPropertyLine = (props) => {
+    TextInputPropertyLine.displayName = "TextInputPropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props }) }));
+};
 /**
  * Wraps a number input in a property line
  * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not)
@@ -3980,6 +4012,7 @@ const TextInputPropertyLine = (props) => (jsx(PropertyLine, { ...props, children
  * @returns property-line wrapped input component
  */
 const NumberInputPropertyLine = (props) => {
+    NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
     return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
 };
 
@@ -4002,6 +4035,7 @@ const useSyncedSliderStyles = makeStyles({
  * @returns SyncedSlider component
  */
 const SyncedSliderInput = (props) => {
+    SyncedSliderInput.displayName = "SyncedSliderInput";
     const { infoLabel, ...passthroughProps } = props;
     const classes = useSyncedSliderStyles();
     const [value, setValue] = useState(props.value);
@@ -4051,6 +4085,7 @@ const SyncedSliderInput = (props) => {
  * @returns
  */
 const SyncedSliderPropertyLine = forwardRef((props, ref) => {
+    SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
     const { label, description, ...sliderProps } = props;
     return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
 });
@@ -4130,6 +4165,7 @@ const useClasses = makeStyles({
     },
 });
 const MessageBar = (props) => {
+    MessageBar.displayName = "MessageBar";
     const { message, title: header, intent, docLink } = props;
     const classes = useClasses();
     return (jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [jsx(MessageBarTitle, { children: header }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { href: docLink, target: "_blank", rel: "noopener noreferrer", children: "Learn More" })] }))] }) }) }));
@@ -4237,6 +4273,7 @@ const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaterni
  * @returns
  */
 const TensorPropertyLine = (props) => {
+    TensorPropertyLine.displayName = "TensorPropertyLine";
     const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
     const formatted = (val) => converted(val).toFixed(props.step !== undefined ? CalculatePrecision(props.step) : 2);
     const [vector, setVector] = useState(props.value);
@@ -4252,12 +4289,14 @@ const TensorPropertyLine = (props) => {
 };
 const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
 const RotationVectorPropertyLine = (props) => {
+    RotationVectorPropertyLine.displayName = "RotationVectorPropertyLine";
     const min = props.useDegrees ? 0 : undefined;
     const max = props.useDegrees ? 360 : undefined;
     return (jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "deg" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, min: min, max: max, step: 0.001 }));
 };
 const QuaternionPropertyLineInternal = TensorPropertyLine;
 const QuaternionPropertyLine = (props) => {
+    QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
     const min = props.useDegrees ? 0 : undefined;
     const max = props.useDegrees ? 360 : undefined;
     const [quat, setQuat] = useState(props.value);
@@ -4278,50 +4317,97 @@ const Vector2PropertyLine = TensorPropertyLine;
 const Vector3PropertyLine = TensorPropertyLine;
 const Vector4PropertyLine = TensorPropertyLine;
 
-const useColorPickerStyles = makeStyles({
-    colorPickerContainer: {
-        width: "325px",
+const useDropdownStyles = makeStyles({
+    dropdown: { ...UniformWidthStyling, minWidth: CustomTokens.inputWidth },
+    container: {
         display: "flex",
         flexDirection: "column",
-        gap: tokens.spacingVerticalMNudge, // 10px
+        justifyContent: "center", // align items vertically
+        gap: "4px",
+    },
+});
+/**
+ * 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) => {
+    Dropdown.displayName = "Dropdown";
+    const classes = useDropdownStyles();
+    const { options, value } = props;
+    const [defaultVal, setDefaultVal] = useState(props.value);
+    useEffect(() => {
+        setDefaultVal(value);
+    }, [props.value]);
+    const id = useId("dropdown");
+    const mergedClassName = mergeClasses(classes.dropdown, props.className);
+    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: "medium", className: mergedClassName, 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;
+
+const useColorPickerStyles = makeStyles({
+    container: {
+        width: "380px",
+        display: "flex", // becomes a flexbox
+        flexDirection: "column", // with children in a column
+        alignItems: "center", // centers children horizontally
+        justifyContent: "center", // centers children vertically (if height is set)
+        borderRadius: "4px",
+        gap: "15px",
         overflow: "visible",
     },
+    row: {
+        flex: 1, // is a row in the container's flex column
+        display: "flex", // becomes its own flexbox
+        flexDirection: "row", // with children in a row
+        gap: "20px",
+        alignItems: "center", // align items vertically
+        width: "100%",
+    },
+    colorPicker: {
+        flex: 1,
+        width: "350px",
+        height: "350px",
+    },
     previewColor: {
-        width: "50px",
-        height: "50px",
-        borderRadius: tokens.borderRadiusMedium,
+        width: "60px",
+        height: "60px",
+        borderRadius: tokens.borderRadiusMedium, // 4px?
         border: `${tokens.spacingVerticalXXS} solid ${tokens.colorNeutralShadowKeyLighter}`,
         "@media (forced-colors: active)": {
             forcedColorAdjust: "none", // ensures elmement maintains color in high constrast mode
         },
     },
-    row: {
+    inputRow: {
         display: "flex",
         flexDirection: "row",
-        gap: tokens.spacingVerticalM, // 12px
-        alignItems: "center",
+        flex: 1, // grow and fill available space
+        justifyContent: "center",
+        gap: "10px",
+        width: "100%",
     },
-    colorFieldWrapper: {
-        display: "flex",
-        flexDirection: "column",
+    inputField: {
+        flex: 1, // grow and fill available space
+        width: "auto",
+        minWidth: 0,
         gap: tokens.spacingVerticalSNudge, // 6px
     },
-    input: {
-        width: "80px",
-    },
-    spinButton: {
-        width: "50px",
-    },
-    container: {
-        display: "flex",
-        flexDirection: "column",
-        gap: tokens.spacingVerticalL, // 16px
-    },
 });
 const ColorPickerPopup = (props) => {
+    ColorPickerPopup.displayName = "ColorPickerPopup";
     const classes = useColorPickerStyles();
     const [color, setColor] = useState(props.value);
     const [popoverOpen, setPopoverOpen] = useState(false);
+    const [isLinear, setIsLinear] = useState(props.isLinearMode ?? false);
+    const [isFloat, setFloat] = useState(false);
     useEffect(() => {
         setColor(props.value); // Ensures the trigger color updates when props.value changes
     }, [props.value]);
@@ -4340,9 +4426,21 @@ const ColorPickerPopup = (props) => {
             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})$/);
+        }, 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.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                                        label: "Color Space",
+                                        info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
+                                    }, options: [
+                                        { label: "Gamma", value: 0 },
+                                        { label: "Linear", value: 1 },
+                                    ], disabled: true, value: isLinear ? 1 : 0, onChange: (val) => setIsLinear(val === 1) }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                                        label: "Data Type",
+                                        info: jsx(Body1, { children: "We will introduce this functionality soon!" }),
+                                    }, options: [
+                                        { label: "Int", value: 0 },
+                                        { label: "Float", value: 1 },
+                                    ], disabled: true, value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", linearHex: isLinear, isLinearMode: isLinear, value: color, onChange: handleChange }) })] }) })] }));
+};
+const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/);
 /**
  * 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
@@ -4352,18 +4450,18 @@ const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
  * @returns
  */
 const InputHexField = (props) => {
-    const styles = useColorPickerStyles();
+    const classes = 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 }) }));
+    return (jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: classes.inputField, 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;
@@ -4373,7 +4471,7 @@ const InputRgbField = (props) => {
         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 }) }));
+    return (jsx(SpinButton, { title: title, infoLabel: title ? { label: title } : undefined, className: classes.inputField, min: 0, max: 255, value: Math.round(value[rgbKey] * 255), forceInt: true, onChange: handleChange }));
 };
 function rgbaToHsv(color) {
     const c = new Color3(color.r, color.g, color.b);
@@ -4399,7 +4497,7 @@ const InputHsvField = (props) => {
         }
         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 (jsx(SpinButton, { infoLabel: title ? { label: title } : undefined, title: title, className: classes.inputField, min: 0, max: max, value: Math.round(rgbaToHsv(value)[hsvKey] * scale), forceInt: true, onChange: handleChange }));
 };
 /**
  * Displays the alpha value of a color, either in the disabled state (if color is Color3) or as a spin button (if color is Color4).
@@ -4422,10 +4520,10 @@ const InputAlphaField = (props) => {
             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,
-            } }) }));
+    return (jsx(SpinButton, { disabled: color instanceof Color3, min: 0, max: 1, className: classes.inputField, value: color instanceof Color3 ? 1 : color.a, step: 0.01, onChange: handleChange, infoLabel: {
+            label: "Alpha",
+            info: color instanceof Color3 ? (jsx(Fragment, { children: "Because this color picker is representing a Color3, we do not permit modifying alpha from the color picker. You can however modify the entity's alpha property directly, either in code via entity.alpha OR via inspector's transparency section." })) : undefined,
+        } }));
 };
 
 /**
@@ -4435,6 +4533,7 @@ const InputAlphaField = (props) => {
  * @returns Component wrapping a colorPicker component with a property line
  */
 const ColorPropertyLine = forwardRef((props, ref) => {
+    ColorPropertyLine.displayName = "ColorPropertyLine";
     const [color, setColor] = useState(props.value);
     const onSliderChange = (value, key) => {
         let newColor;
@@ -4558,39 +4657,13 @@ const ArcRotateCameraBehaviorsProperties = (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) => {
+    DropdownPropertyLine.displayName = "DropdownPropertyLine";
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props }) }));
 });
 /**
@@ -5380,6 +5453,7 @@ const useInputStyles = makeStyles({
  * @returns
  */
 const Textarea = (props) => {
+    Textarea.displayName = "Textarea";
     const classes = useInputStyles();
     const handleChange = (event, _data) => {
         event.stopPropagation(); // Prevent event propagation
@@ -5501,7 +5575,7 @@ function SaveMetadata(entity, metadata) {
         entity.metadata = metadata;
     }
 }
-const useStyles$3 = makeStyles({
+const useStyles$4 = makeStyles({
     buttonDiv: {
         display: "grid",
         gridAutoFlow: "column",
@@ -5516,7 +5590,7 @@ const useStyles$3 = makeStyles({
  */
 const MetadataProperties = (props) => {
     const { entity } = props;
-    const classes = useStyles$3();
+    const classes = useStyles$4();
     const metadata = useProperty(entity, "metadata");
     const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata) ?? "", [metadata]);
     const metadataType = useMemo(() => GetMetadataEntityType(metadata), [metadata]);
@@ -5990,6 +6064,7 @@ const useGradientStyles = makeStyles({
  * @returns A React component
  */
 const Gradient = (props) => {
+    Gradient.displayName = "Gradient";
     const [gradient, setGradient] = useState(props.value);
     const classes = useGradientStyles();
     useEffect(() => {
@@ -6046,6 +6121,7 @@ function GradientsToListItems(gradients) {
     })) ?? []);
 }
 const FactorGradientList = (props) => {
+    FactorGradientList.displayName = "FactorGradientList";
     const { gradients } = props;
     const items = GradientsToListItems(gradients);
     return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
@@ -6065,6 +6141,7 @@ const FactorGradientList = (props) => {
         } }, "Factor"));
 };
 const Color3GradientList = (props) => {
+    Color3GradientList.displayName = "Color3GradientList";
     const { gradients } = props;
     const items = GradientsToListItems(gradients);
     return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
@@ -6083,6 +6160,7 @@ const Color3GradientList = (props) => {
         } }, "Color3"));
 };
 const Color4GradientList = (props) => {
+    Color4GradientList.displayName = "Color4GradientList";
     const { gradients } = props;
     const items = GradientsToListItems(gradients);
     return (jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
@@ -6377,6 +6455,7 @@ const PhysicsPropertiesServiceDefinition = {
  * @returns Checkbox component
  */
 const Checkbox = (props) => {
+    Checkbox.displayName = "Checkbox";
     const [checked, setChecked] = useState(() => props.value ?? false);
     useEffect(() => {
         if (props.value != undefined) {
@@ -6396,6 +6475,7 @@ const Checkbox = (props) => {
  * @returns property-line wrapped checkbox
  */
 const CheckboxPropertyLine = (props) => {
+    CheckboxPropertyLine.displayName = "CheckboxPropertyLine";
     return (jsx(PropertyLine, { ...props, children: jsx(Checkbox, { ...props }) }));
 };
 
@@ -6885,6 +6965,180 @@ function FindTextureType(type) {
     return null;
 }
 
+const useStyles$3 = makeStyles({
+    root: { display: "flex", flexDirection: "column", gap: "8px" },
+    controls: {
+        display: "flex",
+        gap: "2px",
+        padding: "2px",
+        width: "100%",
+        justifyContent: "center",
+    },
+    controlButton: {
+        minWidth: "auto",
+        flex: "1 1 0", // Equal flex grow/shrink with 0 basis
+        paddingVertical: "4px",
+        paddingHorizontal: "8px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    preview: {
+        border: "1px solid #ccc",
+        marginTop: "8px",
+        maxWidth: "100%",
+        marginLeft: "auto",
+        marginRight: "auto",
+        display: "block",
+    },
+});
+// This method of holding TextureChannels was brought over from inspectorv1 and can likely be refactored/simplified
+const TextureChannelStates = {
+    R: { R: true, G: false, B: false, A: false },
+    G: { R: false, G: true, B: false, A: false },
+    B: { R: false, G: false, B: true, A: false },
+    A: { R: false, G: false, B: false, A: true },
+    ALL: { R: true, G: true, B: true, A: true },
+};
+const TexturePreview = (props) => {
+    const { texture, width, height } = props;
+    const classes = useStyles$3();
+    const canvasRef = useRef(null);
+    const [channels, setChannels] = useState(TextureChannelStates.ALL);
+    const [face, setFace] = useState(0);
+    const internalTexture = useProperty(texture, "_texture");
+    const updatePreviewCanvasSize = useCallback((previewCanvas) => {
+        // This logic was brought over from inspectorv1 and can likely be refactored/simplified
+        const size = texture.getSize();
+        const ratio = size.width / size.height;
+        let w = width;
+        let h = (w / ratio) | 1;
+        const engine = texture.getScene()?.getEngine();
+        if (engine && h > engine.getCaps().maxTextureSize) {
+            w = size.width;
+            h = size.height;
+        }
+        previewCanvas.width = w;
+        previewCanvas.height = h;
+        previewCanvas.style.width = w + "px";
+        previewCanvas.style.height = h + "px";
+        return {
+            w: w,
+            h: h,
+        };
+    }, [canvasRef.current, texture, width, height, internalTexture]);
+    const updatePreviewAsync = useCallback(async () => {
+        const previewCanvas = canvasRef.current;
+        if (!previewCanvas) {
+            return;
+        }
+        try {
+            await WhenTextureReadyAsync(texture); // Ensure texture is loaded before grabbing size
+            const { w, h } = updatePreviewCanvasSize(previewCanvas); // Grab desired size
+            const data = await ApplyChannelsToTextureDataAsync(texture, w, h, face, channels); // get channel data to load onto canvas context
+            const context = previewCanvas.getContext("2d");
+            if (context) {
+                const imageData = context.createImageData(w, h);
+                imageData.data.set(data);
+                context.putImageData(imageData, 0, 0);
+            }
+        }
+        catch {
+            updatePreviewCanvasSize(previewCanvas); // If we fail above, best effort sizing preview canvas
+        }
+    }, [[texture, width, height, face, channels, internalTexture]]);
+    useEffect(() => {
+        void updatePreviewAsync();
+    }, [texture, width, height, face, channels, internalTexture]);
+    return (jsxs("div", { className: classes.root, children: [texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("canvas", { ref: canvasRef, className: classes.preview }), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
+                    void updatePreviewAsync();
+                }, children: "Refresh" }))] }));
+};
+/**
+ * Gets the data of the specified texture by rendering it to an intermediate RGBA texture and retrieving the bytes from it.
+ * This is convienent to get 8-bit RGBA values for a texture in a GPU compressed format.
+ * @param texture the source texture
+ * @param width the width of the result, which does not have to match the source texture width
+ * @param height the height of the result, which does not have to match the source texture height
+ * @param face if the texture has multiple faces, the face index to use for the source
+ * @param channels a filter for which of the RGBA channels to return in the result
+ * @param lod if the texture has multiple LODs, the lod index to use for the source
+ * @returns the 8-bit texture data
+ */
+async function ApplyChannelsToTextureDataAsync(texture, width, height, face, channels, lod = 0) {
+    const data = await GetTextureDataAsync(texture, width, height, face, lod);
+    if (!channels.R || !channels.G || !channels.B || !channels.A) {
+        for (let i = 0; i < width * height * 4; i += 4) {
+            // If alpha is the only channel, just display alpha across all channels
+            if (channels.A && !channels.R && !channels.G && !channels.B) {
+                data[i] = data[i + 3];
+                data[i + 1] = data[i + 3];
+                data[i + 2] = data[i + 3];
+                data[i + 3] = 255;
+                continue;
+            }
+            let r = data[i], g = data[i + 1], b = data[i + 2], a = data[i + 3];
+            // If alpha is not visible, make everything 100% alpha
+            if (!channels.A) {
+                a = 255;
+            }
+            // If only one color channel is selected, map both colors to it. If two are selected, the unused one gets set to 0
+            if (!channels.R) {
+                if (channels.G && !channels.B) {
+                    r = g;
+                }
+                else if (channels.B && !channels.G) {
+                    r = b;
+                }
+                else {
+                    r = 0;
+                }
+            }
+            if (!channels.G) {
+                if (channels.R && !channels.B) {
+                    g = r;
+                }
+                else if (channels.B && !channels.R) {
+                    g = b;
+                }
+                else {
+                    g = 0;
+                }
+            }
+            if (!channels.B) {
+                if (channels.R && !channels.G) {
+                    b = r;
+                }
+                else if (channels.G && !channels.R) {
+                    b = g;
+                }
+                else {
+                    b = 0;
+                }
+            }
+            data[i] = r;
+            data[i + 1] = g;
+            data[i + 2] = b;
+            data[i + 3] = a;
+        }
+    }
+    //To flip image on Y axis.
+    if (texture.invertY || texture.isCube) {
+        const numberOfChannelsByLine = width * 4;
+        const halfHeight = height / 2;
+        for (let i = 0; i < halfHeight; i++) {
+            for (let j = 0; j < numberOfChannelsByLine; j++) {
+                const currentCell = j + i * numberOfChannelsByLine;
+                const targetLine = height - i - 1;
+                const targetCell = j + targetLine * numberOfChannelsByLine;
+                const temp = data[currentCell];
+                data[currentCell] = data[targetCell];
+                data[targetCell] = temp;
+            }
+        }
+    }
+    return data;
+}
+
 const BaseTexturePreviewProperties = (props) => {
     const { texture } = props;
     const isUpdatable = texture instanceof Texture || texture instanceof CubeTexture;
@@ -6911,11 +7165,11 @@ const BaseTexturePreviewProperties = (props) => {
             };
         }, undefined, true);
     }, [texture]);
-    return (jsxs(Fragment, { children: [jsx(PlaceholderPropertyLine, { label: "TODO: Texture Preview", value: null, onChange: () => { } }), isUpdatable && (jsx(FileUploadLine, { label: "Load Texture From File", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
+    return (jsxs(Fragment, { children: [jsx(TexturePreview, { texture: texture, width: 256, height: 256 }), isUpdatable && (jsx(FileUploadLine, { label: "Load Texture From File", accept: ".jpg, .png, .tga, .dds, .env, .exr", onClick: (files) => {
                     if (files.length > 0) {
                         updateTexture(files[0]);
                     }
-                } })), jsx(PlaceholderPropertyLine, { label: "TODO:Texture Editor", value: null, onChange: () => { } })] }));
+                } })), jsx(ButtonLine, { label: "Edit Texture (coming soon!)", onClick: () => { } })] }));
 };
 const BaseTextureGeneralProperties = (props) => {
     const { texture } = props;
@@ -8273,6 +8527,7 @@ const useStyles$2 = makeStyles({
  * @returns
  */
 const ComboBox = (props) => {
+    ComboBox.displayName = "ComboBox";
     const comboId = useId();
     const styles = useStyles$2();
     const [query, setQuery] = useState("");
@@ -8333,6 +8588,7 @@ const useDraggableStyles = makeStyles({
     },
 });
 const DraggableLine = (props) => {
+    DraggableLine.displayName = "DraggableLine";
     const classes = useDraggableStyles();
     return (jsxs("div", { className: classes.draggable, title: props.tooltip, draggable: true, onDragStart: (event) => {
             event.dataTransfer.setData(props.format, props.data);
@@ -8345,6 +8601,7 @@ const DraggableLine = (props) => {
  * @returns The positioned popover component
  */
 const PositionedPopover = (props) => {
+    PositionedPopover.displayName = "PositionedPopover";
     const [open, setOpen] = useState(false);
     useEffect(() => {
         setOpen(props.visible);
@@ -8373,6 +8630,7 @@ const useStyles$1 = makeStyles({
     },
 });
 const SearchBar = forwardRef((props, ref) => {
+    SearchBar.displayName = "SearchBar";
     const classes = useStyles$1();
     const onChange = (_, data) => {
         props.onChange(data.value);
@@ -8442,6 +8700,7 @@ const useSearchBoxStyles = makeStyles({
  * @returns The search box component
  */
 const SearchBox = (props) => {
+    SearchBox.displayName = "SearchBox";
     const classes = useSearchBoxStyles();
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [items, setItems] = useState(props.items);
@@ -8503,10 +8762,14 @@ const Pane = (props) => {
  * @returns property-line wrapped input hex component
  */
 const HexPropertyLine = (props) => {
+    HexPropertyLine.displayName = "HexPropertyLine";
     return (jsx(PropertyLine, { ...props, children: jsx(InputHexField, { ...props }) }));
 };
 
-const SpinButtonPropertyLine = (props) => (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
+const SpinButtonPropertyLine = (props) => {
+    SpinButtonPropertyLine.displayName = "SpinButtonPropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
+};
 
 /**
  * Wraps textarea in a property line
@@ -8514,6 +8777,7 @@ const SpinButtonPropertyLine = (props) => (jsx(PropertyLine, { ...props, childre
  * @returns property-line wrapped text
  */
 const TextAreaPropertyLine = (props) => {
+    TextAreaPropertyLine.displayName = "TextAreaPropertyLine";
     return (jsx(PropertyLine, { ...props, children: jsx(Textarea, { ...props }) }));
 };