@babylonjs/inspector 8.54.1 → 8.54.3

package/lib/{index-DBHYgAua.js → index-CIc0CbG8.js}

@@ -37,7 +37,7 @@ import { PerformanceViewerCollector } from '@babylonjs/core/Misc/PerformanceView
 import { AbstractEngine } from '@babylonjs/core/Engines/abstractEngine.js';
 import { Bone } from '@babylonjs/core/Bones/bone.js';
 import { Camera } from '@babylonjs/core/Cameras/camera.js';
-import { FrameGraphUtils, FindMainObjectRenderer, FindMainCamera } from '@babylonjs/core/FrameGraph/frameGraphUtils.js';
+import { FrameGraphUtils, FindMainCamera } from '@babylonjs/core/FrameGraph/frameGraphUtils.js';
 import { CameraGizmo } from '@babylonjs/core/Gizmos/cameraGizmo.js';
 import { GizmoManager } from '@babylonjs/core/Gizmos/gizmoManager.js';
 import { LightGizmo } from '@babylonjs/core/Gizmos/lightGizmo.js';
@@ -143,7 +143,8 @@ import { SceneSerializer } from '@babylonjs/core/Misc/sceneSerializer.js';
 import { EnvironmentTextureTools } from '@babylonjs/core/Misc/environmentTextureTools.js';
 import { ImportAnimationsAsync, SceneLoader } from '@babylonjs/core/Loading/sceneLoader.js';
 import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
-import { GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode, GLTFLoaderDefaultOptions } from '@babylonjs/loaders/glTF/glTFFileLoader.js';
+import { registeredGLTFExtensions } from '@babylonjs/loaders/glTF/2.0/glTFLoaderExtensionRegistry.js';
+import { GLTFLoaderDefaultOptions, GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode } from '@babylonjs/loaders/glTF/glTFFileLoader.js';
 import { GLTFValidation } from '@babylonjs/loaders/glTF/glTFValidation.js';
 import { EngineStore } from '@babylonjs/core/Engines/engineStore.js';
 import { DebugLayer } from '@babylonjs/core/Debug/debugLayer.js';
