@babylonjs/inspector 8.49.6 → 8.49.7

package/lib/{index-ByfjmUIP.js → index-BVYxLK-p.js}

@@ -1,16 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, isValidElement, cloneElement, Children, useLayoutEffect, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, useReducer, lazy } from 'react';
-import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, useFluent, InfoLabel as InfoLabel$1, mergeClasses, Body1Strong, useId, useToastController, Toast, ToastBody, FluentProvider, Toaster, Checkbox as Checkbox$1, Accordion as Accordion$1, AccordionItem, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, Portal, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, SearchBox as SearchBox$1, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, Switch as Switch$1, SpinButton as SpinButton$1, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBar as MessageBar$1, MessageBarBody, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
-import { ErrorCircleRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, FilterRegular, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, EditRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, EyeFilled, ArrowMoveFilled, StopFilled, PlayFilled, EyeOffRegular, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
+import { createContext, forwardRef, useContext, useState, useCallback, Component, useMemo, useEffect, useRef, useReducer, Children, isValidElement, useLayoutEffect, cloneElement, useImperativeHandle, createElement, Suspense, memo, Fragment as Fragment$1, lazy } from 'react';
+import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, useFluent, InfoLabel as InfoLabel$1, mergeClasses, Body1Strong, useId, useToastController, Toast, ToastBody, FluentProvider, Toaster, Checkbox as Checkbox$1, createLightTheme, createDarkTheme, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, RendererProvider, createDOMRenderer, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, treeItemLevelToken, FlatTree, FlatTreeItem, TreeItemLayout, MenuDivider, MenuItemCheckbox, Switch as Switch$1, SpinButton as SpinButton$1, Input, Dropdown as Dropdown$1, Option, Popover as Popover$1, PopoverTrigger, PopoverSurface, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, PresenceBadge, Slider, MenuItemRadio, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, Badge, Label, MessageBarTitle, Subtitle2, useComboboxFilter, Combobox, Textarea as Textarea$1, ToolbarButton, ToolbarDivider, Field } from '@fluentui/react-components';
+import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, DocumentTextRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, CubeTreeRegular, BugRegular, SettingsRegular, ArrowUploadRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, WeatherSunnyRegular, WeatherMoonRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, AddRegular, DeleteRegular, FullScreenMaximizeRegular, ChevronDownRegular, ChevronRightRegular, CircleSmallFilled, SaveRegular, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, LinkDismissRegular, LinkEditRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, LayerRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, CameraRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, SoundWaveCircleRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, PersonFeedbackRegular, BranchRegular, DeleteFilled } from '@fluentui/react-icons';
 import { Color3, Color4 } from '@babylonjs/core/Maths/math.color.js';
 import { Vector3, Quaternion, Matrix, Vector2, Vector4, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { Observable } from '@babylonjs/core/Misc/observable.js';
 import { GetClassName } from '@babylonjs/core/Misc/typeStore.js';
+import { DataStorage } from '@babylonjs/core/Misc/dataStorage.js';
+import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
 import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
 import { Deferred } from '@babylonjs/core/Misc/deferred.js';
-import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
 import { VirtualizerScrollView } from '@fluentui-contrib/react-virtualizer';
 import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
@@ -24,7 +25,6 @@ import { CreateGround } from '@babylonjs/core/Meshes/Builders/groundBuilder.js';
 import { Tools } from '@babylonjs/core/Misc/tools.js';
 import { UtilityLayerRenderer } from '@babylonjs/core/Rendering/utilityLayerRenderer.js';
 import { GridMaterial } from '@babylonjs/materials/grid/gridMaterial.js';
-import { DataStorage } from '@babylonjs/core/Misc/dataStorage.js';
 import { EngineInstrumentation } from '@babylonjs/core/Instrumentation/engineInstrumentation.js';
 import { SceneInstrumentation } from '@babylonjs/core/Instrumentation/sceneInstrumentation.js';
 import '@babylonjs/core/Engines/AbstractEngine/abstractEngine.timeQuery.js';
@@ -1018,6 +1018,485 @@ function PropertyImpl(props, ref) {
  */
 const Property = CreateGenericForwardRef(PropertyImpl);
 
+// ============================================================================
+// Storage Helpers
+// ============================================================================
+const STORAGE_KEY_ROOT = "Babylon/Accordion";
+const ReadFromStorage = (path, initial) => {
+    try {
+        const stored = DataStorage.ReadString(`${STORAGE_KEY_ROOT}/${path}`, "");
+        return stored ? JSON.parse(stored) : initial;
+    }
+    catch {
+        return initial;
+    }
+};
+const WriteToStorage = (path, data) => {
+    DataStorage.WriteString(`${STORAGE_KEY_ROOT}/${path}`, JSON.stringify(data));
+};
+// ============================================================================
+// Reducer
+// ============================================================================
+const AccordionReducer = (state, action) => {
+    switch (action.type) {
+        case "SET_SEARCH_TERM":
+            return { ...state, searchTerm: action.term };
+        case "SET_EDIT_MODE":
+            return { ...state, editMode: action.enabled };
+        case "TOGGLE_PINNED": {
+            const isPinned = state.pinnedIds.includes(action.itemId);
+            return {
+                ...state,
+                pinnedIds: isPinned ? state.pinnedIds.filter((id) => id !== action.itemId) : [...state.pinnedIds, action.itemId],
+            };
+        }
+        case "TOGGLE_HIDDEN": {
+            const isHidden = state.hiddenIds.includes(action.itemId);
+            return {
+                ...state,
+                hiddenIds: isHidden ? state.hiddenIds.filter((id) => id !== action.itemId) : [...state.hiddenIds, action.itemId],
+            };
+        }
+        case "MOVE_PINNED_UP": {
+            const index = state.pinnedIds.indexOf(action.itemId);
+            if (index <= 0) {
+                return state;
+            }
+            const newPinnedIds = [...state.pinnedIds];
+            [newPinnedIds[index - 1], newPinnedIds[index]] = [newPinnedIds[index], newPinnedIds[index - 1]];
+            return { ...state, pinnedIds: newPinnedIds };
+        }
+        case "SHOW_ALL":
+            return { ...state, hiddenIds: [] };
+        case "HIDE_ALL_VISIBLE":
+            return {
+                ...state,
+                hiddenIds: [...new Set([...state.hiddenIds, ...action.visibleItemIds])],
+            };
+        default:
+            return state;
+    }
+};
+const AccordionContext = createContext(undefined);
+/**
+ * Hook to create and manage the AccordionContext value.
+ *
+ * @param props - AccordionProps
+ * @returns AccordionContextValue, or undefined if no features are enabled or no uniqueId is provided.
+ */
+function useAccordionContext(props) {
+    const { uniqueId: accordionId, enablePinnedItems, enableHiddenItems, enableSearchItems } = props;
+    const features = useMemo(() => ({
+        pinning: enablePinnedItems ?? false,
+        hiding: enableHiddenItems ?? false,
+        search: enableSearchItems ?? false,
+    }), [enablePinnedItems, enableHiddenItems, enableSearchItems]);
+    const hasFeatures = features.pinning || features.hiding || features.search;
+    // Initialize state from localStorage
+    const initialState = useMemo(() => {
+        if (!accordionId || !hasFeatures) {
+            return { pinnedIds: [], hiddenIds: [], searchTerm: "", editMode: false };
+        }
+        return {
+            pinnedIds: features.pinning ? ReadFromStorage(`Pinned/${accordionId}`, []) : [],
+            hiddenIds: features.hiding ? ReadFromStorage(`Hidden/${accordionId}`, []) : [],
+            searchTerm: "",
+            editMode: false,
+        };
+    }, [accordionId, hasFeatures, features.pinning, features.hiding]);
+    const [state, dispatch] = useReducer(AccordionReducer, initialState);
+    const pinnedContainerRef = useRef(null);
+    const registeredItemIds = useRef(new Set());
+    // Persist pinnedIds to localStorage when they change
+    useEffect(() => {
+        if (accordionId && features.pinning) {
+            WriteToStorage(`Pinned/${accordionId}`, state.pinnedIds);
+        }
+    }, [accordionId, features.pinning, state.pinnedIds]);
+    // Persist hiddenIds to localStorage when they change
+    useEffect(() => {
+        if (accordionId && features.hiding) {
+            WriteToStorage(`Hidden/${accordionId}`, state.hiddenIds);
+        }
+    }, [accordionId, features.hiding, state.hiddenIds]);
+    // Return undefined if no accordionId or no features enabled
+    if (!accordionId || !hasFeatures) {
+        return undefined;
+    }
+    return {
+        accordionId,
+        state,
+        dispatch,
+        features,
+        pinnedContainerRef,
+        registeredItemIds,
+    };
+}
+const AccordionSectionBlockContext = createContext(undefined);
+/**
+ * Hook to create the AccordionSectionBlockContext value.
+ *
+ * @param props - AccordionSectionBlockProps
+ * @returns AccordionSectionBlockContextValue
+ */
+function useAccordionSectionBlockContext(props) {
+    const { sectionId } = props;
+    return useMemo(() => ({ sectionId }), [sectionId]);
+}
+// ============================================================================
+// Item Depth Context (to detect nested AccordionSectionItems)
+// ============================================================================
+/**
+ * Context to track whether we're inside an AccordionSectionItem.
+ * Used to prevent nested items from being individually manageable.
+ */
+const AccordionItemDepthContext = createContext(false);
+/**
+ * Hook to compute item state from accordion context.
+ *
+ * @param props - AccordionSectionItemProps
+ * @returns AccordionItemState, or undefined if no accordion context or nested item.
+ */
+function useAccordionSectionItemState(props) {
+    const { uniqueId: itemId, label: itemLabel, staticItem } = props;
+    const accordionCtx = useContext(AccordionContext);
+    const sectionCtx = useContext(AccordionSectionBlockContext);
+    const isNested = useContext(AccordionItemDepthContext);
+    // Build the globally unique item ID
+    const itemUniqueId = useMemo(() => {
+        if (!accordionCtx || !sectionCtx) {
+            return "";
+        }
+        return `${accordionCtx.accordionId}\0${sectionCtx.sectionId}\0${itemId}`;
+    }, [accordionCtx?.accordionId, sectionCtx?.sectionId, itemId]);
+    // Debug: warn if itemId changes (should be stable)
+    const prevItemIdRef = useRef(itemId);
+    useEffect(() => {
+        if (prevItemIdRef.current !== itemId) {
+            Logger.Warn(`Accordion: The uniqueId "${itemId}" in section "${sectionCtx?.sectionId}" has changed from "${prevItemIdRef.current}". ` +
+                `Each item must have a unique, stable ID for pin/hide persistence to work correctly.`);
+        }
+        prevItemIdRef.current = itemId;
+    }, [itemId, sectionCtx?.sectionId]);
+    // Debug: warn if itemUniqueId is not unique (duplicate detection)
+    useEffect(() => {
+        if (!accordionCtx || !itemUniqueId) {
+            return;
+        }
+        const { registeredItemIds } = accordionCtx;
+        if (registeredItemIds.current.has(itemUniqueId)) {
+            Logger.Warn(`Accordion: Duplicate uniqueId "${itemId}" detected in section "${sectionCtx?.sectionId}". ` +
+                `Each item must have a unique ID within its section for pin/hide persistence to work correctly.`);
+        }
+        else {
+            registeredItemIds.current.add(itemUniqueId);
+        }
+        return () => {
+            registeredItemIds.current.delete(itemUniqueId);
+        };
+    }, [accordionCtx, itemUniqueId, itemId, sectionCtx?.sectionId]);
+    // If no context, static item, or nested, return undefined
+    if (!accordionCtx || staticItem) {
+        return undefined;
+    }
+    const { state, dispatch, features } = accordionCtx;
+    const { pinnedIds, hiddenIds, searchTerm, editMode } = state;
+    // Compute derived state
+    const isPinned = features.pinning && pinnedIds.includes(itemUniqueId);
+    const isHidden = features.hiding && hiddenIds.includes(itemUniqueId);
+    const pinnedIndex = isPinned ? pinnedIds.indexOf(itemUniqueId) : -1;
+    // Search matching
+    const searchText = (itemLabel ?? itemId).toLowerCase();
+    const isMatch = !features.search || !searchTerm || searchText.includes(searchTerm.toLowerCase());
+    return {
+        itemUniqueId,
+        isNested,
+        isPinned,
+        isHidden,
+        isMatch,
+        pinnedIndex,
+        inEditMode: editMode,
+        actions: {
+            togglePinned: () => dispatch({ type: "TOGGLE_PINNED", itemId: itemUniqueId }),
+            toggleHidden: () => dispatch({ type: "TOGGLE_HIDDEN", itemId: itemUniqueId }),
+            movePinnedUp: () => dispatch({ type: "MOVE_PINNED_UP", itemId: itemUniqueId }),
+        },
+    };
+}
+
+const useStyles$S = makeStyles({
+    accordion: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+    },
+    accordionBody: {
+        overflowX: "hidden",
+        overflowY: "auto",
+        paddingBottom: tokens.spacingVerticalM, // bottom padding since there is no divider at the bottom
+    },
+    divider: {
+        paddingTop: CustomTokens.dividerGap,
+        paddingBottom: CustomTokens.dividerGap,
+    },
+    dividerSmall: {
+        paddingTop: CustomTokens.dividerGapSmall,
+        paddingBottom: CustomTokens.dividerGapSmall,
+    },
+    panelDiv: {
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+    },
+    highlightDiv: {
+        borderRadius: tokens.borderRadiusLarge,
+        animationDuration: "1s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "5",
+        animationFillMode: "forwards",
+        animationName: {
+            from: {
+                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,
+            },
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            "50%": {
+                boxShadow: `inset 0 0 12px ${tokens.colorBrandBackground}`,
+            },
+            to: {
+                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,
+            },
+        },
+    },
+    menuBar: {
+        display: "flex",
+    },
+    menuBarControls: {
+        display: "flex",
+        flexGrow: 1,
+        justifyContent: "end",
+    },
+    sectionEmpty: {
+        display: "none",
+    },
+    sectionItemContainer: {
+        display: "flex",
+        flexDirection: "row",
+    },
+    sectionItemButtons: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "start",
+        marginRight: tokens.spacingHorizontalXS,
+    },
+    pinnedContainer: {
+        display: "flex",
+        flexDirection: "column",
+    },
+    pinnedContainerEmpty: {
+        "&:not(:only-child)": {
+            display: "none",
+        },
+    },
+    searchBox: {
+        width: "100%",
+    },
+});
+/**
+ * Renders the menu bar and control buttons.
+ *
+ * @returns `div`, or `undefined` if all features are disabled.
+ */
+const AccordionMenuBar = () => {
+    AccordionMenuBar.displayName = "AccordionMenuBar";
+    const classes = useStyles$S();
+    const accordionCtx = useContext(AccordionContext);
+    if (!accordionCtx) {
+        return null;
+    }
+    const { state, dispatch, features } = accordionCtx;
+    const { editMode } = state;
+    return (jsxs("div", { className: classes.menuBar, children: [jsx(AccordionSearchBox, {}), jsxs("div", { className: classes.menuBarControls, children: [features.hiding && editMode && (jsxs(Fragment, { children: [jsx(Button, { title: "Show all", icon: EyeFilled, appearance: "subtle", onClick: () => dispatch({ type: "SHOW_ALL" }) }), jsx(Button, { title: "Hide all", icon: EyeOffRegular, appearance: "subtle", onClick: () => {
+                                    // Hide all visible items - we pass all non-hidden, matching items
+                                    // For simplicity, we dispatch with an empty array; the actual filtering
+                                    // would need to be done with knowledge of all registered items.
+                                    // This is a limitation - in a full implementation, you'd track registered items.
+                                    dispatch({ type: "HIDE_ALL_VISIBLE", visibleItemIds: [] });
+                                } })] })), (features.pinning || features.hiding) && (jsx(Button, { title: "Edit mode", icon: editMode ? CheckmarkFilled : EditRegular, appearance: editMode ? "primary" : "subtle", onClick: () => dispatch({ type: "SET_EDIT_MODE", enabled: !editMode }) }))] })] }));
+};
+/**
+ * Wrapper component that must encapsulate the section headers and panels.
+ * - Stores the section ID for use in `AccordionSectionItem`.
+ *
+ * @param props - `AccordionSectionBlockProps`
+ * @returns `AccordionSectionBlockContext.Provider`, or `AccordionItem` if all features are disabled.
+ */
+const AccordionSectionBlock = (props) => {
+    AccordionSectionBlock.displayName = "AccordionSectionBlock";
+    const { children, sectionId } = props;
+    const accordionCtx = useContext(AccordionContext);
+    const sectionContext = useAccordionSectionBlockContext(props);
+    if (accordionCtx) {
+        return (jsx(AccordionSectionBlockContext.Provider, { value: sectionContext, children: jsx(AccordionItem, { value: sectionId, children: children }) }));
+    }
+    return jsx(AccordionItem, { value: sectionId, children: children });
+};
+/**
+ * Wrapper component that must encapsulate individual items.
+ * - Renders the pin button and tracks the pinned state of the item.
+ * - Renders the hide button and tracks the hidden state of the item.
+ * - Filters items based on the current search term.
+ *
+ * @param props - `AccordionSectionItemProps`
+ * @returns `Portal` if pinned; `null` if hidden/filtered; `children` otherwise.
+ */
+const AccordionSectionItem = (props) => {
+    AccordionSectionItem.displayName = "AccordionSectionItem";
+    const { children, staticItem } = props;
+    const classes = useStyles$S();
+    const accordionCtx = useContext(AccordionContext);
+    const itemState = useAccordionSectionItemState(props);
+    const [ctrlMode, setCtrlMode] = useState(false);
+    // If static item or no context, just render children
+    if (staticItem || !accordionCtx || !itemState) {
+        return jsx(Fragment, { children: children });
+    }
+    const { pinnedContainerRef, features } = accordionCtx;
+    const { isNested, isPinned, isHidden, isMatch, pinnedIndex, inEditMode, actions } = itemState;
+    // Nested items just render children (don't show controls)
+    if (isNested) {
+        return jsx(Fragment, { children: children });
+    }
+    // If hidden (and not in edit mode) or doesn't match search, don't render
+    if ((isHidden && !inEditMode) || !isMatch) {
+        return null;
+    }
+    const pinnedContainer = isPinned ? pinnedContainerRef.current : null;
+    const showControls = inEditMode || ctrlMode;
+    const onMouseMove = (e) => {
+        if (e.ctrlKey !== ctrlMode) {
+            setCtrlMode(e.ctrlKey);
+        }
+    };
+    const onMouseLeave = () => {
+        if (ctrlMode) {
+            setCtrlMode(false);
+        }
+    };
+    const itemElement = (jsxs("div", { className: classes.sectionItemContainer, style: isPinned ? { order: pinnedIndex } : undefined, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, children: [showControls && (jsxs("div", { className: classes.sectionItemButtons, children: [features.hiding && (jsx(Button, { title: isHidden ? "Unhide" : "Hide", icon: isHidden ? EyeOffRegular : EyeFilled, appearance: "transparent", onClick: actions.toggleHidden })), features.pinning && (jsxs(Fragment, { children: [jsx(Button, { title: isPinned ? "Unpin" : "Pin", icon: isPinned ? PinFilled : PinRegular, appearance: "transparent", onClick: actions.togglePinned }), isPinned && (jsx(Button, { title: "Move up", icon: ArrowCircleUpRegular, appearance: "transparent", disabled: pinnedIndex === 0, onClick: actions.movePinnedUp }))] }))] })), jsx(AccordionItemDepthContext.Provider, { value: true, children: children })] }));
+    return pinnedContainer ? jsx(Portal, { mountNode: pinnedContainer, children: itemElement }) : itemElement;
+};
+/**
+ * Renders the Pinned section container and defines the portal target for the pinned items.
+ *
+ * @returns `div`
+ */
+const AccordionPinnedContainer = () => {
+    AccordionPinnedContainer.displayName = "AccordionPinnedContainer";
+    const classes = useStyles$S();
+    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" }) }) }));
+};
+/**
+ * Renders the search box for filtering items.
+ *
+ * @returns `SearchBox`, or `null` if the feature is disabled.
+ */
+const AccordionSearchBox = () => {
+    AccordionSearchBox.displayName = "AccordionSearchBox";
+    const classes = useStyles$S();
+    const accordionCtx = useContext(AccordionContext);
+    if (!accordionCtx?.features.search) {
+        return null;
+    }
+    const { state, dispatch } = accordionCtx;
+    return (jsx(SearchBox$1, { className: classes.searchBox, appearance: "underline", contentBefore: jsx(FilterRegular, {}), placeholder: "Filter", value: state.searchTerm, onChange: (_, data) => dispatch({ type: "SET_SEARCH_TERM", term: data.value }) }));
+};
+/**
+ * Wrapper component that must encapsulate the section body.
+ *
+ * @param props - `AccordionSectionProps`
+ * @returns `div`
+ */
+const AccordionSection = (props) => {
+    AccordionSection.displayName = "AccordionSection";
+    const classes = useStyles$S();
+    return jsx("div", { className: classes.panelDiv, children: props.children });
+};
+const StringAccordion = Accordion$1;
+const Accordion = forwardRef((props, ref) => {
+    Accordion.displayName = "Accordion";
+    const { children, highlightSections, ...rest } = props;
+    const classes = useStyles$S();
+    const { size } = useContext(ToolContext);
+    const accordionCtx = useAccordionContext(props);
+    const hasPinning = accordionCtx?.features.pinning ?? false;
+    const pinnedSectionElement = useMemo(() => {
+        return (hasPinning && (jsx(AccordionSection, { title: "Pinned", collapseByDefault: false, children: jsx(AccordionPinnedContainer, {}) })));
+    }, [hasPinning]);
+    // Prevents sections contents from unmounting when closed, allowing their elements to be used in the Pinned section.
+    const preventUnmountMotion = useMemo(() => {
+        // https://github.com/microsoft/fluentui/issues/34309#issuecomment-2824364945
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        return hasPinning ? { children: (Component, props) => jsx(Component, { ...props, unmountOnExit: false }) } : undefined;
+    }, [hasPinning]);
+    const validChildren = useMemo(() => {
+        return (Children.map([pinnedSectionElement, children], (child) => {
+            if (isValidElement(child)) {
+                const childProps = child.props;
+                if (childProps.title) {
+                    return {
+                        title: childProps.title,
+                        collapseByDefault: childProps.collapseByDefault,
+                        content: child,
+                    };
+                }
+            }
+            return null;
+        })?.filter(Boolean) ?? []);
+    }, [children]);
+    // Tracks open items, and used to tell the Accordion which sections should be expanded.
+    const [openItems, setOpenItems] = useState(validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title));
+    // Tracks closed items, which is needed so that when the children change, we only update the open/closed state
+    // (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.
+    const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));
+    const internalOpenItemsRef = useRef(openItems);
+    // When highlight sections is requested, we temporarily override the open items, but if highlight sections is cleared,
+    // then we revert back to the normal open items tracking.
+    useLayoutEffect(() => {
+        if (highlightSections) {
+            internalOpenItemsRef.current = [...openItems];
+            setOpenItems([...highlightSections]);
+        }
+        else {
+            setOpenItems([...(internalOpenItemsRef.current ?? [])]);
+            internalOpenItemsRef.current = undefined;
+        }
+    }, [highlightSections]);
+    useEffect(() => {
+        for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {
+            // If a child is not marked as collapseByDefault, then it should be opened by default, and
+            // it is only "default" if it hasn't already been explicitly added to the opened or closed list.
+            if (!closedItems.includes(defaultOpenItem) && !openItems.includes(defaultOpenItem)) {
+                setOpenItems((prev) => [...prev, defaultOpenItem]);
+            }
+        }
+    }, [validChildren]);
+    const onToggle = useCallback((event, data) => {
+        if (data.openItems.includes(data.value)) {
+            setOpenItems((prev) => [...prev, data.value]);
+            setClosedItems((prev) => prev.filter((item) => item !== data.value));
+        }
+        else {
+            setClosedItems((prev) => [...prev, data.value]);
+            setOpenItems((prev) => prev.filter((item) => item !== data.value));
+        }
+    }, []);
+    return (jsx(StringAccordion, { ref: ref, className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...rest, children: jsxs(AccordionContext.Provider, { value: accordionCtx, children: [jsx(AccordionMenuBar, {}), jsx("div", { className: classes.accordionBody, children: validChildren.map((child, index) => {
+                        const isHighlighted = highlightSections?.includes(child.title);
+                        return (jsxs(AccordionSectionBlock, { sectionId: child.title, children: [jsxs("div", { className: isHighlighted ? classes.highlightDiv : undefined, children: [jsx(AccordionHeader, { size: size, children: jsx(Subtitle2Stronger, { children: child.title }) }), jsx(AccordionPanel, { collapseMotion: preventUnmountMotion, children: jsx("div", { className: classes.panelDiv, children: child.content }) })] }), index < validChildren.length - 1 && jsx(Divider, { inset: true, className: size === "small" ? classes.dividerSmall : classes.divider })] }, child.content.key ?? child.title));
+                    }) })] }) }));
+});
+
 const useCollapseStyles = makeStyles({
     collapseContent: {
         overflow: "hidden",
@@ -1039,7 +1518,9 @@ const useCollapseStyles = makeStyles({
 const Collapse = (props) => {
     Collapse.displayName = "Collapse";
     const classes = useCollapseStyles();
-    return (jsx(Collapse$1, { visible: props.visible, orientation: props.orientation, children: jsx("div", { className: `${classes.collapseContent} ${props.orientation === "horizontal" ? classes.horizontal : classes.vertical}`, children: props.children }) }));
+    // Since portalling breaks DOM hierarchy, `unmountOnExit` is required to ensure descendants are unmounted when the logical ancestor collapses.
+    // If this is a breaking change, the alternative would be creating a context to pass the `visible` state down to the descendants.
+    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 Link = forwardRef((props, ref) => {
@@ -1050,7 +1531,7 @@ const Link = forwardRef((props, ref) => {
 });
 Link.displayName = "Link";
 
-const useStyles$S = makeStyles({
+const useStyles$R = makeStyles({
     button: {
         display: "flex",
         alignItems: "center",
@@ -1068,7 +1549,7 @@ const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle" } = props;
     const { size } = useContext(ToolContext);
-    const classes = useStyles$S();
+    const classes = useStyles$R();
     const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
         setChecked((prev) => {
@@ -1098,7 +1579,7 @@ const useInfoLabelStyles = makeStyles({
         textOverflow: "ellipsis",
     },
     copyable: {
-        cursor: "copy",
+        cursor: "pointer",
     },
 });
 /**
@@ -1224,7 +1705,7 @@ const PropertyLine = forwardRef((props, ref) => {
     PropertyLine.displayName = "PropertyLine";
     const { disableCopy, size } = useContext(ToolContext);
     const classes = usePropertyLineStyles();
-    const { label, onCopy, expandedContent, children, nullable, ignoreNullable } = props;
+    const { label, uniqueId, onCopy, expandedContent, children, nullable, ignoreNullable } = props;
     const [expanded, setExpanded] = useState("expandByDefault" in props ? props.expandByDefault : false);
     const cachedVal = useRef(nullable ? props.value : null);
     const { showToast } = useToast();
@@ -1248,7 +1729,7 @@ const PropertyLine = forwardRef((props, ref) => {
             defaultValue: undefined, // Don't pass defaultValue to children as there is no guarantee how this will be used and we can't mix controlled + uncontrolled state
         })
         : children;
-    return (jsxs(LineContainer, { ref: ref, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel, { className: classes.infoLabel, htmlFor: "property", info: description, label: label, flexLabel: true, onContextMenu: onCopy ? handleContextMenu : undefined }), jsxs("div", { className: classes.rightContent, id: "property", children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
+    return (jsxs(LineContainer, { ref: ref, uniqueId: uniqueId ?? label, label: label, children: [jsxs("div", { className: classes.baseLine, children: [jsx(InfoLabel, { className: classes.infoLabel, htmlFor: "property", info: description, label: label, flexLabel: true, onContextMenu: onCopy ? handleContextMenu : undefined }), jsxs("div", { className: classes.rightContent, id: "property", children: [expandedContent && (jsx(ToggleButton, { title: "Expand/Collapse property", appearance: "transparent", checkedIcon: size === "small" ? ChevronCircleDown16Regular : ChevronCircleDown20Regular, uncheckedIcon: size === "small" ? ChevronCircleRight16Regular : ChevronCircleRight20Regular, value: expanded === true, onChange: setExpanded })), nullable && !ignoreNullable && (
                             // If this is a nullableProperty and ignoreNullable was not sent, display a checkbox used to toggle null ('checked' means 'non null')
                             jsx(Tooltip, { content: props.value == null ? "Enable property" : "Disable property (set to null)", children: jsx(Checkbox$1, { className: classes.checkbox, indicator: { className: classes.checkboxIndicator }, checked: !(props.value == null), onChange: (_, data) => {
                                         if (data.checked) {
@@ -1285,8 +1766,9 @@ const useLineStyles = makeStyles({
 });
 const LineContainer = forwardRef((props, ref) => {
     const { size } = useContext(ToolContext);
+    const { children, uniqueId, label, ...rest } = props;
     const classes = useLineStyles();
-    return (jsx("div", { ref: ref, className: mergeClasses(classes.container, size == "small" ? classes.containerSmall : undefined), ...props, children: props.children }));
+    return (jsx(AccordionSectionItem, { uniqueId: uniqueId, label: label, children: jsx("div", { ref: ref, className: mergeClasses(classes.container, size == "small" ? classes.containerSmall : undefined), ...rest, children: children }) }));
 });
 const PlaceholderPropertyLine = (props) => {
     return (jsx(PropertyLine, { ...props, children: jsx(Body1, { children: props.value }) }));
@@ -1317,117 +1799,6 @@ const LinkToEntityPropertyLine = (props) => {
         !linkedEntity.reservedDataStore?.hidden && jsx(LinkPropertyLine, { ...rest, value: linkedEntity.name, onLink: () => (selectionService.selectedEntity = linkedEntity) }));
 };
 
-const useStyles$R = makeStyles({
-    accordion: {
-        overflowX: "hidden",
-        overflowY: "auto",
-        paddingBottom: tokens.spacingVerticalM, // bottom padding since there is no divider at the bottom
-        display: "flex",
-        flexDirection: "column",
-        height: "100%",
-    },
-    divider: {
-        paddingTop: CustomTokens.dividerGap,
-        paddingBottom: CustomTokens.dividerGap,
-    },
-    dividerSmall: {
-        paddingTop: CustomTokens.dividerGapSmall,
-        paddingBottom: CustomTokens.dividerGapSmall,
-    },
-    panelDiv: {
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-    },
-    highlightDiv: {
-        borderRadius: tokens.borderRadiusLarge,
-        animationDuration: "1s",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "5",
-        animationFillMode: "forwards",
-        animationName: {
-            from: {
-                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,
-            },
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            "50%": {
-                boxShadow: `inset 0 0 12px ${tokens.colorBrandBackground}`,
-            },
-            to: {
-                boxShadow: `inset 0 0 4px ${tokens.colorTransparentBackground}`,
-            },
-        },
-    },
-});
-const AccordionSection = (props) => {
-    AccordionSection.displayName = "AccordionSection";
-    const classes = useStyles$R();
-    return jsx("div", { className: classes.panelDiv, children: props.children });
-};
-const StringAccordion = Accordion$1;
-const Accordion = forwardRef((props, ref) => {
-    Accordion.displayName = "Accordion";
-    const classes = useStyles$R();
-    const { size } = useContext(ToolContext);
-    const { children, highlightSections, ...rest } = props;
-    const validChildren = useMemo(() => {
-        return (Children.map(children, (child) => {
-            if (isValidElement(child)) {
-                const childProps = child.props;
-                if (childProps.title) {
-                    return {
-                        title: childProps.title,
-                        collapseByDefault: childProps.collapseByDefault,
-                        content: child,
-                    };
-                }
-            }
-            return null;
-        })?.filter(Boolean) ?? []);
-    }, [children]);
-    // Tracks open items, and used to tell the Accordion which sections should be expanded.
-    const [openItems, setOpenItems] = useState(validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title));
-    // Tracks closed items, which is needed so that when the children change, we only update the open/closed state
-    // (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.
-    const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));
-    const internalOpenItemsRef = useRef(openItems);
-    // When highlight sections is requested, we temporarily override the open items, but if highlight sections is cleared,
-    // then we revert back to the normal open items tracking.
-    useLayoutEffect(() => {
-        if (highlightSections) {
-            internalOpenItemsRef.current = [...openItems];
-            setOpenItems([...highlightSections]);
-        }
-        else {
-            setOpenItems([...(internalOpenItemsRef.current ?? [])]);
-            internalOpenItemsRef.current = undefined;
-        }
-    }, [highlightSections]);
-    useEffect(() => {
-        for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {
-            // If a child is not marked as collapseByDefault, then it should be opened by default, and
-            // it is only "default" if it hasn't already been explicitly added to the opened or closed list.
-            if (!closedItems.includes(defaultOpenItem) && !openItems.includes(defaultOpenItem)) {
-                setOpenItems((prev) => [...prev, defaultOpenItem]);
-            }
-        }
-    }, [validChildren]);
-    const onToggle = useCallback((event, data) => {
-        if (data.openItems.includes(data.value)) {
-            setOpenItems((prev) => [...prev, data.value]);
-            setClosedItems((prev) => prev.filter((item) => item !== data.value));
-        }
-        else {
-            setClosedItems((prev) => [...prev, data.value]);
-            setOpenItems((prev) => prev.filter((item) => item !== data.value));
-        }
-    }, []);
-    return (jsx(StringAccordion, { ref: ref, className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...rest, children: validChildren.map((child, index) => {
-            const isHighlighted = highlightSections?.includes(child.title);
-            return (jsxs(AccordionItem, { value: child.title, children: [jsxs("div", { className: isHighlighted ? classes.highlightDiv : undefined, children: [jsx(AccordionHeader, { size: size, children: jsx(Subtitle2Stronger, { children: child.title }) }), jsx(AccordionPanel, { children: jsx("div", { className: classes.panelDiv, children: child.content }) })] }), index < validChildren.length - 1 && jsx(Divider, { inset: true, className: size === "small" ? classes.dividerSmall : classes.divider })] }, child.content.key ?? child.title));
-        }) }));
-});
-
 const CompactModeStorageKey = "Babylon/Settings/IsCompactMode";
 const SidePaneDockOverridesStorageKey = "Babylon/Settings/SidePaneDockOverrides";
 const DisableCopyStorageKey = "Babylon/Settings/DisableCopy";
@@ -1517,7 +1888,7 @@ const useStyles$Q = makeStyles({
 });
 function ExtensibleAccordion(props) {
     const classes = useStyles$Q();
-    const { children, sections, sectionContent, context, sectionsRef } = props;
+    const { children, sections, sectionContent, context, sectionsRef, ...rest } = props;
     const defaultSections = useMemo(() => {
         const defaultSections = [];
         if (children) {
@@ -1616,7 +1987,7 @@ function ExtensibleAccordion(props) {
             },
         };
     }, []);
-    return (jsx("div", { className: classes.rootDiv, children: visibleSections.length > -1 && (jsx(UXContextProvider, { children: jsxs(Accordion, { highlightSections: highlightSections, children: [...visibleSections.map((section) => {
+    return (jsx("div", { className: classes.rootDiv, children: visibleSections.length > -1 && (jsx(UXContextProvider, { children: jsxs(Accordion, { highlightSections: highlightSections, ...rest, children: [...visibleSections.map((section) => {
                         return (jsx(AccordionSection, { title: section.identity, collapseByDefault: section.collapseByDefault, children: section.components }, section.identity));
                     })] }) })) }));
 }
@@ -2249,16 +2620,17 @@ const useStyles$M = makeStyles({
     bar: {
         display: "flex",
         flex: "1",
-        height: "32px",
         overflow: "hidden",
         padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,
-        border: `1px solid ${tokens.colorNeutralStroke2}`,
-        borderBottomWidth: 0,
-        backgroundColor: tokens.colorNeutralBackground1,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        backgroundColor: tokens.colorNeutralBackground2,
     },
     barTop: {
         borderTopWidth: 0,
     },
+    barBottom: {
+        borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
     barLeft: {
         marginRight: "auto",
         display: "flex",
@@ -2277,7 +2649,7 @@ const useStyles$M = makeStyles({
         display: "flex",
     },
     paneTabListDiv: {
-        backgroundColor: tokens.colorNeutralBackground2,
+        backgroundColor: tokens.colorNeutralBackground1,
         flex: "0 0 auto",
         display: "flex",
     },
@@ -2288,7 +2660,11 @@ const useStyles$M = makeStyles({
         flexDirection: "row",
     },
     paneCollapseButton: {
-        margin: `0 0 0 ${tokens.spacingHorizontalXS}`,
+        padding: `0 0 0 ${tokens.spacingHorizontalXS}`,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
+    paneCollapseButtonWithBorder: {
+        borderLeft: `1px solid ${tokens.colorNeutralStroke2}`,
     },
     collapseMenuPopover: {
         minWidth: 0,
@@ -2330,7 +2706,6 @@ const useStyles$M = makeStyles({
         height: "36px",
         backgroundColor: tokens.colorNeutralBackground1,
         color: tokens.colorNeutralForeground1,
-        border: `1px solid ${tokens.colorNeutralStroke2}`,
     },
     paneHeaderText: {
         flex: 1,
@@ -2349,29 +2724,33 @@ const useStyles$M = makeStyles({
     },
     tabToolbar: {
         padding: 0,
+        borderLeft: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
     },
     tab: {
         display: "flex",
         height: "100%",
-        width: "36px",
+        boxSizing: "border-box",
         justifyContent: "center",
-        borderTopLeftRadius: tokens.borderRadiusMedium,
-        borderTopRightRadius: tokens.borderRadiusMedium,
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderTop: "none",
+    },
+    firstTab: {
+        borderLeftColor: "transparent",
+    },
+    lastTab: {
+        borderRightColor: "transparent",
     },
     selectedTab: {
-        backgroundColor: tokens.colorNeutralBackground1,
-        color: tokens.colorNeutralForeground1,
-        border: `1px solid ${tokens.colorNeutralStroke2}`,
         borderBottom: "none",
     },
     unselectedTab: {
-        backgroundColor: "transparent",
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent",
     },
     tabRadioButton: {
         backgroundColor: "transparent",
-    },
-    selectedTabIcon: {
-        color: "inherit",
+        borderRadius: 0,
     },
     resizer: {
         width: "8px",
@@ -2435,19 +2814,18 @@ const Toolbar = ({ location, components }) => {
     const classes = useStyles$M();
     const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
     const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
-    return (jsx(Fragment, { children: components.length > 0 && (jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : null}`, children: [jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
+    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, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) }), jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, suppressTeachingMoment: entry.suppressTeachingMoment }, entry.key))) })] })) }));
 };
 // This is a wrapper for a tab in a side pane that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
 const SidePaneTab = (props) => {
-    const { location, id, isSelected, dockOptions, 
+    const { location, id, isSelected, isFirst, isLast, dockOptions, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     icon: Icon, title, suppressTeachingMoment, } = props;
     const classes = useStyles$M();
     const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
     const teachingMoment = useTeachingMoment(suppressTeachingMoment);
-    const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab);
+    const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab, isFirst ? classes.firstTab : undefined, isLast ? classes.lastTab : undefined);
     return (jsxs(Fragment, { children: [jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay && !suppressTeachingMoment, title: title ?? "Extension", description: `The "${title ?? id}" extension can be accessed here.` }), jsx("div", { className: tabClass, children: jsx(DockMenu, { openOnContext: true, sidePaneId: id, dockOptions: dockOptions, children: jsx(Tooltip, { content: title ?? id, children: jsx(ToolbarRadioButton, { ref: teachingMoment.targetRef, appearance: "transparent", className: classes.tabRadioButton, name: "selectedTab", value: id, icon: {
-                                className: isSelected ? classes.selectedTabIcon : undefined,
                                 children: jsx(Icon, {}),
                             } }) }) }) })] }));
 };
@@ -2548,17 +2926,17 @@ function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane,
     }, [childWindow, location]);
     const expandCollapseButton = useMemo(() => {
         const expandCollapseIcon = location === "left" ? collapsed ? jsx(PanelLeftExpandRegular, {}) : jsx(PanelLeftContractRegular, {}) : collapsed ? jsx(PanelRightExpandRegular, {}) : jsx(PanelRightContractRegular, {});
-        return (jsxs(Menu, { positioning: "below-end", children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", children: jsx(SplitButton, { className: classes.paneCollapseButton, menuButton: triggerProps, primaryActionButton: { onClick: onExpandCollapseClick }, size: "small", appearance: "transparent", icon: expandCollapseIcon }) })) }), jsx(MenuPopover, { className: classes.collapseMenuPopover, children: jsx(MenuList, { children: jsx(MenuItem, { icon: jsx(PictureInPictureEnterRegular, {}), onClick: () => setUndocked(true), children: "Undock" }) }) })] }));
+        return (jsxs(Menu, { positioning: "below-end", children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", children: jsx(SplitButton, { className: mergeClasses(classes.paneCollapseButton, location === "right" && toolbarMode === "compact" ? classes.paneCollapseButtonWithBorder : undefined), menuButton: triggerProps, primaryActionButton: { onClick: onExpandCollapseClick }, size: "small", appearance: "transparent", icon: expandCollapseIcon }) })) }), jsx(MenuPopover, { className: classes.collapseMenuPopover, children: jsx(MenuList, { children: jsx(MenuItem, { icon: jsx(PictureInPictureEnterRegular, {}), onClick: () => setUndocked(true), children: "Undock" }) }) })] }));
     }, [collapsed, onExpandCollapseClick, location]);
     const createPaneTabList = useCallback((paneComponents, toolbarMode, selectedTab, setSelectedTab, dockOptions) => {
         return (jsx(Fragment, { children: paneComponents.length > 0 && (jsxs("div", { className: `${classes.paneTabListDiv} ${location === "left" || toolbarMode === "compact" ? classes.paneTabListDivLeft : classes.paneTabListDivRight}`, children: [paneComponents.length > 1 && (jsx(Fragment, { children: jsx(Toolbar$1, { className: classes.tabToolbar, checkedValues: { selectedTab: [selectedTab?.key ?? ""] }, onCheckedValueChange: (event, data) => {
                                 const tab = paneComponents.find((entry) => entry.key === data.checkedItems[0]);
                                 setSelectedTab(tab);
                                 setCollapsed(false);
-                            }, children: paneComponents.map((entry) => {
+                            }, children: paneComponents.map((entry, index) => {
                                 const isSelected = selectedTab?.key === entry.key;
-                                return (jsx(SidePaneTab, { location: location, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment, isSelected: isSelected && !collapsed, dockOptions: dockOptions }, entry.key));
-                            }) }) })), toolbarMode === "full" && (jsxs(Fragment, { children: [paneComponents.length > 1 && (jsxs(Fragment, { children: [jsx(Divider, { vertical: true, inset: true, style: { minHeight: 0 } }), " "] })), jsx(Collapse, { visible: !isChildWindowOpen, orientation: "horizontal", children: expandCollapseButton })] }))] })) }));
+                                return (jsx(SidePaneTab, { location: location, id: entry.key, title: entry.title, icon: entry.icon, suppressTeachingMoment: entry.suppressTeachingMoment, isSelected: isSelected && !collapsed, isFirst: index === 0, isLast: index === paneComponents.length - 1, dockOptions: dockOptions }, entry.key));
+                            }) }) })), toolbarMode === "full" && (jsx(Collapse, { visible: !isChildWindowOpen, orientation: "horizontal", children: expandCollapseButton }))] })) }));
     }, [location, collapsed, isChildWindowOpen, expandCollapseButton]);
     // This memos the TabList to make it easy for the JSX to be inserted at the top of the pane (in "compact" mode) or returned to the caller to be used in the toolbar (in "full" mode).
     const topPaneTabList = useMemo(() => createPaneTabList(topPanes, toolbarMode, topSelectedTab, setTopSelectedTab, validTopDockOptions), [createPaneTabList, topPanes, toolbarMode, topSelectedTab]);
@@ -2939,7 +3317,7 @@ const PropertiesServiceDefinition = {
                         setPendingHighlight(undefined);
                     }
                 }, [pendingHighlight]);
-                return (jsx(PropertyContext.Provider, { value: { onPropertyChanged }, children: jsx(PropertiesPane, { sections: sections, sectionContent: applicableContent, context: entity, sectionsRef: sectionsRef }) }));
+                return (jsx(PropertyContext.Provider, { value: { onPropertyChanged }, children: jsx(PropertiesPane, { uniqueId: "Properties", sections: sections, sectionContent: applicableContent, context: entity, sectionsRef: sectionsRef, enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true }) }));
             },
         });
         return {
@@ -3807,7 +4185,7 @@ const DebugServiceDefinition = {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                return jsx(Fragment, { children: scene && jsx(DebugPane, { sections: sections, sectionContent: sectionContent, context: scene }) });
+                return (jsx(Fragment, { children: scene && (jsx(DebugPane, { uniqueId: "Debug", sections: sections, sectionContent: sectionContent, context: scene, enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true })) }));
             },
         });
         return {
@@ -3825,7 +4203,7 @@ const DebugServiceDefinition = {
  */
 const ButtonLine = (props) => {
     ButtonLine.displayName = "ButtonLine";
-    return (jsx(LineContainer, { children: jsx(Button, { ...props }) }));
+    return (jsx(LineContainer, { uniqueId: props.uniqueId ?? props.label, children: jsx(Button, { ...props }) }));
 };
 
 const SettingsServiceIdentity = Symbol("SettingsService");
@@ -4022,7 +4400,7 @@ const UploadButton = (props) => {
  */
 const FileUploadLine = ({ onClick, label, accept, ...buttonProps }) => {
     FileUploadLine.displayName = "FileUploadLine";
-    return (jsx(LineContainer, { children: jsx(UploadButton, { onUpload: onClick, accept: accept, label: label, ...buttonProps }) }));
+    return (jsx(LineContainer, { uniqueId: label, children: jsx(UploadButton, { onUpload: onClick, accept: accept, label: label, ...buttonProps }) }));
 };
 
 /**
@@ -5799,7 +6177,7 @@ const PerformanceStats = ({ context: scene }) => {
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
     }, [onResize]);
-    return (jsxs(Fragment, { children: [!isOpen && jsx(ButtonLine, { label: "Open Realtime Perf Viewer", onClick: onPerformanceButtonClick }), !isOpen && jsx(FileUploadLine, { label: "Load Perf Viewer using CSV", accept: ".csv", onClick: onLoadClick }), jsx(ButtonLine, { label: "Export Perf to CSV", icon: ArrowDownloadRegular, onClick: onExportClick }), !isOpen && jsx(ButtonLine, { label: isRecording ? "Stop Recording" : "Begin Recording", icon: isRecording ? StopRegular : RecordRegular, onClick: onToggleRecording }), jsx(ChildWindow, { id: "performance-viewer", imperativeRef: childWindowRef, onOpenChange: (open) => !open && onClosePerformanceViewer(), children: performanceCollector && (jsx(PerformanceViewer, { scene: scene, layoutObservable: layoutObservable, returnToLiveObservable: returnToLiveObservable, performanceCollector: performanceCollector, initialGraphSize: InitialGraphSize })) })] }));
+    return (jsxs(Fragment, { children: [!isOpen && jsx(ButtonLine, { label: "Open Realtime Perf Viewer", onClick: onPerformanceButtonClick }), !isOpen && jsx(FileUploadLine, { label: "Load Perf Viewer using CSV", accept: ".csv", onClick: onLoadClick }), jsx(ButtonLine, { label: "Export Perf to CSV", icon: ArrowDownloadRegular, onClick: onExportClick }), !isOpen && (jsx(ButtonLine, { uniqueId: "Start/Stop", label: isRecording ? "Stop Recording" : "Begin Recording", icon: isRecording ? StopRegular : RecordRegular, onClick: onToggleRecording })), jsx(ChildWindow, { id: "performance-viewer", imperativeRef: childWindowRef, onOpenChange: (open) => !open && onClosePerformanceViewer(), children: performanceCollector && (jsx(PerformanceViewer, { scene: scene, layoutObservable: layoutObservable, returnToLiveObservable: returnToLiveObservable, performanceCollector: performanceCollector, initialGraphSize: InitialGraphSize })) })] }));
 };
 
 /**
@@ -5869,7 +6247,7 @@ const StatsServiceDefinition = {
                 const sections = useOrderedObservableCollection(sectionsCollection);
                 const sectionContent = useObservableCollection(sectionContentCollection);
                 const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                return jsx(Fragment, { children: scene && jsx(StatsPane, { sections: sections, sectionContent: sectionContent, context: scene }) });
+                return (jsx(Fragment, { children: scene && (jsx(StatsPane, { uniqueId: "Statistics", sections: sections, sectionContent: sectionContent, context: scene, enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true })) }));
             },
         });
         // Default/built-in sections.
@@ -5958,7 +6336,7 @@ const ToolsServiceDefinition = {
                         const sections = useOrderedObservableCollection(sectionsCollection);
                         const sectionContent = useObservableCollection(sectionContentCollection);
                         const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                        return scene && jsx(ToolsPane, { sections: sections, sectionContent: sectionContent, context: scene });
+                        return (scene && (jsx(ToolsPane, { uniqueId: "Tools", sections: sections, sectionContent: sectionContent, context: scene, enablePinnedItems: true, enableHiddenItems: true, enableSearchItems: true })));
                     },
                 });
             }
@@ -5986,7 +6364,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-B55TQEXK.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-B4U-3oma.js'),
     },
     {
         name: "Reflector",
@@ -5994,7 +6372,7 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         keywords: ["reflector", "bridge", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
         author: { name: "Babylon.js", forumUserName: "" },
-        getExtensionModuleAsync: async () => await import('./reflectorService-BHVk1B6L.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-ozofO4uE.js'),
     },
 ]);
 
@@ -6824,7 +7202,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-1OhC4MZF.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-DnGdJhHc.js');
                     await serviceContainer.addServiceAsync(ExtensionListServiceDefinition);
                 }
                 // Register the theme selector service (for selecting the theme) if theming is configured.
@@ -10794,7 +11172,7 @@ const AnimationGroupControlProperties = (props) => {
         return currentFrameHolder ? currentFrameHolder.currentFrame : undefined;
     }, [currentFrameHolder]), isPlaying ? animationGroup.getScene().onBeforeRenderObservable : null);
     const enableBlending = useProperty(animationGroup, "enableBlending");
-    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: isPlaying ? "Pause" : "Play", onClick: () => (isPlaying ? animationGroup.pause() : animationGroup.play(true)) }), jsx(ButtonLine, { label: "Stop", onClick: () => animationGroup.stop() }), jsx(CurveEditorButton, { scene: scene, target: null, animations: targetedAnimations, rootAnimationGroup: animationGroup, title: animationGroup.name, useTargetAnimations: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Speed Ratio", min: 0, max: 10, step: 0.1, target: animationGroup, propertyKey: "speedRatio" }), currentFrameHolder && currentFrame !== undefined ? (jsx(SyncedSliderPropertyLine, { label: "Current Frame", min: animationGroup.from, max: animationGroup.to, step: (animationGroup.to - animationGroup.from) / 1000.0, value: currentFrame, onChange: (value) => {
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { uniqueId: "Start/Stop", label: isPlaying ? "Pause" : "Play", onClick: () => (isPlaying ? animationGroup.pause() : animationGroup.play(true)) }), jsx(ButtonLine, { label: "Stop", onClick: () => animationGroup.stop() }), jsx(CurveEditorButton, { scene: scene, target: null, animations: targetedAnimations, rootAnimationGroup: animationGroup, title: animationGroup.name, useTargetAnimations: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Speed Ratio", min: 0, max: 10, step: 0.1, target: animationGroup, propertyKey: "speedRatio" }), currentFrameHolder && currentFrame !== undefined ? (jsx(SyncedSliderPropertyLine, { label: "Current Frame", min: animationGroup.from, max: animationGroup.to, step: (animationGroup.to - animationGroup.from) / 1000.0, value: currentFrame, onChange: (value) => {
                     if (!animationGroup.isPlaying) {
                         animationGroup.play(true);
                         animationGroup.goToFrame(value);
@@ -10856,9 +11234,9 @@ const useClasses = makeStyles({
 });
 const MessageBar = (props) => {
     MessageBar.displayName = "MessageBar";
-    const { message, title, intent, docLink } = props;
+    const { message, title, intent, docLink, staticItem } = props;
     const classes = useClasses();
-    return (jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [title && jsx(MessageBarTitle, { children: title }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }));
+    return (jsx(AccordionSectionItem, { uniqueId: title ?? message, staticItem: staticItem ?? true, children: jsx("div", { className: classes.container, children: jsx(MessageBar$1, { intent: intent, layout: "multiline", children: jsxs(MessageBarBody, { children: [title && jsx(MessageBarTitle, { children: title }), message, docLink && (jsxs(Fragment, { children: [" - ", jsx(Link, { url: docLink, value: "Learn More" })] }))] }) }) }) }));
 };
 
 const AnimationsProperties = (props) => {
@@ -10903,7 +11281,7 @@ const AnimationsProperties = (props) => {
                                     }
                                 } }), jsx(SyncedSliderPropertyLine, { label: "Current Frame", value: currentFrame, min: mainAnimatable.fromFrame, max: mainAnimatable.toFrame, step: (mainAnimatable.toFrame - mainAnimatable.fromFrame) / 1000, onChange: (value) => {
                                     mainAnimatable.goToFrame(value);
-                                } })] }), expandByDefault: true }) })), hasAnimations && (jsx(ButtonLine, { label: isPlaying ? "Stop Animation" : "Play Animation", onClick: () => {
+                                } })] }), expandByDefault: true }) })), hasAnimations && (jsx(ButtonLine, { uniqueId: "Start/Stop", label: isPlaying ? "Stop Animation" : "Play Animation", onClick: () => {
                     if (isPlaying) {
                         scene.stopAnimation(entity);
                     }
@@ -11046,7 +11424,7 @@ const SoundCommandProperties = (props) => {
     const { sound } = props;
     const soundState = useSoundState(sound);
     const volume = useObservableState(useCallback(() => sound.getVolume(), [sound]), useInterceptObservable("function", sound, "setVolume"));
-    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: soundState === "Playing" ? "Pause" : "Play", icon: soundState === "Playing" ? PauseRegular : PlayRegular, onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { uniqueId: "Start/Stop", label: soundState === "Playing" ? "Pause" : "Play", icon: soundState === "Playing" ? PauseRegular : PlayRegular, onClick: () => {
                     if (soundState === "Playing") {
                         sound.pause();
                     }
@@ -12681,7 +13059,7 @@ const PBRBaseMaterialChannelsProperties = (props) => {
     const { material, selectionService } = props;
     const scene = material.getScene();
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Albedo", target: material, propertyKey: "_albedoTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "_baseWeightTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughnessTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "_metallicTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflection", target: material, propertyKey: "_reflectionTexture", scene: scene, cubeOnly: true, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material.subSurface, propertyKey: "refractionTexture", propertyPath: "subSurface.refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectivity", target: material, propertyKey: "_reflectivityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Micro Surface", target: material, propertyKey: "_microSurfaceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "_bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "_emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "_opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "_ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "_lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", propertyPath: "detailMap.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "_useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled", propertyPath: "detailMap.isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled", propertyPath: "decalMap.isEnabled" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Albedo", target: material, propertyKey: "_albedoTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Weight", target: material, propertyKey: "_baseWeightTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughnessTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Roughness", target: material, propertyKey: "_metallicTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, uniqueId: "PBRBaseMaterialChannels_Reflection", label: "Reflection", target: material, propertyKey: "_reflectionTexture", scene: scene, cubeOnly: true, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material.subSurface, propertyKey: "refractionTexture", propertyPath: "subSurface.refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectivity", target: material, propertyKey: "_reflectivityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Micro Surface", target: material, propertyKey: "_microSurfaceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "_bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "_emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "_opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "_ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "_lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", propertyPath: "detailMap.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "_useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled", propertyPath: "detailMap.isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled", propertyPath: "decalMap.isEnabled" })] }));
 };
 const PBRBaseMaterialLightingAndColorProperties = (props) => {
     const { material } = props;
@@ -12691,7 +13069,7 @@ const PBRBaseMaterialMetallicWorkflowProperties = (props) => {
     const { material, selectionService } = props;
     const scene = material.getScene();
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Metallic", target: material, propertyKey: "_metallic", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Roughness", target: material, propertyKey: "_roughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Index of Refraction", target: material.subSurface, propertyKey: "indexOfRefraction", propertyPath: "subSurface.indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "F0 Factor", target: material, propertyKey: "_metallicF0Factor", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectance Color", target: material, propertyKey: "_metallicReflectanceColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Metallic Only", description: "Use only metallic from MetallicReflectance texture", target: material, propertyKey: "_useOnlyMetallicFromMetallicReflectanceTexture" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Reflectance", target: material, propertyKey: "_metallicReflectanceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectance", target: material, propertyKey: "_reflectanceTexture", scene: scene, onLink: selectEntity, defaultValue: null })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Metallic", target: material, propertyKey: "_metallic", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, uniqueId: "PBRBaseMaterialMetallicWorkflow_Roughness", label: "Roughness", target: material, propertyKey: "_roughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Base Diffuse Roughness", target: material, propertyKey: "_baseDiffuseRoughness", min: 0, max: 1, step: 0.01, nullable: true, defaultValue: 0 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Index of Refraction", target: material.subSurface, propertyKey: "indexOfRefraction", propertyPath: "subSurface.indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "F0 Factor", target: material, propertyKey: "_metallicF0Factor", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Reflectance Color", target: material, propertyKey: "_metallicReflectanceColor", isLinearMode: true }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Metallic Only", description: "Use only metallic from MetallicReflectance texture", target: material, propertyKey: "_useOnlyMetallicFromMetallicReflectanceTexture" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Metallic Reflectance", target: material, propertyKey: "_metallicReflectanceTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflectance", target: material, propertyKey: "_reflectanceTexture", scene: scene, onLink: selectEntity, defaultValue: null })] }));
 };
 const PBRBaseMaterialClearCoatProperties = (props) => {
     const { material, selectionService } = props;
@@ -12700,7 +13078,7 @@ const PBRBaseMaterialClearCoatProperties = (props) => {
     const isEnabled = useProperty(material.clearCoat, "isEnabled");
     const isTintEnabled = useProperty(material.clearCoat, "isTintEnabled");
     const bumpTexture = useProperty(material.clearCoat, "bumpTexture");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.clearCoat, propertyKey: "isEnabled", propertyPath: "clearCoat.isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.clearCoat, propertyKey: "intensity", propertyPath: "clearCoat.intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Roughness", target: material.clearCoat, propertyKey: "roughness", propertyPath: "clearCoat.roughness", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "IOR", description: "Index of Refraction", target: material.clearCoat, propertyKey: "indexOfRefraction", propertyPath: "clearCoat.indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Remap F0", target: material.clearCoat, propertyKey: "remapF0OnInterfaceChange", propertyPath: "clearCoat.remapF0OnInterfaceChange" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Clear Coat", target: material.clearCoat, propertyKey: "texture", propertyPath: "clearCoat.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Roughness", target: material.clearCoat, propertyKey: "textureRoughness", propertyPath: "clearCoat.textureRoughness", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material.clearCoat, propertyKey: "bumpTexture", propertyPath: "clearCoat.bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(Collapse, { visible: bumpTexture !== null, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bump Strength", target: bumpTexture, propertyKey: "level", propertyPath: "clearCoat.bumpTexture.level", min: 0, max: 2, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.clearCoat, propertyKey: "useRoughnessFromMainTexture", propertyPath: "clearCoat.useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Tint", target: material.clearCoat, propertyKey: "isTintEnabled", propertyPath: "clearCoat.isTintEnabled" }), jsxs(Collapse, { visible: isTintEnabled, children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Tint Color", target: material.clearCoat, propertyKey: "tintColor", propertyPath: "clearCoat.tintColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "At Distance", target: material.clearCoat, propertyKey: "tintColorAtDistance", propertyPath: "clearCoat.tintColorAtDistance", min: 0, max: 20, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tint Thickness", target: material.clearCoat, propertyKey: "tintThickness", propertyPath: "clearCoat.tintThickness", min: 0, max: 20, step: 0.1 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Tint", target: material.clearCoat, propertyKey: "tintTexture", propertyPath: "clearCoat.tintTexture", scene: scene, onLink: selectEntity, defaultValue: null })] })] })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.clearCoat, propertyKey: "isEnabled", propertyPath: "clearCoat.isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.clearCoat, propertyKey: "intensity", propertyPath: "clearCoat.intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, uniqueId: "PBRBaseMaterialClearCoat_Roughness_1", label: "Roughness", target: material.clearCoat, propertyKey: "roughness", propertyPath: "clearCoat.roughness", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "IOR", description: "Index of Refraction", target: material.clearCoat, propertyKey: "indexOfRefraction", propertyPath: "clearCoat.indexOfRefraction", min: 1, max: 3, step: 0.01 }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Remap F0", target: material.clearCoat, propertyKey: "remapF0OnInterfaceChange", propertyPath: "clearCoat.remapF0OnInterfaceChange" }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Clear Coat", target: material.clearCoat, propertyKey: "texture", propertyPath: "clearCoat.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, uniqueId: "PBRBaseMaterialClearCoat_Roughness_2", label: "Roughness", target: material.clearCoat, propertyKey: "textureRoughness", propertyPath: "clearCoat.textureRoughness", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material.clearCoat, propertyKey: "bumpTexture", propertyPath: "clearCoat.bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(Collapse, { visible: bumpTexture !== null, children: jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Bump Strength", target: bumpTexture, propertyKey: "level", propertyPath: "clearCoat.bumpTexture.level", min: 0, max: 2, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.clearCoat, propertyKey: "useRoughnessFromMainTexture", propertyPath: "clearCoat.useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Tint", target: material.clearCoat, propertyKey: "isTintEnabled", propertyPath: "clearCoat.isTintEnabled" }), jsxs(Collapse, { visible: isTintEnabled, children: [jsx(BoundProperty, { component: Color3PropertyLine, label: "Tint Color", target: material.clearCoat, propertyKey: "tintColor", propertyPath: "clearCoat.tintColor", isLinearMode: true }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "At Distance", target: material.clearCoat, propertyKey: "tintColorAtDistance", propertyPath: "clearCoat.tintColorAtDistance", min: 0, max: 20, step: 0.1 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Tint Thickness", target: material.clearCoat, propertyKey: "tintThickness", propertyPath: "clearCoat.tintThickness", min: 0, max: 20, step: 0.1 }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Tint", target: material.clearCoat, propertyKey: "tintTexture", propertyPath: "clearCoat.tintTexture", scene: scene, onLink: selectEntity, defaultValue: null })] })] })] }));
 };
 const PBRBaseMaterialIridescenceProperties = (props) => {
     const { material, selectionService } = props;
@@ -12722,7 +13100,7 @@ const PBRBaseMaterialSheenProperties = (props) => {
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
     const isEnabled = useProperty(material.sheen, "isEnabled");
     const useRoughness = useProperty(material.sheen, "_useRoughness");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.sheen, propertyKey: "isEnabled", propertyPath: "sheen.isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Link to Albedo", target: material.sheen, propertyKey: "linkSheenWithAlbedo", propertyPath: "sheen.linkSheenWithAlbedo" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.sheen, propertyKey: "intensity", propertyPath: "sheen.intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Color", target: material.sheen, propertyKey: "color", propertyPath: "sheen.color", isLinearMode: true }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Sheen", target: material.sheen, propertyKey: "texture", propertyPath: "sheen.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Roughness", target: material.sheen, propertyKey: "textureRoughness", propertyPath: "sheen.textureRoughness", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness", target: material.sheen, propertyKey: "_useRoughness", propertyPath: "sheen._useRoughness" }), jsx(Collapse, { visible: useRoughness, children: jsx(BoundProperty, { nullable: true, component: SyncedSliderPropertyLine, label: "Roughness", target: material.sheen, propertyKey: "roughness", propertyPath: "sheen.roughness", defaultValue: 0, min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.sheen, propertyKey: "useRoughnessFromMainTexture", propertyPath: "sheen.useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Albedo Scaling", target: material.sheen, propertyKey: "albedoScaling", propertyPath: "sheen.albedoScaling" })] })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Enabled", target: material.sheen, propertyKey: "isEnabled", propertyPath: "sheen.isEnabled" }), jsxs(Collapse, { visible: isEnabled, children: [jsx(BoundProperty, { component: SwitchPropertyLine, label: "Link to Albedo", target: material.sheen, propertyKey: "linkSheenWithAlbedo", propertyPath: "sheen.linkSheenWithAlbedo" }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Intensity", target: material.sheen, propertyKey: "intensity", propertyPath: "sheen.intensity", min: 0, max: 1, step: 0.01 }), jsx(BoundProperty, { component: Color3PropertyLine, label: "Color", target: material.sheen, propertyKey: "color", propertyPath: "sheen.color", isLinearMode: true }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Sheen", target: material.sheen, propertyKey: "texture", propertyPath: "sheen.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, uniqueId: "PBRBaseMaterialSheen_Roughness_1", label: "Roughness", target: material.sheen, propertyKey: "textureRoughness", propertyPath: "sheen.textureRoughness", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness", target: material.sheen, propertyKey: "_useRoughness", propertyPath: "sheen._useRoughness" }), jsx(Collapse, { visible: useRoughness, children: jsx(BoundProperty, { nullable: true, component: SyncedSliderPropertyLine, uniqueId: "PBRBaseMaterialSheen_Roughness_2", label: "Roughness", target: material.sheen, propertyKey: "roughness", propertyPath: "sheen.roughness", defaultValue: 0, min: 0, max: 1, step: 0.01 }) }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Roughness from Main Texture", target: material.sheen, propertyKey: "useRoughnessFromMainTexture", propertyPath: "sheen.useRoughnessFromMainTexture" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Albedo Scaling", target: material.sheen, propertyKey: "albedoScaling", propertyPath: "sheen.albedoScaling" })] })] }));
 };
 const PBRBaseMaterialSubSurfaceProperties = (props) => {
     const { material, selectionService } = props;
@@ -12769,7 +13147,7 @@ const StandardMaterialTexturesProperties = (props) => {
     const { material, selectionService } = props;
     const scene = material.getScene();
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Diffuse", target: material, propertyKey: "diffuseTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular", target: material, propertyKey: "specularTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", propertyPath: "detailMap.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled", propertyPath: "detailMap.isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled", propertyPath: "decalMap.isEnabled" })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Diffuse", target: material, propertyKey: "diffuseTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Specular", target: material, propertyKey: "specularTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, uniqueId: "StandardMaterialTextures_Reflection", label: "Reflection", target: material, propertyKey: "reflectionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Refraction", target: material, propertyKey: "refractionTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Emissive", target: material, propertyKey: "emissiveTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Bump", target: material, propertyKey: "bumpTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Opacity", target: material, propertyKey: "opacityTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Ambient", target: material, propertyKey: "ambientTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Lightmap", target: material, propertyKey: "lightmapTexture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Detailmap", target: material.detailMap, propertyKey: "texture", propertyPath: "detailMap.texture", scene: scene, onLink: selectEntity, defaultValue: null }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Lightmap as Shadowmap", target: material, propertyKey: "useLightmapAsShadowmap" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Detailmap", target: material.detailMap, propertyKey: "isEnabled", propertyPath: "detailMap.isEnabled" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Use Decalmap", target: material.decalMap, propertyKey: "isEnabled", propertyPath: "decalMap.isEnabled" })] }));
 };
 /**
  * Displays the levels properties of a standard material.
@@ -13171,14 +13549,14 @@ const MetadataProperties = (props) => {
     const [editedMetadata, setEditedMetadata] = useState(stringifiedMetadata);
     const isEditedMetadataJSON = useMemo(() => IsParsable(editedMetadata), [editedMetadata]);
     const unformattedEditedMetadata = useMemo(() => Restringify(editedMetadata, false), [editedMetadata]);
-    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsx(LineContainer, { children: jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }) }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !!editedMetadata && (!IsParsable(editedMetadata) || HasGltfExtras(editedMetadata)), onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(TextPropertyLine, { label: "Property Type", value: metadataType }), jsx(Collapse, { visible: canPreventObjectCorruption, children: jsx(SwitchPropertyLine, { label: "Prevent Object Corruption", value: isReadonly, onChange: setPreventObjectCorruption }) }), jsx(LineContainer, { uniqueId: "MetadataTextarea", children: jsx(Textarea, { disabled: isReadonly, value: editedMetadata, onChange: setEditedMetadata }) }), jsx(ButtonLine, { label: "Populate glTF extras", disabled: !!editedMetadata && (!IsParsable(editedMetadata) || HasGltfExtras(editedMetadata)), onClick: () => {
                     const isFormatted = Restringify(editedMetadata, true) === editedMetadata;
                     let withGLTFExtras = PopulateGLTFExtras(editedMetadata);
                     if (isFormatted) {
                         withGLTFExtras = Restringify(withGLTFExtras, true);
                     }
                     setEditedMetadata(withGLTFExtras);
-                } }), jsx(LineContainer, { children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { size: size, icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip$1, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip$1, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip$1, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] }));
+                } }), jsx(LineContainer, { uniqueId: "MetadataButtonDiv", children: jsxs("div", { className: classes.buttonDiv, children: [jsx(Button$1, { size: size, icon: jsx(SaveRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => SaveMetadata(entity, editedMetadata), children: jsx(Body1, { children: "Save" }) }), jsx(Tooltip$1, { content: "Undo Changes", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(ArrowUndoRegular, {}), disabled: stringifiedMetadata === unformattedEditedMetadata, onClick: () => setEditedMetadata(stringifiedMetadata) }) }), jsx(Tooltip$1, { content: "Format (Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesRegular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, true)) }) }), jsx(Tooltip$1, { content: "Clear Formatting (Undo Pretty Print)", relationship: "label", children: jsx(Button$1, { size: size, icon: jsx(BracesDismiss16Regular, {}), disabled: !isEditedMetadataJSON, onClick: () => setEditedMetadata(Restringify(editedMetadata, false)) }) })] }) })] }));
 };
 
 function IsMetadataContainer(entity) {
@@ -13628,7 +14006,7 @@ const ParticleSystemSystemProperties = (props) => {
     const capacity = useObservableState(() => system.getCapacity());
     const activeCount = useObservableState(() => system.getActiveCount(), scene?.onBeforeRenderObservable);
     const selectEntity = (entity) => (selectionService.selectedEntity = entity);
-    return (jsxs(Fragment, { children: [isCpuParticleSystem && (jsx(TextPropertyLine, { label: "Is Node Generated", description: "Indicates if the particle system was created from a node-based particle system.", value: String(isNodeGenerated) })), jsx(StringifiedPropertyLine, { label: "Capacity", description: "Maximum number of particles in the system.", value: capacity }), jsx(StringifiedPropertyLine, { label: "Active Particles", description: "Current number of active particles.", value: activeCount }), scene && !isNodeGenerated && (jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Particle Texture", target: system, propertyKey: "particleTexture", scene: scene, onLink: selectEntity, defaultValue: null })), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Blend Mode", target: system, propertyKey: "blendMode", options: BlendModeOptions }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "World Offset", target: system, propertyKey: "worldOffset" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Gravity", target: system, propertyKey: "gravity" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Billboard", target: system, propertyKey: "isBillboardBased" }), isBillboardBased && (jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Billboard Mode", target: system, propertyKey: "billboardMode", options: ParticleBillboardModeOptions })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Local", target: system, propertyKey: "isLocal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: system, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Update Speed", target: system, propertyKey: "updateSpeed", min: 0, step: 0.01 }), isCpuParticleSystem && (jsx(ButtonLine, { label: isNodeGenerated ? "Edit" : "View as Node-Based Particle System", icon: isNodeGenerated ? EditRegular : EyeRegular, onClick: async () => {
+    return (jsxs(Fragment, { children: [isCpuParticleSystem && (jsx(TextPropertyLine, { label: "Is Node Generated", description: "Indicates if the particle system was created from a node-based particle system.", value: String(isNodeGenerated) })), jsx(StringifiedPropertyLine, { label: "Capacity", description: "Maximum number of particles in the system.", value: capacity }), jsx(StringifiedPropertyLine, { label: "Active Particles", description: "Current number of active particles.", value: activeCount }), scene && !isNodeGenerated && (jsx(BoundProperty, { component: TextureSelectorPropertyLine, label: "Particle Texture", target: system, propertyKey: "particleTexture", scene: scene, onLink: selectEntity, defaultValue: null })), jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Blend Mode", target: system, propertyKey: "blendMode", options: BlendModeOptions }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "World Offset", target: system, propertyKey: "worldOffset" }), jsx(BoundProperty, { component: Vector3PropertyLine, label: "Gravity", target: system, propertyKey: "gravity" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Billboard", target: system, propertyKey: "isBillboardBased" }), isBillboardBased && (jsx(BoundProperty, { component: NumberDropdownPropertyLine, label: "Billboard Mode", target: system, propertyKey: "billboardMode", options: ParticleBillboardModeOptions })), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Is Local", target: system, propertyKey: "isLocal" }), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Force Depth Write", target: system, propertyKey: "forceDepthWrite" }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Update Speed", target: system, propertyKey: "updateSpeed", min: 0, step: 0.01 }), isCpuParticleSystem && (jsx(ButtonLine, { uniqueId: "View/Edit", label: isNodeGenerated ? "Edit" : "View as Node-Based Particle System", icon: isNodeGenerated ? EditRegular : EyeRegular, onClick: async () => {
                     const scene = system.getScene();
                     if (!scene) {
                         return;
@@ -15374,7 +15752,7 @@ const SceneCollisionsProperties = (props) => {
 };
 const SceneShadowsProperties = (props) => {
     const { scene } = props;
-    return (jsx(Fragment, { children: jsx(ButtonLine, { label: "Normalize scene", onClick: () => {
+    return (jsx(Fragment, { children: jsx(ButtonLine, { label: "Normalize Scene", onClick: () => {
                 for (const mesh of scene.meshes) {
                     mesh.normalizeToUnitCube(true);
                     mesh.computeWorldMatrix(true);
@@ -15413,7 +15791,7 @@ const SceneRenderingProperties = (props) => {
                         scene.environmentTexture = StoredEnvironmentTexture;
                         StoredEnvironmentTexture = null;
                     }
-                } }), scene.environmentTexture && (jsx(LinkPropertyLine, { label: "Env. texture", value: scene.environmentTexture.name, onLink: () => (selectionService.selectedEntity = scene.environmentTexture) })), jsx(FileUploadLine, { label: "Update Environment Texture", accept: ".dds, .env", onClick: (files) => {
+                } }), scene.environmentTexture && (jsx(LinkPropertyLine, { label: "Env. Texture", value: scene.environmentTexture.name, onLink: () => (selectionService.selectedEntity = scene.environmentTexture) })), jsx(FileUploadLine, { label: "Update Environment Texture", accept: ".dds, .env", onClick: (files) => {
                     if (files.length > 0) {
                         const file = files[0];
                         const isFileDDS = file.name.toLowerCase().indexOf(".dds") > 0;
@@ -15711,7 +16089,8 @@ const SpriteManagerActionsProperties = (props) => {
  * @returns the 8-bit texture data
  */
 async function ApplyChannelsToTextureDataAsync(texture, width, height, face, channels, lod = 0) {
-    const data = await GetTextureDataAsync(texture, width, height, face, lod);
+    // For cube maps, force RTT path to ensure correct face orientation and gamma correction
+    const data = await GetTextureDataAsync(texture, width, height, face, lod, texture.isCube);
     if (!channels.R || !channels.G || !channels.B || !channels.A) {
         for (let i = 0; i < width * height * 4; i += 4) {
             // If alpha is the only channel, just display alpha across all channels
@@ -15803,9 +16182,11 @@ const useStyles$9 = makeStyles({
         textOverflow: "ellipsis",
     },
     preview: {
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        outline: `1px solid ${tokens.colorNeutralStroke1}`,
         display: "block",
         objectFit: "contain",
+        // Checkerboard background to show transparency
+        background: "repeating-conic-gradient(#B2B2B2 0% 25%, white 25% 50%) 50% / 32px 32px",
     },
     previewContainer: {
         display: "flex",
@@ -15813,8 +16194,6 @@ const useStyles$9 = makeStyles({
         marginTop: tokens.spacingVerticalXS,
         marginBottom: tokens.spacingVerticalS,
         width: "100%",
-        // Checkerboard background to show transparency
-        background: "repeating-conic-gradient(#B2B2B2 0% 25%, white 25% 50%) 50% / 32px 32px",
     },
 });
 // This method of holding TextureChannels was brought over from inspectorv1 and can likely be refactored/simplified
@@ -15834,6 +16213,9 @@ const TexturePreview = (props) => {
     const [canvasStyle, setCanvasStyle] = useState();
     const internalTexture = useProperty(texture, "_texture");
     const { size } = useContext(ToolContext);
+    // Watch for pinned state changes - when portaled, the canvas needs to be redrawn
+    const accordionCtx = useContext(AccordionContext);
+    const isPinned = accordionCtx?.state.pinnedIds.some((id) => id.endsWith("\0TexturePreview")) ?? false;
     const updatePreviewAsync = useCallback(async () => {
         const canvas = canvasRef.current;
         if (!canvas) {
@@ -15842,16 +16224,19 @@ const TexturePreview = (props) => {
         try {
             await WhenTextureReadyAsync(texture); // Ensure texture is loaded before grabbing size
             const { width: textureWidth, height: textureHeight } = texture.getSize();
-            // Set canvas dimensions to the sub-region size
-            canvas.width = width ?? textureWidth;
-            canvas.height = height ?? textureHeight;
+            // Calculate canvas dimensions
+            const canvasWidth = width ?? textureWidth;
+            const canvasHeight = height ?? textureHeight;
             // Calculate the width that corresponds to maxHeight while maintaining aspect ratio
-            const aspectRatio = canvas.width / canvas.height;
+            const aspectRatio = canvasWidth / canvasHeight;
             // Use CSS min() to pick the smaller of maxWidth or the width that corresponds to maxHeight
             const imageWidth = `min(${maxWidth}, calc(${maxHeight} * ${aspectRatio}))`;
             setCanvasStyle({ width: imageWidth });
-            // Get full texture data, then draw only the sub-region
+            // Fetch texture data BEFORE clearing the canvas to avoid flicker
             const data = await ApplyChannelsToTextureDataAsync(texture, textureWidth, textureHeight, face, channels);
+            // Now set canvas dimensions (this clears the canvas) and draw immediately
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
             const context = canvas.getContext("2d");
             if (context) {
                 const fullImageData = context.createImageData(textureWidth, textureHeight);
@@ -15868,9 +16253,13 @@ const TexturePreview = (props) => {
     useEffect(() => {
         void updatePreviewAsync();
     }, [updatePreviewAsync]);
-    return (jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
-                    void updatePreviewAsync();
-                }, children: "Refresh" }))] }));
+    // Redraw canvas after portaling (pinned state change moves DOM element, which can clear canvas)
+    useEffect(() => {
+        void updatePreviewAsync();
+    }, [isPinned]);
+    return (jsx(LineContainer, { uniqueId: "TexturePreview", children: jsxs("div", { className: classes.root, children: [disableToolbar ? null : texture.isCube ? (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Cube Faces", children: ["+X", "-X", "+Y", "-Y", "+Z", "-Z"].map((label, idx) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: face === idx ? "primary" : "subtle", onClick: () => setFace(idx), children: label }, label))) })) : (jsx(Toolbar$1, { className: classes.controls, size: size, "aria-label": "Channels", children: ["R", "G", "B", "A", "ALL"].map((ch) => (jsx(ToolbarButton, { className: classes.controlButton, appearance: channels === TextureChannelStates[ch] ? "primary" : "subtle", onClick: () => setChannels(TextureChannelStates[ch]), children: ch }, ch))) })), jsx("div", { className: classes.previewContainer, children: jsx("canvas", { ref: canvasRef, className: classes.preview, style: canvasStyle }) }), texture.isRenderTarget && (jsx(Button$1, { appearance: "outline", onClick: () => {
+                        void updatePreviewAsync();
+                    }, children: "Refresh" }))] }) }));
 };
 
 function useMaxCellCount(sprite) {
@@ -15899,7 +16288,7 @@ const SpriteAnimationProperties = (props) => {
     const { sprite } = props;
     const animationStarted = useObservableState(useCallback(() => sprite.animationStarted, [sprite]), useInterceptObservable("function", sprite, "playAnimation"), useInterceptObservable("function", sprite, "stopAnimation"), useInterceptObservable("function", sprite, "_animate"));
     const maxCellCount = useMaxCellCount(sprite);
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Start", description: "First frame of the animation.", min: 0, max: maxCellCount, target: sprite, propertyKey: "fromIndex" }, "Start"), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "End", description: "Last frame of the animation.", min: 0, max: maxCellCount, target: sprite, propertyKey: "toIndex" }, "End"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Loop", description: "Whether to loop the animation.", target: sprite, propertyKey: "loopAnimation" }, "Loop"), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Delay", description: "Delay between frames in milliseconds.", min: 0, target: sprite, propertyKey: "delay" }, "Delay"), jsx(ButtonLine, { label: animationStarted ? "Stop Animation" : "Start Animation", icon: animationStarted ? StopFilled : PlayFilled, onClick: () => {
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Start", description: "First frame of the animation.", min: 0, max: maxCellCount, target: sprite, propertyKey: "fromIndex" }, "Start"), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "End", description: "Last frame of the animation.", min: 0, max: maxCellCount, target: sprite, propertyKey: "toIndex" }, "End"), jsx(BoundProperty, { component: SwitchPropertyLine, label: "Loop", description: "Whether to loop the animation.", target: sprite, propertyKey: "loopAnimation" }, "Loop"), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "Delay", description: "Delay between frames in milliseconds.", min: 0, target: sprite, propertyKey: "delay" }, "Delay"), jsx(ButtonLine, { uniqueId: "Start/Stop", label: animationStarted ? "Stop Animation" : "Start Animation", icon: animationStarted ? StopFilled : PlayFilled, onClick: () => {
                     if (animationStarted) {
                         sprite.stopAnimation();
                     }
@@ -16153,7 +16542,7 @@ const BaseTextureTransformProperties = (props) => {
 const CubeTextureTransformProperties = (props) => {
     const { texture, settings } = props;
     const [toDisplayAngle, fromDisplayAngle] = useAngleConverters(settings);
-    return (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rotation Y", target: texture, propertyKey: "rotationY", min: 0, max: toDisplayAngle(Math.PI * 2), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }));
+    return (jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "Rotation Y", target: texture, propertyKey: "rotationY", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.0001, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }));
 };
 
 const MultiRenderTargetGeneralProperties = (props) => {
@@ -16185,7 +16574,7 @@ const TextureTransformProperties = (props) => {
     const [toDisplayAngle, fromDisplayAngle] = useAngleConverters(settings);
     const wrapU = useProperty(texture, "wrapU");
     const wrapV = useProperty(texture, "wrapV");
-    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U offset", target: texture, propertyKey: "uOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V offset", target: texture, propertyKey: "vOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U scale", target: texture, propertyKey: "uScale", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V scale", target: texture, propertyKey: "vScale", step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "U angle", target: texture, propertyKey: "uAng", min: 0, max: toDisplayAngle(Math.PI * 2), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "V angle", target: texture, propertyKey: "vAng", min: 0, max: toDisplayAngle(Math.PI * 2), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "W angle", target: texture, propertyKey: "wAng", min: 0, max: toDisplayAngle(Math.PI * 2), convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(SwitchPropertyLine, { label: "Clamp U", value: wrapU === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapU = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) }), jsx(SwitchPropertyLine, { label: "Clamp V", value: wrapV === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapV = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) })] }));
+    return (jsxs(Fragment, { children: [jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U offset", target: texture, propertyKey: "uOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V offset", target: texture, propertyKey: "vOffset", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "U scale", target: texture, propertyKey: "uScale", step: 0.01 }), jsx(BoundProperty, { component: NumberInputPropertyLine, label: "V scale", target: texture, propertyKey: "vScale", step: 0.01 }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "U angle", target: texture, propertyKey: "uAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "V angle", target: texture, propertyKey: "vAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(BoundProperty, { component: SyncedSliderPropertyLine, label: "W angle", target: texture, propertyKey: "wAng", min: 0, max: toDisplayAngle(Math.PI * 2), step: 0.01, convertTo: (value) => toDisplayAngle(value, true), convertFrom: fromDisplayAngle }), jsx(SwitchPropertyLine, { label: "Clamp U", value: wrapU === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapU = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) }), jsx(SwitchPropertyLine, { label: "Clamp V", value: wrapV === Constants.TEXTURE_CLAMP_ADDRESSMODE, onChange: (value) => (texture.wrapV = value ? Constants.TEXTURE_CLAMP_ADDRESSMODE : Constants.TEXTURE_WRAP_ADDRESSMODE) })] }));
 };
 
 const SamplingMode = [
@@ -16720,8 +17109,10 @@ class TextureCanvasManager {
     }
     async grabOriginalTexture() {
         // Grab image data from original texture and paint it onto the context of a DynamicTexture
-        this.setSize(this._originalTexture.getSize());
-        const data = await ApplyChannelsToTextureDataAsync(this._originalTexture, this._size.width, this._size.height, this._face, { R: true, G: true, B: true, A: true }, this._mipLevel);
+        const size = this._originalTexture.getSize();
+        // Fetch texture data BEFORE setting size (which clears the canvas) to avoid flicker
+        const data = await ApplyChannelsToTextureDataAsync(this._originalTexture, size.width, size.height, this._face, { R: true, G: true, B: true, A: true }, this._mipLevel);
+        this.setSize(size);
         this._imageData = data;
         this.paintPixelsOnCanvas(data, this._2DCanvas);
         this._3DCanvasTexture.update();
@@ -16817,6 +17208,7 @@ class TextureCanvasManager {
         this._onUpdate();
     }
     async resize(newSize) {
+        // Fetch texture data BEFORE setting size (which clears the canvas) to avoid flicker
         const data = await ApplyChannelsToTextureDataAsync(this._originalTexture, newSize.width, newSize.height, this._face, { R: true, G: true, B: true, A: true });
         this.setSize(newSize);
         this.paintPixelsOnCanvas(data, this._2DCanvas);
@@ -19138,7 +19530,7 @@ const VideoCaptureTool = ({ scene }) => {
         void videoRecorder.startRecording(undefined, 0); // Use 0 to prevent automatic stop; let the user stop it
         setIsRecording(true);
     }, [scene]);
-    return (jsx(Fragment, { children: jsx(ButtonLine, { label: isRecording ? "Stop Recording" : "Record Video", icon: isRecording ? RecordStopRegular : RecordRegular, onClick: recordVideoAsync }) }));
+    return (jsx(Fragment, { children: jsx(ButtonLine, { uniqueId: "Start/Stop", label: isRecording ? "Stop Recording" : "Record Video", icon: isRecording ? RecordStopRegular : RecordRegular, onClick: recordVideoAsync }) }));
 };
 
 const CaptureToolsDefinition = {
@@ -19194,6 +19586,8 @@ const EnvExportImageTypes = [
     { label: "WebP", value: 1, imageType: "image/webp" },
 ];
 const ExportBabylonTools = ({ scene }) => {
+    // Track environment texture changes to re-render when it's updated (e.g., when a new HDRI is loaded)
+    const environmentTexture = useProperty(scene, "environmentTexture");
     const [babylonExportOptions, setBabylonExportOptions] = useState({
         imageTypeIndex: 0,
         imageQuality: 0.8,
@@ -19205,11 +19599,11 @@ const ExportBabylonTools = ({ scene }) => {
         Tools.Download(blob, "scene.babylon");
     }, [scene]);
     const createEnvTexture = useCallback(async () => {
-        if (!scene.environmentTexture) {
+        if (!environmentTexture) {
             return;
         }
         try {
-            const buffer = await EnvironmentTextureTools.CreateEnvTextureAsync(scene.environmentTexture, {
+            const buffer = await EnvironmentTextureTools.CreateEnvTextureAsync(environmentTexture, {
                 imageType: EnvExportImageTypes[babylonExportOptions.imageTypeIndex].imageType,
                 imageQuality: babylonExportOptions.imageQuality,
                 disableIrradianceTexture: !babylonExportOptions.iblDiffuse,
@@ -19221,8 +19615,8 @@ const ExportBabylonTools = ({ scene }) => {
             Logger.Error(error);
             alert(error);
         }
-    }, [scene, babylonExportOptions]);
-    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Export to Babylon", icon: ArrowDownloadRegular, onClick: exportBabylon }), !scene.getEngine().premultipliedAlpha && scene.environmentTexture && scene.environmentTexture._prefiltered && scene.activeCamera && (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Generate .env texture", icon: ArrowDownloadRegular, onClick: createEnvTexture }), scene.environmentTexture.irradianceTexture && (jsx(SwitchPropertyLine, { label: "Diffuse Texture", description: "Export diffuse texture for IBL", value: babylonExportOptions.iblDiffuse, onChange: (value) => {
+    }, [scene, environmentTexture, babylonExportOptions]);
+    return (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Export to Babylon", icon: ArrowDownloadRegular, onClick: exportBabylon }), !scene.getEngine().premultipliedAlpha && environmentTexture && environmentTexture._prefiltered && scene.activeCamera && (jsxs(Fragment, { children: [jsx(ButtonLine, { label: "Generate .env Texture", icon: ArrowDownloadRegular, onClick: createEnvTexture }), environmentTexture.irradianceTexture && (jsx(SwitchPropertyLine, { label: "Diffuse Texture", description: "Export diffuse texture for IBL", value: babylonExportOptions.iblDiffuse, onChange: (value) => {
                             setBabylonExportOptions((prev) => ({ ...prev, iblDiffuse: value }));
                         } }, "iblDiffuse")), jsx(NumberDropdownPropertyLine, { label: "Image type", options: EnvExportImageTypes, value: babylonExportOptions.imageTypeIndex, onChange: (val) => {
                             setBabylonExportOptions((prev) => ({ ...prev, imageTypeIndex: val }));
@@ -20623,5 +21017,5 @@ const TextAreaPropertyLine = (props) => {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { useAngleConverters as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ExtensibleAccordion as E, useColor3Property as F, useColor4Property as G, useQuaternionProperty as H, Inspector as I, MakePropertyHook as J, useInterceptObservable as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, useEventfulState as O, Popover as P, useObservableCollection as Q, useOrderedObservableCollection as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, usePollingObservable as U, Vector3PropertyLine as V, useResource as W, useAsyncResource as X, useCompactMode as Y, useDisableCopy as Z, useSidePaneDockOverrides as _, ShellServiceIdentity as a, MakeTeachingMoment as a0, MakeDialogTeachingMoment as a1, InterceptFunction as a2, GetPropertyDescriptor as a3, IsPropertyReadonly as a4, InterceptProperty as a5, ObservableCollection as a6, ConstructorFactory as a7, SelectionServiceIdentity as a8, SelectionServiceDefinition as a9, TextInput as aA, ToggleButton as aB, ChildWindow as aC, FileUploadLine as aD, FactorGradientList as aE, Color3GradientList as aF, Color4GradientList as aG, Pane as aH, BooleanBadgePropertyLine as aI, Color3PropertyLine as aJ, Color4PropertyLine as aK, HexPropertyLine as aL, LinkPropertyLine as aM, PropertyLine as aN, LineContainer as aO, PlaceholderPropertyLine as aP, StringifiedPropertyLine as aQ, SwitchPropertyLine as aR, SyncedSliderPropertyLine as aS, TextAreaPropertyLine as aT, TextPropertyLine as aU, RotationVectorPropertyLine as aV, QuaternionPropertyLine as aW, Vector2PropertyLine as aX, Vector4PropertyLine as aY, SettingsContextIdentity as aa, ShowInspector as ab, Checkbox as ac, Collapse as ad, ColorPickerPopup as ae, InputHexField as af, InputHsvField as ag, ComboBox as ah, DraggableLine as ai, Dropdown as aj, NumberDropdown as ak, StringDropdown as al, FactorGradientComponent as am, Color3GradientComponent as an, Color4GradientComponent as ao, ColorStepGradientComponent as ap, InfoLabel as aq, MakeLazyComponent as ar, List as as, PositionedPopover as at, SearchBar as au, SearchBox as av, SpinButton as aw, Switch as ax, SyncedSliderInput as ay, Textarea as az, SceneContextIdentity as b, useObservableState as c, AccordionSection as d, ButtonLine as e, ToolsServiceIdentity as f, useExtensionManager as g, MakePopoverTeachingMoment as h, TeachingMoment as i, SidePaneContainer as j, PropertiesServiceIdentity as k, SceneExplorerServiceIdentity as l, SettingsServiceIdentity as m, StatsServiceIdentity as n, ConvertOptions as o, AttachDebugLayer as p, DetachDebugLayer as q, NumberDropdownPropertyLine as r, StringDropdownPropertyLine as s, BoundProperty as t, useProperty as u, Property as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useVector3Property as z };
-//# sourceMappingURL=index-ByfjmUIP.js.map
+export { useAngleConverters as $, Accordion as A, Button as B, CheckboxPropertyLine as C, DebugServiceIdentity as D, ExtensibleAccordion as E, useColor3Property as F, useColor4Property as G, useQuaternionProperty as H, Inspector as I, MakePropertyHook as J, useInterceptObservable as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, useEventfulState as O, Popover as P, useObservableCollection as Q, useOrderedObservableCollection as R, SpinButtonPropertyLine as S, TextInputPropertyLine as T, usePollingObservable as U, Vector3PropertyLine as V, useResource as W, useAsyncResource as X, useCompactMode as Y, useDisableCopy as Z, useSidePaneDockOverrides as _, ShellServiceIdentity as a, MakeTeachingMoment as a0, MakeDialogTeachingMoment as a1, InterceptFunction as a2, GetPropertyDescriptor as a3, IsPropertyReadonly as a4, InterceptProperty as a5, ObservableCollection as a6, ConstructorFactory as a7, SelectionServiceIdentity as a8, SelectionServiceDefinition as a9, Textarea as aA, TextInput as aB, ToggleButton as aC, ChildWindow as aD, FileUploadLine as aE, FactorGradientList as aF, Color3GradientList as aG, Color4GradientList as aH, Pane as aI, BooleanBadgePropertyLine as aJ, Color3PropertyLine as aK, Color4PropertyLine as aL, HexPropertyLine as aM, LinkPropertyLine as aN, PropertyLine as aO, LineContainer as aP, PlaceholderPropertyLine as aQ, StringifiedPropertyLine as aR, SwitchPropertyLine as aS, SyncedSliderPropertyLine as aT, TextAreaPropertyLine as aU, TextPropertyLine as aV, RotationVectorPropertyLine as aW, QuaternionPropertyLine as aX, Vector2PropertyLine as aY, Vector4PropertyLine as aZ, SettingsContextIdentity as aa, ShowInspector as ab, AccordionSectionItem as ac, Checkbox as ad, Collapse as ae, ColorPickerPopup as af, InputHexField as ag, InputHsvField as ah, ComboBox as ai, DraggableLine as aj, Dropdown as ak, NumberDropdown as al, StringDropdown as am, FactorGradientComponent as an, Color3GradientComponent as ao, Color4GradientComponent as ap, ColorStepGradientComponent as aq, InfoLabel as ar, MakeLazyComponent as as, List as at, PositionedPopover as au, SearchBar as av, SearchBox as aw, SpinButton as ax, Switch as ay, SyncedSliderInput as az, SceneContextIdentity as b, useObservableState as c, AccordionSection as d, ButtonLine as e, ToolsServiceIdentity as f, useExtensionManager as g, MakePopoverTeachingMoment as h, TeachingMoment as i, SidePaneContainer as j, PropertiesServiceIdentity as k, SceneExplorerServiceIdentity as l, SettingsServiceIdentity as m, StatsServiceIdentity as n, ConvertOptions as o, AttachDebugLayer as p, DetachDebugLayer as q, NumberDropdownPropertyLine as r, StringDropdownPropertyLine as s, BoundProperty as t, useProperty as u, Property as v, LinkToEntityPropertyLine as w, Theme as x, BuiltInsExtensionFeed as y, useVector3Property as z };
+//# sourceMappingURL=index-BVYxLK-p.js.map