@babylonjs/inspector 9.26.0 → 9.26.1

package/lib/{index-C5ggNiyY.js → index-DvyGGbVg.js}

@@ -4,16 +4,14 @@ import { createContext, forwardRef, useContext, useState, useCallback, Component
 import { tokens, makeStyles, Tooltip as Tooltip$1, Button as Button$1, Spinner, useFluent, Accordion as Accordion$1, AccordionHeader, Subtitle2Stronger, AccordionPanel, Divider, MessageBar as MessageBar$1, MessageBarBody, AccordionItem, SearchBox as SearchBox$1, Portal, mergeClasses, createLightTheme, createDarkTheme, createDOMRenderer, FluentProvider, RendererProvider, TeachingPopover, TeachingPopoverSurface, TeachingPopoverHeader, TeachingPopoverBody, useId, useToastController, Toast, ToastTitle, Toaster, Menu, MenuTrigger, SplitButton, MenuPopover, MenuList, MenuItem, Toolbar as Toolbar$1, ToolbarRadioButton, MenuGroup, MenuGroupHeader, Link as Link$1, Caption1, Body1, ToggleButton as ToggleButton$1, InfoLabel as InfoLabel$1, Body1Strong, Checkbox as Checkbox$1, Switch as Switch$1, Dropdown as Dropdown$1, Option, useMergedRefs, Input, Slider as Slider$1, MenuItemRadio, Dialog as Dialog$1, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, List as List$1, ListItem, useComboboxFilter, Combobox, MessageBarTitle, Popover as Popover$1, PopoverTrigger, PopoverSurface, Field, Textarea as Textarea$1, PresenceBadge, treeItemLevelToken, typographyStyles, FlatTree, FlatTreeItem, MenuDivider, TreeItemLayout, MenuItemCheckbox, ColorPicker, ColorArea, ColorSlider, AlphaSlider, ColorSwatch, Badge, Label, Subtitle2, ToolbarButton, ToolbarDivider, DialogTrigger } from '@fluentui/react-components';
 import { ErrorCircleRegular, EyeFilled, EyeOffRegular, CheckmarkFilled, EditRegular, FilterRegular, PinFilled, PinRegular, ArrowCircleUpRegular, PanelLeftExpandRegular, PanelRightExpandRegular, PanelLeftContractRegular, PanelRightContractRegular, PictureInPictureEnterRegular, MoreHorizontalRegular, LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, SettingsRegular, ChevronCircleRight16Regular, ChevronCircleRight20Regular, ChevronCircleDown16Regular, ChevronCircleDown20Regular, Copy16Regular, CopyRegular, DocumentTextRegular, ArrowBidirectionalUpDownFilled, ArrowClockwiseRegular, WeatherSunnyRegular, WeatherMoonRegular, InfoRegular, WarningRegular, CheckmarkCircleRegular, DeleteFilled, LinkDismissRegular, LinkEditRegular, AddRegular, DeleteRegular, ArrowUploadRegular, createFluentIcon, TextSortAscendingRegular, GlobeRegular, ArrowExpandAllRegular, ArrowCollapseAllRegular, ChevronRightRegular, CubeTreeRegular, BugRegular, ArrowDownloadRegular, StopRegular, RecordRegular, DataBarHorizontalRegular, WrenchRegular, PlugDisconnectedRegular, PlugConnectedRegular, PlugConnectedCheckmarkRegular, ArrowRotateClockwiseRegular, ArrowExpandRegular, SelectObjectRegular, CubeRegular, CameraRegular, SaveRegular, LinkRegular, ArrowSyncRegular, FullScreenMaximizeRegular, ChevronDownRegular, CircleSmallFilled, PreviousRegular, ArrowPreviousRegular, TriangleLeftRegular, RecordStopRegular, PlayRegular, ArrowNextRegular, NextRegular, PauseRegular, ArrowUndoRegular, BracesRegular, BracesDismiss16Regular, EyeRegular, CloudArrowUpRegular, CloudArrowDownRegular, EyeOffFilled, ArrowMoveFilled, StopFilled, PlayFilled, LockOpenRegular, LockClosedRegular, ResizeRegular, ChevronUpRegular, ArrowResetRegular, CircleHalfFillRegular, EyedropperRegular, PaintBucketRegular, InkStrokeRegular, StackRegular, FilmstripRegular, PauseFilled, WeatherSunnyLowFilled, HeadphonesSoundWaveRegular, ArrowEnterUpRegular, SoundWaveCircleRegular, SoundWaveCircleFilled, CatchUpRegular, LayerRegular, FlowchartRegular, FrameRegular, AppGenericRegular, RectangleLandscapeRegular, BorderOutsideRegular, BorderNoneRegular, MyLocationRegular, BubbleMultipleRegular, LightbulbRegular, VideoFilled, VideoRegular, FlashlightRegular, FlashlightOffRegular, DropRegular, BlurRegular, PipelineRegular, PersonWalkingRegular, DataLineRegular, PersonSquareRegular, LayerDiagonalPersonRegular, ImageEditRegular, ImageRegular, TargetRegular, DismissRegular, PersonFeedbackRegular, BranchRegular } from '@fluentui/react-icons';
 import { DataStorage } from '@babylonjs/core/Misc/dataStorage.js';
-import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
 import { Deferred } from '@babylonjs/core/Misc/deferred.js';
 import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
 import { Collapse as Collapse$1, Fade } from '@fluentui/react-motion-components-preview';
-import { GetClassName } from '@babylonjs/core/Misc/typeStore.js';
-import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
+import { Logger } from '@babylonjs/core/Misc/logger.js';
 import { createRoot } from 'react-dom/client';
 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 { Vector3, Quaternion, Matrix, Vector2, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
 import { UniqueIdGenerator } from '@babylonjs/core/Misc/uniqueIdGenerator.js';
 import { VirtualizerScrollView } from '@fluentui-contrib/react-virtualizer';
 import { FontAsset } from '@babylonjs/addons/msdfText/fontAsset.js';
@@ -140,6 +138,7 @@ import { MinTemperatureKelvin, MaxTintMagnitude } from '@babylonjs/core/Maths/co
 import { Skeleton } from '@babylonjs/core/Bones/skeleton.js';
 import { Sprite } from '@babylonjs/core/Sprites/sprite.js';
 import { SpriteManager } from '@babylonjs/core/Sprites/spriteManager.js';
+import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
 import { GetTextureDataAsync, WhenTextureReadyAsync } from '@babylonjs/core/Misc/textureTools.js';
 import { KeyboardEventTypes } from '@babylonjs/core/Events/keyboardEvents.js';
 import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
@@ -573,9 +572,32 @@ function useKeyState(key, options) {
 // Storage Helpers
 // ============================================================================
 const STORAGE_KEY_ROOT = "Babylon/Accordion";
+const InMemoryStorage = new Map();
+// eslint-disable-next-line no-console
+const Warn = (message) => globalThis.console?.warn?.(message);
+const ReadStoredString = (key) => {
+    try {
+        return globalThis.localStorage?.getItem(key) ?? InMemoryStorage.get(key) ?? "";
+    }
+    catch {
+        return InMemoryStorage.get(key) ?? "";
+    }
+};
+const WriteStoredString = (key, value) => {
+    try {
+        if (globalThis.localStorage) {
+            globalThis.localStorage.setItem(key, value);
+            return;
+        }
+    }
+    catch {
+        // Fall through to in-memory persistence when localStorage is unavailable.
+    }
+    InMemoryStorage.set(key, value);
+};
 const ReadFromStorage = (path, initial) => {
     try {
-        const stored = DataStorage.ReadString(`${STORAGE_KEY_ROOT}/${path}`, "");
+        const stored = ReadStoredString(`${STORAGE_KEY_ROOT}/${path}`);
         return stored ? JSON.parse(stored) : initial;
     }
     catch {
@@ -583,7 +605,7 @@ const ReadFromStorage = (path, initial) => {
     }
 };
 const WriteToStorage = (path, data) => {
-    DataStorage.WriteString(`${STORAGE_KEY_ROOT}/${path}`, JSON.stringify(data));
+    WriteStoredString(`${STORAGE_KEY_ROOT}/${path}`, JSON.stringify(data));
 };
 // ============================================================================
 // Reducer
@@ -741,7 +763,7 @@ function useAccordionSectionItemState(props) {
     const prevItemIdRef = useRef(itemId);
     useEffect(() => {
         if (accordionCtx && prevItemIdRef.current !== itemId) {
-            Logger.Warn(`Accordion: The uniqueId "${itemId}" in section "${sectionCtx?.sectionId}" has changed from "${prevItemIdRef.current}". ` +
+            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;
@@ -753,7 +775,7 @@ function useAccordionSectionItemState(props) {
         }
         const { registeredItemIds } = accordionCtx;
         if (registeredItemIds.has(itemUniqueId)) {
-            Logger.Warn(`Accordion: Duplicate uniqueId "${itemId}" detected in section "${sectionCtx?.sectionId}". ` +
+            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.`);
         }
         registeredItemIds.set(itemUniqueId, itemLabel ?? itemId);
@@ -3363,7 +3385,11 @@ function copyCommandToClipboard(strCommand) {
 // babylonNamespace is either "" (ES6) or "BABYLON."
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function getClassNameWithNamespace(obj) {
-    let className = GetClassName(obj);
+    if ((typeof obj !== "object" && typeof obj !== "function") || obj === null) {
+        return { className: "Unknown", babylonNamespace: "" };
+    }
+    const candidate = obj;
+    let className = candidate.getClassName?.() ?? candidate.constructor?.name ?? "Unknown";
     if (className.includes("BABYLON.")) {
         className = className.split("BABYLON.")[1];
     }
@@ -3976,7 +4002,7 @@ const SpinButton = forwardRef((props, ref) => {
         return !invalid;
     }, [min, max, props.validator, props.forceInt]);
     // Constrain a value to the valid range by clamping to [min, max].
-    const constrainValue = useCallback((v) => Clamp(v, min ?? -Infinity, max ?? Infinity), [min, max]);
+    const constrainValue = useCallback((v) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, v)), [min, max]);
     const tryCommitValue = useCallback((currVal) => {
         if (validateValue(currVal) && currVal !== lastCommittedValue.current) {
             lastCommittedValue.current = currVal;
@@ -5269,7 +5295,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-DVpZa3gV.js');
+                    const { ExtensionListServiceDefinition } = await import('./extensionsListService-2sqR5MRD.js');
                     serviceContainer.addService(ExtensionListServiceDefinition);
                 }
                 // Register all external services (that make up a unique tool).
@@ -6665,6 +6691,22 @@ function ComputedProperty(props) {
     const value = useWatchedValue(target, getValue);
     return jsx(Component, { ...{ ...rest, value } });
 }
+/**
+ * Renders an editable property-line component for a value derived from a target.
+ *
+ * This is useful for method-backed values, readonly object references, or values whose UI
+ * representation differs from their stored representation. The getter follows the Preferred
+ * Watch Mode, while the setter owns the runtime-specific write-back.
+ * @param props The target, derived getter, write-back function, and property-line component props.
+ * @returns The editable derived property-line component.
+ */
+function DerivedProperty(props) {
+    const { 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    component: Component, target, getValue, setValue, ...rest } = props;
+    const value = useWatchedValue(target, getValue);
+    return jsx(Component, { ...{ ...rest, value, onChange: (changedValue) => setValue(target, changedValue) } });
+}
 function GetOnCopyString(value, propertyPath) {
     const valueStr = GenerateCopyString(value);
     return `globalThis.debugNode.${propertyPath} = ${valueStr};`;
@@ -10368,14 +10410,14 @@ const DefaultInspectorExtensionFeed = new BuiltInsExtensionFeed("Inspector", [
         description: "Adds a new panel for easy creation of various Babylon assets. This is a WIP extension...expect changes!",
         keywords: ["creation", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-0rVa_CjZ.js'),
+        getExtensionModuleAsync: async () => await import('./quickCreateToolsService-B0RAjMcI.js'),
     },
     {
         name: "Reflector",
         description: "Sends a serialized snapshot of the scene to the Babylon.js Sandbox through the Reflector Bridge. The snapshot is sent once and is read-only, so it does not stay in sync with this scene.",
         keywords: ["reflector", "bridge", "snapshot", "sync", "sandbox", "tools"],
         ...BabylonWebResources,
-        getExtensionModuleAsync: async () => await import('./reflectorService-pyDncbYA.js'),
+        getExtensionModuleAsync: async () => await import('./reflectorService-CUFxJIMt.js'),
     },
 ]);
 
@@ -11292,97 +11334,209 @@ function _ShowInspector(target, options, configuration) {
 }
 
 /**
- * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
- * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
- * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
- * @returns Component wrapping a colorPicker component with a property line
+ * Runtime-neutral controlled color editor with RGB or RGBA sliders and an injected picker.
+ * @param props The controlled color, runtime adapter, and property-line presentation.
+ * @returns The color property line.
  */
-const ColorPropertyLine = forwardRef((props, ref) => {
-    ColorPropertyLine.displayName = "ColorPropertyLine";
-    const [color, setColor] = useState(props.value);
+const ControlledColorPropertyLine = (props) => {
+    const { adapter, value, onChange, propertyLineRef } = props;
+    const [currentValue, setCurrentValue] = useState(value);
     useEffect(() => {
-        setColor(props.value);
-    }, [props.value]);
-    const onSliderChange = (value, key) => {
-        let newColor;
-        if (key === "a") {
-            newColor = Color4.FromColor3(color, value);
-        }
-        else {
-            newColor = color.clone();
-            newColor[key] = value / 255;
-        }
-        setColor(newColor); // Create a new object to trigger re-render
-        props.onChange(newColor);
+        setCurrentValue(value);
+    }, [value]);
+    const handleChange = (newValue) => {
+        setCurrentValue(newValue);
+        onChange(newValue);
     };
-    const onColorPickerChange = (newColor) => {
-        setColor(newColor);
-        props.onChange(newColor);
+    const onSliderChange = (componentValue, component) => {
+        const color = adapter.getColor(currentValue);
+        handleChange(adapter.createColor({
+            ...color,
+            [component]: component === "a" ? componentValue : componentValue / 255,
+        }, currentValue));
     };
-    return (jsx(PropertyLine, { ref: ref, ...props, expandedContent: color ? jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }) : undefined, children: jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
-});
-const ColorSliders = ({ color, onSliderChange }) => (jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }));
+    const color = adapter.getColor(currentValue);
+    return (jsx(PropertyLine, { ref: propertyLineRef, ...props, expandedContent: jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }), children: createElement(adapter.picker, {
+            value: currentValue,
+            onChange: handleChange,
+            isLinearMode: props.isLinearMode,
+            disabled: props.disabled,
+            className: props.className,
+            style: props.style,
+            title: props.title,
+        }) }));
+};
+const ColorSliders = (props) => {
+    const { color, onSliderChange } = props;
+    return (jsxs(Fragment, { children: [jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color.a === undefined ? undefined : (jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") }))] }));
+};
+
+const Picker = (props) => jsx(ColorPickerPopup, { ...props });
+const Adapter = {
+    picker: Picker,
+    getColor: (value) => value,
+    createColor: (color, source) => {
+        if (source instanceof Color4) {
+            return new Color4(color.r, color.g, color.b, color.a ?? source.a);
+        }
+        return source.clone().set(color.r, color.g, color.b);
+    },
+};
+const ColorPropertyLine = forwardRef((props, ref) => jsx(ControlledColorPropertyLine, { ...props, adapter: Adapter, propertyLineRef: ref }));
+ColorPropertyLine.displayName = "ColorPropertyLine";
+/**
+ * Edits a Babylon.js Color3 value.
+ * @param props The controlled color and property-line presentation.
+ * @returns The Color3 property line.
+ */
 const Color3PropertyLine = ColorPropertyLine;
+/**
+ * Edits a Babylon.js Color4 value.
+ * @param props The controlled color and property-line presentation.
+ * @returns The Color4 property line.
+ */
 const Color4PropertyLine = ColorPropertyLine;
 
-const HasZ = (vector) => !(vector instanceof Vector2);
-const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaternion;
 /**
- * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
- * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
- * @param props
- * @returns
+ * Runtime-neutral controlled editor for two-, three-, and four-component numeric values.
+ * @param props The value, change callback, component adapter, and property-line presentation.
+ * @returns The tensor property line.
  */
-const TensorPropertyLine = (props) => {
-    TensorPropertyLine.displayName = "TensorPropertyLine";
-    const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
-    const formatted = (val) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);
-    const [vector, setVector] = useState(props.value);
-    const { min, max } = props;
-    const onChange = (val, key) => {
-        const value = props.valueConverter ? props.valueConverter.to(val) : val;
-        const newVector = vector.clone();
-        newVector[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe
-        setVector(newVector);
-        props.onChange(newVector);
-    };
+const ControlledTensorPropertyLine = (props) => {
+    const { adapter, min, max, unit, step, precision, valueConverter } = props;
+    const converted = (value) => (valueConverter ? valueConverter.from(value) : value);
+    const formatted = (value) => converted(value).toFixed(precision ?? (step !== undefined ? Math.max(0, CalculatePrecision(step)) : 2));
+    const [value, setValue] = useState(props.value);
     useEffect(() => {
-        setVector(props.value);
+        setValue(props.value);
     }, [props.value, props.expandedContent]);
-    return (jsx(PropertyLine, { ...props, expandedContent: jsxs(Fragment, { children: [props.expandedContent, vector ? (jsx(VectorSliders, { vector: vector, min: min, max: max, unit: props.unit, step: props.step, precision: props.precision, converted: converted, onChange: onChange })) : undefined] }), children: jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
-};
-const VectorSliders = ({ vector, min, max, unit, step, precision, converted, onChange }) => (jsxs(Fragment, { children: [jsx(NumberInputPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: unit, step: step, precision: precision }), jsx(NumberInputPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: unit, step: step, precision: precision }), HasZ(vector) && (jsx(NumberInputPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: unit, step: step, precision: precision })), HasW(vector) && (jsx(NumberInputPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: unit, step: step, precision: precision }))] }));
-const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
-const RotationVectorPropertyLine = (props) => {
-    RotationVectorPropertyLine.displayName = "RotationVectorPropertyLine";
-    const step = props.useDegrees ? 1 : 0.01;
-    const precision = props.useDegrees ? 1 : 2;
-    return (jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "°" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, step: step, precision: precision }));
-};
-const QuaternionPropertyLineInternal = TensorPropertyLine;
-const QuaternionPropertyLine = (props) => {
-    QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
-    const step = props.useDegrees ? 1 : 0.01;
-    const precision = props.useDegrees ? 1 : 2;
-    const [quat, setQuat] = useState(props.value);
+    const onComponentChange = (componentValue, component) => {
+        const storedValue = valueConverter ? valueConverter.to(componentValue) : componentValue;
+        const newValue = adapter.withComponent(value, component, storedValue);
+        setValue(newValue);
+        props.onChange(newValue);
+    };
+    const summary = adapter.components.map((component) => formatted(adapter.getComponent(props.value, component))).join(", ");
+    return (jsx(PropertyLine, { ...props, expandedContent: jsxs(Fragment, { children: [props.expandedContent, jsx(TensorSliders, { value: value, adapter: adapter, min: min, max: max, unit: unit, step: step, precision: precision, converted: converted, onChange: onComponentChange })] }), children: jsx(Body1, { children: `[${summary}]` }) }));
+};
+const TensorSliders = (props) => {
+    const { value, adapter, min, max, unit, step, precision, converted, onChange } = props;
+    return (jsx(Fragment, { children: adapter.components.map((component) => (jsx(NumberInputPropertyLine, { label: component.toUpperCase(), value: converted(adapter.getComponent(value, component)), min: min, max: max, onChange: (componentValue) => onChange(componentValue, component), unit: unit, step: step, precision: precision }, component))) }));
+};
+const RadiansToDegreesConverter = {
+    from: (value) => (value * 180) / Math.PI,
+    to: (value) => (value * Math.PI) / 180,
+};
+/**
+ * Runtime-neutral controlled Euler rotation editor.
+ * @param props The rotation value, runtime adapter, and display options.
+ * @returns The rotation property line.
+ */
+const ControlledRotationVectorPropertyLine = (props) => {
+    const { useDegrees, ...rest } = props;
+    return (jsx(ControlledTensorPropertyLine, { ...rest, unit: useDegrees ? "°" : "rad", valueConverter: useDegrees ? RadiansToDegreesConverter : undefined, step: useDegrees ? 1 : 0.01, precision: useDegrees ? 1 : 2 }));
+};
+/**
+ * Runtime-neutral controlled quaternion editor with optional Euler presentation.
+ * @param props The quaternion value, runtime conversion adapter, and display options.
+ * @returns The quaternion or Euler property line.
+ */
+const ControlledQuaternionPropertyLine = (props) => {
+    const { adapter, useEuler, useDegrees, ...rest } = props;
+    const [quaternion, setQuaternion] = useState(props.value);
     useEffect(() => {
-        setQuat(props.value);
+        setQuaternion(props.value);
     }, [props.value]);
-    // Extract only the properties that exist on QuaternionPropertyLineProps
-    const { useEuler, ...restProps } = props;
-    const onQuatChange = (val) => {
-        setQuat(val);
-        props.onChange(val);
+    const onQuaternionChange = (value) => {
+        setQuaternion(value);
+        props.onChange(value);
     };
-    const onEulerChange = (val) => {
-        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
-        onQuatChange(quat);
+    if (useEuler) {
+        const quaternionSummary = adapter.quaternion.components.map((component) => adapter.quaternion.getComponent(quaternion, component).toFixed(4)).join(", ");
+        return (jsx(ControlledTensorPropertyLine, { ...rest, nullable: false, ignoreNullable: false, value: adapter.toEuler(quaternion), adapter: adapter.euler, valueConverter: useDegrees ? RadiansToDegreesConverter : undefined, onChange: (value) => onQuaternionChange(adapter.fromEuler(value, quaternion)), unit: useDegrees ? "°" : "rad", step: useDegrees ? 1 : 0.01, precision: useDegrees ? 1 : 2, expandedContent: jsx(TextPropertyLine, { label: "Quaternion", value: `[${quaternionSummary}]` }) }));
+    }
+    return (jsx(ControlledTensorPropertyLine, { ...rest, nullable: false, value: quaternion, adapter: adapter.quaternion, onChange: onQuaternionChange, unit: useDegrees ? "°" : "rad", step: useDegrees ? 1 : 0.01, precision: useDegrees ? 1 : 2 }));
+};
+
+function CreateCoreTensorAdapter(components) {
+    return {
+        components,
+        getComponent: (value, component) => {
+            switch (component) {
+                case "x":
+                    return value.x;
+                case "y":
+                    return value.y;
+                case "z":
+                    return "z" in value ? value.z : 0;
+                case "w":
+                    return "w" in value ? value.w : 0;
+            }
+        },
+        withComponent: (value, component, componentValue) => {
+            const result = value.clone();
+            switch (component) {
+                case "x":
+                    result.x = componentValue;
+                    break;
+                case "y":
+                    result.y = componentValue;
+                    break;
+                case "z":
+                    if ("z" in result) {
+                        result.z = componentValue;
+                    }
+                    break;
+                case "w":
+                    if ("w" in result) {
+                        result.w = componentValue;
+                    }
+                    break;
+            }
+            return result;
+        },
     };
-    return useEuler ? (jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, onChange: onEulerChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision, expandedContent: jsx(TextPropertyLine, { label: "Quaternion", value: `[${quat.x.toFixed(4)}, ${quat.y.toFixed(4)}, ${quat.z.toFixed(4)}, ${quat.w.toFixed(4)}]` }) })) : (jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, onChange: onQuatChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision }));
+}
+const Vector2Adapter = CreateCoreTensorAdapter(["x", "y"]);
+const Vector3Adapter = CreateCoreTensorAdapter(["x", "y", "z"]);
+const Vector4Adapter = CreateCoreTensorAdapter(["x", "y", "z", "w"]);
+const QuaternionTensorAdapter = CreateCoreTensorAdapter(["x", "y", "z", "w"]);
+const QuaternionAdapter = {
+    quaternion: QuaternionTensorAdapter,
+    euler: Vector3Adapter,
+    fromEuler: (value) => Quaternion.FromEulerAngles(value.x, value.y, value.z),
+    toEuler: (value) => value.toEulerAngles(),
 };
-const Vector2PropertyLine = TensorPropertyLine;
-const Vector3PropertyLine = TensorPropertyLine;
-const Vector4PropertyLine = TensorPropertyLine;
+/**
+ * Edits a Babylon.js Vector2 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector2 property line.
+ */
+const Vector2PropertyLine = (props) => jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector2Adapter });
+/**
+ * Edits a Babylon.js Vector3 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector3 property line.
+ */
+const Vector3PropertyLine = (props) => jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector3Adapter });
+/**
+ * Edits a Babylon.js Vector4 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector4 property line.
+ */
+const Vector4PropertyLine = (props) => jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector4Adapter });
+/**
+ * Edits a Babylon.js Euler rotation value.
+ * @param props The controlled rotation and property-line presentation.
+ * @returns The Euler rotation property line.
+ */
+const RotationVectorPropertyLine = (props) => (jsx(ControlledRotationVectorPropertyLine, { ...props, adapter: Vector3Adapter }));
+/**
+ * Edits a Babylon.js Quaternion value with optional Euler presentation.
+ * @param props The controlled quaternion and property-line presentation.
+ * @returns The quaternion property line.
+ */
+const QuaternionPropertyLine = (props) => jsx(ControlledQuaternionPropertyLine, { ...props, adapter: QuaternionAdapter });
 
 function IsInspectableObject(entity) {
     return !!entity.inspectableCustomProperties;
@@ -28392,5 +28546,5 @@ function DetachDebugLayer() {
 // Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
 AttachDebugLayer();
 
-export { FactorGradientList as $, Accordion as A, Button as B, CheckboxPropertyLine as C, Color4PropertyLine as D, ColorPickerPopup as E, ColorStepGradientComponent as F, ComboBox as G, ComboBoxPropertyLine as H, ComputedProperty as I, ConstructorFactory as J, ConvertOptions as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DebugServiceIdentity as O, Popover as P, DetachDebugLayer as Q, DraggableLine as R, ShellServiceIdentity as S, TextInputPropertyLine as T, Dropdown as U, Vector3PropertyLine as V, EntitySelector as W, ErrorBoundary as X, ExplorerServiceIdentity as Y, ExtensibleAccordion as Z, FactorGradientComponent as _, useToast as a, TextureUpload as a$, FileUploadLine as a0, GetPropertyDescriptor as a1, GizmoServiceIdentity as a2, HexPropertyLine as a3, InfoLabel as a4, InputHexField as a5, InputHsvField as a6, Inspector as a7, InterceptFunction as a8, InterceptProperty as a9, SceneExplorerServiceIdentity as aA, SearchBar as aB, SearchBox as aC, SelectionServiceDefinition as aD, SettingsServiceIdentity as aE, SettingsStore as aF, SettingsStoreIdentity as aG, ShowInspector as aH, SidePaneContainer as aI, SkeletonSelector as aJ, Slider as aK, SpinButton as aL, StartInspectable as aM, StatsServiceIdentity as aN, StringDropdown as aO, StringDropdownPropertyLine as aP, StringifiedPropertyLine as aQ, Switch as aR, SwitchPropertyLine as aS, SyncedSliderInput as aT, SyncedSliderPropertyLine as aU, TeachingMoment as aV, TextAreaPropertyLine as aW, TextInput as aX, TextPropertyLine as aY, Textarea as aZ, TextureSelector as a_, IsPropertyReadonly as aa, LineContainer as ab, LinkPropertyLine as ac, LinkToEntityPropertyLine as ad, List as ae, MakeDialogTeachingMoment as af, MakeLazyComponent as ag, MakeModularBridge as ah, MakeModularTool as ai, MakePopoverTeachingMoment as aj, MakePropertyHook as ak, MakeTeachingMoment as al, MaterialSelector as am, NodeSelector as an, NumberDropdown as ao, NumberDropdownPropertyLine as ap, ObservableCollection as aq, Pane as ar, PlaceholderPropertyLine as as, PositionedPopover as at, PropertiesServiceIdentity as au, Property as av, PropertyContext as aw, PropertyLine as ax, QuaternionPropertyLine as ay, RotationVectorPropertyLine as az, useInterceptObservable as b, Theme as b0, ThemeServiceIdentity as b1, ToastProvider as b2, ToggleButton as b3, Tooltip as b4, UploadButton as b5, Vector2PropertyLine as b6, Vector4PropertyLine as b7, WatcherServiceIdentity as b8, inspectorAssetNotFoundHandler as b9, useAngleConverters as ba, useAsyncResource as bb, useColor3Property as bc, useColor4Property as bd, useEventListener as be, useEventfulState as bf, useKeyListener as bg, useKeyState as bh, useObservableCollection as bi, useOrderedObservableCollection as bj, usePollingObservable as bk, usePropertyChangedNotifier as bl, useQuaternionProperty as bm, useResource as bn, useTheme as bo, useThemeMode as bp, useVector3Property as bq, LinkToEntity as c, SpinButtonPropertyLine as d, useProperty as e, SceneContextIdentity as f, SelectionServiceIdentity as g, useObservableState as h, AccordionSection as i, ButtonLine as j, ToolsServiceIdentity as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BridgeCommandRegistryIdentity as p, BuiltInsExtensionFeed as q, Checkbox as r, ChildWindow as s, Collapse as t, useExtensionManager as u, Color3GradientComponent as v, Color3GradientList as w, Color3PropertyLine as x, Color4GradientComponent as y, Color4GradientList as z };
-//# sourceMappingURL=index-C5ggNiyY.js.map
+export { FactorGradientComponent as $, Accordion as A, Button as B, CheckboxPropertyLine as C, Color4PropertyLine as D, ColorPickerPopup as E, ColorStepGradientComponent as F, ComboBox as G, ComboBoxPropertyLine as H, ComputedProperty as I, ConstructorFactory as J, ConvertOptions as K, Link as L, MessageBar as M, NumberInputPropertyLine as N, DebugServiceIdentity as O, Popover as P, DerivedProperty as Q, DetachDebugLayer as R, ShellServiceIdentity as S, TextInputPropertyLine as T, DraggableLine as U, Vector3PropertyLine as V, Dropdown as W, EntitySelector as X, ErrorBoundary as Y, ExplorerServiceIdentity as Z, ExtensibleAccordion as _, useToast as a, TextureSelector as a$, FactorGradientList as a0, FileUploadLine as a1, GetPropertyDescriptor as a2, GizmoServiceIdentity as a3, HexPropertyLine as a4, InfoLabel as a5, InputHexField as a6, InputHsvField as a7, Inspector as a8, InterceptFunction as a9, RotationVectorPropertyLine as aA, SceneExplorerServiceIdentity as aB, SearchBar as aC, SearchBox as aD, SelectionServiceDefinition as aE, SettingsServiceIdentity as aF, SettingsStore as aG, SettingsStoreIdentity as aH, ShowInspector as aI, SidePaneContainer as aJ, SkeletonSelector as aK, Slider as aL, SpinButton as aM, StartInspectable as aN, StatsServiceIdentity as aO, StringDropdown as aP, StringDropdownPropertyLine as aQ, StringifiedPropertyLine as aR, Switch as aS, SwitchPropertyLine as aT, SyncedSliderInput as aU, SyncedSliderPropertyLine as aV, TeachingMoment as aW, TextAreaPropertyLine as aX, TextInput as aY, TextPropertyLine as aZ, Textarea as a_, InterceptProperty as aa, IsPropertyReadonly as ab, LineContainer as ac, LinkPropertyLine as ad, LinkToEntityPropertyLine as ae, List as af, MakeDialogTeachingMoment as ag, MakeLazyComponent as ah, MakeModularBridge as ai, MakeModularTool as aj, MakePopoverTeachingMoment as ak, MakePropertyHook as al, MakeTeachingMoment as am, MaterialSelector as an, NodeSelector as ao, NumberDropdown as ap, NumberDropdownPropertyLine as aq, ObservableCollection as ar, Pane as as, PlaceholderPropertyLine as at, PositionedPopover as au, PropertiesServiceIdentity as av, Property as aw, PropertyContext as ax, PropertyLine as ay, QuaternionPropertyLine as az, useInterceptObservable as b, TextureUpload as b0, Theme as b1, ThemeServiceIdentity as b2, ToastProvider as b3, ToggleButton as b4, Tooltip as b5, UploadButton as b6, Vector2PropertyLine as b7, Vector4PropertyLine as b8, WatcherServiceIdentity as b9, inspectorAssetNotFoundHandler as ba, useAngleConverters as bb, useAsyncResource as bc, useColor3Property as bd, useColor4Property as be, useEventListener as bf, useEventfulState as bg, useKeyListener as bh, useKeyState as bi, useObservableCollection as bj, useOrderedObservableCollection as bk, usePollingObservable as bl, usePropertyChangedNotifier as bm, useQuaternionProperty as bn, useResource as bo, useTheme as bp, useThemeMode as bq, useVector3Property as br, LinkToEntity as c, SpinButtonPropertyLine as d, useProperty as e, SceneContextIdentity as f, SelectionServiceIdentity as g, useObservableState as h, AccordionSection as i, ButtonLine as j, ToolsServiceIdentity as k, AccordionSectionItem as l, AttachDebugLayer as m, BooleanBadgePropertyLine as n, BoundProperty as o, BridgeCommandRegistryIdentity as p, BuiltInsExtensionFeed as q, Checkbox as r, ChildWindow as s, Collapse as t, useExtensionManager as u, Color3GradientComponent as v, Color3GradientList as w, Color3PropertyLine as x, Color4GradientComponent as y, Color4GradientList as z };
+//# sourceMappingURL=index-DvyGGbVg.js.map