@babylonjs/inspector 8.32.0-preview → 8.32.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, treeItemLevelToken, 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';
+import { makeStyles, ToggleButton as ToggleButton$1, Button as Button$1, tokens, Link, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, mergeClasses, Body1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, 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, treeItemLevelToken, 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, PersonFeedbackRegular, DeleteFilled } from '@fluentui/react-icons';
+import { ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, Copy20Regular, 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, CopyRegular, DeleteRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, PlayRegular, AppGenericRegular, MyLocationRegular, CameraRegular, LightbulbRegular, BorderOutsideRegular, BorderNoneRegular, EyeRegular, EyeOffRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, 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';
@@ -635,7 +635,7 @@ function copyCommandToClipboard(strCommand) {
     element.remove();
 }
 
-const ToolContext = createContext({ useFluent: false, disableCopy: false, toolName: "" });
+const ToolContext = createContext({ useFluent: false, disableCopy: false, toolName: "", size: undefined });
 
 /**
  * Toggles between two states using a button with icons.
@@ -647,6 +647,7 @@ const ToolContext = createContext({ useFluent: false, disableCopy: false, toolNa
 const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
+    const { size } = useContext(ToolContext);
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prev) => {
@@ -658,23 +659,27 @@ const ToggleButton = (props) => {
     useEffect(() => {
         setChecked(props.value);
     }, [props.value]);
-    return (jsx(ToggleButton$1, { title: title, icon: checked ? jsx(props.checkedIcon, {}) : props.uncheckedIcon ? jsx(props.uncheckedIcon, {}) : jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }));
+    return (jsx(ToggleButton$1, { title: title, size: size, icon: checked ? jsx(props.checkedIcon, {}) : props.uncheckedIcon ? jsx(props.uncheckedIcon, {}) : jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }));
 };
 
 const Button = (props) => {
     Button.displayName = "Button";
+    const { size } = useContext(ToolContext);
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { icon: Icon, label, ...buttonProps } = props;
-    return (jsx(Button$1, { iconPosition: "after", ...buttonProps, icon: Icon && jsx(Icon, {}), children: label && props.label }));
+    return (jsx(Button$1, { iconPosition: "after", ...buttonProps, size: size, icon: Icon && jsx(Icon, {}), children: label && props.label }));
 };
 
 const CustomTokens = {
     inputWidth: "150px",
-    lineHeight: "36px",
+    lineHeight: tokens.lineHeightHero700, // 36px
+    lineHeightSmall: tokens.lineHeightBase500, // 28px
+    dividerGap: tokens.fontSizeBase100, // "10px",
+    dividerGapSmall: tokens.borderRadiusMedium, // 4px",
     labelMinWidth: "50px",
     sliderMinWidth: "30px",
     sliderMaxWidth: "80px",
-    rightAlignOffset: "-8px",
+    rightAlignOffset: `-${tokens.borderRadiusXLarge}`, // -8px
 };
 const UniformWidthStyling = { width: CustomTokens.inputWidth, boxSizing: "border-box" };
 const useInputStyles$1 = makeStyles({
@@ -686,7 +691,6 @@ const useInputStyles$1 = makeStyles({
         display: "flex",
         flexDirection: "column",
         justifyContent: "center", // align items vertically
-        gap: "4px",
     },
 });
 function HandleOnBlur(event) {
@@ -731,21 +735,11 @@ function CalculatePrecision(value) {
     return 0;
 }
 const HEX_REGEX = RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/);
-function ColorHexValidatorFn(val) {
+function ValidateColorHex(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: {
         display: "flex",
         alignItems: "center",
@@ -793,11 +787,11 @@ const usePropertyLineStyles = makeStyles({
  */
 const PropertyLine = forwardRef((props, ref) => {
     PropertyLine.displayName = "PropertyLine";
+    const { disableCopy, size } = useContext(ToolContext);
     const classes = usePropertyLineStyles();
     const { label, onCopy, expandedContent, children, nullable, ignoreNullable } = props;
     const [expanded, setExpanded] = useState("expandByDefault" in props ? props.expandByDefault : false);
     const cachedVal = useRef(nullable ? props.value : null);
-    const { disableCopy } = useContext(ToolContext);
     const description = props.docLink ? jsx(Link, { href: props.docLink, children: props.description ?? "Docs" }) : props.description;
     // Process children to handle nullable state -- creating component in disabled state with default value in lieu of null value
     const processedChildren = (nullable || ignoreNullable) && isValidElement(children)
@@ -808,7 +802,7 @@ const PropertyLine = forwardRef((props, ref) => {
             defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state
         })
         : children;
-    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel$1, { className: classes.infoLabel, label: { className: classes.labelSlot }, info: description ? jsx("div", { className: classes.infoPopup, children: description }) : undefined, title: label, children: jsx(Body1Strong, { className: classes.labelText, children: label }) }), jsxs("div", { className: classes.rightContent, children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: ChevronCircleDown20Regular, uncheckedIcon: ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
+    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel$1, { size: size, className: classes.infoLabel, label: { className: classes.labelSlot }, info: description ? jsx("div", { className: classes.infoPopup, children: description }) : undefined, title: label, children: jsx(Body1Strong, { className: classes.labelText, children: label }) }), jsxs("div", { className: classes.rightContent, children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
                             // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox used to toggle null ('checked' means 'non null')
                             jsx(Checkbox$1, { checked: !(props.value == null), onChange: (_, data) => {
                                     if (data.checked) {
@@ -820,11 +814,27 @@ 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", { className: classes.expandedContentDiv, children: expandedContent }) }))] }));
+                                }, title: "Toggle null state" })), processedChildren, onCopy && !disableCopy && (jsx(Button, { className: classes.copy, title: "Copy to clipboard", appearance: "transparent", icon: size === "small" ? Copy16Regular : Copy20Regular, onClick: () => copyCommandToClipboard(onCopy()) }))] })] }), expandedContent && (jsx(Collapse, { visible: !!expanded, children: jsx("div", { className: classes.expandedContentDiv, children: expandedContent }) }))] }));
+});
+const useLineStyles = 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,
+    },
+    containerSmall: {
+        minHeight: CustomTokens.lineHeightSmall,
+    },
 });
 const LineContainer = forwardRef((props, ref) => {
-    const classes = usePropertyLineStyles();
-    return (jsx("div", { ref: ref, className: classes.container, ...props, children: props.children }));
+    const { size } = useContext(ToolContext);
+    const classes = useLineStyles();
+    return (jsx("div", { ref: ref, className: mergeClasses(classes.container, size == "small" ? classes.containerSmall : undefined), ...props, children: props.children }));
 });
 const PlaceholderPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { children: props.value }) }));
