@babylonjs/inspector 8.42.0-preview → 8.43.0-preview

package/lib/{index-BgzFAhky.js → index-2Bq-qBwV.js}

@@ -3,13 +3,14 @@ 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 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 { 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, createLightTheme, createDarkTheme, FluentProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Tooltip, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, 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, Label, ToolbarDivider, 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, EyeRegular, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ChevronDownRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, 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';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
 import { Deferred } from '@babylonjs/core/Misc/deferred.js';
+import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
 import { VirtualizerScrollView } from '@fluentui-contrib/react-virtualizer';
 import { FontAsset } from '@babylonjs/addons/msdfText/fontAsset.js';
@@ -32,7 +33,6 @@ import { PerfCollectionStrategy } from '@babylonjs/core/Misc/PerformanceViewer/p
 import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerSceneExtension.js';
 import { PressureObserverWrapper } from '@babylonjs/core/Misc/pressureObserverWrapper.js';
 import { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine.js';
-import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { createRoot } from 'react-dom/client';
 import { FrameGraphUtils } from '@babylonjs/core/FrameGraph/frameGraphUtils.js';
 import { CameraGizmo } from '@babylonjs/core/Gizmos/cameraGizmo.js';
@@ -94,17 +94,21 @@ import { ImageProcessingConfiguration } from '@babylonjs/core/Materials/imagePro
 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 { GetTextureDataAsync, WhenTextureReadyAsync } 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 { KeyboardEventTypes } from '@babylonjs/core/Events/keyboardEvents.js';
+import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
+import { HtmlElementTexture } from '@babylonjs/core/Materials/Textures/htmlElementTexture.js';
+import { ShaderMaterial } from '@babylonjs/core/Materials/shaderMaterial.js';
+import { CreatePlane } from '@babylonjs/core/Meshes/Builders/planeBuilder.js';
 import { ClusteredLightContainer } from '@babylonjs/core/Lights/Clustered/clusteredLightContainer.js';
 import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
 import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
 import '@babylonjs/core/Sprites/spriteSceneComponent.js';
 import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture.js';
-import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
 import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
 import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 import { DebugLayer } from '@babylonjs/core/Debug/debugLayer.js';
@@ -598,7 +602,10 @@ function CreateGenericForwardRef(render) {
  *
  * NOTE: BoundProperty has strict nullable enforcement!
  *
- * If Target[PropertyKey] is Nullable, caller can only bind to a component that explicitly handles nullable (and caller must send nullable/defaultValue props)
+ * If Target[PropertyKey] is Nullable, caller has three options:
+ * 1. `nullable: true` + `defaultValue: NonNullable<T>` - Shows enable/disable checkbox UI
+ * 2. `ignoreNullable: true` + `defaultValue: NonNullable<T>` - Shows disabled state when null
+ * 3. `defaultValue: null` - Skips nullable handling entirely, passes value through as-is
  *
  * @param props BoundPropertyProps with strict nullable validation
  * @returns JSX element
@@ -885,7 +892,7 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$j = makeStyles({
+const useStyles$r = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
@@ -929,13 +936,13 @@ const useStyles$j = makeStyles({
 });
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$j();
+    const classes = useStyles$r();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
 const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
-    const classes = useStyles$j();
+    const classes = useStyles$r();
     const { size } = useContext(ToolContext);
     const { children, highlightSections, ...rest } = props;
     const validChildren = useMemo(() => {
@@ -1067,7 +1074,7 @@ function AsReadonlyArray(array) {
     return array;
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$i = makeStyles({
+const useStyles$q = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1076,7 +1083,7 @@ const useStyles$i = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$i();
+    const classes = useStyles$q();
     const { children, sections, sectionContent, context, sectionsRef } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -1181,7 +1188,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$h = makeStyles({
+const useStyles$p = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -1194,12 +1201,73 @@ const useStyles$h = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$h();
+    const classes = useStyles$p();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
+const ThemeModeStorageKey = `Babylon/Settings/ThemeMode`;
+/**
+ * Custom hook to manage the theme mode (system/dark/light).
+ * @returns An object containing the theme mode state and helper functions.
+ */
+function useThemeMode() {
+    const { isDarkMode, ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode({
+        localStorageKey: ThemeModeStorageKey,
+    });
+    // Make sure there is a stored value initially, even before changing the theme.
+    // This way, other usages of this hook will get the correct initial value.
+    if (!localStorage.getItem(ThemeModeStorageKey)) {
+        SetThemeMode(ternaryDarkMode);
+    }
+    return { isDarkMode, themeMode: ternaryDarkMode, setThemeMode: setTernaryDarkMode };
+}
+/**
+ * Sets the theme mode.
+ * @param mode The desired theme mode (system/dark/light).
+ */
+function SetThemeMode(mode) {
+    localStorage.setItem(ThemeModeStorageKey, JSON.stringify(mode));
+}
+
+/* eslint-disable @typescript-eslint/naming-convention */
+// Generated from https://react.fluentui.dev/?path=/docs/theme-theme-designer--docs
+// Key color: #3A94FC
+const babylonRamp = {
+    10: "#020305",
+    20: "#121721",
+    30: "#1A263A",
+    40: "#1F314F",
+    50: "#243E64",
+    60: "#294B7B",
+    70: "#2D5892",
+    80: "#3166AA",
+    90: "#3473C3",
+    100: "#3782DC",
+    110: "#3990F6",
+    120: "#5A9EFD",
+    130: "#7BACFE",
+    140: "#96BAFF",
+    150: "#AFC9FF",
+    160: "#C6D8FF",
+};
+const LightTheme = {
+    ...createLightTheme(babylonRamp),
+};
+const DarkTheme = {
+    ...createDarkTheme(babylonRamp),
+};
+
+const Theme = (props) => {
+    // NOTE: We do not want to applyStylesToPortals by default. If makes classes flow into portals
+    // (like popovers), and if those styles do things like disable overflow, they can completely
+    // break any UI within the portal. Therefore, default to false.
+    const { invert = false, applyStylesToPortals = false, ...rest } = props;
+    const { isDarkMode } = useThemeMode();
+    return (jsx(FluentProvider, { theme: isDarkMode !== invert ? DarkTheme : LightTheme, applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
+};
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$g = makeStyles({
+const useStyles$o = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -1210,7 +1278,7 @@ const useStyles$g = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$g();
+    const classes = useStyles$o();
     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,75 +1534,187 @@ function ConstructorFactory(constructor) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$f = makeStyles({
+const useStyles$n = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$f();
+    const classes = useStyles$n();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
 
 const SettingsContextIdentity = Symbol("SettingsContext");
 
-const ThemeModeStorageKey = `Babylon/Settings/ThemeMode`;
-/**
- * Custom hook to manage the theme mode (system/dark/light).
- * @returns An object containing the theme mode state and helper functions.
- */
-function useThemeMode() {
-    const { isDarkMode, ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode({
-        localStorageKey: ThemeModeStorageKey,
-    });
-    // Make sure there is a stored value initially, even before changing the theme.
-    // This way, other usages of this hook will get the correct initial value.
-    if (!localStorage.getItem(ThemeModeStorageKey)) {
-        SetThemeMode(ternaryDarkMode);
+function ToFeaturesString(options) {
+    const { defaultWidth, defaultHeight, defaultLeft, defaultTop } = options;
+    const features = [];
+    if (defaultWidth !== undefined) {
+        features.push({ key: "width", value: defaultWidth.toString() });
     }
-    return { isDarkMode, themeMode: ternaryDarkMode, setThemeMode: setTernaryDarkMode };
+    if (defaultHeight !== undefined) {
+        features.push({ key: "height", value: defaultHeight.toString() });
+    }
+    if (defaultLeft !== undefined) {
+        features.push({ key: "left", value: defaultLeft.toString() });
+    }
+    if (defaultTop !== undefined) {
+        features.push({ key: "top", value: defaultTop.toString() });
+    }
+    features.push({ key: "location", value: "no" });
+    return features.map((feature) => `${feature.key}=${feature.value}`).join(",");
 }
+const useStyles$m = makeStyles({
+    container: {
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "column",
+        overflow: "hidden",
+    },
+});
 /**
- * Sets the theme mode.
- * @param mode The desired theme mode (system/dark/light).
+ * Allows displaying a child window that can contain child components.
+ * @param props Props for the child window.
+ * @returns The child window component.
  */
-function SetThemeMode(mode) {
-    localStorage.setItem(ThemeModeStorageKey, JSON.stringify(mode));
-}
-
-/* eslint-disable @typescript-eslint/naming-convention */
-// Generated from https://react.fluentui.dev/?path=/docs/theme-theme-designer--docs
-// Key color: #3A94FC
-const babylonRamp = {
-    10: "#020305",
-    20: "#121721",
-    30: "#1A263A",
-    40: "#1F314F",
-    50: "#243E64",
-    60: "#294B7B",
-    70: "#2D5892",
-    80: "#3166AA",
-    90: "#3473C3",
-    100: "#3782DC",
-    110: "#3990F6",
-    120: "#5A9EFD",
-    130: "#7BACFE",
-    140: "#96BAFF",
-    150: "#AFC9FF",
-    160: "#C6D8FF",
-};
-const LightTheme = {
-    ...createLightTheme(babylonRamp),
-};
-const DarkTheme = {
-    ...createDarkTheme(babylonRamp),
-};
-
-const Theme = (props) => {
-    const { invert = false, ...rest } = props;
-    const { isDarkMode } = useThemeMode();
-    return (jsx(FluentProvider, { theme: isDarkMode !== invert ? DarkTheme : LightTheme, ...rest, children: props.children }));
+const ChildWindow = (props) => {
+    const { id, children, onOpenChange, imperativeRef: imperativeRef } = props;
+    const classes = useStyles$m();
+    const [windowState, setWindowState] = useState();
+    const [childWindow, setChildWindow] = useState();
+    const storageKey = id ? `Babylon/Settings/ChildWindow/${id}/Bounds` : null;
+    // This function is just for creating the child window itself. It is a function because
+    // it must be called synchronously in response to a user interaction (e.g. button click),
+    // otherwise the browser will block it as a scripted popup.
+    const createWindow = useCallback((options = {}) => {
+        if (storageKey) {
+            // If we are persisting window bounds, but the window is already open, just use the existing bounds.
+            // Otherwise, try to load bounds from storage.
+            if (childWindow) {
+                options.defaultLeft = childWindow.screenX;
+                options.defaultTop = childWindow.screenY;
+                options.defaultWidth = childWindow.innerWidth;
+                options.defaultHeight = childWindow.innerHeight;
+            }
+            else {
+                const savedBounds = localStorage.getItem(storageKey);
+                if (savedBounds) {
+                    try {
+                        const bounds = JSON.parse(savedBounds);
+                        options.defaultLeft = bounds.left;
+                        options.defaultTop = bounds.top;
+                        options.defaultWidth = bounds.width;
+                        options.defaultHeight = bounds.height;
+                    }
+                    catch {
+                        Logger.Warn(`Could not parse saved bounds for child window with key ${storageKey}`);
+                    }
+                }
+            }
+        }
+        // Half width by default.
+        if (!options.defaultWidth) {
+            options.defaultWidth = window.innerWidth * (2 / 3);
+        }
+        // Half height by default.
+        if (!options.defaultHeight) {
+            options.defaultHeight = window.innerHeight * (2 / 3);
+        }
+        // Horizontally centered by default.
+        if (!options.defaultLeft) {
+            options.defaultLeft = window.screenX + (window.innerWidth - options.defaultWidth) * (2 / 3);
+        }
+        // Vertically centered by default.
+        if (!options.defaultTop) {
+            options.defaultTop = window.screenY + (window.innerHeight - options.defaultHeight) * (2 / 3);
+        }
+        // Try to create the child window (can be null if popups are blocked).
+        const newChildWindow = window.open("", "", ToFeaturesString(options));
+        if (newChildWindow) {
+            // Set the title if provided.
+            newChildWindow.document.title = options.title ?? id ?? "";
+            // Set the child window state.
+            setChildWindow((current) => {
+                // But first close any existing child window.
+                current?.close();
+                return newChildWindow;
+            });
+        }
+    }, [childWindow, storageKey]);
+    useImperativeHandle(imperativeRef, () => {
+        return {
+            open: createWindow,
+            close: () => setChildWindow(undefined),
+        };
+    }, [createWindow]);
+    // This side effect runs any time the child window instance changes. It does the rest of the child window
+    // setup work, including creating resources and state needed to properly render the content of the child window.
+    useEffect(() => {
+        const disposeActions = [];
+        if (childWindow) {
+            const body = childWindow.document.body;
+            body.style.width = "100%";
+            body.style.height = "100%";
+            body.style.margin = "0";
+            body.style.padding = "0";
+            body.style.display = "flex";
+            body.style.overflow = "hidden";
+            const applyWindowState = () => {
+                // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
+                setWindowState({ mountNode: body, renderer: createDOMRenderer(childWindow.document) });
+                onOpenChange?.(true);
+            };
+            // Once the child window document is ready, setup the window state which will trigger another effect that renders into the child window.
+            if (childWindow.document.readyState === "complete") {
+                applyWindowState();
+            }
+            else {
+                const onChildWindowLoad = () => {
+                    applyWindowState();
+                };
+                childWindow.addEventListener("load", onChildWindowLoad, { once: true });
+                disposeActions.push(() => childWindow.removeEventListener("load", onChildWindowLoad));
+            }
+            // When the child window is closed for any reason, transition back to a closed state.
+            const onChildWindowUnload = () => {
+                setWindowState(undefined);
+                setChildWindow(undefined);
+                onOpenChange?.(false);
+            };
+            childWindow.addEventListener("unload", onChildWindowUnload, { once: true });
+            disposeActions.push(() => childWindow.removeEventListener("unload", onChildWindowUnload));
+            // If the main window closes, close any open child windows as well (don't leave them orphaned).
+            const onParentWindowUnload = () => {
+                childWindow.close();
+            };
+            window.addEventListener("unload", onParentWindowUnload, { once: true });
+            disposeActions.push(() => window.removeEventListener("unload", onParentWindowUnload));
+            // On dispose, close the child window.
+            disposeActions.push(() => childWindow.close());
+            // On dispose, save the window bounds.
+            disposeActions.push(() => {
+                if (storageKey) {
+                    localStorage.setItem(storageKey, JSON.stringify({
+                        left: childWindow.screenX,
+                        top: childWindow.screenY,
+                        width: childWindow.innerWidth,
+                        height: childWindow.innerHeight,
+                    }));
+                }
+            });
+        }
+        return () => {
+            disposeActions.reverse().forEach((dispose) => dispose());
+        };
+    }, [childWindow]);
+    if (!windowState) {
+        return null;
+    }
+    const { mountNode, renderer } = windowState;
+    return (
+    // Portal targets the body of the child window.
+    jsx(Portal, { mountNode: mountNode, children: jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: jsx(FluentProvider, { className: classes.container, applyStylesToPortals: false, targetDocument: mountNode.ownerDocument, children: children }) }) }));
 };
 
 // NOTE: This is basically a super simplified version of https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-resize-handle/src/hooks
@@ -1613,7 +1793,7 @@ function useResizeHandle(params) {
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$e = makeStyles({
+const useStyles$l = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -1801,12 +1981,12 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$e();
+    const classes = useStyles$l();
     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$e();
+    const classes = useStyles$l();
     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 +1994,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$e();
+    const classes = useStyles$l();
     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 +2004,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$e();
+    const classes = useStyles$l();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     const tabClass = mergeClasses(classes.tab, isSelected ? undefined : classes.unselectedTab);
@@ -1837,11 +2017,13 @@ 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$e();
+    const classes = useStyles$l();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
-    const [undocked, setUndocked] = useState(false);
+    const childWindow = useRef(null);
+    const [isChildWindowOpen, setIsChildWindowOpen] = useState(false);
+    const paneContainerRef = useRef(null);
     const onExpandCollapseClick = useCallback(() => {
         setCollapsed((collapsed) => !collapsed);
     }, []);
@@ -1898,6 +2080,34 @@ function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSele
         });
         return () => observer.remove();
     }, [topPanes, bottomPanes, onSelectSidePane]);
+    const setUndocked = useCallback((undocked) => {
+        if (!undocked) {
+            childWindow.current?.close();
+        }
+        else {
+            const paneContainer = paneContainerRef.current;
+            if (!paneContainer) {
+                // It shouldn't be possible to get here and have this ref be null, but just in case,
+                // bail out of the undock operation.
+                childWindow.current?.close();
+            }
+            else {
+                // This is the extra buffer needed on top of minWidth to account for window chrome to avoid a horizontal scrollbar.
+                const widthBuffer = 4;
+                // This offsets the window's top position to account for window chrome/title bar.
+                const topOffset = 100;
+                // Create the child window with approximately the same location and size as the side pane.
+                const bounds = paneContainer.getBoundingClientRect();
+                childWindow.current?.open({
+                    defaultWidth: Math.max(bounds.width, minWidth + widthBuffer),
+                    defaultHeight: bounds.height - topOffset,
+                    defaultTop: bounds.top + window.screenY + topOffset,
+                    defaultLeft: bounds.left + window.screenX,
+                    title: location === "left" ? "Left" : "Right",
+                });
+            }
+        }
+    }, [childWindow, location]);
     const expandCollapseButton = useMemo(() => {
         const expandCollapseIcon = location === "left" ? collapsed ? jsx(PanelLeftExpandRegular, {}) : jsx(PanelLeftContractRegular, {}) : collapsed ? jsx(PanelRightExpandRegular, {}) : jsx(PanelRightContractRegular, {});
         return (jsxs(Menu, { positioning: "below-end", children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", relationship: "label", children: jsx(SplitButton, { className: classes.paneCollapseButton, menuButton: triggerProps, primaryActionButton: { onClick: onExpandCollapseClick }, size: "small", appearance: "transparent", icon: expandCollapseIcon }) })) }), jsx(MenuPopover, { className: classes.collapseMenuPopover, children: jsx(MenuList, { children: jsx(MenuItem, { icon: jsx(PictureInPictureEnterRegular, {}), onClick: () => setUndocked(true), children: "Undock" }) }) })] }));
@@ -1910,8 +2120,8 @@ function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSele
                             }, children: paneComponents.map((entry) => {
                                 const isSelected = selectedTab?.key === entry.key;
                                 return (jsx(SidePaneTab, { location: location, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment, isSelected: isSelected && !collapsed, dockOptions: dockOptions }, entry.key));
-                            }) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [paneComponents.length > 1 && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true, style: { minHeight: 0 } }), " "] })), jsx(Collapse, { visible: !undocked, orientation: "horizontal", children: expandCollapseButton })] }))] })) }));
-    }, [location, collapsed, undocked, expandCollapseButton]);
+                            }) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [paneComponents.length > 1 && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true, style: { minHeight: 0 } }), " "] })), jsx(Collapse, { visible: !isChildWindowOpen, orientation: "horizontal", children: expandCollapseButton })] }))] })) }));
+    }, [location, collapsed, isChildWindowOpen, expandCollapseButton]);
     // This memos the TabList to make it easy for the JSX to be inserted at the top of the pane (in "compact" mode) or returned to the caller to be used in the toolbar (in "full" mode).
     const topPaneTabList = useMemo(() => createPaneTabList(topPanes, toolbarMode, topSelectedTab, setTopSelectedTab, validTopDockOptions), [createPaneTabList, topPanes, toolbarMode, topSelectedTab]);
     const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPanes, "compact", bottomSelectedTab, setBottomSelectedTab, validBottomDockOptions), [createPaneTabList, bottomPanes, bottomSelectedTab]);
