@babylonjs/inspector 8.31.0-preview → 8.31.1-preview

package/lib/index.js

@@ -3,9 +3,9 @@ import { useMemo, useEffect, useState, useRef, useCallback, forwardRef, createCo
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, mergeClasses, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Toolbar as Toolbar$1, Tooltip, ToolbarRadioButton, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, TabList, Tab, DialogContent, SplitButton, MenuItemRadio, DialogActions, List as List$1, ListItem, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Badge, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
+import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, mergeClasses, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, createLightTheme, createDarkTheme, FluentProvider, Toolbar as Toolbar$1, Tooltip, ToolbarRadioButton, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Switch as Switch$1, PresenceBadge, Spinner, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, TabList, Tab, DialogContent, SplitButton, MenuItemRadio, DialogActions, List as List$1, ListItem, Badge, useId, Input, SpinButton as SpinButton$1, Slider, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Dropdown as Dropdown$1, Option, Popover, PopoverTrigger, ColorSwatch, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, Textarea as Textarea$1, ToolbarButton, useComboboxFilter, Combobox, Field } from '@fluentui/react-components';
 export { Link } from '@fluentui/react-components';
-import { ChevronCircleRight20Regular, ChevronCircleDown20Regular, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, 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, DeleteFilled } from '@fluentui/react-icons';
+import { ChevronCircleRight20Regular, ChevronCircleDown20Regular, CopyRegular, PanelLeftExpandRegular, PanelLeftContractRegular, PanelRightExpandRegular, PanelRightContractRegular, DocumentTextRegular, createFluentIcon, FilterRegular, GlobeRegular, ArrowExpandAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, DataBarHorizontalRegular, WrenchRegular, AppsAddInRegular, DismissRegular, WeatherSunnyRegular, WeatherMoonRegular, ErrorCircleRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, SaveRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, 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, DeleteFilled } from '@fluentui/react-icons';
 import { Collapse as Collapse$1 } from '@fluentui/react-motion-components-preview';
 import '@babylonjs/core/Misc/typeStore.js';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
@@ -94,6 +94,7 @@ import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
 import { ImageProcessingConfiguration } from '@babylonjs/core/Materials/imageProcessingConfiguration.js';
 import { Skeleton } from '@babylonjs/core/Bones/skeleton.js';
 import { Sprite } from '@babylonjs/core/Sprites/sprite.js';
+import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager.js';
 import { 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';
@@ -699,15 +700,53 @@ function HandleKeyDown(event) {
         event.preventDefault();
     }
 }