@@ -865,8 +875,12 @@ const useStyles$i = makeStyles({
         height: "100%",
     },
     divider: {
-        paddingTop: "10px",
-        paddingBottom: "10px",
+        paddingTop: CustomTokens.dividerGap,
+        paddingBottom: CustomTokens.dividerGap,
+    },
+    dividerSmall: {
+        paddingTop: CustomTokens.dividerGapSmall,
+        paddingBottom: CustomTokens.dividerGapSmall,
     },
     panelDiv: {
         display: "flex",
@@ -882,6 +896,7 @@ const AccordionSection = (props) => {
 const Accordion = (props) => {
     Accordion.displayName = "Accordion";
     const classes = useStyles$i();
+    const { size } = useContext(ToolContext);
     const { children, ...rest } = props;
     const validChildren = useMemo(() => {
         return (Children.map(children, (child) => {
@@ -923,10 +938,69 @@ const Accordion = (props) => {
         }
     }, []);
     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));
+            return (jsxs(AccordionItem, { value: child.title, children: [jsx(AccordionHeader, { size: size, 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: size === "small" ? classes.dividerSmall : classes.divider })] }, child.content.key));
         }) }));
 };
 
+const CompactModeStorageKey = "Babylon/Settings/IsCompactMode";
+function useSetting(storageKey, defaultValue) {
+    const [value, setValue, resetValue] = useLocalStorage(storageKey, defaultValue);
+    if (!localStorage.getItem(storageKey)) {
+        localStorage.setItem(storageKey, JSON.stringify(value));
+    }
+    return [value, setValue, resetValue];
+}
+/**
+ * Gets the compact mode setting.
+ * @returns A tuple containing the current compact mode value, a function to update it, and a function to reset it.
+ */
+function useCompactMode() {
+    return useSetting(CompactModeStorageKey, !matchMedia("(pointer: coarse)").matches);
+}
+const RadiansToDegrees = 180 / Math.PI;
+function WrapAngle(angle) {
+    angle %= Math.PI * 2;
+    if (angle < 0) {
+        angle += Math.PI * 2;
+    }
+    return angle;
+}
+/**
+ * Gets functions used to convert to/from display values for angles based on the current settings.
+ * @param settings The settings context to use for determining if angles should be displayed in degrees or radians.
+ * @returns A tuple containing the functions to convert to and from display values.
+ */
+function useAngleConverters(settings) {
+    const useDegrees = useObservableState(() => settings.useDegrees, settings.settingsChangedObservable);
+    const toDisplayValue = useCallback((angle, wrap = false) => {
+        if (wrap) {
+            angle = WrapAngle(angle);
+        }
+        return useDegrees ? angle * RadiansToDegrees : angle;
+    }, [useDegrees]);
+    const fromDisplayValue = useCallback((angle, wrap = false) => {
+        angle = useDegrees ? angle / RadiansToDegrees : angle;
+        if (wrap) {
+            angle = WrapAngle(angle);
+        }
+        return angle;
+    }, [useDegrees]);
+    return [toDisplayValue, fromDisplayValue, useDegrees];
+}
+
+const CompactModeContextProvider = (props) => {
+    const [compactMode] = useCompactMode();
+    const toolsContext = useMemo(() => {
+        return {
+            toolName: "",
+            size: compactMode ? "small" : "medium",
+            disableCopy: false,
+            useFluent: true,
+        };
+    }, [compactMode]);
+    return jsx(ToolContext.Provider, { value: toolsContext, children: props.children });
+};
+
 function AsReadonlyArray(array) {
     return array;
 }