@@ -1947,82 +2157,15 @@ function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSele
             setPaneHeightAdjust(Number.parseInt(storedPaneHeightAdjust));
         }
     }, []);
-    const paneContainerRef = useRef(null);
-    const [windowState, setWindowState] = useState();
-    useEffect(() => {
-        const disposeActions = [];
-        if (undocked) {
-            const paneContainer = paneContainerRef.current;
-            if (!paneContainer) {
-                // It shouldn't be possible to get here and have this ref be null, but just in case,
-                // bail out of the undock operation.
-                setUndocked(false);
-            }
-            else {
-                // This is the extra buffer needed on top of minWidth to account for window chrome to avoid a horizontal scrollbar.
-                const widthBuffer = 4;
-                // This offsets the window's top position to account for window chrome/title bar.
-                const topOffset = 100;
-                // Create the child window with approximately the same location and size as the side pane.
-                const bounds = paneContainer.getBoundingClientRect();
-                const top = bounds.top + window.screenY + topOffset;
-                const left = bounds.left + window.screenX;
-                const width = Math.max(bounds.width, minWidth + widthBuffer);
-                const height = bounds.height - topOffset;
-                const childWindow = window.open("", "", `width=${width},height=${height},left=${left},top=${top},location=no`);
-                if (childWindow) {
-                    const body = childWindow.document.body;
-                    body.style.width = "100%";
-                    body.style.height = "100%";
-                    body.style.margin = "0";
-                    body.style.padding = "0";
-                    body.style.display = "flex";
-                    body.style.overflowY = "hidden";
-                    body.style.overflowX = "auto";
-                    childWindow.document.title = location === "left" ? "Left" : "Right";
-                    const applyWindowState = () => {
-                        // Setup the window state, including creating a Fluent/Griffel "renderer" for managing runtime styles/classes in the child window.
-                        setWindowState({ window: childWindow, mountNode: body, renderer: createDOMRenderer(childWindow.document) });
-                    };
-                    // Once the child window document is ready, setup the window state which will trigger another effect that renders into the child window.
-                    if (childWindow.document.readyState === "complete") {
-                        applyWindowState();
-                    }
-                    else {
-                        const onChildWindowLoad = () => {
-                            applyWindowState();
-                        };
-                        childWindow.addEventListener("load", onChildWindowLoad, { once: true });
-                        disposeActions.push(() => childWindow.removeEventListener("load", onChildWindowLoad));
-                    }
-                    // When the child window is closed for any reason, transition back to a docked state.
-                    childWindow.addEventListener("unload", () => {
-                        setWindowState(undefined);
-                        setUndocked(false);
-                    }, { once: true });
-                    // If the main window closes, close any undocked child windows as well (don't leave them orphaned).
-                    const onParentWindowUnload = () => childWindow.close();
-                    window.addEventListener("unload", onParentWindowUnload);
-                    disposeActions.push(() => window.removeEventListener("unload", onParentWindowUnload));
-                }
-                else {
-                    // If creating a child window failed (e.g. popup blocked), then just revert to docked mode.
-                    setUndocked(false);
-                }
-                disposeActions.push(() => childWindow?.close());
-            }
-        }
-        return () => disposeActions.reverse().forEach((dispose) => dispose());
-    }, [undocked]);
     // This effect closes the window if all panes have been removed.
     useEffect(() => {
-        if (windowState && topPanes.length === 0 && bottomPanes.length === 0) {
-            windowState.window.close();
+        if (isChildWindowOpen && topPanes.length === 0 && bottomPanes.length === 0) {
+            childWindow.current?.close();
         }
-    }, [windowState, topPanes, bottomPanes]);
+    }, [childWindow, isChildWindowOpen, topPanes, bottomPanes]);
     // This memoizes the pane itself, which may or may not include the tab list, depending on the toolbar mode.
     const corePane = useMemo(() => {
-        return (jsxs(Fragment, { children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [!undocked && location === "left" && expandCollapseButton, topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), !undocked && location === "right" && expandCollapseButton] }) })), topPanes.length > 0 && (jsx("div", { className: classes.paneContent, children: topSelectedTab && (jsxs(Fragment, { children: [jsx(PaneHeader, { id: topSelectedTab.key, title: topSelectedTab.title, dockOptions: validTopDockOptions }), topPanes.map((pane) => (jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== topSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(pane.content, {}) }, pane.key)))] })) })), topPanes.length > 0 && bottomPanes.length > 0 && jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.paneDivider }), bottomPanes.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (jsx("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px, calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: bottomSelectedTab && (jsxs(Fragment, { children: [jsx(PaneHeader, { id: bottomSelectedTab.key, title: bottomSelectedTab.title, dockOptions: validBottomDockOptions }), bottomPanes.map((pane) => (jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== bottomSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(pane.content, {}) }, pane.key)))] })) })), toolbarMode === "compact" && bottomBarItems.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }));
+        return (jsxs(Fragment, { children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (jsx(Fragment, { children: jsxs("div", { className: classes.barDiv, children: [!isChildWindowOpen && location === "left" && expandCollapseButton, topPaneTabList, jsx(Toolbar, { location: "top", components: topBarItems }), !isChildWindowOpen && location === "right" && expandCollapseButton] }) })), topPanes.length > 0 && (jsx("div", { className: classes.paneContent, children: topSelectedTab && (jsxs(Fragment, { children: [jsx(PaneHeader, { id: topSelectedTab.key, title: topSelectedTab.title, dockOptions: validTopDockOptions }), topPanes.map((pane) => (jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== topSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(pane.content, {}) }, pane.key)))] })) })), topPanes.length > 0 && bottomPanes.length > 0 && jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.paneDivider }), bottomPanes.length > 1 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (jsx("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px, calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: bottomSelectedTab && (jsxs(Fragment, { children: [jsx(PaneHeader, { id: bottomSelectedTab.key, title: bottomSelectedTab.title, dockOptions: validBottomDockOptions }), bottomPanes.map((pane) => (jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== bottomSelectedTab.key ? classes.unselectedPane : undefined), children: jsx(pane.content, {}) }, pane.key)))] })) })), toolbarMode === "compact" && bottomBarItems.length > 0 && (jsx(Fragment, { children: jsx("div", { className: classes.barDiv, children: jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }));
     }, [
         topPanes,
         topSelectedTab,
@@ -2034,25 +2177,15 @@ function usePane(location, layoutMode, defaultWidth, minWidth, sidePanes, onSele
         bottomBarItems,
         topPaneTabList,
         bottomPaneTabList,
-        undocked,
+        isChildWindowOpen,
     ]);
     // This deals with docked vs undocked state, where undocked is rendered into a separate window via a portal.
     const pane = useMemo(() => {
-        if (!windowState) {
-            // If there is no window state, then we are docked, so render the resizable div and the collapse container.
-            return (jsx("div", { ref: paneContainerRef, className: mergeClasses(classes.paneContainer, layoutMode === "inline"
-                    ? undefined
-                    : mergeClasses(classes.paneContainerOverlay, location === "left" ? classes.paneContainerOverlayLeft : classes.paneContainerOverlayRight)), children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) }));
-        }
-        else {
-            // Otherwise we are undocked, so render into the portal that targets the body of the child window.
-            const { mountNode, renderer } = windowState;
-            return (
-            // Portal targets the body of the child window.
-            jsx(Portal, { mountNode: mountNode, children: jsx(RendererProvider, { renderer: renderer, targetDocument: mountNode.ownerDocument, children: jsx(Theme, { className: classes.paneContent, style: { minWidth }, targetDocument: mountNode.ownerDocument, children: corePane }) }) }));
-        }
-    }, [collapsed, corePane, windowState]);
-    return [topPaneTabList, pane, collapsed, setCollapsed, undocked, setUndocked];
+        return (jsxs(Fragment, { children: [!isChildWindowOpen && (jsx("div", { ref: paneContainerRef, className: mergeClasses(classes.paneContainer, layoutMode === "inline"
+                        ? undefined
+                        : mergeClasses(classes.paneContainerOverlay, location === "left" ? classes.paneContainerOverlayLeft : classes.paneContainerOverlayRight)), children: (topPanes.length > 0 || bottomPanes.length > 0) && (jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) })), jsx(ChildWindow, { imperativeRef: childWindow, onOpenChange: (isOpen) => setIsChildWindowOpen(isOpen), children: corePane })] }));
+    }, [collapsed, corePane]);
+    return [topPaneTabList, pane, collapsed, setCollapsed, isChildWindowOpen, setUndocked];
 }
 function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, toolbarMode = "full", sidePaneRemapper = undefined, layoutMode = "inline", } = {}) {
     return {
@@ -2077,7 +2210,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 undock: () => onDockChanged.notifyObservers({ location: "right", dock: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$e();
+                const classes = useStyles$l();
                 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 +2646,7 @@ function useCommandContextMenuState(commands) {
     return [checkedContextMenuItems, onContextMenuCheckedValueChange, contextMenuItems];
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$d = makeStyles({
+const useStyles$k = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2581,14 +2714,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$d();
+    const classes = useStyles$k();
     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$d();
+    const classes = useStyles$k();
     const [compactMode] = useCompactMode();
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -2605,7 +2738,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
-    const classes = useStyles$d();
+    const classes = useStyles$k();
     const [compactMode] = useCompactMode();
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -2698,7 +2831,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$d();
+    const classes = useStyles$k();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -3493,14 +3626,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value }) }));
 };
 
-const useStyles$c = makeStyles({
+const useStyles$j = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$c();
+    const classes = useStyles$j();
     const scene = props.context;
     const engine = scene.getEngine();
     const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
@@ -3678,7 +3811,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-LaUVRgd_.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-D1VDR7BX.js'),
     },
     {
         name: "Capture Tools",
@@ -3686,7 +3819,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./captureService-CbpbBn5F.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-B8vCTKYD.js'),
     },
     {
         name: "Import Tools",
@@ -3694,7 +3827,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["import", "tools"],
         ...BabylonWebResources,
         author: { name: "Alex Chuber", forumUserName: "alexchuber" },
-        getExtensionModuleAsync: async () => await import('./importService-B98QFvNM.js'),
+        getExtensionModuleAsync: async () => await import('./importService-BPzwIgjH.js'),
     },
     {
         name: "Quick Creation Tools (Preview)",
@@ -3702,7 +3835,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-Bg2plbI-.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DEdXDqIl.js'),
     },
 ]);
 
