@babylonjs/inspector 8.41.1-preview → 8.41.2

package/lib/quickCreateToolsService-C-yzV033.js

@@ -1,545 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { b as Button, c as TextInputPropertyLine, d as SpinButtonPropertyLine, e as CheckboxPropertyLine, V as Vector3PropertyLine, f as ShellServiceIdentity, g as SceneContextIdentity, u as useObservableState, A as Accordion, h as AccordionSection } from './index-BUtV9Nch.js';
-import { Settings20Regular, CollectionsAdd20Regular } from '@fluentui/react-icons';
-import '@babylonjs/core/Particles/webgl2ParticleSystem.js';
-import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder.js';
-import { useState, useRef } from 'react';
-import { Popover, PopoverTrigger, PopoverSurface, makeStyles, tokens } from '@fluentui/react-components';
-import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
-import { NodeMaterial } from '@babylonjs/core/Materials/Node/nodeMaterial.js';
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js';
-import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial.js';
-import { PointLight } from '@babylonjs/core/Lights/pointLight.js';
-import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight.js';
-import { SpotLight } from '@babylonjs/core/Lights/spotLight.js';
-import { Vector3 } from '@babylonjs/core/Maths/math.vector.js';
-import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
-import { UniversalCamera } from '@babylonjs/core/Cameras/universalCamera.js';
-import { ParticleSystem } from '@babylonjs/core/Particles/particleSystem.js';
-import { GPUParticleSystem } from '@babylonjs/core/Particles/gpuParticleSystem.js';
-import { NodeParticleSystemSet } from '@babylonjs/core/Particles/Node/nodeParticleSystemSet.js';
-import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
-import '@babylonjs/core/Maths/math.color.js';
-import '@babylonjs/core/Misc/observable.js';
-import '@fluentui/react-motion-components-preview';
-import '@babylonjs/core/Misc/typeStore.js';
-import 'usehooks-ts';
-import '@babylonjs/core/Misc/asyncLock.js';
-import '@babylonjs/core/Misc/deferred.js';
-import '@babylonjs/core/Maths/math.scalar.functions.js';
-import '@fluentui-contrib/react-virtualizer';
-import '@babylonjs/addons/msdfText/fontAsset.js';
-import '@babylonjs/addons/msdfText/textRenderer.js';
-import '@babylonjs/core/Debug/physicsViewer.js';
-import '@babylonjs/core/Materials/materialFlags.js';
-import '@babylonjs/core/Meshes/Builders/groundBuilder.js';
-import '@babylonjs/core/Misc/tools.js';
-import '@babylonjs/core/Rendering/utilityLayerRenderer.js';
-import '@babylonjs/materials/grid/gridMaterial.js';
-import '@babylonjs/core/Misc/dataStorage.js';
-import '@babylonjs/core/Instrumentation/engineInstrumentation.js';
-import '@babylonjs/core/Instrumentation/sceneInstrumentation.js';
-import '@babylonjs/core/Engines/AbstractEngine/abstractEngine.timeQuery.js';
-import '@babylonjs/core/Engines/Extensions/engine.query.js';
-import '@babylonjs/core/Engines/WebGPU/Extensions/engine.query.js';
-import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollectionStrategies.js';
-import '@babylonjs/core/Misc/PerformanceViewer/performanceViewerSceneExtension.js';
-import '@babylonjs/core/Misc/pressureObserverWrapper.js';
-import '@babylonjs/core/Engines/abstractEngine.js';
-import '@babylonjs/core/Misc/logger.js';
-import 'react-dom/client';
-import '@babylonjs/core/FrameGraph/frameGraphUtils.js';
-import '@babylonjs/core/Gizmos/cameraGizmo.js';
-import '@babylonjs/core/Gizmos/lightGizmo.js';
-import '@babylonjs/core/Bones/bone.js';
-import '@babylonjs/core/Cameras/camera.js';
-import '@babylonjs/core/Gizmos/gizmoManager.js';
-import '@babylonjs/core/Lights/light.js';
-import '@babylonjs/core/Meshes/abstractMesh.js';
-import '@babylonjs/core/node.js';
-import '@babylonjs/core/Animations/animationGroup.js';
-import '@babylonjs/core/Animations/animationPropertiesOverride.js';
-import '@babylonjs/addons/atmosphere/atmosphere.js';
-import '@babylonjs/core/Cameras/followCamera.js';
-import '@babylonjs/core/Cameras/freeCamera.js';
-import '@babylonjs/core/Cameras/targetCamera.js';
-import '@babylonjs/core/scene.js';
-import '@babylonjs/core/FrameGraph/frameGraph.js';
-import '@babylonjs/core/Lights/hemisphericLight.js';
-import '@babylonjs/core/Lights/rectAreaLight.js';
-import '@babylonjs/core/Lights/shadowLight.js';
-import '@babylonjs/core/Lights/Shadows/cascadedShadowGenerator.js';
-import '@babylonjs/core/Lights/Shadows/shadowGenerator.js';
-import '@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent.js';
-import '@babylonjs/core/Materials/material.js';
-import '@babylonjs/core/Materials/multiMaterial.js';
-import '@babylonjs/core/Materials/PBR/pbrBaseMaterial.js';
-import '@babylonjs/core/Materials/PBR/pbrBaseSimpleMaterial.js';
-import '@babylonjs/core/Materials/PBR/openpbrMaterial.js';
-import '@babylonjs/materials/sky/skyMaterial.js';
-import '@babylonjs/core/Engines/constants.js';
-import '@babylonjs/core/Engines/engine.js';
-import '@babylonjs/core/Misc/fileTools.js';
-import '@babylonjs/core/Meshes/mesh.js';
-import '@babylonjs/core/Debug/skeletonViewer.js';
-import '@babylonjs/core/Meshes/buffer.js';
-import '@babylonjs/core/Meshes/Builders/linesBuilder.js';
-import '@babylonjs/core/Meshes/instancedMesh.js';
-import '@babylonjs/core/Rendering/renderingManager.js';
-import '@babylonjs/core/Rendering/edgesRenderer.js';
-import '@babylonjs/core/Rendering/outlineRenderer.js';
-import '@babylonjs/core/Meshes/GaussianSplatting/gaussianSplattingMesh.js';
-import '@babylonjs/core/Misc/gradients.js';
-import '@babylonjs/core/Materials/Node/Blocks/gradientBlock.js';
-import '@babylonjs/core/Particles/attractor.js';
-import '@babylonjs/core/Meshes/Builders/sphereBuilder.js';
-import '@babylonjs/core/Meshes/transformNode.js';
-import '@babylonjs/core/Physics/v2/IPhysicsEnginePlugin.js';
-import '@babylonjs/core/Physics/v2/physicsEngineComponent.js';
-import '@babylonjs/core/PostProcesses/postProcess.js';
-import '@babylonjs/core/Materials/Textures/cubeTexture.js';
-import '@babylonjs/core/Materials/imageProcessingConfiguration.js';
-import '@babylonjs/core/Bones/skeleton.js';
-import '@babylonjs/core/Sprites/sprite.js';
-import '@babylonjs/core/Sprites/spriteManager.js';
-import '@babylonjs/core/Materials/Textures/baseTexture.js';
-import '@babylonjs/core/Materials/Textures/multiRenderTarget.js';
-import '@babylonjs/core/Materials/Textures/renderTargetTexture.js';
-import '@babylonjs/core/Materials/Textures/thinTexture.js';
-import '@babylonjs/core/Misc/textureTools.js';
-import '@babylonjs/core/Lights/Clustered/clusteredLightContainer.js';
-import '@babylonjs/core/Rendering/boundingBoxRenderer.js';
-import '@babylonjs/core/PostProcesses/RenderPipeline/postProcessRenderPipelineManagerSceneComponent.js';
-import '@babylonjs/core/Sprites/spriteSceneComponent.js';
-import '@babylonjs/core/Materials/Textures/dynamicTexture.js';
-import '@babylonjs/core/Events/pointerEvents.js';
-import '@babylonjs/core/Engines/engineStore.js';
-import '@babylonjs/core/Misc/uniqueIdGenerator.js';
-import '@babylonjs/core/Debug/debugLayer.js';
-import '@babylonjs/core/Misc/lazy.js';
-
-/**
- * Settings popover component, can be updated to use shared popover once it exists
- * @param props
- * @returns
- */
-const SettingsPopover = (props) => {
-    const { children } = props;
-    const [popoverOpen, setPopoverOpen] = useState(false);
-    return (jsxs(Popover, { open: popoverOpen, onOpenChange: (_, data) => setPopoverOpen(data.open), positioning: "below-start", trapFocus: true, children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsx("button", { type: "button", onClick: () => setPopoverOpen(true), style: {
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        border: "none",
-                        background: "transparent",
-                        cursor: "pointer",
-                        padding: "5px 8px",
-                        borderRadius: "4px",
-                    }, children: jsx(Settings20Regular, {}) }) }), jsx(PopoverSurface, { children: jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12, padding: 16, minWidth: 300, maxWidth: 400 }, children: children }) })] }));
-};
-
-const useStyles$4 = makeStyles({
-    section: {
-        display: "flex",
-        flexDirection: "column",
-        rowGap: tokens.spacingVerticalM,
-    },
-    row: { display: "flex", alignItems: "center", gap: "4px" },
-});
-const SetCamera = function (scene) {
-    const camera = scene.activeCamera;
-    if (camera && camera.radius !== undefined) {
-        camera.radius = 5;
-    }
-};
-/**
- * @internal
- */
-const MeshesContent = ({ scene }) => {
-    const classes = useStyles$4();
-    const [sphereParams, setSphereParams] = useState({
-        name: "Sphere",
-        segments: 32,
-        diameter: 1,
-        diameterX: 1,
-        diameterY: 1,
-        diameterZ: 1,
-        arc: 1,
-        slice: 1,
-        uniform: true,
-    });
-    const handleSphereParamChange = (key, value) => {
-        setSphereParams((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
-    };
-    const [boxParams, setBoxParams] = useState({
-        name: "Box",
-        size: 1,
-        width: 1,
-        height: 1,
-        depth: 1,
-    });
-    const handleBoxParamChange = (key, value) => {
-        setBoxParams((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
-    };
-    const [cylinderParams, setCylinderParams] = useState({
-        name: "Cylinder",
-        height: 2,
-        diameterTop: 1,
-        diameterBottom: 1,
-        diameter: 1,
-        tessellation: 32,
-        subdivisions: 1,
-        arc: 1,
-    });
-    const handleCylinderParamChange = (key, value) => {
-        setCylinderParams((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
-    };
-    const [coneParams, setConeParams] = useState({
-        name: "Cone",
-        height: 2,
-        diameter: 1,
-        diameterTop: 0,
-        diameterBottom: 1,
-        tessellation: 32,
-        subdivisions: 1,
-        arc: 1,
-    });
-    const [coneUp, setConeUp] = useState(true);
-    const handleConeParamChange = (key, value) => {
-        setConeParams((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
-    };
-    const [groundParams, setGroundParams] = useState({
-        name: "Ground",
-        width: 10,
-        height: 10,
-        subdivisions: 1,
-        subdivisionsX: 1,
-        subdivisionsY: 1,
-    });
-    const handleGroundParamChange = (key, value) => {
-        setGroundParams((prev) => ({
-            ...prev,
-            [key]: value,
-        }));
-    };
-    const fileInputRef = useRef(null);
-    const [importMeshName, setImportMeshName] = useState("ImportedMesh");
-    const handleLocalMeshImport = (event) => {
-        const files = event.target.files;
-        if (!files || files.length === 0) {
-            return;
-        }
-        const filesArray = Array.from(files);
-        if (importMeshName.trim().length > 0 && filesArray.length > 0) {
-            const originalFile = filesArray[0];
-            const extensionIndex = originalFile.name.lastIndexOf(".");
-            const extension = extensionIndex >= 0 ? originalFile.name.substring(extensionIndex) : "";
-            const sanitizedName = importMeshName.trim();
-            const desiredFileName = sanitizedName.toLowerCase().endsWith(extension.toLowerCase()) ? sanitizedName : `${sanitizedName}${extension}`;
-            filesArray[0] = new File([originalFile], desiredFileName, { type: originalFile.type, lastModified: originalFile.lastModified });
-        }
-        const filesInput = new FilesInput(scene.getEngine(), scene, null, null, null, null, null, null, (_sceneFile, _scene, message) => {
-            alert(message ? `Failed to import mesh: ${message}` : "Failed to import mesh.");
-        }, true);
-        filesInput.displayLoadingUI = false;
-        filesInput.loadFiles({ target: { files: filesArray } });
-        filesInput.dispose();
-        event.target.value = "";
-    };
-    return (jsxs("div", { className: classes.section, children: [jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: () => {
-                            MeshBuilder.CreateSphere("Sphere", {}, scene);
-                            SetCamera(scene);
-                        }, label: "Sphere" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: sphereParams.name, onChange: (val) => handleSphereParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Segments", value: sphereParams.segments, min: 0, onChange: (val) => handleSphereParamChange("segments", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter", value: sphereParams.diameter, min: 0, step: 0.1, onChange: (val) => handleSphereParamChange("diameter", val), disabled: !sphereParams.uniform }), jsx(CheckboxPropertyLine, { label: "Uniform", value: sphereParams.uniform, onChange: (checked) => handleSphereParamChange("uniform", checked) }), jsx(SpinButtonPropertyLine, { label: "Diameter X", value: sphereParams.diameterX, min: 0, step: 0.1, onChange: (val) => handleSphereParamChange("diameterX", val), disabled: sphereParams.uniform }), jsx(SpinButtonPropertyLine, { label: "Diameter Y", value: sphereParams.diameterY, min: 0, step: 0.1, onChange: (val) => handleSphereParamChange("diameterY", val), disabled: sphereParams.uniform }), jsx(SpinButtonPropertyLine, { label: "Diameter Z", value: sphereParams.diameterZ, min: 0, step: 0.1, onChange: (val) => handleSphereParamChange("diameterZ", val), disabled: sphereParams.uniform }), jsx(SpinButtonPropertyLine, { label: "Arc", value: sphereParams.arc, min: 0, max: 1, step: 0.1, onChange: (val) => handleSphereParamChange("arc", val) }), jsx(SpinButtonPropertyLine, { label: "Slice", value: sphereParams.slice, min: 0, max: 1, step: 0.1, onChange: (val) => handleSphereParamChange("slice", val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
-                                        // Create params object based on uniform checkbox
-                                        const createParams = {
-                                            segments: sphereParams.segments,
-                                            arc: sphereParams.arc,
-                                            slice: sphereParams.slice,
-                                        };
-                                        if (sphereParams.uniform) {
-                                            // If uniform is checked, use diameter
-                                            createParams.diameter = sphereParams.diameter;
-                                        }
-                                        else {
-                                            // If uniform is unchecked, use individual diameters
-                                            createParams.diameterX = sphereParams.diameterX;
-                                            createParams.diameterY = sphereParams.diameterY;
-                                            createParams.diameterZ = sphereParams.diameterZ;
-                                        }
-                                        MeshBuilder.CreateSphere(sphereParams.name, createParams, scene);
-                                        SetCamera(scene);
-                                    }, label: "Create" }) })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: () => {
-                            MeshBuilder.CreateBox("Box", {}, scene);
-                            SetCamera(scene);
-                        }, label: "Box" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: boxParams.name, onChange: (val) => handleBoxParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Size", value: boxParams.size, min: 0, step: 0.1, onChange: (val) => handleBoxParamChange("size", val) }), jsx(SpinButtonPropertyLine, { label: "Width", value: boxParams.width, min: 0, step: 0.1, onChange: (val) => handleBoxParamChange("width", val) }), jsx(SpinButtonPropertyLine, { label: "Height", value: boxParams.height, min: 0, step: 0.1, onChange: (val) => handleBoxParamChange("height", val) }), jsx(SpinButtonPropertyLine, { label: "Depth", value: boxParams.depth, min: 0, step: 0.1, onChange: (val) => handleBoxParamChange("depth", val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
-                                        MeshBuilder.CreateBox(boxParams.name, boxParams, scene);
-                                        SetCamera(scene);
-                                    }, label: "Create" }) })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: () => {
-                            MeshBuilder.CreateCylinder("Cylinder", {}, scene);
-                            SetCamera(scene);
-                        }, label: "Cylinder" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: cylinderParams.name, onChange: (val) => handleCylinderParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Height", value: cylinderParams.height, min: 0, step: 0.1, onChange: (val) => handleCylinderParamChange("height", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter Top", value: cylinderParams.diameterTop, min: 0, step: 0.1, onChange: (val) => handleCylinderParamChange("diameterTop", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter Bottom", value: cylinderParams.diameterBottom, min: 0, step: 0.1, onChange: (val) => handleCylinderParamChange("diameterBottom", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter", value: cylinderParams.diameter, min: 0, step: 0.1, onChange: (val) => handleCylinderParamChange("diameter", val) }), jsx(SpinButtonPropertyLine, { label: "Tessellation", value: cylinderParams.tessellation, min: 3, onChange: (val) => handleCylinderParamChange("tessellation", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions", value: cylinderParams.subdivisions, min: 1, onChange: (val) => handleCylinderParamChange("subdivisions", val) }), jsx(SpinButtonPropertyLine, { label: "Arc", value: cylinderParams.arc, min: 0, max: 1, step: 0.1, onChange: (val) => handleCylinderParamChange("arc", val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
-                                        MeshBuilder.CreateCylinder(cylinderParams.name, cylinderParams, scene);
-                                        SetCamera(scene);
-                                    }, label: "Create" }) })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: () => {
-                            MeshBuilder.CreateCylinder("Cone", { diameterTop: 0 }, scene);
-                            SetCamera(scene);
-                        }, label: "Cone" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: coneParams.name, onChange: (val) => handleConeParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Height", value: coneParams.height, min: 0, step: 0.1, onChange: (val) => handleConeParamChange("height", val) }), jsx(SpinButtonPropertyLine, { label: "Diameter", value: coneParams.diameter, min: 0, step: 0.1, onChange: (val) => handleConeParamChange("diameter", val) }), jsx(SpinButtonPropertyLine, { label: "Tessellation", value: coneParams.tessellation, min: 3, onChange: (val) => handleConeParamChange("tessellation", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions", value: coneParams.subdivisions, min: 1, onChange: (val) => handleConeParamChange("subdivisions", val) }), jsx(SpinButtonPropertyLine, { label: "Arc", value: coneParams.arc, min: 0, max: 1, step: 0.1, onChange: (val) => handleConeParamChange("arc", val) }), jsx(CheckboxPropertyLine, { label: "Up", value: coneUp, onChange: (val) => setConeUp(val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
-                                        const coneParamsToUse = {
-                                            ...coneParams,
-                                            diameterTop: coneUp ? 0 : coneParams.diameterTop,
-                                            diameterBottom: coneUp ? coneParams.diameterBottom : 0,
-                                        };
-                                        MeshBuilder.CreateCylinder(coneParams.name, coneParamsToUse, scene);
-                                        SetCamera(scene);
-                                    }, label: "Create" }) })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: () => {
-                            MeshBuilder.CreateGround("Ground", {}, scene);
-                            SetCamera(scene);
-                        }, label: "Ground" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: groundParams.name, onChange: (val) => handleGroundParamChange("name", val) }), jsx(SpinButtonPropertyLine, { label: "Width", value: groundParams.width, min: 0, step: 0.1, onChange: (val) => handleGroundParamChange("width", val) }), jsx(SpinButtonPropertyLine, { label: "Height", value: groundParams.height, min: 0, step: 0.1, onChange: (val) => handleGroundParamChange("height", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions", value: groundParams.subdivisions, min: 1, onChange: (val) => handleGroundParamChange("subdivisions", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions X", value: groundParams.subdivisionsX, min: 1, onChange: (val) => handleGroundParamChange("subdivisionsX", val) }), jsx(SpinButtonPropertyLine, { label: "Subdivisions Y", value: groundParams.subdivisionsY, min: 1, onChange: (val) => handleGroundParamChange("subdivisionsY", val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 16 }, children: jsx(Button, { appearance: "primary", onClick: () => {
-                                        MeshBuilder.CreateGround(groundParams.name, groundParams, scene);
-                                        SetCamera(scene);
-                                    }, label: "Create" }) })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: () => {
-                            fileInputRef.current?.click();
-                        }, label: "Import Mesh" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: importMeshName, onChange: (val) => setImportMeshName(val) }), jsx("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: jsx(Button, { appearance: "primary", onClick: () => {
-                                        fileInputRef.current?.click();
-                                    }, label: "Import" }) })] }), jsx("input", { ref: fileInputRef, type: "file", accept: ".babylon,.glb,.gltf,.obj,.stl,.ply,.mesh,.babylonmeshdata", multiple: true, style: { display: "none" }, onChange: handleLocalMeshImport })] })] }));
-};
-
-const useStyles$3 = makeStyles({
-    section: {
-        display: "flex",
-        flexDirection: "column",
-        rowGap: tokens.spacingVerticalM,
-    },
-    row: { display: "flex", alignItems: "center", gap: "4px" },
-});
-/**
- * Materials content component
- * @param props - Component props
- * @returns React component
- */
-const MaterialsContent = ({ scene }) => {
-    const classes = useStyles$3();
-    // Node Material state
-    const [nodeMaterialName, setNodeMaterialName] = useState("Node Material");
-    const [nodeMaterialSnippetId, setNodeMaterialSnippetId] = useState("");
-    // PBR Material state
-    const [pbrMaterialName, setPbrMaterialName] = useState("PBR Material");
-    // Standard Material state
-    const [standardMaterialName, setStandardMaterialName] = useState("Standard Material");
-    const handleCreateNodeMaterialAsync = async () => {
-        if (nodeMaterialSnippetId) {
-            try {
-                const nodeMaterial = await NodeMaterial.ParseFromSnippetAsync(nodeMaterialSnippetId, scene);
-                nodeMaterial.name = nodeMaterialName;
-            }
-            catch (e) {
-                alert("Failed to load Node Material from snippet: " + e);
-            }
-        }
-        else {
-            const nodeMaterial = new NodeMaterial(nodeMaterialName, scene);
-            nodeMaterial.build();
-        }
-    };
-    const handleCreatePBRMaterial = () => {
-        new PBRMaterial(pbrMaterialName, scene);
-    };
-    const handleCreateStandardMaterial = () => {
-        new StandardMaterial(standardMaterialName, scene);
-    };
-    return (jsxs("div", { className: classes.section, children: [jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateNodeMaterialAsync, label: "Node Material" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: nodeMaterialName, onChange: (value) => setNodeMaterialName(value) }), jsx(TextInputPropertyLine, { label: "Snippet ID", value: nodeMaterialSnippetId, onChange: (value) => setNodeMaterialSnippetId(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateNodeMaterialAsync, label: "Create" })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreatePBRMaterial, label: "PBR Material" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: pbrMaterialName, onChange: (value) => setPbrMaterialName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreatePBRMaterial, label: "Create" })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateStandardMaterial, label: "Standard Material" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: standardMaterialName, onChange: (value) => setStandardMaterialName(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateStandardMaterial, label: "Create" })] })] })] }));
-};
-
-const useStyles$2 = makeStyles({
-    section: {
-        display: "flex",
-        flexDirection: "column",
-        rowGap: tokens.spacingVerticalM,
-    },
-    row: { display: "flex", alignItems: "center", gap: "4px" },
-});
-/**
- * Lights content component
- * @param props - Component props
- * @returns React component
- */
-const LightsContent = ({ scene }) => {
-    const classes = useStyles$2();
-    // Point Light state
-    const [pointLightName, setPointLightName] = useState("Point Light");
-    const [pointLightPosition, setPointLightPosition] = useState(new Vector3(0, 5, 0));
-    // Directional Light state
-    const [directionalLightName, setDirectionalLightName] = useState("Directional Light");
-    const [directionalLightDirection, setDirectionalLightDirection] = useState(new Vector3(1, -1, 0));
-    // Spotlight state
-    const [spotlightName, setSpotlightName] = useState("Spotlight");
-    const [spotlightPosition, setSpotlightPosition] = useState(new Vector3(0, 5, 0));
-    const [spotlightDirection, setSpotlightDirection] = useState(new Vector3(0, -1, 0));
-    const [spotlightAngle, setSpotlightAngle] = useState(1);
-    const [spotlightExponent, setSpotlightExponent] = useState(1);
-    const handleCreatePointLight = () => {
-        const light = new PointLight(pointLightName, pointLightPosition, scene);
-        light.intensity = 1.0;
-    };
-    const handleCreateDirectionalLight = () => {
-        const dirLight = new DirectionalLight(directionalLightName, directionalLightDirection, scene);
-        dirLight.intensity = 1.0;
-    };
-    const handleCreateSpotlight = () => {
-        const spotlight = new SpotLight(spotlightName, spotlightPosition, spotlightDirection, spotlightAngle, spotlightExponent, scene);
-        spotlight.intensity = 1.0;
-    };
-    return (jsxs("div", { className: classes.section, children: [jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreatePointLight, label: "Point Light" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: pointLightName, onChange: (value) => setPointLightName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: pointLightPosition, onChange: (value) => setPointLightPosition(value) }), jsx(Button, { appearance: "primary", onClick: handleCreatePointLight, label: "Create" })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateDirectionalLight, label: "Directional Light" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: directionalLightName, onChange: (value) => setDirectionalLightName(value) }), jsx(Vector3PropertyLine, { label: "Direction", value: directionalLightDirection, onChange: (value) => setDirectionalLightDirection(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateDirectionalLight, label: "Create" })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateSpotlight, label: "Spotlight" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: spotlightName, onChange: (value) => setSpotlightName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: spotlightPosition, onChange: (value) => setSpotlightPosition(value) }), jsx(Vector3PropertyLine, { label: "Direction", value: spotlightDirection, onChange: (value) => setSpotlightDirection(value) }), jsx(SpinButtonPropertyLine, { label: "Angle", value: spotlightAngle, onChange: (value) => setSpotlightAngle(value), min: 0, max: Math.PI, step: 0.1 }), jsx(SpinButtonPropertyLine, { label: "Exponent", value: spotlightExponent, onChange: (value) => setSpotlightExponent(value), min: 0, max: 10, step: 0.1 }), jsx(Button, { appearance: "primary", onClick: handleCreateSpotlight, label: "Create" })] })] })] }));
-};
-
-const useStyles$1 = makeStyles({
-    section: {
-        display: "flex",
-        flexDirection: "column",
-        rowGap: tokens.spacingVerticalM,
-    },
-    row: { display: "flex", alignItems: "center", gap: "4px" },
-});
-/**
- * Cameras content component
- * @param props - Component props
- * @returns React component
- */
-const CamerasContent = ({ scene }) => {
-    const classes = useStyles$1();
-    // ArcRotate Camera state
-    const [arcRotateCameraName, setArcRotateCameraName] = useState("ArcRotate Camera");
-    const [arcRotateCameraTarget, setArcRotateCameraTarget] = useState(new Vector3(0, 0, 0));
-    const [arcRotateCameraRadius, setArcRotateCameraRadius] = useState(10);
-    const [arcRotateCameraAlpha, setArcRotateCameraAlpha] = useState(0);
-    const [arcRotateCameraBeta, setArcRotateCameraBeta] = useState(45);
-    const [arcRotateCameraUseRadians, setArcRotateCameraUseRadians] = useState(false);
-    // Universal Camera state
-    const [universalCameraName, setUniversalCameraName] = useState("Universal Camera");
-    const [universalCameraPosition, setUniversalCameraPosition] = useState(new Vector3(0, 1, -10));
-    const handleCreateArcRotateCamera = () => {
-        const alpha = arcRotateCameraUseRadians ? arcRotateCameraAlpha : (arcRotateCameraAlpha * Math.PI) / 180;
-        const beta = arcRotateCameraUseRadians ? arcRotateCameraBeta : (arcRotateCameraBeta * Math.PI) / 180;
-        const camera = new ArcRotateCamera(arcRotateCameraName, alpha, beta, arcRotateCameraRadius, arcRotateCameraTarget, scene);
-        camera.attachControl(scene.getEngine().getRenderingCanvas(), true);
-        if (!scene.activeCamera) {
-            scene.activeCamera = camera;
-        }
-    };
-    const handleCreateUniversalCamera = () => {
-        const camera = new UniversalCamera(universalCameraName, universalCameraPosition, scene);
-        camera.attachControl(scene.getEngine().getRenderingCanvas(), true);
-        if (!scene.activeCamera) {
-            scene.activeCamera = camera;
-        }
-    };
-    return (jsxs("div", { className: classes.section, children: [jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateArcRotateCamera, label: "ArcRotate Camera" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: arcRotateCameraName, onChange: (value) => setArcRotateCameraName(value) }), jsx(Vector3PropertyLine, { label: "Target", value: arcRotateCameraTarget, onChange: (value) => setArcRotateCameraTarget(value) }), jsx(SpinButtonPropertyLine, { label: "Radius", value: arcRotateCameraRadius, onChange: (value) => setArcRotateCameraRadius(value), min: 0.1, max: 1000, step: 0.5 }), jsx(SpinButtonPropertyLine, { label: `Alpha ${arcRotateCameraUseRadians ? "(rad)" : "(deg)"}`, value: arcRotateCameraAlpha, onChange: (value) => setArcRotateCameraAlpha(value), min: arcRotateCameraUseRadians ? -Math.PI * 2 : -360, max: arcRotateCameraUseRadians ? Math.PI * 2 : 360, step: arcRotateCameraUseRadians ? 0.1 : 5 }), jsx(SpinButtonPropertyLine, { label: `Beta ${arcRotateCameraUseRadians ? "(rad)" : "(deg)"}`, value: arcRotateCameraBeta, onChange: (value) => setArcRotateCameraBeta(value), min: arcRotateCameraUseRadians ? 0 : 0, max: arcRotateCameraUseRadians ? Math.PI : 180, step: arcRotateCameraUseRadians ? 0.1 : 5 }), jsx(CheckboxPropertyLine, { label: "Use Radians", value: arcRotateCameraUseRadians, onChange: (value) => setArcRotateCameraUseRadians(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateArcRotateCamera, label: "Create" })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateUniversalCamera, label: "Universal Camera" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: universalCameraName, onChange: (value) => setUniversalCameraName(value) }), jsx(Vector3PropertyLine, { label: "Position", value: universalCameraPosition, onChange: (value) => setUniversalCameraPosition(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateUniversalCamera, label: "Create" })] })] })] }));
-};
-
-const useStyles = makeStyles({
-    section: {
-        display: "flex",
-        flexDirection: "column",
-        rowGap: tokens.spacingVerticalM,
-    },
-    row: { display: "flex", alignItems: "center", gap: "4px" },
-});
-/**
- * Particles content component
- * @param props - Component props
- * @returns React component
- */
-const ParticlesContent = ({ scene }) => {
-    const classes = useStyles();
-    // CPU Particle System state
-    const [cpuParticleSystemName, setCpuParticleSystemName] = useState("Particle System");
-    const [cpuParticleSystemCapacity, setCpuParticleSystemCapacity] = useState(2000);
-    // GPU Particle System state
-    const [gpuParticleSystemName, setGpuParticleSystemName] = useState("GPU Particle System");
-    const [gpuParticleSystemCapacity, setGpuParticleSystemCapacity] = useState(2000);
-    // Node Particle System state
-    const [nodeParticleSystemName, setNodeParticleSystemName] = useState("Node Particle System");
-    const [nodeParticleSystemSnippetId, setNodeParticleSystemSnippetId] = useState("");
-    const handleCreateCPUParticleSystem = () => {
-        setTimeout(() => {
-            const system = new ParticleSystem(cpuParticleSystemName, cpuParticleSystemCapacity, scene);
-            system.particleTexture = new Texture("https://assets.babylonjs.com/textures/flare.png", scene);
-            system.start();
-        }, 0);
-    };
-    const handleCreateGPUParticleSystem = () => {
-        if (GPUParticleSystem.IsSupported) {
-            setTimeout(() => {
-                const system = new GPUParticleSystem(gpuParticleSystemName, { capacity: gpuParticleSystemCapacity }, scene);
-                system.particleTexture = new Texture("https://assets.babylonjs.com/textures/flare.png", scene);
-                system.start();
-            }, 0);
-        }
-        else {
-            alert("GPU Particle System is not supported.");
-        }
-    };
-    const handleCreateNodeParticleSystemAsync = async () => {
-        try {
-            let nodeParticleSet;
-            const snippetId = nodeParticleSystemSnippetId.trim();
-            if (snippetId) {
-                nodeParticleSet = await NodeParticleSystemSet.ParseFromSnippetAsync(snippetId);
-                nodeParticleSet.name = nodeParticleSystemName;
-            }
-            else {
-                nodeParticleSet = NodeParticleSystemSet.CreateDefault(nodeParticleSystemName);
-            }
-            const particleSystemSet = await nodeParticleSet.buildAsync(scene);
-            for (const system of particleSystemSet.systems) {
-                system.name = nodeParticleSystemName;
-            }
-            particleSystemSet.start();
-        }
-        catch (e) {
-            global.console.error("Error creating Node Particle System:", e);
-            alert("Failed to create Node Particle System: " + e);
-        }
-    };
-    return (jsxs("div", { className: classes.section, children: [jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateCPUParticleSystem, label: "CPU Particle System" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: cpuParticleSystemName, onChange: (value) => setCpuParticleSystemName(value) }), jsx(SpinButtonPropertyLine, { label: "Capacity", value: cpuParticleSystemCapacity, onChange: (value) => setCpuParticleSystemCapacity(value), min: 1, max: 100000, step: 100 }), jsx(Button, { appearance: "primary", onClick: handleCreateCPUParticleSystem, label: "Create" })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateGPUParticleSystem, label: "GPU Particle System" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: gpuParticleSystemName, onChange: (value) => setGpuParticleSystemName(value) }), jsx(SpinButtonPropertyLine, { label: "Capacity", value: gpuParticleSystemCapacity, onChange: (value) => setGpuParticleSystemCapacity(value), min: 1, max: 1000000, step: 1000 }), jsx(Button, { appearance: "primary", onClick: handleCreateGPUParticleSystem, label: "Create" })] })] }), jsxs("div", { className: classes.row, children: [jsx(Button, { onClick: handleCreateNodeParticleSystemAsync, label: "Node Particle System" }), jsxs(SettingsPopover, { children: [jsx(TextInputPropertyLine, { label: "Name", value: nodeParticleSystemName, onChange: (value) => setNodeParticleSystemName(value) }), jsx(TextInputPropertyLine, { label: "Snippet ID", value: nodeParticleSystemSnippetId, onChange: (value) => setNodeParticleSystemSnippetId(value) }), jsx(Button, { appearance: "primary", onClick: handleCreateNodeParticleSystemAsync, label: "Create" })] })] })] }));
-};
-
-// TODO: This is just a placeholder for a dynamically installed extension that brings in asset creation tools (node materials, etc.).
-const CreateToolsServiceDefinition = {
-    friendlyName: "Creation Tools",
-    consumes: [ShellServiceIdentity, SceneContextIdentity],
-    factory: (shellService, sceneContext) => {
-        const registration = shellService.addSidePane({
-            key: "Create",
-            title: "Creation Tools",
-            icon: CollectionsAdd20Regular,
-            horizontalLocation: "left",
-            verticalLocation: "top",
-            content: () => {
-                const scene = useObservableState(() => sceneContext.currentScene, sceneContext.currentSceneObservable);
-                return (scene && (jsx(Fragment, { children: jsxs(Accordion, { children: [jsx(AccordionSection, { title: "Meshes", children: jsx(MeshesContent, { scene: scene }) }), jsx(AccordionSection, { title: "Materials", children: jsx(MaterialsContent, { scene: scene }) }), jsx(AccordionSection, { title: "Lights", children: jsx(LightsContent, { scene: scene }) }), jsx(AccordionSection, { title: "Particles", children: jsx(ParticlesContent, { scene: scene }) }), jsx(AccordionSection, { title: "Cameras", children: jsx(CamerasContent, { scene: scene }) })] }) })));
-            },
-        });
-        return {
-            dispose: () => registration.dispose(),
-        };
-    },
-};
-var quickCreateToolsService = {
-    serviceDefinitions: [CreateToolsServiceDefinition],
-};
-
-export { CreateToolsServiceDefinition, quickCreateToolsService as default };
-//# sourceMappingURL=quickCreateToolsService-C-yzV033.js.map