@@ -1023,9 +1097,9 @@ function ExtensibleAccordion(props) {
         })
             .filter((section) => section !== null);
     }, [mergedSections, mergedSectionContent, context]);
-    return (jsx("div", { className: classes.rootDiv, children: visibleSections.length > -1 && (jsxs(Accordion, { children: [...visibleSections.map((section) => {
-                    return (jsx(AccordionSection, { title: section.identity, collapseByDefault: section.collapseByDefault, children: section.components }, section.identity));
-                })] })) }));
+    return (jsx("div", { className: classes.rootDiv, children: visibleSections.length > -1 && (jsx(CompactModeContextProvider, { children: jsxs(Accordion, { children: [...visibleSections.map((section) => {
+                        return (jsx(AccordionSection, { title: section.identity, collapseByDefault: section.collapseByDefault, children: section.components }, section.identity));
+                    })] }) })) }));
 }
 
 const useStyles$g = makeStyles({
@@ -1176,37 +1250,6 @@ function useAsyncResource(factory) {
     return resource;
 }
 
-const RadiansToDegrees = 180 / Math.PI;
-function WrapAngle(angle) {
-    angle %= Math.PI * 2;
-    if (angle < 0) {
-        angle += Math.PI * 2;
-    }
-    return angle;
-}
-/**
- * Gets functions used to convert to/from display values for angles based on the current settings.
- * @param settings The settings context to use for determining if angles should be displayed in degrees or radians.
- * @returns A tuple containing the functions to convert to and from display values.
- */
-function useAngleConverters(settings) {
-    const useDegrees = useObservableState(() => settings.useDegrees, settings.settingsChangedObservable);
-    const toDisplayValue = useCallback((angle, wrap = false) => {
-        if (wrap) {
-            angle = WrapAngle(angle);
-        }
-        return useDegrees ? angle * RadiansToDegrees : angle;
-    }, [useDegrees]);
-    const fromDisplayValue = useCallback((angle, wrap = false) => {
-        angle = useDegrees ? angle / RadiansToDegrees : angle;
-        if (wrap) {
-            angle = WrapAngle(angle);
-        }
-        return angle;
-    }, [useDegrees]);
-    return [toDisplayValue, fromDisplayValue, useDegrees];
-}
-
 const SequencerLock = new AsyncLock();
 /**
  * Creates a hook for managing teaching moment state.
@@ -2098,6 +2141,10 @@ const useStyles$c = makeStyles({
         overflow: "hidden",
         textOverflow: "ellipsis",
     },
+    treeItemLayoutCompact: {
+        minHeight: CustomTokens.lineHeightSmall,
+        maxHeight: CustomTokens.lineHeightSmall,
+    },
 });
 const ActionCommand = (props) => {
     const { command } = props;
@@ -2134,17 +2181,22 @@ function MakeCommandElement(command, isPlaceholder) {
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
     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 [compactMode] = useCompactMode();
+    const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
+    return (jsx(FlatTreeItem, { value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, expandAll, collapseAll } = props;
+    const classes = useStyles$c();
+    const [compactMode] = useCompactMode();
     return (jsxs(Menu, { openOnContext: true, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { value: section.sectionName, 
                     // Disable manual expand/collapse when a filter is active.
-                    itemType: !isFiltering && section.children.length > 0 ? "branch" : "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, children: jsx(TreeItemLayout, { children: jsx(Body1Strong, { wrap: false, truncate: true, children: section.sectionName.substring(0, 100) }) }) }, section.sectionName) }), jsx(MenuPopover, { hidden: !section.children.length, children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] }) })] }));
+                    itemType: !isFiltering && section.children.length > 0 ? "branch" : "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, children: jsx(TreeItemLayout, { className: compactMode ? classes.treeItemLayoutCompact : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: section.sectionName.substring(0, 100) }) }) }, section.sectionName) }), jsx(MenuPopover, { hidden: !section.children.length, children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] }) })] }));
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll } = props;
     const classes = useStyles$c();
+    const [compactMode] = useCompactMode();
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
         const displayInfo = entityItem.getDisplayInfo();
@@ -2223,7 +2275,7 @@ const EntityTreeItem = (props) => {
     }, [commands]);
     return (jsxs(Menu, { openOnContext: true, children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsx(FlatTreeItem, { value: entityItem.entity.uniqueId, 
                     // 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, style: { [treeItemLevelToken]: entityItem.depth }, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
+                    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, style: { [treeItemLevelToken]: entityItem.depth }, children: jsx(TreeItemLayout, { iconBefore: entityItem.icon ? jsx(entityItem.icon, { entity: entityItem.entity }) : null, className: compactMode ? classes.treeItemLayoutCompact : undefined, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, actions: actions, aside: {
                             // Match the gap and padding of the actions.
                             className: classes.treeItemLayoutAside,
                             children: aside,
@@ -2513,6 +2565,10 @@ const useSwitchStyles = makeStyles({
     switch: {
         marginLeft: "auto",
     },
+    switchSmall: {
+        transform: `scale(.85)`, // workaround since we cannot resize fluent switch
+        transformOrigin: "right",
+    },
     indicator: {
         margin: 0, // Remove the default right margin so the switch aligns well on the right side inside panels like the properties pane.
     },
@@ -2524,6 +2580,7 @@ const useSwitchStyles = makeStyles({
  */
 const Switch = (props) => {
     Switch.displayName = "Switch";
+    const { size } = useContext(ToolContext);
     const classes = useSwitchStyles();
     const [checked, setChecked] = useState(() => props.value ?? false);
     useEffect(() => {
@@ -2535,7 +2592,7 @@ const Switch = (props) => {
         props.onChange && props.onChange(event.target.checked);
         setChecked(event.target.checked);
     };
-    return jsx(Switch$1, { className: classes.switch, indicator: { className: classes.indicator }, checked: checked, disabled: props.disabled, onChange: onChange });
+    return (jsx(Switch$1, { className: mergeClasses(classes.switch, size === "small" && classes.switchSmall), indicator: { className: classes.indicator }, checked: checked, disabled: props.disabled, onChange: onChange }));
 };
 
 /**
@@ -2770,7 +2827,10 @@ const SettingsServiceDefinition = {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                return (jsx(Fragment, { children: scene && (jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: scene, children: jsxs(AccordionSection, { title: "UI", children: [jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: settings.useDegrees, onChange: (checked) => {
+                const [compactMode, setCompactMode] = useCompactMode();
+                return (jsx(Fragment, { children: scene && (jsx(ExtensibleAccordion, { sections: sections, sectionContent: sectionContent, context: scene, children: jsxs(AccordionSection, { title: "UI", children: [jsx(SwitchPropertyLine, { label: "Compact Mode", description: "Use a more compact UI with less spacing.", value: compactMode, onChange: (checked) => {
+                                        setCompactMode(checked);
+                                    } }), jsx(SwitchPropertyLine, { label: "Use Degrees", description: "Using degrees instead of radians.", value: settings.useDegrees, onChange: (checked) => {
                                         settings.useDegrees = checked;
                                     } }), jsx(SwitchPropertyLine, { label: "Ignore Backfaces for Picking", description: "Ignore backfaces when picking.", value: settings.ignoreBackfacesForPicking, onChange: (checked) => {
                                         settings.ignoreBackfacesForPicking = checked;
@@ -4166,6 +4226,7 @@ const TextInput = (props) => {
     const classes = useInputStyles$1();
     const [value, setValue] = useState(props.value);
     const lastCommittedValue = useRef(props.value);
+    const { size } = useContext(ToolContext);
     useEffect(() => {
         if (props.value !== lastCommittedValue.current) {
             setValue(props.value); // Update local state when props.value changes
@@ -4195,12 +4256,13 @@ const TextInput = (props) => {
     };
     const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
     const id = useId("input-button");
-    return (jsxs("div", { className: classes.container, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: "medium", 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(Input, { ...props, input: { className: classes.inputSlot }, id: id, size: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
 };
 
 const SpinButton = (props) => {
     SpinButton.displayName = "SpinButton";
     const classes = useInputStyles$1();
+    const { size } = useContext(ToolContext);
     const { min, max } = props;
     const [value, setValue] = useState(props.value);
     const lastCommittedValue = useRef(props.value);
@@ -4244,7 +4306,7 @@ 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: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, 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: size, precision: precision, displayValue: `${value.toFixed(precision)}${props.unit ? " " + props.unit : ""}`, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: HandleOnBlur, className: mergedClassName })] }));
 };
 
 /**
@@ -4289,6 +4351,7 @@ const SyncedSliderInput = (props) => {
     SyncedSliderInput.displayName = "SyncedSliderInput";
     const { infoLabel, ...passthroughProps } = props;
     const classes = useSyncedSliderStyles();
+    const { size } = useContext(ToolContext);
     const [value, setValue] = useState(props.value);
     const pendingValueRef = useRef(undefined);
     const isDraggingRef = useRef(false);
@@ -4327,7 +4390,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: value, 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, size: size, 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 })] })] }));
 };
 
 /**
@@ -4539,7 +4602,7 @@ const TensorPropertyLine = (props) => {
     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)}` : ""}]` }) }));
+    return (jsx(PropertyLine, { ...props, onCopy: () => `new ${props.value.getClassName()}(${vector.x},${vector.y}${HasZ(vector) ? `,${vector.z}` : ""}${HasW(vector) ? `,${vector.w}` : ""})`, expandedContent: jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: props.unit, step: props.step }), jsx(SyncedSliderPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: props.unit, step: props.step }), HasZ(vector) && (jsx(SyncedSliderPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: props.unit, step: props.step })), HasW(vector) && (jsx(SyncedSliderPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: props.unit, step: props.step }))] }), children: jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
 };
 const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
 const RotationVectorPropertyLine = (props) => {
@@ -4580,7 +4643,6 @@ const useDropdownStyles = makeStyles({
         display: "flex",
         flexDirection: "column",
         justifyContent: "center", // align items vertically
-        gap: "4px",
     },
     dropdownText: { textAlign: "end", textOverflow: "ellipsis", whiteSpace: "nowrap", overflowX: "hidden" },
 });
@@ -4595,13 +4657,14 @@ const Dropdown = (props) => {
     const classes = useDropdownStyles();
     const { options, value } = props;
     const [defaultVal, setDefaultVal] = useState(props.value);
+    const { size } = useContext(ToolContext);
     useEffect(() => {
         setDefaultVal(value);
     }, [props.value]);
     const id = useId("dropdown");
     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) => {
+    return (jsxs("div", { className: mergedClassName, children: [props.infoLabel && jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), jsx(Dropdown$1, { id: id, disabled: props.disabled, size: size, 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);
@@ -4666,6 +4729,7 @@ const ColorPickerPopup = (props) => {
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [isLinear, setIsLinear] = useState(props.isLinearMode ?? false);
     const [isFloat, setFloat] = useState(false);
+    const { size } = useContext(ToolContext);
     useEffect(() => {
         setColor(props.value); // Ensures the trigger color updates when props.value changes
     }, [props.value]);
@@ -4684,7 +4748,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", 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: {
+        }, open: popoverOpen, trapFocus: true, onOpenChange: (_, data) => setPopoverOpen(data.open), children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx(ColorSwatch, { borderColor: tokens.colorNeutralShadowKeyDarker, size: size === "small" ? "extra-small" : "small", shape: "rounded", color: color.toHexString(), value: color.toHexString().slice(1) }) }), jsx(PopoverSurface, { children: jsxs("div", { className: classes.container, children: [jsxs(ColorPicker, { className: classes.colorPicker, color: rgbaToHsv(color), onColorChange: handleColorPickerChange, children: [jsx(ColorArea, { inputX: { "aria-label": "Saturation" }, inputY: { "aria-label": "Brightness" } }), jsx(ColorSlider, { "aria-label": "Hue" }), color instanceof Color4 && jsx(AlphaSlider, { "aria-label": "Alpha" })] }), jsxs("div", { className: classes.row, children: [jsx("div", { className: classes.previewColor, style: { backgroundColor: color.toHexString() } }), jsx(NumberDropdown, { className: classes.inputField, infoLabel: {
                                         label: "Color Space",
                                         info: jsx(Body1, { children: "Today this is not mutable as the color space is determined by the entity. Soon we will allow swapping" }),
                                     }, options: [
@@ -4709,7 +4773,7 @@ const ColorPickerPopup = (props) => {
 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: ColorHexValidatorFn, 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: ValidateColorHex, 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.
@@ -5495,7 +5559,9 @@ const StencilOperationOptions = [
 const MaterialGeneralProperties = (props) => {
     const { material } = props;
     const pointsCloud = useProperty(material, "pointsCloud");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Backface Culling", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/using/materials_introduction#back-face-culling", target: material, propertyKey: "backFaceCulling" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Orientation", description: "The front face side. Overrides mesh's orientation.", options: OrientationOptions, target: material, propertyKey: "sideOrientation", nullable: true, defaultValue: material.getScene().useRightHandedSystem ? Material.CounterClockWiseSideOrientation : Material.ClockWiseSideOrientation }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Color Write", target: material, propertyKey: "disableColorWrite" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Depth Write", target: material, propertyKey: "disableDepthWrite" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Depth Function", options: DepthFunctionOptions, target: material, propertyKey: "depthFunction" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Need Depth Pre-pass", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering/#depth-pre-pass-meshes", target: material, propertyKey: "needDepthPrePass" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Z-offset Factor", target: material, propertyKey: "zOffset", min: -10, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Z-offset Units", target: material, propertyKey: "zOffsetUnits", min: -10, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Wireframe", target: material, propertyKey: "wireframe" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Point Cloud", target: material, propertyKey: "pointsCloud" }), pointsCloud && jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Point Size", target: material, propertyKey: "pointSize", min: 0, max: 100, step: 0.1 })] }));
+    const faceCulling = useProperty(material, "backFaceCulling");
+    const isWebGPU = material.getScene().getEngine().isWebGPU;
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Face Culling", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/using/materials_introduction#back-face-culling", target: material, propertyKey: "backFaceCulling" }), faceCulling && (jsx(BoundProperty, { component: SwitchPropertyLine, label: "Culls back faces", description: "Culls back faces. If false, front faces are culled.", target: material, propertyKey: "cullBackFaces" })), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Orientation", description: "The front face side. Overrides mesh's orientation.", options: OrientationOptions, target: material, propertyKey: "sideOrientation", nullable: true, defaultValue: material.getScene().useRightHandedSystem ? Material.CounterClockWiseSideOrientation : Material.ClockWiseSideOrientation }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Color Write", target: material, propertyKey: "disableColorWrite" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Disable Depth Write", target: material, propertyKey: "disableDepthWrite" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: material, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Depth Function", options: DepthFunctionOptions, target: material, propertyKey: "depthFunction" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Need Depth Pre-pass", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/transparent_rendering/#depth-pre-pass-meshes", target: material, propertyKey: "needDepthPrePass" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Z-offset Factor", target: material, propertyKey: "zOffset", min: -10, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Z-offset Units", target: material, propertyKey: "zOffsetUnits", min: -10, max: 10, step: 0.1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Wireframe", target: material, propertyKey: "wireframe" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Point Cloud", target: material, propertyKey: "pointsCloud" }), pointsCloud && jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Point Size", target: material, propertyKey: "pointSize", min: 0, max: 100, step: 0.1 }), isWebGPU && jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use vertex pulling", target: material, propertyKey: "useVertexPulling" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Support fog", target: material, propertyKey: "fogEnabled", description: "Indicates whether the material supports fog (however, fog must be enabled at the scene level to be effective)." }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use logarithmic depth", target: material, propertyKey: "useLogarithmicDepth", docLink: "https://doc.babylonjs.com/features/featuresDeepDive/materials/advanced/logarithmicDepthBuffer" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Set vertex output invariant", target: material, propertyKey: "setVertexOutputInvariant", description: "Setting this property to true will force the shader compiler to disable some optimization to make sure the vertex output is always calculated the same way across different compilation units." })] }));
 };
 const MaterialTransparencyProperties = (props) => {
     const { material } = props;
@@ -5913,6 +5979,7 @@ const useStyles$4 = makeStyles({
 const MetadataProperties = (props) => {
     const { entity } = props;
     const classes = useStyles$4();
+    const { size } = useContext(ToolContext);
     const metadata = useProperty(entity, "metadata");
     const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata) ?? "", [metadata]);
     const metadataType = useMemo(() => GetMetadataEntityType(metadata), [metadata]);
@@ -5929,7 +5996,7 @@ const MetadataProperties = (props) => {
                         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)) }) })] }) })] }));
+                } }), jsx(LineContainer, { children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { size: size, 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, { size: size, icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] }));
 };
 
 function IsMetadataContainer(entity) {
@@ -6787,6 +6854,11 @@ const PhysicsPropertiesServiceDefinition = {
     },
 };
 
+const useCheckboxStyles = makeStyles({
+    indicator: {
+        margin: 0,
+    },
+});
 /**
  * This is a primitive fluent checkbox that can both read and write checked state
  * @param props
@@ -6795,6 +6867,7 @@ const PhysicsPropertiesServiceDefinition = {
 const Checkbox = (props) => {
     Checkbox.displayName = "Checkbox";
     const [checked, setChecked] = useState(() => props.value ?? false);
+    const classes = useCheckboxStyles();
     useEffect(() => {
         if (props.value != undefined) {
             setChecked(props.value); // Update local state when props.checked changes
@@ -6804,7 +6877,7 @@ const Checkbox = (props) => {
         props.onChange(ev.target.checked);
         setChecked(ev.target.checked);
     };
-    return jsx(Checkbox$1, { checked: checked, onChange: onChange, disabled: props.disabled });
+    return jsx(Checkbox$1, { checked: checked, onChange: onChange, indicator: { className: classes.indicator } });
 };
 
 /**
@@ -7382,6 +7455,7 @@ const TexturePreview = (props) => {
     const [channels, setChannels] = useState(TextureChannelStates.ALL);
     const [face, setFace] = useState(0);
     const internalTexture = useProperty(texture, "_texture");
+    const { size } = useContext(ToolContext);
     const updatePreviewCanvasSize = useCallback((previewCanvas) => {
         // This logic was brought over from inspectorv1 and can likely be refactored/simplified
         const size = texture.getSize();
@@ -7425,7 +7499,7 @@ const TexturePreview = (props) => {
     useEffect(() => {
         void updatePreviewAsync();
     }, [texture, width, height, face, channels, internalTexture]);
-    return (jsxs("div", { className: classes.root, children: [texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("canvas", { ref: canvasRef, className: classes.preview }), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
+    return (jsxs("div", { className: classes.root, children: [texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("canvas", { ref: canvasRef, className: classes.preview }), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
                     void updatePreviewAsync();
                 }, children: "Refresh" }))] }));
 };
@@ -7574,7 +7648,8 @@ 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 })] }));
+    const maxAnisotropy = texture.getScene()?.getEngine().getCaps().maxAnisotropy ?? 1;
+    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: SyncedSliderPropertyLine, label: "Anisotropy", target: texture, propertyKey: "anisotropicFilteringLevel", min: 1, max: maxAnisotropy, step: 1 })] }));
 };
 const BaseTextureTransformProperties = (props) => {
     const { texture } = props;
@@ -9208,5 +9283,5 @@ const TextAreaPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Textarea, { ...props }) }));
 };
 
-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 };
+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, useCompactMode, useEventfulState, useInterceptObservable, useObservableCollection, useObservableState, useOrderedObservableCollection, usePollingObservable, useProperty, useQuaternionProperty, useResource, useVector3Property };
 //# sourceMappingURL=index.js.map