+/**
+ * Fluent's CalculatePrecision function
+ * https://github.com/microsoft/fluentui/blob/dcbf775d37938eacffa37922fc0b43a3cdd5753f/packages/utilities/src/math.ts#L91C1
+ *
+ * Calculates a number's precision based on the number of trailing
+ * zeros if the number does not have a decimal indicated by a negative
+ * precision. Otherwise, it calculates the number of digits after
+ * the decimal point indicated by a positive precision.
+ *
+ * @param value - the value to determine the precision of
+ * @returns the calculated precision
+ */
+function CalculatePrecision(value) {
+    /**
+     * Group 1:
+     * [1-9]([0]+$) matches trailing zeros
+     * Group 2:
+     * \.([0-9]*) matches all digits after a decimal point.
+     */ const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value));
+    if (!groups) {
+        return 0;
+    }
+    if (groups[1]) {
+        return -groups[1].length;
+    }
+    if (groups[2]) {
+        return groups[2].length;
+    }
+    return 0;
+}
+const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/);
+function ColorHexValidatorFn(val) {
+    return val != "" && HEX_REGEX.test(val);
+}
 
 const usePropertyLineStyles = makeStyles({
     container: {
         width: "100%",
         display: "flex",
         flexDirection: "column", // Stack line + expanded content
+        minHeight: CustomTokens.lineHeight,
+        boxSizing: "border-box",
+        justifyContent: "center",
+        paddingTop: tokens.spacingVerticalXXS,
+        paddingBottom: tokens.spacingVerticalXXS,
     },
     baseLine: {
-        height: CustomTokens.lineHeight,
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-start",
@@ -741,6 +780,9 @@ const usePropertyLineStyles = makeStyles({
     copy: {
         marginRight: CustomTokens.rightAlignOffset, // Accounts for the padding baked into fluent button / ensures propertyLine looks visually aligned at the right
     },
+    expandedContentDiv: {
+        overflow: "hidden",
+    },
 });
 /**
  * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section.
@@ -778,7 +820,7 @@ const PropertyLine = forwardRef((props, ref) => {
                                         cachedVal.current = props.value;
                                         props.onChange(null);
                                     }
-                                }, title: "Toggle null state" })), processedChildren, onCopy && !disableCopy && (jsx(Button, { className: classes.copy, title: "Copy to clipboard", appearance: "transparent", icon: CopyRegular, onClick: () => copyCommandToClipboard(onCopy()) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { children: expandedContent }) }))] }));
+                                }, title: "Toggle null state" })), processedChildren, onCopy && !disableCopy && (jsx(Button, { className: classes.copy, title: "Copy to clipboard", appearance: "transparent", icon: CopyRegular, onClick: () => copyCommandToClipboard(onCopy()) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: classes.expandedContentDiv, children: expandedContent }) }))] }));
 });
 const LineContainer = forwardRef((props, ref) => {
     const classes = usePropertyLineStyles();
@@ -813,11 +855,11 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$g = makeStyles({
+const useStyles$i = makeStyles({
     accordion: {
         overflowX: "hidden",
         overflowY: "auto",
-        paddingTop: tokens.spacingVerticalM, // ensures the first section header has the same padding as the others (due to divider)
+        paddingBottom: tokens.spacingVerticalM, // bottom padding since there is no divider at the bottom
         display: "flex",
         flexDirection: "column",
         height: "100%",
@@ -834,12 +876,12 @@ const useStyles$g = makeStyles({
 });
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$g();
+    const classes = useStyles$i();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const Accordion = (props) => {
     Accordion.displayName = "Accordion";
-    const classes = useStyles$g();
+    const classes = useStyles$i();
     const { children, ...rest } = props;
     const validChildren = useMemo(() => {
         return (Children.map(children, (child) => {
@@ -880,8 +922,8 @@ const Accordion = (props) => {
             setOpenItems((prev) => prev.filter((item) => item !== data.value));
         }
     }, []);
-    return (jsx(Accordion$1, { className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...rest, children: validChildren.map((child) => {
-            return (jsxs(AccordionItem, { value: child.title, children: [jsx(AccordionHeader, { children: jsx(Subtitle2Stronger, { children: child.title }) }), jsx(AccordionPanel, { children: jsx("div", { className: classes.panelDiv, children: child.content }) }), jsx(Divider, { inset: true, className: classes.divider })] }, child.content.key));
+    return (jsx(Accordion$1, { className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...rest, children: validChildren.map((child, index) => {
+            return (jsxs(AccordionItem, { value: child.title, children: [jsx(AccordionHeader, { children: jsx(Subtitle2Stronger, { children: child.title }) }), jsx(AccordionPanel, { children: jsx("div", { className: classes.panelDiv, children: child.content }) }), index < validChildren.length - 1 && jsx(Divider, { inset: true, className: classes.divider })] }, child.content.key));
         }) }));
 };
 
@@ -889,7 +931,7 @@ function AsReadonlyArray(array) {
     return array;
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$f = makeStyles({
+const useStyles$h = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -898,7 +940,7 @@ const useStyles$f = makeStyles({
     },
 });
 function ExtensibleAccordion(props) {
-    const classes = useStyles$f();
+    const classes = useStyles$h();
     const { children, sections, sectionContent, context } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -986,7 +1028,7 @@ function ExtensibleAccordion(props) {
                 })] })) }));
 }
 
-const useStyles$e = makeStyles({
+const useStyles$g = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -999,12 +1041,12 @@ const useStyles$e = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$e();
+    const classes = useStyles$g();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$d = makeStyles({
+const useStyles$f = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -1015,7 +1057,7 @@ const useStyles$d = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$d();
+    const classes = useStyles$f();
     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 })] }) }));
 };
 
@@ -1302,13 +1344,13 @@ function ConstructorFactory(constructor) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$c = makeStyles({
+const useStyles$e = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$c();
+    const classes = useStyles$e();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -1409,7 +1451,7 @@ const Theme = (props) => {
 const RootComponentServiceIdentity = Symbol("RootComponent");
 const ShellServiceIdentity = Symbol("ShellService");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$b = makeStyles({
+const useStyles$d = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -1444,12 +1486,14 @@ const useStyles$b = makeStyles({
     barLeft: {
         marginRight: "auto",
         display: "flex",
+        alignItems: "center",
         flexDirection: "row",
         columnGap: tokens.spacingHorizontalSNudge,
     },
     barRight: {
         marginLeft: "auto",
         display: "flex",
+        alignItems: "center",
         flexDirection: "row-reverse",
         columnGap: tokens.spacingHorizontalSNudge,
     },
@@ -1554,7 +1598,7 @@ const useStyles$b = makeStyles({
     },
 });
 const PaneHeader = ({ title }) => {
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     if (!title) {
         return null;
     }
@@ -1562,7 +1606,7 @@ const PaneHeader = ({ title }) => {
 };
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const ToolbarItem = ({ location, alignment, id, component: Component, displayName: displayName, suppressTeachingMoment }) => {
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${location}/${alignment}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: displayName ?? "Extension", description: `The "${displayName ?? id}" extension can be accessed here.` }), jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: jsx(Component, {}) })] }));
@@ -1570,7 +1614,7 @@ const ToolbarItem = ({ location, alignment, id, component: Component, displayNam
 // TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
 // This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
 const Toolbar = ({ location, components }) => {
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     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, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { location: location, alignment: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
@@ -1580,7 +1624,7 @@ const SidePaneTab = (props) => {
     const { alignment, id, isSelected, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, suppressTeachingMoment, } = props;
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${alignment}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
     const tabClass = mergeClasses(classes.tab, isSelected ? undefined : classes.unselectedTab);
@@ -1593,7 +1637,7 @@ const SidePaneTab = (props) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(alignment, defaultWidth, minWidth, topPanes, bottomPanes, toolbarMode, topBarItems, bottomBarItems) {
-    const classes = useStyles$b();
+    const classes = useStyles$d();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(false);
@@ -1708,7 +1752,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
             const bottomRightPaneCollection = new ObservableCollection();
             const centralContentCollection = new ObservableCollection();
             const rootComponent = () => {
-                const classes = useStyles$b();
+                const classes = useStyles$d();
                 const topBarItems = useOrderedObservableCollection(topBarItemCollection);
                 const bottomBarItems = useOrderedObservableCollection(bottomBarItemCollection);
                 const topLeftPanes = useOrderedObservableCollection(topLeftPaneCollection);
@@ -1942,7 +1986,7 @@ function ExpandOrCollapseAll(treeItem, open, openItems) {
     TraverseGraph([treeItem], (treeItem) => treeItem.children, (treeItem) => addOrRemove(treeItem.type === "entity" ? treeItem.entity.uniqueId : treeItem.sectionName));
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$a = makeStyles({
+const useStyles$c = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -1961,6 +2005,16 @@ const useStyles$a = makeStyles({
     sceneTreeItemLayout: {
         padding: 0,
     },
+    treeItemLayoutAside: {
+        gap: 0,
+        paddingLeft: tokens.spacingHorizontalS,
+        paddingRight: tokens.spacingHorizontalS,
+    },
+    treeItemLayoutMain: {
+        flex: "1 1 0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
 });
 const ActionCommand = (props) => {
     const { command } = props;
@@ -1996,7 +2050,7 @@ function MakeCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$a();
+    const classes = useStyles$c();
     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: classes.sceneTreeItemLayout, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
@@ -2007,6 +2061,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
+    const classes = useStyles$c();
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
         const displayInfo = entityItem.getDisplayInfo();
@@ -2087,15 +2142,15 @@ const EntityTreeItem = (props) => {
                     // Disable manual expand/collapse when a filter is active.
                     itemType: !isFiltering && hasChildren ? "branch" : "leaf", parentValue: entityItem.parent.type === "section" ? entityItem.parent.sectionName : entityItem.entity.uniqueId, "aria-level": entityItem.depth, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
                             // Match the gap and padding of the actions.
-                            style: { gap: 0, paddingLeft: tokens.spacingHorizontalS, paddingRight: tokens.spacingHorizontalS },
+                            className: classes.treeItemLayoutAside,
                             children: aside,
                         }, main: {
                             // Prevent the "main" content (the Body1 below) from growing too large and pushing the actions/aside out of view.
-                            style: { flex: "1 1 0", overflow: "hidden", textOverflow: "ellipsis" },
+                            className: classes.treeItemLayoutMain,
                         }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, entityItem.entity.uniqueId) }), jsx(MenuPopover, { hidden: !hasChildren, children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$a();
+    const classes = useStyles$c();
     const { sections, commandProviders, scene, selectedEntity } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -2840,14 +2895,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value }) }));
 };
 
-const useStyles$9 = makeStyles({
+const useStyles$b = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$9();
+    const classes = useStyles$b();
     const scene = props.context;
     const engine = scene.getEngine();
     const fps = useObservableState(() => Math.round(engine.getFps()), engine.onBeginFrameObservable);
@@ -3018,19 +3073,19 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         name: "Export Tools",
         description: "Adds new features to enable exporting Babylon assets such as .gltf, .glb, .babylon, and more.",
         keywords: ["export", "gltf", "glb", "babylon", "exporter", "tools"],
-        getExtensionModuleAsync: async () => await import('./exportService-Cu9CXW_A.js'),
+        getExtensionModuleAsync: async () => await import('./exportService-CFGdt7eg.js'),
     },
     {
         name: "Capture Tools",
         description: "Adds new features to enable capturing screenshots, GIFs, videos, and more.",
         keywords: ["capture", "screenshot", "gif", "video", "tools"],
-        getExtensionModuleAsync: async () => await import('./captureService-CuhjVz1y.js'),
+        getExtensionModuleAsync: async () => await import('./captureService-EFE-C_G5.js'),
     },
     {
         name: "Import Tools",
         description: "Adds new features related to importing Babylon assets.",
         keywords: ["import", "tools"],
-        getExtensionModuleAsync: async () => await import('./importService-BETG4FuQ.js'),
+        getExtensionModuleAsync: async () => await import('./importService-DEy_vKyx.js'),
     },
 ]);
 
@@ -3451,7 +3506,7 @@ class ServiceContainer {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$8 = makeStyles({
+const useStyles$a = makeStyles({
     extensionButton: {},
     extensionsDialogSurface: {
         height: "auto",
@@ -3496,7 +3551,7 @@ const useStyles$8 = makeStyles({
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const useTeachingMoment = MakePopoverTeachingMoment("Extensions");
 const ExtensionDetails = memo((props) => {
-    const classes = useStyles$8();
+    const classes = useStyles$a();
     const [canInstall, setCanInstall] = useState(false);
     const [canUninstall, setCanUninstall] = useState(false);
     const [isStateChanging, setIsStateChanging] = useState(false);
@@ -3540,7 +3595,7 @@ const ExtensionListServiceDefinition = {
             suppressTeachingMoment: true,
             order: -200,
             component: () => {
-                const classes = useStyles$8();
+                const classes = useStyles$a();
                 const [selectedTab, setSelectedTab] = useState("available");
                 const extensionManager = useExtensionManager();
                 const [extensions, setExtensions] = useState([]);
@@ -3569,7 +3624,7 @@ const ExtensionListServiceDefinition = {
     },
 };
 
-const useStyles$7 = makeStyles({
+const useStyles$9 = makeStyles({
     themeButton: {
         margin: `${tokens.spacingVerticalXXS} 0`,
     },
@@ -3588,7 +3643,7 @@ const ThemeSelectorServiceDefinition = {
             suppressTeachingMoment: true,
             order: -300,
             component: () => {
-                const classes = useStyles$7();
+                const classes = useStyles$9();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -3606,7 +3661,7 @@ const ThemeSelectorServiceDefinition = {
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const useStyles$6 = makeStyles({
+const useStyles$8 = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -3642,7 +3697,7 @@ function MakeModularTool(options) {
         SetThemeMode(themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$6();
+        const classes = useStyles$8();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -3845,7 +3900,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$5 = makeStyles({
+const useStyles$7 = makeStyles({
     coordinatesModeButton: {
         margin: `0 ${tokens.spacingVerticalXS}`,
     },
@@ -3855,7 +3910,7 @@ const useStyles$5 = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { scene, entity, gizmoService } = props;
-    const classes = useStyles$5();
+    const classes = useStyles$7();
     const gizmoManager = useResource(useCallback(() => {
         const utilityLayerRef = gizmoService.getUtilityLayer(scene);
         const keepDepthUtilityLayerRef = gizmoService.getUtilityLayer(scene, "keepDepth");
@@ -3970,6 +4025,32 @@ const GizmoToolbarServiceDefinition = {
     },
 };
 
+const useStyles$6 = makeStyles({
+    badge: {
+        margin: tokens.spacingHorizontalXXS,
+        fontFamily: "monospace",
+    },
+});
+const MiniStatsServiceDefinition = {
+    friendlyName: "Mini Stats",
+    consumes: [SceneContextIdentity, ShellServiceIdentity],
+    factory: (sceneContext, shellService) => {
+        shellService.addToolbarItem({
+            key: "Mini Stats",
+            verticalLocation: "bottom",
+            horizontalLocation: "right",
+            suppressTeachingMoment: true,
+            component: () => {
+                const classes = useStyles$6();
+                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
+                const engine = scene?.getEngine();
+                const fps = useObservableState(() => (engine ? Math.round(engine.getFps()) : null), engine?.onBeginFrameObservable);
+                return fps != null ? jsx(Badge, { appearance: "outline", className: classes.badge, children: `${fps} fps` }) : null;
+            },
+        });
+    },
+};
+
 const TargetedAnimationGeneralProperties = (props) => {
     const { selectionService } = props;
     return (jsx(Fragment, { children: jsx(LinkToEntityPropertyLine, { label: "Target", description: "The entity animated by this animation.", entity: props.targetedAnimation.target, selectionService: selectionService }) }));
@@ -4030,6 +4111,7 @@ const SpinButton = (props) => {
     const lastCommittedValue = useRef(props.value);
     // step and forceInt are not mutually exclusive since there could be cases where you want to forceInt but have spinButton jump >1 int per spin
     const step = props.step != undefined ? props.step : props.forceInt ? 1 : undefined;
+    const precision = Math.min(4, step !== undefined ? CalculatePrecision(step) : 2); // If no step, set precision to 2. Regardless, cap precision at 4 to avoid wild numbers
     useEffect(() => {
         if (props.value !== lastCommittedValue.current) {
             lastCommittedValue.current = props.value;
@@ -4067,51 +4149,8 @@ const SpinButton = (props) => {
     };
     const id = useId("spin-button");
     const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
-    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(SpinButton$1, { ...props, input: { className: classes.inputSlot }, step: step, id: id, size: "medium", precision: CalculatePrecision(step ?? 1.01), displayValue: props.unit ? `${PrecisionRound(value, CalculatePrecision(step ?? 1.01))} ${props.unit}` : undefined, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
+    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(SpinButton$1, { ...props, input: { className: classes.inputSlot }, step: step, id: id, size: "medium", precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
 };
-/**
- * Fluent's CalculatePrecision function
- * https://github.com/microsoft/fluentui/blob/dcbf775d37938eacffa37922fc0b43a3cdd5753f/packages/utilities/src/math.ts#L91C1
- *
- * Calculates a number's precision based on the number of trailing
- * zeros if the number does not have a decimal indicated by a negative
- * precision. Otherwise, it calculates the number of digits after
- * the decimal point indicated by a positive precision.
- *
- * @param value - the value to determine the precision of
- * @returns the calculated precision
- */
-function CalculatePrecision(value) {
-    /**
-     * Group 1:
-     * [1-9]([0]+$) matches trailing zeros
-     * Group 2:
-     * \.([0-9]*) matches all digits after a decimal point.
-     */ const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value));
-    if (!groups) {
-        return 0;
-    }
-    if (groups[1]) {
-        return -groups[1].length;
-    }
-    if (groups[2]) {
-        return groups[2].length;
-    }
-    return 0;
-}
-/**
- * Fluent's PrecisionRound function
- * https://github.com/microsoft/fluentui/blob/dcbf775d37938eacffa37922fc0b43a3cdd5753f/packages/utilities/src/math.ts#L116
- *
- * Rounds a number to a certain level of precision. Accepts negative precision.
- * @param value - The value that is being rounded.
- * @param precision - The number of decimal places to round the number to
- * @returns The rounded number.
- */
-function PrecisionRound(value, precision) {
-    const exp = Math.pow(10, precision);
-    return Math.round(value * exp) / exp;
-}
 
 /**
  * Wraps a text input in a property line
@@ -4193,7 +4232,7 @@ const SyncedSliderInput = (props) => {
         setValue(value);
         props.onChange(value); // Input always updates immediately
     };
-    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (jsx(Slider, { ...passthroughProps, className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, value: Math.round(value / step) * step, onChange: handleInputChange, step: props.step })] })] }));
+    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (jsx(Slider, { ...passthroughProps, className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, value: value, onChange: handleInputChange, step: props.step })] })] }));
 };
 
 /**
@@ -4402,6 +4441,9 @@ const TensorPropertyLine = (props) => {
         setVector(newVector);
         props.onChange(newVector);
     };
+    useEffect(() => {
+        setVector(props.value);
+    }, [props.value, props.expandedContent]);
     return (jsx(PropertyLine, { ...props, onCopy: () => `new ${props.value.constructor.name}(${vector.x},${vector.y} ${HasZ(vector) ? `,${vector.z}` : ""}${HasW(vector) ? `,${vector.w}` : ""})`, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: props.unit, step: props.step }), jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: props.unit, step: props.step }), HasZ(vector) && (jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: props.unit, step: props.step })), HasW(vector) && (jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: props.unit, step: props.step }))] }), children: jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
 };
 const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
@@ -4435,14 +4477,17 @@ const Vector3PropertyLine = TensorPropertyLine;
 const Vector4PropertyLine = TensorPropertyLine;
 
 const useDropdownStyles = makeStyles({
-    dropdown: { ...UniformWidthStyling, minWidth: CustomTokens.inputWidth },
+    dropdown: {
+        minWidth: 0,
+        width: "100%",
+    },
     container: {
         display: "flex",
         flexDirection: "column",
         justifyContent: "center", // align items vertically
         gap: "4px",
     },
-    button: { textAlign: "end" },
+    dropdownText: { textAlign: "end", textOverflow: "ellipsis", whiteSpace: "nowrap", overflowX: "hidden" },
 });
 /**
  * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true
@@ -4459,34 +4504,34 @@ const Dropdown = (props) => {
         setDefaultVal(value);
     }, [props.value]);
     const id = useId("dropdown");
-    const mergedClassName = mergeClasses(classes.dropdown, props.className);
-    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: "medium", className: mergedClassName, button: { className: classes.button }, onOptionSelect: (evt, data) => {
+    const mergedClassName = mergeClasses(classes.container, props.className);
+    const optionLabel = options.find((o) => o.value === defaultVal)?.label;
+    return (jsxs("div", { className: mergedClassName, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: "medium", className: classes.dropdown, button: jsx("span", { className: classes.dropdownText, children: optionLabel }), onOptionSelect: (evt, data) => {
                     const value = typeof props.value === "number" ? Number(data.optionValue) : data.optionValue;
                     if (value !== undefined) {
                         setDefaultVal(value);
                         props.onChange(value);
                     }
-                }, selectedOptions: [defaultVal.toString()], value: options.find((o) => o.value === defaultVal)?.label, children: options.map((option) => (jsx(Option, { className: classes.dropdown, value: option.value.toString(), disabled: false, children: option.label }, option.label))) })] }));
+                }, selectedOptions: [defaultVal.toString()], value: optionLabel, children: options.map((option) => (jsx(Option, { value: option.value.toString(), disabled: false, children: option.label }, option.label))) })] }));
 };
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
 const useColorPickerStyles = makeStyles({
     container: {
-        width: "380px",
+        width: "350px",
         display: "flex", // becomes a flexbox
         flexDirection: "column", // with children in a column
         alignItems: "center", // centers children horizontally
         justifyContent: "center", // centers children vertically (if height is set)
-        borderRadius: "4px",
-        gap: "15px",
+        gap: tokens.spacingVerticalM,
         overflow: "visible",
     },
     row: {
         flex: 1, // is a row in the container's flex column
         display: "flex", // becomes its own flexbox
         flexDirection: "row", // with children in a row
-        gap: "20px",
+        gap: tokens.spacingHorizontalXL,
         alignItems: "center", // align items vertically
         width: "100%",
     },
@@ -4544,7 +4589,7 @@ const ColorPickerPopup = (props) => {
             align: "start",
             overflowBoundary: document.body,
             autoSize: true,
-        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: "small", color: color.toHexString(), value: color.toHexString().slice(1) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: classes.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: {
+        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: "small", shape: "rounded", color: color.toHexString(), value: color.toHexString().slice(1) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
                                         label: "Color Space",
                                         info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
                                     }, options: [
@@ -4558,7 +4603,6 @@ const ColorPickerPopup = (props) => {
                                         { label: "Float", value: 1 },
                                     ], disabled: true, value: isFloat ? 1 : 0, onChange: (val) => setFloat(val === 1) })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputRgbField, { title: "Red", value: color, rgbKey: "r", onChange: handleChange }), jsx(InputRgbField, { title: "Green", value: color, rgbKey: "g", onChange: handleChange }), jsx(InputRgbField, { title: "Blue", value: color, rgbKey: "b", onChange: handleChange }), jsx(InputAlphaField, { color: color, onChange: handleChange })] }), jsxs("div", { className: classes.inputRow, children: [jsx(InputHsvField, { title: "Hue", value: color, hsvKey: "h", max: 360, onChange: handleChange }), jsx(InputHsvField, { title: "Saturation", value: color, hsvKey: "s", max: 100, scale: 100, onChange: handleChange }), jsx(InputHsvField, { title: "Value", value: color, hsvKey: "v", max: 100, scale: 100, onChange: handleChange })] }), jsx("div", { className: classes.inputRow, children: jsx(InputHexField, { title: "Hexadecimal", linearHex: isLinear, isLinearMode: isLinear, value: color, onChange: handleChange }) })] }) })] }));
 };
-const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/);
 /**
  * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space
  * When the hex color is changed by user, component calculates the new Color3/4 value and calls onChange
@@ -4570,7 +4614,7 @@ const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/);
 const InputHexField = (props) => {
     const classes = useColorPickerStyles();
     const { title, value, onChange, linearHex, isLinearMode } = props;
-    return (jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: classes.inputField, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: (val) => val != "" && HEX_REGEX.test(val), onChange: (val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val))), infoLabel: title
+    return (jsx(TextInput, { disabled: linearHex ? !isLinearMode : false, className: classes.inputField, value: linearHex ? value.toLinearSpace().toHexString() : value.toHexString(), validator: ColorHexValidatorFn, onChange: (val) => (linearHex ? onChange(Color3.FromHexString(val).toGammaSpace()) : onChange(Color3.FromHexString(val))), infoLabel: title
             ? {
                 label: title,
                 // If not representing a linearHex, no info is needed.
@@ -4653,6 +4697,9 @@ const InputAlphaField = (props) => {
 const ColorPropertyLine = forwardRef((props, ref) => {
     ColorPropertyLine.displayName = "ColorPropertyLine";
     const [color, setColor] = useState(props.value);
+    useEffect(() => {
+        setColor(props.value);
+    }, [props.value]);
     const onSliderChange = (value, key) => {
         let newColor;
         if (key === "a") {
@@ -4775,6 +4822,11 @@ const ArcRotateCameraBehaviorsProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Auto Rotation", target: camera, propertyKey: "useAutoRotationBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Bouncing", target: camera, propertyKey: "useBouncingBehavior" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Framing", target: camera, propertyKey: "useFramingBehavior" })] }));
 };
 
+const useStyles$5 = makeStyles({
+    dropdown: {
+        ...UniformWidthStyling,
+    },
+});
 /**
  * Wraps a dropdown in a property line
  * @param props - PropertyLineProps and DropdownProps
@@ -4782,7 +4834,8 @@ const ArcRotateCameraBehaviorsProperties = (props) => {
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props }) }));
+    const classes = useStyles$5();
+    return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
  * Dropdown component for number values.
@@ -4793,6 +4846,60 @@ const NumberDropdownPropertyLine = DropdownPropertyLine;
  */
 const StringDropdownPropertyLine = DropdownPropertyLine;
 
+// The below conversion functions are taken from old HexLineComponent and can likely be simplified
+const ConvertToHexString = (valueString) => {
+    while (valueString.length < 10) {
+        valueString += "0";
+    }
+    return valueString;
+};
+const MaskValidatorFn = (valueString) => {
+    if (valueString.substring(0, 2) != "0x") {
+        if (valueString.substring(0, 1) != "0") {
+            valueString = "0x" + valueString;
+        }
+        else {
+            valueString = "0x" + valueString.substr(1);
+        }
+    }
+    const valueSubstr = valueString.substr(2);
+    if (valueSubstr != "" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {
+        return false;
+    }
+    if (valueString.length > 10) {
+        return false;
+    }
+    return true;
+};
+const GetHexValFromNumber = (val) => {
+    let valueAsHex = val.toString(16);
+    let hex0String = "";
+    for (let i = 0; i < 8 - valueAsHex.length; i++) {
+        // padding the '0's
+        hex0String += "0";
+    }
+    valueAsHex = "0x" + hex0String + valueAsHex.toUpperCase();
+    return valueAsHex;
+};
+/**
+ * Takes a number representing a Hex value and converts it to a hex string then wraps the TextInput in a PropertyLine
+ * @param props - PropertyLineProps
+ * @returns property-line wrapped textbox that converts to/from hex number representation
+ */
+const HexPropertyLine = (props) => {
+    HexPropertyLine.displayName = "HexPropertyLine";
+    const [hexVal, setHexVal] = useState(GetHexValFromNumber(props.value));
+    const onStrValChange = (val) => {
+        setHexVal(val);
+        const valueStringAsHex = ConvertToHexString(val);
+        props.onChange(parseInt(valueStringAsHex));
+    };
+    useEffect(() => {
+        setHexVal(GetHexValFromNumber(props.value));
+    }, [props.value]);
+    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, validator: MaskValidatorFn, value: hexVal, onChange: onStrValChange }) }));
+};
+
 const CameraModes = [
     { label: "Perspective", value: Camera.PERSPECTIVE_CAMERA },
     { label: "Orthographic", value: Camera.ORTHOGRAPHIC_CAMERA },
@@ -4806,7 +4913,7 @@ const CameraGeneralProperties = (props) => {
     const { camera, settings } = props;
     const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
     const mode = useProperty(camera, "mode");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Near Plane", description: "Anything closer than this will not be drawn.", target: camera, propertyKey: "minZ" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Far Plane", description: "Anything further than this will not be drawn.", target: camera, propertyKey: "maxZ" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Inertia", target: camera, propertyKey: "inertia", min: 0, max: 1, step: 0.01 }), jsx(PlaceholderPropertyLine, { label: "Layer Mask", value: camera.layerMask, onChange: () => { } }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", options: CameraModes, target: camera, propertyKey: "mode" }), jsx(Collapse, { visible: mode === Camera.PERSPECTIVE_CAMERA, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "FOV", description: `Field of view in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "fov", min: toDisplayAngle(0.1), max: toDisplayAngle(Math.PI), step: toDisplayAngle(0.01), convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }) }), jsx(Collapse, { visible: mode === Camera.ORTHOGRAPHIC_CAMERA, children: jsxs("div", { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Left", target: camera, step: 0.1, propertyKey: "orthoLeft", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Right", target: camera, step: 0.1, propertyKey: "orthoRight", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Top", target: camera, step: 0.1, propertyKey: "orthoTop", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Bottom", target: camera, step: 0.1, propertyKey: "orthoBottom", nullable: true, defaultValue: 0 })] }) })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Near Plane", description: "Anything closer than this will not be drawn.", target: camera, propertyKey: "minZ" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Far Plane", description: "Anything further than this will not be drawn.", target: camera, propertyKey: "maxZ" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Inertia", target: camera, propertyKey: "inertia", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: HexPropertyLine, label: "Layer Mask", target: camera, propertyKey: "layerMask" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", options: CameraModes, target: camera, propertyKey: "mode" }), jsx(Collapse, { visible: mode === Camera.PERSPECTIVE_CAMERA, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "FOV", description: `Field of view in ${useDegrees ? "degrees" : "radians"}`, target: camera, propertyKey: "fov", min: toDisplayAngle(0.1), max: toDisplayAngle(Math.PI), step: toDisplayAngle(0.01), convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }) }), jsx(Collapse, { visible: mode === Camera.ORTHOGRAPHIC_CAMERA, children: jsxs("div", { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Left", target: camera, step: 0.1, propertyKey: "orthoLeft", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Right", target: camera, step: 0.1, propertyKey: "orthoRight", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Top", target: camera, step: 0.1, propertyKey: "orthoTop", nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Bottom", target: camera, step: 0.1, propertyKey: "orthoBottom", nullable: true, defaultValue: 0 })] }) })] }));
 };
 
 const FollowCameraTransformProperties = (props) => {
@@ -5558,11 +5665,8 @@ const MaterialPropertiesServiceDefinition = {
 
 const useInputStyles = makeStyles({
     textarea: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        "& textarea": {
-            minHeight: "100px",
-            maxHeight: "500px",
-        },
+        minHeight: "100px",
+        maxHeight: "500px",
     },
 });
 /**
@@ -5582,7 +5686,7 @@ const Textarea = (props) => {
     const handleKeyDown = (event) => {
         event.stopPropagation(); // Prevent event propagation
     };
-    return jsx(Textarea$1, { ...props, className: classes.textarea, onChange: handleChange, onKeyDown: handleKeyDown });
+    return jsx(Textarea$1, { ...props, textarea: { className: classes.textarea }, onChange: handleChange, onKeyDown: handleKeyDown });
 };
 
 const PrettyJSONIndent = 2;
@@ -5723,14 +5827,14 @@ const MetadataProperties = (props) => {
     const [editedMetadata, setEditedMetadata] = useState(stringifiedMetadata);
     const isEditedMetadataJSON = useMemo(() => IsParsable(editedMetadata), [editedMetadata]);
     const unformattedEditedMetadata = useMemo(() => Restringify(editedMetadata, false), [editedMetadata]);
-    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsxs("div", { className: classes.mainDiv, children: [jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !!editedMetadata && (!IsParsable(editedMetadata) || HasGltfExtras(editedMetadata)), onClick: () => {
-                            const isFormatted = Restringify(editedMetadata, true) === editedMetadata;
-                            let withGLTFExtras = PopulateGLTFExtras(editedMetadata);
-                            if (isFormatted) {
-                                withGLTFExtras = Restringify(withGLTFExtras, true);
-                            }
-                            setEditedMetadata(withGLTFExtras);
-                        } }), jsx(LineContainer, { children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] })] }));
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsx(LineContainer, { children: jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }) }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !!editedMetadata && (!IsParsable(editedMetadata) || HasGltfExtras(editedMetadata)), onClick: () => {
+                    const isFormatted = Restringify(editedMetadata, true) === editedMetadata;
+                    let withGLTFExtras = PopulateGLTFExtras(editedMetadata);
+                    if (isFormatted) {
+                        withGLTFExtras = Restringify(withGLTFExtras, true);
+                    }
+                    setEditedMetadata(withGLTFExtras);
+                } }), jsx(LineContainer, { children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] }));
 };
 
 function IsMetadataContainer(entity) {
@@ -5771,7 +5875,7 @@ const AbstractMeshGeneralProperties = (props) => {
 };
 const AbstractMeshDisplayProperties = (props) => {
     const { mesh } = props;
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Alpha Index", target: mesh, propertyKey: "alphaIndex" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Receive Shadows", target: mesh, propertyKey: "receiveShadows" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rendering Group Id", target: mesh, propertyKey: "renderingGroupId", min: RenderingManager.MIN_RENDERINGGROUPS, max: RenderingManager.MAX_RENDERINGGROUPS - 1, step: 1 }), jsx(BoundProperty, { component: PlaceholderPropertyLine, label: "TODO: Layer Mask", target: mesh, propertyKey: "layerMask" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Alpha Index", target: mesh, propertyKey: "alphaIndex" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Receive Shadows", target: mesh, propertyKey: "receiveShadows" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rendering Group Id", target: mesh, propertyKey: "renderingGroupId", min: RenderingManager.MIN_RENDERINGGROUPS, max: RenderingManager.MAX_RENDERINGGROUPS - 1, step: 1 }), jsx(BoundProperty, { component: HexPropertyLine, label: "Layer Mask", target: mesh, propertyKey: "layerMask" })] }));
 };
 const AbstractMeshAdvancedProperties = (props) => {
     const { mesh } = props;
@@ -5781,7 +5885,7 @@ const AbstractMeshOutlineOverlayProperties = (props) => {
     const { mesh } = props;
     const renderOverlay = useProperty(mesh, "renderOverlay");
     const renderOutline = useProperty(mesh, "renderOutline");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render Overlay", target: mesh, propertyKey: "renderOverlay" }), jsx(Collapse, { visible: renderOverlay, children: jsx(BoundProperty, { label: "Overlay Color", component: Color3PropertyLine, target: mesh, propertyKey: "overlayColor" }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render Outline", target: mesh, propertyKey: "renderOutline" }), jsx(Collapse, { visible: renderOutline, children: jsx(BoundProperty, { label: "Outline Color", component: Color3PropertyLine, target: mesh, propertyKey: "outlineColor" }) })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render Overlay", target: mesh, propertyKey: "renderOverlay" }), jsx(Collapse, { visible: renderOverlay, children: jsx(BoundProperty, { label: "Overlay Color", component: Color3PropertyLine, target: mesh, propertyKey: "overlayColor" }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Render Outline", target: mesh, propertyKey: "renderOutline" }), jsxs(Collapse, { visible: renderOutline, children: [jsx(BoundProperty, { label: "Outline Color", component: Color3PropertyLine, target: mesh, propertyKey: "outlineColor" }), jsx(BoundProperty, { label: "Outline Width", component: NumberInputPropertyLine, target: mesh, propertyKey: "outlineWidth", step: 0.001 })] })] }));
 };
 const OcclusionTypes = [
     { label: "None", value: 0 },
@@ -6919,10 +7023,52 @@ const SkeletonPropertiesServiceDefinition = {
     },
 };
 
+const SpinButtonPropertyLine = (props) => {
+    SpinButtonPropertyLine.displayName = "SpinButtonPropertyLine";
+    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
+};
+
+const SpriteManagerGeneralProperties = (props) => {
+    const { spriteManager, selectionService } = props;
+    const texture = useProperty(spriteManager, "texture");
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Capacity", value: spriteManager.capacity.toString() }), jsx(LinkToEntityPropertyLine, { label: "Texture", entity: texture, selectionService: selectionService }), jsx(ButtonLine, { label: "Dispose", onClick: () => spriteManager.dispose() })] }));
+};
+const SpriteManagerOtherProperties = (props) => {
+    const { spriteManager } = props;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Pickable", target: spriteManager, propertyKey: "isPickable" }, "IsPickable"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Fog Enabled", target: spriteManager, propertyKey: "fogEnabled" }, "FogEnabled"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Depth Write", target: spriteManager, propertyKey: "disableDepthWrite", convertTo: (value) => !value, convertFrom: (value) => !value }, "DepthWrite"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rendering Group ID", target: spriteManager, propertyKey: "renderingGroupId", min: RenderingManager.MIN_RENDERINGGROUPS, max: RenderingManager.MAX_RENDERINGGROUPS, step: 1 }, "RenderingGroupId"), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Blend Mode", target: spriteManager, propertyKey: "blendMode", options: AlphaModeOptions }, "BlendMode")] }));
+};
+const SpriteManagerCellProperties = (props) => {
+    const { spriteManager } = 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")] }));
+};
+
+function useMaxCellCount(sprite) {
+    const manager = sprite.manager;
+    const texture = useProperty(manager, "texture");
+    const textureSize = texture.getSize();
+    let maxCellCount = 0;
+    if (!textureSize.width || !textureSize.height) {
+        maxCellCount = Math.max(sprite.fromIndex, sprite.toIndex);
+    }
+    else {
+        maxCellCount = (textureSize.width / manager.cellWidth) * (textureSize.height / manager.cellHeight);
+    }
+    return maxCellCount;
+}
+const SpriteGeneralProperties = (props) => {
+    const { sprite, selectionService } = props;
+    return (jsxs(Fragment, { children: [jsx(LinkToEntityPropertyLine, { label: "Parent", description: `Sprite Manager that owns this sprite.`, entity: sprite.manager, selectionService: selectionService }, "Parent"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Visible", description: "Whether the sprite is visible or not.", target: sprite, propertyKey: "isVisible" }, "IsVisible")] }));
+};
+const SpriteTransformProperties = (props) => {
+    const { sprite, settings } = props;
+    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: sprite, propertyKey: "position" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Angle", description: `Rotation angle of the sprite in ${useDegrees ? "degrees" : "radians"}`, min: 0, max: toDisplayAngle(Math.PI * 2), step: toDisplayAngle(0.01), target: sprite, propertyKey: "angle", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }, "Angle"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Width", description: "Width of the sprite (in world space units)", target: sprite, propertyKey: "width" }, "Width"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Height", description: "Height of the sprite (in world space units)", target: sprite, propertyKey: "height" }, "Height")] }));
+};
 const SpriteAnimationProperties = (props) => {
     const { sprite } = props;
     const animationStarted = useObservableState(useCallback(() => sprite.animationStarted, [sprite]), useInterceptObservable("function", sprite, "playAnimation"), useInterceptObservable("function", sprite, "stopAnimation"), useInterceptObservable("function", sprite, "_animate"));
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Start", description: "First frame of the animation.", min: 0, target: sprite, propertyKey: "fromIndex" }, "Start"), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "End", description: "Last frame of the animation.", min: 0, target: sprite, propertyKey: "toIndex" }, "End"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Loop", description: "Whether to loop the animation.", target: sprite, propertyKey: "loopAnimation" }, "Loop"), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Delay", description: "Delay between frames in milliseconds.", min: 0, target: sprite, propertyKey: "delay" }, "Delay"), jsx(ButtonLine, { label: animationStarted ? "Stop Animation" : "Start Animation", icon: animationStarted ? StopFilled : PlayFilled, onClick: () => {
+    const maxCellCount = useMaxCellCount(sprite);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Start", description: "First frame of the animation.", min: 0, max: maxCellCount, target: sprite, propertyKey: "fromIndex" }, "Start"), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "End", description: "Last frame of the animation.", min: 0, max: maxCellCount, target: sprite, propertyKey: "toIndex" }, "End"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Loop", description: "Whether to loop the animation.", target: sprite, propertyKey: "loopAnimation" }, "Loop"), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Delay", description: "Delay between frames in milliseconds.", min: 0, target: sprite, propertyKey: "delay" }, "Delay"), jsx(ButtonLine, { label: animationStarted ? "Stop Animation" : "Start Animation", icon: animationStarted ? StopFilled : PlayFilled, onClick: () => {
                     if (animationStarted) {
                         sprite.stopAnimation();
                     }
@@ -6931,62 +7077,59 @@ const SpriteAnimationProperties = (props) => {
                     }
                 } })] }));
 };
-
-const SpriteGeneralProperties = (props) => {
-    const { sprite, selectionService } = props;
-    return (jsxs(Fragment, { children: [jsx(LinkToEntityPropertyLine, { label: "Parent", description: `Sprite Manager that owns this sprite.`, entity: sprite.manager, selectionService: selectionService }, "Parent"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Visible", description: "Whether the sprite is visible or not.", target: sprite, propertyKey: "isVisible" }, "IsVisible")] }));
-};
-
 const SpriteOtherProperties = (props) => {
     const { sprite } = props;
     const color = useColor4Property(sprite, "color");
-    return (jsx(Fragment, { children: jsx(Color4PropertyLine, { label: "Color", description: "Color to tint the sprite.", value: color, onChange: (col) => (sprite.color = col) }, "Color") }));
+    return (jsxs(Fragment, { children: [jsx(Color4PropertyLine, { label: "Color", description: "Color to tint the sprite.", value: color, onChange: (col) => (sprite.color = col) }, "Color"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Pickable", target: sprite, propertyKey: "isPickable" }, "IsPickable"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Alpha for Picking", target: sprite, propertyKey: "useAlphaForPicking" }, "UseAlphaForPicking")] }));
 };
-
-const SpriteTransformProperties = (props) => {
-    const { sprite, settings } = props;
-    const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Vector3PropertyLine, label: "Position", target: sprite, propertyKey: "position" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Angle", description: `Rotation angle of the sprite in ${useDegrees ? "degrees" : "radians"}`, min: 0, max: toDisplayAngle(Math.PI * 2), step: toDisplayAngle(0.01), target: sprite, propertyKey: "angle", convertTo: toDisplayAngle, convertFrom: fromDisplayAngle }, "Angle"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Width", description: "Width of the sprite (in world space units)", target: sprite, propertyKey: "width" }, "Width"), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Height", description: "Height of the sprite (in world space units)", target: sprite, propertyKey: "height" }, "Height")] }));
+const SpriteCellProperties = (props) => {
+    const { sprite } = props;
+    const maxCellCount = useMaxCellCount(sprite);
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Cell Index", target: sprite, propertyKey: "cellIndex", min: 0, step: 1, max: maxCellCount }, "CellIndex"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert U", target: sprite, propertyKey: "invertU" }, "InvertU"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Invert V", target: sprite, propertyKey: "invertV" }, "InvertV")] }));
 };
 
 const SpritePropertiesServiceDefinition = {
     friendlyName: "Sprite Properties",
     consumes: [PropertiesServiceIdentity, SelectionServiceIdentity, SettingsContextIdentity],
     factory: (propertiesService, selectionService, settingsContent) => {
-        const generalSectionContentRegistration = propertiesService.addSectionContent({
-            key: "Sprite Properties",
-            predicate: (entity) => entity instanceof Sprite,
+        const spriteManagerSectionContentRegistration = propertiesService.addSectionContent({
+            key: "Sprite Manager Properties",
+            predicate: (entity) => entity instanceof SpriteManager,
             content: [
                 {
                     section: "General",
-                    component: ({ context }) => jsx(SpriteGeneralProperties, { sprite: context, selectionService: selectionService }),
+                    component: ({ context }) => jsx(SpriteManagerGeneralProperties, { spriteManager: context, selectionService: selectionService }),
+                },
+                {
+                    section: "Cells",
+                    component: ({ context }) => jsx(SpriteManagerCellProperties, { spriteManager: context }),
+                },
+                {
+                    section: "Other",
+                    component: ({ context }) => jsx(SpriteManagerOtherProperties, { spriteManager: context }),
                 },
             ],
         });
-        const transformSectionContentRegistration = propertiesService.addSectionContent({
+        const spriteSectionContentRegistration = propertiesService.addSectionContent({
             key: "Sprite Properties",
             predicate: (entity) => entity instanceof Sprite,
             content: [
+                {
+                    section: "General",
+                    component: ({ context }) => jsx(SpriteGeneralProperties, { sprite: context, selectionService: selectionService }),
+                },
                 {
                     section: "Transform",
                     component: ({ context }) => jsx(SpriteTransformProperties, { sprite: context, settings: settingsContent }),
                 },
-            ],
-        });
-        const animationSectionContentRegistration = propertiesService.addSectionContent({
-            key: "Sprite Properties",
-            predicate: (entity) => entity instanceof Sprite,
-            content: [
+                {
+                    section: "Cell",
+                    component: ({ context }) => jsx(SpriteCellProperties, { sprite: context }),
+                },
                 {
                     section: "Animation",
                     component: ({ context }) => jsx(SpriteAnimationProperties, { sprite: context }),
                 },
-            ],
-        });
-        const otherSectionContentRegistration = propertiesService.addSectionContent({
-            key: "Sprite Properties",
-            predicate: (entity) => entity instanceof Sprite,
-            content: [
                 {
                     section: "Other",
                     component: ({ context }) => jsx(SpriteOtherProperties, { sprite: context }),
@@ -6995,10 +7138,8 @@ const SpritePropertiesServiceDefinition = {
         });
         return {
             dispose: () => {
-                generalSectionContentRegistration.dispose();
-                transformSectionContentRegistration.dispose();
-                otherSectionContentRegistration.dispose();
-                animationSectionContentRegistration.dispose();
+                spriteManagerSectionContentRegistration.dispose();
+                spriteSectionContentRegistration.dispose();
             },
         };
     },
@@ -7105,28 +7246,29 @@ function FindTextureType(type) {
 }
 
 const useStyles$3 = makeStyles({
-    root: { display: "flex", flexDirection: "column", gap: "8px" },
+    root: {
+        display: "flex",
+        flexDirection: "column",
+    },
     controls: {
         display: "flex",
-        gap: "2px",
-        padding: "2px",
-        width: "100%",
-        justifyContent: "center",
+        gap: tokens.spacingHorizontalXS,
     },
     controlButton: {
         minWidth: "auto",
         flex: "1 1 0", // Equal flex grow/shrink with 0 basis
-        paddingVertical: "4px",
-        paddingHorizontal: "8px",
+        paddingVertical: tokens.spacingVerticalXS,
+        paddingHorizontal: tokens.spacingHorizontalS,
         overflow: "hidden",
         textOverflow: "ellipsis",
     },
     preview: {
-        border: "1px solid #ccc",
-        marginTop: "8px",
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        marginTop: tokens.spacingVerticalXS,
         maxWidth: "100%",
         marginLeft: "auto",
         marginRight: "auto",
+        marginBottom: tokens.spacingVerticalS,
         display: "block",
     },
 });
@@ -7328,20 +7470,6 @@ const CoordinatesMode = [
     { label: "Skybox", value: Texture.SKYBOX_MODE },
     { label: "Spherical", value: Texture.SPHERICAL_MODE },
 ];
-const SamplingMode = [
-    { label: "Nearest", value: Texture.NEAREST_NEAREST }, // 1
-    { label: "Linear", value: Texture.LINEAR_LINEAR }, // 2
-    { label: "Linear & linear mip", value: Texture.LINEAR_LINEAR_MIPLINEAR }, // 3
-    { label: "Linear & nearest mip", value: Texture.LINEAR_LINEAR_MIPNEAREST }, // 11
-    { label: "Nearest & linear mip", value: Texture.NEAREST_NEAREST_MIPLINEAR }, // 8
-    { label: "Nearest & nearest mip", value: Texture.NEAREST_NEAREST_MIPNEAREST }, // 4
-    { label: "Nearest/Linear", value: Texture.NEAREST_LINEAR }, // 7
-    { label: "Nearest/Linear & linear mip", value: Texture.NEAREST_LINEAR_MIPLINEAR }, // 6
-    { label: "Nearest/Linear & nearest mip", value: Texture.NEAREST_LINEAR_MIPNEAREST }, // 5
-    { label: "Linear/Nearest", value: Texture.LINEAR_NEAREST }, // 12
-    { label: "Linear/Nearest & linear mip", value: Texture.LINEAR_NEAREST_MIPLINEAR }, // 10
-    { label: "Linear/Nearest & nearest mip", value: Texture.LINEAR_NEAREST_MIPNEAREST }, // 9
-];
 const BaseTextureCharacteristicProperties = (props) => {
     const { texture } = props;
     const internalTexture = useProperty(texture, "_texture");
@@ -7351,7 +7479,7 @@ const BaseTextureCharacteristicProperties = (props) => {
     const useSRGBBuffer = useProperty(internalTexture, "_useSRGBBuffer");
     const displayFormat = FindTextureFormat(format === -1 ? Constants.TEXTUREFORMAT_RGBA : format);
     const displayType = FindTextureType(type === -1 ? Constants.TEXTURETYPE_UNSIGNED_BYTE : type);
-    return (jsxs(Fragment, { children: [texture.is2DArray && jsx(TextPropertyLine, { label: "Layers", value: depth?.toString() ?? "?" }), texture.is3D && jsx(TextPropertyLine, { label: "Depth", value: depth?.toString() ?? "?" }), jsx(TextPropertyLine, { label: "Format", value: displayFormat?.label ?? "unknown" }), !displayFormat?.hideType && !displayFormat?.compressed && jsx(TextPropertyLine, { label: "Type", value: displayType?.label ?? "unknown" }), !!displayFormat?.normalizable && !displayFormat?.compressed && displayType?.normalizable != undefined && (jsx(BooleanBadgePropertyLine, { label: "Normalized", value: displayType.normalizable })), jsx(BooleanBadgePropertyLine, { label: "Compressed", value: displayFormat?.compressed ?? false }), jsx(BooleanBadgePropertyLine, { label: "sRGB Buffers", value: useSRGBBuffer ?? false }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Gamma Space", target: texture, propertyKey: "gammaSpace" }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Has Alpha", target: texture, propertyKey: "hasAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Alpha from RGB", target: texture, propertyKey: "getAlphaFromRGB" }), jsx(BooleanBadgePropertyLine, { label: "3D", value: texture.is3D }), jsx(BooleanBadgePropertyLine, { label: "2D Array", value: texture.is2DArray }), jsx(BooleanBadgePropertyLine, { label: "Cube", value: texture.isCube }), jsx(BooleanBadgePropertyLine, { label: "Render Target", value: texture.isRenderTarget }), jsx(BooleanBadgePropertyLine, { label: "Mipmaps", value: !texture.noMipmap }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "UV Set", target: texture, propertyKey: "coordinatesIndex", min: 0, max: 3, step: 1 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", target: texture, propertyKey: "coordinatesMode", options: CoordinatesMode }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Level", target: texture, propertyKey: "level", min: 0, max: 2, step: 0.01 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Sampling", target: texture, propertyKey: "samplingMode", options: SamplingMode })] }));
+    return (jsxs(Fragment, { children: [texture.is2DArray && jsx(TextPropertyLine, { label: "Layers", value: depth?.toString() ?? "?" }), texture.is3D && jsx(TextPropertyLine, { label: "Depth", value: depth?.toString() ?? "?" }), jsx(TextPropertyLine, { label: "Format", value: displayFormat?.label ?? "unknown" }), !displayFormat?.hideType && !displayFormat?.compressed && jsx(TextPropertyLine, { label: "Type", value: displayType?.label ?? "unknown" }), !!displayFormat?.normalizable && !displayFormat?.compressed && displayType?.normalizable != undefined && (jsx(BooleanBadgePropertyLine, { label: "Normalized", value: displayType.normalizable })), jsx(BooleanBadgePropertyLine, { label: "Compressed", value: displayFormat?.compressed ?? false }), jsx(BooleanBadgePropertyLine, { label: "sRGB Buffers", value: useSRGBBuffer ?? false }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Gamma Space", target: texture, propertyKey: "gammaSpace" }), jsx(BoundProperty, { component: BooleanBadgePropertyLine, label: "Has Alpha", target: texture, propertyKey: "hasAlpha" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Alpha from RGB", target: texture, propertyKey: "getAlphaFromRGB" }), jsx(BooleanBadgePropertyLine, { label: "3D", value: texture.is3D }), jsx(BooleanBadgePropertyLine, { label: "2D Array", value: texture.is2DArray }), jsx(BooleanBadgePropertyLine, { label: "Cube", value: texture.isCube }), jsx(BooleanBadgePropertyLine, { label: "Render Target", value: texture.isRenderTarget }), jsx(BooleanBadgePropertyLine, { label: "Mipmaps", value: !texture.noMipmap }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "UV Set", target: texture, propertyKey: "coordinatesIndex", min: 0, max: 3, step: 1 }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Mode", target: texture, propertyKey: "coordinatesMode", options: CoordinatesMode }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Level", target: texture, propertyKey: "level", min: 0, max: 2, step: 0.01 })] }));
 };
 const BaseTextureTransformProperties = (props) => {
     const { texture } = props;
@@ -7400,10 +7528,29 @@ const TextureTransformProperties = (props) => {
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U offset", target: texture, propertyKey: "uOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V offset", target: texture, propertyKey: "vOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U scale", target: texture, propertyKey: "uScale", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V scale", target: texture, propertyKey: "vScale", step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "U angle", target: texture, propertyKey: "uAng", min: 0, max: toDisplayAngle(Math.PI * 2), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "V angle", target: texture, propertyKey: "vAng", min: 0, max: toDisplayAngle(Math.PI * 2), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "W angle", target: texture, propertyKey: "wAng", min: 0, max: toDisplayAngle(Math.PI * 2), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(SwitchPropertyLine, { label: "Clamp U", value: wrapU === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapU = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) }), jsx(SwitchPropertyLine, { label: "Clamp V", value: wrapV === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapV = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) })] }));
 };
 
+const SamplingMode = [
+    { label: "Nearest", value: Texture.NEAREST_NEAREST }, // 1
+    { label: "Linear", value: Texture.LINEAR_LINEAR }, // 2
+    { label: "Linear & linear mip", value: Texture.LINEAR_LINEAR_MIPLINEAR }, // 3
+    { label: "Linear & nearest mip", value: Texture.LINEAR_LINEAR_MIPNEAREST }, // 11
+    { label: "Nearest & linear mip", value: Texture.NEAREST_NEAREST_MIPLINEAR }, // 8
+    { label: "Nearest & nearest mip", value: Texture.NEAREST_NEAREST_MIPNEAREST }, // 4
+    { label: "Nearest/Linear", value: Texture.NEAREST_LINEAR }, // 7
+    { label: "Nearest/Linear & linear mip", value: Texture.NEAREST_LINEAR_MIPLINEAR }, // 6
+    { label: "Nearest/Linear & nearest mip", value: Texture.NEAREST_LINEAR_MIPNEAREST }, // 5
+    { label: "Linear/Nearest", value: Texture.LINEAR_NEAREST }, // 12
+    { label: "Linear/Nearest & linear mip", value: Texture.LINEAR_NEAREST_MIPLINEAR }, // 10
+    { label: "Linear/Nearest & nearest mip", value: Texture.LINEAR_NEAREST_MIPNEAREST }, // 9
+];
 const ThinTextureGeneralProperties = (props) => {
     const { texture } = props;
     return (jsxs(Fragment, { children: [jsx(StringifiedPropertyLine, { label: "Width", value: texture.getSize().width, units: "px" }), jsx(StringifiedPropertyLine, { label: "Height", value: texture.getSize().height, units: "px" })] }));
 };
+const ThinTextureSamplingProperties = (props) => {
+    const { texture } = props;
+    const samplingMode = useObservableState(useCallback(() => texture.samplingMode, [texture]), useInterceptObservable("function", texture, "updateSamplingMode"));
+    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) {
@@ -7446,6 +7593,11 @@ const TexturePropertiesServiceDefinition = {
                     order: 100,
                     component: ({ context }) => jsx(ThinTextureGeneralProperties, { texture: context }),
                 },
+                {
+                    section: "General",
+                    order: 200,
+                    component: ({ context }) => jsx(ThinTextureSamplingProperties, { texture: context }),
+                },
             ],
         });
         const textureContentRegistration = propertiesService.addSectionContent({
@@ -8482,6 +8634,22 @@ const PickingServiceDefinition = {
     },
 };
 
+const UserFeedbackServiceDefinition = {
+    friendlyName: "User Feedback",
+    consumes: [ShellServiceIdentity],
+    factory: (shellService) => {
+        shellService.addToolbarItem({
+            key: "User Feedback",
+            verticalLocation: "bottom",
+            horizontalLocation: "right",
+            suppressTeachingMoment: true,
+            component: () => {
+                return (jsx(Button, { appearance: "subtle", icon: PersonFeedbackRegular, title: "Give Feedback on Inspector v2", onClick: () => window.open("https://forum.babylonjs.com/", "_blank") }));
+            },
+        });
+    },
+};
+
 let CurrentInspectorToken = null;
 function IsInspectorVisible() {
     return CurrentInspectorToken != null;
@@ -8642,6 +8810,10 @@ function _ShowInspector(scene, options) {
             GizmoToolbarServiceDefinition,
             // Allows picking objects from the scene to select them.
             PickingServiceDefinition,
+            // Adds entry points for user feedback on Inspector v2 (probably eventually will be removed).
+            UserFeedbackServiceDefinition,
+            // Adds always present "mini stats" (like fps) to the toolbar, etc.
+            MiniStatsServiceDefinition,
             // Additional services passed in to the Inspector.
             ...(options.serviceDefinitions ?? []),
         ],
@@ -8931,21 +9103,6 @@ const Pane = (props) => {
     return (jsxs("div", { className: classes.rootDiv, children: [jsxs("div", { className: classes.header, children: [props.icon ? (jsx(props.icon, { className: classes.icon })) : (jsx("img", { className: classes.icon, id: "logo", src: "https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png" })), jsx(Body1Strong, { id: "title", children: props.title })] }), props.children] }));
 };
 
-/**
- * Wraps a hex input in a property line
- * @param props - PropertyLineProps and InputHexProps
- * @returns property-line wrapped input hex component
- */
-const HexPropertyLine = (props) => {
-    HexPropertyLine.displayName = "HexPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(InputHexField, { ...props }) }));
-};
-
-const SpinButtonPropertyLine = (props) => {
-    SpinButtonPropertyLine.displayName = "SpinButtonPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
-};
-
 /**
  * Wraps textarea in a property line
  * @param props - PropertyLineProps and TextProps
@@ -8956,5 +9113,5 @@ const TextAreaPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Textarea, { ...props }) }));
 };
 
-export { Accordion, AccordionSection, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, CalculatePrecision, Checkbox, CheckboxPropertyLine, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, DebugServiceIdentity, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, HideInspector, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsInspectorVisible, IsPropertyReadonly, LineContainer, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SidePaneContainer, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useVector3Property };
+export { Accordion, AccordionSection, BooleanBadgePropertyLine, BoundProperty, BuiltInsExtensionFeed, Button, ButtonLine, Checkbox, CheckboxPropertyLine, Collapse, Color3GradientComponent, Color3GradientList, Color3PropertyLine, Color4GradientComponent, Color4GradientList, Color4PropertyLine, ColorPickerPopup, ColorStepGradientComponent, ComboBox, ConstructorFactory, DebugServiceIdentity, DraggableLine, Dropdown, ExtensibleAccordion, FactorGradientComponent, FactorGradientList, FileUploadLine, GetPropertyDescriptor, HexPropertyLine, HideInspector, InfoLabel, InputHexField, InputHsvField, Inspector, InterceptFunction, InterceptProperty, IsInspectorVisible, IsPropertyReadonly, LineContainer, LinkPropertyLine, LinkToEntityPropertyLine, List, MakeDialogTeachingMoment, MakeLazyComponent, MakePopoverTeachingMoment, MakePropertyHook, MakeTeachingMoment, MessageBar, NumberDropdown, NumberDropdownPropertyLine, NumberInputPropertyLine, ObservableCollection, Pane, PlaceholderPropertyLine, PositionedPopover, PropertiesServiceIdentity, PropertyLine, QuaternionPropertyLine, RotationVectorPropertyLine, SceneContextIdentity, SceneExplorerServiceIdentity, SearchBar, SearchBox, SelectionServiceDefinition, SelectionServiceIdentity, SettingsContextIdentity, SettingsServiceIdentity, ShellServiceIdentity, ShowInspector, SidePaneContainer, SpinButton, SpinButtonPropertyLine, StatsServiceIdentity, StringDropdown, StringDropdownPropertyLine, StringifiedPropertyLine, Switch, SwitchPropertyLine, SyncedSliderInput, SyncedSliderPropertyLine, TeachingMoment, TextAreaPropertyLine, TextInput, TextInputPropertyLine, TextPropertyLine, Textarea, ToggleButton, ToolsServiceIdentity, Vector2PropertyLine, Vector3PropertyLine, Vector4PropertyLine, useAngleConverters, useAsyncResource, useColor3Property, useColor4Property, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useVector3Property };
 //# sourceMappingURL=index.js.map