@@ -168,7 +169,7 @@ const TokenMap = {
     px40: tokens.lineHeightHero800,
 };
 const CustomTokens = {
-    inputWidth: "150px",
+    valueWidth: "150px",
     lineHeight: TokenMap.px36,
     lineHeightSmall: TokenMap.px28,
     dividerGap: TokenMap.px10,
@@ -176,9 +177,8 @@ const CustomTokens = {
     labelMinWidth: "50px",
     rightAlignOffset: `-${TokenMap.px8}`,
 };
-const UniformWidthStyling = { width: CustomTokens.inputWidth, boxSizing: "border-box" };
+const UniformWidthStyling = { width: CustomTokens.valueWidth, boxSizing: "border-box" };
 const useInputStyles$1 = makeStyles({
-    input: UniformWidthStyling,
     inputSlot: { textAlign: "right" },
     invalid: { backgroundColor: tokens.colorPaletteRedBackground2 },
     container: {
@@ -187,6 +187,10 @@ const useInputStyles$1 = makeStyles({
         justifyContent: "center", // align items vertically
         minWidth: 0, // Allow shrinking
     },
+    inputFill: {
+        width: "100%",
+        minWidth: 0,
+    },
 });
 function HandleOnBlur(event) {
     event.stopPropagation();
@@ -276,7 +280,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = "Button";
 
-const useStyles$V = makeStyles({
+const useStyles$Y = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -357,7 +361,7 @@ class ErrorBoundary extends Component {
     }
 }
 function ErrorFallback({ error, onRetry }) {
-    const styles = useStyles$V();
+    const styles = useStyles$Y();
     return (jsxs("div", { className: styles.root, children: [jsx(ErrorCircleRegular, { className: styles.icon }), jsx("div", { className: styles.title, children: "Something went wrong" }), jsx("div", { className: styles.message, children: "An error occurred in this component. You can try again or continue using other parts of the tool." }), jsx(Button, { label: "Try Again", appearance: "primary", onClick: onRetry }), error && jsx("div", { className: styles.details, children: error.message })] }));
 }
 
@@ -1361,7 +1365,7 @@ function useIsSectionEmpty(sectionId) {
     return hasItems;
 }
 
-const useStyles$U = makeStyles({
+const useStyles$X = makeStyles({
     accordion: {
         display: "flex",
         flexDirection: "column",
@@ -1442,6 +1446,9 @@ const useStyles$U = makeStyles({
         width: "100%",
         maxWidth: "none",
     },
+    sectionBlockEmpty: {
+        display: "none",
+    },
 });
 /**
  * Renders the menu bar and control buttons.
@@ -1450,7 +1457,7 @@ const useStyles$U = makeStyles({
  */
 const AccordionMenuBar = () => {
     AccordionMenuBar.displayName = "AccordionMenuBar";
-    const classes = useStyles$U();
+    const classes = useStyles$X();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx) {
         return null;
@@ -1474,10 +1481,11 @@ const AccordionMenuBar = () => {
 const AccordionSectionBlock = (props) => {
     AccordionSectionBlock.displayName = "AccordionSectionBlock";
     const { children, sectionId } = props;
+    const classes = useStyles$X();
     const accordionCtx = useContext(AccordionContext);
     const { context: sectionContext, isEmpty } = useAccordionSectionBlockContext(props);
     if (accordionCtx) {
-        return (jsx(AccordionSectionBlockContext.Provider, { value: sectionContext, children: !isEmpty && jsx(AccordionItem, { value: sectionId, children: children }) }));
+        return (jsx(AccordionSectionBlockContext.Provider, { value: sectionContext, children: jsx(AccordionItem, { value: sectionId, className: isEmpty ? classes.sectionBlockEmpty : undefined, children: children }) }));
     }
     return jsx(AccordionItem, { value: sectionId, children: children });
 };
@@ -1493,7 +1501,7 @@ const AccordionSectionBlock = (props) => {
 const AccordionSectionItem = (props) => {
     AccordionSectionItem.displayName = "AccordionSectionItem";
     const { children, staticItem } = props;
-    const classes = useStyles$U();
+    const classes = useStyles$X();
     const accordionCtx = useContext(AccordionContext);
     const itemState = useAccordionSectionItemState(props);
     const [ctrlMode, setCtrlMode] = useState(false);
@@ -1533,7 +1541,7 @@ const AccordionSectionItem = (props) => {
  */
 const AccordionPinnedContainer = () => {
     AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
-    const classes = useStyles$U();
+    const classes = useStyles$X();
     const accordionCtx = useContext(AccordionContext);
     return (jsx("div", { ref: accordionCtx?.pinnedContainerRef, className: classes.pinnedContainer, children: jsx(MessageBar$1, { className: classes.pinnedContainerEmpty, children: jsx(MessageBarBody, { children: "No pinned items" }) }) }));
 };
@@ -1544,7 +1552,7 @@ const AccordionPinnedContainer = () => {
  */
 const AccordionSearchBox = () => {
     AccordionSearchBox.displayName = "AccordionSearchBox";
-    const classes = useStyles$U();
+    const classes = useStyles$X();
     const accordionCtx = useContext(AccordionContext);
     if (!accordionCtx?.features.search) {
         return null;
@@ -1560,7 +1568,7 @@ const AccordionSearchBox = () => {
  */
 const AccordionSection = (props) => {
     AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$U();
+    const classes = useStyles$X();
     return jsx("div", { className: classes.panelDiv, children: props.children });
 };
 const StringAccordion = Accordion$1;
@@ -1568,7 +1576,7 @@ const Accordion = forwardRef((props, ref) => {
     Accordion.displayName = "Accordion";
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { children, highlightSections, uniqueId, enablePinnedItems, enableHiddenItems, enableSearchItems, ...rest } = props;
-    const classes = useStyles$U();
+    const classes = useStyles$X();
     const { size } = useContext(ToolContext);
     const accordionCtx = useAccordionContext(props);
     const hasPinning = accordionCtx?.features.pinning ?? false;
@@ -1665,7 +1673,7 @@ const Collapse = (props) => {
     return (jsx(Collapse$1, { visible: props.visible, orientation: props.orientation, unmountOnExit: true, children: jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
 };
 
-const useStyles$T = makeStyles({
+const useStyles$W = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1683,7 +1691,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$T();
+    const classes = useStyles$W();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prevChecked) => {
@@ -1733,7 +1741,7 @@ const InfoLabel = (props) => {
             props.onContextMenu(e);
         }
     }, [props.onContextMenu]);
-    return infoContent ? (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: infoContent, className: mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined), label: props.flexLabel ? { className: classes.labelSlot } : undefined, onContextMenu: props.onContextMenu, onClick: handleClick, children: jsx(Body1Strong, { className: classes.labelText, children: props.label }) })) : (jsx(Body1Strong, { className: mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined), onContextMenu: props.onContextMenu, onClick: handleClick, children: props.label }));
+    return infoContent ? (jsx(InfoLabel$1, { htmlFor: props.htmlFor, info: infoContent, className: mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined), label: props.flexLabel ? { className: classes.labelSlot } : undefined, onContextMenu: props.onContextMenu, onClick: handleClick, children: jsx(Body1Strong, { className: classes.labelText, children: props.label }) })) : (jsx("div", { className: mergeClasses(props.className, showCopyCursor ? classes.copyable : undefined), onContextMenu: props.onContextMenu, onClick: handleClick, children: jsx(Body1Strong, { className: classes.labelText, children: props.label }) }));
 };
 
 const ToastContext = createContext({ showToast: () => { } });
@@ -1765,6 +1773,7 @@ const usePropertyLineStyles = makeStyles({
         display: "flex",
         flex: "1 1 0", // grow=1, shrink =1, basis = 0 initial size before
         minWidth: CustomTokens.labelMinWidth,
+        overflow: "hidden",
         textAlign: "left",
     },
     rightContent: {
@@ -2027,7 +2036,7 @@ const UXContextProvider = (props) => {
 function AsReadonlyArray(array) {
     return array;
 }
-const useStyles$S = makeStyles({
+const useStyles$V = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -2042,7 +2051,7 @@ const useStyles$S = makeStyles({
  * @returns The extensible accordion component.
  */
 function ExtensibleAccordion(props) {
-    const classes = useStyles$S();
+    const classes = useStyles$V();
     const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
@@ -2167,7 +2176,7 @@ function ExtensibleAccordion(props) {
                     })] }) })) }));
 }
 
-const useStyles$R = makeStyles({
+const useStyles$U = makeStyles({
     paneRootDiv: {
         display: "flex",
         flex: 1,
@@ -2180,7 +2189,7 @@ const useStyles$R = makeStyles({
  */
 const SidePaneContainer = forwardRef((props, ref) => {
     const { className, ...rest } = props;
-    const classes = useStyles$R();
+    const classes = useStyles$U();
     return (jsx("div", { className: mergeClasses(classes.paneRootDiv, className), ref: ref, ...rest, children: props.children }));
 });
 
@@ -2451,7 +2460,7 @@ function useTheme(invert = false) {
 }
 
 // Fluent doesn't apply styling to scrollbars by default, so provide our own reasonable default.
-const useStyles$Q = makeStyles({
+const useStyles$T = makeStyles({
     root: {
         scrollbarColor: `${tokens.colorNeutralForeground3} ${tokens.colorTransparentBackground}`,
     },
@@ -2467,11 +2476,11 @@ const Theme = (props) => {
     // break any UI within the portal. Therefore, default to false.
     const { invert = false, applyStylesToPortals = false, className, ...rest } = props;
     const theme = useTheme(invert);
-    const classes = useStyles$Q();
+    const classes = useStyles$T();
     return (jsx(FluentProvider, { theme: theme, className: mergeClasses(classes.root, className), applyStylesToPortals: applyStylesToPortals, ...rest, children: props.children }));
 };
 
-const useStyles$P = makeStyles({
+const useStyles$S = makeStyles({
     extensionTeachingPopover: {
         maxWidth: "320px",
     },
@@ -2482,7 +2491,7 @@ const useStyles$P = makeStyles({
  * @returns The teaching moment popover.
  */
 const TeachingMoment = ({ shouldDisplay, positioningRef, onOpenChange, title, description }) => {
-    const classes = useStyles$P();
+    const classes = useStyles$S();
     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 })] }) }));
 };
 
@@ -2685,13 +2694,13 @@ function useImpulse() {
     return [value, pulse];
 }
 
-const useStyles$O = makeStyles({
+const useStyles$R = makeStyles({
     placeholderDiv: {
         padding: `${tokens.spacingVerticalM} ${tokens.spacingHorizontalM}`,
     },
 });
 const PropertiesPane = (props) => {
-    const classes = useStyles$O();
+    const classes = useStyles$R();
     const entity = props.context;
     return entity != null ? (jsx(ExtensibleAccordion, { ...props })) : (jsx("div", { className: classes.placeholderDiv, children: jsx(Body1Strong, { italic: true, children: "No entity selected." }) }));
 };
@@ -3017,7 +3026,7 @@ const RootComponentServiceIdentity = Symbol("RootComponent");
  * The unique identity symbol for the shell service.
  */
 const ShellServiceIdentity = Symbol("ShellService");
-const useStyles$N = makeStyles({
+const useStyles$Q = makeStyles({
     mainView: {
         flex: 1,
         display: "flex",
@@ -3230,14 +3239,14 @@ const DockMenu = (props) => {
 };
 const PaneHeader = (props) => {
     const { id, title, dockOptions } = props;
-    const classes = useStyles$N();
+    const classes = useStyles$Q();
     return (jsxs("div", { className: classes.paneHeaderDiv, children: [props.icon && (jsx("div", { className: classes.paneHeaderIcon, children: jsx(props.icon, {}) })), jsx(Subtitle2Stronger, { className: mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon), children: title }), jsx(DockMenu, { sidePaneId: id, dockOptions: dockOptions, children: jsx(Button$1, { className: classes.paneHeaderButton, appearance: "transparent", icon: jsx(MoreHorizontalRegular, {}) }) })] }));
 };
 // This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const ToolbarItem = (props) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const { verticalLocation, horizontalLocation, id, component: Component, displayName } = props;
-    const classes = useStyles$N();
+    const classes = useStyles$Q();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const title = typeof props.teachingMoment === "object" ? props.teachingMoment.title : (displayName ?? id);
@@ -3247,7 +3256,7 @@ const ToolbarItem = (props) => {
 // 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$N();
+    const classes = useStyles$Q();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
     return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) })] })) }));
@@ -3257,7 +3266,7 @@ const SidePaneTab = (props) => {
     const { location, id, isSelected, isFirst, isLast, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, } = props;
-    const classes = useStyles$N();
+    const classes = useStyles$Q();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(props.teachingMoment === false);
     const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab, isFirst ? classes.firstTab : undefined, isLast ? classes.lastTab : undefined);
@@ -3269,7 +3278,7 @@ const SidePaneTab = (props) => {
 // In "compact" mode, the tab list is integrated into the pane itself.
 // In "full" mode, the returned tab list is later injected into the toolbar.
 function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems, initialCollapsed) {
-    const classes = useStyles$N();
+    const classes = useStyles$Q();
     const [topSelectedTab, setTopSelectedTab] = useState();
     const [bottomSelectedTab, setBottomSelectedTab] = useState();
     const [collapsed, setCollapsed] = useState(initialCollapsed);
@@ -3466,7 +3475,7 @@ function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWid
                 expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
             };
             const rootComponent = () => {
-                const classes = useStyles$N();
+                const classes = useStyles$Q();
                 const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSetting(SidePaneDockOverridesSettingDescriptor);
                 // This function returns a promise that resolves after the dock change takes effect so that
                 // we can then select the re-docked pane.
@@ -4230,7 +4239,7 @@ function CoerceEntityArray(entities, sort) {
     }
     return entities;
 }
-const useStyles$M = makeStyles({
+const useStyles$P = makeStyles({
     rootDiv: {
         flex: 1,
         overflow: "hidden",
@@ -4339,14 +4348,14 @@ function MakeInlineCommandElement(command, isPlaceholder) {
 }
 const SceneTreeItem = (props) => {
     const { isSelected, select } = props;
-    const classes = useStyles$M();
+    const classes = useStyles$P();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const treeItemLayoutClass = mergeClasses(classes.sceneTreeItemLayout, compactMode ? classes.treeItemLayoutCompact : undefined);
     return (jsx(FlatTreeItem, { className: classes.treeItem, value: "scene", itemType: "leaf", parentValue: undefined, "aria-level": 1, "aria-setsize": 1, "aria-posinset": 1, onClick: select, children: jsx(TreeItemLayout, { iconBefore: jsx(GlobeRegular, {}), className: treeItemLayoutClass, style: isSelected ? { backgroundColor: tokens.colorNeutralBackground1Selected } : undefined, children: jsx(Body1Strong, { wrap: false, truncate: true, children: "Scene" }) }) }, "scene"));
 };
 const SectionTreeItem = (props) => {
     const { section, isFiltering, commandProviders, expandAll, collapseAll, isDropTarget, ...dropProps } = props;
-    const classes = useStyles$M();
+    const classes = useStyles$P();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     // Get the commands that apply to this section.
     const commands = useResource(useCallback(() => {
@@ -4363,7 +4372,7 @@ const SectionTreeItem = (props) => {
 };
 const EntityTreeItem = (props) => {
     const { entityItem, isSelected, select, isFiltering, commandProviders, expandAll, collapseAll, isDragging, isDropTarget, ...dragProps } = props;
-    const classes = useStyles$M();
+    const classes = useStyles$P();
     const [compactMode] = useSetting(CompactModeSettingDescriptor);
     const hasChildren = !!entityItem.children?.length;
     const displayInfo = useResource(useCallback(() => {
@@ -4479,7 +4488,7 @@ const EntityTreeItem = (props) => {
                         }, children: jsx(Body1, { wrap: false, truncate: true, children: name }) }) }, GetEntityId(entityItem.entity)) }), jsx(MenuPopover, { hidden: !hasChildren && contextMenuCommands.length === 0, children: jsxs(MenuList, { children: [hasChildren && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(ArrowExpandAllRegular, {}), onClick: expandAll, children: jsx(Body1, { children: "Expand All" }) }), jsx(MenuItem, { icon: jsx(ArrowCollapseAllRegular, {}), onClick: collapseAll, children: jsx(Body1, { children: "Collapse All" }) })] })), hasChildren && contextMenuCommands.length > 0 && jsx(MenuDivider, {}), contextMenuItems] }) })] }));
 };
 const SceneExplorer = (props) => {
-    const classes = useStyles$M();
+    const classes = useStyles$P();
     const { sections, entityCommandProviders, sectionCommandProviders, scene, selectedEntity = null } = props;
     const [openItems, setOpenItems] = useState(new Set());
     const [sceneVersion, setSceneVersion] = useState(0);
@@ -5524,13 +5533,9 @@ class CanvasGraphService {
         ctx.font = GraphAddonFont;
         ctx.textBaseline = "middle";
         ctx.textAlign = "left";
-        let width;
         // if the lengths are the same the estimate should be good enough given the padding.
-        if (this._tickerTextCache.text.length === longestText.length) {
-            width = this._tickerTextCache.width;
-        }
-        else {
-            width = ctx.measureText(longestText).width + 2 * TickerHorizontalPadding;
+        if (this._tickerTextCache.text.length !== longestText.length) {
+            const width = ctx.measureText(longestText).width + 2 * TickerHorizontalPadding;
             this._tickerTextCache.text = longestText;
             this._tickerTextCache.width = width;
         }
@@ -5812,10 +5817,10 @@ class CanvasGraphService {
             return Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
         }
         // next we want to handle the case where our point is beyond the y position of our line
-        let topX = 0;
-        let topY = 0;
-        let bottomX = 0;
-        let bottomY = 0;
+        let topX;
+        let topY;
+        let bottomX;
+        let bottomY;
         if (y1 >= y2) {
             topX = x1;
             topY = y1;
@@ -6108,7 +6113,7 @@ class CanvasGraphService {
     }
 }
 
-const useStyles$L = makeStyles({
+const useStyles$O = makeStyles({
     canvas: {
         flexGrow: 1,
         width: "100%",
@@ -6117,7 +6122,7 @@ const useStyles$L = makeStyles({
 });
 const CanvasGraph = (props) => {
     const { collector, scene, layoutObservable, returnToPlayheadObservable, onVisibleRangeChangedObservable, initialGraphSize } = props;
-    const classes = useStyles$L();
+    const classes = useStyles$O();
     const canvasRef = useRef(null);
     useEffect(() => {
         if (!canvasRef.current) {
@@ -6194,7 +6199,7 @@ function EvaluateExpression(rawValue) {
         return NaN;
     }
 }
-const useStyles$K = makeStyles({
+const useStyles$N = makeStyles({
     icon: {
         "&:hover": {
             color: tokens.colorBrandForeground1,
@@ -6208,7 +6213,7 @@ const useStyles$K = makeStyles({
 const SpinButton = forwardRef((props, ref) => {
     SpinButton.displayName = "SpinButton2";
     const inputClasses = useInputStyles$1();
-    const classes = useStyles$K();
+    const classes = useStyles$N();
     const { size } = useContext(ToolContext);
     const { min, max } = props;
     const baseStep = props.step ?? 1;
@@ -6350,7 +6355,7 @@ const SpinButton = forwardRef((props, ref) => {
     // Real-time validation: when editing, validate the expression; otherwise validate the committed value.
     // (validateValue already handles NaN, so no separate isNaN check needed.)
     const isInputInvalid = !validateValue(isEditing ? EvaluateExpression(editText) : value);
-    const mergedClassName = mergeClasses(inputClasses.input, isInputInvalid ? inputClasses.invalid : "", props.className);
+    const mergedClassName = mergeClasses(inputClasses.inputFill, isInputInvalid ? inputClasses.invalid : "");
     const inputSlotClassName = mergeClasses(inputClasses.inputSlot, props.inputClassName);
     const formattedValue = formatValue(value);
     const handleFocus = useCallback(() => {
@@ -6366,13 +6371,13 @@ const SpinButton = forwardRef((props, ref) => {
         setIsEditing(false);
         HandleOnBlur(event);
     }, [commitEditText, isDragging]);
-    const contentBefore = !props.disableDragButton && (isHovered || isDragging) && !isInputInvalid ? (jsx(ArrowBidirectionalUpDownFilled, { className: classes.icon, style: { cursor: isDragging ? "ns-resize" : "pointer" }, onPointerDown: handleIconPointerDown, onPointerMove: handleIconPointerMove, onPointerUp: handleIconPointerUp })) : undefined;
-    const input = (jsx("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
+    const contentBefore = !props.disableDragButton && !props.disabled && (isHovered || isDragging) && !isInputInvalid ? (jsx(ArrowBidirectionalUpDownFilled, { className: classes.icon, style: { cursor: isDragging ? "ns-resize" : "pointer" }, onPointerDown: handleIconPointerDown, onPointerMove: handleIconPointerMove, onPointerUp: handleIconPointerUp })) : undefined;
+    const input = (jsx("div", { className: props.infoLabel ? undefined : props.className, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
             if (!isDragging) {
                 setIsHovered(false);
             }
-        }, children: jsx(Input, { ref: mergedRef, id: id, appearance: "outline", size: size, className: mergedClassName, input: { className: inputSlotClassName }, value: isEditing ? editText : formattedValue, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onBlur: handleBlur, contentBefore: contentBefore, contentAfter: props.unit }) }));
-    return props.infoLabel ? (jsxs("div", { className: inputClasses.container, children: [jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), input] })) : (input);
+        }, children: jsx(Input, { ref: mergedRef, id: id, appearance: "outline", size: size, className: mergedClassName, input: { className: inputSlotClassName }, value: isEditing ? editText : formattedValue, disabled: props.disabled, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onBlur: handleBlur, contentBefore: contentBefore, contentAfter: props.unit }) }));
+    return props.infoLabel ? (jsxs("div", { className: mergeClasses(inputClasses.container, props.className), children: [jsx(InfoLabel, { ...props.infoLabel, htmlFor: id }), input] })) : (input);
 });
 
 const TextInput = (props) => {
@@ -6417,9 +6422,9 @@ const TextInput = (props) => {
             tryCommitValue(event.currentTarget.value);
         }
     };
-    const mergedClassName = mergeClasses(classes.input, !validateValue(value) ? classes.invalid : "", props.className);
+    const mergedClassName = mergeClasses(classes.inputFill, !validateValue(value) ? classes.invalid : "");
     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: size, value: value, onChange: handleChange, onKeyUp: handleKeyUp, onKeyDown: HandleKeyDown, onBlur: handleBlur, className: mergedClassName })] }));
+    return (jsxs("div", { className: mergeClasses(classes.container, props.className), 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: handleBlur, className: mergedClassName })] }));
 };
 
 const useDropdownStyles = makeStyles({
@@ -6463,7 +6468,7 @@ const Dropdown = (props) => {
 const NumberDropdown = Dropdown;
 const StringDropdown = Dropdown;
 
-const useStyles$J = makeStyles({
+const useStyles$M = makeStyles({
     surface: {
         maxWidth: "400px",
     },
@@ -6478,7 +6483,7 @@ const useStyles$J = makeStyles({
 const Popover = forwardRef((props, ref) => {
     const { children, open: controlledOpen, onOpenChange, positioning, surfaceClassName } = props;
     const [internalOpen, setInternalOpen] = useState(false);
-    const classes = useStyles$J();
+    const classes = useStyles$M();
     const isControlled = controlledOpen !== undefined;
     const popoverOpen = isControlled ? controlledOpen : internalOpen;
     const handleOpenChange = (_, data) => {
@@ -6667,7 +6672,7 @@ const InputAlphaField = (props) => {
         } }));
 };
 
-const useStyles$I = makeStyles({
+const useStyles$L = makeStyles({
     sidebar: {
         display: "flex",
         flexDirection: "column",
@@ -6731,7 +6736,7 @@ const useStyles$I = makeStyles({
 });
 const PerformanceSidebar = (props) => {
     const { collector, onVisibleRangeChangedObservable } = props;
-    const classes = useStyles$I();
+    const classes = useStyles$L();
     // Map from id to IPerfMetadata information
     const [metadataMap, setMetadataMap] = useState();
     // Map from category to all the ids belonging to that category
@@ -6804,7 +6809,7 @@ const PerformanceSidebar = (props) => {
                     })] }, `category-${category || "version"}`))) }));
 };
 
-const useStyles$H = makeStyles({
+const useStyles$K = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -6833,7 +6838,7 @@ const useStyles$H = makeStyles({
 });
 const PerformanceViewer = (props) => {
     const { scene, layoutObservable, returnToLiveObservable, performanceCollector, initialGraphSize } = props;
-    const classes = useStyles$H();
+    const classes = useStyles$K();
     const [onVisibleRangeChangedObservable] = useState(() => new Observable());
     const onReturnToPlayheadClick = () => {
         returnToLiveObservable.notifyObservers();
@@ -7002,14 +7007,14 @@ const TextPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { title: title, children: value ?? "" }) }));
 };
 
-const useStyles$G = makeStyles({
+const useStyles$J = makeStyles({
     pinnedStatsPane: {
         flex: "0 1 auto",
         paddingBottom: tokens.spacingHorizontalM,
     },
 });
 const StatsPane = (props) => {
-    const classes = useStyles$G();
+    const classes = useStyles$J();
     const scene = props.context;
     const engine = scene.getEngine();
     const pollingObservable = usePollingObservable(250);
@@ -7167,7 +7172,7 @@ const ToolsServiceDefinition = {
     },
 };
 
-const useStyles$F = makeStyles({
+const useStyles$I = makeStyles({
     dropdown: {
         ...UniformWidthStyling,
     },
@@ -7179,7 +7184,7 @@ const useStyles$F = makeStyles({
  */
 const DropdownPropertyLine = forwardRef((props, ref) => {
     DropdownPropertyLine.displayName = "DropdownPropertyLine";
-    const classes = useStyles$F();
+    const classes = useStyles$I();
     return (jsx(PropertyLine, { ...props, ref: ref, children: jsx(Dropdown, { ...props, className: classes.dropdown }) }));
 });
 /**
@@ -7252,20 +7257,27 @@ const useSyncedSliderStyles = makeStyles({
         alignItems: "center",
         minWidth: 0,
     },
+    // Default: 50/50 split between slider and spinbutton
     slider: {
-        flex: "1 1 auto",
-        minWidth: "75px",
-        maxWidth: "75px",
+        flex: "1 1 0",
+        minWidth: 0,
+    },
+    spinButton: {
+        flex: "1 1 0",
+        minWidth: 0,
+    },
+    spinButtonInput: {
+        minWidth: "0",
     },
+    // compact/growSlider overrides for standalone (non-PropertyLine) usage
     compactSlider: {
         flex: "1 1 auto",
-        minWidth: "50px", // Allow shrinking for compact mode
+        minWidth: "50px",
         maxWidth: "75px",
     },
     growSlider: {
         flex: "1 1 auto",
         minWidth: "50px",
-        // No maxWidth - slider grows to fill available space
     },
     compactSpinButton: {
         width: "65px",
@@ -7317,7 +7329,7 @@ const SyncedSliderInput = (props) => {
         props.onChange(value); // Input always updates immediately
     };
     const hasSlider = props.min !== undefined && props.max !== undefined;
-    // Determine Slider className based on props
+    const useCompactSizing = props.compact || props.growSlider;
     const getSliderClassName = () => {
         if (props.growSlider) {
             return classes.growSlider;
@@ -7327,9 +7339,14 @@ const SyncedSliderInput = (props) => {
         }
         return classes.slider;
     };
-    return (jsxs("div", { className: classes.container, children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { className: getSliderClassName(), value: value, onChange: handleSliderChange, min: props.min, max: props.max, step: props.step, disabled: props.disabled, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: hasSlider || props.compact ? classes.compactSpinButton : undefined, inputClassName: hasSlider || props.compact ? classes.compactSpinButtonInput : undefined, value: value, onChange: handleInputChange, step: props.step, disableDragButton: true })] })] }));
+    return (jsxs("div", { className: mergeClasses(classes.container, props.className), children: [infoLabel && jsx(InfoLabel, { ...infoLabel, htmlFor: "syncedSlider" }), jsxs("div", { id: "syncedSlider", className: classes.syncedSlider, children: [hasSlider && (jsx(Slider, { className: getSliderClassName(), value: value, onChange: handleSliderChange, min: props.min, max: props.max, step: props.step, disabled: props.disabled, onPointerDown: handleSliderPointerDown, onPointerUp: handleSliderPointerUp })), jsx(SpinButton, { ...passthroughProps, className: useCompactSizing ? classes.compactSpinButton : classes.spinButton, inputClassName: useCompactSizing ? classes.compactSpinButtonInput : classes.spinButtonInput, value: value, onChange: handleInputChange, step: props.step, disabled: props.disabled, disableDragButton: true })] })] }));
 };
 
+const useStyles$H = makeStyles({
+    uniformWidth: {
+        ...UniformWidthStyling,
+    },
+});
 /**
  * Renders a simple wrapper around the SyncedSliderInput
  * @param props
@@ -7337,8 +7354,9 @@ const SyncedSliderInput = (props) => {
  */
 const SyncedSliderPropertyLine = forwardRef((props, ref) => {
     SyncedSliderPropertyLine.displayName = "SyncedSliderPropertyLine";
+    const classes = useStyles$H();
     const { label, description, ...sliderProps } = props;
-    return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps }) }));
+    return (jsx(PropertyLine, { ref: ref, ...props, children: jsx(SyncedSliderInput, { ...sliderProps, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 });
 
 const WatcherSettingDescriptor = {
@@ -7779,7 +7797,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-DnszM-9c.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-D-cyDKNQ.js'),
     },
     {
         name: "Reflector",
@@ -7787,7 +7805,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-Dis4AcAP.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-DNf_o1rS.js'),
     },
 ]);
 
@@ -7825,6 +7843,11 @@ const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children:
 const Color3PropertyLine = ColorPropertyLine;
 const Color4PropertyLine = ColorPropertyLine;
 
+const useStyles$G = makeStyles({
+    uniformWidth: {
+        ...UniformWidthStyling,
+    },
+});
 /**
  * Wraps a text input in a property line
  * @param props - PropertyLineProps and InputProps
@@ -7832,7 +7855,8 @@ const Color4PropertyLine = ColorPropertyLine;
  */
 const TextInputPropertyLine = (props) => {
     TextInputPropertyLine.displayName = "TextInputPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props }) }));
+    const classes = useStyles$G();
+    return (jsx(PropertyLine, { ...props, children: jsx(TextInput, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 /**
  * Wraps a number input in a property line
@@ -7842,7 +7866,8 @@ const TextInputPropertyLine = (props) => {
  */
 const NumberInputPropertyLine = (props) => {
     NumberInputPropertyLine.displayName = "NumberInputPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
+    const classes = useStyles$G();
+    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
 const HasZ = (vector) => !(vector instanceof Vector2);
@@ -8397,7 +8422,7 @@ class ServiceContainer {
     }
 }
 
-const useStyles$E = makeStyles({
+const useStyles$F = makeStyles({
     themeButton: {
         margin: 0,
     },
@@ -8416,7 +8441,7 @@ const ThemeSelectorServiceDefinition = {
             teachingMoment: false,
             order: -300,
             component: () => {
-                const classes = useStyles$E();
+                const classes = useStyles$F();
                 const { isDarkMode, themeMode, setThemeMode } = useThemeMode();
                 const onSelectedThemeChange = useCallback((e, data) => {
                     setThemeMode(data.checkedItems.includes("System") ? "system" : data.checkedItems[0].toLocaleLowerCase());
@@ -8433,7 +8458,7 @@ const ThemeSelectorServiceDefinition = {
     },
 };
 
-const useStyles$D = makeStyles({
+const useStyles$E = makeStyles({
     app: {
         colorScheme: "light dark",
         flexGrow: 1,
@@ -8473,7 +8498,7 @@ function MakeModularTool(options) {
         settingsStore.writeSetting(ThemeModeSettingDescriptor, themeMode);
     }
     const modularToolRootComponent = () => {
-        const classes = useStyles$D();
+        const classes = useStyles$E();
         const [extensionManagerContext, setExtensionManagerContext] = useState();
         const [requiredExtensions, setRequiredExtensions] = useState();
         const [requiredExtensionsDeferred, setRequiredExtensionsDeferred] = useState();
@@ -8516,7 +8541,7 @@ function MakeModularTool(options) {
                 }
                 // Register the extension list service (for browsing/installing extensions) if extension feeds are provided.
                 if (extensionFeeds.length > 0) {
-                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-ClgMe11V.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService--XzVqzeM.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -8623,7 +8648,7 @@ const BreakTangentIcon = createFluentIcon("BreakTangent", "20", '<g transform="s
 const UnifyTangentIcon = createFluentIcon("UnifyTangent", "20", '<g transform="scale(0.5)"><path d="M27.94,18.28a1.49,1.49,0,0,0-1.41,1h-5l-1.62-1.63-1.62,1.63h-5a1.5,1.5,0,1,0,0,1h5l1.62,1.62,1.62-1.62h5a1.5,1.5,0,1,0,1.41-2Z"/></g>');
 const StepTangentIcon = createFluentIcon("StepTangent", "20", '<g transform="scale(0.5)"><path d="M29,16.71a1.5,1.5,0,1,0-2,1.41v5.67H11v1H28V18.12A1.51,1.51,0,0,0,29,16.71Z"/></g>');
 
-const useStyles$C = makeStyles({
+const useStyles$D = makeStyles({
     coordinatesModeButton: {
         margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
     },
@@ -8639,7 +8664,7 @@ const useStyles$C = makeStyles({
 });
 const GizmoToolbar = (props) => {
     const { gizmoService, sceneContext } = props;
-    const classes = useStyles$C();
+    const classes = useStyles$D();
     const gizmoMode = useObservableState(() => gizmoService.gizmoMode, gizmoService.onGizmoModeChanged);
     const coordinatesMode = useObservableState(() => gizmoService.coordinatesMode, gizmoService.onCoordinatesModeChanged);
     const cameraGizmo = useObservableState(() => gizmoService.gizmoCamera, gizmoService.onCameraGizmoChanged);
@@ -8768,7 +8793,7 @@ const HighlightServiceDefinition = {
     },
 };
 
-const useStyles$B = makeStyles({
+const useStyles$C = makeStyles({
     badge: {
         margin: tokens.spacingHorizontalXXS,
         fontFamily: "monospace",
@@ -8785,7 +8810,7 @@ const MiniStatsServiceDefinition = {
             order: 300 /* DefaultToolbarItemOrder.FrameRate */,
             teachingMoment: false,
             component: () => {
-                const classes = useStyles$B();
+                const classes = useStyles$C();
                 const scene = useObservableState(useCallback(() => sceneContext.currentScene, [sceneContext.currentScene]), sceneContext.currentSceneObservable);
                 const engine = scene?.getEngine();
                 const pollingObservable = usePollingObservable(250);
@@ -9114,7 +9139,7 @@ function useCurveEditor() {
     return context;
 }
 
-const useStyles$A = makeStyles({
+const useStyles$B = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -9158,7 +9183,7 @@ const useStyles$A = makeStyles({
  * @returns The top bar component
  */
 const TopBar = () => {
-    const styles = useStyles$A();
+    const styles = useStyles$B();
     const { state, observables } = useCurveEditor();
     const [keyFrameValue, setKeyFrameValue] = useState(null);
     const [keyValue, setKeyValue] = useState(null);
@@ -9251,7 +9276,7 @@ const ColorChannelColors = {
  */
 const DefaultCurveColor = "#ffffff";
 
-const useStyles$z = makeStyles({
+const useStyles$A = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9293,7 +9318,7 @@ const LOOP_MODES$1 = [
  * @returns The edit animation panel component
  */
 const EditAnimationPanel = ({ animation, onClose }) => {
-    const styles = useStyles$z();
+    const styles = useStyles$A();
     const { observables } = useCurveEditor();
     const [name, setName] = useState(animation.name);
     const [property, setProperty] = useState(animation.targetProperty);
@@ -9324,7 +9349,7 @@ const EditAnimationPanel = ({ animation, onClose }) => {
     return (jsxs("div", { className: styles.root, children: [jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(Input, { value: name, onChange: (_, data) => setName(data.value), placeholder: "Animation name" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), jsx(Input, { value: property, onChange: (_, data) => setProperty(data.value), placeholder: "e.g., position, rotation, scaling" })] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Loop Mode" }), jsx(Dropdown$1, { value: getLoopModeLabel(loopMode), selectedOptions: [loopMode.toString()], onOptionSelect: (_, data) => setLoopMode(Number(data.optionValue)), positioning: "below", inlinePopup: true, children: LOOP_MODES$1.map((mode) => (jsx(Option, { value: mode.value.toString(), children: mode.label }, mode.value))) })] })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveChanges, label: "Save", disabled: !isValid }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
-const useStyles$y = makeStyles({
+const useStyles$z = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9390,7 +9415,7 @@ const useStyles$y = makeStyles({
  * @returns Animation entry component
  */
 const AnimationEntry = ({ animation }) => {
-    const styles = useStyles$y();
+    const styles = useStyles$z();
     const { state, actions, observables } = useCurveEditor();
     const [isExpanded, setIsExpanded] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -9469,7 +9494,7 @@ const AnimationEntry = ({ animation }) => {
  * @returns Animation sub-entry component
  */
 const AnimationSubEntry = ({ animation, subName, color }) => {
-    const styles = useStyles$y();
+    const styles = useStyles$z();
     const { actions, observables } = useCurveEditor();
     const activeChannel = actions.getActiveChannel(animation);
     const isThisChannelActive = activeChannel === color;
@@ -9492,7 +9517,7 @@ const AnimationSubEntry = ({ animation, subName, color }) => {
  * @returns Animation list component
  */
 const AnimationList = () => {
-    const styles = useStyles$y();
+    const styles = useStyles$z();
     const { state, observables } = useCurveEditor();
     // Re-render when animations are loaded or changed (e.g. animation deleted)
     // useCallback stabilizes the accessor to prevent infinite re-render loops
@@ -9505,7 +9530,7 @@ const AnimationList = () => {
         }) }));
 };
 
-const useStyles$x = makeStyles({
+const useStyles$y = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9554,7 +9579,7 @@ const LoopModeOptions = LOOP_MODES.map((lm) => ({ label: lm, value: lm }));
  * @returns The add animation panel component
  */
 const AddAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$x();
+    const styles = useStyles$y();
     const { state, actions, observables } = useCurveEditor();
     const [name, setName] = useState("");
     const [mode, setMode] = useState("List");
@@ -9771,7 +9796,7 @@ const AddAnimationPanel = ({ onClose }) => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.header, children: jsx("div", { className: styles.title, children: "Add Animation" }) }), jsxs("div", { className: styles.form, children: [jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Display Name" }), jsx(TextInput, { value: name, onChange: setName })] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: mode, onChange: (val) => setMode(val), options: ModeOptions, disabled: properties.length === 0, infoLabel: { label: "Mode" } }) }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Property" }), isCustomMode ? (jsx(TextInput, { value: customProperty, onChange: setCustomProperty })) : (jsx(StringDropdown, { value: selectedProperty, onChange: (val) => setSelectedProperty(val), options: properties.map((p) => ({ label: p, value: p })) }))] }), jsxs("div", { className: styles.row, children: [jsx(Label, { children: "Type" }), isCustomMode ? (jsx(StringDropdown, { value: animationType, onChange: (val) => setAnimationType(val), options: AnimationTypeOptions })) : (jsx("div", { className: styles.typeDisplay, children: inferredType }))] }), jsx("div", { className: styles.row, children: jsx(StringDropdown, { value: loopMode, onChange: (val) => setLoopMode(val), options: LoopModeOptions, infoLabel: { label: "Loop Mode" } }) })] }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: createAnimation, disabled: !isValid, label: "Create" }), jsx(Button, { appearance: "subtle", onClick: onClose, label: "Cancel" })] })] }));
 };
 
-const useStyles$w = makeStyles({
+const useStyles$x = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9814,7 +9839,7 @@ const useStyles$w = makeStyles({
  * @returns The load animation panel component
  */
 const LoadAnimationPanel = ({ onClose }) => {
-    const styles = useStyles$w();
+    const styles = useStyles$x();
     const { state, actions, observables } = useCurveEditor();
     const [snippetIdInput, setSnippetIdInput] = useState("");
     const [loadedSnippetId, setLoadedSnippetId] = useState(null);
@@ -9953,7 +9978,7 @@ class StringTools {
     }
 }
 
-const useStyles$v = makeStyles({
+const useStyles$w = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -9998,7 +10023,7 @@ const useStyles$v = makeStyles({
  * @returns The save animation panel component
  */
 const SaveAnimationPanel = ({ onClose: _onClose }) => {
-    const styles = useStyles$v();
+    const styles = useStyles$w();
     const { state } = useCurveEditor();
     const [selectedAnimations, setSelectedAnimations] = useState(() => {
         if (!state.animations) {
@@ -10071,7 +10096,7 @@ const SaveAnimationPanel = ({ onClose: _onClose }) => {
                 }) }), jsxs("div", { className: styles.buttons, children: [jsx(Button, { appearance: "primary", onClick: saveToSnippetServer, disabled: selectedAnimations.length === 0 || isSaving, label: isSaving ? "Saving..." : "Save to Snippet Server" }), jsx(Button, { appearance: "secondary", onClick: saveToFile, disabled: selectedAnimations.length === 0, label: "Save to File" })] }), saveError && jsx("div", { className: styles.errorText, children: saveError }), snippetId && jsxs("div", { className: styles.snippetId, children: ["Saved! Snippet ID: ", snippetId] })] }));
 };
 
-const useStyles$u = makeStyles({
+const useStyles$v = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -10125,7 +10150,7 @@ const useStyles$u = makeStyles({
  * @returns The sidebar component
  */
 const SideBar = () => {
-    const styles = useStyles$u();
+    const styles = useStyles$v();
     const { state, actions, observables } = useCurveEditor();
     const [openPopover, setOpenPopover] = useState(null);
     const [fps, setFps] = useState(60);
@@ -11113,7 +11138,7 @@ const KeyPointComponent = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$t = makeStyles({
+const useStyles$u = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -11297,7 +11322,7 @@ function ExtractValuesFromKeys(keys, curves) {
  * @returns The graph component
  */
 const Graph = ({ width, height }) => {
-    const styles = useStyles$t();
+    const styles = useStyles$u();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -11660,7 +11685,7 @@ const Graph = ({ width, height }) => {
                     }), renderValueAxis()] })] }));
 };
 
-const useStyles$s = makeStyles({
+const useStyles$t = makeStyles({
     root: {
         position: "absolute",
         top: 0,
@@ -11703,7 +11728,7 @@ const useStyles$s = makeStyles({
  * @returns The playhead component
  */
 const PlayHead = ({ width, height: _height }) => {
-    const styles = useStyles$s();
+    const styles = useStyles$t();
     const { state, actions, observables } = useCurveEditor();
     const [isDragging, setIsDragging] = useState(false);
     // Use refs for all mutable values to avoid render cycles
@@ -11854,7 +11879,7 @@ const PlayHead = ({ width, height: _height }) => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { ref: lineRef, className: styles.line, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp }), jsx("div", { ref: handleRef, className: styles.handle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp })] }));
 };
 
-const useStyles$r = makeStyles({
+const useStyles$s = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -11886,7 +11911,7 @@ const useStyles$r = makeStyles({
  * @returns The frame bar component
  */
 const FrameBar = ({ width }) => {
-    const styles = useStyles$r();
+    const styles = useStyles$s();
     const { state, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [scale, setScale] = useState(1);
@@ -11915,7 +11940,7 @@ const FrameBar = ({ width }) => {
             return ticks;
         }
         // Determine tick spacing based on zoom level
-        let tickSpacing = 10;
+        let tickSpacing;
         if (range > 500) {
             tickSpacing = 100;
         }
@@ -11944,7 +11969,7 @@ const FrameBar = ({ width }) => {
     return (jsx("div", { className: styles.root, ref: containerRef, children: renderTicks() }));
 };
 
-const useStyles$q = makeStyles({
+const useStyles$r = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -11985,7 +12010,7 @@ const OFFSET_X = 10;
  * @returns The range frame bar component
  */
 const RangeFrameBar = ({ width }) => {
-    const styles = useStyles$q();
+    const styles = useStyles$r();
     const { state, actions, observables } = useCurveEditor();
     const svgRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(width);
@@ -12096,7 +12121,7 @@ const RangeFrameBar = ({ width }) => {
                 }), renderKeyframes, renderActiveFrame] }) }));
 };
 
-const useStyles$p = makeStyles({
+const useStyles$q = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -12128,7 +12153,7 @@ const useStyles$p = makeStyles({
  * @returns The canvas component
  */
 const Canvas = () => {
-    const styles = useStyles$p();
+    const styles = useStyles$q();
     const { observables } = useCurveEditor();
     const containerRef = useRef(null);
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -12158,7 +12183,7 @@ const Canvas = () => {
     return (jsxs("div", { className: styles.root, ref: containerRef, children: [jsx("div", { className: styles.frameBar, children: jsx(FrameBar, { width: dimensions.width }) }), jsxs("div", { className: styles.canvasArea, children: [jsx(Graph, { width: dimensions.width, height: dimensions.height - 70 }), jsx(PlayHead, { width: dimensions.width, height: dimensions.height - 70 })] }), jsx("div", { className: styles.rangeFrameBar, children: jsx(RangeFrameBar, { width: dimensions.width }) })] }));
 };
 
-const useStyles$o = makeStyles({
+const useStyles$p = makeStyles({
     root: {
         flex: 1,
         height: "25px",
@@ -12220,7 +12245,7 @@ const useStyles$o = makeStyles({
  * @returns The range selector component
  */
 const RangeSelector = () => {
-    const styles = useStyles$o();
+    const styles = useStyles$p();
     const { state, actions, observables } = useCurveEditor();
     const containerRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -12365,7 +12390,7 @@ function GetKeyAtAnyFrameIndex(animations, frame) {
     }
     return false;
 }
-const useStyles$n = makeStyles({
+const useStyles$o = makeStyles({
     root: {
         display: "flex",
         flexDirection: "row",
@@ -12422,7 +12447,7 @@ MediaControls.displayName = "MediaControls";
  * @returns The BottomBar component.
  */
 const BottomBar = () => {
-    const styles = useStyles$n();
+    const styles = useStyles$o();
     const { state, actions, observables } = useCurveEditor();
     // Track display frame separately for smooth updates during playback
     const [displayFrame, setDisplayFrame] = useState(state.activeFrame);
@@ -12537,7 +12562,7 @@ const BottomBar = () => {
     return (jsxs("div", { className: styles.root, children: [jsx("div", { className: styles.mediaControls, children: jsx(MediaControls, { hasActiveAnimations: hasActiveAnimations, isPlaying: state.isPlaying, forwardAnimation: state.forwardAnimation, onPlayForward: handlePlayForward, onPlayBackward: handlePlayBackward, onStop: handleStop, onPrevKey: handlePrevKey, onNextKey: handleNextKey, onFirstFrame: handleFirstFrame, onLastFrame: handleLastFrame }) }), jsxs("div", { className: styles.frameDisplay, children: [jsx("div", { className: styles.frameLabel, children: "Frame:" }), jsx(SpinButton, { className: styles.spinButton, value: displayFrame, onChange: handleFrameChange, min: state.fromKey, max: state.toKey, disabled: !hasActiveAnimations })] }), jsx(RangeSelector, {}), jsxs("div", { className: styles.clipLengthSection, children: [jsx("div", { className: styles.frameLabel, children: "Clip Length:" }), jsx(SpinButton, { className: styles.spinButton, value: clipLength, onChange: handleClipLengthChange, min: 1, disabled: !hasActiveAnimations })] })] }));
 };
 
-const useStyles$m = makeStyles({
+const useStyles$n = makeStyles({
     root: {
         display: "flex",
         flexDirection: "column",
@@ -12586,7 +12611,7 @@ const useStyles$m = makeStyles({
  * @returns The curve editor content
  */
 const CurveEditorContent = () => {
-    const styles = useStyles$m();
+    const styles = useStyles$n();
     const { state, actions, observables } = useCurveEditor();
     const rootRef = useRef(null);
     const prepareRef = useRef(() => actions.prepare());
@@ -13973,7 +13998,7 @@ async function EditNodeMaterial(material) {
     await material.edit({ nodeEditorConfig: { backgroundColor: material.getScene().clearColor } });
 }
 
-const useStyles$l = makeStyles({
+const useStyles$m = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -14047,7 +14072,7 @@ const GradientBlockPropertyLine = (props) => {
 };
 const NodeMaterialInputProperties = (props) => {
     const { material } = props;
-    const classes = useStyles$l();
+    const classes = useStyles$m();
     const inputBlocks = useObservableState(useCallback(() => {
         const inspectorVisibleInputBlocks = material
             .getInputBlocks()
@@ -14269,7 +14294,7 @@ const OpenPBRMaterialGeometryProperties = (props) => {
                 } })] }));
 };
 
-const useStyles$k = makeStyles({
+const useStyles$l = makeStyles({
     root: {
         display: "grid",
         gridTemplateRows: "repeat(1fr)",
@@ -14278,8 +14303,8 @@ const useStyles$k = makeStyles({
         maxWidth: "400px",
     },
     comboBox: {
-        width: CustomTokens.inputWidth,
-        minWidth: CustomTokens.inputWidth,
+        width: CustomTokens.valueWidth,
+        minWidth: CustomTokens.valueWidth,
         boxSizing: "border-box",
     },
     input: {
@@ -14299,7 +14324,7 @@ const useStyles$k = makeStyles({
 const ComboBox = forwardRef((props, ref) => {
     ComboBox.displayName = "ComboBox";
     const comboId = useId();
-    const styles = useStyles$k();
+    const styles = useStyles$l();
     const { size } = useContext(ToolContext);
     // Find the label for the current value
     const getLabel = (value) => props.options.find((opt) => opt.value === value)?.label ?? "";
@@ -14322,7 +14347,7 @@ const ComboBox = forwardRef((props, ref) => {
     return (jsxs("div", { className: styles.root, children: [jsx("label", { id: comboId, children: props.label }), jsx(Combobox, { ref: ref, defaultOpen: props.defaultOpen, size: size, root: { className: styles.comboBox }, input: { className: styles.input }, listbox: { className: styles.listbox }, onOptionSelect: onOptionSelect, "aria-labelledby": comboId, placeholder: "Search..", onChange: (ev) => setQuery(ev.target.value), value: query, children: children })] }));
 });
 
-const useStyles$j = makeStyles({
+const useStyles$k = makeStyles({
     linkDiv: {
         display: "flex",
         flexDirection: "row",
@@ -14347,7 +14372,7 @@ const useStyles$j = makeStyles({
 function EntitySelector(props) {
     const { value, onLink, getEntities, getName, filter, defaultValue } = props;
     const onChange = props.onChange;
-    const classes = useStyles$j();
+    const classes = useStyles$k();
     const comboBoxRef = useRef(null);
     // Build options with uniqueId as key
     const options = useMemo(() => {
@@ -14479,7 +14504,7 @@ const TextureUpload = (props) => {
     return jsx(UploadButton, { onUpload: handleUpload, accept: accept, title: "Upload Texture", label: label });
 };
 
-const useStyles$i = makeStyles({
+const useStyles$j = makeStyles({
     container: {
         display: "flex",
         flexDirection: "row",
@@ -14496,7 +14521,7 @@ const useStyles$i = makeStyles({
 const TextureSelector = (props) => {
     TextureSelector.displayName = "TextureSelector";
     const { scene, cubeOnly, value, onChange, onLink, defaultValue } = props;
-    const classes = useStyles$i();
+    const classes = useStyles$j();
     const getTextures = useCallback(() => scene.textures, [scene.textures]);
     const getName = useCallback((texture) => texture.displayName || texture.name || `${texture.getClassName() || "Unnamed Texture"} (${texture.uniqueId})`, []);
     const filter = useCallback((texture) => !cubeOnly || texture.isCube, [cubeOnly]);
@@ -15087,7 +15112,7 @@ function SaveMetadata(entity, metadata) {
         entity.metadata = metadata;
     }
 }
-const useStyles$h = makeStyles({
+const useStyles$i = makeStyles({
     mainDiv: {
         display: "flex",
         flexDirection: "column",
@@ -15107,7 +15132,7 @@ const useStyles$h = makeStyles({
  */
 const MetadataProperties = (props) => {
     const { entity } = props;
-    const classes = useStyles$h();
+    const classes = useStyles$i();
     const { size } = useContext(ToolContext);
     const metadata = useProperty(entity, "metadata");
     const stringifiedMetadata = useMemo(() => StringifyMetadata(metadata, false) ?? "", [metadata]);
@@ -15653,7 +15678,7 @@ async function SaveToSnippetServer(config) {
     catch (e) {
         const errorMsg = `Unable to save your ${entityName ?? "content"}: ${e}`;
         alert(errorMsg);
-        throw new Error(errorMsg);
+        throw new Error(errorMsg, { cause: e });
     }
     if (!response.ok) {
         const errorMsg = `Unable to save your ${entityName ?? "content"}`;
@@ -16051,7 +16076,7 @@ function useObservableArray(target, getItems, addFn, removeFn, changeFn) {
     }, [getItems]), useInterceptObservable("function", target, addFn), useInterceptObservable("function", target, removeFn), changeFn ? useInterceptObservable("function", target, changeFn) : undefined);
 }
 
-const useStyles$g = makeStyles({
+const useStyles$h = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -16071,7 +16096,7 @@ const ParticleSystemSizeProperties = (props) => {
     const sizeGradientGetter = useCallback(() => system.getSizeGradients(), [system]);
     const sizeGradient = useObservableArray(system, sizeGradientGetter, "addSizeGradient", "removeSizeGradient", "forceRefreshGradients");
     const useSizeGradients = (sizeGradient?.length ?? 0) > 0;
-    const classes = useStyles$g();
+    const classes = useStyles$h();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min size", target: system, propertyKey: "minSize", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max size", target: system, propertyKey: "maxSize", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min scale x", target: system, propertyKey: "minScaleX", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max scale x", target: system, propertyKey: "maxScaleX", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min scale y", target: system, propertyKey: "minScaleY", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max scale y", target: system, propertyKey: "maxScaleY", min: 0, step: 0.1 }), isCpuParticleSystem && !useStartSizeGradients && (jsx(ButtonLine, { label: "Use Start Size gradients", onClick: () => {
                     system.addStartSizeGradient(0, system.minSize, system.maxSize);
                     system.forceRefreshGradients();
@@ -16107,7 +16132,7 @@ const ParticleSystemSizeProperties = (props) => {
                         } })] }))] }));
 };
 
-const useStyles$f = makeStyles({
+const useStyles$g = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -16133,7 +16158,7 @@ const ParticleSystemEmissionProperties = (props) => {
     const useVelocityGradients = (velocityGradients?.length ?? 0) > 0;
     const useLimitVelocityGradients = (limitVelocityGradients?.length ?? 0) > 0;
     const useDragGradients = (dragGradients?.length ?? 0) > 0;
-    const classes = useStyles$f();
+    const classes = useStyles$g();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Emit rate", target: system, propertyKey: "emitRate", min: 0, step: 1 }), isCpuParticleSystem && !useEmitRateGradients && (jsx(ButtonLine, { label: "Use Emit rate gradients", onClick: () => {
                     system.addEmitRateGradient(0, system.emitRate, system.emitRate);
                     system.forceRefreshGradients();
@@ -16201,7 +16226,7 @@ const ParticleSystemEmissionProperties = (props) => {
                         } })] }))] }));
 };
 
-const useStyles$e = makeStyles({
+const useStyles$f = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -16218,7 +16243,7 @@ const ParticleSystemLifetimeProperties = (props) => {
     const lifeTimeGradientsGetter = useCallback(() => system.getLifeTimeGradients(), [system]);
     const lifeTimeGradients = useObservableArray(system, lifeTimeGradientsGetter, "addLifeTimeGradient", "removeLifeTimeGradient", "forceRefreshGradients");
     const useLifeTimeGradients = (lifeTimeGradients?.length ?? 0) > 0;
-    const classes = useStyles$e();
+    const classes = useStyles$f();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min lifetime", target: system, propertyKey: "minLifeTime", min: 0, step: 0.1 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max lifetime", target: system, propertyKey: "maxLifeTime", min: 0, step: 0.1 }), isCpuParticleSystem && !useLifeTimeGradients && (jsx(ButtonLine, { label: "Use Lifetime gradients", onClick: () => {
                     system.addLifeTimeGradient(0, system.minLifeTime, system.maxLifeTime);
                     system.forceRefreshGradients();
@@ -16238,7 +16263,7 @@ const ParticleSystemLifetimeProperties = (props) => {
                         } })] })), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Target stop duration", target: system, propertyKey: "targetStopDuration", min: 0, step: 0.1 })] }));
 };
 
-const useStyles$d = makeStyles({
+const useStyles$e = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -16265,7 +16290,7 @@ const ParticleSystemColorProperties = (props) => {
     const hasRampGradients = (rampGradients?.length ?? 0) > 0;
     const hasColorRemapGradients = (colorRemapGradients?.length ?? 0) > 0;
     const hasAlphaRemapGradients = (alphaRemapGradients?.length ?? 0) > 0;
-    const classes = useStyles$d();
+    const classes = useStyles$e();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: Color4PropertyLine, label: "Color 1", target: system, propertyKey: "color1" }), jsx(BoundProperty, { component: Color4PropertyLine, label: "Color 2", target: system, propertyKey: "color2" }), jsx(BoundProperty, { component: Color4PropertyLine, label: "Color dead", target: system, propertyKey: "colorDead" }), !hasColorGradients && (jsx(ButtonLine, { label: "Use Color gradients", onClick: () => {
                     system.addColorGradient(0, system.color1, system.color1);
                     system.addColorGradient(1, system.color2, system.color2);
@@ -16337,7 +16362,7 @@ const ParticleSystemColorProperties = (props) => {
                                 } })] }))] }))] }));
 };
 
-const useStyles$c = makeStyles({
+const useStyles$d = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -16352,7 +16377,7 @@ const ParticleSystemRotationProperties = (props) => {
     const angularSpeedGradientsGetter = useCallback(() => system.getAngularSpeedGradients(), [system]);
     const angularSpeedGradients = useObservableArray(system, angularSpeedGradientsGetter, "addAngularSpeedGradient", "removeAngularSpeedGradient", "forceRefreshGradients");
     const useAngularSpeedGradients = (angularSpeedGradients?.length ?? 0) > 0;
-    const classes = useStyles$c();
+    const classes = useStyles$d();
     return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min Angular speed", target: system, propertyKey: "minAngularSpeed", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max Angular speed", target: system, propertyKey: "maxAngularSpeed", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Min initial rotation", target: system, propertyKey: "minInitialRotation", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Max initial rotation", target: system, propertyKey: "maxInitialRotation", step: 0.01 }), !useAngularSpeedGradients && (jsx(ButtonLine, { label: "Use Angular speed gradients", onClick: () => {
                     system.addAngularSpeedGradient(0, system.minAngularSpeed, system.maxAngularSpeed);
                     system.forceRefreshGradients();
@@ -16458,7 +16483,7 @@ const AttractorComponent = (props) => {
                 } }), !attractorData.isReadOnly && (jsx(ToggleButton, { title: "Add / remove position gizmo from particle attractor", checkedIcon: ArrowMoveFilled, value: isControlled(impostor), onChange: (control) => onControl(control ? impostor : undefined) }))] }));
 };
 
-const useStyles$b = makeStyles({
+const useStyles$c = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -16515,7 +16540,7 @@ const AttractorList = (props) => {
         gizmoManager.attachToMesh(attached);
         setControlledImpostor(attached);
     };
-    const classes = useStyles$b();
+    const classes = useStyles$c();
     return (jsxs(Fragment, { children: [items.length > 0 && (jsxs(Fragment, { children: [jsx(Color3PropertyLine, { label: "Attractor Debug Color", value: impostorColor, onChange: setImpostorColor }), jsx(SyncedSliderPropertyLine, { label: "Attractor Debug Size", value: impostorScale, onChange: setImpostorScale, min: 0, max: 10, step: 0.1 }), jsx(Subtitle2, { className: classes.subsection, children: "Attractors list" })] })), jsx(List, { addButtonLabel: `Add New Attractor`, items: items, onDelete: attractorSource.removeAttractor
                     ? (item, _index) => {
                         // Only CPU attractors (Attractor instances) can be removed
@@ -16625,7 +16650,7 @@ const ParticleSystemAttractorProperties = (props) => {
     return (jsx(Fragment, { children: scene ? (jsx(AttractorList, { attractorSource: attractorSource, scene: scene })) : (jsx(MessageBar, { intent: "info", title: "No Scene Available", message: "Cannot display attractors without a scene" })) }));
 };
 
-const useStyles$a = makeStyles({
+const useStyles$b = makeStyles({
     subsection: {
         marginTop: tokens.spacingVerticalM,
     },
@@ -16679,7 +16704,7 @@ const InputBlockPropertyLine = (props) => {
  */
 const ParticleSystemNodeEditorProperties = (props) => {
     const { particleSystem: system } = props;
-    const classes = useStyles$a();
+    const classes = useStyles$b();
     const source = system.source;
     const inputBlocks = useObservableState(useCallback(() => {
         if (!source) {
@@ -17576,9 +17601,15 @@ const SkeletonPropertiesServiceDefinition = {
     },
 };
 
+const useStyles$a = makeStyles({
+    uniformWidth: {
+        ...UniformWidthStyling,
+    },
+});
 const SpinButtonPropertyLine = (props) => {
     SpinButtonPropertyLine.displayName = "SpinButtonPropertyLine";
-    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props }) }));
+    const classes = useStyles$a();
+    return (jsx(PropertyLine, { ...props, children: jsx(SpinButton, { ...props, className: mergeClasses(classes.uniformWidth, props.className) }) }));
 };
 
 const SnippetDashboardStorageKey = "Babylon/InspectorV2/SnippetDashboard/SpriteManagers";
@@ -17862,7 +17893,7 @@ function useMaxCellCount(sprite) {
     const manager = sprite.manager;
     const texture = useProperty(manager, "texture");
     const textureSize = texture.getSize();
-    let maxCellCount = 0;
+    let maxCellCount;
     if (!textureSize.width || !textureSize.height) {
         maxCellCount = Math.max(sprite.fromIndex, sprite.toIndex);
     }
@@ -19984,7 +20015,7 @@ const AnimationGroupExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(namedEntity, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return namedEntity.name;
+                        return namedEntity.name || "Unnamed AnimationGroup";
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20062,7 +20093,7 @@ const AtmosphereExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(atmosphere, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return atmosphere.name;
+                        return atmosphere.name || `Unnamed ${atmosphere.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20133,7 +20164,7 @@ const EffectLayerExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(effectLayer, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return effectLayer.name;
+                        return effectLayer.name || `Unnamed ${effectLayer.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20171,7 +20202,7 @@ const FrameGraphExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(frameGraph, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return frameGraph.name;
+                        return frameGraph.name || `Unnamed ${frameGraph.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20300,10 +20331,10 @@ const GuiExplorerServiceDefinition = {
                 return {
                     get name() {
                         if (IsAdvancedDynamicTexture(entity)) {
-                            return entity.name;
+                            return entity.name || `Unnamed ${entity.getClassName()}`;
                         }
                         else {
-                            return `${entity.name ?? "No name"} [${entity.getClassName()}]`;
+                            return `${entity.name || "Unnamed"} [${entity.getClassName()}]`;
                         }
                     },
                     onChange: onChangeObservable,
@@ -20408,7 +20439,7 @@ const MaterialExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(material, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return material.name;
+                        return material.name || `Unnamed ${material.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20443,6 +20474,9 @@ const MaterialExplorerServiceDefinition = {
     },
 };
 
+function IsCameraFrameGraphTask(task) {
+    return task.camera instanceof Camera;
+}
 const NodeExplorerServiceDefinition = {
     friendlyName: "Node Explorer",
     consumes: [SceneExplorerServiceIdentity, SceneContextIdentity, GizmoServiceIdentity, WatcherServiceIdentity],
@@ -20489,7 +20523,7 @@ const NodeExplorerServiceDefinition = {
                 const parentHookToken = watcherService.watchProperty(node, "parent", () => nodeMovedObservable.notifyObservers(node));
                 return {
                     get name() {
-                        return node.name;
+                        return node.name || `Unnamed ${node.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20622,16 +20656,30 @@ const NodeExplorerServiceDefinition = {
                     set isEnabled(enabled) {
                         const activeCamera = getActiveCamera();
                         if (enabled && activeCamera !== camera) {
-                            activeCamera?.detachControl();
                             if (scene.frameGraph) {
-                                const objectRenderer = FindMainObjectRenderer(scene.frameGraph);
-                                if (objectRenderer) {
-                                    objectRenderer.camera = camera;
-                                    onChangeObservable.notifyObservers(); // manual trigger, because scene.onActiveCameraChanged won't be triggered by the line above
-                                    camera.attachControl(true);
-                                }
+                                void (async (frameGraph) => {
+                                    let updated = false;
+                                    const nrg = frameGraph.getLinkedNodeRenderGraph();
+                                    if (nrg) {
+                                        updated = await nrg.replaceCameraAsync(activeCamera, camera);
+                                    }
+                                    else {
+                                        for (const task of frameGraph.tasks) {
+                                            if (IsCameraFrameGraphTask(task)) {
+                                                task.camera = camera;
+                                                updated = true;
+                                            }
+                                        }
+                                    }
+                                    if (updated) {
+                                        activeCamera?.detachControl();
+                                        camera.attachControl(true);
+                                        onChangeObservable.notifyObservers();
+                                    }
+                                })(scene.frameGraph);
                             }
                             else {
+                                activeCamera?.detachControl();
                                 scene.activeCamera = camera;
                                 camera.attachControl(true);
                             }
@@ -20756,7 +20804,7 @@ const ParticleSystemExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(particleSystem, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return particleSystem.name;
+                        return particleSystem.name || `Unnamed ${particleSystem.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20808,7 +20856,7 @@ const PostProcessExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(postProcess, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return postProcess.name;
+                        return postProcess.name || `Unnamed ${postProcess.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20844,8 +20892,7 @@ const RenderingPipelineExplorerServiceDefinition = {
             getEntityDisplayInfo: (pipeline) => {
                 return {
                     get name() {
-                        const typeName = pipeline.getClassName();
-                        return `${pipeline.name} (${typeName})`;
+                        return `${pipeline.name || "Unnamed"} [${pipeline.getClassName()}]`;
                     },
                 };
             },
@@ -20881,7 +20928,7 @@ const SkeletonExplorerServiceDefinition = {
                 const parentHookToken = skeletonOrBone instanceof Skeleton ? null : watcherService.watchProperty(skeletonOrBone, "parent", () => boneMovedObservable.notifyObservers(skeletonOrBone));
                 return {
                     get name() {
-                        return skeletonOrBone.name;
+                        return skeletonOrBone.name || `Unnamed ${skeletonOrBone.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20943,7 +20990,7 @@ const SoundExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(sound, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return sound.name;
+                        return sound.name || `Unnamed ${sound.getClassName()}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -20987,7 +21034,7 @@ const SpriteManagerExplorerServiceDefinition = {
                 const nameHookToken = watcherService.watchProperty(spriteEntity, "name", () => onChangeObservable.notifyObservers());
                 return {
                     get name() {
-                        return spriteEntity.name;
+                        return spriteEntity.name || `Unnamed ${spriteEntity instanceof Sprite ? spriteEntity.getClassName() : "SpriteManager"}`;
                     },
                     onChange: onChangeObservable,
                     dispose: () => {
@@ -21472,6 +21519,19 @@ const GLTFAnimationImportServiceDefinition = {
     },
 };
 
+// Options exposed in Inspector includes all the properties from the default loader options (GLTFLoaderDefaultOptions)
+// plus some options that only exist directly on the GLTFFileLoader class itself.
+// These are the non-null defaults, used as defaultValue for the nullable property lines.
+const LoaderOptionDefaults = Object.assign({
+    capturePerformanceCounters: false,
+    loggingEnabled: false,
+}, { ...GLTFLoaderDefaultOptions });
+// Non-null defaults for extension options that have properties beyond just 'enabled'.
+const ExtensionOptionDefaults = {
+    /* eslint-disable @typescript-eslint/naming-convention */
+    MSFT_lod: { maxLODsToLoad: 10 },
+};
+
 const AnimationStartModeOptions = [
     { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
     { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
@@ -21482,70 +21542,45 @@ const CoordinateSystemModeOptions = [
     { label: "Right Handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED },
 ];
 const GLTFLoaderOptionsTool = ({ loaderOptions }) => {
-    return (jsx(PropertyLine, { label: "Loader Options", expandByDefault: false, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always compute bounding box", target: loaderOptions, propertyKey: "alwaysComputeBoundingBox" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always compute skeleton root node", target: loaderOptions, propertyKey: "alwaysComputeSkeletonRootNode" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Animation start mode", options: AnimationStartModeOptions, target: loaderOptions, propertyKey: "animationStartMode" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Capture performance counters", target: loaderOptions, propertyKey: "capturePerformanceCounters" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile materials", target: loaderOptions, propertyKey: "compileMaterials" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile shadow generators", target: loaderOptions, propertyKey: "compileShadowGenerators" }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Coordinate system", options: CoordinateSystemModeOptions, target: loaderOptions, propertyKey: "coordinateSystemMode" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Create instances", target: loaderOptions, propertyKey: "createInstances" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable logging", target: loaderOptions, propertyKey: "loggingEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load all materials", target: loaderOptions, propertyKey: "loadAllMaterials" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Target FPS", target: loaderOptions, propertyKey: "targetFps", min: 1, max: 120, step: 1 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Transparency as coverage", target: loaderOptions, propertyKey: "transparencyAsCoverage" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use clip plane", target: loaderOptions, propertyKey: "useClipPlane" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use sRGB buffers", target: loaderOptions, propertyKey: "useSRGBBuffers" })] }) }));
+    return (jsx(PropertyLine, { label: "Loader Options", expandByDefault: false, expandedContent: jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always compute bounding box", target: loaderOptions, propertyKey: "alwaysComputeBoundingBox", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeBoundingBox }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Always compute skeleton root node", target: loaderOptions, propertyKey: "alwaysComputeSkeletonRootNode", nullable: true, defaultValue: LoaderOptionDefaults.alwaysComputeSkeletonRootNode }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Animation start mode", options: AnimationStartModeOptions, target: loaderOptions, propertyKey: "animationStartMode", nullable: true, defaultValue: LoaderOptionDefaults.animationStartMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Capture performance counters", target: loaderOptions, propertyKey: "capturePerformanceCounters", nullable: true, defaultValue: LoaderOptionDefaults.capturePerformanceCounters }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile materials", target: loaderOptions, propertyKey: "compileMaterials", nullable: true, defaultValue: LoaderOptionDefaults.compileMaterials }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Compile shadow generators", target: loaderOptions, propertyKey: "compileShadowGenerators", nullable: true, defaultValue: LoaderOptionDefaults.compileShadowGenerators }), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Coordinate system", options: CoordinateSystemModeOptions, target: loaderOptions, propertyKey: "coordinateSystemMode", nullable: true, defaultValue: LoaderOptionDefaults.coordinateSystemMode }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Create instances", target: loaderOptions, propertyKey: "createInstances", nullable: true, defaultValue: LoaderOptionDefaults.createInstances }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enable logging", target: loaderOptions, propertyKey: "loggingEnabled", nullable: true, defaultValue: LoaderOptionDefaults.loggingEnabled }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Load all materials", target: loaderOptions, propertyKey: "loadAllMaterials", nullable: true, defaultValue: LoaderOptionDefaults.loadAllMaterials }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Target FPS", target: loaderOptions, propertyKey: "targetFps", min: 1, max: 120, step: 1, nullable: true, defaultValue: LoaderOptionDefaults.targetFps }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Transparency as coverage", target: loaderOptions, propertyKey: "transparencyAsCoverage", nullable: true, defaultValue: LoaderOptionDefaults.transparencyAsCoverage }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use clip plane", target: loaderOptions, propertyKey: "useClipPlane", nullable: true, defaultValue: LoaderOptionDefaults.useClipPlane }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use sRGB buffers", target: loaderOptions, propertyKey: "useSRGBBuffers", nullable: true, defaultValue: LoaderOptionDefaults.useSRGBBuffers })] }) }));
 };
 const GLTFExtensionOptionsTool = ({ extensionOptions }) => {
-    return (jsx(PropertyLine, { label: "Extension Options", expandByDefault: false, expandedContent: jsx(Fragment, { children: Object.entries(extensionOptions).map(([extensionName, options]) => {
-                return (jsx(BoundProperty, { component: SwitchPropertyLine, label: extensionName, target: options, propertyKey: "enabled", expandedContent: (extensionName === "MSFT_lod" && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Maximum LODs", target: extensionOptions[extensionName], propertyKey: "maxLODsToLoad", min: 1, max: 10, step: 1 }, extensionName + "_maxLODsToLoad"))) ||
+    return (jsx(PropertyLine, { label: "Extension Options", expandByDefault: false, expandedContent: jsx(Fragment, { children: Object.entries(extensionOptions)
+                .sort(([a], [b]) => a.localeCompare(b))
+                .map(([extensionName, options]) => {
+                return (jsx(BoundProperty, { component: SwitchPropertyLine, label: extensionName, target: options, propertyKey: "enabled", nullable: true, defaultValue: true, expandedContent: (extensionName === "MSFT_lod" && (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Maximum LODs", target: extensionOptions[extensionName], propertyKey: "maxLODsToLoad", min: 1, max: 10, step: 1, nullable: true, defaultValue: ExtensionOptionDefaults.MSFT_lod.maxLODsToLoad }, extensionName + "_maxLODsToLoad"))) ||
                         undefined }, extensionName));
             }) }) }));
 };
 
-// Options exposed in Inspector includes all the properties from the default loader options (GLTFLoaderDefaultOptions)
-// plus some options that only exist directly on the GLTFFileLoader class itself.
-const CurrentLoaderOptions = Object.assign({
-    capturePerformanceCounters: false,
-    loggingEnabled: false,
-}, GLTFLoaderDefaultOptions);
-const CurrentExtensionOptions = {
-    /* eslint-disable @typescript-eslint/naming-convention */
-    EXT_lights_image_based: { enabled: true },
-    EXT_mesh_gpu_instancing: { enabled: true },
-    EXT_texture_webp: { enabled: true },
-    EXT_texture_avif: { enabled: true },
-    KHR_draco_mesh_compression: { enabled: true },
-    KHR_materials_pbrSpecularGlossiness: { enabled: true },
-    KHR_materials_clearcoat: { enabled: true },
-    KHR_materials_iridescence: { enabled: true },
-    KHR_materials_anisotropy: { enabled: true },
-    KHR_materials_emissive_strength: { enabled: true },
-    KHR_materials_ior: { enabled: true },
-    KHR_materials_sheen: { enabled: true },
-    KHR_materials_specular: { enabled: true },
-    KHR_materials_unlit: { enabled: true },
-    KHR_materials_variants: { enabled: true },
-    KHR_materials_transmission: { enabled: true },
-    KHR_materials_diffuse_transmission: { enabled: true },
-    KHR_materials_volume: { enabled: true },
-    KHR_materials_dispersion: { enabled: true },
-    KHR_materials_diffuse_roughness: { enabled: true },
-    KHR_mesh_quantization: { enabled: true },
-    KHR_lights_punctual: { enabled: true },
-    EXT_lights_area: { enabled: true },
-    KHR_texture_basisu: { enabled: true },
-    KHR_texture_transform: { enabled: true },
-    KHR_xmp_json_ld: { enabled: true },
-    MSFT_lod: { enabled: true, maxLODsToLoad: 10 },
-    MSFT_minecraftMesh: { enabled: true },
-    MSFT_sRGBFactors: { enabled: true },
-    MSFT_audio_emitter: { enabled: true },
-};
 const GLTFLoaderOptionsServiceDefinition = {
     friendlyName: "GLTF Loader Options",
     consumes: [ToolsServiceIdentity],
     factory: (toolsService) => {
+        // Current loader options with nullable properties (null means "don't override the options coming in with load calls")
+        const currentLoaderOptions = Object.fromEntries(Object.keys(LoaderOptionDefaults).map((key) => [key, null]));
+        // Build extension options dynamically from the registered extensions.
+        // Every extension gets an 'enabled' toggle; extensions in ExtensionOptionDefaults also get their extra properties.
+        const currentExtensionOptions = {};
+        for (const extName of registeredGLTFExtensions.keys()) {
+            const defaults = ExtensionOptionDefaults[extName];
+            const extraNulls = defaults ? Object.fromEntries(Object.keys(defaults).map((key) => [key, null])) : {};
+            currentExtensionOptions[extName] = { enabled: null, ...extraNulls };
+        }
         // Subscribe to plugin activation
         const pluginObserver = SceneLoader.OnPluginActivatedObservable.add((plugin) => {
             if (plugin.name === "gltf") {
                 const loader = plugin;
-                // Apply loader settings
-                Object.assign(loader, CurrentLoaderOptions);
+                // Apply loader settings (filter out null values to not override options coming in with load calls)
+                const nonNullLoaderOptions = Object.fromEntries(Object.entries(currentLoaderOptions).filter(([_, v]) => v !== null));
+                Object.assign(loader, nonNullLoaderOptions);
                 // Subscribe to extension loading
                 loader.onExtensionLoadedObservable.add((extension) => {
-                    const extensionOptions = CurrentExtensionOptions[extension.name];
+                    const extensionOptions = currentExtensionOptions[extension.name];
                     if (extensionOptions) {
-                        // Apply extension settings
-                        Object.assign(extension, extensionOptions);
+                        // Apply extension settings (filter out null values to not override options coming in with load calls)
+                        const nonNullExtOptions = Object.fromEntries(Object.entries(extensionOptions).filter(([_, v]) => v !== null));
+                        Object.assign(extension, nonNullExtOptions);
                     }
                 });
             }
@@ -21555,7 +21590,7 @@ const GLTFLoaderOptionsServiceDefinition = {
             section: "GLTF Loader",
             order: 50,
             component: () => {
-                return (jsxs(Fragment, { children: [jsx(MessageBar, { intent: "info", message: "Reload the file for changes to take effect" }), jsx(GLTFLoaderOptionsTool, { loaderOptions: CurrentLoaderOptions }), jsx(GLTFExtensionOptionsTool, { extensionOptions: CurrentExtensionOptions })] }));
+                return (jsxs(Fragment, { children: [jsx(MessageBar, { intent: "info", message: "Reload the file for changes to take effect" }), jsx(GLTFLoaderOptionsTool, { loaderOptions: currentLoaderOptions }), jsx(GLTFExtensionOptionsTool, { extensionOptions: currentExtensionOptions })] }));
             },
         });
         return {
@@ -21658,10 +21693,9 @@ const PickingToolbar = (props) => {
                         }
                         const p0p1 = TmpVectors.Vector3[0];
                         const p1p2 = TmpVectors.Vector3[1];
-                        let normal = TmpVectors.Vector3[2];
                         p1.subtractToRef(p0, p0p1);
                         p2.subtractToRef(p1, p1p2);
-                        normal = Vector3.Cross(p0p1, p1p2);
+                        const normal = Vector3.Cross(p0p1, p1p2);
                         return Vector3.Dot(normal, ray.direction) < 0;
                     });
                     pickedEntity = pickingInfo.pickedMesh;
@@ -22825,4 +22859,4 @@ const TextAreaPropertyLine = (props) => {
 AttachDebugLayer();
 
 export { HexPropertyLine as $, Accordion as A, Button as B, CheckboxPropertyLine as C, ColorStepGradientComponent as D, ComboBox as E, ComboBoxPropertyLine as F, ConstructorFactory as G, ConvertOptions as H, DebugServiceIdentity as I, DetachDebugLayer as J, DraggableLine as K, LinkToEntity as L, MessageBar as M, NumberInputPropertyLine as N, Dropdown as O, Popover as P, EntitySelector as Q, ErrorBoundary as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, ExtensibleAccordion as U, Vector3PropertyLine as V, FactorGradientComponent as W, FactorGradientList as X, FileUploadLine as Y, GetPropertyDescriptor as Z, GizmoServiceIdentity as _, useProperty as a, Vector2PropertyLine as a$, InfoLabel as a0, InputHexField as a1, InputHsvField as a2, Inspector as a3, InterceptFunction as a4, InterceptProperty as a5, IsPropertyReadonly as a6, LineContainer as a7, LinkPropertyLine as a8, LinkToEntityPropertyLine as a9, SettingsStoreIdentity as aA, ShowInspector as aB, SidePaneContainer as aC, SkeletonSelector as aD, Slider as aE, SpinButton as aF, StatsServiceIdentity as aG, StringDropdown as aH, StringDropdownPropertyLine as aI, StringifiedPropertyLine as aJ, Switch as aK, SwitchPropertyLine as aL, SyncedSliderInput as aM, SyncedSliderPropertyLine as aN, TeachingMoment as aO, TextAreaPropertyLine as aP, TextInput as aQ, TextPropertyLine as aR, Textarea as aS, TextureSelector as aT, TextureUpload as aU, Theme as aV, ThemeServiceIdentity as aW, ToastProvider as aX, ToggleButton as aY, Tooltip as aZ, UploadButton as a_, List as aa, MakeDialogTeachingMoment as ab, MakeLazyComponent as ac, MakePopoverTeachingMoment as ad, MakePropertyHook as ae, MakeTeachingMoment as af, MaterialSelector as ag, NodeSelector as ah, NumberDropdown as ai, NumberDropdownPropertyLine as aj, ObservableCollection as ak, Pane as al, PlaceholderPropertyLine as am, PositionedPopover as an, PropertiesServiceIdentity as ao, Property as ap, PropertyContext as aq, PropertyLine as ar, QuaternionPropertyLine as as, RotationVectorPropertyLine as at, SceneExplorerServiceIdentity as au, SearchBar as av, SearchBox as aw, SelectionServiceDefinition as ax, SettingsServiceIdentity as ay, SettingsStore as az, ShellServiceIdentity as b, Vector4PropertyLine as b0, WatcherServiceIdentity as b1, useAngleConverters as b2, useAsyncResource as b3, useColor3Property as b4, useColor4Property as b5, useEventListener as b6, useEventfulState as b7, useInterceptObservable as b8, useKeyListener as b9, useKeyState as ba, useObservableCollection as bb, useOrderedObservableCollection as bc, usePollingObservable as bd, usePropertyChangedNotifier as be, useQuaternionProperty as bf, useResource as bg, useSetting as bh, useTheme as bi, useThemeMode as bj, useVector3Property as bk, SceneContextIdentity as c, SelectionServiceIdentity as d, useObservableState as e, AccordionSection as f, ButtonLine as g, ToolsServiceIdentity as h, useExtensionManager as i, Link as j, AccordionSectionItem as k, AttachDebugLayer as l, BooleanBadgePropertyLine as m, BoundProperty as n, BuiltInsExtensionFeed as o, Checkbox as p, ChildWindow as q, Collapse as r, Color3GradientComponent as s, Color3GradientList as t, useToast as u, Color3PropertyLine as v, Color4GradientComponent as w, Color4GradientList as x, Color4PropertyLine as y, ColorPickerPopup as z };
-//# sourceMappingURL=index-DBHYgAua.js.map
+//# sourceMappingURL=index-CIc0CbG8.js.map