@babylonjs/inspector 8.41.2-preview → 8.42.0-preview

package/lib/{index-BUtV9Nch.js → index-BgzFAhky.js}

@@ -3,7 +3,7 @@ import { createContext, useContext, useMemo, useEffect, useState, useRef, useCal
 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, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, Portal, RendererProvider, ToolbarRadioButton, createDOMRenderer, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, treeItemLevelToken, MenuItemCheckbox, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Spinner, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { makeStyles, Link as Link$1, Body1, ToggleButton as ToggleButton$1, Button as Button$1, tokens, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, Portal, RendererProvider, ToolbarRadioButton, createDOMRenderer, MenuGroup, MenuGroupHeader, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, treeItemLevelToken, MenuItemCheckbox, Switch as Switch$1, PresenceBadge, useId, SpinButton as SpinButton$1, Slider, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Spinner, Badge, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, Field } from '@fluentui/react-components';
 import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
@@ -72,6 +72,7 @@ import { Constants } from '@babylonjs/core/Engines/constants.js';
 import { Engine } from '@babylonjs/core/Engines/engine.js';
 import { ParticleSystem } from '@babylonjs/core/Particles/particleSystem.js';
 import { ReadFile } from '@babylonjs/core/Misc/fileTools.js';
+import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
 import { Mesh } from '@babylonjs/core/Meshes/mesh.js';
 import { SkeletonViewer } from '@babylonjs/core/Debug/skeletonViewer.js';
 import { VertexBuffer } from '@babylonjs/core/Meshes/buffer.js';
@@ -89,16 +90,15 @@ import { TransformNode } from '@babylonjs/core/Meshes/transformNode.js';
 import { PhysicsPrestepType } from '@babylonjs/core/Physics/v2/IPhysicsEnginePlugin.js';
 import '@babylonjs/core/Physics/v2/physicsEngineComponent.js';
 import { PostProcess } from '@babylonjs/core/PostProcesses/postProcess.js';
-import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
 import { ImageProcessingConfiguration } from '@babylonjs/core/Materials/imageProcessingConfiguration.js';
 import { Skeleton } from '@babylonjs/core/Bones/skeleton.js';
 import { Sprite } from '@babylonjs/core/Sprites/sprite.js';
 import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager.js';
+import { WhenTextureReadyAsync, GetTextureDataAsync } from '@babylonjs/core/Misc/textureTools.js';
 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 { ClusteredLightContainer } from '@babylonjs/core/Lights/Clustered/clusteredLightContainer.js';
 import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
 import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
@@ -682,13 +682,13 @@ const ToggleButton = (props) => {
     return (jsx(ToggleButton$1, { title: title, size: size, icon: checked ? jsx(props.checkedIcon, {}) : props.uncheckedIcon ? jsx(props.uncheckedIcon, {}) : jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }));
 };
 
-const Button = (props) => {
-    Button.displayName = "Button";
+const Button = forwardRef((props, ref) => {
     const { size } = useContext(ToolContext);
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { icon: Icon, label, ...buttonProps } = props;
-    return (jsx(Button$1, { iconPosition: "after", ...buttonProps, size: size, icon: Icon && jsx(Icon, {}), children: label && props.label }));
-};
+    return (jsx(Button$1, { ref: ref, iconPosition: "after", ...buttonProps, size: size, icon: Icon && jsx(Icon, {}), children: label && props.label }));
+});
+Button.displayName = "Button";
 
 const CustomTokens = {
     inputWidth: "150px",
@@ -885,7 +885,7 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$h = makeStyles({
+const useStyles$j = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
@@ -929,13 +929,13 @@ const useStyles$h = makeStyles({
 });
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$h();
+    const classes = useStyles$j();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
 const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
-    const classes = useStyles$h();
+    const classes = useStyles$j();
     const { size } = useContext(ToolContext);
     const { children, highlightSections, ...rest } = props;
     const validChildren = useMemo(() => {
@@ -1067,7 +1067,7 @@ function AsReadonlyArray(array) {
     return array;
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$g = makeStyles({
+const useStyles$i = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1076,7 +1076,7 @@ const useStyles$g = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$g();
+    const classes = useStyles$i();
     const { children, sections, sectionContent, context, sectionsRef } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -1181,7 +1181,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$f = makeStyles({
+const useStyles$h = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -1194,12 +1194,12 @@ const useStyles$f = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$f();
+    const classes = useStyles$h();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$e = makeStyles({
+const useStyles$g = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -1210,7 +1210,7 @@ const useStyles$e = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$e();
+    const classes = useStyles$g();
     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 })] }) }));
 };
 
@@ -1466,13 +1466,13 @@ function ConstructorFactory(constructor) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$d = makeStyles({
+const useStyles$f = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$d();
+    const classes = useStyles$f();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -1613,7 +1613,7 @@ function useResizeHandle(params) {
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$c = makeStyles({
+const useStyles$e = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -1801,12 +1801,12 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$c();
+    const classes = useStyles$e();
     return (jsx(Theme, { invert: true, children: jsxs("div", { className: classes.paneHeaderDiv, children: [jsx(Subtitle2Stronger, { className: classes.paneHeaderText, children: title }), jsx(DockMenu, { sidePaneId: id, dockOptions: dockOptions, children: jsx(Button$1, { className: classes.paneHeaderButton, appearance: "transparent", icon: jsx(MoreHorizontalRegular, {}) }) })] }) }));
 };
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const ToolbarItem = ({ verticalLocation, horizontalLocation, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
-    const classes = useStyles$c();
+    const classes = useStyles$e();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: displayName ?? "Extension", description: `The "${displayName ?? id}" extension can be accessed here.` }), jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: jsx(Component, {}) })] }));
@@ -1814,7 +1814,7 @@ const ToolbarItem = ({ verticalLocation, horizontalLocation, id, component: Comp
 // TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
 // This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
 const Toolbar = ({ location, components }) => {
-    const classes = useStyles$c();
+    const classes = useStyles$e();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
     return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : null}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
@@ -1824,7 +1824,7 @@ const SidePaneTab = (props) => {
     const { location, id, isSelected, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, suppressTeachingMoment, } = props;
-    const classes = useStyles$c();
+    const classes = useStyles$e();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     const tabClass = mergeClasses(classes.tab, isSelected ? undefined : classes.unselectedTab);
@@ -1837,7 +1837,7 @@ const SidePaneTab = (props) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems) {
-    const classes = useStyles$c();
+    const classes = useStyles$e();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
@@ -2077,7 +2077,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 undock: () => onDockChanged.notifyObservers({ location: "right", dock: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$c();
+                const classes = useStyles$e();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSidePaneDockOverrides();
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -2513,7 +2513,7 @@ function useCommandContextMenuState(commands) {
     return [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems];
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$b = makeStyles({
+const useStyles$d = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2581,14 +2581,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     const [compactMode] = useCompactMode();
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     return (jsx(FlatTreeItem, { value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, commandProviders, expandAll, collapseAll } = props;
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     const [compactMode] = useCompactMode();
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -2605,7 +2605,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     const [compactMode] = useCompactMode();
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -2698,7 +2698,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -3347,20 +3347,37 @@ 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 FileUploadLine = (props) => {
-    FileUploadLine.displayName = "FileUploadLine";
+/**
+ * A button that triggers a file upload dialog.
+ * Combines a Button with a hidden file input.
+ * @param props UploadButtonProps
+ * @returns UploadButton component
+ */
+const UploadButton = (props) => {
+    const { onUpload, accept, label, ...buttonProps } = props;
+    UploadButton.displayName = "UploadButton";
     const inputRef = useRef(null);
-    const handleButtonClick = () => {
+    const handleClick = () => {
         inputRef.current?.click();
     };
     const handleChange = (evt) => {
         const files = evt.target.files;
         if (files && files.length) {
-            props.onClick(files);
+            onUpload(files);
         }
         evt.target.value = "";
     };
-    return (jsxs(Fragment, { children: [jsx(ButtonLine, { onClick: handleButtonClick, icon: ArrowUploadRegular, label: props.label }), jsx("input", { ref: inputRef, type: "file", accept: props.accept, style: { display: "none" }, onChange: handleChange })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { icon: ArrowUploadRegular, title: label ?? "Upload", label: label, onClick: handleClick, ...buttonProps }), jsx("input", { ref: inputRef, type: "file", accept: accept, style: { display: "none" }, onChange: handleChange })] }));
+};
+
+/**
+ * A full-width line with an upload button.
+ * For just the button without the line wrapper, use UploadButton directly.
+ * @returns An UploadButton wrapped in a LineContainer
+ */
+const FileUploadLine = ({ onClick, label, accept, ...buttonProps }) => {
+    FileUploadLine.displayName = "FileUploadLine";
+    return (jsx(LineContainer, { children: jsx(UploadButton, { onUpload: onClick, accept: accept, label: label, ...buttonProps }) }));
 };
 
 var PerfMetadataCategory;
@@ -3476,14 +3493,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value }) }));
 };
 
-const useStyles$a = makeStyles({
+const useStyles$c = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$a();
+    const classes = useStyles$c();
     const scene = props.context;
     const engine = scene.getEngine();
     const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
@@ -3661,7 +3678,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./exportService-BnE7xiJF.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-LaUVRgd_.js'),
     },
     {
         name: "Capture Tools",
@@ -3669,7 +3686,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-Bu7areEZ.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-CbpbBn5F.js'),
     },
     {
         name: "Import Tools",
@@ -3677,7 +3694,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-CF3uudG4.js'),
+        getExtensionModuleAsync: async () => await import('./importService-B98QFvNM.js'),
     },
     {
         name: "Quick Creation Tools (Preview)",
@@ -3685,7 +3702,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-C-yzV033.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-Bg2plbI-.js'),
     },
 ]);
 
@@ -3903,6 +3920,29 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
+const useStyles$b = makeStyles({
+    surface: {
+        maxWidth: "400px",
+    },
+    content: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalM,
+        padding: tokens.spacingHorizontalL,
+        minWidth: "300px",
+    },
+});
+const Popover = (props) => {
+    const { children } = props;
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const classes = useStyles$b();
+    return (jsxs(Popover$1, { open: popoverOpen, onOpenChange: (_, data) => setPopoverOpen(data.open), positioning: {
+            align: "start",
+            overflowBoundary: document.body,
+            autoSize: true,
+        }, trapFocus: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: props.trigger ?? jsx(Button, { icon: props.icon, onClick: () => setPopoverOpen(true) }) }), jsx(PopoverSurface, { className: classes.surface, children: jsx("div", { className: classes.content, children: children }) })] }));
+};
+
 const useColorPickerStyles = makeStyles({
     container: {
         width: "350px",
@@ -3954,7 +3994,6 @@ 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);
     const { size } = useContext(ToolContext);
@@ -3972,23 +4011,19 @@ const ColorPickerPopup = (props) => {
         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: size === "small" ? "extra-small" : "small", shape: "rounded", 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 }) })] }) })] }));