@@ -3920,7 +4053,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$b = makeStyles({
+const useStyles$i = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -3932,16 +4065,16 @@ const useStyles$b = makeStyles({
         minWidth: "300px",
     },
 });
-const Popover = (props) => {
+const Popover = forwardRef((props, ref) => {
     const { children } = props;
     const [popoverOpen, setPopoverOpen] = useState(false);
-    const classes = useStyles$b();
+    const classes = useStyles$i();
     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 }) })] }));
-};
+        }, trapFocus: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: props.trigger ?? jsx(Button, { ref: ref, icon: props.icon, onClick: () => setPopoverOpen(true) }) }), jsx(PopoverSurface, { className: classes.surface, children: jsx("div", { className: classes.content, children: children }) })] }));
+});
 
 const useColorPickerStyles = makeStyles({
     container: {
@@ -3990,28 +4123,29 @@ const useColorPickerStyles = makeStyles({
         gap: tokens.spacingVerticalSNudge, // 6px
     },
 });
-const ColorPickerPopup = (props) => {
+const ColorPickerPopup = forwardRef((props, ref) => {
     ColorPickerPopup.displayName = "ColorPickerPopup";
+    const { value, onChange, isLinearMode, ...rest } = props;
     const classes = useColorPickerStyles();
-    const [color, setColor] = useState(props.value);
-    const [isLinear, setIsLinear] = useState(props.isLinearMode ?? false);
+    const [color, setColor] = useState(value);
+    const [isLinear, setIsLinear] = useState(isLinearMode ?? false);
     const [isFloat, setFloat] = useState(false);
     const { size } = useContext(ToolContext);
     useEffect(() => {
-        setColor(props.value); // Ensures the trigger color updates when props.value changes
-    }, [props.value]);
+        setColor(value); // Ensures the trigger color updates when props.value changes
+    }, [value]);
     const handleColorPickerChange = (_, data) => {
         let color = Color3.FromHSV(data.color.h, data.color.s, data.color.v);
-        if (props.value instanceof Color4) {
+        if (value instanceof Color4) {
             color = Color4.FromColor3(color, data.color.a ?? 1);
         }
         handleChange(color);
     };
     const handleChange = (newColor) => {
         setColor(newColor);
-        props.onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
+        onChange(newColor); // Ensures the parent is notified when color changes from within colorPicker
     };
-    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: {
+    return (jsx(Popover, { trigger: jsx(ColorSwatch, { ref: ref, ...rest, 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: [
@@ -4024,7 +4158,7 @@ const ColorPickerPopup = (props) => {
                                 { 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
  * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
@@ -4143,7 +4277,7 @@ const ColorPropertyLine = forwardRef((props, ref) => {
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
-const useStyles$a = makeStyles({
+const useStyles$h = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -4155,7 +4289,7 @@ const useStyles$a = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$a();
+    const classes = useStyles$h();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -4729,7 +4863,7 @@ class ServiceContainer {
     }
 }
 
-const useStyles$9 = makeStyles({
+const useStyles$g = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -4748,7 +4882,7 @@ const ThemeSelectorServiceDefinition = {
             suppressTeachingMoment: true,
             order: -300,
             component: () => {
-                const classes = useStyles$9();
+                const classes = useStyles$g();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -4766,7 +4900,7 @@ const ThemeSelectorServiceDefinition = {
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$8 = makeStyles({
+const useStyles$f = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -4802,7 +4936,7 @@ function MakeModularTool(options) {
         SetThemeMode(themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$8();
+        const classes = useStyles$f();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -4828,7 +4962,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-CwnEf0dV.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DS-uWdsz.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -5010,7 +5144,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$7 = makeStyles({
+const useStyles$e = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -5020,7 +5154,7 @@ const useStyles$7 = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { scene, entity, gizmoService } = props;
-    const classes = useStyles$7();
+    const classes = useStyles$e();
     const gizmoManager = useResource(useCallback(() => {
         const utilityLayerRef = gizmoService.getUtilityLayer(scene);
         const keepDepthUtilityLayerRef = gizmoService.getUtilityLayer(scene, "keepDepth");
@@ -5135,7 +5269,7 @@ const GizmoToolbarServiceDefinition = {
     },
 };
 
-const useStyles$6 = makeStyles({
+const useStyles$d = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -5151,7 +5285,7 @@ const MiniStatsServiceDefinition = {
             horizontalLocation: "right",
             suppressTeachingMoment: true,
             component: () => {
-                const classes = useStyles$6();
+                const classes = useStyles$d();
                 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);
@@ -6121,6 +6255,95 @@ 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" })] })] }));
 };
 
+const useStyles$c = makeStyles({
+    root: {
+        display: "grid",
+        gridTemplateRows: "repeat(1fr)",
+        justifyItems: "start",
+        gap: "2px",
+        maxWidth: "400px",
+    },
+    comboBox: {
+        width: CustomTokens.inputWidth,
+        minWidth: CustomTokens.inputWidth,
+        boxSizing: "border-box",
+    },
+    input: {
+        minWidth: 0,
+    },
+});
+/**
+ * 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$c();
+    const { size } = useContext(ToolContext);
+    // Find the label for the current value
+    const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
+    const [query, setQuery] = useState(getLabel(props.value ?? ""));
+    useEffect(() => {
+        setQuery(getLabel(props.value ?? ""));
+    }, [props.value, props.options]);
+    // Convert to Fluent's { children, value } format
+    const normalizedOptions = props.options.map((opt) => ({ children: opt.label, value: opt.value }));
+    const children = useComboboxFilter(query, normalizedOptions, {
+        noOptionsMessage: "No items match your search.",
+        optionToReactKey: (option) => option.value,
+        optionToText: (option) => option.children,
+        renderOption: (option) => (jsx(Option, { value: option.value, text: option.children, children: option.children }, option.value)),
+    });
+    const onOptionSelect = (_e, data) => {
+        setQuery(data.optionText ?? "");
+        data.optionValue && props.onChange(data.optionValue);
+    };
+    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, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
+};
+
+/**
+ * A generic primitive component with a ComboBox for selecting from a list of entities.
+ * Supports entities with duplicate names by using uniqueId for identity.
+ * @param props ChooseEntityProps
+ * @returns EntitySelector component
+ */
+function EntitySelector(props) {
+    const { value, onChange, getEntities, getName, filter } = props;
+    // Build options with uniqueId as key
+    const options = useMemo(() => {
+        return getEntities()
+            .filter((e) => e.uniqueId !== undefined && (!filter || filter(e)))
+            .map((entity) => ({
+            label: getName(entity),
+            value: entity.uniqueId.toString(),
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label));
+    }, [getEntities, getName, filter]);
+    const handleEntitySelect = (key) => {
+        const entity = getEntities().find((e) => e.uniqueId.toString() === key);
+        onChange(entity ?? null);
+    };
+    // Get current entity key for display
+    const currentKey = value ? value.uniqueId.toString() : "";
+    return jsx(ComboBox, { label: "", options: options, value: currentKey, onChange: handleEntitySelect });
+}
+EntitySelector.displayName = "EntitySelector";
+
+/**
+ * A primitive component with a ComboBox for selecting from existing scene materials.
+ * @param props MaterialSelectorProps
+ * @returns MaterialSelector component
+ */
+const MaterialSelector = (props) => {
+    MaterialSelector.displayName = "MaterialSelector";
+    const { scene, ...rest } = props;
+    const getMaterials = useCallback(() => scene.materials, [scene.materials]);
+    const getName = useCallback((material) => material.name, []);
+    return jsx(EntitySelector, { ...rest, getEntities: getMaterials, getName: getName });
+};
+
 /**
  * A button that uploads a file and either:
  * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided)
@@ -6179,50 +6402,7 @@ const TextureUpload = (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({
+const useStyles$b = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -6233,55 +6413,21 @@ const useStyles$4 = makeStyles({
 /**
  * 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
+ * @param props TextureSelectorProps
+ * @returns TextureSelector component
  */
-const ChooseTexture = (props) => {
-    ChooseTexture.displayName = "ChooseTexture";
+const TextureSelector = (props) => {
+    TextureSelector.displayName = "TextureSelector";
     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 }) }));
+    const classes = useStyles$b();
+    const getTextures = useCallback(() => scene.textures, [scene.textures]);
+    const getName = useCallback((texture) => texture.displayName || texture.name, []);
+    const filter = useCallback((texture) => !cubeOnly || texture.isCube, [cubeOnly]);
+    return (jsxs("div", { className: classes.container, children: [jsx(EntitySelector, { value: value, onChange: onChange, getEntities: getTextures, getName: getName, filter: filter }), jsx(TextureUpload, { scene: scene, onChange: onChange, cubeOnly: cubeOnly })] }));
 };
 
-/**
- * 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 }));
-}
+const MaterialSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(MaterialSelector, { ...props }) });
+const TextureSelectorPropertyLine = (props) => jsx(PropertyLine, { ...props, children: jsx(TextureSelector, { ...props }) });
 
 /**
  * Displays the lighting and color properties of a PBR material.
@@ -6300,7 +6446,7 @@ const PBRMaterialLightingAndColorProperties = (props) => {
 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 })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Albedo", target: material, propertyKey: "albedoTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "baseWeightTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "baseDiffuseRoughnessTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "metallicTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, cubeOnly: true, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectivity", target: material, propertyKey: "reflectivityTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Micro-surface", target: material, propertyKey: "microSurfaceTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, defaultValue: null })] }));
 };
 
 // TODO: ryamtrem / gehalper This function is temporal until there is a line control to handle texture links (similar to the old TextureLinkLineComponent)
@@ -6800,7 +6946,7 @@ function SaveMetadata(entity, metadata) {
         entity.metadata = metadata;
     }
 }
-const useStyles$3 = makeStyles({
+const useStyles$a = makeStyles({
     mainDiv: {
         display: "flex",
         flexDirection: "column",
@@ -6820,7 +6966,7 @@ const useStyles$3 = makeStyles({
  */
 const MetadataProperties = (props) => {
     const { entity } = props;
-    const classes = useStyles$3();
+    const classes = useStyles$a();
     const { size } = useContext(ToolContext);
     const metadata = useProperty(entity, "metadata");
     const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata) ?? "", [metadata]);
@@ -6875,7 +7021,7 @@ const AbstractMeshGeneralProperties = (props) => {
     const isAnInstance = useProperty(mesh, "isAnInstance");
     // TODO: Handle case where array is mutated
     const subMeshes = useProperty(mesh, "subMeshes");
-    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Vertices", value: mesh.getTotalVertices() }), jsx(StringifiedPropertyLine, { label: "Faces", value: mesh.getTotalIndices() / 3 }), jsx(StringifiedPropertyLine, { label: "Sub-Meshes", value: subMeshes.length }), jsx(LinkToEntityPropertyLine, { label: "Skeleton", description: "The skeleton associated with the mesh.", entity: skeleton, selectionService: selectionService }), jsx(LinkToEntityPropertyLine, { label: "Material", description: "The material used by the mesh.", entity: material, selectionService: selectionService }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Pickable", target: mesh, propertyKey: "isPickable" }), isAnInstance && mesh instanceof InstancedMesh && (jsx(LinkToEntityPropertyLine, { label: "Source", description: "The source mesh from which this instance was created.", entity: mesh.sourceMesh, selectionService: selectionService }))] }));
+    return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Vertices", value: mesh.getTotalVertices() }), jsx(StringifiedPropertyLine, { label: "Faces", value: mesh.getTotalIndices() / 3 }), jsx(StringifiedPropertyLine, { label: "Sub-Meshes", value: subMeshes.length }), jsx(LinkToEntityPropertyLine, { label: "Skeleton", description: "The skeleton associated with the mesh.", entity: skeleton, selectionService: selectionService }), jsx(LinkToEntityPropertyLine, { label: "Material", description: "The material used by the mesh.", entity: material, selectionService: selectionService }), !mesh.isAnInstance && (jsx(BoundProperty, { defaultValue: null, component: MaterialSelectorPropertyLine, label: "Active Material", target: mesh, propertyKey: "material", scene: mesh.getScene() })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Pickable", target: mesh, propertyKey: "isPickable" }), isAnInstance && mesh instanceof InstancedMesh && (jsx(LinkToEntityPropertyLine, { label: "Source", description: "The source mesh from which this instance was created.", entity: mesh.sourceMesh, selectionService: selectionService }))] }));
 };
 const AbstractMeshDisplayProperties = (props) => {
     const { mesh } = props;
@@ -8052,90 +8198,6 @@ 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.
@@ -8222,6 +8284,92 @@ async function ApplyChannelsToTextureDataAsync(texture, width, height, face, cha
     return data;
 }
 
+const useStyles$9 = 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, imperativeRef } = props;
+    const classes = useStyles$9();
+    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]);
+    useImperativeHandle(imperativeRef, () => ({ refresh: updatePreviewAsync }), [updatePreviewAsync]);
+    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" }))] }));
+};
+
 function useMaxCellCount(sprite) {
     const manager = sprite.manager;
     const texture = useProperty(manager, "texture");
@@ -8434,8 +8582,11 @@ function FindTextureType(type) {
 }
 
 const BaseTexturePreviewProperties = (props) => {
-    const { texture } = props;
-    return (jsxs(Fragment, { children: [jsx(TexturePreview, { texture: texture }), jsx(TextureUpload, { texture: texture }), jsx(ButtonLine, { label: "Edit Texture (coming soon!)", onClick: () => { } })] }));
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { texture, textureEditor: TextureEditor } = props;
+    const texturePreviewImperativeRef = useRef(null);
+    const childWindow = useRef(null);
+    return (jsxs(Fragment, { children: [jsx(TexturePreview, { imperativeRef: texturePreviewImperativeRef, texture: texture }), jsx(TextureUpload, { texture: texture }), jsx(ButtonLine, { label: "Edit Texture", onClick: () => childWindow.current?.open() }), jsx(ChildWindow, { id: "Texture Editor", imperativeRef: childWindow, children: jsx(TextureEditor, { texture: texture, onUpdate: async () => await texturePreviewImperativeRef.current?.refresh() }) })] }));
 };
 const BaseTextureGeneralProperties = (props) => {
     const { texture } = props;
@@ -8539,21 +8690,1621 @@ const ThinTextureSamplingProperties = (props) => {
     return jsx(NumberDropdownPropertyLine, { label: "Sampling", value: samplingMode, options: SamplingMode, onChange: (value) => texture.updateSamplingMode(value) });
 };
 
-// Don't use instanceof in this case as we don't want to bring in the gui package just to check if the entity is an AdvancedDynamicTexture.
-function IsAdvancedDynamicTexture$1(entity) {
-    return entity?.getClassName?.() === "AdvancedDynamicTexture";
-}
-const TexturePropertiesServiceDefinition = {
-    friendlyName: "Texture Properties",
-    consumes: [PropertiesServiceIdentity, SettingsContextIdentity],
-    factory: (propertiesService, settingsContext) => {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const canvasShader = {
+    path: {
+        vertexSource: `
+            precision highp float;
+
+            attribute vec3 position;
+            attribute vec2 uv;
+
+            uniform mat4 worldViewProjection;
+
+            varying vec2 vUV;
+
+            void main(void) {
+                gl_Position = worldViewProjection * vec4(position, 1.0);
+                vUV = uv;
+            }
+        `,
+        fragmentSource: `
+            precision highp float;
+    
+            uniform sampler2D textureSampler;
+    
+            uniform bool r;
+            uniform bool g;
+            uniform bool b;
+            uniform bool a;
+
+            uniform int x1;
+            uniform int y1;
+            uniform int x2;
+            uniform int y2;
+            uniform int w;
+            uniform int h;
+
+            uniform int time;
+            uniform bool showGrid;
+    
+            varying vec2 vUV;
+
+            float scl = 200.0;
+            float speed = 10.0 / 1000.0;
+            float smoothing = 0.2;
+    
+            void main(void) {
+                vec2 pos2 = vec2(gl_FragCoord.x, gl_FragCoord.y);
+                vec2 pos = floor(pos2 * 0.05);
+                float pattern = mod(pos.x + pos.y, 2.0); 
+                if (pattern == 0.0) {
+                    pattern = 0.7;
+                }
+                vec4 bg = vec4(pattern, pattern, pattern, 1.0);
+                vec4 col = texture(textureSampler, vUV);
+                if (!r && !g && !b) {
+                    if (a) {
+                        col = vec4(col.a, col.a, col.a, 1.0);
+                    } else {
+                        col = vec4(0.0,0.0,0.0,0.0);
+                    }
+                } else {
+                    if (!r) {
+                        col.r = 0.0;
+                        if (!b) {
+                            col.r = col.g;
+                        }
+                        else if (!g) {
+                            col.r = col.b;
+                        }
+                    }
+                    if (!g) {
+                        col.g = 0.0;
+                        if (!b) {
+                            col.g = col.r;
+                        }
+                        else if (!r) {
+                            col.g = col.b;
+                        }
+                    }
+                    if (!b) {
+                        col.b = 0.0;
+                        if (!r) {
+                            col.b = col.g;
+                        } else if (!g) {
+                            col.b = col.r;
+                        }
+                    }
+                    if (!a) {
+                        col.a = 1.0;
+                    }
+                }
+                gl_FragColor = col * (col.a) + bg * (1.0 - col.a);
+                float wF = float(w);
+                float hF = float(h);
+                int xPixel = int(floor(vUV.x * wF));
+                int yPixel = int(floor((1.0 - vUV.y) * hF));
+                int xDis = min(abs(xPixel - x1), abs(xPixel - x2));
+                int yDis = min(abs(yPixel - y1), abs(yPixel - y2));
+                if (showGrid) {
+                    vec2 frac = fract(vUV * vec2(wF,hF));
+                    float thickness = 0.1;
+                    if (abs(frac.x) < thickness || abs (frac.y) < thickness) {
+                        gl_FragColor = vec4(0.75,0.75,0.75,1.0);
+                    }
+                }
+                if (xPixel >= x1 && yPixel >= y1 && xPixel <= x2 && yPixel <= y2) {
+                    if (xDis <= 4 || yDis <= 4) {
+                        float c = sin(vUV.x * scl + vUV.y * scl + float(time) * speed);
+                        c = smoothstep(-smoothing,smoothing,c);
+                        float val = 1.0 - c;
+                        gl_FragColor = vec4(val, val, val, 1.0) * 0.7 + gl_FragColor * 0.3;
+                    }
+                }
+            }`,
+    },
+    options: {
+        attributes: ["position", "uv"],
+        uniforms: ["worldViewProjection", "textureSampler", "r", "g", "b", "a", "x1", "y1", "x2", "y2", "w", "h", "time", "showGrid"],
+    },
+};
+
+class TextureCanvasManager {
+    constructor(texture, window, canvasUI, canvas2D, canvas3D, setPixelData, metadata, onUpdate, setMetadata, setMipLevel) {
+        this._isPanning = false;
+        this._mouseX = 0;
+        this._mouseY = 0;
+        this._size = { width: 0, height: 0 };
+        this._channels = [];
+        this._face = 0;
+        this._mipLevel = 0;
+        /** This is a hidden texture which is only responsible for holding the actual texture memory in the original engine */
+        this._target = null;
+        /** Keeps track of whether we have modified the texture */
+        this._didEdit = false;
+        this._plane = null;
+        /** Tracks which keys are currently pressed */
+        this._keyMap = new Map();
+        /** Tracks which mouse buttons are currently pressed */
+        this._buttonsPressed = 0;
+        this.ZOOM_MOUSE_SPEED = 0.001;
+        this.ZOOM_KEYBOARD_SPEED = 0.4;
+        this.ZOOM_IN_KEY = "+";
+        this.ZOOM_OUT_KEY = "-";
+        this.PAN_SPEED = 0.003;
+        this.PAN_KEY = "Space";
+        this.MIN_SCALE = 0.01;
+        this.GRID_SCALE = 0.047;
+        this.MAX_SCALE = 10;
+        this.SELECT_ALL_KEY = "KeyA";
+        this.SAVE_KEY = "KeyS";
+        this.RESET_KEY = "KeyR";
+        this.DESELECT_KEY = "Escape";
+        /** The number of milliseconds between texture updates */
+        this.PUSH_FREQUENCY = 32;
+        this._tool = null;
+        this._editing3D = false;
+        this._imageData = null;
+        this._canPush = true;
+        this._shouldPush = false;
+        this._window = window;
+        this._uiCanvas = canvasUI;
+        this._2DCanvas = canvas2D;
+        this._3DCanvas = canvas3D;
+        this._paintCanvas = document.createElement("canvas");
+        this._setPixelData = setPixelData;
+        this._metadata = metadata;
+        this._onUpdate = onUpdate;
+        this._setMetadata = setMetadata;
+        this._setMipLevel = setMipLevel;
+        this._originalTexture = texture;
+        this._originalTextureProperties = {
+            _texture: this._originalTexture._texture,
+            url: this._originalTexture.url,
+            _forceSerialize: this._originalTexture._forceSerialize,
+        };
+        this._engine = new Engine(this._uiCanvas, true);
+        this._scene = new Scene(this._engine, { virtual: true });
+        this._scene.clearColor = new Color4(0, 0, 0, 0);
+        this._camera = new FreeCamera("camera", new Vector3(0, 0, -1), this._scene);
+        this._camera.mode = Camera.ORTHOGRAPHIC_CAMERA;
+        this._camera.minZ = 0.5;
+        this._camera.maxZ = 1.5;
+        this._cameraPos = new Vector2();
+        this.setSize(texture.getSize());
+        this._channelsTexture = new HtmlElementTexture("ct", this._2DCanvas, {
+            engine: this._engine,
+            scene: null,
+            samplingMode: Texture.NEAREST_SAMPLINGMODE,
+            generateMipMaps: true,
+        });
+        this._3DEngine = new Engine(this._3DCanvas);
+        this._3DScene = new Scene(this._3DEngine, { virtual: true });
+        this._3DScene.clearColor = new Color4(0, 0, 0, 0);
+        this._3DCanvasTexture = new HtmlElementTexture("canvas", this._2DCanvas, { engine: this._3DEngine, scene: this._3DScene });
+        this._3DCanvasTexture.hasAlpha = true;
+        const cam = new FreeCamera("camera", new Vector3(0, 0, -1), this._3DScene);
+        cam.mode = Camera.ORTHOGRAPHIC_CAMERA;
+        [cam.orthoBottom, cam.orthoLeft, cam.orthoTop, cam.orthoRight] = [-0.5, -0.5, 0.5, 0.5];
+        this._3DPlane = CreatePlane("texture", { width: 1, height: 1 }, this._3DScene);
+        this._3DPlane.hasVertexAlpha = true;
+        const mat = new StandardMaterial("material", this._3DScene);
+        mat.diffuseTexture = this._3DCanvasTexture;
+        mat.useAlphaFromDiffuseTexture = true;
+        mat.disableLighting = true;
+        mat.emissiveColor = Color3.White();
+        this._3DPlane.material = mat;
+        this._planeMaterial = new ShaderMaterial("canvasShader", this._scene, canvasShader.path, canvasShader.options);
+        this.grabOriginalTexture();
+        this._planeMaterial.setTexture("textureSampler", this._channelsTexture);
+        this._planeMaterial.setFloat("r", 1.0);
+        this._planeMaterial.setFloat("g", 1.0);
+        this._planeMaterial.setFloat("b", 1.0);
+        this._planeMaterial.setFloat("a", 1.0);
+        this._planeMaterial.setInt("x1", -1);
+        this._planeMaterial.setInt("y1", -1);
+        this._planeMaterial.setInt("x2", -1);
+        this._planeMaterial.setInt("y2", -1);
+        this._planeMaterial.setInt("w", this._size.width);
+        this._planeMaterial.setInt("h", this._size.height);
+        this._planeMaterial.setInt("time", 0);
+        this._planeMaterial.setFloat("showGrid", 0.0);
+        if (this._plane) {
+            this._plane.material = this._planeMaterial;
+        }
+        this._window.addEventListener("keydown", (evt) => {
+            this._keyMap.set(evt.code, true);
+            if (evt.code === this.SELECT_ALL_KEY && evt.ctrlKey) {
+                this._setMetadata({
+                    select: {
+                        x1: 0,
+                        y1: 0,
+                        x2: this._size.width,
+                        y2: this._size.height,
+                    },
+                });
+                evt.preventDefault();
+            }
+            if (evt.code === this.SAVE_KEY && evt.ctrlKey) {
+                this.saveTexture();
+                evt.preventDefault();
+            }
+            if (evt.code === this.RESET_KEY && evt.ctrlKey) {
+                this.reset();
+                evt.preventDefault();
+            }
+            if (evt.code === this.DESELECT_KEY) {
+                this._setMetadata({
+                    select: {
+                        x1: -1,
+                        y1: -1,
+                        x2: -1,
+                        y2: -1,
+                    },
+                });
+            }
+        });
+        this._window.addEventListener("keyup", (evt) => {
+            this._keyMap.set(evt.code, false);
+        });
+        this._engine.runRenderLoop(() => {
+            this._engine.resize();
+            this._scene.render();
+            this._planeMaterial.setInt("time", new Date().getTime());
+        });
+        this._scale = 1.5 / Math.max(this._size.width, this._size.height);
+        this._isPanning = false;
+        this._scene.onBeforeRenderObservable.add(() => {
+            this._scale = Math.min(Math.max(this._scale, this.MIN_SCALE / Math.log2(Math.min(this._size.width, this._size.height))), this.MAX_SCALE);
+            if (this._scale > this.GRID_SCALE) {
+                this._planeMaterial.setFloat("showGrid", 1.0);
+            }
+            else {
+                this._planeMaterial.setFloat("showGrid", 0.0);
+            }
+            const ratio = this._uiCanvas?.width / this._uiCanvas?.height;
+            const { x, y } = this._cameraPos;
+            this._camera.orthoBottom = y - 1 / this._scale;
+            this._camera.orthoTop = y + 1 / this._scale;
+            this._camera.orthoLeft = x - ratio / this._scale;
+            this._camera.orthoRight = x + ratio / this._scale;
+        });
+        this._scene.onPointerObservable.add((pointerInfo) => {
+            const leftButtonPressed = pointerInfo.event.buttons & 1;
+            const middleButtonPressed = pointerInfo.event.buttons & 4;
+            if (!this._isPanning) {
+                if ((leftButtonPressed && !(this._buttonsPressed & 1) && this._keyMap.get(this.PAN_KEY)) || middleButtonPressed) {
+                    this._isPanning = true;
+                    this._mouseX = pointerInfo.event.x;
+                    this._mouseY = pointerInfo.event.y;
+                }
+                if (middleButtonPressed) {
+                    this._isPanning = true;
+                }
+            }
+            else if ((!leftButtonPressed || !this._keyMap.get(this.PAN_KEY)) && !middleButtonPressed) {
+                this._isPanning = false;
+            }
+            switch (pointerInfo.type) {
+                case PointerEventTypes.POINTERWHEEL: {
+                    const event = pointerInfo.event;
+                    this._scale -= event.deltaY * this.ZOOM_MOUSE_SPEED * this._scale;
+                    break;
+                }
+                case PointerEventTypes.POINTERMOVE:
+                    if (this._isPanning) {
+                        this._cameraPos.x -= ((pointerInfo.event.x - this._mouseX) * this.PAN_SPEED) / this._scale;
+                        this._cameraPos.y += ((pointerInfo.event.y - this._mouseY) * this.PAN_SPEED) / this._scale;
+                        this._mouseX = pointerInfo.event.x;
+                        this._mouseY = pointerInfo.event.y;
+                    }
+                    if (pointerInfo.pickInfo?.hit) {
+                        if (this._imageData) {
+                            const pos = this.getMouseCoordinates(pointerInfo);
+                            const idx = (pos.x + pos.y * this._size.width) * 4;
+                            this._setPixelData({
+                                x: pos.x,
+                                y: pos.y,
+                                r: this._imageData[idx],
+                                g: this._imageData[idx + 1],
+                                b: this._imageData[idx + 2],
+                                a: this._imageData[idx + 3],
+                            });
+                        }
+                    }
+                    else {
+                        this._setPixelData({});
+                    }
+                    break;
+            }
+            this._buttonsPressed = pointerInfo.event.buttons;
+        });
+        this._scene.onKeyboardObservable.add((kbInfo) => {
+            switch (kbInfo.type) {
+                case KeyboardEventTypes.KEYDOWN:
+                    this._keyMap.set(kbInfo.event.key, true);
+                    switch (kbInfo.event.key) {
+                        case this.ZOOM_IN_KEY:
+                            this._scale += this.ZOOM_KEYBOARD_SPEED * this._scale;
+                            break;
+                        case this.ZOOM_OUT_KEY:
+                            this._scale -= this.ZOOM_KEYBOARD_SPEED * this._scale;
+                            break;
+                    }
+                    break;
+                case KeyboardEventTypes.KEYUP:
+                    this._keyMap.set(kbInfo.event.key, false);
+                    break;
+            }
+        });
+    }
+    async updateTexture() {
+        if (this._mipLevel !== 0) {
+            this._setMipLevel(0);
+        }
+        this._didEdit = true;
+        const element = this._editing3D ? this._3DCanvas : this._2DCanvas;
+        if (this._editing3D) {
+            this._3DCanvasTexture.update();
+            this._3DScene.render();
+        }
+        if (this._originalTexture.isCube) ;
+        else {
+            if (!this._target) {
+                this._target = new HtmlElementTexture("editor", element, {
+                    engine: this._originalTexture.getScene()?.getEngine(),
+                    scene: null,
+                    samplingMode: this._originalTexture.samplingMode,
+                    generateMipMaps: this._originalTextureProperties._texture?.generateMipMaps,
+                });
+            }
+            else {
+                this._target.element = element;
+            }
+            this.pushTexture();
+        }
+        this._originalTexture._texture = this._target?._texture ?? null;
+        this._originalTexture.url = null;
+        this._originalTexture._forceSerialize = true;
+        this._channelsTexture.element = element;
+        this.updateDisplay();
+        this._onUpdate();
+    }
+    async pushTexture() {
+        if (this._canPush && this._target) {
+            const invertY = this._target.constructor.name === HtmlElementTexture.name ? false : this._originalTexture.invertY;
+            this._target.update(invertY);
+            this._target._texture?.updateSize(this._size.width, this._size.height);
+            if (this._editing3D) {
+                const bufferView = await this._3DEngine.readPixels(0, 0, this._size.width, this._size.height);
+                this._imageData = new Uint8Array(bufferView.buffer, 0, bufferView.byteLength);
+            }
+            else {
+                this._imageData = this._2DCanvas.getContext("2d").getImageData(0, 0, this._size.width, this._size.height).data;
+            }
+            this._canPush = false;
+            this._shouldPush = false;
+            setTimeout(() => {
+                this._canPush = true;
+                if (this._shouldPush) {
+                    this.pushTexture();
+                }
+            }, this.PUSH_FREQUENCY);
+        }
+        else {
+            this._shouldPush = true;
+        }
+    }
+    async startPainting() {
+        if (this._mipLevel != 0) {
+            this._setMipLevel(0);
+        }
+        let x = 0, y = 0, w = this._size.width, h = this._size.height;
+        if (this._metadata.select.x1 != -1) {
+            x = this._metadata.select.x1;
+            y = this._metadata.select.y1;
+            w = this._metadata.select.x2 - this._metadata.select.x1;
+            h = this._metadata.select.y2 - this._metadata.select.y1;
+        }
+        this._paintCanvas.width = w;
+        this._paintCanvas.height = h;
+        const ctx = this._paintCanvas.getContext("2d");
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(this._2DCanvas, x, y, w, h, 0, 0, w, h);
+        return ctx;
+    }
+    updatePainting() {
+        let x = 0, y = 0, w = this._size.width, h = this._size.height;
+        if (this._metadata.select.x1 != -1) {
+            x = this._metadata.select.x1;
+            y = this._metadata.select.y1;
+            w = this._metadata.select.x2 - this._metadata.select.x1;
+            h = this._metadata.select.y2 - this._metadata.select.y1;
+        }
+        let editingAllChannels = true;
+        for (const channel of this._channels) {
+            if (!channel.editable) {
+                editingAllChannels = false;
+            }
+        }
+        let oldData;
+        if (!editingAllChannels) {
+            oldData = this._2DCanvas.getContext("2d").getImageData(x, y, w, h).data;
+        }
+        const ctx = this._paintCanvas.getContext("2d");
+        const ctx2D = this.canvas2D.getContext("2d");
+        ctx2D.globalAlpha = 1.0;
+        ctx2D.globalCompositeOperation = "destination-out";
+        ctx2D.fillStyle = "white";
+        ctx2D.fillRect(x, y, w, h);
+        ctx2D.imageSmoothingEnabled = false;
+        // If we're not editing all channels, we must process the pixel data
+        if (!editingAllChannels) {
+            const newData = ctx.getImageData(0, 0, w, h);
+            const nd = newData.data;
+            for (let index = 0; index < this._channels.length; index++) {
+                const channel = this._channels[index];
+                if (!channel.editable) {
+                    for (let i = index; i < w * h * 4; i += 4) {
+                        nd[i] = oldData[i];
+                    }
+                }
+            }
+            ctx2D.globalCompositeOperation = "source-over";
+            ctx2D.globalAlpha = 1.0;
+            ctx2D.putImageData(newData, x, y);
+        }
+        else {
+            ctx2D.globalCompositeOperation = "source-over";
+            ctx2D.globalAlpha = 1.0;
+            // We want to use drawImage wherever possible since it is much faster than putImageData
+            ctx2D.drawImage(ctx.canvas, x, y);
+        }
+        this.updateTexture();
+    }
+    stopPainting() {
+        this._paintCanvas.getContext("2d").clearRect(0, 0, this._paintCanvas.width, this._paintCanvas.height);
+    }
+    updateDisplay() {
+        this._3DScene.render();
+        this._channelsTexture.update(true);
+    }
+    set channels(channels) {
+        // Determine if we need to re-render the texture. This is an expensive operation, so we should only do it if channel visibility has changed.
+        let needsRender = false;
+        if (channels.length !== this._channels.length) {
+            needsRender = true;
+        }
+        else {
+            for (let i = 0; i < channels.length; i++) {
+                const channel = channels[i];
+                if (channel.visible !== this._channels[i].visible) {
+                    needsRender = true;
+                    this._planeMaterial.setFloat(channel.id.toLowerCase(), channel.visible ? 1.0 : 0.0);
+                }
+            }
+        }
+        this._channels = channels;
+        if (needsRender) {
+            this.updateDisplay();
+        }
+    }
+    paintPixelsOnCanvas(pixelData, canvas) {
+        const ctx = canvas.getContext("2d");
+        const imgData = ctx.createImageData(canvas.width, canvas.height);
+        imgData.data.set(pixelData);
+        ctx.putImageData(imgData, 0, 0);
+    }
+    async grabOriginalTexture() {
+        // Grab image data from original texture and paint it onto the context of a DynamicTexture
+        this.setSize(this._originalTexture.getSize());
+        const data = await ApplyChannelsToTextureDataAsync(this._originalTexture, this._size.width, this._size.height, this._face, { R: true, G: true, B: true, A: true }, this._mipLevel);
+        this._imageData = data;
+        this.paintPixelsOnCanvas(data, this._2DCanvas);
+        this._3DCanvasTexture.update();
+        this.updateDisplay();
+        return data;
+    }
+    getMouseCoordinates(pointerInfo) {
+        if (pointerInfo.pickInfo?.hit) {
+            const x = Math.floor(pointerInfo.pickInfo.getTextureCoordinates().x * this._size.width);
+            const y = Math.floor((1 - pointerInfo.pickInfo.getTextureCoordinates().y) * this._size.height);
+            return new Vector2(x, y);
+        }
+        else {
+            return new Vector2();
+        }
+    }
+    get scene() {
+        return this._scene;
+    }
+    get canvas2D() {
+        return this._2DCanvas;
+    }
+    get size() {
+        return this._size;
+    }
+    set tool(tool) {
+        if (this._tool) {
+            this._tool.deactivate();
+        }
+        this._tool = tool;
+        if (this._tool) {
+            this._tool.activate();
+            if (this._editing3D && !this._tool.is3D) {
+                this._editing3D = false;
+                this._2DCanvas.getContext("2d")?.drawImage(this._3DCanvas, 0, 0);
+            }
+            else if (!this._editing3D && this._tool.is3D) {
+                this._editing3D = true;
+                this.updateTexture();
+            }
+        }
+    }
+    get tool() {
+        return this._tool;
+    }
+    set face(face) {
+        if (this._face !== face) {
+            this._face = face;
+            this.grabOriginalTexture();
+            this.updateDisplay();
+        }
+    }
+    set mipLevel(mipLevel) {
+        if (this._mipLevel === mipLevel) {
+            return;
+        }
+        this._mipLevel = mipLevel;
+        this.grabOriginalTexture();
+    }
+    /** Returns the 3D scene used for postprocesses */
+    get scene3D() {
+        return this._3DScene;
+    }
+    set metadata(metadata) {
+        this._metadata = metadata;
+        const { x1, y1, x2, y2 } = metadata.select;
+        this._planeMaterial.setInt("x1", x1);
+        this._planeMaterial.setInt("y1", y1);
+        this._planeMaterial.setInt("x2", x2);
+        this._planeMaterial.setInt("y2", y2);
+    }
+    makePlane() {
+        if (this._plane) {
+            this._plane.dispose();
+        }
+        this._plane = CreatePlane("plane", { width: this._size.width, height: this._size.height }, this._scene);
+        this._plane.enableEdgesRendering();
+        this._plane.edgesWidth = 4.0;
+        this._plane.edgesColor = new Color4(1, 1, 1, 1);
+        this._plane.enablePointerMoveEvents = true;
+        this._plane.material = this._planeMaterial;
+    }
+    reset() {
+        if (this._tool && this._tool.reset) {
+            this._tool.reset();
+        }
+        this._originalTexture._texture = this._originalTextureProperties._texture;
+        this._originalTexture.url = this._originalTextureProperties.url;
+        this._originalTexture._forceSerialize = this._originalTextureProperties._forceSerialize;
+        this.grabOriginalTexture();
+        this.makePlane();
+        this._didEdit = false;
+        this._onUpdate();
+    }
+    async resize(newSize) {
+        const data = await ApplyChannelsToTextureDataAsync(this._originalTexture, newSize.width, newSize.height, this._face, { R: true, G: true, B: true, A: true });
+        this.setSize(newSize);
+        this.paintPixelsOnCanvas(data, this._2DCanvas);
+        this.updateTexture();
+        this._didEdit = true;
+    }
+    setSize(size) {
+        const oldSize = this._size;
+        this._size = size;
+        this._2DCanvas.width = this._size.width;
+        this._2DCanvas.height = this._size.height;
+        this._3DCanvas.width = this._size.width;
+        this._3DCanvas.height = this._size.height;
+        if (this._planeMaterial) {
+            this._planeMaterial.setInt("w", this._size.width);
+            this._planeMaterial.setInt("h", this._size.height);
+        }
+        if (!oldSize || oldSize.width != size.width || oldSize.height != size.height) {
+            this._cameraPos.x = 0;
+            this._cameraPos.y = 0;
+            this._scale = 1.5 / Math.max(this._size.width, this._size.height);
+        }
+        this.makePlane();
+    }
+    upload(file) {
+        Tools.ReadFile(file, (data) => {
+            const blob = new Blob([data], { type: "octet/stream" });
+            let extension = undefined;
+            if (file.name.toLowerCase().indexOf(".dds") > 0) {
+                extension = ".dds";
+            }
+            else if (file.name.toLowerCase().indexOf(".env") > 0) {
+                extension = ".env";
+            }
+            const reader = new FileReader();
+            reader.readAsDataURL(blob);
+            reader.onloadend = () => {
+                const base64data = reader.result;
+                if (extension === ".dds" || extension === ".env") {
+                    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                    this._originalTexture.updateURL(base64data, extension, async () => await this.grabOriginalTexture());
+                }
+                else {
+                    const texture = new Texture(base64data, this._scene, this._originalTexture.noMipmap, false, Texture.NEAREST_SAMPLINGMODE, () => {
+                        // eslint-disable-next-line github/no-then
+                        ApplyChannelsToTextureDataAsync(texture, texture.getSize().width, texture.getSize().height, 0, { R: true, G: true, B: true, A: true }).then(async (pixels) => {
+                            if (this._tool && this._tool.reset) {
+                                this._tool.reset();
+                            }
+                            texture.dispose();
+                            this.setSize(texture.getSize());
+                            this.paintPixelsOnCanvas(pixels, this._2DCanvas);
+                            await this.updateTexture();
+                            this._setMipLevel(0);
+                        });
+                    });
+                }
+            };
+        }, undefined, true);
+    }
+    saveTexture() {
+        const canvas = this._editing3D ? this._3DCanvas : this._2DCanvas;
+        Tools.ToBlob(canvas, (blob) => {
+            Tools.Download(blob, this._originalTexture.name);
+        });
+    }
+    toolInteractionEnabled() {
+        return !(this._keyMap.get(this.PAN_KEY) || this._isPanning);
+    }
+    dispose() {
+        if (this._didEdit) {
+            this._originalTextureProperties._texture?.dispose();
+        }
+        if (this._tool) {
+            this._tool.deactivate();
+        }
+        this._paintCanvas.parentNode?.removeChild(this._paintCanvas);
+        this._3DPlane.dispose();
+        this._3DCanvasTexture.dispose();
+        this._3DScene.dispose();
+        this._3DEngine.dispose();
+        this._plane?.dispose();
+        this._channelsTexture.dispose();
+        this._planeMaterial.dispose();
+        this._camera.dispose();
+        this._scene.dispose();
+        this._engine.dispose();
+    }
+}
+
+const useStyles$8 = makeStyles({
+    channelsBar: {
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: tokens.colorNeutralBackground1,
+        padding: tokens.spacingVerticalXS,
+        gap: tokens.spacingVerticalXS,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: tokens.shadow8,
+    },
+    channel: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+        padding: tokens.spacingVerticalXS,
+        borderRadius: tokens.borderRadiusMedium,
+    },
+    channelLabel: {
+        fontWeight: tokens.fontWeightSemibold,
+        margin: `0 ${tokens.spacingHorizontalXS}`,
+        textAlign: "center",
+    },
+    channelR: {
+        color: tokens.colorPaletteRedBorderActive,
+    },
+    channelG: {
+        color: tokens.colorPaletteGreenBorderActive,
+    },
+    channelB: {
+        color: tokens.colorPaletteBlueBorderActive,
+    },
+    channelA: {
+        color: tokens.colorNeutralForeground1,
+    },
+    uneditable: {
+        opacity: 0.5,
+    },
+});
+/**
+ * Displays channel visibility and editability controls
+ * @param props - The channels bar properties
+ * @returns The channels bar component
+ */
+const ChannelsBar = (props) => {
+    const { channels, setChannels } = props;
+    const classes = useStyles$8();
+    const toggleVisibility = useCallback((index) => {
+        const newChannels = [...channels];
+        newChannels[index] = { ...newChannels[index], visible: !newChannels[index].visible };
+        setChannels(newChannels);
+    }, [channels, setChannels]);
+    const toggleEditable = useCallback((index) => {
+        const newChannels = [...channels];
+        newChannels[index] = { ...newChannels[index], editable: !newChannels[index].editable };
+        setChannels(newChannels);
+    }, [channels, setChannels]);
+    const getChannelColorClass = (id) => {
+        switch (id) {
+            case "R":
+                return classes.channelR;
+            case "G":
+                return classes.channelG;
+            case "B":
+                return classes.channelB;
+            default:
+                return classes.channelA;
+        }
+    };
+    return (jsx("div", { className: classes.channelsBar, children: channels.map((channel, index) => {
+            const visTip = channel.visible ? "Hide" : "Show";
+            const editTip = channel.editable ? "Lock" : "Unlock";
+            return (jsxs("div", { className: `${classes.channel} ${!channel.editable ? classes.uneditable : ""}`, children: [jsx(Tooltip, { content: `${visTip} ${channel.name}`, relationship: "label", positioning: "before", children: jsx(ToggleButton$1, { appearance: "transparent", size: "small", checked: channel.visible, icon: channel.visible ? jsx(EyeRegular, {}) : jsx(EyeOffRegular, {}), onClick: () => toggleVisibility(index) }) }), jsx(Tooltip, { content: `${editTip} ${channel.name}`, relationship: "label", positioning: "before", children: jsx(ToggleButton$1, { appearance: "transparent", size: "small", checked: channel.editable, icon: channel.editable ? jsx(LockOpenRegular, {}) : jsx(LockClosedRegular, {}), onClick: () => toggleEditable(index) }) }), jsx(Body1, { className: mergeClasses(classes.channelLabel, getChannelColorClass(channel.id)), children: channel.id })] }, channel.id));
+        }) }));
+};
+
+const useStyles$7 = makeStyles({
+    propertiesBar: {
+        display: "flex",
+        backgroundColor: tokens.colorNeutralBackground1,
+        alignItems: "center",
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+        gap: tokens.spacingHorizontalS,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+        flexWrap: "wrap",
+    },
+    section: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+    },
+    dimensionsForm: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+    },
+    dimensionInput: {
+        width: "60px",
+    },
+    pixelData: {
+        display: "flex",
+        alignItems: "center",
+        gap: tokens.spacingHorizontalXS,
+        fontSize: tokens.fontSizeBase200,
+        fontFamily: tokens.fontFamilyMonospace,
+    },
+    pixelDataLabel: {
+        color: tokens.colorNeutralForeground3,
+    },
+    pixelDataValue: {
+        color: tokens.colorNeutralForeground1,
+        minWidth: "32px",
+    },
+    faceButton: {
+        minWidth: "auto",
+        paddingLeft: tokens.spacingHorizontalS,
+        paddingRight: tokens.spacingHorizontalS,
+    },
+    spacer: {
+        flex: 1,
+    },
+    uploadInput: {
+        display: "none",
+    },
+});
+const PixelDataDisplay = ({ label, value }) => {
+    const classes = useStyles$7();
+    return (jsxs("span", { className: classes.pixelData, children: [jsxs(Label, { className: classes.pixelDataLabel, children: [label, ":"] }), jsx(Label, { className: classes.pixelDataValue, children: value !== undefined ? value : "-" })] }));
+};
+const CubeFaces = ["+X", "-X", "+Y", "-Y", "+Z", "-Z"];
+/**
+ * Properties bar component showing texture info and actions
+ * @param props - The properties bar properties
+ * @returns The properties bar component
+ */
+const PropertiesBar = (props) => {
+    const { texture, size, saveTexture, pixelData, face, setFace, resetTexture, resizeTexture, uploadTexture, mipLevel, setMipLevel } = props;
+    const classes = useStyles$7();
+    const uploadInputRef = useRef(null);
+    const [width, setWidth] = useState(size.width);
+    const [height, setHeight] = useState(size.height);
+    // Update local state when size prop changes
+    useEffect(() => {
+        setWidth(size.width);
+        setHeight(size.height);
+    }, [size.width, size.height]);
+    const maxLevels = Math.floor(Math.log2(Math.max(texture.getSize().width, texture.getSize().height)));
+    const engine = texture.getScene()?.getEngine();
+    const mipsEnabled = !texture.noMipmap && engine?.getCaps().textureLOD;
+    const handleUploadClick = useCallback(() => {
+        uploadInputRef.current?.click();
+    }, []);
+    const handleFileChange = useCallback((evt) => {
+        const files = evt.target.files;
+        if (files && files.length) {
+            uploadTexture(files[0]);
+        }
+        evt.target.value = "";
+    }, [uploadTexture]);
+    const handleResize = useCallback(() => {
+        resizeTexture(width, height);
+    }, [width, height, resizeTexture]);
+    const getNewDimension = (oldDim, newDim) => {
+        const parsed = parseInt(newDim);
+        if (!isNaN(parsed) && parsed > 0 && Number.isInteger(parsed)) {
+            return parsed;
+        }
+        return oldDim;
+    };
+    return (jsxs("div", { className: classes.propertiesBar, children: [jsxs("div", { className: classes.section, children: [jsx(Label, { children: "W:" }), jsx(Input, { className: classes.dimensionInput, size: "small", type: "text", value: width.toString(), readOnly: texture.isCube, onChange: (_, data) => setWidth(getNewDimension(width, data.value)) }), jsx(Label, { children: "H:" }), jsx(Input, { className: classes.dimensionInput, size: "small", type: "text", value: height.toString(), readOnly: texture.isCube, onChange: (_, data) => setHeight(getNewDimension(height, data.value)) }), !texture.isCube && (jsx(Tooltip, { content: "Resize", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ResizeRegular, {}), onClick: handleResize }) }))] }), jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(PixelDataDisplay, { label: "X", value: pixelData.x }), jsx(PixelDataDisplay, { label: "Y", value: pixelData.y })] }), jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(PixelDataDisplay, { label: "R", value: pixelData.r }), jsx(PixelDataDisplay, { label: "G", value: pixelData.g }), jsx(PixelDataDisplay, { label: "B", value: pixelData.b }), jsx(PixelDataDisplay, { label: "A", value: pixelData.a })] }), texture.isCube && (jsxs(Fragment, { children: [jsx(ToolbarDivider, {}), jsx(Toolbar$1, { size: "small", children: CubeFaces.map((label, index) => (jsx(ToolbarButton, { className: classes.faceButton, appearance: face === index ? "primary" : "subtle", onClick: () => setFace(index), children: label }, label))) })] })), mipsEnabled && (jsxs(Fragment, { children: [jsx(ToolbarDivider, {}), jsxs("div", { className: classes.section, children: [jsx(Label, { children: "MIP:" }), jsx(Tooltip, { content: "Mip Preview Up", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ChevronUpRegular, {}), disabled: mipLevel <= 0, onClick: () => setMipLevel(mipLevel - 1) }) }), jsx(Label, { children: mipLevel }), jsx(Tooltip, { content: "Mip Preview Down", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ChevronDownRegular, {}), disabled: mipLevel >= maxLevels, onClick: () => setMipLevel(mipLevel + 1) }) })] })] })), jsx("div", { className: classes.spacer }), jsxs(Toolbar$1, { size: "small", children: [jsx(Tooltip, { content: "Reset", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ArrowResetRegular, {}), onClick: resetTexture }) }), jsx(Tooltip, { content: "Upload", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(ArrowUploadRegular, {}), onClick: handleUploadClick }) }), jsx("input", { ref: uploadInputRef, className: classes.uploadInput, type: "file", accept: ".jpg, .png, .tga, .dds, .env, .exr", onChange: handleFileChange }), jsx(Tooltip, { content: "Save", relationship: "label", children: jsx(ToolbarButton, { icon: jsx(SaveRegular, {}), onClick: saveTexture }) })] })] }));
+};
+
+const useStyles$6 = makeStyles({
+    statusBar: {
+        display: "flex",
+        backgroundColor: tokens.colorNeutralBackground1,
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalM}`,
+        fontSize: tokens.fontSizeBase200,
+        color: tokens.colorNeutralForeground2,
+        borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+        minHeight: "24px",
+    },
+    fileName: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    },
+    mipInfo: {
+        flexShrink: 0,
+    },
+});
+/**
+ * Displays status information about the texture
+ * @param props - The status bar properties
+ * @returns The status bar component
+ */
+const StatusBar = (props) => {
+    const { texture, mipLevel } = props;
+    const classes = useStyles$6();
+    const factor = Math.pow(2, mipLevel);
+    const width = Math.ceil(texture.getSize().width / factor);
+    const height = Math.ceil(texture.getSize().height / factor);
+    return (jsxs("div", { className: classes.statusBar, children: [jsx("span", { className: classes.fileName, children: texture.name }), !texture.noMipmap && (jsxs("span", { className: classes.mipInfo, children: ["MIP Preview: ", mipLevel, " (", width, "\u00D7", height, ")"] }))] }));
+};
+
+const useStyles$5 = makeStyles({
+    toolbar: {
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: tokens.colorNeutralBackground1,
+        padding: tokens.spacingVerticalXS,
+        gap: tokens.spacingVerticalXS,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: tokens.shadow8,
+    },
+    toolsSection: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalXXS,
+    },
+    toolButton: {
+        minWidth: "36px",
+        minHeight: "36px",
+        padding: tokens.spacingVerticalXS,
+    },
+    toolIcon: {
+        width: "24px",
+        height: "24px",
+    },
+    colorSection: {
+        display: "flex",
+        justifyContent: "center",
+        margin: tokens.spacingVerticalS,
+    },
+});
+/**
+ * Toolbar component for texture editing tools
+ * @param props - The toolbar properties
+ * @returns The toolbar component
+ */
+const ToolBar = (props) => {
+    const { tools, changeTool, activeToolIndex, metadata, setMetadata, hasAlpha } = props;
+    const classes = useStyles$5();
+    const computeRGBAColor = useCallback(() => {
+        const opacityInt = Math.floor(metadata.alpha * 255);
+        const opacityHex = opacityInt.toString(16).padStart(2, "0");
+        return Color4.FromHexString(`${metadata.color}${opacityHex}`);
+    }, [metadata.color, metadata.alpha]);
+    const handleColorChange = useCallback((color) => {
+        const newMetadata = {
+            color: color.toHexString(true),
+            alpha: color.a ?? 1,
+        };
+        if (newMetadata.color !== metadata.color || newMetadata.alpha !== metadata.alpha) {
+            setMetadata(newMetadata);
+        }
+    }, [metadata, setMetadata]);
+    const handleToolClick = useCallback((index) => {
+        if (activeToolIndex === index) {
+            // Deselect current tool
+            changeTool(-1);
+        }
+        else {
+            changeTool(index);
+        }
+    }, [activeToolIndex, changeTool]);
+    return (jsxs("div", { className: classes.toolbar, children: [jsx("div", { className: classes.colorSection, children: jsx(Tooltip, { relationship: "label", content: "Pick Tool Color", positioning: "after", children: jsx(ColorPickerPopup, { value: hasAlpha ? computeRGBAColor() : Color3.FromHexString(metadata.color), onChange: handleColorChange }) }) }), jsx(Divider, {}), jsx("div", { className: classes.toolsSection, children: tools.map((tool, index) => {
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    const IconComponent = tool.icon;
+                    return (jsx(Tooltip, { content: tool.name, relationship: "label", positioning: "after", children: jsx(ToggleButton$1, { className: classes.toolButton, appearance: "subtle", checked: index === activeToolIndex, onClick: () => handleToolClick(index), icon: jsx(IconComponent, {}) }) }, index));
+                }) })] }));
+};
+
+const useStyles$4 = makeStyles({
+    textureEditor: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%",
+        backgroundColor: tokens.colorNeutralBackground3,
+        color: tokens.colorNeutralForeground1,
+        overflow: "hidden",
+    },
+    mainContent: {
+        display: "flex",
+        flex: 1,
+        overflow: "hidden",
+        position: "relative",
+    },
+    canvasContainer: {
+        flex: 1,
+        position: "relative",
+        overflow: "hidden",
+    },
+    canvasUI: {
+        width: "100%",
+        height: "100%",
+        outline: "none",
+    },
+    canvas2D: {
+        display: "none",
+    },
+    canvas3D: {
+        display: "none",
+    },
+    sidebarLeft: {
+        display: "flex",
+        flexDirection: "column",
+        position: "absolute",
+        left: tokens.spacingHorizontalM,
+        top: tokens.spacingVerticalM,
+    },
+    sidebarRight: {
+        display: "flex",
+        flexDirection: "column",
+        position: "absolute",
+        right: tokens.spacingHorizontalM,
+        top: tokens.spacingVerticalM,
+    },
+    toolSettingsContainer: {
+        position: "absolute",
+        left: tokens.spacingHorizontalM,
+        bottom: tokens.spacingVerticalM,
+        backgroundColor: tokens.colorNeutralBackground1,
+        borderRadius: tokens.borderRadiusMedium,
+        padding: tokens.spacingVerticalS,
+        boxShadow: tokens.shadow8,
+    },
+});
+const PREVIEW_UPDATE_DELAY_MS = 160;
+/**
+ * Main texture editor component
+ * @param props - The texture editor properties
+ * @returns The texture editor component
+ */
+const TextureEditor = (props) => {
+    const { texture, toolProviders = [], window: editorWindow, onUpdate } = props;
+    const classes = useStyles$4();
+    // Canvas refs
+    const uiCanvasRef = useRef(null);
+    const canvas2DRef = useRef(null);
+    const canvas3DRef = useRef(null);
+    const timerRef = useRef(null);
+    const canvasManagerRef = useRef(null);
+    // State
+    const [activeToolIndex, setActiveToolIndex] = useState(-1);
+    const [metadata, setMetadataState] = useState({
+        color: "#ffffff",
+        alpha: 1,
+        select: {
+            x1: -1,
+            y1: -1,
+            x2: -1,
+            y2: -1,
+        },
+    });
+    const [channels, setChannels] = useState(() => {
+        const baseChannels = [
+            { name: "Red", visible: true, editable: true, id: "R" },
+            { name: "Green", visible: true, editable: true, id: "G" },
+            { name: "Blue", visible: true, editable: true, id: "B" },
+        ];
+        baseChannels.push({
+            name: texture.isCube ? "Display" : "Alpha",
+            visible: true,
+            editable: true,
+            id: "A",
+        });
+        return baseChannels;
+    });
+    const [pixelData, setPixelData] = useState({});
+    const [face, setFace] = useState(0);
+    const [mipLevel, setMipLevel] = useState(0);
+    const [size, setSize] = useState(texture.getSize());
+    // Callbacks
+    const textureDidUpdate = useCallback(() => {
+        if (timerRef.current != null) {
+            window.clearTimeout(timerRef.current);
+        }
+        timerRef.current = window.setTimeout(() => {
+            onUpdate?.();
+            timerRef.current = null;
+        }, PREVIEW_UPDATE_DELAY_MS);
+    }, [onUpdate]);
+    const setMetadata = useCallback((newMetadata) => {
+        setMetadataState((prev) => {
+            const data = { ...prev, ...newMetadata };
+            if (canvasManagerRef.current) {
+                canvasManagerRef.current.metadata = data;
+            }
+            return data;
+        });
+    }, []);
+    const getToolParameters = () => {
+        const manager = canvasManagerRef.current;
+        return {
+            scene: manager.scene,
+            canvas2D: manager.canvas2D,
+            scene3D: manager.scene3D,
+            size: manager.size,
+            updateTexture: () => void manager.updateTexture(),
+            // eslint-disable-next-line @typescript-eslint/promise-function-async
+            startPainting: () => manager.startPainting(),
+            stopPainting: () => manager.stopPainting(),
+            updatePainting: () => manager.updatePainting(),
+            metadata,
+            setMetadata,
+            getMouseCoordinates: (pointerInfo) => manager.getMouseCoordinates(pointerInfo),
+            interactionEnabled: () => manager.toolInteractionEnabled(),
+        };
+    };
+    const getToolParametersRef = useRef(getToolParameters);
+    getToolParametersRef.current = getToolParameters;
+    const tools = useMemo(() => toolProviders?.map((provider) => provider.getTool({ getParameters: () => getToolParametersRef.current() })), [toolProviders]);
+    const changeTool = useCallback((index) => {
+        if (canvasManagerRef.current) {
+            if (index !== -1 && tools[index]) {
+                canvasManagerRef.current.tool = {
+                    is3D: toolProviders[index].is3D ?? false,
+                    activate: () => tools[index].activate(),
+                    deactivate: () => tools[index].deactivate(),
+                    reset: () => tools[index].reset?.(),
+                };
+            }
+            else {
+                canvasManagerRef.current.tool = null;
+            }
+        }
+        setActiveToolIndex(index);
+    }, [toolProviders, tools]);
+    const saveTexture = useCallback(() => {
+        canvasManagerRef.current?.saveTexture();
+    }, []);
+    const resetTexture = useCallback(() => {
+        canvasManagerRef.current?.reset();
+    }, []);
+    const resizeTexture = useCallback((width, height) => {
+        void canvasManagerRef.current?.resize({ width, height });
+    }, []);
+    const uploadTexture = useCallback((file) => {
+        canvasManagerRef.current?.upload(file);
+    }, []);
+    // Initialize canvas manager
+    useEffect(() => {
+        if (!uiCanvasRef.current || !canvas2DRef.current || !canvas3DRef.current) {
+            return;
+        }
+        const manager = new TextureCanvasManager(texture, editorWindow ?? uiCanvasRef.current.ownerDocument.defaultView ?? window, uiCanvasRef.current, canvas2DRef.current, canvas3DRef.current, setPixelData, metadata, textureDidUpdate, setMetadata, setMipLevel);
+        canvasManagerRef.current = manager;
+        setSize(manager.size);
+        return () => {
+            manager.dispose();
+            canvasManagerRef.current = null;
+        };
+    }, [texture, editorWindow]);
+    // Update canvas manager when channels/face/mipLevel change
+    useEffect(() => {
+        if (canvasManagerRef.current) {
+            canvasManagerRef.current.channels = [...channels];
+        }
+    }, [channels]);
+    useEffect(() => {
+        if (canvasManagerRef.current) {
+            canvasManagerRef.current.face = face;
+        }
+    }, [face]);
+    useEffect(() => {
+        if (canvasManagerRef.current) {
+            canvasManagerRef.current.mipLevel = mipLevel;
+        }
+    }, [mipLevel]);
+    // Compute cursor style
+    let cursor = "default";
+    if (canvasManagerRef.current && !canvasManagerRef.current.toolInteractionEnabled()) {
+        cursor = "grab";
+    }
+    else if (toolProviders[activeToolIndex]?.cursor) {
+        cursor = toolProviders[activeToolIndex].cursor;
+    }
+    const hasAlpha = texture.textureFormat === -1 || texture.textureFormat === Constants.TEXTUREFORMAT_RGBA;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const CurrentToolSettings = useMemo(() => tools[activeToolIndex]?.settingsComponent, [tools, activeToolIndex]);
+    return (jsxs("div", { className: classes.textureEditor, children: [jsx(PropertiesBar, { texture: texture, saveTexture: saveTexture, pixelData: pixelData, face: face, setFace: setFace, resetTexture: resetTexture, resizeTexture: resizeTexture, uploadTexture: uploadTexture, mipLevel: mipLevel, setMipLevel: setMipLevel, size: canvasManagerRef.current?.size || size }), jsxs("div", { className: classes.mainContent, children: [jsxs("div", { className: classes.canvasContainer, style: { cursor }, children: [jsx("canvas", { ref: uiCanvasRef, className: classes.canvasUI, tabIndex: 1 }), jsx("canvas", { ref: canvas2DRef, className: classes.canvas2D }), jsx("canvas", { ref: canvas3DRef, className: classes.canvas3D })] }), CurrentToolSettings && (jsx("div", { className: classes.toolSettingsContainer, children: jsx(CurrentToolSettings, {}) })), !texture.isCube && (jsx("div", { className: classes.sidebarLeft, children: jsx(ToolBar, { tools: toolProviders, activeToolIndex: activeToolIndex, changeTool: changeTool, metadata: metadata, setMetadata: setMetadata, hasAlpha: hasAlpha }) })), jsx("div", { className: classes.sidebarRight, children: jsx(ChannelsBar, { channels: channels, setChannels: setChannels }) })] }), jsx(StatusBar, { texture: texture, mipLevel: mipLevel })] }));
+};
+
+const useStyles$3 = makeStyles({
+    settingsContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+        minWidth: "150px",
+    },
+    sliderRow: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalXS,
+    },
+    icon: {
+        rotate: "-90deg",
+    },
+});
+const Contrast = {
+    name: "Contrast/Exposure",
+    order: 500,
+    icon: () => {
+        const classes = useStyles$3();
+        return jsx(CircleHalfFillRegular, { className: classes.icon });
+    },
+    is3D: true,
+    getTool: (context) => {
+        let _contrast = 0;
+        let _exposure = 0;
+        const stateChangedObservable = new Observable();
+        /**
+         * Maps slider values to post processing values using an exponential regression
+         * @param sliderValue - The slider value
+         * @returns exposure value
+         */
+        function computeExposure(sliderValue) {
+            if (sliderValue <= 0) {
+                return 1 - -sliderValue / 100;
+            }
+            else {
+                return Math.pow(1.05698, sliderValue) + 0.0000392163 * sliderValue;
+            }
+        }
+        /**
+         * Maps slider values to post processing values using an exponential regression
+         * @param sliderValue - The slider value
+         * @returns contrast value
+         */
+        function computeContrast(sliderValue) {
+            if (sliderValue <= 0) {
+                return 1 - -sliderValue / 100;
+            }
+            else {
+                return Math.pow(1.05698, sliderValue) + 0.0000392163 * sliderValue;
+            }
+        }
+        function setExposure(exposure) {
+            _exposure = exposure;
+            stateChangedObservable.notifyObservers();
+            const { scene3D, updateTexture } = context.getParameters();
+            scene3D.imageProcessingConfiguration.isEnabled = true;
+            scene3D.imageProcessingConfiguration.exposure = computeExposure(_exposure);
+            updateTexture();
+        }
+        function setContrast(contrast) {
+            _contrast = contrast;
+            stateChangedObservable.notifyObservers();
+            const { scene3D, updateTexture } = context.getParameters();
+            scene3D.imageProcessingConfiguration.isEnabled = true;
+            scene3D.imageProcessingConfiguration.contrast = computeContrast(_contrast);
+            updateTexture();
+        }
+        return {
+            activate: () => {
+                _contrast = 0;
+                _exposure = 0;
+                setExposure(_exposure);
+                setContrast(_contrast);
+            },
+            deactivate: () => {
+                // No cleanup needed
+            },
+            reset: () => {
+                setExposure(0);
+                setContrast(0);
+            },
+            settingsComponent: () => {
+                const classes = useStyles$3();
+                const [contrast, exposure] = useObservableState(useCallback(() => [_contrast, _exposure], []), stateChangedObservable);
+                const handleContrastChange = (_, data) => {
+                    setContrast(data.value);
+                };
+                const handleExposureChange = (_, data) => {
+                    setExposure(data.value);
+                };
+                return (jsxs("div", { className: classes.settingsContainer, children: [jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Contrast: ", contrast] }), jsx(Slider, { min: -100, max: 100, value: contrast, onChange: handleContrastChange })] }), jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Exposure: ", exposure] }), jsx(Slider, { min: -100, max: 100, value: exposure, onChange: handleExposureChange })] })] }));
+            },
+        };
+    },
+};
+
+/**
+ * Eyedropper tool for picking colors from the texture
+ */
+const Eyedropper = {
+    name: "Eyedropper",
+    order: 300,
+    icon: () => jsx(EyedropperRegular, {}),
+    cursor: "crosshair",
+    getTool: (context) => {
+        let pointerObserver = null;
+        let isPicking = false;
+        function pick(pointerInfo) {
+            const { canvas2D, setMetadata, getMouseCoordinates } = context.getParameters();
+            const ctx = canvas2D.getContext("2d");
+            const { x, y } = getMouseCoordinates(pointerInfo);
+            const pixel = ctx.getImageData(x, y, 1, 1).data;
+            setMetadata({
+                color: Color3.FromInts(pixel[0], pixel[1], pixel[2]).toHexString(),
+                alpha: pixel[3] / 255,
+            });
+        }
+        return {
+            activate: () => {
+                pointerObserver = context.getParameters().scene.onPointerObservable.add((pointerInfo) => {
+                    if (pointerInfo.pickInfo?.hit) {
+                        if (pointerInfo.type === PointerEventTypes.POINTERDOWN && pointerInfo.event.buttons === 1 && context.getParameters().interactionEnabled()) {
+                            isPicking = true;
+                            pick(pointerInfo);
+                        }
+                        if (isPicking) {
+                            if (pointerInfo.event.buttons !== 1 || !context.getParameters().interactionEnabled()) {
+                                isPicking = false;
+                            }
+                            else {
+                                pick(pointerInfo);
+                            }
+                        }
+                    }
+                });
+                isPicking = false;
+            },
+            deactivate: () => {
+                pointerObserver?.remove();
+            },
+        };
+    },
+};
+
+/**
+ * Floodfill tool for filling regions with a solid color
+ */
+const Floodfill = {
+    name: "Floodfill",
+    order: 400,
+    icon: () => jsx(PaintBucketRegular, {}),
+    cursor: "crosshair",
+    getTool: (context) => {
+        let pointerObserver = null;
+        async function fillAsync() {
+            const { metadata, startPainting, updatePainting, stopPainting } = context.getParameters();
+            const ctx = await startPainting();
+            ctx.fillStyle = metadata.color;
+            ctx.globalAlpha = metadata.alpha;
+            ctx.globalCompositeOperation = "copy";
+            ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            updatePainting();
+            stopPainting();
+        }
+        return {
+            activate: () => {
+                pointerObserver = context.getParameters().scene.onPointerObservable.add((pointerInfo) => {
+                    if (pointerInfo.type === PointerEventTypes.POINTERDOWN &&
+                        pointerInfo.event.buttons === 1 &&
+                        context.getParameters().interactionEnabled() &&
+                        pointerInfo.pickInfo?.hit) {
+                        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                        fillAsync();
+                    }
+                });
+            },
+            deactivate: () => {
+                pointerObserver?.remove();
+            },
+        };
+    },
+};
+
+const useStyles$2 = makeStyles({
+    settingsContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalS,
+        minWidth: "150px",
+    },
+    sliderRow: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacingVerticalXS,
+    },
+});
+const Paintbrush = {
+    name: "Paintbrush",
+    order: 200,
+    icon: () => jsx(InkStrokeRegular, {}),
+    cursor: "crosshair",
+    getTool: (context) => {
+        let pointerObserver = null;
+        let isPainting = false;
+        let _width = 15;
+        let mousePos = null;
+        let ctx = null;
+        let circleCanvas = null;
+        const stateChangedObservable = new Observable();
+        function setWidth(width) {
+            _width = width;
+            stateChangedObservable.notifyObservers();
+        }
+        function paint(pointerInfo) {
+            if (ctx && circleCanvas) {
+                const { getMouseCoordinates, metadata, updatePainting } = context.getParameters();
+                let { x, y } = getMouseCoordinates(pointerInfo);
+                if (metadata.select.x1 !== -1) {
+                    x -= metadata.select.x1;
+                    y -= metadata.select.y1;
+                }
+                let numSteps, stepVector;
+                stepVector = new Vector2();
+                if (mousePos === null) {
+                    mousePos = new Vector2(x, y);
+                    numSteps = 1;
+                }
+                else {
+                    const maxDistance = _width / 4;
+                    const diffVector = new Vector2(x - mousePos.x, y - mousePos.y);
+                    numSteps = Math.ceil(diffVector.length() / maxDistance);
+                    const trueDistance = diffVector.length() / numSteps;
+                    stepVector = diffVector.normalize().multiplyByFloats(trueDistance, trueDistance);
+                }
+                const paintVector = mousePos.clone();
+                for (let stepCount = 0; stepCount < numSteps; stepCount++) {
+                    ctx.globalAlpha = 1.0;
+                    ctx.globalCompositeOperation = "destination-out";
+                    ctx.drawImage(circleCanvas, Math.ceil(paintVector.x - _width / 2), Math.ceil(paintVector.y - _width / 2));
+                    ctx.globalAlpha = metadata.alpha;
+                    ctx.globalCompositeOperation = "source-over";
+                    ctx.drawImage(circleCanvas, Math.ceil(paintVector.x - _width / 2), Math.ceil(paintVector.y - _width / 2));
+                    paintVector.addInPlace(stepVector);
+                }
+                updatePainting();
+                mousePos = new Vector2(x, y);
+            }
+        }
+        return {
+            activate: () => {
+                const { scene } = context.getParameters();
+                pointerObserver = scene.onPointerObservable.add(async (pointerInfo) => {
+                    const { startPainting, stopPainting, metadata } = context.getParameters();
+                    if (!isPainting) {
+                        if (pointerInfo.type === PointerEventTypes.POINTERDOWN &&
+                            pointerInfo.event.buttons === 1 &&
+                            context.getParameters().interactionEnabled() &&
+                            pointerInfo.pickInfo?.hit) {
+                            isPainting = true;
+                            circleCanvas = document.createElement("canvas");
+                            circleCanvas.width = _width;
+                            circleCanvas.height = _width;
+                            const circleCtx = circleCanvas.getContext("2d");
+                            circleCtx.imageSmoothingEnabled = false;
+                            const pixels = new Array(4 * _width * _width);
+                            const dis = (_width * _width) / 4;
+                            const rgb = Color3.FromHexString(metadata.color);
+                            const r = Math.floor(rgb.r * 255);
+                            const g = Math.floor(rgb.g * 255);
+                            const b = Math.floor(rgb.b * 255);
+                            let idx = 0;
+                            const x1 = -Math.floor(_width / 2), x2 = Math.ceil(_width / 2);
+                            const y1 = -Math.floor(_width / 2), y2 = Math.ceil(_width / 2);
+                            for (let y = y1; y < y2; y++) {
+                                for (let x = x1; x < x2; x++) {
+                                    pixels[idx++] = r;
+                                    pixels[idx++] = g;
+                                    pixels[idx++] = b;
+                                    pixels[idx++] = x * x + y * y <= dis ? 255 : 0;
+                                }
+                            }
+                            circleCtx.putImageData(new ImageData(Uint8ClampedArray.from(pixels), _width, _width), 0, 0);
+                            ctx = await startPainting();
+                            paint(pointerInfo);
+                        }
+                    }
+                    else {
+                        if (pointerInfo.event.buttons !== 1 || !context.getParameters().interactionEnabled()) {
+                            isPainting = false;
+                            circleCanvas?.parentNode?.removeChild(circleCanvas);
+                            stopPainting();
+                            mousePos = null;
+                        }
+                        else {
+                            if (pointerInfo.pickInfo?.hit && pointerInfo.type === PointerEventTypes.POINTERMOVE) {
+                                paint(pointerInfo);
+                            }
+                        }
+                    }
+                });
+                isPainting = false;
+            },
+            deactivate: () => {
+                isPainting = false;
+                pointerObserver?.remove();
+            },
+            settingsComponent: () => {
+                const classes = useStyles$2();
+                const width = useObservableState(useCallback(() => _width, []), stateChangedObservable);
+                const handleWidthChange = (_, data) => {
+                    setWidth(data.value);
+                };
+                return (jsx("div", { className: classes.settingsContainer, children: jsxs("div", { className: classes.sliderRow, children: [jsxs(Label, { children: ["Size: ", width] }), jsx(Slider, { min: 1, max: 100, value: width, onChange: handleWidthChange })] }) }));
+            },
+        };
+    },
+};
+
+/**
+ * Rectangle selection tool for selecting regions of the texture
+ */
+const RectangleSelect = {
+    name: "Rectangle Select",
+    order: 100,
+    icon: () => jsx(SelectObjectRegular, {}),
+    cursor: "crosshair",
+    getTool: (context) => {
+        let pointerObserver = null;
+        let isSelecting = false;
+        let xStart = -1;
+        let yStart = -1;
+        return {
+            activate: () => {
+                const { scene } = context.getParameters();
+                pointerObserver = scene.onPointerObservable.add((pointerInfo) => {
+                    const { getMouseCoordinates, setMetadata, metadata } = context.getParameters();
+                    if (!isSelecting) {
+                        if (pointerInfo.type === PointerEventTypes.POINTERDOWN &&
+                            pointerInfo &&
+                            pointerInfo.event.buttons === 1 &&
+                            context.getParameters().interactionEnabled() &&
+                            pointerInfo.pickInfo?.hit) {
+                            isSelecting = true;
+                            const { x, y } = ({ x: xStart, y: yStart } = getMouseCoordinates(pointerInfo));
+                            setMetadata({
+                                select: {
+                                    x1: x,
+                                    y1: y,
+                                    x2: x,
+                                    y2: y,
+                                },
+                            });
+                        }
+                    }
+                    else {
+                        if (pointerInfo.event.buttons !== 1 || !context.getParameters().interactionEnabled()) {
+                            isSelecting = false;
+                            if (metadata.select.x1 === metadata.select.x2 || metadata.select.y1 === metadata.select.y2) {
+                                setMetadata({
+                                    select: {
+                                        x1: -1,
+                                        y1: -1,
+                                        x2: -1,
+                                        y2: -1,
+                                    },
+                                });
+                            }
+                        }
+                        else {
+                            if (pointerInfo.pickInfo?.hit && pointerInfo.type === PointerEventTypes.POINTERMOVE) {
+                                if (pointerInfo.type === PointerEventTypes.POINTERMOVE && isSelecting) {
+                                    const { x, y } = getMouseCoordinates(pointerInfo);
+                                    setMetadata({
+                                        select: {
+                                            x1: Math.min(x, xStart),
+                                            y1: Math.min(y, yStart),
+                                            x2: Math.max(x, xStart),
+                                            y2: Math.max(y, yStart),
+                                        },
+                                    });
+                                }
+                            }
+                        }
+                    }
+                });
+            },
+            deactivate() {
+                isSelecting = false;
+                pointerObserver?.remove();
+            },
+        };
+    },
+};
+
+const TextureEditorServiceIdentity = Symbol("TextureEditorService");
+const TextureEditorServiceDefinition = {
+    friendlyName: "Texture Editor",
+    produces: [TextureEditorServiceIdentity],
+    factory: () => {
+        const toolsCollection = new ObservableCollection();
+        // Add the default tools.
+        toolsCollection.add(RectangleSelect);
+        toolsCollection.add(Paintbrush);
+        toolsCollection.add(Eyedropper);
+        toolsCollection.add(Floodfill);
+        toolsCollection.add(Contrast);
+        return {
+            addTool: (toolProvider) => toolsCollection.add(toolProvider),
+            component: (props) => {
+                const tools = useOrderedObservableCollection(toolsCollection);
+                return jsx(TextureEditor, { ...props, toolProviders: tools });
+            },
+        };
+    },
+};
+
+// Don't use instanceof in this case as we don't want to bring in the gui package just to check if the entity is an AdvancedDynamicTexture.
+function IsAdvancedDynamicTexture$1(entity) {
+    return entity?.getClassName?.() === "AdvancedDynamicTexture";
+}
+const TexturePropertiesServiceDefinition = {
+    friendlyName: "Texture Properties",
+    consumes: [PropertiesServiceIdentity, SettingsContextIdentity, TextureEditorServiceIdentity],
+    factory: (propertiesService, settingsContext, textureEditorService) => {
         const baseTextureContentRegistration = propertiesService.addSectionContent({
             key: "Base Texture Properties",
             predicate: (entity) => entity instanceof BaseTexture,
             content: [
                 {
                     section: "Preview",
-                    component: ({ context }) => jsx(BaseTexturePreviewProperties, { texture: context }),
+                    component: ({ context }) => jsx(BaseTexturePreviewProperties, { texture: context, textureEditor: textureEditorService.component }),
                 },
                 {
                     section: "General",
@@ -9832,6 +11583,8 @@ function ShowInspector(scene, options = {}) {
                 AnimationGroupPropertiesServiceDefinition,
                 MetadataPropertiesServiceDefinition,
                 AtmospherePropertiesServiceDefinition,
+                // Texture editor and related services.
+                TextureEditorServiceDefinition,
                 // Debug pane tab and related services.
                 DebugServiceDefinition,
                 // Stats pane tab and related services.
@@ -10666,5 +12419,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-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
+export { useSidePaneDockOverrides as $, Accordion as A, ButtonLine as B, Collapse as C, DebugServiceIdentity as D, ExtensibleAccordion as E, FileUploadLine as F, useVector3Property as G, useColor3Property as H, Inspector as I, useColor4Property as J, useQuaternionProperty as K, Link as L, MakeLazyComponent as M, NumberDropdownPropertyLine as N, MakePropertyHook as O, Popover as P, useInterceptObservable as Q, useEventfulState as R, SwitchPropertyLine as S, ToolsServiceIdentity as T, useObservableCollection as U, Vector3PropertyLine as V, useOrderedObservableCollection as W, usePollingObservable as X, useResource as Y, useAsyncResource as Z, useCompactMode as _, SyncedSliderPropertyLine as a, useAngleConverters as a0, MakeTeachingMoment as a1, MakeDialogTeachingMoment as a2, InterceptFunction as a3, GetPropertyDescriptor as a4, IsPropertyReadonly as a5, InterceptProperty as a6, ObservableCollection as a7, ConstructorFactory as a8, SelectionServiceIdentity as a9, TextInput as aA, ToggleButton as aB, ChildWindow as aC, FactorGradientList as aD, Color3GradientList as aE, Color4GradientList as aF, Pane as aG, BooleanBadgePropertyLine as aH, Color3PropertyLine as aI, Color4PropertyLine as aJ, HexPropertyLine as aK, NumberInputPropertyLine as aL, LinkPropertyLine as aM, PropertyLine as aN, LineContainer as aO, PlaceholderPropertyLine as aP, StringifiedPropertyLine as aQ, TextAreaPropertyLine as aR, TextPropertyLine as aS, RotationVectorPropertyLine as aT, QuaternionPropertyLine as aU, Vector2PropertyLine as aV, Vector4PropertyLine as aW, SelectionServiceDefinition as aa, SettingsContextIdentity as ab, ShowInspector as ac, Checkbox as ad, ColorPickerPopup as ae, InputHexField as af, InputHsvField as ag, ComboBox as ah, DraggableLine as ai, Dropdown as aj, NumberDropdown as ak, StringDropdown as al, FactorGradientComponent as am, Color3GradientComponent as an, Color4GradientComponent as ao, ColorStepGradientComponent as ap, InfoLabel as aq, List as ar, MessageBar as as, PositionedPopover as at, SearchBar as au, SearchBox as av, SpinButton as aw, Switch as ax, SyncedSliderInput as ay, Textarea 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, Theme as x, BuiltInsExtensionFeed as y, useProperty as z };
+//# sourceMappingURL=index-2Bq-qBwV.js.map