+    return (jsx(Popover, { trigger: jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: color.toHexString(), value: color.toHexString().slice(1) }), children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                                label: "Color Space",
+                                info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
+                            }, options: [
+                                { label: "Gamma", value: 0 },
+                                { label: "Linear", value: 1 },
+                            ], disabled: true, value: isLinear ? 1 : 0, onChange: (val) => setIsLinear(val === 1) }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
+                                label: "Data Type",
+                                info: jsx(Body1, { children: "We will introduce this functionality soon!" }),
+                            }, options: [
+                                { label: "Int", value: 0 },
+                                { label: "Float", value: 1 },
+                            ], disabled: true, value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", linearHex: isLinear, isLinearMode: isLinear, value: color, onChange: handleChange }) })] }) }));
 };
 /**
  * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
@@ -4108,7 +4143,7 @@ const ColorPropertyLine = forwardRef((props, ref) => {
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$9 = makeStyles({
+const useStyles$a = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -4120,7 +4155,7 @@ const useStyles$9 = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$9();
+    const classes = useStyles$a();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -4694,7 +4729,7 @@ class ServiceContainer {
     }
 }
 
-const useStyles$8 = makeStyles({
+const useStyles$9 = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -4713,7 +4748,7 @@ const ThemeSelectorServiceDefinition = {
             suppressTeachingMoment: true,
             order: -300,
             component: () => {
-                const classes = useStyles$8();
+                const classes = useStyles$9();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -4731,7 +4766,7 @@ const ThemeSelectorServiceDefinition = {
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$7 = makeStyles({
+const useStyles$8 = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -4767,7 +4802,7 @@ function MakeModularTool(options) {
         SetThemeMode(themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$7();
+        const classes = useStyles$8();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -4793,7 +4828,7 @@ function MakeModularTool(options) {
                 });
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-s7SPclHA.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-CwnEf0dV.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -4975,7 +5010,7 @@ const MeshIcon = createFluentIcon("Mesh", "16", '<path d="M14.03,3.54l-5.11-2.07
 const TranslateIcon = createFluentIcon("Translate", "24", '<path d="M20.16,12.98l-2.75-2.75c-.29-.29-.77-.29-1.06,0-.29.29-.29.77,0,1.06l1.47,1.47h-6.69v-6.69l1.47,1.47c.29.29.77.29,1.06,0,.29-.29.29-.77,0-1.06l-2.75-2.75c-.14-.14-.33-.22-.53-.22s-.39.08-.53.22l-2.75,2.75c-.29.29-.29.77,0,1.06.29.29.77.29,1.06,0l1.47-1.47v7.13l-3.52,3.52v-2.08c0-.41-.34-.75-.75-.75s-.75.34-.75.75v3.89c0,.2.08.39.22.53.14.14.33.22.53.22h3.89c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-2.08s3.52-3.52,3.52-3.52h7.13l-1.47,1.47c-.29.29-.29.77,0,1.06s.77.29,1.06,0l2.75-2.75c.14-.14.22-.33.22-.53s-.08-.39-.22-.53Z" />');
 const MaterialIcon = createFluentIcon("Material", "16", '<path d="M14.74,6.3c-.09-.36-.38-.64-.75-.72-.04-.09-.08-.18-.12-.27.1-.15.16-.32.16-.51,0-.18-.05-.34-.13-.48-1.23-1.97-3.41-3.28-5.9-3.28C4.16,1.04,1.04,4.16,1.04,7.99c0,.39.23.72.57.88.02.12.03.25.06.37-.18.18-.3.42-.3.7,0,.11.02.21.06.31.94,2.74,3.53,4.71,6.58,4.71,3.84,0,6.96-3.12,6.96-6.96,0-.59-.08-1.16-.22-1.7ZM2.07,8.58c-.02-.19-.03-.39-.03-.58,0-3.29,2.67-5.96,5.96-5.96,2.23,0,4.17,1.23,5.2,3.05.05.18-.07.45-.3.75-.57-.73-1.45-1.21-2.45-1.21-1.72,0-3.12,1.4-3.12,3.11,0,.33.07.65.16.95-3.05.82-5.17.52-5.42-.11ZM12.56,7.75c0,1.17-.95,2.11-2.11,2.11s-2.12-.95-2.12-2.11.95-2.11,2.12-2.11,2.11.95,2.11,2.11ZM8,13.96c-2.6,0-4.81-1.68-5.62-4.01.5.16,1.11.24,1.79.24,1.15,0,2.49-.22,3.79-.59.57.76,1.47,1.26,2.49,1.26,1.72,0,3.11-1.4,3.11-3.11,0-.34-.07-.65-.17-.96.13-.13.24-.26.34-.39.14.51.22,1.04.22,1.6,0,3.29-2.67,5.96-5.96,5.96Z"/>');
 
-const useStyles$6 = makeStyles({
+const useStyles$7 = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -4985,7 +5020,7 @@ const useStyles$6 = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { scene, entity, gizmoService } = props;
-    const classes = useStyles$6();
+    const classes = useStyles$7();
     const gizmoManager = useResource(useCallback(() => {
         const utilityLayerRef = gizmoService.getUtilityLayer(scene);
         const keepDepthUtilityLayerRef = gizmoService.getUtilityLayer(scene, "keepDepth");
@@ -5100,7 +5135,7 @@ const GizmoToolbarServiceDefinition = {
     },
 };
 
-const useStyles$5 = makeStyles({
+const useStyles$6 = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -5116,7 +5151,7 @@ const MiniStatsServiceDefinition = {
             horizontalLocation: "right",
             suppressTeachingMoment: true,
             component: () => {
-                const classes = useStyles$5();
+                const classes = useStyles$6();
                 const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
                 const engine = scene?.getEngine();
                 const fps = useObservableState(useCallback(() => (engine ? Math.round(engine.getFps()) : null), [engine]), engine?.onBeginFrameObservable);
@@ -6086,6 +6121,168 @@ const PBRBaseMaterialSheenProperties = (props) => {
                         } }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness", target: material.sheen, propertyKey: "_useRoughness" }), jsx(Collapse, { visible: useRoughness, children: jsx(BoundProperty, { nullable: true, component: SyncedSliderPropertyLine, label: "Roughness", target: material.sheen, propertyKey: "roughness", defaultValue: 0, min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.sheen, propertyKey: "useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Albedo Scaling", target: material.sheen, propertyKey: "albedoScaling" })] })] }));
 };
 
+/**
+ * A button that uploads a file and either:
+ * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided)
+ * - Creates a new Texture or CubeTexture (if scene/onChange props are provided)
+ * @param props TextureUploadProps
+ * @returns UploadButton component that handles texture upload
+ */
+const TextureUpload = (props) => {
+    TextureUpload.displayName = "TextureUpload";
+    const label = props.texture ? "Upload Texture" : undefined;
+    // TODO: This should probably be dynamically fetching a list of supported texture extensions
+    const accept = ".jpg, .png, .tga, .dds, .env, .exr";
+    const handleUpload = useCallback((files) => {
+        const file = files[0];
+        if (!file) {
+            return;
+        }
+        ReadFile(file, (data) => {
+            const blob = new Blob([data], { type: "octet/stream" });
+            // Update existing texture
+            if (props.texture) {
+                const { texture, onChange } = props;
+                const reader = new FileReader();
+                reader.readAsDataURL(blob);
+                reader.onloadend = () => {
+                    const base64data = reader.result;
+                    if (texture instanceof CubeTexture) {
+                        let extension = undefined;
+                        if (file.name.toLowerCase().indexOf(".dds") > 0) {
+                            extension = ".dds";
+                        }
+                        else if (file.name.toLowerCase().indexOf(".env") > 0) {
+                            extension = ".env";
+                        }
+                        texture.updateURL(base64data, extension, () => onChange?.(texture));
+                    }
+                    else if (texture instanceof Texture) {
+                        texture.updateURL(base64data, null, () => onChange?.(texture));
+                    }
+                };
+            }
+            else {
+                // Create new texture
+                const { scene, cubeOnly, onChange } = props;
+                const url = URL.createObjectURL(blob);
+                const extension = file.name.split(".").pop()?.toLowerCase();
+                // Revoke the object URL after texture loads to prevent memory leak
+                const revokeUrl = () => URL.revokeObjectURL(url);
+                const newTexture = cubeOnly
+                    ? new CubeTexture(url, scene, [], false, undefined, revokeUrl, undefined, undefined, false, extension ? "." + extension : undefined)
+                    : new Texture(url, scene, false, false, undefined, revokeUrl);
+                onChange(newTexture);
+            }
+        }, undefined, true);
+    }, [props]);
+    return jsx(UploadButton, { onUpload: handleUpload, accept: accept, title: "Upload Texture", label: label });
+};
+
+const useStyles$5 = makeStyles({
+    root: {
+        // Stack the label above the field with a gap
+        display: "grid",
+        gridTemplateRows: "repeat(1fr)",
+        justifyItems: "start",
+        gap: "2px",
+        maxWidth: "400px",
+    },
+    comboBox: {
+        width: CustomTokens.inputWidth,
+        minWidth: CustomTokens.inputWidth,
+        boxSizing: "border-box",
+    },
+    input: {
+        minWidth: 0, // Override Fluent's default minWidth on the input
+    },
+});
+/**
+ * Wrapper around a Fluent ComboBox that allows for filtering options
+ * @param props
+ * @returns
+ */
+const ComboBox = (props) => {
+    ComboBox.displayName = "ComboBox";
+    const comboId = useId();
+    const styles = useStyles$5();
+    const { size } = useContext(ToolContext);
+    const [query, setQuery] = useState(props.value ?? "");
+    // Sync query with props.value when it changes externally
+    useEffect(() => {
+        setQuery(props.value ?? "");
+    }, [props.value]);
+    const children = useComboboxFilter(query, props.options, {
+        noOptionsMessage: "No items match your search.",
+    });
+    const onOptionSelect = (_e, data) => {
+        setQuery(data.optionText ?? "");
+        data.optionText && props.onChange(data.optionText);
+    };
+    return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { size: size, root: { className: styles.comboBox }, input: { className: styles.input }, onOptionSelect: onOptionSelect, onBlur: () => props.onChange(query), "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
+};
+
+const useStyles$4 = makeStyles({
+    container: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalS,
+    },
+});
+/**
+ * A primitive component with a ComboBox for selecting from existing scene textures
+ * and a button for uploading new texture files.
+ * @param props ChooseTextureProps
+ * @returns ChooseTexture component
+ */
+const ChooseTexture = (props) => {
+    ChooseTexture.displayName = "ChooseTexture";
+    const { scene, cubeOnly, value, onChange } = props;
+    const classes = useStyles$4();
+    // Get sorted texture names from scene
+    const textureOptions = useMemo(() => {
+        return scene.textures
+            .filter((t) => t.name && (!cubeOnly || t.isCube))
+            .map((t) => t.displayName || t.name)
+            .sort((a, b) => a.localeCompare(b));
+    }, [scene.textures, cubeOnly]);
+    const handleTextureSelect = (textureName) => {
+        const texture = scene.textures.find((t) => (t.displayName || t.name) === textureName);
+        onChange(texture ?? null);
+    };
+    // Get current texture name for initial display
+    const currentTextureName = value ? value.displayName || value.name : "";
+    return (jsxs("div", { className: classes.container, children: [jsx(ComboBox, { label: "", options: textureOptions, value: currentTextureName, onChange: handleTextureSelect }), jsx(TextureUpload, { scene: scene, onChange: onChange, cubeOnly: cubeOnly })] }));
+};
+
+/**
+ * A property line with a ComboBox for selecting from existing scene textures
+ * and a button for uploading new texture files.
+ * @param props - ChooseTextureProps & PropertyLineProps
+ * @returns property-line wrapped ChooseTexture component
+ */
+const ChooseTexturePropertyLine = (props) => {
+    ChooseTexturePropertyLine.displayName = "ChooseTexturePropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(ChooseTexture, { ...props }) }));
+};
+
+/**
+ * Helper to bind texture properties without needing defaultValue
+ * @param props - The required properties
+ * @returns ChooseTexturePropertyLine component
+ */
+function BoundTextureProperty(props) {
+    const { label, target, propertyKey, scene, cubeOnly } = props;
+    const value = useProperty(target, propertyKey);
+    const notifyPropertyChanged = usePropertyChangedNotifier();
+    return (jsx(ChooseTexturePropertyLine, { label: label, value: value, onChange: (texture) => {
+            const oldValue = target[propertyKey];
+            target[propertyKey] = texture;
+            notifyPropertyChanged(target, propertyKey, oldValue, texture);
+        }, scene: scene, cubeOnly: cubeOnly }));
+}
+
 /**
  * Displays the lighting and color properties of a PBR material.
  * @param props - The required properties
@@ -6095,6 +6292,16 @@ const PBRMaterialLightingAndColorProperties = (props) => {
     const { material } = props;
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Albedo", target: material, propertyKey: "albedoColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeight", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectivity", target: material, propertyKey: "reflectivityColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Micro-Surface", target: material, propertyKey: "microSurface", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Emissive", target: material, propertyKey: "emissiveColor", isLinearMode: true }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Ambient", target: material, propertyKey: "ambientColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Physical Light Falloff", target: material, propertyKey: "usePhysicalLightFalloff" })] }));
 };
+/**
+ * Displays the texture channel properties of a PBR material.
+ * @param props - The required properties
+ * @returns A JSX element representing the texture channels.
+ */
+const PBRMaterialTextureProperties = (props) => {
+    const { material } = props;
+    const scene = material.getScene();
+    return (jsxs(Fragment, { children: [jsx(BoundTextureProperty, { label: "Albedo", target: material, propertyKey: "albedoTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Metallic Roughness", target: material, propertyKey: "metallicTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, cubeOnly: true }), jsx(BoundTextureProperty, { label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Reflectivity", target: material, propertyKey: "reflectivityTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Micro-surface", target: material, propertyKey: "microSurfaceTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene }), jsx(BoundTextureProperty, { label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene })] }));
+};
 
 // TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
 const UpdateTexture = (file, material, textureSetter) => {
@@ -6370,6 +6577,10 @@ const MaterialPropertiesServiceDefinition = {
             key: "PBR Material Properties",
             predicate: (entity) => entity instanceof PBRMaterial,
             content: [
+                {
+                    section: "Textures",
+                    component: ({ context }) => jsx(PBRMaterialTextureProperties, { material: context }),
+                },
                 {
                     section: "Lighting & Colors",
                     component: ({ context }) => jsx(PBRMaterialLightingAndColorProperties, { material: context }),
@@ -6589,7 +6800,7 @@ function SaveMetadata(entity, metadata) {
         entity.metadata = metadata;
     }
 }
-const useStyles$4 = makeStyles({
+const useStyles$3 = makeStyles({
     mainDiv: {
         display: "flex",
         flexDirection: "column",
@@ -6609,7 +6820,7 @@ const useStyles$4 = makeStyles({
  */
 const MetadataProperties = (props) => {
     const { entity } = props;
-    const classes = useStyles$4();
+    const classes = useStyles$3();
     const { size } = useContext(ToolContext);
     const metadata = useProperty(entity, "metadata");
     const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata) ?? "", [metadata]);
@@ -7841,6 +8052,176 @@ const SpriteManagerCellProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SpinButtonPropertyLine, label: "Cell Width", target: spriteManager, propertyKey: "cellWidth", min: 1, step: 1 }, "CellWidth"), jsx(BoundProperty, { component: SpinButtonPropertyLine, label: "Cell Height", target: spriteManager, propertyKey: "cellHeight", min: 1, step: 1 }, "CellHeight")] }));
 };
 
+const useStyles$2 = makeStyles({
+    root: {
+        display: "flex",
+        flexDirection: "column",
+    },
+    controls: {
+        display: "flex",
+        gap: tokens.spacingHorizontalXS,
+    },
+    controlButton: {
+        minWidth: "auto",
+        flex: "1 1 0", // Equal flex grow/shrink with 0 basis
+        paddingVertical: tokens.spacingVerticalXS,
+        paddingHorizontal: tokens.spacingHorizontalS,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+    preview: {
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        display: "block",
+        objectFit: "contain",
+    },
+    previewContainer: {
+        display: "flex",
+        justifyContent: "center",
+        marginTop: tokens.spacingVerticalXS,
+        marginBottom: tokens.spacingVerticalS,
+        width: "100%",
+    },
+});
+// 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, disableToolbar = false, maxWidth = "100%", maxHeight = "384px", offsetX = 0, offsetY = 0, width, height } = props;
+    const classes = useStyles$2();
+    const canvasRef = useRef(null);
+    const [channels, setChannels] = useState(TextureChannelStates.ALL);
+    const [face, setFace] = useState(0);
+    const [canvasStyle, setCanvasStyle] = useState();
+    const internalTexture = useProperty(texture, "_texture");
+    const { size } = useContext(ToolContext);
+    const updatePreviewAsync = useCallback(async () => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        try {
+            await WhenTextureReadyAsync(texture); // Ensure texture is loaded before grabbing size
+            const { width: textureWidth, height: textureHeight } = texture.getSize();
+            // Set canvas dimensions to the sub-region size
+            canvas.width = width ?? textureWidth;
+            canvas.height = height ?? textureHeight;
+            // Calculate the width that corresponds to maxHeight while maintaining aspect ratio
+            const aspectRatio = canvas.width / canvas.height;
+            // Use CSS min() to pick the smaller of maxWidth or the width that corresponds to maxHeight
+            const imageWidth = `min(${maxWidth}, calc(${maxHeight} * ${aspectRatio}))`;
+            setCanvasStyle({ width: imageWidth });
+            // Get full texture data, then draw only the sub-region
+            const data = await ApplyChannelsToTextureDataAsync(texture, textureWidth, textureHeight, face, channels);
+            const context = canvas.getContext("2d");
+            if (context) {
+                const fullImageData = context.createImageData(textureWidth, textureHeight);
+                fullImageData.data.set(data);
+                // Use putImageData with dirty rect to draw only the sub-region
+                context.putImageData(fullImageData, -offsetX, -offsetY, offsetX, offsetY, canvas.width, canvas.height);
+            }
+        }
+        catch {
+            // If we fail, leave the canvas empty
+        }
+    }, [texture, face, channels, offsetX, offsetY, width, height, internalTexture]);
+    useEffect(() => {
+        void updatePreviewAsync();
+    }, [updatePreviewAsync]);
+    return (jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "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, size: size, "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("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), 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;
+}
+
 function useMaxCellCount(sprite) {
     const manager = sprite.manager;
     const texture = useProperty(manager, "texture");
@@ -7884,7 +8265,15 @@ const SpriteOtherProperties = (props) => {
 const SpriteCellProperties = (props) => {
     const { sprite } = props;
     const maxCellCount = useMaxCellCount(sprite);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Cell Index", target: sprite, propertyKey: "cellIndex", min: 0, step: 1, max: maxCellCount }, "CellIndex"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert U", target: sprite, propertyKey: "invertU" }, "InvertU"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert V", target: sprite, propertyKey: "invertV" }, "InvertV")] }));
+    const manager = sprite.manager;
+    const texture = manager.texture;
+    const size = texture.getSize();
+    const cellWidth = useProperty(manager, "cellWidth");
+    const cellHeight = useProperty(manager, "cellHeight");
+    const cellIndex = useProperty(sprite, "cellIndex");
+    const offsetX = (cellIndex * cellWidth) % size.width;
+    const offsetY = Math.floor((cellIndex * cellWidth) / size.width) * cellHeight;
+    return (jsxs(Fragment, { children: [jsx(TexturePreview, { disableToolbar: true, texture: texture, maxHeight: "160px", offsetX: offsetX, offsetY: offsetY, width: cellWidth, height: cellHeight }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Cell Index", target: sprite, propertyKey: "cellIndex", min: 0, step: 1, max: maxCellCount }, "CellIndex"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert U", target: sprite, propertyKey: "invertU" }, "InvertU"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert V", target: sprite, propertyKey: "invertV" }, "InvertV")] }));
 };
 
 const SpritePropertiesServiceDefinition = {
@@ -8044,213 +8433,9 @@ function FindTextureType(type) {
     return null;
 }
 
-const useStyles$3 = makeStyles({
-    root: {
-        display: "flex",
-        flexDirection: "column",
-    },
-    controls: {
-        display: "flex",
-        gap: tokens.spacingHorizontalXS,
-    },
-    controlButton: {
-        minWidth: "auto",
-        flex: "1 1 0", // Equal flex grow/shrink with 0 basis
-        paddingVertical: tokens.spacingVerticalXS,
-        paddingHorizontal: tokens.spacingHorizontalS,
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    },
-    preview: {
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
-        marginTop: tokens.spacingVerticalXS,
-        maxWidth: "100%",
-        marginLeft: "auto",
-        marginRight: "auto",
-        marginBottom: tokens.spacingVerticalS,
-        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 { size } = useContext(ToolContext);
-    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, size: size, "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, size: size, "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;
-    const updateTexture = useCallback((file) => {
-        ReadFile(file, (data) => {
-            const blob = new Blob([data], { type: "octet/stream" });
-            const reader = new FileReader();
-            reader.readAsDataURL(blob);
-            reader.onloadend = () => {
-                const base64data = reader.result;
-                if (texture instanceof CubeTexture) {
-                    let extension = undefined;
-                    if (file.name.toLowerCase().indexOf(".dds") > 0) {
-                        extension = ".dds";
-                    }
-                    else if (file.name.toLowerCase().indexOf(".env") > 0) {
-                        extension = ".env";
-                    }
-                    texture.updateURL(base64data, extension);
-                }
-                else if (texture instanceof Texture) {
-                    texture.updateURL(base64data);
-                }
-            };
-        }, undefined, true);
-    }, [texture]);
-    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(ButtonLine, { label: "Edit Texture (coming soon!)", onClick: () => { } })] }));
+    return (jsxs(Fragment, { children: [jsx(TexturePreview, { texture: texture }), jsx(TextureUpload, { texture: texture }), jsx(ButtonLine, { label: "Edit Texture (coming soon!)", onClick: () => { } })] }));
 };
 const BaseTextureGeneralProperties = (props) => {
     const { texture } = props;
@@ -10252,36 +10437,6 @@ function DetachDebugLayer() {
     }
 }
 
-const useStyles$2 = makeStyles({
-    root: {
-        // Stack the label above the field with a gap
-        display: "grid",
-        gridTemplateRows: "repeat(1fr)",
-        justifyItems: "start",
-        gap: "2px",
-        maxWidth: "400px",
-    },
-});
-/**
- * Wrapper around a Fluent ComboBox that allows for filtering options
- * @param props
- * @returns
- */
-const ComboBox = (props) => {
-    ComboBox.displayName = "ComboBox";
-    const comboId = useId();
-    const styles = useStyles$2();
-    const [query, setQuery] = useState("");
-    const children = useComboboxFilter(query, props.value, {
-        noOptionsMessage: "No items match your search.",
-    });
-    const onOptionSelect = (_e, data) => {
-        setQuery(data.optionText ?? "");
-        data.optionText && props.onChange(data.optionText);
-    };
-    return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
-};
-
 const useDraggableStyles = makeStyles({
     draggable: {
         display: "flex",
@@ -10353,7 +10508,7 @@ const PositionedPopover = (props) => {
             props.hide();
         }
     };
-    return (jsxs(Popover, { open: open, onOpenChange: handleOpenChange, positioning: {
+    return (jsxs(Popover$1, { open: open, onOpenChange: handleOpenChange, positioning: {
             position: "below", // Places the popover directly below the trigger element
             autoSize: "height-always", //Automatically adjusts the popover height to fit within the viewport
             fallbackPositions: ["above", "after", "before"], //If the primary position doesn't fit, automatically tries these positions in order
@@ -10511,5 +10666,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { MakeTeachingMoment as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useColor4Property as G, useQuaternionProperty as H, Inspector as I, MakePropertyHook as J, useInterceptObservable as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, useEventfulState as O, PropertiesServiceIdentity as P, useObservableCollection as Q, useOrderedObservableCollection as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, usePollingObservable as U, Vector3PropertyLine as V, useResource as W, useAsyncResource as X, useCompactMode as Y, useSidePaneDockOverrides as Z, useAngleConverters as _, SyncedSliderPropertyLine as a, MakeDialogTeachingMoment as a0, InterceptFunction as a1, GetPropertyDescriptor as a2, IsPropertyReadonly as a3, InterceptProperty as a4, ObservableCollection as a5, ConstructorFactory as a6, SelectionServiceIdentity as a7, SelectionServiceDefinition as a8, SettingsContextIdentity as a9, FactorGradientList as aA, Color3GradientList as aB, Color4GradientList as aC, Pane as aD, BooleanBadgePropertyLine as aE, Color3PropertyLine as aF, Color4PropertyLine as aG, HexPropertyLine as aH, NumberInputPropertyLine as aI, LinkPropertyLine as aJ, PropertyLine as aK, LineContainer as aL, PlaceholderPropertyLine as aM, StringifiedPropertyLine as aN, TextAreaPropertyLine as aO, TextPropertyLine as aP, RotationVectorPropertyLine as aQ, QuaternionPropertyLine as aR, Vector2PropertyLine as aS, Vector4PropertyLine as aT, ShowInspector as aa, Checkbox as ab, ColorPickerPopup as ac, InputHexField as ad, InputHsvField as ae, ComboBox as af, DraggableLine as ag, Dropdown as ah, NumberDropdown as ai, StringDropdown as aj, FactorGradientComponent as ak, Color3GradientComponent as al, Color4GradientComponent as am, ColorStepGradientComponent as an, InfoLabel as ao, List as ap, MessageBar as aq, PositionedPopover as ar, SearchBar as as, SearchBox as at, SpinButton as au, Switch as av, SyncedSliderInput as aw, Textarea as ax, TextInput as ay, ToggleButton as az, Button as b, TextInputPropertyLine as c, SpinButtonPropertyLine as d, CheckboxPropertyLine as e, ShellServiceIdentity as f, SceneContextIdentity as g, AccordionSection as h, useExtensionManager as i, MakePopoverTeachingMoment as j, TeachingMoment as k, SidePaneContainer as l, SceneExplorerServiceIdentity as m, SettingsServiceIdentity as n, StatsServiceIdentity as o, ConvertOptions as p, AttachDebugLayer as q, DetachDebugLayer as r, StringDropdownPropertyLine as s, BoundProperty as t, useObservableState as u, LinkToEntityPropertyLine as v, BuiltInsExtensionFeed as w, useProperty as x, useVector3Property as y, useColor3Property as z };
-//# sourceMappingURL=index-BUtV9Nch.js.map
+export { useAngleConverters as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useColor3Property as G, useColor4Property as H, Inspector as I, useQuaternionProperty as J, MakePropertyHook as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, useInterceptObservable as O, Popover as P, useEventfulState as Q, useObservableCollection as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, useOrderedObservableCollection as U, Vector3PropertyLine as V, usePollingObservable as W, useResource as X, useAsyncResource as Y, useCompactMode as Z, useSidePaneDockOverrides as _, SyncedSliderPropertyLine as a, MakeTeachingMoment as a0, MakeDialogTeachingMoment as a1, InterceptFunction as a2, GetPropertyDescriptor as a3, IsPropertyReadonly as a4, InterceptProperty as a5, ObservableCollection as a6, ConstructorFactory as a7, SelectionServiceIdentity as a8, SelectionServiceDefinition as a9, ToggleButton as aA, FactorGradientList as aB, Color3GradientList as aC, Color4GradientList as aD, Pane as aE, BooleanBadgePropertyLine as aF, Color3PropertyLine as aG, Color4PropertyLine as aH, HexPropertyLine as aI, NumberInputPropertyLine as aJ, LinkPropertyLine as aK, PropertyLine as aL, LineContainer as aM, PlaceholderPropertyLine as aN, StringifiedPropertyLine as aO, TextAreaPropertyLine as aP, TextPropertyLine as aQ, RotationVectorPropertyLine as aR, QuaternionPropertyLine as aS, Vector2PropertyLine as aT, Vector4PropertyLine as aU, SettingsContextIdentity as aa, ShowInspector as ab, Checkbox as ac, ColorPickerPopup as ad, InputHexField as ae, InputHsvField as af, ComboBox as ag, DraggableLine as ah, Dropdown as ai, NumberDropdown as aj, StringDropdown as ak, FactorGradientComponent as al, Color3GradientComponent as am, Color4GradientComponent as an, ColorStepGradientComponent as ao, InfoLabel as ap, List as aq, MessageBar as ar, PositionedPopover as as, SearchBar as at, SearchBox as au, SpinButton as av, Switch as aw, SyncedSliderInput as ax, Textarea as ay, TextInput as az, Button as b, TextInputPropertyLine as c, SpinButtonPropertyLine as d, CheckboxPropertyLine as e, ShellServiceIdentity as f, SceneContextIdentity as g, AccordionSection as h, useExtensionManager as i, MakePopoverTeachingMoment as j, TeachingMoment as k, SidePaneContainer as l, PropertiesServiceIdentity as m, SceneExplorerServiceIdentity as n, SettingsServiceIdentity as o, StatsServiceIdentity as p, ConvertOptions as q, AttachDebugLayer as r, DetachDebugLayer as s, StringDropdownPropertyLine as t, useObservableState as u, BoundProperty as v, LinkToEntityPropertyLine as w, BuiltInsExtensionFeed as x, useProperty as y, useVector3Property as z };
+//# sourceMappingURL=index-BgzFAhky.js.map